@godxjp/ui 28.5.0 → 28.6.0

package/docs/layout/nav-list.tsx

@@ -1,61 +1,582 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { MasterDetail, NavList, PageContainer } from "@godxjp/ui/layout";
-import { Bell, Palette, ShieldCheck, User } from "lucide-react";
-
-const items = [
-  { id: "profile", label: "Profile", icon: User },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "notifications", label: "Notifications", icon: Bell, badge: "3" },
-  { id: "security", label: "Security", icon: ShieldCheck },
-];
+import { useState } from "react";
+import {
+  BadgeCheck,
+  Bell,
+  Building2,
+  ChevronRight,
+  CreditCard,
+  ExternalLink,
+  FileText,
+  Globe,
+  KeyRound,
+  Languages,
+  Mail,
+  Plug,
+  Receipt,
+  ScrollText,
+  ShieldCheck,
+  Smartphone,
+  Trash2,
+  User,
+  Users,
+} from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+  EmptyState,
+  ScrollArea,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Flex,
+  MasterDetail,
+  NavList,
+  PageContainer,
+  type SidebarItemProp,
+} from "@godxjp/ui/layout";
 
 /**
- * NavList — vertical route navigation for inside a page. Same rows as the Sidebar rail, in a
- * `<nav>` landmark instead of the shell grid, so the settings-nav shape stops being hand-rolled
- * out of Buttons.
+ * NavList · ページ内のルート遷移ナビゲーション。
+ *
+ * 設定画面のナビは、どの案件でも作る形なのに、primitive がないと毎回 Button を並べて自作されます。
+ * そこで失われるのは aria-current="page"、アイコン列へのラベル揃え、そして 32px 行の幾何です。
+ * このページは「設定ナビ」を正準形として最初に置き、その周りに grouped / flat、行末スロット、
+ * 状態、極端なラベル、長い一覧、空、狭い幅を並べます。
+ *
+ * グループは item.children です（gh#815）。レールと同じ .sb-nav-group を描き、ランドマークは
+ * ページに 1 つのままです。子行はレールの入れ子行と同じくドットマーカーになるので、子の icon は
+ * 描かれません（同じ項目をフラットに並べたときは描かれます）。
+ *
+ * 今日の NavList でできないこと（ページ内に明記してあります）:
+ * - 行そのものの tone がない。破壊的な操作はペイン側の Button variant="destructive" に置きます。
  */
