@devalok/shilp-sutra 0.42.1 → 0.44.0

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

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

package/dist/shell/sidebar.d.ts

@@ -101,6 +101,12 @@ export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
     renderItem?: (item: NavItem, defaultRender: () => React.ReactNode) => React.ReactNode | null;
     /** Additional className for the root sidebar element */
     className?: string;
+    /**
+     * Corner radius of nav items (composable). @default 'md' (control radius, ~6px).
+     * `'lg'` restores the previous rounder look; `'sm'` is tighter; `'pill'` is fully rounded.
+     * Sets the `--ds-sidebar-item-radius` CSS var, so you can also override it via `className`/`style`.
+     */
+    navItemRadius?: 'sm' | 'md' | 'lg' | 'pill';
 }
 declare const AppSidebar: React.ForwardRefExoticComponent<AppSidebarProps & React.RefAttributes<HTMLDivElement>>;
 export { AppSidebar };

package/dist/shell/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/shell/sidebar.js

@@ -3,15 +3,17 @@ import { IconProvider as e } from "../ui/icon-context.js";
 import { cn as t } from "../ui/lib/utils.js";
 import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
 import { t as a } from "../_chunks/normalize-icon.js";
-import { Collapsible as o, CollapsibleContent as s, CollapsibleTrigger as c } from "../ui/collapsible.js";
-import { n as l } from "../_chunks/link-context.js";
-import { Sidebar as u, SidebarContent as d, SidebarFooter as f, SidebarGroup as p, SidebarGroupAction as m, SidebarGroupContent as h, SidebarGroupLabel as g, SidebarHeader as _, SidebarMenu as v, SidebarMenuBadge as y, SidebarMenuButton as b, SidebarMenuItem as x, SidebarMenuSub as S, SidebarMenuSubButton as C, SidebarMenuSubItem as w, SidebarSeparator as T } from "../ui/sidebar.js";
+import { Button as o } from "../ui/button.js";
+import { Collapsible as s, CollapsibleContent as c, CollapsibleTrigger as l } from "../ui/collapsible.js";
+import { TruncatedText as u } from "../ui/truncated-text.js";
+import { n as d } from "../_chunks/link-context.js";
+import { Sidebar as f, SidebarContent as p, SidebarFooter as m, SidebarGroup as h, SidebarGroupAction as g, SidebarGroupContent as _, SidebarGroupLabel as v, SidebarHeader as y, SidebarMenu as b, SidebarMenuBadge as x, SidebarMenuButton as S, SidebarMenuItem as C, SidebarMenuSub as w, SidebarMenuSubButton as T, SidebarMenuSubItem as E, SidebarSeparator as D } from "../ui/sidebar.js";
 import "./link-context.js";
