@n-uf/motion 26.11.3 → 26.11.4

package/dist/drag.js

@@ -0,0 +1,151 @@
+// src/drag/intent.ts
+var DRAG_DEFAULTS = {
+  lift: 5,
+  touchHold: 180,
+  touchLift: 8,
+  speedWindow: 50,
+  aimSpeed: 0.45,
+  still: 12,
+  dwell: 90,
+  band: 10,
+  breakthrough: 4,
+  gapGrace: 120,
+  switchHold: 150,
+  roomAfter: 160,
+  homeInset: 6
+};
+function inRect(rect, point, margin = 0) {
+  return point.x >= rect.x - margin && point.x <= rect.x + rect.width + margin && point.y >= rect.y - margin && point.y <= rect.y + rect.height + margin;
+}
+var area = (r) => r.width * r.height;
+function targetAt(targets, point) {
+  let best = null;
+  for (const t of targets) {
+    if (!inRect(t.hit, point)) continue;
+    if (!best || t.priority < best.priority || t.priority === best.priority && area(t.hit) < area(best.hit)) best = t;
+  }
+  return best;
+}
+function liftDecision(press, tuning = {}) {
+  const t = { ...DRAG_DEFAULTS, ...tuning };
+  if (!press.touch) return press.distance >= t.lift ? "lift" : "wait";
+  if (press.elapsed < t.touchHold) return press.distance >= t.touchLift ? "refuse" : "wait";
+  return press.distance >= t.touchLift ? "lift" : "wait";
+}
+function createDragIntent(options) {
+  const tuning = { ...DRAG_DEFAULTS, ...options.tuning };
+  const placeOf = options.placeOf ?? ((t) => t.id);
+  let home = { ...options.home };
+  let samples = [];
+  let cur = null;
+  let curSince = 0;
+  let lastInside = 0;
+  let shown = null;
+  let shownSince = 0;
+  let place = null;
+  let placeSince = 0;
+  let roomPlace = null;
+  let leftHome = false;
+  let speed = 0;
+  let anchor = null;
+  let stillSince = 0;
+  let restart = false;
+  const same = (a, b) => a === null || b === null ? a === b : a.id === b.id;
+  const follow = (t, targets) => t ? targets.find((x) => x.id === t.id) ?? t : null;
+  return {
+    tuning,
+    get state() {
+      return { speed, current: cur, shown, leftHome };
+    },
+    update(point, time, targets) {
+      const p = point;
+      const t = time;
+      samples.push({ x: p.x, y: p.y, t });
+      while (samples.length > 2 && t - samples[0].t > tuning.speedWindow) samples.shift();
+      const a = samples[0];
+      speed = speed * 0.5 + Math.hypot(p.x - a.x, p.y - a.y) / Math.max(1, t - a.t) * 0.5;
+      if (!anchor || Math.hypot(p.x - anchor.x, p.y - anchor.y) > tuning.still) {
+        anchor = { x: p.x, y: p.y };
+        stillSince = t;
+      }
+      if (!inRect(home, p, -tuning.homeInset)) leftHome = true;
+      const atHome = inRect(home, p);
+      const raw = atHome ? null : targetAt(targets, p);
+      cur = follow(cur, targets);
+      shown = follow(shown, targets);
+      let next = raw;
+      if (cur && !atHome && inRect(cur.hit, p, tuning.band)) {
+        const breaks = raw !== null && !same(raw, cur) && raw.priority < cur.priority && inRect(raw.hit, p, -tuning.breakthrough);
+        next = breaks ? raw : cur;
+      }
+      if (!next && cur && !atHome && t - lastInside < tuning.gapGrace) next = cur;
+      if (next && inRect(next.hit, p)) lastInside = t;
+      if (!same(next, cur)) curSince = t;
+      cur = next;
+      const aiming = !restart && (speed < tuning.aimSpeed || t - stillSince >= tuning.dwell);
+      restart = false;
+      const show = (s) => {
+        if (!same(s, shown)) shownSince = t;
+        shown = s;
+      };
+      const under = !!cur && inRect(cur.hit, p, tuning.band);
+      if (!shown) {
+        if (cur && under && leftHome && aiming) show(cur);
+      } else if (same(cur, shown)) {
+        if (!aiming && !under) show(null);
+        else shown = cur;
+      } else if (!cur || !aiming) {
+        show(null);
+      } else if (cur.priority < shown.priority && inRect(cur.hit, p, -tuning.breakthrough) || under && t - curSince >= tuning.switchHold) {
+        show(cur);
+      }
+      const at = shown ? placeOf(shown, p) : null;
+      if (at !== place) {
+        place = at;
+        placeSince = t;
+      }
+      if (!shown || shown.free) roomPlace = null;
+      else if (t - shownSince >= tuning.roomAfter && t - placeSince >= tuning.roomAfter) roomPlace = place;
+      else if (shownSince === t) roomPlace = null;
+      return { shown, room: roomPlace !== null, roomPlace, aiming };
+    },
+    release(point, targets) {
+      if (inRect(home, point)) return null;
+      const s = follow(shown, targets);
+      if (s) return s;
+      return targetAt(targets, point);
+    },
+    hide(time) {
+      shown = null;
+      cur = null;
+      shownSince = time;
+      place = null;
+      roomPlace = null;
+      samples = [];
+      anchor = null;
+      restart = true;
+    },
+    moveHome(dx, dy) {
+      home = { ...home, x: home.x + dx, y: home.y + dy };
+    }
+  };
+}
+
+// src/drag/preview.ts
+var DRAG_PREVIEW_DEFAULT = "snap";
+function previewPlan(frame, preview, slotted = !!frame.shown && !frame.shown.free) {
+  const shown = !!frame.shown;
+  if (preview === "indicator") return { showIndicator: shown, makeRoom: false, snapItem: false };
+  if (preview === "gap") return { showIndicator: shown, makeRoom: frame.room, snapItem: false };
+  return { showIndicator: shown && !slotted, makeRoom: frame.room, snapItem: frame.room && shown && slotted };
+}
+export {
+  DRAG_DEFAULTS,
+  DRAG_PREVIEW_DEFAULT,
+  createDragIntent,
+  inRect,
+  liftDecision,
+  previewPlan,
+  targetAt
+};
+//# sourceMappingURL=drag.js.map

