@humain/ui 2.1.62 → 2.1.65

package/dist/index225.js.map

@@ -1 +1 @@
-{"version":3,"file":"index225.js","names":[],"sources":["../src/components/templates/PageBackground/PageBackground.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------------------------------*/\n\nexport interface PageBackgroundProps {\n  /** Pattern type - grid (straight lines) or circular (concentric rounded squares) */\n  pattern: 'grid' | 'circular';\n\n  /** Vertical offset from top - controls where pattern centers\n   * 'top' = -260px (standalone route default)\n   * 'center' = -384px (pattern center at container top)\n   * 'icon-center' = centers pattern in its positioned container\n   * number = custom pixel offset\n   */\n  offset?: 'top' | 'center' | 'icon-center' | number;\n\n  /** Optional className for customization */\n  className?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Pattern Sub-components\n * -------------------------------------------------------------------------------------------------*/\n\n/** Grid pattern: 17 vertical + 17 horizontal lines at 48px spacing */\nfunction GridPattern() {\n  return (\n    <g className=\"stroke-border\" strokeWidth=\"1\">\n      {Array.from({ length: 17 }).map((_, i) => (\n        <line key={`v-${i}`} x1={i * 48} y1=\"0\" x2={i * 48} y2=\"768\" />\n      ))}\n      {Array.from({ length: 17 }).map((_, i) => (\n        <line key={`h-${i}`} x1=\"0\" y1={i * 48} x2=\"768\" y2={i * 48} />\n      ))}\n    </g>\n  );\n}\n\n/** Circular pattern: 8 concentric circles at 48px radius increments */\nfunction CircularPattern() {\n  return (\n    <g className=\"stroke-border\" strokeWidth=\"1\" fill=\"none\">\n      {[48, 96, 144, 192, 240, 288, 336, 384].map((radius) => (\n        <circle key={radius} cx=\"384\" cy=\"384\" r={radius} />\n      ))}\n    </g>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PageBackground Component\n * -------------------------------------------------------------------------------------------------*/\n\nconst FADE_MASK =\n  'radial-gradient(circle at center, black 0%, transparent 70%)';\n\nfunction PageBackground({\n  pattern,\n  offset = 'top',\n  className,\n}: PageBackgroundProps) {\n  const isIconCenter = offset === 'icon-center';\n  const topOffset = isIconCenter\n    ? undefined\n    : offset === 'top'\n      ? -260\n      : offset === 'center'\n        ? -384\n        : offset;\n\n  return (\n    <div\n      data-slot=\"page-background\"\n      className={cn(\n        'pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]',\n        isIconCenter && 'top-1/2 -translate-y-1/2',\n        className,\n      )}\n      style={{\n        ...(topOffset !== undefined ? { top: topOffset } : {}),\n        maskImage: FADE_MASK,\n        WebkitMaskImage: FADE_MASK,\n      }}\n      aria-hidden=\"true\"\n    >\n      {/* Pattern SVG - 768x768 */}\n      <svg\n        className=\"absolute inset-0 size-[768px]\"\n        viewBox=\"0 0 768 768\"\n        fill=\"none\"\n        focusable=\"false\"\n      >\n        {pattern === 'grid' ? <GridPattern /> : <CircularPattern />}\n      </svg>\n    </div>\n  );\n}\n\nPageBackground.displayName = 'PageBackground';\n\nexport { PageBackground };\n"],"mappings":";;;;AA2BA,SAAS,cAAc;CACrB,OACE,qBAAC,KAAD;EAAG,WAAU;EAAgB,aAAY;YAAzC,CACG,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,MAClC,oBAAC,QAAD;GAAqB,IAAI,IAAI;GAAI,IAAG;GAAI,IAAI,IAAI;GAAI,IAAG;EAAO,GAAnD,KAAK,GAA8C,CAC/D,GACA,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,MAClC,oBAAC,QAAD;GAAqB,IAAG;GAAI,IAAI,IAAI;GAAI,IAAG;GAAM,IAAI,IAAI;EAAK,GAAnD,KAAK,GAA8C,CAC/D,CACA;;AAEP;;AAGA,SAAS,kBAAkB;CACzB,OACE,oBAAC,KAAD;EAAG,WAAU;EAAgB,aAAY;EAAI,MAAK;YAC/C;GAAC;GAAI;GAAI;GAAK;GAAK;GAAK;GAAK;GAAK;EAAG,CAAC,CAAC,KAAK,WAC3C,oBAAC,UAAD;GAAqB,IAAG;GAAM,IAAG;GAAM,GAAG;EAAS,GAAtC,MAAsC,CACpD;CACA,CAAA;AAEP;AAMA,IAAM,YACJ;AAEF,SAAS,eAAe,EACtB,SACA,SAAS,OACT,aACsB;CACtB,MAAM,eAAe,WAAW;CAChC,MAAM,YAAY,eACd,KAAA,IACA,WAAW,QACT,OACA,WAAW,WACT,OACA;CAER,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uEACA,gBAAgB,4BAChB,SACF;EACA,OAAO;GACL,GAAI,cAAc,KAAA,IAAY,EAAE,KAAK,UAAU,IAAI,CAAC;GACpD,WAAW;GACX,iBAAiB;EACnB;EACA,eAAY;YAGZ,oBAAC,OAAD;GACE,WAAU;GACV,SAAQ;GACR,MAAK;GACL,WAAU;aAET,YAAY,SAAS,oBAAC,aAAD,CAAc,CAAA,IAAI,oBAAC,iBAAD,CAAkB,CAAA;EACvD,CAAA;CACF,CAAA;AAET;AAEA,eAAe,cAAc"}
+{"version":3,"file":"index225.js","names":[],"sources":["../src/components/templates/AppSidebar/AppSidebar.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: ChatList uses tabIndex on scrollable div for keyboard scrolling */\n/** biome-ignore-all lint/a11y/useSemanticElements: NavSection uses role=\"separator\" on inner <div>; ChatList uses role=\"list\" on scrollable div */\n/** biome-ignore-all lint/a11y/useFocusableInteractive: Non-focusable separator per WAI-ARIA spec for decorative separators */\n/** biome-ignore-all lint/a11y/useAriaPropsForRole: Non-focusable separators don't require aria-valuenow per WAI-ARIA spec */\n/** biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: role=\"separator\" on <div> inside list items for semantic section boundaries */\n\n'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ChevronRight,\n  MessageCircle,\n  PanelLeftClose,\n  PanelLeftOpen,\n} from 'lucide-react';\nimport * as React from 'react';\nimport { Badge } from '@/components/atoms/display/Badge';\nimport { Separator } from '@/components/atoms/layout/Separator';\nimport { Avatar } from '@/components/molecules/data/Avatar';\nimport { BrandIcon } from '@/components/molecules/data/BrandIcon';\nimport {\n  PopoverPopup,\n  PopoverRoot,\n  PopoverTrigger,\n} from '@/components/organisms/overlays/Popover';\nimport {\n  Sidebar,\n  SidebarAccountSkeleton,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarNavSkeleton,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from '@/components/ui/sidebar';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nfunction formatAccessibleLabel(\n  label: string,\n  badge?: string | number | null,\n): string {\n  if (badge == null) return label;\n  return `${label}, ${typeof badge === 'number' ? `${badge} ${badge === 1 ? 'item' : 'items'}` : badge}`;\n}\n\nfunction getSidebarBgClass(\n  isCollapsed: boolean,\n  sidebarBgColor?: string,\n): string {\n  return isCollapsed ? 'bg-transparent' : (sidebarBgColor ?? 'bg-muted');\n}\n\nfunction getSkeletonCount(count: number | undefined, fallback: number): number {\n  return typeof count === 'number' && Number.isFinite(count) && count >= 0\n    ? Math.floor(count)\n    : fallback;\n}\n\n// ============================================\n// Slot Distribution Hook\n// ============================================\n\nconst APP_SIDEBAR_IMPLICIT_SLOT = Symbol('AppSidebarImplicitSlot');\n\ntype AppSidebarImplicitSlot = 'header' | 'content' | 'footer';\n\ninterface AppSidebarImplicitSlotComponent {\n  [APP_SIDEBAR_IMPLICIT_SLOT]: AppSidebarImplicitSlot;\n}\n\ninterface AppSidebarWrappedComponent {\n  type?: unknown;\n  render?: unknown;\n}\n\nfunction markAppSidebarImplicitSlot<Component extends object>(\n  component: Component,\n  slot: AppSidebarImplicitSlot,\n): Component & AppSidebarImplicitSlotComponent {\n  const slottedComponent = component as Component &\n    AppSidebarImplicitSlotComponent;\n  slottedComponent[APP_SIDEBAR_IMPLICIT_SLOT] = slot;\n  return slottedComponent;\n}\n\nfunction isAppSidebarImplicitSlotComponent(\n  value: unknown,\n): value is AppSidebarImplicitSlotComponent {\n  return (\n    (typeof value === 'function' ||\n      (typeof value === 'object' && value !== null)) &&\n    APP_SIDEBAR_IMPLICIT_SLOT in value\n  );\n}\n\nfunction getAppSidebarImplicitSlot(\n  childType: unknown,\n): AppSidebarImplicitSlot | undefined {\n  if (isAppSidebarImplicitSlotComponent(childType)) {\n    return childType[APP_SIDEBAR_IMPLICIT_SLOT];\n  }\n\n  if (typeof childType === 'object' && childType !== null) {\n    const wrappedComponent = childType as AppSidebarWrappedComponent;\n    return (\n      getAppSidebarImplicitSlot(wrappedComponent.type) ??\n      getAppSidebarImplicitSlot(wrappedComponent.render)\n    );\n  }\n\n  return undefined;\n}\n\ntype SlotResult = {\n  header: React.ReactNode[];\n  content: React.ReactNode[];\n  footer: React.ReactNode[];\n  explicitHeader: React.ReactElement | null;\n  explicitContent: React.ReactElement | null;\n  explicitFooter: React.ReactElement | null;\n};\n\nfunction useSlotChildren(children: React.ReactNode): SlotResult {\n  return React.useMemo(() => {\n    const result: SlotResult = {\n      header: [],\n      content: [],\n      footer: [],\n      explicitHeader: null,\n      explicitContent: null,\n      explicitFooter: null,\n    };\n\n    React.Children.forEach(children, (child) => {\n      if (!React.isValidElement(child)) return;\n\n      const childType = child.type;\n\n      // Check for explicit slot components\n      if (childType === AppSidebarHeader) {\n        result.explicitHeader = child;\n        return;\n      }\n      if (childType === AppSidebarContent) {\n        result.explicitContent = child;\n        return;\n      }\n      if (childType === AppSidebarFooter) {\n        result.explicitFooter = child;\n        return;\n      }\n\n      // Distribute to slots based on explicit component-owned slot markers.\n      const implicitSlot = getAppSidebarImplicitSlot(childType);\n      if (implicitSlot === 'header') {\n        result.header.push(child);\n      } else if (implicitSlot === 'content') {\n        result.content.push(child);\n      } else if (implicitSlot === 'footer') {\n        result.footer.push(child);\n      } else {\n        // Unknown children go to content by default\n        result.content.push(child);\n      }\n    });\n\n    return result;\n  }, [children]);\n}\n\ntype AppSidebarSide = 'left' | 'right';\ntype AppSidebarDirection = 'ltr' | 'rtl';\n\nconst AppSidebarLayoutContext = React.createContext<{ side: AppSidebarSide }>({\n  side: 'left',\n});\n\nfunction useAppSidebarLayout() {\n  return React.useContext(AppSidebarLayoutContext);\n}\n\nfunction getAppSidebarDirection(\n  element: HTMLElement | null,\n): AppSidebarDirection {\n  const win = element?.ownerDocument.defaultView;\n  if (!element || !win) return 'ltr';\n  return win.getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\nfunction normalizeAppSidebarDirection(\n  dir: string | undefined,\n): AppSidebarDirection | undefined {\n  return dir === 'rtl' || dir === 'ltr' ? dir : undefined;\n}\n\nfunction getAppSidebarSideFromDirection(\n  direction: AppSidebarDirection,\n): AppSidebarSide {\n  return direction === 'rtl' ? 'right' : 'left';\n}\n\nfunction getAppSidebarDirectionTargets(element: HTMLElement): Element[] {\n  const targets = new Set<Element>();\n  let current: Element | null = element;\n\n  while (current) {\n    targets.add(current);\n    if (current === element.ownerDocument.documentElement) break;\n    current = current.parentElement;\n  }\n\n  targets.add(element.ownerDocument.documentElement);\n  if (element.ownerDocument.body) targets.add(element.ownerDocument.body);\n\n  return Array.from(targets);\n}\n\nfunction useResolvedAppSidebarSide({\n  containerRef,\n  explicitDir,\n  explicitSide,\n}: {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  explicitDir?: string;\n  explicitSide?: AppSidebarSide;\n}): AppSidebarSide {\n  const [detectedDirection, setDetectedDirection] =\n    React.useState<AppSidebarDirection>(\n      () => normalizeAppSidebarDirection(explicitDir) ?? 'ltr',\n    );\n\n  React.useEffect(() => {\n    if (explicitSide) return;\n\n    const normalizedExplicitDir = normalizeAppSidebarDirection(explicitDir);\n    if (normalizedExplicitDir) {\n      setDetectedDirection((current) =>\n        current === normalizedExplicitDir ? current : normalizedExplicitDir,\n      );\n      return;\n    }\n\n    const container = containerRef.current;\n    const win = container?.ownerDocument.defaultView;\n    if (!container || !win) return;\n\n    const detectDirection = () => {\n      const nextDirection = getAppSidebarDirection(container);\n      setDetectedDirection((current) =>\n        current === nextDirection ? current : nextDirection,\n      );\n    };\n\n    detectDirection();\n\n    const Observer = win.MutationObserver;\n    if (!Observer) return;\n\n    const observer = new Observer(detectDirection);\n    for (const target of getAppSidebarDirectionTargets(container)) {\n      observer.observe(target, {\n        attributes: true,\n        attributeFilter: ['dir', 'class', 'style'],\n      });\n    }\n\n    return () => observer.disconnect();\n  }, [containerRef, explicitDir, explicitSide]);\n\n  return explicitSide ?? getAppSidebarSideFromDirection(detectedDirection);\n}\n\n// ============================================\n// Sidebar Logo\n// ============================================\n\nexport interface AppSidebarLogoProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Logo image or element */\n  logo?: React.ReactNode;\n  /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */\n  compactedLogo?: React.ReactNode;\n  /** Subtext displayed below the logo (e.g., \"Dashboard\"). Hidden when collapsed. */\n  subtext?: string;\n}\n\nconst DEFAULT_COMPACTED_LOGO = <BrandIcon icon=\"mark\" size=\"lg\" />;\n\nfunction AppSidebarLogo({\n  logo,\n  compactedLogo,\n  subtext,\n  className,\n  ...props\n}: AppSidebarLogoProps) {\n  const { state, toggleSidebar } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n  const effectiveCompactedLogo = compactedLogo ?? DEFAULT_COMPACTED_LOGO;\n\n  if (isCollapsed) {\n    return (\n      <div\n        data-slot=\"app-sidebar-logo\"\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n        dir=\"ltr\"\n      >\n        <button\n          type=\"button\"\n          onClick={toggleSidebar}\n          className=\"group/logo relative flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none\"\n          aria-label=\"Expand sidebar\"\n        >\n          <span className=\"transition-opacity duration-200 ease-smooth group-hover/logo:opacity-0 motion-reduce:transition-none\">\n            {effectiveCompactedLogo}\n          </span>\n          <PanelLeftOpen className=\"absolute size-5 opacity-0 transition-opacity duration-200 ease-smooth group-hover/logo:opacity-100 motion-reduce:transition-none\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"app-sidebar-logo\"\n      className={cn('flex items-center justify-between px-3', className)}\n      {...props}\n      dir=\"ltr\"\n    >\n      <div className=\"flex flex-col gap-0\">\n        <div className=\"flex items-center gap-2\">\n          {logo || (\n            <>\n              <BrandIcon icon=\"mark\" size=\"lg\" />\n              <span className=\"text-lg font-semibold tracking-tight text-foreground\">\n                HUMAIN\n              </span>\n            </>\n          )}\n        </div>\n        {subtext && (\n          <p className=\"text-sm text-sidebar-foreground\">{subtext}</p>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        onClick={toggleSidebar}\n        className=\"relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none after:absolute after:-inset-2\"\n        aria-label=\"Collapse sidebar\"\n      >\n        <PanelLeftClose aria-hidden=\"true\" className=\"size-4\" />\n      </button>\n    </div>\n  );\n}\n\nAppSidebarLogo.displayName = 'AppSidebar.Logo';\n\n// ============================================\n// Slot Components (Header, Content, Footer)\n// ============================================\n\nexport interface AppSidebarSlotProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AppSidebarHeader({ children, className }: AppSidebarSlotProps) {\n  return (\n    <div data-slot=\"app-sidebar-header\" className={className}>\n      {children}\n    </div>\n  );\n}\nAppSidebarHeader.displayName = 'AppSidebar.Header';\n\nfunction AppSidebarContent({ children, className }: AppSidebarSlotProps) {\n  return (\n    <div data-slot=\"app-sidebar-content\" className={className}>\n      {children}\n    </div>\n  );\n}\nAppSidebarContent.displayName = 'AppSidebar.Content';\n\nfunction AppSidebarFooter({ children, className }: AppSidebarSlotProps) {\n  return (\n    <div data-slot=\"app-sidebar-footer\" className={className}>\n      {children}\n    </div>\n  );\n}\nAppSidebarFooter.displayName = 'AppSidebar.Footer';\n\n// ============================================\n// Nav Component\n// ============================================\n\nexport interface AppSidebarNavProps {\n  children?: React.ReactNode;\n  /** Accessible label for the nav landmark (useful when multiple Nav instances exist) */\n  'aria-label'?: string;\n  className?: string;\n}\n\nfunction AppSidebarNav({\n  children,\n  'aria-label': ariaLabel = 'Sidebar navigation',\n  className,\n}: AppSidebarNavProps) {\n  const menuContent = (\n    <SidebarMenu className=\"gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2\">\n      {React.Children.map(children, (child) => (\n        <SidebarMenuItem>{child}</SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  );\n\n  return (\n    <SidebarGroup\n      data-slot=\"app-sidebar-nav\"\n      className={cn(\n        'shrink-0 p-0 group-data-[collapsible=icon]:w-auto',\n        className,\n      )}\n    >\n      <SidebarGroupContent>\n        <nav aria-label={ariaLabel}>{menuContent}</nav>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  );\n}\n\nAppSidebarNav.displayName = 'AppSidebar.Nav';\nmarkAppSidebarImplicitSlot(AppSidebarNav, 'content');\n\n// ============================================\n// Nav Section (Group Label / Divider)\n// ============================================\n\nexport interface AppSidebarNavSectionProps {\n  /** Section label shown when sidebar is expanded */\n  label: string;\n  /** Additional className */\n  className?: string;\n}\n\nfunction AppSidebarNavSection({ label, className }: AppSidebarNavSectionProps) {\n  return (\n    <div\n      data-slot=\"app-sidebar-nav-section\"\n      role=\"separator\"\n      aria-label={label}\n      className={cn('py-2 group-data-[collapsible=icon]:w-8', className)}\n    >\n      <div className=\"flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden\">\n        <span className=\"text-xs font-medium text-sidebar-foreground/80\">\n          {label}\n        </span>\n      </div>\n      <div className=\"hidden py-2 group-data-[collapsible=icon]:block\">\n        <span className=\"sr-only\">{label}</span>\n        <Separator className=\"mx-auto w-8\" />\n      </div>\n    </div>\n  );\n}\n\nAppSidebarNavSection.displayName = 'AppSidebar.NavSection';\n\n// ============================================\n// Nav Item Component\n// ============================================\n\nconst navItemVariants = cva(\n  'relative flex w-full items-center gap-1.5 rounded-md px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none',\n  {\n    variants: {\n      state: {\n        default: 'text-sidebar-foreground hover:bg-background',\n        active: 'bg-primary/10 text-sidebar-foreground',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n    },\n  },\n);\n\nexport interface AppSidebarNavItemProps {\n  icon: React.ReactNode;\n  label: string;\n  isActive?: boolean;\n  badge?: string | number;\n  onClick?: () => void;\n  href?: string;\n  className?: string;\n  /** Sub-navigation children (AppSidebar.NavSub items). When present, renders as collapsible parent. */\n  children?: React.ReactNode;\n}\n\nfunction AppSidebarNavItem({\n  icon,\n  label,\n  isActive = false,\n  badge,\n  onClick,\n  href,\n  className,\n  children,\n}: AppSidebarNavItemProps) {\n  const { state, containerRef } = useSidebar();\n  const { side: sidebarSide } = useAppSidebarLayout();\n  const isCollapsed = state === 'collapsed';\n  const hasChildren = React.Children.count(children) > 0;\n  const [isOpen, setIsOpen] = React.useState(isActive && hasChildren);\n  const subNavId = React.useId();\n  const floatingSide = sidebarSide === 'right' ? 'left' : 'right';\n  const flyoutPanelBackground =\n    'linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)';\n  const flyoutFrameEdgeClassName =\n    sidebarSide === 'right'\n      ? 'justify-end rounded-l-xl rounded-r-none'\n      : 'justify-start rounded-r-xl rounded-l-none';\n  const flyoutPanelEdgeClassName =\n    sidebarSide === 'right' ? 'rounded-l-xl' : 'rounded-r-xl';\n  const flyoutAnchor = React.useMemo(\n    () => ({\n      getBoundingClientRect: () => {\n        const container = containerRef.current;\n        const rect = container?.getBoundingClientRect();\n        const win = container?.ownerDocument.defaultView;\n        const viewportHeight = win?.innerHeight ?? rect?.height ?? 0;\n        const x = rect ? (sidebarSide === 'right' ? rect.left : rect.right) : 0;\n\n        return {\n          x,\n          y: 0,\n          top: 0,\n          right: x,\n          bottom: viewportHeight,\n          left: x,\n          width: 0,\n          height: viewportHeight,\n        };\n      },\n    }),\n    [containerRef, sidebarSide],\n  );\n\n  React.useEffect(() => {\n    if (isActive && hasChildren) setIsOpen(true);\n  }, [isActive, hasChildren]);\n\n  const accessibleLabel = formatAccessibleLabel(label, badge);\n\n  const iconElement = (\n    <span\n      data-slot=\"nav-icon\"\n      className=\"flex shrink-0 items-center p-0.5 [&>svg]:size-4\"\n    >\n      {icon}\n    </span>\n  );\n\n  const labelElement = (\n    <span className=\"flex-1 text-start group-data-[collapsible=icon]:hidden\">\n      {label}\n    </span>\n  );\n\n  const badgeElement = badge != null && (\n    <Badge\n      size=\"sm\"\n      variant=\"soft\"\n      color={isActive ? 'secondary' : 'primary'}\n      className=\"group-data-[collapsible=icon]:hidden\"\n      aria-hidden=\"true\"\n    >\n      {badge}\n    </Badge>\n  );\n\n  const chevronElement = hasChildren && (\n    <ChevronRight\n      aria-hidden=\"true\"\n      className={cn(\n        'size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth group-data-[collapsible=icon]:hidden motion-reduce:transition-none',\n        isOpen ? 'rotate-90' : 'rtl:rotate-180',\n        isActive && isOpen && 'text-primary',\n      )}\n    />\n  );\n\n  const itemClassName = cn(\n    navItemVariants({ state: isActive ? 'active' : 'default' }),\n    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n    'min-h-11 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-2 group-data-[collapsible=icon]:w-11 group-data-[collapsible=icon]:h-11',\n    className,\n  );\n\n  const ariaProps = isActive ? { 'aria-current': 'page' as const } : {};\n\n  // --- Collapsed: icon-only with tooltip, flyout popover for children ---\n  if (isCollapsed) {\n    const collapsedIconElement = (\n      <span\n        data-slot=\"nav-icon\"\n        className=\"flex shrink-0 items-center justify-center p-0.5 [&>svg]:size-4\"\n      >\n        {icon}\n      </span>\n    );\n\n    const triggerElement = href ? (\n      <a\n        href={href}\n        className={cn(itemClassName)}\n        aria-label={accessibleLabel}\n        {...ariaProps}\n        data-slot=\"app-sidebar-nav-item\"\n      >\n        {collapsedIconElement}\n      </a>\n    ) : (\n      <button\n        type=\"button\"\n        onClick={hasChildren ? () => setIsOpen(!isOpen) : onClick}\n        className={cn(itemClassName, 'cursor-pointer')}\n        aria-label={accessibleLabel}\n        {...ariaProps}\n        data-slot=\"app-sidebar-nav-item\"\n      >\n        {collapsedIconElement}\n      </button>\n    );\n\n    if (!hasChildren) {\n      if (!label) return triggerElement;\n      return (\n        <Tooltip>\n          <TooltipTrigger render={triggerElement} />\n          <TooltipPopup side={floatingSide} sideOffset={8}>\n            {label}\n          </TooltipPopup>\n        </Tooltip>\n      );\n    }\n\n    return (\n      <PopoverRoot>\n        <PopoverTrigger\n          className={cn(itemClassName, 'cursor-pointer')}\n          aria-label={accessibleLabel}\n          data-slot=\"app-sidebar-nav-item\"\n        >\n          {collapsedIconElement}\n        </PopoverTrigger>\n        <PopoverPopup\n          side={floatingSide}\n          align=\"start\"\n          sideOffset={0}\n          alignOffset={0}\n          anchor={flyoutAnchor}\n          collisionAvoidance={{\n            side: 'none',\n            align: 'none',\n            fallbackAxisSide: 'none',\n          }}\n          positionMethod=\"fixed\"\n          aria-label={`${label} sub-navigation`}\n          style={\n            {\n              '--app-sidebar-flyout-panel-bg': flyoutPanelBackground,\n            } as React.CSSProperties\n          }\n          className={cn(\n            'flex h-[var(--anchor-height)] w-[276px] border-0 bg-transparent p-0 ring-0 shadow-none',\n            'overflow-clip',\n            flyoutFrameEdgeClassName,\n          )}\n        >\n          <div\n            className={cn(\n              'flex h-full w-64 flex-col gap-0.5 overflow-y-auto p-3 shadow-[var(--shadow-hover-card)]',\n              'supports-backdrop-filter:backdrop-blur-[60px] [background-image:var(--app-sidebar-flyout-panel-bg)] delight-tooltip-stagger',\n              flyoutPanelEdgeClassName,\n            )}\n            data-slot=\"app-sidebar-nav-flyout-panel\"\n            role=\"group\"\n            aria-label={label}\n          >\n            <p\n              className=\"px-2 pb-2 pt-1 text-xs font-semibold text-primary opacity-70\"\n              aria-hidden=\"true\"\n            >\n              {label}\n            </p>\n            {children}\n          </div>\n        </PopoverPopup>\n      </PopoverRoot>\n    );\n  }\n\n  // --- Expanded: full item with optional inline sub-nav ---\n  const handleClick = () => {\n    if (hasChildren) {\n      setIsOpen(!isOpen);\n    }\n    onClick?.();\n  };\n\n  const mainElement =\n    href && !hasChildren ? (\n      <a\n        href={href}\n        className={itemClassName}\n        aria-label={accessibleLabel}\n        {...ariaProps}\n        data-slot=\"app-sidebar-nav-item\"\n      >\n        {iconElement}\n        {labelElement}\n        {badgeElement}\n        {chevronElement}\n      </a>\n    ) : (\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={cn(itemClassName, 'cursor-pointer')}\n        aria-label={accessibleLabel}\n        aria-expanded={hasChildren ? isOpen : undefined}\n        aria-controls={hasChildren ? subNavId : undefined}\n        {...ariaProps}\n        data-slot=\"app-sidebar-nav-item\"\n      >\n        {iconElement}\n        {labelElement}\n        {badgeElement}\n        {chevronElement}\n      </button>\n    );\n\n  if (!hasChildren) return mainElement;\n\n  return (\n    <>\n      {mainElement}\n      {isOpen && (\n        <ul\n          id={subNavId}\n          role=\"group\"\n          aria-label={`${label} sub-navigation`}\n          className=\"flex flex-col items-start py-1 pl-6\"\n        >\n          {children}\n        </ul>\n      )}\n    </>\n  );\n}\n\nAppSidebarNavItem.displayName = 'AppSidebar.NavItem';\n\n// ============================================\n// Nav Sub Component\n// ============================================\n\nexport interface AppSidebarNavSubProps {\n  label: string;\n  badge?: string | number;\n  isActive?: boolean;\n  href?: string;\n  onClick?: () => void;\n  className?: string;\n}\n\nfunction AppSidebarNavSub({\n  label,\n  badge,\n  isActive = false,\n  href,\n  onClick,\n  className,\n}: AppSidebarNavSubProps) {\n  const accessibleLabel = formatAccessibleLabel(label, badge);\n\n  const itemClassName = cn(\n    navItemVariants({ state: isActive ? 'active' : 'default' }),\n    'min-h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n    'transition-[color,background-color,transform] ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0',\n    className,\n  );\n\n  const ariaProps = isActive ? { 'aria-current': 'page' as const } : {};\n\n  const content = (\n    <>\n      <span className=\"flex-1 text-start\">{label}</span>\n      {badge != null && (\n        <Badge\n          size=\"sm\"\n          variant=\"soft\"\n          color={isActive ? 'secondary' : 'primary'}\n          aria-hidden=\"true\"\n        >\n          {badge}\n        </Badge>\n      )}\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        className={itemClassName}\n        aria-label={accessibleLabel}\n        {...ariaProps}\n        data-slot=\"app-sidebar-nav-sub\"\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(itemClassName, 'cursor-pointer delight-selection-press')}\n      aria-label={accessibleLabel}\n      {...ariaProps}\n      data-slot=\"app-sidebar-nav-sub\"\n    >\n      {content}\n    </button>\n  );\n}\nAppSidebarNavSub.displayName = 'AppSidebar.NavSub';\n\n// ============================================\n// Nav Skeleton\n// ============================================\n\nexport interface AppSidebarNavSkeletonProps {\n  /** Number of skeleton items to show */\n  count?: number;\n  className?: string;\n}\n\nfunction AppSidebarNavSkeleton({\n  count = 3,\n  className,\n}: AppSidebarNavSkeletonProps) {\n  const skeletonCount = getSkeletonCount(count, 3);\n\n  return (\n    <SidebarGroup\n      className={cn(\n        'shrink-0 p-0 group-data-[collapsible=icon]:w-auto',\n        className,\n      )}\n    >\n      <SidebarGroupContent>\n        <SidebarMenu className=\"gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2\">\n          {Array.from({ length: skeletonCount }).map((_, i) => (\n            <SidebarMenuItem key={`nav-skeleton-${i}`}>\n              <SidebarNavSkeleton />\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  );\n}\n\nAppSidebarNavSkeleton.displayName = 'AppSidebar.NavSkeleton';\nmarkAppSidebarImplicitSlot(AppSidebarNavSkeleton, 'content');\n\n// ============================================\n// Chat List Component\n// ============================================\n\nexport interface AppSidebarChatListProps {\n  /** Section label */\n  label?: string;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AppSidebarChatList({\n  label = 'Recent Chats',\n  children,\n  className,\n}: AppSidebarChatListProps) {\n  const { state } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n\n  // Collapsed state doesn't show chat list\n  if (isCollapsed) {\n    return null;\n  }\n\n  return (\n    <SidebarGroup\n      data-slot=\"app-sidebar-chat-list\"\n      className={cn('mt-4 flex min-h-0 flex-1 flex-col p-0', className)}\n    >\n      <SidebarGroupLabel className=\"shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground\">\n        {label}\n      </SidebarGroupLabel>\n      <SidebarGroupContent className=\"flex-1 overflow-hidden\">\n        <div\n          className=\"flex h-full flex-col overflow-y-auto pb-5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n          tabIndex={0}\n          role=\"list\"\n          aria-label={label}\n        >\n          {children}\n        </div>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  );\n}\n\nAppSidebarChatList.displayName = 'AppSidebar.ChatList';\nmarkAppSidebarImplicitSlot(AppSidebarChatList, 'content');\n\n// ============================================\n// Chat Item Component\n// ============================================\n\nconst chatItemVariants = cva(\n  'flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0',\n  {\n    variants: {\n      state: {\n        default: 'hover:bg-muted',\n        hover: 'bg-muted',\n        selected: 'bg-primary/10',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n    },\n  },\n);\n\nexport interface AppSidebarChatItemProps\n  extends VariantProps<typeof chatItemVariants> {\n  /** Chat title */\n  title: string;\n  /** Time indicator (e.g., \"12h ago\") */\n  time?: string;\n  /** Icon for collapsed view (defaults to chat bubble) */\n  icon?: React.ReactNode;\n  /** Whether this chat is selected */\n  isSelected?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /** Context menu handler (right-click) */\n  onContextMenu?: (event: React.MouseEvent) => void;\n  /** Additional className */\n  className?: string;\n}\n\nfunction AppSidebarChatItem({\n  title,\n  time,\n  icon,\n  isSelected = false,\n  onClick,\n  onContextMenu,\n  className,\n}: AppSidebarChatItemProps) {\n  const { state } = useSidebar();\n  const { side: sidebarSide } = useAppSidebarLayout();\n  const isCollapsed = state === 'collapsed';\n  const tooltipSide = sidebarSide === 'right' ? 'left' : 'right';\n\n  if (isCollapsed) {\n    const collapsedButton = (\n      <button\n        type=\"button\"\n        onClick={onClick}\n        onContextMenu={onContextMenu}\n        data-slot=\"app-sidebar-chat-item\"\n        aria-label={title || undefined}\n        className={cn(\n          'flex size-11 items-center justify-center rounded-md transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          isSelected ? 'bg-primary/10' : 'hover:bg-muted',\n          className,\n        )}\n      >\n        {icon || <MessageCircle className=\"size-5 text-secondary-foreground\" />}\n      </button>\n    );\n\n    if (!title && !time) {\n      return collapsedButton;\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={collapsedButton} />\n        <TooltipPopup side={tooltipSide} sideOffset={8}>\n          <div className=\"flex flex-col\">\n            <span className=\"font-medium\">{title}</span>\n            {time && (\n              <span className=\"text-xs text-muted-foreground\">{time}</span>\n            )}\n          </div>\n        </TooltipPopup>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div role=\"listitem\">\n      <button\n        type=\"button\"\n        onClick={onClick}\n        onContextMenu={onContextMenu}\n        data-slot=\"app-sidebar-chat-item\"\n        aria-label={title}\n        className={cn(\n          chatItemVariants({ state: isSelected ? 'selected' : 'default' }),\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          className,\n        )}\n      >\n        <span className=\"text-base font-semibold text-secondary-foreground truncate\">\n          {title}\n        </span>\n        {time && (\n          <span className=\"text-xs font-normal text-muted-foreground shrink-0\">\n            {time}\n          </span>\n        )}\n      </button>\n    </div>\n  );\n}\n\nAppSidebarChatItem.displayName = 'AppSidebar.ChatItem';\n\n// ============================================\n// Chat List Skeleton\n// ============================================\n\nexport interface AppSidebarChatListSkeletonProps {\n  /** Number of skeleton items to show */\n  count?: number;\n  /** Section label */\n  label?: string;\n  className?: string;\n}\n\nfunction AppSidebarChatListSkeleton({\n  count = 5,\n  label = 'Recent Chats',\n  className,\n}: AppSidebarChatListSkeletonProps) {\n  const skeletonCount = getSkeletonCount(count, 5);\n\n  return (\n    <SidebarGroup\n      className={cn(\n        'mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n    >\n      <SidebarGroupLabel className=\"shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground\">\n        {label}\n      </SidebarGroupLabel>\n      <SidebarGroupContent className=\"flex-1 overflow-hidden\">\n        <div className=\"flex h-full flex-col overflow-y-auto pb-5\">\n          {Array.from({ length: skeletonCount }).map((_, i) => (\n            <SidebarMenuSkeleton key={`chat-skeleton-${i}`} />\n          ))}\n        </div>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  );\n}\n\nAppSidebarChatListSkeleton.displayName = 'AppSidebar.ChatListSkeleton';\nmarkAppSidebarImplicitSlot(AppSidebarChatListSkeleton, 'content');\n\n// ============================================\n// Account Component\n// ============================================\n\nexport interface AppSidebarAccountProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** User's name */\n  name: string;\n  /** Subtitle text (e.g., email, role) */\n  subtitle?: string;\n  /** User's avatar URL */\n  avatarSrc?: string;\n  /** Whether user is online */\n  isOnline?: boolean;\n  /** Click handler for the expand button */\n  onExpand?: () => void;\n}\n\nfunction AppSidebarAccount({\n  name,\n  subtitle,\n  avatarSrc,\n  isOnline = false,\n  onExpand,\n  className,\n}: AppSidebarAccountProps) {\n  const { state } = useSidebar();\n  const { side: sidebarSide } = useAppSidebarLayout();\n  const isCollapsed = state === 'collapsed';\n  const tooltipSide = sidebarSide === 'right' ? 'left' : 'right';\n\n  if (isCollapsed) {\n    const avatarButton = (\n      <button\n        type=\"button\"\n        onClick={onExpand}\n        data-slot=\"app-sidebar-account\"\n        aria-label={name ? `${name} account menu` : 'Account menu'}\n        aria-haspopup=\"true\"\n        className={cn(\n          'flex items-center justify-center rounded-lg transition-opacity duration-200 ease-smooth hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n          className,\n        )}\n      >\n        <Avatar\n          src={avatarSrc}\n          alt={name}\n          fallback={name}\n          size=\"sm\"\n          indicator={isOnline ? 'online' : undefined}\n        />\n      </button>\n    );\n\n    if (!name && !subtitle) return avatarButton;\n\n    return (\n      <Tooltip>\n        <TooltipTrigger render={avatarButton} />\n        <TooltipPopup side={tooltipSide} sideOffset={8}>\n          <div className=\"flex flex-col\">\n            {name && <span className=\"font-medium\">{name}</span>}\n            {subtitle && (\n              <span className=\"text-xs text-muted-foreground\">{subtitle}</span>\n            )}\n          </div>\n        </TooltipPopup>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onExpand}\n      data-slot=\"app-sidebar-account\"\n      aria-label={name ? `${name} account menu` : 'Account menu'}\n      aria-haspopup=\"true\"\n      className={cn(\n        'flex w-full items-center gap-2 rounded-md p-2 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none',\n        className,\n      )}\n    >\n      <Avatar\n        src={avatarSrc}\n        alt={name}\n        fallback={name}\n        size=\"sm\"\n        indicator={isOnline ? 'online' : undefined}\n      />\n      <div className=\"flex flex-1 flex-col items-start overflow-hidden\">\n        <span className=\"w-full truncate text-start text-sm font-medium text-sidebar-foreground\">\n          {name}\n        </span>\n        {subtitle && (\n          <span className=\"w-full truncate text-start text-xs font-light text-sidebar-foreground\">\n            {subtitle}\n          </span>\n        )}\n      </div>\n      <ChevronRight\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 text-muted-foreground rtl:rotate-180\"\n      />\n    </button>\n  );\n}\n\nAppSidebarAccount.displayName = 'AppSidebar.Account';\nmarkAppSidebarImplicitSlot(AppSidebarAccount, 'footer');\n\n// ============================================\n// Account Skeleton\n// ============================================\n\nfunction AppSidebarAccountSkeleton({ className }: { className?: string }) {\n  return <SidebarAccountSkeleton className={className} />;\n}\n\nAppSidebarAccountSkeleton.displayName = 'AppSidebar.AccountSkeleton';\nmarkAppSidebarImplicitSlot(AppSidebarAccountSkeleton, 'footer');\n\n// ============================================\n// Full Sidebar Skeleton\n// ============================================\n\nexport interface AppSidebarSkeletonProps {\n  /** Number of nav skeleton items */\n  navCount?: number;\n  /** Number of chat skeleton items */\n  chatCount?: number;\n  /** Logo element */\n  logo?: React.ReactNode;\n  /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */\n  compactedLogo?: React.ReactNode;\n  /** Collapsible mode */\n  collapsible?: 'offcanvas' | 'icon' | 'none';\n  /** Side of the screen */\n  side?: 'left' | 'right';\n  /** Whether to round sidebar corners */\n  rounded?: boolean;\n  /** Custom background color class for the sidebar (e.g., 'bg-card') */\n  sidebarBgColor?: string;\n  className?: string;\n}\n\nfunction AppSidebarSkeleton({\n  navCount = 4,\n  chatCount = 5,\n  logo,\n  compactedLogo,\n  collapsible = 'icon',\n  side,\n  rounded = false,\n  sidebarBgColor,\n  className,\n}: AppSidebarSkeletonProps) {\n  const { state, containerRef } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n  const resolvedSide = useResolvedAppSidebarSide({\n    containerRef,\n    explicitSide: side,\n  });\n\n  const bgClass = getSidebarBgClass(isCollapsed, sidebarBgColor);\n\n  return (\n    <Sidebar\n      collapsible={collapsible}\n      side={resolvedSide}\n      rounded={rounded}\n      className={cn(bgClass, className)}\n    >\n      <SidebarHeader className=\"gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4\">\n        <AppSidebarLogo logo={logo} compactedLogo={compactedLogo} />\n      </SidebarHeader>\n\n      <SidebarContent className=\"flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4\">\n        <AppSidebarNavSkeleton count={navCount} />\n        <AppSidebarChatListSkeleton count={chatCount} />\n      </SidebarContent>\n\n      <SidebarFooter className=\"gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4\">\n        <AppSidebarAccountSkeleton />\n      </SidebarFooter>\n    </Sidebar>\n  );\n}\n\nAppSidebarSkeleton.displayName = 'AppSidebar.Skeleton';\n\n// ============================================\n// Main App Sidebar\n// ============================================\n\nexport interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Logo element or configuration */\n  logo?: React.ReactNode;\n  /** Icon to show when sidebar is compacted. Defaults to Humain logomark. */\n  compactedLogo?: React.ReactNode;\n  /** Subtext displayed below the logo (e.g., \"Dashboard\"). Hidden when collapsed. */\n  logoSubtext?: string;\n  /** Collapsible mode - 'icon' shows only icons when collapsed, 'none' disables collapsing */\n  collapsible?: 'offcanvas' | 'icon' | 'none';\n  /** Side of the screen. When omitted, resolves from the nearest DOM direction. */\n  side?: 'left' | 'right';\n  /** Whether to round sidebar corners */\n  rounded?: boolean;\n  /** Custom background color class for the sidebar (e.g., 'bg-card'). Defaults to bg-muted when expanded, bg-transparent when collapsed. */\n  sidebarBgColor?: string;\n  /** Children (compound components) */\n  children?: React.ReactNode;\n}\n\n/**\n * AppSidebar is a full-featured application sidebar with navigation, chat list, and account sections.\n * Supports collapsible modes with a unified logo toggle and loading skeletons.\n *\n * @llms Full-featured app sidebar with nav, chat list, account, collapsible modes\n * @example\n * ```tsx\n * <AppSidebar logo={<Logo />} collapsible=\"icon\">\n *   <AppSidebar.Nav>\n *     <AppSidebar.NavItem icon={<Home />} label=\"Home\" isActive />\n *   </AppSidebar.Nav>\n *   <AppSidebar.ChatList>\n *     <AppSidebar.ChatItem title=\"Chat 1\" />\n *   </AppSidebar.ChatList>\n *   <AppSidebar.Account name=\"User\" subtitle=\"user@example.com\" />\n * </AppSidebar>\n * ```\n */\nfunction AppSidebarRoot({\n  logo,\n  compactedLogo,\n  logoSubtext,\n  collapsible = 'icon',\n  side,\n  rounded = false,\n  sidebarBgColor,\n  className,\n  children,\n  dir,\n  ...props\n}: AppSidebarProps) {\n  const { state, containerRef } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n  const resolvedSide = useResolvedAppSidebarSide({\n    containerRef,\n    explicitDir: dir,\n    explicitSide: side,\n  });\n\n  const bgClass = getSidebarBgClass(isCollapsed, sidebarBgColor);\n\n  const slots = useSlotChildren(children);\n\n  return (\n    <AppSidebarLayoutContext.Provider value={{ side: resolvedSide }}>\n      <Sidebar\n        collapsible={collapsible}\n        side={resolvedSide}\n        rounded={rounded}\n        dir={dir}\n        className={cn(bgClass, className)}\n        {...props}\n      >\n        <SidebarHeader className=\"gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4\">\n          <AppSidebarLogo\n            logo={logo}\n            compactedLogo={compactedLogo}\n            subtext={logoSubtext}\n          />\n        </SidebarHeader>\n\n        <SidebarContent className=\"flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4\">\n          {slots.explicitContent\n            ? (slots.explicitContent.props as AppSidebarSlotProps).children\n            : slots.content}\n        </SidebarContent>\n\n        <SidebarFooter className=\"gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4\">\n          {slots.explicitFooter\n            ? (slots.explicitFooter.props as AppSidebarSlotProps).children\n            : slots.footer}\n        </SidebarFooter>\n      </Sidebar>\n    </AppSidebarLayoutContext.Provider>\n  );\n}\n\nAppSidebarRoot.displayName = 'AppSidebar';\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const AppSidebar = Object.assign(AppSidebarRoot, {\n  Header: AppSidebarHeader,\n  Content: AppSidebarContent,\n  Footer: AppSidebarFooter,\n  Nav: AppSidebarNav,\n  NavSection: AppSidebarNavSection,\n  NavItem: AppSidebarNavItem,\n  NavSub: AppSidebarNavSub,\n  NavSkeleton: AppSidebarNavSkeleton,\n  ChatList: AppSidebarChatList,\n  ChatItem: AppSidebarChatItem,\n  ChatListSkeleton: AppSidebarChatListSkeleton,\n  Account: AppSidebarAccount,\n  AccountSkeleton: AppSidebarAccountSkeleton,\n  Skeleton: AppSidebarSkeleton,\n});\n\n// ============================================\n// Type Exports\n// ============================================\n\n// Re-export mobile detection utilities for client use\nexport { MOBILE_BREAKPOINT, useIsMobile } from '@/hooks/use-mobile';\nexport type {\n  AppSidebarAccountProps as AccountProps,\n  AppSidebarChatItemProps as ChatItemProps,\n  AppSidebarChatListProps as ChatListProps,\n  AppSidebarChatListSkeletonProps as ChatListSkeletonProps,\n  AppSidebarNavItemProps as NavItemProps,\n  AppSidebarNavProps as NavProps,\n  AppSidebarNavSectionProps as NavSectionProps,\n  AppSidebarNavSkeletonProps as NavSkeletonProps,\n  AppSidebarNavSubProps as NavSubProps,\n  AppSidebarSkeletonProps as SkeletonProps,\n  AppSidebarSlotProps as SlotProps,\n};\n// Re-export sidebar primitives for custom compositions\nexport {\n  chatItemVariants,\n  navItemVariants,\n  // Re-export base components for advanced usage\n  Sidebar,\n  SidebarAccountSkeleton,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarNavSkeleton,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n};\n"],"mappings":"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"}

