[
{
"code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: body has NO padding (content is flush against the edges)\n// Cause: the bare has ZERO inner padding — it MUST contain .\n// Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌ …fields… …fields… // hand-rolled padding\n// ✅ …fields… . Only go flush deliberately for a full-bleed table:\n// ✅ /)\n// vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n// empty / (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n// Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌ 公開中 // lifecycle → keep icon\n// ✅
{page} \n// ✅ Page.layout = [Layout] // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n// Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅ seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅ columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅ ;\n\nexport function SignUpCard() {\n const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) });\n const onSubmit = handleSubmit(async (v) => {\n await fetch(\"/api/signup\", { method: \"POST\", body: JSON.stringify(v) });\n });\n return (\n \n アカウント作成 \n \n \n \n アカウントを作成 \n \n \n );\n}",
"name": "signup-form",
"tagline": "Card-wrapped sign-up form using react-hook-form + zod with FormField/Input and a CardFooter action bar (real @godxjp/ui API).",
"tags": [
"form",
"auth",
"sign-up",
"zod",
"validation",
"react-hook-form"
]
},
{
"aliases": [
"settings-tabs",
"settings-page",
"settings-layout"
],
"code": "// Research basis: GitHub, Google Account, Microsoft Account, Atlassian Account settings +\n// the IBM Carbon form grid. Every destination is a URL, so deep links and browser back/forward\n// work for free and the active item is derived from the route — never from local tab state.\n//\n// Desktop (>= lg): persistent vertical local nav on the left + bounded content on the right.\n// Mobile (< lg): the SAME routes become a horizontal, scrollable tab strip above the content.\n// Styling uses ONLY real semantic token classes (bg-muted / text-foreground / text-muted-foreground)\n// and responsive/visibility utilities — the library ships NO bespoke settings shell/nav CSS classes.\nimport { NavLink, Outlet, Navigate } from \"react-router-dom\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Form, FormField, Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\n\nconst SECTIONS = [\n { to: \"general\", label: \"基本情報\" },\n { to: \"security\", label: \"セキュリティ\" },\n { to: \"notifications\", label: \"通知\" },\n] as const;\n\n// One link renderer for BOTH breakpoints. NavLink gives us the active state (and sets\n// aria-current=\"page\") straight from the URL; semantic tokens only, no invented classes.\nconst link = ({ isActive }: { isActive: boolean }) =>\n [\n \"rounded-md px-3 py-2 text-sm no-underline transition-colors whitespace-nowrap\",\n isActive\n ? \"bg-muted text-foreground font-medium\"\n : \"text-muted-foreground hover:text-foreground\",\n ].join(\" \");\n\nexport function SettingsLayout() {\n return (\n \n {/* < lg: horizontal, scrollable route tabs. Flex owns the row and the gap — hideFrom /\n hideBelow own the breakpoint, so neither nav needs a hand-rolled flex or gap utility. */}\n \n {SECTIONS.map((s) => (\n {s.label} \n ))}\n \n {/* >= lg: persistent vertical local nav (bounded width, does not shrink). */}\n \n {SECTIONS.map((s) => (\n {s.label} \n ))}\n \n {/* Bounded content region (~42rem) — the routed section renders here. min-w-0 lets it shrink. */}\n \n );\n}\n\n// A settings section. Horizontal label/control rows on desktop (collapse to stacked on mobile),\n// controls bounded to a semantic width — set ONCE on the \n \n \n\n {/* 3) BILLING HANDOFF — a section. The state is a canonical StatusBadge (never a page-local\n status→colour map); money through Intl. */}\n \n \n 請求とサブスクリプション \n \n \n ビジネス（年額） \n \n {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n \n \n \n \n\n {/* 4) DANGER ZONE — a real boundary: Card accent=\"destructive\" (the rail comes from\n --destructive). The heading and each row say what is lost; no decorative icon. */}\n \n 取り消せない操作 \n \n \n setConfirmOpen(true)}>削除}\n />\n \n \n \n\n\n\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Section step > item step (gap=\"xl\" between sections, gap=\"sm\" inside one).\n// ✅ A Card only where there is a real boundary: a list of setting rows, the danger zone.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, titled by .\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT give every block Card + CardHeader + CardTitle + CardDescription (ui-audit card-per-section).\n// ⛔ Do NOT hand-roll padding (p-4), a status colour map, or a replacement.",
"name": "settings-section-rows",
"tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
"tags": [
"settings",
"account",
"billing",
"danger",
"preferences",
"listrow",
"card",
"admin"
]
},
{
"aliases": [
"pricing-table",
"plan-picker",
"pricing-card"
],
"code": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Badge, FeatureList } from \"@godxjp/ui/data-display\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Plan = {\n id: string;\n name: string;\n summary: string;\n /** Minor units of the ISO 4217 currency; formatted with Intl, never hand-built. */\n price: number;\n currency: string;\n recommended?: boolean;\n current?: boolean;\n features: { state: \"included\" | \"excluded\" | \"limited\"; label: string; description?: string }[];\n};\n\nexport function PricingPlans({ plans, onChoose }: { plans: Plan[]; onChoose: (id: string) => void }) {\n const { t, locale } = useTranslation();\n return (\n // 3 columns from the sm container step, 1 below it — the geometry is the preset's, not yours.\n \n {plans.map((plan) => {\n const money = new Intl.NumberFormat(locale, { style: \"currency\", currency: plan.currency });\n const digits = money.resolvedOptions().maximumFractionDigits ?? 0;\n return (\n // \"featured\" is the one recommended plan: a brand-toned perimeter, not a bigger card.\n \n \n {plan.name} \n {plan.summary} \n {plan.current ? {t(\"billing.currentPlan\")} : null}\n \n \n \n {money.format(plan.price / 10 ** digits)}\n \n {/* FeatureList owns the included / limited / excluded glyph, colour and sr-only prefix. */}\n \n \n onChoose(plan.id)}\n >\n {plan.current ? t(\"billing.currentPlan\") : t(\"billing.choosePlan\")}\n \n \n \n );\n })}\n \n );\n}",
"name": "pricing-plans",
"tagline": "Pricing plan cards — ResponsiveGrid preset + Card featured + FeatureList + tabular price. A composition, not a component (consumer request, debated 2026-10-09 on #1205).",
"tags": [
"pricing",
"plans",
"billing",
"card",
"composition"
]
},
{
"code": "import { AlertDialog, toast } from \"@godxjp/ui/feedback\";\n\n// The preset covers a typed challenge: confirm stays disabled until the input equals `slug`.\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n return (\n {\n toast.success(\"削除しました\");\n onOpenChange(false);\n }}\n />\n );\n}",
"name": "confirm-destructive",
"tagline": "Type-to-confirm destructive dialog — the AlertDialog PRESET with `challenge` (the compound AlertDialog* parts are the older way in; a body the preset does not cover is Dialog variant=\"destructive\").",
"tags": [
"dialog",
"confirm",
"destructive",
"delete"
]
},
{
"aliases": [
"cascading-selects",
"country-state-city",
"chained-selects",
"linked-selects"
],
"code": "// Live page: /showcase/form-dependent-selects (docs/showcase/form-dependent-selects.tsx).\n// Three rules: (1) child disabled until parent has a value + helper saying why;\n// (2) child loading while its options fetch; (3) parent change resets EVERY descendant to \"\".\n// Reset to \"\", Select's controlled empty value — undefined flips it to uncontrolled.\nimport * as React from \"react\";\nimport { Form, FormField, Select } from \"@godxjp/ui/data-entry\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Option = { value: string; label: string };\ntype Address = { country: string; region: string; city: string };\n\n// Fetch options for a parent value. The answer is stored WITH the parent it answers, so\n// `loading` is derived and a slow answer for an OLD parent is never shown on the new one.\nfunction useChildOptions(parent: string, fetchOptions: (parent: string) => Promise) {\n const [answer, setAnswer] = React.useState<{ parent: string; options: Option[] }>({ parent: \"\", options: [] });\n React.useEffect(() => {\n if (!parent) return;\n let live = true;\n void fetchOptions(parent).then((options) => { if (live) setAnswer({ parent, options }); });\n return () => { live = false; };\n }, [parent, fetchOptions]);\n const ready = parent !== \"\" && answer.parent === parent;\n return { options: ready ? answer.options : [], loading: parent !== \"\" && !ready };\n}\n\nexport function AddressFields({\n fetchRegions,\n fetchCities,\n}: {\n fetchRegions: (country: string) => Promise; // stable (module-level or useCallback)\n fetchCities: (region: string) => Promise;\n}) {\n const { t, locale } = useTranslation();\n const [value, setValue] = React.useState({ country: \"\", region: \"\", city: \"\" });\n const regions = useChildOptions(value.country, fetchRegions);\n const cities = useChildOptions(value.region, fetchCities);\n\n // ISO 3166-1 alpha-2 → the reader's language, no catalogue needed.\n const countries = React.useMemo(() => {\n const names = new Intl.DisplayNames([locale], { type: \"region\" });\n return [\"JP\", \"US\", \"VN\"].map((code) => ({ value: code, label: names.of(code) ?? code }));\n }, [locale]);\n\n return (\n \n );\n}",
"name": "dependent-selects",
"tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
"tags": [
"form",
"select",
"dependent",
"cascading",
"address",
"loading",
"reset"
]
},
{
"aliases": [
"card-selection",
"selectable-cards",
"bulk-delete-cards",
"grid-bulk-actions"
],
"code": "// Live page: /showcase/card-grid-selection (docs/showcase/card-grid-selection.tsx).\n// DataTable.BulkActions reads the table context only when one exists — outside a table pass\n// `count`: it renders nothing at 0, and the localised \"N selected\" + a labelled region above 0.\n// The Checkbox's inline label is the item name: the name is the click target and the\n// accessible name. Do NOT make the whole Card an onClick div.\nimport * as React from \"react\";\nimport { FolderOpen, Trash2 } from \"lucide-react\";\nimport { Card, CardContent, DataTable, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Checkbox } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog, Toaster, toast } from \"@godxjp/ui/feedback\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Item = { id: string; name: string };\n\nexport function SelectableCardGrid({ source }: { source: Item[] }) {\n const { t } = useTranslation();\n const [items, setItems] = React.useState(source);\n const [selected, setSelected] = React.useState>(new Set());\n const [confirmOpen, setConfirmOpen] = React.useState(false);\n const [confirmCount, setConfirmCount] = React.useState(0); // frozen: selection clears on confirm\n\n const all = items.length > 0 && items.every((i) => selected.has(i.id));\n const selectAll: boolean | \"indeterminate\" = all ? true : selected.size > 0 ? \"indeterminate\" : false;\n\n const deleteSelected = () => {\n const removed = new Set(selected);\n setItems((cur) => cur.filter((i) => !removed.has(i.id)));\n setSelected(new Set());\n toast(t(\"files.deleted\", { count: removed.size }), {\n action: {\n label: t(\"files.undo\"),\n // restore in the SOURCE order, not appended at the end\n onClick: () => setItems((cur) => source.filter((i) => removed.has(i.id) || cur.some((c) => c.id === i.id))),\n },\n });\n };\n\n if (items.length === 0) {\n return (\n setItems(source)}>{t(\"files.reset\")}}\n />\n );\n }\n\n return (\n \n \n setSelected(next === true ? new Set(items.map((i) => i.id)) : new Set())}\n >\n {t(\"files.selectAll\")}\n \n \n { setConfirmCount(selected.size); setConfirmOpen(true); }}>\n \n \n \n \n {items.map((item) => (\n \n \n \n setSelected((prev) => {\n const next = new Set(prev);\n if (on === true) next.add(item.id); else next.delete(item.id);\n return next;\n })\n }\n >\n {item.name}\n \n \n \n ))}\n \n \n );\n}",
"name": "card-grid-selection",
"tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
"tags": [
"selection",
"bulk",
"cards",
"grid",
"delete",
"undo",
"empty",
"checkbox"
]
},
{
"code": "// Server (Laravel): defer the heavy prop\n// Inertia::render('crm/coupons/index', [\n// 'coupons' => Inertia::defer(fn () => Coupon::all()),\n// ]);\nimport { Card, CardContent, DataTable } from \"@godxjp/ui/data-display\";\nimport type { ColumnDef } from \"@godxjp/ui/data-display\";\nimport { SkeletonTable } from \"@godxjp/ui/feedback\";\n\ntype Coupon = { id: string; name: string };\nconst columns: ColumnDef[] = [{ key: \"name\", header: \"クーポン名\" }];\n\n// coupons is undefined until the deferred request resolves\nexport default function Coupons({ coupons }: { coupons?: Coupon[] }) {\n return (\n \n \n {!coupons\n ? c.id} />}\n \n \n );\n}",
"name": "deferred-loading",
"tagline": "Inertia deferred props with a Skeleton fallback — SkeletonTable while data loads, then DataTable (real @godxjp/ui API).",
"tags": [
"loading",
"skeleton",
"deferred",
"inertia",
"table"
]
},
{
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n const [q, setQ] = useState(\"\")\n const [status, setStatus] = useState(\"all\")\n const [page, setPage] = useState(1)\n\n const filtered = useMemo(() => coupons.filter((c) => {\n if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n if (status !== \"all\" && c.status !== status) return false\n return true\n }), [coupons, q, status])\n const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n const columns: ColumnDef[] = [\n { key: \"name\", header: \"クーポン名\", render: (c) => {c.name} },\n { key: \"scope\", header: \"スコープ\" }, // a category is plain text; Badge is for the status column only\n { key: \"status\", header: \"ステータス\", render: (c) => \n {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-* or gap-* */}\n {/* No subtitle that restates the title, no StatCard row: the total is Pagination's showTotal. */}\n \n \n {/* Toolbar is the filter-bar primitive (standalone, above the table surface). It WRAPS and\n never scrolls sideways (rule #51); past 2–4 filters, see the \"list-filters\" pattern. Never a\n hand-built Flex/Card of FormFields (ui-audit hand-rolled-filter-bar). */}\n { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n {/* SearchInput is value + onSearch(v) — NOT onChange */}\n { setQ(v); setPage(1) }} />\n {/* Status view of the SAME table = a filter: Segmented with count for 2-4 statuses, this\n Select past 4. Never Tabs: Tabs switch panels with their own columns (gh#1324). */}\n \n { setStatus(v); setPage(1) }}>\n \n 全ステータス \n 公開中 \n 下書き \n \n \n \n \n\n \n \n {filtered.length === 0\n ? c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n \n \n\n {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n {filtered.length > PAGE_SIZE && (\n setPage(p)} />\n )}\n \n \n \n )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
"name": "inertia-list-page",
"tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar (above the table) + DataTable + Badge + Pagination. No KPI row, no restating subtitle.",
"tags": [
"inertia",
"list",
"table",
"page",
"filter",
"pagination",
"datatable",
"crm"
]
},
{
"code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n// Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n const member = MEMBERS.find((m) => m.id === id)\n\n if (!member) {\n return (\n <>\n \n \n router.visit(\"/members\")}> \n \n \n )\n }\n\n return (\n <>\n \n \n {/* Figures about one member are facts, not KPIs: Descriptions rows, not a StatCard row. */}\n \n \n {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n \n {member.id} \n {member.rank} \n {formatDate(member.registeredAt)} \n {`¥${member.total.toLocaleString()}`} \n {member.visits} \n \n \n \n \n \n )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
"name": "inertia-detail-page",
"tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) in one Card + EmptyState fallback. No KPI tile row.",
"tags": [
"inertia",
"detail",
"show",
"page",
"keyvaluegrid",
"crm"
]
},
{
"code": "// resources/js/layouts/crm-layout.tsx\nimport { router, usePage } from \"@inertiajs/react\"\nimport { AppShell, Sidebar } from \"@godxjp/ui/layout\"\nimport { LayoutDashboard } from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nexport function CrmLayout({ children }: { children: ReactNode }) {\n const { url } = usePage()\n const sections = [{ label: \"メイン\", items: [{ id: \"/dashboard\", label: \"ダッシュボード\", icon: LayoutDashboard }] }]\n return (\n router.visit(id)} sections={sections} product={{ name: \"JOVY CRM\" }} />}>\n {children}\n \n )\n}\n\n// ⚠️ GOTCHA 1 — persistent layout MUST be the ARRAY form.\n// A render fn `(page) => {page} ` is indistinguishable from a\n// component; Inertia React calls it with the page-PROPS object and renders that\n// object as a child → \"Objects are not valid as a React child {errors, auth, …}\".\nexport const withCrmLayout = [CrmLayout] // ✅ array → Inertia passes the page as children\n// page usage: Dashboard.layout = withCrmLayout\n\n// ⚠️ GOTCHA 2 — Inertia v3 SSRs even in `npm run dev`. NEVER call Math.random() or\n// argless new Date() during render (e.g. fabricating chart/demo numbers) → React\n// hydration mismatch (\"server rendered text didn't match the client\"). Seed\n// deterministically by index, or compute inside an event handler:\nconst seeded = (n: number) => { const x = Math.sin((n + 1) * 99.71) * 1e4; return x - Math.floor(x) }",
"name": "inertia-persistent-layout",
"tagline": "Inertia persistent layout (AppShell+Sidebar) — the array-form gotcha + the SSR/Math.random gotcha.",
"tags": [
"inertia",
"layout",
"appshell",
"sidebar",
"ssr",
"hydration",
"gotcha"
]
},
{
"aliases": [
"error-surface",
"errorsurface",
"403",
"404",
"500",
"503",
"exception-page"
],
"code": "// @godxjp/ui SHIPS . Do NOT hand-compose an error page from\n// the auth CenteredShell + a generic Card + a local \".canonical-auth-card\" — that workaround IS the regression.\n//\n// 403 / 404 → mode=\"application\": the surface is the BODY of the AppShell you ALREADY render\n// (sidebar + topbar + breadcrumb are PRESERVED, never reconstructed)\n// 500 / 503 → mode=\"system\": the surface OWNS the page (CenteredShell align=\"center\",\n// package-owned geometry at 1440 / 1024 / 390 — no min-h-dvh, no media query)\n// Docs page: docs/layout/error-surface/\n\nimport { Button, Logo, Text } from \"@godxjp/ui/general\";\nimport { AppShell, ErrorSurface, PageContainer, Sidebar } from \"@godxjp/ui/layout\";\n\n// ── WHAT THE COMPONENT OWNS ───────────────────────────────────────────────────────────\n// • status → icon + tone (ShieldAlert/warning · SearchX/muted · ServerCrash/destructive ·\n// Wrench/warning). You pass the NUMBER; you never write the lookup.\n// • EXACTLY ONE recovery action — a single slot; a 2nd element is dropped with a dev error.\n// • semantic metadata slots as real / pairs, with LIBRARY-owned localized labels:\n// requestId · permission · organization · maintenance{start,end,timeZone,progress}\n// • heading order (h2 in application mode under the PageContainer h1, h1 in system mode)\n// • the status code announced as \"HTTP status 403\", not the cardinal number \"403\"\n// PRODUCT COPY stays yours: title / description / action come from the APP's own t().\n\n// ── 403 / 404 — APPLICATION mode: PRESERVE the authenticated shell ─────────────────────\nexport function ForbiddenPage() {\n return (\n \n {t(\"errors.backHome\")}}\n />\n \n \n );\n}\n\n// ── 500 / 503 — SYSTEM mode: package-owned viewport-centred geometry ───────────────────\n// The component renders CenteredShell align=\"center\" itself → the column centres in the 100dvh\n// shell at 1440 / 1024 / 390. NO className, NO min-h-dvh, NO media query. Tall copy still scrolls\n// from the top (auto offsets collapse), so a long JA/VI message is never clipped.\nexport function MaintenancePage() {\n return (\n 2026 GodX }\n action={{t(\"errors.reload\")} }\n />\n );\n}\n\n// ── INERTIA / SSR — one Error page component, one expression ───────────────────────────\n// Laravel: Handler::render() → Inertia::render('Error', ['status' => $response->getStatusCode()])\n//\n// export default function Error({ status, requestId }) {\n// const isSystem = status >= 500\n// return (\n// {page} : page)\n//\n// SSR rules:\n// • ErrorSurface has NO client state / effects / portals → it renders fully server-side. An\n// exception page must be readable without hydration.\n// • Pass the maintenance window as a SERVER-SENT ISO-8601 string + an explicit IANA timeZone.\n// An argless new Date() or the server's local zone ⇒ hydration mismatch.\n// • A 500 page must NOT import the app's query client / data providers — the failure may be\n// inside them. ErrorSurface needs only the AppProvider that supplies the locale.\n//\n// THEMING: retune with tokens, never a className —\n// --error-surface-max-width | -gap | -padding-block(-compact) | -meta-gap | -meta-row-gap |\n// --error-surface-meta-border (default 'none', rule #44) | --error-surface-progress-max-width\n//\n// ANTI-PATTERNS: the auth CenteredShell + a generic Card (the workaround; it is the\n// UNAUTHENTICATED root with auth-card geometry) · rebuilding nav on the 403 page · two CTAs ·\n// className=\"min-h-dvh flex …\" · a hand-built \"18:00 - 20:00 JST\" string · writing the request id\n// into 'description' as prose instead of using the semantic slot.",
"name": "error-pages",
"tagline": "400 / 403 / 404 / 500 / 503 exception pages. USE THE COMPONENT: import { ErrorSurface } from \"@godxjp/ui/layout\". `mode=\"application\"` (400/403/404) is the body you put inside the AppShell the route already renders; `mode=\"system\"` (500/503) owns the page via CenteredShell align=\"center\".",
"tags": [
"error",
"errorsurface",
"403",
"404",
"500",
"503",
"maintenance",
"inertia",
"ssr",
"layout",
"emptystate",
"centeredshell"
]
},
{
"code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n// active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n// scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n公開中 // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n at the root:\n// auto-redirect to sign-in ONCE, skeleton stays (NOT a retry, NOT an alert)\n// forbidden (403) → permission message + access path (no retry)\n// notFound (404) → contextual not-found (no retry)\n// validation (400/422)→ corrective guidance (no retry)\n// transient (408/429/5xx/network) → Retry offered automatically\n// unknown → neutral; opt into Retry via showRetry/onRetry only if it can help\n// App root (once): redirectToSignIn(location.href)}>\nexport function MembersPanel({ query, orgId }: { query: any; orgId?: string }) {\n return (\n [] = [\n { key: \"name\", header: \"氏名\", render: (r) => {r.name} },\n { key: \"status\", header: \"ステータス\" },\n ];\n\n return (\n \n {/* Toolbar (filter bar) is STANDALONE and always visible so the user can change filters even\n while a query is idle/loading/empty. Changing a filter resets to page 1. It WRAPS, never\n scrolls sideways (rule #51); more than 2–4 filters → the \"list-filters\" pattern. Never a\n hand-built Flex/Card of FormFields (ui-audit hand-rolled-filter-bar). */}\n { setQ(\"\"); setStatus(\"all\"); setPage(1); }}>\n { setQ(v); setPage(1); }} />\n \n { setStatus(v); setPage(1); }}>\n \n すべて \n 有効 \n 招待中 \n \n \n \n \n\n {/* The table surface owns exactly ONE card. Pagination lives INSIDE the success branch, so it\n is hidden during prerequisite / loading / empty / error and for single-page results. */}\n r.id} /> \n );\n}\n// Responsive: Pagination's showTotal range + controls stack at narrow widths automatically.\n// A transient retry keeps q/status/page (they live in component state, not the query) — the\n// same page reloads in place; the user never loses their filters.",
"name": "data-table-page",
"tagline": "Filter (Toolbar) + table surface + bottom pagination driven by a query state machine — pagination shows ONLY for successful multi-page data; filters/page survive a transient retry.",
"tags": [
"table",
"pagination",
"filter",
"async",
"toolbar",
"datatable"
]
},
{
"aliases": [
"more-filters",
"many-filters",
"filter-sheet",
"advanced-filters",
"add-filter"
],
"code": "// Research basis: Shopify Polaris Filters (\"include no more than 2 or 3 promoted filters\"; a\n// More button opens a sheet with the rest), Linear (one Filter menu), IBM Carbon filtering\n// (filters hidden in a drawer/menu show how many are applied), WCAG 2.2 SC 1.4.10 Reflow\n// (search fields and controls are not in the 2-D exception: they reflow, they do not scroll).\n//\n// RULE #51: a filter bar WRAPS — stacked below 640px, extra rows above — at every width.\n// ❌ FilterBar overflow=\"scroll\" (removed in 33.0.0), or an\n// overflow-x-auto box around filters: the strip runs off-screen and clips its first label.\n// ❌ your own / of FormFields above the table, worst of all justify=\"between\" (filters\n// pushed to the far ends): ui-audit hand-rolled-filter-bar. Filters pack at the START; the\n// only far-end element is FilterBar's `actions` slot.\n// ✅ the common filters inline + ONE \"More filters\" Sheet for the rest + wrapping chips.\nimport { useState } from \"react\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport {\n Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader,\n SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FilterBar, FilterBarGroup } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Filters = Record<\"q\" | \"status\" | \"owner\" | \"region\" | \"channel\" | \"period\", string>;\nexport const NO_FILTERS: Filters = { q: \"\", status: \"\", owner: \"\", region: \"\", channel: \"\", period: \"\" };\n\nconst STATUS: Option[] = [{ value: \"open\", label: \"Open\" }, { value: \"paid\", label: \"Paid\" }, { value: \"void\", label: \"Void\" }];\nconst OWNER: Option[] = [{ value: \"me\", label: \"Me\" }, { value: \"team\", label: \"My team\" }];\n// Everything people reach for less often. Order = the order of the sheet.\nconst MORE: { key: \"region\" | \"channel\" | \"period\"; label: string; options: Option[] }[] = [\n { key: \"region\", label: \"Region\", options: [{ value: \"kanto\", label: \"Kanto\" }, { value: \"kansai\", label: \"Kansai\" }] },\n { key: \"channel\", label: \"Sales channel\", options: [{ value: \"web\", label: \"Web\" }, { value: \"store\", label: \"Store\" }] },\n { key: \"period\", label: \"Period\", options: [{ value: \"month\", label: \"This month\" }, { value: \"quarter\", label: \"This quarter\" }] },\n];\nconst LABELS: Record = {\n status: { label: \"Status\", options: STATUS },\n owner: { label: \"Owner\", options: OWNER },\n ...Object.fromEntries(MORE.map((f) => [f.key, f])),\n};\n\nexport function OrderFilters({ value, onValueChange, resultCount }: {\n value: Filters; onValueChange: (next: Filters) => void; resultCount: number;\n}) {\n const [moreOpen, setMoreOpen] = useState(false);\n const set = (key: keyof Filters, v: string) => onValueChange({ ...value, [key]: v });\n\n // ONE chip per applied filter — inline AND hidden ones, so nothing applied is out of sight.\n const chips = Object.entries(LABELS)\n .filter(([key]) => value[key as keyof Filters] !== \"\")\n .map(([key, f]) => ({\n value: key,\n label: `${f.label}: ${f.options.find((o) => o.value === value[key as keyof Filters])?.label ?? \"\"}`,\n }));\n if (value.q) chips.unshift({ value: \"q\", label: `Search: ${value.q}` });\n const hiddenApplied = MORE.filter((f) => value[f.key] !== \"\").length;\n\n return (\n set(\"q\", v), placeholder: \"Search orders\", ariaLabel: \"Search orders\" }}\n // The 2–4 most-used filters, INLINE. Typed filters wire each caption as the real .\n filters={[\n { value: \"status\", label: \"Status\", options: STATUS, selected: value.status, onSelectedChange: (v) => set(\"status\", v), placeholder: \"All\" },\n { value: \"owner\", label: \"Owner\", options: OWNER, selected: value.owner, onSelectedChange: (v) => set(\"owner\", v), placeholder: \"Anyone\" },\n ]}\n chips={chips}\n onChipRemove={(key) => set(key as keyof Filters, \"\")}\n hasActiveFilters={chips.length > 0}\n onClear={() => onValueChange(NO_FILTERS)}\n resultCount={resultCount}\n >\n {/* Children render after the typed filters, before the reset: ONE \"More filters\" control.\n count = hidden filters applied, so the closed sheet still says so. Button paints a 0 pill by\n default (showZero = true) — showZero={false} hides it when nothing hidden is applied (#1333). */}\n \n \n \n \n \n \n \n More filters \n Applied filters also show as chips above the list. \n \n \n {/* A Sheet scrolls VERTICALLY; the fields stack. The same FilterBarGroup labels them. */}\n \n {MORE.map((f) => (\n \n set(f.key, v)}>\n \n {f.options.map((o) => {o.label} )}\n \n \n \n ))}\n \n \n \n Show results \n \n \n \n );\n}\n// Phone width: the bar stacks (search, each filter, More filters, reset) and the chips wrap.\n// A row of filter CHIPS (ToggleGroup) takes `wrap` — it does not scroll sideways either.\n// Few filters (≤ 4)? Drop the Sheet: the plain bar in the data-table-page pattern is enough.",
"name": "list-filters",
"tagline": "A list page with MANY filters (cardinal rule #51) — FilterBar WRAPS; the 2–4 most-used filters stay inline, the rest sit behind ONE 'More filters' Button (count = hidden filters applied) that opens a Sheet; every applied filter is a removable chip. Never a sideways-scrolling strip.",
"tags": [
"filter",
"filters",
"list",
"toolbar",
"filter-bar",
"sheet",
"chips",
"search",
"responsive",
"datatable"
]
},
{
"aliases": [
"filter-layouts",
"faceted-filter",
"faceted-sidebar",
"saved-views-filter",
"docked-filter-panel",
"filter-panel",
"filter-menu"
],
"code": "// Live gallery: docs page navigation/filter-bar-layouts (every layout working, JA/EN/VI data,\n// measured at 1280 and 390: filters 12px apart, no sideways overflow).\n//\n// THE ONE RULE ALL ELEVEN SHARE: filters are PACKED at the start of the bar with its one gap.\n// The only element at the far end is FilterBar's actions slot (with the clear button). A Flex/Card\n// of FormFields above a table — worst with justify=\"between\" — is ui-audit hand-rolled-filter-bar.\n//\n// a inline packed ........ 2–4 frequent filters · Ant Design ProTable query form (collapsed)\n// + FilterBarGroup(Switch)\n// b search + Filter menu .. search does most of the work · Linear, GitHub issues\n// c promoted + More ....... more than 2–4 filters · Shopify Polaris IndexFilters → pattern list-filters\n// d saved views ........... a view = a whole filter set · Polaris IndexTable views, Jira\n// views={……} on FilterBar\n// e two rows .............. the query is the main input · Gmail, Amazon\n// … CSV 追加 } />\n// g faceted sidebar ....... many multi-select facets with counts · Amazon, Rakuten\n// h compact in a card ..... a secondary table owns its filters · GitHub file / Actions tables\n// …\n// \n// k docked panel .......... long sessions on one table · Airtable/Notion view filters, Jira, Gmail\n//\n// SUBMIT-DRIVEN SHAPES (docs page navigation/search-form) — when a live bar is the wrong tool:\n// l 検索条件フォーム ....... many conditions / heavy query / users expect 検索 · Ant Design\n// ProComponents QueryFilter → component SearchForm, pattern search-form\n// m condition builder ...... field / operator / value rows, all · any · \"1 AND (2 OR 3)\", saved\n// views · kintone filters, Salesforce filter logic → pattern condition-builder\n// n advanced search ........ label | input | what the row means · Google Advanced Search → pattern search-form\n// o list view + docked panel list-view picker, pin, search, Filters panel · Salesforce Lightning\n// list views → pattern condition-builder\n//\n// Below: b, g and k in full — the three that compose more than FilterBar.\nimport * as React from \"react\";\nimport { ListFilter, PanelRightClose, PanelRightOpen, SlidersHorizontal } from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle, DataTable, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { Checkbox } from \"@godxjp/ui/data-entry\";\nimport {\n Sheet, SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,\n} from \"@godxjp/ui/feedback\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { useMediaQuery } from \"@godxjp/ui/hooks\";\nimport { Flex, MasterDetail, ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"@godxjp/ui/layout\";\nimport {\n DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger,\n FilterBar, FilterBarGroup,\n} from \"@godxjp/ui/navigation\";\nimport type { PanelImperativeHandle } from \"react-resizable-panels\";\n\ntype Row = { id: string; name: string; country: string };\ntype Option = { value: string; label: string };\nconst COUNTRIES: Option[] = [{ value: \"vn\", label: \"Việt Nam\" }, { value: \"ph\", label: \"Philippines\" }];\nconst toggle = (list: string[], v: string, on: boolean) => (on ? [...list, v] : list.filter((x) => x !== v));\n\n// ── b. Search first + ONE Filter menu + chips (Linear / GitHub) ──────────────────────────────\nexport function SearchFirstMenu({ q, setQ, countries, setCountries }: {\n q: string; setQ: (v: string) => void; countries: string[]; setCountries: (v: string[]) => void;\n}) {\n const chips = countries.map((c) => ({ value: c, label: \"国: \" + COUNTRIES.find((o) => o.value === c)?.label }));\n return (\n setCountries(countries.filter((c) => c !== v))}\n hasActiveFilters={chips.length > 0 || q !== \"\"}\n onClear={() => { setQ(\"\"); setCountries([]); }}\n clearDisplay=\"icon\"\n >\n \n \n \n \n \n \n 国 · Country \n {COUNTRIES.map((c) => (\n setCountries(toggle(countries, c.value, on === true))}>\n {c.label}\n \n ))}\n \n \n \n \n {COUNTRIES.map((c) => (\n setCountries(toggle(countries, c.value, on === true))}>\n {c.label}\n \n ))}\n \n \n );\n}\n\n// ── g. Faceted sidebar (Amazon / Rakuten): MasterDetail rail on the left; a Sheet when narrow ─\nexport function FacetedList({ rows, columns, countries, setCountries }: {\n rows: Row[]; columns: ColumnDef[]; countries: string[]; setCountries: (v: string[]) => void;\n}) {\n const wide = useMediaQuery(\"(min-width: 768px)\");\n const table = r.id} /> \n 0} onClear={() => setCountries([])}>\n \n \n \n \n \n \n 絞り込み 結果を表示 \n \n \n {table}\n \n );\n}\n\n// ── k. Docked filter panel (Airtable / Jira / Gmail side panel) ──────────────────────────────\n// Persistent (not an overlay), resizable, collapsible, remembers open/closed; chips stay in the\n// bar above the table; below 1024px the same facets open in a Sheet instead.\nconst DOCK_KEY = \"my-app:list-filter-panel-open\";\nexport function DockedFilterList({ rows, columns, countries, setCountries }: {\n rows: Row[]; columns: ColumnDef[]; countries: string[]; setCountries: (v: string[]) => void;\n}) {\n const docked = useMediaQuery(\"(min-width: 1024px)\");\n const panelRef = React.useRef(null);\n const [open, setOpen] = React.useState(() => {\n try { return localStorage.getItem(DOCK_KEY) !== \"false\"; } catch { return true; }\n });\n const remember = (next: boolean) => {\n setOpen(next);\n try { localStorage.setItem(DOCK_KEY, String(next)); } catch { /* not remembered, still works */ }\n };\n const chips = countries.map((c) => ({ value: c, label: \"国: \" + COUNTRIES.find((o) => o.value === c)?.label }));\n const table = r.id} /> \n setCountries(countries.filter((c) => c !== v))}\n hasActiveFilters={chips.length > 0}\n onClear={() => setCountries([])}\n actions={docked ? (\n { if (open) panelRef.current?.collapse(); else panelRef.current?.expand(); remember(!open); }}>\n {open ? \n ) : (\n \n \n \n \n \n \n フィルター \n \n )}\n />\n {docked ? (\n \n {table} \n { const next = size.asPercentage > 0; if (next !== open) remember(next); }}>\n {/* Render nothing while collapsed: content squeezed to 0px wraps one glyph per line. */}\n {open && (\n \n フィルター \n )}\n \n \n ) : table}\n \n );\n}\n// SplitPane is the non-resizable alternative for k (its aside is always inline-end; aside={null}\n// closes it). A LEFT docked panel is g's MasterDetail rail=\"master\".",
"name": "filter-bar-layouts",
"tagline": "Eleven list-filter layouts from leading products, all FilterBar + existing primitives: (a) inline packed, (b) search-first + ONE Filter menu + chips, (c) promoted + More-filters Sheet, (d) saved views above the bar, (e) wide search then filters, (f) actions at the end + sticky, (g) faceted sidebar, (h) compact bar in a table card, (i) date range + quick ranges, (j) phone stack + Sheet, (k) docked side panel. Filters always pack at the START.",
"tags": [
"filter",
"filters",
"layout",
"faceted",
"facets",
"saved views",
"docked",
"panel",
"sidebar",
"chips",
"date range",
"mobile",
"list",
"datatable"
]
},
{
"aliases": [
"検索条件",
"検索フォーム",
"query-filter",
"query filter",
"advanced search",
"advanced-search",
"search-panel"
],
"code": "// Live examples: docs page navigation/search-form (l = SearchForm label-top and label-left,\n// n = advanced-search form). Research: Ant Design ProComponents QueryFilter (defaultCollapsed\n// true, defaultFormItemsNumber, layout vertical/horizontal, labelWidth, search/reset text);\n// Google Advanced Search (rows: all these words / this exact phrase / any of these words /\n// none of these words / numbers ranging from; then narrow by language, region, last update,\n// site, terms appearing, file type).\n//\n// WHICH SHAPE (rule #51): few filters applied as they change → FilterBar. Many conditions, a heavy\n// query, or users who expect a 検索 button → SearchForm. Arbitrary field × operator conditions,\n// all/any/custom logic, saved views → pattern condition-builder.\nimport { useState, type FormEvent } from \"react\";\nimport { Card, CardContent, DataTable, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { DatePicker, FormField, Input, NumberInput, RadioGroup, Select } from \"@godxjp/ui/data-entry\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Text } from \"@godxjp/ui/general\";\nimport { SearchForm } from \"@godxjp/ui/navigation\";\n\ntype Option = { value: string; label: string };\ntype Conditions = {\n name: string; match: \"partial\" | \"exact\"; nationality: string; occupation: string;\n monthsMin: number | null; monthsMax: number | null;\n};\nconst EMPTY: Conditions = { name: \"\", match: \"partial\", nationality: \"\", occupation: \"\", monthsMin: null, monthsMax: null };\n\nexport function TraineeSearch({ rows, columns, nationalities, occupations, search }: {\n rows: T[]; columns: ColumnDef[]; nationalities: Option[]; occupations: Option[];\n search: (c: Conditions) => T[];\n}) {\n // Inputs edit the DRAFT; 検索 copies it to APPLIED; クリア empties both.\n const [draft, setDraft] = useState(EMPTY);\n const [applied, setApplied] = useState(EMPTY);\n const set = (patch: Partial) => setDraft((cur) => ({ ...cur, ...patch }));\n const results = search(applied);\n const summary = [\n applied.name && \"氏名: \" + applied.name + (applied.match === \"exact\" ? \"（完全一致）\" : \"（部分一致）\"),\n applied.nationality && \"国籍: \" + nationalities.find((o) => o.value === applied.nationality)?.label,\n (applied.monthsMin != null || applied.monthsMax != null) && \"在籍月数: \" + (applied.monthsMin ?? \"\") + \"〜\" + (applied.monthsMax ?? \"\"),\n ].filter(Boolean).join(\" / \") || \"指定なし\";\n\n return (\n \n \n \n {/* layout=\"horizontal\" labelWidth=\"7rem\" columns={{ base: 1, lg: 2 }} = label-left 表形式 */}\n { e.preventDefault(); setApplied(draft); }}\n onReset={() => { setDraft(EMPTY); setApplied(EMPTY); }}\n summary={summary}\n resultCount={results.length}\n >\n \n \n set({ match: v === \"exact\" ? \"exact\" : \"partial\" })} />\n \n \n \n set({ nationality: v })} />\n \n \n \n {/* past the first row: behind 詳細条件を開く, still mounted */}\n \n \n set({ monthsMin: v })} />\n 〜 \n set({ monthsMax: v })} />\n \n \n \n set({ occupation: v })} />\n \n \n \n \n r.id} /> \n );\n}\n\n// ADVANCED-SEARCH SHAPE (Google): one
: null}> with a\n// counted Filters toggle in FilterBar's actions; below 1024px the same builder opens in a Sheet.",
"name": "condition-builder",
"tagline": "Condition builder — numbered rows of field / operator / value, 「すべての条件を満たす」 / 「いずれかの条件を満たす」 / custom logic `1 AND (2 OR 3)`, add/remove rows, 「並び順」, save as a named view; applied on SUBMIT inside a role=\"search\" Form. Composition, not a component. Docked beside the list it is the Salesforce list-view filter panel.",
"tags": [
"filter",
"condition",
"builder",
"query",
"logic",
"and",
"or",
"kintone",
"salesforce",
"saved view",
"絞り込み",
"list"
]
},
{
"aliases": [
"organization-switcher",
"workspace-switcher",
"received-invitations",
"memberships"
],
"code": "// Research basis: GitHub organization membership + Slack workspace switching/invitations.\n// Each row = recognizable identity (Avatar/logo, NOT an identical decorative icon) + name +\n// a \"現在\" (Current) badge for the active org + role + a permission-aware action menu.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge, Avatar, AvatarImage, AvatarFallback, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from \"@godxjp/ui/navigation\";\nimport { MoreHorizontal, Plus } from \"lucide-react\";\n\ntype Role = \"owner\" | \"admin\" | \"member\";\ntype Membership = { id: string; name: string; logoUrl?: string; role: Role; joinedAt: string; isCurrent: boolean; canManage: boolean };\ntype Invite = { id: string; orgName: string; invitedBy: string };\n\nconst ROLE_LABEL: Record = { owner: \"オーナー\", admin: \"管理者\", member: \"メンバー\" };\n\nexport function OrganizationMemberships({\n memberships, invitations, onOpen, onSwitch, onManage, onLeave, onCreate, onAccept, onDecline,\n}: {\n memberships: Membership[]; invitations: Invite[];\n onOpen: (id: string) => void; onSwitch: (id: string) => void; onManage: (id: string) => void;\n onLeave: (id: string) => void; onCreate: () => void; onAccept: (id: string) => void; onDecline: (id: string) => void;\n}) {\n return (\n \n \n \n \n 組織 \n {/* Create belongs at page/section level, not per row. */}\n \n \n {/* flush → ListRows draw their own edge-to-edge dividers. */}\n \n {memberships.length === 0 ? (\n \n {m.logoUrl ? {m.name.slice(0, 1)} \n \n }\n title={\n \n {m.name} \n {m.isCurrent && 現在 }\n \n }\n description={ROLE_LABEL[m.role]}\n trailing={\n \n {m.isCurrent\n ? onOpen(m.id)}>開く \n : onSwitch(m.id)}>切り替え }\n \n \n \n \n onOpen(m.id)}>開く \n {m.canManage && onManage(m.id)}>管理 }\n {m.role !== \"owner\" && onLeave(m.id)}>退出 }\n \n \n \n }\n />\n ))\n )}\n \n \n\n {/* CONDITIONAL invitations — no pending invites ⇒ render NOTHING (no permanent empty Card).\n Few pending ⇒ a compact actionable list. Many/history ⇒ link to a focused route instead. */}\n {invitations.length > 0 && (\n \n 保留中の招待 \n {invitations.map((inv) => (\n {inv.orgName}}\n description={`${inv.invitedBy} からの招待`}\n trailing={\n \n onAccept(inv.id)}>参加 \n onDecline(inv.id)}>辞退 \n \n }\n />\n ))}\n \n \n )}\n \n );\n}\n// DON'T: passive rows with no action · identical decorative icons · unlabeled timestamps\n// (label them: \"2024年に参加\") · a large empty invitation Card shown permanently.",
"name": "organization-memberships",
"tagline": "Workspace membership list — recognizable identity, current/active state, role, permission-aware Open/Switch/Manage/Leave row actions, page-level Create, and CONDITIONAL invitations (omit when none).",
"tags": [
"organization",
"workspace",
"membership",
"invitation",
"account",
"switcher"
]
},
{
"aliases": [
"password-recovery",
"forgot-password",
"reset-password",
"mfa-challenge",
"two-factor-challenge",
"2fa-challenge",
"otp-challenge",
"passkey-failure",
"scr-008"
],
"code": "// ⚠️ There is NO and NO in\n// @godxjp/ui. What the package owns is the MEASURE:\n// ← 432px panel, 15px gutter at 390\n// Docs page: docs/layout/auth-recovery/\n//\n// PRESENTATION ONLY. No route, no reset semantics, no OTP verification, no recovery-code\n// consumption, no passkey authentication, no permissions. The consumer owns all logic and copy.\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@godxjp/ui/data-display\";\nimport { FormField, Input, InputOTP, InputOTPGroup, InputOTPSlot, PasswordInput, PasswordStrength } from \"@godxjp/ui/data-entry\";\nimport { Alert, AlertDescription, AlertTitle } from \"@godxjp/ui/feedback\";\nimport { Button, Reveal } from \"@godxjp/ui/general\";\nimport { AuthFooter, CenteredShell, AuthStack, Flex } from \"@godxjp/ui/layout\";\n\n// ── THE CANONICAL PANEL ANATOMY — identical for ALL SEVEN states ───────────────────────\n// Card > CardHeader(CardTitle + CardDescription) ← title/description INSIDE the surface\n// > CardContent > AuthStack\n// [notice] Alert tone=\"success|destructive\" (only when the state has one)\n// [fields] FormField(s): email · password pair · ONE 6-slot InputOTP · one Input\n// [primary] Button fullWidth (spans the panel; exactly one)\n// [fallback] Flex justify=\"between\" gap=\"sm\" wrap (two ghost actions share ONE row)\n//\n// DON'T put above the panel here — it always renders the hosted mark, and the\n// SCR-008 hierarchy puts the heading INSIDE the bordered surface.\n// DON'T reuse — that is the ENROLLMENT Dialog (QR / manual key / recovery\n// output). A sign-in challenge has no secret to reveal and no dialog to dismiss: it IS the page.\n\n// ── SIGN-IN MFA CHALLENGE (otp) ────────────────────────────────────────────────────────\n// Focus order IS DOM order: code field → verify → fallback A → fallback B. No tabindex.\n// The 6-slot row is ONE field: InputOTP owns paste/arrows/backspace/caret and is a single tab\n// stop. Six \n \n \n {t(\"mfa.title\")} \n {t(\"mfa.description\")} \n \n \n \n \n \n \n {/* six \n \n \n \n {t(\"mfa.verify\")}\n \n \n {t(\"mfa.useRecoveryCode\")} \n {t(\"mfa.retryPasskey\")} \n \n \n \n \n \n \n );\n}\n\n// ── THE OTHER SIX STATES — same anatomy, only the notice/fields/copy change ─────────────\n// The STATE IS NOT A PROP: the server answers, and the route renders the matching body in the\n// SAME 432px panel. Nothing is reconstructed, because nothing was torn down.\n//\n// password recovery · request — fields: email (autoComplete=\"username\")\n// password recovery · sent — + (cooldown)\n// password recovery · new-password — two + \n// password recovery · expired — , primary = request a new link\n// MFA · recovery-code — ONE , primary = retry passkey\n//\n// The masked address in `sent` (\"h*****@example.co.jp\") is produced by the SERVER — the panel\n// never reconstructs an identifier, it renders the string it is given.\n\n// ── STATES ─────────────────────────────────────────────────────────────────────────────\n// error FormField error ⇒ aria-invalid + aria-errormessage + role=\"alert\". Never colour-only.\n// loading Button loading + loadingText ⇒ aria-busy, the box does not resize, fallbacks disabled.\n// disabled a resend cooldown is — keep it VISIBLE so the affordance is known.\n\n// ── RESPONSIVE CONTRACT (1440 / 1024 / 390) ────────────────────────────────────────────\n// 1440 · 1024 panel 432px, centred, 16px page gutter; OTP one row (6 × 36px = 216px)\n// 390 panel 360px at x=15 (15px inline gutter, --auth-shell-recovery-main-padding-mobile),\n// 310px content column, OTP still ONE row, primary still full-width, the fallback\n// row wraps to a stack only when the localized labels exceed the column.\n// ⚠️ The 390 canonical reference is a desktop 2×2 COMPOSITE that overflows\n// and crops horizontally. It is NOT a valid mobile source and was not traced; the row above is a\n// DECIDED contract, documented in docs/layout/auth-recovery/ and pinned by tests.\n\n// ANTI-PATTERNS: a page-local --auth-shell-card-max-width override or a .recovery-panel{width:432px}\n// class · AuthIdentity above the panel · TwoFactorSetup as a challenge · six Inputs for the OTP row ·\n// re-scoping --control-height to widen the slots (use --otp-slot-size) · two primary actions.",
"name": "auth-recovery-panels",
"tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\" (the 432px token-owned measure).",
"tags": [
"auth",
"authshell",
"recovery",
"password",
"mfa",
"2fa",
"otp",
"inputotp",
"passkey",
"layout",
"presentation"
]
},
{
"aliases": [
"recovery-email",
"backup-codes",
"security-settings",
"recovery-settings"
],
"code": "// Research basis: Google Account recovery (email/phone + backup codes), Microsoft Security info,\n// GitHub recovery codes. Signed-IN recovery SETTINGS (manage your methods) is a DIFFERENT surface\n// from the signed-OUT forgot-password JOURNEY — do not mix them on one page.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Mail, Smartphone, KeyRound } from \"lucide-react\";\n\ntype MethodStatus = \"verified\" | \"unverified\" | \"unavailable\";\n\nconst STATUS: Record = {\n verified: { tone: \"success\", label: \"確認済み\" },\n unverified: { tone: \"warning\", label: \"未確認\" },\n unavailable: { tone: \"neutral\", label: \"未設定\" },\n};\n\nfunction MethodRow({ icon: Icon, name, value, status, action }: {\n icon: React.ComponentType<{ className?: string }>; name: string; value?: string;\n status: MethodStatus; action: React.ReactNode;\n}) {\n const s = STATUS[status];\n return (\n {name} }\n description={value ?? \"未設定\"}\n trailing={{s.label} {action}\n \n アカウント復旧 \n {email ? \"変更\" : \"追加\"} } />\n {phone ? \"変更\" : \"追加\"} } />\n {/* Capability-aware: only render backup codes when the account type supports them. */}\n {backupCodesSupported && (\n 0 ? \"verified\" : \"unverified\"}\n action={再生成 } />\n )}\n \n
\n\n {/* Password change is its OWN destination (risk-appropriate confirmation lives there). */}\n \n パスワード \n \n 最終更新: 90日前 \n パスワードを変更 \n \n \n \n \n );\n}\n// The signed-OUT recovery journey (forgot password → email link → reset) is a separate flow on the\n// auth screens (CenteredShell variant=\"auth\"), NOT part of these signed-in settings. Do not surface it here.",
"name": "account-recovery-settings",
"tagline": "Signed-in recovery: compact method status/action rows (email · phone · backup codes) + a separate password-change destination — capability-aware, risk-appropriate, NO stacked Info Alerts.",
"tags": [
"account",
"recovery",
"security",
"backup-codes",
"password",
"settings"
]
},
{
"aliases": [
"email-template",
"email-tokens",
"blade-email",
"html-email"
],
"code": "// ───────────────────────────────────────────────────────────────────────\n// WHY a separate export: an email is rendered by Blade/Twig/MJML and by clients that strip\n// {/* in an app this is your theme.css */}\n , Card hoverable, Dialog/Sheet enter and every token-driven transition\n retime themselves off these. Zero new @keyframes. */\n[data-tenant=\"acme\"] {\n --duration-fast: 140ms; /* hover / focus */\n --duration-base: 200ms; /* state change */\n --duration-slow: 480ms; /* hero once */\n --ease-standard: cubic-bezier(.2,.8,.2,1);\n --ease-emphasized: cubic-bezier(.2,.8,.2,1);\n --ease-decelerate: cubic-bezier(.2,.8,.2,1);\n --reveal-distance: 8px; /* the spec's \"y8→0\" */\n --reveal-stagger-step: 70ms;\n /* a11y numbers are tokens too — this brand's standard is a 44px target, above\n the WCAG 2.2 SC 2.5.8 floor of 24px (gh#931): */\n --carousel-arrow-size: 2.75rem;\n}\n`;\n\n// 5 ── SPEND THE MOTION, THEN STOP. Most brand books cap decorative motion\n// (\"one decorative region per viewport; no parallax, no count-up, no infinite\n// float\"). Read the spec before adding effects — adding more is not proving the\n// framework, it is breaking the brand.\n\n {/* hero: illustration only, if the spec says\n \"text appears immediately\" — then DON'T wrap\n the headline, so it paints on frame 1 */}\n \n\n {/* one observer per SECTION */}\n \n\n {items.map((it, i) => (\n {/* delay caps at 6 */}\n … \n \n ))}\n \n\n// ❌ THE ONE THAT BITES: never put on=\"view\" on something a scroller CLIPS.\n// … ← 3 of 4 slides stayed at\n// opacity 0 FOREVER: the observer's root is the viewport and a clipped box has\n// an empty intersection rect, so a slide parked outside the rail never enters.\n// ✅ Reveal the RAIL:\n\n \n \n {news.map((n) => (\n \n … {/* fractional basis, never basis-[82%] */}\n \n ))}\n \n \n \n\n// 6 ── VERIFY BY MEASURING, NOT BY SCREENSHOT. A full-page screenshot does not\n// fire viewport observers, so every scroll reveal photographs as invisible and\n// tells you nothing. Scroll the document, then count:\n// [...document.querySelectorAll('.ui-reveal')]\n// .filter(e => e.getAttribute('data-reveal-state') === 'out').length // must be 0\n// document.documentElement.scrollWidth - document.documentElement.clientWidth // must be 0\n// Check the hero's computed font-size at 390, and remember ResponsiveGrid steps\n// are CONTAINER widths: inside a 1280 shell with 32px gutters, a 768 tablet hands\n// the grid 704px, so `md` (48rem) never fires there — key that column to `sm`.\n",
"name": "brand-theme-block",
"tagline": "Wear a WHOLE external brand — its palette, shape, type AND its motion spec — as one scoped theme block of token declarations. No forked components, no page-local overrides of library selectors. Use when you are handed a design system (Figma/HTML prototype/brand book), not a single customer hex.",
"tags": [
"theme",
"brand",
"rebrand",
"handoff",
"motion",
"animation",
"reveal",
"typography",
"font",
"cjk",
"japanese",
"tokens",
"design-system",
"white-label",
"marketing",
"landing"
]
}
]