@deckspec/renderer 0.1.0 → 0.1.2

package/dist/compile-tsx.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Compiles a .tsx file on-the-fly using esbuild and returns
+ * the path to the compiled ESM module that can be dynamically imported.
+ *
+ * Used for deck-local patterns that are authored as .tsx but need
+ * to be executable at runtime without a prior build step.
+ */
+export declare function compileTsx(tsxPath: string): Promise<string>;
+/**
+ * Compiles a .tsx file with caching. Returns the path to the compiled module.
+ * Call `clearCompileCache()` to invalidate (e.g. on file change).
+ */
+export declare function compileTsxCached(tsxPath: string): Promise<string>;
+/**
+ * Clears a specific entry or the entire compile cache.
+ * Also removes the temporary compiled files.
+ */
+export declare function clearCompileCache(tsxPath?: string): Promise<void>;
+//# sourceMappingURL=compile-tsx.d.ts.map

package/dist/compile-tsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile-tsx.d.ts","sourceRoot":"","sources":["../src/compile-tsx.ts"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,wBAAsB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAiCjE;AAKD;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAOvE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA0BvE"}

package/dist/compile-tsx.js

@@ -0,0 +1,101 @@
+import { build } from "esbuild";
+import { mkdir, rm } from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { createHash } from "node:crypto";
+/**
+ * Returns a stable cache directory under the project root so that
+ * compiled modules can resolve node_modules (react, etc.) via
+ * standard Node resolution.
+ */
+function cacheDir() {
+    return join(process.cwd(), ".deckspec-cache");
+}
+/**
+ * Compiles a .tsx file on-the-fly using esbuild and returns
+ * the path to the compiled ESM module that can be dynamically imported.
+ *
+ * Used for deck-local patterns that are authored as .tsx but need
+ * to be executable at runtime without a prior build step.
+ */
+export async function compileTsx(tsxPath) {
+    // Use a hash of the source path for a stable, unique output name
+    const hash = createHash("md5").update(tsxPath).digest("hex").slice(0, 12);
+    const outDir = join(cacheDir(), hash);
+    await mkdir(outDir, { recursive: true });
+    const outFile = join(outDir, "index.mjs");
+    await build({
+        entryPoints: [tsxPath],
+        outfile: outFile,
+        bundle: true,
+        format: "esm",
+        platform: "node",
+        jsx: "automatic",
+        // Mark peer deps and heavy icon libraries as external —
+        // they're resolved from project node_modules
+        external: [
+            "react",
+            "react-dom",
+            "react/jsx-runtime",
+            "lucide-react",
+            "@phosphor-icons/react",
+            "recharts",
+        ],
+        // Allow resolving theme _lib and other deps from the source directory
+        nodePaths: [
+            join(process.cwd(), "node_modules"),
+            dirname(dirname(tsxPath)),
+        ],
+        logLevel: "warning",
+    });
+    return outFile;
+}
+/** Cache: source path → compiled module path */
+const compiledCache = new Map();
+/**
+ * Compiles a .tsx file with caching. Returns the path to the compiled module.
+ * Call `clearCompileCache()` to invalidate (e.g. on file change).
+ */
+export async function compileTsxCached(tsxPath) {
+    const cached = compiledCache.get(tsxPath);
+    if (cached)
+        return cached;
+    const compiled = await compileTsx(tsxPath);
+    compiledCache.set(tsxPath, compiled);
+    return compiled;
+}
+/**
+ * Clears a specific entry or the entire compile cache.
+ * Also removes the temporary compiled files.
+ */
+export async function clearCompileCache(tsxPath) {
+    if (tsxPath) {
+        const cached = compiledCache.get(tsxPath);
+        if (cached) {
+            compiledCache.delete(tsxPath);
+            try {
+                await rm(dirname(cached), { recursive: true, force: true });
+            }
+            catch {
+                // best-effort cleanup
+            }
+        }
+    }
+    else {
+        for (const compiled of compiledCache.values()) {
+            try {
+                await rm(dirname(compiled), { recursive: true, force: true });
+            }
+            catch {
+                // best-effort cleanup
+            }
+        }
+        compiledCache.clear();
+        try {
+            await rm(cacheDir(), { recursive: true, force: true });
+        }
+        catch {
+            // best-effort cleanup
+        }
+    }
+}
+//# sourceMappingURL=compile-tsx.js.map

