@godxjp/ui 19.1.0 → 19.2.0

package/docs/layout/auth-shell-variants.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Input, PasswordInput, RadioGroup } from "@godxjp/ui/data-entry";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import {
+  AuthDivider,
+  AuthFooter,
+  AuthIdentity,
+  AuthShell,
+  AuthStack,
+  Flex,
+} from "@godxjp/ui/layout";
+import type { AuthShellProps } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+type AuthShellVariant = NonNullable<AuthShellProps["variant"]>;
+type AuthShellDensity = NonNullable<AuthShellProps["density"]>;
+
+/**
+ * AuthShell の 2 つの直交軸: `variant`（シェルの寸法）と `density`（操作要素の段）。
+ *
+ * `variant="default"` は素の中央寄せシェル、`variant="canonical"` は GoDX ID の正準寸法。
+ * `density` は独立した別軸で、既定は variant から導出されます（canonical なら compact、
+ * default なら comfortable = 44px の WCAG タッチ下限）。明示的に渡せばその導出を上書きでき、
+ * 4 通りの組み合わせがすべて成立します。
+ *
+ * このページは AuthShell を 1 つだけ描画します。AuthShell は banner / main / contentinfo の
+ * ランドマークをページ全体に張るため、比較のために 2 つ並べるとランドマークが重複し、
+ * それ自体がアクセシビリティ違反になります。そこで軸はページ内のラジオで切り替えます。
+ * 初期表示は `variant="default"` × `density="comfortable"`（=素の AuthShell そのもの）。
+ *
+ * SCR-001 の正準ログイン（preset="login"）は Auth Shell ページ、preset の各フローは
+ * Auth Shell Device / Auth Shell Context / Auth Recovery ページが受け持ちます。
+ * ここに幅・余白・色の指定は 1 つもありません。すべてトークンが所有しています。
+ */
+export default function Demo() {
+  const [variant, setVariant] = useState<AuthShellVariant>("default");
+  const [density, setDensity] = useState<AuthShellDensity>("comfortable");
+
+  return (
+    <AuthShell
+      variant={variant}
+      density={density}
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <AuthIdentity title="GoDX ID" requester="経費精算がサインインを要求しています" />
+
+      {/* preset を持たないシェルの列は子要素の間隔を持たないため、2 枚のカードの間隔は
+          ページ側の Flex gap が所有します。幅は依然としてシェルのトークンが所有します。 */}
+      <Flex direction="col" gap="md">
+        <Card>
+          <CardHeader>
+            <CardTitle level={1}>サインイン</CardTitle>
+            <CardDescription>組織アカウントの資格情報を入力してください。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="auth-axis-email" label="メールアドレス" layout="vertical" required>
+                <Input id="auth-axis-email" type="email" placeholder="you@example.co.jp" />
+              </FormField>
+              <FormField id="auth-axis-password" label="パスワード" layout="vertical" required>
+                <PasswordInput id="auth-axis-password" />
+              </FormField>
+              <Button fullWidth>サインイン</Button>
+              <AuthDivider label="または" />
+              <Button variant="outline" fullWidth>
+                パスキーでサインイン
+              </Button>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        {/* 軸の切り替え。上のカードの操作要素の高さとカード内の余白がその場で変わるので、
+            density がシェル全体に閉じた段であることが読み取れます。 */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>このページの表示軸</CardTitle>
+            <CardDescription>
+              2 つの prop は独立しています。片方を変えてももう片方は変わりません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="auth-axis-variant"
+                label="variant · シェルの寸法"
+                layout="vertical"
+                helper="canonical は GoDX ID の正準寸法、default は素の中央寄せシェル。"
+              >
+                <RadioGroup
+                  orientation="horizontal"
+                  value={variant}
+                  onValueChange={(next) => setVariant(next as AuthShellVariant)}
+                  options={[
+                    { value: "default", label: "default（既定）" },
+                    { value: "canonical", label: "canonical（正準）" },
+                  ]}
+                />
+              </FormField>
+              <FormField
+                id="auth-axis-density"
+                label="density · 操作要素の段"
+                layout="vertical"
+                helper="comfortable は 44px のタッチ下限、compact は情報密度を優先した段。"
+              >
+                <RadioGroup
+                  orientation="horizontal"
+                  value={density}
+                  onValueChange={(next) => setDensity(next as AuthShellDensity)}
+                  options={[
+                    { value: "comfortable", label: "comfortable（44px）" },
+                    { value: "compact", label: "compact" },
+                  ]}
+                />
+              </FormField>
+              <Text size="sm" tone="muted">
+                現在の組み合わせ: variant=&quot;{variant}&quot; · density=&quot;{density}&quot;
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </AuthShell>
+  );
+}

package/docs/layout/auth-shell.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent } from "@godxjp/ui/data-display";
+import { FormField, Input } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AuthDivider,
+  AuthFooter,
+  AuthIdentity,
+  AuthShell,
+  AuthStack,
+  Flex,
+} from "@godxjp/ui/layout";
+
+/**
+ * SCR-001 Login visual contract. `?state=standalone|one-line|wrapped` drives the package visual
+ * test; all three keep the same card anchor without consumer CSS or fake requester data.
+ *
+ * The composition mirrors the documented consumer page exactly (gh#263): NO top brand bar (the
+ * canonical SCR-001 artboard has none — the in-flow AuthIdentity mark IS the brand), a header-less
+ * `<CardContent solo>` body, `AuthFooter` as the third direct child (the login preset's third grid
+ * row), and a plain 12px text-link row like the artboard's.
+ */
+export default function Demo() {
+  const state = new URLSearchParams(window.location.search).get("state") ?? "one-line";
+  const requester =
+    state === "standalone"
+      ? undefined
+      : state === "wrapped"
+        ? "Platform console browser BFF is requesting sign in to this organization"
+        : "Attendance is requesting sign in";
+
+  return (
+    <AuthShell variant="canonical" preset="login">
+      <AuthIdentity title="GoDX ID" requester={requester} />
+      <Card>
+        <CardContent solo>
+          <AuthStack>
+            <Button fullWidth>パスキーでサインイン</Button>
+            <AuthDivider label="または" />
+            <FormField id="auth-email" label="メールアドレス" layout="vertical">
+              <Input id="auth-email" type="email" placeholder="you@example.co.jp" />
+            </FormField>
+            <Button variant="outline" fullWidth>
+              次へ
+            </Button>
+            <Flex justify="between" wrap>
+              <Text size="xs">
+                <a href="#register">アカウント登録</a>
+              </Text>
+              <Text size="xs">
+                <a href="#forgot">パスワードを忘れた</a>
+              </Text>
+            </Flex>
+          </AuthStack>
+        </CardContent>
+      </Card>
+      <AuthFooter product="GoDX ID" terms="利用規約" privacy="プライバシー" />
+    </AuthShell>
+  );
+}

