stickyflow 0.9.2 → 0.10.0

package/dist/{chunk-C25NWWIH.cjs → chunk-LSEMXRB5.cjs}

@@ -191,23 +191,135 @@ function extrudeFootprint(frame, footprint, cornerRadius = 0) {
   return { top, sides };
 }
 
-// src/model/isometricObject/shading.ts
-function clamp255(value) {
-  return Math.max(0, Math.min(255, Math.round(value)));
-}
-function hexToRgb(hex) {
-  const match = /^#?([0-9a-fA-F]{6})$/.exec(hex.trim());
+// src/model/color/conversion.ts
+var hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+  if (!result) {
+    return { r: 255, g: 255, b: 255, a: 1 };
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+    a: result[4] === void 0 ? 1 : parseInt(result[4], 16) / 255
+  };
+};
+var parseHexRgb = (value) => {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
   if (!match) {
     return null;
   }
-  const n = Number.parseInt(match[1], 16);
+  const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join("") : match[1];
+  const n = Number.parseInt(digits, 16);
   return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+var rgbToHex = (r, g, b, a) => {
+  const channel = (x) => {
+    const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  const alphaChannel = a === void 0 || a >= 1 ? "" : channel(a * 255);
+  return `#${channel(r)}${channel(g)}${channel(b)}${alphaChannel}`;
+};
+var hsvToRgb = (h, s, v) => {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r = 0, g = 0, b = 0;
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+};
+var rgbToHsv = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === r) {
+      h = 60 * ((g - b) / delta % 6);
+    } else if (max === g) {
+      h = 60 * ((b - r) / delta + 2);
+    } else if (max === b) {
+      h = 60 * ((r - g) / delta + 4);
+    }
+  }
+  if (h < 0) {
+    h += 360;
+  }
+  const s = max === 0 ? 0 : delta / max;
+  const v = max;
+  return { h, s, v };
+};
+
+// src/model/color/interpolation.ts
+function mixHexColors(start, end, ratio) {
+  const startRgb = hexToRgb(start);
+  const endRgb = hexToRgb(end);
+  const startAlpha = startRgb.a ?? 1;
+  const endAlpha = endRgb.a ?? 1;
+  return rgbToHex(
+    Math.round(startRgb.r + (endRgb.r - startRgb.r) * ratio),
+    Math.round(startRgb.g + (endRgb.g - startRgb.g) * ratio),
+    Math.round(startRgb.b + (endRgb.b - startRgb.b) * ratio),
+    startAlpha + (endAlpha - startAlpha) * ratio
+  );
 }