package/dist/compile-tsx.js.map

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

package/dist/dashboard-css.d.ts

@@ -0,0 +1,2 @@
+export declare const dashboardCSS = "\n/* ================================================================ */\n/* Reset                                                            */\n/* ================================================================ */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n/* ================================================================ */\n/* Body                                                             */\n/* ================================================================ */\nbody {\n  background: #fff;\n  color: #1a1a1a;\n  font-family: system-ui, -apple-system, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  min-height: 100vh;\n}\n\n/* ================================================================ */\n/* Layout                                                           */\n/* ================================================================ */\n.dashboard {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 2.5rem 1.5rem;\n}\n\n/* ================================================================ */\n/* Navigation                                                       */\n/* ================================================================ */\n.page-nav {\n  margin-bottom: 1rem;\n}\n\n.page-nav a {\n  color: #737373;\n  text-decoration: none;\n  font-size: 0.85rem;\n}\n\n.page-nav a:hover {\n  color: #1a1a1a;\n}\n\n/* ================================================================ */\n/* Page Title                                                       */\n/* ================================================================ */\n.page-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: #1a1a1a;\n  margin-bottom: 2rem;\n}\n\n/* ================================================================ */\n/* Sections                                                         */\n/* ================================================================ */\n.section {\n  margin-bottom: 2.5rem;\n}\n\n.section-title {\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: #737373;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.75rem;\n}\n\n/* ================================================================ */\n/* List Group (shared by themes & decks on Home)                    */\n/* ================================================================ */\n.list-group {\n  border: 1px solid #e5e5e5;\n  border-radius: 0.5rem;\n  overflow: hidden;\n}\n\n.list-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.875rem 1rem;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.list-row:last-child {\n  border-bottom: none;\n}\n\n.list-row-link {\n  text-decoration: none;\n  color: inherit;\n  transition: background 0.1s;\n}\n\n.list-row-link:hover {\n  background: #fafafa;\n}\n\n.list-row-left {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  min-width: 0;\n}\n\n.list-row-right {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n\n.list-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n.list-row-name {\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: #1a1a1a;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.list-row-meta {\n  font-size: 0.75rem;\n  color: #a3a3a3;\n}\n\n.list-row-arrow {\n  color: #d4d4d4;\n  font-size: 1.2rem;\n  flex-shrink: 0;\n}\n\n/* ================================================================ */\n/* Color Dots (Theme row on Home)                                   */\n/* ================================================================ */\n.color-dots {\n  display: flex;\n  gap: 0;\n}\n\n.color-dot {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  box-shadow: 0 0 0 1px #e5e5e5;\n  flex-shrink: 0;\n}\n\n.color-dot + .color-dot {\n  margin-left: -6px;\n}\n\n/* ================================================================ */\n/* Deck Thumbnail (Deck row on Home)                                */\n/* ================================================================ */\n.deck-thumb {\n  width: 64px;\n  height: 36px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  border: 1px solid #e5e5e5;\n  flex-shrink: 0;\n  background: var(--color-background, #f4f4f4);\n}\n\n.deck-thumb-inner {\n  transform-origin: top left;\n  transform: scale(calc(64 / 1200));\n  width: 1200px;\n  height: 675px;\n  pointer-events: none;\n}\n\n.deck-thumb-inner .slide {\n  width: 1200px;\n  height: 675px;\n}\n\n.deck-thumb-empty {\n  background: #f5f5f5;\n}\n\n/* ================================================================ */\n/* Approval Chip (Deck row)                                         */\n/* ================================================================ */\n.approval-chip {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: #737373;\n  background: #f5f5f5;\n  padding: 0.15rem 0.5rem;\n  border-radius: 1rem;\n  white-space: nowrap;\n}\n\n.approval-chip.approval-done {\n  background: #dcfce7;\n  color: #166534;\n}\n\n/* ================================================================ */\n/* Theme Description (Theme Detail page)                            */\n/* ================================================================ */\n.theme-description {\n  font-size: 0.9rem;\n  color: #525252;\n  line-height: 1.7;\n  margin-bottom: 2rem;\n  white-space: pre-line;\n}\n\n/* ================================================================ */\n/* Color Grid (Theme Detail)                                        */\n/* ================================================================ */\n.color-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n}\n\n.color-swatch {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n\n.color-swatch-circle {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: 1px solid #e5e5e5;\n  flex-shrink: 0;\n}\n\n.color-swatch-info {\n  display: flex;\n  flex-direction: column;\n}\n\n.color-swatch-name {\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.color-swatch-hex {\n  font-size: 0.7rem;\n  color: #a3a3a3;\n  font-family: ui-monospace, monospace;\n}\n\n/* ================================================================ */\n/* Typography Samples (Theme Detail)                                */\n/* ================================================================ */\n.typo-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.typo-row {\n  display: flex;\n  align-items: baseline;\n  gap: 1rem;\n}\n\n.typo-label {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: #737373;\n  width: 2.5rem;\n  flex-shrink: 0;\n  font-family: ui-monospace, monospace;\n}\n\n.typo-meta {\n  font-size: 0.7rem;\n  color: #a3a3a3;\n  width: 7rem;\n  flex-shrink: 0;\n}\n\n.typo-sample {\n  color: #1a1a1a;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ================================================================ */\n/* Spacing Bars (Theme Detail)                                      */\n/* ================================================================ */\n.spacing-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.spacing-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.spacing-bar {\n  height: 8px;\n  background: #e5e5e5;\n  border-radius: 2px;\n}\n\n.spacing-label {\n  font-size: 0.7rem;\n  color: #a3a3a3;\n  font-family: ui-monospace, monospace;\n}\n\n/* ================================================================ */\n/* Pattern Grid (Theme Detail)                                      */\n/* ================================================================ */\n.pattern-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0.75rem;\n}\n\n.pattern-card {\n  border: 1px solid #e5e5e5;\n  border-radius: 0.375rem;\n  overflow: hidden;\n  background: #fff;\n}\n\n.pattern-thumb {\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  background: var(--color-background, #f4f4f4);\n  position: relative;\n}\n\n.pattern-thumb-inner {\n  transform-origin: top left;\n  --thumb-scale: 0.155;\n  transform: scale(var(--thumb-scale));\n  width: 1200px;\n  height: 675px;\n  pointer-events: none;\n}\n\n.pattern-thumb-inner .slide,\n.pattern-thumb-inner .slide-pad,\n.pattern-thumb-inner .slide-stack,\n.pattern-thumb-inner .slide-center,\n.pattern-thumb-inner .slide-white {\n  width: 1200px;\n  height: 675px;\n}\n\n.pattern-thumb-empty {\n  background: #f5f5f5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pattern-thumb-empty::after {\n  content: \"\";\n  width: 24px;\n  height: 24px;\n  border: 2px dashed #d4d4d4;\n  border-radius: 0.25rem;\n}\n\n.pattern-card-name {\n  display: block;\n  padding: 0.375rem 0.5rem;\n  font-size: 0.7rem;\n  color: #525252;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ================================================================ */\n/* Count Badge                                                      */\n/* ================================================================ */\n.count-badge {\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: #a3a3a3;\n  background: #f5f5f5;\n  padding: 0.1rem 0.4rem;\n  border-radius: 1rem;\n  margin-left: 0.375rem;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ================================================================ */\n/* Empty State                                                      */\n/* ================================================================ */\n.empty-state {\n  text-align: center;\n  padding: 2rem 1rem;\n  color: #a3a3a3;\n  font-size: 0.85rem;\n}\n";
+//# sourceMappingURL=dashboard-css.d.ts.map

