@swiftbrowser/web 0.17.8 → 0.18.0

package/src/richEditor.ts

@@ -0,0 +1,330 @@
+/**
+ * The rich `texteditor` (one with `runs`; docs/ops-protocol.md, "Rich text
+ * editors"): a contenteditable box holding a span per run, which the
+ * browser edits in place. The renderer reports what the viewer typed as
+ * plain `text` (the app keeps the runs, giving typed text the attributes
+ * around it) and, when the selection is bound, the selection in UTF-16
+ * offsets; a selection the app sets moves the caret (when the app focuses
+ * the editor, if it is not focused). New runs rebuild the spans only when
+ * they differ from what is there (typing into a span leaves it as the runs
+ * will have it), keeping the caret where it was, and never while a
+ * composition is open.
+ *
+ * Return inserts a newline into the text, as a text view does; pastes and
+ * drops arrive as plain text; the browser's own formatting and undo are off
+ * (the app formats the runs).
+ */
+
+import type { ShapeStyle, TextEditorProps, TextRun, TextSelectionRange } from './protocol';
+import type { TextLayout } from './layout';
+import { editorBlurred, isSelectionBound, markDeleteBackward, markSelectionBound, noteViewerSelection, selectionToApply, takePendingSelection, viewerFocused, wantsDeleteBackward } from './editorSelection';
+import { styleToCSS } from './styles';
+
+const RICH = new WeakSet<HTMLElement>();
+/** The runs each editor was last given, to draw again once a composition ends. */
+const latest = new WeakMap<HTMLElement, TextRun[]>();
+const composing = new WeakSet<HTMLElement>();
+
+/** Marks the line break that only shows a last, empty line (the text ends in a newline). */
+const END_ATTR = 'sbEnd';
+
+export function createRichEditor(): HTMLElement {
+  const el = document.createElement('div');
+  // Plain text edits only where the browser has them ('plaintext-only'); the
+  // handlers below keep a full contenteditable to plain text elsewhere.
+  try {
+    el.contentEditable = 'plaintext-only';
+  } catch {
+    el.contentEditable = 'true';
+  }
+  if (el.contentEditable !== 'plaintext-only') el.contentEditable = 'true';
+  el.setAttribute('role', 'textbox');
+  el.setAttribute('aria-multiline', 'true');
+  el.spellcheck = false;
+  RICH.add(el);
+  return el;
+}
+
+export function isRichEditor(el: unknown): boolean {
+  return el instanceof HTMLElement && RICH.has(el);
+}
+
+export function applyRichEditor(el: HTMLElement, props: TextEditorProps): void {
+  if (typeof props.focused === 'boolean') el.dataset['sbFocus'] = String(props.focused);
+  else delete el.dataset['sbFocus'];
+  markDeleteBackward(el, props.deleteBackward === true);
+  markSelectionBound(el, props.selection !== undefined);
+  const runs = props.runs ?? [{ text: props.text ?? '' }];
+  latest.set(el, runs);
+  if (!composing.has(el)) drawRuns(el, runs);
+  // A selection the app set (not the viewer's coming back): moved to now,
+  // or when the app focuses the editor (src/editorSelection.ts).
+  const range = selectionToApply(el, props.selection);
+  if (range) setSelectionOffsets(el, range);
+}
+
+/** Focuses an editor for the app (a bound `focused`): its caret where the app last set the selection, else at the start. */
+export function focusRichEditor(el: HTMLElement): void {
+  const range = takePendingSelection(el);
+  el.focus({ preventScroll: true });
+  if (range) setSelectionOffsets(el, range);
+}
+
+/** A run's look as a key: what decides its span's style. */
+const runKey = (run: TextRun): string =>
+  JSON.stringify([run.font ?? null, run.italic === true, run.underline ?? null, run.strikethrough ?? null, run.foreground ?? null, run.background ?? null]);
+
+function drawRuns(el: HTMLElement, runs: TextRun[]): void {
+  const shown = runs.map((run, index) => ({ run, index, text: run.text ?? '' })).filter((entry) => entry.text.length > 0);
+  const text = shown.map((entry) => entry.text).join('');
+  const ends = text.endsWith('\n');
+  const nodes = Array.from(el.childNodes);
+  const same =
+    nodes.length === shown.length + (ends ? 1 : 0) &&
+    shown.every((entry, i) => {
+      const node = nodes[i];
+      return node instanceof HTMLElement && node.dataset['sbRun'] === String(entry.index) && node.dataset['sbKey'] === runKey(entry.run) && node.textContent === entry.text;
+    }) &&
+    (!ends || (nodes[nodes.length - 1] instanceof HTMLElement && (nodes[nodes.length - 1] as HTMLElement).dataset[END_ATTR] !== undefined));
+  if (same) return;
+  const focused = el.ownerDocument.activeElement === el;
+  const selection = focused ? selectionOffsets(el) : null;
+  const doc = el.ownerDocument;
+  const spans: Node[] = shown.map((entry) => {
+    const span = doc.createElement('span');
+    span.className = 'sb-texteditor-run';
+    span.dataset['sbRun'] = String(entry.index);
+    span.dataset['sbKey'] = runKey(entry.run);
+    styleRun(span, entry.run);
+    span.textContent = entry.text;
+    return span;
+  });
+  if (ends) {
+    const end = doc.createElement('br');
+    end.dataset[END_ATTR] = '';
+    spans.push(end);
+  }
+  el.replaceChildren(...spans);
+  if (selection) setSelectionOffsets(el, selection);
+}
+
+/** A run's weight, slant, lines and colors (the layout pass sets its whole font, size and design included, after). */
+function styleRun(span: HTMLElement, run: TextRun): void {
+  const s = span.style;
+  const weight = (run.font as { weight?: string } | undefined)?.weight;
+  if (weight) s.fontWeight = WEIGHTS[weight] ?? '400';
+  if (run.italic) s.fontStyle = 'italic';
+  const lines = [run.underline ? 'underline' : '', run.strikethrough ? 'line-through' : ''].filter(Boolean);
+  if (lines.length > 0) s.textDecorationLine = lines.join(' ');
+  if (run.foreground !== undefined) s.color = styleToCSS(run.foreground as ShapeStyle, 'text').solid ?? '';
+  if (run.background !== undefined) s.backgroundColor = styleToCSS(run.background as ShapeStyle, 'paint').solid ?? '';
+}
+
+const WEIGHTS: Record<string, string> = {
+  ultraLight: '100',
+  thin: '200',
+  light: '300',
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  heavy: '800',
+  black: '900',
+};
+
+/** After layout: each run's span in the font the engine measured it in. */
+export function layOutRichEditor(el: HTMLElement, layout: TextLayout | undefined): void {
+  const fonts = layout?.rich?.fonts;
+  if (!fonts) return;
+  for (const span of Array.from(el.children) as HTMLElement[]) {
+    const font = fonts[Number(span.dataset['sbRun'])];
+    if (!font || span.tagName !== 'SPAN') continue;
+    if (span.style.font !== font.css) {
+      span.style.font = font.css;
+      // Every run keeps the editor's line spacing.
+      span.style.lineHeight = 'inherit';
+    }
+  }
+}
+
+/**
+ * The editor's text as the viewer left it: its text nodes, a line break as
+ * a newline. A last break after a newline is only there to show the empty
+ * line (the browser's, or the renderer's own), not a newline of its own.
+ */
+export function richEditorText(el: HTMLElement): string {
+  return textOf(el, true);
+}
+
+function textOf(el: HTMLElement, whole: boolean): string {
+  let text = '';
+  let endsInBreak = false;
+  const visit = (node: Node, top: boolean): void => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const value = node.nodeValue ?? '';
+      text += value;
+      if (value) endsInBreak = false;
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    if (node.tagName === 'BR') {
+      if (node.dataset[END_ATTR] !== undefined) return;
+      text += '\n';
+      endsInBreak = true;
+      return;
+    }
+    // A block the browser made for a new line (a full contenteditable's Return).
+    if (!top && (node.tagName === 'DIV' || node.tagName === 'P') && text.length > 0 && !text.endsWith('\n')) text += '\n';
+    node.childNodes.forEach((child) => visit(child, false));
+  };
+  el.childNodes.forEach((child) => visit(child, false));
+  return whole && endsInBreak && text.endsWith('\n\n') ? text.slice(0, -1) : text;
+}
+
+/** The characters of the editor before a DOM point (a text node's offset, or an element's child index). */
+function offsetOf(el: HTMLElement, container: Node, offset: number): number {
+  const range = el.ownerDocument.createRange();
+  range.selectNodeContents(el);
+  try {
+    range.setEnd(container, offset);
+  } catch {
+    return 0;
+  }
+  const fragment = range.cloneContents();
+  const holder = el.ownerDocument.createElement('div');
+  holder.append(fragment);
+  // A caret after the browser's own placeholder break (a `<br>` it keeps
+  // after a final newline, which `richEditorText` leaves out) is at the end.
+  return Math.min(textOf(holder, false).length, richEditorText(el).length);
+}
+
+/** The selection inside the editor in UTF-16 offsets, or null when it is elsewhere. */
+export function selectionOffsets(el: HTMLElement): TextSelectionRange | null {
+  const selection = el.ownerDocument.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  if (!el.contains(range.startContainer) || !el.contains(range.endContainer)) return null;
+  return { start: offsetOf(el, range.startContainer, range.startOffset), end: offsetOf(el, range.endContainer, range.endOffset) };
+}
+
+/** Where an offset falls in the editor's DOM. */
+function pointAt(el: HTMLElement, offset: number): [Node, number] {
+  let left = offset;
+  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const length = node.nodeValue?.length ?? 0;
+      if (left <= length) return [node, left];
+      left -= length;
+    } else if (node instanceof HTMLElement && node.tagName === 'BR' && node.dataset[END_ATTR] === undefined) {
+      if (left === 0) return [node.parentNode!, Array.prototype.indexOf.call(node.parentNode!.childNodes, node)];
+      left -= 1;
+    }
+  }
+  return [el, el.childNodes.length - (el.lastChild instanceof HTMLElement && el.lastChild.dataset[END_ATTR] !== undefined ? 1 : 0)];
+}
+
+export function setSelectionOffsets(el: HTMLElement, range: TextSelectionRange): void {
+  const selection = el.ownerDocument.getSelection();
+  if (!selection) return;
+  const [startNode, startOffset] = pointAt(el, range.start);
+  const [endNode, endOffset] = pointAt(el, range.end);
+  try {
+    selection.setBaseAndExtent(startNode, startOffset, endNode, endOffset);
+  } catch {
+    // A point the DOM no longer has: leave the selection where it is.
+  }
+}
+
+type Report = (event: { type: 'text'; id: number; value: string } | { type: 'selection'; id: number; value: TextSelectionRange } | { type: 'deletebackward'; id: number }) => void;
+
+/**
+ * The listeners every rich editor under `root` shares: Return, pastes and
+ * formatting kept to plain text, compositions, and the selection reported
+ * for bound editors. Returns what removes them.
+ */
+export function listenToRichEditors(root: HTMLElement, idOf: (el: HTMLElement) => number | null, report: Report): () => void {
+  const doc = root.ownerDocument;
+  const editorOf = (target: EventTarget | null): HTMLElement | null => {
+    for (let node = target instanceof Node ? target : null; node && node !== root; node = node.parentNode) {
+      if (isRichEditor(node)) return node as HTMLElement;
+    }
+    return null;
+  };
+  const insert = (text: string): void => {
+    // The browser's own insertion: it keeps its caret and undo, and raises `input`.
+    doc.execCommand('insertText', false, text);
+  };
+  const onBeforeInput = (event: InputEvent): void => {
+    const el = editorOf(event.target);
+    if (!el) return;
+    const type = event.inputType;
+    if (type === 'deleteContentBackward' && wantsDeleteBackward(el)) {
+      // Backspace with the caret at the start: nothing to delete, the app hears it.
+      const range = selectionOffsets(el);
+      if (range && range.start === 0 && range.end === 0) {
+        event.preventDefault();
+        const id = idOf(el);
+        if (id !== null) report({ type: 'deletebackward', id });
+      }
+      return;
+    }
+    if (type === 'insertParagraph' || type === 'insertLineBreak') {
+      event.preventDefault();
+      insert('\n');
+    } else if (type === 'insertFromPaste' || type === 'insertFromDrop') {
+      const text = event.dataTransfer?.getData('text/plain');
+      if (text === undefined) return;
+      event.preventDefault();
+      insert(text);
+    } else if (type.startsWith('format') || type === 'historyUndo' || type === 'historyRedo') {
+      event.preventDefault();
+    }
+  };
+  // The viewer focused it: their caret, not one the app set before.
+  const onFocusIn = (event: FocusEvent): void => {
+    const el = editorOf(event.target);
+    if (el) viewerFocused(el);
+  };
+  // Left, it has no caret: the selection the app holds is one to move to again.
+  const onFocusOut = (event: FocusEvent): void => {
+    const el = editorOf(event.target);
+    if (el) editorBlurred(el);
+  };
+  const onCompositionStart = (event: CompositionEvent): void => {
+    const el = editorOf(event.target);
+    if (el) composing.add(el);
+  };
+  const onCompositionEnd = (event: CompositionEvent): void => {
+    const el = editorOf(event.target);
+    if (!el) return;
+    composing.delete(el);
+    // The text after the composition, then the runs for it.
+    const id = idOf(el);
+    if (id !== null) report({ type: 'text', id, value: richEditorText(el) });
+    const runs = latest.get(el);
+    if (runs) drawRuns(el, runs);
+  };
+  const onSelectionChange = (): void => {
+    const el = editorOf(doc.getSelection()?.anchorNode ?? null);
+    if (!el || !isSelectionBound(el)) return;
+    const id = idOf(el);
+    const range = selectionOffsets(el);
+    if (id === null || !range) return;
+    if (noteViewerSelection(el, range)) report({ type: 'selection', id, value: range });
+  };
+  root.addEventListener('beforeinput', onBeforeInput);
+  root.addEventListener('focusin', onFocusIn);
+  root.addEventListener('focusout', onFocusOut);
+  root.addEventListener('compositionstart', onCompositionStart);
+  root.addEventListener('compositionend', onCompositionEnd);
+  doc.addEventListener('selectionchange', onSelectionChange);
+  return () => {
+    root.removeEventListener('beforeinput', onBeforeInput);
+    root.removeEventListener('focusin', onFocusIn);
+    root.removeEventListener('focusout', onFocusOut);
+    root.removeEventListener('compositionstart', onCompositionStart);
+    root.removeEventListener('compositionend', onCompositionEnd);
+    doc.removeEventListener('selectionchange', onSelectionChange);
+  };
+}

