@easemate/web-kit 0.2.0 → 0.3.0

package/build/react/events.d.ts

@@ -1,39 +0,0 @@
-/**
- * React event handling utilities for @easemate/web-kit
- */
-import type { TabChangeEventDetail } from '../elements/panel';
-import type { ControlEventDetail } from '../elements/shared';
-import type { StateChangeEventDetail } from '../elements/state';
-/**
- * Control change event type for React
- */
-export interface ControlChangeEvent<T = unknown> extends CustomEvent<ControlEventDetail<T>> {
-    detail: ControlEventDetail<T>;
-}
-/**
- * State change event type for React
- */
-export interface StateChangeEvent extends CustomEvent<StateChangeEventDetail> {
-    detail: StateChangeEventDetail;
-}
-/**
- * Tab change event type for React
- */
-export interface TabChangeEvent extends CustomEvent<TabChangeEventDetail> {
-    detail: TabChangeEventDetail;
-}
-/**
- * Creates a type-safe event handler for control-change events.
- *
- * @example
- * ```tsx
- * <ease-slider
- *   name="opacity"
- *   value={0.5}
- *   onControlChange={createEventHandler<number>((value, name) => {
- *     console.log(`${name} changed to ${value}`);
- *   })}
- * />
- * ```
- */
-export declare function createEventHandler<T = unknown>(callback: (value: T, name: string | undefined, event: Event) => void): (e: CustomEvent<ControlEventDetail<T>>) => void;

package/build/react/events.js

@@ -1,22 +0,0 @@
-/**
- * React event handling utilities for @easemate/web-kit
- */
-/**
- * Creates a type-safe event handler for control-change events.
- *
- * @example
- * ```tsx
- * <ease-slider
- *   name="opacity"
- *   value={0.5}
- *   onControlChange={createEventHandler<number>((value, name) => {
- *     console.log(`${name} changed to ${value}`);
- *   })}
- * />
- * ```
- */
-export function createEventHandler(callback) {
-    return (e) => {
-        callback(e.detail.value, e.detail.name, e.detail.event);
-    };
-}

package/build/react/index.cjs

@@ -1,19 +0,0 @@
-"use strict";
-/**
- * React integration for @easemate/web-kit
- *
- * Provides React hooks and utilities for seamless integration with
- * React and Next.js applications.
- *
- * @module @easemate/web-kit/react
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWebKit = exports.useEaseState = exports.createWebKitProvider = exports.createEventHandler = void 0;
-var events_1 = require("./events.cjs");
-Object.defineProperty(exports, "createEventHandler", { enumerable: true, get: function () { return events_1.createEventHandler; } });
-var provider_1 = require("./provider.cjs");
-Object.defineProperty(exports, "createWebKitProvider", { enumerable: true, get: function () { return provider_1.createWebKitProvider; } });
-var use_ease_state_1 = require("./use-ease-state.cjs");
-Object.defineProperty(exports, "useEaseState", { enumerable: true, get: function () { return use_ease_state_1.useEaseState; } });
-var use_web_kit_1 = require("./use-web-kit.cjs");
-Object.defineProperty(exports, "useWebKit", { enumerable: true, get: function () { return use_web_kit_1.useWebKit; } });

package/build/react/index.d.cts

@@ -1,13 +0,0 @@
-/**
- * React integration for @easemate/web-kit
- *
- * Provides React hooks and utilities for seamless integration with
- * React and Next.js applications.
- *
- * @module @easemate/web-kit/react
- */
-export type { EaseControlElement, EasePanelRef, EaseStateRef, StateChangeEventDetail, TabChangeEventDetail } from "./types.cjs";
-export { type ControlChangeEvent, createEventHandler, type StateChangeEvent, type TabChangeEvent } from "./events.cjs";
-export { createWebKitProvider, type ReactHooksForProvider, type WebKitContextValue, type WebKitProviderProps } from "./provider.cjs";
-export { type ReactHooksLike, type UseEaseStateOptions, type UseEaseStateReturn, useEaseState } from "./use-ease-state.cjs";
-export { type UseWebKitOptions, type UseWebKitReturn, useWebKit } from "./use-web-kit.cjs";

