@bendyline/squisq-react 2.2.0 → 2.3.0

package/dist/chunk-XYS7HMP4.js

@@ -0,0 +1,1604 @@
+import {
+  MermaidDiagram
+} from "./chunk-WLUZTUNZ.js";
+import {
+  useMediaUrl,
+  useResourcePolicy
+} from "./chunk-LR3AIGDD.js";
+
+// src/utils/animationUtils.ts
+import {
+  getAnimationStyle,
+  getDefaultAnimationDuration,
+  getTransitionClass,
+  getAnimationProgress
+} from "@bendyline/squisq/doc";
+
+// src/layers/ImageLayer.tsx
+import { cssFilterForTreatment } from "@bendyline/squisq/doc";
+
+// src/utils/layerUtils.ts
+function resolveValue(value, dimension) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value.endsWith("%")) {
+    const percent = parseFloat(value);
+    return percent / 100 * dimension;
+  }
+  return parseFloat(value);
+}
+function getAnchorOffset(anchor, width, height) {
+  switch (anchor) {
+    case "center":
+      return { x: -width / 2, y: -height / 2 };
+    case "top-right":
+      return { x: -width, y: 0 };
+    case "bottom-left":
+      return { x: 0, y: -height };
+    case "bottom-right":
+      return { x: -width, y: -height };
+    case "top-left":
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+// src/layers/ImageLayer.tsx
+import { jsx } from "react/jsx-runtime";
+function ImageLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  animationsEnabled = true
+}) {
+  const { content, position, animation } = layer;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const src = useMediaUrl(content.src, basePath);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const filter = cssFilterForTreatment(content.treatment, content.blur);
+  const preserveAspectRatio = getPreserveAspectRatio(content.fit);
+  const isCover = content.fit === "cover";
+  const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
+  const usesPortraitPan = isCover && shouldUsePortraitPan(viewport, width, height, animationsEnabled, animation);
+  if (usesPortraitPan) {
+    const panClass = getPortraitPanClass(animation);
+    const panStyle = getPortraitPanStyle(isSpatialAnim ? animation : void 0);
+    const containerAnim = isSpatialAnim ? { className: "", style: {} } : animStyle;
+    return /* @__PURE__ */ jsx(
+      "g",
+      {
+        className: `block-layer block-layer--image ${containerAnim.className}`,
+        style: containerAnim.style,
+        "data-layer-id": layer.id,
+        "data-image-framing": "portrait-pan",
+        children: /* @__PURE__ */ jsx("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src,
+                alt: content.alt || "",
+                className: panClass,
+                style: {
+                  width: `${width}px`,
+                  height: `${height}px`,
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  display: "block",
+                  pointerEvents: "none",
+                  ...filter ? { filter } : {},
+                  ...content.blur && content.blur > 0 ? { transform: "scale(1.06)" } : {},
+                  ...panStyle
+                }
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
+  if (isCover && isSpatialAnim && animation) {
+    const kbAnim = remapToKenBurns(animation);
+    const kbStyle = getAnimationStyle(kbAnim, blockTime);
+    return /* @__PURE__ */ jsx("g", { className: "block-layer block-layer--image", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: `${width}px`,
+          height: `${height}px`,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: content.alt || "",
+            className: kbStyle.className,
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              pointerEvents: "none",
+              transformOrigin: "center center",
+              ...filter ? { filter } : {},
+              ...kbStyle.style
+            }
+          }
+        )
+      }
+    ) }) });
+  }
+  if (isCover) {
+    return /* @__PURE__ */ jsx(
+      "g",
+      {
+        className: `block-layer block-layer--image ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: /* @__PURE__ */ jsx("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: content.alt || "",
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              pointerEvents: "none",
+              ...filter ? { filter } : {},
+              // Over-scan blurred imagery so the soft edges never reveal
+              // the frame behind the layer.
+              ...content.blur && content.blur > 0 ? { transform: "scale(1.06)" } : {}
+            }
+          }
+        ) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      className: `block-layer block-layer--image ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx(
+        "image",
+        {
+          href: src,
+          x: finalX,
+          y: finalY,
+          width,
+          height,
+          preserveAspectRatio,
+          style: { pointerEvents: "none", ...filter ? { filter } : {} }
+        }
+      )
+    }
+  );
+}
+function getPreserveAspectRatio(fit) {
+  switch (fit) {
+    case "cover":
+      return "xMidYMid slice";
+    case "fill":
+      return "none";
+    case "contain":
+    default:
+      return "xMidYMid meet";
+  }
+}
+var SPATIAL_ANIMATION_TYPES = /* @__PURE__ */ new Set(["panLeft", "panRight", "slowZoom", "zoomIn", "zoomOut"]);
+var PORTRAIT_ASPECT_CUTOFF = 0.83;
+function shouldUsePortraitPan(viewport, layerWidth, layerHeight, animationsEnabled, animation) {
+  if (!animationsEnabled || animation?.type === "none") return false;
+  if (viewport.width / viewport.height >= PORTRAIT_ASPECT_CUTOFF) return false;
+  return layerWidth >= viewport.width * 0.7 && layerHeight >= viewport.height * 0.7;
+}
+function getPortraitPanClass(animation) {
+  const pansBack = animation?.type === "panRight" || animation?.type === "slowZoom" && animation.panDirection === "right";
+  return pansBack ? "squisq-image--portrait-pan-left" : "squisq-image--portrait-pan-right";
+}
+function getPortraitPanStyle(animation) {
+  return {
+    "--portrait-pan-duration": `${animation?.duration ?? 12}s`,
+    "--portrait-pan-delay": `${animation?.delay ?? 0}s`,
+    "--portrait-pan-easing": animation?.easing ?? "ease-in-out"
+  };
+}
+function remapToKenBurns(anim) {
+  switch (anim.type) {
+    case "panLeft":
+      return { ...anim, type: "slowZoom", panDirection: "left" };
+    case "panRight":
+      return { ...anim, type: "slowZoom", panDirection: "right" };
+    case "zoomIn":
+      return { ...anim, type: "slowZoom", direction: "in" };
+    case "zoomOut":
+      return { ...anim, type: "slowZoom", direction: "out" };
+    default:
+      return anim;
+  }
+}
+
+// src/layers/TextLayer.tsx
+import { useId, useMemo } from "react";
+import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
+import {
+  parseHtmlToNodes,
+  sanitizeHtmlNodes,
+  stringifyHtmlNodes
+} from "@bendyline/squisq/markdown";
+import {
+  hasIconMarker,
+  splitIconMarkers,
+  stripIconMarkers,
+  iconClass
+} from "@bendyline/squisq/icon-marker";
+
+// src/utils/fillStyle.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function borderDashArray(style, strokeWidth) {
+  if (!style || style === "solid") return void 0;
+  const w = Math.max(1, strokeWidth ?? 1);
+  if (style === "dotted") return `${w} ${w * 2}`;
+  return `${w * 3} ${w * 2}`;
+}
+function gradientVector(angle = 0) {
+  const a = angle * Math.PI / 180;
+  const dx = Math.sin(a);
+  const dy = Math.cos(a);
+  return { x1: 0.5 - dx / 2, y1: 0.5 - dy / 2, x2: 0.5 + dx / 2, y2: 0.5 + dy / 2 };
+}
+function gradientDefId(layerId) {
+  return `squisq-grad-${layerId}`;
+}
+function resolveFill(layerId, color, gradient, pattern) {
+  if (pattern) {
+    const id = `squisq-pattern-${layerId}`;
+    return { fill: `url(#${id})`, def: patternDef(id, pattern) };
+  }
+  if (gradient) {
+    const id = gradientDefId(layerId);
+    const v = gradientVector(gradient.angle);
+    return {
+      fill: `url(#${id})`,
+      def: /* @__PURE__ */ jsxs("linearGradient", { id, x1: v.x1, y1: v.y1, x2: v.x2, y2: v.y2, children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: gradient.from }),
+        /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: gradient.to })
+      ] })
+    };
+  }
+  return { fill: color, def: null };
+}
+function patternDef(id, pattern) {
+  const size = pattern.size ?? 24;
+  const opacity = pattern.opacity ?? 1;
+  const color = pattern.color;
+  return /* @__PURE__ */ jsxs(
+    "pattern",
+    {
+      id,
+      width: size,
+      height: size,
+      patternUnits: "userSpaceOnUse",
+      patternTransform: pattern.kind === "diagonal" ? "rotate(45)" : void 0,
+      children: [
+        pattern.kind === "dots" && /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: Math.max(1, size / 12),
+            fill: color,
+            opacity
+          }
+        ),
+        pattern.kind === "grid" && /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: `M ${size} 0 L 0 0 0 ${size}`,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1,
+            opacity
+          }
+        ),
+        pattern.kind === "diagonal" && /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: 0, y2: size, stroke: color, strokeWidth: 1, opacity })
+      ]
+    }
+  );
+}
+function resolveShapeFilter(layerId, filter) {
+  if (!filter || filter.type !== "noise") return { filterAttr: void 0, def: null };
+  const id = `squisq-noise-${layerId}`;
+  const opacity = filter.opacity ?? 0.05;
+  return {
+    filterAttr: `url(#${id})`,
+    def: /* @__PURE__ */ jsxs("filter", { id, x: "0%", y: "0%", width: "100%", height: "100%", children: [
+      /* @__PURE__ */ jsx2(
+        "feTurbulence",
+        {
+          type: "fractalNoise",
+          baseFrequency: filter.baseFrequency ?? 0.8,
+          numOctaves: 2,
+          stitchTiles: "stitch",
+          result: "noise"
+        }
+      ),
+      /* @__PURE__ */ jsx2("feColorMatrix", { in: "noise", type: "saturate", values: "0", result: "mono" }),
+      /* @__PURE__ */ jsx2("feComponentTransfer", { in: "mono", result: "faded", children: /* @__PURE__ */ jsx2("feFuncA", { type: "linear", slope: opacity, intercept: 0 }) }),
+      /* @__PURE__ */ jsx2("feComposite", { in: "faded", in2: "SourceGraphic", operator: "in" })
+    ] })
+  };
+}
+
+// src/layers/TextLayer.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function TextLayer(props) {
+  if (props.layer.content.html?.trim()) return /* @__PURE__ */ jsx3(RichTextLayer, { ...props });
+  if (hasIconMarker(props.layer.content.text ?? "")) return /* @__PURE__ */ jsx3(IconTextLayer, { ...props });
+  return /* @__PURE__ */ jsx3(PlainTextLayer, { ...props });
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function iconRunsToHtml(text) {
+  return splitIconMarkers(text).map(
+    (run) => run.type === "icon" ? `<i class="${iconClass(run.family, run.name)}" aria-hidden="true"></i>` : escapeHtml(run.text).replace(/\n/g, "<br>")
+  ).join("");
+}
+function IconTextLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { text, style } = content;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : viewport.width;
+  const anchor = position.anchor ?? "top-left";
+  const lineHeight = style.lineHeight || 1.4;
+  const lineHeightPx = style.fontSize * lineHeight;
+  const padding = style.padding ?? 0;
+  const plain = stripIconMarkers(text ?? "");
+  const lines = plain.split("\n").flatMap((line) => wrapText(line, style.fontSize, boxWidth));
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : Math.max(lineHeightPx, lines.length * lineHeightPx) + padding * 2;
+  const boxX = rawX - anchorAxis(anchor, boxWidth, "x");
+  const boxY = rawY - anchorAxis(anchor, boxHeight, "y");
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const html = useMemo(() => iconRunsToHtml(text ?? ""), [text]);
+  const verticalJustify = style.verticalAlign === "top" ? "flex-start" : style.verticalAlign === "bottom" ? "flex-end" : "center";
+  const boxStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: verticalJustify,
+    padding,
+    color: style.color,
+    fontSize: `${style.fontSize}px`,
+    fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+    fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
+    lineHeight,
+    textAlign: style.textAlign ?? "left",
+    ...style.shadow ? { textShadow: "0 2px 3px rgba(0,0,0,0.7)" } : {},
+    ...animStyle.style
+  };
+  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
+    "foreignObject",
+    {
+      x: boxX,
+      y: boxY,
+      width: boxWidth,
+      height: boxHeight,
+      style: { overflow: "visible" },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          style: boxStyle,
+          children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+              "aria-label": plain,
+              dangerouslySetInnerHTML: { __html: html }
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+function PlainTextLayer({ layer, viewport, blockTime }) {
+  const defsId = `${useId().replace(/:/g, "")}-${layer.id}`;
+  const { content, position, animation } = layer;
+  const { text, style } = content;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : void 0;
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : void 0;
+  const maxWidth = boxWidth;
+  const textAnchor = getTextAnchor(style.textAlign, position.anchor);
+  const dominantBaseline = getDominantBaseline(style.verticalAlign, position.anchor);
+  const anchor = position.anchor ?? "top-left";
+  const x = pivotX(rawX, boxWidth, anchor, textAnchor);
+  const y = pivotY(rawY, boxHeight, anchor, dominantBaseline);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const rawLines = (text ?? "").split("\n");
+  let lines = maxWidth ? rawLines.reduce(
+    (acc, line) => acc.concat(wrapText(line, style.fontSize, maxWidth)),
+    []
+  ) : rawLines;
+  if (style.maxLines && lines.length > style.maxLines) {
+    lines = lines.slice(0, style.maxLines);
+    const last = lines[lines.length - 1];
+    lines[lines.length - 1] = last.replace(/\s*$/, "") + "...";
+  }
+  const lineHeight = style.lineHeight || 1.4;
+  const lineHeightPx = style.fontSize * lineHeight;
+  const textStyles = {
+    fontSize: `${style.fontSize}px`,
+    fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+    fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
+    fill: style.color,
+    ...animStyle.style
+  };
+  const filterId = style.shadow ? `shadow-${defsId}` : void 0;
+  return /* @__PURE__ */ jsxs2("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
+    style.shadow && /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx3("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
+    /* @__PURE__ */ jsx3(
+      TextBox,
+      {
+        layerId: defsId,
+        style,
+        box: boxWidth != null && boxHeight != null ? {
+          x: rawX - anchorAxis(anchor, boxWidth, "x"),
+          y: rawY - anchorAxis(anchor, boxHeight, "y"),
+          width: boxWidth,
+          height: boxHeight
+        } : {
+          x: x - (style.padding || 16),
+          y: y - style.fontSize - (style.padding || 16),
+          width: getTextBoxWidth(lines, style) + (style.padding || 16) * 2,
+          height: lines.length * lineHeightPx + (style.padding || 16) * 2
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "text",
+      {
+        x,
+        y,
+        textAnchor,
+        dominantBaseline,
+        style: textStyles,
+        filter: filterId ? `url(#${filterId})` : void 0,
+        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
+          line || "\xA0",
+          " "
+        ] }, i))
+      }
+    )
+  ] });
+}
+function RichTextLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { html, style } = content;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const boxWidth = position.width != null ? resolveValue(position.width, viewport.width) : viewport.width;
+  const boxHeight = position.height != null ? resolveValue(position.height, viewport.height) : style.fontSize * (style.lineHeight || 1.4) * 2;
+  const anchor = position.anchor ?? "top-left";
+  const boxX = rawX - anchorAxis(anchor, boxWidth, "x");
+  const boxY = rawY - anchorAxis(anchor, boxHeight, "y");
+  const safeHtml = useMemo(
+    () => stringifyHtmlNodes(sanitizeHtmlNodes(parseHtmlToNodes(html ?? ""))),
+    [html]
+  );
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const verticalJustify = style.verticalAlign === "middle" ? "center" : style.verticalAlign === "bottom" ? "flex-end" : "flex-start";
+  const hasBorder = !!(style.borderColor && (style.borderWidth ?? 0) > 0);
+  const boxStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: verticalJustify,
+    padding: style.padding ?? 0,
+    color: style.color,
+    fontSize: `${style.fontSize}px`,
+    fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
+    fontWeight: style.fontWeight || "normal",
+    fontStyle: style.fontStyle || "normal",
+    lineHeight: style.lineHeight || 1.4,
+    textAlign: style.textAlign ?? "left",
+    overflow: "hidden",
+    ...style.background ? { background: style.background } : {},
+    ...hasBorder ? {
+      border: `${style.borderWidth}px ${style.borderStyle ?? "solid"} ${style.borderColor}`,
+      borderRadius: 4
+    } : {},
+    ...style.shadow ? { textShadow: "0 2px 3px rgba(0,0,0,0.7)" } : {},
+    ...animStyle.style
+  };
+  const cls = `squisq-rich-text-${cssId(layer.id)}`;
+  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .4em;padding-left:1.2em;list-style-position:inside}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
+  return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3("foreignObject", { x: boxX, y: boxY, width: boxWidth, height: boxHeight, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+      style: boxStyle,
+      children: [
+        /* @__PURE__ */ jsx3("style", { children: scopedCss }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cls,
+            "aria-label": content.text,
+            style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+            dangerouslySetInnerHTML: { __html: safeHtml }
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+function cssId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function TextBox({
+  layerId,
+  style,
+  box
+}) {
+  const hasFill = !!(style.background || style.backgroundGradient);
+  const hasBorder = !!(style.borderColor && (style.borderWidth ?? 0) > 0);
+  if (!hasFill && !hasBorder) return null;
+  const { fill, def } = resolveFill(layerId, style.background, style.backgroundGradient);
+  const dash = borderDashArray(style.borderStyle, style.borderWidth);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    def && /* @__PURE__ */ jsx3("defs", { children: def }),
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        fill: hasFill ? fill : "none",
+        fillOpacity: hasFill ? style.backgroundOpacity : void 0,
+        stroke: hasBorder ? style.borderColor : void 0,
+        strokeWidth: hasBorder ? style.borderWidth : void 0,
+        strokeDasharray: hasBorder ? dash : void 0,
+        rx: 4,
+        ry: 4
+      }
+    )
+  ] });
+}
+function getTextAnchor(align, anchor) {
+  if (align === "center") return "middle";
+  if (align === "right") return "end";
+  if (align === "left") return "start";
+  if (anchor?.includes("right")) return "end";
+  if (anchor === "center") return "middle";
+  return "start";
+}
+function getDominantBaseline(verticalAlign, anchor) {
+  if (verticalAlign === "top") return "text-before-edge";
+  if (verticalAlign === "middle") return "middle";
+  if (verticalAlign === "bottom") return "text-after-edge";
+  if (anchor?.includes("bottom")) return "text-after-edge";
+  if (anchor === "center") return "middle";
+  return "text-before-edge";
+}
+function pivotX(rawX, width, anchor, textAnchor) {
+  if (width == null) return rawX;
+  const boxLeft = rawX - anchorAxis(anchor, width, "x");
+  if (textAnchor === "middle") return boxLeft + width / 2;
+  if (textAnchor === "end") return boxLeft + width;
+  return boxLeft;
+}
+function pivotY(rawY, height, anchor, dominantBaseline) {
+  if (height == null) return rawY;
+  const boxTop = rawY - anchorAxis(anchor, height, "y");
+  if (dominantBaseline === "middle") return boxTop + height / 2;
+  if (dominantBaseline === "text-after-edge") return boxTop + height;
+  return boxTop;
+}
+function anchorAxis(anchor, size, axis) {
+  if (anchor === "center") return size / 2;
+  if (axis === "x") return anchor.includes("right") ? size : 0;
+  return anchor.includes("bottom") ? size : 0;
+}
+function getTextBoxWidth(lines, style) {
+  const maxLineLength = Math.max(...lines.map((l) => l.length));
+  return maxLineLength * style.fontSize * 0.55;
+}
+function wrapText(text, fontSize, maxWidth) {
+  if (!text.trim()) return [""];
+  const avgCharWidth = fontSize * 0.5;
+  const charsPerLine = Math.floor(maxWidth / avgCharWidth);
+  if (charsPerLine <= 0) return [text];
+  const words = text.split(/\s+/);
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    if (testLine.length <= charsPerLine) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      if (word.length > charsPerLine) {
+        let remaining = word;
+        while (remaining.length > charsPerLine) {
+          lines.push(remaining.slice(0, charsPerLine));
+          remaining = remaining.slice(charsPerLine);
+        }
+        currentLine = remaining;
+      } else {
+        currentLine = word;
+      }
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines.length > 0 ? lines : [""];
+}
+
+// src/layers/ShapeLayer.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FULL_BLEED_OVERSCAN = 1;
+function ShapeLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const defsId = `${useId2().replace(/:/g, "")}-${layer.id}`;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : 100;
+  const height = position.height ? resolveValue(position.height, viewport.height) : 100;
+  const anchorOffset = getAnchorOffset(position.anchor, width, height);
+  const x = rawX + anchorOffset.x;
+  const y = rawY + anchorOffset.y;
+  const isUnborderedFullBleedRect = content.shape === "rect" && x === 0 && y === 0 && width === viewport.width && height === viewport.height && !content.stroke && !content.borderRadius;
+  const overscan = isUnborderedFullBleedRect ? FULL_BLEED_OVERSCAN : 0;
+  const paintX = x - overscan;
+  const paintY = y - overscan;
+  const paintWidth = width + overscan * 2;
+  const paintHeight = height + overscan * 2;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const fill = content.fill || "none";
+  const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
+  if (content.shape === "rect" && isCSSGradient && !content.gradient) {
+    return /* @__PURE__ */ jsx4(
+      "g",
+      {
+        className: `block-layer block-layer--shape ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: /* @__PURE__ */ jsx4("foreignObject", { x: paintX, y: paintY, width: paintWidth, height: paintHeight, children: /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              width: `${paintWidth}px`,
+              height: `${paintHeight}px`,
+              background: fill,
+              borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
+              pointerEvents: "none"
+            }
+          }
+        ) })
+      }
+    );
+  }
+  const { fill: fillValue, def: fillDef } = resolveFill(
+    defsId,
+    fill,
+    content.gradient,
+    content.pattern
+  );
+  const { filterAttr, def: filterDef } = resolveShapeFilter(defsId, content.filter);
+  const dash = borderDashArray(content.borderStyle, content.strokeWidth);
+  const shapeProps = {
+    fill: fillValue,
+    fillOpacity: content.fillOpacity,
+    stroke: content.stroke,
+    strokeWidth: content.strokeWidth,
+    strokeDasharray: dash,
+    ...filterAttr ? { filter: filterAttr } : {}
+  };
+  return /* @__PURE__ */ jsxs3(
+    "g",
+    {
+      className: `block-layer block-layer--shape ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        (fillDef || filterDef) && /* @__PURE__ */ jsxs3("defs", { children: [
+          fillDef,
+          filterDef
+        ] }),
+        content.shape === "rect" && /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: paintX,
+            y: paintY,
+            width: paintWidth,
+            height: paintHeight,
+            rx: content.borderRadius,
+            ry: content.borderRadius,
+            ...shapeProps
+          }
+        ),
+        content.shape === "circle" && /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            cx: x + width / 2,
+            cy: y + height / 2,
+            r: Math.min(width, height) / 2,
+            ...shapeProps
+          }
+        ),
+        content.shape === "line" && /* @__PURE__ */ jsx4(
+          "line",
+          {
+            x1: x,
+            y1: y,
+            x2: x + width,
+            y2: y + height,
+            stroke: content.stroke || "#ffffff",
+            strokeWidth: content.strokeWidth || 2,
+            strokeDasharray: dash
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layers/PathLayer.tsx
+import { useId as useId3 } from "react";
+import { markerPath, shapePath } from "@bendyline/squisq/doc";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function effectivePath(layer, viewport) {
+  const { content, position } = layer;
+  if (!content.shapeKind) return content.d;
+  const w = position.width ? resolveValue(position.width, viewport.width) : 0;
+  const h = position.height ? resolveValue(position.height, viewport.height) : 0;
+  const rawX = resolveValue(position.x, viewport.width);
+  const rawY = resolveValue(position.y, viewport.height);
+  const anchor = getAnchorOffset(position.anchor, w, h);
+  const derived = shapePath(content.shapeKind, rawX + anchor.x, rawY + anchor.y, w, h);
+  return derived ?? content.d;
+}
+function readLegacyArrow(content) {
+  return content.arrow;
+}
+function effectiveMarker(explicit, legacyArrow, end) {
+  if (explicit) return explicit;
+  const wants = legacyArrow === "both" || legacyArrow === end;
+  return wants ? "arrow" : "none";
+}
+function PathLayer({ layer, viewport, blockTime }) {
+  const { content, animation, id } = layer;
+  const defsId = `${useId3().replace(/:/g, "")}-${id}`;
+  const d = effectivePath(layer, viewport);
+  const stroke = content.stroke ?? "#1e293b";
+  const strokeWidth = content.strokeWidth ?? 2;
+  const { fill, def: fillDef } = resolveFill(defsId, content.fill ?? "none", content.gradient);
+  const dash = content.borderStyle ? borderDashArray(content.borderStyle, strokeWidth) : content.dasharray;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const startId = `marker-start-${defsId}`;
+  const endId = `marker-end-${defsId}`;
+  const legacyArrow = readLegacyArrow(content);
+  const start = markerPath(effectiveMarker(content.startMarker, legacyArrow, "start"), "start");
+  const end = markerPath(effectiveMarker(content.endMarker, legacyArrow, "end"), "end");
+  return /* @__PURE__ */ jsxs4(
+    "g",
+    {
+      className: `block-layer block-layer--path ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": id,
+      children: [
+        /* @__PURE__ */ jsxs4("defs", { children: [
+          fillDef,
+          end && /* @__PURE__ */ jsx5(MarkerDef, { id: endId, dir: "end", d: end.d, filled: end.filled, stroke }),
+          start && /* @__PURE__ */ jsx5(MarkerDef, { id: startId, dir: "start", d: start.d, filled: start.filled, stroke })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d,
+            stroke,
+            strokeWidth,
+            fill,
+            fillOpacity: content.fillOpacity,
+            strokeDasharray: dash,
+            markerStart: start ? `url(#${startId})` : void 0,
+            markerEnd: end ? `url(#${endId})` : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+function MarkerDef({
+  id,
+  dir,
+  d,
+  filled,
+  stroke
+}) {
+  return /* @__PURE__ */ jsx5(
+    "marker",
+    {
+      id,
+      viewBox: "0 0 10 10",
+      refX: dir === "end" ? 9 : 1,
+      refY: 5,
+      markerWidth: 4,
+      markerHeight: 4,
+      orient: "auto-start-reverse",
+      markerUnits: "strokeWidth",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d,
+          fill: filled ? stroke : "none",
+          stroke: filled ? "none" : stroke,
+          strokeWidth: filled ? void 0 : 1.5
+        }
+      )
+    }
+  );
+}
+
+// src/layers/MapLayer.tsx
+import { useId as useId4, useState, useEffect } from "react";
+import { ResourcePolicyError as ResourcePolicyError2 } from "@bendyline/squisq/markdown";
+
+// src/utils/mapTileUtils.ts
+import {
+  isResourceUrlAllowed,
+  ResourcePolicyError
+} from "@bendyline/squisq/markdown";
+var TILE_PROVIDERS = {
+  terrain: {
+    url: "https://tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution: "Map: OpenTopoMap (CC-BY-SA)",
+    maxZoom: 17
+  },
+  road: {
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: "\xA9 OpenStreetMap contributors",
+    maxZoom: 19
+  },
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "Imagery: Esri, Maxar, Earthstar",
+    maxZoom: 18
+  },
+  toner: {
+    url: "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png",
+    attribution: "Map: Stadia Maps, Stamen Design",
+    maxZoom: 20
+  },
+  watercolor: {
+    url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg",
+    attribution: "Map: Stadia Maps, Stamen Design",
+    maxZoom: 16
+  }
+};
+function latLngToTile(lat, lng, zoom) {
+  const n = Math.pow(2, zoom);
+  const x = Math.floor((lng + 180) / 360 * n);
+  const latRad = lat * Math.PI / 180;
+  const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n);
+  return { x, y };
+}
+function getPixelOffset(lat, lng, zoom, tileSize = 256) {
+  const n = Math.pow(2, zoom);
+  const xTile = (lng + 180) / 360 * n;
+  const latRad = lat * Math.PI / 180;
+  const yTile = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n;
+  return {
+    x: (xTile - Math.floor(xTile)) * tileSize,
+    y: (yTile - Math.floor(yTile)) * tileSize
+  };
+}
+function getTilesForViewport(centerLat, centerLng, zoom, viewportWidth, viewportHeight, tileSize = 256) {
+  const centerTile = latLngToTile(centerLat, centerLng, zoom);
+  const pixelOffset = getPixelOffset(centerLat, centerLng, zoom, tileSize);
+  const tilesX = Math.ceil(viewportWidth / tileSize) + 1;
+  const tilesY = Math.ceil(viewportHeight / tileSize) + 1;
+  const startX = centerTile.x - Math.floor(tilesX / 2);
+  const startY = centerTile.y - Math.floor(tilesY / 2);
+  const centerScreenX = viewportWidth / 2 - pixelOffset.x;
+  const centerScreenY = viewportHeight / 2 - pixelOffset.y;
+  const tiles = [];
+  for (let dy = 0; dy < tilesY; dy++) {
+    for (let dx = 0; dx < tilesX; dx++) {
+      const tileX = startX + dx;
+      const tileY = startY + dy;
+      const screenX = centerScreenX + (tileX - centerTile.x) * tileSize;
+      const screenY = centerScreenY + (tileY - centerTile.y) * tileSize;
+      tiles.push({ x: tileX, y: tileY, screenX, screenY });
+    }
+  }
+  return tiles;
+}
+function buildTileUrl(provider, x, y, z) {
+  return provider.url.replace("{z}", String(z)).replace("{x}", String(x)).replace("{y}", String(y));
+}
+async function fetchTileImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load tile: ${url}`));
+    img.src = url;
+  });
+}
+async function composeMapImage(options) {
+  const { center, zoom, style, width, height, markers = [], showAttribution = true } = options;
+  const provider = TILE_PROVIDERS[style];
+  const tileSize = provider.tileSize || 256;
+  const clampedZoom = Math.min(zoom, provider.maxZoom);
+  const probeUrl = buildTileUrl(provider, 0, 0, clampedZoom);
+  if (!isResourceUrlAllowed(probeUrl, options.policy)) {
+    throw new ResourcePolicyError(
+      "RESOURCE_BLOCKED",
+      `Map tiles for style "${style}" are blocked by the resource policy (${provider.url}). Composing a map contacts the tile host; supply the map as \`staticSrc\` to render it without any remote request.`
+    );
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+  ctx.fillStyle = style === "toner" ? "#ffffff" : "#e5e7eb";
+  ctx.fillRect(0, 0, width, height);
+  const tiles = getTilesForViewport(center.lat, center.lng, clampedZoom, width, height, tileSize);
+  const tilePromises = tiles.map(async (tile) => {
+    const url = buildTileUrl(provider, tile.x, tile.y, clampedZoom);
+    try {
+      const img = await fetchTileImage(url);
+      ctx.drawImage(img, tile.screenX, tile.screenY, tileSize, tileSize);
+    } catch (err) {
+      console.warn(`Tile load failed: ${url}`, err);
+    }
+  });
+  await Promise.all(tilePromises);
+  for (const marker of markers) {
+    drawMarker(ctx, marker, center, clampedZoom, width, height, tileSize);
+  }
+  if (showAttribution) {
+    drawAttribution(ctx, provider.attribution, width, height);
+  }
+  return canvas.toDataURL("image/png");
+}
+function drawMarker(ctx, marker, center, zoom, width, height, tileSize) {
+  const centerTile = latLngToTile(center.lat, center.lng, zoom);
+  const markerTile = latLngToTile(marker.lat, marker.lng, zoom);
+  const centerOffset = getPixelOffset(center.lat, center.lng, zoom, tileSize);
+  const markerOffset = getPixelOffset(marker.lat, marker.lng, zoom, tileSize);
+  const dx = (markerTile.x - centerTile.x) * tileSize + (markerOffset.x - centerOffset.x);
+  const dy = (markerTile.y - centerTile.y) * tileSize + (markerOffset.y - centerOffset.y);
+  const screenX = width / 2 + dx;
+  const screenY = height / 2 + dy;
+  const color = marker.color || "#ef4444";
+  const icon = marker.icon || "pin";
+  ctx.save();
+  if (icon === "pin") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(screenX, screenY - 12, 8, Math.PI, 0, false);
+    ctx.lineTo(screenX, screenY);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = "#ffffff";
+    ctx.beginPath();
+    ctx.arc(screenX, screenY - 12, 3, 0, Math.PI * 2);
+    ctx.fill();
+  } else if (icon === "circle") {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(screenX, screenY, 8, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  } else if (icon === "star") {
+    ctx.fillStyle = color;
+    drawStar(ctx, screenX, screenY, 5, 10, 5);
+    ctx.fill();
+  }
+  if (marker.label) {
+    ctx.fillStyle = "#1f2937";
+    ctx.font = "bold 12px system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.fillText(marker.label, screenX, screenY + 20);
+  }
+  ctx.restore();
+}
+function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
+  let rot = Math.PI / 2 * 3;
+  const step = Math.PI / spikes;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - outerRadius);
+  for (let i = 0; i < spikes; i++) {
+    ctx.lineTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius);
+    rot += step;
+    ctx.lineTo(cx + Math.cos(rot) * innerRadius, cy + Math.sin(rot) * innerRadius);
+    rot += step;
+  }
+  ctx.lineTo(cx, cy - outerRadius);
+  ctx.closePath();
+}
+function drawAttribution(ctx, text, width, height) {
+  ctx.save();
+  ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+  const padding = 4;
+  ctx.font = "10px system-ui, sans-serif";
+  const textWidth = ctx.measureText(text).width;
+  ctx.fillRect(width - textWidth - padding * 2 - 4, height - 16, textWidth + padding * 2, 14);
+  ctx.fillStyle = "#374151";
+  ctx.textAlign = "right";
+  ctx.fillText(text, width - padding - 4, height - 5);
+  ctx.restore();
+}
+
+// src/layers/MapLayer.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function MapLayer({ layer, basePath, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const clipId = `map-clip-${useId4().replace(/:/g, "")}-${layer.id}`;
+  const [mapImageUrl, setMapImageUrl] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [blockedByPolicy, setBlockedByPolicy] = useState(false);
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const staticSrc = useMediaUrl(content.staticSrc ?? "", basePath);
+  const resourcePolicy = useResourcePolicy();
+  useEffect(() => {
+    let cancelled = false;
+    if (content.staticSrc) {
+      setMapImageUrl(staticSrc || null);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    setBlockedByPolicy(false);
+    composeMapImage({
+      center: content.center,
+      zoom: content.zoom,
+      style: content.style,
+      width,
+      height,
+      markers: content.markers,
+      showAttribution: content.showAttribution !== false,
+      policy: resourcePolicy
+    }).then((dataUrl) => {
+      if (!cancelled) {
+        setMapImageUrl(dataUrl);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        const blocked = err instanceof ResourcePolicyError2;
+        if (!blocked) console.error("Failed to compose map:", err);
+        setError(err instanceof Error ? err.message : String(err));
+        setBlockedByPolicy(blocked);
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    content.center,
+    content.zoom,
+    content.style,
+    content.staticSrc,
+    staticSrc,
+    content.markers,
+    content.showAttribution,
+    width,
+    height,
+    basePath,
+    resourcePolicy
+  ]);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx6("rect", { x: finalX, y: finalY, width, height, fill: "#e5e7eb" }),
+          /* @__PURE__ */ jsx6(
+            "text",
+            {
+              x: finalX + width / 2,
+              y: finalY + height / 2,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: "#9ca3af",
+              fontSize: "24",
+              fontFamily: "system-ui, sans-serif",
+              children: "Loading map..."
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (error || !mapImageUrl) {
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx6(
+            "rect",
+            {
+              x: finalX,
+              y: finalY,
+              width,
+              height,
+              fill: blockedByPolicy ? "#f3f4f6" : "#fef2f2"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "text",
+            {
+              x: finalX + width / 2,
+              y: finalY + height / 2,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: blockedByPolicy ? "#6b7280" : "#dc2626",
+              fontSize: "18",
+              fontFamily: "system-ui, sans-serif",
+              children: blockedByPolicy ? "Map unavailable offline" : "Map failed to load"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "g",
+    {
+      className: `block-layer block-layer--map ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6("clipPath", { id: clipId, children: /* @__PURE__ */ jsx6("rect", { x: finalX, y: finalY, width, height }) }) }),
+        /* @__PURE__ */ jsx6("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx6(
+          "image",
+          {
+            href: mapImageUrl,
+            x: finalX,
+            y: finalY,
+            width,
+            height,
+            preserveAspectRatio: "xMidYMid slice",
+            style: { pointerEvents: "none" }
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/layers/VideoLayer.tsx
+import { useRef, useEffect as useEffect2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var VIDEO_SYNC_DRIFT_SECONDS = 0.2;
+function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }) {
+  const { content, position } = layer;
+  const videoRef = useRef(null);
+  const hasStartedRef = useRef(false);
+  const startAt = content.startAt ?? 0;
+  const gated = blockTime < startAt;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const src = useMediaUrl(content.src, basePath);
+  const resolvedPoster = useMediaUrl(content.posterSrc || "", basePath);
+  const posterSrc = content.posterSrc ? resolvedPoster : void 0;
+  useEffect2(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = content.clipStart;
+    hasStartedRef.current = true;
+    if (isPlaying) {
+      const playPromise = video.play();
+      if (playPromise) {
+        playPromise.catch(() => {
+        });
+      }
+    }
+    const handleTimeUpdate = () => {
+      if (video.currentTime >= content.clipEnd) {
+        video.pause();
+        video.currentTime = content.clipEnd;
+      }
+    };
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    return () => {
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.pause();
+    };
+  }, [src, content.clipStart, content.clipEnd]);
+  useEffect2(() => {
+    const video = videoRef.current;
+    if (!video || !hasStartedRef.current) return;
+    const targetTime = gated ? content.clipStart : Math.min(content.clipEnd, content.clipStart + Math.max(0, blockTime - startAt));
+    if (Math.abs(video.currentTime - targetTime) > VIDEO_SYNC_DRIFT_SECONDS) {
+      video.currentTime = targetTime;
+    }
+    if (gated) {
+      video.pause();
+      return;
+    }
+    if (targetTime >= content.clipEnd) {
+      video.pause();
+      return;
+    }
+    if (isPlaying) {
+      const playPromise = video.play();
+      if (playPromise) {
+        playPromise.catch(() => {
+        });
+      }
+    } else {
+      video.pause();
+    }
+  }, [isPlaying, gated, blockTime, startAt, src, content.clipStart, content.clipEnd]);
+  return /* @__PURE__ */ jsx7("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx7("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx7(
+    "video",
+    {
+      ref: videoRef,
+      src,
+      poster: posterSrc,
+      muted: true,
+      playsInline: true,
+      preload: "auto",
+      "data-clip-start": content.clipStart,
+      "data-clip-end": content.clipEnd,
+      "data-start-at": startAt,
+      style: {
+        width: `${width}px`,
+        height: `${height}px`,
+        objectFit: content.fit || "cover",
+        objectPosition: "center",
+        display: "block",
+        pointerEvents: "none"
+      }
+    }
+  ) }) });
+}
+
+// src/layers/TableLayer.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function TableLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { headers, rows, align, style } = content;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const finalX = x + offset.x;
+  const finalY = y + offset.y;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const cellAlign = (ci) => {
+    const a = align?.[ci];
+    return a ? { textAlign: a } : void 0;
+  };
+  const borderRadius = style.borderRadius ?? 8;
+  return /* @__PURE__ */ jsx8(
+    "g",
+    {
+      className: `block-layer block-layer--table ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx8("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "16px",
+            boxSizing: "border-box"
+          },
+          children: /* @__PURE__ */ jsxs6(
+            "table",
+            {
+              style: {
+                width: "100%",
+                borderCollapse: "separate",
+                borderSpacing: 0,
+                fontSize: `${style.fontSize}px`,
+                fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+                overflow: "hidden",
+                borderRadius: `${borderRadius}px`,
+                border: `1px solid ${style.borderColor}`
+              },
+              children: [
+                headers.length > 0 && /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx8(
+                  "th",
+                  {
+                    style: {
+                      background: style.headerBackground,
+                      color: style.headerColor,
+                      fontFamily: style.headerFontFamily ?? style.fontFamily ?? "system-ui, sans-serif",
+                      fontWeight: 600,
+                      padding: "12px 16px",
+                      borderBottom: `2px solid ${style.borderColor}`,
+                      borderRight: ci < headers.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                      ...cellAlign(ci)
+                    },
+                    children: header
+                  },
+                  ci
+                )) }) }),
+                rows.length > 0 && /* @__PURE__ */ jsx8("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx8("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx8(
+                  "td",
+                  {
+                    style: {
+                      background: style.cellBackground,
+                      color: style.cellColor,
+                      padding: "10px 16px",
+                      borderBottom: ri < rows.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                      borderRight: ci < row.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+                      ...cellAlign(ci)
+                    },
+                    children: cell
+                  },
+                  ci
+                )) }, ri)) })
+              ]
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+// src/layers/TreeLayer.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function faClass(token, fallback) {
+  const name = token && token.trim() ? token.trim() : fallback;
+  const colon = name.indexOf(":");
+  if (colon > 0) {
+    const family = name.slice(0, colon).replace(/^fa-/, "");
+    return `fa-${family} fa-${name.slice(colon + 1)}`;
+  }
+  return `fa-solid fa-${name}`;
+}
+function TreeLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { items, style } = content;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
+  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
+  const offset = getAnchorOffset(position.anchor, width, height);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  return /* @__PURE__ */ jsx9(
+    "g",
+    {
+      className: `block-layer block-layer--tree ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: /* @__PURE__ */ jsx9("foreignObject", { x: x + offset.x, y: y + offset.y, width, height, children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          className: "squisq-treelayer",
+          style: {
+            width: `${width}px`,
+            height: `${height}px`,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            padding: "24px 32px",
+            boxSizing: "border-box",
+            fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+            fontSize: `${style.fontSize}px`,
+            lineHeight: 1.7,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx9(TreeList, { items, depth: 0, style })
+        }
+      ) })
+    }
+  );
+}
+function TreeList({
+  items,
+  depth,
+  style
+}) {
+  return /* @__PURE__ */ jsx9(
+    "ul",
+    {
+      style: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        paddingLeft: depth === 0 ? 0 : `${style.indentPx}px`,
+        borderLeft: depth === 0 ? "none" : `1px solid ${style.connectorColor}`
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx9(TreeRow, { item, style }, item.id))
+    }
+  );
+}
+function TreeRow({
+  item,
+  style
+}) {
+  const hasChildren = item.children.length > 0;
+  const [collapsed, setCollapsed] = useState2(false);
+  const isDir = item.isDir || hasChildren;
+  const iconCls = isDir ? faClass(style.folderIcon, collapsed ? "folder" : "folder-open") : faClass(style.fileIcon, "file");
+  return /* @__PURE__ */ jsxs7("li", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "baseline", gap: "8px", padding: "1px 0" }, children: [
+      hasChildren ? /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          "aria-label": collapsed ? "Expand" : "Collapse",
+          onClick: () => setCollapsed((c) => !c),
+          style: {
+            flex: "0 0 auto",
+            width: "1em",
+            border: "none",
+            background: "transparent",
+            cursor: "pointer",
+            color: style.connectorColor,
+            padding: 0,
+            fontSize: "0.8em"
+          },
+          children: /* @__PURE__ */ jsx9(
+            "i",
+            {
+              className: `fa-solid ${collapsed ? "fa-chevron-right" : "fa-chevron-down"}`,
+              "aria-hidden": "true"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx9("span", { style: { flex: "0 0 auto", width: "1em" } }),
+      /* @__PURE__ */ jsx9(
+        "i",
+        {
+          className: iconCls,
+          "aria-hidden": "true",
+          style: { flex: "0 0 auto", color: style.iconColor, width: "1.2em", textAlign: "center" }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "span",
+        {
+          style: { color: isDir ? style.dirColor : style.rowColor, fontWeight: isDir ? 600 : 400 },
+          children: item.label
+        }
+      ),
+      item.comment ? /* @__PURE__ */ jsx9("span", { style: { color: style.commentColor, fontSize: "0.85em", fontStyle: "italic" }, children: item.comment }) : null
+    ] }),
+    hasChildren && !collapsed ? /* @__PURE__ */ jsx9(TreeList, { items: item.children, depth: 1, style }) : null
+  ] });
+}
+
+// src/layers/MermaidLayer.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function MermaidLayer({ layer, viewport, blockTime, theme }) {
+  const { position, content, animation } = layer;
+  const width = resolveValue(position.width ?? viewport.width, viewport.width);
+  const height = resolveValue(position.height ?? viewport.height, viewport.height);
+  let x = resolveValue(position.x, viewport.width);
+  let y = resolveValue(position.y, viewport.height);
+  const anchor = position.anchor ?? "top-left";
+  if (anchor === "center") {
+    x -= width / 2;
+    y -= height / 2;
+  } else {
+    if (anchor.endsWith("right")) x -= width;
+    if (anchor.startsWith("bottom")) y -= height;
+  }
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const panelStyle = {
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    padding: content.padding ?? 16,
+    borderRadius: 16,
+    background: content.background,
+    color: content.foreground,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsx10(
+    "g",
+    {
+      className: `block-layer block-layer--mermaid ${animStyle.className}`,
+      "data-layer-id": layer.id,
+      style: animStyle.style,
+      children: /* @__PURE__ */ jsx10("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx10(
+        "div",
+        {
+          ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          className: "squisq-mermaid-layer-frame",
+          style: panelStyle,
+          children: /* @__PURE__ */ jsx10(
+            MermaidDiagram,
+            {
+              source: content.source,
+              ariaLabel: "Mermaid diagram on slide",
+              theme
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  getAnimationStyle,
+  getTransitionClass,
+  ImageLayer,
+  TextLayer,
+  ShapeLayer,
+  PathLayer,
+  MapLayer,
+  VideoLayer,
+  TableLayer,
+  TreeLayer,
+  MermaidLayer
+};