🧱 ziegel

Appearance

@breadstone/ziegel-presentation ​

MIT LicenseTypeScriptnpm

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 ​

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

🧩 Features & Usage Examples ​

Accessibility ​

typescript
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 ​

typescript
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 ​

typescript
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 ​

typescript
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 ​

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

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

File Handling ​

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

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

📚 Package import points ​

typescript
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

  • @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