microui-wc 0.1.0

package/src/index.d.ts

@@ -0,0 +1,234 @@
+/**
+ * microUI v2 TypeScript Definitions
+ * Complete types for 40+ components
+ */
+
+// ============================================
+// CORE
+// ============================================
+export declare class MuElement extends HTMLElement {
+    static observedAttributes: string[];
+    static baseClass: string;
+    static useContainment: boolean;
+
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+
+    render(): void;
+    update(attr: string, newValue: string | null, oldValue: string | null): void;
+    cleanup(): void;
+
+    attr(name: string, defaultValue?: string): string;
+    has(name: string): boolean;
+    emit(name: string, detail?: any): void;
+    listen(target: EventTarget, type: string, handler: EventListener, options?: AddEventListenerOptions): void;
+    setTimeout(fn: () => void, delay: number): number;
+    setInterval(fn: () => void, delay: number): number;
+}
+
+export declare function define(tagName: string, ComponentClass: typeof MuElement): void;
+
+// ============================================
+// EVENT BUS (CrossBus 1.0.0)
+// ============================================
+export interface EventBus {
+    on(event: string, callback: (data: any) => void): () => void;
+    once(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    emit(event: string, data?: any): number;
+    emitAsync(event: string, data?: any): Promise<number>;
+    signal(event: string, data?: any): void;
+    request(peerId: string, handler: string, payload?: any): Promise<any>;
+    broadcastRequest(handler: string, payload?: any): Promise<Map<string, any>>;
+    handle(name: string, handler: (payload: any) => any): () => void;
+    destroy(): void;
+    setMaxListeners(n: number): void;
+    readonly peerId: string;
+    readonly peers: string[];
+    readonly peerCount: number;
+}
+
+export declare const bus: EventBus;
+
+export declare const UIEvents: {
+    TOAST_SHOW: 'ui:toast:show';
+    TOAST_DISMISS: 'ui:toast:dismiss';
+    MODAL_OPEN: 'ui:modal:open';
+    MODAL_CLOSE: 'ui:modal:close';
+    THEME_CHANGE: 'ui:theme:change';
+    TAB_CHANGE: 'ui:tab:change';
+    DROPDOWN_SELECT: 'ui:dropdown:select';
+    FORM_SUBMIT: 'ui:form:submit';
+    FORM_VALIDATE: 'ui:form:validate';
+};
+
+export declare function showToast(message: string, options?: {
+    severity?: 'success' | 'error' | 'warning' | 'info';
+    duration?: number;
+}): void;
+
+// ============================================
+// SIGNALS (2026 SOTA)
+// ============================================
+export interface Signal<T> {
+    (): T;
+    set(value: T): void;
+    update(fn: (current: T) => T): void;
+    peek(): T;
+    subscribe(callback: (value: T, oldValue: T) => void): () => void;
+    dispose(): void;
+    readonly name: string;
+}
+
+export declare function signal<T>(initialValue: T, name?: string): Signal<T>;
+export declare function computed<T>(fn: () => T, name?: string): () => T;
+export declare function effect(fn: () => void): () => void;
+export declare function batch(fn: () => void): void;
+
+// ============================================
+// VIEW TRANSITIONS (2026 SOTA)
+// ============================================
+export declare const supportsViewTransitions: boolean;
+export declare function transition(updateCallback: () => void | Promise<void>): Promise<void>;
+export declare function transitionNamed(updateCallback: () => void | Promise<void>, options?: { name?: string }): Promise<void>;
+export declare function navigateWithTransition(path: string, render: () => void): Promise<void>;
+
+// ============================================
+// TASK SCHEDULER (2026 SOTA)
+// ============================================
+export declare const supportsScheduler: boolean;
+export declare function scheduleTask<T>(callback: () => T, priority?: 'user-blocking' | 'user-visible' | 'background'): Promise<T>;
+export declare function yieldToMain(): Promise<void>;
+export declare function processWithYield<T>(items: T[], process: (item: T, index: number) => void, chunkSize?: number): Promise<void>;
+export declare function runBackground<T>(callback: () => T): Promise<T>;
+export declare function runImmediate<T>(callback: () => T): Promise<T>;
+export declare function afterPaint(): Promise<void>;
+
+// ============================================
+// RENDER UTILITIES
+// ============================================
+export declare const scheduler: { schedule(callback: () => void): void };
+export declare function memo<T extends (...args: any[]) => any>(fn: T, keyFn?: (args: any[]) => string): T;
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay?: number): T;
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, limit?: number): T;
+export declare function createVisibilityObserver(onVisible: (el: Element) => void, options?: IntersectionObserverInit): { observe(el: Element): void; disconnect(): void };
+export declare const domBatch: { read(fn: () => void): void; write(fn: () => void): void };
+export declare function processInChunks<T>(items: T[], processFn: (item: T, index: number) => void, chunkSize?: number): Promise<void>;
+
+// ============================================
+// STORE & ROUTER & HTTP
+// ============================================
+export interface Store<T> {
+    get(): T;
+    set(newState: Partial<T>): void;
+    update(fn: (state: T) => Partial<T>): void;
+    subscribe(listener: (state: T) => void): () => void;
+    reset(): void;
+}
+
+export declare function createStore<T extends object>(initialState: T): Store<T>;
+export declare const appStore: Store<any>;
+
+export interface Router {
+    on(path: string, handler: (params: Record<string, string>) => void): Router;
+    notFound(handler: (path: string) => void): Router;
+    navigate(path: string): void;
+    start(): Router;
+    readonly current: string;
+}
+
+export declare const Router: Router;
+
+export interface Http {
+    baseURL: string;
+    setBaseURL(url: string): void;
+    setHeader(key: string, value: string): void;
+    get<T = any>(url: string, options?: RequestInit): Promise<T>;
+    post<T = any>(url: string, body?: any, options?: RequestInit): Promise<T>;
+    put<T = any>(url: string, body?: any, options?: RequestInit): Promise<T>;
+    delete<T = any>(url: string, options?: RequestInit): Promise<T>;
+}
+
+export declare const http: Http;
+export declare class HttpError extends Error {
+    status: number;
+    statusText: string;
+    body: string;
+}
+
+// ============================================
+// THEME
+// ============================================
+export interface Theme {
+    set(mode: 'light' | 'dark' | 'auto'): void;
+    toggle(): void;
+    get(): 'light' | 'dark';
+    readonly current: 'light' | 'dark';
+}
+
+export declare const Theme: Theme;
+
+// ============================================
+// COMPONENTS
+// ============================================
+// Layout
+export declare class MuStack extends MuElement { }
+export declare class MuGrid extends MuElement { }
+export declare class MuContainer extends MuElement { }
+export declare class MuNavbar extends MuElement { }
+export declare class MuNavbarBrand extends MuElement { }
+export declare class MuNavbarLinks extends MuElement { }
+export declare class MuNavbarActions extends MuElement { }
+export declare class MuSidebar extends MuElement { open(): void; close(): void; toggle(): void; }
+export declare class MuSidebarItem extends MuElement { }
+export declare class MuDivider extends MuElement { }
+
+// Form
+export declare class MuButton extends MuElement { }
+export declare class MuInput extends MuElement { value: string; focus(): void; }
+export declare class MuTextarea extends MuElement { value: string; }
+export declare class MuForm extends MuElement { }
+export declare class MuDropdown extends MuElement { open(): void; close(): void; toggle(): void; }
+export declare class MuOption extends MuElement { }
+export declare class MuCheckbox extends MuElement { checked: boolean; toggle(): void; }
+export declare class MuSwitch extends MuElement { on: boolean; toggle(): void; }
+export declare class MuRadioGroup extends MuElement { value: string; }
+export declare class MuRadio extends MuElement { }
+export declare class MuChip extends MuElement { selected: boolean; }
+
+// Display
+export declare class MuCard extends MuElement { }
+export declare class MuTabs extends MuElement { }
+export declare class MuTab extends MuElement { }
+export declare class MuAlert extends MuElement { dismiss(): void; }
+export declare class MuBadge extends MuElement { }
+export declare class MuProgress extends MuElement { }
+export declare class MuTable extends MuElement { }
+export declare class MuThead extends MuElement { }
+export declare class MuTbody extends MuElement { }
+export declare class MuTr extends MuElement { }
+export declare class MuTh extends MuElement { }
+export declare class MuTd extends MuElement { }
+export declare class MuAvatar extends MuElement { }
+export declare class MuSkeleton extends MuElement { }
+
+// Feedback
+export declare class MuSpinner extends MuElement { }
+export declare class MuModal extends MuElement { open(): void; close(): void; }
+export declare class MuToast extends MuElement { dismiss(): void; }
+export declare class MuTooltip extends MuElement { show(): void; hide(): void; }
+
+// Utility
+export declare class MuThemeToggle extends MuElement { }
+export declare class MuIcon extends MuElement { }
+export declare const IconNames: string[];
+
+// Performance
+export declare class MuVirtualList extends MuElement { items: any[]; renderItem: (item: any, index: number) => string; scrollToIndex(index: number): void; }
+export declare class MuLazy extends MuElement { load(): void; }
+export declare class MuRepeat extends MuElement { items: any[]; keyFn: (item: any, index: number) => any; renderItem: (item: any, index: number) => string; refresh(): void; }
+
+export declare const Toast: {
+    show(message: string, options?: { severity?: string; duration?: number }): MuToast;
+};

