feat(design-system): add focused component pages and simplify documentation

desktop-next/README.md

@@ -13,6 +13,21 @@ pnpm --filter buzz-desktop-next dev
 Open `http://localhost:1430/design`. Use another port when needed:
 `pnpm --filter buzz-desktop-next dev --port 5188`.
 
+## Focused component pages
+
+Click a section’s eyebrow link (the category followed by →) in the catalog to open
+`/design/components/<id>` (for example, `/design/components/input`). Every catalog
+entry has a dedicated URL with its title and live example in a small shared Card.
+The examples retain their interactions and variants. Component pages have no
+playground label, state guide, source disclosure, picker, or extra page actions.
+
+Every component is indented beneath All components in the navigation, like Token
+table beneath Color. The navigation list scrolls independently so theme and
+density controls remain available. Use these links to move through the catalog.
+Direct links and refreshes work with the same SPA fallback as the rest of the
+site; unknown component IDs have a recovery link. Theme and density preferences
+are shared.
+
 ## Appearance
 
 The navigation contains independent theme and Normal / Compact controls. Density

desktop-next/TESTING.md

@@ -48,3 +48,10 @@ Density coverage checks pointer/keyboard switching, root and portal geometry,
 unchanged text size, retained drafts, reload and cross-tab persistence, invalid
 stored values, save failure and retry, live foundation values, compositions,
 Glass tab selection, and all 55 examples at 390/884/1440 in both themes.
+
+Focused-page coverage visits all 55 catalog deep links and checks that only the
+selected component renders in its shared container. It exercises eyebrow and
+nested navigation links, unknown-ID recovery, input and keyboard interactions,
+portal density, refresh, and appearance preferences. Representative pages are
+checked at 390/884/1440 in both densities and audited in both themes, with distinct
+per-component screenshots.

desktop-next/src/app/routes/design/components_.$componentId.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { CATALOG } from "@/features/design-system/catalog/registry";
+import {
+  ComponentNotFound,
+  ComponentPage,
+} from "@/features/design-system/ui/ComponentPage";
+
+// The underscore keeps the URL nested without rendering the entire catalog above it.
+export const Route = createFileRoute("/design/components_/$componentId")({
+  beforeLoad: ({ params }) => {
+    const entry = CATALOG.find(
+      (candidate) => candidate.id === params.componentId,
+    );
+    if (!entry) throw notFound();
+    return { entry };
+  },
+  component: FocusedComponent,
+  notFoundComponent: ComponentNotFound,
+});
+
+function FocusedComponent() {
+  const { entry } = Route.useRouteContext();
+  return <ComponentPage key={entry.id} entry={entry} />;
+}

desktop-next/src/features/design-system/catalog/catalog.css

@@ -43,6 +43,13 @@
   outline: 2px solid var(--ring-focus);
   outline-offset: 4px;
 }
+.component-preview > * {
+  min-width: 0;
+  max-width: 100%;
+}
+.component-page > header h1:focus {
+  outline: none;
+}
 @media (max-width: 760px) {
   .catalog-grid {
     grid-template-columns: minmax(0, 1fr);