stickyflow 0.3.0 → 0.5.0

package/dist/{chunk-CSXQD3ON.js → chunk-G7NRK5AG.js}

@@ -1,244 +1,614 @@
-import { render, formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE } from './chunk-65IVT4GK.js';
-import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-XEN5QIIJ.js';
+import { render } from './chunk-LTGF5OHP.js';
+import { parseContractVersion, isContractCompatible, Emitter, resolveOwner, CHANGE_COLOR, findOwnerNode, isPrimary, linkSelectionOverlay, pathSelectionOverlay, isometricSelectionOverlay, shapeSelectionOverlay, DERIVED_HEIGHT_ROLES, quickDuplicateBubbles, isCameraGesture, linkChangeOverlay, shapeChangeOverlay, startChangeFade, REDUCED_MOTION_DURATION_MS, FLASH_DURATION_MS } from './chunk-7VW2XKVB.js';
+import { formatRollingNumber, DEFAULT_ROLLING_NUMBER_STYLE } from './chunk-IEHE6WVN.js';
 
-// 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/components/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;
 }
-
-// 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);
-    }
+function animateDigit(element, keyframes, duration) {
+  if (duration === 0 || typeof element.animate !== "function") {
+    return null;
   }
-  return { added, removed, changed };
+  return element.animate(keyframes, {
+    duration,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    fill: "forwards"
+  });
 }
-
-// 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;
+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();
   }
-  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;
-    }
+function replaceDigit(cell, character, theme, duration) {
+  if (theme.motion === "fade") {
+    fadeDigit(cell, character, theme, duration);
+    return;
   }
-  for (const attribute of Array.from(next.attributes)) {
-    if (current.getAttribute(attribute.name) !== attribute.value) {
-      current.setAttribute(attribute.name, attribute.value);
-      changed = true;
-    }
+  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();
   }
-  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;
+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;
   }
-  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;
+  const cells = [...digits.querySelectorAll("[data-sf-rolling-digit]")];
+  [...nextValue].forEach((character, index) => {
+    if (previousValue[index] !== character) {
+      replaceDigit(cells[index], character, theme, duration);
     }
-  }
-  return true;
+  });
+  digits.setAttribute("aria-label", nextValue);
 }
