@deckspec/renderer 0.1.0

package/src/dashboard-css.ts

@@ -0,0 +1,418 @@
+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;
+}
+`;

package/src/dashboard-js.ts

@@ -0,0 +1,14 @@
+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
+    };
+  }
+})();
+`;

package/src/index.ts

@@ -0,0 +1,27 @@
+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";

package/src/render-dashboard.ts

@@ -0,0 +1,144 @@
+import type { DeckSummary } from "@deckspec/dsl";
+import { dashboardCSS } from "./dashboard-css.js";
+import { dashboardJS } from "./dashboard-js.js";
+
+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;
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function renderThemeRow(theme: ThemeSummary): string {
+  const colorDots = theme.colors
+    .map(
+      (c) =>
+        `<span class="color-dot" style="background:${escapeHtml(c.hex)}" title="${escapeHtml(c.name)}: ${escapeHtml(c.hex)}"></span>`,
+    )
+    .join("");
+
+  return `<a class="list-row list-row-link" href="/theme/${escapeHtml(theme.name)}">
+  <div class="list-row-left">
+    <div class="color-dots">${colorDots}</div>
+    <div class="list-row-text">
+      <span class="list-row-name">${escapeHtml(theme.displayName)}</span>
+      <span class="list-row-meta">${theme.patternCount} patterns</span>
+    </div>
+  </div>
+  <span class="list-row-arrow">›</span>
+</a>`;
+}
+
+function renderDeckRow(deck: DeckWithPreviews): string {
+  const { summary } = deck;
+  const deckName = summary.relativePath
+    .replace(/^decks\//, "")
+    .replace(/\/deck\.yaml$/, "");
+  const themeName = escapeHtml(summary.meta.theme);
+  const approved = summary.approvedCount;
+  const total = summary.slideCount;
+
+  // First slide thumbnail
+  const firstSlide = deck.slidePreviews[0];
+  const thumbHtml = firstSlide
+    ? `<div class="deck-thumb"><div class="deck-thumb-inner">${firstSlide.html}</div></div>`
+    : `<div class="deck-thumb deck-thumb-empty"></div>`;
+
+  // Format mtime
+  const dateStr = deck.mtime
+    ? ` · ${new Date(deck.mtime).toLocaleDateString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit" })}`
+    : "";
+
+  return `<a class="list-row list-row-link" href="/deck/${escapeHtml(deckName)}">
+  <div class="list-row-left">
+    ${thumbHtml}
+    <div class="list-row-text">
+      <span class="list-row-name">${escapeHtml(summary.meta.title)}</span>
+      <span class="list-row-meta">${themeName} · ${total} slides${dateStr}</span>
+    </div>
+  </div>
+  <div class="list-row-right">
+    <span class="list-row-arrow">›</span>
+  </div>
+</a>`;
+}
+
+/**
+ * Renders the dashboard as a standalone HTML page.
+ */
+export function renderDashboard(
+  decks: DeckWithPreviews[],
+  options: DashboardOptions = { mode: "static" },
+  themes: ThemeSummary[] = [],
+): string {
+  const themesHtml =
+    themes.length > 0
+      ? themes.map((t) => renderThemeRow(t)).join("\n")
+      : `<div class="empty-state">No themes found.</div>`;
+
+  const decksHtml =
+    decks.length > 0
+      ? decks.map((d) => renderDeckRow(d)).join("\n")
+      : `<div class="empty-state">No decks found. Create a deck.yaml to get started.</div>`;
+
+  return `<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DeckSpec</title>
+<style>
+${options.themeCSS ?? ""}
+${dashboardCSS}
+</style>
+</head>
+<body>
+<div class="dashboard">
+  <h1 class="page-title">DeckSpec</h1>
+
+  <section class="section">
+    <h2 class="section-title">Themes</h2>
+    <div class="list-group">${themesHtml}</div>
+  </section>
+
+  <section class="section">
+    <h2 class="section-title">Decks</h2>
+    <div class="list-group">${decksHtml}</div>
+  </section>
+</div>
+<script>
+${dashboardJS}
+</script>
+</body>
+</html>`;
+}