noecosystem-design 0.2.3 → 0.4.0

package/packages/icons/src/nocfo-logo.browser.test.tsx

@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { NocfoLogo } from './nocfo-logo';
+
+test('NocfoLogo exposes the official wordmark with an accessible product name', async () => {
+  const screen = await render(<NocfoLogo label="سامانه NOCFO" />);
+  const logo = screen.getByRole('img', { name: 'سامانه NOCFO' });
+
+  await expect.element(logo).toHaveAttribute('data-slot', 'nocfo-logo');
+  await expect.element(logo).toHaveAttribute('width', '698');
+  await expect.element(logo).toHaveAttribute('height', '115');
+  expect(logo.element().getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+});

package/packages/icons/src/nocfo-logo.tsx

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+
+const nocfoLogoUrl = new URL('./brands/nocfo.svg', import.meta.url).href;
+
+export interface NocfoLogoProps extends Omit<React.ComponentProps<'img'>, 'alt' | 'src'> {
+  /** Localized accessible name. Pass an empty string only when adjacent text names the brand. */
+  label?: string;
+}
+
+/** Official NOCFO wordmark. Brand artwork is never directionally mirrored. */
+export function NocfoLogo({ label = 'NOCFO', style, ...props }: NocfoLogoProps) {
+  return (
+    <img
+      alt={label}
+      data-slot="nocfo-logo"
+      height={115}
+      src={nocfoLogoUrl}
+      style={{ blockSize: 'auto', inlineSize: '8.75rem', ...style }}
+      width={698}
+      {...props}
+    />
+  );
+}

package/packages/registry/catalog-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-29T09:30:43.936Z",
+  "generatedAt": "2026-08-30T12:09:40.539Z",
   "items": [
     {
       "id": "bidi-text",
@@ -208,7 +208,7 @@
       "package": "@noe/data-ui",
       "status": "available",
       "maturity": "beta",
-      "description": "Data Table — Data component. data-table provides data behavior with RTL, i18n and accessibility built-in.",
+      "description": "Semantic data table with TanStack Table v9 as a headless engine behind the internal NOE adapter: sorting, NOE filter operators, controlled pagination, stable-id selection, loading skeletons and server mode.",
       "registryItem": "data-table"
     },
     {

package/packages/registry/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifestVersion": "1.0.0",
-  "generatedAt": "2026-08-29T09:30:43.923Z",
+  "generatedAt": "2026-08-30T12:09:40.530Z",
   "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": [
     {
@@ -1027,33 +1027,75 @@
       "status": "available",
       "maturity": "beta",
       "category": "Data",
-      "description": "Data Table — Data component. data-table provides data behavior with RTL, i18n and accessibility built-in.",
-      "capabilityAliases": ["data table", "data-table"],
-      "searchTerms": ["data-table", "data table", "data"],
-      "useWhen": ["using data table in Data"],
-      "doNotUseWhen": ["when data table semantics do not match"],
-      "alternatives": [],
-      "dependencies": ["@noe/ui"],
+      "description": "Semantic data table with TanStack Table v9 as a headless engine behind the internal NOE adapter: sorting, NOE filter operators, controlled pagination, stable-id selection, loading skeletons and server mode.",
+      "capabilityAliases": ["data table", "sortable table", "server-side table", "grid"],
+      "searchTerms": [
+        "data-table",
+        "table",
+        "sorting",
+        "filtering",
+        "pagination",
+        "selection",
+        "server-side",
+        "aria-sort"
+      ],
+      "useWhen": [
+        "tabular product data with sorting, filtering, pagination or row selection",
+        "server-driven pages composed from toDataQuery against Django APIs"
+      ],
+      "doNotUseWhen": [
+        "spreadsheet-style cell editing grids",
+        "static lists without tabular semantics"
+      ],
+      "alternatives": ["DataList"],
+      "dependencies": ["@noe/ui", "@tanstack/react-table"],
       "registryDependencies": [],
       "peerDependencies": ["react"],
       "propsSummary": {
-        "label": "string | ReactNode",
-        "children": "ReactNode"
+        "columns": "DataColumn<Row>[]",
+        "rows": "Row[]",
+        "caption": "string",
+        "empty": "ReactNode",
+        "sorting": "readonly DataSort[]",
+        "filters": "readonly FilterSpec[]",
+        "page": "PageSpec",
+        "selection": "readonly RowId[]",
+        "density": "'compact' | 'regular'",
+        "loading": "boolean",
+        "manualSorting": "boolean",
+        "manualFiltering": "boolean",
+        "manualPagination": "boolean",
+        "totalRowCount": "number"
       },
-      "variants": ["default"],
+      "variants": ["regular", "compact"],
       "sizes": [],
       "slots": [],
-      "states": ["default", "hover", "focus-visible", "disabled"],
-      "tokenContracts": ["color.foreground", "color.border"],
+      "states": ["default", "hover", "loading", "selected", "empty", "focus-visible"],
+      "tokenContracts": [
+        "color.border",
+        "color.foreground",
+        "color.muted-foreground",
+        "surface.sunken",
+        "muted"
+      ],
       "accessibility": {
-        "keyboard": ["Tab to focus", "Enter/Space activate"],
-        "announcements": [],
-        "focusBehavior": ["visible ring 2px"]
+        "role": "table",
+        "keyboard": [
+          "Tab moves into the scrollable region",
+          "Enter/Space on header toggles sort",
+          "Enter/Space on checkbox toggles row selection"
+        ],
+        "announcements": ["aria-sort on sorted column headers", "aria-live pagination status"],
+        "focusBehavior": ["visible ring 2px", "scroll container focusable for keyboard overflow"]
       },
       "internationalization": {
         "messageKeys": [],
         "rtl": "required",
-        "bidiNotes": ["logical properties", "no global mirror"]
+        "bidiNotes": [
+          "logical start/end alignment only",
+          "technical cells render dir=ltr via TechnicalValue",
+          "pagination controls use caller-provided accessible labels"
+        ]
       },
       "examples": [
         {
@@ -1062,7 +1104,7 @@
           "files": ["apps/storybook/stories/catalog/data-table.stories.tsx"]
         }
       ],
-      "relatedPatterns": [],
+      "relatedPatterns": ["filter-bar", "pagination", "empty-state"],
       "untitledMapping": null,
       "storyId": "catalog-data-data-table--default",
       "registryItem": "data-table"

package/packages/registry/r/activity-feed.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/agent-composer.json

@@ -27,7 +27,13 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  "dependencies": [
+    "@base-ui/react",
+    "@noe/ui",
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/agent-message.json

@@ -22,7 +22,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/agent-plan.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/agent-workspace.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/app-frame.json

@@ -43,10 +43,17 @@
     "color.surfaceRaised",
     "color.surfaceSunken"
   ],
-  "capabilityAliases": ["app frame", "app-frame", "finance application shell", "admin shell"],
+  "capabilityAliases": [
+    "app frame",
+    "app-frame",
+    "finance application shell",
+    "admin shell",
+    "NOCFO workspace"
+  ],
   "useWhen": [
     "using app frame in Patterns / Pages",
-    "building a flat finance or admin application shell"
+    "building a flat finance or admin application shell",
+    "composing the NOCFO bank-account workspace template shown in Storybook"
   ],
   "doNotUseWhen": ["when app frame semantics do not match"]
 }

package/packages/registry/r/approval-request.json

@@ -32,7 +32,13 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  "dependencies": [
+    "@base-ui/react",
+    "@noe/ui",
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/calendar.json

@@ -4,9 +4,10 @@
   "type": "registry:ui",
   "title": "Calendar",
   "description": "Calendar — Base / Pickers component. calendar provides base / pickers behavior with RTL, i18n and accessibility built-in.",
-  "registryDependencies": [],
+  "registryDependencies": ["icon-system"],
   "dependencies": [
     "@base-ui/react",
+    "@noe/icons",
     "class-variance-authority",
     "clsx",
     "iconsax-react",
@@ -14,14 +15,14 @@
   ],
   "files": [
     {
-      "path": "packages/icons/src/index.tsx",
+      "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/index.tsx"
+      "target": "packages/icons/src/iconsax.tsx"
     },
     {
-      "path": "packages/icons/src/iconsax.tsx",
+      "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/iconsax.tsx"
+      "target": "packages/icons/src/index.tsx"
     },
     {
       "path": "packages/ui/src/button.tsx",

package/packages/registry/r/chart-frame.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/chart.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/dashboard-01.json

@@ -30,6 +30,26 @@
       "type": "registry:component",
       "target": "packages/data-ui/src/metric-card.tsx"
     },
+    {
+      "path": "packages/data-ui/src/pagination.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/pagination.tsx"
+    },
+    {
+      "path": "packages/data-ui/src/table/adapters/tanstack.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/adapters/tanstack.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/contracts.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/contracts.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/data-table.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/data-table.tsx"
+    },
     {
       "path": "packages/ui/src/bidi.tsx",
       "type": "registry:component",
@@ -41,8 +61,8 @@
       "target": "packages/ui/src/lib/cn.ts"
     }
   ],
-  "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "registryDependencies": ["icon-system"],
+  "dependencies": ["@noe/icons", "@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/dashboard-02.json

@@ -30,6 +30,26 @@
       "type": "registry:component",
       "target": "packages/data-ui/src/metric-card.tsx"
     },
+    {
+      "path": "packages/data-ui/src/pagination.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/pagination.tsx"
+    },
+    {
+      "path": "packages/data-ui/src/table/adapters/tanstack.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/adapters/tanstack.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/contracts.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/contracts.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/data-table.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/data-table.tsx"
+    },
     {
       "path": "packages/ui/src/bidi.tsx",
       "type": "registry:component",
@@ -41,8 +61,8 @@
       "target": "packages/ui/src/lib/cn.ts"
     }
   ],
-  "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "registryDependencies": ["icon-system"],
+  "dependencies": ["@noe/icons", "@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/dashboard-shell.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/data-table.json

@@ -10,6 +10,26 @@
       "type": "registry:component",
       "target": "packages/data-ui/src/data-table.tsx"
     },
+    {
+      "path": "packages/data-ui/src/pagination.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/pagination.tsx"
+    },
+    {
+      "path": "packages/data-ui/src/table/adapters/tanstack.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/adapters/tanstack.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/contracts.ts",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/contracts.ts"
+    },
+    {
+      "path": "packages/data-ui/src/table/data-table.tsx",
+      "type": "registry:component",
+      "target": "packages/data-ui/src/table/data-table.tsx"
+    },
     {
       "path": "packages/ui/src/bidi.tsx",
       "type": "registry:component",
@@ -21,8 +41,8 @@
       "target": "packages/ui/src/lib/cn.ts"
     }
   ],
-  "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "registryDependencies": ["icon-system"],
+  "dependencies": ["@noe/icons", "@noe/ui", "clsx", "tailwind-merge", "@tanstack/react-table"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/date-picker.json

@@ -4,9 +4,10 @@
   "type": "registry:ui",
   "title": "Date Picker",
   "description": "Date Picker — Base / Pickers component. date-picker provides base / pickers behavior with RTL, i18n and accessibility built-in.",
-  "registryDependencies": [],
+  "registryDependencies": ["icon-system"],
   "dependencies": [
     "@base-ui/react",
+    "@noe/icons",
     "class-variance-authority",
     "clsx",
     "iconsax-react",
@@ -14,14 +15,14 @@
   ],
   "files": [
     {
-      "path": "packages/icons/src/index.tsx",
+      "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/index.tsx"
+      "target": "packages/icons/src/iconsax.tsx"
     },
     {
-      "path": "packages/icons/src/iconsax.tsx",
+      "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/iconsax.tsx"
+      "target": "packages/icons/src/index.tsx"
     },
     {
       "path": "packages/ui/src/button.tsx",

package/packages/registry/r/filter-bar.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": ["input"],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/icon-system.json

@@ -3,7 +3,7 @@
   "name": "icon-system",
   "type": "registry:ui",
   "title": "Icon System",
-  "description": "Icon System — Foundations / Icons component. icon-system provides foundations / icons behavior with RTL, i18n and accessibility built-in.",
+  "description": "One icon and product-mark policy for NOE interfaces. Includes direction-aware Iconsax controls, the NOE mark and the official NOCFO wordmark; brand artwork never mirrors in RTL.",
   "files": [
     {
       "path": "packages/icons/src/index.tsx",
@@ -14,6 +14,16 @@
       "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
       "target": "packages/icons/src/iconsax.tsx"
+    },
+    {
+      "path": "packages/icons/src/nocfo-logo.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/nocfo-logo.tsx"
+    },
+    {
+      "path": "packages/icons/src/brands/nocfo.svg",
+      "type": "registry:file",
+      "target": "packages/icons/src/brands/nocfo.svg"
     }
   ],
   "registryDependencies": [],
@@ -30,7 +40,7 @@
   "rtl": "required",
   "i18n": {
     "messageKeys": [],
-    "bidiNotes": ["logical properties", "no global mirror"]
+    "bidiNotes": ["directional controls mirror by policy", "brand marks never mirror"]
   },
   "accessibility": {
     "keyboard": ["Tab to focus", "Enter/Space activate"],
@@ -38,7 +48,10 @@
     "focusBehavior": ["visible ring 2px"]
   },
   "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["icon system", "icon-system"],
-  "useWhen": ["using icon system in Foundations / Icons"],
-  "doNotUseWhen": ["when icon system semantics do not match"]
+  "capabilityAliases": ["icon system", "icon-system", "NOCFO logo", "product wordmark"],
+  "useWhen": [
+    "rendering interface icons through the canonical Iconsax policy",
+    "rendering the official NOCFO wordmark in product chrome"
+  ],
+  "doNotUseWhen": ["rendering a third-party service logo through the NOCFO product mark"]
 }

package/packages/registry/r/inline-cta.json

@@ -6,14 +6,14 @@
   "description": "Inline call to action link with trailing logical chevron, tokenized, for use within prose.",
   "files": [
     {
-      "path": "packages/icons/src/index.tsx",
+      "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/index.tsx"
+      "target": "packages/icons/src/iconsax.tsx"
     },
     {
-      "path": "packages/icons/src/iconsax.tsx",
+      "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/iconsax.tsx"
+      "target": "packages/icons/src/index.tsx"
     },
     {
       "path": "packages/ui/src/inline-cta.tsx",
@@ -26,8 +26,8 @@
       "target": "packages/ui/src/lib/cn.ts"
     }
   ],
-  "registryDependencies": [],
-  "dependencies": ["clsx", "iconsax-react", "tailwind-merge"],
+  "registryDependencies": ["icon-system"],
+  "dependencies": ["@noe/icons", "clsx", "iconsax-react", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ui",

package/packages/registry/r/metric-card.json

@@ -17,7 +17,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/r/pagination.json

@@ -11,14 +11,14 @@
       "target": "packages/data-ui/src/pagination.tsx"
     },
     {
-      "path": "packages/icons/src/index.tsx",
+      "path": "packages/icons/src/iconsax.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/index.tsx"
+      "target": "packages/icons/src/iconsax.tsx"
     },
     {
-      "path": "packages/icons/src/iconsax.tsx",
+      "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
-      "target": "packages/icons/src/iconsax.tsx"
+      "target": "packages/icons/src/index.tsx"
     },
     {
       "path": "packages/ui/src/button.tsx",
@@ -36,9 +36,11 @@
       "target": "packages/ui/src/spinner.tsx"
     }
   ],
-  "registryDependencies": [],
+  "registryDependencies": ["icon-system"],
   "dependencies": [
     "@base-ui/react",
+    "@noe/icons",
+    "@noe/ui",
     "class-variance-authority",
     "clsx",
     "iconsax-react",

package/packages/registry/r/run-inspector.json

@@ -22,7 +22,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",

package/packages/registry/r/sidebar-navigation.json

@@ -3,7 +3,7 @@
   "name": "sidebar-navigation",
   "type": "registry:block",
   "title": "Sidebar Navigation",
-  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal; RTL, i18n and accessibility are built in.",
+  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal, with opt-in wrapping for long bilingual finance labels; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/lib/cn.ts",
@@ -44,6 +44,9 @@
     "color.mutedForeground"
   ],
   "capabilityAliases": ["sidebar navigation", "sidebar-navigation", "finance sidebar"],
-  "useWhen": ["using sidebar navigation in Patterns / Application"],
+  "useWhen": [
+    "using sidebar navigation in Patterns / Application",
+    "rendering long bilingual finance labels with wrapLabels"
+  ],
   "doNotUseWhen": ["when sidebar navigation semantics do not match"]
 }

package/packages/registry/r/tool-call.json

@@ -22,7 +22,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["@noe/ui", "clsx", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ai-ui",