@devalok/shilp-sutra 0.48.0 → 0.49.1

package/dist/shell/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","names":[],"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * TopBar v2 — Composition-based application top bar.\n *\n * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,\n * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.\n */\nimport { IconLogout, IconMoon, IconSun,IconUser } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { TruncatedText } from '../ui/truncated-text'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface TopBarUser {\n  name: string\n  email?: string\n  image?: string | null\n}\n\nexport interface UserMenuItem {\n  /** Display label */\n  label: string\n  /** Optional icon. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Navigate via onNavigate when clicked */\n  href?: string\n  /** Custom click handler */\n  onClick?: () => void\n  /** Render a separator before this item */\n  separator?: boolean\n  /** Text color semantic token (e.g. \"error\") — maps to text-{color} */\n  color?: string\n  /** Badge content — string for count, true for dot indicator */\n  badge?: string | boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n}\n\n// -----------------------------------------------------------------------\n// TopBar (root)\n// -----------------------------------------------------------------------\n\ninterface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  className?: string\n}\n\nconst TopBarRoot = React.forwardRef<HTMLElement, TopBarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    // Detect if a Center zone is present to switch to grid layout\n    const hasCenter = React.Children.toArray(children).some(\n      (child) => React.isValidElement(child) && child.type === TopBarCenter,\n    )\n\n    return (\n      <header\n        {...props}\n        ref={ref}\n        className={cn(\n          'z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: IconInput\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm\" aria-hidden=\"true\">\n          <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n        </span>\n      </button>\n    </TooltipTrigger>\n    <TooltipContent side=\"bottom\" align=\"center\">\n      {tooltip}\n    </TooltipContent>\n  </Tooltip>\n))\nTopBarIconButton.displayName = 'TopBar.IconButton'\n\n// -----------------------------------------------------------------------\n// TopBar.Title\n// -----------------------------------------------------------------------\n\ninterface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nconst TopBarTitle = React.forwardRef<HTMLHeadingElement, TopBarTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <h2\n      ref={ref}\n      className={cn(\n        'hidden text-ds-lg text-surface-fg md:block',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n)\nTopBarTitle.displayName = 'TopBar.Title'\n\n// -----------------------------------------------------------------------\n// TopBar.UserMenu\n// -----------------------------------------------------------------------\n\ninterface TopBarUserMenuProps {\n  user: TopBarUser\n  onNavigate?: (path: string) => void\n  onLogout?: () => void\n  userMenuItems?: UserMenuItem[]\n  className?: string\n}\n\nconst TopBarUserMenu = React.forwardRef<HTMLButtonElement, TopBarUserMenuProps>(\n  ({ user, onNavigate, onLogout, userMenuItems, className }, ref) => {\n    const { colorMode, toggleColorMode } = useColorMode()\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <button\n                ref={ref}\n                type=\"button\"\n                className={cn('flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2', className)}\n              >\n                <Avatar className=\"h-ds-sm-plus w-ds-sm-plus cursor-pointer\">\n                  {user.image ? (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  ) : null}\n                  <AvatarFallback className=\"bg-surface-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-ds-md text-surface-fg\">{user.name}</p>\n            {user.email && (\n              <TruncatedText as=\"p\" mode=\"middle\" className=\"text-ds-sm text-surface-fg-subtle\">\n                {user.email}\n              </TruncatedText>\n            )}\n          </div>\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={() => onNavigate?.('/profile')}\n          >\n            <Icon icon={IconUser} size=\"sm\" className=\"text-surface-fg-muted\" />\n            <span className=\"text-ds-md text-surface-fg-muted\">Profile</span>\n          </DropdownMenuItem>\n\n          {/* Custom user menu items */}\n          {userMenuItems?.map((item, index) => {\n            const colorMap: Record<string, string> = {\n              error: 'text-error-11',\n              success: 'text-success-11',\n              warning: 'text-warning-11',\n              info: 'text-info-11',\n            }\n            const textColor = item.color\n              ? (colorMap[item.color] ?? 'text-surface-fg-muted')\n              : 'text-surface-fg-muted'\n            return (\n              <React.Fragment key={item.label + index}>\n                {item.separator && (\n                  <DropdownMenuSeparator className=\"bg-surface-border\" />\n                )}\n                <DropdownMenuItem\n                  className={cn(\n                    'flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      <IconProvider size=\"sm\">{normalizeIcon(item.icon)}</IconProvider>\n                    </span>\n                  )}\n                  <span className={cn('text-ds-md', textColor)}>\n                    {item.label}\n                  </span>\n                  {item.badge != null &&\n                    item.badge !== false &&\n                    (typeof item.badge === 'string' ? (\n                      <span className=\"ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-pill bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg\">\n                        {item.badge}\n                      </span>\n                    ) : (\n                      <span className=\"ml-auto h-[8px] w-[8px] rounded-pill bg-error-9\" />\n                    ))}\n                </DropdownMenuItem>\n              </React.Fragment>\n            )\n          })}\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-ds-md text-surface-fg-muted\">\n              {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}\n            </span>\n          </DropdownMenuItem>\n\n          {onLogout && (\n            <>\n              <DropdownMenuSeparator className=\"bg-surface-border\" />\n              <DropdownMenuItem\n                className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n                onClick={onLogout}\n              >\n                <Icon icon={IconLogout} size=\"sm\" className=\"text-error-11\" />\n                <span className=\"text-ds-md text-error-11\">Logout</span>\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    )\n  },\n)\nTopBarUserMenu.displayName = 'TopBar.UserMenu'\n\n// -----------------------------------------------------------------------\n// Compound export\n// -----------------------------------------------------------------------\n\nexport type TopBarProps = TopBarRootProps\n\nconst TopBar = Object.assign(TopBarRoot, {\n  Left: TopBarLeft,\n  Center: TopBarCenter,\n  Right: TopBarRight,\n  Section: TopBarSection,\n  IconButton: TopBarIconButton,\n  Title: TopBarTitle,\n  UserMenu: TopBarUserMenu,\n})\n\nexport { TopBar }\n"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","names":[],"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * TopBar v2 — Composition-based application top bar.\n *\n * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,\n * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.\n */\nimport { IconLogout, IconMoon, IconSun,IconUser } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Icon } from '../ui/icon'\nimport { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { TruncatedText } from '../ui/truncated-text'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface TopBarUser {\n  name: string\n  email?: string\n  image?: string | null\n}\n\nexport interface UserMenuItem {\n  /** Display label */\n  label: string\n  /** Optional icon. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Navigate via onNavigate when clicked */\n  href?: string\n  /** Custom click handler */\n  onClick?: () => void\n  /** Render a separator before this item */\n  separator?: boolean\n  /** Text color semantic token (e.g. \"error\") — maps to text-{color} */\n  color?: string\n  /** Badge content — string for count, true for dot indicator */\n  badge?: string | boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n}\n\n// -----------------------------------------------------------------------\n// TopBar (root)\n// -----------------------------------------------------------------------\n\ninterface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  className?: string\n}\n\nconst TopBarRoot = React.forwardRef<HTMLElement, TopBarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    // Detect if a Center zone is present to switch to grid layout\n    const hasCenter = React.Children.toArray(children).some(\n      (child) => React.isValidElement(child) && child.type === TopBarCenter,\n    )\n\n    return (\n      <header\n        {...props}\n        ref={ref}\n        className={cn(\n          'z-sticky w-full border-b border-surface-border-strong bg-surface-chrome px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: IconInput\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm\" aria-hidden=\"true\">\n          <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n        </span>\n      </button>\n    </TooltipTrigger>\n    <TooltipContent side=\"bottom\" align=\"center\">\n      {tooltip}\n    </TooltipContent>\n  </Tooltip>\n))\nTopBarIconButton.displayName = 'TopBar.IconButton'\n\n// -----------------------------------------------------------------------\n// TopBar.Title\n// -----------------------------------------------------------------------\n\ninterface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nconst TopBarTitle = React.forwardRef<HTMLHeadingElement, TopBarTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <h2\n      ref={ref}\n      className={cn(\n        'hidden text-ds-lg text-surface-fg md:block',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n)\nTopBarTitle.displayName = 'TopBar.Title'\n\n// -----------------------------------------------------------------------\n// TopBar.UserMenu\n// -----------------------------------------------------------------------\n\ninterface TopBarUserMenuProps {\n  user: TopBarUser\n  onNavigate?: (path: string) => void\n  onLogout?: () => void\n  userMenuItems?: UserMenuItem[]\n  className?: string\n}\n\nconst TopBarUserMenu = React.forwardRef<HTMLButtonElement, TopBarUserMenuProps>(\n  ({ user, onNavigate, onLogout, userMenuItems, className }, ref) => {\n    const { colorMode, toggleColorMode } = useColorMode()\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <button\n                ref={ref}\n                type=\"button\"\n                className={cn('flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2', className)}\n              >\n                <Avatar className=\"h-ds-sm-plus w-ds-sm-plus cursor-pointer\">\n                  {user.image ? (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  ) : null}\n                  <AvatarFallback className=\"bg-surface-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-ds-md text-surface-fg\">{user.name}</p>\n            {user.email && (\n              <TruncatedText as=\"p\" mode=\"middle\" className=\"text-ds-sm text-surface-fg-subtle\">\n                {user.email}\n              </TruncatedText>\n            )}\n          </div>\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={() => onNavigate?.('/profile')}\n          >\n            <Icon icon={IconUser} size=\"sm\" className=\"text-surface-fg-muted\" />\n            <span className=\"text-ds-md text-surface-fg-muted\">Profile</span>\n          </DropdownMenuItem>\n\n          {/* Custom user menu items */}\n          {userMenuItems?.map((item, index) => {\n            const colorMap: Record<string, string> = {\n              error: 'text-error-11',\n              success: 'text-success-11',\n              warning: 'text-warning-11',\n              info: 'text-info-11',\n            }\n            const textColor = item.color\n              ? (colorMap[item.color] ?? 'text-surface-fg-muted')\n              : 'text-surface-fg-muted'\n            return (\n              <React.Fragment key={item.label + index}>\n                {item.separator && (\n                  <DropdownMenuSeparator className=\"bg-surface-border\" />\n                )}\n                <DropdownMenuItem\n                  className={cn(\n                    'flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      <IconProvider size=\"sm\">{normalizeIcon(item.icon)}</IconProvider>\n                    </span>\n                  )}\n                  <span className={cn('text-ds-md', textColor)}>\n                    {item.label}\n                  </span>\n                  {item.badge != null &&\n                    item.badge !== false &&\n                    (typeof item.badge === 'string' ? (\n                      <span className=\"ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-pill bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg\">\n                        {item.badge}\n                      </span>\n                    ) : (\n                      <span className=\"ml-auto h-[8px] w-[8px] rounded-pill bg-error-9\" />\n                    ))}\n                </DropdownMenuItem>\n              </React.Fragment>\n            )\n          })}\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-ds-md text-surface-fg-muted\">\n              {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}\n            </span>\n          </DropdownMenuItem>\n\n          {onLogout && (\n            <>\n              <DropdownMenuSeparator className=\"bg-surface-border\" />\n              <DropdownMenuItem\n                className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n                onClick={onLogout}\n              >\n                <Icon icon={IconLogout} size=\"sm\" className=\"text-error-11\" />\n                <span className=\"text-ds-md text-error-11\">Logout</span>\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    )\n  },\n)\nTopBarUserMenu.displayName = 'TopBar.UserMenu'\n\n// -----------------------------------------------------------------------\n// Compound export\n// -----------------------------------------------------------------------\n\nexport type TopBarProps = TopBarRootProps\n\nconst TopBar = Object.assign(TopBarRoot, {\n  Left: TopBarLeft,\n  Center: TopBarCenter,\n  Right: TopBarRight,\n  Section: TopBarSection,\n  IconButton: TopBarIconButton,\n  Title: TopBarTitle,\n  UserMenu: TopBarUserMenu,\n})\n\nexport { TopBar }\n"],"mappings":"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"}