package/dist/index226.js

@@ -1,193 +1,70 @@
-"use client";
 import { cn } from "./index2.js";
-import { Avatar, AvatarGroup } from "./index70.js";
-import { BrandIcon } from "./index71.js";
-import { PageBackground } from "./index225.js";
-import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/templates/AuthPageLayout/AuthPageLayout.tsx
-var DEFAULT_AVATARS = [
-	{
-		fallback: "HA",
-		alt: "HUMAIN account member"
-	},
-	{
-		fallback: "OS",
-		alt: "HUMAIN OS member"
-	},
-	{
-		fallback: "AI",
-		alt: "HUMAIN AI member"
-	}
-];
-function isAsideConfig(aside) {
-	return typeof aside === "object" && aside !== null && !Array.isArray(aside) && !React.isValidElement(aside);
-}
-function renderActionElement(action, className) {
-	if (action.render) return React.cloneElement(action.render, {
-		className: cn(action.render.props.className, className),
-		onClick: action.onClick ?? action.render.props.onClick,
-		children: action.render.props.children ?? action.label
-	});
-	if (action.href) return /* @__PURE__ */ jsx("a", {
-		className,
-		href: action.href,
-		onClick: action.onClick,
-		children: action.label
-	});
-	return /* @__PURE__ */ jsx("button", {
-		className,
-		type: "button",
-		onClick: action.onClick,
-		children: action.label
+//#region src/components/templates/PageBackground/PageBackground.tsx
+/** Grid pattern: 17 vertical + 17 horizontal lines at 48px spacing */
+function GridPattern() {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "stroke-border",
+		strokeWidth: "1",
+		children: [Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
+			x1: i * 48,
+			y1: "0",
+			x2: i * 48,
+			y2: "768"
+		}, `v-${i}`)), Array.from({ length: 17 }).map((_, i) => /* @__PURE__ */ jsx("line", {
+			x1: "0",
+			y1: i * 48,
+			x2: "768",
+			y2: i * 48
+		}, `h-${i}`))]
 	});
 }
