@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/tools/components/auth/useAuthGuard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAuthGuard.js","names":["useAuthGuard","options","useAuth","lastCheckRef","useRef","pendingRedirect","setPendingRedirect","useState","handleAuthExpired","useCallback","onAuthExpired","loginPath","logoutAndRedirect","logout","checkAuth","user","isLoading","useEffect","checkOnVisibility","handleVisibilityChange","handleFocus","enablePeriodicCheck","interval","checkInterval"],"sources":["../../../../src/tools/components/auth/useAuthGuard.tsx"],"sourcesContent":["import { useEffect, useCallback, useRef, useState } from 'react';\nimport { useAuth } from './useAuth';\n\nexport interface AuthGuardOptions {\n  /**\n   * 認証切れ時のコールバック\n   * @default undefined\n   */\n  onAuthExpired?: () => void;\n  /**\n   * ログインページへのリダイレクトパス\n   * @default '/login'\n   */\n  loginPath?: string;\n  /**\n   * タブフォーカス時に認証状態をチェック\n   * @default true\n   */\n  checkOnVisibility?: boolean;\n  /**\n   * 定期チェックの間隔 (ms)\n   * @default 60000 (1分)\n   */\n  checkInterval?: number;\n  /**\n   * 定期チェックを有効にする\n   * @default false\n   */\n  enablePeriodicCheck?: boolean;\n}\n\nexport interface AuthGuardResult {\n  /** 認証済みかどうか */\n  isAuthenticated: boolean;\n  /** 認証をチェック中かどうか */\n  isLoading: boolean;\n  /** 手動で認証状態をチェック */\n  checkAuth: () => Promise<void>;\n  /** ログアウトして指定パスへリダイレクト */\n  logoutAndRedirect: () => Promise<void>;\n}\n\n/**\n * 認証ガードフック\n *\n * Firebase と Supabase の両方で動作し、以下の機能を提供:\n * - onAuthStateChanged によるリアルタイム監視\n * - タブフォーカス時の認証チェック\n * - オプションの定期チェック\n * - 認証切れ時の自動リダイレクト\n *\n * @example\n * ```tsx\n * function App() {\n *   useAuthGuard({\n *     onAuthExpired: () => navigate('/login'),\n *     checkOnVisibility: true,\n *   });\n *\n *   return <MainContent />;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // ルートコンポーネントで使用\n * function ProtectedRoute({ children }) {\n *   const { isAuthenticated, isLoading } = useAuthGuard({\n *     loginPath: '/login',\n *   });\n *\n *   if (isLoading) return <LoadingSpinner />;\n *   if (!isAuthenticated) return null; // リダイレクト処理中\n *   return children;\n * }\n * ```\n */\nexport function useAuthGuard(options: AuthGuardOptions = {}): AuthGuardResult {\n  const {\n    onAuthExpired,\n    loginPath = '/login',\n    checkOnVisibility = true,\n    checkInterval = 60000,\n    enablePeriodicCheck = false,\n  } = options;\n\n  const { user, isLoading, logout } = useAuth();\n  const lastCheckRef = useRef<number>(0);\n  // SSR-safe: Track pending redirect in state, perform in useEffect\n  const [pendingRedirect, setPendingRedirect] = useState<string | null>(null);\n\n  // Perform actual redirect in useEffect (client-only)\n  useEffect(() => {\n    lastCheckRef.current = Date.now();\n    if (pendingRedirect) {\n      window.location.href = pendingRedirect;\n    }\n  }, [pendingRedirect]);\n\n  const handleAuthExpired = useCallback(() => {\n    if (onAuthExpired) {\n      onAuthExpired();\n    } else {\n      // Set state instead of directly accessing window\n      setPendingRedirect(loginPath);\n    }\n  }, [onAuthExpired, loginPath]);\n\n  const logoutAndRedirect = useCallback(async () => {\n    try {\n      await logout();\n    } catch {\n      // Ignore logout errors\n    }\n    handleAuthExpired();\n  }, [logout, handleAuthExpired]);\n\n  const checkAuth = useCallback(async () => {\n    lastCheckRef.current = Date.now();\n    // 認証状態は onAuthStateChanged で自動更新されるため、\n    // ここでは現在のユーザー状態をチェック\n    if (!user && !isLoading) {\n      handleAuthExpired();\n    }\n  }, [user, isLoading, handleAuthExpired]);\n\n  // タブがフォーカスされた時のチェック\n  useEffect(() => {\n    if (!checkOnVisibility) return;\n\n    const handleVisibilityChange = () => {\n      if (document.visibilityState === 'visible') {\n        // タブがアクティブになった時、認証状態をチェック\n        checkAuth();\n      }\n    };\n\n    const handleFocus = () => {\n      // window.focus イベントでもチェック\n      checkAuth();\n    };\n\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    window.addEventListener('focus', handleFocus);\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      window.removeEventListener('focus', handleFocus);\n    };\n  }, [checkOnVisibility, checkAuth]);\n\n  // 定期チェック\n  useEffect(() => {\n    if (!enablePeriodicCheck) return;\n\n    const interval = setInterval(() => {\n      checkAuth();\n    }, checkInterval);\n\n    return () => clearInterval(interval);\n  }, [enablePeriodicCheck, checkInterval, checkAuth]);\n\n  // ユーザーが null になった時の処理 (セッション切れ)\n  useEffect(() => {\n    if (!isLoading && !user) {\n      // 初回ロード後にユーザーがいない場合\n      // onAuthExpired は呼ばず、コンポーネント側で判断させる\n    }\n  }, [user, isLoading]);\n\n  return {\n    isAuthenticated: !!user,\n    isLoading,\n    checkAuth,\n    logoutAndRedirect,\n  };\n}\n"],"mappings":";;;;AA6EA,SAAgBA,EAAa,IAA4B,CAAC,GAAoB;CAC5E,IAAM,EACJ,kBACA,eAAY,UACZ,uBAAoB,IACpB,mBAAgB,KAChB,yBAAsB,OACpBC,GAEE,EAAE,SAAM,cAAW,cAAWC,EAAQ,GACtCC,IAAeC,EAAe,CAAC,GAE/B,CAACC,GAAiBC,KAAsBC,EAAwB,IAAI;CAG1E,QAAgB;EAEd,AADA,EAAa,UAAU,KAAK,IAAI,GAC5BF,MACF,OAAO,SAAS,OAAOA;CAE3B,GAAG,CAACA,CAAe,CAAC;CAEpB,IAAMG,IAAoBC,QAAkB;EAC1C,AAAIC,IACFA,EAAc,IAGdJ,EAAmBK,CAAS;CAEhC,GAAG,CAACD,GAAeC,CAAS,CAAC,GAEvBC,IAAoBH,EAAY,YAAY;EAChD,IAAI;GACF,MAAMI,EAAO;EACf,QAAQ,CAER;EACA,EAAkB;CACpB,GAAG,CAACA,GAAQL,CAAiB,CAAC,GAExBM,IAAYL,EAAY,YAAY;EAIxC,AAHA,EAAa,UAAU,KAAK,IAAI,GAG5B,CAACM,KAAQ,CAACC,KACZR,EAAkB;CAEtB,GAAG;EAACO;EAAMC;EAAWR;CAAiB,CAAC;CA8CvC,OA3CAS,QAAgB;EACd,IAAI,CAACC,GAAmB;EAExB,IAAMC,UAA+B;GACnC,AAAI,SAAS,oBAAoB,aAE/BL,EAAU;EAEd,GAEMM,UAAoB;GAExB,EAAU;EACZ;EAKA,OAHA,SAAS,iBAAiB,oBAAoBD,CAAsB,GACpE,OAAO,iBAAiB,SAASC,CAAW,SAE/B;GAEX,AADA,SAAS,oBAAoB,oBAAoBD,CAAsB,GACvE,OAAO,oBAAoB,SAASC,CAAW;EACjD;CACF,GAAG,CAACF,GAAmBJ,CAAS,CAAC,GAGjCG,QAAgB;EACd,IAAI,CAACI,GAAqB;EAE1B,IAAMC,IAAW,kBAAkB;GACjC,EAAU;EACZ,GAAGC,CAAa;EAEhB,aAAa,cAAcD,CAAQ;CACrC,GAAG;EAACD;EAAqBE;EAAeT;CAAS,CAAC,GAGlDG,QAAgB,CAKhB,GAAG,CAACF,GAAMC,CAAS,CAAC,GAEb;EACL,iBAAiB,CAAC,CAACD;EACnB;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useAuthGuard.js","names":["useAuthGuard","options","useAuth","lastCheckRef","useRef","pendingRedirect","setPendingRedirect","useState","handleAuthExpired","useCallback","onAuthExpired","loginPath","logoutAndRedirect","logout","checkAuth","user","isLoading","useEffect","checkOnVisibility","handleVisibilityChange","handleFocus","enablePeriodicCheck","interval","checkInterval"],"sources":["../../../../src/tools/components/auth/useAuthGuard.tsx"],"sourcesContent":["import { useEffect, useCallback, useRef, useState } from 'react';\nimport { useAuth } from './useAuth';\n\n/**\n * Display-session checks and client navigation settings for useAuthGuard.\n *\n * @see useAuthGuard for behavior and setup.\n */\nexport interface AuthGuardOptions {\n    /**\n     * Callback used instead of navigation when a check finds no user; omitted by default. Callback errors propagate.\n     */\n  onAuthExpired?: () => void;\n    /**\n     * Destination assigned to window.location.href when no callback is supplied; defaults to /login.\n     */\n  loginPath?: string;\n    /**\n     * Check the current context on visible/focus events; defaults to true.\n     */\n  checkOnVisibility?: boolean;\n    /**\n     * Periodic timer interval in milliseconds; defaults to 60000 and is used only when periodic checks are enabled.\n     */\n  checkInterval?: number;\n    /**\n     * Start a repeating current-context check; defaults to false.\n     */\n  enablePeriodicCheck?: boolean;\n}\n\n/**\n * Display-session state and explicit check/navigation actions; see useAuthGuard.\n *\n * @see useAuthGuard for the canonical usage example.\n */\nexport interface AuthGuardResult {\n    /**\n     * Whether the context currently has a user; does not require isSessionVerified.\n     */\n  isAuthenticated: boolean;\n    /**\n     * Current AuthProvider loading flag.\n     */\n  isLoading: boolean;\n    /**\n     * Inspect current context, without a backend request.\n     *\n     * @returns No value; invokes expiry handling only when no user and not loading.\n     */\n  checkAuth: () => Promise<void>;\n    /**\n     * Attempt logout, swallow logout failure, then handle expiry.\n     *\n     * @returns No value after logout attempt and expiry callback or navigation scheduling.\n     *\n     * @throws Rejects if the supplied expiry callback throws.\n     */\n  logoutAndRedirect: () => Promise<void>;\n}\n\n/**\n * Checks current authentication context on explicit calls, focus or optional timers.\n *\n * @param options - Expiry callback/navigation and check scheduling; defaults to focus checks only.\n *\n * @returns Current display authentication/loading flags and explicit check/logout actions.\n *\n * @throws Error when no AuthProvider exists.\n *\n * @remarks Requires AuthProvider within QueryClientProvider. Checks do not call a backend\n * or refetch a session; they inspect useAuth state. Mounting alone does not redirect:\n * checkAuth must run via an event, timer or caller. onAuthExpired overrides navigation;\n * otherwise navigation is performed by an effect. Cleanup removes listeners/timers.\n * No CSS is required. Optimistic display state can report authenticated before verification.\n *\n * @example\n * ```tsx\n * import type { ReactNode } from 'react';\n * import { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n * import { AuthProvider, useAuthGuard, type AuthAdapter } from '@alneas/appkit-react/tools/auth';\n *\n * function Content() { const { isAuthenticated } = useAuthGuard(); return <span>{isAuthenticated ? 'Signed in' : 'Signed out'}</span>; }\n * export function Example({ adapter, queryClient }: { adapter: AuthAdapter; queryClient: QueryClient }) {\n *   return <QueryClientProvider client={queryClient}><AuthProvider adapter={adapter}><Content /></AuthProvider></QueryClientProvider>;\n * }\n * ```\n */\nexport function useAuthGuard(options: AuthGuardOptions = {}): AuthGuardResult {\n  const {\n    onAuthExpired,\n    loginPath = '/login',\n    checkOnVisibility = true,\n    checkInterval = 60000,\n    enablePeriodicCheck = false,\n  } = options;\n\n  const { user, isLoading, logout } = useAuth();\n  const lastCheckRef = useRef<number>(0);\n  // SSR-safe: Track pending redirect in state, perform in useEffect\n  const [pendingRedirect, setPendingRedirect] = useState<string | null>(null);\n\n  // Perform actual redirect in useEffect (client-only)\n  useEffect(() => {\n    lastCheckRef.current = Date.now();\n    if (pendingRedirect) {\n      window.location.href = pendingRedirect;\n    }\n  }, [pendingRedirect]);\n\n  const handleAuthExpired = useCallback(() => {\n    if (onAuthExpired) {\n      onAuthExpired();\n    } else {\n      // Set state instead of directly accessing window\n      setPendingRedirect(loginPath);\n    }\n  }, [onAuthExpired, loginPath]);\n\n  const logoutAndRedirect = useCallback(async () => {\n    try {\n      await logout();\n    } catch {\n      // Ignore logout errors\n    }\n    handleAuthExpired();\n  }, [logout, handleAuthExpired]);\n\n  const checkAuth = useCallback(async () => {\n    lastCheckRef.current = Date.now();\n    // 認証状態は onAuthStateChanged で自動更新されるため、\n    // ここでは現在のユーザー状態をチェック\n    if (!user && !isLoading) {\n      handleAuthExpired();\n    }\n  }, [user, isLoading, handleAuthExpired]);\n\n  // タブがフォーカスされた時のチェック\n  useEffect(() => {\n    if (!checkOnVisibility) return;\n\n    const handleVisibilityChange = () => {\n      if (document.visibilityState === 'visible') {\n        // タブがアクティブになった時、認証状態をチェック\n        checkAuth();\n      }\n    };\n\n    const handleFocus = () => {\n      // window.focus イベントでもチェック\n      checkAuth();\n    };\n\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    window.addEventListener('focus', handleFocus);\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      window.removeEventListener('focus', handleFocus);\n    };\n  }, [checkOnVisibility, checkAuth]);\n\n  // 定期チェック\n  useEffect(() => {\n    if (!enablePeriodicCheck) return;\n\n    const interval = setInterval(() => {\n      checkAuth();\n    }, checkInterval);\n\n    return () => clearInterval(interval);\n  }, [enablePeriodicCheck, checkInterval, checkAuth]);\n\n  // ユーザーが null になった時の処理 (セッション切れ)\n  useEffect(() => {\n    if (!isLoading && !user) {\n      // 初回ロード後にユーザーがいない場合\n      // onAuthExpired は呼ばず、コンポーネント側で判断させる\n    }\n  }, [user, isLoading]);\n\n  return {\n    isAuthenticated: !!user,\n    isLoading,\n    checkAuth,\n    logoutAndRedirect,\n  };\n}\n"],"mappings":";;;;AAwFA,SAAgBA,EAAa,IAA4B,CAAC,GAAoB;CAC5E,IAAM,EACJ,kBACA,eAAY,UACZ,uBAAoB,IACpB,mBAAgB,KAChB,yBAAsB,OACpBC,GAEE,EAAE,SAAM,cAAW,cAAWC,EAAQ,GACtCC,IAAeC,EAAe,CAAC,GAE/B,CAACC,GAAiBC,KAAsBC,EAAwB,IAAI;CAG1E,QAAgB;EAEd,AADA,EAAa,UAAU,KAAK,IAAI,GAC5BF,MACF,OAAO,SAAS,OAAOA;CAE3B,GAAG,CAACA,CAAe,CAAC;CAEpB,IAAMG,IAAoBC,QAAkB;EAC1C,AAAIC,IACFA,EAAc,IAGdJ,EAAmBK,CAAS;CAEhC,GAAG,CAACD,GAAeC,CAAS,CAAC,GAEvBC,IAAoBH,EAAY,YAAY;EAChD,IAAI;GACF,MAAMI,EAAO;EACf,QAAQ,CAER;EACA,EAAkB;CACpB,GAAG,CAACA,GAAQL,CAAiB,CAAC,GAExBM,IAAYL,EAAY,YAAY;EAIxC,AAHA,EAAa,UAAU,KAAK,IAAI,GAG5B,CAACM,KAAQ,CAACC,KACZR,EAAkB;CAEtB,GAAG;EAACO;EAAMC;EAAWR;CAAiB,CAAC;CA8CvC,OA3CAS,QAAgB;EACd,IAAI,CAACC,GAAmB;EAExB,IAAMC,UAA+B;GACnC,AAAI,SAAS,oBAAoB,aAE/BL,EAAU;EAEd,GAEMM,UAAoB;GAExB,EAAU;EACZ;EAKA,OAHA,SAAS,iBAAiB,oBAAoBD,CAAsB,GACpE,OAAO,iBAAiB,SAASC,CAAW,SAE/B;GAEX,AADA,SAAS,oBAAoB,oBAAoBD,CAAsB,GACvE,OAAO,oBAAoB,SAASC,CAAW;EACjD;CACF,GAAG,CAACF,GAAmBJ,CAAS,CAAC,GAGjCG,QAAgB;EACd,IAAI,CAACI,GAAqB;EAE1B,IAAMC,IAAW,kBAAkB;GACjC,EAAU;EACZ,GAAGC,CAAa;EAEhB,aAAa,cAAcD,CAAQ;CACrC,GAAG;EAACD;EAAqBE;EAAeT;CAAS,CAAC,GAGlDG,QAAgB,CAKhB,GAAG,CAACF,GAAMC,CAAS,CAAC,GAEb;EACL,iBAAiB,CAAC,CAACD;EACnB;EACA;EACA;CACF;AACF"}

package/dist/tools/components/auth/useRoleCheck.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRoleCheck.cjs","names":["useUserProfile","require_tools_components_auth_useUserProfile","useRoleCheck","profile","hasRole","userRole","roleField","role","roles"],"sources":["../../../../src/tools/components/auth/useRoleCheck.ts"],"sourcesContent":["import { useUserProfile } from './useUserProfile';\nimport type { BaseProfile } from './types';\n\n/**\n * ロールベースの表示制御フック\n */\nexport function useRoleCheck<T extends BaseProfile = BaseProfile>(\n  roleField: keyof T = 'role' as keyof T,\n) {\n  let profile: T | null = null;\n\n  try {\n    const profileContext = useUserProfile<T>();\n    profile = profileContext.profile;\n  } catch {\n    // UserProfileProvider が存在しない場合\n  }\n\n  const hasRole = (role: string): boolean => {\n    if (!profile) return false;\n    const userRole = profile[roleField];\n    if (Array.isArray(userRole)) {\n      return userRole.includes(role);\n    }\n    return userRole === role;\n  };\n\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some((role) => hasRole(role));\n  };\n\n  const hasAllRoles = (roles: string[]): boolean => {\n    return roles.every((role) => hasRole(role));\n  };\n\n  return {\n    profile,\n    hasRole,\n    hasAnyRole,\n    hasAllRoles,\n  };\n}\n"],"mappings":"A,wHAMA,SAAgBE,EACd,EAAqB,OACrB,CACA,IAAIC,EAAoB,KAExB,GAAI,CAEF,EADuBH,EAAAA,eACb,CAAA,CAAe,OAC3B,MAAQ,CAER,CAEA,IAAMI,EAAW,GAA0B,CACzC,GAAI,CAACD,EAAS,MAAO,GACrB,IAAME,EAAWF,EAAQG,GAIzB,OAHI,MAAM,QAAQD,CAAQ,EACjBA,EAAS,SAASE,CAAI,EAExBF,IAAaE,CACtB,EAUA,MAAO,CACL,UACA,UACA,WAXkB,GACXC,EAAM,KAAM,GAASJ,EAAQG,CAAI,CAAC,EAWzC,YARmB,GACZC,EAAM,MAAO,GAASJ,EAAQG,CAAI,CAAC,CAQ5C,CACF,C"}
+{"version":3,"file":"useRoleCheck.cjs","names":["useUserProfile","require_tools_components_auth_useUserProfile","useRoleCheck","profile","hasRole","userRole","roleField","role","roles"],"sources":["../../../../src/tools/components/auth/useRoleCheck.ts"],"sourcesContent":["import { useUserProfile } from './useUserProfile';\nimport type { BaseProfile } from './types';\n\n/**\n * Builds display predicates for a scalar or array role field on the current profile.\n *\n * @typeParam T - Profile shape extending BaseProfile; defaults to BaseProfile.\n *\n * @param roleField - Property containing role strings; defaults to role.\n *\n * @returns Profile plus hasRole, hasAnyRole and hasAllRoles predicates. Missing profile\n * returns false for individual roles; hasAllRoles([]) is true by Array.every semantics.\n *\n * @remarks A missing UserProfileProvider is tolerated and treated as no profile. Use\n * UserProfileProvider to supply roles. These checks control display only; the backend\n * must enforce authorization. No CSS is required.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * export function AdminHint() { const { hasRole } = useRoleCheck(); return hasRole('admin') ? <span>Admin</span> : null; }\n * ```\n */\nexport function useRoleCheck<T extends BaseProfile = BaseProfile>(\n  roleField: keyof T = 'role' as keyof T,\n) {\n  let profile: T | null = null;\n\n  try {\n    const profileContext = useUserProfile<T>();\n    profile = profileContext.profile;\n  } catch {\n    // UserProfileProvider が存在しない場合\n  }\n\n/**\n * Tests one role against the current scalar/array profile field.\n *\n * @param role - Requested role string.\n *\n * @returns True when the profile role equals or includes the requested string.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasRole } = useRoleCheck(); return <output>{hasRole('admin') ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasRole = (role: string): boolean => {\n    if (!profile) return false;\n    const userRole = profile[roleField];\n    if (Array.isArray(userRole)) {\n      return userRole.includes(role);\n    }\n    return userRole === role;\n  };\n\n/**\n * Tests whether at least one supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when any role matches; false for an empty array.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasAnyRole } = useRoleCheck(); return <output>{hasAnyRole(['admin', 'manager']) ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some((role) => hasRole(role));\n  };\n\n/**\n * Tests whether every supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when all roles match; true for an empty array even without a profile.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasAllRoles } = useRoleCheck(); return <output>{hasAllRoles(['admin', 'reviewer']) ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasAllRoles = (roles: string[]): boolean => {\n    return roles.every((role) => hasRole(role));\n  };\n\n  return {\n/**\n * Current profile used by every predicate; null when the profile provider is absent.\n */\n    profile,\n/**\n * Tests one role against the current scalar/array profile field.\n *\n * @param role - Requested role string.\n *\n * @returns True when the profile role equals or includes the requested string.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasRole,\n/**\n * Tests whether at least one supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when any role matches; false for an empty array.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasAnyRole,\n/**\n * Tests whether every supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when all roles match; true for an empty array even without a profile.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasAllRoles,\n  };\n}\n"],"mappings":"A,wHAuBA,SAAgBE,EACd,EAAqB,OACrB,CACA,IAAIC,EAAoB,KAExB,GAAI,CAEF,EADuBH,EAAAA,eACb,CAAA,CAAe,OAC3B,MAAQ,CAER,CAgBA,IAAMI,EAAW,GAA0B,CACzC,GAAI,CAACD,EAAS,MAAO,GACrB,IAAME,EAAWF,EAAQG,GAIzB,OAHI,MAAM,QAAQD,CAAQ,EACjBA,EAAS,SAASE,CAAI,EAExBF,IAAaE,CACtB,EAsCA,MAAO,CAIL,UAUA,UAUA,WA9CkB,GACXC,EAAM,KAAM,GAASJ,EAAQG,CAAI,CAAC,EAuDzC,YAtCmB,GACZC,EAAM,MAAO,GAASJ,EAAQG,CAAI,CAAC,CAsC5C,CACF,C"}

package/dist/tools/components/auth/useRoleCheck.d.cts

@@ -1,10 +1,57 @@
 import { BaseProfile } from './types.cjs';
 /**
- * ロールベースの表示制御フック
+ * Builds display predicates for a scalar or array role field on the current profile.
+ *
+ * @typeParam T - Profile shape extending BaseProfile; defaults to BaseProfile.
+ *
+ * @param roleField - Property containing role strings; defaults to role.
+ *
+ * @returns Profile plus hasRole, hasAnyRole and hasAllRoles predicates. Missing profile
+ * returns false for individual roles; hasAllRoles([]) is true by Array.every semantics.
+ *
+ * @remarks A missing UserProfileProvider is tolerated and treated as no profile. Use
+ * UserProfileProvider to supply roles. These checks control display only; the backend
+ * must enforce authorization. No CSS is required.
+ *
+ * @example
+ * ```tsx
+ * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';
+ * export function AdminHint() { const { hasRole } = useRoleCheck(); return hasRole('admin') ? <span>Admin</span> : null; }
+ * ```
  */
 export declare function useRoleCheck<T extends BaseProfile = BaseProfile>(roleField?: keyof T): {
+    /**
+     * Current profile used by every predicate; null when the profile provider is absent.
+     */
     profile: T | null;
+    /**
+     * Tests one role against the current scalar/array profile field.
+     *
+     * @param role - Requested role string.
+     *
+     * @returns True when the profile role equals or includes the requested string.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasRole: (role: string) => boolean;
+    /**
+     * Tests whether at least one supplied role matches.
+     *
+     * @param roles - Requested role strings.
+     *
+     * @returns True when any role matches; false for an empty array.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasAnyRole: (roles: string[]) => boolean;
+    /**
+     * Tests whether every supplied role matches.
+     *
+     * @param roles - Requested role strings.
+     *
+     * @returns True when all roles match; true for an empty array even without a profile.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasAllRoles: (roles: string[]) => boolean;
 };

package/dist/tools/components/auth/useRoleCheck.d.ts

@@ -1,10 +1,57 @@
 import { BaseProfile } from './types.js';
 /**
- * ロールベースの表示制御フック
+ * Builds display predicates for a scalar or array role field on the current profile.
+ *
+ * @typeParam T - Profile shape extending BaseProfile; defaults to BaseProfile.
+ *
+ * @param roleField - Property containing role strings; defaults to role.
+ *
+ * @returns Profile plus hasRole, hasAnyRole and hasAllRoles predicates. Missing profile
+ * returns false for individual roles; hasAllRoles([]) is true by Array.every semantics.
+ *
+ * @remarks A missing UserProfileProvider is tolerated and treated as no profile. Use
+ * UserProfileProvider to supply roles. These checks control display only; the backend
+ * must enforce authorization. No CSS is required.
+ *
+ * @example
+ * ```tsx
+ * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';
+ * export function AdminHint() { const { hasRole } = useRoleCheck(); return hasRole('admin') ? <span>Admin</span> : null; }
+ * ```
  */
 export declare function useRoleCheck<T extends BaseProfile = BaseProfile>(roleField?: keyof T): {
+    /**
+     * Current profile used by every predicate; null when the profile provider is absent.
+     */
     profile: T | null;
+    /**
+     * Tests one role against the current scalar/array profile field.
+     *
+     * @param role - Requested role string.
+     *
+     * @returns True when the profile role equals or includes the requested string.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasRole: (role: string) => boolean;
+    /**
+     * Tests whether at least one supplied role matches.
+     *
+     * @param roles - Requested role strings.
+     *
+     * @returns True when any role matches; false for an empty array.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasAnyRole: (roles: string[]) => boolean;
+    /**
+     * Tests whether every supplied role matches.
+     *
+     * @param roles - Requested role strings.
+     *
+     * @returns True when all roles match; true for an empty array even without a profile.
+     *
+     * @see useRoleCheck for profile setup; see the predicate declaration for its example.
+     */
     hasAllRoles: (roles: string[]) => boolean;
 };

package/dist/tools/components/auth/useRoleCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRoleCheck.js","names":["useRoleCheck","profile","useUserProfile","hasRole","userRole","roleField","role","roles"],"sources":["../../../../src/tools/components/auth/useRoleCheck.ts"],"sourcesContent":["import { useUserProfile } from './useUserProfile';\nimport type { BaseProfile } from './types';\n\n/**\n * ロールベースの表示制御フック\n */\nexport function useRoleCheck<T extends BaseProfile = BaseProfile>(\n  roleField: keyof T = 'role' as keyof T,\n) {\n  let profile: T | null = null;\n\n  try {\n    const profileContext = useUserProfile<T>();\n    profile = profileContext.profile;\n  } catch {\n    // UserProfileProvider が存在しない場合\n  }\n\n  const hasRole = (role: string): boolean => {\n    if (!profile) return false;\n    const userRole = profile[roleField];\n    if (Array.isArray(userRole)) {\n      return userRole.includes(role);\n    }\n    return userRole === role;\n  };\n\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some((role) => hasRole(role));\n  };\n\n  const hasAllRoles = (roles: string[]): boolean => {\n    return roles.every((role) => hasRole(role));\n  };\n\n  return {\n    profile,\n    hasRole,\n    hasAnyRole,\n    hasAllRoles,\n  };\n}\n"],"mappings":";;;AAMA,SAAgBA,EACd,IAAqB,QACrB;CACA,IAAIC,IAAoB;CAExB,IAAI;EAEF,IADuBC,EACb,CAAA,CAAe;CAC3B,QAAQ,CAER;CAEA,IAAMC,KAAW,MAA0B;EACzC,IAAI,CAACF,GAAS,OAAO;EACrB,IAAMG,IAAWH,EAAQI;EAIzB,OAHI,MAAM,QAAQD,CAAQ,IACjBA,EAAS,SAASE,CAAI,IAExBF,MAAaE;CACtB;CAUA,OAAO;EACL;EACA;EACA,aAXkB,MACXC,EAAM,MAAM,MAASJ,EAAQG,CAAI,CAAC;EAWzC,cARmB,MACZC,EAAM,OAAO,MAASJ,EAAQG,CAAI,CAAC;CAQ5C;AACF"}
+{"version":3,"file":"useRoleCheck.js","names":["useRoleCheck","profile","useUserProfile","hasRole","userRole","roleField","role","roles"],"sources":["../../../../src/tools/components/auth/useRoleCheck.ts"],"sourcesContent":["import { useUserProfile } from './useUserProfile';\nimport type { BaseProfile } from './types';\n\n/**\n * Builds display predicates for a scalar or array role field on the current profile.\n *\n * @typeParam T - Profile shape extending BaseProfile; defaults to BaseProfile.\n *\n * @param roleField - Property containing role strings; defaults to role.\n *\n * @returns Profile plus hasRole, hasAnyRole and hasAllRoles predicates. Missing profile\n * returns false for individual roles; hasAllRoles([]) is true by Array.every semantics.\n *\n * @remarks A missing UserProfileProvider is tolerated and treated as no profile. Use\n * UserProfileProvider to supply roles. These checks control display only; the backend\n * must enforce authorization. No CSS is required.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * export function AdminHint() { const { hasRole } = useRoleCheck(); return hasRole('admin') ? <span>Admin</span> : null; }\n * ```\n */\nexport function useRoleCheck<T extends BaseProfile = BaseProfile>(\n  roleField: keyof T = 'role' as keyof T,\n) {\n  let profile: T | null = null;\n\n  try {\n    const profileContext = useUserProfile<T>();\n    profile = profileContext.profile;\n  } catch {\n    // UserProfileProvider が存在しない場合\n  }\n\n/**\n * Tests one role against the current scalar/array profile field.\n *\n * @param role - Requested role string.\n *\n * @returns True when the profile role equals or includes the requested string.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasRole } = useRoleCheck(); return <output>{hasRole('admin') ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasRole = (role: string): boolean => {\n    if (!profile) return false;\n    const userRole = profile[roleField];\n    if (Array.isArray(userRole)) {\n      return userRole.includes(role);\n    }\n    return userRole === role;\n  };\n\n/**\n * Tests whether at least one supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when any role matches; false for an empty array.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasAnyRole } = useRoleCheck(); return <output>{hasAnyRole(['admin', 'manager']) ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some((role) => hasRole(role));\n  };\n\n/**\n * Tests whether every supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when all roles match; true for an empty array even without a profile.\n *\n * @example\n * ```tsx\n * import { useRoleCheck } from '@alneas/appkit-react/tools/auth';\n * // Render under UserProfileProvider to supply profile roles.\n * export function AccessHint() { const { hasAllRoles } = useRoleCheck(); return <output>{hasAllRoles(['admin', 'reviewer']) ? 'Allowed' : 'Unavailable'}</output>; }\n * ```\n */\n  const hasAllRoles = (roles: string[]): boolean => {\n    return roles.every((role) => hasRole(role));\n  };\n\n  return {\n/**\n * Current profile used by every predicate; null when the profile provider is absent.\n */\n    profile,\n/**\n * Tests one role against the current scalar/array profile field.\n *\n * @param role - Requested role string.\n *\n * @returns True when the profile role equals or includes the requested string.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasRole,\n/**\n * Tests whether at least one supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when any role matches; false for an empty array.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasAnyRole,\n/**\n * Tests whether every supplied role matches.\n *\n * @param roles - Requested role strings.\n *\n * @returns True when all roles match; true for an empty array even without a profile.\n *\n * @see useRoleCheck for profile setup; see the predicate declaration for its example.\n */\n    hasAllRoles,\n  };\n}\n"],"mappings":";;;AAuBA,SAAgBA,EACd,IAAqB,QACrB;CACA,IAAIC,IAAoB;CAExB,IAAI;EAEF,IADuBC,EACb,CAAA,CAAe;CAC3B,QAAQ,CAER;CAgBA,IAAMC,KAAW,MAA0B;EACzC,IAAI,CAACF,GAAS,OAAO;EACrB,IAAMG,IAAWH,EAAQI;EAIzB,OAHI,MAAM,QAAQD,CAAQ,IACjBA,EAAS,SAASE,CAAI,IAExBF,MAAaE;CACtB;CAsCA,OAAO;EAIL;EAUA;EAUA,aA9CkB,MACXC,EAAM,MAAM,MAASJ,EAAQG,CAAI,CAAC;EAuDzC,cAtCmB,MACZC,EAAM,OAAO,MAASJ,EAAQG,CAAI,CAAC;CAsC5C;AACF"}

package/dist/tools/components/auth/useUserProfile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useUserProfile.cjs","names":["createContext","useContext","react","ProfileContext","useUserProfile","context"],"sources":["../../../../src/tools/components/auth/useUserProfile.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { BaseProfile } from './types';\n\nexport interface ProfileState<T extends BaseProfile> {\n  profile: T | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {\n  updateProfile: (updates: Partial<T>) => Promise<T>;\n  refreshProfile: () => Promise<void>;\n  deleteProfile: () => Promise<void>;\n}\n\nexport const ProfileContext = createContext<ProfileContextValue<BaseProfile> | null>(null);\n\n/**\n * ログイン中ユーザーのプロファイル詳細情報およびその更新操作関数を取得するためのReactフック。\n */\nexport function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T> {\n  const context = useContext(ProfileContext);\n  if (!context) {\n    throw new Error('useUserProfile must be used within a UserProfileProvider');\n  }\n  return context as unknown as ProfileContextValue<T>;\n}\n"],"mappings":"A,uGAeA,IAAaG,GAAA,EAAiBH,EAAAA,cAAAA,CAAuD,IAAI,EAKzF,SAAgBI,GAA8E,CAC5F,IAAMC,GAAA,EAAUJ,EAAAA,WAAAA,CAAWE,CAAc,EACzC,GAAI,CAACE,EACH,MAAU,MAAM,0DAA0D,EAE5E,OAAOA,CACT,C"}
+{"version":3,"file":"useUserProfile.cjs","names":["createContext","useContext","react","ProfileContext","useUserProfile","context"],"sources":["../../../../src/tools/components/auth/useUserProfile.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { BaseProfile } from './types';\n\n/**\n * Profile data and query/mutation status from UserProfileProvider.\n *\n * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.\n *\n * @see useUserProfile for usage.\n */\nexport interface ProfileState<T extends BaseProfile> {\n  /**\n   * Current authenticated profile, or null before retrieval or after logout/deletion.\n   */\n  profile: T | null;\n  /**\n   * Authentication or enabled profile-query loading state.\n   */\n  isLoading: boolean;\n  /**\n   * Query, update or deletion error; null when no such error is present.\n   */\n  error: Error | null;\n}\n\n/**\n * Profile state plus persistence actions from UserProfileProvider.\n *\n * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.\n *\n * @see useUserProfile for usage.\n */\nexport interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {\n  /**\n   * Persist partial updates and add an updated_at ISO timestamp.\n   *\n   * @param updates - Partial persisted fields.\n   *\n   * @returns Updated profile from the adapter.\n   *\n   * @throws Rejects when no profile exists or the adapter rejects.\n   */\n  updateProfile: (updates: Partial<T>) => Promise<T>;\n  /**\n   * Refetch the current profile when authenticated.\n   *\n   * @returns No value after refetch completes; unauthenticated calls do nothing.\n   */\n  refreshProfile: () => Promise<void>;\n  /**\n   * Delete the current profile and clear its detail cache.\n   *\n   * @returns No value after deletion.\n   *\n   * @throws Rejects when no profile exists or the adapter rejects.\n   */\n  deleteProfile: () => Promise<void>;\n}\n\n/**\n * Nullable base-profile React context populated by UserProfileProvider.\n *\n * @see useUserProfile for typed consumption.\n */\nexport const ProfileContext = createContext<ProfileContextValue<BaseProfile> | null>(null);\n\n/**\n * Reads the current profile and persistence actions from UserProfileProvider.\n *\n * @typeParam T - Expected persisted profile shape; defaults to BaseProfile and must match the host adapter.\n *\n * @returns Provider state and actions; the generic is a cast, not runtime validation.\n *\n * @throws Error when used outside UserProfileProvider.\n *\n * @remarks Requires QueryClientProvider, AuthProvider and UserProfileProvider in that order;\n * see UserProfileProvider for a complete host-adapter setup. No CSS is required.\n *\n * @example\n * ```tsx\n * import { useUserProfile } from '@alneas/appkit-react/tools/auth';\n * // Render under the providers shown in UserProfileProvider's example.\n * export function ProfileEmail() { return <span>{useUserProfile().profile?.email ?? 'No profile'}</span>; }\n * ```\n */\nexport function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T> {\n  const context = useContext(ProfileContext);\n  if (!context) {\n    throw new Error('useUserProfile must be used within a UserProfileProvider');\n  }\n  return context as unknown as ProfileContextValue<T>;\n}\n"],"mappings":"A,uGAgEA,IAAaG,GAAA,EAAiBH,EAAAA,cAAAA,CAAuD,IAAI,EAqBzF,SAAgBI,GAA8E,CAC5F,IAAMC,GAAA,EAAUJ,EAAAA,WAAAA,CAAWE,CAAc,EACzC,GAAI,CAACE,EACH,MAAU,MAAM,0DAA0D,EAE5E,OAAOA,CACT,C"}

package/dist/tools/components/auth/useUserProfile.d.cts

@@ -1,16 +1,81 @@
 import { BaseProfile } from './types.cjs';
+/**
+ * Profile data and query/mutation status from UserProfileProvider.
+ *
+ * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.
+ *
+ * @see useUserProfile for usage.
+ */
 export interface ProfileState<T extends BaseProfile> {
+    /**
+     * Current authenticated profile, or null before retrieval or after logout/deletion.
+     */
     profile: T | null;
+    /**
+     * Authentication or enabled profile-query loading state.
+     */
     isLoading: boolean;
+    /**
+     * Query, update or deletion error; null when no such error is present.
+     */
     error: Error | null;
 }
+/**
+ * Profile state plus persistence actions from UserProfileProvider.
+ *
+ * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.
+ *
+ * @see useUserProfile for usage.
+ */
 export interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {
+    /**
+     * Persist partial updates and add an updated_at ISO timestamp.
+     *
+     * @param updates - Partial persisted fields.
+     *
+     * @returns Updated profile from the adapter.
+     *
+     * @throws Rejects when no profile exists or the adapter rejects.
+     */
     updateProfile: (updates: Partial<T>) => Promise<T>;
+    /**
+     * Refetch the current profile when authenticated.
+     *
+     * @returns No value after refetch completes; unauthenticated calls do nothing.
+     */
     refreshProfile: () => Promise<void>;
+    /**
+     * Delete the current profile and clear its detail cache.
+     *
+     * @returns No value after deletion.
+     *
+     * @throws Rejects when no profile exists or the adapter rejects.
+     */
     deleteProfile: () => Promise<void>;
 }
+/**
+ * Nullable base-profile React context populated by UserProfileProvider.
+ *
+ * @see useUserProfile for typed consumption.
+ */
 export declare const ProfileContext: import('react').Context<ProfileContextValue<BaseProfile> | null>;
 /**
- * ログイン中ユーザーのプロファイル詳細情報およびその更新操作関数を取得するためのReactフック。
+ * Reads the current profile and persistence actions from UserProfileProvider.
+ *
+ * @typeParam T - Expected persisted profile shape; defaults to BaseProfile and must match the host adapter.
+ *
+ * @returns Provider state and actions; the generic is a cast, not runtime validation.
+ *
+ * @throws Error when used outside UserProfileProvider.
+ *
+ * @remarks Requires QueryClientProvider, AuthProvider and UserProfileProvider in that order;
+ * see UserProfileProvider for a complete host-adapter setup. No CSS is required.
+ *
+ * @example
+ * ```tsx
+ * import { useUserProfile } from '@alneas/appkit-react/tools/auth';
+ * // Render under the providers shown in UserProfileProvider's example.
+ * export function ProfileEmail() { return <span>{useUserProfile().profile?.email ?? 'No profile'}</span>; }
+ * ```
  */
 export declare function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T>;

package/dist/tools/components/auth/useUserProfile.d.ts

@@ -1,16 +1,81 @@
 import { BaseProfile } from './types.js';
+/**
+ * Profile data and query/mutation status from UserProfileProvider.
+ *
+ * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.
+ *
+ * @see useUserProfile for usage.
+ */
 export interface ProfileState<T extends BaseProfile> {
+    /**
+     * Current authenticated profile, or null before retrieval or after logout/deletion.
+     */
     profile: T | null;
+    /**
+     * Authentication or enabled profile-query loading state.
+     */
     isLoading: boolean;
+    /**
+     * Query, update or deletion error; null when no such error is present.
+     */
     error: Error | null;
 }
+/**
+ * Profile state plus persistence actions from UserProfileProvider.
+ *
+ * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.
+ *
+ * @see useUserProfile for usage.
+ */
 export interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {
+    /**
+     * Persist partial updates and add an updated_at ISO timestamp.
+     *
+     * @param updates - Partial persisted fields.
+     *
+     * @returns Updated profile from the adapter.
+     *
+     * @throws Rejects when no profile exists or the adapter rejects.
+     */
     updateProfile: (updates: Partial<T>) => Promise<T>;
+    /**
+     * Refetch the current profile when authenticated.
+     *
+     * @returns No value after refetch completes; unauthenticated calls do nothing.
+     */
     refreshProfile: () => Promise<void>;
+    /**
+     * Delete the current profile and clear its detail cache.
+     *
+     * @returns No value after deletion.
+     *
+     * @throws Rejects when no profile exists or the adapter rejects.
+     */
     deleteProfile: () => Promise<void>;
 }
+/**
+ * Nullable base-profile React context populated by UserProfileProvider.
+ *
+ * @see useUserProfile for typed consumption.
+ */
 export declare const ProfileContext: import('react').Context<ProfileContextValue<BaseProfile> | null>;
 /**
- * ログイン中ユーザーのプロファイル詳細情報およびその更新操作関数を取得するためのReactフック。
+ * Reads the current profile and persistence actions from UserProfileProvider.
+ *
+ * @typeParam T - Expected persisted profile shape; defaults to BaseProfile and must match the host adapter.
+ *
+ * @returns Provider state and actions; the generic is a cast, not runtime validation.
+ *
+ * @throws Error when used outside UserProfileProvider.
+ *
+ * @remarks Requires QueryClientProvider, AuthProvider and UserProfileProvider in that order;
+ * see UserProfileProvider for a complete host-adapter setup. No CSS is required.
+ *
+ * @example
+ * ```tsx
+ * import { useUserProfile } from '@alneas/appkit-react/tools/auth';
+ * // Render under the providers shown in UserProfileProvider's example.
+ * export function ProfileEmail() { return <span>{useUserProfile().profile?.email ?? 'No profile'}</span>; }
+ * ```
  */
 export declare function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T>;

package/dist/tools/components/auth/useUserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUserProfile.js","names":["ProfileContext","createContext","useUserProfile","context","useContext"],"sources":["../../../../src/tools/components/auth/useUserProfile.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { BaseProfile } from './types';\n\nexport interface ProfileState<T extends BaseProfile> {\n  profile: T | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {\n  updateProfile: (updates: Partial<T>) => Promise<T>;\n  refreshProfile: () => Promise<void>;\n  deleteProfile: () => Promise<void>;\n}\n\nexport const ProfileContext = createContext<ProfileContextValue<BaseProfile> | null>(null);\n\n/**\n * ログイン中ユーザーのプロファイル詳細情報およびその更新操作関数を取得するためのReactフック。\n */\nexport function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T> {\n  const context = useContext(ProfileContext);\n  if (!context) {\n    throw new Error('useUserProfile must be used within a UserProfileProvider');\n  }\n  return context as unknown as ProfileContextValue<T>;\n}\n"],"mappings":";;;AAeA,IAAaA,IAAiBC,EAAuD,IAAI;AAKzF,SAAgBC,IAA8E;CAC5F,IAAMC,IAAUC,EAAWJ,CAAc;CACzC,IAAI,CAACG,GACH,MAAU,MAAM,0DAA0D;CAE5E,OAAOA;AACT"}
+{"version":3,"file":"useUserProfile.js","names":["ProfileContext","createContext","useUserProfile","context","useContext"],"sources":["../../../../src/tools/components/auth/useUserProfile.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { BaseProfile } from './types';\n\n/**\n * Profile data and query/mutation status from UserProfileProvider.\n *\n * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.\n *\n * @see useUserProfile for usage.\n */\nexport interface ProfileState<T extends BaseProfile> {\n  /**\n   * Current authenticated profile, or null before retrieval or after logout/deletion.\n   */\n  profile: T | null;\n  /**\n   * Authentication or enabled profile-query loading state.\n   */\n  isLoading: boolean;\n  /**\n   * Query, update or deletion error; null when no such error is present.\n   */\n  error: Error | null;\n}\n\n/**\n * Profile state plus persistence actions from UserProfileProvider.\n *\n * @typeParam T - Persisted profile extending BaseProfile; must match the supplied adapter.\n *\n * @see useUserProfile for usage.\n */\nexport interface ProfileContextValue<T extends BaseProfile> extends ProfileState<T> {\n  /**\n   * Persist partial updates and add an updated_at ISO timestamp.\n   *\n   * @param updates - Partial persisted fields.\n   *\n   * @returns Updated profile from the adapter.\n   *\n   * @throws Rejects when no profile exists or the adapter rejects.\n   */\n  updateProfile: (updates: Partial<T>) => Promise<T>;\n  /**\n   * Refetch the current profile when authenticated.\n   *\n   * @returns No value after refetch completes; unauthenticated calls do nothing.\n   */\n  refreshProfile: () => Promise<void>;\n  /**\n   * Delete the current profile and clear its detail cache.\n   *\n   * @returns No value after deletion.\n   *\n   * @throws Rejects when no profile exists or the adapter rejects.\n   */\n  deleteProfile: () => Promise<void>;\n}\n\n/**\n * Nullable base-profile React context populated by UserProfileProvider.\n *\n * @see useUserProfile for typed consumption.\n */\nexport const ProfileContext = createContext<ProfileContextValue<BaseProfile> | null>(null);\n\n/**\n * Reads the current profile and persistence actions from UserProfileProvider.\n *\n * @typeParam T - Expected persisted profile shape; defaults to BaseProfile and must match the host adapter.\n *\n * @returns Provider state and actions; the generic is a cast, not runtime validation.\n *\n * @throws Error when used outside UserProfileProvider.\n *\n * @remarks Requires QueryClientProvider, AuthProvider and UserProfileProvider in that order;\n * see UserProfileProvider for a complete host-adapter setup. No CSS is required.\n *\n * @example\n * ```tsx\n * import { useUserProfile } from '@alneas/appkit-react/tools/auth';\n * // Render under the providers shown in UserProfileProvider's example.\n * export function ProfileEmail() { return <span>{useUserProfile().profile?.email ?? 'No profile'}</span>; }\n * ```\n */\nexport function useUserProfile<T extends BaseProfile = BaseProfile>(): ProfileContextValue<T> {\n  const context = useContext(ProfileContext);\n  if (!context) {\n    throw new Error('useUserProfile must be used within a UserProfileProvider');\n  }\n  return context as unknown as ProfileContextValue<T>;\n}\n"],"mappings":";;;AAgEA,IAAaA,IAAiBC,EAAuD,IAAI;AAqBzF,SAAgBC,IAA8E;CAC5F,IAAMC,IAAUC,EAAWJ,CAAc;CACzC,IAAI,CAACG,GACH,MAAU,MAAM,0DAA0D;CAE5E,OAAOA;AACT"}

package/dist/tools/components/barcode/BarcodeGenerator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeGenerator.cjs","names":["useRef","Card","CardHeader","CardTitle","CardDescription","CardContent","require_runtime","require_ui_components_ui_card","react_jsx_runtime","react","BarcodeGenerator","canvasRef","JsBarcode","value","format","width","height","displayValue","title","description"],"sources":["../../../../src/tools/components/barcode/BarcodeGenerator.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * バーコード生成器のプロップス\n */\ninterface BarcodeGeneratorProps {\n  /** エンコードする値 */\n  value: string;\n  /** バーコードフォーマット（CODE128, EAN13, UPC等） */\n  format?: string;\n  /** カードのタイトル */\n  title?: string;\n  /** カードの説明 */\n  description?: string;\n  /** バーの幅（ピクセル） */\n  width?: number;\n  /** バーコードの高さ */\n  height?: number;\n  /** 値を下部に表示するか */\n  displayValue?: boolean;\n}\n\n/**\n * バーコード生成コンポーネント\n *\n * 商品コードなどのバーコードを生成して表示します。\n * CODE128、EAN13、UPC、CODE39などの形式に対応。\n *\n * @example\n * ```tsx\n * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';\n *\n * <BarcodeGenerator\n *   value=\"4901234567890\"\n *   format=\"EAN13\"\n *   title=\"商品バーコード\"\n * />\n * ```\n */\nexport const BarcodeGenerator: React.FC<BarcodeGeneratorProps> = ({\n  value,\n  format = 'CODE128',\n  title = 'Barcode',\n  description,\n  width = 2,\n  height = 100,\n  displayValue = true,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const generate = async () => {\n      if (canvasRef.current) {\n        try {\n          const { default: JsBarcode } = await import('jsbarcode');\n          JsBarcode(canvasRef.current, value, {\n            format: format,\n            width: width,\n            height: height,\n            displayValue: displayValue,\n          });\n        } catch (e) {\n          console.error('Barcode generation failed', e);\n        }\n      }\n    };\n    generate();\n  }, [value, format, width, height, displayValue]);\n\n  return (\n    <Card className='w-fit mx-auto text-center min-w-[300px]'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        <div className='bg-white p-4 rounded-lg'>\n          <canvas ref={canvasRef} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":"A,kQAyCA,IAAaU,GAAqD,CAChE,QACA,SAAS,UACT,QAAQ,UACR,cACA,QAAQ,EACR,SAAS,IACT,eAAe,MACX,CACJ,IAAMC,GAAA,EAAYX,EAAAA,OAAAA,CAA0B,IAAI,EAqBhD,OAnBA,EAAAS,EAAA,UAAA,KAAgB,EAgBd,SAf6B,CAC3B,GAAIE,EAAU,QACZ,GAAI,CACF,GAAM,CAAE,QAASC,GAAc,MAAM,OAAO,aAC5CA,EAAUD,EAAU,QAASE,EAAO,CAC1B,SACD,QACC,SACM,cAChB,CAAC,CACH,OAAS,EAAG,CACV,QAAQ,MAAM,4BAA6B,CAAC,CAC9C,CAEJ,EACA,CAAS,CACX,EAAG,CAACA,EAAOC,EAAQC,EAAOC,EAAQC,CAAY,CAAC,GAG7C,EAAAT,EAAA,KAAA,CAACP,EAAAA,KAAD,CAAM,UAAU,0CAAhB,SAAA,EACE,EAAAO,EAAA,KAAA,CAACN,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAX,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAX,EAAA,IAAA,CAACH,EAAAA,YAAD,CAAa,UAAU,uCACrB,UAAA,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACb,UAAA,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,IAAKG,CAAY,CAAA,CACtB,CAAA,CACM,CAAA,CACT,C,EAEV,E"}
+{"version":3,"file":"BarcodeGenerator.cjs","names":["useRef","Card","CardHeader","CardTitle","CardDescription","CardContent","require_runtime","require_ui_components_ui_card","react_jsx_runtime","react","BarcodeGenerator","canvasRef","JsBarcode","value","format","width","height","displayValue","title","description"],"sources":["../../../../src/tools/components/barcode/BarcodeGenerator.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * Host inputs and presentation settings for BarcodeGenerator.\n * @see BarcodeGenerator\n */\ninterface BarcodeGeneratorProps {\n  /**\n   * Text passed unchanged to the encoder; format/value validity is determined by the optional encoding library.\n   */\n  value: string;\n  /**\n   * jsbarcode format name; defaults to CODE128. Supply values valid for that format; errors are logged, not returned.\n   */\n  format?: string;\n  /**\n   * Card heading.\n   * @defaultValue Barcode\n   */\n  title?: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Width of each barcode bar in jsbarcode pixel units; defaults to 2.\n   */\n  width?: number;\n  /**\n   * Barcode height in jsbarcode pixel units; defaults to 100.\n   */\n  height?: number;\n  /**\n   * Displays encoded text below the bars; defaults to true.\n   */\n  displayValue?: boolean;\n}\n\n/**\n * Draws a barcode onto a canvas after loading jsbarcode in the client effect.\n * @param props - Encoded value, barcode format and card/drawing settings; see BarcodeGeneratorProps. Wrapper defaults: format='CODE128', title='Barcode', width=2, height=100, displayValue=true.\n * @returns The rendered BarcodeGenerator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional jsbarcode peer. Rendering requires a browser canvas; server rendering produces the card/canvas without drawing. Supported format/value constraints come from jsbarcode and are not validated here. Drawing/import failures are caught and logged, with no error UI or completion callback. No cleanup cancels an in-flight dynamic import.\n * @example\n * ```tsx\n * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<BarcodeGenerator value=\"APPKIT-001\" format=\"CODE128\" title=\"Document barcode\" />);\n * }\n * ```\n */\nexport const BarcodeGenerator: React.FC<BarcodeGeneratorProps> = ({\n  value,\n  format = 'CODE128',\n  title = 'Barcode',\n  description,\n  width = 2,\n  height = 100,\n  displayValue = true,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const generate = async () => {\n      if (canvasRef.current) {\n        try {\n          const { default: JsBarcode } = await import('jsbarcode');\n          JsBarcode(canvasRef.current, value, {\n            format: format,\n            width: width,\n            height: height,\n            displayValue: displayValue,\n          });\n        } catch (e) {\n          console.error('Barcode generation failed', e);\n        }\n      }\n    };\n    generate();\n  }, [value, format, width, height, displayValue]);\n\n  return (\n    <Card className='w-fit mx-auto text-center min-w-[300px]'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        <div className='bg-white p-4 rounded-lg'>\n          <canvas ref={canvasRef} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":"A,kQAuDA,IAAaU,GAAqD,CAChE,QACA,SAAS,UACT,QAAQ,UACR,cACA,QAAQ,EACR,SAAS,IACT,eAAe,MACX,CACJ,IAAMC,GAAA,EAAYX,EAAAA,OAAAA,CAA0B,IAAI,EAqBhD,OAnBA,EAAAS,EAAA,UAAA,KAAgB,EAgBd,SAf6B,CAC3B,GAAIE,EAAU,QACZ,GAAI,CACF,GAAM,CAAE,QAASC,GAAc,MAAM,OAAO,aAC5CA,EAAUD,EAAU,QAASE,EAAO,CAC1B,SACD,QACC,SACM,cAChB,CAAC,CACH,OAAS,EAAG,CACV,QAAQ,MAAM,4BAA6B,CAAC,CAC9C,CAEJ,EACA,CAAS,CACX,EAAG,CAACA,EAAOC,EAAQC,EAAOC,EAAQC,CAAY,CAAC,GAG7C,EAAAT,EAAA,KAAA,CAACP,EAAAA,KAAD,CAAM,UAAU,0CAAhB,SAAA,EACE,EAAAO,EAAA,KAAA,CAACN,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAA,SAAYe,CAAiB,CAAA,EAC5BC,IAAe,EAAAX,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAA,SAAkBe,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAX,EAAA,IAAA,CAACH,EAAAA,YAAD,CAAa,UAAU,uCACrB,UAAA,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACb,UAAA,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,IAAKG,CAAY,CAAA,CACtB,CAAA,CACM,CAAA,CACT,C,EAEV,E"}

package/dist/tools/components/barcode/BarcodeGenerator.d.cts

@@ -1,38 +1,52 @@
 import { default as React } from 'react';
 /**
- * バーコード生成器のプロップス
+ * Host inputs and presentation settings for BarcodeGenerator.
+ * @see BarcodeGenerator
  */
 interface BarcodeGeneratorProps {
-    /** エンコードする値 */
+    /**
+     * Text passed unchanged to the encoder; format/value validity is determined by the optional encoding library.
+     */
     value: string;
-    /** バーコードフォーマット（CODE128, EAN13, UPC等） */
+    /**
+     * jsbarcode format name; defaults to CODE128. Supply values valid for that format; errors are logged, not returned.
+     */
     format?: string;
-    /** カードのタイトル */
+    /**
+     * Card heading.
+     * @defaultValue Barcode
+     */
     title?: string;
-    /** カードの説明 */
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
-    /** バーの幅（ピクセル） */
+    /**
+     * Width of each barcode bar in jsbarcode pixel units; defaults to 2.
+     */
     width?: number;
-    /** バーコードの高さ */
+    /**
+     * Barcode height in jsbarcode pixel units; defaults to 100.
+     */
     height?: number;
-    /** 値を下部に表示するか */
+    /**
+     * Displays encoded text below the bars; defaults to true.
+     */
     displayValue?: boolean;
 }
 /**
- * バーコード生成コンポーネント
- *
- * 商品コードなどのバーコードを生成して表示します。
- * CODE128、EAN13、UPC、CODE39などの形式に対応。
- *
+ * Draws a barcode onto a canvas after loading jsbarcode in the client effect.
+ * @param props - Encoded value, barcode format and card/drawing settings; see BarcodeGeneratorProps. Wrapper defaults: format='CODE128', title='Barcode', width=2, height=100, displayValue=true.
+ * @returns The rendered BarcodeGenerator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional jsbarcode peer. Rendering requires a browser canvas; server rendering produces the card/canvas without drawing. Supported format/value constraints come from jsbarcode and are not validated here. Drawing/import failures are caught and logged, with no error UI or completion callback. No cleanup cancels an in-flight dynamic import.
  * @example
  * ```tsx
  * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';
+ * import '@alneas/appkit-react/styles';
  *
- * <BarcodeGenerator
- *   value="4901234567890"
- *   format="EAN13"
- *   title="商品バーコード"
- * />
+ * export function Example() {
+ *   return (<BarcodeGenerator value="APPKIT-001" format="CODE128" title="Document barcode" />);
+ * }
  * ```
  */
 export declare const BarcodeGenerator: React.FC<BarcodeGeneratorProps>;

package/dist/tools/components/barcode/BarcodeGenerator.d.ts

@@ -1,38 +1,52 @@
 import { default as React } from 'react';
 /**
- * バーコード生成器のプロップス
+ * Host inputs and presentation settings for BarcodeGenerator.
+ * @see BarcodeGenerator
  */
 interface BarcodeGeneratorProps {
-    /** エンコードする値 */
+    /**
+     * Text passed unchanged to the encoder; format/value validity is determined by the optional encoding library.
+     */
     value: string;
-    /** バーコードフォーマット（CODE128, EAN13, UPC等） */
+    /**
+     * jsbarcode format name; defaults to CODE128. Supply values valid for that format; errors are logged, not returned.
+     */
     format?: string;
-    /** カードのタイトル */
+    /**
+     * Card heading.
+     * @defaultValue Barcode
+     */
     title?: string;
-    /** カードの説明 */
+    /**
+     * Optional supporting card text; omitted means no description.
+     */
     description?: string;
-    /** バーの幅（ピクセル） */
+    /**
+     * Width of each barcode bar in jsbarcode pixel units; defaults to 2.
+     */
     width?: number;
-    /** バーコードの高さ */
+    /**
+     * Barcode height in jsbarcode pixel units; defaults to 100.
+     */
     height?: number;
-    /** 値を下部に表示するか */
+    /**
+     * Displays encoded text below the bars; defaults to true.
+     */
     displayValue?: boolean;
 }
 /**
- * バーコード生成コンポーネント
- *
- * 商品コードなどのバーコードを生成して表示します。
- * CODE128、EAN13、UPC、CODE39などの形式に対応。
- *
+ * Draws a barcode onto a canvas after loading jsbarcode in the client effect.
+ * @param props - Encoded value, barcode format and card/drawing settings; see BarcodeGeneratorProps. Wrapper defaults: format='CODE128', title='Barcode', width=2, height=100, displayValue=true.
+ * @returns The rendered BarcodeGenerator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional jsbarcode peer. Rendering requires a browser canvas; server rendering produces the card/canvas without drawing. Supported format/value constraints come from jsbarcode and are not validated here. Drawing/import failures are caught and logged, with no error UI or completion callback. No cleanup cancels an in-flight dynamic import.
  * @example
  * ```tsx
  * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';
+ * import '@alneas/appkit-react/styles';
  *
- * <BarcodeGenerator
- *   value="4901234567890"
- *   format="EAN13"
- *   title="商品バーコード"
- * />
+ * export function Example() {
+ *   return (<BarcodeGenerator value="APPKIT-001" format="CODE128" title="Document barcode" />);
+ * }
  * ```
  */
 export declare const BarcodeGenerator: React.FC<BarcodeGeneratorProps>;

package/dist/tools/components/barcode/BarcodeGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeGenerator.js","names":["BarcodeGenerator","canvasRef","useRef","useEffect","JsBarcode","value","format","width","height","displayValue","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent"],"sources":["../../../../src/tools/components/barcode/BarcodeGenerator.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * バーコード生成器のプロップス\n */\ninterface BarcodeGeneratorProps {\n  /** エンコードする値 */\n  value: string;\n  /** バーコードフォーマット（CODE128, EAN13, UPC等） */\n  format?: string;\n  /** カードのタイトル */\n  title?: string;\n  /** カードの説明 */\n  description?: string;\n  /** バーの幅（ピクセル） */\n  width?: number;\n  /** バーコードの高さ */\n  height?: number;\n  /** 値を下部に表示するか */\n  displayValue?: boolean;\n}\n\n/**\n * バーコード生成コンポーネント\n *\n * 商品コードなどのバーコードを生成して表示します。\n * CODE128、EAN13、UPC、CODE39などの形式に対応。\n *\n * @example\n * ```tsx\n * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';\n *\n * <BarcodeGenerator\n *   value=\"4901234567890\"\n *   format=\"EAN13\"\n *   title=\"商品バーコード\"\n * />\n * ```\n */\nexport const BarcodeGenerator: React.FC<BarcodeGeneratorProps> = ({\n  value,\n  format = 'CODE128',\n  title = 'Barcode',\n  description,\n  width = 2,\n  height = 100,\n  displayValue = true,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const generate = async () => {\n      if (canvasRef.current) {\n        try {\n          const { default: JsBarcode } = await import('jsbarcode');\n          JsBarcode(canvasRef.current, value, {\n            format: format,\n            width: width,\n            height: height,\n            displayValue: displayValue,\n          });\n        } catch (e) {\n          console.error('Barcode generation failed', e);\n        }\n      }\n    };\n    generate();\n  }, [value, format, width, height, displayValue]);\n\n  return (\n    <Card className='w-fit mx-auto text-center min-w-[300px]'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        <div className='bg-white p-4 rounded-lg'>\n          <canvas ref={canvasRef} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":";;;;;AAyCA,IAAaA,KAAqD,EAChE,UACA,YAAS,WACT,WAAQ,WACR,gBACA,WAAQ,GACR,YAAS,KACT,kBAAe,SACX;CACJ,IAAMC,IAAYC,EAA0B,IAAI;CAqBhD,OAnBAC,QAAgB;EAgBd,aAf6B;GAC3B,IAAIF,EAAU,SACZ,IAAI;IACF,IAAM,EAAE,SAASG,MAAc,MAAM,OAAO;IAC5C,EAAUH,EAAU,SAASI,GAAO;KAC1B;KACD;KACC;KACM;IAChB,CAAC;GACH,SAAS,GAAG;IACV,QAAQ,MAAM,6BAA6B,CAAC;GAC9C;EAEJ,EACA,CAAS;CACX,GAAG;EAACA;EAAOC;EAAQC;EAAOC;EAAQC;CAAY,CAAC,GAG7C,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD;GAAa,WAAU;GACrB,UAAA,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,UAAD,EAAQ,KAAKf,EAAY,CAAA;GACtB,CAAA;EACM,CAAA,CACT;;AAEV"}
+{"version":3,"file":"BarcodeGenerator.js","names":["BarcodeGenerator","canvasRef","useRef","useEffect","JsBarcode","value","format","width","height","displayValue","Card","CardHeader","CardTitle","title","description","CardDescription","CardContent"],"sources":["../../../../src/tools/components/barcode/BarcodeGenerator.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * Host inputs and presentation settings for BarcodeGenerator.\n * @see BarcodeGenerator\n */\ninterface BarcodeGeneratorProps {\n  /**\n   * Text passed unchanged to the encoder; format/value validity is determined by the optional encoding library.\n   */\n  value: string;\n  /**\n   * jsbarcode format name; defaults to CODE128. Supply values valid for that format; errors are logged, not returned.\n   */\n  format?: string;\n  /**\n   * Card heading.\n   * @defaultValue Barcode\n   */\n  title?: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n  /**\n   * Width of each barcode bar in jsbarcode pixel units; defaults to 2.\n   */\n  width?: number;\n  /**\n   * Barcode height in jsbarcode pixel units; defaults to 100.\n   */\n  height?: number;\n  /**\n   * Displays encoded text below the bars; defaults to true.\n   */\n  displayValue?: boolean;\n}\n\n/**\n * Draws a barcode onto a canvas after loading jsbarcode in the client effect.\n * @param props - Encoded value, barcode format and card/drawing settings; see BarcodeGeneratorProps. Wrapper defaults: format='CODE128', title='Barcode', width=2, height=100, displayValue=true.\n * @returns The rendered BarcodeGenerator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional jsbarcode peer. Rendering requires a browser canvas; server rendering produces the card/canvas without drawing. Supported format/value constraints come from jsbarcode and are not validated here. Drawing/import failures are caught and logged, with no error UI or completion callback. No cleanup cancels an in-flight dynamic import.\n * @example\n * ```tsx\n * import { BarcodeGenerator } from '@alneas/appkit-react/tools/barcode';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<BarcodeGenerator value=\"APPKIT-001\" format=\"CODE128\" title=\"Document barcode\" />);\n * }\n * ```\n */\nexport const BarcodeGenerator: React.FC<BarcodeGeneratorProps> = ({\n  value,\n  format = 'CODE128',\n  title = 'Barcode',\n  description,\n  width = 2,\n  height = 100,\n  displayValue = true,\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    const generate = async () => {\n      if (canvasRef.current) {\n        try {\n          const { default: JsBarcode } = await import('jsbarcode');\n          JsBarcode(canvasRef.current, value, {\n            format: format,\n            width: width,\n            height: height,\n            displayValue: displayValue,\n          });\n        } catch (e) {\n          console.error('Barcode generation failed', e);\n        }\n      }\n    };\n    generate();\n  }, [value, format, width, height, displayValue]);\n\n  return (\n    <Card className='w-fit mx-auto text-center min-w-[300px]'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        <div className='bg-white p-4 rounded-lg'>\n          <canvas ref={canvasRef} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":";;;;;AAuDA,IAAaA,KAAqD,EAChE,UACA,YAAS,WACT,WAAQ,WACR,gBACA,WAAQ,GACR,YAAS,KACT,kBAAe,SACX;CACJ,IAAMC,IAAYC,EAA0B,IAAI;CAqBhD,OAnBAC,QAAgB;EAgBd,aAf6B;GAC3B,IAAIF,EAAU,SACZ,IAAI;IACF,IAAM,EAAE,SAASG,MAAc,MAAM,OAAO;IAC5C,EAAUH,EAAU,SAASI,GAAO;KAC1B;KACD;KACC;KACM;IAChB,CAAC;GACH,SAAS,GAAG;IACV,QAAQ,MAAM,6BAA6B,CAAC;GAC9C;EAEJ,EACA,CAAS;CACX,GAAG;EAACA;EAAOC;EAAQC;EAAOC;EAAQC;CAAY,CAAC,GAG7C,kBAACC,GAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD,EAAA,UAAYC,EAAiB,CAAA,GAC5BC,KAAe,kBAACC,GAAD,EAAA,UAAkBD,EAA6B,CAAA,CACrD,EAAA,CAAA,GACZ,kBAACE,GAAD;GAAa,WAAU;GACrB,UAAA,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,UAAD,EAAQ,KAAKf,EAAY,CAAA;GACtB,CAAA;EACM,CAAA,CACT;;AAEV"}

package/dist/tools/components/barcode/QRCodeGenerator.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/components/ui/card.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=({value:e,title:i=`Scan to Check In`,description:a})=>{let[o,s]=r.default.useState(null);return r.default.useEffect(()=>{import(`react-qr-code`).then(e=>s(()=>e.default))},[]),(0,n.jsxs)(t.Card,{className:`w-[300px] mx-auto text-center`,children:[(0,n.jsxs)(t.CardHeader,{children:[(0,n.jsx)(t.CardTitle,{children:i}),a&&(0,n.jsx)(t.CardDescription,{children:a})]}),(0,n.jsx)(t.CardContent,{className:`flex justify-center p-6 rounded-b-lg`,children:(0,n.jsx)(`div`,{className:`bg-white p-4 rounded-lg flex items-center justify-center min-h-[200px]`,children:o?(0,n.jsx)(o,{value:e,size:200,style:{height:`auto`,maxWidth:`100%`,width:`100%`},viewBox:`0 0 256 256`}):(0,n.jsx)(`div`,{className:`text-muted-foreground italic`,children:`Loading QR...`})})})]})};exports.QRCodeGenerator=i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/components/ui/card.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=({value:e,title:i=`Scan to Check In`,description:a})=>{let[o,s]=r.default.useState(null);return r.default.useEffect(()=>{import(`react-qr-code`).then(e=>s(()=>e.default))},[]),(0,n.jsxs)(t.Card,{className:`w-[300px] mx-auto text-center`,children:[(0,n.jsxs)(t.CardHeader,{children:[(0,n.jsx)(t.CardTitle,{children:i}),a&&(0,n.jsx)(t.CardDescription,{children:a})]}),(0,n.jsx)(t.CardContent,{className:`flex justify-center p-6 rounded-b-lg`,children:(0,n.jsx)(`div`,{className:`bg-white p-4 rounded-lg flex items-center justify-center min-h-[200px]`,children:o?(0,n.jsx)(o,{value:e,size:200,style:{height:`auto`,maxWidth:`100%`,width:`100%`},viewBox:`0 0 256 256`}):(0,n.jsx)(`div`,{className:`text-neutral-700 italic`,children:`Loading QR...`})})})]})};exports.QRCodeGenerator=i;
 //# sourceMappingURL=QRCodeGenerator.cjs.map

package/dist/tools/components/barcode/QRCodeGenerator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QRCodeGenerator.cjs","names":["React","Card","CardHeader","CardTitle","CardDescription","CardContent","require_runtime","require_ui_components_ui_card","react_jsx_runtime","react","QRCodeGenerator","QRCodeComponent","setQRCodeComponent","m","title","description"],"sources":["../../../../src/tools/components/barcode/QRCodeGenerator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * QRコード生成器のプロップス\n */\ninterface QRCodeGeneratorProps {\n  /** エンコードする値（URL、テキスト等） */\n  value: string;\n  /** カードのタイトル */\n  title?: string;\n  /** カードの説明 */\n  description?: string;\n}\n\n/**\n * QRコード生成コンポーネント\n *\n * URLやテキストからQRコードを生成して表示します。\n *\n * @example\n * ```tsx\n * import { QRCodeGenerator } from '@alneas/appkit-react/tools/barcode';\n *\n * <QRCodeGenerator\n *   value=\"https://example.com\"\n *   title=\"サイトにアクセス\"\n *   description=\"スキャンしてサイトを開く\"\n * />\n * ```\n */\nexport const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({\n  value,\n  title = 'Scan to Check In',\n  description,\n}) => {\n  const [QRCodeComponent, setQRCodeComponent] = React.useState<React.ComponentType<{\n    value: string;\n    size?: number;\n    style?: React.CSSProperties;\n    viewBox?: string;\n  }> | null>(null);\n\n  React.useEffect(() => {\n    import('react-qr-code').then((m) => setQRCodeComponent(() => m.default));\n  }, []);\n\n  return (\n    <Card className='w-[300px] mx-auto text-center'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        <div className='bg-white p-4 rounded-lg flex items-center justify-center min-h-[200px]'>\n          {QRCodeComponent ? (\n            <QRCodeComponent\n              value={value}\n              size={200}\n              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}\n              viewBox={`0 0 256 256`}\n            />\n          ) : (\n            <div className='text-muted-foreground italic'>Loading QR...</div>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":"A,kQAgCA,IAAaU,GAAmD,CAC9D,QACA,QAAQ,mBACR,iBACI,CACJ,GAAM,CAACC,EAAiBC,GAAsBZ,EAAAA,QAAM,SAKzC,IAAI,EAMf,OAJAS,EAAA,QAAM,cAAgB,CACpB,OAAO,gBAAgB,CAAC,KAAM,GAAMG,MAAyBC,EAAE,OAAO,CAAC,CACzE,EAAG,CAAC,CAAC,GAGH,EAAAL,EAAA,KAAA,CAACP,EAAAA,KAAD,CAAM,UAAU,gCAAhB,SAAA,EACE,EAAAO,EAAA,KAAA,CAACN,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAA,SAAYW,CAAiB,CAAA,EAC5BC,IAAe,EAAAP,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAA,SAAkBW,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAP,EAAA,IAAA,CAACH,EAAAA,YAAD,CAAa,UAAU,uCACrB,UAAA,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yEACZ,SAAAG,GACC,EAAAH,EAAA,IAAA,CAACG,EAAD,CACS,QACP,KAAM,IACN,MAAO,CAAE,OAAQ,OAAQ,SAAU,OAAQ,MAAO,MAAO,EACzD,QAAS,aACV,CAAA,GAED,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+BAA+B,SAAA,eAAkB,CAAA,CAE/D,CAAA,CACM,CAAA,CACT,C,EAEV,E"}
+{"version":3,"file":"QRCodeGenerator.cjs","names":["React","Card","CardHeader","CardTitle","CardDescription","CardContent","require_runtime","require_ui_components_ui_card","react_jsx_runtime","react","QRCodeGenerator","QRCodeComponent","setQRCodeComponent","m","title","description"],"sources":["../../../../src/tools/components/barcode/QRCodeGenerator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';\n\n/**\n * Host inputs and presentation settings for QRCodeGenerator.\n * @see QRCodeGenerator\n */\ninterface QRCodeGeneratorProps {\n  /**\n   * Text passed unchanged to the encoder; format/value validity is determined by the optional encoding library.\n   */\n  value: string;\n  /**\n   * Card heading.\n   * @defaultValue Scan to Check In\n   */\n  title?: string;\n  /**\n   * Optional supporting card text; omitted means no description.\n   */\n  description?: string;\n}\n\n/**\n * Loads react-qr-code on the client and renders a fixed-size QR code inside a card.\n * @param props - Encoded value and optional card heading/description; see QRCodeGeneratorProps. Wrapper defaults: title='Scan to Check In'.\n * @returns The rendered QRCodeGenerator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS and install the optional react-qr-code peer. The client effect loads the QR component; SSR and initial render show Loading QR.... The inner QR size is 200 with a 256 viewBox and responsive styling. Dynamic-import rejection is not caught or displayed by this wrapper. There is no download/export API or callback.\n * @example\n * ```tsx\n * import { QRCodeGenerator } from '@alneas/appkit-react/tools/barcode';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<QRCodeGenerator value=\"https://example.com/document\" title=\"Open document\" />);\n * }\n * ```\n */\nexport const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({\n  value,\n  title = 'Scan to Check In',\n  description,\n}) => {\n  const [QRCodeComponent, setQRCodeComponent] = React.useState<React.ComponentType<{\n    value: string;\n    size?: number;\n    style?: React.CSSProperties;\n    viewBox?: string;\n  }> | null>(null);\n\n  React.useEffect(() => {\n    import('react-qr-code').then((m) => setQRCodeComponent(() => m.default));\n  }, []);\n\n  return (\n    <Card className='w-[300px] mx-auto text-center'>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className='flex justify-center p-6 rounded-b-lg'>\n        {/* Keep the QR and loading label on the same scanner-friendly white surface. */}\n        <div className='bg-white p-4 rounded-lg flex items-center justify-center min-h-[200px]'>\n          {QRCodeComponent ? (\n            <QRCodeComponent\n              value={value}\n              size={200}\n              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}\n              viewBox={`0 0 256 256`}\n            />\n          ) : (\n            <div className='text-neutral-700 italic'>Loading QR...</div>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"mappings":"A,kQAuCA,IAAaU,GAAmD,CAC9D,QACA,QAAQ,mBACR,iBACI,CACJ,GAAM,CAACC,EAAiBC,GAAsBZ,EAAAA,QAAM,SAKzC,IAAI,EAMf,OAJAS,EAAA,QAAM,cAAgB,CACpB,OAAO,gBAAgB,CAAC,KAAM,GAAMG,MAAyBC,EAAE,OAAO,CAAC,CACzE,EAAG,CAAC,CAAC,GAGH,EAAAL,EAAA,KAAA,CAACP,EAAAA,KAAD,CAAM,UAAU,gCAAhB,SAAA,EACE,EAAAO,EAAA,KAAA,CAACN,EAAAA,WAAD,CAAA,SAAA,EACE,EAAAM,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAA,SAAYW,CAAiB,CAAA,EAC5BC,IAAe,EAAAP,EAAA,IAAA,CAACJ,EAAAA,gBAAD,CAAA,SAAkBW,CAA6B,CAAA,CACrD,CAAA,CAAA,GACZ,EAAAP,EAAA,IAAA,CAACH,EAAAA,YAAD,CAAa,UAAU,uCAErB,UAAA,EAAAG,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yEACZ,SAAAG,GACC,EAAAH,EAAA,IAAA,CAACG,EAAD,CACS,QACP,KAAM,IACN,MAAO,CAAE,OAAQ,OAAQ,SAAU,OAAQ,MAAO,MAAO,EACzD,QAAS,aACV,CAAA,GAED,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BAA0B,SAAA,eAAkB,CAAA,CAE1D,CAAA,CACM,CAAA,CACT,C,EAEV,E"}