๐ŸŽจ PAN Component Gallery

Explore all available components with live examples and documentation

๐Ÿ”ง Core Components

Essential messaging and state management components

๐Ÿ“ก
<pan-bus>
DOM-native message bus with pub/sub, wildcards, and retained messages
CORE
๐Ÿ”Œ
PanClient
High-level JavaScript API for publish/subscribe messaging
CORE
๐Ÿ”
<pan-auth>
JWT authentication with auto-refresh and secure token management
CORE
๐Ÿ›ก๏ธ
pan-security
Security utilities for CSP, sanitization, and validation
CORE
โœ…
pan-validation
Declarative schema validation for forms and data
CORE

๐Ÿ’พ Data Components

Data fetching, storage, and state management

๐ŸŒ
<pan-data-connector>
REST API integration with automatic data fetching and caching
DATA
๐Ÿ”—
<pan-graphql-connector>
GraphQL queries and mutations via PAN messaging
INTEGRATION
๐Ÿ˜
<pan-php-connector>
PHP backend integration with session management
INTEGRATION
๐Ÿ’ฟ
<pan-idb>
IndexedDB storage with PAN messaging integration
DATA
๐Ÿ“ฆ
<pan-store>
Reactive state management with persistence options
DATA
๐Ÿ”„
<pan-sse>
Server-Sent Events bridge for real-time updates
INTEGRATION
โšก
<pan-websocket>
WebSocket bridge with automatic reconnection
INTEGRATION
๐Ÿ‘ท
<pan-worker>
Web Worker bridge for background processing
INTEGRATION

๐ŸŽจ UI Components

Pre-built user interface components

๐Ÿ“Š
<pan-data-table>
Sortable, filterable data table with pagination
UI
๐Ÿ“
<pan-form>
Schema-driven forms with validation
UI
๐Ÿ—‚๏ธ
<pan-tabs>
Tabbed interface with keyboard navigation
UI
๐ŸชŸ
<pan-modal>
Accessible modal dialogs with focus management
UI
๐Ÿ”ฝ
<pan-dropdown>
Accessible dropdown menus with keyboard support
UI
๐Ÿƒ
<pan-card>
Styled card container for content grouping
UI
๐Ÿ“„
<pan-pagination>
Pagination controls with customizable styling
UI
๐Ÿ”
<pan-search-bar>
Search input with debouncing and suggestions
UI
๐Ÿ“…
<pan-date-picker>
Date picker with calendar UI and validation
UI
๐Ÿ“ˆ
<pan-chart>
Simple chart visualization component
UI
๐Ÿ“
<pan-markdown-editor>
Markdown editor with live preview
UI
๐Ÿ“–
<pan-markdown-renderer>
Render markdown with syntax highlighting
UI

๐Ÿ› ๏ธ Utilities

Helper components and routing

๐Ÿงญ
<pan-router>
Client-side routing with hash or history mode
CORE
๐Ÿ“ก
<pan-forwarder>
Bridge messages between PAN buses and other systems
INTEGRATION
๐Ÿ“
<pan-files>
File upload and management component
UI
๐ŸŽจ
<pan-theme-provider>
Theme management with light/dark mode support
UI
๐Ÿ”ฆ
<pan-theme-toggle>
Toggle button for theme switching
UI

๐Ÿ“š Live Examples

Progressive examples from basic to advanced patterns

00 Introduction 01 Hello Counter 02 Todos & Inspector 03 BroadcastChannel 04 React Integration 05 Lit Integration 06 CRUD Stack 07 REST API 08 Web Workers 09 Schema Forms 10 SSE Store 11 GraphQL 12 PHP Backend 13 SSE Bridge 14 Message Forwarder 15 Client Routing 16 WebSocket 17a Security 17b IndexedDB ๐Ÿ” Authentication ๐Ÿ“ Markdown