@godxjp/ui 31.4.0 → 31.6.0

package/agent/index.json

@@ -1,21 +1,21 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 176,
+    "components": 177,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2080,
+    "tokens": 2099,
     "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"
     },
     {
       "file": "components/<Name>.json",
-      "note": "One file per component (1 KB–35 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.2 MB blob.",
+      "note": "One file per component (1 KB–36 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.2 MB blob.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/<Name>.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.6.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": 1784,
       "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.6.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, 2099 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.6.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.6.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/&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-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–36 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, 1784 `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.6.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",
@@ -12083,6 +12191,12 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Label of a node `filterTreeNode` matched (antd `.filter-node` title: primary colour, strong weight). A role mirror, so `initial` with the role at the call site. Documented default: --tree-node-filter-foreground = hsl(var(--text-brand, var(--primary))).",
+    "name": "--tree-node-filter-foreground",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Width of the indeterminate bar shown while `loadData` resolves a branch. A fraction, not a length: it has to read as \"part of a row\" at every row width and every density.",
     "name": "--tree-loading-bar-inline-size",

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/data-table.d.ts

@@ -175,6 +175,9 @@ export declare namespace DataTable {
         label?: React.ReactNode;
     }) => React.JSX.Element | null;
     export var SelectAll: () => React.JSX.Element | null;
+    export var SELECTION_ALL: "SELECT_ALL";
+    export var SELECTION_INVERT: "SELECT_INVERT";
+    export var SELECTION_NONE: "SELECT_NONE";
     export var BulkActions: ({ count, children, className, }: BulkActionsProps) => React.JSX.Element | null;
     export var DensityToggle: () => React.JSX.Element;
     export var Content: () => React.JSX.Element;