package/dist/drag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drag/intent.ts","../src/drag/preview.ts"],"sourcesContent":["import type { Point, Rect } from \"../shapes\";\n\n/**\n * The drag intent model's tuning. Distances in px, speeds in px/ms, times in\n * ms; every value can be overridden per intent (see\n * {@link DragIntentOptions.tuning}).\n */\nexport interface DragTuning {\n  /** A mouse press lifts once the pointer has moved this far. */\n  readonly lift: number;\n  /** A touch press lifts only after it has been held this long… */\n  readonly touchHold: number;\n  /** …and then moved this far (moving that far before the hold is over is not a drag). */\n  readonly touchLift: number;\n  /** The pointer's speed is measured over this window and smoothed. */\n  readonly speedWindow: number;\n  /** Aiming: the smoothed speed is below this… */\n  readonly aimSpeed: number;\n  /** …or the pointer has stayed within `still` px of one spot for `dwell` ms. */\n  readonly still: number;\n  readonly dwell: number;\n  /** The current target holds while the pointer is within this band of its zone. */\n  readonly band: number;\n  /** A higher-priority target takes over at once when the pointer is this far inside it. */\n  readonly breakthrough: number;\n  /** A gap between zones shorter than this keeps the current target (for a pointer that aims). */\n  readonly gapGrace: number;\n  /** Aiming, the shown target moves to another one only once that one has held this long. */\n  readonly switchHold: number;\n  /** Room is made once the shown target, and the place in it, have held this long. */\n  readonly roomAfter: number;\n  /** The pointer has left the item's home once it is outside the home shrunk by this much on every side. */\n  readonly homeInset: number;\n}\n\n/**\n * The defaults: a mouse lifts after 5 px, a touch after a 180 ms hold and\n * 8 px; aiming is slower than 0.45 px/ms over 50 ms, or within 12 px for\n * 90 ms; a 10 px band, a 4 px breakthrough and a 120 ms gap grace; a switch\n * waits 150 ms (the shortest an indicator may show); room after 160 ms.\n */\nexport const DRAG_DEFAULTS: DragTuning = {\n  lift: 5,\n  touchHold: 180,\n  touchLift: 8,\n  speedWindow: 50,\n  aimSpeed: 0.45,\n  still: 12,\n  dwell: 90,\n  band: 10,\n  breakthrough: 4,\n  gapGrace: 120,\n  switchHold: 150,\n  roomAfter: 160,\n  homeInset: 6,\n};\n\n/**\n * A drop target: plain data. `hit` is the zone the pointer can be in;\n * `priority` how precise it is (1 beats 2 beats 3; equal priorities go to the\n * smaller zone). `slot` is where the dragged item would land, `label` what to\n * call it; the model reads neither. A `free` target has no slot (the item\n * floats where it is dropped): no room is made for it.\n */\nexport interface DragTarget {\n  readonly id: string;\n  readonly priority: 1 | 2 | 3;\n  readonly hit: Rect;\n  readonly slot?: Rect;\n  readonly label?: string;\n  readonly free?: boolean;\n}\n\n/** Whether `point` lies in `rect` grown by `margin` px on every side (shrunk, for a negative margin). */\nexport function inRect(rect: Rect, point: Point, margin = 0): boolean {\n  return point.x >= rect.x - margin && point.x <= rect.x + rect.width + margin && point.y >= rect.y - margin && point.y <= rect.y + rect.height + margin;\n}\n\nconst area = (r: Rect): number => r.width * r.height;\n\n/** The most precise target under `point`: the lowest priority number, then the smallest zone; null when none is. */\nexport function targetAt<T extends DragTarget>(targets: readonly T[], point: Point): T | null {\n  let best: T | null = null;\n  for (const t of targets) {\n    if (!inRect(t.hit, point)) continue;\n    if (!best || t.priority < best.priority || (t.priority === best.priority && area(t.hit) < area(best.hit))) best = t;\n  }\n  return best;\n}\n\n/** What a press does so far: not yet a drag (`wait`), a drag (`lift`), or never one (`refuse`: a touch that moved too soon). */\nexport type LiftDecision = \"wait\" | \"lift\" | \"refuse\";\n\n/**\n * The lift rule for a press that has moved `distance` px in `elapsed` ms. A\n * mouse (or pen) lifts at `lift` px. A touch lifts only after `touchHold` ms,\n * then at `touchLift` px; moving `touchLift` px before the hold is over\n * refuses the drag (the finger is scrolling or swiping).\n */\nexport function liftDecision(press: { readonly touch: boolean; readonly distance: number; readonly elapsed: number }, tuning: Partial<DragTuning> = {}): LiftDecision {\n  const t = { ...DRAG_DEFAULTS, ...tuning };\n  if (!press.touch) return press.distance >= t.lift ? \"lift\" : \"wait\";\n  if (press.elapsed < t.touchHold) return press.distance >= t.touchLift ? \"refuse\" : \"wait\";\n  return press.distance >= t.touchLift ? \"lift\" : \"wait\";\n}\n\n/** One update's answer. */\nexport interface DragFrame<T extends DragTarget> {\n  /** The target the drop indicator shows, or null. */\n  readonly shown: T | null;\n  /** The others make room for the shown target: it, and the place in it, have held `roomAfter` ms. */\n  readonly room: boolean;\n  /**\n   * The place the room is made for, or null. Within one target it stays on\n   * the old place until a new one has held `roomAfter` ms (see\n   * {@link DragIntentOptions.placeOf}).\n   */\n  readonly roomPlace: string | null;\n  /** The pointer is aiming: slow, or nearly still for a moment. */\n  readonly aiming: boolean;\n}\n\n/** What a drag intent knows now. */\nexport interface DragIntentState<T extends DragTarget> {\n  /** The pointer's smoothed speed, px/ms. */\n  readonly speed: number;\n  /** The target under the pointer as the hysteresis holds it, or null. */\n  readonly current: T | null;\n  /** The target the indicator shows, or null. */\n  readonly shown: T | null;\n  /** The pointer has left the item's home. */\n  readonly leftHome: boolean;\n}\n\nexport interface DragIntentOptions<T extends DragTarget> {\n  /** Where the item was lifted from: the indicator stays off until the pointer leaves it, and a release there does nothing. */\n  readonly home: Rect;\n  /** Overrides of {@link DRAG_DEFAULTS}. */\n  readonly tuning?: Partial<DragTuning>;\n  /**\n   * The place within a target the pointer is at (a tab index, a stack\n   * position), unique across targets; default: the target's id. Moving between places of the\n   * shown target moves the indicator at once but the room only once the new\n   * place has held `roomAfter` ms.\n   */\n  readonly placeOf?: (target: T, point: Point) => string;\n}\n\n/** A drag's intent: feed it the pointer on every frame; it says what the indicator shows and what a release lands on. */\nexport interface DragIntent<T extends DragTarget> {\n  /**\n   * A pointer sample at `time` (ms), with the targets as they stand (they may\n   * be rebuilt between calls: the model follows them by id). Call it once a\n   * frame while the item is held, also when the pointer doesn't move: a\n   * dwell is time passing.\n   */\n  update(point: Point, time: number, targets: readonly T[]): DragFrame<T>;\n  /**\n   * What a release at `point` lands on: the shown target whenever one shows\n   * (a drop lands where the indicator was), else the target under the\n   * pointer, else null (the item goes home). A release over home is null: it\n   * does nothing. Feed the release point to `update` first, so a last jump\n   * of the pointer counts.\n   */\n  release(point: Point, targets: readonly T[]): T | null;\n  /**\n   * Hide the indicator (the view is scrolling under the pointer, say). The\n   * aim starts afresh: the next sample never counts as aiming, and a dwell\n   * starts again.\n   */\n  hide(time: number): void;\n  /** The item's home moved with the view (it scrolled) by (dx, dy). */\n  moveHome(dx: number, dy: number): void;\n  readonly state: DragIntentState<T>;\n  readonly tuning: DragTuning;\n}\n\n/**\n * The drag intent model: when the drop indicator shows, which target it\n * shows, when the others make room, and what a release lands on. Pure: fed\n * pointer samples and plain-data targets, no DOM and no clock of its own.\n *\n * - The indicator shows only when the pointer has left the item's home, a\n *   target is under it, and it is aiming (slow, or nearly still for a\n *   moment). Time spent crossing a big target at speed doesn't count.\n * - The most precise target wins (priority, then the smaller zone).\n * - Hysteresis: the current target holds while the pointer is within `band`\n *   px of its zone, unless a more precise one is clearly (`breakthrough` px)\n *   under the pointer; for a pointer that aims, a short gap between zones\n *   (`gapGrace` ms) keeps it too.\n * - Leaving the shown target: flying, the indicator hides at once; aiming, it\n *   moves to the new target once that has held `switchHold` ms (so no\n *   indicator shows for less than that), at once for a breakthrough. A target\n *   kept only by the gap grace can keep the indicator, never show it.\n * - Room is made once the shown target has held `roomAfter` ms, never for a\n *   free target, and closes at once when it changes.\n */\nexport function createDragIntent<T extends DragTarget>(options: DragIntentOptions<T>): DragIntent<T> {\n  const tuning: DragTuning = { ...DRAG_DEFAULTS, ...options.tuning };\n  const placeOf = options.placeOf ?? ((t: T) => t.id);\n  let home: Rect = { ...options.home };\n  let samples: { x: number; y: number; t: number }[] = [];\n  let cur: T | null = null;\n  let curSince = 0;\n  let lastInside = 0;\n  let shown: T | null = null;\n  let shownSince = 0;\n  let place: string | null = null;\n  let placeSince = 0;\n  let roomPlace: string | null = null;\n  let leftHome = false;\n  let speed = 0;\n  let anchor: Point | null = null;\n  let stillSince = 0;\n  let restart = false;\n  const same = (a: T | null, b: T | null): boolean => (a === null || b === null ? a === b : a.id === b.id);\n  // Targets may be rebuilt between calls: follow the ones held by id.\n  const follow = (t: T | null, targets: readonly T[]): T | null => (t ? (targets.find((x) => x.id === t.id) ?? t) : null);\n\n  return {\n    tuning,\n    get state(): DragIntentState<T> {\n      return { speed, current: cur, shown, leftHome };\n    },\n    update(point, time, targets) {\n      const p = point;\n      const t = time;\n      samples.push({ x: p.x, y: p.y, t });\n      while (samples.length > 2 && t - samples[0]!.t > tuning.speedWindow) samples.shift();\n      const a = samples[0]!;\n      speed = speed * 0.5 + (Math.hypot(p.x - a.x, p.y - a.y) / Math.max(1, t - a.t)) * 0.5;\n      if (!anchor || Math.hypot(p.x - anchor.x, p.y - anchor.y) > tuning.still) {\n        anchor = { x: p.x, y: p.y };\n        stillSince = t;\n      }\n      if (!inRect(home, p, -tuning.homeInset)) leftHome = true;\n      const atHome = inRect(home, p);\n      const raw = atHome ? null : targetAt(targets, p);\n      cur = follow(cur, targets);\n      shown = follow(shown, targets);\n      let next = raw;\n      if (cur && !atHome && inRect(cur.hit, p, tuning.band)) {\n        const breaks = raw !== null && !same(raw, cur) && raw.priority < cur.priority && inRect(raw.hit, p, -tuning.breakthrough);\n        next = breaks ? raw : cur;\n      }\n      if (!next && cur && !atHome && t - lastInside < tuning.gapGrace) next = cur;\n      if (next && inRect(next.hit, p)) lastInside = t;\n      if (!same(next, cur)) curSince = t;\n      cur = next;\n      const aiming = !restart && (speed < tuning.aimSpeed || t - stillSince >= tuning.dwell);\n      restart = false;\n      const show = (s: T | null): void => {\n        if (!same(s, shown)) shownSince = t;\n        shown = s;\n      };\n      // Under the pointer (within its band), not just kept by the gap grace.\n      const under = !!cur && inRect(cur.hit, p, tuning.band);\n      if (!shown) {\n        if (cur && under && leftHome && aiming) show(cur);\n      } else if (same(cur, shown)) {\n        // It stays while its target holds; but a pointer flying out past the band hides it at once.\n        if (!aiming && !under) show(null);\n        else shown = cur;\n      } else if (!cur || !aiming) {\n        show(null);\n      } else if ((cur.priority < shown.priority && inRect(cur.hit, p, -tuning.breakthrough)) || (under && t - curSince >= tuning.switchHold)) {\n        show(cur);\n      }\n      // The place within the shown target, and the room: after the target and the place have both held.\n      const at = shown ? placeOf(shown, p) : null;\n      if (at !== place) {\n        place = at;\n        placeSince = t;\n      }\n      if (!shown || shown.free) roomPlace = null;\n      else if (t - shownSince >= tuning.roomAfter && t - placeSince >= tuning.roomAfter) roomPlace = place;\n      else if (shownSince === t) roomPlace = null;\n      return { shown, room: roomPlace !== null, roomPlace, aiming };\n    },\n    release(point, targets) {\n      if (inRect(home, point)) return null;\n      // Drop = shown: a shown target is kept until it hides (flying out past its band hides it at once).\n      const s = follow(shown, targets);\n      if (s) return s;\n      return targetAt(targets, point);\n    },\n    hide(time) {\n      shown = null;\n      cur = null;\n      shownSince = time;\n      place = null;\n      roomPlace = null;\n      samples = [];\n      anchor = null;\n      restart = true;\n    },\n    moveHome(dx, dy) {\n      home = { ...home, x: home.x + dx, y: home.y + dy };\n    },\n  };\n}\n","import type { DragFrame, DragTarget } from \"./intent\";\n\n/**\n * How a drag previews its drop, from least to most motion while dragging:\n *\n * - `\"indicator\"`: nothing moves; only the indicator (an outline or an\n *   insertion marker) shows the target.\n * - `\"gap\"`: once the room is made, the others move aside and open the slot;\n *   the item stays under the pointer.\n * - `\"snap\"`: the gap opens and the item itself glides into it (for a target\n *   with a slot; one without keeps the indicator).\n *\n * Every mode follows the same intent: what shows, when, and what a release\n * lands on are the drag intent's, so a drop always lands where the preview\n * showed it.\n */\nexport type DragPreview = \"indicator\" | \"gap\" | \"snap\";\n\n/** The preview a drag uses unless the host picks another. */\nexport const DRAG_PREVIEW_DEFAULT: DragPreview = \"snap\";\n\n/** What to draw for one frame of a drag. */\nexport interface PreviewPlan {\n  /** Draw the indicator on the shown target. */\n  readonly showIndicator: boolean;\n  /** Lay the others out around the room (the gap is open). */\n  readonly makeRoom: boolean;\n  /** Draw the item in its slot instead of under the pointer. */\n  readonly snapItem: boolean;\n}\n\n/**\n * The plan for a frame of the drag intent under `preview`. `slotted` says\n * whether the shown target's drop has a slot the item can sit in (default: a\n * target that isn't `free`); only such a target snaps, and in `\"snap\"` it\n * previews with the item rather than the indicator.\n *\n * - `\"indicator\"`: the indicator, never room, never a snap.\n * - `\"gap\"`: the indicator, and room when the intent makes it.\n * - `\"snap\"`: room when the intent makes it, the item snapped into a slotted\n *   target's room; the indicator only for a target without a slot.\n */\nexport function previewPlan<T extends DragTarget>(\n  frame: Pick<DragFrame<T>, \"shown\" | \"room\">,\n  preview: DragPreview,\n  slotted: boolean = !!frame.shown && !frame.shown.free,\n): PreviewPlan {\n  const shown = !!frame.shown;\n  if (preview === \"indicator\") return { showIndicator: shown, makeRoom: false, snapItem: false };\n  if (preview === \"gap\") return { showIndicator: shown, makeRoom: frame.room, snapItem: false };\n  // By design a slotted target draws nothing until the room opens (`roomAfter`); a release then still lands on it.\n  return { showIndicator: shown && !slotted, makeRoom: frame.room, snapItem: frame.room && shown && slotted };\n}\n"],"mappings":";AAyCO,IAAM,gBAA4B;AAAA,EACvC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW;AACb;AAmBO,SAAS,OAAO,MAAY,OAAc,SAAS,GAAY;AACpE,SAAO,MAAM,KAAK,KAAK,IAAI,UAAU,MAAM,KAAK,KAAK,IAAI,KAAK,QAAQ,UAAU,MAAM,KAAK,KAAK,IAAI,UAAU,MAAM,KAAK,KAAK,IAAI,KAAK,SAAS;AAClJ;AAEA,IAAM,OAAO,CAAC,MAAoB,EAAE,QAAQ,EAAE;AAGvC,SAAS,SAA+B,SAAuB,OAAwB;AAC5F,MAAI,OAAiB;AACrB,aAAW,KAAK,SAAS;AACvB,QAAI,CAAC,OAAO,EAAE,KAAK,KAAK,EAAG;AAC3B,QAAI,CAAC,QAAQ,EAAE,WAAW,KAAK,YAAa,EAAE,aAAa,KAAK,YAAY,KAAK,EAAE,GAAG,IAAI,KAAK,KAAK,GAAG,EAAI,QAAO;AAAA,EACpH;AACA,SAAO;AACT;AAWO,SAAS,aAAa,OAAyF,SAA8B,CAAC,GAAiB;AACpK,QAAM,IAAI,EAAE,GAAG,eAAe,GAAG,OAAO;AACxC,MAAI,CAAC,MAAM,MAAO,QAAO,MAAM,YAAY,EAAE,OAAO,SAAS;AAC7D,MAAI,MAAM,UAAU,EAAE,UAAW,QAAO,MAAM,YAAY,EAAE,YAAY,WAAW;AACnF,SAAO,MAAM,YAAY,EAAE,YAAY,SAAS;AAClD;AA6FO,SAAS,iBAAuC,SAA8C;AACnG,QAAM,SAAqB,EAAE,GAAG,eAAe,GAAG,QAAQ,OAAO;AACjE,QAAM,UAAU,QAAQ,YAAY,CAAC,MAAS,EAAE;AAChD,MAAI,OAAa,EAAE,GAAG,QAAQ,KAAK;AACnC,MAAI,UAAiD,CAAC;AACtD,MAAI,MAAgB;AACpB,MAAI,WAAW;AACf,MAAI,aAAa;AACjB,MAAI,QAAkB;AACtB,MAAI,aAAa;AACjB,MAAI,QAAuB;AAC3B,MAAI,aAAa;AACjB,MAAI,YAA2B;AAC/B,MAAI,WAAW;AACf,MAAI,QAAQ;AACZ,MAAI,SAAuB;AAC3B,MAAI,aAAa;AACjB,MAAI,UAAU;AACd,QAAM,OAAO,CAAC,GAAa,MAA0B,MAAM,QAAQ,MAAM,OAAO,MAAM,IAAI,EAAE,OAAO,EAAE;AAErG,QAAM,SAAS,CAAC,GAAa,YAAqC,IAAK,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,IAAK;AAElH,SAAO;AAAA,IACL;AAAA,IACA,IAAI,QAA4B;AAC9B,aAAO,EAAE,OAAO,SAAS,KAAK,OAAO,SAAS;AAAA,IAChD;AAAA,IACA,OAAO,OAAO,MAAM,SAAS;AAC3B,YAAM,IAAI;AACV,YAAM,IAAI;AACV,cAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;AAClC,aAAO,QAAQ,SAAS,KAAK,IAAI,QAAQ,CAAC,EAAG,IAAI,OAAO,YAAa,SAAQ,MAAM;AACnF,YAAM,IAAI,QAAQ,CAAC;AACnB,cAAQ,QAAQ,MAAO,KAAK,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC,IAAK;AAClF,UAAI,CAAC,UAAU,KAAK,MAAM,EAAE,IAAI,OAAO,GAAG,EAAE,IAAI,OAAO,CAAC,IAAI,OAAO,OAAO;AACxE,iBAAS,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,EAAE;AAC1B,qBAAa;AAAA,MACf;AACA,UAAI,CAAC,OAAO,MAAM,GAAG,CAAC,OAAO,SAAS,EAAG,YAAW;AACpD,YAAM,SAAS,OAAO,MAAM,CAAC;AAC7B,YAAM,MAAM,SAAS,OAAO,SAAS,SAAS,CAAC;AAC/C,YAAM,OAAO,KAAK,OAAO;AACzB,cAAQ,OAAO,OAAO,OAAO;AAC7B,UAAI,OAAO;AACX,UAAI,OAAO,CAAC,UAAU,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,GAAG;AACrD,cAAM,SAAS,QAAQ,QAAQ,CAAC,KAAK,KAAK,GAAG,KAAK,IAAI,WAAW,IAAI,YAAY,OAAO,IAAI,KAAK,GAAG,CAAC,OAAO,YAAY;AACxH,eAAO,SAAS,MAAM;AAAA,MACxB;AACA,UAAI,CAAC,QAAQ,OAAO,CAAC,UAAU,IAAI,aAAa,OAAO,SAAU,QAAO;AACxE,UAAI,QAAQ,OAAO,KAAK,KAAK,CAAC,EAAG,cAAa;AAC9C,UAAI,CAAC,KAAK,MAAM,GAAG,EAAG,YAAW;AACjC,YAAM;AACN,YAAM,SAAS,CAAC,YAAY,QAAQ,OAAO,YAAY,IAAI,cAAc,OAAO;AAChF,gBAAU;AACV,YAAM,OAAO,CAAC,MAAsB;AAClC,YAAI,CAAC,KAAK,GAAG,KAAK,EAAG,cAAa;AAClC,gBAAQ;AAAA,MACV;AAEA,YAAM,QAAQ,CAAC,CAAC,OAAO,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI;AACrD,UAAI,CAAC,OAAO;AACV,YAAI,OAAO,SAAS,YAAY,OAAQ,MAAK,GAAG;AAAA,MAClD,WAAW,KAAK,KAAK,KAAK,GAAG;AAE3B,YAAI,CAAC,UAAU,CAAC,MAAO,MAAK,IAAI;AAAA,YAC3B,SAAQ;AAAA,MACf,WAAW,CAAC,OAAO,CAAC,QAAQ;AAC1B,aAAK,IAAI;AAAA,MACX,WAAY,IAAI,WAAW,MAAM,YAAY,OAAO,IAAI,KAAK,GAAG,CAAC,OAAO,YAAY,KAAO,SAAS,IAAI,YAAY,OAAO,YAAa;AACtI,aAAK,GAAG;AAAA,MACV;AAEA,YAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC,IAAI;AACvC,UAAI,OAAO,OAAO;AAChB,gBAAQ;AACR,qBAAa;AAAA,MACf;AACA,UAAI,CAAC,SAAS,MAAM,KAAM,aAAY;AAAA,eAC7B,IAAI,cAAc,OAAO,aAAa,IAAI,cAAc,OAAO,UAAW,aAAY;AAAA,eACtF,eAAe,EAAG,aAAY;AACvC,aAAO,EAAE,OAAO,MAAM,cAAc,MAAM,WAAW,OAAO;AAAA,IAC9D;AAAA,IACA,QAAQ,OAAO,SAAS;AACtB,UAAI,OAAO,MAAM,KAAK,EAAG,QAAO;AAEhC,YAAM,IAAI,OAAO,OAAO,OAAO;AAC/B,UAAI,EAAG,QAAO;AACd,aAAO,SAAS,SAAS,KAAK;AAAA,IAChC;AAAA,IACA,KAAK,MAAM;AACT,cAAQ;AACR,YAAM;AACN,mBAAa;AACb,cAAQ;AACR,kBAAY;AACZ,gBAAU,CAAC;AACX,eAAS;AACT,gBAAU;AAAA,IACZ;AAAA,IACA,SAAS,IAAI,IAAI;AACf,aAAO,EAAE,GAAG,MAAM,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,GAAG;AAAA,IACnD;AAAA,EACF;AACF;;;ACzRO,IAAM,uBAAoC;AAuB1C,SAAS,YACd,OACA,SACA,UAAmB,CAAC,CAAC,MAAM,SAAS,CAAC,MAAM,MAAM,MACpC;AACb,QAAM,QAAQ,CAAC,CAAC,MAAM;AACtB,MAAI,YAAY,YAAa,QAAO,EAAE,eAAe,OAAO,UAAU,OAAO,UAAU,MAAM;AAC7F,MAAI,YAAY,MAAO,QAAO,EAAE,eAAe,OAAO,UAAU,MAAM,MAAM,UAAU,MAAM;AAE5F,SAAO,EAAE,eAAe,SAAS,CAAC,SAAS,UAAU,MAAM,MAAM,UAAU,MAAM,QAAQ,SAAS,QAAQ;AAC5G;","names":[]}