-function replaceTextContent(current, next) {
-  while (current.firstChild) {
-    current.removeChild(current.firstChild);
-  }
-  while (next.firstChild) {
-    current.appendChild(next.firstChild);
-  }
+
+// src/runtime/viewer/components/documentComponents.ts
+function findRollingNumber(svg, componentId) {
+  return [...svg.querySelectorAll('foreignObject[data-sf-widget="rollingNumber"]')].find(
+    (surface) => surface.getAttribute("data-sf-id") === componentId
+  );
 }
-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);
+var FADE_INTERVAL = 140;
+function componentDigits(surface) {
+  return surface.querySelector("[data-sf-rolling-digits]") ?? void 0;
+}
+function componentStyle(surface) {
+  const encoded = surface.getAttribute("data-sf-widget-style");
+  if (!encoded) {
+    return DEFAULT_ROLLING_NUMBER_STYLE;
   }
-  if (next.tagName.toLowerCase() === "text" && !childrenEqual(current, next)) {
-    contentChanged = true;
-    replaceTextContent(current, next);
+  try {
+    return { ...DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+  } catch {
+    return DEFAULT_ROLLING_NUMBER_STYLE;
   }
-  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;
+function positiveInteger(value) {
+  if (!value) {
+    return void 0;
   }
-  current?.remove();
-  markTouched(ownerIdOf(next));
-  return next;
+  const number2 = Number(value);
+  return Number.isInteger(number2) && number2 > 0 ? number2 : void 0;
 }
-function placeAfter(svg, element, previousSibling) {
-  const wantedNext = previousSibling ? previousSibling.nextSibling : svg.firstChild;
-  if (wantedNext !== element) {
-    svg.insertBefore(element, wantedNext);
+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 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));
+function setRollingNumber(surface, value, animate) {
+  const digits = componentDigits(surface);
+  if (!digits) {
+    return false;
   }
-  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;
+  const previousValue = surface.getAttribute("data-sf-widget-value") ?? "";
+  const nextValue = formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  if (previousValue === nextValue) {
+    return true;
   }
-  for (const [id, element] of currentById) {
-    if (!retainedIds.has(id)) {
-      touchedOwnerIds.add(ownerIdOf(element));
-      element.remove();
+  updateRollingDigits(digits, previousValue, nextValue, componentStyle(surface), animate ? durationFor(surface) : 0);
+  surface.setAttribute("data-sf-widget-value", nextValue);
+  return true;
+}
+function mountDocumentComponents(svg) {
+  const valueOverrides = /* @__PURE__ */ new Map();
+  const lastApplied = /* @__PURE__ */ new Map();
+  const pending = /* @__PURE__ */ new Map();
+  return {
+    setValue(componentId, value) {
+      const surface = findRollingNumber(svg, componentId);
+      if (!surface) {
+        return false;
+      }
+      valueOverrides.set(componentId, value);
+      if (componentStyle(surface).motion !== "fade") {
+        return setRollingNumber(surface, value, true);
+      }
+      const now = Date.now();
+      const wait = (lastApplied.get(componentId) ?? 0) + FADE_INTERVAL - now;
+      if (wait <= 0) {
+        lastApplied.set(componentId, now);
+        return setRollingNumber(surface, value, true);
+      }
+      if (!pending.has(componentId)) {
+        pending.set(
+          componentId,
+          setTimeout(() => {
+            pending.delete(componentId);
+            lastApplied.set(componentId, Date.now());
+            const current = findRollingNumber(svg, componentId);
+            const latest = valueOverrides.get(componentId);
+            if (current && latest !== void 0) {
+              setRollingNumber(current, latest, true);
+            }
+          }, wait)
+        );
+      }
+      return true;
+    },
+    refresh() {
+      for (const [componentId, value] of valueOverrides) {
+        const surface = findRollingNumber(svg, componentId);
+        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();
     }
-  }
-  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/components/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));
 }
-
-// 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");
+function parameters(surface) {
+  try {
+    return JSON.parse(surface.getAttribute("data-sf-shader-params") ?? "{}");
+  } catch {
+    return {};
   }
-  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] };
+function positive(value, fallback) {
+  return Number(value) > 0 ? Number(value) : fallback;
 }
-
-// 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}`);
+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;
   }
-  fit() {
-    this.#view = { ...this.#natural };
-    this.apply();
+  const number2 = parseInt(match[1], 16);
+  return [number2 >> 16 & 255, number2 >> 8 & 255, number2 & 255];
+}
+var WHITE = [255, 255, 255];
+function shade(node, bump, target) {
+  const base = fills.get(node) ?? node.getAttribute("fill") ?? "";
+  fills.set(node, base);
+  const rgb = hexToRgb(base);
+  if (!rgb) {
+    return;
   }
-  get() {
-    return { ...this.#view };
+  const mixed = rgb.map((channel, index) => Math.round(channel + (target[index] - 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;
   }
-  setNatural(natural) {
-    this.#natural = natural;
+}
+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 peak = (typeof params.peak === "string" ? hexToRgb(params.peak) : null) ?? WHITE;
+    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 = positive(params.inset, 0.05);
+    const line = positive(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 = positive(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, peak);
+    }
   }
-  #userPoint(clientX, clientY) {
-    const matrix = this.#svg.getScreenCTM();
-    if (!matrix) {
-      return null;
+  return radii;
+}
+
+// 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);
     }
-    const point = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
-    return { x: point.x, y: point.y };
+  }
+  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 componentRestyled = 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 (componentRestyled) {
+    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;
+  }
+  #userPoint(clientX, clientY) {
+    const matrix = this.#svg.getScreenCTM();
+    if (!matrix) {
+      return null;
+    }
+    const point = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
+    return { x: point.x, y: point.y };
   }
   zoomBy(factor, clientX, clientY) {
     const rect = this.#svg.getBoundingClientRect();
@@ -299,7 +669,7 @@ var Emitter2 = class extends Emitter {
 };
 
 // src/runtime/viewer/export/raster.ts
-function positive(value, fallback) {
+function positive2(value, fallback) {
   return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
 }
 function loadImage(document, source) {
@@ -332,7 +702,7 @@ function canvasBlob(canvas, mimeType, quality) {
 }
 async function rasterizeSvgSnapshot(svg, snapshot, options = {}) {
   const viewBox = readViewBox(svg);
-  const scale = positive(options.scale, 1);
+  const scale = positive2(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");
@@ -382,7 +752,7 @@ function svgElement(document, name, attributes) {
   }
   return element;
 }
-function readWidgetStyle(surface) {
+function readComponentStyle(surface) {
   try {
     return {
       ...DEFAULT_ROLLING_NUMBER_STYLE,
@@ -477,7 +847,7 @@ function flattenRollingNumbers(svg) {
       height: Number(surface.getAttribute("height"))
     };
     const value = surface.getAttribute("data-sf-widget-value") ?? "";
-    const style = readWidgetStyle(surface);
+    const style = readComponentStyle(surface);
     const label = surface.querySelector("div > span:not([data-sf-rolling-digit])")?.textContent ?? "";
     const cells = cellsOf(box, style.variant === "plain", style.fontSize);
     const labelBlock = label ? cells.size * 0.3 : 0;
@@ -2439,937 +2809,570 @@ var builtins = [
   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;
+  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 (surface.baseFill === null || surface.baseFill === void 0) {
-    surface.baseGeometry.removeAttribute("fill");
-  } else {
-    surface.baseGeometry.setAttribute("fill", surface.baseFill);
+  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/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;
+// 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;
+    }
   }
-  surface.backdropOrigin = [
-    (surfaceBounds.left - svgBounds.left) / svgBounds.width,
-    (svgBounds.bottom - surfaceBounds.bottom) / svgBounds.height
-  ];
-  surface.backdropScale = [surfaceBounds.width / svgBounds.width, surfaceBounds.height / svgBounds.height];
+  return void 0;
 }
-function applyBackdrop(surface, backdrop) {
-  if (!surface.backdropTexture) {
-    return;
+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();
+    }
   }
-  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;
+  for (const surface of clone.querySelectorAll("foreignObject[data-sf-shader]")) {
+    surface.remove();
   }
-  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);
+  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);
   }
-  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);
+  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);
   }
-  for (const [key, fallback] of Object.entries(SHADER_DEFAULTS.numbers)) {
-    uniform1f(surface, uniformName(key), number(parameters3[key], fallback));
+  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;
   }
-  for (const [key, fallback] of Object.entries(SHADER_DEFAULTS.colors)) {
-    uniform3f(surface, uniformName(key), color(parameters3[key], [...fallback]));
+  const match = /^#([0-9a-f]{6})$/i.exec(value);
+  if (!match) {
+    return 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);
+  const integer = Number.parseInt(match[1], 16);
+  return [(integer >> 16 & 255) / 255, (integer >> 8 & 255) / 255, (integer & 255) / 255];
 }
-
-// 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;
-      }
-    }
-  };
+function number(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
 }
-
-// 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 uniform1f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform1f(location, value);
+  }
 }
