@wireweave/core 2.8.0 → 3.0.0

package/dist/renderer.cjs

@@ -28,11 +28,15 @@ __export(renderer_exports, {
   generateStyles: () => generateStyles,
   getIconData: () => getIconData,
   getTheme: () => getTheme,
+  layoutCanvas: () => layoutCanvas,
   lucideIcons: () => lucideIcons,
   render: () => render,
+  renderCanvas: () => renderCanvas,
   renderIconSvg: () => renderIconSvg,
+  renderPage: () => renderPage,
   renderToHtml: () => renderToHtml,
-  renderToSvg: () => renderToSvg
+  renderToSvg: () => renderToSvg,
+  resolvePageDimensions: () => resolvePageDimensions
 });
 module.exports = __toCommonJS(renderer_exports);
 
@@ -49379,7 +49383,6 @@ function renderDropdown(node, ctx) {
       "data-action": dropdownItem.action
     };
     const interactiveAttrStr = ctx.buildAttrsString(interactiveAttrs);
-    const hrefAttr = dropdownItem.href ? ` href="${ctx.escapeHtml(dropdownItem.href)}"` : "";
     const disabledAttr = dropdownItem.disabled ? ' disabled="disabled"' : "";
     if (dropdownItem.href || dropdownItem.navigate) {
       const href = dropdownItem.href || dropdownItem.navigate || "#";
@@ -49897,7 +49900,10 @@ var HtmlRenderer = class extends BaseRenderer {
     const uiContent = this.renderChildren(uiChildren);
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
-    const commonStyles = this.buildCommonStyles(node);
+    const { x: _canvasX, y: _canvasY, ...nodeWithoutCanvasPos } = node;
+    void _canvasX;
+    void _canvasY;
+    const commonStyles = this.buildCommonStyles(nodeWithoutCanvasPos);
     let viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
     if (this.context.options.background) {
       viewportStyle += `; background: ${this.context.options.background}`;
@@ -50316,8 +50322,99 @@ function createHtmlRenderer(options) {
   return new HtmlRenderer(options);
 }
 
+// src/renderer/page-renderer.ts
+function renderPage(page, options = {}) {
+  const renderer = new HtmlRenderer(options);
+  const { html, css } = renderer.render({
+    type: "Document",
+    children: [page]
+  });
+  const { width, height } = resolvePageDimensions(page);
+  return { html, css, width, height };
+}
+function resolvePageDimensions(page) {
+  const pageAny = page;
+  const explicitW = page.w ?? pageAny.width;
+  const explicitH = page.h ?? pageAny.height;
+  if (typeof explicitW === "number" && typeof explicitH === "number") {
+    return { width: explicitW, height: explicitH };
+  }
+  const viewport = resolveViewport(page.viewport, page.device);
+  return { width: viewport.width, height: viewport.height };
+}
+
+// src/renderer/canvas-renderer.ts
+var DEFAULT_GAP = 64;
+var DEFAULT_PREFIX = "wf";
+function layoutCanvas(pages, gap = DEFAULT_GAP) {
+  const placed = [];
+  let cursorX = 0;
+  let maxRight = 0;
+  let maxBottom = 0;
+  for (const page of pages) {
+    const { width, height } = resolvePageDimensions(page);
+    const explicitX = typeof page.x === "number" ? page.x : void 0;
+    const explicitY = typeof page.y === "number" ? page.y : void 0;
+    const x = explicitX ?? cursorX;
+    const y = explicitY ?? 0;
+    placed.push({ page, x, y, w: width, h: height });
+    if (explicitX === void 0) {
+      cursorX = x + width + gap;
+    }
+    maxRight = Math.max(maxRight, x + width);
+    maxBottom = Math.max(maxBottom, y + height);
+  }
+  return { placed, width: maxRight, height: maxBottom };
+}
+function renderCanvas(doc, options = {}) {
+  const gap = options.gap ?? DEFAULT_GAP;
+  const prefix = options.classPrefix ?? DEFAULT_PREFIX;
+  const includeStyles = options.includeStyles !== false;
+  const theme = options.theme === "dark" ? darkTheme : defaultTheme;
+  const css = includeStyles ? generateStyles(theme, prefix) : "";
+  if (doc.children.length === 0) {
+    return {
+      html: `<div class="${prefix}-canvas" data-empty="true"></div>`,
+      css,
+      width: 0,
+      height: 0
+    };
+  }
+  const { placed, width, height } = layoutCanvas(doc.children, gap);
+  const pageRenderer = new HtmlRenderer({ ...options, includeStyles: false });
+  const boards = placed.map((p) => {
+    const { html: pageHtml } = pageRenderer.render({
+      type: "Document",
+      children: [p.page]
+    });
+    return wrapBoard(pageHtml, p, prefix);
+  }).join("\n");
+  const canvasStyle = `position: relative; width: ${width}px; height: ${height}px;`;
+  const html = `<div class="${prefix}-canvas" style="${canvasStyle}" data-page-count="${placed.length}">
+${boards}
+</div>`;
+  return { html, css, width, height };
+}
+function wrapBoard(pageHtml, placed, prefix) {
+  const { x, y, w, h, page } = placed;
+  const positionStyle = `position: absolute; left: ${x}px; top: ${y}px; width: ${w}px; height: ${h}px;`;
+  const titleAttr = page.title ? ` data-page-title="${escapeAttr(page.title)}"` : "";
+  const dataAttrs = ` data-page-x="${x}" data-page-y="${y}" data-page-w="${w}" data-page-h="${h}"${titleAttr}`;
+  return `<div class="${prefix}-canvas-board" style="${positionStyle}"${dataAttrs}>
+${pageHtml}
+</div>`;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
 // src/renderer/index.ts
 function render(document, options = {}) {
+  const isMultiPage = document.children.length > 1;
+  if (isMultiPage) {
+    const result = renderCanvas(document, options);
+    return { html: result.html, css: result.css };
+  }
   const renderer = createHtmlRenderer(options);
   return renderer.render(document);
 }
@@ -50353,24 +50450,33 @@ ${html}
 </html>`;
 }
 function renderToSvg(document, options = {}) {
-  const firstPage = document.children[0];
+  const isMultiPage = document.children.length > 1;
   let width = options.width ?? 800;
   let height = options.height ?? 600;
-  if (firstPage && options.width === void 0 && options.height === void 0) {
-    const pageAny = firstPage;
-    const explicitW = firstPage.w ?? pageAny.width;
-    const explicitH = firstPage.h ?? pageAny.height;
-    if (typeof explicitW === "number" && typeof explicitH === "number") {
-      width = explicitW;
-      height = explicitH;
-    } else if (firstPage.viewport !== void 0 || firstPage.device !== void 0) {
-      const viewport = resolveViewport(firstPage.viewport, firstPage.device);
-      width = viewport.width;
-      height = viewport.height;
+  let html;
+  let css;
+  if (isMultiPage) {
+    const canvas = renderCanvas(document, {
+      theme: options.theme ?? "light"
+    });
+    if (options.width === void 0 && options.height === void 0) {
+      width = canvas.width;
+      height = canvas.height;
+    }
+    html = canvas.html;
+    css = canvas.css;
+  } else {
+    const firstPage = document.children[0];
+    if (firstPage && options.width === void 0 && options.height === void 0) {
+      const dims = resolvePageDimensions(firstPage);
+      width = dims.width;
+      height = dims.height;
     }
+    const result = render(document, { theme: options.theme ?? "light" });
+    html = result.html;
+    css = result.css;
   }
   const background = options.background ?? "#ffffff";
-  const { html, css } = render(document, { theme: options.theme ?? "light" });
   const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
@@ -50404,11 +50510,15 @@ ${css}
   generateStyles,
   getIconData,
   getTheme,
+  layoutCanvas,
   lucideIcons,
   render,
+  renderCanvas,
   renderIconSvg,
+  renderPage,
   renderToHtml,
-  renderToSvg
+  renderToSvg,
+  resolvePageDimensions
 });
 /**
  * Lucide Icons Data

package/dist/renderer.d.cts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-CQDDIeyC.cjs';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-hEr_afgw.cjs';
 
 /**
  * Renderer type definitions for wireweave
@@ -25,6 +25,25 @@ interface RenderResult {
     /** Generated CSS styles */
     css: string;
 }
+/**
+ * Result of rendering a single page in isolation (`renderPage`).
+ * Carries the resolved pixel dimensions so callers (export pipelines, hosts)
+ * can size their wrapper without re-resolving viewport/device themselves.
+ */
+interface PageRenderResult extends RenderResult {
+    width: number;
+    height: number;
+}
+interface CanvasOptions extends RenderOptions {
+    /** Gap between auto-laid-out pages, in pixels. Default `64`. */
+    gap?: number;
+}
+interface CanvasRenderResult extends RenderResult {
+    /** Total canvas width — bounding box of all pages. */
+    width: number;
+    /** Total canvas height — bounding box of all pages. */
+    height: number;
+}
 interface SvgRenderOptions {
     /** Width of the SVG viewport */
     width?: number;
@@ -351,6 +370,90 @@ declare function generateStyles(theme: ThemeConfig, prefix?: string): string;
  */
 declare function generateComponentStyles(_theme: ThemeConfig, prefix?: string): string;
 
+/**
+ * Page renderer — single-Page primitive.
+ *
+ * `renderPage` is the *pure* unit of this renderer: its output depends only
+ * on the page itself, never on sibling pages or canvas-level options. This
+ * is what export pipelines (1 page = 1 file) consume, and it is also the
+ * building block `renderCanvas` composes when laying multiple pages out.
+ */
+
+/**
+ * Render a single page to self-contained HTML + CSS.
+ *
+ * The page's HTML output is identical to what `render(document)` produces
+ * for a document containing only this page — we route through `HtmlRenderer`
+ * so the existing renderer pipeline (themes, prefix, indentation, minify)
+ * applies uniformly.
+ */
+declare function renderPage(page: PageNode, options?: RenderOptions): PageRenderResult;
+/**
+ * Resolve a page's pixel dimensions from explicit `w`/`h` or viewport/device.
+ *
+ * Mirrors the precedence used inside `HtmlRenderer.renderPage`:
+ *   1. Explicit numeric `w` and `h` both set → use them.
+ *   2. Otherwise resolve via viewport string / device preset.
+ *
+ * Non-numeric `w`/`h` (e.g. keyword `'full'` or `ValueWithUnit`) fall through
+ * to the viewport — those are layout-internal hints, not canvas dimensions.
+ */
+declare function resolvePageDimensions(page: PageNode): {
+    width: number;
+    height: number;
+};
+
+/**
+ * Canvas renderer — multi-page composition.
+ *
+ * `renderCanvas` lays out one or more pages on a single bounded canvas. The
+ * DSL stays page-centric — coordinates come from each page's optional
+ * `at(x, y)` attribute (resolved into `Page.x` / `Page.y` by the parser).
+ * Pages without coordinates auto-flow horizontally with `gap` between them.
+ *
+ * Output is intentionally minimal: a bounded `<div class="wf-canvas">` of the
+ * exact layout extent, containing absolutely-positioned `<div class="wf-canvas-board">`
+ * wrappers around each page's HTML. No chrome, no decoration, no grid, no
+ * labels. Hosts (dashboard editor, markdown plugin, VSCode preview) wrap this
+ * output in their own viewport / grid / pan-zoom layers.
+ *
+ * `layoutCanvas` is exposed as a pure utility so hosts that want to compose
+ * the canvas DOM themselves can reuse the placement math.
+ */
+
+interface PlacedPage {
+    page: PageNode;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * Compute each page's position on the canvas and the bounding canvas size.
+ *
+ * Per-page mode:
+ * - `Page.x` / `Page.y` set → placed at exactly those coordinates.
+ * - Either missing → auto-flow: continues from the running cursor in a
+ *   single horizontal row, advancing by `width + gap` after each
+ *   auto-placed page. The cursor is unaffected by explicitly-placed pages.
+ *
+ * Mixed documents are allowed (ux-rules will warn) but explicit pages may
+ * overlap auto pages — that is the author's responsibility.
+ */
+declare function layoutCanvas(pages: PageNode[], gap?: number): {
+    placed: PlacedPage[];
+    width: number;
+    height: number;
+};
+/**
+ * Render a multi-page document to a single bounded canvas of HTML + CSS.
+ *
+ * Output: `<div class="wf-canvas" style="width:Wpx; height:Hpx; position:relative">`
+ * containing one `<div class="wf-canvas-board">` per page, absolutely
+ * positioned at the layout coordinates.
+ */
+declare function renderCanvas(doc: WireframeDocument, options?: CanvasOptions): CanvasRenderResult;
+
 /**
  * Lucide Icons Data
  *
@@ -388,13 +491,19 @@ strokeWidth?: number, className?: string, styleAttr?: string): string;
  */
 
 /**
- * Render AST to HTML and CSS
+ * Render AST to HTML and CSS.
  *
- * @param document - Parsed wireframe document
- * @param options - Render options
- * @returns Object containing HTML and CSS strings
+ * Two modes, decided automatically by page count:
+ *   1. Multiple pages → canvas mode (bounded layout, absolutely-positioned
+ *      boards). Hosts wrap this in their own viewport / grid / pan-zoom layer.
+ *   2. Single page → legacy mode (page only, no canvas wrapper) for
+ *      backward compatibility with single-page consumers (markdown-plugin,
+ *      dashboard previews, vscode-extension).
+ *
+ * Use `renderPage(page)` for explicit single-page export, or
+ * `renderCanvas(doc)` for explicit multi-page composition.
  */
-declare function render(document: WireframeDocument, options?: RenderOptions): RenderResult;
+declare function render(document: WireframeDocument, options?: RenderOptions | CanvasOptions): RenderResult;
 /**
  * Render AST to standalone HTML with embedded CSS
  *
@@ -409,10 +518,14 @@ declare function renderToHtml(document: WireframeDocument, options?: RenderOptio
  * This approach embeds HTML+CSS inside SVG using foreignObject,
  * which allows CSS flexbox/grid layouts to work properly.
  *
+ * Multi-page documents are auto-rendered as a bounded canvas, with the
+ * SVG viewBox sized to the canvas bounding box. Single-page documents
+ * keep their legacy single-page sizing.
+ *
  * @param document - Parsed wireframe document
  * @param options - SVG render options
  * @returns Object containing SVG string and dimensions
  */
 declare function renderToSvg(document: WireframeDocument, options?: SvgRenderOptions): SvgRenderResult;
 
-export { HtmlRenderer, type IconData, type IconElement, type RenderContext, type RenderOptions, type RenderResult, type SvgRenderOptions, type SvgRenderResult, type ThemeColors, type ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, lucideIcons, render, renderIconSvg, renderToHtml, renderToSvg };
+export { type CanvasOptions, type CanvasRenderResult, HtmlRenderer, type IconData, type IconElement, type PageRenderResult, type PlacedPage, type RenderContext, type RenderOptions, type RenderResult, type SvgRenderOptions, type SvgRenderResult, type ThemeColors, type ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, layoutCanvas, lucideIcons, render, renderCanvas, renderIconSvg, renderPage, renderToHtml, renderToSvg, resolvePageDimensions };

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-CQDDIeyC.js';
+import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-hEr_afgw.js';
 
 /**
  * Renderer type definitions for wireweave
@@ -25,6 +25,25 @@ interface RenderResult {
     /** Generated CSS styles */
     css: string;
 }
+/**
+ * Result of rendering a single page in isolation (`renderPage`).
+ * Carries the resolved pixel dimensions so callers (export pipelines, hosts)
+ * can size their wrapper without re-resolving viewport/device themselves.
+ */
+interface PageRenderResult extends RenderResult {
+    width: number;
+    height: number;
+}
+interface CanvasOptions extends RenderOptions {
+    /** Gap between auto-laid-out pages, in pixels. Default `64`. */
+    gap?: number;
+}
+interface CanvasRenderResult extends RenderResult {
+    /** Total canvas width — bounding box of all pages. */
+    width: number;
+    /** Total canvas height — bounding box of all pages. */
+    height: number;
+}
 interface SvgRenderOptions {
     /** Width of the SVG viewport */
     width?: number;
@@ -351,6 +370,90 @@ declare function generateStyles(theme: ThemeConfig, prefix?: string): string;
  */
 declare function generateComponentStyles(_theme: ThemeConfig, prefix?: string): string;
 
+/**
+ * Page renderer — single-Page primitive.
+ *
+ * `renderPage` is the *pure* unit of this renderer: its output depends only
+ * on the page itself, never on sibling pages or canvas-level options. This
+ * is what export pipelines (1 page = 1 file) consume, and it is also the
+ * building block `renderCanvas` composes when laying multiple pages out.
+ */
+
+/**
+ * Render a single page to self-contained HTML + CSS.
+ *
+ * The page's HTML output is identical to what `render(document)` produces
+ * for a document containing only this page — we route through `HtmlRenderer`
+ * so the existing renderer pipeline (themes, prefix, indentation, minify)
+ * applies uniformly.
+ */
+declare function renderPage(page: PageNode, options?: RenderOptions): PageRenderResult;
+/**
+ * Resolve a page's pixel dimensions from explicit `w`/`h` or viewport/device.
+ *
+ * Mirrors the precedence used inside `HtmlRenderer.renderPage`:
+ *   1. Explicit numeric `w` and `h` both set → use them.
+ *   2. Otherwise resolve via viewport string / device preset.
+ *
+ * Non-numeric `w`/`h` (e.g. keyword `'full'` or `ValueWithUnit`) fall through
+ * to the viewport — those are layout-internal hints, not canvas dimensions.
+ */
+declare function resolvePageDimensions(page: PageNode): {
+    width: number;
+    height: number;
+};
+
+/**
+ * Canvas renderer — multi-page composition.
+ *
+ * `renderCanvas` lays out one or more pages on a single bounded canvas. The
+ * DSL stays page-centric — coordinates come from each page's optional
+ * `at(x, y)` attribute (resolved into `Page.x` / `Page.y` by the parser).
+ * Pages without coordinates auto-flow horizontally with `gap` between them.
+ *
+ * Output is intentionally minimal: a bounded `<div class="wf-canvas">` of the
+ * exact layout extent, containing absolutely-positioned `<div class="wf-canvas-board">`
+ * wrappers around each page's HTML. No chrome, no decoration, no grid, no
+ * labels. Hosts (dashboard editor, markdown plugin, VSCode preview) wrap this
+ * output in their own viewport / grid / pan-zoom layers.
+ *
+ * `layoutCanvas` is exposed as a pure utility so hosts that want to compose
+ * the canvas DOM themselves can reuse the placement math.
+ */
+
+interface PlacedPage {
+    page: PageNode;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * Compute each page's position on the canvas and the bounding canvas size.
+ *
+ * Per-page mode:
+ * - `Page.x` / `Page.y` set → placed at exactly those coordinates.
+ * - Either missing → auto-flow: continues from the running cursor in a
+ *   single horizontal row, advancing by `width + gap` after each
+ *   auto-placed page. The cursor is unaffected by explicitly-placed pages.
+ *
+ * Mixed documents are allowed (ux-rules will warn) but explicit pages may
+ * overlap auto pages — that is the author's responsibility.
+ */
+declare function layoutCanvas(pages: PageNode[], gap?: number): {
+    placed: PlacedPage[];
+    width: number;
+    height: number;
+};
+/**
+ * Render a multi-page document to a single bounded canvas of HTML + CSS.
+ *
+ * Output: `<div class="wf-canvas" style="width:Wpx; height:Hpx; position:relative">`
+ * containing one `<div class="wf-canvas-board">` per page, absolutely
+ * positioned at the layout coordinates.
+ */
+declare function renderCanvas(doc: WireframeDocument, options?: CanvasOptions): CanvasRenderResult;
+
 /**
  * Lucide Icons Data
  *
@@ -388,13 +491,19 @@ strokeWidth?: number, className?: string, styleAttr?: string): string;
  */
 
 /**
- * Render AST to HTML and CSS
+ * Render AST to HTML and CSS.
  *
- * @param document - Parsed wireframe document
- * @param options - Render options
- * @returns Object containing HTML and CSS strings
+ * Two modes, decided automatically by page count:
+ *   1. Multiple pages → canvas mode (bounded layout, absolutely-positioned
+ *      boards). Hosts wrap this in their own viewport / grid / pan-zoom layer.
+ *   2. Single page → legacy mode (page only, no canvas wrapper) for
+ *      backward compatibility with single-page consumers (markdown-plugin,
+ *      dashboard previews, vscode-extension).
+ *
+ * Use `renderPage(page)` for explicit single-page export, or
+ * `renderCanvas(doc)` for explicit multi-page composition.
  */
-declare function render(document: WireframeDocument, options?: RenderOptions): RenderResult;
+declare function render(document: WireframeDocument, options?: RenderOptions | CanvasOptions): RenderResult;
 /**
  * Render AST to standalone HTML with embedded CSS
  *
@@ -409,10 +518,14 @@ declare function renderToHtml(document: WireframeDocument, options?: RenderOptio
  * This approach embeds HTML+CSS inside SVG using foreignObject,
  * which allows CSS flexbox/grid layouts to work properly.
  *
+ * Multi-page documents are auto-rendered as a bounded canvas, with the
+ * SVG viewBox sized to the canvas bounding box. Single-page documents
+ * keep their legacy single-page sizing.
+ *
  * @param document - Parsed wireframe document
  * @param options - SVG render options
  * @returns Object containing SVG string and dimensions
  */
 declare function renderToSvg(document: WireframeDocument, options?: SvgRenderOptions): SvgRenderResult;
 
-export { HtmlRenderer, type IconData, type IconElement, type RenderContext, type RenderOptions, type RenderResult, type SvgRenderOptions, type SvgRenderResult, type ThemeColors, type ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, lucideIcons, render, renderIconSvg, renderToHtml, renderToSvg };
+export { type CanvasOptions, type CanvasRenderResult, HtmlRenderer, type IconData, type IconElement, type PageRenderResult, type PlacedPage, type RenderContext, type RenderOptions, type RenderResult, type SvgRenderOptions, type SvgRenderResult, type ThemeColors, type ThemeConfig, createHtmlRenderer, darkTheme, defaultTheme, generateComponentStyles, generateStyles, getIconData, getTheme, layoutCanvas, lucideIcons, render, renderCanvas, renderIconSvg, renderPage, renderToHtml, renderToSvg, resolvePageDimensions };