stickyflow 0.5.0 → 0.6.0

package/dist/{chunk-LTGF5OHP.js → chunk-FVHVOJS2.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-4G2R7PEL.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),
@@ -1386,8 +1410,8 @@ function buildRulerLabels(component, box) {
   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 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",
@@ -2058,7 +2082,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 +2232,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 +2266,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 +2369,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 +2801,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 +2835,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"),
@@ -6165,7 +6469,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 +6522,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;
@@ -8512,6 +8816,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 +8837,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(
@@ -9208,5 +9514,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-LTGF5OHP.js.map
-//# sourceMappingURL=chunk-LTGF5OHP.js.map
+//# sourceMappingURL=chunk-FVHVOJS2.js.map
+//# sourceMappingURL=chunk-FVHVOJS2.js.map