alepha 0.18.2 → 0.18.3

package/dist/react/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/core/components/ClientOnly.tsx","../../../src/react/core/components/ErrorBoundary.tsx","../../../src/react/core/contexts/AlephaContext.ts","../../../src/react/core/contexts/AlephaProvider.tsx","../../../src/react/core/hooks/useAlepha.ts","../../../src/react/core/hooks/useInject.ts","../../../src/react/core/hooks/useAction.ts","../../../src/react/core/hooks/useClient.ts","../../../src/react/core/hooks/useEvents.ts","../../../src/react/core/hooks/useStore.ts","../../../src/react/core/index.ts"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface ClientOnlyProps {\n  fallback?: ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * A small utility component that renders its children only on the client side.\n *\n * Optionally, you can provide a fallback React node that will be rendered.\n *\n * You should use this component when\n * - you have code that relies on browser-specific APIs\n * - you want to avoid server-side rendering for a specific part of your application\n * - you want to prevent pre-rendering of a component\n *\n * @example\n * ```tsx\n * import { ClientOnly } from \"alepha/react\";\n *\n * const MyComponent = () => {\n *   // Avoids SSR issues with Date API\n *   return (\n *     <ClientOnly>\n *       {new Date().toLocaleTimeString()}\n *     </ClientOnly>\n *   );\n * }\n * ```\n */\nconst ClientOnly = (props: PropsWithChildren<ClientOnlyProps>) => {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => setMounted(true), []);\n\n  if (props.disabled) {\n    return props.children;\n  }\n\n  return mounted ? props.children : props.fallback;\n};\n\nexport default ClientOnly;\n","import React, {\n  type ErrorInfo,\n  type PropsWithChildren,\n  type ReactNode,\n} from \"react\";\n\n/**\n * Props for the ErrorBoundary component.\n */\nexport interface ErrorBoundaryProps {\n  /**\n   * Fallback React node to render when an error is caught.\n   * If not provided, a default error message will be shown.\n   */\n  fallback: (error: Error) => ReactNode;\n\n  /**\n   * Optional callback that receives the error and error info.\n   * Use this to log errors to a monitoring service.\n   */\n  onError?: (error: Error, info: ErrorInfo) => void;\n}\n\n/**\n * State of the ErrorBoundary component.\n */\ninterface ErrorBoundaryState {\n  error?: Error;\n}\n\n/**\n * A reusable error boundary for catching rendering errors in any part of the React component tree.\n *\n * It's already included in the Alepha React framework when using page or layout components.\n */\nexport class ErrorBoundary extends React.Component<\n  PropsWithChildren<ErrorBoundaryProps>,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {};\n  }\n\n  /**\n   * Update state so the next render shows the fallback UI.\n   */\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return {\n      error,\n    };\n  }\n\n  /**\n   * Lifecycle method called when an error is caught.\n   * You can log the error or perform side effects here.\n   */\n  componentDidCatch(error: Error, info: ErrorInfo): void {\n    if (this.props.onError) {\n      this.props.onError(error, info);\n    }\n  }\n\n  render(): ReactNode {\n    if (this.state.error) {\n      return this.props.fallback(this.state.error);\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n","import type { Alepha } from \"alepha\";\nimport { createContext } from \"react\";\n\n/**\n * React context to provide the Alepha instance throughout the component tree.\n */\nexport const AlephaContext = createContext<Alepha | undefined>(undefined);\n","import { Alepha } from \"alepha\";\nimport { type ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { AlephaContext } from \"./AlephaContext.ts\";\n\nexport interface AlephaProviderProps {\n  children: ReactNode;\n  onError: (error: Error) => ReactNode;\n  onLoading: () => ReactNode;\n}\n\n/**\n * AlephaProvider component to initialize and provide Alepha instance to the app.\n *\n * This isn't recommended for apps using `alepha/react/router`, as Router will handle this for you.\n */\nexport const AlephaProvider = (props: AlephaProviderProps) => {\n  const alepha = useMemo(() => Alepha.create(), []);\n\n  const [started, setStarted] = useState(false);\n  const [error, setError] = useState<Error | undefined>();\n\n  useEffect(() => {\n    alepha\n      .start()\n      .then(() => setStarted(true))\n      .catch((err) => setError(err));\n  }, [alepha]);\n\n  if (error) {\n    return props.onError(error);\n  }\n\n  if (!started) {\n    return props.onLoading();\n  }\n\n  return (\n    <AlephaContext.Provider value={alepha}>\n      {props.children}\n    </AlephaContext.Provider>\n  );\n};\n","import { type Alepha, AlephaError } from \"alepha\";\nimport { useContext } from \"react\";\nimport { AlephaContext } from \"../contexts/AlephaContext.ts\";\n\n/**\n * Main Alepha hook.\n *\n * It provides access to the Alepha instance within a React component.\n *\n * With Alepha, you can access the core functionalities of the framework:\n *\n * - alepha.state() for state management\n * - alepha.inject() for dependency injection\n * - alepha.events.emit() for event handling\n * etc...\n */\nexport const useAlepha = (): Alepha => {\n  const alepha = useContext(AlephaContext);\n  if (!alepha) {\n    throw new AlephaError(\n      \"Hook 'useAlepha()' must be used within an AlephaContext.Provider\",\n    );\n  }\n\n  return alepha;\n};\n","import type { Service } from \"alepha\";\nimport { useMemo } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Hook to inject a service instance.\n * It's a wrapper of `useAlepha().inject(service)` with a memoization.\n */\nexport const useInject = <T extends object>(service: Service<T>): T => {\n  const alepha = useAlepha();\n  return useMemo(() => alepha.inject(service), []);\n};\n","import type { Async } from \"alepha\";\nimport {\n  DateTimeProvider,\n  type DurationLike,\n  type Interval,\n  type Timeout,\n} from \"alepha/datetime\";\nimport {\n  type DependencyList,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\nimport { useInject } from \"./useInject.ts\";\n\n/**\n * Hook for handling async actions with automatic error handling and event emission.\n *\n * By default, prevents concurrent executions - if an action is running and you call it again,\n * the second call will be ignored. Use `debounce` option to delay execution instead.\n *\n * Emits lifecycle events:\n * - `react:action:begin` - When action starts\n * - `react:action:success` - When action completes successfully\n * - `react:action:error` - When action throws an error\n * - `react:action:end` - Always emitted at the end\n *\n * @example Basic usage\n * ```tsx\n * const action = useAction({\n *   handler: async (data) => {\n *     await api.save(data);\n *   }\n * }, []);\n *\n * <button onClick={() => action.run(data)} disabled={action.loading}>\n *   Save\n * </button>\n * ```\n *\n * @example With debounce (search input)\n * ```tsx\n * const search = useAction({\n *   handler: async (query: string) => {\n *     await api.search(query);\n *   },\n *   debounce: 300 // Wait 300ms after last call\n * }, []);\n *\n * <input onChange={(e) => search.run(e.target.value)} />\n * ```\n *\n * @example Run on component mount\n * ```tsx\n * const fetchData = useAction({\n *   handler: async () => {\n *     const data = await api.getData();\n *     return data;\n *   },\n *   runOnInit: true // Runs once when component mounts\n * }, []);\n * ```\n *\n * @example Run periodically (polling)\n * ```tsx\n * const pollStatus = useAction({\n *   handler: async () => {\n *     const status = await api.getStatus();\n *     return status;\n *   },\n *   runEvery: 5000 // Run every 5 seconds\n * }, []);\n *\n * // Or with duration tuple\n * const pollStatus = useAction({\n *   handler: async () => {\n *     const status = await api.getStatus();\n *     return status;\n *   },\n *   runEvery: [30, 'seconds'] // Run every 30 seconds\n * }, []);\n * ```\n *\n * @example With AbortController\n * ```tsx\n * const fetch = useAction({\n *   handler: async (url, { signal }) => {\n *     const response = await fetch(url, { signal });\n *     return response.json();\n *   }\n * }, []);\n * // Automatically cancelled on unmount or when new request starts\n * ```\n *\n * @example With error handling\n * ```tsx\n * const deleteAction = useAction({\n *   handler: async (id: string) => {\n *     await api.delete(id);\n *   },\n *   onError: (error) => {\n *     if (error.code === 'NOT_FOUND') {\n *       // Custom error handling\n *     }\n *   }\n * }, []);\n *\n * {deleteAction.error && <div>Error: {deleteAction.error.message}</div>}\n * ```\n *\n * @example Global error handling\n * ```tsx\n * // In your root app setup\n * alepha.events.on(\"react:action:error\", ({ error }) => {\n *   toast.danger(error.message);\n *   Sentry.captureException(error);\n * });\n * ```\n */\nexport function useAction<Args extends any[], Result = void>(\n  options: UseActionOptions<Args, Result>,\n  deps: DependencyList,\n): UseActionReturn<Args, Result> {\n  const alepha = useAlepha();\n  const dateTimeProvider = useInject(DateTimeProvider);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | undefined>();\n  const [result, setResult] = useState<Result | undefined>();\n  const isExecutingRef = useRef(false);\n  const debounceTimerRef = useRef<Timeout | undefined>(undefined);\n  const abortControllerRef = useRef<AbortController | undefined>(undefined);\n  const isMountedRef = useRef(true);\n  const intervalRef = useRef<Interval | undefined>(undefined);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n\n      // clear debounce timer\n      if (debounceTimerRef.current) {\n        dateTimeProvider.clearTimeout(debounceTimerRef.current);\n        debounceTimerRef.current = undefined;\n      }\n\n      // clear interval\n      if (intervalRef.current) {\n        dateTimeProvider.clearInterval(intervalRef.current);\n        intervalRef.current = undefined;\n      }\n\n      // abort in-flight request\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n        abortControllerRef.current = undefined;\n      }\n    };\n  }, []);\n\n  const executeAction = useCallback(\n    async (...args: Args): Promise<Result | undefined> => {\n      // Prevent concurrent executions\n      if (isExecutingRef.current) {\n        return;\n      }\n\n      // Abort previous request if still running\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      // Create new AbortController for this request\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      isExecutingRef.current = true;\n      setLoading(true);\n      setError(undefined);\n\n      await alepha.events.emit(\"react:action:begin\", {\n        type: \"custom\",\n        id: options.id,\n      });\n\n      try {\n        // Pass abort signal as last argument to handler\n        const result = await options.handler(...args, {\n          signal: abortController.signal,\n        } as any);\n\n        // TODO: it should be after onSuccess?\n        setResult(result as Result);\n\n        // Only update state if still mounted and not aborted\n        if (!isMountedRef.current || abortController.signal.aborted) {\n          return;\n        }\n\n        await alepha.events.emit(\"react:action:success\", {\n          type: \"custom\",\n          id: options.id,\n        });\n\n        if (options.onSuccess) {\n          await options.onSuccess(result);\n        }\n\n        return result;\n      } catch (err) {\n        // Ignore abort errors\n        if (err instanceof Error && err.name === \"AbortError\") {\n          return;\n        }\n\n        // Only update state if still mounted\n        if (!isMountedRef.current) {\n          return;\n        }\n\n        const error = err as Error;\n        setError(error);\n\n        await alepha.events.emit(\"react:action:error\", {\n          type: \"custom\",\n          id: options.id,\n          error,\n        });\n\n        if (options.onError) {\n          await options.onError(error);\n        } else {\n          // Re-throw if no custom error handler\n          throw error;\n        }\n      } finally {\n        isExecutingRef.current = false;\n        setLoading(false);\n\n        await alepha.events.emit(\"react:action:end\", {\n          type: \"custom\",\n          id: options.id,\n        });\n\n        // Clean up abort controller\n        if (abortControllerRef.current === abortController) {\n          abortControllerRef.current = undefined;\n        }\n      }\n    },\n    [...deps, options.id, options.onError, options.onSuccess],\n  );\n\n  const handler = useCallback(\n    async (...args: Args): Promise<Result | undefined> => {\n      if (options.debounce) {\n        // clear existing timer\n        if (debounceTimerRef.current) {\n          dateTimeProvider.clearTimeout(debounceTimerRef.current);\n        }\n\n        // Set new timer\n        return new Promise((resolve) => {\n          debounceTimerRef.current = dateTimeProvider.createTimeout(\n            async () => {\n              const result = await executeAction(...args);\n              resolve(result);\n            },\n            options.debounce ?? 0,\n          );\n        });\n      }\n\n      return executeAction(...args);\n    },\n    [executeAction, options.debounce],\n  );\n\n  const cancel = useCallback(() => {\n    // clear debounce timer\n    if (debounceTimerRef.current) {\n      dateTimeProvider.clearTimeout(debounceTimerRef.current);\n      debounceTimerRef.current = undefined;\n    }\n\n    // abort in-flight request\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = undefined;\n    }\n\n    // reset state\n    if (isMountedRef.current) {\n      isExecutingRef.current = false;\n      setLoading(false);\n    }\n  }, []);\n\n  // Run action on mount if runOnInit is true\n  useEffect(() => {\n    if (options.runOnInit) {\n      handler(...([] as any));\n    }\n  }, deps);\n\n  // Run action periodically if runEvery is specified\n  useEffect(() => {\n    if (!options.runEvery) {\n      return;\n    }\n\n    // Set up interval\n    intervalRef.current = dateTimeProvider.createInterval(\n      () => handler(...([] as any)),\n      options.runEvery,\n      true,\n    );\n\n    // cleanup on unmount or when runEvery changes\n    return () => {\n      if (intervalRef.current) {\n        dateTimeProvider.clearInterval(intervalRef.current);\n        intervalRef.current = undefined;\n      }\n    };\n  }, [handler, options.runEvery]);\n\n  return {\n    run: handler,\n    loading,\n    error,\n    cancel,\n    result,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Context object passed as the last argument to action handlers.\n * Contains an AbortSignal that can be used to cancel the request.\n */\nexport interface ActionContext {\n  /**\n   * AbortSignal that can be passed to fetch or other async operations.\n   * The signal will be aborted when:\n   * - The component unmounts\n   * - A new action is triggered (cancels previous)\n   * - The cancel() method is called\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({\n   *   handler: async (url, { signal }) => {\n   *     const response = await fetch(url, { signal });\n   *     return response.json();\n   *   }\n   * }, []);\n   * ```\n   */\n  signal: AbortSignal;\n}\n\nexport interface UseActionOptions<Args extends any[] = any[], Result = any> {\n  /**\n   * The async action handler function.\n   * Receives the action arguments plus an ActionContext as the last parameter.\n   */\n  handler: (...args: [...Args, ActionContext]) => Async<Result>;\n\n  /**\n   * Custom error handler. If provided, prevents default error re-throw.\n   */\n  onError?: (error: Error) => void | Promise<void>;\n\n  /**\n   * Custom success handler.\n   */\n  onSuccess?: (result: Result) => void | Promise<void>;\n\n  /**\n   * Optional identifier for this action (useful for debugging/analytics)\n   */\n  id?: string;\n\n  name?: string;\n\n  /**\n   * Debounce delay in milliseconds. If specified, the action will only execute\n   * after the specified delay has passed since the last call. Useful for search inputs\n   * or other high-frequency events.\n   *\n   * @example\n   * ```tsx\n   * // Execute search 300ms after user stops typing\n   * const search = useAction({ handler: search, debounce: 300 }, [])\n   * ```\n   */\n  debounce?: number;\n\n  /**\n   * If true, the action will be executed once when the component mounts.\n   *\n   * @example\n   * ```tsx\n   * const fetchData = useAction({\n   *   handler: async () => await api.getData(),\n   *   runOnInit: true\n   * }, []);\n   * ```\n   */\n  runOnInit?: boolean;\n\n  /**\n   * If specified, the action will be executed periodically at the given interval.\n   * The interval is specified as a DurationLike value (number in ms, Duration object, or [number, unit] tuple).\n   *\n   * @example\n   * ```tsx\n   * // Run every 5 seconds\n   * const poll = useAction({\n   *   handler: async () => await api.poll(),\n   *   runEvery: 5000\n   * }, []);\n   * ```\n   *\n   * @example\n   * ```tsx\n   * // Run every 1 minute\n   * const poll = useAction({\n   *   handler: async () => await api.poll(),\n   *   runEvery: [1, 'minute']\n   * }, []);\n   * ```\n   */\n  runEvery?: DurationLike;\n}\n\nexport interface UseActionReturn<Args extends any[], Result> {\n  /**\n   * Execute the action with the provided arguments.\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({ handler: async (data) => { ... } }, []);\n   * action.run(data);\n   * ```\n   */\n  run: (...args: Args) => Promise<Result | undefined>;\n\n  /**\n   * Loading state - true when action is executing.\n   */\n  loading: boolean;\n\n  /**\n   * Error state - contains error if action failed, undefined otherwise.\n   */\n  error?: Error;\n\n  /**\n   * Cancel any pending debounced action or abort the current in-flight request.\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({ ... }, []);\n   *\n   * <button onClick={action.cancel} disabled={!action.loading}>\n   *   Cancel\n   * </button>\n   * ```\n   */\n  cancel: () => void;\n\n  /**\n   * The result data from the last successful action execution.\n   */\n  result?: Result;\n}\n","import {\n  type ClientScope,\n  type HttpVirtualClient,\n  LinkProvider,\n} from \"alepha/server/links\";\nimport { useMemo } from \"react\";\nimport { useInject } from \"./useInject.ts\";\n\n/**\n * Hook to get a virtual client for the specified scope.\n *\n * It's the React-hook version of `$client()`, from `AlephaServerLinks` module.\n */\nexport const useClient = <T extends object>(\n  scope?: ClientScope,\n): HttpVirtualClient<T> => {\n  const linkProvider = useInject(LinkProvider);\n\n  return useMemo(() => {\n    return linkProvider.client<T>(scope);\n  }, [scope]);\n};\n","import type { Async, Hook, Hooks } from \"alepha\";\nimport { type DependencyList, useEffect } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Allow subscribing to multiple Alepha events. See {@link Hooks} for available events.\n *\n * useEvents is fully typed to ensure correct event callback signatures.\n *\n * @example\n * ```tsx\n * useEvents(\n *   {\n *     \"react:transition:begin\": (ev) => {\n *       console.log(\"Transition began to:\", ev.to);\n *     },\n *     \"react:transition:error\": {\n *       priority: \"first\",\n *       callback: (ev) => {\n *         console.error(\"Transition error:\", ev.error);\n *       },\n *     },\n *   },\n *   [],\n * );\n * ```\n */\nexport const useEvents = (opts: UseEvents, deps: DependencyList) => {\n  const alepha = useAlepha();\n\n  useEffect(() => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const subs: Function[] = [];\n    for (const [name, hook] of Object.entries(opts)) {\n      subs.push(alepha.events.on(name as any, hook as any));\n    }\n\n    return () => {\n      for (const clear of subs) {\n        clear();\n      }\n    };\n  }, deps);\n};\n\ntype UseEvents = {\n  [T in keyof Hooks]?: Hook<T> | ((payload: Hooks[T]) => Async<void>);\n};\n","import type { State, Static, TAtomObject } from \"alepha\";\nimport { Atom } from \"alepha\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Hook to access and mutate the Alepha state.\n */\nfunction useStore<T extends TAtomObject>(\n  target: Atom<T>,\n  defaultValue?: Static<T>,\n): UseStoreReturn<Static<T>>;\nfunction useStore<Key extends keyof State>(\n  target: Key,\n  defaultValue?: State[Key],\n): UseStoreReturn<State[Key]>;\nfunction useStore(target: any, defaultValue?: any): any {\n  const alepha = useAlepha();\n\n  useMemo(() => {\n    if (defaultValue != null && alepha.store.get(target) == null) {\n      alepha.store.set(target, defaultValue);\n    }\n  }, [defaultValue]);\n\n  const [state, setState] = useState(alepha.store.get(target));\n\n  useEffect(() => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const key = target instanceof Atom ? target.key : target;\n\n    return alepha.events.on(\"state:mutate\", (ev) => {\n      if (ev.key === key) {\n        setState(ev.value);\n      }\n    });\n  }, []);\n\n  return [\n    state,\n    (value: any) => {\n      alepha.store.set(target, value);\n    },\n  ] as const;\n}\n\nexport type UseStoreReturn<T> = [T, (value: T) => void];\n\nexport { useStore };\n","import { $module } from \"alepha\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type * from \"./components/ClientOnly.tsx\";\nexport { default as ClientOnly } from \"./components/ClientOnly.tsx\";\nexport type * from \"./components/ErrorBoundary.tsx\";\nexport { default as ErrorBoundary } from \"./components/ErrorBoundary.tsx\";\nexport * from \"./contexts/AlephaContext.ts\";\nexport * from \"./contexts/AlephaProvider.tsx\";\nexport * from \"./hooks/useAction.ts\";\nexport * from \"./hooks/useAlepha.ts\";\nexport * from \"./hooks/useClient.ts\";\nexport * from \"./hooks/useEvents.ts\";\nexport * from \"./hooks/useInject.ts\";\nexport * from \"./hooks/useStore.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\ndeclare module \"alepha\" {\n  interface Hooks {\n    /**\n     * Fires when a user action is starting.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:begin\": {\n      type: string;\n      id?: string;\n    };\n    /**\n     * Fires when a user action has succeeded.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:success\": {\n      type: string;\n      id?: string;\n    };\n    /**\n     * Fires when a user action has failed.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:error\": {\n      type: string;\n      id?: string;\n      error: Error;\n    };\n    /**\n     * Fires when a user action has completed, regardless of success or failure.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:end\": {\n      type: string;\n      id?: string;\n    };\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Full-stack React framework with server-side rendering.\n *\n * **Features:**\n * - React page routes with type-safe params\n * - Async action handler with loading/error/cancel states\n * - Type-safe HTTP client access\n * - Dependency injection in components\n * - Global state management\n * - Router navigation methods\n * - Current route state access\n * - Check if path is active\n * - URL query parameters\n * - Access route schema\n * - Subscribe to Alepha events\n * - Type-safe form handling with validation\n * - Error handling wrapper component\n * - Client-side only rendering component\n * - Server-side rendering with hydration\n * - Automatic code splitting\n * - Event system for action tracking\n *\n * @module alepha.react\n */\nexport const AlephaReact = $module({\n  name: \"alepha.react.core\",\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/react/core/components/ClientOnly.tsx","../../../src/react/core/components/ErrorBoundary.tsx","../../../src/react/core/contexts/AlephaContext.ts","../../../src/react/core/contexts/AlephaProvider.tsx","../../../src/react/core/hooks/useAlepha.ts","../../../src/react/core/hooks/useInject.ts","../../../src/react/core/hooks/useAction.ts","../../../src/react/core/hooks/useClient.ts","../../../src/react/core/hooks/useEvents.ts","../../../src/react/core/hooks/useStore.ts","../../../src/react/core/index.ts"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface ClientOnlyProps {\n  fallback?: ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * A small utility component that renders its children only on the client side.\n *\n * Optionally, you can provide a fallback React node that will be rendered.\n *\n * You should use this component when\n * - you have code that relies on browser-specific APIs\n * - you want to avoid server-side rendering for a specific part of your application\n * - you want to prevent pre-rendering of a component\n *\n * @example\n * ```tsx\n * import { ClientOnly } from \"alepha/react\";\n *\n * const MyComponent = () => {\n *   // Avoids SSR issues with Date API\n *   return (\n *     <ClientOnly>\n *       {new Date().toLocaleTimeString()}\n *     </ClientOnly>\n *   );\n * }\n * ```\n */\nconst ClientOnly = (props: PropsWithChildren<ClientOnlyProps>) => {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => setMounted(true), []);\n\n  if (props.disabled) {\n    return props.children;\n  }\n\n  return mounted ? props.children : props.fallback;\n};\n\nexport default ClientOnly;\n","import React, {\n  type ErrorInfo,\n  type PropsWithChildren,\n  type ReactNode,\n} from \"react\";\n\n/**\n * Props for the ErrorBoundary component.\n */\nexport interface ErrorBoundaryProps {\n  /**\n   * Fallback React node to render when an error is caught.\n   * If not provided, a default error message will be shown.\n   */\n  fallback: (error: Error, reset: () => void) => ReactNode;\n\n  /**\n   * Optional callback that receives the error and error info.\n   * Use this to log errors to a monitoring service.\n   */\n  onError?: (error: Error, info: ErrorInfo) => void;\n}\n\n/**\n * State of the ErrorBoundary component.\n */\ninterface ErrorBoundaryState {\n  error?: Error;\n}\n\n/**\n * A reusable error boundary for catching rendering errors in any part of the React component tree.\n *\n * It's already included in the Alepha React framework when using page or layout components.\n */\nexport class ErrorBoundary extends React.Component<\n  PropsWithChildren<ErrorBoundaryProps>,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {};\n  }\n\n  /**\n   * Update state so the next render shows the fallback UI.\n   */\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return {\n      error,\n    };\n  }\n\n  /**\n   * Lifecycle method called when an error is caught.\n   * You can log the error or perform side effects here.\n   */\n  componentDidCatch(error: Error, info: ErrorInfo): void {\n    if (this.props.onError) {\n      this.props.onError(error, info);\n    }\n  }\n\n  render(): ReactNode {\n    if (this.state.error) {\n      const reset = () => {\n        this.setState({ error: undefined });\n      };\n      return this.props.fallback(this.state.error, reset);\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n","import type { Alepha } from \"alepha\";\nimport { createContext } from \"react\";\n\n/**\n * React context to provide the Alepha instance throughout the component tree.\n */\nexport const AlephaContext = createContext<Alepha | undefined>(undefined);\n","import { Alepha } from \"alepha\";\nimport { type ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { AlephaContext } from \"./AlephaContext.ts\";\n\nexport interface AlephaProviderProps {\n  children: ReactNode;\n  onError: (error: Error) => ReactNode;\n  onLoading: () => ReactNode;\n}\n\n/**\n * AlephaProvider component to initialize and provide Alepha instance to the app.\n *\n * This isn't recommended for apps using `alepha/react/router`, as Router will handle this for you.\n */\nexport const AlephaProvider = (props: AlephaProviderProps) => {\n  const alepha = useMemo(() => Alepha.create(), []);\n\n  const [started, setStarted] = useState(false);\n  const [error, setError] = useState<Error | undefined>();\n\n  useEffect(() => {\n    alepha\n      .start()\n      .then(() => setStarted(true))\n      .catch((err) => setError(err));\n  }, [alepha]);\n\n  if (error) {\n    return props.onError(error);\n  }\n\n  if (!started) {\n    return props.onLoading();\n  }\n\n  return (\n    <AlephaContext.Provider value={alepha}>\n      {props.children}\n    </AlephaContext.Provider>\n  );\n};\n","import { type Alepha, AlephaError } from \"alepha\";\nimport { useContext } from \"react\";\nimport { AlephaContext } from \"../contexts/AlephaContext.ts\";\n\n/**\n * Main Alepha hook.\n *\n * It provides access to the Alepha instance within a React component.\n *\n * With Alepha, you can access the core functionalities of the framework:\n *\n * - alepha.state() for state management\n * - alepha.inject() for dependency injection\n * - alepha.events.emit() for event handling\n * etc...\n */\nexport const useAlepha = (): Alepha => {\n  const alepha = useContext(AlephaContext);\n  if (!alepha) {\n    throw new AlephaError(\n      \"Hook 'useAlepha()' must be used within an AlephaContext.Provider\",\n    );\n  }\n\n  return alepha;\n};\n","import type { Service } from \"alepha\";\nimport { useMemo } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Hook to inject a service instance.\n * It's a wrapper of `useAlepha().inject(service)` with a memoization.\n */\nexport const useInject = <T extends object>(service: Service<T>): T => {\n  const alepha = useAlepha();\n  return useMemo(() => alepha.inject(service), []);\n};\n","import type { Async } from \"alepha\";\nimport {\n  DateTimeProvider,\n  type DurationLike,\n  type Interval,\n  type Timeout,\n} from \"alepha/datetime\";\nimport {\n  type DependencyList,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\nimport { useInject } from \"./useInject.ts\";\n\n/**\n * Hook for handling async actions with automatic error handling and event emission.\n *\n * By default, prevents concurrent executions - if an action is running and you call it again,\n * the second call will be ignored. Use `debounce` option to delay execution instead.\n *\n * Emits lifecycle events:\n * - `react:action:begin` - When action starts\n * - `react:action:success` - When action completes successfully\n * - `react:action:error` - When action throws an error\n * - `react:action:end` - Always emitted at the end\n *\n * @example Basic usage\n * ```tsx\n * const action = useAction({\n *   handler: async (data) => {\n *     await api.save(data);\n *   }\n * }, []);\n *\n * <button onClick={() => action.run(data)} disabled={action.loading}>\n *   Save\n * </button>\n * ```\n *\n * @example With debounce (search input)\n * ```tsx\n * const search = useAction({\n *   handler: async (query: string) => {\n *     await api.search(query);\n *   },\n *   debounce: 300 // Wait 300ms after last call\n * }, []);\n *\n * <input onChange={(e) => search.run(e.target.value)} />\n * ```\n *\n * @example Run on component mount\n * ```tsx\n * const fetchData = useAction({\n *   handler: async () => {\n *     const data = await api.getData();\n *     return data;\n *   },\n *   runOnInit: true // Runs once when component mounts\n * }, []);\n * ```\n *\n * @example Run periodically (polling)\n * ```tsx\n * const pollStatus = useAction({\n *   handler: async () => {\n *     const status = await api.getStatus();\n *     return status;\n *   },\n *   runEvery: 5000 // Run every 5 seconds\n * }, []);\n *\n * // Or with duration tuple\n * const pollStatus = useAction({\n *   handler: async () => {\n *     const status = await api.getStatus();\n *     return status;\n *   },\n *   runEvery: [30, 'seconds'] // Run every 30 seconds\n * }, []);\n * ```\n *\n * @example With AbortController\n * ```tsx\n * const fetch = useAction({\n *   handler: async (url, { signal }) => {\n *     const response = await fetch(url, { signal });\n *     return response.json();\n *   }\n * }, []);\n * // Automatically cancelled on unmount or when new request starts\n * ```\n *\n * @example With error handling\n * ```tsx\n * const deleteAction = useAction({\n *   handler: async (id: string) => {\n *     await api.delete(id);\n *   },\n *   onError: (error) => {\n *     if (error.code === 'NOT_FOUND') {\n *       // Custom error handling\n *     }\n *   }\n * }, []);\n *\n * {deleteAction.error && <div>Error: {deleteAction.error.message}</div>}\n * ```\n *\n * @example Global error handling\n * ```tsx\n * // In your root app setup\n * alepha.events.on(\"react:action:error\", ({ error }) => {\n *   toast.danger(error.message);\n *   Sentry.captureException(error);\n * });\n * ```\n */\nexport function useAction<Args extends any[], Result = void>(\n  options: UseActionOptions<Args, Result>,\n  deps: DependencyList,\n): UseActionReturn<Args, Result> {\n  const alepha = useAlepha();\n  const dateTimeProvider = useInject(DateTimeProvider);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | undefined>();\n  const [result, setResult] = useState<Result | undefined>();\n  const isExecutingRef = useRef(false);\n  const debounceTimerRef = useRef<Timeout | undefined>(undefined);\n  const abortControllerRef = useRef<AbortController | undefined>(undefined);\n  const isMountedRef = useRef(true);\n  const intervalRef = useRef<Interval | undefined>(undefined);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      isMountedRef.current = false;\n\n      // clear debounce timer\n      if (debounceTimerRef.current) {\n        dateTimeProvider.clearTimeout(debounceTimerRef.current);\n        debounceTimerRef.current = undefined;\n      }\n\n      // clear interval\n      if (intervalRef.current) {\n        dateTimeProvider.clearInterval(intervalRef.current);\n        intervalRef.current = undefined;\n      }\n\n      // abort in-flight request\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n        abortControllerRef.current = undefined;\n      }\n    };\n  }, []);\n\n  const executeAction = useCallback(\n    async (...args: Args): Promise<Result | undefined> => {\n      // Prevent concurrent executions\n      if (isExecutingRef.current) {\n        return;\n      }\n\n      // Abort previous request if still running\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      // Create new AbortController for this request\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      isExecutingRef.current = true;\n      setLoading(true);\n      setError(undefined);\n\n      await alepha.events.emit(\"react:action:begin\", {\n        type: \"custom\",\n        id: options.id,\n      });\n\n      try {\n        // Pass abort signal as last argument to handler\n        const result = await options.handler(...args, {\n          signal: abortController.signal,\n        } as any);\n\n        // TODO: it should be after onSuccess?\n        setResult(result as Result);\n\n        // Only update state if still mounted and not aborted\n        if (!isMountedRef.current || abortController.signal.aborted) {\n          return;\n        }\n\n        await alepha.events.emit(\"react:action:success\", {\n          type: \"custom\",\n          id: options.id,\n        });\n\n        if (options.onSuccess) {\n          await options.onSuccess(result);\n        }\n\n        return result;\n      } catch (err) {\n        // Ignore abort errors\n        if (err instanceof Error && err.name === \"AbortError\") {\n          return;\n        }\n\n        // Only update state if still mounted\n        if (!isMountedRef.current) {\n          return;\n        }\n\n        const error = err as Error;\n        setError(error);\n\n        await alepha.events.emit(\"react:action:error\", {\n          type: \"custom\",\n          id: options.id,\n          error,\n        });\n\n        if (options.onError) {\n          await options.onError(error);\n        } else {\n          // Re-throw if no custom error handler\n          throw error;\n        }\n      } finally {\n        isExecutingRef.current = false;\n        setLoading(false);\n\n        await alepha.events.emit(\"react:action:end\", {\n          type: \"custom\",\n          id: options.id,\n        });\n\n        // Clean up abort controller\n        if (abortControllerRef.current === abortController) {\n          abortControllerRef.current = undefined;\n        }\n      }\n    },\n    [...deps, options.id, options.onError, options.onSuccess],\n  );\n\n  const handler = useCallback(\n    async (...args: Args): Promise<Result | undefined> => {\n      if (options.debounce) {\n        // clear existing timer\n        if (debounceTimerRef.current) {\n          dateTimeProvider.clearTimeout(debounceTimerRef.current);\n        }\n\n        // Set new timer\n        return new Promise((resolve) => {\n          debounceTimerRef.current = dateTimeProvider.createTimeout(\n            async () => {\n              const result = await executeAction(...args);\n              resolve(result);\n            },\n            options.debounce ?? 0,\n          );\n        });\n      }\n\n      return executeAction(...args);\n    },\n    [executeAction, options.debounce],\n  );\n\n  const cancel = useCallback(() => {\n    // clear debounce timer\n    if (debounceTimerRef.current) {\n      dateTimeProvider.clearTimeout(debounceTimerRef.current);\n      debounceTimerRef.current = undefined;\n    }\n\n    // abort in-flight request\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = undefined;\n    }\n\n    // reset state\n    if (isMountedRef.current) {\n      isExecutingRef.current = false;\n      setLoading(false);\n    }\n  }, []);\n\n  // Run action on mount if runOnInit is true\n  useEffect(() => {\n    if (options.runOnInit) {\n      handler(...([] as any));\n    }\n  }, deps);\n\n  // Run action periodically if runEvery is specified\n  useEffect(() => {\n    if (!options.runEvery) {\n      return;\n    }\n\n    // Set up interval\n    intervalRef.current = dateTimeProvider.createInterval(\n      () => handler(...([] as any)),\n      options.runEvery,\n      true,\n    );\n\n    // cleanup on unmount or when runEvery changes\n    return () => {\n      if (intervalRef.current) {\n        dateTimeProvider.clearInterval(intervalRef.current);\n        intervalRef.current = undefined;\n      }\n    };\n  }, [handler, options.runEvery]);\n\n  return {\n    run: handler,\n    loading,\n    error,\n    cancel,\n    result,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Context object passed as the last argument to action handlers.\n * Contains an AbortSignal that can be used to cancel the request.\n */\nexport interface ActionContext {\n  /**\n   * AbortSignal that can be passed to fetch or other async operations.\n   * The signal will be aborted when:\n   * - The component unmounts\n   * - A new action is triggered (cancels previous)\n   * - The cancel() method is called\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({\n   *   handler: async (url, { signal }) => {\n   *     const response = await fetch(url, { signal });\n   *     return response.json();\n   *   }\n   * }, []);\n   * ```\n   */\n  signal: AbortSignal;\n}\n\nexport interface UseActionOptions<Args extends any[] = any[], Result = any> {\n  /**\n   * The async action handler function.\n   * Receives the action arguments plus an ActionContext as the last parameter.\n   */\n  handler: (...args: [...Args, ActionContext]) => Async<Result>;\n\n  /**\n   * Custom error handler. If provided, prevents default error re-throw.\n   */\n  onError?: (error: Error) => void | Promise<void>;\n\n  /**\n   * Custom success handler.\n   */\n  onSuccess?: (result: Result) => void | Promise<void>;\n\n  /**\n   * Optional identifier for this action (useful for debugging/analytics)\n   */\n  id?: string;\n\n  name?: string;\n\n  /**\n   * Debounce delay in milliseconds. If specified, the action will only execute\n   * after the specified delay has passed since the last call. Useful for search inputs\n   * or other high-frequency events.\n   *\n   * @example\n   * ```tsx\n   * // Execute search 300ms after user stops typing\n   * const search = useAction({ handler: search, debounce: 300 }, [])\n   * ```\n   */\n  debounce?: number;\n\n  /**\n   * If true, the action will be executed once when the component mounts.\n   *\n   * @example\n   * ```tsx\n   * const fetchData = useAction({\n   *   handler: async () => await api.getData(),\n   *   runOnInit: true\n   * }, []);\n   * ```\n   */\n  runOnInit?: boolean;\n\n  /**\n   * If specified, the action will be executed periodically at the given interval.\n   * The interval is specified as a DurationLike value (number in ms, Duration object, or [number, unit] tuple).\n   *\n   * @example\n   * ```tsx\n   * // Run every 5 seconds\n   * const poll = useAction({\n   *   handler: async () => await api.poll(),\n   *   runEvery: 5000\n   * }, []);\n   * ```\n   *\n   * @example\n   * ```tsx\n   * // Run every 1 minute\n   * const poll = useAction({\n   *   handler: async () => await api.poll(),\n   *   runEvery: [1, 'minute']\n   * }, []);\n   * ```\n   */\n  runEvery?: DurationLike;\n}\n\nexport interface UseActionReturn<Args extends any[], Result> {\n  /**\n   * Execute the action with the provided arguments.\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({ handler: async (data) => { ... } }, []);\n   * action.run(data);\n   * ```\n   */\n  run: (...args: Args) => Promise<Result | undefined>;\n\n  /**\n   * Loading state - true when action is executing.\n   */\n  loading: boolean;\n\n  /**\n   * Error state - contains error if action failed, undefined otherwise.\n   */\n  error?: Error;\n\n  /**\n   * Cancel any pending debounced action or abort the current in-flight request.\n   *\n   * @example\n   * ```tsx\n   * const action = useAction({ ... }, []);\n   *\n   * <button onClick={action.cancel} disabled={!action.loading}>\n   *   Cancel\n   * </button>\n   * ```\n   */\n  cancel: () => void;\n\n  /**\n   * The result data from the last successful action execution.\n   */\n  result?: Result;\n}\n","import {\n  type ClientScope,\n  type HttpVirtualClient,\n  LinkProvider,\n} from \"alepha/server/links\";\nimport { useMemo } from \"react\";\nimport { useInject } from \"./useInject.ts\";\n\n/**\n * Hook to get a virtual client for the specified scope.\n *\n * It's the React-hook version of `$client()`, from `AlephaServerLinks` module.\n */\nexport const useClient = <T extends object>(\n  scope?: ClientScope,\n): HttpVirtualClient<T> => {\n  const linkProvider = useInject(LinkProvider);\n\n  return useMemo(() => {\n    return linkProvider.client<T>(scope);\n  }, [scope]);\n};\n","import type { Async, Hook, Hooks } from \"alepha\";\nimport { type DependencyList, useEffect } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Allow subscribing to multiple Alepha events. See {@link Hooks} for available events.\n *\n * useEvents is fully typed to ensure correct event callback signatures.\n *\n * @example\n * ```tsx\n * useEvents(\n *   {\n *     \"react:transition:begin\": (ev) => {\n *       console.log(\"Transition began to:\", ev.to);\n *     },\n *     \"react:transition:error\": {\n *       priority: \"first\",\n *       callback: (ev) => {\n *         console.error(\"Transition error:\", ev.error);\n *       },\n *     },\n *   },\n *   [],\n * );\n * ```\n */\nexport const useEvents = (opts: UseEvents, deps: DependencyList) => {\n  const alepha = useAlepha();\n\n  useEffect(() => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const subs: Function[] = [];\n    for (const [name, hook] of Object.entries(opts)) {\n      subs.push(alepha.events.on(name as any, hook as any));\n    }\n\n    return () => {\n      for (const clear of subs) {\n        clear();\n      }\n    };\n  }, deps);\n};\n\ntype UseEvents = {\n  [T in keyof Hooks]?: Hook<T> | ((payload: Hooks[T]) => Async<void>);\n};\n","import type { State, Static, TAtomObject } from \"alepha\";\nimport { Atom } from \"alepha\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useAlepha } from \"./useAlepha.ts\";\n\n/**\n * Hook to access and mutate the Alepha state.\n */\nfunction useStore<T extends TAtomObject>(\n  target: Atom<T>,\n  defaultValue?: Static<T>,\n): UseStoreReturn<Static<T>>;\nfunction useStore<Key extends keyof State>(\n  target: Key,\n  defaultValue?: State[Key],\n): UseStoreReturn<State[Key]>;\nfunction useStore(target: any, defaultValue?: any): any {\n  const alepha = useAlepha();\n\n  useMemo(() => {\n    if (defaultValue != null && alepha.store.get(target) == null) {\n      alepha.store.set(target, defaultValue);\n    }\n  }, [defaultValue]);\n\n  const [state, setState] = useState(alepha.store.get(target));\n\n  useEffect(() => {\n    if (!alepha.isBrowser()) {\n      return;\n    }\n\n    const key = target instanceof Atom ? target.key : target;\n\n    return alepha.events.on(\"state:mutate\", (ev) => {\n      if (ev.key === key) {\n        setState(ev.value);\n      }\n    });\n  }, []);\n\n  return [\n    state,\n    (value: any) => {\n      alepha.store.set(target, value);\n    },\n  ] as const;\n}\n\nexport type UseStoreReturn<T> = [T, (value: T) => void];\n\nexport { useStore };\n","import { $module } from \"alepha\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport type * from \"./components/ClientOnly.tsx\";\nexport { default as ClientOnly } from \"./components/ClientOnly.tsx\";\nexport type * from \"./components/ErrorBoundary.tsx\";\nexport { default as ErrorBoundary } from \"./components/ErrorBoundary.tsx\";\nexport * from \"./contexts/AlephaContext.ts\";\nexport * from \"./contexts/AlephaProvider.tsx\";\nexport * from \"./hooks/useAction.ts\";\nexport * from \"./hooks/useAlepha.ts\";\nexport * from \"./hooks/useClient.ts\";\nexport * from \"./hooks/useEvents.ts\";\nexport * from \"./hooks/useInject.ts\";\nexport * from \"./hooks/useStore.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\ndeclare module \"alepha\" {\n  interface Hooks {\n    /**\n     * Fires when a user action is starting.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:begin\": {\n      type: string;\n      id?: string;\n    };\n    /**\n     * Fires when a user action has succeeded.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:success\": {\n      type: string;\n      id?: string;\n    };\n    /**\n     * Fires when a user action has failed.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:error\": {\n      type: string;\n      id?: string;\n      error: Error;\n    };\n    /**\n     * Fires when a user action has completed, regardless of success or failure.\n     * Action can be a form submission, a route transition, or a custom action.\n     */\n    \"react:action:end\": {\n      type: string;\n      id?: string;\n    };\n  }\n}\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Full-stack React framework with server-side rendering.\n *\n * **Features:**\n * - React page routes with type-safe params\n * - Async action handler with loading/error/cancel states\n * - Type-safe HTTP client access\n * - Dependency injection in components\n * - Global state management\n * - Router navigation methods\n * - Current route state access\n * - Check if path is active\n * - URL query parameters\n * - Access route schema\n * - Subscribe to Alepha events\n * - Type-safe form handling with validation\n * - Error handling wrapper component\n * - Client-side only rendering component\n * - Server-side rendering with hydration\n * - Automatic code splitting\n * - Event system for action tracking\n *\n * @module alepha.react\n */\nexport const AlephaReact = $module({\n  name: \"alepha.react.core\",\n});\n"],"mappings":"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"}

