@devalok/shilp-sutra 0.38.0 → 0.39.0

package/dist/shell/notification-center.js

@@ -41,7 +41,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 		children: [
 			/* @__PURE__ */ b("div", {
 				className: "mt-ds-02b flex shrink-0",
-				children: /* @__PURE__ */ b("span", { className: t("h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard", O[e.tier] || O.INFO, e.isRead ? "opacity-20" : "opacity-100") })
+				children: /* @__PURE__ */ b("span", { className: t("h-[8px] w-[8px] rounded-pill transition-opacity duration-fast-02 ease-productive-standard", O[e.tier] || O.INFO, e.isRead ? "opacity-20" : "opacity-100") })
 			}),
 			/* @__PURE__ */ x("div", {
 				className: "min-w-0 flex-1",
@@ -75,7 +75,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 								t.stopPropagation(), n.onClick(e.id);
 							},
 							onKeyDown: (e) => e.stopPropagation(),
-							className: t("rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", n.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : n.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
+							className: t("rounded-control px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", n.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : n.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
 							children: n.label
 						}, n.label))
 					})
@@ -88,7 +88,7 @@ function k({ notification: e, onRead: n, onNavigate: i, getRoute: a, onDismiss:
 					t.stopPropagation(), o(e.id);
 				},
 				onKeyDown: (e) => e.stopPropagation(),
-				className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm 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",
+				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",
 				children: /* @__PURE__ */ b(r, {
 					icon: w,
 					size: "sm"
@@ -121,7 +121,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 					className: "text-ds-md font-semibold text-surface-fg",
 					children: "Notifications"
 				}), q > 0 && /* @__PURE__ */ b("span", {
-					className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11",
+					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",
 					children: q
 				})]
 			}), /* @__PURE__ */ x("div", {
@@ -145,7 +145,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 				className: "flex flex-col items-center justify-center px-ds-05 py-ds-09",
 				children: [
 					/* @__PURE__ */ b("div", {
-						className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised",
+						className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-pill bg-surface-raised",
 						children: /* @__PURE__ */ b(r, {
 							icon: C,
 							size: "lg",
@@ -198,7 +198,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 		...H,
 		ref: U,
 		"aria-label": q > 0 ? `Notifications, ${q} unread` : "Notifications",
-		className: t("relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover", V),
+		className: t("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", V),
 		children: [/* @__PURE__ */ b(r, {
 			icon: S,
 			size: "sm"
@@ -216,7 +216,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 				duration: e.slow01,
 				ease: "easeInOut"
 			},
-			className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
+			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",
 			children: q > 99 ? "99+" : q
 		})]
 	});
@@ -256,7 +256,7 @@ var A = g.forwardRef(({ notifications: h = [], unreadCount: g, open: w, onOpenCh
 			align: "center",
 			children: "Notifications"
 		})] }), /* @__PURE__ */ b(o, {
-			className: t("w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", B),
+			className: t("w-[380px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", B),
 			sideOffset: 8,
 			align: "end",
 			children: Q

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 { 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'\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-ds-full 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        <p\n          className={cn(\n            'truncate text-ds-md text-surface-fg',\n            !notification.isRead && 'font-semibold',\n          )}\n        >\n          {notification.title}\n        </p>\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              <span className=\"truncate text-ds-sm text-surface-fg-subtle\">\n                {notification.project.title}\n              </span>\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                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action.onClick(notification.id)\n                }}\n                onKeyDown={(e) => e.stopPropagation()}\n                className={cn(\n                  'rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  action.variant === 'primary'\n                    ? 'bg-accent-9 text-accent-fg hover:bg-accent-10'\n                    : action.variant === 'danger'\n                      ? 'text-error-11 hover:bg-error-3'\n                      : 'text-surface-fg-muted hover:bg-surface-raised-hover',\n                )}\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-ds-sm 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-ds-full 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-ds-full 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-ds-full 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-ds-full 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-ds-xl border border-surface-border-strong 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 { 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'\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        <p\n          className={cn(\n            'truncate text-ds-md text-surface-fg',\n            !notification.isRead && 'font-semibold',\n          )}\n        >\n          {notification.title}\n        </p>\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              <span className=\"truncate text-ds-sm text-surface-fg-subtle\">\n                {notification.project.title}\n              </span>\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                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  action.onClick(notification.id)\n                }}\n                onKeyDown={(e) => e.stopPropagation()}\n                className={cn(\n                  'rounded-control px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  action.variant === 'primary'\n                    ? 'bg-accent-9 text-accent-fg hover:bg-accent-10'\n                    : action.variant === 'danger'\n                      ? 'text-error-11 hover:bg-error-3'\n                      : 'text-surface-fg-muted hover:bg-surface-raised-hover',\n                )}\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 border border-surface-border-strong 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

@@ -87,7 +87,7 @@ var O = {
 					className: e("flex items-center gap-ds-05 py-ds-04", r < y.length - 1 && "border-b border-surface-border-strong"),
 					children: [
 						/* @__PURE__ */ S("div", {
-							className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-surface-raised",
+							className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-surface bg-surface-raised",
 							children: /* @__PURE__ */ S("span", {
 								className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm text-surface-fg-muted",
 								"aria-hidden": "true",

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 { 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 space-y-0 pb-ds-04\">\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-ds-lg 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                    <button\n                      type=\"button\"\n                      onClick={() => onDelete?.(pref.id)}\n                      className=\"shrink-0 rounded p-ds-02b text-surface-fg-subtle transition-colors hover:bg-surface-raised hover:text-error-11\"\n                    >\n                      <Icon icon={IconTrash} size=\"sm\" />\n                    </button>\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 { 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 space-y-0 pb-ds-04\">\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                    <button\n                      type=\"button\"\n                      onClick={() => onDelete?.(pref.id)}\n                      className=\"shrink-0 rounded p-ds-02b text-surface-fg-subtle transition-colors hover:bg-surface-raised hover:text-error-11\"\n                    >\n                      <Icon icon={IconTrash} size=\"sm\" />\n                    </button>\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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"}

package/dist/shell/sidebar.js

@@ -38,7 +38,7 @@ function k({ className: e }) {
 		children: [/* @__PURE__ */ E("path", { d: "M18 6 6 18" }), /* @__PURE__ */ E("path", { d: "m6 6 12 12" })]
 	});
 }
-var A = "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors duration-fast-02", j = "bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-accent-9 after:content-['']", M = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
+var A = "relative gap-ds-04 rounded-surface px-ds-04 py-ds-03 transition-colors duration-fast-02", j = "bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-pill after:bg-accent-9 after:content-['']", M = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
 function N({ item: t, isActive: n, isPathActive: r }) {
 	let c = s(), l = t.badge == null ? null : typeof t.badge == "number" && t.badge > 99 ? "99+" : String(t.badge);
 	if (t.children && t.children.length > 0) {
@@ -72,7 +72,7 @@ function N({ item: t, isActive: n, isPathActive: r }) {
 					/* @__PURE__ */ E(o, {
 						asChild: !0,
 						children: /* @__PURE__ */ E("button", {
-							className: "absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg group-data-[collapsible=icon]:hidden",
+							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",
 							"aria-label": `Toggle ${t.title}`,
 							children: /* @__PURE__ */ E(O, { className: "h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90" })
 						})
@@ -189,11 +189,11 @@ var P = w.forwardRef(({ currentPath: i = "/", user: a, navGroups: o = [], logo:
 				children: [
 					S.slot && /* @__PURE__ */ E("div", { children: S.slot }),
 					S.promo && /* @__PURE__ */ D("div", {
-						className: "relative rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04 shadow-raised",
+						className: "relative rounded-surface border border-surface-border bg-surface-raised p-ds-04 shadow-raised",
 						children: [S.promo.onDismiss && /* @__PURE__ */ E("button", {
 							onClick: S.promo.onDismiss,
 							"aria-label": "Dismiss",
-							className: "absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg",
+							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",
 							children: /* @__PURE__ */ E(k, { className: "h-3.5 w-3.5" })
 						}), /* @__PURE__ */ D("div", {
 							className: "flex flex-col gap-ds-03",
@@ -209,11 +209,11 @@ var P = w.forwardRef(({ currentPath: i = "/", user: a, navGroups: o = [], logo:
 								}), S.promo.action && (S.promo.action.href ? /* @__PURE__ */ E(P, {
 									href: S.promo.action.href,
 									onClick: S.promo.action.onClick,
-									className: "inline-flex self-start rounded-ds-md bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10",
+									className: "inline-flex self-start rounded-control bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10",
 									children: S.promo.action.label
 								}) : /* @__PURE__ */ E("button", {
 									onClick: S.promo.action.onClick,
-									className: "inline-flex self-start rounded-ds-md bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10",
+									className: "inline-flex self-start rounded-control bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10",
 									children: S.promo.action.label
 								}))]
 							})]

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 {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../ui/collapsible'\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 { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NavSubItem {\n  title: string\n  href: string\n  icon?: React.ReactNode\n  exact?: boolean\n}\n\nexport interface NavItem {\n  title: string\n  href: string\n  icon: React.ReactNode\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 */\n  icon?: React.ReactNode\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\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\nconst navItemBase = 'relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors duration-fast-02'\nconst navItemActive =\n  \"bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-accent-9 after:content-['']\"\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              >\n                <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n                <span className=\"text-ds-base\">{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-ds-md 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                      >\n                        {child.icon && (\n                          <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0\" aria-hidden=\"true\">\n                            {child.icon}\n                          </span>\n                        )}\n                        <span>{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        >\n          <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">{item.icon}</span>\n          <span className=\"text-ds-base\">{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      ...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        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              <span className=\"truncate text-ds-md text-surface-fg\">\n                {user.name}\n              </span>\n              <span className=\"truncate text-ds-sm text-surface-fg-subtle\">\n                {user.designation || user.role}\n              </span>\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-ds-lg border border-surface-border 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-ds-md 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                      {footer.promo.icon}\n                    </span>\n                  )}\n                  <div className=\"flex min-w-0 flex-col gap-ds-03\">\n                    <p className=\"text-ds-sm text-surface-fg\">{footer.promo.text}</p>\n                    {footer.promo.action && (\n                      footer.promo.action.href ? (\n                        <Link\n                          href={footer.promo.action.href}\n                          onClick={footer.promo.action.onClick}\n                          className=\"inline-flex self-start rounded-ds-md bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10\"\n                        >\n                          {footer.promo.action.label}\n                        </Link>\n                      ) : (\n                        <button\n                          onClick={footer.promo.action.onClick}\n                          className=\"inline-flex self-start rounded-ds-md bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10\"\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 {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../ui/collapsible'\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 { useLink } from './link-context'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface NavSubItem {\n  title: string\n  href: string\n  icon?: React.ReactNode\n  exact?: boolean\n}\n\nexport interface NavItem {\n  title: string\n  href: string\n  icon: React.ReactNode\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 */\n  icon?: React.ReactNode\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\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\nconst navItemBase = 'relative gap-ds-04 rounded-surface px-ds-04 py-ds-03 transition-colors duration-fast-02'\nconst navItemActive =\n  \"bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-pill after:bg-accent-9 after:content-['']\"\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              >\n                <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n                <span className=\"text-ds-base\">{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                      >\n                        {child.icon && (\n                          <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0\" aria-hidden=\"true\">\n                            {child.icon}\n                          </span>\n                        )}\n                        <span>{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        >\n          <span className=\"[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0\" aria-hidden=\"true\">{item.icon}</span>\n          <span className=\"text-ds-base\">{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      ...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        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              <span className=\"truncate text-ds-md text-surface-fg\">\n                {user.name}\n              </span>\n              <span className=\"truncate text-ds-sm text-surface-fg-subtle\">\n                {user.designation || user.role}\n              </span>\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 border border-surface-border 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                      {footer.promo.icon}\n                    </span>\n                  )}\n                  <div className=\"flex min-w-0 flex-col gap-ds-03\">\n                    <p className=\"text-ds-sm text-surface-fg\">{footer.promo.text}</p>\n                    {footer.promo.action && (\n                      footer.promo.action.href ? (\n                        <Link\n                          href={footer.promo.action.href}\n                          onClick={footer.promo.action.onClick}\n                          className=\"inline-flex self-start rounded-control bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10\"\n                        >\n                          {footer.promo.action.label}\n                        </Link>\n                      ) : (\n                        <button\n                          onClick={footer.promo.action.onClick}\n                          className=\"inline-flex self-start rounded-control bg-accent-9 px-ds-04 py-ds-02 text-ds-sm font-medium text-accent-fg transition-colors hover:bg-accent-10\"\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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"}

package/dist/shell/top-bar.js

@@ -57,7 +57,7 @@ var O = m.forwardRef(({ icon: t, tooltip: n, className: r, ...i }, a) => /* @__P
 		ref: a,
 		type: "button",
 		"aria-label": n,
-		className: e("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full 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", r),
+		className: e("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", r),
 		...i,
 		children: /* @__PURE__ */ g("span", {
 			className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
@@ -105,7 +105,7 @@ var A = m.forwardRef(({ user: S, onNavigate: C, onLogout: w, userMenuItems: T, c
 		align: "center",
 		children: "User Menu"
 	})] }), /* @__PURE__ */ _(o, {
-		className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
+		className: "w-[200px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
 		sideOffset: 8,
 		align: "end",
 		children: [
@@ -154,9 +154,9 @@ var A = m.forwardRef(({ user: S, onNavigate: C, onLogout: w, userMenuItems: T, c
 							children: t.label
 						}),
 						t.badge != null && t.badge !== !1 && (typeof t.badge == "string" ? /* @__PURE__ */ g("span", {
-							className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg",
+							className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-pill bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg",
 							children: t.badge
-						}) : /* @__PURE__ */ g("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
+						}) : /* @__PURE__ */ g("span", { className: "ml-auto h-[8px] w-[8px] rounded-pill bg-error-9" }))
 					]
 				})] }, t.label + n);
 			}),

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

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