@deckspec/cli 0.1.0

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 hayaoo
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@deckspec/cli",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "deckspec": "./dist/cli.js"
+  },
+  "dependencies": {
+    "chokidar": "^4.0.0",
+    "js-yaml": "^4.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.23.0",
+    "@deckspec/dsl": "0.1.0",
+    "@deckspec/schema": "0.1.0",
+    "@deckspec/renderer": "0.1.0"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hayaoo/deckspec",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/hayaoo/deckspec",
+  "bugs": {
+    "url": "https://github.com/hayaoo/deckspec/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  }
+}

package/src/cli.ts

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+
+import { validateCommand } from "./commands/validate.js";
+import { renderCommand } from "./commands/render.js";
+import { approveCommand } from "./commands/approve.js";
+import { lockCommand } from "./commands/lock.js";
+import { patternsCommand } from "./commands/patterns.js";
+import { devCommand } from "./commands/dev.js";
+
+const USAGE = `
+Usage: deckspec <command> [options]
+
+Commands:
+  validate <file>           Validate a deck YAML file
+  render <file> -o <output> Render a deck YAML file to HTML
+  approve <file> [options]  Approve/reject slides or archive/activate decks
+  lock <file> [options]     Lock an approved slide as a reusable pattern
+  patterns [--theme <name>] List available patterns with schemas
+  dev [dir]                 Start dev server with dashboard (port 3002)
+
+Approve options:
+  --slide <index[,...]>     Slide indices to approve
+  --reject                  Reject (reset to generated) instead of approve
+  --archive                 Archive the deck
+  --activate                Activate an archived deck
+
+Lock options:
+  --slide <index>           Slide index to lock
+  --name <pattern-name>     Name for the generated pattern
+
+Options:
+  --help                    Show this help message
+`.trim();
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+    console.log(USAGE);
+    process.exit(0);
+  }
+
+  const command = args[0];
+
+  switch (command) {
+    case "validate": {
+      const filePath = args[1];
+      if (!filePath) {
+        console.error("Error: Missing file path.\n");
+        console.error("Usage: deckspec validate <file>");
+        process.exit(1);
+      }
+      await validateCommand(filePath);
+      break;
+    }
+
+    case "render": {
+      const filePath = args[1];
+      if (!filePath) {
+        console.error("Error: Missing file path.\n");
+        console.error("Usage: deckspec render <file> -o <output>");
+        process.exit(1);
+      }
+
+      const outputFlagIndex = args.indexOf("-o");
+      const outputPath = outputFlagIndex !== -1 ? args[outputFlagIndex + 1] : undefined;
+
+      if (!outputPath) {
+        console.error("Error: Missing output path. Use -o <output> to specify.\n");
+        console.error("Usage: deckspec render <file> -o <output>");
+        process.exit(1);
+      }
+
+      await renderCommand(filePath, outputPath);
+      break;
+    }
+
+    case "approve": {
+      const filePath = args[1];
+      if (!filePath) {
+        console.error("Error: Missing file path.\n");
+        console.error("Usage: deckspec approve <file> --slide <index>");
+        process.exit(1);
+      }
+      await approveCommand(filePath, args.slice(2));
+      break;
+    }
+
+    case "lock": {
+      const filePath = args[1];
+      if (!filePath) {
+        console.error("Error: Missing file path.\n");
+        console.error("Usage: deckspec lock <file> --slide <index> --name <pattern-name>");
+        process.exit(1);
+      }
+      await lockCommand(filePath, args.slice(2));
+      break;
+    }
+
+    case "patterns": {
+      await patternsCommand(args.slice(1));
+      break;
+    }
+
+    case "dev": {
+      const dir = args[1] || process.cwd();
+      await devCommand(dir);
+      break;
+    }
+
+    default: {
+      console.error(`Error: Unknown command "${command}".\n`);
+      console.log(USAGE);
+      process.exit(1);
+    }
+  }
+}
+
+main().catch((error: unknown) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(`Error: ${message}`);
+  process.exit(1);
+});

package/src/commands/approve.ts

