@easemate/web-kit 0.2.0 → 0.3.0

package/build/react/use-ease-state.cjs

@@ -1,129 +0,0 @@
-"use strict";
-/**
- * React hook for working with ease-state component
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEaseState = useEaseState;
-/**
- * React hook for working with ease-state components.
- *
- * Provides a reactive state object and methods for interacting
- * with the ease-state web component.
- *
- * @example
- * ```tsx
- * import { useState, useCallback, useRef } from '../react';
- * import { useEaseState } from '@easemate/web-kit/react';
- *
- * function AnimationControls() {
- *   const {
- *     stateRef,
- *     panelRef,
- *     state,
- *     set,
- *     reset
- *   } = useEaseState<{ duration: number; easing: string; loop: boolean }>(
- *     {
- *       onChange: ({ name, value }) => {
- *         console.log(`${name} changed to ${value}`);
- *       }
- *     },
- *     { useState, useCallback, useRef }
- *   );
- *
- *   return (
- *     <ease-panel ref={panelRef}>
- *       <span slot="headline">Animation</span>
- *       <ease-state ref={stateRef}>
- *         <ease-field label="Duration">
- *           <ease-slider name="duration" value="1" min="0" max="5" />
- *         </ease-field>
- *       </ease-state>
- *     </ease-panel>
- *   );
- * }
- * ```
- */
-function useEaseState(options, hooks) {
-    const { useState, useCallback, useRef } = hooks;
-    const { initialState, onChange, onTabChange } = options;
-    const stateElementRef = useRef(null);
-    const panelElementRef = useRef(null);
-    const [state, setState] = useState((initialState ?? {}));
-    const [activeTab, setActiveTab] = useState(0);
-    // Handle state changes
-    const handleStateChange = useCallback((e) => {
-        const customEvent = e;
-        const { name, value } = customEvent.detail;
-        setState((prev) => {
-            return { ...prev, [name]: value };
-        });
-        onChange?.(customEvent.detail);
-    }, [onChange]);
-    // Handle tab changes
-    const handleTabChange = useCallback((e) => {
-        const customEvent = e;
-        setActiveTab(customEvent.detail.index);
-        onTabChange?.(customEvent.detail);
-    }, [onTabChange]);
-    // Ref callback for the ease-state element
-    const stateRef = useCallback((element) => {
-        // Cleanup previous element
-        if (stateElementRef.current) {
-            stateElementRef.current.removeEventListener('state-change', handleStateChange);
-        }
-        stateElementRef.current = element;
-        if (element) {
-            // Add event listeners
-            element.addEventListener('state-change', handleStateChange);
-            // Set initial state values
-            if (initialState) {
-                for (const [name, value] of Object.entries(initialState)) {
-                    element.set(name, value);
-                }
-            }
-            // Sync current state from element
-            const currentState = element.state;
-            if (Object.keys(currentState).length > 0) {
-                setState(currentState);
-            }
-        }
-    }, [handleStateChange, initialState]);
-    // Ref callback for the ease-panel element
-    const panelRef = useCallback((element) => {
-        // Cleanup previous element
-        if (panelElementRef.current) {
-            panelElementRef.current.removeEventListener('tab-change', handleTabChange);
-        }
-        panelElementRef.current = element;
-        if (element) {
-            // Add event listeners
-            element.addEventListener('tab-change', handleTabChange);
-            setActiveTab(element.activeTab);
-        }
-    }, [handleTabChange]);
-    // Get a specific value
-    const get = useCallback((name) => state[name], [state]);
-    // Set a specific value
-    const set = useCallback((name, value) => {
-        stateElementRef.current?.set(name, value);
-    }, []);
-    // Reset all values
-    const reset = useCallback(() => {
-        stateElementRef.current?.reset();
-    }, []);
-    // Set active tab
-    const setTab = useCallback((index) => {
-        panelElementRef.current?.setTab(index);
-    }, []);
-    return {
-        stateRef,
-        panelRef,
-        state,
-        get,
-        set,
-        reset,
-        setTab,
-        activeTab
-    };
-}

package/build/react/use-ease-state.d.cts

