noecosystem-design 0.1.0

package/tests/e2e/direction.spec.ts

@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('Persian locale flips document direction and language at the root', async ({ page }) => {
+  await page.goto('?locale=fa&surface=dashboard');
+  const root = page.locator('html');
+  await expect(root).toHaveAttribute('lang', 'fa');
+  await expect(root).toHaveAttribute('dir', 'rtl');
+  await expect(
+    page.getByRole('heading', { name: /Operating overview|نمای کلی عملیات/ }),
+  ).toBeVisible();
+});
+
+test('English locale restores LTR', async ({ page }) => {
+  await page.goto('?locale=en');
+  const root = page.locator('html');
+  await expect(root).toHaveAttribute('lang', 'en');
+  await expect(root).toHaveAttribute('dir', 'ltr');
+});
+
+test('pseudo-RTL locale exposes untranslatable strings and RTL direction', async ({ page }) => {
+  await page.goto('?locale=ar-XB');
+  const root = page.locator('html');
+  await expect(root).toHaveAttribute('dir', 'rtl');
+  const hero = page.locator('[data-i18n="hero.title"]');
+  const text = (await hero.textContent()) ?? '';
+  expect(text.length).toBeGreaterThan(20);
+  expect(text).toMatch(/[\u200F\u202B\u202E\u2066\u2067\u202C]/);
+});
+
+test('pseudo-LTR expands strings while keeping LTR direction', async ({ page }) => {
+  await page.goto('?locale=en-XA');
+  const root = page.locator('html');
+  await expect(root).toHaveAttribute('dir', 'ltr');
+  const hero = page.locator('[data-i18n="hero.title"]');
+  const text = (await hero.textContent()) ?? '';
+  expect(text.length).toBeGreaterThan(40);
+});
+
+test('technical identifiers remain LTR-isolated inside RTL dashboards', async ({ page }) => {
+  await page.goto('?locale=fa&surface=agent');
+  const surface = page.locator('.surface[data-surface="agent"]');
+  const technical = surface.locator('.technical[dir="ltr"], bdi[dir="ltr"]').first();
+  await expect(technical).toBeVisible();
+  const dir = await technical.evaluate((element) =>
+    getComputedStyle(element).getPropertyValue('unicode-bidi'),
+  );
+  expect(['isolate', 'plaintext', 'embed', 'bidi-override']).toContain(dir.trim());
+});
+
+test('table scroll region keeps keyboard access in both directions', async ({ page }) => {
+  for (const locale of ['en', 'fa']) {
+    await page.goto(`?locale=${locale}&surface=dashboard`);
+    const region = page.locator('.table-scroll');
+    await expect(region).toHaveAttribute('tabindex', '0');
+    await region.focus();
+    await expect(region).toBeFocused();
+  }
+});

package/tests/e2e/responsive.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+const VIEWPORTS = [
+  { width: 390, height: 844 },
+  { width: 768, height: 1024 },
+  { width: 1024, height: 768 },
+  { width: 1280, height: 800 },
+  { width: 1440, height: 900 },
+];
+
+const SURFACES = ['consumer', 'dashboard'] as const;
+
+for (const surface of SURFACES) {
+  test.describe(`${surface}: no horizontal overflow across breakpoints`, () => {
+    for (const viewport of VIEWPORTS) {
+      test(`${viewport.width}px`, async ({ page }) => {
+        await page.setViewportSize(viewport);
+        await page.goto(`?surface=${surface}`);
+        await expect(page.locator(`.surface[data-surface="${surface}"]`)).toBeVisible();
+        const overflow = await page.evaluate(
+          () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+        );
+        expect(
+          overflow,
+          `horizontal overflow of ${overflow}px at ${viewport.width}px`,
+        ).toBeLessThanOrEqual(1);
+      });
+    }
+  });
+}

package/tests/e2e/surfaces.spec.ts