@@ -0,0 +1,74 @@
+import {
+  approveSlide,
+  rejectSlide,
+  archiveDeck,
+  activateDeck,
+} from "@deckspec/dsl";
+
+interface ApproveOptions {
+  slideIndices?: number[];
+  reject?: boolean;
+  archive?: boolean;
+  activate?: boolean;
+}
+
+function parseOptions(args: string[]): ApproveOptions {
+  const options: ApproveOptions = {};
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--slide" && args[i + 1]) {
+      options.slideIndices = args[i + 1].split(",").map((s) => {
+        const n = parseInt(s.trim(), 10);
+        if (Number.isNaN(n) || n < 0) {
+          throw new Error(`Invalid slide index: "${s.trim()}"`);
+        }
+        return n;
+      });
+      i++;
+    } else if (arg === "--reject") {
+      options.reject = true;
+    } else if (arg === "--archive") {
+      options.archive = true;
+    } else if (arg === "--activate") {
+      options.activate = true;
+    }
+  }
+
+  return options;
+}
+
+export async function approveCommand(
+  filePath: string,
+  extraArgs: string[],
+): Promise<void> {
+  const options = parseOptions(extraArgs);
+
+  if (options.archive) {
+    await archiveDeck(filePath);
+    console.log(`Archived deck: ${filePath}`);
+    return;
+  }
+
+  if (options.activate) {
+    await activateDeck(filePath);
+    console.log(`Activated deck: ${filePath}`);
+    return;
+  }
+
+  if (!options.slideIndices || options.slideIndices.length === 0) {
+    console.error("Error: Specify slides with --slide <index[,index,...]>");
+    console.error("  Or use --archive / --activate for deck lifecycle.");
+    process.exit(1);
+  }
+
+  for (const index of options.slideIndices) {
+    if (options.reject) {
+      await rejectSlide(filePath, index);
+      console.log(`Rejected slide ${index} in ${filePath}`);
+    } else {
+      await approveSlide(filePath, index);
+      console.log(`Approved slide ${index} in ${filePath}`);
+    }
+  }
+}

package/src/commands/dev.ts

