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

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