@devalok/shilp-sutra 0.56.0 → 0.59.0

package/dist/shell/top-bar.js

@@ -17,7 +17,7 @@ var T = _.forwardRef(({ className: e, children: n, ...r }, i) => {
 	return /* @__PURE__ */ y("header", {
 		...r,
 		ref: i,
-		className: t("z-sticky w-full border-b border-surface-border-strong bg-surface-chrome px-ds-05 py-ds-04 md:px-ds-06", a ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center", e),
+		className: t("z-sticky w-full border-b border-surface-border-strong bg-surface-base px-ds-05 py-ds-04 md:px-ds-06", a ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center", e),
 		children: n
 	});
 });
@@ -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-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard", i),
+		className: t("flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-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",
@@ -100,7 +100,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 						src: T.image,
 						alt: T.name
 					}) : null, /* @__PURE__ */ y(i, {
-						className: "bg-surface-raised-hover text-surface-fg",
+						className: "bg-surface-panel-hover text-surface-fg",
 						children: T.name?.charAt(0).toUpperCase()
 					})]
 				})
@@ -128,7 +128,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 				})]
 			}),
 			/* @__PURE__ */ b(l, {
-				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-panel-hover",
 				onClick: () => E?.("/profile"),
 				children: [/* @__PURE__ */ y(n, {
 					icon: w,
@@ -147,7 +147,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 					info: "text-info-11"
 				}[n.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
 				return /* @__PURE__ */ b(_.Fragment, { children: [n.separator && /* @__PURE__ */ y(u, { className: "bg-surface-border" }), /* @__PURE__ */ b(l, {
-					className: t("flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised", n.disabled && "pointer-events-none opacity-action-disabled"),
+					className: t("flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-panel-hover", n.disabled && "pointer-events-none opacity-action-disabled"),
 					disabled: n.disabled,
 					onClick: () => {
 						n.disabled || (n.onClick ? n.onClick() : n.href && E?.(n.href));
@@ -172,7 +172,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 				})] }, n.label + r);
 			}),
 			/* @__PURE__ */ b(l, {
-				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-panel-hover",
 				onClick: M,
 				children: [j === "dark" ? /* @__PURE__ */ y(n, {
 					icon: C,
@@ -188,7 +188,7 @@ var N = _.forwardRef(({ user: T, onNavigate: E, onLogout: D, userMenuItems: O, c
 				})]
 			}),
 			D && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(u, { className: "bg-surface-border" }), /* @__PURE__ */ b(l, {
-				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+				className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-panel-hover",
 				onClick: D,
 				children: [/* @__PURE__ */ y(n, {
 					icon: x,

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-chrome px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: IconInput\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-pill border border-card-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\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-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-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-raised\"\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-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      <IconProvider size=\"sm\">{normalizeIcon(item.icon)}</IconProvider>\n                    </span>\n                  )}\n                  <span className={cn('text-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-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-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-raised\"\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/generate-scale.d.ts

@@ -12,6 +12,29 @@ export interface ScaleOptions {
     peakChroma: number;
     /** When true, keeps chroma very low across all steps */
     isNeutral?: boolean;
+    /**
+     * Per-ramp lightness corrections for the solid steps, in OKLCH L units.
+     *
+     * Steps 9 and 10 are the solid fills that carry text. The generic curve does
+     * not clear WCAG for every hue — green and blue at the default dark L of 0.63
+     * are too light under white text — so the ramps used as semantic intents carry
+     * a hand-verified correction.
+     *
+     * Discovered 2026-08-18: without these, `generateScale` could not reproduce the
+     * palette in `primitives.css`. Regenerating a ramp silently reverted the
+     * contrast fix on pink, red, green, blue and neutral.
+     *
+     * Decorative ramps (purple, teal, amber, slate, indigo, cyan, orange, emerald)
+     * need no correction — they never sit under text.
+     */
+    correction?: {
+        /** Added to step 9's light-mode L */
+        light9?: number;
+        /** Added to step 9's dark-mode L */
+        dark9?: number;
+        /** Added to step 10's dark-mode L */
+        dark10?: number;
+    };
 }
 export interface ScaleStep {
     /** 1-based step number */
@@ -24,10 +47,20 @@ export interface Scale {
     dark: ScaleStep[];
 }
 export declare function generateScale(options: ScaleOptions): Scale;
+/**
+ * Ramp seeds. The five ramps that back semantic intents carry `correction`
+ * values on steps 9/10 — the solid fills that sit under text. Verified against
+ * `primitives.css` by `figma-plugin/verify-parity.mjs`; without them the
+ * generator does not reproduce the shipped palette.
+ */
 export declare const BRAND_PALETTES: {
     readonly pink: {
         readonly hue: 360;
         readonly peakChroma: 0.19;
+        readonly correction: {
+            readonly dark9: -0.09;
+            readonly dark10: -0.09;
+        };
     };
     readonly purple: {
         readonly hue: 300;
@@ -37,14 +70,26 @@ export declare const BRAND_PALETTES: {
         readonly hue: 350;
         readonly peakChroma: 0.01;
         readonly isNeutral: true;
+        readonly correction: {
+            readonly light9: -0.01;
+        };
     };
     readonly red: {
         readonly hue: 25;
         readonly peakChroma: 0.18;
+        readonly correction: {
+            readonly dark9: -0.09;
+            readonly dark10: -0.09;
+        };
     };
     readonly green: {
         readonly hue: 145;
         readonly peakChroma: 0.14;
+        readonly correction: {
+            readonly light9: -0.03;
+            readonly dark9: -0.09;
+            readonly dark10: -0.09;
+        };
     };
     readonly yellow: {
         readonly hue: 85;
@@ -53,6 +98,10 @@ export declare const BRAND_PALETTES: {
     readonly blue: {
         readonly hue: 240;
         readonly peakChroma: 0.12;
+        readonly correction: {
+            readonly dark9: -0.09;
+            readonly dark10: -0.09;
+        };
     };
     readonly teal: {
         readonly hue: 175;

package/dist/tokens/generate-scale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-scale.d.ts","sourceRoot":"","sources":["../../src/tokens/generate-scale.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,MAAM,WAAW,YAAY;IAC3B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,IAAI,EAAE,SAAS,EAAE,CAAA;CAClB;AAyGD,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,KAAK,CAsC1D;AAMD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAesB,CAAA"}
+{"version":3,"file":"generate-scale.d.ts","sourceRoot":"","sources":["../../src/tokens/generate-scale.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,MAAM,WAAW,YAAY;IAC3B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE;QACX,qCAAqC;QACrC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,oCAAoC;QACpC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,qCAAqC;QACrC,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;CACF;AAED,MAAM,WAAW,SAAS;IACxB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,IAAI,EAAE,SAAS,EAAE,CAAA;CAClB;AAyGD,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,KAAK,CA0C1D;AAMD;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAesB,CAAA"}

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/primitives.css

@@ -51,24 +51,26 @@
   --neutral-0: #ffffff;
   /* Sunken well. Chroma follows the neutral cadence (was H:360 C:0.008 — an
      outlier that read visibly pink on sunken surfaces). */
-  --color-surface-0: oklch(0.945 0.0013 350);
-  --neutral-1:  oklch(0.99 0.0003 350);
-  --neutral-2:  oklch(0.97 0.0008 350);
-  --neutral-3:  oklch(0.93 0.0018 350);
-  --neutral-4:  oklch(0.89 0.0029 350);
-  --neutral-5:  oklch(0.84 0.0042 350);
-  --neutral-6:  oklch(0.78 0.0053 350);
-  --neutral-7:  oklch(0.7 0.0074 350);
-  --neutral-8:  oklch(0.62 0.0089 350);
+  /* Sunken wells. Sits below the page and clears panel-hover; see
+     docs/plans/2026-08-26-surface-model-rebuild.md */
+  --neutral-sunken: oklch(0.95 0 0);
+  --neutral-1:  oklch(0.99 0 0);
+  --neutral-2:  oklch(0.97 0 0);
+  --neutral-3:  oklch(0.93 0 0);
+  --neutral-4:  oklch(0.89 0 0);
+  --neutral-5:  oklch(0.84 0 0);
+  --neutral-6:  oklch(0.78 0 0);
+  --neutral-7:  oklch(0.7 0 0);
+  --neutral-8:  oklch(0.62 0 0);
   /* 0.55 → 0.54: at 0.55 this measured 4.472:1 on --neutral-2 (the light
      surface-base), just under WCAG AA's 4.5 for normal text. 0.54 gives
      4.664:1. The intermediate 0.545 also clears at 4.567, but with only
      0.067 of headroom — a later tweak to surface-base would silently push it
      back under, which is how the previous attempt at this fix landed short. */
-  --neutral-9:  oklch(0.54 0.01 350);
-  --neutral-10: oklch(0.5 0.01 350);
-  --neutral-11: oklch(0.43 0.0074 350);
-  --neutral-12: oklch(0.32 0.0042 350);
+  --neutral-9:  oklch(0.54 0 0);
+  --neutral-10: oklch(0.5 0 0);
+  --neutral-11: oklch(0.43 0 0);
+  --neutral-12: oklch(0.32 0 0);
 
   /* ── Red — H:25 ── */
   --red-1:  oklch(0.99 0.0047 25);
@@ -271,19 +273,20 @@
   /* ── Neutral — Warm grays — H:350 ── */
   /* Sunken well (deep). Chroma follows the neutral cadence — was H:360 C:0.008,
      an outlier that read tinted rather than neutral. */
-  --color-surface-0: oklch(0.07 0.0004 350);
-  --neutral-1:  oklch(0.11 0.0002 350);
-  --neutral-2:  oklch(0.17 0.0007 350);
-  --neutral-3:  oklch(0.23 0.0019 350);
-  --neutral-4:  oklch(0.29 0.0029 350);
-  --neutral-5:  oklch(0.34 0.0038 350);
-  --neutral-6:  oklch(0.38 0.0048 350);
-  --neutral-7:  oklch(0.44 0.0062 350);
-  --neutral-8:  oklch(0.53 0.0086 350);
-  --neutral-9:  oklch(0.63 0.01 350);
-  --neutral-10: oklch(0.58 0.01 350);
-  --neutral-11: oklch(0.76 0.0062 350);
-  --neutral-12: oklch(0.88 0.0024 350);
+  /* Dark has no room below the page, so a well simply IS the page. */
+  --neutral-sunken: oklch(0.147 0 0);
+  --neutral-1:  oklch(0.147 0 0);
+  --neutral-2:  oklch(0.207 0 0);
+  --neutral-3:  oklch(0.267 0 0);
+  --neutral-4:  oklch(0.327 0 0);
+  --neutral-5:  oklch(0.377 0 0);
+  --neutral-6:  oklch(0.417 0 0);
+  --neutral-7:  oklch(0.477 0 0);
+  --neutral-8:  oklch(0.567 0 0);
+  --neutral-9:  oklch(0.667 0 0);
+  --neutral-10: oklch(0.617 0 0);
+  --neutral-11: oklch(0.797 0 0);
+  --neutral-12: oklch(0.917 0 0);
 
   /* ── Red — H:25 ── */
   --red-1:  oklch(0.11 0.0047 25);