@wireweave/core 2.7.1 → 3.0.0-beta.0

package/dist/renderer.js

@@ -1846,6 +1846,9 @@ function generateLayoutClasses(prefix) {
   padding: 16px;
   display: flex;
   flex-direction: column;
+  /* Default vertical spacing between stacked content blocks.
+     Inline gap from DSL (main gap=N) overrides this. */
+  gap: 16px;
   min-height: 0;
 }
 
@@ -1887,7 +1890,7 @@ function generateLayoutClasses(prefix) {
 }
 
 .${prefix}-sidebar {
-  width: 256px;
+  width: 224px;
   border-right: 1px solid var(--${prefix}-border);
   padding: 16px 16px 16px 20px;
   flex-shrink: 0;
@@ -49338,7 +49341,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 || "#";
@@ -49442,13 +49444,14 @@ function renderBreadcrumb(node, ctx) {
   ]);
   const styles = ctx.buildCommonStyles(node);
   const styleAttr = styles ? ` style="${styles}"` : "";
+  const separator = `<span class="${ctx.prefix}-breadcrumb-separator" aria-hidden="true">|</span>`;
   const items = node.items.map((item, idx) => {
     const isLast = idx === node.items.length - 1;
     if (typeof item === "string") {
       return isLast ? `<span class="${ctx.prefix}-breadcrumb-item" aria-current="page">${ctx.escapeHtml(item)}</span>` : `<a class="${ctx.prefix}-breadcrumb-item" href="#">${ctx.escapeHtml(item)}</a>`;
     }
     return isLast ? `<span class="${ctx.prefix}-breadcrumb-item" aria-current="page">${ctx.escapeHtml(item.label)}</span>` : `<a class="${ctx.prefix}-breadcrumb-item" href="${item.href || "#"}">${ctx.escapeHtml(item.label)}</a>`;
-  }).join(" / ");
+  }).join(separator);
   return `<nav class="${classes}"${styleAttr} aria-label="Breadcrumb">${items}</nav>`;
 }
 
@@ -49855,7 +49858,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}`;
@@ -50274,8 +50280,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);
 }
@@ -50311,24 +50408,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}">
@@ -50361,11 +50467,15 @@ export {
   generateStyles,
   getIconData,
   getTheme,
+  layoutCanvas,
   lucideIcons,
   render,
+  renderCanvas,
   renderIconSvg,
+  renderPage,
   renderToHtml,
-  renderToSvg
+  renderToSvg,
+  resolvePageDimensions
 };
 /**
  * Lucide Icons Data

package/dist/{types-CQDDIeyC.d.cts → types-hEr_afgw.d.cts}

@@ -110,10 +110,33 @@ interface InteractiveProps {
     /** Custom action identifier (e.g., "submit", "logout", "delete") */
     action?: string;
 }
+/**
+ * Wireframe Document — root node, holds zero or more `Page`s.
+ *
+ * Multi-page semantics:
+ * - A document is a *canvas* of pages. `renderPage` consumes one page;
+ *   `renderCanvas` composes all pages into one canvas (grid auto-layout
+ *   when no coords are set, absolute positioning when `at(x, y)` is set).
+ * - The canvas itself (gap, layout) is a *renderer* concern, not part of
+ *   the DSL — see `CanvasOptions` in `renderer/types.ts`. Chrome / grid /
+ *   pan-zoom are host concerns and live entirely outside the renderer.
+ */
 interface WireframeDocument extends BaseNode {
     type: 'Document';
     children: PageNode[];
 }
+/**
+ * Page — a single fixed-size board (one wireframe screen).
+ *
+ * Note on `x` / `y` (inherited from `PositionProps` via `CommonProps`):
+ * for `Page` these are **canvas coordinates** — the position of this page's
+ * top-left corner on the multi-page canvas, in pixels. They are written in
+ * DSL as `page "Login" at(0, 0) { ... }`. Pages without `at(...)` get
+ * auto-grid placement at canvas-render time.
+ *
+ * For non-page nodes the same `x` / `y` mean position inside a `Relative`
+ * parent — context disambiguates.
+ */
 interface PageNode extends BaseNode, CommonProps {
     type: 'Page';
     title?: string | null;

package/dist/{types-CQDDIeyC.d.ts → types-hEr_afgw.d.ts}

@@ -110,10 +110,33 @@ interface InteractiveProps {
     /** Custom action identifier (e.g., "submit", "logout", "delete") */
     action?: string;
 }
+/**
+ * Wireframe Document — root node, holds zero or more `Page`s.
+ *
+ * Multi-page semantics:
+ * - A document is a *canvas* of pages. `renderPage` consumes one page;
+ *   `renderCanvas` composes all pages into one canvas (grid auto-layout
+ *   when no coords are set, absolute positioning when `at(x, y)` is set).
+ * - The canvas itself (gap, layout) is a *renderer* concern, not part of
+ *   the DSL — see `CanvasOptions` in `renderer/types.ts`. Chrome / grid /
+ *   pan-zoom are host concerns and live entirely outside the renderer.
+ */
 interface WireframeDocument extends BaseNode {
     type: 'Document';
     children: PageNode[];
 }
+/**
+ * Page — a single fixed-size board (one wireframe screen).
+ *
+ * Note on `x` / `y` (inherited from `PositionProps` via `CommonProps`):
+ * for `Page` these are **canvas coordinates** — the position of this page's
+ * top-left corner on the multi-page canvas, in pixels. They are written in
+ * DSL as `page "Login" at(0, 0) { ... }`. Pages without `at(...)` get
+ * auto-grid placement at canvas-render time.
+ *
+ * For non-page nodes the same `x` / `y` mean position inside a `Relative`
+ * parent — context disambiguates.
+ */
 interface PageNode extends BaseNode, CommonProps {
     type: 'Page';
     title?: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/core",
-  "version": "2.7.1",
+  "version": "3.0.0-beta.0",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",