-function AuthAsidePanel({ title, description, cardTitle, cardDescription, icon, avatars, avatarOverflowCount }) {
-	const resolvedAvatars = avatars ?? DEFAULT_AVATARS;
-	const defaultOverflowCount = avatars ? 0 : 3695;
-	const visibleAvatars = resolvedAvatars.slice(0, 3);
-	const overflowAvatarCount = Math.max(0, resolvedAvatars.length - visibleAvatars.length) + Math.max(0, avatarOverflowCount ?? defaultOverflowCount);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "auth-page-aside-panel",
-		className: "relative flex min-h-full w-full flex-col overflow-hidden rounded-xl bg-primary p-8 text-primary-foreground",
+/** Circular pattern: 8 concentric circles at 48px radius increments */
+function CircularPattern() {
+	return /* @__PURE__ */ jsx("g", {
+		className: "stroke-border",
+		strokeWidth: "1",
+		fill: "none",
 		children: [
-			/* @__PURE__ */ jsx(BrandIcon, {
-				"aria-hidden": true,
-				className: "-start-16 top-1/3 absolute size-72 -rotate-12 text-primary-foreground/10",
-				icon: "mark",
-				size: "2xl"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative z-10 flex max-w-xl flex-col gap-6",
-				children: [title && /* @__PURE__ */ jsx("h2", {
-					className: "text-display-md font-bold leading-tight text-primary-foreground lg:text-display-lg",
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: "text-md leading-normal text-primary-foreground lg:text-xl",
-					children: description
-				})]
-			}),
-			(cardTitle || cardDescription) && /* @__PURE__ */ jsxs("div", {
-				"data-slot": "auth-page-aside-card",
-				className: "relative z-10 mt-auto flex min-h-[248px] flex-col overflow-visible rounded-2xl bg-card px-10 py-8 text-card-foreground",
-				children: [
-					/* @__PURE__ */ jsx("svg", {
-						"aria-hidden": true,
-						"data-slot": "auth-page-aside-notch",
-						className: "pointer-events-none absolute top-0 end-0 z-0 h-[94.5px] w-[95px] overflow-visible text-primary",
-						focusable: "false",
-						preserveAspectRatio: "none",
-						viewBox: "0 0 95 94.5",
-						children: /* @__PURE__ */ jsx("path", {
-							d: "M0 0H95V94.5C95 81.2452 84.2548 70.5 71 70.5H48C34.7452 70.5 24 59.7548 24 46.5V24C24 10.7452 13.2548 0 0 0Z",
-							fill: "currentColor"
-						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						"data-slot": "auth-page-aside-icon",
-						className: "absolute end-1 top-1 z-20 flex size-[60px] items-center justify-center rounded-[12px] bg-card text-primary",
-						children: icon ?? /* @__PURE__ */ jsx(BrandIcon, {
-							"aria-hidden": true,
-							className: "text-[40px]",
-							"data-slot": "auth-page-aside-symbol",
-							icon: "symbol",
-							size: "fluid"
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "relative z-10 flex flex-col gap-6 pe-16",
-						children: [cardTitle && /* @__PURE__ */ jsx("h3", {
-							className: "text-display-sm font-bold leading-tight text-card-foreground",
-							children: cardTitle
-						}), cardDescription && /* @__PURE__ */ jsx("p", {
-							className: "text-lg leading-normal text-card-foreground",
-							children: cardDescription
-						})]
-					}),
-					(visibleAvatars.length > 0 || overflowAvatarCount > 0) && /* @__PURE__ */ jsx("div", {
-						className: "relative z-10 mt-auto flex justify-end pt-5",
-						children: /* @__PURE__ */ jsxs(AvatarGroup, {
-							size: "sm",
-							children: [visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx(Avatar, {
-								alt: avatar.alt,
-								fallback: avatar.fallback,
-								src: avatar.src
-							}, `${avatar.fallback ?? avatar.alt ?? "avatar"}-${index}`)), overflowAvatarCount > 0 && /* @__PURE__ */ jsx("div", {
-								role: "img",
-								"aria-label": `${overflowAvatarCount} more account members`,
-								className: "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--background)_97%,var(--foreground)_3%)]",
-								children: /* @__PURE__ */ jsxs("span", {
-									"aria-hidden": "true",
-									className: "font-normal text-foreground text-xs leading-4",
-									children: ["+", overflowAvatarCount]
-								})
-							})]
-						})
-					})
-				]
-			})
-		]
+			48,
+			96,
+			144,
+			192,
+			240,
+			288,
+			336,
+			384
+		].map((radius) => /* @__PURE__ */ jsx("circle", {
+			cx: "384",
+			cy: "384",
+			r: radius
+		}, radius))
 	});
 }
-function AuthPageLayout({ logo, title, description, aside, showAside = true, showAsideOnMobile = false, formMaxWidthClassName = "max-w-[520px]", formClassName, asideClassName, backgroundPattern = "none", className, children, ...props }) {
-	const shouldRenderAside = showAside && aside != null;
-	const stackAsideOnMobile = shouldRenderAside && showAsideOnMobile;
-	return /* @__PURE__ */ jsxs("main", {
-		...props,
-		"data-slot": "auth-page-layout",
-		className: cn("relative isolate flex min-h-screen overflow-hidden bg-surface-1 text-foreground", stackAsideOnMobile ? "flex-col lg:flex-row" : "flex-row", className),
-		children: [
-			backgroundPattern !== "none" && /* @__PURE__ */ jsx(PageBackground, {
-				pattern: backgroundPattern,
-				offset: "icon-center",
-				className: "-z-10 opacity-70"
-			}),
-			/* @__PURE__ */ jsx("section", {
-				"aria-label": "Authentication form",
-				"data-slot": "auth-page-form-pane",
-				"data-testid": "auth-page-form-pane",
-				className: cn("flex min-w-0 items-center justify-center px-6 py-12 sm:px-8 lg:min-h-screen lg:py-24", shouldRenderAside ? "flex-1 lg:w-1/2 lg:flex-none" : "flex-1", stackAsideOnMobile ? "min-h-[50vh]" : "min-h-screen"),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: cn("flex w-full min-w-0 flex-col gap-6", formMaxWidthClassName, formClassName),
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							"data-slot": "auth-page-logo",
-							className: "flex h-8 items-center px-6 text-foreground",
-							children: logo ?? /* @__PURE__ */ jsx(BrandIcon, {
-								icon: "mark",
-								size: "lg"
-							})
-						}),
-						(title || description) && /* @__PURE__ */ jsxs("header", {
-							className: "flex flex-col gap-2 px-6",
-							children: [title && /* @__PURE__ */ jsx("h1", {
-								className: "text-display-xs font-semibold leading-tight text-foreground",
-								children: title
-							}), description && /* @__PURE__ */ jsx("p", {
-								className: "text-md leading-normal text-secondary-foreground",
-								children: description
-							})]
-						}),
-						/* @__PURE__ */ jsx("div", {
-							"data-slot": "auth-page-form-content",
-							className: "px-6",
-							children
-						})
-					]
-				})
-			}),
-			shouldRenderAside && /* @__PURE__ */ jsx("section", {
-				"aria-label": "Authentication context",
-				"data-slot": "auth-page-aside-pane",
-				"data-testid": "auth-page-aside-pane",
-				className: cn("min-w-0 flex-1 bg-muted p-5 lg:min-h-screen", "lg:w-1/2 lg:flex-none", stackAsideOnMobile ? "min-h-[50vh]" : "min-h-screen", showAsideOnMobile ? "flex" : "hidden lg:flex", asideClassName),
-				children: isAsideConfig(aside) ? /* @__PURE__ */ jsx(AuthAsidePanel, { ...aside }) : aside
-			})
-		]
+var FADE_MASK = "radial-gradient(circle at center, black 0%, transparent 70%)";
+function PageBackground({ pattern, offset = "top", className }) {
+	const isIconCenter = offset === "icon-center";
+	const topOffset = isIconCenter ? void 0 : offset === "top" ? -260 : offset === "center" ? -384 : offset;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-background",
+		className: cn("pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]", isIconCenter && "top-1/2 -translate-y-1/2", className),
+		style: {
+			...topOffset !== void 0 ? { top: topOffset } : {},
+			maskImage: FADE_MASK,
+			WebkitMaskImage: FADE_MASK
+		},
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			className: "absolute inset-0 size-[768px]",
+			viewBox: "0 0 768 768",
+			fill: "none",
+			focusable: "false",
+			children: pattern === "grid" ? /* @__PURE__ */ jsx(GridPattern, {}) : /* @__PURE__ */ jsx(CircularPattern, {})
+		})
 	});
 }
