@easemate/web-kit 0.1.5 → 0.2.0

package/build/internal/component-loaders.d.cts

@@ -5,7 +5,7 @@
 /**
  * All root-level web-kit element tags (excludes internal sub-components).
  */
-export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
+export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
 /**
  * Advanced component tags (curve, code editor, etc.)
  */
@@ -13,7 +13,7 @@ export declare const WEB_KIT_COMPONENT_TAGS: readonly ["ease-curve", "ease-code"
 /**
  * All public web-kit tags.
  */
-export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
+export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
 /**
  * Union type of all element tag names.
  */

package/build/internal/component-loaders.d.ts

@@ -5,7 +5,7 @@
 /**
  * All root-level web-kit element tags (excludes internal sub-components).
  */
-export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
+export declare const WEB_KIT_ELEMENT_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap"];
 /**
  * Advanced component tags (curve, code editor, etc.)
  */
@@ -13,7 +13,7 @@ export declare const WEB_KIT_COMPONENT_TAGS: readonly ["ease-curve", "ease-code"
 /**
  * All public web-kit tags.
  */
-export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
+export declare const WEB_KIT_ALL_TAGS: readonly ["ease-button", "ease-checkbox", "ease-color-input", "ease-color-picker", "ease-dropdown", "ease-input", "ease-number-input", "ease-origin", "ease-radio-group", "ease-radio-input", "ease-slider", "ease-toggle", "ease-field", "ease-panel", "ease-popover", "ease-state", "ease-tooltip", "ease-logo-loader", "ease-monitor", "ease-monitor-fps", "ease-icon-anchor-add", "ease-icon-anchor-remove", "ease-icon-arrow-up", "ease-icon-arrows-vertical", "ease-icon-bezier", "ease-icon-bezier-angle", "ease-icon-bezier-distribute", "ease-icon-bezier-length", "ease-icon-bezier-mirror", "ease-icon-check", "ease-icon-chevron", "ease-icon-circle-arrow-left", "ease-icon-circle-arrow-right", "ease-icon-clear", "ease-icon-code", "ease-icon-dots", "ease-icon-grid", "ease-icon-loading", "ease-icon-mention", "ease-icon-minus", "ease-icon-picker", "ease-icon-plus", "ease-icon-settings", "ease-icon-snap", "ease-curve", "ease-code"];
 /**
  * Union type of all element tag names.
  */

package/build/internal/component-loaders.js

@@ -21,6 +21,7 @@ export const WEB_KIT_ELEMENT_TAGS = [
     'ease-toggle',
     // Layout
     'ease-field',
+    'ease-panel',
     'ease-popover',
     'ease-state',
     'ease-tooltip',
@@ -93,6 +94,7 @@ export const COMPONENT_LOADERS = {
     'ease-toggle': () => import("../elements/toggle/index.js"),
     // Layout
     'ease-field': () => import("../elements/field/index.js"),
+    'ease-panel': () => import("../elements/panel/index.js"),
     'ease-popover': () => import("../elements/popover/index.js"),
     'ease-state': () => import("../elements/state/index.js"),
     'ease-tooltip': () => import("../elements/tooltip/index.js"),

package/build/react/events.cjs

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * React event handling utilities for @easemate/web-kit
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEventHandler = createEventHandler;
+/**
+ * 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}`);
+ *   })}
+ * />
+ * ```
+ */
+function createEventHandler(callback) {
+    return (e) => {
+        callback(e.detail.value, e.detail.name, e.detail.event);
+    };
+}

package/build/react/events.d.cts

@@ -0,0 +1,39 @@
+/**
+ * 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.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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

@@ -0,0 +1,22 @@
+/**
+ * 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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,13 @@
+/**
+ * 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

@@ -0,0 +1,13 @@
+/**
+ * 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

@@ -0,0 +1,12 @@
+/**
+ * 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

@@ -0,0 +1,134 @@
+"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

@@ -0,0 +1,81 @@
+/**
+ * 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

@@ -0,0 +1,81 @@
+/**
+ * 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

@@ -0,0 +1,98 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+"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 });