@breadstone/ziegel-presentation

Comprehensive presentation layer framework for modern web applications. Provides UI utilities, accessibility features, measurement systems, media handling, theming, and navigation components for enterprise TypeScript applications.

Presentation: Complete presentation layer with accessibility, theming, media handling, and advanced UI utilities.

🚀 Overview

@breadstone/ziegel-presentation provides:

• Accessibility: ARIA support, platform detection, and accessibility utilities
• Extensions: DOM, HTML, File, and core type extensions
• Measurement System: Units, dimensions, positioning, and responsive utilities
• Media & Animation: Audio client, image loading, animation framework
• Theming System: Material Design palettes, theme management, skin system
• Input Management: Focus trapping, keyboard handling, gesture recognition
• Navigation: Link handling and navigation utilities

📦 Installation

npm install @breadstone/ziegel-presentation
# or
yarn add @breadstone/ziegel-presentation

🧩 Features & Usage Examples

Accessibility

import { AriaDescriber, AriaRef, Platform } from '@breadstone/ziegel-presentation';

const describer = new AriaDescriber();
describer.describe(element, 'Accessible description');

const ariaRef = new AriaRef();
Platform.isBrowser(); // Platform detection

Measurement System

import { Point, Size, Rect, Length, CornerRadius } from '@breadstone/ziegel-presentation';

const point = new Point(10, 20);
const size = new Size(100, 200);
const rect = new Rect(0, 0, 100, 200);
const length = new Length(16, 'px');
const radius = new CornerRadius(8);

Theming

import { 
  ThemeManager, 
  MaterialTheme, 
  MaterialAccentPalette,
  OperatingSystemThemeDetector 
} from '@breadstone/ziegel-presentation';

const themeManager = new ThemeManager();
const materialTheme = new MaterialTheme();
const palette = new MaterialAccentPalette();
const osTheme = new OperatingSystemThemeDetector();

Media & Animation

import { AudioClient, ImageLoader, RAF, EmojiService } from '@breadstone/ziegel-presentation';

const audioClient = new AudioClient();
const imageLoader = new ImageLoader();
const animation = new RAF();
const emojiService = new EmojiService();

Input Management

import { FocusTrapManager, KeyGesture, ModifierKeys } from '@breadstone/ziegel-presentation';

const focusTrap = new FocusTrapManager();
const gesture = new KeyGesture(['Ctrl', 'S']);

File Handling

import { FileHandler, FileAs } from '@breadstone/ziegel-presentation';

const fileHandler = new FileHandler();
await fileHandler.readAsText(file);

📚 Package import points

import {
    // Accessibility
    AriaAttribute, AriaDescriber, AriaRef, IAriaRef, IAriaValue, Platform,
    
    // Commands
    ICommand,
    
    // Exceptions
    FileReadException, MissingIdException, QuerySelectorElementException,
    
    // Extensions
    DOMTokenListExtensions, DocumentExtensions, FileListExtensions,
    HTMLElementExtensions, HtmlCollectionExtensions, NodeListExtensions,
    NumberExtensions, StringExtensions,
    
    // File I/O
    FileAs, FileHandler, MAIL_TO_URL_SCHEMA, TEL_URL_SCHEMA,
    
    // Input Management
    FocusTrapManager, FocusTrapManagerConfig, Key, KeyName, KeyGesture, ModifierKeys,
    
    // Measurement System
    CornerRadius, CornerRadiusLike, isCornerRadiusLike, cssUnitConvert,
    ICornerRadius, IPoint, IRect, ISize, IThickness,
    Length, Point, PointLike, isPointLike, Rect, RectLike, isRectLike,
    Size, SizeLike, isSizeLike, Thickness, ThicknessLike, isThicknessLike,
    ANGLE_UNIT, AngleUnit, FREQUENCY_UNIT, FrequencyUnit, LENGTH_UNIT, LengthUnit,
    PERCENTAGE_UNIT, PercentageUnit, RESOLUTION_UNIT, ResolutionUnit,
    TIME_UNIT, TimeUnit, UNIT, Unit,
    
    // Media & Animation
    IRAFInit, RAF, AudioClient, IAudioClientOptions, Dimension,
    DensityManager, DisplayDensity, AspectRatio, ImageLoader, ImageLoaderState,
    
    // Emojis
    Emoji, EmojiGroup, EmojiService, IEmojiService,
    
    // Theming System
    IOperatingSystemThemeDetector, IThemeManager, OperatingSystemTheme,
    OperatingSystemThemeDetector, Palette, IPalette, IPaletteEntry,
    MaterialAccentPalette, MaterialSchemePalette, SkinInfo, AccentSkinInfo,
    ISkinInfo, SchemeSkinInfo, SkinType, ThemeManager, ThemeManagerLocator,
    Theme, EmptyTheme, MaterialTheme,
    
    // Navigation
    ILinkTargetProvider, LinkTarget, LinkTargetProvider,
    
    // Reactive Commands
    IReactiveCommand,
    
    // Common Interfaces
    IResult
} from '@breadstone/ziegel-presentation';

📚 API Documentation

For detailed API documentation, visit: API Docs

Related Packages

• @breadstone/ziegel-core: Foundation utilities and type definitions
• @breadstone/ziegel-rx: Reactive programming patterns

License

MIT

Issues

Please report bugs and feature requests in the Issue Tracker

Part of the ziegel Enterprise TypeScript Framework