@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+
+const SURFACES = [
+  { key: 'consumer', heading: 'Shared foundations. Connected experiences.' },
+  { key: 'dashboard', heading: 'Operating overview' },
+  { key: 'agent', heading: 'Agent workspace' },
+  { key: 'workflow', heading: 'Workflow builder' },
+] as const;
+
+for (const surface of SURFACES) {
+  test(`surface "${surface.key}" renders its landmark content`, async ({ page }) => {
+    await page.goto(`?surface=${surface.key}`);
+    await expect(page.locator(`.surface[data-surface="${surface.key}"]`)).toBeVisible();
+    const surfaceScope = page.locator(`.surface[data-surface="${surface.key}"]`);
+    await expect(surfaceScope.getByRole('heading', { level: 1 }).first()).toContainText(
+      surface.heading,
+    );
+  });
+}
+
+test('hidden surfaces stay out of the accessibility tree', async ({ page }) => {
+  await page.goto('?surface=dashboard');
+  await expect(page.locator('.surface[data-surface="dashboard"]')).toBeVisible();
+  await expect(page.locator('.surface[data-surface="consumer"]')).toBeHidden();
+});
+
+test('skip link moves focus into main content', async ({ page }) => {
+  await page.goto('?');
+  await page.keyboard.press('Tab');
+  await expect(page.getByRole('link', { name: 'Skip to content' })).toBeFocused();
+});
+
+test('hero actions lead to the promised system and progress views', async ({ page }) => {
+  await page.goto('?');
+
+  await page.getByRole('link', { name: 'Explore the system' }).click();
+  await expect(page).toHaveURL(/#foundation$/);
+  await expect(page.locator('#foundation')).toBeVisible();
+
+  await page.getByRole('link', { name: 'View progress' }).click();
+  await expect(page).toHaveURL(/\?surface=dashboard$/);
+  await expect(page.locator('.surface[data-surface="dashboard"]')).toBeVisible();
+});
+
+test('theme toggle switches the document theme token', async ({ page }) => {
+  await page.goto('?theme=light');
+  const root = page.locator('html');
+  await expect(root).toHaveAttribute('data-theme', 'light');
+  await page.getByRole('button', { name: 'Toggle theme' }).click();
+  await expect(root).toHaveAttribute('data-theme', 'dark');
+});

package/tests/i18n.test.mjs

@@ -0,0 +1,36 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  formatDate,
+  formatList,
+  formatNumber,
+  getLocaleMetadata,
+  pseudoLocalize,
+  resolveDirection,
+} from '../packages/i18n/src/runtime.mjs';
+
+test('locale metadata resolves LTR and RTL', () => {
+  assert.equal(getLocaleMetadata('en').direction, 'ltr');
+  assert.equal(getLocaleMetadata('fa').direction, 'rtl');
+  assert.equal(getLocaleMetadata('missing').locale, 'en');
+});
+
+test('direction override is explicit', () => {
+  assert.equal(resolveDirection('fa', 'ltr'), 'ltr');
+  assert.equal(resolveDirection('en', 'rtl'), 'rtl');
+  assert.equal(resolveDirection('fa', 'auto'), 'rtl');
+});
+
+test('pseudo locales expand and isolate', () => {
+  const ltr = pseudoLocalize('Connected systems', 'ltr');
+  const rtl = pseudoLocalize('Connected systems', 'rtl');
+  assert.match(ltr, /^⟦/);
+  assert.ok(ltr.length > 'Connected systems'.length);
+  assert.match(rtl, /‮/);
+});
+
+test('Intl formatting is locale aware', () => {
+  assert.notEqual(formatNumber(123456.7, 'en'), formatNumber(123456.7, 'fa'));
+  assert.ok(formatDate('2026-08-25T00:00:00Z', 'en').length > 3);
+  assert.ok(formatList(['identity', 'data', 'trust'], 'en').includes('and'));
+});

package/tests/icons.test.mjs

@@ -0,0 +1,21 @@
+import assert from 'node:assert/strict';
+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),
+  'utf8',
+);
+const baseCss = await readFile(
+  new URL('../packages/design-tokens/src/base.css', import.meta.url),
+  '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"/);
+  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"\]/);
+});

package/tests/registry-publication.test.mjs

