fix(use_cases): add Shadcn UI entry

Author: jwxbond

docs/SHADCN_COMPONENT_INTEGRATION_TEST_PLAN.md

@@ -1,6 +1,6 @@
 # Shadcn Component Integration Test Plan
 
-**Last Updated:** 2026-03-14
+**Last Updated:** 2026-03-16
 **Status:** In Progress
 **Target:** `integration_tests/specs/shadcn/`
 
@@ -30,6 +30,18 @@ Relevant local files:
 - Compare WebF output against Chrome before accepting new snapshot baselines.
 - Track progress in one place, PR by PR, with clear TODO lists and blockers.
 
+## Related use_cases Rollout
+
+This document still primarily tracks integration-test work. In parallel, the public
+`use_cases` demo app should expose shadcn like the existing `Cupertino UI` and
+`Lucide Icons` entries so the shipped component pages are easy to discover.
+
+- [x] Expose shadcn routes outside the `import.meta.env.DEV` gate in `use_cases/src/App.tsx`.
+- [x] Add a `Shadcn UI` quick-start card in `use_cases/src/pages/HomePage.tsx`.
+- [x] Add a `Shadcn UI` section in `use_cases/src/pages/FeatureCatalogPage.tsx`.
+- [x] Expand `use_cases/src/pages/ShadcnShowcasePage.tsx` to list all currently shipped shadcn demos.
+- [x] Align the showcase-entry navigation helpers with `WebFRouter.push(...)`.
+
 ## Non-Goals
 
 - Do not test the entire shadcn catalog in one pass.
@@ -258,6 +270,11 @@ Concrete PR1 blockers found so far:
   - Remaining open PR1 work: dependency decision and Chrome snapshot comparison.
 - **2026-03-14**: Added the first composed shadcn use-case case.
   - Added `specs/shadcn/use-cases/workspace-preferences.tsx` as a React settings-panel case instead of another low-level probe.
+- **2026-03-16**: Enabled the shadcn use_cases surface alongside Cupertino UI and Lucide Icons.
+  - Exposed the `/shadcn-*` routes in `use_cases/src/App.tsx` outside the previous dev-only gate.
+  - Added `Shadcn UI` discovery entries to the `HomePage` quick-start cards and the `FeatureCatalogPage`.
+  - Expanded `ShadcnShowcasePage` to list all currently shipped shadcn demo pages grouped by component area.
+  - Switched the showcase-entry navigation helpers to `WebFRouter.push(...)` so route mounting follows the hybrid-router path consistently.
   - Added local dependency files under `integration_tests/shadcn_support/workspace_preferences/` to model a small component tree with supporting data and types.
   - Reused the shared shadcn harness and extended the shared CSS with card/input/badge/toggle utility classes so future use-case specs do not need to inline component styling.
 

use_cases/src/pages/CupertinoShowcasePage.tsx