package/build/react/index.d.ts

@@ -1,13 +0,0 @@
-/**
- * React integration for @easemate/web-kit
- *
- * Provides React hooks and utilities for seamless integration with
- * React and Next.js applications.
- *
- * @module @easemate/web-kit/react
- */
-export type { EaseControlElement, EasePanelRef, EaseStateRef, StateChangeEventDetail, TabChangeEventDetail } from "./types.js";
-export { type ControlChangeEvent, createEventHandler, type StateChangeEvent, type TabChangeEvent } from "./events.js";
-export { createWebKitProvider, type ReactHooksForProvider, type WebKitContextValue, type WebKitProviderProps } from "./provider.js";
-export { type ReactHooksLike, type UseEaseStateOptions, type UseEaseStateReturn, useEaseState } from "./use-ease-state.js";
-export { type UseWebKitOptions, type UseWebKitReturn, useWebKit } from "./use-web-kit.js";

package/build/react/index.js

@@ -1,12 +0,0 @@
-/**
- * React integration for @easemate/web-kit
- *
- * Provides React hooks and utilities for seamless integration with
- * React and Next.js applications.
- *
- * @module @easemate/web-kit/react
- */
-export { createEventHandler } from "./events.js";
-export { createWebKitProvider } from "./provider.js";
-export { useEaseState } from "./use-ease-state.js";
-export { useWebKit } from "./use-web-kit.js";

package/build/react/provider.cjs

@@ -1,134 +0,0 @@
-"use strict";
-/**
- * React context provider for @easemate/web-kit
- *
- * This module provides a simple way to initialize the web kit in a React context.
- * For simpler use cases, consider using `initWebKit()` directly in a useEffect.
- */
-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.createWebKitProvider = createWebKitProvider;
-/**
- * Creates a WebKit provider and context hook.
- *
- * This function creates a React context and provider component
- * that initializes the web kit and provides access to its state.
- *
- * @example
- * ```tsx
- * // providers.tsx
- * 'use client';
- *
- * import * as React from '../react';
- * import { createWebKitProvider } from '@easemate/web-kit/react';
- *
- * const { WebKitProvider, useWebKitContext } = createWebKitProvider(React);
- *
- * export { WebKitProvider, useWebKitContext };
- *
- * // layout.tsx
- * import { WebKitProvider } from './providers';
- *
- * export default function Layout({ children }) {
- *   return (
- *     <WebKitProvider options={{ theme: 'default', styles: 'main' }}>
- *       {children}
- *     </WebKitProvider>
- *   );
- * }
- * ```
- */
-function createWebKitProvider(React) {
-    const defaultValue = {
-        ready: false,
-        theme: undefined
-    };
-    const WebKitContext = React.createContext(defaultValue);
-    function WebKitProvider(props) {
-        const { options = {}, immediate = true, children } = props;
-        const isSSR = typeof window === 'undefined';
-        const { useState, useEffect, useMemo, createElement } = React;
-        const [ready, setReady] = useState(false);
-        const [controller, setController] = useState(null);
-        useEffect(() => {
-            // Skip initialization on SSR
-            if (isSSR) {
-                return;
-            }
-            let isMounted = true;
-            const initialize = async () => {
-                const { initWebKit } = await Promise.resolve().then(() => __importStar(require('../init')));
-                const ctrl = initWebKit(options);
-                if (isMounted) {
-                    setController(ctrl);
-                }
-                await ctrl.ready;
-                if (isMounted) {
-                    setReady(true);
-                }
-            };
-            initialize();
-            return () => {
-                isMounted = false;
-                controller?.dispose();
-                return undefined;
-            };
-        }, []);
-        const value = useMemo(() => {
-            return {
-                ready,
-                theme: controller?.theme
-            };
-        }, [ready, controller]);
-        // On SSR, just render children directly
-        if (isSSR) {
-            return children;
-        }
-        // Don't render children until ready if immediate is false
-        if (!immediate && !ready) {
-            return null;
-        }
-        return createElement(WebKitContext.Provider, { value }, children);
-    }
-    function useWebKitContext() {
-        const context = React.useContext(WebKitContext);
-        // On SSR, context will be the default value anyway
-        return context;
-    }
-    return {
-        WebKitProvider,
-        useWebKitContext
-    };
-}

