@devalok/shilp-sutra 0.49.4 → 0.50.0

package/dist/shell/notification-center.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-center.js","names":[],"sources":["../../src/shell/notification-center.tsx"],"sourcesContent":["'use client'\n\n/**\n * NotificationCenter -- Popover-based notification panel.\n *\n * Props-driven: accepts notifications array and callbacks instead of\n * reading from Zustand stores or using Remix useNavigate.\n */\nimport { IconBell, IconChecks, IconInbox, IconX } from '@tabler/icons-react'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useRef } from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { durations } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport { Spinner } from '../ui/spinner'\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 NotificationAction {\n  /** Button label */\n  label: string\n  /** Visual style — 'primary' is filled, 'default' is ghost, 'danger' is red ghost */\n  variant?: 'primary' | 'default' | 'danger'\n  /** Called when the action button is clicked. Receives the notification id. */\n  onClick: (id: string) => void\n}\n\nexport interface Notification {\n  id: string\n  title: string\n  body?: string | null\n  tier: 'INFO' | 'IMPORTANT' | 'CRITICAL'\n  isRead: boolean\n  createdAt: string\n  entityType?: string | null\n  entityId?: string | null\n  projectId?: string | null\n  project?: { title: string } | null\n  /** Inline action buttons (e.g. Approve / Deny). Max 2–3 recommended. */\n  actions?: NotificationAction[]\n}\n\nexport interface NotificationCenterProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** List of notifications to display */\n  notifications?: Notification[]\n  /** Count of unread notifications (derived from notifications if not provided) */\n  unreadCount?: number\n  /** Whether the popover is open (controlled mode) */\n  open?: boolean\n  /** Called when the popover open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Whether more notifications are loading */\n  isLoading?: boolean\n  /** Whether there are more notifications to fetch */\n  hasMore?: boolean\n  /** Called when the user scrolls near the bottom to load more */\n  onFetchMore?: () => void\n  /** Called to mark a single notification as read */\n  onMarkRead?: (id: string) => void\n  /** Called to mark all notifications as read */\n  onMarkAllRead?: () => void\n  /** Called when the user clicks a notification (e.g., navigate to entity) */\n  onNavigate?: (path: string) => void\n  /** Resolve a notification to a navigation path. Return null if no navigation. */\n  getNotificationRoute?: (notification: Notification) => string | null\n  /** Additional actions rendered in the header (e.g., settings button) */\n  headerActions?: React.ReactNode\n  /** Custom empty state to display when there are no notifications */\n  emptyState?: React.ReactNode\n  /** Content rendered below the notification list as a footer */\n  footerSlot?: React.ReactNode\n  /** Called when the user dismisses a notification. Renders an X button per row when provided. */\n  onDismiss?: (id: string) => void\n  /** Additional className for the popover content container */\n  popoverClassName?: string\n  /** Additional className */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nfunction getDateGroup(dateStr: string): string {\n  const date = new Date(dateStr)\n  const today = new Date()\n  const yesterday = new Date()\n  yesterday.setDate(today.getDate() - 1)\n\n  if (isSameDay(date, today)) return 'Today'\n  if (isSameDay(date, yesterday)) return 'Yesterday'\n  return 'Earlier'\n}\n\nconst TIER_COLORS: Record<string, string> = {\n  INFO: 'bg-info-9',\n  IMPORTANT: 'bg-warning-9',\n  CRITICAL: 'bg-error-9',\n}\n\n// -----------------------------------------------------------------------\n// NotificationItem (internal)\n// -----------------------------------------------------------------------\n\nfunction NotificationItem({\n  notification,\n  onRead,\n  onNavigate,\n  getRoute,\n  onDismiss,\n}: {\n  notification: Notification\n  onRead: (id: string) => void\n  onNavigate: (path: string) => void\n  getRoute: (notification: Notification) => string | null\n  onDismiss?: (id: string) => void\n}) {\n  const route = getRoute(notification)\n\n  const handleClick = () => {\n    if (!notification.isRead) {\n      onRead(notification.id)\n    }\n    if (route) {\n      onNavigate(route)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      handleClick()\n    }\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard',\n        'hover:bg-surface-raised',\n        !notification.isRead && 'bg-accent-1',\n      )}\n    >\n      {/* Tier dot — doubles as read/unread marker */}\n      <div className=\"mt-ds-02b flex shrink-0\">\n        <span\n          className={cn(\n            'h-[8px] w-[8px] rounded-pill transition-opacity duration-fast-02 ease-productive-standard',\n            TIER_COLORS[notification.tier] || TIER_COLORS.INFO,\n            notification.isRead ? 'opacity-20' : 'opacity-100',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <TruncatedText\n          as=\"p\"\n          className={cn(\n            'text-ds-md text-surface-fg',\n            !notification.isRead && 'font-semibold',\n          )}\n        >\n          {notification.title}\n        </TruncatedText>\n        {notification.body && (\n          <p className=\"mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle\">\n            {notification.body}\n          </p>\n        )}\n        <div className=\"mt-ds-02 flex items-center gap-ds-03\">\n          <span className=\"text-ds-sm text-surface-fg-subtle\">\n            {formatRelativeTime(notification.createdAt)}\n          </span>\n          {notification.project && (\n            <>\n              <span className=\"text-surface-fg-subtle\">\n                &middot;\n              </span>\n              <TruncatedText className=\"text-ds-sm text-surface-fg-subtle\">\n                {notification.project.title}\n              </TruncatedText>\n            </>\n          )}\n        </div>\n\n        {/* Inline actions */}\n        {notification.actions && notification.actions.length > 0 && (\n          <div className=\"mt-ds-03 flex items-center gap-ds-02\">\n            {notification.actions.map((action) => (\n              <Button\n                key={action.label}\n                size=\"sm\"\n                variant={action.variant === 'primary' ? 'solid' : 'ghost'}\n                color={action.variant === 'danger' ? 'error' : 'accent'}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action.onClick(notification.id)\n                }}\n                onKeyDown={(e) => e.stopPropagation()}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Dismiss button */}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={`Dismiss notification: ${notification.title}`}\n          onClick={(e) => {\n            e.stopPropagation()\n            onDismiss(notification.id)\n          }}\n          onKeyDown={(e) => e.stopPropagation()}\n          className=\"absolute right-ds-03 top-ds-03 hidden rounded-control-inner p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex\"\n        >\n          <Icon icon={IconX} size=\"sm\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// NotificationCenter\n// -----------------------------------------------------------------------\n\nconst NotificationCenter = React.forwardRef<HTMLButtonElement, NotificationCenterProps>(\n  (\n    {\n      notifications = [],\n      unreadCount: unreadCountProp,\n      open,\n      onOpenChange,\n      isLoading = false,\n      hasMore = false,\n      onFetchMore,\n      onMarkRead,\n      onMarkAllRead,\n      onNavigate,\n      getNotificationRoute,\n      onDismiss,\n      headerActions,\n      emptyState,\n      footerSlot,\n      popoverClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const scrollRef = useRef<HTMLDivElement>(null)\n    const prefersReducedMotion = useReducedMotion()\n    const isMobile = useIsMobile()\n\n  const unreadCount =\n    unreadCountProp ?? notifications.filter((n) => !n.isRead).length\n\n  const getRoute = getNotificationRoute ?? (() => null)\n\n  const handleNavigate = useCallback(\n    (path: string) => {\n      onOpenChange?.(false)\n      onNavigate?.(path)\n    },\n    [onNavigate, onOpenChange],\n  )\n\n  const handleMarkRead = useCallback(\n    (id: string) => {\n      onMarkRead?.(id)\n    },\n    [onMarkRead],\n  )\n\n  const handleScroll = useCallback(() => {\n    const el = scrollRef.current\n    if (!el || isLoading || !hasMore) return\n    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {\n      onFetchMore?.()\n    }\n  }, [isLoading, hasMore, onFetchMore])\n\n  // Group notifications by date\n  const grouped = notifications.reduce<Record<string, Notification[]>>(\n    (acc, n) => {\n      const group = getDateGroup(n.createdAt)\n      if (!acc[group]) acc[group] = []\n      acc[group].push(n)\n      return acc\n    },\n    {},\n  )\n\n  const groupOrder = ['Today', 'Yesterday', 'Earlier']\n\n  // -- Shared panel content (used in both Popover and Sheet) --\n  const panelContent = (\n    <>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04\">\n        <div className=\"flex items-center gap-ds-03\">\n          {/* On mobile the SheetTitle provides the accessible heading; on desktop use h3 */}\n          {!isMobile && (\n            <h3 className=\"text-ds-md font-semibold text-surface-fg\">\n              Notifications\n            </h3>\n          )}\n          {unreadCount > 0 && (\n            <span className=\"flex h-5 min-w-5 items-center justify-center rounded-pill bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11\">\n              {unreadCount}\n            </span>\n          )}\n        </div>\n        <div className=\"flex items-center gap-ds-03\">\n          {unreadCount > 0 && onMarkAllRead && (\n            <button\n              type=\"button\"\n              onClick={onMarkAllRead}\n              className=\"flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11\"\n            >\n              <Icon icon={IconChecks} size=\"sm\" />\n              Mark all read\n            </button>\n          )}\n          {headerActions}\n        </div>\n      </div>\n\n      {/* Notification list */}\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        className={cn('overflow-y-auto', isMobile ? 'max-h-[60vh]' : 'max-h-[420px]')}\n      >\n        {notifications.length === 0 ? (\n          emptyState || (\n            <div className=\"flex flex-col items-center justify-center px-ds-05 py-ds-09\">\n              <div className=\"flex h-ds-lg w-ds-lg items-center justify-center rounded-pill bg-surface-raised\">\n                <Icon icon={IconInbox} size=\"lg\" className=\"text-surface-fg-subtle\" />\n              </div>\n              <p className=\"mt-ds-04 text-ds-md text-surface-fg-subtle\">\n                No notifications yet\n              </p>\n              <p className=\"mt-ds-02 text-ds-sm text-surface-fg-subtle\">\n                You&apos;re all caught up!\n              </p>\n            </div>\n          )\n        ) : (\n          groupOrder.map((group) => {\n            const items = grouped[group]\n            if (!items || items.length === 0) return null\n            return (\n              <div key={group}>\n                <div className=\"sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b\">\n                  <span className=\"text-ds-sm font-medium text-surface-fg-subtle\">\n                    {group}\n                  </span>\n                </div>\n                {items.map((notification, index) => (\n                  <motion.div\n                    key={notification.id}\n                    initial={prefersReducedMotion ? undefined : { opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={prefersReducedMotion ? { duration: 0 } : { delay: index * 0.03 }}\n                  >\n                    <NotificationItem\n                      notification={notification}\n                      onRead={handleMarkRead}\n                      onNavigate={handleNavigate}\n                      getRoute={getRoute}\n                      onDismiss={onDismiss}\n                    />\n                  </motion.div>\n                ))}\n              </div>\n            )\n          })\n        )}\n\n        {isLoading && (\n          <div className=\"flex items-center justify-center py-ds-05\">\n            <Spinner />\n          </div>\n        )}\n      </div>\n      {footerSlot && (\n        <div className=\"border-t border-surface-border-strong px-ds-05 py-ds-03\">\n          {footerSlot}\n        </div>\n      )}\n    </>\n  )\n\n  // -- Trigger button (shared between both modes) --\n  const triggerButton = (\n    <button\n      {...props}\n      ref={ref}\n      aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}\n      className={cn(\n        'relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover',\n        className,\n      )}\n    >\n      <Icon icon={IconBell} size=\"sm\" />\n      {unreadCount > 0 && (\n        <motion.span\n          initial={{ rotate: 0 }}\n          animate={prefersReducedMotion ? undefined : { rotate: [0, -3, 3, -1, 1, 0] }}\n          transition={prefersReducedMotion ? { duration: 0 } : { duration: durations.slow01, ease: 'easeInOut' }}\n          className=\"absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-pill bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg\"\n        >\n          {unreadCount > 99 ? '99+' : unreadCount}\n        </motion.span>\n      )}\n    </button>\n  )\n\n  // -- Mobile: render in a bottom Sheet --\n  if (isMobile) {\n    return (\n      <Sheet open={open} onOpenChange={onOpenChange}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <SheetTrigger asChild>\n              {triggerButton}\n            </SheetTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            Notifications\n          </TooltipContent>\n        </Tooltip>\n\n        <SheetContent side=\"bottom\" className={cn('p-0', popoverClassName)} responsive={false}>\n          <SheetTitle className=\"px-ds-05 pt-ds-04 text-ds-md font-semibold text-surface-fg\">\n            Notifications\n          </SheetTitle>\n          {panelContent}\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  // -- Desktop: render in a Popover --\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            {triggerButton}\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\" align=\"center\">\n          Notifications\n        </TooltipContent>\n      </Tooltip>\n\n      <PopoverContent\n        className={cn(\n          'w-[380px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating',\n          popoverClassName,\n        )}\n        sideOffset={8}\n        align=\"end\"\n      >\n        {panelContent}\n      </PopoverContent>\n    </Popover>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nexport { NotificationCenter }\n"],"mappings":"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"}
+{"version":3,"file":"notification-center.js","names":[],"sources":["../../src/shell/notification-center.tsx"],"sourcesContent":["'use client'\n\n/**\n * NotificationCenter -- Popover-based notification panel.\n *\n * Props-driven: accepts notifications array and callbacks instead of\n * reading from Zustand stores or using Remix useNavigate.\n */\nimport { IconBell, IconChecks, IconInbox, IconX } from '@tabler/icons-react'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { useCallback,useRef } from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { durations } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport { Spinner } from '../ui/spinner'\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 NotificationAction {\n  /** Button label */\n  label: string\n  /** Visual style — 'primary' is filled, 'default' is ghost, 'danger' is red ghost */\n  variant?: 'primary' | 'default' | 'danger'\n  /** Called when the action button is clicked. Receives the notification id. */\n  onClick: (id: string) => void\n}\n\nexport interface Notification {\n  id: string\n  title: string\n  body?: string | null\n  tier: 'INFO' | 'IMPORTANT' | 'CRITICAL'\n  isRead: boolean\n  createdAt: string\n  entityType?: string | null\n  entityId?: string | null\n  projectId?: string | null\n  project?: { title: string } | null\n  /** Inline action buttons (e.g. Approve / Deny). Max 2–3 recommended. */\n  actions?: NotificationAction[]\n}\n\nexport interface NotificationCenterProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** List of notifications to display */\n  notifications?: Notification[]\n  /** Count of unread notifications (derived from notifications if not provided) */\n  unreadCount?: number\n  /** Whether the popover is open (controlled mode) */\n  open?: boolean\n  /** Called when the popover open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Whether more notifications are loading */\n  isLoading?: boolean\n  /** Whether there are more notifications to fetch */\n  hasMore?: boolean\n  /** Called when the user scrolls near the bottom to load more */\n  onFetchMore?: () => void\n  /** Called to mark a single notification as read */\n  onMarkRead?: (id: string) => void\n  /** Called to mark all notifications as read */\n  onMarkAllRead?: () => void\n  /** Called when the user clicks a notification (e.g., navigate to entity) */\n  onNavigate?: (path: string) => void\n  /** Resolve a notification to a navigation path. Return null if no navigation. */\n  getNotificationRoute?: (notification: Notification) => string | null\n  /** Additional actions rendered in the header (e.g., settings button) */\n  headerActions?: React.ReactNode\n  /** Custom empty state to display when there are no notifications */\n  emptyState?: React.ReactNode\n  /** Content rendered below the notification list as a footer */\n  footerSlot?: React.ReactNode\n  /** Called when the user dismisses a notification. Renders an X button per row when provided. */\n  onDismiss?: (id: string) => void\n  /** Additional className for the popover content container */\n  popoverClassName?: string\n  /** Additional className */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\n\nfunction isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nfunction getDateGroup(dateStr: string): string {\n  const date = new Date(dateStr)\n  const today = new Date()\n  const yesterday = new Date()\n  yesterday.setDate(today.getDate() - 1)\n\n  if (isSameDay(date, today)) return 'Today'\n  if (isSameDay(date, yesterday)) return 'Yesterday'\n  return 'Earlier'\n}\n\nconst TIER_COLORS: Record<string, string> = {\n  INFO: 'bg-info-9',\n  IMPORTANT: 'bg-warning-9',\n  CRITICAL: 'bg-error-9',\n}\n\n// -----------------------------------------------------------------------\n// NotificationItem (internal)\n// -----------------------------------------------------------------------\n\nfunction NotificationItem({\n  notification,\n  onRead,\n  onNavigate,\n  getRoute,\n  onDismiss,\n}: {\n  notification: Notification\n  onRead: (id: string) => void\n  onNavigate: (path: string) => void\n  getRoute: (notification: Notification) => string | null\n  onDismiss?: (id: string) => void\n}) {\n  const route = getRoute(notification)\n\n  const handleClick = () => {\n    if (!notification.isRead) {\n      onRead(notification.id)\n    }\n    if (route) {\n      onNavigate(route)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      handleClick()\n    }\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard',\n        'hover:bg-surface-raised',\n        !notification.isRead && 'bg-accent-1',\n      )}\n    >\n      {/* Tier dot — doubles as read/unread marker */}\n      <div className=\"mt-ds-02b flex shrink-0\">\n        <span\n          className={cn(\n            'h-[8px] w-[8px] rounded-pill transition-opacity duration-fast-02 ease-productive-standard',\n            TIER_COLORS[notification.tier] || TIER_COLORS.INFO,\n            notification.isRead ? 'opacity-20' : 'opacity-100',\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\">\n        <TruncatedText\n          as=\"p\"\n          className={cn(\n            'text-body-md text-surface-fg',\n            !notification.isRead && 'font-semibold',\n          )}\n        >\n          {notification.title}\n        </TruncatedText>\n        {notification.body && (\n          <p className=\"mt-ds-01 line-clamp-2 text-body-sm text-surface-fg-subtle\">\n            {notification.body}\n          </p>\n        )}\n        <div className=\"mt-ds-02 flex items-center gap-ds-03\">\n          <span className=\"text-body-sm text-surface-fg-subtle\">\n            {formatRelativeTime(notification.createdAt)}\n          </span>\n          {notification.project && (\n            <>\n              <span className=\"text-surface-fg-subtle\">\n                &middot;\n              </span>\n              <TruncatedText className=\"text-body-sm text-surface-fg-subtle\">\n                {notification.project.title}\n              </TruncatedText>\n            </>\n          )}\n        </div>\n\n        {/* Inline actions */}\n        {notification.actions && notification.actions.length > 0 && (\n          <div className=\"mt-ds-03 flex items-center gap-ds-02\">\n            {notification.actions.map((action) => (\n              <Button\n                key={action.label}\n                size=\"sm\"\n                variant={action.variant === 'primary' ? 'solid' : 'ghost'}\n                color={action.variant === 'danger' ? 'error' : 'accent'}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action.onClick(notification.id)\n                }}\n                onKeyDown={(e) => e.stopPropagation()}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Dismiss button */}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={`Dismiss notification: ${notification.title}`}\n          onClick={(e) => {\n            e.stopPropagation()\n            onDismiss(notification.id)\n          }}\n          onKeyDown={(e) => e.stopPropagation()}\n          className=\"absolute right-ds-03 top-ds-03 hidden rounded-control-inner p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex\"\n        >\n          <Icon icon={IconX} size=\"sm\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// NotificationCenter\n// -----------------------------------------------------------------------\n\nconst NotificationCenter = React.forwardRef<HTMLButtonElement, NotificationCenterProps>(\n  (\n    {\n      notifications = [],\n      unreadCount: unreadCountProp,\n      open,\n      onOpenChange,\n      isLoading = false,\n      hasMore = false,\n      onFetchMore,\n      onMarkRead,\n      onMarkAllRead,\n      onNavigate,\n      getNotificationRoute,\n      onDismiss,\n      headerActions,\n      emptyState,\n      footerSlot,\n      popoverClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const scrollRef = useRef<HTMLDivElement>(null)\n    const prefersReducedMotion = useReducedMotion()\n    const isMobile = useIsMobile()\n\n  const unreadCount =\n    unreadCountProp ?? notifications.filter((n) => !n.isRead).length\n\n  const getRoute = getNotificationRoute ?? (() => null)\n\n  const handleNavigate = useCallback(\n    (path: string) => {\n      onOpenChange?.(false)\n      onNavigate?.(path)\n    },\n    [onNavigate, onOpenChange],\n  )\n\n  const handleMarkRead = useCallback(\n    (id: string) => {\n      onMarkRead?.(id)\n    },\n    [onMarkRead],\n  )\n\n  const handleScroll = useCallback(() => {\n    const el = scrollRef.current\n    if (!el || isLoading || !hasMore) return\n    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {\n      onFetchMore?.()\n    }\n  }, [isLoading, hasMore, onFetchMore])\n\n  // Group notifications by date\n  const grouped = notifications.reduce<Record<string, Notification[]>>(\n    (acc, n) => {\n      const group = getDateGroup(n.createdAt)\n      if (!acc[group]) acc[group] = []\n      acc[group].push(n)\n      return acc\n    },\n    {},\n  )\n\n  const groupOrder = ['Today', 'Yesterday', 'Earlier']\n\n  // -- Shared panel content (used in both Popover and Sheet) --\n  const panelContent = (\n    <>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04\">\n        <div className=\"flex items-center gap-ds-03\">\n          {/* On mobile the SheetTitle provides the accessible heading; on desktop use h3 */}\n          {!isMobile && (\n            <h3 className=\"text-body-md font-semibold text-surface-fg\">\n              Notifications\n            </h3>\n          )}\n          {unreadCount > 0 && (\n            <span className=\"flex h-5 min-w-5 items-center justify-center rounded-pill bg-accent-2 px-ds-02b text-body-sm font-semibold text-accent-11\">\n              {unreadCount}\n            </span>\n          )}\n        </div>\n        <div className=\"flex items-center gap-ds-03\">\n          {unreadCount > 0 && onMarkAllRead && (\n            <button\n              type=\"button\"\n              onClick={onMarkAllRead}\n              className=\"flex items-center gap-ds-02 text-body-sm text-surface-fg-subtle transition-colors hover:text-accent-11\"\n            >\n              <Icon icon={IconChecks} size=\"sm\" />\n              Mark all read\n            </button>\n          )}\n          {headerActions}\n        </div>\n      </div>\n\n      {/* Notification list */}\n      <div\n        ref={scrollRef}\n        onScroll={handleScroll}\n        className={cn('overflow-y-auto', isMobile ? 'max-h-[60vh]' : 'max-h-[420px]')}\n      >\n        {notifications.length === 0 ? (\n          emptyState || (\n            <div className=\"flex flex-col items-center justify-center px-ds-05 py-ds-09\">\n              <div className=\"flex h-ds-lg w-ds-lg items-center justify-center rounded-pill bg-surface-raised\">\n                <Icon icon={IconInbox} size=\"lg\" className=\"text-surface-fg-subtle\" />\n              </div>\n              <p className=\"mt-ds-04 text-body-md text-surface-fg-subtle\">\n                No notifications yet\n              </p>\n              <p className=\"mt-ds-02 text-body-sm text-surface-fg-subtle\">\n                You&apos;re all caught up!\n              </p>\n            </div>\n          )\n        ) : (\n          groupOrder.map((group) => {\n            const items = grouped[group]\n            if (!items || items.length === 0) return null\n            return (\n              <div key={group}>\n                <div className=\"sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b\">\n                  <span className=\"text-body-sm font-medium text-surface-fg-subtle\">\n                    {group}\n                  </span>\n                </div>\n                {items.map((notification, index) => (\n                  <motion.div\n                    key={notification.id}\n                    initial={prefersReducedMotion ? undefined : { opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={prefersReducedMotion ? { duration: 0 } : { delay: index * 0.03 }}\n                  >\n                    <NotificationItem\n                      notification={notification}\n                      onRead={handleMarkRead}\n                      onNavigate={handleNavigate}\n                      getRoute={getRoute}\n                      onDismiss={onDismiss}\n                    />\n                  </motion.div>\n                ))}\n              </div>\n            )\n          })\n        )}\n\n        {isLoading && (\n          <div className=\"flex items-center justify-center py-ds-05\">\n            <Spinner />\n          </div>\n        )}\n      </div>\n      {footerSlot && (\n        <div className=\"border-t border-surface-border-strong px-ds-05 py-ds-03\">\n          {footerSlot}\n        </div>\n      )}\n    </>\n  )\n\n  // -- Trigger button (shared between both modes) --\n  const triggerButton = (\n    <button\n      {...props}\n      ref={ref}\n      aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}\n      className={cn(\n        'relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-card-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover',\n        className,\n      )}\n    >\n      <Icon icon={IconBell} size=\"sm\" />\n      {unreadCount > 0 && (\n        <motion.span\n          initial={{ rotate: 0 }}\n          animate={prefersReducedMotion ? undefined : { rotate: [0, -3, 3, -1, 1, 0] }}\n          transition={prefersReducedMotion ? { duration: 0 } : { duration: durations.slow01, ease: 'easeInOut' }}\n          className=\"absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-pill bg-accent-9 px-ds-02 text-body-xs font-semibold text-accent-fg\"\n        >\n          {unreadCount > 99 ? '99+' : unreadCount}\n        </motion.span>\n      )}\n    </button>\n  )\n\n  // -- Mobile: render in a bottom Sheet --\n  if (isMobile) {\n    return (\n      <Sheet open={open} onOpenChange={onOpenChange}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <SheetTrigger asChild>\n              {triggerButton}\n            </SheetTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            Notifications\n          </TooltipContent>\n        </Tooltip>\n\n        <SheetContent side=\"bottom\" className={cn('p-0', popoverClassName)} responsive={false}>\n          <SheetTitle className=\"px-ds-05 pt-ds-04 text-body-md font-semibold text-surface-fg\">\n            Notifications\n          </SheetTitle>\n          {panelContent}\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  // -- Desktop: render in a Popover --\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            {triggerButton}\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\" align=\"center\">\n          Notifications\n        </TooltipContent>\n      </Tooltip>\n\n      <PopoverContent\n        className={cn(\n          'w-[380px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating',\n          popoverClassName,\n        )}\n        sideOffset={8}\n        align=\"end\"\n      >\n        {panelContent}\n      </PopoverContent>\n    </Popover>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nexport { NotificationCenter }\n"],"mappings":"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"}

