stickyflow 0.10.0 → 0.11.1

package/dist/{chunk-SDOHUNBW.js → chunk-TQIYK5OA.js}

@@ -1,4 +1,4 @@
-import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, paint, CHART_TITLE_PROP, chartText, isHorizontalBar, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, labelTilt, tiltedLabelRoom, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, renderPieLabels, interpolateHexColorStops, contrastTextColor, formatFieldValue, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, clipSegmentToRect, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-HRU6VOEC.js';
+import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, paint, CHART_TITLE_PROP, chartText, isHorizontalBar, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, labelTilt, tiltedLabelRoom, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, renderPieLabels, interpolateHexColorStops, contrastTextColor, formatFieldValue, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, clipSegmentToRect, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber, parseHexRgb } from './chunk-G6IW2IX3.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -117,8 +117,8 @@ function dashArray(value) {
   if (!Array.isArray(parsed)) {
     return void 0;
   }
-  const numbers = parsed.filter((entry) => typeof entry === "number" && Number.isFinite(entry));
-  return numbers.length === parsed.length ? numbers : void 0;
+  const numbers2 = parsed.filter((entry) => typeof entry === "number" && Number.isFinite(entry));
+  return numbers2.length === parsed.length ? numbers2 : void 0;
 }
 function solidColor(value) {
   const decoded = decodeColor(value);
@@ -630,7 +630,7 @@ function readProperty(descriptor, raw) {
     case "boolean":
       return raw === void 0 ? descriptor.default : raw === "true";
     case "color":
-      return cssColor(raw) ?? descriptor.default;
+      return descriptor.optional && raw === "none" ? "none" : cssColor(raw) ?? descriptor.default;
     case "enum":
       return raw !== void 0 && descriptor.options.includes(raw) ? raw : descriptor.default;
     case "string":
@@ -1010,12 +1010,29 @@ function pathObject(e) {
 }
 
 // src/renderInput/fromSfl/canvasObjects/shape.ts
+var IMAGE_FITS = ["cover", "contain", "fill"];
 function shapeTypeOf(value) {
   return value || "rectangle";
 }
+function numbers(value, count) {
+  const parts = value?.split(",").map(Number);
+  return parts?.length === count && parts.every(Number.isFinite) ? parts : void 0;
+}
+function imageOf(p) {
+  const size = numbers(p.imageSize, 2);
+  const crop = numbers(p.crop, 4);
+  return {
+    src: p.src,
+    fit: oneOf(p.fit, IMAGE_FITS, "cover"),
+    pixels: size && size[0] > 0 && size[1] > 0 ? [size[0], size[1]] : void 0,
+    crop: crop && crop[2] > 0 && crop[3] > 0 ? { x: crop[0], y: crop[1], width: crop[2], height: crop[3] } : void 0
+  };
+}
 function shapeObject(e, shaders) {
   const p = e.props;
   const isText = e.kind === "text";
+  const isImage = e.kind === "image";
+  const unpainted = isText || isImage;
   return {
     id: e.id,
     type: "shape",
@@ -1029,8 +1046,8 @@ function shapeObject(e, shaders) {
     w: e.width,
     h: e.height,
     rotation: e.rotation ?? 0,
-    fillColor: decodeColor(p.fill ?? (isText ? "none" : void 0)),
-    strokeColor: strokePaint(p.stroke ?? (isText ? "none" : void 0)),
+    fillColor: decodeColor(p.fill ?? (unpainted ? "none" : void 0)),
+    strokeColor: strokePaint(p.stroke ?? (unpainted ? "none" : void 0)),
     isText: isText || void 0,
     strokeWidth: numOf(p.strokeWidth),
     textColor: p.textColor,
@@ -1051,7 +1068,8 @@ function shapeObject(e, shaders) {
     parentFrameId: e.parentFrameId,
     order: e.order,
     sourceIndex: e.sourceIndex,
-    shader: p.shader ? shaders.get(p.shader) : void 0
+    shader: p.shader ? shaders.get(p.shader) : void 0,
+    image: isImage && p.src ? imageOf(p) : void 0
   };
 }
 
@@ -1482,7 +1500,7 @@ function fade(component, style) {
   const shown = component.disabled ? { ...style, opacity: 0.4 } : style;
   return animate > 0 ? { ...shown, transition: animate } : shown;
 }
-function hitArea(component, box) {
+function hitArea(component, box, takesClicks = true) {
   return {
     id: `widget-${component.id}`,
     type: "rect",
@@ -1492,7 +1510,7 @@ function hitArea(component, box) {
     y: box.y,
     width: box.width,
     height: box.height,
-    style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: "all" }
+    style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: takesClicks ? "all" : "none" }
   };
 }
 function labelText(component, part, area, label, order) {
@@ -1613,6 +1631,268 @@ function buildCheckbox(component, index) {
   ];
 }
 
+// src/renderScene/artifacts/component/hand.ts
+var MIN_TIP = 0.25;
+function withAlpha(color, alpha) {
+  const rgb = parseHexRgb(color);
+  return rgb && alpha < 1 ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${Number(alpha.toFixed(3))})` : color;
+}
+var num = (value) => String(Number(value.toFixed(3)));
+var isOff = (component, key) => textProperty(component, key) === "none";
+var colorOr = (component, key, fallback) => isOff(component, key) ? fallback : textProperty(component, key) || fallback;
+function handOf(component, box) {
+  const radius = Math.min(box.width, box.height) / 2;
+  const root = Math.max(0.5, numberProperty2(component, "width"));
+  const taper = Math.min(1, Math.max(0, numberProperty2(component, "taper")));
+  return {
+    cx: box.x + box.width / 2,
+    cy: box.y + box.height / 2,
+    radius,
+    length: Math.max(1, numberProperty2(component, "length") * radius),
+    tail: Math.max(0, numberProperty2(component, "tail") * radius),
+    gap: Math.max(0, numberProperty2(component, "gap") * radius),
+    rootHalf: root / 2,
+    tipHalf: Math.max(MIN_TIP, root * taper / 2)
+  };
+}
+function outline({ cx, cy, length, tail, gap, rootHalf, tipHalf }) {
+  const root = gap > 0 ? cy - gap : cy;
+  const back = gap > 0 ? 0 : tail;
+  const tipLeft = `L${num(cx - tipHalf)} ${num(cy - length)}`;
+  const tip = `A${num(tipHalf)} ${num(tipHalf)} 0 0 1 ${num(cx + tipHalf)} ${num(cy - length)}`;
+  const round2 = `A${num(rootHalf)} ${num(rootHalf)} 0 0 1 ${num(cx - rootHalf)} ${num(root + back)}`;
+  if (gap > 0) {
+    return `M${num(cx - rootHalf)} ${num(root)}${tipLeft}${tip}L${num(cx + rootHalf)} ${num(root)}${round2}Z`;
+  }
+  return [
+    `M${num(cx - rootHalf)} ${num(root + back)}`,
+    `L${num(cx - rootHalf)} ${num(root)}`,
+    tipLeft,
+    tip,
+    `L${num(cx + rootHalf)} ${num(root)}`,
+    `L${num(cx + rootHalf)} ${num(root + back)}`,
+    back > 0 ? round2 : `L${num(cx - rootHalf)} ${num(root)}`,
+    "Z"
+  ].join("");
+}
+function shaped(hand, layer) {
+  const rootHalf = hand.rootHalf * layer.scale;
+  const tipHalf = layer.taper === void 0 ? hand.tipHalf * layer.scale : rootHalf * layer.taper;
+  return { ...hand, length: hand.length * (layer.length ?? 1), rootHalf, tipHalf: Math.max(MIN_TIP, tipHalf) };
+}
+function stopsPaint(hand, stops, fadeOut, clear) {
+  const tail = hand.gap > 0 ? 0 : hand.tail;
+  const offset = (along2) => (tail + along2 * hand.length) / (hand.length + tail) * 100;
+  const [, firstColor, firstAlpha] = stops[0];
+  return {
+    kind: "linear-gradient",
+    angle: -90,
+    stops: [
+      ...tail > 0 ? [{ offset: 0, color: withAlpha(firstColor, firstAlpha * (clear ? 0 : 1 - fadeOut)) }] : [],
+      ...stops.map(([along2, color, alpha], position) => ({
+        offset: offset(along2),
+        color: withAlpha(color, clear && position === 0 ? 0 : alpha)
+      }))
+    ]
+  };
+}
+function plainPaint(hand, layer, fadeOut, tipFade) {
+  if (fadeOut <= 0 && tipFade <= 0 && !layer.clear) {
+    return solid(layer.color);
+  }
+  return {
+    kind: "linear-gradient",
+    angle: -90,
+    stops: [
+      { offset: 0, color: withAlpha(layer.root, layer.clear ? 0 : 1 - fadeOut) },
+      // A tail is lit at the pivot and dissolves at its end.
+      ...hand.gap === 0 && hand.tail > 0 ? [{ offset: hand.tail / (hand.length + hand.tail) * 100, color: layer.root }] : [],
+      { offset: 100, color: withAlpha(layer.color, 1 - tipFade) }
+    ]
+  };
+}
+function handLayer(component, box, base, angle, layer, order) {
+  const hand = shaped(base, layer);
+  const fadeOut = Math.min(1, Math.max(0, numberProperty2(component, "fade")));
+  const tipFade = Math.min(1, Math.max(0, layer.tipFade ?? numberProperty2(component, "tipFade")));
+  const glow = numberProperty2(component, "glow");
+  const soft = layer.blur > 0;
+  const reach = Math.max(hand.rootHalf, hand.tipHalf);
+  const near = hand.gap > 0 ? -hand.gap : hand.tail;
+  const extent = { x: hand.cx - reach, y: hand.cy - hand.length, width: reach * 2, height: hand.length + near };
+  return {
+    id: `widget-${component.id}-${layer.part}`,
+    type: "path",
+    order: box.order + order,
+    bounds: rotatedBounds(extent, 0, 0),
+    d: outline(hand),
+    rotation: angle,
+    rotationCenter: { x: hand.cx, y: hand.cy },
+    style: fade(component, {
+      // The gradient runs from the tail to the tip, and turns with the hand.
+      fill: layer.stops ? stopsPaint(hand, layer.stops, fadeOut, Boolean(layer.clear)) : plainPaint(hand, layer, fadeOut, tipFade),
+      stroke: { kind: "none" },
+      ...soft ? { blur: layer.blur, opacity: layer.opacity } : {},
+      ...!soft && glow > 0 && !isOff(component, "glowColor") ? {
+        shadow: {
+          color: colorOr(component, "glowColor", layer.color),
+          opacity: 1,
+          blur: glow,
+          dx: 0,
+          dy: 0
+        }
+      } : {}
+    })
+  };
+}
+function trailLayers(color, root, light, soft, clear, lit) {
+  const trail = [
+    {
+      part: "hand-light",
+      scale: 4.5,
+      length: 0.55,
+      taper: 0.15,
+      blur: soft * 3,
+      opacity: 1,
+      color: light,
+      root: light,
+      stops: [
+        [0, light, 0.95],
+        [0.35, light, 0.45],
+        [1, light, 0]
+      ]
+    },
+    {
+      part: "hand-body",
+      scale: 1.6,
+      taper: 0.25,
+      blur: soft,
+      opacity: 1,
+      color,
+      root,
+      clear,
+      stops: [
+        [0, root, 1],
+        [0.18, color, 1],
+        [0.6, color, 0.55],
+        [1, color, 0]
+      ]
+    },
+    {
+      part: "hand",
+      scale: 0.55,
+      length: 0.8,
+      taper: 0.3,
+      blur: soft * 0.3,
+      opacity: 1,
+      color: root,
+      root,
+      clear,
+      stops: [
+        [0, root, 1],
+        [0.45, root, 0.6],
+        [1, root, 0]
+      ]
+    }
+  ];
+  return lit ? trail : trail.slice(1);
+}
+function handLayers(component, box, hand, angle) {
+  const color = textProperty(component, "color");
+  const root = colorOr(component, "root", color);
+  const light = colorOr(component, "glowColor", color);
+  const lit = !isOff(component, "glowColor");
+  const clear = isOff(component, "root");
+  const soft = numberProperty2(component, "soft");
+  const bloom = numberProperty2(component, "bloom");
+  if (soft > 0) {
+    return trailLayers(color, root, light, soft, clear, lit).map(
+      (layer, position) => handLayer(component, box, hand, angle, layer, 0.26 + position * 0.02)
+    );
+  }
+  return [
+    // A blurred light under the hand, bright at the pivot and dark at the tip.
+    ...bloom > 0 && lit ? [
+      handLayer(
+        component,
+        box,
+        hand,
+        angle,
+        { part: "hand-bloom", scale: 4, blur: bloom, opacity: 0.9, color: light, root: light, tipFade: 1 },
+        0.26
+      )
+    ] : [],
+    handLayer(component, box, hand, angle, { part: "hand", scale: 1, blur: 0, opacity: 1, color, root, clear }, 0.3)
+  ];
+}
+function hubNode(component, box, hand, radius) {
+  const ringWidth = numberProperty2(component, "hubRing");
+  return {
+    id: `widget-${component.id}-hub`,
+    type: "ellipse",
+    order: box.order + 0.4,
+    bounds: rotatedBounds(
+      { x: hand.cx - radius, y: hand.cy - radius, width: radius * 2, height: radius * 2 },
+      0,
+      ringWidth
+    ),
+    cx: hand.cx,
+    cy: hand.cy,
+    rx: Math.max(0.5, radius - ringWidth / 2),
+    ry: Math.max(0.5, radius - ringWidth / 2),
+    style: fade(component, {
+      fill: isOff(component, "hubFill") ? { kind: "none" } : solid(textProperty(component, "hubFill")),
+      stroke: ringWidth > 0 ? solid(textProperty(component, "color")) : { kind: "none" },
+      strokeWidth: ringWidth,
+      ...numberProperty2(component, "glow") > 0 && !isOff(component, "glowColor") ? {
+        shadow: {
+          color: colorOr(component, "glowColor", textProperty(component, "color")),
+          opacity: 1,
+          blur: numberProperty2(component, "glow"),
+          dx: 0,
+          dy: 0
+        }
+      } : {}
+    })
+  };
+}
+var HIT_HALF = 8;
+function pickNodes(component, box, hand, angle) {
+  const reach = { ...hand, rootHalf: Math.max(hand.rootHalf, HIT_HALF), tipHalf: Math.max(hand.tipHalf, HIT_HALF) };
+  const near = reach.gap > 0 ? -reach.gap : reach.tail;
+  const extent = {
+    x: reach.cx - HIT_HALF,
+    y: reach.cy - reach.length,
+    width: HIT_HALF * 2,
+    height: reach.length + near
+  };
+  return [
+    hitArea(component, box, false),
+    {
+      id: `widget-${component.id}-pick`,
+      type: "path",
+      order: box.order + 0.5,
+      bounds: rotatedBounds(extent, 0, 0),
+      d: outline(reach),
+      rotation: angle,
+      rotationCenter: { x: reach.cx, y: reach.cy },
+      style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: "all" }
+    }
+  ];
+}
+function buildHand(component, index) {
+  const box = controlBox(component, index, { width: 200, height: 200 });
+  const hand = handOf(component, box);
+  const max = numberProperty2(component, "max") || 1;
+  const angle = numberProperty2(component, "start") + Number(component.value) / max * 360;
+  const hub = numberProperty2(component, "hub");
+  return [
+    ...pickNodes(component, box, hand, angle),
+    ...handLayers(component, box, hand, angle),
+    ...hub > 0 ? [hubNode(component, box, hand, hub)] : []
+  ];
+}
+
 // src/renderScene/artifacts/component/knob.ts
 var DOT_RATIO = 0.62;
 function decimals(step) {
@@ -2190,6 +2470,7 @@ var builders = /* @__PURE__ */ new Map([
   ["progress", asComponentBuilder(buildProgress)],
   ["segmented", asComponentBuilder(buildSegmented)],
   ["knob", asComponentBuilder(buildKnob)],
+  ["hand", asComponentBuilder(buildHand)],
   ["range", asComponentBuilder(buildSlider)]
 ]);
 function registerComponentBuilder(type, builder) {
@@ -3595,6 +3876,68 @@ function renderShapeGeometry(context) {
   return renderer(context);
 }
 
+// src/renderScene/artifacts/shape/image.ts
+function clipOf(outline2, box) {
+  if (outline2?.type === "path") {
+    return { type: "path", d: outline2.d };
+  }
+  if (outline2?.type === "ellipse") {
+    const { cx, cy, rx, ry } = outline2;
+    return {
+      type: "path",
+      d: `M${cx - rx} ${cy}A${rx} ${ry} 0 1 0 ${cx + rx} ${cy}A${rx} ${ry} 0 1 0 ${cx - rx} ${cy}Z`
+    };
+  }
+  return { type: "rect", ...box, rx: outline2?.type === "rect" ? outline2.rx ?? 0 : 0 };
+}
+function croppedBox(image, crop, pixels, box) {
+  const scaleX = box.width / crop.width;
+  const scaleY = box.height / crop.height;
+  const scale = image.fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
+  const [sx, sy] = image.fit === "fill" ? [scaleX, scaleY] : [scale, scale];
+  return {
+    x: box.x + (box.width - crop.width * sx) / 2 - crop.x * sx,
+    y: box.y + (box.height - crop.height * sy) / 2 - crop.y * sy,
+    width: pixels[0] * sx,
+    height: pixels[1] * sy
+  };
+}
+var ASPECTS = { cover: "slice", contain: "meet", fill: "none" };
+function renderShapeImage(context, outline2, diagnostics) {
+  const image = context.shape.image;
+  if (!image) {
+    return void 0;
+  }
+  if (image.crop && !image.pixels) {
+    diagnostics.push({
+      severity: "warning",
+      code: "image-crop-without-size",
+      ownerId: context.shape.id,
+      message: `The image '${context.shape.id}' has a crop but no imageSize, so it is shown uncropped. Give it the size of the file, as imageSize: width, height.`
+    });
+  }
+  const box = { x: context.x, y: context.y, width: context.width, height: context.height };
+  const cropped = image.crop && image.pixels;
+  return {
+    type: "image",
+    id: `${context.id}-image`,
+    order: context.order,
+    bounds: context.bounds,
+    ...cropped ? croppedBox(image, image.crop, image.pixels, box) : box,
+    href: image.src,
+    aspect: cropped ? "none" : ASPECTS[image.fit],
+    rotation: context.rotation,
+    rotationCenter: context.rotationCenter,
+    style: {
+      opacity: context.style.opacity,
+      blur: context.style.blur,
+      blend: context.style.blend,
+      clip: clipOf(outline2, box),
+      pointerEvents: "none"
+    }
+  };
+}
+
 // src/renderScene/artifacts/shape/shaderSurface.ts
 var RECT_PROGRAMS = /* @__PURE__ */ new Set([
   "reactivePanel",
@@ -3901,6 +4244,22 @@ function buildShape(shape, index, diagnostics, measureText) {
     }
     nodes.push(shader);
   }
+  const image = renderShapeImage(context, nodes[0], diagnostics);
+  if (image) {
+    for (const node of nodes) {
+      if (node.type === "ellipse" || node.type === "path" || node.type === "rect") {
+        node.style = { ...node.style, pointerEvents: "all" };
+      }
+    }
+    nodes.push(image);
+  }
+  if (shape.isText) {
+    for (const node of nodes) {
+      if (node.type === "ellipse" || node.type === "path" || node.type === "rect") {
+        node.style = { ...node.style, pointerEvents: "all" };
+      }
+    }
+  }
   const text = renderShapeText(context, strokeWidth, measureText);
   if (text) {
     nodes.push(text);
@@ -9713,7 +10072,7 @@ function buildRenderScene(input, options = {}) {
 
 // src/svg/format.ts
 var xml = (value) => String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-var num = (value) => Number(value.toFixed(3)).toString();
+var num2 = (value) => Number(value.toFixed(3)).toString();
 var safeId = (value) => `sf-${value.replace(/[^A-Za-z0-9_.:-]/g, "-")}`;
 
 // src/svg/clipDefinitions.ts
@@ -9735,7 +10094,7 @@ var SvgClipDefinitions = class {
       const outer = clip.within ? this.define(clip.within) : void 0;
       id = safeId(`${this.prefix}clip-${this.ids.size}`);
       this.ids.set(key, id);
-      const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${num(clip.x)}" y="${num(clip.y)}" width="${num(clip.width)}" height="${num(clip.height)}" rx="${num(clip.rx)}"/>`;
+      const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${num2(clip.x)}" y="${num2(clip.y)}" width="${num2(clip.width)}" height="${num2(clip.height)}" rx="${num2(clip.rx)}"/>`;
       this.addDefinition(`<clipPath id="${id}"${outer ? ` clip-path="url(#${outer})"` : ""}>${shape}</clipPath>`);
     }
     return id;
@@ -9777,18 +10136,18 @@ var SvgFilterDefinitions = class {
       id = safeId(`${this.prefix}shadow-${nodeId}-${this.ids.size}`);
       this.ids.set(key, id);
       this.addDefinition(
-        `<filter id="${id}" x="${num(-margin * 100)}%" y="${num(-margin * 100)}%" width="${num((1 + margin * 2) * 100)}%" height="${num((1 + margin * 2) * 100)}%">${primitives(value)}</filter>`
+        `<filter id="${id}" x="${num2(-margin * 100)}%" y="${num2(-margin * 100)}%" width="${num2((1 + margin * 2) * 100)}%" height="${num2((1 + margin * 2) * 100)}%">${primitives(value)}</filter>`
       );
     }
     return id;
   }
 };
 function outerShadowPrimitives(shadow) {
-  return `<feDropShadow dx="${num(shadow.dx)}" dy="${num(shadow.dy)}" stdDeviation="${num(shadow.blur / 2)}" flood-color="${xml(shadow.color)}" flood-opacity="${num(shadow.opacity)}"/>`;
+  return `<feDropShadow dx="${num2(shadow.dx)}" dy="${num2(shadow.dy)}" stdDeviation="${num2(shadow.blur / 2)}" flood-color="${xml(shadow.color)}" flood-opacity="${num2(shadow.opacity)}"/>`;
 }
 function blurPrimitives(effect) {
-  const blur = effect.blur > 0 ? `<feGaussianBlur stdDeviation="${num(effect.blur / 2)}"/>` : "";
-  const saturate = effect.saturate === 1 ? "" : `<feColorMatrix type="saturate" values="${num(effect.saturate)}"/>`;
+  const blur = effect.blur > 0 ? `<feGaussianBlur stdDeviation="${num2(effect.blur / 2)}"/>` : "";
+  const saturate = effect.saturate === 1 ? "" : `<feColorMatrix type="saturate" values="${num2(effect.saturate)}"/>`;
   return blur + saturate;
 }
 function innerShadowPrimitives(shadow) {
@@ -9796,9 +10155,9 @@ function innerShadowPrimitives(shadow) {
     '<feComponentTransfer in="SourceAlpha" result="sf-inverted-alpha">',
     '<feFuncA type="table" tableValues="1 0"/>',
     "</feComponentTransfer>",
-    `<feGaussianBlur in="sf-inverted-alpha" stdDeviation="${num(shadow.blur / 2)}" result="sf-blurred"/>`,
-    `<feOffset in="sf-blurred" dx="${num(shadow.dx)}" dy="${num(shadow.dy)}" result="sf-offset"/>`,
-    `<feFlood flood-color="${xml(shadow.color)}" flood-opacity="${num(shadow.opacity)}" result="sf-color"/>`,
+    `<feGaussianBlur in="sf-inverted-alpha" stdDeviation="${num2(shadow.blur / 2)}" result="sf-blurred"/>`,
+    `<feOffset in="sf-blurred" dx="${num2(shadow.dx)}" dy="${num2(shadow.dy)}" result="sf-offset"/>`,
+    `<feFlood flood-color="${xml(shadow.color)}" flood-opacity="${num2(shadow.opacity)}" result="sf-color"/>`,
     '<feComposite in="sf-color" in2="sf-offset" operator="in" result="sf-halo"/>',
     '<feComposite in="sf-halo" in2="SourceGraphic" operator="in" result="sf-inset"/>',
     '<feComposite in="sf-inset" in2="SourceGraphic" operator="over"/>'
@@ -9808,19 +10167,19 @@ function innerShadowPrimitives(shadow) {
 // src/svg/markerBodies.ts
 function markerBody(type, size, color, strokeWidth) {
   const bodies = {
-    arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)}" fill="none" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`,
-    filled_arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num(strokeWidth * 0.5)}" stroke-linejoin="round"/>`,
-    circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
-    filled_circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="${color}"/>`,
-    diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
-    filled_diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num(strokeWidth * 0.5)}"/>`,
-    bar: `<path d="M 0 ${num(-size * 0.6)} V ${num(size * 0.6)}" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    triangle: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 L ${num(-size)} ${num(size * 0.72)} Z" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linejoin="round"/>`,
-    one: `<path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)} M ${num(-size * 0.72)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
-    zero_one: `<circle cx="${num(-size * 0.8)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/><path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
-    many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    one_many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0 M ${num(-size * 1.45)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    zero_many: `<circle cx="${num(-size * 1.45)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/><path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`
+    arrow: `<path d="M ${num2(-size)} ${num2(-size * 0.6)} L 0 0 L ${num2(-size)} ${num2(size * 0.6)}" fill="none" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`,
+    filled_arrow: `<path d="M ${num2(-size)} ${num2(-size * 0.6)} L 0 0 L ${num2(-size)} ${num2(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num2(strokeWidth * 0.5)}" stroke-linejoin="round"/>`,
+    circle: `<circle cx="0" cy="0" r="${num2(size * 0.5)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
+    filled_circle: `<circle cx="0" cy="0" r="${num2(size * 0.5)}" fill="${color}"/>`,
+    diamond: `<path d="M ${num2(-size * 0.6)} 0 L 0 ${num2(-size * 0.6)} L ${num2(size * 0.6)} 0 L 0 ${num2(size * 0.6)} Z" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
+    filled_diamond: `<path d="M ${num2(-size * 0.6)} 0 L 0 ${num2(-size * 0.6)} L ${num2(size * 0.6)} 0 L 0 ${num2(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num2(strokeWidth * 0.5)}"/>`,
+    bar: `<path d="M 0 ${num2(-size * 0.6)} V ${num2(size * 0.6)}" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
+    triangle: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 L ${num2(-size)} ${num2(size * 0.72)} Z" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linejoin="round"/>`,
+    one: `<path d="M 0 ${num2(-size * 0.62)} V ${num2(size * 0.62)} M ${num2(-size * 0.72)} ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
+    zero_one: `<circle cx="${num2(-size * 0.8)}" cy="0" r="${num2(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/><path d="M 0 ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}"/>`,
+    many: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
+    one_many: `<path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0 M ${num2(-size * 1.45)} ${num2(-size * 0.62)} V ${num2(size * 0.62)}" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`,
+    zero_many: `<circle cx="${num2(-size * 1.45)}" cy="0" r="${num2(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num2(strokeWidth)}"/><path d="M ${num2(-size)} ${num2(-size * 0.72)} L 0 0 M ${num2(-size)} 0 L 0 0 M ${num2(-size)} ${num2(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num2(strokeWidth)}" stroke-linecap="round"/>`
   };
   return bodies[type];
 }
@@ -9831,7 +10190,7 @@ function markerExtent(type, size, strokeWidth) {
   return Math.max(size * (isCompoundErMarker ? 2 : 1.4), strokeWidth * 2);
 }
 function markerAttributes(id, extent) {
-  return `id="${id}" markerWidth="${num(extent * 2)}" markerHeight="${num(extent * 2)}" viewBox="${num(-extent)} ${num(-extent)} ${num(extent * 2)} ${num(extent * 2)}" refX="0" refY="0" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible"`;
+  return `id="${id}" markerWidth="${num2(extent * 2)}" markerHeight="${num2(extent * 2)}" viewBox="${num2(-extent)} ${num2(-extent)} ${num2(extent * 2)} ${num2(extent * 2)}" refX="0" refY="0" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible"`;
 }
 var SvgMarkerDefinitions = class {
   constructor(addDefinition, prefix) {
@@ -9866,7 +10225,7 @@ function meshGradientDefinition(id, paint2) {
   const radialDefinitions = paint2.points.map((point, index) => {
     const centerX = Math.max(0, Math.min(100, point.x));
     const centerY = Math.max(0, Math.min(100, point.y));
-    return `<radialGradient id="${radialIds[index]}" gradientUnits="objectBoundingBox" cx="${num(centerX)}%" cy="${num(centerY)}%" r="75%"><stop offset="0%" stop-color="${xml(point.color)}" stop-opacity="1"/><stop offset="100%" stop-color="${xml(point.color)}" stop-opacity="0"/></radialGradient>`;
+    return `<radialGradient id="${radialIds[index]}" gradientUnits="objectBoundingBox" cx="${num2(centerX)}%" cy="${num2(centerY)}%" r="75%"><stop offset="0%" stop-color="${xml(point.color)}" stop-opacity="1"/><stop offset="100%" stop-color="${xml(point.color)}" stop-opacity="0"/></radialGradient>`;
   }).join("");
   const layers = paint2.points.map((_point, index) => `<rect width="1" height="1" fill="url(#${radialIds[index]})"/>`).join("");
   return `${radialDefinitions}<pattern id="${id}" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1"><rect width="1" height="1" fill="${xml(paint2.points[0]?.color ?? "transparent")}"/>${layers}</pattern>`;
@@ -9878,8 +10237,8 @@ function linearGradientDefinition(id, paint2, bounds) {
   const radius = Math.max(bounds.maxX - bounds.minX, bounds.maxY - bounds.minY) / 2;
   const deltaX = Math.cos(angle) * radius;
   const deltaY = Math.sin(angle) * radius;
-  const stops = paint2.stops.map((stop) => `<stop offset="${num(Math.max(0, Math.min(100, stop.offset)))}%" stop-color="${xml(stop.color)}"/>`).join("");
-  return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${num(centerX - deltaX)}" y1="${num(centerY - deltaY)}" x2="${num(centerX + deltaX)}" y2="${num(centerY + deltaY)}">${stops}</linearGradient>`;
+  const stops = paint2.stops.map((stop) => `<stop offset="${num2(Math.max(0, Math.min(100, stop.offset)))}%" stop-color="${xml(stop.color)}"/>`).join("");
+  return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${num2(centerX - deltaX)}" y1="${num2(centerY - deltaY)}" x2="${num2(centerX + deltaX)}" y2="${num2(centerY + deltaY)}">${stops}</linearGradient>`;
 }
 var SvgPaintDefinitions = class {
   constructor(addDefinition, prefix) {
@@ -9996,10 +10355,10 @@ function styleAttrs(node, defs) {
 }
 function addStrokeAttrs(attrs, style) {
   if (style.strokeWidth !== void 0) {
-    attrs.push(`stroke-width="${num(style.strokeWidth)}"`);
+    attrs.push(`stroke-width="${num2(style.strokeWidth)}"`);
   }
   if (style.dash?.length) {
-    attrs.push(`stroke-dasharray="${style.dash.map(num).join(" ")}"`);
+    attrs.push(`stroke-dasharray="${style.dash.map(num2).join(" ")}"`);
   }
   if (style.lineCap) {
     attrs.push(`stroke-linecap="${style.lineCap}"`);
@@ -10008,14 +10367,14 @@ function addStrokeAttrs(attrs, style) {
     attrs.push(`stroke-linejoin="${style.lineJoin}"`);
   }
   if (style.opacity !== void 0) {
-    attrs.push(`opacity="${num(style.opacity)}"`);
+    attrs.push(`opacity="${num2(style.opacity)}"`);
   }
   if (style.pointerEvents) {
     attrs.push(`pointer-events="${style.pointerEvents}"`);
   }
   const css = [];
   if (style.transition && style.transition > 0) {
-    const time = `${num(style.transition)}ms ease`;
+    const time = `${num2(style.transition)}ms ease`;
     css.push(
       `transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}`
     );
@@ -10035,6 +10394,10 @@ function elementSize(node) {
   if (shape.type === "rect" && shape.width !== void 0 && shape.height !== void 0) {
     return Math.min(shape.width, shape.height);
   }
+  if (shape.type === "path" && shape.bounds) {
+    const side = Math.min(shape.bounds.maxX - shape.bounds.minX, shape.bounds.maxY - shape.bounds.minY);
+    return side > 0 ? side : void 0;
+  }
   return void 0;
 }
 function addVisualEffectAttrs(attrs, node, defs) {
@@ -10061,12 +10424,12 @@ function addPathMarkerAttrs(attrs, node, defs) {
   }
 }
 function transform(rotation, center) {
-  return rotation && center ? ` transform="rotate(${num(rotation)} ${num(center.x)} ${num(center.y)})"` : "";
+  return rotation && center ? ` transform="rotate(${num2(rotation)} ${num2(center.x)} ${num2(center.y)})"` : "";
 }
 function imageAttrs(node, defs) {
   const attrs = [];
   if (node.style.opacity !== void 0) {
-    attrs.push(`opacity="${num(node.style.opacity)}"`);
+    attrs.push(`opacity="${num2(node.style.opacity)}"`);
   }
   if (node.style.pointerEvents) {
     attrs.push(`pointer-events="${node.style.pointerEvents}"`);
@@ -10128,12 +10491,12 @@ function chartValueAttrs(detail) {
     `data-sf-series="${xml(detail.series)}"`,
     `data-sf-value-index="${detail.valueIndex}"`,
     detail.mark ? `data-sf-mark="${detail.mark}"` : void 0,
-    detail.radius !== void 0 ? `data-sf-bar-radius="${num(detail.radius)}"` : void 0,
+    detail.radius !== void 0 ? `data-sf-bar-radius="${num2(detail.radius)}"` : void 0,
     detail.colorProp ? `data-sf-color-prop="${xml(detail.colorProp)}"` : void 0,
     detail.hasColorOverride ? 'data-sf-color-override="true"' : void 0,
-    detail.pieStart !== void 0 ? `data-sf-pie-start="${num(detail.pieStart)}"` : void 0,
-    detail.pieEnd !== void 0 ? `data-sf-pie-end="${num(detail.pieEnd)}"` : void 0,
-    detail.pieValue !== void 0 ? `data-sf-pie-value="${num(detail.pieValue)}"` : void 0
+    detail.pieStart !== void 0 ? `data-sf-pie-start="${num2(detail.pieStart)}"` : void 0,
+    detail.pieEnd !== void 0 ? `data-sf-pie-end="${num2(detail.pieEnd)}"` : void 0,
+    detail.pieValue !== void 0 ? `data-sf-pie-value="${num2(detail.pieValue)}"` : void 0
   ];
 }
 function pieGeometryAttrs(detail) {
@@ -10148,39 +10511,39 @@ function chartScaleAttrs(detail) {
 function chartSeriesAttrs(detail) {
   return [
     `data-sf-series="${xml(detail.series)}"`,
-    detail.lineTension !== void 0 ? `data-sf-line-tension="${num(detail.lineTension)}"` : void 0,
+    detail.lineTension !== void 0 ? `data-sf-line-tension="${num2(detail.lineTension)}"` : void 0,
     detail.mark ? `data-sf-mark="${xml(detail.mark)}"` : void 0,
     detail.pulled ? 'data-sf-label-pulled="true"' : void 0,
-    detail.midAngle !== void 0 ? `data-sf-pie-mid-angle="${num(detail.midAngle)}"` : void 0,
-    detail.wedgeRadius !== void 0 ? `data-sf-pie-wedge-radius="${num(detail.wedgeRadius)}"` : void 0
+    detail.midAngle !== void 0 ? `data-sf-pie-mid-angle="${num2(detail.midAngle)}"` : void 0,
+    detail.wedgeRadius !== void 0 ? `data-sf-pie-wedge-radius="${num2(detail.wedgeRadius)}"` : void 0
   ];
 }
 function frameBoundaryAttrs(detail) {
-  return [`${CORNER_RADIUS_ATTR}="${num(detail.cornerRadius)}"`, `${SQUARE_CORNER_ATTR}="${detail.squareCorner}"`];
+  return [`${CORNER_RADIUS_ATTR}="${num2(detail.cornerRadius)}"`, `${SQUARE_CORNER_ATTR}="${detail.squareCorner}"`];
 }
 function declaredBoundsAttr(bounds) {
-  return `${SYMBOL_BOUNDS_ATTR}="${num(bounds.x)},${num(bounds.y)},${num(bounds.width)},${num(bounds.height)}"`;
+  return `${SYMBOL_BOUNDS_ATTR}="${num2(bounds.x)},${num2(bounds.y)},${num2(bounds.width)},${num2(bounds.height)}"`;
 }
 function symbolGeometryAttrs(detail) {
   return [
     `${SYMBOL_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
-    `${SYMBOL_TENSION_ATTR}="${num(detail.tension)}"`,
+    `${SYMBOL_TENSION_ATTR}="${num2(detail.tension)}"`,
     declaredBoundsAttr(detail.declaredBounds)
   ];
 }
 function pathGeometryAttrs(detail) {
   return [
     `${PATH_POINTS_ATTR}="${xml(JSON.stringify(detail.points))}"`,
-    `${PATH_TENSION_ATTR}="${num(detail.tension)}"`,
+    `${PATH_TENSION_ATTR}="${num2(detail.tension)}"`,
     `${PATH_CLOSED_ATTR}="${detail.closed}"`
   ];
 }
 function isometricGeometryAttrs(detail) {
   return [
-    `${ISOMETRIC_SIZE_ATTR}="${num(detail.width)},${num(detail.height)},${num(detail.depth)}"`,
-    `${CORNER_RADIUS_ATTR}="${num(detail.cornerRadius)}"`,
+    `${ISOMETRIC_SIZE_ATTR}="${num2(detail.width)},${num2(detail.height)},${num2(detail.depth)}"`,
+    `${CORNER_RADIUS_ATTR}="${num2(detail.cornerRadius)}"`,
     declaredBoundsAttr(detail.bounds),
-    `${ISOMETRIC_LABEL_OFFSET_ATTR}="${num(detail.labelOffsetX)},${num(detail.labelOffsetY)}"`
+    `${ISOMETRIC_LABEL_OFFSET_ATTR}="${num2(detail.labelOffsetX)},${num2(detail.labelOffsetY)}"`
   ];
 }
 function linkDetailAttrs(detail) {
@@ -10206,8 +10569,8 @@ function contractAttrs(node) {
     node.propSolidOnly ? 'data-sf-prop-solid-only="true"' : void 0,
     node.mark ? `data-sf-mark="${xml(node.mark)}"` : void 0,
     node.zoneGradient ? 'data-sf-zone-gradient="true"' : void 0,
-    node.zoneGradient ? `data-sf-zone-axis-min="${num(node.zoneGradient.min)}"` : void 0,
-    node.zoneGradient ? `data-sf-zone-axis-max="${num(node.zoneGradient.max)}"` : void 0,
+    node.zoneGradient ? `data-sf-zone-axis-min="${num2(node.zoneGradient.min)}"` : void 0,
+    node.zoneGradient ? `data-sf-zone-axis-max="${num2(node.zoneGradient.max)}"` : void 0,
     label ? `tabindex="0" aria-label="${xml(label.replace(/\s+/g, " ").trim())}"` : void 0
   ].filter((attribute) => attribute !== void 0);
   return attributes.length ? ` ${attributes.join(" ")}` : "";
@@ -10216,7 +10579,7 @@ function contractAttrs(node) {
 // src/svg/text.ts
 function richLineTspans(words, x, dy, fontSize) {
   if (!words.length) {
-    return `<tspan x="${num(x)}"${dy} font-size="${fontSize}"></tspan>`;
+    return `<tspan x="${num2(x)}"${dy} font-size="${fontSize}"></tspan>`;
   }
   const groups = [];
   for (const word of words) {
@@ -10231,15 +10594,15 @@ function richLineTspans(words, x, dy, fontSize) {
     }
   }
   return groups.map(
-    (group, i) => `<tspan${i === 0 ? ` x="${num(x)}"${dy}` : ""} font-size="${fontSize}" font-weight="${group.bold ? "bold" : "normal"}">${xml(group.text)}</tspan>`
+    (group, i) => `<tspan${i === 0 ? ` x="${num2(x)}"${dy}` : ""} font-size="${fontSize}" font-weight="${group.bold ? "bold" : "normal"}">${xml(group.text)}</tspan>`
   ).join("");
 }
 function textSvg(node, defs) {
   const position = textPosition(node);
-  const fontSize = `${num(node.fontSize)}px`;
+  const fontSize = `${num2(node.fontSize)}px`;
   const content = textContent(node, position, fontSize);
   const preserve = node.richLines ? ' xml:space="preserve"' : "";
-  return `<text id="${defs.elementId(node.id)}"${contractAttrs(node)} x="${num(position.x)}" y="${num(position.firstY)}" font-family="${xml(node.fontFamily)}" font-size="${fontSize}" font-weight="${node.fontWeight}"${node.letterSpacing ? ` letter-spacing="${num(node.letterSpacing)}"` : ""} fill="${xml(node.color)}" text-anchor="${position.anchor}" data-sf-valign="${node.verticalAlign}" data-sf-line-height="${num(node.lineHeight)}"${preserve}${transform(node.rotation, node.rotationCenter)}>${content}</text>`;
+  return `<text id="${defs.elementId(node.id)}"${contractAttrs(node)} x="${num2(position.x)}" y="${num2(position.firstY)}" font-family="${xml(node.fontFamily)}" font-size="${fontSize}" font-weight="${node.fontWeight}"${node.letterSpacing ? ` letter-spacing="${num2(node.letterSpacing)}"` : ""} fill="${xml(node.color)}" text-anchor="${position.anchor}" data-sf-valign="${node.verticalAlign}" data-sf-line-height="${num2(node.lineHeight)}"${preserve}${transform(node.rotation, node.rotationCenter)}>${content}</text>`;
 }
 function textPosition(node) {
   const linePx = node.fontSize * node.lineHeight;
@@ -10265,10 +10628,10 @@ function textContent(node, position, fontSize) {
   return node.lines.map((line, index) => lineTspan(line, index, position, fontSize)).join("");
 }
 function lineTspan(line, index, position, fontSize) {
-  return `<tspan x="${num(position.x)}" font-size="${fontSize}"${lineOffset(index, position.linePx)}>${xml(line)}</tspan>`;
+  return `<tspan x="${num2(position.x)}" font-size="${fontSize}"${lineOffset(index, position.linePx)}>${xml(line)}</tspan>`;
 }
 function lineOffset(index, linePx) {
-  return index ? ` dy="${num(linePx)}px"` : "";
+  return index ? ` dy="${num2(linePx)}px"` : "";
 }
 
 // src/svg/nodes.ts
@@ -10277,7 +10640,7 @@ function shaderSurfaceSvg(node, defs) {
   const parameters = xml(JSON.stringify(node.shader.parameters));
   const surfacePadding = node.shader.surfacePadding ?? 0;
   const fillColor = node.fillColor ? ` data-sf-shader-fill="${xml(node.fillColor)}"` : "";
-  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}" data-sf-shader-padding="${num(surfacePadding)}"${fillColor} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
+  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}" data-sf-shader-padding="${num2(surfacePadding)}"${fillColor} x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
 }
 function rollingDigitSvg(character, node) {
   const style = node.componentStyle;
@@ -10292,7 +10655,7 @@ function rollingNumberSvg(node, defs) {
   const label = node.label ? `<span xmlns="http://www.w3.org/1999/xhtml" style="margin-bottom:.14em;color:${xml(node.componentStyle.labelColor)};font-size:.16em;font-weight:600;letter-spacing:.24em;line-height:1">${xml(node.label)}</span>` : "";
   const digits = [...node.value].map((character) => rollingDigitSvg(character, node)).join("");
   const componentStyle = xml(JSON.stringify(node.componentStyle));
-  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${num(node.duration)}" data-sf-widget-style="${componentStyle}" x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation}><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:${xml(node.componentStyle.fontFamily)};font-size:${num(fontSize)}px">${label}<div data-sf-rolling-digits="true" aria-label="${xml(node.value)}" style="display:flex;gap:${node.componentStyle.variant === "plain" ? ".02em" : ".1em"};font-size:1em">${digits}</div></div></foreignObject>`;
+  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${num2(node.duration)}" data-sf-widget-style="${componentStyle}" x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${rotation}><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:${xml(node.componentStyle.fontFamily)};font-size:${num2(fontSize)}px">${label}<div data-sf-rolling-digits="true" aria-label="${xml(node.value)}" style="display:flex;gap:${node.componentStyle.variant === "plain" ? ".02em" : ".1em"};font-size:1em">${digits}</div></div></foreignObject>`;
 }
 function nodeSvg(node, defs) {
   if (node.type === "text") {
@@ -10305,14 +10668,14 @@ function nodeSvg(node, defs) {
     return rollingNumberSvg(node, defs);
   }
   if (node.type === "image") {
-    return `<image id="${defs.elementId(node.id)}"${contractAttrs(node)} ${imageAttrs(node, defs)} href="${xml(node.href)}" x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}" preserveAspectRatio="xMidYMid slice"/>`;
+    return `<image id="${defs.elementId(node.id)}"${contractAttrs(node)} ${imageAttrs(node, defs)} href="${xml(node.href)}" x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}" preserveAspectRatio="${node.aspect === "none" ? "none" : `xMidYMid ${node.aspect ?? "slice"}`}"${transform(node.rotation, node.rotationCenter)}/>`;
   }
   const attrs = `id="${defs.elementId(node.id)}"${contractAttrs(node)} ${styleAttrs(node, defs)}`;
   if (node.type === "rect") {
-    return `<rect ${attrs} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${node.rx ? ` rx="${num(node.rx)}"` : ""}${transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 })}/>`;
+    return `<rect ${attrs} x="${num2(node.x)}" y="${num2(node.y)}" width="${num2(node.width)}" height="${num2(node.height)}"${node.rx ? ` rx="${num2(node.rx)}"` : ""}${transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 })}/>`;
   }
   if (node.type === "ellipse") {
-    return `<ellipse ${attrs} cx="${num(node.cx)}" cy="${num(node.cy)}" rx="${num(node.rx)}" ry="${num(node.ry)}"${transform(node.rotation, { x: node.cx, y: node.cy })}/>`;
+    return `<ellipse ${attrs} cx="${num2(node.cx)}" cy="${num2(node.cy)}" rx="${num2(node.rx)}" ry="${num2(node.ry)}"${transform(node.rotation, { x: node.cx, y: node.cy })}/>`;
   }
   return `<path ${attrs} d="${xml(node.d)}"${transform(node.rotation, node.rotationCenter)}/>`;
 }
@@ -10322,12 +10685,12 @@ function renderSvgDocument(scene, options = {}) {
   const padding = options.padding ?? 16;
   const width = Math.max(1, scene.bounds.maxX - scene.bounds.minX + padding * 2);
   const height = Math.max(1, scene.bounds.maxY - scene.bounds.minY + padding * 2);
-  const viewBox = `${num(scene.bounds.minX - padding)} ${num(scene.bounds.minY - padding)} ${num(width)} ${num(height)}`;
+  const viewBox = `${num2(scene.bounds.minX - padding)} ${num2(scene.bounds.minY - padding)} ${num2(width)} ${num2(height)}`;
   const defs = new SvgDefinitionRegistry(options.idPrefix ? `${options.idPrefix}-` : "");
   const nodes = options.linkHitAreas ? withLinkHitAreas(scene.nodes) : scene.nodes;
   const body = nodes.map((node) => nodeSvg(node, defs)).join("\n  ");
   const declaration = options.includeXmlDeclaration === false ? "" : '<?xml version="1.0" encoding="UTF-8"?>\n';
-  const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${num(width)}px" height="${num(height)}px" viewBox="${viewBox}" role="img" data-sf-contract="${DOM_CONTRACT_VERSION}">
+  const svg = `${declaration}<svg xmlns="http://www.w3.org/2000/svg" width="${num2(width)}px" height="${num2(height)}px" viewBox="${viewBox}" role="img" data-sf-contract="${DOM_CONTRACT_VERSION}">
   <defs>${defs.entries.join("")}</defs>
   ${body}
 </svg>`;
@@ -10393,5 +10756,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
-//# sourceMappingURL=chunk-SDOHUNBW.js.map
-//# sourceMappingURL=chunk-SDOHUNBW.js.map
+//# sourceMappingURL=chunk-TQIYK5OA.js.map
+//# sourceMappingURL=chunk-TQIYK5OA.js.map