@@ -0,0 +1,363 @@
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { resolve, dirname, join } from "node:path";
+import { loadDeckFile, validateDeck, scanDecks, approveSlide, rejectSlide, archiveDeck, activateDeck } from "@deckspec/dsl";
+import type { Deck, Slide } from "@deckspec/schema";
+import { readdir, readFile, stat } from "node:fs/promises";
+import { renderDeck, renderDashboard, renderSlide, renderThemeDetail, loadThemeCSS, loadThemeTokens, extractThemeName, resolveThemePatternsDir, resolveThemePatternsSrcDir, compileTsxCached, clearCompileCache, type DeckWithPreviews, type ThemeSummary } from "@deckspec/renderer";
+
+const PORT = 3002;
+
+/** SSE clients for live reload */
+const sseClients = new Set<ServerResponse>();
+
+function sendSSE(event: string, data: string = ""): void {
+  for (const res of sseClients) {
+    res.write(`event: ${event}\ndata: ${data}\n\n`);
+  }
+}
+
+function readBody(req: IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    req.on("data", (chunk: Buffer) => chunks.push(chunk));
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf-8")));
+    req.on("error", reject);
+  });
+}
+
+function json(res: ServerResponse, status: number, data: unknown): void {
+  res.writeHead(status, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(data));
+}
+
+function html(res: ServerResponse, content: string): void {
+  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  res.end(content);
+}
+
+function error(res: ServerResponse, status: number, message: string): void {
+  res.writeHead(status, { "Content-Type": "text/plain" });
+  res.end(message);
+}
+
+async function renderDeckByPath(
+  baseDir: string,
+  relativePath: string,
+): Promise<string> {
+  const filePath = resolve(baseDir, relativePath);
+  const raw = await loadDeckFile(filePath);
+  const basePath = dirname(filePath);
+  const themeName = extractThemeName(raw);
+  const patternsDir = resolveThemePatternsDir(themeName);
+  const result = await validateDeck(raw, { basePath, patternsDir, compileTsx: compileTsxCached });
+
+  if (!result.valid) {
+    const errors = result.results
+      .filter((r) => !r.valid)
+      .map((r) => `slides[${r.index}]: ${r.errors?.issues.map((i) => i.message).join(", ")}`)
+      .join("\n");
+    throw new Error(`Validation failed:\n${errors}`);
+  }
+
+  const deck = raw as Deck;
+  const themeCSS = await loadThemeCSS(deck.meta.theme);
+  const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+  return renderDeck(deck, themeCSS, { basePath, patternsDir, patternsSrcDir });
+}
+
+async function handleRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  baseDir: string,
+): Promise<void> {
+  const url = new URL(req.url ?? "/", `http://localhost:${PORT}`);
+  const pathname = url.pathname;
+  const method = req.method ?? "GET";
+
+  try {
+    // SSE endpoint
+    if (method === "GET" && pathname === "/events") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      });
+      res.write(":\n\n");
+      sseClients.add(res);
+      req.on("close", () => sseClients.delete(res));
+      return;
+    }
+
+    // Dashboard
+    if (method === "GET" && pathname === "/") {
+      const summaries = await scanDecks(baseDir);
+
+      // Scan themes
+      const themes: ThemeSummary[] = [];
+      const themesDir = join(baseDir, "themes");
+      try {
+        const themeDirs = await readdir(themesDir);
+        for (const dir of themeDirs) {
+          try {
+            const dirStat = await stat(join(themesDir, dir));
+            if (!dirStat.isDirectory()) continue;
+            const tokens = await loadThemeTokens(dir);
+            const patternsSrcDir = resolveThemePatternsSrcDir(dir);
+            let patternCount = 0;
+            try {
+              const patternEntries = await readdir(patternsSrcDir);
+              patternCount = patternEntries.filter((e) => !e.startsWith("_") && !e.startsWith(".") && !e.includes(".")).length;
+            } catch { /* no patterns dir */ }
+            themes.push({
+              name: dir,
+              displayName: tokens.displayName,
+              patternCount,
+              colors: [
+                { name: "foreground", hex: tokens.colors.foreground },
+                { name: "primary", hex: tokens.colors.primary },
+                { name: "background", hex: tokens.colors.background },
+                { name: "card", hex: tokens.colors["card-background"] ?? tokens.colors.background },
+              ],
+            });
+          } catch { /* skip invalid theme */ }
+        }
+      } catch { /* no themes dir */ }
+
+      // Build previews for each deck (first slide only for thumbnail)
+      const decksWithPreviews: DeckWithPreviews[] = [];
+      let themeCSS = "";
+
+      for (const summary of summaries) {
+        try {
+          const raw = await loadDeckFile(summary.filePath);
+          const deck = raw as Deck;
+          const basePath = dirname(summary.filePath);
+          const themeName = extractThemeName(raw);
+          const patternsDir = resolveThemePatternsDir(themeName);
+          const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+
+          if (!themeCSS) {
+            themeCSS = await loadThemeCSS(deck.meta.theme);
+          }
+
+          // Only render first slide for Home thumbnail
+          const slidePreviews = [];
+          if (deck.slides.length > 0) {
+            const slide = deck.slides[0];
+            let previewHtml: string;
+            try {
+              previewHtml = await renderSlide(slide, { basePath, patternsDir, patternsSrcDir });
+            } catch {
+              previewHtml = `<div style="padding:1rem;color:#999;font-size:12px">Preview unavailable</div>`;
+            }
+            slidePreviews.push({
+              index: 0,
+              state: String(slide.state ?? "generated"),
+              html: previewHtml,
+              file: slide.file,
+            });
+          }
+
+          // Get mtime of deck.yaml
+          let mtime: string | undefined;
+          try {
+            const fileStat = await stat(summary.filePath);
+            mtime = fileStat.mtime.toISOString();
+          } catch { /* ignore */ }
+
+          decksWithPreviews.push({ summary, slidePreviews, mtime });
+        } catch {
+          let mtime: string | undefined;
+          try {
+            const fileStat = await stat(summary.filePath);
+            mtime = fileStat.mtime.toISOString();
+          } catch { /* ignore */ }
+          decksWithPreviews.push({
+            summary,
+            slidePreviews: [],
+            mtime,
+          });
+        }
+      }
+
+      const dashboardHtml = renderDashboard(decksWithPreviews, {
+        mode: "interactive",
+        themeCSS,
+      }, themes);
+      html(res, dashboardHtml);
+      return;
+    }
+
+    // Theme detail: /theme/<name>
+    if (method === "GET" && pathname.startsWith("/theme/")) {
+      const themeName = decodeURIComponent(pathname.slice(7));
+      const tokens = await loadThemeTokens(themeName);
+
+      // Read pattern names and generate previews
+      const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+      const patternsDir = resolveThemePatternsDir(themeName);
+      let patternInfos: { name: string; previewHtml?: string }[] = [];
+      try {
+        const entries = await readdir(patternsSrcDir);
+        const patternNames = entries.filter((e) => !e.startsWith("_") && !e.startsWith(".") && !e.includes(".")).sort();
+
+        for (const name of patternNames) {
+          let previewHtml: string | undefined;
+          try {
+            // Check for examples.yaml
+            const examplesPath = join(patternsSrcDir, name, "examples.yaml");
+            const examplesRaw = await readFile(examplesPath, "utf-8");
+            const { load } = await import("js-yaml");
+            const examples = load(examplesRaw) as { name: string; vars: Record<string, unknown> }[];
+            if (examples && examples.length > 0) {
+              const firstExample = examples[0];
+              previewHtml = await renderSlide(
+                { file: name, vars: firstExample.vars } as Slide,
+                { basePath: patternsSrcDir, patternsDir, patternsSrcDir },
+              );
+            }
+          } catch { /* no examples or render failed */ }
+          patternInfos.push({ name, previewHtml });
+        }
+      } catch { /* no patterns */ }
+
+      // Load theme CSS for pattern previews
+      let themeCSS = "";
+      try {
+        themeCSS = await loadThemeCSS(themeName);
+      } catch { /* no theme CSS */ }
+
+      // Read design.md description (first paragraph)
+      let designDescription = "";
+      try {
+        const designMd = await readFile(join(baseDir, "themes", themeName, "design.md"), "utf-8");
+        const lines = designMd.split("\n");
+        const descLines: string[] = [];
+        let pastTitle = false;
+        for (const line of lines) {
+          if (!pastTitle) {
+            if (line.startsWith("# ")) { pastTitle = true; continue; }
+            continue;
+          }
+          if (line.startsWith("## ")) break;
+          if (line.trim() === "" && descLines.length > 0) break;
+          if (line.trim() !== "") descLines.push(line.trim());
+        }
+        designDescription = descLines.join("\n");
+      } catch { /* no design.md */ }
+
+      const detailHtml = renderThemeDetail({ tokens, patterns: patternInfos, designDescription, themeCSS });
+      html(res, detailHtml);
+      return;
+    }
+
+    // Deck viewer: /deck/<name> → decks/<name>/deck.yaml
+    if (method === "GET" && pathname.startsWith("/deck/")) {
+      const deckName = decodeURIComponent(pathname.slice(6));
+      const relativePath = `decks/${deckName}/deck.yaml`;
+      const deckHtml = await renderDeckByPath(baseDir, relativePath);
+      html(res, deckHtml);
+      return;
+    }
+
+    // API: approve slide
+    if (method === "POST" && pathname === "/api/approve") {
+      const body = JSON.parse(await readBody(req));
+      const filePath = resolve(baseDir, body.file);
+      await approveSlide(filePath, body.slideIndex);
+      sendSSE("reload");
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    // API: reject slide
+    if (method === "POST" && pathname === "/api/reject") {
+      const body = JSON.parse(await readBody(req));
+      const filePath = resolve(baseDir, body.file);
+      await rejectSlide(filePath, body.slideIndex);
+      sendSSE("reload");
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    // API: archive deck
+    if (method === "POST" && pathname === "/api/archive") {
+      const body = JSON.parse(await readBody(req));
+      const filePath = resolve(baseDir, body.file);
+      await archiveDeck(filePath);
+      sendSSE("reload");
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    // API: activate deck
+    if (method === "POST" && pathname === "/api/activate") {
+      const body = JSON.parse(await readBody(req));
+      const filePath = resolve(baseDir, body.file);
+      await activateDeck(filePath);
+      sendSSE("reload");
+      json(res, 200, { ok: true });
+      return;
+    }
+
+    error(res, 404, "Not found");
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error(`[dev] Error: ${message}`);
+    error(res, 500, message);
+  }
+}
+
+export async function devCommand(dir: string): Promise<void> {
+  const baseDir = resolve(dir);
+
+  // Try dynamic import of chokidar for file watching
+  let watcherActive = false;
+  try {
+    const chokidar = await import("chokidar");
+    const fsWatcher = chokidar.watch(
+      [
+        join(baseDir, "decks/**/*.yaml"),
+        join(baseDir, "decks/**/*.html"),
+        join(baseDir, "decks/**/*.tsx"),
+        join(baseDir, "themes/**/*"),
+      ],
+      {
+        ignoreInitial: true,
+        awaitWriteFinish: { stabilityThreshold: 200 },
+      },
+    );
+    fsWatcher.on("change", (filePath: string) => {
+      console.log("[dev] File changed, reloading...");
+      // Clear compile cache for .tsx files so they get recompiled
+      if (filePath.endsWith(".tsx")) {
+        clearCompileCache(filePath).catch(() => {});
+      }
+      sendSSE("reload");
+    });
+    fsWatcher.on("add", () => {
+      sendSSE("reload");
+    });
+    watcherActive = true;
+  } catch {
+    console.warn(
+      "[dev] chokidar not installed — file watching disabled. Run: pnpm add -D chokidar",
+    );
+  }
+
+  const server = createServer((req, res) => {
+    handleRequest(req, res, baseDir).catch((err) => {
+      console.error("[dev] Unhandled error:", err);
+      if (!res.headersSent) {
+        error(res, 500, "Internal server error");
+      }
+    });
+  });
+
+  server.listen(PORT, () => {
+    console.log(`\n  DeckSpec Dev Server`);
+    console.log(`  Dashboard:  http://localhost:${PORT}/`);
+    console.log(`  Watching:   ${baseDir}`);
+    console.log(`  ${watcherActive ? "Live reload: enabled" : "Live reload: disabled (install chokidar)"}\n`);
+  });
+}

package/src/commands/lock.ts

@@ -0,0 +1,195 @@
+import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { resolve, dirname, join } from "node:path";
+import { loadDeckFile, lockSlide } from "@deckspec/dsl";
+import type { Deck } from "@deckspec/schema";
+import { renderSlide, extractThemeName, resolveThemePatternsDir, resolveThemePatternsSrcDir } from "@deckspec/renderer";
+
+/**
+ * Extracts text nodes from HTML as variable candidates.
+ * Returns a map of variable names to their values.
+ */
+function extractVarsFromHtml(html: string): Record<string, string> {
+  const vars: Record<string, string> = {};
+
+  // Extract <h1> → title
+  const h1Match = /<h1[^>]*>(.*?)<\/h1>/i.exec(html);
+  if (h1Match) {
+    vars.title = h1Match[1].replace(/<[^>]*>/g, "").trim();
+  }
+
+  // Extract <h2> → headline
+  const h2Match = /<h2[^>]*>(.*?)<\/h2>/i.exec(html);
+  if (h2Match) {
+    vars.headline = h2Match[1].replace(/<[^>]*>/g, "").trim();
+  }
+
+  // Extract first <p> → subtitle or body
+  const pMatch = /<p[^>]*>(.*?)<\/p>/i.exec(html);
+  if (pMatch) {
+    const text = pMatch[1].replace(/<[^>]*>/g, "").trim();
+    if (vars.title && !vars.headline) {
+      vars.subtitle = text;
+    } else {
+      vars.body = text;
+    }
+  }
+
+  return vars;
+}
+
+/**
+ * Generates a .tsx pattern file from HTML content and extracted vars.
+ */
+function generatePatternTsx(
+  name: string,
+  html: string,
+  vars: Record<string, string>,
+): string {
+  const componentName = name
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+
+  const schemaFields = Object.entries(vars)
+    .map(([key, value]) => {
+      const maxLen = Math.max(value.length * 2, 60);
+      return `  ${key}: z.string().min(1).max(${maxLen}).describe("${key}"),`;
+    })
+    .join("\n");
+
+  // Replace literal values with JSX expressions in the HTML
+  let jsxBody = html.trim();
+  for (const [key, value] of Object.entries(vars)) {
+    // Escape special regex characters in value
+    const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    jsxBody = jsxBody.replace(new RegExp(`>${escaped}<`, "g"), `>{${key}}<`);
+  }
+
+  // Convert HTML attributes to JSX
+  jsxBody = jsxBody.replace(/class="/g, 'className="');
+  jsxBody = jsxBody.replace(/style="([^"]*)"/g, (_match, styleStr: string) => {
+    const props = styleStr
+      .split(";")
+      .filter(Boolean)
+      .map((prop: string) => {
+        const [k, v] = prop.split(":").map((s: string) => s.trim());
+        const camelKey = k.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+        // Try to convert numeric values
+        const numVal = parseFloat(v);
+        if (!isNaN(numVal) && v.endsWith("px")) {
+          return `${camelKey}: ${numVal}`;
+        }
+        return `${camelKey}: "${v}"`;
+      })
+      .join(", ");
+    return `style={{ ${props} }}`;
+  });
+
+  const propsDestructure = Object.keys(vars).join(", ");
+
+  return `import { z } from "zod";
+
+export const schema = z.object({
+${schemaFields}
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ${componentName}({ ${propsDestructure} }: Props) {
+  return (
+    ${jsxBody}
+  );
+}
+`;
+}
+
+interface LockOptions {
+  slideIndex: number;
+  patternName: string;
+}
+
+function parseOptions(args: string[]): LockOptions {
+  let slideIndex: number | undefined;
+  let patternName: string | undefined;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--slide" && args[i + 1]) {
+      slideIndex = parseInt(args[i + 1], 10);
+      if (Number.isNaN(slideIndex) || slideIndex < 0) {
+        throw new Error(`Invalid slide index: "${args[i + 1]}"`);
+      }
+      i++;
+    } else if (arg === "--name" && args[i + 1]) {
+      patternName = args[i + 1];
+      i++;
+    }
+  }
+
+  if (slideIndex === undefined) {
+    throw new Error("Missing --slide <index>");
+  }
+  if (!patternName) {
+    throw new Error("Missing --name <pattern-name>");
+  }
+
+  return { slideIndex, patternName };
+}
+
+export async function lockCommand(
+  filePath: string,
+  extraArgs: string[],
+): Promise<void> {
+  const options = parseOptions(extraArgs);
+  const absPath = resolve(filePath);
+  const basePath = dirname(absPath);
+  const raw = await loadDeckFile(absPath);
+  const themeName = extractThemeName(raw);
+  const patternsDir = resolveThemePatternsDir(themeName);
+  const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+
+  const deck = raw as Deck;
+
+  if (options.slideIndex < 0 || options.slideIndex >= deck.slides.length) {
+    console.error(
+      `Error: Slide index ${options.slideIndex} out of range (0–${deck.slides.length - 1})`,
+    );
+    process.exit(1);
+  }
+
+  const slide = deck.slides[options.slideIndex];
+  const currentState = slide.state ?? "generated";
+
+  if (currentState !== "approved") {
+    console.error(
+      `Error: Slide ${options.slideIndex} is "${currentState}". Only "approved" slides can be locked.`,
+    );
+    process.exit(1);
+  }
+
+  // Render the slide to get its HTML
+  const slideHtml = await renderSlide(slide, { basePath, patternsDir, patternsSrcDir });
+
+  // Extract variables from the HTML
+  const vars = extractVarsFromHtml(slideHtml);
+
+  if (Object.keys(vars).length === 0) {
+    console.error("Warning: No text variables could be extracted from the slide.");
+    console.error("The pattern will be generated without variables.");
+  }
+
+  // Generate the .tsx pattern
+  const tsxContent = generatePatternTsx(options.patternName, slideHtml, vars);
+
+  // Write the pattern file to source directory
+  const patternDir = join(patternsSrcDir, options.patternName);
+  await mkdir(patternDir, { recursive: true });
+  const patternPath = join(patternDir, "index.tsx");
+  await writeFile(patternPath, tsxContent, "utf-8");
+  console.log(`\u2713 Generated pattern: ${patternPath}`);
+
+  // Update the deck YAML: rewrite the slide entry
+  await lockSlide(absPath, options.slideIndex, options.patternName, vars);
+  console.log(`\u2713 Locked slide ${options.slideIndex} → pattern "${options.patternName}"`);
+  console.log(`\nRebuild patterns to use: pnpm build`);
+}

