noecosystem-design 0.1.2 → 0.1.3

package/packages/ui/package.json

@@ -21,6 +21,9 @@
     "react-dom": "^19.2.0"
   },
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./bidi": "./src/bidi.tsx",
+    "./button": "./src/button.tsx",
+    "./lib/cn": "./src/lib/cn.ts"
   }
 }

package/packages/ui/src/date-picker.browser.test.tsx

@@ -27,7 +27,7 @@ test('DatePicker click outside closes popover', async () => {
         style={{
           position: 'fixed',
           top: '0px',
-          left: '0px',
+          insetInlineStart: '0px',
           width: '50px',
           height: '50px',
           background: 'red',

package/packages/ui/src/date-picker.tsx

@@ -96,8 +96,7 @@ export function DatePicker({
       setPopoverStyle({
         position: 'fixed',
         top: `${rect.bottom + 8}px`,
-        left: isRtl ? 'auto' : `${rect.left}px`,
-        right: isRtl ? `${window.innerWidth - rect.right}px` : 'auto',
+        insetInlineStart: `${isRtl ? window.innerWidth - rect.right : rect.left}px`,
         zIndex: 'var(--noe-z-index-overlay, 50)',
       });
     };

package/packages/ui/src/gradient-picker.tsx

@@ -42,14 +42,18 @@ export function GradientPicker({
           aria-label="Start color"
           type="color"
           defaultValue={GRADIENT_START}
-          onChange={(e) => onValueChange?.(`linear-gradient(90deg, ${e.target.value}, ${GRADIENT_END})`)}
+          onChange={(e) =>
+            onValueChange?.(`linear-gradient(90deg, ${e.target.value}, ${GRADIENT_END})`)
+          }
           className="size-8 rounded-md border border-border"
         />
         <input
           aria-label="End color"
           type="color"
           defaultValue={GRADIENT_END}
-          onChange={(e) => onValueChange?.(`linear-gradient(90deg, ${GRADIENT_START}, ${e.target.value})`)}
+          onChange={(e) =>
+            onValueChange?.(`linear-gradient(90deg, ${GRADIENT_START}, ${e.target.value})`)
+          }
           className="size-8 rounded-md border border-border"
         />
         <input

package/packages/ui/src/theme-provider.browser.test.tsx

@@ -10,7 +10,9 @@ function PaletteProbe({ storageKey }: { storageKey?: string }) {
   return (
     <div>
       <span data-testid="palette">{palette}</span>
-      <button type="button" onClick={() => setPalette('graphite' as never)}>set graphite</button>
+      <button type="button" onClick={() => setPalette('graphite' as never)}>
+        set graphite
+      </button>
       {storageKey && <span data-testid="storageKey">{storageKey}</span>}
     </div>
   );
@@ -26,7 +28,9 @@ test('default Graphite with no preference', async () => {
     </ThemeProvider>,
   );
   await expect.element(screen.getByTestId('palette')).toHaveTextContent('graphite');
-  await expect.poll(() => document.documentElement.getAttribute('data-noe-palette')).toBe('graphite');
+  await expect
+    .poll(() => document.documentElement.getAttribute('data-noe-palette'))
+    .toBe('graphite');
 });
 
 test('valid stored preference restoration', async () => {
@@ -49,7 +53,9 @@ test('invalid storage and cookie fallback to Graphite', async () => {
   );
   // Should fallback to graphite
   await expect.element(screen.getByTestId('palette')).toHaveTextContent('graphite');
-  await expect.poll(() => document.documentElement.getAttribute('data-noe-palette')).toBe('graphite');
+  await expect
+    .poll(() => document.documentElement.getAttribute('data-noe-palette'))
+    .toBe('graphite');
 });
 
 test('custom paletteStorageKey is honored', async () => {
@@ -84,7 +90,9 @@ test('palette/theme independence in light and dark modes', async () => {
     </ThemeProvider>,
   );
   await expect.element(screen.getByTestId('palette')).toHaveTextContent('graphite');
-  await expect.poll(() => document.documentElement.getAttribute('data-noe-palette')).toBe('graphite');
+  await expect
+    .poll(() => document.documentElement.getAttribute('data-noe-palette'))
+    .toBe('graphite');
   await expect.poll(() => document.documentElement.dataset.theme).toBe('light');
   await expect.element(screen.getByTestId('palette')).toHaveTextContent('graphite');
 });

package/packages/ui/src/theme-provider.tsx

@@ -160,8 +160,12 @@ function applyThemeToDocument(theme: ResolvedTheme) {
   root.style.colorScheme = theme;
   const meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
   if (meta) {
-    const lightFallback = (tokens as unknown as { primitive: { color: { paper: Record<string, string> } } }).primitive?.color?.paper?.['100'] ?? '#f3f0ea';
-    const darkFallback = (tokens as unknown as { primitive: { color: { ink: Record<string, string> } } }).primitive?.color?.ink?.['950'] ?? '#252423';
+    const lightFallback =
+      (tokens as unknown as { primitive: { color: { paper: Record<string, string> } } }).primitive
+        ?.color?.paper?.['100'] ?? '#f3f0ea';
+    const darkFallback =
+      (tokens as unknown as { primitive: { color: { ink: Record<string, string> } } }).primitive
+        ?.color?.ink?.['950'] ?? '#252423';
     const light = meta.getAttribute('data-theme-light') ?? lightFallback;
     const dark = meta.getAttribute('data-theme-dark') ?? darkFallback;
     meta.setAttribute('content', theme === 'light' ? light : dark);
@@ -202,7 +206,8 @@ export function ThemeProvider({
   });
 
   const [palette, setPaletteState] = React.useState<Palette>(() => {
-    if (typeof window === 'undefined') return isPalette(defaultPalette) ? defaultPalette : DEFAULT_PALETTE;
+    if (typeof window === 'undefined')
+      return isPalette(defaultPalette) ? defaultPalette : DEFAULT_PALETTE;
     const stored = readStoredPalette(paletteStorageKey);
     if (stored && isPalette(stored)) return stored;
     if (isPalette(defaultPalette)) return defaultPalette;
@@ -307,7 +312,12 @@ export function ThemeProvider({
 
   React.useEffect(() => {
     const stored = readStoredPalette(paletteStorageKey);
-    const initialPalette = stored && isPalette(stored) ? stored : isPalette(defaultPalette) ? defaultPalette : DEFAULT_PALETTE;
+    const initialPalette =
+      stored && isPalette(stored)
+        ? stored
+        : isPalette(defaultPalette)
+          ? defaultPalette
+          : DEFAULT_PALETTE;
     const validated = isPalette(initialPalette) ? initialPalette : DEFAULT_PALETTE;
     setPaletteState(validated);
     applyPaletteToDocument(validated);
@@ -318,7 +328,11 @@ export function ThemeProvider({
 
   React.useEffect(() => {
     const onStorage = (event: StorageEvent) => {
-      if (event.key === paletteStorageKey || event.key === PALETTE_STORAGE_KEY || event.key === PALETTE_COOKIE_KEY) {
+      if (
+        event.key === paletteStorageKey ||
+        event.key === PALETTE_STORAGE_KEY ||
+        event.key === PALETTE_COOKIE_KEY
+      ) {
         if (isPalette(event.newValue)) {
           setPaletteState(event.newValue as Palette);
           applyPaletteToDocument(event.newValue as Palette);

package/packages/workflow-ui/src/workflow-canvas.tsx

@@ -48,4 +48,4 @@ export function WorkflowCanvas({
       ) : null}
     </section>
   );
-}
+}

package/packages/workflow-ui/src/workflow-node.tsx

@@ -58,4 +58,4 @@ export function WorkflowNode({
       </div>
     </article>
   );
-}
+}

package/scripts/enrich-registry-payloads.mjs

@@ -46,9 +46,15 @@ for (const item of manifest.items.filter(
         ? ['DirectionProvider']
         : [],
     // Dependencies — merge manifest and payload, keeping externally installable npm packages; workspace @noe/* are satisfied via included files/registryDependencies
-    registryDependencies: [...new Set([...(item.registryDependencies || []), ...(payload.registryDependencies || [])])],
-    dependencies: [...new Set([...(item.dependencies || []), ...(payload.dependencies || [])])].filter((d) => !d.startsWith('@noe/')),
-    peerDependencies: [...new Set([...(item.peerDependencies || []), ...(payload.peerDependencies || [])])],
+    registryDependencies: [
+      ...new Set([...(item.registryDependencies || []), ...(payload.registryDependencies || [])]),
+    ],
+    dependencies: [
+      ...new Set([...(item.dependencies || []), ...(payload.dependencies || [])]),
+    ].filter((d) => !d.startsWith('@noe/')),
+    peerDependencies: [
+      ...new Set([...(item.peerDependencies || []), ...(payload.peerDependencies || [])]),
+    ],
     // RTL/i18n
     rtl: item.internationalization?.rtl || 'required',
     i18n: {

package/scripts/fix-registry-closure.mjs

@@ -7,7 +7,8 @@ const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 function extractImports(content) {
   const imports = [];
   for (const m of content.matchAll(/from\s+['"]([^'"]+)['"]/g)) imports.push(m[1]);
-  for (const m of content.matchAll(/import\s+['"]([^'"]+)['"]/g)) if (!imports.includes(m[1])) imports.push(m[1]);
+  for (const m of content.matchAll(/import\s+['"]([^'"]+)['"]/g))
+    if (!imports.includes(m[1])) imports.push(m[1]);
   return imports;
 }
 

package/scripts/generate-manifest.mjs

@@ -764,7 +764,11 @@ function defaultEnrichment(auditItem) {
     deps.push('@noe/icons');
   if (auditItem.id === 'filter-bar') registryDeps.push('input');
   // Hard-coded icon consumers discovered via audit (calendar, inline-cta, date-picker)
-  if (auditItem.id === 'calendar' || auditItem.id === 'inline-cta' || auditItem.id === 'date-picker') {
+  if (
+    auditItem.id === 'calendar' ||
+    auditItem.id === 'inline-cta' ||
+    auditItem.id === 'date-picker'
+  ) {
     if (!deps.includes('@noe/icons')) deps.push('@noe/icons');
   }
 

package/scripts/validate-manifest.mjs

@@ -292,7 +292,9 @@ if (errors === 0) pass('semantic search fields');
 // 13. Source-file and payload existence
 {
   let missing = 0;
-  for (const item of manifest.items.filter((i) => i.status === 'available' || i.status === 'partial')) {
+  for (const item of manifest.items.filter(
+    (i) => i.status === 'available' || i.status === 'partial',
+  )) {
     if (!item.registryItem) {
       fail(`available/partial ${item.id} missing registryItem`);
       errors++;
@@ -323,7 +325,9 @@ if (errors === 0) pass('semantic search fields');
 // 14. Registry payload closure (relative imports must be included)
 {
   let closureErrors = 0;
-  for (const item of manifest.items.filter((i) => i.status === 'available' || i.status === 'partial')) {
+  for (const item of manifest.items.filter(
+    (i) => i.status === 'available' || i.status === 'partial',
+  )) {
     if (!item.registryItem) continue;
     const payloadPath = path.join(root, `packages/registry/r/${item.registryItem}.json`);
     let payload;
@@ -375,7 +379,9 @@ if (errors === 0) pass('semantic search fields');
               }
             });
           // For simplicity, if not in current payload, check if it's in any other payload that is a dependency (we already include via files)
-          fail(`closure: ${item.registryItem} ${f.path} imports '${imp}' -> ${resolved} not in payload`);
+          fail(
+            `closure: ${item.registryItem} ${f.path} imports '${imp}' -> ${resolved} not in payload`,
+          );
           errors++;
           closureErrors++;
         }
@@ -390,7 +396,9 @@ if (errors === 0) pass('semantic search fields');
   let missingStory = 0;
   const storyFiles = new Set();
   // Collect story ids from filesystem (reusing earlier logic would duplicate, but we check file existence directly)
-  for (const item of manifest.items.filter((i) => i.status === 'available' || i.status === 'partial')) {
+  for (const item of manifest.items.filter(
+    (i) => i.status === 'available' || i.status === 'partial',
+  )) {
     if (!item.storyId) {
       fail(`available/partial ${item.id} missing storyId`);
       errors++;
@@ -417,14 +425,18 @@ if (errors === 0) pass('semantic search fields');
 // 16. Install command correctness
 {
   let badInstall = 0;
-  for (const item of manifest.items.filter((i) => i.status === 'available' || i.status === 'partial')) {
+  for (const item of manifest.items.filter(
+    (i) => i.status === 'available' || i.status === 'partial',
+  )) {
     if (!item.registryItem) continue;
     const payloadPath = path.join(root, `packages/registry/r/${item.registryItem}.json`);
     try {
       const payload = await json(payloadPath);
       const expected = `pnpm dlx shadcn@latest add @noe/${item.registryItem}`;
       if (payload.install !== expected) {
-        fail(`install command mismatch for ${item.registryItem}: expected "${expected}" got "${payload.install}"`);
+        fail(
+          `install command mismatch for ${item.registryItem}: expected "${expected}" got "${payload.install}"`,
+        );
         errors++;
         badInstall++;
       }
@@ -443,7 +455,9 @@ if (errors === 0) pass('semantic search fields');
       errors++;
       plannedLeak++;
     }
-    const rPath = item.registryItem ? path.join(root, `packages/registry/r/${item.registryItem}.json`) : null;
+    const rPath = item.registryItem
+      ? path.join(root, `packages/registry/r/${item.registryItem}.json`)
+      : null;
     if (rPath) {
       try {
         await stat(rPath);
@@ -462,7 +476,10 @@ if (errors === 0) pass('semantic search fields');
   // This check ensures manifest correctly marks preview contract via status
   let badPreview = 0;
   for (const item of manifest.items) {
-    if (item.status === 'planned' && item.examples.some((e) => e.files.some((f) => f.includes('stories')))) {
+    if (
+      item.status === 'planned' &&
+      item.examples.some((e) => e.files.some((f) => f.includes('stories')))
+    ) {
       // Planned items should not have interactive story files that imply implementation
       // We allow story files for planned only if they are spec placeholders — currently all planned share generic stories, so we skip
     }

package/scripts/verify-registry-consumer.mjs

@@ -160,11 +160,22 @@ async function testConsumer({ name, rsc, items }) {
     await run('pnpm', ['install'], { cwd: consumer });
 
     // Batch install all items in one shadcn invocation (serial but batched for speed) — still verifies every payload individually
-    console.log(`\n[${name}] Installing ${items.length} payloads: ${items.slice(0, 3).join(', ')}...`);
+    console.log(
+      `\n[${name}] Installing ${items.length} payloads: ${items.slice(0, 3).join(', ')}...`,
+    );
     try {
       const { stdout, stderr } = await run(
         'pnpm',
-        ['dlx', 'shadcn@latest', 'add', ...items.map((i) => `@noe/${i}`), '--yes', '--overwrite', '--cwd', consumer],
+        [
+          'dlx',
+          'shadcn@latest',
+          'add',
+          ...items.map((i) => `@noe/${i}`),
+          '--yes',
+          '--overwrite',
+          '--cwd',
+          consumer,
+        ],
         { cwd: root },
       );
       if (stdout) process.stdout.write(stdout);
@@ -180,11 +191,18 @@ async function testConsumer({ name, rsc, items }) {
         const files = await walk(consumer);
         let payloadCheck;
         try {
-          payloadCheck = JSON.parse(await readFile(path.join(root, `packages/registry/r/${item}.json`), 'utf8'));
+          payloadCheck = JSON.parse(
+            await readFile(path.join(root, `packages/registry/r/${item}.json`), 'utf8'),
+          );
         } catch {}
-        const expectedBasenames = payloadCheck ? payloadCheck.files.map((f) => path.basename(f.path)) : [item];
+        const expectedBasenames = payloadCheck
+          ? payloadCheck.files.map((f) => path.basename(f.path))
+          : [item];
         const found = files.find((f) => expectedBasenames.some((b) => f.endsWith(b)));
-        assert.ok(found, `[${name}] shadcn did not install ${item}; expected one of ${expectedBasenames.join(', ')}, found: ${files.slice(0, 30).join(', ')}`);
+        assert.ok(
+          found,
+          `[${name}] shadcn did not install ${item}; expected one of ${expectedBasenames.join(', ')}, found: ${files.slice(0, 30).join(', ')}`,
+        );
         console.log(`[${name}] Verified ${item} -> ${found}`);
         for (const pf of payloadCheck?.files || []) {
           const targetPath = pf.target || pf.path;
@@ -231,7 +249,10 @@ async function testConsumer({ name, rsc, items }) {
     }
 
     // Build via vite to satisfy production build requirement — per-item import verification already done via tsc
-    await writeFile(path.join(consumer, 'src/entry.tsx'), `import * as React from 'react';\nexport const ok = true;\n`);
+    await writeFile(
+      path.join(consumer, 'src/entry.tsx'),
+      `import * as React from 'react';\nexport const ok = true;\n`,
+    );
     await run('pnpm', ['exec', 'vite', 'build'], { cwd: consumer });
     console.log(`[${name}] vite build PASS for all ${items.length} items`);
 
@@ -307,7 +328,12 @@ try {
     skipped: planned.length,
     skippedIds: planned,
     installable: available,
-    results: results.map((r) => ({ name: r.name, verified: r.verified, failed: r.failed, failures: r.failures })),
+    results: results.map((r) => ({
+      name: r.name,
+      verified: r.verified,
+      failed: r.failed,
+      failures: r.failures,
+    })),
   };
   await writeFile(
     path.join(root, 'artifacts/registry-consumer-report.json'),

package/tests/e2e/catalog-typography.spec.ts

@@ -3,7 +3,9 @@ import { expect, test } from '@playwright/test';
 import { CATALOG_URL } from '../../playwright.config';
 
 test.describe('Catalog locale typography', () => {
-  test('Persian locale waits for IRANYekanX and renders Persian with correct font', async ({ page }) => {
+  test('Persian locale waits for IRANYekanX and renders Persian with correct font', async ({
+    page,
+  }) => {
     await page.goto(`${CATALOG_URL}?locale=fa`);
     // Wait for effectiveLocale to become fa (font ready) — html lang becomes fa only after font check passes
     await expect(page.locator('html')).toHaveAttribute('lang', 'fa', { timeout: 10000 });
@@ -28,7 +30,8 @@ test.describe('Catalog locale typography', () => {
     // Find an English technical value inside the Persian page (e.g., Bidi preview's TechnicalValue)
     const englishInRtl = page.locator('text=a1b2c3d4').first();
     // If not found, fallback to any LTR isolated element
-    const target = (await englishInRtl.count()) > 0 ? englishInRtl : page.locator('[dir="ltr"]').first();
+    const target =
+      (await englishInRtl.count()) > 0 ? englishInRtl : page.locator('[dir="ltr"]').first();
     await expect(target).toBeVisible();
     const fontFamily = await target.evaluate((el) => getComputedStyle(el).fontFamily);
     // Should NOT be IRANYekanX, should be SF Pro or fallback

package/tsconfig.base.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": [
-      "ES2022",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "jsx": "react-jsx",
@@ -19,51 +15,21 @@
     "declarationMap": true,
     "sourceMap": true,
     "paths": {
-      "@noe/design-tokens": [
-        "./packages/design-tokens/src/index.ts"
-      ],
-      "@noe/design-tokens/*": [
-        "./packages/design-tokens/src/*"
-      ],
-      "@noe/design-tokens/palette": [
-        "./packages/design-tokens/src/palette.ts"
-      ],
-      "@noe/ui": [
-        "./packages/ui/src/index.ts"
-      ],
-      "@noe/ui/*": [
-        "./packages/ui/src/*"
-      ],
-      "@noe/i18n": [
-        "./packages/i18n/src/index.ts"
-      ],
-      "@noe/i18n/*": [
-        "./packages/i18n/src/*"
-      ],
-      "@noe/data-ui": [
-        "./packages/data-ui/src/index.ts"
-      ],
-      "@noe/data-ui/*": [
-        "./packages/data-ui/src/*"
-      ],
-      "@noe/ai-ui": [
-        "./packages/ai-ui/src/index.ts"
-      ],
-      "@noe/ai-ui/*": [
-        "./packages/ai-ui/src/*"
-      ],
-      "@noe/workflow-ui": [
-        "./packages/workflow-ui/src/index.ts"
-      ],
-      "@noe/workflow-ui/*": [
-        "./packages/workflow-ui/src/*"
-      ],
-      "@noe/icons": [
-        "./packages/icons/src/index.tsx"
-      ],
-      "@noe/icons/*": [
-        "./packages/icons/src/*"
-      ]
+      "@noe/design-tokens": ["./packages/design-tokens/src/index.ts"],
+      "@noe/design-tokens/*": ["./packages/design-tokens/src/*"],
+      "@noe/design-tokens/palette": ["./packages/design-tokens/src/palette.ts"],
+      "@noe/ui": ["./packages/ui/src/index.ts"],
+      "@noe/ui/*": ["./packages/ui/src/*"],
+      "@noe/i18n": ["./packages/i18n/src/index.ts"],
+      "@noe/i18n/*": ["./packages/i18n/src/*"],
+      "@noe/data-ui": ["./packages/data-ui/src/index.ts"],
+      "@noe/data-ui/*": ["./packages/data-ui/src/*"],
+      "@noe/ai-ui": ["./packages/ai-ui/src/index.ts"],
+      "@noe/ai-ui/*": ["./packages/ai-ui/src/*"],
+      "@noe/workflow-ui": ["./packages/workflow-ui/src/index.ts"],
+      "@noe/workflow-ui/*": ["./packages/workflow-ui/src/*"],
+      "@noe/icons": ["./packages/icons/src/index.tsx"],
+      "@noe/icons/*": ["./packages/icons/src/*"]
     }
   }
-}
+}