stickyflow 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -17,6 +17,32 @@ Two things count as breaking here that are easy to overlook:
 
 ## [Unreleased]
 
+## [0.11.1] - 2026-10-30
+
+### Added
+
+- `applyMoveChanges` writes the objects of one drag at once and reads the document one time.
+- The color popover has a pipette next to the hex field, in browsers that offer the EyeDropper API.
+
+### Fixed
+
+- A `Text` is picked and dragged by its whole box, not only by its letters. The rendered SVG of a text changes by a `pointer-events` attribute.
+- An `Image` follows the pointer while it is resized, instead of jumping to its new size at the end.
+
+## [0.11.0] - 2026-10-28
+
+### Added
+
+- The component `hand`, a hand of a clock or a gauge. It turns about the middle of its box, clockwise from the top, by `value / max` of a full circle, so every hand of a face has the same box and the same pivot. `length`, `tail` and `gap` are shares of the radius, `width` and `taper` give its shape, and `color`, `root`, `fade` and `tipFade` give a gradient along it, as the tail of a comet. `tipFade` dissolves it towards its tip, and `fade` towards its root or, with a `tail`, towards the end of the tail. `soft` makes it a trail of light that runs out from the pivot, of three blurred layers that are brightest at the pivot (a wide short glow, a tapering body and a thin core), and `bloom` puts a blurred light under a crisp hand that is brightest at the pivot and runs out along the hand. `glow` is a light round it, and `hub` with `hubFill` and `hubRing` is a cap on the pivot. It is drawn as SVG, without a shader. It has no interaction.
+- The shader program `waves`, a round face of layered waves that drift. Its parameters are `layers`, `level`, `amplitude`, `frequency`, `tilt`, `softness`, `edge`, `shade`, `glow`, `vignette`, `grain`, `speed` and `intensity`, with the colors `color`, `accent`, `cool` and `highlight`. It needs a `circle` or an `oval`.
+- The shader program `vortex`, a round face of soft rings around a dark eye. Its parameters are `rings`, `ringWidth`, `variation`, `twist`, `arms`, `wobble`, `offsetX`, `offsetY`, `squash`, `eye`, `angle`, `spread`, `glow`, `gloss`, `glossHeight`, `vignette`, `grain`, `speed` and `intensity`, with the colors `color`, `accent` and `cool`. It needs a `circle` or an `oval`.
+
+- The block `Image`, a picture on the canvas. `src` is the address of the file, `fit` is `cover`, `contain` or `fill`, and `imageSize` with `crop` (both in pixels of the file) show only a part of it. It moves, scales, turns and layers like a shape, and `shape`, `cornerRadius`, `stroke`, `opacity`, `blur` and `blend` work on it. `insertCanvasObject` takes the kind `image`.
+
+### Changed
+
+- A shader surface is no longer built again when the drawing is patched. It keeps its compiled program and takes the new parameters, so a slider that moves a parameter and a source that changes every second do not compile the shader each time. A shader that replaces the fill of its shape (`tickScale`, `ruler`, `button`, `plasmaGauge`, `reactivePanel`, `smearOrb`, `chromaticGlassPlate`) is still built again.
+
 ## [0.10.0] - 2026-10-28
 
 ### Added

