noecosystem-design 0.1.0

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.github/CODEOWNERS

@@ -0,0 +1,10 @@
+# Default ownership. Organization teams do not exist yet; replace with
+# @NOrchestration/<team> slugs as soon as they are created.
+*                                         @AliMohammadiiii
+
+# Sensitive areas
+/packages/design-tokens/                  @AliMohammadiiii
+/packages/ui/                             @AliMohammadiiii
+/packages/i18n/                           @AliMohammadiiii
+/packages/registry/                       @AliMohammadiiii
+/.github/workflows/                       @AliMohammadiiii

package/.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5

package/.github/pull_request_template.md

@@ -0,0 +1,17 @@
+## Summary
+
+## Design rationale
+
+## Brand impact
+
+## Internationalization and RTL/LTR impact
+
+## Accessibility impact
+
+## Testing evidence
+
+## Screenshots
+
+## Risks and rollback
+
+## Migration notes

package/.github/workflows/ci.yml

@@ -0,0 +1,173 @@
+name: ci
+
+on:
+  pull_request:
+  merge_group:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  quality:
+    name: ci / quality
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Format check
+        run: pnpm format:check
+      - name: Lint
+        run: pnpm lint
+      - name: Typecheck
+        run: pnpm typecheck
+
+  unit:
+    name: ci / unit
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Offline and unit tests
+        run: pnpm test
+
+  components:
+    name: ci / component
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+      - name: Browser component tests
+        run: pnpm test:components
+
+  storybook:
+    name: ci / storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+      - name: Storybook interaction and accessibility tests
+        run: pnpm test:storybook
+      - name: Build Storybook
+        run: pnpm build:storybook
+      - name: Upload Storybook static build
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: storybook-static-${{ github.run_id }}
+          path: apps/storybook/storybook-static/
+          retention-days: 14
+
+  build:
+    name: ci / build-and-verify
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build packages and applications
+        run: pnpm build
+      - name: Registry, i18n, RTL and governance audits
+        run: pnpm verify
+      - name: Upload build outputs
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: dist-${{ github.run_id }}
+          path: |
+            dist/
+            packages/design-tokens/src/tokens.css
+          retention-days: 14
+
+  e2e-critical:
+    name: ci / e2e-critical
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [chromium-en-ltr, chromium-fa-rtl, chromium-pseudo, firefox-en-smoke, webkit-en-smoke]
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Activate pnpm
+        run: corepack enable && corepack prepare pnpm@11.23.0 --activate
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium firefox webkit
+      - name: Run end-to-end tests
+        run: pnpm test:e2e --project=${{ matrix.project }}
+      - name: Upload failure artifacts
+        if: failure()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-${{ matrix.project }}-${{ github.run_id }}
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 14

package/.github/workflows/security.yml

@@ -0,0 +1,40 @@
+name: security
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+  schedule:
+    - cron: '23 3 * * 2'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  security-events: write
+
+jobs:
+  codeql:
+    name: security / codeql
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+        with:
+          languages: javascript-typescript
+      - name: Analyze
+        uses: github/codeql-action/analyze@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+
+  dependency-review:
+    name: security / dependency-review
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Review dependency changes
+        uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0

package/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  }
+}

package/.node-version

@@ -0,0 +1 @@
+24.19.0

package/AGENTS.md

