@godxjp/ui 31.3.0 → 31.5.0

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/dist/tokens/components/segmented.css

@@ -46,4 +46,8 @@
   --segmented-count-gap: var(--space-1);
   --segmented-count-background: initial;
   --segmented-count-color: initial;
+  --segmented-count-selected-background: initial;
+  --segmented-count-selected-background-alpha: initial;
+  --segmented-count-selected-color: initial;
+  --segmented-count-forced-outline-width: initial;
 }

package/dist/tokens/semantic/layout.css

@@ -51,6 +51,8 @@
   --page-footer-pad-block-end: var(--space-stack-md);
   --page-header-divider: none;
 
+  --page-header-extra-max-measure: initial;
+
   --page-toolbar-background: transparent;
   --page-toolbar-pad-block: 0px;
   --page-toolbar-divider: initial;

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/data-entry/segmented.tsx

@@ -90,6 +90,8 @@ export default function Demo() {
             <CardDescription>
               一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
               ます。ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+              件数は Tabs と同じ扱いで、選択中の項目だけ強調し、ほかは控えめな色です。0 件を隠す
+              ときは `showZero: false`。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/navigation/tabs.tsx

@@ -146,6 +146,7 @@ export default function Demo() {
     },
   ]);
   const [editableTab, setEditableTab] = useState("je-0042");
