@bendyline/squisq-react 0.1.2

package/dist/index.js

@@ -0,0 +1,3180 @@
+// src/DocPlayer.tsx
+import { Fragment as Fragment2, useRef as useRef5, useState as useState7, useEffect as useEffect7, useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { isTemplateBlock as isTemplateBlock2, getCaptionAtTime as getCaptionAtTime2 } from "@bendyline/squisq/schemas";
+
+// src/utils/animationUtils.ts
+import {
+  getAnimationStyle,
+  getDefaultAnimationDuration,
+  getTransitionClass,
+  getAnimationProgress
+} 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/hooks/MediaContext.tsx
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
+var MediaContext = createContext(null);
+function useMediaProvider() {
+  return useContext(MediaContext);
+}
+function useMediaUrl(relativePath, basePath) {
+  const provider = useMediaProvider();
+  const isAbsolute = relativePath.startsWith("http") || relativePath.startsWith("/") || relativePath.startsWith("data:") || relativePath.startsWith("blob:");
+  const fallback = useMemo(
+    () => isAbsolute ? relativePath : `${basePath}/${relativePath}`,
+    [isAbsolute, relativePath, basePath]
+  );
+  const needsProvider = !isAbsolute && !!provider;
+  const [url, setUrl] = useState(fallback);
+  useEffect(() => {
+    if (!needsProvider) {
+      setUrl(fallback);
+      return;
+    }
+    let cancelled = false;
+    provider.resolveUrl(relativePath).then((resolved) => {
+      if (!cancelled) setUrl(resolved);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [needsProvider, provider, relativePath, fallback]);
+  return needsProvider ? url : fallback;
+}
+
+// src/layers/ImageLayer.tsx
+import { jsx } from "react/jsx-runtime";
+function ImageLayer({ layer, basePath, viewport, blockTime }) {
+  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 preserveAspectRatio = getPreserveAspectRatio(content.fit);
+  const isCover = content.fit === "cover";
+  const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
+  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: "100%",
+          height: "100%",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: content.alt || "",
+            className: kbStyle.className,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              pointerEvents: "none",
+              transformOrigin: "center center",
+              ...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: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "center",
+              display: "block",
+              pointerEvents: "none"
+            }
+          }
+        ) })
+      }
+    );
+  }
+  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" }
+        }
+      )
+    }
+  );
+}
+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"]);
+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 { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TextLayer({ layer, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const { text, style } = content;
+  const x = resolveValue(position.x, viewport.width);
+  const y = resolveValue(position.y, viewport.height);
+  const maxWidth = position.width ? resolveValue(position.width, viewport.width) : void 0;
+  const textAnchor = getTextAnchor(style.textAlign, position.anchor);
+  const dominantBaseline = getDominantBaseline(position.anchor);
+  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",
+    fill: style.color,
+    ...animStyle.style
+  };
+  const filterId = style.shadow ? `shadow-${layer.id}` : void 0;
+  return /* @__PURE__ */ jsxs("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: [
+    style.shadow && /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx2("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "rgba(0,0,0,0.7)" }) }) }),
+    style.background && /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        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,
+        fill: style.background,
+        rx: 4,
+        ry: 4
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "text",
+      {
+        x,
+        y,
+        textAnchor,
+        dominantBaseline,
+        style: textStyles,
+        filter: filterId ? `url(#${filterId})` : void 0,
+        children: lines.map((line, i) => /* @__PURE__ */ jsxs("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: [
+          line || "\xA0",
+          " "
+        ] }, i))
+      }
+    )
+  ] });
+}
+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(anchor) {
+  if (anchor?.includes("bottom")) return "text-after-edge";
+  if (anchor === "center") return "middle";
+  return "text-before-edge";
+}
+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 { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ShapeLayer({ layer, viewport, blockTime }) {
+  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) : 100;
+  const height = position.height ? resolveValue(position.height, viewport.height) : 100;
+  const animStyle = getAnimationStyle(animation, blockTime);
+  const fill = content.fill || "none";
+  const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
+  if (content.shape === "rect" && isCSSGradient) {
+    return /* @__PURE__ */ jsx3(
+      "g",
+      {
+        className: `block-layer block-layer--shape ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: /* @__PURE__ */ jsx3("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              background: fill,
+              borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
+              pointerEvents: "none"
+            }
+          }
+        ) })
+      }
+    );
+  }
+  const shapeProps = {
+    fill,
+    stroke: content.stroke,
+    strokeWidth: content.strokeWidth
+  };
+  return /* @__PURE__ */ jsxs2(
+    "g",
+    {
+      className: `block-layer block-layer--shape ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        content.shape === "rect" && /* @__PURE__ */ jsx3(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            rx: content.borderRadius,
+            ry: content.borderRadius,
+            ...shapeProps
+          }
+        ),
+        content.shape === "circle" && /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: x + width / 2,
+            cy: y + height / 2,
+            r: Math.min(width, height) / 2,
+            ...shapeProps
+          }
+        ),
+        content.shape === "line" && /* @__PURE__ */ jsx3(
+          "line",
+          {
+            x1: x,
+            y1: y,
+            x2: x + width,
+            y2: y + height,
+            stroke: content.stroke || "#ffffff",
+            strokeWidth: content.strokeWidth || 2
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layers/MapLayer.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+
+// src/utils/mapTileUtils.ts
+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 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 jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MapLayer({ layer, basePath, viewport, blockTime }) {
+  const { content, position, animation } = layer;
+  const [mapImageUrl, setMapImageUrl] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  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;
+  useEffect2(() => {
+    let cancelled = false;
+    if (content.staticSrc) {
+      const src = content.staticSrc.startsWith("http") ? content.staticSrc : `${basePath}/${content.staticSrc}`;
+      setMapImageUrl(src);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    composeMapImage({
+      center: content.center,
+      zoom: content.zoom,
+      style: content.style,
+      width,
+      height,
+      markers: content.markers,
+      showAttribution: content.showAttribution !== false
+    }).then((dataUrl) => {
+      if (!cancelled) {
+        setMapImageUrl(dataUrl);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("Failed to compose map:", err);
+        setError(err instanceof Error ? err.message : String(err));
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    content.center.lat,
+    content.center.lng,
+    content.zoom,
+    content.style,
+    content.staticSrc,
+    width,
+    height,
+    basePath
+  ]);
+  const animStyle = getAnimationStyle(animation, blockTime);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs3(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height, fill: "#e5e7eb" }),
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsxs3(
+      "g",
+      {
+        className: `block-layer block-layer--map ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        children: [
+          /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height, fill: "#fef2f2" }),
+          /* @__PURE__ */ jsx4(
+            "text",
+            {
+              x: finalX + width / 2,
+              y: finalY + height / 2,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: "#dc2626",
+              fontSize: "18",
+              fontFamily: "system-ui, sans-serif",
+              children: "Map failed to load"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "g",
+    {
+      className: `block-layer block-layer--map ${animStyle.className}`,
+      style: animStyle.style,
+      "data-layer-id": layer.id,
+      children: [
+        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("clipPath", { id: `clip-${layer.id}`, children: /* @__PURE__ */ jsx4("rect", { x: finalX, y: finalY, width, height }) }) }),
+        /* @__PURE__ */ jsx4("g", { clipPath: `url(#clip-${layer.id})`, children: /* @__PURE__ */ jsx4(
+          "image",
+          {
+            href: mapImageUrl,
+            x: finalX,
+            y: finalY,
+            width,
+            height,
+            preserveAspectRatio: "xMidYMid slice",
+            style: { pointerEvents: "none" }
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/layers/VideoLayer.tsx
+import { useRef, useEffect as useEffect3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function VideoLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime: _blockTime,
+  isPlaying
+}) {
+  const { content, position } = layer;
+  const videoRef = useRef(null);
+  const hasStartedRef = useRef(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 src = useMediaUrl(content.src, basePath);
+  const resolvedPoster = useMediaUrl(content.posterSrc || "", basePath);
+  const posterSrc = content.posterSrc ? resolvedPoster : void 0;
+  useEffect3(() => {
+    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();
+    };
+  }, [content.src, content.clipStart, content.clipEnd]);
+  useEffect3(() => {
+    const video = videoRef.current;
+    if (!video || !hasStartedRef.current) return;
+    if (video.currentTime >= content.clipEnd) return;
+    if (isPlaying) {
+      const playPromise = video.play();
+      if (playPromise) {
+        playPromise.catch(() => {
+        });
+      }
+    } else {
+      video.pause();
+    }
+  }, [isPlaying, content.clipEnd]);
+  return /* @__PURE__ */ jsx5("g", { className: "block-layer block-layer--video", "data-layer-id": layer.id, children: /* @__PURE__ */ jsx5("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx5(
+    "video",
+    {
+      ref: videoRef,
+      src,
+      poster: posterSrc,
+      muted: true,
+      playsInline: true,
+      preload: "auto",
+      "data-clip-start": content.clipStart,
+      "data-clip-end": content.clipEnd,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: content.fit || "cover",
+        objectPosition: "center",
+        display: "block",
+        pointerEvents: "none"
+      }
+    }
+  ) }) });
+}
+
+// src/BlockRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var VIEWPORT = {
+  width: 1920,
+  height: 1080
+};
+function BlockRenderer({
+  block,
+  blockTime,
+  basePath,
+  isEntering = false,
+  isExiting = false,
+  viewport = VIEWPORT,
+  isPlaying
+}) {
+  let transitionClass = "";
+  const transitionStyle = {};
+  if (block.transition && isEntering) {
+    transitionClass = getTransitionClass(block.transition.type, true);
+    transitionStyle["--transition-duration"] = `${block.transition.duration}s`;
+  } else if (block.transition && isExiting) {
+    transitionClass = getTransitionClass(block.transition.type, false);
+    transitionStyle["--transition-duration"] = `${block.transition.duration}s`;
+  }
+  const clipId = `vb-clip-${block.id}`;
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: `block-svg ${transitionClass}`,
+      style: transitionStyle,
+      viewBox: `0 0 ${viewport.width} ${viewport.height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      overflow: "hidden",
+      "data-block-id": block.id,
+      children: [
+        /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6("clipPath", { id: clipId, children: /* @__PURE__ */ jsx6("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
+        /* @__PURE__ */ jsx6("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx6(
+          LayerRenderer,
+          {
+            layer,
+            basePath,
+            viewport,
+            blockTime,
+            isPlaying
+          },
+          layer.id
+        )) })
+      ]
+    }
+  );
+}
+function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
+  switch (layer.type) {
+    case "image":
+      return /* @__PURE__ */ jsx6(ImageLayer, { layer, basePath, viewport, blockTime });
+    case "text":
+      return /* @__PURE__ */ jsx6(TextLayer, { layer, viewport, blockTime });
+    case "shape":
+      return /* @__PURE__ */ jsx6(ShapeLayer, { layer, viewport, blockTime });
+    case "map":
+      return /* @__PURE__ */ jsx6(MapLayer, { layer, basePath, viewport, blockTime });
+    case "video":
+      return /* @__PURE__ */ jsx6(
+        VideoLayer,
+        {
+          layer,
+          basePath,
+          viewport,
+          blockTime,
+          isPlaying
+        }
+      );
+    default:
+      console.warn(`Unknown layer type: ${layer.type}`);
+      return null;
+  }
+}
+
+// src/CaptionOverlay.tsx
+import { getCaptionAtTime } from "@bendyline/squisq/schemas";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function CaptionOverlay({
+  captions,
+  currentTime,
+  enabled = true,
+  fontSize = 16
+}) {
+  const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
+  const captionText = phrase?.text ?? null;
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "caption-overlay",
+      style: {
+        position: "absolute",
+        top: "6px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 50,
+        pointerEvents: "none",
+        maxWidth: "100%",
+        width: "100%",
+        textAlign: "center",
+        opacity: captionText ? 1 : 0,
+        transition: "opacity 0.15s ease-in-out",
+        padding: "0 4px",
+        boxSizing: "border-box"
+      },
+      children: captionText && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            padding: "3px 10px",
+            background: "rgba(0, 0, 0, 0.65)",
+            borderRadius: "4px",
+            backdropFilter: "blur(4px)"
+          },
+          children: /* @__PURE__ */ jsx7(
+            "span",
+            {
+              style: {
+                color: "#ffffff",
+                fontSize: `${fontSize}px`,
+                fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
+                fontWeight: 500,
+                lineHeight: 1.25,
+                textShadow: "0 1px 3px rgba(0,0,0,0.5)",
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word"
+              },
+              children: captionText
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/hooks/useAudioSync.ts
+import { useState as useState3, useEffect as useEffect4, useRef as useRef2, useCallback } from "react";
+function useAudioSync(audioRef, audioTrack, basePath = "") {
+  const [currentTime, setCurrentTime] = useState3(0);
+  const [isPlaying, setIsPlaying] = useState3(false);
+  const [currentSegment, setCurrentSegment] = useState3(0);
+  const [isEnded, setIsEnded] = useState3(false);
+  const [isAudioReady, setIsAudioReady] = useState3(false);
+  const [totalDuration, setTotalDuration] = useState3(0);
+  const segmentStarts = useRef2([]);
+  const pendingSeekTime = useRef2(null);
+  const shouldPlayAfterLoad = useRef2(false);
+  const blobUrls = useRef2(/* @__PURE__ */ new Map());
+  const loadingPromises = useRef2(/* @__PURE__ */ new Map());
+  const fallbackMode = useRef2(false);
+  useEffect4(() => {
+    if (!audioTrack?.segments) {
+      return;
+    }
+    let time = 0;
+    segmentStarts.current = audioTrack.segments.map((seg) => {
+      const start = time;
+      time += seg.duration;
+      return start;
+    });
+    setTotalDuration(time);
+  }, [audioTrack]);
+  const preloadAudio = useCallback(
+    async (src) => {
+      const audioUrl = basePath ? `${basePath}/${src}` : src;
+      if (blobUrls.current.has(src)) {
+        return blobUrls.current.get(src);
+      }
+      if (loadingPromises.current.has(src)) {
+        return loadingPromises.current.get(src);
+      }
+      const loadPromise = (async () => {
+        try {
+          const response = await fetch(audioUrl);
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          const blob = await response.blob();
+          const blobUrl = URL.createObjectURL(blob);
+          blobUrls.current.set(src, blobUrl);
+          return blobUrl;
+        } catch {
+          return audioUrl;
+        } finally {
+          loadingPromises.current.delete(src);
+        }
+      })();
+      loadingPromises.current.set(src, loadPromise);
+      return loadPromise;
+    },
+    [basePath]
+  );
+  useEffect4(() => {
+    if (!audioTrack?.segments) return;
+    audioTrack.segments.forEach((segment) => {
+      preloadAudio(segment.src);
+    });
+    const currentBlobUrls = blobUrls.current;
+    return () => {
+      currentBlobUrls.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+      currentBlobUrls.clear();
+    };
+  }, [audioTrack, preloadAudio]);
+  useEffect4(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const handleTimeUpdate = () => {
+      const segmentStart = segmentStarts.current[currentSegment] || 0;
+      const overallTime = segmentStart + audio.currentTime;
+      setCurrentTime(overallTime);
+    };
+    const handlePlay = () => {
+      fallbackMode.current = false;
+      setIsPlaying(true);
+    };
+    const handlePause = () => setIsPlaying(false);
+    const handleError = () => {
+      setIsAudioReady(true);
+    };
+    const handleEnded = () => {
+      if (audioTrack && currentSegment < audioTrack.segments.length - 1) {
+        shouldPlayAfterLoad.current = true;
+        setCurrentSegment((prev) => prev + 1);
+      } else {
+        setIsEnded(true);
+        setIsPlaying(false);
+      }
+    };
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("error", handleError);
+    return () => {
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("error", handleError);
+    };
+  }, [audioRef, currentSegment, audioTrack]);
+  useEffect4(() => {
+    const audio = audioRef.current;
+    if (!audio || !audioTrack?.segments) return;
+    const segment = audioTrack.segments[currentSegment];
+    if (!segment) return;
+    const applyPendingSeek = () => {
+      if (pendingSeekTime.current !== null) {
+        const segmentStart = segmentStarts.current[currentSegment] || 0;
+        const segmentTime = pendingSeekTime.current - segmentStart;
+        audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(pendingSeekTime.current);
+        pendingSeekTime.current = null;
+      }
+      if (shouldPlayAfterLoad.current) {
+        audio.play().catch(() => {
+        });
+        shouldPlayAfterLoad.current = false;
+      }
+    };
+    const currentSrc = audio.src;
+    const cachedBlobUrl = blobUrls.current.get(segment.src);
+    const isSameSource = currentSrc && (currentSrc === cachedBlobUrl || currentSrc.endsWith(segment.src));
+    if (!isSameSource) {
+      const loadAndPlay = async () => {
+        const blobUrl = await preloadAudio(segment.src);
+        const handleCanPlay = () => {
+          setIsAudioReady(true);
+          applyPendingSeek();
+          audio.removeEventListener("canplay", handleCanPlay);
+        };
+        audio.addEventListener("canplay", handleCanPlay);
+        audio.src = blobUrl;
+        audio.load();
+        await Promise.resolve();
+        if (audio.readyState >= 3) {
+          audio.removeEventListener("canplay", handleCanPlay);
+          setIsAudioReady(true);
+          applyPendingSeek();
+        }
+      };
+      loadAndPlay();
+    } else {
+      applyPendingSeek();
+    }
+  }, [audioRef, currentSegment, audioTrack, preloadAudio]);
+  const play = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      if (isEnded) {
+        setCurrentSegment(0);
+        setIsEnded(false);
+      }
+      audio.play().then(() => {
+        fallbackMode.current = false;
+      }).catch(() => {
+        fallbackMode.current = true;
+        setIsPlaying(true);
+      });
+    }
+  }, [audioRef, isEnded]);
+  const pause = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+    }
+    setIsPlaying(false);
+  }, [audioRef]);
+  const toggle = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (!isPlaying) {
+      play();
+    } else {
+      pause();
+    }
+  }, [audioRef, isPlaying, play, pause]);
+  const seekTo = useCallback(
+    (time) => {
+      const audio = audioRef.current;
+      if (!audio || !audioTrack?.segments) return;
+      const clampedTime = Math.max(0, Math.min(time, totalDuration));
+      let segmentIndex = 0;
+      let segmentStart = 0;
+      for (let i = 0; i < audioTrack.segments.length; i++) {
+        const segEnd = segmentStart + audioTrack.segments[i].duration;
+        if (clampedTime < segEnd) {
+          segmentIndex = i;
+          break;
+        }
+        segmentStart = segEnd;
+        if (i === audioTrack.segments.length - 1) {
+          segmentIndex = i;
+        }
+      }
+      const wasPlaying = !audio.paused;
+      setIsEnded(false);
+      if (segmentIndex !== currentSegment) {
+        pendingSeekTime.current = clampedTime;
+        shouldPlayAfterLoad.current = wasPlaying;
+        setCurrentSegment(segmentIndex);
+      } else {
+        const segmentTime = clampedTime - segmentStart;
+        audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(clampedTime);
+      }
+    },
+    [audioRef, audioTrack, currentSegment, totalDuration]
+  );
+  const skipToSegment = useCallback(
+    (index) => {
+      if (!audioTrack?.segments || index < 0 || index >= audioTrack.segments.length) {
+        return;
+      }
+      setCurrentSegment(index);
+      setIsEnded(false);
+    },
+    [audioTrack]
+  );
+  const restart = useCallback(async () => {
+    seekTo(0);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    play();
+  }, [seekTo, play]);
+  useEffect4(() => {
+    if (!isPlaying || !fallbackMode.current || !totalDuration) return;
+    let lastTime = performance.now();
+    let raf;
+    const tick = (now) => {
+      if (!fallbackMode.current) return;
+      const dt = (now - lastTime) / 1e3;
+      lastTime = now;
+      setCurrentTime((prev) => {
+        const next = prev + dt;
+        if (next >= totalDuration) {
+          fallbackMode.current = false;
+          setIsEnded(true);
+          setIsPlaying(false);
+          return totalDuration;
+        }
+        return next;
+      });
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [isPlaying, totalDuration]);
+  return {
+    // State
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable: true,
+    // HTML5 audio is always available in browsers
+    // Actions
+    play: async () => play(),
+    pause: async () => pause(),
+    toggle: async () => toggle(),
+    seekTo: async (time) => seekTo(time),
+    skipToSegment: async (index) => skipToSegment(index),
+    restart
+  };
+}
+
+// src/hooks/useDocPlayback.ts
+import { useState as useState4, useEffect as useEffect5, useMemo as useMemo2, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { getBlockAtTime } from "@bendyline/squisq/schemas";
+import {
+  expandDocBlocks,
+  isTemplateBlock,
+  VIEWPORT_PRESETS
+} from "@bendyline/squisq/doc";
+function useDocPlayback(script, currentTime, viewport = VIEWPORT_PRESETS.landscape, renderMode = false, theme) {
+  const [transitionState, setTransitionState] = useState4({
+    entering: false,
+    exiting: false,
+    previousBlock: null
+  });
+  const blocks = useMemo2(() => {
+    if (!script?.blocks) {
+      return [];
+    }
+    const hasTemplates = script.blocks.some(isTemplateBlock);
+    if (hasTemplates) {
+      const audioSegments = script.audio?.segments?.map((seg) => ({
+        startTime: seg.startTime,
+        duration: seg.duration
+      }));
+      const expanded = expandDocBlocks(script.blocks, {
+        audioSegments,
+        viewport,
+        persistentLayers: script.persistentLayers,
+        theme
+      });
+      return expanded;
+    }
+    return script.blocks;
+  }, [script?.blocks, script?.audio?.segments, script?.persistentLayers, viewport, theme]);
+  const currentBlock = useMemo2(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
+  const currentBlockIndex = useMemo2(
+    () => currentBlock ? blocks.indexOf(currentBlock) : -1,
+    [blocks, currentBlock]
+  );
+  const blockTime = useMemo2(() => {
+    if (!currentBlock) return 0;
+    return Math.max(0, currentTime - currentBlock.startTime);
+  }, [currentBlock, currentTime]);
+  const blockProgress = useMemo2(() => {
+    if (!currentBlock || currentBlock.duration === 0) return 0;
+    return Math.min(1, blockTime / currentBlock.duration);
+  }, [currentBlock, blockTime]);
+  const docProgress = useMemo2(() => {
+    if (!script || script.duration === 0) return 0;
+    return Math.min(1, currentTime / script.duration);
+  }, [script, currentTime]);
+  const _prevBlockRef = useMemo2(
+    () => currentBlock,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally keyed on index, not block reference
+    [currentBlockIndex]
+  );
+  useEffect5(() => {
+    if (!currentBlock || renderMode) return;
+    if (transitionState.previousBlock?.id !== currentBlock.id) {
+      const transition = currentBlock.transition;
+      const transitionDuration = transition?.duration || 0;
+      if (transitionDuration > 0) {
+        setTransitionState({
+          entering: true,
+          exiting: true,
+          previousBlock: transitionState.previousBlock
+        });
+        const timer = setTimeout(() => {
+          setTransitionState({
+            entering: false,
+            exiting: false,
+            previousBlock: currentBlock
+          });
+        }, transitionDuration * 1e3);
+        return () => clearTimeout(timer);
+      } else {
+        setTransitionState({
+          entering: false,
+          exiting: false,
+          previousBlock: currentBlock
+        });
+      }
+    }
+  }, [currentBlock?.id, renderMode]);
+  const renderPrevBlockRef = useRef3(null);
+  useEffect5(() => {
+    if (!renderMode || !currentBlock) return;
+    if (transitionState.previousBlock?.id !== currentBlock.id) {
+      const oldPrev = transitionState.previousBlock;
+      renderPrevBlockRef.current = oldPrev;
+      setTransitionState((prev) => ({
+        ...prev,
+        previousBlock: currentBlock
+      }));
+    }
+  }, [currentBlock?.id, renderMode]);
+  const renderTransitionDuration = currentBlock?.transition?.duration || 0;
+  const renderIsEntering = renderMode && renderTransitionDuration > 0 && blockTime < renderTransitionDuration;
+  const renderIsExiting = renderIsEntering && renderPrevBlockRef.current !== null;
+  const goToBlock = useCallback2(
+    (index) => {
+      if (!script || index < 0 || index >= blocks.length) return;
+      const targetBlock = blocks[index];
+      if (targetBlock) {
+        return targetBlock.startTime;
+      }
+    },
+    [script, blocks]
+  );
+  const nextBlock = useCallback2(() => {
+    if (currentBlockIndex < blocks.length - 1) {
+      return goToBlock(currentBlockIndex + 1);
+    }
+  }, [currentBlockIndex, blocks.length, goToBlock]);
+  const prevBlock = useCallback2(() => {
+    if (currentBlockIndex > 0) {
+      return goToBlock(currentBlockIndex - 1);
+    }
+  }, [currentBlockIndex, goToBlock]);
+  return {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock: renderMode ? renderIsExiting ? renderPrevBlockRef.current : null : transitionState.exiting ? transitionState.previousBlock : null,
+    isEntering: renderMode ? renderIsEntering : transitionState.entering,
+    isExiting: renderMode ? renderIsExiting : transitionState.exiting,
+    blockTime,
+    blockProgress,
+    docProgress,
+    nextBlock,
+    prevBlock,
+    goToBlock,
+    /** Expanded blocks (templates converted to full blocks with layers) */
+    blocks
+  };
+}
+
+// src/hooks/useViewportOrientation.ts
+import { useState as useState5, useEffect as useEffect6, useMemo as useMemo3 } from "react";
+import {
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS2
+} from "@bendyline/squisq/doc";
+function getOrientationFromWindow(width, height) {
+  const ratio = width / height;
+  if (ratio > 1.2) {
+    return "landscape";
+  } else if (ratio < 0.83) {
+    return "portrait";
+  } else {
+    return "landscape";
+  }
+}
+function getViewportForOrientation(orientation) {
+  switch (orientation) {
+    case "portrait":
+      return VIEWPORT_PRESETS2.portrait;
+    case "square":
+      return VIEWPORT_PRESETS2.square;
+    case "landscape":
+    default:
+      return VIEWPORT_PRESETS2.landscape;
+  }
+}
+function useViewportOrientation() {
+  const [windowSize, setWindowSize] = useState5(() => ({
+    width: typeof window !== "undefined" ? window.innerWidth : 1920,
+    height: typeof window !== "undefined" ? window.innerHeight : 1080
+  }));
+  useEffect6(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    let timeoutId;
+    const debouncedResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleResize, 100);
+    };
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const orientation = useMemo3(
+    () => getOrientationFromWindow(windowSize.width, windowSize.height),
+    [windowSize.width, windowSize.height]
+  );
+  const viewport = useMemo3(() => getViewportForOrientation(orientation), [orientation]);
+  return {
+    viewport,
+    orientation,
+    windowSize
+  };
+}
+
+// src/DocPlayer.tsx
+import {
+  expandCoverBlock,
+  createTemplateContext,
+  DEFAULT_THEME as DEFAULT_THEME2,
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS4
+} from "@bendyline/squisq/doc";
+
+// src/DocProgressBar.tsx
+import { useRef as useRef4, useState as useState6, useCallback as useCallback3 } from "react";
+
+// src/types.ts
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+// src/DocProgressBar.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DocProgressBar({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  const progressBarRef = useRef4(null);
+  const [hoverPosition, setHoverPosition] = useState6(null);
+  const handleProgressHover = useCallback3((e) => {
+    const bar = progressBarRef.current;
+    if (!bar) return;
+    const rect = bar.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const progress = Math.max(0, Math.min(1, x / rect.width));
+    setHoverPosition(progress);
+  }, []);
+  const handleProgressLeave = useCallback3(() => {
+    setHoverPosition(null);
+  }, []);
+  const getBlockAtTimeLocal = useCallback3(
+    (time) => {
+      for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+        const blk = expandedBlocks[i];
+        if (time >= blk.startTime) {
+          return { block: blk, index: i };
+        }
+      }
+      return expandedBlocks.length > 0 ? { block: expandedBlocks[0], index: 0 } : null;
+    },
+    [expandedBlocks]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: progressBarRef,
+      style: {
+        flex: 1,
+        height: "24px",
+        cursor: "pointer",
+        position: "relative",
+        display: "flex",
+        alignItems: "center"
+      },
+      onClick: (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const progress = x / rect.width;
+        actions.seekTo(progress * state.totalDuration);
+      },
+      onMouseMove: handleProgressHover,
+      onMouseLeave: handleProgressLeave,
+      children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              height: "6px",
+              background: "rgba(255,255,255,0.2)",
+              borderRadius: "3px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              width: `${state.docProgress * 100}%`,
+              height: "6px",
+              background: "#3d5a80",
+              borderRadius: "3px",
+              transition: "width 0.1s"
+            }
+          }
+        ),
+        blockMarkers.map((marker, i) => /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${marker.position}%`,
+              transform: "translateX(-50%)",
+              width: "10px",
+              height: "10px",
+              borderRadius: "50%",
+              background: marker.index === state.currentBlockIndex ? "#ffffff" : "rgba(255,255,255,0.5)",
+              border: "2px solid #3d5a80",
+              cursor: "pointer",
+              zIndex: 2,
+              transition: "transform 0.15s, background 0.15s"
+            },
+            title: marker.title,
+            onClick: (e) => {
+              e.stopPropagation();
+              actions.seekTo(marker.block.startTime);
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateX(-50%)";
+            }
+          },
+          `${marker.block.id}-${i}`
+        )),
+        hoverPosition !== null && /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              bottom: "100%",
+              transform: "translateX(-50%)",
+              marginBottom: "8px",
+              padding: "6px 10px",
+              background: "rgba(0,0,0,0.9)",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx8("div", { style: { color: "white", fontSize: "12px", fontFamily: "monospace" }, children: formatTime(hoverPosition * state.totalDuration) }),
+              (() => {
+                const hoverTime = hoverPosition * state.totalDuration;
+                const slideInfo = getBlockAtTimeLocal(hoverTime);
+                if (slideInfo && getBlockTitle) {
+                  return /* @__PURE__ */ jsx8("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "11px", marginTop: "2px" }, children: getBlockTitle(slideInfo.block) });
+                }
+                return null;
+              })()
+            ]
+          }
+        ),
+        hoverPosition !== null && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${hoverPosition * 100}%`,
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "2px",
+              height: "16px",
+              background: "rgba(255,255,255,0.6)",
+              pointerEvents: "none",
+              zIndex: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsOverlay.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocControlsOverlay({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "doc-player__controls",
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: "12px 16px",
+        background: "linear-gradient(transparent, rgba(0,0,0,0.8))",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        zIndex: 100
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: actions.restart,
+            style: {
+              background: "none",
+              border: "none",
+              color: "rgba(255,255,255,0.7)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center"
+            },
+            title: "Restart",
+            "aria-label": "Restart from beginning",
+            children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx9("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: actions.toggle,
+            style: {
+              background: "rgba(255,255,255,0.2)",
+              border: "none",
+              borderRadius: "50%",
+              color: "white",
+              cursor: "pointer",
+              padding: "10px",
+              fontSize: "16px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "40px",
+              height: "40px"
+            },
+            "aria-label": state.isPlaying ? "Pause" : "Play",
+            children: state.isPlaying ? /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs6("span", { style: { color: "white", fontSize: "12px", minWidth: "80px", fontFamily: "monospace" }, children: [
+          formatTime(state.currentTime),
+          " / ",
+          formatTime(state.totalDuration)
+        ] }),
+        /* @__PURE__ */ jsx9(
+          DocProgressBar,
+          {
+            state,
+            actions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        /* @__PURE__ */ jsxs6("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "11px", whiteSpace: "nowrap" }, children: [
+          state.currentBlockIndex + 1,
+          "/",
+          state.totalBlocks
+        ] }),
+        state.hasCaptions && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled),
+            style: {
+              background: state.captionsEnabled ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.captionsEnabled ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              fontSize: "12px",
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "4px"
+            },
+            title: state.captionsEnabled ? "Hide captions" : "Show captions",
+            "aria-label": state.captionsEnabled ? "Hide captions" : "Show captions",
+            children: /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx9("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+          }
+        ),
+        actions.toggleFullscreen && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: actions.toggleFullscreen,
+            style: {
+              background: state.isFullscreen ? "rgba(255,255,255,0.2)" : "none",
+              border: "none",
+              color: state.isFullscreen ? "white" : "rgba(255,255,255,0.5)",
+              cursor: "pointer",
+              padding: "8px",
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "4px"
+            },
+            title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
+            "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            children: state.isFullscreen ? /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx9("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx9("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocControlsSlideshow.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function DocControlsSlideshow({ state, slideNav }) {
+  const { currentBlockIndex, totalBlocks } = state;
+  const isFirst = currentBlockIndex <= 0;
+  const isLast = currentBlockIndex >= totalBlocks - 1;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "doc-controls-slideshow",
+      "data-testid": "slideshow-controls",
+      style: {
+        position: "absolute",
+        bottom: "16px",
+        right: "16px",
+        display: "flex",
+        alignItems: "center",
+        gap: "2px",
+        background: "rgba(0, 0, 0, 0.65)",
+        borderRadius: "8px",
+        padding: "4px 6px",
+        zIndex: 100,
+        userSelect: "none",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.prevSlide();
+            },
+            disabled: isFirst,
+            "data-testid": "slide-prev",
+            "aria-label": "Previous slide",
+            title: "Previous slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isFirst ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isFirst ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isFirst) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx10("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "span",
+          {
+            "data-testid": "slide-counter",
+            style: {
+              color: "rgba(255,255,255,0.9)",
+              fontSize: "13px",
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              fontVariantNumeric: "tabular-nums",
+              minWidth: "48px",
+              textAlign: "center",
+              padding: "0 4px",
+              letterSpacing: "0.02em"
+            },
+            children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : "\u2014"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              slideNav.nextSlide();
+            },
+            disabled: isLast,
+            "data-testid": "slide-next",
+            "aria-label": "Next slide",
+            title: "Next slide",
+            style: {
+              background: "none",
+              border: "none",
+              color: isLast ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.9)",
+              cursor: isLast ? "default" : "pointer",
+              padding: "6px 8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "4px",
+              transition: "background 0.15s"
+            },
+            onMouseEnter: (e) => {
+              if (!isLast) e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "none";
+            },
+            children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx10("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/LinearDocView.tsx
+import { useMemo as useMemo4 } from "react";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
+import { getLayers, hasTemplate, DEFAULT_THEME } from "@bendyline/squisq/doc";
+import { extractPlainText } from "@bendyline/squisq/markdown";
+
+// src/MarkdownRenderer.tsx
+import { Fragment } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function renderInline(nodes, keyPrefix = "") {
+  return nodes.map((node, i) => {
+    const key = `${keyPrefix}i${i}`;
+    switch (node.type) {
+      case "text":
+        return /* @__PURE__ */ jsx11(Fragment, { children: node.value }, key);
+      case "emphasis":
+        return /* @__PURE__ */ jsx11("em", { className: "squisq-md-em", children: renderInline(node.children, key) }, key);
+      case "strong":
+        return /* @__PURE__ */ jsx11("strong", { className: "squisq-md-strong", children: renderInline(node.children, key) }, key);
+      case "delete":
+        return /* @__PURE__ */ jsx11("del", { className: "squisq-md-del", children: renderInline(node.children, key) }, key);
+      case "inlineCode":
+        return /* @__PURE__ */ jsx11("code", { className: "squisq-md-inline-code", children: node.value }, key);
+      case "link":
+        return /* @__PURE__ */ jsx11(
+          "a",
+          {
+            className: "squisq-md-link",
+            href: node.url,
+            title: node.title ?? void 0,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: renderInline(node.children, key)
+          },
+          key
+        );
+      case "image":
+        return /* @__PURE__ */ jsx11(
+          "img",
+          {
+            className: "squisq-md-image",
+            src: node.url,
+            alt: node.alt ?? "",
+            title: node.title ?? void 0
+          },
+          key
+        );
+      case "break":
+        return /* @__PURE__ */ jsx11("br", {}, key);
+      case "inlineMath":
+        return /* @__PURE__ */ jsx11("code", { className: "squisq-md-inline-math", children: node.value }, key);
+      case "htmlInline":
+        return /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: "squisq-md-html-inline",
+            dangerouslySetInnerHTML: { __html: node.rawHtml }
+          },
+          key
+        );
+      case "footnoteReference":
+        return /* @__PURE__ */ jsx11("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs8("a", { href: `#fn-${node.identifier}`, children: [
+          "[",
+          node.label ?? node.identifier,
+          "]"
+        ] }) }, key);
+      case "linkReference":
+        return /* @__PURE__ */ jsx11("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key) }, key);
+      case "imageReference":
+        return /* @__PURE__ */ jsxs8("span", { className: "squisq-md-image-ref", children: [
+          "[",
+          node.alt ?? node.identifier,
+          "]"
+        ] }, key);
+      case "textDirective":
+        return /* @__PURE__ */ jsx11("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key) }, key);
+      default:
+        return null;
+    }
+  });
+}
+function renderBlock(node, key) {
+  switch (node.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx11("p", { className: "squisq-md-p", children: renderInline(node.children, key) }, key);
+    case "heading": {
+      const Tag = `h${node.depth}`;
+      return /* @__PURE__ */ jsx11(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key) }, key);
+    }
+    case "blockquote":
+      return /* @__PURE__ */ jsx11("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key) }, key);
+    case "list":
+      if (node.ordered) {
+        return /* @__PURE__ */ jsx11("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`)) }, key);
+      }
+      return /* @__PURE__ */ jsx11("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`)) }, key);
+    case "code":
+      return /* @__PURE__ */ jsx11("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx11("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+    case "thematicBreak":
+      return /* @__PURE__ */ jsx11("hr", { className: "squisq-md-hr" }, key);
+    case "table":
+      return renderTable(node.children, node.align, key);
+    case "htmlBlock":
+      return /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: "squisq-md-html-block",
+          dangerouslySetInnerHTML: { __html: node.rawHtml }
+        },
+        key
+      );
+    case "math":
+      return /* @__PURE__ */ jsx11("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx11("code", { children: node.value }) }, key);
+    case "definition":
+      return null;
+    case "footnoteDefinition":
+      return /* @__PURE__ */ jsxs8("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx11("sup", { children: node.label ?? node.identifier }),
+        renderBlocks(node.children, key)
+      ] }, key);
+    case "containerDirective":
+      return /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: [
+            node.label && /* @__PURE__ */ jsx11("div", { className: "squisq-md-directive-label", children: node.label }),
+            renderBlocks(node.children, key)
+          ]
+        },
+        key
+      );
+    case "leafDirective":
+      return /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: `squisq-md-directive squisq-md-directive-${node.name}`,
+          "data-directive": node.name,
+          children: renderInline(node.children, key)
+        },
+        key
+      );
+    case "definitionList":
+      return /* @__PURE__ */ jsx11("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+        if (child.type === "definitionTerm") {
+          return /* @__PURE__ */ jsx11("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`) }, `${key}dt${i}`);
+        }
+        return /* @__PURE__ */ jsx11("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`) }, `${key}dd${i}`);
+      }) }, key);
+    default:
+      return null;
+  }
+}
+function renderListItem(item, key) {
+  const isTask = item.checked !== null && item.checked !== void 0;
+  return /* @__PURE__ */ jsxs8("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
+    isTask && /* @__PURE__ */ jsx11("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+    renderBlocks(item.children, key)
+  ] }, key);
+}
+function renderTable(rows, align, key) {
+  const [headerRow, ...bodyRows] = rows;
+  return /* @__PURE__ */ jsxs8("table", { className: "squisq-md-table", children: [
+    headerRow && /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsx11("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx11(
+      "th",
+      {
+        className: "squisq-md-th",
+        style: align?.[ci] ? { textAlign: align[ci] } : void 0,
+        children: renderInline(cell.children, `${key}th${ci}`)
+      },
+      `${key}th${ci}`
+    )) }) }),
+    bodyRows.length > 0 && /* @__PURE__ */ jsx11("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx11("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx11(
+      "td",
+      {
+        className: "squisq-md-td",
+        style: align?.[ci] ? { textAlign: align[ci] } : void 0,
+        children: renderInline(cell.children, `${key}td${ri}-${ci}`)
+      },
+      `${key}td${ri}-${ci}`
+    )) }, `${key}tr${ri}`)) })
+  ] }, key);
+}
+function renderBlocks(nodes, keyPrefix = "") {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`));
+}
+function MarkdownRenderer({ nodes, className }) {
+  if (!nodes || nodes.length === 0) return null;
+  return /* @__PURE__ */ jsx11("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes) });
+}
+
+// src/LinearDocView.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function isAnnotatedBlock(block) {
+  const annotation = block.sourceHeading?.templateAnnotation;
+  if (!annotation) return false;
+  return hasTemplate(annotation.template);
+}
+function countAll(blocks) {
+  let count = 0;
+  for (const b of blocks) {
+    count++;
+    if (b.children) count += countAll(b.children);
+  }
+  return count;
+}
+function BlockSection({ block, basePath, viewport, renderContext, blockIndex }) {
+  const isAnnotated = isAnnotatedBlock(block);
+  const visualBlock = useMemo4(() => {
+    if (!isAnnotated) return null;
+    const annotation = block.sourceHeading.templateAnnotation;
+    const headingText = extractPlainText(block.sourceHeading);
+    const bodyText = extractBodyPlainText(block.contents);
+    const templateBlock = {
+      id: block.id,
+      template: annotation.template,
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: headingText,
+      ...getTemplateDefaults(annotation.template, headingText, bodyText, block.contents),
+      ...annotation.params,
+      ...block.templateOverrides
+    };
+    const ctx = {
+      ...renderContext,
+      blockIndex
+    };
+    const layers = getLayers(templateBlock, ctx);
+    return {
+      ...block,
+      layers,
+      template: annotation.template
+    };
+  }, [block, isAnnotated, renderContext, blockIndex]);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: "squisq-linear-section",
+      "data-block-id": block.id,
+      "data-template": isAnnotated ? block.sourceHeading?.templateAnnotation?.template : void 0,
+      children: [
+        block.sourceHeading && !isAnnotated && /* @__PURE__ */ jsx12(MarkdownRenderer, { nodes: [block.sourceHeading] }),
+        isAnnotated && visualBlock && /* @__PURE__ */ jsxs9("div", { className: "squisq-linear-card", children: [
+          block.sourceHeading && /* @__PURE__ */ jsx12("div", { className: "squisq-linear-card-label squisq-md", children: /* @__PURE__ */ jsx12(MarkdownRenderer, { nodes: [block.sourceHeading] }) }),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "squisq-linear-card-svg",
+              style: {
+                width: "100%",
+                aspectRatio: `${viewport.width} / ${viewport.height}`,
+                overflow: "hidden",
+                borderRadius: "8px",
+                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.12)",
+                marginBottom: "1em"
+              },
+              children: /* @__PURE__ */ jsx12(
+                BlockRenderer,
+                {
+                  block: visualBlock,
+                  blockTime: 0,
+                  basePath,
+                  viewport
+                }
+              )
+            }
+          )
+        ] }),
+        !isAnnotated && block.contents && block.contents.length > 0 && /* @__PURE__ */ jsx12(MarkdownRenderer, { nodes: block.contents }),
+        block.children && block.children.length > 0 && /* @__PURE__ */ jsx12("div", { className: "squisq-linear-children", children: block.children.map((child, i) => /* @__PURE__ */ jsx12(
+          BlockSection,
+          {
+            block: child,
+            basePath,
+            viewport,
+            renderContext,
+            blockIndex: blockIndex + i + 1
+          },
+          child.id
+        )) })
+      ]
+    }
+  );
+}
+function extractBodyPlainText(contents) {
+  if (!contents || contents.length === 0) return "";
+  return contents.map((n) => extractPlainText(n)).join("\n").trim();
+}
+function extractListItems(contents) {
+  if (!contents) return [];
+  const items = [];
+  for (const node of contents) {
+    if (node.type === "list") {
+      for (const item of node.children) {
+        const text = extractPlainText(item).trim();
+        if (text) items.push(text);
+      }
+    }
+  }
+  return items;
+}
+function getTemplateDefaults(templateName, headingText, bodyText, contents) {
+  switch (templateName) {
+    case "statHighlight":
+      return { stat: headingText, description: bodyText || headingText };
+    case "quoteBlock":
+    case "fullBleedQuote":
+    case "pullQuote":
+      return { quote: bodyText || headingText };
+    case "factCard":
+      return { fact: headingText, explanation: bodyText || headingText };
+    case "comparisonBar":
+      return { leftLabel: "A", leftValue: 60, rightLabel: "B", rightValue: 40 };
+    case "listBlock":
+      return { items: extractListItems(contents) || ["Item 1", "Item 2", "Item 3"] };
+    case "definitionCard":
+      return { term: headingText, definition: bodyText || headingText };
+    case "dateEvent":
+      return { date: headingText, description: bodyText || headingText };
+    default:
+      return {};
+  }
+}
+function LinearDocView({
+  doc,
+  basePath = "/",
+  viewport,
+  className,
+  theme
+}) {
+  const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
+  const totalBlocks = useMemo4(() => countAll(doc.blocks), [doc.blocks]);
+  const renderContext = useMemo4(
+    () => ({
+      theme: theme ?? DEFAULT_THEME,
+      viewport: activeViewport,
+      totalBlocks
+    }),
+    [activeViewport, totalBlocks, theme]
+  );
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: `squisq-linear ${className || ""}`,
+      style: {
+        width: "100%",
+        height: "100%",
+        overflowY: "auto",
+        overflowX: "hidden"
+      },
+      children: /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: "squisq-linear-content",
+          style: {
+            maxWidth: "720px",
+            margin: "0 auto",
+            padding: "24px 16px",
+            lineHeight: 1.7,
+            fontSize: "16px",
+            color: "var(--squisq-text, #1f2937)"
+          },
+          children: doc.blocks.map((block, i) => /* @__PURE__ */ jsx12(
+            BlockSection,
+            {
+              block,
+              basePath,
+              viewport: activeViewport,
+              renderContext,
+              blockIndex: i
+            },
+            block.id
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/DocPlayer.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var SMALL_WORDS = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "and",
+  "but",
+  "or",
+  "for",
+  "nor",
+  "on",
+  "at",
+  "to",
+  "in",
+  "of",
+  "by",
+  "is"
+]);
+function buildSegmentTitleMap(script) {
+  const map = /* @__PURE__ */ new Map();
+  for (const block of script.blocks) {
+    if (isTemplateBlock2(block) && block.template === "sectionHeader" && "title" in block) {
+      const segIdx = block.audioSegment;
+      if (!map.has(segIdx)) {
+        map.set(segIdx, block.title);
+      }
+    }
+  }
+  for (let i = 0; i < script.audio.segments.length; i++) {
+    if (!map.has(i)) {
+      const name = script.audio.segments[i].name;
+      if (name === "intro" || name.includes("intro")) {
+        map.set(i, "Introduction");
+      } else if (name === "flight-context" || name.includes("flight-context")) {
+        map.set(i, "Flight Context");
+      } else {
+        const words = name.split("-");
+        const titled = words.map(
+          (w, idx) => idx === 0 || !SMALL_WORDS.has(w) ? w.charAt(0).toUpperCase() + w.slice(1) : w
+        ).join(" ");
+        map.set(i, titled);
+      }
+    }
+  }
+  return map;
+}
+function DocPlayer({
+  script,
+  basePath,
+  renderMode = false,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioProvider: externalAudioProvider,
+  showControls = true,
+  showScrubber = false,
+  muted = false,
+  captionsEnabled: captionsEnabledProp,
+  onCaptionsToggle,
+  onPlaybackStateChange,
+  onControlsReady,
+  isFullscreen = false,
+  onFullscreenToggle,
+  onBlockMarkers,
+  forceViewport,
+  displayMode = "video",
+  theme
+}) {
+  const isSlideshowMode = displayMode === "slideshow";
+  const isLinearMode = displayMode === "linear";
+  const audioRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const [tapFeedback, setTapFeedback] = useState7(null);
+  const tapFeedbackTimer = useRef5();
+  const { viewport, orientation } = useViewportOrientation();
+  const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS4.landscape : viewport);
+  const isDebugMode = useMemo5(() => {
+    if (typeof window === "undefined") return false;
+    const params = new URLSearchParams(window.location.search);
+    return params.get("debug") === "true";
+  }, []);
+  const internalAudio = useAudioSync(audioRef, script.audio, basePath);
+  const audio = externalAudioProvider || internalAudio;
+  const {
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable,
+    unavailableMessage,
+    play,
+    pause,
+    toggle,
+    seekTo,
+    skipToSegment: _skipToSegment,
+    restart
+  } = audio;
+  const currentTimeRef = useRef5(currentTime);
+  currentTimeRef.current = currentTime;
+  const totalDurationRef = useRef5(totalDuration);
+  totalDurationRef.current = totalDuration;
+  const expandedBlocksLenRef = useRef5(0);
+  const handleContainerClick = useCallback4(
+    (e) => {
+      if (renderMode || isSlideshowMode || isLinearMode) return;
+      const target = e.target;
+      if (target.closest(
+        "button, a, input, .doc-player__controls, .doc-player__scrubber, .doc-controls-sidebar, .doc-controls-slideshow"
+      ))
+        return;
+      toggle();
+      const nextState = isPlaying ? "play" : "pause";
+      setTapFeedback(nextState);
+      clearTimeout(tapFeedbackTimer.current);
+      tapFeedbackTimer.current = setTimeout(() => setTapFeedback(null), 600);
+    },
+    [renderMode, toggle, isPlaying, isSlideshowMode, isLinearMode]
+  );
+  const {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock,
+    isEntering,
+    isExiting,
+    blockTime,
+    blockProgress: _blockProgress,
+    docProgress,
+    nextBlock: _nextBlock,
+    prevBlock: _prevBlock,
+    blocks: expandedBlocks
+  } = useDocPlayback(script, currentTime, activeViewport, renderMode, theme);
+  const coverBlock = useMemo5(() => {
+    const startBlockConfig = script.startBlock;
+    if (!startBlockConfig) return null;
+    const context = createTemplateContext(theme ?? DEFAULT_THEME2, 0, 1, activeViewport);
+    const layers = expandCoverBlock(startBlockConfig, context);
+    return {
+      id: "cover-block",
+      startTime: -1,
+      // Not part of timeline
+      duration: 0,
+      // Static
+      audioSegment: -1,
+      layers
+    };
+  }, [script.startBlock, activeViewport, theme]);
+  const [coverForced, setCoverForced] = useState7(false);
+  const [coverGraceActive, setCoverGraceActive] = useState7(false);
+  const coverGraceTimer = useRef5();
+  const coverWasShowing = useRef5(false);
+  const atRest = !!(coverBlock && !isPlaying && currentTime === 0 && !renderMode && !autoPlay);
+  if (atRest) coverWasShowing.current = true;
+  useEffect7(() => {
+    if (isPlaying && coverWasShowing.current && coverBlock && !renderMode) {
+      coverWasShowing.current = false;
+      setCoverGraceActive(true);
+      coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
+      return () => clearTimeout(coverGraceTimer.current);
+    }
+  }, [isPlaying, coverBlock, renderMode]);
+  const showCoverBlock = !isSlideshowMode && !isLinearMode && coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !renderMode && !autoPlay);
+  const hasAutoPlayed = useRef5(false);
+  useEffect7(() => {
+    if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
+      hasAutoPlayed.current = true;
+      play();
+    }
+  }, [isAudioReady, autoPlay, play]);
+  useEffect7(() => {
+    onTimeUpdate?.(currentTime);
+  }, [currentTime, onTimeUpdate]);
+  useEffect7(() => {
+    if (isEnded) {
+      onEnded?.();
+    }
+  }, [isEnded, onEnded]);
+  useEffect7(() => {
+    if ((renderMode || isDebugMode) && typeof window !== "undefined") {
+      const w = window;
+      w.seekTo = (time) => {
+        seekTo(time);
+        return new Promise((resolve) => {
+          requestAnimationFrame(() => {
+            let blockStartTime = 0;
+            for (let i = expandedBlocks.length - 1; i >= 0; i--) {
+              if (time >= expandedBlocks[i].startTime) {
+                blockStartTime = expandedBlocks[i].startTime;
+                break;
+              }
+            }
+            const elapsedMs = (time - blockStartTime) * 1e3;
+            document.getAnimations().forEach((anim) => {
+              const target = anim.effect?.target;
+              if (!target) return;
+              if (target.closest(".doc-player__block--active")) {
+                anim.currentTime = Math.max(0, elapsedMs);
+              } else if (target.closest(".doc-player__block--previous")) {
+                anim.currentTime = Math.max(0, elapsedMs);
+              }
+            });
+            const blockElapsed = time - blockStartTime;
+            const videoSeekPromises = [];
+            const activeBlockEl = document.querySelector(".doc-player__block--active");
+            if (activeBlockEl) {
+              const videos = activeBlockEl.querySelectorAll("video[data-clip-start]");
+              videos.forEach((el) => {
+                const video = el;
+                const clipStart = parseFloat(video.dataset.clipStart || "0");
+                const clipEnd = parseFloat(video.dataset.clipEnd || "0");
+                const targetTime = Math.min(clipStart + Math.max(0, blockElapsed), clipEnd);
+                video.pause();
+                video.currentTime = targetTime;
+                videoSeekPromises.push(
+                  new Promise((r) => {
+                    if (Math.abs(video.currentTime - targetTime) < 0.1) {
+                      r();
+                    } else {
+                      video.addEventListener("seeked", () => r(), { once: true });
+                      setTimeout(r, 200);
+                    }
+                  })
+                );
+              });
+            }
+            Promise.all(videoSeekPromises).then(() => {
+              requestAnimationFrame(() => resolve());
+            });
+          });
+        });
+      };
+      w.getDuration = () => totalDuration;
+      w.getBlocks = () => expandedBlocks.map((s) => ({
+        id: s.id,
+        template: s.template ?? "raw",
+        startTime: s.startTime,
+        duration: s.duration
+      }));
+      w.getAudioSegments = () => script.audio.segments.map((seg) => ({
+        src: seg.src,
+        name: seg.name,
+        duration: seg.duration,
+        startTime: seg.startTime
+      }));
+      w.getCaptions = () => script.captions?.phrases?.map((p) => ({
+        text: p.text,
+        startTime: p.startTime,
+        endTime: p.endTime
+      })) || [];
+      w.getChapters = () => {
+        const titleMap = buildSegmentTitleMap(script);
+        return script.audio.segments.map((seg, i) => ({
+          title: titleMap.get(i) || seg.name,
+          startTime: seg.startTime,
+          duration: seg.duration
+        }));
+      };
+      w.showCover = () => {
+        setCoverForced(true);
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      };
+      w.hideCover = () => {
+        setCoverForced(false);
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      };
+      w.hasCoverBlock = () => !!coverBlock;
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        const w = window;
+        delete w.seekTo;
+        delete w.getDuration;
+        delete w.getBlocks;
+        delete w.getAudioSegments;
+        delete w.getCaptions;
+        delete w.getChapters;
+        delete w.showCover;
+        delete w.hideCover;
+        delete w.hasCoverBlock;
+      }
+    };
+  }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock]);
+  const captionsEnabled = captionsEnabledProp !== void 0 ? captionsEnabledProp : true;
+  const setCaptionsEnabled = useCallback4(
+    (enabled) => {
+      onCaptionsToggle?.(enabled);
+    },
+    [onCaptionsToggle]
+  );
+  const hasCaptions = script.captions && script.captions.phrases.length > 0;
+  const segmentTitleMap = useMemo5(() => buildSegmentTitleMap(script), [script]);
+  const playbackState = useMemo5(
+    () => ({
+      isPlaying,
+      currentTime,
+      totalDuration,
+      currentBlockIndex,
+      totalBlocks: expandedBlocks.length,
+      docProgress,
+      hasCaptions: !!hasCaptions,
+      captionsEnabled,
+      isFullscreen,
+      currentSegmentIndex: currentSegment,
+      currentSegmentName: segmentTitleMap.get(currentSegment) ?? script.audio.segments[currentSegment]?.name ?? null,
+      currentBlock: currentBlock ?? null
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- script.audio.segments is stable within a given script
+    [
+      isPlaying,
+      currentTime,
+      totalDuration,
+      currentBlockIndex,
+      expandedBlocks.length,
+      docProgress,
+      hasCaptions,
+      captionsEnabled,
+      isFullscreen,
+      currentSegment,
+      segmentTitleMap,
+      currentBlock
+    ]
+  );
+  const playbackActions = useMemo5(
+    () => ({
+      toggle,
+      restart,
+      seekTo,
+      setCaptionsEnabled,
+      toggleFullscreen: onFullscreenToggle
+    }),
+    [toggle, restart, seekTo, setCaptionsEnabled, onFullscreenToggle]
+  );
+  const slideNavActions = useMemo5(
+    () => ({
+      nextSlide: () => {
+        if (currentBlockIndex < expandedBlocks.length - 1) {
+          const target = expandedBlocks[currentBlockIndex + 1];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      prevSlide: () => {
+        if (currentBlockIndex > 0) {
+          const target = expandedBlocks[currentBlockIndex - 1];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      },
+      goToSlide: (index) => {
+        if (index >= 0 && index < expandedBlocks.length) {
+          const target = expandedBlocks[index];
+          if (target) {
+            seekTo(target.startTime);
+            pause();
+          }
+        }
+      }
+    }),
+    [currentBlockIndex, expandedBlocks, seekTo, pause]
+  );
+  useEffect7(() => {
+    onPlaybackStateChange?.(playbackState);
+  }, [playbackState, onPlaybackStateChange]);
+  useEffect7(() => {
+    onControlsReady?.({ play, pause, ...playbackActions });
+  }, [play, pause, playbackActions, onControlsReady]);
+  const getBlockTitle = useCallback4((block) => {
+    const docBlock = block;
+    if (isTemplateBlock2(docBlock)) {
+      const props = docBlock;
+      if (typeof props.title === "string") return props.title;
+      if (typeof props.stat === "string") return props.stat;
+      if (typeof props.quote === "string") {
+        const firstLine = props.quote.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+      if (typeof props.date === "string") return props.date;
+      if (typeof props.fact === "string") return props.fact;
+    }
+    if (block.layers && Array.isArray(block.layers)) {
+      const textLayer = block.layers.find((l) => l.type === "text");
+      if (textLayer?.content?.text) {
+        const firstLine = textLayer.content.text.split("\n")[0];
+        if (firstLine.length <= 30) return firstLine;
+        return firstLine.slice(0, 27) + "...";
+      }
+    }
+    return block.id.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }, []);
+  const blockMarkers = useMemo5(() => {
+    if (!totalDuration || !expandedBlocks.length) return [];
+    let prevSegment = -1;
+    return expandedBlocks.map((block, index) => {
+      const isSectionStart = block.audioSegment !== prevSegment;
+      prevSegment = block.audioSegment;
+      return {
+        block,
+        index,
+        position: block.startTime / totalDuration * 100,
+        title: getBlockTitle(block),
+        isSectionStart
+      };
+    });
+  }, [expandedBlocks, totalDuration, getBlockTitle]);
+  useEffect7(() => {
+    if (blockMarkers.length > 0) {
+      onBlockMarkers?.(blockMarkers);
+    }
+  }, [blockMarkers, onBlockMarkers]);
+  expandedBlocksLenRef.current = expandedBlocks.length;
+  const handleKeyDown = useCallback4(
+    (e) => {
+      const activeEl = document.activeElement;
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.tagName === "SELECT")) {
+        return;
+      }
+      if (isLinearMode) return;
+      if (isSlideshowMode) {
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowDown":
+          case " ":
+            e.preventDefault();
+            slideNavActions.nextSlide();
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            slideNavActions.prevSlide();
+            break;
+          case "Home":
+            e.preventDefault();
+            slideNavActions.goToSlide(0);
+            break;
+          case "End":
+            e.preventDefault();
+            slideNavActions.goToSlide(expandedBlocksLenRef.current - 1);
+            break;
+        }
+      } else {
+        switch (e.key) {
+          case " ":
+            e.preventDefault();
+            toggle();
+            break;
+          case "ArrowRight":
+            seekTo(Math.min(currentTimeRef.current + 10, totalDurationRef.current));
+            break;
+          case "ArrowLeft":
+            seekTo(Math.max(currentTimeRef.current - 10, 0));
+            break;
+        }
+      }
+    },
+    [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions]
+  );
+  useEffect7(() => {
+    if (renderMode) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown, renderMode]);
+  if (isLinearMode) {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: containerRef,
+        className: "doc-player doc-player--linear",
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx13(LinearDocView, { doc: script, basePath, viewport: activeViewport })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: containerRef,
+      className: "doc-player",
+      onClick: handleContainerClick,
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
+        margin: "0 auto",
+        overflow: "hidden",
+        cursor: renderMode ? void 0 : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx13("audio", { ref: audioRef, preload: "auto", muted }),
+        /* @__PURE__ */ jsxs10("div", { className: "doc-player__viewport", children: [
+          showCoverBlock && coverBlock && /* @__PURE__ */ jsx13("div", { className: "doc-player__block doc-player__block--cover", children: /* @__PURE__ */ jsx13(
+            BlockRenderer,
+            {
+              block: coverBlock,
+              blockTime: 0,
+              basePath,
+              isEntering: false,
+              viewport: activeViewport
+            }
+          ) }),
+          !showCoverBlock && previousBlock && isExiting && /* @__PURE__ */ jsx13("div", { className: "doc-player__block doc-player__block--previous", children: /* @__PURE__ */ jsx13(
+            BlockRenderer,
+            {
+              block: previousBlock,
+              blockTime,
+              basePath,
+              isExiting: true,
+              viewport: activeViewport
+            }
+          ) }),
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx13("div", { className: "doc-player__block doc-player__block--active", children: /* @__PURE__ */ jsx13(
+            BlockRenderer,
+            {
+              block: currentBlock,
+              blockTime,
+              basePath,
+              isEntering,
+              viewport: activeViewport,
+              isPlaying
+            }
+          ) }),
+          hasCaptions && !renderMode && /* @__PURE__ */ jsx13(
+            CaptionOverlay,
+            {
+              captions: script.captions,
+              currentTime,
+              enabled: captionsEnabled && (isPlaying || currentTime > 0),
+              fontSize: 16
+            }
+          ),
+          isDebugMode && /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: "doc-player__debug",
+              style: {
+                position: "absolute",
+                top: "8px",
+                right: "8px",
+                padding: "8px 12px",
+                background: "rgba(0, 0, 0, 0.85)",
+                borderRadius: "6px",
+                color: "#00ff00",
+                fontFamily: "monospace",
+                fontSize: "11px",
+                lineHeight: "1.5",
+                zIndex: 200,
+                maxWidth: "280px",
+                pointerEvents: "none",
+                textAlign: "left"
+              },
+              children: [
+                /* @__PURE__ */ jsx13("div", { style: { color: "#ffcc00", fontWeight: "bold", marginBottom: "4px" }, children: "DEBUG MODE" }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "template:" }),
+                  " ",
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#ff6b6b" }, children: currentBlock?.template ?? "raw" })
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "block:" }),
+                  " ",
+                  currentBlockIndex + 1,
+                  "/",
+                  expandedBlocks.length,
+                  " ",
+                  /* @__PURE__ */ jsxs10("span", { style: { color: "#666" }, children: [
+                    "(",
+                    currentBlock?.id || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "time:" }),
+                  " ",
+                  currentTime.toFixed(2),
+                  "s /",
+                  " ",
+                  totalDuration.toFixed(1),
+                  "s"
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "blockTime:" }),
+                  " ",
+                  blockTime.toFixed(2),
+                  "s /",
+                  " ",
+                  (currentBlock?.duration || 0).toFixed(1),
+                  "s"
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "segment:" }),
+                  " ",
+                  currentSegment,
+                  "/",
+                  script.audio.segments.length - 1,
+                  " ",
+                  /* @__PURE__ */ jsxs10("span", { style: { color: "#666" }, children: [
+                    "(",
+                    script.audio.segments[currentSegment]?.name || "none",
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "viewport:" }),
+                  " ",
+                  activeViewport.name || `${activeViewport.width}x${activeViewport.height}`,
+                  " ",
+                  /* @__PURE__ */ jsxs10("span", { style: { color: "#666" }, children: [
+                    "(",
+                    orientation,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "playing:" }),
+                  " ",
+                  /* @__PURE__ */ jsx13("span", { style: { color: isPlaying ? "#4ade80" : "#f87171" }, children: isPlaying ? "yes" : "no" }),
+                  showCoverBlock && /* @__PURE__ */ jsx13("span", { style: { color: "#60a5fa" }, children: " (cover)" })
+                ] }),
+                hasCaptions && (() => {
+                  const debugPhrase = getCaptionAtTime2(script.captions, currentTime);
+                  const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
+                  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "captions:" }),
+                      " ",
+                      script.captions?.phrases.length || 0,
+                      " phrases",
+                      " ",
+                      /* @__PURE__ */ jsxs10("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
+                        "(",
+                        captionsEnabled ? "on" : "off",
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "cc.enabled:" }),
+                      " ",
+                      /* @__PURE__ */ jsx13("span", { style: { color: debugEnabled ? "#4ade80" : "#f87171" }, children: String(debugEnabled) }),
+                      " ",
+                      /* @__PURE__ */ jsxs10("span", { style: { color: "#666" }, children: [
+                        "(playing=",
+                        String(isPlaying),
+                        " t>0=",
+                        String(currentTime > 0),
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "cc.phrase:" }),
+                      " ",
+                      /* @__PURE__ */ jsx13("span", { style: { color: debugPhrase ? "#4ade80" : "#f87171" }, children: debugPhrase ? `"${debugPhrase.text.slice(0, 30)}..."` : "null" })
+                    ] }),
+                    debugPhrase && /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx13("span", { style: { color: "#888" }, children: "cc.range:" }),
+                      " ",
+                      /* @__PURE__ */ jsxs10("span", { style: { color: "#60a5fa" }, children: [
+                        debugPhrase.startTime.toFixed(2),
+                        "-",
+                        debugPhrase.endTime.toFixed(2)
+                      ] })
+                    ] })
+                  ] });
+                })()
+              ]
+            }
+          )
+        ] }),
+        !isAvailable && unavailableMessage && /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: "doc-player__unavailable",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "16px",
+              background: "rgba(0, 0, 0, 0.7)",
+              color: "rgba(255, 255, 255, 0.9)",
+              fontSize: "14px",
+              zIndex: 50
+            },
+            children: [
+              /* @__PURE__ */ jsx13("span", { style: { fontSize: "32px" }, children: "\u{1F50A}" }),
+              /* @__PURE__ */ jsx13("span", { children: unavailableMessage })
+            ]
+          }
+        ),
+        !renderMode && !isSlideshowMode && showControls && /* @__PURE__ */ jsx13(
+          DocControlsOverlay,
+          {
+            state: playbackState,
+            actions: playbackActions,
+            blockMarkers,
+            expandedBlocks,
+            getBlockTitle
+          }
+        ),
+        !renderMode && !isSlideshowMode && !showControls && showScrubber && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: "doc-player__scrubber",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              padding: "12px 16px 8px",
+              background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
+              display: "flex",
+              alignItems: "center",
+              zIndex: 100
+            },
+            children: /* @__PURE__ */ jsx13(
+              DocProgressBar,
+              {
+                state: playbackState,
+                actions: playbackActions,
+                blockMarkers,
+                expandedBlocks,
+                getBlockTitle
+              }
+            )
+          }
+        ),
+        !renderMode && isSlideshowMode && /* @__PURE__ */ jsx13(DocControlsSlideshow, { state: playbackState, slideNav: slideNavActions }),
+        !isSlideshowMode && tapFeedback && /* @__PURE__ */ jsx13("div", { className: "doc-player__tap-feedback", children: /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 24 24", fill: "white", width: "48", height: "48", children: tapFeedback === "pause" ? /* @__PURE__ */ jsx13("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) : /* @__PURE__ */ jsx13("path", { d: "M8 5v14l11-7z" }) }) }, Date.now())
+      ]
+    }
+  );
+}
+
+// src/DocControlsBottom.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function DocControlsBottom({
+  state,
+  actions,
+  blockMarkers,
+  expandedBlocks,
+  getBlockTitle
+}) {
+  return /* @__PURE__ */ jsxs11("div", { className: "doc-controls-bottom", children: [
+    /* @__PURE__ */ jsx14(
+      "button",
+      {
+        className: "bottom-ctrl-btn",
+        onClick: actions.restart,
+        title: "Restart",
+        "aria-label": "Restart from beginning",
+        children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "button",
+      {
+        className: "bottom-ctrl-btn bottom-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        children: state.isPlaying ? /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx14("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs11("span", { className: "bottom-time", children: [
+      formatTime(state.currentTime),
+      " / ",
+      formatTime(state.totalDuration)
+    ] }),
+    /* @__PURE__ */ jsx14(
+      DocProgressBar,
+      {
+        state,
+        actions,
+        blockMarkers,
+        expandedBlocks,
+        getBlockTitle
+      }
+    ),
+    /* @__PURE__ */ jsxs11("span", { className: "bottom-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    state.hasCaptions && /* @__PURE__ */ jsx14(
+      "button",
+      {
+        className: `bottom-ctrl-btn ${state.captionsEnabled ? "bottom-ctrl-btn--active" : ""}`,
+        onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled),
+        title: state.captionsEnabled ? "Hide captions" : "Show captions",
+        "aria-label": state.captionsEnabled ? "Hide captions" : "Show captions",
+        children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx14("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+      }
+    )
+  ] });
+}
+
+// src/DocControlsSidebar.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function DocControlsSidebar({ state, actions }) {
+  return /* @__PURE__ */ jsxs12("div", { className: "doc-controls-sidebar", children: [
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        className: "sidebar-ctrl-btn",
+        onClick: actions.restart,
+        title: "Restart",
+        "aria-label": "Restart from beginning",
+        children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "button",
+      {
+        className: "sidebar-ctrl-btn sidebar-play-btn",
+        onClick: actions.toggle,
+        "aria-label": state.isPlaying ? "Pause" : "Play",
+        children: state.isPlaying ? /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx15("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }) : /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: /* @__PURE__ */ jsx15("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { className: "sidebar-time", children: [
+      /* @__PURE__ */ jsx15("div", { children: formatTime(state.currentTime) }),
+      /* @__PURE__ */ jsx15("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "sidebar-segment", children: [
+      state.currentBlockIndex + 1,
+      "/",
+      state.totalBlocks
+    ] }),
+    state.hasCaptions && /* @__PURE__ */ jsx15(
+      "button",
+      {
+        className: `sidebar-ctrl-btn ${state.captionsEnabled ? "sidebar-ctrl-btn--active" : ""}`,
+        onClick: () => actions.setCaptionsEnabled(!state.captionsEnabled),
+        title: state.captionsEnabled ? "Hide captions" : "Show captions",
+        "aria-label": state.captionsEnabled ? "Hide captions" : "Show captions",
+        children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) })
+      }
+    ),
+    actions.toggleFullscreen && /* @__PURE__ */ jsx15(
+      "button",
+      {
+        className: `sidebar-ctrl-btn ${state.isFullscreen ? "sidebar-ctrl-btn--active" : ""}`,
+        onClick: actions.toggleFullscreen,
+        title: state.isFullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)",
+        "aria-label": state.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        children: state.isFullscreen ? /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) }) : /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx15("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+      }
+    )
+  ] });
+}
+
+// src/DocPlayerWithSidebar.tsx
+import { useRef as useRef6, useState as useState8, useCallback as useCallback5, useEffect as useEffect8 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var DEFAULT_STATE = {
+  isPlaying: false,
+  currentTime: 0,
+  totalDuration: 0,
+  currentBlockIndex: 0,
+  totalBlocks: 0,
+  docProgress: 0,
+  hasCaptions: false,
+  captionsEnabled: false,
+  currentSegmentIndex: 0,
+  currentSegmentName: null,
+  currentBlock: null
+};
+function DocPlayerWithSidebar({
+  script,
+  basePath,
+  autoPlay = false,
+  onEnded,
+  onTimeUpdate,
+  audioProvider,
+  muted,
+  captionsEnabled,
+  isFullscreen,
+  onFullscreenToggle,
+  forceViewport,
+  onPlayingChange
+}) {
+  const stateRef = useRef6(DEFAULT_STATE);
+  const actionsRef = useRef6(null);
+  const wasPlayingRef = useRef6(false);
+  const [, setTick] = useState8(0);
+  const handleStateChange = useCallback5(
+    (state) => {
+      stateRef.current = state;
+      if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
+        wasPlayingRef.current = state.isPlaying;
+        onPlayingChange(state.isPlaying);
+      }
+    },
+    [onPlayingChange]
+  );
+  const handleControlsReady = useCallback5(
+    (controls) => {
+      const isFirst = !actionsRef.current;
+      actionsRef.current = controls;
+      if (isFirst) setTick((t) => t + 1);
+    },
+    []
+  );
+  useEffect8(() => {
+    const interval = setInterval(() => {
+      setTick((t) => t + 1);
+    }, 250);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs13("div", { className: "doc-player-sidebar-layout", children: [
+    /* @__PURE__ */ jsx16("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx16(
+      DocPlayer,
+      {
+        script,
+        basePath,
+        autoPlay,
+        onEnded,
+        onTimeUpdate,
+        audioProvider,
+        muted,
+        captionsEnabled,
+        showControls: isFullscreen,
+        showScrubber: !isFullscreen,
+        onPlaybackStateChange: handleStateChange,
+        onControlsReady: handleControlsReady,
+        isFullscreen,
+        onFullscreenToggle,
+        forceViewport
+      }
+    ) }),
+    actionsRef.current && /* @__PURE__ */ jsx16(DocControlsSidebar, { state: stateRef.current, actions: actionsRef.current })
+  ] });
+}
+export {
+  BlockRenderer,
+  CaptionOverlay,
+  DocControlsBottom,
+  DocControlsOverlay,
+  DocControlsSidebar,
+  DocControlsSlideshow,
+  DocPlayer,
+  DocPlayerWithSidebar,
+  DocProgressBar,
+  ImageLayer,
+  LinearDocView,
+  MapLayer,
+  MarkdownRenderer,
+  MediaContext,
+  ShapeLayer,
+  TextLayer,
+  VIEWPORT,
+  VideoLayer,
+  formatTime,
+  getAnimationStyle,
+  getTransitionClass,
+  useAudioSync,
+  useDocPlayback,
+  useMediaProvider,
+  useMediaUrl,
+  useViewportOrientation
+};
+//# sourceMappingURL=index.js.map