package/dist/react/form/index.d.ts

@@ -18,6 +18,7 @@ declare class FormModel<T extends TObject> {
   protected readonly log: alepha_logger0.Logger;
   protected readonly alepha: Alepha;
   protected readonly values: Record<string, any>;
+  protected readonly initialValues: Record<string, any>;
   protected submitInProgress: boolean;
   input: SchemaToInput<T>;
   get submitting(): boolean;
@@ -27,15 +28,15 @@ declare class FormModel<T extends TObject> {
    * Recursively handles nested objects.
    */
   protected extractSchemaDefaults(schema: TObject, prefix?: string): Record<string, any>;
-  get element(): HTMLFormElement;
   get currentValues(): Record<string, any>;
   get props(): {
     id: string;
     noValidate: boolean;
     onSubmit: (ev?: FormEventLike) => void;
-    onReset: (event: FormEventLike) => Promise<void>;
+    onReset: (event: FormEventLike) => void;
   };
-  readonly reset: (event: FormEventLike) => Promise<void>;
+  readonly setInitialValues: (values: Record<string, any>) => void;
+  readonly reset: (event?: FormEventLike) => void;
   readonly submit: () => Promise<void>;
   /**
    * Restructures flat keys like "address.city" into nested objects like { address: { city: ... } }
@@ -60,7 +61,6 @@ declare class FormModel<T extends TObject> {
    * Handles raw DOM values (strings, booleans from checkboxes, Files, etc.)
    */
   protected getValueFromInput(input: any, schema: TSchema): any;
-  protected valueToInputEntry(value: any): string | number | boolean;
 }
 type SchemaToInput<T extends TObject> = { [K in keyof T["properties"]]: InputField<T["properties"][K]> };
 interface FormEventLike {
@@ -71,6 +71,7 @@ type InputField<T extends TSchema> = T extends TObject ? ObjectInputField<T> : T
 interface BaseInputField {
   path: string;
   required: boolean;
+  initialValue: any;
   props: InputHTMLAttributesLike;
   schema: TSchema;
   set: (value: any) => void;
@@ -83,10 +84,8 @@ interface ObjectInputField<T extends TObject> extends BaseInputField {
 interface ArrayInputField<T extends TSchema> extends BaseInputField {
   items: Array<InputField<T>>;
 }
-type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name" | "type" | "value" | "defaultValue" | "required" | "maxLength" | "minLength" | "aria-label" | "autoComplete"> & {
+type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name" | "type" | "value" | "required" | "maxLength" | "minLength" | "aria-label"> & {
   value?: any;
-  defaultValue?: any;
-  onChange?: (event: any) => void;
 };
 type FormCtrlOptions<T extends TObject> = {
   /**
@@ -98,9 +97,7 @@ type FormCtrlOptions<T extends TObject> = {
    * Callback function to handle form submission.
    * This function will receive the parsed and validated form values.
    */
-  handler: (values: Static<T>, args: {
-    form: HTMLFormElement;
-  }) => unknown;
+  handler: (values: Static<T>) => unknown;
   /**
    * Optional initial values for the form fields.
    * This can be used to pre-populate the form with existing data.
@@ -119,9 +116,7 @@ type FormCtrlOptions<T extends TObject> = {
    * If omitted, IDs will not be generated.
    */
   id?: string;
-  onError?: (error: Error, args: {
-    form: HTMLFormElement;
-  }) => void;
+  onError?: (error: Error) => void;
   onChange?: (key: string, value: any, store: Record<string, any>) => void;
   onReset?: () => void;
 };
@@ -144,6 +139,15 @@ declare class FormValidationError extends TypeBoxError {
   });
 }
 //#endregion
+//#region ../../src/react/form/hooks/useFieldValue.d.ts
+/**
+ * Hook to subscribe to a single form field's value.
+ * Only re-renders when this specific field changes.
+ *
+ * @returns A tuple of [value, setValue] similar to useState.
+ */
+declare const useFieldValue: (input: BaseInputField) => [any, (value: any) => void];
+//#endregion
 //#region ../../src/react/form/hooks/useForm.d.ts
 /**
  * Custom hook to create a form with validation and field management.
@@ -187,6 +191,13 @@ declare const useFormState: <T extends TObject, Keys extends keyof UseFormStateR
   path: string;
 }, _events?: Keys[]) => Pick<UseFormStateReturn, Keys>;
 //#endregion
+//#region ../../src/react/form/hooks/useFormValues.d.ts
+/**
+ * Hook to subscribe to all form values.
+ * Re-renders on every field change — use only when needed (debug panels, live previews).
+ */
+declare const useFormValues: <T extends TObject>(form: FormModel<T>) => Record<string, any>;
+//#endregion
 //#region ../../src/react/form/index.d.ts
 declare module "alepha" {
   interface Hooks {
@@ -195,10 +206,6 @@ declare module "alepha" {
       path: string;
       value: any;
     };
-    "form:reset": {
-      id: string;
-      values: Record<string, any>;
-    };
     "form:submit:begin": {
       id: string;
     };
@@ -213,6 +220,9 @@ declare module "alepha" {
     "form:submit:end": {
       id: string;
     };
+    "form:reset": {
+      id: string;
+    };
   }
 }
 /**
@@ -229,5 +239,5 @@ declare module "alepha" {
  */
 declare const AlephaReactForm: alepha.Service<alepha.Module>;
 //#endregion
-export { AlephaReactForm, ArrayInputField, BaseInputField, FormCtrlOptions, FormEventLike, FormModel, FormState, FormValidationError, InputField, InputHTMLAttributesLike, ObjectInputField, SchemaToInput, UseFormStateReturn, useForm, useFormState };
+export { AlephaReactForm, ArrayInputField, BaseInputField, FormCtrlOptions, FormEventLike, FormModel, FormState, FormValidationError, InputField, InputHTMLAttributesLike, ObjectInputField, SchemaToInput, UseFormStateReturn, useFieldValue, useForm, useFormState, useFormValues };
 //# sourceMappingURL=index.d.ts.map

package/dist/react/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/react/form/services/FormModel.ts","../../../src/react/form/components/FormState.tsx","../../../src/react/form/errors/FormValidationError.ts","../../../src/react/form/hooks/useForm.ts","../../../src/react/form/hooks/useFormState.ts","../../../src/react/form/index.ts"],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/react/form/services/FormModel.ts","../../../src/react/form/components/FormState.tsx","../../../src/react/form/errors/FormValidationError.ts","../../../src/react/form/hooks/useFieldValue.ts","../../../src/react/form/hooks/useForm.ts","../../../src/react/form/hooks/useFormState.ts","../../../src/react/form/hooks/useFormValues.ts","../../../src/react/form/index.ts"],"mappings":"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"}