-function rgbToHex(r, g, b) {
-  return `#${[r, g, b].map((channel) => clamp255(channel).toString(16).padStart(2, "0")).join("")}`;
+function interpolateHexColorStops(stops, position) {
+  const sortedStops = [...stops].sort((first2, second) => first2.position - second.position);
+  const first = sortedStops[0];
+  const last = sortedStops[sortedStops.length - 1];
+  if (position <= first.position) {
+    return first.color;
+  }
+  if (position >= last.position) {
+    return last.color;
+  }
+  for (let index = 0; index < sortedStops.length - 1; index++) {
+    const start = sortedStops[index];
+    const end = sortedStops[index + 1];
+    if (position >= start.position && position <= end.position) {
+      const range = end.position - start.position;
+      const ratio = range === 0 ? 0 : (position - start.position) / range;
+      return mixHexColors(start.color, end.color, ratio);
+    }
+  }
+  return last.color;
 }
+
+// src/model/isometricObject/shading.ts
 function multiply(hex, factor) {
-  const rgb = hexToRgb(hex);
+  const rgb = parseHexRgb(hex);
   if (!rgb) {
     return hex;
   }
@@ -1070,14 +1182,16 @@ var NAMED_BLOCK_KINDS = [
   "Symbol",
   "Port",
   "DataSource",
-  "Repeat"
+  "Repeat",
+  "Template",
+  "Use"
 ];
 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
+// src/sflLanguage/parsing/pathSegments.ts
 function parsePathSegments(cursor) {
   const segments = [cursor.expect("ident", "path identifier").value];
   while (cursor.at("dot")) {
@@ -1086,111 +1200,6 @@ function parsePathSegments(cursor) {
   }
   return segments;
 }
-function parseEndpoint(cursor) {
-  const segments = parsePathSegments(cursor);
-  let side;
-  let fraction;
-  if (cursor.at("comma")) {
-    cursor.next();
-    const sideToken = cursor.expect("ident", 'side after ","');
-    if (!isSide(sideToken.value)) {
-      throw new SflParseError(
-        `expected a side (top/right/bottom/left), got '${sideToken.value}'`,
-        sideToken.line,
-        sideToken.col
-      );
-    }
-    side = sideToken.value;
-    if (cursor.at("lparen")) {
-      cursor.next();
-      fraction = cursor.expectNumber('fraction inside "("');
-      cursor.expect("rparen", "')'");
-    }
-  }
-  return { type: "endpoint", segments, side, fraction };
-}
-function parseList(cursor) {
-  cursor.expect("lbracket", "'['");
-  const values = [];
-  cursor.skipNewlines();
-  if (!cursor.at("rbracket")) {
-    values.push(parseValue(cursor, false));
-    cursor.skipNewlines();
-    while (cursor.at("comma")) {
-      cursor.next();
-      cursor.skipNewlines();
-      if (cursor.at("rbracket")) {
-        break;
-      }
-      values.push(parseValue(cursor, false));
-      cursor.skipNewlines();
-    }
-  }
-  cursor.expect("rbracket", "']'");
-  return { type: "list", values };
-}
-var ARITHMETIC = /* @__PURE__ */ new Set(["+", "-", "*", "/", ">", "<", ">=", "<=", "==", "!=", "&&", "||"]);
-function startsComputed(cursor) {
-  const first = cursor.peek();
-  if (first.type === "op" && first.value === "-") {
-    return true;
-  }
-  if (first.type !== "number" && first.type !== "ident" && first.type !== "lparen") {
-    return false;
-  }
-  for (let offset = 0; ; offset++) {
-    const token = cursor.peek(offset);
-    if (token.type === "newline" || token.type === "semi" || token.type === "rbrace" || token.type === "eof") {
-      return false;
-    }
-    if (token.type === "lparen" || token.type === "op" && ARITHMETIC.has(token.value)) {
-      return true;
-    }
-    if (token.type === "ident" && cursor.peek(offset - 1).type === "comma") {
-      return true;
-    }
-    if (offset === 0 && token.type === "ident" && cursor.peek(1).type === "comma") {
-      return true;
-    }
-  }
-}
-function parseComputed(cursor) {
-  const items = [parseExpression(cursor)];
-  while (cursor.at("comma")) {
-    cursor.next();
-    items.push(parseExpression(cursor));
-  }
-  return { type: "expr", items };
-}
-function parseValue(cursor, allowTuple = true) {
-  if (allowTuple && startsComputed(cursor)) {
-    return parseComputed(cursor);
-  }
-  const token = cursor.peek();
-  switch (token.type) {
-    case "string":
-      cursor.next();
-      return { type: "string", value: token.value };
-    case "lbracket":
-      return parseList(cursor);
-    case "number": {
-      const firstValue = cursor.expectNumber("number");
-      if (!allowTuple || !cursor.at("comma")) {
-        return { type: "number", value: firstValue };
-      }
-      const values = [firstValue];
-      while (cursor.at("comma")) {
-        cursor.next();
-        values.push(cursor.expectNumber("number in tuple"));
-      }
-      return { type: "tuple", values };
-    }
-    case "ident":
-      return { type: "ident", segments: parsePathSegments(cursor) };
-    default:
-      throw new SflParseError(`expected a value, got '${token.value || token.type}'`, token.line, token.col);
-  }
-}
 
 // src/sflLanguage/parsing/expressions.ts
 var COMPARISONS = /* @__PURE__ */ new Set([">", "<", ">=", "<=", "==", "!="]);
@@ -1334,6 +1343,113 @@ function expectEnd(cursor, what) {
   }
 }
 
+// src/sflLanguage/parsing/values.ts
+function parseEndpoint(cursor) {
+  const segments = parsePathSegments(cursor);
+  let side;
+  let fraction;
+  if (cursor.at("comma")) {
+    cursor.next();
+    const sideToken = cursor.expect("ident", 'side after ","');
+    if (!isSide(sideToken.value)) {
+      throw new SflParseError(
+        `expected a side (top/right/bottom/left), got '${sideToken.value}'`,
+        sideToken.line,
+        sideToken.col
+      );
+    }
+    side = sideToken.value;
+    if (cursor.at("lparen")) {
+      cursor.next();
+      fraction = cursor.expectNumber('fraction inside "("');
+      cursor.expect("rparen", "')'");
+    }
+  }
+  return { type: "endpoint", segments, side, fraction };
+}
+function parseList(cursor) {
+  cursor.expect("lbracket", "'['");
+  const values = [];
+  cursor.skipNewlines();
+  if (!cursor.at("rbracket")) {
+    values.push(parseValue(cursor, false));
+    cursor.skipNewlines();
+    while (cursor.at("comma")) {
+      cursor.next();
+      cursor.skipNewlines();
+      if (cursor.at("rbracket")) {
+        break;
+      }
+      values.push(parseValue(cursor, false));
+      cursor.skipNewlines();
+    }
+  }
+  cursor.expect("rbracket", "']'");
+  return { type: "list", values };
+}
+var ARITHMETIC = /* @__PURE__ */ new Set(["+", "-", "*", "/", ">", "<", ">=", "<=", "==", "!=", "&&", "||"]);
+function startsComputed(cursor) {
+  const first = cursor.peek();
+  if (first.type === "op" && first.value === "-") {
+    return true;
+  }
+  if (first.type !== "number" && first.type !== "ident" && first.type !== "lparen") {
+    return false;
+  }
+  for (let offset = 0; ; offset++) {
+    const token = cursor.peek(offset);
+    if (token.type === "newline" || token.type === "semi" || token.type === "rbrace" || token.type === "eof") {
+      return false;
+    }
+    if (token.type === "lparen" || token.type === "op" && ARITHMETIC.has(token.value)) {
+      return true;
+    }
+    if (token.type === "ident" && cursor.peek(offset - 1).type === "comma") {
+      return true;
+    }
+    if (offset === 0 && token.type === "ident" && cursor.peek(1).type === "comma") {
+      return true;
+    }
+  }
+}
+function parseComputed(cursor) {
+  const items = [parseExpression(cursor)];
+  while (cursor.at("comma")) {
+    cursor.next();
+    items.push(parseExpression(cursor));
+  }
+  return { type: "expr", items };
+}
+function parseValue(cursor, allowTuple = true) {
+  if (allowTuple && startsComputed(cursor)) {
+    return parseComputed(cursor);
+  }
+  const token = cursor.peek();
+  switch (token.type) {
+    case "string":
+      cursor.next();
+      return { type: "string", value: token.value };
+    case "lbracket":
+      return parseList(cursor);
+    case "number": {
+      const firstValue = cursor.expectNumber("number");
+      if (!allowTuple || !cursor.at("comma")) {
+        return { type: "number", value: firstValue };
+      }
+      const values = [firstValue];
+      while (cursor.at("comma")) {
+        cursor.next();
+        values.push(cursor.expectNumber("number in tuple"));
+      }
+      return { type: "tuple", values };
+    }
+    case "ident":
+      return { type: "ident", segments: parsePathSegments(cursor) };
+    default:
+      throw new SflParseError(`expected a value, got '${token.value || token.type}'`, token.line, token.col);
+  }
+}
+
 // src/sflLanguage/parsing/properties.ts
 var PropertyParser = class {
   constructor(cursor) {
@@ -1608,7 +1724,7 @@ function emitComposition(composition) {
   return ` : ${composition.join(" & ")}`;
 }
 
-// src/sflLanguage/emitting/values.ts
+// src/sflLanguage/emitting/literals.ts
 function formatNumber(value) {
   if (Object.is(value, -0)) {
     return "0";
@@ -1619,33 +1735,6 @@ function emitString(value) {
   const escaped = value.replace(/\r\n?/g, "\n").replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\t/g, "\\t");
   return `"${escaped}"`;
 }
-function emitValue(value) {
-  switch (value.type) {
-    case "string":
-      return emitString(value.value);
-    case "number":
-      return formatNumber(value.value);
-    case "tuple":
-      return value.values.map(formatNumber).join(", ");
-    case "list":
-      return `[${value.values.map(emitValue).join(", ")}]`;
-    case "ident":
-      return value.segments.join(".");
-    case "expr":
-      return value.items.map((item) => emitExpression(item)).join(", ");
-    case "endpoint": {
-      let output = value.segments.join(".");
-      if (value.side) {
-        output += `, ${value.side}`;
-        if (value.fraction !== void 0) {
-          output += ` (${formatNumber(value.fraction)})`;
-        }
-      }
-      return output;
-    }
-  }
-}
-var emitProperty = (property) => `${property.key}: ${emitValue(property.value)}`;
 
 // src/sflLanguage/emitting/expressions.ts
 var PRECEDENCE = {
@@ -1667,7 +1756,7 @@ function emitExpression(expr, parentPrecedence = 0) {
     case "number":
       return String(expr.value);
     case "string":
-      return emitValue({ type: "string", value: expr.value });
+      return emitString(expr.value);
     case "boolean":
       return String(expr.value);
     case "ref":
@@ -1736,6 +1825,35 @@ function compareByOrder(order, a, b) {
 var compareLayoutProps = (a, b) => compareByOrder(LAYOUT_ORDER, a, b);
 var compareStyleProps = (a, b) => compareByOrder(STYLE_ORDER, a, b);
 
+// src/sflLanguage/emitting/values.ts
+function emitValue(value) {
+  switch (value.type) {
+    case "string":
+      return emitString(value.value);
+    case "number":
+      return formatNumber(value.value);
+    case "tuple":
+      return value.values.map(formatNumber).join(", ");
+    case "list":
+      return `[${value.values.map(emitValue).join(", ")}]`;
+    case "ident":
+      return value.segments.join(".");
+    case "expr":
+      return value.items.map((item) => emitExpression(item)).join(", ");
+    case "endpoint": {
+      let output = value.segments.join(".");
+      if (value.side) {
+        output += `, ${value.side}`;
+        if (value.fraction !== void 0) {
+          output += ` (${formatNumber(value.fraction)})`;
+        }
+      }
+      return output;
+    }
+  }
+}
+var emitProperty = (property) => `${property.key}: ${emitValue(property.value)}`;
+
 // src/sflLanguage/emitting/propertyBlock.ts
 var INDENT = "  ";
 function emitPropertyBlock(name, properties, depth, bindings = []) {
@@ -1867,51 +1985,34 @@ function canonicalizeSource(sflText) {
   return emitDocument(parseSource(sflText));
 }
 
-// src/sflSemantic/canvasObjects/artifacts/chart/types.ts
+// src/sflSemantic/canvasObjects/artifacts/chart/object.ts
 function isChartObject(canvasObject) {
   return canvasObject.objectType === "chart" && canvasObject.chart !== void 0;
 }
 
-// src/sflSemantic/canvasObjects/artifacts/dimension/types.ts
+// src/sflSemantic/canvasObjects/artifacts/dimension/object.ts
 function isDimensionObject(canvasObject) {
   return canvasObject.objectType === "dimension" && canvasObject.dimension !== void 0;
 }
 
-// src/sflSemantic/canvasObjects/artifacts/isometric/types.ts
+// src/sflSemantic/canvasObjects/artifacts/isometric/object.ts
 function isIsometricObject(canvasObject) {
   return canvasObject.objectType === "isometric" && canvasObject.isometric !== void 0;
 }
 
-// src/sflSemantic/canvasObjects/artifacts/path/types.ts
+// src/sflSemantic/canvasObjects/artifacts/path/object.ts
 function isPathObject(canvasObject) {
   return canvasObject.objectType === "path" && canvasObject.path !== void 0;
 }
 
-// src/sflSemantic/canvasObjects/artifacts/swimlane/types.ts
+// src/sflSemantic/canvasObjects/artifacts/swimlane/object.ts
 function isSwimlaneObject(canvasObject) {
   return canvasObject.objectType === "swimlane" && canvasObject.swimlane !== void 0;
 }
 
-// src/sflLanguage/expansion/repeat.ts
-var RESERVED = /* @__PURE__ */ new Set(["columns", "rows", "count", "step", "origin", "seed", "jitter", "chance", "order", "where"]);
-var MAX_CELLS = 2e4;
-var MAX_VALUES = 1e6;
-var Random = class {
-  state;
-  constructor(seed) {
-    this.state = seed >>> 0;
-  }
-  // mulberry32: a small generator that gives the same numbers for the same seed, on every machine.
-  next() {
-    this.state = this.state + 1831565813 >>> 0;
-    let t = this.state;
-    t = Math.imul(t ^ t >>> 15, t | 1);
-    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-    return ((t ^ t >>> 14) >>> 0) / 4294967296;
-  }
-};
+// src/sflLanguage/expansion/scope.ts
 function fail(scope, message) {
-  throw new Error(`Repeat ${scope.repeat}: ${message}`);
+  throw new Error(`${scope.label}: ${message}`);
 }
 function numberOf(scope, value, what) {
   if (typeof value !== "number" || !Number.isFinite(value)) {
@@ -1919,6 +2020,8 @@ function numberOf(scope, value, what) {
   }
   return value;
 }
+
+// src/sflLanguage/expansion/functions.ts
 function rgbOf(scope, value) {
   const match = typeof value === "string" ? /^#([0-9a-f]{6})$/i.exec(value) : null;
   if (!match) {
@@ -1987,6 +2090,8 @@ function callFunction(scope, name, args) {
       return fail(scope, `unknown function ${name}()`);
   }
 }
+
+// src/sflLanguage/expansion/evaluation.ts
 function evaluate(scope, expr) {
   switch (expr.kind) {
     case "number":
@@ -2044,27 +2149,37 @@ function evaluate(scope, expr) {
   }
 }
 var round2 = (value) => Math.round(value * 1e3) / 1e3;
+function scalarValue(scope, only) {
+  if (typeof only === "number") {
+    return { type: "number", value: round2(numberOf(scope, only, "a value")) };
+  }
+  if (typeof only === "string") {
+    return { type: "string", value: only };
+  }
+  return { type: "ident", segments: [String(only)] };
+}
 function resolveValue(scope, value) {
+  if (scope.substitute && value.type === "ident" && value.segments.length === 1) {
+    const known = scope.vars.get(value.segments[0]);
+    if (known !== void 0) {
+      return scalarValue(scope, known);
+    }
+  }
   if (value.type !== "expr") {
     return value;
   }
   const results = value.items.map((item) => evaluate(scope, item));
   if (results.length === 1) {
-    const [only] = results;
-    if (typeof only === "number") {
-      return { type: "number", value: round2(numberOf(scope, only, "a value")) };
-    }
-    if (typeof only === "string") {
-      return { type: "string", value: only };
-    }
-    return { type: "ident", segments: [String(only)] };
+    return scalarValue(scope, results[0]);
   }
   return { type: "tuple", values: results.map((result) => round2(numberOf(scope, result, "a tuple"))) };
 }
+
+// src/sflLanguage/expansion/instance.ts
 function propertiesOf(scope, properties) {
   return properties.map((property) => ({ key: property.key, value: resolveValue(scope, property.value) }));
 }
-function entryOf(scope, entry, suffix) {
+function entryOf(scope, entry, rename) {
   switch (entry.type) {
     case "property":
       return {
@@ -2076,18 +2191,20 @@ function entryOf(scope, entry, suffix) {
     case "style":
       return { type: "style", style: { ...entry.style, properties: propertiesOf(scope, entry.style.properties) } };
     case "block":
-      return { type: "block", block: instance(scope, entry.block, suffix) };
+      return { type: "block", block: instance(scope, entry.block, rename) };
     default:
       return entry;
   }
 }
-function instance(scope, block2, suffix) {
+function instance(scope, block2, rename) {
   return {
     ...block2,
-    name: `${block2.name}${suffix}`,
-    entries: block2.entries.map((entry) => entryOf(scope, entry, suffix))
+    name: rename(block2.name),
+    entries: block2.entries.map((entry) => entryOf(scope, entry, rename))
   };
 }
+
+// src/sflLanguage/expansion/properties.ts
 function propertyOf(block2, key) {
   for (const entry of block2.entries) {
     if (entry.type === "property" && entry.property.key === key) {
@@ -2110,88 +2227,244 @@ function numbersOf(block2, key) {
   }
   return void 0;
 }
-function expandRepeat(block2) {
-  const scope = { vars: /* @__PURE__ */ new Map(), random: new Random(0), repeat: block2.name };
+
+// src/sflLanguage/expansion/random.ts
+var Random = class {
+  state;
+  constructor(seed) {
+    this.state = seed >>> 0;
+  }
+  // mulberry32: a small generator that gives the same numbers for the same seed, on every machine.
+  next() {
+    this.state = this.state + 1831565813 >>> 0;
+    let t = this.state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  }
+};
+
+// src/sflLanguage/expansion/repeat.ts
+var RESERVED = /* @__PURE__ */ new Set(["columns", "rows", "count", "step", "origin", "seed", "jitter", "chance", "order", "where"]);
+var MAX_CELLS = 2e4;
+var MAX_VALUES = 1e6;
+function readGrid(block2, scope) {
   const count = numbersOf(block2, "count")?.[0];
   const columns = Math.max(1, Math.floor(count ?? numbersOf(block2, "columns")?.[0] ?? 1));
   const rows = count === void 0 ? Math.max(1, Math.floor(numbersOf(block2, "rows")?.[0] ?? 1)) : 1;
-  const total = columns * rows;
-  if (total > MAX_CELLS) {
-    fail(scope, `${total} cells are too many, the limit is ${MAX_CELLS}`);
+  if (columns * rows > MAX_CELLS) {
+    fail(scope, `${columns * rows} cells are too many, the limit is ${MAX_CELLS}`);
   }
   const [stepX = 0, stepY = stepX] = numbersOf(block2, "step") ?? [];
   const [originX = 0, originY = 0] = numbersOf(block2, "origin") ?? [];
-  const seed = numbersOf(block2, "seed")?.[0] ?? 0;
-  const jitter = numbersOf(block2, "jitter")?.[0] ?? 0;
-  const chance = numbersOf(block2, "chance")?.[0] ?? 1;
-  const diagonal = propertyOf(block2, "order")?.type === "ident" && propertyOf(block2, "order").segments[0] === "diagonal";
-  const condition = propertyOf(block2, "where");
-  const helpers = block2.entries.flatMap(
-    (entry) => entry.type === "property" && entry.property.value.type === "expr" && !RESERVED.has(entry.property.key) ? [entry.property] : []
-  );
+  const order = propertyOf(block2, "order");
   const templates = block2.entries.flatMap((entry) => entry.type === "block" ? [entry.block] : []);
   if (templates.some((template) => template.kind === "Repeat")) {
     fail(scope, "a Repeat cannot hold another Repeat");
   }
-  if (total * Math.max(1, templates.length) > MAX_VALUES) {
+  if (columns * rows * Math.max(1, templates.length) > MAX_VALUES) {
     fail(scope, "too many blocks");
   }
+  return {
+    columns,
+    rows,
+    step: [stepX, stepY],
+    origin: [originX, originY],
+    seed: numbersOf(block2, "seed")?.[0] ?? 0,
+    jitter: numbersOf(block2, "jitter")?.[0] ?? 0,
+    chance: numbersOf(block2, "chance")?.[0] ?? 1,
+    diagonal: order?.type === "ident" && order.segments[0] === "diagonal",
+    condition: propertyOf(block2, "where"),
+    helpers: block2.entries.flatMap(
+      (entry) => entry.type === "property" && entry.property.value.type === "expr" && !RESERVED.has(entry.property.key) ? [entry.property] : []
+    ),
+    templates
+  };
+}
+function cellsOf(grid) {
   const cells = [];
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < columns; col++) {
+  for (let row = 0; row < grid.rows; row++) {
+    for (let col = 0; col < grid.columns; col++) {
       cells.push([col, row]);
     }
   }
-  if (diagonal) {
-    cells.sort((a, b) => a[0] + a[1] - (b[0] + b[1]) || a[0] - b[0]);
+  return grid.diagonal ? cells.sort((a, b) => a[0] + a[1] - (b[0] + b[1]) || a[0] - b[0]) : cells;
+}
+function enterCell(scope, grid, col, row) {
+  const index = row * grid.columns + col;
+  scope.random = new Random(Math.imul(grid.seed + 1, 2654435761) ^ Math.imul(index + 1, 2246822507));
+  if (grid.chance < 1 && scope.random.next() >= grid.chance) {
+    return false;
   }
-  const out = [];
-  for (const [col, row] of cells) {
-    {
-      const index = row * columns + col;
-      scope.random = new Random(Math.imul(seed + 1, 2654435761) ^ Math.imul(index + 1, 2246822507));
-      if (chance < 1 && scope.random.next() >= chance) {
-        continue;
-      }
-      const spread = () => jitter > 0 ? (scope.random.next() * 2 - 1) * jitter : 0;
-      scope.vars = /* @__PURE__ */ new Map([
-        ["col", col],
-        ["row", row],
-        ["index", index],
-        ["count", total],
-        ["columns", columns],
-        ["rows", rows],
-        ["x", round2(originX + col * stepX + spread())],
-        ["y", round2(originY + row * stepY + spread())]
-      ]);
-      for (const helper of helpers) {
-        const value = resolveValue(scope, helper.value);
-        if (value.type === "number" || value.type === "string") {
-          scope.vars.set(helper.key, value.value);
-        } else if (value.type === "ident") {
-          scope.vars.set(helper.key, value.segments[0] === "true" ? 1 : 0);
-        } else {
-          fail(scope, `${helper.key} needs a number`);
-        }
+  const spread = () => grid.jitter > 0 ? (scope.random.next() * 2 - 1) * grid.jitter : 0;
+  scope.vars = /* @__PURE__ */ new Map([
+    ["col", col],
+    ["row", row],
+    ["index", index],
+    ["count", grid.columns * grid.rows],
+    ["columns", grid.columns],
+    ["rows", grid.rows],
+    ["x", round2(grid.origin[0] + col * grid.step[0] + spread())],
+    ["y", round2(grid.origin[1] + row * grid.step[1] + spread())]
+  ]);
+  return true;
+}
+function nameHelpers(scope, helpers) {
+  for (const helper of helpers) {
+    const value = resolveValue(scope, helper.value);
+    if (value.type === "number" || value.type === "string") {
+      scope.vars.set(helper.key, value.value);
+    } else if (value.type === "ident") {
+      scope.vars.set(helper.key, value.segments[0] === "true" ? 1 : 0);
+    } else {
+      fail(scope, `${helper.key} needs a number`);
+    }
+  }
+}
+function keepsCell(scope, condition) {
+  return condition?.type !== "expr" || Boolean(condition.items.map((item) => evaluate(scope, item))[0]);
+}
+function expandRepeat(block2) {
+  const scope = { vars: /* @__PURE__ */ new Map(), random: new Random(0), label: `Repeat ${block2.name}` };
+  const grid = readGrid(block2, scope);
+  const made = [];
+  for (const [col, row] of cellsOf(grid)) {
+    if (!enterCell(scope, grid, col, row)) {
+      continue;
+    }
+    nameHelpers(scope, grid.helpers);
+    if (!keepsCell(scope, grid.condition)) {
+      continue;
+    }
+    const suffix = grid.rows === 1 ? `_${col}` : `_${col}_${row}`;
+    for (const template of grid.templates) {
+      made.push(instance(scope, template, (name) => `${name}${suffix}`));
+    }
+  }
+  return made;
+}
+function expandRepeatBlocks(blocks) {
+  return blocks.flatMap((block2) => {
+    if (block2.kind === "Repeat") {
+      return expandRepeat(block2);
+    }
+    if (block2.kind === "Template" || !block2.entries.some((entry) => entry.type === "block")) {
+      return [block2];
+    }
+    return [
+      {
+        ...block2,
+        entries: block2.entries.flatMap(
+          (entry) => entry.type === "block" ? expandRepeatBlocks([entry.block]).map((child) => ({ type: "block", block: child })) : [entry]
+        )
       }
-      if (condition && condition.type === "expr") {
-        const result = condition.items.map((item) => evaluate(scope, item))[0];
-        if (!result) {
-          continue;
-        }
+    ];
+  });
+}
+function hasRepeats(blocks) {
+  return blocks.some(
+    (block2) => block2.kind === "Repeat" || block2.entries.some((entry) => entry.type === "block" && hasRepeats([entry.block]))
+  );
+}
+
+// src/sflLanguage/expansion/template.ts
+var MAX_DEPTH = 4;
+var MAX_BLOCKS = 1e5;
+var OWN = /* @__PURE__ */ new Set(["at", "seed"]);
+var PLACE = /* @__PURE__ */ new Set(["x", "y"]);
+function hashOf(text) {
+  let hash = 2166136261;
+  for (let index = 0; index < text.length; index++) {
+    hash = Math.imul(hash ^ text.charCodeAt(index), 16777619);
+  }
+  return hash >>> 0;
+}
+function collect(blocks, into) {
+  for (const block2 of blocks) {
+    if (block2.kind === "Template") {
+      if (into.has(block2.name)) {
+        throw new Error(`Template ${block2.name}: there is another Template of this name`);
       }
-      const suffix = rows === 1 ? `_${col}` : `_${col}_${row}`;
-      for (const template of templates) {
-        out.push(instance(scope, template, suffix));
+      if (block2.entries.some((entry) => entry.type === "block" && entry.block.kind === "Repeat")) {
+        throw new Error(`Template ${block2.name}: a Template cannot hold a Repeat, a Repeat can hold a Use`);
       }
+      into.set(block2.name, block2);
     }
+    collect(
+      block2.entries.flatMap((entry) => entry.type === "block" ? [entry.block] : []),
+      into
+    );
   }
-  return out;
 }
-function expandBlocks(blocks) {
+var BlockBudget = class {
+  made = 0;
+  take(count, scope) {
+    this.made += count;
+    if (this.made > MAX_BLOCKS) {
+      fail(scope, "too many blocks");
+    }
+  }
+};
+function expandUse(use, templates, depth, budget) {
+  const scope = { vars: /* @__PURE__ */ new Map(), random: new Random(0), label: `Use ${use.name}`, substitute: true };
+  if (depth > MAX_DEPTH) {
+    fail(scope, `Templates are nested more than ${MAX_DEPTH} deep, which may be a Template that uses itself`);
+  }
+  if (use.composition.length !== 1) {
+    fail(scope, "a Use names one Template, as in Use oak : tree");
+  }
+  const template = templates.get(use.composition[0]);
+  if (!template) {
+    fail(scope, `there is no Template ${use.composition[0]}`);
+  }
+  const seed = numbersOf(use, "seed")?.[0] ?? 0;
+  scope.random = new Random(Math.imul(seed + 1, 2654435761) ^ hashOf(use.name));
+  const [x = 0, y = 0] = numbersOf(use, "at") ?? [];
+  scope.vars.set("x", x);
+  scope.vars.set("y", y);
+  const given = new Map(
+    use.entries.flatMap(
+      (entry) => entry.type === "property" && !OWN.has(entry.property.key) ? [[entry.property.key, entry.property.value]] : []
+    )
+  );
+  for (const entry of template.entries) {
+    if (entry.type !== "property") {
+      continue;
+    }
+    const { key, value } = entry.property;
+    if (PLACE.has(key) || OWN.has(key)) {
+      fail(scope, `${key} is the name of something a Use sets, so it cannot be a parameter`);
+    }
+    const chosen = resolveValue(scope, given.get(key) ?? value);
+    given.delete(key);
+    if (chosen.type === "number" || chosen.type === "string") {
+      scope.vars.set(key, chosen.value);
+    } else if (chosen.type === "ident") {
+      scope.vars.set(
+        key,
+        chosen.segments[0] === "true" ? 1 : chosen.segments[0] === "false" ? 0 : chosen.segments.join(".")
+      );
+    } else {
+      fail(scope, `${key} needs a number, a text or a name`);
+    }
+  }
+  const unknown = [...given.keys()][0];
+  if (unknown !== void 0) {
+    fail(scope, `Template ${template.name} has no parameter ${unknown}`);
+  }
+  const made = template.entries.flatMap(
+    (entry) => entry.type === "block" ? [instance(scope, entry.block, (name) => `${use.name}_${name}`)] : []
+  );
+  budget.take(made.length, scope);
+  return expandIn(made, templates, depth + 1, budget);
+}
+function expandIn(blocks, templates, depth, budget) {
   return blocks.flatMap((block2) => {
-    if (block2.kind === "Repeat") {
-      return expandRepeat(block2);
+    if (block2.kind === "Template") {
+      return [];
+    }
+    if (block2.kind === "Use") {
+      return expandUse(block2, templates, depth, budget);
     }
     if (!block2.entries.some((entry) => entry.type === "block")) {
       return [block2];
@@ -2200,15 +2473,24 @@ function expandBlocks(blocks) {
       {
         ...block2,
         entries: block2.entries.flatMap(
-          (entry) => entry.type === "block" ? (entry.block.kind === "Repeat" ? expandRepeat(entry.block) : expandBlocks([entry.block])).map((child) => ({
-            type: "block",
-            block: child
-          })) : [entry]
+          (entry) => entry.type === "block" ? expandIn([entry.block], templates, depth, budget).map((child) => ({ type: "block", block: child })) : [entry]
         )
       }
     ];
   });
 }
+function hasTemplates(blocks) {
+  return blocks.some(
+    (block2) => block2.kind === "Template" || block2.kind === "Use" || block2.entries.some((entry) => entry.type === "block" && hasTemplates([entry.block]))
+  );
+}
+function expandUses(blocks) {
+  const templates = /* @__PURE__ */ new Map();
+  collect(blocks, templates);
+  return expandIn(blocks, templates, 0, new BlockBudget());
+}
+
+// src/sflLanguage/expansion/expandDocument.ts
 function checkNoComputed(blocks) {
   for (const block2 of blocks) {
     for (const entry of block2.entries) {
@@ -2226,15 +2508,13 @@ function checkNoComputed(blocks) {
     }
   }
 }
-function expandRepeats(doc) {
-  const has = (blocks) => blocks.some(
-    (block2) => block2.kind === "Repeat" || block2.entries.some((entry) => entry.type === "block" ? has([entry.block]) : false)
-  );
-  if (!has(doc.blocks)) {
+function expandDocument(doc) {
+  const repeats = hasRepeats(doc.blocks);
+  if (!repeats && !hasTemplates(doc.blocks)) {
     checkNoComputed(doc.blocks);
     return doc;
   }
-  const expanded = { ...doc, blocks: expandBlocks(doc.blocks) };
+  const expanded = { ...doc, blocks: expandUses(repeats ? expandRepeatBlocks(doc.blocks) : doc.blocks) };
   checkNoComputed(expanded.blocks);
   return expanded;
 }
@@ -3588,7 +3868,7 @@ function resolveCanvasState(document) {
 
 // src/sflSemantic/sflToCanvasState.ts
 function sflToCanvasState(source) {
-  return resolveCanvasState(expandRepeats(parseSource(source)));
+  return resolveCanvasState(expandDocument(parseSource(source)));
 }
 
 // src/svg/domContract/version.ts
@@ -4733,63 +5013,6 @@ function createPieSlicePath(geometry, angles, cornerRadius = 0, gapPx = 0) {
   return cornerRadius > 0 ? roundedDonutSlicePath(geometry, geometry.innerRadius, outerAngles, innerAngles, cornerRadius) : donutSlicePath(geometry, geometry.innerRadius, outerAngles, innerAngles);
 }
 
-// src/model/color/conversion.ts
-var hexToRgb2 = (hex) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
-  if (!result) {
-    return { r: 255, g: 255, b: 255, a: 1 };
-  }
-  return {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-    a: result[4] === void 0 ? 1 : parseInt(result[4], 16) / 255
-  };
-};
-var rgbToHex2 = (r, g, b, a) => {
-  const channel = (x) => {
-    const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  const alphaChannel = a === void 0 || a >= 1 ? "" : channel(a * 255);
-  return `#${channel(r)}${channel(g)}${channel(b)}${alphaChannel}`;
-};
-
-// src/model/color/interpolation.ts
-function mixHexColors(start, end, ratio) {
-  const startRgb = hexToRgb2(start);
-  const endRgb = hexToRgb2(end);
-  const startAlpha = startRgb.a ?? 1;
-  const endAlpha = endRgb.a ?? 1;
-  return rgbToHex2(
-    Math.round(startRgb.r + (endRgb.r - startRgb.r) * ratio),
-    Math.round(startRgb.g + (endRgb.g - startRgb.g) * ratio),
-    Math.round(startRgb.b + (endRgb.b - startRgb.b) * ratio),
-    startAlpha + (endAlpha - startAlpha) * ratio
-  );
-}
-function interpolateHexColorStops(stops, position) {
-  const sortedStops = [...stops].sort((first2, second) => first2.position - second.position);
-  const first = sortedStops[0];
-  const last = sortedStops[sortedStops.length - 1];
-  if (position <= first.position) {
-    return first.color;
-  }
-  if (position >= last.position) {
-    return last.color;
-  }
-  for (let index = 0; index < sortedStops.length - 1; index++) {
-    const start = sortedStops[index];
-    const end = sortedStops[index + 1];
-    if (position >= start.position && position <= end.position) {
-      const range = end.position - start.position;
-      const ratio = range === 0 ? 0 : (position - start.position) / range;
-      return mixHexColors(start.color, end.color, ratio);
-    }
-  }
-  return last.color;
-}
-
 // src/renderScene/charts/primitives/defaults.ts
 var CHART_COLORS = ["#7c3aed", "#0ea5e9", "#f97316", "#10b981", "#ec4899", "#eab308"];
 var DEFAULT_ZONE_FILL = "#94a3b8";
@@ -4868,16 +5091,11 @@ function computeBoxplotStats(values) {
 }
 
 // src/renderScene/color.ts
-function hexToRgb3(hex) {
-  if (hex?.[0] !== "#") {
-    return void 0;
-  }
-  const channels = hex.length === 4 ? hex.slice(1).split("").map((channel) => parseInt(channel + channel, 16)) : [1, 3, 5].map((index) => parseInt(hex.slice(index, index + 2), 16));
-  const [red, green, blue] = channels;
-  return [red, green, blue].some((channel) => Number.isNaN(channel)) ? void 0 : [red, green, blue];
+function hexToRgb2(hex) {
+  return hex?.startsWith("#") ? parseHexRgb(hex) ?? void 0 : void 0;
 }
 function colorWithAlpha(hex, alpha) {
-  const rgb = hexToRgb3(hex);
+  const rgb = hexToRgb2(hex);
   const clamped = Math.max(0, Math.min(1, alpha));
   if (!rgb) {
     return clamped <= 0 ? "transparent" : hex ?? "transparent";
@@ -4885,10 +5103,6 @@ function colorWithAlpha(hex, alpha) {
   const [red, green, blue] = rgb;
   return `rgba(${red}, ${green}, ${blue}, ${clamped})`;
 }
-function rgbToHex3(red, green, blue) {
-  const channel = (value) => Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, "0");
-  return `#${channel(red)}${channel(green)}${channel(blue)}`;
-}
 function rgbToHsl(red, green, blue) {
   const r = red / 255;
   const g = green / 255;
@@ -4954,7 +5168,7 @@ var SAME_HUE_LIGHT_MIN_LIGHTNESS = 0.78;
 var SAME_HUE_LIGHT_MAX_LIGHTNESS = 0.92;
 var SAME_HUE_MIN_CONTRAST = 3;
 function contrastTextColor(hex) {
-  const rgb = hexToRgb3(hex);
+  const rgb = hexToRgb2(hex);
   if (!rgb) {
     return "#0f172a";
   }
@@ -4970,10 +5184,10 @@ function contrastTextColor(hex) {
   );
   const variant = hslToRgb(hue, saturation, targetLightness);
   const ratio = contrastRatio(relativeLuminance(red, green, blue), relativeLuminance(...variant));
-  return ratio >= SAME_HUE_MIN_CONTRAST ? rgbToHex3(...variant) : fallback;
+  return ratio >= SAME_HUE_MIN_CONTRAST ? rgbToHex(...variant) : fallback;
 }
 function sameHueContrastColor(hex, fallback) {
-  const rgb = hexToRgb3(hex);
+  const rgb = hexToRgb2(hex);
   if (!rgb) {
     return fallback;
   }
@@ -4986,14 +5200,14 @@ function sameHueContrastColor(hex, fallback) {
     SAME_HUE_LIGHT_MAX_LIGHTNESS,
     Math.max(lightness + SAME_HUE_LIGHTNESS_GAP, SAME_HUE_LIGHT_MIN_LIGHTNESS)
   );
-  return rgbToHex3(...hslToRgb(hue, saturation, targetLightness));
+  return rgbToHex(...hslToRgb(hue, saturation, targetLightness));
 }
 function isLightColor(hex) {
-  const rgb = hexToRgb3(hex);
+  const rgb = hexToRgb2(hex);
   return rgb ? rgbToHsl(...rgb)[2] > 0.5 : false;
 }
 function sameHueTint(hex, targetLightness) {
-  const rgb = hexToRgb3(hex);
+  const rgb = hexToRgb2(hex);
   if (!rgb) {
     return void 0;
   }
@@ -5001,7 +5215,7 @@ function sameHueTint(hex, targetLightness) {
   if (saturation === 0) {
     return void 0;
   }
-  return rgbToHex3(...hslToRgb(hue, saturation, targetLightness));
+  return rgbToHex(...hslToRgb(hue, saturation, targetLightness));
 }
 
 // src/renderScene/charts/primitives/colors.ts
@@ -5845,7 +6059,7 @@ exports.elementCenter = elementCenter;
 exports.ellipsizeToWidth = ellipsizeToWidth;
 exports.errorBarRange = errorBarRange;
 exports.estimateTextWidth = estimateTextWidth;
-exports.expandRepeats = expandRepeats;
+exports.expandDocument = expandDocument;
 exports.extrudeFootprint = extrudeFootprint;
 exports.finite = finite;
 exports.flattenPath = flattenPath;
@@ -5858,6 +6072,7 @@ exports.getComponentDescriptor = getComponentDescriptor;
 exports.getLineMidpoint = getLineMidpoint;
 exports.heuristicRichMeasure = heuristicRichMeasure;
 exports.horizontalRows = horizontalRows;
+exports.hsvToRgb = hsvToRgb;
 exports.interpolateHexColorStops = interpolateHexColorStops;
 exports.isBuiltInComponentType = isBuiltInComponentType;
 exports.isChartObject = isChartObject;
@@ -5883,6 +6098,7 @@ exports.mapChartValue = mapChartValue;
 exports.maxApexCornerRadius = maxApexCornerRadius;
 exports.maxPieCornerRadius = maxPieCornerRadius;
 exports.paint = paint;
+exports.parseHexRgb = parseHexRgb;
 exports.parseSource = parseSource;
 exports.pathBounds = pathBounds;
 exports.pathToSymbol = pathToSymbol;
@@ -5908,6 +6124,8 @@ exports.representativeColor = representativeColor;
 exports.resolveChartShadow = resolveChartShadow;
 exports.resolvePieRadii = resolvePieRadii;
 exports.resolveRollingNumberStyle = resolveRollingNumberStyle;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsv = rgbToHsv;
 exports.rightRoundedRectPath = rightRoundedRectPath;
 exports.rotatedBounds = rotatedBounds;
 exports.roundedBarPath = roundedBarPath;
@@ -5937,5 +6155,5 @@ exports.tokenizeSource = tokenizeSource;
 exports.topRoundedRectPath = topRoundedRectPath;
 exports.wrapText = wrapText;
 exports.zoneColorAtValue = zoneColorAtValue;
-//# sourceMappingURL=chunk-C25NWWIH.cjs.map
-//# sourceMappingURL=chunk-C25NWWIH.cjs.map
+//# sourceMappingURL=chunk-LSEMXRB5.cjs.map
+//# sourceMappingURL=chunk-LSEMXRB5.cjs.map