stickyflow 0.4.0 → 0.5.0

package/dist/{chunk-65IVT4GK.js → chunk-LTGF5OHP.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, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, isometricFaces, roundedPolygonPath, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, isometricBounds, deriveFaceFills, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricTopFaceCenter, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-IEHE6WVN.js';
 
 // 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;
@@ -790,355 +1030,669 @@ 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),
+    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 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 positiveNumber(value) {
-  const number = Number(value);
-  return value !== void 0 && Number.isFinite(number) && number > 0 ? number : void 0;
+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 };
 }
-function fontWeight(value) {
-  return value && FONT_WEIGHT.test(value) ? value : void 0;
+function explicitAbsolutePoint(endpoint) {
+  return endpoint?.kind === "absolute" ? { x: endpoint.x, y: endpoint.y } : null;
 }
-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;
-    }
+function explicitAnchorPoint(canvasObject, endpoint) {
+  if (endpoint?.kind === "port") {
+    return namedPortPoint(canvasObject, endpoint);
   }
-  for (const key of TICK_SCALE_COLORS) {
-    const value = color(properties[key]);
-    if (value) {
-      parameters[key] = value;
-    }
+  if (endpoint?.kind === "side") {
+    return sidePoint(canvasObject, endpoint);
+  }
+  return null;
+}
+function automaticEndpointPoint(canvasObject, opposite) {
+  return opposite ? edgePointToward(canvasObject, opposite) : elementCenter(canvasObject);
+}
+function findPositionedCanvasObject(canvasObjects, id) {
+  return canvasObjects.find((candidate) => candidate.id === id);
+}
+
+// src/renderInput/fromSfl/links.ts
+var ISOMETRIC_SEQUENCE_BASE = 15e3;
+function positionedCanvasObjects(canvasObjects) {
+  return [
+    ...canvasObjects.shapes,
+    ...canvasObjects.frames,
+    ...canvasObjects.swimlanes,
+    ...canvasObjects.paths,
+    ...canvasObjects.charts
+  ];
+}
+function connectionEndpointPoint(object, face) {
+  return object ? isometricFaceCenter(object, face) : { x: 0, y: 0 };
+}
+function isometricStackPosition(isometricObjects, id) {
+  const index = isometricObjects.findIndex((object2) => object2.id === id);
+  if (index < 0) {
+    return void 0;
   }
+  const object = isometricObjects[index];
+  return { rank: object.order ?? 0, sequence: object.sourceIndex ?? ISOMETRIC_SEQUENCE_BASE + index };
+}
+function connectionStack(isometricObjects, connection) {
+  if (typeof connection.order === "number") {
+    return { order: connection.order, sourceIndex: connection.sourceIndex };
+  }
+  const behind = [
+    VISIBLE_ISOMETRIC_FACES.has(connection.fromFace) ? void 0 : isometricStackPosition(isometricObjects, connection.fromId),
+    VISIBLE_ISOMETRIC_FACES.has(connection.toFace) ? void 0 : isometricStackPosition(isometricObjects, connection.toId)
+  ].filter((position) => position !== void 0);
+  if (!behind.length) {
+    return { sourceIndex: connection.sourceIndex };
+  }
+  const lowest = behind.reduce(
+    (best, position) => position.rank < best.rank || position.rank === best.rank && position.sequence < best.sequence ? position : best
+  );
+  return { order: lowest.rank, sourceIndex: lowest.sequence - 0.5 };
+}
+function createRenderInputConnections(canvasObjects) {
+  const isometricById = new Map(canvasObjects.isometricObjects.map((object) => [object.id, object]));
+  return canvasObjects.connections.map((connection) => {
+    const link = {
+      id: connection.id,
+      fromId: connection.fromId,
+      toId: connection.toId,
+      fromPoint: { kind: "face", face: connection.fromFace },
+      toPoint: { kind: "face", face: connection.toFace },
+      style: connection.style,
+      ...connectionStack(canvasObjects.isometricObjects, connection)
+    };
+    return {
+      link,
+      from: connectionEndpointPoint(isometricById.get(connection.fromId ?? ""), connection.fromFace),
+      to: connectionEndpointPoint(isometricById.get(connection.toId ?? ""), connection.toFace),
+      kind: "connection"
+    };
+  });
+}
+function createRenderInputLinks(canvasObjects) {
+  const positionedObjects = positionedCanvasObjects(canvasObjects);
+  const links = canvasObjects.links.map((link) => ({
+    link,
+    from: resolveLinkEndpoint(link, "from", positionedObjects),
+    to: resolveLinkEndpoint(link, "to", positionedObjects)
+  }));
+  return [...links, ...createRenderInputConnections(canvasObjects)];
+}
+
+// src/renderInput/fromSfl/index.ts
+function sflToRenderInput(sfl) {
+  const state = sflToCanvasState(sfl);
+  const canvasObjects = collectCanvasObjects(state);
   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
+    shapes: canvasObjects.shapes,
+    frames: canvasObjects.frames,
+    swimlanes: canvasObjects.swimlanes,
+    isometricObjects: canvasObjects.isometricObjects,
+    paths: canvasObjects.paths,
+    charts: canvasObjects.charts,
+    components: canvasObjects.components,
+    links: createRenderInputLinks(canvasObjects),
+    diagnostics: state.diagnostics
   };
 }