package/dist/binding/index.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunkTECWZVIM_cjs = require('../chunk-TECWZVIM.cjs');
-require('../chunk-5PJ55GPG.cjs');
-require('../chunk-LSEMXRB5.cjs');
+var chunk4KBU4CFU_cjs = require('../chunk-4KBU4CFU.cjs');
+require('../chunk-EHH6ZDK6.cjs');
+require('../chunk-UHKFJBY5.cjs');
 
 
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.buildBindingGraph; }
+  get: function () { return chunk4KBU4CFU_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "collectContracts", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.collectContracts; }
+  get: function () { return chunk4KBU4CFU_cjs.collectContracts; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.createBindingRuntime; }
+  get: function () { return chunk4KBU4CFU_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.createDataSource; }
+  get: function () { return chunk4KBU4CFU_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.interactiveElements; }
+  get: function () { return chunk4KBU4CFU_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunkTECWZVIM_cjs.renderBound; }
+  get: function () { return chunk4KBU4CFU_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-BvJBZLkr.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-BvJBZLkr.cjs';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-Bkv7QW7H.cjs';
-import '../render-DU4lYbRl.cjs';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-B7p6b1Bi.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-B7p6b1Bi.cjs';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-C-C5v9po.cjs';
+import '../render-BDO4S5uF.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-C1shzoyr.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-C1shzoyr.js';
-export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-DJ4K4_HZ.js';
-import '../render-DU4lYbRl.js';
+import { S as SflDocument, D as DataSourceContract, B as BindingDiagnostic } from '../runtimeTypes-BDA_CfWh.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-BDA_CfWh.js';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-lCAfU-1Q.js';
+import '../render-BDO4S5uF.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-L7CEX5JV.js';
-import '../chunk-SDOHUNBW.js';
-import '../chunk-HRU6VOEC.js';
+export { buildBindingGraph, collectContracts, createBindingRuntime, createDataSource, interactiveElements, renderBound } from '../chunk-UD6IG2PG.js';
+import '../chunk-TQIYK5OA.js';
+import '../chunk-G6IW2IX3.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/{chunk-TECWZVIM.cjs → chunk-4KBU4CFU.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk5PJ55GPG_cjs = require('./chunk-5PJ55GPG.cjs');
-var chunkLSEMXRB5_cjs = require('./chunk-LSEMXRB5.cjs');
+var chunkEHH6ZDK6_cjs = require('./chunk-EHH6ZDK6.cjs');
+var chunkUHKFJBY5_cjs = require('./chunk-UHKFJBY5.cjs');
 
 // src/binding/types.ts
 var DECLARED = {
@@ -102,10 +102,10 @@ function createDataSource(initial) {
 // src/binding/componentBinding.ts
 var BINDABLE_COMPONENT_PROPERTIES = ["value", "valueEnd", "disabled"];
 function acceptsUserChange(componentType) {
-  return chunkLSEMXRB5_cjs.getComponentDescriptor(componentType)?.value?.writable === true;
+  return chunkUHKFJBY5_cjs.getComponentDescriptor(componentType)?.value?.writable === true;
 }
 function componentStateType(componentType, state) {
-  const descriptor = chunkLSEMXRB5_cjs.getComponentDescriptor(componentType);
+  const descriptor = chunkUHKFJBY5_cjs.getComponentDescriptor(componentType);
   if (state === "focused") {
     return "boolean";
   }
@@ -119,9 +119,9 @@ function componentPropertyType(componentType, property) {
     return "boolean";
   }
   if (property === "valueEnd") {
-    return chunkLSEMXRB5_cjs.getComponentDescriptor(componentType)?.properties.valueEnd?.type === "number" ? "number" : void 0;
+    return chunkUHKFJBY5_cjs.getComponentDescriptor(componentType)?.properties.valueEnd?.type === "number" ? "number" : void 0;
   }
-  return property === "value" ? chunkLSEMXRB5_cjs.getComponentDescriptor(componentType)?.value?.type : void 0;
+  return property === "value" ? chunkUHKFJBY5_cjs.getComponentDescriptor(componentType)?.value?.type : void 0;
 }
 function twoWayTargetProblem(key, expr, contracts) {
   const target = expr.kind === "ref" ? expr.path : void 0;
@@ -689,7 +689,7 @@ function interactiveElements(graph) {
     collectRefs(binding.expr).forEach(note);
   }
   for (const [name, info] of graph.elements) {
-    const interaction = chunkLSEMXRB5_cjs.getComponentDescriptor(info.componentType)?.interaction;
+    const interaction = chunkUHKFJBY5_cjs.getComponentDescriptor(info.componentType)?.interaction;
     if (info.kind === "Component" && interaction && OPERATED.has(interaction) && !graph.contracts.has(name)) {
       pressable.add(name);
     }
@@ -739,23 +739,23 @@ function writeComponentValue(input, id, value) {
   if (!component) {
     return;
   }
-  component.value = chunkLSEMXRB5_cjs.isGenericComponent(component) ? value : String(value);
+  component.value = chunkUHKFJBY5_cjs.isGenericComponent(component) ? value : String(value);
 }
 function writeComponentValueEnd(input, id, value) {
   const component = findComponent(input, id);
-  if (component && chunkLSEMXRB5_cjs.isGenericComponent(component)) {
+  if (component && chunkUHKFJBY5_cjs.isGenericComponent(component)) {
     component.properties.valueEnd = value;
   }
 }
 function writeComponentDisabled(input, id, disabled) {
   const component = findComponent(input, id);
-  if (component && chunkLSEMXRB5_cjs.isGenericComponent(component)) {
+  if (component && chunkUHKFJBY5_cjs.isGenericComponent(component)) {
     component.disabled = disabled;
   }
 }
 function isComponentDisabled(input, id) {
   const component = findComponent(input, id);
-  return component !== void 0 && chunkLSEMXRB5_cjs.isGenericComponent(component) && component.disabled;
+  return component !== void 0 && chunkUHKFJBY5_cjs.isGenericComponent(component) && component.disabled;
 }
 function setShape(input, path, change) {
   const shape = input.shapes.find((candidate) => candidate.id === path[0]);
@@ -808,7 +808,7 @@ function applyShader(input, binding, value, ownerId) {
 
 // src/binding/runtimeState.ts
 function initialValue(input, id, componentType) {
-  const descriptor = chunkLSEMXRB5_cjs.getComponentDescriptor(componentType);
+  const descriptor = chunkUHKFJBY5_cjs.getComponentDescriptor(componentType);
   const current = findComponent(input, id)?.value;
   if (current === void 0) {
     return descriptor?.value?.default ?? 0;
@@ -820,8 +820,8 @@ function initialValue(input, id, componentType) {
   return current;
 }
 function createRuntimeState(sfl, options) {
-  const graph = buildBindingGraph(chunkLSEMXRB5_cjs.expandDocument(chunkLSEMXRB5_cjs.parseSource(sfl)));
-  const input = structuredClone(chunk5PJ55GPG_cjs.sflToRenderInput(sfl));
+  const graph = buildBindingGraph(chunkUHKFJBY5_cjs.expandDocument(chunkUHKFJBY5_cjs.parseSource(sfl)));
+  const input = structuredClone(chunkEHH6ZDK6_cjs.sflToRenderInput(sfl));
   const elementState = /* @__PURE__ */ new Map();
   for (const [name, info] of graph.elements) {
     if (!graph.contracts.has(name)) {
@@ -881,7 +881,7 @@ function applyComponentValue(state, binding, value) {
     element.value = value;
     markDirty(state, id);
   }
-  if (!chunkLSEMXRB5_cjs.isBuiltInComponentType(state.graph.elements.get(id)?.componentType)) {
+  if (!chunkUHKFJBY5_cjs.isBuiltInComponentType(state.graph.elements.get(id)?.componentType)) {
     return true;
   }
   announce(state, binding.id, { kind: "component", id, value });
@@ -966,7 +966,7 @@ function flush(state) {
   if (!changed) {
     return null;
   }
-  const result = chunk5PJ55GPG_cjs.renderCanvas(state.input, { ...state.options.renderOptions, linkHitAreas: true });
+  const result = chunkEHH6ZDK6_cjs.renderCanvas(state.input, { ...state.options.renderOptions, linkHitAreas: true });
   for (const listener of [...state.listeners]) {
     listener(result);
   }
@@ -1049,7 +1049,7 @@ function setElementState(state, id, patch) {
 // src/binding/userInput.ts
 function descriptorOf(state, id) {
   const info = state.graph.elements.get(id);
-  return info?.kind === "Component" ? chunkLSEMXRB5_cjs.getComponentDescriptor(info.componentType) : void 0;
+  return info?.kind === "Component" ? chunkUHKFJBY5_cjs.getComponentDescriptor(info.componentType) : void 0;
 }
 function valueBinding(state, id, property = "value") {
   return state.graph.bindings.find(
@@ -1069,7 +1069,7 @@ function writeBack(state, binding, value) {
 }
 function changeValueEnd(state, id, next) {
   const component = findComponent(state.input, id);
-  if (!component || !chunkLSEMXRB5_cjs.isGenericComponent(component) || component.properties.valueEnd === next || isComponentDisabled(state.input, id)) {
+  if (!component || !chunkUHKFJBY5_cjs.isGenericComponent(component) || component.properties.valueEnd === next || isComponentDisabled(state.input, id)) {
     return false;
   }
   const binding = valueBinding(state, id, "valueEnd");
@@ -1121,7 +1121,7 @@ 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 = chunk5PJ55GPG_cjs.sliderReach(properties.variant, vertical ? width : height);
+  const reach = chunkEHH6ZDK6_cjs.sliderReach(properties.variant, vertical ? width : height);
   const position = vertical ? 1 - y : x;
   return length > reach * 2 ? within((position * length - reach) / (length - reach * 2)) : position;
 }
@@ -1135,7 +1135,7 @@ function turnAlong(properties, width, height, x, y) {
 }
 function slideElement(state, id, x, y = 0) {
   const component = findComponent(state.input, id);
-  if (!component || !chunkLSEMXRB5_cjs.isGenericComponent(component)) {
+  if (!component || !chunkUHKFJBY5_cjs.isGenericComponent(component)) {
     return;
   }
   const kind = descriptorOf(state, id)?.interaction;
@@ -1309,7 +1309,7 @@ function renderBound(sfl, options = {}) {
     runtime.registerSource(name, { get: () => rows, subscribe: () => () => void 0 });
   }
   runtime.flush();
-  return chunk5PJ55GPG_cjs.renderCanvas(runtime.input, renderOptions);
+  return chunkEHH6ZDK6_cjs.renderCanvas(runtime.input, renderOptions);
 }
 
 exports.buildBindingGraph = buildBindingGraph;
@@ -1318,5 +1318,5 @@ exports.createBindingRuntime = createBindingRuntime;
 exports.createDataSource = createDataSource;
 exports.interactiveElements = interactiveElements;
 exports.renderBound = renderBound;
-//# sourceMappingURL=chunk-TECWZVIM.cjs.map
-//# sourceMappingURL=chunk-TECWZVIM.cjs.map
+//# sourceMappingURL=chunk-4KBU4CFU.cjs.map
+//# sourceMappingURL=chunk-4KBU4CFU.cjs.map