@@ -0,0 +1,88 @@
+import assert from 'node:assert/strict';
+import { execFile } from 'node:child_process';
+import { mkdir, readFile, rm } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { promisify } from 'node:util';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const run = promisify(execFile);
+const publicationBaseUrl = 'https://noecosystem.com/design-system';
+
+function startStaticServer(directory) {
+  const server = createServer(async (request, response) => {
+    const pathname = new URL(request.url, 'http://registry.test').pathname;
+    const relative = pathname.replace(/^\/+/, '');
+    const file = path.resolve(directory, relative);
+
+    if (!relative.startsWith('r/') || !file.startsWith(`${directory}${path.sep}`)) {
+      response.writeHead(404).end();
+      return;
+    }
+
+    try {
+      const body = await readFile(file);
+      response.writeHead(200, { 'content-type': 'application/json; charset=utf-8' }).end(body);
+    } catch {
+      response.writeHead(404).end();
+    }
+  });
+
+  return new Promise((resolve) => {
+    server.listen(0, '127.0.0.1', () => resolve(server));
+  });
+}
+
+test('static build publishes the canonical registry index and item URLs', async () => {
+  const outputName = `.registry-publication-${process.pid}-${Date.now()}`;
+  const output = path.join(root, outputName);
+  await mkdir(output, { recursive: true });
+
+  try {
+    await run(process.execPath, ['scripts/build-static.mjs'], {
+      cwd: root,
+      env: { ...process.env, NOE_STATIC_OUTPUT_DIR: outputName },
+    });
+
+    const sourceIndex = JSON.parse(
+      await readFile(path.join(root, 'packages/registry/registry.json'), 'utf8'),
+    );
+    const components = JSON.parse(await readFile(path.join(root, 'components.json'), 'utf8'));
+    assert.equal(components.registries['@noe'], `${publicationBaseUrl}/r/{name}.json`);
+    const server = await startStaticServer(output);
+
+    try {
+      const address = server.address();
+      assert.ok(address && typeof address === 'object');
+      const baseUrl = `http://127.0.0.1:${address.port}`;
+      const indexResponse = await fetch(`${baseUrl}/r/registry.json`);
+      assert.equal(indexResponse.status, 200);
+      assert.deepEqual(await indexResponse.json(), sourceIndex);
+
+      for (const item of sourceIndex.items) {
+        const response = await fetch(`${baseUrl}/r/${item.name}.json`);
+        assert.equal(response.status, 200, `${item.name} should be served from its public URL`);
+        const sourceItem = JSON.parse(
+          await readFile(path.join(root, 'packages/registry/r', `${item.name}.json`), 'utf8'),
+        );
+        assert.deepEqual(await response.json(), {
+          ...sourceItem,
+          files: await Promise.all(
+            sourceItem.files.map(async (file) => ({
+              ...file,
+              content: await readFile(path.join(root, file.path), 'utf8'),
+            })),
+          ),
+        });
+      }
+    } finally {
+      await new Promise((resolve, reject) =>
+        server.close((error) => (error ? reject(error) : resolve())),
+      );
+    }
+  } finally {
+    await rm(output, { recursive: true, force: true });
+  }
+});

package/tests/registry.test.mjs