-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;
+
+// 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 }));
   }
-  for (const key of RULER_COLORS) {
-    parameters[key] = color(properties[key]) ?? RULER_DEFAULTS[key];
+  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
+    });
   }
-  for (const key of RULER_OPTIONAL_COLORS) {
-    const value = color(properties[key]);
-    if (value) {
-      parameters[key] = value;
+  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 }));
   }
-  parameters.axis = properties.axis === "horizontal" ? "horizontal" : "vertical";
-  if (properties.knob) {
-    parameters.knob = properties.knob;
+  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 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-${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 {
-    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
+    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
   };
 }
-function widgetObject(canvasObject) {
-  if (canvasObject.widget.type === "tickScale") {
-    return tickScaleObject(canvasObject);
-  }
-  if (canvasObject.widget.type === "ruler") {
-    return rulerObject(canvasObject);
-  }
-  const properties = canvasObject.props;
+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: 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)
-    }
+    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" }
   };
 }
-
-// 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]));
+function labelText(component, part, area, label, order) {
   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)
+    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/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(
+// src/renderScene/artifacts/component/button.ts
+function buildButton(component, index) {
+  const box = controlBox(component, index, { width: 120, height: 40 });
+  const nodes = [
+    hitArea(component, box),
     {
-      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;
+      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 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 };
+  return nodes;
 }
-function explicitAbsolutePoint(endpoint) {
-  return endpoint?.kind === "absolute" ? { x: endpoint.x, y: endpoint.y } : null;
+
+// 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 explicitAnchorPoint(canvasObject, endpoint) {
-  if (endpoint?.kind === "port") {
-    return namedPortPoint(canvasObject, endpoint);
-  }
-  if (endpoint?.kind === "side") {
-    return sidePoint(canvasObject, endpoint);
-  }
-  return null;
+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 automaticEndpointPoint(canvasObject, opposite) {
-  return opposite ? edgePointToward(canvasObject, opposite) : elementCenter(canvasObject);
+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 findPositionedCanvasObject(canvasObjects, id) {
-  return canvasObjects.find((candidate) => candidate.id === id);
+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);
 }
-
-// src/renderInput/fromSfl/links.ts
-var ISOMETRIC_SEQUENCE_BASE = 15e3;
-function positionedCanvasObjects(canvasObjects) {
+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 [
-    ...canvasObjects.shapes,
-    ...canvasObjects.frames,
-    ...canvasObjects.swimlanes,
-    ...canvasObjects.paths,
-    ...canvasObjects.charts
+    hitArea(component, box),
+    boxNode(component, box, square),
+    ...component.value === true ? [checkNode(component, box, square)] : [],
+    ...component.label ? [labelNode(component, box, side, component.label)] : []
   ];
 }
-function connectionEndpointPoint(object, face) {
-  return object ? isometricFaceCenter(object, face) : { x: 0, y: 0 };
-}
-function isometricStackPosition(isometricObjects, id) {
-  const index = isometricObjects.findIndex((object2) => object2.id === id);
-  if (index < 0) {
-    return void 0;
-  }
-  const object = isometricObjects[index];
-  return { rank: object.order ?? 0, sequence: object.sourceIndex ?? ISOMETRIC_SEQUENCE_BASE + index };
+
+// 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 }
+      })
+    }
+  ];
 }
-function connectionStack(isometricObjects, connection) {
-  if (typeof connection.order === "number") {
-    return { order: connection.order, sourceIndex: connection.sourceIndex };
-  }
-  const behind = [
-    VISIBLE_ISOMETRIC_FACES.has(connection.fromFace) ? void 0 : isometricStackPosition(isometricObjects, connection.fromId),
-    VISIBLE_ISOMETRIC_FACES.has(connection.toFace) ? void 0 : isometricStackPosition(isometricObjects, connection.toId)
-  ].filter((position) => position !== void 0);
-  if (!behind.length) {
-    return { sourceIndex: connection.sourceIndex };
+
+// 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));
   }
-  const lowest = behind.reduce(
-    (best, position) => position.rank < best.rank || position.rank === best.rank && position.sequence < best.sequence ? position : best
-  );
-  return { order: lowest.rank, sourceIndex: lowest.sequence - 0.5 };
+  return nodes;
 }
