@devalok/shilp-sutra 0.57.0 → 0.59.0

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

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

package/dist/shell/top-bar.js

@@ -60,7 +60,7 @@ var j = _.forwardRef(({ icon: n, tooltip: r, className: i, ...a }, s) => /* @__P
 		ref: s,
 		type: "button",
 		"aria-label": r,
-		className: t("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-card-strong bg-surface-panel-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-panel-active active:scale-90 duration-fast-01 ease-productive-standard", i),
+		className: t("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-surface-border-interactive bg-surface-panel-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-panel-active active:scale-90 duration-fast-01 ease-productive-standard", i),
 		...a,
 		children: /* @__PURE__ */ y("span", {
 			className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",

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

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

package/dist/tokens/index.css

@@ -18,6 +18,7 @@
  */
 @import './primitives.css';
 @import './semantic.css';
+@import './palettes.css';
 @import './typography.css';
 @import './typography-semantic.css';
 @import './base.css';

package/dist/tokens/palettes.css

@@ -0,0 +1,292 @@
+/* ═══════════════════════════════════════════════════════════════════
+   PALETTE — one indirection so a component references *a* colour role
+   rather than *a* colour.
+
+   A component styles itself once:
+
+     bg-palette-solid  text-palette-fg  hover:bg-palette-solid-hover
+
+   and the palette is chosen by an ancestor or by the element itself:
+
+     <button data-palette="error" class="bg-palette-solid …">
+
+   This replaces the variants × colours cross-product. Adding a colour is
+   one block here, not N rows in every component. See
+   docs/plans/2026-08-27-colour-palette-indirection.md.
+
+   WHY NAMED ROLES AND NOT palette-1..12
+   -------------------------------------
+   `neutral` does not follow the chromatic mapping: its solid is step 5
+   (step 9 is a mid grey that reads as disabled), its on-solid text is
+   `surface-fg`, and half its roles resolve from the *surface* family
+   rather than a ramp. Under numeric naming it would have to claim
+   `--color-palette-9: var(--color-neutral-5)`, which is a lie in the
+   token name. Roles let each palette resolve from wherever is correct.
+
+   THEME
+   -----
+   Nothing here is duplicated per theme. Every source token — the
+   `--color-*` semantics and the private primitives alike — is already
+   redefined under `.dark`, so a palette inherits dark mode for free.
+
+   CASCADE
+   -------
+   `[data-palette]` inherits, so a palette set on a container themes
+   everything inside it. An explicit `data-palette` on a descendant wins,
+   because it is the nearer rule. Radix Themes and Chakra both behave this
+   way. Unlayered rules beat `@layer theme`, so these always override the
+   defaults below regardless of import order.
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* The contract. Eleven roles. Defaults are `accent`, matching the current
+   default of every component that has a `color` prop.
+
+   `solid-active` and `text` resolve to the same step on every chromatic
+   palette, which looks redundant until you reach `neutral`, where one is
+   `neutral-8` and the other is `surface-fg-muted`. Two roles, one value, is
+   exactly what a role contract is for. */
+@theme {
+  --color-palette-subtle:        var(--color-accent-2);   /* faintest tinted ground */
+  --color-palette-soft:          var(--color-accent-3);   /* soft fill */
+  --color-palette-soft-hover:    var(--color-accent-4);   /* soft fill, hovered */
+  --color-palette-soft-active:   var(--color-accent-5);   /* soft fill, pressed */
+  --color-palette-border-subtle: var(--color-accent-6);   /* divider inside a coloured thing */
+  /* The object's edge. Step 4, not 7 — a deliberate call to keep coloured
+     edges a whisper. Measured 1.37–1.49:1 against white, where the plain
+     uncoloured edge we already ship is 1.23:1, so the colour barely reads.
+     Recorded as PALETTE-EDGE-WHISPER in docs/deviations.md. */
+  --color-palette-border:        var(--color-accent-4);        --color-palette-border-strong: var(--color-accent-7);
+  --color-palette-solid:         var(--color-accent-9);   /* filled control */
+  --color-palette-solid-hover:   var(--color-accent-10);  /* filled control, hovered */
+  --color-palette-solid-active:  var(--color-accent-11);  /* filled control, pressed */
+  --color-palette-text:          var(--color-accent-11);  /* coloured text on a light ground */
+  --color-palette-fg:            var(--color-accent-fg);  /* text ON the solid fill */
+}
+
+/* Derived on-solid text, for palettes we do not ship.
+
+   Declared BEFORE the built-ins deliberately: every block below has the
+   same specificity (0,1,0), so source order decides and each built-in
+   overwrites this with its measured value. Only a consumer-registered
+   palette that omits `--color-palette-fg` keeps it.
+
+   Black or white by the solid's lightness. Readable, but blunt on
+   mid-tone brand colours — supply the value explicitly and you get
+   exactly what you chose. `contrast-color()` would be the purpose-built
+   answer; it is Safari 26+ only, so not yet. */
+@supports (color: oklch(from white l c h)) {
+  [data-palette] {
+    --color-palette-fg: oklch(from var(--color-palette-solid)
+                              clamp(0, (0.62 - l) * 1000, 1) 0 0);
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   Brand-following palettes — resolve from the SEMANTIC layer, so a
+   consumer who overrides `--color-accent-*` to rebrand gets it here too.
+   ─────────────────────────────────────────────────────────────────── */
+
+[data-palette='accent'] {
+  --color-palette-subtle:        var(--color-accent-2);
+  --color-palette-soft:          var(--color-accent-3);
+  --color-palette-soft-hover:    var(--color-accent-4);
+  --color-palette-soft-active:   var(--color-accent-5);
+  --color-palette-border-subtle: var(--color-accent-6);
+  --color-palette-border:        var(--color-accent-4);        --color-palette-border-strong: var(--color-accent-7);
+  --color-palette-solid:         var(--color-accent-9);
+  --color-palette-solid-hover:   var(--color-accent-10);
+  --color-palette-solid-active:  var(--color-accent-11);
+  --color-palette-text:          var(--color-accent-11);
+  --color-palette-fg:            var(--color-accent-fg);
+}
+
+[data-palette='secondary'] {
+  --color-palette-subtle:        var(--color-secondary-2);
+  --color-palette-soft:          var(--color-secondary-3);
+  --color-palette-soft-hover:    var(--color-secondary-4);
+  --color-palette-soft-active:   var(--color-secondary-5);
+  --color-palette-border-subtle: var(--color-secondary-6);
+  --color-palette-border:        var(--color-secondary-4);        --color-palette-border-strong: var(--color-secondary-7);
+  --color-palette-solid:         var(--color-secondary-9);
+  --color-palette-solid-hover:   var(--color-secondary-10);
+  --color-palette-solid-active:  var(--color-secondary-11);
+  --color-palette-text:          var(--color-secondary-11);
+  --color-palette-fg:            var(--color-secondary-fg);
+}
+
+[data-palette='error'] {
+  --color-palette-subtle:        var(--color-error-2);
+  --color-palette-soft:          var(--color-error-3);
+  --color-palette-soft-hover:    var(--color-error-4);
+  --color-palette-soft-active:   var(--color-error-5);
+  --color-palette-border-subtle: var(--color-error-6);
+  --color-palette-border:        var(--color-error-4);        --color-palette-border-strong: var(--color-error-7);
+  --color-palette-solid:         var(--color-error-9);
+  --color-palette-solid-hover:   var(--color-error-10);
+  --color-palette-solid-active:  var(--color-error-11);
+  --color-palette-text:          var(--color-error-11);
+  --color-palette-fg:            var(--color-error-fg);
+}
+
+[data-palette='success'] {
+  --color-palette-subtle:        var(--color-success-2);
+  --color-palette-soft:          var(--color-success-3);
+  --color-palette-soft-hover:    var(--color-success-4);
+  --color-palette-soft-active:   var(--color-success-5);
+  --color-palette-border-subtle: var(--color-success-6);
+  --color-palette-border:        var(--color-success-4);        --color-palette-border-strong: var(--color-success-7);
+  --color-palette-solid:         var(--color-success-9);
+  --color-palette-solid-hover:   var(--color-success-10);
+  --color-palette-solid-active:  var(--color-success-11);
+  --color-palette-text:          var(--color-success-11);
+  --color-palette-fg:            var(--color-success-fg);
+}
+
+[data-palette='warning'] {
+  --color-palette-subtle:        var(--color-warning-2);
+  --color-palette-soft:          var(--color-warning-3);
+  --color-palette-soft-hover:    var(--color-warning-4);
+  --color-palette-soft-active:   var(--color-warning-5);
+  --color-palette-border-subtle: var(--color-warning-6);
+  --color-palette-border:        var(--color-warning-4);        --color-palette-border-strong: var(--color-warning-7);
+  --color-palette-solid:         var(--color-warning-9);
+  --color-palette-solid-hover:   var(--color-warning-10);
+  --color-palette-solid-active:  var(--color-warning-11);
+  --color-palette-text:          var(--color-warning-11);
+  --color-palette-fg:            var(--color-warning-fg);
+}
+
+[data-palette='info'] {
+  --color-palette-subtle:        var(--color-info-2);
+  --color-palette-soft:          var(--color-info-3);
+  --color-palette-soft-hover:    var(--color-info-4);
+  --color-palette-soft-active:   var(--color-info-5);
+  --color-palette-border-subtle: var(--color-info-6);
+  --color-palette-border:        var(--color-info-4);        --color-palette-border-strong: var(--color-info-7);
+  --color-palette-solid:         var(--color-info-9);
+  --color-palette-solid-hover:   var(--color-info-10);
+  --color-palette-solid-active:  var(--color-info-11);
+  --color-palette-text:          var(--color-info-11);
+  --color-palette-fg:            var(--color-info-fg);
+}
+
+/* `neutral` is the reason this file uses roles rather than step numbers.
+   Its solid is step 5 — step 9 is a mid grey that reads as a disabled
+   control, not a filled one — and more than half its roles resolve from
+   the SURFACE family, which is a different token tree entirely. This
+   mirrors what `Component/Intent` already does in the Figma library. */
+[data-palette='neutral'] {
+  --color-palette-subtle:        var(--color-surface-panel-hover);
+  --color-palette-soft:          var(--color-surface-panel-hover);
+  --color-palette-soft-hover:    var(--color-surface-panel-active);
+  --color-palette-soft-active:   var(--color-neutral-5);
+  --color-palette-border-subtle: var(--color-surface-border-subtle);
+  --color-palette-border:        var(--color-surface-border);
+  --color-palette-border-strong: var(--color-surface-border-strong);
+  --color-palette-solid:         var(--color-neutral-5);
+  --color-palette-solid-hover:   var(--color-neutral-7);
+  --color-palette-solid-active:  var(--color-neutral-8);
+  --color-palette-text:          var(--color-surface-fg-muted);
+  --color-palette-fg:            var(--color-surface-fg);
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   Category palettes — a fixed, non-rebrandable set for labelling things
+   that are different rather than better or worse (teams, tags, projects).
+
+   These resolve from the PRIVATE PRIMITIVES rather than the semantic
+   layer, because the semantic layer exposes only six steps for them
+   (2, 3, 4, 7, 9, 11) while the roles need ten. Exposing the missing
+   four semantically would add 84 declarations and generate a utility
+   surface (`bg-category-teal-5`, …) nobody asked for. The primitives are
+   already complete and already theme-aware.
+
+   On-solid text uses `--color-category-fg`, which inverts with the theme
+   — category step 9 lightens in dark, the opposite of the intent ramps.
+   That token exists because a hardcoded white failed AA in dark; see the
+   0.57.0 changelog.
+   ─────────────────────────────────────────────────────────────────── */
+
+[data-palette='teal'] {
+  --color-palette-subtle: var(--teal-2);       --color-palette-soft: var(--teal-3);
+  --color-palette-soft-hover: var(--teal-4);   --color-palette-soft-active: var(--teal-5);
+  --color-palette-border-subtle: var(--teal-6);--color-palette-border: var(--teal-4); --color-palette-border-strong: var(--teal-7);
+  --color-palette-solid: var(--teal-9);        --color-palette-solid-hover: var(--teal-10);
+  --color-palette-solid-active: var(--teal-11);
+  --color-palette-text: var(--teal-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='amber'] {
+  --color-palette-subtle: var(--amber-2);       --color-palette-soft: var(--amber-3);
+  --color-palette-soft-hover: var(--amber-4);   --color-palette-soft-active: var(--amber-5);
+  --color-palette-border-subtle: var(--amber-6);--color-palette-border: var(--amber-4); --color-palette-border-strong: var(--amber-7);
+  --color-palette-solid: var(--amber-9);        --color-palette-solid-hover: var(--amber-10);
+  --color-palette-solid-active: var(--amber-11);
+  --color-palette-text: var(--amber-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='slate'] {
+  --color-palette-subtle: var(--slate-2);       --color-palette-soft: var(--slate-3);
+  --color-palette-soft-hover: var(--slate-4);   --color-palette-soft-active: var(--slate-5);
+  --color-palette-border-subtle: var(--slate-6);--color-palette-border: var(--slate-4); --color-palette-border-strong: var(--slate-7);
+  --color-palette-solid: var(--slate-9);        --color-palette-solid-hover: var(--slate-10);
+  --color-palette-solid-active: var(--slate-11);
+  --color-palette-text: var(--slate-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='indigo'] {
+  --color-palette-subtle: var(--indigo-2);       --color-palette-soft: var(--indigo-3);
+  --color-palette-soft-hover: var(--indigo-4);   --color-palette-soft-active: var(--indigo-5);
+  --color-palette-border-subtle: var(--indigo-6);--color-palette-border: var(--indigo-4); --color-palette-border-strong: var(--indigo-7);
+  --color-palette-solid: var(--indigo-9);        --color-palette-solid-hover: var(--indigo-10);
+  --color-palette-solid-active: var(--indigo-11);
+  --color-palette-text: var(--indigo-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='cyan'] {
+  --color-palette-subtle: var(--cyan-2);       --color-palette-soft: var(--cyan-3);
+  --color-palette-soft-hover: var(--cyan-4);   --color-palette-soft-active: var(--cyan-5);
+  --color-palette-border-subtle: var(--cyan-6);--color-palette-border: var(--cyan-4); --color-palette-border-strong: var(--cyan-7);
+  --color-palette-solid: var(--cyan-9);        --color-palette-solid-hover: var(--cyan-10);
+  --color-palette-solid-active: var(--cyan-11);
+  --color-palette-text: var(--cyan-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='orange'] {
+  --color-palette-subtle: var(--orange-2);       --color-palette-soft: var(--orange-3);
+  --color-palette-soft-hover: var(--orange-4);   --color-palette-soft-active: var(--orange-5);
+  --color-palette-border-subtle: var(--orange-6);--color-palette-border: var(--orange-4); --color-palette-border-strong: var(--orange-7);
+  --color-palette-solid: var(--orange-9);        --color-palette-solid-hover: var(--orange-10);
+  --color-palette-solid-active: var(--orange-11);
+  --color-palette-text: var(--orange-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+[data-palette='emerald'] {
+  --color-palette-subtle: var(--emerald-2);       --color-palette-soft: var(--emerald-3);
+  --color-palette-soft-hover: var(--emerald-4);   --color-palette-soft-active: var(--emerald-5);
+  --color-palette-border-subtle: var(--emerald-6);--color-palette-border: var(--emerald-4); --color-palette-border-strong: var(--emerald-7);
+  --color-palette-solid: var(--emerald-9);        --color-palette-solid-hover: var(--emerald-10);
+  --color-palette-solid-active: var(--emerald-11);
+  --color-palette-text: var(--emerald-11);        --color-palette-fg: var(--color-category-fg);
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   Registering your own palette
+
+     [data-palette='brand-purple'] {
+       --color-palette-solid:       #6d28d9;
+       --color-palette-solid-hover: #5b21b6;
+       --color-palette-fg:          #ffffff;   ← supply this
+       …
+     }
+
+   Supply `--color-palette-fg` explicitly. If you omit it, the derivation
+   near the top of this file gives you black-or-white from the solid's
+   lightness — readable, but blunt on a mid-tone brand colour, and outside
+   the contrast guarantee we measure for the built-in palettes.
+
+   That derivation is declared once, before the built-in blocks, so every
+   built-in overwrites it and only an unrecognised palette keeps it. See
+   the note there for why source order rather than specificity does the
+   work.
+   ─────────────────────────────────────────────────────────────────── */

package/dist/tokens/semantic.css

@@ -486,6 +486,10 @@
   --shadow-warning: 0 2px 8px oklch(0.78 0.16 65 / 0.22),  0 6px 20px oklch(0.78 0.16 65 / 0.15);
 
   /* Keyboard shortcut badge shadow */
+  /* A key cap's bottom bevel. Black works on a light cap; on a dark one it is
+     invisible (1.02:1), so the cap loses the only thing making it look pressable.
+     `.dark` flips it to a top highlight, which is how a raised surface catches
+     light from above in a dark UI. See the .dark block below. */
   --shadow-kbd: inset 0 -1px 0 oklch(0 0 0 / 0.1);
 
   /* ───────────────────────────────────────────────────────────
@@ -540,21 +544,31 @@
   --shadow-strength: 1;
   --shadow-transition: box-shadow var(--duration-fast-02) var(--ease-productive-standard);
 
+  /* Hairline edge ring — the shadow's own 1px border-substitute (make-kit rule #6:
+     shadow already carries the ring, so components never add an explicit border).
+     Light: cool tint. Dark: a light ring, since drop shadows barely read on dark.
+
+     Declared BEFORE the internals below because all four consume it. It used to
+     sit between sm and md, and only md/lg referenced it — xs and sm hardcoded
+     their own near-black ring and so never received the dark-mode correction.
+     That left `shadow-raised` / `-raised-hover` at 1.00–1.03:1 in dark, i.e. no
+     edge, for every component using them as its only boundary. */
+  --shadow-edge-ring: 0 0 0 1px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)));
+  /* xs/sm take the ring at a lighter weight than md/lg — a raised card should
+     not read as strongly as a floating overlay. `--shadow-edge-ring-subtle`
+     mirrors `--shadow-edge-ring` and is likewise dark-corrected below. */
+  --shadow-edge-ring-subtle: 0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength)));
   --shadow-xs-internal:
-    0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    var(--shadow-edge-ring-subtle),
     0 0.5px 1px -0.5px oklch(var(--shadow-color) / calc(0.045 * var(--shadow-strength))),
     0 1.5px 3px -1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
     0 3px 7px -2px oklch(var(--shadow-color) / calc(0.03 * var(--shadow-strength)));
   --shadow-sm-internal:
-    0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    var(--shadow-edge-ring-subtle),
     0 0.5px 1px -0.5px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
     0 2px 4px -1.5px oklch(var(--shadow-color) / calc(0.045 * var(--shadow-strength))),
     0 6px 12px -3px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
     0 14px 28px -8px oklch(var(--shadow-color) / calc(0.025 * var(--shadow-strength)));
-  /* Hairline edge ring — the shadow's own 1px border-substitute (make-kit rule #6:
-     shadow already carries the ring, so components never add an explicit border).
-     Light: cool tint. Dark: a light ring, since drop shadows barely read on dark. */
-  --shadow-edge-ring: 0 0 0 1px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)));
   --shadow-md-internal:
     var(--shadow-edge-ring),
     0 1px 2px -1px oklch(var(--shadow-color) / calc(0.05 * var(--shadow-strength))),
@@ -668,9 +682,14 @@
   --color-backdrop:              oklch(0 0 0 / 0.6);
 
   /* Segmented control — inverted elevation in dark: track is a faint LIGHTER
-     fill (can't go darker than a near-black page), thumb steps lighter still. */
+     fill (can't go darker than a near-black page), thumb steps lighter still.
+     The model is right; the value was one step short. neutral-3 (#262626) is
+     DARKER than the track composited over a panel (#282828), so the selected
+     segment read as a dent — 1.028:1, inverted. neutral-5 clears the track on
+     both grounds a segmented control actually sits on: 1.46:1 over a panel,
+     1.69:1 over the page. */
   --color-segment-track: color-mix(in oklch, oklch(1 0 0) 7%, transparent);
-  --color-segment-thumb: var(--neutral-3);
+  --color-segment-thumb: var(--neutral-5);
 
   /* Overlay */
   --color-overlay: oklch(0 0 0 / 0.70);
@@ -691,6 +710,18 @@
   --shadow-strength: 2.5;
   /* Light ring on dark — a dark-tinted ring would vanish against dark surfaces. */
   --shadow-edge-ring: 0 0 0 1px oklch(1 0 0 / 0.12);
+  /* Same correction for the raised tier. Without this, `shadow-raised` /
+     `-raised-hover` keep a near-black ring that measures ~1.00:1 on a dark
+     ground, so anything using them as its only edge has none. 0.07 keeps a
+     raised card quieter than a floating overlay while still reading. */
+  --shadow-edge-ring-subtle: 0 0 0 1px oklch(1 0 0 / 0.07);
+  --shadow-kbd: inset 0 1px 0 oklch(1 0 0 / 0.10);
+  /* The segmented thumb is documented as deliberately ring-less, the shadow
+     being its whole edge. That works in light and cannot work in dark, where
+     the shadow is near-black on a near-black ground — so the fallback failed in
+     the same theme as the fill it was meant to rescue. In dark it takes a ring
+     like everything else. */
+  --shadow-segment: 0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 2px -0.5px oklch(0 0 0 / 0.40), 0 3px 8px -2px oklch(0 0 0 / 0.30);
   --shadow-brand:    0 2px 8px color-mix(in oklch, var(--color-accent-9) 30%, transparent), 0 6px 20px color-mix(in oklch, var(--color-accent-9) 20%, transparent);
   --shadow-glow:     0 0 0 1.5px color-mix(in oklch, var(--color-accent-9) 35%, transparent), 0 0 10px color-mix(in oklch, var(--color-accent-9) 20%, transparent);
   --shadow-ring:     0 0 0 2px color-mix(in oklch, var(--color-accent-9) 45%, transparent);
@@ -722,6 +753,39 @@
   --color-text-shadow:           oklch(0 0 0 / 0.40);
 }
 
+/* ═══════════════════════════════════════════════════════════════════
+   HIGH CONTRAST — opt-in, via `data-contrast="high"` on any ancestor
+
+   WCAG 2.2 SC 1.4.11 asks for 3:1 between a control's edge and its
+   background. Our default control edge is 2.00:1 in light and 2.08:1 in
+   dark — deliberately softer, and deliberately under the bar. That gap is
+   recorded in docs/deviations.md as PALETTE-CONTROL-EDGE-BELOW-AA.
+
+   This block is the opt-out from that decision. Set the attribute on
+   <html> (or any wrapper) and every control edge in the subtree moves to
+   3.64:1 light / 3.93:1 dark.
+
+       <html data-contrast="high">          <!-- whole app -->
+       <div data-contrast="high"> … </div>  <!-- one region -->
+
+   It is an ATTRIBUTE rather than a React provider on purpose: `.dark`
+   already works this way, so a consumer's existing theme switcher can set
+   both, it needs no client component, and it survives SSR.
+
+   The steps are named, not literal, so a consumer who rebrands the neutral
+   ramp gets a correctly-scaled high-contrast mode for free. `--neutral-*`
+   is itself theme-aware, so ONE rule serves light and dark.
+
+   Placed after `.dark` deliberately: `[data-contrast='high']` and `.dark`
+   have the same specificity (0,1,0), so when both sit on <html> source
+   order is what decides. Moving this block above `.dark` silently breaks
+   high contrast in dark mode only.
+   ═══════════════════════════════════════════════════════════════════ */
+[data-contrast='high'] {
+  --color-surface-border-interactive:        var(--neutral-8);
+  --color-surface-border-interactive-strong: var(--neutral-9);
+}
+
 /* ═══════════════════════════════════════════════════════════════════
    Ensure Radix popper content (Select, Combobox, Popover, etc.)
    renders above Sheet/Dialog overlays.

package/dist/tokens/shilp-sutra.css

@@ -18,6 +18,7 @@
    legacy subpath. */
 @import "./primitives.css";
 @import "./semantic.css";
+@import "./palettes.css";
 @import "./typography.css";
 @import "./typography-semantic.css";
 @import "./base.css";