package/dist/react/form/index.js

@@ -1,6 +1,6 @@
 import { $inject, $module, Alepha, TypeBoxError, t } from "alepha";
 import { useAlepha } from "alepha/react";
-import { useEffect, useId, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { $logger } from "alepha/logger";
 
 //#region ../../src/react/form/hooks/useFormState.ts
@@ -32,9 +32,6 @@ const useFormState = (target, _events = [
 				if (hasValues) setValues(form.currentValues);
 			}
 		}));
-		if (hasValues) listeners.push(alepha.events.on("form:reset", (event) => {
-			if (event.id === form.id) setValues(event.values);
-		}));
 		if (hasLoading) listeners.push(alepha.events.on("form:submit:begin", (event) => {
 			if (event.id === form.id) setLoading(true);
 		}), alepha.events.on("form:submit:end", (event) => {
@@ -46,6 +43,9 @@ const useFormState = (target, _events = [
 				if (hasDirty) setDirty(false);
 			}
 		}));
+		if (hasDirty) listeners.push(alepha.events.on("form:reset", (event) => {
+			if (event.id === form.id) setDirty(false);
+		}));
 		if (hasErrors) listeners.push(alepha.events.on("form:submit:error", (event) => {
 			if (event.id === form.id) {
 				if (!path || event.error instanceof TypeBoxError && event.error.value.path === path) setError(event.error);
@@ -88,6 +88,29 @@ var FormValidationError = class extends TypeBoxError {
 	}
 };
 
+//#endregion
+//#region ../../src/react/form/hooks/useFieldValue.ts
+/**
+* Hook to subscribe to a single form field's value.
+* Only re-renders when this specific field changes.
+*
+* @returns A tuple of [value, setValue] similar to useState.
+*/
+const useFieldValue = (input) => {
+	const alepha = useAlepha();
+	const [value, setValue] = useState(input?.initialValue);
+	useEffect(() => {
+		if (!input?.form || !alepha.isBrowser()) return;
+		return alepha.events.on("form:change", (ev) => {
+			if (ev.id === input.form.id && ev.path === input.path) setValue(ev.value);
+		});
+	}, []);
+	const setFieldValue = (newValue) => {
+		input.set(newValue);
+	};
+	return [value, setFieldValue];
+};
+
 //#endregion
 //#region ../../src/react/form/services/FormModel.ts
 /**
@@ -102,6 +125,7 @@ var FormModel = class {
 	log = $logger();
 	alepha = $inject(Alepha);
 	values = {};
+	initialValues = {};
 	submitInProgress = false;
 	input;
 	get submitting() {
@@ -117,6 +141,7 @@ var FormModel = class {
 			const decoded = this.alepha.codec.decode(options.schema, options.initialValues);
 			Object.assign(this.values, decoded);
 		}
+		this.initialValues = { ...this.values };
 		this.input = this.createProxyFromSchema(options, options.schema, {
 			store: this.values,
 			parent: ""
@@ -139,9 +164,6 @@ var FormModel = class {
 		}
 		return defaults;
 	}
-	get element() {
-		return window.document.getElementById(this.id);
-	}
 	get currentValues() {
 		return this.restructureValues(this.values);
 	}
@@ -156,13 +178,35 @@ var FormModel = class {
 			onReset: (event) => this.reset(event)
 		};
 	}
+	setInitialValues = (values) => {
+		const decoded = this.alepha.codec.decode(this.options.schema, values);
+		for (const key in this.initialValues) delete this.initialValues[key];
+		Object.assign(this.initialValues, decoded);
+		for (const key in this.values) delete this.values[key];
+		Object.assign(this.values, { ...this.initialValues });
+		for (const [key, value] of Object.entries(this.values)) {
+			const path = `/${key.replaceAll(".", "/")}`;
+			this.alepha.events.emit("form:change", {
+				id: this.id,
+				path,
+				value
+			}, { catch: true });
+		}
+	};
 	reset = (event) => {
+		event?.preventDefault?.();
 		for (const key in this.values) delete this.values[key];
+		Object.assign(this.values, { ...this.initialValues });
+		for (const [key, value] of Object.entries(this.values)) {
+			const path = `/${key.replaceAll(".", "/")}`;
+			this.alepha.events.emit("form:change", {
+				id: this.id,
+				path,
+				value
+			}, { catch: true });
+		}
+		this.alepha.events.emit("form:reset", { id: this.id }, { catch: true });
 		this.options.onReset?.();
-		return this.alepha.events.emit("form:reset", {
-			id: this.id,
-			values: this.values
-		}, { catch: true });
 	};
 	submit = async () => {
 		if (this.submitInProgress) {
@@ -176,11 +220,10 @@ var FormModel = class {
 		await this.alepha.events.emit("form:submit:begin", { id: this.id });
 		this.submitInProgress = true;
 		const options = this.options;
-		const args = { form: this.element };
 		try {
 			let values = this.restructureValues(this.values);
 			if (t.schema.isSchema(options.schema)) values = this.alepha.codec.decode(options.schema, values);
-			await options.handler(values, args);
+			await options.handler(values);
 			await this.alepha.events.emit("react:action:success", {
 				type: "form",
 				id: this.id
@@ -191,7 +234,7 @@ var FormModel = class {
 			});
 		} catch (error) {
 			this.log.error("Form submission error:", error);
-			options.onError?.(error, args);
+			options.onError?.(error);
 			await this.alepha.events.emit("react:action:error", {
 				type: "form",
 				id: this.id,
@@ -248,6 +291,7 @@ var FormModel = class {
 		if (!field) return {
 			path: "",
 			required,
+			initialValue: void 0,
 			props: {},
 			schema,
 			set: () => {},
@@ -256,9 +300,8 @@ var FormModel = class {
 		const isRequired = schema.required?.includes(name) ?? false;
 		const key = parent ? `${parent}.${name}` : name;
 		const path = `/${key.replaceAll(".", "/")}`;
-		const set = (value, sync = true) => {
+		const set = (value) => {
 			const typedValue = this.getValueFromInput(value, field);
-			if (context.store[key] === typedValue) {}
 			context.store[key] = typedValue;
 			if (options.onChange) options.onChange(key, typedValue, context.store);
 			this.alepha.events.emit("form:change", {
@@ -266,34 +309,8 @@ var FormModel = class {
 				path,
 				value: typedValue
 			}, { catch: true });
-			if (sync) {
-				const inputElement = window.document.querySelector(`[data-path="${path}"]`);
-				if (inputElement instanceof HTMLInputElement) if (t.schema.isBoolean(field)) {
-					inputElement.value = value;
-					inputElement.checked = Boolean(value);
-				} else inputElement.value = value;
-			}
 		};
-		const attr = {
-			name: key,
-			autoComplete: "off",
-			onChange: (event) => {
-				if (typeof event === "string") {
-					set(event, false);
-					return;
-				}
-				if (typeof event === "number") {
-					set(event, false);
-					return;
-				}
-				if (t.schema.isBoolean(field)) if (event.target.value === "true") set(true, false);
-				else if (event.target.value === "false") set(false, false);
-				else if (event.target.value === "") set(void 0, false);
-				else set(event.target.checked, false);
-				else set(event.target.value, false);
-			}
-		};
-		attr["data-path"] = path;
+		const attr = { name: key };
 		if (options.id) {
 			attr.id = `${options.id}-${key}`;
 			attr["data-testid"] = attr.id;
@@ -302,8 +319,6 @@ var FormModel = class {
 			if (field.maxLength != null) attr.maxLength = Number(field.maxLength);
 			if (field.minLength != null) attr.minLength = Number(field.minLength);
 		}
-		if (options.initialValues?.[name] != null) attr.defaultValue = this.valueToInputEntry(options.initialValues[name]);
-		else if ("default" in field && field.default != null) attr.defaultValue = this.valueToInputEntry(field.default);
 		if (isRequired) attr.required = true;
 		if ("description" in field && typeof field.description === "string") attr["aria-label"] = field.description;
 		if (t.schema.isInteger(field) || t.schema.isNumber(field)) attr.type = "number";
@@ -327,6 +342,7 @@ var FormModel = class {
 			set,
 			form: this,
 			required,
+			initialValue: context.store[key],
 			items: this.createProxyFromSchema(options, field, {
 				parent: key,
 				store: context.store
@@ -339,6 +355,7 @@ var FormModel = class {
 			set,
 			form: this,
 			required,
+			initialValue: context.store[key],
 			items: []
 		};
 		return {
@@ -347,7 +364,8 @@ var FormModel = class {
 			schema: field,
 			set,
 			form: this,
-			required
+			required,
+			initialValue: context.store[key]
 		};
 	}
 	/**
@@ -377,14 +395,6 @@ var FormModel = class {
 		}
 		return input;
 	}
-	valueToInputEntry(value) {
-		if (value === null || value === void 0) return "";
-		if (typeof value === "boolean") return value;
-		if (typeof value === "number") return value;
-		if (typeof value === "string") return value;
-		if (value instanceof Date) return value.toISOString().slice(0, 16);
-		return value;
-	}
 };
 
 //#endregion
@@ -420,12 +430,38 @@ var FormModel = class {
 const useForm = (options, deps = []) => {
 	const alepha = useAlepha();
 	const formId = useId();
-	return useMemo(() => {
+	const initialValuesRef = useRef(options.initialValues);
+	const form = useMemo(() => {
 		return alepha.inject(FormModel, {
 			lifetime: "transient",
 			args: [options.id || formId, options]
 		});
 	}, deps);
+	useEffect(() => {
+		if (initialValuesRef.current !== options.initialValues) {
+			initialValuesRef.current = options.initialValues;
+			if (options.initialValues) form.setInitialValues(options.initialValues);
+		}
+	}, [options.initialValues]);
+	return form;
+};
+
+//#endregion
+//#region ../../src/react/form/hooks/useFormValues.ts
+/**
+* Hook to subscribe to all form values.
+* Re-renders on every field change — use only when needed (debug panels, live previews).
+*/
+const useFormValues = (form) => {
+	const alepha = useAlepha();
+	const [values, setValues] = useState(form.currentValues);
+	useEffect(() => {
+		if (!alepha.isBrowser()) return;
+		return alepha.events.on("form:change", (ev) => {
+			if (ev.id === form.id) setValues(form.currentValues);
+		});
+	}, []);
+	return values;
 };
 
 //#endregion
@@ -445,5 +481,5 @@ const useForm = (options, deps = []) => {
 const AlephaReactForm = $module({ name: "alepha.react.form" });
 
 //#endregion
-export { AlephaReactForm, FormModel, FormState, FormValidationError, useForm, useFormState };
+export { AlephaReactForm, FormModel, FormState, FormValidationError, useFieldValue, useForm, useFormState, useFormValues };
 //# sourceMappingURL=index.js.map