@godxjp/ui 31.4.0 → 31.5.0

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.4.0",
+  "version": "31.5.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -349,6 +349,9 @@
     },
     "CodeBlock": {
       "layers": [
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "data-display-layout.css"
       ]
     },
@@ -673,6 +676,16 @@
         "control.css"
       ]
     },
+    "OrgChart": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "table-layout.css",
+        "alert-layout.css",
+        "data-display-layout.css",
+        "form-layout.css"
+      ]
+    },
     "OrgSwitcher": {
       "layers": [
         "shell-layout.css",

package/dist/tokens/base.css

@@ -38,6 +38,7 @@
 @import "./components/text.css";
 @import "./components/tree.css";
 @import "./components/thought-chain.css";
+@import "./components/org-chart.css";
 @import "./components/welcome.css";
 @import "./components/actions.css";
 @import "./components/attachments.css";

package/dist/tokens/components/org-chart.css

@@ -0,0 +1,27 @@
+
+
+:root {
+
+  --org-chart-node-inline-size: 13rem;
+  --org-chart-node-padding-block: var(--space-3);
+  --org-chart-node-padding-inline: var(--space-3);
+  --org-chart-node-gap: var(--space-3);
+  --org-chart-node-text-gap: var(--space-1);
+  --org-chart-node-radius: initial;
+  --org-chart-node-border-width: initial;
+  --org-chart-node-border-color: initial;
+  --org-chart-node-background: initial;
+  --org-chart-node-foreground: initial;
+  --org-chart-node-title-color: initial;
+  --org-chart-node-font-size: var(--font-size-sm, var(--font-size-base));
+
+  --org-chart-agent-border-style: dashed;
+
+  --org-chart-level-gap: var(--space-8);
+  --org-chart-sibling-gap: var(--space-4);
+
+  --org-chart-line-width: initial;
+  --org-chart-line-color: initial;
+
+  --org-chart-padding: var(--space-2);
+}

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **176**
-- With ≥1 frame: **152** · zero-frame: **24**
+- Public components: **177**
+- With ≥1 frame: **153** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -211,6 +211,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Welcome | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Actions | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ThoughtChain | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| OrgChart | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Attachments | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | Marquee | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Masonry | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/code-block.tsx

@@ -84,6 +84,33 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Copyable (gh#1032)</CardTitle>
+            <CardDescription>
+              antd Typography&apos;s copyable, same name and semantics. The button sits in the
+              inline-end corner, the block reserves that column so no line runs under it, and the
+              copy is announced politely. Pass copyable.text to copy something other than the
+              block&apos;s text content; the button stays in its corner while the block scrolls.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CodeBlock copyable language="bash" aria-label="Install command">
+                pnpm add @godxjp/ui
+              </CodeBlock>
+              <CodeBlock
+                copyable={{ tooltips: ["Copy response", "Copied"] }}
+                maxHeight="sm"
+                language="json"
+                aria-label="Response body with a copy button"
+              >
+                {responseBody}
+              </CodeBlock>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Syntax colour · the package owns the palette (gh#784)</CardTitle>

package/docs/data-display/org-chart.tsx

@@ -0,0 +1,165 @@
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  OrgChart,
+  type OrgChartNodeProp,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Bot, Building2, Settings, Users } from "lucide-react";
+
+/**
+ * OrgChart — who reports to whom, people and AI agents on one chart (gh#1034).
+ *
+ * Three levels: the CEO, three department heads, and their reports, two of which are AI agents.
+ * An agent's box is dashed and its accessible name ends in "AI agent", so the difference is never
+ * the stroke alone. The chart is an APG tree view: Tab lands on one box, the arrow keys walk it.
+ *
+ * Narrow the preview: under 40rem of CONTAINER width the same data turns into an indented Tree.
+ * The second card is deliberately narrow to show that form beside the wide one.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "Organization",
+    items: [
+      { id: "chart", label: "Org chart", icon: Building2 },
+      { id: "members", label: "Members", icon: Users },
+      { id: "agents", label: "Agents", icon: Bot },
+    ],
+  },
+  { label: "Admin", items: [{ id: "settings", label: "Settings", icon: Settings }] },
+];
+
+const mark = (initials: string) => (
+  <Avatar size="sm">
+    <AvatarFallback>{initials}</AvatarFallback>
+  </Avatar>
+);
+
+const agentMark = (
+  <Avatar size="sm" appearance="tinted">
+    <AvatarFallback>
+      <Bot aria-hidden="true" />
+    </AvatarFallback>
+  </Avatar>
+);
+
+const org: OrgChartNodeProp[] = [
+  {
+    key: "ceo",
+    name: "Haruka Tanaka",
+    title: "Chief Executive Officer",
+    avatar: mark("HT"),
+    children: [
+      {
+        key: "cto",
+        name: "Kenji Watanabe",
+        title: "Chief Technology Officer",
+        avatar: mark("KW"),
+        children: [
+          {
+            key: "review-agent",
+            name: "Review Agent",
+            title: "Code review · pull requests",
+            variant: "agent",
+            avatar: agentMark,
+            extra: <Badge tone="success">Running</Badge>,
+          },
+          {
+            key: "platform",
+            name: "Mai Suzuki",
+            title: "Platform Lead",
+            avatar: mark("MS"),
+          },
+        ],
+      },
+      {
+        key: "coo",
+        name: "Daniel Park",
+        title: "Chief Operating Officer",
+        avatar: mark("DP"),
+        children: [
+          {
+            key: "support-agent",
+            name: "Support Agent",
+            title: "Tier-1 customer support",
+            variant: "agent",
+            avatar: agentMark,
+            extra: <Badge tone="warning">Paused</Badge>,
+          },
+          {
+            key: "ops",
+            name: "Linh Nguyen",
+            title: "Operations Manager",
+            avatar: mark("LN"),
+          },
+        ],
+      },
+      {
+        key: "cfo",
+        name: "Sofia Rossi",
+        title: "Chief Financial Officer",
+        avatar: mark("SR"),
+        children: [
+          {
+            key: "controller",
+            name: "Takumi Ito",
+            title: "Financial Controller",
+            avatar: mark("TI"),
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default function OrgChartDoc() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chart"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "Admin", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={<Topbar />}
+    >
+      <PageContainer
+        title="Org chart"
+        subtitle="OrgChart · people and AI agents, top-down. Dashed boxes are agents."
+      >
+        <Card>
+          <CardContent>
+            <OrgChart data={org} label="Company org chart" />
+          </CardContent>
+        </Card>
+
+        {/* THE NARROW FORM: the same data under 40rem of container width. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            narrow container · the same data as a Tree
+          </Text>
+          <Card className="max-w-sm">
+            <CardContent>
+              <OrgChart data={org} label="Company org chart (list)" />
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/navigation/tabs.tsx

@@ -651,37 +651,39 @@ export default function Demo() {
             rendered and the view below is never remounted by a tab switch. */}
         <Card>
           <CardHeader>
-            <CardTitle level={2}>controls · タブ列だけ(外部の領域を切り替える)</CardTitle>
+            <CardTitle level={2}>
+              controls · strip only (switches a region outside the tabs)
+            </CardTitle>
             <CardDescription>
-              controls に外部領域の id を渡すと tabpanel を描かず、選択中のタブの aria-controls
-              がその領域を指す。領域は Tabs の外にあるのでタブを切り替えても再マウントされない。
-              compound の TabsTrigger も items と同じ count を描く。
+              Pass the id of an outside region to controls: no tabpanel is rendered and the selected
+              tab's aria-controls points at that region. The region lives outside Tabs, so switching
+              tabs never remounts it. A compound TabsTrigger draws the same count as items.
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
               <Tabs
-                aria-label="対応状況"
+                aria-label="Status"
                 controls="tabs-inbox-view"
                 variant="line"
                 value={inboxStatus}
                 onValueChange={setInboxStatus}
                 items={[
-                  { value: "open", label: "未対応", count: 12, countLabel: "件" },
-                  { value: "doing", label: "対応中", count: 3, countLabel: "件" },
-                  { value: "done", label: "完了", count: 128, countLabel: "件" },
+                  { value: "open", label: "Open", count: 12, countLabel: "threads" },
+                  { value: "doing", label: "In progress", count: 3, countLabel: "threads" },
+                  { value: "done", label: "Done", count: 128, countLabel: "threads" },
                 ]}
               />
-              <section id="tabs-inbox-view" aria-label="スレッド一覧">
-                <Text as="p">表示中: {inboxStatus}</Text>
+              <section id="tabs-inbox-view" aria-label="Threads">
+                <Text as="p">Showing: {inboxStatus}</Text>
               </section>
-              <Tabs aria-label="保存ビュー" controls="tabs-inbox-view" defaultValue="mine">
+              <Tabs aria-label="Saved views" controls="tabs-inbox-view" defaultValue="mine">
                 <TabsList variant="line">
-                  <TabsTrigger value="mine" count={4} countLabel="件">
-                    自分の担当
+                  <TabsTrigger value="mine" count={4} countLabel="threads">
+                    Mine
                   </TabsTrigger>
-                  <TabsTrigger value="all" count={143} countLabel="件">
-                    すべて
+                  <TabsTrigger value="all" count={143} countLabel="threads">
+                    All
                   </TabsTrigger>
                 </TabsList>
               </Tabs>

package/docs/query/data-state.tsx

@@ -66,9 +66,7 @@ function LoadingBlock() {
         query={query}
         skeleton={<SkeletonTable rows={4} columns={3} />}
         isEmpty={(d) => d.length === 0}
-        empty={
-          <EmptyState title="データがありません" description="条件に合う請求書はありません。" />
-        }
+        empty={<EmptyState title="No invoices" description="No invoice matches the filter." />}
       >
         {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
       </DataState>
@@ -78,7 +76,7 @@ function LoadingBlock() {
         size="sm"
         onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
       >
-        もう一度読み込む
+        Load again
       </Button>
     </Flex>
   );

package/docs/showcase/table-view-tabs.tsx

@@ -430,7 +430,7 @@ export default function Demo() {
         {/* Saved-view ribbon — controlled, strip-only Tabs (gh#1021): `controls` points the
             selected tab at the grid below, which lives outside the Tabs and is never remounted. */}
         <Tabs
-          aria-label="保存ビュー"
+          aria-label="Saved views"
           controls="attendance-grid"
           value={view}
           onValueChange={(v) => setView(v as ViewId)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.4.0",
-  "godxUiMcp": "31.4.0",
+  "version": "31.5.0",
+  "godxUiMcp": "31.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",