stickyflow 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -17,6 +17,44 @@ Two things count as breaking here that are easy to overlook:
 
 ## [Unreleased]
 
+## [0.8.0] - 2026-10-28
+
+### Added
+
+- The shader program `glowCard`, the surface of a card: dark glass with a thin edge and colored lights low in the card that curl like smoke, fade out from the side set by `angle` and turn white at that edge, with grit in the lit parts. Parameters are `colorA`, `colorB`, `colorC`, `baseColor`, `glowHeight`, `glowSpread`, `angle`, `core`, `rim`, `grain`, `warp`, `intensity`, `cornerRadius` and `speed`. It draws its own rectangle.
+- The names and the color bar of a heatmap can stand on any side of its grid. `rowLabelSide` is `left` or `right`, `columnLabelSide` is `top` or `bottom`, and `legendSide` is `top`, `bottom`, `left` or `right`. `legendGap` sets the distance between the grid and the color bar, and `axisLabelSpace` sets how much room the names get beside the data. Left out, the room is as much as the longest name needs. The names of a heatmap follow the font, size and color of the axis.
+- `xLabelGap` and `yLabelGap` set how far the labels stand from the graphic, in pixels, along the x axis and along the y axis.
+- `titleAlign` and `axisLabelAlign` align the title over a chart and the names beside the data to `left`, `center` or `right`.
+- `axisLabelAngle` stands the labels of heatmap columns, bar categories and boxplot boxes up, from `0` for flat to `90` for upright.
+- `data-sf-snap-distance` on the svg sets in pixels how close a shape has to come to another before it snaps. Without it the distance stays 20.
+- Round charts (`pie`, `radar`, `radial`, `radialBar` and `polarArea`) keep their proportions while they are resized, and any shape does while Shift is held.
+
+## [0.7.0] - 2026-10-25
+
+### Added
+
+- The components `slider`, `progress` and `segmented`. A `slider` takes a value between `min` and `max` from the pointer, in steps of `step` if set. A `progress` shows a value as a bar or, with `variant: "ring"`, as a ring, and can write the share or the value into itself with `display`. A `segmented` shows the labels of `options`, separated by commas, and its value is the number of the chosen one, counted from 0.
+- Three shader programs for backgrounds, which draw a rectangle or a rounded rectangle of their own, as `reactivePanel` does. `ledMatrix` is a wall of small pill-shaped lights with a glow that rises and drifts. `lightBand` is a band of light with a glow that runs through three colors. `silkFolds` is a folded cloth of satin with thin bright edges. Each one has `cornerRadius`, as a share of the shorter side, and `speed`, where 0 gives a still picture. `ledMatrix` and `silkFolds` react to the pointer, and `reaction` sets how strongly. On `ledMatrix` the places the pointer has been dim down behind it, and `trail` is how many seconds that takes. `pointerSize` sets how wide that stripe is. Its light can be moved with `originX` and `originY`, sized with `spread` and put out with 0, and `drift` sets how far it sways.
+- A shader program can read `uWake`, 16 places the pointer has been over its surface, each as x, y and how much of it is left, when it has a number parameter `trail`, the seconds a place takes to fade out.
+- A shader program can read `uPointer`, where the pointer is over its surface from 0 to 1 and counted from the lower left, and `uHover`, which glides to 1 while the pointer is over the surface and back to 0 when it leaves.
+- The component `range`, a slider with two thumbs. `value` is the lower end and `valueEnd` the upper end, and both can be bound with `<->`, each to a field of its own. The nearer thumb follows the pointer, and the thumbs do not pass each other. It takes the `variant`, `direction` and `ticks` of the slider. Its interaction is `range`.
+- `valueEnd` is a bindable property of a component that has a number property of that name. `runtime.slide(id, x, y)` takes the position as fractions of the width and the height.
+- `componentTypes()` is exported from the main entry.
+- `category` on a component descriptor, and `COMPONENT_CATEGORIES`, the list of the shelves a component is filed on: actions, selection, value input, text input, indicators, instruments, navigation and containers. The built-in components name their shelf.
+- The component `knob`, a dial with an arc that fills up to the value. The pointer sets the value by its angle round the dial, between `min` and `max`, in steps of `step`. `start` and `sweep` set where the arc begins and how far it runs, and `display`, `thickness`, `face` and `dot` style it. Its interaction is `turn`.
+- `direction: "vertical"` on a `slider` and on a `progress` bar stands them upright, and they fill from below. `ticks` on a `slider` draws that many marks along it, the two ends included, and `tickColor` colors them.
+- `variant: "field"` on a `slider` draws a field that fills up to the value, with a thin handle at its end, the `label` at the left and the value at the right (`display` is `value`, `percent` or `none`). `surface`, `fill`, `radius`, `textColor` and `fontSize` style it.
+- The component interactions `slide` and `pick`, and `runtime.slide(id, fraction)` on a binding runtime, which turns a position along the width of a component into its value.
+- `animate` on `switch`, `checkbox`, `toggleButton` and `button`, and on the new components. It is the number of milliseconds a change of position, size, color or opacity takes to show. The default is 160 for the first four, 0 for `slider`, 300 for `progress` and 200 for `segmented`. A scene style can carry the same as `transition`, and the viewer patches the elements in place, so the browser does the animation.
+- The shader program `reactivePanel` draws a rounded panel that can send light into the scene and receive it. A panel with `emission` lights the edges of the panels near it on the side that faces it. `reception` sets how much a panel takes in, `emitterFill`, `grain` and `grainScale` light and texture the inside of an emitter, and `glowRadius`, `borderWidth` and `cornerRadius` shape the glow and the border.
+- `surfacePadding` on a `Shader` adds room around the shape for an outer glow, in canvas units. It is not a parameter of the program.
+- A shader on a `rectangle` or a `rounded_rectangle` is drawn when its program draws a rectangle of its own. Today that is `reactivePanel`. Every other program still needs a `circle` or an `oval`.
+- `self.id` in an expression is the id of the element the expression belongs to. In a binding of a `Shader` it is read separately for every shape that uses the shader, so one shader can light the tapped panel and no other. In an element handler it is the element that was pressed, so `onTap: glow.active <- self.id` works for any number of elements.
+
+### Changed
+
+- Every shader surface in the SVG carries `data-sf-shader-padding`, `0` when there is no padding.
+
 ## [0.6.0] - 2026-10-22
 
 ### Added