@@ -1,95 +0,0 @@
-/**
- * React hook for working with ease-state component
- */
-import type { EasePanelRef, EaseStateRef, StateChangeEventDetail, TabChangeEventDetail } from "./types.cjs";
-/**
- * Options for useEaseState hook
- */
-export interface UseEaseStateOptions {
-    /**
-     * Initial state values to set when the component mounts
-     */
-    initialState?: Record<string, unknown>;
-    /**
-     * Callback fired when any control value changes
-     */
-    onChange?: (detail: StateChangeEventDetail) => void;
-    /**
-     * Callback fired when the active tab changes (requires ease-panel)
-     */
-    onTabChange?: (detail: TabChangeEventDetail) => void;
-}
-type AnyFunction = (...args: any[]) => any;
-/**
- * React hooks interface - compatible with React's hook signatures
- */
-export interface ReactHooksLike {
-    useState: <S>(initial: S) => [S, (value: S | ((prev: S) => S)) => void];
-    useCallback: <F extends AnyFunction>(callback: F, deps: unknown[]) => F;
-    useRef: <R>(initial: R) => {
-        current: R;
-    };
-}
-/**
- * Return type for useEaseState hook
- */
-export interface UseEaseStateReturn<T extends Record<string, unknown> = Record<string, unknown>> {
-    /** Ref callback to attach to the ease-state element */
-    stateRef: (element: EaseStateRef | null) => void;
-    /** Ref callback to attach to the ease-panel element (optional) */
-    panelRef: (element: EasePanelRef | null) => void;
-    /** Current state values (reactive) */
-    state: T;
-    /** Get a specific control value */
-    get: <K extends keyof T>(name: K) => T[K] | undefined;
-    /** Set a specific control value */
-    set: <K extends keyof T>(name: K, value: T[K]) => void;
-    /** Reset all controls to initial values */
-    reset: () => void;
-    /** Switch to a specific tab (requires ease-panel) */
-    setTab: (index: number) => void;
-    /** Current active tab index (requires ease-panel) */
-    activeTab: number;
-}
-/**
- * React hook for working with ease-state components.
- *
- * Provides a reactive state object and methods for interacting
- * with the ease-state web component.
- *
- * @example
- * ```tsx
- * import { useState, useCallback, useRef } from '../react';
- * import { useEaseState } from '@easemate/web-kit/react';
- *
- * function AnimationControls() {
- *   const {
- *     stateRef,
- *     panelRef,
- *     state,
- *     set,
- *     reset
- *   } = useEaseState<{ duration: number; easing: string; loop: boolean }>(
- *     {
- *       onChange: ({ name, value }) => {
- *         console.log(`${name} changed to ${value}`);
- *       }
- *     },
- *     { useState, useCallback, useRef }
- *   );
- *
- *   return (
- *     <ease-panel ref={panelRef}>
- *       <span slot="headline">Animation</span>
- *       <ease-state ref={stateRef}>
- *         <ease-field label="Duration">
- *           <ease-slider name="duration" value="1" min="0" max="5" />
- *         </ease-field>
- *       </ease-state>
- *     </ease-panel>
- *   );
- * }
- * ```
- */
-export declare function useEaseState<T extends Record<string, unknown> = Record<string, unknown>>(options: UseEaseStateOptions, hooks: ReactHooksLike): UseEaseStateReturn<T>;
-export {};

package/build/react/use-ease-state.d.ts