package/src/scrollGeometry.ts

@@ -0,0 +1,79 @@
+/**
+ * `.onScrollGeometryChange` (docs/ops-protocol.md, "Scroll geometry, pinned
+ * views and animation completion"): a `scrollview` with `reportsGeometry`
+ * tells the app where its visible area is in its content and how big both
+ * are, as SwiftUI's `ScrollGeometry` does. The renderer reads the offsets
+ * from the element (the engine's frames put every scroll view at offset 0)
+ * and the sizes from the layout result, after every layout pass and once
+ * per animation frame while anything scrolls; the reporter sends an event
+ * only when a field changed since the last one, so a pass that moved
+ * nothing says nothing.
+ */
+
+import type { Rect, Size } from './layout';
+import type { ElementId, ScrollGeometryEvent } from './protocol';
+
+export interface ScrollGeometry {
+  offset: { x: number; y: number };
+  contentSize: Size;
+  containerSize: Size;
+  contentInsets: { top: number; leading: number; bottom: number; trailing: number };
+}
+
+const round2 = (value: number): number => Math.round(value * 100) / 100;
+
+/** The event for a geometry, every number rounded to 2 decimals. */
+export function scrollGeometryEvent(id: ElementId, geometry: ScrollGeometry): ScrollGeometryEvent {
+  const { offset, contentSize, containerSize, contentInsets } = geometry;
+  return {
+    type: 'scrollgeometry',
+    id,
+    offset: { x: round2(offset.x), y: round2(offset.y) },
+    contentSize: { width: round2(contentSize.width), height: round2(contentSize.height) },
+    containerSize: { width: round2(containerSize.width), height: round2(containerSize.height) },
+    contentInsets: {
+      top: round2(contentInsets.top),
+      leading: round2(contentInsets.leading),
+      bottom: round2(contentInsets.bottom),
+      trailing: round2(contentInsets.trailing),
+    },
+  };
+}
+
+/** Sends each scroll view's geometry once per change. */
+export class ScrollGeometryReporter {
+  private readonly last = new Map<ElementId, string>();
+
+  /** The event to send for this geometry, or null when it is the one last sent for the element. */
+  report(id: ElementId, geometry: ScrollGeometry): ScrollGeometryEvent | null {
+    const event = scrollGeometryEvent(id, geometry);
+    const key = JSON.stringify([event.offset, event.contentSize, event.containerSize, event.contentInsets]);
+    if (this.last.get(id) === key) return null;
+    this.last.set(id, key);
+    return event;
+  }
+
+  /** The element was removed: one re-created with the same id reports afresh. */
+  forget(id: ElementId): void {
+    this.last.delete(id);
+  }
+
+  clear(): void {
+    this.last.clear();
+  }
+}
+
+/**
+ * A scroll view's geometry now: its offsets from the element, its sizes
+ * from the layout pass (`frame`, `contentSize`; the element's own when the
+ * pass has none), and the space below its content a bar covers
+ * (`bottomInset`), which it scrolls into.
+ */
+export function readScrollGeometry(el: HTMLElement, frame: Rect | undefined, contentSize: Size | undefined, bottomInset: number): ScrollGeometry {
+  return {
+    offset: { x: el.scrollLeft, y: el.scrollTop },
+    contentSize: contentSize ?? { width: el.scrollWidth, height: el.scrollHeight - bottomInset },
+    containerSize: frame ? { width: frame.width, height: frame.height } : { width: el.clientWidth, height: el.clientHeight },
+    contentInsets: { top: 0, leading: 0, bottom: bottomInset, trailing: 0 },
+  };
+}

