stickyflow 0.5.0 → 0.7.0

package/dist/{chunk-LTGF5OHP.js → chunk-SDMQRSRW.js}

@@ -1,4 +1,4 @@
-import { componentRegistryVersion, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, isometricFaces, roundedPolygonPath, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, isometricBounds, deriveFaceFills, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricTopFaceCenter, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, 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-IEHE6WVN.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-]*`;
@@ -844,6 +844,26 @@ function connectionObject(c) {
   };
 }
 
+// src/renderInput/fromSfl/canvasObjects/dimension.ts
+function dimensionObject(canvasObject) {
+  const presentation = canvasObject.props;
+  return {
+    id: canvasObject.id,
+    start: canvasObject.dimension.start,
+    end: canvasObject.dimension.end,
+    offset: canvasObject.dimension.offset,
+    text: canvasObject.text,
+    unit: canvasObject.dimension.unit,
+    strokeColor: solidColor(presentation.stroke),
+    strokeWidth: numOf(presentation.strokeWidth),
+    textColor: solidColor(presentation.textColor),
+    fontSize: numOf(presentation.fontSize),
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId
+  };
+}
+
 // src/renderInput/fromSfl/canvasObjects/frame.ts
 function frameObject(e) {
   const p = e.props;
@@ -882,6 +902,8 @@ function isometricObject(canvasObject) {
     width: canvasObject.width,
     height: canvasObject.height,
     depth: canvasObject.isometric.depth,
+    footprint: canvasObject.isometric.footprint,
+    form: canvasObject.isometric.form,
     rotation: canvasObject.rotation,
     order: canvasObject.order,
     sourceIndex: canvasObject.sourceIndex,
@@ -890,7 +912,7 @@ function isometricObject(canvasObject) {
     fill: solidColor(presentation.fill) ?? "#f8fafc",
     strokeColor: solidColor(presentation.stroke) ?? "#111827",
     strokeWidth: numOf(presentation.strokeWidth) ?? 1,
-    cornerRadius: numOf(presentation.cornerRadius) ?? 8,
+    cornerRadius: numOf(presentation.cornerRadius) ?? (canvasObject.isometric.footprint ? 0 : 8),
     hasShadow: shadowStyle?.enabled ?? false,
     shadowStyle,
     labelOffsetX: numOf(presentation.labelOffsetX) ?? 0,
@@ -1041,6 +1063,7 @@ function collectCanvasObjects(state) {
     swimlanes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "swimlane").map(swimlaneObject),
     isometricObjects: canvasObjects.filter(isIsometricObject).map(isometricObject),
     paths: canvasObjects.filter((canvasObject) => canvasObject.objectType === "path").map(pathObject),
+    dimensions: canvasObjects.filter(isDimensionObject).map(dimensionObject),
     charts: canvasObjects.filter((canvasObject) => canvasObject.objectType === "chart").map(chartObject),
     components: canvasObjects.filter(
       (canvasObject) => canvasObject.objectType === "component" && canvasObject.component !== void 0
@@ -1199,6 +1222,7 @@ function sflToRenderInput(sfl) {
     swimlanes: canvasObjects.swimlanes,
     isometricObjects: canvasObjects.isometricObjects,
     paths: canvasObjects.paths,
+    dimensions: canvasObjects.dimensions,
     charts: canvasObjects.charts,
     components: canvasObjects.components,
     links: createRenderInputLinks(canvasObjects),
@@ -1308,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;
@@ -1316,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);
@@ -1374,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;
@@ -1382,12 +1406,12 @@ 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 along = inset + (1 - 2 * inset) * fraction;
-    const labelBox = horizontal ? { x: box.x + box.width * along - 24, y: box.y + edge - fontSize * 2, width: 48, height: fontSize * 2 } : { x: box.x + edge - 48, y: box.y + box.height * (1 - along) - fontSize, width: 48, height: fontSize * 2 };
+    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({
       id: `widget-${component.id}-label-${step}`,
       type: "text",
@@ -1423,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 {
@@ -1556,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) {
@@ -1644,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);
@@ -2058,7 +2546,130 @@ function buildContainers(input) {
   ];
 }
 
-// src/renderScene/artifacts/isometric.ts
+// src/model/dimension/geometry.ts
+var GAP = 4;
+var OVERSHOOT = 6;
+var along = (origin, direction, distance) => ({
+  x: origin.x + direction.x * distance,
+  y: origin.y + direction.y * distance
+});
+function dimensionLength(dimension) {
+  return Math.hypot(dimension.end.x - dimension.start.x, dimension.end.y - dimension.start.y);
+}
+function dimensionText(dimension) {
+  if (dimension.text !== void 0) {
+    return dimension.text;
+  }
+  const length = Math.round(dimensionLength(dimension) * 10) / 10;
+  return `${length}${dimension.unit ? ` ${dimension.unit}` : ""}`;
+}
+function dimensionGeometry(dimension) {
+  const length = dimensionLength(dimension);
+  const direction = length === 0 ? { x: 1, y: 0 } : { x: (dimension.end.x - dimension.start.x) / length, y: (dimension.end.y - dimension.start.y) / length };
+  const normal = { x: direction.y, y: -direction.x };
+  const side = dimension.offset < 0 ? -1 : 1;
+  const line = [
+    along(dimension.start, normal, dimension.offset),
+    along(dimension.end, normal, dimension.offset)
+  ];
+  const extensions = Math.abs(dimension.offset) <= GAP ? [] : [dimension.start, dimension.end].map((point) => [
+    along(point, normal, GAP * side),
+    along(point, normal, dimension.offset + OVERSHOOT * side)
+  ]);
+  const lift = ((dimension.fontSize ?? 11) * 0.75 + 2) * side;
+  const middle = { x: (line[0].x + line[1].x) / 2, y: (line[0].y + line[1].y) / 2 };
+  let angle = Math.atan2(direction.y, direction.x) * 180 / Math.PI;
+  if (angle > 90) {
+    angle -= 180;
+  } else if (angle <= -90) {
+    angle += 180;
+  }
+  return { length, line, extensions, label: { center: along(middle, normal, lift), angle } };
+}
+
+// src/renderScene/artifacts/dimension.ts
+var DEFAULT_COLOR = "#475569";
+var CHAR_WIDTH = 0.6;
+var pathData = (segments) => segments.map(([from, to]) => `M ${from.x} ${from.y} L ${to.x} ${to.y}`).join(" ");
+function pathNode(dimension, name, order, segments) {
+  const strokeWidth = Math.max(0, finite(dimension.strokeWidth, 1));
+  const points = segments.flat();
+  return {
+    type: "path",
+    id: `dimension-${dimension.id}-${name}`,
+    order,
+    bounds: {
+      minX: Math.min(...points.map((point) => point.x)) - strokeWidth,
+      minY: Math.min(...points.map((point) => point.y)) - strokeWidth,
+      maxX: Math.max(...points.map((point) => point.x)) + strokeWidth,
+      maxY: Math.max(...points.map((point) => point.y)) + strokeWidth
+    },
+    d: pathData(segments),
+    style: {
+      fill: { kind: "none" },
+      stroke: { kind: "solid", color: dimension.strokeColor ?? DEFAULT_COLOR },
+      strokeWidth,
+      lineCap: "round"
+    }
+  };
+}
+function labelNode2(dimension, order, text, center, angle) {
+  const fontSize = finite(dimension.fontSize, 11);
+  const width = Math.max(24, text.length * fontSize * CHAR_WIDTH + 8);
+  const height = fontSize * 1.3;
+  return {
+    type: "text",
+    id: `dimension-${dimension.id}-label`,
+    order,
+    bounds: {
+      minX: center.x - width / 2,
+      minY: center.y - height / 2,
+      maxX: center.x + width / 2,
+      maxY: center.y + height / 2
+    },
+    x: center.x - width / 2,
+    y: center.y - height / 2,
+    width,
+    height,
+    lines: [text],
+    fontFamily: DEFAULT_FONT,
+    fontSize,
+    fontWeight: "normal",
+    color: dimension.textColor ?? dimension.strokeColor ?? DEFAULT_COLOR,
+    align: "center",
+    verticalAlign: "middle",
+    lineHeight: 1.2,
+    rotation: angle,
+    rotationCenter: center
+  };
+}
+function buildDimension(dimension, index) {
+  const geometry = dimensionGeometry(dimension);
+  const order = 31e3 + index;
+  const line = {
+    ...pathNode(dimension, "line", order + 0.1, [geometry.line]),
+    markerStart: "filled_arrow",
+    markerEnd: "filled_arrow"
+  };
+  const extensions = geometry.extensions.length > 0 ? [pathNode(dimension, "extensions", order, geometry.extensions)] : [];
+  const text = dimensionText(dimension);
+  return [...extensions, line, labelNode2(dimension, order + 0.2, text, geometry.label.center, geometry.label.angle)];
+}
+function buildDimensions(dimensions) {
+  return dimensions.flatMap(
+    (dimension, index) => tag(
+      buildDimension(dimension, index),
+      "dimension",
+      dimension.id,
+      "dimension",
+      dimensionText(dimension),
+      dimension.parentFrameId
+    )
+  );
+}
+
+// src/renderScene/artifacts/isometric/context.ts
+var FILL_PROP = { prop: "style.fill", propKind: "color", propSolidOnly: true };
 function isometricContext(object, index) {
   const strokeWidth = Math.max(0, finite(object.strokeWidth, 1));
   const rotation = finite(object.rotation, 0);
@@ -2085,82 +2696,19 @@ function isometricContext(object, index) {
     }
   };
 }
-function groundShadowNode(context, faces) {
-  const { object, index, rotation, rotationCenter } = context;
-  if (!object.hasShadow) {
-    return void 0;
-  }
-  const height = Math.max(0, object.height);
-  const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
-  const shadowDrop = height + finite(object.shadowStyle?.distance, 0);
-  const contactFootprint = faces.top.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
-  const footprintCenter = {
-    x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
-    y: contactFootprint.reduce((sum, point) => sum + point.y, 0) / contactFootprint.length
-  };
-  const shadowSpread = 1.3;
-  const footprint = contactFootprint.map((point) => ({
-    x: footprintCenter.x + (point.x - footprintCenter.x) * shadowSpread,
-    y: footprintCenter.y + (point.y - footprintCenter.y) * shadowSpread
-  }));
-  const footprintXs = footprint.map((point) => point.x);
-  const footprintYs = footprint.map((point) => point.y);
+function faceNode(context, name, offset, points, style) {
   return {
-    type: "path",
-    id: `isometric-${object.id}-ground-shadow`,
-    order: 14e3 + index,
-    bounds: {
-      minX: Math.min(...footprintXs),
-      minY: Math.min(...footprintYs),
-      maxX: Math.max(...footprintXs),
-      maxY: Math.max(...footprintYs)
-    },
-    d: roundedPolygonPath(footprint, 0),
-    rotation,
-    rotationCenter,
-    style: {
-      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
-      stroke: { kind: "none" },
-      opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
-      blur: finite(object.shadowStyle?.blur, 8),
-      pointerEvents: "none"
-    }
+    ...context.common,
+    id: `isometric-${context.object.id}-${name}`,
+    order: context.order + offset,
+    d: roundedPolygonPath([...points], 0),
+    style,
+    ...FILL_PROP
   };
 }
-function faceNodes(context, faces, hullClip) {
-  const { object, order, common } = context;
-  const noStroke = { ...common.style, stroke: { kind: "none" } };
-  const faceFills = deriveFaceFills(object.fill ?? "#f8fafc");
-  const colorProp = { prop: "style.fill", propKind: "color", propSolidOnly: true };
-  const face = (name, offset, points, color) => ({
-    ...common,
-    id: `isometric-${object.id}-${name}`,
-    order: order + offset,
-    d: roundedPolygonPath(points, 0),
-    style: { ...noStroke, fill: { kind: "solid", color }, clip: hullClip },
-    ...colorProp
-  });
-  return [
-    face("top", 0, faces.top, faceFills.topFill),
-    face("front", 0.1, faces.front, faceFills.frontFill),
-    face("side", 0.2, faces.right, faceFills.sideFill)
-  ];
-}
-function seamsNode(context, faces, hullClip) {
-  const { object, order, common, strokeWidth } = context;
-  return {
-    ...common,
-    id: `isometric-${object.id}-seams`,
-    order: order + 0.22,
-    d: `M ${faces.top[3].x} ${faces.top[3].y} L ${faces.top[2].x} ${faces.top[2].y} L ${faces.top[1].x} ${faces.top[1].y} M ${faces.top[2].x} ${faces.top[2].y} L ${faces.front[2].x} ${faces.front[2].y}`,
-    style: {
-      ...common.style,
-      fill: { kind: "none" },
-      stroke: { kind: "solid", color: "#cbd5e1" },
-      strokeWidth: Math.min(strokeWidth, 1),
-      clip: hullClip
-    }
-  };
+function silhouette(object) {
+  const faces = isometricFaces(object);
+  return [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
 }
 function hullNode(context, hullPath, cornerRadius) {
   const { object, order, common, box } = context;
@@ -2182,6 +2730,14 @@ function hullNode(context, hullPath, cornerRadius) {
     style: { ...common.style, fill: { kind: "none" } }
   };
 }
+function unseenHullNode(context) {
+  return {
+    ...hullNode(context, roundedPolygonPath(silhouette(context.object), 0), 0),
+    style: { ...context.common.style, fill: { kind: "none" }, stroke: { kind: "none" } }
+  };
+}
+
+// src/renderScene/artifacts/isometric/label.ts
 var LABEL_HEIGHT = 20;
 var LABEL_GAP = 12;
 var LABEL_PADDING_X = 6;
@@ -2277,20 +2833,232 @@ function labelNodes(context, text) {
   }
   return [guide, labelBackgroundNode(context, placement, text, background), label];
 }
-function buildIsometricObject(object, index) {
+
+// src/renderScene/artifacts/isometric/shadow.ts
+function groundShadowNode(context, topOutline) {
+  const { object, index, rotation, rotationCenter } = context;
+  if (!object.hasShadow) {
+    return void 0;
+  }
+  const height = Math.max(0, object.height);
+  const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
+  const shadowDrop = height + finite(object.shadowStyle?.distance, 0);
+  const contactFootprint = topOutline.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
+  const footprintCenter = {
+    x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
+    y: contactFootprint.reduce((sum, point) => sum + point.y, 0) / contactFootprint.length
+  };
+  const shadowSpread = 1.3;
+  const footprint = contactFootprint.map((point) => ({
+    x: footprintCenter.x + (point.x - footprintCenter.x) * shadowSpread,
+    y: footprintCenter.y + (point.y - footprintCenter.y) * shadowSpread
+  }));
+  const footprintXs = footprint.map((point) => point.x);
+  const footprintYs = footprint.map((point) => point.y);
+  return {
+    type: "path",
+    id: `isometric-${object.id}-ground-shadow`,
+    order: 14e3 + index,
+    bounds: {
+      minX: Math.min(...footprintXs),
+      minY: Math.min(...footprintYs),
+      maxX: Math.max(...footprintXs),
+      maxY: Math.max(...footprintYs)
+    },
+    d: roundedPolygonPath(footprint, 0),
+    rotation,
+    rotationCenter,
+    style: {
+      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
+      stroke: { kind: "none" },
+      opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
+      blur: finite(object.shadowStyle?.blur, 8),
+      pointerEvents: "none"
+    }
+  };
+}
+function sphereShadowNode(context, radius) {
+  const { object, index, box } = context;
+  if (!object.hasShadow) {
+    return void 0;
+  }
+  const width = Math.max(0, object.width);
+  const depth = Math.max(0, object.depth);
+  const center = {
+    x: box.x + box.width / 2,
+    y: object.y + Math.max(0, object.height) + (width + depth) * AXIS_SIN / 2
+  };
+  return {
+    type: "ellipse",
+    id: `isometric-${object.id}-ground-shadow`,
+    order: 14e3 + index,
+    bounds: {
+      minX: center.x - radius * 1.1,
+      minY: center.y - radius * 0.6,
+      maxX: center.x + radius * 1.1,
+      maxY: center.y + radius * 0.6
+    },
+    cx: center.x,
+    cy: center.y,
+    rx: radius * 1.05,
+    ry: radius * 0.52,
+    style: {
+      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
+      stroke: { kind: "none" },
+      opacity: object.shadowStyle?.opacity ?? 0.2,
+      blur: finite(object.shadowStyle?.blur, 8),
+      pointerEvents: "none"
+    }
+  };
+}
+
+// src/renderScene/artifacts/isometric/box.ts
+function faceNodes(context, faces, hullClip) {
+  const { object, common } = context;
+  const noStroke = { ...common.style, stroke: { kind: "none" } };
+  const fills = deriveFaceFills(object.fill ?? "#f8fafc");
+  const face = (name, offset, points, color) => faceNode(context, name, offset, points, { ...noStroke, fill: { kind: "solid", color }, clip: hullClip });
+  return [
+    face("top", 0, faces.top, fills.topFill),
+    face("front", 0.1, faces.front, fills.frontFill),
+    face("side", 0.2, faces.right, fills.sideFill)
+  ];
+}
+function seamsNode(context, faces, hullClip) {
+  const { object, order, common, strokeWidth } = context;
+  return {
+    ...common,
+    id: `isometric-${object.id}-seams`,
+    order: order + 0.22,
+    d: `M ${faces.top[3].x} ${faces.top[3].y} L ${faces.top[2].x} ${faces.top[2].y} L ${faces.top[1].x} ${faces.top[1].y} M ${faces.top[2].x} ${faces.top[2].y} L ${faces.front[2].x} ${faces.front[2].y}`,
+    style: {
+      ...common.style,
+      fill: { kind: "none" },
+      stroke: { kind: "solid", color: "#cbd5e1" },
+      strokeWidth: Math.min(strokeWidth, 1),
+      clip: hullClip
+    }
+  };
+}
+function buildBox(object, index) {
   const context = isometricContext(object, index);
   const faces = isometricFaces(object);
   const cornerRadius = Math.max(0, finite(object.cornerRadius, 8));
-  const silhouette = [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
-  const hullPath = roundedPolygonPath(silhouette, cornerRadius);
+  const hullPath = roundedPolygonPath(silhouette(object), cornerRadius);
   const hullClip = { type: "path", d: hullPath };
-  const groundShadow = groundShadowNode(context, faces);
+  const groundShadow = groundShadowNode(context, faces.top);
   const seams = seamsNode(context, faces, hullClip);
   const hull = hullNode(context, hullPath, cornerRadius);
   const facesNodes = faceNodes(context, faces, hullClip);
   const objectNodes = groundShadow ? [hull, ...facesNodes, groundShadow, seams] : [hull, ...facesNodes, seams];
   return object.text ? [...objectNodes, ...labelNodes(context, object.text)] : objectNodes;
 }
+
+// src/renderScene/artifacts/isometric/extruded.ts
+function wallNode(context, side, index, fill2) {
+  const color = shadeFill(fill2, side.light);
+  return faceNode(context, `side-${index}`, 0.05 + index * 1e-3, side.points, {
+    ...context.common.style,
+    stroke: { kind: "solid", color },
+    strokeWidth: 0.6,
+    fill: { kind: "solid", color }
+  });
+}
+function wallEdgesNode(context, side, index) {
+  const [topFrom, topTo, bottomTo, bottomFrom] = side.points;
+  const lines = [
+    `M ${bottomFrom.x} ${bottomFrom.y} L ${bottomTo.x} ${bottomTo.y}`,
+    ...side.smoothStart ? [] : [`M ${topFrom.x} ${topFrom.y} L ${bottomFrom.x} ${bottomFrom.y}`],
+    ...side.smoothEnd ? [] : [`M ${topTo.x} ${topTo.y} L ${bottomTo.x} ${bottomTo.y}`]
+  ];
+  return {
+    ...context.common,
+    id: `isometric-${context.object.id}-side-${index}-edges`,
+    order: context.order + 0.0505 + index * 1e-3,
+    d: lines.join(" "),
+    style: { ...context.common.style, fill: { kind: "none" } }
+  };
+}
+function buildExtruded(object, index, footprint) {
+  const context = isometricContext(object, index);
+  const { top, sides } = extrudeFootprint(object, footprint, Math.max(0, finite(object.cornerRadius, 0)));
+  const fill2 = object.fill ?? "#f8fafc";
+  const groundShadow = groundShadowNode(context, top);
+  const topFace = faceNode(context, "top", 0.2, top, { ...context.common.style, fill: { kind: "solid", color: fill2 } });
+  const nodes = [
+    unseenHullNode(context),
+    ...groundShadow ? [groundShadow] : [],
+    ...sides.flatMap((side, i) => [wallNode(context, side, i, fill2), wallEdgesNode(context, side, i)]),
+    topFace
+  ];
+  return object.text ? [...nodes, ...labelNodes(context, object.text)] : nodes;
+}
+
+// src/renderScene/artifacts/isometric/sphere.ts
+function buildSphere(object, index) {
+  const context = isometricContext(object, index);
+  const { order, common, box } = context;
+  const radius = Math.max(0, Math.min(object.width, object.height, object.depth)) / 2;
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const fill2 = object.fill ?? "#f8fafc";
+  const bounds = { minX: cx - radius, minY: cy - radius, maxX: cx + radius, maxY: cy + radius };
+  const body = {
+    type: "ellipse",
+    id: `isometric-${object.id}-sphere`,
+    order: order + 0.1,
+    bounds,
+    cx,
+    cy,
+    rx: radius,
+    ry: radius,
+    style: {
+      ...common.style,
+      fill: {
+        kind: "linear-gradient",
+        angle: 135,
+        stops: [
+          { offset: 0, color: shadeFill(fill2, 1.22) },
+          { offset: 0.5, color: fill2 },
+          { offset: 1, color: shadeFill(fill2, 0.82) }
+        ]
+      }
+    },
+    prop: "style.fill",
+    propKind: "color",
+    propSolidOnly: true
+  };
+  const highlight = {
+    type: "ellipse",
+    id: `isometric-${object.id}-highlight`,
+    order: order + 0.2,
+    bounds,
+    cx: cx - radius * 0.32,
+    cy: cy - radius * 0.38,
+    rx: radius * 0.26,
+    ry: radius * 0.18,
+    rotation: -35,
+    style: {
+      fill: { kind: "solid", color: "#ffffff" },
+      stroke: { kind: "none" },
+      opacity: 0.45,
+      blur: radius * 0.1,
+      pointerEvents: "none"
+    }
+  };
+  const shadow = sphereShadowNode(context, radius);
+  const nodes = [unseenHullNode(context), ...shadow ? [shadow] : [], body, highlight];
+  return object.text ? [...nodes, ...labelNodes(context, object.text)] : nodes;
+}
+
+// src/renderScene/artifacts/isometric/index.ts
+function buildIsometricObject(object, index) {
+  if (object.form === "sphere") {
+    return buildSphere(object, index);
+  }
+  const footprint = cleanFootprint(object.footprint);
+  return footprint.length > 0 ? buildExtruded(object, index, footprint) : buildBox(object, index);
+}
 function buildIsometricObjects(objects) {
   return objects.flatMap(
     (object, index) => tag(
@@ -2497,7 +3265,7 @@ function polylinePathData(points) {
   }
   return path;
 }
-function pathData(points, pathType, segments, strokeWidth) {
+function pathData2(points, pathType, segments, strokeWidth) {
   if (points.length < 4) {
     return "";
   }
@@ -2531,7 +3299,7 @@ function renderLinkPath(context) {
     id: `link-${link.id}`,
     order: context.order,
     bounds: context.bounds,
-    d: pathData(context.points, context.pathType, context.segments, context.strokeWidth),
+    d: pathData2(context.points, context.pathType, context.segments, context.strokeWidth),
     style: context.style,
     markerStart: markerForEnd(link, "start"),
     markerEnd: markerForEnd(link, "end"),
@@ -2769,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)"
@@ -3011,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") {
@@ -3868,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) {
@@ -3889,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" }
     });
   }
@@ -3907,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,
@@ -6165,7 +6954,7 @@ function dotNode(context, mark) {
     }
   };
 }
-function labelNode2(context, mark, value) {
+function labelNode3(context, mark, value) {
   const { chart, bounds, nextOrder } = context;
   const config = chart.config;
   const fontSize = Math.max(9, chart.fontSize ?? 12);
@@ -6218,7 +7007,7 @@ function renderLineHighlights(context, series, color) {
     }
     nodes.push(dotNode(context, mark));
     if (config?.highlightLabels) {
-      nodes.push(labelNode2(context, mark, pairs[index][1]));
+      nodes.push(labelNode3(context, mark, pairs[index][1]));
     }
   }
   return nodes;
@@ -7887,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;
@@ -7935,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" },
@@ -7957,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;
@@ -7992,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",
@@ -8019,7 +8808,7 @@ function renderSideLegend(context, layout) {
     });
     return [tick, label];
   });
-  return [bar, ...ticks];
+  return [bar, ...ticks2];
 }
 
 // src/renderScene/charts/renderers/treemap/tiles.ts
@@ -8512,6 +9301,7 @@ function stackingOf(input) {
   );
   add("chart", input.charts ?? [], 2e4);
   add("path", input.paths ?? [], 3e4);
+  add("dimension", input.dimensions ?? [], 31e3);
   return stacking;
 }
 function stampStacking(nodes, input) {
@@ -8532,7 +9322,8 @@ function buildRenderScene(input, options = {}) {
     ...buildLinks(input.links, measureText),
     ...buildShapes(input.shapes, diagnostics, measureText),
     ...buildComponents(input.components ?? input.widgets ?? []),
-    ...buildIsometricObjects(input.isometricObjects ?? [])
+    ...buildIsometricObjects(input.isometricObjects ?? []),
+    ...buildDimensions(input.dimensions ?? [])
   ];
   stampStacking(nodes, input);
   nodes.sort(
@@ -8842,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;
@@ -9091,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;
@@ -9207,6 +10005,6 @@ function defineComponent(definition) {
   };
 }
 
-export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-LTGF5OHP.js.map
-//# sourceMappingURL=chunk-LTGF5OHP.js.map
+export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
+//# sourceMappingURL=chunk-SDMQRSRW.js.map
+//# sourceMappingURL=chunk-SDMQRSRW.js.map