package/dist/dashboard-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-css.d.ts","sourceRoot":"","sources":["../src/dashboard-css.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,mhTAiaxB,CAAC"}

package/dist/dashboard-css.js

@@ -0,0 +1,419 @@
+export const dashboardCSS = /* css */ `
+/* ================================================================ */
+/* Reset                                                            */
+/* ================================================================ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ================================================================ */
+/* Body                                                             */
+/* ================================================================ */
+body {
+  background: #fff;
+  color: #1a1a1a;
+  font-family: system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
+/* ================================================================ */
+/* Layout                                                           */
+/* ================================================================ */
+.dashboard {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem;
+}
+
+/* ================================================================ */
+/* Navigation                                                       */
+/* ================================================================ */
+.page-nav {
+  margin-bottom: 1rem;
+}
+
+.page-nav a {
+  color: #737373;
+  text-decoration: none;
+  font-size: 0.85rem;
+}
+
+.page-nav a:hover {
+  color: #1a1a1a;
+}
+
+/* ================================================================ */
+/* Page Title                                                       */
+/* ================================================================ */
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 2rem;
+}
+
+/* ================================================================ */
+/* Sections                                                         */
+/* ================================================================ */
+.section {
+  margin-bottom: 2.5rem;
+}
+
+.section-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #737373;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
+}
+
+/* ================================================================ */
+/* List Group (shared by themes & decks on Home)                    */
+/* ================================================================ */
+.list-group {
+  border: 1px solid #e5e5e5;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.list-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.list-row:last-child {
+  border-bottom: none;
+}
+
+.list-row-link {
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.1s;
+}
+
+.list-row-link:hover {
+  background: #fafafa;
+}
+
+.list-row-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.list-row-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.list-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.list-row-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-row-meta {
+  font-size: 0.75rem;
+  color: #a3a3a3;
+}
+
+.list-row-arrow {
+  color: #d4d4d4;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+/* ================================================================ */
+/* Color Dots (Theme row on Home)                                   */
+/* ================================================================ */
+.color-dots {
+  display: flex;
+  gap: 0;
+}
+
+.color-dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px #e5e5e5;
+  flex-shrink: 0;
+}
+
+.color-dot + .color-dot {
+  margin-left: -6px;
+}
+
+/* ================================================================ */
+/* Deck Thumbnail (Deck row on Home)                                */
+/* ================================================================ */
+.deck-thumb {
+  width: 64px;
+  height: 36px;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  flex-shrink: 0;
+  background: var(--color-background, #f4f4f4);
+}
+
+.deck-thumb-inner {
+  transform-origin: top left;
+  transform: scale(calc(64 / 1200));
+  width: 1200px;
+  height: 675px;
+  pointer-events: none;
+}
+
+.deck-thumb-inner .slide {
+  width: 1200px;
+  height: 675px;
+}
+
+.deck-thumb-empty {
+  background: #f5f5f5;
+}
+
+/* ================================================================ */
+/* Approval Chip (Deck row)                                         */
+/* ================================================================ */
+.approval-chip {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #737373;
+  background: #f5f5f5;
+  padding: 0.15rem 0.5rem;
+  border-radius: 1rem;
+  white-space: nowrap;
+}
+
+.approval-chip.approval-done {
+  background: #dcfce7;
+  color: #166534;
+}
+
+/* ================================================================ */
+/* Theme Description (Theme Detail page)                            */
+/* ================================================================ */
+.theme-description {
+  font-size: 0.9rem;
+  color: #525252;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+  white-space: pre-line;
+}
+
+/* ================================================================ */
+/* Color Grid (Theme Detail)                                        */
+/* ================================================================ */
+.color-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.color-swatch {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.color-swatch-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #e5e5e5;
+  flex-shrink: 0;
+}
+
+.color-swatch-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.color-swatch-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.color-swatch-hex {
+  font-size: 0.7rem;
+  color: #a3a3a3;
+  font-family: ui-monospace, monospace;
+}
+
+/* ================================================================ */
+/* Typography Samples (Theme Detail)                                */
+/* ================================================================ */
+.typo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.typo-row {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.typo-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #737373;
+  width: 2.5rem;
+  flex-shrink: 0;
+  font-family: ui-monospace, monospace;
+}
+
+.typo-meta {
+  font-size: 0.7rem;
+  color: #a3a3a3;
+  width: 7rem;
+  flex-shrink: 0;
+}
+
+.typo-sample {
+  color: #1a1a1a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ================================================================ */
+/* Spacing Bars (Theme Detail)                                      */
+/* ================================================================ */
+.spacing-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.spacing-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.spacing-bar {
+  height: 8px;
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.spacing-label {
+  font-size: 0.7rem;
+  color: #a3a3a3;
+  font-family: ui-monospace, monospace;
+}
+
+/* ================================================================ */
+/* Pattern Grid (Theme Detail)                                      */
+/* ================================================================ */
+.pattern-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+.pattern-card {
+  border: 1px solid #e5e5e5;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background: #fff;
+}
+
+.pattern-thumb {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--color-background, #f4f4f4);
+  position: relative;
+}
+
+.pattern-thumb-inner {
+  transform-origin: top left;
+  --thumb-scale: 0.155;
+  transform: scale(var(--thumb-scale));
+  width: 1200px;
+  height: 675px;
+  pointer-events: none;
+}
+
+.pattern-thumb-inner .slide,
+.pattern-thumb-inner .slide-pad,
+.pattern-thumb-inner .slide-stack,
+.pattern-thumb-inner .slide-center,
+.pattern-thumb-inner .slide-white {
+  width: 1200px;
+  height: 675px;
+}
+
+.pattern-thumb-empty {
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pattern-thumb-empty::after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  border: 2px dashed #d4d4d4;
+  border-radius: 0.25rem;
+}
+
+.pattern-card-name {
+  display: block;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.7rem;
+  color: #525252;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ================================================================ */
+/* Count Badge                                                      */
+/* ================================================================ */
+.count-badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #a3a3a3;
+  background: #f5f5f5;
+  padding: 0.1rem 0.4rem;
+  border-radius: 1rem;
+  margin-left: 0.375rem;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+/* ================================================================ */
+/* Empty State                                                      */
+/* ================================================================ */
+.empty-state {
+  text-align: center;
+  padding: 2rem 1rem;
+  color: #a3a3a3;
+  font-size: 0.85rem;
+}
+`;
+//# sourceMappingURL=dashboard-css.js.map