package/dist/tokens/semantic.css

@@ -169,6 +169,11 @@
   --color-surface-overlay:       var(--neutral-1);
   --color-surface-raised-hover:  var(--neutral-3);
   --color-surface-raised-active: var(--neutral-4);
+  /* App chrome (TopBar, Sidebar, BottomNavbar). Its own tier so chrome's
+     surface is an explicit, independently-tunable decision (per the Carbon/
+     Atlassian/Ant model), not coupled to the card surface. Starts equal to
+     `raised` — zero visual change — but can now diverge without touching cards. */
+  --color-surface-chrome:        var(--neutral-1);
   --color-surface-inverted:      var(--neutral-12);
   --color-surface-inverted-fg:   var(--neutral-1);
   --color-surface-disabled:      var(--neutral-2);
@@ -367,7 +372,7 @@
      --radius-overlay-sm    rounded-overlay-sm    Tooltip, Toast
      --radius-overlay       rounded-overlay       Popover, HoverCard, DropdownMenu / ContextMenu / Menubar content, listboxes, NavigationMenu viewport
      --radius-overlay-lg    rounded-overlay-lg    Dialog, AlertDialog, Sheet, BottomSheet, ColorInput picker
-     --radius-pill          rounded-pill          Badge, StatusDot, Radio, Switch, Slider, Progress, Avatar circle, SegmentedControl item
+     --radius-pill          rounded-pill          Badge, Dot, Radio, Switch, Slider, Progress, Avatar circle, SegmentedControl item
      --radius-bubble        rounded-bubble        ChatMessage bubble
      ─────────────────────────────────────────────────────────── */
   --radius-control:        6px;
