agentgui 1.0.970 → 1.0.972

package/site/theme.mjs

@@ -15,6 +15,10 @@ const escapeJson = (obj) => JSON.stringify(obj)
   .replace(new RegExp('\\u2028', 'g'), '\\u2028').replace(new RegExp('\\u2029', 'g'), '\\u2029');
 
 const SDK_URL = 'https://unpkg.com/anentrypoint-design@latest/dist/247420.js';
+// Render-blocking CSS counterpart of SDK_URL so the kit base surface + .site-*
+// classes paint BEFORE the module's installStyles() runs (no FOUC). All design
+// content lives in the kit; this template carries no inline <style>.
+const CSS_URL = 'https://unpkg.com/anentrypoint-design@latest/dist/247420.css';
 const THIS_DIR = dirname(fileURLToPath(import.meta.url));
 
 const landingClient = `
@@ -27,16 +31,16 @@ const { site, nav, page } = data;
 function Hero() {
   if (!page || !page.hero) return null;
   return C.Panel({
-    style: 'margin:8px',
-    children: h('div', { style: 'padding:24px 22px' },
-      C.Heading({ level: 1, style: 'margin:0 0 8px 0', children: page.hero.heading || site.title }),
+    class: 'site-panel',
+    children: h('div', { class: 'site-hero' },
+      C.Heading({ level: 1, class: 'site-hero-h', children: page.hero.heading || site.title }),
       page.hero.subheading ? C.Lede({ children: page.hero.subheading }) : null,
-      page.hero.body ? h('p', { style: 'margin:8px 0 16px 0;color:var(--panel-text-2);max-width:64ch' }, page.hero.body) : null,
-      (page.hero.badges && page.hero.badges.length) ? h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px 0' },
+      page.hero.body ? h('p', { class: 'site-hero-body' }, page.hero.body) : null,
+      (page.hero.badges && page.hero.badges.length) ? h('div', { class: 'site-chip-row' },
         ...page.hero.badges.map((b, i) => C.Chip({ key: 'b' + i, children: b.label }))
       ) : null,
-      (page.hero.ctas && page.hero.ctas.length) ? h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' },
-        ...page.hero.ctas.map((c, i) => C.Btn({ key: 'c' + i, href: c.href, primary: c.primary, children: c.label }))
+      (page.hero.ctas && page.hero.ctas.length) ? h('div', { class: 'site-cta-row' },
+        ...page.hero.ctas.map((c, i) => C.Btn({ key: 'c' + i, href: c.href, variant: c.primary ? 'primary' : 'default', children: c.label }))
       ) : null
     )
   });
@@ -54,7 +58,7 @@ function Features() {
   }));
   return C.Panel({
     title: page.features.heading || 'features',
-    style: 'margin:8px',
+    class: 'site-panel',
     children: rows
   });
 }
@@ -70,8 +74,8 @@ function Quickstart() {
   });
   return C.Panel({
     title: page.quickstart.heading || 'quick start',
-    style: 'margin:8px',
-    children: h('div', { style: 'padding:16px 22px' }, ...lineNodes)
+    class: 'site-panel',
+    children: h('div', { class: 'site-cli' }, ...lineNodes)
   });
 }
 
@@ -82,7 +86,7 @@ function Footer() {
     h('span', { class: 'item' }, '·'),
     h('a', { class: 'item', href: 'https://247420.xyz' }, '247420.xyz'),
     h('span', { class: 'spread' }),
-    site.repo ? h('a', { class: 'item', href: site.repo }, 'source ↗') : null
+    site.repo ? h('a', { class: 'item', href: site.repo }, 'source ->') : null
   );
 }
 
@@ -112,7 +116,7 @@ function Footer() {
     h('span', { class: 'item' }, '·'),
     h('a', { class: 'item', href: 'https://247420.xyz' }, '247420.xyz'),
     h('span', { class: 'spread' }),
-    site.repo ? h('a', { class: 'item', href: site.repo }, 'source ↗') : null
+    site.repo ? h('a', { class: 'item', href: site.repo }, 'source ->') : null
   );
 }
 
@@ -120,10 +124,10 @@ const App = C.AppShell({
   topbar: C.Topbar({ brand: '247420', leaf: site.title || '', items: navItems }),
   crumb: C.Crumb({ trail: ['247420', site.title || ''], leaf: page.title || '' }),
   main: C.Panel({
-    style: 'margin:8px',
+    class: 'site-panel',
     children: h('iframe', {
       src: page.embedSrc,
-      style: 'width:100%;height:calc(100vh - 180px);min-height:520px;border:0;border-radius:6px;background:var(--panel-1);display:block',
+      class: 'site-embed',
       title: page.title || ''
     })
   }),
@@ -140,7 +144,7 @@ const renderHtml = ({ site, nav, page, clientScript }) => `<!DOCTYPE html>
   <title>${escapeHtml(page.title || site.title)}${site.tagline ? ' - ' + escapeHtml(site.tagline) : ''}</title>
   <meta name="description" content="${escapeHtml(page.description || site.description || site.tagline || site.title)}" />
   <script type="importmap">{"imports":{"anentrypoint-design":"${SDK_URL}"}}</script>