package/docs/layout/auth-stack.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Field, Input } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { AuthDivider, AuthStack, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * AuthStack — canonical vertical rhythm for direct auth-card sections. The stack remains a neutral
+ * container, so labels, controls and actions retain their own semantic ownership.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="AuthStack" subtitle="認証カード内の12px垂直リズム">
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>メールまたはpasskey</CardTitle>
+          <CardDescription>
+            各sectionはpublic componentのままstackへ直接配置します。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AuthStack>
+            <Button fullWidth>Passkeyで続ける</Button>
+            <AuthDivider label="または" />
+            <Field id="auth-stack-email" label="メールアドレス">
+              <Input
+                id="auth-stack-email"
+                type="email"
+                autoComplete="username"
+                placeholder="you@example.com"
+              />
+            </Field>
+            <Button variant="outline" fullWidth>
+              メールで続ける
+            </Button>
+          </AuthStack>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/layout/centered-shell.tsx

@@ -0,0 +1,102 @@
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { CenteredShell, Flex, ResponsiveGrid, Topbar } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
+ * account / self-service, standalone settings). A padded topbar with real actions reusing AppShell's
+ * chrome WITHOUT a sidebar, a width-tiered centred column that is top-aligned + scrolls, and an
+ * optional footer. Composed only from real @godxjp/ui components — zero custom CSS, no hand-rolled
+ * bar. Fills the gap between AppShell (needs a sidebar) and AuthShell (unauthenticated narrow card).
+ */
+export default function Demo() {
+  const services = [
+    { id: "attendance", name: "勤怠", desc: "打刻・勤務表" },
+    { id: "messaging", name: "チャット", desc: "社内メッセージ" },
+    { id: "ledger", name: "会計", desc: "請求・支払" },
+  ];
+
+  return (
+    <CenteredShell
+      width="md"
+      topbar={
+        <Topbar
+          start={
+            <Flex align="center" gap="sm">
+              <Logo glyph="G" />
+              <Text weight="medium">GodX ID</Text>
+            </Flex>
+          }
+          end={
+            <Flex align="center" gap="sm">
+              <AppSettingPicker kind="locale" />
+              <Button variant="ghost" size="sm">
+                <Avatar className="size-6">
+                  <AvatarFallback>田</AvatarFallback>
+                </Avatar>
+                田中 太郎
+              </Button>
+            </Flex>
+          }
+        />
+      }
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX · プライバシー · 利用規約
+        </Text>
+      }
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={1}>マイページ</CardTitle>
+            <CardDescription>アカウントとサービスの概要。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="xs">
+              <Text weight="medium">田中 太郎</Text>
+              <Text size="sm" tone="muted">
+                tanaka@example.com · 組織: GodX 株式会社
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>サービス</CardTitle>
+            <CardDescription>利用中のアプリを開きます。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+              {services.map((s) => (
+                <Card key={s.id}>
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      <Text weight="medium">{s.name}</Text>
+                      <Text size="sm" tone="muted">
+                        {s.desc}
+                      </Text>
+                      <Button variant="outline" size="sm">
+                        開く
+                      </Button>
+                    </Flex>
+                  </CardContent>
+                </Card>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </CenteredShell>
+  );
+}

package/docs/layout/error-surface/examples/application-403.tsx

@@ -0,0 +1,84 @@
+import { Button, Logo } from "@godxjp/ui/general";
+import {
+  AppShell,
+  ErrorSurface,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+import { BarChart3, FileText, LayoutDashboard, Users } from "lucide-react";
+
+/**
+ * 403 — `mode="application"`. The failure happened INSIDE the authenticated app, so the app shell is
+ * PRESERVED: the sidebar nav, the topbar and the breadcrumb all survive, and only the page body is
+ * replaced. The user is never stranded on a chrome-less page with a single "go home" button.
+ *
+ * READ THE MODE CONTRACT: `mode="application"` does NOT make the component build a shell. It cannot
+ * — the nav sections, the product identity and the user menu are consumer-owned data. The mode says
+ * "this is what you put in AppShell's children": the surface returns just its own block, and the
+ * `AppShell` the route already renders stays mounted around it.
+ *
+ * 403 is the one status where WHY matters as much as WHAT, so both permission slots are used here:
+ * `permission` names the missing role and `organization` names the workspace the request was scoped
+ * to — that pair is what distinguishes "you need a role" from "you are in the wrong tenant". Both
+ * are semantic `<dt>/<dd>` rows whose LABELS are library-owned and localized; you pass bare values.
+ *
+ * Copy is shown inline here; in an app every string comes from the app's own `t()`.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "業務",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "reports", label: "レポート", icon: BarChart3 },
+      { id: "documents", label: "ドキュメント", icon: FileText },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+export default function Demo() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="reports"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "GodX Console", role: "管理コンソール" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={<Logo glyph="G" />}
+          end={
+            <Flex align="center" gap="sm">
+              <AppSettingPicker kind="locale" />
+              <Button variant="ghost" size="sm">
+                田中 太郎
+              </Button>
+            </Flex>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="レポート"
+        breadcrumb={[{ label: "ホーム", to: "#" }, { label: "レポート" }]}
+      >
+        <ErrorSurface
+          mode="application"
+          status={403}
+          title="このページへのアクセス権限がありません"
+          description="レポートの閲覧には管理者によるロール付与が必要です。付与後に再度お試しください。"
+          permission="reports.view"
+          organization="株式会社ゴッドエックス"
+          action={<Button>ダッシュボードへ戻る</Button>}
+        />
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/error-surface/examples/application-404.tsx

@@ -0,0 +1,77 @@
+import { Button, Logo } from "@godxjp/ui/general";
+import {
+  AppShell,
+  ErrorSurface,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+import { BarChart3, FileText, LayoutDashboard, Users } from "lucide-react";
+
+/**
+ * 404 — `mode="application"` with the optional request ID. Same preserved shell, same surface; only
+ * `status` changes, and with it the default icon (SearchX) and tone (muted — a miss is neutral, not
+ * a warning). You do not re-pick the icon or the colour per status: the status IS the input.
+ *
+ * `requestId` is a semantic metadata slot, not a paragraph you write. The surface renders it as a
+ * `<dt>/<dd>` pair with a localized "Request ID" label and a mono/tabular value, so the correlation
+ * id can be read out or copied accurately for support, and so a screen reader announces the
+ * label↔value relationship instead of a run-on sentence. Omit the prop when there is no id —
+ * metadata rows are optional and the list disappears entirely when every slot is empty.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "業務",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "reports", label: "レポート", icon: BarChart3 },
+      { id: "documents", label: "ドキュメント", icon: FileText },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+export default function Demo() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="documents"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "GodX Console", role: "管理コンソール" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={<Logo glyph="G" />}
+          end={
+            <Flex align="center" gap="sm">
+              <AppSettingPicker kind="locale" />
+              <Button variant="ghost" size="sm">
+                田中 太郎
+              </Button>
+            </Flex>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="ドキュメント"
+        breadcrumb={[{ label: "ホーム", to: "#" }, { label: "ドキュメント" }]}
+      >
+        <ErrorSurface
+          mode="application"
+          status={404}
+          title="ページが見つかりません"
+          description="お探しのドキュメントは移動または削除された可能性があります。一覧から選び直してください。"
+          requestId="01J9Z0M7Q2K5S7WQ3T5N8V2H4B"
+          action={<Button>ドキュメント一覧へ</Button>}
+        />
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/error-surface/examples/system-500.tsx

@@ -0,0 +1,47 @@
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { ErrorSurface } from "@godxjp/ui/layout";
+import { RotateCcw } from "lucide-react";
+
+/**
+ * 500 — `mode="system"`. The app itself is the thing that failed, so there is no authenticated shell
+ * to preserve (the session, the nav data and the user menu may all be unavailable). Here the surface
+ * DOES own the whole page: it renders `CenteredShell align="center"` itself, which flips
+ * `--centered-shell-column-offset-block` to `auto` so the column centres in the `100dvh` shell at
+ * 1440 / 1024 / 390 with NO consumer `min-h-dvh`, flex CSS, media query or `className`. Auto block
+ * offsets collapse when the content is taller than the viewport, so a long localized message
+ * scrolls from the top instead of being clipped.
+ *
+ * That is the whole difference between the two modes, and it is why `mode` is not cosmetic: in
+ * `application` mode the surface returns a body and inherits geometry, in `system` mode it IS the
+ * page and owns geometry.
+ *
+ * `width` defaults to the `sm` (~32rem) system-surface tier; the description's own measure is owned
+ * by `--empty-state-description-max-width`. `titleLevel` defaults to `1` in system mode, because a
+ * system page has no page `h1` above it — the error title IS the document's heading.
+ *
+ * `brand` and `footer` are system-mode-only slots (a `Logo` above the status code, the page
+ * contentinfo below). Drop both for a bare surface.
+ */
+export default function Demo() {
+  return (
+    <ErrorSurface
+      mode="system"
+      status={500}
+      brand={<Logo glyph="G" />}
+      title="問題が発生しました"
+      description="予期しないエラーが発生しました。担当チームに通知済みです。時間をおいて再度お試しください。"
+      requestId="01J9Z0M7Q2K5S7WQ3T5N8V2H4B"
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX
+        </Text>
+      }
+      action={
+        <Button>
+          <RotateCcw />
+          再読み込み
+        </Button>
+      }
+    />
+  );
+}

package/docs/layout/error-surface/examples/system-503.tsx

@@ -0,0 +1,48 @@
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { ErrorSurface } from "@godxjp/ui/layout";
+import { RotateCcw } from "lucide-react";
+
+/**
+ * 503 — `mode="system"` with the optional MAINTENANCE slot. Same viewport-centred geometry as 500;
+ * the tone defaults to `warning` rather than `destructive` because the outage is planned and finite.
+ *
+ * `maintenance` is TIMING DATA, not a string you format. Pass ISO-8601 instants plus an IANA zone
+ * and the surface runs `Intl.DateTimeFormat(locale, …).formatRange()` (CLDR) for the active locale,
+ * so ja / en / vi each read natively and the visible text is paired with a machine-readable
+ * `<time dateTime>`. A hand-built `"18:00 - 20:00 JST"` cannot localize and is the anti-pattern this
+ * slot exists to remove. Omit `end` for an open-ended outage — a single instant is shown.
+ *
+ * `progress` (0–100) adds a labelled `Progress` meter, announced as "メンテナンス進捗 40%" via
+ * `Intl.NumberFormat` percent style — never colour-only. It is deliberately SERVER-SENT: computing
+ * "how far through the window are we" from the client clock makes SSR and hydration disagree, and
+ * an exception page must be readable before hydration. Omit it for an outage with no published
+ * progress; omit `maintenance` entirely for an unplanned 503.
+ */
+export default function Demo() {
+  return (
+    <ErrorSurface
+      mode="system"
+      status={503}
+      brand={<Logo glyph="G" />}
+      title="サービスを一時的にご利用いただけません"
+      description="計画メンテナンスを実施しています。終了予定時刻を過ぎてから再度お試しください。"
+      maintenance={{
+        start: "2026-08-02T18:00:00Z",
+        end: "2026-08-02T20:00:00Z",
+        timeZone: "Asia/Tokyo",
+        progress: 40,
+      }}
+      footer={
+        <Text size="xs" tone="muted">
+          2026 GodX
+        </Text>
+      }
+      action={
+        <Button>
+          <RotateCcw />
+          再読み込み
+        </Button>
+      }
+    />
+  );
+}