@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/theme-lab.tsx

@@ -1,2125 +0,0 @@
-/**
- * Showcase · theme-lab — CAN THIS COMPONENT SET WEAR A COMPLEX THEME? One page, every component
- * that can be rendered, several themes, several seeds, switchable, measured.
- *
- * It replaces `/showcase/glassmorphism`, which gh#882 diagnosed correctly: that page proved ONE
- * theme against a DOZEN components, and the question is neither "does glassmorphism work" nor
- * "does Card survive it". A single theme cannot answer the question, and twelve components cannot
- * either — three defects that week were found only because something happened to be on the page
- * (an opaque Tabs strip inside a glass Card, a table header that kept `--muted`, a Sidebar over
- * the wrong canvas). **Coverage is the instrument.**
- *
- * ── THE RULES THIS PAGE IS MEASURED UNDER ────────────────────────────────────────────────────
- *  1. `docs/themes/*.css` may contain NOTHING but `--custom-property` declarations. No
- *     `backdrop-filter:`, no `background:`, no selector into a `.ui-*` class.
- *  2. This page carries no `className` and no inline `style` for theming. The ONE inline style is
- *     `tenantTheme(hex).vars` on the scope — the library's own published channel for a seed, and
- *     the thing gh#882 asks to be used "rather than hand-picking".
- *  3. `ThemeScope`, never a bare wrapper. `src/styles/base.css` sets `color: hsl(var(--foreground))`
- *     on `body`, above every scope a page can make, so that `var()` substitutes against the ROOT
- *     once and every descendant inherits the RESOLVED colour. A plain `<div>` therefore retints
- *     every surface and no text — measured at 1.34:1 before gh#881. `ThemeScope` re-states `color`
- *     on itself AND on the body-level overlay host it creates, which is also what carries the
- *     theme to the portalled panels: Dialog, Sheet, Select, DropdownMenu, Popover, Tooltip and
- *     Toast all portal out of this subtree, and a custom property only inherits through the DOM.
- *     The previous page re-declared `data-theme-style` on each `*Content` by hand; that is no
- *     longer needed and its absence here is part of what this page checks.
- *  4. Where something cannot be expressed, the RESULT is written down — on the page, in the
- *     "could not be rendered" table at the bottom and the "could not be reached" notes in each
- *     theme file — never worked around.
- *
- * ── ADDRESSING, FOR THE INSTRUMENT ───────────────────────────────────────────────────────────
- * `?theme=<id>&seed=<id>` drives both switches, so `scripts/measure-glass.mjs` navigates straight
- * to a cell of the matrix instead of clicking through a Segmented whose labels are localised (the
- * preview's default locale is `vi`). Overlay triggers carry `data-probe="…"`, because the
- * instrument has had four of its own selectors wrong — `[data-slot="table"]` when the blur is on
- * `.ui-data-table-surface`, `[role="listbox"]` instead of `.ui-select-content`, `borderTopWidth`
- * alone, and a backdrop sampled inside the Sidebar — every one of them making the library look
- * worse than it was. A `data-*` hook is not styling and not a theme; it is an address.
- *
- * ── WHAT IS NOT HERE, AND WHY ────────────────────────────────────────────────────────────────
- * See `ABSENT` at the bottom of this file: it is rendered on the page as a real table, because an
- * absence nobody can see is an absence nobody accounts for. Every row is about RENDERING — a
- * provider, a hook, a shell that owns the document — never about whether a token exists.
- *
- * ── AND THE ONE THING THIS PAGE DELIBERATELY DOES NOT SAY ────────────────────────────────────
- * **No sentence here asserts that a surface is unreachable by a token.** The page it replaces
- * carried a per-component gap table, and that table rotted twice — most recently inside the Sheet
- * itself, whose body text read "sheet.tsx bakes `bg-background` into its className, there is no
- * `--sheet-background` to set" while the panel it was printed on rendered `rgba(29, 33, 53, 0.92)`
- * through the `--sheet-surface-background` gh#880 had added hours earlier. A reachability claim is
- * true on the day it is written, false the day someone adds a knob, and worst of all in a page
- * whose entire claim is to be a measurement.
- *
- * A derived table was considered and rejected, and the reason is small but decisive: the only
- * honest source is `agent/tokens.json`, `docs/**` may not import it (`check:example-imports`
- * allows relative `.ts` data modules and committed assets, not a JSON reach outside the tree), and
- * a generated snapshot committed beside the page is the same rot with an extra step. So the prose
- * here is limited to what the theme files DEMONSTRATE by setting a token, and the authority on
- * reachability is `scripts/measure-glass.mjs`, which reads the computed value of every surface and
- * every opened overlay across the whole theme × seed matrix. Run it; do not trust a paragraph.
- */
-import * as React from "react";
-import {
-  Activity as ActivityIcon,
-  BarChart3,
-  Bell,
-  Bot,
-  Building2,
-  Check,
-  ChevronDown,
-  Clock,
-  CreditCard,
-  FileText,
-  LayoutGrid,
-  LogOut,
-  Palette,
-  RefreshCw,
-  Search,
-  Settings,
-  Share2,
-  Shield,
-  Smartphone,
-  Users,
-} from "lucide-react";
-
-import { ThemeScope, tenantTheme, useOptionalAppContext } from "@godxjp/ui/app";
-import { AreaChart, BarChart, LineChart, PieChart } from "@godxjp/ui/charts";
-import { CompactBarTrend } from "@godxjp/ui/charts/compact-bar-trend";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardAction,
-  CardBar,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Carousel,
-  CarouselContent,
-  CarouselDots,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  ChatBubble,
-  ChatBubbleList,
-  CodeBlock,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  CredentialReveal,
-  DataTable,
-  Descriptions,
-  EmptyState,
-  FeatureList,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-  Legend,
-  ListRow,
-  Marquee,
-  PermissionMatrix,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-  Progress,
-  Prose,
-  QrCode,
-  RangeTimeline,
-  ScrollArea,
-  ServiceCatalogCta,
-  ServiceLauncherCard,
-  StatCard,
-  StatusBadge,
-  Swatch,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  ThoughtChain,
-  Thumbnail,
-  Timeline,
-  TimelineGrid,
-  Tree,
-  Welcome,
-  type ChatMessageProp,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import {
-  Attachments,
-  Calendar,
-  Cascader,
-  ChatComposer,
-  ChatSuggestion,
-  Checkbox,
-  CheckboxGroup,
-  ColorPicker,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandPalette,
-  DatePicker,
-  BranchScopePicker,
-  Field,
-  Form,
-  FormErrors,
-  FormField,
-  Input,
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  Label,
-  NumberInput,
-  PasswordInput,
-  PasswordStrength,
-  Radio,
-  RadioGroup,
-  Rating,
-  SearchInput,
-  Segmented,
-  Select,
-  Slider,
-  Switch,
-  TagInput,
-  Textarea,
-  TimePicker,
-  TimeRangePicker,
-  Toggle,
-  ToggleGroup,
-  ToggleGroupItem,
-  Transfer,
-  TreeSelect,
-  Upload,
-  type UploadFileItem,
-} from "@godxjp/ui/data-entry";
-import {
-  Alert,
-  AlertActions,
-  AlertDescription,
-  AlertDialog,
-  AlertTitle,
-  Banner,
-  Callout,
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Sheet,
-  SheetBody,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  Skeleton,
-  SkeletonArticle,
-  SkeletonAvatar,
-  SkeletonButton,
-  SkeletonForm,
-  SkeletonImage,
-  SkeletonInput,
-  SkeletonNode,
-  SkeletonRows,
-  SkeletonTable,
-  Toaster,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TwoFactorSetup,
-  toast,
-} from "@godxjp/ui/feedback";
-import {
-  Actions,
-  ActionsCopy,
-  ActionsFeedback,
-  Activity,
-  Button,
-  FloatButton,
-  Heading,
-  Icon,
-  Link,
-  Logo,
-  Paragraph,
-  Reveal,
-  Text,
-  Title,
-  Typography,
-  VisuallyHidden,
-} from "@godxjp/ui/general";
-import {
-  AccountChip,
-  Affix,
-  AppLauncher,
-  AppShell,
-  AspectRatio,
-  AuthAccountSummary,
-  AuthDivider,
-  AuthFooter,
-  AuthIdentity,
-  AuthStack,
-  Breadcrumb,
-  DraggablePanel,
-  ErrorSurface,
-  Flex,
-  Masonry,
-  MasterDetail,
-  NavList,
-  OrgSwitcher,
-  PageContainer,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-  ResponsiveGrid,
-  Separator,
-  ServiceRolePanel,
-  Sidebar,
-  SplitPane,
-  Topbar,
-  TopbarItem,
-} from "@godxjp/ui/layout";
-import {
-  Anchor,
-  AppSettingPicker,
-  AppSettingToggle,
-  Conversations,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  FilterBar,
-  MegaMenu,
-  Pagination,
-  Steps,
-  Tabs,
-  Toolbar,
-  ToolbarGroup,
-} from "@godxjp/ui/navigation";
-import { useTranslation } from "@godxjp/ui/i18n";
-
-import shotLandscape from "../assets/shot-landscape.svg";
-import {
-  MODES,
-  SEEDS,
-  THEMES,
-  modeFromQuery,
-  seedFromQuery,
-  themeFromQuery,
-  themeQueryValue,
-  type ModeRow,
-  type SeedRow,
-  type ThemeRow,
-} from "../themes";
-
-/* ── The components that CANNOT appear here, and the reason for each ─────────────────────────
- * Rendered on the page as a table. An absence nobody can see is an absence nobody accounts for,
- * and gh#882 asks for the reason in the page itself, not in a commit message. */
-const ABSENT: ReadonlyArray<{ name: string; reasonKey: string }> = [
-  { name: "AppProvider", reasonKey: "themeLab.absent.provider" },
-  { name: "OverlayPortalProvider", reasonKey: "themeLab.absent.overlayPortal" },
-  { name: "ThemeScope", reasonKey: "themeLab.absent.themeScope" },
-  { name: "AuthShell", reasonKey: "themeLab.absent.ownsPage" },
-  { name: "CenteredShell", reasonKey: "themeLab.absent.ownsPage" },
-  { name: "MobileShell", reasonKey: "themeLab.absent.ownsPage" },
-  { name: "LegalDocumentShell", reasonKey: "themeLab.absent.ownsPage" },
-  { name: "useZodForm", reasonKey: "themeLab.absent.needsSchema" },
-  { name: "FormRoot", reasonKey: "themeLab.absent.needsSchema" },
-  { name: "FormFieldControl", reasonKey: "themeLab.absent.needsSchema" },
-  { name: "FormFieldArray", reasonKey: "themeLab.absent.needsSchema" },
-  { name: "AlertDialogRoot", reasonKey: "themeLab.absent.sameSurface" },
-  { name: "useFormAdapter", reasonKey: "themeLab.absent.hook" },
-  { name: "useCarousel", reasonKey: "themeLab.absent.hook" },
-  { name: "usePasswordStrength", reasonKey: "themeLab.absent.hook" },
-  { name: "useUploadDraft", reasonKey: "themeLab.absent.hook" },
-  { name: "formatDate", reasonKey: "themeLab.absent.function" },
-  { name: "flexRender", reasonKey: "themeLab.absent.function" },
-  { name: "buttonVariants", reasonKey: "themeLab.absent.function" },
-  { name: "collectUploadCommitActions", reasonKey: "themeLab.absent.function" },
-  { name: "createSidebarLink", reasonKey: "themeLab.absent.function" },
-  { name: "inertiaUpload", reasonKey: "themeLab.absent.inertia" },
-  { name: "UploadCropDialog", reasonKey: "themeLab.absent.needsFile" },
-  { name: "AvatarImage", reasonKey: "themeLab.absent.needsNetwork" },
-  { name: "PrefetchLink", reasonKey: "themeLab.absent.needsRouter" },
-  { name: "DataState", reasonKey: "themeLab.absent.needsQuery" },
-  { name: "InfiniteQueryState", reasonKey: "themeLab.absent.needsQuery" },
-  { name: "AlertQueryError", reasonKey: "themeLab.absent.needsQuery" },
-  { name: "ButtonRefetch", reasonKey: "themeLab.absent.needsQuery" },
-  { name: "VisuallyHidden", reasonKey: "themeLab.absent.invisible" },
-];
-
-const UNBREAKABLE = "Betriebsstaettengewinnabgrenzungsaufzeichnungsverordnung-2026-A";
-
-type Row = {
-  id: string;
-  nameKey: string;
-  ownerKey: string;
-  tone: "success" | "warning" | "destructive";
-};
-
-const ROWS: Row[] = [
-  { id: "r1", nameKey: "alpha", ownerKey: "one", tone: "success" },
-  { id: "r2", nameKey: "beta", ownerKey: "two", tone: "warning" },
-  { id: "r3", nameKey: "gamma", ownerKey: "three", tone: "destructive" },
-];
-
-const TREND = [
-  { date: "2026-09-16", count: 4 },
-  { date: "2026-09-17", count: 9 },
-  { date: "2026-09-18", count: 6 },
-  { date: "2026-09-19", count: 12 },
-  { date: "2026-09-20", count: 8 },
-  { date: "2026-09-21", count: 15 },
-  { date: "2026-09-22", count: 11 },
-];
-
-const SERIES = [
-  { month: "2026-04", plan: 120, actual: 98 },
-  { month: "2026-05", plan: 130, actual: 141 },
-  { month: "2026-06", plan: 128, actual: 119 },
-  { month: "2026-07", plan: 150, actual: 162 },
-];
-
-/** A titled block. Local composition, not a component: it owns no behaviour a Card does not. */
-function Section({
-  id,
-  title,
-  note,
-  children,
-}: {
-  id: string;
-  title: string;
-  note?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Card id={id}>
-      <CardHeader>
-        <CardTitle level={2}>{title}</CardTitle>
-        {note ? <CardDescription>{note}</CardDescription> : null}
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="lg">
-          {children}
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-/** A labelled row of specimens. */
-function Row2({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <Flex direction="col" gap="xs">
-      <Text size="xs" tone="muted">
-        {label}
-      </Text>
-      <Flex direction="row" gap="sm" wrap align="center">
-        {children}
-      </Flex>
-    </Flex>
-  );
-}
-
-export default function ThemeLabShowcase() {
-  const { t } = useTranslation();
-
-  const initial = React.useMemo(() => {
-    const params = new URLSearchParams(typeof window === "undefined" ? "" : window.location.search);
-    return {
-      theme: themeFromQuery(params.get("theme")),
-      seed: seedFromQuery(params.get("seed")),
-      mode: modeFromQuery(params.get("mode")),
-    };
-  }, []);
-
-  // The bounded scroller Affix and Anchor pin against — see the note at their call site.
-  const affixScrollerRef = React.useRef<HTMLDivElement>(null);
-  const [theme, setTheme] = React.useState<ThemeRow>(initial.theme);
-  const [seed, setSeed] = React.useState<SeedRow>(initial.seed);
-  const [mode, setMode] = React.useState<ModeRow>(initial.mode);
-
-  /*
-   * The URL is the page's own state, so a measurement or a screenshot can address one cell of the
-   * matrix directly. `replaceState` rather than `pushState`: flipping a switch is not navigation,
-   * and a back button that walks a colour history is the kind of cleverness nobody asked for.
-   */
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const params = new URLSearchParams(window.location.search);
-    params.set("theme", themeQueryValue(theme));
-    params.set("seed", seed.id);
-    params.set("mode", mode.id);
-    window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
-  }, [theme, seed, mode]);
-
-  /*
-   * Polarity, applied THE WAY THE LIBRARY ITSELF APPLIES IT: through `AppProvider`'s own `theme`
-   * axis (`src/app/theme-axes.ts`'s `applyThemeAxes`, which is what `AppProvider` calls on
-   * `<html data-theme>`), never by writing `document.documentElement` from this page. Going
-   * through `ctx.setTheme` — the exact setter `AppSettingToggle kind="theme"` already uses above —
-   * sets `AppProvider`'s OWN state, so ITS OWN effect is what reaches the DOM; this page never
-   * touches `document.documentElement` for polarity.
-   *
-   * `mounted`, not a plain effect on `[mode.id]` — MEASURED, not assumed. `AppProvider` re-derives
-   * `theme` from `persist`/storage on ITS OWN mount effect (`app-provider.tsx`'s "hydrate stored
-   * preferences" effect), unconditionally, from `initialTheme` when nothing is stored — and the
-   * preview harness resolves `?theme=` (base/glass/flat here) as a SEPARATE polarity switch, so
-   * that initial value is always "light" on this page. Calling `ctx.setTheme("dark")` from a plain
-   * mount effect here was overwritten a moment later: React commits a descendant's passive effects
-   * before its ancestor's, so `AppProvider`'s own hydration effect always runs AFTER this page's —
-   * confirmed with a `MutationObserver` on `data-theme`, which recorded ZERO mutations and settled
-   * on "light" for `?mode=dark`. Deferring our own call by one render pass (`setMounted(true)` in
-   * an effect, then applying `mode` only once `mounted`) pushes it into a SECOND commit, which
-   * starts only after the FIRST commit's entire effect list — `AppProvider`'s hydration effect
-   * included — has already run and settled; reconfirmed with the same observer, now showing
-   * `data-theme` reaching "dark" reliably.
-   *
-   * `ctx` is read via a ref kept fresh every render, and the apply effect depends only on
-   * `[mounted, mode.id]`, so it does not re-fire every time some OTHER axis (locale, density, …)
-   * changes the context's identity — only once mounted, and again when this switch changes. The
-   * cleanup restores whatever the axis was immediately before this effect's own change, so leaving
-   * the page (or flipping the switch back) does not leak a forced polarity into the rest of the
-   * showcase.
-   */
-  const appContext = useOptionalAppContext();
-  const appContextRef = React.useRef(appContext);
-  appContextRef.current = appContext;
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => setMounted(true), []);
-  React.useEffect(() => {
-    if (!mounted) return;
-    const ctx = appContextRef.current;
-    if (!ctx) return;
-    const previous = ctx.theme;
-    ctx.setTheme(mode.id);
-    return () => {
-      ctx.setTheme(previous);
-    };
-  }, [mounted, mode.id]);
-
-  /* The seed is walked against THIS THEME's surface for THIS POLARITY, not the package's (see
-   * `inkSurface`). A theme declares its own `--text-link`, but `tenantTheme` returns the brand
-   * inks as literals in `style`, and an inline literal outranks any selector — so the theme's
-   * declaration is only reachable if the value handed to it was computed on the right ground. */
-  const brand = React.useMemo(
-    () => tenantTheme(seed.hex, { surface: theme.inkSurface[mode.id] }),
-    [seed.hex, theme.inkSurface, mode.id],
-  );
-
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  const [sheetOpen, setSheetOpen] = React.useState(false);
-  const [alertOpen, setAlertOpen] = React.useState(false);
-  const [twoFactorOpen, setTwoFactorOpen] = React.useState(false);
-  const [role, setRole] = React.useState("viewer");
-  const [checked, setChecked] = React.useState(true);
-  const [switched, setSwitched] = React.useState(true);
-  const [volume, setVolume] = React.useState(64);
-  const [colour, setColour] = React.useState("#2563EB");
-  const [tags, setTags] = React.useState<string[]>(["a11y", "rtl"]);
-  const [password, setPassword] = React.useState("Glass-2026!");
-  const [query, setQuery] = React.useState("");
-  const [page, setPage] = React.useState(1);
-  const [step] = React.useState(1);
-  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 8, 23));
-  const [time, setTime] = React.useState("09:30");
-  const [uploads, setUploads] = React.useState<UploadFileItem[]>([]);
-  const [draft, setDraft] = React.useState("");
-  const [otp, setOtp] = React.useState("");
-  const [conversation, setConversation] = React.useState("c1");
-  const [route, setRoute] = React.useState("products");
-  const [org, setOrg] = React.useState("dxs");
-  const [panelPosition, setPanelPosition] = React.useState({ x: 0, y: 0 });
-  const [treeChecked, setTreeChecked] = React.useState<string[]>(["billing.read"]);
-  const [transferred, setTransferred] = React.useState<string[]>(["1010"]);
-  const [cascade, setCascade] = React.useState<string[]>([]);
-  const [account, setAccount] = React.useState<string | undefined>(undefined);
-  const [selectedRole, setSelectedRole] = React.useState("admin");
-  const [scope, setScope] = React.useState<{
-    mode: "all" | "selected";
-    branchIds?: readonly string[];
-  }>({ mode: "selected", branchIds: ["b1"] });
-
-  const toneLabel = React.useCallback((tone: Row["tone"]) => t(`themeLab.tone.${tone}`), [t]);
-
-  const columns: ColumnDef<Row>[] = [
-    {
-      key: "nameKey",
-      header: t("themeLab.table.name"),
-      render: (row) => <Text as="span">{t(`themeLab.sample.${row.nameKey}`)}</Text>,
-    },
-    {
-      key: "ownerKey",
-      header: t("themeLab.table.owner"),
-      hiddenOnMobile: true,
-      render: (row) => <Text as="span">{t(`themeLab.sample.${row.ownerKey}`)}</Text>,
-    },
-    {
-      key: "tone",
-      header: t("themeLab.table.status"),
-      align: "right",
-      render: (row) => <Badge tone={row.tone}>{toneLabel(row.tone)}</Badge>,
-    },
-  ];
-
-  const chat: ChatMessageProp[] = [
-    { id: "m1", role: "assistant", content: t("themeLab.chat.assistant") },
-    { id: "m2", role: "user", content: t("themeLab.chat.user") },
-  ];
-
-  const sidebar = (
-    <Sidebar
-      activeId="overview"
-      onSelect={() => {}}
-      sections={[
-        {
-          label: t("themeLab.nav.section"),
-          items: [
-            { id: "overview", label: t("themeLab.nav.overview"), icon: LayoutGrid },
-            { id: "reports", label: t("themeLab.nav.reports"), icon: BarChart3 },
-            { id: "people", label: t("themeLab.nav.people"), icon: Users },
-            { id: "settings", label: t("themeLab.nav.settings"), icon: Settings },
-          ],
-        },
-      ]}
-      product={{ name: t("themeLab.product"), role: t("themeLab.nav.role") }}
-      footer={
-        <Text size="xs" tone="muted">
-          {t("themeLab.nav.footer")}
-        </Text>
-      }
-    />
-  );
-
-  const topbar = (
-    <Topbar
-      start={
-        <>
-          {/* `Logo`, not `TopbarItem asChild` + `Text`: `Text` does not forward a ref to a DOM
-              node, and the bar's `Focusable` wrapper warned about exactly that at runtime. The
-              brand cell is a lockup, not a control, so `Logo` is also the right component. */}
-          <Logo glyph="g" wordmark={t("themeLab.product")} />
-          <AppLauncher
-            apps={[
-              {
-                id: "console",
-                name: t("themeLab.app.console"),
-                href: "#console",
-                icon: <BarChart3 aria-hidden="true" />,
-                current: true,
-              },
-              {
-                id: "billing",
-                name: t("themeLab.app.billing"),
-                href: "#billing",
-                icon: <CreditCard aria-hidden="true" />,
-              },
-            ]}
-            labels={{
-              trigger: t("themeLab.launcher.trigger"),
-              title: t("themeLab.launcher.title"),
-              empty: t("themeLab.label.noResults"),
-              loading: t("themeLab.label.loading"),
-            }}
-          />
-        </>
-      }
-      end={
-        <Flex direction="row" gap="sm" align="center">
-          <AppSettingPicker kind="locale" appearance="bar" />
-          <AppSettingToggle kind="theme" />
-          <Popover>
-            <PopoverTrigger asChild>
-              <TopbarItem
-                data-probe="popover"
-                icon={<Bell aria-hidden="true" />}
-                aria-label={t("themeLab.topbar.notifications")}
-              />
-            </PopoverTrigger>
-            <PopoverContent align="end">
-              <PopoverHeader>
-                <PopoverTitle>{t("themeLab.popover.title")}</PopoverTitle>
-                <PopoverDescription>{t("themeLab.popover.body")}</PopoverDescription>
-              </PopoverHeader>
-              <Button size="sm" variant="outline">
-                <Check aria-hidden="true" />
-                {t("themeLab.popover.action")}
-              </Button>
-            </PopoverContent>
-          </Popover>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <TopbarItem
-                data-probe="dropdown"
-                aria-label={t("themeLab.topbar.account")}
-                icon={
-                  <Avatar>
-                    <AvatarFallback>DP</AvatarFallback>
-                  </Avatar>
-                }
-              />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>{t("themeLab.product")}</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>{t("themeLab.menu.profile")}</DropdownMenuItem>
-              <DropdownMenuItem>{t("themeLab.menu.billing")}</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                <LogOut aria-hidden="true" />
-                {t("themeLab.menu.logout")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </Flex>
-      }
-    />
-  );
-
-  return (
-    /*
-     * The attribute is ALWAYS written, "base" included. `docs/themes/` has no `base.css`, so
-     * `[data-theme-style="base"]` matches no rule and the region keeps the library's own theme —
-     * but the scope stays ADDRESSABLE, and that is not cosmetic: `measure-glass.mjs` scopes its
-     * contrast walk to `[data-theme-style]`, and with the attribute omitted the default theme
-     * measured 22 strings instead of 530 while reporting a clean sweep.
-     */
-    <ThemeScope data-theme-style={themeQueryValue(theme)} style={brand.vars}>
-      <AppShell sidebar={sidebar} topbar={topbar}>
-        <PageContainer
-          title={t("themeLab.page.title")}
-          subtitle={t("themeLab.page.subtitle")}
-          breadcrumb={[
-            { label: t("themeLab.nav.overview"), to: "#overview" },
-            { label: t("themeLab.page.title") },
-          ]}
-          extra={
-            <AccountChip
-              name={t("themeLab.sample.one")}
-              email="duong@example.test"
-              actionLabel={t("themeLab.menu.logout")}
-              onAction={() => {}}
-            />
-          }
-        >
-          <Flex direction="col" gap="lg">
-            {/* ── 1 · the switches themselves ───────────────────────────────────────────── */}
-            <Card accent="primary">
-              <CardHeader>
-                <CardTitle level={2}>{t("themeLab.switch.title")}</CardTitle>
-                <CardDescription>{t("themeLab.switch.note")}</CardDescription>
-                <CardAction>
-                  <Legend
-                    items={[
-                      { tone: "success", label: t("themeLab.switch.legendPass") },
-                      { tone: "destructive", label: t("themeLab.switch.legendFail") },
-                    ]}
-                  />
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                <Flex direction="col" gap="md">
-                  <Field id="theme-switch" label={t("themeLab.switch.themeLabel")}>
-                    <Segmented
-                      id="theme-switch"
-                      aria-label={t("themeLab.switch.themeLabel")}
-                      value={themeQueryValue(theme)}
-                      onValueChange={(next) => setTheme(themeFromQuery(next))}
-                      options={THEMES.map((row) => ({
-                        value: themeQueryValue(row),
-                        label: t(row.nameKey),
-                      }))}
-                    />
-                  </Field>
-                  <Text size="sm" tone="muted">
-                    {t(theme.noteKey)}
-                  </Text>
-                  <Field id="seed-switch" label={t("themeLab.switch.seedLabel")}>
-                    <Segmented
-                      id="seed-switch"
-                      aria-label={t("themeLab.switch.seedLabel")}
-                      value={seed.id}
-                      onValueChange={(next) => setSeed(seedFromQuery(next))}
-                      options={SEEDS.map((row) => ({
-                        value: row.id,
-                        label: t(row.nameKey),
-                      }))}
-                    />
-                  </Field>
-                  <Field id="mode-switch" label={t("themeLab.switch.modeLabel")}>
-                    <Segmented
-                      id="mode-switch"
-                      aria-label={t("themeLab.switch.modeLabel")}
-                      value={mode.id}
-                      onValueChange={(next) => setMode(modeFromQuery(next))}
-                      options={MODES.map((row) => ({
-                        value: row.id,
-                        label: t(row.nameKey),
-                      }))}
-                    />
-                  </Field>
-                  <Flex direction="row" gap="sm" wrap align="center">
-                    {SEEDS.map((row) => (
-                      <Swatch
-                        key={row.id}
-                        color={row.hex}
-                        aria-label={`${t(row.nameKey)} ${row.hex}`}
-                      />
-                    ))}
-                  </Flex>
-                  <Descriptions columns={2}>
-                    <Descriptions.Item label={t("themeLab.switch.seedHex")} mono>
-                      {brand.primary ?? "—"}
-                    </Descriptions.Item>
-                    <Descriptions.Item label={t("themeLab.switch.seedInk")} mono>
-                      {brand.foreground ?? "—"}
-                    </Descriptions.Item>
-                    <Descriptions.Item label={t("themeLab.switch.seedContrast")} span={2}>
-                      <Badge tone={brand.meetsAA ? "success" : "destructive"}>
-                        {brand.contrast.toFixed(2)}:1
-                      </Badge>
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Flex>
-              </CardContent>
-            </Card>
-
-            {/* ── 2 · type ─────────────────────────────────────────────────────────────── */}
-            <Section
-              id="type"
-              title={t("themeLab.section.type")}
-              note={t("themeLab.section.typeNote")}
-            >
-              <Flex direction="col" gap="sm">
-                <Heading level={3}>{t("themeLab.sample.headline")}</Heading>
-                <Title level={4}>{t("themeLab.sample.alpha")}</Title>
-                <Paragraph>{t("themeLab.sample.long")}</Paragraph>
-                <Text size="sm" tone="muted">
-                  {t("themeLab.sample.short")}
-                </Text>
-                <Text size="xs" mono tone="muted">
-                  {UNBREAKABLE}
-                </Text>
-                <Text weight="medium" tabular>
-                  {new Intl.NumberFormat(undefined, { notation: "standard" }).format(1240000)}
-                </Text>
-                <Link href="#type">{t("themeLab.sample.linkLabel")}</Link>
-                <Typography>
-                  <Typography.Title level={5}>{t("themeLab.sample.beta")}</Typography.Title>
-                  <Typography.Paragraph>{t("themeLab.sample.short")}</Typography.Paragraph>
-                </Typography>
-                <Prose size="sm">
-                  <Typography.Paragraph>{t("themeLab.sample.long")}</Typography.Paragraph>
-                </Prose>
-                <CodeBlock size="xs" maxHeight="sm" aria-label={t("themeLab.sample.codeLabel")}>
-                  {`[data-theme-style="flat"] {\n  --card-radius: 0;\n}`}
-                </CodeBlock>
-                <Flex direction="row" gap="sm" align="center" wrap>
-                  <Logo glyph="g" wordmark={t("themeLab.product")} />
-                  <Icon as={Shield} size="md" tone="success" label={t("themeLab.sample.secure")} />
-                  <Icon as={Clock} size="sm" tone="muted" />
-                  <Activity label={t("themeLab.sample.syncing")} />
-                  <Activity variant="bar" tone="info" label={t("themeLab.sample.syncing")} />
-                </Flex>
-                <Separator label={t("themeLab.sample.short")} labelAlign="start" />
-                <Marquee fade pauseOnHover label={t("themeLab.sample.marqueeLabel")}>
-                  {["alpha", "beta", "gamma", "delta", "epsilon"].map((key) => (
-                    <Text key={key} size="sm" tone="muted">
-                      {t(`themeLab.sample.${key}`)}
-                    </Text>
-                  ))}
-                </Marquee>
-                <AspectRatio ratio={16 / 5}>
-                  <EmptyState
-                    title={t("themeLab.sample.aspectTitle")}
-                    description={t("themeLab.sample.short")}
-                  />
-                </AspectRatio>
-                <VisuallyHidden>{t("themeLab.sample.short")}</VisuallyHidden>
-              </Flex>
-            </Section>
-
-            {/* ── 3 · actions ──────────────────────────────────────────────────────────── */}
-            <Section id="actions" title={t("themeLab.section.actions")}>
-              <Row2 label={t("themeLab.label.variants")}>
-                <Button>{t("themeLab.action.save")}</Button>
-                <Button variant="secondary">{t("themeLab.action.secondary")}</Button>
-                <Button variant="outline">{t("themeLab.action.outline")}</Button>
-                <Button variant="ghost">{t("themeLab.action.ghost")}</Button>
-                <Button variant="dashed">{t("themeLab.action.dashed")}</Button>
-                <Button variant="destructive">{t("themeLab.action.destructive")}</Button>
-                <Button variant="link">{t("themeLab.action.link")}</Button>
-                <Button disabled>{t("themeLab.action.disabled")}</Button>
-              </Row2>
-              <Row2 label={t("themeLab.label.sizes")}>
-                <Button size="xs">xs</Button>
-                <Button size="sm">sm</Button>
-                <Button size="md">md</Button>
-                <Button size="lg">lg</Button>
-                <Button size="icon" aria-label={t("themeLab.action.search")}>
-                  <Search aria-hidden="true" />
-                </Button>
-              </Row2>
-              <Row2 label={t("themeLab.label.toggles")}>
-                <Toggle aria-label={t("themeLab.action.bold")}>B</Toggle>
-                <Toggle
-                  variant="soft"
-                  shape="pill"
-                  count={12}
-                  countLabel={t("themeLab.label.items")}
-                >
-                  {t("themeLab.action.unread")}
-                </Toggle>
-                <ToggleGroup
-                  type="single"
-                  defaultValue="left"
-                  aria-label={t("themeLab.label.align")}
-                >
-                  <ToggleGroupItem value="left">{t("themeLab.align.start")}</ToggleGroupItem>
-                  <ToggleGroupItem value="center">{t("themeLab.align.center")}</ToggleGroupItem>
-                  <ToggleGroupItem value="right">{t("themeLab.align.end")}</ToggleGroupItem>
-                </ToggleGroup>
-                <Rating name="score" aria-label={t("themeLab.label.rating")} defaultValue={4} />
-              </Row2>
-              <Row2 label={t("themeLab.label.actionsBar")}>
-                <Actions
-                  label={t("themeLab.label.actionsBar")}
-                  items={[
-                    { key: "retry", label: t("themeLab.action.retry"), icon: <RefreshCw /> },
-                    {
-                      key: "more",
-                      label: t("themeLab.action.more"),
-                      subItems: [
-                        { key: "share", label: t("themeLab.action.share"), icon: <Share2 /> },
-                      ],
-                    },
-                    { key: "copy", actionRender: <ActionsCopy text={UNBREAKABLE} /> },
-                    { key: "feedback", actionRender: <ActionsFeedback /> },
-                  ]}
-                />
-              </Row2>
-            </Section>
-
-            {/* ── 4 · status and data display ──────────────────────────────────────────── */}
-            <Section id="display" title={t("themeLab.section.display")}>
-              <Row2 label={t("themeLab.label.badges")}>
-                <Badge>{t("themeLab.tone.neutral")}</Badge>
-                <Badge tone="success">{t("themeLab.tone.success")}</Badge>
-                <Badge tone="warning">{t("themeLab.tone.warning")}</Badge>
-                <Badge tone="destructive">{t("themeLab.tone.destructive")}</Badge>
-                <Badge tone="info">{t("themeLab.tone.info")}</Badge>
-                <Badge variant="secondary">{t("themeLab.tone.neutral")}</Badge>
-                <StatusBadge status="active">{t("themeLab.tone.success")}</StatusBadge>
-                <Swatch color={seed.hex} aria-label={t(seed.nameKey)} />
-              </Row2>
-              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-                <StatCard
-                  label={t("themeLab.stat.members")}
-                  value="12,450"
-                  hint={t("themeLab.stat.hint")}
-                />
-                <StatCard label={t("themeLab.stat.revenue")} value="8.2M" delta="+12%" />
-                <StatCard label={t("themeLab.stat.usage")} value="68.4%" />
-                <StatCard label={t("themeLab.stat.open")} value="3" />
-              </ResponsiveGrid>
-              <Flex direction="col" gap="sm">
-                <Progress value={68} label={t("themeLab.label.progress")} />
-                <Progress value={92} tone="warning" label={t("themeLab.label.progress")} />
-                <Flex direction="row" gap="xs" aria-label={t("themeLab.label.people")}>
-                  <Avatar>
-                    <AvatarFallback>MS</AvatarFallback>
-                  </Avatar>
-                  <Avatar>
-                    <AvatarFallback>DC</AvatarFallback>
-                  </Avatar>
-                  <Avatar>
-                    <AvatarFallback>PN</AvatarFallback>
-                  </Avatar>
-                </Flex>
-              </Flex>
-              <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-                <Card>
-                  <CardBar border="block-end">{t("themeLab.label.tools")}</CardBar>
-                  <CardContent flush>
-                    <ListRow
-                      leading={<Smartphone aria-hidden="true" />}
-                      title={t("themeLab.sample.alpha")}
-                      description={t("themeLab.sample.short")}
-                      trailing={<Badge tone="success">{t("themeLab.tone.success")}</Badge>}
-                    />
-                    <ListRow
-                      unread
-                      overflow="wrap"
-                      title={t("themeLab.sample.long")}
-                      description={t("themeLab.sample.short")}
-                      trailing={
-                        <Button size="xs" variant="ghost">
-                          {t("themeLab.action.more")}
-                        </Button>
-                      }
-                    />
-                  </CardContent>
-                  <CardFooter>
-                    <Text size="xs" tone="muted">
-                      {t("themeLab.sample.short")}
-                    </Text>
-                  </CardFooter>
-                </Card>
-                <Flex direction="col" gap="md">
-                  <FeatureList
-                    items={[
-                      { state: "included", label: "SSO", description: t("themeLab.sample.short") },
-                      { state: "limited", label: "API", description: t("themeLab.sample.short") },
-                      { state: "excluded", label: t("themeLab.sample.gamma") },
-                    ]}
-                  />
-                  <Descriptions columns={2}>
-                    <Descriptions.Item label={t("themeLab.table.name")} mono>
-                      {UNBREAKABLE}
-                    </Descriptions.Item>
-                    <Descriptions.Item label={t("themeLab.table.owner")}>
-                      {t("themeLab.sample.one")}
-                    </Descriptions.Item>
-                    <Descriptions.Item label={t("themeLab.table.status")} span={2}>
-                      {t("themeLab.sample.long")}
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Flex>
-              </ResponsiveGrid>
-              <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-                <Timeline
-                  items={[
-                    { title: t("themeLab.sample.alpha"), time: "2026-09-21 10:00" },
-                    { title: t("themeLab.sample.beta"), time: "2026-09-22 14:00" },
-                    { title: t("themeLab.sample.gamma"), current: true },
-                  ]}
-                />
-                <RangeTimeline
-                  label={t("themeLab.label.schedule")}
-                  columns={[{ label: t("themeLab.label.week"), units: 7 }]}
-                  rows={[
-                    {
-                      id: "task",
-                      label: t("themeLab.sample.alpha"),
-                      start: 0,
-                      end: 4,
-                      startLabel: t("themeLab.label.start"),
-                      endLabel: t("themeLab.label.end"),
-                    },
-                  ]}
-                />
-              </ResponsiveGrid>
-              <TimelineGrid
-                label={t("themeLab.label.schedule")}
-                start="08:00"
-                end="20:00"
-                interval={2}
-                now="14:35"
-                columns={[
-                  { id: "d1", label: t("themeLab.sample.alpha") },
-                  { id: "d2", label: t("themeLab.sample.beta"), current: true },
-                ]}
-                events={[
-                  {
-                    id: "e1",
-                    columnId: "d2",
-                    start: "09:00",
-                    end: "17:30",
-                    title: t("themeLab.sample.gamma"),
-                    description: t("themeLab.sample.one"),
-                  },
-                ]}
-              />
-              <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
-                <Accordion type="single" collapsible>
-                  <AccordionItem value="a">
-                    <AccordionTrigger>{t("themeLab.sample.alpha")}</AccordionTrigger>
-                    <AccordionContent>{t("themeLab.sample.long")}</AccordionContent>
-                  </AccordionItem>
-                  <AccordionItem value="b">
-                    <AccordionTrigger>{t("themeLab.sample.beta")}</AccordionTrigger>
-                    <AccordionContent>{t("themeLab.sample.short")}</AccordionContent>
-                  </AccordionItem>
-                </Accordion>
-                <Flex direction="col" gap="sm" align="start">
-                  <Collapsible>
-                    <Flex direction="col" align="start" gap="sm">
-                      <CollapsibleTrigger asChild>
-                        <Button variant="ghost" size="sm">
-                          <ChevronDown aria-hidden="true" />
-                          {t("themeLab.action.more")}
-                        </Button>
-                      </CollapsibleTrigger>
-                      <CollapsibleContent>
-                        <Text size="sm">{t("themeLab.sample.long")}</Text>
-                      </CollapsibleContent>
-                    </Flex>
-                  </Collapsible>
-                  {/* No `asChild`. HoverCardTrigger is a react-aria `Focusable`, and a `Button`
-                      handed to it through `asChild` warned "<Focusable> child must forward its ref
-                      to a DOM element" on every render. The catalogue's own example is a bare
-                      trigger, and that is what this uses. */}
-                  <HoverCard>
-                    <HoverCardTrigger>{t("themeLab.sample.one")}</HoverCardTrigger>
-                    <HoverCardContent>{t("themeLab.sample.short")}</HoverCardContent>
-                  </HoverCard>
-                </Flex>
-              </ResponsiveGrid>
-              <Card>
-                <CardContent flush>
-                  <ScrollArea>
-                    <Flex direction="col" gap="sm">
-                      {["alpha", "beta", "gamma", "delta", "epsilon"].map((key) => (
-                        <Text key={key} size="sm">
-                          {t(`themeLab.sample.${key}`)}
-                        </Text>
-                      ))}
-                    </Flex>
-                  </ScrollArea>
-                </CardContent>
-              </Card>
-              <Tree
-                aria-label={t("themeLab.label.permissions")}
-                treeData={[
-                  {
-                    value: "billing",
-                    label: t("themeLab.sample.alpha"),
-                    children: [
-                      { value: "billing.read", label: t("themeLab.sample.beta") },
-                      { value: "billing.write", label: t("themeLab.sample.gamma") },
-                    ],
-                  },
-                ]}
-                checkable
-                defaultExpandAll
-                checkedValues={treeChecked}
-                onCheckedValuesChange={setTreeChecked}
-              />
-              <Carousel opts={{ loop: true }}>
-                <CarouselContent>
-                  {["alpha", "beta", "gamma"].map((key) => (
-                    <CarouselItem key={key}>
-                      <Card>
-                        <CardContent>
-                          <Text>{t(`themeLab.sample.${key}`)}</Text>
-                        </CardContent>
-                      </Card>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-                <CarouselPrevious />
-                <CarouselNext />
-                <CarouselDots />
-              </Carousel>
-              <Masonry
-                columns={{ base: 1, sm: 2, lg: 3 }}
-                gap="md"
-                items={["alpha", "beta", "gamma", "delta"].map((key) => ({ key, data: key }))}
-                itemRender={({ data }) => (
-                  <Card>
-                    <CardContent>
-                      <Text>{t(`themeLab.sample.${data}`)}</Text>
-                    </CardContent>
-                  </Card>
-                )}
-              />
-              <Flex direction="row" gap="md" wrap align="start">
-                <QrCode
-                  value="https://example.test/enrol"
-                  label={t("themeLab.label.qr")}
-                  size="md"
-                />
-                <Thumbnail
-                  src={shotLandscape}
-                  width={960}
-                  height={540}
-                  alt={t("themeLab.label.thumbnail")}
-                  size="lg"
-                />
-                <CredentialReveal
-                  label={t("themeLab.label.credential")}
-                  secret="gxp_live_8Fh2kQ9wR7nZ1xV4bT6mL0cD"
-                  defaultRevealed
-                />
-              </Flex>
-            </Section>
-
-            {/* ── 5 · tables ───────────────────────────────────────────────────────────── */}
-            <Section id="tables" title={t("themeLab.section.tables")}>
-              <Card>
-                <CardContent flush>
-                  <DataTable
-                    columns={columns}
-                    data={ROWS}
-                    getRowId={(row) => row.id}
-                    label={t("themeLab.section.tables")}
-                  />
-                </CardContent>
-              </Card>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t("themeLab.table.name")}</TableHead>
-                    <TableHead numeric>{t("themeLab.table.amount")}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>{t("themeLab.sample.alpha")}</TableCell>
-                    <TableCell numeric>1,200</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>{t("themeLab.sample.beta")}</TableCell>
-                    <TableCell numeric>860</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-              <Card>
-                <CardContent flush>
-                  <PermissionMatrix
-                    roles={[
-                      { id: "admin", name: t("themeLab.role.admin") },
-                      { id: "viewer", name: t("themeLab.role.viewer") },
-                    ]}
-                    permissions={[
-                      { id: "read", name: t("themeLab.perm.read") },
-                      { id: "write", name: t("themeLab.perm.write") },
-                    ]}
-                    grants={new Set(["admin:read", "admin:write", "viewer:read"])}
-                    readOnly
-                  />
-                </CardContent>
-              </Card>
-              <SkeletonTable rows={3} columns={4} />
-              <SkeletonRows rows={2} columns={3} />
-            </Section>
-
-            {/* ── 6 · charts ───────────────────────────────────────────────────────────── */}
-            <Section id="charts" title={t("themeLab.section.charts")}>
-              <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
-                <LineChart
-                  label={t("themeLab.chart.trend")}
-                  data={SERIES}
-                  categoryKey="month"
-                  series={[
-                    { dataKey: "plan", label: t("themeLab.chart.plan") },
-                    { dataKey: "actual", label: t("themeLab.chart.actual") },
-                  ]}
-                />
-                <BarChart
-                  label={t("themeLab.chart.byMonth")}
-                  data={SERIES}
-                  categoryKey="month"
-                  series={[{ dataKey: "actual", label: t("themeLab.chart.actual") }]}
-                />
-                <AreaChart
-                  label={t("themeLab.chart.stacked")}
-                  data={SERIES}
-                  categoryKey="month"
-                  series={[
-                    { dataKey: "plan", label: t("themeLab.chart.plan") },
-                    { dataKey: "actual", label: t("themeLab.chart.actual") },
-                  ]}
-                  stacked
-                />
-                <PieChart
-                  label={t("themeLab.chart.split")}
-                  data={[
-                    { category: t("themeLab.sample.alpha"), amount: 42 },
-                    { category: t("themeLab.sample.beta"), amount: 31 },
-                    { category: t("themeLab.sample.gamma"), amount: 27 },
-                  ]}
-                  dataKey="amount"
-                  nameKey="category"
-                  donut
-                />
-              </ResponsiveGrid>
-              <CompactBarTrend
-                label={t("themeLab.chart.weekly")}
-                description={t("themeLab.sample.short")}
-                data={TREND}
-                categoryKey="date"
-                valueKey="count"
-                size="xs"
-              />
-            </Section>
-
-            {/* ── 7 · form controls ────────────────────────────────────────────────────── */}
-            <Section
-              id="fields"
-              title={t("themeLab.section.fields")}
-              note={t("themeLab.section.fieldsNote")}
-            >
-              <Form
-                layout="vertical"
-                columns={2}
-                /* A server error map, so `FormErrors` has something to summarise: with none it
-                   renders nothing at all, which on a coverage page reads as a missing component
-                   rather than as an empty state. */
-                errors={{ email: t("themeLab.field.emailError") }}
-              >
-                <FormErrors />
-                <FormField
-                  id="f-name"
-                  label={t("themeLab.field.name")}
-                  required
-                  helper={t("themeLab.sample.short")}
-                >
-                  <Input
-                    id="f-name"
-                    name="name"
-                    placeholder={t("themeLab.field.namePlaceholder")}
-                  />
-                </FormField>
-                <FormField
-                  id="f-error"
-                  label={t("themeLab.field.email")}
-                  error={t("themeLab.field.emailError")}
-                >
-                  <Input id="f-error" name="email" defaultValue="not-an-email" />
-                </FormField>
-                <FormField id="f-search" label={t("themeLab.field.search")}>
-                  <SearchInput
-                    id="f-search"
-                    value={query}
-                    onSearch={setQuery}
-                    placeholder={t("themeLab.field.searchPlaceholder")}
-                  />
-                </FormField>
-                <FormField id="f-qty" label={t("themeLab.field.quantity")}>
-                  <NumberInput
-                    id="f-qty"
-                    aria-label={t("themeLab.field.quantity")}
-                    defaultValue={3}
-                    min={0}
-                    max={99}
-                  />
-                </FormField>
-                <FormField id="f-pw" label={t("themeLab.field.password")}>
-                  <PasswordInput
-                    id="f-pw"
-                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                    autoComplete="new-password"
-                  />
-                </FormField>
-                <FormField id="f-notes" label={t("themeLab.field.notes")} colSpan={2}>
-                  <Textarea id="f-notes" rows={3} placeholder={t("themeLab.sample.short")} />
-                </FormField>
-                <FormField id="f-tags" label={t("themeLab.field.tags")}>
-                  <TagInput
-                    id="f-tags"
-                    aria-label={t("themeLab.field.tags")}
-                    value={tags}
-                    onValueChange={setTags}
-                  />
-                </FormField>
-                <FormField id="f-role" label={t("themeLab.field.role")}>
-                  <Select
-                    id="f-role"
-                    value={role}
-                    onValueChange={setRole}
-                    options={[
-                      { value: "viewer", label: t("themeLab.role.viewer") },
-                      { value: "editor", label: t("themeLab.role.editor") },
-                      { value: "admin", label: t("themeLab.role.admin") },
-                    ]}
-                  />
-                </FormField>
-                <FormField id="f-date" label={t("themeLab.field.date")}>
-                  <DatePicker id="f-date" value={date} onValueChange={setDate} />
-                </FormField>
-                <FormField id="f-time" label={t("themeLab.field.time")}>
-                  <TimePicker id="f-time" value={time} onValueChange={setTime} minuteStep={15} />
-                </FormField>
-                <FormField id="f-range" label={t("themeLab.field.timeRange")}>
-                  <TimeRangePicker
-                    aria-label={t("themeLab.field.timeRange")}
-                    defaultValue={["09:00", "18:00"]}
-                  />
-                </FormField>
-                <FormField id="f-colour" label={t("themeLab.field.colour")}>
-                  <ColorPicker
-                    id="f-colour"
-                    aria-label={t("themeLab.field.colour")}
-                    value={colour}
-                    onValueChange={setColour}
-                  />
-                </FormField>
-                <FormField id="f-volume" label={t("themeLab.field.volume")}>
-                  <Slider
-                    id="f-volume"
-                    aria-label={t("themeLab.field.volume")}
-                    value={volume}
-                    onChange={(next) => setVolume(next as number)}
-                  />
-                </FormField>
-                <FormField id="f-cascade" label={t("themeLab.field.region")}>
-                  <Cascader
-                    id="f-cascade"
-                    options={[
-                      {
-                        value: "north",
-                        label: t("themeLab.sample.alpha"),
-                        children: [
-                          { value: "n1", label: t("themeLab.sample.beta") },
-                          { value: "n2", label: t("themeLab.sample.gamma") },
-                        ],
-                      },
-                    ]}
-                    value={cascade}
-                    onValueChange={(next) => setCascade(next as string[])}
-                    showSearch
-                  />
-                </FormField>
-                <FormField id="f-scope" label={t("themeLab.field.scope")} colSpan={2}>
-                  <BranchScopePicker
-                    id="f-scope"
-                    branches={[
-                      { id: "b1", name: t("themeLab.sample.alpha") },
-                      {
-                        id: "b2",
-                        name: t("themeLab.sample.beta"),
-                        description: t("themeLab.sample.short"),
-                      },
-                      { id: "b3", name: t("themeLab.sample.gamma"), disabled: true },
-                    ]}
-                    value={scope}
-                    onValueChange={setScope}
-                    searchable
-                  />
-                </FormField>
-                <FormField id="f-account" label={t("themeLab.field.account")}>
-                  <TreeSelect
-                    id="f-account"
-                    /* `children`, not `content`: Cascader's option type nests through `content`
-                     * and TreeSelect's `TreeOptionProp` through `children`. The MCP catalogue's
-                     * own TreeSelect example writes `content` and does not typecheck — recorded
-                     * here rather than quietly corrected, because the catalogue is what a
-                     * consumer copies. */
-                    treeData={[
-                      {
-                        value: "assets",
-                        label: t("themeLab.sample.alpha"),
-                        children: [
-                          { value: "cash", label: t("themeLab.sample.beta") },
-                          { value: "ar", label: t("themeLab.sample.gamma") },
-                        ],
-                      },
-                    ]}
-                    value={account}
-                    onValueChange={(next) => setAccount(next as string | undefined)}
-                    showSearch
-                    treeDefaultExpandAll
-                    allowClear
-                  />
-                </FormField>
-              </Form>
-              <Flex direction="col" gap="md">
-                <Field
-                  id="f-switch"
-                  label={t("themeLab.field.notify")}
-                  description={t("themeLab.sample.short")}
-                >
-                  <Switch
-                    id="f-switch"
-                    aria-label={t("themeLab.field.notify")}
-                    checked={switched}
-                    onCheckedChange={setSwitched}
-                  />
-                </Field>
-                <Label htmlFor="f-agree">{t("themeLab.field.agree")}</Label>
-                <Checkbox
-                  id="f-agree"
-                  checked={checked}
-                  onCheckedChange={(next) => setChecked(next === true)}
-                >
-                  {t("themeLab.field.agree")}
-                </Checkbox>
-                <CheckboxGroup
-                  name="perms"
-                  aria-label={t("themeLab.label.permissions")}
-                  options={[
-                    { label: t("themeLab.perm.read"), value: "read" },
-                    {
-                      label: t("themeLab.perm.write"),
-                      value: "write",
-                      description: t("themeLab.sample.short"),
-                    },
-                    { label: t("themeLab.perm.admin"), value: "admin", disabled: true },
-                  ]}
-                  defaultValue={["read"]}
-                  orientation="vertical"
-                />
-                <RadioGroup
-                  name="tier"
-                  aria-label={t("themeLab.label.variants")}
-                  defaultValue="a"
-                  orientation="horizontal"
-                  options={[
-                    { label: t("themeLab.sample.alpha"), value: "a" },
-                    { label: t("themeLab.sample.beta"), value: "b" },
-                  ]}
-                />
-                <Radio.Group
-                  name="method"
-                  aria-label={t("themeLab.label.sizes")}
-                  defaultValue="card"
-                  orientation="vertical"
-                  options={[
-                    {
-                      label: t("themeLab.sample.gamma"),
-                      value: "card",
-                      description: t("themeLab.sample.short"),
-                    },
-                    { label: t("themeLab.sample.delta"), value: "bank" },
-                  ]}
-                />
-                <PasswordStrength value={password} />
-                <InputOTP maxLength={6} value={otp} onChange={setOtp}>
-                  <InputOTPGroup>
-                    {[0, 1, 2, 3, 4, 5].map((index) => (
-                      <InputOTPSlot key={index} index={index} />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-                <Upload variant="dropzone" value={uploads} onValueChange={setUploads} />
-                <Attachments items={[]} overflow="scrollX" />
-                <Command label={t("themeLab.label.quickPick")} loop>
-                  <CommandInput placeholder={t("themeLab.field.searchPlaceholder")} />
-                  <CommandList>
-                    <CommandEmpty>{t("themeLab.label.noResults")}</CommandEmpty>
-                    <CommandGroup heading={t("themeLab.sample.alpha")}>
-                      <CommandItem value="one">{t("themeLab.sample.one")}</CommandItem>
-                      <CommandItem value="two">{t("themeLab.sample.two")}</CommandItem>
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-                <Transfer
-                  /* `key`, not `value` — the MCP catalogue's Transfer example writes `value` and
-                   * does not typecheck either. Same note as TreeSelect above. */
-                  dataSource={[
-                    { key: "1010", title: t("themeLab.sample.alpha") },
-                    { key: "1020", title: t("themeLab.sample.beta") },
-                    { key: "2010", title: t("themeLab.sample.gamma") },
-                  ]}
-                  targetKeys={transferred}
-                  onValueChange={setTransferred}
-                  titles={[t("themeLab.label.available"), t("themeLab.label.selected")]}
-                  showSearch
-                />
-                <Calendar
-                  mode="single"
-                  selected={date}
-                  onSelect={setDate}
-                  aria-label={t("themeLab.field.date")}
-                />
-              </Flex>
-            </Section>
-
-            {/* ── 8 · navigation ───────────────────────────────────────────────────────── */}
-            <Section id="nav" title={t("themeLab.section.nav")}>
-              <Breadcrumb
-                items={[
-                  /* Distinct hrefs, because Breadcrumb keys its rows by `to` and two "#" rows
-                   * produced a duplicate-key error in React. */
-                  { label: t("themeLab.nav.overview"), to: "#overview" },
-                  { label: t("themeLab.nav.reports"), to: "#nav" },
-                  { label: t("themeLab.sample.alpha") },
-                ]}
-              />
-              <Tabs
-                defaultValue="overview"
-                items={[
-                  {
-                    value: "overview",
-                    label: t("themeLab.nav.overview"),
-                    content: t("themeLab.sample.long"),
-                  },
-                  {
-                    value: "reports",
-                    label: t("themeLab.nav.reports"),
-                    content: t("themeLab.sample.short"),
-                  },
-                ]}
-              />
-              <Steps
-                value={step}
-                items={[
-                  { title: t("themeLab.sample.alpha") },
-                  { title: t("themeLab.sample.beta") },
-                  { title: t("themeLab.sample.gamma") },
-                ]}
-              />
-              <Pagination value={page} total={96} pageSize={10} showTotal onValueChange={setPage} />
-              <Toolbar hasActiveFilters onClear={() => setQuery("")}>
-                <SearchInput
-                  value={query}
-                  onSearch={setQuery}
-                  placeholder={t("themeLab.field.searchPlaceholder")}
-                />
-                <ToolbarGroup label={t("themeLab.table.status")}>
-                  <Select
-                    aria-label={t("themeLab.table.status")}
-                    value={role}
-                    onValueChange={setRole}
-                    options={[
-                      { value: "viewer", label: t("themeLab.role.viewer") },
-                      { value: "admin", label: t("themeLab.role.admin") },
-                    ]}
-                  />
-                </ToolbarGroup>
-              </Toolbar>
-              <FilterBar
-                search={{
-                  value: query,
-                  onValueChange: setQuery,
-                  placeholder: t("themeLab.field.searchPlaceholder"),
-                }}
-                resultCount={ROWS.length}
-                actions={<Button size="sm">{t("themeLab.action.save")}</Button>}
-              />
-              <MegaMenu
-                label={t("themeLab.label.mainNav")}
-                value={route}
-                onValueChange={setRoute}
-                items={[
-                  {
-                    key: "products",
-                    label: t("themeLab.sample.alpha"),
-                    panel: {
-                      groups: [
-                        {
-                          key: "core",
-                          label: t("themeLab.sample.beta"),
-                          links: [
-                            { key: "hr", label: t("themeLab.sample.gamma"), href: "#hr" },
-                            { key: "pay", label: t("themeLab.sample.delta"), href: "#pay" },
-                          ],
-                        },
-                      ],
-                    },
-                  },
-                  { key: "pricing", label: t("themeLab.sample.epsilon"), href: "#pricing" },
-                ]}
-              />
-              <NavList
-                label={t("themeLab.nav.section")}
-                activeId="overview"
-                items={[
-                  {
-                    id: "account",
-                    label: t("themeLab.sample.alpha"),
-                    icon: Users,
-                    children: [
-                      { id: "overview", label: t("themeLab.nav.overview"), href: "#overview" },
-                      { id: "people", label: t("themeLab.nav.people"), href: "#people" },
-                    ],
-                  },
-                  {
-                    id: "appearance",
-                    label: t("themeLab.nav.settings"),
-                    icon: Palette,
-                    href: "#settings",
-                  },
-                ]}
-              />
-              {/*
-               * `affix={false}`, because Anchor has NO `target` prop — unlike Affix, which does.
-               * So an affixed Anchor can only pin to the viewport, and on this page that put it
-               * on top of the PageContainer header alongside the Affix. Turning the pinning off
-               * is the only thing the API offers here; that asymmetry between two components
-               * whose whole job is the same behaviour is filed as its own issue.
-               */}
-              <Anchor
-                affix={false}
-                label={t("themeLab.label.onThisPage")}
-                items={[
-                  { key: "type", href: "#type", title: t("themeLab.section.type") },
-                  { key: "actions", href: "#actions", title: t("themeLab.section.actions") },
-                  { key: "tables", href: "#tables", title: t("themeLab.section.tables") },
-                ]}
-              />
-              {/*
-               * Affix AND Anchor pin to their SCROLL TARGET, and without one that target is the
-               * viewport — so on this page both landed on top of the PageContainer header, three
-               * `position: fixed` bars stacked over the title. Measured: `.ui-affix-content` at
-               * `inset-block-start: 0` and `64px`, `z-index: 20`, over a header at z-index 0.
-               *
-               * That is the components doing exactly what they were told, which is why it is the
-               * PAGE that is wrong: a demo of a pinning component has no business pinning to the
-               * document it is being demonstrated in. Each gets its own bounded scroller, which is
-               * also the only way to SHOW the behaviour — a bar pinned to a viewport you are not
-               * scrolling never moves, so the old version demonstrated nothing while breaking the
-               * page it sat on.
-               */}
-              <div
-                ref={affixScrollerRef}
-                className="ui-scroll-area"
-                style={{ blockSize: "12rem", overflowY: "auto" }}
-              >
-                <div style={{ blockSize: "30rem" }}>
-                  <Affix offsetBlockStart={8} target={() => affixScrollerRef.current}>
-                    <Flex align="center" justify="between" gap="sm">
-                      <Text weight="medium">{t("themeLab.label.pinned")}</Text>
-                      <Button size="sm">{t("themeLab.action.save")}</Button>
-                    </Flex>
-                  </Affix>
-                </div>
-              </div>
-            </Section>
-
-            {/* ── 9 · feedback ─────────────────────────────────────────────────────────── */}
-            <Section id="feedback" title={t("themeLab.section.feedback")}>
-              <Alert>
-                <AlertTitle>{t("themeLab.tone.neutral")}</AlertTitle>
-                <AlertDescription>{t("themeLab.sample.long")}</AlertDescription>
-              </Alert>
-              <Alert tone="info">
-                <AlertTitle>{t("themeLab.tone.info")}</AlertTitle>
-                <AlertDescription>{t("themeLab.sample.short")}</AlertDescription>
-                <AlertActions>
-                  <Button size="xs" variant="outline">
-                    {t("themeLab.action.more")}
-                  </Button>
-                </AlertActions>
-              </Alert>
-              <Alert tone="success">
-                <AlertTitle>{t("themeLab.tone.success")}</AlertTitle>
-                <AlertDescription>{t("themeLab.sample.short")}</AlertDescription>
-              </Alert>
-              <Alert tone="warning">
-                <AlertTitle>{t("themeLab.tone.warning")}</AlertTitle>
-                <AlertDescription>{t("themeLab.sample.short")}</AlertDescription>
-              </Alert>
-              <Alert tone="destructive">
-                <AlertTitle>{t("themeLab.tone.destructive")}</AlertTitle>
-                <AlertDescription>{t("themeLab.sample.short")}</AlertDescription>
-              </Alert>
-              <Banner tone="warning">
-                <Banner.Content>
-                  <Banner.Title>{t("themeLab.tone.warning")}</Banner.Title>
-                  <Banner.Description>{t("themeLab.sample.short")}</Banner.Description>
-                </Banner.Content>
-              </Banner>
-              <Callout kind="warning">
-                <Callout.Title>{t("themeLab.tone.warning")}</Callout.Title>
-                <Callout.Description>{t("themeLab.sample.long")}</Callout.Description>
-              </Callout>
-              <EmptyState
-                title={t("themeLab.label.noResults")}
-                description={t("themeLab.sample.short")}
-              />
-              <ErrorSurface
-                mode="application"
-                status={403}
-                title={t("themeLab.error.title")}
-                description={t("themeLab.sample.long")}
-                action={<Button>{t("themeLab.action.retry")}</Button>}
-              />
-              <Row2 label={t("themeLab.label.skeletons")}>
-                <Skeleton />
-                <SkeletonAvatar size="lg" />
-                <SkeletonButton size="sm" />
-                <SkeletonInput />
-                <SkeletonNode />
-                <SkeletonImage active />
-              </Row2>
-              <SkeletonArticle avatar active paragraph={{ rows: 2 }} />
-              <SkeletonForm columns={2} fields={4} />
-            </Section>
-
-            {/* ── 10 · overlays. OPENED by the instrument, not merely present. ──────────── */}
-            <Section
-              id="overlays"
-              title={t("themeLab.section.overlays")}
-              note={t("themeLab.section.overlaysNote")}
-            >
-              <Flex direction="row" gap="sm" wrap align="center">
-                <Button data-probe="dialog" onClick={() => setDialogOpen(true)}>
-                  {t("themeLab.overlay.dialog")}
-                </Button>
-                <Button data-probe="sheet" variant="outline" onClick={() => setSheetOpen(true)}>
-                  {t("themeLab.overlay.sheet")}
-                </Button>
-                <Button
-                  data-probe="alert-dialog"
-                  variant="destructive"
-                  onClick={() => setAlertOpen(true)}
-                >
-                  {t("themeLab.overlay.alertDialog")}
-                </Button>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button data-probe="tooltip" variant="outline">
-                      {t("themeLab.overlay.tooltip")}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("themeLab.sample.short")}</TooltipContent>
-                </Tooltip>
-                <Button
-                  data-probe="toast"
-                  variant="secondary"
-                  onClick={() => toast(t("themeLab.overlay.toastMessage"))}
-                >
-                  {t("themeLab.overlay.toast")}
-                </Button>
-                <Button
-                  data-probe="two-factor"
-                  variant="outline"
-                  onClick={() => setTwoFactorOpen(true)}
-                >
-                  {t("themeLab.overlay.twoFactor")}
-                </Button>
-                <CommandPalette
-                  groups={[
-                    {
-                      id: "pages",
-                      label: t("themeLab.nav.section"),
-                      items: [
-                        { id: "overview", label: t("themeLab.nav.overview") },
-                        { id: "reports", label: t("themeLab.nav.reports") },
-                      ],
-                    },
-                  ]}
-                  labels={{
-                    open: t("themeLab.label.quickPick"),
-                    title: t("themeLab.label.quickPick"),
-                    description: t("themeLab.sample.short"),
-                    placeholder: t("themeLab.field.searchPlaceholder"),
-                    empty: t("themeLab.label.noResults"),
-                  }}
-                  onSelect={() => {}}
-                />
-              </Flex>
-              <Flex direction="col" gap="sm" align="start">
-                <Text size="xs" tone="muted">
-                  {t("themeLab.overlay.inlineNote")}
-                </Text>
-                {/* `id`, not `data-probe`: Select is a closed component and does not spread
-                    arbitrary `data-*` onto its trigger — measured, the attribute never reached the
-                    DOM. The instrument addresses this one by id. */}
-                <Select
-                  id="overlay-select"
-                  aria-label={t("themeLab.field.role")}
-                  value={role}
-                  onValueChange={setRole}
-                  options={[
-                    { value: "viewer", label: t("themeLab.role.viewer") },
-                    { value: "editor", label: t("themeLab.role.editor") },
-                    { value: "admin", label: t("themeLab.role.admin") },
-                  ]}
-                />
-              </Flex>
-            </Section>
-
-            {/* ── 11 · regions and shells that nest ────────────────────────────────────── */}
-            <Section id="regions" title={t("themeLab.section.regions")}>
-              <SplitPane
-                asideLabel={t("themeLab.label.detail")}
-                aside={<Text size="sm">{t("themeLab.sample.short")}</Text>}
-              >
-                <Text size="sm">{t("themeLab.sample.long")}</Text>
-              </SplitPane>
-              <MasterDetail
-                masterLabel={t("themeLab.label.master")}
-                detailLabel={t("themeLab.label.detail")}
-                master={<Text size="sm">{t("themeLab.sample.alpha")}</Text>}
-              >
-                <Text size="sm">{t("themeLab.sample.beta")}</Text>
-              </MasterDetail>
-              <ResizablePanelGroup orientation="horizontal">
-                <ResizablePanel id="list" defaultSize="40%" minSize="20%">
-                  <Text size="sm">{t("themeLab.sample.alpha")}</Text>
-                </ResizablePanel>
-                <ResizableHandle />
-                <ResizablePanel id="detail" defaultSize="60%" minSize="30%">
-                  <Text size="sm">{t("themeLab.sample.beta")}</Text>
-                </ResizablePanel>
-              </ResizablePanelGroup>
-              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-                <ServiceLauncherCard
-                  icon={Clock}
-                  title={t("themeLab.sample.alpha")}
-                  statusLabel={t("themeLab.tone.success")}
-                  statusTone="success"
-                  description={t("themeLab.sample.short")}
-                  action={<Button>{t("themeLab.action.open")}</Button>}
-                />
-                <ServiceLauncherCard
-                  icon={Building2}
-                  title={t("themeLab.sample.beta")}
-                  statusLabel={t("themeLab.tone.warning")}
-                  statusTone="warning"
-                  description={t("themeLab.sample.short")}
-                  disabledReason={t("themeLab.sample.short")}
-                  action={<Button disabled>{t("themeLab.action.open")}</Button>}
-                />
-                <ServiceCatalogCta
-                  title={t("themeLab.label.catalog")}
-                  action={<Button variant="outline">{t("themeLab.action.more")}</Button>}
-                />
-              </ResponsiveGrid>
-              <ServiceRolePanel
-                roles={[
-                  { id: "admin", name: t("themeLab.role.admin") },
-                  { id: "viewer", name: t("themeLab.role.viewer") },
-                ]}
-                value={selectedRole}
-                onValueChange={setSelectedRole}
-              >
-                {(selected) => (
-                  <Text size="sm">{selected ? selected.name : t("themeLab.label.noResults")}</Text>
-                )}
-              </ServiceRolePanel>
-              <OrgSwitcher
-                organizations={[
-                  { id: "dxs", name: t("themeLab.sample.alpha"), meta: t("themeLab.role.admin") },
-                  { id: "acme", name: t("themeLab.sample.beta"), meta: t("themeLab.role.viewer") },
-                ]}
-                value={org}
-                onValueChange={setOrg}
-                labels={{
-                  trigger: (name) => `${t("themeLab.org.trigger")}: ${name}`,
-                  title: t("themeLab.org.trigger"),
-                  search: t("themeLab.field.searchPlaceholder"),
-                  empty: t("themeLab.label.noResults"),
-                  loading: t("themeLab.label.loading"),
-                }}
-              />
-              <AuthStack>
-                <AuthIdentity
-                  title={t("themeLab.auth.title")}
-                  requester={t("themeLab.auth.requester")}
-                />
-                <AuthAccountSummary
-                  email="duong@example.test"
-                  actionLabel={t("themeLab.auth.switch")}
-                  onAction={() => {}}
-                />
-                <AuthDivider label={t("themeLab.auth.or")} />
-                <AuthFooter
-                  product={t("themeLab.product")}
-                  terms={t("themeLab.auth.terms")}
-                  privacy={t("themeLab.auth.privacy")}
-                />
-              </AuthStack>
-            </Section>
-
-            {/* ── 12 · conversational ──────────────────────────────────────────────────── */}
-            <Section id="chat" title={t("themeLab.section.chat")}>
-              <Welcome
-                icon={<Bot aria-hidden="true" />}
-                title={t("themeLab.chat.welcomeTitle")}
-                description={t("themeLab.chat.welcomeBody")}
-              />
-              <ChatBubbleList
-                label={t("themeLab.section.chat")}
-                items={chat}
-                roles={{
-                  assistant: { placement: "start", variant: "filled" },
-                  user: { placement: "end", variant: "outlined" },
-                }}
-              />
-              <ChatBubble placement="start" header={t("themeLab.chat.assistantName")} loading />
-              <ChatBubble placement="end" tone="destructive" header={t("themeLab.chat.userName")}>
-                {t("themeLab.sample.short")}
-              </ChatBubble>
-              <ThoughtChain
-                label={t("themeLab.chat.thoughts")}
-                defaultExpandedKeys={["search"]}
-                items={[
-                  { key: "read", title: t("themeLab.sample.alpha"), status: "success" },
-                  {
-                    key: "search",
-                    title: t("themeLab.sample.beta"),
-                    status: "loading",
-                    collapsible: true,
-                  },
-                  { key: "write", title: t("themeLab.sample.gamma"), status: "abort" },
-                ]}
-              />
-              <Conversations
-                activeKey={conversation}
-                onActiveChange={setConversation}
-                items={[
-                  { key: "c1", label: t("themeLab.sample.alpha") },
-                  { key: "c2", label: t("themeLab.sample.beta") },
-                ]}
-              />
-              <ChatSuggestion
-                items={[
-                  { value: "summarize", label: t("themeLab.sample.gamma") },
-                  { value: "translate", label: t("themeLab.sample.delta") },
-                ]}
-              >
-                {({ onTrigger, onKeyDown }) => (
-                  <ChatComposer
-                    value={draft}
-                    onValueChange={(next) => {
-                      setDraft(next);
-                      onTrigger(next);
-                    }}
-                    onKeyDown={onKeyDown}
-                    onSubmit={() => setDraft("")}
-                    placeholder={t("themeLab.chat.placeholder")}
-                  />
-                )}
-              </ChatSuggestion>
-            </Section>
-
-            {/* ── 13 · what could NOT be rendered, and why ──────────────────────────────── */}
-            <Section
-              id="absent"
-              title={t("themeLab.section.absent")}
-              note={t("themeLab.section.absentNote")}
-            >
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t("themeLab.absent.export")}</TableHead>
-                    <TableHead>{t("themeLab.absent.reason")}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {ABSENT.map((entry) => (
-                    <TableRow key={`${entry.name}-${entry.reasonKey}`}>
-                      <TableCell>
-                        <Text as="span" size="sm" mono>
-                          {entry.name}
-                        </Text>
-                      </TableCell>
-                      <TableCell>
-                        <Text as="span" size="sm">
-                          {t(entry.reasonKey)}
-                        </Text>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </Section>
-
-            <Reveal>
-              <Text size="xs" tone="muted">
-                {t("themeLab.page.footer")}
-              </Text>
-            </Reveal>
-          </Flex>
-        </PageContainer>
-      </AppShell>
-
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("themeLab.overlay.dialog")}</DialogTitle>
-            <DialogDescription>{t("themeLab.sample.short")}</DialogDescription>
-          </DialogHeader>
-          <DialogBody>
-            <Text as="p" size="sm">
-              {t("themeLab.sample.long")}
-            </Text>
-          </DialogBody>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">{t("themeLab.action.cancel")}</Button>
-            </DialogClose>
-            <Button onClick={() => setDialogOpen(false)}>{t("themeLab.action.save")}</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent>
-          <SheetHeader>
-            <SheetTitle>{t("themeLab.overlay.sheet")}</SheetTitle>
-            <SheetDescription>{t("themeLab.sample.short")}</SheetDescription>
-          </SheetHeader>
-          <SheetBody>
-            <Text as="p" size="sm">
-              {t("themeLab.sample.long")}
-            </Text>
-          </SheetBody>
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button variant="outline">{t("themeLab.action.cancel")}</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-
-      <AlertDialog
-        open={alertOpen}
-        onOpenChange={setAlertOpen}
-        title={t("themeLab.overlay.alertDialog")}
-        description={t("themeLab.sample.long")}
-        confirmLabel={t("themeLab.action.save")}
-        cancelLabel={t("themeLab.action.cancel")}
-        onConfirm={() => setAlertOpen(false)}
-      />
-
-      <TwoFactorSetup
-        open={twoFactorOpen}
-        onOpenChange={setTwoFactorOpen}
-        qrValue="otpauth://totp/theme-lab?secret=JBSWY3DPEHPK3PXP"
-        manualKey="JBSWY3DPEHPK3PXP"
-        code={otp}
-        onCodeChange={setOtp}
-        onConfirm={() => setTwoFactorOpen(false)}
-        onAcknowledge={() => setTwoFactorOpen(false)}
-        labels={{
-          title: t("themeLab.twoFactor.title"),
-          description: t("themeLab.twoFactor.description"),
-          qrLabel: t("themeLab.label.qr"),
-          manualKeyLabel: t("themeLab.twoFactor.manualKey"),
-          codeLabel: t("themeLab.twoFactor.code"),
-          recoveryNotice: t("themeLab.twoFactor.recovery"),
-          cancel: t("themeLab.action.cancel"),
-          confirm: t("themeLab.action.save"),
-          acknowledge: t("themeLab.twoFactor.acknowledge"),
-        }}
-      />
-
-      <DraggablePanel
-        title={t("themeLab.label.assistant")}
-        placement="bottom-end"
-        position={panelPosition}
-        onPositionChange={setPanelPosition}
-      >
-        <Text size="sm">{t("themeLab.sample.short")}</Text>
-      </DraggablePanel>
-
-      <FloatButton.Group
-        trigger="click"
-        icon={<ActivityIcon />}
-        aria-label={t("themeLab.label.assistant")}
-      >
-        <FloatButton tooltip={t("themeLab.action.share")} icon={<Share2 />} />
-        <FloatButton tooltip={t("themeLab.action.more")} icon={<FileText />} />
-        <FloatButton.BackTop />
-      </FloatButton.Group>
-
-      <Toaster />
-    </ThemeScope>
-  );
-}