noecosystem-design 0.1.0

package/packages/ui/src/verification-code.tsx

@@ -0,0 +1,27 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export function VerificationCode({
+  className,
+  length = 6,
+  ...props
+}: React.ComponentProps<'fieldset'> & { length?: number }) {
+  return (
+    <fieldset
+      aria-label="Verification code"
+      className={cn('flex gap-1.5 border-0 p-0', className)}
+      data-slot="verification-code"
+      {...props}
+    >
+      <legend className="sr-only">Verification code</legend>
+      {Array.from({ length }).map((_, i) => (
+        <input
+          key={`digit-${i}`}
+          aria-label={`Digit ${i + 1}`}
+          maxLength={1}
+          className="size-10 rounded-md border border-border bg-background text-center text-sm"
+          dir="ltr"
+        />
+      ))}
+    </fieldset>
+  );
+}

package/packages/ui/src/verification-page.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface VerificationPageProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function VerificationPage({ className, children, ...props }: VerificationPageProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="verification-page"
+      {...props}
+    >
+      {children ?? 'Verification Page'}
+    </div>
+  );
+}

package/packages/ui/src/video-player.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface VideoPlayerProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function VideoPlayer({ className, children, ...props }: VideoPlayerProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="video-player"
+      {...props}
+    >
+      {children ?? 'Video Player'}
+    </div>
+  );
+}

package/packages/workflow-ui/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@noe/workflow-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@noe/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  }
+}

package/packages/workflow-ui/src/index.ts

@@ -0,0 +1,2 @@
+export * from './workflow-canvas';
+export * from './workflow-node';

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

