@easemate/web-kit 0.1.5 → 0.3.0

package/build/{elements/monitor/index.d.ts → index-31iOHBv0.d.cts}

@@ -1,6 +1,26 @@
-import type { MonitorFpsDetail } from "./fps.js";
-import { type TemplateResult } from 'lit-html';
-import "./fps.js";
+import { TemplateResult } from 'lit-html';
+
+type MonitorFpsDetail = {
+    fps: number | null;
+    refreshRate: number | null;
+    frameTimeAvg: number | null;
+    frameTimeP95: number | null;
+    frameTimeMax: number | null;
+    droppedFrames: number;
+    jankFrames: number;
+    longFrames: number;
+};
+declare class MonitorFps extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor paused: boolean;
+    accessor canvasEl: HTMLCanvasElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+}
+
 type CoreWebVitals = {
     LCP: number | null;
     INP: number | null;
@@ -69,7 +89,7 @@ declare global {
         };
     }
 }
-export declare class Monitor extends HTMLElement {
+declare class Monitor extends HTMLElement {
     requestRender: () => void;
     accessor metrics: PerformanceMetrics;
     accessor network: ConnectionInfo;
@@ -109,4 +129,5 @@ export declare class Monitor extends HTMLElement {
     private renderNetworkInfo;
     private renderResources;
 }
-export {};
+
+export { Monitor as M, MonitorFps as a };

package/build/{elements/monitor/index.d.cts → index-31iOHBv0.d.ts}

@@ -1,6 +1,26 @@
-import type { MonitorFpsDetail } from "./fps.cjs";
-import { type TemplateResult } from 'lit-html';
-import "./fps.cjs";
+import { TemplateResult } from 'lit-html';
+
+type MonitorFpsDetail = {
+    fps: number | null;
+    refreshRate: number | null;
+    frameTimeAvg: number | null;
+    frameTimeP95: number | null;
+    frameTimeMax: number | null;
+    droppedFrames: number;
+    jankFrames: number;
+    longFrames: number;
+};
+declare class MonitorFps extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor paused: boolean;
+    accessor canvasEl: HTMLCanvasElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+}
+
 type CoreWebVitals = {
     LCP: number | null;
     INP: number | null;
@@ -69,7 +89,7 @@ declare global {
         };
     }
 }
