noecosystem-design 0.2.2 → 0.3.0

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

@@ -3,7 +3,7 @@
   "name": "header-navigation",
   "type": "registry:block",
   "title": "Header Navigation",
-  "description": "Header Navigation — Patterns / Application component. header-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Header Navigation — Patterns / Application component. Provides a compact 56px application header with RTL, i18n and accessibility built in.",
   "files": [
     {
       "path": "packages/ui/src/header-navigation.tsx",
@@ -37,8 +37,8 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["header navigation", "header-navigation"],
+  "tokenContracts": ["color.foreground", "color.surfaceRaised", "control.height.md"],
+  "capabilityAliases": ["header navigation", "header-navigation", "compact app header"],
   "useWhen": ["using header navigation in Patterns / Application"],
   "doNotUseWhen": ["when header navigation semantics do not match"]
 }

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. sidebar-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/lib/cn.ts",
@@ -37,8 +37,13 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["sidebar navigation", "sidebar-navigation"],
+  "tokenContracts": [
+    "color.foreground",
+    "color.surface",
+    "color.surfaceRaised",
+    "color.mutedForeground"
+  ],
+  "capabilityAliases": ["sidebar navigation", "sidebar-navigation", "finance sidebar"],
   "useWhen": ["using sidebar navigation in Patterns / Application"],
   "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",

package/packages/registry/r/workflow-canvas.json

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

package/packages/registry/r/workflow-node.json

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

package/packages/registry/registry.json

@@ -133,11 +133,20 @@
           "target": "packages/data-ui/src/data-table.tsx"
         }
       ],
-      "dependencies": ["@noe/ui"],
+      "dependencies": ["@noe/ui", "@tanstack/react-table"],
       "peerDependencies": ["react"],
       "manifestId": "data-table",
-      "capabilityAliases": ["data table", "data-table"],
-      "searchTerms": ["data-table", "data table", "data"]
+      "capabilityAliases": ["data table", "sortable table", "server-side table", "grid"],
+      "searchTerms": [
+        "data-table",
+        "table",
+        "sorting",
+        "filtering",
+        "pagination",
+        "selection",
+        "server-side",
+        "aria-sort"
+      ]
     },
     {
       "name": "metric-card",

package/packages/registry/search-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-29T09:30:43.933Z",
+  "generatedAt": "2026-08-30T12:09:40.536Z",
   "items": [
     {
       "id": "bidi-text",
@@ -381,15 +381,30 @@
       "id": "data-table",
       "package": "@noe/data-ui",
       "title": "Data Table",
-      "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.",
       "category": "Data",
       "status": "available",
-      "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": [],
-      "relatedPatterns": [],
+      "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"],
+      "relatedPatterns": ["filter-bar", "pagination", "empty-state"],
       "exportName": "DataTable",
       "registryItem": "data-table",
       "maturity": "beta"

package/packages/ui/package.json

@@ -24,6 +24,10 @@
     ".": "./src/index.ts",
     "./bidi": "./src/bidi.tsx",
     "./button": "./src/button.tsx",
-    "./lib/cn": "./src/lib/cn.ts"
+    "./lib/cn": "./src/lib/cn.ts",
+    "./checkbox": "./src/checkbox.tsx",
+    "./skeleton": "./src/skeleton.tsx",
+    "./empty-state": "./src/empty-state.tsx",
+    "./input": "./src/input.tsx"
   }
 }

package/packages/ui/src/app-frame.browser.test.tsx