-import * as E from "react";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import * as O from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/shell/sidebar.tsx
-function A({ className: e }) {
-	return /* @__PURE__ */ O("svg", {
+function M({ className: e }) {
+	return /* @__PURE__ */ A("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "16",
 		height: "16",
@@ -22,11 +24,11 @@ function A({ className: e }) {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		className: e,
-		children: /* @__PURE__ */ O("path", { d: "m9 18 6-6-6-6" })
+		children: /* @__PURE__ */ A("path", { d: "m9 18 6-6-6-6" })
 	});
 }
-function j({ className: e }) {
-	return /* @__PURE__ */ k("svg", {
+function N({ className: e }) {
+	return /* @__PURE__ */ j("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "16",
 		height: "16",
@@ -37,224 +39,246 @@ function j({ className: e }) {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		className: e,
-		children: [/* @__PURE__ */ O("path", { d: "M18 6 6 18" }), /* @__PURE__ */ O("path", { d: "m6 6 12 12" })]
+		children: [/* @__PURE__ */ A("path", { d: "M18 6 6 18" }), /* @__PURE__ */ A("path", { d: "m6 6 12 12" })]
 	});
 }
-var M = "relative gap-ds-04 rounded-surface px-ds-04 py-ds-03 transition-colors duration-fast-02", 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-['']", P = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
-function F({ item: n, isActive: r, isPathActive: i }) {
-	let u = l(), d = n.badge == null ? null : typeof n.badge == "number" && n.badge > 99 ? "99+" : String(n.badge);
+var P = "relative gap-ds-04 rounded-[var(--ds-sidebar-item-radius,var(--radius-control))] px-ds-04 py-ds-03 transition-colors duration-fast-02", F = {
+	sm: "var(--radius-control-inner)",
+	md: "var(--radius-control)",
+	lg: "var(--radius-surface)",
+	pill: "var(--radius-pill)"
+}, I = "bg-accent-2 text-accent-11 font-medium", L = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
+function R({ item: n, isActive: r, isPathActive: i }) {
+	let o = d(), u = n.badge == null ? null : typeof n.badge == "number" && n.badge > 99 ? "99+" : String(n.badge);
 	if (n.children && n.children.length > 0) {
-		let l = n.children.some((e) => i(e.href, e.exact));
-		return /* @__PURE__ */ O(o, {
-			defaultOpen: l || r || (n.defaultOpen ?? !1),
+		let d = n.children.some((e) => i(e.href, e.exact));
+		return /* @__PURE__ */ A(s, {
+			defaultOpen: d || r || (n.defaultOpen ?? !1),
 			className: "group/collapsible",
-			children: /* @__PURE__ */ k(x, { children: [/* @__PURE__ */ k("div", {
+			children: /* @__PURE__ */ j(C, { children: [/* @__PURE__ */ j("div", {
 				className: "relative",
 				children: [
-					/* @__PURE__ */ O(b, {
+					/* @__PURE__ */ A(S, {
 						asChild: !0,
-						isActive: r || l,
+						isActive: r || d,
 						tooltip: n.title,
-						className: t(M, r || l ? N : P),
-						children: /* @__PURE__ */ k(u, {
+						className: t(P, r || d ? I : L),
+						children: /* @__PURE__ */ j(o, {
 							href: n.href,
 							"aria-label": n.title,
 							"aria-current": r ? "page" : void 0,
-							children: [/* @__PURE__ */ O("span", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ A("span", {
 								className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0",
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ O(e, {
+								children: /* @__PURE__ */ A(e, {
 									size: "md",
 									children: a(n.icon)
 								})
-							}), /* @__PURE__ */ O("span", {
-								className: "text-ds-base",
+							}), /* @__PURE__ */ A("span", {
+								className: "text-ds-base truncate",
 								children: n.title
 							})]
 						})
 					}),
-					d && /* @__PURE__ */ O(y, { children: d }),
-					/* @__PURE__ */ O(c, {
+					u && /* @__PURE__ */ A(x, { children: u }),
+					/* @__PURE__ */ A(l, {
 						asChild: !0,
-						children: /* @__PURE__ */ O("button", {
+						children: /* @__PURE__ */ A("button", {
 							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 ${n.title}`,
-							children: /* @__PURE__ */ O(A, { className: "h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90" })
+							children: /* @__PURE__ */ A(M, { className: "h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90" })
 						})
 					})
 				]
-			}), /* @__PURE__ */ O(s, { children: /* @__PURE__ */ O(S, { children: n.children.map((t) => {
+			}), /* @__PURE__ */ A(c, { children: /* @__PURE__ */ A(w, { children: n.children.map((t) => {
 				let n = i(t.href, t.exact);
-				return /* @__PURE__ */ O(w, { children: /* @__PURE__ */ O(C, {
+				return /* @__PURE__ */ A(E, { children: /* @__PURE__ */ A(T, {
 					asChild: !0,
 					isActive: n,
-					children: /* @__PURE__ */ k(u, {
+					children: /* @__PURE__ */ j(o, {
 						href: t.href,
 						"aria-current": n ? "page" : void 0,
-						children: [t.icon && /* @__PURE__ */ O("span", {
+						className: "min-w-0",
+						children: [t.icon && /* @__PURE__ */ A("span", {
 							className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0",
 							"aria-hidden": "true",
-							children: /* @__PURE__ */ O(e, {
+							children: /* @__PURE__ */ A(e, {
 								size: "sm",
 								children: a(t.icon)
 							})
-						}), /* @__PURE__ */ O("span", { children: t.title })]
+						}), /* @__PURE__ */ A("span", {
+							className: "truncate",
+							children: t.title
+						})]
 					})
 				}) }, t.href);
 			}) }) })] })
 		});
 	}
-	return /* @__PURE__ */ k(x, { children: [/* @__PURE__ */ O(b, {
+	return /* @__PURE__ */ j(C, { children: [/* @__PURE__ */ A(S, {
 		asChild: !0,
 		isActive: r,
 		tooltip: n.title,
-		className: t(M, r ? N : P),
-		children: /* @__PURE__ */ k(u, {
+		className: t(P, r ? I : L),
+		children: /* @__PURE__ */ j(o, {
 			href: n.href,
 			"aria-label": n.title,
 			"aria-current": r ? "page" : void 0,
-			children: [/* @__PURE__ */ O("span", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ A("span", {
 				className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ O(e, {
+				children: /* @__PURE__ */ A(e, {
 					size: "md",
 					children: a(n.icon)
 				})
-			}), /* @__PURE__ */ O("span", {
-				className: "text-ds-base",
+			}), /* @__PURE__ */ A("span", {
+				className: "text-ds-base truncate",
 				children: n.title
 			})]
 		})
-	}), d && /* @__PURE__ */ O(y, { children: d })] });
+	}), u && /* @__PURE__ */ A(x, { children: u })] });
 }
-var I = E.forwardRef(({ currentPath: o = "/", user: s, navGroups: c = [], logo: y, headerSlot: b, preFooterSlot: x, preFooterClassName: S, footerLinks: C = [], footer: w, renderItem: A, className: M, ...N }, P) => {
-	let I = l(), L = (e, t = !1) => t || e === "/" ? o === e : o.startsWith(e);
-	return /* @__PURE__ */ k(u, {
-		...N,
-		ref: P,
+var z = O.forwardRef(({ currentPath: s = "/", user: c, navGroups: l = [], logo: x, headerSlot: S, preFooterSlot: C, preFooterClassName: w, footerLinks: T = [], footer: E, renderItem: M, className: P, navItemRadius: I, style: L, ...z }, B) => {
+	let V = d(), H = (e, t = !1) => t || e === "/" ? s === e : s.startsWith(e);
+	return /* @__PURE__ */ j(f, {
+		...z,
+		ref: B,
 		"aria-label": "Main navigation",
-		className: t("z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-raised md:flex", M),
+		style: I ? {
+			"--ds-sidebar-item-radius": F[I],
+			...L
+		} : L,
+		className: t("z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-raised md:flex", P),
 		children: [
-			/* @__PURE__ */ O(_, {
+			/* @__PURE__ */ A(y, {
 				className: "px-ds-06 py-ds-06",
-				children: y ?? /* @__PURE__ */ O("span", {
+				children: x ?? /* @__PURE__ */ A("span", {
 					className: "text-ds-lg font-semibold text-surface-fg",
 					children: "Logo"
 				})
 			}),
-			s && /* @__PURE__ */ k("div", {
+			c && /* @__PURE__ */ j("div", {
 				className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05",
-				children: [/* @__PURE__ */ k(n, {
+				children: [/* @__PURE__ */ j(n, {
 					className: "h-ds-sm-plus w-ds-sm-plus",
-					children: [s.image ? /* @__PURE__ */ O(i, {
-						src: s.image,
-						alt: s.name
-					}) : null, /* @__PURE__ */ O(r, {
+					children: [c.image ? /* @__PURE__ */ A(i, {
+						src: c.image,
+						alt: c.name
+					}) : null, /* @__PURE__ */ A(r, {
 						className: "bg-surface-raised-hover text-surface-fg",
-						children: s.name?.charAt(0).toUpperCase()
+						children: c.name?.charAt(0).toUpperCase()
 					})]
-				}), /* @__PURE__ */ k("div", {
+				}), /* @__PURE__ */ j("div", {
 					className: "flex min-w-0 flex-col",
-					children: [/* @__PURE__ */ O("span", {
-						className: "truncate text-ds-md text-surface-fg",
-						children: s.name
-					}), /* @__PURE__ */ O("span", {
-						className: "truncate text-ds-sm text-surface-fg-subtle",
-						children: s.designation || s.role
+					children: [/* @__PURE__ */ A(u, {
+						className: "text-ds-md text-surface-fg",
+						children: c.name ?? ""
+					}), /* @__PURE__ */ A(u, {
+						className: "text-ds-sm text-surface-fg-subtle",
+						children: c.designation || c.role || ""
 					})]
 				})]
 			}),
-			/* @__PURE__ */ O(T, {}),
-			b && /* @__PURE__ */ k(D, { children: [b, /* @__PURE__ */ O(T, {})] }),
-			/* @__PURE__ */ O(d, {
+			/* @__PURE__ */ A(D, {}),
+			S && /* @__PURE__ */ j(k, { children: [S, /* @__PURE__ */ A(D, {})] }),
+			/* @__PURE__ */ A(p, {
 				className: "no-scrollbar px-ds-04",
-				children: c.map((e, t) => /* @__PURE__ */ k("div", { children: [t > 0 && /* @__PURE__ */ O(T, {}), /* @__PURE__ */ k(p, { children: [
-					/* @__PURE__ */ O(g, {
+				children: l.map((e, t) => /* @__PURE__ */ j("div", { children: [t > 0 && /* @__PURE__ */ A(D, {}), /* @__PURE__ */ j(h, { children: [
+					/* @__PURE__ */ A(v, {
 						className: "px-ds-04 text-ds-sm text-surface-fg-subtle",
 						children: e.label
 					}),
-					e.action && /* @__PURE__ */ O(m, {
+					e.action && /* @__PURE__ */ A(g, {
 						asChild: !0,
 						children: e.action
 					}),
-					/* @__PURE__ */ O(h, { children: /* @__PURE__ */ O(v, { children: e.items.map((e) => {
-						let t = () => /* @__PURE__ */ O(F, {
+					/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A(b, { children: e.items.map((e) => {
+						let t = () => /* @__PURE__ */ A(R, {
 							item: e,
-							isActive: L(e.href, e.exact),
-							isPathActive: L
+							isActive: H(e.href, e.exact),
+							isPathActive: H
 						});
-						if (A) {
-							let n = A(e, t);
-							if (n !== null) return /* @__PURE__ */ O(E.Fragment, { children: n }, e.href);
+						if (M) {
+							let n = M(e, t);
+							if (n !== null) return /* @__PURE__ */ A(O.Fragment, { children: n }, e.href);
 						}
-						return /* @__PURE__ */ O(E.Fragment, { children: t() }, e.href);
+						return /* @__PURE__ */ A(O.Fragment, { children: t() }, e.href);
 					}) }) })
 				] })] }, e.label))
 			}),
-			x && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(T, {}), /* @__PURE__ */ O("div", {
-				className: S,
-				children: x
+			C && /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(D, {}), /* @__PURE__ */ A("div", {
+				className: w,
+				children: C
 			})] }),
-			w ? /* @__PURE__ */ k(f, {
+			E ? /* @__PURE__ */ j(m, {
 				className: "gap-ds-03 px-ds-06 py-ds-05",
 				children: [
-					w.slot && /* @__PURE__ */ O("div", { children: w.slot }),
-					w.promo && /* @__PURE__ */ k("div", {
-						className: "relative rounded-surface border border-surface-border bg-surface-raised p-ds-04 shadow-raised",
-						children: [w.promo.onDismiss && /* @__PURE__ */ O("button", {
-							onClick: w.promo.onDismiss,
+					E.slot && /* @__PURE__ */ A("div", { children: E.slot }),
+					E.promo && /* @__PURE__ */ j("div", {
+						className: "relative rounded-surface bg-surface-raised p-ds-04 shadow-raised",
+						children: [E.promo.onDismiss && /* @__PURE__ */ A("button", {
+							onClick: E.promo.onDismiss,
 							"aria-label": "Dismiss",
 							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__ */ O(j, { className: "h-3.5 w-3.5" })
-						}), /* @__PURE__ */ k("div", {
+							children: /* @__PURE__ */ A(N, { className: "h-3.5 w-3.5" })
+						}), /* @__PURE__ */ j("div", {
 							className: "flex flex-col gap-ds-03",
-							children: [w.promo.icon && /* @__PURE__ */ O("span", {
+							children: [E.promo.icon && /* @__PURE__ */ A("span", {
 								className: "text-accent-11 [&>svg]:h-ico-md [&>svg]:w-ico-md",
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ O(e, {
+								children: /* @__PURE__ */ A(e, {
 									size: "md",
-									children: a(w.promo.icon)
+									children: a(E.promo.icon)
 								})
-							}), /* @__PURE__ */ k("div", {
+							}), /* @__PURE__ */ j("div", {
 								className: "flex min-w-0 flex-col gap-ds-03",
-								children: [/* @__PURE__ */ O("p", {
-									className: "text-ds-sm text-surface-fg",
-									children: w.promo.text
-								}), w.promo.action && (w.promo.action.href ? /* @__PURE__ */ O(I, {
-									href: w.promo.action.href,
-									onClick: w.promo.action.onClick,
-									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: w.promo.action.label
-								}) : /* @__PURE__ */ O("button", {
-									onClick: w.promo.action.onClick,
-									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: w.promo.action.label
+								children: [/* @__PURE__ */ A("p", {
+									className: "text-ds-sm text-surface-fg line-clamp-2",
+									children: E.promo.text
+								}), E.promo.action && (E.promo.action.href ? /* @__PURE__ */ A(o, {
+									asChild: !0,
+									variant: "solid",
+									size: "sm",
+									className: "self-start",
+									children: /* @__PURE__ */ A(V, {
+										href: E.promo.action.href,
+										onClick: E.promo.action.onClick,
+										children: E.promo.action.label
+									})
+								}) : /* @__PURE__ */ A(o, {
+									variant: "solid",
+									size: "sm",
+									className: "self-start",
+									onClick: E.promo.action.onClick,
+									children: E.promo.action.label
 								}))]
 							})]
 						})]
 					}),
-					(w.links?.length || w.version) && /* @__PURE__ */ k("div", {
+					(E.links?.length || E.version) && /* @__PURE__ */ j("div", {
 						className: "flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle",
 						children: [
-							w.links?.map((e, t) => /* @__PURE__ */ k(E.Fragment, { children: [t > 0 && /* @__PURE__ */ O("span", { children: "·" }), /* @__PURE__ */ O(I, {
+							E.links?.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
 								className: "transition-colors hover:text-accent-11",
 								href: e.href,
 								children: e.label
 							})] }, e.href)),
-							w.links?.length && w.version && /* @__PURE__ */ O("span", { children: "·" }),
-							w.version && (typeof w.version == "string" ? /* @__PURE__ */ O("span", { children: w.version }) : /* @__PURE__ */ O(I, {
+							E.links?.length && E.version && /* @__PURE__ */ A("span", { children: "·" }),
+							E.version && (typeof E.version == "string" ? /* @__PURE__ */ A("span", { children: E.version }) : /* @__PURE__ */ A(V, {
 								className: "transition-colors hover:text-accent-11",
-								href: w.version.href,
-								children: w.version.label
+								href: E.version.href,
+								children: E.version.label
 							}))
 						]
 					})
 				]
-			}) : C.length > 0 ? /* @__PURE__ */ O(f, {
+			}) : T.length > 0 ? /* @__PURE__ */ A(m, {
 				className: "px-ds-06 py-ds-05",
-				children: /* @__PURE__ */ O("div", {
+				children: /* @__PURE__ */ A("div", {
 					className: "flex items-center gap-ds-03 text-ds-sm text-surface-fg-subtle",
-					children: C.map((e, t) => /* @__PURE__ */ k(E.Fragment, { children: [t > 0 && /* @__PURE__ */ O("span", { children: "·" }), /* @__PURE__ */ O(I, {
+					children: T.map((e, t) => /* @__PURE__ */ j(O.Fragment, { children: [t > 0 && /* @__PURE__ */ A("span", { children: "·" }), /* @__PURE__ */ A(V, {
 						className: "transition-colors hover:text-accent-11",
 						href: e.href,
 						children: e.label
@@ -264,6 +288,6 @@ var I = E.forwardRef(({ currentPath: o = "/", user: s, navGroups: c = [], logo:
 		]
 	});
 });
-I.displayName = "AppSidebar";
+z.displayName = "AppSidebar";
 //#endregion
-export { I as AppSidebar };
+export { z as AppSidebar };