@sebastianwessel/isostate 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,51 +1,449 @@
-export { A as AnimationController, a as AnimationEngine, e as easeInCubic, b as easeInOutCubic, c as easeOutCubic, l as linear, m as mountScene, r as resolveEasing } from './chunks/index-C3qcXbPI.js';
-export { A as AssetRegistryImpl, D as DEFAULT_CELL_SIZE, c as applyThemeToElement, d as buildSceneDOM, e as calculateTransform, f as calculateVisualSize, g as composeTheme, h as createAssetRegistry, i as createDefaultRegistry, r as projectToScreen, s as resolveTheme } from './chunks/rendering-engine-BUUV3Qq-.js';
-export { A as AnimationError, C as ControllerError, P as ParseError, R as RenderError, V as ValidationErrorClass } from './chunks/errors-DyqEkrm5.js';
-import './chunks/sha256-4JuurR-b.js';
+export { A as AnimationController, a as AnimationEngine, e as easeInCubic, b as easeInOutCubic, c as easeOutCubic, l as linear, m as mountScene, r as resolveEasing } from './chunks/index-WmsNtuaZ.js';
+import { g as getResolvedProjectionLayout, a as getResolvedViewBox, f as projectToScreen, e as updateElementTransforms, b as getElementState, h as hideElementAfterExit, u as unhideElementOnReadd, d as getConnectorState } from './chunks/rendering-engine-DLaM1XbU.js';
+export { A as AssetRegistryImpl, D as DEFAULT_CELL_SIZE, i as applyThemeToElement, j as buildSceneDOM, k as calculateTransform, l as calculateVisualSize, m as composeTheme, n as createAssetRegistry, o as createDefaultRegistry, r as resolveTheme } from './chunks/rendering-engine-DLaM1XbU.js';
+import { R as RenderError } from './chunks/errors-2yA81Vfb.js';
+export { A as AnimationError, C as ControllerError, P as ParseError, V as ValidationErrorClass } from './chunks/errors-2yA81Vfb.js';
+import './chunks/sha256-BkgWUdh1.js';
 
