noecosystem-design 0.1.0 → 0.1.2

package/docs/superpowers/specs/2026-08-26-noe-complete-catalog-design.md

@@ -1,187 +0,0 @@
-# Complete NOE Design Catalog and Coss/Base UI Adoption
-
-**Date:** 2026-08-26
-**Status:** Draft for user review
-**Scope root:** `/Users/ali/Documents/NoEcosystem/design-system`
-
-## Objective
-
-Make every public NOE design component inspectable in one running catalog. The
-catalog is both the product team's visual audit surface and the source of
-executable component documentation. It must be complete by contract: no public
-component may be shipped without an entry, states to inspect, locale/direction
-coverage, accessibility evidence, and registry metadata where it is
-installable.
-
-The user-supplied Coss, Base UI, dark component-grid, and responsive dashboard
-examples are visual and architectural reference material. They do not grant a
-license to copy their source or visual assets, and they do not override the NOE
-token, accessibility, direction, or ownership contracts.
-
-## Definition of Complete
-
-"Complete" means the catalog reflects the complete public NOE component
-surface, not that it silently presents planned external components as finished.
-
-For every exported NOE component or documented composition, the catalog must
-provide:
-
-- a discoverable entry and category;
-- a live preview using the public package export;
-- a concise purpose and do/don't guidance;
-- all supported variants and meaningful interaction states;
-- keyboard, focus, disabled, loading, error, long-content, light, dark, LTR,
-  RTL, Persian, and English audit coverage as applicable;
-- source and registry/install metadata where the component is distributable;
-- an explicit maturity state: `available`, `in-progress`, or `planned`.
-
-`available` requires executable evidence. The catalog must never visually
-imply that a planned item has been implemented.
-
-## Information Architecture
-
-The canonical audit experience is a React Storybook application, supplemented
-by a curated NOE Catalog landing page.
-
-```text
-Catalog landing
-  Foundations
-    Typography, colour roles, spacing, elevation, motion, icons, bidi
-  Primitives
-    Controls, inputs, feedback, overlays, navigation, layout
-  Patterns
-    Data, agent, approval, artifact, workflow compositions
-  Product surfaces
-    Consumer, dashboard, agent workspace, workflow builder
-  Audit
-    Component matrix, accessibility, direction, locale, responsive evidence
-```
-
-The landing page uses a dense, quiet component grid inspired by the supplied
-references: clear labels, real previews, restrained borders, deliberate empty
-space, and no decorative treatment outside existing NOE tokens. The dashboard
-surface demonstrates the same components in responsive product context. It is
-not a copy of any reference site.
-
-Global controls switch theme, locale, direction, density, and viewport preview.
-Controls apply before first paint where document `lang` and `dir` are involved.
-Links permit a reviewer to enter any component or state directly.
-
-## Typography Contract
-
-Typography is a semantic token contract, not a per-story convention.
-
-- English and other Latin UI copy use `SF Pro Text`; display headings use
-  `SF Pro Display`.
-- Persian and Arabic UI copy use the locally supplied `IRANYekanXFaNum` for
-  regular, medium, semibold, and bold weights.
-- `html[lang="fa"]`, `html[lang="ar"]`, and nested matching language scopes
-  override the semantic sans and heading variables rather than relying on a
-  glyph fallback.
-- Technical values keep the semantic monospace family and explicit LTR
-  isolation even inside RTL layouts.
-
-The self-hosted IRANYekan files remain subject to the existing licensing note;
-no proprietary SF Pro files are added to the repository. SF Pro remains a
-system-font reference with documented platform fallbacks.
-
-## Coss and Base UI Strategy
-
-Base UI supplies accessible behaviour and Coss supplies verified composition
-patterns. Neither library's default visual language may escape as a NOE product
-API.
-
-```text
-Base UI behaviour
-  -> selected, locally owned Coss-derived compositions
-    -> NOE semantic-token styling and bidi contracts
-      -> @noe public packages and registry
-        -> catalog and product consumers
-```
-
-Each Coss primitive is tracked in a machine-readable adoption matrix with one
-of these outcomes:
-
-- `adopted`: implemented as a NOE-owned public component and fully auditable;
-- `compose-only`: used internally by an NOE pattern, not exposed as a second
-  public primitive;
-- `deferred`: intentionally not yet in the NOE public surface, with rationale;
-- `blocked`: needs an explicit dependency, API, or design decision.
-
-Coss particles inform NOE patterns such as authentication, command surfaces,
-forms, tables, and settings. They are adapted only when they add a real product
-contract; the catalog does not bulk-copy the external particle library.
-
-No Coss or Base UI API is guessed. Version compatibility, installation source,
-licenses, accessibility behaviour, portal direction, and controlled state are
-verified before each adoption.
-
-## Package and Catalog Boundaries
-
-- `@noe/design-tokens` owns the semantic font, colour, spacing, motion, and
-  theme decisions.
-- `@noe/i18n` owns locales, messages, direction, formatting, and pseudo-locales.
-- `@noe/ui` owns direction-safe primitives and the Base UI/Coss adapters.
-- `@noe/data-ui`, `@noe/ai-ui`, and `@noe/workflow-ui` own NOE pattern-level
-  compositions.
-- `@noe/registry` owns installable component metadata and adoption/maturity
-  information.
-- `apps/storybook` owns the executable documentation and audit controls.
-- `apps/showcase` owns curated product and catalog entry surfaces; it does not
-  duplicate Storybook's component implementation.
-
-The registry becomes the inventory source. Automated checks compare public
-exports, registry entries, story coverage, and the audit matrix, failing if an
-available component is absent from any required surface.
-
-## Interaction, Accessibility, and Direction
-
-Interactive primitives use verified Base UI/Coss hierarchy and composition
-rules, especially for dialogs, menus, selects, popovers, drawers, forms, and
-toasts. Every portalled UI receives explicit direction. Components retain
-logical CSS and do not solve RTL with global reversal or global icon mirroring.
-
-The catalog exposes keyboard instructions and accessibility state rather than
-requiring a reviewer to infer them from source. Overlay, focus, label,
-description, error, disabled, and destructive-action behaviour are interaction
-tests, not visual claims.
-
-## Verification and Evidence
-
-The implementation adds a coverage contract that reports all public components
-and their documentation/audit status. Completion evidence includes:
-
-- token tests proving the explicit English and Persian font contracts;
-- component tests for relevant Base UI/Coss interaction semantics;
-- Storybook interaction and accessibility tests for every available story;
-- Playwright audit flows for theme, locale, direction, responsive widths, search,
-  filters, and component deep-links;
-- deterministic visual review for selected foundations, primitives, patterns,
-  and product surfaces;
-- registry and public-export parity checks;
-- `pnpm check`, `pnpm test:storybook`, `pnpm test:e2e`, and repository-level
-  `make check` results.
-
-## Non-goals
-
-- Copying Coss, Base UI, or the supplied reference websites pixel-for-pixel.
-- Shipping all externally available Coss particles merely because they exist.
-- Replacing NOE tokens, i18n, or public package boundaries with external APIs.
-- Claiming a component is implemented before its story and executable audit
-  coverage exist.
-- Publishing, deploying, or changing production infrastructure.
-
-## Delivery Sequence
-
-1. Establish catalog inventory, maturity metadata, and coverage checks.
-2. Correct the explicit language-aware typography contract with tests.
-3. Install or normalize only the verified Base UI/Coss foundations required by
-   the adoption matrix.
-4. Build the catalog shell, global audit controls, navigation, search, and
-   preview grid.
-5. Add and group complete stories for every existing public NOE component.
-6. Adopt missing primitives and patterns in dependency order, each with public
-   API, registry data, story, interaction test, and RTL coverage.
-7. Build curated product surfaces from the same public components.
-8. Run the full automated and visual verification matrix, report gaps honestly,
-   and retain a visible `planned` state for anything not yet available.