-export declare class Monitor extends HTMLElement {
+declare class Monitor extends HTMLElement {
     requestRender: () => void;
     accessor metrics: PerformanceMetrics;
     accessor network: ConnectionInfo;
@@ -109,4 +129,5 @@ export declare class Monitor extends HTMLElement {
     private renderNetworkInfo;
     private renderResources;
 }
-export {};
+
+export { Monitor as M, MonitorFps as a };

package/build/index-NzGpn7ai.d.cts

@@ -0,0 +1,70 @@
+import { TemplateResult } from 'lit-html';
+
+/**
+ * Event detail for tab change events
+ */
+interface TabChangeEventDetail {
+    /** The index of the active tab */
+    index: number;
+    /** The tab id */
+    id: string;
+    /** The original event */
+    event: Event;
+}
+/**
+ * Panel component - visual container with optional tabs and header actions.
+ *
+ * Use this component when you want the panel UI without state management,
+ * or wrap it around `<ease-state>` for full functionality.
+ *
+ * @tag ease-panel
+ *
+ * @slot headline - Panel title text (hidden when tabs are present)
+ * @slot actions - Header action buttons, links, or dropdowns
+ * @slot - Default slot for main content
+ * @slot tab-{id} - Tab panel content (use `data-tab-label` for display name)
+ * @slot footer - Footer content below all panels
+ *
+ * @csspart section - Outer container
+ * @csspart header - Header row containing headline/tabs and actions
+ * @csspart headline - Title element
+ * @csspart tabs - Tab button container
+ * @csspart tab - Individual tab button
+ * @csspart actions - Actions container
+ * @csspart content - Content wrapper (handles height animations)
+ * @csspart body - Inner body container
+ * @csspart tab-panel - Individual tab panel
+ * @csspart footer - Footer container
+ *
+ * @fires tab-change - Fired when the active tab changes
+ */
+declare class Panel extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor activeTab: number;
+    /** @internal */
+    handleActiveTabChange(previous: number, next: number): void;
+    accessor contentElement: HTMLElement | null;
+    accessor bodyElement: HTMLElement | null;
+    /**
+     * Get the tab configuration
+     */
+    get tabs(): ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    /**
+     * Switch to a specific tab by index
+     * @param index - The tab index (0-based)
+     */
+    setTab(index: number): void;
+    connectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+    performTabAnimation(fromIndex: number, toIndex: number): Promise<void>;
+    onFooterSlotChange(): void;
+    onDefaultSlotChange(): void;
+    private updateFooterAttribute;
+}
+
+export { Panel as P, type TabChangeEventDetail as T };

package/build/index-NzGpn7ai.d.ts

@@ -0,0 +1,70 @@
+import { TemplateResult } from 'lit-html';
+
+/**
+ * Event detail for tab change events
+ */
+interface TabChangeEventDetail {
+    /** The index of the active tab */
+    index: number;
+    /** The tab id */
+    id: string;
+    /** The original event */
+    event: Event;
+}
+/**
+ * Panel component - visual container with optional tabs and header actions.
+ *
+ * Use this component when you want the panel UI without state management,
+ * or wrap it around `<ease-state>` for full functionality.
+ *
+ * @tag ease-panel
+ *
+ * @slot headline - Panel title text (hidden when tabs are present)
+ * @slot actions - Header action buttons, links, or dropdowns
+ * @slot - Default slot for main content
+ * @slot tab-{id} - Tab panel content (use `data-tab-label` for display name)
+ * @slot footer - Footer content below all panels
+ *
+ * @csspart section - Outer container
+ * @csspart header - Header row containing headline/tabs and actions
+ * @csspart headline - Title element
+ * @csspart tabs - Tab button container
+ * @csspart tab - Individual tab button
+ * @csspart actions - Actions container
+ * @csspart content - Content wrapper (handles height animations)
+ * @csspart body - Inner body container
+ * @csspart tab-panel - Individual tab panel
+ * @csspart footer - Footer container
+ *
+ * @fires tab-change - Fired when the active tab changes
+ */
+declare class Panel extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor activeTab: number;
+    /** @internal */
+    handleActiveTabChange(previous: number, next: number): void;
+    accessor contentElement: HTMLElement | null;
+    accessor bodyElement: HTMLElement | null;
+    /**
+     * Get the tab configuration
+     */
+    get tabs(): ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    /**
+     * Switch to a specific tab by index
+     * @param index - The tab index (0-based)
+     */
+    setTab(index: number): void;
+    connectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+    performTabAnimation(fromIndex: number, toIndex: number): Promise<void>;
+    onFooterSlotChange(): void;
+    onDefaultSlotChange(): void;
+    private updateFooterAttribute;
+}
+
+export { Panel as P, type TabChangeEventDetail as T };

package/build/index-qZoNKsHn.d.cts

