@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/sections/ProductLayoutsShowcase.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { AuthLayout, AuthCard, SettingsLayout, ShowcaseWrapper, Button } from "@/components/ui";
+
+export default function ProductLayoutsShowcase() {
+  return (
+    <>
+      <ShowcaseWrapper
+        id="auth"
+        title="Auth Layout"
+        description="Split-panel authentication shell with brand aside and form column."
+        code={`import { AuthLayout, AuthCard } from "@xenide-io/the-old-ui-theme";
+
+<AuthLayout>
+  <AuthCard title="Sign in" description="Welcome back">
+    <input className="ph-input" placeholder="Email" />
+    <input className="ph-input" type="password" placeholder="Password" />
+    <Button variant="primary">Sign in</Button>
+  </AuthCard>
+</AuthLayout>`}
+      >
+        <div className="max-h-[32rem] overflow-hidden rounded-xl border border-ph-border">
+          <AuthLayout>
+            <AuthCard title="Sign in" description="Welcome back to your workspace.">
+              <div className="space-y-3">
+                <input className="ph-input" placeholder="Email" />
+                <input className="ph-input" type="password" placeholder="Password" />
+                <Button variant="primary" className="w-full">Sign in</Button>
+              </div>
+            </AuthCard>
+          </AuthLayout>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="settings"
+        title="Settings Layout"
+        description="Sidebar navigation and content area for settings pages."
+        code={`import { SettingsLayout, SettingsNav } from "@xenide-io/the-old-ui-theme";
+
+<SettingsLayout
+  title="Settings"
+  navigation={<SettingsNav groups={groups} activeId="general" />}
+>
+  <p>Settings content</p>
+</SettingsLayout>`}
+      >
+        <div className="max-h-[28rem] overflow-hidden rounded-xl border border-ph-border">
+          <SettingsLayout
+            title="Project Settings"
+            description="Manage your workspace preferences"
+            navigation={
+              <div className="ph-settings-nav space-y-5">
+                <div>
+                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">General</h3>
+                  <div className="space-y-0.5">
+                    <a className="ph-settings-nav__item ph-settings-nav__item--active">Overview</a>
+                    <a className="ph-settings-nav__item">Display</a>
+                    <a className="ph-settings-nav__item">Notifications</a>
+                  </div>
+                </div>
+                <div>
+                  <h3 className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext">Team</h3>
+                  <div className="space-y-0.5">
+                    <a className="ph-settings-nav__item">Members</a>
+                    <a className="ph-settings-nav__item">Roles</a>
+                  </div>
+                </div>
+              </div>
+            }
+          >
+            <p className="text-sm text-ph-subtle">General settings content goes here.</p>
+          </SettingsLayout>
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/ProgressShowcase.tsx

@@ -1,82 +1,79 @@
-import { IconSpinner } from "@/components/icons";
-import { ComponentDocs, Progress, ShowcaseWrapper } from "@/components/ui";
+import {
+  ComponentDocs,
+  Loader,
+  LoadingState,
+  Progress,
+  ShowcaseWrapper,
+  Skeleton,
+} from "@/components/ui";
 
 export default function ProgressShowcase() {
-  const code = `import { Progress } from "the-old-ui";
+  const code = `import { Loader, LoadingState, Progress, Skeleton } from "@xenide-io/the-old-ui-theme";
 
-<div className="space-y-8">
-  <div className="ph-panel space-y-6">
-    <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
-    <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
-    <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
-  </div>
-
-  <div className="ph-panel flex flex-wrap items-center gap-10">
-    <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
-    <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
-  </div>
-
-  <div className="ph-panel flex flex-wrap items-center gap-8">
-    <span className="ph-loading" role="status" aria-label="Loading" />
-    <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
-    <div className="ph-loading-dots" role="status" aria-label="Loading">
-      <span />
-      <span />
-      <span />
-    </div>
-  </div>
+<Progress label="Ingest backlog" value={72} showPercentage />
+<Loader variant="spinner" label="Refreshing insight" />
+<Loader variant="dots" label="Loading events" />
+<Loader variant="pulse" label="Connecting" />
+<LoadingState title="Loading dashboard" description="Restoring the latest results." />
+<div role="status" aria-label="Loading account">
+  <Skeleton shape="title" />
+  <Skeleton shape="text" />
+  <Skeleton shape="short-text" />
 </div>`;
 
   return (
     <ShowcaseWrapper
       title="Progress & loading"
-      description="Linear progress bars, spinners, and skeleton placeholders with semantic colour support."
+      description="Determinate progress, compact action loaders, full-region loading states, and structure-matching cold-load skeletons."
       code={code}
-      filename="ProgressExample.tsx"
+      filename="LoadingExample.tsx"
       docs={
         <ComponentDocs
           rows={[
-            { name: "value", type: "number", description: "Current value." },
-            { name: "max", type: "number", defaultValue: "100", description: "Maximum value." },
-            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class for the bar." },
-            { name: "label", type: "string", description: "Label shown above the bar." },
-            { name: "showPercentage", type: "boolean", defaultValue: "false", description: "Show percentage text." },
-            { name: "size", type: "sm | md | lg", defaultValue: "md", description: "Bar height." },
+            { name: "Loader.variant", type: "spinner | dots | pulse", defaultValue: "spinner", description: "Indeterminate treatment for compact asynchronous work." },
+            { name: "Loader.size", type: "sm | md | lg", defaultValue: "md", description: "Visual loader size." },
+            { name: "LoadingState", type: "LoadingStateProps", description: "Centered region state with one accessible status message." },
+            { name: "Skeleton.shape", type: "title | text | short-text | avatar | button | block", defaultValue: "text", description: "Decorative skeleton matching expected content geometry." },
+            { name: "Progress.value", type: "number", description: "Real determinate progress value." },
           ]}
         />
       }
     >
-      <div className="space-y-8">
+      <div className="space-y-6">
         <div className="ph-panel space-y-6">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Linear bars</h3>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Determinate progress</h3>
           <Progress label="Ingest backlog" value={72} color="bg-ph-brand" showPercentage />
           <Progress label="Exports" value={45} color="bg-ph-blue" showPercentage />
           <Progress label="LLM evaluations" value={28} color="bg-ph-purple" showPercentage />
         </div>
 
-        <div className="ph-panel flex flex-wrap items-center gap-10">
-          <div className="w-full">
-            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Large bars</h3>
-            <div className="flex gap-10">
-              <Progress value={72} color="bg-ph-brand" size="lg" className="w-48" />
-              <Progress value={45} color="bg-ph-blue" size="lg" className="w-48" />
+        <div className="grid gap-4 md:grid-cols-3">
+          {(["spinner", "dots", "pulse"] as const).map((variant) => (
+            <div key={variant} className="ph-panel flex min-h-28 flex-col items-center justify-center gap-3">
+              <Loader variant={variant} size="lg" label={`${variant} loader`} />
+              <code className="ph-kbd">{variant}</code>
             </div>
-          </div>
+          ))}
         </div>
 
-        <div className="ph-panel flex flex-wrap items-center gap-8">
-          <div className="flex items-center gap-3 text-ph-subtle">
-            <span className="ph-loading" role="status" aria-label="Loading" />
-            <code className="ph-kbd">ph-loading</code> — CSS spinner
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div className="ph-panel p-0">
+            <LoadingState
+              label="Loading dashboard"
+              title="Loading dashboard"
+              description="Restoring the latest results without pretending progress is measurable."
+            />
           </div>
-          <div className="flex items-center gap-3 text-ph-subtle">
-            <IconSpinner className="h-6 w-6 text-ph-brand" role="status" aria-label="Loading" />
-            <code className="ph-kbd">IconSpinner</code> — Animated icon
-          </div>
-          <div className="ph-loading-dots" role="status" aria-label="Loading">
-            <span />
-            <span />
-            <span />
+          <div className="ph-panel" role="status" aria-label="Loading account summary">
+            <div className="mb-5 flex items-center gap-3">
+              <Skeleton shape="avatar" />
+              <div className="min-w-0 flex-1">
+                <Skeleton shape="title" className="mb-2 w-1/2" />
+                <Skeleton shape="short-text" className="w-2/3" />
+              </div>
+            </div>
+            <Skeleton shape="block" className="mb-4" />
+            <div className="flex justify-end"><Skeleton shape="button" /></div>
           </div>
         </div>
       </div>

package/src/components/sections/QuillChartShowcase.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ShowcaseWrapper } from "@/components/ui";
+import { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart, InsightShell } from "@/components/charts/quill";
+
+const lineCode = 'import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";\n\n<TimeSeriesLineChart\n  labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}\n  series={[\n    { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },\n    { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },\n  ]}\n/>';
+
+const barCode = 'import { BarChart } from "@xenide-io/the-old-ui-theme";\n\n<BarChart\n  labels={["A","B","C","D"]}\n  series={[\n    { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },\n    { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },\n  ]}\n/>';
+
+const pieCode = 'import { PieChart } from "@xenide-io/the-old-ui-theme";\n\n<PieChart\n  slices={[\n    { key: "a", label: "Direct", value: 40 },\n    { key: "b", label: "Organic", value: 30 },\n    { key: "c", label: "Referral", value: 20 },\n    { key: "d", label: "Social", value: 10 },\n  ]}\n/>';
+
+const metricCode = 'import { MetricCard, Sparkline } from "@xenide-io/the-old-ui-theme";\n\n<MetricCard\n  value="89.2k"\n  label="Page Views"\n  change={{ value: 12 }}\n  sparklineData={[65, 72, 68, 80, 95, 88, 92]}\n/>';
+
+export default function QuillChartShowcase() {
+  return (
+    <>
+      <ShowcaseWrapper
+        id="quill-timeline"
+        title="Quill TimeSeriesLineChart"
+        description="Canvas-based trend line chart with optional grid and crosshair."
+        code={lineCode}
+      >
+        <TimeSeriesLineChart
+          labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
+          series={[
+            { key: "views", label: "Pageviews", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] },
+            { key: "signups", label: "Signups", data: [920, 990, 940, 1040, 1012, 540, 510] },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-barchart"
+        title="Quill BarChart"
+        description="Vertical bar chart with multi-series support."
+        code={barCode}
+      >
+        <BarChart
+          labels={["A","B","C","D"]}
+          series={[
+            { key: "s1", label: "Series 1", data: [30, 45, 25, 60] },
+            { key: "s2", label: "Series 2", data: [20, 35, 40, 30] },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-piechart"
+        title="Quill PieChart"
+        description="Donut chart with slice labels and legend."
+        code={pieCode}
+      >
+        <PieChart
+          slices={[
+            { key: "a", label: "Direct", value: 40 },
+            { key: "b", label: "Organic", value: 30 },
+            { key: "c", label: "Referral", value: 20 },
+            { key: "d", label: "Social", value: 10 },
+          ]}
+        />
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-metriccard"
+        title="Quill MetricCard and Sparkline"
+        description="Metric stat card with sparkline trend."
+        code={metricCode}
+      >
+        <div className="grid gap-4 sm:grid-cols-3">
+          <MetricCard
+            value="89.2k"
+            label="Page Views"
+            change={{ value: 12 }}
+            sparklineData={[65, 72, 68, 80, 95, 88, 92]}
+          />
+          <MetricCard
+            value="2,847"
+            label="Active Users"
+            change={{ value: 3 }}
+            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
+          />
+          <MetricCard
+            value="23.1%"
+            label="Conversion Rate"
+            change={{ value: -1.2, positive: false }}
+            sparklineData={[24, 23, 23.5, 22.8, 23.2, 22.5, 23.1]}
+          />
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/QuillDashboardShowcase.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { ShowcaseWrapper } from "@/components/ui";
+import { InsightShell, MetricCard } from "@/components/charts/quill";
+import { TimeSeriesLineChart, BarChart, PieChart, FunnelChart, Sparkline } from "@/components/charts/quill";
+
+export default function QuillDashboardShowcase() {
+  return (
+    <>
+      <ShowcaseWrapper
+        id="quill-dashboard"
+        title="Quill Dashboard Shells"
+        description="InsightShell panels for wrapping Quill charts."
+        code={`import { InsightShell } from "@xenide-io/the-old-ui-theme";
+import { TimeSeriesLineChart } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <InsightShell title="Weekly Active Users" subtitle="Last 14 days" ribbonColor="var(--ph-data-1)">
+            <TimeSeriesLineChart
+              labels={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}
+              series={[{ key: "wau", label: "WAU", data: [4200, 5100, 4800, 6200, 5900, 3100, 2800] }]}
+              height={180}
+            />
+          </InsightShell>
+          <InsightShell title="Conversion Funnel" subtitle="Step-by-step dropoff" ribbonColor="var(--ph-data-2)">
+            <FunnelChart
+              steps={[
+                { label: "Page Visit", count: 12000 },
+                { label: "Sign Up", count: 5400 },
+                { label: "Onboarding", count: 3200 },
+                { label: "Active Use", count: 1800 },
+              ]}
+            />
+          </InsightShell>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-funnel"
+        title="Quill Funnel Chart"
+        description="Conversion funnel with dropoff percentages."
+        code={`import { FunnelChart } from "@xenide-io/the-old-ui-theme";
+
+<FunnelChart
+  steps={[
+    { label: "Visitors", count: 12000 },
+    { label: "Signups", count: 5400 },
+    { label: "Activated", count: 1800 },
+  ]}
+/>`}
+      >
+        <div className="max-w-md">
+          <FunnelChart
+            steps={[
+              { label: "Website Visits", count: 45000 },
+              { label: "Product Page", count: 28000 },
+              { label: "Added to Cart", count: 12000 },
+              { label: "Checkout Started", count: 6500 },
+              { label: "Purchase Complete", count: 4200 },
+            ]}
+          />
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-metrics-grid"
+        title="Quill Metrics Grid"
+        description="Metric cards with sparklines for dashboard KPIs."
+        code={`import { MetricCard } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <MetricCard
+            value="$128.4k"
+            label="Revenue"
+            change={{ value: 12.5 }}
+            sparklineData={[80, 95, 88, 102, 110, 108, 128]}
+          />
+          <MetricCard
+            value="4,847"
+            label="Active Users"
+            change={{ value: 8.3 }}
+            sparklineData={[42, 48, 45, 52, 50, 48, 55]}
+          />
+          <MetricCard
+            value="32.1%"
+            label="Conversion"
+            change={{ value: -2.1, positive: false }}
+            sparklineData={[34, 33, 33.5, 32.8, 32.2, 31.5, 32.1]}
+          />
+          <MetricCard
+            value="2.4s"
+            label="Avg. Load Time"
+            change={{ value: -15, positive: true }}
+            sparklineData={[3.2, 2.8, 2.9, 2.6, 2.5, 2.4, 2.4]}
+          />
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="quill-charts-overview"
+        title="Quill Charts Overview"
+        description="All Quill chart types in one place."
+        code={`import { BarChart, PieChart, Sparkline } from "@xenide-io/the-old-ui-theme";`}
+      >
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <InsightShell title="Bar Chart" subtitle="Multi-series bars">
+            <BarChart
+              labels={["A","B","C","D"]}
+              series={[
+                { key: "s1", label: "S1", data: [30, 45, 25, 60] },
+                { key: "s2", label: "S2", data: [20, 35, 40, 30] },
+              ]}
+              height={180}
+            />
+          </InsightShell>
+          <InsightShell title="Pie Chart" subtitle="Distribution">
+            <div className="flex justify-center">
+              <PieChart
+                slices={[
+                  { key: "a", label: "Direct", value: 40 },
+                  { key: "b", label: "Organic", value: 30 },
+                  { key: "c", label: "Referral", value: 20 },
+                  { key: "d", label: "Social", value: 10 },
+                ]}
+                size={180}
+              />
+            </div>
+          </InsightShell>
+          <InsightShell title="Sparklines" subtitle="Inline mini-trends">
+            <div className="space-y-4">
+              {[
+                { label: "Page Views", data: [65, 72, 68, 80, 95, 88, 92], color: "var(--ph-data-1)" },
+                { label: "Signups", data: [20, 25, 22, 30, 28, 35, 40], color: "var(--ph-data-2)" },
+                { label: "Revenue", data: [80, 95, 88, 102, 110, 108, 128], color: "var(--ph-data-3)" },
+              ].map((s) => (
+                <div key={s.label} className="flex items-center gap-3">
+                  <Sparkline data={s.data} color={s.color} width={80} height={24} />
+                  <div className="min-w-0">
+                    <p className="text-xs font-medium text-ph-ink">{s.label}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </InsightShell>
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}

package/src/components/sections/SidebarShowcase.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { AppLayout, Sidebar, ShowcaseWrapper, Badge } from "@/components/ui";
+import { Home, Bell, Flag, User, Search, Zap } from "lucide-react";
+
+const sampleGroups = [
+  {
+    label: "Main",
+    items: [
+      { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
+      { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge variant="danger" size="sm">3</Badge> },
+      { label: "Explore", icon: <Search className="h-4 w-4" /> },
+    ],
+  },
+  {
+    label: "Workspace",
+    items: [
+      { label: "Projects", icon: <Flag className="h-4 w-4" /> },
+      { label: "People", icon: <User className="h-4 w-4" /> },
+      { label: "Automations", icon: <Zap className="h-4 w-4" /> },
+    ],
+  },
+];
+
+export default function SidebarShowcase() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <>
+      <ShowcaseWrapper
+        id="sidebar-demo"
+        title="Sidebar + AppLayout"
+        description="Full sidebar and content layout with grouped navigation, icons, badges, and collapse support."
+        code={`import { AppLayout, Sidebar } from "@xenide-io/the-old-ui-theme";
+
+<AppLayout
+  sidebar={
+    <Sidebar
+      groups={[
+        { label: "Main", items: [
+          { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
+          { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge>3</Badge> },
+        ]},
+      ]}
+      header={<div className="font-bold">My App</div>}
+      footer={<span className="text-xs text-ph-mutedtext">v1.0</span>}
+    />
+  }
+>
+  <div className="p-6">
+    <h1>Main content area</h1>
+  </div>
+</AppLayout>`}
+      >
+        <div className="space-y-4">
+          <button
+            onClick={() => setCollapsed(!collapsed)}
+            className="ph-btn ph-btn-secondary ph-btn-sm"
+          >
+            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          </button>
+          <div className="overflow-hidden rounded-lg border border-ph-border" style={{ height: 360 }}>
+            <AppLayout
+              sidebarWidth={collapsed ? 56 : 220}
+              sidebar={
+                <Sidebar
+                  groups={sampleGroups}
+                  collapsed={collapsed}
+                  header={
+                    <div className="flex items-center gap-2">
+                      <div className="h-6 w-6 rounded bg-ph-brand flex items-center justify-center text-xs font-bold text-[var(--ph-on-accent)]">T</div>
+                      {!collapsed && <span className="text-sm font-bold text-ph-ink">The Old UI</span>}
+                    </div>
+                  }
+                  footer={
+                    !collapsed ? <span className="text-xs text-ph-mutedtext px-2">v0.4.0</span> : null
+                  }
+                />
+              }
+            >
+              <div className="flex h-full items-center justify-center bg-ph-canvas">
+                <p className="text-sm text-ph-mutedtext">Content area — click sidebar items</p>
+              </div>
+            </AppLayout>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+
+      <ShowcaseWrapper
+        id="sidebar-props"
+        title="Sidebar Props"
+        description="Sidebar component API reference."
+        code={`// SidebarGroup
+interface SidebarGroup {
+  label: string;
+  items: SidebarItemDef[];
+}
+
+// SidebarItemDef
+interface SidebarItemDef {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  badge?: ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+// SidebarProps
+interface SidebarProps {
+  groups: SidebarGroup[];
+  className?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+// AppLayoutProps
+interface AppLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  sidebarWidth?: number;
+  className?: string;
+}`}
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="ph-panel space-y-2">
+            <h3 className="text-sm font-semibold text-ph-ink">AppLayout</h3>
+            <p className="text-xs text-ph-subtle">CSS grid wrapper with fixed sidebar + fluid content.</p>
+            <ul className="space-y-1 text-xs text-ph-subtle">
+              <li><span className="font-medium text-ph-ink">sidebar</span> — ReactNode for left column</li>
+              <li><span className="font-medium text-ph-ink">sidebarWidth</span> — px width (default 240)</li>
+              <li><span className="font-medium text-ph-ink">children</span> — main content area</li>
+            </ul>
+          </div>
+          <div className="ph-panel space-y-2">
+            <h3 className="text-sm font-semibold text-ph-ink">Sidebar</h3>
+            <p className="text-xs text-ph-subtle">Grouped navigation with icons, badges, collapse.</p>
+            <ul className="space-y-1 text-xs text-ph-subtle">
+              <li><span className="font-medium text-ph-ink">groups</span> — labeled sections with items</li>
+              <li><span className="font-medium text-ph-ink">collapsed</span> — icon-only mode</li>
+              <li><span className="font-medium text-ph-ink">header/footer</span> — top/bottom slots</li>
+            </ul>
+          </div>
+        </div>
+      </ShowcaseWrapper>
+    </>
+  );
+}