package/packages/registry/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@noe/registry",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "exports": {
-    "./registry.json": "./registry.json",
-    "./r/*": "./r/*.json"
-  }
-}

package/packages/registry/r-planned-backup/about-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "about-page",
-  "type": "registry:block",
-  "title": "About Page",
-  "description": "About page example from sections. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/about-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/about-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/activity-gauge.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "activity-gauge",
-  "type": "registry:ui",
-  "title": "Activity Gauge",
-  "description": "Activity gauge with arc, value and accessible table fallback, RTL-safe.",
-  "files": [
-    {
-      "path": "packages/data-ui/src/activity-gauge.tsx",
-      "type": "registry:component",
-      "target": "packages/data-ui/src/activity-gauge.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/avatar.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "avatar",
-  "type": "registry:ui",
-  "title": "Avatar",
-  "description": "Image and fallback avatar with tokenized sizes and status ring, bidi-safe.",
-  "files": [
-    {
-      "path": "packages/ui/src/avatar.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/avatar.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/badge-group.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "badge-group",
-  "type": "registry:ui",
-  "title": "Badge Group",
-  "description": "Compact group of badges with logical flex and overflow handling.",
-  "files": [
-    {
-      "path": "packages/ui/src/badge-group.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/badge-group.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/banner.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "banner",
-  "type": "registry:block",
-  "title": "Banner",
-  "description": "Banner section with dismiss and action, tokenized. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/banner.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/banner.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/blog-index-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "blog-index-page",
-  "type": "registry:block",
-  "title": "Blog Index Page",
-  "description": "Blog index page from sections. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/blog-index-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/blog-index-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/blog-post-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "blog-post-page",
-  "type": "registry:block",
-  "title": "Blog Post Page",
-  "description": "Blog post page from sections. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/blog-post-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/blog-post-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/blog-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "blog-section",
-  "type": "registry:block",
-  "title": "Blog Section",
-  "description": "Blog section with posts grid, content-driven. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/blog-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/blog-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/button-group.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "button-group",
-  "type": "registry:ui",
-  "title": "Button Group",
-  "description": "Segmented button group with shared border and focus management, RTL-safe.",
-  "files": [
-    {
-      "path": "packages/ui/src/button-group.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/button-group.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/careers-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "careers-section",
-  "type": "registry:block",
-  "title": "Careers Section",
-  "description": "Careers section with openings list. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/careers-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/careers-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/carousel.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "carousel",
-  "type": "registry:ui",
-  "title": "Carousel",
-  "description": "Carousel with keyboard, focus and responsive, RTL logical slide direction.",
-  "files": [
-    {
-      "path": "packages/ui/src/carousel.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/carousel.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/checkbox.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "checkbox",
-  "type": "registry:ui",
-  "title": "Checkbox",
-  "description": "Accessible checkbox with label, description, error and indeterminate states, keyboard and RTL.",
-  "files": [
-    {
-      "path": "packages/ui/src/checkbox.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/checkbox.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/color-picker.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "color-picker",
-  "type": "registry:ui",
-  "title": "Color Picker",
-  "description": "Color picker with hue, hex input and swatches, tokenized and accessible.",
-  "files": [
-    {
-      "path": "packages/ui/src/color-picker.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/color-picker.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/command-menu.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "command-menu",
-  "type": "registry:ui",
-  "title": "Command Menu",
-  "description": "Command palette with search, keyboard and overlay, shares foundation with Select.",
-  "files": [
-    {
-      "path": "packages/ui/src/command-menu.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/command-menu.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/contact-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contact-page",
-  "type": "registry:block",
-  "title": "Contact Page",
-  "description": "Contact page from sections. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/contact-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/contact-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/contact-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contact-section",
-  "type": "registry:block",
-  "title": "Contact Section",
-  "description": "Contact section with form and info. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/contact-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/contact-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/content-divider.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "content-divider",
-  "type": "registry:ui",
-  "title": "Content Divider",
-  "description": "Content divider with optional label and logical orientation.",
-  "files": [
-    {
-      "path": "packages/ui/src/content-divider.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/content-divider.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/content-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "content-section",
-  "type": "registry:block",
-  "title": "Content Section",
-  "description": "Rich text content section with prose. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/content-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/content-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/credit-card.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "credit-card",
-  "type": "registry:ui",
-  "title": "Credit Card",
-  "description": "Credit card display with tokenized styling and LTR-isolated numbers.",
-  "files": [
-    {
-      "path": "packages/ui/src/credit-card.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/credit-card.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/cta-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "cta-section",
-  "type": "registry:block",
-  "title": "CTA Section",
-  "description": "Call to action section with actions. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/cta-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/cta-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/email-template.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "email-template",
-  "type": "registry:block",
-  "title": "Email Template",
-  "description": "Email template composition with branding and content slots. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/email-template.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/email-template.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/faq-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "faq-page",
-  "type": "registry:block",
-  "title": "FAQ Page",
-  "description": "FAQ page from sections. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/faq-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/faq-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/faq-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "faq-section",
-  "type": "registry:block",
-  "title": "FAQ Section",
-  "description": "FAQ section with disclosure. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/faq-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/faq-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/feature-section.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "feature-section",
-  "type": "registry:block",
-  "title": "Feature Section",
-  "description": "Feature section with icons and descriptions. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/feature-section.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/feature-section.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/file-uploader.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "file-uploader",
-  "type": "registry:ui",
-  "title": "File Uploader",
-  "description": "File uploader with drag/drop, file list and error states, accessible.",
-  "files": [
-    {
-      "path": "packages/ui/src/file-uploader.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/file-uploader.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/footer.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "footer",
-  "type": "registry:block",
-  "title": "Footer",
-  "description": "Footer with links, brand and social, RTL. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/footer.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/footer.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/forgot-password-page.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "forgot-password-page",
-  "type": "registry:block",
-  "title": "Forgot Password Page",
-  "description": "Forgot password page with email field and submit. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/forgot-password-page.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/forgot-password-page.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/illustration.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "illustration",
-  "type": "registry:ui",
-  "title": "Illustration",
-  "description": "Illustration placeholder with tokenized background and aspect ratio.",
-  "files": [
-    {
-      "path": "packages/ui/src/illustration.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/illustration.tsx"
-    }
-  ]
-}

package/packages/registry/r-planned-backup/informational-page-01.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "informational-page-01",
-  "type": "registry:block",
-  "title": "Informational Page 01",
-  "description": "Informational page example 01, composes primitives. \u2014 tokenized, accessible, RTL-safe and responsive composition.",
-  "files": [
-    {
-      "path": "packages/ui/src/informational-page-01.tsx",
-      "type": "registry:component",
-      "target": "packages/ui/src/informational-page-01.tsx"
-    }
-  ]
-}