@godxjp/ui 31.4.0 → 31.5.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.4.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.5.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 47 KB, all 176 components as name + group +
+1. `components-index.json` — 47 KB, all 177 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2080 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2098 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1765 `component` entries are per-part knobs; reach for one only when a role is
+   1783 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1765 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1783 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/CodeBlock.json

@@ -1,5 +1,5 @@
 {
-  "example": "import { CodeBlock } from \"@godxjp/ui/data-display\";\n\n<CodeBlock maxHeight=\"sm\" language=\"json\" aria-label=\"Response body\">{body}</CodeBlock>\n<CodeBlock size=\"xs\" maxHeight=\"md\" aria-label=\"Console\">{consoleText}</CodeBlock>",
+  "example": "import { CodeBlock } from \"@godxjp/ui/data-display\";\n\n<CodeBlock maxHeight=\"sm\" language=\"json\" aria-label=\"Response body\">{body}</CodeBlock>\n<CodeBlock size=\"xs\" maxHeight=\"md\" aria-label=\"Console\">{consoleText}</CodeBlock>\n<CodeBlock copyable language=\"bash\">pnpm add @godxjp/ui</CodeBlock>",
   "group": "data-display",
   "importPath": "@godxjp/ui/data-display",
   "name": "CodeBlock",
@@ -31,6 +31,11 @@
       "name": "language",
       "type": "string"
     },
+    {
+      "description": "antd Typography's `copyable`, same name and semantics (gh#1032): a copy button in the block's inline-end corner. `true` copies the block's text content (highlighter spans included); `text` overrides it. The block reserves the button's column, the confirmed state is announced politely, and `onCopy` fires only after the clipboard write succeeds.",
+      "name": "copyable",
+      "type": "boolean | { text?: string | (() => string | Promise<string>); onCopy?: (event) => void; tooltips?: ReactNode | [ReactNode, ReactNode] | false; icon?: ReactNode | [ReactNode, ReactNode]; format?: \"text/plain\" | \"text/html\"; tabIndex?: number }"
+    },
     {
       "description": "Extra classes on the `pre`.",
       "name": "className",
@@ -52,6 +57,7 @@
     "DO cap the height of anything that can be large (a 64 KB response body, a console dump) with `maxHeight`; the page keeps its rhythm and the block scrolls.",
     "DON'T hand-roll `<pre className=\"max-h-64 overflow-auto rounded bg-muted p-2 whitespace-pre-wrap\">`: every one of those values is a copy of a token this component reads.",
     "DON'T reach for `Text as=\"code\"` for a block: that is inline monospace with no wrapping axis. Use `Text as=\"code\"` for an identifier inside a sentence, CodeBlock for a block.",
+    "DO use `copyable` for a command or snippet the reader will paste (gh#1032). DON'T hand-roll a copy Button next to or over a CodeBlock: `copyable` owns the clipboard call, the confirmed state, the placement and the polite announcement.",
     "DON'T use CodeBlock for a single value in a Descriptions row: `Descriptions.Item mono` owns that (it breaks the value, not the row).",
     "SYNTAX COLOUR (gh#784): CodeBlock does not highlight, but it DOES own the palette. Tag each span from your highlighter with `data-code-token` — the twelve names are Shiki createCssVariablesTheme's verbatim (comment, keyword, string, string-expression, function, constant, parameter, punctuation, link, inserted, deleted, changed, plus the block foreground) — and the package colours them. DON'T put `style={{ color }}` or a palette `className` on the spans: both are visual overrides, and the colour is not the consumer's to choose. Retheme with the `--code-block-token-*-color` knobs, which are role-mirrors, so light and dark follow the theme with no second palette."
   ],

package/agent/components/OrgChart.json