-  <style>html,body{margin:0;padding:0}body{background:var(--app-bg,#FBF6EB);color:var(--ink,#1F1B16);font-family:var(--ff-ui,'Nunito',system-ui,sans-serif)}</style>
+  <link rel="stylesheet" href="${CSS_URL}" />
 </head>
 <body>
   <div id="app"></div>

package/scripts/build-rippleui.mjs

@@ -1,84 +0,0 @@
-#!/usr/bin/env node
-// One-time build: produces static/vendor/rippleui.css from the rippleui npm package.
-// Buildless at runtime - commit the output so `npm install` is enough to serve.
-//
-// Source files (from node_modules/rippleui/dist/css/):
-//   base.css        - Tailwind preflight/reset         (~2KB)
-//   components.css  - RippleUI components (.btn etc.)  (~143KB)
-//   utilities.css   - RippleUI extra utilities         (~0.05KB)
-//   styles.css      - full TW + RippleUI monolith      (~4.7MB) - we only mine token defs
-//
-// Output: static/vendor/rippleui.css containing
-//   1. :root / html.dark token blocks extracted from styles.css (so components.css works)
-//   2. base.css
-//   3. components.css
-//   4. utilities.css
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const ROOT = path.resolve(__dirname, '..');
-const RUI = path.join(ROOT, 'node_modules/rippleui/dist/css');
-const OUT = path.join(ROOT, 'static/vendor/rippleui.css');
-
-if (!fs.existsSync(RUI)) {
-    console.error('rippleui not installed. Run: bun add --dev rippleui');
-    process.exit(1);
-}
-
-const base = fs.readFileSync(path.join(RUI, 'base.css'), 'utf8');
-const components = fs.readFileSync(path.join(RUI, 'components.css'), 'utf8');
-const utilities = fs.readFileSync(path.join(RUI, 'utilities.css'), 'utf8');
-const styles = fs.readFileSync(path.join(RUI, 'styles.css'), 'utf8');
-
-// Extract token blocks. RippleUI defines its design tokens in :root { ... } and html.dark { ... }
-// Find every block that contains a RippleUI-signature token like --backgroundPrimary or --gray-3.
-const tokenBlocks = [];
-const blockRe = /([:a-z.][^{}]*\{[^{}]*\})/gi;
-let m;
-while ((m = blockRe.exec(styles))) {
-    const block = m[1];
-    if (/--backgroundPrimary|--gray-\d|--content1|--primary:\s*\d/.test(block)) {
-        tokenBlocks.push(block);
-        if (tokenBlocks.length > 20) break;
-    }
-}
-
-if (tokenBlocks.length === 0) {
-    console.error('Could not find token blocks in styles.css - rippleui shape changed?');
-    process.exit(1);
-}
-
-const header = `/* RippleUI v${readPkgVersion()} - localized for AgentGUI.\n` +
-    ` * Generated by scripts/build-rippleui.mjs - do not edit by hand.\n` +
-    ` * Regenerate: bun run scripts/build-rippleui.mjs\n` +
-    ` */\n`;
-
-// RippleUI targets [data-theme=dark] for dark mode; AgentGUI uses `html.dark`.
-// Duplicate every `[data-theme=dark]` selector with `html.dark` so both work.
-function mirrorDarkSelector(css) {
-    return css.replace(/\[data-theme=dark\]/g, 'html.dark, [data-theme=dark]');
-}
-
-const bundled = header +
-    '/* --- rippleui design tokens (extracted from styles.css) --- */\n' +
-    mirrorDarkSelector(tokenBlocks.join('\n')) + '\n\n' +
-    '/* --- base.css (tailwind preflight) --- */\n' +
-    base + '\n\n' +
-    '/* --- components.css --- */\n' +
-    mirrorDarkSelector(components) + '\n\n' +
-    '/* --- utilities.css --- */\n' +
-    mirrorDarkSelector(utilities) + '\n';
-
-fs.mkdirSync(path.dirname(OUT), { recursive: true });
-fs.writeFileSync(OUT, bundled);
-const kb = (bundled.length / 1024).toFixed(1);
-console.log(`wrote ${OUT} (${kb}KB, ${tokenBlocks.length} token blocks)`);
-
-function readPkgVersion() {
-    try {
-        return JSON.parse(fs.readFileSync(path.join(ROOT, 'node_modules/rippleui/package.json'), 'utf8')).version;
-    } catch { return 'unknown'; }
-}

package/scripts/copy-vendor.js

@@ -1,50 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const root = path.join(__dirname, '..');
-
-const copies = [
-  ['node_modules/xstate/dist/xstate.umd.min.js', 'static/lib/xstate.umd.min.js'],
-];
-
-for (const [src, dest] of copies) {
-  const srcPath = path.join(root, src);
-  const destPath = path.join(root, dest);
-  if (!fs.existsSync(srcPath)) { console.warn('[copy-vendor] not found:', src); continue; }
-  fs.mkdirSync(path.dirname(destPath), { recursive: true });
-  fs.copyFileSync(srcPath, destPath);
-  console.log('[copy-vendor] copied', src, '->', dest);
-}
-
-// Build webjsx IIFE bundle from ESM dist files
-const webjsxDist = path.join(root, 'node_modules/webjsx/dist');
-if (fs.existsSync(webjsxDist)) {
-  const ORDER = ['constants', 'elementTags', 'utils', 'renderSuspension', 'attributes', 'createDOMElement', 'createElement', 'applyDiff', 'types'];
-
-  function stripModule(src) {
-    return src
-      .replace(/^import\s+.*?from\s+['"][^'"]+['"];?\s*$/gm, '')
-      .replace(/^export\s+(const|function|class|async\s+function)\s+/gm, '$1 ')
-      .replace(/^export\s+\{[^}]*\}(\s+from\s+['"][^'"]+['"])?\s*;?\s*$/gm, '')
-      .replace(/^export\s+\*\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
-      .replace(/^\/\/#\s+sourceMappingURL=.*$/gm, '')
-      .trim();
-  }
-
-  const stripped = ORDER.map(name => {
-    const src = fs.readFileSync(path.join(webjsxDist, `${name}.js`), 'utf8');
-    return `// === ${name}.js ===\n${stripModule(src)}`;
-  });
-
-  const iife = `(function(window) {\n"use strict";\n\n${stripped.join('\n\n')}\n\nwindow.webjsx = { createElement, applyDiff, createDOMElement, Fragment };\n})(typeof window !== 'undefined' ? window : globalThis);\n`;
-
-  const dest = path.join(root, 'static/lib/webjsx.js');
-  fs.mkdirSync(path.dirname(dest), { recursive: true });
-  fs.writeFileSync(dest, iife);
-  console.log('[copy-vendor] built webjsx IIFE ->', 'static/lib/webjsx.js', `(${iife.split('\n').length} lines)`);
-} else {
-  console.warn('[copy-vendor] webjsx not found in node_modules - run npm install');
-}