@@ -0,0 +1,51 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+
+export function WorkflowCanvas({
+  label,
+  toolbar,
+  children,
+  inspector,
+  className,
+}: {
+  label: string;
+  toolbar?: React.ReactNode;
+  children: React.ReactNode;
+  inspector?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      aria-label={label}
+      className={cn(
+        'grid min-h-96 grid-rows-[auto_1fr] overflow-hidden rounded-lg border border-border bg-surface-raised',
+        inspector && 'md:grid-cols-[1fr_18rem]',
+        className,
+      )}
+      data-slot="workflow-canvas-shell"
+    >
+      {toolbar ? (
+        <div
+          className="flex items-center gap-2 border-b border-border bg-surface-sunken/60 px-4 py-2.5 md:col-span-2"
+          data-slot="workflow-toolbar"
+        >
+          {toolbar}
+        </div>
+      ) : null}
+      <div
+        className="relative min-h-0 overflow-auto bg-[radial-gradient(var(--noe-color-border)_1px,transparent_1px)] [background-size:20px_20px] p-6"
+        data-slot="workflow-canvas"
+      >
+        {children}
+      </div>
+      {inspector ? (
+        <aside
+          className="flex min-h-0 flex-col gap-3 overflow-auto border-border border-t p-4 md:border-s md:border-t-0"
+          data-slot="workflow-inspector"
+        >
+          {inspector}
+        </aside>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,61 @@
+import type * as React from 'react';
+import { TechnicalValue } from '@noe/ui/bidi';
+import { cn } from '@noe/ui/lib/cn';
+
+export type WorkflowNodeKind = 'trigger' | 'agent' | 'tool' | 'condition' | 'output';
+
+const kindAccent: Record<WorkflowNodeKind, string> = {
+  trigger: 'bg-info',
+  agent: 'bg-accent',
+  tool: 'bg-success',
+  condition: 'bg-warning',
+  output: 'bg-muted-foreground',
+};
+
+export function WorkflowNode({
+  kind,
+  title,
+  subtitle,
+  selected,
+  technicalId,
+  className,
+}: {
+  kind: WorkflowNodeKind;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  selected?: boolean;
+  technicalId?: string;
+  className?: string;
+}) {
+  return (
+    <article
+      className={cn(
+        'inline-flex w-56 items-start gap-2.5 rounded-md border bg-surface-raised p-3 shadow-raised transition-[border-color,box-shadow] duration-(--noe-motion-duration-fast)',
+        selected
+          ? 'border-accent ring-2 ring-focus-ring'
+          : 'border-border hover:border-border-strong',
+        className,
+      )}
+      data-kind={kind}
+      data-selected={selected || undefined}
+      data-slot="workflow-node"
+    >
+      <span
+        aria-hidden="true"
+        className={cn('mt-1 size-2.5 shrink-0 rounded-pill', kindAccent[kind])}
+        data-slot="workflow-node-icon"
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <strong className="truncate text-sm font-medium leading-snug text-foreground">
+          {title}
+        </strong>
+        {subtitle ? (
+          <small className="truncate text-xs text-muted-foreground">{subtitle}</small>
+        ) : null}
+        {technicalId ? (
+          <TechnicalValue className="mt-0.5 block w-fit">{technicalId}</TechnicalValue>
+        ) : null}
+      </div>
+    </article>
+  );
+}

package/playwright.config.ts

@@ -0,0 +1,58 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const PORT = 4173;
+const BASE_URL = `http://127.0.0.1:${PORT}/apps/web/`;
+const CATALOG_PORT = 4174;
+export const CATALOG_URL = `http://127.0.0.1:${CATALOG_PORT}/`;
+
+export default defineConfig({
+  testDir: 'tests/e2e',
+  fullyParallel: false,
+  workers: 1,
+  forbidOnly: true,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [['list'], ['html', { open: 'never', outputFolder: 'playwright-report' }]],
+  use: {
+    baseURL: BASE_URL,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium-en-ltr',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'chromium-fa-rtl',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'chromium-pseudo',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox-en-smoke',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit-en-smoke',
+      use: { ...devices['Desktop iPhone 13'] },
+    },
+  ],
+  webServer: [
+    {
+      command: `python3 -m http.server ${PORT} --directory .`,
+      url: `${BASE_URL}index.html`,
+      reuseExistingServer: false,
+      timeout: 60_000,
+    },
+    {
+      // Serves the real @noe/showcase catalog (tests/e2e/catalog.spec.ts) — the
+      // static apps/web reference above cannot run the React/TSX catalog source.
+      command: `pnpm --filter @noe/showcase exec vite --host 127.0.0.1 --port ${CATALOG_PORT} --strictPort`,
+      url: CATALOG_URL,
+      reuseExistingServer: false,
+      timeout: 60_000,
+    },
+  ],
+});

package/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - apps/*
+  - packages/*
+allowBuilds:
+  esbuild: true

package/registry.json

@@ -0,0 +1,216 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "noe",
+  "homepage": "https://noecosystem.com/",
+  "_status": "legacy — canonical registry is packages/registry/registry.json and packages/registry/manifest.json; this file is shadcn compat and will be removed",
+  "items": [
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "title": "Button",
+      "description": "Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout.",
+      "files": [
+        {
+          "path": "packages/ui/src/button.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/button.tsx"
+        }
+      ]
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "title": "Input and Field",
+      "description": "Accessible form field composition with localized labels, errors, descriptions and technical-input direction policy.",
+      "files": [
+        {
+          "path": "packages/ui/src/field.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/field.tsx"
+        }
+      ]
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "title": "Dialog",
+      "description": "Direction-preserving modal primitive with native focus semantics and portal propagation.",
+      "files": [
+        {
+          "path": "packages/ui/src/dialog.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/dialog.tsx"
+        }
+      ]
+    },
+    {
+      "name": "drawer",
+      "type": "registry:ui",
+      "title": "Drawer",
+      "description": "Logical start/end drawer that resolves against active writing direction and keeps DOM order stable.",
+      "files": [
+        {
+          "path": "packages/ui/src/drawer.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/drawer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "bidi-text",
+      "type": "registry:ui",
+      "title": "Bidi Text",
+      "description": "Mixed-direction content primitives for user text, URLs, hashes, commands and technical identifiers.",
+      "files": [
+        {
+          "path": "packages/ui/src/bidi.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/bidi.tsx"
+        }
+      ]
+    },
+    {
+      "name": "code-block",
+      "type": "registry:ui",
+      "title": "Code and Terminal",
+      "description": "LTR-isolated code, command, terminal and log presentation inside RTL or LTR application chrome.",
+      "files": [
+        {
+          "path": "packages/ui/src/code.tsx",
+          "type": "registry:component",
+          "target": "packages/ui/src/code.tsx"
+        }
+      ]
+    },
+    {
+      "name": "data-table",
+      "type": "registry:ui",
+      "title": "Data Table",
+      "description": "Direction-safe semantic table contract prepared for TanStack Table state adapters.",
+      "files": [
+        {
+          "path": "packages/data-ui/src/data-table.tsx",
+          "type": "registry:component",
+          "target": "packages/data-ui/src/data-table.tsx"
+        }
+      ]
+    },
+    {
+      "name": "metric-card",
+      "type": "registry:ui",
+      "title": "Metric Card",
+      "description": "Quiet operational metric composition with semantic status treatment and localized values.",
+      "files": [
+        {
+          "path": "packages/data-ui/src/metric-card.tsx",
+          "type": "registry:component",
+          "target": "packages/data-ui/src/metric-card.tsx"
+        }
+      ]
+    },
+    {
+      "name": "agent-message",
+      "type": "registry:ui",
+      "title": "Agent Message",
+      "description": "Agent and human message composition with auto-direction runtime content and model identifier isolation.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/agent-message.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/agent-message.tsx"
+        }
+      ]
+    },
+    {
+      "name": "agent-composer",
+      "type": "registry:ui",
+      "title": "Agent Composer",
+      "description": "Accessible multiline agent input with localized placeholder and explicit submit behavior.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/agent-composer.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/agent-composer.tsx"
+        }
+      ]
+    },
+    {
+      "name": "agent-plan",
+      "type": "registry:ui",
+      "title": "Agent Plan",
+      "description": "Queued, running, completed and failed execution-plan steps with progressive disclosure.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/agent-plan.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/agent-plan.tsx"
+        }
+      ]
+    },
+    {
+      "name": "tool-call",
+      "type": "registry:ui",
+      "title": "Tool Call",
+      "description": "Human-readable tool state, scope and result summary with expandable technical detail.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/tool-call.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/tool-call.tsx"
+        }
+      ]
+    },
+    {
+      "name": "approval-request",
+      "type": "registry:ui",
+      "title": "Approval Request",
+      "description": "Human-in-the-loop decision pattern showing target, parameters, consequence and scoped choices.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/approval-request.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/approval-request.tsx"
+        }
+      ]
+    },
+    {
+      "name": "run-inspector",
+      "type": "registry:ui",
+      "title": "Run Inspector",
+      "description": "Compact run status, identifiers, latency, token use and trace details.",
+      "files": [
+        {
+          "path": "packages/ai-ui/src/run-inspector.tsx",
+          "type": "registry:component",
+          "target": "packages/ai-ui/src/run-inspector.tsx"
+        }
+      ]
+    },
+    {
+      "name": "workflow-node",
+      "type": "registry:ui",
+      "title": "Workflow Node",
+      "description": "Agent, tool, trigger, condition and output node visual contract with keyboard focus.",
+      "files": [
+        {
+          "path": "packages/workflow-ui/src/workflow-node.tsx",
+          "type": "registry:component",
+          "target": "packages/workflow-ui/src/workflow-node.tsx"
+        }
+      ]
+    },
+    {
+      "name": "workflow-canvas",
+      "type": "registry:block",
+      "title": "Workflow Canvas",
+      "description": "Accessible workflow canvas shell, toolbar and inspector regions suitable for a React Flow adapter.",
+      "files": [
+        {
+          "path": "packages/workflow-ui/src/workflow-canvas.tsx",
+          "type": "registry:component",
+          "target": "packages/workflow-ui/src/workflow-canvas.tsx"
+        }
+      ]
+    }
+  ]
+}

package/scripts/build-static.mjs

@@ -0,0 +1,68 @@
+import { createHash } from 'node:crypto';
+import { cp, mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const requestedOutput = process.env.NOE_STATIC_OUTPUT_DIR;
+const dist = requestedOutput ? path.resolve(root, requestedOutput) : path.join(root, 'dist');
+
+if (dist === root || !dist.startsWith(`${root}${path.sep}`)) {
+  throw new Error('NOE_STATIC_OUTPUT_DIR must resolve to a directory inside the repository.');
+}
+
+await rm(dist, { recursive: true, force: true });
+await mkdir(dist, { recursive: true });
+for (const relative of ['apps/web', 'packages/design-tokens/src', 'packages/i18n/src']) {
+  await cp(path.join(root, relative), path.join(dist, relative), { recursive: true });
+}
+
+// The registry is published at the same paths declared by components.json:
+// /r/registry.json and /r/{name}.json. Keep package metadata out of this
+// public surface so a static host can serve it without route rewriting.
+const registrySource = path.join(root, 'packages/registry');
+const registryOutput = path.join(dist, 'r');
+await mkdir(registryOutput, { recursive: true });
+await cp(path.join(registrySource, 'registry.json'), path.join(registryOutput, 'registry.json'));
+for (const entry of await readdir(path.join(registrySource, 'r'), { withFileTypes: true })) {
+  if (!entry.isFile() || path.extname(entry.name) !== '.json') continue;
+
+  const sourceItem = JSON.parse(await readFile(path.join(registrySource, 'r', entry.name), 'utf8'));
+  const publishedItem = {
+    ...sourceItem,
+    files: await Promise.all(
+      sourceItem.files.map(async (file) => ({
+        ...file,
+        content: await readFile(path.join(root, file.path), 'utf8'),
+      })),
+    ),
+  };
+  await writeFile(
+    path.join(registryOutput, entry.name),
+    `${JSON.stringify(publishedItem, null, 2)}\n`,
+  );
+}
+async function walk(directory) {
+  const output = [];
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const absolute = path.join(directory, entry.name);
+    if (entry.isDirectory()) output.push(...(await walk(absolute)));
+    else output.push(absolute);
+  }
+  return output;
+}
+const files = await walk(dist);
+const manifest = [];
+for (const file of files) {
+  const data = await readFile(file);
+  manifest.push({
+    path: path.relative(dist, file),
+    bytes: data.length,
+    sha256: createHash('sha256').update(data).digest('hex'),
+  });
+}
+await writeFile(
+  path.join(dist, 'build-manifest.json'),
+  `${JSON.stringify({ generatedAt: new Date().toISOString(), files: manifest }, null, 2)}\n`,
+);
+console.log(`Built ${manifest.length} files in ${dist}`);

package/scripts/capture-visuals.py

@@ -0,0 +1,106 @@
+from __future__ import annotations
+
+import json
+import os
+from pathlib import Path
+import re
+import shutil
+import time
+
+from playwright.sync_api import sync_playwright
+
+ROOT = Path(__file__).resolve().parents[1]
+OUT = ROOT / 'evidence' / 'screenshots'
+OUT.mkdir(parents=True, exist_ok=True)
+for image in OUT.glob('*.png'):
+    image.unlink()
+
+base_html = (ROOT / 'apps/web/index.html').read_text(encoding='utf-8')
+tokens_css = (ROOT / 'packages/design-tokens/src/tokens.css').read_text(encoding='utf-8')
+app_css = (ROOT / 'apps/web/styles.css').read_text(encoding='utf-8')
+app_js = (ROOT / 'apps/web/app.js').read_text(encoding='utf-8')
+base_html = re.sub(r'<link[^>]+tokens\.css[^>]*>', '', base_html)
+base_html = re.sub(r'<link[^>]+styles\.css[^>]*>', '', base_html)
+base_html = re.sub(r'<script[^>]+app\.js[^>]*></script>', '', base_html)
+
+captures: list[dict[str, object]] = []
+for width in (390, 768, 1024, 1280, 1440):
+    height = 844 if width == 390 else 900
+    for locale in ('en', 'fa'):
+        for theme in ('light', 'dark'):
+            captures.append({'name': f'agent-{locale}-{theme}-{width}', 'width': width, 'height': height, 'surface': 'agent', 'locale': locale, 'theme': theme})
+for surface in ('consumer', 'dashboard', 'agent', 'workflow'):
+    captures.append({'name': f'{surface}-en-light-1440', 'width': 1440, 'height': 900, 'surface': surface, 'locale': 'en', 'theme': 'light'})
+    captures.append({'name': f'{surface}-fa-dark-1440', 'width': 1440, 'height': 900, 'surface': surface, 'locale': 'fa', 'theme': 'dark'})
+captures.extend([
+    {'name': 'agent-pseudo-ltr-1024', 'width': 1024, 'height': 900, 'surface': 'agent', 'locale': 'en-XA', 'theme': 'light'},
+    {'name': 'agent-pseudo-rtl-1024', 'width': 1024, 'height': 900, 'surface': 'agent', 'locale': 'ar-XB', 'theme': 'light'},
+])
+
+errors: list[dict[str, str]] = []
+layout_issues: list[dict[str, object]] = []
+try:
+    with sync_playwright() as playwright:
+        executable = os.environ.get('NOE_CHROMIUM_PATH') or shutil.which('chromium')
+        launch_options = {'headless': True, 'args': ['--no-sandbox', '--disable-dev-shm-usage', '--disable-gpu']}
+        if executable:
+            launch_options['executable_path'] = executable
+        browser = playwright.chromium.launch(**launch_options)
+        context = browser.new_context(device_scale_factor=1, reduced_motion='reduce')
+        for capture in captures:
+            page = context.new_page()
+            page.on('pageerror', lambda exception: errors.append({'type': 'pageerror', 'message': str(exception)}))
+            page.on('console', lambda message: errors.append({'type': 'console', 'message': message.text}) if message.type == 'error' else None)
+            page.set_viewport_size({'width': int(capture['width']), 'height': int(capture['height'])})
+            injected = json.dumps({'surface': capture['surface'], 'locale': capture['locale'], 'theme': capture['theme']}, ensure_ascii=False)
+            inline = f'<style>{tokens_css}\n{app_css}</style><script>window.__NOE_CAPTURE__={injected};</script><script>{app_js}</script>'
+            html = base_html.replace('</head>', inline + '</head>')
+            page.set_content(html, wait_until='load', timeout=20_000)
+            page.wait_for_function("document.body.dataset.surface && document.documentElement.dataset.theme", timeout=5_000)
+            audit = page.evaluate("""(expected) => {
+              const tolerance = 1;
+              const problems = [];
+              const root = document.documentElement;
+              if (root.dir !== expected.direction) problems.push({ kind: 'direction', expected: expected.direction, actual: root.dir });
+              if (root.lang !== expected.locale) problems.push({ kind: 'language', expected: expected.locale, actual: root.lang });
+              if (root.scrollWidth > window.innerWidth + tolerance) problems.push({ kind: 'page-horizontal-overflow', scrollWidth: root.scrollWidth, viewportWidth: window.innerWidth });
+              const controls = document.querySelector('.reference-controls');
+              if (controls) {
+                const rect = controls.getBoundingClientRect();
+                if (rect.left < -tolerance || rect.right > window.innerWidth + tolerance) problems.push({ kind: 'reference-controls-outside-viewport', rect: { left: rect.left, right: rect.right, width: rect.width }, viewportWidth: window.innerWidth });
+                const selects = [...controls.querySelectorAll('select')];
+                if (selects.some((element) => { const item = element.getBoundingClientRect(); return item.left < -tolerance || item.right > window.innerWidth + tolerance || item.width < 32; })) problems.push({ kind: 'reference-control-select-unreachable' });
+              }
+              const visibleSurfaces = [...document.querySelectorAll('.surface[data-surface]')].filter((element) => !element.hidden);
+              if (visibleSurfaces.length !== 1 || visibleSurfaces[0]?.dataset.surface !== expected.surface) problems.push({ kind: 'surface-selection', visible: visibleSurfaces.map((element) => element.dataset.surface) });
+              if (expected.surface === 'workflow' && window.innerWidth >= 1024) {
+                const canvas = document.querySelector('.canvas');
+                if (canvas) {
+                  const canvasRect = canvas.getBoundingClientRect();
+                  for (const node of canvas.querySelectorAll('.canvas-node')) {
+                    const rect = node.getBoundingClientRect();
+                    if (rect.left < canvasRect.left - tolerance || rect.right > canvasRect.right + tolerance || rect.top < canvasRect.top - tolerance || rect.bottom > canvasRect.bottom + tolerance) {
+                      problems.push({ kind: 'workflow-node-clipped', node: node.className, rect: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom }, canvas: { left: canvasRect.left, right: canvasRect.right, top: canvasRect.top, bottom: canvasRect.bottom } });
+                    }
+                  }
+                }
+              }
+              return problems;
+            }""", { 'surface': capture['surface'], 'locale': capture['locale'], 'direction': 'rtl' if capture['locale'] in ('fa', 'ar-XB') else 'ltr' })
+            for problem in audit:
+                layout_issues.append({'capture': capture['name'], **problem})
+            page.screenshot(path=str(OUT / f"{capture['name']}.png"), full_page=False, animations='disabled')
+            page.close()
+        context.close()
+        browser.close()
+finally:
+    pass
+
+generated_at = time.strftime('%Y-%m-%dT%H:%M:%SZ', time.gmtime())
+(ROOT / 'evidence' / 'browser-console.json').write_text(json.dumps({'generatedAt': generated_at, 'errors': errors}, indent=2) + '\n', encoding='utf-8')
+(ROOT / 'evidence' / 'layout-audit.json').write_text(json.dumps({'generatedAt': generated_at, 'issues': layout_issues}, indent=2) + '\n', encoding='utf-8')
+if errors:
+    raise SystemExit(f'Browser reported {len(errors)} console/page errors')
+if layout_issues:
+    raise SystemExit(f'Layout audit reported {len(layout_issues)} issues')
+print(f"Captured {len(captures)} screenshots with zero console or layout issues")

package/scripts/capture-visuals.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$ROOT"
+node scripts/build-static.mjs
+PYTHON_BIN="${NOE_PLAYWRIGHT_PYTHON:-python3}"
+if [ -x /opt/pyvenv/bin/python ]; then PYTHON_BIN=/opt/pyvenv/bin/python; fi
+"$PYTHON_BIN" scripts/capture-visuals.py
+node scripts/validate-pngs.mjs
+node scripts/create-visual-index.mjs