@@ -0,0 +1,59 @@
+{
+  "docPath": "data-display/org-chart.tsx",
+  "example": "import { Avatar, AvatarFallback, Badge, OrgChart } from \"@godxjp/ui/data-display\";\n\n<OrgChart\n  label=\"Company org chart\"\n  data={[\n    {\n      key: \"ceo\", name: \"Haruka Tanaka\", title: \"CEO\",\n      avatar: <Avatar size=\"sm\"><AvatarFallback>HT</AvatarFallback></Avatar>,\n      children: [\n        { key: \"cto\", name: \"Kenji Watanabe\", title: \"CTO\" },\n        { key: \"bot\", name: \"Review Agent\", title: \"Code review\", variant: \"agent\",\n          extra: <Badge tone=\"success\">Running</Badge> },\n      ],\n    },\n  ]}\n/>",
+  "group": "data-display",
+  "importPath": "@godxjp/ui/data-display",
+  "name": "OrgChart",
+  "props": [
+    {
+      "description": "The hierarchy: { key, name, title?, avatar?, extra?, variant?: \"person\" | \"agent\", children? }. `key` is unique across the chart. `avatar` is usually an <Avatar>; `extra` a Badge or status.",
+      "name": "data",
+      "type": "OrgChartNodeProp[]"
+    },
+    {
+      "description": "Replace a box's content. The box, its border, the connectors and the keyboard stay the library's; the narrow Tree form uses it too.",
+      "name": "renderNode",
+      "type": "(node: OrgChartNodeProp) => ReactNode"
+    },
+    {
+      "description": "Accessible name of the role=\"tree\" (a plain string). Localized default \"Organization chart\".",
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "description": "DOM id of the root.",
+      "name": "id",
+      "type": "string"
+    },
+    {
+      "description": "Root class.",
+      "name": "className",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Tree — the indented, collapsible outline. OrgChart renders it as its narrow form.",
+    "Avatar — the mark in each box.",
+    "Badge — a status in a box's `extra` slot."
+  ],
+  "rules": [
+    2,
+    6,
+    23,
+    44,
+    45
+  ],
+  "storyPath": "data-display/OrgChart.stories.tsx",
+  "tagline": "An organization chart: boxes (avatar, name, title, extra) joined by CSS connector lines, top-down; `agent` nodes are dashed. Scrolls horizontally in its own named region when wider than its container, and turns into an indented Tree when the CONTAINER is under 40rem. APG tree view (tree/treeitem/group, roving tabindex, arrow keys).",
+  "usage": [
+    "DO mark AI agents with `variant: \"agent\"` — the box is dashed AND its accessible name ends in a localized \"AI agent\", so the kind is never carried by the stroke alone.",
+    "DO give it the width it has; the breakpoint is a container query, so a chart in a narrow side panel switches to the Tree form on a wide screen too.",
+    "DO retune boxes and lines through the --org-chart-* tokens (node size, gaps, line width/colour, agent border style).",
+    "DON'T wrap it in your own overflow-x scroller — it owns its scroll region, which only becomes a named tab stop when the chart actually overflows.",
+    "DON'T use it for an outline users expand and collapse — that is Tree. OrgChart always shows every node."
+  ],
+  "useCases": [
+    "A company or team org chart with people and AI agents side by side.",
+    "Reporting lines on an admin screen, falling back to an indented list in a narrow panel or on a phone."
+  ]
+}

package/agent/components-index.json

@@ -886,6 +886,11 @@
     "name": "ThoughtChain",
     "tagline": "The assistant's reasoning, step by step (Ant Design X ThoughtChain): an ORDERED list of steps, each with an ordinal or a glyph, a status, and a body it can collapse — where Ant X's own step is a <div onClick> with no role and no aria-expanded."
   },
+  {
+    "group": "data-display",
+    "name": "OrgChart",
+    "tagline": "An organization chart: boxes (avatar, name, title, extra) joined by CSS connector lines, top-down; `agent` nodes are dashed. Scrolls horizontally in its own named region when wider than its container, and turns into an indented Tree when the CONTAINER is under 40rem. APG tree view (tree/treeitem/group, roving tabindex, arrow keys)."
+  },
   {
     "group": "data-entry",
     "name": "Attachments",

package/agent/components.json

@@ -4808,7 +4808,7 @@
     ]
   },
   {
-    "example": "import { CodeBlock } from \"@godxjp/ui/data-display\";\n\n<CodeBlock maxHeight=\"sm\" language=\"json\" aria-label=\"Response body\">{body}</CodeBlock>\n<CodeBlock size=\"xs\" maxHeight=\"md\" aria-label=\"Console\">{consoleText}</CodeBlock>",
+    "example": "import { CodeBlock } from \"@godxjp/ui/data-display\";\n\n<CodeBlock maxHeight=\"sm\" language=\"json\" aria-label=\"Response body\">{body}</CodeBlock>\n<CodeBlock size=\"xs\" maxHeight=\"md\" aria-label=\"Console\">{consoleText}</CodeBlock>\n<CodeBlock copyable language=\"bash\">pnpm add @godxjp/ui</CodeBlock>",
     "group": "data-display",
     "importPath": "@godxjp/ui/data-display",
     "name": "CodeBlock",
@@ -4840,6 +4840,11 @@
         "name": "language",
         "type": "string"
       },
