Add per-component design-system docs page

src/App.tsx

@@ -7,6 +7,7 @@ import RouteProgressBar from './components/RouteProgressBar';
 import ServerError from './components/ServerError';
 import useDocumentTitle from "./hooks/useDocumentTitle";
 import NotFound from './components/NotFound';
+import DesignSystemDocs from './pages/DesignSystemDocs';
 import { startRouteLoading, stopRouteLoading } from './hooks/useRouteLoading';
 import useDocumentTitle from './hooks/useDocumentTitle';
 import { formatUsdc, formatUsdShortcut } from './utils/format';
@@ -109,6 +110,7 @@ const APP_ROUTES = {
   documentation: "/documentation",
   status: "/status",
   themePlayground: "/theme-playground",
+  designSystem: "/design-system/docs",
   serverError: "/500",
 } as const;
 
@@ -550,6 +552,7 @@ function App() {
             <NavLink to={APP_ROUTES.marketplace} className={({ isActive }) => isActive ? "link-nav active" : "link-nav"}>Marketplace</NavLink>
             <NavLink to={APP_ROUTES.billing} className={({ isActive }) => isActive ? "link-nav active" : "link-nav"}>Billing</NavLink>
             <NavLink to={APP_ROUTES.themePlayground} className={({ isActive }) => isActive ? "link-nav active" : "link-nav"}>Theme Playground</NavLink>
+            <NavLink to={APP_ROUTES.designSystem} className={({ isActive }) => isActive ? "link-nav active" : "link-nav"}>Design System</NavLink>
           </nav>
           <ThemeToggle />
         </div>
@@ -709,6 +712,11 @@ function App() {
 
           <Route path="/api-usage" element={<ApiUsage />} />
 
+          <Route
+            path={APP_ROUTES.designSystem}
+            element={<DesignSystemDocs />}
+          />
+
           <Route
             path={APP_ROUTES.serverError}
             element={

src/pages/DesignSystemDocs.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import DesignSystemDocs from "./DesignSystemDocs";
+
+describe("DesignSystemDocs", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders the page heading", () => {
+    render(<DesignSystemDocs />);
+    expect(screen.getByRole("heading", { name: "Design System" })).toBeTruthy();
+  });
+
+  it("shows the first component expanded by default and the rest collapsed", () => {
+    render(<DesignSystemDocs />);
+    // First component section (Primary Button) is open by default
+    expect(screen.getByText("Live example")).toBeTruthy();
+    // Verify the collapse/expand toggle buttons are present
+    const expandAllBtn = screen.getByRole("button", { name: "Expand all" });
+    expect(expandAllBtn).toBeTruthy();
+  });
+
+  it("collapses all sections when 'Collapse all' is clicked", () => {
+    render(<DesignSystemDocs />);
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+    // All component headers remain but no prop tables are shown
+    expect(screen.queryAllByText("Live example")).toHaveLength(0);
+  });
+
+  it("expands all sections when 'Expand all' is clicked", () => {
+    render(<DesignSystemDocs />);
+    // Collapse everything first
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+    expect(screen.queryAllByText("Live example")).toHaveLength(0);
+    // Then expand all
+    fireEvent.click(screen.getByRole("button", { name: "Expand all" }));
+    // Every component section should now show a "Live example" label
+    const liveExampleLabels = screen.queryAllByText("Live example");
+    expect(liveExampleLabels.length).toBeGreaterThan(1);
+  });
+});