@@ -585,6 +590,7 @@
   /* Surface — dark page, lighter cards */
   --color-surface-base:          var(--neutral-1);  /* 0.11L */
   --color-surface-raised:        var(--neutral-2);  /* 0.17L */
+  --color-surface-chrome:        var(--neutral-2);  /* chrome tier — matches raised for now */
   --color-surface-border:        var(--neutral-4);
   --color-surface-border-strong: var(--neutral-5);
   --color-surface-overlay:       oklch(0.13 0.0002 350);
@@ -706,6 +712,7 @@
     --color-surface-raised:       Canvas;
     --color-surface-raised-hover: Canvas;
     --color-surface-raised-active: Canvas;
+    --color-surface-chrome:       Canvas;
     --color-surface-overlay:      Canvas;
     --color-surface-disabled:     Canvas;
     --color-surface-inverted:     CanvasText;

package/dist/ui/accordion.js

@@ -1,5 +1,5 @@
 "use client";
-import { Fn as e, In as t, Ln as n, Pn as r, Rn as i } from "../_chunks/primitives.js";
+import { Content2$8 as e, Header as t, Item$2 as n, Root2$10 as r, Trigger2$1 as i } from "../_chunks/primitives.js";
 import { tweens as a } from "./lib/motion.js";
 import { cn as o } from "./lib/utils.js";
 import { Icon as s } from "./icon.js";