+      {
+        "description": "antd Typography's `copyable`, same name and semantics (gh#1032): a copy button in the block's inline-end corner. `true` copies the block's text content (highlighter spans included); `text` overrides it. The block reserves the button's column, the confirmed state is announced politely, and `onCopy` fires only after the clipboard write succeeds.",
+        "name": "copyable",
+        "type": "boolean | { text?: string | (() => string | Promise<string>); onCopy?: (event) => void; tooltips?: ReactNode | [ReactNode, ReactNode] | false; icon?: ReactNode | [ReactNode, ReactNode]; format?: \"text/plain\" | \"text/html\"; tabIndex?: number }"
+      },
       {
         "description": "Extra classes on the `pre`.",
         "name": "className",
@@ -4861,6 +4866,7 @@
       "DO cap the height of anything that can be large (a 64 KB response body, a console dump) with `maxHeight`; the page keeps its rhythm and the block scrolls.",
       "DON'T hand-roll `<pre className=\"max-h-64 overflow-auto rounded bg-muted p-2 whitespace-pre-wrap\">`: every one of those values is a copy of a token this component reads.",
       "DON'T reach for `Text as=\"code\"` for a block: that is inline monospace with no wrapping axis. Use `Text as=\"code\"` for an identifier inside a sentence, CodeBlock for a block.",
+      "DO use `copyable` for a command or snippet the reader will paste (gh#1032). DON'T hand-roll a copy Button next to or over a CodeBlock: `copyable` owns the clipboard call, the confirmed state, the placement and the polite announcement.",
       "DON'T use CodeBlock for a single value in a Descriptions row: `Descriptions.Item mono` owns that (it breaks the value, not the row).",
       "SYNTAX COLOUR (gh#784): CodeBlock does not highlight, but it DOES own the palette. Tag each span from your highlighter with `data-code-token` — the twelve names are Shiki createCssVariablesTheme's verbatim (comment, keyword, string, string-expression, function, constant, parameter, punctuation, link, inserted, deleted, changed, plus the block foreground) — and the package colours them. DON'T put `style={{ color }}` or a palette `className` on the spans: both are visual overrides, and the colour is not the consumer's to choose. Retheme with the `--code-block-token-*-color` knobs, which are role-mirrors, so light and dark follow the theme with no second palette."
     ],
@@ -15608,6 +15614,65 @@
       "ThoughtChainItem alone: the chip an assistant drops inline to name the tool it just reached for."
     ]
   },