package/dist/shell/notification-preferences.js

@@ -59,7 +59,7 @@ var k = {
 		children: [/* @__PURE__ */ w(o, {
 			className: "flex flex-row items-center justify-between",
 			children: [/* @__PURE__ */ C(s, {
-				className: "text-ds-md font-semibold",
+				className: "text-body-md font-semibold",
 				children: "Notification Preferences"
 			}), /* @__PURE__ */ w(r, {
 				size: "sm",
@@ -77,7 +77,7 @@ var k = {
 		}) : b.length === 0 ? /* @__PURE__ */ C("div", {
 			className: "py-ds-07 text-center",
 			children: /* @__PURE__ */ C("p", {
-				className: "text-ds-md text-surface-fg-subtle",
+				className: "text-body-md text-surface-fg-subtle",
 				children: "No custom preferences set. All notifications are delivered by default."
 			})
 		}) : /* @__PURE__ */ C("div", {
@@ -98,10 +98,10 @@ var k = {
 						/* @__PURE__ */ w("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ C("p", {
-								className: "text-ds-md font-medium text-surface-fg",
+								className: "text-body-md font-medium text-surface-fg",
 								children: i.label
 							}), /* @__PURE__ */ C("p", {
-								className: "text-ds-sm text-surface-fg-subtle",
+								className: "text-body-sm text-surface-fg-subtle",
 								children: Q(t.projectId)
 							})]
 						}),
@@ -109,7 +109,7 @@ var k = {
 							value: t.minTier,
 							onValueChange: (e) => N?.(t, e),
 							children: [/* @__PURE__ */ C(_, {
-								className: "h-ds-xs-plus w-[130px] text-ds-sm",
+								className: "h-ds-xs-plus w-[130px] text-body-sm",
 								children: /* @__PURE__ */ C(v, {})
 							}), /* @__PURE__ */ C(h, { children: Object.entries(A).map(([e, t]) => /* @__PURE__ */ C(g, {
 								value: e,
@@ -119,7 +119,7 @@ var k = {
 						/* @__PURE__ */ w("div", {
 							className: "flex items-center gap-ds-02b",
 							children: [/* @__PURE__ */ C("span", {
-								className: "text-ds-sm text-surface-fg-subtle",
+								className: "text-body-sm text-surface-fg-subtle",
 								children: t.muted ? "Muted" : "Active"
 							}), /* @__PURE__ */ C(y, {
 								checked: !t.muted,
@@ -151,7 +151,7 @@ var k = {
 						className: "flex flex-col gap-ds-02b",
 						children: [/* @__PURE__ */ C("label", {
 							htmlFor: "pref-scope",
-							className: "text-ds-sm font-medium text-surface-fg-muted",
+							className: "text-body-sm font-medium text-surface-fg-muted",
 							children: "Scope"
 						}), /* @__PURE__ */ w(m, {
 							value: B,
@@ -172,7 +172,7 @@ var k = {
 						className: "flex flex-col gap-ds-02b",
 						children: [/* @__PURE__ */ C("label", {
 							htmlFor: "pref-channel",
-							className: "text-ds-sm font-medium text-surface-fg-muted",
+							className: "text-body-sm font-medium text-surface-fg-muted",
 							children: "Channel"
 						}), /* @__PURE__ */ w(m, {
 							value: H,
@@ -193,7 +193,7 @@ var k = {
 						className: "flex flex-col gap-ds-02b",
 						children: [/* @__PURE__ */ C("label", {
 							htmlFor: "pref-min-tier",
-							className: "text-ds-sm font-medium text-surface-fg-muted",
+							className: "text-body-sm font-medium text-surface-fg-muted",
 							children: "Minimum Tier"
 						}), /* @__PURE__ */ w(m, {
 							value: W,
@@ -211,7 +211,7 @@ var k = {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ C("label", {
 							htmlFor: "pref-muted",
-							className: "text-ds-md text-surface-fg",
+							className: "text-body-md text-surface-fg",
 							children: "Mute this channel"
 						}), /* @__PURE__ */ C(y, {
 							id: "pref-muted",

package/dist/shell/notification-preferences.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-preferences.js","names":[],"sources":["../../src/shell/notification-preferences.tsx"],"sourcesContent":["'use client'\n\n/**\n * NotificationPreferences -- Manage notification rules per channel/project.\n *\n * Props-driven: accepts preferences array, projects, and callbacks.\n * No internal fetching -- the consumer is responsible for data loading.\n */\nimport { IconBell, IconMessage,IconPlus, IconTrash } from '@tabler/icons-react'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { Button } from '../ui/button'\nimport { Card, CardContent,CardHeader, CardTitle } from '../ui/card'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { IconButton } from '../ui/icon-button'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { Spinner } from '../ui/spinner'\nimport { Switch } from '../ui/switch'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NotificationPreference {\n  id: string\n  userId?: string\n  projectId: string | null\n  channel: string\n  minTier: string\n  muted: boolean\n}\n\nexport interface NotificationProject {\n  id: string\n  title: string\n}\n\nexport interface NotificationPreferencesProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSave'> {\n  /** Current preference rules */\n  preferences?: NotificationPreference[]\n  /** Available projects for scoping rules */\n  projects?: NotificationProject[]\n  /** Whether data is loading */\n  isLoading?: boolean\n  /** Called to add or update a preference */\n  onSave?: (preference: {\n    projectId: string | null\n    channel: string\n    minTier: string\n    muted: boolean\n  }) => void | Promise<void>\n  /** Called to toggle mute on a preference */\n  onToggleMute?: (preference: NotificationPreference) => void | Promise<void>\n  /** Called to update the tier on a preference */\n  onUpdateTier?: (\n    preference: NotificationPreference,\n    newTier: string,\n  ) => void | Promise<void>\n  /** Called to delete a preference */\n  onDelete?: (preferenceId: string) => void | Promise<void>\n  /** Additional className */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Constants\n// -----------------------------------------------------------------------\n\nconst CHANNEL_LABELS: Record<string, { label: string; icon: React.ReactNode }> = {\n  IN_APP: { label: 'In-App', icon: <Icon icon={IconBell} size=\"sm\" /> },\n  GOOGLE_CHAT: { label: 'Google Chat', icon: <Icon icon={IconMessage} size=\"sm\" /> },\n}\n\nconst TIER_LABELS: Record<string, string> = {\n  INFO: 'All (Info+)',\n  IMPORTANT: 'Important+',\n  CRITICAL: 'Critical only',\n}\n\n// -----------------------------------------------------------------------\n// NotificationPreferences\n// -----------------------------------------------------------------------\n\nconst NotificationPreferences = React.forwardRef<HTMLDivElement, NotificationPreferencesProps>(\n  function NotificationPreferences(\n    {\n      preferences = [],\n      projects = [],\n      isLoading = false,\n      onSave,\n      onToggleMute,\n      onUpdateTier,\n      onDelete,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const [showAddDialog, setShowAddDialog] = useState(false)\n  const [newProjectId, setNewProjectId] = useState<string>('global')\n  const [newChannel, setNewChannel] = useState<string>('IN_APP')\n  const [newMinTier, setNewMinTier] = useState<string>('INFO')\n  const [newMuted, setNewMuted] = useState(false)\n  const [isSaving, setIsSaving] = useState(false)\n\n  const handleAdd = async () => {\n    if (!onSave) return\n    setIsSaving(true)\n    try {\n      await onSave({\n        projectId: newProjectId === 'global' ? null : newProjectId,\n        channel: newChannel,\n        minTier: newMinTier,\n        muted: newMuted,\n      })\n      setShowAddDialog(false)\n      resetForm()\n    } catch (error) {\n      console.error('[Preferences] Failed to save:', error)\n    } finally {\n      setIsSaving(false)\n    }\n  }\n\n  const resetForm = () => {\n    setNewProjectId('global')\n    setNewChannel('IN_APP')\n    setNewMinTier('INFO')\n    setNewMuted(false)\n  }\n\n  const getProjectName = (projectId: string | null) => {\n    if (!projectId) return 'Global (all projects)'\n    const project = projects.find((p) => p.id === projectId)\n    return project?.title || 'Unknown project'\n  }\n\n  return (\n    <>\n      <Card ref={ref} className={className} {...(props as Omit<typeof props, 'color'>)}>\n        <CardHeader className=\"flex flex-row items-center justify-between\">\n          <CardTitle className=\"text-ds-md font-semibold\">\n            Notification Preferences\n          </CardTitle>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setShowAddDialog(true)}\n          >\n            <Icon icon={IconPlus} size=\"sm\" className=\"mr-ds-02b\" />\n            Add Rule\n          </Button>\n        </CardHeader>\n        <CardContent>\n          {isLoading ? (\n            <div className=\"flex items-center justify-center py-ds-07\">\n              <Spinner />\n            </div>\n          ) : preferences.length === 0 ? (\n            <div className=\"py-ds-07 text-center\">\n              <p className=\"text-ds-md text-surface-fg-subtle\">\n                No custom preferences set. All notifications are delivered by\n                default.\n              </p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col\">\n              {preferences.map((pref, i) => {\n                const channelInfo =\n                  CHANNEL_LABELS[pref.channel] || CHANNEL_LABELS.IN_APP\n                return (\n                  <div\n                    key={pref.id}\n                    className={cn(\n                      'flex items-center gap-ds-05 py-ds-04',\n                      i < preferences.length - 1 &&\n                        'border-b border-surface-border-strong',\n                    )}\n                  >\n                    {/* Channel icon */}\n                    <div className=\"flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-surface bg-surface-raised\">\n                      <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm text-surface-fg-muted\" aria-hidden=\"true\">{channelInfo.icon}</span>\n                    </div>\n\n                    {/* Info */}\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"text-ds-md font-medium text-surface-fg\">\n                        {channelInfo.label}\n                      </p>\n                      <p className=\"text-ds-sm text-surface-fg-subtle\">\n                        {getProjectName(pref.projectId)}\n                      </p>\n                    </div>\n\n                    {/* Min tier */}\n                    <Select\n                      value={pref.minTier}\n                      onValueChange={(v) => onUpdateTier?.(pref, v)}\n                    >\n                      <SelectTrigger className=\"h-ds-xs-plus w-[130px] text-ds-sm\">\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        {Object.entries(TIER_LABELS).map(([key, label]) => (\n                          <SelectItem key={key} value={key}>\n                            {label}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n\n                    {/* Muted toggle */}\n                    <div className=\"flex items-center gap-ds-02b\">\n                      <span className=\"text-ds-sm text-surface-fg-subtle\">\n                        {pref.muted ? 'Muted' : 'Active'}\n                      </span>\n                      <Switch\n                        checked={!pref.muted}\n                        onCheckedChange={() => onToggleMute?.(pref)}\n                      />\n                    </div>\n\n                    {/* Delete */}\n                    <IconButton\n                      aria-label={`Delete ${channelInfo.label} notification rule`}\n                      icon={<Icon icon={IconTrash} />}\n                      variant=\"ghost\"\n                      color=\"error\"\n                      size=\"sm\"\n                      onClick={() => onDelete?.(pref.id)}\n                      className=\"shrink-0\"\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Add Preference Dialog */}\n      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>\n        <DialogContent className=\"sm:max-w-md\">\n          <DialogHeader>\n            <DialogTitle>Add Notification Rule</DialogTitle>\n            <DialogDescription>\n              Customize how you receive notifications for a specific channel\n              and project.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-ds-05 pt-ds-03\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-scope\" className=\"text-ds-sm font-medium text-surface-fg-muted\">\n                Scope\n              </label>\n              <Select value={newProjectId} onValueChange={setNewProjectId}>\n                <SelectTrigger id=\"pref-scope\">\n                  <SelectValue placeholder=\"Select scope\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"global\">\n                    Global (all projects)\n                  </SelectItem>\n                  {projects.map((p) => (\n                    <SelectItem key={p.id} value={p.id}>\n                      {p.title}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-channel\" className=\"text-ds-sm font-medium text-surface-fg-muted\">\n                Channel\n              </label>\n              <Select value={newChannel} onValueChange={setNewChannel}>\n                <SelectTrigger id=\"pref-channel\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"IN_APP\">In-App</SelectItem>\n                  <SelectItem value=\"GOOGLE_CHAT\">Google Chat</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-min-tier\" className=\"text-ds-sm font-medium text-surface-fg-muted\">\n                Minimum Tier\n              </label>\n              <Select value={newMinTier} onValueChange={setNewMinTier}>\n                <SelectTrigger id=\"pref-min-tier\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {Object.entries(TIER_LABELS).map(([key, label]) => (\n                    <SelectItem key={key} value={key}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex items-center justify-between\">\n              <label htmlFor=\"pref-muted\" className=\"text-ds-md text-surface-fg\">\n                Mute this channel\n              </label>\n              <Switch id=\"pref-muted\" checked={newMuted} onCheckedChange={setNewMuted} />\n            </div>\n\n            <div className=\"flex justify-end gap-ds-03 pt-ds-03\">\n              <Button\n                variant=\"ghost\"\n                onClick={() => {\n                  setShowAddDialog(false)\n                  resetForm()\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={handleAdd}\n                disabled={isSaving}\n              >\n                {isSaving ? 'Saving...' : 'Save Rule'}\n              </Button>\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n  },\n)\n\nNotificationPreferences.displayName = 'NotificationPreferences'\n\nexport { NotificationPreferences }\n"],"mappings":"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"}
+{"version":3,"file":"notification-preferences.js","names":[],"sources":["../../src/shell/notification-preferences.tsx"],"sourcesContent":["'use client'\n\n/**\n * NotificationPreferences -- Manage notification rules per channel/project.\n *\n * Props-driven: accepts preferences array, projects, and callbacks.\n * No internal fetching -- the consumer is responsible for data loading.\n */\nimport { IconBell, IconMessage,IconPlus, IconTrash } from '@tabler/icons-react'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { Button } from '../ui/button'\nimport { Card, CardContent,CardHeader, CardTitle } from '../ui/card'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { IconButton } from '../ui/icon-button'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { Spinner } from '../ui/spinner'\nimport { Switch } from '../ui/switch'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NotificationPreference {\n  id: string\n  userId?: string\n  projectId: string | null\n  channel: string\n  minTier: string\n  muted: boolean\n}\n\nexport interface NotificationProject {\n  id: string\n  title: string\n}\n\nexport interface NotificationPreferencesProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSave'> {\n  /** Current preference rules */\n  preferences?: NotificationPreference[]\n  /** Available projects for scoping rules */\n  projects?: NotificationProject[]\n  /** Whether data is loading */\n  isLoading?: boolean\n  /** Called to add or update a preference */\n  onSave?: (preference: {\n    projectId: string | null\n    channel: string\n    minTier: string\n    muted: boolean\n  }) => void | Promise<void>\n  /** Called to toggle mute on a preference */\n  onToggleMute?: (preference: NotificationPreference) => void | Promise<void>\n  /** Called to update the tier on a preference */\n  onUpdateTier?: (\n    preference: NotificationPreference,\n    newTier: string,\n  ) => void | Promise<void>\n  /** Called to delete a preference */\n  onDelete?: (preferenceId: string) => void | Promise<void>\n  /** Additional className */\n  className?: string\n}\n\n// -----------------------------------------------------------------------\n// Constants\n// -----------------------------------------------------------------------\n\nconst CHANNEL_LABELS: Record<string, { label: string; icon: React.ReactNode }> = {\n  IN_APP: { label: 'In-App', icon: <Icon icon={IconBell} size=\"sm\" /> },\n  GOOGLE_CHAT: { label: 'Google Chat', icon: <Icon icon={IconMessage} size=\"sm\" /> },\n}\n\nconst TIER_LABELS: Record<string, string> = {\n  INFO: 'All (Info+)',\n  IMPORTANT: 'Important+',\n  CRITICAL: 'Critical only',\n}\n\n// -----------------------------------------------------------------------\n// NotificationPreferences\n// -----------------------------------------------------------------------\n\nconst NotificationPreferences = React.forwardRef<HTMLDivElement, NotificationPreferencesProps>(\n  function NotificationPreferences(\n    {\n      preferences = [],\n      projects = [],\n      isLoading = false,\n      onSave,\n      onToggleMute,\n      onUpdateTier,\n      onDelete,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  const [showAddDialog, setShowAddDialog] = useState(false)\n  const [newProjectId, setNewProjectId] = useState<string>('global')\n  const [newChannel, setNewChannel] = useState<string>('IN_APP')\n  const [newMinTier, setNewMinTier] = useState<string>('INFO')\n  const [newMuted, setNewMuted] = useState(false)\n  const [isSaving, setIsSaving] = useState(false)\n\n  const handleAdd = async () => {\n    if (!onSave) return\n    setIsSaving(true)\n    try {\n      await onSave({\n        projectId: newProjectId === 'global' ? null : newProjectId,\n        channel: newChannel,\n        minTier: newMinTier,\n        muted: newMuted,\n      })\n      setShowAddDialog(false)\n      resetForm()\n    } catch (error) {\n      console.error('[Preferences] Failed to save:', error)\n    } finally {\n      setIsSaving(false)\n    }\n  }\n\n  const resetForm = () => {\n    setNewProjectId('global')\n    setNewChannel('IN_APP')\n    setNewMinTier('INFO')\n    setNewMuted(false)\n  }\n\n  const getProjectName = (projectId: string | null) => {\n    if (!projectId) return 'Global (all projects)'\n    const project = projects.find((p) => p.id === projectId)\n    return project?.title || 'Unknown project'\n  }\n\n  return (\n    <>\n      <Card ref={ref} className={className} {...(props as Omit<typeof props, 'color'>)}>\n        <CardHeader className=\"flex flex-row items-center justify-between\">\n          <CardTitle className=\"text-body-md font-semibold\">\n            Notification Preferences\n          </CardTitle>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setShowAddDialog(true)}\n          >\n            <Icon icon={IconPlus} size=\"sm\" className=\"mr-ds-02b\" />\n            Add Rule\n          </Button>\n        </CardHeader>\n        <CardContent>\n          {isLoading ? (\n            <div className=\"flex items-center justify-center py-ds-07\">\n              <Spinner />\n            </div>\n          ) : preferences.length === 0 ? (\n            <div className=\"py-ds-07 text-center\">\n              <p className=\"text-body-md text-surface-fg-subtle\">\n                No custom preferences set. All notifications are delivered by\n                default.\n              </p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col\">\n              {preferences.map((pref, i) => {\n                const channelInfo =\n                  CHANNEL_LABELS[pref.channel] || CHANNEL_LABELS.IN_APP\n                return (\n                  <div\n                    key={pref.id}\n                    className={cn(\n                      'flex items-center gap-ds-05 py-ds-04',\n                      i < preferences.length - 1 &&\n                        'border-b border-surface-border-strong',\n                    )}\n                  >\n                    {/* Channel icon */}\n                    <div className=\"flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-surface bg-surface-raised\">\n                      <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm text-surface-fg-muted\" aria-hidden=\"true\">{channelInfo.icon}</span>\n                    </div>\n\n                    {/* Info */}\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"text-body-md font-medium text-surface-fg\">\n                        {channelInfo.label}\n                      </p>\n                      <p className=\"text-body-sm text-surface-fg-subtle\">\n                        {getProjectName(pref.projectId)}\n                      </p>\n                    </div>\n\n                    {/* Min tier */}\n                    <Select\n                      value={pref.minTier}\n                      onValueChange={(v) => onUpdateTier?.(pref, v)}\n                    >\n                      <SelectTrigger className=\"h-ds-xs-plus w-[130px] text-body-sm\">\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        {Object.entries(TIER_LABELS).map(([key, label]) => (\n                          <SelectItem key={key} value={key}>\n                            {label}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n\n                    {/* Muted toggle */}\n                    <div className=\"flex items-center gap-ds-02b\">\n                      <span className=\"text-body-sm text-surface-fg-subtle\">\n                        {pref.muted ? 'Muted' : 'Active'}\n                      </span>\n                      <Switch\n                        checked={!pref.muted}\n                        onCheckedChange={() => onToggleMute?.(pref)}\n                      />\n                    </div>\n\n                    {/* Delete */}\n                    <IconButton\n                      aria-label={`Delete ${channelInfo.label} notification rule`}\n                      icon={<Icon icon={IconTrash} />}\n                      variant=\"ghost\"\n                      color=\"error\"\n                      size=\"sm\"\n                      onClick={() => onDelete?.(pref.id)}\n                      className=\"shrink-0\"\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Add Preference Dialog */}\n      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>\n        <DialogContent className=\"sm:max-w-md\">\n          <DialogHeader>\n            <DialogTitle>Add Notification Rule</DialogTitle>\n            <DialogDescription>\n              Customize how you receive notifications for a specific channel\n              and project.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-ds-05 pt-ds-03\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-scope\" className=\"text-body-sm font-medium text-surface-fg-muted\">\n                Scope\n              </label>\n              <Select value={newProjectId} onValueChange={setNewProjectId}>\n                <SelectTrigger id=\"pref-scope\">\n                  <SelectValue placeholder=\"Select scope\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"global\">\n                    Global (all projects)\n                  </SelectItem>\n                  {projects.map((p) => (\n                    <SelectItem key={p.id} value={p.id}>\n                      {p.title}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-channel\" className=\"text-body-sm font-medium text-surface-fg-muted\">\n                Channel\n              </label>\n              <Select value={newChannel} onValueChange={setNewChannel}>\n                <SelectTrigger id=\"pref-channel\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"IN_APP\">In-App</SelectItem>\n                  <SelectItem value=\"GOOGLE_CHAT\">Google Chat</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex flex-col gap-ds-02b\">\n              <label htmlFor=\"pref-min-tier\" className=\"text-body-sm font-medium text-surface-fg-muted\">\n                Minimum Tier\n              </label>\n              <Select value={newMinTier} onValueChange={setNewMinTier}>\n                <SelectTrigger id=\"pref-min-tier\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {Object.entries(TIER_LABELS).map(([key, label]) => (\n                    <SelectItem key={key} value={key}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div className=\"flex items-center justify-between\">\n              <label htmlFor=\"pref-muted\" className=\"text-body-md text-surface-fg\">\n                Mute this channel\n              </label>\n              <Switch id=\"pref-muted\" checked={newMuted} onCheckedChange={setNewMuted} />\n            </div>\n\n            <div className=\"flex justify-end gap-ds-03 pt-ds-03\">\n              <Button\n                variant=\"ghost\"\n                onClick={() => {\n                  setShowAddDialog(false)\n                  resetForm()\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={handleAdd}\n                disabled={isSaving}\n              >\n                {isSaving ? 'Saving...' : 'Save Rule'}\n              </Button>\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n  },\n)\n\nNotificationPreferences.displayName = 'NotificationPreferences'\n\nexport { NotificationPreferences }\n"],"mappings":"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"}

package/dist/shell/sidebar.js

@@ -76,7 +76,7 @@ function R({ item: n, isActive: r, isPathActive: i }) {
 									children: a(n.icon)
 								})
 							}), /* @__PURE__ */ A("span", {
-								className: "text-ds-base truncate",
+								className: "text-body-lg truncate",
 								children: n.title
 							})]
 						})
@@ -134,7 +134,7 @@ function R({ item: n, isActive: r, isPathActive: i }) {
 					children: a(n.icon)
 				})
 			}), /* @__PURE__ */ A("span", {
-				className: "text-ds-base truncate",
+				className: "text-body-lg truncate",
 				children: n.title
 			})]
 		})
@@ -155,7 +155,7 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 			/* @__PURE__ */ A(y, {
 				className: "px-ds-06 py-ds-06",
 				children: x ?? /* @__PURE__ */ A("span", {
-					className: "text-ds-lg font-semibold text-surface-fg",
+					className: "text-heading-xs font-semibold text-surface-fg",
 					children: "Logo"
 				})
 			}),
@@ -173,10 +173,10 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 				}), /* @__PURE__ */ j("div", {
 					className: "flex min-w-0 flex-col",
 					children: [/* @__PURE__ */ A(u, {
-						className: "text-ds-md text-surface-fg",
+						className: "text-body-md text-surface-fg",
 						children: c.name ?? ""
 					}), /* @__PURE__ */ A(u, {
-						className: "text-ds-sm text-surface-fg-subtle",
+						className: "text-body-sm text-surface-fg-subtle",
 						children: c.designation || c.role || ""
 					})]
 				})]
@@ -187,7 +187,7 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 				className: "no-scrollbar px-ds-04",
 				children: l.map((e, t) => /* @__PURE__ */ j("div", { children: [t > 0 && /* @__PURE__ */ A(D, {}), /* @__PURE__ */ j(h, { children: [
 					/* @__PURE__ */ A(v, {
-						className: "px-ds-04 text-ds-sm text-surface-fg-subtle",
+						className: "px-ds-04 text-body-sm text-surface-fg-subtle",
 						children: e.label
 					}),
 					e.action && /* @__PURE__ */ A(g, {
@@ -235,7 +235,7 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 							}), /* @__PURE__ */ j("div", {
 								className: "flex min-w-0 flex-col gap-ds-03",
 								children: [/* @__PURE__ */ A("p", {
-									className: "text-ds-sm text-surface-fg line-clamp-2",
+									className: "text-body-sm text-surface-fg line-clamp-2",
 									children: E.promo.text
 								}), E.promo.action && (E.promo.action.href ? /* @__PURE__ */ A(o, {
 									asChild: !0,
@@ -258,7 +258,7 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 						})]
 					}),
 					(E.links?.length || E.version) && /* @__PURE__ */ j("div", {
-						className: "flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle",
+						className: "flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle",
 						children: [
 							E.links?.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
 								className: "transition-colors hover:text-accent-11",
@@ -277,7 +277,7 @@ var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo:
 			}) : T.length > 0 ? /* @__PURE__ */ A(m, {
 				className: "px-ds-06 py-ds-05",
 				children: /* @__PURE__ */ A("div", {
-					className: "flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle",
+					className: "flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle",
 					children: T.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
 						className: "transition-colors hover:text-accent-11",
 						href: e.href,

package/dist/shell/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/shell/sidebar.tsx"],"sourcesContent":["'use client'\n\n/**\n * AppSidebar -- Application-layer sidebar built on the Sidebar primitive.\n *\n * Design-system token migration (2026-02-28):\n *   All V1 colour tokens have been replaced with semantic design-system tokens.\n *   Typography classes replaced with Tailwind equivalents.\n *\n * Props-driven: accepts user info, currentPath, and navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../ui/collapsible'\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  Sidebar as ShadcnSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarSeparator,\n} from '../ui/sidebar'\nimport { TruncatedText } from '../ui/truncated-text'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NavSubItem {\n  title: string\n  href: string\n  /** Optional icon. Accepts any `IconInput`. */\n  icon?: IconInput\n  exact?: boolean\n}\n\nexport interface NavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Badge rendered on the right side of the nav item */\n  badge?: string | number\n  /** Optional child items — renders as collapsible sub-list with chevron */\n  children?: NavSubItem[]\n  /** Whether the collapsible is open by default. Auto-opens when a child is active. */\n  defaultOpen?: boolean\n}\n\nexport interface NavGroup {\n  label: string\n  items: NavItem[]\n  /** Action rendered next to the group label (e.g., a \"+\" button) */\n  action?: React.ReactNode\n}\n\nexport interface SidebarUser {\n  name: string\n  email?: string\n  image?: string | null\n  designation?: string\n  role?: string\n}\n\nexport interface SidebarPromo {\n  /** Promo message text */\n  text: string\n  /** Optional icon rendered before the text. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Action button rendered in the promo banner */\n  action?: { label: string; href?: string; onClick?: () => void }\n  /** When provided, renders a dismiss (X) button that calls this handler */\n  onDismiss?: () => void\n}\n\nexport interface SidebarFooterConfig {\n  /** Legal/utility links rendered as a row separated by dividers */\n  links?: Array<{ label: string; href: string }>\n  /** Version or build info text (or link) rendered inline after links */\n  version?: string | { label: string; href: string }\n  /** Custom content rendered above the links row */\n  slot?: React.ReactNode\n  /** Promo/upsell banner rendered above the links row */\n  promo?: SidebarPromo\n}\n\nexport interface AppSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Currently active pathname -- used to highlight the active nav item */\n  currentPath?: string\n  /** User information displayed in the sidebar header */\n  user?: SidebarUser | null\n  /** Primary navigation groups rendered in the main content area */\n  navGroups?: NavGroup[]\n  /** Optional logo element. Falls back to a text placeholder. */\n  logo?: React.ReactNode\n  /** Footer links rendered at the bottom of the sidebar */\n  footerLinks?: Array<{ label: string; href: string }>\n  /** Structured footer config (takes precedence over footerLinks) */\n  footer?: SidebarFooterConfig\n  /** Content rendered between user header and navigation */\n  headerSlot?: React.ReactNode\n  /** Content rendered between navigation and footer */\n  preFooterSlot?: React.ReactNode\n  /** className applied to the wrapper div around preFooterSlot */\n  preFooterClassName?: string\n  /** Override rendering for specific nav items. Return null to use default rendering. */\n  renderItem?: (item: NavItem, defaultRender: () => React.ReactNode) => React.ReactNode | null\n  /** Additional className for the root sidebar element */\n  className?: string\n  /**\n   * Corner radius of nav items (composable). @default 'md' (control radius, ~6px).\n   * `'lg'` restores the previous rounder look; `'sm'` is tighter; `'pill'` is fully rounded.\n   * Sets the `--ds-sidebar-item-radius` CSS var, so you can also override it via `className`/`style`.\n   */\n  navItemRadius?: 'sm' | 'md' | 'lg' | 'pill'\n}\n\n// -----------------------------------------------------------------------\n// ChevronRight (inline SVG icon for collapsible toggle)\n// -----------------------------------------------------------------------\n\nfunction ChevronRight({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  )\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  )\n}\n\n// -----------------------------------------------------------------------\n// Shared styles\n// -----------------------------------------------------------------------\n\n// Radius is composable via the `navItemRadius` prop (sets --ds-sidebar-item-radius).\n// Default is the control radius (~6px) — surface (10px) read as over-rounded blobs.\nconst navItemBase =\n  'relative gap-ds-04 rounded-[var(--ds-sidebar-item-radius,var(--radius-control))] px-ds-04 py-ds-03 transition-colors duration-fast-02'\nconst NAV_ITEM_RADIUS = {\n  sm: 'var(--radius-control-inner)',\n  md: 'var(--radius-control)',\n  lg: 'var(--radius-surface)',\n  pill: 'var(--radius-pill)',\n} as const\n// Active = tinted surface + accent text + weight. No accent rail — the tint and\n// colour already signal \"you are here\"; a stripe on top is doubled accent (AI tell).\nconst navItemActive = 'bg-accent-2 text-accent-11 font-medium'\nconst navItemInactive = 'text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg'\n\n// -----------------------------------------------------------------------\n// NavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction NavLink({\n  item,\n  isActive,\n  isPathActive,\n}: {\n  item: NavItem\n  isActive: boolean\n  isPathActive: (path: string, exact?: boolean) => boolean\n}) {\n  const Link = useLink()\n  const badgeContent =\n    item.badge != null\n      ? typeof item.badge === 'number' && item.badge > 99\n        ? '99+'\n        : String(item.badge)\n      : null\n\n  // S9: Collapsible children\n  if (item.children && item.children.length > 0) {\n    const hasActiveChild = item.children.some((child) =>\n      isPathActive(child.href, child.exact),\n    )\n    const shouldOpen = hasActiveChild || isActive || (item.defaultOpen ?? false)\n\n    return (\n      <Collapsible defaultOpen={shouldOpen} className=\"group/collapsible\">\n        <SidebarMenuItem>\n          {/* Button row — chevron is anchored here, not on the full <li> */}\n          <div className=\"relative\">\n            <SidebarMenuButton\n              asChild\n              isActive={isActive || hasActiveChild}\n              tooltip={item.title}\n              className={cn(\n                navItemBase,\n                isActive || hasActiveChild ? navItemActive : navItemInactive,\n              )}\n            >\n              <Link\n                href={item.href}\n                aria-label={item.title}\n                aria-current={isActive ? 'page' : undefined}\n                className=\"min-w-0\"\n              >\n                <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">\n                  <IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider>\n                </span>\n                <span className=\"text-ds-base truncate\">{item.title}</span>\n              </Link>\n            </SidebarMenuButton>\n            {badgeContent && <SidebarMenuBadge>{badgeContent}</SidebarMenuBadge>}\n            <CollapsibleTrigger asChild>\n              <button\n                className=\"absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg group-data-[collapsible=icon]:hidden\"\n                aria-label={`Toggle ${item.title}`}\n              >\n                <ChevronRight className=\"h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90\" />\n              </button>\n            </CollapsibleTrigger>\n          </div>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => {\n                const childActive = isPathActive(child.href, child.exact)\n                return (\n                  <SidebarMenuSubItem key={child.href}>\n                    <SidebarMenuSubButton\n                      asChild\n                      isActive={childActive}\n                    >\n                      <Link\n                        href={child.href}\n                        aria-current={childActive ? 'page' : undefined}\n                        className=\"min-w-0\"\n                      >\n                        {child.icon && (\n                          <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0\" aria-hidden=\"true\">\n                            <IconProvider size=\"sm\">{normalizeIcon(child.icon)}</IconProvider>\n                          </span>\n                        )}\n                        <span className=\"truncate\">{child.title}</span>\n                      </Link>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                )\n              })}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    )\n  }\n\n  // Default: flat nav item\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton\n        asChild\n        isActive={isActive}\n        tooltip={item.title}\n        className={cn(\n          navItemBase,\n          isActive ? navItemActive : navItemInactive,\n        )}\n      >\n        <Link\n          href={item.href}\n          aria-label={item.title}\n          aria-current={isActive ? 'page' : undefined}\n          className=\"min-w-0\"\n        >\n          <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n          <span className=\"text-ds-base truncate\">{item.title}</span>\n        </Link>\n      </SidebarMenuButton>\n      {badgeContent && <SidebarMenuBadge>{badgeContent}</SidebarMenuBadge>}\n    </SidebarMenuItem>\n  )\n}\n\n// -----------------------------------------------------------------------\n// AppSidebar\n// -----------------------------------------------------------------------\n\nconst AppSidebar = React.forwardRef<HTMLDivElement, AppSidebarProps>(\n  (\n    {\n      currentPath = '/',\n      user,\n      navGroups = [],\n      logo,\n      headerSlot,\n      preFooterSlot,\n      preFooterClassName,\n      footerLinks = [],\n      footer,\n      renderItem,\n      className,\n      navItemRadius,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    return (\n      <ShadcnSidebar\n        {...props}\n        ref={ref}\n        aria-label=\"Main navigation\"\n        style={\n          navItemRadius\n            ? ({ '--ds-sidebar-item-radius': NAV_ITEM_RADIUS[navItemRadius], ...style } as React.CSSProperties)\n            : style\n        }\n        className={cn(\n          'z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-raised md:flex',\n          className,\n        )}\n      >\n        {/* Logo Header */}\n        <SidebarHeader className=\"px-ds-06 py-ds-06\">\n          {logo ?? (\n            <span className=\"text-ds-lg font-semibold text-surface-fg\">\n              Logo\n            </span>\n          )}\n        </SidebarHeader>\n\n        {/* User Info */}\n        {user && (\n          <div className=\"flex items-center gap-ds-04 px-ds-06 pb-ds-05\">\n            <Avatar className=\"h-ds-sm-plus w-ds-sm-plus\">\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            <div className=\"flex min-w-0 flex-col\">\n              <TruncatedText className=\"text-ds-md text-surface-fg\">\n                {user.name ?? ''}\n              </TruncatedText>\n              <TruncatedText className=\"text-ds-sm text-surface-fg-subtle\">\n                {user.designation || user.role || ''}\n              </TruncatedText>\n            </div>\n          </div>\n        )}\n\n        <SidebarSeparator />\n\n        {/* Header Slot (S13) */}\n        {headerSlot && (\n          <>\n            {headerSlot}\n            <SidebarSeparator />\n          </>\n        )}\n\n        {/* Navigation Groups */}\n        <SidebarContent className=\"no-scrollbar px-ds-04\">\n          {navGroups.map((group, idx) => (\n            <div key={group.label}>\n              {idx > 0 && <SidebarSeparator />}\n              <SidebarGroup>\n                <SidebarGroupLabel className=\"px-ds-04 text-ds-sm text-surface-fg-subtle\">\n                  {group.label}\n                </SidebarGroupLabel>\n                {group.action && (\n                  <SidebarGroupAction asChild>{group.action}</SidebarGroupAction>\n                )}\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {group.items.map((item) => {\n                      const defaultRender = () => (\n                        <NavLink\n                          item={item}\n                          isActive={isActive(item.href, item.exact)}\n                          isPathActive={isActive}\n                        />\n                      )\n\n                      if (renderItem) {\n                        const custom = renderItem(item, defaultRender)\n                        if (custom !== null) {\n                          return <React.Fragment key={item.href}>{custom}</React.Fragment>\n                        }\n                      }\n\n                      return <React.Fragment key={item.href}>{defaultRender()}</React.Fragment>\n                    })}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </div>\n          ))}\n        </SidebarContent>\n\n        {/* Pre-Footer Slot (S13) */}\n        {preFooterSlot && (\n          <>\n            <SidebarSeparator />\n            <div className={preFooterClassName}>\n              {preFooterSlot}\n            </div>\n          </>\n        )}\n\n        {/* Footer */}\n        {footer ? (\n          <SidebarFooter className=\"gap-ds-03 px-ds-06 py-ds-05\">\n            {footer.slot && <div>{footer.slot}</div>}\n\n            {/* Promo banner */}\n            {footer.promo && (\n              <div className=\"relative rounded-surface bg-surface-raised p-ds-04 shadow-raised\">\n                {footer.promo.onDismiss && (\n                  <button\n                    onClick={footer.promo.onDismiss}\n                    aria-label=\"Dismiss\"\n                    className=\"absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg\"\n                  >\n                    <CloseIcon className=\"h-3.5 w-3.5\" />\n                  </button>\n                )}\n                <div className=\"flex flex-col gap-ds-03\">\n                  {footer.promo.icon && (\n                    <span className=\"text-accent-11 [&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">\n                      <IconProvider size=\"md\">{normalizeIcon(footer.promo.icon)}</IconProvider>\n                    </span>\n                  )}\n                  <div className=\"flex min-w-0 flex-col gap-ds-03\">\n                    <p className=\"text-ds-sm text-surface-fg line-clamp-2\">{footer.promo.text}</p>\n                    {footer.promo.action && (\n                      footer.promo.action.href ? (\n                        <Button asChild variant=\"solid\" size=\"sm\" className=\"self-start\">\n                          <Link\n                            href={footer.promo.action.href}\n                            onClick={footer.promo.action.onClick}\n                          >\n                            {footer.promo.action.label}\n                          </Link>\n                        </Button>\n                      ) : (\n                        <Button\n                          variant=\"solid\"\n                          size=\"sm\"\n                          className=\"self-start\"\n                          onClick={footer.promo.action.onClick}\n                        >\n                          {footer.promo.action.label}\n                        </Button>\n                      )\n                    )}\n                  </div>\n                </div>\n              </div>\n            )}\n\n            {/* Links + version on same line */}\n            {(footer.links?.length || footer.version) && (\n              <div className=\"flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle\">\n                {footer.links?.map((link, i) => (\n                  <React.Fragment key={link.href}>\n                    {i > 0 && <span>·</span>}\n                    <Link\n                      className=\"transition-colors hover:text-accent-11\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </Link>\n                  </React.Fragment>\n                ))}\n                {footer.links?.length && footer.version && <span>·</span>}\n                {footer.version && (\n                  typeof footer.version === 'string'\n                    ? <span>{footer.version}</span>\n                    : <Link className=\"transition-colors hover:text-accent-11\" href={footer.version.href}>{footer.version.label}</Link>\n                )}\n              </div>\n            )}\n          </SidebarFooter>\n        ) : footerLinks.length > 0 ? (\n          <SidebarFooter className=\"px-ds-06 py-ds-05\">\n            <div className=\"flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle\">\n              {footerLinks.map((link, i) => (\n                <React.Fragment key={link.href}>\n                  {i > 0 && <span>·</span>}\n                  <Link\n                    className=\"transition-colors hover:text-accent-11\"\n                    href={link.href}\n                  >\n                    {link.label}\n                  </Link>\n                </React.Fragment>\n              ))}\n            </div>\n          </SidebarFooter>\n        ) : null}\n      </ShadcnSidebar>\n    )\n  },\n)\nAppSidebar.displayName = 'AppSidebar'\n\nexport { AppSidebar }\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/shell/sidebar.tsx"],"sourcesContent":["'use client'\n\n/**\n * AppSidebar -- Application-layer sidebar built on the Sidebar primitive.\n *\n * Design-system token migration (2026-02-28):\n *   All V1 colour tokens have been replaced with semantic design-system tokens.\n *   Typography classes replaced with Tailwind equivalents.\n *\n * Props-driven: accepts user info, currentPath, and navItems instead of\n * reading from Remix hooks or Zustand stores.\n */\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../ui/collapsible'\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  Sidebar as ShadcnSidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarSeparator,\n} from '../ui/sidebar'\nimport { TruncatedText } from '../ui/truncated-text'\nimport { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NavSubItem {\n  title: string\n  href: string\n  /** Optional icon. Accepts any `IconInput`. */\n  icon?: IconInput\n  exact?: boolean\n}\n\nexport interface NavItem {\n  title: string\n  href: string\n  /** Icon for this nav item. Accepts any `IconInput`. */\n  icon: IconInput\n  /** When true, the route matches only when the path is exactly equal */\n  exact?: boolean\n  /** Badge rendered on the right side of the nav item */\n  badge?: string | number\n  /** Optional child items — renders as collapsible sub-list with chevron */\n  children?: NavSubItem[]\n  /** Whether the collapsible is open by default. Auto-opens when a child is active. */\n  defaultOpen?: boolean\n}\n\nexport interface NavGroup {\n  label: string\n  items: NavItem[]\n  /** Action rendered next to the group label (e.g., a \"+\" button) */\n  action?: React.ReactNode\n}\n\nexport interface SidebarUser {\n  name: string\n  email?: string\n  image?: string | null\n  designation?: string\n  role?: string\n}\n\nexport interface SidebarPromo {\n  /** Promo message text */\n  text: string\n  /** Optional icon rendered before the text. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Action button rendered in the promo banner */\n  action?: { label: string; href?: string; onClick?: () => void }\n  /** When provided, renders a dismiss (X) button that calls this handler */\n  onDismiss?: () => void\n}\n\nexport interface SidebarFooterConfig {\n  /** Legal/utility links rendered as a row separated by dividers */\n  links?: Array<{ label: string; href: string }>\n  /** Version or build info text (or link) rendered inline after links */\n  version?: string | { label: string; href: string }\n  /** Custom content rendered above the links row */\n  slot?: React.ReactNode\n  /** Promo/upsell banner rendered above the links row */\n  promo?: SidebarPromo\n}\n\nexport interface AppSidebarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Currently active pathname -- used to highlight the active nav item */\n  currentPath?: string\n  /** User information displayed in the sidebar header */\n  user?: SidebarUser | null\n  /** Primary navigation groups rendered in the main content area */\n  navGroups?: NavGroup[]\n  /** Optional logo element. Falls back to a text placeholder. */\n  logo?: React.ReactNode\n  /** Footer links rendered at the bottom of the sidebar */\n  footerLinks?: Array<{ label: string; href: string }>\n  /** Structured footer config (takes precedence over footerLinks) */\n  footer?: SidebarFooterConfig\n  /** Content rendered between user header and navigation */\n  headerSlot?: React.ReactNode\n  /** Content rendered between navigation and footer */\n  preFooterSlot?: React.ReactNode\n  /** className applied to the wrapper div around preFooterSlot */\n  preFooterClassName?: string\n  /** Override rendering for specific nav items. Return null to use default rendering. */\n  renderItem?: (item: NavItem, defaultRender: () => React.ReactNode) => React.ReactNode | null\n  /** Additional className for the root sidebar element */\n  className?: string\n  /**\n   * Corner radius of nav items (composable). @default 'md' (control radius, ~6px).\n   * `'lg'` restores the previous rounder look; `'sm'` is tighter; `'pill'` is fully rounded.\n   * Sets the `--ds-sidebar-item-radius` CSS var, so you can also override it via `className`/`style`.\n   */\n  navItemRadius?: 'sm' | 'md' | 'lg' | 'pill'\n}\n\n// -----------------------------------------------------------------------\n// ChevronRight (inline SVG icon for collapsible toggle)\n// -----------------------------------------------------------------------\n\nfunction ChevronRight({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  )\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  )\n}\n\n// -----------------------------------------------------------------------\n// Shared styles\n// -----------------------------------------------------------------------\n\n// Radius is composable via the `navItemRadius` prop (sets --ds-sidebar-item-radius).\n// Default is the control radius (~6px) — surface (10px) read as over-rounded blobs.\nconst navItemBase =\n  'relative gap-ds-04 rounded-[var(--ds-sidebar-item-radius,var(--radius-control))] px-ds-04 py-ds-03 transition-colors duration-fast-02'\nconst NAV_ITEM_RADIUS = {\n  sm: 'var(--radius-control-inner)',\n  md: 'var(--radius-control)',\n  lg: 'var(--radius-surface)',\n  pill: 'var(--radius-pill)',\n} as const\n// Active = tinted surface + accent text + weight. No accent rail — the tint and\n// colour already signal \"you are here\"; a stripe on top is doubled accent (AI tell).\nconst navItemActive = 'bg-accent-2 text-accent-11 font-medium'\nconst navItemInactive = 'text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg'\n\n// -----------------------------------------------------------------------\n// NavLink (internal)\n// -----------------------------------------------------------------------\n\nfunction NavLink({\n  item,\n  isActive,\n  isPathActive,\n}: {\n  item: NavItem\n  isActive: boolean\n  isPathActive: (path: string, exact?: boolean) => boolean\n}) {\n  const Link = useLink()\n  const badgeContent =\n    item.badge != null\n      ? typeof item.badge === 'number' && item.badge > 99\n        ? '99+'\n        : String(item.badge)\n      : null\n\n  // S9: Collapsible children\n  if (item.children && item.children.length > 0) {\n    const hasActiveChild = item.children.some((child) =>\n      isPathActive(child.href, child.exact),\n    )\n    const shouldOpen = hasActiveChild || isActive || (item.defaultOpen ?? false)\n\n    return (\n      <Collapsible defaultOpen={shouldOpen} className=\"group/collapsible\">\n        <SidebarMenuItem>\n          {/* Button row — chevron is anchored here, not on the full <li> */}\n          <div className=\"relative\">\n            <SidebarMenuButton\n              asChild\n              isActive={isActive || hasActiveChild}\n              tooltip={item.title}\n              className={cn(\n                navItemBase,\n                isActive || hasActiveChild ? navItemActive : navItemInactive,\n              )}\n            >\n              <Link\n                href={item.href}\n                aria-label={item.title}\n                aria-current={isActive ? 'page' : undefined}\n                className=\"min-w-0\"\n              >\n                <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">\n                  <IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider>\n                </span>\n                <span className=\"text-body-lg truncate\">{item.title}</span>\n              </Link>\n            </SidebarMenuButton>\n            {badgeContent && <SidebarMenuBadge>{badgeContent}</SidebarMenuBadge>}\n            <CollapsibleTrigger asChild>\n              <button\n                className=\"absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg group-data-[collapsible=icon]:hidden\"\n                aria-label={`Toggle ${item.title}`}\n              >\n                <ChevronRight className=\"h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90\" />\n              </button>\n            </CollapsibleTrigger>\n          </div>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              {item.children.map((child) => {\n                const childActive = isPathActive(child.href, child.exact)\n                return (\n                  <SidebarMenuSubItem key={child.href}>\n                    <SidebarMenuSubButton\n                      asChild\n                      isActive={childActive}\n                    >\n                      <Link\n                        href={child.href}\n                        aria-current={childActive ? 'page' : undefined}\n                        className=\"min-w-0\"\n                      >\n                        {child.icon && (\n                          <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0\" aria-hidden=\"true\">\n                            <IconProvider size=\"sm\">{normalizeIcon(child.icon)}</IconProvider>\n                          </span>\n                        )}\n                        <span className=\"truncate\">{child.title}</span>\n                      </Link>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                )\n              })}\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    )\n  }\n\n  // Default: flat nav item\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton\n        asChild\n        isActive={isActive}\n        tooltip={item.title}\n        className={cn(\n          navItemBase,\n          isActive ? navItemActive : navItemInactive,\n        )}\n      >\n        <Link\n          href={item.href}\n          aria-label={item.title}\n          aria-current={isActive ? 'page' : undefined}\n          className=\"min-w-0\"\n        >\n          <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\"><IconProvider size=\"md\">{normalizeIcon(item.icon)}</IconProvider></span>\n          <span className=\"text-body-lg truncate\">{item.title}</span>\n        </Link>\n      </SidebarMenuButton>\n      {badgeContent && <SidebarMenuBadge>{badgeContent}</SidebarMenuBadge>}\n    </SidebarMenuItem>\n  )\n}\n\n// -----------------------------------------------------------------------\n// AppSidebar\n// -----------------------------------------------------------------------\n\nconst AppSidebar = React.forwardRef<HTMLDivElement, AppSidebarProps>(\n  (\n    {\n      currentPath = '/',\n      user,\n      navGroups = [],\n      logo,\n      headerSlot,\n      preFooterSlot,\n      preFooterClassName,\n      footerLinks = [],\n      footer,\n      renderItem,\n      className,\n      navItemRadius,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const isActive = (path: string, exact = false) => {\n      if (exact || path === '/') {\n        return currentPath === path\n      }\n      return currentPath.startsWith(path)\n    }\n\n    return (\n      <ShadcnSidebar\n        {...props}\n        ref={ref}\n        aria-label=\"Main navigation\"\n        style={\n          navItemRadius\n            ? ({ '--ds-sidebar-item-radius': NAV_ITEM_RADIUS[navItemRadius], ...style } as React.CSSProperties)\n            : style\n        }\n        className={cn(\n          'z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-raised md:flex',\n          className,\n        )}\n      >\n        {/* Logo Header */}\n        <SidebarHeader className=\"px-ds-06 py-ds-06\">\n          {logo ?? (\n            <span className=\"text-heading-xs font-semibold text-surface-fg\">\n              Logo\n            </span>\n          )}\n        </SidebarHeader>\n\n        {/* User Info */}\n        {user && (\n          <div className=\"flex items-center gap-ds-04 px-ds-06 pb-ds-05\">\n            <Avatar className=\"h-ds-sm-plus w-ds-sm-plus\">\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            <div className=\"flex min-w-0 flex-col\">\n              <TruncatedText className=\"text-body-md text-surface-fg\">\n                {user.name ?? ''}\n              </TruncatedText>\n              <TruncatedText className=\"text-body-sm text-surface-fg-subtle\">\n                {user.designation || user.role || ''}\n              </TruncatedText>\n            </div>\n          </div>\n        )}\n\n        <SidebarSeparator />\n\n        {/* Header Slot (S13) */}\n        {headerSlot && (\n          <>\n            {headerSlot}\n            <SidebarSeparator />\n          </>\n        )}\n\n        {/* Navigation Groups */}\n        <SidebarContent className=\"no-scrollbar px-ds-04\">\n          {navGroups.map((group, idx) => (\n            <div key={group.label}>\n              {idx > 0 && <SidebarSeparator />}\n              <SidebarGroup>\n                <SidebarGroupLabel className=\"px-ds-04 text-body-sm text-surface-fg-subtle\">\n                  {group.label}\n                </SidebarGroupLabel>\n                {group.action && (\n                  <SidebarGroupAction asChild>{group.action}</SidebarGroupAction>\n                )}\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {group.items.map((item) => {\n                      const defaultRender = () => (\n                        <NavLink\n                          item={item}\n                          isActive={isActive(item.href, item.exact)}\n                          isPathActive={isActive}\n                        />\n                      )\n\n                      if (renderItem) {\n                        const custom = renderItem(item, defaultRender)\n                        if (custom !== null) {\n                          return <React.Fragment key={item.href}>{custom}</React.Fragment>\n                        }\n                      }\n\n                      return <React.Fragment key={item.href}>{defaultRender()}</React.Fragment>\n                    })}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </div>\n          ))}\n        </SidebarContent>\n\n        {/* Pre-Footer Slot (S13) */}\n        {preFooterSlot && (\n          <>\n            <SidebarSeparator />\n            <div className={preFooterClassName}>\n              {preFooterSlot}\n            </div>\n          </>\n        )}\n\n        {/* Footer */}\n        {footer ? (\n          <SidebarFooter className=\"gap-ds-03 px-ds-06 py-ds-05\">\n            {footer.slot && <div>{footer.slot}</div>}\n\n            {/* Promo banner */}\n            {footer.promo && (\n              <div className=\"relative rounded-surface bg-surface-raised p-ds-04 shadow-raised\">\n                {footer.promo.onDismiss && (\n                  <button\n                    onClick={footer.promo.onDismiss}\n                    aria-label=\"Dismiss\"\n                    className=\"absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-control text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg\"\n                  >\n                    <CloseIcon className=\"h-3.5 w-3.5\" />\n                  </button>\n                )}\n                <div className=\"flex flex-col gap-ds-03\">\n                  {footer.promo.icon && (\n                    <span className=\"text-accent-11 [&>svg]:h-ico-md [&>svg]:w-ico-md\" aria-hidden=\"true\">\n                      <IconProvider size=\"md\">{normalizeIcon(footer.promo.icon)}</IconProvider>\n                    </span>\n                  )}\n                  <div className=\"flex min-w-0 flex-col gap-ds-03\">\n                    <p className=\"text-body-sm text-surface-fg line-clamp-2\">{footer.promo.text}</p>\n                    {footer.promo.action && (\n                      footer.promo.action.href ? (\n                        <Button asChild variant=\"solid\" size=\"sm\" className=\"self-start\">\n                          <Link\n                            href={footer.promo.action.href}\n                            onClick={footer.promo.action.onClick}\n                          >\n                            {footer.promo.action.label}\n                          </Link>\n                        </Button>\n                      ) : (\n                        <Button\n                          variant=\"solid\"\n                          size=\"sm\"\n                          className=\"self-start\"\n                          onClick={footer.promo.action.onClick}\n                        >\n                          {footer.promo.action.label}\n                        </Button>\n                      )\n                    )}\n                  </div>\n                </div>\n              </div>\n            )}\n\n            {/* Links + version on same line */}\n            {(footer.links?.length || footer.version) && (\n              <div className=\"flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle\">\n                {footer.links?.map((link, i) => (\n                  <React.Fragment key={link.href}>\n                    {i > 0 && <span>·</span>}\n                    <Link\n                      className=\"transition-colors hover:text-accent-11\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </Link>\n                  </React.Fragment>\n                ))}\n                {footer.links?.length && footer.version && <span>·</span>}\n                {footer.version && (\n                  typeof footer.version === 'string'\n                    ? <span>{footer.version}</span>\n                    : <Link className=\"transition-colors hover:text-accent-11\" href={footer.version.href}>{footer.version.label}</Link>\n                )}\n              </div>\n            )}\n          </SidebarFooter>\n        ) : footerLinks.length > 0 ? (\n          <SidebarFooter className=\"px-ds-06 py-ds-05\">\n            <div className=\"flex items-center gap-ds-03 text-body-sm text-surface-fg-subtle\">\n              {footerLinks.map((link, i) => (\n                <React.Fragment key={link.href}>\n                  {i > 0 && <span>·</span>}\n                  <Link\n                    className=\"transition-colors hover:text-accent-11\"\n                    href={link.href}\n                  >\n                    {link.label}\n                  </Link>\n                </React.Fragment>\n              ))}\n            </div>\n          </SidebarFooter>\n        ) : null}\n      </ShadcnSidebar>\n    )\n  },\n)\nAppSidebar.displayName = 'AppSidebar'\n\nexport { AppSidebar }\n"],"mappings":"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"}

package/dist/shell/top-bar.js

@@ -60,7 +60,7 @@ var j = _.forwardRef(({ icon: n, tooltip: r, className: i, ...a }, s) => /* @__P
 		ref: s,
 		type: "button",
 		"aria-label": r,
-		className: t("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", i),
+		className: t("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-card-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", i),
 		...a,
 		children: /* @__PURE__ */ y("span", {
 			className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
@@ -79,7 +79,7 @@ var j = _.forwardRef(({ icon: n, tooltip: r, className: i, ...a }, s) => /* @__P
 j.displayName = "TopBar.IconButton";
 var M = _.forwardRef(({ className: e, children: n, ...r }, i) => /* @__PURE__ */ y("h2", {
 	ref: i,
-	className: t("hidden text-ds-lg text-surface-fg md:block", e),
+	className: t("hidden text-heading-xs text-surface-fg md:block", e),
 	...r,
 	children: n
 }));
@@ -118,12 +118,12 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 			/* @__PURE__ */ b("div", {
 				className: "border-b border-surface-border-strong px-ds-05 py-ds-04",
 				children: [/* @__PURE__ */ y("p", {
-					className: "text-ds-md text-surface-fg",
+					className: "text-body-md text-surface-fg",
 					children: T.name
 				}), T.email && /* @__PURE__ */ y(h, {
 					as: "p",
 					mode: "middle",
-					className: "text-ds-sm text-surface-fg-subtle",
+					className: "text-body-sm text-surface-fg-subtle",
 					children: T.email
 				})]
 			}),
@@ -135,7 +135,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 					size: "sm",
 					className: "text-surface-fg-muted"
 				}), /* @__PURE__ */ y("span", {
-					className: "text-ds-md text-surface-fg-muted",
+					className: "text-body-md text-surface-fg-muted",
 					children: "Profile"
 				})]
 			}),
@@ -161,7 +161,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 							})
 						}),
 						/* @__PURE__ */ y("span", {
-							className: t("text-ds-md", i),
+							className: t("text-body-md", i),
 							children: n.label
 						}),
 						n.badge != null && n.badge !== !1 && (typeof n.badge == "string" ? /* @__PURE__ */ y("span", {
@@ -183,7 +183,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 					size: "sm",
 					className: "text-surface-fg-muted"
 				}), /* @__PURE__ */ y("span", {
-					className: "text-ds-md text-surface-fg-muted",
+					className: "text-body-md text-surface-fg-muted",
 					children: j === "dark" ? "Light Mode" : "Dark Mode"
 				})]
 			}),
@@ -195,7 +195,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 					size: "sm",
 					className: "text-error-11"
 				}), /* @__PURE__ */ y("span", {
-					className: "text-ds-md text-error-11",
+					className: "text-body-md text-error-11",
 					children: "Logout"
 				})]
 			})] })