@godxjp/ui 30.4.2 → 30.5.2

package/docs/data-entry/record-picker.tsx

@@ -0,0 +1,208 @@
+import { useState } from "react";
+import { Shield, User } from "lucide-react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { RecordPicker } from "@godxjp/ui/data-entry";
+import { Icon, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * RecordPicker — the three shapes a real consumer needed (gh#932).
+ *
+ * Every case on this page is one that shipped WRONG in an app before the component existed, and
+ * the page is arranged so the failure each one fixes is visible: a dropdown that cannot be
+ * searched, two kinds of thing in one field, and a free-text key that only failed validation
+ * after save.
+ */
+
+const SMALL = [
+  { value: "u1", label: "Alex Tran" },
+  { value: "u2", label: "Bea Nakamura" },
+  { value: "u3", label: "Cam Ito" },
+];
+
+/** 800 people is the case the report is actually about; a dropdown cannot be the answer. */
+const PEOPLE = Array.from({ length: 800 }, (_, i) => ({
+  value: `u${i}`,
+  label: `Member ${String(i).padStart(3, "0")}`,
+  sublabel: `member${i}@example.co.jp`,
+}));
+
+const ROLES = [
+  { value: "r-admin", label: "Administrator", group: "Roles" },
+  { value: "r-review", label: "Reviewer", group: "Roles" },
+  { value: "r-observer", label: "Observer", group: "Roles" },
+];
+
+const ISSUES = Array.from({ length: 300 }, (_, i) => ({
+  value: `PKG-${i + 1}`,
+  label: `PKG-${i + 1}`,
+  sublabel: `Requirement ${i + 1} — imported from the spec sheet`,
+}));
+
+const delay = <T,>(value: T) => new Promise<T>((r) => setTimeout(() => r(value), 120));
+
+export default function Demo() {
+  const [small, setSmall] = useState<string | null>("u2");
+  const [owner, setOwner] = useState<string | null>("");
+  const [approvers, setApprovers] = useState<string[]>(["r-review"]);
+  const [issue, setIssue] = useState<string | null>("PKG-1");
+
+  return (
+    <PageContainer
+      title="RecordPicker"
+      subtitle="One control whose shape follows the size of the set — dropdown under the threshold, searchable dialog over it"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Under the threshold, it IS a Select</CardTitle>
+            <CardDescription>
+              Three people, so nothing is gained by a dialog. The same component renders Select —
+              same trigger, same panel, same search. Nothing here is a lookalike.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm" align="start">
+              <RecordPicker options={SMALL} value={small} onValueChange={(v) => setSmall(v as string)} />
+              <Text as="p" size="2xs" tone="muted" tabular>
+                value: {JSON.stringify(small)}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Assigning an owner out of 800</CardTitle>
+            <CardDescription>
+              The case the report is about: this field was a dropdown with no search. `count` comes
+              from the server — the page of rows in hand says nothing about the set behind it. The
+              pinned “Unassigned” row is a value the record HOLDS, not an empty field.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm" align="start">
+              <RecordPicker
+                count={PEOPLE.length}
+                loadOptions={async ({ query, filters }) =>
+                  delay({
+                    options: PEOPLE.filter(
+                      (p) =>
+                        p.label.toLowerCase().includes(query.toLowerCase()) &&
+                        (!filters.scope || filters.scope === "project"),
+                    ).slice(0, 40),
+                  })
+                }
+                filters={[
+                  {
+                    name: "scope",
+                    label: "Scope",
+                    options: [
+                      { value: "project", label: "On this project" },
+                      { value: "all", label: "Everyone" },
+                    ],
+                  },
+                ]}
+                emptyOption={{ value: "", label: "Unassigned" }}
+                selectedOptions={[{ value: "", label: "Unassigned" }]}
+                value={owner}
+                onValueChange={(v) => setOwner(v as string)}
+                dialogTitle="Choose an owner"
+              />
+              <Text as="p" size="2xs" tone="muted" tabular>
+                value: {JSON.stringify(owner)}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Two kinds of thing in one field</CardTitle>
+            <CardDescription>
+              An approval step accepts a PERSON or a ROLE. They are two `group`s in one list rather
+              than two controls, and the option `icon` is what keeps the chips apart once chosen.
+              `multiple` commits on Confirm, so a mis-click is undone by Cancel.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm" align="start">
+              <RecordPicker
+                mode="multiple"
+                count={PEOPLE.length + ROLES.length}
+                loadOptions={async ({ query }) =>
+                  delay({
+                    options: [
+                      ...ROLES.filter((r) => r.label.toLowerCase().includes(query.toLowerCase())).map(
+                        (r) => ({ ...r, icon: <Icon as={Shield} size="sm" tone="muted" /> }),
+                      ),
+                      ...PEOPLE.filter((p) => p.label.toLowerCase().includes(query.toLowerCase()))
+                        .slice(0, 30)
+                        .map((p) => ({
+                          ...p,
+                          group: "Users",
+                          icon: <Icon as={User} size="sm" tone="muted" />,
+                        })),
+                    ],
+                  })
+                }
+                selectedOptions={ROLES}
+                value={approvers}
+                onValueChange={(v) => setApprovers(v as string[])}
+                dialogTitle="Choose approvers"
+              />
+              <Text as="p" size="2xs" tone="muted" tabular>
+                value: {JSON.stringify(approvers)}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>A record, by key or by title</CardTitle>
+            <CardDescription>
+              This field used to be free text: you typed the key, and a wrong one failed with a 422
+              AFTER save. Searching both the key and the title, with the key shown beside it, means
+              the value cannot be wrong by the time it is submitted.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm" align="start">
+              <RecordPicker
+                count={ISSUES.length}
+                loadOptions={async ({ query, filters }) =>
+                  delay({
+                    options: ISSUES.filter(
+                      (o) =>
+                        (o.label + o.sublabel).toLowerCase().includes(query.toLowerCase()) &&
+                        (!filters.state || filters.state === "open"),
+                    ).slice(0, 40),
+                  })
+                }
+                filters={[
+                  {
+                    name: "state",
+                    label: "State",
+                    options: [
+                      { value: "open", label: "Open" },
+                      { value: "closed", label: "Closed" },
+                    ],
+                  },
+                ]}
+                selectedOptions={[{ value: "PKG-1", label: "PKG-1", sublabel: "Requirement 1" }]}
+                value={issue}
+                onValueChange={(v) => setIssue(v as string)}
+                dialogTitle="Choose a requirement"
+              />
+              <Text as="p" size="2xs" tone="muted" tabular>
+                value: {JSON.stringify(issue)}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/general/typography.tsx

@@ -425,6 +425,34 @@ export default function Demo() {
             <VisuallyHidden>{t("textExamples.preservedText")}</VisuallyHidden>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textExamples.breakTitle")}</CardTitle>
+            <CardDescription>{t("textExamples.breakDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("textExamples.breakColumnOwner")}</TableHead>
+                  <TableHead>{t("textExamples.breakColumnEmail")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <Text size="sm">{t("textExamples.breakSampleName")}</Text>
+                  </TableCell>
+                  <TableCell>
+                    <Text size="sm" break="anywhere">
+                      hanako.sato.customer-success-team@example-enterprise-holdings.co.jp
+                    </Text>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/i18n/messages/en.json

@@ -1,7 +1,12 @@
 {
   "textExamples": {
     "preservedText": "Plain text",
-    "sampleText": "First line\n  Indented line\n\nLast line"
+    "sampleText": "First line\n  Indented line\n\nLast line",
+    "breakTitle": "break · wrapping an identifier",
+    "breakDescription": "An identifier with nowhere to break — an email address, a coupon code, a login ID — takes break=\"anywhere\", and the column stays inside the viewport even in a table cell. whitespace=\"pre-wrap\" is for newlines a person typed; it cannot wrap an identifier in a table cell.",
+    "breakColumnOwner": "Owner",
+    "breakColumnEmail": "Email address",
+    "breakSampleName": "Sato"
   },
   "themeShowcase": {
     "page": {
@@ -1260,5 +1265,184 @@
     "attach": "Attach a file",
     "enterHint": "Enter to send · Shift + Enter for a new line",
     "sendComment": "Send the comment"
+  },
+  "tcgm": {
+    "demoNotice": "DESIGN PROTOTYPE · every card, price, shop and release date below is a fictional sample.",
+    "brandAlt": "TCG-M",
+    "nav": {
+      "cards": "Find cards",
+      "news": "News",
+      "calendar": "Release calendar",
+      "watchlist": "Watchlist",
+      "method": "Data & editorial policy",
+      "label": "Main navigation"
+    },
+    "header": {
+      "search": "Card search",
+      "watchlist": "Watchlist",
+      "tryApp": "Try the app",
+      "openMenu": "Open menu",
+      "menu": "Menu"
+    },
+    "hero": {
+      "eyebrow": "Different cards. Same passion.",
+      "titleLine1": "Find more of",
+      "titleLine2": "the cards you love.",
+      "leadLine1": "From the one card you came for to the next thing you discover.",
+      "leadLine2": "Card data, price comparison and news, in one place.",
+      "searchPlaceholder": "Search by card name, number or set",
+      "searchLabel": "Card name, number or set",
+      "artAlt": "Original card illustration spread across a pale sky",
+      "artTag": "More cards. More possibilities.",
+      "hintTitles": "Many titles",
+      "hintCompare": "Compare like for like",
+      "hintDiscover": "New discoveries"
+    },
+    "games": {
+      "label": "Filter by title",
+      "all": "All",
+      "pokemon": "Pokémon Card",
+      "onepiece": "ONE PIECE",
+      "yugioh": "Yu-Gi-Oh!",
+      "duel": "Duel Masters",
+      "mtg": "MTG",
+      "other": "Other"
+    },
+    "card": {
+      "classifiedAs": "Category: {game}",
+      "priceLabel": "Listed shop price",
+      "noPrice": "No price listed",
+      "shippingNote": "Excl. shipping",
+      "sampleNote": "Sample",
+      "sampleBadge": "SAMPLE",
+      "artAlt": "Fictional card: {name}",
+      "watchAdd": "Add {name} to watchlist",
+      "watchRemove": "Remove {name} from watchlist"
+    },
+    "cards": {
+      "demo-01": {
+        "name": "Guide of the Star Crossing",
+        "edition": "Standard"
+      },
+      "demo-02": {
+        "name": "Atelier of Sky Blue",
+        "edition": "Holo"
+      },
+      "demo-03": {
+        "name": "Garden in Moonlight",
+        "edition": "Standard"
+      },
+      "demo-04": {
+        "name": "Voyage of Coral",
+        "edition": "Alternate art"
+      },
+      "demo-05": {
+        "name": "A Letter That Carries Wind",
+        "edition": "Standard"
+      },
+      "demo-06": {
+        "name": "Prism at Daybreak",
+        "edition": "Holo"
+      }
+    },
+    "collection": {
+      "eyebrow": "Explore the collection",
+      "title": "Meet a card you haven't met yet.",
+      "action": "Find cards",
+      "count": "{count} samples",
+      "note": "The cards below are fictional, for design review only. They are not official cards of any real title.",
+      "emptyTitle": "No card matches these conditions",
+      "emptyBody": "Try a different title or card number.",
+      "reset": "Reset filters"
+    },
+    "news": {
+      "eyebrow": "Read & discover",
+      "title": "Know your cards a little better.",
+      "action": "Read articles",
+      "sample": "Sample article",
+      "meta": "2026.09.24 · 4 min read",
+      "manual": "Manual only · no autoplay"
+    },
+    "articles": {
+      "compare": {
+        "title": "Five things to check before you look at the price",
+        "cat": "Starter guide"
+      },
+      "edition": {
+        "title": "Same name, different card? Telling editions apart",
+        "cat": "Card knowledge"
+      },
+      "watch": {
+        "title": "Keep the cards you care about in one list",
+        "cat": "How to"
+      },
+      "sources": {
+        "title": "Why the \"last updated\" time on price data matters",
+        "cat": "Reading the data"
+      }
+    },
+    "releases": {
+      "eyebrow": "Coming next",
+      "title": "Put what you're waiting for on the calendar.",
+      "action": "Open calendar",
+      "view": "View release"
+    },
+    "release": {
+      "prism": {
+        "title": "Prism World — Chapter of Sky",
+        "kind": "Original fictional set"
+      },
+      "notes": {
+        "title": "Collector's Notes Vol.01",
+        "kind": "Guide release example"
+      },
+      "study": {
+        "title": "Edition Study — Light and Shadow",
+        "kind": "Original fictional set"
+      }
+    },
+    "trust": {
+      "eyebrow": "Clarity comes first",
+      "titleLine1": "The facts you need",
+      "titleLine2": "to compare, made plain.",
+      "bodyLine1": "Not just the price: the edition, the condition, the shipping and the time it was last checked.",
+      "bodyLine2": "The footing you need to choose with confidence.",
+      "link": "Data & editorial policy",
+      "editionTitle": "Same edition, same condition",
+      "editionBody": "Standard and alternate-art printings are compared separately.",
+      "freshnessTitle": "The update time is stated",
+      "freshnessBody": "Conditions at the time of listing may differ from now.",
+      "adsTitle": "Ads kept apart from comparison",
+      "adsBody": "PR labelling and the reason for the ordering, both in plain sight."
+    },
+    "footer": {
+      "taglineLine1": "The cards you love, connecting a wider world.",
+      "taglineLine2": "Card price comparison · card data · news",
+      "accent": "Different cards. Same passion.",
+      "colFind": "Find & compare",
+      "colRead": "Read & learn",
+      "colAbout": "About TCG-M",
+      "linkSearch": "Card search",
+      "linkCompare": "Compare editions",
+      "linkWatchlist": "Watchlist",
+      "linkNews": "News & guides",
+      "linkCalendar": "Release calendar",
+      "linkBasics": "Comparison basics",
+      "linkMethod": "Data & editorial policy",
+      "linkComponents": "UI components",
+      "linkConsent": "Demo storage settings",
+      "legal": "© TCG-M · tcg-m.com · Design prototype",
+      "disclaimer": "Title names are category examples. They do not indicate an official service or partnership."
+    },
+    "toast": {
+      "saved": "Saved to this browser",
+      "removed": "Removed from your watchlist"
+    },
+    "dialog": {
+      "title": "Fictional release",
+      "body": "This is a calendar display example. It is not an actual product release or pre-order.",
+      "sample": "Sample",
+      "date": "September 2026 · demo date"
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1,7 +1,12 @@
 {
   "textExamples": {
     "preservedText": "プレーンテキスト",
-    "sampleText": "最初の行\n  字下げした行\n\n最後の行"
+    "sampleText": "最初の行\n  字下げした行\n\n最後の行",
+    "breakTitle": "break · 識別子を折り返す",
+    "breakDescription": "メールアドレス・クーポンコード・ログイン ID のような区切りのない識別子は break=\"anywhere\"。表のセルでも列が画面幅に収まります。whitespace=\"pre-wrap\" は人が入力した改行のためのもので、表のセルでは識別子を折り返せません。",
+    "breakColumnOwner": "担当者",
+    "breakColumnEmail": "メールアドレス",
+    "breakSampleName": "佐藤"
   },
   "themeShowcase": {
     "page": {
@@ -1254,5 +1259,184 @@
     "attach": "ファイルを添付",
     "enterHint": "Enter で送信 · Shift + Enter で改行",
     "sendComment": "コメントを送信"
+  },
+  "tcgm": {
+    "demoNotice": "DESIGN PROTOTYPE · 掲載カード・価格・店舗・発売予定はすべて架空のサンプルです。",
+    "brandAlt": "TCG-M",
+    "nav": {
+      "cards": "カードを探す",
+      "news": "ニュース",
+      "calendar": "発売カレンダー",
+      "watchlist": "ウォッチリスト",
+      "method": "データと編集方針",
+      "label": "メインナビゲーション"
+    },
+    "header": {
+      "search": "カード検索",
+      "watchlist": "ウォッチリスト",
+      "tryApp": "アプリを体験",
+      "openMenu": "メニューを開く",
+      "menu": "メニュー"
+    },
+    "hero": {
+      "eyebrow": "Different cards. Same passion.",
+      "titleLine1": "好きなカードを、",
+      "titleLine2": "もっと見つけよう。",
+      "leadLine1": "気になる一枚から、新しい発見まで。",
+      "leadLine2": "カード情報・価格比較・ニュースを、ひとつの場所で。",
+      "searchPlaceholder": "カード名・番号・セット名で検索",
+      "searchLabel": "カード名・番号・セット名",
+      "artAlt": "淡い空の中に広がるオリジナルのカードイラスト",
+      "artTag": "More cards. More possibilities.",
+      "hintTitles": "さまざまなタイトル",
+      "hintCompare": "条件をそろえて比較",
+      "hintDiscover": "新しい発見"
+    },
+    "games": {
+      "label": "タイトルで絞り込む",
+      "all": "すべて",
+      "pokemon": "ポケモンカード",
+      "onepiece": "ONE PIECE",
+      "yugioh": "遊戯王",
+      "duel": "デュエマ",
+      "mtg": "MTG",
+      "other": "その他"
+    },
+    "card": {
+      "classifiedAs": "分類例：{game}",
+      "priceLabel": "掲載ショップの販売価格",
+      "noPrice": "価格情報なし",
+      "shippingNote": "送料別",
+      "sampleNote": "サンプル",
+      "sampleBadge": "SAMPLE",
+      "artAlt": "架空のカード：{name}",
+      "watchAdd": "{name}をウォッチに追加",
+      "watchRemove": "{name}をウォッチリストから削除"
+    },
+    "cards": {
+      "demo-01": {
+        "name": "星渡りの案内人",
+        "edition": "通常版"
+      },
+      "demo-02": {
+        "name": "空色のアトリエ",
+        "edition": "ホロ仕様"
+      },
+      "demo-03": {
+        "name": "月明かりの庭園",
+        "edition": "通常版"
+      },
+      "demo-04": {
+        "name": "珊瑚の旅路",
+        "edition": "別イラスト版"
+      },
+      "demo-05": {
+        "name": "風をつなぐ手紙",
+        "edition": "通常版"
+      },
+      "demo-06": {
+        "name": "夜明けのプリズム",
+        "edition": "ホロ仕様"
+      }
+    },
+    "collection": {
+      "eyebrow": "Explore the collection",
+      "title": "カードとの、新しい出会い。",
+      "action": "カードを探す",
+      "count": "{count}件のサンプル",
+      "note": "以下はデザイン確認用の架空カードです。実在タイトルの公式カードではありません。",
+      "emptyTitle": "条件に合うカードが見つかりませんでした",
+      "emptyBody": "タイトルやカード番号を変えて検索してください。",
+      "reset": "絞り込みをリセット"
+    },
+    "news": {
+      "eyebrow": "Read & discover",
+      "title": "トレカを、もっと知る。",
+      "action": "記事を読む",
+      "sample": "サンプル記事",
+      "meta": "2026.09.24 · 4分で読む",
+      "manual": "手動で切り替え · 自動再生なし"
+    },
+    "articles": {
+      "compare": {
+        "title": "価格を見る前に。比較で確認したい5つのこと",
+        "cat": "はじめてガイド"
+      },
+      "edition": {
+        "title": "同じカード名でも違う？版・加工の見分け方",
+        "cat": "カードの知識"
+      },
+      "watch": {
+        "title": "気になるカードを、自分のリストにまとめよう",
+        "cat": "使い方"
+      },
+      "sources": {
+        "title": "価格データの「更新日時」は、なぜ大切？",
+        "cat": "データの読み方"
+      }
+    },
+    "releases": {
+      "eyebrow": "Coming next",
+      "title": "楽しみを、カレンダーに。",
+      "action": "カレンダーを見る",
+      "view": "予定を見る"
+    },
+    "release": {
+      "prism": {
+        "title": "Prism World — 空の章",
+        "kind": "オリジナル架空セット"
+      },
+      "notes": {
+        "title": "Collector's Notes Vol.01",
+        "kind": "ガイド公開例"
+      },
+      "study": {
+        "title": "Edition Study — 光と影",
+        "kind": "オリジナル架空セット"
+      }
+    },
+    "trust": {
+      "eyebrow": "Clarity comes first",
+      "titleLine1": "比べるための情報を、",
+      "titleLine2": "わかりやすく。",
+      "bodyLine1": "価格だけでなく、版・状態・送料・更新日時まで。",
+      "bodyLine2": "納得して選ぶための手がかりを届けます。",
+      "link": "データと編集方針",
+      "editionTitle": "同じ版・状態を確認",
+      "editionBody": "通常版と別イラスト版を区別して比較。",
+      "freshnessTitle": "更新日時を明記",
+      "freshnessBody": "掲載時点と現在の条件は異なる場合があります。",
+      "adsTitle": "広告と比較を分ける",
+      "adsBody": "PR表示と並び順の理由をわかりやすく。"
+    },
+    "footer": {
+      "taglineLine1": "好きなカードで、つながる世界へ。",
+      "taglineLine2": "トレカの価格比較・カード情報・ニュース",
+      "accent": "Different cards. Same passion.",
+      "colFind": "探す・比べる",
+      "colRead": "読む・知る",
+      "colAbout": "TCG-Mについて",
+      "linkSearch": "カード検索",
+      "linkCompare": "版の比較",
+      "linkWatchlist": "ウォッチリスト",
+      "linkNews": "ニュース・ガイド",
+      "linkCalendar": "発売カレンダー",
+      "linkBasics": "比較の基本",
+      "linkMethod": "データと編集方針",
+      "linkComponents": "UIコンポーネント",
+      "linkConsent": "デモの保存設定",
+      "legal": "© TCG-M · tcg-m.com · Design prototype",
+      "disclaimer": "各タイトル名は分類例です。公式サービス・提携を示すものではありません。"
+    },
+    "toast": {
+      "saved": "このブラウザーに保存しました",
+      "removed": "ウォッチリストから削除しました"
+    },
+    "dialog": {
+      "title": "架空の予定",
+      "body": "これはカレンダー表示例です。実際の商品発売・予約受付ではありません。",
+      "sample": "サンプル",
+      "date": "2026年9月 · 予定日はデモ用"
+    }
   }
 }