@@ -0,0 +1,47 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { DirectionProvider } from './direction';
+import { AppFrame } from './app-frame';
+import { SidebarNavigation } from './sidebar-navigation';
+
+test('finance app frame keeps a flat, logical RTL sidebar structure', async () => {
+  const screen = await render(
+    <DirectionProvider direction="rtl">
+      <AppFrame
+        contentId="finance-main"
+        data-testid="finance-app-frame"
+        navigation={
+          <SidebarNavigation
+            label="ناوبری"
+            sections={[
+              {
+                id: 'finance',
+                items: [
+                  {
+                    href: '#dashboard',
+                    icon: <svg data-testid="dashboard-icon" />,
+                    label: 'داشبورد',
+                    current: true,
+                  },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <p>محتوا</p>
+      </AppFrame>
+    </DirectionProvider>,
+  );
+
+  const frame = screen.getByTestId('finance-app-frame');
+  await expect.element(frame).toHaveAttribute('data-variant', 'finance');
+  await expect.element(screen.getByRole('navigation', { name: 'ناوبری' })).toBeVisible();
+  await expect
+    .element(screen.getByRole('link', { name: 'داشبورد' }))
+    .toHaveAttribute('aria-current', 'page');
+  await expect.element(screen.getByTestId('dashboard-icon')).toBeVisible();
+  await expect.element(screen.getByRole('main')).toHaveAttribute('id', 'finance-main');
+});

package/packages/ui/src/app-frame.tsx

@@ -1,36 +1,55 @@
+import { useId } from 'react';
 import type * as React from 'react';
 
 import { cn } from './lib/cn';
 
 export interface AppFrameProps extends React.ComponentProps<'div'> {
+  /** `finance` is the compact, flat shell for dense business applications. */
+  variant?: 'default' | 'finance';
   header?: React.ReactNode;
   navigation?: React.ReactNode;
   mobileNavigation?: React.ReactNode;
   inspector?: React.ReactNode;
+  contentId?: string;
   children: React.ReactNode;
 }
 
 export function AppFrame({
+  variant = 'default',
   header,
   navigation,
   mobileNavigation,
   inspector,
+  contentId,
   children,
   className,
   ...props
 }: AppFrameProps) {
+  const isFinanceShell = variant === 'finance';
+  const generatedContentId = useId();
   return (
     <div
-      className={cn('grid min-h-dvh w-full grid-rows-[auto_1fr]', className)}
+      className={cn(
+        'grid min-h-dvh w-full grid-rows-[auto_1fr] bg-background font-sans text-foreground',
+        className,
+      )}
       data-slot="app-frame"
+      data-variant={variant}
       {...props}
     >
       {header ? <div data-slot="app-frame-header">{header}</div> : null}
-      <div className="grid lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]">
+      <div
+        className={cn(
+          'grid',
+          isFinanceShell
+            ? 'lg:grid-cols-[17.5rem_minmax(0,1fr)] xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]'
+            : 'lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+        )}
+      >
         {mobileNavigation ? (
           <nav
             aria-label="Primary"
-            className="border-b border-border bg-surface-raised p-4 lg:hidden"
+            className="bg-surface p-4 lg:hidden"
             data-slot="app-frame-mobile-navigation"
           >
             {mobileNavigation}
@@ -39,19 +58,27 @@ export function AppFrame({
         {navigation ? (
           <aside
             aria-label="Primary"
-            className="hidden border-e border-border bg-surface-raised p-4 lg:block"
+            className={cn(
+              'hidden p-4 lg:block',
+              isFinanceShell ? 'bg-surface-sunken px-3 py-4' : 'bg-surface-raised',
+            )}
             data-slot="app-frame-navigation"
           >
             {navigation}
           </aside>
         ) : null}
-        <main className="min-w-0 p-4 sm:p-6" data-slot="app-frame-content">
+        <main
+          className={cn('min-w-0 bg-background p-4 sm:p-6', isFinanceShell && 'sm:p-5')}
+          data-slot="app-frame-content"
+          id={contentId ?? generatedContentId}
+          tabIndex={-1}
+        >
           {children}
         </main>
         {inspector ? (
           <aside
             aria-label="Inspector"
-            className="hidden border-s border-border bg-surface-raised p-5 xl:block"
+            className="hidden bg-surface p-5 xl:block"
             data-slot="app-frame-inspector"
           >
             {inspector}

package/packages/ui/src/button.browser.test.tsx

@@ -36,3 +36,11 @@ test('a disabled polymorphic Button cannot navigate or receive focus', async ()
   expect(onClick).not.toHaveBeenCalled();
   expect(window.location.hash).not.toBe('#danger');
 });
+
+test('secondary Button remains a transparent currentColor outline', async () => {
+  const screen = await render(<Button variant="secondary">Reject</Button>);
+  const button = screen.getByRole('button', { name: 'Reject' });
+  await expect.element(button).toHaveClass('border-current');
+  await expect.element(button).toHaveClass('bg-transparent');
+  await expect.element(button).toHaveClass('text-foreground');
+});

package/packages/ui/src/button.tsx

@@ -12,7 +12,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary: 'border-accent bg-accent text-accent-foreground hover:bg-accent-hover',
-        secondary: 'border-border bg-surface-raised text-foreground hover:bg-muted',
+        secondary: 'border-current bg-transparent text-foreground hover:bg-muted/70',
         outline: 'border-border bg-transparent text-foreground hover:bg-muted',
         ghost: 'border-transparent bg-transparent text-foreground hover:bg-muted',
         quiet: 'border-transparent bg-transparent text-foreground hover:bg-muted',

package/packages/ui/src/checkbox.tsx

@@ -11,7 +11,7 @@ export function Checkbox({ className, label, ...props }: CheckboxProps) {
         className="size-4 rounded-sm border border-border bg-background focus-visible:outline-2 focus-visible:outline-focus-ring"
         {...props}
       />
-      <span>{label ?? 'Checkbox'}</span>
+      <span>{label}</span>
     </label>
   );
 }

package/packages/ui/src/header-navigation.tsx

@@ -29,7 +29,7 @@ export function HeaderNavigation({
   return (
     <header
       className={cn(
-        'flex w-full items-center gap-x-6 gap-y-2 bg-surface-raised px-4 py-3',
+        'flex min-h-14 w-full items-center gap-x-4 gap-y-2 bg-surface-raised px-4 py-2',
         className,
       )}
       data-slot="header-navigation"

package/packages/ui/src/sidebar-navigation.tsx

@@ -6,8 +6,11 @@ export interface SidebarNavigationItem {
   id?: string;
   href: string;
   label: React.ReactNode;
+  /** Rendered at the logical start; follows document direction without row reversal. */
+  icon?: React.ReactNode;
   current?: boolean;
   badge?: React.ReactNode;
+  endAdornment?: React.ReactNode;
 }
 
 export interface SidebarNavigationSection {
@@ -53,16 +56,24 @@ export function SidebarNavigation({
                 <a
                   aria-current={item.current ? 'page' : undefined}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface-sunken/60',
+                    'flex min-h-11 items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface/80',
                     item.current
-                      ? 'bg-surface-sunken font-medium text-foreground'
+                      ? 'bg-surface-raised font-medium text-foreground'
                       : 'text-muted-foreground',
                   )}
                   data-current={item.current || undefined}
                   data-slot="sidebar-navigation-item"
                   href={item.href}
                 >
+                  {item.icon ? (
+                    <span aria-hidden="true" className="shrink-0 text-current [&_svg]:size-5">
+                      {item.icon}
+                    </span>
+                  ) : null}
                   <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.endAdornment ? (
+                    <span className="ms-auto shrink-0 text-current">{item.endAdornment}</span>
+                  ) : null}
                   {item.badge ? (
                     <span className="ms-auto shrink-0 text-xs tabular-nums">{item.badge}</span>
                   ) : null}

package/scripts/generate-manifest.mjs

@@ -119,6 +119,76 @@ function toTitle(id) {
 
 // Enrichment database — semantic, agent-friendly metadata per spec
 const enrichments = {
+  'data-table': {
+    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'],
+    variants: ['regular', 'compact'],
+    states: ['default', 'hover', 'loading', 'selected', 'empty', 'focus-visible'],
+    tokenContracts: [
+      'color.border',
+      'color.foreground',
+      'color.muted-foreground',
+      'surface.sunken',
+      'muted',
+    ],
+    propsSummary: {
+      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',
+    },
+    accessibility: {
+      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 start/end alignment only',
+        'technical cells render dir=ltr via TechnicalValue',
+        'pagination controls use caller-provided accessible labels',
+      ],
+    },
+    relatedPatterns: ['filter-bar', 'pagination', 'empty-state'],
+    untitledMapping: null,
+  },
   'bidi-text': {
     description:
       'Mixed-direction content primitives for user text, URLs, hashes, commands and technical identifiers with explicit LTR isolation.',
@@ -815,6 +885,7 @@ function defaultEnrichment(auditItem) {
   const registryDeps = [];
   const peerDeps = ['react'];
   if (pkg === '@noe/data-ui') deps.push('@noe/ui');
+  if (auditItem.id === 'data-table') deps.push('@tanstack/react-table');
   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')

package/tests/tokens.test.mjs

@@ -23,22 +23,16 @@ test('token CSS includes theme and reduced-motion contracts', async () => {
   assert.match(css, /--noe-primitive-color-mint-100:\s*#[0-9a-f]{6}/i);
 });
 
-test('surface elevation follows the official NOE soft-depth contract', async () => {
-  assert.match(tokens.shadow.light.raised, /rgba\(23, 25, 24, 0\.055\)/);
-  assert.match(tokens.shadow.light.overlay, /rgba\(23, 25, 24, 0\.28\)/);
-  assert.match(tokens.shadow.dark.raised, /rgba\(0, 0, 0, 0\.14\)/);
-  assert.match(tokens.shadow.dark.overlay, /rgba\(0, 0, 0, 0\.42\)/);
+test('surfaces remain flat in every NOE theme', async () => {
+  assert.equal(tokens.shadow.light.raised, 'none');
+  assert.equal(tokens.shadow.light.overlay, 'none');
+  assert.equal(tokens.shadow.dark.raised, 'none');
+  assert.equal(tokens.shadow.dark.overlay, 'none');
 
   const css = await readFile(
     new URL('../packages/design-tokens/src/tokens.css', import.meta.url),
     'utf8',
   );
-  assert.match(
-    css,
-    /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*0 8px 20px rgba\(23, 25, 24, 0\.055\)/,
-  );
-  assert.match(
-    css,
-    /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*0 36px 100px rgba\(0, 0, 0, 0\.42\)/,
-  );
+  assert.match(css, /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*none/);
+  assert.match(css, /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*none/);
 });

package/vitest.config.ts

@@ -2,6 +2,7 @@ import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { playwright } from '@vitest/browser-playwright';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
@@ -46,6 +47,9 @@ export default defineConfig({
         },
       },
       {
+        // Tailwind expands `@import "tailwindcss"` so component browser tests and
+        // visual evidence render with the real NOE utility classes, matching Storybook.
+        plugins: [tailwindcss()],
         optimizeDeps: {
           entries: ['apps/**/*.browser.test.tsx', 'packages/**/*.browser.test.tsx'],
         },
@@ -83,6 +87,7 @@ export default defineConfig({
             provider: playwright(),
             headless: true,
             instances: [{ browser: 'chromium' }],
+            viewport: { width: 1280, height: 900 },
           },
         },
       },