package/dist/dashboard-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-css.js","sourceRoot":"","sources":["../src/dashboard-css.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiarC,CAAC"}

package/dist/dashboard-js.d.ts

@@ -0,0 +1,2 @@
+export declare const dashboardJS = "\n(function() {\n  /* -- SSE live reload --------------------------------------------- */\n  if (typeof EventSource !== 'undefined') {\n    var es = new EventSource('/events');\n    es.addEventListener('reload', function() {\n      location.reload();\n    });\n    es.onerror = function() {\n      // Reconnect handled automatically by EventSource\n    };\n  }\n})();\n";
+//# sourceMappingURL=dashboard-js.d.ts.map

package/dist/dashboard-js.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-js.d.ts","sourceRoot":"","sources":["../src/dashboard-js.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,sXAavB,CAAC"}

package/dist/dashboard-js.js

@@ -0,0 +1,15 @@
+export const dashboardJS = /* js */ `
+(function() {
+  /* -- SSE live reload --------------------------------------------- */
+  if (typeof EventSource !== 'undefined') {
+    var es = new EventSource('/events');
+    es.addEventListener('reload', function() {
+      location.reload();
+    });
+    es.onerror = function() {
+      // Reconnect handled automatically by EventSource
+    };
+  }
+})();
+`;
+//# sourceMappingURL=dashboard-js.js.map

