@duro-app/cli 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/cli",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.0.0",
-    "@duro-app/ui": "^3.0.0"
+    "@duro-app/ui": "^3.2.0"
   },
   "peerDependenciesMeta": {
     "@duro-app/ui": {
@@ -60,9 +60,9 @@
     "@types/node": "^24.0.0",
     "ts-morph": "^26.0.0",
     "typescript": "^5.7.0",
-    "@duro-app/eslint-plugin": "^3.0.0",
-    "@duro-app/tokens": "^3.0.0",
-    "@duro-app/ui": "^3.0.0"
+    "@duro-app/eslint-plugin": "^3.2.0",
+    "@duro-app/ui": "^3.2.0",
+    "@duro-app/tokens": "^3.2.0"
   },
   "scripts": {
     "registry": "node scripts/build-registry.mjs",

package/registry.json

@@ -1743,6 +1743,152 @@
       "props": null,
       "sourcePath": "packages/ui/src/components/Dialog/Dialog.tsx"
     },
+    "DragDrop": {
+      "importPath": "@duro-app/ui",
+      "kind": "compound",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Zone",
+            "Item"
+          ]
+        },
+        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
+        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "relatedTo": [
+          {
+            "component": "Tag",
+            "kind": "composition",
+            "relationship": "A removable Tag inside an Item gives the drop target its non-drag remove path"
+          },
+          {
+            "component": "ScrollArea",
+            "kind": "contrast",
+            "relationship": "ScrollArea drags a thumb along one axis; DragDrop moves items between zones"
+          }
+        ],
+        "whenNotToUse": [
+          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
+          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "Sorting tabular data — sort the Table instead",
+          "React Native — Item renders its children without drag behaviour there"
+        ],
+        "whenToUse": [
+          "Slotting things into places — people into approval gates, cards into columns, files into folders",
+          "Reordering a short row or list when the order is visible and meaningful"
+        ]
+      },
+      "name": "DragDrop",
+      "parts": {
+        "Item": {
+          "name": "Item",
+          "props": [
+            {
+              "name": "id",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "The zone this item currently lives in.",
+              "name": "zone",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Read to screen readers when picked up or dropped.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Carried to onDrop untouched.",
+              "name": "data",
+              "required": false,
+              "type": "T"
+            },
+            {
+              "description": "What follows the pointer; defaults to the children.",
+              "name": "preview",
+              "required": false,
+              "type": "ReactNode"
+            },
+            {
+              "default": "false",
+              "name": "disabled",
+              "required": false,
+              "type": "boolean"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+        },
+        "Root": {
+          "name": "Root",
+          "props": [
+            {
+              "description": "Called when an item is released over a zone that accepts it. Reordering inside the item's own zone arrives here too, with the new index.",
+              "name": "onDrop",
+              "required": true,
+              "type": "(event: DragDropEvent<T>) => void"
+            },
+            {
+              "description": "Overrides the default screen-reader announcements.",
+              "name": "announce",
+              "required": false,
+              "type": "(event: {kind: 'pick' | 'drop' | 'cancel'; item: string; zone?: string}) => string"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+        },
+        "Zone": {
+          "name": "Zone",
+          "props": [
+            {
+              "name": "id",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "description": "Read to screen readers when an item is dropped here.",
+              "name": "label",
+              "required": true,
+              "type": "string"
+            },
+            {
+              "default": "'horizontal'",
+              "description": "Which axis items flow along; decides how the insertion index is read from the pointer.",
+              "name": "orientation",
+              "required": false,
+              "type": "'horizontal' | 'vertical'"
+            },
+            {
+              "description": "Refuse an item; the zone then never lights up for it.",
+              "name": "accepts",
+              "required": false,
+              "type": "(item: DragDropItemData<T>) => boolean"
+            },
+            {
+              "name": "children",
+              "required": true,
+              "type": "ReactNode"
+            }
+          ],
+          "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+        }
+      },
+      "props": null,
+      "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+    },
     "Drawer": {
       "importPath": "@duro-app/ui",
       "kind": "compound",
@@ -2294,8 +2440,8 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "CSS grid layout. Fixed column count (1-6), responsive auto-fit via minColumnWidth, or a named split layout (list/detail, nav/content) that collapses below the md breakpoint.",
-        "example": "// Split: list ≥ 240px beside a detail pane, one column below md\n<Grid layout=\"split\" gap=\"lg\">\n  <List.Root>…</List.Root>\n  <Panel.Root>…</Panel.Root>\n</Grid>\n\n// Responsive: columns auto-fit based on min width\n<Grid minColumnWidth=\"280px\" gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>\n\n// Fixed: always 3 columns\n<Grid columns={3} gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>",
+        "description": "Grid layout. Columns are a count (1-6), a list of weights ([1, 2] for one-third / two-thirds), responsive auto-fit via minColumnWidth, or a named split layout (list/detail, nav/content) that collapses to one column on the width of its own container, so it is safe to nest and to place beside a DetailPanel. Weights rather than CSS template strings, so the same props render as CSS grid on web and as a wrapping flex row on native.",
+        "example": "// Split: list ≥ 240px beside a detail pane, one column below md\n<Grid layout=\"split\" gap=\"lg\">\n  <List.Root>…</List.Root>\n  <Panel.Root>…</Panel.Root>\n</Grid>\n\n// Responsive: columns auto-fit based on min width\n<Grid minColumnWidth=\"280px\" gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>\n\n// Fixed: always 3 columns\n<Grid columns={3} gap=\"md\">\n  <Card>A</Card>\n  <Card>B</Card>\n  <Card>C</Card>\n</Grid>\n\n// Weighted: a one-third / two-thirds split (works on native too)\n<Grid columns={[1, 2]} gap=\"md\">\n  <Card>Sidebar</Card>\n  <Card>Content</Card>\n</Grid>",
         "relatedTo": [
           {
             "component": "Stack",
@@ -2315,7 +2461,7 @@
         "whenToUse": [
           "Card grids, dashboard layouts, multi-column forms",
           "Responsive layouts that should auto-adjust column count",
-          "A list/detail or nav/content screen — layout=\"split\" | \"split-wide\", never a hand-rolled gridTemplateColumns with its own @media"
+          "A list/detail or nav/content screen — layout=\"split\" | \"split-wide\", never a hand-rolled gridTemplateColumns with its own @media; a split inside a split is fine, each collapses on its own room"
         ]
       },
       "name": "Grid",
@@ -2337,17 +2483,19 @@
           ]
         },
         {
+          "description": "A column count (equal columns) or weights: `[1, 2]` gives a one-third / two-thirds split. Weights are the portable form of a track list — a CSS template string would be silently ignored on native.",
           "name": "columns",
           "required": false,
-          "type": "1 | 2 | 3 | 4 | 5 | 6"
+          "type": "GridColumns"
         },
         {
+          "description": "Responsive auto-fit: as many columns of at least this width as fit. Wins over `columns` when both are set. On native this approximates to cells of that minimum width that grow and wrap.",
           "name": "minColumnWidth",
           "required": false,
           "type": "string"
         },
         {
-          "description": "A named responsive layout. `split` is list/detail (1:2, list ≥ 240px), `split-wide` is nav/content (1:3, nav ≥ 280px); both collapse to one column below the `md` breakpoint. Wins over `columns` / `minColumnWidth`.",
+          "description": "A named responsive layout. `split` is list/detail (1:2, list ≥ 240px), `split-wide` is nav/content (1:3, nav ≥ 280px). Each collapses to one column on the width of its OWN container — `split` below `sm` (640px), `split-wide` below `md` (768px) — so a split nested inside another split, or beside an open DetailPanel, collapses when it runs out of room rather than when the window does. Wins over `columns` / `minColumnWidth`.",
           "name": "layout",
           "required": false,
           "type": "GridLayout"
@@ -5876,6 +6024,46 @@
       "props": [],
       "sourcePath": "packages/ui/src/components/Table/useDataTable.ts"
     },
+    "useDragDrop": {
+      "importPath": "@duro-app/ui",
+      "kind": "hook",
+      "meta": {
+        "anatomy": {
+          "required": [
+            "Root",
+            "Zone",
+            "Item"
+          ]
+        },
+        "description": "Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.",
+        "example": "<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>\n  <DragDrop.Zone id=\"roster\" label=\"Roster\">\n    <Cluster gap=\"sm\">\n      {people.map((p) => (\n        <DragDrop.Item key={p.id} id={p.id} zone=\"roster\" label={p.name} data={p}>\n          <Button variant=\"secondary\" size=\"small\" onClick={() => slot(p)}>{p.name}</Button>\n        </DragDrop.Item>\n      ))}\n    </Cluster>\n  </DragDrop.Zone>\n  <DragDrop.Zone id=\"gates\" label=\"Gates\" orientation=\"horizontal\">\n    <Inline gap=\"sm\">\n      {gates.map((g) => (\n        <DragDrop.Item key={g.id} id={g.id} zone=\"gates\" label={g.name} data={g}>\n          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>\n        </DragDrop.Item>\n      ))}\n    </Inline>\n  </DragDrop.Zone>\n</DragDrop.Root>",
+        "relatedTo": [
+          {
+            "component": "Tag",
+            "kind": "composition",
+            "relationship": "A removable Tag inside an Item gives the drop target its non-drag remove path"
+          },
+          {
+            "component": "ScrollArea",
+            "kind": "contrast",
+            "relationship": "ScrollArea drags a thumb along one axis; DragDrop moves items between zones"
+          }
+        ],
+        "whenNotToUse": [
+          "As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one",
+          "Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll",
+          "Sorting tabular data — sort the Table instead",
+          "React Native — Item renders its children without drag behaviour there"
+        ],
+        "whenToUse": [
+          "Slotting things into places — people into approval gates, cards into columns, files into folders",
+          "Reordering a short row or list when the order is visible and meaningful"
+        ]
+      },
+      "name": "useDragDrop",
+      "props": [],
+      "sourcePath": "packages/ui/src/components/DragDrop/DragDrop.tsx"
+    },
     "usePortalMount": {
       "importPath": "@duro-app/ui",
       "kind": "hook",
@@ -6218,7 +6406,7 @@
     "page-with-sidenav": {
       "export": "PageWithSideNavRecipe",
       "meta": {
-        "description": "Page with a side navigation rail: SideNav in the narrow column of Grid layout=\"split-wide\", the routed content in the wide one; the rail stacks above the content below the md breakpoint.",
+        "description": "Page with a side navigation rail: SideNav in the narrow column of Grid layout=\"split-wide\", the routed content in the wide one; the rail stacks above the content when the page is narrower than md.",
         "example": "<PageWithSideNavRecipe />",
         "whenNotToUse": [
           "Three or four destinations — Tabs inside a PageShell read better than a rail",
@@ -6284,7 +6472,7 @@
     "split-pane": {
       "export": "SplitPaneRecipe",
       "meta": {
-        "description": "List/detail split: a selectable List beside a Panel showing the selection, on Grid layout=\"split\" (list ≥ 240px, one column below the md breakpoint).",
+        "description": "List/detail split: a selectable List beside a Panel showing the selection, on Grid layout=\"split\" (list ≥ 240px, one column when the board is narrower than sm).",
         "example": "<SplitPaneRecipe />",
         "whenNotToUse": [
           "The detail is a short-lived inspection — use DetailPanel over the list instead",