+  const [inboxStatus, setInboxStatus] = useState("open");
 
   return (
     <PageContainer
@@ -646,6 +647,50 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* STRIP-ONLY (gh#1021). The strip drives a region OUTSIDE the Tabs, so no tabpanel is
+            rendered and the view below is never remounted by a tab switch. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              controls · strip only (switches a region outside the tabs)
+            </CardTitle>
+            <CardDescription>
+              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="Status"
+                controls="tabs-inbox-view"
+                variant="line"
+                value={inboxStatus}
+                onValueChange={setInboxStatus}
+                items={[
+                  { 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="Threads">
+                <Text as="p">Showing: {inboxStatus}</Text>
+              </section>
+              <Tabs aria-label="Saved views" controls="tabs-inbox-view" defaultValue="mine">
+                <TabsList variant="line">
+                  <TabsTrigger value="mine" count={4} countLabel="threads">
+                    Mine
+                  </TabsTrigger>
+                  <TabsTrigger value="all" count={143} countLabel="threads">
+                    All
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>indicator · animated</CardTitle>

package/docs/query/data-state.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import {
   Badge,
@@ -13,7 +13,7 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import { SkeletonTable } from "@godxjp/ui/feedback";
-import { Text } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { AuthExpiryProvider, DataState } from "@godxjp/ui/query";
 
@@ -51,15 +51,34 @@ function SuccessBlock() {
   );
 }
 
+/** Loads for 2s and comes back empty — the whole lifecycle: skeleton → EmptyState. */
+const LOAD_MS = 2000;
+
 function LoadingBlock() {
+  const client = useQueryClient();
   const query = useQuery({
     queryKey: ["ds-loading"],
-    queryFn: () => new Promise<Invoice[]>(() => {}),
+    queryFn: () => new Promise<Invoice[]>((resolve) => setTimeout(() => resolve([]), LOAD_MS)),
   });
   return (
-    <DataState query={query} skeleton={<SkeletonTable />}>
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
+    <Flex direction="col" gap="sm">
+      <DataState
+        query={query}
+        skeleton={<SkeletonTable rows={4} columns={3} />}
+        isEmpty={(d) => d.length === 0}
+        empty={<EmptyState title="No invoices" description="No invoice matches the filter." />}
+      >
+        {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+      </DataState>
+      {/* resetQueries puts the query back to pending, so the skeleton plays again. */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
+      >
+        Load again
+      </Button>
+    </Flex>
   );
 }
 
@@ -174,8 +193,11 @@ export default function Demo() {
 
           <Card>
             <CardHeader>
-              <CardTitle level={2}>Loading (skeleton)</CardTitle>
-              <CardDescription>The skeleton prop renders during the pending phase.</CardDescription>
+              <CardTitle level={2}>Loading → empty</CardTitle>
+              <CardDescription>
+                The skeleton (animated) renders while pending; when the data arrives empty the
+                skeleton goes away and the `empty` slot renders.
+              </CardDescription>
             </CardHeader>
             <CardContent flush>
               <LoadingBlock />

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

@@ -367,19 +367,14 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
   neutral: "bg-muted-foreground",
 };
 
-// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
-// the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
-// raw `<span className="flex …">`, i.e. utility layout.
-function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
+// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row takes
+// `as="span"`. The count is the trigger's own `count` slot (gh#1021), drawn exactly as the `items`
+// API draws it, rather than a hand-placed Badge.
+function ViewTrigger({ view }: { view: SavedView }) {
   return (
     <Flex as="span" align="center" gap="sm">
       <span aria-hidden="true" className={`size-2 rounded-full ${DOT_CLASS[view.dot]}`} />
       <span>{view.label}</span>
-      <Badge as="span" tone="neutral" shape="pill">
-        <Text as="span" size="2xs" weight="medium" tabular>
-          {count}
-        </Text>
-      </Badge>
     </Flex>
   );
 }
@@ -432,23 +427,30 @@ export default function Demo() {
       }
     >
       <Flex direction="col" gap="md">
-        {/* Saved-view ribbon — controlled Tabs; switching swaps the preset below. */}
-        <Tabs value={view} onValueChange={(v) => setView(v as ViewId)}>
+        {/* 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="Saved views"
+          controls="attendance-grid"
+          value={view}
+          onValueChange={(v) => setView(v as ViewId)}
+        >
           <TabsList variant="line" className="h-auto w-full flex-wrap justify-start border-b">
             {VIEWS.map((v) => (
               <TabsTrigger
                 key={v.id}
                 value={v.id}
+                count={counts[v.id]}
                 className="rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
               >
-                <ViewTrigger view={v} count={counts[v.id]} />
+                <ViewTrigger view={v} />
               </TabsTrigger>
             ))}
           </TabsList>
         </Tabs>
 
         {/* The grid — columns + data both come from the active saved view. */}
-        <Card>
+        <Card id="attendance-grid" role="region" aria-label={active.label}>
           <CardContent flush>
             <DataTable
               data={rows}

package/docs/themes/flat.css

@@ -235,7 +235,9 @@
   --conversations-item-active-background: hsl(220 20% 90%);
   --conversations-item-active-color: hsl(220 26% 12%);
   --tabs-count-active-background: hsl(220 20% 86%);
+  --segmented-count-selected-background: hsl(220 20% 86%);
   --tabs-count-active-color: hsl(220 26% 12%);
+  --segmented-count-selected-color: hsl(220 26% 12%);
   --toggle-soft-hover-background: hsl(220 16% 90%);
   --toggle-pressed-count-background: hsl(220 20% 84%);
   --toggle-pressed-count-color: hsl(220 26% 12%);
@@ -419,7 +421,9 @@
   --conversations-item-active-background: hsl(220 16% 22%);
   --conversations-item-active-color: hsl(220 20% 94%);
   --tabs-count-active-background: hsl(220 16% 26%);
+  --segmented-count-selected-background: hsl(220 16% 26%);
   --tabs-count-active-color: hsl(220 20% 94%);
+  --segmented-count-selected-color: hsl(220 20% 94%);
   --toggle-soft-hover-background: hsl(220 14% 22%);
   --toggle-pressed-count-background: hsl(220 16% 26%);
   --toggle-pressed-count-color: hsl(220 20% 94%);

package/docs/themes/glassmorphism.css

@@ -613,7 +613,9 @@
   --conversations-item-active-background-alpha: 18%;
   --conversations-item-active-color: hsl(var(--glass-ink));
   --tabs-count-active-background-alpha: 24%;
+  --segmented-count-selected-background-alpha: 24%;
   --tabs-count-active-color: hsl(var(--glass-ink));
+  --segmented-count-selected-color: hsl(var(--glass-ink));
   --toggle-pressed-count-background-alpha: 26%;
   --toggle-pressed-count-color: hsl(var(--glass-ink));
   --toggle-pressed-border-color-alpha: 45%;

package/docs/themes/neubrutalism.css

@@ -279,7 +279,9 @@
   --conversations-item-active-background: hsl(48 90% 78%);
   --conversations-item-active-color: hsl(0 0% 0%);
   --tabs-count-active-background: hsl(48 90% 74%);
+  --segmented-count-selected-background: hsl(48 90% 74%);
   --tabs-count-active-color: hsl(0 0% 0%);
+  --segmented-count-selected-color: hsl(0 0% 0%);
   --toggle-soft-hover-background: hsl(48 90% 84%);
   --toggle-pressed-count-background: hsl(48 90% 74%);
   --toggle-pressed-count-color: hsl(0 0% 0%);
@@ -331,6 +333,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 78%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 74%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 74%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 84%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 74%);
   }
@@ -423,7 +426,9 @@
   --conversations-item-active-background: hsl(48 90% 26%);
   --conversations-item-active-color: hsl(0 0% 100%);
   --tabs-count-active-background: hsl(48 90% 26%);
+  --segmented-count-selected-background: hsl(48 90% 26%);
   --tabs-count-active-color: hsl(0 0% 100%);
+  --segmented-count-selected-color: hsl(0 0% 100%);
   --toggle-soft-hover-background: hsl(48 90% 24%);
   --toggle-pressed-count-background: hsl(48 90% 26%);
   --toggle-pressed-count-color: hsl(0 0% 100%);
@@ -469,6 +474,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 24%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 26%);
   }

package/package.json

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