package/src/commands/patterns.ts

@@ -0,0 +1,99 @@
+import { readdir, readFile, stat } from "node:fs/promises";
+import { join } from "node:path";
+import { resolveThemePatternsDir, resolveThemePatternsSrcDir } from "@deckspec/renderer";
+import yaml from "js-yaml";
+
+/**
+ * Lists available patterns with their schema definitions.
+ * --examples flag shows example vars from examples.yaml.
+ */
+export async function patternsCommand(args: string[]): Promise<void> {
+  let themeName = "noir-display";
+  let showExamples = false;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--theme" && args[i + 1]) {
+      themeName = args[i + 1];
+      i++;
+    }
+    if (args[i] === "--examples") {
+      showExamples = true;
+    }
+  }
+
+  const patternsDir = resolveThemePatternsDir(themeName);
+  const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+
+  let entries: string[];
+  try {
+    entries = await readdir(patternsDir);
+  } catch {
+    console.log(`No patterns found for theme "${themeName}".`);
+    return;
+  }
+
+  // Filter to directories that look like pattern names
+  const patternNames: string[] = [];
+  for (const name of entries) {
+    if (name.startsWith(".") || name.startsWith("_") || name === "node_modules" || name === "dist") continue;
+    try {
+      const s = await stat(join(patternsDir, name));
+      if (s.isDirectory()) patternNames.push(name);
+    } catch {
+      // skip
+    }
+  }
+
+  if (patternNames.length === 0) {
+    console.log(`No patterns found for theme "${themeName}".`);
+    return;
+  }
+
+  patternNames.sort();
+  console.log(`Available patterns (theme: ${themeName}):\n`);
+
+  for (const name of patternNames) {
+    const indexPath = join(patternsDir, name, "index.js");
+    try {
+      const mod = await import(indexPath);
+
+      // Check for examples.yaml
+      let hasExamples = false;
+      let examples: Array<{ name: string; description?: string; vars: unknown }> = [];
+      try {
+        const examplesPath = join(patternsSrcDir, name, "examples.yaml");
+        const examplesContent = await readFile(examplesPath, "utf-8");
+        examples = yaml.load(examplesContent) as typeof examples;
+        hasExamples = true;
+      } catch {
+        // no examples
+      }
+
+      if (mod.schema) {
+        const shape = mod.schema.shape;
+        const fields = Object.entries(shape)
+          .map(([key, val]: [string, any]) => {
+            const desc = val.description ?? "";
+            const optional = val.isOptional?.() ? "?" : "";
+            return `    ${key}${optional}: ${desc}`;
+          })
+          .join("\n");
+        const badge = hasExamples ? " [examples]" : "";
+        console.log(`  ${name}:${badge}`);
+        console.log(fields);
+      } else {
+        console.log(`  ${name}: (no schema)`);
+      }
+
+      // Show examples if requested
+      if (showExamples && examples.length > 0) {
+        console.log(`    --- examples ---`);
+        for (const ex of examples) {
+          console.log(`    "${ex.name}"${ex.description ? ` — ${ex.description}` : ""}`);
+        }
+      }
+    } catch {
+      console.log(`  ${name}: (not compiled — run pnpm build)`);
+    }
+    console.log();
+  }
+}

