stickyflow 0.9.3 → 0.11.0

package/dist/{chunk-G2N3KJYJ.js → chunk-Q6QLU6YQ.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, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, labelTilt, tiltedLabelRoom, 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, 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, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-Q6FBISNP.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) {
@@ -1625,21 +1905,26 @@ function readout(component, fraction) {
   }
   return display === "value" ? Number(component.value).toFixed(decimals(numberProperty2(component, "step"))) : "";
 }
-function buildKnob(component, index) {
-  const box = controlBox(component, index, { width: 96, height: 96 });
+function dialOf(component, box) {
   const min = numberProperty2(component, "min");
   const max = numberProperty2(component, "max");
-  const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
-  const start = numberProperty2(component, "start");
-  const sweep = Math.min(360, Math.max(1, numberProperty2(component, "sweep")));
   const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 3);
-  const cx = box.x + box.width / 2;
-  const cy = box.y + box.height / 2;
   const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
-  const circumference = 2 * Math.PI * radius;
-  const round2 = textProperty(component, "rounded") !== "false";
-  const angle = (start - fraction * sweep) * Math.PI / 180;
-  const arc = (part, order, color, length, extra = {}) => ({
+  return {
+    cx: box.x + box.width / 2,
+    cy: box.y + box.height / 2,
+    radius,
+    thickness,
+    fraction: Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1))),
+    start: numberProperty2(component, "start"),
+    sweep: Math.min(360, Math.max(1, numberProperty2(component, "sweep"))),
+    circumference: 2 * Math.PI * radius,
+    rounded: textProperty(component, "rounded") !== "false"
+  };
+}
+function arcNode(component, box, dial, part, order, color, length, extra = {}) {
+  const { cx, cy, radius, thickness } = dial;
+  return {
     id: `widget-${component.id}-${part}`,
     type: "ellipse",
     order: box.order + order,
@@ -1648,59 +1933,62 @@ function buildKnob(component, index) {
     cy,
     rx: radius,
     ry: radius,
-    rotation: -start,
+    rotation: -dial.start,
     style: fade(component, {
       fill: { kind: "none" },
       stroke: solid(color),
       strokeWidth: thickness,
-      dash: [Math.max(1e-3, length), circumference],
-      lineCap: round2 ? "round" : "butt",
+      dash: [Math.max(1e-3, length), dial.circumference],
+      lineCap: dial.rounded ? "round" : "butt",
       ...extra
     })
-  });
+  };
+}
+function discNode(component, box, part, order, center, radius, fill2) {
+  return {
+    id: `widget-${component.id}-${part}`,
+    type: "ellipse",
+    order: box.order + order,
+    bounds: rotatedBounds({ x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2 }, 0, 0),
+    cx: center.x,
+    cy: center.y,
+    rx: radius,
+    ry: radius,
+    style: fade(component, { fill: solid(fill2), stroke: { kind: "none" } })
+  };
+}
+function buildKnob(component, index) {
+  const box = controlBox(component, index, { width: 96, height: 96 });
+  const dial = dialOf(component, box);
+  const { cx, cy, radius, thickness, fraction, sweep, circumference } = dial;
+  const angle = (dial.start - fraction * sweep) * Math.PI / 180;
   const faceRadius = Math.max(1, radius - thickness / 2 - Math.max(2, thickness * 0.4));
   const dotRadius = thickness / 2 * DOT_RATIO + 1;
   const nodes = [
     hitArea(component, box),
-    arc("track", 0.1, textProperty(component, "track"), sweep / 360 * circumference),
-    arc("fill", 0.2, textProperty(component, "accent"), fraction * sweep / 360 * circumference, {
-      opacity: fraction > 0 ? 1 : 0
-    }),
-    {
-      id: `widget-${component.id}-face`,
-      type: "ellipse",
-      order: box.order + 0.3,
-      bounds: rotatedBounds(
-        { x: cx - faceRadius, y: cy - faceRadius, width: faceRadius * 2, height: faceRadius * 2 },
-        0,
-        0
-      ),
-      cx,
-      cy,
-      rx: faceRadius,
-      ry: faceRadius,
-      style: fade(component, { fill: solid(textProperty(component, "face")), stroke: { kind: "none" } })
-    },
-    {
-      id: `widget-${component.id}-dot`,
-      type: "ellipse",
-      order: box.order + 0.4,
-      bounds: rotatedBounds(
-        {
-          x: cx + radius * Math.cos(angle) - dotRadius,
-          y: cy - radius * Math.sin(angle) - dotRadius,
-          width: dotRadius * 2,
-          height: dotRadius * 2
-        },
-        0,
-        0
-      ),
-      cx: cx + radius * Math.cos(angle),
-      cy: cy - radius * Math.sin(angle),
-      rx: dotRadius,
-      ry: dotRadius,
-      style: fade(component, { fill: solid(textProperty(component, "dot")), stroke: { kind: "none" } })
-    }
+    arcNode(component, box, dial, "track", 0.1, textProperty(component, "track"), sweep / 360 * circumference),
+    arcNode(
+      component,
+      box,
+      dial,
+      "fill",
+      0.2,
+      textProperty(component, "accent"),
+      fraction * sweep / 360 * circumference,
+      {
+        opacity: fraction > 0 ? 1 : 0
+      }
+    ),
+    discNode(component, box, "face", 0.3, { x: cx, y: cy }, faceRadius, textProperty(component, "face")),
+    discNode(
+      component,
+      box,
+      "dot",
+      0.4,
+      { x: cx + radius * Math.cos(angle), y: cy - radius * Math.sin(angle) },
+      dotRadius,
+      textProperty(component, "dot")
+    )
   ];
   const text = readout(component, fraction);
   if (text) {
@@ -1731,62 +2019,68 @@ function readout2(component, fraction) {
   }
   return display === "value" ? String(Number(component.value)) : "";
 }
+function buildRing(component, box, fraction, round2) {
+  const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 2);
+  const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
+  const circumference = 2 * Math.PI * radius;
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const ring = (part, order, color, extra) => ({
+    id: `widget-${component.id}-${part}`,
+    type: "ellipse",
+    order: box.order + order,
+    bounds: rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
+    cx,
+    cy,
+    rx: radius,
+    ry: radius,
+    rotation: -90,
+    style: fade(component, { fill: { kind: "none" }, stroke: solid(color), strokeWidth: thickness, ...extra })
+  });
+  return [
+    ring("track", 0.1, textProperty(component, "track"), {}),
+    ring("fill", 0.2, textProperty(component, "accent"), {
+      dash: [Math.max(1e-3, fraction * circumference), circumference],
+      lineCap: round2 ? "round" : "butt",
+      opacity: fraction > 0 ? 1 : 0
+    })
+  ];
+}
+function buildBar(component, box, fraction, round2) {
+  const vertical = textProperty(component, "direction") === "vertical";
+  const radius = round2 ? (vertical ? box.width : box.height) / 2 : 0;
+  const bar = (part, order, length, color, opacity) => {
+    const shape = vertical ? { x: box.x, y: box.y + box.height - length, width: box.width, height: length } : { x: box.x, y: box.y, width: length, height: box.height };
+    return {
+      id: `widget-${component.id}-${part}`,
+      type: "rect",
+      order: box.order + order,
+      bounds: rotatedBounds(shape, 0, 0),
+      ...shape,
+      rx: radius,
+      style: fade(component, {
+        fill: solid(color),
+        stroke: { kind: "none" },
+        ...opacity === void 0 ? {} : { opacity }
+      })
+    };
+  };
+  const full = vertical ? box.height : box.width;
+  return [
+    bar("track", 0.1, full, textProperty(component, "track")),
+    bar("fill", 0.2, Math.max(0, fraction * full), textProperty(component, "accent"), fraction > 0 ? 1 : 0)
+  ];
+}
 function buildProgress(component, index) {
   const box = controlBox(component, index, { width: 220, height: 12 });
   const min = numberProperty2(component, "min");
   const max = numberProperty2(component, "max");
   const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
   const round2 = textProperty(component, "rounded") !== "false";
-  const nodes = [hitArea(component, box)];
-  if (textProperty(component, "variant") === "ring") {
-    const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 2);
-    const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
-    const circumference = 2 * Math.PI * radius;
-    const cx = box.x + box.width / 2;
-    const cy = box.y + box.height / 2;
-    const ring = (part, order, color, extra) => ({
-      id: `widget-${component.id}-${part}`,
-      type: "ellipse",
-      order: box.order + order,
-      bounds: rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
-      cx,
-      cy,
-      rx: radius,
-      ry: radius,
-      rotation: -90,
-      style: fade(component, { fill: { kind: "none" }, stroke: solid(color), strokeWidth: thickness, ...extra })
-    });
-    nodes.push(ring("track", 0.1, textProperty(component, "track"), {}));
-    nodes.push(
-      ring("fill", 0.2, textProperty(component, "accent"), {
-        dash: [Math.max(1e-3, fraction * circumference), circumference],
-        lineCap: round2 ? "round" : "butt",
-        opacity: fraction > 0 ? 1 : 0
-      })
-    );
-  } else {
-    const vertical = textProperty(component, "direction") === "vertical";
-    const radius = round2 ? (vertical ? box.width : box.height) / 2 : 0;
-    const bar = (part, order, length, color, opacity) => {
-      const shape = vertical ? { x: box.x, y: box.y + box.height - length, width: box.width, height: length } : { x: box.x, y: box.y, width: length, height: box.height };
-      return {
-        id: `widget-${component.id}-${part}`,
-        type: "rect",
-        order: box.order + order,
-        bounds: rotatedBounds(shape, 0, 0),
-        ...shape,
-        rx: radius,
-        style: fade(component, {
-          fill: solid(color),
-          stroke: { kind: "none" },
-          ...opacity === void 0 ? {} : { opacity }
-        })
-      };
-    };
-    const full = vertical ? box.height : box.width;
-    nodes.push(bar("track", 0.1, full, textProperty(component, "track")));
-    nodes.push(bar("fill", 0.2, Math.max(0, fraction * full), textProperty(component, "accent"), fraction > 0 ? 1 : 0));
-  }
+  const nodes = [
+    hitArea(component, box),
+    ...textProperty(component, "variant") === "ring" ? buildRing(component, box, fraction, round2) : buildBar(component, box, fraction, round2)
+  ];
   const text = readout2(component, fraction);
   if (text) {
     const label = {
@@ -1905,12 +2199,15 @@ function ticks(component, box, vertical, reach, offset) {
     return rect(component, box, `tick-${index}`, 0.15, shape, color);
   });
 }