package/dist/dashboard-js.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-js.js","sourceRoot":"","sources":["../src/dashboard-js.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC;;;;;;;;;;;;;CAanC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { loadThemeTokens, loadThemeCSS, resolveThemePatternsDir, resolveThemePatternsSrcDir, extractThemeName, type ThemeTokens, } from "./theme.js";
+export { renderSlide, type RenderSlideContext } from "./render-slide.js";
+export { resolveAssets, sanitizeSvg, type AssetFieldSpec, } from "./resolve-assets.js";
+export { renderDeck } from "./render-deck.js";
+export { renderDashboard, type DeckWithPreviews, type SlidePreview, type ThemeSummary, } from "./render-dashboard.js";
+export { renderThemeDetail } from "./render-theme-detail.js";
+export { compileTsx, compileTsxCached, clearCompileCache, } from "./compile-tsx.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,uBAAuB,EACvB,0BAA0B,EAC1B,gBAAgB,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,aAAa,EACb,WAAW,EACX,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,YAAY,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export { loadThemeTokens, loadThemeCSS, resolveThemePatternsDir, resolveThemePatternsSrcDir, extractThemeName, } from "./theme.js";
+export { renderSlide } from "./render-slide.js";
+export { resolveAssets, sanitizeSvg, } from "./resolve-assets.js";
+export { renderDeck } from "./render-deck.js";
+export { renderDashboard, } from "./render-dashboard.js";
+export { renderThemeDetail } from "./render-theme-detail.js";
+export { compileTsx, compileTsxCached, clearCompileCache, } from "./compile-tsx.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,YAAY,EACZ,uBAAuB,EACvB,0BAA0B,EAC1B,gBAAgB,GAEjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAA2B,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,aAAa,EACb,WAAW,GAEZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,eAAe,GAIhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}

