stickyflow 0.4.0 → 0.6.0

package/dist/{chunk-BYMIYXP5.js → chunk-4G2R7PEL.js}

@@ -80,6 +80,115 @@ function isometricFaces(object) {
   };
 }
 
+// src/model/isometricObject/footprint.ts
+function signedArea(points) {
+  let sum = 0;
+  for (let i = 0; i < points.length; i += 1) {
+    const [x1, y1] = points[i];
+    const [x2, y2] = points[(i + 1) % points.length];
+    sum += x1 * y2 - x2 * y1;
+  }
+  return sum / 2;
+}
+function cleanFootprint(points) {
+  const clean = (points ?? []).filter(
+    (point) => Array.isArray(point) && Number.isFinite(point[0]) && Number.isFinite(point[1])
+  );
+  const unique = clean.filter((point, index) => {
+    const next = clean[(index + 1) % clean.length];
+    return point[0] !== next[0] || point[1] !== next[1];
+  });
+  return unique.length >= 3 ? unique : [];
+}
+var ARC_STEP = Math.PI / 12;
+function roundFootprint(points, radius, width, depth) {
+  if (!(radius > 0) || width <= 0 || depth <= 0) {
+    return [...points];
+  }
+  const world = points.map(([u, v]) => ({ x: u * width, y: v * depth }));
+  const rounded = [];
+  for (let i = 0; i < world.length; i += 1) {
+    const here = world[i];
+    const before = world[(i - 1 + world.length) % world.length];
+    const after = world[(i + 1) % world.length];
+    const a = { x: before.x - here.x, y: before.y - here.y };
+    const b = { x: after.x - here.x, y: after.y - here.y };
+    const lengthA = Math.hypot(a.x, a.y);
+    const lengthB = Math.hypot(b.x, b.y);
+    const cos = (a.x * b.x + a.y * b.y) / (lengthA * lengthB);
+    const angle = Math.acos(Math.max(-1, Math.min(1, cos)));
+    if (!Number.isFinite(angle) || angle < 1e-3 || Math.PI - angle < 1e-3) {
+      rounded.push(points[i]);
+      continue;
+    }
+    const reach = Math.min(radius / Math.tan(angle / 2), Math.min(lengthA, lengthB) / 2);
+    const effective = reach * Math.tan(angle / 2);
+    const unitA = { x: a.x / lengthA, y: a.y / lengthA };
+    const unitB = { x: b.x / lengthB, y: b.y / lengthB };
+    const from = { x: here.x + unitA.x * reach, y: here.y + unitA.y * reach };
+    const to = { x: here.x + unitB.x * reach, y: here.y + unitB.y * reach };
+    const bisector = { x: unitA.x + unitB.x, y: unitA.y + unitB.y };
+    const bisectorLength = Math.hypot(bisector.x, bisector.y);
+    const centerDistance = effective / Math.sin(angle / 2);
+    const center = {
+      x: here.x + bisector.x / bisectorLength * centerDistance,
+      y: here.y + bisector.y / bisectorLength * centerDistance
+    };
+    const start = Math.atan2(from.y - center.y, from.x - center.x);
+    let sweep = Math.atan2(to.y - center.y, to.x - center.x) - start;
+    sweep -= 2 * Math.PI * Math.round(sweep / (2 * Math.PI));
+    const steps = Math.max(2, Math.ceil(Math.abs(sweep) / ARC_STEP));
+    for (let step = 0; step <= steps; step += 1) {
+      const t = start + sweep * step / steps;
+      rounded.push([(center.x + effective * Math.cos(t)) / width, (center.y + effective * Math.sin(t)) / depth]);
+    }
+  }
+  return rounded;
+}
+function extrudeFootprint(frame, footprint, cornerRadius = 0) {
+  const width = Math.max(0, frame.width);
+  const depth = Math.max(0, frame.depth);
+  const height = Math.max(0, frame.height);
+  const points = roundFootprint(cleanFootprint(footprint), cornerRadius, width, depth);
+  const apexX = frame.x + depth * AXIS_COS;
+  const project = ([u, v], z) => ({
+    x: apexX + (u * width - v * depth) * AXIS_COS,
+    y: frame.y + (u * width + v * depth) * AXIS_SIN + z
+  });
+  const top = points.map((point) => project(point, 0));
+  const turn = signedArea(points) >= 0 ? 1 : -1;
+  const edges = points.map((from, i) => {
+    const to = points[(i + 1) % points.length];
+    const edgeU = (to[0] - from[0]) * width;
+    const edgeV = (to[1] - from[1]) * depth;
+    const length = Math.hypot(edgeU, edgeV);
+    const normalU = length === 0 ? 0 : edgeV / length * turn;
+    const normalV = length === 0 ? 0 : -edgeU / length * turn;
+    return { from, to, length, normalU, normalV, visible: length > 0 && normalU + normalV > 1e-9 };
+  });
+  const sameWay = (a, b) => {
+    return a.visible && b.visible && a.normalU * b.normalU + a.normalV * b.normalV > Math.cos(0.5);
+  };
+  const sides = [];
+  edges.forEach((edge, i) => {
+    if (!edge.visible) {
+      return;
+    }
+    const before = edges[(i - 1 + edges.length) % edges.length];
+    const after = edges[(i + 1) % edges.length];
+    const { from, to } = edge;
+    sides.push({
+      points: [project(from, 0), project(to, 0), project(to, height), project(from, height)],
+      light: 0.72 + 0.28 * Math.max(0, Math.min(1, edge.normalV / (Math.abs(edge.normalU) + Math.abs(edge.normalV)))),
+      depth: (from[0] + to[0]) / 2 + (from[1] + to[1]) / 2,
+      smoothStart: sameWay(before, edge),
+      smoothEnd: sameWay(edge, after)
+    });
+  });
+  sides.sort((a, b) => a.depth - b.depth);
+  return { top, sides };
+}
+
 // src/model/isometricObject/shading.ts
 function clamp255(value) {
   return Math.max(0, Math.min(255, Math.round(value)));
@@ -103,6 +212,9 @@ function multiply(hex, factor) {
   const [r, g, b] = rgb;
   return rgbToHex(r * factor, g * factor, b * factor);
 }
+function shadeFill(fill, factor) {
+  return multiply(fill, factor);
+}
 function deriveFaceFills(fill) {
   return {
     topFill: fill,
@@ -111,6 +223,277 @@ function deriveFaceFills(fill) {
   };
 }
 
+// src/model/path/curve.ts
+var SAMPLES_PER_SEGMENT = 8;
+function pointTension(curve, point) {
+  return Math.max(0, point.tension ?? curve.tension);
+}
+function isStraight(curve) {
+  return curve.points.length < 3 || curve.points.every((point) => pointTension(curve, point) <= 0);
+}
+function pointAt(curve, index) {
+  const { points } = curve;
+  if (curve.closed) {
+    return points[(index + points.length) % points.length];
+  }
+  return points[Math.max(0, Math.min(points.length - 1, index))];
+}
+function pathSegments(curve) {
+  const count = curve.closed ? curve.points.length : curve.points.length - 1;
+  return Array.from({ length: Math.max(0, count) }, (_, index) => {
+    const previous = pointAt(curve, index - 1);
+    const from = pointAt(curve, index);
+    const to = pointAt(curve, index + 1);
+    const next = pointAt(curve, index + 2);
+    const fromFactor = pointTension(curve, from) / 6;
+    const toFactor = pointTension(curve, to) / 6;
+    if (fromFactor === 0 && toFactor === 0) {
+      return { from, to, controls: null };
+    }
+    const first = { x: from.x + (to.x - previous.x) * fromFactor, y: from.y + (to.y - previous.y) * fromFactor };
+    const second = { x: to.x - (next.x - from.x) * toFactor, y: to.y - (next.y - from.y) * toFactor };
+    return { from, to, controls: [first, second] };
+  });
+}
+function bezierAt(segment, t) {
+  const { from, to, controls } = segment;
+  const u = 1 - t;
+  const weights = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];
+  const anchors = [from, controls[0], controls[1], to];
+  return {
+    x: anchors.reduce((sum, anchor, i) => sum + anchor.x * weights[i], 0),
+    y: anchors.reduce((sum, anchor, i) => sum + anchor.y * weights[i], 0)
+  };
+}
+function flattenPath(curve, samples = SAMPLES_PER_SEGMENT) {
+  if (isStraight(curve)) {
+    return curve.points.map((point) => ({ x: point.x, y: point.y }));
+  }
+  const flat = [];
+  const segments = pathSegments(curve);
+  segments.forEach((segment) => {
+    flat.push({ x: segment.from.x, y: segment.from.y });
+    if (segment.controls) {
+      const curved = { ...segment, controls: segment.controls };
+      for (let step = 1; step < samples; step++) {
+        flat.push(bezierAt(curved, step / samples));
+      }
+    }
+  });
+  const last = segments[segments.length - 1];
+  if (!curve.closed && last) {
+    flat.push({ x: last.to.x, y: last.to.y });
+  }
+  return flat;
+}
+
+// src/model/path/symbol.ts
+function pathBounds(points) {
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+var round = (value) => Math.round(value * 1e4) / 1e4;
+function pathToSymbol(points) {
+  if (points.length === 0) {
+    return { points: [], width: 0, height: 0 };
+  }
+  const frame = pathBounds(points);
+  const unit = (value, size) => size === 0 ? 0 : round(value / size);
+  return {
+    width: frame.width,
+    height: frame.height,
+    points: points.map((point) => {
+      const x = unit(point.x - frame.x, frame.width);
+      const y = unit(point.y - frame.y, frame.height);
+      return point.tension === void 0 ? [x, y] : [x, y, point.tension];
+    })
+  };
+}
+function symbolToPath(points, frame) {
+  return points.map((point) => {
+    const placed = { x: frame.x + point[0] * frame.width, y: frame.y + point[1] * frame.height };
+    return point[2] === void 0 ? placed : { ...placed, tension: point[2] };
+  });
+}
+
+// src/model/component/supportedTypes.ts
+var BUILT_IN_COMPONENT_TYPES = ["rollingNumber", "tickScale", "ruler"];
+function isBuiltInComponentType(value) {
+  return value !== void 0 && BUILT_IN_COMPONENT_TYPES.includes(value);
+}
+
+// src/model/component/guards.ts
+function isGenericComponent(component) {
+  return !isBuiltInComponentType(component.type);
+}
+
+// src/model/component/builtIns.ts
+var BUILT_IN_DESCRIPTORS = [
+  {
+    type: "rollingNumber",
+    group: "readout",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "none",
+    pointerScale: false,
+    size: { width: 160, height: 90 }
+  },
+  {
+    type: "tickScale",
+    group: "readout",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "none",
+    pointerScale: true,
+    size: { width: 200, height: 200 }
+  },
+  {
+    type: "ruler",
+    group: "input",
+    value: { type: "number", writable: false, default: 0 },
+    properties: {},
+    interaction: "scale",
+    pointerScale: true,
+    size: { width: 120, height: 360 }
+  },
+  {
+    type: "switch",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 52, height: 30, minWidth: 36, minHeight: 20, aspect: 52 / 30 },
+    role: "switch"
+  },
+  {
+    type: "checkbox",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      stroke: { type: "color", default: "#94a3b8" },
+      check: { type: "color", default: "#ffffff" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 160, height: 24, minWidth: 18, minHeight: 18 },
+    role: "checkbox"
+  },
+  {
+    type: "toggleButton",
+    group: "input",
+    value: { type: "boolean", writable: true, default: false },
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      stroke: { type: "color", default: "#94a3b8" },
+      textColor: { type: "color", default: "#0f172a" },
+      onTextColor: { type: "color", default: "#ffffff" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "toggle",
+    pointerScale: false,
+    size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
+    role: "button"
+  },
+  {
+    type: "button",
+    group: "action",
+    properties: {
+      accent: { type: "color", default: "#5a6bff" },
+      textColor: { type: "color", default: "#ffffff" },
+      radius: { type: "number", default: 8, min: 0, max: 200 },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 }
+    },
+    interaction: "press",
+    pointerScale: false,
+    size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
+    role: "button"
+  }
+];
+
+// src/model/component/registry.ts
+var version = 0;
+var descriptors = new Map(
+  BUILT_IN_DESCRIPTORS.map((descriptor) => [descriptor.type, descriptor])
+);
+var TYPE_NAME = /^[A-Za-z][A-Za-z0-9]*$/;
+function registerComponentDescriptor(descriptor) {
+  if (!TYPE_NAME.test(descriptor.type)) {
+    throw new Error(`'${descriptor.type}' is not a valid component type name.`);
+  }
+  if (descriptors.has(descriptor.type)) {
+    throw new Error(`A component of type '${descriptor.type}' is already defined.`);
+  }
+  descriptors.set(descriptor.type, descriptor);
+  version += 1;
+  return () => {
+    if (descriptors.get(descriptor.type) === descriptor) {
+      descriptors.delete(descriptor.type);
+      version += 1;
+    }
+  };
+}
+function componentRegistryVersion() {
+  return version;
+}
+function getComponentDescriptor(type) {
+  return type === void 0 ? void 0 : descriptors.get(type);
+}
+function componentTypes() {
+  return [...descriptors.keys()];
+}
+function isComponentType(value) {
+  return getComponentDescriptor(value) !== void 0;
+}
+
+// src/model/component/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/component/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/sflLanguage/lexing/cursor.ts
 var SourceCursor = class {
   constructor(input) {
@@ -510,9 +893,11 @@ var NAMED_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
+  "Component",
   "Shape",
   "Text",
   "Isometric",
+  "Dimension",
   "Link",
   "Connection",
   "Layout",
@@ -528,6 +913,7 @@ var NAMED_BLOCK_KINDS = [
 ];
 var SIDES = ["top", "bottom", "left", "right"];
 var isSide = (s) => SIDES.includes(s);
+var isComponentBlockKind = (kind) => kind === "Component" || kind === "Widget";
 var isNamedBlockKind = (s) => NAMED_BLOCK_KINDS.includes(s);
 
 // src/sflLanguage/parsing/values.ts
@@ -967,14 +1353,14 @@ var DocumentParser = class {
     if (header.value !== "sfl") {
       throw new SflParseError(`document must start with 'sfl', got '${header.value}'`, header.line, header.col);
     }
-    const version = this.cursor.expect("number", "version number");
+    const version2 = this.cursor.expect("number", "version number");
     this.cursor.skipNewlines();
     const blocks = [];
     while (!this.cursor.at("eof")) {
       blocks.push(this.blocks.parseBlock());
       this.cursor.skipNewlines();
     }
-    return { version: version.value, blocks };
+    return { version: version2.value, blocks };
   }
 };
 
@@ -1285,6 +1671,11 @@ function isChartObject(canvasObject) {
   return canvasObject.objectType === "chart" && canvasObject.chart !== void 0;
 }
 
+// src/sflSemantic/canvasObjects/artifacts/dimension/types.ts
+function isDimensionObject(canvasObject) {
+  return canvasObject.objectType === "dimension" && canvasObject.dimension !== void 0;
+}
+
 // src/sflSemantic/canvasObjects/artifacts/isometric/types.ts
 function isIsometricObject(canvasObject) {
   return canvasObject.objectType === "isometric" && canvasObject.isometric !== void 0;
@@ -1421,7 +1812,9 @@ var CANVAS_OBJECT_BLOCK_KINDS = [
   "Path",
   "Chart",
   "Widget",
-  "Isometric"
+  "Component",
+  "Isometric",
+  "Dimension"
 ];
 var canvasObjectBlockKinds = new Set(CANVAS_OBJECT_BLOCK_KINDS);
 function isCanvasObjectBlockKind(kind) {
@@ -1827,21 +2220,77 @@ function resolveChartObject(base, block2, properties, symbolDefinitions, mergedP
   };
 }
 
+// src/sflSemantic/canvasObjects/artifacts/dimension/reader.ts
+function readPoint(value, origin) {
+  const [x, y] = tupleValues(value) ?? [];
+  return { x: origin.x + (x ?? 0), y: origin.y + (y ?? 0) };
+}
+function readDimension(properties, origin) {
+  return {
+    start: readPoint(properties.get("start"), origin),
+    end: readPoint(properties.get("end"), origin),
+    offset: asNumber(properties.get("offset")) ?? 0,
+    unit: asString(properties.get("unit"))
+  };
+}
+
+// src/sflSemantic/canvasObjects/artifacts/dimension/resolver.ts
+function resolveDimensionObject(base, properties, origin) {
+  return {
+    ...base,
+    objectType: "dimension",
+    dimension: readDimension(properties, origin)
+  };
+}
+
 // src/sflSemantic/canvasObjects/artifacts/isometric/reader.ts
-function readIsometric(properties, depth) {
+function readFootprintPoint(value) {
+  if (value.type !== "list" || value.values.length < 2) {
+    return [];
+  }
+  const x = asNumber(value.values[0]);
+  const y = asNumber(value.values[1]);
+  const tension = value.values[2] === void 0 ? void 0 : asNumber(value.values[2]);
+  if (x === void 0 || y === void 0) {
+    return [];
+  }
+  return [tension === void 0 ? { x, y } : { x, y, tension }];
+}
+function asPolygon(points, tension) {
+  const flat = flattenPath({ points, tension, closed: true });
+  return flat.length >= 3 ? flat.map((point) => [point.x, point.y]) : void 0;
+}
+function readFootprint(value, symbolDefs) {
+  if (value?.type === "list") {
+    return asPolygon(value.values.flatMap(readFootprintPoint), 0);
+  }
+  const name = asString(value);
+  const definition = name ? symbolDefs.get(name) : void 0;
+  if (!definition) {
+    return void 0;
+  }
+  const points = definition.points.map(([x, y], index) => {
+    const tension = definition.pointTensions?.[index];
+    return tension === void 0 ? { x, y } : { x, y, tension };
+  });
+  return asPolygon(points, definition.tension ?? 0);
+}
+function readIsometric(properties, depth, symbolDefs) {
   return {
     depth,
-    icon: asString(properties.get("icon"))
+    icon: asString(properties.get("icon")),
+    footprint: readFootprint(properties.get("symbol"), symbolDefs),
+    form: asString(properties.get("shape")) === "sphere" ? "sphere" : "box"
   };
 }
 
 // src/sflSemantic/canvasObjects/artifacts/isometric/resolver.ts
-function resolveIsometricObject(base, block2, properties, layoutProperty) {
+function resolveIsometricObject(base, block2, properties, layoutProperty, symbolDefinitions) {
   const size = tupleValues(layoutProperty(block2, "size"));
   return {
     ...base,
     objectType: "isometric",
-    isometric: readIsometric(properties, size?.[2] ?? 24)
+    isometric: readIsometric(properties, size?.[2] ?? 24, symbolDefinitions)
   };
 }
 
@@ -1854,7 +2303,12 @@ function readPath(p, origin) {
     }
     const x = asNumber(value.values[0]);
     const y = asNumber(value.values[1]);
-    return x !== void 0 && y !== void 0 ? [{ x: origin.x + x, y: origin.y + y }] : [];
+    const tension = value.values[2] === void 0 ? void 0 : asNumber(value.values[2]);
+    if (x === void 0 || y === void 0) {
+      return [];
+    }
+    const point = { x: origin.x + x, y: origin.y + y };
+    return [tension === void 0 ? point : { ...point, tension }];
   }) : [];
   return {
     points,
@@ -1912,7 +2366,7 @@ function declaredCanvasObjectKind(block2, properties) {
   if (block2.kind === "Chart") {
     return "chart";
   }
-  if (block2.kind === "Widget") {
+  if (isComponentBlockKind(block2.kind)) {
     return asString(properties.get("type")) ?? "widget";
   }
   if (block2.kind === "Text") {
@@ -1921,6 +2375,9 @@ function declaredCanvasObjectKind(block2, properties) {
   if (block2.kind === "Isometric") {
     return "isometric";
   }
+  if (block2.kind === "Dimension") {
+    return "dimension";
+  }
   return asString(properties.get("kind")) ?? "";
 }
 function canvasObjectTypeForKind(kind) {
@@ -1936,12 +2393,15 @@ function canvasObjectTypeForKind(kind) {
   if (kind === "chart") {
     return "chart";
   }
-  if (kind === "rollingNumber" || kind === "tickScale" || kind === "ruler") {
-    return "widget";
+  if (isBuiltInComponentType(kind)) {
+    return "component";
   }
   if (kind === "isometric") {
     return "isometric";
   }
+  if (kind === "dimension") {
+    return "dimension";
+  }
   return "shape";
 }
 function classifyCanvasObject(block2, properties, symbolDefinitions) {
@@ -1949,7 +2409,7 @@ function classifyCanvasObject(block2, properties, symbolDefinitions) {
   const shapeReference = asString(properties.get("shape"));
   const symbol = shapeReference ? symbolDefinitions.get(shapeReference) : void 0;
   return {
-    objectType: block2.kind === "Widget" ? "widget" : canvasObjectTypeForKind(kind),
+    objectType: isComponentBlockKind(block2.kind) ? "component" : canvasObjectTypeForKind(kind),
     kind,
     shapeType: symbol ? "symbol" : shapeReference,
     symbol
@@ -2004,18 +2464,20 @@ function resolveCanvasObject(block2, origin, context, frameId, positionOverride)
     case "chart":
       return resolveChartObject(base, block2, properties, symbolDefs, mergedProps);
     case "isometric":
-      return resolveIsometricObject(base, block2, properties, layoutProp);
+      return resolveIsometricObject(base, block2, properties, layoutProp, symbolDefs);
     case "path":
       return resolvePathObject(base, properties, origin);
+    case "dimension":
+      return resolveDimensionObject(base, properties, origin);
     case "swimlane":
       return resolveSwimlaneObject(base, properties);
     case "frame":
       return { ...base, objectType: "frame" };
-    case "widget":
+    case "component":
       return {
         ...base,
-        objectType: "widget",
-        widget: {
+        objectType: "component",
+        component: {
           type: asString(properties.get("type")) ?? "rollingNumber",
           value: asString(properties.get("value")) ?? "0",
           digits: asNumber(properties.get("digits")),
@@ -2162,17 +2624,24 @@ function readShaderDefinition(block2) {
 // src/sflSemantic/definitions/symbols.ts
 function readSymbolPoints(block2) {
   const value = directProperties(block2).get("points");
+  const points = [];
+  const tensions = [];
   if (value?.type !== "list") {
-    return [];
+    return { points, tensions };
   }
-  return value.values.flatMap((item) => {
+  for (const item of value.values) {
     if (item.type !== "list" || item.values.length < 2) {
-      return [];
+      continue;
     }
     const x = asNumber(item.values[0]);
     const y = asNumber(item.values[1]);
-    return x === void 0 || y === void 0 ? [] : [[x, y]];
-  });
+    if (x === void 0 || y === void 0) {
+      continue;
+    }
+    points.push([x, y]);
+    tensions.push(item.values[2] === void 0 ? void 0 : asNumber(item.values[2]));
+  }
+  return { points, tensions };
 }
 function readSymbolPorts(block2) {
   const ports = childBlocks(block2).filter((child) => child.kind === "Port").flatMap((port) => {
@@ -2185,13 +2654,14 @@ function readSymbolPorts(block2) {
   return ports.length > 0 ? ports : void 0;
 }
 function readSymbolDefinition(block2) {
-  const points = readSymbolPoints(block2);
+  const { points, tensions } = readSymbolPoints(block2);
   if (points.length < 2) {
     return void 0;
   }
   return {
     name: block2.name,
     points,
+    pointTensions: tensions.some((tension) => tension !== void 0) ? tensions : void 0,
     tension: asNumber(directProperties(block2).get("tension")),
     ports: readSymbolPorts(block2)
   };
@@ -2448,18 +2918,18 @@ function collectUnsupportedGridShapes(doc) {
   return diagnostics;
 }
 
-// src/sflSemantic/diagnostics/widgets.ts
-function collectUnsupportedWidgetTypes(sflDocument) {
+// src/sflSemantic/diagnostics/components.ts
+function collectUnsupportedComponentTypes(sflDocument) {
   const diagnostics = [];
   const visit = (block2) => {
-    if (block2.kind === "Widget") {
+    if (isComponentBlockKind(block2.kind)) {
       const type = asString(directProperties(block2).get("type")) ?? "rollingNumber";
-      if (type !== "rollingNumber" && type !== "tickScale" && type !== "ruler") {
+      if (!isComponentType(type)) {
         diagnostics.push({
           severity: "warning",
-          code: "unsupported-widget-type",
+          code: "unsupported-component-type",
           ownerId: block2.name,
-          message: `Unsupported widget type '${type}'. Supported: rollingNumber, tickScale, ruler.`
+          message: `Unsupported component type '${type}'. Supported: ${componentTypes().join(", ")}.`
         });
       }
     }
@@ -2483,7 +2953,7 @@ function createCanvasResolution(doc) {
       ...collectUnsupportedChartTypes(doc),
       ...collectUnsupportedGridShapes(doc),
       ...collectEmptySeries(doc),
-      ...collectUnsupportedWidgetTypes(doc)
+      ...collectUnsupportedComponentTypes(doc)
     ],
     canvasObjectResolutionContext: createCanvasObjectPropertyReaders(definitions)
   };
@@ -2732,43 +3202,25 @@ function freeformPathData(geometry) {
   if (geometry.points.length === 0) {
     return "";
   }
-  if (geometry.points.length < 3 || geometry.tension <= 0) {
+  if (isStraight(geometry)) {
     return linearPathData(geometry);
   }
-  return smoothPathData(geometry);
-}
-function linearPathData(geometry) {
-  const [first, ...remaining] = geometry.points;
-  const segments = remaining.map((point) => `L ${point.x} ${point.y}`).join(" ");
-  return `M ${first.x} ${first.y} ${segments}${geometry.closed ? " Z" : ""}`;
-}
-function smoothPathData(geometry) {
   const first = geometry.points[0];
-  const segmentCount = geometry.closed ? geometry.points.length : geometry.points.length - 1;
   const commands = [`M ${first.x} ${first.y}`];
-  for (let index = 0; index < segmentCount; index++) {
-    commands.push(curveSegmentCommand(geometry, index));
+  for (const { to, controls } of pathSegments(geometry)) {
+    commands.push(
+      controls ? `C ${controls[0].x} ${controls[0].y} ${controls[1].x} ${controls[1].y} ${to.x} ${to.y}` : `L ${to.x} ${to.y}`
+    );
   }
   if (geometry.closed) {
     commands.push("Z");
   }
   return commands.join(" ");
 }
-function curveSegmentCommand(geometry, index) {
-  const previous = freeformPointAt(geometry, index - 1);
-  const start = freeformPointAt(geometry, index);
-  const end = freeformPointAt(geometry, index + 1);
-  const next = freeformPointAt(geometry, index + 2);
-  const factor = geometry.tension / 6;
-  const firstControl = { x: start.x + (end.x - previous.x) * factor, y: start.y + (end.y - previous.y) * factor };
-  const secondControl = { x: end.x - (next.x - start.x) * factor, y: end.y - (next.y - start.y) * factor };
-  return `C ${firstControl.x} ${firstControl.y} ${secondControl.x} ${secondControl.y} ${end.x} ${end.y}`;
-}
-function freeformPointAt(geometry, index) {
-  if (geometry.closed) {
-    return geometry.points[(index + geometry.points.length) % geometry.points.length];
-  }
-  return geometry.points[Math.max(0, Math.min(geometry.points.length - 1, index))];
+function linearPathData(geometry) {
+  const [first, ...remaining] = geometry.points;
+  const segments = remaining.map((point) => `L ${point.x} ${point.y}`).join(" ");
+  return `M ${first.x} ${first.y} ${segments}${geometry.closed ? " Z" : ""}`;
 }
 
 // src/renderScene/charts/primitives/radarShape.ts
@@ -3267,8 +3719,8 @@ function createRoundedCorner(previous, corner, next, maximumRadius) {
   const outgoing = { x: next.x - corner.x, y: next.y - corner.y };
   const incomingIsAxisAligned = incoming.x === 0 || incoming.y === 0;
   const outgoingIsAxisAligned = outgoing.x === 0 || outgoing.y === 0;
-  const isStraight = incoming.x === 0 && outgoing.x === 0 || incoming.y === 0 && outgoing.y === 0;
-  if (!incomingIsAxisAligned || !outgoingIsAxisAligned || isStraight) {
+  const isStraight2 = incoming.x === 0 && outgoing.x === 0 || incoming.y === 0 && outgoing.y === 0;
+  if (!incomingIsAxisAligned || !outgoingIsAxisAligned || isStraight2) {
     return null;
   }
   const radius = Math.min(maximumRadius, axisLength(incoming) * 0.4, axisLength(outgoing) * 0.4);
@@ -4690,6 +5142,6 @@ function localShapePath(type, x, y, width, height) {
   }
 }
 
-export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, CORNER_RADIUS_ATTR, DEFAULT_FONT, DEFAULT_HEATMAP_ZONES, DEFAULT_HEX_RADIUS, DEFAULT_ZONE_FILL, DOM_CONTRACT_VERSION, EMPTY_BOUNDS, ISOMETRIC_LABEL_OFFSET_ATTR, ISOMETRIC_SIZE_ATTR, LABEL_WIDTH, LEADER_INSET, PATH_CLOSED_ATTR, PATH_POINTS_ATTR, PATH_POINT_INDEX_ATTR, PATH_TENSION_ATTR, SQUARE_CORNER_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, VISIBLE_ISOMETRIC_FACES, angleForAxisValue, axisBands, axisLabelProp, barCategoryCount, barLabelSize, barPath, barShapePath, bottomRoundedRectPath, boxBounds, calculateLinkRoute, canonicalizeSource, categoryProp, chartText, chartTicks, clipSegmentToRect, colorWithAlpha, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, finite, formatBarLabel, formatFieldValue, freeformPathData, gapInsetAngle, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isChartObject, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelGapDash, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, personLabelArea, pieApexRadius, pieArcPoint, pieUsesInnerArc, pillCornerRadius, pillPath, pointAtNormalizedPort, pointAtPort, radarCategoryCount, radarPointAt, radarRadius, radarRadiusForValue, radarSeriesPath, radarValueAtPoint, radarVertexPoint, relativeOffsetOnRectangleSide, renderPieLabels, representativeColor, resolveChartShadow, resolvePieRadii, rightRoundedRectPath, rotatedBounds, roundedBarPath, roundedOrthogonalPathData, roundedPolygonPath, rowTop, ruleAtProp, ruleTextProp, sameHueContrastColor, sameHueTint, segmentedBarPath, seriesColorProp, seriesLabelOffsetXProp, seriesLabelOffsetYProp, seriesLabelProp, seriesValueColorProp, seriesValueProp, sflToCanvasState, stackRank, stackSequence, stackedSegment, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
-//# sourceMappingURL=chunk-BYMIYXP5.js.map
-//# sourceMappingURL=chunk-BYMIYXP5.js.map
+export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, CORNER_RADIUS_ATTR, DEFAULT_FONT, DEFAULT_HEATMAP_ZONES, DEFAULT_HEX_RADIUS, DEFAULT_ROLLING_NUMBER_STYLE, DEFAULT_ZONE_FILL, DOM_CONTRACT_VERSION, EMPTY_BOUNDS, ISOMETRIC_LABEL_OFFSET_ATTR, ISOMETRIC_SIZE_ATTR, LABEL_WIDTH, LEADER_INSET, PATH_CLOSED_ATTR, PATH_POINTS_ATTR, PATH_POINT_INDEX_ATTR, PATH_TENSION_ATTR, SQUARE_CORNER_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, VISIBLE_ISOMETRIC_FACES, angleForAxisValue, axisBands, axisLabelProp, barCategoryCount, barLabelSize, barPath, barShapePath, bottomRoundedRectPath, boxBounds, calculateLinkRoute, canonicalizeSource, categoryProp, chartText, chartTicks, cleanFootprint, clipSegmentToRect, colorWithAlpha, componentRegistryVersion, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, extrudeFootprint, finite, flattenPath, formatBarLabel, formatFieldValue, formatRollingNumber, freeformPathData, gapInsetAngle, getComponentDescriptor, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isBuiltInComponentType, isChartObject, isDimensionObject, isGenericComponent, isHorizontalBar, isIsometricObject, isLightColor, isPathObject, isSwimlaneObject, isometricBounds, isometricFaceCenter, isometricFaces, isometricTopFaceCenter, labelGapDash, leftRoundedRectPath, linePathData, localShapePath, mapChartValue, maxApexCornerRadius, maxPieCornerRadius, paint, parseSource, pathBounds, pathToSymbol, personLabelArea, pieApexRadius, pieArcPoint, pieUsesInnerArc, pillCornerRadius, pillPath, pointAtNormalizedPort, pointAtPort, radarCategoryCount, radarPointAt, radarRadius, radarRadiusForValue, radarSeriesPath, radarValueAtPoint, radarVertexPoint, registerComponentDescriptor, relativeOffsetOnRectangleSide, renderPieLabels, representativeColor, resolveChartShadow, resolvePieRadii, resolveRollingNumberStyle, rightRoundedRectPath, rotatedBounds, roundedBarPath, roundedOrthogonalPathData, roundedPolygonPath, rowTop, ruleAtProp, ruleTextProp, sameHueContrastColor, sameHueTint, segmentedBarPath, seriesColorProp, seriesLabelOffsetXProp, seriesLabelOffsetYProp, seriesLabelProp, seriesValueColorProp, seriesValueProp, sflToCanvasState, shadeFill, stackRank, stackSequence, stackedSegment, symbolToPath, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
+//# sourceMappingURL=chunk-4G2R7PEL.js.map
+//# sourceMappingURL=chunk-4G2R7PEL.js.map