stickyflow 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -17,6 +17,32 @@ Two things count as breaking here that are easy to overlook:
 
 ## [Unreleased]
 
+## [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 +261,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 chunkOWNVXKXN_cjs = require('../chunk-OWNVXKXN.cjs');
+require('../chunk-A73UJ5AQ.cjs');
+require('../chunk-KXYSO6GC.cjs');
 
 
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.buildBindingGraph; }
+  get: function () { return chunkOWNVXKXN_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "collectContracts", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.collectContracts; }
+  get: function () { return chunkOWNVXKXN_cjs.collectContracts; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.createBindingRuntime; }
+  get: function () { return chunkOWNVXKXN_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.createDataSource; }
+  get: function () { return chunkOWNVXKXN_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.interactiveElements; }
+  get: function () { return chunkOWNVXKXN_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunkJIJMZMGY_cjs.renderBound; }
+  get: function () { return chunkOWNVXKXN_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-BIP70z72.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-BIP70z72.cjs';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-B7KiTmn8.cjs';
+import '../render-BU2uYzjG.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-DalvhScn.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-DalvhScn.js';
+export { R as RenderBoundOptions, c as createBindingRuntime, r as renderBound } from '../runtime-BPzyD-Nd.js';
+import '../render-BU2uYzjG.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-JCRPLPKV.js';
+import '../chunk-SDMQRSRW.js';
+import '../chunk-JQK4IGXJ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map