stickyflow 0.4.0 → 0.5.0

package/dist/chunk-BODZN3ZI.js

@@ -0,0 +1,1182 @@
+import { renderCanvas, sflToRenderInput } from './chunk-LTGF5OHP.js';
+import { getComponentDescriptor, parseSource, isGenericComponent, isBuiltInComponentType } from './chunk-IEHE6WVN.js';
+
+// src/binding/types.ts
+var DECLARED = {
+  number: "number",
+  int: "number",
+  float: "number",
+  string: "string",
+  boolean: "boolean",
+  bool: "boolean"
+};
+var scalarOf = (declared) => DECLARED[declared];
+var typeName = (type) => typeof type === "string" ? type : `list<${type.list}>`;
+var sameType = (left, right) => typeName(left) === typeName(right);
+var POINTER_EVENTS = ["onPress", "onRelease", "onTap", "onDrag"];
+var CHANGE_EVENT = "onChange";
+var TICK_EVENT = "onTick";
+
+// src/binding/contract.ts
+function identOf(value) {
+  return value?.type === "ident" ? value.segments.join(".") : void 0;
+}
+function readContract(block, diagnostics) {
+  const properties = block.entries.flatMap((entry) => entry.type === "property" ? [entry.property] : []);
+  const mode = identOf(properties.find((property) => property.key === "mode")?.value) === "record" ? "record" : "table";
+  const contract = { name: block.name, mode, fields: {}, declared: {} };
+  for (const entry of block.entries) {
+    if (entry.type === "fields") {
+      for (const field of entry.fields) {
+        const declared = identOf(field.value) ?? "";
+        const scalar = scalarOf(declared);
+        if (scalar) {
+          contract.fields[field.key] = scalar;
+          contract.declared[field.key] = declared;
+        } else {
+          diagnostics.push({
+            severity: "error",
+            code: "unknown-field-type",
+            message: `Field '${block.name}.${field.key}' has unknown type '${declared}' (use int, float, number, string or bool).`,
+            line: 0,
+            col: 0
+          });
+        }
+      }
+    }
+  }
+  return contract;
+}
+function visitBlocks(blocks, visit) {
+  for (const block of blocks) {
+    visit(block);
+    visitBlocks(
+      block.entries.flatMap((entry) => entry.type === "block" ? [entry.block] : []),
+      visit
+    );
+  }
+}
+function collectContracts(sflDocument) {
+  const contracts = /* @__PURE__ */ new Map();
+  const diagnostics = [];
+  visitBlocks(sflDocument.blocks, (block) => {
+    if (block.kind !== "DataSource") {
+      return;
+    }
+    if (contracts.has(block.name)) {
+      diagnostics.push({
+        severity: "error",
+        code: "duplicate-data-source",
+        message: `DataSource '${block.name}' is declared more than once.`,
+        line: 0,
+        col: 0
+      });
+      return;
+    }
+    contracts.set(block.name, readContract(block, diagnostics));
+  });
+  return { contracts, diagnostics };
+}
+
+// src/binding/dataSource.ts
+function createDataSource(initial) {
+  let current = initial;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => current,
+    set(next) {
+      current = next;
+      for (const listener of [...listeners]) {
+        listener();
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+
+// src/binding/componentBinding.ts
+var BINDABLE_COMPONENT_PROPERTIES = ["value", "disabled"];
+function acceptsUserChange(componentType) {
+  return getComponentDescriptor(componentType)?.value?.writable === true;
+}
+function componentStateType(componentType, state) {
+  const descriptor = getComponentDescriptor(componentType);
+  if (state === "focused") {
+    return "boolean";
+  }
+  if (state === "pointer") {
+    return descriptor?.pointerScale ? "number" : void 0;
+  }
+  return state === "value" ? descriptor?.value?.type : void 0;
+}
+function componentPropertyType(componentType, property) {
+  if (property === "disabled") {
+    return "boolean";
+  }
+  return property === "value" ? getComponentDescriptor(componentType)?.value?.type : void 0;
+}
+function twoWayTargetProblem(key, expr, contracts) {
+  const target = expr.kind === "ref" ? expr.path : void 0;
+  const contract = target?.length === 2 ? contracts.get(target[0]) : void 0;
+  if (!target || contract?.mode !== "record" || !contract.fields[target[1]]) {
+    return `'<->' on '${key}' has to name one field of a record DataSource, as in <DataSource>.<field>.`;
+  }
+  return void 0;
+}
+
+// src/binding/expression.ts
+var isNumeric = (type) => type === "number" || typeof type === "object" && type.list === "number";
+var isList = (type) => typeof type === "object";
+function collectRefs(expr) {
+  switch (expr.kind) {
+    case "ref":
+      return [expr.path];
+    case "unary":
+      return collectRefs(expr.operand);
+    case "binary":
+      return [...collectRefs(expr.left), ...collectRefs(expr.right)];
+    case "call":
+      return expr.args.flatMap(collectRefs);
+    default:
+      return [];
+  }
+}
+function inferBinary(expr, scope, report) {
+  const left = inferType(expr.left, scope, report);
+  const right = inferType(expr.right, scope, report);
+  if (!left || !right) {
+    return void 0;
+  }
+  const { operator } = expr;
+  if (operator === "&&" || operator === "||") {
+    if (left !== "boolean" || right !== "boolean") {
+      report("type-mismatch", `'${operator}' needs two booleans, got ${typeName(left)} and ${typeName(right)}.`);
+      return void 0;
+    }
+    return "boolean";
+  }
+  if ([">", "<", ">=", "<="].includes(operator)) {
+    if (left !== "number" || right !== "number") {
+      report("type-mismatch", `'${operator}' compares two numbers, got ${typeName(left)} and ${typeName(right)}.`);
+      return void 0;
+    }
+    return "boolean";
+  }
+  if (operator === "==" || operator === "!=") {
+    if (isList(left) || !sameType(left, right)) {
+      report(
+        "type-mismatch",
+        `'${operator}' compares two values of the same simple type, got ${typeName(left)} and ${typeName(right)}.`
+      );
+      return void 0;
+    }
+    return "boolean";
+  }
+  if (operator === "+" && !isList(left) && !isList(right) && (left === "string" || right === "string")) {
+    return "string";
+  }
+  if (!isNumeric(left) || !isNumeric(right)) {
+    report("type-mismatch", `'${operator}' needs numbers, got ${typeName(left)} and ${typeName(right)}.`);
+    return void 0;
+  }
+  return isList(left) || isList(right) ? { list: "number" } : "number";
+}
+var MATH = {
+  round: { arguments: 1, apply: ([value]) => Math.round(value) },
+  floor: { arguments: 1, apply: ([value]) => Math.floor(value) },
+  ceil: { arguments: 1, apply: ([value]) => Math.ceil(value) },
+  abs: { arguments: 1, apply: ([value]) => Math.abs(value) },
+  min: { arguments: 2, apply: ([a, b]) => Math.min(a, b) },
+  max: { arguments: 2, apply: ([a, b]) => Math.max(a, b) },
+  clamp: { arguments: 3, apply: ([value, low, high]) => Math.min(high, Math.max(low, value)) },
+  moveToward: {
+    arguments: 3,
+    apply: ([current, target, maxStep]) => Math.abs(target - current) <= maxStep ? target : current + Math.sign(target - current) * maxStep
+  }
+};
+function inferMath(name, expr, scope, report) {
+  const spec = MATH[name];
+  if (expr.args.length !== spec.arguments) {
+    report("wrong-arguments", `${name}() takes exactly ${spec.arguments} argument${spec.arguments === 1 ? "" : "s"}.`);
+    return void 0;
+  }
+  const types = expr.args.map((arg) => inferType(arg, scope, report));
+  if (types.some((type) => !type)) {
+    return void 0;
+  }
+  if (types.some((type) => !isNumeric(type))) {
+    report(
+      "type-mismatch",
+      `${name}() needs numbers, got ${types.map((type) => typeName(type)).join(", ")}.`
+    );
+    return void 0;
+  }
+  return types.some((type) => isList(type)) ? { list: "number" } : "number";
+}
+function inferCall(expr, scope, report) {
+  const name = expr.callee.join(".");
+  if (name in MATH) {
+    return inferMath(name, expr, scope, report);
+  }
+  if (name !== "when") {
+    report("unknown-function", `Unknown function '${name}'. Available: when, ${Object.keys(MATH).join(", ")}.`);
+    return void 0;
+  }
+  if (expr.args.length !== 3) {
+    report("wrong-arguments", "when(condition, then, else) takes exactly three arguments.");
+    return void 0;
+  }
+  const [condition, whenTrue, whenFalse] = expr.args.map((arg) => inferType(arg, scope, report));
+  if (!condition || !whenTrue || !whenFalse) {
+    return void 0;
+  }
+  if (condition !== "boolean") {
+    report("type-mismatch", `The condition of when() must be boolean, got ${typeName(condition)}.`);
+    return void 0;
+  }
+  if (!sameType(whenTrue, whenFalse)) {
+    report(
+      "type-mismatch",
+      `when() branches must have the same type, got ${typeName(whenTrue)} and ${typeName(whenFalse)}.`
+    );
+    return void 0;
+  }
+  return whenTrue;
+}
+function inferType(expr, scope, report) {
+  switch (expr.kind) {
+    case "number":
+      return "number";
+    case "string":
+      return "string";
+    case "boolean":
+      return "boolean";
+    case "ref": {
+      const type = scope.resolve(expr.path);
+      if (!type) {
+        const name = expr.path.join(".");
+        report(
+          "unknown-reference",
+          name === "time.delta" ? "'time.delta' is only available in an onTick handler." : `Unknown reference '${name}'. Use <DataSource>.<field>, or <element>.pressed / hovered / pointer.`
+        );
+      }
+      return type;
+    }
+    case "unary": {
+      const operand = inferType(expr.operand, scope, report);
+      const wanted = expr.operator === "!" ? "boolean" : "number";
+      if (operand && operand !== wanted) {
+        report("type-mismatch", `'${expr.operator}' needs a ${wanted}, got ${typeName(operand)}.`);
+        return void 0;
+      }
+      return operand ? wanted : void 0;
+    }
+    case "binary":
+      return inferBinary(expr, scope, report);
+    case "call":
+      return inferCall(expr, scope, report);
+  }
+}
+function arithmetic(operator, left, right) {
+  switch (operator) {
+    case "+":
+      return left + right;
+    case "-":
+      return left - right;
+    case "*":
+      return left * right;
+    default:
+      return right === 0 ? 0 : left / right;
+  }
+}
+var text = (value) => typeof value === "number" ? String(Math.round(value * 10) / 10) : String(value);
+function evaluateBinary(expr, env) {
+  const left = evaluate(expr.left, env);
+  if (expr.operator === "&&") {
+    return Boolean(left) && Boolean(evaluate(expr.right, env));
+  }
+  if (expr.operator === "||") {
+    return Boolean(left) || Boolean(evaluate(expr.right, env));
+  }
+  const right = evaluate(expr.right, env);
+  switch (expr.operator) {
+    case ">":
+      return left > right;
+    case "<":
+      return left < right;
+    case ">=":
+      return left >= right;
+    case "<=":
+      return left <= right;
+    case "==":
+      return left === right;
+    case "!=":
+      return left !== right;
+  }
+  if (typeof left === "string" || typeof right === "string") {
+    return text(left) + text(right);
+  }
+  const apply = (a, b) => arithmetic(expr.operator, a, b);
+  if (Array.isArray(left) && Array.isArray(right)) {
+    const length = Math.min(left.length, right.length);
+    return Array.from({ length }, (_value, index) => apply(left[index], right[index]));
+  }
+  if (Array.isArray(left)) {
+    return left.map((value) => apply(value, right));
+  }
+  if (Array.isArray(right)) {
+    return right.map((value) => apply(left, value));
+  }
+  return apply(left, right);
+}
+function evaluate(expr, env) {
+  switch (expr.kind) {
+    case "number":
+    case "string":
+    case "boolean":
+      return expr.value;
+    case "ref":
+      return env.read(expr.path);
+    case "unary": {
+      const operand = evaluate(expr.operand, env);
+      return expr.operator === "!" ? !operand : -operand;
+    }
+    case "binary":
+      return evaluateBinary(expr, env);
+    case "call": {
+      const name = expr.callee.join(".");
+      if (name in MATH) {
+        const values = expr.args.map((arg) => evaluate(arg, env));
+        const length = Math.max(0, ...values.map((value) => Array.isArray(value) ? value.length : 0));
+        if (length === 0 && !values.some(Array.isArray)) {
+          return MATH[name].apply(values);
+        }
+        return Array.from(
+          { length },
+          (_value, index) => MATH[name].apply(values.map((value) => Array.isArray(value) ? value[index] : value))
+        );
+      }
+      const [condition, whenTrue, whenFalse] = expr.args;
+      return evaluate(condition, env) ? evaluate(whenTrue, env) : evaluate(whenFalse, env);
+    }
+  }
+}
+
+// src/binding/targets.ts
+var BINDABLE_PROPERTIES = {
+  Chart: { categories: { list: "string" }, text: "string" },
+  Series: { values: { list: "number" }, label: "string" },
+  Shape: { text: "string", fill: "string", stroke: "string", textColor: "string", opacity: "number" },
+  Text: { text: "string", textColor: "string", opacity: "number" }
+};
+
+// src/binding/graph.ts
+function collectSites(blocks, chartPath, sites) {
+  for (const block of blocks) {
+    const path = block.kind === "Series" ? [...chartPath, block.name] : [block.name];
+    const ownChart = block.kind === "Chart" ? [block.name] : chartPath;
+    for (const entry of block.entries) {
+      if (entry.type === "binding") {
+        sites.push({ kind: blockKind(block), path, binding: entry.binding });
+      } else if (entry.type === "style") {
+        for (const binding of entry.style.bindings ?? []) {
+          sites.push({ kind: blockKind(block), path, binding });
+        }
+      } else if (entry.type === "block") {
+        collectSites([entry.block], ownChart, sites);
+      } else if (entry.type === "data") {
+        for (const inner of entry.data.entries) {
+          if (inner.type === "binding") {
+            sites.push({ kind: "Chart", path: ownChart, binding: inner.binding });
+          } else if (inner.type === "block") {
+            collectSites([inner.block], ownChart, sites);
+          }
+        }
+      }
+    }
+  }
+}
+function fieldType(contract, field) {
+  const type = contract.fields[field];
+  if (!type) {
+    return void 0;
+  }
+  return contract.mode === "table" ? { list: type } : type;
+}
+var INTERACTIVE_KINDS = ["Shape", "Text", "Component"];
+var blockKind = (block) => block.kind === "Widget" ? "Component" : block.kind;
+function collectElements(sflDocument) {
+  const elements = /* @__PURE__ */ new Map();
+  visitBlocks(sflDocument.blocks, (block) => {
+    if (!INTERACTIVE_KINDS.includes(blockKind(block)) || elements.has(block.name)) {
+      return;
+    }
+    const type = block.entries.find((entry) => entry.type === "property" && entry.property.key === "type");
+    const value = type?.type === "property" ? type.property.value : void 0;
+    elements.set(block.name, {
+      kind: blockKind(block),
+      componentType: value?.type === "ident" ? value.segments.join(".") : void 0
+    });
+  });
+  return elements;
+}
+function elementStateType(element, state) {
+  if (state === "pressed" || state === "hovered") {
+    return "boolean";
+  }
+  return element.kind === "Component" ? componentStateType(element.componentType, state) : void 0;
+}
+function createScope(contracts, elements, ticking = false) {
+  return {
+    resolve(path) {
+      if (path.length !== 2) {
+        return void 0;
+      }
+      const contract = contracts.get(path[0]);
+      if (contract) {
+        return fieldType(contract, path[1]);
+      }
+      if (ticking && path[0] === "time" && path[1] === "delta") {
+        return "number";
+      }
+      const element = elements.get(path[0]);
+      return element ? elementStateType(element, path[1]) : void 0;
+    }
+  };
+}
+function qualify(expr, source) {
+  switch (expr.kind) {
+    case "ref":
+      return expr.path.length === 1 && expr.path[0] in source.fields ? { kind: "ref", path: [source.name, expr.path[0]] } : expr;
+    case "unary":
+      return { ...expr, operand: qualify(expr.operand, source) };
+    case "binary":
+      return { ...expr, left: qualify(expr.left, source), right: qualify(expr.right, source) };
+    case "call":
+      return { ...expr, args: expr.args.map((arg) => qualify(arg, source)) };
+    default:
+      return expr;
+  }
+}
+function collectHandlerSites(sflDocument) {
+  const sites = [];
+  visitBlocks(sflDocument.blocks, (block) => {
+    for (const entry of block.entries) {
+      if (entry.type === "handler") {
+        sites.push({ kind: blockKind(block), name: block.name, handler: entry.handler });
+      }
+    }
+  });
+  return sites;
+}
+function allowedEvents(kind, componentType) {
+  if (kind === "DataSource") {
+    return [TICK_EVENT];
+  }
+  if (!INTERACTIVE_KINDS.includes(kind)) {
+    return [];
+  }
+  const changes = kind === "Component" && acceptsUserChange(componentType);
+  return changes ? [...POINTER_EVENTS, CHANGE_EVENT] : POINTER_EVENTS;
+}
+function eventIsKnown(site, componentType, report) {
+  const { kind, name, handler } = site;
+  const allowed = allowedEvents(kind, componentType);
+  if (allowed.includes(handler.event)) {
+    return true;
+  }
+  report(
+    "unknown-event",
+    allowed.length ? `${kind} '${name}' has no event '${handler.event}' (events: ${allowed.join(", ")}).` : `${kind} '${name}' has no events; handlers belong on a Shape, Text, Component or DataSource.`
+  );
+  return false;
+}
+function bindAssignment(assignment, name, own, contracts, scope, report) {
+  const at = (code, message) => report(code, message, assignment.line, assignment.col);
+  const target = assignment.target.join(".");
+  const [source, field] = own && assignment.target.length === 1 ? [own.name, assignment.target[0]] : assignment.target;
+  const contract = assignment.target.length <= 2 ? contracts.get(source) : void 0;
+  if (!contract || field === void 0) {
+    at("unknown-target", `'${target}' is not a field of a DataSource (write <DataSource>.<field>).`);
+    return void 0;
+  }
+  if (own && contract !== own) {
+    at("tick-foreign-target", `onTick of '${name}' can only change fields of '${name}', not '${target}'.`);
+    return void 0;
+  }
+  if (contract.mode !== "record") {
+    at(
+      "target-not-record",
+      `DataSource '${source}' is a table source; only record sources can be changed by a handler.`
+    );
+    return void 0;
+  }
+  const wanted = contract.fields[field];
+  if (!wanted) {
+    at("unknown-target", `DataSource '${source}' has no field '${field}'.`);
+    return void 0;
+  }
+  const expr = own ? qualify(assignment.expr, own) : assignment.expr;
+  const actual = inferType(expr, scope, (code, message) => at(code, message));
+  if (!actual) {
+    return void 0;
+  }
+  if (!sameType(actual, wanted)) {
+    at("type-mismatch", `'${target}' is ${wanted}, the expression is ${typeName(actual)}.`);
+    return void 0;
+  }
+  return { source, field, expr, type: wanted, line: assignment.line, col: assignment.col };
+}
+function bindHandler(site, contracts, elements, diagnostics) {
+  const { kind, name, handler } = site;
+  const report = (code, message, line = handler.line, col = handler.col) => diagnostics.push({ severity: "error", code, message, line, col });
+  if (!eventIsKnown(site, elements.get(name)?.componentType, report)) {
+    return void 0;
+  }
+  const ticking = kind === "DataSource";
+  const own = ticking ? contracts.get(name) : void 0;
+  if (ticking && own?.mode !== "record") {
+    report("tick-needs-record", `DataSource '${name}' has to be a record source to change its fields on every tick.`);
+    return void 0;
+  }
+  const scope = createScope(contracts, elements, ticking);
+  const assignments = handler.assignments.flatMap(
+    (assignment) => bindAssignment(assignment, name, own, contracts, scope, report) ?? []
+  );
+  return {
+    id: `${kind}.${name}.${handler.event}`,
+    ownerKind: kind,
+    ownerPath: [name],
+    event: handler.event,
+    assignments,
+    line: handler.line,
+    col: handler.col
+  };
+}
+function warnNameCollisions(contracts, elements, diagnostics) {
+  for (const name of elements.keys()) {
+    if (contracts.has(name)) {
+      diagnostics.push({
+        severity: "warning",
+        code: "name-collision",
+        message: `'${name}' is a DataSource and an element; in expressions it means the DataSource.`,
+        line: 0,
+        col: 0
+      });
+    }
+  }
+}
+function expectedType(site, elements) {
+  const { kind, path, binding } = site;
+  if (kind === "Shader") {
+    return "number";
+  }
+  if (kind === "Component") {
+    return componentPropertyType(elements.get(path[0])?.componentType, binding.key);
+  }
+  return BINDABLE_PROPERTIES[kind]?.[binding.key];
+}
+function canBindTwoWay(site, elements) {
+  const { kind, path, binding } = site;
+  return kind === "Component" && binding.key === "value" && acceptsUserChange(elements.get(path[0])?.componentType);
+}
+function rejectedOperator(site, elements, contracts) {
+  const { binding } = site;
+  const twoWay = binding.operator === "<->";
+  if (binding.operator === "->" || twoWay && !canBindTwoWay(site, elements)) {
+    return {
+      code: "binding-operator-unsupported",
+      message: `'${binding.operator}' on '${binding.key}' is parsed but not executed; '<->' works on the value of a component that the user can change, and '->' is not supported.`,
+      severity: "warning"
+    };
+  }
+  const problem = twoWay ? twoWayTargetProblem(binding.key, binding.expr, contracts) : void 0;
+  return problem ? { code: "two-way-target", message: problem, severity: "error" } : void 0;
+}
+function bindProperty(site, scope, elements, contracts, diagnostics) {
+  const { kind, path, binding } = site;
+  const owner = path.join(".");
+  const report = (code, message, severity = "error") => diagnostics.push({ severity, code, message, line: binding.line, col: binding.col });
+  const rejected = rejectedOperator(site, elements, contracts);
+  if (rejected) {
+    report(rejected.code, rejected.message, rejected.severity);
+    return void 0;
+  }
+  const expected = expectedType(site, elements);
+  if (!expected) {
+    const allowed = kind === "Component" ? BINDABLE_COMPONENT_PROPERTIES : Object.keys(BINDABLE_PROPERTIES[kind] ?? {});
+    report(
+      "unknown-bound-property",
+      `${kind} '${owner}' has no bindable property '${binding.key}'${allowed.length ? ` (bindable: ${allowed.join(", ")})` : ""}.`
+    );
+    return void 0;
+  }
+  const actual = inferType(binding.expr, scope, report);
+  if (!actual) {
+    return void 0;
+  }
+  if (!sameType(actual, expected)) {
+    report("type-mismatch", `'${binding.key}' expects ${typeName(expected)}, the expression is ${typeName(actual)}.`);
+    return void 0;
+  }
+  return {
+    id: `${kind}.${owner}.${binding.key}`,
+    ownerKind: kind,
+    ownerPath: path,
+    property: binding.key,
+    operator: binding.operator,
+    expr: binding.expr,
+    type: expected,
+    dependencies: [...new Set(collectRefs(binding.expr).map((ref) => ref.join(".")))],
+    line: binding.line,
+    col: binding.col
+  };
+}
+function indexByField(bindings) {
+  const byField = /* @__PURE__ */ new Map();
+  for (const binding of bindings) {
+    for (const dependency of binding.dependencies) {
+      byField.set(dependency, [...byField.get(dependency) ?? [], binding]);
+    }
+  }
+  return byField;
+}
+function buildBindingGraph(sflDocument) {
+  const { contracts, diagnostics } = collectContracts(sflDocument);
+  const elements = collectElements(sflDocument);
+  warnNameCollisions(contracts, elements, diagnostics);
+  const scope = createScope(contracts, elements);
+  const sites = [];
+  collectSites(sflDocument.blocks, [], sites);
+  const bindings = sites.flatMap((site) => bindProperty(site, scope, elements, contracts, diagnostics) ?? []);
+  const handlers = collectHandlerSites(sflDocument).flatMap(
+    (site) => bindHandler(site, contracts, elements, diagnostics) ?? []
+  );
+  return { contracts, bindings, handlers, elements, byField: indexByField(bindings), diagnostics };
+}
+
+// src/binding/interactive.ts
+var OPERATED = /* @__PURE__ */ new Set(["toggle", "press"]);
+function interactiveElements(graph) {
+  const pressable = /* @__PURE__ */ new Set();
+  const scales = /* @__PURE__ */ new Set();
+  const note = ([name, state]) => {
+    if (graph.contracts.has(name) || !graph.elements.has(name)) {
+      return;
+    }
+    (state === "pointer" ? scales : pressable).add(name);
+  };
+  for (const handler of graph.handlers) {
+    if (handler.ownerKind !== "DataSource") {
+      pressable.add(handler.ownerPath[0]);
+    }
+    for (const assignment of handler.assignments) {
+      collectRefs(assignment.expr).forEach(note);
+    }
+  }
+  for (const binding of graph.bindings) {
+    collectRefs(binding.expr).forEach(note);
+  }
+  for (const [name, info] of graph.elements) {
+    const interaction = getComponentDescriptor(info.componentType)?.interaction;
+    if (info.kind === "Component" && interaction && OPERATED.has(interaction) && !graph.contracts.has(name)) {
+      pressable.add(name);
+    }
+  }
+  return { pressable, scales };
+}
+
+// src/binding/checkData.ts
+var typeOfValue = (value) => typeof value === "number" || typeof value === "string" || typeof value === "boolean" ? typeof value : "other";
+function checkData(contract, data) {
+  const rows = Array.isArray(data) ? data : [data];
+  if (contract.mode === "table" !== Array.isArray(data)) {
+    return `DataSource '${contract.name}' is a ${contract.mode} source but delivered ${Array.isArray(data) ? "rows" : "a record"}.`;
+  }
+  for (const row of rows) {
+    for (const [field, type] of Object.entries(contract.fields)) {
+      if (typeOfValue(row[field]) !== type) {
+        return `'${contract.name}.${field}' should be ${contract.declared[field]}, got ${typeOfValue(row[field])}.`;
+      }
+      if (contract.declared[field] === "int" && !Number.isInteger(row[field])) {
+        return `'${contract.name}.${field}' should be a whole number (int), got ${String(row[field])}.`;
+      }
+    }
+  }
+  return null;
+}
+
+// src/binding/applyValue.ts
+var findChart = (input, id) => input.charts?.find((candidate) => candidate.id === id);
+function applyToSeries(input, path, change) {
+  const chart = findChart(input, path[0]);
+  if (!chart) {
+    return;
+  }
+  let series = chart.series.find((candidate) => candidate.id === path[1]);
+  if (!series) {
+    series = { id: path[1], label: path[1], values: [] };
+    chart.series.push(series);
+  }
+  change(series);
+}
+function findComponent(input, id) {
+  return (input.components ?? input.widgets)?.find((candidate) => candidate.id === id);
+}
+function writeComponentValue(input, id, value) {
+  const component = findComponent(input, id);
+  if (!component) {
+    return;
+  }
+  component.value = isGenericComponent(component) ? value : String(value);
+}
+function writeComponentDisabled(input, id, disabled) {
+  const component = findComponent(input, id);
+  if (component && isGenericComponent(component)) {
+    component.disabled = disabled;
+  }
+}
+function isComponentDisabled(input, id) {
+  const component = findComponent(input, id);
+  return component !== void 0 && isGenericComponent(component) && component.disabled;
+}
+function setShape(input, path, change) {
+  const shape = input.shapes.find((candidate) => candidate.id === path[0]);
+  if (shape) {
+    change(shape);
+  }
+}
+var APPLY = {
+  "Chart.categories": (input, path, value) => {
+    const chart = findChart(input, path[0]);
+    if (chart) {
+      chart.config = { ...chart.config ?? {}, categories: value };
+    }
+  },
+  "Chart.text": (input, path, value) => {
+    const chart = findChart(input, path[0]);
+    if (chart) {
+      chart.title = value;
+    }
+  },
+  "Series.values": (input, path, value) => applyToSeries(input, path, (series) => series.values = value),
+  "Series.label": (input, path, value) => applyToSeries(input, path, (series) => series.label = value),
+  "Shape.text": (input, path, value) => {
+    const shape = input.shapes.find((candidate) => candidate.id === path[0]);
+    if (shape) {
+      shape.text = value;
+    }
+  },
+  "Shape.fill": (input, path, value) => setShape(input, path, (shape) => shape.fillColor = value),
+  "Shape.stroke": (input, path, value) => setShape(input, path, (shape) => shape.strokeColor = value),
+  "Shape.textColor": (input, path, value) => setShape(input, path, (shape) => shape.textColor = value),
+  "Shape.opacity": (input, path, value) => setShape(input, path, (shape) => shape.opacity = value),
+  "Component.value": (input, path, value) => writeComponentValue(input, path[0], value),
+  "Component.disabled": (input, path, value) => writeComponentDisabled(input, path[0], value === true)
+};
+function applyShader(input, binding, value) {
+  const owners = [];
+  for (const shape of input.shapes) {
+    if (shape.shader?.name === binding.ownerPath[0]) {
+      shape.shader.parameters = { ...shape.shader.parameters, [binding.property]: value };
+      owners.push(shape.id);
+    }
+  }
+  return owners;
+}
+
+// src/binding/runtimeState.ts
+function initialValue(input, id, componentType) {
+  const descriptor = getComponentDescriptor(componentType);
+  const current = findComponent(input, id)?.value;
+  if (current === void 0) {
+    return descriptor?.value?.default ?? 0;
+  }
+  if (descriptor?.value?.type === "number") {
+    const value = Number(current);
+    return Number.isFinite(value) ? value : descriptor.value.default;
+  }
+  return current;
+}
+function createRuntimeState(sfl, options) {
+  const graph = buildBindingGraph(parseSource(sfl));
+  const input = structuredClone(sflToRenderInput(sfl));
+  const elementState = /* @__PURE__ */ new Map();
+  for (const [name, info] of graph.elements) {
+    if (!graph.contracts.has(name)) {
+      elementState.set(name, {
+        pressed: false,
+        hovered: false,
+        focused: false,
+        pointer: 0,
+        value: initialValue(input, name, info.componentType)
+      });
+    }
+  }
+  return {
+    options,
+    graph,
+    diagnostics: [...graph.diagnostics],
+    input,
+    sources: /* @__PURE__ */ new Map(),
+    applied: /* @__PURE__ */ new Map(),
+    dirty: /* @__PURE__ */ new Set(),
+    listeners: /* @__PURE__ */ new Set(),
+    warned: /* @__PURE__ */ new Set(),
+    liveListeners: /* @__PURE__ */ new Set(),
+    liveState: /* @__PURE__ */ new Map(),
+    elementState,
+    scheduled: false,
+    renderNeeded: false
+  };
+}
+function readValue(state, path) {
+  const [name, field] = path;
+  const element = state.sources.has(name) ? void 0 : state.elementState.get(name);
+  if (element) {
+    return element[field];
+  }
+  const data = state.sources.get(name)?.get();
+  if (data === void 0) {
+    throw new Error(`DataSource '${name}' has no data yet.`);
+  }
+  return Array.isArray(data) ? data.map((row) => row[field]) : data[field];
+}
+function missingSource(state, binding) {
+  return binding.dependencies.map((dependency) => dependency.split(".")[0]).find((name) => !state.sources.has(name) && !state.elementState.has(name));
+}
+
+// src/binding/evaluation.ts
+function announce(state, id, change) {
+  state.liveState.set(id, change);
+  for (const listener of [...state.liveListeners]) {
+    listener(change);
+  }
+}
+function applyComponentValue(state, binding, value) {
+  const id = binding.ownerPath[0];
+  const element = state.elementState.get(id);
+  if (element) {
+    element.value = value;
+    markDirty(state, id);
+  }
+  if (!isBuiltInComponentType(state.graph.elements.get(id)?.componentType)) {
+    return true;
+  }
+  announce(state, binding.id, { kind: "component", id, value });
+  return false;
+}
+function warnMissingSource(state, binding, missing) {
+  if (state.warned.has(missing)) {
+    return;
+  }
+  state.warned.add(missing);
+  state.diagnostics.push({
+    severity: "warning",
+    code: "source-not-registered",
+    message: `DataSource '${missing}' has no registered source, so '${binding.property}' stays empty.`,
+    line: binding.line,
+    col: binding.col
+  });
+}
+function evaluateBinding(state, binding) {
+  const missing = missingSource(state, binding);
+  if (missing) {
+    warnMissingSource(state, binding, missing);
+    return false;
+  }
+  const value = evaluate(binding.expr, { read: (path) => readValue(state, path) });
+  const key = JSON.stringify(value);
+  if (state.applied.get(binding.id) === key) {
+    return false;
+  }
+  state.applied.set(binding.id, key);
+  if (binding.ownerKind === "Shader") {
+    announce(state, binding.id, {
+      kind: "shader",
+      owners: applyShader(state.input, binding, value),
+      parameters: { [binding.property]: value }
+    });
+    return false;
+  }
+  APPLY[`${binding.ownerKind === "Text" ? "Shape" : binding.ownerKind}.${binding.property}`]?.(
+    state.input,
+    binding.ownerPath,
+    value
+  );
+  if (binding.ownerKind === "Component" && binding.property === "value") {
+    return applyComponentValue(state, binding, value);
+  }
+  return true;
+}
+function flush(state) {
+  state.scheduled = false;
+  let changed = state.renderNeeded;
+  state.renderNeeded = false;
+  for (const binding of state.dirty) {
+    changed = evaluateBinding(state, binding) || changed;
+  }
+  state.dirty.clear();
+  if (!changed) {
+    return null;
+  }
+  const result = renderCanvas(state.input, { ...state.options.renderOptions, linkHitAreas: true });
+  for (const listener of [...state.listeners]) {
+    listener(result);
+  }
+  return result;
+}
+function schedule(state) {
+  if (!state.scheduled) {
+    state.scheduled = true;
+    queueMicrotask(() => flush(state));
+  }
+}
+function markDirty(state, name) {
+  for (const [field, bindings] of state.graph.byField) {
+    if (field.startsWith(`${name}.`)) {
+      for (const binding of bindings) {
+        state.dirty.add(binding);
+      }
+    }
+  }
+}
+
+// src/binding/handlers.ts
+function runHandler(state, handler, delta) {
+  const env = {
+    read: (path) => path[0] === "time" && path[1] === "delta" ? delta ?? 0 : readValue(state, path)
+  };
+  for (const assignment of handler.assignments) {
+    const target = state.sources.get(assignment.source);
+    const readable = collectRefs(assignment.expr).every(
+      ([name]) => name === "time" || state.sources.has(name) || state.elementState.has(name)
+    );
+    if (!target || !("set" in target) || !readable) {
+      continue;
+    }
+    let value = evaluate(assignment.expr, env);
+    if (typeof value === "number") {
+      value = state.graph.contracts.get(assignment.source)?.declared[assignment.field] === "int" ? Math.round(value) : value;
+      if (!Number.isFinite(value)) {
+        continue;
+      }
+    }
+    const row = target.get();
+    if (row[assignment.field] !== value) {
+      target.set({ ...row, [assignment.field]: value });
+    }
+  }
+}
+function dispatch(state, id, event) {
+  for (const handler of state.graph.handlers) {
+    if (handler.event === event && handler.ownerKind !== "DataSource" && handler.ownerPath[0] === id) {
+      runHandler(state, handler);
+    }
+  }
+}
+function runTick(state, seconds) {
+  for (const handler of state.graph.handlers) {
+    if (handler.event === TICK_EVENT) {
+      runHandler(state, handler, seconds);
+    }
+  }
+}
+function setElementState(state, id, patch) {
+  const current = state.elementState.get(id);
+  if (!current || Object.keys(patch).every((key) => current[key] === patch[key])) {
+    return;
+  }
+  Object.assign(current, patch);
+  markDirty(state, id);
+  schedule(state);
+}
+
+// src/binding/userInput.ts
+function descriptorOf(state, id) {
+  const info = state.graph.elements.get(id);
+  return info?.kind === "Component" ? getComponentDescriptor(info.componentType) : void 0;
+}
+function valueBinding(state, id) {
+  return state.graph.bindings.find(
+    (binding) => binding.ownerKind === "Component" && binding.ownerPath[0] === id && binding.property === "value"
+  );
+}
+function writeBack(state, binding, value) {
+  const target = binding.expr.kind === "ref" ? binding.expr.path : void 0;
+  const source = target ? state.sources.get(target[0]) : void 0;
+  if (!target || !source || !("set" in source)) {
+    return;
+  }
+  const row = source.get();
+  if (row[target[1]] !== value) {
+    source.set({ ...row, [target[1]]: value });
+  }
+}
+function changeComponentValue(state, id, next) {
+  const spec = descriptorOf(state, id)?.value;
+  const element = state.elementState.get(id);
+  if (!spec?.writable || !element || typeof next !== spec.type || element.value === next) {
+    return false;
+  }
+  if (isComponentDisabled(state.input, id)) {
+    return false;
+  }
+  const binding = valueBinding(state, id);
+  if (binding && binding.operator !== "<->") {
+    return false;
+  }
+  element.value = next;
+  writeComponentValue(state.input, id, next);
+  state.renderNeeded = true;
+  if (binding) {
+    state.applied.set(binding.id, JSON.stringify(next));
+    writeBack(state, binding, next);
+  }
+  markDirty(state, id);
+  dispatch(state, id, CHANGE_EVENT);
+  schedule(state);
+  return true;
+}
+function reactToActivation(state, id) {
+  const element = state.elementState.get(id);
+  const descriptor = descriptorOf(state, id);
+  if (element && descriptor?.interaction === "toggle" && descriptor.value?.type === "boolean") {
+    changeComponentValue(state, id, element.value !== true);
+  }
+}
+function pressElement(state, id) {
+  if (isComponentDisabled(state.input, id)) {
+    return;
+  }
+  setElementState(state, id, { pressed: true });
+  dispatch(state, id, "onPress");
+}
+function releaseElement(state, id, tapped) {
+  setElementState(state, id, { pressed: false });
+  if (isComponentDisabled(state.input, id)) {
+    return;
+  }
+  if (tapped) {
+    reactToActivation(state, id);
+  }
+  dispatch(state, id, "onRelease");
+  if (tapped) {
+    dispatch(state, id, "onTap");
+  }
+}
+function activateElement(state, id) {
+  if (isComponentDisabled(state.input, id)) {
+    return;
+  }
+  reactToActivation(state, id);
+  dispatch(state, id, "onTap");
+}
+
+// src/binding/runtime.ts
+function registerSource(state, name, source) {
+  const contract = state.graph.contracts.get(name);
+  if (!contract) {
+    throw new Error(`No DataSource '${name}' is declared in the SFL.`);
+  }
+  const accept = () => {
+    const problem = checkData(contract, source.get());
+    if (problem) {
+      state.diagnostics.push({ severity: "error", code: "data-type-mismatch", message: problem, line: 0, col: 0 });
+      return false;
+    }
+    return true;
+  };
+  const adopt = () => {
+    if (accept()) {
+      state.sources.set(name, source);
+      state.warned.delete(name);
+      markDirty(state, name);
+      schedule(state);
+    }
+  };
+  adopt();
+  const unsubscribe = source.subscribe(adopt);
+  return () => {
+    unsubscribe();
+    state.sources.delete(name);
+  };
+}
+function pushLiveChange(target, change) {
+  if (change.kind === "component") {
+    (target.setComponentValue ?? target.setWidgetValue)?.call(target, change.id, change.value);
+    return;
+  }
+  for (const owner of change.owners) {
+    target.setShaderParameters?.(owner, change.parameters);
+  }
+}
+function attach(state, target) {
+  const send = (change) => pushLiveChange(target, change);
+  state.liveListeners.add(send);
+  for (const change of state.liveState.values()) {
+    send(change);
+  }
+  const listener = (result) => target.update({ svg: result.svg });
+  state.listeners.add(listener);
+  for (const binding of state.graph.bindings) {
+    state.dirty.add(binding);
+  }
+  flush(state);
+  return () => {
+    state.listeners.delete(listener);
+    state.liveListeners.delete(send);
+  };
+}
+function createBindingRuntime(sfl, options = {}) {
+  const state = createRuntimeState(sfl, options);
+  for (const binding of state.graph.bindings) {
+    if (binding.dependencies.length === 0) {
+      state.dirty.add(binding);
+    }
+  }
+  if (state.dirty.size > 0) {
+    schedule(state);
+  }
+  return {
+    diagnostics: state.diagnostics,
+    graph: state.graph,
+    interactive: interactiveElements(state.graph),
+    input: state.input,
+    registerSource: (name, source) => registerSource(state, name, source),
+    setElementState: (id, patch) => setElementState(state, id, patch),
+    press: (id) => pressElement(state, id),
+    release: (id, tapped) => releaseElement(state, id, tapped),
+    activate: (id) => activateElement(state, id),
+    change: (id, value) => changeComponentValue(state, id, value),
+    drag(id, pointer) {
+      if (pointer !== void 0) {
+        setElementState(state, id, { pointer });
+      }
+      dispatch(state, id, "onDrag");
+    },
+    tick: (seconds) => runTick(state, seconds),
+    flush: () => flush(state),
+    onRender(listener) {
+      state.listeners.add(listener);
+      return () => state.listeners.delete(listener);
+    },
+    attach: (target) => attach(state, target)
+  };
+}
+function renderBound(sfl, options = {}) {
+  const { data = {}, ...renderOptions } = options;
+  const runtime = createBindingRuntime(sfl, { renderOptions });
+  for (const [name, rows] of Object.entries(data)) {
+    runtime.registerSource(name, { get: () => rows, subscribe: () => () => void 0 });
+  }
+  runtime.flush();
+  return renderCanvas(runtime.input, renderOptions);
+}
+
+export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound };
+//# sourceMappingURL=chunk-BODZN3ZI.js.map
+//# sourceMappingURL=chunk-BODZN3ZI.js.map