@@ -1,95 +0,0 @@
-/**
- * React hook for working with ease-state component
- */
-import type { EasePanelRef, EaseStateRef, StateChangeEventDetail, TabChangeEventDetail } from "./types.js";
-/**
- * Options for useEaseState hook
- */
-export interface UseEaseStateOptions {
-    /**
-     * Initial state values to set when the component mounts
-     */
-    initialState?: Record<string, unknown>;
-    /**
-     * Callback fired when any control value changes
-     */
-    onChange?: (detail: StateChangeEventDetail) => void;
-    /**
-     * Callback fired when the active tab changes (requires ease-panel)
-     */
-    onTabChange?: (detail: TabChangeEventDetail) => void;
-}
-type AnyFunction = (...args: any[]) => any;
-/**
- * React hooks interface - compatible with React's hook signatures
- */
-export interface ReactHooksLike {
-    useState: <S>(initial: S) => [S, (value: S | ((prev: S) => S)) => void];
-    useCallback: <F extends AnyFunction>(callback: F, deps: unknown[]) => F;
-    useRef: <R>(initial: R) => {
-        current: R;
-    };
-}
-/**
- * Return type for useEaseState hook
- */
-export interface UseEaseStateReturn<T extends Record<string, unknown> = Record<string, unknown>> {
-    /** Ref callback to attach to the ease-state element */
-    stateRef: (element: EaseStateRef | null) => void;
-    /** Ref callback to attach to the ease-panel element (optional) */
-    panelRef: (element: EasePanelRef | null) => void;
-    /** Current state values (reactive) */
-    state: T;
-    /** Get a specific control value */
-    get: <K extends keyof T>(name: K) => T[K] | undefined;
-    /** Set a specific control value */
-    set: <K extends keyof T>(name: K, value: T[K]) => void;
-    /** Reset all controls to initial values */
-    reset: () => void;
-    /** Switch to a specific tab (requires ease-panel) */
-    setTab: (index: number) => void;
-    /** Current active tab index (requires ease-panel) */
-    activeTab: number;
-}
-/**
- * React hook for working with ease-state components.
- *
- * Provides a reactive state object and methods for interacting
- * with the ease-state web component.
- *
- * @example
- * ```tsx
- * import { useState, useCallback, useRef } from '../react';
- * import { useEaseState } from '@easemate/web-kit/react';
- *
- * function AnimationControls() {
- *   const {
- *     stateRef,
- *     panelRef,
- *     state,
- *     set,
- *     reset
- *   } = useEaseState<{ duration: number; easing: string; loop: boolean }>(
- *     {
- *       onChange: ({ name, value }) => {
- *         console.log(`${name} changed to ${value}`);
- *       }
- *     },
- *     { useState, useCallback, useRef }
- *   );
- *
- *   return (
- *     <ease-panel ref={panelRef}>
- *       <span slot="headline">Animation</span>
- *       <ease-state ref={stateRef}>
- *         <ease-field label="Duration">
- *           <ease-slider name="duration" value="1" min="0" max="5" />
- *         </ease-field>
- *       </ease-state>
- *     </ease-panel>
- *   );
- * }
- * ```
- */
-export declare function useEaseState<T extends Record<string, unknown> = Record<string, unknown>>(options: UseEaseStateOptions, hooks: ReactHooksLike): UseEaseStateReturn<T>;
-export {};

package/build/react/use-ease-state.js

