@wire-dsl/cli 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,80 @@
+# @wire-dsl/cli
+
+Command-line interface for Wire-DSL. Transform `.wire` DSL files into interactive wireframes, components, and releases.
+
+## Installation
+
+```bash
+npm install -g @wire-dsl/cli
+```
+
+Or use with `npx`:
+
+```bash
+npx @wire-dsl/cli [command]
+```
+
+## Usage
+
+### Basic Commands
+
+```bash
+# Compile a .wire file to interactive HTML
+wire compile input.wire --output output.html
+
+# Watch mode for development
+wire watch input.wire --output output.html
+
+# Generate component definitions
+wire generate input.wire --output components.json
+
+# Validate .wire file syntax
+wire validate input.wire
+
+# Show version
+wire --version
+
+# Help
+wire --help
+```
+
+## What is Wire-DSL?
+
+Wire-DSL is a **block-declarative Domain-Specific Language** for creating interactive wireframes using code instead of visual tools.
+
+Write wireframes like this:
+
+```wire
+screen "Dashboard" {
+  grid(columns: 2, gap: 16) {
+    card "Revenue" {
+      text "Q4 Revenue"
+      heading "$2.5M"
+    }
+    
+    card "Users" {
+      text "Active Users"
+      heading "1.2K"
+    }
+  }
+}
+```
+
+## Features
+
+- 🎯 **Block-declarative syntax** - Intuitive, structured definitions
+- 📱 **23 UI components** - Buttons, forms, cards, modals, and more
+- 🎨 **Theming support** - Customize colors, typography, spacing
+- 🔄 **Responsive layouts** - Grid, Stack, Split containers
+- ⚡ **Fast compilation** - Powered by Chevrotain parser
+- 🧪 **Validation** - Zod-based schema validation
+
+## Documentation
+
+- [Full Documentation](https://github.com/Wire-DSL/wire-dsl#readme)
+- [DSL Syntax Guide](https://github.com/Wire-DSL/wire-dsl/blob/main/docs/DSL-SYNTAX.md)
+- [Components Reference](https://github.com/Wire-DSL/wire-dsl/blob/main/docs/COMPONENTS-REFERENCE.md)
+
+## License
+
+MIT

package/dist/chunk-MVVC2C2L.js

@@ -0,0 +1,253 @@
+// src/cli.ts
+import { program } from "commander";
+
+// src/commands/render.ts
+import { readFile, mkdir, stat } from "fs/promises";
+import path from "path";
+import chokidar from "chokidar";
+import { LayoutEngine, SVGRenderer, generateIR, parseWireDSL, exportSVG, exportPNG, exportMultipagePDF } from "@wire-dsl/core";
+var modules = {};
+async function loadDependencies() {
+  if (!modules.chalk) {
+    const chalkModule = await import("chalk");
+    modules.chalk = chalkModule.default;
+  }
+  if (!modules.ora) {
+    try {
+      const oraModule = await import("ora");
+      modules.ora = oraModule.default;
+    } catch {
+      modules.ora = (msg) => ({
+        start: function() {
+          return this;
+        },
+        succeed: function() {
+          return this;
+        },
+        fail: function() {
+          return this;
+        }
+      });
+    }
+  }
+  return modules;
+}
+async function isDirectory(filePath) {
+  try {
+    const stats = await stat(filePath);
+    return stats.isDirectory();
+  } catch {
+    return false;
+  }
+}
+function sanitizeScreenName(name) {
+  return name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+}
+function detectFormat(filePath) {
+  const ext = path.extname(filePath).toLowerCase();
+  if (ext === ".pdf") return "pdf";
+  if (ext === ".png") return "png";
+  return "svg";
+}
+function resolveOutputFormat(options) {
+  if (options.pdf) return { format: "pdf", outputPath: options.pdf };
+  if (options.png) return { format: "png", outputPath: options.png };
+  if (options.svg) return { format: "svg", outputPath: options.svg };
+  if (options.out) {
+    return { format: detectFormat(options.out), outputPath: options.out };
+  }
+  return { format: "svg" };
+}
+var renderCommand = async (input, options = {}) => {
+  const resolvedInputPath = path.resolve(process.cwd(), input);
+  const { format, outputPath } = resolveOutputFormat(options);
+  const { chalk: chalk3, ora } = await loadDependencies();
+  const renderOnce = async () => {
+    const spinner = ora(`Rendering ${input}`).start();
+    try {
+      const source = await readFile(resolvedInputPath, "utf8");
+      const ast = parseWireDSL(source);
+      const ir = generateIR(ast);
+      const layout = new LayoutEngine(ir).calculate();
+      const baseViewport = ir.project.screens[0]?.viewport ?? { width: 1280, height: 720 };
+      let screensToRender = ir.project.screens;
+      if (options.screen) {
+        const found = ir.project.screens.find(
+          (s) => s.name.toLowerCase() === options.screen.toLowerCase()
+        );
+        if (!found) {
+          spinner.fail(`Screen not found: ${options.screen}`);
+          console.error(
+            chalk3.red(`Available screens: ${ir.project.screens.map((s) => s.name).join(", ")}`)
+          );
+          process.exitCode = 1;
+          return;
+        }
+        screensToRender = [found];
+      }
+      const basename = path.basename(resolvedInputPath, path.extname(resolvedInputPath));
+      const multiScreen = screensToRender.length > 1;
+      const renderedScreens = screensToRender.map((screen) => {
+        const viewport = screen.viewport ?? baseViewport;
+        const width = options.width ?? viewport.width;
+        const height = options.height ?? viewport.height;
+        const renderer = new SVGRenderer(ir, layout, {
+          width,
+          height,
+          theme: options.theme ?? "light",
+          includeLabels: true,
+          screenName: screen.name
+        });
+        return {
+          name: screen.name,
+          svg: renderer.render(),
+          width,
+          height
+        };
+      });
+      if (!outputPath) {
+        spinner.succeed("Rendered SVG");
+        process.stdout.write(renderedScreens[0].svg + "\n");
+        return;
+      }
+      const renderedFiles = [];
+      if (format === "pdf") {
+        let pdfPath = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (isDir) {
+          pdfPath = path.join(outputPath, `${basename}.pdf`);
+        } else if (!pdfPath.endsWith(".pdf")) {
+          pdfPath += ".pdf";
+        }
+        await exportMultipagePDF(renderedScreens, pdfPath);
+        renderedFiles.push(pdfPath);
+        spinner.succeed(
+          `PDF written to ${chalk3.cyan(pdfPath)} (${renderedScreens.length} page${renderedScreens.length > 1 ? "s" : ""})`
+        );
+      } else if (format === "png") {
+        const isDir = await isDirectory(outputPath);
+        let filePaths = [];
+        if (multiScreen && !isDir) {
+          spinner.warn("PNG export with multiple screens requires a directory");
+          const outputDir = path.dirname(outputPath);
+          await mkdir(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.png`;
+            const filePath = path.join(outputDir, fileName);
+            await exportPNG(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else if (multiScreen || isDir) {
+          const outputDir = isDir ? outputPath : path.dirname(outputPath);
+          await mkdir(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = multiScreen ? `${basename}-${sanitizedName}.png` : path.basename(outputPath).endsWith(".png") ? path.basename(outputPath) : `${basename}.png`;
+            const filePath = path.join(outputDir, fileName);
+            await exportPNG(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else {
+          const outputDir = path.dirname(outputPath);
+          await mkdir(outputDir, { recursive: true }).catch(() => {
+          });
+          const screen = renderedScreens[0];
+          await exportPNG(screen.svg, outputPath, screen.width, screen.height);
+          filePaths.push(outputPath);
+        }
+        const renderedFiles2 = filePaths;
+        if (renderedFiles2.length === 1) {
+          spinner.succeed(`PNG written to ${chalk3.cyan(renderedFiles2[0])}`);
+        } else {
+          spinner.succeed(`${renderedFiles2.length} PNG files written:`);
+          renderedFiles2.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        }
+      } else {
+        let outputDir = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (multiScreen || isDir) {
+          if (!isDir) {
+            outputDir = path.dirname(outputPath);
+          }
+          await mkdir(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.svg`;
+            const filePath = path.join(outputDir, fileName);
+            await exportSVG(screen.svg, filePath);
+            renderedFiles.push(filePath);
+          }
+          spinner.succeed(`${renderedFiles.length} SVG files written:`);
+          renderedFiles.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        } else {
+          await exportSVG(renderedScreens[0].svg, outputPath);
+          spinner.succeed(`SVG written to ${chalk3.cyan(outputPath)}`);
+        }
+      }
+    } catch (error) {
+      spinner.fail("Render failed");
+      const message = error?.message || "Unknown error";
+      console.error(chalk3.red(message));
+      process.exitCode = 1;
+    }
+  };
+  await renderOnce();
+  if (options.watch) {
+    console.log(chalk3.cyan(`Watching for changes: ${resolvedInputPath}`));
+    const watcher = chokidar.watch(resolvedInputPath, { ignoreInitial: true });
+    watcher.on("change", async () => {
+      await renderOnce();
+    });
+  }
+};
+
+// src/commands/validate.ts
+import chalk from "chalk";
+var validateCommand = async (input) => {
+  console.log(chalk.yellow("Validating:"), input);
+};
+
+// src/commands/init.ts
+import chalk2 from "chalk";
+var initCommand = async (name) => {
+  const projectName = name || "wire-project";
+  console.log(chalk2.green("Initializing:"), projectName);
+};
+
+// src/cli.ts
+program.name("wire").description("WireDSL - Wireframes as Code").version("0.0.1", "-v, --version");
+program.command("render <input>").description("Render .wire file (default: PDF when saving, SVG to stdout)").option(
+  "-o, --out <path>, --output <path>",
+  "Output path (auto-detects format: .pdf/.svg/.png or directory for PDF)"
+).option("--svg <path>", "Force SVG output (file or directory for multiple files)").option("--pdf <path>", "Force PDF output (single file with all screens as pages)").option("--png <path>", "Force PNG output (directory for multiple files)").option("-s, --screen <name>", "Render specific screen by name (defaults to all screens)").option("--width <number>", "Override viewport width").option("--height <number>", "Override viewport height").option("--theme <theme>", "Theme (light|dark)", "light").option("-w, --watch", "Watch input file and re-render on changes").action((input, options) => {
+  const width = options.width ? Number(options.width) : void 0;
+  const height = options.height ? Number(options.height) : void 0;
+  const theme = options.theme === "dark" ? "dark" : "light";
+  return renderCommand(input, {
+    out: options.out,
+    svg: options.svg,
+    pdf: options.pdf,
+    png: options.png,
+    screen: options.screen,
+    width,
+    height,
+    theme,
+    watch: Boolean(options.watch)
+  });
+});
+program.command("validate <input>").description("Validate .wire file syntax").action(validateCommand);
+program.command("init [name]").description("Initialize a new WireDSL project").action(initCommand);
+program.parse(process.argv);
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+}
+
+export {
+  renderCommand,
+  validateCommand,
+  initCommand
+};

package/dist/cli.cjs

@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli.ts
+var import_commander = require("commander");
+
+// src/commands/render.ts
+var import_promises = require("fs/promises");
+var import_path = __toESM(require("path"), 1);
+var import_chokidar = __toESM(require("chokidar"), 1);
+var import_core = require("@wire-dsl/core");
+var modules = {};
+async function loadDependencies() {
+  if (!modules.chalk) {
+    const chalkModule = await import("chalk");
+    modules.chalk = chalkModule.default;
+  }
+  if (!modules.ora) {
+    try {
+      const oraModule = await import("ora");
+      modules.ora = oraModule.default;
+    } catch {
+      modules.ora = (msg) => ({
+        start: function() {
+          return this;
+        },
+        succeed: function() {
+          return this;
+        },
+        fail: function() {
+          return this;
+        }
+      });
+    }
+  }
+  return modules;
+}
+async function isDirectory(filePath) {
+  try {
+    const stats = await (0, import_promises.stat)(filePath);
+    return stats.isDirectory();
+  } catch {
+    return false;
+  }
+}
+function sanitizeScreenName(name) {
+  return name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+}
+function detectFormat(filePath) {
+  const ext = import_path.default.extname(filePath).toLowerCase();
+  if (ext === ".pdf") return "pdf";
+  if (ext === ".png") return "png";
+  return "svg";
+}
+function resolveOutputFormat(options) {
+  if (options.pdf) return { format: "pdf", outputPath: options.pdf };
+  if (options.png) return { format: "png", outputPath: options.png };
+  if (options.svg) return { format: "svg", outputPath: options.svg };
+  if (options.out) {
+    return { format: detectFormat(options.out), outputPath: options.out };
+  }
+  return { format: "svg" };
+}
+var renderCommand = async (input, options = {}) => {
+  const resolvedInputPath = import_path.default.resolve(process.cwd(), input);
+  const { format, outputPath } = resolveOutputFormat(options);
+  const { chalk: chalk3, ora } = await loadDependencies();
+  const renderOnce = async () => {
+    const spinner = ora(`Rendering ${input}`).start();
+    try {
+      const source = await (0, import_promises.readFile)(resolvedInputPath, "utf8");
+      const ast = (0, import_core.parseWireDSL)(source);
+      const ir = (0, import_core.generateIR)(ast);
+      const layout = new import_core.LayoutEngine(ir).calculate();
+      const baseViewport = ir.project.screens[0]?.viewport ?? { width: 1280, height: 720 };
+      let screensToRender = ir.project.screens;
+      if (options.screen) {
+        const found = ir.project.screens.find(
+          (s) => s.name.toLowerCase() === options.screen.toLowerCase()
+        );
+        if (!found) {
+          spinner.fail(`Screen not found: ${options.screen}`);
+          console.error(
+            chalk3.red(`Available screens: ${ir.project.screens.map((s) => s.name).join(", ")}`)
+          );
+          process.exitCode = 1;
+          return;
+        }
+        screensToRender = [found];
+      }
+      const basename = import_path.default.basename(resolvedInputPath, import_path.default.extname(resolvedInputPath));
+      const multiScreen = screensToRender.length > 1;
+      const renderedScreens = screensToRender.map((screen) => {
+        const viewport = screen.viewport ?? baseViewport;
+        const width = options.width ?? viewport.width;
+        const height = options.height ?? viewport.height;
+        const renderer = new import_core.SVGRenderer(ir, layout, {
+          width,
+          height,
+          theme: options.theme ?? "light",
+          includeLabels: true,
+          screenName: screen.name
+        });
+        return {
+          name: screen.name,
+          svg: renderer.render(),
+          width,
+          height
+        };
+      });
+      if (!outputPath) {
+        spinner.succeed("Rendered SVG");
+        process.stdout.write(renderedScreens[0].svg + "\n");
+        return;
+      }
+      const renderedFiles = [];
+      if (format === "pdf") {
+        let pdfPath = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (isDir) {
+          pdfPath = import_path.default.join(outputPath, `${basename}.pdf`);
+        } else if (!pdfPath.endsWith(".pdf")) {
+          pdfPath += ".pdf";
+        }
+        await (0, import_core.exportMultipagePDF)(renderedScreens, pdfPath);
+        renderedFiles.push(pdfPath);
+        spinner.succeed(
+          `PDF written to ${chalk3.cyan(pdfPath)} (${renderedScreens.length} page${renderedScreens.length > 1 ? "s" : ""})`
+        );
+      } else if (format === "png") {
+        const isDir = await isDirectory(outputPath);
+        let filePaths = [];
+        if (multiScreen && !isDir) {
+          spinner.warn("PNG export with multiple screens requires a directory");
+          const outputDir = import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.png`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportPNG)(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else if (multiScreen || isDir) {
+          const outputDir = isDir ? outputPath : import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = multiScreen ? `${basename}-${sanitizedName}.png` : import_path.default.basename(outputPath).endsWith(".png") ? import_path.default.basename(outputPath) : `${basename}.png`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportPNG)(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else {
+          const outputDir = import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          const screen = renderedScreens[0];
+          await (0, import_core.exportPNG)(screen.svg, outputPath, screen.width, screen.height);
+          filePaths.push(outputPath);
+        }
+        const renderedFiles2 = filePaths;
+        if (renderedFiles2.length === 1) {
+          spinner.succeed(`PNG written to ${chalk3.cyan(renderedFiles2[0])}`);
+        } else {
+          spinner.succeed(`${renderedFiles2.length} PNG files written:`);
+          renderedFiles2.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        }
+      } else {
+        let outputDir = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (multiScreen || isDir) {
+          if (!isDir) {
+            outputDir = import_path.default.dirname(outputPath);
+          }
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.svg`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportSVG)(screen.svg, filePath);
+            renderedFiles.push(filePath);
+          }
+          spinner.succeed(`${renderedFiles.length} SVG files written:`);
+          renderedFiles.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        } else {
+          await (0, import_core.exportSVG)(renderedScreens[0].svg, outputPath);
+          spinner.succeed(`SVG written to ${chalk3.cyan(outputPath)}`);
+        }
+      }
+    } catch (error) {
+      spinner.fail("Render failed");
+      const message = error?.message || "Unknown error";
+      console.error(chalk3.red(message));
+      process.exitCode = 1;
+    }
+  };
+  await renderOnce();
+  if (options.watch) {
+    console.log(chalk3.cyan(`Watching for changes: ${resolvedInputPath}`));
+    const watcher = import_chokidar.default.watch(resolvedInputPath, { ignoreInitial: true });
+    watcher.on("change", async () => {
+      await renderOnce();
+    });
+  }
+};
+
+// src/commands/validate.ts
+var import_chalk = __toESM(require("chalk"), 1);
+var validateCommand = async (input) => {
+  console.log(import_chalk.default.yellow("Validating:"), input);
+};
+
+// src/commands/init.ts
+var import_chalk2 = __toESM(require("chalk"), 1);
+var initCommand = async (name) => {
+  const projectName = name || "wire-project";
+  console.log(import_chalk2.default.green("Initializing:"), projectName);
+};
+
+// src/cli.ts
+import_commander.program.name("wire").description("WireDSL - Wireframes as Code").version("0.0.1", "-v, --version");
+import_commander.program.command("render <input>").description("Render .wire file (default: PDF when saving, SVG to stdout)").option(
+  "-o, --out <path>, --output <path>",
+  "Output path (auto-detects format: .pdf/.svg/.png or directory for PDF)"
+).option("--svg <path>", "Force SVG output (file or directory for multiple files)").option("--pdf <path>", "Force PDF output (single file with all screens as pages)").option("--png <path>", "Force PNG output (directory for multiple files)").option("-s, --screen <name>", "Render specific screen by name (defaults to all screens)").option("--width <number>", "Override viewport width").option("--height <number>", "Override viewport height").option("--theme <theme>", "Theme (light|dark)", "light").option("-w, --watch", "Watch input file and re-render on changes").action((input, options) => {
+  const width = options.width ? Number(options.width) : void 0;
+  const height = options.height ? Number(options.height) : void 0;
+  const theme = options.theme === "dark" ? "dark" : "light";
+  return renderCommand(input, {
+    out: options.out,
+    svg: options.svg,
+    pdf: options.pdf,
+    png: options.png,
+    screen: options.screen,
+    width,
+    height,
+    theme,
+    watch: Boolean(options.watch)
+  });
+});
+import_commander.program.command("validate <input>").description("Validate .wire file syntax").action(validateCommand);
+import_commander.program.command("init [name]").description("Initialize a new WireDSL project").action(initCommand);
+import_commander.program.parse(process.argv);
+if (!process.argv.slice(2).length) {
+  import_commander.program.outputHelp();
+}