+
+const SETTINGS_NAV: SidebarItemProp[] = [
+  {
+    id: "account",
+    label: "アカウント",
+    icon: User,
+    children: [
+      { id: "profile", label: "プロフィール", icon: User },
+      { id: "organization", label: "組織情報", icon: Building2 },
+      { id: "locale", label: "言語と地域", icon: Languages },
+    ],
+  },
+  {
+    id: "security",
+    label: "セキュリティ",
+    icon: ShieldCheck,
+    children: [
+      { id: "password", label: "パスワード", icon: KeyRound },
+      {
+        id: "two-factor",
+        label: "二要素認証",
+        icon: Smartphone,
+        badge: "未設定",
+        badgeTone: "destructive",
+      },
+      { id: "sessions", label: "サインイン履歴", icon: Globe, badge: "4" },
+      { id: "audit", label: "監査ログ", icon: ScrollText },
+    ],
+  },
+  {
+    id: "notifications",
+    label: "通知",
+    icon: Bell,
+    children: [
+      { id: "mail", label: "メール通知", icon: Mail, badge: "8" },
+      { id: "desktop", label: "デスクトップ通知", icon: Bell, badge: "新着" },
+    ],
+  },
+  {
+    id: "billing",
+    label: "請求",
+    icon: CreditCard,
+    children: [
+      { id: "plan", label: "契約プラン", icon: BadgeCheck },
+      { id: "payment", label: "支払い方法", icon: CreditCard },
+      { id: "invoices", label: "請求書", icon: Receipt, badge: "3" },
+    ],
+  },
+];
+
+const FLAT_ITEMS: SidebarItemProp[] = SETTINGS_NAV.flatMap((group) => group.children ?? []);
+
+type Pane = { title: string; description: string; facts: [string, string][] };
+
+const PANES: Record<string, Pane> = {
+  profile: {
+    title: "プロフィール",
+    description: "社内ディレクトリと監査ログに表示される名前です。",
+    facts: [
+      ["表示名", "佐藤 智"],
+      ["メールアドレス", "sato.satoshi@example.co.jp"],
+    ],
+  },
+  organization: {
+    title: "組織情報",
+    description: "請求書と契約書に印字される法人情報です。",
+    facts: [
+      ["法人名", "株式会社エグザンプル"],
+      ["法人番号", "5010001000001"],
+    ],
+  },
+  locale: {
+    title: "言語と地域",
+    description: "日付・数値・通貨の表示は BCP-47 と IANA タイムゾーンから決まります。",
+    facts: [
+      ["表示言語", "日本語 (ja-JP)"],
+      ["タイムゾーン", "Asia/Tokyo"],
+    ],
+  },
+  password: {
+    title: "パスワード",
+    description: "90 日ごとの変更が組織ポリシーで required になっています。",
+    facts: [
+      ["最終変更", "2026-06-12"],
+      ["次回の期限", "2026-09-10"],
+    ],
+  },
+  "two-factor": {
+    title: "二要素認証",
+    description: "未設定のままだと 2026-10-01 以降サインインできなくなります。",
+    facts: [
+      ["状態", "未設定"],
+      ["猶予期限", "2026-09-30"],
+    ],
+  },
+  sessions: {
+    title: "サインイン履歴",
+    description: "現在有効なセッションは 4 件です。心当たりがなければ失効させてください。",
+    facts: [
+      ["直近のサインイン", "2026-09-21 09:14 JST"],
+      ["直近の IP", "203.0.113.42"],
+    ],
+  },
+  audit: {
+    title: "監査ログ",
+    description: "保持期間は契約プランに連動します。エクスポートは CSV と JSON Lines。",
+    facts: [
+      ["保持期間", "400 日"],
+      ["直近のエクスポート", "2026-09-01"],
+    ],
+  },
+  mail: {
+    title: "メール通知",
+    description: "8 種類の通知が有効です。ダイジェストは毎営業日 08:00 に届きます。",
+    facts: [
+      ["配信先", "sato.satoshi@example.co.jp"],
+      ["ダイジェスト", "毎営業日 08:00 JST"],
+    ],
+  },
+  desktop: {
+    title: "デスクトップ通知",
+    description: "ブラウザの許可が必要です。承認待ちのみ即時、それ以外はまとめて通知します。",
+    facts: [
+      ["ブラウザ許可", "許可済み"],
+      ["即時通知", "承認待ちのみ"],
+    ],
+  },
+  plan: {
+    title: "契約プラン",
+    description: "座席数は月末締めで日割り計算されます。",
+    facts: [
+      ["プラン", "Enterprise"],
+      ["座席数", "240 / 250"],
+    ],
+  },
+  payment: {
+    title: "支払い方法",
+    description: "請求書払い（銀行振込）です。支払サイトは月末締め翌月末払い。",
+    facts: [
+      ["支払方法", "銀行振込"],
+      ["支払サイト", "月末締め翌月末払い"],
+    ],
+  },
+  invoices: {
+    title: "請求書",
+    description: "未払いが 3 件あります。最も古いものは 2026-07 分です。",
+    facts: [
+      ["未払い件数", "3 件"],
+      ["未払い合計", "¥1,284,000"],
+    ],
+  },
+};
+
+const FALLBACK_PANE: Pane = {
+  title: "設定",
+  description: "左のナビゲーションから項目を選んでください。",
+  facts: [],
+};
+
+function SettingsPane({ routeId }: { routeId: string }) {
+  const pane = PANES[routeId] ?? FALLBACK_PANE;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={3}>{pane.title}</CardTitle>
+        <CardDescription>{pane.description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Descriptions columns={2}>
+          {pane.facts.map(([label, value]) => (
+            <Descriptions.Item key={label} label={label}>
+              {value}
+            </Descriptions.Item>
+          ))}
+        </Descriptions>
+      </CardContent>
+    </Card>
+  );
+}
+
+const TRAILING_ITEMS: SidebarItemProp[] = [
+  { id: "queue", label: "承認待ち", icon: FileText, badge: "12" },
+  { id: "mentions", label: "自分宛のメンション", icon: Bell, badge: "3", badgeTone: "destructive" },
+  { id: "release", label: "リリースノート", icon: BadgeCheck, badge: "新着" },
+  { id: "integrations", label: "連携アプリ", icon: Plug, trailingIcon: ChevronRight },
+  {
+    id: "status",
+    label: "サービス稼働状況",
+    icon: Globe,
+    trailingIcon: ExternalLink,
+    href: "https://status.example.co.jp",
+  },
+];
+
+const LABEL_STRESS_ITEMS: SidebarItemProp[] = [
+  { id: "sso", label: "SSO", icon: KeyRound },
+  { id: "mfa", label: "2FA", icon: Smartphone, badge: "2" },
+  {
+    id: "audit-export",
+    label: "外部監査人への監査証跡エクスポートと保持期間の設定",
+    icon: ScrollText,
+  },
+  {
+    id: "notify-default",
+    label: "組織全体の通知とメール配信の既定値を管理者があとから上書きする",
+    icon: Bell,
+    badge: "新着",
+  },
+];
+
+const STATE_ITEMS: SidebarItemProp[] = [
+  { id: "profile", label: "プロフィール", icon: User, href: "/settings/profile" },
+  { id: "members", label: "メンバー管理", icon: Users, disabled: true },
+  {
+    id: "export",
+    label: "データエクスポート",
+    icon: FileText,
+    href: "/settings/export",
+    disabled: true,
+  },
+  { id: "delete", label: "アカウントを削除", icon: Trash2 },
+];
+
+/** `icon` は任意（gh#815）。無い行も空の `.sb-icon` 箱でラベル列を保ちます。 */
+const MIXED_ICON_ITEMS: SidebarItemProp[] = [
+  { id: "api-keys", label: "API キー", icon: KeyRound, badge: "2" },
+  { id: "webhooks", label: "Webhook" },
+  { id: "domains", label: "ドメイン認証", icon: Globe },
+  { id: "seats", label: "座席の割り当て" },
+];
+
+const LONG_ITEMS: SidebarItemProp[] = [
+  ...FLAT_ITEMS,
+  { id: "api-keys", label: "API キー", icon: KeyRound, badge: "2" },
+  { id: "webhooks", label: "Webhook", icon: Plug },
+  { id: "domains", label: "ドメイン認証", icon: Globe, badge: "1", badgeTone: "destructive" },
+  { id: "seats", label: "座席の割り当て", icon: Users },
+];
+
 export default function Demo() {
+  const [route, setRoute] = useState("two-factor");
+  const [flatRoute, setFlatRoute] = useState("password");
+  const [groupedRoute, setGroupedRoute] = useState("password");
+  const [longRoute, setLongRoute] = useState("api-keys");
+  const [narrowRoute, setNarrowRoute] = useState("profile");
+  const [narrowPane, setNarrowPane] = useState<"master" | "detail">("master");
+
   return (
     <PageContainer title="NavList" subtitle="ページ内のルート遷移ナビゲーション">
       <Card>
         <CardHeader>
-          <CardTitle level={2}>Master と組み合わせる</CardTitle>
+          <CardTitle level={2}>設定ナビゲーション · 正準形</CardTitle>
           <CardDescription>
-            選択中の行だけが aria-current=&quot;page&quot; を持ち、ラベルはアイコン列に揃います。
+            これがないと、各アプリが Button を並べて設定ナビを自作し、aria-current=&quot;page&quot;
+            とアイコン列が失われます。グループは item.children です。ページのナビゲーションは 1
+            つなので、&lt;nav&gt; ランドマークも 1 つのまま、NavList も 1
+            つです。ルートが子に当たったグループは自分で開きます。
           </CardDescription>
         </CardHeader>
         <CardContent>
           <MasterDetail
-            masterLabel="Settings"
+            rail="master"
             railWidth="compact"
-            master={<NavList label="Settings" items={items} activeId="appearance" />}
+            masterLabel="設定"
+            detailLabel="設定の内容"
+            detailId="nav-list-settings-pane"
+            master={
+              <NavList label="設定" items={SETTINGS_NAV} activeId={route} onSelect={setRoute} />
+            }
           >
-            <Card>
-              <CardHeader>
-                <CardTitle level={3}>Appearance</CardTitle>
-                <CardDescription>
-                  詳細ペインは選択された行が決めます。ナビゲーション自体は折りたたみ状態を持ちません。
-                </CardDescription>
-              </CardHeader>
-            </Card>
+            <SettingsPane routeId={route} />
           </MasterDetail>
         </CardContent>
       </Card>
 
       <Card>
         <CardHeader>
-          <CardTitle level={2}>長いラベルと content stress</CardTitle>
-          <CardDescription>行は縮み、ラベルだけが切り詰められます。</CardDescription>
+          <CardTitle level={2}>グループあり · グループなし</CardTitle>
+          <CardDescription>
+            これがないと、12
+            項目を一列に並べた読めないナビが既定になります。グループにする方法は一つだけ（item.children）だと示しておかないと、各アプリが独自の見出しマークアップを発明します。
+            どちらも NavList 1 つ、&lt;nav&gt; ランドマーク 1
+            つです。子行はレールの入れ子行と同じドットマーカーになるので、子の icon
+            は描かれません。左のフラット版では同じ 12 項目の icon がそのまま描かれます。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction={{ base: "col", md: "row" }} gap="xl" align="start">
+            <Flex direction="col" gap="sm" grow>
+              <Text size="sm" weight="medium">
+                フラット · 12 行 · ランドマーク 1 つ
+              </Text>
+              <NavList
+                label="設定（フラット）"
+                items={FLAT_ITEMS}
+                activeId={flatRoute}
+                onSelect={setFlatRoute}
+              />
+            </Flex>
+            <Flex direction="col" gap="sm" grow>
+              <Text size="sm" weight="medium">
+                グループあり · 開閉 4 つ · ランドマーク 1 つ
+              </Text>
+              <NavList
+                label="設定（グループあり）"
+                items={SETTINGS_NAV}
+                activeId={groupedRoute}
+                onSelect={setGroupedRoute}
+              />
+            </Flex>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>行の末尾に置けるもの</CardTitle>
+          <CardDescription>
+            これがないと、シェブロンが badge に渡されます。badge は中身を .sb-badge
+            のカプセルで包むので、16px の先頭アイコンの隣に 24px の SVG
+            が入った灰色の錠剤が並びます。 数と状態は badge（badgeTone=&quot;destructive&quot;
+            は「自分宛」の意味）、グリフは trailingIcon。href のある行は &lt;a&gt;
+            として描かれるので、中クリックも新規タブも効きます。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <NavList label="行末スロット" items={TRAILING_ITEMS} activeId="mentions" />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>アイコン列とラベルの極端なケース</CardTitle>
+          <CardDescription>
+            これがないと、icon のない行は型が許さないと誤解されます。icon は任意です。無い行も空の
+            .sb-icon 箱を保つので、ラベルの列は動きません。だから「2 文字のラベル」も「3
+            行に折り返す日本語のラベル」も同じ列から始まり、行は縮まず、折り返すのはラベルだけです。
+          </CardDescription>
         </CardHeader>
         <CardContent>
-          <NavList
-            label="Long labels"
-            activeId="long"
-            items={[
-              { id: "long", label: "組織全体の通知とメール配信の既定値", icon: Bell },
-              { id: "short", label: "Security", icon: ShieldCheck },
-            ]}
-          />
+          <Flex direction={{ base: "col", md: "row" }} gap="xl" align="start">
+            <Flex direction="col" gap="sm" grow>
+              <Text size="sm" weight="medium">
+                レール幅（compact · 18.75rem）
+              </Text>
+              <NavList label="ラベル長のストレス" items={LABEL_STRESS_ITEMS} activeId="mfa" />
+            </Flex>
+            <Flex direction="col" gap="sm" width={180}>
+              <Text size="sm" weight="medium">
+                180px に絞ったとき
+              </Text>
+              <NavList
+                label="ラベル長のストレス（狭幅）"
+                items={LABEL_STRESS_ITEMS}
+                activeId="mfa"
+              />
+            </Flex>
+            <Flex direction="col" gap="sm" width={240}>
+              <Text size="sm" weight="medium">
+                icon あり · なしの混在
+              </Text>
+              <NavList label="アイコンの混在" items={MIXED_ICON_ITEMS} activeId="webhooks" />
+            </Flex>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>状態 · active · disabled · 破壊的操作</CardTitle>
+          <CardDescription>
+            これがないと、disabled な行が見た目だけ薄くなって遷移してしまいます。実際は
+            aria-disabled が付き、href も落ちます。行そのものに tone
+            はないので、「アカウントを削除」はただのルートです。取り返しのつかない操作はペイン側の
+            Button variant=&quot;destructive&quot; が受け持ちます。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction={{ base: "col", md: "row" }} gap="xl" align="start">
+            <Flex direction="col" gap="sm" width={240}>
+              <NavList label="状態" items={STATE_ITEMS} activeId="profile" />
+            </Flex>
+            <Flex direction="col" gap="sm" grow>
+              <Text size="sm" weight="medium">
+                「アカウントを削除」を選んだあとのペイン
+              </Text>
+              <Text size="sm" tone="muted">
+                削除は 30 日後に確定します。それまでは同じ画面から取り消せます。
+              </Text>
+              <Flex>
+                <Button variant="destructive" size="sm">
+                  アカウントを削除
+                </Button>
+              </Flex>
+            </Flex>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>16 項目をレールに収める</CardTitle>
+          <CardDescription>
+            これがないと、NavList
+            自体はスクロールしないという事実が隠れます。列は内容ぶんだけ伸び、積み重なったあとの詳細は画面外に落ちます。MasterDetail
+            の中での答えは masterViewport=&quot;compact&quot;
+            で、レールの中だけがスクロールします。消費側の max-height や overflow は使いません。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <MasterDetail
+            rail="master"
+            railWidth="compact"
+            masterViewport="compact"
+            masterLabel="設定（全 16 項目）"
+            detailLabel="設定の内容"
+            master={
+              <NavList
+                label="設定（全 16 項目）"
+                items={LONG_ITEMS}
+                activeId={longRoute}
+                onSelect={setLongRoute}
+              />
+            }
+          >
+            <SettingsPane routeId={longRoute} />
+          </MasterDetail>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>MasterDetail の外に置くとき</CardTitle>
+          <CardDescription>
+            これがないと、レールの外で同じ一覧を置いた瞬間に高さの制約が消えます。囲いが Card、
+            スクロールするのは ScrollArea、高さはこの画面の寸法なので className に残ります。NavList
+            側は何も変わりません。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Card>
+            <CardContent flush solo>
+              <ScrollArea className="h-64" scrollbar="always">
+                <Flex direction="col" pad={3}>
+                  <NavList label="設定（カード内スクロール）" items={LONG_ITEMS} activeId="audit" />
+                </Flex>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>項目が 0 件のとき</CardTitle>
+          <CardDescription>
+            これがないと、空配列が空の &lt;nav&gt;
+            を残します。画面には何も出ないのに、スクリーンリーダーには名前だけのランドマークが残り、
+            読み上げても中身がありません。0 件のときは NavList を描かず EmptyState に差し替えます。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex direction={{ base: "col", md: "row" }} gap="xl" align="start">
+            <Flex direction="col" gap="sm" width={280}>
+              <Text size="sm" weight="medium">
+                NavList items={"{[]}"} · 何も描かれない
+              </Text>
+              <NavList label="権限のある設定（0 件）" items={[]} />
+            </Flex>
+            <Flex direction="col" gap="sm" grow>
+              <Text size="sm" weight="medium">
+                差し替え
+              </Text>
+              <EmptyState
+                variant="compact"
+                icon={KeyRound}
+                title="表示できる設定がありません"
+                description="この組織での権限では設定項目を開けません。管理者に権限の付与を依頼してください。"
+              />
+            </Flex>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>電話幅のとき</CardTitle>
+          <CardDescription>
+            これがないと、狭い幅でナビと内容が縦に積まれ、内容がナビの下 800px
+            に沈みます。MasterDetail の mobilePane は一度に片方だけを見せ、戻り導線は detailBack
+            が受け持ちます。選択そのものは URL と履歴の持ち主、つまり呼び出し側の責務です。ここでは
+            collapseBelow=&quot;lg&quot;
+            にして、このカードの幅でも折りたたみが見えるようにしています。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <MasterDetail
+            rail="master"
+            railWidth="compact"
+            collapseBelow="lg"
+            mobilePane={narrowPane}
+            masterLabel="設定"
+            detailLabel="設定の内容"
+            detailBack={
+              <Button variant="ghost" size="sm" onClick={() => setNarrowPane("master")}>
+                設定一覧へ戻る
+              </Button>
+            }
+            master={
+              <NavList
+                label="設定"
+                items={SETTINGS_NAV}
+                activeId={narrowRoute}
+                onSelect={(id) => {
+                  setNarrowRoute(id);
+                  setNarrowPane("detail");
+                }}
+              />
+            }
+          >
+            <SettingsPane routeId={narrowRoute} />
+          </MasterDetail>
         </CardContent>
       </Card>
     </PageContainer>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.5.0",
-  "godxUiMcp": "28.5.0",
+  "version": "28.6.0",
+  "godxUiMcp": "28.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     }
   },
   "sideEffects": false,
-  "description": "@godxjp/ui \u2014 shared React UI framework (shadcn + Radix + Tailwind v4).",
+  "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
     "LICENSE",
     "dist",
@@ -409,15 +409,16 @@
     "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json",
     "typecheck:ts6": "tsc --noEmit -p tsconfig.json",
     "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:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && 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-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:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
+    "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:frame-overflow && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && 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:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && 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-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && 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:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && 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-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm run audit && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",
     "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:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && 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-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",
     "visual-audit": "node scripts/visual-audit.mjs",
     "gen:brand": "node scripts/gen-brand.mjs",
-    "check:absorbed-names": "node scripts/check-absorbed-names.mjs"
+    "check:absorbed-names": "node scripts/check-absorbed-names.mjs",
+    "check:frame-overflow": "node scripts/check-frame-overflow.mjs"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.0",