@@ -1,126 +0,0 @@
-/**
- * React hook for working with ease-state component
- */
-/**
- * React hook for working with ease-state components.
- *
- * Provides a reactive state object and methods for interacting
- * with the ease-state web component.
- *
- * @example
- * ```tsx
- * import { useState, useCallback, useRef } from '../react';
- * import { useEaseState } from '@easemate/web-kit/react';
- *
- * function AnimationControls() {
- *   const {
- *     stateRef,
- *     panelRef,
- *     state,
- *     set,
- *     reset
- *   } = useEaseState<{ duration: number; easing: string; loop: boolean }>(
- *     {
- *       onChange: ({ name, value }) => {
- *         console.log(`${name} changed to ${value}`);
- *       }
- *     },
- *     { useState, useCallback, useRef }
- *   );
- *
- *   return (
- *     <ease-panel ref={panelRef}>
- *       <span slot="headline">Animation</span>
- *       <ease-state ref={stateRef}>
- *         <ease-field label="Duration">
- *           <ease-slider name="duration" value="1" min="0" max="5" />
- *         </ease-field>
- *       </ease-state>
- *     </ease-panel>
- *   );
- * }
- * ```
- */
-export function useEaseState(options, hooks) {
-    const { useState, useCallback, useRef } = hooks;
-    const { initialState, onChange, onTabChange } = options;
-    const stateElementRef = useRef(null);
-    const panelElementRef = useRef(null);
-    const [state, setState] = useState((initialState ?? {}));
-    const [activeTab, setActiveTab] = useState(0);
-    // Handle state changes
-    const handleStateChange = useCallback((e) => {
-        const customEvent = e;
-        const { name, value } = customEvent.detail;
-        setState((prev) => {
-            return { ...prev, [name]: value };
-        });
-        onChange?.(customEvent.detail);
-    }, [onChange]);
-    // Handle tab changes
-    const handleTabChange = useCallback((e) => {
-        const customEvent = e;
-        setActiveTab(customEvent.detail.index);
-        onTabChange?.(customEvent.detail);
-    }, [onTabChange]);
-    // Ref callback for the ease-state element
-    const stateRef = useCallback((element) => {
-        // Cleanup previous element
-        if (stateElementRef.current) {
-            stateElementRef.current.removeEventListener('state-change', handleStateChange);
-        }
-        stateElementRef.current = element;
-        if (element) {
-            // Add event listeners
-            element.addEventListener('state-change', handleStateChange);
-            // Set initial state values
-            if (initialState) {
-                for (const [name, value] of Object.entries(initialState)) {
-                    element.set(name, value);
-                }
-            }
-            // Sync current state from element
-            const currentState = element.state;
-            if (Object.keys(currentState).length > 0) {
-                setState(currentState);
-            }
-        }
-    }, [handleStateChange, initialState]);
-    // Ref callback for the ease-panel element
-    const panelRef = useCallback((element) => {
-        // Cleanup previous element
-        if (panelElementRef.current) {
-            panelElementRef.current.removeEventListener('tab-change', handleTabChange);
-        }
-        panelElementRef.current = element;
-        if (element) {
-            // Add event listeners
-            element.addEventListener('tab-change', handleTabChange);
-            setActiveTab(element.activeTab);
-        }
-    }, [handleTabChange]);
-    // Get a specific value
-    const get = useCallback((name) => state[name], [state]);
-    // Set a specific value
-    const set = useCallback((name, value) => {
-        stateElementRef.current?.set(name, value);
-    }, []);
-    // Reset all values
-    const reset = useCallback(() => {
-        stateElementRef.current?.reset();
-    }, []);
-    // Set active tab
-    const setTab = useCallback((index) => {
-        panelElementRef.current?.setTab(index);
-    }, []);
-    return {
-        stateRef,
-        panelRef,
-        state,
-        get,
-        set,
-        reset,
-        setTab,
-        activeTab
-    };
-}

package/build/react/use-web-kit.cjs

@@ -1,150 +0,0 @@
-"use strict";
-/**
- * React hook for initializing @easemate/web-kit
- *
- * This module provides hooks for React integration.
- * React is a peer dependency - users must install it separately.
- *
- * @module
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWebKit = useWebKit;
-// Singleton to track if web-kit has been initialized globally
-let globalController = null;
-let initCount = 0;
-/**
- * React hook for initializing @easemate/web-kit.
- *
- * This hook handles initialization and cleanup of the web kit,
- * ensuring components are registered before rendering.
- *
- * **Important for Next.js App Router:**
- * - Use this hook in a client component (`'use client'`)
- * - Place it at the top of your component tree (e.g., in a layout)
- * - The hook is SSR-safe and will only initialize on the client
- *
- * **Note:** This hook requires React to be installed. Import React hooks
- * directly in your component and pass them to this function, or use the
- * imperative `initWebKit()` function directly.
- *
- * @example
- * ```tsx
- * // app/providers.tsx
- * 'use client';
- *
- * import { useEffect, useState, useRef } from '../react';
- * import { initWebKit } from '@easemate/web-kit';
- *
- * export function Providers({ children }: { children: React.ReactNode }) {
- *   const [ready, setReady] = useState(false);
- *   const controllerRef = useRef<WebKitController | null>(null);
- *
- *   useEffect(() => {
- *     const controller = initWebKit({
- *       theme: 'default',
- *       styles: 'main',
- *       fonts: 'default'
- *     });
- *     controllerRef.current = controller;
- *     controller.ready.then(() => setReady(true));
- *
- *     return () => controller.dispose();
- *   }, []);
- *
- *   return <>{children}</>;
- * }
- * ```
- */
-function useWebKit(options, hooks) {
-    const isSSR = typeof window === 'undefined';
-    const { useState, useEffect, useRef } = hooks;
-    const { skip = false, ...initOptions } = options;
-    const [ready, setReady] = useState(false);
-    const controllerRef = useRef(null);
-    const optionsRef = useRef(initOptions);
-    useEffect(() => {
-        // Skip on SSR or if explicitly skipped
-        if (isSSR || skip) {
-            return;
-        }
-        let isMounted = true;
-        const initialize = async () => {
-            // If already initialized globally, reuse the controller
-            if (globalController) {
-                initCount++;
-                controllerRef.current = globalController;
-                await globalController.ready;
-                if (isMounted) {
-                    setReady(true);
-                }
-                return;
-            }
-            // Dynamic import to ensure this only runs on client
-            const { initWebKit } = await Promise.resolve().then(() => __importStar(require('../init')));
-            const controller = initWebKit(optionsRef.current);
-            globalController = controller;
-            initCount++;
-            controllerRef.current = controller;
-            await controller.ready;
-            if (isMounted) {
-                setReady(true);
-            }
-        };
-        initialize();
-        return () => {
-            isMounted = false;
-            initCount--;
-            // Only dispose if this was the last user of the global controller
-            if (initCount <= 0 && globalController) {
-                globalController.dispose();
-                globalController = null;
-                initCount = 0;
-            }
-        };
-    }, [skip]);
-    return {
-        ready,
-        theme: controllerRef.current?.theme,
-        dispose: () => {
-            controllerRef.current?.dispose();
-            if (controllerRef.current === globalController) {
-                globalController = null;
-                initCount = 0;
-            }
-            controllerRef.current = null;
-        }
-    };
-}