@@ -0,0 +1,136 @@
+import { TemplateResult } from 'lit-html';
+
+/**
+ * Standard control event detail interface for Leva/lil-gui style state aggregation.
+ * All control components should dispatch events with this shape.
+ */
+interface ControlEventDetail<TValue = unknown> {
+    /** The control's name/identifier for state aggregation */
+    name?: string;
+    /** The current value of the control */
+    value: TValue;
+    /** The original DOM event that triggered this change */
+    event: Event;
+}
+/** The standard event type for control value changes */
+declare const CONTROL_CHANGE_EVENT = "control-change";
+/**
+ * Dispatch a control change event with standard shape.
+ * Events bubble and are composed (cross shadow DOM boundaries).
+ *
+ * @param host - The element dispatching the event
+ * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
+ * @param detail - Event detail with value and optional name
+ *
+ * @example
+ * ```ts
+ * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
+ *   name: this.name,
+ *   value: this.value,
+ *   event: e
+ * });
+ * ```
+ */
+declare const dispatchControlEvent: <THost extends HTMLElement, TValue>(host: THost, type: string, detail: ControlEventDetail<TValue>) => void;
+declare const setBooleanAttribute: (element: Element | null | undefined, name: string, value: boolean) => void;
+declare const coerceNumber: (value: string) => number | null;
+type ControlElement = Element & {
+    value?: unknown;
+    checked?: unknown;
+};
+declare const readControlValue: (element: ControlElement) => string | null;
+
+type StateChangeCallback<T = unknown> = (value: T, name: string) => void;
+type StateSubscription = {
+    unsubscribe: () => void;
+};
+/**
+ * Event detail for state change events
+ */
+interface StateChangeEventDetail {
+    /** The name of the control that changed */
+    name: string;
+    /** The new value */
+    value: unknown;
+    /** The complete state object */
+    state: Record<string, unknown>;
+    /** The original event */
+    event: Event;
+}
+/**
+ * State aggregator component - collects and manages state from child controls.
+ *
+ * This component provides state management without any visual styling.
+ * Use it standalone or wrap it with `<ease-panel>` for a styled container.
+ *
+ * @tag ease-state
+ *
+ * @slot - Default slot for controls
+ *
+ * @fires state-change - Fired when any control value changes
+ *
+ * @example
+ * ```html
+ * <!-- Standalone usage (no panel) -->
+ * <ease-state>
+ *   <ease-field label="Duration">
+ *     <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
+ *   </ease-field>
+ *   <ease-field label="Loop">
+ *     <ease-toggle name="loop"></ease-toggle>
+ *   </ease-field>
+ * </ease-state>
+ *
+ * <!-- With panel wrapper -->
+ * <ease-panel>
+ *   <span slot="headline">Animation Controls</span>
+ *   <ease-state>
+ *     <ease-field label="Duration">
+ *       <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
+ *     </ease-field>
+ *   </ease-state>
+ * </ease-panel>
+ * ```
+ */
+declare class State extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor defaultSlot: HTMLSlotElement | null;
+    /**
+     * Get the current state object with all control values
+     */
+    get state(): Readonly<Record<string, unknown>>;
+    /**
+     * Get a specific control value by name
+     * @param name - The control name
+     * @returns The control value or undefined
+     */
+    get(name: string): unknown;
+    /**
+     * Set a control value programmatically
+     * @param name - The control name
+     * @param value - The new value
+     */
+    set(name: string, value: unknown): void;
+    /**
+     * Subscribe to state changes
+     * @param nameOrCallback - Control name to watch, '*' for all, or callback for all changes
+     * @param callback - Callback when using name filter
+     * @returns Subscription with unsubscribe method
+     */
+    subscribe(callback: StateChangeCallback): StateSubscription;
+    subscribe(name: string, callback: StateChangeCallback): StateSubscription;
+    /**
+     * Reset all controls to their initial values
+     */
+    reset(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    handleInternalInput(event: CustomEvent<ControlEventDetail>): void;
+    handleInternalChange(event: CustomEvent<ControlEventDetail>): void;
+    handleControlChange(event: CustomEvent<ControlEventDetail>): void;
+}
+
+export { type ControlEventDetail as C, type StateChangeEventDetail as S, CONTROL_CHANGE_EVENT as a, State as b, coerceNumber as c, dispatchControlEvent as d, readControlValue as r, setBooleanAttribute as s };

package/build/index-qZoNKsHn.d.ts

