noecosystem-design 0.2.3 → 0.4.0

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

@@ -27,6 +27,7 @@ test('finance app frame keeps a flat, logical RTL sidebar structure', async () =
                 ],
               },
             ]}
+            wrapLabels
           />
         }
         variant="finance"
@@ -43,5 +44,10 @@ test('finance app frame keeps a flat, logical RTL sidebar structure', async () =
     .element(screen.getByRole('link', { name: 'داشبورد' }))
     .toHaveAttribute('aria-current', 'page');
   await expect.element(screen.getByTestId('dashboard-icon')).toBeVisible();
+  await expect.element(screen.getByText('داشبورد')).toHaveClass('whitespace-normal');
   await expect.element(screen.getByRole('main')).toHaveAttribute('id', 'finance-main');
+  const layoutGrid = frame.element().querySelector(':scope > div');
+  expect(layoutGrid).not.toBeNull();
+  expect(layoutGrid?.getAttribute('data-has-inspector')).toBeNull();
+  expect(layoutGrid?.className).not.toContain('_18rem');
 });

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

@@ -42,9 +42,16 @@ export function AppFrame({
         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]',
+            ? cn(
+                'lg:grid-cols-[17.5rem_minmax(0,1fr)]',
+                inspector && 'xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]',
+              )
+            : cn(
+                'lg:grid-cols-[15rem_minmax(0,1fr)]',
+                inspector && 'xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+              ),
         )}
+        data-has-inspector={inspector ? true : undefined}
       >
         {mobileNavigation ? (
           <nav

package/packages/ui/src/badge.tsx

@@ -8,14 +8,14 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-accent/30 bg-accent/10 text-accent',
+        default: 'border-accent/30 bg-accent/10 text-foreground',
         outline: 'border-border bg-transparent text-foreground',
         secondary: 'border-transparent bg-muted text-foreground',
-        destructive: 'border-destructive/30 bg-destructive/10 text-destructive',
+        destructive: 'border-destructive/30 bg-destructive/10 text-foreground',
         info: 'border-info/30 bg-info/10 text-info',
         success: 'border-success/30 bg-success/10 text-success',
-        warning: 'border-warning/40 bg-warning/15 text-warning-foreground',
-        error: 'border-destructive/30 bg-destructive/10 text-destructive',
+        warning: 'border-warning/40 bg-warning/15 text-foreground',
+        error: 'border-destructive/30 bg-destructive/10 text-foreground',
       },
     },
     defaultVariants: {

package/packages/ui/src/calendar.tsx

@@ -317,7 +317,7 @@ export function Calendar({
                             isSelected
                               ? 'bg-accent text-accent-foreground'
                               : isToday
-                                ? 'border border-accent text-accent'
+                                ? 'border border-accent text-foreground'
                                 : '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/code.tsx

@@ -105,7 +105,9 @@ export function Terminal({
           <span
             className={cn(
               'block',
-              line.stream === 'stderr' ? 'text-destructive' : 'text-background/90',
+              line.stream === 'stderr'
+                ? 'text-[var(--noe-primitive-color-coral-400)]'
+                : 'text-background/90',
             )}
             data-stream={line.stream ?? 'stdout'}
             key={line.key}

package/packages/ui/src/field.tsx

@@ -97,7 +97,7 @@ export function FieldError({
 }: React.ComponentProps<typeof FieldPrimitive.Error>) {
   return (
     <FieldPrimitive.Error
-      className={cn('text-xs leading-normal text-destructive', className)}
+      className={cn('text-xs font-medium leading-normal text-foreground', className)}
       data-slot="field-error"
       {...props}
     />

package/packages/ui/src/file-uploader.tsx

@@ -11,7 +11,7 @@ export function FileUploader({ className, ...props }: React.ComponentProps<'div'
       {...props}
     >
       Drag files here or{' '}
-      <button type="button" className="text-accent">
+      <button type="button" className="font-medium text-foreground underline">
         browse
       </button>
     </div>

package/packages/ui/src/progress-steps.tsx

@@ -54,7 +54,7 @@ export function ProgressSteps({
               isCompleted
                 ? 'border-success/20 bg-success/10 text-success'
                 : isCurrent
-                  ? 'border-accent bg-accent/10 text-accent'
+                  ? 'border-accent bg-accent/10 text-foreground'
                   : 'border-border bg-surface text-muted-foreground',
             )}
           >

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

@@ -22,11 +22,14 @@ export interface SidebarNavigationSection {
 export interface SidebarNavigationProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
   label: string;
   sections: readonly SidebarNavigationSection[];
+  /** Allow long bilingual labels to wrap in dense finance navigation. */
+  wrapLabels?: boolean;
 }
 
 export function SidebarNavigation({
   label,
   sections,
+  wrapLabels = false,
   className,
   ...props
 }: SidebarNavigationProps) {
@@ -70,7 +73,14 @@ export function SidebarNavigation({
                       {item.icon}
                     </span>
                   ) : null}
-                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  <span
+                    className={cn(
+                      'min-w-0 flex-1',
+                      wrapLabels ? 'whitespace-normal break-words' : 'truncate',
+                    )}
+                  >
+                    {item.label}
+                  </span>
                   {item.endAdornment ? (
                     <span className="ms-auto shrink-0 text-current">{item.endAdornment}</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/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 },
           },
         },
       },