noecosystem-design 0.1.0

package/scripts/generate-manifest.mjs

@@ -0,0 +1,1149 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const auditPath = path.join(root, 'packages/registry/component-audit.json');
+const manifestPath = path.join(root, 'packages/registry/manifest.json');
+const schemaPath = path.join(root, 'packages/registry/manifest.schema.json');
+
+const audit = JSON.parse(await readFile(auditPath, 'utf8'));
+const _schema = JSON.parse(await readFile(schemaPath, 'utf8'));
+
+function toExportName(id) {
+  const map = {
+    'bidi-text': 'BidiText',
+    'direction-provider': 'DirectionProvider',
+    'code-and-terminal': 'Terminal',
+    'icon-system': 'ChevronIcon',
+    button: 'Button',
+    input: 'Input',
+    field: 'Field',
+    textarea: 'Textarea',
+    card: 'Card',
+    alert: 'Alert',
+    badge: 'Badge',
+    skeleton: 'Skeleton',
+    spinner: 'Spinner',
+    'empty-state': 'EmptyState',
+    'error-state': 'ErrorState',
+    dialog: 'Dialog',
+    drawer: 'Drawer',
+    menu: 'Menu',
+    tooltip: 'Tooltip',
+    tabs: 'Tabs',
+    'data-table': 'DataTable',
+    'metric-card': 'MetricCard',
+    'chart-frame': 'ChartFrame',
+    'agent-composer': 'AgentComposer',
+    'agent-message': 'AgentMessage',
+    'agent-plan': 'AgentPlan',
+    'run-inspector': 'RunInspector',
+    'tool-call': 'ToolCall',
+    'approval-request': 'ApprovalRequest',
+    'workflow-canvas': 'WorkflowCanvas',
+    'workflow-node': 'WorkflowNode',
+    'page-header': 'PageHeader',
+    'sidebar-navigation': 'SidebarNavigation',
+    'agent-workspace': 'AgentWorkspace',
+    'section-header': 'SectionHeader',
+    'filter-bar': 'FilterBar',
+    'featured-icon': 'FeaturedIcon',
+    'utility-button': 'UtilityButton',
+    'context-menu': 'ContextMenu',
+    dropdown: 'Dropdown',
+    'login-page': 'LoginPage',
+    'not-found': 'NotFound',
+    chart: 'Chart',
+    messaging: 'Messaging',
+    'progress-steps': 'ProgressSteps',
+    'dashboard-01': 'Dashboard01',
+    'dashboard-02': 'Dashboard02',
+    'settings-01': 'Settings01',
+    'settings-02': 'Settings02',
+    'hero-header': 'HeroHeader',
+    'marketing-header': 'MarketingHeader',
+    'landing-page': 'LandingPage',
+    'gradient-picker': 'GradientPicker',
+    'image-picker': 'ImagePicker',
+    'inline-cta': 'InlineCta',
+    pagination: 'Pagination',
+    'activity-feed': 'ActivityFeed',
+    'sign-in-form': 'SignInForm',
+    'header-navigation': 'HeaderNavigation',
+    'app-frame': 'AppFrame',
+    'bottom-navigation': 'BottomNavigation',
+    'dashboard-shell': 'DashboardShell',
+    'settings-page': 'SettingsPage',
+    'data-list': 'DataList',
+    fab: 'Fab',
+    'mobile-screen': 'MobileScreen',
+  };
+  return (
+    map[id] ??
+    id
+      .split('-')
+      .map((s) => s[0].toUpperCase() + s.slice(1))
+      .join('')
+  );
+}
+
+function toTitle(id) {
+  return id
+    .split('-')
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+// Enrichment database — semantic, agent-friendly metadata per spec
+const enrichments = {
+  'bidi-text': {
+    description:
+      'Mixed-direction content primitives for user text, URLs, hashes, commands and technical identifiers with explicit LTR isolation.',
+    category: 'Foundations / Direction & Bidi',
+    capabilityAliases: [
+      'bidi text',
+      'mixed direction text',
+      'technical identifier',
+      'bdi auto direction',
+    ],
+    searchTerms: ['bidi', 'rtl ltr isolation', 'technical value', 'url hash', 'command'],
+    useWhen: [
+      'displaying user-generated mixed Persian/English text',
+      'showing URLs, hashes or code inside RTL chrome',
+    ],
+    doNotUseWhen: ['pure LTR marketing copy without bidi risk', 'replacing full i18n provider'],
+    alternatives: ['AutoDirectionText', 'TechnicalValue'],
+    variants: ['auto', 'bdi', 'technical'],
+    maturity: 'stable',
+    states: ['default'],
+    tokenContracts: ['color.foreground', 'color.border'],
+    accessibility: {
+      role: undefined,
+      keyboard: [],
+      announcements: ['no live announcements'],
+      focusBehavior: ['not focusable'],
+    },
+    internationalization: {
+      messageKeys: [],
+      rtl: 'required',
+      bidiNotes: ['Technical values remain dir=ltr', 'User text uses dir=auto and bdi'],
+    },
+    relatedPatterns: ['code-and-terminal', 'direction-provider'],
+    untitledMapping: null,
+  },
+  'direction-provider': {
+    description:
+      'Establishes a direction scope for nested content and portalled overlays, independent of page direction.',
+    capabilityAliases: ['direction scope', 'portal direction'],
+    searchTerms: ['direction provider', 'dir', 'portal', 'rtl scope'],
+    useWhen: ['nesting RTL inside LTR or vice versa', 'ensuring portals inherit correct dir'],
+    doNotUseWhen: ['page already has correct html dir', 'single-direction app'],
+    alternatives: ['html dir attribute'],
+    maturity: 'stable',
+    tokenContracts: [],
+    accessibility: { keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: ['Portals receive dir explicitly'] },
+  },
+  button: {
+    description:
+      'Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout. Use for all interactive actions.',
+    capabilityAliases: [
+      'confirmation dialog with destructive action',
+      'primary action',
+      'submit button',
+      'destructive button',
+      'loading button',
+      'cta',
+    ],
+    searchTerms: ['button', 'cta', 'action', 'destructive', 'confirmation', 'submit'],
+    useWhen: [
+      'triggering an action',
+      'confirming a destructive operation in a dialog',
+      'form submission',
+    ],
+    doNotUseWhen: ['navigating to a new page (use link)', 'displaying status (use Badge)'],
+    alternatives: ['Link', 'Badge', 'Fab'],
+    variants: ['primary', 'secondary', 'outline', 'ghost', 'quiet', 'destructive'],
+    sizes: ['sm', 'md', 'lg', 'icon'],
+    states: [
+      'default',
+      'hover',
+      'focus-visible',
+      'active/pressed',
+      'disabled',
+      'loading',
+      'selected',
+    ],
+    slots: ['icon leading', 'icon trailing'],
+    tokenContracts: ['color.accent', 'color.accentHover', 'color.focusRing'],
+    accessibility: {
+      role: 'button',
+      keyboard: ['Space/Enter activates', 'Tab focusable'],
+      announcements: [],
+      focusBehavior: ['visible ring 2px', 'focus-visible only'],
+    },
+    internationalization: {
+      messageKeys: [],
+      rtl: 'required',
+      bidiNotes: ['icon gap uses logical gap'],
+    },
+    relatedPatterns: ['fab', 'approval-request'],
+    untitledMapping: {
+      category: 'Base',
+      family: 'Buttons',
+      parity: 'full',
+      notes: 'Variants parity full; loading and destructive covered',
+    },
+  },
+  dialog: {
+    description:
+      'Direction-preserving modal primitive with native focus semantics and portal propagation. Share foundation with Modal/Slideout.',
+    capabilityAliases: ['confirmation dialog with destructive action', 'modal', 'confirm dialog'],
+    searchTerms: ['dialog', 'modal', 'confirm', 'overlay'],
+    useWhen: ['confirming a destructive action', 'focused task requiring dismissal'],
+    doNotUseWhen: ['non-modal inline disclosure (use drawer)', 'persistent layout (use page)'],
+    alternatives: ['Drawer', 'Alert'],
+    variants: ['default'],
+    states: ['open/closed', 'focus trap', 'focus restoration'],
+    tokenContracts: ['color.overlay', 'shadow.overlay', 'radius.lg'],
+    accessibility: {
+      role: 'dialog',
+      keyboard: ['Esc closes', 'Tab traps', 'Focus restored on close'],
+      announcements: ['aria-modal'],
+      focusBehavior: ['focus trap', 'initial focus on title', 'restore on close'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['Portal inherits dir'] },
+    relatedPatterns: ['drawer', 'approval-request'],
+    untitledMapping: {
+      category: 'Application UI',
+      family: 'Modals',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  pagination: {
+    description:
+      'Accessible pagination contract with localized previous/next labels, live status region and disabled boundary states for data tables.',
+    capabilityAliases: [
+      'responsive metric card pagination',
+      'empty data table with filters pagination',
+      'table pagination',
+    ],
+    searchTerms: ['pagination', 'page navigation', 'data table paging'],
+    useWhen: ['paging through data table results', 'server-side pagination'],
+    doNotUseWhen: ['infinite scroll', 'tiny static lists'],
+    alternatives: ['FilterBar'],
+    variants: ['default'],
+    states: ['default', 'disabled', 'canPrevious/canNext'],
+    tokenContracts: ['color.border'],
+    accessibility: {
+      role: 'navigation',
+      keyboard: ['Tab to buttons', 'Enter activates'],
+      announcements: ['aria-live polite status'],
+      focusBehavior: ['visible ring'],
+    },
+    internationalization: {
+      messageKeys: ['pagination.previous', 'pagination.next'],
+      rtl: 'required',
+      bidiNotes: ['ChevronIcon mirrors via logical direction'],
+    },
+    relatedPatterns: ['data-table', 'filter-bar'],
+    untitledMapping: {
+      category: 'Application UI',
+      family: 'Paginations',
+      parity: 'full',
+      notes: 'Full - previous/next with ChevronIcon',
+    },
+  },
+  fab: {
+    description:
+      'Mobile-only floating action button anchored to logical end edge above bottom navigation with safe-area padding.',
+    capabilityAliases: ['floating action button', 'mobile fab', 'quick action'],
+    searchTerms: ['fab', 'floating action', 'mobile'],
+    useWhen: ['primary mobile action above bottom nav'],
+    doNotUseWhen: ['desktop primary action (use Button)', 'multiple FABs per screen'],
+    alternatives: ['Button'],
+    tokenContracts: ['color.accent'],
+    accessibility: {
+      role: 'button',
+      keyboard: ['Tab', 'Space/Enter'],
+      announcements: [],
+      focusBehavior: ['visible ring'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['uses logical end'] },
+    relatedPatterns: ['bottom-navigation', 'mobile-screen'],
+  },
+  'featured-icon': {
+    description:
+      'Decorative icon container with tokenized border, background and size variants for feature highlights, empty states and marketing sections. Not a second icon family — uses @noe/icons.',
+    capabilityAliases: [
+      'featured icon',
+      'feature highlight icon',
+      'empty state icon',
+      'marketing icon badge',
+    ],
+    searchTerms: ['featured icon', 'highlight', 'empty state', 'marketing'],
+    useWhen: ['highlighting a feature or empty state', 'marketing feature sections'],
+    doNotUseWhen: ['inline text icon (use ChevronIcon)', 'replacing Button icon slot'],
+    alternatives: ['Badge', 'Card'],
+    variants: ['brand', 'muted', 'success', 'warning', 'destructive', 'info'],
+    sizes: ['sm', 'md', 'lg', 'xl'],
+    states: ['default'],
+    tokenContracts: ['color.accent', 'color.muted', 'radius.md', 'border', 'icon.size'],
+    accessibility: {
+      role: undefined,
+      keyboard: [],
+      announcements: [],
+      focusBehavior: ['decorative, aria-hidden when no label'],
+    },
+    internationalization: {
+      rtl: 'not-applicable',
+      bidiNotes: ['no directional mirroring; brand icons never mirror'],
+    },
+    relatedPatterns: ['empty-state', 'card'],
+    untitledMapping: {
+      category: 'Base',
+      family: 'Featured icons',
+      parity: 'full',
+      notes: 'Size/variant parity full; tokenized',
+    },
+  },
+  'utility-button': {
+    description:
+      'Compact toolbar/icon button composing canonical Button. For row actions, toolbar utilities and dense controls; not a second Button primitive.',
+    capabilityAliases: ['utility button', 'icon button', 'toolbar button', 'row action'],
+    searchTerms: ['utility button', 'icon button', 'toolbar', 'ghost button'],
+    useWhen: ['toolbar or table row actions', 'dense icon-only controls with tooltip'],
+    doNotUseWhen: ['primary form submission', 'destructive confirmation without accessible name'],
+    alternatives: ['Button', 'Fab'],
+    variants: ['quiet', 'ghost', 'outline', 'secondary'],
+    sizes: ['sm', 'md', 'lg', 'icon'],
+    states: ['default', 'hover', 'focus-visible', 'disabled'],
+    tokenContracts: ['color.foreground', 'color.muted'],
+    accessibility: {
+      role: 'button',
+      keyboard: ['Tab', 'Space/Enter'],
+      announcements: [],
+      focusBehavior: ['visible ring 2px'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['gap uses logical'] },
+    relatedPatterns: ['button', 'fab'],
+    untitledMapping: {
+      category: 'Base',
+      family: 'Utility buttons',
+      parity: 'full',
+      notes: 'Composes Button; variant parity full',
+    },
+  },
+  'context-menu': {
+    description:
+      'Right-click and keyboard (Shift+F10) menu using Base UI Menu with logical placement and portal dir propagation. Shares foundation with Dropdown/Menu.',
+    capabilityAliases: ['context menu', 'right click menu', 'contextual actions'],
+    searchTerms: ['context menu', 'right click', 'contextual'],
+    useWhen: [
+      'contextual actions on right-click or keyboard menu key',
+      'table row or canvas context actions',
+    ],
+    doNotUseWhen: ['primary navigation (use Sidebar/Header)', 'form select (use Select)'],
+    alternatives: ['Dropdown', 'Menu'],
+    variants: ['default', 'destructive'],
+    states: ['open/closed', 'focus trap', 'disabled'],
+    tokenContracts: ['color.border', 'shadow.overlay', 'zIndex.overlay'],
+    accessibility: {
+      role: 'menu',
+      keyboard: ['Right-click opens', 'Shift+F10 opens', 'Arrow keys navigate', 'Esc closes'],
+      announcements: [],
+      focusBehavior: ['focus trap', 'portal dir'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['Portal dir, inline-end placement'] },
+    relatedPatterns: ['menu', 'dropdown'],
+    untitledMapping: {
+      category: 'Base',
+      family: 'Context menus',
+      parity: 'full',
+      notes: 'Full - via Menu foundation',
+    },
+  },
+  dropdown: {
+    description:
+      'Disclosure menu triggered by button, sharing Menu/Select overlay foundation with logical start alignment. For action lists, not form value selection.',
+    capabilityAliases: ['dropdown menu', 'action dropdown', 'menu dropdown'],
+    searchTerms: ['dropdown', 'disclosure', 'action menu'],
+    useWhen: ['action list triggered by button', 'toolbar overflow menu'],
+    doNotUseWhen: ['form value selection (use Select)', 'contextual right-click (use ContextMenu)'],
+    alternatives: ['ContextMenu', 'Select', 'Menu'],
+    variants: ['default', 'destructive'],
+    states: ['open/closed', 'disabled', 'highlighted'],
+    tokenContracts: ['color.border', 'shadow.overlay'],
+    accessibility: {
+      role: 'menu',
+      keyboard: ['Enter/Space opens', 'Arrow keys navigate', 'Esc closes'],
+      announcements: [],
+      focusBehavior: ['portal dir'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['align start logical'] },
+    relatedPatterns: ['menu', 'context-menu'],
+    untitledMapping: {
+      category: 'Base',
+      family: 'Dropdowns',
+      parity: 'full',
+      notes: 'Full - via Menu foundation',
+    },
+  },
+  'login-page': {
+    description:
+      'Shared authentication page composition with branding, title, form (SignInForm) and footer, responsive two-column layout.',
+    capabilityAliases: ['log in page', 'sign in page', 'authentication page', 'shared auth'],
+    searchTerms: ['login', 'sign in', 'authentication', 'auth page'],
+    useWhen: ['rendering a login page as composition of primitives'],
+    doNotUseWhen: ['inline form without page chrome (use SignInForm)'],
+    alternatives: ['SignInForm'],
+    variants: ['default', 'with aside'],
+    states: ['default'],
+    tokenContracts: ['color.background', 'color.border', 'shadow.raised'],
+    accessibility: {
+      role: 'region',
+      keyboard: ['Tab to form', 'Enter submits'],
+      announcements: [],
+      focusBehavior: ['no nested main'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['logical flex', 'aside border-s'] },
+    relatedPatterns: ['sign-in-form', 'app-frame'],
+    untitledMapping: {
+      category: 'Shared pages',
+      family: 'Log in pages',
+      parity: 'full',
+      notes: 'Composes SignInForm',
+    },
+  },
+  'not-found': {
+    description:
+      '404 not-found section with code, title, description and action, tokenized and RTL-safe.',
+    capabilityAliases: ['404 page', 'not found', '404 section'],
+    searchTerms: ['404', 'not found', 'empty'],
+    useWhen: ['displaying a 404 or missing resource'],
+    doNotUseWhen: ['inline empty state (use EmptyState)'],
+    alternatives: ['EmptyState', 'ErrorState'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.foreground', 'color.mutedForeground'],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: ['code remains ltr'] },
+    relatedPatterns: ['empty-state'],
+    untitledMapping: {
+      category: 'Shared pages',
+      family: '404 sections',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  chart: {
+    description:
+      'Line and bar chart with tokenized colors, RTL-safe axes, legend and tabular screen-reader fallback.',
+    capabilityAliases: ['line and bar charts', 'line chart', 'bar chart', 'data visualization'],
+    searchTerms: ['chart', 'line', 'bar', 'visualization'],
+    useWhen: ['visualizing time series or categorical data'],
+    doNotUseWhen: ['single metric (use MetricCard)', 'complex financial chart (use custom)'],
+    alternatives: ['MetricCard', 'ChartFrame'],
+    variants: ['line', 'bar'],
+    states: ['default', 'empty', 'loading'],
+    tokenContracts: ['color.accent', 'color.border'],
+    accessibility: {
+      role: 'img',
+      keyboard: [],
+      announcements: ['tabular fallback'],
+      focusBehavior: [],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['legend uses bdi and logical flex'] },
+    relatedPatterns: ['metric-card', 'chart-frame'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Line and bar charts',
+      parity: 'full',
+      notes: 'Full - line/bar with a11y fallback',
+    },
+  },
+  messaging: {
+    description:
+      'Conversation messaging list with user/assistant variants, timestamps and composer slot, auto-direction and logical layout.',
+    capabilityAliases: ['messaging', 'chat', 'conversation'],
+    searchTerms: ['messaging', 'chat', 'conversation', 'message list'],
+    useWhen: ['displaying a chat or messaging thread'],
+    doNotUseWhen: ['single agent message (use AgentMessage)', 'activity feed (use ActivityFeed)'],
+    alternatives: ['AgentMessage', 'ActivityFeed'],
+    variants: ['user', 'assistant', 'system'],
+    states: ['default', 'empty'],
+    tokenContracts: ['color.accent', 'color.border'],
+    accessibility: {
+      role: 'log',
+      keyboard: ['Tab to messages'],
+      announcements: ['aria-live polite'],
+      focusBehavior: [],
+    },
+    internationalization: {
+      rtl: 'required',
+      bidiNotes: ['dir=auto for content', 'bdi for author'],
+    },
+    relatedPatterns: ['agent-message'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Messaging',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  'progress-steps': {
+    description:
+      'Step indicator with pending/current/completed states, horizontal/vertical orientation, logical layout and non-color encoding.',
+    capabilityAliases: ['progress steps', 'stepper', 'progress indicator'],
+    searchTerms: ['progress steps', 'stepper', 'steps'],
+    useWhen: ['showing multi-step progress'],
+    doNotUseWhen: ['single progress bar (use ProgressIndicator)', 'breadcrumb navigation'],
+    alternatives: ['Tabs'],
+    variants: ['horizontal', 'vertical'],
+    states: ['pending', 'current', 'completed'],
+    tokenContracts: ['color.accent', 'color.success', 'color.border'],
+    accessibility: {
+      role: 'list',
+      keyboard: ['Tab'],
+      announcements: ['aria-current step'],
+      focusBehavior: [],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['logical flex'] },
+    relatedPatterns: ['tabs'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Progress steps',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  'dashboard-01': {
+    description:
+      'Dashboard example 01 — overview composition with metrics, line chart and table via DashboardShell.',
+    capabilityAliases: ['dashboard 01', 'overview dashboard'],
+    searchTerms: ['dashboard', 'overview'],
+    useWhen: ['example dashboard page'],
+    doNotUseWhen: ['custom dashboard needing different layout'],
+    alternatives: ['DashboardShell'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.background'],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: ['logical grid'] },
+    relatedPatterns: ['dashboard-shell', 'metric-card', 'chart'],
+    untitledMapping: {
+      category: 'Application examples',
+      family: 'Dashboard 01',
+      parity: 'full',
+      notes: 'Example composes primitives',
+    },
+  },
+  'dashboard-02': {
+    description:
+      'Dashboard example 02 — detailed composition with filters, multiple metrics and bar chart.',
+    capabilityAliases: ['dashboard 02', 'detailed dashboard'],
+    searchTerms: ['dashboard', 'detailed'],
+    useWhen: ['example detailed dashboard'],
+    doNotUseWhen: ['custom dashboard needing different layout'],
+    alternatives: ['DashboardShell'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.background'],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['dashboard-shell'],
+    untitledMapping: {
+      category: 'Application examples',
+      family: 'Dashboard 02',
+      parity: 'full',
+      notes: 'Example',
+    },
+  },
+  'settings-01': {
+    description: 'Settings example 01 — workspace profile with sidebar navigation and save bar.',
+    capabilityAliases: ['settings 01', 'workspace settings'],
+    searchTerms: ['settings', 'workspace'],
+    useWhen: ['example settings page'],
+    doNotUseWhen: ['custom settings needing different sections'],
+    alternatives: ['SettingsPage'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: [],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['settings-page', 'sidebar-navigation'],
+    untitledMapping: {
+      category: 'Application examples',
+      family: 'Settings 01',
+      parity: 'full',
+      notes: 'Example',
+    },
+  },
+  'settings-02': {
+    description: 'Settings example 02 — team and billing with multiple sections.',
+    capabilityAliases: ['settings 02', 'team settings'],
+    searchTerms: ['settings', 'team'],
+    useWhen: ['example team settings'],
+    doNotUseWhen: ['custom settings needing different sections'],
+    alternatives: ['SettingsPage'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: [],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['settings-page'],
+    untitledMapping: {
+      category: 'Application examples',
+      family: 'Settings 02',
+      parity: 'full',
+      notes: 'Example',
+    },
+  },
+  'hero-header': {
+    description:
+      'Marketing hero header section with eyebrow, title, description, actions and media slot, content-driven and RTL-safe.',
+    capabilityAliases: ['hero header section', 'marketing hero', 'hero'],
+    searchTerms: ['hero', 'header', 'marketing'],
+    useWhen: ['marketing hero section'],
+    doNotUseWhen: ['app page header (use PageHeader)'],
+    alternatives: ['PageHeader', 'SectionHeader'],
+    variants: ['default', 'with media'],
+    states: ['default'],
+    tokenContracts: ['color.foreground', 'color.mutedForeground'],
+    accessibility: { role: 'region', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: ['logical flex'] },
+    relatedPatterns: ['landing-page'],
+    untitledMapping: {
+      category: 'Marketing components',
+      family: 'Hero header sections',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  'marketing-header': {
+    description:
+      'Marketing header navigation with brand, links and actions, distinct from application header.',
+    capabilityAliases: ['marketing header navigation', 'marketing header'],
+    searchTerms: ['marketing header', 'navigation'],
+    useWhen: ['top marketing header'],
+    doNotUseWhen: ['app header (use HeaderNavigation)'],
+    alternatives: ['HeaderNavigation'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.border'],
+    accessibility: { role: 'banner', keyboard: ['Tab'], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: ['logical gap'] },
+    relatedPatterns: ['header-navigation'],
+    untitledMapping: {
+      category: 'Marketing components',
+      family: 'Header navigation',
+      parity: 'full',
+      notes: 'Marketing variant full',
+    },
+  },
+  'landing-page': {
+    description:
+      'Marketing landing page composition from MarketingHeader, HeroHeader and sections; no hidden primitives.',
+    capabilityAliases: ['landing page', 'marketing landing', 'marketing 404'],
+    searchTerms: ['landing', 'marketing', 'page'],
+    useWhen: ['marketing landing page'],
+    doNotUseWhen: ['app dashboard (use DashboardShell)'],
+    alternatives: ['MarketingHeader', 'HeroHeader'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.background'],
+    accessibility: { role: 'main', keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['hero-header', 'marketing-header'],
+    untitledMapping: {
+      category: 'Marketing examples',
+      family: 'Landing pages',
+      parity: 'full',
+      notes: 'Example composes sections',
+    },
+  },
+
+  'gradient-picker': {
+    description:
+      'Gradient picker with two color stops and CSS output, tokenized and accessible, distinct from ColorPicker.',
+    capabilityAliases: ['gradient picker', 'gradient', 'linear gradient'],
+    searchTerms: ['gradient', 'picker', 'color'],
+    useWhen: ['selecting a linear gradient'],
+    doNotUseWhen: ['single color (use ColorPicker)'],
+    alternatives: ['ColorPicker'],
+    variants: ['default'],
+    states: ['default'],
+    tokenContracts: ['color.border'],
+    accessibility: {
+      role: 'group',
+      keyboard: ['Tab to inputs'],
+      announcements: [],
+      focusBehavior: [],
+    },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['color-picker'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Gradient pickers',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  'image-picker': {
+    description:
+      'Image picker with preview, drag and file input, tokenized and RTL-safe, distinct from FileUploader.',
+    capabilityAliases: ['image picker', 'image select', 'image upload'],
+    searchTerms: ['image', 'picker', 'upload'],
+    useWhen: ['selecting an image with preview'],
+    doNotUseWhen: ['generic file (use FileUploader)'],
+    alternatives: ['FileUploader'],
+    variants: ['default'],
+    states: ['default', 'with preview'],
+    tokenContracts: ['color.border'],
+    accessibility: {
+      role: 'group',
+      keyboard: ['Tab to input'],
+      announcements: [],
+      focusBehavior: [],
+    },
+    internationalization: { rtl: 'required', bidiNotes: [] },
+    relatedPatterns: ['file-uploader'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Image pickers',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+  'inline-cta': {
+    description:
+      'Inline call to action link with trailing logical chevron, tokenized, for use within prose.',
+    capabilityAliases: ['inline cta', 'inline call to action', 'text link cta'],
+    searchTerms: ['inline cta', 'cta', 'link'],
+    useWhen: ['inline CTA within prose or card'],
+    doNotUseWhen: ['block CTA (use CTA Section)', 'primary button (use Button)'],
+    alternatives: ['Button', 'CtaSection'],
+    variants: ['primary', 'secondary'],
+    states: ['default', 'hover', 'focus-visible'],
+    tokenContracts: ['color.accent'],
+    accessibility: {
+      role: 'link',
+      keyboard: ['Tab', 'Enter'],
+      announcements: [],
+      focusBehavior: ['visible ring'],
+    },
+    internationalization: { rtl: 'required', bidiNotes: ['chevron mirrors'] },
+    relatedPatterns: ['cta-section'],
+    untitledMapping: {
+      category: 'Application components',
+      family: 'Inline CTAs',
+      parity: 'full',
+      notes: 'Full',
+    },
+  },
+};
+
+// Default generator for entries without explicit enrichment
+function defaultEnrichment(auditItem) {
+  const base = enrichments[auditItem.id] || {};
+  const title = toTitle(auditItem.id);
+  const exportName = toExportName(auditItem.id);
+  const category = auditItem.category;
+  const pkg = auditItem.package;
+
+  // Derive dependencies
+  const deps = [];
+  const registryDeps = [];
+  const peerDeps = ['react'];
+  if (pkg === '@noe/data-ui') deps.push('@noe/ui');
+  if (pkg === '@noe/ai-ui') deps.push('@noe/ui');
+  if (pkg === '@noe/workflow-ui') deps.push('@noe/ui');
+  if (auditItem.id === 'pagination' || auditItem.id === 'fab' || auditItem.id === 'filter-bar')
+    deps.push('@noe/icons');
+  if (auditItem.id === 'filter-bar') registryDeps.push('input');
+  // Hard-coded icon consumers discovered via audit (calendar, inline-cta, date-picker)
+  if (auditItem.id === 'calendar' || auditItem.id === 'inline-cta' || auditItem.id === 'date-picker') {
+    if (!deps.includes('@noe/icons')) deps.push('@noe/icons');
+  }
+
+  // Variants/sizes/states defaults
+  const variants = base.variants ?? ['default'];
+  const sizes = base.sizes ?? [];
+  const slots = base.slots ?? [];
+  const states = base.states ?? ['default', 'hover', 'focus-visible', 'disabled'];
+  const tokenContracts = base.tokenContracts ?? ['color.foreground', 'color.border'];
+
+  const description =
+    base.description ??
+    `${title} — ${category} component. ${auditItem.id} provides ${category.toLowerCase()} behavior with RTL, i18n and accessibility built-in.`;
+
+  return {
+    id: auditItem.id,
+    package: pkg,
+    exportName,
+    title,
+    status: auditItem.status === 'in-progress' ? 'experimental' : auditItem.status, // map legacy
+    maturity: base.maturity ?? 'beta',
+    category,
+    description,
+    capabilityAliases: base.capabilityAliases ?? [title.toLowerCase(), auditItem.id],
+    searchTerms: base.searchTerms ?? [
+      auditItem.id,
+      title.toLowerCase(),
+      category.toLowerCase().split(' / ').pop(),
+    ],
+    useWhen: base.useWhen ?? [`using ${title.toLowerCase()} in ${category}`],
+    doNotUseWhen: base.doNotUseWhen ?? [`when ${title.toLowerCase()} semantics do not match`],
+    alternatives: base.alternatives ?? [],
+    dependencies: deps,
+    registryDependencies: registryDeps,
+    peerDependencies: peerDeps,
+    propsSummary: { label: 'string | ReactNode', children: 'ReactNode' },
+    variants,
+    sizes,
+    slots,
+    states,
+    tokenContracts,
+    accessibility: {
+      role: base.accessibility?.role,
+      keyboard: base.accessibility?.keyboard ?? ['Tab to focus', 'Enter/Space activate'],
+      announcements: base.accessibility?.announcements ?? [],
+      focusBehavior: base.accessibility?.focusBehavior ?? ['visible ring 2px'],
+    },
+    internationalization: {
+      messageKeys: base.internationalization?.messageKeys ?? [],
+      rtl: base.internationalization?.rtl ?? 'required',
+      bidiNotes: base.internationalization?.bidiNotes ?? ['logical properties', 'no global mirror'],
+    },
+    examples: [
+      {
+        id: `${auditItem.id}--default`,
+        description: `Default ${title} usage`,
+        files: [`apps/storybook/stories/catalog/${auditItem.id}.stories.tsx`],
+      },
+    ],
+    relatedPatterns: base.relatedPatterns ?? [],
+    untitledMapping: base.untitledMapping ?? null,
+    storyId: auditItem.storyId,
+    registryItem: auditItem.registryItem,
+  };
+}
+
+const manifest = {
+  manifestVersion: '1.0.0',
+  generatedAt: new Date().toISOString(),
+  generatedNote:
+    'Canonical NOE manifest — single source of truth for catalog, audit, registry, stories, docs and agent search. Generated by pnpm gen:manifest; do not edit by hand for automated fields.',
+  items: audit.items.map(defaultEnrichment),
+};
+
+// Also include cinematic items that are in catalogEntries but not yet in audit?
+const cinematicEnrichments = [
+  {
+    id: 'ecosystem-sphere',
+    package: '@noe/ui',
+    exportName: 'EcosystemSphere',
+    title: 'Ecosystem Sphere',
+    status: 'experimental',
+    maturity: 'beta',
+    category: 'Cinematic / 3D System',
+    description:
+      'Interactive 3-D galaxy canvas with fixed core and orbiting capability nodes. Respects reduced-motion, pauses when hidden, keyboard accessible.',
+    capabilityAliases: ['3d sphere', 'ecosystem galaxy'],
+    searchTerms: ['ecosystem', 'sphere', 'canvas', '3d'],
+    useWhen: ['landing hero 3d visualization'],
+    doNotUseWhen: ['data tables', 'forms'],
+    alternatives: [],
+    dependencies: [],
+    registryDependencies: [],
+    peerDependencies: ['react'],
+    propsSummary: { nodes: 'PortfolioNode[]', ariaLabel: 'string' },
+    variants: ['default'],
+    sizes: [],
+    slots: [],
+    states: ['default', 'hover', 'focus-visible', 'reduced-motion'],
+    tokenContracts: ['color.background'],
+    accessibility: {
+      keyboard: ['Arrow keys navigate', 'Tab focusable canvas'],
+      announcements: [],
+      focusBehavior: ['focus ring on canvas'],
+    },
+    internationalization: { messageKeys: [], rtl: 'required', bidiNotes: ['canvas logical'] },
+    examples: [
+      {
+        id: 'ecosystem-sphere--default',
+        description: 'Default sphere',
+        files: ['packages/ui/src/cinematic/ecosystem-sphere.tsx'],
+      },
+    ],
+    relatedPatterns: ['system-anatomy'],
+    untitledMapping: null,
+    storyId: null,
+    registryItem: 'ecosystem-sphere',
+  },
+  {
+    id: 'system-anatomy',
+    package: '@noe/ui',
+    exportName: 'SystemAnatomy',
+    title: 'System Anatomy',
+    status: 'experimental',
+    maturity: 'beta',
+    category: 'Cinematic / 3D System',
+    description:
+      'Scroll-scrubbed exploded view (Foundation/Orchestration/Experience) with sticky canvas.',
+    capabilityAliases: ['system anatomy', 'exploded view'],
+    searchTerms: ['anatomy', 'scroll'],
+    useWhen: ['landing storytelling'],
+    doNotUseWhen: ['forms'],
+    alternatives: [],
+    dependencies: [],
+    registryDependencies: [],
+    peerDependencies: ['react'],
+    propsSummary: {},
+    variants: ['default'],
+    sizes: [],
+    slots: [],
+    states: ['default', 'reduced-motion'],
+    tokenContracts: [],
+    accessibility: { keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { messageKeys: [], rtl: 'required', bidiNotes: [] },
+    examples: [
+      {
+        id: 'system-anatomy--default',
+        description: 'Default',
+        files: ['packages/ui/src/cinematic/system-anatomy.tsx'],
+      },
+    ],
+    relatedPatterns: ['ecosystem-motion-showcase'],
+    untitledMapping: null,
+    storyId: null,
+    registryItem: 'system-anatomy',
+  },
+  {
+    id: 'ecosystem-motion-showcase',
+    package: '@noe/ui',
+    exportName: 'EcosystemMotionShowcase',
+    title: 'Ecosystem Motion Showcase',
+    status: 'experimental',
+    maturity: 'beta',
+    category: 'Cinematic / 3D System',
+    description: 'Three-principle continuous scroll narrative with sticky stage.',
+    capabilityAliases: ['motion showcase'],
+    searchTerms: ['motion', 'showcase'],
+    useWhen: ['landing'],
+    doNotUseWhen: ['data tables or forms'],
+    alternatives: [],
+    dependencies: [],
+    registryDependencies: [],
+    peerDependencies: ['react'],
+    propsSummary: {},
+    variants: ['default'],
+    sizes: [],
+    slots: [],
+    states: ['default', 'reduced-motion'],
+    tokenContracts: [],
+    accessibility: { keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { messageKeys: [], rtl: 'required', bidiNotes: [] },
+    examples: [
+      {
+        id: 'ecosystem-motion-showcase--default',
+        description: 'Default',
+        files: ['packages/ui/src/cinematic/ecosystem-motion-showcase.tsx'],
+      },
+    ],
+    relatedPatterns: [],
+    untitledMapping: null,
+    storyId: null,
+    registryItem: 'ecosystem-motion-showcase',
+  },
+  {
+    id: 'kinetic-experience',
+    package: '@noe/ui',
+    exportName: 'KineticExperience',
+    title: 'Kinetic Experience',
+    status: 'experimental',
+    maturity: 'beta',
+    category: 'Cinematic / Motion',
+    description:
+      'Fixed horizontal chapter timeline + scroll progress. IntersectionObserver active chapter.',
+    capabilityAliases: ['kinetic timeline'],
+    searchTerms: ['kinetic', 'timeline'],
+    useWhen: ['landing timeline'],
+    doNotUseWhen: ['data tables or forms'],
+    alternatives: [],
+    dependencies: [],
+    registryDependencies: [],
+    peerDependencies: ['react'],
+    propsSummary: { sections: 'KineticSection[]' },
+    variants: ['default'],
+    sizes: [],
+    slots: [],
+    states: ['default', 'reduced-motion'],
+    tokenContracts: [],
+    accessibility: { keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { messageKeys: [], rtl: 'required', bidiNotes: [] },
+    examples: [
+      {
+        id: 'kinetic-experience--default',
+        description: 'Default',
+        files: ['packages/ui/src/cinematic/kinetic-experience.tsx'],
+      },
+    ],
+    relatedPatterns: [],
+    untitledMapping: null,
+    storyId: null,
+    registryItem: 'kinetic-experience',
+  },
+  {
+    id: 'landing-cinematic',
+    package: '@noe/ui',
+    exportName: 'LandingCinematic',
+    title: 'Landing — Cinematic System',
+    status: 'experimental',
+    maturity: 'beta',
+    category: 'Cinematic / Pages',
+    description:
+      'Full landing composition combining hero reactor, SystemAnatomy, EcosystemMotionShowcase and KineticExperience.',
+    capabilityAliases: ['landing'],
+    searchTerms: ['landing', 'cinematic'],
+    useWhen: ['marketing landing'],
+    doNotUseWhen: ['data tables or forms'],
+    alternatives: [],
+    dependencies: [],
+    registryDependencies: [],
+    peerDependencies: ['react'],
+    propsSummary: {},
+    variants: ['default'],
+    sizes: [],
+    slots: [],
+    states: ['default', 'reduced-motion'],
+    tokenContracts: [],
+    accessibility: { keyboard: [], announcements: [], focusBehavior: [] },
+    internationalization: { messageKeys: [], rtl: 'required', bidiNotes: [] },
+    examples: [
+      {
+        id: 'landing-cinematic--default',
+        description: 'Default',
+        files: ['apps/showcase/src/catalog/catalog-index.tsx'],
+      },
+    ],
+    relatedPatterns: [],
+    untitledMapping: null,
+    storyId: null,
+    registryItem: 'landing-cinematic',
+  },
+];
+
+// Merge cinematic if not already in audit (they currently are not in component-audit)
+for (const item of cinematicEnrichments) {
+  if (!manifest.items.find((i) => i.id === item.id)) manifest.items.push(item);
+}
+
+await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+console.log(`manifest.json written: ${manifest.items.length} items`);
+
+// Also generate derived files for backward compat
+// 1. Update component-audit.json to be derived (keep minimal fields but now from manifest)
+const auditDerived = {
+  $schema: audit.$schema,
+  generatedNote: `${audit.generatedNote} (derived from manifest.json)`,
+  items: manifest.items
+    .filter((i) => !i.category.startsWith('Cinematic'))
+    .map((i) => ({
+      id: i.id,
+      package: i.package,
+      category: i.category,
+      status: i.status === 'experimental' ? 'in-progress' : i.status, // legacy map back
+      storyId: i.storyId,
+      registryItem: i.registryItem,
+    })),
+};
+await writeFile(auditPath, `${JSON.stringify(auditDerived, null, 2)}\n`);
+console.log(`component-audit.json derived: ${auditDerived.items.length} items`);
+
+// 2. Generate search index
+const searchIndex = manifest.items.map((i) => ({
+  id: i.id,
+  package: i.package,
+  title: i.title,
+  description: i.description,
+  category: i.category,
+  status: i.status,
+  capabilityAliases: i.capabilityAliases,
+  searchTerms: i.searchTerms,
+  useWhen: i.useWhen,
+  doNotUseWhen: i.doNotUseWhen,
+  alternatives: i.alternatives,
+  relatedPatterns: i.relatedPatterns,
+  exportName: i.exportName,
+  registryItem: i.registryItem,
+  maturity: i.maturity,
+}));
+await writeFile(
+  path.join(root, 'packages/registry/search-index.json'),
+  `${JSON.stringify({ generatedAt: new Date().toISOString(), items: searchIndex }, null, 2)}\n`,
+);
+console.log(`search-index.json written`);
+
+// 3. Generate registry index (enriched)
+const registryPath = path.join(root, 'packages/registry/registry.json');
+const registry = JSON.parse(await readFile(registryPath, 'utf8'));
+// Enrich registry items with dependencies from manifest
+for (const item of registry.items) {
+  const m = manifest.items.find((x) => x.registryItem === item.name);
+  if (m) {
+    if (m.dependencies.length) item.dependencies = m.dependencies;
+    if (m.registryDependencies.length) item.registryDependencies = m.registryDependencies;
+    if (m.peerDependencies.length) item.peerDependencies = m.peerDependencies;
+    // Add metadata for agent
+    item.manifestId = m.id;
+    item.capabilityAliases = m.capabilityAliases;
+    item.searchTerms = m.searchTerms;
+  }
+}
+await writeFile(registryPath, `${JSON.stringify(registry, null, 2)}\n`);
+console.log(`registry.json enriched`);
+
+// 4. Generate catalog index (JSON for agents)
+await writeFile(
+  path.join(root, 'packages/registry/catalog-index.json'),
+  `${JSON.stringify(
+    {
+      generatedAt: new Date().toISOString(),
+      items: manifest.items.map((i) => ({
+        id: i.id,
+        title: i.title,
+        category: i.category,
+        package: i.package,
+        status: i.status,
+        maturity: i.maturity,
+        description: i.description,
+        registryItem: i.registryItem,
+      })),
+    },
+    null,
+    2,
+  )}\n`,
+);
+console.log(`catalog-index.json written`);
+
+// 5. Generate docs index
+await writeFile(
+  path.join(root, 'packages/registry/docs-index.json'),
+  `${JSON.stringify(
+    {
+      generatedAt: new Date().toISOString(),
+      items: manifest.items.map((i) => ({
+        id: i.id,
+        title: i.title,
+        category: i.category,
+        examples: i.examples,
+      })),
+    },
+    null,
+    2,
+  )}\n`,
+);
+console.log(`docs-index.json written`);