@@ -235,4 +273,5 @@ First versioned release. Not yet published to npm.
   across machines. Now a locale-independent code-point compare.
 
 [Unreleased]: https://github.com/D-Queck/stickyflow.js/compare/v0.1.0...HEAD
+[0.7.0]: https://github.com/D-Queck/stickyflow.js/releases/tag/v0.7.0
 [0.1.0]: https://github.com/D-Queck/stickyflow.js/releases/tag/v0.1.0

package/dist/binding/index.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunkJIJMZMGY_cjs = require('../chunk-JIJMZMGY.cjs');
-require('../chunk-WQRT5PVT.cjs');
-require('../chunk-XJ4W6TW4.cjs');
+var chunkXPM3E7NV_cjs = require('../chunk-XPM3E7NV.cjs');
+require('../chunk-VOYX6JMW.cjs');
+require('../chunk-LNW5VIEA.cjs');
 
 
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.buildBindingGraph; }
+  get: function () { return chunkXPM3E7NV_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "collectContracts", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.collectContracts; }
+  get: function () { return chunkXPM3E7NV_cjs.collectContracts; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.createBindingRuntime; }
+  get: function () { return chunkXPM3E7NV_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.createDataSource; }
+  get: function () { return chunkXPM3E7NV_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.interactiveElements; }
+  get: function () { return chunkXPM3E7NV_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.renderBound; }
+  get: function () { return chunkXPM3E7NV_cjs.renderBound; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/binding/index.d.cts

@@ -1,7 +1,7 @@
-import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-CrkMHvVi.cjs';
-export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-CrkMHvVi.cjs';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-BhivvBeL.cjs';
-import '../render-Db0eSz_s.cjs';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-BYODuxHk.cjs';
+export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-BYODuxHk.cjs';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-DIag-XBa.cjs';
+import '../render-Bp2FLEzv.cjs';
 
 declare function collectContracts(sflDocument: SflDocument): {
     contracts: Map<string, DataSourceContract>;

package/dist/binding/index.d.ts

@@ -1,7 +1,7 @@
-import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-DnI7mRF5.js';
-export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-DnI7mRF5.js';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-n2yG-_j-.js';
-import '../render-Db0eSz_s.js';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-C7sSLfOK.js';
+export { a as BindingGraph, b as BindingRuntime, c as BindingRuntimeOptions, d as BindingTarget, e as BindingType, f as BindingValue, g as BoundAssignment, h as BoundHandler, i as BoundProperty, j as DataSource, E as ElementInfo, k as ElementState, I as InteractiveElements, M as MutableDataSource, l as buildBindingGraph, m as createDataSource, n as interactiveElements } from '../runtimeTypes-C7sSLfOK.js';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-CWIGxRcL.js';
+import '../render-Bp2FLEzv.js';
 
 declare function collectContracts(sflDocument: SflDocument): {
     contracts: Map<string, DataSourceContract>;

package/dist/binding/index.js

@@ -1,5 +1,5 @@
-export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound } from '../chunk-MFNUJA26.js';
-import '../chunk-FVHVOJS2.js';
-import '../chunk-4G2R7PEL.js';
+export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound } from '../chunk-CZW3ARXQ.js';
+import '../chunk-MAPNY7MJ.js';
+import '../chunk-GLZVHUSW.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/{chunk-MFNUJA26.js → chunk-CZW3ARXQ.js}

@@ -1,5 +1,5 @@
-import { renderCanvas, sflToRenderInput } from './chunk-FVHVOJS2.js';
-import { getComponentDescriptor, parseSource, isGenericComponent, isBuiltInComponentType } from './chunk-4G2R7PEL.js';
+import { renderCanvas, sflToRenderInput, sliderReach } from './chunk-MAPNY7MJ.js';
+import { getComponentDescriptor, parseSource, isGenericComponent, isBuiltInComponentType } from './chunk-GLZVHUSW.js';
 
 // src/binding/types.ts
 var DECLARED = {
@@ -98,7 +98,7 @@ function createDataSource(initial) {
 }
 
 // src/binding/componentBinding.ts
-var BINDABLE_COMPONENT_PROPERTIES = ["value", "disabled"];
+var BINDABLE_COMPONENT_PROPERTIES = ["value", "valueEnd", "disabled"];
 function acceptsUserChange(componentType) {
   return getComponentDescriptor(componentType)?.value?.writable === true;
 }
@@ -116,6 +116,9 @@ function componentPropertyType(componentType, property) {
   if (property === "disabled") {
     return "boolean";
   }
+  if (property === "valueEnd") {
+    return getComponentDescriptor(componentType)?.properties.valueEnd?.type === "number" ? "number" : void 0;
+  }
   return property === "value" ? getComponentDescriptor(componentType)?.value?.type : void 0;
 }
 function twoWayTargetProblem(key, expr, contracts) {
@@ -260,7 +263,7 @@ function inferType(expr, scope, report) {
         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.`
+          name === "time.delta" ? "'time.delta' is only available in an onTick handler." : `Unknown reference '${name}'. Use <DataSource>.<field>, self.id, or <element>.pressed / hovered / pointer.`
         );
       }
       return type;
@@ -429,12 +432,15 @@ function elementStateType(element, state) {
   }
   return element.kind === "Component" ? componentStateType(element.componentType, state) : void 0;
 }
-function createScope(contracts, elements, ticking = false) {
+function createScope(contracts, elements, ticking = false, selfAvailable = false) {
   return {
     resolve(path) {
       if (path.length !== 2) {
         return void 0;
       }
+      if (selfAvailable && path[0] === "self" && path[1] === "id") {
+        return "string";
+      }
       const contract = contracts.get(path[0]);
       if (contract) {
         return fieldType(contract, path[1]);
@@ -542,7 +548,7 @@ function bindHandler(site, contracts, elements, diagnostics) {
     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 scope = createScope(contracts, elements, ticking, !ticking);
   const assignments = handler.assignments.flatMap(
     (assignment) => bindAssignment(assignment, name, own, contracts, scope, report) ?? []
   );
@@ -581,7 +587,7 @@ function expectedType(site, elements) {
 }
 function canBindTwoWay(site, elements) {
   const { kind, path, binding } = site;
-  return kind === "Component" && binding.key === "value" && acceptsUserChange(elements.get(path[0])?.componentType);
+  return kind === "Component" && (binding.key === "value" || binding.key === "valueEnd") && acceptsUserChange(elements.get(path[0])?.componentType);
 }
 function rejectedOperator(site, elements, contracts) {
   const { binding } = site;
@@ -648,7 +654,7 @@ function buildBindingGraph(sflDocument) {
   const { contracts, diagnostics } = collectContracts(sflDocument);
   const elements = collectElements(sflDocument);
   warnNameCollisions(contracts, elements, diagnostics);
-  const scope = createScope(contracts, elements);
+  const scope = createScope(contracts, elements, false, true);
   const sites = [];
   collectSites(sflDocument.blocks, [], sites);
   const bindings = sites.flatMap((site) => bindProperty(site, scope, elements, contracts, diagnostics) ?? []);
@@ -659,7 +665,7 @@ function buildBindingGraph(sflDocument) {
 }
 
 // src/binding/interactive.ts
-var OPERATED = /* @__PURE__ */ new Set(["toggle", "press"]);
+var OPERATED = /* @__PURE__ */ new Set(["toggle", "press", "slide", "pick", "turn", "range"]);
 function interactiveElements(graph) {
   const pressable = /* @__PURE__ */ new Set();
   const scales = /* @__PURE__ */ new Set();
@@ -733,6 +739,12 @@ function writeComponentValue(input, id, value) {
   }
   component.value = isGenericComponent(component) ? value : String(value);
 }
+function writeComponentValueEnd(input, id, value) {
+  const component = findComponent(input, id);
+  if (component && isGenericComponent(component)) {
+    component.properties.valueEnd = value;
+  }
+}
 function writeComponentDisabled(input, id, disabled) {
   const component = findComponent(input, id);
   if (component && isGenericComponent(component)) {
@@ -775,13 +787,17 @@ var APPLY = {
   "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.valueEnd": (input, path, value) => writeComponentValueEnd(input, path[0], value),
   "Component.disabled": (input, path, value) => writeComponentDisabled(input, path[0], value === true)
 };
-function applyShader(input, binding, value) {
+function applyShader(input, binding, value, ownerId) {
   const owners = [];
   for (const shape of input.shapes) {
-    if (shape.shader?.name === binding.ownerPath[0]) {
-      shape.shader.parameters = { ...shape.shader.parameters, [binding.property]: value };
+    if (shape.shader?.name === binding.ownerPath[0] && (ownerId === void 0 || shape.id === ownerId)) {
+      shape.shader = {
+        ...shape.shader,
+        parameters: { ...shape.shader.parameters, [binding.property]: value }
+      };
       owners.push(shape.id);
     }
   }
@@ -846,7 +862,7 @@ function readValue(state, path) {
   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));
+  return binding.dependencies.map((dependency) => dependency.split(".")[0]).find((name) => name !== "self" && !state.sources.has(name) && !state.elementState.has(name));
 }
 
 // src/binding/evaluation.ts
@@ -888,7 +904,32 @@ function evaluateBinding(state, binding) {
     warnMissingSource(state, binding, missing);
     return false;
   }
-  const value = evaluate(binding.expr, { read: (path) => readValue(state, path) });
+  const readsSelf = binding.dependencies.includes("self.id");
+  if (binding.ownerKind === "Shader" && readsSelf) {
+    const owners = state.input.shapes.filter((shape) => shape.shader?.name === binding.ownerPath[0]);
+    for (const owner of owners) {
+      const value2 = evaluate(binding.expr, {
+        read: (path) => path[0] === "self" && path[1] === "id" ? owner.id : readValue(state, path)
+      });
+      const appliedId = `${binding.id}.${owner.id}`;
+      const key2 = JSON.stringify(value2);
+      if (state.applied.get(appliedId) === key2) {
+        continue;
+      }
+      state.applied.set(appliedId, key2);
+      applyShader(state.input, binding, value2, owner.id);
+      announce(state, appliedId, {
+        kind: "shader",
+        owners: [owner.id],
+        parameters: { [binding.property]: value2 }
+      });
+    }
+    return false;
+  }
+  const selfId = binding.ownerKind === "Shader" ? void 0 : binding.ownerPath[0];
+  const value = evaluate(binding.expr, {
+    read: (path) => path[0] === "self" && path[1] === "id" && selfId ? selfId : readValue(state, path)
+  });
   const key = JSON.stringify(value);
   if (state.applied.get(binding.id) === key) {
     return false;
@@ -946,14 +987,22 @@ function markDirty(state, name) {
 }
 
 // src/binding/handlers.ts
-function runHandler(state, handler, delta) {
+function runHandler(state, handler, delta, selfId) {
   const env = {
-    read: (path) => path[0] === "time" && path[1] === "delta" ? delta ?? 0 : readValue(state, path)
+    read: (path) => {
+      if (path[0] === "time" && path[1] === "delta") {
+        return delta ?? 0;
+      }
+      if (path[0] === "self" && path[1] === "id" && selfId) {
+        return selfId;
+      }
+      return 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)
+      ([name]) => name === "time" || name === "self" && Boolean(selfId) || state.sources.has(name) || state.elementState.has(name)
     );
     if (!target || !("set" in target) || !readable) {
       continue;
@@ -974,7 +1023,7 @@ function runHandler(state, handler, delta) {
 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);
+      runHandler(state, handler, void 0, id);
     }
   }
 }
@@ -1000,9 +1049,9 @@ function descriptorOf(state, id) {
   const info = state.graph.elements.get(id);
   return info?.kind === "Component" ? getComponentDescriptor(info.componentType) : void 0;
 }
-function valueBinding(state, id) {
+function valueBinding(state, id, property = "value") {
   return state.graph.bindings.find(
-    (binding) => binding.ownerKind === "Component" && binding.ownerPath[0] === id && binding.property === "value"
+    (binding) => binding.ownerKind === "Component" && binding.ownerPath[0] === id && binding.property === property
   );
 }
 function writeBack(state, binding, value) {
@@ -1016,7 +1065,30 @@ function writeBack(state, binding, value) {
     source.set({ ...row, [target[1]]: value });
   }
 }
-function changeComponentValue(state, id, next) {
+function changeValueEnd(state, id, next) {
+  const component = findComponent(state.input, id);
+  if (!component || !isGenericComponent(component) || component.properties.valueEnd === next || isComponentDisabled(state.input, id)) {
+    return false;
+  }
+  const binding = valueBinding(state, id, "valueEnd");
+  if (binding && binding.operator !== "<->") {
+    return false;
+  }
+  writeComponentValueEnd(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 changeComponentValue(state, id, next, property = "value") {
+  if (property === "valueEnd") {
+    return typeof next === "number" && changeValueEnd(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) {
@@ -1041,6 +1113,64 @@ function changeComponentValue(state, id, next) {
   schedule(state);
   return true;
 }
+var TAU = Math.PI * 2;
+var grabbed = /* @__PURE__ */ new WeakMap();
+var within = (value) => Math.min(1, Math.max(0, value));
+function slideAlong(properties, width, height, x, y) {
+  const vertical = properties.direction === "vertical";
+  const length = vertical ? height : width;
+  const reach = sliderReach(properties.variant, vertical ? width : height);
+  const position = vertical ? 1 - y : x;
+  return length > reach * 2 ? within((position * length - reach) / (length - reach * 2)) : position;
+}
+function turnAlong(properties, width, height, x, y) {
+  const start = Number(properties.start ?? 225) * Math.PI / 180;
+  const sweep = Number(properties.sweep ?? 270) * Math.PI / 180;
+  const gap = TAU - sweep;
+  const angle = Math.atan2(-(y - 0.5) * height, (x - 0.5) * width);
+  const shifted = start - angle + gap / 2;
+  return within(((shifted % TAU + TAU) % TAU - gap / 2) / sweep);
+}
+function slideElement(state, id, x, y = 0) {
+  const component = findComponent(state.input, id);
+  if (!component || !isGenericComponent(component)) {
+    return;
+  }
+  const kind = descriptorOf(state, id)?.interaction;
+  const { properties } = component;
+  if (kind === "pick") {
+    const count = String(properties.options ?? "").split(",").filter((option) => option.trim()).length;
+    if (count > 0) {
+      changeComponentValue(state, id, Math.min(count - 1, Math.floor(x * count)));
+    }
+    return;
+  }
+  const along = kind === "turn" ? turnAlong(properties, component.width, component.height, x, y) : slideAlong(properties, component.width, component.height, x, y);
+  const min = Number(properties.min ?? 0);
+  const max = Number(properties.max ?? 100);
+  const step = Number(properties.step ?? 0);
+  let value = min + along * (max - min);
+  if (step > 0) {
+    value = min + Math.round((value - min) / step) * step;
+  }
+  const taken = Number(Math.min(max, Math.max(min, value)).toFixed(6));
+  if (kind !== "range") {
+    changeComponentValue(state, id, taken);
+    return;
+  }
+  const low = Number(component.value);
+  const high = Number(properties.valueEnd ?? max);
+  const holds = grabbed.get(state) ?? /* @__PURE__ */ new Map();
+  grabbed.set(state, holds);
+  if (!holds.has(id)) {
+    holds.set(id, taken >= high || taken > low && taken - low > high - taken ? "end" : "start");
+  }
+  if (holds.get(id) === "start") {
+    changeComponentValue(state, id, Math.min(taken, high));
+  } else {
+    changeComponentValue(state, id, Math.max(taken, low), "valueEnd");
+  }
+}
 function reactToActivation(state, id) {
   const element = state.elementState.get(id);
   const descriptor = descriptorOf(state, id);
@@ -1049,6 +1179,7 @@ function reactToActivation(state, id) {
   }
 }
 function pressElement(state, id) {
+  grabbed.get(state)?.delete(id);
   if (isComponentDisabled(state.input, id)) {
     return;
   }
@@ -1056,6 +1187,7 @@ function pressElement(state, id) {
   dispatch(state, id, "onPress");
 }
 function releaseElement(state, id, tapped) {
+  grabbed.get(state)?.delete(id);
   setElementState(state, id, { pressed: false });
   if (isComponentDisabled(state.input, id)) {
     return;
@@ -1152,6 +1284,7 @@ function createBindingRuntime(sfl, options = {}) {
     release: (id, tapped) => releaseElement(state, id, tapped),
     activate: (id) => activateElement(state, id),
     change: (id, value) => changeComponentValue(state, id, value),
+    slide: (id, x, y) => slideElement(state, id, x, y),
     drag(id, pointer) {
       if (pointer !== void 0) {
         setElementState(state, id, { pointer });
@@ -1178,5 +1311,5 @@ function renderBound(sfl, options = {}) {
 }
 
 export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound };
-//# sourceMappingURL=chunk-MFNUJA26.js.map
-//# sourceMappingURL=chunk-MFNUJA26.js.map
+//# sourceMappingURL=chunk-CZW3ARXQ.js.map
+//# sourceMappingURL=chunk-CZW3ARXQ.js.map