division-ds 0.5.0 → 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.1 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.5.0",
+  "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>"