package/dist/gestures.d.ts

@@ -6,7 +6,7 @@ import { C as ClockPort, F as FrameSource, T as TimerSource } from './port-CmlUc
  * touches the DOM; the host copies the fields it needs out of PointerEvent /
  * WheelEvent / Safari's GestureEvent.
  *
- * Ported from the pdfized surface's input layer, whose recogniser this is.
+ * Ported from a host app's input layer, whose recogniser this is.
  * Hit testing and routing (what is under a point, who gets a gesture) stay
  * with the host.
  */

package/dist/gestures.js

@@ -20,7 +20,7 @@ import {
   resolveDragModifier,
   toModifiers,
   wheelDeltaPx
-} from "./chunk-NFQ4LIIR.js";
+} from "./chunk-C4M62FUT.js";
 import "./chunk-OOKRBVMB.js";
 export {
   DWELL_DEFAULTS,

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { C as ClockPort, F as FrameSource, T as TimerSource } from './port-CmlUc
 export { FakeClock, FakeClockOptions, createFakeClock } from './clock.js';
 export { F as FrameInfo, a as FrameLoop, b as FrameLoopOptions, c as FrameStats, d as FrameTask, P as PHASES, e as Phase, R as RepeatingTask, S as ScheduleOptions, f as createFrameLoop } from './frame-loop-C88dc9xw.js';
 export { EffectCleanup, EffectOptions, Equals, ReadonlySignal, Signal, SignalOptions, batch, computed, effect, isSignal, signal, untracked } from './signals.js';
-export { Animator, AnimatorValue, Easing, MotionOptions, MotionValue, PopIn, RevealFrame, SETTLE_DEFAULTS, SETTLE_TEMPO, SPRING_DEFAULTS, SetOptions, Settle, SettleConfig, Spring, SpringConfig, SpringParams, SpringState, Tween, TweenConfig, createSettle, createSpring, createTween, cubicBezier, ease, easeIn, easeInOut, easeInOutCubic, easeOut, easeOutCubic, linear, motionValue, popIn, resolveSpring, reveal, settleValue, springStep, springValue, tweenValue } from './values.js';
+export { Animator, AnimatorValue, Easing, MotionOptions, MotionValue, SETTLE_DEFAULTS, SETTLE_TEMPO, SPRING_DEFAULTS, SetOptions, Settle, SettleConfig, Spring, SpringConfig, SpringParams, SpringState, Tween, TweenConfig, createSettle, createSpring, createTween, cubicBezier, ease, easeIn, easeInOut, easeInOutCubic, easeOut, easeOutCubic, linear, motionValue, resolveSpring, settleValue, springStep, springValue, tweenValue } from './values.js';
+export { P as PopIn, R as RevealFrame, p as popIn, r as reveal } from './reveal-my7U6UyE.js';
 export { CancelReason, CoalescerOptions, DWELL_DEFAULTS, DWELL_IDLE, Deadline, DwellConfig, DwellInput, DwellMachineOptions, DwellState, FrameCoalescer, InputGesture, InputGestureType, Machine, MachineOptions, ModifierDrag, ModifierKey, Modifiers, NO_MODIFIERS, Platform, PointerKind, RECOGNIZER_DEFAULTS, RawInputEvent, RawPointerEvent, RawPointerType, RawSafariGestureEvent, RawWheelEvent, Recognizer, RecognizerOptions, RecognizerTimers, SurfacePointer, WHEEL_DEFAULTS, WHEEL_PAN_DEFAULTS, WheelIntent, WheelOptions, WheelPanOptions, classifyWheel, createDwellMachine, createFrameCoalescer, createMachine, createRecognizer, dampWheelPan, defaultDragModifier, dwellDeadline, dwellReducer, isHeld, modHeld, platformButton, resolveDragModifier, toModifiers, wheelDeltaPx } from './gestures.js';
 export { A as Animatable, P as Point, R as Rect, V as Vector, W as Widen, s as shapeEquals } from './shapes-EbQlwbCu.js';

package/dist/index.js

@@ -5,10 +5,7 @@ import {
 } from "./chunk-BVPVUJ42.js";
 import "./chunk-FQNHO2VT.js";
 import {
-  SETTLE_DEFAULTS,
-  SETTLE_TEMPO,
   SPRING_DEFAULTS,
-  createSettle,
   createSpring,
   createTween,
   cubicBezier,
@@ -20,15 +17,12 @@ import {
   easeOutCubic,
   linear,
   motionValue,
-  popIn,
   resolveSpring,
-  reveal,
   settleValue,
-  shapeEquals,
   springStep,
   springValue,
   tweenValue
-} from "./chunk-6W5KW7XQ.js";
+} from "./chunk-CM6WVNDH.js";
 import {
   DWELL_DEFAULTS,
   DWELL_IDLE,
@@ -51,7 +45,7 @@ import {
   resolveDragModifier,
   toModifiers,
   wheelDeltaPx
-} from "./chunk-NFQ4LIIR.js";
+} from "./chunk-C4M62FUT.js";
 import {
   batch,
   computed,
@@ -60,6 +54,14 @@ import {
   signal,
   untracked
 } from "./chunk-OOKRBVMB.js";
+import {
+  SETTLE_DEFAULTS,
+  SETTLE_TEMPO,
+  createSettle,
+  popIn,
+  reveal,
+  shapeEquals
+} from "./chunk-WQQ2E25M.js";
 export {
   DWELL_DEFAULTS,
   DWELL_IDLE,

package/dist/layout.d.ts

@@ -0,0 +1,258 @@
+import { F as FrameInfo, a as FrameLoop, e as Phase } from './frame-loop-C88dc9xw.js';
+import { R as Rect, P as Point } from './shapes-EbQlwbCu.js';
+import { R as RevealFrame, P as PopIn } from './reveal-my7U6UyE.js';
+import './port-CmlUctqx.js';
+
+/**
+ * What a {@link Drawable} draws on a frame: where the item is drawn, the box its content is laid out in, how to draw
+ * the one at the other without stretching ({@link reveal}), and its appearance ({@link popIn}).
+ */
+interface DrawFrame {
+    /** Where the item is drawn this frame (its frame: background, border, shadow). */
+    readonly drawn: Rect;
+    /** The box its content is laid out in: where it is heading, or (held) where it was laid out last. */
+    readonly box: Rect;
+    /** How to draw `box`'s content at `drawn`: a move, the frame at the drawn size, the content clipped. */
+    readonly reveal: RevealFrame;
+    /** Its uniform appearance: scale about its centre and opacity. */
+    readonly pop: PopIn;
+    /** How shown it is, 0 (gone) to 1. */
+    readonly shown: number;
+    /** All the way gone: hidden and at rest (out of sight and out of the way of the pointer). */
+    readonly gone: boolean;
+}
+/**
+ * How an item reaches the screen. The layout motion never measures or touches anything itself: it lays an item's
+ * content out once per new box and draws it once per frame through this. {@link domDrawable} writes an element's
+ * style; a canvas or a test can draw anything else.
+ */
+interface Drawable {
+    /** Lay the content out in `box` (its position and size): called once per new box, never per frame. */
+    layOut(box: Rect): void;
+    /** Draw the item for this frame. */
+    draw(frame: DrawFrame): void;
+}
+/**
+ * One item the layout motion moves: give it a new place and it settles there from wherever it is drawn.
+ *
+ * - {@link LayoutItem.moveTo}: a settle to the new place, retargeted from the drawn rect (no jump, no overshoot);
+ *   the content is laid out at the new box at once and the item redrawn at once, so no frame shows the old offset
+ *   from the new box.
+ * - A size change is revealed: the content is laid out at the target size and the frame clipped, never scaled.
+ * - {@link LayoutItem.show}: appear or disappear with a uniform-scale fade.
+ */
+interface LayoutItem {
+    readonly id: string;
+    /** Where it is drawn now. */
+    readonly drawn: Rect;
+    /** Where it is heading (its settle's target). */
+    readonly target: Rect;
+    /** The box its content is laid out in. */
+    readonly box: Rect;
+    /** At rest on its target. */
+    readonly settled: boolean;
+    /** How shown it is, 0 to 1, and whether it is heading for shown. */
+    readonly shown: number;
+    readonly showing: boolean;
+    /** Its appearance is at rest (fully shown, or gone). */
+    readonly shownSettled: boolean;
+    /** Settle to `to` from where it is drawn; lays the content out at `to` and redraws at once. */
+    moveTo(to: Rect): void;
+    /** Be at `to` now, at rest: no glide. */
+    jumpTo(to: Rect): void;
+    /** Drawn at `from` now, then settle to `to` (a FLIP's invert and play: `from` in the item's own coordinates). */
+    glideFrom(from: Rect, to: Rect): void;
+    /** Exactly at `r`, at rest (what a pointer holds); the content stays laid out in its box, moved with it. */
+    hold(r: Rect): void;
+    /** Appear (true) or disappear (false) with a uniform-scale fade; `now`: without the fade. */
+    show(on: boolean, options?: {
+        readonly now?: boolean;
+    }): void;
+    /** Draw it again now (after its drawable's element was laid out anew from outside). */
+    redraw(): void;
+}
+/** A task the layout motion runs on every frame before it steps the items; true keeps the frames coming. */
+type LayoutTask = (frame: FrameInfo) => boolean | void;
+interface LayoutMotionOptions {
+    /** The frame loop every item steps on (one loop for all of them). */
+    readonly loop: FrameLoop;
+    /** The settle tempo, per second ({@link SETTLE_TEMPO}); default `SETTLE_TEMPO.default`. */
+    readonly omega?: number;
+    /** The frame phase the items step and draw in; default `"layout"`. */
+    readonly phase?: Phase;
+    /** Where an appearing item grows from, as a share of its size ({@link popIn}'s `from`); default 0.87. */
+    readonly popFrom?: number;
+}
+/**
+ * Layout motion: items with an id and a target rect, each settled to its place on one shared frame loop.
+ *
+ * Give an item a new place ({@link LayoutItem.moveTo}) and it glides there from wherever it is drawn: the window
+ * motion rules of `values/` (settle, reveal, popIn) applied to every item at once. The loop runs only while
+ * something moves, or a task asks for frames, and stops by itself.
+ *
+ * It only animates the rects it is given: which items move where, and when, is the caller's layout.
+ */
+interface LayoutMotion {
+    /** Add an item drawn by `drawable`, at `at`, shown (or gone: `{ shown: false }`). Its content is laid out at once. */
+    add(id: string, drawable: Drawable, at: Rect, options?: {
+        readonly shown?: boolean;
+    }): LayoutItem;
+    get(id: string): LayoutItem | undefined;
+    /** Stop moving an item (its drawable is not touched again). */
+    remove(id: string): void;
+    readonly items: ReadonlyMap<string, LayoutItem>;
+    /** Run `task` on every frame, before the items step; returns how to stop it. */
+    task(task: LayoutTask): () => void;
+    /** Call `listener` on every frame, after the items have stepped and been drawn; returns how to stop it. */
+    onFrame(listener: (frame: FrameInfo) => void): () => void;
+    /** Call `listener` each time the frames stop (nothing moves); returns how to stop it. */
+    onIdle(listener: () => void): () => void;
+    /** Make sure at least one more frame runs (a task has something to do). */
+    wake(): void;
+    /** Frames are running. */
+    readonly running: boolean;
+    /** Set the tempo for every item (and the ones added later). */
+    configure(config: {
+        readonly omega?: number;
+    }): void;
+    /** Resolves once nothing moves (at once if nothing does). */
+    idle(): Promise<void>;
+    /** Stop the frames and forget every item. */
+    dispose(): void;
+}
+/** Create the {@link LayoutMotion} for one surface. */
+declare function createLayoutMotion(options: LayoutMotionOptions): LayoutMotion;
+
+/**
+ * An item held by a pointer: the real item (no copy) follows the pointer 1:1 from where it was grabbed, at the size
+ * it was lifted at; its place stays reserved (that is the caller's layout). Then:
+ *
+ * - {@link HeldDrag.snapTo}: glide into a slot (a snap preview); `null` leaves the slot and glides back to the
+ *   pointer, following it as it moves ({@link HeldDrag.follow} once a frame), until it is under it again.
+ * - {@link HeldDrag.land}: let go into a slot: the landing settles from where it was let go (the release rect), never
+ *   from its old home. Snapped into that slot already, it simply finishes that glide.
+ * - {@link HeldDrag.cancel}: let go with no drop: it glides home from where it was let go.
+ * - {@link HeldDrag.preview}: the three drop previews, per frame: indicator and gap keep the item under the pointer
+ *   (gap with the caller's room open), snap glides it into the slot; leaving glides it back to the pointer.
+ * - {@link HeldDrag.resize}: the item takes a new size mid-drag (its content laid out anew by the caller): it settles
+ *   to it from where it is drawn, the size revealed (never stretched), and is held 1:1 again once there.
+ */
+interface HeldDrag {
+    /** Where the pointer is (null before the first move). */
+    readonly pointer: Point | null;
+    /** Where the pointer holds the item: the pointer less the grab offset, at the held size (lifted, or resized). */
+    readonly held: Rect | null;
+    /** The slot it sits in (a snap), or null. */
+    readonly snapped: Rect | null;
+    /** It left a slot (or took a new size) and is gliding back to the pointer. */
+    readonly returning: boolean;
+    /** The pointer moved: held 1:1 (unless it sits in a slot or is on its way back). */
+    move(pointer: Point): void;
+    /**
+     * Into `slot` (a glide from where it is drawn; the same slot again does nothing), or out of the slot it sits in
+     * (`null`: back to the pointer). Returns what changed: `"snapped"`, `"left"`, or null.
+     */
+    snapTo(slot: Rect | null): "snapped" | "left" | null;
+    /** Once a frame: on its way back, retarget to the pointer; true on the frame it is under the pointer again. */
+    follow(): boolean;
+    /**
+     * Once a frame, a drop preview's part for the item (`plan`: `@n-uf/motion/drag`'s `previewPlan`, or any
+     * `{ snapItem }`): with `snapItem` it glides into `slot` (snap); else it stays under the pointer, or glides back to
+     * it from a slot it left (indicator, gap). The room, if the plan makes any, is the caller's layout. In place of
+     * {@link HeldDrag.snapTo} and {@link HeldDrag.follow}; returns what changed.
+     */
+    preview(plan: {
+        readonly snapItem: boolean;
+    }, slot: Rect | null): "snapped" | "left" | null;
+    /**
+     * Hold it at `size` from now on (the caller has laid its content out for that size). The grab point keeps its share
+     * of the item, so the pointer stays on the same spot of it; the item settles from where it is drawn to its new held
+     * rect (its size revealed, never stretched), then is held 1:1 again ({@link HeldDrag.follow} once a frame). In a
+     * slot it stays there, taking the new size when it leaves. The same size again does nothing; returns true on a
+     * change.
+     */
+    resize(size: {
+        readonly width: number;
+        readonly height: number;
+    }): boolean;
+    /** Let go into `slot`: returns the release rect, where the landing starts. */
+    land(slot: Rect): Rect;
+    /** Let go with no drop: glides `home` from the release rect, which it returns. */
+    cancel(home: Rect): Rect;
+}
+/** Hold `item` from the pointer at `grab` (the pointer's offset from its top-left corner), at its drawn size now. */
+declare function holdItem(item: LayoutItem, grab: Point): HeldDrag;
+
+/** A rect as a DOM rect reports it (`getBoundingClientRect()`): left, top, width, height. */
+interface RectLike {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** Anything that can say where it is drawn: a DOM node, or a test's stand-in. */
+interface Measurable {
+    getBoundingClientRect(): RectLike;
+}
+/** A {@link RectLike} as a {@link Rect}. */
+declare const rectOf: (r: RectLike) => Rect;
+/** One member of a {@link flip}: an item, the node it draws, and where it goes once the DOM has changed. */
+interface FlipEntry {
+    readonly item: LayoutItem;
+    readonly node: Measurable;
+    /**
+     * Once the DOM has changed: the old rect (as measured before, in page coordinates) in the item's own coordinates
+     * now, and its new place there.
+     */
+    readonly place: (before: Rect) => {
+        readonly from: Rect;
+        readonly to: Rect;
+    };
+}
+/**
+ * FLIP for DOM groups, on settle: record where each node is drawn (first), change the DOM (`change`: move nodes to
+ * other parents, reorder them), then each item is drawn at its old rect and settles to its new place (last, invert,
+ * play). No transform tween: a settle from the rect it was drawn at, so it never jumps or overshoots, and its size
+ * changes through reveal.
+ */
+declare function flip(entries: readonly FlipEntry[], change: () => void): void;
+
+/**
+ * The style properties the layout motion writes, as strings (a DOM node's `style` has them all). Structural: the
+ * library needs no DOM types.
+ */
+interface StyleLike {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    transform: string;
+    opacity: string;
+    clipPath: string;
+    visibility: string;
+}
+/** Something with a writable {@link StyleLike} `style`: a DOM node. */
+interface Styled {
+    readonly style: StyleLike;
+}
+/**
+ * The nodes of a drawn box: `node` is laid out at the box and moved to the drawn rect; `frame` (background, border,
+ * shadow) is drawn at the drawn size; `content` is clipped to it. With no `frame` and `content`, `node` itself is
+ * clipped (its content laid out at the box, never stretched).
+ */
+interface BoxNodes {
+    readonly node: Styled;
+    readonly frame?: Styled;
+    readonly content?: Styled;
+}
+/** Lay `node` out at `box`: its position and size, in its offset parent's coordinates. */
+declare function layOutBox(node: Styled, box: Rect): void;
+/**
+ * Draw one frame of a box laid out by {@link layOutBox}: one transform (the move to the drawn rect, and the uniform
+ * appearance about its centre), the frame at the drawn size, the content clipped (reveal); hidden when gone.
+ */
+declare function drawBox(nodes: BoxNodes, frame: DrawFrame): void;
+/** A {@link Drawable} for DOM nodes: {@link layOutBox} on a new box, {@link drawBox} on every frame. */
+declare function domDrawable(nodes: BoxNodes): Drawable;
+
+export { type BoxNodes, type DrawFrame, type Drawable, type FlipEntry, type HeldDrag, type LayoutItem, type LayoutMotion, type LayoutMotionOptions, type LayoutTask, type Measurable, type RectLike, type StyleLike, type Styled, createLayoutMotion, domDrawable, drawBox, flip, holdItem, layOutBox, rectOf };