@refrakt-md/cli 0.21.0 → 0.22.0

package/dist/lib/gallery.js

@@ -0,0 +1,169 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+/**
+ * Recursively inline `@import './x.css';` statements into a single CSS string so
+ * the gallery is self-contained (no path/serving concerns, deterministic for
+ * screenshots). Only *relative* imports are inlined; any `url(...)`/remote
+ * import is left untouched. A `seen` set guards against import cycles.
+ */
+export function flattenCssImports(entryPath, seen = new Set()) {
+    const abs = resolve(entryPath);
+    if (seen.has(abs))
+        return '';
+    seen.add(abs);
+    const dir = dirname(abs);
+    const css = readFileSync(abs, 'utf-8');
+    return css.replace(/@import\s+(?:url\()?['"]([^'"]+)['"]\)?\s*;/g, (match, importPath) => {
+        if (!importPath.startsWith('.'))
+            return match; // leave remote imports as-is
+        return flattenCssImports(resolve(dir, importPath), seen);
+    });
+}
+/** Default web-font links — tactically Lumina's families (WORK-407 defers the
+ *  theme-owned-font system). The harness needs fonts actually loaded for stable
+ *  screenshots. */
+const DEFAULT_FONT_LINKS = [
+    '<link rel="preconnect" href="https://fonts.googleapis.com">',
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+    '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">',
+].join('\n');
+/** Gallery chrome + determinism CSS. Kills animation/transition/caret so
+ *  screenshots are stable; lays out runes in labelled cells. */
+const GALLERY_CSS = `
+*, *::before, *::after {
+	animation-duration: 0s !important;
+	animation-delay: 0s !important;
+	transition-duration: 0s !important;
+	transition-delay: 0s !important;
+	caret-color: transparent !important;
+	scroll-behavior: auto !important;
+}
+body.rf-gallery {
+	background: var(--rf-color-bg);
+	color: var(--rf-color-text);
+	font-family: var(--rf-font-sans, sans-serif);
+	margin: 0;
+	padding: 2.5rem 1.5rem;
+}
+.rf-gallery__inner { max-width: 72rem; margin: 0 auto; }
+.rf-gallery__rune { margin: 0 0 3.5rem; }
+.rf-gallery__rune-title {
+	font-family: var(--rf-font-mono, monospace);
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--rf-color-muted, #888);
+	border-bottom: 1px solid var(--rf-color-border, #ddd);
+	padding-bottom: 0.5rem;
+	margin: 0 0 1.5rem;
+}
+.rf-gallery__cell { margin: 0 0 2rem; }
+.rf-gallery__gap {
+	font-family: var(--rf-font-mono, monospace);
+	font-size: 0.75rem;
+	color: var(--rf-color-muted, #999);
+	border: 1px dashed var(--rf-color-border, #ccc);
+	border-radius: var(--rf-radius-sm, 4px);
+	padding: 0.75rem 1rem;
+}
+.rf-gallery__cell-label {
+	display: block;
+	font-family: var(--rf-font-mono, monospace);
+	font-size: 0.6875rem;
+	color: var(--rf-color-muted, #999);
+	margin: 0 0 0.5rem;
+}
+`.trim();
+/** Determinism reset for layout fixtures (no gallery chrome — the layout *is*
+ *  the page). Kills animation/transition/caret so screenshots are stable. */
+const LAYOUT_RESET_CSS = `
+*, *::before, *::after {
+	animation-duration: 0s !important;
+	animation-delay: 0s !important;
+	transition-duration: 0s !important;
+	transition-delay: 0s !important;
+	caret-color: transparent !important;
+	scroll-behavior: auto !important;
+}
+body { margin: 0; background: var(--rf-color-bg); color: var(--rf-color-text); font-family: var(--rf-font-sans, sans-serif); }
+`.trim();
+/**
+ * Render a standalone full-page document for a layout fixture — the layout's
+ * own chrome *is* the page (no gallery cell grid), so the harness can shoot it
+ * whole-page at multiple viewports.
+ */
+export function renderLayoutDocument(opts) {
+    const { mode, themeCss, bodyHtml, name, fontLinks = DEFAULT_FONT_LINKS, behaviorScript } = opts;
+    const htmlAttr = mode === 'dark' ? ' data-theme="dark"' : '';
+    const tail = behaviorScript
+        ? `<script type="application/json" id="rf-context">{"pages":[],"currentUrl":"/"}</script>\n<script>${behaviorScript}</script>\n`
+        : '';
+    return `<!DOCTYPE html>
+<html lang="en"${htmlAttr}>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>refrakt layout — ${name} (${mode})</title>
+${fontLinks}
+<style>${themeCss}</style>
+<style>${LAYOUT_RESET_CSS}</style>
+</head>
+<body>
+${bodyHtml}
+${tail}</body>
+</html>
+`;
+}
+function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/**
+ * Render the full self-contained gallery HTML document for one mode. Cells are
+ * grouped by rune; each carries a stable `data-gallery-cell="<rune>--<variant>"`
+ * anchor so the harness ({% WORK-409 %}) can clip per variant.
+ */
+export function renderGalleryDocument(opts) {
+    const { mode, themeCss, cells, fontLinks = DEFAULT_FONT_LINKS, behaviorScript } = opts;
+    // Group cells by rune, preserving insertion order.
+    const byRune = new Map();
+    for (const cell of cells) {
+        const list = byRune.get(cell.rune) ?? [];
+        list.push(cell);
+        byRune.set(cell.rune, list);
+    }
+    const sections = [];
+    for (const [rune, runeCells] of byRune) {
+        const cellHtml = runeCells.map(cell => {
+            const anchor = `${cell.rune}--${cell.variant}`;
+            return `      <div class="rf-gallery__cell" data-gallery-cell="${escapeHtml(anchor)}" data-rune="${escapeHtml(cell.rune)}" data-variant="${escapeHtml(cell.variant)}">
+        <span class="rf-gallery__cell-label">${escapeHtml(cell.variant)}</span>
+${cell.html}
+      </div>`;
+        }).join('\n');
+        sections.push(`    <section class="rf-gallery__rune" data-gallery-rune="${escapeHtml(rune)}">
+      <h2 class="rf-gallery__rune-title">${escapeHtml(rune)}</h2>
+${cellHtml}
+    </section>`);
+    }
+    const htmlAttr = mode === 'dark' ? ' data-theme="dark"' : '';
+    return `<!DOCTYPE html>
+<html lang="en"${htmlAttr}>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>refrakt gallery (${mode})</title>
+${fontLinks}
+<style>${themeCss}</style>
+<style>${GALLERY_CSS}</style>
+</head>
+<body class="rf-gallery">
+<div class="rf-gallery__inner">
+${sections.join('\n')}
+</div>
+${behaviorScript ? `<script type="application/json" id="rf-context">{"pages":[],"currentUrl":"/"}</script>\n<script>${behaviorScript}</script>\n` : ''}</body>
+</html>
+`;
+}
+//# sourceMappingURL=gallery.js.map

package/dist/lib/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","sourceRoot":"","sources":["../../src/lib/gallery.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/cli",
   "description": "CLI tools for refrakt.md",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -36,10 +36,12 @@
   },
   "dependencies": {
     "@markdoc/markdoc": "0.4.0",
-    "@refrakt-md/ai": "0.21.0",
-    "@refrakt-md/editor": "0.21.0",
-    "@refrakt-md/runes": "0.21.0",
-    "@refrakt-md/transform": "0.21.0",
+    "@refrakt-md/ai": "0.22.0",
+    "@refrakt-md/editor": "0.22.0",
+    "@refrakt-md/html": "0.22.0",
+    "@refrakt-md/runes": "0.22.0",
+    "@refrakt-md/transform": "0.22.0",
+    "esbuild": "^0.27.5",
     "postcss": "^8.4.0"
   }
 }