+  {
+    "docPath": "data-display/org-chart.tsx",
+    "example": "import { Avatar, AvatarFallback, Badge, OrgChart } from \"@godxjp/ui/data-display\";\n\n<OrgChart\n  label=\"Company org chart\"\n  data={[\n    {\n      key: \"ceo\", name: \"Haruka Tanaka\", title: \"CEO\",\n      avatar: <Avatar size=\"sm\"><AvatarFallback>HT</AvatarFallback></Avatar>,\n      children: [\n        { key: \"cto\", name: \"Kenji Watanabe\", title: \"CTO\" },\n        { key: \"bot\", name: \"Review Agent\", title: \"Code review\", variant: \"agent\",\n          extra: <Badge tone=\"success\">Running</Badge> },\n      ],\n    },\n  ]}\n/>",
+    "group": "data-display",
+    "importPath": "@godxjp/ui/data-display",
+    "name": "OrgChart",
+    "props": [
+      {
+        "description": "The hierarchy: { key, name, title?, avatar?, extra?, variant?: \"person\" | \"agent\", children? }. `key` is unique across the chart. `avatar` is usually an <Avatar>; `extra` a Badge or status.",
+        "name": "data",
+        "type": "OrgChartNodeProp[]"
+      },
+      {
+        "description": "Replace a box's content. The box, its border, the connectors and the keyboard stay the library's; the narrow Tree form uses it too.",
+        "name": "renderNode",
+        "type": "(node: OrgChartNodeProp) => ReactNode"
+      },
+      {
+        "description": "Accessible name of the role=\"tree\" (a plain string). Localized default \"Organization chart\".",
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "description": "DOM id of the root.",
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "description": "Root class.",
+        "name": "className",
+        "type": "string"
+      }
+    ],
+    "related": [
+      "Tree — the indented, collapsible outline. OrgChart renders it as its narrow form.",
+      "Avatar — the mark in each box.",
+      "Badge — a status in a box's `extra` slot."
+    ],
+    "rules": [
+      2,
+      6,
+      23,
+      44,
+      45
+    ],
+    "storyPath": "data-display/OrgChart.stories.tsx",
+    "tagline": "An organization chart: boxes (avatar, name, title, extra) joined by CSS connector lines, top-down; `agent` nodes are dashed. Scrolls horizontally in its own named region when wider than its container, and turns into an indented Tree when the CONTAINER is under 40rem. APG tree view (tree/treeitem/group, roving tabindex, arrow keys).",
+    "usage": [
+      "DO mark AI agents with `variant: \"agent\"` — the box is dashed AND its accessible name ends in a localized \"AI agent\", so the kind is never carried by the stroke alone.",
+      "DO give it the width it has; the breakpoint is a container query, so a chart in a narrow side panel switches to the Tree form on a wide screen too.",
+      "DO retune boxes and lines through the --org-chart-* tokens (node size, gaps, line width/colour, agent border style).",
+      "DON'T wrap it in your own overflow-x scroller — it owns its scroll region, which only becomes a named tab stop when the chart actually overflows.",
+      "DON'T use it for an outline users expand and collapse — that is Tree. OrgChart always shows every node."
+    ],
+    "useCases": [
+      "A company or team org chart with people and AI agents side by side.",
+      "Reporting lines on an admin screen, falling back to an indented list in a narrow panel or on a phone."
+    ]
+  },
   {
     "docPath": "data-entry/attachments.tsx",
     "example": "import { Attachments } from \"@godxjp/ui/data-entry\";\n\n<Attachments\n  items={files}\n  onChange={({ fileList }) => setFiles(fileList)}\n  overflow=\"scrollX\"\n  maxCount={5}\n/>",

package/agent/index.json

@@ -1,16 +1,16 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 176,
+    "components": 177,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2080,
+    "tokens": 2098,
     "vocabulary": 14
   },
   "files": [
     {
       "file": "components-index.json",
-      "note": "47 KB — name + group + tagline for all 176. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "47 KB — name + group + tagline for all 177. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.4.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.5.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1765,
+      "component": 1783,
       "foundation": 211,
       "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.4.0"
+  "version": "31.5.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 176 components, 2080 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.4.0.
+> A Japanese-enterprise React design system: 177 components, 2098 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.5.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.4.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.5.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,10 +15,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 176 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 177 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–35 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1765 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1783 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.4.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.5.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -9221,6 +9221,114 @@
     "tier": "component",
     "value": "0.7"
   },
+  {
+    "description": "The box. A fixed inline size, so siblings line up in even columns and the connector bus has a predictable pitch; long names wrap inside it instead of widening one box.",
+    "name": "--org-chart-node-inline-size",
+    "tier": "component",
+    "value": "13rem"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-node-padding-block",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-node-padding-inline",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-node-gap",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-node-text-gap",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
+  {
+    "description": "gh#888 — φ tier freezes at :root; default = var(--radius)",
+    "name": "--org-chart-node-radius",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = var(--stroke-hairline)",
+    "name": "--org-chart-node-border-width",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--border))",
+    "name": "--org-chart-node-border-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--card))",
+    "name": "--org-chart-node-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--card-foreground))",
+    "name": "--org-chart-node-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--muted-foreground))",
+    "name": "--org-chart-node-title-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-node-font-size",
+    "tier": "component",
+    "value": "var(--font-size-sm, var(--font-size-base))"
+  },
+  {
+    "description": "The `agent` variant's stroke style. A dashed edge, not a second colour — the difference must survive greyscale, and the sr-only \"AI agent\" carries it for a screen reader.",
+    "name": "--org-chart-agent-border-style",
+    "tier": "component",
+    "value": "dashed"
+  },
+  {
+    "description": "Spacing of the tree itself: the vertical run between a parent and its children's row, and the gutter between two siblings. The connector is drawn inside these gaps, half above the bus and half below it.",
+    "name": "--org-chart-level-gap",
+    "tier": "component",
+    "value": "var(--space-8)"
+  },
+  {
+    "description": "ORG CHART — boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.",
+    "name": "--org-chart-sibling-gap",
+    "tier": "component",
+    "value": "var(--space-4)"
+  },
+  {
+    "description": "The connector. default = var(--stroke-hairline)",
+    "name": "--org-chart-line-width",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--border))",
+    "name": "--org-chart-line-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Room around the chart inside its scroll region, so an edge box's focus ring is not clipped.",
+    "name": "--org-chart-padding",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
   {
     "description": "`thin` reproduces the old 10px rail closely on the platforms that draw a classic scrollbar; `auto` gives the full-width platform bar, which is what a touch/coarse-pointer console wants. Only `auto | thin | none` are valid — a length is not (that is the standard property's whole bargain, and the reason `--scroll-area-bar-size` could not survive as a rem).",
     "name": "--scroll-area-scrollbar-width",

package/dist/components/data-display/code-block.js

@@ -1,15 +1,96 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Check, Copy, LoaderCircle } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, style, ...rest }, ref) {
+import { Button } from "../general/button.js";
+import {
+  ActionTooltip,
+  COPIED_RESET_MS,
+  getNode,
+  toCopyConfigList,
+  useMergedConfig,
+  writeClipboard
+} from "../general/typography.js";
+function CodeBlockCopy({
+  config,
+  codeRef
+}) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = React.useState(false);
+  const [copyLoading, setCopyLoading] = React.useState(false);
+  const copyTimer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  const onCopyClick = async (event) => {
+    setCopyLoading(true);
+    try {
+      const configured = typeof config.text === "function" ? await config.text() : config.text;
+      await writeClipboard(configured || codeRef.current?.textContent || "", config.format);
+      setCopyLoading(false);
+      setCopied(true);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+      config.onCopy?.(event);
+    } catch {
+      setCopyLoading(false);
+    }
+  };
+  const copyLabels = toCopyConfigList(config.tooltips);
+  const copyIcons = toCopyConfigList(config.icon);
+  const systemCopyLabel = copied ? t("ui.codeBlock.copied") : t("ui.codeBlock.copy");
+  const copyTitle = getNode(copyLabels[copied ? 1 : 0], systemCopyLabel);
+  const copyAriaLabel = typeof copyTitle === "string" ? copyTitle : systemCopyLabel;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ActionTooltip, { title: copyTitle, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        "data-slot": "code-block-copy",
+        "data-state": copied ? "copied" : "idle",
+        "aria-label": copyAriaLabel,
+        tabIndex: config.tabIndex,
+        onClick: onCopyClick,
+        className: "ui-code-block-copy",
+        children: copied ? getNode(copyIcons[1], /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), true) : getNode(
+          copyIcons[0],
+          copyLoading ? /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+          true
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "code-block-status", children: copied ? t("ui.codeBlock.copiedAnnounce") : "" })
+  ] });
+}
+const CodeBlock = React.forwardRef(function CodeBlock2({
+  children,
+  wrap = true,
+  maxHeight = "none",
+  size = "sm",
+  language,
+  copyable,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const [enableCopy, copyConfig] = useMergedConfig(copyable);
+  const codeRef = React.useRef(null);
   const scrolls = maxHeight !== "none" || !wrap;
-  return /* @__PURE__ */ jsx(
+  const pre = /* @__PURE__ */ jsx(
     "pre",
     {
       ref,
       "data-slot": "code-block",
       "data-wrap": wrap ? void 0 : "false",
       "data-max-height": typeof maxHeight === "string" && maxHeight !== "none" ? maxHeight : void 0,
+      "data-copyable": enableCopy ? "" : void 0,
       style: {
         ...style,
         ...typeof maxHeight === "object" ? { maxBlockSize: maxHeight.value, overflow: "auto" } : void 0
@@ -19,9 +100,14 @@ const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true,
       tabIndex: scrolls ? 0 : void 0,
       className: cn("ui-code-block", className),
       ...rest,
-      children: /* @__PURE__ */ jsx("code", { children })
+      children: /* @__PURE__ */ jsx("code", { ref: codeRef, children })
     }
   );
+  if (!enableCopy) return pre;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "code-block-frame", className: "ui-code-block-frame", children: [
+    pre,
+    /* @__PURE__ */ jsx(CodeBlockCopy, { config: copyConfig, codeRef })
+  ] });
 });
 export {
   CodeBlock

package/dist/components/data-display/index.d.ts

@@ -53,6 +53,8 @@ export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
 export { Tree } from "./tree.js";
 export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";
+export { OrgChart } from "./org-chart.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProps, } from "./org-chart.js";
 export { Welcome } from "./welcome.js";
 export type { WelcomeProp, WelcomeProps, WelcomeVariantProp } from "./welcome.js";
 export { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";

package/dist/components/data-display/index.js

@@ -60,6 +60,7 @@ import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
 import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 import { Tree } from "./tree.js";
+import { OrgChart } from "./org-chart.js";
 import { Welcome } from "./welcome.js";
 import { ThoughtChain, ThoughtChainItem } from "./thought-chain.js";
 export {
@@ -103,6 +104,7 @@ export {
   Legend,
   ListRow,
   Marquee,
+  OrgChart,
   PermissionMatrix,
   Popover,
   PopoverAnchor,

package/dist/components/data-display/org-chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { OrgChartProp } from "../../props/components/data-display.prop.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProp as OrgChartProps, } from "../../props/components/data-display.prop.js";
+/** `ref` reaches the root `<div>` — the container the breakpoint is measured against. */
+export declare const OrgChart: React.ForwardRefExoticComponent<OrgChartProp & React.RefAttributes<HTMLDivElement>>;