@@ -0,0 +1,136 @@
+import { TemplateResult } from 'lit-html';
+
+/**
+ * Standard control event detail interface for Leva/lil-gui style state aggregation.
+ * All control components should dispatch events with this shape.
+ */
+interface ControlEventDetail<TValue = unknown> {
+    /** The control's name/identifier for state aggregation */
+    name?: string;
+    /** The current value of the control */
+    value: TValue;
+    /** The original DOM event that triggered this change */
+    event: Event;
+}
+/** The standard event type for control value changes */
+declare const CONTROL_CHANGE_EVENT = "control-change";
+/**
+ * Dispatch a control change event with standard shape.
+ * Events bubble and are composed (cross shadow DOM boundaries).
+ *
+ * @param host - The element dispatching the event
+ * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
+ * @param detail - Event detail with value and optional name
+ *
+ * @example
+ * ```ts
+ * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
+ *   name: this.name,
+ *   value: this.value,
+ *   event: e
+ * });
+ * ```
+ */
+declare const dispatchControlEvent: <THost extends HTMLElement, TValue>(host: THost, type: string, detail: ControlEventDetail<TValue>) => void;
+declare const setBooleanAttribute: (element: Element | null | undefined, name: string, value: boolean) => void;
+declare const coerceNumber: (value: string) => number | null;
+type ControlElement = Element & {
+    value?: unknown;
+    checked?: unknown;
+};
+declare const readControlValue: (element: ControlElement) => string | null;
+
+type StateChangeCallback<T = unknown> = (value: T, name: string) => void;
+type StateSubscription = {
+    unsubscribe: () => void;
+};
+/**
+ * Event detail for state change events
+ */
+interface StateChangeEventDetail {
+    /** The name of the control that changed */
+    name: string;
+    /** The new value */
+    value: unknown;
+    /** The complete state object */
+    state: Record<string, unknown>;
+    /** The original event */
+    event: Event;
+}
+/**
+ * State aggregator component - collects and manages state from child controls.
+ *
+ * This component provides state management without any visual styling.
+ * Use it standalone or wrap it with `<ease-panel>` for a styled container.
+ *
+ * @tag ease-state
+ *
+ * @slot - Default slot for controls
+ *
+ * @fires state-change - Fired when any control value changes
+ *
+ * @example
+ * ```html
+ * <!-- Standalone usage (no panel) -->
+ * <ease-state>
+ *   <ease-field label="Duration">
+ *     <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
+ *   </ease-field>
+ *   <ease-field label="Loop">
+ *     <ease-toggle name="loop"></ease-toggle>
+ *   </ease-field>
+ * </ease-state>
+ *
+ * <!-- With panel wrapper -->
+ * <ease-panel>
+ *   <span slot="headline">Animation Controls</span>
+ *   <ease-state>
+ *     <ease-field label="Duration">
+ *       <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
+ *     </ease-field>
+ *   </ease-state>
+ * </ease-panel>
+ * ```
+ */
+declare class State extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor defaultSlot: HTMLSlotElement | null;
+    /**
+     * Get the current state object with all control values
+     */
+    get state(): Readonly<Record<string, unknown>>;
+    /**
+     * Get a specific control value by name
+     * @param name - The control name
+     * @returns The control value or undefined
+     */
+    get(name: string): unknown;
+    /**
+     * Set a control value programmatically
+     * @param name - The control name
+     * @param value - The new value
+     */
+    set(name: string, value: unknown): void;
+    /**
+     * Subscribe to state changes
+     * @param nameOrCallback - Control name to watch, '*' for all, or callback for all changes
+     * @param callback - Callback when using name filter
+     * @returns Subscription with unsubscribe method
+     */
+    subscribe(callback: StateChangeCallback): StateSubscription;
+    subscribe(name: string, callback: StateChangeCallback): StateSubscription;
+    /**
+     * Reset all controls to their initial values
+     */
+    reset(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    handleInternalInput(event: CustomEvent<ControlEventDetail>): void;
+    handleInternalChange(event: CustomEvent<ControlEventDetail>): void;
+    handleControlChange(event: CustomEvent<ControlEventDetail>): void;
+}
+
+export { type ControlEventDetail as C, type StateChangeEventDetail as S, CONTROL_CHANGE_EVENT as a, State as b, coerceNumber as c, dispatchControlEvent as d, readControlValue as r, setBooleanAttribute as s };