@@ -0,0 +1,51 @@
+import assert from 'node:assert/strict';
+import { readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const registry = JSON.parse(
+  await readFile(path.join(root, 'packages/registry/registry.json'), 'utf8'),
+);
+
+test('registry has unique installable names', () => {
+  const names = registry.items.map((item) => item.name);
+  assert.equal(new Set(names).size, names.length);
+  assert.ok(names.length >= 32);
+});
+
+test('pattern and page layers are registered as blocks', () => {
+  const byName = new Map(registry.items.map((item) => [item.name, item]));
+  const blocks = [
+    'page-header',
+    'sidebar-navigation',
+    'section-header',
+    'sign-in-form',
+    'filter-bar',
+    'pagination',
+    'activity-feed',
+    'agent-workspace',
+    'workflow-canvas',
+    'header-navigation',
+    'app-frame',
+    'bottom-navigation',
+    'dashboard-shell',
+    'settings-page',
+    'data-list',
+    'fab',
+    'mobile-screen',
+  ];
+  for (const name of blocks) {
+    const item = byName.get(name);
+    assert.ok(item, `${name} must be registered`);
+    assert.equal(item.type, 'registry:block', `${name} belongs to the composition layer`);
+  }
+});
+
+test('registry references real source and descriptive guidance', async () => {
+  for (const item of registry.items) {
+    assert.ok(item.description.length >= 60);
+    for (const file of item.files) assert.ok((await stat(path.join(root, file.path))).isFile());
+  }
+});

package/tests/rtl.test.mjs

@@ -0,0 +1,21 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+test('static CSS uses no physical directional declarations', async () => {
+  const css = await readFile(new URL('../apps/web/styles.css', import.meta.url), 'utf8');
+  assert.doesNotMatch(
+    css,
+    /(^|[;{\s])(margin-left|margin-right|padding-left|padding-right|border-left|border-right|left|right)\s*:|text-align\s*:\s*(left|right)/m,
+  );
+  assert.match(css, /inset-inline-start/);
+  assert.match(css, /border-inline-end/);
+});
+
+test('technical values and document direction are explicit', async () => {
+  const html = await readFile(new URL('../apps/web/index.html', import.meta.url), 'utf8');
+  const app = await readFile(new URL('../apps/web/app.js', import.meta.url), 'utf8');
+  assert.match(html, /<bdi dir="ltr">/);
+  assert.match(html, /textarea[^>]+dir="auto"/);
+  assert.match(app, /applyDocumentLocale/);
+});

package/tests/static-app.test.mjs

@@ -0,0 +1,49 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+const html = await readFile(new URL('../apps/web/index.html', import.meta.url), 'utf8');
+const styles = await readFile(new URL('../apps/web/styles.css', import.meta.url), 'utf8');
+
+function declarationBlock(selector) {
+  const match = styles.match(new RegExp(`${selector}\\s*\\{([^}]*)\\}`));
+  assert.ok(match, `expected a CSS rule for ${selector}`);
+  return match[1];
+}
+
+test('all representative product surfaces exist', () => {
+  for (const surface of ['consumer', 'dashboard', 'agent', 'workflow'])
+    assert.match(html, new RegExp(`data-surface="${surface}"`));
+});
+
+test('critical agent states are represented', () => {
+  for (const marker of [
+    'plan-card',
+    'tool-card',
+    'approval-card',
+    'artifact-document',
+    'run-strip',
+  ])
+    assert.ok(html.includes(marker));
+});
+
+test('reference app exposes locale and theme controls', () => {
+  for (const locale of ['en', 'fa', 'en-XA', 'ar-XB'])
+    assert.ok(html.includes(`value="${locale}"`));
+  assert.ok(html.includes('value="light"'));
+  assert.ok(html.includes('value="dark"'));
+});
+
+test('reference app declares the NOE favicon', () => {
+  assert.match(html, /<link rel="icon" href="favicon\.svg" type="image\/svg\+xml" \/>/);
+});
+
+test('content sections use spacing rather than borders for separation', () => {
+  for (const selector of ['\\.hero-grid', '\\.section-heading', '\\.inspector-section']) {
+    assert.doesNotMatch(
+      declarationBlock(selector),
+      /\bborder(?:-block(?:-start|-end)?|-inline(?:-start|-end)?)?\s*:/,
+      `${selector} must not use a border to separate content`,
+    );
+  }
+});

package/tests/tokens.test.mjs

@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+import { tokens } from '../packages/design-tokens/src/tokens.mjs';
+
+test('tokens expose semantic color pairs', () => {
+  for (const name of ['background', 'surface', 'foreground', 'accent', 'border']) {
+    assert.ok(tokens.color.light[name]);
+    assert.ok(tokens.color.dark[name]);
+  }
+});
+
+test('token CSS includes theme and reduced-motion contracts', async () => {
+  const css = await readFile(
+    new URL('../packages/design-tokens/src/tokens.css', import.meta.url),
+    'utf8',
+  );
+  assert.match(css, /\[data-theme="dark"\]/);
+  assert.match(css, /prefers-reduced-motion/);
+  // Palette now aligns with approved landing repo hex (graphite/paper/mint) plus oklch ember fallback;
+  // most primitives are hex or rgba — ensure CSS exposes expected variables.
+  assert.match(css, /--noe-primitive-color-paper-100:\s*#[0-9a-f]{6}/i);
+  assert.match(css, /--noe-primitive-color-mint-100:\s*#[0-9a-f]{6}/i);
+});

package/tests/workspace.test.mjs

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+test('root exposes the pinned package manager and development commands', async () => {
+  const packageJsonUrl = new URL('../package.json', import.meta.url);
+  const packageJson = JSON.parse(await readFile(packageJsonUrl, 'utf8'));
+
+  assert.equal(packageJson.packageManager, 'pnpm@11.23.0');
+
+  for (const script of [
+    'dev',
+    'storybook',
+    'format:check',
+    'lint',
+    'typecheck',
+    'test',
+    'build',
+    'build:storybook',
+    'verify',
+    'check',
+  ]) {
+    assert.equal(typeof packageJson.scripts[script], 'string', `missing ${script}`);
+  }
+});

package/tsconfig.base.json

@@ -0,0 +1,69 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "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/*"
+      ]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": false,
+    "types": ["node", "react", "react-dom", "vite/client"]
+  },
+  "include": [
+    "apps/**/*.ts",
+    "apps/**/*.tsx",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "vitest.config.ts",
+    "playwright.config.ts"
+  ],
+  "exclude": [
+    "artifacts",
+    "coverage",
+    "dist",
+    "node_modules",
+    "playwright-report",
+    "test-results",
+    "types/offline-react.d.ts"
+  ]
+}

package/tsconfig.verify.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "types": [],
+    "allowJs": true,
+    "checkJs": false
+  },
+  "include": [
+    "types/**/*.d.ts",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.mts",
+    "apps/storybook/**/*.ts",
+    "apps/storybook/**/*.tsx"
+  ]
+}