-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;
+function uniform3f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform3f(location, ...value);
   }
-  return changed;
 }
-function watchSvgChanges(svg, view, onChange) {
-  if (!view) {
-    return () => void 0;
+function uniform2f(surface, name, value) {
+  const location = surface.gl.getUniformLocation(surface.program, name);
+  if (location) {
+    surface.gl.uniform2f(location, ...value);
   }
-  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 = [];
+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 }
   };
-  const captureBackdrops = (generation) => {
-    for (const surface of surfaces) {
-      if (!surface.usesBackdrop) {
+  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;
       }
-      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;
+      uniform1f(surface, name, value);
+      continue;
     }
-    if (clock.paused()) {
-      for (const surface of surfaces) {
-        renderSurface(surface, clock.now());
+    if (typeof value === "boolean") {
+      const location = surface.gl.getUniformLocation(surface.program, name);
+      if (location) {
+        surface.gl.uniform1i(location, value ? 1 : 0);
       }
+      continue;
     }
-    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);
+    const enumValue = enumParameter(key, value);
+    if (enumValue !== void 0) {
+      uniform1f(surface, name, enumValue);
+      continue;
     }
-    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);
+    if (/^#[0-9a-f]{6}$/i.test(value)) {
+      uniform3f(surface, name, color(value, [0, 0, 0]));
     }
-    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 ? render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
-  if (svg == null) {
-    throw new Error("createViewer: provide either `source` (SFL) or `svg`.");
+// 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;
   }
-  return svg;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return void 0;
+  }
+  return shader;
 }