package/dist/cli.d.cts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "./chunk-MVVC2C2L.js";

package/dist/index.cjs

@@ -0,0 +1,291 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  initCommand: () => initCommand,
+  renderCommand: () => renderCommand,
+  validateCommand: () => validateCommand
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/cli.ts
+var import_commander = require("commander");
+
+// src/commands/render.ts
+var import_promises = require("fs/promises");
+var import_path = __toESM(require("path"), 1);
+var import_chokidar = __toESM(require("chokidar"), 1);
+var import_core = require("@wire-dsl/core");
+var modules = {};
+async function loadDependencies() {
+  if (!modules.chalk) {
+    const chalkModule = await import("chalk");
+    modules.chalk = chalkModule.default;
+  }
+  if (!modules.ora) {
+    try {
+      const oraModule = await import("ora");
+      modules.ora = oraModule.default;
+    } catch {
+      modules.ora = (msg) => ({
+        start: function() {
+          return this;
+        },
+        succeed: function() {
+          return this;
+        },
+        fail: function() {
+          return this;
+        }
+      });
+    }
+  }
+  return modules;
+}
+async function isDirectory(filePath) {
+  try {
+    const stats = await (0, import_promises.stat)(filePath);
+    return stats.isDirectory();
+  } catch {
+    return false;
+  }
+}
+function sanitizeScreenName(name) {
+  return name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+}
+function detectFormat(filePath) {
+  const ext = import_path.default.extname(filePath).toLowerCase();
+  if (ext === ".pdf") return "pdf";
+  if (ext === ".png") return "png";
+  return "svg";
+}
+function resolveOutputFormat(options) {
+  if (options.pdf) return { format: "pdf", outputPath: options.pdf };
+  if (options.png) return { format: "png", outputPath: options.png };
+  if (options.svg) return { format: "svg", outputPath: options.svg };
+  if (options.out) {
+    return { format: detectFormat(options.out), outputPath: options.out };
+  }
+  return { format: "svg" };
+}
+var renderCommand = async (input, options = {}) => {
+  const resolvedInputPath = import_path.default.resolve(process.cwd(), input);
+  const { format, outputPath } = resolveOutputFormat(options);
+  const { chalk: chalk3, ora } = await loadDependencies();
+  const renderOnce = async () => {
+    const spinner = ora(`Rendering ${input}`).start();
+    try {
+      const source = await (0, import_promises.readFile)(resolvedInputPath, "utf8");
+      const ast = (0, import_core.parseWireDSL)(source);
+      const ir = (0, import_core.generateIR)(ast);
+      const layout = new import_core.LayoutEngine(ir).calculate();
+      const baseViewport = ir.project.screens[0]?.viewport ?? { width: 1280, height: 720 };
+      let screensToRender = ir.project.screens;
+      if (options.screen) {
+        const found = ir.project.screens.find(
+          (s) => s.name.toLowerCase() === options.screen.toLowerCase()
+        );
+        if (!found) {
+          spinner.fail(`Screen not found: ${options.screen}`);
+          console.error(
+            chalk3.red(`Available screens: ${ir.project.screens.map((s) => s.name).join(", ")}`)
+          );
+          process.exitCode = 1;
+          return;
+        }
+        screensToRender = [found];
+      }
+      const basename = import_path.default.basename(resolvedInputPath, import_path.default.extname(resolvedInputPath));
+      const multiScreen = screensToRender.length > 1;
+      const renderedScreens = screensToRender.map((screen) => {
+        const viewport = screen.viewport ?? baseViewport;
+        const width = options.width ?? viewport.width;
+        const height = options.height ?? viewport.height;
+        const renderer = new import_core.SVGRenderer(ir, layout, {
+          width,
+          height,
+          theme: options.theme ?? "light",
+          includeLabels: true,
+          screenName: screen.name
+        });
+        return {
+          name: screen.name,
+          svg: renderer.render(),
+          width,
+          height
+        };
+      });
+      if (!outputPath) {
+        spinner.succeed("Rendered SVG");
+        process.stdout.write(renderedScreens[0].svg + "\n");
+        return;
+      }
+      const renderedFiles = [];
+      if (format === "pdf") {
+        let pdfPath = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (isDir) {
+          pdfPath = import_path.default.join(outputPath, `${basename}.pdf`);
+        } else if (!pdfPath.endsWith(".pdf")) {
+          pdfPath += ".pdf";
+        }
+        await (0, import_core.exportMultipagePDF)(renderedScreens, pdfPath);
+        renderedFiles.push(pdfPath);
+        spinner.succeed(
+          `PDF written to ${chalk3.cyan(pdfPath)} (${renderedScreens.length} page${renderedScreens.length > 1 ? "s" : ""})`
+        );
+      } else if (format === "png") {
+        const isDir = await isDirectory(outputPath);
+        let filePaths = [];
+        if (multiScreen && !isDir) {
+          spinner.warn("PNG export with multiple screens requires a directory");
+          const outputDir = import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.png`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportPNG)(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else if (multiScreen || isDir) {
+          const outputDir = isDir ? outputPath : import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = multiScreen ? `${basename}-${sanitizedName}.png` : import_path.default.basename(outputPath).endsWith(".png") ? import_path.default.basename(outputPath) : `${basename}.png`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportPNG)(screen.svg, filePath, screen.width, screen.height);
+            filePaths.push(filePath);
+          }
+        } else {
+          const outputDir = import_path.default.dirname(outputPath);
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          const screen = renderedScreens[0];
+          await (0, import_core.exportPNG)(screen.svg, outputPath, screen.width, screen.height);
+          filePaths.push(outputPath);
+        }
+        const renderedFiles2 = filePaths;
+        if (renderedFiles2.length === 1) {
+          spinner.succeed(`PNG written to ${chalk3.cyan(renderedFiles2[0])}`);
+        } else {
+          spinner.succeed(`${renderedFiles2.length} PNG files written:`);
+          renderedFiles2.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        }
+      } else {
+        let outputDir = outputPath;
+        const isDir = await isDirectory(outputPath);
+        if (multiScreen || isDir) {
+          if (!isDir) {
+            outputDir = import_path.default.dirname(outputPath);
+          }
+          await (0, import_promises.mkdir)(outputDir, { recursive: true }).catch(() => {
+          });
+          for (const screen of renderedScreens) {
+            const sanitizedName = sanitizeScreenName(screen.name);
+            const fileName = `${basename}-${sanitizedName}.svg`;
+            const filePath = import_path.default.join(outputDir, fileName);
+            await (0, import_core.exportSVG)(screen.svg, filePath);
+            renderedFiles.push(filePath);
+          }
+          spinner.succeed(`${renderedFiles.length} SVG files written:`);
+          renderedFiles.forEach((file) => console.log(`  ${chalk3.cyan(file)}`));
+        } else {
+          await (0, import_core.exportSVG)(renderedScreens[0].svg, outputPath);
+          spinner.succeed(`SVG written to ${chalk3.cyan(outputPath)}`);
+        }
+      }
+    } catch (error) {
+      spinner.fail("Render failed");
+      const message = error?.message || "Unknown error";
+      console.error(chalk3.red(message));
+      process.exitCode = 1;
+    }
+  };
+  await renderOnce();
+  if (options.watch) {
+    console.log(chalk3.cyan(`Watching for changes: ${resolvedInputPath}`));
+    const watcher = import_chokidar.default.watch(resolvedInputPath, { ignoreInitial: true });
+    watcher.on("change", async () => {
+      await renderOnce();
+    });
+  }
+};
+
+// src/commands/validate.ts
+var import_chalk = __toESM(require("chalk"), 1);
+var validateCommand = async (input) => {
+  console.log(import_chalk.default.yellow("Validating:"), input);
+};
+
+// src/commands/init.ts
+var import_chalk2 = __toESM(require("chalk"), 1);
+var initCommand = async (name) => {
+  const projectName = name || "wire-project";
+  console.log(import_chalk2.default.green("Initializing:"), projectName);
+};
+
+// src/cli.ts
+import_commander.program.name("wire").description("WireDSL - Wireframes as Code").version("0.0.1", "-v, --version");
+import_commander.program.command("render <input>").description("Render .wire file (default: PDF when saving, SVG to stdout)").option(
+  "-o, --out <path>, --output <path>",
+  "Output path (auto-detects format: .pdf/.svg/.png or directory for PDF)"
+).option("--svg <path>", "Force SVG output (file or directory for multiple files)").option("--pdf <path>", "Force PDF output (single file with all screens as pages)").option("--png <path>", "Force PNG output (directory for multiple files)").option("-s, --screen <name>", "Render specific screen by name (defaults to all screens)").option("--width <number>", "Override viewport width").option("--height <number>", "Override viewport height").option("--theme <theme>", "Theme (light|dark)", "light").option("-w, --watch", "Watch input file and re-render on changes").action((input, options) => {
+  const width = options.width ? Number(options.width) : void 0;
+  const height = options.height ? Number(options.height) : void 0;
+  const theme = options.theme === "dark" ? "dark" : "light";
+  return renderCommand(input, {
+    out: options.out,
+    svg: options.svg,
+    pdf: options.pdf,
+    png: options.png,
+    screen: options.screen,
+    width,
+    height,
+    theme,
+    watch: Boolean(options.watch)
+  });
+});
+import_commander.program.command("validate <input>").description("Validate .wire file syntax").action(validateCommand);
+import_commander.program.command("init [name]").description("Initialize a new WireDSL project").action(initCommand);
+import_commander.program.parse(process.argv);
+if (!process.argv.slice(2).length) {
+  import_commander.program.outputHelp();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  initCommand,
+  renderCommand,
+  validateCommand
+});

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+type RenderOptions = {
+    out?: string;
+    svg?: string;
+    pdf?: string;
+    png?: string;
+    screen?: string;
+    theme?: 'light' | 'dark';
+    width?: number;
+    height?: number;
+    watch?: boolean;
+};
+declare const renderCommand: (input: string, options?: RenderOptions) => Promise<void>;
+
+declare const validateCommand: (input: string) => Promise<void>;
+
+declare const initCommand: (name?: string) => Promise<void>;
+
+export { initCommand, renderCommand, validateCommand };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+type RenderOptions = {
+    out?: string;
+    svg?: string;
+    pdf?: string;
+    png?: string;
+    screen?: string;
+    theme?: 'light' | 'dark';
+    width?: number;
+    height?: number;
+    watch?: boolean;
+};
+declare const renderCommand: (input: string, options?: RenderOptions) => Promise<void>;
+
+declare const validateCommand: (input: string) => Promise<void>;
+
+declare const initCommand: (name?: string) => Promise<void>;
+
+export { initCommand, renderCommand, validateCommand };

package/dist/index.js

@@ -0,0 +1,10 @@
+import {
+  initCommand,
+  renderCommand,
+  validateCommand
+} from "./chunk-MVVC2C2L.js";
+export {
+  initCommand,
+  renderCommand,
+  validateCommand
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "WireDSL CLI - Command-line tool for wireframe generation and validation",
   "type": "module",
   "exports": {
@@ -35,7 +35,7 @@
     "chalk": "5.6.2",
     "commander": "14.0.2",
     "ora": "9.1.0",
-    "@wire-dsl/core": "0.1.0"
+    "@wire-dsl/core": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "25.0.9",