-/** Runtime set of valid entry animation strings */
-const ENTRY_ANIMATIONS = new Set([
-    "fade-in",
-    "fade-in-grow",
-    "fall-in",
-    "rise-from-ground",
-    "slide-in-left",
-    "slide-in-right",
-    "flip-in",
-    "none",
+const ENTRY_ANIMATIONS = /* @__PURE__ */ new Set([
+  "fade-in",
+  "fade-in-grow",
+  "fall-in",
+  "rise-from-ground",
+  "slide-in-left",
+  "slide-in-right",
+  "flip-in",
+  "none"
 ]);
-/** Runtime set of valid exit animation strings */
-const EXIT_ANIMATIONS = new Set([
-    "fade-out",
-    "fade-out-shrink",
-    "fall-through-ground",
-    "rise-away",
-    "slide-out-left",
-    "slide-out-right",
-    "flip-out",
-    "none",
+const EXIT_ANIMATIONS = /* @__PURE__ */ new Set([
+  "fade-out",
+  "fade-out-shrink",
+  "fall-through-ground",
+  "rise-away",
+  "slide-out-left",
+  "slide-out-right",
+  "flip-out",
+  "none"
 ]);
-/** Runtime set of valid lifecycle status strings */
-const LIFECYCLE_STATUSES = new Set(["entering", "present", "exiting", "removed"]);
-// ── Type guards ──────────────────────────────────────────────────────────────
-/** Narrow a raw string to EntryAnimation. Returns undefined if invalid. */
+const LIFECYCLE_STATUSES = /* @__PURE__ */ new Set(["entering", "present", "exiting", "removed"]);
 function guardEntryAnimation(v) {
-    if (typeof v !== "string")
-        return undefined;
-    return ENTRY_ANIMATIONS.has(v) ? v : undefined;
+  if (typeof v !== "string") return void 0;
+  return ENTRY_ANIMATIONS.has(v) ? v : void 0;
 }
-/** Narrow a raw string to ExitAnimation. Returns undefined if invalid. */
 function guardExitAnimation(v) {
-    if (typeof v !== "string")
-        return undefined;
-    return EXIT_ANIMATIONS.has(v) ? v : undefined;
+  if (typeof v !== "string") return void 0;
+  return EXIT_ANIMATIONS.has(v) ? v : void 0;
 }
-/** Narrow a raw string to LifecycleStatus. Returns undefined if invalid. */
 function guardLifecycleStatus(v) {
-    if (typeof v !== "string")
-        return undefined;
-    return LIFECYCLE_STATUSES.has(v) ? v : undefined;
+  if (typeof v !== "string") return void 0;
+  return LIFECYCLE_STATUSES.has(v) ? v : void 0;
 }
 
-export { guardEntryAnimation, guardExitAnimation, guardLifecycleStatus };
+const SVG_NS = "http://www.w3.org/2000/svg";
+const DIAGNOSTICS_ATTR = "data-iso-diagnostics";
+const GRID_STROKE = "var(--iso-diag-grid, rgba(37, 99, 235, 0.35))";
+const TEXT_FILL = "var(--iso-diag-text, #1e3a8a)";
+const ANCHOR_FILL = "var(--iso-diag-anchor, #dc2626)";
+const ROUTE_FILL = "var(--iso-diag-route, #059669)";
+const registryBySvg = /* @__PURE__ */ new WeakMap();
+function attachDiagnosticsOverlay(mounted, options = {}) {
+  assertMounted(mounted);
+  const registry = registryBySvg.get(mounted.svg) ?? {};
+  registryBySvg.set(mounted.svg, registry);
+  registry.current?.handle.destroy();
+  const token = /* @__PURE__ */ Symbol("diagnostics-overlay");
+  const group = document.createElementNS(SVG_NS, "g");
+  group.setAttribute(DIAGNOSTICS_ATTR, "");
+  mounted.svg.appendChild(group);
+  const render = () => renderOverlay(group, mounted, options);
+  render();
+  const unsubscribe = subscribeToLiveUpdates(mounted, render);
+  const isCurrent = () => registry.current?.token === token;
+  const handle = {
+    update() {
+      if (!isCurrent()) return;
+      render();
+    },
+    destroy() {
+      if (!isCurrent()) return;
+      unsubscribe();
+      group.parentNode?.removeChild(group);
+      registry.current = void 0;
+    }
+  };
+  registry.current = { token, handle };
+  return handle;
+}
+function assertMounted(mounted) {
+  if (!mounted.svg.isConnected) {
+    throw new RenderError("MOUNT_DESTROYED", "Cannot attach a diagnostics overlay to a destroyed mount");
+  }
+}
+function subscribeToLiveUpdates(mounted, render) {
+  const controller = mounted.controller;
+  if (!controller) return () => void 0;
+  const onProgressChange = () => render();
+  const onCameraChange = () => render();
+  controller.on("progress-change", onProgressChange);
+  controller.on("camera-change", onCameraChange);
+  return () => {
+    controller.off("progress-change", onProgressChange);
+    controller.off("camera-change", onCameraChange);
+  };
+}
+function renderOverlay(group, mounted, options) {
+  clearChildren(group);
+  const bundle = mounted.engine.bundle;
+  if (!bundle) return;
+  const layout = getResolvedProjectionLayout(bundle);
+  const project = (x, y) => {
+    const screen = projectToScreen(
+      x,
+      y,
+      layout.cellSize,
+      layout.selectedBounds.minX,
+      layout.selectedBounds.minY,
+      layout.padding.x,
+      layout.padding.y
+    );
+    return { x: screen.screenX, y: screen.screenY };
+  };
+  const showGrid = options.grid ?? true;
+  const showCoordinates = options.coordinates ?? false;
+  const showAnchors = options.anchors ?? true;
+  const showRoutes = options.routes ?? true;
+  const showReadout = options.readout ?? true;
+  if (showGrid) appendGrid(group, bundle, project);
+  if (showCoordinates) appendCoordinates(group, bundle, project);
+  if (showAnchors) appendAnchors(group, mounted, project);
+  if (showRoutes) appendRoutes(group, mounted, project);
+  if (showReadout) appendReadout(group, mounted, bundle);
+}
+function appendGrid(group, bundle, project) {
+  const [originX, originY] = bundle.floor.origin;
+  const [columns, rows] = bundle.floor.size;
+  for (let x = 0; x <= columns; x++) {
+    appendGridLine(group, project(originX + x, originY), project(originX + x, originY + rows));
+  }
+  for (let y = 0; y <= rows; y++) {
+    appendGridLine(group, project(originX, originY + y), project(originX + columns, originY + y));
+  }
+}
+function appendGridLine(group, start, end) {
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", `M ${start.x} ${start.y} L ${end.x} ${end.y}`);
+  path.setAttribute("stroke", GRID_STROKE);
+  path.setAttribute("stroke-width", "1");
+  path.setAttribute("fill", "none");
+  path.setAttribute("vector-effect", "non-scaling-stroke");
+  group.appendChild(path);
+}
+function appendCoordinates(group, bundle, project) {
+  const [originX, originY] = bundle.floor.origin;
+  const [columns, rows] = bundle.floor.size;
+  for (let x = 0; x <= columns; x++) {
+    for (let y = 0; y <= rows; y++) {
+      const gridX = originX + x;
+      const gridY = originY + y;
+      const point = project(gridX, gridY);
+      const text = document.createElementNS(SVG_NS, "text");
+      text.setAttribute("x", String(point.x));
+      text.setAttribute("y", String(point.y));
+      text.setAttribute("font-size", "8");
+      text.setAttribute("fill", TEXT_FILL);
+      text.textContent = `${gridX},${gridY}`;
+      group.appendChild(text);
+    }
+  }
+}
+function appendAnchors(group, mounted, project) {
+  for (const element of mounted.engine.getFrameUpdates()) {
+    if (element.lifecycle === "removed") continue;
+    const point = project(element.pos[0] + element.size, element.pos[1] + element.size);
+    const circle = document.createElementNS(SVG_NS, "circle");
+    circle.setAttribute("cx", String(point.x));
+    circle.setAttribute("cy", String(point.y));
+    circle.setAttribute("r", "3");
+    circle.setAttribute("fill", ANCHOR_FILL);
+    group.appendChild(circle);
+  }
+}
+function appendRoutes(group, mounted, project) {
+  for (const connector of mounted.engine.getConnectorFrameUpdates()) {
+    if (connector.lifecycle === "removed") continue;
+    for (const [x, y] of connector.route) {
+      const point = project(x, y);
+      const rect = document.createElementNS(SVG_NS, "rect");
+      rect.setAttribute("x", String(point.x - 2));
+      rect.setAttribute("y", String(point.y - 2));
+      rect.setAttribute("width", "4");
+      rect.setAttribute("height", "4");
+      rect.setAttribute("fill", ROUTE_FILL);
+      group.appendChild(rect);
+    }
+  }
+}
+function appendReadout(group, mounted, bundle) {
+  const viewBox = mounted.controller ? mounted.controller.getCameraState().viewBox : getResolvedViewBox(bundle);
+  const progress = mounted.controller ? mounted.controller.getProgress() : mounted.engine.getProgress();
+  const sceneId = mounted.controller ? mounted.engine.getCurrentState()?.id : void 0;
+  const text = document.createElementNS(SVG_NS, "text");
+  text.setAttribute("x", String(viewBox.minX + 4));
+  text.setAttribute("y", String(viewBox.minY + 10));
+  text.setAttribute("font-size", "10");
+  text.setAttribute("fill", TEXT_FILL);
+  text.textContent = sceneId ? `scene ${sceneId} \xB7 progress ${roundProgress(progress)}` : `progress ${roundProgress(progress)}`;
+  group.appendChild(text);
+}
+function roundProgress(progress) {
+  return Math.round(progress * 1e3) / 1e3;
+}
+function clearChildren(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
+const DIAGNOSTICS_OVERLAY_SELECTOR = "[data-iso-diagnostics]";
+async function exportSceneSvg(mounted, options = {}) {
+  assertNotDestroyed(mounted);
+  assertValidSnapshotOptions(options);
+  return withRestoredProgress(mounted, options.progress, async () => {
+    const clone = prepareClone(mounted.svg, options);
+    if (options.inlineAssets ?? true) {
+      await inlineImageAssets(clone);
+    }
+    return serializeSvg(clone);
+  });
+}
+async function exportScenePng(mounted, options = {}) {
+  assertNotDestroyed(mounted);
+  assertValidPngSnapshotOptions(options);
+  const scale = options.scale ?? 2;
+  return withRestoredProgress(mounted, options.progress, async () => {
+    const clone = prepareClone(mounted.svg, options);
+    await inlineImageAssets(clone);
+    const svgString = serializeSvg(clone);
+    const viewBox = readViewBox(clone);
+    return rasterize(svgString, viewBox, scale);
+  });
+}
+function assertNotDestroyed(mounted) {
+  if (!mounted.svg.isConnected) {
+    throw new RenderError("EXPORT_TARGET_DESTROYED", "Cannot export a scene whose mount was destroyed");
+  }
+}
+function assertValidSnapshotOptions(options) {
+  if (options.progress !== void 0 && !isValidProgress(options.progress)) {
+    throw new RenderError("EXPORT_INVALID_OPTIONS", "progress must be a finite number within [0, 1]", {
+      progress: options.progress
+    });
+  }
+}
+function assertValidPngSnapshotOptions(options) {
+  assertValidSnapshotOptions(options);
+  if (options.scale !== void 0 && !isValidScale(options.scale)) {
+    throw new RenderError("EXPORT_INVALID_OPTIONS", "scale must be a finite number greater than 0", {
+      scale: options.scale
+    });
+  }
+  if (options.inlineAssets === false) {
+    throw new RenderError(
+      "EXPORT_INVALID_OPTIONS",
+      "exportScenePng() always inlines assets; inlineAssets: false is unsupported for PNG export"
+    );
+  }
+}
+function isValidProgress(progress) {
+  return Number.isFinite(progress) && progress >= 0 && progress <= 1;
+}
+function isValidScale(scale) {
+  return Number.isFinite(scale) && scale > 0;
+}
+async function withRestoredProgress(mounted, progress, run) {
+  if (progress === void 0) {
+    return run();
+  }
+  const previousProgress = mounted.engine.getProgress();
+  try {
+    mounted.engine.setProgress(progress);
+    applyControllerFrame(mounted);
+    return await run();
+  } finally {
+    mounted.engine.setProgress(previousProgress);
+    applyControllerFrame(mounted);
+  }
+}
+function applyControllerFrame(mounted) {
+  const svg = mounted.svg;
+  const elementUpdates = mounted.engine.getFrameUpdates().map(
+    (update) => ({
+      id: update.id,
+      asset: update.asset,
+      pos: update.pos,
+      size: update.size,
+      layer: update.layer,
+      presence: update.lifecycle,
+      enter: update.entry,
+      exit: update.exit,
+      ambient: update.ambient,
+      text: update.text,
+      primitive: update.primitive,
+      activity: update.activity
+    })
+  );
+  const connectorUpdates = mounted.engine.getConnectorFrameUpdates().map(
+    (update) => ({
+      id: update.id,
+      route: update.route,
+      layer: update.layer,
+      presence: update.lifecycle,
+      style: update.style,
+      start: update.start,
+      end: update.end,
+      direction: update.direction,
+      message: update.message,
+      enter: update.entry,
+      exit: update.exit,
+      ambient: update.ambient
+    })
+  );
+  updateElementTransforms(svg, elementUpdates, connectorUpdates);
+  applyElementVisibility(svg, elementUpdates);
+  applyConnectorVisibility(svg, connectorUpdates);
+}
+function applyElementVisibility(svg, elements) {
+  for (const element of elements) {
+    const state = getElementState(svg, element.id);
+    if (!state) continue;
+    if (element.presence === "removed") {
+      state.isHidden = true;
+      hideElementAfterExit(state.node);
+    } else if (state.isHidden) {
+      state.isHidden = false;
+      unhideElementOnReadd(state.node);
+    }
+  }
+}
+function applyConnectorVisibility(svg, connectors) {
+  for (const connector of connectors) {
+    const state = getConnectorState(svg, connector.id);
+    if (!state) continue;
+    if (connector.presence === "removed") {
+      state.isHidden = true;
+      hideElementAfterExit(state.node);
+    } else if (state.isHidden) {
+      state.isHidden = false;
+      unhideElementOnReadd(state.node);
+    }
+  }
+}
+function prepareClone(svg, options) {
+  const clone = svg.cloneNode(true);
+  const viewBox = readViewBox(clone);
+  clone.setAttribute("width", String(viewBox.width));
+  clone.setAttribute("height", String(viewBox.height));
+  clone.setAttribute("xmlns", SVG_NAMESPACE);
+  clone.setAttribute("xmlns:xlink", XLINK_NAMESPACE);
+  if (options.background) {
+    const rect = document.createElementNS(SVG_NAMESPACE, "rect");
+    rect.setAttribute("x", String(viewBox.minX));
+    rect.setAttribute("y", String(viewBox.minY));
+    rect.setAttribute("width", String(viewBox.width));
+    rect.setAttribute("height", String(viewBox.height));
+    rect.setAttribute("fill", options.background);
+    insertAsFirstChild(clone, rect);
+  }
+  const diagnosticsOverlay = clone.querySelector(DIAGNOSTICS_OVERLAY_SELECTOR);
+  diagnosticsOverlay?.parentNode?.removeChild(diagnosticsOverlay);
+  return clone;
+}
+function insertAsFirstChild(parent, child) {
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+}
+function readViewBox(svg) {
+  const raw = svg.getAttribute("viewBox");
+  const parts = (raw ?? "").trim().split(/\s+/).map(Number);
+  if (parts.length !== 4 || parts.some((part) => !Number.isFinite(part))) {
+    return { minX: 0, minY: 0, width: 0, height: 0 };
+  }
+  const [minX, minY, width, height] = parts;
+  return { minX, minY, width, height };
+}
+async function inlineImageAssets(clone) {
+  const images = [...clone.querySelectorAll("image")];
+  await Promise.all(images.map((image) => inlineImageHref(image)));
+}
+async function inlineImageHref(image) {
+  const href = image.getAttribute("href") ?? image.getAttributeNS(XLINK_NAMESPACE, "href");
+  if (!href || href.startsWith("data:")) return;
+  const dataUri = await fetchAsDataUri(href);
+  image.setAttribute("href", dataUri);
+  image.setAttributeNS(XLINK_NAMESPACE, "href", dataUri);
+}
+async function fetchAsDataUri(url) {
+  let response;
+  try {
+    response = await fetch(url);
+  } catch {
+    throw new RenderError("EXPORT_ASSET_FETCH_FAILED", `Failed to fetch asset for inlining: ${url}`, { url });
+  }
+  if (!response.ok) {
+    throw new RenderError("EXPORT_ASSET_FETCH_FAILED", `Failed to fetch asset for inlining: ${url}`, { url });
+  }
+  const contentType = response.headers.get("content-type") ?? "application/octet-stream";
+  const buffer = await response.arrayBuffer();
+  return `data:${contentType};base64,${arrayBufferToBase64(buffer)}`;
+}
+function arrayBufferToBase64(buffer) {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+function serializeSvg(clone) {
+  const serializer = new XMLSerializer();
+  return `<?xml version="1.0" encoding="UTF-8"?>
+${serializer.serializeToString(clone)}`;
+}
+async function rasterize(svgString, viewBox, scale) {
+  const width = Math.ceil(viewBox.width * scale);
+  const height = Math.ceil(viewBox.height * scale);
+  const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
+  const objectUrl = URL.createObjectURL(svgBlob);
+  try {
+    const image = await loadImage(objectUrl);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new RenderError("EXPORT_RASTERIZE_FAILED", "Canvas 2D context is unavailable");
+    }
+    context.drawImage(image, 0, 0, width, height);
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob(resolve, "image/png");
+    });
+    if (!blob) {
+      throw new RenderError("EXPORT_RASTERIZE_FAILED", "Canvas failed to encode PNG output");
+    }
+    return blob;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new RenderError("EXPORT_RASTERIZE_FAILED", "Failed to load rasterization source image"));
+    image.src = src;
+  });
+}
+
+export { RenderError, attachDiagnosticsOverlay, exportScenePng, exportSceneSvg, guardEntryAnimation, guardExitAnimation, guardLifecycleStatus, projectToScreen };
 //# sourceMappingURL=index.js.map