-function assertCreateViewerContract(svg) {
-  const version = parseContractVersion(svg);
-  if (!isContractCompatible(version)) {
-    throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
+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 assertViewerUpdateContract(svg) {
-  const version = parseContractVersion(svg);
-  if (!isContractCompatible(version)) {
-    throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
+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/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;
+// 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 {};
   }
-  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;
+function bindFullScreenQuad(gl, program) {
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    return void 0;
   }
-  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();
+  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 replaceDigit(cell, character, theme, duration) {
-  if (theme.motion === "fade") {
-    fadeDigit(cell, character, theme, duration);
-    return;
+function findBaseGeometry(owner, definition) {
+  const ownerId = owner.getAttribute("data-sf-id");
+  if (!definition.replacesBaseFill || !ownerId) {
+    return void 0;
   }
-  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();
+  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 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);
+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;
   }
-  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);
+  if (surface.baseFill === null || surface.baseFill === void 0) {
+    surface.baseGeometry.removeAttribute("fill");
+  } else {
+    surface.baseGeometry.setAttribute("fill", surface.baseFill);
+  }
 }
 
-// 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 DEFAULT_ROLLING_NUMBER_STYLE;
+// src/runtime/viewer/shaders/renderSurface.ts
+function syncBackdropBounds(surface) {
+  const svg = surface.canvas.closest("svg");
+  if (!svg) {
+    return;
   }
-  try {
-    return { ...DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
-  } catch {
-    return DEFAULT_ROLLING_NUMBER_STYLE;
+  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 positiveInteger(value) {
-  if (!value) {
-    return void 0;
+function applyBackdrop(surface, backdrop) {
+  if (!surface.backdropTexture) {
+    return;
   }
-  const number2 = Number(value);
-  return Number.isInteger(number2) && number2 > 0 ? number2 : void 0;
+  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);
 }
-function durationFor(surface) {
-  const duration = Number(surface.getAttribute("data-sf-widget-duration"));
-  if (!Number.isFinite(duration) || duration < 0) {
-    return 420;
+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;
   }
-  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;
+  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);
   }
-  const previousValue = surface.getAttribute("data-sf-widget-value") ?? "";
-  const nextValue = formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
-  if (previousValue === nextValue) {
-    return true;
+  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);
   }
-  updateRollingDigits(digits, previousValue, nextValue, widgetStyle(surface), animate ? durationFor(surface) : 0);
-  surface.setAttribute("data-sf-widget-value", nextValue);
-  return true;
+  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);
 }
-function mountDocumentWidgets(svg) {
-  const valueOverrides = /* @__PURE__ */ new Map();
-  const lastApplied = /* @__PURE__ */ new Map();
-  const pending = /* @__PURE__ */ new Map();
+
+// src/runtime/viewer/shaders/surfaceClock.ts
+function createSurfaceClock(view) {
+  let pausedSince = null;
+  let spentPaused = 0;
+  const real = () => (view?.performance.now() ?? 0) / 1e3;
   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);
+    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;
       }
-      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);
+// 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 hexToRgb(value) {
-  const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
-  if (!match) {
-    return null;
+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;
   }
-  const number2 = parseInt(match[1], 16);
-  return [number2 >> 16 & 255, number2 >> 8 & 255, number2 & 255];
+  return changed;
 }
-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 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 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);
-        }
+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());
       }
     }
-    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) {
+    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;
       }