package/build/react/provider.d.cts

@@ -1,81 +0,0 @@
-/**
- * React context provider for @easemate/web-kit
- *
- * This module provides a simple way to initialize the web kit in a React context.
- * For simpler use cases, consider using `initWebKit()` directly in a useEffect.
- */
-import type { InitWebKitOptions, WebKitController } from '../init';
-/**
- * WebKit context value
- */
-export interface WebKitContextValue {
-    /** Whether the web kit is ready */
-    ready: boolean;
-    /** Theme controller */
-    theme?: WebKitController['theme'];
-}
-/**
- * Props for createWebKitProvider
- */
-export interface WebKitProviderProps {
-    /** Initialization options */
-    options?: InitWebKitOptions;
-    /**
-     * Render children even before ready
-     * @default true
-     */
-    immediate?: boolean;
-}
-/**
- * React hooks interface for provider creation
- */
-export interface ReactHooksForProvider {
-    useState: <S>(initial: S) => [S, (value: S) => void];
-    useEffect: (effect: () => (() => void) | undefined, deps?: unknown[]) => void;
-    useMemo: <T>(factory: () => T, deps: unknown[]) => T;
-    createContext: <T>(defaultValue: T) => {
-        Provider: unknown;
-        Consumer: unknown;
-    };
-    useContext: <T>(context: {
-        Provider: unknown;
-        Consumer: unknown;
-    }) => T;
-    createElement: (type: unknown, props: Record<string, unknown> | null, ...children: unknown[]) => unknown;
-}
-/**
- * Creates a WebKit provider and context hook.
- *
- * This function creates a React context and provider component
- * that initializes the web kit and provides access to its state.
- *
- * @example
- * ```tsx
- * // providers.tsx
- * 'use client';
- *
- * import * as React from '../react';
- * import { createWebKitProvider } from '@easemate/web-kit/react';
- *
- * const { WebKitProvider, useWebKitContext } = createWebKitProvider(React);
- *
- * export { WebKitProvider, useWebKitContext };
- *
- * // layout.tsx
- * import { WebKitProvider } from './providers';
- *
- * export default function Layout({ children }) {
- *   return (
- *     <WebKitProvider options={{ theme: 'default', styles: 'main' }}>
- *       {children}
- *     </WebKitProvider>
- *   );
- * }
- * ```
- */
-export declare function createWebKitProvider(React: ReactHooksForProvider): {
-    WebKitProvider: (props: WebKitProviderProps & {
-        children: unknown;
-    }) => unknown;
-    useWebKitContext: () => WebKitContextValue;
-};

package/build/react/provider.d.ts

