@compact-design/html 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -229,6 +229,18 @@ function overflowDeclarations(props) {
   if (props.overflowDirection === "BOTH") return ["overflow: auto"];
   return [];
 }
+function isScrollingOverflow(direction) {
+  return direction === "HORIZONTAL" || direction === "VERTICAL" || direction === "BOTH";
+}
+function clampedFixedChildCount(value, childCount) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0 || childCount <= 0) return 0;
+  return Math.max(0, Math.min(childCount, Math.round(value)));
+}
+function fixedChildStickyDeclarations(overflow) {
+  if (overflow === "VERTICAL") return ["position: sticky", "bottom: 0"];
+  if (overflow === "HORIZONTAL") return ["position: sticky", "right: 0"];
+  return ["position: sticky", "bottom: 0", "right: 0"];
+}
 function radiusDeclarations(props) {
   if (Array.isArray(props.cornerRadii) && props.cornerRadii.length === 4) {
     return [`border-radius: ${props.cornerRadii.map((value) => `${finite(value, 0)}px`).join(" ")}`];
@@ -236,11 +248,11 @@ function radiusDeclarations(props) {
   if (typeof props.cornerRadius === "number") return [`border-radius: ${props.cornerRadius}px`];
   return [];
 }
-function strokeDeclarations(props) {
-  const color = paintColor(props.styles.strokes[0]);
+function strokeDeclarations(props, colorOverride) {
+  const color = colorOverride ?? paintColor(props.styles.strokes[0]);
   if (!color) return [];
   const style = props.dashPattern?.length ? "dashed" : "solid";
-  const declarations = [];
+  const align = props.strokeAlign;
   const sides = [
     ["border-top-width", props.strokeTopWeight],
     ["border-right-width", props.strokeRightWeight],
@@ -249,14 +261,31 @@ function strokeDeclarations(props) {
   ];
   const perSide = sides.some(([, value]) => typeof value === "number");
   if (perSide) {
-    declarations.push(`border-style: ${style}`, `border-color: ${color}`, "border-width: 0");
+    const declarations = [`border-style: ${style}`, `border-color: ${color}`, "border-width: 0"];
     for (const [property, value] of sides) if (typeof value === "number") declarations.push(`${property}: ${value}px`);
-  } else {
-    const weight = finite(props.strokeWeight, 1);
-    if (weight <= 0) return [];
-    declarations.push(`border: ${weight}px ${style} ${color}`);
+    return declarations;
   }
-  return declarations;
+  const weight = finite(props.strokeWeight, 1);
+  if (weight <= 0) return [];
+  if (align === "OUTSIDE") {
+    return [`box-shadow: 0 0 0 ${weight}px ${color}`];
+  }
+  if (align === "CENTER") {
+    const half = weight / 2;
+    return [`border: ${half}px ${style} ${color}`, `box-shadow: 0 0 0 ${half}px ${color}`];
+  }
+  return [`border: ${weight}px ${style} ${color}`];
+}
+function coalesceBoxShadows(declarations) {
+  const shadows = [];
+  const rest = [];
+  for (const declaration of declarations) {
+    const match = /^box-shadow:\s*(.+)$/i.exec(declaration);
+    if (match) shadows.push(match[1]);
+    else rest.push(declaration);
+  }
+  if (shadows.length) rest.push(`box-shadow: ${shadows.join(", ")}`);
+  return rest;
 }
 function blendModeCss(value) {
   if (!value || value === "PASS_THROUGH" || value === "NORMAL") return void 0;
@@ -268,6 +297,11 @@ function textCaseCss(value) {
   if (value === "TITLE") return "capitalize";
   return void 0;
 }
+function textCaseVariantCss(value) {
+  if (value === "SMALL_CAPS") return "small-caps";
+  if (value === "SMALL_CAPS_FORCED") return "all-small-caps";
+  return void 0;
+}
 function sanitizeSvg(markup) {
   return markup.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/\son[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
 }
@@ -282,6 +316,111 @@ function regularPolygon(cx, cy, radius, points, innerRatio) {
   }
   return coords.join(" ");
 }
+var TURN = Math.PI * 2;
+function round(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+function arcPath(width, height, startingAngle, endingAngle, innerRadiusRatio) {
+  const rx = width / 2;
+  const ry = height / 2;
+  const ratio = Math.min(1, Math.max(0, innerRadiusRatio));
+  let sweep = endingAngle - startingAngle;
+  if (sweep < 0) sweep = sweep % TURN + TURN;
+  const point = (angle, scale) => `${round(rx + rx * scale * Math.cos(angle))} ${round(ry + ry * scale * Math.sin(angle))}`;
+  const ellipse = (scale) => {
+    const r = `${round(rx * scale)} ${round(ry * scale)}`;
+    return `M ${point(startingAngle, scale)} A ${r} 0 1 1 ${point(startingAngle + Math.PI, scale)} A ${r} 0 1 1 ${point(startingAngle, scale)} Z`;
+  };
+  if (sweep === 0 || sweep >= TURN) return ratio > 0 ? `${ellipse(1)} ${ellipse(ratio)}` : ellipse(1);
+  const end = startingAngle + sweep;
+  const large = sweep > Math.PI ? 1 : 0;
+  const outer = `M ${point(startingAngle, 1)} A ${round(rx)} ${round(ry)} 0 ${large} 1 ${point(end, 1)}`;
+  if (ratio === 0) return `${outer} L ${round(rx)} ${round(ry)} Z`;
+  return `${outer} L ${point(end, ratio)} A ${round(rx * ratio)} ${round(ry * ratio)} 0 ${large} 0 ${point(startingAngle, ratio)} Z`;
+}
+function layoutGridColor(color) {
+  if (isDesignColor(color)) return cssColor(color);
+  return cssColor({ r: 0, g: 0, b: 0, a: 0.1 });
+}
+function layoutGridLayers(grids) {
+  if (!Array.isArray(grids)) return [];
+  const layers = [];
+  for (const grid of grids) {
+    if (!isRecord(grid) || grid.visible === false) continue;
+    const color = layoutGridColor(grid.color);
+    if (grid.pattern === "GRID") {
+      const size = Math.max(1, finite(grid.sectionSize, 8));
+      for (const angle of [0, 90]) {
+        layers.push({
+          image: `repeating-linear-gradient(${angle}deg, ${color} 0, ${color} 1px, transparent 1px, transparent ${size}px)`,
+          size: "auto",
+          position: "0 0",
+          repeat: "repeat"
+        });
+      }
+      continue;
+    }
+    if (grid.pattern === "COLUMNS" || grid.pattern === "ROWS") {
+      const layer = rowsColsGridLayer(grid.pattern, grid, color);
+      if (layer) layers.push(layer);
+    }
+  }
+  return layers;
+}
+function rowsColsGridLayer(pattern, grid, color) {
+  const count = Math.max(1, Math.round(finite(grid.count, 12)));
+  const gutter = Math.max(0, finite(grid.gutterSize, 20));
+  const offset = Math.max(0, finite(grid.offset, 0));
+  const alignment = typeof grid.alignment === "string" ? grid.alignment : "STRETCH";
+  const horizontal = pattern === "COLUMNS";
+  const axis = horizontal ? "to right" : "to bottom";
+  if (alignment === "STRETCH") {
+    const section = `(100% - ${(count - 1) * gutter}px) / ${count}`;
+    return {
+      image: `repeating-linear-gradient(${axis}, ${color} 0, ${color} calc(${section}), transparent calc(${section}), transparent calc(${section} + ${gutter}px))`,
+      size: horizontal ? `calc(100% - ${2 * offset}px) 100%` : `100% calc(100% - ${2 * offset}px)`,
+      position: horizontal ? `${offset}px 0` : `0 ${offset}px`,
+      repeat: "no-repeat"
+    };
+  }
+  const sectionSize = Math.max(1, finite(grid.sectionSize, 64));
+  const span = count * sectionSize + Math.max(0, count - 1) * gutter;
+  const image = `repeating-linear-gradient(${axis}, ${color} 0, ${color} ${sectionSize}px, transparent ${sectionSize}px, transparent ${sectionSize + gutter}px)`;
+  const size = horizontal ? `${span}px 100%` : `100% ${span}px`;
+  if (alignment === "MAX") {
+    return {
+      image,
+      size,
+      position: horizontal ? `calc(100% - ${offset}px - ${span}px) 0` : `0 calc(100% - ${offset}px - ${span}px)`,
+      repeat: "no-repeat"
+    };
+  }
+  if (alignment === "CENTER") {
+    return { image, size, position: "center", repeat: "no-repeat" };
+  }
+  return {
+    image,
+    size,
+    position: horizontal ? `${offset}px 0` : `0 ${offset}px`,
+    repeat: "no-repeat"
+  };
+}
+function layoutGridOverlayDeclarations(grids) {
+  const layers = layoutGridLayers(grids);
+  if (!layers.length) return [];
+  return [
+    'content: ""',
+    "position: absolute",
+    "inset: 0",
+    "pointer-events: none",
+    "border-radius: inherit",
+    "z-index: 9999",
+    `background-image: ${layers.map((layer) => layer.image).join(", ")}`,
+    `background-size: ${layers.map((layer) => layer.size).join(", ")}`,
+    `background-position: ${layers.map((layer) => layer.position).join(", ")}`,
+    `background-repeat: ${layers.map((layer) => layer.repeat).join(", ")}`
+  ];
+}
 
 // src/render.ts
 var RenderError = class extends Error {
@@ -300,13 +439,15 @@ function render(input, options = {}) {
 }
 function renderDocument(document, options = {}) {
   const ctx = createContext(document);
-  const css = [baseCss(options.background || "#d8d4cb")];
-  const body = document.nodes.map((node) => renderNode(node, ctx, { parent: void 0, parentHasLayout: false, modes: {} }, css)).join("\n");
+  const modes = initialBoardModes(document);
+  const css = [baseCss(options.background || "#d8d4cb"), themeCss(document)];
+  const body = document.nodes.map((node) => renderNode(node, ctx, { parent: void 0, parentHasLayout: false, modes: { ...modes } }, css)).join("\n");
   const board = boardCss(document.nodes);
   const fonts = fontLinks(ctx.fonts);
   const script = runtimeScript(ctx.timeouts);
-  const stylesheet = [board, ...css].join("\n");
+  const stylesheet = [board, ...css].filter(Boolean).join("\n");
   const title = escapeHtml(options.title || document.nodes[0]?.name || "Compact Design");
+  const modeAttrs = Object.entries(modes).map(([collection, mode]) => `data-cd-mode-${cssVar(collection)}="${escapeHtml(mode)}"`).join(" ");
   const page = `<!doctype html>
 <html lang="en">
 <head>
@@ -319,7 +460,7 @@ ${stylesheet}
 </style>
 </head>
 <body>
-<main class="cd-board">
+<main class="cd-board"${modeAttrs ? ` ${modeAttrs}` : ""}>
 ${body}
 </main>
 ${script}
@@ -377,15 +518,28 @@ function renderNode(node, ctx, state, css) {
   const link = prototypeLink(props.prototype, ctx, id);
   css.push(nodeRule(id, node, props, state, modes, ctx));
   const childrenSource = instanceOf ? instanceOf.children : node.children;
+  const parentVisual = instanceOf || node;
+  const stickyOverflow = isScrollingOverflow(parentVisual.properties.overflowDirection) ? parentVisual.properties.overflowDirection : void 0;
+  const fixedCount = stickyOverflow ? clampedFixedChildCount(parentVisual.properties.numberOfFixedChildren, childrenSource.length) : 0;
+  const fixedFrom = childrenSource.length - fixedCount;
   const childState = {
-    parent: instanceOf || node,
-    parentHasLayout: Boolean((instanceOf || node).properties.layout?.direction),
+    parent: parentVisual,
+    parentHasLayout: Boolean(parentVisual.properties.layout?.direction),
     modes
   };
-  const inner = [
-    shapeMarkup(node.type === "INSTANCE" ? visual.type : node.type, props),
-    ...childrenSource.map((child) => renderNode(applyInstanceText(child, node), ctx, childState, css))
-  ].join("");
+  let activeMask;
+  const childMarkup = childrenSource.map((child, index) => {
+    const applied = applyInstanceText(child, node);
+    const fixedSticky = index >= fixedFrom && stickyOverflow ? stickyOverflow : void 0;
+    const maskVisual = maskVisualNode(applied, ctx);
+    if (maskVisual) {
+      activeMask = maskVisual;
+      return renderNode(applied, ctx, { ...childState, mask: void 0, asMask: true, fixedSticky }, css);
+    }
+    return renderNode(applied, ctx, { ...childState, mask: activeMask, asMask: false, fixedSticky }, css);
+  });
+  const shape = state.asMask ? "" : shapeMarkup(node.type === "INSTANCE" ? visual.type : node.type, props, ctx);
+  const inner = [shape, ...childMarkup].join("");
   const attrs = [
     `id="${escapeHtml(id)}"`,
     `class="cd-node"`,
@@ -394,8 +548,12 @@ function renderNode(node, ctx, state, css) {
   ];
   if (link.timeout) attrs.push(`data-cd-timeout="${link.timeout.seconds}"`, `data-cd-navigate="${escapeHtml(htmlId(link.timeout.destination))}"`);
   if (link.back) attrs.push(`data-cd-back="true"`);
-  const tag = link.href ? "a" : "div";
+  if (link.setMode) {
+    attrs.push(`data-cd-set-collection="${escapeHtml(cssVar(link.setMode.collection))}"`, `data-cd-set-mode="${escapeHtml(link.setMode.mode)}"`);
+  }
+  const tag = link.href || link.back || link.setMode ? "a" : "div";
   if (link.href) attrs.push(`href="${escapeHtml(link.href)}"`);
+  else if (link.back || link.setMode) attrs.push(`href="#"`);
   if (node.type === "TEXT") return `<${tag} ${attrs.join(" ")}>${textInner(props, ctx)}</${tag}>`;
   if (node.type === "SVG" && props.svg) return `<${tag} ${attrs.join(" ")}>${sanitizeSvg(props.svg)}</${tag}>`;
   return `<${tag} ${attrs.join(" ")}>${inner}</${tag}>`;
@@ -424,30 +582,44 @@ function applyInstanceText(child, instance) {
   return { ...child, properties: { ...child.properties, text: named } };
 }
 function nodeRule(id, node, props, state, modes, ctx) {
+  const resolved = resolvedProps(props, ctx, modes);
   const declarations = [
     ...positionDeclarations(props, state),
     ...sizeDeclarations(props, state),
     ...layoutDeclarations(props),
     ...childSizingDeclarations(props, state.parent?.properties.layout?.direction),
     ...overflowDeclarations(props),
-    ...radiusDeclarations(props),
-    ...strokeDeclarations(resolvedProps(props, ctx, modes)),
-    ...paintDeclarations(node.type, resolvedProps(props, ctx, modes)),
-    ...effectDeclarations(props),
-    ...textDeclarations(node.type, resolvedProps(props, ctx, modes), ctx),
-    ...variableCustomProperties(props, modes, ctx)
+    ...radiusDeclarations(props)
   ];
-  if (node.type === "ELLIPSE" || node.type === "ARC") declarations.push("border-radius: 50%");
-  if (typeof props.opacity === "number") declarations.push(`opacity: ${props.opacity}`);
+  if (state.asMask) {
+    declarations.push("opacity: 0");
+  } else {
+    if (node.type !== "ARC" && node.type !== "LINE" && node.type !== "STAR" && node.type !== "POLYGON" && node.type !== "VECTOR") declarations.push(...boundStrokeDeclarations(resolved, ctx));
+    declarations.push(
+      ...paintDeclarations(node.type, resolved, ctx),
+      ...effectDeclarations(node.type, props),
+      ...textDeclarations(node.type, resolved, ctx)
+    );
+    if (node.type === "ELLIPSE") declarations.push("border-radius: 50%");
+    if (typeof props.opacity === "number") declarations.push(`opacity: ${props.opacity}`);
+    if (state.mask) declarations.push(...siblingMaskDeclarations(state.mask, node));
+  }
   if (typeof props.rotation === "number" && props.rotation !== 0) {
     declarations.push("transform-origin: center center", `transform: rotate(${props.rotation}deg)`);
   }
   const blend = blendModeCss(props.blendMode);
   if (blend) declarations.push(`mix-blend-mode: ${blend}`);
-  if (props.layoutPositioning === "ABSOLUTE") declarations.push("position: absolute");
-  return `#${cssEscape(id)} { ${declarations.filter(Boolean).join("; ")} }`;
+  if (props.layoutPositioning === "ABSOLUTE" && !state.fixedSticky) declarations.push("position: absolute");
+  const merged = coalesceBoxShadows(declarations.filter(Boolean));
+  const rules = [`#${cssEscape(id)} { ${merged.join("; ")} }`];
+  if (!state.asMask) {
+    const overlay = layoutGridOverlayDeclarations(props.layoutGrids);
+    if (overlay.length) rules.push(`#${cssEscape(id)}::after { ${overlay.join("; ")} }`);
+  }
+  return rules.join("\n");
 }
 function positionDeclarations(props, state) {
+  if (state.fixedSticky) return fixedChildStickyDeclarations(state.fixedSticky);
   if (!state.parent) {
     return [
       "position: absolute",
@@ -484,50 +656,80 @@ function resolvedProps(props, ctx, modes) {
   }
   const next = { ...props, styles: { ...props.styles, fills, strokes } };
   const fillBinding = props.bindings?.fill;
-  if (fillBinding) {
+  if (fillBinding && !isColorBinding(fillBinding, ctx)) {
     const color = resolveColor(fillBinding, modes, ctx);
     if (color) next.styles = { ...next.styles, fills: [{ type: "SOLID", color, opacity: 1 }, ...fills.slice(1)] };
   }
   const strokeBinding = props.bindings?.stroke;
-  if (strokeBinding) {
+  if (strokeBinding && !isColorBinding(strokeBinding, ctx)) {
     const color = resolveColor(strokeBinding, modes, ctx);
     if (color) next.styles = { ...next.styles, strokes: [{ type: "SOLID", color, opacity: 1 }, ...strokes.slice(1)] };
   }
   return next;
 }
-function paintDeclarations(type, props) {
+function paintDeclarations(type, props, ctx) {
+  const fillBinding = props.bindings?.fill;
+  if (fillBinding && isColorBinding(fillBinding, ctx)) {
+    const value = `var(--cd-${cssVar(fillBinding)})`;
+    if (type === "TEXT") return [`color: ${value}`];
+    if (type === "STAR" || type === "POLYGON" || type === "VECTOR" || type === "SVG" || type === "ARC" || type === "LINE") return [];
+    return [`background: ${value}`];
+  }
   if (type === "TEXT") {
     const color = paintColor(props.styles.fills[0]);
     return color ? [`color: ${color}`] : [];
   }
-  if (type === "STAR" || type === "POLYGON" || type === "VECTOR" || type === "SVG") return [];
+  if (type === "STAR" || type === "POLYGON" || type === "VECTOR" || type === "SVG" || type === "ARC" || type === "LINE") return [];
   const layers = backgroundLayers(props.styles.fills);
   return layers.length ? [`background: ${layers.join(", ")}`] : [];
 }
-function effectDeclarations(props) {
+function effectDeclarations(type, props) {
   const declarations = [];
-  const shadows = effectShadows(props.styles.effects);
-  if (shadows.length) declarations.push(`box-shadow: ${shadows.join(", ")}`);
+  if (type === "TEXT") {
+    const shadows = textShadows(props.styles.effects);
+    if (shadows.length) declarations.push(`text-shadow: ${shadows.join(", ")}`);
+  } else {
+    const shadows = effectShadows(props.styles.effects);
+    if (shadows.length) declarations.push(`box-shadow: ${shadows.join(", ")}`);
+  }
   const blur = blurFilters(props.styles.effects);
   if (blur.filter) declarations.push(`filter: ${blur.filter}`);
   if (blur.backdrop) declarations.push(`backdrop-filter: ${blur.backdrop}`);
   return declarations;
 }
+function textShadows(effects) {
+  return effects.filter((effect) => effect.visible !== false && effect.type === "DROP_SHADOW").map((effect) => `${finite(effect.offset?.x, 0)}px ${finite(effect.offset?.y, 4)}px ${finite(effect.radius, 8)}px ${cssColor(effect.color)}`);
+}
+function paragraphSpacingPx(props) {
+  const value = props.paragraphSpacing;
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return void 0;
+  return value;
+}
 function textDeclarations(type, props, ctx) {
   if (type !== "TEXT") return [];
   const font = textFont(props, ctx);
   const declarations = fontDeclarations(font);
   const lineHeight = lineHeightCss(props.lineHeight);
   const letterSpacing = letterSpacingCss(props.letterSpacing);
+  const spacing = paragraphSpacingPx(props);
   if (lineHeight) declarations.push(`line-height: ${lineHeight}`);
   if (letterSpacing) declarations.push(`letter-spacing: ${letterSpacing}`);
   if (props.alignment) declarations.push(`text-align: ${props.alignment.toLowerCase()}`);
-  if (props.verticalAlignment === "CENTER") declarations.push("display: flex", "align-items: center");
-  if (props.verticalAlignment === "BOTTOM") declarations.push("display: flex", "align-items: flex-end");
+  if (spacing !== void 0) {
+    declarations.push("display: flex", "flex-direction: column", `gap: ${spacing}px`);
+    if (props.verticalAlignment === "CENTER") declarations.push("justify-content: center");
+    if (props.verticalAlignment === "BOTTOM") declarations.push("justify-content: flex-end");
+  } else {
+    if (props.verticalAlignment === "CENTER") declarations.push("display: flex", "align-items: center");
+    if (props.verticalAlignment === "BOTTOM") declarations.push("display: flex", "align-items: flex-end");
+  }
   if (props.textDecoration === "UNDERLINE") declarations.push("text-decoration: underline");
   if (props.textDecoration === "STRIKETHROUGH") declarations.push("text-decoration: line-through");
   const transform = textCaseCss(props.textCase);
   if (transform) declarations.push(`text-transform: ${transform}`);
+  const variant = textCaseVariantCss(props.textCase);
+  if (variant) declarations.push(`font-variant-caps: ${variant}`);
+  if (props.hangingPunctuation === true) declarations.push("hanging-punctuation: first");
   if (typeof props.paragraphIndent === "number") declarations.push(`text-indent: ${props.paragraphIndent}px`);
   if (props.textTruncation === "ENDING" || props.textAutoResize === "TRUNCATE") {
     declarations.push("overflow: hidden", "text-overflow: ellipsis", "white-space: nowrap");
@@ -546,27 +748,62 @@ function textFont(props, ctx) {
   return props.font;
 }
 function textInner(props, ctx) {
+  const spacing = paragraphSpacingPx(props);
+  if (spacing === void 0) return textContent(props, ctx);
+  return textParagraphs(props, ctx).map((content) => `<p style="margin: 0">${content}</p>`).join("");
+}
+function textContent(props, ctx) {
   if (Array.isArray(props.runs) && props.runs.length) {
     return props.runs.map((run) => {
       if (!isRecord(run)) return "";
-      const text = typeof run.text === "string" ? run.text : "";
-      const style = [];
-      if (isRecord(run.font)) {
-        const font = {
-          family: typeof run.font.family === "string" ? run.font.family : "Arial",
-          style: typeof run.font.style === "string" ? run.font.style : "Regular",
-          size: finite(run.font.size, 16)
-        };
-        ctx.fonts.add(font.family);
-        style.push(...fontDeclarations(font));
-      }
-      const fill = runFill(run.fill);
-      if (fill) style.push(`color: ${fill}`);
-      return `<span${style.length ? ` style="${escapeHtml(style.join("; "))}"` : ""}>${escapeHtml(text)}</span>`;
+      return renderRunMarkup(run, typeof run.text === "string" ? run.text : "", ctx);
     }).join("");
   }
   return escapeHtml(props.text || "");
 }
+function textParagraphs(props, ctx) {
+  if (Array.isArray(props.runs) && props.runs.length) {
+    const paragraphs = [[]];
+    for (const run of props.runs) {
+      if (!isRecord(run)) continue;
+      const parts = (typeof run.text === "string" ? run.text : "").split("\n");
+      for (let index = 0; index < parts.length; index++) {
+        if (index > 0) paragraphs.push([]);
+        const piece = renderRunMarkup(run, parts[index], ctx);
+        if (piece) paragraphs[paragraphs.length - 1].push(piece);
+      }
+    }
+    return paragraphs.map((pieces) => pieces.join(""));
+  }
+  return (props.text || "").split("\n").map((line) => escapeHtml(line));
+}
+function renderRunMarkup(run, text, ctx) {
+  if (!text) return "";
+  const style = [];
+  if (isRecord(run.font)) {
+    const font = {
+      family: typeof run.font.family === "string" ? run.font.family : "Arial",
+      style: typeof run.font.style === "string" ? run.font.style : "Regular",
+      size: finite(run.font.size, 16)
+    };
+    ctx.fonts.add(font.family);
+    style.push(...fontDeclarations(font));
+  }
+  const fill = runFill(run.fill);
+  if (fill) style.push(`color: ${fill}`);
+  if (run.textDecoration === "UNDERLINE") style.push("text-decoration: underline");
+  if (run.textDecoration === "STRIKETHROUGH") style.push("text-decoration: line-through");
+  if (isRecord(run.letterSpacing)) {
+    const spacing = letterSpacingCss({
+      unit: run.letterSpacing.unit === "PERCENT" ? "PERCENT" : "PIXELS",
+      value: finite(run.letterSpacing.value, 0)
+    });
+    if (spacing) style.push(`letter-spacing: ${spacing}`);
+  }
+  let markup = `<span${style.length ? ` style="${escapeHtml(style.join("; "))}"` : ""}>${escapeHtml(text)}</span>`;
+  if (typeof run.link === "string") markup = `<a href="${escapeHtml(run.link)}">${markup}</a>`;
+  return markup;
+}
 function runFill(value) {
   if (typeof value === "string" && /^#/.test(value)) return value;
   if (isDesignColor(value)) return cssColor(value);
@@ -576,23 +813,71 @@ function runFill(value) {
   }
   return void 0;
 }
-function variableCustomProperties(props, modes, ctx) {
-  const declarations = [];
-  for (const [collection, mode] of Object.entries(props.variableModes || {})) {
-    for (const [key, ref] of ctx.variables) {
-      if (ref.collection !== collection) continue;
-      if (ref.item.id !== key) continue;
-      const value = resolveVariableValue(ref, modes);
-      if (isDesignColor(value)) declarations.push(`--cd-${cssVar(ref.item.id || ref.item.name)}: ${cssColor(value)}`);
-    }
+function boundStrokeDeclarations(props, ctx) {
+  const strokeBinding = props.bindings?.stroke;
+  if (strokeBinding && isColorBinding(strokeBinding, ctx)) {
+    return strokeDeclarations(props, `var(--cd-${cssVar(strokeBinding)})`);
   }
-  const fill = props.bindings?.fill;
-  if (fill) declarations.push(`--cd-bound-fill: var(--cd-${cssVar(fill)})`);
-  return declarations;
+  return strokeDeclarations(props);
+}
+function isColorBinding(key, ctx) {
+  const ref = ctx.variables.get(key);
+  return Boolean(ref && ref.item.type === "COLOR");
 }
 function cssVar(name) {
   return name.replace(/[^a-zA-Z0-9_-]+/g, "-");
 }
+function initialBoardModes(document) {
+  const modes = {};
+  for (const collection of document.variables) {
+    if (collection.modes?.length) modes[collection.name] = collection.modes[0];
+    else {
+      for (const item of collection.items) {
+        if (item.values) {
+          const first = Object.keys(item.values)[0];
+          if (first) {
+            modes[collection.name] = first;
+            break;
+          }
+        }
+      }
+    }
+  }
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      Object.assign(modes, node.properties.variableModes || {});
+      walk(node.children);
+    }
+  };
+  walk(document.nodes);
+  return modes;
+}
+function themeCss(document) {
+  const values = [];
+  const selectors = [];
+  for (const collection of document.variables) {
+    const modeNames = collection.modes?.length ? collection.modes : [...new Set(collection.items.flatMap((item) => item.values ? Object.keys(item.values) : []))];
+    if (!modeNames.length) continue;
+    const colorItems = collection.items.filter((item) => item.type === "COLOR");
+    if (!colorItems.length) continue;
+    for (const item of colorItems) {
+      const key = cssVar(item.id || item.name);
+      for (const mode of modeNames) {
+        const raw = item.values?.[mode] ?? item.value;
+        if (isDesignColor(raw)) values.push(`--cd-${key}-${cssVar(mode)}: ${cssColor(raw)}`);
+      }
+    }
+    for (const mode of modeNames) {
+      const active = colorItems.map((item) => {
+        const key = cssVar(item.id || item.name);
+        return `--cd-${key}: var(--cd-${key}-${cssVar(mode)})`;
+      });
+      selectors.push(`.cd-board[data-cd-mode-${cssVar(collection.name)}="${mode}"] { ${active.join("; ")} }`);
+    }
+  }
+  if (!values.length) return "";
+  return [`.cd-board { ${values.join("; ")} }`, ...selectors].join("\n");
+}
 function resolveColor(key, modes, ctx) {
   const ref = ctx.variables.get(key);
   if (!ref) return void 0;
@@ -623,40 +908,166 @@ function prototypeLink(value, ctx, sourceId) {
   if (!reaction) return {};
   const trigger = isRecord(reaction.trigger) ? reaction.trigger : {};
   const actions = Array.isArray(reaction.actions) ? reaction.actions : [];
-  const action = actions.find(isRecord);
-  if (!action) return {};
-  const type = String(action.type || "").toUpperCase();
-  if (type === "URL" && typeof action.url === "string") return { href: action.url };
-  if (type === "BACK") return { href: "#", back: true };
-  if ((type === "NAVIGATE" || type === "SWAP" || type === "OVERLAY") && typeof action.destination === "string") {
-    if (String(trigger.type || "").toUpperCase() === "AFTER_TIMEOUT") {
-      const seconds = finite(trigger.timeout, 1);
-      ctx.timeouts.push({ id: sourceId, seconds, destination: action.destination });
-      return { timeout: { seconds, destination: action.destination } };
+  if (!actions.some(isRecord)) return {};
+  const triggerType = String(trigger.type || "ON_CLICK").toUpperCase();
+  const link = {};
+  for (const candidate of actions.filter(isRecord)) {
+    const type = String(candidate.type || "").toUpperCase();
+    if (type === "SET_VARIABLE_MODE" && triggerType !== "AFTER_TIMEOUT") {
+      const collection = typeof candidate.collection === "string" ? candidate.collection : typeof candidate.variableCollectionId === "string" ? candidate.variableCollectionId : "";
+      const mode = typeof candidate.mode === "string" ? candidate.mode : typeof candidate.variableModeId === "string" ? candidate.variableModeId : "";
+      if (collection && mode) link.setMode = { collection, mode };
+      continue;
+    }
+    if (type === "URL" && typeof candidate.url === "string" && !link.href) link.href = candidate.url;
+    if (type === "BACK") {
+      link.href = link.href || "#";
+      link.back = true;
+    }
+    if ((type === "NAVIGATE" || type === "SWAP" || type === "OVERLAY") && typeof candidate.destination === "string") {
+      if (triggerType === "AFTER_TIMEOUT") {
+        const seconds = finite(trigger.timeout, 1);
+        ctx.timeouts.push({ id: sourceId, seconds, destination: candidate.destination });
+        link.timeout = { seconds, destination: candidate.destination };
+      } else if (!link.href) {
+        link.href = `#${htmlId(candidate.destination)}`;
+      }
     }
-    return { href: `#${htmlId(action.destination)}` };
   }
-  return {};
+  return link;
+}
+function maskVisualNode(node, ctx) {
+  const instanceOf = node.type === "INSTANCE" && node.properties.componentId ? ctx.components.get(node.properties.componentId) : void 0;
+  const props = mergeInstance(node, instanceOf);
+  if (props.isMask !== true) return void 0;
+  if (instanceOf) return { ...node, type: instanceOf.type, properties: props };
+  return { ...node, properties: props };
+}
+function siblingMaskDeclarations(mask, sibling) {
+  const mw = finite(mask.properties.size.width, 0);
+  const mh = finite(mask.properties.size.height, 0);
+  if (mw <= 0 || mh <= 0) return [];
+  const x = finite(mask.properties.position.x, 0) - finite(sibling.properties.position.x, 0);
+  const y = finite(mask.properties.position.y, 0) - finite(sibling.properties.position.y, 0);
+  if (mask.type === "ELLIPSE") {
+    return [`clip-path: ellipse(${mw / 2}px ${mh / 2}px at ${x + mw / 2}px ${y + mh / 2}px)`];
+  }
+  if (mask.type !== "RECTANGLE") return [];
+  const round2 = rectangleMaskRound(mask.properties);
+  if (round2) {
+    return [`clip-path: xywh(${x}px ${y}px ${mw}px ${mh}px${round2})`];
+  }
+  return [
+    "-webkit-mask-image: linear-gradient(#000 0 0)",
+    "mask-image: linear-gradient(#000 0 0)",
+    `-webkit-mask-size: ${mw}px ${mh}px`,
+    `mask-size: ${mw}px ${mh}px`,
+    `-webkit-mask-position: ${x}px ${y}px`,
+    `mask-position: ${x}px ${y}px`,
+    "-webkit-mask-repeat: no-repeat",
+    "mask-repeat: no-repeat"
+  ];
+}
+function rectangleMaskRound(props) {
+  if (Array.isArray(props.cornerRadii) && props.cornerRadii.length === 4) {
+    const radii = props.cornerRadii.map((value) => finite(value, 0));
+    if (radii.some((value) => value > 0)) return ` round ${radii.map((value) => `${value}px`).join(" ")}`;
+    return "";
+  }
+  if (typeof props.cornerRadius === "number" && props.cornerRadius > 0) {
+    return ` round ${props.cornerRadius}px`;
+  }
+  return "";
+}
+function shapeFill(props, ctx) {
+  const fillBinding = props.bindings?.fill;
+  if (fillBinding && isColorBinding(fillBinding, ctx)) return `var(--cd-${cssVar(fillBinding)})`;
+  return paintColor(props.styles.fills[0]) || "currentColor";
 }
-function shapeMarkup(type, props) {
-  const fill = paintColor(props.styles.fills[0]) || "currentColor";
-  if (type === "ELLIPSE" || type === "ARC") {
+function shapeStroke(props, ctx) {
+  const strokeBinding = props.bindings?.stroke;
+  if (strokeBinding && isColorBinding(strokeBinding, ctx)) return `var(--cd-${cssVar(strokeBinding)})`;
+  return paintColor(props.styles.strokes[0]);
+}
+function shapeMarkup(type, props, ctx) {
+  const fill = shapeFill(props, ctx);
+  if (type === "ELLIPSE") {
     return "";
   }
+  if (type === "ARC") {
+    const width = Math.max(1, finite(props.size.width, 1));
+    const height = Math.max(1, finite(props.size.height, 1));
+    const d = arcPath(width, height, finite(props.startingAngle, 0), finite(props.endingAngle, Math.PI * 1.5), finite(props.innerRadiusRatio, 0));
+    const strokeAttrs = svgPaintStrokeAttrs(props, ctx);
+    return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" overflow="visible" aria-hidden="true"><path d="${d}" fill-rule="evenodd" fill="${escapeHtml(fill)}"${strokeAttrs}/></svg>`;
+  }
   if (type === "POLYGON" || type === "STAR") {
     const width = Math.max(1, finite(props.size.width, 1));
     const height = Math.max(1, finite(props.size.height, 1));
     const points = regularPolygon(width / 2, height / 2, Math.min(width, height) / 2, finite(props.pointCount, type === "STAR" ? 5 : 6), type === "STAR" ? finite(props.innerRadius, 0.5) : void 0);
-    return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" aria-hidden="true"><polygon points="${points}" fill="${escapeHtml(fill)}"/></svg>`;
+    const strokeAttrs = svgPaintStrokeAttrs(props, ctx);
+    return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" aria-hidden="true"><polygon points="${points}" fill="${escapeHtml(fill)}"${strokeAttrs}/></svg>`;
   }
   if (type === "VECTOR" && props.vectorPaths?.length) {
     const width = Math.max(1, finite(props.size.width, 1));
     const height = Math.max(1, finite(props.size.height, 1));
-    const paths = props.vectorPaths.map((path) => `<path d="${escapeHtml(path.data)}" fill-rule="${path.windingRule === "EVENODD" ? "evenodd" : "nonzero"}" fill="${escapeHtml(fill)}"/>`).join("");
+    const strokeAttrs = svgPaintStrokeAttrs(props, ctx);
+    const paths = props.vectorPaths.map((path) => {
+      const pathFill = path.windingRule === "NONE" ? "none" : fill;
+      const fillRule = path.windingRule === "EVENODD" ? "evenodd" : "nonzero";
+      return `<path d="${escapeHtml(path.data)}" fill-rule="${fillRule}" fill="${escapeHtml(pathFill)}"${strokeAttrs}/>`;
+    }).join("");
     return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" aria-hidden="true">${paths}</svg>`;
   }
+  if (type === "LINE") {
+    const width = Math.max(1, finite(props.size.width, 1));
+    const height = Math.max(1, finite(props.size.height, 1));
+    const horizontal = width >= height;
+    const x1 = horizontal ? 0 : width / 2;
+    const y1 = horizontal ? height / 2 : 0;
+    const x2 = horizontal ? width : width / 2;
+    const y2 = horizontal ? height / 2 : height;
+    const stroke = shapeStroke(props, ctx) || fill;
+    const attrs = [
+      `x1="${x1}"`,
+      `y1="${y1}"`,
+      `x2="${x2}"`,
+      `y2="${y2}"`,
+      ...svgStrokeAttrList(props, stroke)
+    ];
+    return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" overflow="visible" aria-hidden="true"><line ${attrs.join(" ")}/></svg>`;
+  }
   return "";
 }
+function svgPaintStrokeAttrs(props, ctx) {
+  const stroke = shapeStroke(props, ctx);
+  if (!stroke) return "";
+  return ` ${svgStrokeAttrList(props, stroke).join(" ")}`;
+}
+function svgStrokeAttrList(props, stroke) {
+  const attrs = [
+    `stroke="${escapeHtml(stroke)}"`,
+    `stroke-width="${finite(props.strokeWeight, 1)}"`
+  ];
+  if (props.dashPattern?.length) attrs.push(`stroke-dasharray="${props.dashPattern.map((n) => finite(n, 0)).join(" ")}"`);
+  const linecap = strokeLinecapCss(props.strokeCap);
+  if (linecap) attrs.push(`stroke-linecap="${linecap}"`);
+  const linejoin = strokeLinejoinCss(props.strokeJoin);
+  if (linejoin) attrs.push(`stroke-linejoin="${linejoin}"`);
+  return attrs;
+}
+function strokeLinecapCss(cap) {
+  if (cap === "ROUND") return "round";
+  if (cap === "SQUARE") return "square";
+  if (cap === "NONE") return "butt";
+  return void 0;
+}
+function strokeLinejoinCss(join) {
+  if (join === "MITER") return "miter";
+  if (join === "BEVEL") return "bevel";
+  if (join === "ROUND") return "round";
+  return void 0;
+}
 function fontLinks(families) {
   const custom = [...families].filter((family) => !isWebSafeFont(family));
   if (!custom.length) return "";
@@ -665,23 +1076,19 @@ function fontLinks(families) {
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?${query}&display=swap" rel="stylesheet">`;
 }
-function runtimeScript(timeouts) {
-  if (!timeouts.length) {
-    return `<script>
+function runtimeScript(_timeouts) {
+  return `<script>
 (() => {
-  const stack = [];
-  addEventListener("hashchange", () => stack.push(location.hash));
-  document.querySelectorAll("[data-cd-back]").forEach((node) => {
+  document.querySelectorAll("[data-cd-set-mode]").forEach((node) => {
     node.addEventListener("click", (event) => {
       event.preventDefault();
-      history.back();
+      const collection = (node.getAttribute("data-cd-set-collection") || "").replace(/[^a-zA-Z0-9_-]+/g, "-");
+      const mode = node.getAttribute("data-cd-set-mode");
+      const board = node.closest(".cd-board");
+      if (!board || !collection || !mode) return;
+      board.setAttribute("data-cd-mode-" + collection, mode);
     });
   });
-})();
-</script>`;
-  }
-  return `<script>
-(() => {
   document.querySelectorAll("[data-cd-timeout]").forEach((node) => {
     const seconds = Number(node.getAttribute("data-cd-timeout"));
     const destination = node.getAttribute("data-cd-navigate");