@@ -3,7 +3,7 @@ import { WebFRouter } from '../router';
 import { WebFListView } from '@openwebf/react-core-ui';
 
 export const CupertinoShowcasePage: React.FC = () => {
-  const navigateTo = (path: string) => WebFRouter.pushState({}, path);
+  const navigateTo = (path: string) => void WebFRouter.push(path, {});
 
   const Item = (props: { label: string; desc: string; to?: string }) => (
     <div

use_cases/src/pages/HomePage.tsx

@@ -137,6 +137,13 @@ const quickStart: QuickStartItem[] = [
     icon: LucideIcons.smartphone,
     gradient: 'linear-gradient(135deg, #3b82f6, #6366f1)',
   },
+  {
+    title: 'Shadcn UI',
+    desc: 'Component showcase',
+    to: '/shadcn-showcase',
+    icon: LucideIcons.layoutGrid,
+    gradient: 'linear-gradient(135deg, #18181b, #57534e)',
+  },
   {
     title: 'Lucide Icons',
     desc: '1600+ open source icons',
@@ -147,7 +154,7 @@ const quickStart: QuickStartItem[] = [
 ];
 
 export const HomePage: React.FC = () => {
-  const go = (path: string) => WebFRouter.pushState({}, path);
+  const go = (path: string) => void WebFRouter.push(path, {});
 
   const QuickStartCard = ({ item }: { item: QuickStartItem }) => (
     <div
@@ -156,8 +163,8 @@ export const HomePage: React.FC = () => {
         borderRadius: '16px',
         padding: '20px 16px',
         cursor: 'pointer',
-        flex: '1',
-        minWidth: '0',
+        flex: '1 1 180px',
+        minWidth: '180px',
         display: 'flex',
         flexDirection: 'column',
         gap: '10px',
@@ -351,14 +358,15 @@ export const HomePage: React.FC = () => {
           <div style={{
             display: 'flex',
             gap: '12px',
+            flexWrap: 'wrap',
           }}>
             {quickStart.map((qs) => (
               <QuickStartCard key={qs.to} item={qs} />
             ))}
           </div>
         </div>
 
-         Feature Sections
+        {/* Feature Sections */}
         <div style={{
           fontSize: '13px',
           fontWeight: 600,

use_cases/src/pages/LucideShowcasePage.tsx

@@ -3,7 +3,7 @@ import { WebFRouter } from '../router';
 import { WebFListView } from '@openwebf/react-core-ui';
 
 export const LucideShowcasePage: React.FC = () => {
-  const navigateTo = (path: string) => WebFRouter.pushState({}, path);
+  const navigateTo = (path: string) => void WebFRouter.push(path, {});
 
   const Item = (props: { label: string; desc: string; to?: string }) => (
     <div

use_cases/src/pages/ShadcnShowcasePage.tsx

@@ -2,74 +2,108 @@ import React from 'react';
 import { WebFRouter } from '../router';
 import { WebFListView } from '@openwebf/react-core-ui';
 
+type ShowcaseItem = {
+  label: string;
+  desc: string;
+  to: string;
+};
+
+type ShowcaseSection = {
+  title: string;
+  items: ShowcaseItem[];
+};
+
+const sections: ShowcaseSection[] = [
+  {
+    title: 'Form Controls',
+    items: [
+      { label: 'Buttons', desc: 'Primary, secondary, destructive, outline, ghost, and link buttons', to: '/shadcn/buttons' },
+      { label: 'Icon Button', desc: 'Compact icon-only actions with Lucide icons', to: '/shadcn/icon-button' },
+      { label: 'Input', desc: 'Text, email, password, and textarea inputs with helper states', to: '/shadcn/input' },
+      { label: 'Checkbox & Switch', desc: 'Binary toggles for settings and consent flows', to: '/shadcn/checkbox-switch' },
+      { label: 'Select', desc: 'Select menu and combobox-style choices', to: '/shadcn/select' },
+      { label: 'Slider', desc: 'Range selection with labeled values', to: '/shadcn/slider' },
+      { label: 'Radio Group', desc: 'Single-choice grouped selection patterns', to: '/shadcn/radio' },
+      { label: 'Form', desc: 'Composed form layout with validation-friendly structure', to: '/shadcn/form' },
+    ],
+  },
+  {
+    title: 'Display & Feedback',
+    items: [
+      { label: 'Card', desc: 'Flexible content containers with header and footer regions', to: '/shadcn/card' },
+      { label: 'Alert & Badge', desc: 'Status chips, inline alerts, and emphasis states', to: '/shadcn/alert-badge' },
+      { label: 'Avatar', desc: 'Profile surfaces with initials and image fallbacks', to: '/shadcn/avatar' },
+      { label: 'Progress', desc: 'Determinate progress indicators for long-running tasks', to: '/shadcn/progress' },
+      { label: 'Skeleton', desc: 'Loading placeholders for content-first layouts', to: '/shadcn/skeleton' },
+      { label: 'Table', desc: 'Structured row and column presentation for datasets', to: '/shadcn/table' },
+    ],
+  },
+  {
+    title: 'Navigation & Layout',
+    items: [
+      { label: 'Tabs', desc: 'Tabbed views with active state and content switching', to: '/shadcn/tabs' },
+      { label: 'Accordion', desc: 'Expandable sections for dense content blocks', to: '/shadcn/accordion' },
+      { label: 'Breadcrumb', desc: 'Hierarchy trails and backtracking patterns', to: '/shadcn/breadcrumb' },
+    ],
+  },
+  {
+    title: 'Overlays & Menus',
+    items: [
+      { label: 'Dialog', desc: 'Modal dialog and sheet-style interaction patterns', to: '/shadcn/dialog' },
+      { label: 'Popover', desc: 'Floating panels, popovers, and tooltip-style surfaces', to: '/shadcn/popover' },
+      { label: 'Dropdown Menu', desc: 'Compact action menus from trigger buttons', to: '/shadcn/dropdown' },
+      { label: 'Context Menu', desc: 'Contextual actions for secondary-click workflows', to: '/shadcn/context-menu' },
+    ],
+  },
+  {
+    title: 'Date & Scheduling',
+    items: [
+      { label: 'Calendar', desc: 'Date picking and month-grid scheduling UI', to: '/shadcn/calendar' },
+    ],
+  },
+];
+
 export const ShadcnShowcasePage: React.FC = () => {
-  const navigateTo = (path: string) => WebFRouter.pushState({}, path);
+  const navigateTo = (path: string) => void WebFRouter.push(path, {});
 
-  const Item = (props: { label: string; desc: string; to?: string }) => (
+  const Item = ({ label, desc, to }: ShowcaseItem) => (
     <div
-      className={`flex items-center p-4 border-b border-[#f0f0f0] cursor-pointer transition-colors hover:bg-surface-hover ${props.to ? '' : 'pointer-events-none opacity-60'}`}
-      onClick={props.to ? () => navigateTo(props.to!) : undefined}
+      className="flex items-center p-4 border-b border-[#ececec] cursor-pointer transition-colors hover:bg-surface-hover"
+      onClick={() => navigateTo(to)}
     >
       <div className="flex-1">
-        <div className="text-[16px] font-semibold text-[#2c3e50] mb-1">{props.label}</div>
-        <div className="text-[14px] text-[#7f8c8d] leading-snug">{props.desc}</div>
+        <div className="text-[16px] font-semibold text-[#1f2937] mb-1">{label}</div>
+        <div className="text-[14px] text-[#6b7280] leading-snug">{desc}</div>
       </div>
-      <div className="text-[16px] text-[#bdc3c7] font-bold">&gt;</div>
+      <div className="text-[16px] text-[#9ca3af] font-bold">&gt;</div>
     </div>
   );
 
   return (
     <div id="main" className="min-h-screen w-full bg-surface">
       <WebFListView className="w-full px-3 md:px-6 max-w-4xl mx-auto py-6">
         <div className="w-full flex justify-center items-center">
-          <div className="bg-gradient-to-tr from-zinc-800 to-zinc-600 p-6 rounded-2xl text-white shadow">
-            <h1 className="text-[28px] font-bold mb-2 drop-shadow">Shadcn UI</h1>
-            <p className="text-[16px]/[1.5] opacity-90">Beautiful components built with WebF and shadcn_ui</p>
+          <div className="bg-gradient-to-br from-zinc-950 via-zinc-800 to-stone-700 p-6 rounded-2xl text-white shadow-lg w-full">
+            <h1 className="text-[28px] font-bold mb-2 drop-shadow">Shadcn UI Showcase</h1>
+            <p className="text-[16px]/[1.5] opacity-90">
+              Explore the current WebF demos built with <code>@openwebf/react-shadcn-ui</code>.
+            </p>
           </div>
         </div>
 
         <div className="mt-6">
-          <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Form Controls</h2>
-          <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            <Item label="Buttons" desc="Primary, secondary, destructive, outline, ghost variants" to="/shadcn/buttons" />
-            <Item label="Icon Button" desc="Icon-only buttons with Lucide icons" to="/shadcn/icon-button" />
-            {/*<Item label="Input" desc="Text input with various types and states" to="/shadcn/input" />*/}
-            <Item label="Checkbox & Switch" desc="Toggle controls for forms" to="/shadcn/checkbox-switch" />
-            {/*<Item label="Select & Combobox" desc="Dropdown selection components" to="/shadcn/select" />*/}
-            {/*<Item label="Slider" desc="Range selection slider" to="/shadcn/slider" />*/}
-            {/*<Item label="Radio Group" desc="Single selection from multiple options" to="/shadcn/radio" />*/}
-            {/*<Item label="Form" desc="Form state management with validation" to="/shadcn/form" />*/}
-          </div>
-
-          <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Display Components</h2>
-          <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            <Item label="Card" desc="Container with header, content, and footer" to="/shadcn/card" />
-            <Item label="Alert & Badge" desc="Notifications and status indicators" to="/shadcn/alert-badge" />
-            <Item label="Avatar" desc="User profile images" to="/shadcn/avatar" />
-            {/*<Item label="Progress" desc="Loading and progress indicators" to="/shadcn/progress" />*/}
-            {/*<Item label="Skeleton" desc="Loading placeholder animations" to="/shadcn/skeleton" />*/}
-          </div>
-
-          <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Navigation & Layout</h2>
-          <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            {/*<Item label="Tabs" desc="Tabbed content navigation" to="/shadcn/tabs" />*/}
-            <Item label="Accordion" desc="Collapsible content sections" to="/shadcn/accordion" />
-            <Item label="Dialog & Sheet" desc="Modal dialogs and bottom sheets" to="/shadcn/dialog" />
-            <Item label="Breadcrumb" desc="Navigation hierarchy" to="/shadcn/breadcrumb" />
-          </div>
-
-          <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Data & Pickers</h2>
-          <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            {/*<Item label="Table" desc="Data table with headers and rows" to="/shadcn/table" />*/}
-            <Item label="Calendar & Date Picker" desc="Date selection components" to="/shadcn/calendar" />
-          </div>
-
-          <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-500">Menus & Overlays</h2>
-          <div className="mb-5 bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
-            <Item label="Dropdown Menu" desc="Action menu dropdowns" to="/shadcn/dropdown" />
-            <Item label="Context Menu" desc="Right-click context menus" to="/shadcn/context-menu" />
-            {/*<Item label="Popover & Tooltip" desc="Floating content and hints" to="/shadcn/popover" />*/}
-          </div>
+          {sections.map((section) => (
+            <div key={section.title} className="mb-5">
+              <h2 className="text-lg font-semibold text-fg-primary mb-3 pl-3 border-l-4 border-zinc-600">
+                {section.title}
+              </h2>
+              <div className="bg-surface-secondary rounded-xl shadow overflow-hidden border border-line">
+                {section.items.map((item) => (
+                  <Item key={item.to} {...item} />
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
       </WebFListView>
     </div>