@@ -8,23 +8,23 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { IconChevronDown as d } from "@tabler/icons-react";
 import { motion as f } from "framer-motion";
 //#region src/ui/accordion.tsx
-var p = n, m = c.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ l(t, {
+var p = r, m = c.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ l(n, {
 	ref: r,
 	className: o("border-b border-surface-border", e),
-	...n
+	...t
 }));
 m.displayName = "AccordionItem";
-var h = c.forwardRef(({ className: t, children: n, chevronPosition: r = "right", ...a }, c) => {
+var h = c.forwardRef(({ className: e, children: n, chevronPosition: r = "right", ...a }, c) => {
 	let f = /* @__PURE__ */ l(s, {
 		icon: d,
 		size: "sm",
 		className: "shrink-0 text-surface-fg-muted transition-transform duration-moderate-02 ease-productive-standard group-data-[state=open]:rotate-180"
 	});
-	return /* @__PURE__ */ l(e, {
+	return /* @__PURE__ */ l(t, {
 		className: "flex",
 		children: /* @__PURE__ */ u(i, {
 			ref: c,
-			className: o("group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-raised rounded-control data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", t),
+			className: o("group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-raised rounded-control data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", e),
 			...a,
 			children: [
 				r === "left" && f,
@@ -35,20 +35,20 @@ var h = c.forwardRef(({ className: t, children: n, chevronPosition: r = "right",
 	});
 });
 h.displayName = i.displayName;
-var g = c.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ l(r, {
+var g = c.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ l(e, {
 	ref: i,
 	className: "w-full overflow-hidden text-ds-md data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
-	...n,
+	...r,
 	children: /* @__PURE__ */ l(f.div, {
 		initial: !1,
 		animate: { opacity: 1 },
 		transition: a.fade,
 		children: /* @__PURE__ */ l("div", {
-			className: o("pb-ds-05 pt-ds-02", e),
-			children: t
+			className: o("pb-ds-05 pt-ds-02", t),
+			children: n
 		})
 	})
 }));
-g.displayName = r.displayName;
+g.displayName = e.displayName;
 //#endregion
 export { p as Accordion, g as AccordionContent, m as AccordionItem, h as AccordionTrigger };

package/dist/ui/alert-dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { Cn as e, Sn as t, Tn as n, _n as r, bn as i, vn as a, wn as o, xn as s, yn as c } from "../_chunks/primitives.js";
+import { Action as e, Cancel as t, Content2$7 as n, Description2 as r, Overlay2 as i, Portal2$3 as a, Root2$9 as o, Title2 as s, Trigger2 as c } from "../_chunks/primitives.js";
 import { springs as l, tweens as u } from "./lib/motion.js";
 import { cn as d } from "./lib/utils.js";
 import { useIsMobile as f } from "../hooks/use-mobile.js";
@@ -7,30 +7,30 @@ import * as p from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { AnimatePresence as g, motion as _ } from "framer-motion";
 //#region src/ui/alert-dialog.tsx
-var v = p.createContext({ open: !1 }), y = () => p.useContext(v), b = ({ open: t, defaultOpen: n, onOpenChange: r, ...i }) => {
-	let [a, o] = p.useState(n ?? !1), s = t !== void 0, c = s ? t : a, l = p.useCallback((e) => {
-		s || o(e), r?.(e);
-	}, [s, r]), u = p.useMemo(() => ({ open: c }), [c]);
+var v = p.createContext({ open: !1 }), y = () => p.useContext(v), b = ({ open: e, defaultOpen: t, onOpenChange: n, ...r }) => {
+	let [i, a] = p.useState(t ?? !1), s = e !== void 0, c = s ? e : i, l = p.useCallback((e) => {
+		s || a(e), n?.(e);
+	}, [s, n]), u = p.useMemo(() => ({ open: c }), [c]);
 	return /* @__PURE__ */ m(v.Provider, {
 		value: u,
-		children: /* @__PURE__ */ m(e, {
+		children: /* @__PURE__ */ m(o, {
 			open: c,
 			onOpenChange: l,
-			...i
+			...r
 		})
 	});
 };
 b.displayName = "AlertDialog";
-var x = n, S = t, C = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(s, {
+var x = c, S = a, C = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(i, {
 	ref: n,
 	forceMount: !0,
 	className: d("fixed inset-0 z-modal bg-overlay", e),
 	...t
 }));
-C.displayName = s.displayName;
-var w = p.forwardRef(({ className: e, children: t, responsive: n, ...r }, i) => {
-	let { open: a } = y(), o = f(), s = n !== !1 && o;
-	return /* @__PURE__ */ m(g, { children: a && /* @__PURE__ */ h(S, {
+C.displayName = i.displayName;
+var w = p.forwardRef(({ className: e, children: t, responsive: r, ...i }, a) => {
+	let { open: o } = y(), s = f(), c = r !== !1 && s;
+	return /* @__PURE__ */ m(g, { children: o && /* @__PURE__ */ h(S, {
 		forceMount: !0,
 		children: [/* @__PURE__ */ m(C, {
 			asChild: !0,
@@ -40,41 +40,41 @@ var w = p.forwardRef(({ className: e, children: t, responsive: n, ...r }, i) =>
 				exit: { opacity: 0 },
 				transition: u.fade
 			})
-		}), /* @__PURE__ */ m(c, {
-			ref: i,
+		}), /* @__PURE__ */ m(n, {
+			ref: a,
 			forceMount: !0,
 			asChild: !0,
-			...r,
+			...i,
 			children: /* @__PURE__ */ m(_.div, {
-				initial: s ? { y: "100%" } : {
+				initial: c ? { y: "100%" } : {
 					opacity: 0,
 					scale: .95,
 					x: "-50%",
 					y: "-50%"
 				},
-				animate: s ? { y: 0 } : {
+				animate: c ? { y: 0 } : {
 					opacity: 1,
 					scale: 1,
 					x: "-50%",
 					y: "-50%"
 				},
-				exit: s ? { y: "100%" } : {
+				exit: c ? { y: "100%" } : {
 					opacity: 0,
 					scale: .95,
 					x: "-50%",
 					y: "-50%"
 				},
-				transition: s ? l.smooth : {
+				transition: c ? l.smooth : {
 					...l.smooth,
 					opacity: u.fade
 				},
-				className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", n === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", e),
+				className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", r === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay", e),
 				children: t
 			})
 		})]
 	}) });
 });
-w.displayName = c.displayName;
+w.displayName = n.displayName;
 var T = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
 	ref: n,
 	className: d("flex flex-col space-y-ds-02b text-center sm:text-left", e),
@@ -87,29 +87,29 @@ var E = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
 	...t
 }));
 E.displayName = "AlertDialogFooter";
-var D = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(o, {
+var D = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(s, {
 	ref: n,
 	className: d("text-ds-lg font-semibold", e),
 	...t
 }));
-D.displayName = o.displayName;
-var O = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(i, {
+D.displayName = s.displayName;
+var O = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(r, {
 	ref: n,
 	className: d("text-ds-md text-surface-fg-muted", e),
 	...t
 }));
-O.displayName = i.displayName;
-var k = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(r, {
-	ref: n,
-	className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
-	...t
+O.displayName = r.displayName;
+var k = p.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ m(e, {
+	ref: r,
+	className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", t),
+	...n
 }));
-k.displayName = r.displayName;
-var A = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(a, {
-	ref: n,
+k.displayName = e.displayName;
+var A = p.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ m(t, {
+	ref: r,
 	className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
-	...t
+	...n
 }));
-A.displayName = a.displayName;
+A.displayName = t.displayName;
 //#endregion
 export { b as AlertDialog, k as AlertDialogAction, A as AlertDialogCancel, w as AlertDialogContent, O as AlertDialogDescription, E as AlertDialogFooter, T as AlertDialogHeader, C as AlertDialogOverlay, S as AlertDialogPortal, D as AlertDialogTitle, x as AlertDialogTrigger };

package/dist/ui/alert.js

@@ -1,6 +1,6 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { t as n } from "../_chunks/vendor-utils.js";
+import { cva as n } from "../_chunks/vendor-utils.js";
 import { cn as r } from "./lib/utils.js";
 import { Icon as i } from "./icon.js";
 import * as a from "react";

package/dist/ui/aspect-ratio.js

@@ -1,5 +1,5 @@
 "use client";
-import { gn as e } from "../_chunks/primitives.js";
+import { Root$7 as e } from "../_chunks/primitives.js";
 import { cn as t } from "./lib/utils.js";
 import * as n from "react";
 import { jsx as r } from "react/jsx-runtime";

package/dist/ui/autocomplete.js

@@ -1,5 +1,5 @@
 "use client";
-import { an as e, cn as t, in as n, nn as r, rn as i, tn as a } from "../_chunks/primitives.js";
+import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives.js";
 import { springs as o, tweens as s } from "./lib/motion.js";
 import { cn as c } from "./lib/utils.js";
 import { useFormField as l } from "./form.js";
@@ -22,15 +22,15 @@ var g = {
 		transition: o.snappy
 	}
 }, v = u.forwardRef(({ options: o, value: v, onValueChange: y, placeholder: b, emptyText: x = "No options", disabled: S, className: C, id: w, ...T }, E) => {
-	let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } = e({
+	let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } = a({
 		open: N,
 		placement: "bottom-start",
-		whileElementsMounted: t,
+		whileElementsMounted: e,
 		middleware: [
-			r(4),
-			a(),
-			i(),
-			n({ apply({ availableHeight: e, rects: t, elements: n }) {
+			n(4),
+			t(),
+			r(),
+			i({ apply({ availableHeight: e, rects: t, elements: n }) {
 				Object.assign(n.floating.style, {
 					maxHeight: `${Math.min(e, 240)}px`,
 					width: `${t.reference.width}px`

package/dist/ui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAiFV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA2E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAiFV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,WAAW,EAAE,CAAA"}