@n-uf/motion 26.11.3 → 26.11.4

package/dist/layout.js

@@ -0,0 +1,312 @@
+import {
+  SETTLE_TEMPO,
+  createSettle,
+  popIn,
+  reveal
+} from "./chunk-WQQ2E25M.js";
+
+// src/layout/motion.ts
+var same = (a, b) => Math.abs(a.x - b.x) < 0.01 && Math.abs(a.y - b.y) < 0.01 && Math.abs(a.width - b.width) < 0.01 && Math.abs(a.height - b.height) < 0.01;
+var copy = (r) => ({ x: r.x, y: r.y, width: r.width, height: r.height });
+function createLayoutMotion(options) {
+  const { loop } = options;
+  const phase = options.phase ?? "layout";
+  const popFrom = options.popFrom ?? 0.87;
+  let omega = options.omega ?? SETTLE_TEMPO.default;
+  const items = /* @__PURE__ */ new Map();
+  const steps = /* @__PURE__ */ new Map();
+  const tasks = /* @__PURE__ */ new Set();
+  const frames = /* @__PURE__ */ new Set();
+  const idles = /* @__PURE__ */ new Set();
+  const tempos = /* @__PURE__ */ new Set();
+  const removers = /* @__PURE__ */ new Map();
+  let waiters = [];
+  let stop = null;
+  let woken = false;
+  const wake = () => {
+    woken = true;
+    if (stop) return;
+    stop = loop.repeat(phase, tick);
+  };
+  function tick(frame) {
+    let moving = woken;
+    woken = false;
+    for (const task of [...tasks]) if (task(frame)) moving = true;
+    for (const step of [...steps.values()]) if (step(frame.delta)) moving = true;
+    for (const listener of [...frames]) listener(frame);
+    if (moving || woken) return true;
+    stop = null;
+    const resolve = waiters;
+    waiters = [];
+    for (const r of resolve) r();
+    for (const listener of [...idles]) listener();
+    return false;
+  }
+  function add(id, drawable, at, opts = {}) {
+    if (items.has(id)) throw new Error(`layout motion: item "${id}" is already added (remove it first)`);
+    const rect = createSettle(copy(at), { omega });
+    const pop = createSettle(opts.shown === false ? 0 : 1, { omega, restDelta: 1e-3 });
+    let box = copy(at);
+    const frameOf = () => {
+      const drawn = rect.value;
+      return { drawn, box, reveal: reveal(drawn, box), pop: popIn(pop.value, popFrom), shown: pop.value, gone: pop.settled && pop.value === 0 };
+    };
+    const draw = () => drawable.draw(frameOf());
+    const layOut = (to) => {
+      box = copy(to);
+      drawable.layOut(box);
+    };
+    const tempo = () => {
+      rect.configure({ omega });
+      pop.configure({ omega });
+    };
+    const item = {
+      id,
+      get drawn() {
+        return rect.value;
+      },
+      get target() {
+        return rect.target;
+      },
+      get box() {
+        return box;
+      },
+      get settled() {
+        return rect.settled;
+      },
+      get shown() {
+        return pop.value;
+      },
+      get showing() {
+        return pop.target === 1;
+      },
+      get shownSettled() {
+        return pop.settled;
+      },
+      moveTo(to) {
+        if (same(box, to) && same(rect.target, to)) return;
+        layOut(to);
+        draw();
+        if (same(rect.target, to)) return;
+        rect.setTarget(copy(to));
+        wake();
+      },
+      jumpTo(to) {
+        layOut(to);
+        rect.jumpTo(copy(to));
+        draw();
+      },
+      glideFrom(from, to) {
+        rect.jumpTo(copy(from));
+        layOut(to);
+        draw();
+        rect.setTarget(copy(to));
+        wake();
+      },
+      hold(r) {
+        rect.hold(copy(r));
+        draw();
+      },
+      show(on, o = {}) {
+        const want = on ? 1 : 0;
+        if (o.now) pop.jumpTo(want);
+        else if (pop.target !== want) {
+          pop.setTarget(want);
+          wake();
+        }
+        draw();
+      },
+      redraw: draw
+    };
+    drawable.layOut(box);
+    draw();
+    items.set(id, item);
+    tempos.add(tempo);
+    steps.set(id, (dt) => {
+      const a = rect.step(dt);
+      const b = pop.step(dt);
+      draw();
+      return a || b;
+    });
+    removers.set(id, () => tempos.delete(tempo));
+    return item;
+  }
+  return {
+    add,
+    get: (id) => items.get(id),
+    remove(id) {
+      items.delete(id);
+      steps.delete(id);
+      removers.get(id)?.();
+      removers.delete(id);
+    },
+    items,
+    task(task) {
+      tasks.add(task);
+      wake();
+      return () => tasks.delete(task);
+    },
+    onFrame(listener) {
+      frames.add(listener);
+      return () => frames.delete(listener);
+    },
+    onIdle(listener) {
+      idles.add(listener);
+      return () => idles.delete(listener);
+    },
+    wake,
+    get running() {
+      return stop !== null;
+    },
+    configure(config) {
+      if (config.omega !== void 0) omega = config.omega;
+      for (const t of tempos) t();
+    },
+    idle: () => stop ? new Promise((r) => waiters.push(r)) : Promise.resolve(),
+    dispose() {
+      stop?.();
+      stop = null;
+      items.clear();
+      steps.clear();
+      tasks.clear();
+      frames.clear();
+      idles.clear();
+      tempos.clear();
+      removers.clear();
+      const resolve = waiters;
+      waiters = [];
+      for (const r of resolve) r();
+    }
+  };
+}
+
+// src/layout/held.ts
+var CAUGHT = 0.5;
+function holdItem(item, grab) {
+  let size = { width: item.drawn.width, height: item.drawn.height };
+  let at = { x: grab.x, y: grab.y };
+  let pointer = null;
+  let snapped = null;
+  let returning = false;
+  const heldRect = () => pointer ? { x: pointer.x - at.x, y: pointer.y - at.y, width: size.width, height: size.height } : null;
+  const same2 = (a, b) => Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y), Math.abs(a.width - b.width), Math.abs(a.height - b.height)) < 0.01;
+  const snapTo = (slot) => {
+    if (slot) {
+      if (snapped && same2(snapped, slot)) return null;
+      snapped = { ...slot };
+      returning = false;
+      item.moveTo(slot);
+      return "snapped";
+    }
+    if (!snapped) return null;
+    snapped = null;
+    returning = true;
+    return "left";
+  };
+  const follow = () => {
+    const goal = heldRect();
+    if (!returning || !goal) return false;
+    item.moveTo(goal);
+    const d = item.drawn;
+    if (Math.max(Math.abs(d.x - goal.x), Math.abs(d.y - goal.y), Math.abs(d.width - goal.width), Math.abs(d.height - goal.height)) >= CAUGHT) return false;
+    returning = false;
+    item.hold(goal);
+    return true;
+  };
+  const letGo = (to) => {
+    const release = { ...item.drawn };
+    snapped = null;
+    returning = false;
+    item.moveTo(to);
+    return release;
+  };
+  return {
+    get pointer() {
+      return pointer;
+    },
+    get held() {
+      return heldRect();
+    },
+    get snapped() {
+      return snapped;
+    },
+    get returning() {
+      return returning;
+    },
+    move(p) {
+      pointer = { x: p.x, y: p.y };
+      if (snapped || returning) return;
+      item.hold(heldRect());
+    },
+    snapTo,
+    follow,
+    preview(plan, slot) {
+      const change = snapTo(plan.snapItem && slot ? slot : null);
+      follow();
+      return change;
+    },
+    resize(next) {
+      if (Math.abs(next.width - size.width) < 0.01 && Math.abs(next.height - size.height) < 0.01) return false;
+      at = { x: size.width ? at.x / size.width * next.width : 0, y: size.height ? at.y / size.height * next.height : 0 };
+      size = { width: next.width, height: next.height };
+      if (!snapped && pointer) {
+        returning = true;
+        follow();
+      }
+      return true;
+    },
+    land: letGo,
+    cancel: letGo
+  };
+}
+
+// src/layout/flip.ts
+var rectOf = (r) => ({ x: r.left, y: r.top, width: r.width, height: r.height });
+function flip(entries, change) {
+  const before = entries.map((e) => rectOf(e.node.getBoundingClientRect()));
+  change();
+  entries.forEach((e, i) => {
+    const { from, to } = e.place(before[i]);
+    e.item.glideFrom(from, to);
+  });
+}
+
+// src/layout/dom.ts
+function layOutBox(node, box) {
+  const s = node.style;
+  s.left = `${box.x}px`;
+  s.top = `${box.y}px`;
+  s.width = `${box.width}px`;
+  s.height = `${box.height}px`;
+}
+function drawBox(nodes, frame) {
+  const { reveal: r, pop } = frame;
+  const cx = frame.drawn.width / 2;
+  const cy = frame.drawn.height / 2;
+  const s = nodes.node.style;
+  s.transform = pop.scale === 1 ? `translate(${r.dx}px, ${r.dy}px)` : `translate(${r.dx}px, ${r.dy}px) translate(${cx}px, ${cy}px) scale(${pop.scale}) translate(${-cx}px, ${-cy}px)`;
+  s.opacity = pop.opacity === 1 ? "" : String(pop.opacity);
+  if (nodes.frame) {
+    nodes.frame.style.width = `${r.width}px`;
+    nodes.frame.style.height = `${r.height}px`;
+  }
+  const clipped = nodes.content ?? (nodes.frame ? null : nodes.node);
+  if (clipped) clipped.style.clipPath = r.clipRight || r.clipBottom ? `inset(0 ${r.clipRight}px ${r.clipBottom}px 0)` : "";
+  s.visibility = frame.gone ? "hidden" : "";
+}
+function domDrawable(nodes) {
+  return {
+    layOut: (box) => layOutBox(nodes.node, box),
+    draw: (frame) => drawBox(nodes, frame)
+  };
+}
+export {
+  createLayoutMotion,
+  domDrawable,
+  drawBox,
+  flip,
+  holdItem,
+  layOutBox,
+  rectOf
+};
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/motion.ts","../src/layout/held.ts","../src/layout/flip.ts","../src/layout/dom.ts"],"sourcesContent":["import type { FrameInfo, FrameLoop, Phase } from \"../clock/frame-loop\";\nimport type { Rect } from \"../shapes\";\nimport { popIn, reveal, type PopIn, type RevealFrame } from \"../values/reveal\";\nimport { createSettle, SETTLE_TEMPO, type Settle } from \"../values/settle\";\n\n/**\n * What a {@link Drawable} draws on a frame: where the item is drawn, the box its content is laid out in, how to draw\n * the one at the other without stretching ({@link reveal}), and its appearance ({@link popIn}).\n */\nexport interface DrawFrame {\n  /** Where the item is drawn this frame (its frame: background, border, shadow). */\n  readonly drawn: Rect;\n  /** The box its content is laid out in: where it is heading, or (held) where it was laid out last. */\n  readonly box: Rect;\n  /** How to draw `box`'s content at `drawn`: a move, the frame at the drawn size, the content clipped. */\n  readonly reveal: RevealFrame;\n  /** Its uniform appearance: scale about its centre and opacity. */\n  readonly pop: PopIn;\n  /** How shown it is, 0 (gone) to 1. */\n  readonly shown: number;\n  /** All the way gone: hidden and at rest (out of sight and out of the way of the pointer). */\n  readonly gone: boolean;\n}\n\n/**\n * How an item reaches the screen. The layout motion never measures or touches anything itself: it lays an item's\n * content out once per new box and draws it once per frame through this. {@link domDrawable} writes an element's\n * style; a canvas or a test can draw anything else.\n */\nexport interface Drawable {\n  /** Lay the content out in `box` (its position and size): called once per new box, never per frame. */\n  layOut(box: Rect): void;\n  /** Draw the item for this frame. */\n  draw(frame: DrawFrame): void;\n}\n\n/**\n * One item the layout motion moves: give it a new place and it settles there from wherever it is drawn.\n *\n * - {@link LayoutItem.moveTo}: a settle to the new place, retargeted from the drawn rect (no jump, no overshoot);\n *   the content is laid out at the new box at once and the item redrawn at once, so no frame shows the old offset\n *   from the new box.\n * - A size change is revealed: the content is laid out at the target size and the frame clipped, never scaled.\n * - {@link LayoutItem.show}: appear or disappear with a uniform-scale fade.\n */\nexport interface LayoutItem {\n  readonly id: string;\n  /** Where it is drawn now. */\n  readonly drawn: Rect;\n  /** Where it is heading (its settle's target). */\n  readonly target: Rect;\n  /** The box its content is laid out in. */\n  readonly box: Rect;\n  /** At rest on its target. */\n  readonly settled: boolean;\n  /** How shown it is, 0 to 1, and whether it is heading for shown. */\n  readonly shown: number;\n  readonly showing: boolean;\n  /** Its appearance is at rest (fully shown, or gone). */\n  readonly shownSettled: boolean;\n  /** Settle to `to` from where it is drawn; lays the content out at `to` and redraws at once. */\n  moveTo(to: Rect): void;\n  /** Be at `to` now, at rest: no glide. */\n  jumpTo(to: Rect): void;\n  /** Drawn at `from` now, then settle to `to` (a FLIP's invert and play: `from` in the item's own coordinates). */\n  glideFrom(from: Rect, to: Rect): void;\n  /** Exactly at `r`, at rest (what a pointer holds); the content stays laid out in its box, moved with it. */\n  hold(r: Rect): void;\n  /** Appear (true) or disappear (false) with a uniform-scale fade; `now`: without the fade. */\n  show(on: boolean, options?: { readonly now?: boolean }): void;\n  /** Draw it again now (after its drawable's element was laid out anew from outside). */\n  redraw(): void;\n}\n\n/** A task the layout motion runs on every frame before it steps the items; true keeps the frames coming. */\nexport type LayoutTask = (frame: FrameInfo) => boolean | void;\n\nexport interface LayoutMotionOptions {\n  /** The frame loop every item steps on (one loop for all of them). */\n  readonly loop: FrameLoop;\n  /** The settle tempo, per second ({@link SETTLE_TEMPO}); default `SETTLE_TEMPO.default`. */\n  readonly omega?: number;\n  /** The frame phase the items step and draw in; default `\"layout\"`. */\n  readonly phase?: Phase;\n  /** Where an appearing item grows from, as a share of its size ({@link popIn}'s `from`); default 0.87. */\n  readonly popFrom?: number;\n}\n\n/**\n * Layout motion: items with an id and a target rect, each settled to its place on one shared frame loop.\n *\n * Give an item a new place ({@link LayoutItem.moveTo}) and it glides there from wherever it is drawn: the window\n * motion rules of `values/` (settle, reveal, popIn) applied to every item at once. The loop runs only while\n * something moves, or a task asks for frames, and stops by itself.\n *\n * It only animates the rects it is given: which items move where, and when, is the caller's layout.\n */\nexport interface LayoutMotion {\n  /** Add an item drawn by `drawable`, at `at`, shown (or gone: `{ shown: false }`). Its content is laid out at once. */\n  add(id: string, drawable: Drawable, at: Rect, options?: { readonly shown?: boolean }): LayoutItem;\n  get(id: string): LayoutItem | undefined;\n  /** Stop moving an item (its drawable is not touched again). */\n  remove(id: string): void;\n  readonly items: ReadonlyMap<string, LayoutItem>;\n  /** Run `task` on every frame, before the items step; returns how to stop it. */\n  task(task: LayoutTask): () => void;\n  /** Call `listener` on every frame, after the items have stepped and been drawn; returns how to stop it. */\n  onFrame(listener: (frame: FrameInfo) => void): () => void;\n  /** Call `listener` each time the frames stop (nothing moves); returns how to stop it. */\n  onIdle(listener: () => void): () => void;\n  /** Make sure at least one more frame runs (a task has something to do). */\n  wake(): void;\n  /** Frames are running. */\n  readonly running: boolean;\n  /** Set the tempo for every item (and the ones added later). */\n  configure(config: { readonly omega?: number }): void;\n  /** Resolves once nothing moves (at once if nothing does). */\n  idle(): Promise<void>;\n  /** Stop the frames and forget every item. */\n  dispose(): void;\n}\n\n/** Two rects the same within a hundredth of a pixel. */\nconst same = (a: Rect, b: Rect): boolean =>\n  Math.abs(a.x - b.x) < 0.01 && Math.abs(a.y - b.y) < 0.01 && Math.abs(a.width - b.width) < 0.01 && Math.abs(a.height - b.height) < 0.01;\nconst copy = (r: Rect): Rect => ({ x: r.x, y: r.y, width: r.width, height: r.height });\n\n/** Create the {@link LayoutMotion} for one surface. */\nexport function createLayoutMotion(options: LayoutMotionOptions): LayoutMotion {\n  const { loop } = options;\n  const phase = options.phase ?? \"layout\";\n  const popFrom = options.popFrom ?? 0.87;\n  let omega = options.omega ?? SETTLE_TEMPO.default;\n  const items = new Map<string, LayoutItem>();\n  const steps = new Map<string, (dt: number) => boolean>();\n  const tasks = new Set<LayoutTask>();\n  const frames = new Set<(frame: FrameInfo) => void>();\n  const idles = new Set<() => void>();\n  const tempos = new Set<() => void>();\n  /** What removing an item undoes besides its entry (its tempo hook). */\n  const removers = new Map<string, () => void>();\n  let waiters: (() => void)[] = [];\n  let stop: (() => void) | null = null;\n  let woken = false;\n\n  const wake = (): void => {\n    woken = true;\n    if (stop) return;\n    stop = loop.repeat(phase, tick);\n  };\n\n  function tick(frame: FrameInfo): boolean {\n    let moving = woken;\n    woken = false;\n    for (const task of [...tasks]) if (task(frame)) moving = true;\n    for (const step of [...steps.values()]) if (step(frame.delta)) moving = true;\n    for (const listener of [...frames]) listener(frame);\n    if (moving || woken) return true;\n    stop = null;\n    const resolve = waiters;\n    waiters = [];\n    for (const r of resolve) r();\n    for (const listener of [...idles]) listener();\n    return false;\n  }\n\n  function add(id: string, drawable: Drawable, at: Rect, opts: { readonly shown?: boolean } = {}): LayoutItem {\n    if (items.has(id)) throw new Error(`layout motion: item \"${id}\" is already added (remove it first)`);\n    const rect: Settle<Rect> = createSettle<Rect>(copy(at), { omega });\n    // A number from 0 to 1: rest within a thousandth, not the default tenth (tuned for pixels).\n    const pop: Settle<number> = createSettle(opts.shown === false ? 0 : 1, { omega, restDelta: 0.001 });\n    let box = copy(at);\n    const frameOf = (): DrawFrame => {\n      const drawn = rect.value;\n      return { drawn, box, reveal: reveal(drawn, box), pop: popIn(pop.value, popFrom), shown: pop.value, gone: pop.settled && pop.value === 0 };\n    };\n    const draw = (): void => drawable.draw(frameOf());\n    const layOut = (to: Rect): void => {\n      box = copy(to);\n      drawable.layOut(box);\n    };\n    const tempo = (): void => {\n      rect.configure({ omega });\n      pop.configure({ omega });\n    };\n    const item: LayoutItem = {\n      id,\n      get drawn() {\n        return rect.value;\n      },\n      get target() {\n        return rect.target;\n      },\n      get box() {\n        return box;\n      },\n      get settled() {\n        return rect.settled;\n      },\n      get shown() {\n        return pop.value;\n      },\n      get showing() {\n        return pop.target === 1;\n      },\n      get shownSettled() {\n        return pop.settled;\n      },\n      moveTo(to) {\n        if (same(box, to) && same(rect.target, to)) return;\n        layOut(to);\n        // Laid out in the new box now: draw it at once at the drawn rect, else until the next frame it would show\n        // the old offset from the new box (a dropped item would flash a frame away from where it was let go).\n        draw();\n        if (same(rect.target, to)) return;\n        rect.setTarget(copy(to));\n        wake();\n      },\n      jumpTo(to) {\n        layOut(to);\n        rect.jumpTo(copy(to));\n        draw();\n      },\n      glideFrom(from, to) {\n        rect.jumpTo(copy(from));\n        layOut(to);\n        draw();\n        rect.setTarget(copy(to));\n        wake();\n      },\n      hold(r) {\n        rect.hold(copy(r));\n        draw();\n      },\n      show(on, o = {}) {\n        const want = on ? 1 : 0;\n        if (o.now) pop.jumpTo(want);\n        else if (pop.target !== want) {\n          pop.setTarget(want);\n          wake();\n        }\n        draw();\n      },\n      redraw: draw,\n    };\n    drawable.layOut(box);\n    draw();\n    items.set(id, item);\n    tempos.add(tempo);\n    steps.set(id, (dt) => {\n      const a = rect.step(dt);\n      const b = pop.step(dt);\n      draw();\n      return a || b;\n    });\n    removers.set(id, () => tempos.delete(tempo));\n    return item;\n  }\n\n  return {\n    add,\n    get: (id) => items.get(id),\n    remove(id) {\n      items.delete(id);\n      steps.delete(id);\n      removers.get(id)?.();\n      removers.delete(id);\n    },\n    items,\n    task(task) {\n      tasks.add(task);\n      wake();\n      return () => tasks.delete(task);\n    },\n    onFrame(listener) {\n      frames.add(listener);\n      return () => frames.delete(listener);\n    },\n    onIdle(listener) {\n      idles.add(listener);\n      return () => idles.delete(listener);\n    },\n    wake,\n    get running() {\n      return stop !== null;\n    },\n    configure(config) {\n      if (config.omega !== undefined) omega = config.omega;\n      for (const t of tempos) t();\n    },\n    idle: () => (stop ? new Promise<void>((r) => waiters.push(r)) : Promise.resolve()),\n    dispose() {\n      stop?.();\n      stop = null;\n      items.clear();\n      steps.clear();\n      tasks.clear();\n      frames.clear();\n      idles.clear();\n      tempos.clear();\n      removers.clear();\n      const resolve = waiters;\n      waiters = [];\n      for (const r of resolve) r();\n    },\n  };\n}\n","import type { Point, Rect } from \"../shapes\";\nimport type { LayoutItem } from \"./motion\";\n\n/**\n * An item held by a pointer: the real item (no copy) follows the pointer 1:1 from where it was grabbed, at the size\n * it was lifted at; its place stays reserved (that is the caller's layout). Then:\n *\n * - {@link HeldDrag.snapTo}: glide into a slot (a snap preview); `null` leaves the slot and glides back to the\n *   pointer, following it as it moves ({@link HeldDrag.follow} once a frame), until it is under it again.\n * - {@link HeldDrag.land}: let go into a slot: the landing settles from where it was let go (the release rect), never\n *   from its old home. Snapped into that slot already, it simply finishes that glide.\n * - {@link HeldDrag.cancel}: let go with no drop: it glides home from where it was let go.\n * - {@link HeldDrag.preview}: the three drop previews, per frame: indicator and gap keep the item under the pointer\n *   (gap with the caller's room open), snap glides it into the slot; leaving glides it back to the pointer.\n * - {@link HeldDrag.resize}: the item takes a new size mid-drag (its content laid out anew by the caller): it settles\n *   to it from where it is drawn, the size revealed (never stretched), and is held 1:1 again once there.\n */\nexport interface HeldDrag {\n  /** Where the pointer is (null before the first move). */\n  readonly pointer: Point | null;\n  /** Where the pointer holds the item: the pointer less the grab offset, at the held size (lifted, or resized). */\n  readonly held: Rect | null;\n  /** The slot it sits in (a snap), or null. */\n  readonly snapped: Rect | null;\n  /** It left a slot (or took a new size) and is gliding back to the pointer. */\n  readonly returning: boolean;\n  /** The pointer moved: held 1:1 (unless it sits in a slot or is on its way back). */\n  move(pointer: Point): void;\n  /**\n   * Into `slot` (a glide from where it is drawn; the same slot again does nothing), or out of the slot it sits in\n   * (`null`: back to the pointer). Returns what changed: `\"snapped\"`, `\"left\"`, or null.\n   */\n  snapTo(slot: Rect | null): \"snapped\" | \"left\" | null;\n  /** Once a frame: on its way back, retarget to the pointer; true on the frame it is under the pointer again. */\n  follow(): boolean;\n  /**\n   * Once a frame, a drop preview's part for the item (`plan`: `@n-uf/motion/drag`'s `previewPlan`, or any\n   * `{ snapItem }`): with `snapItem` it glides into `slot` (snap); else it stays under the pointer, or glides back to\n   * it from a slot it left (indicator, gap). The room, if the plan makes any, is the caller's layout. In place of\n   * {@link HeldDrag.snapTo} and {@link HeldDrag.follow}; returns what changed.\n   */\n  preview(plan: { readonly snapItem: boolean }, slot: Rect | null): \"snapped\" | \"left\" | null;\n  /**\n   * Hold it at `size` from now on (the caller has laid its content out for that size). The grab point keeps its share\n   * 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\n   * rect (its size revealed, never stretched), then is held 1:1 again ({@link HeldDrag.follow} once a frame). In a\n   * slot it stays there, taking the new size when it leaves. The same size again does nothing; returns true on a\n   * change.\n   */\n  resize(size: { readonly width: number; readonly height: number }): boolean;\n  /** Let go into `slot`: returns the release rect, where the landing starts. */\n  land(slot: Rect): Rect;\n  /** Let go with no drop: glides `home` from the release rect, which it returns. */\n  cancel(home: Rect): Rect;\n}\n\n/** How close (px, every component) the way back has to come to count as under the pointer again. */\nconst CAUGHT = 0.5;\n\n/** Hold `item` from the pointer at `grab` (the pointer's offset from its top-left corner), at its drawn size now. */\nexport function holdItem(item: LayoutItem, grab: Point): HeldDrag {\n  let size = { width: item.drawn.width, height: item.drawn.height };\n  let at = { x: grab.x, y: grab.y };\n  let pointer: Point | null = null;\n  let snapped: Rect | null = null;\n  let returning = false;\n  const heldRect = (): Rect | null => (pointer ? { x: pointer.x - at.x, y: pointer.y - at.y, width: size.width, height: size.height } : null);\n  const same = (a: Rect, b: Rect): boolean => Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y), Math.abs(a.width - b.width), Math.abs(a.height - b.height)) < 0.01;\n  const snapTo = (slot: Rect | null): \"snapped\" | \"left\" | null => {\n    if (slot) {\n      if (snapped && same(snapped, slot)) return null;\n      snapped = { ...slot };\n      returning = false;\n      item.moveTo(slot);\n      return \"snapped\";\n    }\n    if (!snapped) return null;\n    snapped = null;\n    returning = true;\n    return \"left\";\n  };\n  const follow = (): boolean => {\n    const goal = heldRect();\n    if (!returning || !goal) return false;\n    item.moveTo(goal);\n    const d = item.drawn;\n    if (Math.max(Math.abs(d.x - goal.x), Math.abs(d.y - goal.y), Math.abs(d.width - goal.width), Math.abs(d.height - goal.height)) >= CAUGHT) return false;\n    returning = false;\n    item.hold(goal);\n    return true;\n  };\n  const letGo = (to: Rect): Rect => {\n    const release = { ...item.drawn };\n    snapped = null;\n    returning = false;\n    item.moveTo(to);\n    return release;\n  };\n  return {\n    get pointer() {\n      return pointer;\n    },\n    get held() {\n      return heldRect();\n    },\n    get snapped() {\n      return snapped;\n    },\n    get returning() {\n      return returning;\n    },\n    move(p) {\n      pointer = { x: p.x, y: p.y };\n      if (snapped || returning) return;\n      item.hold(heldRect()!);\n    },\n    snapTo,\n    follow,\n    preview(plan, slot) {\n      const change = snapTo(plan.snapItem && slot ? slot : null);\n      follow();\n      return change;\n    },\n    resize(next) {\n      if (Math.abs(next.width - size.width) < 0.01 && Math.abs(next.height - size.height) < 0.01) return false;\n      at = { x: size.width ? (at.x / size.width) * next.width : 0, y: size.height ? (at.y / size.height) * next.height : 0 };\n      size = { width: next.width, height: next.height };\n      if (!snapped && pointer) {\n        returning = true;\n        follow();\n      }\n      return true;\n    },\n    land: letGo,\n    cancel: letGo,\n  };\n}\n","import type { Rect } from \"../shapes\";\nimport type { LayoutItem } from \"./motion\";\n\n/** A rect as a DOM rect reports it (`getBoundingClientRect()`): left, top, width, height. */\nexport interface RectLike {\n  readonly left: number;\n  readonly top: number;\n  readonly width: number;\n  readonly height: number;\n}\n\n/** Anything that can say where it is drawn: a DOM node, or a test's stand-in. */\nexport interface Measurable {\n  getBoundingClientRect(): RectLike;\n}\n\n/** A {@link RectLike} as a {@link Rect}. */\nexport const rectOf = (r: RectLike): Rect => ({ x: r.left, y: r.top, width: r.width, height: r.height });\n\n/** One member of a {@link flip}: an item, the node it draws, and where it goes once the DOM has changed. */\nexport interface FlipEntry {\n  readonly item: LayoutItem;\n  readonly node: Measurable;\n  /**\n   * Once the DOM has changed: the old rect (as measured before, in page coordinates) in the item's own coordinates\n   * now, and its new place there.\n   */\n  readonly place: (before: Rect) => { readonly from: Rect; readonly to: Rect };\n}\n\n/**\n * FLIP for DOM groups, on settle: record where each node is drawn (first), change the DOM (`change`: move nodes to\n * other parents, reorder them), then each item is drawn at its old rect and settles to its new place (last, invert,\n * play). No transform tween: a settle from the rect it was drawn at, so it never jumps or overshoots, and its size\n * changes through reveal.\n */\nexport function flip(entries: readonly FlipEntry[], change: () => void): void {\n  const before = entries.map((e) => rectOf(e.node.getBoundingClientRect()));\n  change();\n  entries.forEach((e, i) => {\n    const { from, to } = e.place(before[i]!);\n    e.item.glideFrom(from, to);\n  });\n}\n","import type { Rect } from \"../shapes\";\nimport type { Drawable, DrawFrame } from \"./motion\";\n\n/**\n * The style properties the layout motion writes, as strings (a DOM node's `style` has them all). Structural: the\n * library needs no DOM types.\n */\nexport interface StyleLike {\n  left: string;\n  top: string;\n  width: string;\n  height: string;\n  transform: string;\n  opacity: string;\n  clipPath: string;\n  visibility: string;\n}\n\n/** Something with a writable {@link StyleLike} `style`: a DOM node. */\nexport interface Styled {\n  readonly style: StyleLike;\n}\n\n/**\n * The nodes of a drawn box: `node` is laid out at the box and moved to the drawn rect; `frame` (background, border,\n * shadow) is drawn at the drawn size; `content` is clipped to it. With no `frame` and `content`, `node` itself is\n * clipped (its content laid out at the box, never stretched).\n */\nexport interface BoxNodes {\n  readonly node: Styled;\n  readonly frame?: Styled;\n  readonly content?: Styled;\n}\n\n/** Lay `node` out at `box`: its position and size, in its offset parent's coordinates. */\nexport function layOutBox(node: Styled, box: Rect): void {\n  const s = node.style;\n  s.left = `${box.x}px`;\n  s.top = `${box.y}px`;\n  s.width = `${box.width}px`;\n  s.height = `${box.height}px`;\n}\n\n/**\n * Draw one frame of a box laid out by {@link layOutBox}: one transform (the move to the drawn rect, and the uniform\n * appearance about its centre), the frame at the drawn size, the content clipped (reveal); hidden when gone.\n */\nexport function drawBox(nodes: BoxNodes, frame: DrawFrame): void {\n  const { reveal: r, pop } = frame;\n  const cx = frame.drawn.width / 2;\n  const cy = frame.drawn.height / 2;\n  const s = nodes.node.style;\n  s.transform =\n    pop.scale === 1 ? `translate(${r.dx}px, ${r.dy}px)` : `translate(${r.dx}px, ${r.dy}px) translate(${cx}px, ${cy}px) scale(${pop.scale}) translate(${-cx}px, ${-cy}px)`;\n  s.opacity = pop.opacity === 1 ? \"\" : String(pop.opacity);\n  if (nodes.frame) {\n    nodes.frame.style.width = `${r.width}px`;\n    nodes.frame.style.height = `${r.height}px`;\n  }\n  const clipped = nodes.content ?? (nodes.frame ? null : nodes.node);\n  if (clipped) clipped.style.clipPath = r.clipRight || r.clipBottom ? `inset(0 ${r.clipRight}px ${r.clipBottom}px 0)` : \"\";\n  // All the way gone: out of sight and out of the way of the pointer.\n  s.visibility = frame.gone ? \"hidden\" : \"\";\n}\n\n/** A {@link Drawable} for DOM nodes: {@link layOutBox} on a new box, {@link drawBox} on every frame. */\nexport function domDrawable(nodes: BoxNodes): Drawable {\n  return {\n    layOut: (box) => layOutBox(nodes.node, box),\n    draw: (frame) => drawBox(nodes, frame),\n  };\n}\n"],"mappings":"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","names":["same"]}