package/dist/render-dashboard.d.ts

@@ -0,0 +1,35 @@
+import type { DeckSummary } from "@deckspec/dsl";
+export interface SlidePreview {
+    index: number;
+    state: string;
+    html: string;
+    file?: string;
+}
+export interface DeckWithPreviews {
+    summary: DeckSummary;
+    slidePreviews: SlidePreview[];
+    /** Last modified date of deck.yaml (ISO string or undefined) */
+    mtime?: string;
+}
+export interface ThemeSummary {
+    name: string;
+    displayName: string;
+    patternCount: number;
+    /** Key colors for visual identification (3-4 swatches) */
+    colors: {
+        name: string;
+        hex: string;
+    }[];
+}
+interface DashboardOptions {
+    /** "interactive" enables approve/reject buttons (dev server mode) */
+    mode: "static" | "interactive";
+    /** Theme CSS to embed for slide previews */
+    themeCSS?: string;
+}
+/**
+ * Renders the dashboard as a standalone HTML page.
+ */
+export declare function renderDashboard(decks: DeckWithPreviews[], options?: DashboardOptions, themes?: ThemeSummary[]): string;
+export {};
+//# sourceMappingURL=render-dashboard.d.ts.map

package/dist/render-dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-dashboard.d.ts","sourceRoot":"","sources":["../src/render-dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,qEAAqE;IACrE,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC/B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,gBAAgB,EAAE,EACzB,OAAO,GAAE,gBAAqC,EAC9C,MAAM,GAAE,YAAY,EAAO,GAC1B,MAAM,CAyCR"}