noecosystem-design 0.1.0

package/apps/showcase/src/catalog/catalog-index.tsx

@@ -0,0 +1,2676 @@
+import {
+  ActivityFeed,
+  AgentMessage,
+  AgentPlan,
+  AgentWorkspace,
+  ApprovalRequest,
+  type PlanStep,
+  RunInspector,
+  ToolCall,
+} from '@noe/ai-ui';
+import {
+  ActivityGauge,
+  Chart,
+  ChartFrame,
+  Dashboard01,
+  Dashboard02,
+  DashboardShell,
+  type DataColumn,
+  DataTable,
+  FilterBar,
+  MetricCard,
+  Pagination,
+  PieChart,
+  RadarChart,
+} from '@noe/data-ui';
+import { ChevronIcon, icons8Source, NoeMark } from '@noe/icons';
+import {
+  AboutPage,
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+  AppFrame,
+  AutoDirectionText,
+  Avatar,
+  Badge,
+  BadgeGroup,
+  Banner,
+  BidiText,
+  BlogIndexPage,
+  BlogPostPage,
+  BlogSection,
+  BottomNavigation,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CareersSection,
+  Carousel,
+  Checkbox,
+  ColorPicker,
+  CommandMenu,
+  ContactPage,
+  ContactSection,
+  ContentDivider,
+  ContentSection,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  CreditCard,
+  CtaSection,
+  DataList,
+  DatePicker,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogTitle,
+  DialogTrigger,
+  DirectionProvider,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+  EcosystemMotionShowcase,
+  EcosystemSphere,
+  EmailTemplate,
+  EmptyState,
+  ErrorState,
+  Fab,
+  FaqPage,
+  FaqSection,
+  FeaturedIcon,
+  FeatureSection,
+  Field,
+  FileUploader,
+  Footer,
+  ForgotPasswordPage,
+  GradientPicker,
+  HeaderNavigation,
+  HeroHeader,
+  Illustration,
+  ImagePicker,
+  InformationalPage01,
+  InformationalPage02,
+  InlineCode,
+  InlineCta,
+  Input,
+  KineticExperience,
+  LandingPage,
+  LegalPage,
+  LocalizedDate,
+  LocalizedNumber,
+  LoginPage,
+  Marketing404Page,
+  MarketingHeader,
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuSeparator,
+  MenuTrigger,
+  Messaging,
+  MetricsSection,
+  MobileScreen,
+  MultiSelect,
+  Newsletter,
+  NotFound,
+  Notification,
+  PageHeader,
+  PricingPage,
+  PricingSection,
+  ProgressIndicator,
+  ProgressSteps,
+  QrCode,
+  RadioGroup,
+  Rating,
+  RichTextEditor,
+  SectionFooter,
+  SectionHeader,
+  Select,
+  Settings01,
+  Settings02,
+  SettingsPage,
+  SidebarNavigation,
+  SignInForm,
+  SignUpPage,
+  Skeleton,
+  Slider,
+  SocialButton,
+  SocialProof,
+  Spinner,
+  StoreButton,
+  SystemAnatomy,
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  Tags,
+  TeamPage,
+  TeamSection,
+  TechnicalValue,
+  Terminal,
+  TestimonialSection,
+  Textarea,
+  Toggle,
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+  TreeView,
+  UtilityButton,
+  VerificationCode,
+  VerificationPage,
+  VideoPlayer,
+} from '@noe/ui';
+import { WorkflowCanvas, WorkflowNode } from '@noe/workflow-ui';
+import type * as React from 'react';
+
+import componentAudit from '../../../../packages/registry/component-audit.json' with {
+  type: 'json',
+};
+import { AgentComposerPreview } from './agent-composer-preview';
+
+export type CatalogStatus = 'available' | 'in-progress' | 'planned' | 'partial' | 'experimental';
+
+import type { Direction, LocaleCode } from '@noe/i18n';
+
+export type CatalogPreviewContext = {
+  locale: LocaleCode;
+  direction: Direction;
+  t: (key: string) => string;
+  status: CatalogStatus;
+};
+
+export type CatalogEntry = {
+  id: string;
+  category: string;
+  status: CatalogStatus;
+  name: string;
+  description: string;
+  package: string;
+  registryItem: string | null;
+  preview: (ctx: CatalogPreviewContext) => React.ReactNode;
+};
+
+const auditById = new Map(componentAudit.items.map((item) => [item.id, item]));
+
+function statusOf(id: string): CatalogStatus {
+  return (auditById.get(id)?.status as CatalogStatus) ?? 'planned';
+}
+
+const planSteps: PlanStep[] = [
+  { id: '1', label: 'Read failing test output', state: 'completed' },
+  { id: '2', label: 'Patch dialog.tsx portal direction', state: 'running' },
+  { id: '3', label: 'Re-run browser tests', state: 'queued' },
+];
+
+const tableColumns: DataColumn<{
+  id: string;
+  service: string;
+  owner: string;
+  status: string;
+  updated: string;
+}>[] = [
+  { key: 'service', header: 'Service' },
+  { key: 'owner', header: 'Owner' },
+  { key: 'status', header: 'Status' },
+  { key: 'updated', header: 'Updated', technical: true, align: 'end' },
+];
+
+const tableRows = [
+  { id: '1', service: 'catalog-api', owner: 'Platform', status: 'Healthy', updated: '2m ago' },
+  {
+    id: '2',
+    service: 'agent-runner',
+    owner: 'AI Platform',
+    status: 'Degraded',
+    updated: '11m ago',
+  },
+];
+
+export const catalogEntries: readonly CatalogEntry[] = [
+  {
+    id: 'bidi-text',
+    category: 'Foundations / Direction & Bidi',
+    status: statusOf('bidi-text'),
+    name: 'Bidi Text',
+    description:
+      'Mixed-direction content primitives for user text, URLs, hashes, commands and technical identifiers.',
+    package: '@noe/ui',
+    registryItem: 'bidi-text',
+    preview: ({ t }) => (
+      <div style={{ display: 'grid', gap: '0.5rem', fontSize: '0.875rem' }}>
+        <AutoDirectionText>{t('catalog.preview.bidi.autoText')}</AutoDirectionText>
+        <BidiText>
+          PR #482 {t('catalog.preview.bidi.related')}
+        </BidiText>
+        <TechnicalValue>a1b2c3d4 · mcp://fs/read</TechnicalValue>
+        <span dir="ltr" style={{ fontFamily: 'var(--font-sf-pro, var(--noe-font-family-sans))' }}>
+          <LocalizedNumber value={128942.5} locale="en" /> ·{' '}
+          <LocalizedDate value="2026-08-26" locale="en" />
+        </span>
+      </div>
+    ),
+  },
+  {
+    id: 'direction-provider',
+    category: 'Foundations / Direction & Bidi',
+    status: statusOf('direction-provider'),
+    name: 'Direction Provider',
+    description:
+      'Establishes a direction scope for nested content and portalled overlays, independent of page direction.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: ({ t }) => (
+      <DirectionProvider direction="rtl">
+        <div className="rounded-md bg-surface-sunken/60 p-3 text-sm" lang="fa">
+          {t('catalog.preview.direction.rtlSample')}
+        </div>
+      </DirectionProvider>
+    ),
+  },
+  {
+    id: 'code-and-terminal',
+    category: 'Foundations / Technical Content',
+    status: statusOf('code-and-terminal'),
+    name: 'Code and Terminal',
+    description:
+      'LTR-isolated code, command, terminal and log presentation inside RTL or LTR application chrome.',
+    package: '@noe/ui',
+    registryItem: 'code-block',
+    preview: () => (
+      <div style={{ display: 'grid', gap: '0.75rem' }}>
+        <p className="m-0 text-sm">
+          Run <InlineCode>pnpm verify</InlineCode> before opening a pull request.
+        </p>
+        <Terminal
+          label="pnpm verify output"
+          lines={[{ value: '$ pnpm verify' }, { value: 'PASS registry unique names: 16 items' }]}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'icon-system',
+    category: 'Foundations / Icons',
+    status: statusOf('icon-system'),
+    name: 'Icon System',
+    description:
+      'Icons8-sourced interface icons with an explicit directional-mirroring policy for RTL layouts.',
+    package: '@noe/icons',
+    registryItem: null,
+    preview: () => (
+      <div className="flex flex-col gap-3" dir="ltr">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <NoeMark className="size-8" />
+            <span className="font-mono text-xs text-muted-foreground">NOEcosystem</span>
+          </div>
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5">
+              <ChevronIcon direction="forward" className="size-4 text-foreground" />
+              Forward
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <ChevronIcon direction="backward" className="size-4 text-foreground" />
+              Backward
+            </span>
+          </div>
+        </div>
+        <span className="font-mono text-[0.6875rem] text-muted-foreground">
+          {icons8Source.provider} / {icons8Source.asset}
+        </span>
+      </div>
+    ),
+  },
+  {
+    id: 'button',
+    category: 'Primitives / Actions',
+    status: statusOf('button'),
+    name: 'Button',
+    description:
+      'Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout.',
+    package: '@noe/ui',
+    registryItem: 'button',
+    preview: () => (
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+        <Button variant="primary">Continue</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="destructive">Delete</Button>
+        <Button loading>Loading</Button>
+      </div>
+    ),
+  },
+  {
+    id: 'input',
+    category: 'Primitives / Forms',
+    status: statusOf('input'),
+    name: 'Input',
+    description:
+      'Text control with size variants and a technical-input direction policy for email/url/tel/number.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Input placeholder="Search runs, tools, artifacts…" style={{ maxWidth: '20rem' }} />
+    ),
+  },
+  {
+    id: 'field',
+    category: 'Primitives / Forms',
+    status: statusOf('field'),
+    name: 'Field',
+    description:
+      'Accessible form field composition with localized labels, errors, descriptions and technical-input direction policy.',
+    package: '@noe/ui',
+    registryItem: 'input',
+    preview: () => (
+      <Field label="Workspace name" description="Shown to every collaborator.">
+        <Input placeholder="acme-production" />
+      </Field>
+    ),
+  },
+  {
+    id: 'textarea',
+    category: 'Primitives / Forms',
+    status: statusOf('textarea'),
+    name: 'Textarea',
+    description:
+      'Auto-sizing multiline control that preserves automatic direction for user-authored content.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => <Textarea placeholder="Describe the change…" style={{ maxWidth: '20rem' }} />,
+  },
+  {
+    id: 'card',
+    category: 'Primitives / Layout',
+    status: statusOf('card'),
+    name: 'Card',
+    description: 'Shared surface-raised container with header, panel and footer regions.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Card style={{ maxWidth: '18rem' }}>
+        <CardHeader>
+          <CardTitle>Deploy pipeline</CardTitle>
+          <CardDescription>Runs before release.</CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button size="sm" variant="primary">
+            Run again
+          </Button>
+        </CardFooter>
+      </Card>
+    ),
+  },
+  {
+    id: 'alert',
+    category: 'Feedback',
+    status: statusOf('alert'),
+    name: 'Alert',
+    description: 'Status-variant banner with default/info/success/warning/error semantics.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Alert variant="info" style={{ maxWidth: '22rem' }}>
+        <AlertTitle>Deployment update</AlertTitle>
+        <AlertDescription>
+          The verification matrix completed for this pull request.
+        </AlertDescription>
+        <AlertAction>
+          <Button size="sm" variant="outline">
+            View details
+          </Button>
+        </AlertAction>
+      </Alert>
+    ),
+  },
+  {
+    id: 'badge',
+    category: 'Feedback',
+    status: statusOf('badge'),
+    name: 'Badge',
+    description: 'Compact status label used for maturity states, roles and counts.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <div style={{ display: 'flex', gap: '0.5rem' }}>
+        <Badge>available</Badge>
+        <Badge variant="warning">in-progress</Badge>
+        <Badge variant="destructive">blocked</Badge>
+      </div>
+    ),
+  },
+  {
+    id: 'skeleton',
+    category: 'Feedback',
+    status: statusOf('skeleton'),
+    name: 'Skeleton',
+    description: 'Token-driven pulse placeholder for loading content, respecting reduced motion.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Card style={{ maxWidth: '20rem' }}>
+        <CardHeader>
+          <CardTitle>Loading profile</CardTitle>
+          <CardDescription>Fetching workspace data…</CardDescription>
+        </CardHeader>
+        <div style={{ display: 'grid', gap: '0.75rem', padding: '0 1.25rem 1.25rem' }}>
+          <Skeleton style={{ height: '0.875rem', width: '70%' }} />
+          <Skeleton style={{ height: '0.875rem', width: '100%' }} />
+          <Skeleton style={{ height: '0.875rem', width: '85%' }} />
+        </div>
+      </Card>
+    ),
+  },
+  {
+    id: 'spinner',
+    category: 'Feedback',
+    status: statusOf('spinner'),
+    name: 'Spinner',
+    description: 'Indeterminate loading indicator, used standalone and inside Button.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', alignItems: 'center' }}>
+        <Card style={{ maxWidth: '20rem', width: '100%' }}>
+          <CardHeader>
+            <CardTitle>Syncing</CardTitle>
+            <CardDescription>Please wait while we fetch the latest runs.</CardDescription>
+          </CardHeader>
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem' }}>
+            <Spinner aria-label="Loading" className="size-6" />
+          </div>
+        </Card>
+        <Button loading>Loading</Button>
+      </div>
+    ),
+  },
+  {
+    id: 'empty-state',
+    category: 'Feedback',
+    status: statusOf('empty-state'),
+    name: 'Empty State',
+    description: 'Media/title/description/action composition for zero-data states.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <EmptyState
+        style={{ maxWidth: '22rem' }}
+        title="No runs yet"
+        description="Start a run to see agent activity here."
+        action={<Button variant="primary">Start a run</Button>}
+      />
+    ),
+  },
+  {
+    id: 'error-state',
+    category: 'Feedback',
+    status: statusOf('error-state'),
+    name: 'Error State',
+    description: 'Media/title/description/action composition for recoverable error states.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <ErrorState
+        style={{ maxWidth: '22rem' }}
+        title="Could not load the run"
+        description="The run may have expired."
+        action={<Button variant="outline">Retry</Button>}
+      />
+    ),
+  },
+  {
+    id: 'dialog',
+    category: 'Overlays',
+    status: statusOf('dialog'),
+    name: 'Dialog',
+    description:
+      'Direction-preserving modal primitive with native focus semantics and portal propagation.',
+    package: '@noe/ui',
+    registryItem: 'dialog',
+    preview: () => (
+      <Dialog>
+        <DialogTrigger render={<Button>Review change</Button>} />
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Publish executive brief</DialogTitle>
+            <DialogDescription>Shares the brief with the leadership workspace.</DialogDescription>
+          </DialogHeader>
+          <DialogPanel>
+            <p className="m-0 text-sm">Visible to 12 people immediately after publishing.</p>
+          </DialogPanel>
+          <DialogFooter>
+            <DialogClose render={<Button variant="quiet">Cancel</Button>} />
+            <Button variant="primary">Publish</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    ),
+  },
+  {
+    id: 'drawer',
+    category: 'Overlays',
+    status: statusOf('drawer'),
+    name: 'Drawer',
+    description:
+      'Logical start/end drawer that resolves against active writing direction and keeps DOM order stable.',
+    package: '@noe/ui',
+    registryItem: 'drawer',
+    preview: () => (
+      <Drawer side="end">
+        <DrawerTrigger render={<Button>Open run inspector</Button>} />
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Run inspector</DrawerTitle>
+          </DrawerHeader>
+          <DrawerPanel>
+            <p className="m-0 text-sm">Trace, tool calls and token usage.</p>
+          </DrawerPanel>
+          <DrawerFooter>
+            <DrawerClose render={<Button variant="quiet">Close</Button>} />
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    ),
+  },
+  {
+    id: 'menu',
+    category: 'Overlays',
+    status: statusOf('menu'),
+    name: 'Menu',
+    description:
+      'Dropdown menu with popup/sub-menu portal direction and a destructive item variant.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Menu>
+        <MenuTrigger render={<Button>Actions</Button>} />
+        <MenuPopup>
+          <MenuItem>Rerun</MenuItem>
+          <MenuItem>Duplicate</MenuItem>
+          <MenuSeparator />
+          <MenuItem variant="destructive">Cancel run</MenuItem>
+        </MenuPopup>
+      </Menu>
+    ),
+  },
+  {
+    id: 'tooltip',
+    category: 'Overlays',
+    status: statusOf('tooltip'),
+    name: 'Tooltip',
+    description: 'Anchored hint with explicit popup portal direction.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={<Button variant="ghost">Hover for detail</Button>} />
+          <TooltipPopup>Rerun uses the same inputs as the last successful run.</TooltipPopup>
+        </Tooltip>
+      </TooltipProvider>
+    ),
+  },
+  {
+    id: 'tabs',
+    category: 'Navigation',
+    status: statusOf('tabs'),
+    name: 'Tabs',
+    description:
+      'Segmented and underline tab variants with logical vertical orientation and arrow-key navigation.',
+    package: '@noe/ui',
+    registryItem: null,
+    preview: () => (
+      <Tabs defaultValue="plan" style={{ maxWidth: '20rem' }}>
+        <TabsList aria-label="Run detail">
+          <TabsTab value="plan">Plan</TabsTab>
+          <TabsTab value="tools">Tools</TabsTab>
+        </TabsList>
+        <TabsPanel value="plan">Three steps queued, one running.</TabsPanel>
+        <TabsPanel value="tools">2 tool calls, 1 awaiting approval.</TabsPanel>
+      </Tabs>
+    ),
+  },
+  {
+    id: 'data-table',
+    category: 'Data',
+    status: statusOf('data-table'),
+    name: 'Data Table',
+    description:
+      'Direction-safe semantic table contract prepared for TanStack Table state adapters.',
+    package: '@noe/data-ui',
+    registryItem: 'data-table',
+    preview: () => (
+      <DataTable
+        columns={tableColumns}
+        rows={tableRows}
+        caption="Service health"
+        empty="No services yet."
+      />
+    ),
+  },
+  {
+    id: 'metric-card',
+    category: 'Data',
+    status: statusOf('metric-card'),
+    name: 'Metric Card',
+    description:
+      'Quiet operational metric composition with semantic status treatment and localized values.',
+    package: '@noe/data-ui',
+    registryItem: 'metric-card',
+    preview: () => (
+      <MetricCard label="Active services" value="128" delta="+4 this week" status="positive" />
+    ),
+  },
+  {
+    id: 'chart-frame',
+    category: 'Data',
+    status: statusOf('chart-frame'),
+    name: 'Chart Frame',
+    description:
+      'Shared title/description/controls frame for chart content; chart engines render inside it.',
+    package: '@noe/data-ui',
+    registryItem: null,
+    preview: () => (
+      <ChartFrame title="Median latency" description="Last 7 days">
+        <svg viewBox="0 0 240 64" width="100%" height="64" role="img" aria-label="Latency trend">
+          <polyline
+            points="0,48 30,40 60,44 90,20 120,28 150,12 180,18 210,8 240,16"
+            fill="none"
+            stroke="var(--noe-color-accent)"
+            strokeWidth="2"
+          />
+        </svg>
+      </ChartFrame>
+    ),
+  },
+  {
+    id: 'agent-composer',
+    category: 'Agentic',
+    status: statusOf('agent-composer'),
+    name: 'Agent Composer',
+    description:
+      'Accessible multiline agent input with localized placeholder and explicit submit behavior.',
+    package: '@noe/ai-ui',
+    registryItem: 'agent-composer',
+    preview: () => <AgentComposerPreview />,
+  },
+  {
+    id: 'agent-message',
+    category: 'Agentic',
+    status: statusOf('agent-message'),
+    name: 'Agent Message',
+    description:
+      'Agent and human message composition with auto-direction runtime content and model identifier isolation.',
+    package: '@noe/ai-ui',
+    registryItem: 'agent-message',
+    preview: () => (
+      <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '24rem' }}>
+        {/* biome-ignore lint/a11y/useValidAriaRole: AgentMessage's `role` is a message-role enum ('user' | 'assistant' | 'system'), not a DOM ARIA role. */}
+        <AgentMessage role="user" name="Ali" content="Can you check the RTL behavior?" />
+        {/* biome-ignore lint/a11y/useValidAriaRole: AgentMessage's `role` is a message-role enum, not a DOM ARIA role. */}
+        <AgentMessage
+          role="assistant"
+          name="NOa"
+          model="noe-agent-1"
+          content="Reviewed and left three comments."
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'agent-plan',
+    category: 'Agentic',
+    status: statusOf('agent-plan'),
+    name: 'Agent Plan',
+    description:
+      'Queued, running, completed and failed execution-plan steps with progressive disclosure.',
+    package: '@noe/ai-ui',
+    registryItem: 'agent-plan',
+    preview: () => (
+      <AgentPlan
+        title="Fix RTL dialog portal"
+        steps={planSteps}
+        stateLabels={{
+          queued: 'Queued',
+          running: 'Running',
+          completed: 'Completed',
+          failed: 'Failed',
+        }}
+      />
+    ),
+  },
+  {
+    id: 'run-inspector',
+    category: 'Agentic',
+    status: statusOf('run-inspector'),
+    name: 'Run Inspector',
+    description: 'Compact run status, identifiers, latency, token use and trace details.',
+    package: '@noe/ai-ui',
+    registryItem: 'run-inspector',
+    preview: () => (
+      <RunInspector
+        runId="run_9f21ac"
+        status="Running"
+        latency="842ms"
+        tokenUsage="12,480 / 128,000"
+        labels={{ run: 'Run', latency: 'Latency', tokens: 'Tokens' }}
+      />
+    ),
+  },
+  {
+    id: 'tool-call',
+    category: 'Agentic',
+    status: statusOf('tool-call'),
+    name: 'Tool Call',
+    description:
+      'Human-readable tool state, scope and result summary with expandable technical detail.',
+    package: '@noe/ai-ui',
+    registryItem: 'tool-call',
+    preview: () => (
+      <ToolCall
+        title="Fetch service health"
+        tool="mcp://observability/service-health"
+        state="running"
+        stateLabel="Running"
+        summary="Read-only telemetry request for production services."
+      />
+    ),
+  },
+  {
+    id: 'approval-request',
+    category: 'Agentic',
+    status: statusOf('approval-request'),
+    name: 'Approval Request',
+    description:
+      'Human-in-the-loop decision pattern showing target, parameters, consequence and scoped choices.',
+    package: '@noe/ai-ui',
+    registryItem: 'approval-request',
+    preview: () => (
+      <ApprovalRequest
+        title="Approval required"
+        consequence="Publish the executive brief to the leadership workspace."
+        target="workspace://leadership/daily-brief"
+        targetLabel="Target"
+        parameters={[{ id: 'visibility', label: 'Visibility', value: 'leadership' }]}
+        labels={{ once: 'Allow once', session: 'Allow for session', deny: 'Deny' }}
+        onDecision={() => undefined}
+      />
+    ),
+  },
+  {
+    id: 'workflow-canvas',
+    category: 'Workflow',
+    status: statusOf('workflow-canvas'),
+    name: 'Workflow Canvas',
+    description:
+      'Accessible workflow canvas shell, toolbar and inspector regions suitable for a React Flow adapter.',
+    package: '@noe/workflow-ui',
+    registryItem: 'workflow-canvas',
+    preview: () => (
+      <div style={{ height: '14rem' }}>
+        <WorkflowCanvas label="Deploy workflow">
+          <WorkflowNode kind="agent" title="Review agent" subtitle="noe-agent-1" selected />
+        </WorkflowCanvas>
+      </div>
+    ),
+  },
+  {
+    id: 'workflow-node',
+    category: 'Workflow',
+    status: statusOf('workflow-node'),
+    name: 'Workflow Node',
+    description:
+      'Agent, tool, trigger, condition and output node visual contract with keyboard focus.',
+    package: '@noe/workflow-ui',
+    registryItem: 'workflow-node',
+    preview: () => (
+      <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+        <WorkflowNode kind="trigger" title="On pull request" />
+        <WorkflowNode kind="tool" title="Run tests" subtitle="ci/unit" />
+      </div>
+    ),
+  },
+  {
+    id: 'page-header',
+    category: 'Patterns / Application',
+    status: statusOf('page-header'),
+    name: 'Page Header',
+    description:
+      'Application page header pattern with optional breadcrumb, title, description and action row; mirrors with logical layout in RTL.',
+    package: '@noe/ui',
+    registryItem: 'page-header',
+    preview: () => (
+      <PageHeader
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Workspace', href: '#' },
+              { label: 'Agents', href: '#' },
+              { label: 'Review agent', current: true },
+            ]}
+          />
+        }
+        title="Review agent"
+        description="Configuration, tools and recent activity for this agent."
+        actions={
+          <Button size="sm" variant="primary">
+            New run
+          </Button>
+        }
+      />
+    ),
+  },
+  {
+    id: 'sidebar-navigation',
+    category: 'Patterns / Application',
+    status: statusOf('sidebar-navigation'),
+    name: 'Sidebar Navigation',
+    description:
+      'Sectioned application sidebar navigation contract with current-page state and logical start alignment for both directions.',
+    package: '@noe/ui',
+    registryItem: 'sidebar-navigation',
+    preview: () => (
+      <div style={{ maxWidth: '16rem' }}>
+        <SidebarNavigation
+          label="Workspace"
+          sections={[
+            {
+              id: 'workspace',
+              items: [
+                { href: '#overview', label: 'Overview', current: true },
+                { href: '#runs', label: 'Runs', badge: '24' },
+                { href: '#tools', label: 'Tools' },
+              ],
+            },
+            {
+              id: 'settings',
+              label: 'Settings',
+              items: [
+                { href: '#models', label: 'Models' },
+                { href: '#mcp', label: 'MCP servers' },
+              ],
+            },
+          ]}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'agent-workspace',
+    category: 'Patterns / Pages',
+    status: statusOf('agent-workspace'),
+    name: 'Agent Workspace',
+    description:
+      'Three-region agent workspace page block composing navigation, conversation and a progressively disclosed run inspector; column order follows direction.',
+    package: '@noe/ai-ui',
+    registryItem: 'agent-workspace',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <AgentWorkspace
+          label="Agent workspace"
+          navigation={
+            <SidebarNavigation
+              label="Workspace"
+              sections={[
+                {
+                  id: 'workspace',
+                  items: [
+                    { href: '#agents', label: 'Agents', current: true },
+                    { href: '#runs', label: 'Runs', badge: '24' },
+                    { href: '#mcp', label: 'MCP servers' },
+                  ],
+                },
+              ]}
+            />
+          }
+          inspector={
+            <RunInspector
+              runId="run_9f21ac"
+              status="Running"
+              latency="842ms"
+              tokenUsage="12,480 / 128,000"
+              labels={{ run: 'Run', latency: 'Latency', tokens: 'Tokens' }}
+            />
+          }
+        >
+          <p className="m-0 text-sm leading-normal text-muted-foreground">
+            Conversation and generated artifacts render in this region.
+          </p>
+        </AgentWorkspace>
+      </div>
+    ),
+  },
+  {
+    id: 'section-header',
+    category: 'Patterns / Application',
+    status: statusOf('section-header'),
+    name: 'Section Header',
+    description:
+      'Application section header pattern with title, optional description and trailing action row; alignment resolves with logical layout in RTL.',
+    package: '@noe/ui',
+    registryItem: 'section-header',
+    preview: () => (
+      <div style={{ display: 'grid', gap: '1.5rem', maxWidth: '28rem' }}>
+        <SectionHeader
+          title="Recent runs"
+          description="Executions from the last 24 hours across every workspace."
+          actions={
+            <Button size="sm" variant="outline">
+              View all
+            </Button>
+          }
+        />
+        <SectionHeader title="Tools" />
+      </div>
+    ),
+  },
+  {
+    id: 'filter-bar',
+    category: 'Patterns / Data',
+    status: statusOf('filter-bar'),
+    name: 'Filter Bar',
+    description:
+      'Searchable filter row for data surfaces with search, filter and action slots; spacing uses logical properties so it mirrors under RTL.',
+    package: '@noe/data-ui',
+    registryItem: 'filter-bar',
+    preview: () => (
+      <div style={{ maxWidth: '30rem' }}>
+        <FilterBar
+          label="Run filters"
+          search={<Input aria-label="Search runs" placeholder="Search runs…" />}
+          action={
+            <button
+              className="rounded-md border border-border px-3 py-1.5 text-sm leading-normal hover:bg-surface-sunken/60"
+              type="button"
+            >
+              Reset
+            </button>
+          }
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'pagination',
+    category: 'Patterns / Data',
+    status: statusOf('pagination'),
+    name: 'Pagination',
+    description:
+      'Accessible pagination contract with localized previous and next labels, live status region and disabled boundary states for data tables.',
+    package: '@noe/data-ui',
+    registryItem: 'pagination',
+    preview: () => (
+      <div style={{ maxWidth: '26rem' }}>
+        <Pagination
+          canPrevious={false}
+          label="Runs pagination"
+          nextLabel="Next page"
+          previousLabel="Previous page"
+          status="Page 1 of 8"
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'activity-feed',
+    category: 'Patterns / Application',
+    status: statusOf('activity-feed'),
+    name: 'Activity Feed',
+    description:
+      'Timestamped run and system activity list with semantic status markers, logical start alignment and mixed-direction metadata isolation.',
+    package: '@noe/ai-ui',
+    registryItem: 'activity-feed',
+    preview: () => (
+      <div style={{ maxWidth: '22rem' }}>
+        <ActivityFeed
+          items={[
+            {
+              id: '1',
+              label: 'Run completed for review-agent',
+              meta: 'run_9f21ac',
+              timestamp: '12:04',
+              status: 'positive',
+            },
+            {
+              id: '2',
+              label: 'Tool call awaiting approval',
+              meta: 'mcp://db/delete-rows',
+              timestamp: '12:02',
+              status: 'warning',
+            },
+            {
+              id: '3',
+              label: 'Runner connection lost',
+              timestamp: '11:58',
+              status: 'error',
+            },
+          ]}
+          label="Workspace activity"
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'sign-in-form',
+    category: 'Patterns / Pages',
+    status: statusOf('sign-in-form'),
+    name: 'Sign In Form',
+    description:
+      'Authentication page block with labeled email and password fields, technical input direction policy, pending state and footer slot.',
+    package: '@noe/ui',
+    registryItem: 'sign-in-form',
+    preview: () => (
+      <SignInForm
+        description="Enter your credentials to reach the workspace."
+        footer={<span>Protected by workspace SSO.</span>}
+        labels={{
+          heading: 'Sign in to NOE',
+          emailLabel: 'Email',
+          passwordLabel: 'Password',
+          submitLabel: 'Continue',
+        }}
+      />
+    ),
+  },
+  {
+    id: 'header-navigation',
+    category: 'Patterns / Application',
+    status: statusOf('header-navigation'),
+    name: 'Header Navigation',
+    description:
+      'Top application header with brand slot, link row and action area; links collapse below the small breakpoint in favor of a menu trigger slot.',
+    package: '@noe/ui',
+    registryItem: 'header-navigation',
+    preview: () => (
+      <div style={{ marginInline: '-1rem' }}>
+        <HeaderNavigation
+          actions={
+            <>
+              <Button size="sm" variant="outline">
+                Docs
+              </Button>
+              <Button size="sm" variant="primary">
+                Ask NOa
+              </Button>
+            </>
+          }
+          brand={<span className="font-heading text-sm font-semibold">NOEcosystem</span>}
+          label="Primary"
+          links={[
+            { href: '#system', label: 'System', current: true },
+            { href: '#runs', label: 'Runs' },
+            { href: '#tools', label: 'Tools' },
+          ]}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'app-frame',
+    category: 'Patterns / Pages',
+    status: statusOf('app-frame'),
+    name: 'App Frame',
+    description:
+      'Responsive application frame owning page landmarks: header row, desktop sidebar, mobile navigation region, content and an optional inspector column.',
+    package: '@noe/ui',
+    registryItem: 'app-frame',
+    preview: () => (
+      <div className="-mx-4 -my-2" style={{ height: '18rem' }}>
+        <AppFrame
+          header={
+            <div className="bg-surface-raised px-4 py-3 text-sm font-medium">NOEcosystem</div>
+          }
+          mobileNavigation={
+            <p className="m-0 text-xs leading-normal text-muted-foreground">
+              Mobile navigation slot (hidden on large screens).
+            </p>
+          }
+          navigation={
+            <SidebarNavigation
+              label="Workspace"
+              sections={[
+                {
+                  id: 'frame',
+                  items: [
+                    { href: '#overview', label: 'Overview', current: true },
+                    { href: '#runs', label: 'Runs', badge: '24' },
+                  ],
+                },
+              ]}
+            />
+          }
+        >
+          <p className="m-0 text-sm leading-normal text-muted-foreground">
+            Content region; resize to see the responsive regions swap.
+          </p>
+        </AppFrame>
+      </div>
+    ),
+  },
+  {
+    id: 'bottom-navigation',
+    category: 'Patterns / Application',
+    status: statusOf('bottom-navigation'),
+    name: 'Bottom Navigation',
+    description:
+      'Mobile-only bottom tab bar with current-page state, badges, icon slots and safe-area padding; hidden from the medium breakpoint upward.',
+    package: '@noe/ui',
+    registryItem: 'bottom-navigation',
+    preview: () => (
+      <BottomNavigation
+        items={[
+          { href: '#home', label: 'Home', current: true },
+          { href: '#agents', label: 'Agents', badge: '3' },
+          { href: '#runs', label: 'Runs' },
+          { href: '#settings', label: 'Settings' },
+        ]}
+        label="Mobile"
+      />
+    ),
+  },
+  {
+    id: 'dashboard-shell',
+    category: 'Patterns / Pages',
+    status: statusOf('dashboard-shell'),
+    name: 'Dashboard Shell',
+    description:
+      'Data dashboard scaffold with slots for page header, filters, responsive metric grid, chart, table and pagination regions.',
+    package: '@noe/data-ui',
+    registryItem: 'dashboard-shell',
+    preview: () => (
+      <DashboardShell
+        filters={<Input aria-label="Search services" placeholder="Search services…" />}
+        label="Service dashboard"
+        metrics={[
+          <MetricCard
+            delta="+4 this week"
+            key="m1"
+            label="Active services"
+            status="positive"
+            value="128"
+          />,
+          <MetricCard
+            delta="+6 today"
+            key="m2"
+            label="Pending approvals"
+            status="warning"
+            value="9"
+          />,
+        ]}
+        table={
+          <div className="flex flex-col gap-2 rounded-lg border border-border p-4">
+            <Skeleton style={{ height: '0.875rem', width: '70%' }} />
+            <Skeleton style={{ height: '0.875rem', width: '45%' }} />
+          </div>
+        }
+      />
+    ),
+  },
+  {
+    id: 'settings-page',
+    category: 'Patterns / Pages',
+    status: statusOf('settings-page'),
+    name: 'Settings Page',
+    description:
+      'Settings layout with sectioned side navigation on wide screens, stacked content column and a sticky save bar; collapses to one column on mobile.',
+    package: '@noe/ui',
+    registryItem: 'settings-page',
+    preview: () => (
+      <SettingsPage
+        label="Workspace settings"
+        navigation={
+          <SidebarNavigation
+            label="Settings sections"
+            sections={[
+              {
+                id: 'settings',
+                items: [
+                  { href: '#general', label: 'General', current: true },
+                  { href: '#members', label: 'Members' },
+                ],
+              },
+            ]}
+          />
+        }
+        saveBar={
+          <>
+            <Button size="sm" variant="quiet">
+              Cancel
+            </Button>
+            <Button size="sm" variant="primary">
+              Save changes
+            </Button>
+          </>
+        }
+      >
+        <section className="flex max-w-xl flex-col gap-4">
+          <SectionHeader
+            description="Shown to every collaborator in the workspace."
+            title="Workspace profile"
+          />
+          <Field description="Visible in URLs and exports." label="Workspace name">
+            <Input defaultValue="acme-production" />
+          </Field>
+        </section>
+      </SettingsPage>
+    ),
+  },
+  {
+    id: 'data-list',
+    category: 'Patterns / Mobile',
+    status: statusOf('data-list'),
+    name: 'Data List',
+    description:
+      'Touch-friendly mobile list rows with leading media slot, title and subtitle, trailing meta or chevron slot and current-page state; rows meet minimum touch height.',
+    package: '@noe/ui',
+    registryItem: 'data-list',
+    preview: () => (
+      <div style={{ maxWidth: '24rem' }}>
+        <DataList
+          items={[
+            {
+              id: '1',
+              href: '#run-1',
+              title: 'Review quarterly report',
+              subtitle: 'run_9f21ac · NOFinix',
+              trailing: '12:04',
+              current: true,
+            },
+            { id: '2', href: '#run-2', title: 'Sync ledger entries', subtitle: 'run_9f21ad' },
+            { id: '3', href: '#agent-1', title: 'review-agent', subtitle: 'noe-agent-1' },
+          ]}
+          label="Recent runs"
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'fab',
+    category: 'Patterns / Mobile',
+    status: statusOf('fab'),
+    name: 'Floating Action Button',
+    description:
+      'Mobile-only floating action button anchored to the logical end edge above the bottom navigation, with safe-area padding and required accessible label.',
+    package: '@noe/ui',
+    registryItem: 'fab',
+    preview: () => (
+      <div className="relative h-28 rounded-lg bg-surface-sunken/60">
+        <Fab className="!absolute" label="New run" onClick={() => undefined}>
+          +
+        </Fab>
+      </div>
+    ),
+  },
+  {
+    id: 'mobile-screen',
+    category: 'Patterns / Pages',
+    status: statusOf('mobile-screen'),
+    name: 'Mobile Screen',
+    description:
+      'Single-column mobile page scaffold composing an app bar, scrollable content region, optional floating action button and bottom navigation.',
+    package: '@noe/ui',
+    registryItem: 'mobile-screen',
+    preview: () => (
+      <MobileScreen
+        appBar={
+          <HeaderNavigation
+            brand={<span className="font-heading text-sm font-semibold">NOEcosystem</span>}
+            label="Primary"
+          />
+        }
+        bottomNavigation={
+          <BottomNavigation
+            items={[
+              { href: '#home', label: 'Home', current: true },
+              { href: '#agents', label: 'Agents', badge: '3' },
+              { href: '#runs', label: 'Runs' },
+            ]}
+            label="Mobile"
+          />
+        }
+        label="Runs screen"
+      >
+        <DataList
+          items={[
+            {
+              id: '1',
+              href: '#run-1',
+              title: 'Review quarterly report',
+              subtitle: 'run_9f21ac · NOFinix',
+              trailing: '12:04',
+              current: true,
+            },
+            { id: '2', href: '#run-2', title: 'Sync ledger entries', subtitle: 'run_9f21ad' },
+          ]}
+          label="Recent runs"
+        />
+      </MobileScreen>
+    ),
+  },
+  {
+    id: 'featured-icon',
+    category: 'Foundations / Icons',
+    status: statusOf('featured-icon'),
+    name: 'Featured Icon',
+    description:
+      'Decorative icon container with tokenized border, background and size variants for feature highlights and empty states. Uses @noe/icons.',
+    package: '@noe/ui',
+    registryItem: 'featured-icon',
+    preview: () => (
+      <div className="flex flex-wrap items-center gap-3">
+        <FeaturedIcon variant="brand" size="md" icon={<ChevronIcon direction="forward" />} />
+        <FeaturedIcon variant="muted" size="lg" icon={<ChevronIcon direction="forward" />} />
+        <FeaturedIcon variant="success" size="sm" icon={<ChevronIcon direction="forward" />} />
+      </div>
+    ),
+  },
+  {
+    id: 'utility-button',
+    category: 'Primitives / Actions',
+    status: statusOf('utility-button'),
+    name: 'Utility Button',
+    description:
+      'Compact toolbar/icon button composing canonical Button for row actions and dense controls; not a second Button primitive.',
+    package: '@noe/ui',
+    registryItem: 'utility-button',
+    preview: () => (
+      <div className="flex items-center gap-2">
+        <UtilityButton aria-label="Next" variant="ghost">
+          <ChevronIcon direction="forward" />
+        </UtilityButton>
+        <UtilityButton aria-label="Previous" variant="outline">
+          <ChevronIcon direction="backward" />
+        </UtilityButton>
+        <UtilityButton aria-label="Settings" variant="quiet">
+          <ChevronIcon direction="forward" />
+        </UtilityButton>
+      </div>
+    ),
+  },
+  {
+    id: 'context-menu',
+    category: 'Overlays',
+    status: statusOf('context-menu'),
+    name: 'Context Menu',
+    description:
+      'Right-click and keyboard menu using Menu foundation with logical placement and portal dir propagation.',
+    package: '@noe/ui',
+    registryItem: 'context-menu',
+    preview: () => (
+      <ContextMenu>
+        <ContextMenuTrigger render={<Button variant="outline">Right-click me</Button>} />
+        <ContextMenuContent>
+          <ContextMenuItem>Copy</ContextMenuItem>
+          <ContextMenuItem>Cut</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    ),
+  },
+  {
+    id: 'dropdown',
+    category: 'Overlays',
+    status: statusOf('dropdown'),
+    name: 'Dropdown',
+    description:
+      'Disclosure menu triggered by button, sharing Menu foundation with logical start alignment for action lists.',
+    package: '@noe/ui',
+    registryItem: 'dropdown',
+    preview: () => (
+      <Dropdown>
+        <DropdownTrigger render={<Button>Actions</Button>} />
+        <DropdownContent>
+          <DropdownItem>Rename</DropdownItem>
+          <DropdownItem>Duplicate</DropdownItem>
+          <DropdownSeparator />
+          <DropdownItem variant="destructive">Delete</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+    ),
+  },
+
+  {
+    id: 'login-page',
+    category: 'Shared / Auth',
+    status: statusOf('login-page'),
+    name: 'Login Page',
+    description: 'Shared authentication page composition with branding, title, form and footer.',
+    package: '@noe/ui',
+    registryItem: 'login-page',
+    preview: () => (
+      <div style={{ height: '24rem' }}>
+        <LoginPage
+          title="Sign in to NOE"
+          description="Enter your credentials."
+          form={
+            <SignInForm
+              labels={{
+                heading: 'Sign in',
+                emailLabel: 'Email',
+                passwordLabel: 'Password',
+                submitLabel: 'Continue',
+              }}
+            />
+          }
+          brand={<span className="font-heading font-semibold">NOEcosystem</span>}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'not-found',
+    category: 'Shared / Auth',
+    status: statusOf('not-found'),
+    name: '404 Section',
+    description: '404 not-found section with code, title and action.',
+    package: '@noe/ui',
+    registryItem: 'not-found',
+    preview: () => (
+      <NotFound
+        title="Page not found"
+        description="The page you tried to access does not exist."
+        action={<Button size="sm">Go home</Button>}
+      />
+    ),
+  },
+  {
+    id: 'chart',
+    category: 'Data / Visualization',
+    status: statusOf('chart'),
+    name: 'Chart',
+    description: 'Line and bar chart with tokenized colors, RTL-safe axes and tabular fallback.',
+    package: '@noe/data-ui',
+    registryItem: 'chart',
+    preview: () => (
+      <div style={{ maxWidth: '28rem', display: 'grid', gap: '1rem' }}>
+        <Chart
+          title="Line"
+          data={[
+            { label: 'Mon', value: 40 },
+            { label: 'Tue', value: 80 },
+            { label: 'Wed', value: 60 },
+          ]}
+        />
+        <Chart
+          type="bar"
+          title="Bar"
+          data={[
+            { label: 'A', value: 30 },
+            { label: 'B', value: 70 },
+            { label: 'C', value: 50 },
+          ]}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'messaging',
+    category: 'Communication / Messaging',
+    status: statusOf('messaging'),
+    name: 'Messaging',
+    description: 'Conversation messaging list with auto-direction and composer slot.',
+    package: '@noe/ui',
+    registryItem: 'messaging',
+    preview: () => (
+      <div style={{ maxWidth: '24rem' }}>
+        <Messaging
+          label="Conversation"
+          messages={[
+            { id: '1', author: 'Ali', content: 'Hello' },
+            { id: '2', author: 'NOa', content: 'Hi', variant: 'assistant' },
+          ]}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'progress-steps',
+    category: 'Navigation / Progress',
+    status: statusOf('progress-steps'),
+    name: 'Progress Steps',
+    description:
+      'Step indicator with pending/current/completed states and horizontal/vertical orientation.',
+    package: '@noe/ui',
+    registryItem: 'progress-steps',
+    preview: () => (
+      <ProgressSteps
+        label="Onboarding"
+        steps={[
+          { id: '1', label: 'Account', state: 'completed' },
+          { id: '2', label: 'Profile', state: 'current' },
+          { id: '3', label: 'Done' },
+        ]}
+      />
+    ),
+  },
+  {
+    id: 'dashboard-01',
+    category: 'Application Examples',
+    status: statusOf('dashboard-01'),
+    name: 'Dashboard 01',
+    description: 'Dashboard example 01 — overview composition.',
+    package: '@noe/data-ui',
+    registryItem: 'dashboard-01',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <Dashboard01 />
+      </div>
+    ),
+  },
+  {
+    id: 'dashboard-02',
+    category: 'Application Examples',
+    status: statusOf('dashboard-02'),
+    name: 'Dashboard 02',
+    description: 'Dashboard example 02 — detailed composition.',
+    package: '@noe/data-ui',
+    registryItem: 'dashboard-02',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <Dashboard02 />
+      </div>
+    ),
+  },
+  {
+    id: 'settings-01',
+    category: 'Application Examples',
+    status: statusOf('settings-01'),
+    name: 'Settings 01',
+    description: 'Settings example 01 — workspace profile.',
+    package: '@noe/ui',
+    registryItem: 'settings-01',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <Settings01 />
+      </div>
+    ),
+  },
+  {
+    id: 'settings-02',
+    category: 'Application Examples',
+    status: statusOf('settings-02'),
+    name: 'Settings 02',
+    description: 'Settings example 02 — team and billing.',
+    package: '@noe/ui',
+    registryItem: 'settings-02',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <Settings02 />
+      </div>
+    ),
+  },
+  {
+    id: 'hero-header',
+    category: 'Marketing / Hero',
+    status: statusOf('hero-header'),
+    name: 'Hero Header',
+    description: 'Marketing hero header section with eyebrow, title, actions and media.',
+    package: '@noe/ui',
+    registryItem: 'hero-header',
+    preview: () => (
+      <HeroHeader
+        eyebrow="NOE"
+        title="Shared foundations"
+        description="Connected experiences."
+        actions={<Button size="sm">Get started</Button>}
+      />
+    ),
+  },
+  {
+    id: 'marketing-header',
+    category: 'Marketing / Header',
+    status: statusOf('marketing-header'),
+    name: 'Marketing Header',
+    description: 'Marketing header navigation with brand, links and actions.',
+    package: '@noe/ui',
+    registryItem: 'marketing-header',
+      preview: () => (
+      <MarketingHeader
+        brand={<span>NOE</span>}
+        links={
+          <>
+            <a href="/product">Product</a>
+            <a href="/pricing">Pricing</a>
+          </>
+        }
+        actions={<Button size="sm">Sign in</Button>}
+      />
+    ),
+  },
+  {
+    id: 'landing-page',
+    category: 'Marketing / Pages',
+    status: statusOf('landing-page'),
+    name: 'Landing Page',
+    description: 'Marketing landing page composition from header, hero and sections.',
+    package: '@noe/ui',
+    registryItem: 'landing-page',
+    preview: () => (
+      <div style={{ height: '20rem' }}>
+        <LandingPage />
+      </div>
+    ),
+  },
+
+  {
+    id: 'avatar',
+    category: 'Base / Identity',
+    status: statusOf('avatar'),
+    name: 'Avatar',
+    description:
+      'Avatar \u2014 Base / Identity component. avatar provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'avatar',
+    preview: () => <Avatar />,
+  },
+
+  {
+    id: 'badge-group',
+    category: 'Base / Identity',
+    status: statusOf('badge-group'),
+    name: 'Badge Group',
+    description:
+      'Badge Group \u2014 Base / Identity component. badge-group provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'badge-group',
+    preview: () => <BadgeGroup />,
+  },
+
+  {
+    id: 'button-group',
+    category: 'Base / Actions',
+    status: statusOf('button-group'),
+    name: 'Button Group',
+    description:
+      'Button Group \u2014 Base / Actions component. button-group provides base / actions behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'button-group',
+    preview: () => <ButtonGroup />,
+  },
+
+  {
+    id: 'checkbox',
+    category: 'Base / Forms',
+    status: statusOf('checkbox'),
+    name: 'Checkbox',
+    description:
+      'Checkbox \u2014 Base / Forms component. checkbox provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'checkbox',
+    preview: () => <Checkbox />,
+  },
+
+  {
+    id: 'radio-group',
+    category: 'Base / Forms',
+    status: statusOf('radio-group'),
+    name: 'Radio Group',
+    description:
+      'Radio Group \u2014 Base / Forms component. radio-group provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'radio-group',
+    preview: () => <RadioGroup />,
+  },
+
+  {
+    id: 'toggle',
+    category: 'Base / Forms',
+    status: statusOf('toggle'),
+    name: 'Toggle',
+    description:
+      'Toggle \u2014 Base / Forms component. toggle provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'toggle',
+    preview: () => <Toggle />,
+  },
+
+  {
+    id: 'select',
+    category: 'Base / Forms',
+    status: statusOf('select'),
+    name: 'Select',
+    description:
+      'Select \u2014 Base / Forms component. select provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'select',
+    preview: () => <Select />,
+  },
+
+  {
+    id: 'multi-select',
+    category: 'Base / Forms',
+    status: statusOf('multi-select'),
+    name: 'Multi Select',
+    description:
+      'Multi Select \u2014 Base / Forms component. multi-select provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'multi-select',
+    preview: () => <MultiSelect />,
+  },
+
+  {
+    id: 'slider',
+    category: 'Base / Forms',
+    status: statusOf('slider'),
+    name: 'Slider',
+    description:
+      'Slider \u2014 Base / Forms component. slider provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'slider',
+    preview: () => <Slider />,
+  },
+
+  {
+    id: 'tags',
+    category: 'Base / Forms',
+    status: statusOf('tags'),
+    name: 'Tags',
+    description:
+      'Tags \u2014 Base / Forms component. tags provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'tags',
+    preview: () => <Tags />,
+  },
+
+  {
+    id: 'verification-code',
+    category: 'Base / Forms',
+    status: statusOf('verification-code'),
+    name: 'Verification Code',
+    description:
+      'Verification Code \u2014 Base / Forms component. verification-code provides base / forms behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'verification-code',
+    preview: () => <VerificationCode />,
+  },
+
+  {
+    id: 'calendar',
+    category: 'Base / Pickers',
+    status: statusOf('calendar'),
+    name: 'Calendar',
+    description:
+      'Calendar \u2014 Base / Pickers component. calendar provides base / pickers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'calendar',
+    preview: () => <Calendar />,
+  },
+
+  {
+    id: 'date-picker',
+    category: 'Base / Pickers',
+    status: statusOf('date-picker'),
+    name: 'Date Picker',
+    description:
+      'Date Picker \u2014 Base / Pickers component. date-picker provides base / pickers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'date-picker',
+    preview: () => <DatePicker />,
+  },
+
+  {
+    id: 'color-picker',
+    category: 'Base / Pickers',
+    status: statusOf('color-picker'),
+    name: 'Color Picker',
+    description:
+      'Color Picker \u2014 Base / Pickers component. color-picker provides base / pickers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'color-picker',
+    preview: () => <ColorPicker />,
+  },
+
+  {
+    id: 'file-uploader',
+    category: 'Base / Pickers',
+    status: statusOf('file-uploader'),
+    name: 'File Uploader',
+    description:
+      'File Uploader \u2014 Base / Pickers component. file-uploader provides base / pickers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'file-uploader',
+    preview: () => <FileUploader />,
+  },
+
+  {
+    id: 'rich-text-editor',
+    category: 'Base / Pickers',
+    status: statusOf('rich-text-editor'),
+    name: 'Rich Text Editor',
+    description:
+      'Rich Text Editor \u2014 Base / Pickers component. rich-text-editor provides base / pickers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'rich-text-editor',
+    preview: () => <RichTextEditor />,
+  },
+
+  {
+    id: 'command-menu',
+    category: 'Overlays / Navigation',
+    status: statusOf('command-menu'),
+    name: 'Command Menu',
+    description:
+      'Command Menu \u2014 Overlays / Navigation component. command-menu provides overlays / navigation behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'command-menu',
+    preview: () => <CommandMenu />,
+  },
+
+  {
+    id: 'tree-view',
+    category: 'Navigation / Disclosure',
+    status: statusOf('tree-view'),
+    name: 'Tree View',
+    description:
+      'Tree View \u2014 Navigation / Disclosure component. tree-view provides navigation / disclosure behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'tree-view',
+    preview: () => <TreeView />,
+  },
+
+  {
+    id: 'carousel',
+    category: 'Navigation / Disclosure',
+    status: statusOf('carousel'),
+    name: 'Carousel',
+    description:
+      'Carousel \u2014 Navigation / Disclosure component. carousel provides navigation / disclosure behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'carousel',
+    preview: () => <Carousel />,
+  },
+
+  {
+    id: 'content-divider',
+    category: 'Primitives / Layout',
+    status: statusOf('content-divider'),
+    name: 'Content Divider',
+    description:
+      'Content Divider \u2014 Primitives / Layout component. content-divider provides primitives / layout behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'content-divider',
+    preview: () => <ContentDivider />,
+  },
+
+  {
+    id: 'section-footer',
+    category: 'Patterns / Application',
+    status: statusOf('section-footer'),
+    name: 'Section Footer',
+    description:
+      'Section Footer \u2014 Patterns / Application component. section-footer provides patterns / application behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'section-footer',
+    preview: () => <SectionFooter />,
+  },
+
+  {
+    id: 'notification',
+    category: 'Feedback / Notifications',
+    status: statusOf('notification'),
+    name: 'Notification',
+    description:
+      'Notification \u2014 Feedback / Notifications component. notification provides feedback / notifications behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'notification',
+    preview: () => <Notification />,
+  },
+
+  {
+    id: 'activity-gauge',
+    category: 'Data / Visualization',
+    status: statusOf('activity-gauge'),
+    name: 'Activity Gauge',
+    description:
+      'Activity Gauge \u2014 Data / Visualization component. activity-gauge provides data / visualization behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/data-ui',
+    registryItem: 'activity-gauge',
+    preview: () => <ActivityGauge />,
+  },
+
+  {
+    id: 'pie-chart',
+    category: 'Data / Visualization',
+    status: statusOf('pie-chart'),
+    name: 'Pie Chart',
+    description:
+      'Pie Chart \u2014 Data / Visualization component. pie-chart provides data / visualization behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/data-ui',
+    registryItem: 'pie-chart',
+    preview: () => <PieChart />,
+  },
+
+  {
+    id: 'radar-chart',
+    category: 'Data / Visualization',
+    status: statusOf('radar-chart'),
+    name: 'Radar Chart',
+    description:
+      'Radar Chart \u2014 Data / Visualization component. radar-chart provides data / visualization behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/data-ui',
+    registryItem: 'radar-chart',
+    preview: () => <RadarChart />,
+  },
+
+  {
+    id: 'credit-card',
+    category: 'Base / Identity',
+    status: statusOf('credit-card'),
+    name: 'Credit Card',
+    description:
+      'Credit Card \u2014 Base / Identity component. credit-card provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'credit-card',
+    preview: () => <CreditCard />,
+  },
+
+  {
+    id: 'qr-code',
+    category: 'Base / Identity',
+    status: statusOf('qr-code'),
+    name: 'Qr Code',
+    description:
+      'Qr Code \u2014 Base / Identity component. qr-code provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'qr-code',
+    preview: () => <QrCode />,
+  },
+
+  {
+    id: 'rating',
+    category: 'Base / Identity',
+    status: statusOf('rating'),
+    name: 'Rating',
+    description:
+      'Rating \u2014 Base / Identity component. rating provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'rating',
+    preview: () => <Rating />,
+  },
+
+  {
+    id: 'video-player',
+    category: 'Base / Media',
+    status: statusOf('video-player'),
+    name: 'Video Player',
+    description:
+      'Video Player \u2014 Base / Media component. video-player provides base / media behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'video-player',
+    preview: () => <VideoPlayer />,
+  },
+
+  {
+    id: 'illustration',
+    category: 'Base / Media',
+    status: statusOf('illustration'),
+    name: 'Illustration',
+    description:
+      'Illustration \u2014 Base / Media component. illustration provides base / media behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'illustration',
+    preview: () => <Illustration />,
+  },
+
+  {
+    id: 'store-button',
+    category: 'Base / Identity',
+    status: statusOf('store-button'),
+    name: 'Store Button',
+    description:
+      'Store Button \u2014 Base / Identity component. store-button provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'store-button',
+    preview: () => <StoreButton />,
+  },
+
+  {
+    id: 'social-button',
+    category: 'Base / Identity',
+    status: statusOf('social-button'),
+    name: 'Social Button',
+    description:
+      'Social Button \u2014 Base / Identity component. social-button provides base / identity behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'social-button',
+    preview: () => <SocialButton />,
+  },
+
+  {
+    id: 'progress-indicator',
+    category: 'Base / Feedback',
+    status: statusOf('progress-indicator'),
+    name: 'Progress Indicator',
+    description:
+      'Progress Indicator \u2014 Base / Feedback component. progress-indicator provides base / feedback behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'progress-indicator',
+    preview: () => <ProgressIndicator />,
+  },
+
+  {
+    id: 'sign-up-page',
+    category: 'Shared / Auth',
+    status: statusOf('sign-up-page'),
+    name: 'Sign Up Page',
+    description:
+      'Sign Up Page \u2014 Shared / Auth component. sign-up-page provides shared / auth behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'sign-up-page',
+    preview: () => <SignUpPage />,
+  },
+
+  {
+    id: 'verification-page',
+    category: 'Shared / Auth',
+    status: statusOf('verification-page'),
+    name: 'Verification Page',
+    description:
+      'Verification Page \u2014 Shared / Auth component. verification-page provides shared / auth behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'verification-page',
+    preview: () => <VerificationPage />,
+  },
+
+  {
+    id: 'forgot-password-page',
+    category: 'Shared / Auth',
+    status: statusOf('forgot-password-page'),
+    name: 'Forgot Password Page',
+    description:
+      'Forgot Password Page \u2014 Shared / Auth component. forgot-password-page provides shared / auth behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'forgot-password-page',
+    preview: () => <ForgotPasswordPage />,
+  },
+
+  {
+    id: 'email-template',
+    category: 'Shared / Auth',
+    status: statusOf('email-template'),
+    name: 'Email Template',
+    description:
+      'Email Template \u2014 Shared / Auth component. email-template provides shared / auth behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'email-template',
+    preview: () => <EmailTemplate />,
+  },
+
+  {
+    id: 'informational-page-01',
+    category: 'Application Examples',
+    status: statusOf('informational-page-01'),
+    name: 'Informational Page 01',
+    description:
+      'Informational Page 01 \u2014 Application Examples component. informational-page-01 provides application examples behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'informational-page-01',
+    preview: () => <InformationalPage01 />,
+  },
+
+  {
+    id: 'informational-page-02',
+    category: 'Application Examples',
+    status: statusOf('informational-page-02'),
+    name: 'Informational Page 02',
+    description:
+      'Informational Page 02 \u2014 Application Examples component. informational-page-02 provides application examples behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'informational-page-02',
+    preview: () => <InformationalPage02 />,
+  },
+
+  {
+    id: 'banner',
+    category: 'Marketing / Banner',
+    status: statusOf('banner'),
+    name: 'Banner',
+    description:
+      'Banner \u2014 Marketing / Banner component. banner provides marketing / banner behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'banner',
+    preview: () => <Banner />,
+  },
+
+  {
+    id: 'blog-section',
+    category: 'Marketing / Blog',
+    status: statusOf('blog-section'),
+    name: 'Blog Section',
+    description:
+      'Blog Section \u2014 Marketing / Blog component. blog-section provides marketing / blog behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'blog-section',
+    preview: () => <BlogSection />,
+  },
+
+  {
+    id: 'careers-section',
+    category: 'Marketing / Careers',
+    status: statusOf('careers-section'),
+    name: 'Careers Section',
+    description:
+      'Careers Section \u2014 Marketing / Careers component. careers-section provides marketing / careers behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'careers-section',
+    preview: () => <CareersSection />,
+  },
+
+  {
+    id: 'contact-section',
+    category: 'Marketing / Contact',
+    status: statusOf('contact-section'),
+    name: 'Contact Section',
+    description:
+      'Contact Section \u2014 Marketing / Contact component. contact-section provides marketing / contact behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'contact-section',
+    preview: () => <ContactSection />,
+  },
+
+  {
+    id: 'content-section',
+    category: 'Marketing / Content',
+    status: statusOf('content-section'),
+    name: 'Content Section',
+    description:
+      'Content Section \u2014 Marketing / Content component. content-section provides marketing / content behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'content-section',
+    preview: () => <ContentSection />,
+  },
+
+  {
+    id: 'cta-section',
+    category: 'Marketing / CTA',
+    status: statusOf('cta-section'),
+    name: 'Cta Section',
+    description:
+      'Cta Section \u2014 Marketing / CTA component. cta-section provides marketing / cta behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'cta-section',
+    preview: () => <CtaSection />,
+  },
+
+  {
+    id: 'faq-section',
+    category: 'Marketing / FAQ',
+    status: statusOf('faq-section'),
+    name: 'Faq Section',
+    description:
+      'Faq Section \u2014 Marketing / FAQ component. faq-section provides marketing / faq behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'faq-section',
+    preview: () => <FaqSection />,
+  },
+
+  {
+    id: 'feature-section',
+    category: 'Marketing / Features',
+    status: statusOf('feature-section'),
+    name: 'Feature Section',
+    description:
+      'Feature Section \u2014 Marketing / Features component. feature-section provides marketing / features behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'feature-section',
+    preview: () => <FeatureSection />,
+  },
+
+  {
+    id: 'footer',
+    category: 'Marketing / Footer',
+    status: statusOf('footer'),
+    name: 'Footer',
+    description:
+      'Footer \u2014 Marketing / Footer component. footer provides marketing / footer behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'footer',
+    preview: () => <Footer />,
+  },
+
+  {
+    id: 'metrics-section',
+    category: 'Marketing / Metrics',
+    status: statusOf('metrics-section'),
+    name: 'Metrics Section',
+    description:
+      'Metrics Section \u2014 Marketing / Metrics component. metrics-section provides marketing / metrics behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'metrics-section',
+    preview: () => <MetricsSection />,
+  },
+
+  {
+    id: 'newsletter',
+    category: 'Marketing / Newsletter',
+    status: statusOf('newsletter'),
+    name: 'Newsletter',
+    description:
+      'Newsletter \u2014 Marketing / Newsletter component. newsletter provides marketing / newsletter behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'newsletter',
+    preview: () => <Newsletter />,
+  },
+
+  {
+    id: 'pricing-section',
+    category: 'Marketing / Pricing',
+    status: statusOf('pricing-section'),
+    name: 'Pricing Section',
+    description:
+      'Pricing Section \u2014 Marketing / Pricing component. pricing-section provides marketing / pricing behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'pricing-section',
+    preview: () => <PricingSection />,
+  },
+
+  {
+    id: 'social-proof',
+    category: 'Marketing / Social',
+    status: statusOf('social-proof'),
+    name: 'Social Proof',
+    description:
+      'Social Proof \u2014 Marketing / Social component. social-proof provides marketing / social behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'social-proof',
+    preview: () => <SocialProof />,
+  },
+
+  {
+    id: 'team-section',
+    category: 'Marketing / Team',
+    status: statusOf('team-section'),
+    name: 'Team Section',
+    description:
+      'Team Section \u2014 Marketing / Team component. team-section provides marketing / team behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'team-section',
+    preview: () => <TeamSection />,
+  },
+
+  {
+    id: 'testimonial-section',
+    category: 'Marketing / Testimonial',
+    status: statusOf('testimonial-section'),
+    name: 'Testimonial Section',
+    description:
+      'Testimonial Section \u2014 Marketing / Testimonial component. testimonial-section provides marketing / testimonial behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'testimonial-section',
+    preview: () => <TestimonialSection />,
+  },
+
+  {
+    id: 'about-page',
+    category: 'Marketing / Pages',
+    status: statusOf('about-page'),
+    name: 'About Page',
+    description:
+      'About Page \u2014 Marketing / Pages component. about-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'about-page',
+    preview: () => <AboutPage />,
+  },
+
+  {
+    id: 'blog-post-page',
+    category: 'Marketing / Pages',
+    status: statusOf('blog-post-page'),
+    name: 'Blog Post Page',
+    description:
+      'Blog Post Page \u2014 Marketing / Pages component. blog-post-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'blog-post-page',
+    preview: () => <BlogPostPage />,
+  },
+
+  {
+    id: 'blog-index-page',
+    category: 'Marketing / Pages',
+    status: statusOf('blog-index-page'),
+    name: 'Blog Index Page',
+    description:
+      'Blog Index Page \u2014 Marketing / Pages component. blog-index-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'blog-index-page',
+    preview: () => <BlogIndexPage />,
+  },
+
+  {
+    id: 'contact-page',
+    category: 'Marketing / Pages',
+    status: statusOf('contact-page'),
+    name: 'Contact Page',
+    description:
+      'Contact Page \u2014 Marketing / Pages component. contact-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'contact-page',
+    preview: () => <ContactPage />,
+  },
+
+  {
+    id: 'faq-page',
+    category: 'Marketing / Pages',
+    status: statusOf('faq-page'),
+    name: 'Faq Page',
+    description:
+      'Faq Page \u2014 Marketing / Pages component. faq-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'faq-page',
+    preview: () => <FaqPage />,
+  },
+
+  {
+    id: 'legal-page',
+    category: 'Marketing / Pages',
+    status: statusOf('legal-page'),
+    name: 'Legal Page',
+    description:
+      'Legal Page \u2014 Marketing / Pages component. legal-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'legal-page',
+    preview: () => <LegalPage />,
+  },
+
+  {
+    id: 'pricing-page',
+    category: 'Marketing / Pages',
+    status: statusOf('pricing-page'),
+    name: 'Pricing Page',
+    description:
+      'Pricing Page \u2014 Marketing / Pages component. pricing-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'pricing-page',
+    preview: () => <PricingPage />,
+  },
+
+  {
+    id: 'team-page',
+    category: 'Marketing / Pages',
+    status: statusOf('team-page'),
+    name: 'Team Page',
+    description:
+      'Team Page \u2014 Marketing / Pages component. team-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'team-page',
+    preview: () => <TeamPage />,
+  },
+
+  {
+    id: 'marketing-404-page',
+    category: 'Marketing / Pages',
+    status: statusOf('marketing-404-page'),
+    name: 'Marketing 404 Page',
+    description:
+      'Marketing 404 Page \u2014 Marketing / Pages component. marketing-404-page provides marketing / pages behavior with RTL, i18n and accessibility built-in.',
+    package: '@noe/ui',
+    registryItem: 'marketing-404-page',
+    preview: () => <Marketing404Page />,
+  },
+
+  {
+    id: 'ecosystem-motion-showcase',
+    category: 'Cinematic / 3D System',
+    status: statusOf('ecosystem-motion-showcase'),
+    name: 'Ecosystem Motion Showcase',
+    description: 'Three-principle continuous scroll narrative with sticky stage.',
+    package: '@noe/ui',
+    registryItem: 'ecosystem-motion-showcase',
+    preview: () => <div>Ecosystem Motion Showcase</div>,
+  },
+
+  {
+    id: 'gradient-picker',
+    category: 'Application Components',
+    status: statusOf('gradient-picker'),
+    name: 'Gradient Picker',
+    description: 'Gradient picker with two color stops and CSS output, tokenized and accessible.',
+    package: '@noe/ui',
+    registryItem: 'gradient-picker',
+    preview: () => <GradientPicker />,
+  },
+  {
+    id: 'image-picker',
+    category: 'Application Components',
+    status: statusOf('image-picker'),
+    name: 'Image Picker',
+    description: 'Image picker with preview, drag and file input, tokenized and RTL-safe.',
+    package: '@noe/ui',
+    registryItem: 'image-picker',
+    preview: () => <ImagePicker />,
+  },
+  {
+    id: 'inline-cta',
+    category: 'Application Components',
+    status: statusOf('inline-cta'),
+    name: 'Inline CTA',
+    description: 'Inline call to action link with trailing logical chevron, tokenized.',
+    package: '@noe/ui',
+    registryItem: 'inline-cta',
+    preview: () => <InlineCta href="#">Learn more</InlineCta>,
+  },
+  {
+    id: 'ecosystem-sphere',
+
+    category: 'Cinematic / 3D System',
+    status: 'available',
+    name: 'Ecosystem Sphere',
+    description:
+      'Interactive 3-D galaxy with a fixed NO core and independently orbiting capability nodes. Ported from the approved landing repo (NOEcosystem-Frontend-Light-Dark/EcosystemSphere.tsx): pointer-drag rotation, hover detail, keyboard navigation, theme-aware canvas, and reduced-motion compliance.',
+    package: '@noe/ui',
+    registryItem: 'ecosystem-sphere',
+    preview: () => (
+      <div
+        className="rounded-lg border border-border bg-[var(--noe-continuous-canvas)] p-2"
+        style={{ height: '420px' }}
+      >
+        <div
+          style={{
+            height: '100%',
+            border: '1px solid rgba(255,255,255,0.08)',
+            background: 'var(--noe-continuous-canvas)',
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            className="noe-reactor"
+            style={{ width: '100%', height: '100%', position: 'relative' }}
+          >
+            <div className="noe-reactor-aura" aria-hidden="true" />
+            <div className="noe-reactor-ring ring-outer" aria-hidden="true" />
+            <div className="noe-reactor-ring ring-mid" aria-hidden="true" />
+            <div className="noe-reactor-ring ring-inner" aria-hidden="true" />
+            <div className="noe-reactor-arcs" aria-hidden="true">
+              <i />
+              <i />
+              <i />
+              <i />
+            </div>
+            <EcosystemSphere />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 'system-anatomy',
+    category: 'Cinematic / 3D System',
+    status: 'available',
+    name: 'System Anatomy',
+    description:
+      'Scroll-scrubbed exploded view (Foundation / Orchestration / Experience). Ported from SystemAnatomy.tsx: sticky canvas, anatomy-progress driven rotation and leader lines, three focused chapters with reduced-motion fallback.',
+    package: '@noe/ui',
+    registryItem: 'system-anatomy',
+    preview: () => (
+      <div className="rounded-lg border border-border overflow-hidden" style={{ height: '520px' }}>
+        <SystemAnatomy />
+      </div>
+    ),
+  },
+  {
+    id: 'ecosystem-motion',
+    category: 'Cinematic / 3D System',
+    status: 'available',
+    name: 'Ecosystem Motion Showcase',
+    description:
+      'Three-principle continuous scroll narrative (Shared foundations / Connected by design / Human at the center). Ported from EcosystemMotionShowcase.tsx: sticky stage with dot-field, SVG network, and draggable YOU orb that springs back on release.',
+    package: '@noe/ui',
+    registryItem: 'ecosystem-motion-showcase',
+    preview: () => (
+      <div className="rounded-lg border border-border overflow-hidden" style={{ height: '560px' }}>
+        <EcosystemMotionShowcase />
+      </div>
+    ),
+  },
+  {
+    id: 'kinetic-experience',
+    category: 'Cinematic / Motion',
+    status: 'available',
+    name: 'Kinetic Experience',
+    description:
+      'Fixed horizontal chapter timeline + scroll progress. Ported from KineticExperience.tsx: IntersectionObserver active chapter, hero-progress parallax, pointer-shift variables, and hash alignment with prefers-reduced-motion support.',
+    package: '@noe/ui',
+    registryItem: 'kinetic-experience',
+    preview: () => (
+      <div
+        className="rounded-lg border border-border bg-[var(--noe-continuous-canvas)] p-6 text-sm"
+        style={{ minHeight: '200px' }}
+      >
+        <p className="m-0 text-xs uppercase tracking-widest text-muted-foreground">
+          Scroll timeline preview
+        </p>
+        <div style={{ height: '40px', marginTop: '1rem', position: 'relative' }}>
+          <KineticExperience
+            sections={[
+              { id: 'top', label: 'System' },
+              { id: 'idea', label: 'Idea' },
+              { id: 'principles', label: 'Principles' },
+              { id: 'progress', label: 'Progress' },
+            ]}
+          />
+        </div>
+        <p className="m-0 mt-4 text-xs leading-relaxed text-muted-foreground">
+          Fixed bottom-right timeline tracks scroll (var(--kinetic-scroll)) and highlights the
+          active chapter. Hover the timeline ticks to see labels; the actual hero parallax
+          (hero-progress) is visible on the full landing composition.
+        </p>
+      </div>
+    ),
+  },
+  {
+    id: 'landing-cinematic',
+    category: 'Cinematic / Pages',
+    status: 'available',
+    name: 'Landing — Cinematic System',
+    description:
+      'Full landing composition combining the hero reactor (EcosystemSphere), SystemAnatomy and KineticExperience on one continuous graphite/paper canvas — exactly as approved in the light/dark repo. Light/dark switch respects localStorage, prefers-color-scheme and dispatched noecosystem-themechange.',
+    package: '@noe/ui',
+    registryItem: 'landing-cinematic',
+    preview: () => (
+      <div className="rounded-lg border border-border overflow-hidden">
+        <div
+          className="kinetic-ready"
+          style={{ background: 'var(--noe-continuous-canvas)', color: 'var(--noe-canvas-copy)' }}
+        >
+          <section
+            className="hero"
+            id="top"
+            data-hero-phase="0"
+            data-hero-motion="active"
+            style={{
+              minHeight: '420px',
+              height: '420px',
+              padding: '1.5rem var(--noe-stage-gutter)',
+            }}
+          >
+            <div
+              className="hero-layout"
+              style={{ height: '100%', minHeight: '0', position: 'relative' as const, top: 0 }}
+            >
+              <div className="hero-copy">
+                <p className="eyebrow">NOECOSYSTEM / SHARED DIGITAL FOUNDATIONS</p>
+                <h1
+                  className="kinetic-title"
+                  style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)', lineHeight: 0.9 }}
+                >
+                  <span>Shared foundations.</span>
+                  <span className="outline-text">Connected experiences.</span>
+                </h1>
+                <p className="hero-intro" style={{ fontSize: '0.9rem', marginTop: '1rem' }}>
+                  NOEcosystem is a shared digital foundation for connected products and
+                  services—coherent at the core, clear at the surface.
+                </p>
+                <dl className="hero-signals" aria-label="NOEcosystem design principles">
+                  <div>
+                    <dt>01</dt>
+                    <dd>Shared core</dd>
+                  </div>
+                  <div>
+                    <dt>02</dt>
+                    <dd>Connected layers</dd>
+                  </div>
+                  <div>
+                    <dt>03</dt>
+                    <dd>Evolving experiences</dd>
+                  </div>
+                </dl>
+              </div>
+              <div
+                className="build-stage build-stage-ecosystem noe-reactor"
+                aria-label="NOEcosystem reactor"
+              >
+                <div className="noe-reactor-aura" aria-hidden="true" />
+                <div className="noe-reactor-ring ring-outer" aria-hidden="true" />
+                <div className="noe-reactor-ring ring-mid" aria-hidden="true" />
+                <div className="noe-reactor-ring ring-inner" aria-hidden="true" />
+                <div className="noe-reactor-arcs" aria-hidden="true">
+                  <i />
+                  <i />
+                  <i />
+                  <i />
+                </div>
+                <EcosystemSphere />
+              </div>
+            </div>
+          </section>
+          <div
+            style={{
+              height: '320px',
+              overflow: 'hidden',
+              borderTop: '1px solid var(--noe-canvas-line)',
+            }}
+          >
+            <SystemAnatomy />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export const catalogCategories: readonly string[] = Array.from(
+  new Set(catalogEntries.map((entry) => entry.category)),
+);