stickyflow 0.6.0 → 0.8.0

package/dist/{chunk-FVHVOJS2.js → chunk-MAPNY7MJ.js}

@@ -1,4 +1,4 @@
-import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-4G2R7PEL.js';
+import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, 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-GLZVHUSW.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -240,6 +240,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 +258,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 +268,7 @@ function textOf(p) {
 function legendOf(p) {
   return {
     legendColor: p.legendColor,
+    legendGap: numOf(p.legendGap),
     showLegend: p.showLegend === "true",
     legendPosition: legendPositionOf(p.legendPosition)
   };
@@ -1332,7 +1342,7 @@ function buildTickScale(component, index) {
 }
 function buildTickLabels(component, box) {
   const labels = component.labels ?? {};
-  const ticks = Math.max(1, finite(Number(component.parameters.ticks), 48));
+  const ticks2 = Math.max(1, finite(Number(component.parameters.ticks), 48));
   const major = Math.max(1, finite(Number(component.parameters.major), 5));
   const start = finite(Number(component.parameters.start), 225) * Math.PI / 180;
   const sweep = finite(Number(component.parameters.sweep), 270) * Math.PI / 180;
@@ -1340,10 +1350,10 @@ function buildTickLabels(component, box) {
   const fontSize = finite(labels.size, 12);
   const centerX = box.x + box.width / 2;
   const centerY = box.y + box.height / 2;
-  const count = Math.floor(ticks / major);
+  const count = Math.floor(ticks2 / major);
   const nodes = [];
   for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
+    const fraction = step * major / ticks2;
     const angle = start - fraction * sweep;
     const labelX2 = centerX + Math.cos(angle) * radius * (box.width / 2);
     const labelY = centerY - Math.sin(angle) * radius * (box.height / 2);
@@ -1398,7 +1408,7 @@ function buildRuler(component, index) {
 function buildRulerLabels(component, box) {
   const labels = component.labels ?? {};
   const horizontal = component.parameters.axis === "horizontal";
-  const ticks = Math.max(1, finite(Number(component.parameters.ticks), 50));
+  const ticks2 = Math.max(1, finite(Number(component.parameters.ticks), 50));
   const major = Math.max(1, finite(Number(component.parameters.major), 5));
   const inset = finite(Number(component.parameters.inset), 0.05) > 0 ? finite(Number(component.parameters.inset), 0.05) : 0.05;
   const line = finite(Number(component.parameters.line), 0.7) > 0 ? finite(Number(component.parameters.line), 0.7) : 0.7;
@@ -1406,10 +1416,10 @@ function buildRulerLabels(component, box) {
   const tickLength = (finite(Number(component.parameters.length), 0.1) > 0 ? finite(Number(component.parameters.length), 0.1) : 0.1) * across * 1.9;
   const edge = line * across - 0.12 * across - tickLength - finite(labels.offset, 0.04) * across;
   const fontSize = finite(labels.size, 12);
-  const count = Math.floor(ticks / major);
+  const count = Math.floor(ticks2 / major);
   const nodes = [];
   for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
+    const fraction = step * major / ticks2;
     const along2 = inset + (1 - 2 * inset) * fraction;
     const labelBox = horizontal ? { x: box.x + box.width * along2 - 24, y: box.y + edge - fontSize * 2, width: 48, height: fontSize * 2 } : { x: box.x + edge - 48, y: box.y + box.height * (1 - along2) - fontSize, width: 48, height: fontSize * 2 };
     nodes.push({
@@ -1447,7 +1457,9 @@ var numberProperty2 = (component, key) => Number(component.properties[key] ?? 0)
 var solid = (color) => ({ kind: "solid", color });
 var ink = (component, color) => component.disabled ? DISABLED_INK : color;
 function fade(component, style) {
-  return component.disabled ? { ...style, opacity: 0.4 } : style;
+  const animate = Number(component.properties.animate ?? 0);
+  const shown = component.disabled ? { ...style, opacity: 0.4 } : style;
+  return animate > 0 ? { ...shown, transition: animate } : shown;
 }
 function hitArea(component, box) {
   return {
@@ -1580,6 +1592,463 @@ function buildCheckbox(component, index) {
   ];
 }
 
+// src/renderScene/artifacts/component/knob.ts
+var DOT_RATIO = 0.62;
+function decimals(step) {
+  return step > 0 ? String(step).split(".")[1]?.length ?? 0 : 0;
+}
+function readout(component, fraction) {
+  const display = textProperty(component, "display");
+  if (display === "percent") {
+    return `${Math.round(fraction * 100)}%`;
+  }
+  return display === "value" ? Number(component.value).toFixed(decimals(numberProperty2(component, "step"))) : "";
+}
+function buildKnob(component, index) {
+  const box = controlBox(component, index, { width: 96, height: 96 });
+  const min = numberProperty2(component, "min");
+  const max = numberProperty2(component, "max");
+  const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
+  const start = numberProperty2(component, "start");
+  const sweep = Math.min(360, Math.max(1, numberProperty2(component, "sweep")));
+  const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 3);
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
+  const circumference = 2 * Math.PI * radius;
+  const round2 = textProperty(component, "rounded") !== "false";
+  const angle = (start - fraction * sweep) * Math.PI / 180;
+  const arc = (part, order, color, length, extra = {}) => ({
+    id: `widget-${component.id}-${part}`,
+    type: "ellipse",
+    order: box.order + order,
+    bounds: rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
+    cx,
+    cy,
+    rx: radius,
+    ry: radius,
+    rotation: -start,
+    style: fade(component, {
+      fill: { kind: "none" },
+      stroke: solid(color),
+      strokeWidth: thickness,
+      dash: [Math.max(1e-3, length), circumference],
+      lineCap: round2 ? "round" : "butt",
+      ...extra
+    })
+  });
+  const faceRadius = Math.max(1, radius - thickness / 2 - Math.max(2, thickness * 0.4));
+  const dotRadius = thickness / 2 * DOT_RATIO + 1;
+  const nodes = [
+    hitArea(component, box),
+    arc("track", 0.1, textProperty(component, "track"), sweep / 360 * circumference),
+    arc("fill", 0.2, textProperty(component, "accent"), fraction * sweep / 360 * circumference, {
+      opacity: fraction > 0 ? 1 : 0
+    }),
+    {
+      id: `widget-${component.id}-face`,
+      type: "ellipse",
+      order: box.order + 0.3,
+      bounds: rotatedBounds(
+        { x: cx - faceRadius, y: cy - faceRadius, width: faceRadius * 2, height: faceRadius * 2 },
+        0,
+        0
+      ),
+      cx,
+      cy,
+      rx: faceRadius,
+      ry: faceRadius,
+      style: fade(component, { fill: solid(textProperty(component, "face")), stroke: { kind: "none" } })
+    },
+    {
+      id: `widget-${component.id}-dot`,
+      type: "ellipse",
+      order: box.order + 0.4,
+      bounds: rotatedBounds(
+        {
+          x: cx + radius * Math.cos(angle) - dotRadius,
+          y: cy - radius * Math.sin(angle) - dotRadius,
+          width: dotRadius * 2,
+          height: dotRadius * 2
+        },
+        0,
+        0
+      ),
+      cx: cx + radius * Math.cos(angle),
+      cy: cy - radius * Math.sin(angle),
+      rx: dotRadius,
+      ry: dotRadius,
+      style: fade(component, { fill: solid(textProperty(component, "dot")), stroke: { kind: "none" } })
+    }
+  ];
+  const text = readout(component, fraction);
+  if (text) {
+    const label = {
+      text,
+      color: ink(component, textProperty(component, "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(
+      labelText(
+        component,
+        "value",
+        { x: cx - faceRadius, y: cy - faceRadius, width: faceRadius * 2, height: faceRadius * 2 },
+        label,
+        box.order + 0.5
+      )
+    );
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/progress.ts
+function readout2(component, fraction) {
+  const display = textProperty(component, "display");
+  if (display === "percent") {
+    return `${Math.round(fraction * 100)}%`;
+  }
+  return display === "value" ? String(Number(component.value)) : "";
+}
+function buildProgress(component, index) {
+  const box = controlBox(component, index, { width: 220, height: 12 });
+  const min = numberProperty2(component, "min");
+  const max = numberProperty2(component, "max");
+  const fraction = Math.min(1, Math.max(0, (Number(component.value) - min) / (max - min || 1)));
+  const round2 = textProperty(component, "rounded") !== "false";
+  const nodes = [hitArea(component, box)];
+  if (textProperty(component, "variant") === "ring") {
+    const thickness = Math.min(numberProperty2(component, "thickness"), Math.min(box.width, box.height) / 2);
+    const radius = Math.max(1, Math.min(box.width, box.height) / 2 - thickness / 2);
+    const circumference = 2 * Math.PI * radius;
+    const cx = box.x + box.width / 2;
+    const cy = box.y + box.height / 2;
+    const ring = (part, order, color, extra) => ({
+      id: `widget-${component.id}-${part}`,
+      type: "ellipse",
+      order: box.order + order,
+      bounds: rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, thickness),
+      cx,
+      cy,
+      rx: radius,
+      ry: radius,
+      rotation: -90,
+      style: fade(component, { fill: { kind: "none" }, stroke: solid(color), strokeWidth: thickness, ...extra })
+    });
+    nodes.push(ring("track", 0.1, textProperty(component, "track"), {}));
+    nodes.push(
+      ring("fill", 0.2, textProperty(component, "accent"), {
+        dash: [Math.max(1e-3, fraction * circumference), circumference],
+        lineCap: round2 ? "round" : "butt",
+        opacity: fraction > 0 ? 1 : 0
+      })
+    );
+  } else {
+    const vertical = textProperty(component, "direction") === "vertical";
+    const radius = round2 ? (vertical ? box.width : box.height) / 2 : 0;
+    const bar = (part, order, length, color, opacity) => {
+      const shape = vertical ? { x: box.x, y: box.y + box.height - length, width: box.width, height: length } : { x: box.x, y: box.y, width: length, height: box.height };
+      return {
+        id: `widget-${component.id}-${part}`,
+        type: "rect",
+        order: box.order + order,
+        bounds: rotatedBounds(shape, 0, 0),
+        ...shape,
+        rx: radius,
+        style: fade(component, {
+          fill: solid(color),
+          stroke: { kind: "none" },
+          ...opacity === void 0 ? {} : { opacity }
+        })
+      };
+    };
+    const full = vertical ? box.height : box.width;
+    nodes.push(bar("track", 0.1, full, textProperty(component, "track")));
+    nodes.push(bar("fill", 0.2, Math.max(0, fraction * full), textProperty(component, "accent"), fraction > 0 ? 1 : 0));
+  }
+  const text = readout2(component, fraction);
+  if (text) {
+    const label = {
+      text,
+      color: ink(component, textProperty(component, "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(labelText(component, "value", box, label, box.order + 0.3));
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/segmented.ts
+function buildSegmented(component, index) {
+  const box = controlBox(component, index, { width: 300, height: 40 });
+  const options = textProperty(component, "options").split(",").map((option) => option.trim()).filter(Boolean);
+  const count = Math.max(1, options.length);
+  const active = Math.min(count - 1, Math.max(0, Math.round(Number(component.value)) || 0));
+  const inset = Math.min(numberProperty2(component, "inset"), box.height / 2);
+  const radius = Math.min(numberProperty2(component, "radius"), box.height / 2);
+  const cellWidth = (box.width - inset * 2) / count;
+  const cell = { y: box.y + inset, height: box.height - inset * 2 };
+  const nodes = [
+    hitArea(component, box),
+    {
+      id: `widget-${component.id}-track`,
+      type: "rect",
+      order: box.order + 0.1,
+      bounds: rotatedBounds(box, 0, 0),
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      rx: radius,
+      style: fade(component, { fill: solid(textProperty(component, "track")), stroke: { kind: "none" } })
+    },
+    {
+      id: `widget-${component.id}-active`,
+      type: "rect",
+      order: box.order + 0.2,
+      bounds: rotatedBounds({ x: box.x + inset + active * cellWidth, width: cellWidth, ...cell }, 0, 0),
+      x: box.x + inset + active * cellWidth,
+      y: cell.y,
+      width: cellWidth,
+      height: cell.height,
+      rx: Math.max(0, radius - inset),
+      style: fade(component, {
+        fill: solid(textProperty(component, "accent")),
+        stroke: { kind: "none" },
+        shadow: { color: "#000000", opacity: 0.18, blur: 3, dx: 0, dy: 1 }
+      })
+    }
+  ];
+  options.forEach((option, position) => {
+    const area = { x: box.x + inset + position * cellWidth, width: cellWidth, ...cell };
+    const color = ink(component, textProperty(component, position === active ? "activeTextColor" : "textColor"));
+    nodes.push(
+      labelText(
+        component,
+        `option-${position}`,
+        area,
+        { text: option, color, fontSize: numberProperty2(component, "fontSize"), align: "center" },
+        box.order + 0.3
+      )
+    );
+  });
+  return nodes;
+}
+
+// src/model/component/sliderReach.ts
+function sliderReach(variant2, height) {
+  return variant2 === "field" ? Math.min(8, height / 2) : height / 2;
+}
+
+// src/renderScene/artifacts/component/slider.ts
+var HANDLE_WIDTH = 4;
+var TEXT_PADDING = 12;
+var TICK_LENGTH = 5;
+var TICK_THICKNESS = 1.5;
+function decimals2(step) {
+  return step > 0 ? String(step).split(".")[1]?.length ?? 0 : 0;
+}
+function readout3(component, thumbs) {
+  const display = textProperty(component, "display");
+  const places = decimals2(numberProperty2(component, "step"));
+  const parts = display === "percent" ? thumbs.two ? [thumbs.from, thumbs.to].map((fraction) => `${Math.round(fraction * 100)}%`) : [`${Math.round(thumbs.to * 100)}%`] : display === "value" ? thumbs.values.map((value) => value.toFixed(places)) : [];
+  return parts.join(" \u2013 ");
+}
+var rect = (component, box, part, order, shape, color, extra = {}) => ({
+  id: `widget-${component.id}-${part}`,
+  type: "rect",
+  order: box.order + order,
+  bounds: rotatedBounds(shape, 0, 0),
+  ...shape,
+  style: fade(component, { fill: solid(color), stroke: { kind: "none" }, ...extra })
+});
+function ticks(component, box, vertical, reach, offset) {
+  const count = Math.round(numberProperty2(component, "ticks"));
+  const color = textProperty(component, "tickColor");
+  return Array.from({ length: count >= 2 ? count : 0 }, (_, index) => {
+    const t = index / (count - 1);
+    const shape = vertical ? {
+      x: box.x + offset,
+      y: box.y + box.height - reach - t * (box.height - reach * 2) - TICK_THICKNESS / 2,
+      width: TICK_LENGTH,
+      height: TICK_THICKNESS,
+      rx: TICK_THICKNESS / 2
+    } : {
+      x: box.x + reach + t * (box.width - reach * 2) - TICK_THICKNESS / 2,
+      y: box.y + offset,
+      width: TICK_THICKNESS,
+      height: TICK_LENGTH,
+      rx: TICK_THICKNESS / 2
+    };
+    return rect(component, box, `tick-${index}`, 0.15, shape, color);
+  });
+}
+function buildLine(component, box, thumbs, vertical) {
+  const reach = sliderReach("line", vertical ? box.width : box.height);
+  const radius = reach * numberProperty2(component, "thumbSize") / 100;
+  const thickness = Math.min(numberProperty2(component, "trackHeight"), vertical ? box.width : box.height);
+  const mid = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
+  const along2 = (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
+  const line = (start, end) => vertical ? {
+    x: mid - thickness / 2,
+    y: Math.min(start, end),
+    width: thickness,
+    height: Math.abs(end - start),
+    rx: thickness / 2
+  } : {
+    x: Math.min(start, end),
+    y: mid - thickness / 2,
+    width: Math.abs(end - start),
+    height: thickness,
+    rx: thickness / 2
+  };
+  const whole = vertical ? line(box.y, box.y + box.height) : line(box.x, box.x + box.width);
+  const filled = line(thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x, along2(thumbs.to));
+  const thumb = (part, fraction, order) => {
+    const cx = vertical ? mid : along2(fraction);
+    const cy = vertical ? along2(fraction) : mid;
+    return {
+      id: `widget-${component.id}-${part}`,
+      type: "ellipse",
+      order: box.order + order,
+      bounds: rotatedBounds({ x: cx - radius, y: cy - radius, width: radius * 2, height: radius * 2 }, 0, 0),
+      cx,
+      cy,
+      rx: radius,
+      ry: radius,
+      style: fade(component, {
+        fill: solid(textProperty(component, "thumb")),
+        stroke: { kind: "none" },
+        shadow: { color: "#000000", opacity: 0.25, blur: 3, dx: 0, dy: 1 }
+      })
+    };
+  };
+  return [
+    rect(component, box, "track", 0.1, whole, textProperty(component, "track")),
+    ...ticks(
+      component,
+      box,
+      vertical,
+      reach,
+      vertical ? box.width / 2 + thickness / 2 + 5 : box.height / 2 + thickness / 2 + 5
+    ),
+    rect(component, box, "fill", 0.2, filled, textProperty(component, "accent")),
+    ...thumbs.two ? [thumb("thumb-start", thumbs.from, 0.3)] : [],
+    thumb(thumbs.two ? "thumb-end" : "thumb", thumbs.to, 0.31)
+  ];
+}
+function buildField(component, box, thumbs, vertical) {
+  const reach = sliderReach("field", vertical ? box.width : box.height);
+  const radius = Math.min(numberProperty2(component, "radius"), Math.min(box.width, box.height) / 2);
+  const whole = { x: box.x, y: box.y, width: box.width, height: box.height, rx: radius };
+  const along2 = (fraction) => vertical ? box.y + box.height - reach - fraction * (box.height - reach * 2) : box.x + reach + fraction * (box.width - reach * 2);
+  const start = thumbs.two ? along2(thumbs.from) : vertical ? box.y + box.height : box.x;
+  const end = along2(thumbs.to);
+  const first = Math.min(start, end) - (thumbs.two ? HANDLE_WIDTH / 2 : 0);
+  const last = Math.max(start, end) + HANDLE_WIDTH / 2;
+  const filled = vertical ? {
+    ...whole,
+    y: thumbs.two ? first : end - HANDLE_WIDTH / 2,
+    height: thumbs.two ? last - first : Math.max(0, box.y + box.height - end + HANDLE_WIDTH / 2),
+    rx: thumbs.two ? 0 : radius
+  } : {
+    ...whole,
+    x: thumbs.two ? first : box.x,
+    width: thumbs.two ? last - first : Math.max(0, end + HANDLE_WIDTH / 2 - box.x),
+    rx: thumbs.two ? 0 : radius
+  };
+  const handleLength = (vertical ? box.width : box.height) * 0.5;
+  const handle = (part, at) => {
+    const shape = vertical ? {
+      x: box.x + (box.width - handleLength) / 2,
+      y: at - HANDLE_WIDTH / 2,
+      width: handleLength,
+      height: HANDLE_WIDTH,
+      rx: HANDLE_WIDTH / 2
+    } : {
+      x: at - HANDLE_WIDTH / 2,
+      y: box.y + (box.height - handleLength) / 2,
+      width: HANDLE_WIDTH,
+      height: handleLength,
+      rx: HANDLE_WIDTH / 2
+    };
+    return rect(component, box, part, 0.3, shape, textProperty(component, "accent"));
+  };
+  const nodes = [
+    rect(component, box, "track", 0.1, whole, textProperty(component, "surface")),
+    rect(component, box, "fill", 0.2, filled, textProperty(component, "fill")),
+    ...thumbs.two ? [handle("handle-start", start)] : [],
+    handle(thumbs.two ? "handle-end" : "handle", end)
+  ];
+  const text = {
+    color: ink(component, textProperty(component, "textColor")),
+    fontSize: numberProperty2(component, "fontSize")
+  };
+  const value = readout3(component, thumbs);
+  if (vertical) {
+    if (value) {
+      nodes.push(
+        labelText(
+          component,
+          "value",
+          { x: box.x, y: box.y + 6, width: box.width, height: 20 },
+          { ...text, text: value, align: "center" },
+          box.order + 0.4
+        )
+      );
+    }
+    return nodes;
+  }
+  const inner = { y: box.y, height: box.height, width: Math.max(0, box.width / 2 - TEXT_PADDING) };
+  if (component.label) {
+    nodes.push(
+      labelText(
+        component,
+        "label",
+        { x: box.x + TEXT_PADDING, ...inner },
+        { ...text, text: component.label, align: "left" },
+        box.order + 0.4
+      )
+    );
+  }
+  if (value) {
+    nodes.push(
+      labelText(
+        component,
+        "value",
+        { x: box.x + box.width / 2, ...inner },
+        { ...text, text: value, align: "right" },
+        box.order + 0.4
+      )
+    );
+  }
+  nodes.push(...ticks(component, box, false, reach, box.height - TICK_LENGTH - 5));
+  return nodes;
+}
+function buildSlider(component, index) {
+  const field = textProperty(component, "variant") === "field";
+  const vertical = textProperty(component, "direction") === "vertical";
+  const fallback = vertical ? { width: field ? 56 : 28, height: 180 } : { width: 220, height: field ? 36 : 28 };
+  const box = controlBox(component, index, fallback);
+  const min = numberProperty2(component, "min");
+  const max = numberProperty2(component, "max");
+  const fractionOf = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
+  const two = component.type === "range";
+  const low = Number(component.value);
+  const high = two ? Number(component.properties.valueEnd ?? max) : low;
+  const thumbs = {
+    from: fractionOf(two ? Math.min(low, high) : min),
+    to: fractionOf(two ? Math.max(low, high) : low),
+    values: two ? [Math.min(low, high), Math.max(low, high)] : [low],
+    two
+  };
+  return [
+    hitArea(component, box),
+    ...field ? buildField(component, box, thumbs, vertical) : buildLine(component, box, thumbs, vertical)
+  ];
+}
+
 // src/renderScene/artifacts/component/switch.ts
 var PADDING_RATIO = 0.12;
 function buildSwitch(component, index) {
@@ -1668,7 +2137,12 @@ var builders = /* @__PURE__ */ new Map([
   ["switch", asComponentBuilder(buildSwitch)],
   ["checkbox", asComponentBuilder(buildCheckbox)],
   ["toggleButton", asComponentBuilder(buildToggleButton)],
-  ["button", asComponentBuilder(buildButton)]
+  ["button", asComponentBuilder(buildButton)],
+  ["slider", asComponentBuilder(buildSlider)],
+  ["progress", asComponentBuilder(buildProgress)],
+  ["segmented", asComponentBuilder(buildSegmented)],
+  ["knob", asComponentBuilder(buildKnob)],
+  ["range", asComponentBuilder(buildSlider)]
 ]);
 function registerComponentBuilder(type, builder) {
   builders.set(type, builder);
@@ -3073,6 +3547,52 @@ function renderShapeGeometry(context) {
   return renderer(context);
 }
 
+// src/renderScene/artifacts/shape/shaderSurface.ts
+var RECT_PROGRAMS = /* @__PURE__ */ new Set([
+  "reactivePanel",
+  "ledMatrix",
+  "lightBand",
+  "silkFolds",
+  "glowCard"
+]);
+function shaderMask(context) {
+  if (context.shape.shapeType === "circle" || context.shape.shapeType === "oval") {
+    return "ellipse";
+  }
+  const rectangular = context.shape.shapeType === "rectangle" || context.shape.shapeType === "rounded_rectangle";
+  if (rectangular && context.shape.shader && RECT_PROGRAMS.has(context.shape.shader.program)) {
+    return "rect";
+  }
+  return void 0;
+}
+function renderShapeShaderSurface(context) {
+  if (!context.shape.shader) {
+    return void 0;
+  }
+  const mask = shaderMask(context);
+  if (!mask) {
+    return void 0;
+  }
+  const padding = mask === "rect" ? Math.max(0, context.shape.shader.surfacePadding ?? 0) : 0;
+  const surfaceBounds = {
+    x: context.x - padding,
+    y: context.y - padding,
+    width: context.width + padding * 2,
+    height: context.height + padding * 2
+  };
+  return {
+    id: `${context.id}-shader`,
+    type: "shader-surface",
+    order: context.order,
+    bounds: rotatedBounds(surfaceBounds, context.rotation, 0),
+    ...surfaceBounds,
+    rotation: context.rotation,
+    shader: context.shape.shader,
+    mask,
+    fillColor: context.style.fill?.kind === "solid" ? context.style.fill.color : void 0
+  };
+}
+
 // src/renderScene/artifacts/shape/style.ts
 var REMOVED_SHAPE_HINTS = {
   container_rectangle: " (use 'rectangle' with strokeStyle: dashed)"
@@ -3315,32 +3835,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") {
@@ -3572,6 +4073,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";
 }
@@ -3593,6 +4100,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);
   }
@@ -3604,6 +4114,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;
@@ -3613,15 +4131,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 {
@@ -3653,6 +4172,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)),
@@ -3660,6 +4180,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",
@@ -3668,7 +4209,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
         },
@@ -3683,8 +4224,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",
@@ -3693,7 +4256,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
         },
@@ -3715,7 +4278,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"
@@ -3732,7 +4295,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"
@@ -4172,19 +4735,19 @@ function buildChartBackdrop(chart, bounds, order) {
   if (!chart.fillImage) {
     return [];
   }
-  const rect = chartImageRect(chart);
+  const rect2 = chartImageRect(chart);
   const nodes = [
     {
       type: "image",
       id: `chart-image-${chart.id}`,
       order: order.next(),
       bounds,
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
       href: chart.fillImage.url,
-      style: { clip: { type: "rect", ...rect }, pointerEvents: "none" }
+      style: { clip: { type: "rect", ...rect2 }, pointerEvents: "none" }
     }
   ];
   if (chart.fillImage.overlay) {
@@ -4193,11 +4756,11 @@ function buildChartBackdrop(chart, bounds, order) {
       id: `chart-image-overlay-${chart.id}`,
       order: order.next(),
       bounds,
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
-      rx: rect.rx,
+      x: rect2.x,
+      y: rect2.y,
+      width: rect2.width,
+      height: rect2.height,
+      rx: rect2.rx,
       style: { fill: { kind: "solid", color: chart.fillImage.overlay }, pointerEvents: "none" }
     });
   }
@@ -4211,17 +4774,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,
@@ -5806,92 +6369,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 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 width = Math.max(1, context.plot.width - reservedSpace.rowHeaders);
-  const height = Math.max(1, context.plot.height - reservedSpace.columnHeaders - reservedSpace.legend);
+  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;
@@ -5906,8 +6451,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,
@@ -5917,30 +6462,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);
@@ -5953,53 +6619,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) {
@@ -6774,14 +7464,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
@@ -6801,20 +7491,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;
   });
 }
@@ -7181,7 +7871,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;
@@ -7356,7 +8046,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;
@@ -7379,7 +8069,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}`,
@@ -7399,8 +8089,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",
@@ -8190,8 +8880,8 @@ function treemapLeafColor(leaf, layout) {
 }
 
 // src/renderScene/charts/renderers/treemap/legend.ts
-var BAR_THICKNESS = 10;
-var TICK_LENGTH = 4;
+var BAR_THICKNESS2 = 10;
+var TICK_LENGTH3 = 4;
 var ROW_GAP2 = 2;
 var CHART_GAP = 16;
 var LABEL_SIZE = 34;
@@ -8220,7 +8910,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",
@@ -8230,7 +8920,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: {
@@ -8239,14 +8929,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_THICKNESS2} L ${x} ${barY + BAR_THICKNESS2 + TICK_LENGTH3}`,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
@@ -8261,22 +8951,22 @@ 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_THICKNESS2 + TICK_LENGTH3 + 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;
   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",
@@ -8285,7 +8975,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 },
@@ -8295,10 +8985,10 @@ function renderSideLegend(context, layout) {
       strokeWidth: 1
     }
   };
-  const tickX = side === "left" ? barX : barX + BAR_THICKNESS;
-  const tickEndX = side === "left" ? tickX - TICK_LENGTH : tickX + TICK_LENGTH;
+  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 ticks = layout.bands.flatMap((value, index) => {
+  const ticks2 = layout.bands.flatMap((value, index) => {
     const y = barTop + (1 - bandRatio2(layout, value)) * barHeight;
     const tick = {
       type: "path",
@@ -8323,7 +9013,7 @@ function renderSideLegend(context, layout) {
     });
     return [tick, label];
   });
-  return [bar, ...ticks];
+  return [bar, ...ticks2];
 }
 
 // src/renderScene/charts/renderers/treemap/tiles.ts
@@ -8720,7 +9410,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",
@@ -9148,6 +9839,12 @@ function addStrokeAttrs(attrs, style) {
   if (style.pointerEvents) {
     attrs.push(`pointer-events="${style.pointerEvents}"`);
   }
+  if (style.transition && style.transition > 0) {
+    const time = `${num(style.transition)}ms ease`;
+    attrs.push(
+      `style="transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}"`
+    );
+  }
 }
 function elementSize(node) {
   const shape = node;
@@ -9397,8 +10094,9 @@ function lineOffset(index, linePx) {
 function shaderSurfaceSvg(node, defs) {
   const rotation = transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 });
   const parameters = xml(JSON.stringify(node.shader.parameters));
+  const surfacePadding = node.shader.surfacePadding ?? 0;
   const fillColor = node.fillColor ? ` data-sf-shader-fill="${xml(node.fillColor)}"` : "";
-  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}"${fillColor} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
+  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}" data-sf-shader-padding="${num(surfacePadding)}"${fillColor} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
 }
 function rollingDigitSvg(character, node) {
   const style = node.componentStyle;
@@ -9513,6 +10211,6 @@ function defineComponent(definition) {
   };
 }
 
-export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-FVHVOJS2.js.map
-//# sourceMappingURL=chunk-FVHVOJS2.js.map
+export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
+//# sourceMappingURL=chunk-MAPNY7MJ.js.map
+//# sourceMappingURL=chunk-MAPNY7MJ.js.map