stickyflow 0.7.0 → 0.9.0

package/dist/{chunk-SDMQRSRW.js → chunk-FS6L462E.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-JQK4IGXJ.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, labelTilt, tiltedLabelRoom, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-D2266VBZ.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -161,6 +161,23 @@ var PATH_TYPES = ["straight", "curved", "orthogonal"];
 function optionalOneOf(value, allowed) {
   return value !== void 0 && allowed.includes(value) ? value : void 0;
 }
+var BLEND_MODES = [
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
 var SHAPE_STROKE_STYLES = ["solid", "dashed", "dotted", "double"];
 var MARKER_TYPES = [
   "none",
@@ -240,6 +257,14 @@ function axesOf(p) {
     axisLineStyle: p.axisLineStyle === "dashed" || p.axisLineStyle === "dotted" ? p.axisLineStyle : void 0,
     tickLength: numOf(p.tickLength),
     axisFontSize: numOf(p.axisFontSize),
+    axisLabelAngle: numOf(p.axisLabelAngle),
+    axisLabelSpace: numOf(p.axisLabelSpace),
+    rowLabelSide: p.rowLabelSide === "left" || p.rowLabelSide === "right" ? p.rowLabelSide : void 0,
+    columnLabelSide: p.columnLabelSide === "top" || p.columnLabelSide === "bottom" ? p.columnLabelSide : void 0,
+    legendSide: p.legendSide === "top" || p.legendSide === "bottom" || p.legendSide === "left" || p.legendSide === "right" ? p.legendSide : void 0,
+    xLabelGap: numOf(p.xLabelGap),
+    yLabelGap: numOf(p.yLabelGap),
+    axisLabelAlign: p.axisLabelAlign === "left" || p.axisLabelAlign === "center" || p.axisLabelAlign === "right" ? p.axisLabelAlign : void 0,
     axisFontFamily: p.axisFontFamily,
     showValueAxis: p.showValueAxis !== "false",
     categoryAlign: p.categoryAlign === "left" || p.categoryAlign === "inside" ? p.categoryAlign : void 0,
@@ -250,6 +275,7 @@ function textOf(p) {
   return {
     textColor: p.textColor ?? "#0f172a",
     titleSize: numOf(p.titleSize),
+    titleAlign: p.titleAlign === "left" || p.titleAlign === "center" || p.titleAlign === "right" ? p.titleAlign : void 0,
     titleWeight: p.titleWeight === "normal" ? "normal" : void 0,
     titleColor: p.titleColor,
     fontSize: numOf(p.fontSize) ?? 12,
@@ -259,6 +285,7 @@ function textOf(p) {
 function legendOf(p) {
   return {
     legendColor: p.legendColor,
+    legendGap: numOf(p.legendGap),
     showLegend: p.showLegend === "true",
     legendPosition: legendPositionOf(p.legendPosition)
   };
@@ -886,6 +913,7 @@ function frameObject(e) {
     showLabel: p.showLabel !== "false",
     labelPosition: oneOf(p.labelPosition, LABEL_POSITIONS, "top"),
     shadow: p.shadow !== "false",
+    clip: p.clip === "true" || void 0,
     order: e.order,
     sourceIndex: e.sourceIndex
   };
@@ -913,6 +941,7 @@ function isometricObject(canvasObject) {
     strokeColor: solidColor(presentation.stroke) ?? "#111827",
     strokeWidth: numOf(presentation.strokeWidth) ?? 1,
     cornerRadius: numOf(presentation.cornerRadius) ?? (canvasObject.isometric.footprint ? 0 : 8),
+    seams: presentation.seams === "false" ? false : void 0,
     hasShadow: shadowStyle?.enabled ?? false,
     shadowStyle,
     labelOffsetX: numOf(presentation.labelOffsetX) ?? 0,
@@ -1017,6 +1046,8 @@ function shapeObject(e, shaders) {
     dash: dashArray(p.dash),
     strokeStyle: optionalOneOf(p.strokeStyle, SHAPE_STROKE_STYLES),
     opacity: numOf(p.opacity),
+    blur: numOf(p.blur),
+    blend: optionalOneOf(p.blend, BLEND_MODES),
     parentFrameId: e.parentFrameId,
     order: e.order,
     sourceIndex: e.sourceIndex,
@@ -2947,10 +2978,10 @@ function buildBox(object, index) {
   const hullPath = roundedPolygonPath(silhouette(object), cornerRadius);
   const hullClip = { type: "path", d: hullPath };
   const groundShadow = groundShadowNode(context, faces.top);
-  const seams = seamsNode(context, faces, hullClip);
+  const seams = object.seams === false ? void 0 : 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];
+  const objectNodes = groundShadow ? [hull, ...facesNodes, groundShadow, ...seams ? [seams] : []] : [hull, ...facesNodes, ...seams ? [seams] : []];
   return object.text ? [...objectNodes, ...labelNodes(context, object.text)] : objectNodes;
 }
 
@@ -3538,7 +3569,14 @@ function renderShapeGeometry(context) {
 }
 
 // src/renderScene/artifacts/shape/shaderSurface.ts
-var RECT_PROGRAMS = /* @__PURE__ */ new Set(["reactivePanel", "ledMatrix", "lightBand", "silkFolds"]);
+var RECT_PROGRAMS = /* @__PURE__ */ new Set([
+  "reactivePanel",
+  "ledMatrix",
+  "lightBand",
+  "silkFolds",
+  "glowCard",
+  "glassDots"
+]);
 function shaderMask(context) {
   if (context.shape.shapeType === "circle" || context.shape.shapeType === "oval") {
     return "ellipse";
@@ -3648,6 +3686,8 @@ function shapeStyle(shape, diagnostics) {
     dash: shapeDash(shape, strokeWidth),
     lineCap: shape.strokeStyle === "dotted" ? "round" : "butt",
     opacity: finite(shape.opacity, defaults.opacity),
+    blur: shape.blur !== void 0 && shape.blur > 0 ? shape.blur : void 0,
+    blend: shape.blend,
     shadow: shadow?.enabled ? {
       color: shadow.color ?? "#000000",
       opacity: finite(shadow.opacity, 0.25),
@@ -4057,6 +4097,12 @@ function hasCartesianDecorations(chart) {
 function tickOffset(chart) {
   return hasCartesianDecorations(chart) ? Math.max(0, finite(chart.tickLength, 0)) : 0;
 }
+function xLabelOffset(chart) {
+  return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, finite(chart.xLabelGap, 0)) : 0);
+}
+function yLabelOffset(chart) {
+  return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, finite(chart.yLabelGap, 0)) : 0);
+}
 function isHorizontalBoxplot(chart) {
   return chart.chartType === "boxplot" && chart.config?.orientation === "horizontal";
 }
@@ -4078,6 +4124,9 @@ function barCategoryLabelWidth(chart) {
   return Math.max(0, ...categories.map((category) => category.length)) * fontSize * 0.58 + 16;
 }
 function leftLabelWidth(chart) {
+  if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) || isHorizontalBar(chart))) {
+    return chart.axisLabelSpace;
+  }
   if (isHorizontalBoxplot(chart)) {
     return boxplotCategoryLabelWidth(chart);
   }
@@ -4089,6 +4138,14 @@ function leftLabelWidth(chart) {
   }
   return chart.axisY.label ? 60 : 46;
 }
+function tiltedBottomRoom(chart) {
+  const tilt = labelTilt(chart);
+  if (tilt <= 0) {
+    return 0;
+  }
+  const labels = chart.chartType === "bar" && !isHorizontalBar(chart) ? chart.config?.categories ?? [] : chart.chartType === "boxplot" && !isHorizontalBoxplot(chart) ? chart.series.map((series) => series.label || series.id) : [];
+  return labels.length > 0 ? Math.max(0, tiltedLabelRoom(chart, labels, tilt) - 18) : 0;
+}
 function decorations(chart) {
   const showLabels = chart.showAxisLabels !== false;
   const showLegend = chart.showLegend !== false;
@@ -4098,15 +4155,16 @@ function decorations(chart) {
   const legendStacked = hasLegendItems && isStackedLegendPosition(legendPosition);
   const sideColumnWidth = legendStacked ? stackedLegendColumnWidth(chart) + LEGEND_COLUMN_GAP : 0;
   const treemapSide = treemapSideLegendSide(chart, showLegend);
-  const tick = tickOffset(chart);
-  const padLeft = tick + (showLabels ? leftLabelWidth(chart) : 12) + (legendPosition === "bottomLeft" ? sideColumnWidth : 0) + (treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
+  const tickX = xLabelOffset(chart);
+  const tickY = yLabelOffset(chart);
+  const padLeft = tickY + (showLabels ? leftLabelWidth(chart) : 12) + (legendPosition === "bottomLeft" ? sideColumnWidth : 0) + (treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
   const padRight = 24 + (legendPosition === "bottomRight" ? sideColumnWidth : 0) + (treemapSide === "right" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
   const valueRow = chart.chartType === "bar" && chart.config?.showBarLabels === true && chart.config.barLabelPosition === "axis";
   const horizontalValueAxis = isHorizontalBar(chart) && chart.showValueAxis !== false;
   const basePadBottom = showLabels ? isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
   const hasColorBar = chart.chartType === "field" && showLegend && Boolean(chart.config?.scale?.stops.length);
   const legendAtBottomRow = hasLegendItems && !legendAtTop && !legendStacked;
-  const padBottom = tick + basePadBottom + (hasColorBar ? 44 : 0) + (legendAtBottomRow ? 16 + LEGEND_ROW_HEIGHT : 0);
+  const padBottom = tickX + basePadBottom + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendAtBottomRow ? 16 + LEGEND_ROW_HEIGHT : 0);
   const titleHeight = chart.title ? Math.max(44, 20 + finite(chart.titleSize, 14) * 1.6) : 0;
   const padTop = titleHeight || (legendAtTop && hasLegendItems ? 44 : 24);
   return {
@@ -4138,6 +4196,7 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
   const slotWidth = layout.plot.width / count;
   const labels = categoryLabels(chart, count);
   const editable = Boolean(chart.config?.categories?.length);
+  const tilt = labelTilt(chart);
   const left = chart.categoryAlign === "left";
   const groupGap = left ? Math.min(
     Math.max(0, finite(chart.config?.barGroupGap, 8)),
@@ -4145,6 +4204,27 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
   ) : 0;
   return Array.from({ length: count }, (_value, index) => {
     const centerX = layout.plot.x + (index + 0.5) * slotWidth;
+    if (tilt > 0) {
+      const text = labels[index] ?? String(index + 1);
+      const { frame, rotation } = labelBelowFrame(chart, text, tilt, {
+        x: centerX,
+        y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
+      });
+      return {
+        ...chartText({
+          role: "axis",
+          id: `chart-x-tick-${chart.id}-${index}`,
+          order: order + index,
+          bounds: layout.bounds,
+          frame,
+          text,
+          chart,
+          align: "right",
+          rotation
+        }),
+        prop: editable ? categoryProp(index) : void 0
+      };
+    }
     return {
       ...chartText({
         role: "axis",
@@ -4153,7 +4233,7 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
         bounds: layout.bounds,
         frame: {
           x: left ? layout.plot.x + index * slotWidth + groupGap / 2 : centerX - slotWidth / 2,
-          y: layout.plot.y + layout.plot.height + 4 + tickOffset(chart),
+          y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart),
           width: left ? slotWidth - groupGap : slotWidth,
           height: 18
         },
@@ -4168,8 +4248,30 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
 function buildSeriesXAxisTicks(chart, layout, order) {
   const count = Math.max(1, chart.series.length);
   const slotWidth = layout.plot.width / count;
+  const tilt = labelTilt(chart);
   return chart.series.map((series, index) => {
     const centerX = layout.plot.x + (index + 0.5) * slotWidth;
+    if (tilt > 0) {
+      const text = series.label || series.id;
+      const { frame, rotation } = labelBelowFrame(chart, text, tilt, {
+        x: centerX,
+        y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
+      });
+      return {
+        ...chartText({
+          role: "axis",
+          id: `chart-x-tick-${chart.id}-${index}`,
+          order: order + index,
+          bounds: layout.bounds,
+          frame,
+          text,
+          chart,
+          align: "right",
+          rotation
+        }),
+        prop: seriesLabelProp(series.id)
+      };
+    }
     return {
       ...chartText({
         role: "axis",
@@ -4178,7 +4280,7 @@ function buildSeriesXAxisTicks(chart, layout, order) {
         bounds: layout.bounds,
         frame: {
           x: centerX - slotWidth / 2,
-          y: layout.plot.y + layout.plot.height + 4 + tickOffset(chart),
+          y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart),
           width: slotWidth,
           height: 18
         },
@@ -4200,7 +4302,7 @@ function buildNumericXAxisTicks(chart, layout, order) {
       id: `chart-x-tick-${chart.id}-${tick}`,
       order: order + index,
       bounds: layout.bounds,
-      frame: { x: x - 20, y: layout.plot.y + layout.plot.height + 10 + tickOffset(chart), width: 40, height: 18 },
+      frame: { x: x - 20, y: layout.plot.y + layout.plot.height + 10 + xLabelOffset(chart), width: 40, height: 18 },
       text: String(tick),
       chart,
       align: "center"
@@ -4217,7 +4319,7 @@ function buildNumericYAxisTicks(chart, layout, order) {
       id: `chart-y-tick-${chart.id}-${tick}`,
       order: order + index,
       bounds: layout.bounds,
-      frame: { x: chart.x, y: y - 6, width: layout.padLeft - 14 - tickOffset(chart), height: 18 },
+      frame: { x: chart.x, y: y - 6, width: layout.padLeft - 14 - yLabelOffset(chart), height: 18 },
       text: String(tick),
       chart,
       align: "right"
@@ -6291,92 +6393,74 @@ function createCellValueLabel(context, layout, cell) {
   };
 }
 
-// src/renderScene/charts/renderers/heatmap/headers.ts
-function renderHeatmapHeaders(context, layout) {
-  return [...renderRowHeaders(context, layout), ...renderColumnHeaders(context, layout)];
-}
-function renderRowHeaders(context, layout) {
-  if (layout.reservedSpace.rowHeaders <= 0) {
-    return [];
-  }
-  return layout.rows.map((series, rowIndex) => createRowHeader(context, layout, series, rowIndex));
-}
-function createRowHeader(context, layout, series, rowIndex) {
-  const { chart, plot, bounds, nextOrder } = context;
-  return chartText({
-    id: `chart-heatmap-row-${chart.id}-${series.id}`,
-    order: nextOrder(),
-    bounds,
-    frame: {
-      x: plot.x,
-      y: layout.grid.y + rowIndex * layout.grid.cellHeight + layout.grid.cellHeight / 2 - layout.fontSize / 2,
-      width: layout.reservedSpace.rowHeaders - 8,
-      height: layout.fontSize + 2
-    },
-    text: series.label,
-    chart
-  });
-}
-function renderColumnHeaders(context, layout) {
-  if (layout.reservedSpace.columnHeaders <= 0) {
-    return [];
-  }
-  return layout.columns.map((label, columnIndex) => createColumnHeader(context, layout, label, columnIndex));
-}
-function createColumnHeader(context, layout, label, columnIndex) {
-  const { chart, plot, bounds, nextOrder } = context;
-  return chartText({
-    id: `chart-heatmap-col-${chart.id}-${columnIndex}`,
-    order: nextOrder(),
-    bounds,
-    frame: {
-      x: layout.grid.x + columnIndex * layout.grid.cellWidth,
-      y: plot.y,
-      width: layout.grid.cellWidth,
-      height: layout.fontSize + 2
-    },
-    text: label,
-    chart,
-    align: "center"
-  });
-}
-
 // src/renderScene/charts/renderers/heatmap/layout.ts
 function createHeatmapLayout(context) {
   const { chart } = context;
   const columns = heatmapColumns(context);
-  const reservedSpace = heatmapReservedSpace(context);
+  const sides = heatmapSides(context);
+  const reservedSpace = heatmapReservedSpace(context, sides);
   return {
     rows: chart.series,
     columns,
     bands: axisBands(chart.axisY),
     zones: chart.config?.zones?.length ? chart.config.zones : DEFAULT_HEATMAP_ZONES,
     fontSize: Math.max(9, finite(chart.fontSize, 12)),
+    headerFontSize: headerFontSize(chart),
+    legendGap: legendGap(chart),
+    sides,
     reservedSpace,
-    grid: createHeatmapGrid(context, reservedSpace, columns.length)
+    grid: createHeatmapGrid(context, reservedSpace, sides, columns.length)
+  };
+}
+var headerFontSize = (chart) => Math.max(9, finite(chart.axisFontSize ?? chart.fontSize, 12));
+var rowGap = (chart) => Math.min(120, Math.max(0, finite(chart.yLabelGap, 6)));
+var columnGap = (chart) => Math.min(120, Math.max(0, finite(chart.xLabelGap, 4)));
+var legendGap = (chart) => Math.min(80, Math.max(0, finite(chart.legendGap, 6)));
+function heatmapSides(context) {
+  const { chart } = context;
+  return {
+    rows: chart.rowLabelSide === "right" ? "right" : "left",
+    columns: chart.columnLabelSide === "bottom" ? "bottom" : "top",
+    legend: chart.legendSide ?? "bottom"
   };
 }
 function heatmapColumns(context) {
   const { chart } = context;
   return chart.config?.categories?.length ? chart.config.categories : chart.series[0]?.values?.map((_, index) => String(index + 1)) ?? [];
 }
-function heatmapReservedSpace(context) {
+var LEGEND_ACROSS = 32;
+var LEGEND_BESIDE = 56;
+function heatmapReservedSpace(context, sides) {
   const { chart } = context;
-  const fontSize = Math.max(9, finite(chart.fontSize, 12));
+  const fontSize = headerFontSize(chart);
   const longestLabel = chart.series.reduce(
     (max, series) => Math.max(max, estimateTextWidth(series.label ?? "", fontSize, false)),
     0
   );
+  const vertical = sides.legend === "left" || sides.legend === "right";
   return {
-    rowHeaders: context.showLabels ? Math.min(96, longestLabel + 12) : 0,
-    columnHeaders: context.showLabels ? 24 : 0,
-    legend: context.showLegend ? 38 : 0
+    // The names get the room they ask for, or as much as the longest needs. They never take more than most of the plot.
+    rowHeaders: context.showLabels ? Math.min(
+      context.plot.width * 0.7,
+      chart.axisLabelSpace && chart.axisLabelSpace > 0 ? chart.axisLabelSpace : longestLabel + 6 + rowGap(chart)
+    ) : 0,
+    columnHeaders: context.showLabels ? columnHeaderRoom(context) : 0,
+    legend: context.showLegend ? (vertical ? LEGEND_BESIDE : LEGEND_ACROSS) + legendGap(chart) : 0
   };
 }
-function createHeatmapGrid(context, reservedSpace, columnCount) {
+function columnHeaderRoom(context) {
   const { chart } = context;
-  const width = Math.max(1, context.plot.width - reservedSpace.rowHeaders);
-  const height = Math.max(1, context.plot.height - reservedSpace.columnHeaders - reservedSpace.legend);
+  const tilt = labelTilt(chart);
+  return tilt > 0 ? Math.min(context.plot.height * 0.4, tiltedLabelRoom(chart, heatmapColumns(context), tilt) + columnGap(chart) + 4) : headerFontSize(chart) + 2 + columnGap(chart) + 6;
+}
+function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
+  const { chart } = context;
+  const left = (sides.rows === "left" ? reservedSpace.rowHeaders : 0) + (sides.legend === "left" ? reservedSpace.legend : 0);
+  const right = (sides.rows === "right" ? reservedSpace.rowHeaders : 0) + (sides.legend === "right" ? reservedSpace.legend : 0);
+  const top = (sides.columns === "top" ? reservedSpace.columnHeaders : 0) + (sides.legend === "top" ? reservedSpace.legend : 0);
+  const bottom = (sides.columns === "bottom" ? reservedSpace.columnHeaders : 0) + (sides.legend === "bottom" ? reservedSpace.legend : 0);
+  const width = Math.max(1, context.plot.width - left - right);
+  const height = Math.max(1, context.plot.height - top - bottom);
   const rowCount = chart.series.length;
   const cellGap = Math.max(0, finite(chart.config?.cellGap, 0));
   let cellWidth = columnCount ? width / columnCount : width;
@@ -6391,8 +6475,8 @@ function createHeatmapGrid(context, reservedSpace, columnCount) {
     gridHeight = cellSize * rowCount;
   }
   return {
-    x: context.plot.x + reservedSpace.rowHeaders,
-    y: context.plot.y + reservedSpace.columnHeaders,
+    x: context.plot.x + left,
+    y: context.plot.y + top,
     width: gridWidth,
     height: gridHeight,
     cellWidth,
@@ -6402,30 +6486,151 @@ function createHeatmapGrid(context, reservedSpace, columnCount) {
   };
 }
 
+// src/renderScene/charts/renderers/heatmap/headers.ts
+function renderHeatmapHeaders(context, layout) {
+  return [...renderRowHeaders(context, layout), ...renderColumnHeaders(context, layout)];
+}
+function renderRowHeaders(context, layout) {
+  if (layout.reservedSpace.rowHeaders <= 0) {
+    return [];
+  }
+  return layout.rows.map((series, rowIndex) => createRowHeader(context, layout, series, rowIndex));
+}
+function createRowHeader(context, layout, series, rowIndex) {
+  const { chart, bounds, nextOrder } = context;
+  const room = layout.reservedSpace.rowHeaders;
+  const gap = rowGap(chart);
+  const x = layout.sides.rows === "left" ? layout.grid.x - room : layout.grid.x + layout.grid.width + gap;
+  return chartText({
+    id: `chart-heatmap-row-${chart.id}-${series.id}`,
+    order: nextOrder(),
+    bounds,
+    frame: {
+      x,
+      y: layout.grid.y + rowIndex * layout.grid.cellHeight + layout.grid.cellHeight / 2 - layout.headerFontSize / 2,
+      width: Math.max(1, room - gap),
+      height: layout.headerFontSize + 2
+    },
+    text: series.label,
+    chart,
+    align: chart.axisLabelAlign ?? "left",
+    role: "axis"
+  });
+}
+function renderColumnHeaders(context, layout) {
+  if (layout.reservedSpace.columnHeaders <= 0) {
+    return [];
+  }
+  return layout.columns.map((label, columnIndex) => createColumnHeader(context, layout, label, columnIndex));
+}
+function createColumnHeader(context, layout, label, columnIndex) {
+  const { chart, bounds, nextOrder } = context;
+  const above = layout.sides.columns === "top";
+  const centerX = layout.grid.x + (columnIndex + 0.5) * layout.grid.cellWidth;
+  const tilt = labelTilt(chart);
+  const gap = columnGap(chart);
+  const id = `chart-heatmap-col-${chart.id}-${columnIndex}`;
+  if (tilt > 0) {
+    const { frame, rotation } = above ? labelAboveFrame(chart, label, tilt, { x: centerX, y: layout.grid.y - gap }) : labelBelowFrame(chart, label, tilt, { x: centerX, y: layout.grid.y + layout.grid.height + gap });
+    return chartText({
+      id,
+      order: nextOrder(),
+      bounds,
+      frame,
+      text: label,
+      chart,
+      align: above ? "left" : "right",
+      rotation,
+      role: "axis"
+    });
+  }
+  return chartText({
+    id,
+    order: nextOrder(),
+    bounds,
+    frame: {
+      x: layout.grid.x + columnIndex * layout.grid.cellWidth,
+      y: above ? layout.grid.y - gap - (layout.headerFontSize + 2) : layout.grid.y + layout.grid.height + gap,
+      width: layout.grid.cellWidth,
+      height: layout.headerFontSize + 2
+    },
+    text: label,
+    chart,
+    align: "center",
+    role: "axis"
+  });
+}
+
 // src/renderScene/charts/renderers/heatmap/legend.ts
-var BAR_HEIGHT = 10;
-var TICK_HEIGHT = 4;
+var BAR_THICKNESS = 10;
+var TICK_LENGTH2 = 4;
 var ROW_GAP = 2;
+var LABEL_WIDTH = 48;
+function barPlace(layout) {
+  const { grid, sides, reservedSpace, legendGap: legendGap2 } = layout;
+  const rowRoom = reservedSpace.rowHeaders;
+  const columnRoom = reservedSpace.columnHeaders;
+  switch (sides.legend) {
+    case "top": {
+      const edge = grid.y - (sides.columns === "top" ? columnRoom : 0);
+      return {
+        x: grid.x,
+        y: edge - legendGap2 - BAR_THICKNESS,
+        width: grid.width,
+        height: BAR_THICKNESS,
+        vertical: false,
+        numbers: "top"
+      };
+    }
+    case "left": {
+      const edge = grid.x - (sides.rows === "left" ? rowRoom : 0);
+      return {
+        x: edge - legendGap2 - BAR_THICKNESS,
+        y: grid.y,
+        width: BAR_THICKNESS,
+        height: grid.height,
+        vertical: true,
+        numbers: "left"
+      };
+    }
+    case "right": {
+      const edge = grid.x + grid.width + (sides.rows === "right" ? rowRoom : 0);
+      return {
+        x: edge + legendGap2,
+        y: grid.y,
+        width: BAR_THICKNESS,
+        height: grid.height,
+        vertical: true,
+        numbers: "right"
+      };
+    }
+    default: {
+      const edge = grid.y + grid.height + (sides.columns === "bottom" ? columnRoom : 0);
+      return {
+        x: grid.x,
+        y: edge + legendGap2,
+        width: grid.width,
+        height: BAR_THICKNESS,
+        vertical: false,
+        numbers: "bottom"
+      };
+    }
+  }
+}
 function renderHeatmapLegend(context, layout) {
   if (layout.reservedSpace.legend <= 0 || layout.zones.length === 0) {
     return [];
   }
-  const barX = layout.grid.x;
-  const barWidth = layout.grid.width;
-  const labelHeight = layout.fontSize + 2;
-  const barY = layout.grid.y + layout.grid.height + 6;
-  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_HEIGHT });
-  return [
-    createGradientBar(context, layout, barX, barY, barWidth, barBounds),
-    ...createBoundaryTicks(context, layout, barX, barY, barWidth, labelHeight)
-  ];
+  const place = barPlace(layout);
+  const barBounds = boxBounds({ x: place.x, y: place.y, width: place.width, height: place.height });
+  return [createGradientBar(context, layout, place, barBounds), ...createBoundaryTicks(context, layout, place)];
 }
 function bandRatio(layout, value) {
   const first = layout.bands[0];
   const last = layout.bands[layout.bands.length - 1];
   return last === first ? 0 : (value - first) / (last - first);
 }
-function createGradientBar(context, layout, barX, barY, barWidth, barBounds) {
+function createGradientBar(context, layout, place, barBounds) {
   const { chart, nextOrder } = context;
   const bandCount = Math.max(0, layout.bands.length - 1);
   const zones = layout.zones.slice(0, bandCount);
@@ -6438,53 +6643,77 @@ function createGradientBar(context, layout, barX, barY, barWidth, barBounds) {
     id: `chart-heatmap-legend-bar-${chart.id}`,
     order: nextOrder(),
     bounds: barBounds,
-    x: barX,
-    y: barY,
-    width: barWidth,
-    height: BAR_HEIGHT,
+    x: place.x,
+    y: place.y,
+    width: place.width,
+    height: place.height,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
     style: {
-      fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color: DEFAULT_ZONE_FILL },
+      // Across the grid it runs from the lowest value on the left; beside it from the lowest at the bottom.
+      fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color: DEFAULT_ZONE_FILL },
       stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
       strokeWidth: 1
     }
   };
 }
-function createBoundaryTicks(context, layout, barX, barY, barWidth, labelHeight) {
+function createBoundaryTicks(context, layout, place) {
   const { chart, bounds, nextOrder } = context;
-  const labelY = barY + BAR_HEIGHT + TICK_HEIGHT + ROW_GAP;
-  const labelWidth = 48;
+  const labelHeight = layout.fontSize + 2;
+  const lastIndex = layout.bands.length - 1;
   return layout.bands.flatMap((value, index) => {
-    const x = barX + bandRatio(layout, value) * barWidth;
+    const ratio = bandRatio(layout, value);
+    const at = place.vertical ? place.y + place.height - ratio * place.height : place.x + ratio * place.width;
+    const tickPath = tickPathAt(place, at);
     const tick = {
       type: "path",
       id: `chart-heatmap-legend-tick-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      d: `M ${x} ${barY + BAR_HEIGHT} L ${x} ${barY + BAR_HEIGHT + TICK_HEIGHT}`,
+      d: tickPath,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
         strokeWidth: 1
       }
     };
-    const isFirst = index === 0;
-    const isLast = index === layout.bands.length - 1;
-    const align = isFirst ? "left" : isLast ? "right" : "center";
-    const frameX = isFirst ? x : isLast ? x - labelWidth : x - labelWidth / 2;
     const label = chartText({
       id: `chart-heatmap-legend-tick-label-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      frame: { x: frameX, y: labelY, width: labelWidth, height: labelHeight },
+      ...labelAt(place, at, index === 0, index === lastIndex, labelHeight),
       text: formatFieldValue(value),
-      chart,
-      align
+      chart
     });
     return [tick, label];
   });
 }
+function tickPathAt(place, at) {
+  if (place.vertical) {
+    const from2 = place.numbers === "right" ? place.x + place.width : place.x;
+    const to2 = place.numbers === "right" ? from2 + TICK_LENGTH2 : from2 - TICK_LENGTH2;
+    return `M ${from2} ${at} L ${to2} ${at}`;
+  }
+  const from = place.numbers === "bottom" ? place.y + place.height : place.y;
+  const to = place.numbers === "bottom" ? from + TICK_LENGTH2 : from - TICK_LENGTH2;
+  return `M ${at} ${from} L ${at} ${to}`;
+}
+function labelAt(place, at, first, last, labelHeight) {
+  if (place.vertical) {
+    const onRight = place.numbers === "right";
+    const x2 = onRight ? place.x + place.width + TICK_LENGTH2 + ROW_GAP : place.x - TICK_LENGTH2 - ROW_GAP - LABEL_WIDTH;
+    return {
+      frame: { x: x2, y: at - labelHeight / 2, width: LABEL_WIDTH, height: labelHeight },
+      align: onRight ? "left" : "right"
+    };
+  }
+  const y = place.numbers === "bottom" ? place.y + place.height + TICK_LENGTH2 + ROW_GAP : place.y - TICK_LENGTH2 - ROW_GAP - labelHeight;
+  const x = first ? at : last ? at - LABEL_WIDTH : at - LABEL_WIDTH / 2;
+  return {
+    frame: { x, y, width: LABEL_WIDTH, height: labelHeight },
+    align: first ? "left" : last ? "right" : "center"
+  };
+}
 
 // src/renderScene/charts/renderers/heatmap.ts
 function renderHeatmap(context) {
@@ -7259,14 +7488,14 @@ function createMekkoLayout(context) {
   const labelGutterWidth = context.showLabels ? 30 : 0;
   const grid = createMekkoGrid(context, labelGutterWidth);
   const fontSize = Math.max(9, finite(context.chart.fontSize, 12));
-  const columnGap = Math.max(0, finite(context.chart.config?.mekkoColumnGap, 4));
+  const columnGap2 = Math.max(0, finite(context.chart.config?.mekkoColumnGap, 4));
   const smallFontSize = Math.max(8, fontSize - 1);
   return {
-    columns: createMekkoColumns(context, grid, labels, columnGap),
+    columns: createMekkoColumns(context, grid, labels, columnGap2),
     fontSize,
     smallFontSize,
     labelGutterWidth,
-    columnGap,
+    columnGap: columnGap2,
     labelSize: Math.max(6, finite(context.chart.config?.mekkoLabelSize, smallFontSize)),
     valueSize: Math.max(6, finite(context.chart.config?.mekkoValueSize, smallFontSize)),
     grid
@@ -7286,20 +7515,20 @@ function createMekkoGrid(context, labelGutterWidth) {
     height: Math.max(1, context.plot.height - topGutter - bottomGutter)
   };
 }
-function createMekkoColumns(context, grid, labels, columnGap) {
+function createMekkoColumns(context, grid, labels, columnGap2) {
   const totals = labels.map(
     (_, columnIndex) => context.chart.series.reduce((sum, series) => sum + (series.values[columnIndex] ?? 0), 0)
   );
   const grandTotal = totals.reduce((sum, total) => sum + total, 0);
   const maximumTotal = Math.max(1, ...totals);
-  const availableWidth = Math.max(1, grid.width - columnGap * Math.max(0, labels.length - 1));
+  const availableWidth = Math.max(1, grid.width - columnGap2 * Math.max(0, labels.length - 1));
   let nextX = grid.x;
   return labels.map((label, index) => {
     const total = totals[index];
     const width = grandTotal > 0 ? total / grandTotal * availableWidth : availableWidth / labels.length;
     const height = context.chart.config?.mekkoVaryHeight ? grid.height * (total / maximumTotal) : grid.height;
     const column = { label, total, x: nextX, y: grid.y + grid.height - height, width, height };
-    nextX += width + columnGap;
+    nextX += width + columnGap2;
     return column;
   });
 }
@@ -7666,7 +7895,7 @@ function renderPie(context) {
 var TOP2 = -Math.PI / 2;
 var TRACK_COLOR_FALLBACK = "#e2e8f0";
 var MIN_LABEL_SWEEP = 14 * Math.PI / 180;
-var LABEL_WIDTH = 80;
+var LABEL_WIDTH2 = 80;
 var LABEL_RADIUS_FRACTION = 0.62;
 var OUTSIDE_GAP = 14;
 var LEADER_INSET = 3;
@@ -7841,7 +8070,7 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
   const hasManualOffset = labelOffsetX !== 0 || labelOffsetY !== 0;
   const tooThin = ringThickness < lineHeight * 2 + 6;
   const chordWidth = 2 * geometry.outerRadius * Math.sin(Math.abs(angles.end - angles.start) / 2);
-  const fitsInline = !tooThin && chordWidth >= LABEL_WIDTH;
+  const fitsInline = !tooThin && chordWidth >= LABEL_WIDTH2;
   const outsideLabels = context.chart.config?.polarOutsideLabels ?? false;
   if (!fitsInline && !hasManualOffset && !outsideLabels) {
     return void 0;
@@ -7864,7 +8093,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   const { point, color, outside, mid, tickStart } = placement;
   const { nameSize, valueSize } = labelSizes(chart);
   const lineHeight = Math.max(nameSize, valueSize) * 1.2;
-  const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH / 2, lineHeight) : tickStart;
+  const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
   const tick = {
     type: "path",
     id: `chart-polar-area-label-tick-${chart.id}-${series.id}`,
@@ -7884,8 +8113,8 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   };
   const base = {
     bounds,
-    x: point.x - LABEL_WIDTH / 2,
-    width: LABEL_WIDTH,
+    x: point.x - LABEL_WIDTH2 / 2,
+    width: LABEL_WIDTH2,
     fontFamily: chart.fontFamily ?? DEFAULT_FONT,
     align: "center",
     verticalAlign: "middle",
@@ -8675,8 +8904,8 @@ function treemapLeafColor(leaf, layout) {
 }
 
 // src/renderScene/charts/renderers/treemap/legend.ts
-var BAR_THICKNESS = 10;
-var TICK_LENGTH2 = 4;
+var BAR_THICKNESS2 = 10;
+var TICK_LENGTH3 = 4;
 var ROW_GAP2 = 2;
 var CHART_GAP = 16;
 var LABEL_SIZE = 34;
@@ -8705,7 +8934,7 @@ function renderBottomLegend(context, layout) {
   const barWidth = layout.gridWidth;
   const labelHeight = layout.fontSize + 2;
   const barY = plot.y + layout.gridHeight + CHART_GAP;
-  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS });
+  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS2 });
   const stops = bandStops(layout);
   const bar = {
     type: "rect",
@@ -8715,7 +8944,7 @@ function renderBottomLegend(context, layout) {
     x: barX,
     y: barY,
     width: barWidth,
-    height: BAR_THICKNESS,
+    height: BAR_THICKNESS2,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
     style: {
@@ -8731,7 +8960,7 @@ function renderBottomLegend(context, layout) {
       id: `chart-treemap-legend-tick-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      d: `M ${x} ${barY + BAR_THICKNESS} L ${x} ${barY + BAR_THICKNESS + TICK_LENGTH2}`,
+      d: `M ${x} ${barY + BAR_THICKNESS2} L ${x} ${barY + BAR_THICKNESS2 + TICK_LENGTH3}`,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
@@ -8746,7 +8975,7 @@ function renderBottomLegend(context, layout) {
       id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      frame: { x: frameX, y: barY + BAR_THICKNESS + TICK_LENGTH2 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
+      frame: { x: frameX, y: barY + BAR_THICKNESS2 + TICK_LENGTH3 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
       text: formatFieldValue(value),
       chart,
       align
@@ -8760,8 +8989,8 @@ function renderSideLegend(context, layout) {
   const side = layout.legendPosition;
   const barTop = plot.y;
   const barHeight = layout.gridHeight;
-  const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS : plot.x + layout.gridWidth + CHART_GAP;
-  const barBounds = boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS, height: barHeight });
+  const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS2 : plot.x + layout.gridWidth + CHART_GAP;
+  const barBounds = boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS2, height: barHeight });
   const stops = bandStops(layout);
   const bar = {
     type: "rect",
@@ -8770,7 +8999,7 @@ function renderSideLegend(context, layout) {
     bounds: barBounds,
     x: barX,
     y: barTop,
-    width: BAR_THICKNESS,
+    width: BAR_THICKNESS2,
     height: barHeight,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
@@ -8780,8 +9009,8 @@ function renderSideLegend(context, layout) {
       strokeWidth: 1
     }
   };
-  const tickX = side === "left" ? barX : barX + BAR_THICKNESS;
-  const tickEndX = side === "left" ? tickX - TICK_LENGTH2 : tickX + TICK_LENGTH2;
+  const tickX = side === "left" ? barX : barX + BAR_THICKNESS2;
+  const tickEndX = side === "left" ? tickX - TICK_LENGTH3 : tickX + TICK_LENGTH3;
   const labelX2 = side === "left" ? tickEndX - ROW_GAP2 - LABEL_SIZE : tickEndX + ROW_GAP2;
   const ticks2 = layout.bands.flatMap((value, index) => {
     const y = barTop + (1 - bandRatio2(layout, value)) * barHeight;
@@ -9205,7 +9434,8 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
         bounds,
         frame: { x: plot.x, y: chart.y + 12, width: plot.width, height: 20 },
         text: chart.title,
-        chart
+        chart,
+        align: chart.titleAlign ?? "left"
       }),
       ...chart.titleColor ? { color: chart.titleColor } : {},
       fontWeight: chart.titleWeight ?? "bold",
@@ -9267,6 +9497,86 @@ function buildCharts(charts, diagnostics) {
   );
 }
 
+// src/renderScene/scene/frameClip.ts
+var ARC_STEPS = 8;
+function turnOf(node) {
+  const turned = node;
+  if (!turned.rotation) {
+    return void 0;
+  }
+  if (turned.rotationCenter) {
+    return { angle: turned.rotation, x: turned.rotationCenter.x, y: turned.rotationCenter.y };
+  }
+  if (turned.cx !== void 0 && turned.cy !== void 0) {
+    return { angle: turned.rotation, x: turned.cx, y: turned.cy };
+  }
+  if (turned.x !== void 0 && turned.y !== void 0 && turned.width !== void 0 && turned.height !== void 0) {
+    return { angle: turned.rotation, x: turned.x + turned.width / 2, y: turned.y + turned.height / 2 };
+  }
+  return void 0;
+}
+function roundedRectPoints(frame) {
+  const { x, y, width, height } = frame;
+  const r = Math.max(0, Math.min(frame.cornerRadius, width / 2, height / 2));
+  if (r === 0) {
+    return [
+      [x, y],
+      [x + width, y],
+      [x + width, y + height],
+      [x, y + height]
+    ];
+  }
+  const corners = [
+    [x + width - r, y + r, -90],
+    [x + width - r, y + height - r, 0],
+    [x + r, y + height - r, 90],
+    [x + r, y + r, 180]
+  ];
+  return corners.flatMap(
+    ([cx, cy, start]) => Array.from({ length: ARC_STEPS + 1 }, (_, step) => {
+      const angle = (start + 90 * step / ARC_STEPS) * Math.PI / 180;
+      return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+    })
+  );
+}
+function clipFor(frame, turn) {
+  if (!turn) {
+    return { type: "rect", x: frame.x, y: frame.y, width: frame.width, height: frame.height, rx: frame.cornerRadius };
+  }
+  const back = -turn.angle * Math.PI / 180;
+  const cos = Math.cos(back);
+  const sin = Math.sin(back);
+  const points = roundedRectPoints(frame).map(([px, py]) => {
+    const dx = px - turn.x;
+    const dy = py - turn.y;
+    return [turn.x + dx * cos - dy * sin, turn.y + dx * sin + dy * cos];
+  });
+  const round2 = (value) => Math.round(value * 100) / 100;
+  return { type: "path", d: `M${points.map(([px, py]) => `${round2(px)} ${round2(py)}`).join("L")}Z` };
+}
+function applyFrameClips(nodes, frames) {
+  const clipping = new Map(frames.filter((frame) => frame.clip).map((frame) => [frame.id, frame]));
+  if (clipping.size === 0) {
+    return;
+  }
+  const inside = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const parent = node.identity?.parentFrameId;
+    const frame = parent ? clipping.get(parent) : void 0;
+    if (node.identity && frame) {
+      inside.set(`${node.identity.role}:${node.identity.id}`, frame);
+    }
+  }
+  for (const node of nodes) {
+    const frame = node.identity ? inside.get(`${node.identity.role}:${node.identity.id}`) : void 0;
+    const styled = node;
+    if (frame && styled.style) {
+      const edge = clipFor(frame, turnOf(node));
+      styled.style = { ...styled.style, clip: styled.style.clip ? { ...styled.style.clip, within: edge } : edge };
+    }
+  }
+}
+
 // src/renderScene/scene/build.ts
 function sceneBounds(nodes) {
   if (!nodes.length) {
@@ -9325,6 +9635,7 @@ function buildRenderScene(input, options = {}) {
     ...buildIsometricObjects(input.isometricObjects ?? []),
     ...buildDimensions(input.dimensions ?? [])
   ];
+  applyFrameClips(nodes, input.frames);
   stampStacking(nodes, input);
   nodes.sort(
     (a, b) => (a.rank ?? 0) - (b.rank ?? 0) || (a.sequence ?? 0) - (b.sequence ?? 0) || a.order - b.order || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
@@ -9347,17 +9658,17 @@ var SvgClipDefinitions = class {
   prefix;
   ids = /* @__PURE__ */ new Map();
   clip(style) {
-    if (!style.clip) {
-      return void 0;
-    }
-    const key = JSON.stringify(style.clip);
+    return style.clip ? this.define(style.clip) : void 0;
+  }
+  define(clip) {
+    const key = JSON.stringify(clip);
     let id = this.ids.get(key);
     if (!id) {
+      const outer = clip.within ? this.define(clip.within) : void 0;
       id = safeId(`${this.prefix}clip-${this.ids.size}`);
       this.ids.set(key, id);
-      const clip = style.clip;
       const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${num(clip.x)}" y="${num(clip.y)}" width="${num(clip.width)}" height="${num(clip.height)}" rx="${num(clip.rx)}"/>`;
-      this.addDefinition(`<clipPath id="${id}">${shape}</clipPath>`);
+      this.addDefinition(`<clipPath id="${id}"${outer ? ` clip-path="url(#${outer})"` : ""}>${shape}</clipPath>`);
     }
     return id;
   }
@@ -9386,7 +9697,8 @@ var SvgFilterDefinitions = class {
       );
     }
     if (style.blur || style.saturate !== void 0) {
-      return this.define(nodeId, { blur: style.blur ?? 0, saturate: style.saturate ?? 1 }, blurPrimitives);
+      const margin = size && size > 0 && style.blur ? Math.max(0.5, style.blur * 1.5 / size) : 0.5;
+      return this.define(nodeId, { blur: style.blur ?? 0, saturate: style.saturate ?? 1 }, blurPrimitives, margin);
     }
     return void 0;
   }
@@ -9633,12 +9945,19 @@ function addStrokeAttrs(attrs, style) {
   if (style.pointerEvents) {
     attrs.push(`pointer-events="${style.pointerEvents}"`);
   }
+  const css = [];
   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}"`
+    css.push(
+      `transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}`
     );
   }
+  if (style.blend) {
+    css.push(`mix-blend-mode: ${xml(style.blend)}`);
+  }
+  if (css.length > 0) {
+    attrs.push(`style="${css.join("; ")}"`);
+  }
 }
 function elementSize(node) {
   const shape = node;
@@ -10006,5 +10325,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
-//# sourceMappingURL=chunk-SDMQRSRW.js.map
-//# sourceMappingURL=chunk-SDMQRSRW.js.map
+//# sourceMappingURL=chunk-FS6L462E.js.map
+//# sourceMappingURL=chunk-FS6L462E.js.map