package/types/offline-react.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Minimal offline type surface used only by tsconfig.verify.json when the
+ * dependency registry is unavailable. Production consumers use React's own
+ * published types. Keep this file deliberately small and verification-only.
+ */
+declare namespace React {
+  type Key = string | number;
+  type ReactNode = unknown;
+  interface ReactElement<P = Record<string, unknown>> { props: P; key: Key | null; }
+  interface MutableRefObject<T> { current: T; }
+  type Ref<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+  type ForwardedRef<T> = Ref<T>;
+  interface Context<T> { Provider: (props: { value: T; children?: ReactNode }) => ReactElement | null; }
+  interface SyntheticEvent<T = Element> { currentTarget: T; target: EventTarget & T; preventDefault(): void; }
+  interface FormEvent<T = Element> extends SyntheticEvent<T> {}
+  interface ChangeEvent<T = Element> extends SyntheticEvent<T> {}
+  interface KeyboardEvent<T = Element> extends SyntheticEvent<T> { key: string; }
+  interface ButtonHTMLAttributes<T> {
+    [key: string]: unknown;
+    className?: string;
+    children?: ReactNode;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    dir?: string;
+    onClick?: (event: SyntheticEvent<T>) => void;
+  }
+  interface InputHTMLAttributes<T> {
+    [key: string]: unknown;
+    className?: string;
+    children?: ReactNode;
+    disabled?: boolean;
+    type?: string;
+    dir?: string;
+    id?: string;
+    value?: string | number | readonly string[];
+    onChange?: (event: ChangeEvent<T>) => void;
+  }
+  interface SVGProps<T> {
+    [key: string]: unknown;
+    className?: string;
+    children?: ReactNode;
+  }
+  interface CSSProperties { [key: string]: string | number | undefined; }
+  function createContext<T>(defaultValue: T): Context<T>;
+  function useContext<T>(context: Context<T>): T;
+  function useRef<T>(initialValue: T): MutableRefObject<T>;
+  function useRef<T>(initialValue: T | null): MutableRefObject<T | null>;
+  function useEffect(effect: () => void | (() => void), dependencies?: readonly unknown[]): void;
+  function useId(): string;
+  function cloneElement<P>(element: ReactElement<P>, props: Partial<P>): ReactElement<P>;
+  function forwardRef<T, P>(render: (props: P, ref: ForwardedRef<T>) => ReactElement | null): (props: P & { ref?: Ref<T> }) => ReactElement | null;
+}
+
+declare module 'react' { export = React; }
+declare module 'react-dom' { export function createPortal(children: React.ReactNode, container: Element | DocumentFragment): React.ReactElement | null; }
+declare module 'react/jsx-runtime' {
+  export const Fragment: unknown;
+  export function jsx(type: unknown, props: unknown, key?: React.Key): React.ReactElement;
+  export function jsxs(type: unknown, props: unknown, key?: React.Key): React.ReactElement;
+}
+declare module '@storybook/react-vite' {
+  export type Meta<T = unknown> = Record<string, unknown> & { component?: T };
+  export type StoryObj<T = unknown> = Record<string, unknown>;
+  export type Preview = Record<string, unknown>;
+  export type StorybookConfig = Record<string, unknown>;
+}
+declare module '*.css' { const value: string; export default value; }
+
+declare namespace JSX {
+  type Element = React.ReactElement;
+  interface ElementChildrenAttribute { children: Record<string, never>; }
+  interface IntrinsicElements { [elementName: string]: Record<string, unknown>; }
+}