stickyflow 0.5.0 → 0.7.0

package/dist/{chunk-IEHE6WVN.js → chunk-JQK4IGXJ.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,114 @@ 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/categories.ts
+var COMPONENT_CATEGORIES = [
+  { id: "action", label: "Actions" },
+  { id: "selection", label: "Selection" },
+  { id: "value", label: "Value input" },
+  { id: "text", label: "Text input" },
+  { id: "indicator", label: "Indicators" },
+  { id: "instrument", label: "Instruments" },
+  { id: "navigation", label: "Navigation" },
+  { id: "container", label: "Containers" }
+];
+
 // src/model/component/supportedTypes.ts
 var BUILT_IN_COMPONENT_TYPES = ["rollingNumber", "tickScale", "ruler"];
 function isBuiltInComponentType(value) {
@@ -127,6 +347,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "rollingNumber",
     group: "readout",
+    category: "indicator",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -136,6 +357,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "tickScale",
     group: "readout",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "none",
@@ -145,6 +367,7 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "ruler",
     group: "input",
+    category: "instrument",
     value: { type: "number", writable: false, default: 0 },
     properties: {},
     interaction: "scale",
@@ -154,11 +377,13 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "switch",
     group: "input",
+    category: "selection",
     value: { type: "boolean", writable: true, default: false },
     properties: {
       accent: { type: "color", default: "#5a6bff" },
       track: { type: "color", default: "#cbd5e1" },
-      thumb: { type: "color", default: "#ffffff" }
+      thumb: { type: "color", default: "#ffffff" },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -168,13 +393,15 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "checkbox",
     group: "input",
+    category: "selection",
     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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -184,13 +411,15 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "toggleButton",
     group: "input",
+    category: "action",
     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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "toggle",
     pointerScale: false,
@@ -200,16 +429,153 @@ var BUILT_IN_DESCRIPTORS = [
   {
     type: "button",
     group: "action",
+    category: "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 }
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 160, min: 0, max: 2e3, step: 10 }
     },
     interaction: "press",
     pointerScale: false,
     size: { width: 120, height: 40, minWidth: 40, minHeight: 24 },
     role: "button"
+  },
+  {
+    type: "slider",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 40 },
+    properties: {
+      variant: { type: "enum", default: "line", options: ["line", "field"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      ticks: { type: "number", default: 0, min: 0, max: 200 },
+      tickColor: { type: "color", default: "#94a3b8" },
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      surface: { type: "color", default: "#eef1f6" },
+      fill: { type: "color", default: "#cbd5e1" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      radius: { type: "number", default: 10, min: 0, max: 200 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" },
+      trackHeight: { type: "number", default: 6, min: 1, max: 80 },
+      thumbSize: { type: "number", default: 56, min: 20, max: 100, step: 5 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "slide",
+    pointerScale: false,
+    size: { width: 220, height: 28, minWidth: 60, minHeight: 12 },
+    role: "slider"
+  },
+  {
+    type: "range",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 25 },
+    properties: {
+      variant: { type: "enum", default: "line", options: ["line", "field"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      ticks: { type: "number", default: 0, min: 0, max: 200 },
+      tickColor: { type: "color", default: "#94a3b8" },
+      valueEnd: { type: "number", default: 75 },
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      surface: { type: "color", default: "#eef1f6" },
+      fill: { type: "color", default: "#cbd5e1" },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      radius: { type: "number", default: 10, min: 0, max: 200 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      thumb: { type: "color", default: "#ffffff" },
+      trackHeight: { type: "number", default: 6, min: 1, max: 80 },
+      thumbSize: { type: "number", default: 56, min: 20, max: 100, step: 5 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "range",
+    pointerScale: false,
+    size: { width: 220, height: 28, minWidth: 60, minHeight: 12 },
+    role: "slider"
+  },
+  {
+    type: "progress",
+    group: "readout",
+    category: "indicator",
+    value: { type: "number", writable: false, default: 60 },
+    properties: {
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      variant: { type: "enum", default: "bar", options: ["bar", "ring"] },
+      direction: { type: "enum", default: "horizontal", options: ["horizontal", "vertical"] },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#e2e8f0" },
+      thickness: { type: "number", default: 10, min: 1, max: 80 },
+      rounded: { type: "boolean", default: true },
+      display: { type: "enum", default: "none", options: ["none", "percent", "value"] },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 300, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "none",
+    pointerScale: false,
+    size: { width: 220, height: 12, minWidth: 20, minHeight: 4 },
+    role: "progressbar"
+  },
+  {
+    type: "segmented",
+    group: "input",
+    category: "selection",
+    value: { type: "number", writable: true, default: 0 },
+    properties: {
+      options: { type: "string", default: "Day,Week,Month" },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#e2e8f0" },
+      textColor: { type: "color", default: "#475569" },
+      activeTextColor: { type: "color", default: "#ffffff" },
+      radius: { type: "number", default: 200, min: 0, max: 200 },
+      inset: { type: "number", default: 3, min: 0, max: 20 },
+      fontSize: { type: "number", default: 14, min: 6, max: 200 },
+      animate: { type: "number", default: 200, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "pick",
+    pointerScale: false,
+    size: { width: 300, height: 40, minWidth: 80, minHeight: 20 },
+    role: "radiogroup"
+  },
+  {
+    type: "knob",
+    group: "input",
+    category: "value",
+    value: { type: "number", writable: true, default: 40 },
+    properties: {
+      min: { type: "number", default: 0 },
+      max: { type: "number", default: 100 },
+      step: { type: "number", default: 0, min: 0 },
+      start: { type: "number", default: 225, min: 0, max: 360 },
+      sweep: { type: "number", default: 270, min: 30, max: 360 },
+      accent: { type: "color", default: "#5a6bff" },
+      track: { type: "color", default: "#cbd5e1" },
+      face: { type: "color", default: "#f1f5f9" },
+      dot: { type: "color", default: "#0f172a" },
+      thickness: { type: "number", default: 8, min: 1, max: 80 },
+      rounded: { type: "boolean", default: true },
+      display: { type: "enum", default: "value", options: ["none", "value", "percent"] },
+      textColor: { type: "color", default: "#0f172a" },
+      fontSize: { type: "number", default: 16, min: 6, max: 200 },
+      animate: { type: "number", default: 0, min: 0, max: 2e3, step: 10 }
+    },
+    interaction: "turn",
+    pointerScale: false,
+    size: { width: 96, height: 96, minWidth: 40, minHeight: 40, aspect: 1 },
+    role: "slider"
   }
 ];
 
@@ -689,6 +1055,7 @@ var NAMED_BLOCK_KINDS = [
   "Shape",
   "Text",
   "Isometric",
+  "Dimension",
   "Link",
   "Connection",
   "Layout",
@@ -1462,6 +1829,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;
@@ -1599,7 +1971,8 @@ var CANVAS_OBJECT_BLOCK_KINDS = [
   "Chart",
   "Widget",
   "Component",
-  "Isometric"
+  "Isometric",
+  "Dimension"
 ];
 var canvasObjectBlockKinds = new Set(CANVAS_OBJECT_BLOCK_KINDS);
 function isCanvasObjectBlockKind(kind) {
@@ -2005,21 +2378,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)
   };
 }
 
@@ -2032,7 +2461,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,
@@ -2099,6 +2533,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) {
@@ -2120,6 +2557,9 @@ function canvasObjectTypeForKind(kind) {
   if (kind === "isometric") {
     return "isometric";
   }
+  if (kind === "dimension") {
+    return "dimension";
+  }
   return "shape";
 }
 function classifyCanvasObject(block2, properties, symbolDefinitions) {
@@ -2182,9 +2622,11 @@ 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":
@@ -2318,12 +2760,13 @@ function resolveCanvasTree(model, resolution) {
 function readShaderDefinition(block2) {
   const properties = directProperties(block2);
   const program = asString(properties.get("program"));
+  const surfacePadding = asNumber(properties.get("surfacePadding"));
   if (!program) {
     return void 0;
   }
   const parameters = {};
   for (const [key, value] of properties) {
-    if (key === "program") {
+    if (key === "program" || key === "surfacePadding") {
       continue;
     }
     const number = asNumber(value);
@@ -2334,23 +2777,35 @@ function readShaderDefinition(block2) {
       parameters[key] = text === "true" ? true : text === "false" ? false : text;
     }
   }
-  return { name: block2.name, program, parameters };
+  return {
+    name: block2.name,
+    program,
+    ...surfacePadding === void 0 ? {} : { surfacePadding: Math.max(0, surfacePadding) },
+    parameters
+  };
 }
 
 // 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) => {
@@ -2363,13 +2818,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)
   };
@@ -2910,43 +3366,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
@@ -3445,8 +3883,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);
@@ -4868,6 +5306,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_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, clipSegmentToRect, colorWithAlpha, componentRegistryVersion, computeBoxplotStats, contrastTextColor, cornersRoundedRectPath, createPieGeometry, createPieSlicePath, createVerticalErrorWhiskerNode, deriveFaceFills, edgePointToward, elementCenter, ellipsizeToWidth, errorBarRange, estimateTextWidth, finite, formatBarLabel, formatFieldValue, formatRollingNumber, freeformPathData, gapInsetAngle, getComponentDescriptor, getLineMidpoint, heuristicRichMeasure, horizontalRows, interpolateHexColorStops, isBuiltInComponentType, isChartObject, isGenericComponent, 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, 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, stackRank, stackSequence, stackedSegment, tag, tokenizeSource, topRoundedRectPath, wrapText, zoneColorAtValue };
-//# sourceMappingURL=chunk-IEHE6WVN.js.map
-//# sourceMappingURL=chunk-IEHE6WVN.js.map
+export { AXIS_COS, AXIS_SIN, BAR_LABEL, CATEGORY_LABEL_ROW, CHART_COLORS, CHART_TITLE_PROP, CHART_TYPES, COMPONENT_CATEGORIES, 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, componentTypes, 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-JQK4IGXJ.js.map
+//# sourceMappingURL=chunk-JQK4IGXJ.js.map