package/src/scrollTransition.ts

@@ -0,0 +1,145 @@
+/**
+ * `.scrollTransition`: a box's effects drawn as it moves through its scroll
+ * view, from the three phases the app sends (`ScrollTransition`), without a
+ * round trip. After every layout and once per animation frame while
+ * anything scrolls, each box's progress (how far out of the scroll view's
+ * visible area it is, as a share of its own length, negative past the top
+ * or leading edge) picks the effects: `interactive` between the identity
+ * phase and the edge's by that share, `animated` the edge's (CSS-animated)
+ * once partly out, `identity` the identity phase's.
+ *
+ * Positions are the boxes' laid-out ones (offsets, not client rects), so a
+ * transition's own offset never feeds back into its progress.
+ */
+
+import type { ScrollTransition, ScrollTransitionEffect, Style } from './protocol';
+import { effectsCSS } from './styles';
+
+interface Registered {
+  spec: ScrollTransition;
+  /** The box's own effects, which the transition's come after. */
+  base: { transform: string; filter: string; opacity: number };
+}
+
+const registered = new Map<HTMLElement, Registered>();
+
+const ANIMATED = 'transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease';
+
+/** Called by `applyStyle` for every `styled` box: registers, updates or forgets its transition. */
+export function setScrollTransition(el: HTMLElement, style: Style): void {
+  const spec = style.scrollTransition;
+  if (!spec) {
+    if (registered.delete(el)) {
+      delete el.dataset['sbScrollTransition'];
+      el.style.transition = '';
+    }
+    return;
+  }
+  const own = effectsCSS(style);
+  registered.set(el, {
+    spec,
+    base: { transform: own.transform ?? '', filter: own.filter ?? '', opacity: style.opacity ?? 1 },
+  });
+  el.dataset['sbScrollTransition'] = spec.configuration;
+  el.style.transition = spec.configuration === 'animated' ? ANIMATED : '';
+  draw(el);
+}
+
+/** `from` → `to` by `t`, field by field (absent fields are the identity's). */
+export function interpolateEffect(from: ScrollTransitionEffect, to: ScrollTransitionEffect, t: number): ScrollTransitionEffect {
+  const mix = (a: number, b: number): number => a + (b - a) * t;
+  const out: ScrollTransitionEffect = {};
+  const ox = mix(from.offset?.x ?? 0, to.offset?.x ?? 0);
+  const oy = mix(from.offset?.y ?? 0, to.offset?.y ?? 0);
+  if (ox !== 0 || oy !== 0) out.offset = { x: ox, y: oy };
+  const sx = mix(from.scale?.x ?? 1, to.scale?.x ?? 1);
+  const sy = mix(from.scale?.y ?? 1, to.scale?.y ?? 1);
+  if (sx !== 1 || sy !== 1) out.scale = { x: sx, y: sy };
+  const scaleAnchor = to.scaleAnchor ?? from.scaleAnchor;
+  if (scaleAnchor) out.scaleAnchor = scaleAnchor;
+  const rotation = mix(from.rotation ?? 0, to.rotation ?? 0);
+  if (rotation !== 0) out.rotation = rotation;
+  const rotationAnchor = to.rotationAnchor ?? from.rotationAnchor;
+  if (rotationAnchor) out.rotationAnchor = rotationAnchor;
+  const r3 = to.rotation3D ?? from.rotation3D;
+  if (r3) out.rotation3D = { ...r3, angle: mix(from.rotation3D?.angle ?? 0, to.rotation3D?.angle ?? 0) };
+  const opacity = mix(from.opacity ?? 1, to.opacity ?? 1);
+  if (opacity !== 1) out.opacity = opacity;
+  const blur = mix(from.blur ?? 0, to.blur ?? 0);
+  if (blur !== 0) out.blur = blur;
+  const brightness = mix(from.brightness ?? 0, to.brightness ?? 0);
+  if (brightness !== 0) out.brightness = brightness;
+  const contrast = mix(from.contrast ?? 1, to.contrast ?? 1);
+  if (contrast !== 1) out.contrast = contrast;
+  const saturation = mix(from.saturation ?? 1, to.saturation ?? 1);
+  if (saturation !== 1) out.saturation = saturation;
+  const grayscale = mix(from.grayscale ?? 0, to.grayscale ?? 0);
+  if (grayscale !== 0) out.grayscale = grayscale;
+  const hueRotation = mix(from.hueRotation ?? 0, to.hueRotation ?? 0);
+  if (hueRotation !== 0) out.hueRotation = hueRotation;
+  return out;
+}
+
+/** The effects at `progress` (see the file comment). */
+export function effectAt(spec: ScrollTransition, progress: number): ScrollTransitionEffect {
+  if (spec.configuration === 'identity' || progress === 0) return spec.identity;
+  const edge = progress < 0 ? spec.topLeading : spec.bottomTrailing;
+  if (spec.configuration === 'animated') return edge;
+  return interpolateEffect(spec.identity, edge, Math.min(1, Math.abs(progress)));
+}
+
+/** Where `el` is laid out inside `scroller`'s content (offsets: transforms left out). */
+export function layoutOrigin(el: HTMLElement, scroller: HTMLElement): { x: number; y: number } | null {
+  let x = 0;
+  let y = 0;
+  let node: HTMLElement | null = el;
+  while (node && node !== scroller) {
+    x += node.offsetLeft;
+    y += node.offsetTop;
+    const parent = node.offsetParent as HTMLElement | null;
+    if (!parent || !scroller.contains(parent)) return parent === scroller ? { x, y } : null;
+    node = parent;
+  }
+  return { x, y };
+}
+
+/** How far `el` is out of its scroll view's visible area (0 when it is not in one). */
+export function progressOf(el: HTMLElement, axis?: 'horizontal' | 'vertical'): number {
+  const scroller = el.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list');
+  if (!scroller) return 0;
+  const origin = layoutOrigin(el, scroller);
+  if (!origin) return 0;
+  const horizontal = (axis ?? (scroller.dataset['sbAxes'] === 'horizontal' ? 'horizontal' : 'vertical')) === 'horizontal';
+  const length = horizontal ? el.offsetWidth : el.offsetHeight;
+  if (length <= 0) return 0;
+  const start = horizontal ? origin.x : origin.y;
+  const viewStart = horizontal ? scroller.scrollLeft : scroller.scrollTop;
+  const viewEnd = viewStart + (horizontal ? scroller.clientWidth : scroller.clientHeight);
+  if (start < viewStart - 0.5) return -Math.min(1, (viewStart - start) / length);
+  if (start + length > viewEnd + 0.5) return Math.min(1, (start + length - viewEnd) / length);
+  return 0;
+}
+
+function draw(el: HTMLElement): void {
+  const entry = registered.get(el);
+  if (!entry) return;
+  const effect = effectAt(entry.spec, el.isConnected ? progressOf(el, entry.spec.axis) : 0);
+  const css = effectsCSS(effect);
+  const s = el.style;
+  s.transform = [css.transform, entry.base.transform].filter(Boolean).join(' ');
+  if (css.transformOrigin) s.transformOrigin = css.transformOrigin;
+  s.filter = [entry.base.filter, css.filter].filter(Boolean).join(' ');
+  const opacity = entry.base.opacity * (effect.opacity ?? 1);
+  s.opacity = opacity === 1 ? '' : String(Math.round(opacity * 1000) / 1000);
+}
+
+/** Draws every transition at its box's current place: after a layout, and per frame while scrolling. */
+export function drawScrollTransitions(): void {
+  for (const el of registered.keys()) {
+    if (!el.isConnected) {
+      registered.delete(el);
+      continue;
+    }
+    draw(el);
+  }
+}