package/src/commands/render.ts

@@ -0,0 +1,50 @@
+import { writeFile } from "node:fs/promises";
+import { resolve, dirname } from "node:path";
+import { loadDeckFile, validateDeck } from "@deckspec/dsl";
+import type { Deck } from "@deckspec/schema";
+import { renderDeck, loadThemeCSS, extractThemeName, resolveThemePatternsDir, resolveThemePatternsSrcDir, compileTsxCached } from "@deckspec/renderer";
+
+/**
+ * Renders a deck YAML file to standalone HTML.
+ * Validates the deck first, then renders via @deckspec/renderer.
+ */
+export async function renderCommand(
+  filePath: string,
+  outputPath: string,
+): Promise<void> {
+  const raw = await loadDeckFile(filePath);
+  const basePath = dirname(resolve(filePath));
+  const themeName = extractThemeName(raw);
+  const patternsDir = resolveThemePatternsDir(themeName);
+
+  // Validate first
+  const result = await validateDeck(raw, { basePath, patternsDir, compileTsx: compileTsxCached });
+
+  if (result.deckError) {
+    console.error("\u2717 Deck structure is invalid:");
+    for (const issue of result.deckError.issues) {
+      console.error(`  ${issue.path.join(".")}: ${issue.message}`);
+    }
+    process.exit(1);
+  }
+
+  if (!result.valid) {
+    console.error("\u2717 Validation failed. Fix errors before rendering:");
+    for (const slideResult of result.results) {
+      if (!slideResult.valid) {
+        for (const issue of slideResult.errors!.issues) {
+          console.error(`  slides[${slideResult.index}]: ${issue.message}`);
+        }
+      }
+    }
+    process.exit(1);
+  }
+
+  const deck = raw as Deck;
+  const themeCSS = await loadThemeCSS(deck.meta.theme);
+  const patternsSrcDir = resolveThemePatternsSrcDir(themeName);
+  const html = await renderDeck(deck, themeCSS, { basePath, patternsDir, patternsSrcDir });
+
+  await writeFile(outputPath, html, "utf-8");
+  console.log(`\u2713 Rendered ${result.results.length} slide(s) to ${outputPath}`);
+}

