stickyflow 0.4.0 → 0.6.0

package/dist/{chunk-65IVT4GK.js → chunk-FVHVOJS2.js}

@@ -1,4 +1,4 @@
-import { isIsometricObject, sflToCanvasState, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, isometricFaces, roundedPolygonPath, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, DEFAULT_FONT, personLabelArea, wrapText, heuristicRichMeasure, isometricBounds, deriveFaceFills, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricTopFaceCenter, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath } from './chunk-BYMIYXP5.js';
+import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-4G2R7PEL.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -124,6 +124,10 @@ function solidColor(value) {
   const decoded = decodeColor(value);
   return typeof decoded === "string" ? decoded : void 0;
 }
+var CSS_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\([\d.,%\s]+\)|[a-z][\w-]*)$/i;
+function cssColor(value) {
+  return value && CSS_COLOR.test(value) ? value : void 0;
+}
 function oneOf(value, allowed, fallback) {
   return allowed.includes(value) ? value : fallback;
 }
@@ -583,6 +587,242 @@ function typedChart(base, chartType, config) {
   return { ...base, chartType, config };
 }
 
+// src/renderInput/fromSfl/canvasObjects/genericComponent.ts
+function numberProperty(descriptor, raw) {
+  const value = Number(raw);
+  if (raw === void 0 || raw === "" || !Number.isFinite(value)) {
+    return descriptor.default;
+  }
+  const atLeast = descriptor.min === void 0 ? value : Math.max(descriptor.min, value);
+  return descriptor.max === void 0 ? atLeast : Math.min(descriptor.max, atLeast);
+}
+function readProperty(descriptor, raw) {
+  switch (descriptor.type) {
+    case "number":
+      return numberProperty(descriptor, raw);
+    case "boolean":
+      return raw === void 0 ? descriptor.default : raw === "true";
+    case "color":
+      return cssColor(raw) ?? descriptor.default;
+    case "enum":
+      return raw !== void 0 && descriptor.options.includes(raw) ? raw : descriptor.default;
+    case "string":
+      return raw ?? descriptor.default;
+  }
+}
+function readComponentProperties(descriptor, props) {
+  const properties = {};
+  for (const [key, property] of Object.entries(descriptor?.properties ?? {})) {
+    properties[key] = readProperty(property, props[key]);
+  }
+  return properties;
+}
+function readComponentValue(descriptor, raw) {
+  if (!descriptor) {
+    return "";
+  }
+  if (descriptor.type === "boolean") {
+    return raw === "true";
+  }
+  if (descriptor.type === "number") {
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : descriptor.default;
+  }
+  return raw;
+}
+function genericComponentObject(canvasObject) {
+  const descriptor = getComponentDescriptor(canvasObject.component.type);
+  return {
+    id: canvasObject.id,
+    type: canvasObject.component.type,
+    value: descriptor ? readComponentValue(descriptor.value, canvasObject.component.value) : canvasObject.component.value,
+    disabled: canvasObject.props.disabled === "true",
+    label: canvasObject.component.label,
+    x: canvasObject.x,
+    y: canvasObject.y,
+    width: canvasObject.width,
+    height: canvasObject.height,
+    rotation: canvasObject.rotation,
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId,
+    properties: readComponentProperties(descriptor, canvasObject.props)
+  };
+}
+
+// src/renderInput/fromSfl/canvasObjects/component.ts
+var CSS_FONT_FAMILY = /^[\w\s,'"-]+$/;
+function fontFamily(value) {
+  return value && CSS_FONT_FAMILY.test(value) ? value : void 0;
+}
+var FONT_WEIGHT = /^(?:[1-9]00|normal|bold)$/;
+function variant(value) {
+  return value === "plain" || value === "flip" ? value : void 0;
+}
+function motion(value) {
+  return value === "roll" || value === "fade" ? value : void 0;
+}
+function positiveNumber(value) {
+  const number = Number(value);
+  return value !== void 0 && Number.isFinite(number) && number > 0 ? number : void 0;
+}
+function fontWeight(value) {
+  return value && FONT_WEIGHT.test(value) ? value : void 0;
+}
+var TICK_SCALE_NUMBERS = [
+  "ticks",
+  "major",
+  "radius",
+  "length",
+  "thickness",
+  "round",
+  "start",
+  "sweep",
+  "intensity"
+];
+var TICK_SCALE_COLORS = ["color", "accent"];
+function tickScaleObject(canvasObject) {
+  const properties = canvasObject.props;
+  const parameters = {};
+  for (const key of TICK_SCALE_NUMBERS) {
+    const value = Number(properties[key]);
+    if (properties[key] !== void 0 && Number.isFinite(value)) {
+      parameters[key] = value;
+    }
+  }
+  for (const key of TICK_SCALE_COLORS) {
+    const value = cssColor(properties[key]);
+    if (value) {
+      parameters[key] = value;
+    }
+  }
+  return {
+    id: canvasObject.id,
+    type: "tickScale",
+    value: canvasObject.component.value,
+    max: canvasObject.component.max,
+    label: canvasObject.component.label,
+    x: canvasObject.x,
+    y: canvasObject.y,
+    width: canvasObject.width,
+    height: canvasObject.height,
+    rotation: canvasObject.rotation,
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId,
+    parameters,
+    labels: properties.labels === "true" ? {
+      size: Number.isFinite(Number(properties.labelSize)) && properties.labelSize !== void 0 ? Number(properties.labelSize) : void 0,
+      color: cssColor(properties.labelColor),
+      offset: Number.isFinite(Number(properties.labelOffset)) && properties.labelOffset !== void 0 ? Number(properties.labelOffset) : void 0,
+      weight: fontWeight(properties.labelWeight),
+      fontFamily: fontFamily(properties.labelFont)
+    } : void 0
+  };
+}
+var RULER_NUMBERS = [
+  "ticks",
+  "major",
+  "length",
+  "thickness",
+  "round",
+  "dent",
+  "spread",
+  "inset",
+  "line",
+  "gap",
+  "intensity"
+];
+var RULER_COLORS = ["color", "accent", "glow"];
+var RULER_DEFAULTS = { color: "#8f95c4", accent: "#d9f270", glow: "#3ddc84" };
+var RULER_OPTIONAL_COLORS = ["core", "peak"];
+function rulerObject(canvasObject) {
+  const properties = canvasObject.props;
+  const parameters = {};
+  for (const key of RULER_NUMBERS) {
+    const value = Number(properties[key]);
+    if (properties[key] !== void 0 && Number.isFinite(value)) {
+      parameters[key] = value;
+    }
+  }
+  for (const key of RULER_COLORS) {
+    parameters[key] = cssColor(properties[key]) ?? RULER_DEFAULTS[key];
+  }
+  for (const key of RULER_OPTIONAL_COLORS) {
+    const value = cssColor(properties[key]);
+    if (value) {
+      parameters[key] = value;
+    }
+  }
+  parameters.axis = properties.axis === "horizontal" ? "horizontal" : "vertical";
+  if (properties.knob) {
+    parameters.knob = properties.knob;
+  }
+  return {
+    id: canvasObject.id,
+    type: "ruler",
+    value: canvasObject.component.value,
+    min: canvasObject.component.min,
+    max: canvasObject.component.max,
+    label: canvasObject.component.label,
+    x: canvasObject.x,
+    y: canvasObject.y,
+    width: canvasObject.width,
+    height: canvasObject.height,
+    rotation: canvasObject.rotation,
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId,
+    parameters,
+    labels: properties.labels === "true" ? {
+      size: Number.isFinite(Number(properties.labelSize)) && properties.labelSize !== void 0 ? Number(properties.labelSize) : void 0,
+      color: cssColor(properties.labelColor),
+      offset: Number.isFinite(Number(properties.labelOffset)) && properties.labelOffset !== void 0 ? Number(properties.labelOffset) : void 0,
+      weight: fontWeight(properties.labelWeight),
+      fontFamily: fontFamily(properties.labelFont)
+    } : void 0
+  };
+}
+function rollingNumberObject(canvasObject) {
+  const properties = canvasObject.props;
+  return {
+    id: canvasObject.id,
+    type: "rollingNumber",
+    value: canvasObject.component.value,
+    digits: canvasObject.component.digits,
+    duration: canvasObject.component.duration,
+    label: canvasObject.component.label,
+    x: canvasObject.x,
+    y: canvasObject.y,
+    width: canvasObject.width,
+    height: canvasObject.height,
+    rotation: canvasObject.rotation,
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId,
+    style: {
+      color: cssColor(properties.color),
+      surface: cssColor(properties.surface),
+      divider: cssColor(properties.divider),
+      labelColor: cssColor(properties.labelColor),
+      fontFamily: fontFamily(properties.fontFamily),
+      variant: variant(properties.variant),
+      motion: motion(properties.motion),
+      fontWeight: fontWeight(properties.fontWeight),
+      fontSize: positiveNumber(properties.fontSize)
+    }
+  };
+}
+var BUILT_IN_OBJECTS = {
+  rollingNumber: rollingNumberObject,
+  tickScale: tickScaleObject,
+  ruler: rulerObject
+};
+function componentObject(canvasObject) {
+  const type = canvasObject.component.type;
+  return isBuiltInComponentType(type) ? BUILT_IN_OBJECTS[type](canvasObject) : genericComponentObject(canvasObject);
+}
+
 // src/renderInput/fromSfl/canvasObjects/connection.ts
 function connectionObject(c) {
   const p = c.props;
@@ -604,6 +844,26 @@ function connectionObject(c) {
   };
 }
 
+// src/renderInput/fromSfl/canvasObjects/dimension.ts
+function dimensionObject(canvasObject) {
+  const presentation = canvasObject.props;
+  return {
+    id: canvasObject.id,
+    start: canvasObject.dimension.start,
+    end: canvasObject.dimension.end,
+    offset: canvasObject.dimension.offset,
+    text: canvasObject.text,
+    unit: canvasObject.dimension.unit,
+    strokeColor: solidColor(presentation.stroke),
+    strokeWidth: numOf(presentation.strokeWidth),
+    textColor: solidColor(presentation.textColor),
+    fontSize: numOf(presentation.fontSize),
+    order: canvasObject.order,
+    sourceIndex: canvasObject.sourceIndex,
+    parentFrameId: canvasObject.parentFrameId
+  };
+}
+
 // src/renderInput/fromSfl/canvasObjects/frame.ts
 function frameObject(e) {
   const p = e.props;
@@ -642,6 +902,8 @@ function isometricObject(canvasObject) {
     width: canvasObject.width,
     height: canvasObject.height,
     depth: canvasObject.isometric.depth,
+    footprint: canvasObject.isometric.footprint,
+    form: canvasObject.isometric.form,
     rotation: canvasObject.rotation,
     order: canvasObject.order,
     sourceIndex: canvasObject.sourceIndex,
@@ -650,7 +912,7 @@ function isometricObject(canvasObject) {
     fill: solidColor(presentation.fill) ?? "#f8fafc",
     strokeColor: solidColor(presentation.stroke) ?? "#111827",
     strokeWidth: numOf(presentation.strokeWidth) ?? 1,
-    cornerRadius: numOf(presentation.cornerRadius) ?? 8,
+    cornerRadius: numOf(presentation.cornerRadius) ?? (canvasObject.isometric.footprint ? 0 : 8),
     hasShadow: shadowStyle?.enabled ?? false,
     shadowStyle,
     labelOffsetX: numOf(presentation.labelOffsetX) ?? 0,
@@ -790,248 +1052,75 @@ function swimlaneObject(e) {
   };
 }
 
-// src/renderInput/fromSfl/canvasObjects/widget.ts
-var CSS_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\([\d.,%\s]+\)|[a-z][\w-]*)$/i;
-var CSS_FONT_FAMILY = /^[\w\s,'"-]+$/;
-function color(value) {
-  return value && CSS_COLOR.test(value) ? value : void 0;
+// src/renderInput/fromSfl/canvasObjects/collect.ts
+var byOrder = (items) => [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+function collectCanvasObjects(state) {
+  const canvasObjects = byOrder(state.canvasObjects);
+  const shaders = new Map((state.shaders ?? []).map((shader) => [shader.name, shader]));
+  return {
+    shapes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "shape").map((shape) => shapeObject(shape, shaders)),
+    frames: canvasObjects.filter((canvasObject) => canvasObject.objectType === "frame").map(frameObject),
+    swimlanes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "swimlane").map(swimlaneObject),
+    isometricObjects: canvasObjects.filter(isIsometricObject).map(isometricObject),
+    paths: canvasObjects.filter((canvasObject) => canvasObject.objectType === "path").map(pathObject),
+    dimensions: canvasObjects.filter(isDimensionObject).map(dimensionObject),
+    charts: canvasObjects.filter((canvasObject) => canvasObject.objectType === "chart").map(chartObject),
+    components: canvasObjects.filter(
+      (canvasObject) => canvasObject.objectType === "component" && canvasObject.component !== void 0
+    ).map(componentObject),
+    links: byOrder(state.links).map(linkObject),
+    connections: byOrder(state.connections).map(connectionObject)
+  };
 }
-function fontFamily(value) {
-  return value && CSS_FONT_FAMILY.test(value) ? value : void 0;
+
+// src/renderInput/fromSfl/endpoint.ts
+function sidePoint(canvasObject, endpoint) {
+  const offset = endpoint.offset ?? 0.5;
+  switch (endpoint.side) {
+    case "top":
+      return { x: canvasObject.x + canvasObject.width * offset, y: canvasObject.y };
+    case "right":
+      return { x: canvasObject.x + canvasObject.width, y: canvasObject.y + canvasObject.height * offset };
+    case "bottom":
+      return { x: canvasObject.x + canvasObject.width * offset, y: canvasObject.y + canvasObject.height };
+    case "left":
+      return { x: canvasObject.x, y: canvasObject.y + canvasObject.height * offset };
+  }
 }
-var FONT_WEIGHT = /^(?:[1-9]00|normal|bold)$/;
-function variant(value) {
-  return value === "plain" || value === "flip" ? value : void 0;
+function namedPortPoint(canvasObject, endpoint) {
+  const port = canvasObject.symbol?.ports?.find((candidate) => candidate.name === endpoint.port);
+  if (!port) {
+    return elementCenter(canvasObject);
+  }
+  return pointAtNormalizedPort(
+    {
+      x: canvasObject.x,
+      y: canvasObject.y,
+      width: canvasObject.width,
+      height: canvasObject.height,
+      rotation: canvasObject.rotation ?? void 0
+    },
+    port.at
+  );
 }
-function motion(value) {
-  return value === "roll" || value === "fade" ? value : void 0;
-}
-function positiveNumber(value) {
-  const number = Number(value);
-  return value !== void 0 && Number.isFinite(number) && number > 0 ? number : void 0;
-}
-function fontWeight(value) {
-  return value && FONT_WEIGHT.test(value) ? value : void 0;
-}
-var TICK_SCALE_NUMBERS = [
-  "ticks",
-  "major",
-  "radius",
-  "length",
-  "thickness",
-  "round",
-  "start",
-  "sweep",
-  "intensity"
-];
-var TICK_SCALE_COLORS = ["color", "accent"];
-function tickScaleObject(canvasObject) {
-  const properties = canvasObject.props;
-  const parameters = {};
-  for (const key of TICK_SCALE_NUMBERS) {
-    const value = Number(properties[key]);
-    if (properties[key] !== void 0 && Number.isFinite(value)) {
-      parameters[key] = value;
-    }
-  }
-  for (const key of TICK_SCALE_COLORS) {
-    const value = color(properties[key]);
-    if (value) {
-      parameters[key] = value;
-    }
-  }
-  return {
-    id: canvasObject.id,
-    type: "tickScale",
-    value: canvasObject.widget.value,
-    max: canvasObject.widget.max,
-    label: canvasObject.widget.label,
-    x: canvasObject.x,
-    y: canvasObject.y,
-    width: canvasObject.width,
-    height: canvasObject.height,
-    rotation: canvasObject.rotation,
-    order: canvasObject.order,
-    sourceIndex: canvasObject.sourceIndex,
-    parentFrameId: canvasObject.parentFrameId,
-    parameters,
-    labels: properties.labels === "true" ? {
-      size: Number.isFinite(Number(properties.labelSize)) && properties.labelSize !== void 0 ? Number(properties.labelSize) : void 0,
-      color: color(properties.labelColor),
-      offset: Number.isFinite(Number(properties.labelOffset)) && properties.labelOffset !== void 0 ? Number(properties.labelOffset) : void 0,
-      weight: fontWeight(properties.labelWeight),
-      fontFamily: fontFamily(properties.labelFont)
-    } : void 0
-  };
-}
-var RULER_NUMBERS = [
-  "ticks",
-  "major",
-  "length",
-  "thickness",
-  "round",
-  "dent",
-  "spread",
-  "inset",
-  "line",
-  "gap",
-  "intensity"
-];
-var RULER_COLORS = ["color", "accent", "glow"];
-var RULER_DEFAULTS = { color: "#8f95c4", accent: "#d9f270", glow: "#3ddc84" };
-var RULER_OPTIONAL_COLORS = ["core", "peak"];
-function rulerObject(canvasObject) {
-  const properties = canvasObject.props;
-  const parameters = {};
-  for (const key of RULER_NUMBERS) {
-    const value = Number(properties[key]);
-    if (properties[key] !== void 0 && Number.isFinite(value)) {
-      parameters[key] = value;
-    }
-  }
-  for (const key of RULER_COLORS) {
-    parameters[key] = color(properties[key]) ?? RULER_DEFAULTS[key];
-  }
-  for (const key of RULER_OPTIONAL_COLORS) {
-    const value = color(properties[key]);
-    if (value) {
-      parameters[key] = value;
-    }
-  }
-  parameters.axis = properties.axis === "horizontal" ? "horizontal" : "vertical";
-  if (properties.knob) {
-    parameters.knob = properties.knob;
-  }
-  return {
-    id: canvasObject.id,
-    type: "ruler",
-    value: canvasObject.widget.value,
-    min: canvasObject.widget.min,
-    max: canvasObject.widget.max,
-    label: canvasObject.widget.label,
-    x: canvasObject.x,
-    y: canvasObject.y,
-    width: canvasObject.width,
-    height: canvasObject.height,
-    rotation: canvasObject.rotation,
-    order: canvasObject.order,
-    sourceIndex: canvasObject.sourceIndex,
-    parentFrameId: canvasObject.parentFrameId,
-    parameters,
-    labels: properties.labels === "true" ? {
-      size: Number.isFinite(Number(properties.labelSize)) && properties.labelSize !== void 0 ? Number(properties.labelSize) : void 0,
-      color: color(properties.labelColor),
-      offset: Number.isFinite(Number(properties.labelOffset)) && properties.labelOffset !== void 0 ? Number(properties.labelOffset) : void 0,
-      weight: fontWeight(properties.labelWeight),
-      fontFamily: fontFamily(properties.labelFont)
-    } : void 0
-  };
-}
-function widgetObject(canvasObject) {
-  if (canvasObject.widget.type === "tickScale") {
-    return tickScaleObject(canvasObject);
-  }
-  if (canvasObject.widget.type === "ruler") {
-    return rulerObject(canvasObject);
-  }
-  const properties = canvasObject.props;
-  return {
-    id: canvasObject.id,
-    type: "rollingNumber",
-    value: canvasObject.widget.value,
-    digits: canvasObject.widget.digits,
-    duration: canvasObject.widget.duration,
-    label: canvasObject.widget.label,
-    x: canvasObject.x,
-    y: canvasObject.y,
-    width: canvasObject.width,
-    height: canvasObject.height,
-    rotation: canvasObject.rotation,
-    order: canvasObject.order,
-    sourceIndex: canvasObject.sourceIndex,
-    parentFrameId: canvasObject.parentFrameId,
-    style: {
-      color: color(properties.color),
-      surface: color(properties.surface),
-      divider: color(properties.divider),
-      labelColor: color(properties.labelColor),
-      fontFamily: fontFamily(properties.fontFamily),
-      variant: variant(properties.variant),
-      motion: motion(properties.motion),
-      fontWeight: fontWeight(properties.fontWeight),
-      fontSize: positiveNumber(properties.fontSize)
-    }
-  };
-}
-
-// src/renderInput/fromSfl/canvasObjects/collect.ts
-var byOrder = (items) => [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-function collectCanvasObjects(state) {
-  const canvasObjects = byOrder(state.canvasObjects);
-  const shaders = new Map((state.shaders ?? []).map((shader) => [shader.name, shader]));
-  return {
-    shapes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "shape").map((shape) => shapeObject(shape, shaders)),
-    frames: canvasObjects.filter((canvasObject) => canvasObject.objectType === "frame").map(frameObject),
-    swimlanes: canvasObjects.filter((canvasObject) => canvasObject.objectType === "swimlane").map(swimlaneObject),
-    isometricObjects: canvasObjects.filter(isIsometricObject).map(isometricObject),
-    paths: canvasObjects.filter((canvasObject) => canvasObject.objectType === "path").map(pathObject),
-    charts: canvasObjects.filter((canvasObject) => canvasObject.objectType === "chart").map(chartObject),
-    widgets: canvasObjects.filter(
-      (canvasObject) => canvasObject.objectType === "widget" && ["rollingNumber", "tickScale", "ruler"].includes(canvasObject.widget?.type ?? "")
-    ).map(widgetObject),
-    links: byOrder(state.links).map(linkObject),
-    connections: byOrder(state.connections).map(connectionObject)
-  };
-}
-
-// src/renderInput/fromSfl/endpoint.ts
-function sidePoint(canvasObject, endpoint) {
-  const offset = endpoint.offset ?? 0.5;
-  switch (endpoint.side) {
-    case "top":
-      return { x: canvasObject.x + canvasObject.width * offset, y: canvasObject.y };
-    case "right":
-      return { x: canvasObject.x + canvasObject.width, y: canvasObject.y + canvasObject.height * offset };
-    case "bottom":
-      return { x: canvasObject.x + canvasObject.width * offset, y: canvasObject.y + canvasObject.height };
-    case "left":
-      return { x: canvasObject.x, y: canvasObject.y + canvasObject.height * offset };
-  }
-}
-function namedPortPoint(canvasObject, endpoint) {
-  const port = canvasObject.symbol?.ports?.find((candidate) => candidate.name === endpoint.port);
-  if (!port) {
-    return elementCenter(canvasObject);
-  }
-  return pointAtNormalizedPort(
-    {
-      x: canvasObject.x,
-      y: canvasObject.y,
-      width: canvasObject.width,
-      height: canvasObject.height,
-      rotation: canvasObject.rotation ?? void 0
-    },
-    port.at
-  );
-}
-function resolveLinkEndpoint(link, end, canvasObjects) {
-  const selected = selectLinkEndpoint(link, end);
-  const absolutePoint = explicitAbsolutePoint(selected.explicit);
-  if (absolutePoint) {
-    return absolutePoint;
-  }
-  const canvasObject = findPositionedCanvasObject(canvasObjects, selected.canvasObjectId);
-  if (!canvasObject) {
-    return { x: 0, y: 0 };
-  }
-  const anchoredPoint = explicitAnchorPoint(canvasObject, selected.explicit);
-  if (anchoredPoint) {
-    return anchoredPoint;
-  }
-  return automaticEndpointPoint(
-    canvasObject,
-    findPositionedCanvasObject(canvasObjects, selected.oppositeCanvasObjectId)
-  );
+function resolveLinkEndpoint(link, end, canvasObjects) {
+  const selected = selectLinkEndpoint(link, end);
+  const absolutePoint = explicitAbsolutePoint(selected.explicit);
+  if (absolutePoint) {
+    return absolutePoint;
+  }
+  const canvasObject = findPositionedCanvasObject(canvasObjects, selected.canvasObjectId);
+  if (!canvasObject) {
+    return { x: 0, y: 0 };
+  }
+  const anchoredPoint = explicitAnchorPoint(canvasObject, selected.explicit);
+  if (anchoredPoint) {
+    return anchoredPoint;
+  }
+  return automaticEndpointPoint(
+    canvasObject,
+    findPositionedCanvasObject(canvasObjects, selected.oppositeCanvasObjectId)
+  );
 }
 function selectLinkEndpoint(link, end) {
   return end === "from" ? { canvasObjectId: link.fromId, oppositeCanvasObjectId: link.toId, explicit: link.fromPoint } : { canvasObjectId: link.toId, oppositeCanvasObjectId: link.fromId, explicit: link.toPoint };
@@ -1133,13 +1222,502 @@ function sflToRenderInput(sfl) {
     swimlanes: canvasObjects.swimlanes,
     isometricObjects: canvasObjects.isometricObjects,
     paths: canvasObjects.paths,
+    dimensions: canvasObjects.dimensions,
     charts: canvasObjects.charts,
-    widgets: canvasObjects.widgets,
+    components: canvasObjects.components,
     links: createRenderInputLinks(canvasObjects),
     diagnostics: state.diagnostics
   };
 }
 
+// src/renderScene/artifacts/component/placeholder.ts
+var STROKE = "#94a3b8";
+function buildPlaceholder(component, index) {
+  const x = finite(component.x, 0);
+  const y = finite(component.y, 0);
+  const width = Math.max(0, finite(component.width, 120));
+  const height = Math.max(0, finite(component.height, 60));
+  const rotation = finite(component.rotation, 0);
+  const order = 1e4 + index;
+  const bounds = rotatedBounds({ x, y, width, height }, rotation, 2);
+  return [
+    {
+      id: `widget-${component.id}`,
+      type: "rect",
+      order,
+      bounds,
+      x,
+      y,
+      width,
+      height,
+      rx: 6,
+      rotation,
+      style: { fill: { kind: "none" }, stroke: { kind: "solid", color: STROKE }, strokeWidth: 1, dash: [4, 3] }
+    },
+    {
+      id: `widget-${component.id}-label`,
+      type: "text",
+      order: order + 0.1,
+      bounds,
+      x,
+      y,
+      width,
+      height,
+      lines: [component.type],
+      fontFamily: DEFAULT_FONT,
+      fontSize: 12,
+      fontWeight: "normal",
+      color: STROKE,
+      align: "center",
+      verticalAlign: "middle",
+      lineHeight: 1.3,
+      rotation
+    }
+  ];
+}
+
+// src/renderScene/artifacts/component/builtIn.ts
+function buildRollingNumber(component, index) {
+  const x = finite(component.x, 0);
+  const y = finite(component.y, 0);
+  const width = Math.max(0, finite(component.width, 160));
+  const height = Math.max(0, finite(component.height, 90));
+  const rotation = finite(component.rotation, 0);
+  return [
+    {
+      id: `widget-${component.id}`,
+      type: "rolling-number",
+      order: 1e4 + index,
+      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
+      x,
+      y,
+      width,
+      height,
+      rotation,
+      value: formatRollingNumber(component.value, component.digits),
+      digits: component.digits,
+      duration: Math.max(0, finite(component.duration, 420)),
+      label: component.label,
+      componentStyle: resolveRollingNumberStyle(component.style)
+    }
+  ];
+}
+function buildTickScale(component, index) {
+  const x = finite(component.x, 0);
+  const y = finite(component.y, 0);
+  const width = Math.max(0, finite(component.width, 200));
+  const height = Math.max(0, finite(component.height, 200));
+  const rotation = finite(component.rotation, 0);
+  const max = finite(component.max, 100) || 100;
+  const progress = Math.min(1, Math.max(0, finite(Number(component.value), 0) / max));
+  const nodes = [
+    {
+      id: `widget-${component.id}`,
+      type: "shader-surface",
+      order: 1e4 + index,
+      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
+      x,
+      y,
+      width,
+      height,
+      rotation,
+      shader: { name: component.id, program: "tickScale", parameters: { ...component.parameters, progress, max } },
+      mask: "ellipse"
+    }
+  ];
+  if (component.labels) {
+    nodes.push(...buildTickLabels(component, { x, y, width, height, max, order: 1e4 + index }));
+  }
+  return nodes;
+}
+function buildTickLabels(component, box) {
+  const labels = component.labels ?? {};
+  const ticks = 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;
+  const radius = finite(Number(component.parameters.radius), 0.9) + finite(labels.offset, 0.08);
+  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 nodes = [];
+  for (let step = 0; step <= count; step += 1) {
+    const fraction = step * major / ticks;
+    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);
+    const labelBox = { x: labelX2 - 24, y: labelY - fontSize, width: 48, height: fontSize * 2 };
+    nodes.push({
+      id: `widget-${component.id}-label-${step}`,
+      type: "text",
+      order: box.order + 0.1,
+      bounds: rotatedBounds(labelBox, 0, 2),
+      ...labelBox,
+      lines: [String(Math.round(box.max * fraction * 10) / 10)],
+      fontFamily: labels.fontFamily || DEFAULT_FONT,
+      fontSize,
+      fontWeight: labels.weight ?? "normal",
+      color: labels.color || "#8f95c4",
+      align: "center",
+      verticalAlign: "middle",
+      lineHeight: 1.3
+    });
+  }
+  return nodes;
+}
+function buildRuler(component, index) {
+  const x = finite(component.x, 0);
+  const y = finite(component.y, 0);
+  const width = Math.max(0, finite(component.width, 120));
+  const height = Math.max(0, finite(component.height, 360));
+  const rotation = finite(component.rotation, 0);
+  const min = finite(component.min, 0);
+  const max = finite(component.max, 100);
+  const progress = max === min ? 0 : Math.min(1, Math.max(0, (finite(Number(component.value), min) - min) / (max - min)));
+  const nodes = [
+    {
+      id: `widget-${component.id}`,
+      type: "shader-surface",
+      order: 1e4 + index,
+      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
+      x,
+      y,
+      width,
+      height,
+      rotation,
+      shader: { name: component.id, program: "ruler", parameters: { ...component.parameters, progress, min, max } },
+      mask: "rect"
+    }
+  ];
+  if (component.labels) {
+    nodes.push(...buildRulerLabels(component, { x, y, width, height, min, max, order: 1e4 + index }));
+  }
+  return nodes;
+}
+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 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;
+  const across = horizontal ? box.height : box.width;
+  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 nodes = [];
+  for (let step = 0; step <= count; step += 1) {
+    const fraction = step * major / ticks;
+    const along2 = inset + (1 - 2 * inset) * fraction;
+    const labelBox = horizontal ? { x: box.x + box.width * along2 - 24, y: box.y + edge - fontSize * 2, width: 48, height: fontSize * 2 } : { x: box.x + edge - 48, y: box.y + box.height * (1 - along2) - fontSize, width: 48, height: fontSize * 2 };
+    nodes.push({
+      id: `widget-${component.id}-label-${step}`,
+      type: "text",
+      order: box.order + 0.1,
+      bounds: rotatedBounds(labelBox, 0, 2),
+      ...labelBox,
+      lines: [String(Math.round((box.min + (box.max - box.min) * fraction) * 10) / 10)],
+      fontFamily: labels.fontFamily || DEFAULT_FONT,
+      fontSize,
+      fontWeight: labels.weight ?? "normal",
+      color: labels.color || "#8f95c4",
+      align: horizontal ? "center" : "right",
+      verticalAlign: "middle",
+      lineHeight: 1.3
+    });
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/controlParts.ts
+var DISABLED_INK = "#94a3b8";
+function controlBox(component, index, fallback) {
+  return {
+    x: finite(component.x, 0),
+    y: finite(component.y, 0),
+    width: Math.max(1, finite(component.width, fallback.width)),
+    height: Math.max(1, finite(component.height, fallback.height)),
+    order: 1e4 + index
+  };
+}
+var textProperty = (component, key) => String(component.properties[key] ?? "");
+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;
+}
+function hitArea(component, box) {
+  return {
+    id: `widget-${component.id}`,
+    type: "rect",
+    order: box.order,
+    bounds: rotatedBounds(box, 0, 0),
+    x: box.x,
+    y: box.y,
+    width: box.width,
+    height: box.height,
+    style: { fill: { kind: "none" }, stroke: { kind: "none" }, pointerEvents: "all" }
+  };
+}
+function labelText(component, part, area, label, order) {
+  return {
+    id: `widget-${component.id}-${part}`,
+    type: "text",
+    order,
+    bounds: rotatedBounds(area, 0, 0),
+    x: area.x,
+    y: area.y,
+    width: area.width,
+    height: area.height,
+    lines: [label.text],
+    fontFamily: DEFAULT_FONT,
+    fontSize: label.fontSize,
+    fontWeight: "600",
+    color: label.color,
+    align: label.align,
+    verticalAlign: "middle",
+    lineHeight: 1.3
+  };
+}
+
+// src/renderScene/artifacts/component/button.ts
+function buildButton(component, index) {
+  const box = controlBox(component, index, { width: 120, height: 40 });
+  const nodes = [
+    hitArea(component, box),
+    {
+      id: `widget-${component.id}-face`,
+      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: Math.min(numberProperty2(component, "radius"), box.height / 2),
+      style: fade(component, { fill: solid(textProperty(component, "accent")), stroke: { kind: "none" } })
+    }
+  ];
+  if (component.label) {
+    const label = {
+      text: component.label,
+      color: ink(component, textProperty(component, "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(labelText(component, "label", box, label, box.order + 0.2));
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/checkbox.ts
+var CORNER_RATIO = 0.22;
+var LABEL_GAP_RATIO = 0.5;
+var CHECK_MARK = [
+  [0.24, 0.52],
+  [0.43, 0.72],
+  [0.78, 0.3]
+];
+function checkPath(square) {
+  const [first, ...rest] = CHECK_MARK.map(([u, v]) => `${square.x + u * square.width} ${square.y + v * square.width}`);
+  return `M ${first} ${rest.map((point) => `L ${point}`).join(" ")}`;
+}
+function boxNode(component, box, square) {
+  const on = component.value === true;
+  return {
+    id: `widget-${component.id}-box`,
+    type: "rect",
+    order: box.order + 0.1,
+    bounds: rotatedBounds(square, 0, 2),
+    ...square,
+    rx: square.width * CORNER_RATIO,
+    style: fade(component, {
+      fill: on ? solid(textProperty(component, "accent")) : { kind: "none" },
+      stroke: solid(on ? textProperty(component, "accent") : textProperty(component, "stroke")),
+      strokeWidth: 1.5
+    })
+  };
+}
+function checkNode(component, box, square) {
+  return {
+    id: `widget-${component.id}-check`,
+    type: "path",
+    order: box.order + 0.2,
+    bounds: rotatedBounds(square, 0, 0),
+    d: checkPath(square),
+    style: fade(component, {
+      fill: { kind: "none" },
+      stroke: solid(textProperty(component, "check")),
+      strokeWidth: Math.max(1.5, square.width * 0.12),
+      lineCap: "round",
+      lineJoin: "round"
+    })
+  };
+}
+function labelNode(component, box, side, text) {
+  const gap = side * LABEL_GAP_RATIO;
+  const area = { x: box.x + side + gap, y: box.y, width: Math.max(0, box.width - side - gap), height: box.height };
+  const label = {
+    text,
+    color: ink(component, textProperty(component, "textColor")),
+    fontSize: numberProperty2(component, "fontSize"),
+    align: "left"
+  };
+  return labelText(component, "label", area, label, box.order + 0.3);
+}
+function buildCheckbox(component, index) {
+  const box = controlBox(component, index, { width: 160, height: 24 });
+  const side = Math.min(box.height, box.width);
+  const square = { x: box.x, y: box.y + (box.height - side) / 2, width: side, height: side };
+  return [
+    hitArea(component, box),
+    boxNode(component, box, square),
+    ...component.value === true ? [checkNode(component, box, square)] : [],
+    ...component.label ? [labelNode(component, box, side, component.label)] : []
+  ];
+}
+
+// src/renderScene/artifacts/component/switch.ts
+var PADDING_RATIO = 0.12;
+function buildSwitch(component, index) {
+  const box = controlBox(component, index, { width: 52, height: 30 });
+  const on = component.value === true;
+  const padding = box.height * PADDING_RATIO;
+  const radius = box.height / 2 - padding;
+  const centerX = on ? box.x + box.width - box.height / 2 : box.x + box.height / 2;
+  const thumb = { x: centerX - radius, y: box.y + padding, width: radius * 2, height: radius * 2 };
+  return [
+    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: box.height / 2,
+      style: fade(component, {
+        fill: solid(textProperty(component, on ? "accent" : "track")),
+        stroke: { kind: "none" }
+      })
+    },
+    {
+      id: `widget-${component.id}-thumb`,
+      type: "ellipse",
+      order: box.order + 0.2,
+      bounds: rotatedBounds(thumb, 0, 0),
+      cx: centerX,
+      cy: box.y + box.height / 2,
+      rx: radius,
+      ry: radius,
+      style: fade(component, {
+        fill: solid(textProperty(component, "thumb")),
+        stroke: { kind: "none" },
+        shadow: { color: "#000000", opacity: 0.25, blur: 2, dx: 0, dy: 1 }
+      })
+    }
+  ];
+}
+
+// src/renderScene/artifacts/component/toggleButton.ts
+function buildToggleButton(component, index) {
+  const box = controlBox(component, index, { width: 120, height: 40 });
+  const on = component.value === true;
+  const nodes = [
+    hitArea(component, box),
+    {
+      id: `widget-${component.id}-face`,
+      type: "rect",
+      order: box.order + 0.1,
+      bounds: rotatedBounds(box, 0, 2),
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      rx: box.height / 2,
+      style: fade(component, {
+        fill: on ? solid(textProperty(component, "accent")) : { kind: "none" },
+        stroke: solid(on ? textProperty(component, "accent") : textProperty(component, "stroke")),
+        strokeWidth: 1.5
+      })
+    }
+  ];
+  if (component.label) {
+    const label = {
+      text: component.label,
+      color: ink(component, textProperty(component, on ? "onTextColor" : "textColor")),
+      fontSize: numberProperty2(component, "fontSize"),
+      align: "center"
+    };
+    nodes.push(labelText(component, "label", box, label, box.order + 0.2));
+  }
+  return nodes;
+}
+
+// src/renderScene/artifacts/component/registry.ts
+var asComponentBuilder = (build) => (component, index) => build(component, index);
+var builders = /* @__PURE__ */ new Map([
+  ["rollingNumber", asComponentBuilder(buildRollingNumber)],
+  ["tickScale", asComponentBuilder(buildTickScale)],
+  ["ruler", asComponentBuilder(buildRuler)],
+  ["switch", asComponentBuilder(buildSwitch)],
+  ["checkbox", asComponentBuilder(buildCheckbox)],
+  ["toggleButton", asComponentBuilder(buildToggleButton)],
+  ["button", asComponentBuilder(buildButton)]
+]);
+function registerComponentBuilder(type, builder) {
+  builders.set(type, builder);
+  return () => {
+    if (builders.get(type) === builder) {
+      builders.delete(type);
+    }
+  };
+}
+function getComponentBuilder(type) {
+  return builders.get(type);
+}
+
+// src/renderScene/artifacts/component/build.ts
+function ariaOf(component) {
+  const role = getComponentDescriptor(component.type)?.role;
+  if (!role || !isGenericComponent(component)) {
+    return void 0;
+  }
+  const flag = typeof component.value === "boolean" ? component.value : void 0;
+  return {
+    role,
+    ...flag === void 0 ? {} : role === "button" ? { pressed: flag } : { checked: flag },
+    ...component.disabled ? { disabled: true } : {}
+  };
+}
+function labelOf(component) {
+  return component.label ?? (isGenericComponent(component) ? component.id : String(component.value));
+}
+function buildComponents(components) {
+  return components.flatMap((component, index) => {
+    const build = getComponentBuilder(component.type) ?? buildPlaceholder;
+    const nodes = tag(
+      build(component, index),
+      "widget",
+      component.id,
+      component.type,
+      labelOf(component),
+      component.parentFrameId
+    );
+    const aria = ariaOf(component);
+    const primary = nodes.find((node) => node.identity?.primary);
+    if (aria && primary?.identity) {
+      primary.identity.aria = aria;
+    }
+    return nodes;
+  });
+}
+
 // src/renderScene/artifacts/container/style.ts
 function simpleContainerStyle(fill2, stroke, strokeWidth, dash) {
   return {
@@ -1504,7 +2082,130 @@ function buildContainers(input) {
   ];
 }
 
-// src/renderScene/artifacts/isometric.ts
+// src/model/dimension/geometry.ts
+var GAP = 4;
+var OVERSHOOT = 6;
+var along = (origin, direction, distance) => ({
+  x: origin.x + direction.x * distance,
+  y: origin.y + direction.y * distance
+});
+function dimensionLength(dimension) {
+  return Math.hypot(dimension.end.x - dimension.start.x, dimension.end.y - dimension.start.y);
+}
+function dimensionText(dimension) {
+  if (dimension.text !== void 0) {
+    return dimension.text;
+  }
+  const length = Math.round(dimensionLength(dimension) * 10) / 10;
+  return `${length}${dimension.unit ? ` ${dimension.unit}` : ""}`;
+}
+function dimensionGeometry(dimension) {
+  const length = dimensionLength(dimension);
+  const direction = length === 0 ? { x: 1, y: 0 } : { x: (dimension.end.x - dimension.start.x) / length, y: (dimension.end.y - dimension.start.y) / length };
+  const normal = { x: direction.y, y: -direction.x };
+  const side = dimension.offset < 0 ? -1 : 1;
+  const line = [
+    along(dimension.start, normal, dimension.offset),
+    along(dimension.end, normal, dimension.offset)
+  ];
+  const extensions = Math.abs(dimension.offset) <= GAP ? [] : [dimension.start, dimension.end].map((point) => [
+    along(point, normal, GAP * side),
+    along(point, normal, dimension.offset + OVERSHOOT * side)
+  ]);
+  const lift = ((dimension.fontSize ?? 11) * 0.75 + 2) * side;
+  const middle = { x: (line[0].x + line[1].x) / 2, y: (line[0].y + line[1].y) / 2 };
+  let angle = Math.atan2(direction.y, direction.x) * 180 / Math.PI;
+  if (angle > 90) {
+    angle -= 180;
+  } else if (angle <= -90) {
+    angle += 180;
+  }
+  return { length, line, extensions, label: { center: along(middle, normal, lift), angle } };
+}
+
+// src/renderScene/artifacts/dimension.ts
+var DEFAULT_COLOR = "#475569";
+var CHAR_WIDTH = 0.6;
+var pathData = (segments) => segments.map(([from, to]) => `M ${from.x} ${from.y} L ${to.x} ${to.y}`).join(" ");
+function pathNode(dimension, name, order, segments) {
+  const strokeWidth = Math.max(0, finite(dimension.strokeWidth, 1));
+  const points = segments.flat();
+  return {
+    type: "path",
+    id: `dimension-${dimension.id}-${name}`,
+    order,
+    bounds: {
+      minX: Math.min(...points.map((point) => point.x)) - strokeWidth,
+      minY: Math.min(...points.map((point) => point.y)) - strokeWidth,
+      maxX: Math.max(...points.map((point) => point.x)) + strokeWidth,
+      maxY: Math.max(...points.map((point) => point.y)) + strokeWidth
+    },
+    d: pathData(segments),
+    style: {
+      fill: { kind: "none" },
+      stroke: { kind: "solid", color: dimension.strokeColor ?? DEFAULT_COLOR },
+      strokeWidth,
+      lineCap: "round"
+    }
+  };
+}
+function labelNode2(dimension, order, text, center, angle) {
+  const fontSize = finite(dimension.fontSize, 11);
+  const width = Math.max(24, text.length * fontSize * CHAR_WIDTH + 8);
+  const height = fontSize * 1.3;
+  return {
+    type: "text",
+    id: `dimension-${dimension.id}-label`,
+    order,
+    bounds: {
+      minX: center.x - width / 2,
+      minY: center.y - height / 2,
+      maxX: center.x + width / 2,
+      maxY: center.y + height / 2
+    },
+    x: center.x - width / 2,
+    y: center.y - height / 2,
+    width,
+    height,
+    lines: [text],
+    fontFamily: DEFAULT_FONT,
+    fontSize,
+    fontWeight: "normal",
+    color: dimension.textColor ?? dimension.strokeColor ?? DEFAULT_COLOR,
+    align: "center",
+    verticalAlign: "middle",
+    lineHeight: 1.2,
+    rotation: angle,
+    rotationCenter: center
+  };
+}
+function buildDimension(dimension, index) {
+  const geometry = dimensionGeometry(dimension);
+  const order = 31e3 + index;
+  const line = {
+    ...pathNode(dimension, "line", order + 0.1, [geometry.line]),
+    markerStart: "filled_arrow",
+    markerEnd: "filled_arrow"
+  };
+  const extensions = geometry.extensions.length > 0 ? [pathNode(dimension, "extensions", order, geometry.extensions)] : [];
+  const text = dimensionText(dimension);
+  return [...extensions, line, labelNode2(dimension, order + 0.2, text, geometry.label.center, geometry.label.angle)];
+}
+function buildDimensions(dimensions) {
+  return dimensions.flatMap(
+    (dimension, index) => tag(
+      buildDimension(dimension, index),
+      "dimension",
+      dimension.id,
+      "dimension",
+      dimensionText(dimension),
+      dimension.parentFrameId
+    )
+  );
+}
+
+// src/renderScene/artifacts/isometric/context.ts
+var FILL_PROP = { prop: "style.fill", propKind: "color", propSolidOnly: true };
 function isometricContext(object, index) {
   const strokeWidth = Math.max(0, finite(object.strokeWidth, 1));
   const rotation = finite(object.rotation, 0);
@@ -1529,85 +2230,22 @@ function isometricContext(object, index) {
         lineJoin: "round"
       }
     }
-  };
-}
-function groundShadowNode(context, faces) {
-  const { object, index, rotation, rotationCenter } = context;
-  if (!object.hasShadow) {
-    return void 0;
-  }
-  const height = Math.max(0, object.height);
-  const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
-  const shadowDrop = height + finite(object.shadowStyle?.distance, 0);
-  const contactFootprint = faces.top.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
-  const footprintCenter = {
-    x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
-    y: contactFootprint.reduce((sum, point) => sum + point.y, 0) / contactFootprint.length
-  };
-  const shadowSpread = 1.3;
-  const footprint = contactFootprint.map((point) => ({
-    x: footprintCenter.x + (point.x - footprintCenter.x) * shadowSpread,
-    y: footprintCenter.y + (point.y - footprintCenter.y) * shadowSpread
-  }));
-  const footprintXs = footprint.map((point) => point.x);
-  const footprintYs = footprint.map((point) => point.y);
-  return {
-    type: "path",
-    id: `isometric-${object.id}-ground-shadow`,
-    order: 14e3 + index,
-    bounds: {
-      minX: Math.min(...footprintXs),
-      minY: Math.min(...footprintYs),
-      maxX: Math.max(...footprintXs),
-      maxY: Math.max(...footprintYs)
-    },
-    d: roundedPolygonPath(footprint, 0),
-    rotation,
-    rotationCenter,
-    style: {
-      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
-      stroke: { kind: "none" },
-      opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
-      blur: finite(object.shadowStyle?.blur, 8),
-      pointerEvents: "none"
-    }
-  };
-}
-function faceNodes(context, faces, hullClip) {
-  const { object, order, common } = context;
-  const noStroke = { ...common.style, stroke: { kind: "none" } };
-  const faceFills = deriveFaceFills(object.fill ?? "#f8fafc");
-  const colorProp = { prop: "style.fill", propKind: "color", propSolidOnly: true };
-  const face = (name, offset, points, color2) => ({
-    ...common,
-    id: `isometric-${object.id}-${name}`,
-    order: order + offset,
-    d: roundedPolygonPath(points, 0),
-    style: { ...noStroke, fill: { kind: "solid", color: color2 }, clip: hullClip },
-    ...colorProp
-  });
-  return [
-    face("top", 0, faces.top, faceFills.topFill),
-    face("front", 0.1, faces.front, faceFills.frontFill),
-    face("side", 0.2, faces.right, faceFills.sideFill)
-  ];
+  };
 }
-function seamsNode(context, faces, hullClip) {
-  const { object, order, common, strokeWidth } = context;
+function faceNode(context, name, offset, points, style) {
   return {
-    ...common,
-    id: `isometric-${object.id}-seams`,
-    order: order + 0.22,
-    d: `M ${faces.top[3].x} ${faces.top[3].y} L ${faces.top[2].x} ${faces.top[2].y} L ${faces.top[1].x} ${faces.top[1].y} M ${faces.top[2].x} ${faces.top[2].y} L ${faces.front[2].x} ${faces.front[2].y}`,
-    style: {
-      ...common.style,
-      fill: { kind: "none" },
-      stroke: { kind: "solid", color: "#cbd5e1" },
-      strokeWidth: Math.min(strokeWidth, 1),
-      clip: hullClip
-    }
+    ...context.common,
+    id: `isometric-${context.object.id}-${name}`,
+    order: context.order + offset,
+    d: roundedPolygonPath([...points], 0),
+    style,
+    ...FILL_PROP
   };
 }
+function silhouette(object) {
+  const faces = isometricFaces(object);
+  return [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
+}
 function hullNode(context, hullPath, cornerRadius) {
   const { object, order, common, box } = context;
   return {
@@ -1628,6 +2266,14 @@ function hullNode(context, hullPath, cornerRadius) {
     style: { ...common.style, fill: { kind: "none" } }
   };
 }
+function unseenHullNode(context) {
+  return {
+    ...hullNode(context, roundedPolygonPath(silhouette(context.object), 0), 0),
+    style: { ...context.common.style, fill: { kind: "none" }, stroke: { kind: "none" } }
+  };
+}
+
+// src/renderScene/artifacts/isometric/label.ts
 var LABEL_HEIGHT = 20;
 var LABEL_GAP = 12;
 var LABEL_PADDING_X = 6;
@@ -1723,20 +2369,232 @@ function labelNodes(context, text) {
   }
   return [guide, labelBackgroundNode(context, placement, text, background), label];
 }
-function buildIsometricObject(object, index) {
+
+// src/renderScene/artifacts/isometric/shadow.ts
+function groundShadowNode(context, topOutline) {
+  const { object, index, rotation, rotationCenter } = context;
+  if (!object.hasShadow) {
+    return void 0;
+  }
+  const height = Math.max(0, object.height);
+  const heightFactor = 0.6 + Math.min(1, height / 150) * 0.7;
+  const shadowDrop = height + finite(object.shadowStyle?.distance, 0);
+  const contactFootprint = topOutline.map((point) => ({ x: point.x, y: point.y + shadowDrop }));
+  const footprintCenter = {
+    x: contactFootprint.reduce((sum, point) => sum + point.x, 0) / contactFootprint.length,
+    y: contactFootprint.reduce((sum, point) => sum + point.y, 0) / contactFootprint.length
+  };
+  const shadowSpread = 1.3;
+  const footprint = contactFootprint.map((point) => ({
+    x: footprintCenter.x + (point.x - footprintCenter.x) * shadowSpread,
+    y: footprintCenter.y + (point.y - footprintCenter.y) * shadowSpread
+  }));
+  const footprintXs = footprint.map((point) => point.x);
+  const footprintYs = footprint.map((point) => point.y);
+  return {
+    type: "path",
+    id: `isometric-${object.id}-ground-shadow`,
+    order: 14e3 + index,
+    bounds: {
+      minX: Math.min(...footprintXs),
+      minY: Math.min(...footprintYs),
+      maxX: Math.max(...footprintXs),
+      maxY: Math.max(...footprintYs)
+    },
+    d: roundedPolygonPath(footprint, 0),
+    rotation,
+    rotationCenter,
+    style: {
+      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
+      stroke: { kind: "none" },
+      opacity: Math.min(1, (object.shadowStyle?.opacity ?? 0.18) * heightFactor),
+      blur: finite(object.shadowStyle?.blur, 8),
+      pointerEvents: "none"
+    }
+  };
+}
+function sphereShadowNode(context, radius) {
+  const { object, index, box } = context;
+  if (!object.hasShadow) {
+    return void 0;
+  }
+  const width = Math.max(0, object.width);
+  const depth = Math.max(0, object.depth);
+  const center = {
+    x: box.x + box.width / 2,
+    y: object.y + Math.max(0, object.height) + (width + depth) * AXIS_SIN / 2
+  };
+  return {
+    type: "ellipse",
+    id: `isometric-${object.id}-ground-shadow`,
+    order: 14e3 + index,
+    bounds: {
+      minX: center.x - radius * 1.1,
+      minY: center.y - radius * 0.6,
+      maxX: center.x + radius * 1.1,
+      maxY: center.y + radius * 0.6
+    },
+    cx: center.x,
+    cy: center.y,
+    rx: radius * 1.05,
+    ry: radius * 0.52,
+    style: {
+      fill: { kind: "solid", color: object.shadowStyle?.color ?? "#000000" },
+      stroke: { kind: "none" },
+      opacity: object.shadowStyle?.opacity ?? 0.2,
+      blur: finite(object.shadowStyle?.blur, 8),
+      pointerEvents: "none"
+    }
+  };
+}
+
+// src/renderScene/artifacts/isometric/box.ts
+function faceNodes(context, faces, hullClip) {
+  const { object, common } = context;
+  const noStroke = { ...common.style, stroke: { kind: "none" } };
+  const fills = deriveFaceFills(object.fill ?? "#f8fafc");
+  const face = (name, offset, points, color) => faceNode(context, name, offset, points, { ...noStroke, fill: { kind: "solid", color }, clip: hullClip });
+  return [
+    face("top", 0, faces.top, fills.topFill),
+    face("front", 0.1, faces.front, fills.frontFill),
+    face("side", 0.2, faces.right, fills.sideFill)
+  ];
+}
+function seamsNode(context, faces, hullClip) {
+  const { object, order, common, strokeWidth } = context;
+  return {
+    ...common,
+    id: `isometric-${object.id}-seams`,
+    order: order + 0.22,
+    d: `M ${faces.top[3].x} ${faces.top[3].y} L ${faces.top[2].x} ${faces.top[2].y} L ${faces.top[1].x} ${faces.top[1].y} M ${faces.top[2].x} ${faces.top[2].y} L ${faces.front[2].x} ${faces.front[2].y}`,
+    style: {
+      ...common.style,
+      fill: { kind: "none" },
+      stroke: { kind: "solid", color: "#cbd5e1" },
+      strokeWidth: Math.min(strokeWidth, 1),
+      clip: hullClip
+    }
+  };
+}
+function buildBox(object, index) {
   const context = isometricContext(object, index);
   const faces = isometricFaces(object);
   const cornerRadius = Math.max(0, finite(object.cornerRadius, 8));
-  const silhouette = [faces.top[0], faces.top[1], faces.right[2], faces.front[2], faces.front[3], faces.top[3]];
-  const hullPath = roundedPolygonPath(silhouette, cornerRadius);
+  const hullPath = roundedPolygonPath(silhouette(object), cornerRadius);
   const hullClip = { type: "path", d: hullPath };
-  const groundShadow = groundShadowNode(context, faces);
+  const groundShadow = groundShadowNode(context, faces.top);
   const seams = seamsNode(context, faces, hullClip);
   const hull = hullNode(context, hullPath, cornerRadius);
   const facesNodes = faceNodes(context, faces, hullClip);
   const objectNodes = groundShadow ? [hull, ...facesNodes, groundShadow, seams] : [hull, ...facesNodes, seams];
   return object.text ? [...objectNodes, ...labelNodes(context, object.text)] : objectNodes;
 }
+
+// src/renderScene/artifacts/isometric/extruded.ts
+function wallNode(context, side, index, fill2) {
+  const color = shadeFill(fill2, side.light);
+  return faceNode(context, `side-${index}`, 0.05 + index * 1e-3, side.points, {
+    ...context.common.style,
+    stroke: { kind: "solid", color },
+    strokeWidth: 0.6,
+    fill: { kind: "solid", color }
+  });
+}
+function wallEdgesNode(context, side, index) {
+  const [topFrom, topTo, bottomTo, bottomFrom] = side.points;
+  const lines = [
+    `M ${bottomFrom.x} ${bottomFrom.y} L ${bottomTo.x} ${bottomTo.y}`,
+    ...side.smoothStart ? [] : [`M ${topFrom.x} ${topFrom.y} L ${bottomFrom.x} ${bottomFrom.y}`],
+    ...side.smoothEnd ? [] : [`M ${topTo.x} ${topTo.y} L ${bottomTo.x} ${bottomTo.y}`]
+  ];
+  return {
+    ...context.common,
+    id: `isometric-${context.object.id}-side-${index}-edges`,
+    order: context.order + 0.0505 + index * 1e-3,
+    d: lines.join(" "),
+    style: { ...context.common.style, fill: { kind: "none" } }
+  };
+}
+function buildExtruded(object, index, footprint) {
+  const context = isometricContext(object, index);
+  const { top, sides } = extrudeFootprint(object, footprint, Math.max(0, finite(object.cornerRadius, 0)));
+  const fill2 = object.fill ?? "#f8fafc";
+  const groundShadow = groundShadowNode(context, top);
+  const topFace = faceNode(context, "top", 0.2, top, { ...context.common.style, fill: { kind: "solid", color: fill2 } });
+  const nodes = [
+    unseenHullNode(context),
+    ...groundShadow ? [groundShadow] : [],
+    ...sides.flatMap((side, i) => [wallNode(context, side, i, fill2), wallEdgesNode(context, side, i)]),
+    topFace
+  ];
+  return object.text ? [...nodes, ...labelNodes(context, object.text)] : nodes;
+}
+
+// src/renderScene/artifacts/isometric/sphere.ts
+function buildSphere(object, index) {
+  const context = isometricContext(object, index);
+  const { order, common, box } = context;
+  const radius = Math.max(0, Math.min(object.width, object.height, object.depth)) / 2;
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const fill2 = object.fill ?? "#f8fafc";
+  const bounds = { minX: cx - radius, minY: cy - radius, maxX: cx + radius, maxY: cy + radius };
+  const body = {
+    type: "ellipse",
+    id: `isometric-${object.id}-sphere`,
+    order: order + 0.1,
+    bounds,
+    cx,
+    cy,
+    rx: radius,
+    ry: radius,
+    style: {
+      ...common.style,
+      fill: {
+        kind: "linear-gradient",
+        angle: 135,
+        stops: [
+          { offset: 0, color: shadeFill(fill2, 1.22) },
+          { offset: 0.5, color: fill2 },
+          { offset: 1, color: shadeFill(fill2, 0.82) }
+        ]
+      }
+    },
+    prop: "style.fill",
+    propKind: "color",
+    propSolidOnly: true
+  };
+  const highlight = {
+    type: "ellipse",
+    id: `isometric-${object.id}-highlight`,
+    order: order + 0.2,
+    bounds,
+    cx: cx - radius * 0.32,
+    cy: cy - radius * 0.38,
+    rx: radius * 0.26,
+    ry: radius * 0.18,
+    rotation: -35,
+    style: {
+      fill: { kind: "solid", color: "#ffffff" },
+      stroke: { kind: "none" },
+      opacity: 0.45,
+      blur: radius * 0.1,
+      pointerEvents: "none"
+    }
+  };
+  const shadow = sphereShadowNode(context, radius);
+  const nodes = [unseenHullNode(context), ...shadow ? [shadow] : [], body, highlight];
+  return object.text ? [...nodes, ...labelNodes(context, object.text)] : nodes;
+}
+
+// src/renderScene/artifacts/isometric/index.ts
+function buildIsometricObject(object, index) {
+  if (object.form === "sphere") {
+    return buildSphere(object, index);
+  }
+  const footprint = cleanFootprint(object.footprint);
+  return footprint.length > 0 ? buildExtruded(object, index, footprint) : buildBox(object, index);
+}
 function buildIsometricObjects(objects) {
   return objects.flatMap(
     (object, index) => tag(
@@ -1872,13 +2730,13 @@ function labelLayout(link, measureText) {
   const lines = visible ? wrapText(link.text ?? "", width, fontSize, metrics) : [];
   return { visible, fontSize, width, height: lines.length * fontSize * 1.4, lines };
 }
-function linkStyle(item, strokeWidth, color2, dash) {
+function linkStyle(item, strokeWidth, color, dash) {
   const link = item.link;
   const stroke = typeof link.style?.color === "object" && link.style.color.type === "gradient" ? {
     kind: "linear-gradient",
     angle: 0,
     stops: link.style.color.stops.map((stop) => ({ offset: stop.position, color: stop.color }))
-  } : { kind: "solid", color: color2 };
+  } : { kind: "solid", color };
   return {
     fill: { kind: "none" },
     stroke,
@@ -1895,7 +2753,7 @@ function createLinkRenderContext(item, index, measureText) {
   const pathType = link.style?.pathType ?? "orthogonal";
   const { points, segments } = calculateLinkRoute(link, from, to, pathType);
   const strokeWidth = finite(link.style?.strokeWidth, 2);
-  const color2 = getLinkStrokeColor(link.style?.color) || "#64748b";
+  const color = getLinkStrokeColor(link.style?.color) || "#64748b";
   const label = labelLayout(link, measureText);
   const contentDash = getDashArray(strokeWidth, link.style?.strokeStyle ?? "solid");
   const gap = label.visible && !contentDash ? labelGapDash(points, pathType, label.width, label.height) : null;
@@ -1908,9 +2766,9 @@ function createLinkRenderContext(item, index, measureText) {
     midpoint: getLineMidpoint(points, pathType, from, to),
     strokeWidth,
     bounds: linkBounds(points, strokeWidth + 14),
-    color: color2,
+    color,
     order: 2e4 + index,
-    style: linkStyle(item, strokeWidth, color2, dash),
+    style: linkStyle(item, strokeWidth, color, dash),
     label,
     hasLabelGap: Boolean(gap)
   };
@@ -1943,7 +2801,7 @@ function polylinePathData(points) {
   }
   return path;
 }
-function pathData(points, pathType, segments, strokeWidth) {
+function pathData2(points, pathType, segments, strokeWidth) {
   if (points.length < 4) {
     return "";
   }
@@ -1977,7 +2835,7 @@ function renderLinkPath(context) {
     id: `link-${link.id}`,
     order: context.order,
     bounds: context.bounds,
-    d: pathData(context.points, context.pathType, context.segments, context.strokeWidth),
+    d: pathData2(context.points, context.pathType, context.segments, context.strokeWidth),
     style: context.style,
     markerStart: markerForEnd(link, "start"),
     markerEnd: markerForEnd(link, "end"),
@@ -2510,211 +3368,6 @@ function buildShapes(shapes, diagnostics, measureText) {
   );
 }
 
-// src/model/widget/format.ts
-function formatRollingNumber(value, digits) {
-  const text = String(value);
-  if (digits === void 0) {
-    return text;
-  }
-  if (!Number.isInteger(digits) || digits < 1) {
-    return text;
-  }
-  return text.padStart(digits, "0");
-}
-
-// src/model/widget/theme.ts
-var DEFAULT_ROLLING_NUMBER_STYLE = {
-  color: "#000000",
-  surface: "rgba(255, 255, 255, 0.28)",
-  divider: "rgba(0, 0, 0, 0.2)",
-  labelColor: "rgba(0, 0, 0, 0.62)",
-  fontFamily: "'Roboto Mono', 'SFMono-Regular', Consolas, monospace",
-  variant: "flip",
-  motion: "roll",
-  fontWeight: "300",
-  fontSize: 0
-};
-function resolveRollingNumberStyle(style) {
-  return {
-    color: style.color ?? DEFAULT_ROLLING_NUMBER_STYLE.color,
-    surface: style.surface ?? DEFAULT_ROLLING_NUMBER_STYLE.surface,
-    divider: style.divider ?? DEFAULT_ROLLING_NUMBER_STYLE.divider,
-    labelColor: style.labelColor ?? DEFAULT_ROLLING_NUMBER_STYLE.labelColor,
-    fontFamily: style.fontFamily ?? DEFAULT_ROLLING_NUMBER_STYLE.fontFamily,
-    variant: style.variant ?? DEFAULT_ROLLING_NUMBER_STYLE.variant,
-    motion: style.motion ?? DEFAULT_ROLLING_NUMBER_STYLE.motion,
-    fontWeight: style.fontWeight ?? DEFAULT_ROLLING_NUMBER_STYLE.fontWeight,
-    fontSize: style.fontSize ?? DEFAULT_ROLLING_NUMBER_STYLE.fontSize
-  };
-}
-
-// src/renderScene/artifacts/widget.ts
-function buildRollingNumber(widget, index) {
-  const x = finite(widget.x, 0);
-  const y = finite(widget.y, 0);
-  const width = Math.max(0, finite(widget.width, 160));
-  const height = Math.max(0, finite(widget.height, 90));
-  const rotation = finite(widget.rotation, 0);
-  return [
-    {
-      id: `widget-${widget.id}`,
-      type: "rolling-number",
-      order: 1e4 + index,
-      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
-      x,
-      y,
-      width,
-      height,
-      rotation,
-      value: formatRollingNumber(widget.value, widget.digits),
-      digits: widget.digits,
-      duration: Math.max(0, finite(widget.duration, 420)),
-      label: widget.label,
-      widgetStyle: resolveRollingNumberStyle(widget.style)
-    }
-  ];
-}
-function buildTickScale(widget, index) {
-  const x = finite(widget.x, 0);
-  const y = finite(widget.y, 0);
-  const width = Math.max(0, finite(widget.width, 200));
-  const height = Math.max(0, finite(widget.height, 200));
-  const rotation = finite(widget.rotation, 0);
-  const max = finite(widget.max, 100) || 100;
-  const progress = Math.min(1, Math.max(0, finite(Number(widget.value), 0) / max));
-  const nodes = [
-    {
-      id: `widget-${widget.id}`,
-      type: "shader-surface",
-      order: 1e4 + index,
-      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
-      x,
-      y,
-      width,
-      height,
-      rotation,
-      shader: { name: widget.id, program: "tickScale", parameters: { ...widget.parameters, progress, max } },
-      mask: "ellipse"
-    }
-  ];
-  if (widget.labels) {
-    nodes.push(...buildTickLabels(widget, { x, y, width, height, max, order: 1e4 + index }));
-  }
-  return nodes;
-}
-function buildTickLabels(widget, box) {
-  const labels = widget.labels ?? {};
-  const ticks = Math.max(1, finite(Number(widget.parameters.ticks), 48));
-  const major = Math.max(1, finite(Number(widget.parameters.major), 5));
-  const start = finite(Number(widget.parameters.start), 225) * Math.PI / 180;
-  const sweep = finite(Number(widget.parameters.sweep), 270) * Math.PI / 180;
-  const radius = finite(Number(widget.parameters.radius), 0.9) + finite(labels.offset, 0.08);
-  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 nodes = [];
-  for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
-    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);
-    const labelBox = { x: labelX2 - 24, y: labelY - fontSize, width: 48, height: fontSize * 2 };
-    nodes.push({
-      id: `widget-${widget.id}-label-${step}`,
-      type: "text",
-      order: box.order + 0.1,
-      bounds: rotatedBounds(labelBox, 0, 2),
-      ...labelBox,
-      lines: [String(Math.round(box.max * fraction * 10) / 10)],
-      fontFamily: labels.fontFamily || DEFAULT_FONT,
-      fontSize,
-      fontWeight: labels.weight ?? "normal",
-      color: labels.color || "#8f95c4",
-      align: "center",
-      verticalAlign: "middle",
-      lineHeight: 1.3
-    });
-  }
-  return nodes;
-}
-function buildRuler(widget, index) {
-  const x = finite(widget.x, 0);
-  const y = finite(widget.y, 0);
-  const width = Math.max(0, finite(widget.width, 120));
-  const height = Math.max(0, finite(widget.height, 360));
-  const rotation = finite(widget.rotation, 0);
-  const min = finite(widget.min, 0);
-  const max = finite(widget.max, 100);
-  const progress = max === min ? 0 : Math.min(1, Math.max(0, (finite(Number(widget.value), min) - min) / (max - min)));
-  const nodes = [
-    {
-      id: `widget-${widget.id}`,
-      type: "shader-surface",
-      order: 1e4 + index,
-      bounds: rotatedBounds({ x, y, width, height }, rotation, 2),
-      x,
-      y,
-      width,
-      height,
-      rotation,
-      shader: { name: widget.id, program: "ruler", parameters: { ...widget.parameters, progress, min, max } },
-      mask: "rect"
-    }
-  ];
-  if (widget.labels) {
-    nodes.push(...buildRulerLabels(widget, { x, y, width, height, min, max, order: 1e4 + index }));
-  }
-  return nodes;
-}
-function buildRulerLabels(widget, box) {
-  const labels = widget.labels ?? {};
-  const horizontal = widget.parameters.axis === "horizontal";
-  const ticks = Math.max(1, finite(Number(widget.parameters.ticks), 50));
-  const major = Math.max(1, finite(Number(widget.parameters.major), 5));
-  const inset = finite(Number(widget.parameters.inset), 0.05) > 0 ? finite(Number(widget.parameters.inset), 0.05) : 0.05;
-  const line = finite(Number(widget.parameters.line), 0.7) > 0 ? finite(Number(widget.parameters.line), 0.7) : 0.7;
-  const across = horizontal ? box.height : box.width;
-  const tickLength = (finite(Number(widget.parameters.length), 0.1) > 0 ? finite(Number(widget.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 nodes = [];
-  for (let step = 0; step <= count; step += 1) {
-    const fraction = step * major / ticks;
-    const along = inset + (1 - 2 * inset) * fraction;
-    const labelBox = horizontal ? { x: box.x + box.width * along - 24, y: box.y + edge - fontSize * 2, width: 48, height: fontSize * 2 } : { x: box.x + edge - 48, y: box.y + box.height * (1 - along) - fontSize, width: 48, height: fontSize * 2 };
-    nodes.push({
-      id: `widget-${widget.id}-label-${step}`,
-      type: "text",
-      order: box.order + 0.1,
-      bounds: rotatedBounds(labelBox, 0, 2),
-      ...labelBox,
-      lines: [String(Math.round((box.min + (box.max - box.min) * fraction) * 10) / 10)],
-      fontFamily: labels.fontFamily || DEFAULT_FONT,
-      fontSize,
-      fontWeight: labels.weight ?? "normal",
-      color: labels.color || "#8f95c4",
-      align: horizontal ? "center" : "right",
-      verticalAlign: "middle",
-      lineHeight: 1.3
-    });
-  }
-  return nodes;
-}
-function buildWidgets(widgets) {
-  return widgets.flatMap(
-    (widget, index) => tag(
-      widget.type === "tickScale" ? buildTickScale(widget, index) : widget.type === "ruler" ? buildRuler(widget, index) : buildRollingNumber(widget, index),
-      "widget",
-      widget.id,
-      widget.type,
-      widget.label ?? widget.value,
-      widget.parentFrameId
-    )
-  );
-}
-
 // src/renderScene/charts/decorations/axisLabels.ts
 function buildXAxisLabel(chart, layout, order) {
   if (!chart.axisX.label) {
@@ -2869,7 +3522,7 @@ function createLegendSwatch(render2, item) {
   const { chart, bounds, diagnostics } = render2;
   const fallback = CHART_COLORS[item.seriesIndex % CHART_COLORS.length];
   const solidOnly = chart.chartType === "line";
-  const color2 = solidOnly ? representativeColor(item.series.color, fallback) : item.series.color ?? fallback;
+  const color = solidOnly ? representativeColor(item.series.color, fallback) : item.series.color ?? fallback;
   return {
     type: "rect",
     id: `chart-legend-swatch-${chart.id}-${item.series.id}`,
@@ -2883,7 +3536,7 @@ function createLegendSwatch(render2, item) {
     prop: seriesColorProp(item.series.id),
     propKind: "color",
     propSolidOnly: solidOnly,
-    style: { fill: paint(color2, diagnostics, chart.id) }
+    style: { fill: paint(color, diagnostics, chart.id) }
   };
 }
 function createLegendLabel(render2, item) {
@@ -3614,7 +4267,7 @@ function createGlassBackdropNodes(context, id, d) {
 }
 
 // src/renderScene/charts/renderers/bar/glow.ts
-function createBarGlowNode(context, id, d, color2, glow, bounds = context.bounds) {
+function createBarGlowNode(context, id, d, color, glow, bounds = context.bounds) {
   const { chart, diagnostics, nextOrder } = context;
   return {
     type: "path",
@@ -3623,8 +4276,8 @@ function createBarGlowNode(context, id, d, color2, glow, bounds = context.bounds
     bounds,
     d,
     style: {
-      fill: paint(color2, diagnostics, chart.id),
-      shadow: { color: representativeColor(color2, "#ffffff"), opacity: 0.9, blur: glow, dx: 0, dy: 0 },
+      fill: paint(color, diagnostics, chart.id),
+      shadow: { color: representativeColor(color, "#ffffff"), opacity: 0.9, blur: glow, dx: 0, dy: 0 },
       pointerEvents: "none"
     }
   };
@@ -3644,7 +4297,7 @@ function labelTop(placement, frame, height) {
   }
   return placement === "inside" ? frame.y + BAR_LABEL.gap : frame.y + frame.height / 2 - height / 2;
 }
-function createPillNode(context, id, box, color2) {
+function createPillNode(context, id, box, color) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   const config = chart.config;
   return {
@@ -3655,13 +4308,13 @@ function createPillNode(context, id, box, color2) {
     d: pillPath(box.left, box.top, box.width, box.height),
     style: {
       fill: config?.barLabelPillColor ? paint(config.barLabelPillColor, diagnostics, chart.id) : { kind: "none" },
-      stroke: paint(config?.barLabelBorderColor ?? color2, diagnostics, chart.id),
+      stroke: paint(config?.barLabelBorderColor ?? color, diagnostics, chart.id),
       strokeWidth: finite(config?.barLabelBorderWidth, 1),
       pointerEvents: "none"
     }
   };
 }
-function createTextNode(context, id, box, text, placement, fontSize, color2) {
+function createTextNode(context, id, box, text, placement, fontSize, color) {
   const { chart, bounds, nextOrder } = context;
   const config = chart.config;
   return {
@@ -3675,7 +4328,7 @@ function createTextNode(context, id, box, text, placement, fontSize, color2) {
       align: "center"
     }),
     mark: `bar-label|${placement}|${config?.barLabelFormat ?? ""}`,
-    color: color2,
+    color,
     fontSize,
     fontFamily: config?.barLabelFontFamily ?? chart.fontFamily ?? "Inter, sans-serif",
     fontWeight: config?.barLabelFontWeight ?? "normal"
@@ -3733,12 +4386,12 @@ function createBarLabelNodes(context, target) {
     left: target.frame.x + target.frame.width / 2 - size.width / 2,
     top: labelTop(placement, target.frame, size.height)
   };
-  const color2 = config?.barLabelColor ?? chart.textColor ?? "#0f172a";
+  const color = config?.barLabelColor ?? chart.textColor ?? "#0f172a";
   const nodes = [];
   if (pill) {
-    nodes.push(createPillNode(context, target.id, box, color2));
+    nodes.push(createPillNode(context, target.id, box, color));
   }
-  nodes.push(createTextNode(context, target.id, box, text, placement, fontSize, color2));
+  nodes.push(createTextNode(context, target.id, box, text, placement, fontSize, color));
   return nodes;
 }
 
@@ -4474,12 +5127,12 @@ function renderBoxplotSeries(context, layout, series, seriesIndex) {
     return [];
   }
   const geometry = createBoxplotGeometry(context, layout, seriesIndex, stats);
-  const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+  const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
   const mark = {
     id: `${context.chart.id}-${series.id}`,
     series,
     seriesIndex,
-    color: color2,
+    color,
     geometry
   };
   const nodes = renderBoxAndWhiskers(context, layout, mark);
@@ -4541,9 +5194,9 @@ function customPointPosition(context, value) {
   };
 }
 function customSeriesStyle(context, series, seriesIndex) {
-  const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+  const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
   return {
-    fill: paint(color2, context.diagnostics, context.chart.id),
+    fill: paint(color, context.diagnostics, context.chart.id),
     stroke: series.stroke ? { kind: "solid", color: series.stroke } : void 0,
     strokeWidth: series.stroke ? finite(series.strokeWidth, 1) : void 0
   };
@@ -4642,7 +5295,7 @@ function connectorDash(text) {
   const parts = (text ?? "").split(/[ ,]+/).map(Number).filter((part) => Number.isFinite(part) && part > 0);
   return parts.length > 0 ? parts : void 0;
 }
-function createConnectorLine(context, index, from, to, color2) {
+function createConnectorLine(context, index, from, to, color) {
   const { chart } = context;
   return {
     type: "path",
@@ -4652,7 +5305,7 @@ function createConnectorLine(context, index, from, to, color2) {
     d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
     style: {
       fill: { kind: "none" },
-      stroke: { kind: "solid", color: color2 },
+      stroke: { kind: "solid", color },
       strokeWidth: finite(chart.config?.customConnectorWidth, 2),
       opacity: chart.config?.customConnectorOpacity,
       dash: connectorDash(chart.config?.customConnectorDash)
@@ -4956,7 +5609,7 @@ function createFieldCell(context, grid, row, column) {
   const { chart, plot, bounds, nextOrder } = context;
   const centerX = plot.x + plot.width * (column / (grid.columns - 1));
   const centerY = plot.y + plot.height * (row / (grid.rows - 1));
-  const color2 = colorAtRamp(chart.config?.scale, grid.values[row * grid.columns + column]);
+  const color = colorAtRamp(chart.config?.scale, grid.values[row * grid.columns + column]);
   return {
     type: "rect",
     id: `chart-field-cell-${chart.id}-${row}-${column}`,
@@ -4966,7 +5619,7 @@ function createFieldCell(context, grid, row, column) {
     y: centerY - grid.cellHeight / 2,
     width: grid.cellWidth,
     height: grid.cellHeight,
-    style: { fill: { kind: "solid", color: color2 }, clip: fieldSurfaceClip(chart, plot) }
+    style: { fill: { kind: "solid", color }, clip: fieldSurfaceClip(chart, plot) }
   };
 }
 function renderIsolines(context, grid) {
@@ -5020,14 +5673,14 @@ function createIsoline(context, grid, threshold, thresholdIndex) {
 function renderVectorField(context, seriesList) {
   const nodes = [];
   seriesList.forEach((series, seriesIndex) => {
-    const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+    const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
     series.values.forEach((vector, vectorIndex) => {
-      nodes.push(createVectorNode(context, series.id, vector, vectorIndex, color2));
+      nodes.push(createVectorNode(context, series.id, vector, vectorIndex, color));
     });
   });
   return nodes;
 }
-function createVectorNode(context, seriesId, vector, vectorIndex, color2) {
+function createVectorNode(context, seriesId, vector, vectorIndex, color) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const [x, y, angle, magnitude] = vector;
   const startX = plot.x + mapChartValue(x, chart.axisX, plot.width);
@@ -5043,7 +5696,7 @@ function createVectorNode(context, seriesId, vector, vectorIndex, color2) {
     markerEnd: "filled_arrow",
     style: {
       fill: { kind: "none" },
-      stroke: paint(color2, diagnostics, chart.id),
+      stroke: paint(color, diagnostics, chart.id),
       strokeWidth: 2
     }
   };
@@ -5697,11 +6350,11 @@ function renderHexbin(context) {
     }));
     const bins = computeHexBins(pixelPoints2, hexRadius);
     const maxCount = Math.max(1, ...bins.map((bin) => bin.count));
-    const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+    const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
     const ramp = config?.scale;
     bins.forEach((bin, i) => {
       const share = bin.count / maxCount;
-      const fill2 = ramp ? colorAtRamp(ramp, share) : color2;
+      const fill2 = ramp ? colorAtRamp(ramp, share) : color;
       nodes.push({
         type: "path",
         id: `chart-hexbin-${chart.id}-${series.id}-${i}`,
@@ -5738,7 +6391,7 @@ function pixelPoints(context, pairs) {
 }
 
 // src/renderScene/charts/renderers/line/area.ts
-function createLineAreaFill(context, series, points, color2, tension, areaOpacity) {
+function createLineAreaFill(context, series, points, color, tension, areaOpacity) {
   const { chart, plot, nextOrder } = context;
   const baselineY = plot.y + plot.height;
   const first = points[0];
@@ -5765,8 +6418,8 @@ function createLineAreaFill(context, series, points, color2, tension, areaOpacit
         kind: "linear-gradient",
         angle: 90,
         stops: [
-          { offset: 0, color: colorWithAlpha(color2, areaOpacity) },
-          { offset: 100, color: colorWithAlpha(color2, 0) }
+          { offset: 0, color: colorWithAlpha(color, areaOpacity) },
+          { offset: 100, color: colorWithAlpha(color, 0) }
         ]
       },
       stroke: { kind: "none" },
@@ -5816,7 +6469,7 @@ function dotNode(context, mark) {
     }
   };
 }
-function labelNode(context, mark, value) {
+function labelNode3(context, mark, value) {
   const { chart, bounds, nextOrder } = context;
   const config = chart.config;
   const fontSize = Math.max(9, chart.fontSize ?? 12);
@@ -5841,7 +6494,7 @@ function labelNode(context, mark, value) {
     fontWeight: "bold"
   };
 }
-function renderLineHighlights(context, series, color2) {
+function renderLineHighlights(context, series, color) {
   const { chart } = context;
   const config = chart.config;
   const wanted = config?.highlightPoints;
@@ -5862,28 +6515,28 @@ function renderLineHighlights(context, series, color2) {
       point,
       index,
       radius: config?.highlightSize ?? 6,
-      color: config?.highlightColor ?? color2
+      color: config?.highlightColor ?? color
     };
     if (config?.highlightGuide) {
       nodes.push(guideNode(context, mark));
     }
     nodes.push(dotNode(context, mark));
     if (config?.highlightLabels) {
-      nodes.push(labelNode(context, mark, pairs[index][1]));
+      nodes.push(labelNode3(context, mark, pairs[index][1]));
     }
   }
   return nodes;
 }
 
 // src/renderScene/charts/renderers/line/marks.ts
-function createLinePointMarks(series, pairs, points, color2) {
+function createLinePointMarks(series, pairs, points, color) {
   return points.map((position, valueIndex) => ({
     seriesId: series.id,
     valueIndex,
     value: pairs[valueIndex][1],
     error: series.error?.[valueIndex],
     position,
-    color: color2
+    color
   }));
 }
 function renderLineMarks(context, marks) {
@@ -5944,7 +6597,7 @@ function createLinePoint(context, mark) {
 }
 
 // src/renderScene/charts/renderers/line/path.ts
-function createLinePath(context, series, points, color2, tension) {
+function createLinePath(context, series, points, color, tension) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const config = chart.config;
   const source = series.color;
@@ -5959,12 +6612,12 @@ function createLinePath(context, series, points, color2, tension) {
     d: linePathData(points, tension),
     style: {
       fill: { kind: "none" },
-      stroke: paint(gradient ?? color2, diagnostics, chart.id),
+      stroke: paint(gradient ?? color, diagnostics, chart.id),
       strokeWidth: series.strokeWidth ?? config?.lineWidth ?? 2,
       dash: series.dash,
       lineCap: config?.lineWidth === void 0 ? void 0 : "round",
       lineJoin: "round",
-      shadow: glow ? { color: color2, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : resolveChartShadow(chart.shadowStyle)
+      shadow: glow ? { color, opacity: 0.9, blur: glow, dx: 0, dy: 0 } : resolveChartShadow(chart.shadowStyle)
     }
   };
 }
@@ -5978,23 +6631,23 @@ function renderLineSeriesArea(context, series, seriesIndex) {
   if (areaOpacity === void 0 || areaOpacity <= 0) {
     return [];
   }
-  const color2 = seriesColor(series, seriesIndex);
+  const color = seriesColor(series, seriesIndex);
   const tension = context.chart.config?.lineTension ?? 0;
   const points = pixelPoints(context, seriesValuePairs(context.chart, series));
-  return points.length > 1 ? [createLineAreaFill(context, series, points, color2, tension, areaOpacity)] : [];
+  return points.length > 1 ? [createLineAreaFill(context, series, points, color, tension, areaOpacity)] : [];
 }
 function renderLineSeries(context, series, seriesIndex) {
-  const color2 = seriesColor(series, seriesIndex);
+  const color = seriesColor(series, seriesIndex);
   const tension = context.chart.config?.lineTension ?? 0;
   const pairs = seriesValuePairs(context.chart, series);
   const points = pixelPoints(context, pairs);
   const nodes = [];
   if (points.length) {
-    nodes.push(createLinePath(context, series, points, color2, tension));
+    nodes.push(createLinePath(context, series, points, color, tension));
   }
-  const marks = createLinePointMarks(series, pairs, points, color2);
+  const marks = createLinePointMarks(series, pairs, points, color);
   nodes.push(...renderLineMarks(context, marks));
-  nodes.push(...renderLineHighlights(context, series, color2));
+  nodes.push(...renderLineHighlights(context, series, color));
   return nodes;
 }
 
@@ -6203,13 +6856,13 @@ function calculateColumnSegments(seriesList, layout, columnIndex) {
     const height = (column.total > 0 ? value / column.total : 0) * column.height;
     const y = column.y + cumulativeHeight;
     cumulativeHeight += height;
-    const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+    const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
     segments.push({
       columnIndex,
       seriesId: series.id,
       seriesLabel: series.label,
       value,
-      color: color2,
+      color,
       isTop: seriesIndex === 0,
       frame: {
         x: column.x,
@@ -6566,7 +7219,7 @@ function clampedCorner(layout, outerRadius, angles) {
 function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColor) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   const { centerX, centerY, innerRadius, maxRadius, gapPx } = layout;
-  const color2 = paint(rawColor, diagnostics, chart.id);
+  const color = paint(rawColor, diagnostics, chart.id);
   const shadow = resolveChartShadow(chart.shadowStyle);
   const trackPath = createPieSlicePath(
     { centerX, centerY, outerRadius: maxRadius, innerRadius },
@@ -6598,7 +7251,7 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
     order: nextOrder(),
     bounds,
     d: wedgePath,
-    style: { fill: color2, shadow, clip: { type: "path", d: trackPath } }
+    style: { fill: color, shadow, clip: { type: "path", d: trackPath } }
   } : void 0;
   const wedge = {
     type: "path",
@@ -6616,7 +7269,7 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
       pieValue: value
     },
     prop: seriesValueProp(series.id, 0),
-    style: { fill: color2, innerShadow: shadow, ...wedgeStroke(context) }
+    style: { fill: color, innerShadow: shadow, ...wedgeStroke(context) }
   };
   return shadowCaster ? [track, shadowCaster, wedge] : [track, wedge];
 }
@@ -6711,11 +7364,11 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
   const outside = hasManualOffset || !fitsInline;
   const tickStart = pieArcPoint(geometry, mid, geometry.outerRadius + LEADER_INSET);
   const point = outside ? hasManualOffset ? addOffset(pieArcPoint(geometry, mid, geometry.outerRadius), labelOffsetX, labelOffsetY) : pieArcPoint(geometry, mid, geometry.outerRadius + OUTSIDE_GAP) : pieArcPoint(geometry, mid, geometry.innerRadius + ringThickness * LABEL_RADIUS_FRACTION);
-  const color2 = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor : sameHueTint(representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : sameHueContrastColor(
+  const color = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor : sameHueTint(representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : sameHueContrastColor(
     representativeColor(fillColor, "#0f172a"),
     contrastTextColor(representativeColor(fillColor, "#0f172a"))
   );
-  return { point, color: color2, outside, mid, tickStart };
+  return { point, color, outside, mid, tickStart };
 }
 function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   const placement = labelPlacement2(context, geometry, angles, series, fillColor);
@@ -6723,7 +7376,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     return [];
   }
   const { chart, bounds, nextOrder } = context;
-  const { point, color: color2, outside, mid, tickStart } = placement;
+  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;
@@ -6734,7 +7387,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     bounds,
     d: `M ${tickStart.x} ${tickStart.y} L ${tickEnd.x} ${tickEnd.y}`,
     detail: { of: "chartSeries", series: series.id, mark: "polar-area-label-tick" },
-    style: outside ? { stroke: { kind: "solid", color: color2 }, strokeWidth: 1.5 } : { stroke: { kind: "none" } }
+    style: outside ? { stroke: { kind: "solid", color }, strokeWidth: 1.5 } : { stroke: { kind: "none" } }
   };
   const detail = {
     of: "chartSeries",
@@ -6752,7 +7405,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     align: "center",
     verticalAlign: "middle",
     lineHeight: 1.2,
-    color: color2
+    color
   };
   const valueFirst = chart.config?.polarValueFirst ?? false;
   const nameHeight = nameSize * 1.2;
@@ -6953,13 +7606,13 @@ function renderRadarSeries(context, geometry) {
   return nodes;
 }
 function renderSeries(context, geometry, series, seriesIndex) {
-  const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+  const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
   const points = seriesPoints(series, context, geometry);
   const path = radarSeriesPath(points, geometry.circular, geometry.tension);
   return [
-    createSeriesFill(context, geometry, series, path, color2),
-    ...geometry.strokeWidth > 0 ? [createSeriesStroke(context, geometry, series, path, color2)] : [],
-    ...geometry.pointSize > 0 ? createSeriesPoints(context, geometry, series, points, color2) : []
+    createSeriesFill(context, geometry, series, path, color),
+    ...geometry.strokeWidth > 0 ? [createSeriesStroke(context, geometry, series, path, color)] : [],
+    ...geometry.pointSize > 0 ? createSeriesPoints(context, geometry, series, points, color) : []
   ];
 }
 function seriesPoints(series, context, geometry) {
@@ -6968,7 +7621,7 @@ function seriesPoints(series, context, geometry) {
     (_, categoryIndex) => geometry.pointAt(geometry.radiusForValue(values[categoryIndex] ?? context.chart.axisY.min), categoryIndex)
   );
 }
-function createSeriesFill(context, geometry, series, path, color2) {
+function createSeriesFill(context, geometry, series, path, color) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   return {
     type: "path",
@@ -6978,13 +7631,13 @@ function createSeriesFill(context, geometry, series, path, color2) {
     d: path,
     detail: { of: "chartSeries", series: series.id },
     style: {
-      fill: paint(color2, diagnostics, chart.id),
+      fill: paint(color, diagnostics, chart.id),
       stroke: { kind: "none" },
       opacity: Math.max(0, Math.min(1, series.opacity ?? geometry.areaOpacity))
     }
   };
 }
-function createSeriesStroke(context, geometry, series, path, color2) {
+function createSeriesStroke(context, geometry, series, path, color) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   return {
     type: "path",
@@ -6995,14 +7648,14 @@ function createSeriesStroke(context, geometry, series, path, color2) {
     detail: { of: "chartSeries", series: series.id },
     style: {
       fill: { kind: "none" },
-      stroke: paint(color2, diagnostics, chart.id),
+      stroke: paint(color, diagnostics, chart.id),
       strokeWidth: geometry.strokeWidth,
       lineJoin: "round",
       shadow: resolveChartShadow(chart.shadowStyle)
     }
   };
 }
-function createSeriesPoints(context, geometry, series, points, color2) {
+function createSeriesPoints(context, geometry, series, points, color) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   return points.map((point, pointIndex) => ({
     type: "ellipse",
@@ -7015,7 +7668,7 @@ function createSeriesPoints(context, geometry, series, points, color2) {
     ry: geometry.pointSize,
     detail: { of: "chartValue", series: series.id, valueIndex: pointIndex, mark: "radar-vertex" },
     prop: seriesValueProp(series.id, pointIndex),
-    style: { fill: paint(color2, diagnostics, chart.id) }
+    style: { fill: paint(color, diagnostics, chart.id) }
   }));
 }
 
@@ -7084,7 +7737,7 @@ function layoutOf2(context) {
     cap: chart.config?.ringCap ?? "round"
   };
 }
-function ringEndShadows(context, layout, series, radius, sweep, color2) {
+function ringEndShadows(context, layout, series, radius, sweep, color) {
   const { chart, bounds, nextOrder } = context;
   const { centerX, centerY, ringThickness, start } = layout;
   const shadow = resolveChartShadow(chart.shadowStyle);
@@ -7106,7 +7759,7 @@ function ringEndShadows(context, layout, series, radius, sweep, color2) {
       d: arcSegmentPath(centerX, centerY, radius, from, to),
       style: {
         fill: { kind: "none" },
-        stroke: color2,
+        stroke: color,
         strokeWidth: ringThickness,
         lineCap: layout.cap,
         shadow: clampedShadow,
@@ -7125,12 +7778,12 @@ function ringNodes2(context, layout, series, index) {
   if (radius <= ringThickness / 2) {
     return [];
   }
-  const color2 = paint(series.color ?? CHART_COLORS[index % CHART_COLORS.length], diagnostics, chart.id);
+  const color = paint(series.color ?? CHART_COLORS[index % CHART_COLORS.length], diagnostics, chart.id);
   const value = Math.max(0, finite(series.values[0], 0));
   const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
   const trackStyle = {
     fill: { kind: "none" },
-    stroke: color2,
+    stroke: color,
     strokeWidth: ringThickness,
     opacity: trackOpacity
   };
@@ -7156,7 +7809,7 @@ function ringNodes2(context, layout, series, index) {
     return [track];
   }
   const sweep = fraction * total;
-  const casters = ringEndShadows(context, layout, series, radius, sweep, color2);
+  const casters = ringEndShadows(context, layout, series, radius, sweep, color);
   const progress = {
     type: "path",
     id: `chart-radial-bar-ring-${chart.id}-${series.id}`,
@@ -7165,7 +7818,7 @@ function ringNodes2(context, layout, series, index) {
     d: ringProgressPath(centerX, centerY, radius, sweep, start),
     detail: { of: "chartValue", series: series.id, valueIndex: 0, mark: "radial-bar-ring" },
     prop: seriesValueProp(series.id, 0),
-    style: { fill: { kind: "none" }, stroke: color2, strokeWidth: ringThickness, lineCap: cap }
+    style: { fill: { kind: "none" }, stroke: color, strokeWidth: ringThickness, lineCap: cap }
   };
   return [track, ...casters, progress];
 }
@@ -7340,8 +7993,8 @@ function createNodeLabel(context, data, node) {
     node.color,
     isLightColor(fallback) ? OUTSIDE_LABEL_LIGHTNESS_ON_DARK_BG : OUTSIDE_LABEL_LIGHTNESS_ON_LIGHT_BG
   ) ?? fallback;
-  const color2 = chart.config?.labelColor ?? defaultColor;
-  return { ...label, color: color2, detail: { of: "chartSeries", series: node.id, mark: "sankey-node-label" } };
+  const color = chart.config?.labelColor ?? defaultColor;
+  return { ...label, color, detail: { of: "chartSeries", series: node.id, mark: "sankey-node-label" } };
 }
 function createOutsideLabel(context, data, node) {
   const { chart, bounds, nextOrder } = context;
@@ -7471,15 +8124,15 @@ function renderScatter(context) {
   const nodes = [];
   const shadow = resolveChartShadow(context.chart.shadowStyle);
   context.chart.series.forEach((series, seriesIndex) => {
-    const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+    const color = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
     const points = pixelPoints(context, seriesValuePairs(context.chart, series));
     points.forEach((point, pointIndex) => {
-      nodes.push(createScatterPoint(context, series, point, pointIndex, color2, shadow));
+      nodes.push(createScatterPoint(context, series, point, pointIndex, color, shadow));
     });
   });
   return nodes;
 }
-function createScatterPoint(context, series, point, pointIndex, color2, shadow) {
+function createScatterPoint(context, series, point, pointIndex, color, shadow) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   const config = chart.config;
   const radius = config?.pointSize ?? DEFAULT_POINT_SIZE;
@@ -7495,8 +8148,8 @@ function createScatterPoint(context, series, point, pointIndex, color2, shadow)
     ry: radius,
     detail: { of: "chartValue", series: series.id, valueIndex: pointIndex },
     style: {
-      fill: paint(color2, diagnostics, chart.id),
-      stroke: strokeWidth > 0 ? paint(config?.pointStrokeColor ?? color2, diagnostics, chart.id) : void 0,
+      fill: paint(color, diagnostics, chart.id),
+      stroke: strokeWidth > 0 ? paint(config?.pointStrokeColor ?? color, diagnostics, chart.id) : void 0,
       strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
       opacity: config?.pointOpacity,
       shadow
@@ -7772,15 +8425,15 @@ function renderTreemapHeader(context, layout, header, index) {
   return [background, label];
 }
 function renderTile(context, layout, tile, nextTile) {
-  const color2 = treemapLeafColor(tile.item.leaf, layout);
+  const color = treemapLeafColor(tile.item.leaf, layout);
   const nextColor = nextTile ? treemapLeafColor(nextTile.item.leaf, layout) : void 0;
-  const nodes = [createTileNode(context, layout, tile, color2, nextColor)];
+  const nodes = [createTileNode(context, layout, tile, color, nextColor)];
   if (context.showLabels && tile.width >= 34 && tile.height >= 18) {
-    nodes.push(...createTileLabel(context, layout, tile, color2));
+    nodes.push(...createTileLabel(context, layout, tile, color));
   }
   return nodes;
 }
-function createTileNode(context, layout, tile, color2, nextColor) {
+function createTileNode(context, layout, tile, color, nextColor) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const gap = layout.cellGap;
   const shadow = resolveChartShadow(chart.shadowStyle);
@@ -7800,10 +8453,10 @@ function createTileNode(context, layout, tile, color2, nextColor) {
     kind: "linear-gradient",
     angle: 0,
     stops: [
-      { offset: 0, color: representativeColor(color2, fallback) },
+      { offset: 0, color: representativeColor(color, fallback) },
       { offset: 100, color: representativeColor(nextColor, fallback) }
     ]
-  } : paint(color2, diagnostics, chart.id);
+  } : paint(color, diagnostics, chart.id);
   return {
     type: "rect",
     id: `chart-treemap-tile-${chart.id}-${tile.item.leaf.id}`,
@@ -7823,7 +8476,7 @@ function createTileNode(context, layout, tile, color2, nextColor) {
     }
   };
 }
-function createTileLabel(context, layout, tile, color2) {
+function createTileLabel(context, layout, tile, color) {
   const { chart, plot, bounds, nextOrder } = context;
   const { leaf, value } = tile.item;
   const gap = layout.cellGap;
@@ -7832,7 +8485,7 @@ function createTileLabel(context, layout, tile, color2) {
   const height = Math.max(1, tile.height - gap - pad * 1.5);
   const x = plot.x + tile.x + gap / 2 + pad;
   const y = plot.y + tile.y + gap / 2 + pad * 0.75;
-  const textColor = chart.config?.tileTextColor ?? contrastTextColor(representativeColor(color2, "#ffffff"));
+  const textColor = chart.config?.tileTextColor ?? contrastTextColor(representativeColor(color, "#ffffff"));
   const lineHeight = layout.labelSize * 1.2;
   const maxLines = Math.max(1, Math.floor(height / lineHeight));
   const labelLines = wrapText(leaf.label, width, layout.labelSize).slice(0, maxLines).map((line) => ellipsizeToWidth(line, width, layout.labelSize, true));
@@ -8154,7 +8807,7 @@ function stackingOf(input) {
   add("frame", input.frames, 0);
   add("swimlane", input.swimlanes, 5e3);
   add("shape", input.shapes, 1e4);
-  add("widget", input.widgets ?? [], 1e4);
+  add("widget", input.components ?? input.widgets ?? [], 1e4);
   add("isometric", input.isometricObjects ?? [], 15e3);
   add(
     "link",
@@ -8163,6 +8816,7 @@ function stackingOf(input) {
   );
   add("chart", input.charts ?? [], 2e4);
   add("path", input.paths ?? [], 3e4);
+  add("dimension", input.dimensions ?? [], 31e3);
   return stacking;
 }
 function stampStacking(nodes, input) {
@@ -8182,8 +8836,9 @@ function buildRenderScene(input, options = {}) {
     ...buildCharts(input.charts ?? [], diagnostics),
     ...buildLinks(input.links, measureText),
     ...buildShapes(input.shapes, diagnostics, measureText),
-    ...buildWidgets(input.widgets ?? []),
-    ...buildIsometricObjects(input.isometricObjects ?? [])
+    ...buildComponents(input.components ?? input.widgets ?? []),
+    ...buildIsometricObjects(input.isometricObjects ?? []),
+    ...buildDimensions(input.dimensions ?? [])
   ];
   stampStacking(nodes, input);
   nodes.sort(
@@ -8286,21 +8941,21 @@ function innerShadowPrimitives(shadow) {
 }
 
 // src/svg/markerBodies.ts
-function markerBody(type, size, color2, strokeWidth) {
+function markerBody(type, size, color, strokeWidth) {
   const bodies = {
-    arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)}" fill="none" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`,
-    filled_arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)} Z" fill="${color2}" stroke="${color2}" stroke-width="${num(strokeWidth * 0.5)}" stroke-linejoin="round"/>`,
-    circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="white" stroke="${color2}" stroke-width="${num(strokeWidth)}"/>`,
-    filled_circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="${color2}"/>`,
-    diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="white" stroke="${color2}" stroke-width="${num(strokeWidth)}"/>`,
-    filled_diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="${color2}" stroke="${color2}" stroke-width="${num(strokeWidth * 0.5)}"/>`,
-    bar: `<path d="M 0 ${num(-size * 0.6)} V ${num(size * 0.6)}" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    triangle: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 L ${num(-size)} ${num(size * 0.72)} Z" fill="white" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linejoin="round"/>`,
-    one: `<path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)} M ${num(-size * 0.72)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color2}" stroke-width="${num(strokeWidth)}"/>`,
-    zero_one: `<circle cx="${num(-size * 0.8)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color2}" stroke-width="${num(strokeWidth)}"/><path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color2}" stroke-width="${num(strokeWidth)}"/>`,
-    many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    one_many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0 M ${num(-size * 1.45)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
-    zero_many: `<circle cx="${num(-size * 1.45)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color2}" stroke-width="${num(strokeWidth)}"/><path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color2}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`
+    arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)}" fill="none" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`,
+    filled_arrow: `<path d="M ${num(-size)} ${num(-size * 0.6)} L 0 0 L ${num(-size)} ${num(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num(strokeWidth * 0.5)}" stroke-linejoin="round"/>`,
+    circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
+    filled_circle: `<circle cx="0" cy="0" r="${num(size * 0.5)}" fill="${color}"/>`,
+    diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
+    filled_diamond: `<path d="M ${num(-size * 0.6)} 0 L 0 ${num(-size * 0.6)} L ${num(size * 0.6)} 0 L 0 ${num(size * 0.6)} Z" fill="${color}" stroke="${color}" stroke-width="${num(strokeWidth * 0.5)}"/>`,
+    bar: `<path d="M 0 ${num(-size * 0.6)} V ${num(size * 0.6)}" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
+    triangle: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 L ${num(-size)} ${num(size * 0.72)} Z" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linejoin="round"/>`,
+    one: `<path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)} M ${num(-size * 0.72)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
+    zero_one: `<circle cx="${num(-size * 0.8)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/><path d="M 0 ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}"/>`,
+    many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
+    one_many: `<path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0 M ${num(-size * 1.45)} ${num(-size * 0.62)} V ${num(size * 0.62)}" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`,
+    zero_many: `<circle cx="${num(-size * 1.45)}" cy="0" r="${num(size * 0.38)}" fill="white" stroke="${color}" stroke-width="${num(strokeWidth)}"/><path d="M ${num(-size)} ${num(-size * 0.72)} L 0 0 M ${num(-size)} 0 L 0 0 M ${num(-size)} ${num(size * 0.72)} L 0 0" stroke="${color}" stroke-width="${num(strokeWidth)}" stroke-linecap="round"/>`
   };
   return bodies[type];
 }
@@ -8321,11 +8976,11 @@ var SvgMarkerDefinitions = class {
   addDefinition;
   prefix;
   ids = /* @__PURE__ */ new Map();
-  marker(type, color2, strokeWidth) {
+  marker(type, color, strokeWidth) {
     if (!type || type === "none") {
       return void 0;
     }
-    const key = `${type}:${color2}:${strokeWidth}`;
+    const key = `${type}:${color}:${strokeWidth}`;
     let id = this.ids.get(key);
     if (id) {
       return id;
@@ -8335,7 +8990,7 @@ var SvgMarkerDefinitions = class {
     const size = 12 + (strokeWidth - 2) * 3;
     const extent = markerExtent(type, size, strokeWidth);
     const attributes = markerAttributes(id, extent);
-    this.addDefinition(`<marker ${attributes}>${markerBody(type, size, xml(color2), strokeWidth)}</marker>`);
+    this.addDefinition(`<marker ${attributes}>${markerBody(type, size, xml(color), strokeWidth)}</marker>`);
     return id;
   }
 };
@@ -8415,8 +9070,8 @@ var SvgDefinitionRegistry = class {
   filter(style, nodeId, size) {
     return this.filters.filter(style, nodeId, size);
   }
-  marker(type, color2, strokeWidth) {
-    return this.markers.marker(type, color2, strokeWidth);
+  marker(type, color, strokeWidth) {
+    return this.markers.marker(type, color, strokeWidth);
   }
   clip(style) {
     return this.clips.clip(style);
@@ -8546,13 +9201,22 @@ function imageAttrs(node, defs) {
 function domRole(identity) {
   return identity.role === "shape" ? "entity" : identity.role;
 }
+function ariaAttrs(aria) {
+  return [
+    `role="${xml(aria.role)}"`,
+    aria.checked === void 0 ? void 0 : `aria-checked="${aria.checked}"`,
+    aria.pressed === void 0 ? void 0 : `aria-pressed="${aria.pressed}"`,
+    aria.disabled ? 'aria-disabled="true"' : void 0
+  ];
+}
 function identityAttrs(identity) {
   return [
     `data-sf-role="${domRole(identity)}"`,
     `data-sf-id="${xml(identity.id)}"`,
     identity.kind ? `data-sf-kind="${xml(identity.kind)}"` : void 0,
     identity.primary ? 'data-sf-primary="true"' : void 0,
-    identity.parentFrameId ? `data-sf-parent-frame="${xml(identity.parentFrameId)}"` : void 0
+    identity.parentFrameId ? `data-sf-parent-frame="${xml(identity.parentFrameId)}"` : void 0,
+    ...identity.aria ? ariaAttrs(identity.aria) : []
   ];
 }
 function detailAttrs(detail) {
@@ -8737,7 +9401,7 @@ function shaderSurfaceSvg(node, defs) {
   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>`;
 }
 function rollingDigitSvg(character, node) {
-  const style = node.widgetStyle;
+  const style = node.componentStyle;
   if (style.variant === "plain") {
     return `<span xmlns="http://www.w3.org/1999/xhtml" data-sf-rolling-digit="true" style="position:relative;display:inline-block;width:.62em;height:1.1em;overflow:hidden"><span data-sf-rolling-current="true" style="position:absolute;inset:0;display:grid;place-items:center;color:${xml(style.color)};font-weight:${xml(style.fontWeight)};line-height:1">${xml(character)}</span></span>`;
   }
@@ -8745,11 +9409,11 @@ function rollingDigitSvg(character, node) {
 }
 function rollingNumberSvg(node, defs) {
   const rotation = transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 });
-  const fontSize = node.widgetStyle.fontSize > 0 ? node.widgetStyle.fontSize : Math.max(1, Math.min(node.width, node.height) * 0.28);
-  const label = node.label ? `<span xmlns="http://www.w3.org/1999/xhtml" style="margin-bottom:.14em;color:${xml(node.widgetStyle.labelColor)};font-size:.16em;font-weight:600;letter-spacing:.24em;line-height:1">${xml(node.label)}</span>` : "";
+  const fontSize = node.componentStyle.fontSize > 0 ? node.componentStyle.fontSize : Math.max(1, Math.min(node.width, node.height) * 0.28);
+  const label = node.label ? `<span xmlns="http://www.w3.org/1999/xhtml" style="margin-bottom:.14em;color:${xml(node.componentStyle.labelColor)};font-size:.16em;font-weight:600;letter-spacing:.24em;line-height:1">${xml(node.label)}</span>` : "";
   const digits = [...node.value].map((character) => rollingDigitSvg(character, node)).join("");
-  const widgetStyle = xml(JSON.stringify(node.widgetStyle));
-  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${num(node.duration)}" data-sf-widget-style="${widgetStyle}" x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation}><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:${xml(node.widgetStyle.fontFamily)};font-size:${num(fontSize)}px">${label}<div data-sf-rolling-digits="true" aria-label="${xml(node.value)}" style="display:flex;gap:${node.widgetStyle.variant === "plain" ? ".02em" : ".1em"};font-size:1em">${digits}</div></div></foreignObject>`;
+  const componentStyle = xml(JSON.stringify(node.componentStyle));
+  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-widget="rollingNumber" data-sf-widget-value="${xml(node.value)}" data-sf-widget-digits="${node.digits ?? ""}" data-sf-widget-duration="${num(node.duration)}" data-sf-widget-style="${componentStyle}" x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation}><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:${xml(node.componentStyle.fontFamily)};font-size:${num(fontSize)}px">${label}<div data-sf-rolling-digits="true" aria-label="${xml(node.value)}" style="display:flex;gap:${node.componentStyle.variant === "plain" ? ".02em" : ".1em"};font-size:1em">${digits}</div></div></foreignObject>`;
 }
 function nodeSvg(node, defs) {
   if (node.type === "text") {
@@ -8804,7 +9468,13 @@ function renderCanvas(input, options = {}) {
 }
 var SCENE_CACHE_LIMIT = 50;
 var sceneCache = /* @__PURE__ */ new Map();
+var cachedForRegistry = componentRegistryVersion();
 function cachedRenderScene(source) {
+  const registry = componentRegistryVersion();
+  if (registry !== cachedForRegistry) {
+    sceneCache.clear();
+    cachedForRegistry = registry;
+  }
   const cached = sceneCache.get(source);
   if (cached) {
     sceneCache.delete(source);
@@ -8829,7 +9499,20 @@ function render(source, options = {}) {
   const { svg, width, height, diagnostics } = renderSceneToSvg(scene, options);
   return { svg, width, height, diagnostics, scene };
 }
+var SCENE_ORDER_BASE = 1e4;
+function defineComponent(definition) {
+  const { scene, ...descriptor } = definition;
+  const unregisterDescriptor = registerComponentDescriptor(descriptor);
+  const unregisterBuilder = registerComponentBuilder(
+    descriptor.type,
+    (component, index) => scene(component, { order: SCENE_ORDER_BASE + index })
+  );
+  return () => {
+    unregisterBuilder();
+    unregisterDescriptor();
+  };
+}
 
-export { DEFAULT_ROLLING_NUMBER_STYLE, collectCanvasObjects, decodeColor, decodeShadow, formatRollingNumber, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-65IVT4GK.js.map
-//# sourceMappingURL=chunk-65IVT4GK.js.map
+export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput };
+//# sourceMappingURL=chunk-FVHVOJS2.js.map
+//# sourceMappingURL=chunk-FVHVOJS2.js.map