package/dist/reveal-my7U6UyE.d.ts

@@ -0,0 +1,51 @@
+import { R as Rect } from './shapes-EbQlwbCu.js';
+
+/**
+ * How to draw a window whose rect is gliding without stretching its content.
+ *
+ * The content is laid out once at the target size and never scaled. The
+ * window's element sits at its target in the layout; to draw it at the
+ * gliding rect:
+ *
+ * - move the element by (`dx`, `dy`), so its top-left corner is the drawn rect's;
+ * - draw the frame (background, border, shadow) at `width` × `height`: the drawn size;
+ * - clip the content by `clipRight` and `clipBottom` so it fits a frame
+ *   smaller than the target (CSS: `clip-path: inset(0 clipRight clipBottom 0)`).
+ *
+ * A window that shrinks shows a band of its own background closing in at the
+ * right and bottom; one that grows reveals content already laid out at its
+ * new size. Text is never stretched. One transform and one clip per frame, no
+ * layout per frame.
+ */
+interface RevealFrame {
+    /** Move the element (laid out at the target) right by this much. */
+    readonly dx: number;
+    /** Move the element (laid out at the target) down by this much. */
+    readonly dy: number;
+    /** The frame's width: the drawn rect's. */
+    readonly width: number;
+    /** The frame's height: the drawn rect's. */
+    readonly height: number;
+    /** Clip this much off the content's right edge (0 when the frame is at least as wide as the target). */
+    readonly clipRight: number;
+    /** Clip this much off the content's bottom edge (0 when the frame is at least as tall as the target). */
+    readonly clipBottom: number;
+}
+/** The {@link RevealFrame} for content laid out at `target` and drawn at `drawn`. */
+declare function reveal(drawn: Rect, target: Rect): RevealFrame;
+/** A uniform pop-in (or pop-out, run backwards): scale about the centre and opacity. */
+interface PopIn {
+    /** Scale about the window's centre: the same on both axes, so nothing is stretched. */
+    readonly scale: number;
+    readonly opacity: number;
+}
+/**
+ * Opening and closing: the window grows from `from` of its size to full, about
+ * its centre, while fading in. `progress` runs 0 to 1 (take it from a settle
+ * on a number with `{ restDelta: 0.001 }`, since the default 0.1 is tuned for
+ * pixels and would snap the last 10 %; or from a tween); closing runs it from
+ * 1 to 0. Hyprland's default is `popin 87%`.
+ */
+declare function popIn(progress: number, from?: number): PopIn;
+
+export { type PopIn as P, type RevealFrame as R, popIn as p, reveal as r };

