gesso-core 0.6.30 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # gesso-core
 
+## 0.8.0
+
+### Minor Changes
+
+- cfd37de: For tools that write CSS from a live tree: `easingCss(easing)` names a curve made by `cubicBezier` or `linear` as CSS writes it, a node's `UiModifierSet.modifiers` lists what is attached with its arguments, and the inspector's node report has `interaction`, what the node draws while hovered and pressed.
+- 60b4d52: `ShownAsKey` draws what is under a node as hovered, pressed or focused, with no pointer or keyboard: `interactive()` shows its hover or press look and `focusRing()` its ring. For a design tool drawing a component's pointer states beside its others.
+- 3ac8a63: For a design tool's keyboard view and scrubber: `FocusService.tabStops(within)` lists the Tab stops under a node in order, and a paused `UiClock` can `seek` to a time while `holding` keeps finished animations at their end, so moving the time back plays them back.
+- fdbf5be: SVG files draw their masks and drop shadows, as Chrome draws them. A `<mask>` cuts what it masks by its luminance, or by its alpha for `mask-type: alpha`, with its region and content in user space or the masked element's bounding box. A `<filter>` that is one `<feDropShadow>` draws the element's shadow, moved, blurred and in its flood colour at its flood opacity, beneath it. `parseSvg` no longer reports either as `unsupported`; any other filter still is, as is a `mask` or `filter` that names nothing. `PaintSurface` gains masked layers to draw them with: `beginMaskedLayer(x, y, width, height)`, `layerMask(mode)` and `endMaskedLayer()`, which a host without layer canvases draws as the content unmasked. `blur` on a `PaintSurface`, and so a node's `blur`, is now measured in the coordinates it is called in, as its documentation said, where it was in device pixels: on a display of two device pixels to the logical one, a blur is twice as wide as before.
+- 2846e0b: `Tour` walks a person through a screen one element at a time: everything but the element dims, through a rounded hole that follows it, and a card beside it explains it, with Back, Next and a count. Steps point at a `tourTarget()` given to the element as its `ref`. Underneath, an anchored node or overlay entry can be placed `over` its anchor, at the anchor's size grown by the offset, and such an entry leaves presses on the rest of the anchor to the anchor.
+
+### Patch Changes
+
+- 00c6f8b: A bound list of children sent again unchanged (the same empty list, or the same keyed children) no longer lays out its parent. A stream that follows a value moving every frame, such as a board's zoom, laid out every parent it was bound under on each frame.
+- 5b5e756: A `UiClock` decides how time passes for the animations under a node: `provide={[provided(UiEnvironmentKeys.clock, clock)]}`. On a `settled` clock every animation lands where it is going the moment it starts, a spinner included; on one with a `speed`, time runs at that rate (0 is paused), and the speed can change mid-flight. Transitions, `motion` states, hover and press read the clock from their node; `AnimationService.animate` and `spring` take a `clock` option, which `Dialog`, `Drawer`, `Skeleton`, `Spinner`, the progress bar and smooth scrolling pass. An overlay now keeps the clock it was opened under, and every environment key the application provides, so a component in a dialog reads with `ctx.environment` what its opener reads.
+- d048f25: Motion names resolve where they are drawn. A node can provide a vocabulary with `provide={[provided(UiEnvironmentKeys.motion, motion)]}`, and a name in a `transition`, a `motion` state or `animateLayout` resolves against the nearest one; `AnimationService.setMotion` now provides the app's at the root, so it reaches those too (a `motion` state used to resolve against Gesso's defaults whatever the app installed). `transition` takes a name, `transition={{ opacity: 'fast' }}` and `tween('fast')`, and keeps it as written (`node.transitions.declared`). `defineMotion` builds a vocabulary from Gesso's with only what a design changes, and `UiDurationExtensions`, `UiEasingExtensions` and `UiSpringExtensions` add names of its own, as typography roles are added. An overlay keeps the motion it was opened under. A name the vocabulary lacks is said once and takes the default.
+- 33de404: An anchored node placed `over` its anchor is grown by its offset in the anchor's own space before being carried through transforms: under a zoom the offset is zoomed with the anchor, and a part shrunk past nothing covers nothing rather than a box twice the offset across.
+- ec41942: A key made with `createEnvironmentKey` can now be provided by any element, `provide={[provided(key, value)]}`, and read by a component under it with `ctx.environment(key)`, or its default when nothing above provides it. It is read as the component's body runs, from where the component is placed, because the builder puts a component's node under its parent before the body runs. A value that changes is provided as a source to follow, such as a cell. `ComponentResolver.resolve` is handed the slot's node as a third argument for this.
+- 06350a6: `ScrollArea` is a scrolling region that says where it is: the bottom edge fades while there is more below, the top once it has moved off the start, and past `backToTopAfter` pixels a button eases in that scrolls it back smoothly, on the clock where it is drawn. The fades blend into `fadeColor` (`background` unless said), and `backToTop` takes the design's own drawing of the button. Its `padding` (and `paddingX`, `paddingY`) pads the content inside the scroll bar, so the area can run to the edges with its bar there. A gradient stop takes an `opacity`, applied once its palette name is resolved, so a fade to nothing stays its own colour rather than passing through grey on the way to transparent black.
+- 33de404: A box's corner radius fits the box before its shadows are drawn, as CSS does: a rounded box of no size leaves no hole under its shadow, where WebGPU cut a circle the size of its radius.
+- 8fe90de: A `transition` now animates what is drawn, whoever changed it: the element, or a modifier writing over it, so a press or hover that `interactive` draws eases in and out on an element that declares a transition for that property, as a CSS transition follows a `:hover`. A value written by another animation's frame (a `motion` state, an `AnimationService` tween) is let through rather than chased, and `InspectionService.preview` is drawn at once both ways. `AnimationDriver.isAdvancing` says whether a frame is being written.
+
+## 0.7.0
+
+### Minor Changes
+
+- 2034818: A tree drawn under transforms no longer costs a walk of all of it on every frame. A transformed node's subtree bounds are now its box and its children's carried out through its transform, where they were left unbounded and made every ancestor unbounded too; the hit tester passes such a subtree over when the point is outside it, and the accessibility mirror passes over what a panned, zoomed parent draws off screen (`LayoutEngine.screenBounds`). `InspectionService.box(node)` gives a node's box without building the rest of its report, for an editor that measures many nodes as its view moves. On a design tool's board of a thousand frames under one camera, a pan went from about one frame in three seconds to frames of about 25 milliseconds.
+- ae6af9a: A node an `Image` loaded a picture into carries the URL it came from as `src`, an image's or an SVG's. Nothing lays it out or paints it; it is for what reads a tree as a document, such as an inspector or a design tool writing the screen as HTML, since the bitmap or drawing on the node no longer says where it came from.
+- 6a7c397: `boxShadows` takes a size on the theme's shadow scale by name, `boxShadows="medium"`, as `borderRadius` takes a shape: resolved against the theme the element is under, for paint and for how far it reaches past its box, so a rebrand's shadows reach every card that names one.
+- b85d643: `rasterize` keeps what a subtree paints as pixels and copies them while only what is above it moves or scales: a design tool's frames under a zooming camera are one `drawImage` each, not every photograph and path drawn again. Canvas2D draws a kept subtree again when anything in it changes, and once a zoom settles at another scale, sharp; while the zoom moves it stretches what it has, redrawing only what fits the frame. `UiRenderer.nextRepaint` asks the runtime for that settling frame. Culling also goes through a transform that only moves and scales, so a zoomed-in camera draws only what is on screen; a node moved by its own transform is culled where it is drawn, not where its box is.
+- 5b66cbf: SVG files draw. An `Image` whose source ends in `.svg` or is a `data:image/svg+xml` URL reads the file in the worker and draws it as vectors through `PaintSurface`, on either renderer, at whatever size the node is laid out at, rather than failing because `createImageBitmap` refuses SVG. `objectFit` places it, the file's own size sizes the node when nothing else does, and `currentColor` is the theme's text colour. Drawn: paths and basic shapes, groups, `<use>`, nested `<svg>`, transforms, fills and strokes with opacities, dashes, linear and radial gradients, clip paths and simple `<style>` rules; text, images, masks, filters, patterns and markers are skipped with a console note. New in `gesso-core`: `parseSvg`, `drawSvg`, `svgPaint`, `DefaultSvgResolver`, `isSvgSource`, and `imageSource`'s `vectors` argument; in `gesso-framework`, `MediaService.vectors`, `setSvgResolver` and the `media.vectors` option. `Image` is now built on a paint node rather than a box.
+- c35209d: A theme carries `units`, what an inch and a rem are worth in pixels: `{ pixelsPerInch: 96, rootFontSize: 16 }` on the stock themes, as in CSS. `lengths(theme.units)` gives `rem`, `inch`, `pt` and `mm` conversions to pixels, resolved where a value is written, so a theme can write its scales from the units it carries and a screen can write a print margin in millimetres or type in points. `themesEqual` compares the units. `UiTheme.units` is required, so a theme written without spreading a stock one has to add it. `tokens_view` reports the units, and tells an agent how to write a length in them.
+- 639be4a: Palettes gain `tooltipBackground` and `tooltipForeground`, and a tooltip is drawn in them. It used to be the control colours swapped round, which is dark on a light page but turned near-white on a dark one; both stock palettes now keep it dark, the dark one a step lighter than its panels. A custom `UiColors` needs the two names.
+- 9c8c730: `touchEmulation` takes a mouse over a subtree as a finger, as a browser's device mode does: with nothing pressed it hovers nothing there, and a press there is a finger's from down to up (its slop, its gestures, its hover dropped when it lifts). For a design tool playing a screen drawn for touch with a mouse. A finger, and a mouse anywhere else, are unchanged.
+- 803a189: Touch, apart from the screen's size. What the person points with is now in the environment (`UiEnvironmentKeys.pointer`, `fine` or `coarse`): the runtime reads it from the device (CSS's `pointer` feature), keeps it on `ShellService.pointer`, and provides it at the root, and a `pointer` prop says it for a subtree, as a design tool's phone frame does. A theme provided under a coarse pointer is turned for it (`withPointer`): its `touch` values (larger type, more room, token groups of its own) are laid over it, and a token group it does not carry resolves to the group's own `coarse` values (`defineThemeExtension({ coarse })`). The controls use that: on touch a medium `Button` and a `TextInput` are at least 44 high (`TOUCH_TARGET`), a small button 36 and a large one 52. With a mouse nothing moves.
+
+### Patch Changes
+
+- c053bc3: A length that is not one (`width: '100%'`) is refused where it is written, naming the element, instead of throwing in layout: that throw abandoned every frame, so one element's mistake stopped the whole application drawing. One that arrives bound, from an Observable, is reported once and laid out as if unset. `renderRoot(...).onError(listener)` hears every error the render worker reports to the shell, for an application that shows its errors itself with the plugin's `overlay: false`.
+- 85d58ae: `opacity` now fades a node and everything inside it as one picture, as CSS does, in both renderers. A disabled button — a box at `opacity: 0.5` with a white label — used to fade each draw on its own, so the label was faded twice, once in its own draw and again through the half-transparent box under it, and came out grey (202,207,213 over a white page where CSS and Figma give white). The subtree is now drawn at full strength into a layer the size of what it paints and blended once at the opacity: an offscreen canvas in Canvas2D, a render pass into a texture in WebGPU. A node whose whole subtree is a single draw — a faded icon, a faded line of text — still fades that draw directly, which is the same picture for nothing. Where Canvas2D has no `OffscreenCanvas` (or the `createLayerCanvas` option gives none), opacity falls back to fading each draw, as before.
+- 4e0b6b7: Under `vite dev`, an element written in JSX remembers the file, line and column it was written on, and a component remembers where it was used. The inspector's report says so: a node's `source` is the line that made it, and each owner's `usedAt` is the line that used the component around it, so `formatNodeReport` now reads `written at src/Settings.tsx:12:7` and `rendered by Card (used at src/Settings.tsx:30:9)`. `UiGraphBuilder.sourceOf(node)` gives the same answer for any node. A canvas has no DOM for the browser's own inspector to point at, and this is the way back from a box on screen to the code. A production build compiles to `jsx`, which is given no location, so it costs nothing there.
+- 2c55872: A key with a colon in it is one segment of its node's id. Ids join segments with colons, so a key like `a:0` could spell the id of the first child of a sibling keyed `a`, and reconciling threw "Node id … is already used outside parent". A list keyed by node ids, such as a layers panel's, hit it at once. The colon and `%` in a key are escaped; a key without them gives the id it always did.
+- 3ababdf: A component that returns `null`, or a list of children holding `null`, `undefined` or a boolean (`cond && child`), draws nothing there instead of throwing "Cannot read properties of null". The types still say `UiChild`; code written without them (a design tool's mock in a `.jsx` file) is what this is for.
+- 4956e76: `renderFrame` waits for a picture still being fetched or decoded before it draws, rather than taking the tree's quiet for finished: a large image could arrive after the frame was drawn, leaving it out. `mediaLoadsInFlight()` says how many pictures the media modifiers in this thread are still loading.
+- 6a7d6d4: `Responsive` builds once more at the first size measured, even when it falls in the same band as the zero before layout. A container whose real width shared a band with zero kept the arm built from zero, so a builder reading `size.width` (a 768-wide tablet testing `size.width < 600` inside `at={[1024]}`) was handed zero for good. `containerBands` emits that one extra value too. It costs one more build, once.
+- 29e3863: A shortcut written as Shift and a digit, `Shift+1`, matches the 1 key pressed with Shift, whatever character the layout types there: on a US keyboard that is `!`, which it never matched. `UiShortcutRegistry.handleKey` takes the press's physical key code to tell, and the `shortcuts` modifier passes it.
+- cf99e93: An SVG drawn as a picture draws `currentColor` in the text colour it inherits, as its docs said, rather than always the theme's `text`: an icon set authored in `currentColor` takes the colour of the label beside it, white on a selected row. A painter may name `currentColor` too.
+
 ## 0.6.30
 
 ### Patch Changes