-function createRenderInputConnections(canvasObjects) {
-  const isometricById = new Map(canvasObjects.isometricObjects.map((object) => [object.id, object]));
-  return canvasObjects.connections.map((connection) => {
-    const link = {
-      id: connection.id,
-      fromId: connection.fromId,
-      toId: connection.toId,
-      fromPoint: { kind: "face", face: connection.fromFace },
-      toPoint: { kind: "face", face: connection.toFace },
-      style: connection.style,
-      ...connectionStack(canvasObjects.isometricObjects, connection)
-    };
-    return {
-      link,
-      from: connectionEndpointPoint(isometricById.get(connection.fromId ?? ""), connection.fromFace),
-      to: connectionEndpointPoint(isometricById.get(connection.toId ?? ""), connection.toFace),
-      kind: "connection"
-    };
-  });
+
+// 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 createRenderInputLinks(canvasObjects) {
-  const positionedObjects = positionedCanvasObjects(canvasObjects);
-  const links = canvasObjects.links.map((link) => ({
-    link,
-    from: resolveLinkEndpoint(link, "from", positionedObjects),
-    to: resolveLinkEndpoint(link, "to", positionedObjects)
-  }));
-  return [...links, ...createRenderInputConnections(canvasObjects)];
+function getComponentBuilder(type) {
+  return builders.get(type);
 }
 
-// src/renderInput/fromSfl/index.ts
-function sflToRenderInput(sfl) {
-  const state = sflToCanvasState(sfl);
-  const canvasObjects = collectCanvasObjects(state);
+// 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 {
-    shapes: canvasObjects.shapes,
-    frames: canvasObjects.frames,
-    swimlanes: canvasObjects.swimlanes,
-    isometricObjects: canvasObjects.isometricObjects,
-    paths: canvasObjects.paths,
-    charts: canvasObjects.charts,
-    widgets: canvasObjects.widgets,
-    links: createRenderInputLinks(canvasObjects),
-    diagnostics: state.diagnostics
+    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) {
@@ -1578,12 +2132,12 @@ function faceNodes(context, faces, hullClip) {
   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) => ({
+  const face = (name, offset, points, color) => ({
     ...common,
     id: `isometric-${object.id}-${name}`,
     order: order + offset,
     d: roundedPolygonPath(points, 0),
-    style: { ...noStroke, fill: { kind: "solid", color: color2 }, clip: hullClip },
+    style: { ...noStroke, fill: { kind: "solid", color }, clip: hullClip },
     ...colorProp
   });
   return [
@@ -1872,13 +2426,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 +2449,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 +2462,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)
   };
@@ -2510,211 +3064,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 +3218,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 +3232,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 +3963,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 +3972,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 +3993,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 +4004,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 +4024,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 +4082,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 +4823,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 +4890,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 +4991,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 +5001,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 +5305,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 +5315,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 +5369,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 +5392,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 +6046,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 +6087,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 +6114,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 +6165,7 @@ function dotNode(context, mark) {
     }
   };
 }
-function labelNode(context, mark, value) {
+function labelNode2(context, mark, value) {
   const { chart, bounds, nextOrder } = context;
   const config = chart.config;
   const fontSize = Math.max(9, chart.fontSize ?? 12);
@@ -5841,7 +6190,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 +6211,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(labelNode2(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 +6293,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 +6308,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 +6327,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 +6552,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 +6915,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 +6947,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 +6965,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 +7060,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 +7072,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 +7083,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 +7101,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 +7302,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 +7317,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 +7327,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 +7344,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 +7364,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 +7433,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 +7455,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 +7474,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 +7505,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 +7514,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 +7689,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 +7820,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 +7844,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 +8121,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 +8149,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 +8172,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 +8181,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 +8503,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",
@@ -8182,7 +8531,7 @@ function buildRenderScene(input, options = {}) {
     ...buildCharts(input.charts ?? [], diagnostics),
     ...buildLinks(input.links, measureText),
     ...buildShapes(input.shapes, diagnostics, measureText),
-    ...buildWidgets(input.widgets ?? []),
+    ...buildComponents(input.components ?? input.widgets ?? []),
     ...buildIsometricObjects(input.isometricObjects ?? [])
   ];
   stampStacking(nodes, input);
@@ -8286,21 +8635,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 +8670,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 +8684,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 +8764,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 +8895,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 +9095,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 +9103,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 +9162,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 +9193,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-LTGF5OHP.js.map
+//# sourceMappingURL=chunk-LTGF5OHP.js.map