@compact-design/html 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { render, renderDocument, RenderError } from "./render";
+export type { RenderOptions, RenderResult } from "./render";

package/dist/index.js

@@ -0,0 +1,679 @@
+// src/render.ts
+import {
+  indexDocument,
+  validate
+} from "@compact-design/core";
+
+// src/css.ts
+var WEB_SAFE = /* @__PURE__ */ new Set([
+  "Arial",
+  "Helvetica",
+  "Times",
+  "Times New Roman",
+  "Courier",
+  "Courier New",
+  "Georgia",
+  "Verdana",
+  "Tahoma",
+  "Trebuchet MS",
+  "Impact",
+  "Comic Sans MS",
+  "system-ui",
+  "sans-serif",
+  "serif",
+  "monospace"
+]);
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isDesignColor(value) {
+  return isRecord(value) && typeof value.r === "number" && typeof value.g === "number" && typeof value.b === "number";
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function htmlId(id) {
+  const cleaned = id.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return `n-${cleaned || "node"}`;
+}
+function cssEscape(value) {
+  return value.replace(/[^a-zA-Z0-9_-]/g, (char) => `\\${char}`);
+}
+function finite(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function cssColor(value, opacity = 1) {
+  if (!value) return `rgba(0, 0, 0, ${opacity})`;
+  const channel = (input) => {
+    const n = finite(input, 0);
+    return Math.round(n > 1 && n <= 255 ? n : n * 255);
+  };
+  const alpha = finite(value.a, 1) * opacity;
+  return `rgba(${channel(value.r)}, ${channel(value.g)}, ${channel(value.b)}, ${alpha})`;
+}
+function paintColor(paint) {
+  if (!paint || paint.type !== "SOLID" || !paint.color) return void 0;
+  return cssColor(paint.color, finite(paint.opacity, 1));
+}
+function gradientAngle(paint) {
+  const transform = paint.gradientTransform;
+  if (!transform) return 90;
+  const cosine = transform[0]?.[0] ?? 1;
+  const sine = transform[0]?.[1] ?? 0;
+  const compact = Math.atan2(sine, cosine) * 180 / Math.PI;
+  return compact + 90;
+}
+function gradientStops(paint) {
+  const stops = paint.gradientStops || [];
+  if (!stops.length) return `${cssColor(paint.color)}, ${cssColor(paint.color)}`;
+  return stops.map((stop) => `${cssColor(stop.color)} ${Math.round(finite(stop.position, 0) * 1e3) / 10}%`).join(", ");
+}
+function backgroundLayers(paints) {
+  const layers = [];
+  for (const paint of [...paints].reverse()) {
+    if (paint.type === "SOLID" && paint.color) layers.push(`linear-gradient(${cssColor(paint.color, finite(paint.opacity, 1))}, ${cssColor(paint.color, finite(paint.opacity, 1))})`);
+    else if (paint.type === "GRADIENT_LINEAR") layers.push(`linear-gradient(${gradientAngle(paint)}deg, ${gradientStops(paint)})`);
+    else if (paint.type === "GRADIENT_RADIAL" || paint.type === "GRADIENT_DIAMOND") layers.push(`radial-gradient(circle, ${gradientStops(paint)})`);
+    else if (paint.type === "GRADIENT_ANGULAR") layers.push(`conic-gradient(${gradientStops(paint)})`);
+    else if (paint.type === "IMAGE" && paint.src) {
+      const size = paint.scaleMode === "FIT" ? "contain" : paint.scaleMode === "TILE" ? "auto" : "cover";
+      const repeat = paint.scaleMode === "TILE" ? "repeat" : "no-repeat";
+      layers.push(`url(${JSON.stringify(paint.src)}) ${repeat} center / ${size}`);
+    }
+  }
+  return layers;
+}
+function fontWeight(style) {
+  const value = style.toLowerCase();
+  if (value.includes("thin")) return 100;
+  if (value.includes("extralight") || value.includes("ultralight")) return 200;
+  if (value.includes("light")) return 300;
+  if (value.includes("medium")) return 500;
+  if (value.includes("semibold") || value.includes("demibold")) return 600;
+  if (value.includes("extrabold") || value.includes("ultrabold")) return 800;
+  if (value.includes("black") || value.includes("heavy")) return 900;
+  if (value.includes("bold")) return 700;
+  return 400;
+}
+function isItalic(style) {
+  return /italic|oblique/i.test(style);
+}
+function quoteFont(family) {
+  return /[^a-zA-Z0-9-]/.test(family) ? `"${family.replace(/"/g, '\\"')}"` : family;
+}
+function isWebSafeFont(family) {
+  return WEB_SAFE.has(family);
+}
+function fontDeclarations(font) {
+  if (!font) return [];
+  const declarations = [
+    `font-family: ${quoteFont(font.family)}, sans-serif`,
+    `font-size: ${finite(font.size, 16)}px`,
+    `font-weight: ${fontWeight(font.style)}`
+  ];
+  if (isItalic(font.style)) declarations.push("font-style: italic");
+  return declarations;
+}
+function lineHeightCss(value) {
+  if (!value || value.unit === "AUTO") return void 0;
+  if (value.unit === "PIXELS") return `${finite(value.value, 0)}px`;
+  return String(finite(value.value, 100) / 100);
+}
+function letterSpacingCss(value) {
+  if (!value) return void 0;
+  if (value.unit === "PERCENT") return `${finite(value.value, 0) / 100}em`;
+  return `${finite(value.value, 0)}px`;
+}
+function effectShadows(effects) {
+  const shadows = [];
+  for (const effect of effects) {
+    if (effect.visible === false) continue;
+    if (effect.type === "DROP_SHADOW" || effect.type === "INNER_SHADOW") {
+      const inset = effect.type === "INNER_SHADOW" ? "inset " : "";
+      shadows.push(`${inset}${finite(effect.offset?.x, 0)}px ${finite(effect.offset?.y, 4)}px ${finite(effect.radius, 8)}px ${finite(effect.spread, 0)}px ${cssColor(effect.color)}`);
+    }
+  }
+  return shadows;
+}
+function blurFilters(effects) {
+  const layer = effects.filter((effect) => effect.visible !== false && effect.type === "LAYER_BLUR");
+  const backdrop = effects.filter((effect) => effect.visible !== false && effect.type === "BACKGROUND_BLUR");
+  return {
+    filter: layer.length ? layer.map((effect) => `blur(${finite(effect.radius, 8)}px)`).join(" ") : void 0,
+    backdrop: backdrop.length ? backdrop.map((effect) => `blur(${finite(effect.radius, 8)}px)`).join(" ") : void 0
+  };
+}
+var ALIGN = {
+  MIN: "flex-start",
+  MAX: "flex-end",
+  CENTER: "center",
+  SPACE_BETWEEN: "space-between",
+  BASELINE: "baseline",
+  STRETCH: "stretch"
+};
+function layoutDeclarations(props) {
+  const layout = props.layout;
+  if (!layout?.direction) return [];
+  const declarations = [];
+  if (layout.direction === "GRID") {
+    declarations.push("display: grid");
+    if (typeof layout.itemSpacing === "number") declarations.push(`gap: ${layout.itemSpacing}px`);
+  } else {
+    declarations.push("display: flex");
+    declarations.push(`flex-direction: ${layout.direction === "HORIZONTAL" ? "row" : "column"}`);
+    if (layout.wrap) declarations.push("flex-wrap: wrap");
+    declarations.push(`justify-content: ${ALIGN[layout.primaryAxisAlignItems || "MIN"] || "flex-start"}`);
+    declarations.push(`align-items: ${ALIGN[layout.counterAxisAlignItems || "MIN"] || "flex-start"}`);
+    if (typeof layout.itemSpacing === "number") declarations.push(`gap: ${layout.itemSpacing}px`);
+    if (typeof layout.counterAxisSpacing === "number" && layout.wrap) declarations.push(`row-gap: ${layout.counterAxisSpacing}px`);
+  }
+  const padding = layout.padding;
+  if (padding) {
+    declarations.push(`padding: ${finite(padding.top, 0)}px ${finite(padding.right, 0)}px ${finite(padding.bottom, 0)}px ${finite(padding.left, 0)}px`);
+  }
+  return declarations;
+}
+function childSizingDeclarations(props, parentDirection) {
+  if (!parentDirection) return [];
+  const declarations = [];
+  const horizontal = props.layoutSizingHorizontal;
+  const vertical = props.layoutSizingVertical;
+  if (parentDirection === "HORIZONTAL") {
+    if (horizontal === "FILL") declarations.push("flex: 1 1 0", "min-width: 0");
+    else if (horizontal === "HUG") declarations.push("flex: 0 0 auto", "width: auto");
+    if (vertical === "FILL") declarations.push("align-self: stretch", "height: auto");
+    else if (vertical === "HUG") declarations.push("height: auto");
+  } else if (parentDirection === "VERTICAL") {
+    if (vertical === "FILL") declarations.push("flex: 1 1 0", "min-height: 0");
+    else if (vertical === "HUG") declarations.push("flex: 0 0 auto", "height: auto");
+    if (horizontal === "FILL") declarations.push("align-self: stretch", "width: auto");
+    else if (horizontal === "HUG") declarations.push("width: auto");
+  }
+  if (typeof props.layoutGrow === "number") declarations.push(`flex-grow: ${props.layoutGrow}`);
+  if (props.layoutAlign === "STRETCH") declarations.push("align-self: stretch");
+  if (typeof props.minWidth === "number") declarations.push(`min-width: ${props.minWidth}px`);
+  if (typeof props.maxWidth === "number") declarations.push(`max-width: ${props.maxWidth}px`);
+  if (typeof props.minHeight === "number") declarations.push(`min-height: ${props.minHeight}px`);
+  if (typeof props.maxHeight === "number") declarations.push(`max-height: ${props.maxHeight}px`);
+  return declarations;
+}
+function overflowDeclarations(props) {
+  if (props.clipsContent) return ["overflow: hidden"];
+  if (props.overflowDirection === "HORIZONTAL") return ["overflow-x: auto", "overflow-y: hidden"];
+  if (props.overflowDirection === "VERTICAL") return ["overflow-x: hidden", "overflow-y: auto"];
+  if (props.overflowDirection === "BOTH") return ["overflow: auto"];
+  return [];
+}
+function radiusDeclarations(props) {
+  if (Array.isArray(props.cornerRadii) && props.cornerRadii.length === 4) {
+    return [`border-radius: ${props.cornerRadii.map((value) => `${finite(value, 0)}px`).join(" ")}`];
+  }
+  if (typeof props.cornerRadius === "number") return [`border-radius: ${props.cornerRadius}px`];
+  return [];
+}
+function strokeDeclarations(props) {
+  const color = paintColor(props.styles.strokes[0]);
+  if (!color) return [];
+  const style = props.dashPattern?.length ? "dashed" : "solid";
+  const declarations = [];
+  const sides = [
+    ["border-top-width", props.strokeTopWeight],
+    ["border-right-width", props.strokeRightWeight],
+    ["border-bottom-width", props.strokeBottomWeight],
+    ["border-left-width", props.strokeLeftWeight]
+  ];
+  const perSide = sides.some(([, value]) => typeof value === "number");
+  if (perSide) {
+    declarations.push(`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;
+}
+function blendModeCss(value) {
+  if (!value || value === "PASS_THROUGH" || value === "NORMAL") return void 0;
+  return value.toLowerCase().replace(/_/g, "-");
+}
+function textCaseCss(value) {
+  if (value === "UPPER") return "uppercase";
+  if (value === "LOWER") return "lowercase";
+  if (value === "TITLE") return "capitalize";
+  return void 0;
+}
+function sanitizeSvg(markup) {
+  return markup.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/\son[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+}
+function regularPolygon(cx, cy, radius, points, innerRatio) {
+  const count = Math.max(3, Math.round(points));
+  const coords = [];
+  const steps = innerRatio === void 0 ? count : count * 2;
+  for (let index = 0; index < steps; index += 1) {
+    const ratio = innerRatio === void 0 || index % 2 === 0 ? 1 : innerRatio;
+    const angle = -Math.PI / 2 + index * Math.PI * 2 / steps;
+    coords.push(`${cx + radius * ratio * Math.cos(angle)},${cy + radius * ratio * Math.sin(angle)}`);
+  }
+  return coords.join(" ");
+}
+
+// src/render.ts
+var RenderError = class extends Error {
+  issues;
+  constructor(message, issues = []) {
+    super(message);
+    this.name = "RenderError";
+    this.issues = issues;
+  }
+};
+function render(input, options = {}) {
+  const result = validate(input);
+  if (result.patch) throw new RenderError("Cannot render a Compact Design patch document.");
+  if (!result.valid || !result.document) throw new RenderError("Compact Design document is not valid.", result.issues);
+  return renderDocument(result.document, 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 board = boardCss(document.nodes);
+  const fonts = fontLinks(ctx.fonts);
+  const script = runtimeScript(ctx.timeouts);
+  const stylesheet = [board, ...css].join("\n");
+  const title = escapeHtml(options.title || document.nodes[0]?.name || "Compact Design");
+  const page = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+${fonts}
+<style>
+${stylesheet}
+</style>
+</head>
+<body>
+<main class="cd-board">
+${body}
+</main>
+${script}
+</body>
+</html>
+`;
+  return { html: page, body, css: stylesheet };
+}
+function createContext(document) {
+  const styles = /* @__PURE__ */ new Map();
+  for (const style of document.styles) {
+    if (style.id) styles.set(style.id, style);
+    styles.set(style.name, style);
+  }
+  const variables = /* @__PURE__ */ new Map();
+  for (const collection of document.variables) {
+    for (const item of collection.items) {
+      const ref = { collection: collection.name, item };
+      if (item.id) variables.set(item.id, ref);
+      variables.set(item.name, ref);
+    }
+  }
+  return {
+    document,
+    components: indexDocument(document).components,
+    styles,
+    variables,
+    fonts: /* @__PURE__ */ new Set(),
+    timeouts: []
+  };
+}
+function boardCss(nodes) {
+  const minX = Math.min(0, ...nodes.map((node) => node.properties.position.x));
+  const minY = Math.min(0, ...nodes.map((node) => node.properties.position.y));
+  const width = Math.max(0, ...nodes.map((node) => node.properties.position.x + node.properties.size.width - minX));
+  const height = Math.max(0, ...nodes.map((node) => node.properties.position.y + node.properties.size.height - minY));
+  return `.cd-board { --cd-origin-x: ${minX}px; --cd-origin-y: ${minY}px; width: ${width}px; height: ${height}px; }`;
+}
+function baseCss(background) {
+  return `html, body { margin: 0; background: ${background}; }
+.cd-board { position: relative; margin: 32px auto; }
+.cd-node { box-sizing: border-box; }
+.cd-node[data-type="TEXT"] { white-space: pre-wrap; overflow-wrap: break-word; }
+.cd-node a.cd-hotspot, a.cd-node { color: inherit; text-decoration: none; }
+.cd-shape { display: block; width: 100%; height: 100%; }`;
+}
+function renderNode(node, ctx, state, css) {
+  if (node.properties.visible === false) return "";
+  const modes = { ...state.modes, ...node.properties.variableModes || {} };
+  const instanceOf = node.type === "INSTANCE" && node.properties.componentId ? ctx.components.get(node.properties.componentId) : void 0;
+  const visual = instanceOf || node;
+  const props = mergeInstance(node, instanceOf);
+  noteFonts(props, ctx);
+  const id = htmlId(node.id);
+  const link = prototypeLink(props.prototype, ctx, id);
+  css.push(nodeRule(id, node, props, state, modes, ctx));
+  const childrenSource = instanceOf ? instanceOf.children : node.children;
+  const childState = {
+    parent: instanceOf || node,
+    parentHasLayout: Boolean((instanceOf || node).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("");
+  const attrs = [
+    `id="${escapeHtml(id)}"`,
+    `class="cd-node"`,
+    `data-type="${escapeHtml(node.type)}"`,
+    `data-name="${escapeHtml(node.name)}"`
+  ];
+  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.href) attrs.push(`href="${escapeHtml(link.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}>`;
+}
+function mergeInstance(node, component) {
+  if (!component) return node.properties;
+  return {
+    ...component.properties,
+    ...node.properties,
+    styles: {
+      fills: node.properties.styles.fills.length ? node.properties.styles.fills : component.properties.styles.fills,
+      strokes: node.properties.styles.strokes.length ? node.properties.styles.strokes : component.properties.styles.strokes,
+      effects: node.properties.styles.effects.length ? node.properties.styles.effects : component.properties.styles.effects
+    },
+    size: node.properties.size,
+    position: node.properties.position,
+    layout: node.properties.layout || component.properties.layout,
+    prototype: node.properties.prototype || component.properties.prototype
+  };
+}
+function applyInstanceText(child, instance) {
+  const overrides = instance.properties.instanceProperties;
+  if (!overrides || child.type !== "TEXT") return child;
+  const named = overrides[child.name];
+  if (typeof named !== "string") return child;
+  return { ...child, properties: { ...child.properties, text: named } };
+}
+function nodeRule(id, node, props, state, modes, ctx) {
+  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)
+  ];
+  if (node.type === "ELLIPSE" || node.type === "ARC") declarations.push("border-radius: 50%");
+  if (typeof props.opacity === "number") declarations.push(`opacity: ${props.opacity}`);
+  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("; ")} }`;
+}
+function positionDeclarations(props, state) {
+  if (!state.parent) {
+    return [
+      "position: absolute",
+      `left: calc(${props.position.x}px - var(--cd-origin-x))`,
+      `top: calc(${props.position.y}px - var(--cd-origin-y))`
+    ];
+  }
+  if (state.parentHasLayout && props.layoutPositioning !== "ABSOLUTE") return ["position: relative"];
+  const left = props.position.x - state.parent.properties.position.x;
+  const top = props.position.y - state.parent.properties.position.y;
+  return ["position: absolute", `left: ${left}px`, `top: ${top}px`];
+}
+function sizeDeclarations(props, state) {
+  const hugWidth = state.parentHasLayout && props.layoutSizingHorizontal === "HUG";
+  const hugHeight = state.parentHasLayout && props.layoutSizingVertical === "HUG";
+  const fillWidth = state.parentHasLayout && props.layoutSizingHorizontal === "FILL";
+  const fillHeight = state.parentHasLayout && props.layoutSizingVertical === "FILL";
+  const declarations = [];
+  if (!hugWidth && !fillWidth) declarations.push(`width: ${finite(props.size.width, 0)}px`);
+  if (!hugHeight && !fillHeight) declarations.push(`height: ${finite(props.size.height, 0)}px`);
+  return declarations;
+}
+function resolvedProps(props, ctx, modes) {
+  const fills = [...props.styles.fills];
+  const strokes = [...props.styles.strokes];
+  const refs = props.styleRefs || {};
+  if (refs.fill) {
+    const style = ctx.styles.get(refs.fill);
+    if (style?.paints?.length) fills.splice(0, fills.length, ...style.paints);
+  }
+  if (refs.stroke) {
+    const style = ctx.styles.get(refs.stroke);
+    if (style?.paints?.length) strokes.splice(0, strokes.length, ...style.paints);
+  }
+  const next = { ...props, styles: { ...props.styles, fills, strokes } };
+  const fillBinding = props.bindings?.fill;
+  if (fillBinding) {
+    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) {
+    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) {
+  if (type === "TEXT") {
+    const color = paintColor(props.styles.fills[0]);
+    return color ? [`color: ${color}`] : [];
+  }
+  if (type === "STAR" || type === "POLYGON" || type === "VECTOR" || type === "SVG") return [];
+  const layers = backgroundLayers(props.styles.fills);
+  return layers.length ? [`background: ${layers.join(", ")}`] : [];
+}
+function effectDeclarations(props) {
+  const declarations = [];
+  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 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);
+  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 (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}`);
+  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");
+  }
+  if (typeof props.maxLines === "number") {
+    declarations.push("display: -webkit-box", "-webkit-box-orient: vertical", `-webkit-line-clamp: ${props.maxLines}`, "overflow: hidden");
+  }
+  return declarations;
+}
+function textFont(props, ctx) {
+  const ref = props.styleRefs?.text;
+  if (ref) {
+    const style = ctx.styles.get(ref);
+    if (style?.font) return style.font;
+  }
+  return props.font;
+}
+function textInner(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>`;
+    }).join("");
+  }
+  return escapeHtml(props.text || "");
+}
+function runFill(value) {
+  if (typeof value === "string" && /^#/.test(value)) return value;
+  if (isDesignColor(value)) return cssColor(value);
+  if (isRecord(value) && value.type === "SOLID") {
+    const paint = { type: "SOLID", color: isDesignColor(value.color) ? value.color : void 0, opacity: finite(value.opacity, 1) };
+    return paintColor(paint);
+  }
+  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)}`);
+    }
+  }
+  const fill = props.bindings?.fill;
+  if (fill) declarations.push(`--cd-bound-fill: var(--cd-${cssVar(fill)})`);
+  return declarations;
+}
+function cssVar(name) {
+  return name.replace(/[^a-zA-Z0-9_-]+/g, "-");
+}
+function resolveColor(key, modes, ctx) {
+  const ref = ctx.variables.get(key);
+  if (!ref) return void 0;
+  const value = resolveVariableValue(ref, modes);
+  return isDesignColor(value) ? value : void 0;
+}
+function resolveVariableValue(ref, modes) {
+  const mode = modes[ref.collection];
+  if (mode && ref.item.values && ref.item.values[mode] !== void 0) return ref.item.values[mode];
+  if (ref.item.value !== void 0) return ref.item.value;
+  if (ref.item.values) {
+    const first = Object.values(ref.item.values)[0];
+    if (first !== void 0) return first;
+  }
+  return void 0;
+}
+function noteFonts(props, ctx) {
+  if (props.font?.family) ctx.fonts.add(props.font.family);
+  const textStyle = props.styleRefs?.text ? ctx.styles.get(props.styleRefs.text) : void 0;
+  if (textStyle?.font?.family) ctx.fonts.add(textStyle.font.family);
+  for (const run of props.runs || []) {
+    if (isRecord(run) && isRecord(run.font) && typeof run.font.family === "string") ctx.fonts.add(run.font.family);
+  }
+}
+function prototypeLink(value, ctx, sourceId) {
+  if (!Array.isArray(value) || !value.length) return {};
+  const reaction = isRecord(value[0]) ? value[0] : void 0;
+  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 } };
+    }
+    return { href: `#${htmlId(action.destination)}` };
+  }
+  return {};
+}
+function shapeMarkup(type, props) {
+  const fill = paintColor(props.styles.fills[0]) || "currentColor";
+  if (type === "ELLIPSE" || type === "ARC") {
+    return "";
+  }
+  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>`;
+  }
+  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("");
+    return `<svg class="cd-shape" viewBox="0 0 ${width} ${height}" aria-hidden="true">${paths}</svg>`;
+  }
+  return "";
+}
+function fontLinks(families) {
+  const custom = [...families].filter((family) => !isWebSafeFont(family));
+  if (!custom.length) return "";
+  const query = custom.map((family) => `family=${encodeURIComponent(family)}:wght@400;500;600;700`).join("&");
+  return `<link rel="preconnect" href="https://fonts.googleapis.com">
+<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>
+(() => {
+  const stack = [];
+  addEventListener("hashchange", () => stack.push(location.hash));
+  document.querySelectorAll("[data-cd-back]").forEach((node) => {
+    node.addEventListener("click", (event) => {
+      event.preventDefault();
+      history.back();
+    });
+  });
+})();
+</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");
+    if (!destination) return;
+    setTimeout(() => { location.hash = destination; }, Math.max(0, seconds) * 1000);
+  });
+  document.querySelectorAll("[data-cd-back]").forEach((node) => {
+    node.addEventListener("click", (event) => {
+      event.preventDefault();
+      history.back();
+    });
+  });
+})();
+</script>`;
+}
+export {
+  RenderError,
+  render,
+  renderDocument
+};