package/dist/values.d.ts

@@ -1,4 +1,5 @@
-import { A as Animatable, W as Widen, R as Rect } from './shapes-EbQlwbCu.js';
+import { A as Animatable, W as Widen } from './shapes-EbQlwbCu.js';
+export { P as PopIn, R as RevealFrame, p as popIn, r as reveal } from './reveal-my7U6UyE.js';
 import { e as Phase, a as FrameLoop } from './frame-loop-C88dc9xw.js';
 import { ReadonlySignal } from './signals.js';
 import './port-CmlUctqx.js';
@@ -202,54 +203,6 @@ declare const SETTLE_DEFAULTS: {
  */
 declare function createSettle<T extends Animatable>(initial: T, config?: SettleConfig): Settle<Widen<T>>;
 
-/**
- * How to draw a window whose rect is gliding without stretching its content.
- *
- * The content is laid out once at the target size and never scaled. The
- * window's element sits at its target in the layout; to draw it at the
- * gliding rect:
- *
- * - move the element by (`dx`, `dy`), so its top-left corner is the drawn rect's;
- * - draw the frame (background, border, shadow) at `width` × `height`: the drawn size;
- * - clip the content by `clipRight` and `clipBottom` so it fits a frame
- *   smaller than the target (CSS: `clip-path: inset(0 clipRight clipBottom 0)`).
- *
- * A window that shrinks shows a band of its own background closing in at the
- * right and bottom; one that grows reveals content already laid out at its
- * new size. Text is never stretched. One transform and one clip per frame, no
- * layout per frame.
- */
-interface RevealFrame {
-    /** Move the element (laid out at the target) right by this much. */
-    readonly dx: number;
-    /** Move the element (laid out at the target) down by this much. */
-    readonly dy: number;
-    /** The frame's width: the drawn rect's. */
-    readonly width: number;
-    /** The frame's height: the drawn rect's. */
-    readonly height: number;
-    /** Clip this much off the content's right edge (0 when the frame is at least as wide as the target). */
-    readonly clipRight: number;
-    /** Clip this much off the content's bottom edge (0 when the frame is at least as tall as the target). */
-    readonly clipBottom: number;
-}
-/** The {@link RevealFrame} for content laid out at `target` and drawn at `drawn`. */
-declare function reveal(drawn: Rect, target: Rect): RevealFrame;
-/** A uniform pop-in (or pop-out, run backwards): scale about the centre and opacity. */
-interface PopIn {
-    /** Scale about the window's centre: the same on both axes, so nothing is stretched. */
-    readonly scale: number;
-    readonly opacity: number;
-}
-/**
- * Opening and closing: the window grows from `from` of its size to full, about
- * its centre, while fading in. `progress` runs 0 to 1 (take it from a settle
- * on a number with `{ restDelta: 0.001 }`, since the default 0.1 is tuned for
- * pixels and would snap the last 10 %; or from a tween); closing runs it from
- * 1 to 0. Hyprland's default is `popin 87%`.
- */
-declare function popIn(progress: number, from?: number): PopIn;
-
 /** Options of {@link motionValue}. */
 interface MotionOptions {
     /**
@@ -321,4 +274,4 @@ declare function settleValue<T extends Animatable>(loop: FrameLoop, initial: T,
 /** A tween-driven {@link MotionValue}: `createTween` plus `motionValue`. */
 declare function tweenValue<T extends Animatable>(loop: FrameLoop, initial: T, options?: TweenConfig & MotionOptions): MotionValue<Widen<T>, Tween<Widen<T>>>;
 
-export { type Animator, type AnimatorValue, type Easing, type MotionOptions, type MotionValue, type PopIn, type RevealFrame, SETTLE_DEFAULTS, SETTLE_TEMPO, SPRING_DEFAULTS, type SetOptions, type Settle, type SettleConfig, type Spring, type SpringConfig, type SpringParams, type SpringState, type Tween, type TweenConfig, createSettle, createSpring, createTween, cubicBezier, ease, easeIn, easeInOut, easeInOutCubic, easeOut, easeOutCubic, linear, motionValue, popIn, resolveSpring, reveal, settleValue, springStep, springValue, tweenValue };
+export { type Animator, type AnimatorValue, type Easing, type MotionOptions, type MotionValue, SETTLE_DEFAULTS, SETTLE_TEMPO, SPRING_DEFAULTS, type SetOptions, type Settle, type SettleConfig, type Spring, type SpringConfig, type SpringParams, type SpringState, type Tween, type TweenConfig, createSettle, createSpring, createTween, cubicBezier, ease, easeIn, easeInOut, easeInOutCubic, easeOut, easeOutCubic, linear, motionValue, resolveSpring, settleValue, springStep, springValue, tweenValue };

package/dist/values.js

@@ -1,8 +1,5 @@
 import {
-  SETTLE_DEFAULTS,
-  SETTLE_TEMPO,
   SPRING_DEFAULTS,
-  createSettle,
   createSpring,
   createTween,
   cubicBezier,
@@ -14,15 +11,20 @@ import {
   easeOutCubic,
   linear,
   motionValue,
-  popIn,
   resolveSpring,
-  reveal,
   settleValue,
   springStep,
   springValue,
   tweenValue
-} from "./chunk-6W5KW7XQ.js";
+} from "./chunk-CM6WVNDH.js";
 import "./chunk-OOKRBVMB.js";
+import {
+  SETTLE_DEFAULTS,
+  SETTLE_TEMPO,
+  createSettle,
+  popIn,
+  reveal
+} from "./chunk-WQQ2E25M.js";
 export {
   SETTLE_DEFAULTS,
   SETTLE_TEMPO,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n-uf/motion",
-  "version": "26.11.3",
+  "version": "26.11.4",
   "description": "One frame loop with an injected clock, fine-grained signals, springs and tweens, and a DOM-free gesture recogniser. No DOM, no framework.",
   "keywords": [
     "animation",
@@ -61,6 +61,14 @@
       "types": "./dist/testing.d.ts",
       "default": "./dist/testing.js"
     },
+    "./drag": {
+      "types": "./dist/drag.d.ts",
+      "default": "./dist/drag.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "default": "./dist/layout.js"
+    },
     "./browser": {
       "types": "./dist/browser.d.ts",
       "default": "./dist/browser.js"