@godxjp/ui 19.1.0 → 19.3.1

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

@@ -0,0 +1,488 @@
+/**
+ * Showcase · table-view-tabs — 保存ビュー (V7)
+ *
+ * Saved-view ribbon over a 勤怠 (attendance) DataTable. Each saved view is a tab
+ * with a colored signal dot + a count pill. Switching the active view swaps
+ * the DataTable PRESET: it re-filters the rows AND changes which columns are
+ * shown (e.g. the 「要承認」 view surfaces an 申請者/申請時刻 column the default
+ * 「全件」 view hides, while 「遅刻・早退」 surfaces a 差異(分) column).
+ *
+ * Composition map (intent → real @godxjp/ui primitive):
+ *   page chrome ............ PageContainer (title + subtitle + extra actions)
+ *   saved-view ribbon ...... Tabs (controlled) + TabsList + TabsTrigger
+ *                            each trigger = colored dot (Badge tone, dot) + label + count pill
+ *   the grid ............... DataTable (per-view columns + filtered data)
+ *   status cells ........... Badge tone (fixed signaling) / Badge status
+ *   bulk + density ......... DataTable.Toolbar / BulkActions / DensityToggle
+ *   pager .................. DataTable.Pagination
+ *
+ * DNA: compact density, tabular-nums on time/number columns, fixed color
+ * signaling (success 若竹 / warning 山吹 / attention→destructive / info 群青),
+ * small headings, quiet JP copy, no emoji.
+ */
+import * as React from "react";
+import { Download, RefreshCw, Check, X } from "lucide-react";
+
+import { Button, Text } from "@godxjp/ui/general";
+import { Badge, Card, CardContent, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { Tabs, TabsList, TabsTrigger } from "@godxjp/ui/navigation";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { SortStateProp } from "@godxjp/ui/props";
+
+// ── Domain model ──────────────────────────────────────────────────────────────
+
+type AttendanceStatus = "approved" | "pending" | "late" | "early" | "absent";
+
+type Attendance = {
+  id: string;
+  date: string; // MM/DD (火)
+  employee: string;
+  dept: string;
+  clockIn: string; // HH:mm or "—"
+  clockOut: string; // HH:mm or "—"
+  workMin: number; // 実働(分)
+  status: AttendanceStatus;
+  applicant: string; // 申請者 (承認待ちのみ)
+  appliedAt: string; // 申請時刻
+  varianceMin: number; // 遅刻/早退の差異(分) — 遅刻=+, 早退=-
+};
+
+// 状態 → Badge tone (fixed-mapping, never remap).
+const STATUS_LABEL: Record<AttendanceStatus, string> = {
+  approved: "承認済",
+  pending: "承認待ち",
+  late: "遅刻",
+  early: "早退",
+  absent: "欠勤",
+};
+
+const STATUS_TONE: Record<AttendanceStatus, "success" | "warning" | "destructive" | "info"> = {
+  approved: "success", // 若竹
+  pending: "warning", // 山吹
+  late: "destructive", // 朱(注意) — 非破壊だが要対応
+  early: "info", // 群青
+  absent: "destructive", // 茜
+};
+
+// ── Mock 勤怠 data (Saitama 倉庫部 / 配送部 / 事務部) ─────────────────────────────
+
+const RECORDS: Attendance[] = [
+  {
+    id: "ATT-0512",
+    date: "06/03 (火)",
+    employee: "佐藤 真琴",
+    dept: "倉庫部",
+    clockIn: "08:58",
+    clockOut: "18:02",
+    workMin: 484,
+    status: "approved",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: 0,
+  },
+  {
+    id: "ATT-0511",
+    date: "06/03 (火)",
+    employee: "鈴木 大輔",
+    dept: "配送部",
+    clockIn: "09:14",
+    clockOut: "18:05",
+    workMin: 471,
+    status: "late",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: 14,
+  },
+  {
+    id: "ATT-0510",
+    date: "06/03 (火)",
+    employee: "高橋 恵",
+    dept: "事務部",
+    clockIn: "09:00",
+    clockOut: "16:40",
+    workMin: 400,
+    status: "early",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: -80,
+  },
+  {
+    id: "ATT-0509",
+    date: "06/03 (火)",
+    employee: "田中 涼介",
+    dept: "倉庫部",
+    clockIn: "08:55",
+    clockOut: "—",
+    workMin: 0,
+    status: "pending",
+    applicant: "田中 涼介",
+    appliedAt: "06/03 18:21",
+    varianceMin: 0,
+  },
+  {
+    id: "ATT-0508",
+    date: "06/03 (火)",
+    employee: "伊藤 美咲",
+    dept: "配送部",
+    clockIn: "—",
+    clockOut: "—",
+    workMin: 0,
+    status: "absent",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: 0,
+  },
+  {
+    id: "ATT-0507",
+    date: "06/02 (月)",
+    employee: "渡辺 健",
+    dept: "事務部",
+    clockIn: "09:02",
+    clockOut: "18:00",
+    workMin: 478,
+    status: "pending",
+    applicant: "渡辺 健",
+    appliedAt: "06/02 18:33",
+    varianceMin: 0,
+  },
+  {
+    id: "ATT-0506",
+    date: "06/02 (月)",
+    employee: "山本 千尋",
+    dept: "倉庫部",
+    clockIn: "09:21",
+    clockOut: "18:10",
+    workMin: 469,
+    status: "late",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: 21,
+  },
+  {
+    id: "ATT-0505",
+    date: "06/02 (月)",
+    employee: "中村 蓮",
+    dept: "配送部",
+    clockIn: "08:50",
+    clockOut: "17:20",
+    workMin: 450,
+    status: "early",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: -40,
+  },
+  {
+    id: "ATT-0504",
+    date: "06/02 (月)",
+    employee: "小林 葵",
+    dept: "事務部",
+    clockIn: "08:57",
+    clockOut: "18:01",
+    workMin: 484,
+    status: "approved",
+    applicant: "—",
+    appliedAt: "—",
+    varianceMin: 0,
+  },
+  {
+    id: "ATT-0503",
+    date: "06/02 (月)",
+    employee: "加藤 直樹",
+    dept: "倉庫部",
+    clockIn: "09:05",
+    clockOut: "—",
+    workMin: 0,
+    status: "pending",
+    applicant: "加藤 直樹",
+    appliedAt: "06/02 19:02",
+    varianceMin: 0,
+  },
+];
+
+// 実働(分) → 8:04 形式
+const hm = (min: number) => {
+  if (min <= 0) return "—";
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  return `${h}:${String(m).padStart(2, "0")}`;
+};
+
+// ── Reusable column fragments ───────────────────────────────────────────────────
+
+const statusCell: ColumnDef<Attendance> = {
+  key: "status",
+  header: "状態",
+  align: "center",
+  render: (row) => (
+    <Badge tone={STATUS_TONE[row.status]} variant="outline">
+      {STATUS_LABEL[row.status]}
+    </Badge>
+  ),
+};
+
+const employeeCol: ColumnDef<Attendance> = {
+  key: "employee",
+  header: "従業員",
+  sortable: true,
+  render: (row) => (
+    <Flex direction="col" gap="xs">
+      <Text size="sm" weight="medium">
+        {row.employee}
+      </Text>
+      <Text size="2xs" tone="muted">
+        {row.dept}
+      </Text>
+    </Flex>
+  ),
+};
+
+const dateCol: ColumnDef<Attendance> = {
+  key: "date",
+  header: "日付",
+  width: "w-28",
+  sortable: true,
+  render: (row) => <Text tabular>{row.date}</Text>,
+};
+
+const idCol: ColumnDef<Attendance> = {
+  key: "id",
+  header: "勤怠ID",
+  width: "w-28",
+  hiddenOnMobile: true,
+  render: (row) => (
+    <Text size="xs" mono tabular>
+      {row.id}
+    </Text>
+  ),
+};
+
+const clockCols: ColumnDef<Attendance>[] = [
+  {
+    key: "clockIn",
+    header: "出勤",
+    align: "right",
+    render: (row) => <Text tabular>{row.clockIn}</Text>,
+  },
+  {
+    key: "clockOut",
+    header: "退勤",
+    align: "right",
+    render: (row) => <Text tabular>{row.clockOut}</Text>,
+  },
+  {
+    key: "workMin",
+    header: "実働",
+    align: "right",
+    hiddenOnMobile: true,
+    render: (row) => <Text tabular>{hm(row.workMin)}</Text>,
+  },
+];
+
+const varianceCol: ColumnDef<Attendance> = {
+  key: "varianceMin",
+  header: "差異(分)",
+  align: "right",
+  sortable: true,
+  render: (row) => (
+    <Text
+      tone={row.varianceMin > 0 ? "destructive" : row.varianceMin < 0 ? "info" : "muted"}
+      tabular
+    >
+      {row.varianceMin > 0 ? `+${row.varianceMin}` : row.varianceMin || "—"}
+    </Text>
+  ),
+};
+
+const applicantCols: ColumnDef<Attendance>[] = [
+  { key: "applicant", header: "申請者", render: (row) => row.applicant },
+  {
+    key: "appliedAt",
+    header: "申請時刻",
+    align: "right",
+    hiddenOnMobile: true,
+    render: (row) => <Text tabular>{row.appliedAt}</Text>,
+  },
+];
+
+// ── Saved-view presets (the core of this showcase) ─────────────────────────────
+// Each view = { filter, columns }. Switching the tab swaps BOTH.
+
+type ViewId = "all" | "pending" | "late" | "absent" | "approved";
+
+type SavedView = {
+  id: ViewId;
+  label: string;
+  /** signal dot tone — colored Badge dot in the ribbon */
+  dot: "success" | "warning" | "destructive" | "info" | "neutral";
+  filter: (r: Attendance) => boolean;
+  columns: ColumnDef<Attendance>[];
+};
+
+const VIEWS: SavedView[] = [
+  {
+    id: "all",
+    label: "全件",
+    dot: "neutral",
+    filter: () => true,
+    columns: [dateCol, employeeCol, ...clockCols, statusCell, idCol],
+  },
+  {
+    id: "pending",
+    label: "要承認",
+    dot: "warning",
+    filter: (r) => r.status === "pending",
+    // surfaces 申請者 / 申請時刻 — hides 実働/退勤 noise
+    columns: [dateCol, employeeCol, ...applicantCols, statusCell],
+  },
+  {
+    id: "late",
+    label: "遅刻・早退",
+    dot: "destructive",
+    filter: (r) => r.status === "late" || r.status === "early",
+    // surfaces 差異(分)
+    columns: [dateCol, employeeCol, clockCols[0], clockCols[1], varianceCol, statusCell],
+  },
+  {
+    id: "absent",
+    label: "欠勤",
+    dot: "info",
+    filter: (r) => r.status === "absent",
+    columns: [dateCol, employeeCol, statusCell, idCol],
+  },
+  {
+    id: "approved",
+    label: "承認済",
+    dot: "success",
+    filter: (r) => r.status === "approved",
+    columns: [dateCol, employeeCol, ...clockCols, statusCell],
+  },
+];
+
+// dot tone → token class (fixed signaling; no hex)
+const DOT_CLASS: Record<SavedView["dot"], string> = {
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+  neutral: "bg-muted-foreground",
+};
+
+function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
+  return (
+    <span className="flex items-center gap-2">
+      <span aria-hidden="true" className={`size-2 rounded-full ${DOT_CLASS[view.dot]}`} />
+      <span>{view.label}</span>
+      <Text
+        as="span"
+        size="2xs"
+        weight="medium"
+        tone="muted"
+        tabular
+        className="bg-muted inline-flex min-w-5 items-center justify-center rounded-full px-1.5"
+      >
+        {count}
+      </Text>
+    </span>
+  );
+}
+
+export default function Demo() {
+  const [view, setView] = React.useState<ViewId>("pending");
+  const [selected, setSelected] = React.useState<Set<string>>(new Set(["ATT-0509"]));
+  const [sort, setSort] = React.useState<SortStateProp | undefined>({
+    key: "date",
+    direction: "desc",
+  });
+
+  const active = VIEWS.find((v) => v.id === view) ?? VIEWS[0];
+
+  // Per-view counts for the ribbon pills.
+  const counts = React.useMemo(() => {
+    const map = {} as Record<ViewId, number>;
+    for (const v of VIEWS) map[v.id] = RECORDS.filter(v.filter).length;
+    return map;
+  }, []);
+
+  // Apply the active view's filter, then the (shared) sort.
+  const rows = React.useMemo(() => {
+    const filtered = RECORDS.filter(active.filter);
+    if (!sort) return filtered;
+    const dir = sort.direction === "asc" ? 1 : -1;
+    return [...filtered].sort((a, b) => {
+      const av = a[sort.key as keyof Attendance] as string | number;
+      const bv = b[sort.key as keyof Attendance] as string | number;
+      return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
+    });
+  }, [active, sort]);
+
+  return (
+    <PageContainer
+      title="勤怠一覧"
+      subtitle="埼玉センター · 倉庫部 / 配送部 / 事務部 · 2026年6月"
+      density="compact"
+      extra={
+        <Flex direction="row" gap="sm">
+          <Button variant="outline" size="sm">
+            <RefreshCw aria-hidden="true" />
+            更新
+          </Button>
+          <Button variant="outline" size="sm">
+            <Download aria-hidden="true" />
+            CSV出力
+          </Button>
+        </Flex>
+      }
+    >
+      <Flex direction="col" gap="md">
+        {/* Saved-view ribbon — controlled Tabs; switching swaps the preset below. */}
+        <Tabs value={view} onValueChange={(v) => setView(v as ViewId)}>
+          <TabsList variant="line" className="h-auto flex-wrap gap-1 border-b">
+            {VIEWS.map((v) => (
+              <TabsTrigger
+                key={v.id}
+                value={v.id}
+                className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent bg-transparent px-3 py-2 shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <ViewTrigger view={v} count={counts[v.id]} />
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+
+        {/* The grid — columns + data both come from the active saved view. */}
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={rows}
+              columns={active.columns}
+              getRowId={(row) => row.id}
+              selectable
+              selected={selected}
+              onSelectChange={setSelected}
+              onRowClick={() => {}}
+              sort={sort}
+              onSortChange={setSort}
+              empty={<Text tone="muted">このビューに該当する勤怠はありません</Text>}
+            >
+              <DataTable.Toolbar>
+                <DataTable.BulkActions>
+                  <Button size="sm" variant="outline">
+                    <X aria-hidden="true" />
+                    差戻し
+                  </Button>
+                  <Button size="sm">
+                    <Check aria-hidden="true" />
+                    一括承認
+                  </Button>
+                </DataTable.BulkActions>
+                <DataTable.DensityToggle />
+              </DataTable.Toolbar>
+              <DataTable.Content />
+              <DataTable.Pagination cursor="ATT-0503" hasMore onChange={() => {}} />
+            </DataTable>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.1.0",
-  "godxUiMcp": "19.1.0",
+  "version": "19.3.1",
+  "godxUiMcp": "19.3.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,7 +32,8 @@
     "scripts/init-agent-kit.mjs",
     "scripts/postinstall.mjs",
     "scripts/_agent-setup.mjs",
-    "scripts/cli.mjs"
+    "scripts/cli.mjs",
+    "docs"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -332,15 +333,13 @@
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
-    "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
-    "verify:ci": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify:ci": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
     "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
-    "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve && pnpm check:mcp-lockstep",
-    "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
+    "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "check:release-plan": "node scripts/check-release-command-plan.mjs",
     "check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
     "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
@@ -365,9 +364,7 @@
     "check:rtl": "node scripts/check-rtl.mjs",
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
-    "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
     "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
-    "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
     "release": "node scripts/release.mjs",

package/scripts/_agent-setup.mjs

@@ -21,6 +21,13 @@ export const WORKFLOW_MD = `# @godxjp/ui — mandatory workflow (read every sess
 You are building UI in an app that uses @godxjp/ui. Follow this EVERY time you create
 or change a component, page, or form — no exceptions.
 
+## The rules the audit enforces (docs/CONSUMER-RULES.md in node_modules/@godxjp/ui)
+- Styles: \`@import "@godxjp/ui/styles"\` or \`@godxjp/ui/styles/core\` (no fonts). Never cherry-pick layers.
+- Layout: sections of a page are spaced by \`PageContainer\`; siblings go in \`<Flex direction="col" gap>\` /
+  \`<ResponsiveGrid>\`. No \`flex\` / \`grid\` / \`gap-*\` / \`p-*\` / \`m-*\` on your own elements.
+- Surfaces: \`Card\` / \`Badge\` / \`Avatar\` / \`ListRow\` / \`Descriptions\` / \`EmptyState\` — never a
+  \`rounded border\` div. Text is \`<Text tone size weight truncate>\`, never utility classes.
+
 ## Before writing UI
 1. **MCP-first.** Consult the godx-ui MCP: \`get_component <Name>\`, \`search_components\`,
    \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
@@ -47,6 +54,11 @@ export const CLAUDE_MD_BLOCK = `<!-- godxjp-ui:start (managed by @godxjp/ui —
 
 This app uses @godxjp/ui. EVERY time you build or change UI:
 
+0. **Ten rules** — read \`node_modules/@godxjp/ui/docs/CONSUMER-RULES.md\` once. Styles via
+   \`@godxjp/ui/styles\` or \`styles/core\` (never cherry-pick layers). Page sections are spaced by
+   \`PageContainer\`; siblings go in \`<Flex direction="col" gap>\` / \`<ResponsiveGrid>\`; no
+   \`flex\`/\`grid\`/\`gap-*\`/\`p-*\`/\`m-*\` on your own elements; boxes are \`Card\`/\`Badge\`/
+   \`ListRow\`/\`Descriptions\`, never a \`rounded border\` div; text is \`<Text tone size weight>\`.
 1. **MCP-first.** Consult the \`godx-ui\` MCP — \`get_component\`, \`search_components\`,
    \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
    primitive already does.
@@ -120,8 +132,10 @@ export function writeWorkflowMd(root) {
   return true;
 }
 
-/** Append the godxjp-ui mandate to the consumer's CLAUDE.md (created if absent). Idempotent
- * via the markers. Returns 'created' | 'appended' | 'present'. */
+/**
+ * Append the godxjp-ui mandate to the consumer's CLAUDE.md (created if absent). Idempotent via the
+ * markers.
+ */
 export function ensureClaudeMd(root) {
   const path = join(root, "CLAUDE.md");
   const existing = existsSync(path) ? readFileSync(path, "utf8") : null;

package/scripts/audit-hook.mjs

@@ -1,18 +1,8 @@
 #!/usr/bin/env node
 /**
- * Claude Code PostToolUse hook — the FORCING FUNCTION.
- *
- * Wired by `init-agent-kit.mjs` into a consumer's `.claude/settings.json` so that
- * after EVERY Write/Edit/MultiEdit of a .tsx/.ts file, the godxjp-ui static audit
- * runs on that file and its findings are fed straight back to the agent. The agent
- * cannot skip it — the harness runs the hook, not the agent's goodwill — so a
- * hand-rolled <label>+<Input>, a raw <button>, a loud palette colour, or an emoji
- * is surfaced the instant it is written, and the agent self-corrects.
- *
- * Contract: reads the hook JSON on stdin ({ tool_input: { file_path } }). Prints
- * findings to stderr and exits 2 when any are found (Claude Code feeds stderr back
- * to the model); exits 0 (silent) when the file is clean or irrelevant. Non-fatal —
- * it never blocks the edit, it just makes the agent SEE the issue.
+ * Claude Code PostToolUse hook — the FORCING FUNCTION. The agent cannot skip it — the harness runs
+ * the hook, not the agent's goodwill — so a hand-rolled <label>+<Input>, a raw <button>, a loud
+ * palette colour, or an emoji is surfaced the instant it is written, and the agent self-corrects.
  */
 import { execFileSync } from "node:child_process";
 import { readFileSync } from "node:fs";

package/scripts/init-agent-kit.mjs

@@ -1,18 +1,5 @@
 #!/usr/bin/env node
-/**
- * init-agent-kit — the FULL forcing-kit. Run once from a consumer app:
- *   npx @godxjp/ui init-agent
- *
- * Scaffolds (idempotent, non-destructive) the harness-enforced workflow so an agent
- * follows the whole godxjp-ui process every time it touches UI:
- *   1. .mcp.json            — registers the godx-ui MCP (component + audit guidance)
- *   2. .claude/settings.json — PostToolUse hook auto-runs the audit on every .tsx edit
- *                              and feeds findings back; SessionStart injects the mandate
- *   3. .claude/godxjp-ui-workflow.md — the per-session mandate the SessionStart hook reads
- *
- * Existing config is preserved (hooks are appended only if absent). It then prints the
- * optional pre-commit / CI snippets.
- */
+/** init-agent-kit — the FULL forcing-kit. */
 import {
   ensureClaudeHooks,
   ensureClaudeMd,

package/scripts/postinstall.mjs

@@ -1,15 +1,10 @@
 #!/usr/bin/env node
 /**
- * postinstall — runs when a consumer installs @godxjp/ui. Auto-registers the godx-ui
- * MCP server in the consumer's `.mcp.json` so the agent gets live access to the
- * component catalog + audit rules WITHOUT any manual step. Non-destructive (only adds
- * a missing server entry) and guarded so it never runs in CI or in the library's own repo.
- *
- * The heavier forcing-kit (the auto-audit PostToolUse hook + the workflow mandate) is
- * left to an EXPLICIT `npx @godxjp/ui init-agent`, since hooks change the dev loop and
- * should be opted into, not forced on install. Set GODXJP_UI_SKIP_SETUP=1 to disable.
+ * Auto-registers the godx-ui MCP server in the consumer's `.mcp.json` so the agent gets live
+ * access to the component catalog + audit rules WITHOUT any manual step. Non-destructive (only
+ * adds a missing server entry) and guarded so it never runs in CI or in the library's own repo.
  */
-import { ensureMcpJson, shouldSkip } from "./_agent-setup.mjs";
+import { ensureClaudeMd, ensureMcpJson, shouldSkip, writeWorkflowMd } from "./_agent-setup.mjs";
 
 const root = process.env.INIT_CWD || process.cwd();
 
@@ -18,11 +13,16 @@ if (skip) process.exit(0); // silent: CI / opt-out / self-install / no consumer
 
 try {
   const r = ensureMcpJson(root);
-  if (r === "present") process.exit(0); // already configured — stay quiet
+  // The mandate is plain text the agent reads every turn (CLAUDE.md block + workflow file). It
+  // changes nothing in the dev loop, so it is installed by default: an agent that never saw the
+  // but no mandate). Only the hooks — which DO change the loop — stay behind `init-agent`.
+  const md = ensureClaudeMd(root);
+  const wf = writeWorkflowMd(root);
+  if (r === "present" && md === "present" && !wf) process.exit(0); // already configured — stay quiet
   console.log(
-    `\n  @godxjp/ui → registered the godx-ui MCP in .mcp.json (${r}).\n` +
+    `\n  @godxjp/ui → MCP in .mcp.json (${r}); workflow mandate in CLAUDE.md (${md}).\n` +
       "  Your agent now has live component + audit guidance. Restart it to pick up the MCP.\n" +
-      "  For the full forcing-kit (auto-audit on every edit + workflow mandate):\n" +
+      "  For auto-audit on every edit (PostToolUse + SessionStart hooks):\n" +
       "    npx @godxjp/ui init-agent\n",
   );
 } catch {