@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/tools/components/sidebar/SmartSidebar.d.ts

@@ -1,83 +1,81 @@
 import * as React from 'react';
 /**
- * サイドバーのアイテム
+ * A navigation item rendered by {@link SmartSidebar}.
+ * @see SmartSidebar
  */
 export interface SmartSidebarItem {
-    /** ラベル */
+    /** Visible item label; also used in collapsed tooltips. */
     label: string;
-    /** アイコン */
+    /** Icon rendered in expanded and collapsed layouts. */
     icon: React.ReactNode;
-    /** パス */
+    /** Opaque destination passed to onNavigate; compared exactly with activePath. */
     path: string;
-    /** 無効化 */
+    /** Disables item activation when true; omitted means enabled. */
     disabled?: boolean;
-    /** バッジ等の追加コンテンツ */
+    /** Additional content shown beside the expanded item label. */
     extra?: React.ReactNode;
 }
 /**
  * サイドバーのグループ
  */
 export interface SmartSidebarGroup {
-    /** グループタイトル */
+    /** Optional heading; omitted headings render no group title. */
     title?: string;
-    /** アイテム */
+    /** Items in display order. */
     items: SmartSidebarItem[];
-    /** 折りたたみ可能か */
+    /** Allows the expanded sidebar heading to toggle between all items and a two-item preview. */
     collapsible?: boolean;
-    /** 初期状態で折りたたまれているか */
+    /** Initial two-item group preview state; defaults to false. Later prop changes do not reset local state. */
     defaultCollapsed?: boolean;
 }
 /**
  * サイドバーのプロップス
  */
 export interface SidebarProps {
-    /** 追加CSS */
+    /** Additional classes for the sidebar root. */
     className?: string;
-    /** ナビゲーショングループ */
+    /** Groups in display order. */
     groups: SmartSidebarGroup[];
-    /** フッターアイテム */
+    /** Optional navigation items pinned below the scrollable groups. */
     footerItems?: SmartSidebarItem[];
-    /** 現在のパス */
+    /** Exact path used to highlight active items; no item is active when omitted. */
     activePath?: string;
-    /** ナビゲーション発火 */
+    /** Called with the activated item path; the host performs routing. */
     onNavigate?: (path: string) => void;
-    /** 折りたたみ状態 */
+    /** Controlled whole-sidebar collapse state; defaults to false. */
     collapsed?: boolean;
-    /** 折りたたみトグル */
+    /** Called by the toggle button; the host must update collapsed. Omitted hides the button. */
     onToggleCollapse?: () => void;
-    /** カスタムヘッダー */
+    /** Renders header content with the current collapsed state. */
     header?: (collapsed: boolean) => React.ReactNode;
-    /** カスタムフッター */
+    /** Renders footer content with the current collapsed state. */
     sidebarFooter?: (collapsed: boolean) => React.ReactNode;
 }
 /**
- * サイドバーコンポーネント
- *
- * 折りたたみ可能なナビゲーションサイドバー。
- * グループ化されたアイテム、アイコン、ツールチップに対応。
- *
+ * Renders grouped navigation with controlled sidebar collapse and local group collapse.
+ * @param props - Navigation items, controlled selection/collapse and render callbacks; see {@link SidebarProps}.
+ * @returns The sidebar element, including its own tooltip provider.
+ * @remarks Import Appkit CSS. ThemeProvider enables reactive spacing density; without one,
+ * the theme context uses normal spacing. The host owns routing
+ * and updates activePath/collapsed. Sidebar from the same entry is a compound namespace;
+ * use SmartSidebar for this groups-based API. CSS variables --sidebar-width and
+ * --sidebar-collapsed-width fall back to 16rem and 4rem respectively.
  * @example
  * ```tsx
- * import { Sidebar } from '@alneas/appkit-react/tools/sidebar';
- * import { Home, Settings } from 'lucide-react';
- *
- * const groups = [
- *   {
- *     title: 'メイン',
- *     items: [
- *       { label: 'ホーム', icon: <Home />, path: '/' },
- *       { label: '設定', icon: <Settings />, path: '/settings' },
- *     ],
- *   },
- * ];
+ * import { useState } from 'react';
+ * import { SmartSidebar } from '@alneas/appkit-react/tools/sidebar';
+ * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';
+ * import '@alneas/appkit-react/styles';
  *
- * <Sidebar
- *   groups={groups}
- *   activePath={location.pathname}
- *   onNavigate={(path) => navigate(path)}
- *   collapsed={isCollapsed}
- *   onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
- * />
+ * export function Navigation() {
+ *   const [path, setPath] = useState('/');
+ *   const [collapsed, setCollapsed] = useState(false);
+ *   return <ThemeProvider><SmartSidebar
+ *     groups={[{ title: 'Main', items: [{ label: 'Home', icon: <span>H</span>, path: '/' }] }]}
+ *     activePath={path} onNavigate={setPath} collapsed={collapsed}
+ *     onToggleCollapse={() => setCollapsed(value => !value)}
+ *   /></ThemeProvider>;
+ * }
  * ```
  */
 export declare function SmartSidebar({ className, groups, footerItems, activePath, onNavigate, collapsed, onToggleCollapse, header, sidebarFooter, }: SidebarProps): React.JSX.Element;