@@ -0,0 +1,62 @@
+# AGENTS.md — NOE Design System
+
+## Mission
+
+Extend NOE as one coherent system: calm, precise, connected, deliberate, technical, human-centered, premium, quiet, and fast.
+
+## Source-of-truth order
+
+1. Running production behavior.
+2. Approved product requirements.
+3. Approved design and architecture records.
+4. Existing repository architecture.
+5. Organization conventions.
+6. Tests.
+7. Documentation.
+8. NOE public visual language.
+9. Assumptions.
+
+Surface contradictions. Do not silently overwrite deliberate architecture.
+
+## Component lookup order
+
+1. `@noe` registry.
+2. Existing NOE product component.
+3. Approved coss/Base UI foundation.
+4. 21st.dev MCP discovery.
+5. Approved shadcn-compatible registry.
+6. Custom implementation.
+
+Search before inventing.
+
+## Package responsibilities
+
+- `design-tokens`: semantic visual decisions only.
+- `ui`: reusable interaction primitives and bidi-safe technical content.
+- `i18n`: locale metadata, direction, messages, formatters, pseudo-locales.
+- `data-ui`: table, filter, metric and chart composition contracts.
+- `ai-ui`: agent, tool, run, approval and artifact states.
+- `workflow-ui`: node/edge/canvas/inspector patterns.
+- `icons`: one icon policy and directional mirroring contract.
+- `registry`: installable metadata and agent-facing usage descriptions.
+
+## Mandatory rules
+
+- Do not invent colors, radii, shadows, spacing steps, icon sizes, or motion durations.
+- Do not create a second Button, Dialog, DataTable, ToolCall, or Approval component.
+- Do not mix icon families.
+- Do not bypass the i18n layer or hardcode reusable user-facing text.
+- Do not assume LTR.
+- Do not use physical left/right CSS without a documented physical meaning.
+- Do not solve RTL with global `row-reverse` or global icon mirroring.
+- Do not expose raw tool JSON to ordinary users by default.
+- Do not promote marketplace components directly into production.
+- Do not document planned behavior as implemented behavior.
+
+## Direction and bidi
+
+Set document `lang` and `dir` before first paint. Components must work within nested `dir=ltr` and `dir=rtl` containers. Portals must receive direction explicitly. Use logical properties and logical motion terms (`start`, `end`, `forward`, `backward`). Technical identifiers remain LTR where semantics require it. Use `dir=auto` and `bdi` for unpredictable content.
+
+## Definition of Done
+
+A component change is complete only when relevant source, tokens, locale messages, RTL behavior, accessibility, responsive behavior, Storybook stories, tests, registry metadata, and documentation agree. Evidence must come from executed checks, not intention.

package/CONTRIBUTING.md

@@ -0,0 +1,9 @@
+# Contributing
+
+1. Read `AGENTS.md` and the relevant package documentation.
+2. Search the `@noe` registry before adding a component.
+3. Use semantic tokens and logical CSS properties.
+4. Add or update English, Persian, pseudo-LTR, and pseudo-RTL coverage when user-facing behavior changes.
+5. Add stories and tests for meaningful states.
+6. Run `npm run check:all` and `npm run visual` for visual changes.
+7. Use a feature branch and a reviewable pull request. Do not push substantial work directly to the protected default branch.

package/README.md

@@ -0,0 +1,48 @@
+# NOE Design System
+
+A production-grade, agent-friendly design system for NOE: multilingual, fully
+bidirectional, theme-aware React components with semantic tokens, a shadcn-compatible
+`@noe` registry, Storybook documentation and a multi-layered test suite.
+
+## Commands (pnpm workspace)
+
+```bash
+corepack enable && pnpm install     # Node >= 24.19
+pnpm check                          # format + lint + typecheck + tests + builds + verify
+```
+
+| Command               | Purpose                                              |
+| --------------------- | ---------------------------------------------------- |
+| `pnpm lint`           | Biome lint (a11y, correctness, style)                |
+| `pnpm typecheck`      | Strict TypeScript across the workspace               |
+| `pnpm test`           | Offline node tests + Vitest unit project             |
+| `pnpm test:components`| Vitest browser component tests (Playwright/Chromium) |
+| `pnpm test:storybook` | Storybook interaction + accessibility tests          |
+| `pnpm test:e2e`       | Playwright matrix (surfaces × locales × viewports)   |
+| `pnpm build`          | Build all packages, showcase app                     |
+| `pnpm build:storybook`| Production Storybook static build                    |
+| `pnpm verify`         | Registry, i18n, RTL, governance and secret audits    |
+| `pnpm dev`            | Showcase application dev server                      |
+| `pnpm storybook`      | Storybook dev server                                 |
+
+## Architecture
+
+```text
+apps/
+  showcase/         React + Vite product surface reference
+  storybook/        Stories, docs, a11y and interaction tests
+  web/              Dependency-free visual reference and QA target
+
+packages/
+  design-tokens/    Semantic tokens and CSS contracts (light/dark)
+  ui/               Direction-safe UI primitives (@noe/ui)
+  i18n/             Locale metadata, formatters, pseudo-locales
+  data-ui/          Data table, metrics, chart framing
+  ai-ui/            Agent, run, tool, approval, artifact patterns
+  workflow-ui/      Workflow canvas, nodes, inspector
+  icons/            First-party icon policy and directional mirroring
+  registry/         shadcn-compatible @noe registry output
+  testing/          Reusable test contracts
+```
+
+Read `AGENTS.md` before modifying the system. `llms.txt` is the compact retrieval map.