-AuthPageLayout.displayName = "AuthPageLayout";
+PageBackground.displayName = "PageBackground";
 //#endregion
-export { AuthAsidePanel, AuthPageLayout, renderActionElement };
+export { PageBackground };
 
 //# sourceMappingURL=index226.js.map

package/dist/index226.js.map

@@ -1 +1 @@
-{"version":3,"file":"index226.js","names":[],"sources":["../src/components/templates/AuthPageLayout/AuthPageLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar, AvatarGroup } from '@/components/molecules/data/Avatar';\nimport { BrandIcon } from '@/components/molecules/data/BrandIcon';\nimport {\n  PageBackground,\n  type PageBackgroundProps,\n} from '@/components/templates/PageBackground';\nimport { cn } from '@/lib/utils';\n\nexport interface AuthPageActionElementProps {\n  className?: string;\n  children?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nexport type AuthPageActionElement =\n  React.ReactElement<AuthPageActionElementProps>;\n\nexport interface AuthPageAction {\n  label: React.ReactNode;\n  href?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  render?: AuthPageActionElement;\n}\n\nexport interface AuthPageAvatar {\n  src?: string;\n  alt?: string;\n  fallback?: string;\n}\n\nexport interface AuthPageAsideConfig {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cardTitle?: React.ReactNode;\n  cardDescription?: React.ReactNode;\n  icon?: React.ReactNode;\n  avatars?: AuthPageAvatar[];\n  avatarOverflowCount?: number;\n}\n\nexport type AuthPageBackgroundPattern = PageBackgroundProps['pattern'] | 'none';\n\nexport interface AuthPageLayoutProps\n  extends Omit<React.ComponentProps<'main'>, 'title'> {\n  logo?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  aside?: AuthPageAsideConfig | React.ReactNode;\n  showAside?: boolean;\n  showAsideOnMobile?: boolean;\n  formMaxWidthClassName?: string;\n  formClassName?: string;\n  asideClassName?: string;\n  backgroundPattern?: AuthPageBackgroundPattern;\n}\n\nconst DEFAULT_AVATARS: AuthPageAvatar[] = [\n  { fallback: 'HA', alt: 'HUMAIN account member' },\n  { fallback: 'OS', alt: 'HUMAIN OS member' },\n  { fallback: 'AI', alt: 'HUMAIN AI member' },\n];\n\nfunction isAsideConfig(\n  aside: AuthPageAsideConfig | React.ReactNode,\n): aside is AuthPageAsideConfig {\n  return (\n    typeof aside === 'object' &&\n    aside !== null &&\n    !Array.isArray(aside) &&\n    !React.isValidElement(aside)\n  );\n}\n\nfunction renderActionElement(\n  action: AuthPageAction,\n  className?: string,\n): React.ReactElement {\n  if (action.render) {\n    return React.cloneElement(action.render, {\n      className: cn(action.render.props.className, className),\n      onClick: action.onClick ?? action.render.props.onClick,\n      children: action.render.props.children ?? action.label,\n    });\n  }\n\n  if (action.href) {\n    return (\n      <a className={className} href={action.href} onClick={action.onClick}>\n        {action.label}\n      </a>\n    );\n  }\n\n  return (\n    <button className={className} type=\"button\" onClick={action.onClick}>\n      {action.label}\n    </button>\n  );\n}\n\nfunction AuthAsidePanel({\n  title,\n  description,\n  cardTitle,\n  cardDescription,\n  icon,\n  avatars,\n  avatarOverflowCount,\n}: AuthPageAsideConfig): React.ReactElement {\n  const resolvedAvatars = avatars ?? DEFAULT_AVATARS;\n  const defaultOverflowCount = avatars ? 0 : 3695;\n  const visibleAvatars = resolvedAvatars.slice(0, 3);\n  const hiddenAvatarCount = Math.max(\n    0,\n    resolvedAvatars.length - visibleAvatars.length,\n  );\n  const configuredOverflowCount = Math.max(\n    0,\n    avatarOverflowCount ?? defaultOverflowCount,\n  );\n  const overflowAvatarCount = hiddenAvatarCount + configuredOverflowCount;\n\n  return (\n    <div\n      data-slot=\"auth-page-aside-panel\"\n      className=\"relative flex min-h-full w-full flex-col overflow-hidden rounded-xl bg-primary p-8 text-primary-foreground\"\n    >\n      <BrandIcon\n        aria-hidden\n        className=\"-start-16 top-1/3 absolute size-72 -rotate-12 text-primary-foreground/10\"\n        icon=\"mark\"\n        size=\"2xl\"\n      />\n      <div className=\"relative z-10 flex max-w-xl flex-col gap-6\">\n        {title && (\n          <h2 className=\"text-display-md font-bold leading-tight text-primary-foreground lg:text-display-lg\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <p className=\"text-md leading-normal text-primary-foreground lg:text-xl\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      {(cardTitle || cardDescription) && (\n        <div\n          data-slot=\"auth-page-aside-card\"\n          className=\"relative z-10 mt-auto flex min-h-[248px] flex-col overflow-visible rounded-2xl bg-card px-10 py-8 text-card-foreground\"\n        >\n          <svg\n            aria-hidden\n            data-slot=\"auth-page-aside-notch\"\n            className=\"pointer-events-none absolute top-0 end-0 z-0 h-[94.5px] w-[95px] overflow-visible text-primary\"\n            focusable=\"false\"\n            preserveAspectRatio=\"none\"\n            viewBox=\"0 0 95 94.5\"\n          >\n            <path\n              d=\"M0 0H95V94.5C95 81.2452 84.2548 70.5 71 70.5H48C34.7452 70.5 24 59.7548 24 46.5V24C24 10.7452 13.2548 0 0 0Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <div\n            data-slot=\"auth-page-aside-icon\"\n            className=\"absolute end-1 top-1 z-20 flex size-[60px] items-center justify-center rounded-[12px] bg-card text-primary\"\n          >\n            {icon ?? (\n              <BrandIcon\n                aria-hidden\n                className=\"text-[40px]\"\n                data-slot=\"auth-page-aside-symbol\"\n                icon=\"symbol\"\n                size=\"fluid\"\n              />\n            )}\n          </div>\n          <div className=\"relative z-10 flex flex-col gap-6 pe-16\">\n            {cardTitle && (\n              <h3 className=\"text-display-sm font-bold leading-tight text-card-foreground\">\n                {cardTitle}\n              </h3>\n            )}\n            {cardDescription && (\n              <p className=\"text-lg leading-normal text-card-foreground\">\n                {cardDescription}\n              </p>\n            )}\n          </div>\n          {(visibleAvatars.length > 0 || overflowAvatarCount > 0) && (\n            <div className=\"relative z-10 mt-auto flex justify-end pt-5\">\n              <AvatarGroup size=\"sm\">\n                {visibleAvatars.map((avatar, index) => (\n                  <Avatar\n                    key={`${avatar.fallback ?? avatar.alt ?? 'avatar'}-${index}`}\n                    alt={avatar.alt}\n                    fallback={avatar.fallback}\n                    src={avatar.src}\n                  />\n                ))}\n                {overflowAvatarCount > 0 && (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflowAvatarCount} more account members`}\n                    className=\"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--background)_97%,var(--foreground)_3%)]\"\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"font-normal text-foreground text-xs leading-4\"\n                    >\n                      +{overflowAvatarCount}\n                    </span>\n                  </div>\n                )}\n              </AvatarGroup>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction AuthPageLayout({\n  logo,\n  title,\n  description,\n  aside,\n  showAside = true,\n  showAsideOnMobile = false,\n  formMaxWidthClassName = 'max-w-[520px]',\n  formClassName,\n  asideClassName,\n  backgroundPattern = 'none',\n  className,\n  children,\n  ...props\n}: AuthPageLayoutProps): React.ReactElement {\n  const shouldRenderAside = showAside && aside != null;\n  const stackAsideOnMobile = shouldRenderAside && showAsideOnMobile;\n\n  return (\n    <main\n      {...props}\n      data-slot=\"auth-page-layout\"\n      className={cn(\n        'relative isolate flex min-h-screen overflow-hidden bg-surface-1 text-foreground',\n        stackAsideOnMobile ? 'flex-col lg:flex-row' : 'flex-row',\n        className,\n      )}\n    >\n      {backgroundPattern !== 'none' && (\n        <PageBackground\n          pattern={backgroundPattern}\n          offset=\"icon-center\"\n          className=\"-z-10 opacity-70\"\n        />\n      )}\n      <section\n        aria-label=\"Authentication form\"\n        data-slot=\"auth-page-form-pane\"\n        data-testid=\"auth-page-form-pane\"\n        className={cn(\n          'flex min-w-0 items-center justify-center px-6 py-12 sm:px-8 lg:min-h-screen lg:py-24',\n          shouldRenderAside ? 'flex-1 lg:w-1/2 lg:flex-none' : 'flex-1',\n          stackAsideOnMobile ? 'min-h-[50vh]' : 'min-h-screen',\n        )}\n      >\n        <div\n          className={cn(\n            'flex w-full min-w-0 flex-col gap-6',\n            formMaxWidthClassName,\n            formClassName,\n          )}\n        >\n          <div\n            data-slot=\"auth-page-logo\"\n            className=\"flex h-8 items-center px-6 text-foreground\"\n          >\n            {logo ?? <BrandIcon icon=\"mark\" size=\"lg\" />}\n          </div>\n          {(title || description) && (\n            <header className=\"flex flex-col gap-2 px-6\">\n              {title && (\n                <h1 className=\"text-display-xs font-semibold leading-tight text-foreground\">\n                  {title}\n                </h1>\n              )}\n              {description && (\n                <p className=\"text-md leading-normal text-secondary-foreground\">\n                  {description}\n                </p>\n              )}\n            </header>\n          )}\n          <div data-slot=\"auth-page-form-content\" className=\"px-6\">\n            {children}\n          </div>\n        </div>\n      </section>\n\n      {shouldRenderAside && (\n        <section\n          aria-label=\"Authentication context\"\n          data-slot=\"auth-page-aside-pane\"\n          data-testid=\"auth-page-aside-pane\"\n          className={cn(\n            'min-w-0 flex-1 bg-muted p-5 lg:min-h-screen',\n            'lg:w-1/2 lg:flex-none',\n            stackAsideOnMobile ? 'min-h-[50vh]' : 'min-h-screen',\n            showAsideOnMobile ? 'flex' : 'hidden lg:flex',\n            asideClassName,\n          )}\n        >\n          {isAsideConfig(aside) ? <AuthAsidePanel {...aside} /> : aside}\n        </section>\n      )}\n    </main>\n  );\n}\n\nAuthPageLayout.displayName = 'AuthPageLayout';\n\nexport { AuthAsidePanel, AuthPageLayout, renderActionElement };\n"],"mappings":"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"}
+{"version":3,"file":"index226.js","names":[],"sources":["../src/components/templates/PageBackground/PageBackground.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------------------------------*/\n\nexport interface PageBackgroundProps {\n  /** Pattern type - grid (straight lines) or circular (concentric rounded squares) */\n  pattern: 'grid' | 'circular';\n\n  /** Vertical offset from top - controls where pattern centers\n   * 'top' = -260px (standalone route default)\n   * 'center' = -384px (pattern center at container top)\n   * 'icon-center' = centers pattern in its positioned container\n   * number = custom pixel offset\n   */\n  offset?: 'top' | 'center' | 'icon-center' | number;\n\n  /** Optional className for customization */\n  className?: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Pattern Sub-components\n * -------------------------------------------------------------------------------------------------*/\n\n/** Grid pattern: 17 vertical + 17 horizontal lines at 48px spacing */\nfunction GridPattern() {\n  return (\n    <g className=\"stroke-border\" strokeWidth=\"1\">\n      {Array.from({ length: 17 }).map((_, i) => (\n        <line key={`v-${i}`} x1={i * 48} y1=\"0\" x2={i * 48} y2=\"768\" />\n      ))}\n      {Array.from({ length: 17 }).map((_, i) => (\n        <line key={`h-${i}`} x1=\"0\" y1={i * 48} x2=\"768\" y2={i * 48} />\n      ))}\n    </g>\n  );\n}\n\n/** Circular pattern: 8 concentric circles at 48px radius increments */\nfunction CircularPattern() {\n  return (\n    <g className=\"stroke-border\" strokeWidth=\"1\" fill=\"none\">\n      {[48, 96, 144, 192, 240, 288, 336, 384].map((radius) => (\n        <circle key={radius} cx=\"384\" cy=\"384\" r={radius} />\n      ))}\n    </g>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PageBackground Component\n * -------------------------------------------------------------------------------------------------*/\n\nconst FADE_MASK =\n  'radial-gradient(circle at center, black 0%, transparent 70%)';\n\nfunction PageBackground({\n  pattern,\n  offset = 'top',\n  className,\n}: PageBackgroundProps) {\n  const isIconCenter = offset === 'icon-center';\n  const topOffset = isIconCenter\n    ? undefined\n    : offset === 'top'\n      ? -260\n      : offset === 'center'\n        ? -384\n        : offset;\n\n  return (\n    <div\n      data-slot=\"page-background\"\n      className={cn(\n        'pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]',\n        isIconCenter && 'top-1/2 -translate-y-1/2',\n        className,\n      )}\n      style={{\n        ...(topOffset !== undefined ? { top: topOffset } : {}),\n        maskImage: FADE_MASK,\n        WebkitMaskImage: FADE_MASK,\n      }}\n      aria-hidden=\"true\"\n    >\n      {/* Pattern SVG - 768x768 */}\n      <svg\n        className=\"absolute inset-0 size-[768px]\"\n        viewBox=\"0 0 768 768\"\n        fill=\"none\"\n        focusable=\"false\"\n      >\n        {pattern === 'grid' ? <GridPattern /> : <CircularPattern />}\n      </svg>\n    </div>\n  );\n}\n\nPageBackground.displayName = 'PageBackground';\n\nexport { PageBackground };\n"],"mappings":";;;;AA2BA,SAAS,cAAc;CACrB,OACE,qBAAC,KAAD;EAAG,WAAU;EAAgB,aAAY;YAAzC,CACG,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,MAClC,oBAAC,QAAD;GAAqB,IAAI,IAAI;GAAI,IAAG;GAAI,IAAI,IAAI;GAAI,IAAG;EAAO,GAAnD,KAAK,GAA8C,CAC/D,GACA,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,MAClC,oBAAC,QAAD;GAAqB,IAAG;GAAI,IAAI,IAAI;GAAI,IAAG;GAAM,IAAI,IAAI;EAAK,GAAnD,KAAK,GAA8C,CAC/D,CACA;;AAEP;;AAGA,SAAS,kBAAkB;CACzB,OACE,oBAAC,KAAD;EAAG,WAAU;EAAgB,aAAY;EAAI,MAAK;YAC/C;GAAC;GAAI;GAAI;GAAK;GAAK;GAAK;GAAK;GAAK;EAAG,CAAC,CAAC,KAAK,WAC3C,oBAAC,UAAD;GAAqB,IAAG;GAAM,IAAG;GAAM,GAAG;EAAS,GAAtC,MAAsC,CACpD;CACA,CAAA;AAEP;AAMA,IAAM,YACJ;AAEF,SAAS,eAAe,EACtB,SACA,SAAS,OACT,aACsB;CACtB,MAAM,eAAe,WAAW;CAChC,MAAM,YAAY,eACd,KAAA,IACA,WAAW,QACT,OACA,WAAW,WACT,OACA;CAER,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uEACA,gBAAgB,4BAChB,SACF;EACA,OAAO;GACL,GAAI,cAAc,KAAA,IAAY,EAAE,KAAK,UAAU,IAAI,CAAC;GACpD,WAAW;GACX,iBAAiB;EACnB;EACA,eAAY;YAGZ,oBAAC,OAAD;GACE,WAAU;GACV,SAAQ;GACR,MAAK;GACL,WAAU;aAET,YAAY,SAAS,oBAAC,aAAD,CAAc,CAAA,IAAI,oBAAC,iBAAD,CAAkB,CAAA;EACvD,CAAA;CACF,CAAA;AAET;AAEA,eAAe,cAAc"}