@@ -1,81 +0,0 @@
-/**
- * React context provider for @easemate/web-kit
- *
- * This module provides a simple way to initialize the web kit in a React context.
- * For simpler use cases, consider using `initWebKit()` directly in a useEffect.
- */
-import type { InitWebKitOptions, WebKitController } from '../init';
-/**
- * WebKit context value
- */
-export interface WebKitContextValue {
-    /** Whether the web kit is ready */
-    ready: boolean;
-    /** Theme controller */
-    theme?: WebKitController['theme'];
-}
-/**
- * Props for createWebKitProvider
- */
-export interface WebKitProviderProps {
-    /** Initialization options */
-    options?: InitWebKitOptions;
-    /**
-     * Render children even before ready
-     * @default true
-     */
-    immediate?: boolean;
-}
-/**
- * React hooks interface for provider creation
- */
-export interface ReactHooksForProvider {
-    useState: <S>(initial: S) => [S, (value: S) => void];
-    useEffect: (effect: () => (() => void) | undefined, deps?: unknown[]) => void;
-    useMemo: <T>(factory: () => T, deps: unknown[]) => T;
-    createContext: <T>(defaultValue: T) => {
-        Provider: unknown;
-        Consumer: unknown;
-    };
-    useContext: <T>(context: {
-        Provider: unknown;
-        Consumer: unknown;
-    }) => T;
-    createElement: (type: unknown, props: Record<string, unknown> | null, ...children: unknown[]) => unknown;
-}
-/**
- * Creates a WebKit provider and context hook.
- *
- * This function creates a React context and provider component
- * that initializes the web kit and provides access to its state.
- *
- * @example
- * ```tsx
- * // providers.tsx
- * 'use client';
- *
- * import * as React from '../react';
- * import { createWebKitProvider } from '@easemate/web-kit/react';
- *
- * const { WebKitProvider, useWebKitContext } = createWebKitProvider(React);
- *
- * export { WebKitProvider, useWebKitContext };
- *
- * // layout.tsx
- * import { WebKitProvider } from './providers';
- *
- * export default function Layout({ children }) {
- *   return (
- *     <WebKitProvider options={{ theme: 'default', styles: 'main' }}>
- *       {children}
- *     </WebKitProvider>
- *   );
- * }
- * ```
- */
-export declare function createWebKitProvider(React: ReactHooksForProvider): {
-    WebKitProvider: (props: WebKitProviderProps & {
-        children: unknown;
-    }) => unknown;
-    useWebKitContext: () => WebKitContextValue;
-};

package/build/react/provider.js

@@ -1,98 +0,0 @@
-/**
- * React context provider for @easemate/web-kit
- *
- * This module provides a simple way to initialize the web kit in a React context.
- * For simpler use cases, consider using `initWebKit()` directly in a useEffect.
- */
-/**
- * Creates a WebKit provider and context hook.
- *
- * This function creates a React context and provider component
- * that initializes the web kit and provides access to its state.
- *
- * @example
- * ```tsx
- * // providers.tsx
- * 'use client';
- *
- * import * as React from '../react';
- * import { createWebKitProvider } from '@easemate/web-kit/react';
- *
- * const { WebKitProvider, useWebKitContext } = createWebKitProvider(React);
- *
- * export { WebKitProvider, useWebKitContext };
- *
- * // layout.tsx
- * import { WebKitProvider } from './providers';
- *
- * export default function Layout({ children }) {
- *   return (
- *     <WebKitProvider options={{ theme: 'default', styles: 'main' }}>
- *       {children}
- *     </WebKitProvider>
- *   );
- * }
- * ```
- */
-export function createWebKitProvider(React) {
-    const defaultValue = {
-        ready: false,
-        theme: undefined
-    };
-    const WebKitContext = React.createContext(defaultValue);
-    function WebKitProvider(props) {
-        const { options = {}, immediate = true, children } = props;
-        const isSSR = typeof window === 'undefined';
-        const { useState, useEffect, useMemo, createElement } = React;
-        const [ready, setReady] = useState(false);
-        const [controller, setController] = useState(null);
-        useEffect(() => {
-            // Skip initialization on SSR
-            if (isSSR) {
-                return;
-            }
-            let isMounted = true;
-            const initialize = async () => {
-                const { initWebKit } = await import('../init');
-                const ctrl = initWebKit(options);
-                if (isMounted) {
-                    setController(ctrl);
-                }
-                await ctrl.ready;
-                if (isMounted) {
-                    setReady(true);
-                }
-            };
-            initialize();
-            return () => {
-                isMounted = false;
-                controller?.dispose();
-                return undefined;
-            };
-        }, []);
-        const value = useMemo(() => {
-            return {
-                ready,
-                theme: controller?.theme
-            };
-        }, [ready, controller]);
-        // On SSR, just render children directly
-        if (isSSR) {
-            return children;
-        }
-        // Don't render children until ready if immediate is false
-        if (!immediate && !ready) {
-            return null;
-        }
-        return createElement(WebKitContext.Provider, { value }, children);
-    }
-    function useWebKitContext() {
-        const context = React.useContext(WebKitContext);
-        // On SSR, context will be the default value anyway
-        return context;
-    }
-    return {
-        WebKitProvider,
-        useWebKitContext
-    };
-}