-      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);
+      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 ? 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 = parseContractVersion(svg);
+  if (!isContractCompatible(version)) {
+    throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
+  }
+}
+function assertViewerUpdateContract(svg) {
+  const version = parseContractVersion(svg);
+  if (!isContractCompatible(version)) {
+    throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
-  return radii;
 }
 
 // src/runtime/viewer/session.ts
@@ -3379,7 +3382,7 @@ var ViewerSession = class {
     this.diagramId = diagramId;
     this.display = mountDisplay(options.container, initialSvg);
     this.shaderSurfaces = mountShaderSurfaces(this.display.svg);
-    this.documentWidgets = mountDocumentWidgets(this.display.svg);
+    this.documentComponents = mountDocumentComponents(this.display.svg);
     this.interaction = options.interactive ? bindInteraction(this.display, this.emitter, diagramId, { selectable: options.selectable }) : null;
     this.placeKnobs();
   }
@@ -3389,7 +3392,7 @@ var ViewerSession = class {
   display;
   interaction;
   shaderSurfaces;
-  documentWidgets;
+  documentComponents;
   shaderParameterOverrides = /* @__PURE__ */ new Map();
   rulerProgressOverrides = /* @__PURE__ */ new Map();
   placeKnobs() {
@@ -3428,22 +3431,25 @@ var ViewerSession = class {
     this.shaderParameterOverrides.set(ownerId, merged);
     return this.shaderSurfaces.setParameters(ownerId, parameters3);
   }
-  setWidgetValue(widgetId, value) {
-    if (this.documentWidgets.setValue(widgetId, value)) {
+  setWidgetValue(componentId, value) {
+    return this.setComponentValue(componentId, value);
+  }
+  setComponentValue(componentId, value) {
+    if (this.documentComponents.setValue(componentId, value)) {
       return true;
     }
     const ruler = [...this.svg.querySelectorAll('foreignObject[data-sf-shader="ruler"]')].find(
-      (element) => element.getAttribute("data-sf-id") === widgetId
+      (element) => element.getAttribute("data-sf-id") === componentId
     );
     if (ruler) {
       const progress = rulerProgress(ruler, Number(value));
-      this.rulerProgressOverrides.set(widgetId, progress);
-      const applied = this.setShaderParameters(widgetId, { progress });
+      this.rulerProgressOverrides.set(componentId, progress);
+      const applied = this.setShaderParameters(componentId, { progress });
       this.placeKnobs();
       return applied;
     }
     const scale = [...this.svg.querySelectorAll('foreignObject[data-sf-shader="tickScale"]')].find(
-      (element) => element.getAttribute("data-sf-id") === widgetId
+      (element) => element.getAttribute("data-sf-id") === componentId
     );
     if (!scale) {
       return false;
@@ -3454,7 +3460,7 @@ var ViewerSession = class {
     } catch {
       max = 100;
     }
-    return this.setShaderParameters(widgetId, { progress: Math.min(1, Math.max(0, Number(value) / max)) });
+    return this.setShaderParameters(componentId, { progress: Math.min(1, Math.max(0, Number(value) / max)) });
   }
   setPaused(paused) {
     this.shaderSurfaces.setPaused(paused);
@@ -3462,14 +3468,14 @@ var ViewerSession = class {
   clearOverrides() {
     this.shaderParameterOverrides.clear();
     this.rulerProgressOverrides.clear();
-    this.documentWidgets.clearValues();
+    this.documentComponents.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.documentComponents.refresh();
     this.placeKnobs();
     for (const [ownerId, parameters3] of this.shaderParameterOverrides) {
       this.shaderSurfaces.setParameters(ownerId, parameters3);
@@ -3493,13 +3499,52 @@ var ViewerSession = class {
   destroy() {
     this.interaction?.destroy();
     this.shaderSurfaces.destroy();
-    this.documentWidgets.destroy();
+    this.documentComponents.destroy();
     this.shaderParameterOverrides.clear();
     this.display.destroy();
     this.emitter.clear();
   }
 };
 
+// src/runtime/viewer/connectKeyboard.ts
+var ACTIVATION_KEYS = /* @__PURE__ */ new Set([" ", "Enter"]);
+function operatedId(runtime, target) {
+  const node = target instanceof Element ? target.closest("[data-sf-primary][data-sf-id]") : null;
+  const id = node?.getAttribute("data-sf-id") ?? null;
+  return id && runtime.interactive.pressable.has(id) ? id : null;
+}
+function connectKeyboard(viewer, runtime, options = {}) {
+  const focusChanged = (event, focused) => {
+    const id = operatedId(runtime, event.target);
+    if (id) {
+      runtime.setElementState(id, { focused });
+    }
+  };
+  const activate = (event) => {
+    if (!ACTIVATION_KEYS.has(event.key) || event.repeat || options.enabled?.() === false) {
+      return;
+    }
+    const id = operatedId(runtime, event.target);
+    if (id) {
+      event.preventDefault();
+      runtime.activate(id);
+    }
+  };
+  const listeners = [
+    ["focusin", (event) => focusChanged(event, true)],
+    ["focusout", (event) => focusChanged(event, false)],
+    ["keydown", activate]
+  ];
+  for (const [type, listener] of listeners) {
+    viewer.svg.addEventListener(type, listener);
+  }
+  return () => {
+    for (const [type, listener] of listeners) {
+      viewer.svg.removeEventListener(type, listener);
+    }
+  };
+}
+
 // src/runtime/viewer/connectInteraction.ts
 var TAU = Math.PI * 2;
 var LONGEST_TICK = 0.05;
@@ -3648,11 +3693,13 @@ function connectInteraction(viewer, runtime, options = {}) {
   for (const [type, listener] of listeners) {
     window.addEventListener(type, listener, true);
   }
+  const disconnectKeyboard = connectKeyboard(viewer, runtime, options);
   const stopTicks = startTicks(runtime, options);
   return () => {
     for (const [type, listener] of listeners) {
       window.removeEventListener(type, listener, true);
     }
+    disconnectKeyboard();
     stopTicks();
     if (session.active) {
       runtime.release(session.active, false);
@@ -3674,5 +3721,5 @@ function createViewer(options) {
 }
 
 export { SHADER_DEFAULTS, connectInteraction, createViewer, registerShaderProgram, shaderProgram };
-//# sourceMappingURL=chunk-CSXQD3ON.js.map
-//# sourceMappingURL=chunk-CSXQD3ON.js.map
+//# sourceMappingURL=chunk-G7NRK5AG.js.map
+//# sourceMappingURL=chunk-G7NRK5AG.js.map