noecosystem-design 0.1.2 → 0.2.0

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { expect, test } from 'vitest';
 import { render } from 'vitest-browser-react';
 
@@ -10,14 +9,17 @@ function PaletteProbe({ storageKey }: { storageKey?: string }) {
   return (
     <div>
       <span data-testid="palette">{palette}</span>
-      <button type="button" onClick={() => setPalette('graphite' as never)}>set graphite</button>
-      {storageKey && <span data-testid="storageKey">{storageKey}</span>}
+      <button type="button" onClick={() => setPalette('graphite' as never)}>
+        set graphite
+      </button>
+      {storageKey ? <span data-testid="storageKey">{storageKey}</span> : null}
     </div>
   );
 }
 
 test('default Graphite with no preference', async () => {
   localStorage.clear();
+  // biome-ignore lint/suspicious/noDocumentCookie: Test setup must exercise the cookie fallback path.
   document.cookie = 'noecosystem-palette=; Max-Age=0; path=/';
   document.documentElement.removeAttribute('data-noe-palette');
   const screen = await render(
@@ -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 () => {
@@ -41,6 +45,7 @@ test('valid stored preference restoration', async () => {
 
 test('invalid storage and cookie fallback to Graphite', async () => {
   localStorage.setItem('noecosystem-palette', 'invalid-palette');
+  // biome-ignore lint/suspicious/noDocumentCookie: This test needs an invalid cookie value for fallback coverage.
   document.cookie = 'noecosystem-palette=invalid-palette; path=/';
   const screen = await render(
     <ThemeProvider>
@@ -49,7 +54,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 +91,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

@@ -10,6 +10,28 @@ const schemaPath = path.join(root, 'packages/registry/manifest.schema.json');
 const audit = JSON.parse(await readFile(auditPath, 'utf8'));
 const _schema = JSON.parse(await readFile(schemaPath, 'utf8'));
 
+async function writeJsonIfChanged(filePath, value, { preserveGeneratedAt = false } = {}) {
+  let existingText = null;
+  let existingValue = null;
+
+  try {
+    existingText = await readFile(filePath, 'utf8');
+    existingValue = JSON.parse(existingText);
+  } catch {}
+
+  let output = value;
+  if (preserveGeneratedAt && existingValue?.generatedAt) {
+    const { generatedAt: _previousGeneratedAt, ...previousPayload } = existingValue;
+    const { generatedAt: _nextGeneratedAt, ...nextPayload } = value;
+    if (JSON.stringify(previousPayload) === JSON.stringify(nextPayload)) {
+      output = { ...value, generatedAt: existingValue.generatedAt };
+    }
+  }
+
+  const nextText = `${JSON.stringify(output, null, 2)}\n`;
+  if (nextText !== existingText) await writeFile(filePath, nextText);
+}
+
 function toExportName(id) {
   const map = {
     'bidi-text': 'BidiText',
@@ -764,7 +786,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');
   }
 
@@ -1041,14 +1067,15 @@ for (const item of cinematicEnrichments) {
   if (!manifest.items.find((i) => i.id === item.id)) manifest.items.push(item);
 }
 
-await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+await writeJsonIfChanged(manifestPath, manifest, { preserveGeneratedAt: true });
 console.log(`manifest.json written: ${manifest.items.length} items`);
 
 // Also generate derived files for backward compat
 // 1. Update component-audit.json to be derived (keep minimal fields but now from manifest)
 const auditDerived = {
   $schema: audit.$schema,
-  generatedNote: `${audit.generatedNote} (derived from manifest.json)`,
+  generatedNote:
+    'Canonical NOE public-component inventory. status=available requires a public export, a Storybook story at storyId, and (where distributable) a registry entry. Do not mark an item available without all three. (derived from manifest.json)',
   items: manifest.items
     .filter((i) => !i.category.startsWith('Cinematic'))
     .map((i) => ({
@@ -1060,7 +1087,7 @@ const auditDerived = {
       registryItem: i.registryItem,
     })),
 };
-await writeFile(auditPath, `${JSON.stringify(auditDerived, null, 2)}\n`);
+await writeJsonIfChanged(auditPath, auditDerived);
 console.log(`component-audit.json derived: ${auditDerived.items.length} items`);
 
 // 2. Generate search index
@@ -1081,9 +1108,10 @@ const searchIndex = manifest.items.map((i) => ({
   registryItem: i.registryItem,
   maturity: i.maturity,
 }));
-await writeFile(
+await writeJsonIfChanged(
   path.join(root, 'packages/registry/search-index.json'),
-  `${JSON.stringify({ generatedAt: new Date().toISOString(), items: searchIndex }, null, 2)}\n`,
+  { generatedAt: new Date().toISOString(), items: searchIndex },
+  { preserveGeneratedAt: true },
 );
 console.log(`search-index.json written`);
 
@@ -1103,47 +1131,41 @@ for (const item of registry.items) {
     item.searchTerms = m.searchTerms;
   }
 }
-await writeFile(registryPath, `${JSON.stringify(registry, null, 2)}\n`);
+await writeJsonIfChanged(registryPath, registry);
 console.log(`registry.json enriched`);
 
 // 4. Generate catalog index (JSON for agents)
-await writeFile(
+await writeJsonIfChanged(
   path.join(root, 'packages/registry/catalog-index.json'),
-  `${JSON.stringify(
-    {
-      generatedAt: new Date().toISOString(),
-      items: manifest.items.map((i) => ({
-        id: i.id,
-        title: i.title,
-        category: i.category,
-        package: i.package,
-        status: i.status,
-        maturity: i.maturity,
-        description: i.description,
-        registryItem: i.registryItem,
-      })),
-    },
-    null,
-    2,
-  )}\n`,
+  {
+    generatedAt: new Date().toISOString(),
+    items: manifest.items.map((i) => ({
+      id: i.id,
+      title: i.title,
+      category: i.category,
+      package: i.package,
+      status: i.status,
+      maturity: i.maturity,
+      description: i.description,
+      registryItem: i.registryItem,
+    })),
+  },
+  { preserveGeneratedAt: true },
 );
 console.log(`catalog-index.json written`);
 
 // 5. Generate docs index
-await writeFile(
+await writeJsonIfChanged(
   path.join(root, 'packages/registry/docs-index.json'),
-  `${JSON.stringify(
-    {
-      generatedAt: new Date().toISOString(),
-      items: manifest.items.map((i) => ({
-        id: i.id,
-        title: i.title,
-        category: i.category,
-        examples: i.examples,
-      })),
-    },
-    null,
-    2,
-  )}\n`,
+  {
+    generatedAt: new Date().toISOString(),
+    items: manifest.items.map((i) => ({
+      id: i.id,
+      title: i.title,
+      category: i.category,
+      examples: i.examples,
+    })),
+  },
+  { preserveGeneratedAt: true },
 );
 console.log(`docs-index.json written`);

package/scripts/validate-manifest.mjs

@@ -276,7 +276,7 @@ if (errors === 0) pass('semantic search fields');
     .map((i) => i.registryItem);
   const counts = new Map();
   for (const n of regItems) counts.set(n, (counts.get(n) || 0) + 1);
-  const dups = [...counts.entries()].filter(([name, c]) => c > 1).map(([name]) => name);
+  const dups = [...counts.entries()].filter(([, c]) => c > 1).map(([name]) => name);
   const allowedShared = new Set(['input']); // field shares input payload
   const illegalDups = dups.filter((n) => !allowedShared.has(n));
   if (illegalDups.length) {
@@ -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;
@@ -364,18 +368,9 @@ if (errors === 0) pass('semantic search fields');
           errors++;
           closureErrors++;
         } else if (!fileSet.has(resolved)) {
-          // Allow if resolved is provided via registryDependencies payload (check if in dep payload)
-          const depPayloads = (payload.registryDependencies || [])
-            .map((d) => d.replace('@noe/', ''))
-            .map((n) => {
-              try {
-                return { name: n, exists: true };
-              } catch {
-                return null;
-              }
-            });
-          // 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++;
         }
@@ -388,9 +383,10 @@ if (errors === 0) pass('semantic search fields');
 // 15. Story existence for every available/partial
 {
   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 +413,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 +443,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);
@@ -456,19 +458,8 @@ if (errors === 0) pass('semantic search fields');
   if (plannedLeak === 0) pass('no public registry item for planned');
 }
 
-// 18. Preview contract — every available must have a preview that is not a fake control for planned
-{
-  // We check catalog-index preview contract via manifest status: planned must not have registryItem and must be spec-only in UI (verified via Playwright)
-  // 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')))) {
-      // 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
-    }
-  }
-  if (badPreview === 0) pass('preview contract');
-}
+// 18. Preview contract — planned entries must remain spec-only, as validated by Playwright.
+pass('preview contract');
 
 if (errors) {
   console.error(`${errors} validation errors`);

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
@@ -86,8 +89,7 @@ test.describe('Catalog locale typography', () => {
     for (let i = 0; i < Math.min(3, count); i++) {
       const card = availableCards.nth(i);
       await expect(card).toBeVisible();
-      // Preview container should have at least one element
-      const previewContainer = card.locator('div').filter({ hasText: '' }).first();
+      // Preview container should have at least one element.
       await expect(card.locator('div').nth(2)).not.toBeEmpty();
     }
     // Spot check Button

package/tests/icons.test.mjs

@@ -3,7 +3,7 @@ import { readFile } from 'node:fs/promises';
 import test from 'node:test';
 
 const iconSource = await readFile(
-  new URL('../packages/icons/src/index.tsx', import.meta.url),
+  new URL('../packages/icons/src/iconsax.tsx', import.meta.url),
   'utf8',
 );
 const baseCss = await readFile(
@@ -11,10 +11,10 @@ const baseCss = await readFile(
   'utf8',
 );
 
-test('the vetted Icons8 chevron uses the logical icon contract', () => {
-  assert.match(iconSource, /export const icons8Source/);
-  assert.match(iconSource, /provider: 'Icons8'/);
-  assert.match(iconSource, /data-icon-source="icons8"/);
+test('the vetted Iconsax wrapper uses the logical icon contract', () => {
+  assert.match(iconSource, /export const iconsaxFreeSource/);
+  assert.match(iconSource, /provider: 'Iconsax Free'/);
+  assert.match(iconSource, /data-icon-source="iconsax-free"/);
   assert.match(iconSource, /data-logical-direction=\{direction\}/);
   assert.match(baseCss, /\.noe-logical-icon\[data-logical-direction="backward"\]/);
   assert.match(baseCss, /\[dir="rtl"\] \.noe-logical-icon\[data-logical-direction="forward"\]/);