package/dist/tools/components/sidebar/SmartSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartSidebar.js","names":["React","React$1","sidebarDensity","SmartSidebar","useTheme","density","spacingTheme","handleNavigate","onNavigate","path","TooltipProvider","cn","collapsed","className","header","onToggleCollapse","Button","PanelLeft","ScrollArea","groups","SidebarGroupSection","index","footerItems","SidebarItemRow","activePath","item","sidebarFooter","groupCollapsed","setGroupCollapsed","group","isGroupCollapsible","toggleGroup","prev","visibleItems","Separator","Tooltip","TooltipTrigger","buttonVariants","isActive","itemHeight","TooltipContent"],"sources":["../../../../src/tools/components/sidebar/SmartSidebar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\nimport { Button, buttonVariants } from '../ui/button';\nimport { ScrollArea } from '../ui/scroll-area';\nimport { Separator } from '../ui/separator';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';\nimport { PanelLeft } from 'lucide-react';\nimport { useTheme, type SpacingTheme } from '../theme/theme-context';\n\nconst sidebarDensity: Record<SpacingTheme, {\n  groupGap: string;\n  itemGap: string;\n  itemHeight: string;\n}> = {\n  compact: { groupGap: 'gap-1', itemGap: 'gap-0', itemHeight: 'h-8' },\n  normal: { groupGap: 'gap-2', itemGap: 'gap-1', itemHeight: 'h-9' },\n  comfortable: { groupGap: 'gap-4', itemGap: 'gap-2', itemHeight: 'h-11' },\n};\n\n/**\n * サイドバーのアイテム\n */\nexport interface SmartSidebarItem {\n  /** ラベル */\n  label: string;\n  /** アイコン */\n  icon: React.ReactNode;\n  /** パス */\n  path: string;\n  /** 無効化 */\n  disabled?: boolean;\n  /** バッジ等の追加コンテンツ */\n  extra?: React.ReactNode;\n}\n\n/**\n * サイドバーのグループ\n */\nexport interface SmartSidebarGroup {\n  /** グループタイトル */\n  title?: string;\n  /** アイテム */\n  items: SmartSidebarItem[];\n  /** 折りたたみ可能か */\n  collapsible?: boolean;\n  /** 初期状態で折りたたまれているか */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * サイドバーのプロップス\n */\nexport interface SidebarProps {\n  /** 追加CSS */\n  className?: string;\n  /** ナビゲーショングループ */\n  groups: SmartSidebarGroup[];\n  /** フッターアイテム */\n  footerItems?: SmartSidebarItem[];\n  /** 現在のパス */\n  activePath?: string;\n  /** ナビゲーション発火 */\n  onNavigate?: (path: string) => void;\n  /** 折りたたみ状態 */\n  collapsed?: boolean;\n  /** 折りたたみトグル */\n  onToggleCollapse?: () => void;\n  /** カスタムヘッダー */\n  header?: (collapsed: boolean) => React.ReactNode;\n  /** カスタムフッター */\n  sidebarFooter?: (collapsed: boolean) => React.ReactNode;\n}\n\n/**\n * サイドバーコンポーネント\n *\n * 折りたたみ可能なナビゲーションサイドバー。\n * グループ化されたアイテム、アイコン、ツールチップに対応。\n *\n * @example\n * ```tsx\n * import { Sidebar } from '@alneas/appkit-react/tools/sidebar';\n * import { Home, Settings } from 'lucide-react';\n *\n * const groups = [\n *   {\n *     title: 'メイン',\n *     items: [\n *       { label: 'ホーム', icon: <Home />, path: '/' },\n *       { label: '設定', icon: <Settings />, path: '/settings' },\n *     ],\n *   },\n * ];\n *\n * <Sidebar\n *   groups={groups}\n *   activePath={location.pathname}\n *   onNavigate={(path) => navigate(path)}\n *   collapsed={isCollapsed}\n *   onToggleCollapse={() => setIsCollapsed(!isCollapsed)}\n * />\n * ```\n */\nexport function SmartSidebar({\n  className,\n  groups,\n  footerItems,\n  activePath,\n  onNavigate,\n  collapsed = false,\n  onToggleCollapse,\n  header,\n  sidebarFooter,\n}: SidebarProps) {\n  const { spacingTheme } = useTheme();\n  const density = sidebarDensity[spacingTheme];\n  const handleNavigate = (path: string) => {\n    if (onNavigate) {\n      onNavigate(path);\n    }\n  };\n\n  // Determine width based on collapsed state\n  // w-64 (16rem) -> expanded\n  // w-16 (4rem) -> collapsed\n  // You can adjust these values or make them configurable if needed\n  const widthClass = collapsed\n    ? 'w-[var(--sidebar-collapsed-width,4rem)]'\n    : 'w-[var(--sidebar-width,16rem)]';\n\n  return (\n    <TooltipProvider>\n      <div\n        className={cn(\n          'flex flex-col h-full bg-muted/20 border-r border-border transition-all duration-300 ease-in-out',\n          widthClass,\n          className,\n        )}\n      >\n        {/* Combined Header and Toggle Section */}\n        <div\n          className={cn(\n            'flex-none flex items-center h-14 px-3 gap-2',\n            collapsed ? 'justify-center' : 'justify-between',\n          )}\n        >\n          {/* Custom Header Content */}\n          {header && (\n            <div\n              className={cn(\n                'overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out',\n                collapsed && onToggleCollapse\n                  ? 'max-w-0 opacity-0 flex-none'\n                  : 'max-w-full flex-1 opacity-100',\n              )}\n            >\n              {header(collapsed)}\n            </div>\n          )}\n\n          {/* Toggle Button */}\n          {onToggleCollapse && (\n            <Button\n              variant='ghost'\n              size='icon'\n              className='h-8 w-8 shrink-0'\n              onClick={onToggleCollapse}\n            >\n              <PanelLeft size={16} />\n            </Button>\n          )}\n        </div>\n\n        <ScrollArea className='flex-1 py-2 min-h-0'>\n          <nav className={cn('flex flex-col px-2', density.groupGap)}>\n            {groups.map((group, index) => (\n              <SidebarGroupSection\n                key={index}\n                group={group}\n                collapsed={collapsed}\n                activePath={activePath}\n                onNavigate={handleNavigate}\n                density={density}\n              />\n            ))}\n          </nav>\n        </ScrollArea>\n\n        {/* Footer Items Section (Sticky Bottom) */}\n        {footerItems && footerItems.length > 0 && (\n          <div className='flex-none mt-auto p-2 border-t border-border bg-background/50 backdrop-blur-sm'>\n            <ul className={cn('flex flex-col', density.itemGap)}>\n              {footerItems.map((item, index) => (\n                <SidebarItemRow\n                  key={index}\n                  item={item}\n                  collapsed={collapsed}\n                  isActive={activePath === item.path}\n                  onNavigate={handleNavigate}\n                  itemHeight={density.itemHeight}\n                />\n              ))}\n            </ul>\n          </div>\n        )}\n\n        {/* Custom Footer Section */}\n        {sidebarFooter && (\n          <div\n            className={cn(\n              'flex-none p-4 border-t border-border bg-background/50 backdrop-blur-sm',\n              collapsed ? 'flex justify-center' : '',\n            )}\n          >\n            {sidebarFooter(collapsed)}\n          </div>\n        )}\n      </div>\n    </TooltipProvider>\n  );\n}\n\nfunction SidebarGroupSection({\n  group,\n  collapsed,\n  activePath,\n  onNavigate,\n  density,\n}: {\n  group: SmartSidebarGroup;\n  collapsed: boolean;\n  activePath?: string;\n  onNavigate: (path: string) => void;\n  density: (typeof sidebarDensity)[SpacingTheme];\n}) {\n  const [groupCollapsed, setGroupCollapsed] = React.useState(\n    group.defaultCollapsed ?? false\n  );\n\n  const isGroupCollapsible = group.collapsible && !collapsed;\n\n  const toggleGroup = React.useCallback(() => {\n    if (isGroupCollapsible) setGroupCollapsed(prev => !prev);\n  }, [isGroupCollapsible]);\n\n  // If no items, don't render group\n  if (!group.items?.length) return null;\n\n  const visibleItems = isGroupCollapsible && groupCollapsed\n    ? group.items.slice(0, 2)\n    : group.items;\n\n  return (\n    <div className={cn('flex flex-col', density.itemGap)}>\n      {/* Group Title Area - Fixed Height for smooth transition */}\n      {group.title && (\n        <div\n          className={cn(\n            'h-7 flex items-center relative px-2',\n            isGroupCollapsible && 'cursor-pointer hover:text-primary transition-colors',\n          )}\n          onClick={toggleGroup}\n        >\n          {/* Title Text */}\n          <h4\n            className={cn(\n              'text-sm font-semibold text-primary/80 uppercase tracking-wider overflow-hidden text-ellipsis whitespace-nowrap absolute left-2 right-2 transition-all duration-300 ease-in-out',\n              collapsed ? 'opacity-0 translate-x-[-10px]' : 'opacity-100 translate-x-0',\n            )}\n          >\n            {group.title}\n            {isGroupCollapsible && (\n              <span className='ml-1.5 text-xs opacity-60'>\n                {groupCollapsed ? '▸' : '▾'}\n              </span>\n            )}\n          </h4>\n\n          {/* Collapsed Separator */}\n          <div\n            className={cn(\n              'absolute left-0 right-0 top-1/2 -translate-y-1/2 flex justify-center transition-all duration-300',\n              collapsed ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            <Separator className='w-8 opacity-50' />\n          </div>\n        </div>\n      )}\n\n      <ul className={cn('flex flex-col', density.itemGap)}>\n        {visibleItems.map((item, index) => (\n          <SidebarItemRow\n            key={index}\n            item={item}\n            collapsed={collapsed}\n            isActive={activePath === item.path}\n            onNavigate={onNavigate}\n            itemHeight={density.itemHeight}\n          />\n        ))}\n        {isGroupCollapsible && groupCollapsed && group.items.length > 2 && (\n          <li>\n            <button\n              onClick={(e) => { e.stopPropagation(); setGroupCollapsed(false); }}\n              className='flex w-full items-center justify-center h-8 text-xs text-muted-foreground hover:text-primary transition-colors'\n            >\n              +{group.items.length - 2} more\n            </button>\n          </li>\n        )}\n      </ul>\n    </div>\n  );\n}\n\nfunction SidebarItemRow({\n  item,\n  collapsed,\n  isActive,\n  onNavigate,\n  itemHeight,\n}: {\n  item: SmartSidebarItem;\n  collapsed: boolean;\n  isActive: boolean;\n  onNavigate: (path: string) => void;\n  itemHeight: string;\n}) {\n  return (\n    <li>\n      <Tooltip>\n        <TooltipTrigger\n          className={cn(\n            buttonVariants({ variant: isActive ? 'secondary' : 'ghost' }),\n            'flex w-full items-center transition-all duration-300',\n            itemHeight,\n            collapsed ? 'justify-center px-1' : 'justify-start px-3',\n            isActive && 'bg-primary/10 text-primary font-medium hover:bg-primary/20',\n            !isActive && 'text-muted-foreground hover:text-foreground font-normal',\n          )}\n          onClick={() => onNavigate(item.path)}\n          disabled={item.disabled}\n        >\n          {/* Icon Wrapper */}\n          <span\n            className={cn(\n              'flex items-center justify-center shrink-0 transition-all duration-300',\n              isActive ? 'text-primary' : 'opacity-70',\n            )}\n          >\n            {React.isValidElement(item.icon)\n              ? // @ts-expect-error - cloning strictly for size prop if supported\n                React.cloneElement(item.icon, { size: 18 })\n              : item.icon}\n          </span>\n\n          {/* Label & Extra Wrapper for smooth transition */}\n          <span\n            className={cn(\n              'flex flex-1 items-center overflow-hidden transition-all duration-300 ease-in-out',\n              collapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100 ml-3',\n            )}\n          >\n            <span className='truncate flex-1 text-left text-sm'>{item.label}</span>\n            {item.extra && (\n              <span className='shrink-0 text-xs text-muted-foreground ml-2'>{item.extra}</span>\n            )}\n          </span>\n        </TooltipTrigger>\n        {collapsed && (\n          <TooltipContent side='right' className='flex items-center gap-2'>\n            {item.label}\n            {item.extra && <span className='opacity-70'>{item.extra}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SmartSidebar.js","names":["React","React$1","sidebarDensity","SmartSidebar","useTheme","density","spacingTheme","handleNavigate","onNavigate","path","TooltipProvider","cn","collapsed","className","header","onToggleCollapse","Button","PanelLeft","ScrollArea","groups","SidebarGroupSection","index","footerItems","SidebarItemRow","activePath","item","sidebarFooter","groupCollapsed","setGroupCollapsed","group","isGroupCollapsible","toggleGroup","prev","visibleItems","Separator","Tooltip","TooltipTrigger","buttonVariants","isActive","itemHeight","TooltipContent"],"sources":["../../../../src/tools/components/sidebar/SmartSidebar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\nimport { Button, buttonVariants } from '../ui/button';\nimport { ScrollArea } from '../ui/scroll-area';\nimport { Separator } from '../ui/separator';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';\nimport { PanelLeft } from 'lucide-react';\nimport { useTheme, type SpacingTheme } from '../theme/theme-context';\n\nconst sidebarDensity: Record<SpacingTheme, {\n  groupGap: string;\n  itemGap: string;\n  itemHeight: string;\n}> = {\n  compact: { groupGap: 'gap-1', itemGap: 'gap-0', itemHeight: 'h-8' },\n  normal: { groupGap: 'gap-2', itemGap: 'gap-1', itemHeight: 'h-9' },\n  comfortable: { groupGap: 'gap-4', itemGap: 'gap-2', itemHeight: 'h-11' },\n};\n\n/**\n * A navigation item rendered by {@link SmartSidebar}.\n * @see SmartSidebar\n */\nexport interface SmartSidebarItem {\n  /** Visible item label; also used in collapsed tooltips. */\n  label: string;\n  /** Icon rendered in expanded and collapsed layouts. */\n  icon: React.ReactNode;\n  /** Opaque destination passed to onNavigate; compared exactly with activePath. */\n  path: string;\n  /** Disables item activation when true; omitted means enabled. */\n  disabled?: boolean;\n  /** Additional content shown beside the expanded item label. */\n  extra?: React.ReactNode;\n}\n\n/**\n * サイドバーのグループ\n */\nexport interface SmartSidebarGroup {\n  /** Optional heading; omitted headings render no group title. */\n  title?: string;\n  /** Items in display order. */\n  items: SmartSidebarItem[];\n  /** Allows the expanded sidebar heading to toggle between all items and a two-item preview. */\n  collapsible?: boolean;\n  /** Initial two-item group preview state; defaults to false. Later prop changes do not reset local state. */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * サイドバーのプロップス\n */\nexport interface SidebarProps {\n  /** Additional classes for the sidebar root. */\n  className?: string;\n  /** Groups in display order. */\n  groups: SmartSidebarGroup[];\n  /** Optional navigation items pinned below the scrollable groups. */\n  footerItems?: SmartSidebarItem[];\n  /** Exact path used to highlight active items; no item is active when omitted. */\n  activePath?: string;\n  /** Called with the activated item path; the host performs routing. */\n  onNavigate?: (path: string) => void;\n  /** Controlled whole-sidebar collapse state; defaults to false. */\n  collapsed?: boolean;\n  /** Called by the toggle button; the host must update collapsed. Omitted hides the button. */\n  onToggleCollapse?: () => void;\n  /** Renders header content with the current collapsed state. */\n  header?: (collapsed: boolean) => React.ReactNode;\n  /** Renders footer content with the current collapsed state. */\n  sidebarFooter?: (collapsed: boolean) => React.ReactNode;\n}\n\n/**\n * Renders grouped navigation with controlled sidebar collapse and local group collapse.\n * @param props - Navigation items, controlled selection/collapse and render callbacks; see {@link SidebarProps}.\n * @returns The sidebar element, including its own tooltip provider.\n * @remarks Import Appkit CSS. ThemeProvider enables reactive spacing density; without one,\n * the theme context uses normal spacing. The host owns routing\n * and updates activePath/collapsed. Sidebar from the same entry is a compound namespace;\n * use SmartSidebar for this groups-based API. CSS variables --sidebar-width and\n * --sidebar-collapsed-width fall back to 16rem and 4rem respectively.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { SmartSidebar } from '@alneas/appkit-react/tools/sidebar';\n * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';\n * import '@alneas/appkit-react/styles';\n *\n * export function Navigation() {\n *   const [path, setPath] = useState('/');\n *   const [collapsed, setCollapsed] = useState(false);\n *   return <ThemeProvider><SmartSidebar\n *     groups={[{ title: 'Main', items: [{ label: 'Home', icon: <span>H</span>, path: '/' }] }]}\n *     activePath={path} onNavigate={setPath} collapsed={collapsed}\n *     onToggleCollapse={() => setCollapsed(value => !value)}\n *   /></ThemeProvider>;\n * }\n * ```\n */\nexport function SmartSidebar({\n  className,\n  groups,\n  footerItems,\n  activePath,\n  onNavigate,\n  collapsed = false,\n  onToggleCollapse,\n  header,\n  sidebarFooter,\n}: SidebarProps) {\n  const { spacingTheme } = useTheme();\n  const density = sidebarDensity[spacingTheme];\n  const handleNavigate = (path: string) => {\n    if (onNavigate) {\n      onNavigate(path);\n    }\n  };\n\n  // Determine width based on collapsed state\n  // w-64 (16rem) -> expanded\n  // w-16 (4rem) -> collapsed\n  // You can adjust these values or make them configurable if needed\n  const widthClass = collapsed\n    ? 'w-[var(--sidebar-collapsed-width,4rem)]'\n    : 'w-[var(--sidebar-width,16rem)]';\n\n  return (\n    <TooltipProvider>\n      <div\n        className={cn(\n          'flex flex-col h-full bg-muted/20 border-r border-border transition-all duration-300 ease-in-out',\n          widthClass,\n          className,\n        )}\n      >\n        {/* Combined Header and Toggle Section */}\n        <div\n          className={cn(\n            'flex-none flex items-center h-14 px-3 gap-2',\n            collapsed ? 'justify-center' : 'justify-between',\n          )}\n        >\n          {/* Custom Header Content */}\n          {header && (\n            <div\n              className={cn(\n                'overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out',\n                collapsed && onToggleCollapse\n                  ? 'max-w-0 opacity-0 flex-none'\n                  : 'max-w-full flex-1 opacity-100',\n              )}\n            >\n              {header(collapsed)}\n            </div>\n          )}\n\n          {/* Toggle Button */}\n          {onToggleCollapse && (\n            <Button\n              variant='ghost'\n              size='icon'\n              className='h-8 w-8 shrink-0'\n              onClick={onToggleCollapse}\n            >\n              <PanelLeft size={16} />\n            </Button>\n          )}\n        </div>\n\n        <ScrollArea className='flex-1 py-2 min-h-0'>\n          <nav className={cn('flex flex-col px-2', density.groupGap)}>\n            {groups.map((group, index) => (\n              <SidebarGroupSection\n                key={index}\n                group={group}\n                collapsed={collapsed}\n                activePath={activePath}\n                onNavigate={handleNavigate}\n                density={density}\n              />\n            ))}\n          </nav>\n        </ScrollArea>\n\n        {/* Footer Items Section (Sticky Bottom) */}\n        {footerItems && footerItems.length > 0 && (\n          <div className='flex-none mt-auto p-2 border-t border-border bg-background/50 backdrop-blur-sm'>\n            <ul className={cn('flex flex-col', density.itemGap)}>\n              {footerItems.map((item, index) => (\n                <SidebarItemRow\n                  key={index}\n                  item={item}\n                  collapsed={collapsed}\n                  isActive={activePath === item.path}\n                  onNavigate={handleNavigate}\n                  itemHeight={density.itemHeight}\n                />\n              ))}\n            </ul>\n          </div>\n        )}\n\n        {/* Custom Footer Section */}\n        {sidebarFooter && (\n          <div\n            className={cn(\n              'flex-none p-4 border-t border-border bg-background/50 backdrop-blur-sm',\n              collapsed ? 'flex justify-center' : '',\n            )}\n          >\n            {sidebarFooter(collapsed)}\n          </div>\n        )}\n      </div>\n    </TooltipProvider>\n  );\n}\n\nfunction SidebarGroupSection({\n  group,\n  collapsed,\n  activePath,\n  onNavigate,\n  density,\n}: {\n  group: SmartSidebarGroup;\n  collapsed: boolean;\n  activePath?: string;\n  onNavigate: (path: string) => void;\n  density: (typeof sidebarDensity)[SpacingTheme];\n}) {\n  const [groupCollapsed, setGroupCollapsed] = React.useState(\n    group.defaultCollapsed ?? false\n  );\n\n  const isGroupCollapsible = group.collapsible && !collapsed;\n\n  const toggleGroup = React.useCallback(() => {\n    if (isGroupCollapsible) setGroupCollapsed(prev => !prev);\n  }, [isGroupCollapsible]);\n\n  // If no items, don't render group\n  if (!group.items?.length) return null;\n\n  const visibleItems = isGroupCollapsible && groupCollapsed\n    ? group.items.slice(0, 2)\n    : group.items;\n\n  return (\n    <div className={cn('flex flex-col', density.itemGap)}>\n      {/* Group Title Area - Fixed Height for smooth transition */}\n      {group.title && (\n        <div\n          className={cn(\n            'h-7 flex items-center relative px-2',\n            isGroupCollapsible && 'cursor-pointer hover:text-primary transition-colors',\n          )}\n          onClick={toggleGroup}\n        >\n          {/* Title Text */}\n          <h4\n            className={cn(\n              'text-sm font-semibold text-primary/80 uppercase tracking-wider overflow-hidden text-ellipsis whitespace-nowrap absolute left-2 right-2 transition-all duration-300 ease-in-out',\n              collapsed ? 'opacity-0 translate-x-[-10px]' : 'opacity-100 translate-x-0',\n            )}\n          >\n            {group.title}\n            {isGroupCollapsible && (\n              <span className='ml-1.5 text-xs opacity-60'>\n                {groupCollapsed ? '▸' : '▾'}\n              </span>\n            )}\n          </h4>\n\n          {/* Collapsed Separator */}\n          <div\n            className={cn(\n              'absolute left-0 right-0 top-1/2 -translate-y-1/2 flex justify-center transition-all duration-300',\n              collapsed ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            <Separator className='w-8 opacity-50' />\n          </div>\n        </div>\n      )}\n\n      <ul className={cn('flex flex-col', density.itemGap)}>\n        {visibleItems.map((item, index) => (\n          <SidebarItemRow\n            key={index}\n            item={item}\n            collapsed={collapsed}\n            isActive={activePath === item.path}\n            onNavigate={onNavigate}\n            itemHeight={density.itemHeight}\n          />\n        ))}\n        {isGroupCollapsible && groupCollapsed && group.items.length > 2 && (\n          <li>\n            <button\n              onClick={(e) => { e.stopPropagation(); setGroupCollapsed(false); }}\n              className='flex w-full items-center justify-center h-8 text-xs text-muted-foreground hover:text-primary transition-colors'\n            >\n              +{group.items.length - 2} more\n            </button>\n          </li>\n        )}\n      </ul>\n    </div>\n  );\n}\n\nfunction SidebarItemRow({\n  item,\n  collapsed,\n  isActive,\n  onNavigate,\n  itemHeight,\n}: {\n  item: SmartSidebarItem;\n  collapsed: boolean;\n  isActive: boolean;\n  onNavigate: (path: string) => void;\n  itemHeight: string;\n}) {\n  return (\n    <li>\n      <Tooltip>\n        <TooltipTrigger\n          className={cn(\n            buttonVariants({ variant: isActive ? 'secondary' : 'ghost' }),\n            'flex w-full items-center transition-all duration-300',\n            itemHeight,\n            collapsed ? 'justify-center px-1' : 'justify-start px-3',\n            isActive && 'bg-primary/10 text-primary font-medium hover:bg-primary/20',\n            !isActive && 'text-muted-foreground hover:text-foreground font-normal',\n          )}\n          onClick={() => onNavigate(item.path)}\n          disabled={item.disabled}\n        >\n          {/* Icon Wrapper */}\n          <span\n            className={cn(\n              'flex items-center justify-center shrink-0 transition-all duration-300',\n              isActive ? 'text-primary' : 'opacity-70',\n            )}\n          >\n            {React.isValidElement(item.icon)\n              ? // @ts-expect-error - cloning strictly for size prop if supported\n                React.cloneElement(item.icon, { size: 18 })\n              : item.icon}\n          </span>\n\n          {/* Label & Extra Wrapper for smooth transition */}\n          <span\n            className={cn(\n              'flex flex-1 items-center overflow-hidden transition-all duration-300 ease-in-out',\n              collapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100 ml-3',\n            )}\n          >\n            <span className='truncate flex-1 text-left text-sm'>{item.label}</span>\n            {item.extra && (\n              <span className='shrink-0 text-xs text-muted-foreground ml-2'>{item.extra}</span>\n            )}\n          </span>\n        </TooltipTrigger>\n        {collapsed && (\n          <TooltipContent side='right' className='flex items-center gap-2'>\n            {item.label}\n            {item.extra && <span className='opacity-70'>{item.extra}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/sidebar/sidebar-compound.d.cts

@@ -1,3 +1,4 @@
+import { Separator } from '../ui/separator.cjs';
 /**
  * @fileoverview Sidebar Compound Components (Sidebar)
  *
@@ -82,5 +83,5 @@ export declare const Sidebar: {
     Group: typeof SidebarGroupSlot;
     Item: typeof SidebarItemSlot;
     Footer: typeof SidebarFooterSlot;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: typeof Separator;
 };

package/dist/tools/components/sidebar/sidebar-compound.d.ts

@@ -1,3 +1,4 @@
+import { Separator } from '../ui/separator.js';
 /**
  * @fileoverview Sidebar Compound Components (Sidebar)
  *
@@ -82,5 +83,5 @@ export declare const Sidebar: {
     Group: typeof SidebarGroupSlot;
     Item: typeof SidebarItemSlot;
     Footer: typeof SidebarFooterSlot;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: typeof Separator;
 };

package/dist/tools/components/splash/SplashScreen.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SplashScreen.cjs","names":["React","cn","ScreenTransition","require_runtime","require_ui_lib_utils","require_tools_components_future_ScreenTransition","react_jsx_runtime","react","PHASE_MESSAGES","SplashScreen","exited","setExited","handleHalf","onComplete","defaultContent","logo","message","phase","children","i","className"],"sources":["../../../../src/tools/components/splash/SplashScreen.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { ScreenTransition, type TransitionType } from '../future/ScreenTransition';\n\nconst PHASE_MESSAGES: Record<string, string> = {\n  initializing: 'システムを初期化しています...',\n  loading: 'データを読み込んでいます...',\n  hydrating: 'アプリケーションを起動しています...',\n  connecting: 'サーバーに接続しています...',\n  syncing: 'データを同期しています...',\n  ready: '',\n};\n\nexport interface SplashScreenProps {\n  /** スプラッシュを表示するか（false で退場アニメ開始） */\n  show: boolean;\n  /** 退場アニメーションのタイプ */\n  type?: TransitionType;\n  /** アニメーション時間（ms, デフォルト 600） */\n  duration?: number;\n  /** 表示フェーズ（initializing / loading / hydrating / connecting / syncing） */\n  phase?: string;\n  /** 任意のメッセージ（phase より優先） */\n  message?: string;\n  /** 任意のロゴ要素 */\n  logo?: React.ReactNode;\n  /** 完全カスタムコンテンツ（渡すと phase/message/logo は無視） */\n  children?: React.ReactNode;\n  /** アニメーション完了時のコールバック */\n  onComplete?: () => void;\n  /** 追加クラス */\n  className?: string;\n}\n\n/**\n * 全画面スプラッシュ画面コンポーネント。\n *\n * アプリ起動時の初期化・データ読み込み中などに表示する。\n * `show` が `false` になると `ScreenTransition` の退場アニメーションを再生し、\n * 完了後に DOM から削除される。\n *\n * 子要素を渡せば完全カスタム表示、渡さなければ `phase` に応じた\n * デフォルトメッセージ + ロゴを表示する。\n *\n * ### 表示タイミングの制御\n *\n * スプラッシュの表示制御はプロジェクト側で行う。典型的なパターン:\n *\n * ```tsx\n * function App() {\n *   const [ready, setReady] = useState(false);\n *\n *   useEffect(() => {\n *     Promise.all([\n *       initAuth(),\n *       loadData(),\n *       hydrateApp(),\n *     ]).then(() => setReady(true));\n *   }, []);\n *\n *   return (\n *     <>\n *       <SplashScreen\n *         show={!ready}\n *         type=\"radial\"\n *         phase={phase}\n *         onComplete={() => console.log('splash finished')}\n *       />\n *       {ready && <MainApp />}\n *     </>\n *   );\n * }\n * ```\n *\n * @param props - コンポーネントのプロパティ\n * @param props.show - false になると退場アニメーションを開始する\n * @param props.type - 退場アニメーションの種類（デフォルト: glitch）\n * @param props.duration - アニメーション時間（デフォルト: 600ms）\n * @param props.phase - 表示するフェーズ名。内蔵メッセージ: initializing / loading / hydrating / connecting / syncing\n * @param props.message - 任意のメッセージ文字列（phase より優先）\n * @param props.logo - ロゴ要素\n * @param props.children - 完全カスタムコンテンツ\n * @param props.onComplete - 退場アニメーション完了時のコールバック\n * @param props.className - 追加クラス\n *\n * @example\n * ```tsx\n * // デフォルト表示（phase で自動メッセージ）\n * <SplashScreen show={splash} type=\"radial\" phase=\"hydrating\" />\n *\n * // カスタムメッセージ\n * <SplashScreen show={splash} message=\"データ準備中...\" />\n *\n * // 完全カスタム\n * <SplashScreen show={splash} type=\"glitch\">\n *   <MyCustomContent />\n * </SplashScreen>\n * ```\n */\nexport function SplashScreen({\n  show,\n  type = 'glitch',\n  duration = 600,\n  phase,\n  message,\n  logo,\n  children,\n  onComplete,\n  className,\n}: SplashScreenProps) {\n  const [exited, setExited] = React.useState(false);\n\n  const handleHalf = React.useCallback(() => {\n    setExited(true);\n    onComplete?.();\n  }, [onComplete]);\n\n  if (exited) return null;\n\n  const defaultContent = (\n    <div className=\"flex flex-col items-center justify-center min-h-screen bg-background text-foreground\">\n      {logo && <div className=\"mb-6\">{logo}</div>}\n      {!logo && (\n        <div className=\"mb-6 text-2xl font-bold tracking-[0.3em] text-foreground\">\n          LOADING\n        </div>\n      )}\n      <div\n        className={cn(\n          'font-mono text-xs tracking-[0.2em]',\n          'text-foreground',\n        )}\n      >\n        {message || (phase ? PHASE_MESSAGES[phase] ?? phase : 'LOADING')}\n      </div>\n      {(!message && !children) && (\n        <div className=\"mt-8 flex gap-1\">\n          {[0, 1, 2].map((i) => (\n            <div\n              key={i}\n              className=\"w-1.5 h-1.5 rounded-full bg-primary\"\n              style={{\n                animation: 'splash-dot 1.4s ease-in-out infinite',\n                animationDelay: `${i * 0.2}s`,\n                opacity: 0.3,\n              }}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn('fixed inset-0 z-[10000]', className)}\n      style={{ background: 'var(--background)' }}\n    >\n      <ScreenTransition\n        type={type}\n        duration={duration}\n        trigger={show ? 0 : 1}\n        onHalf={handleHalf}\n      >\n        {children || defaultContent}\n      </ScreenTransition>\n    </div>\n  );\n}\nSplashScreen.displayName = 'SplashScreen';\n"],"mappings":"A,kTAMA,IAAMQ,EAAyC,CAC7C,aAAc,mBACd,QAAS,kBACT,UAAW,sBACX,WAAY,kBACZ,QAAS,iBACT,MAAO,EACT,EAwFA,SAAgBC,EAAa,CAC3B,OACA,OAAO,SACP,WAAW,IACX,QACA,UACA,OACA,WACA,aACA,aACoB,CACpB,GAAM,CAACC,EAAQC,GAAaX,EAAM,SAAS,EAAK,EAE1CY,EAAaZ,EAAM,gBAAkB,CACzCW,EAAU,EAAI,EACdE,IAAa,CACf,EAAG,CAACA,CAAU,CAAC,EAEf,GAAIH,EAAQ,OAAO,KAEnB,IAAMI,GACJ,EAAAR,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uFAAf,SAAA,CACGS,IAAQ,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,OAAQ,SAAAS,CAAU,CAAA,EACzC,CAACA,IACA,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2DAA2D,SAAA,SAErE,CAAA,GAEP,EAAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GACT,qCACA,iBACF,EAEC,SAAAe,IAAYC,EAAQT,EAAeS,IAAUA,EAAQ,UACnD,CAAA,EACH,CAACD,GAAW,CAACE,IACb,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kBACZ,SAAA,CAAC,EAAG,EAAG,CAAC,CAAC,CAAC,IAAK,IACd,EAAAA,EAAA,IAAA,CAAC,MAAD,CAEE,UAAU,sCACV,MAAO,CACL,UAAW,uCACX,eAAgB,GAAGa,EAAI,GAAI,GAC3B,QAAS,EACX,CACD,EAPMA,CAON,CACF,CACE,CAAA,CAEJ,C,GAGP,OACE,EAAAb,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GAAG,0BAA2BmB,CAAS,EAClD,MAAO,CAAE,WAAY,mBAAoB,EAEzC,UAAA,EAAAd,EAAA,IAAA,CAACJ,EAAAA,iBAAD,CACQ,OACI,WACV,QAAS,IACT,OAAQU,EAEP,SAAAM,GAAYJ,CACG,CAAA,CACf,CAAA,CAET,CACA,EAAa,YAAc,e"}
+{"version":3,"file":"SplashScreen.cjs","names":["React","cn","ScreenTransition","require_runtime","require_ui_lib_utils","require_tools_components_future_ScreenTransition","react_jsx_runtime","react","PHASE_MESSAGES","SplashScreen","exited","setExited","handleHalf","onComplete","defaultContent","logo","message","phase","children","i","className"],"sources":["../../../../src/tools/components/splash/SplashScreen.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { ScreenTransition, type TransitionType } from '../future/ScreenTransition';\n\nconst PHASE_MESSAGES: Record<string, string> = {\n  initializing: 'システムを初期化しています...',\n  loading: 'データを読み込んでいます...',\n  hydrating: 'アプリケーションを起動しています...',\n  connecting: 'サーバーに接続しています...',\n  syncing: 'データを同期しています...',\n  ready: '',\n};\n\n/**\n * Host inputs and presentation settings for SplashScreen.\n * @see SplashScreen\n */\nexport interface SplashScreenProps {\n  /**\n   * Mount as true, then set false to trigger one dismissal. Initial false does not dismiss automatically.\n   */\n  show: boolean;\n  /**\n   * Transition class-name suffix; defaults to glitch. Matching animation CSS is host-owned.\n   */\n  type?: TransitionType;\n  /**\n   * Configured full transition duration in milliseconds; defaults to 600. Splash removal/onComplete occur at duration / 2.\n   */\n  duration?: number;\n  /**\n   * Built-in phase message key (initializing/loading/hydrating/connecting/syncing/ready); unknown strings display verbatim, omitted displays LOADING.\n   */\n  phase?: string;\n  /**\n   * Truthy custom text overriding the phase message; an empty string falls back to the phase.\n   */\n  message?: string;\n  /**\n   * Optional logo; omitted renders LOADING text.\n   */\n  logo?: React.ReactNode;\n  /**\n   * Truthy custom content replacing phase/message/logo output.\n   */\n  children?: React.ReactNode;\n  /**\n   * Called once when the exit midpoint removes the splash, not after the full duration. Later show=true does not remount it.\n   * @returns No value; complete the host callback action.\n   */\n  onComplete?: () => void;\n  /**\n   * Additional classes on the component outer element.\n   */\n  className?: string;\n}\n\n/**\n * Shows a full-screen loading surface until a true-to-false show change reaches the transition midpoint.\n * @param props - Visibility trigger, transition settings and optional loading content/callback; see SplashScreenProps. Wrapper defaults: type='glitch', duration=600.\n * @returns The rendered SplashScreen composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. The host owns readiness and must mount with show=true, then change to false to start dismissal. Initial show=false does not dismiss because the internal transition records that initial trigger. At duration/2 the splash unmounts itself and calls onComplete; it does not wait for a full exit/enter cycle or reappear after show becomes true. Supplied truthy children replace default content. Transition class names and --future-duration are emitted, but this package has no public tools/transitions stylesheet/export and its bundled CSS supplies no future-transition/splash-dot animation rules; the host must add matching CSS to see those effects.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { SplashScreen } from '@alneas/appkit-react/tools/splash';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [show, setShow] = useState(true);\n *   return (<><button type=\"button\" onClick={() => setShow(false)}>Ready</button><SplashScreen show={show} phase=\"loading\" /></>);\n * }\n * ```\n */\nexport function SplashScreen({\n  show,\n  type = 'glitch',\n  duration = 600,\n  phase,\n  message,\n  logo,\n  children,\n  onComplete,\n  className,\n}: SplashScreenProps) {\n  const [exited, setExited] = React.useState(false);\n\n  const handleHalf = React.useCallback(() => {\n    setExited(true);\n    onComplete?.();\n  }, [onComplete]);\n\n  if (exited) return null;\n\n  const defaultContent = (\n    <div className=\"flex flex-col items-center justify-center min-h-screen bg-background text-foreground\">\n      {logo && <div className=\"mb-6\">{logo}</div>}\n      {!logo && (\n        <div className=\"mb-6 text-2xl font-bold tracking-[0.3em] text-foreground\">\n          LOADING\n        </div>\n      )}\n      <div\n        className={cn(\n          'font-mono text-xs tracking-[0.2em]',\n          'text-foreground',\n        )}\n      >\n        {message || (phase ? PHASE_MESSAGES[phase] ?? phase : 'LOADING')}\n      </div>\n      {(!message && !children) && (\n        <div className=\"mt-8 flex gap-1\">\n          {[0, 1, 2].map((i) => (\n            <div\n              key={i}\n              className=\"w-1.5 h-1.5 rounded-full bg-primary\"\n              style={{\n                animation: 'splash-dot 1.4s ease-in-out infinite',\n                animationDelay: `${i * 0.2}s`,\n                opacity: 0.3,\n              }}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn('fixed inset-0 z-[10000]', className)}\n      style={{ background: 'var(--background)' }}\n    >\n      <ScreenTransition\n        type={type}\n        duration={duration}\n        trigger={show ? 0 : 1}\n        onHalf={handleHalf}\n      >\n        {children || defaultContent}\n      </ScreenTransition>\n    </div>\n  );\n}\nSplashScreen.displayName = 'SplashScreen';\n"],"mappings":"A,kTAMA,IAAMQ,EAAyC,CAC7C,aAAc,mBACd,QAAS,kBACT,UAAW,sBACX,WAAY,kBACZ,QAAS,iBACT,MAAO,EACT,EA+DA,SAAgBC,EAAa,CAC3B,OACA,OAAO,SACP,WAAW,IACX,QACA,UACA,OACA,WACA,aACA,aACoB,CACpB,GAAM,CAACC,EAAQC,GAAaX,EAAM,SAAS,EAAK,EAE1CY,EAAaZ,EAAM,gBAAkB,CACzCW,EAAU,EAAI,EACdE,IAAa,CACf,EAAG,CAACA,CAAU,CAAC,EAEf,GAAIH,EAAQ,OAAO,KAEnB,IAAMI,GACJ,EAAAR,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uFAAf,SAAA,CACGS,IAAQ,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,OAAQ,SAAAS,CAAU,CAAA,EACzC,CAACA,IACA,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,2DAA2D,SAAA,SAErE,CAAA,GAEP,EAAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GACT,qCACA,iBACF,EAEC,SAAAe,IAAYC,EAAQT,EAAeS,IAAUA,EAAQ,UACnD,CAAA,EACH,CAACD,GAAW,CAACE,IACb,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kBACZ,SAAA,CAAC,EAAG,EAAG,CAAC,CAAC,CAAC,IAAK,IACd,EAAAA,EAAA,IAAA,CAAC,MAAD,CAEE,UAAU,sCACV,MAAO,CACL,UAAW,uCACX,eAAgB,GAAGa,EAAI,GAAI,GAC3B,QAAS,EACX,CACD,EAPMA,CAON,CACF,CACE,CAAA,CAEJ,C,GAGP,OACE,EAAAb,EAAA,IAAA,CAAC,MAAD,CACE,UAAWL,EAAAA,GAAG,0BAA2BmB,CAAS,EAClD,MAAO,CAAE,WAAY,mBAAoB,EAEzC,UAAA,EAAAd,EAAA,IAAA,CAACJ,EAAAA,iBAAD,CACQ,OACI,WACV,QAAS,IACT,OAAQU,EAEP,SAAAM,GAAYJ,CACG,CAAA,CACf,CAAA,CAET,CACA,EAAa,YAAc,e"}

package/dist/tools/components/splash/SplashScreen.d.cts

@@ -1,88 +1,63 @@
 import { TransitionType } from '../future/ScreenTransition.cjs';
 import * as React from 'react';
+/**
+ * Host inputs and presentation settings for SplashScreen.
+ * @see SplashScreen
+ */
 export interface SplashScreenProps {
-    /** スプラッシュを表示するか（false で退場アニメ開始） */
+    /**
+     * Mount as true, then set false to trigger one dismissal. Initial false does not dismiss automatically.
+     */
     show: boolean;
-    /** 退場アニメーションのタイプ */
+    /**
+     * Transition class-name suffix; defaults to glitch. Matching animation CSS is host-owned.
+     */
     type?: TransitionType;
-    /** アニメーション時間（ms, デフォルト 600） */
+    /**
+     * Configured full transition duration in milliseconds; defaults to 600. Splash removal/onComplete occur at duration / 2.
+     */
     duration?: number;
-    /** 表示フェーズ（initializing / loading / hydrating / connecting / syncing） */
+    /**
+     * Built-in phase message key (initializing/loading/hydrating/connecting/syncing/ready); unknown strings display verbatim, omitted displays LOADING.
+     */
     phase?: string;
-    /** 任意のメッセージ（phase より優先） */
+    /**
+     * Truthy custom text overriding the phase message; an empty string falls back to the phase.
+     */
     message?: string;
-    /** 任意のロゴ要素 */
+    /**
+     * Optional logo; omitted renders LOADING text.
+     */
     logo?: React.ReactNode;
-    /** 完全カスタムコンテンツ（渡すと phase/message/logo は無視） */
+    /**
+     * Truthy custom content replacing phase/message/logo output.
+     */
     children?: React.ReactNode;
-    /** アニメーション完了時のコールバック */
+    /**
+     * Called once when the exit midpoint removes the splash, not after the full duration. Later show=true does not remount it.
+     * @returns No value; complete the host callback action.
+     */
     onComplete?: () => void;
-    /** 追加クラス */
+    /**
+     * Additional classes on the component outer element.
+     */
     className?: string;
 }
 /**
- * 全画面スプラッシュ画面コンポーネント。
- *
- * アプリ起動時の初期化・データ読み込み中などに表示する。
- * `show` が `false` になると `ScreenTransition` の退場アニメーションを再生し、
- * 完了後に DOM から削除される。
- *
- * 子要素を渡せば完全カスタム表示、渡さなければ `phase` に応じた
- * デフォルトメッセージ + ロゴを表示する。
- *
- * ### 表示タイミングの制御
- *
- * スプラッシュの表示制御はプロジェクト側で行う。典型的なパターン:
- *
- * ```tsx
- * function App() {
- *   const [ready, setReady] = useState(false);
- *
- *   useEffect(() => {
- *     Promise.all([
- *       initAuth(),
- *       loadData(),
- *       hydrateApp(),
- *     ]).then(() => setReady(true));
- *   }, []);
- *
- *   return (
- *     <>
- *       <SplashScreen
- *         show={!ready}
- *         type="radial"
- *         phase={phase}
- *         onComplete={() => console.log('splash finished')}
- *       />
- *       {ready && <MainApp />}
- *     </>
- *   );
- * }
- * ```
- *
- * @param props - コンポーネントのプロパティ
- * @param props.show - false になると退場アニメーションを開始する
- * @param props.type - 退場アニメーションの種類（デフォルト: glitch）
- * @param props.duration - アニメーション時間（デフォルト: 600ms）
- * @param props.phase - 表示するフェーズ名。内蔵メッセージ: initializing / loading / hydrating / connecting / syncing
- * @param props.message - 任意のメッセージ文字列（phase より優先）
- * @param props.logo - ロゴ要素
- * @param props.children - 完全カスタムコンテンツ
- * @param props.onComplete - 退場アニメーション完了時のコールバック
- * @param props.className - 追加クラス
- *
+ * Shows a full-screen loading surface until a true-to-false show change reaches the transition midpoint.
+ * @param props - Visibility trigger, transition settings and optional loading content/callback; see SplashScreenProps. Wrapper defaults: type='glitch', duration=600.
+ * @returns The rendered SplashScreen composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. The host owns readiness and must mount with show=true, then change to false to start dismissal. Initial show=false does not dismiss because the internal transition records that initial trigger. At duration/2 the splash unmounts itself and calls onComplete; it does not wait for a full exit/enter cycle or reappear after show becomes true. Supplied truthy children replace default content. Transition class names and --future-duration are emitted, but this package has no public tools/transitions stylesheet/export and its bundled CSS supplies no future-transition/splash-dot animation rules; the host must add matching CSS to see those effects.
  * @example
  * ```tsx
- * // デフォルト表示（phase で自動メッセージ）
- * <SplashScreen show={splash} type="radial" phase="hydrating" />
+ * import { useState } from 'react';
+ * import { SplashScreen } from '@alneas/appkit-react/tools/splash';
+ * import '@alneas/appkit-react/styles';
  *
- * // カスタムメッセージ
- * <SplashScreen show={splash} message="データ準備中..." />
- *
- * // 完全カスタム
- * <SplashScreen show={splash} type="glitch">
- *   <MyCustomContent />
- * </SplashScreen>
+ * export function Example() {
+ *   const [show, setShow] = useState(true);
+ *   return (<><button type="button" onClick={() => setShow(false)}>Ready</button><SplashScreen show={show} phase="loading" /></>);
+ * }
  * ```
  */
 export declare function SplashScreen({ show, type, duration, phase, message, logo, children, onComplete, className, }: SplashScreenProps): React.JSX.Element | null;

package/dist/tools/components/splash/SplashScreen.d.ts

@@ -1,88 +1,63 @@
 import { TransitionType } from '../future/ScreenTransition.js';
 import * as React from 'react';
+/**
+ * Host inputs and presentation settings for SplashScreen.
+ * @see SplashScreen
+ */
 export interface SplashScreenProps {
-    /** スプラッシュを表示するか（false で退場アニメ開始） */
+    /**
+     * Mount as true, then set false to trigger one dismissal. Initial false does not dismiss automatically.
+     */
     show: boolean;
-    /** 退場アニメーションのタイプ */
+    /**
+     * Transition class-name suffix; defaults to glitch. Matching animation CSS is host-owned.
+     */
     type?: TransitionType;
-    /** アニメーション時間（ms, デフォルト 600） */
+    /**
+     * Configured full transition duration in milliseconds; defaults to 600. Splash removal/onComplete occur at duration / 2.
+     */
     duration?: number;
-    /** 表示フェーズ（initializing / loading / hydrating / connecting / syncing） */
+    /**
+     * Built-in phase message key (initializing/loading/hydrating/connecting/syncing/ready); unknown strings display verbatim, omitted displays LOADING.
+     */
     phase?: string;
-    /** 任意のメッセージ（phase より優先） */
+    /**
+     * Truthy custom text overriding the phase message; an empty string falls back to the phase.
+     */
     message?: string;
-    /** 任意のロゴ要素 */
+    /**
+     * Optional logo; omitted renders LOADING text.
+     */
     logo?: React.ReactNode;
-    /** 完全カスタムコンテンツ（渡すと phase/message/logo は無視） */
+    /**
+     * Truthy custom content replacing phase/message/logo output.
+     */
     children?: React.ReactNode;
-    /** アニメーション完了時のコールバック */
+    /**
+     * Called once when the exit midpoint removes the splash, not after the full duration. Later show=true does not remount it.
+     * @returns No value; complete the host callback action.
+     */
     onComplete?: () => void;
-    /** 追加クラス */
+    /**
+     * Additional classes on the component outer element.
+     */
     className?: string;
 }
 /**
- * 全画面スプラッシュ画面コンポーネント。
- *
- * アプリ起動時の初期化・データ読み込み中などに表示する。
- * `show` が `false` になると `ScreenTransition` の退場アニメーションを再生し、
- * 完了後に DOM から削除される。
- *
- * 子要素を渡せば完全カスタム表示、渡さなければ `phase` に応じた
- * デフォルトメッセージ + ロゴを表示する。
- *
- * ### 表示タイミングの制御
- *
- * スプラッシュの表示制御はプロジェクト側で行う。典型的なパターン:
- *
- * ```tsx
- * function App() {
- *   const [ready, setReady] = useState(false);
- *
- *   useEffect(() => {
- *     Promise.all([
- *       initAuth(),
- *       loadData(),
- *       hydrateApp(),
- *     ]).then(() => setReady(true));
- *   }, []);
- *
- *   return (
- *     <>
- *       <SplashScreen
- *         show={!ready}
- *         type="radial"
- *         phase={phase}
- *         onComplete={() => console.log('splash finished')}
- *       />
- *       {ready && <MainApp />}
- *     </>
- *   );
- * }
- * ```
- *
- * @param props - コンポーネントのプロパティ
- * @param props.show - false になると退場アニメーションを開始する
- * @param props.type - 退場アニメーションの種類（デフォルト: glitch）
- * @param props.duration - アニメーション時間（デフォルト: 600ms）
- * @param props.phase - 表示するフェーズ名。内蔵メッセージ: initializing / loading / hydrating / connecting / syncing
- * @param props.message - 任意のメッセージ文字列（phase より優先）
- * @param props.logo - ロゴ要素
- * @param props.children - 完全カスタムコンテンツ
- * @param props.onComplete - 退場アニメーション完了時のコールバック
- * @param props.className - 追加クラス
- *
+ * Shows a full-screen loading surface until a true-to-false show change reaches the transition midpoint.
+ * @param props - Visibility trigger, transition settings and optional loading content/callback; see SplashScreenProps. Wrapper defaults: type='glitch', duration=600.
+ * @returns The rendered SplashScreen composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. The host owns readiness and must mount with show=true, then change to false to start dismissal. Initial show=false does not dismiss because the internal transition records that initial trigger. At duration/2 the splash unmounts itself and calls onComplete; it does not wait for a full exit/enter cycle or reappear after show becomes true. Supplied truthy children replace default content. Transition class names and --future-duration are emitted, but this package has no public tools/transitions stylesheet/export and its bundled CSS supplies no future-transition/splash-dot animation rules; the host must add matching CSS to see those effects.
  * @example
  * ```tsx
- * // デフォルト表示（phase で自動メッセージ）
- * <SplashScreen show={splash} type="radial" phase="hydrating" />
+ * import { useState } from 'react';
+ * import { SplashScreen } from '@alneas/appkit-react/tools/splash';
+ * import '@alneas/appkit-react/styles';
  *
- * // カスタムメッセージ
- * <SplashScreen show={splash} message="データ準備中..." />
- *
- * // 完全カスタム
- * <SplashScreen show={splash} type="glitch">
- *   <MyCustomContent />
- * </SplashScreen>
+ * export function Example() {
+ *   const [show, setShow] = useState(true);
+ *   return (<><button type="button" onClick={() => setShow(false)}>Ready</button><SplashScreen show={show} phase="loading" /></>);
+ * }
  * ```
  */
 export declare function SplashScreen({ show, type, duration, phase, message, logo, children, onComplete, className, }: SplashScreenProps): React.JSX.Element | null;

package/dist/tools/components/splash/SplashScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplashScreen.js","names":["React","React$1","PHASE_MESSAGES","SplashScreen","exited","setExited","handleHalf","onComplete","defaultContent","logo","cn","message","phase","children","i","className","ScreenTransition"],"sources":["../../../../src/tools/components/splash/SplashScreen.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { ScreenTransition, type TransitionType } from '../future/ScreenTransition';\n\nconst PHASE_MESSAGES: Record<string, string> = {\n  initializing: 'システムを初期化しています...',\n  loading: 'データを読み込んでいます...',\n  hydrating: 'アプリケーションを起動しています...',\n  connecting: 'サーバーに接続しています...',\n  syncing: 'データを同期しています...',\n  ready: '',\n};\n\nexport interface SplashScreenProps {\n  /** スプラッシュを表示するか（false で退場アニメ開始） */\n  show: boolean;\n  /** 退場アニメーションのタイプ */\n  type?: TransitionType;\n  /** アニメーション時間（ms, デフォルト 600） */\n  duration?: number;\n  /** 表示フェーズ（initializing / loading / hydrating / connecting / syncing） */\n  phase?: string;\n  /** 任意のメッセージ（phase より優先） */\n  message?: string;\n  /** 任意のロゴ要素 */\n  logo?: React.ReactNode;\n  /** 完全カスタムコンテンツ（渡すと phase/message/logo は無視） */\n  children?: React.ReactNode;\n  /** アニメーション完了時のコールバック */\n  onComplete?: () => void;\n  /** 追加クラス */\n  className?: string;\n}\n\n/**\n * 全画面スプラッシュ画面コンポーネント。\n *\n * アプリ起動時の初期化・データ読み込み中などに表示する。\n * `show` が `false` になると `ScreenTransition` の退場アニメーションを再生し、\n * 完了後に DOM から削除される。\n *\n * 子要素を渡せば完全カスタム表示、渡さなければ `phase` に応じた\n * デフォルトメッセージ + ロゴを表示する。\n *\n * ### 表示タイミングの制御\n *\n * スプラッシュの表示制御はプロジェクト側で行う。典型的なパターン:\n *\n * ```tsx\n * function App() {\n *   const [ready, setReady] = useState(false);\n *\n *   useEffect(() => {\n *     Promise.all([\n *       initAuth(),\n *       loadData(),\n *       hydrateApp(),\n *     ]).then(() => setReady(true));\n *   }, []);\n *\n *   return (\n *     <>\n *       <SplashScreen\n *         show={!ready}\n *         type=\"radial\"\n *         phase={phase}\n *         onComplete={() => console.log('splash finished')}\n *       />\n *       {ready && <MainApp />}\n *     </>\n *   );\n * }\n * ```\n *\n * @param props - コンポーネントのプロパティ\n * @param props.show - false になると退場アニメーションを開始する\n * @param props.type - 退場アニメーションの種類（デフォルト: glitch）\n * @param props.duration - アニメーション時間（デフォルト: 600ms）\n * @param props.phase - 表示するフェーズ名。内蔵メッセージ: initializing / loading / hydrating / connecting / syncing\n * @param props.message - 任意のメッセージ文字列（phase より優先）\n * @param props.logo - ロゴ要素\n * @param props.children - 完全カスタムコンテンツ\n * @param props.onComplete - 退場アニメーション完了時のコールバック\n * @param props.className - 追加クラス\n *\n * @example\n * ```tsx\n * // デフォルト表示（phase で自動メッセージ）\n * <SplashScreen show={splash} type=\"radial\" phase=\"hydrating\" />\n *\n * // カスタムメッセージ\n * <SplashScreen show={splash} message=\"データ準備中...\" />\n *\n * // 完全カスタム\n * <SplashScreen show={splash} type=\"glitch\">\n *   <MyCustomContent />\n * </SplashScreen>\n * ```\n */\nexport function SplashScreen({\n  show,\n  type = 'glitch',\n  duration = 600,\n  phase,\n  message,\n  logo,\n  children,\n  onComplete,\n  className,\n}: SplashScreenProps) {\n  const [exited, setExited] = React.useState(false);\n\n  const handleHalf = React.useCallback(() => {\n    setExited(true);\n    onComplete?.();\n  }, [onComplete]);\n\n  if (exited) return null;\n\n  const defaultContent = (\n    <div className=\"flex flex-col items-center justify-center min-h-screen bg-background text-foreground\">\n      {logo && <div className=\"mb-6\">{logo}</div>}\n      {!logo && (\n        <div className=\"mb-6 text-2xl font-bold tracking-[0.3em] text-foreground\">\n          LOADING\n        </div>\n      )}\n      <div\n        className={cn(\n          'font-mono text-xs tracking-[0.2em]',\n          'text-foreground',\n        )}\n      >\n        {message || (phase ? PHASE_MESSAGES[phase] ?? phase : 'LOADING')}\n      </div>\n      {(!message && !children) && (\n        <div className=\"mt-8 flex gap-1\">\n          {[0, 1, 2].map((i) => (\n            <div\n              key={i}\n              className=\"w-1.5 h-1.5 rounded-full bg-primary\"\n              style={{\n                animation: 'splash-dot 1.4s ease-in-out infinite',\n                animationDelay: `${i * 0.2}s`,\n                opacity: 0.3,\n              }}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn('fixed inset-0 z-[10000]', className)}\n      style={{ background: 'var(--background)' }}\n    >\n      <ScreenTransition\n        type={type}\n        duration={duration}\n        trigger={show ? 0 : 1}\n        onHalf={handleHalf}\n      >\n        {children || defaultContent}\n      </ScreenTransition>\n    </div>\n  );\n}\nSplashScreen.displayName = 'SplashScreen';\n"],"mappings":";;;;;;;AAMA,IAAME,IAAyC;CAC7C,cAAc;CACd,SAAS;CACT,WAAW;CACX,YAAY;CACZ,SAAS;CACT,OAAO;AACT;AAwFA,SAAgBC,EAAa,EAC3B,SACA,UAAO,UACP,cAAW,KACX,UACA,YACA,SACA,aACA,eACA,gBACoB;CACpB,IAAM,CAACC,GAAQC,KAAaL,EAAM,SAAS,EAAK,GAE1CM,IAAaN,EAAM,kBAAkB;EAEzC,AADAK,EAAU,EAAI,GACdE,IAAa;CACf,GAAG,CAACA,CAAU,CAAC;CAEf,IAAIH,GAAQ,OAAO;CAEnB,IAAMI,IACJ,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACGC,KAAQ,kBAAC,OAAD;IAAK,WAAU;IAAQ,UAAAA;GAAU,CAAA;GACzC,CAACA,KACA,kBAAC,OAAD;IAAK,WAAU;IAA2D,UAAA;GAErE,CAAA;GAEP,kBAAC,OAAD;IACE,WAAWC,EACT,sCACA,iBACF;IAEC,UAAAC,MAAYC,IAAQV,EAAeU,MAAUA,IAAQ;GACnD,CAAA;GACH,CAACD,KAAW,CAACE,KACb,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;KAAC;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,MACd,kBAAC,OAAD;KAEE,WAAU;KACV,OAAO;MACL,WAAW;MACX,gBAAgB,GAAGC,IAAI,GAAI;MAC3B,SAAS;KACX;IACD,GAPMA,CAON,CACF;GACE,CAAA;EAEJ;;CAGP,OACE,kBAAC,OAAD;EACE,WAAWJ,EAAG,2BAA2BK,CAAS;EAClD,OAAO,EAAE,YAAY,oBAAoB;EAEzC,UAAA,kBAACC,GAAD;GACQ;GACI;GACV,SAAS;GACT,QAAQV;GAEP,UAAAO,KAAYL;EACG,CAAA;CACf,CAAA;AAET;AACA,EAAa,cAAc"}
+{"version":3,"file":"SplashScreen.js","names":["React","React$1","PHASE_MESSAGES","SplashScreen","exited","setExited","handleHalf","onComplete","defaultContent","logo","cn","message","phase","children","i","className","ScreenTransition"],"sources":["../../../../src/tools/components/splash/SplashScreen.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { ScreenTransition, type TransitionType } from '../future/ScreenTransition';\n\nconst PHASE_MESSAGES: Record<string, string> = {\n  initializing: 'システムを初期化しています...',\n  loading: 'データを読み込んでいます...',\n  hydrating: 'アプリケーションを起動しています...',\n  connecting: 'サーバーに接続しています...',\n  syncing: 'データを同期しています...',\n  ready: '',\n};\n\n/**\n * Host inputs and presentation settings for SplashScreen.\n * @see SplashScreen\n */\nexport interface SplashScreenProps {\n  /**\n   * Mount as true, then set false to trigger one dismissal. Initial false does not dismiss automatically.\n   */\n  show: boolean;\n  /**\n   * Transition class-name suffix; defaults to glitch. Matching animation CSS is host-owned.\n   */\n  type?: TransitionType;\n  /**\n   * Configured full transition duration in milliseconds; defaults to 600. Splash removal/onComplete occur at duration / 2.\n   */\n  duration?: number;\n  /**\n   * Built-in phase message key (initializing/loading/hydrating/connecting/syncing/ready); unknown strings display verbatim, omitted displays LOADING.\n   */\n  phase?: string;\n  /**\n   * Truthy custom text overriding the phase message; an empty string falls back to the phase.\n   */\n  message?: string;\n  /**\n   * Optional logo; omitted renders LOADING text.\n   */\n  logo?: React.ReactNode;\n  /**\n   * Truthy custom content replacing phase/message/logo output.\n   */\n  children?: React.ReactNode;\n  /**\n   * Called once when the exit midpoint removes the splash, not after the full duration. Later show=true does not remount it.\n   * @returns No value; complete the host callback action.\n   */\n  onComplete?: () => void;\n  /**\n   * Additional classes on the component outer element.\n   */\n  className?: string;\n}\n\n/**\n * Shows a full-screen loading surface until a true-to-false show change reaches the transition midpoint.\n * @param props - Visibility trigger, transition settings and optional loading content/callback; see SplashScreenProps. Wrapper defaults: type='glitch', duration=600.\n * @returns The rendered SplashScreen composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. The host owns readiness and must mount with show=true, then change to false to start dismissal. Initial show=false does not dismiss because the internal transition records that initial trigger. At duration/2 the splash unmounts itself and calls onComplete; it does not wait for a full exit/enter cycle or reappear after show becomes true. Supplied truthy children replace default content. Transition class names and --future-duration are emitted, but this package has no public tools/transitions stylesheet/export and its bundled CSS supplies no future-transition/splash-dot animation rules; the host must add matching CSS to see those effects.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { SplashScreen } from '@alneas/appkit-react/tools/splash';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [show, setShow] = useState(true);\n *   return (<><button type=\"button\" onClick={() => setShow(false)}>Ready</button><SplashScreen show={show} phase=\"loading\" /></>);\n * }\n * ```\n */\nexport function SplashScreen({\n  show,\n  type = 'glitch',\n  duration = 600,\n  phase,\n  message,\n  logo,\n  children,\n  onComplete,\n  className,\n}: SplashScreenProps) {\n  const [exited, setExited] = React.useState(false);\n\n  const handleHalf = React.useCallback(() => {\n    setExited(true);\n    onComplete?.();\n  }, [onComplete]);\n\n  if (exited) return null;\n\n  const defaultContent = (\n    <div className=\"flex flex-col items-center justify-center min-h-screen bg-background text-foreground\">\n      {logo && <div className=\"mb-6\">{logo}</div>}\n      {!logo && (\n        <div className=\"mb-6 text-2xl font-bold tracking-[0.3em] text-foreground\">\n          LOADING\n        </div>\n      )}\n      <div\n        className={cn(\n          'font-mono text-xs tracking-[0.2em]',\n          'text-foreground',\n        )}\n      >\n        {message || (phase ? PHASE_MESSAGES[phase] ?? phase : 'LOADING')}\n      </div>\n      {(!message && !children) && (\n        <div className=\"mt-8 flex gap-1\">\n          {[0, 1, 2].map((i) => (\n            <div\n              key={i}\n              className=\"w-1.5 h-1.5 rounded-full bg-primary\"\n              style={{\n                animation: 'splash-dot 1.4s ease-in-out infinite',\n                animationDelay: `${i * 0.2}s`,\n                opacity: 0.3,\n              }}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn('fixed inset-0 z-[10000]', className)}\n      style={{ background: 'var(--background)' }}\n    >\n      <ScreenTransition\n        type={type}\n        duration={duration}\n        trigger={show ? 0 : 1}\n        onHalf={handleHalf}\n      >\n        {children || defaultContent}\n      </ScreenTransition>\n    </div>\n  );\n}\nSplashScreen.displayName = 'SplashScreen';\n"],"mappings":";;;;;;;AAMA,IAAME,IAAyC;CAC7C,cAAc;CACd,SAAS;CACT,WAAW;CACX,YAAY;CACZ,SAAS;CACT,OAAO;AACT;AA+DA,SAAgBC,EAAa,EAC3B,SACA,UAAO,UACP,cAAW,KACX,UACA,YACA,SACA,aACA,eACA,gBACoB;CACpB,IAAM,CAACC,GAAQC,KAAaL,EAAM,SAAS,EAAK,GAE1CM,IAAaN,EAAM,kBAAkB;EAEzC,AADAK,EAAU,EAAI,GACdE,IAAa;CACf,GAAG,CAACA,CAAU,CAAC;CAEf,IAAIH,GAAQ,OAAO;CAEnB,IAAMI,IACJ,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACGC,KAAQ,kBAAC,OAAD;IAAK,WAAU;IAAQ,UAAAA;GAAU,CAAA;GACzC,CAACA,KACA,kBAAC,OAAD;IAAK,WAAU;IAA2D,UAAA;GAErE,CAAA;GAEP,kBAAC,OAAD;IACE,WAAWC,EACT,sCACA,iBACF;IAEC,UAAAC,MAAYC,IAAQV,EAAeU,MAAUA,IAAQ;GACnD,CAAA;GACH,CAACD,KAAW,CAACE,KACb,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;KAAC;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,MACd,kBAAC,OAAD;KAEE,WAAU;KACV,OAAO;MACL,WAAW;MACX,gBAAgB,GAAGC,IAAI,GAAI;MAC3B,SAAS;KACX;IACD,GAPMA,CAON,CACF;GACE,CAAA;EAEJ;;CAGP,OACE,kBAAC,OAAD;EACE,WAAWJ,EAAG,2BAA2BK,CAAS;EAClD,OAAO,EAAE,YAAY,oBAAoB;EAEzC,UAAA,kBAACC,GAAD;GACQ;GACI;GACV,SAAS;GACT,QAAQV;GAEP,UAAAO,KAAYL;EACG,CAAA;CACf,CAAA;AAET;AACA,EAAa,cAAc"}