stickyflow 0.0.0-stage → 0.2.0

package/dist/chunk-IIOJFR73.cjs

@@ -0,0 +1,3671 @@
+'use strict';
+
+var chunkS5BVAAEF_cjs = require('./chunk-S5BVAAEF.cjs');
+var chunk34PK7HEU_cjs = require('./chunk-34PK7HEU.cjs');
+
+// src/runtime/viewer/display/rootAttributesPatch.ts
+var CAMERA_OWNED_ATTRIBUTES = /* @__PURE__ */ new Set(["viewbox", "width", "height"]);
+function patchRootAttributes(svg, next) {
+  for (const attribute of Array.from(svg.attributes)) {
+    if (!CAMERA_OWNED_ATTRIBUTES.has(attribute.name.toLowerCase())) {
+      svg.removeAttribute(attribute.name);
+    }
+  }
+  for (const attribute of Array.from(next.attributes)) {
+    if (!CAMERA_OWNED_ATTRIBUTES.has(attribute.name.toLowerCase())) {
+      svg.setAttribute(attribute.name, attribute.value);
+    }
+  }
+}
+
+// src/runtime/viewer/display/classifySceneDiff.ts
+function classifySceneDiff(oldOwnerIds, newOwnerIds, touchedOwnerIds) {
+  const added = [];
+  const removed = [];
+  const changed = [];
+  for (const id of touchedOwnerIds) {
+    const wasPresent = oldOwnerIds.has(id);
+    const isPresent = newOwnerIds.has(id);
+    if (isPresent && !wasPresent) {
+      added.push(id);
+    } else if (wasPresent && !isPresent) {
+      removed.push(id);
+    } else if (wasPresent && isPresent) {
+      changed.push(id);
+    }
+  }
+  return { added, removed, changed };
+}
+
+// src/runtime/viewer/display/definitionsPatch.ts
+function patchDefinitions(svg, next) {
+  const currentDefinitions = svg.querySelector(":scope > defs");
+  const nextDefinitions = next.querySelector(":scope > defs");
+  if (nextDefinitions) {
+    if (currentDefinitions) {
+      currentDefinitions.replaceWith(nextDefinitions);
+    } else {
+      svg.insertBefore(nextDefinitions, svg.firstChild);
+    }
+    return nextDefinitions;
+  }
+  currentDefinitions?.remove();
+  return currentDefinitions;
+}
+
+// src/runtime/viewer/display/elementPatch.ts
+function patchAttributes(current, next) {
+  let changed = false;
+  for (const attribute of Array.from(current.attributes)) {
+    if (!next.hasAttribute(attribute.name)) {
+      current.removeAttribute(attribute.name);
+      changed = true;
+    }
+  }
+  for (const attribute of Array.from(next.attributes)) {
+    if (current.getAttribute(attribute.name) !== attribute.value) {
+      current.setAttribute(attribute.name, attribute.value);
+      changed = true;
+    }
+  }
+  return changed;
+}
+function childrenEqual(a, b) {
+  const aChildren = Array.from(a.childNodes);
+  const bChildren = Array.from(b.childNodes);
+  if (aChildren.length !== bChildren.length) {
+    return false;
+  }
+  for (let i = 0; i < aChildren.length; i++) {
+    const x = aChildren[i];
+    const y = bChildren[i];
+    if (x.nodeType !== y.nodeType) {
+      return false;
+    }
+    if (x.nodeType === Node.TEXT_NODE) {
+      if (x.textContent !== y.textContent) {
+        return false;
+      }
+      continue;
+    }
+    if (x.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const xElement = x;
+    const yElement = y;
+    if (xElement.tagName !== yElement.tagName) {
+      return false;
+    }
+    if (xElement.attributes.length !== yElement.attributes.length) {
+      return false;
+    }
+    for (const attribute of Array.from(xElement.attributes)) {
+      if (yElement.getAttribute(attribute.name) !== attribute.value) {
+        return false;
+      }
+    }
+    if (!childrenEqual(xElement, yElement)) {
+      return false;
+    }
+  }
+  return true;
+}
+function replaceTextContent(current, next) {
+  while (current.firstChild) {
+    current.removeChild(current.firstChild);
+  }
+  while (next.firstChild) {
+    current.appendChild(next.firstChild);
+  }
+}
+function patchSceneElement(current, next) {
+  const widgetRestyled = next.hasAttribute("data-sf-widget") && (current.getAttribute("data-sf-widget-style") !== next.getAttribute("data-sf-widget-style") || current.getAttribute("data-sf-widget-value") !== next.getAttribute("data-sf-widget-value"));
+  const attributesChanged = patchAttributes(current, next);
+  let contentChanged = false;
+  if (widgetRestyled) {
+    contentChanged = true;
+    replaceTextContent(current, next);
+  }
+  if (next.tagName.toLowerCase() === "text" && !childrenEqual(current, next)) {
+    contentChanged = true;
+    replaceTextContent(current, next);
+  }
+  return attributesChanged || contentChanged;
+}
+
+// src/runtime/viewer/display/sceneNodesPatch.ts
+function ownerIdOf(element) {
+  return element.getAttribute("data-sf-id") ?? element.id;
+}
+function currentElementsById(svg) {
+  const elements = /* @__PURE__ */ new Map();
+  for (const element of svg.querySelectorAll(":scope > [id]")) {
+    elements.set(element.id, element);
+  }
+  return elements;
+}
+function reusableElement(current, next, markTouched) {
+  if (current && current.tagName === next.tagName) {
+    if (patchSceneElement(current, next)) {
+      markTouched(ownerIdOf(next));
+    }
+    return current;
+  }
+  current?.remove();
+  markTouched(ownerIdOf(next));
+  return next;
+}
+function placeAfter(svg, element, previousSibling) {
+  const wantedNext = previousSibling ? previousSibling.nextSibling : svg.firstChild;
+  if (wantedNext !== element) {
+    svg.insertBefore(element, wantedNext);
+  }
+}
+function patchSceneNodes(svg, next) {
+  const definitions = patchDefinitions(svg, next);
+  const currentById = currentElementsById(svg);
+  const retainedIds = /* @__PURE__ */ new Set();
+  const oldOwnerIds = /* @__PURE__ */ new Set();
+  for (const element of currentById.values()) {
+    oldOwnerIds.add(ownerIdOf(element));
+  }
+  const newOwnerIds = /* @__PURE__ */ new Set();
+  const touchedOwnerIds = /* @__PURE__ */ new Set();
+  const markTouched = (ownerId) => {
+    touchedOwnerIds.add(ownerId);
+  };
+  let previousSibling = definitions;
+  for (const nextElement of next.querySelectorAll(":scope > [id]")) {
+    retainedIds.add(nextElement.id);
+    newOwnerIds.add(ownerIdOf(nextElement));
+    const liveElement = reusableElement(currentById.get(nextElement.id), nextElement, markTouched);
+    placeAfter(svg, liveElement, previousSibling);
+    previousSibling = liveElement;
+  }
+  for (const [id, element] of currentById) {
+    if (!retainedIds.has(id)) {
+      touchedOwnerIds.add(ownerIdOf(element));
+      element.remove();
+    }
+  }
+  return classifySceneDiff(oldOwnerIds, newOwnerIds, touchedOwnerIds);
+}
+
+// src/runtime/viewer/display/scenePatch.ts
+function patchDisplayContent(svg, next) {
+  patchRootAttributes(svg, next);
+  return patchSceneNodes(svg, next);
+}
+
+// src/runtime/viewer/display/svgDocument.ts
+function parseSvg(svgString) {
+  const document = new DOMParser().parseFromString(svgString, "image/svg+xml");
+  const root = document.documentElement;
+  if (root.nodeName.toLowerCase() !== "svg") {
+    throw new Error("viewer: source did not parse to an <svg> root");
+  }
+  return root;
+}
+function readViewBox(svg) {
+  const values = (svg.getAttribute("viewBox") ?? "0 0 100 100").split(/\s+/).map(Number);
+  return { x: values[0], y: values[1], w: values[2], h: values[3] };
+}
+
+// src/runtime/viewer/display/viewport.ts
+var ViewportController = class {
+  #svg;
+  #natural;
+  #view;
+  constructor(svg, natural) {
+    this.#svg = svg;
+    this.#natural = natural;
+    this.#view = { ...natural };
+  }
+  apply() {
+    this.#svg.setAttribute("viewBox", `${this.#view.x} ${this.#view.y} ${this.#view.w} ${this.#view.h}`);
+  }
+  fit() {
+    this.#view = { ...this.#natural };
+    this.apply();
+  }
+  get() {
+    return { ...this.#view };
+  }
+  setNatural(natural) {
+    this.#natural = natural;
+  }
+  zoomBy(factor, clientX, clientY) {
+    const rect = this.#svg.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      return;
+    }
+    const centerX = clientX ?? rect.left + rect.width / 2;
+    const centerY = clientY ?? rect.top + rect.height / 2;
+    const worldX = this.#view.x + (centerX - rect.left) / rect.width * this.#view.w;
+    const worldY = this.#view.y + (centerY - rect.top) / rect.height * this.#view.h;
+    this.#view = { w: this.#view.w / factor, h: this.#view.h / factor, x: 0, y: 0 };
+    this.#view.x = worldX - (centerX - rect.left) / rect.width * this.#view.w;
+    this.#view.y = worldY - (centerY - rect.top) / rect.height * this.#view.h;
+    this.apply();
+  }
+  panBy(dxPixels, dyPixels) {
+    const rect = this.#svg.getBoundingClientRect();
+    const pixelsPerUnit = rect.width > 0 ? rect.width / this.#view.w : 1;
+    this.#view.x -= dxPixels / pixelsPerUnit;
+    this.#view.y -= dyPixels / pixelsPerUnit;
+    this.apply();
+  }
+};
+
+// src/runtime/viewer/display/index.ts
+function mountDisplay(container, svgString) {
+  const svg = parseSvg(svgString);
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  svg.style.display = "block";
+  svg.style.touchAction = "none";
+  const viewport = new ViewportController(svg, readViewBox(svg));
+  container.appendChild(svg);
+  viewport.apply();
+  return {
+    svg,
+    fit: () => viewport.fit(),
+    getViewport: () => viewport.get(),
+    zoomBy: (factor, clientX, clientY) => viewport.zoomBy(factor, clientX, clientY),
+    panBy: (dxPixels, dyPixels) => viewport.panBy(dxPixels, dyPixels),
+    updateContent(nextSvgString) {
+      const next = parseSvg(nextSvgString);
+      const diff = patchDisplayContent(svg, next);
+      viewport.setNatural(readViewBox(next));
+      return diff;
+    },
+    destroy() {
+      svg.remove();
+    }
+  };
+}
+
+// src/runtime/viewer/events.ts
+var Emitter2 = class extends chunk34PK7HEU_cjs.Emitter {
+};
+
+// src/runtime/viewer/export/raster.ts
+function positive(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function loadImage(document, source) {
+  return new Promise((resolve, reject) => {
+    const ImageConstructor = document.defaultView?.Image;
+    if (!ImageConstructor) {
+      reject(new Error("viewer export: Image is unavailable in this environment."));
+      return;
+    }
+    const image = new ImageConstructor();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("viewer export: the SVG snapshot could not be decoded."));
+    image.src = source;
+  });
+}
+function canvasBlob(canvas, mimeType, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error(`viewer export: ${mimeType} encoding failed.`));
+        }
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+async function rasterizeSvgSnapshot(svg, snapshot, options = {}) {
+  const viewBox = readViewBox(svg);
+  const scale = positive(options.scale, 1);
+  const width = Math.max(1, Math.round(viewBox.w * scale));
+  const height = Math.max(1, Math.round(viewBox.h * scale));
+  const canvas = svg.ownerDocument.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("viewer export: a 2D canvas context is unavailable.");
+  }
+  const blob = new Blob([snapshot], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  try {
+    const image = await loadImage(svg.ownerDocument, url);
+    const background = options.backgroundColor ?? (options.format === "jpeg" ? "#ffffff" : void 0);
+    if (background) {
+      context.fillStyle = background;
+      context.fillRect(0, 0, width, height);
+    }
+    context.drawImage(image, 0, 0, width, height);
+    const mimeType = options.format === "jpeg" ? "image/jpeg" : "image/png";
+    return await canvasBlob(canvas, mimeType, options.quality);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// src/runtime/viewer/export/snapshot.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function copyAttributes(source, target) {
+  for (const attribute of source.attributes) {
+    if (!attribute.name.startsWith("data-sf-shader")) {
+      target.setAttribute(attribute.name, attribute.value);
+    }
+  }
+}
+function removeRuntimeOverlays(svg) {
+  for (const overlay of svg.querySelectorAll(
+    '[data-sf-selection-overlay], [data-sf-change-overlay], [id*="link-hit-"]'
+  )) {
+    overlay.remove();
+  }
+}
+function svgElement(document, name, attributes) {
+  const element = document.createElementNS(SVG_NAMESPACE, name);
+  for (const [key, value] of Object.entries(attributes)) {
+    element.setAttribute(key, String(value));
+  }
+  return element;
+}
+function readWidgetStyle(surface) {
+  try {
+    return {
+      ...chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
+      ...JSON.parse(surface.getAttribute("data-sf-widget-style") ?? "{}")
+    };
+  } catch {
+    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+  }
+}
+function cellsOf(box, plain) {
+  const size = Math.max(1, Math.min(box.width, box.height) * 0.28);
+  return {
+    size,
+    plain,
+    cellWidth: plain ? size * 0.62 : size * 0.72 + 2,
+    cellHeight: plain ? size * 1.1 : size * 1.2 + 2,
+    gap: size * (plain ? 0.02 : 0.1)
+  };
+}
+function groupOf(document, surface, style) {
+  const group = svgElement(document, "g", { "font-family": style.fontFamily });
+  for (const attribute of ["id", "transform", "data-sf-id", "data-sf-role", "data-sf-kind"]) {
+    const attributeValue = surface.getAttribute(attribute);
+    if (attributeValue !== null) {
+      group.setAttribute(attribute, attributeValue);
+    }
+  }
+  return group;
+}
+function labelText(document, label, box, top, cells, style) {
+  const text = svgElement(document, "text", {
+    x: box.x + box.width / 2,
+    y: top - cells.size * 0.14,
+    "text-anchor": "middle",
+    "font-size": cells.size * 0.16,
+    "font-weight": 600,
+    "letter-spacing": cells.size * 0.04,
+    fill: style.labelColor
+  });
+  text.textContent = label;
+  return text;
+}
+function digitCell(document, character, cellX, top, cells, style) {
+  const { size, plain, cellWidth, cellHeight } = cells;
+  const nodes = [];
+  if (!plain) {
+    nodes.push(
+      svgElement(document, "rect", {
+        x: cellX + 0.5,
+        y: top + 0.5,
+        width: cellWidth - 1,
+        height: cellHeight - 1,
+        rx: size * 0.09,
+        fill: style.surface,
+        stroke: style.divider,
+        "stroke-width": 1
+      })
+    );
+  }
+  const digit = svgElement(document, "text", {
+    x: cellX + cellWidth / 2,
+    y: top + cellHeight / 2,
+    "text-anchor": "middle",
+    "dominant-baseline": "central",
+    "font-size": size,
+    "font-weight": style.fontWeight,
+    fill: style.color
+  });
+  digit.textContent = character;
+  nodes.push(digit);
+  if (!plain) {
+    nodes.push(
+      svgElement(document, "line", {
+        x1: cellX + 0.5,
+        x2: cellX + cellWidth - 0.5,
+        y1: top + cellHeight / 2,
+        y2: top + cellHeight / 2,
+        stroke: style.divider,
+        "stroke-width": 1
+      })
+    );
+  }
+  return nodes;
+}
+function flattenRollingNumbers(svg) {
+  const document = svg.ownerDocument;
+  for (const surface of svg.querySelectorAll('foreignObject[data-sf-widget="rollingNumber"]')) {
+    const box = {
+      x: Number(surface.getAttribute("x")),
+      y: Number(surface.getAttribute("y")),
+      width: Number(surface.getAttribute("width")),
+      height: Number(surface.getAttribute("height"))
+    };
+    const value = surface.getAttribute("data-sf-widget-value") ?? "";
+    const style = readWidgetStyle(surface);
+    const label = surface.querySelector("div > span:not([data-sf-rolling-digit])")?.textContent ?? "";
+    const cells = cellsOf(box, style.variant === "plain");
+    const labelBlock = label ? cells.size * 0.3 : 0;
+    const rowWidth = value.length * cells.cellWidth + Math.max(0, value.length - 1) * cells.gap;
+    const left = box.x + (box.width - rowWidth) / 2;
+    const top = box.y + (box.height - (labelBlock + cells.cellHeight)) / 2 + labelBlock;
+    const group = groupOf(document, surface, style);
+    if (label) {
+      group.appendChild(labelText(document, label, box, top, cells, style));
+    }
+    [...value].forEach((character, index) => {
+      const cellX = left + index * (cells.cellWidth + cells.gap);
+      for (const node of digitCell(document, character, cellX, top, cells, style)) {
+        group.appendChild(node);
+      }
+    });
+    surface.replaceWith(group);
+  }
+}
+function freezeShaderSurfaces(svg, captures) {
+  const clone = svg.cloneNode(true);
+  removeRuntimeOverlays(clone);
+  const surfaces = [...clone.querySelectorAll("foreignObject[data-sf-shader]")];
+  surfaces.forEach((surface, index) => {
+    const capture = captures[index];
+    if (!capture) {
+      surface.remove();
+      return;
+    }
+    const image = clone.ownerDocument.createElementNS(SVG_NAMESPACE, "image");
+    copyAttributes(surface, image);
+    image.setAttribute("href", capture);
+    image.setAttribute("preserveAspectRatio", "none");
+    surface.replaceWith(image);
+  });
+  flattenRollingNumbers(clone);
+  const viewBox = (clone.getAttribute("viewBox") ?? "").split(/\s+/).map(Number);
+  if (viewBox.length === 4 && viewBox.every(Number.isFinite)) {
+    clone.setAttribute("width", String(viewBox[2]));
+    clone.setAttribute("height", String(viewBox[3]));
+  }
+  clone.setAttribute("xmlns", SVG_NAMESPACE);
+  return clone;
+}
+function serializeSvgSnapshot(svg, captures) {
+  return new XMLSerializer().serializeToString(freezeShaderSurfaces(svg, captures));
+}
+
+// src/runtime/viewer/interaction/changeFlash.ts
+function createChangeFlash(svg) {
+  const timers = /* @__PURE__ */ new Map();
+  const flash = (ownerIds, color2 = chunk34PK7HEU_cjs.CHANGE_COLOR) => {
+    const ids = [...new Set(ownerIds)];
+    if (ids.length === 0) {
+      return;
+    }
+    const doc = svg.ownerDocument;
+    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    for (const id of ids) {
+      const primary = chunk34PK7HEU_cjs.findOwnerNode(svg, id, chunk34PK7HEU_cjs.isPrimary);
+      if (!primary) {
+        continue;
+      }
+      const pending = timers.get(id);
+      if (pending) {
+        clearTimeout(pending);
+      }
+      for (const stale of svg.querySelectorAll(`[data-sf-change-overlay="${CSS.escape(id)}"]`)) {
+        stale.remove();
+      }
+      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunk34PK7HEU_cjs.linkChangeOverlay(doc, primary, id, color2) : chunk34PK7HEU_cjs.shapeChangeOverlay(doc, primary, id, color2);
+      svg.appendChild(overlay);
+      chunk34PK7HEU_cjs.startChangeFade(overlay, reducedMotion);
+      const duration = reducedMotion ? chunk34PK7HEU_cjs.REDUCED_MOTION_DURATION_MS : chunk34PK7HEU_cjs.FLASH_DURATION_MS;
+      timers.set(
+        id,
+        setTimeout(() => {
+          overlay.remove();
+          timers.delete(id);
+        }, duration)
+      );
+    }
+  };
+  return {
+    flash,
+    destroy() {
+      for (const timer of timers.values()) {
+        clearTimeout(timer);
+      }
+      timers.clear();
+    }
+  };
+}
+
+// src/runtime/viewer/interaction/keyboard.ts
+function bindKeyboardSelection(svg, selection, selectable) {
+  const onKeyDown = (event) => {
+    if (selectable && event.key === "Escape") {
+      selection.dispatch({ type: "clear" });
+    }
+  };
+  svg.addEventListener("keydown", onKeyDown);
+  return () => {
+    svg.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+// src/runtime/viewer/interaction/modifiers.ts
+function modifiersOf(event) {
+  return {
+    shift: event.shiftKey,
+    ctrl: event.ctrlKey,
+    meta: event.metaKey,
+    alt: event.altKey
+  };
+}
+
+// src/runtime/viewer/interaction/selection.ts
+function selectionReducer(current, action) {
+  switch (action.type) {
+    case "clear":
+      return /* @__PURE__ */ new Set();
+    case "set":
+      return new Set(action.ids);
+    case "select":
+      return /* @__PURE__ */ new Set([action.id]);
+    case "add":
+      return /* @__PURE__ */ new Set([...current, action.id]);
+    case "toggle": {
+      const next = new Set(current);
+      if (next.has(action.id)) {
+        next.delete(action.id);
+      } else {
+        next.add(action.id);
+      }
+      return next;
+    }
+  }
+}
+function clickAction(id, modifiers) {
+  return modifiers.ctrl || modifiers.meta || modifiers.shift ? { type: "toggle", id } : { type: "select", id };
+}
+
+// src/runtime/viewer/interaction/pointerSelection.ts
+var SELECTION_OVERLAY_CONTROL_SELECTOR = "[data-sf-resize-handle], [data-sf-link-endpoint], [data-sf-link-segment], [data-sf-quick-duplicate]";
+function isSelectionOverlayControl(target) {
+  return Boolean(target?.closest(SELECTION_OVERLAY_CONTROL_SELECTOR));
+}
+var OwnerPointerController = class {
+  #svg;
+  #emitter;
+  #diagramId;
+  #selection;
+  constructor(svg, emitter, diagramId, selection) {
+    this.#svg = svg;
+    this.#emitter = emitter;
+    this.#diagramId = diagramId;
+    this.#selection = selection;
+  }
+  hover(event) {
+    const owner = chunk34PK7HEU_cjs.resolveOwner(event.target);
+    this.#emitter.emit(
+      "ownerHover",
+      owner ? { diagramId: this.#diagramId, owner, modifiers: modifiersOf(event) } : { diagramId: this.#diagramId, owner: null }
+    );
+  }
+  select(event) {
+    const target = event.target;
+    const owner = chunk34PK7HEU_cjs.resolveOwner(target);
+    if (!owner) {
+      this.#clearWhenOutsideOverlay(target);
+      return;
+    }
+    this.#selectOwner(owner, event);
+  }
+  #clearWhenOutsideOverlay(target) {
+    if (!isSelectionOverlayControl(target)) {
+      this.#selection.dispatch({ type: "clear" });
+    }
+  }
+  #selectOwner(owner, event) {
+    this.#selection.remember(owner);
+    const modifiers = modifiersOf(event);
+    this.#selection.dispatch(clickAction(owner.id, modifiers));
+    this.#emitter.emit(owner.role === "link" ? "linkClick" : "canvasObjectClick", {
+      diagramId: this.#diagramId,
+      owner,
+      modifiers
+    });
+    const node = chunk34PK7HEU_cjs.findOwnerNode(this.#svg, owner.id, chunk34PK7HEU_cjs.isPrimary);
+    if (node && !node.hasAttribute("tabindex")) {
+      node.setAttribute("tabindex", "-1");
+    }
+    node?.focus({ preventScroll: true });
+  }
+};
+
+// src/runtime/viewer/interaction/pointer.ts
+var DRAG_THRESHOLD = 4;
+var PointerInteractionSession = class {
+  #display;
+  #ownerPointer;
+  #selectable;
+  #down = null;
+  constructor(display, ownerPointer, selectable) {
+    this.#display = display;
+    this.#ownerPointer = ownerPointer;
+    this.#selectable = selectable;
+  }
+  bind() {
+    this.#display.svg.addEventListener("pointerdown", this.#onPointerDown);
+    this.#display.svg.addEventListener("pointermove", this.#onPointerMove);
+    this.#display.svg.addEventListener("pointerup", this.#onPointerUp);
+    return () => this.#destroy();
+  }
+  #onPointerDown = (event) => {
+    const target = event.target;
+    const overContent = Boolean(chunk34PK7HEU_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
+    this.#down = {
+      x: event.clientX,
+      y: event.clientY,
+      moved: false,
+      panable: chunk34PK7HEU_cjs.isCameraGesture(event) || !overContent
+    };
+  };
+  #onPointerMove = (event) => {
+    if (this.#continueDrag(event)) {
+      return;
+    }
+    if (this.#selectable) {
+      this.#ownerPointer.hover(event);
+    }
+  };
+  #onPointerUp = (event) => {
+    const wasDrag = this.#down?.moved ?? false;
+    this.#down = null;
+    if (!wasDrag && this.#selectable) {
+      this.#ownerPointer.select(event);
+    }
+  };
+  #continueDrag(event) {
+    if (!this.#down) {
+      return false;
+    }
+    if (!this.#down.moved && Math.hypot(event.clientX - this.#down.x, event.clientY - this.#down.y) > DRAG_THRESHOLD) {
+      this.#down.moved = true;
+    }
+    if (!this.#down.moved) {
+      return false;
+    }
+    if (this.#down.panable && chunk34PK7HEU_cjs.isCameraGesture(event)) {
+      this.#display.panBy(event.movementX, event.movementY);
+    }
+    return true;
+  }
+  #destroy() {
+    this.#display.svg.removeEventListener("pointerdown", this.#onPointerDown);
+    this.#display.svg.removeEventListener("pointermove", this.#onPointerMove);
+    this.#display.svg.removeEventListener("pointerup", this.#onPointerUp);
+  }
+};
+function bindPointerInteraction(binding) {
+  const { display, emitter, diagramId, selection, selectable } = binding;
+  const ownerPointer = new OwnerPointerController(display.svg, emitter, diagramId, selection);
+  return new PointerInteractionSession(display, ownerPointer, selectable).bind();
+}
+
+// src/runtime/viewer/interaction/overlayPainter.ts
+function paintSelectionOverlays(svg, selectedIds, owners) {
+  for (const overlay of svg.querySelectorAll("[data-sf-selection-overlay]")) {
+    overlay.remove();
+  }
+  const document = svg.ownerDocument;
+  for (const id of selectedIds) {
+    const primary = chunk34PK7HEU_cjs.findOwnerNode(svg, id, chunk34PK7HEU_cjs.isPrimary);
+    if (!primary) {
+      continue;
+    }
+    const owner = owners.get(id);
+    const overlay = owner?.role === "link" ? chunk34PK7HEU_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunk34PK7HEU_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunk34PK7HEU_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunk34PK7HEU_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunk34PK7HEU_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
+    svg.appendChild(overlay);
+    if (owner?.role === "shape" && selectedIds.size === 1) {
+      svg.appendChild(chunk34PK7HEU_cjs.quickDuplicateBubbles(document, primary, id, svg));
+    }
+  }
+}
+
+// src/runtime/viewer/interaction/selectionController.ts
+var SelectionController = class {
+  #svg;
+  #emitter;
+  #diagramId;
+  #owners = /* @__PURE__ */ new Map();
+  #ids = /* @__PURE__ */ new Set();
+  constructor(svg, emitter, diagramId) {
+    this.#svg = svg;
+    this.#emitter = emitter;
+    this.#diagramId = diagramId;
+  }
+  getOwners() {
+    return [...this.#ids].map((id) => this.#owners.get(id)).filter((owner) => Boolean(owner));
+  }
+  remember(owner) {
+    this.#owners.set(owner.id, owner);
+  }
+  dispatch(action) {
+    this.#ids = selectionReducer(this.#ids, action);
+    paintSelectionOverlays(this.#svg, this.#ids, this.#owners);
+    this.#emitter.emit("selectionChange", {
+      diagramId: this.#diagramId,
+      selection: this.getOwners()
+    });
+  }
+  repaint() {
+    if (this.#ids.size > 0) {
+      paintSelectionOverlays(this.#svg, this.#ids, this.#owners);
+    }
+  }
+  selectIds(ids) {
+    for (const id of ids) {
+      const element = this.#svg.querySelector(`[data-sf-id="${CSS.escape(id)}"]`);
+      const owner = chunk34PK7HEU_cjs.resolveOwner(element);
+      if (owner) {
+        this.remember(owner);
+      }
+    }
+    this.dispatch({ type: "set", ids });
+  }
+};
+
+// src/runtime/viewer/interaction/wheel.ts
+function bindWheelZoom(display, selection) {
+  const onWheel = (event) => {
+    if (!chunk34PK7HEU_cjs.isCameraGesture(event)) {
+      return;
+    }
+    event.preventDefault();
+    display.zoomBy(event.deltaY < 0 ? 1.1 : 1 / 1.1, event.clientX, event.clientY);
+    selection.repaint();
+  };
+  display.svg.addEventListener("wheel", onWheel, { passive: false });
+  return () => {
+    display.svg.removeEventListener("wheel", onWheel);
+  };
+}
+
+// src/runtime/viewer/interaction/index.ts
+function bindInteraction(display, emitter, diagramId, options = {}) {
+  const selectable = options.selectable ?? true;
+  const selection = new SelectionController(display.svg, emitter, diagramId);
+  const unbindPointer = bindPointerInteraction({ display, emitter, diagramId, selection, selectable });
+  const unbindWheel = bindWheelZoom(display, selection);
+  const unbindKeyboard = bindKeyboardSelection(display.svg, selection, selectable);
+  const changeFlash = createChangeFlash(display.svg);
+  return {
+    getSelection: () => selection.getOwners(),
+    select: (ids) => selection.selectIds(ids),
+    repaint: () => selection.repaint(),
+    flashChanged: (ownerIds, color2) => changeFlash.flash(ownerIds, color2),
+    destroy() {
+      unbindPointer();
+      unbindWheel();
+      unbindKeyboard();
+      changeFlash.destroy();
+    }
+  };
+}
+
+// src/runtime/viewer/shaders/defaults.ts
+var SHADER_DEFAULTS = {
+  numbers: {
+    intensity: 0.85,
+    speed: 0.18,
+    progress: -1,
+    boost: 0,
+    dent: -1,
+    day: -1,
+    light: 135,
+    gloss: 0.15,
+    depth: 0.4,
+    rim: 0.2
+  },
+  colors: {
+    color: [0.08, 0.02, 0.22],
+    accent: [0.58, 0.31, 1],
+    hot: [1, 0.45, 0.82]
+  }
+};
+
+// src/runtime/viewer/shaders/builtins/button.ts
+var fragmentSource = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uLight;
+uniform float uGloss;
+uniform float uDepth;
+uniform float uRim;
+uniform float uPressed;
+uniform vec3 uColor;
+varying vec2 vUv;
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float pixel = 2.0 / max(uResolution.y, 1.0);
+  float pressed = clamp(uPressed, 0.0, 1.0);
+
+  float radius = 0.9 * (1.0 - 0.025 * pressed);
+  float r = length(p);
+  vec2 direction = r > 0.0001 ? p / r : vec2(0.0, 1.0);
+  float angle = radians(uLight);
+  vec2 toLight = vec2(cos(angle), sin(angle));
+  vec3 light = normalize(vec3(toLight, 0.85));
+
+  vec3 base = dot(uColor, uColor) > 0.0 ? uColor : vec3(0.15, 0.15, 0.17);
+  float depth = max(uDepth, 0.0) * (1.0 - 0.65 * pressed);
+  float inside = clamp(r / radius, 0.0, 1.0);
+
+  vec3 normal = normalize(vec3(direction * pow(inside, 1.6) * depth * 1.4, 1.0));
+  float diffuse = clamp(dot(normal, light), 0.0, 1.0);
+  vec3 color = base * (0.5 + 0.7 * diffuse) * (1.0 - 0.18 * pressed);
+
+  vec3 reflected = reflect(-light, normal);
+  float specular = pow(max(reflected.z, 0.0), 26.0) * max(uGloss, 0.0) * (1.0 - 0.8 * pressed);
+  color += vec3(specular) * 0.9;
+
+  float lit = max(dot(direction, toLight), 0.0);
+  float away = max(dot(direction, -toLight), 0.0);
+  float edge = smoothstep(0.55, 1.0, inside);
+  color *= 1.0 - 0.45 * edge * away * min(depth, 1.5) - 0.12 * edge;
+  color += mix(base, vec3(1.0), 0.6) * max(uRim, 0.0) * smoothstep(0.9, 1.0, inside) * lit * (1.0 - 0.7 * pressed);
+
+  float disc = 1.0 - smoothstep(radius - pixel, radius + pixel, r);
+
+  vec2 shadowAt = -toLight * 0.06 * (1.0 - 0.7 * pressed);
+  float shadowDistance = length(p - shadowAt);
+  float shadow = (1.0 - smoothstep(radius * 0.55, 0.99, shadowDistance)) * 0.55 * (1.0 - 0.4 * pressed);
+
+  float alpha = clamp(disc + shadow * (1.0 - disc), 0.0, 1.0);
+  gl_FragColor = vec4(clamp(color * disc, 0.0, 1.0), alpha);
+}
+`;
+var buttonProgram = {
+  name: "button",
+  fragmentSource,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/chromaticGlassPlate.ts
+var fragmentSource2 = `
+precision highp float;
+
+uniform sampler2D uBackdrop;
+uniform vec2 uBackdropOrigin;
+uniform vec2 uBackdropScale;
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uThickness;
+uniform float uRefraction;
+uniform vec3 uPinkColor;
+uniform vec3 uVioletColor;
+uniform vec3 uBlueColor;
+uniform vec3 uEdgeColor;
+varying vec2 vUv;
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float time = uTime * max(uSpeed, 0.0);
+  float depth = mix(0.025, 0.105, clamp(uThickness, 0.0, 1.0));
+  float radius = 0.79;
+  float distance = length(p) - radius;
+  float pixel = 2.0 / max(min(uResolution.x, uResolution.y), 1.0);
+  float alpha = 1.0 - smoothstep(-pixel, pixel, distance);
+  if (alpha < 0.001) discard;
+
+  float edge = smoothstep(0.66, 0.995, length(p) / radius);
+  vec2 normal = p / max(length(p), 0.001);
+  vec2 opticalWarp = normal * edge * max(uRefraction, 0.0) * 0.12;
+  opticalWarp += vec2(sin(p.y * 8.0 + time * 0.35), cos(p.x * 7.0 - time * 0.27)) * 0.002;
+  vec2 backdropUv = clamp(uBackdropOrigin + (vUv + opticalWarp) * uBackdropScale, 0.001, 0.999);
+  vec3 backdrop = texture2D(uBackdrop, backdropUv).rgb;
+
+  float wave = sin(p.x * 3.1 - time * 0.38) * 0.025;
+  float pinkBand = bell(p.y - 0.42 + wave, 0.20);
+  float pinkShelf = smoothstep(0.16, 0.30, p.y + wave);
+  float whiteCap = smoothstep(0.59, 0.75, p.y + wave) * 0.95;
+  vec3 face = backdrop * 0.19 + vec3(0.004, 0.002, 0.011);
+  face += uVioletColor * bell(p.y + 0.56, 0.18) * 0.10;
+  face += uBlueColor * bell(p.x - 0.49, 0.18) * bell(p.y + 0.22, 0.39) * 0.09;
+  face += uPinkColor * pinkBand * pinkShelf * 1.05;
+  face += uEdgeColor * whiteCap * 0.88;
+
+  float left = 1.0 - smoothstep(-0.68, -0.34, p.x);
+  float right = smoothstep(0.36, 0.68, p.x);
+  float upper = smoothstep(0.0, 0.58, p.y);
+  float lower = 1.0 - smoothstep(-0.52, -0.04, p.y);
+  float rim = bell(distance + 0.004, 0.007);
+  float bevel = bell(distance + depth * 0.55, depth * 0.48);
+  float innerArc = bell(distance + depth * 1.13, depth * 0.23) * right * lower;
+  face += uEdgeColor * rim * (0.61 + 0.35 * upper);
+  face += uPinkColor * bevel * (0.18 + 0.58 * left * upper);
+  face += uBlueColor * bevel * right * lower * 0.49;
+  face += uVioletColor * innerArc * 0.27;
+  face += uEdgeColor * bell(distance + depth * 1.3, depth * 0.31) * left * upper * 0.22;
+  float movingGlint = bell(p.x + 0.42 - sin(time * 0.47) * 0.075, 0.055);
+  face += uEdgeColor * movingGlint * bell(p.y - 0.26, 0.48) * left * 0.15;
+  gl_FragColor = vec4(clamp(face * max(uIntensity, 0.0), 0.0, 1.0) * alpha, alpha);
+}
+`;
+var chromaticGlassPlateProgram = {
+  name: "chromaticGlassPlate",
+  fragmentSource: fragmentSource2,
+  usesBackdrop: true,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/chromaticHalo.ts
+var fragmentSource3 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uRingRadius;
+uniform float uRingWidth;
+uniform float uBloom;
+uniform float uMotion;
+uniform bool uLightMode;
+uniform vec3 uWarmColor;
+uniform vec3 uCoolColor;
+uniform vec3 uAccentColor;
+uniform vec3 uHighlightColor;
+varying vec2 vUv;
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+float displacedRing(vec2 point, float radius, float width, float phase, float time, float motion) {
+  float angle = atan(point.y, point.x);
+  float wave = sin(angle * 2.0 + phase + time * 0.4) * 0.052;
+  wave += sin(angle * 3.0 - phase * 0.45 + time * 0.27) * 0.025;
+  wave += sin(angle * 6.0 - phase * 0.7 - time * 0.23) * 0.011;
+  return bell(length(point) - radius - wave * motion, width);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float time = uTime * max(uSpeed, 0.0);
+  float radius = clamp(uRingRadius, 0.25, 0.88);
+  float width = max(uRingWidth, 0.025);
+  float motion = max(uMotion, 0.0);
+
+  vec2 coolOffset = vec2(-0.052, -0.012) * (0.7 + motion * 0.3);
+  vec2 warmOffset = vec2(0.042, 0.024) * (0.7 + motion * 0.3);
+  vec2 accentOffset = vec2(0.016, -0.044) * (0.7 + motion * 0.3);
+  float coolRing = displacedRing(p + coolOffset, radius, width * 1.18, 0.4, time, motion);
+  float warmRing = displacedRing(p + warmOffset, radius, width * 1.05, 2.6, time, motion);
+  float accentRing = displacedRing(p + accentOffset, radius, width, 4.8, time, motion);
+  float coreRing = displacedRing(p, radius, width * 0.48, 1.7, time, motion);
+
+  vec3 color = uCoolColor * coolRing * 0.72;
+  color += uWarmColor * warmRing * 0.68;
+  color += uAccentColor * accentRing * 0.64;
+  if (!uLightMode) {
+    color += uHighlightColor * coreRing * 1.35;
+  }
+  float broadBloom = displacedRing(p, radius, width * 2.35, 0.0, time, motion);
+  color += mix(uCoolColor, uWarmColor, smoothstep(-0.8, 0.8, p.y)) * broadBloom * max(uBloom, 0.0) * 0.2;
+
+  float ringAlpha = max(max(coolRing, warmRing), max(accentRing, coreRing));
+  float alpha = clamp(ringAlpha * 0.9 + broadBloom * max(uBloom, 0.0) * 0.18, 0.0, 1.0);
+  if (uLightMode) {
+    color = mix(color, uHighlightColor, smoothstep(0.16, 0.82, coreRing));
+  }
+  float circleMask = 1.0 - smoothstep(0.965, 1.0, length(p));
+  alpha *= circleMask * max(uIntensity, 0.0);
+  color *= circleMask * max(uIntensity, 0.0);
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), clamp(alpha, 0.0, 1.0));
+}
+`;
+var chromaticHaloProgram = {
+  name: "chromaticHalo",
+  fragmentSource: fragmentSource3
+};
+
+// src/runtime/viewer/shaders/builtins/eclipseOrb.ts
+var fragmentSource4 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uGlow;
+uniform float uDay;
+uniform vec3 uTopColor;
+uniform vec3 uMiddleColor;
+uniform vec3 uBottomColor;
+uniform vec3 uRimColor;
+varying vec2 vUv;
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  float time = uTime * max(uSpeed, 0.0);
+  float glow = max(uGlow, 0.0);
+  float intensity = max(uIntensity, 0.0);
+
+  float current = sin(p.x * 4.2 - time * 0.75) * 0.025;
+  current += sin(p.y * 5.0 + p.x * 2.3 + time * 0.55) * 0.018;
+  float vertical = p.y + current;
+  float useDay = step(0.0, uDay);
+  float day = clamp(uDay, 0.0, 1.0);
+  float capStart = mix(-0.04, -0.62 + day * 0.98, useDay);
+  float tone = mix(1.0, mix(0.2, 1.2, day), useDay);
+  vec3 bodyColor = mix(uBottomColor, uMiddleColor, smoothstep(-0.69, -0.06, vertical)) * tone;
+  bodyColor = mix(bodyColor, uTopColor, smoothstep(capStart, capStart + 0.42, vertical));
+
+  float side = smoothstep(0.35, 0.9, abs(p.x) / max(radius, 0.001));
+  float lower = 1.0 - smoothstep(-0.35, 0.38, p.y);
+  float ring = exp(-pow((radius - 0.765) / 0.03, 2.0));
+  float rimLight = ring * (0.28 + side * 0.55 + lower * 0.52) * mix(1.0, 0.35 + 0.65 * day, useDay);
+  float crest = ring * smoothstep(0.3, 0.68, p.y) * mix(1.0, 0.15 + 0.85 * day, useDay);
+  bodyColor = mix(bodyColor, uRimColor, clamp(rimLight * 0.78 * intensity, 0.0, 1.0));
+  bodyColor = mix(bodyColor, vec3(1.0, 0.94, 0.86), clamp(crest * 0.84 * intensity, 0.0, 1.0));
+
+  float bodyAlpha = 1.0 - smoothstep(0.758, 0.778, radius);
+  float halo = exp(-pow(max(radius - 0.765, 0.0) / 0.12, 2.0));
+  halo *= (0.14 + rimLight * 0.28 + crest * 0.2) * glow * intensity;
+  float crownGlow = exp(-pow(p.x / 0.48, 2.0) - pow((p.y - 0.83) / 0.16, 2.0));
+  halo += crownGlow * 0.16 * glow * intensity;
+  float outsideAlpha = clamp(halo, 0.0, 0.85) * (1.0 - smoothstep(0.84, 1.0, radius));
+  vec3 haloColor = mix(uRimColor, vec3(1.0, 0.91, 0.77), crest * 0.55 + crownGlow * 0.45);
+  float alpha = bodyAlpha + (1.0 - bodyAlpha) * outsideAlpha;
+  vec3 premultipliedColor = bodyColor * bodyAlpha;
+  premultipliedColor += haloColor * (1.0 - bodyAlpha) * outsideAlpha;
+
+  gl_FragColor = vec4(premultipliedColor, alpha);
+}
+`;
+var eclipseOrbProgram = {
+  name: "eclipseOrb",
+  fragmentSource: fragmentSource4
+};
+
+// src/runtime/viewer/shaders/builtins/emberMatrix.ts
+var fragmentSource5 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uCellCount;
+uniform float uGrain;
+uniform vec3 uBaseColor;
+uniform vec3 uTopColor;
+uniform vec3 uCoreColor;
+uniform vec3 uBottomColor;
+uniform vec3 uCoolColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+float pixelNoise(vec2 uv) {
+  vec2 pixel = floor(uv * uResolution);
+  return fract(sin(dot(pixel, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  if (radius >= 1.0) discard;
+
+  float time = uTime * max(uSpeed, 0.0);
+  float cells = max(uCellCount, 1.0);
+  vec2 grid = (p + 1.0) * cells * 0.5;
+  vec2 cell = fract(grid) - 0.5;
+  vec2 samplePoint = (floor(grid) + 0.5) * 2.0 / cells - 1.0;
+  vec2 q = samplePoint;
+  q.x += sin(samplePoint.y * 3.4 + time * 0.34) * 0.035;
+  q.y += sin(samplePoint.x * 4.0 - time * 0.29) * 0.045;
+
+  float upperCurve = 0.56 + 0.11 * sin(q.x * 3.1 + time * 0.41);
+  float topLight = band(q.y - upperCurve, 0.25) * (0.48 + 0.52 * abs(q.x));
+  topLight += band(q.x + 0.77, 0.28) * band(q.y - 0.46, 0.35) * 0.58;
+  topLight += band(q.x - 0.76, 0.28) * band(q.y - 0.43, 0.36) * 0.68;
+  topLight *= 1.0 - band(q.x + 0.02, 0.45) * band(q.y - 0.78, 0.28) * 0.88;
+
+  float coreLight = band(q.x + 0.02 + 0.08 * sin(time * 0.28), 0.58);
+  coreLight *= band(q.y + 0.19 + 0.07 * sin(q.x * 3.0 - time * 0.31), 0.44);
+  float bottomLight = band(q.y + 0.82, 0.38) * band(q.x - 0.02, 0.85);
+  float coolLight = band(q.x + 0.79, 0.31) * band(q.y + 0.03, 0.29);
+  coolLight += band(q.x - 0.89, 0.23) * band(q.y + 0.02, 0.25) * 0.48;
+
+  float centerCut = band(q.y - 0.12 + 0.08 * sin(q.x * 3.2 + time * 0.33), 0.16);
+  centerCut *= band(q.x + 0.03, 0.99);
+  float rightCut = band(q.x - 0.68, 0.35) * band(q.y + 0.37, 0.26);
+  float occlusion = clamp(centerCut * 0.78 + rightCut * 0.79, 0.0, 0.9);
+
+  vec3 color = uBaseColor;
+  color += uTopColor * topLight * 0.91;
+  color += uCoreColor * coreLight * 1.05;
+  color += uBottomColor * bottomLight * 0.86;
+  color += uCoolColor * coolLight * 0.68;
+  color *= 1.0 - occlusion;
+
+  float squareRadius = max(abs(cell.x), abs(cell.y));
+  float dot = 1.0 - smoothstep(0.23, 0.43, squareRadius);
+  color *= 0.21 + dot * 0.79;
+  float noise = (pixelNoise(vUv) - 0.5) * max(uGrain, 0.0);
+  color += vec3(noise) * (0.25 + dot * 0.75);
+
+  float edge = 1.0 - smoothstep(0.955, 0.995, radius);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0) * edge, 0.0, 1.0), edge);
+}
+`;
+var emberMatrixProgram = {
+  name: "emberMatrix",
+  fragmentSource: fragmentSource5
+};
+
+// src/runtime/viewer/shaders/builtins/emberSlits.ts
+var fragmentSource6 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uSlitCount;
+uniform float uOrientation;
+uniform bool uHole;
+uniform float uHoleSize;
+uniform float uGlow;
+uniform float uMotion;
+uniform vec3 uHotColor;
+uniform vec3 uCoreColor;
+uniform vec3 uHighlightColor;
+varying vec2 vUv;
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float time = uTime * max(uSpeed, 0.0);
+  float motion = max(uMotion, 0.0);
+  float radius = length(p);
+
+  float wave = sin(p.y * 6.4 - time * 0.9) * 0.04 * motion;
+  wave += sin(p.x * 5.1 + time * 0.6) * 0.026 * motion;
+  float ringRadius = length(p + vec2(wave, 0.0));
+  float holeSize = clamp(uHoleSize, 0.0, 0.72);
+  float ring = uHole ? smoothstep(holeSize - 0.08, holeSize + 0.08, ringRadius) : 1.0;
+  ring *= 1.0 - smoothstep(0.65, 0.83, ringRadius);
+  float ringCore = bell(ringRadius - 0.56, 0.19);
+
+  float count = clamp(uSlitCount, 12.0, 90.0);
+  vec2 slitPoint = uOrientation < 0.5 ? p : vec2(p.y, p.x);
+  float phase = slitPoint.x * count * 3.14159265;
+  phase += sin(slitPoint.y * 3.6 - time * 0.95) * 0.75 * motion;
+  phase += time * 2.2 * motion;
+  float bars = pow(0.5 + 0.5 * cos(phase), 1.9);
+  float slit = 0.12 + 0.88 * bars;
+  float sideFade = 1.0 - smoothstep(0.67, 0.91, abs(p.x));
+
+  float upperLight = bell(p.y - 0.45 - sin(time * 0.6) * 0.1 * motion, 0.21);
+  float lowerLight = bell(p.y + 0.48 + sin(time * 0.5 + 1.7) * 0.1 * motion, 0.24);
+  vec3 heat = mix(uHotColor, uCoreColor, smoothstep(-0.57, 0.55, p.y));
+  heat = mix(heat, uHighlightColor, upperLight * 0.45 + lowerLight * 0.28);
+  float molten = ring * slit * sideFade;
+  vec3 color = heat * molten * (0.64 + ringCore * 0.68);
+
+  float verticalTrail = bell(max(ringRadius - 0.69, 0.0), 0.24);
+  verticalTrail *= smoothstep(0.25, 0.75, abs(p.y));
+  verticalTrail *= slit * sideFade;
+  float bloom = bell(ringRadius - 0.57, 0.29) * ring;
+  float glow = max(uGlow, 0.0);
+  float glowMask = (verticalTrail * 0.25 + bloom * 0.17) * glow;
+  color += heat * glowMask;
+
+  float frameFade = 1.0 - smoothstep(0.89, 1.0, max(abs(p.x), abs(p.y)));
+  float alpha = clamp((molten * 0.92 + glowMask) * frameFade * max(uIntensity, 0.0), 0.0, 1.0);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0), 0.0, 1.0) * alpha, alpha);
+}
+`;
+var emberSlitsProgram = {
+  name: "emberSlits",
+  fragmentSource: fragmentSource6
+};
+
+// src/runtime/viewer/shaders/builtins/glassRefraction.ts
+var fragmentSource7 = `
+precision highp float;
+
+uniform sampler2D uBackdrop;
+uniform vec2 uBackdropOrigin;
+uniform vec2 uBackdropScale;
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uIor;
+uniform float uRefraction;
+uniform float uRoughness;
+uniform float uChromaticAberration;
+uniform float uEdgeLight;
+uniform vec3 uTint;
+uniform vec3 uEdgeColor;
+varying vec2 vUv;
+
+float hash(vec2 point) {
+  return fract(sin(dot(point, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+float smoothNoise(vec2 point) {
+  vec2 cell = floor(point);
+  vec2 local = fract(point);
+  local = local * local * (3.0 - 2.0 * local);
+  float a = hash(cell);
+  float b = hash(cell + vec2(1.0, 0.0));
+  float c = hash(cell + vec2(0.0, 1.0));
+  float d = hash(cell + vec2(1.0, 1.0));
+  return mix(mix(a, b, local.x), mix(c, d, local.x), local.y);
+}
+
+void main() {
+  float time = uTime * max(uSpeed, 0.0);
+  vec2 sphereOffset = vec2(
+    sin(time * 0.72) * 0.04,
+    cos(time * 0.56) * 0.026
+  );
+  float sphereScale = 0.95;
+  vec2 p = (vUv * 2.0 - 1.0 - sphereOffset) / sphereScale;
+  float radius = length(p);
+  if (radius >= 1.0) discard;
+
+  float roughness = max(uRoughness, 0.0);
+  vec2 flow = vec2(
+    smoothNoise(p * 2.4 + vec2(0.7, -0.3)),
+    smoothNoise(p * 2.8 + vec2(-0.4, 0.8))
+  ) - 0.5;
+  float sphereDepth = sqrt(max(1.0 - radius * radius, 0.0));
+  vec2 glassMotion = vec2(
+    sin(p.y * 3.2 + 0.6),
+    cos(p.x * 2.8 - 0.35)
+  ) * 0.014;
+  vec3 surfaceNormal = normalize(vec3(p + glassMotion + flow * roughness * 0.22, sphereDepth));
+  float eta = 1.0 / max(uIor, 1.001);
+  vec3 refracted = refract(vec3(0.0, 0.0, -1.0), surfaceNormal, eta);
+  vec2 distortion = refracted.xy * max(uRefraction, 0.0);
+  distortion += flow * (0.008 + roughness * 0.025);
+
+  vec2 backdropUv = uBackdropOrigin + vUv * uBackdropScale;
+  vec2 refractedUv = clamp(backdropUv + distortion * uBackdropScale, 0.001, 0.999);
+  float chroma = max(uChromaticAberration, 0.0) * 0.012;
+  vec2 chromaOffset = normalize(distortion + vec2(0.0001)) * chroma * uBackdropScale;
+  float red = texture2D(uBackdrop, clamp(refractedUv + chromaOffset, 0.001, 0.999)).r;
+  float green = texture2D(uBackdrop, refractedUv).g;
+  float blue = texture2D(uBackdrop, clamp(refractedUv - chromaOffset, 0.001, 0.999)).b;
+  vec3 sharpBackdrop = vec3(red, green, blue);
+  vec2 texel = uBackdropScale / max(uResolution, vec2(1.0));
+  vec2 blurOffset = texel * (0.65 + roughness * 5.0);
+  vec3 blurredBackdrop = texture2D(uBackdrop, refractedUv + vec2(blurOffset.x, 0.0)).rgb;
+  blurredBackdrop += texture2D(uBackdrop, refractedUv - vec2(blurOffset.x, 0.0)).rgb;
+  blurredBackdrop += texture2D(uBackdrop, refractedUv + vec2(0.0, blurOffset.y)).rgb;
+  blurredBackdrop += texture2D(uBackdrop, refractedUv - vec2(0.0, blurOffset.y)).rgb;
+  blurredBackdrop *= 0.25;
+  vec3 backdrop = mix(sharpBackdrop, blurredBackdrop, clamp(roughness * 1.15, 0.0, 1.0));
+
+  float fresnel = pow(1.0 - sphereDepth, 2.35);
+  float innerRim = smoothstep(0.72, 0.995, radius);
+  vec2 fixedLightPosition = vec2(-0.46, 0.7);
+  vec2 surfacePosition = sphereOffset + p * sphereScale * 0.22;
+  vec3 lightDirection = normalize(vec3(fixedLightPosition - surfacePosition, 0.62));
+  float highlight = pow(max(dot(lightDirection, surfaceNormal), 0.0), 28.0);
+  float hotSpot = pow(max(dot(lightDirection, surfaceNormal), 0.0), 92.0);
+  float angle = atan(p.y, p.x);
+  float lightAngle = atan(lightDirection.y, lightDirection.x);
+  float movingRim = 0.68 + 0.32 * sin(angle * 2.0 - lightAngle);
+  float rimGlint = pow(max(cos(angle - lightAngle), 0.0), 20.0) * innerRim;
+  vec3 color = mix(backdrop, backdrop * uTint, 0.025 + fresnel * 0.09);
+  color += uEdgeColor * innerRim * max(uEdgeLight, 0.0) * (0.1 + fresnel * 0.5) * movingRim;
+  color += uEdgeColor * rimGlint * max(uEdgeLight, 0.0) * 0.72;
+  color += uEdgeColor * highlight * 0.5;
+  color += vec3(1.0) * hotSpot * 0.58;
+  color += vec3(1.0) * fresnel * 0.05;
+  color *= max(uIntensity, 0.0);
+
+  float edgeWidth = 2.2 / max(min(uResolution.x, uResolution.y), 1.0);
+  float edgeAlpha = 1.0 - smoothstep(1.0 - edgeWidth, 1.0, radius);
+  vec3 finalColor = clamp(color, 0.0, 1.0) * edgeAlpha;
+  gl_FragColor = vec4(finalColor, edgeAlpha);
+}
+`;
+var glassRefractionProgram = {
+  name: "glassRefraction",
+  fragmentSource: fragmentSource7,
+  usesBackdrop: true
+};
+
+// src/runtime/viewer/shaders/builtins/halftoneHalo.ts
+var fragmentSource8 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uDotCount;
+uniform float uRingRadius;
+uniform float uRingWidth;
+uniform float uGlow;
+uniform float uMotion;
+uniform vec3 uWarmColor;
+uniform vec3 uLightColor;
+uniform vec3 uCoolColor;
+varying vec2 vUv;
+
+mat2 rotate(float angle) {
+  float sine = sin(angle);
+  float cosine = cos(angle);
+  return mat2(cosine, -sine, sine, cosine);
+}
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+
+  float speed = max(uSpeed, 0.0);
+  float motion = max(uMotion, 0.0);
+  float time = uTime * speed;
+  float rotation = time * 0.08 * motion;
+  vec2 gridPosition = rotate(rotation) * p;
+  float cells = max(uDotCount, 8.0);
+  vec2 grid = (gridPosition + 1.0) * cells * 0.5;
+  vec2 cell = fract(grid) - 0.5;
+  vec2 samplePoint = (floor(grid) + 0.5) * 2.0 / cells - 1.0;
+  samplePoint = rotate(-rotation) * samplePoint;
+
+  float angle = atan(samplePoint.y, samplePoint.x);
+  float radius = length(samplePoint);
+  float travelingWave = sin(angle * 3.0 - time * 0.72) * 0.024 * motion;
+  travelingWave += sin(angle * 7.0 + time * 0.31) * 0.009 * motion;
+  float ringRadius = clamp(uRingRadius, 0.2, 0.92) + travelingWave;
+  float ringWidth = max(uRingWidth, 0.025);
+  float ring = bell(radius - ringRadius, ringWidth);
+
+  float lowerBloom = bell(samplePoint.x + 0.08, 0.72) * bell(samplePoint.y + 0.56, 0.42);
+  float upperArc = bell(radius - ringRadius + 0.025, ringWidth * 0.7) * smoothstep(-0.18, 0.72, samplePoint.y);
+  float light = clamp(ring * (0.58 + lowerBloom * 0.64 + upperArc * 0.25), 0.0, 1.0);
+  float shimmer = 0.9 + 0.1 * sin(angle * 9.0 + time * 0.48);
+  float dotRadius = mix(0.055, 0.43, pow(light, 0.72) * shimmer);
+  float dotDistance = length(cell);
+  float dot = 1.0 - smoothstep(dotRadius - 0.045, dotRadius + 0.045, dotDistance);
+
+  float warmWeight = smoothstep(-0.22, 0.72, samplePoint.y);
+  warmWeight *= 0.76 + 0.24 * (1.0 - smoothstep(-0.45, 0.72, samplePoint.x));
+  float coolWeight = smoothstep(-0.85, 0.42, samplePoint.x);
+  coolWeight *= 1.0 - smoothstep(-0.78, 0.3, samplePoint.y);
+  vec3 color = mix(uLightColor, uWarmColor, clamp(warmWeight, 0.0, 1.0));
+  color = mix(color, uCoolColor, clamp(coolWeight * 0.72, 0.0, 0.82));
+  color = mix(color, uLightColor, lowerBloom * ring * 0.58);
+
+  float circleMask = 1.0 - smoothstep(0.965, 1.0, length(p));
+  float dotAlpha = dot * pow(light, 0.82) * smoothstep(0.06, 0.24, light) * circleMask;
+  float glow = bell(length(p) - ringRadius, ringWidth * 1.75) * max(uGlow, 0.0) * 0.17;
+  glow *= circleMask;
+  float alpha = clamp((dotAlpha + glow) * max(uIntensity, 0.0), 0.0, 1.0);
+  vec3 glowColor = mix(uWarmColor, uCoolColor, 1.0 - smoothstep(-0.75, 0.55, samplePoint.y));
+  vec3 finalColor = color * dotAlpha + glowColor * glow;
+
+  gl_FragColor = vec4(clamp(finalColor * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var halftoneHaloProgram = {
+  name: "halftoneHalo",
+  fragmentSource: fragmentSource8
+};
+
+// src/runtime/viewer/shaders/builtins/halo.ts
+var fragmentSource9 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform float uIntensity;
+uniform float uSpeed;
+uniform float uThickness;
+uniform float uProgress;
+uniform float uBoost;
+varying vec2 vUv;
+
+const float TWO_PI = 6.28318530718;
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  if (radius > 1.0) discard;
+
+  float angle = atan(p.y, p.x);
+  float time = uTime * max(uSpeed, 0.0);
+  float controlled = step(0.0, uProgress);
+  float progress = clamp(uProgress, 0.0, 1.0);
+  float boost = clamp(uBoost, 0.0, 1.0);
+  float width = max(uThickness, 0.015);
+  float wave = sin(angle * 2.0 - time * 2.4) * 0.5 + 0.5;
+  float fineWave = sin(angle * 7.0 + time * 1.15) * 0.5 + 0.5;
+  float ringRadius = 0.72 + sin(angle * 3.0 - time * 1.5) * (0.025 + boost * 0.012);
+  float ring = exp(-pow((radius - ringRadius) / width, 2.0));
+  float outerRim = exp(-pow((radius - 0.94) / 0.025, 2.0));
+
+  float startAngle = -2.35;
+  float sweep = 4.70;
+  float arcPosition = mod(startAngle - angle + TWO_PI, TWO_PI);
+  float arcHead = progress * sweep;
+  float idleTravel = sin(time * 0.82) * 0.025 * (1.0 - boost);
+  float displayedHead = clamp(arcHead + idleTravel, 0.0, sweep);
+  float arcEdge = 0.025;
+  float arcMask = (1.0 - smoothstep(displayedHead - arcEdge, displayedHead + arcEdge, arcPosition));
+  arcMask *= 1.0 - step(sweep, arcPosition);
+  float arcActive = smoothstep(0.0, 0.012, progress);
+  arcMask *= arcActive;
+
+  float ambientHead = -2.25 + sin(time * 0.45) * 0.35;
+  float progressHead = startAngle - displayedHead;
+  float headAngle = mix(ambientHead, progressHead, controlled);
+  float angleFromHead = atan(sin(angle - headAngle), cos(angle - headAngle));
+  float flare = exp(-pow(angleFromHead / (0.18 + boost * 0.035), 2.0));
+  flare *= exp(-pow((radius - 0.73) / 0.12, 2.0));
+  float ambientBand = ring * (0.32 + wave * 0.38);
+  float startDelta = atan(sin(angle - startAngle), cos(angle - startAngle));
+  float radialDelta = radius - ringRadius;
+  float startCapDistance = length(vec2(radialDelta, startDelta * ringRadius));
+  float endCapDistance = length(vec2(radialDelta, angleFromHead * ringRadius));
+  float roundedCaps = max(
+    exp(-pow(startCapDistance / width, 2.0)),
+    exp(-pow(endCapDistance / width, 2.0))
+  ) * arcActive;
+  float progressShape = max(ring * arcMask, roundedCaps);
+  float progressBand = progressShape * (0.72 + boost * 0.55);
+  float idleBand = ring * (0.16 + wave * 0.16 + fineWave * 0.06);
+  float band = mix(ambientBand, idleBand + progressBand, controlled);
+  float pulse = 1.0 + boost * (0.18 + sin(time * 8.0) * 0.08);
+  float energy = clamp((band + outerRim * (0.24 + boost * 0.12) + flare * (1.35 + boost * 0.55) + fineWave * ring * 0.12) * uIntensity * pulse, 0.0, 1.0);
+  vec3 base = uColor * (0.1 + 0.28 * (1.0 - radius));
+  vec3 color = mix(base, uAccent, energy);
+  color += uAccent * flare * (0.3 + boost * 0.35);
+  float alpha = 1.0 - smoothstep(0.96, 1.0, radius);
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+var haloProgram = {
+  name: "halo",
+  fragmentSource: fragmentSource9
+};
+
+// src/runtime/viewer/shaders/builtins/lumenPortal.ts
+var fragmentSource10 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform vec3 uBaseColor;
+uniform vec3 uCoolColor;
+uniform vec3 uWarmColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float time = uTime * max(uSpeed, 0.0);
+  vec2 q = p;
+  q.x += sin(p.y * 4.0 + time * 0.58) * 0.02;
+  q.y += sin(p.x * 3.3 - time * 0.43) * 0.013;
+  float distance = length(q) - 0.64;
+  float body = 1.0 - smoothstep(-0.012, 0.01, distance);
+  float nearGlow = band(max(distance, 0.0), 0.19) * 0.62;
+  float wideGlow = band(max(distance, 0.0), 0.48) * 0.3;
+  float frameFade = 1.0 - smoothstep(0.88, 1.0, length(p));
+  float halo = max(nearGlow, wideGlow) * frameFade;
+  float alpha = body + (1.0 - body) * halo;
+  if (alpha < 0.002) discard;
+
+  float vertical = 0.5 + 0.5 * q.y;
+  float warmWeight = smoothstep(-0.44, 0.42, q.x + q.y * 0.14 + sin(time * 0.62 + q.y * 3.0) * 0.065);
+  vec3 glowColor = mix(uCoolColor, uWarmColor, warmWeight);
+  float breath = 0.78 + 0.22 * sin(time * 1.12 + q.y * 3.0);
+  float rim = band(distance + 0.014, 0.042);
+  float edge = band(distance + 0.006, 0.014);
+  float bevel = band(distance + 0.092, 0.07);
+
+  vec3 color = uBaseColor * (0.62 + 0.23 * vertical);
+  color += uWarmColor * smoothstep(-0.68, 0.6, q.x) * 0.13;
+  color += uWarmColor * band(q.x - 0.38, 0.32) * band(q.y + 0.14, 0.74) * 0.11;
+  color += uCoolColor * band(q.x + 0.28, 0.42) * band(q.y - 0.47, 0.35) * 0.11;
+  color *= 1.0 - band(q.x - 0.06, 0.3) * band(q.y + 0.2, 0.5) * 0.46;
+  color += glowColor * bevel * 0.14;
+  color += glowColor * rim * 0.41 * breath;
+  color += mix(uCoolColor, vec3(1.0), 0.45) * edge * (1.0 - warmWeight) * 0.43;
+  color += mix(uWarmColor, vec3(1.0), 0.38) * edge * warmWeight * 0.45;
+
+  float topFlare = band(q.y - 0.6, 0.07) * band(q.x + 0.2, 0.28);
+  float bottomFlare = band(q.y + 0.61, 0.07) * band(q.x - 0.15, 0.35);
+  color += uCoolColor * topFlare * 0.39;
+  color += uWarmColor * bottomFlare * 0.31;
+  vec3 premultiplied = color * body + glowColor * (1.0 - body) * halo * breath;
+  gl_FragColor = vec4(clamp(premultiplied * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var lumenPortalProgram = {
+  name: "lumenPortal",
+  fragmentSource: fragmentSource10
+};
+
+// src/runtime/viewer/shaders/builtins/lumenPortalLight.ts
+var fragmentSource11 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform vec3 uBaseColor;
+uniform vec3 uCoolColor;
+uniform vec3 uWarmColor;
+uniform vec3 uShadowColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float time = uTime * max(uSpeed, 0.0);
+  vec2 q = p;
+  q.x += sin(p.y * 4.1 + time * 0.55) * 0.013;
+  q.y += sin(p.x * 3.4 - time * 0.41) * 0.01;
+  float distance = length(q) - 0.65;
+  float body = 1.0 - smoothstep(-0.012, 0.012, distance);
+  float nearHalo = band(max(distance, 0.0), 0.12) * 0.19;
+  float wideHalo = band(max(distance, 0.0), 0.28) * 0.055;
+  float frameFade = 1.0 - smoothstep(0.89, 1.0, length(p));
+  float outside = max(nearHalo, wideHalo) * frameFade;
+  float alpha = body * 0.96 + (1.0 - body) * outside;
+  if (alpha < 0.002) discard;
+
+  float warmWeight = smoothstep(-0.46, 0.47, q.x + q.y * 0.17 + sin(time * 0.58 + q.y * 3.0) * 0.052);
+  vec3 rimColor = mix(uCoolColor, uWarmColor, warmWeight);
+  float breath = 0.84 + 0.16 * sin(time * 0.91 + q.y * 2.5);
+  float innerRim = band(distance + 0.038, 0.052);
+  float outerRim = band(distance + 0.002, 0.025);
+  float fineEdge = band(distance + 0.008, 0.01);
+  float bevelShade = band(distance + 0.11, 0.055);
+
+  vec3 color = uBaseColor;
+  color = mix(color, uCoolColor, band(q.x + 0.27, 0.39) * band(q.y - 0.35, 0.43) * 0.09);
+  color = mix(color, uWarmColor, band(q.x - 0.31, 0.43) * band(q.y + 0.31, 0.48) * 0.085);
+  color = mix(color, uShadowColor, bevelShade * 0.11);
+  color = mix(color, rimColor, innerRim * 0.46 * breath);
+  color = mix(color, rimColor, outerRim * 0.62 * breath);
+  color = mix(color, uShadowColor, fineEdge * 0.12);
+
+  float topGlint = band(q.y - 0.6, 0.06) * band(q.x + 0.2, 0.22);
+  float bottomGlint = band(q.y + 0.61, 0.06) * band(q.x - 0.16, 0.29);
+  color += uCoolColor * topGlint * 0.12;
+  color += uWarmColor * bottomGlint * 0.1;
+
+  vec3 premultiplied = color * body * 0.96;
+  premultiplied += mix(uShadowColor, rimColor, 0.58) * (1.0 - body) * outside * breath;
+  gl_FragColor = vec4(clamp(premultiplied * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var lumenPortalLightProgram = {
+  name: "lumenPortalLight",
+  fragmentSource: fragmentSource11
+};
+
+// src/runtime/viewer/shaders/builtins/orb.ts
+var fragmentSource12 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform float uIntensity;
+uniform float uSpeed;
+varying vec2 vUv;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  if (radius > 1.0) discard;
+
+  float angle = atan(p.y, p.x);
+  float time = uTime * max(uSpeed, 0.0);
+  float fold = sin(angle * 3.0 - time * 1.7 + radius * 7.0);
+  float ribbon = exp(-pow(radius - (0.69 + fold * 0.07), 2.0) * 95.0);
+  float rim = smoothstep(0.58, 0.98, radius) * (1.0 - smoothstep(0.94, 1.0, radius));
+  float light = exp(-length(p - vec2(-0.42, -0.34)) * 4.2);
+  float grain = (hash(gl_FragCoord.xy + time) - 0.5) * 0.035;
+  float energy = clamp((ribbon * 0.8 + rim * 0.55 + light * 0.7) * uIntensity, 0.0, 1.0);
+  vec3 color = mix(uColor * (0.12 + 0.32 * (1.0 - radius)), uAccent, energy);
+  color += grain;
+  float alpha = 1.0 - smoothstep(0.94, 1.0, radius);
+  gl_FragColor = vec4(color, alpha);
+}
+`;
+var orbProgram = {
+  name: "orb",
+  fragmentSource: fragmentSource12
+};
+
+// src/runtime/viewer/shaders/builtins/pixelConstellation.ts
+var fragmentSource13 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uCellCount;
+uniform float uDensity;
+uniform vec3 uBaseColor;
+uniform vec3 uTopColor;
+uniform vec3 uWarmColor;
+uniform vec3 uCenterColor;
+uniform vec3 uVioletColor;
+uniform vec3 uBottomColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float noise(vec2 p) {
+  vec2 cell = floor(p);
+  vec2 blend = fract(p);
+  blend = blend * blend * (3.0 - 2.0 * blend);
+  float lower = mix(hash(cell), hash(cell + vec2(1.0, 0.0)), blend.x);
+  float upper = mix(hash(cell + vec2(0.0, 1.0)), hash(cell + vec2(1.0, 1.0)), blend.x);
+  return mix(lower, upper, blend.y);
+}
+
+vec3 strandColor(float y) {
+  vec3 color = mix(uBottomColor, uVioletColor, smoothstep(-0.9, -0.43, y));
+  color = mix(color, uCenterColor, smoothstep(-0.38, 0.05, y));
+  color = mix(color, uWarmColor, smoothstep(0.14, 0.48, y));
+  return mix(color, uTopColor, smoothstep(0.64, 0.9, y));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  if (radius >= 1.0) discard;
+
+  float time = uTime * max(uSpeed, 0.0);
+  float cells = max(uCellCount, 1.0);
+  vec2 grid = (p + 1.0) * cells * 0.5;
+  vec2 cellId = floor(grid);
+  vec2 q = (cellId + 0.5) * 2.0 / cells - 1.0;
+  vec2 flow = vec2(
+    0.1 * sin(time * 0.48 + q.y * 2.6),
+    0.08 * cos(time * 0.4 + q.x * 2.1)
+  );
+  vec2 movingQ = q + flow;
+
+  float path = -0.29 + 0.19 * sin(movingQ.y * 4.0 + time * 0.27);
+  path += 0.09 * sin(movingQ.y * 7.7 - time * 0.19);
+  float strand = band(movingQ.x - path, 0.26) * 0.11;
+  float top = band(movingQ.x + 0.52, 0.28) * band(movingQ.y - 0.78, 0.19) * 0.75;
+  float warm = band(movingQ.x + 0.46, 0.2) * band(movingQ.y - 0.47, 0.23) * 0.76;
+  float center = band(movingQ.x + 0.06, 0.25) * band(movingQ.y - 0.02, 0.21) * 1.14;
+  float lower = band(movingQ.x + 0.38, 0.32) * band(movingQ.y + 0.48, 0.27) * 0.86;
+  float bottom = band(movingQ.x + 0.56, 0.36) * band(movingQ.y + 0.85, 0.19) * 0.88;
+  float blue = band(movingQ.x - 0.28, 0.19) * band(movingQ.y + 0.64, 0.18) * 0.94;
+  float field = strand + top + warm + center + lower + bottom + blue;
+  field *= 0.35 + 1.25 * noise(movingQ * 5.1 + vec2(time * 0.075, -time * 0.04));
+
+  float chance = clamp(field * max(uDensity, 0.0), 0.0, 0.96);
+  float seed = hash(cellId);
+  float active = smoothstep(seed - 0.055, seed + 0.055, chance);
+  vec2 local = fract(grid) - 0.5;
+  local -= vec2(
+    0.11 * sin(time * 0.72 + seed * 6.28318),
+    0.11 * cos(time * 0.61 + seed * 4.71239)
+  );
+  float growth = 0.78 + 0.34 * (0.5 + 0.5 * sin(time * 0.83 + seed * 5.3));
+  float size = mix(0.27, 0.34, hash(cellId + vec2(19.3, 7.1))) * growth;
+  float squareRadius = max(abs(local.x), abs(local.y));
+  float outer = 1.0 - smoothstep(size - 0.045, size + 0.015, squareRadius);
+  float inner = 1.0 - smoothstep(size - 0.17, size - 0.105, squareRadius);
+  float outline = max(outer - inner, 0.0);
+  float glow = band(squareRadius - size + 0.075, 0.115) * 0.24;
+
+  float pulse = 0.76 + 0.24 * sin(time * 1.1 - q.y * 5.1 + seed * 6.28318);
+  float variation = 0.43 + 0.57 * hash(cellId + vec2(3.7, 27.4));
+  float highlight = band(movingQ.x + 0.07, 0.25) * band(movingQ.y - 0.02, 0.24);
+  vec3 colorSum = strandColor(movingQ.y) * strand;
+  colorSum += uTopColor * top + uWarmColor * warm + uCenterColor * center;
+  colorSum += uVioletColor * lower + uBottomColor * (bottom + blue);
+  vec3 cellColor = colorSum / max(strand + top + warm + center + lower + bottom + blue, 0.001);
+  cellColor = mix(cellColor, vec3(1.0, 0.96, 0.76), highlight * 0.54);
+  vec3 color = uBaseColor + cellColor * active * variation * pulse * (outline + glow);
+
+  float edge = 1.0 - smoothstep(0.965, 0.997, radius);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0) * edge, 0.0, 1.0), edge);
+}
+`;
+var pixelConstellationProgram = {
+  name: "pixelConstellation",
+  fragmentSource: fragmentSource13
+};
+
+// src/runtime/viewer/shaders/builtins/plasmaGauge.ts
+var fragmentSource14 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uProgress;
+uniform float uDent;
+uniform float uBoost;
+uniform float uFlare;
+uniform float uStart;
+uniform float uSweep;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform vec3 uHot;
+varying vec2 vUv;
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+float wrap(float angle) {
+  return atan(sin(angle), cos(angle));
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float time = uTime * max(uSpeed, 0.0);
+  float radius = length(p);
+  float angle = atan(p.y, p.x);
+
+  float sweep = radians(uSweep > 0.0 ? uSweep : 270.0);
+  float start = radians(uStart != 0.0 ? uStart : 225.0);
+  float progress = clamp(uProgress < 0.0 ? 0.35 : uProgress, 0.0, 1.0);
+  float needleAngle = start - progress * sweep;
+  float delta = wrap(angle - needleAngle);
+
+  float dentValue = clamp(uDent < 0.0 ? progress : uDent, 0.0, 1.0);
+  float engage = smoothstep(0.0, 0.28, dentValue);
+  float boost = smoothstep(0.0, 1.0, clamp(uBoost, 0.0, 1.0));
+  float energy = smoothstep(0.0, 1.0, dentValue);
+  float level = (uFlare > 0.0 ? uFlare : 1.0) * engage * (0.45 + 0.5 * energy + 0.3 * boost);
+
+  float heat = smoothstep(0.15, 1.0, clamp(0.75 * energy + 0.5 * boost, 0.0, 1.0));
+  vec3 cool = mix(uAccent, vec3(0.18, 0.28, 0.95), 0.55);
+  vec3 hot = uHot;
+  vec3 tint = mix(cool, hot, heat);
+
+  float ripple = 0.5 + 0.5 * sin(delta * 9.0 - time * 1.4);
+  float wake = (progress - dentValue) * sweep;
+  float lo = min(0.0, wake);
+  float hi = max(0.0, wake);
+  float segment = delta < lo ? lo - delta : (delta > hi ? delta - hi : 0.0);
+  float wakePos = hi > lo ? clamp((delta - lo) / (hi - lo), 0.0, 1.0) : 0.0;
+  float fromNeedle = wake >= 0.0 ? wakePos : 1.0 - wakePos;
+  float taper = mix(1.0, 0.45, fromNeedle * smoothstep(0.02, 0.2, abs(wake)));
+  float dent = bell(segment, 0.13 + 0.02 * ripple) * (0.82 + 0.18 * ripple) * taper;
+  float shoulder = bell(delta, 0.34);
+  float ahead = wake >= 0.0 ? -1.0 : 1.0;
+  float pile = bell(delta - ahead * 0.17, 0.15) * clamp(abs(wake) * 2.2, 0.0, 1.0) * engage;
+  float baseRadius = 0.72;
+  float orbRadius = baseRadius * (1.0 - 0.32 * level * dent - 0.07 * level * shoulder + 0.13 * pile);
+  float body = 1.0 - smoothstep(orbRadius - 0.012, orbRadius + 0.012, radius);
+  float depth = clamp(radius / orbRadius, 0.0, 1.25);
+  float roundDepth = clamp(radius / baseRadius, 0.0, 1.2);
+
+  float local = clamp(heat * (0.7 + 0.3 * bell(delta, 0.9)) + 0.25 * heat * bell(delta, 0.3), 0.0, 1.0);
+  vec3 rim = mix(cool, hot, local);
+  vec3 bodyColor = mix(uColor, rim * (0.5 + 0.25 * energy), pow(roundDepth, 2.6));
+  bodyColor += mix(uAccent, hot, local) * (0.26 + 0.3 * energy) * bell(roundDepth - 0.93, 0.13);
+  bodyColor *= (0.82 + 0.18 * smoothstep(-0.5, 0.5, -p.x)) * (0.9 + 0.6 * energy * energy);
+
+  float ribbons = 0.5 + 0.5 * sin(depth * 24.0 - delta * 8.0 + time * 1.1);
+  float zone = max(bell(delta, 0.3), dent * 0.8) * bell(depth - 0.84, 0.32) * level * (1.0 + 0.9 * energy);
+  vec3 ribbonColor = mix(tint, hot, smoothstep(0.2, 0.9, ribbons) * (0.35 + 0.65 * heat));
+  bodyColor = mix(bodyColor, ribbonColor, clamp(zone * (0.4 + 0.45 * ribbons), 0.0, 1.0));
+  float edge = max(max(bell(delta, 0.2), dent * 0.7), pile * 0.8) * bell(depth - 0.99, 0.09) * level;
+  bodyColor += mix(hot, vec3(1.0, 0.92, 1.0), 0.45) * edge * (0.45 + 1.3 * energy);
+
+  float outside = max(radius - orbRadius, 0.0);
+  float notchLight = max(max(bell(delta, 0.2), dent * 0.8), pile * 0.6) * level;
+  float halo = exp(-outside * (12.0 - 6.0 * notchLight * (0.4 + energy))) * (1.0 - body) * (0.2 + 0.5 * energy * energy + 0.9 * notchLight * (0.5 + energy));
+  vec3 haloColor = mix(tint, hot, clamp(notchLight * 1.2, 0.0, 1.0));
+
+  float cross = abs(p.x * sin(needleAngle) - p.y * cos(needleAngle));
+  float along = p.x * cos(needleAngle) + p.y * sin(needleAngle);
+  float needleSpan = smoothstep(0.1, 0.2, along) * (1.0 - smoothstep(0.9, 0.96, along));
+  float needle = smoothstep(0.0055, 0.0008, cross) * needleSpan;
+  float needleGlow = bell(cross, 0.02) * needleSpan * (0.25 + 0.35 * energy);
+
+  vec3 color = bodyColor * body + haloColor * halo + vec3(1.0, 0.94, 1.0) * needle + hot * needleGlow;
+  float alpha = max(max(body, clamp(halo, 0.0, 1.0)), max(needle, needleGlow * 0.8));
+
+  float fade = 1.0 - smoothstep(0.88, 0.99, radius);
+  float gain = max(uIntensity, 0.0) * fade;
+  gl_FragColor = vec4(clamp(color * gain, 0.0, 1.0), clamp(alpha * gain, 0.0, 1.0));
+}
+`;
+var plasmaGaugeProgram = {
+  name: "plasmaGauge",
+  fragmentSource: fragmentSource14,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/prismSlats.ts
+var fragmentSource15 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uRibCount;
+uniform float uGrain;
+uniform vec3 uBaseColor;
+uniform vec3 uCoolColor;
+uniform vec3 uWarmColor;
+uniform vec3 uHighlightColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+float lightField(vec2 p, float time) {
+  float upperCurve = 0.43 + 0.16 * sin(p.x * 2.8 + time * 0.58) - p.x * 0.08;
+  float lowerCurve = -0.46 + 0.13 * sin(p.x * 2.9 - time * 0.43 + 1.4);
+  float upper = band(p.y - upperCurve, 0.2) * band(p.x + 0.03, 0.88);
+  float lower = band(p.y - lowerCurve, 0.19) * band(p.x - 0.05, 0.85);
+  float leftColumn = band(p.x + 0.39 + 0.1 * sin(p.y * 2.9 + time * 0.5), 0.23);
+  leftColumn *= band(p.y + 0.01, 0.59);
+  float centerShadow = 1.0 - band(p.x - 0.35, 0.46) * band(p.y + 0.01, 0.28) * 0.9;
+  float drift = 0.84 + 0.16 * sin(p.x * 3.5 - p.y * 2.2 + time * 0.72);
+  return clamp((upper + lower + leftColumn * 0.74) * centerShadow * drift, 0.0, 1.5);
+}
+
+float grain(vec2 uv) {
+  vec2 pixel = floor(uv * uResolution);
+  return fract(sin(dot(pixel, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float radius = length(p);
+  if (radius >= 1.0) discard;
+  float time = uTime * max(uSpeed, 0.0);
+
+  float field = lightField(p, time);
+  float redField = lightField(p + vec2(0.027, 0.0), time);
+  float blueField = lightField(p - vec2(0.027, 0.0), time);
+  float coolRegion = band(p.x + 0.58, 0.38) * 0.74;
+  float warmRegion = band(p.x + 0.02, 0.34) * band(p.y + 0.08, 0.75) * 0.88;
+  vec3 spectralTint = mix(uHighlightColor, uCoolColor, coolRegion);
+  spectralTint = mix(spectralTint, uWarmColor, warmRegion);
+  vec3 light = spectralTint * field * 1.25;
+  light += uWarmColor * max(redField - blueField, 0.0) * 2.6;
+  light += uCoolColor * max(blueField - redField, 0.0) * 2.6;
+
+  float ribCoordinate = (p.x + 1.0) * max(uRibCount, 1.0) * 0.5;
+  float rib = fract(ribCoordinate);
+  float glassFace = smoothstep(0.08, 0.18, rib) * (1.0 - smoothstep(0.77, 0.94, rib));
+  float groove = 1.0 - glassFace;
+  float refraction = 0.8 + 0.2 * sin(rib * 3.14159);
+  vec3 color = uBaseColor + light * (0.12 + glassFace * 0.95) * refraction;
+  color *= 1.0 - groove * 0.83;
+
+  float leftEdge = band(rib - 0.18, 0.028);
+  float rightEdge = band(rib - 0.79, 0.04);
+  color += mix(uCoolColor, uHighlightColor, 0.48) * leftEdge * (0.07 + field * 0.19);
+  color += uHighlightColor * rightEdge * (0.025 + field * 0.075);
+  color += uCoolColor * band(p.x + 0.78, 0.28) * band(p.y, 0.7) * 0.09;
+
+  float noise = (grain(vUv) - 0.5) * max(uGrain, 0.0);
+  color += vec3(noise) * (0.18 + field * 0.82);
+  float fade = 1.0 - smoothstep(0.88, 1.0, radius);
+  gl_FragColor = vec4(clamp(color * max(uIntensity, 0.0) * fade, 0.0, 1.0), fade);
+}
+`;
+var prismSlatsProgram = {
+  name: "prismSlats",
+  fragmentSource: fragmentSource15
+};
+
+// src/runtime/viewer/shaders/builtins/ruler.ts
+var fragmentSource16 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uIntensity;
+uniform float uProgress;
+uniform float uTicks;
+uniform float uMajor;
+uniform float uLength;
+uniform float uThickness;
+uniform float uRound;
+uniform float uDent;
+uniform float uSpread;
+uniform float uInset;
+uniform float uLine;
+uniform float uGap;
+uniform float uKnobRadius;
+uniform float uAxis;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+uniform vec3 uGlow;
+uniform vec3 uCore;
+varying vec2 vUv;
+
+float wireAt(float at, float lineAt, float depth, float radius, float knob, float spread) {
+  float reach = abs(at - knob);
+  if (uKnobRadius > 0.0) {
+    float outline = max(sqrt(max(radius * radius - reach * reach, 0.0)) - (radius - depth), 0.0);
+    float shoulder = max(sqrt(2.0 * depth * radius) * 0.9, 1.0);
+    float soft = depth * exp(-(reach * reach) / (shoulder * shoulder));
+    float k = max(depth * 0.15, 1.0);
+    float h = max(k - abs(outline - soft), 0.0) / k;
+    return lineAt - (max(outline, soft) + h * h * k * 0.25);
+  }
+  float away = reach / spread;
+  return lineAt - depth * exp(-away * away);
+}
+
+void main() {
+  vec2 px = vUv * uResolution;
+  float horizontal = step(0.5, uAxis);
+  float along = mix(px.y, px.x, horizontal);
+  float across = mix(px.x, uResolution.y - px.y, horizontal);
+  float extent = mix(uResolution.y, uResolution.x, horizontal);
+  float width = mix(uResolution.x, uResolution.y, horizontal);
+
+  float inset = uInset > 0.0 ? uInset : 0.05;
+  float lineAt = (uLine > 0.0 ? uLine : 0.7) * width;
+  float count = max(uTicks > 0.0 ? uTicks : 50.0, 2.0);
+  float every = max(uMajor > 0.0 ? uMajor : 5.0, 1.0);
+  float unit = (uThickness > 0.0 ? uThickness : 0.012) * width;
+  float halfLine = max(unit * 0.5, 0.75);
+  float spread = (uSpread > 0.0 ? uSpread : 0.07) * extent;
+  float depth = (uDent < 0.0 ? 1.0 : uDent) * 0.16 * width;
+
+  float start = inset * extent;
+  float span = (1.0 - 2.0 * inset) * extent;
+  float knob = start + span * clamp(uProgress, 0.0, 1.0);
+
+  float away = (along - knob) / spread;
+  float bump = exp(-away * away);
+  float radius = (uKnobRadius + (uGap > 0.0 ? uGap : 0.04)) * width;
+  float wire = wireAt(along, lineAt, depth, radius, knob, spread);
+  float slope = (wireAt(along + 1.0, lineAt, depth, radius, knob, spread) - wireAt(along - 1.0, lineAt, depth, radius, knob, spread)) * 0.5;
+  float lineDistance = abs(across - wire) / sqrt(1.0 + slope * slope);
+  float line = 1.0 - smoothstep(halfLine - 0.75, halfLine + 0.75, lineDistance);
+  float wireDistance = abs(across - wire);
+  vec3 lineColor = mix(uColor, uAccent, bump);
+
+  vec3 glowColor = dot(uGlow, uGlow) > 0.0 ? uGlow : uAccent;
+  float glowSide = across < wire ? 1.0 : 0.35;
+  float glow = bump * exp(-wireDistance / (0.1 * width)) * glowSide * 1.3 * max(uIntensity, 0.0);
+  vec3 coreColor = dot(uCore, uCore) > 0.0 ? uCore : mix(glowColor, vec3(1.0), 0.55);
+  float core = bump * bump * exp(-wireDistance / (0.035 * width)) * glowSide * 1.6 * max(uIntensity, 0.0);
+  float reachEdge = min(min(along, extent - along), min(across, width - across));
+  float fade = smoothstep(0.0, 0.14 * width, reachEdge);
+  glow *= fade;
+  core *= fade;
+
+  float spacing = span / count;
+  float position = (along - start) / spacing;
+  float index = floor(position + 0.5);
+  float inRange = step(0.0, index) * step(index, count);
+  float tickAlong = abs(position - index) * spacing;
+  float major = 1.0 - step(0.5, mod(index, every));
+  float tickLength = (uLength > 0.0 ? uLength : 0.1) * width * mix(1.0, 1.9, major);
+  float tickDistance = (start + index * spacing - knob) / spread;
+  float tickBump = exp(-tickDistance * tickDistance);
+  float tickEnd = lineAt - 0.12 * width - depth * 0.4 * tickBump;
+  float halfTick = halfLine * mix(0.75, 1.2, major);
+  float corner = halfTick * clamp(uRound, 0.0, 1.0);
+  vec2 q = abs(vec2(across - (tickEnd - tickLength * 0.5), tickAlong)) - vec2(tickLength * 0.5, halfTick) + corner;
+  float edge = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float tick = (1.0 - smoothstep(-0.75, 0.75, edge)) * inRange * mix(0.4, 1.0, tickBump);
+  vec3 tickColor = mix(uColor, vec3(1.0), tickBump);
+
+  float alpha = clamp(tick + line * 0.95 + glow + core, 0.0, 1.0);
+  vec3 rgb = tickColor * tick + lineColor * line * 0.95 + glowColor * glow + coreColor * core;
+  gl_FragColor = vec4(clamp(rgb, 0.0, 1.0), alpha);
+}
+`;
+var rulerProgram = {
+  name: "ruler",
+  fragmentSource: fragmentSource16,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/smearOrb.ts
+var fragmentSource17 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uBlur;
+uniform float uGlow;
+uniform float uMotion;
+uniform float uDirection;
+uniform float uReach;
+uniform vec3 uShapeColor;
+varying vec2 vUv;
+
+float bell(float value, float width) {
+  return exp(-pow(value / max(width, 0.001), 2.0));
+}
+
+mat2 rotate(float angle) {
+  float sine = sin(angle);
+  float cosine = cos(angle);
+  return mat2(cosine, -sine, sine, cosine);
+}
+
+vec2 orient(vec2 point, float direction) {
+  if (direction < 0.5) return point;
+  if (direction < 1.5) return vec2(-point.x, point.y);
+  if (direction < 2.5) return vec2(-point.y, point.x);
+  return vec2(point.y, -point.x);
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float time = uTime * max(uSpeed, 0.0);
+  float motion = max(uMotion, 0.0);
+  float blur = clamp(uBlur, 0.02, 0.55);
+
+  vec2 q = orient(p, uDirection) - vec2(0.12, 0.0);
+  float sweep = sin(time * 0.55) * 0.42 * motion;
+  vec2 qb = rotate(sweep) * q;
+  float radius = length(q);
+  float reach = clamp(uReach + sin(time * 0.41 + 1.3) * 0.16 * motion, 0.0, 1.0);
+  float left = 1.0 - smoothstep(-0.42, mix(-0.24, 0.46, reach), qb.x);
+  float upper = smoothstep(-0.05, 0.46, qb.y);
+  float lower = 1.0 - smoothstep(-0.46, 0.05, qb.y);
+  float blurSide = left * (0.50 + 0.50 * max(upper, lower));
+  float breathing = 1.0 + sin(time * 0.72) * 0.28 * motion;
+  float edgeWidth = mix(0.015, blur * breathing, blurSide);
+  float body = 1.0 - smoothstep(0.49 - edgeWidth, 0.49 + edgeWidth, radius);
+
+  float upperPlume = bell(qb.x + 0.33 + sin(time * 0.62) * 0.07 * motion, 0.37 + blur * 0.42);
+  upperPlume *= bell(qb.y - 0.28 + sin(time * 0.47) * 0.05 * motion, 0.24 + blur * 0.5);
+  float lowerPlume = bell(qb.x + 0.32 - sin(time * 0.58) * 0.07 * motion, 0.34 + blur * 0.42);
+  lowerPlume *= bell(qb.y + 0.34 - sin(time * 0.44) * 0.05 * motion, 0.26 + blur * 0.5);
+  float plume = (upperPlume * 0.44 + lowerPlume * 0.40) * left * max(uGlow, 0.0);
+
+  vec3 lightColor = mix(uShapeColor, vec3(1.0), 0.24);
+  vec3 darkColor = mix(uShapeColor, vec3(0.0), 0.7);
+  float vertical = smoothstep(-0.45, 0.44, q.y);
+  vec3 orbColor = mix(uShapeColor * 0.82, lightColor, vertical * 0.48);
+  float shade = bell(q.x + 0.22, 0.38) * bell(q.y, 0.28);
+  orbColor = mix(orbColor, darkColor, shade * 0.43);
+  orbColor *= 0.76 + bell(q.x - 0.27, 0.36) * 0.32;
+
+  vec3 plumeColor = mix(uShapeColor, lightColor, smoothstep(-0.26, 0.30, q.y) * 0.35);
+  float alpha = body + (1.0 - body) * plume;
+  float frameFade = 1.0 - smoothstep(0.85, 1.0, max(abs(p.x), abs(p.y)));
+  alpha = clamp(alpha * frameFade * max(uIntensity, 0.0), 0.0, 1.0);
+  vec3 premultiplied = orbColor * body + plumeColor * (1.0 - body) * plume;
+  gl_FragColor = vec4(clamp(premultiplied * frameFade * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var smearOrbProgram = {
+  name: "smearOrb",
+  fragmentSource: fragmentSource17,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/tickScale.ts
+var fragmentSource18 = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uIntensity;
+uniform float uProgress;
+uniform float uTicks;
+uniform float uMajor;
+uniform float uStart;
+uniform float uSweep;
+uniform float uRadius;
+uniform float uLength;
+uniform float uThickness;
+uniform float uRound;
+uniform vec3 uColor;
+uniform vec3 uAccent;
+varying vec2 vUv;
+
+const float TAU = 6.28318530718;
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.x *= uResolution.x / max(uResolution.y, 1.0);
+  float radius = length(p);
+  float angle = atan(p.y, p.x);
+  float pixel = 2.0 / max(uResolution.y, 1.0);
+
+  float sweep = radians(uSweep > 0.0 ? uSweep : 270.0);
+  float start = radians(uStart != 0.0 ? uStart : 225.0);
+  float gap = TAU - sweep;
+  float fraction = (mod(start - angle + gap * 0.5, TAU) - gap * 0.5) / sweep;
+
+  float count = max(uTicks, 2.0);
+  float inArc = step(-0.25 / count, fraction) * step(fraction, 1.0 + 0.25 / count);
+  float phase = fraction * count;
+  float index = floor(phase + 0.5);
+  float arcDistance = abs(fract(phase + 0.5) - 0.5) / count * sweep * radius;
+  float every = max(uMajor, 1.0);
+  float major = 1.0 - step(0.5, mod(index, every));
+
+  float outer = uRadius > 0.0 ? uRadius : 0.9;
+  float tickLength = (uLength > 0.0 ? uLength : 0.05) * mix(1.0, 1.8, major);
+  float halfWidth = max((uThickness > 0.0 ? uThickness : 0.003) * mix(1.0, 1.4, major), pixel * 0.9);
+  float halfLength = tickLength * 0.5;
+  float corner = min(halfWidth, halfLength) * clamp(uRound, 0.0, 1.0);
+  vec2 q = vec2(arcDistance, abs(radius - (outer - halfLength))) - vec2(halfWidth, halfLength) + corner;
+  float edge = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float tick = (1.0 - smoothstep(-pixel, pixel, edge)) * inArc;
+
+  float progress = uProgress < 0.0 ? 1.0 : clamp(uProgress, 0.0, 1.0);
+  float lit = clamp(progress * count - index + 1.0, 0.0, 1.0);
+  vec3 base = uColor;
+  vec3 color = mix(base, uAccent, lit);
+  float alpha = tick * mix(0.32, 1.0, lit) * max(uIntensity, 0.0);
+  gl_FragColor = vec4(color * alpha, clamp(alpha, 0.0, 1.0));
+}
+`;
+var tickScaleProgram = {
+  name: "tickScale",
+  fragmentSource: fragmentSource18,
+  replacesBaseFill: true
+};
+
+// src/runtime/viewer/shaders/builtins/violetGlass.ts
+var fragmentSource19 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform vec3 uBaseColor;
+uniform vec3 uColor;
+uniform vec3 uHighlightColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+float glassDistance(vec2 p, float time) {
+  float angle = atan(p.y, p.x);
+  float edge = 0.72;
+  edge += sin(angle * 3.0 + time * 0.52) * 0.038;
+  edge += sin(angle * 5.0 - time * 0.37 + 1.6) * 0.025;
+  edge += sin(angle * 9.0 + time * 0.29) * 0.008;
+  return length(p) - edge;
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  p.y += 0.025;
+  float time = uTime * max(uSpeed, 0.0);
+  float distance = glassDistance(p, time);
+  float body = 1.0 - smoothstep(-0.012, 0.01, distance);
+  float halo = band(max(distance, 0.0), 0.12) * 0.24;
+  float alpha = body + (1.0 - body) * halo;
+  if (alpha < 0.002) discard;
+
+  float lowerLight = 1.0 - smoothstep(-0.6, 0.45, p.y);
+  float liquid = 0.5 + 0.5 * sin(p.x * 3.5 - p.y * 2.2 + time * 0.61);
+  vec3 color = mix(uBaseColor, uColor, 0.17 + lowerLight * 0.3 + liquid * 0.09);
+  color += uColor * band(p.x + 0.36, 0.42) * band(p.y + 0.12, 0.5) * 0.16;
+  color *= 0.55 + 0.45 * smoothstep(-0.52, 0.5, p.y + 0.2);
+
+  float innerFold = p.y + 0.22 + 0.19 * sin(p.x * 4.0 + time * 0.53);
+  float secondFold = p.y - 0.42 + 0.11 * sin(p.x * 5.5 - time * 0.42);
+  float foldLight = band(innerFold, 0.041) * smoothstep(-0.65, -0.1, p.x);
+  foldLight += band(secondFold, 0.027) * smoothstep(0.05, 0.6, p.x);
+  color += uHighlightColor * foldLight * 0.64;
+  color += uColor * band(innerFold + 0.07, 0.065) * 0.31;
+  float softReflection = band(p.x + 0.3 + 0.1 * sin(p.y * 3.5 + time * 0.35), 0.2);
+  softReflection *= band(p.y - 0.38, 0.35);
+  color += uHighlightColor * softReflection * 0.1;
+
+  float dome = sqrt(max(0.04, 1.0 - dot(p, p) / 0.62));
+  vec3 surfaceNormal = normalize(vec3(p.x * 1.18, p.y * 1.18, dome));
+  surfaceNormal.xy += vec2(sin(p.y * 8.0 + time * 0.31), cos(p.x * 7.0 - time * 0.27)) * 0.065;
+  surfaceNormal = normalize(surfaceNormal);
+  vec3 reflection = reflect(vec3(0.0, 0.0, -1.0), surfaceNormal);
+  float softbox = band(reflection.x + 0.42, 0.34) * band(reflection.y - 0.43, 0.24);
+  float sidebox = band(reflection.x - 0.57, 0.19) * band(reflection.y + 0.11, 0.5);
+  color += uHighlightColor * softbox * 0.21;
+  color += uColor * sidebox * 0.22;
+
+  float e = 0.008;
+  vec2 normal = normalize(vec2(
+    glassDistance(p + vec2(e, 0.0), time) - glassDistance(p - vec2(e, 0.0), time),
+    glassDistance(p + vec2(0.0, e), time) - glassDistance(p - vec2(0.0, e), time)
+  ));
+  float light = pow(max(0.0, dot(normal, normalize(vec2(-0.62, 0.78)))), 2.0);
+  float sideLight = pow(max(0.0, dot(normal, normalize(vec2(0.8, -0.58)))), 4.0);
+  float rim = band(distance + 0.012, 0.031);
+  float sharpRim = band(distance + 0.004, 0.009);
+  color += uColor * rim * (0.25 + light * 0.53);
+  color += uHighlightColor * sharpRim * (light * 0.78 + sideLight * 0.38);
+  color += uHighlightColor * band(distance + 0.09, 0.025) * light * 0.23;
+  color += uColor * band(length(p - vec2(0.27, -0.31)) - 0.26, 0.09) * 0.1;
+
+  vec3 premultiplied = color * body + uColor * (1.0 - body) * halo * 0.48;
+  gl_FragColor = vec4(clamp(premultiplied * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var violetGlassProgram = {
+  name: "violetGlass",
+  fragmentSource: fragmentSource19
+};
+
+// src/runtime/viewer/shaders/builtins/violetGlassLight.ts
+var fragmentSource20 = `
+precision highp float;
+
+uniform float uTime;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform vec3 uBaseColor;
+uniform vec3 uColor;
+uniform vec3 uHighlightColor;
+uniform vec3 uShadowColor;
+varying vec2 vUv;
+
+float band(float distance, float width) {
+  return exp(-pow(distance / width, 2.0));
+}
+
+float glassDistance(vec2 p, float time) {
+  float angle = atan(p.y, p.x);
+  float edge = 0.69;
+  edge += sin(angle * 3.0 + time * 0.48) * 0.025;
+  edge += sin(angle * 5.0 - time * 0.36 + 1.7) * 0.016;
+  return length(p) - edge;
+}
+
+void main() {
+  vec2 p = vUv * 2.0 - 1.0;
+  float time = uTime * max(uSpeed, 0.0);
+  float distance = glassDistance(p, time);
+  float body = 1.0 - smoothstep(-0.012, 0.012, distance);
+  float outside = band(max(distance, 0.0), 0.13) * 0.16;
+  outside *= 1.0 - smoothstep(0.86, 1.0, length(p));
+  float alpha = body * 0.94 + (1.0 - body) * outside;
+  if (alpha < 0.002) discard;
+
+  float lowerTint = 1.0 - smoothstep(-0.54, 0.46, p.y);
+  float flow = 0.5 + 0.5 * sin(p.x * 3.8 - p.y * 2.4 + time * 0.57);
+  vec3 color = mix(uBaseColor, uColor, 0.08 + lowerTint * 0.19 + flow * 0.045);
+  color *= 1.0 - band(p.x - 0.27, 0.31) * band(p.y + 0.25, 0.48) * 0.11;
+
+  float fold = p.y + 0.17 + 0.15 * sin(p.x * 4.1 + time * 0.49);
+  float secondFold = p.y - 0.43 + 0.08 * sin(p.x * 5.2 - time * 0.32);
+  float foldShade = band(fold + 0.045, 0.055) * smoothstep(-0.55, 0.18, p.x);
+  foldShade += band(secondFold + 0.03, 0.038) * smoothstep(-0.1, 0.58, p.x);
+  color = mix(color, uShadowColor, foldShade * 0.13);
+  color += uHighlightColor * band(fold, 0.028) * 0.11;
+  color += uHighlightColor * band(secondFold, 0.019) * 0.09;
+
+  float dome = sqrt(max(0.04, 1.0 - dot(p, p) / 0.57));
+  vec3 normal = normalize(vec3(p.x * 1.15, p.y * 1.15, dome));
+  normal.xy += vec2(sin(p.y * 7.0 + time * 0.29), cos(p.x * 6.0 - time * 0.24)) * 0.04;
+  vec3 reflection = reflect(vec3(0.0, 0.0, -1.0), normalize(normal));
+  float softbox = band(reflection.x + 0.45, 0.28) * band(reflection.y - 0.39, 0.22);
+  color += uHighlightColor * softbox * 0.12;
+
+  float rim = band(distance + 0.018, 0.041);
+  float thinRim = band(distance + 0.004, 0.012);
+  float innerShade = band(distance + 0.094, 0.055);
+  float upperLight = smoothstep(-0.34, 0.78, p.y - p.x * 0.24);
+  color = mix(color, uShadowColor, innerShade * (0.08 + (1.0 - upperLight) * 0.1));
+  color = mix(color, uColor, rim * (0.36 + upperLight * 0.15));
+  color = mix(color, uShadowColor, thinRim * (1.0 - upperLight) * 0.29);
+  color += uHighlightColor * thinRim * upperLight * 0.17;
+
+  vec3 premultiplied = color * body * 0.94;
+  premultiplied += mix(uShadowColor, uColor, 0.36) * (1.0 - body) * outside;
+  gl_FragColor = vec4(clamp(premultiplied * max(uIntensity, 0.0), 0.0, 1.0), alpha);
+}
+`;
+var violetGlassLightProgram = {
+  name: "violetGlassLight",
+  fragmentSource: fragmentSource20
+};
+
+// src/runtime/viewer/shaders/programs.ts
+var builtins = [
+  orbProgram,
+  haloProgram,
+  halftoneHaloProgram,
+  chromaticHaloProgram,
+  chromaticGlassPlateProgram,
+  glassRefractionProgram,
+  emberSlitsProgram,
+  smearOrbProgram,
+  pixelConstellationProgram,
+  plasmaGaugeProgram,
+  tickScaleProgram,
+  rulerProgram,
+  buttonProgram,
+  prismSlatsProgram,
+  eclipseOrbProgram,
+  emberMatrixProgram,
+  violetGlassProgram,
+  violetGlassLightProgram,
+  lumenPortalProgram,
+  lumenPortalLightProgram
+];
+var programs = new Map(builtins.map((program) => [program.name, program]));
+function registerShaderProgram(program) {
+  if (!program.name.trim()) {
+    throw new Error("registerShaderProgram: name must not be empty.");
+  }
+  if (!program.fragmentSource.includes("void main")) {
+    throw new Error(`registerShaderProgram: "${program.name}" has no main function.`);
+  }
+  programs.set(program.name, program);
+  return () => {
+    if (programs.get(program.name) === program) {
+      programs.delete(program.name);
+    }
+  };
+}
+function shaderProgram(name) {
+  return programs.get(name);
+}
+
+// src/runtime/viewer/shaders/backdrop.ts
+var MIN_BACKDROP_DENSITY = 2.5;
+var MAX_BACKDROP_PIXELS = 4096;
+var TRANSPARENT = /^rgba?(s*d+,s*d+,s*d+,s*0s*)$|^transparent$/;
+function hostBackground(svg) {
+  const view = svg.ownerDocument.defaultView;
+  for (let element = svg.parentElement; element && view; element = element.parentElement) {
+    const color2 = view.getComputedStyle(element).backgroundColor;
+    if (color2 && !TRANSPARENT.test(color2.trim())) {
+      return color2;
+    }
+  }
+  return void 0;
+}
+function backdropClone(svg, owner, width, height) {
+  const clone = svg.cloneNode(true);
+  const ownerIndex = [...svg.children].indexOf(owner);
+  if (ownerIndex >= 0) {
+    while (clone.children.length > ownerIndex) {
+      clone.lastElementChild?.remove();
+    }
+  }
+  for (const surface of clone.querySelectorAll("foreignObject[data-sf-shader]")) {
+    surface.remove();
+  }
+  const background = hostBackground(svg);
+  if (background) {
+    const { x, y, width: viewWidth, height: viewHeight } = svg.viewBox.baseVal;
+    const fill = svg.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "rect");
+    fill.setAttribute("x", String(x));
+    fill.setAttribute("y", String(y));
+    fill.setAttribute("width", String(viewWidth));
+    fill.setAttribute("height", String(viewHeight));
+    fill.setAttribute("fill", background);
+    clone.insertBefore(fill, clone.firstChild);
+  }
+  clone.setAttribute("width", String(width));
+  clone.setAttribute("height", String(height));
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  return clone;
+}
+function captureShaderBackdrop(svg, owner) {
+  const density = Math.max(globalThis.devicePixelRatio || 1, MIN_BACKDROP_DENSITY);
+  const scale = Math.min(density, MAX_BACKDROP_PIXELS / Math.max(1, Math.max(svg.clientWidth, svg.clientHeight)));
+  const width = Math.max(1, Math.round(svg.clientWidth * scale));
+  const height = Math.max(1, Math.round(svg.clientHeight * scale));
+  const view = svg.ownerDocument.defaultView;
+  if (!view) {
+    return Promise.resolve(void 0);
+  }
+  const markup = new XMLSerializer().serializeToString(backdropClone(svg, owner, width, height));
+  const image = svg.ownerDocument.createElement("img");
+  const source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+  return new Promise((resolve) => {
+    image.onload = () => resolve({ image, width, height });
+    image.onerror = () => resolve(void 0);
+    image.src = source;
+  });
+}
+
+// src/runtime/viewer/shaders/uniforms.ts
+function color(value, fallback) {
+  if (typeof value !== "string") {
+    return fallback;
+  }
+  const match = /^#([0-9a-f]{6})$/i.exec(value);
+  if (!match) {
+    return fallback;
+  }
+  const integer = Number.parseInt(match[1], 16);
+  return [(integer >> 16 & 255) / 255, (integer >> 8 & 255) / 255, (integer & 255) / 255];
+}
+function number(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function uniform1f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform1f(location, value);
+  }
+}
+function uniform3f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform3f(location, ...value);
+  }
+}
+function uniform2f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform2f(location, ...value);
+  }
+}
+function uniformName(parameter) {
+  return `u${parameter.charAt(0).toUpperCase()}${parameter.slice(1)}`;
+}
+function enumParameter(name, value) {
+  const values = {
+    direction: { left: 0, right: 1, top: 2, bottom: 3 },
+    orientation: { vertical: 0, horizontal: 1 },
+    axis: { vertical: 0, horizontal: 1 }
+  };
+  return values[name]?.[value];
+}
+function applyParameters(surface, elapsed) {
+  for (const [key, value] of Object.entries(surface.parameters)) {
+    const name = uniformName(key);
+    if (typeof value === "number") {
+      const lag = surface.parameters[`${key}Lag`];
+      if (typeof lag === "number" && lag > 0) {
+        const current = surface.smoothed.get(key) ?? value;
+        const next = current + (value - current) * (1 - Math.exp(-elapsed / lag));
+        surface.smoothed.set(key, next);
+        uniform1f(surface, name, next);
+        continue;
+      }
+      uniform1f(surface, name, value);
+      continue;
+    }
+    if (typeof value === "boolean") {
+      const location = surface.gl.getUniformLocation(surface.program, name);
+      if (location) {
+        surface.gl.uniform1i(location, value ? 1 : 0);
+      }
+      continue;
+    }
+    const enumValue = enumParameter(key, value);
+    if (enumValue !== void 0) {
+      uniform1f(surface, name, enumValue);
+      continue;
+    }
+    if (/^#[0-9a-f]{6}$/i.test(value)) {
+      uniform3f(surface, name, color(value, [0, 0, 0]));
+    }
+  }
+}
+
+// src/runtime/viewer/shaders/webgl.ts
+var VERTEX_SOURCE = `
+attribute vec2 aPosition;
+varying vec2 vUv;
+
+void main() {
+  vUv = aPosition * 0.5 + 0.5;
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+}
+`;
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    return void 0;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return void 0;
+  }
+  return shader;
+}
+function linkProgram(gl, fragmentSource21) {
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SOURCE);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource21);
+  if (!vertex || !fragment) {
+    if (vertex) {
+      gl.deleteShader(vertex);
+    }
+    if (fragment) {
+      gl.deleteShader(fragment);
+    }
+    return void 0;
+  }
+  const program = gl.createProgram();
+  if (!program) {
+    gl.deleteShader(vertex);
+    gl.deleteShader(fragment);
+    return void 0;
+  }
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return void 0;
+  }
+  return program;
+}
+function transparentTexture(gl) {
+  const texture = gl.createTexture();
+  if (!texture) {
+    return void 0;
+  }
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+  return texture;
+}
+
+// src/runtime/viewer/shaders/createSurface.ts
+var FULL_SCREEN_QUAD = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+function parametersOf(owner) {
+  try {
+    return JSON.parse(owner.getAttribute("data-sf-shader-params") ?? "{}");
+  } catch {
+    return {};
+  }
+}
+function bindFullScreenQuad(gl, program) {
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    return void 0;
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, FULL_SCREEN_QUAD, gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, "aPosition");
+  if (position < 0) {
+    gl.deleteBuffer(buffer);
+    return void 0;
+  }
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  return buffer;
+}
+function findBaseGeometry(owner, definition) {
+  const ownerId = owner.getAttribute("data-sf-id");
+  if (!definition.replacesBaseFill || !ownerId) {
+    return void 0;
+  }
+  const candidates = [...owner.closest("svg")?.querySelectorAll('[data-sf-primary="true"]') ?? []];
+  return candidates.find((element) => element !== owner && element.getAttribute("data-sf-id") === ownerId);
+}
+function createSurface(canvas) {
+  const owner = canvas.closest("[data-sf-shader]");
+  const name = owner?.getAttribute("data-sf-shader");
+  const definition = name ? shaderProgram(name) : void 0;
+  const gl = canvas.getContext("webgl", { alpha: true, antialias: true, premultipliedAlpha: true });
+  if (!owner || !definition || !gl) {
+    return void 0;
+  }
+  const program = linkProgram(gl, definition.fragmentSource);
+  if (!program) {
+    return void 0;
+  }
+  gl.useProgram(program);
+  const buffer = bindFullScreenQuad(gl, program);
+  if (!buffer) {
+    gl.deleteProgram(program);
+    return void 0;
+  }
+  const usesBackdrop = definition.usesBackdrop === true;
+  const baseGeometry = findBaseGeometry(owner, definition);
+  const baseFill = baseGeometry?.getAttribute("fill");
+  baseGeometry?.setAttribute("fill", "none");
+  return {
+    owner,
+    canvas,
+    gl,
+    program,
+    buffer,
+    parameters: parametersOf(owner),
+    smoothed: /* @__PURE__ */ new Map(),
+    backdropTexture: usesBackdrop ? transparentTexture(gl) : void 0,
+    backdropOrigin: [0, 0],
+    backdropScale: [1, 1],
+    usesBackdrop,
+    shapeColor: color(owner.getAttribute("data-sf-shader-fill") ?? void 0, [1, 1, 1]),
+    baseGeometry,
+    baseFill
+  };
+}
+function releaseSurface(surface) {
+  if (surface.backdropTexture) {
+    surface.gl.deleteTexture(surface.backdropTexture);
+  }
+  surface.gl.deleteBuffer(surface.buffer);
+  surface.gl.deleteProgram(surface.program);
+  if (!surface.baseGeometry) {
+    return;
+  }
+  if (surface.baseFill === null || surface.baseFill === void 0) {
+    surface.baseGeometry.removeAttribute("fill");
+  } else {
+    surface.baseGeometry.setAttribute("fill", surface.baseFill);
+  }
+}
+
+// src/runtime/viewer/shaders/renderSurface.ts
+function syncBackdropBounds(surface) {
+  const svg = surface.canvas.closest("svg");
+  if (!svg) {
+    return;
+  }
+  const svgBounds = svg.getBoundingClientRect();
+  const surfaceBounds = surface.canvas.getBoundingClientRect();
+  if (svgBounds.width <= 0 || svgBounds.height <= 0) {
+    return;
+  }
+  surface.backdropOrigin = [
+    (surfaceBounds.left - svgBounds.left) / svgBounds.width,
+    (svgBounds.bottom - surfaceBounds.bottom) / svgBounds.height
+  ];
+  surface.backdropScale = [surfaceBounds.width / svgBounds.width, surfaceBounds.height / svgBounds.height];
+}
+function applyBackdrop(surface, backdrop) {
+  if (!surface.backdropTexture) {
+    return;
+  }
+  syncBackdropBounds(surface);
+  const { gl } = surface;
+  gl.bindTexture(gl.TEXTURE_2D, surface.backdropTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, backdrop.image);
+}
+var MAX_SURFACE_PIXELS = 2560;
+function renderSurface(surface, seconds) {
+  const { canvas, gl, parameters: parameters3 } = surface;
+  const shown = canvas.getBoundingClientRect();
+  const density = Math.min(globalThis.devicePixelRatio || 1, 3);
+  const fit = Math.min(1, MAX_SURFACE_PIXELS / Math.max(1, shown.width * density, shown.height * density));
+  const width = Math.max(1, Math.round((shown.width || canvas.clientWidth) * density * fit));
+  const height = Math.max(1, Math.round((shown.height || canvas.clientHeight) * density * fit));
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(surface.program);
+  const resolution = gl.getUniformLocation(surface.program, "uResolution");
+  if (resolution) {
+    gl.uniform2f(resolution, width, height);
+  }
+  uniform1f(surface, "uTime", seconds);
+  if (surface.backdropTexture) {
+    syncBackdropBounds(surface);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, surface.backdropTexture);
+    const sampler = gl.getUniformLocation(surface.program, "uBackdrop");
+    if (sampler) {
+      gl.uniform1i(sampler, 0);
+    }
+    uniform2f(surface, "uBackdropOrigin", surface.backdropOrigin);
+    uniform2f(surface, "uBackdropScale", surface.backdropScale);
+  }
+  for (const [key, fallback] of Object.entries(SHADER_DEFAULTS.numbers)) {
+    uniform1f(surface, uniformName(key), number(parameters3[key], fallback));
+  }
+  for (const [key, fallback] of Object.entries(SHADER_DEFAULTS.colors)) {
+    uniform3f(surface, uniformName(key), color(parameters3[key], [...fallback]));
+  }
+  uniform3f(surface, "uShapeColor", surface.shapeColor);
+  const elapsed = surface.lastSeconds === void 0 ? 0 : Math.max(0, Math.min(seconds - surface.lastSeconds, 0.1));
+  surface.lastSeconds = seconds;
+  applyParameters(surface, elapsed);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+
+// src/runtime/viewer/shaders/surfaceClock.ts
+function createSurfaceClock(view) {
+  let pausedSince = null;
+  let spentPaused = 0;
+  const real = () => (view?.performance.now() ?? 0) / 1e3;
+  return {
+    now: () => (pausedSince ?? real()) - spentPaused,
+    paused: () => pausedSince !== null,
+    spent: () => spentPaused,
+    setPaused(paused) {
+      if (paused && pausedSince === null) {
+        pausedSince = real();
+      } else if (!paused && pausedSince !== null) {
+        spentPaused += real() - pausedSince;
+        pausedSince = null;
+      }
+    }
+  };
+}
+
+// src/runtime/viewer/shaders/surface.ts
+var RECAPTURE_DELAY_MS = 120;
+function capturePngs(svg, surfaces, seconds) {
+  const surfaceByCanvas = new Map(surfaces.map((surface) => [surface.canvas, surface]));
+  return [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].map((canvas) => {
+    const surface = surfaceByCanvas.get(canvas);
+    if (!surface) {
+      return void 0;
+    }
+    try {
+      renderSurface(surface, seconds);
+      return surface.canvas.toDataURL("image/png");
+    } catch {
+      return void 0;
+    }
+  });
+}
+function updateParameters(surfaces, ownerId, parameters3, seconds) {
+  let changed = false;
+  for (const surface of surfaces) {
+    if (surface.owner.getAttribute("data-sf-id") !== ownerId) {
+      continue;
+    }
+    Object.assign(surface.parameters, parameters3);
+    surface.owner.setAttribute("data-sf-shader-params", JSON.stringify(surface.parameters));
+    renderSurface(surface, seconds);
+    changed = true;
+  }
+  return changed;
+}
+function watchSvgChanges(svg, view, onChange) {
+  if (!view) {
+    return () => void 0;
+  }
+  const mutations = new view.MutationObserver(onChange);
+  mutations.observe(svg, { attributes: true, attributeFilter: ["viewBox"] });
+  const sizes = view.ResizeObserver ? new view.ResizeObserver(onChange) : void 0;
+  sizes?.observe(svg);
+  return () => {
+    mutations.disconnect();
+    sizes?.disconnect();
+  };
+}
+function mountShaderSurfaces(svg) {
+  let surfaces = [];
+  let frame;
+  let backdropGeneration = 0;
+  let recapture;
+  const view = svg.ownerDocument.defaultView;
+  const clock = createSurfaceClock(view);
+  const draw = (milliseconds) => {
+    if (!clock.paused()) {
+      for (const surface of surfaces) {
+        renderSurface(surface, milliseconds / 1e3 - clock.spent());
+      }
+    }
+    frame = view?.requestAnimationFrame(draw);
+  };
+  const stop = () => {
+    if (frame !== void 0) {
+      view?.cancelAnimationFrame(frame);
+      frame = void 0;
+    }
+    for (const surface of surfaces) {
+      releaseSurface(surface);
+    }
+    surfaces = [];
+  };
+  const captureBackdrops = (generation) => {
+    for (const surface of surfaces) {
+      if (!surface.usesBackdrop) {
+        continue;
+      }
+      void captureShaderBackdrop(svg, surface.owner).then((backdrop) => {
+        if (backdrop && generation === backdropGeneration) {
+          applyBackdrop(surface, backdrop);
+        }
+      });
+    }
+  };
+  const startFrames = () => {
+    if (!view?.requestAnimationFrame) {
+      for (const surface of surfaces) {
+        renderSurface(surface, 0);
+      }
+      return;
+    }
+    if (clock.paused()) {
+      for (const surface of surfaces) {
+        renderSurface(surface, clock.now());
+      }
+    }
+    frame = view.requestAnimationFrame(draw);
+  };
+  const refresh = () => {
+    stop();
+    const generation = ++backdropGeneration;
+    surfaces = [...svg.querySelectorAll("canvas[data-sf-shader-canvas]")].flatMap((canvas) => {
+      const surface = createSurface(canvas);
+      return surface ? [surface] : [];
+    });
+    captureBackdrops(generation);
+    if (surfaces.length > 0) {
+      startFrames();
+    }
+  };
+  const scheduleRecapture = () => {
+    if (recapture !== void 0) {
+      view?.clearTimeout(recapture);
+    }
+    recapture = view?.setTimeout(() => {
+      recapture = void 0;
+      captureBackdrops(backdropGeneration);
+    }, RECAPTURE_DELAY_MS);
+  };
+  const unwatch = watchSvgChanges(svg, view, scheduleRecapture);
+  refresh();
+  const destroy = () => {
+    backdropGeneration += 1;
+    unwatch();
+    if (recapture !== void 0) {
+      view?.clearTimeout(recapture);
+    }
+    stop();
+  };
+  return {
+    capture: () => capturePngs(svg, surfaces, clock.now()),
+    setParameters: (ownerId, parameters3) => updateParameters(surfaces, ownerId, parameters3, clock.now()),
+    setPaused: clock.setPaused,
+    refresh,
+    destroy
+  };
+}
+
+// src/runtime/viewer/source.ts
+function renderViewerSource(next, defaultRenderOptions) {
+  const svg = next.svg ?? (next.source != null ? chunkS5BVAAEF_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
+  if (svg == null) {
+    throw new Error("createViewer: provide either `source` (SFL) or `svg`.");
+  }
+  return svg;
+}
+function assertCreateViewerContract(svg) {
+  const version = chunk34PK7HEU_cjs.parseContractVersion(svg);
+  if (!chunk34PK7HEU_cjs.isContractCompatible(version)) {
+    throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
+  }
+}
+function assertViewerUpdateContract(svg) {
+  const version = chunk34PK7HEU_cjs.parseContractVersion(svg);
+  if (!chunk34PK7HEU_cjs.isContractCompatible(version)) {
+    throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
+  }
+}
+
+// src/runtime/viewer/widgets/rollingNumberDom.ts
+var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+var setStyles = (element, styles) => {
+  Object.assign(element.style, styles);
+};
+function createDigit(document, character, theme) {
+  const digit = document.createElementNS(HTML_NAMESPACE, "span");
+  digit.setAttribute("data-sf-rolling-current", "true");
+  digit.textContent = character;
+  setStyles(digit, {
+    position: "absolute",
+    inset: "0",
+    display: "grid",
+    placeItems: "center",
+    color: theme.color,
+    fontWeight: theme.fontWeight,
+    lineHeight: "1"
+  });
+  return digit;
+}
+function createDigitCell(document, character, theme) {
+  const cell = document.createElementNS(HTML_NAMESPACE, "span");
+  cell.setAttribute("data-sf-rolling-digit", "true");
+  if (theme.variant === "plain") {
+    setStyles(cell, {
+      position: "relative",
+      display: "inline-block",
+      width: "0.62em",
+      height: "1.1em",
+      overflow: "hidden"
+    });
+    cell.appendChild(createDigit(document, character, theme));
+    return cell;
+  }
+  setStyles(cell, {
+    position: "relative",
+    display: "inline-block",
+    width: "0.72em",
+    height: "1.2em",
+    overflow: "hidden",
+    border: `1px solid ${theme.divider}`,
+    borderRadius: "0.09em",
+    background: theme.surface,
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -0.16em 0.38em rgba(0,0,0,0.12)"
+  });
+  cell.appendChild(createDigit(document, character, theme));
+  const divider = document.createElementNS(HTML_NAMESPACE, "span");
+  setStyles(divider, {
+    position: "absolute",
+    zIndex: "2",
+    left: "0",
+    right: "0",
+    top: "50%",
+    height: "1px",
+    background: theme.divider,
+    pointerEvents: "none"
+  });
+  cell.appendChild(divider);
+  return cell;
+}
+function animateDigit(element, keyframes, duration) {
+  if (duration === 0 || typeof element.animate !== "function") {
+    return null;
+  }
+  return element.animate(keyframes, {
+    duration,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    fill: "forwards"
+  });
+}
+function fadeDigit(cell, character, theme, duration) {
+  const previous = cell.querySelector("[data-sf-rolling-current]");
+  previous?.removeAttribute("data-sf-rolling-current");
+  const next = createDigit(cell.ownerDocument, character, theme);
+  next.style.opacity = "0";
+  cell.insertBefore(next, cell.lastElementChild ?? null);
+  const hidden = { opacity: 0, filter: "blur(0.025em)", transform: "scale(0.985)" };
+  const shown = { opacity: 1, filter: "blur(0)", transform: "scale(1)" };
+  const incoming = animateDigit(next, [hidden, shown], duration);
+  const outgoing = previous ? animateDigit(previous, [shown, hidden], duration) : null;
+  const finish = () => {
+    previous?.remove();
+    next.style.opacity = "1";
+  };
+  if (incoming) {
+    incoming.finished.then(finish, finish);
+  } else {
+    outgoing?.cancel();
+    finish();
+  }
+}
+function replaceDigit(cell, character, theme, duration) {
+  if (theme.motion === "fade") {
+    fadeDigit(cell, character, theme, duration);
+    return;
+  }
+  const previous = cell.querySelector("[data-sf-rolling-current]");
+  previous?.removeAttribute("data-sf-rolling-current");
+  const next = createDigit(cell.ownerDocument, character, theme);
+  next.style.transform = "translateY(100%)";
+  next.style.opacity = "0.25";
+  cell.insertBefore(next, cell.lastElementChild);
+  const incoming = animateDigit(
+    next,
+    [
+      { transform: "translateY(100%)", opacity: 0.25 },
+      { transform: "translateY(0)", opacity: 1 }
+    ],
+    duration
+  );
+  const outgoing = previous ? animateDigit(
+    previous,
+    [
+      { transform: "translateY(0)", opacity: 1 },
+      { transform: "translateY(-100%)", opacity: 0.25 }
+    ],
+    duration
+  ) : null;
+  const finish = () => {
+    previous?.remove();
+    next.style.transform = "translateY(0)";
+    next.style.opacity = "1";
+  };
+  if (incoming) {
+    incoming.finished.then(finish, finish);
+  } else {
+    outgoing?.cancel();
+    finish();
+  }
+}
+function updateRollingDigits(digits, previousValue, nextValue, theme, duration) {
+  if (previousValue.length !== nextValue.length) {
+    digits.replaceChildren(...[...nextValue].map((character) => createDigitCell(digits.ownerDocument, character, theme)));
+    digits.setAttribute("aria-label", nextValue);
+    return;
+  }
+  const cells = [...digits.querySelectorAll("[data-sf-rolling-digit]")];
+  [...nextValue].forEach((character, index) => {
+    if (previousValue[index] !== character) {
+      replaceDigit(cells[index], character, theme, duration);
+    }
+  });
+  digits.setAttribute("aria-label", nextValue);
+}
+
+// src/runtime/viewer/widgets/documentWidgets.ts
+function findRollingNumber(svg, widgetId) {
+  return [...svg.querySelectorAll('foreignObject[data-sf-widget="rollingNumber"]')].find(
+    (surface) => surface.getAttribute("data-sf-id") === widgetId
+  );
+}
+var FADE_INTERVAL = 140;
+function widgetDigits(surface) {
+  return surface.querySelector("[data-sf-rolling-digits]") ?? void 0;
+}
+function widgetStyle(surface) {
+  const encoded = surface.getAttribute("data-sf-widget-style");
+  if (!encoded) {
+    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+  }
+  try {
+    return { ...chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+  } catch {
+    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+  }
+}
+function positiveInteger(value) {
+  if (!value) {
+    return void 0;
+  }
+  const number2 = Number(value);
+  return Number.isInteger(number2) && number2 > 0 ? number2 : void 0;
+}
+function durationFor(surface) {
+  const duration = Number(surface.getAttribute("data-sf-widget-duration"));
+  if (!Number.isFinite(duration) || duration < 0) {
+    return 420;
+  }
+  const reduceMotion = surface.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  return reduceMotion ? 0 : duration;
+}
+function setRollingNumber(surface, value, animate) {
+  const digits = widgetDigits(surface);
+  if (!digits) {
+    return false;
+  }
+  const previousValue = surface.getAttribute("data-sf-widget-value") ?? "";
+  const nextValue = chunkS5BVAAEF_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  if (previousValue === nextValue) {
+    return true;
+  }
+  updateRollingDigits(digits, previousValue, nextValue, widgetStyle(surface), animate ? durationFor(surface) : 0);
+  surface.setAttribute("data-sf-widget-value", nextValue);
+  return true;
+}
+function mountDocumentWidgets(svg) {
+  const valueOverrides = /* @__PURE__ */ new Map();
+  const lastApplied = /* @__PURE__ */ new Map();
+  const pending = /* @__PURE__ */ new Map();
+  return {
+    setValue(widgetId, value) {
+      const surface = findRollingNumber(svg, widgetId);
+      if (!surface) {
+        return false;
+      }
+      valueOverrides.set(widgetId, value);
+      if (widgetStyle(surface).motion !== "fade") {
+        return setRollingNumber(surface, value, true);
+      }
+      const now = Date.now();
+      const wait = (lastApplied.get(widgetId) ?? 0) + FADE_INTERVAL - now;
+      if (wait <= 0) {
+        lastApplied.set(widgetId, now);
+        return setRollingNumber(surface, value, true);
+      }
+      if (!pending.has(widgetId)) {
+        pending.set(
+          widgetId,
+          setTimeout(() => {
+            pending.delete(widgetId);
+            lastApplied.set(widgetId, Date.now());
+            const current = findRollingNumber(svg, widgetId);
+            const latest = valueOverrides.get(widgetId);
+            if (current && latest !== void 0) {
+              setRollingNumber(current, latest, true);
+            }
+          }, wait)
+        );
+      }
+      return true;
+    },
+    refresh() {
+      for (const [widgetId, value] of valueOverrides) {
+        const surface = findRollingNumber(svg, widgetId);
+        if (surface) {
+          setRollingNumber(surface, value, false);
+        }
+      }
+    },
+    clearValues() {
+      for (const timer of pending.values()) {
+        clearTimeout(timer);
+      }
+      pending.clear();
+      valueOverrides.clear();
+    },
+    destroy() {
+      for (const timer of pending.values()) {
+        clearTimeout(timer);
+      }
+      pending.clear();
+      valueOverrides.clear();
+    }
+  };
+}
+
+// src/runtime/viewer/widgets/rulerKnob.ts
+var bases = /* @__PURE__ */ new WeakMap();
+var written = /* @__PURE__ */ new WeakMap();
+var fills = /* @__PURE__ */ new WeakMap();
+function clamp01(value) {
+  return Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));
+}
+function parameters(surface) {
+  try {
+    return JSON.parse(surface.getAttribute("data-sf-shader-params") ?? "{}");
+  } catch {
+    return {};
+  }
+}
+function positive2(value, fallback) {
+  return Number(value) > 0 ? Number(value) : fallback;
+}
+function rulerProgress(surface, value) {
+  const params = parameters(surface);
+  const min = Number(params.min) || 0;
+  const max = Number.isFinite(Number(params.max)) && params.max !== void 0 ? Number(params.max) : 100;
+  return clamp01(max === min ? 0 : (value - min) / (max - min));
+}
+function move(node, dx, dy) {
+  const current = node.getAttribute("transform") ?? "";
+  const base = current === written.get(node) ? bases.get(node) ?? "" : current;
+  bases.set(node, base);
+  const next = `translate(${dx} ${dy}) ${base}`.trim();
+  written.set(node, next);
+  node.setAttribute("transform", next);
+}
+function hexToRgb(value) {
+  const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
+  if (!match) {
+    return null;
+  }
+  const number2 = parseInt(match[1], 16);
+  return [number2 >> 16 & 255, number2 >> 8 & 255, number2 & 255];
+}
+function shade(node, bump) {
+  const base = fills.get(node) ?? node.getAttribute("fill") ?? "";
+  fills.set(node, base);
+  const rgb = hexToRgb(base);
+  if (!rgb) {
+    return;
+  }
+  const mixed = rgb.map((channel) => Math.round(channel + (255 - channel) * bump));
+  const fill = `rgb(${mixed[0]}, ${mixed[1]}, ${mixed[2]})`;
+  node.style.fill = fill;
+  for (const child of node.querySelectorAll("tspan")) {
+    child.style.fill = fill;
+  }
+}
+function placeRulerKnobs(svg, progressOf) {
+  const radii = /* @__PURE__ */ new Map();
+  for (const surface of svg.querySelectorAll('foreignObject[data-sf-shader="ruler"]')) {
+    const params = parameters(surface);
+    const id = surface.getAttribute("data-sf-id") ?? "";
+    const x = Number(surface.getAttribute("x"));
+    const y = Number(surface.getAttribute("y"));
+    const width = Number(surface.getAttribute("width"));
+    const height = Number(surface.getAttribute("height"));
+    const horizontal = params.axis === "horizontal";
+    const progress = clamp01(progressOf(id) ?? Number(params.progress));
+    const inset = positive2(params.inset, 0.05);
+    const line = positive2(params.line, 0.7);
+    const extent = horizontal ? width : height;
+    const across = horizontal ? height : width;
+    const along = inset + (1 - 2 * inset) * progress;
+    const dent = params.dent === void 0 ? 1 : Number(params.dent);
+    const depth = (dent < 0 ? 1 : dent) * 0.16 * across;
+    const knobId = typeof params.knob === "string" ? params.knob : "";
+    if (knobId) {
+      const nodes = [...svg.querySelectorAll(`[data-sf-id="${CSS.escape(knobId)}"]`)];
+      const primary = nodes.find((node) => node.hasAttribute("data-sf-primary"));
+      if (primary?.getBBox) {
+        move(primary, 0, 0);
+        const box = primary.getBBox();
+        const half = (horizontal ? box.height : box.width) / 2;
+        radii.set(id, half / across);
+        const gap = (params.gap === void 0 ? 0.04 : Number(params.gap)) * across;
+        const side = line * across - depth + half + gap;
+        const target = horizontal ? { x: x + width * along, y: y + side } : { x: x + side, y: y + height * (1 - along) };
+        const dx = target.x - (box.x + box.width / 2);
+        const dy = target.y - (box.y + box.height / 2);
+        for (const node of nodes) {
+          move(node, dx, dy);
+        }
+      }
+    }
+    const min = Number(params.min) || 0;
+    const max = Number.isFinite(Number(params.max)) && params.max !== void 0 ? Number(params.max) : 100;
+    const spread = positive2(params.spread, 0.07) * extent;
+    const start = inset * extent;
+    const span = (1 - 2 * inset) * extent;
+    const knobAt = start + span * progress;
+    for (const label of svg.querySelectorAll(`text[data-sf-id="${CSS.escape(id)}"]`)) {
+      const value = Number(label.textContent);
+      if (!Number.isFinite(value) || max === min) {
+        continue;
+      }
+      const labelAt = start + span * clamp01((value - min) / (max - min));
+      const bump = Math.exp(-(((labelAt - knobAt) / spread) ** 2));
+      const shift = depth * 0.4 * bump;
+      move(label, horizontal ? 0 : -shift, horizontal ? -shift : 0);
+      shade(label, bump);
+    }
+  }
+  return radii;
+}
+
+// src/runtime/viewer/session.ts
+var ViewerSession = class {
+  constructor(options, initialSvg, diagramId) {
+    this.options = options;
+    this.diagramId = diagramId;
+    this.display = mountDisplay(options.container, initialSvg);
+    this.shaderSurfaces = mountShaderSurfaces(this.display.svg);
+    this.documentWidgets = mountDocumentWidgets(this.display.svg);
+    this.interaction = options.interactive ? bindInteraction(this.display, this.emitter, diagramId, { selectable: options.selectable }) : null;
+    this.placeKnobs();
+  }
+  options;
+  diagramId;
+  emitter = new Emitter2();
+  display;
+  interaction;
+  shaderSurfaces;
+  documentWidgets;
+  shaderParameterOverrides = /* @__PURE__ */ new Map();
+  rulerProgressOverrides = /* @__PURE__ */ new Map();
+  placeKnobs() {
+    const radii = placeRulerKnobs(this.display.svg, (id) => this.rulerProgressOverrides.get(id));
+    for (const [id, knobRadius] of radii) {
+      this.setShaderParameters(id, { knobRadius });
+    }
+  }
+  get svg() {
+    return this.display.svg;
+  }
+  on(name, handler) {
+    return this.emitter.on(name, handler);
+  }
+  getSelection() {
+    return this.interaction?.getSelection() ?? [];
+  }
+  select(ids) {
+    this.interaction?.select(ids);
+  }
+  fit() {
+    this.display.fit();
+    this.interaction?.repaint();
+  }
+  getViewport() {
+    return this.display.getViewport();
+  }
+  exportSvg() {
+    return serializeSvgSnapshot(this.svg, this.shaderSurfaces.capture());
+  }
+  exportImage(options) {
+    return rasterizeSvgSnapshot(this.svg, this.exportSvg(), options);
+  }
+  setShaderParameters(ownerId, parameters3) {
+    const merged = { ...this.shaderParameterOverrides.get(ownerId), ...parameters3 };
+    this.shaderParameterOverrides.set(ownerId, merged);
+    return this.shaderSurfaces.setParameters(ownerId, parameters3);
+  }
+  setWidgetValue(widgetId, value) {
+    if (this.documentWidgets.setValue(widgetId, value)) {
+      return true;
+    }
+    const ruler = [...this.svg.querySelectorAll('foreignObject[data-sf-shader="ruler"]')].find(
+      (element) => element.getAttribute("data-sf-id") === widgetId
+    );
+    if (ruler) {
+      const progress = rulerProgress(ruler, Number(value));
+      this.rulerProgressOverrides.set(widgetId, progress);
+      const applied = this.setShaderParameters(widgetId, { progress });
+      this.placeKnobs();
+      return applied;
+    }
+    const scale = [...this.svg.querySelectorAll('foreignObject[data-sf-shader="tickScale"]')].find(
+      (element) => element.getAttribute("data-sf-id") === widgetId
+    );
+    if (!scale) {
+      return false;
+    }
+    let max = 100;
+    try {
+      max = Number(JSON.parse(scale.getAttribute("data-sf-shader-params") ?? "{}").max) || 100;
+    } catch {
+      max = 100;
+    }
+    return this.setShaderParameters(widgetId, { progress: Math.min(1, Math.max(0, Number(value) / max)) });
+  }
+  setPaused(paused) {
+    this.shaderSurfaces.setPaused(paused);
+  }
+  clearOverrides() {
+    this.shaderParameterOverrides.clear();
+    this.rulerProgressOverrides.clear();
+    this.documentWidgets.clearValues();
+  }
+  update(next) {
+    const svg = renderViewerSource(next, this.options.renderOptions);
+    assertViewerUpdateContract(svg);
+    const diff = this.display.updateContent(svg);
+    this.shaderSurfaces.refresh();
+    this.documentWidgets.refresh();
+    this.placeKnobs();
+    for (const [ownerId, parameters3] of this.shaderParameterOverrides) {
+      this.shaderSurfaces.setParameters(ownerId, parameters3);
+    }
+    if (next.resetView) {
+      this.display.fit();
+    }
+    const selectedIds = this.interaction?.getSelection().map((owner) => owner.id) ?? [];
+    if (selectedIds.length > 0) {
+      this.interaction?.select(selectedIds);
+    }
+    this.emitter.emit("sceneDiff", { diagramId: this.diagramId, ...diff });
+    if (next.highlightChanges) {
+      const color2 = typeof next.highlightChanges === "object" ? next.highlightChanges.color : void 0;
+      this.interaction?.flashChanged([...diff.added, ...diff.changed], color2);
+    }
+  }
+  announceReady() {
+    queueMicrotask(() => this.emitter.emit("ready", { diagramId: this.diagramId }));
+  }
+  destroy() {
+    this.interaction?.destroy();
+    this.shaderSurfaces.destroy();
+    this.documentWidgets.destroy();
+    this.shaderParameterOverrides.clear();
+    this.display.destroy();
+    this.emitter.clear();
+  }
+};
+
+// src/runtime/viewer/connectInteraction.ts
+var TAU = Math.PI * 2;
+var LONGEST_TICK = 0.05;
+var finite = (value, fallback) => Number.isFinite(Number(value)) && value !== "" ? Number(value) : fallback;
+function parameters2(surface) {
+  try {
+    return JSON.parse(surface.getAttribute("data-sf-shader-params") ?? "{}");
+  } catch {
+    return {};
+  }
+}
+function pointerValue(svg, id, x, y) {
+  const surface = svg.querySelector(`foreignObject[data-sf-shader][data-sf-id="${CSS.escape(id)}"]`);
+  if (!surface) {
+    return void 0;
+  }
+  const params = parameters2(surface);
+  const box = surface.getBoundingClientRect();
+  const clamp = (value) => Math.min(1, Math.max(0, value));
+  if (surface.getAttribute("data-sf-kind") === "ruler") {
+    const inset = finite(params.inset, 0) > 0 ? finite(params.inset, 0.05) : 0.05;
+    const min = finite(params.min, 0);
+    const max = finite(params.max, 100);
+    const along = params.axis === "horizontal" ? (x - box.left) / box.width : 1 - (y - box.top) / box.height;
+    return min + clamp((along - inset) / (1 - 2 * inset)) * (max - min);
+  }
+  const start = finite(params.start, 225) * Math.PI / 180;
+  const sweep = finite(params.sweep, 270) * Math.PI / 180;
+  const gap = TAU - sweep;
+  const angle = Math.atan2(-(y - (box.top + box.height / 2)), x - (box.left + box.width / 2));
+  const shifted = start - angle + gap / 2;
+  const fraction = clamp(((shifted % TAU + TAU) % TAU - gap / 2) / sweep);
+  return fraction * finite(params.max, 100);
+}
+function hit(svg, ids, x, y) {
+  let found = null;
+  for (const node of svg.querySelectorAll("[data-sf-primary][data-sf-id]")) {
+    const id = node.getAttribute("data-sf-id") ?? "";
+    if (!ids.has(id)) {
+      continue;
+    }
+    const box = node.getBoundingClientRect();
+    if (x >= box.left && x <= box.right && y >= box.top && y <= box.bottom) {
+      found = id;
+    }
+  }
+  return found;
+}
+function trackScales(wiring, event) {
+  const { runtime, svg } = wiring;
+  for (const id of runtime.interactive.scales) {
+    const value = pointerValue(svg, id, event.clientX, event.clientY);
+    if (value !== void 0) {
+      runtime.setElementState(id, { pointer: value });
+    }
+  }
+}
+function updateHover(wiring, event) {
+  const { runtime, svg, options, session } = wiring;
+  const over = options.enabled?.() === false ? null : hit(svg, runtime.interactive.pressable, event.clientX, event.clientY);
+  if (over === session.hovered) {
+    return;
+  }
+  if (session.hovered) {
+    runtime.setElementState(session.hovered, { hovered: false });
+  }
+  session.hovered = over;
+  if (over) {
+    runtime.setElementState(over, { hovered: true });
+  }
+}
+function pressStart(wiring, event) {
+  const { runtime, svg, options, session } = wiring;
+  session.swallowClick = false;
+  const inside = event.target instanceof Node && svg.contains(event.target);
+  if (event.button !== 0 || options.enabled?.() === false || !inside) {
+    return;
+  }
+  const id = hit(svg, runtime.interactive.pressable, event.clientX, event.clientY);
+  if (!id) {
+    return;
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  session.swallowClick = true;
+  session.active = id;
+  trackScales(wiring, event);
+  runtime.press(id);
+  runtime.drag(id);
+}
+function pressMove(wiring, event) {
+  const { runtime, session } = wiring;
+  if (!session.active) {
+    updateHover(wiring, event);
+    return;
+  }
+  trackScales(wiring, event);
+  runtime.drag(session.active);
+}
+function pressEnd(wiring, event, tapOnElement) {
+  const { runtime, svg, session } = wiring;
+  if (!session.active) {
+    return;
+  }
+  event.stopPropagation();
+  const id = session.active;
+  session.active = null;
+  const tapped = tapOnElement && hit(svg, runtime.interactive.pressable, event.clientX, event.clientY) === id;
+  runtime.release(id, tapped);
+  updateHover(wiring, event);
+}
+function swallowClick(session, event) {
+  if (!session.swallowClick) {
+    return;
+  }
+  session.swallowClick = false;
+  event.stopPropagation();
+  event.preventDefault();
+}
+function startTicks(runtime, options) {
+  if (!runtime.graph.handlers.some((handler) => handler.event === "onTick")) {
+    return () => void 0;
+  }
+  let previous = performance.now();
+  let frame = 0;
+  const loop = (now) => {
+    if (options.paused?.() !== true) {
+      runtime.tick(Math.min((now - previous) / 1e3, LONGEST_TICK));
+    }
+    previous = now;
+    frame = window.requestAnimationFrame(loop);
+  };
+  frame = window.requestAnimationFrame(loop);
+  return () => window.cancelAnimationFrame(frame);
+}
+function connectInteraction(viewer, runtime, options = {}) {
+  const session = { active: null, hovered: null, swallowClick: false };
+  const wiring = { runtime, svg: viewer.svg, options, session };
+  const listeners = [
+    ["click", (event) => swallowClick(session, event)],
+    ["pointerdown", (event) => pressStart(wiring, event)],
+    ["pointermove", (event) => pressMove(wiring, event)],
+    ["pointerup", (event) => pressEnd(wiring, event, true)],
+    ["pointercancel", (event) => pressEnd(wiring, event, false)]
+  ];
+  for (const [type, listener] of listeners) {
+    window.addEventListener(type, listener, true);
+  }
+  const stopTicks = startTicks(runtime, options);
+  return () => {
+    for (const [type, listener] of listeners) {
+      window.removeEventListener(type, listener, true);
+    }
+    stopTicks();
+    if (session.active) {
+      runtime.release(session.active, false);
+    }
+    if (session.hovered) {
+      runtime.setElementState(session.hovered, { hovered: false });
+    }
+  };
+}
+
+// src/runtime/viewer/index.ts
+function createViewer(options) {
+  const diagramId = options.diagramId ?? "diagram";
+  const svg = renderViewerSource(options, options.renderOptions);
+  assertCreateViewerContract(svg);
+  const viewer = new ViewerSession(options, svg, diagramId);
+  viewer.announceReady();
+  return viewer;
+}
+
+exports.SHADER_DEFAULTS = SHADER_DEFAULTS;
+exports.connectInteraction = connectInteraction;
+exports.createViewer = createViewer;
+exports.registerShaderProgram = registerShaderProgram;
+exports.shaderProgram = shaderProgram;
+//# sourceMappingURL=chunk-IIOJFR73.cjs.map
+//# sourceMappingURL=chunk-IIOJFR73.cjs.map