+function alongOf(box, reach, vertical) {
+  return (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
+}
 function buildLine(component, box, thumbs, vertical) {
   const reach = sliderReach("line", vertical ? box.width : box.height);
   const radius = reach * numberProperty2(component, "thumbSize") / 100;
   const thickness = Math.min(numberProperty2(component, "trackHeight"), vertical ? box.width : box.height);
   const mid = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
-  const along2 = (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
+  const along2 = alongOf(box, reach, vertical);
   const line = (start, end) => vertical ? {
     x: mid - thickness / 2,
     y: Math.min(start, end),
@@ -1959,69 +2256,57 @@ function buildLine(component, box, thumbs, vertical) {
     thumb(thumbs.two ? "thumb-end" : "thumb", thumbs.to, 0.31)
   ];
 }
-function buildField(component, box, thumbs, vertical) {
-  const reach = sliderReach("field", vertical ? box.width : box.height);
-  const radius = Math.min(numberProperty2(component, "radius"), Math.min(box.width, box.height) / 2);
-  const whole = { x: box.x, y: box.y, width: box.width, height: box.height, rx: radius };
-  const along2 = (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
-  const start = thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x;
-  const end = along2(thumbs.to);
+function fieldFill(whole, box, thumbs, vertical, start, end) {
   const first = Math.min(start, end) - (thumbs.two ? HANDLE_WIDTH / 2 : 0);
   const last = Math.max(start, end) + HANDLE_WIDTH / 2;
-  const filled = vertical ? {
+  return vertical ? {
     ...whole,
     y: thumbs.two ? first : end - HANDLE_WIDTH / 2,
     height: thumbs.two ? last - first : Math.max(0, box.y + box.height - end + HANDLE_WIDTH / 2),
-    rx: thumbs.two ? 0 : radius
+    rx: thumbs.two ? 0 : whole.rx
   } : {
     ...whole,
     x: thumbs.two ? first : box.x,
     width: thumbs.two ? last - first : Math.max(0, end + HANDLE_WIDTH / 2 - box.x),
-    rx: thumbs.two ? 0 : radius
+    rx: thumbs.two ? 0 : whole.rx
   };
+}
+function fieldHandle(component, box, vertical, part, at) {
   const handleLength = (vertical ? box.width : box.height) * 0.5;
-  const handle = (part, at) => {
-    const shape = vertical ? {
-      x: box.x + (box.width - handleLength) / 2,
-      y: at - HANDLE_WIDTH / 2,
-      width: handleLength,
-      height: HANDLE_WIDTH,
-      rx: HANDLE_WIDTH / 2
-    } : {
-      x: at - HANDLE_WIDTH / 2,
-      y: box.y + (box.height - handleLength) / 2,
-      width: HANDLE_WIDTH,
-      height: handleLength,
-      rx: HANDLE_WIDTH / 2
-    };
-    return rect(component, box, part, 0.3, shape, textProperty(component, "accent"));
+  const shape = vertical ? {
+    x: box.x + (box.width - handleLength) / 2,
+    y: at - HANDLE_WIDTH / 2,
+    width: handleLength,
+    height: HANDLE_WIDTH,
+    rx: HANDLE_WIDTH / 2
+  } : {
+    x: at - HANDLE_WIDTH / 2,
+    y: box.y + (box.height - handleLength) / 2,
+    width: HANDLE_WIDTH,
+    height: handleLength,
+    rx: HANDLE_WIDTH / 2
   };
-  const nodes = [
-    rect(component, box, "track", 0.1, whole, textProperty(component, "surface")),
-    rect(component, box, "fill", 0.2, filled, textProperty(component, "fill")),
-    ...thumbs.two ? [handle("handle-start", start)] : [],
-    handle(thumbs.two ? "handle-end" : "handle", end)
-  ];
+  return rect(component, box, part, 0.3, shape, textProperty(component, "accent"));
+}
+function fieldTexts(component, box, thumbs, vertical) {
   const text = {
     color: ink(component, textProperty(component, "textColor")),
     fontSize: numberProperty2(component, "fontSize")
   };
   const value = readout3(component, thumbs);
   if (vertical) {
-    if (value) {
-      nodes.push(
-        labelText(
-          component,
-          "value",
-          { x: box.x, y: box.y + 6, width: box.width, height: 20 },
-          { ...text, text: value, align: "center" },
-          box.order + 0.4
-        )
-      );
-    }
-    return nodes;
+    return value ? [
+      labelText(
+        component,
+        "value",
+        { x: box.x, y: box.y + 6, width: box.width, height: 20 },
+        { ...text, text: value, align: "center" },
+        box.order + 0.4
+      )
+    ] : [];
   }
   const inner = { y: box.y, height: box.height, width: Math.max(0, box.width / 2 - TEXT_PADDING) };
+  const nodes = [];
   if (component.label) {
     nodes.push(
       labelText(
@@ -2044,9 +2329,31 @@ function buildField(component, box, thumbs, vertical) {
       )
     );
   }
-  nodes.push(...ticks(component, box, false, reach, box.height - TICK_LENGTH - 5));
   return nodes;
 }
+function buildField(component, box, thumbs, vertical) {
+  const reach = sliderReach("field", vertical ? box.width : box.height);
+  const radius = Math.min(numberProperty2(component, "radius"), Math.min(box.width, box.height) / 2);
+  const whole = { x: box.x, y: box.y, width: box.width, height: box.height, rx: radius };
+  const along2 = alongOf(box, reach, vertical);
+  const start = thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x;
+  const end = along2(thumbs.to);
+  return [
+    rect(component, box, "track", 0.1, whole, textProperty(component, "surface")),
+    rect(
+      component,
+      box,
+      "fill",
+      0.2,
+      fieldFill(whole, box, thumbs, vertical, start, end),
+      textProperty(component, "fill")
+    ),
+    ...thumbs.two ? [fieldHandle(component, box, vertical, "handle-start", start)] : [],
+    fieldHandle(component, box, vertical, thumbs.two ? "handle-end" : "handle", end),
+    ...fieldTexts(component, box, thumbs, vertical),
+    ...vertical ? [] : ticks(component, box, false, reach, box.height - TICK_LENGTH - 5)
+  ];
+}
 function buildSlider(component, index) {
   const field = textProperty(component, "variant") === "field";
   const vertical = textProperty(component, "direction") === "vertical";
@@ -2163,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) {
@@ -3568,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",
@@ -3874,6 +4244,15 @@ 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);
+  }
   const text = renderShapeText(context, strokeWidth, measureText);
   if (text) {
     nodes.push(text);
@@ -4146,27 +4525,46 @@ function tiltedBottomRoom(chart) {
   const labels = chart.chartType === "bar" && !isHorizontalBar(chart) ? chart.config?.categories ?? [] : chart.chartType === "boxplot" && !isHorizontalBoxplot(chart) ? chart.series.map((series) => series.label || series.id) : [];
   return labels.length > 0 ? Math.max(0, tiltedLabelRoom(chart, labels, tilt) - 18) : 0;
 }
-function decorations(chart) {
-  const showLabels = chart.showAxisLabels !== false;
+function legendPlaceOf(chart) {
   const showLegend = chart.showLegend !== false;
-  const legendPosition = chart.legendPosition ?? "top";
-  const legendAtTop = legendPosition === "top";
-  const hasLegendItems = showLegend && chart.series.length > 0;
-  const legendStacked = hasLegendItems && isStackedLegendPosition(legendPosition);
-  const sideColumnWidth = legendStacked ? stackedLegendColumnWidth(chart) + LEGEND_COLUMN_GAP : 0;
-  const treemapSide = treemapSideLegendSide(chart, showLegend);
-  const tickX = xLabelOffset(chart);
-  const tickY = yLabelOffset(chart);
-  const padLeft = tickY + (showLabels ? leftLabelWidth(chart) : 12) + (legendPosition === "bottomLeft" ? sideColumnWidth : 0) + (treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
-  const padRight = 24 + (legendPosition === "bottomRight" ? sideColumnWidth : 0) + (treemapSide === "right" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
+  const position = chart.legendPosition ?? "top";
+  const hasItems = showLegend && chart.series.length > 0;
+  const stacked = hasItems && isStackedLegendPosition(position);
+  return {
+    showLegend,
+    position,
+    atTop: position === "top",
+    hasItems,
+    stacked,
+    sideColumnWidth: stacked ? stackedLegendColumnWidth(chart) + LEGEND_COLUMN_GAP : 0,
+    treemapSide: treemapSideLegendSide(chart, showLegend)
+  };
+}
+function padLeftOf(chart, showLabels, legend) {
+  return yLabelOffset(chart) + (showLabels ? leftLabelWidth(chart) : 12) + (legend.position === "bottomLeft" ? legend.sideColumnWidth : 0) + (legend.treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
+}
+function padRightOf(legend) {
+  return 24 + (legend.position === "bottomRight" ? legend.sideColumnWidth : 0) + (legend.treemapSide === "right" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
+}
+function padBottomOf(chart, showLabels, legend) {
   const valueRow = chart.chartType === "bar" && chart.config?.showBarLabels === true && chart.config.barLabelPosition === "axis";
   const horizontalValueAxis = isHorizontalBar(chart) && chart.showValueAxis !== false;
-  const basePadBottom = showLabels ? isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
-  const hasColorBar = chart.chartType === "field" && showLegend && Boolean(chart.config?.scale?.stops.length);
-  const legendAtBottomRow = hasLegendItems && !legendAtTop && !legendStacked;
-  const padBottom = tickX + basePadBottom + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendAtBottomRow ? 16 + LEGEND_ROW_HEIGHT : 0);
+  const base = showLabels ? isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
+  const hasColorBar = chart.chartType === "field" && legend.showLegend && Boolean(chart.config?.scale?.stops.length);
+  const legendInRow = legend.hasItems && !legend.atTop && !legend.stacked;
+  return xLabelOffset(chart) + base + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendInRow ? 16 + LEGEND_ROW_HEIGHT : 0);
+}
+function padTopOf(chart, legend) {
   const titleHeight = chart.title ? Math.max(44, 20 + finite(chart.titleSize, 14) * 1.6) : 0;
-  const padTop = titleHeight || (legendAtTop && hasLegendItems ? 44 : 24);
+  return titleHeight || (legend.atTop && legend.hasItems ? 44 : 24);
+}
+function decorations(chart) {
+  const showLabels = chart.showAxisLabels !== false;
+  const legend = legendPlaceOf(chart);
+  const padLeft = padLeftOf(chart, showLabels, legend);
+  const padRight = padRightOf(legend);
+  const padBottom = padBottomOf(chart, showLabels, legend);
+  const padTop = padTopOf(chart, legend);
   return {
     bounds: boxBounds(
       { x: chart.x, y: chart.y, width: chart.width, height: chart.height },
@@ -4179,7 +4577,7 @@ function decorations(chart) {
       height: Math.max(1, chart.height - padTop - padBottom)
     },
     showLabels,
-    showLegend,
+    showLegend: legend.showLegend,
     padLeft
   };
 }
@@ -8084,25 +8482,23 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
   );
   return { point, color, outside, mid, tickStart };
 }
-function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
-  const placement = labelPlacement2(context, geometry, angles, series, fillColor);
-  if (!placement) {
-    return [];
-  }
-  const { chart, bounds, nextOrder } = context;
-  const { point, color, outside, mid, tickStart } = placement;
-  const { nameSize, valueSize } = labelSizes(chart);
-  const lineHeight = Math.max(nameSize, valueSize) * 1.2;
+function labelTick(context, series, placement, lineHeight) {
+  const { point, color, outside, tickStart } = placement;
   const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
-  const tick = {
+  return {
     type: "path",
-    id: `chart-polar-area-label-tick-${chart.id}-${series.id}`,
-    order: nextOrder(),
-    bounds,
+    id: `chart-polar-area-label-tick-${context.chart.id}-${series.id}`,
+    order: context.nextOrder(),
+    bounds: context.bounds,
     d: `M ${tickStart.x} ${tickStart.y} L ${tickEnd.x} ${tickEnd.y}`,
     detail: { of: "chartSeries", series: series.id, mark: "polar-area-label-tick" },
     style: outside ? { stroke: { kind: "solid", color }, strokeWidth: 1.5 } : { stroke: { kind: "none" } }
   };
+}
+function labelTexts(context, geometry, series, value, placement) {
+  const { chart, bounds, nextOrder } = context;
+  const { point, color, outside, mid } = placement;
+  const { nameSize, valueSize } = labelSizes(chart);
   const detail = {
     of: "chartSeries",
     series: series.id,
@@ -8154,7 +8550,16 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     prop: seriesValueProp(series.id, 0),
     propKind: "value"
   };
-  return [tick, nameText, valueText];
+  return [nameText, valueText];
+}
+function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
+  const placement = labelPlacement2(context, geometry, angles, series, fillColor);
+  if (!placement) {
+    return [];
+  }
+  const { nameSize, valueSize } = labelSizes(context.chart);
+  const tick = labelTick(context, series, placement, Math.max(nameSize, valueSize) * 1.2);
+  return [tick, ...labelTexts(context, geometry, series, value, placement)];
 }
 function addOffset(point, dx, dy) {
   return { x: point.x + dx, y: point.y + dy };
@@ -9660,7 +10065,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
@@ -9682,7 +10087,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;
@@ -9724,18 +10129,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) {
@@ -9743,9 +10148,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"/>'
@@ -9755,19 +10160,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];
 }
@@ -9778,7 +10183,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) {
@@ -9813,7 +10218,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>`;
@@ -9825,8 +10230,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) {
@@ -9943,10 +10348,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}"`);
@@ -9955,14 +10360,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}`
     );
@@ -9982,6 +10387,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) {
@@ -10008,12 +10417,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}"`);
@@ -10075,12 +10484,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) {
@@ -10095,39 +10504,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) {
@@ -10153,8 +10562,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(" ")}` : "";
@@ -10163,7 +10572,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) {
@@ -10178,15 +10587,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;
@@ -10212,10 +10621,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
@@ -10224,7 +10633,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;
@@ -10239,7 +10648,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") {
@@ -10252,14 +10661,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)}/>`;
 }
@@ -10269,12 +10678,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>`;
@@ -10340,5 +10749,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
-//# sourceMappingURL=chunk-G2N3KJYJ.js.map
-//# sourceMappingURL=chunk-G2N3KJYJ.js.map
+//# sourceMappingURL=chunk-Q6QLU6YQ.js.map
+//# sourceMappingURL=chunk-Q6QLU6YQ.js.map