package/build/react/use-web-kit.d.cts

@@ -1,80 +0,0 @@
-/**
- * React hook for initializing @easemate/web-kit
- *
- * This module provides hooks for React integration.
- * React is a peer dependency - users must install it separately.
- *
- * @module
- */
-import type { InitWebKitOptions, WebKitController } from '../init';
-/**
- * Options for useWebKit hook
- */
-export interface UseWebKitOptions extends InitWebKitOptions {
-    /**
-     * Skip initialization (useful for conditional rendering)
-     * @default false
-     */
-    skip?: boolean;
-}
-/**
- * Return type for useWebKit hook
- */
-export interface UseWebKitReturn {
-    /** Whether the web kit is ready */
-    ready: boolean;
-    /** Theme controller (if theme was configured) */
-    theme?: WebKitController['theme'];
-    /** Dispose function for cleanup */
-    dispose: () => void;
-}
-/**
- * React hook for initializing @easemate/web-kit.
- *
- * This hook handles initialization and cleanup of the web kit,
- * ensuring components are registered before rendering.
- *
- * **Important for Next.js App Router:**
- * - Use this hook in a client component (`'use client'`)
- * - Place it at the top of your component tree (e.g., in a layout)
- * - The hook is SSR-safe and will only initialize on the client
- *
- * **Note:** This hook requires React to be installed. Import React hooks
- * directly in your component and pass them to this function, or use the
- * imperative `initWebKit()` function directly.
- *
- * @example
- * ```tsx
- * // app/providers.tsx
- * 'use client';
- *
- * import { useEffect, useState, useRef } from '../react';
- * import { initWebKit } from '@easemate/web-kit';
- *
- * export function Providers({ children }: { children: React.ReactNode }) {
- *   const [ready, setReady] = useState(false);
- *   const controllerRef = useRef<WebKitController | null>(null);
- *
- *   useEffect(() => {
- *     const controller = initWebKit({
- *       theme: 'default',
- *       styles: 'main',
- *       fonts: 'default'
- *     });
- *     controllerRef.current = controller;
- *     controller.ready.then(() => setReady(true));
- *
- *     return () => controller.dispose();
- *   }, []);
- *
- *   return <>{children}</>;
- * }
- * ```
- */
-export declare function useWebKit(options: UseWebKitOptions, hooks: {
-    useState: <T>(initial: T) => [T, (value: T) => void];
-    useEffect: (effect: () => (() => void) | undefined, deps?: unknown[]) => void;
-    useRef: <T>(initial: T) => {
-        current: T;
-    };
-}): UseWebKitReturn;