stickyflow 0.6.0 → 0.7.0

package/dist/{chunk-FVHVOJS2.js → chunk-SDMQRSRW.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, 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, 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, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-4G2R7PEL.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, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, 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, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, 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, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-JQK4IGXJ.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -1332,7 +1332,7 @@ function buildTickScale(component, index) {
 }
 function buildTickLabels(component, box) {
   const labels = component.labels ?? {};
-  const ticks = Math.max(1, finite(Number(component.parameters.ticks), 48));
+  const ticks2 = Math.max(1, finite(Number(component.parameters.ticks), 48));
   const major = Math.max(1, finite(Number(component.parameters.major), 5));
   const start = finite(Number(component.parameters.start), 225) * Math.PI / 180;
   const sweep = finite(Number(component.parameters.sweep), 270) * Math.PI / 180;
@@ -1340,10 +1340,10 @@ function buildTickLabels(component, box) {
   const fontSize = finite(labels.size, 12);
   const centerX = box.x + box.width / 2;
   const centerY = box.y + box.height / 2;
-  const count = Math.floor(ticks / major);
+  const count = Math.floor(ticks2 / major);
   const nodes = [];
   for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
+    const fraction = step * major / ticks2;
     const angle = start - fraction * sweep;
     const labelX2 = centerX + Math.cos(angle) * radius * (box.width / 2);
     const labelY = centerY - Math.sin(angle) * radius * (box.height / 2);
@@ -1398,7 +1398,7 @@ function buildRuler(component, index) {
 function buildRulerLabels(component, box) {
   const labels = component.labels ?? {};
   const horizontal = component.parameters.axis === "horizontal";
-  const ticks = Math.max(1, finite(Number(component.parameters.ticks), 50));
+  const ticks2 = Math.max(1, finite(Number(component.parameters.ticks), 50));
   const major = Math.max(1, finite(Number(component.parameters.major), 5));
   const inset = finite(Number(component.parameters.inset), 0.05) > 0 ? finite(Number(component.parameters.inset), 0.05) : 0.05;
   const line = finite(Number(component.parameters.line), 0.7) > 0 ? finite(Number(component.parameters.line), 0.7) : 0.7;
@@ -1406,10 +1406,10 @@ function buildRulerLabels(component, box) {
   const tickLength = (finite(Number(component.parameters.length), 0.1) > 0 ? finite(Number(component.parameters.length), 0.1) : 0.1) * across * 1.9;
   const edge = line * across - 0.12 * across - tickLength - finite(labels.offset, 0.04) * across;
   const fontSize = finite(labels.size, 12);
-  const count = Math.floor(ticks / major);
+  const count = Math.floor(ticks2 / major);
   const nodes = [];
   for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
+    const fraction = step * major / ticks2;
     const along2 = inset + (1 - 2 * inset) * fraction;
     const labelBox = horizontal ? { x: box.x + box.width * along2 - 24, y: box.y + edge - fontSize * 2, width: 48, height: fontSize * 2 } : { x: box.x + edge - 48, y: box.y + box.height * (1 - along2) - fontSize, width: 48, height: fontSize * 2 };
     nodes.push({
@@ -1447,7 +1447,9 @@ var numberProperty2 = (component, key) => Number(component.properties[key] ?? 0)
 var solid = (color) => ({ kind: "solid", color });
 var ink = (component, color) => component.disabled ? DISABLED_INK : color;
 function fade(component, style) {
-  return component.disabled ? { ...style, opacity: 0.4 } : style;
+  const animate = Number(component.properties.animate ?? 0);
+  const shown = component.disabled ? { ...style, opacity: 0.4 } : style;
+  return animate > 0 ? { ...shown, transition: animate } : shown;
 }
 function hitArea(component, box) {
   return {
@@ -1580,6 +1582,463 @@ function buildCheckbox(component, index) {
   ];
 }
 
+// src/renderScene/artifacts/component/knob.ts
+var DOT_RATIO = 0.62;
+function decimals(step) {
+  return step > 0 ? String(step).split(".")[1]?.length ?? 0 : 0;
+}
+function readout(component, fraction) {
+  const display = textProperty(component, "display");
+  if (display === "percent") {
+    return `${Math.round(fraction * 100)}%`;
+  }
+  return display === "value" ? Number(component.value).toFixed(decimals(numberProperty2(component, "step"))) : "";
+}
+function buildKnob(component, index) {
+  const box = controlBox(component, index, { width: 96, height: 96 });
+  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 = {}) => ({
+    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: -start,
+    style: fade(component, {
+      fill: { kind: "none" },
+      stroke: solid(color),
+      strokeWidth: thickness,
+      dash: [Math.max(1e-3, length), circumference],
+      lineCap: round2 ? "round" : "butt",
+      ...extra
+    })
+  });
+  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" } })
+    }
+  ];
+  const text = readout(component, fraction);
+  if (text) {
+    const label = {
+      text,
+      color: ink(component, textProperty(component, "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(
+      labelText(
+        component,
+        "value",
+        { x: cx - faceRadius, y: cy - faceRadius, width: faceRadius * 2, height: faceRadius * 2 },
+        label,
+        box.order + 0.5
+      )
+    );
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/progress.ts
+function readout2(component, fraction) {
+  const display = textProperty(component, "display");
+  if (display === "percent") {
+    return `${Math.round(fraction * 100)}%`;
+  }
+  return display === "value" ? String(Number(component.value)) : "";
+}
+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 text = readout2(component, fraction);
+  if (text) {
+    const label = {
+      text,
+      color: ink(component, textProperty(component, "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(labelText(component, "value", box, label, box.order + 0.3));
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/segmented.ts
+function buildSegmented(component, index) {
+  const box = controlBox(component, index, { width: 300, height: 40 });
+  const options = textProperty(component, "options").split(",").map((option) => option.trim()).filter(Boolean);
+  const count = Math.max(1, options.length);
+  const active = Math.min(count - 1, Math.max(0, Math.round(Number(component.value)) || 0));
+  const inset = Math.min(numberProperty2(component, "inset"), box.height / 2);
+  const radius = Math.min(numberProperty2(component, "radius"), box.height / 2);
+  const cellWidth = (box.width - inset * 2) / count;
+  const cell = { y: box.y + inset, height: box.height - inset * 2 };
+  const nodes = [
+    hitArea(component, box),
+    {
+      id: `widget-${component.id}-track`,
+      type: "rect",
+      order: box.order + 0.1,
+      bounds: rotatedBounds(box, 0, 0),
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      rx: radius,
+      style: fade(component, { fill: solid(textProperty(component, "track")), stroke: { kind: "none" } })
+    },
+    {
+      id: `widget-${component.id}-active`,
+      type: "rect",
+      order: box.order + 0.2,
+      bounds: rotatedBounds({ x: box.x + inset + active * cellWidth, width: cellWidth, ...cell }, 0, 0),
+      x: box.x + inset + active * cellWidth,
+      y: cell.y,
+      width: cellWidth,
+      height: cell.height,
+      rx: Math.max(0, radius - inset),
+      style: fade(component, {
+        fill: solid(textProperty(component, "accent")),
+        stroke: { kind: "none" },
+        shadow: { color: "#000000", opacity: 0.18, blur: 3, dx: 0, dy: 1 }
+      })
+    }
+  ];
+  options.forEach((option, position) => {
+    const area = { x: box.x + inset + position * cellWidth, width: cellWidth, ...cell };
+    const color = ink(component, textProperty(component, position === active ? "activeTextColor" : "textColor"));
+    nodes.push(
+      labelText(
+        component,
+        `option-${position}`,
+        area,
+        { text: option, color, fontSize: numberProperty2(component, "fontSize"), align: "center" },
+        box.order + 0.3
+      )
+    );
+  });
+  return nodes;
+}
+
+// src/model/component/sliderReach.ts
+function sliderReach(variant2, height) {
+  return variant2 === "field" ? Math.min(8, height / 2) : height / 2;
+}
+
+// src/renderScene/artifacts/component/slider.ts
+var HANDLE_WIDTH = 4;
+var TEXT_PADDING = 12;
+var TICK_LENGTH = 5;
+var TICK_THICKNESS = 1.5;
+function decimals2(step) {
+  return step > 0 ? String(step).split(".")[1]?.length ?? 0 : 0;
+}
+function readout3(component, thumbs) {
+  const display = textProperty(component, "display");
+  const places = decimals2(numberProperty2(component, "step"));
+  const parts = display === "percent" ? thumbs.two ? [thumbs.from, thumbs.to].map((fraction) => `${Math.round(fraction * 100)}%`) : [`${Math.round(thumbs.to * 100)}%`] : display === "value" ? thumbs.values.map((value) => value.toFixed(places)) : [];
+  return parts.join(" \u2013 ");
+}
+var rect = (component, box, part, order, shape, color, extra = {}) => ({
+  id: `widget-${component.id}-${part}`,
+  type: "rect",
+  order: box.order + order,
+  bounds: rotatedBounds(shape, 0, 0),
+  ...shape,
+  style: fade(component, { fill: solid(color), stroke: { kind: "none" }, ...extra })
+});
+function ticks(component, box, vertical, reach, offset) {
+  const count = Math.round(numberProperty2(component, "ticks"));
+  const color = textProperty(component, "tickColor");
+  return Array.from({ length: count >= 2 ? count : 0 }, (_, index) => {
+    const t = index / (count - 1);
+    const shape = vertical ? {
+      x: box.x + offset,
+      y: box.y + box.height - reach - t * (box.height - reach * 2) - TICK_THICKNESS / 2,
+      width: TICK_LENGTH,
+      height: TICK_THICKNESS,
+      rx: TICK_THICKNESS / 2
+    } : {
+      x: box.x + reach + t * (box.width - reach * 2) - TICK_THICKNESS / 2,
+      y: box.y + offset,
+      width: TICK_THICKNESS,
+      height: TICK_LENGTH,
+      rx: TICK_THICKNESS / 2
+    };
+    return rect(component, box, `tick-${index}`, 0.15, shape, color);
+  });
+}
+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 line = (start, end) => vertical ? {
+    x: mid - thickness / 2,
+    y: Math.min(start, end),
+    width: thickness,
+    height: Math.abs(end - start),
+    rx: thickness / 2
+  } : {
+    x: Math.min(start, end),
+    y: mid - thickness / 2,
+    width: Math.abs(end - start),
+    height: thickness,
+    rx: thickness / 2
+  };
+  const whole = vertical ? line(box.y, box.y + box.height) : line(box.x, box.x + box.width);
+  const filled = line(thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x, along2(thumbs.to));
+  const thumb = (part, fraction, order) => {
+    const cx = vertical ? mid : along2(fraction);
+    const cy = vertical ? along2(fraction) : mid;
+    return {
+      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, 0),
+      cx,
+      cy,
+      rx: radius,
+      ry: radius,
+      style: fade(component, {
+        fill: solid(textProperty(component, "thumb")),
+        stroke: { kind: "none" },
+        shadow: { color: "#000000", opacity: 0.25, blur: 3, dx: 0, dy: 1 }
+      })
+    };
+  };
+  return [
+    rect(component, box, "track", 0.1, whole, textProperty(component, "track")),
+    ...ticks(
+      component,
+      box,
+      vertical,
+      reach,
+      vertical ? box.width / 2 + thickness / 2 + 5 : box.height / 2 + thickness / 2 + 5
+    ),
+    rect(component, box, "fill", 0.2, filled, textProperty(component, "accent")),
+    ...thumbs.two ? [thumb("thumb-start", thumbs.from, 0.3)] : [],
+    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);
+  const first = Math.min(start, end) - (thumbs.two ? HANDLE_WIDTH / 2 : 0);
+  const last = Math.max(start, end) + HANDLE_WIDTH / 2;
+  const filled = 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
+  } : {
+    ...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
+  };
+  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 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)
+  ];
+  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;
+  }
+  const inner = { y: box.y, height: box.height, width: Math.max(0, box.width / 2 - TEXT_PADDING) };
+  if (component.label) {
+    nodes.push(
+      labelText(
+        component,
+        "label",
+        { x: box.x + TEXT_PADDING, ...inner },
+        { ...text, text: component.label, align: "left" },
+        box.order + 0.4
+      )
+    );
+  }
+  if (value) {
+    nodes.push(
+      labelText(
+        component,
+        "value",
+        { x: box.x + box.width / 2, ...inner },
+        { ...text, text: value, align: "right" },
+        box.order + 0.4
+      )
+    );
+  }
+  nodes.push(...ticks(component, box, false, reach, box.height - TICK_LENGTH - 5));
+  return nodes;
+}
+function buildSlider(component, index) {
+  const field = textProperty(component, "variant") === "field";
+  const vertical = textProperty(component, "direction") === "vertical";
+  const fallback = vertical ? { width: field ? 56 : 28, height: 180 } : { width: 220, height: field ? 36 : 28 };
+  const box = controlBox(component, index, fallback);
+  const min = numberProperty2(component, "min");
+  const max = numberProperty2(component, "max");
+  const fractionOf = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
+  const two = component.type === "range";
+  const low = Number(component.value);
+  const high = two ? Number(component.properties.valueEnd ?? max) : low;
+  const thumbs = {
+    from: fractionOf(two ? Math.min(low, high) : min),
+    to: fractionOf(two ? Math.max(low, high) : low),
+    values: two ? [Math.min(low, high), Math.max(low, high)] : [low],
+    two
+  };
+  return [
+    hitArea(component, box),
+    ...field ? buildField(component, box, thumbs, vertical) : buildLine(component, box, thumbs, vertical)
+  ];
+}
+
 // src/renderScene/artifacts/component/switch.ts
 var PADDING_RATIO = 0.12;
 function buildSwitch(component, index) {
@@ -1668,7 +2127,12 @@ var builders = /* @__PURE__ */ new Map([
   ["switch", asComponentBuilder(buildSwitch)],
   ["checkbox", asComponentBuilder(buildCheckbox)],
   ["toggleButton", asComponentBuilder(buildToggleButton)],
-  ["button", asComponentBuilder(buildButton)]
+  ["button", asComponentBuilder(buildButton)],
+  ["slider", asComponentBuilder(buildSlider)],
+  ["progress", asComponentBuilder(buildProgress)],
+  ["segmented", asComponentBuilder(buildSegmented)],
+  ["knob", asComponentBuilder(buildKnob)],
+  ["range", asComponentBuilder(buildSlider)]
 ]);
 function registerComponentBuilder(type, builder) {
   builders.set(type, builder);
@@ -3073,6 +3537,46 @@ function renderShapeGeometry(context) {
   return renderer(context);
 }
 
+// src/renderScene/artifacts/shape/shaderSurface.ts
+var RECT_PROGRAMS = /* @__PURE__ */ new Set(["reactivePanel", "ledMatrix", "lightBand", "silkFolds"]);
+function shaderMask(context) {
+  if (context.shape.shapeType === "circle" || context.shape.shapeType === "oval") {
+    return "ellipse";
+  }
+  const rectangular = context.shape.shapeType === "rectangle" || context.shape.shapeType === "rounded_rectangle";
+  if (rectangular && context.shape.shader && RECT_PROGRAMS.has(context.shape.shader.program)) {
+    return "rect";
+  }
+  return void 0;
+}
+function renderShapeShaderSurface(context) {
+  if (!context.shape.shader) {
+    return void 0;
+  }
+  const mask = shaderMask(context);
+  if (!mask) {
+    return void 0;
+  }
+  const padding = mask === "rect" ? Math.max(0, context.shape.shader.surfacePadding ?? 0) : 0;
+  const surfaceBounds = {
+    x: context.x - padding,
+    y: context.y - padding,
+    width: context.width + padding * 2,
+    height: context.height + padding * 2
+  };
+  return {
+    id: `${context.id}-shader`,
+    type: "shader-surface",
+    order: context.order,
+    bounds: rotatedBounds(surfaceBounds, context.rotation, 0),
+    ...surfaceBounds,
+    rotation: context.rotation,
+    shader: context.shape.shader,
+    mask,
+    fillColor: context.style.fill?.kind === "solid" ? context.style.fill.color : void 0
+  };
+}
+
 // src/renderScene/artifacts/shape/style.ts
 var REMOVED_SHAPE_HINTS = {
   container_rectangle: " (use 'rectangle' with strokeStyle: dashed)"
@@ -3315,32 +3819,13 @@ function createRenderContext(shape, index, diagnostics) {
     }
   };
 }
-function renderShaderSurface(context) {
-  if (!context.shape.shader || context.shape.shapeType !== "circle" && context.shape.shapeType !== "oval") {
-    return void 0;
-  }
-  return {
-    id: `${context.id}-shader`,
-    type: "shader-surface",
-    order: context.order,
-    bounds: context.bounds,
-    x: context.x,
-    y: context.y,
-    width: context.width,
-    height: context.height,
-    rotation: context.rotation,
-    shader: context.shape.shader,
-    mask: "ellipse",
-    fillColor: context.style.fill?.kind === "solid" ? context.style.fill.color : void 0
-  };
-}
 function buildShape(shape, index, diagnostics, measureText) {
   if (shape.isVisible === false) {
     return [];
   }
   const { context, strokeWidth } = createRenderContext(shape, index, diagnostics);
   const nodes = shape.strokeStyle === "double" ? renderDoubleStroke(context, strokeWidth || 1) : renderShapeGeometry(context);
-  const shader = renderShaderSurface(context);
+  const shader = renderShapeShaderSurface(context);
   if (shader) {
     for (const node of nodes) {
       if (node.type === "ellipse" || node.type === "path" || node.type === "rect") {
@@ -4172,19 +4657,19 @@ function buildChartBackdrop(chart, bounds, order) {
   if (!chart.fillImage) {
     return [];
   }
-  const rect = chartImageRect(chart);
+  const rect2 = chartImageRect(chart);
   const nodes = [
     {
       type: "image",
       id: `chart-image-${chart.id}`,
       order: order.next(),
       bounds,
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
       href: chart.fillImage.url,
-      style: { clip: { type: "rect", ...rect }, pointerEvents: "none" }
+      style: { clip: { type: "rect", ...rect2 }, pointerEvents: "none" }
     }
   ];
   if (chart.fillImage.overlay) {
@@ -4193,11 +4678,11 @@ function buildChartBackdrop(chart, bounds, order) {
       id: `chart-image-overlay-${chart.id}`,
       order: order.next(),
       bounds,
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
-      rx: rect.rx,
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
+      rx: rect2.rx,
       style: { fill: { kind: "solid", color: chart.fillImage.overlay }, pointerEvents: "none" }
     });
   }
@@ -4211,17 +4696,17 @@ function createGlassBackdropNodes(context, id, d) {
   if (blur <= 0 || !chart.fillImage) {
     return [];
   }
-  const rect = chartImageRect(chart);
+  const rect2 = chartImageRect(chart);
   const nodes = [
     {
       type: "image",
       id: `chart-bar-glass-${chart.id}-${id}`,
       order: nextOrder(),
       bounds,
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
       href: chart.fillImage.url,
       style: {
         blur,
@@ -8191,7 +8676,7 @@ function treemapLeafColor(leaf, layout) {
 
 // src/renderScene/charts/renderers/treemap/legend.ts
 var BAR_THICKNESS = 10;
-var TICK_LENGTH = 4;
+var TICK_LENGTH2 = 4;
 var ROW_GAP2 = 2;
 var CHART_GAP = 16;
 var LABEL_SIZE = 34;
@@ -8239,14 +8724,14 @@ function renderBottomLegend(context, layout) {
       strokeWidth: 1
     }
   };
-  const ticks = layout.bands.flatMap((value, index) => {
+  const ticks2 = layout.bands.flatMap((value, index) => {
     const x = barX + bandRatio2(layout, value) * barWidth;
     const tick = {
       type: "path",
       id: `chart-treemap-legend-tick-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      d: `M ${x} ${barY + BAR_THICKNESS} L ${x} ${barY + BAR_THICKNESS + TICK_LENGTH}`,
+      d: `M ${x} ${barY + BAR_THICKNESS} L ${x} ${barY + BAR_THICKNESS + TICK_LENGTH2}`,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
@@ -8261,14 +8746,14 @@ function renderBottomLegend(context, layout) {
       id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      frame: { x: frameX, y: barY + BAR_THICKNESS + TICK_LENGTH + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
+      frame: { x: frameX, y: barY + BAR_THICKNESS + TICK_LENGTH2 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
       text: formatFieldValue(value),
       chart,
       align
     });
     return [tick, label];
   });
-  return [bar, ...ticks];
+  return [bar, ...ticks2];
 }
 function renderSideLegend(context, layout) {
   const { chart, plot, bounds, nextOrder } = context;
@@ -8296,9 +8781,9 @@ function renderSideLegend(context, layout) {
     }
   };
   const tickX = side === "left" ? barX : barX + BAR_THICKNESS;
-  const tickEndX = side === "left" ? tickX - TICK_LENGTH : tickX + TICK_LENGTH;
+  const tickEndX = side === "left" ? tickX - TICK_LENGTH2 : tickX + TICK_LENGTH2;
   const labelX2 = side === "left" ? tickEndX - ROW_GAP2 - LABEL_SIZE : tickEndX + ROW_GAP2;
-  const ticks = layout.bands.flatMap((value, index) => {
+  const ticks2 = layout.bands.flatMap((value, index) => {
     const y = barTop + (1 - bandRatio2(layout, value)) * barHeight;
     const tick = {
       type: "path",
@@ -8323,7 +8808,7 @@ function renderSideLegend(context, layout) {
     });
     return [tick, label];
   });
-  return [bar, ...ticks];
+  return [bar, ...ticks2];
 }
 
 // src/renderScene/charts/renderers/treemap/tiles.ts
@@ -9148,6 +9633,12 @@ function addStrokeAttrs(attrs, style) {
   if (style.pointerEvents) {
     attrs.push(`pointer-events="${style.pointerEvents}"`);
   }
+  if (style.transition && style.transition > 0) {
+    const time = `${num(style.transition)}ms ease`;
+    attrs.push(
+      `style="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}"`
+    );
+  }
 }
 function elementSize(node) {
   const shape = node;
@@ -9397,8 +9888,9 @@ function lineOffset(index, linePx) {
 function shaderSurfaceSvg(node, defs) {
   const rotation = transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 });
   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}"${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="${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>`;
 }
 function rollingDigitSvg(character, node) {
   const style = node.componentStyle;
@@ -9513,6 +10005,6 @@ function defineComponent(definition) {
   };
 }
 
-export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-FVHVOJS2.js.map
-//# sourceMappingURL=chunk-FVHVOJS2.js.map
+export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
+//# sourceMappingURL=chunk-SDMQRSRW.js.map
+//# sourceMappingURL=chunk-SDMQRSRW.js.map