package/SECURITY.md

@@ -0,0 +1,7 @@
+# Security policy
+
+Report suspected vulnerabilities through the organization-approved private security channel. Do not open a public issue for an unpatched vulnerability.
+
+The repository follows least privilege, pinned GitHub Action revisions, no privileged `pull_request_target` execution, no committed credentials, and explicit approval for production-impacting changes.
+
+See `docs/design-system/security.md` for the threat model and CI controls.

package/apps/showcase/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#252423" data-theme-dark="#252423" data-theme-light="#f3f0ea" />
+    <title>NOE Design System</title>
+    <script>
+      (() => {try {
+        const STORAGE_KEY="noecosystem-theme",EXPLORER_KEY="theme",COOKIE_KEY="noecosystem-theme";
+        const isTheme=v=>v==="light"||v==="dark";
+        const read=k=>{try{return localStorage.getItem(k)}catch{return null}};
+        const cookie=(()=>{try{const p=`${COOKIE_KEY}=`;const e=document.cookie.split(";").map(s=>s.trim()).find(s=>s.startsWith(p));return e?decodeURIComponent(e.slice(p.length)):null}catch{return null}})();
+        const sys=window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
+        let t=read(STORAGE_KEY); if(!isTheme(t)) t=cookie; if(!isTheme(t)) t=read(EXPLORER_KEY); if(!isTheme(t)) t=sys;
+        document.documentElement.dataset.theme=t;
+        document.documentElement.classList.toggle("light",t==="light");
+        document.documentElement.classList.toggle("dark",t==="dark");
+        document.documentElement.style.colorScheme=t;
+      } catch {}})();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/apps/showcase/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@noe/showcase",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build --outDir ../../dist/showcase --emptyOutDir",
+    "preview": "vite preview --host 127.0.0.1"
+  },
+  "dependencies": {
+    "@noe/ai-ui": "workspace:*",
+    "@noe/data-ui": "workspace:*",
+    "@noe/design-tokens": "workspace:*",
+    "@noe/i18n": "workspace:*",
+    "@noe/icons": "workspace:*",
+    "@noe/ui": "workspace:*",
+    "@noe/workflow-ui": "workspace:*",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "@vitejs/plugin-react": "6.1.0",
+    "tailwindcss": "4.3.3",
+    "vite": "8.2.2",
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
+  }
+}

package/apps/showcase/src/app.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "@noe/design-tokens/theme.css";
+@import "@noe/design-tokens/base.css";
+
+@source "../../../packages/ui/src";
+@source "../../../packages/ai-ui/src";
+@source "../../../packages/data-ui/src";
+@source "../../../packages/workflow-ui/src";

package/apps/showcase/src/app.tsx

@@ -0,0 +1,10 @@
+import { ThemeProvider } from '@noe/ui';
+import { CatalogShell } from './catalog/catalog-shell';
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <CatalogShell />
+    </ThemeProvider>
+  );
+}

package/apps/showcase/src/catalog/agent-composer-preview.tsx

@@ -0,0 +1,17 @@
+import { AgentComposer } from '@noe/ai-ui';
+import * as React from 'react';
+
+export function AgentComposerPreview() {
+  const [value, setValue] = React.useState('Summarize the last three failed runs.');
+  return (
+    <div style={{ maxWidth: '28rem' }}>
+      <AgentComposer
+        value={value}
+        onChange={setValue}
+        onSubmit={() => setValue('')}
+        placeholder="Ask the agent to make a change…"
+        submitLabel="Send"
+      />
+    </div>
+  );
+}