@bendyline/squisq-react 0.1.2 → 1.0.1

package/dist/index.js

@@ -1,3180 +1,27 @@
-// 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
-};
+// Main components
+export { DocPlayer } from './DocPlayer.js';
+export { BlockRenderer, VIEWPORT } from './BlockRenderer.js';
+export { CaptionOverlay } from './CaptionOverlay.js';
+export { DocControlsOverlay } from './DocControlsOverlay.js';
+export { DocControlsBottom } from './DocControlsBottom.js';
+export { DocControlsSidebar } from './DocControlsSidebar.js';
+export { DocControlsSlideshow } from './DocControlsSlideshow.js';
+export { DocPlayerWithSidebar } from './DocPlayerWithSidebar.js';
+export { DocProgressBar } from './DocProgressBar.js';
+export { MarkdownRenderer } from './MarkdownRenderer.js';
+export { LinearDocView } from './LinearDocView.js';
+// Layer components
+export { ImageLayer } from './layers/ImageLayer.js';
+export { TextLayer } from './layers/TextLayer.js';
+export { ShapeLayer } from './layers/ShapeLayer.js';
+export { VideoLayer } from './layers/VideoLayer.js';
+export { MapLayer } from './layers/MapLayer.js';
+// Hooks
+export { useAudioSync } from './hooks/useAudioSync.js';
+export { useDocPlayback } from './hooks/useDocPlayback.js';
+export { useViewportOrientation } from './hooks/useViewportOrientation.js';
+export { MediaContext, useMediaProvider, useMediaUrl } from './hooks/MediaContext.js';
+export { formatTime } from './types.js';
+// Utilities
+export { getAnimationStyle, getTransitionClass } from './utils/animationUtils.js';
 //# sourceMappingURL=index.js.map