package/src/index.js

@@ -0,0 +1,308 @@
+/**
+ * @fileoverview microUI v3.5 - Complete Framework (2026 Edition)
+ * 
+ * AI-Optimized UI Framework for Large-Scale Applications
+ * 45+ Components | Memory-Safe | Agent-First | State-of-the-Art Performance
+ */
+
+// ============================================
+// CORE
+// ============================================
+export { MuElement, define } from './core/MuElement.js';
+export { bus, UIEvents, showToast } from './core/bus.js';
+export { Theme } from './core/theme.js';
+export { createStore, appStore, createNamespacedStore, getStore, getAllStores, captureAppState, restoreAppState, getStateHistory, enableObservability, disableObservability } from './core/store.js';
+export { Router } from './core/router.js';
+export { http, HttpError } from './core/http.js';
+export { createRipple, attachRipple, RippleMixin } from './core/ripple.js';
+export { createFormState, getFormValues } from './core/form-state.js';
+export { AgentAPI, getMuComponentTree, describe as describeComponent, findByLabel, getRegisteredComponents, enableVisualMarkers, disableVisualMarkers, getMarkerMap, getMarkerElement, getMCPActions } from './core/agent-api.js';
+export { FeatureRegistry, createFeature, getFeatures, getFeature, getFeatureComponents, getFeatureSummary } from './core/feature-registry.js';
+export { ComponentSchema, getComponentSchema, getAllSchemas, getSchemaComponents, getSchemaQuickRef } from './core/component-schema.js';
+
+// ============================================
+// CENTRALIZED UTILITIES (2026 SOTA)
+// ============================================
+export { Z_INDEX, injectLayerTokens } from './core/layers.js';
+export { keyboard, KeyboardManager } from './core/keyboard.js';
+export { breakpoints, BREAKPOINTS, BreakpointObserver } from './core/breakpoints.js';
+export { escapeHTML } from './core/utils.js';
+
+// ============================================
+// SIGNALS (2026 SOTA - Fine-grained reactivity)
+// ============================================
+export { signal, computed, effect, batch } from './core/signals.js';
+
+// ============================================
+// VIEW TRANSITIONS (2026 SOTA - Smooth animations)
+// ============================================
+export {
+    transition,
+    transitionNamed,
+    navigateWithTransition,
+    supportsViewTransitions
+} from './core/transitions.js';
+
+// ============================================
+// TASK SCHEDULER (2026 SOTA - Priority scheduling)
+// ============================================
+export {
+    scheduleTask,
+    yieldToMain,
+    processWithYield,
+    runBackground,
+    runImmediate,
+    afterPaint,
+    supportsScheduler
+} from './core/scheduler.js';
+
+// ============================================
+// RENDER UTILITIES (Large-Scale App Optimization)
+// ============================================
+export {
+    scheduler,
+    memo,
+    debounce,
+    throttle,
+    createVisibilityObserver,
+    domBatch,
+    processInChunks
+} from './core/render.js';
+
+// ============================================
+// LAYOUT COMPONENTS
+// ============================================
+export { MuStack } from './components/mu-stack.js';
+export { MuGrid } from './components/mu-grid.js';
+export { MuContainer } from './components/mu-container.js';
+export { MuNavbar, MuNavbarBrand, MuNavbarLinks, MuNavbarActions } from './components/mu-navbar.js';
+export { MuSidebar, MuSidebarItem } from './components/mu-sidebar.js';
+export { MuDivider } from './components/mu-divider.js';
+
+// MD3 Responsive Layout (2026)
+export { MuLayout } from './components/mu-layout.js';
+export { MuDrawer } from './components/mu-drawer.js';
+export { MuDrawerItem, MuNavItem } from './components/mu-drawer-item.js';
+export { MuBottomNav } from './components/mu-bottom-nav.js';
+
+// ============================================
+// FORM COMPONENTS
+// ============================================
+export { MuButton } from './components/mu-button.js';
+export { MuInput } from './components/mu-input.js';
+export { MuTextarea } from './components/mu-textarea.js';
+export { MuForm } from './components/mu-form.js';
+export { MuDropdown, MuOption } from './components/mu-dropdown.js';
+export { MuCheckbox } from './components/mu-checkbox.js';
+export { MuSwitch } from './components/mu-switch.js';
+export { MuRadioGroup, MuRadio } from './components/mu-radio.js';
+export { MuChip } from './components/mu-chip.js';
+
+// ============================================
+// DISPLAY COMPONENTS
+// ============================================
+export { MuCard } from './components/mu-card.js';
+export { MuCallout } from './components/mu-callout.js';
+export { MuTabs, MuTab } from './components/mu-tabs.js';
+export { MuAlert } from './components/mu-alert.js';
+export { MuBadge } from './components/mu-badge.js';
+export { MuProgress } from './components/mu-progress.js';
+export { MuTable, MuThead, MuTbody, MuTr, MuTh, MuTd } from './components/mu-table.js';
+export { MuAvatar } from './components/mu-avatar.js';
+export { MuSkeleton } from './components/mu-skeleton.js';
+
+// ============================================
+// FEEDBACK COMPONENTS
+// ============================================
+export { MuSpinner } from './components/mu-spinner.js';
+export { MuModal } from './components/mu-modal.js';
+export { MuToast, Toast } from './components/mu-toast.js';
+export { MuTooltip } from './components/mu-tooltip.js';
+export { MuConfirm, muConfirm } from './components/mu-confirm.js';
+
+// ============================================
+// ROUTING COMPONENTS
+// ============================================
+export { MuRouter } from './components/mu-router.js';
+export { MuPage } from './components/mu-page.js';
+
+// ============================================
+// TOAST LISTENER REGISTRATION (Single point)
+// Uses CrossBus-native hasListeners() instead of global flags
+// ============================================
+import { Toast as ToastService } from './components/mu-toast.js';
+import { bus as toastBus, UIEvents as ToastEvents } from './core/bus.js';
+
+if (!toastBus.hasListeners(ToastEvents.TOAST_SHOW)) {
+    toastBus.on(ToastEvents.TOAST_SHOW, (data) => {
+        ToastService.show(data.message, data);
+    });
+}
+
+// ============================================
+// UTILITY COMPONENTS
+// ============================================
+export { MuThemeToggle } from './components/mu-theme-toggle.js';
+export { MuIcon, IconNames } from './components/mu-icon.js';
+
+// ============================================
+// PERFORMANCE COMPONENTS (Large-Scale)
+// ============================================
+export { MuVirtualList } from './components/mu-virtual-list.js';
+export { MuLazy } from './components/mu-lazy.js';
+export { MuRepeat } from './components/mu-repeat.js';
+export { MuFetch } from './components/mu-fetch.js';
+
+// AI-First Components (2026)
+export { MuDataTable } from './components/mu-datatable.js';
+export { MuSchemaForm } from './components/mu-schema-form.js';
+export { MuPromptInput, MuCodeBlock, MuAgentToolbar, MuMessageBubble } from './components/mu-prompt-ui.js';
+export { MuErrorBoundary, getErrors, clearErrors } from './components/mu-error-boundary.js';
+
+// ============================================
+// DOCUMENTATION COMPONENTS
+// ============================================
+export { MuCode } from './components/mu-code.js';
+export { MuApiTable, MuApiRow } from './components/mu-api-table.js';
+export { MuExample } from './components/mu-example.js';
+export { MuDocPage } from './components/mu-doc-page.js';
+
+// ============================================
+// AUTO-REGISTER ALL COMPONENTS
+// ============================================
+import './components/mu-stack.js';
+import './components/mu-grid.js';
+import './components/mu-container.js';
+import './components/mu-navbar.js';
+import './components/mu-sidebar.js';
+import './components/mu-divider.js';
+import './components/mu-button.js';
+import './components/mu-input.js';
+import './components/mu-textarea.js';
+import './components/mu-form.js';
+import './components/mu-card.js';
+import './components/mu-callout.js';
+import './components/mu-tabs.js';
+import './components/mu-alert.js';
+import './components/mu-badge.js';
+import './components/mu-spinner.js';
+import './components/mu-progress.js';
+import './components/mu-dropdown.js';
+import './components/mu-checkbox.js';
+import './components/mu-switch.js';
+import './components/mu-radio.js';
+import './components/mu-chip.js';
+import './components/mu-modal.js';
+import './components/mu-toast.js';
+import './components/mu-tooltip.js';
+import './components/mu-theme-toggle.js';
+import './components/mu-icon.js';
+import './components/mu-table.js';
+import './components/mu-avatar.js';
+import './components/mu-skeleton.js';
+import './components/mu-virtual-list.js';
+import './components/mu-lazy.js';
+import './components/mu-repeat.js';
+import './components/mu-confirm.js';
+import './components/mu-fetch.js';
+
+import './components/mu-datatable.js';
+import './components/mu-schema-form.js';
+import './components/mu-prompt-ui.js';
+import './components/mu-error-boundary.js';
+
+// MD3 Responsive Layout
+import './components/mu-layout.js';
+import './components/mu-drawer.js';
+import './components/mu-drawer-item.js';
+import './components/mu-bottom-nav.js';
+
+// ============================================
+// DOCUMENTATION COMPONENTS
+// ============================================
+import './components/mu-code.js';
+import './components/mu-api-table.js';
+import './components/mu-example.js';
+import './components/mu-doc-page.js';
+
+// ============================================
+// GLOBAL EXPORT (for IIFE bundle browser usage)
+// ============================================
+import { signal, computed, effect, batch } from './core/signals.js';
+import { Theme } from './core/theme.js';
+import { bus, UIEvents, showToast } from './core/bus.js';
+import { createStore, appStore, createNamespacedStore, getStore, getAllStores, captureAppState, restoreAppState, getStateHistory, enableObservability, disableObservability } from './core/store.js';
+import { Router } from './core/router.js';
+import { http, HttpError } from './core/http.js';
+import { createFormState, getFormValues } from './core/form-state.js';
+import { AgentAPI, getMuComponentTree, describe as describeComponent, findByLabel, getRegisteredComponents, enableVisualMarkers, disableVisualMarkers, getMarkerMap, getMarkerElement, getMCPActions } from './core/agent-api.js';
+import { FeatureRegistry, createFeature, getFeatures, getFeature, getFeatureComponents, getFeatureSummary } from './core/feature-registry.js';
+import { ComponentSchema, getComponentSchema, getAllSchemas, getSchemaComponents, getSchemaQuickRef } from './core/component-schema.js';
+import { getErrors, clearErrors } from './components/mu-error-boundary.js';
+import { muConfirm } from './components/mu-confirm.js';
+
+if (typeof window !== 'undefined') {
+    window.microUI = {
+        // Signals
+        signal,
+        computed,
+        effect,
+        batch,
+        // Theme
+        Theme,
+        // Bus
+        bus,
+        UIEvents,
+        showToast,
+        // Store
+        createStore,
+        appStore,
+        // Router
+        Router,
+        // HTTP
+        http,
+        HttpError,
+        // Form utilities
+        createFormState,
+        getFormValues,
+        AgentAPI,
+        getMuComponentTree,
+        describeComponent,
+        findByLabel,
+        getRegisteredComponents,
+        // Enterprise: Namespaced Stores
+        createNamespacedStore,
+        getStore,
+        getAllStores,
+        captureAppState,
+        restoreAppState,
+        getStateHistory,
+        enableObservability,
+        disableObservability,
+        // Enterprise: Feature Registry
+        FeatureRegistry,
+        createFeature,
+        getFeatures,
+        getFeature,
+        getFeatureComponents,
+        getFeatureSummary,
+        // Enterprise: Error Handling
+        getErrors,
+        clearErrors,
+        // 2026 Agent: Component Schema (JSON Schema export)
+        ComponentSchema,
+        getComponentSchema,
+        getAllSchemas,
+        getSchemaComponents,
+        getSchemaQuickRef,
+        // 2026 Agent: Visual Markers (multimodal)
+        enableVisualMarkers,
+        disableVisualMarkers,
+        getMarkerMap,
+        getMarkerElement,
+        // 2026 Agent: MCP Actions (standard protocol)
+        getMCPActions,
+        // 2026 Agent: Programmatic Dialogs
+        muConfirm
+    };
+}