division-ds 0.4.1 → 0.6.0

package/AGENTS.md

@@ -51,7 +51,7 @@ installs these rules into that project's `AGENTS.md`, `GEMINI.md` and Cursor rul
 `.claude/skills/` (Claude Code).
 
 An agent that supports MCP can have the docs and the same checks as tools instead:
-`claude mcp add division-ds -- npx -y division-ds@0.4.0 mcp` (`list_components`, `get_component`,
+`claude mcp add division-ds -- npx -y division-ds@0.5.0 mcp` (`list_components`, `get_component`,
 `search`, `get_tokens`, `validate_code`, `check_contrast`, `get_add_command`,
 `get_review_checklist`).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "division-ds",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Checks a project that uses Division DS components (raw colours, invented tokens, touching buttons, unknown props), and serves the docs and the same checks to agents over MCP.",
   "license": "MIT",
   "author": "Victor Ilioiu",

package/public/docs/components/sidebar.md

@@ -20,7 +20,7 @@ Paths are from the Division DS repository root. Installed with shadcn they start
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `string` |  | Required. The name screen readers give the navigation region. |
-| `groups` | `SidebarGroup[]` |  | Required. Each group has title, icon, items, collapsible and defaultOpen. |
+| `groups` | `SidebarGroup[]` |  | Required. Each group has title, icon, items, collapsible and defaultOpen, and optionally action (a small icon button at the right end of the title row, beside the fold toggle, never inside it) and footer (under the items, lined up with them, hidden while the group is folded). |
 | `header` | `ReactNode` |  | Sits above the groups: a product name, a workspace switcher. |
 | `footer` | `ReactNode` |  | Pinned below the groups when the Sidebar has a height (h-full in a column layout): the signed-in account, a help link. |
 | `renderLink` | `(props: LinkRenderProps) => ReactNode` | `a plain anchor` | Pass your router's link component here. Map href to its own prop, and pass className, aria-current and onClick through. |
@@ -54,6 +54,13 @@ export type SidebarGroup = {
   collapsible?: boolean
   /** Ignored when the group holds the current item, which always starts open. @default true */
   defaultOpen?: boolean
+  /** Drawn at the far right of the title row: a small icon button, e.g. a ghost size="sm" Button
+   *  with a Plus icon and aria-label="New project". It sits beside the fold toggle, never inside it,
+   *  so pressing it does not open or close the group. The title truncates before it is pushed out. */
+  action?: ReactNode
+  /** Drawn under the items, inside the group, lined up with the items' left edge and padding: an
+   *  "Add project" button. Hidden (and unreachable by Tab) while the group is folded. */
+  footer?: ReactNode
 }
 ```
 
@@ -104,6 +111,36 @@ const FOOTER = <p className="text-xs text-[var(--color-text-secondary)]">Signed
 </div>
 ```
 
+### A Projects group with an action in its title row and a footer under its items
+
+```tsx
+const PROJECT_GROUPS: SidebarGroup[] = [
+  {
+    title: 'Projects',
+    icon: <FolderKanban />,
+    action: (
+      <IconButton label="New project" variant="ghost" size="sm">
+        <Plus aria-hidden="true" />
+      </IconButton>
+    ),
+    items: [
+      { label: 'Spring restock', href: '#spring-restock', icon: <Folder /> },
+      { label: 'Warehouse move', href: '#warehouse-move', icon: <Folder /> },
+    ],
+    footer: (
+      <Button variant="ghost" size="sm">
+        <Plus aria-hidden="true" />
+        New project
+      </Button>
+    ),
+  },
+]
+
+<div className="max-w-64">
+  <Sidebar label="Projects navigation" groups={PROJECT_GROUPS} />
+</div>
+```
+
 ### In a sheet on a narrow screen: picking a link closes the sheet, through renderLink
 
 ```tsx
@@ -189,5 +226,7 @@ const closeOnChoose = ({ onClick, ...props }: LinkRenderProps) => (
 - **nav**: The navigation region. Screen readers call it by the label prop.
 - **Group title**: A disclosure button (one that shows and hides the list) when the group can fold, plain text when it can't. It's text.secondary, so it still reads on a raised panel. Its list opens and closes by animating its height. Opening also fades and slides each item in, each one a little later than the one before (capped, so a long group never feels slow). Closing fades everything out together, all at once. If someone has asked their system for less motion (prefers-reduced-motion: reduce), both happen instantly.
 - **Item**: An icon, a label and an optional count. The current page gets the fill, plus aria-current, an ARIA attribute (Accessible Rich Internet Applications, the labels screen readers rely on) that tells screen readers this is the page you are on.
+- **Group action**: Optional. A small icon button at the right end of the title row, such as New project. It sits next to the fold toggle, not inside it, so pressing it never folds the group. A long title is cut short before it can push the action out.
+- **Group footer**: Optional. Under the group's items and lined up with them: an Add project button. It folds away with the items.
 - **Header**: Sits above the groups: a product name, a workspace switcher.
 - **Footer**: Pinned below the groups: the signed-in account, a help link.

package/public/manifest/components.json

@@ -11935,7 +11935,7 @@
         {
           "name": "groups",
           "type": "SidebarGroup[]",
-          "description": "Required. Each group has title, icon, items, collapsible and defaultOpen."
+          "description": "Required. Each group has title, icon, items, collapsible and defaultOpen, and optionally action (a small icon button at the right end of the title row, beside the fold toggle, never inside it) and footer (under the items, lined up with them, hidden while the group is folded)."
         },
         {
           "name": "header",
@@ -11974,7 +11974,7 @@
         {
           "name": "SidebarGroup",
           "kind": "type",
-          "code": "export type SidebarGroup = {\n  /** Also the React key for this group; unique within a Sidebar. */\n  title: string\n  /** Drawn before the title, aria-hidden; the title alone names the group. */\n  icon?: ReactNode\n  items: SidebarItem[]\n  /** @default true */\n  collapsible?: boolean\n  /** Ignored when the group holds the current item, which always starts open. @default true */\n  defaultOpen?: boolean\n}",
+          "code": "export type SidebarGroup = {\n  /** Also the React key for this group; unique within a Sidebar. */\n  title: string\n  /** Drawn before the title, aria-hidden; the title alone names the group. */\n  icon?: ReactNode\n  items: SidebarItem[]\n  /** @default true */\n  collapsible?: boolean\n  /** Ignored when the group holds the current item, which always starts open. @default true */\n  defaultOpen?: boolean\n  /** Drawn at the far right of the title row: a small icon button, e.g. a ghost size=\"sm\" Button\n   *  with a Plus icon and aria-label=\"New project\". It sits beside the fold toggle, never inside it,\n   *  so pressing it does not open or close the group. The title truncates before it is pushed out. */\n  action?: ReactNode\n  /** Drawn under the items, inside the group, lined up with the items' left edge and padding: an\n   *  \"Add project\" button. Hidden (and unreachable by Tab) while the group is folded. */\n  footer?: ReactNode\n}",
           "from": "src/components/organisms/sidebar/Sidebar"
         }
       ],
@@ -12021,6 +12021,14 @@
           "part": "Item",
           "description": "An icon, a label and an optional count. The current page gets the fill, plus aria-current, an ARIA attribute (Accessible Rich Internet Applications, the labels screen readers rely on) that tells screen readers this is the page you are on."
         },
+        {
+          "part": "Group action",
+          "description": "Optional. A small icon button at the right end of the title row, such as New project. It sits next to the fold toggle, not inside it, so pressing it never folds the group. A long title is cut short before it can push the action out."
+        },
+        {
+          "part": "Group footer",
+          "description": "Optional. Under the group's items and lined up with them: an Add project button. It folds away with the items."
+        },
         {
           "part": "Header",
           "description": "Sits above the groups: a product name, a workspace switcher."
@@ -12035,6 +12043,10 @@
           "caption": "Dashboard navigation",
           "source": "const GROUPS: SidebarGroup[] = [\n  {\n    title: 'Operations',\n    icon: <Warehouse />,\n    items: [\n      { label: 'Overview', href: '#overview', icon: <LayoutDashboard /> },\n      { label: 'Orders', href: '#orders', icon: <Package />, current: true, count: 12 },\n      { label: 'Shipments', href: '#shipments', icon: <Truck /> },\n      { label: 'Returns', href: '#returns', icon: <Inbox />, count: 3 },\n    ],\n  },\n  {\n    title: 'Catalogue',\n    icon: <Boxes />,\n    defaultOpen: false,\n    items: [\n      { label: 'Products', href: '#products', icon: <Box /> },\n      { label: 'Inventory', href: '#inventory', icon: <Map /> },\n    ],\n  },\n  {\n    title: 'Account',\n    icon: <UserCog />,\n    collapsible: false,\n    items: [\n      { label: 'Settings', href: '#settings', icon: <Settings /> },\n      { label: 'Team', href: '#team', icon: <Users /> },\n    ],\n  },\n]\n\nconst HEADER = <p className=\"font-display font-semibold\">Hexline ops</p>\n\nconst FOOTER = <p className=\"text-xs text-[var(--color-text-secondary)]\">Signed in as Ana Pop</p>\n\n<div className=\"max-w-64\">\n  <Sidebar label=\"Dashboard navigation\" groups={GROUPS} header={HEADER} footer={FOOTER} />\n</div>"
         },
+        {
+          "caption": "A Projects group with an action in its title row and a footer under its items",
+          "source": "const PROJECT_GROUPS: SidebarGroup[] = [\n  {\n    title: 'Projects',\n    icon: <FolderKanban />,\n    action: (\n      <IconButton label=\"New project\" variant=\"ghost\" size=\"sm\">\n        <Plus aria-hidden=\"true\" />\n      </IconButton>\n    ),\n    items: [\n      { label: 'Spring restock', href: '#spring-restock', icon: <Folder /> },\n      { label: 'Warehouse move', href: '#warehouse-move', icon: <Folder /> },\n    ],\n    footer: (\n      <Button variant=\"ghost\" size=\"sm\">\n        <Plus aria-hidden=\"true\" />\n        New project\n      </Button>\n    ),\n  },\n]\n\n<div className=\"max-w-64\">\n  <Sidebar label=\"Projects navigation\" groups={PROJECT_GROUPS} />\n</div>"
+        },
         {
           "caption": "In a sheet on a narrow screen: picking a link closes the sheet, through renderLink",
           "source": "const GROUPS: SidebarGroup[] = [\n  {\n    title: 'Operations',\n    icon: <Warehouse />,\n    items: [\n      { label: 'Overview', href: '#overview', icon: <LayoutDashboard /> },\n      { label: 'Orders', href: '#orders', icon: <Package />, current: true, count: 12 },\n      { label: 'Shipments', href: '#shipments', icon: <Truck /> },\n      { label: 'Returns', href: '#returns', icon: <Inbox />, count: 3 },\n    ],\n  },\n  {\n    title: 'Catalogue',\n    icon: <Boxes />,\n    defaultOpen: false,\n    items: [\n      { label: 'Products', href: '#products', icon: <Box /> },\n      { label: 'Inventory', href: '#inventory', icon: <Map /> },\n    ],\n  },\n  {\n    title: 'Account',\n    icon: <UserCog />,\n    collapsible: false,\n    items: [\n      { label: 'Settings', href: '#settings', icon: <Settings /> },\n      { label: 'Team', href: '#team', icon: <Users /> },\n    ],\n  },\n]\n\nconst HEADER = <p className=\"font-display font-semibold\">Hexline ops</p>\n\nconst FOOTER = <p className=\"text-xs text-[var(--color-text-secondary)]\">Signed in as Ana Pop</p>\n\nconst closeOnChoose = ({ onClick, ...props }: LinkRenderProps) => (\n  <SheetClose asChild type={undefined}>\n    <a {...props} onClick={onClick} />\n  </SheetClose>\n)\n\n<Sheet>\n  <SheetTrigger asChild>\n    <Button variant=\"secondary\">Open navigation</Button>\n  </SheetTrigger>\n  <SheetContent side=\"left\" title=\"Navigation\">\n    <Sidebar\n      label=\"Dashboard navigation, in a sheet\"\n      groups={GROUPS}\n      header={HEADER}\n      footer={FOOTER}\n      renderLink={closeOnChoose}\n    />\n  </SheetContent>\n</Sheet>"

package/public/manifest/tokens.json

@@ -5,57 +5,57 @@
     {
       "name": "--color-signal-50",
       "layer": "primitive",
-      "value": "#fef5f0"
+      "value": "#fff4f0"
     },
     {
       "name": "--color-signal-100",
       "layer": "primitive",
-      "value": "#fcd5c3"
+      "value": "#ffccb8"
     },
     {
       "name": "--color-signal-200",
       "layer": "primitive",
-      "value": "#f9b596"
+      "value": "#ffa581"
     },
     {
       "name": "--color-signal-300",
       "layer": "primitive",
-      "value": "#f79569"
+      "value": "#ff7d49"
     },
     {
       "name": "--color-signal-400",
       "layer": "primitive",
-      "value": "#f4753c"
+      "value": "#ff5512"
     },
     {
       "name": "--color-signal-500",
       "layer": "primitive",
-      "value": "#f2550f"
+      "value": "#d93e00"
     },
     {
       "name": "--color-signal-600",
       "layer": "primitive",
-      "value": "#c6440b"
+      "value": "#b13200"
     },
     {
       "name": "--color-signal-700",
       "layer": "primitive",
-      "value": "#983508"
+      "value": "#882700"
     },
     {
       "name": "--color-signal-800",
       "layer": "primitive",
-      "value": "#6a2506"
+      "value": "#601b00"
     },
     {
       "name": "--color-signal-900",
       "layer": "primitive",
-      "value": "#3c1503"
+      "value": "#381000"
     },
     {
       "name": "--color-signal-950",
       "layer": "primitive",
-      "value": "#0f0501"
+      "value": "#0f0400"
     },
     {
       "name": "--color-hostile-50",
@@ -566,7 +566,7 @@
     {
       "name": "--color-accent-signal-fill",
       "layer": "semantic",
-      "value": "#f2550f",
+      "value": "#d93e00",
       "use": "A solid block in the brand colour, exactly as chosen: the primary Button, IconButton, a solid signal Badge. Put accent.signal.ink on it, never text.primary. Never use it as the only sign of a state; use accent.signal.indicator.",
       "measured": {
         "dark": "The brand colour, exactly as chosen: Button, IconButton and solid Badge backgrounds, and brand decoration. Text on it is accent.signal.ink. Never the only sign of a state; that is accent.signal.indicator. The theme builder never moves it.",
@@ -577,61 +577,61 @@
       "name": "--color-accent-signal-text",
       "layer": "semantic",
       "value": {
-        "dark": "#f2550f",
-        "light": "#983508"
+        "dark": "#ff5512",
+        "light": "#b13200"
       },
       "use": "Orange text or icon on a surface: a current nav item, an emphasised figure, a link accent.",
       "measured": {
-        "dark": "5.80:1 on surface.base",
-        "light": "6.70:1 on surface.base -- promoted a step from dark theme's 500, because 500 only reaches 3.14:1 on the light base"
+        "dark": "6.26:1 on surface.base. A step lighter than the brand fill, which reaches 4.42:1 on the dark page, under the 4.5:1 text needs.",
+        "light": "5.73:1 on surface.base. A step darker than dark theme's 400; the brand fill itself reaches only 4.11:1 on the light page, under the 4.5:1 text needs."
       }
     },
     {
       "name": "--color-accent-signal-ink",
       "layer": "semantic",
-      "value": "#0a0602",
+      "value": "#ffffff",
       "use": "Text and icons on accent.signal.fill.",
       "measured": {
-        "dark": "5.85:1 on accent.signal.fill",
-        "light": "5.85:1 on accent.signal.fill"
+        "dark": "White, 4.53:1 on accent.signal.fill",
+        "light": "White, 4.53:1 on accent.signal.fill"
       }
     },
     {
       "name": "--color-accent-signal-indicator",
       "layer": "semantic",
-      "value": "#f2550f",
+      "value": "#d93e00",
       "use": "The accent where colour alone shows a state or value: a checked control, Switch on, Progress, Slider, Rating stars, the current item in Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows. Put accent.signal.indicator-ink on it.",
       "measured": {
-        "dark": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 5.80:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone.",
-        "light": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 3.14:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone."
+        "dark": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 4.42:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone.",
+        "light": "The accent where colour alone marks a state or a value: checked controls, Switch on, Progress, Slider, Rating stars, the current item of Sidebar, Navbar, Tabs, SegmentedControl, Stepper and highlighted menu rows, and the hero numerals. 4.11:1 on surface.base. Same stop as accent.signal.fill here; the theme builder moves it to a nearby stop when a chosen accent is too pale or too dark to reach 3:1, and leaves accent.signal.fill alone."
       }
     },
     {
       "name": "--color-accent-signal-indicator-ink",
       "layer": "semantic",
-      "value": "#0a0602",
+      "value": "#ffffff",
       "use": "Text and icons on accent.signal.indicator.",
       "measured": {
-        "dark": "Text and icons on accent.signal.indicator. 5.85:1. The theme builder picks white or this dark ink, whichever reaches 4.5:1.",
-        "light": "Text and icons on accent.signal.indicator. 5.85:1. The theme builder picks white or this dark ink, whichever reaches 4.5:1."
+        "dark": "Text and icons on accent.signal.indicator: white, 4.53:1. The theme builder picks white or a dark ink, whichever reaches 4.5:1.",
+        "light": "Text and icons on accent.signal.indicator: white, 4.53:1. The theme builder picks white or a dark ink, whichever reaches 4.5:1."
       }
     },
     {
       "name": "--color-accent-signal-wash",
       "layer": "semantic",
-      "value": "rgba(242, 85, 15, 0.12)",
+      "value": "rgba(217, 62, 0, 0.12)",
       "use": "The faint orange hover wash under a nav item or an inactive tab.",
       "measured": {
-        "dark": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. The focus ring and a checked control's fill drop under 3:1 on it in light theme, so neither is ever drawn on it.",
-        "light": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. A checked control's indicator drops under 3:1 on it in light theme and the focus ring is not gated on it, so neither is ever drawn on it."
+        "dark": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. Neither a checked control's fill nor the focus ring is gated on it, so neither is ever drawn on it.",
+        "light": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. Neither a checked control's indicator nor the focus ring is gated on it, so neither is ever drawn on it."
       }
     },
     {
       "name": "--color-accent-signal-glow",
       "layer": "semantic",
       "value": {
-        "dark": "rgba(242, 85, 15, 0.38)",
-        "light": "rgba(242, 85, 15, 0.3)"
+        "dark": "rgba(217, 62, 0, 0.38)",
+        "light": "rgba(217, 62, 0, 0.3)"
       },
       "use": "The faint shadow of an interactive Card on hover and focus. Used by the Card component only.",
       "measured": {
@@ -655,7 +655,7 @@
       "use": "Error and destructive text or icon on a surface: field errors, an invalid border, a failed status.",
       "measured": {
         "dark": "6.23:1 on surface.base, 5.42:1 on surface.raised, 4.80:1 on raised nested in raised, 5.92:1 on surface.sunken. hostile.500 measured 4.48:1 on surface.raised, under 4.5:1.",
-        "light": "6.70:1 on surface.base"
+        "light": "5.73:1 on surface.base. A step darker than dark theme's 400; the brand fill itself reaches only 4.11:1 on the light page, under the 4.5:1 text needs."
       }
     },
     {
@@ -765,7 +765,7 @@
       "use": "The dimmed leading zeros of a hero numeral. Decorative; never text that has to be read.",
       "measured": {
         "dark": "The dimmed leading-zero pad on a hero numeral (Overview, Progress readout, docs section index). Decorative and aria-hidden: it is a column width, never a value, so no SC 1.4.3 obligation attaches to it. 5.35:1 on surface.base, which is 31% of text.primary's 17.17:1 there -- that share, not the absolute ratio, is what makes it read as padding rather than as a digit. Holds the same value text.muted holds in this theme and is deliberately NOT an alias of it: text.muted is real secondary text with an AA floor, and the two move for different reasons.",
-        "light": "The dimmed leading-zero pad. 3.82:1 on surface.base, 22% of text.primary's 17.55:1 there, against the dark theme's 31%. Light theme needs a LIGHTER step than text.muted for the same role: muted aliases neutral.500 and measures 11.44:1 here, 65% of ink, which does not read as dimmed and out-shouts the signal.fill numeral it is padding (3.14:1 on this surface). neutral.400 would land at 6.58:1 and 38% of ink, closer to dark's share but more than twice the contrast of the digits beside it, so neutral.300 is the step that keeps the pad quieter than what it pads."
+        "light": "The dimmed leading-zero pad. 3.82:1 on surface.base, 22% of text.primary's 17.55:1 there, against the dark theme's 31%. Light theme needs a LIGHTER step than text.muted for the same role: muted aliases neutral.500 and measures 11.44:1 here, 65% of ink, which does not read as dimmed and out-shouts the signal.fill numeral it is padding (4.11:1 on this surface). neutral.400 would land at 6.58:1 and 38% of ink, closer to dark's share but more than twice the contrast of the digits beside it, so neutral.300 is the step that keeps the pad quieter than what it pads."
       }
     },
     {
@@ -811,25 +811,23 @@
       "name": "--color-focus-ring",
       "layer": "semantic",
       "value": {
-        "dark": "#f2550f",
-        "light": "#c6440b"
+        "dark": "#ff5512",
+        "light": "#d93e00"
       },
       "use": "The keyboard focus outline. Use it only in focus-visible:outline-[var(--color-focus-ring)], with a 2px outline and a 2px offset.",
       "measured": {
-        "light": "4.51:1 on surface.base. A step darker than accent.signal.fill, which reaches only 3.14:1 on the light page: the ring is the one mark every keyboard user depends on, so it gets a margin."
+        "dark": "6.26:1 on surface.base. A step lighter than accent.signal.fill, which reaches 3.41:1 on nested panels: the ring is the one mark every keyboard user depends on, so it gets a margin.",
+        "light": "4.11:1 on surface.base. The brand colour itself: it clears 3:1 on every light surface, so the ring no longer needs a step of its own."
       }
     },
     {
       "name": "--color-chart-series-1",
       "layer": "semantic",
-      "value": {
-        "dark": "#f2550f",
-        "light": "#c6440b"
-      },
+      "value": "#d93e00",
       "use": "The first data series in a chart. A graphic colour, never text. ChartPanel applies it.",
       "measured": {
-        "dark": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 5.80:1 on surface.base, 5.05:1 on surface.raised, 4.47:1 nested. Never text.",
-        "light": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 4.51:1 on surface.base, 4.79:1 on surface.raised, 4.88:1 nested. Never text."
+        "dark": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 4.42:1 on surface.base, 3.85:1 on surface.raised, 3.41:1 nested. Never text.",
+        "light": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 4.11:1 on surface.base, 4.37:1 on surface.raised, 4.45:1 nested. Never text."
       }
     },
     {