package/src/commands/validate.ts

@@ -0,0 +1,41 @@
+import { resolve, dirname } from "node:path";
+import { loadDeckFile, validateDeck } from "@deckspec/dsl";
+import { extractThemeName, resolveThemePatternsDir, compileTsxCached } from "@deckspec/renderer";
+
+/**
+ * Validates a deck YAML file.
+ * Prints per-slide results to stdout and exits with code 1 if any errors.
+ */
+export async function validateCommand(filePath: string): Promise<void> {
+  const raw = await loadDeckFile(filePath);
+  const basePath = dirname(resolve(filePath));
+  const themeName = extractThemeName(raw);
+  const patternsDir = resolveThemePatternsDir(themeName);
+
+  const result = await validateDeck(raw, { basePath, patternsDir, compileTsx: compileTsxCached });
+
+  if (result.deckError) {
+    console.error("\u2717 Deck structure is invalid:");
+    for (const issue of result.deckError.issues) {
+      console.error(`  ${issue.path.join(".")}: ${issue.message}`);
+    }
+    process.exit(1);
+  }
+
+  for (const slideResult of result.results) {
+    if (slideResult.valid) {
+      console.log(`\u2713 slides[${slideResult.index}]: valid`);
+    } else {
+      for (const issue of slideResult.errors!.issues) {
+        const detail = issue.message;
+        console.error(`\u2717 slides[${slideResult.index}]: ${detail}`);
+      }
+    }
+  }
+
+  if (!result.valid) {
+    process.exit(1);
+  }
+
+  console.log(`\nAll ${result.results.length} slide(s) passed validation.`);
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { validateCommand } from "./commands/validate.js";
+export { renderCommand } from "./commands/render.js";
+export { lockCommand } from "./commands/lock.js";
+export { patternsCommand } from "./commands/patterns.js";

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/"],
+  "references": [
+    { "path": "../schema" },
+    { "path": "../dsl" },
+    { "path": "../renderer" }
+  ]
+}