@clidey/dory 1.0.8 → 1.10.0

package/docs/websocket-playground-demo.mdx

@@ -0,0 +1,135 @@
+---
+title: 'WebSocket Playground Demo'
+description: 'Interactive WebSocket playground for testing real-time connections'
+---
+
+# WebSocket Playground Demo
+
+This page demonstrates the WebSocket playground component with various configuration options and real-time connection testing capabilities.
+
+## Basic WebSocket Connection
+
+<WebSocketPlayground
+  url="/ws/chat"
+  title="Basic Chat WebSocket"
+  description="Connect to a WebSocket server and send/receive messages in real-time"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    },
+    {
+      url: "wss://ws.postman-echo.com/raw",
+      description: "Postman Echo WebSocket"
+    }
+  ]}
+/>
+
+## WebSocket with Subprotocols
+
+<WebSocketPlayground
+  url="/ws/protocol"
+  title="WebSocket with Subprotocols"
+  description="WebSocket connection with custom subprotocols for specialized communication"
+  subprotocols={["chat", "v1.0"]}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Echo Server with Subprotocols"
+    }
+  ]}
+/>
+
+## WebSocket with Authentication
+
+<WebSocketPlayground
+  url="/ws/secure"
+  title="Authenticated WebSocket"
+  description="WebSocket connection with authentication headers"
+  authType="bearer"
+  headers={{
+    "User-Agent": "Dory WebSocket Client",
+    "X-Client-Version": "1.0.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Secure Echo Server"
+    }
+  ]}
+/>
+
+## Real-time Chat Example
+
+<WebSocketPlayground
+  url="/chat"
+  title="Real-time Chat"
+  description="Connect to a chat server and participate in real-time conversations"
+  subprotocols={["chat.v1", "json"]}
+  headers={{
+    "X-Client-Type": "web",
+    "X-Protocol-Version": "1.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Chat Echo Server"
+    }
+  ]}
+/>
+
+## Testing Instructions
+
+1. **Connect**: Click the "Connect" button to establish a WebSocket connection
+2. **Send Messages**: Type messages in the input field and click "Send" or press Enter
+3. **View Messages**: All sent and received messages appear in the message history with timestamps
+4. **Configuration**: Use the tabs to configure headers, subprotocols, and authentication
+5. **Server Selection**: Choose different servers from the dropdown to test various endpoints
+
+## Features
+
+- **Real-time Connection**: Live WebSocket connection with status indicators
+- **Message History**: View all sent/received messages with timestamps
+- **Custom Headers**: Add authentication and custom headers
+- **Subprotocols**: Configure WebSocket subprotocols
+- **Multiple Servers**: Easy switching between different WebSocket endpoints
+- **Error Handling**: Clear error messages for connection issues
+- **Binary Support**: Handles both text and binary messages
+
+## Message Types
+
+The playground supports different message types:
+- **Sent**: Messages you send (blue background)
+- **Received**: Messages from the server (green background)
+- **Error**: Connection or sending errors (red background)
+- **System**: Connection status updates (gray background)
+
+## Example Messages
+
+Try sending these JSON messages to test structured data:
+
+```json
+{
+  "type": "chat",
+  "message": "Hello, WebSocket!",
+  "userId": "user123",
+  "timestamp": "2024-01-15T10:30:00Z"
+}
+```
+
+```json
+{
+  "type": "presence",
+  "status": "online",
+  "userId": "user123"
+}
+```
+
+```json
+{
+  "type": "notification",
+  "title": "Test Notification",
+  "message": "This is a test notification",
+  "level": "info"
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "1.0.8",
+  "version": "1.10.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -16,6 +16,11 @@
   },
   "files": [
     "bin/dist",
+    "dist/runtime",
+    "bin/chat-server.ts",
+    "docs",
+    "!docs/dist",
+    "!docs/dist-ssr",
     "src",
     "scripts",
     "index.html",
@@ -36,7 +41,9 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run build:cli && tsc -b",
+    "build": "pnpm run build:cli && tsc -b && pnpm run build:docs && pnpm run build:runtime",
+    "build:runtime": "vite build -c vite.config.runtime.ts && cp src/embedded-runtime/runtime.html dist/runtime/dory-runtime.html",
+    "build:server": "vite build -c vite.config.server.ts",
     "build:cli": "tsc -p tsconfig.bin.json",
     "build:docs": "vite build && vite build --config vite.config.ssr.ts && node scripts/render-routes.mjs",
     "build:embed": "npm run build:embed:loader && npm run build:embed:widget",
@@ -44,46 +51,45 @@
     "build:embed:widget": "vite build -c vite.config.embed-widget.ts",
     "preview": "vite preview",
     "test": "node scripts/check-trigger-children.mjs src && vitest run",
+    "test:runtime-parity": "pnpm run build && node scripts/verify-runtime-parity.mjs",
     "lint:triggers": "node scripts/check-trigger-children.mjs src",
     "publish": "npm run build && npm publish --access public --no-git-checks",
     "prepublishOnly": "echo 'Skipping prepublishOnly - build handled by publish script'"
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.19.12",
-    "@clidey/ux": "1.5.1",
-    "@fortawesome/fontawesome-svg-core": "7.3.1",
-    "@fortawesome/free-brands-svg-icons": "7.3.1",
-    "@fortawesome/free-regular-svg-icons": "7.3.1",
-    "@fortawesome/free-solid-svg-icons": "7.3.1",
-    "@fortawesome/react-fontawesome": "3.5.0",
+    "@clidey/ux": "1.6.4",
     "@headlessui/react": "2.2.10",
-    "@heroicons/react": "2.2.0",
     "@mdx-js/mdx": "3.1.1",
     "@mdx-js/preact": "3.1.1",
     "@mdx-js/rollup": "3.1.1",
+    "@modelcontextprotocol/node": "2.1.2",
+    "@modelcontextprotocol/server": "2.4.0",
     "@preact/preset-vite": "2.10.6",
+    "@resvg/resvg-js": "2.6.2",
     "@tailwindcss/vite": "4.3.3",
     "classnames": "2.5.1",
     "flexsearch": "0.8.212",
     "gray-matter": "4.0.3",
     "katex": "0.19.0",
-    "lucide-react": "1.57.0",
-    "mermaid": "11.16.1",
-    "motion": "12.42.2",
-    "preact": "10.29.8",
+    "mermaid": "12.2.0",
+    "motion": "14.5.0",
+    "playwright-core": "1.64.1",
+    "preact": "11.0.1",
     "preact-render-to-string": "6.8.1",
     "prism-react-renderer": "2.4.1",
-    "react-highlight-words": "0.21.0",
+    "react-highlight-words": "1.0.0",
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.1",
-    "sass-embedded": "1.105.1",
+    "sass-embedded": "1.106.0",
     "sirv": "3.0.2",
     "tailwindcss": "4.3.3",
     "tsx": "4.23.15",
     "typescript": "7.0.2",
     "unist-util-visit": "5.1.0",
-    "vite": "8.3.4",
-    "wouter-preact": "3.13.0"
+    "vite": "8.3.5",
+    "wouter-preact": "3.13.0",
+    "zod": "4.6.7"
   },
   "packageManager": "pnpm@12.13.0+sha512.1e55719bf26e809dce5c5084fdebaa64efb3da9038ae5d68a9f8a68311f1a45841c8c3b76a37298c3b66f6bcc80409a9b7f33c78a7168a3e90fb65a5d8235ae4",
   "devDependencies": {

package/scripts/verify-component-examples.mjs

@@ -0,0 +1,126 @@
+import assert from 'node:assert/strict';
+import {mkdir, readFile, writeFile} from 'node:fs/promises';
+import {dirname, join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {chromium} from 'playwright-core';
+import {preview} from 'vite';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const config = JSON.parse(await readFile(join(root, 'docs/dory.json'), 'utf8'));
+const routes = config.navigation.tabs.flatMap(tab => tab.groups.flatMap(group => group.pages))
+  .map(page => typeof page === 'string' ? page : page.page).filter(page => page.startsWith('components/'));
+const output = join(root, '.dory/component-review');
+await mkdir(output, {recursive: true});
+const report = {pages: 0, previews: 0, errors: [], screenshots: []};
+let server;
+let browser;
+try {
+  let base = process.argv[2];
+  if (!base) {
+    server = await preview({root, preview: {host: '127.0.0.1', port: 3189, strictPort: true}});
+    base = server.resolvedUrls.local[0];
+  }
+  if (!base.endsWith('/')) base += '/';
+  browser = await chromium.launch({channel: 'chrome', headless: true, ...(process.env.DORY_CHROME_PATH ? {executablePath: process.env.DORY_CHROME_PATH} : {})});
+  // A missing lazy math asset must leave a readable equation and an error, not
+  // a blank spinner. This context has its own cache so the request is real.
+  const unavailable = await browser.newContext({viewport: {width: 390, height: 844}});
+  const failedMath = await unavailable.newPage();
+  await failedMath.route(/\/assets\/katex-[^/]+\.js$/, route => route.abort());
+  await failedMath.goto(new URL('components/latex/', base).href, {waitUntil: 'domcontentloaded'});
+  await failedMath.getByRole('alert').filter({hasText: 'The equation could not be rendered.'}).first().waitFor();
+  assert.ok((await failedMath.locator('[data-latex-fallback]').first().innerText()).trim(), 'Failed math retains readable content');
+  assert.equal(await failedMath.locator('.dory-latex .animate-spin').count(), 0, 'Failed math does not spin forever');
+  await unavailable.close();
+  report.mathFailureFallback = true;
+  for (const scenario of [
+    {name: 'desktop-dark', viewport: {width: 1440, height: 1000}, colorScheme: 'dark'},
+    {name: 'mobile-light', viewport: {width: 390, height: 844}, colorScheme: 'light'},
+  ]) {
+    const context = await browser.newContext({viewport: scenario.viewport, colorScheme: scenario.colorScheme});
+    const page = await context.newPage();
+    page.on('pageerror', error => report.errors.push(`${scenario.name}: ${error.message}`));
+    for (const route of routes) {
+      const label = `${scenario.name} ${route}`;
+      try {
+        const response = await page.goto(new URL(route + '/', base).href, {waitUntil: 'domcontentloaded'});
+        assert.equal(response.status(), 200, `${label}: HTTP status`);
+        await page.locator('article').waitFor();
+        await page.evaluate(() => document.fonts.ready);
+        assert.equal(await page.getByText('This page failed to render', {exact: true}).count(), 0, `${label}: render boundary`);
+        const previews = page.locator('[data-dory-preview]:visible');
+        assert.equal(await previews.count(), await page.locator('.dory-specimen:visible').count(), `${label}: every example has a visible preview`);
+        for (let index = 0; index < await previews.count(); index++) {
+          const panel = previews.nth(index);
+          const padding = await panel.evaluate(element => {
+            const style = getComputedStyle(element);
+            return [style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft].map(parseFloat);
+          });
+          const expected = await panel.getAttribute('data-padding');
+          assert.ok(padding.every(value => expected === 'none' ? value === 0 : value >= 16), `${label} preview ${index + 1}: missing inset (${padding})`);
+          const clipped = await panel.evaluate(element => {
+            const box = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            const left = box.left + parseFloat(style.paddingLeft);
+            const right = box.right - parseFloat(style.paddingRight);
+            return [...element.querySelectorAll('.dory-latex, .dory-expandable, .dory-accordion, .dory-table, .dory-card, .dory-callout')]
+              .filter(child => child.getBoundingClientRect().width > 0)
+              .filter(child => { const bounds = child.getBoundingClientRect(); return bounds.left < left - 1 || bounds.right > right + 1; })
+              .map(child => child.className);
+          });
+          assert.deepEqual(clipped, [], `${label} preview ${index + 1}: content clipped by frame`);
+          report.previews++;
+        }
+        if (route === 'components/latex') {
+          await page.waitForFunction(() => {
+            const formulas = [...document.querySelectorAll('.dory-latex, .dory-latex-inline')];
+            return formulas.length > 0 && formulas.every(element => element.querySelector('.katex'));
+          }, undefined, {timeout: 15000});
+          assert.equal(await page.locator('[data-latex-fallback]').count(), 0, `${label}: math still loading`);
+          assert.equal(await page.locator('.katex-error').count(), 0, `${label}: invalid formula`);
+        }
+        if (route === 'components/typography') {
+          assert.equal(await page.locator('.dory-type-scale > div').count(), 4, `${label}: heading samples`);
+          assert.equal(await page.locator('.dory-type-scale').evaluate(element => element.scrollWidth > element.clientWidth + 1), false, `${label}: heading sample overflows`);
+        }
+        if (route === 'components/expandable') {
+          const specimen = page.locator('.dory-specimen').first();
+          const inner = specimen.locator('.dory-expandable').first();
+          const outerBounds = await specimen.boundingBox();
+          const innerBounds = await inner.boundingBox();
+          assert.ok(innerBounds.x - outerBounds.x >= 16, `${label}: nested border touches frame`);
+          await inner.getByRole('button', {name: 'Response Body', exact: true}).click();
+          await inner.locator('[data-state="open"]').first().waitFor();
+        }
+        const specimen = page.locator('.dory-specimen').first();
+        if (await specimen.count()) {
+          const codeTab = specimen.getByRole('tab', {name: 'Code', exact: true}).first();
+          if (await codeTab.count()) {
+            await codeTab.click();
+            await page.waitForFunction(element => element.getAttribute('aria-selected') === 'true', await codeTab.elementHandle());
+            assert.ok(await specimen.locator('[role="tabpanel"]:visible code').count(), `${label}: source panel missing`);
+            await specimen.getByRole('tab', {name: 'Preview', exact: true}).first().click();
+          }
+          if (['components/typography', 'components/expandable', 'components/latex', 'components/callouts'].includes(route)) {
+            const file = `${scenario.name}-${route.split('/')[1]}.png`;
+            await specimen.screenshot({path: join(output, file)});
+            report.screenshots.push(file);
+          }
+        }
+        assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1), true, `${label}: page overflows horizontally`);
+        report.pages++;
+        console.log(`PASS ${label}`);
+      } catch (error) {
+        report.errors.push(error.message);
+        console.error(`FAIL ${error.message}`);
+      }
+    }
+    await context.close();
+  }
+} finally {
+  await browser?.close();
+  await new Promise(resolve => server ? server.httpServer.close(resolve) : resolve());
+  await writeFile(join(output, 'report.json'), JSON.stringify(report, null, 2) + '\n');
+}
+console.log(JSON.stringify(report, null, 2));
+if (report.errors.length) process.exitCode = 1;

package/scripts/verify-runtime-parity.mjs

@@ -0,0 +1,147 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium } from 'playwright-core';
+import { preview } from 'vite';
+
+const root = resolve(fileURLToPath(new URL('..', import.meta.url)));
+const docsRoot = join(root, 'docs');
+const pagePath = 'getting-started/automation';
+
+function docsFiles(directory = docsRoot) {
+  return readdirSync(directory, { withFileTypes: true }).flatMap(entry => {
+    const file = join(directory, entry.name);
+    if (entry.isDirectory()) return docsFiles(file);
+    return entry.name.endsWith('.mdx')
+      ? [{ path: `docs/${relative(docsRoot, file).replaceAll('\\', '/')}`, content: readFileSync(file, 'utf8') }]
+      : [];
+  });
+}
+
+const config = JSON.parse(readFileSync(join(docsRoot, 'dory.json'), 'utf8'));
+const basePath = String(config.basePath || '').replace(/\/$/, '');
+const logo = readFileSync(join(docsRoot, 'logo/logo.svg')).toString('base64');
+config.logo = {
+  light: `data:image/svg+xml;base64,${logo}`,
+  dark: `data:image/svg+xml;base64,${logo}`,
+};
+
+function visualMetrics() {
+  const measure = selector => {
+    const element = document.querySelector(selector);
+    if (!element) return null;
+    const rect = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return {
+      text: element.textContent?.trim().replace(/\s+/g, ' ').slice(0, 120) ?? '',
+      x: rect.x, y: rect.y, width: rect.width, height: rect.height,
+      font: style.fontFamily, fontSize: style.fontSize, lineHeight: style.lineHeight,
+      weight: style.fontWeight, color: style.color, background: style.backgroundColor,
+      padding: style.padding,
+    };
+  };
+  const article = measure('.dory-article');
+  const headings = [...document.querySelectorAll('.dory-article h1')].map(element => {
+    const rect = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return { text: element.textContent?.trim().replace(/\s+/g, ' ') ?? '', y: rect.y, fontSize: style.fontSize, lineHeight: style.lineHeight };
+  });
+  return {
+    html: measure('html'), header: measure('.dory-topbar'), main: measure('.dory-main'), article,
+    breadcrumb: measure('.dory-breadcrumb'), activeNav: measure('.dory-sidebar-link.active'),
+    topNav: measure('header nav[aria-label]'), firstTab: measure('.dory-topbar-tab'),
+    headerSearch: measure('.dory-topbar-search'), sidebarSearch: measure('#dory-embedded-search'),
+    pageActions: measure('.dory-page-actions'), firstSection: measure('.dory-article h2'),
+    firstParagraph: measure('.dory-article p'), toc: measure('.dory-toc-list'), headings,
+    topTabs: [...document.querySelectorAll('.dory-topbar-tab')].map(element => element.textContent?.trim()),
+  };
+}
+
+const differences = [];
+function equal(label, expected, actual) {
+  if (expected !== actual) differences.push(`${label}: full site ${JSON.stringify(expected)}, embed ${JSON.stringify(actual)}`);
+}
+function near(label, expected, actual, tolerance = 3) {
+  if (typeof expected !== 'number' || typeof actual !== 'number' || Math.abs(expected - actual) > tolerance)
+    differences.push(`${label}: full site ${Math.round(expected ?? NaN)}px, embed ${Math.round(actual ?? NaN)}px`);
+}
+function compare(full, embed, theme) {
+  for (const key of ['html', 'header', 'main', 'article', 'firstSection', 'firstParagraph']) {
+    for (const field of ['background', 'color', 'font', 'fontSize', 'lineHeight']) {
+      equal(`${theme} ${key}.${field}`, full[key]?.[field], embed[key]?.[field]);
+    }
+  }
+  for (const key of ['header', 'main', 'article', 'breadcrumb', 'activeNav', 'topNav', 'firstTab', 'firstSection', 'firstParagraph']) {
+    for (const field of ['x', 'width']) near(`${theme} ${key}.${field}`, full[key]?.[field], embed[key]?.[field]);
+  }
+  equal(`${theme} first tab color`, full.firstTab?.color, embed.firstTab?.color);
+  equal(`${theme} breadcrumb`, full.breadcrumb?.text, embed.breadcrumb?.text);
+  equal(`${theme} top tabs`, full.topTabs.join('|'), embed.topTabs.join('|'));
+  equal(`${theme} page actions present`, Boolean(full.pageActions), Boolean(embed.pageActions));
+  equal(`${theme} topbar search present`, Boolean(full.headerSearch), Boolean(embed.headerSearch));
+  equal(`${theme} sidebar search present`, Boolean(full.sidebarSearch), Boolean(embed.sidebarSearch));
+  equal(`${theme} hero count`, full.headings.length, embed.headings.length);
+  for (let index = 0; index < full.headings.length; index++) {
+    equal(`${theme} hero ${index + 1} text`, full.headings[index]?.text, embed.headings[index]?.text);
+    equal(`${theme} hero ${index + 1} font size`, full.headings[index]?.fontSize, embed.headings[index]?.fontSize);
+    near(`${theme} hero ${index + 1} offset`, full.headings[index]?.y - full.article.y, embed.headings[index]?.y - embed.article.y);
+  }
+  for (const key of ['firstSection', 'firstParagraph', 'activeNav'])
+    near(`${theme} ${key} vertical offset`, full[key]?.y - full.article.y, embed[key]?.y - embed.article.y);
+}
+
+const server = process.env.DORY_PARITY_ORIGIN ? null : await preview({
+  root,
+  preview: { host: '127.0.0.1', port: 0 },
+});
+const port = server?.httpServer.address()?.port;
+const origin = process.env.DORY_PARITY_ORIGIN ?? `http://127.0.0.1:${port}`;
+let browser;
+try {
+  browser = await chromium.launch({ channel: 'chrome', headless: true });
+  for (const theme of ['light', 'dark']) {
+    const full = await browser.newPage({ viewport: { width: 2048, height: 1200 } });
+    await full.goto(`${origin}${basePath}/${pagePath}`, { waitUntil: 'networkidle' });
+    if (theme === 'dark') await full.locator('html').evaluate(element => { element.classList.remove('light'); element.classList.add('dark'); });
+    await full.evaluate(() => document.fonts.ready);
+    const fullMetrics = await full.evaluate(visualMetrics);
+
+    const embed = await browser.newPage({ viewport: { width: 2048, height: 1200 } });
+    await embed.goto(`${origin}${basePath}/runtime/dory-runtime.html`, { waitUntil: 'networkidle' });
+    await embed.evaluate(({ files, config, theme, pagePath }) => {
+      window.postMessage({ __dory_docs: true, type: 'load', files, path: `docs/${pagePath}.mdx`, theme, locale: 'en_US', config }, '*');
+    }, { files: docsFiles(), config, theme, pagePath });
+    await embed.getByRole('heading', { name: 'CLI and MCP automation' }).waitFor();
+    await embed.evaluate(() => document.fonts.ready);
+    const embedMetrics = await embed.evaluate(visualMetrics);
+    compare(fullMetrics, embedMetrics, theme);
+    if (differences.length || process.env.DORY_PARITY_SCREENSHOTS === '1') {
+      await full.screenshot({ path: `/tmp/dory-parity-full-${theme}.png` });
+      await embed.screenshot({ path: `/tmp/dory-parity-embed-${theme}.png` });
+    }
+    await embed.evaluate(({ files, config, theme }) => {
+      window.postMessage({ __dory_docs: true, type: 'load', files, path: 'docs/components/accordion.mdx', theme, locale: 'en_US', config }, '*');
+    }, { files: docsFiles(), config, theme });
+    await embed.getByRole('heading', { name: 'Accordion', exact: true }).first().waitFor();
+    const specimen = embed.locator('.dory-specimen').first();
+    await specimen.getByRole('tab', { name: 'Code' }).click();
+    await specimen.locator('pre').first().waitFor();
+    await specimen.getByRole('tab', { name: 'Preview' }).click();
+    await embed.evaluate(({ files, config, theme }) => {
+      window.postMessage({ __dory_docs: true, type: 'load', files, path: 'docs/components/icons.mdx', theme, locale: 'en_US', config }, '*');
+    }, { files: docsFiles(), config, theme });
+    await embed.locator('button[title^="Copy <Icon"]').first().waitFor();
+    await full.close();
+    await embed.close();
+  }
+  if (differences.length) {
+    console.error(`Dory embedded runtime differs from the full docs site:\n${differences.map(item => `- ${item}`).join('\n')}`);
+    console.error('Screenshots: /tmp/dory-parity-{full,embed}-{light,dark}.png');
+    process.exitCode = 1;
+  } else {
+    console.log('Dory full site and embedded runtime visual parity passed in light and dark mode.');
+  }
+} finally {
+  await browser?.close();
+  await new Promise(resolve => server?.httpServer.close(resolve) ?? resolve());
+}

package/src/app.css

@@ -1,5 +1,26 @@
-@import "tailwindcss";
+/* UX supplies the shared reset. Dory adds its own generated utilities. */
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/* Emit UX variants alongside Dory’s utilities so responsive rules stay ordered. */
+@source "../node_modules/@clidey/ux/dist";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+.mermaid-wrapper .mermaid svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+
+@media (max-width: 480px) {
+  /* Keep the UX 404 illustration inside its narrow stage. Its animation sets left inline. */
+  .ux-not-found-character {
+    left: clamp(80px, 24vw, 100px) !important;
+    scale: .6;
+  }
+}
+
 

package/src/assets/fonts/OFL.txt

@@ -0,0 +1,94 @@
+Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk)
+
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.