package/build/react/types.cjs

@@ -1,8 +0,0 @@
-"use strict";
-/**
- * React type definitions for @easemate/web-kit
- *
- * These types are provided for consumers using React/Next.js with this library.
- * React is NOT a dependency of this package - these are interface definitions only.
- */
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/react/types.d.cts

@@ -1,55 +0,0 @@
-/**
- * React type definitions for @easemate/web-kit
- *
- * These types are provided for consumers using React/Next.js with this library.
- * React is NOT a dependency of this package - these are interface definitions only.
- */
-import type { TabChangeEventDetail } from '../elements/panel';
-import type { StateChangeEventDetail } from '../elements/state';
-/**
- * Ref type for the ease-state web component
- */
-export interface EaseStateRef extends HTMLElement {
-    /** Get the current state object */
-    readonly state: Record<string, unknown>;
-    /** Get a specific control value */
-    get(name: string): unknown;
-    /** Set a specific control value */
-    set(name: string, value: unknown): void;
-    /** Subscribe to state changes */
-    subscribe(callback: (value: unknown, name: string) => void): {
-        unsubscribe: () => void;
-    };
-    subscribe(name: string, callback: (value: unknown, name: string) => void): {
-        unsubscribe: () => void;
-    };
-    /** Reset all controls to initial values */
-    reset(): void;
-}
-/**
- * Ref type for the ease-panel web component
- */
-export interface EasePanelRef extends HTMLElement {
-    /** Current active tab index */
-    activeTab: number;
-    /** Get the tab configuration */
-    readonly tabs: ReadonlyArray<{
-        id: string;
-        label: string;
-    }>;
-    /** Switch to a specific tab */
-    setTab(index: number): void;
-}
-/**
- * Event detail types re-exported for React usage
- */
-export type { StateChangeEventDetail, TabChangeEventDetail };
-/**
- * Generic control element interface
- */
-export interface EaseControlElement extends HTMLElement {
-    name?: string;
-    value?: unknown;
-    checked?: boolean;
-    disabled?: boolean;
-}

package/build/react/types.d.ts

@@ -1,55 +0,0 @@
-/**
- * React type definitions for @easemate/web-kit
- *
- * These types are provided for consumers using React/Next.js with this library.
- * React is NOT a dependency of this package - these are interface definitions only.
- */
-import type { TabChangeEventDetail } from '../elements/panel';
-import type { StateChangeEventDetail } from '../elements/state';
-/**
- * Ref type for the ease-state web component
- */
-export interface EaseStateRef extends HTMLElement {
-    /** Get the current state object */
-    readonly state: Record<string, unknown>;
-    /** Get a specific control value */
-    get(name: string): unknown;
-    /** Set a specific control value */
-    set(name: string, value: unknown): void;
-    /** Subscribe to state changes */
-    subscribe(callback: (value: unknown, name: string) => void): {
-        unsubscribe: () => void;
-    };
-    subscribe(name: string, callback: (value: unknown, name: string) => void): {
-        unsubscribe: () => void;
-    };
-    /** Reset all controls to initial values */
-    reset(): void;
-}
-/**
- * Ref type for the ease-panel web component
- */
-export interface EasePanelRef extends HTMLElement {
-    /** Current active tab index */
-    activeTab: number;
-    /** Get the tab configuration */
-    readonly tabs: ReadonlyArray<{
-        id: string;
-        label: string;
-    }>;
-    /** Switch to a specific tab */
-    setTab(index: number): void;
-}
-/**
- * Event detail types re-exported for React usage
- */
-export type { StateChangeEventDetail, TabChangeEventDetail };
-/**
- * Generic control element interface
- */
-export interface EaseControlElement extends HTMLElement {
-    name?: string;
-    value?: unknown;
-    checked?: boolean;
-    disabled?: boolean;
-}

package/build/react/types.js

@@ -1,7 +0,0 @@
-/**
- * React type definitions for @easemate/web-kit
- *
- * These types are provided for consumers using React/Next.js with this library.
- * React is NOT a dependency of this package - these are interface definitions only.
- */
-export {};