@50arms/ui 0.0.0-stage → 35.1.0

package/dist/lib/dnd/session.js

@@ -0,0 +1,256 @@
+import { isLaneDrop as f } from "./cross-drop.js";
+import { measure as p, resolveTarget as a, sameTarget as c, remainingItems as d, isNoOp as v, containerAt as g } from "./geometry.js";
+function y(h, t) {
+  const e = h.getBoundingClientRect();
+  return { x: t.x - e.left, y: t.y - e.top };
+}
+const r = {
+  phase: "idle",
+  id: null,
+  from: null,
+  over: null,
+  mode: null,
+  point: null,
+  grab: null
+};
+class O {
+  state = r;
+  listeners = /* @__PURE__ */ new Set();
+  items = /* @__PURE__ */ new Map();
+  containers = /* @__PURE__ */ new Map();
+  groups = /* @__PURE__ */ new Map();
+  layout = null;
+  callbacks;
+  observers = /* @__PURE__ */ new Set();
+  constructor(t = {}) {
+    this.callbacks = t;
+  }
+  /**
+   * The OWNING consumer's callbacks — the one that renders the board and writes
+   * the reorder. Replaced rather than passed per-call because a React consumer
+   * re-creates its handlers on every render and the session must not be rebuilt;
+   * rebuilding it mid-gesture drops the drag.
+   */
+  setCallbacks(t) {
+    this.callbacks = t;
+  }
+  /**
+   * Register an ADDITIONAL listener. Returns its teardown.
+   *
+   * `setCallbacks` is a single slot owned by whoever renders the board, so a
+   * second interested party — the live-region announcer, an analytics hook, a
+   * test — could not be told anything without clobbering it. And `subscribe`
+   * is not a substitute: a drop and a cancel both end at the same idle state,
+   * so a state subscriber sees ONE identical transition for two outcomes that
+   * must be announced differently.
+   *
+   * That gap was not theoretical. The announcer worked around it by inferring
+   * the cause from whichever DOM event was mid-dispatch — about ninety lines of
+   * genuinely careful machinery, defeated once by the microtask checkpoint the
+   * HTML spec runs BETWEEN listeners of the same event, so that every cancel
+   * announced itself as a drop. Nothing that reads the session should have to
+   * guess what the session just did.
+   */
+  addObserver(t) {
+    return this.observers.add(t), () => {
+      this.observers.delete(t);
+    };
+  }
+  /**
+   * Owner first, then observers, in registration order.
+   *
+   * The owner goes first because it is the one that mutates the list, and an
+   * observer that reads the consumer's state — an announcer reporting "3 of 7"
+   * — must see the world after the write, not before.
+   */
+  fan(t, e) {
+    const i = this.callbacks[t];
+    i?.(e);
+    for (const n of this.observers) {
+      const o = n[t];
+      o?.(e);
+    }
+  }
+  getState = () => this.state;
+  subscribe = (t) => (this.listeners.add(t), () => {
+    this.listeners.delete(t);
+  });
+  emit(t) {
+    this.state = t;
+    for (const e of this.listeners) e();
+  }
+  /* --- Registration ------------------------------------------------------ */
+  registerItem(t) {
+    return this.items.set(t.id, t), () => {
+      this.items.get(t.id) === t && this.items.delete(t.id);
+    };
+  }
+  /** DX-5522 / DX-5521: a group box's piece, keyed by its piece id (unique in the document; a box drawn as several pieces registers each). */
+  registerGroup(t) {
+    const e = t.piece;
+    return this.groups.set(e, t), () => {
+      this.groups.get(e) === t && this.groups.delete(e);
+    };
+  }
+  registerContainer(t) {
+    return this.containers.set(t.id, t), () => {
+      this.containers.get(t.id) === t && this.containers.delete(t.id);
+    };
+  }
+  /**
+   * Document order, used by keyboard container stepping.
+   *
+   * DX-4590: NOT registration order. A container re-registers whenever its
+   * `total`, `offset` or `axis` changes (a delete + re-add, which moves it to the
+   * end of the Map), and a lane or toggle that mounts later registers later, so
+   * registration order drifts away from the screen and ArrowLeft/Right skip lanes
+   * or reach them out of order. Document order is what the user sees.
+   */
+  containerIds() {
+    return [...this.containers.values()].sort((t, e) => {
+      const i = t.element.compareDocumentPosition(e.element);
+      return i & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : i & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+    }).map((t) => t.id);
+  }
+  /* --- Layout ------------------------------------------------------------ */
+  /**
+   * Re-measure. Called at pickup, and by the sensors on scroll, resize and
+   * every auto-scroll frame — the three things that move a box while a drag is
+   * in flight without the drag having caused it.
+   */
+  remeasure() {
+    return this.layout = p(this.items.values(), this.containers.values(), this.groups.values()), this.layout;
+  }
+  getLayout() {
+    return this.layout;
+  }
+  /* --- Lifecycle --------------------------------------------------------- */
+  start(t) {
+    const e = this.items.get(t.id);
+    if (!e) return !1;
+    const i = { container: e.container, index: e.index }, n = this.remeasure(), o = t.pending || !t.point ? i : a(n, t.point, t.id) ?? i;
+    return this.emit({
+      phase: t.pending ? "pending" : "dragging",
+      id: t.id,
+      from: i,
+      over: o,
+      mode: t.mode,
+      point: t.point ?? null,
+      /* COMPUTED HERE, NEVER PASSED IN. `grab` is the cursor's offset inside the
+         ITEM — that is what makes a floating clone sit under the point the user
+         actually pressed. The sensor is attached to the HANDLE and has no other
+         element to measure, so a sensor-supplied value is silently the offset
+         inside the grip instead: measured at 8.9,13.9 where the item-relative
+         answer was 17.0,28.0, putting the clone ~8px left and ~14px above the
+         card. The session is the only place that holds the item's registered
+         element, so it is the only place that can be right. */
+      grab: t.point ? y(e.element, t.point) : null
+    }), t.pending || this.fan("onDragStart", { id: t.id, from: i, mode: t.mode }), !0;
+  }
+  /** Promote a `pending` pointer into a real drag once its constraint is met. */
+  activate() {
+    const t = this.state;
+    if (t.phase !== "pending" || !t.id || !t.from || !t.mode) return;
+    const e = this.remeasure(), i = t.point && a(e, t.point, t.id) || t.from;
+    this.emit({ ...t, phase: "dragging", over: i }), this.fan("onDragStart", { id: t.id, from: t.from, mode: t.mode }), c(i, t.from) || this.fan("onDragOver", { id: t.id, from: t.from, over: i });
+  }
+  /** Pointer moved. Cheap when the target has not changed, which is most frames. */
+  moveTo(t) {
+    const e = this.state;
+    if (e.phase === "idle" || !e.id || !e.from) return;
+    if (e.phase === "pending") {
+      this.emit({ ...e, point: t });
+      return;
+    }
+    const i = this.layout ?? this.remeasure(), n = a(i, t, e.id) ?? e.over, o = !c(n, e.over);
+    this.emit({ ...e, point: t, over: n }), o && n && this.fan("onDragOver", { id: e.id, from: e.from, over: n });
+  }
+  /**
+   * Step the insertion point within the current container. The keyboard's
+   * along-axis movement.
+   *
+   * Clamped rather than wrapping: wrapping from the bottom of a list to the top
+   * is indistinguishable from a missed keypress when you cannot see the list.
+   */
+  moveIndex(t) {
+    const e = this.state;
+    if (e.phase !== "dragging" || !e.id || !e.over || !e.from || f(this.crossDropOf(e.over.container), e.from.container, e.over.container)) return;
+    const i = this.layout ?? this.remeasure(), n = d(i, e.over.container, e.id).length, o = Math.min(n, Math.max(0, e.over.index + t));
+    if (o === e.over.index) return;
+    const s = { container: e.over.container, index: o };
+    this.emit({ ...e, over: s }), this.fan("onDragOver", { id: e.id, from: e.from, over: s });
+  }
+  /**
+   * Move to the previous or next container. The keyboard's cross-axis movement.
+   *
+   * Lands at the index nearest the item's current one rather than at the top,
+   * because a card carried sideways across a board should stay roughly where it
+   * was vertically — the same thing the pointer does for free.
+   */
+  moveContainer(t) {
+    const e = this.state;
+    if (e.phase !== "dragging" || !e.id || !e.over || !e.from) return;
+    const i = this.containerIds(), n = i.indexOf(e.over.container);
+    if (n < 0) return;
+    const o = n + t;
+    if (o < 0 || o >= i.length) return;
+    const s = i[o], u = this.layout ?? this.remeasure(), l = d(u, s, e.id).length, m = { container: s, index: Math.min(e.over.index, l) };
+    this.emit({ ...e, over: m }), this.fan("onDragOver", { id: e.id, from: e.from, over: m });
+  }
+  /** Release. Emits `onDragEnd` even for a no-op so consumers can announce it. */
+  commit() {
+    const t = this.state;
+    if (t.phase === "idle" || !t.id || !t.from) {
+      this.emit(r);
+      return;
+    }
+    if (t.phase === "pending") {
+      this.emit(r);
+      return;
+    }
+    const e = t.over ?? t.from, i = {
+      id: t.id,
+      from: t.from,
+      to: e,
+      mode: t.mode ?? "pointer",
+      moved: !v(t.from, e)
+    };
+    this.emit(r), this.fan("onDragEnd", i);
+  }
+  /** Esc, `pointercancel`, or an unmount mid-gesture. Never writes. */
+  cancel() {
+    const t = this.state;
+    this.emit(r), t.phase === "dragging" && t.id && t.from && this.fan("onDragCancel", { id: t.id, from: t.from, mode: t.mode ?? "pointer" });
+  }
+  /* --- Read helpers used by the view ------------------------------------- */
+  /** The container the pointer is over right now, or null. */
+  containerAtPoint(t) {
+    const e = this.layout;
+    return e ? g(e, t)?.id ?? null : null;
+  }
+  /**
+   * Where a drop target sits, as a person is told it: 1-based, in the WHOLE
+   * container, with the whole container's length counted with the carried item
+   * in it. A container that renders every item is its own whole (the items
+   * registered under it); a windowed one says so at registration (`offset`,
+   * `total`) and the answer follows. `index` counts the container with the
+   * carried item already removed — the engine's one index rule.
+   */
+  spokenPosition(t, e, i) {
+    const n = this.containers.get(t), o = n?.offset ?? 0, s = n?.total === void 0 ? this.slotCount(t) : n.total - (this.items.get(i)?.container === t ? 1 : 0);
+    return { position: o + e + 1, total: s + 1 };
+  }
+  /** What a card carried in from another container means here — see `ContainerRegistration.crossDrop`. */
+  crossDropOf(t) {
+    return this.containers.get(t)?.crossDrop;
+  }
+  /** How many items a container holds once the carried one is taken out. */
+  slotCount(t) {
+    const e = this.layout ?? this.remeasure();
+    return d(e, t, this.state.id).length;
+  }
+}
+export {
+  O as DragSession
+};
+//# sourceMappingURL=session.js.map

package/dist/lib/dnd/session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.js","sources":["../../../src/lib/dnd/session.ts"],"sourcesContent":["import { isLaneDrop } from \"./cross-drop\";\nimport {\n  containerAt,\n  isNoOp,\n  measure,\n  remainingItems,\n  resolveTarget,\n  sameTarget,\n} from \"./geometry\";\nimport type {\n  ContainerRegistration,\n  CrossDrop,\n  DragId,\n  DragMode,\n  DragSessionCallbacks,\n  DragState,\n  DropTarget,\n  GroupRegistration,\n  ItemRegistration,\n  LayoutSnapshot,\n  Point,\n} from \"./types\";\n\n/**\n * The one state machine. Every input source — pointer, keyboard, and whatever\n * comes later — drives THIS, and nothing downstream knows which one is active\n * beyond reading `state.mode`.\n *\n * WHY ONE SESSION AND NOT TWO IMPLEMENTATIONS. The usual shape is a pointer\n * drag with keyboard support \"added\", which is two codebases computing the same\n * answer and drifting apart on every change — the accessible path is the one\n * nobody is looking at, so it is the one that rots. Here a sensor can only\n * `start`, `moveTo`/`moveIndex`/`moveContainer`, `commit` and `cancel`. If a\n * behaviour is reachable by pointer it is reachable by keyboard by\n * construction, and the audit can assert the two produce identical results.\n *\n * Framework-agnostic on purpose: a plain subscribable store, so `useSyncExternalStore`\n * consumes it and the tests do not need React to exercise the machine.\n */\n\n/** Where inside `element` a client-space point falls. */\nfunction offsetWithin(element: HTMLElement, point: Point): Point {\n  const rect = element.getBoundingClientRect();\n  return { x: point.x - rect.left, y: point.y - rect.top };\n}\n\nconst IDLE: DragState = {\n  phase: \"idle\",\n  id: null,\n  from: null,\n  over: null,\n  mode: null,\n  point: null,\n  grab: null,\n};\n\nexport interface StartArgs {\n  id: DragId;\n  mode: DragMode;\n  /** Pointer position at pickup. Omitted for keyboard sessions. */\n  point?: Point;\n  /**\n   * `true` for a pointer that is down but has not passed its activation\n   * constraint yet. The session holds `pending` until the sensor calls\n   * `activate()` — see `DragPhase` in `types.ts` for why that gap exists.\n   */\n  pending?: boolean;\n}\n\nexport class DragSession {\n  private state: DragState = IDLE;\n  private listeners = new Set<() => void>();\n  private items = new Map<DragId, ItemRegistration>();\n  private containers = new Map<string, ContainerRegistration>();\n  private groups = new Map<string, GroupRegistration>();\n  private layout: LayoutSnapshot | null = null;\n  private callbacks: DragSessionCallbacks;\n  private observers = new Set<DragSessionCallbacks>();\n\n  constructor(callbacks: DragSessionCallbacks = {}) {\n    this.callbacks = callbacks;\n  }\n\n  /**\n   * The OWNING consumer's callbacks — the one that renders the board and writes\n   * the reorder. Replaced rather than passed per-call because a React consumer\n   * re-creates its handlers on every render and the session must not be rebuilt;\n   * rebuilding it mid-gesture drops the drag.\n   */\n  setCallbacks(callbacks: DragSessionCallbacks): void {\n    this.callbacks = callbacks;\n  }\n\n  /**\n   * Register an ADDITIONAL listener. Returns its teardown.\n   *\n   * `setCallbacks` is a single slot owned by whoever renders the board, so a\n   * second interested party — the live-region announcer, an analytics hook, a\n   * test — could not be told anything without clobbering it. And `subscribe`\n   * is not a substitute: a drop and a cancel both end at the same idle state,\n   * so a state subscriber sees ONE identical transition for two outcomes that\n   * must be announced differently.\n   *\n   * That gap was not theoretical. The announcer worked around it by inferring\n   * the cause from whichever DOM event was mid-dispatch — about ninety lines of\n   * genuinely careful machinery, defeated once by the microtask checkpoint the\n   * HTML spec runs BETWEEN listeners of the same event, so that every cancel\n   * announced itself as a drop. Nothing that reads the session should have to\n   * guess what the session just did.\n   */\n  addObserver(callbacks: DragSessionCallbacks): () => void {\n    this.observers.add(callbacks);\n    return () => {\n      this.observers.delete(callbacks);\n    };\n  }\n\n  /**\n   * Owner first, then observers, in registration order.\n   *\n   * The owner goes first because it is the one that mutates the list, and an\n   * observer that reads the consumer's state — an announcer reporting \"3 of 7\"\n   * — must see the world after the write, not before.\n   */\n  private fan<K extends keyof DragSessionCallbacks>(\n    name: K,\n    event: Parameters<NonNullable<DragSessionCallbacks[K]>>[0],\n  ): void {\n    const owner = this.callbacks[name] as ((e: unknown) => void) | undefined;\n    owner?.(event);\n    for (const o of this.observers) {\n      const fn = o[name] as ((e: unknown) => void) | undefined;\n      fn?.(event);\n    }\n  }\n\n  getState = (): DragState => this.state;\n\n  subscribe = (fn: () => void): (() => void) => {\n    this.listeners.add(fn);\n    return () => {\n      this.listeners.delete(fn);\n    };\n  };\n\n  private emit(next: DragState): void {\n    this.state = next;\n    for (const fn of this.listeners) fn();\n  }\n\n  /* --- Registration ------------------------------------------------------ */\n\n  registerItem(reg: ItemRegistration): () => void {\n    this.items.set(reg.id, reg);\n    return () => {\n      /* Only remove the registration still standing. A list that re-orders\n         unmounts and remounts rows in an order React does not promise, so a\n         stale cleanup can otherwise delete the registration its successor has\n         already installed — the row then exists on screen and is invisible to\n         every hit test. */\n      if (this.items.get(reg.id) === reg) this.items.delete(reg.id);\n    };\n  }\n\n  /** DX-5522 / DX-5521: a group box's piece, keyed by its piece id (unique in the document; a box drawn as several pieces registers each). */\n  registerGroup(reg: GroupRegistration): () => void {\n    const key = reg.piece;\n    this.groups.set(key, reg);\n    return () => {\n      if (this.groups.get(key) === reg) this.groups.delete(key);\n    };\n  }\n\n  registerContainer(reg: ContainerRegistration): () => void {\n    this.containers.set(reg.id, reg);\n    return () => {\n      if (this.containers.get(reg.id) === reg) this.containers.delete(reg.id);\n    };\n  }\n\n  /**\n   * Document order, used by keyboard container stepping.\n   *\n   * DX-4590: NOT registration order. A container re-registers whenever its\n   * `total`, `offset` or `axis` changes (a delete + re-add, which moves it to the\n   * end of the Map), and a lane or toggle that mounts later registers later, so\n   * registration order drifts away from the screen and ArrowLeft/Right skip lanes\n   * or reach them out of order. Document order is what the user sees.\n   */\n  containerIds(): string[] {\n    return [...this.containers.values()]\n      .sort((a, b) => {\n        const rel = a.element.compareDocumentPosition(b.element);\n        if (rel & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n        if (rel & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n        return 0;\n      })\n      .map((reg) => reg.id);\n  }\n\n  /* --- Layout ------------------------------------------------------------ */\n\n  /**\n   * Re-measure. Called at pickup, and by the sensors on scroll, resize and\n   * every auto-scroll frame — the three things that move a box while a drag is\n   * in flight without the drag having caused it.\n   */\n  remeasure(): LayoutSnapshot {\n    this.layout = measure(this.items.values(), this.containers.values(), this.groups.values());\n    return this.layout;\n  }\n\n  getLayout(): LayoutSnapshot | null {\n    return this.layout;\n  }\n\n  /* --- Lifecycle --------------------------------------------------------- */\n\n  start(args: StartArgs): boolean {\n    const reg = this.items.get(args.id);\n    if (!reg) return false;\n    const from: DropTarget = { container: reg.container, index: reg.index };\n    const layout = this.remeasure();\n    /* `over` starts at the item's own home so the very first move has something\n       to compare against and a release with no movement is provably a no-op\n       rather than an accident of null-handling.\n\n       NO POINT MEANS NO HIT TEST. A keyboard session supplies no pointer, and\n       coalescing that to {0, 0} hit-tests the viewport ORIGIN: if any\n       container's box contains it, the pickup begins at that container's end\n       index rather than the card's own place, and the first arrow key moves a\n       card the user only picked up to look at. It went unnoticed here because\n       the demo board's columns start ~200px in, and in the unit fixture the\n       first card sits at index 0 where the wrong answer and the right one\n       coincide. A coalesced default at read time is exactly what this project\n       bans — the honest answer with no pointer is the item's home. */\n    const over: DropTarget = args.pending || !args.point\n      ? from\n      : (resolveTarget(layout, args.point, args.id) ?? from);\n    this.emit({\n      phase: args.pending ? \"pending\" : \"dragging\",\n      id: args.id,\n      from,\n      over,\n      mode: args.mode,\n      point: args.point ?? null,\n      /* COMPUTED HERE, NEVER PASSED IN. `grab` is the cursor's offset inside the\n         ITEM — that is what makes a floating clone sit under the point the user\n         actually pressed. The sensor is attached to the HANDLE and has no other\n         element to measure, so a sensor-supplied value is silently the offset\n         inside the grip instead: measured at 8.9,13.9 where the item-relative\n         answer was 17.0,28.0, putting the clone ~8px left and ~14px above the\n         card. The session is the only place that holds the item's registered\n         element, so it is the only place that can be right. */\n      grab: args.point ? offsetWithin(reg.element, args.point) : null,\n    });\n    if (!args.pending) this.fan(\"onDragStart\", { id: args.id, from, mode: args.mode });\n    return true;\n  }\n\n  /** Promote a `pending` pointer into a real drag once its constraint is met. */\n  activate(): void {\n    const s = this.state;\n    if (s.phase !== \"pending\" || !s.id || !s.from || !s.mode) return;\n    const layout = this.remeasure();\n    const over = (s.point && resolveTarget(layout, s.point, s.id)) || s.from;\n    this.emit({ ...s, phase: \"dragging\", over });\n    this.fan(\"onDragStart\", { id: s.id, from: s.from, mode: s.mode });\n    if (!sameTarget(over, s.from)) {\n      this.fan(\"onDragOver\", { id: s.id, from: s.from, over });\n    }\n  }\n\n  /** Pointer moved. Cheap when the target has not changed, which is most frames. */\n  moveTo(point: Point): void {\n    const s = this.state;\n    if (s.phase === \"idle\" || !s.id || !s.from) return;\n    if (s.phase === \"pending\") {\n      this.emit({ ...s, point });\n      return;\n    }\n    const layout = this.layout ?? this.remeasure();\n    /* `?? s.over` IS NOW ONLY THE EMPTY-BOARD GUARD, and it is worth saying so\n       because it used to be the mechanism. `resolveTarget` answers with the\n       NEAREST container when the pointer is inside none of them, so a cursor in\n       a gutter or on a lane header resolves to the lane it is over rather than\n       to the last one it crossed — see that function's header for the drop it\n       used to send into the wrong lane. Null now means a board with no\n       registered containers at all, where keeping the last target is the only\n       thing left to do. */\n    const next = resolveTarget(layout, point, s.id) ?? s.over;\n    const changed = !sameTarget(next, s.over);\n    this.emit({ ...s, point, over: next });\n    if (changed && next) this.fan(\"onDragOver\", { id: s.id, from: s.from, over: next });\n  }\n\n  /**\n   * Step the insertion point within the current container. The keyboard's\n   * along-axis movement.\n   *\n   * Clamped rather than wrapping: wrapping from the bottom of a list to the top\n   * is indistinguishable from a missed keypress when you cannot see the list.\n   */\n  moveIndex(delta: number): void {\n    const s = this.state;\n    if (s.phase !== \"dragging\" || !s.id || !s.over || !s.from) return;\n    /* DX-4583: a container that takes the card as a whole has no position to\n       step through, so an arrow along its axis is not a move: nothing changes\n       and nothing is announced again. */\n    if (isLaneDrop(this.crossDropOf(s.over.container), s.from.container, s.over.container)) return;\n    const layout = this.layout ?? this.remeasure();\n    const max = remainingItems(layout, s.over.container, s.id).length;\n    const index = Math.min(max, Math.max(0, s.over.index + delta));\n    if (index === s.over.index) return;\n    const over = { container: s.over.container, index };\n    this.emit({ ...s, over });\n    this.fan(\"onDragOver\", { id: s.id, from: s.from, over });\n  }\n\n  /**\n   * Move to the previous or next container. The keyboard's cross-axis movement.\n   *\n   * Lands at the index nearest the item's current one rather than at the top,\n   * because a card carried sideways across a board should stay roughly where it\n   * was vertically — the same thing the pointer does for free.\n   */\n  moveContainer(delta: number): void {\n    const s = this.state;\n    if (s.phase !== \"dragging\" || !s.id || !s.over || !s.from) return;\n    const ids = this.containerIds();\n    const at = ids.indexOf(s.over.container);\n    if (at < 0) return;\n    const nextAt = at + delta;\n    if (nextAt < 0 || nextAt >= ids.length) return;\n    const container = ids[nextAt];\n    const layout = this.layout ?? this.remeasure();\n    const max = remainingItems(layout, container, s.id).length;\n    const over = { container, index: Math.min(s.over.index, max) };\n    this.emit({ ...s, over });\n    this.fan(\"onDragOver\", { id: s.id, from: s.from, over });\n  }\n\n  /** Release. Emits `onDragEnd` even for a no-op so consumers can announce it. */\n  commit(): void {\n    const s = this.state;\n    if (s.phase === \"idle\" || !s.id || !s.from) {\n      this.emit(IDLE);\n      return;\n    }\n    /* A `pending` pointer that never activated is a click, not a drag. It\n       must not commit — otherwise every tap on a card reorders the list by\n       zero and writes anyway. */\n    if (s.phase === \"pending\") {\n      this.emit(IDLE);\n      return;\n    }\n    const to = s.over ?? s.from;\n    const event = {\n      id: s.id,\n      from: s.from,\n      to,\n      mode: s.mode ?? \"pointer\",\n      moved: !isNoOp(s.from, to),\n    };\n    this.emit(IDLE);\n    this.fan(\"onDragEnd\", event);\n  }\n\n  /** Esc, `pointercancel`, or an unmount mid-gesture. Never writes. */\n  cancel(): void {\n    const s = this.state;\n    this.emit(IDLE);\n    if (s.phase === \"dragging\" && s.id && s.from) {\n      this.fan(\"onDragCancel\", { id: s.id, from: s.from, mode: s.mode ?? \"pointer\" });\n    }\n  }\n\n  /* --- Read helpers used by the view ------------------------------------- */\n\n  /** The container the pointer is over right now, or null. */\n  containerAtPoint(point: Point): string | null {\n    const layout = this.layout;\n    if (!layout) return null;\n    return containerAt(layout, point)?.id ?? null;\n  }\n\n  /**\n   * Where a drop target sits, as a person is told it: 1-based, in the WHOLE\n   * container, with the whole container's length counted with the carried item\n   * in it. A container that renders every item is its own whole (the items\n   * registered under it); a windowed one says so at registration (`offset`,\n   * `total`) and the answer follows. `index` counts the container with the\n   * carried item already removed — the engine's one index rule.\n   */\n  spokenPosition(container: string, index: number, carried: DragId): { position: number; total: number } {\n    const reg = this.containers.get(container);\n    const offset = reg?.offset ?? 0;\n    const others =\n      reg?.total === undefined\n        ? this.slotCount(container)\n        : reg.total - (this.items.get(carried)?.container === container ? 1 : 0);\n    return { position: offset + index + 1, total: others + 1 };\n  }\n\n  /** What a card carried in from another container means here — see `ContainerRegistration.crossDrop`. */\n  crossDropOf(container: string): CrossDrop | undefined {\n    return this.containers.get(container)?.crossDrop;\n  }\n\n  /** How many items a container holds once the carried one is taken out. */\n  slotCount(container: string): number {\n    const layout = this.layout ?? this.remeasure();\n    return remainingItems(layout, container, this.state.id).length;\n  }\n}\n"],"names":["offsetWithin","element","point","rect","IDLE","DragSession","callbacks","name","event","owner","o","fn","next","reg","key","a","b","rel","measure","args","from","layout","over","resolveTarget","s","sameTarget","changed","delta","isLaneDrop","max","remainingItems","index","ids","at","nextAt","container","to","isNoOp","containerAt","carried","offset","others"],"mappings":"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"}

package/dist/lib/dnd/use-drag.js

@@ -0,0 +1,90 @@
+import { createContext as R, useRef as v, useEffect as l, useContext as S, useSyncExternalStore as D, useState as d } from "react";
+import { DragSession as $ } from "./session.js";
+import { attachSessionWindowListeners as G, attachPointerSensor as P } from "./sensors/pointer.js";
+import { attachKeyboardSensor as I } from "./sensors/keyboard.js";
+const p = R(null), B = p.Provider;
+function O(e) {
+  const r = S(p);
+  if (!r)
+    throw new Error(`<${e}> must be rendered inside a <DragDrop>.`);
+  return r;
+}
+function V(e) {
+  const r = v(null);
+  r.current ??= new $(e);
+  const t = r.current;
+  return t.setCallbacks(e), l(() => G(t), [t]), t;
+}
+function b(e) {
+  return D(e.subscribe, e.getState, e.getState);
+}
+const K = () => () => {
+};
+function W() {
+  const e = S(p);
+  return D(
+    e ? e.subscribe : K,
+    () => e?.getState().phase === "dragging",
+    () => !1
+  );
+}
+function _(e, r) {
+  const { id: t, container: n, index: o, axis: i = "y", group: a, piece: u, disabled: g = !1, activation: s } = r, [c, x] = d(null), [f, C] = d(null);
+  l(() => {
+    if (c) {
+      if (a === void 0 != (u === void 0))
+        throw new Error(`useDraggable: item ${t} names a group without its piece or a piece without its group; give both or neither.`);
+      return e.registerItem(
+        a === void 0 ? { id: t, container: n, index: o, element: c } : { id: t, container: n, index: o, element: c, group: a, piece: u }
+      );
+    }
+  }, [e, c, t, n, o, a, u]);
+  const E = `${s?.distance ?? ""}/${s?.delay ?? ""}/${s?.tolerance ?? ""}`, m = v(s);
+  m.current = s, l(() => {
+    if (!f || g) return;
+    const w = P(e, f, {
+      id: t,
+      activation: m.current
+    }), y = I(e, f, { id: t, axis: i });
+    return () => {
+      w(), y();
+    };
+  }, [e, f, t, i, g, E]);
+  const h = b(e);
+  return {
+    setItemRef: x,
+    setHandleRef: C,
+    isDragging: h.phase === "dragging" && h.id === t
+  };
+}
+function j(e, r) {
+  const { id: t, piece: n, container: o } = r, [i, a] = d(null);
+  return l(() => {
+    if (i)
+      return e.registerGroup({ id: t, piece: n, container: o, element: i });
+  }, [e, i, t, n, o]), a;
+}
+function k(e, r) {
+  const { id: t, axis: n = "y", offset: o, total: i, crossDrop: a } = r, [u, g] = d(null);
+  l(() => {
+    if (u)
+      return e.registerContainer({ id: t, element: u, axis: n, offset: o, total: i, crossDrop: a });
+  }, [e, u, t, n, o, i, a]);
+  const s = b(e), c = s.phase === "dragging" && s.over?.container === t;
+  return {
+    setContainerRef: g,
+    isOver: c,
+    overIndex: c ? s.over?.index ?? null : null
+  };
+}
+export {
+  B as DragSessionProvider,
+  V as useCreateDragSession,
+  W as useDragLive,
+  O as useDragSession,
+  b as useDragState,
+  _ as useDraggable,
+  k as useDropContainer,
+  j as useGroupBox
+};
+//# sourceMappingURL=use-drag.js.map

package/dist/lib/dnd/use-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag.js","sources":["../../../src/lib/dnd/use-drag.ts"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { DragSession } from \"./session\";\nimport { attachPointerSensor, attachSessionWindowListeners } from \"./sensors/pointer\";\nimport { attachKeyboardSensor } from \"./sensors/keyboard\";\nimport type { PointerActivation } from \"./sensors/pointer\";\nimport type {\n  ContainerId,\n  CrossDrop,\n  DragAxis,\n  DragId,\n  DragSessionCallbacks,\n  DragState,\n  GroupId,\n  PieceId,\n} from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   The React binding.\n\n   `useSyncExternalStore` rather than component state, because the session is\n   mutated from event handlers that fire outside React's batching — a\n   `pointermove` at 120Hz driving `setState` would re-render the whole board on\n   every frame regardless of whether anything it renders changed. The store\n   emits once per real change, and each subscriber reads only the slice it needs.\n\n   `getState` returns the SAME object until something changes, which is what\n   makes the default equality check correct. Any selector added later must\n   preserve that: returning a fresh object per read turns every emit into a\n   re-render of everything.\n\n   ELEMENTS ARE HELD IN STATE, NOT IN A REF. An effect that reads `ref.current`\n   only runs when its declared dependencies change, so an element swapped\n   without a dependency changing is never registered — the row is on screen and\n   invisible to every hit test, with nothing to show for it. A ref CALLBACK that\n   sets state makes the element itself a dependency, which is the only version\n   of this that cannot silently miss.\n   -------------------------------------------------------------------------- */\n\nconst DragContext = createContext<DragSession | null>(null);\n\nexport const DragSessionProvider = DragContext.Provider;\n\nexport function useDragSession(component: string): DragSession {\n  const session = useContext(DragContext);\n  if (!session) {\n    throw new Error(`<${component}> must be rendered inside a <DragDrop>.`);\n  }\n  return session;\n}\n\n/**\n * Create the session a `<DragDrop>` owns.\n *\n * Built ONCE, with its callbacks swapped on every render. Rebuilding it when a\n * consumer's `onDragEnd` identity changes — which it does on every render\n * unless they memoize, and they will not — would destroy the machine mid-gesture\n * and drop the drag.\n */\nexport function useCreateDragSession(callbacks: DragSessionCallbacks): DragSession {\n  const ref = useRef<DragSession | null>(null);\n  ref.current ??= new DragSession(callbacks);\n  const session = ref.current;\n  session.setCallbacks(callbacks);\n  useEffect(() => attachSessionWindowListeners(session), [session]);\n  return session;\n}\n\n/** Subscribe to the session. */\nexport function useDragState(session: DragSession): DragState {\n  return useSyncExternalStore(session.subscribe, session.getState, session.getState);\n}\n\nconst NEVER_CHANGES = () => () => {};\n\n/**\n * True while a card is being carried in the enclosing `<DragDrop>`, and false\n * outside one — it never throws, because the callers that ask (a windowed list\n * deciding whether it may drop a page) are ordinary components that are\n * sometimes inside a board and sometimes not.\n *\n * Reads only `phase === \"dragging\"`, so it re-renders its caller when a drag\n * starts or ends and not on every pointer move, which `useDragState` would.\n */\nexport function useDragLive(): boolean {\n  const session = useContext(DragContext);\n  return useSyncExternalStore(\n    session ? session.subscribe : NEVER_CHANGES,\n    () => session?.getState().phase === \"dragging\",\n    () => false,\n  );\n}\n\nexport interface UseDraggableOptions {\n  id: DragId;\n  container: ContainerId;\n  /** Position in the consumer's data. Re-registers when it changes. */\n  index: number;\n  /**\n   * The reorder axis of this item's container. Decides which arrow pair steps\n   * within the container and which moves between containers.\n   *\n   * @default \"y\"\n   */\n  axis?: DragAxis;\n  /** DX-5522: the group box this item is drawn in — see `ItemRegistration.group`. */\n  group?: GroupId;\n  /** DX-5521: the piece of that box it is drawn in — see `ItemRegistration.piece`. Given exactly when `group` is. */\n  piece?: PieceId;\n  disabled?: boolean;\n  activation?: PointerActivation;\n}\n\nexport interface UseDraggableResult {\n  /** The item's own element — this is what gets measured. */\n  setItemRef: (el: HTMLElement | null) => void;\n  /**\n   * The drag handle. Pass the same element as `setItemRef` to make the whole\n   * item draggable, or a grip inside it to make only the grip draggable. They\n   * are deliberately separate: a card full of buttons must not start a drag\n   * from every one of them.\n   */\n  setHandleRef: (el: HTMLElement | null) => void;\n  isDragging: boolean;\n}\n\nexport function useDraggable(\n  session: DragSession,\n  options: UseDraggableOptions,\n): UseDraggableResult {\n  const { id, container, index, axis = \"y\", group, piece, disabled = false, activation } = options;\n  const [itemEl, setItemRef] = useState<HTMLElement | null>(null);\n  const [handleEl, setHandleRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!itemEl) return;\n    if ((group === undefined) !== (piece === undefined)) {\n      throw new Error(`useDraggable: item ${id} names a group without its piece or a piece without its group; give both or neither.`);\n    }\n    return session.registerItem(\n      group === undefined ? { id, container, index, element: itemEl } : { id, container, index, element: itemEl, group, piece },\n    );\n  }, [session, itemEl, id, container, index, group, piece]);\n\n  /* `activation` is an options OBJECT, so a consumer writing it inline hands us\n     a new identity on every render. Depending on it directly would tear the\n     sensor down and rebuild it mid-gesture, dropping the drag — and it would do\n     so only for consumers who wrote the idiomatic thing. Depend on the VALUES;\n     read the object through a ref at attach time. */\n  const activationKey = `${activation?.distance ?? \"\"}/${activation?.delay ?? \"\"}/${activation?.tolerance ?? \"\"}`;\n  const activationRef = useRef(activation);\n  activationRef.current = activation;\n\n  /* BOTH SENSORS, from one hook, always. Attaching only the pointer one and\n     leaving the keyboard to the consumer is how a library ships a drag list\n     that is inaccessible by default: the keyboard path becomes something each\n     consumer has to remember, on a surface where forgetting produces no error\n     and no visible symptom on the machine it was written on. The first\n     consumer of this hook did have to wire it by hand, and kept a second copy\n     of the handle element in state to manage it — the gap announced itself\n     immediately. */\n  useEffect(() => {\n    if (!handleEl || disabled) return;\n    const detachPointer = attachPointerSensor(session, handleEl, {\n      id,\n      activation: activationRef.current,\n    });\n    const detachKeyboard = attachKeyboardSensor(session, handleEl, { id, axis });\n    return () => {\n      detachPointer();\n      detachKeyboard();\n    };\n  }, [session, handleEl, id, axis, disabled, activationKey]);\n\n  const state = useDragState(session);\n\n  return {\n    setItemRef,\n    setHandleRef,\n    isDragging: state.phase === \"dragging\" && state.id === id,\n  };\n}\n\n/** DX-5522: register a group box's piece so the engine can measure it. The container is the enclosing one, passed by the caller. */\nexport function useGroupBox(session: DragSession, options: { id: GroupId; piece: PieceId; container: ContainerId }): (el: HTMLElement | null) => void {\n  const { id, piece, container } = options;\n  const [el, setGroupRef] = useState<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!el) return;\n    return session.registerGroup({ id, piece, container, element: el });\n  }, [session, el, id, piece, container]);\n  return setGroupRef;\n}\n\nexport interface UseDropContainerOptions {\n  id: ContainerId;\n  axis?: DragAxis;\n  /** See `ContainerRegistration.offset` — a windowed container's first item's place in the whole list. */\n  offset?: number;\n  /** See `ContainerRegistration.total` — a windowed container's whole length. */\n  total?: number;\n  /** See `ContainerRegistration.crossDrop`. */\n  crossDrop?: CrossDrop;\n}\n\nexport interface UseDropContainerResult {\n  setContainerRef: (el: HTMLElement | null) => void;\n  /** True while the carried item would land in this container. */\n  isOver: boolean;\n  /** Insertion index within this container, or null when it is not the target. */\n  overIndex: number | null;\n}\n\nexport function useDropContainer(\n  session: DragSession,\n  options: UseDropContainerOptions,\n): UseDropContainerResult {\n  const { id, axis = \"y\", offset, total, crossDrop } = options;\n  const [el, setContainerRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!el) return;\n    return session.registerContainer({ id, element: el, axis, offset, total, crossDrop });\n  }, [session, el, id, axis, offset, total, crossDrop]);\n\n  const state = useDragState(session);\n  const isOver = state.phase === \"dragging\" && state.over?.container === id;\n\n  return {\n    setContainerRef,\n    isOver,\n    overIndex: isOver ? (state.over?.index ?? null) : null,\n  };\n}\n"],"names":["DragContext","createContext","DragSessionProvider","useDragSession","component","session","useContext","useCreateDragSession","callbacks","ref","useRef","DragSession","useEffect","attachSessionWindowListeners","useDragState","useSyncExternalStore","NEVER_CHANGES","useDragLive","useDraggable","options","id","container","index","axis","group","piece","disabled","activation","itemEl","setItemRef","useState","handleEl","setHandleRef","activationKey","activationRef","detachPointer","attachPointerSensor","detachKeyboard","attachKeyboardSensor","state","useGroupBox","el","setGroupRef","useDropContainer","offset","total","crossDrop","setContainerRef","isOver"],"mappings":"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"}

package/dist/lib/dom/scroll-ancestor.js

@@ -0,0 +1,18 @@
+const c = /^(auto|scroll|overlay)$/;
+function s(e, { axes: n = ["y"], mustOverflow: r = !1 } = {}) {
+  const t = getComputedStyle(e);
+  return n.some((o) => {
+    const l = o === "y" ? t.overflowY : t.overflowX;
+    return c.test(l) ? r ? o === "y" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth : !0 : !1;
+  });
+}
+function u(e, { includeSelf: n, ...r }) {
+  for (let t = n ? e : e?.parentElement ?? null; t; t = t.parentElement)
+    if (t instanceof HTMLElement && s(t, r)) return t;
+  return null;
+}
+export {
+  s as isScrollBox,
+  u as nearestScrollAncestor
+};
+//# sourceMappingURL=scroll-ancestor.js.map

package/dist/lib/dom/scroll-ancestor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-ancestor.js","sources":["../../../src/lib/dom/scroll-ancestor.ts"],"sourcesContent":["/* ============================================================================\n   THE NEAREST BOX THAT SCROLLS — one answer for three callers. DX-4540.\n\n   `PagedWindowList` needs the root of its IntersectionObserver, `useFillHeight`\n   needs the box it sizes itself against, and drag auto-scroll needs the box\n   under the pointer. Each had its own walk up the tree, and the three walks\n   disagreed on three things. This is where those disagreements are decided,\n   once, instead of by whichever copy a reader happens to find.\n\n   WHICH OVERFLOW VALUES COUNT: `auto`, `scroll` and `overlay`. `overlay` is\n   the legacy alias Chromium used for `auto` with a floating scrollbar; it is\n   accepted everywhere. `useFillHeight` used to leave it out, which changed no\n   behaviour in any shipping browser and is not a reason to keep a second list.\n   `hidden` and `clip` never count: such a box is a clip, often a content-sized\n   one (a rounded card, a `Surface`), and measuring against it hands back its own\n   content height.\n\n   WHETHER THE ELEMENT ITSELF IS A CANDIDATE (`includeSelf`): a list whose own\n   class scrolls IS its scroller; an element sizing itself against its scrollport\n   must not pick itself; and the element under a pointer is the first thing\n   auto-scroll asks about. So it is the caller's statement, not a default.\n\n   WHETHER A BOX MUST ACTUALLY OVERFLOW (`mustOverflow`): auto-scroll only wants\n   a box it can move, so a roomy `overflow: auto` column is skipped in favour of\n   the page. A box that merely DECLARES scrolling is what the other two want:\n   an observer root and a fill-height reference exist whether or not the content\n   happens to be tall today.\n\n   The answer is `null` when nothing scrolls. What that means (the viewport, the\n   document element) is the caller's, because it differs: an IntersectionObserver\n   root of `null` is the viewport, and auto-scroll falls back to\n   `document.scrollingElement` and checks it too.\n   ========================================================================= */\n\nexport type ScrollAxis = \"x\" | \"y\";\n\nexport interface ScrollBoxOptions {\n  /** The axes that count; a box scrolling along any of them qualifies. @default [\"y\"] */\n  axes?: readonly ScrollAxis[];\n  /** Also require the content to overflow the box on that axis, not merely allow scrolling. @default false */\n  mustOverflow?: boolean;\n}\n\nexport interface ScrollAncestorOptions extends ScrollBoxOptions {\n  /** Whether `from` itself may be the answer. Required: it is a statement about the caller. */\n  includeSelf: boolean;\n}\n\nconst SCROLLING_OVERFLOW = /^(auto|scroll|overlay)$/;\n\n/** Does `el` scroll along any of the given axes? */\nexport function isScrollBox(el: HTMLElement, { axes = [\"y\"], mustOverflow = false }: ScrollBoxOptions = {}): boolean {\n  const style = getComputedStyle(el);\n  return axes.some((axis) => {\n    const overflow = axis === \"y\" ? style.overflowY : style.overflowX;\n    if (!SCROLLING_OVERFLOW.test(overflow)) return false;\n    if (!mustOverflow) return true;\n    return axis === \"y\" ? el.scrollHeight > el.clientHeight : el.scrollWidth > el.clientWidth;\n  });\n}\n\n/** The nearest box that scrolls, walking up from `from`; null when none does. */\nexport function nearestScrollAncestor(\n  from: Element | null,\n  { includeSelf, ...box }: ScrollAncestorOptions,\n): HTMLElement | null {\n  for (let node = includeSelf ? from : (from?.parentElement ?? null); node; node = node.parentElement) {\n    if (node instanceof HTMLElement && isScrollBox(node, box)) return node;\n  }\n  return null;\n}\n"],"names":["SCROLLING_OVERFLOW","isScrollBox","el","axes","mustOverflow","style","axis","overflow","nearestScrollAncestor","from","includeSelf","box","node"],"mappings":"AAgDA,MAAMA,IAAqB;AAGpB,SAASC,EAAYC,GAAiB,EAAE,MAAAC,IAAO,CAAC,GAAG,GAAG,cAAAC,IAAe,GAAA,IAA4B,IAAa;AACnH,QAAMC,IAAQ,iBAAiBH,CAAE;AACjC,SAAOC,EAAK,KAAK,CAACG,MAAS;AACzB,UAAMC,IAAWD,MAAS,MAAMD,EAAM,YAAYA,EAAM;AACxD,WAAKL,EAAmB,KAAKO,CAAQ,IAChCH,IACEE,MAAS,MAAMJ,EAAG,eAAeA,EAAG,eAAeA,EAAG,cAAcA,EAAG,cADpD,KADqB;AAAA,EAGjD,CAAC;AACH;AAGO,SAASM,EACdC,GACA,EAAE,aAAAC,GAAa,GAAGC,KACE;AACpB,WAASC,IAAOF,IAAcD,IAAQA,GAAM,iBAAiB,MAAOG,GAAMA,IAAOA,EAAK;AACpF,QAAIA,aAAgB,eAAeX,EAAYW,GAAMD,CAAG,EAAG,QAAOC;AAEpE,SAAO;AACT;"}

package/dist/lib/format.js

@@ -0,0 +1,23 @@
+import { numberFormat as n } from "./intl-cache.js";
+function e(t, i) {
+  if (!Number.isFinite(t) || t < 0) return "";
+  if (t < 1024) return `${n(i, {}).format(t)} B`;
+  const o = ["KB", "MB", "GB", "TB"];
+  let r = t / 1024, m = 0;
+  for (; r >= 1024 && m < o.length - 1; )
+    r /= 1024, m += 1;
+  const u = r < 10 ? 1 : 0;
+  return `${n(i, { minimumFractionDigits: u, maximumFractionDigits: u }).format(r)} ${o[m]}`;
+}
+function c(t, i) {
+  return a(t, i);
+}
+function a(t, i) {
+  return t == null || !Number.isFinite(t) ? "—" : Math.abs(t) < 999.5 ? n(i, { maximumFractionDigits: 0 }).format(Math.round(t) + 0) : n(i, { notation: "compact", maximumFractionDigits: 1 }).format(t);
+}
+export {
+  e as formatBytes,
+  a as formatCompactNumber,
+  c as formatTokens
+};
+//# sourceMappingURL=format.js.map

package/dist/lib/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sources":["../../src/lib/format.ts"],"sourcesContent":["/* ----------------------------------------------------------------------------\n   NUMBERS, TURNED INTO THE STRINGS PEOPLE READ.\n\n   These lived inside the components that needed them first — `formatBytes` in\n   `chat/Attachment.tsx`, `formatTokens` in `chat/ContextMeter.tsx` — which was\n   fine right up until somebody outside a component wanted one. The package\n   exports a single entry, so importing `formatBytes` into an application's own\n   formatting layer dragged React and every component in this library into a\n   layer that is deliberately framework-free.\n\n   They are here because they are DECISIONS, not utilities: how much precision\n   a reader can act on, and where a rounded figure stops telling the truth. Two\n   places rendering the same quantity to different precision is the defect this\n   file prevents — see each function for the call it makes.\n\n   NOTHING IN THIS FILE MAY IMPORT REACT, directly or transitively. It is the\n   whole content of the `@50arms/ui/pure` entry; `src/pure.ts` states the\n   contract and `pure-entry.test.ts` enforces it against both the source graph\n   and the built artifact.\n   -------------------------------------------------------------------------- */\n\nimport { numberFormat } from \"./intl-cache\";\n\n/** Binary units, because these are file sizes and every OS reports them this way. */\nexport function formatBytes(bytes: number, locale: string): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return \"\";\n  if (bytes < 1024) return `${numberFormat(locale, {}).format(bytes)} B`;\n  // I18N-ALLOW: international unit symbols (kilo-, mega-, giga-, tera-byte), shown as the standard writes them in every locale\n  const units = [\"KB\", \"MB\", \"GB\", \"TB\"];\n  let value = bytes / 1024;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit += 1;\n  }\n  /* One decimal below 10 and none above: \"1.4 MB\" is useful precision,\n     \"847.3 KB\" is noise on a number nobody acts on. */\n  const digits = value < 10 ? 1 : 0;\n  return `${numberFormat(locale, { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(value)} ${units[unit]}`;\n}\n\n/**\n * 241_600 → \"241.6K\". A thin, token-domain-named wrapper — see\n * `formatCompactNumber` below for the shared algorithm and its own reasoning.\n * Kept as its own function (rather than every call site switching to the\n * generic one directly) because \"tokens\" is a real vocabulary word in this\n * package's chat components, and renaming every call site to the generic name\n * would cost real diff for zero behavioral gain.\n */\nexport function formatTokens(tokens: number, locale: string): string {\n  return formatCompactNumber(tokens, locale);\n}\n\n/**\n * A GENERIC large count, abbreviated the way the locale writes it: in en-US\n * `850` → `\"850\"`, `1_100` → `\"1.1K\"`, `3_400_000` → `\"3.4M\"`,\n * `4_400_000_000` → `\"4.4B\"`. `null` / `undefined` / non-finite → `\"—\"`.\n *\n * DX-4740: THE SUFFIXES COME FROM `Intl` (`notation: \"compact\"`), NOT FROM A\n * TABLE HERE. A hand-written T/B/M/k ladder is English: \"B\" for 10^9 reads as\n * \"billón\" (10^12) to an es-AR reader, and every other language has its own\n * words for thousand and million. en-US now writes an uppercase \"K\".\n *\n * One decimal at most, trimmed of a trailing \".0\" (`1_000_000` → `\"1M\"`, not\n * `\"1.0M\"`), and exact below 1,000 — a count small enough to read digit-by-digit\n * gets no abbreviation at all, since \"850\" is not improved by becoming \"0.9K\".\n * `formatTokens` is the token-budget's name for the same thing; this one is for\n * any large count a screen needs to abbreviate — a field tally, a donut's\n * fraction, a record count.\n *\n * NEGATIVE VALUES keep their sign (`-1_100` → `\"-1.1K\"`) rather than being\n * treated as absent — a generic count utility cannot assume its caller's\n * domain never has one.\n */\nexport function formatCompactNumber(value: number | null | undefined, locale: string): string {\n  if (value == null || !Number.isFinite(value)) return \"—\";\n  /* Below 1,000 (after rounding) the number is written whole. 999.6 rounds UP to 1,000 and so belongs to the compact branch. */\n  /* `Math.round(-0.4)` is -0, which prints \"-0\"; adding 0 turns it into 0. */\n  if (Math.abs(value) < 999.5) return numberFormat(locale, { maximumFractionDigits: 0 }).format(Math.round(value) + 0);\n  return numberFormat(locale, { notation: \"compact\", maximumFractionDigits: 1 }).format(value);\n}\n"],"names":["formatBytes","bytes","locale","numberFormat","units","value","unit","digits","formatTokens","tokens","formatCompactNumber"],"mappings":";AAwBO,SAASA,EAAYC,GAAeC,GAAwB;AACjE,MAAI,CAAC,OAAO,SAASD,CAAK,KAAKA,IAAQ,EAAG,QAAO;AACjD,MAAIA,IAAQ,KAAM,QAAO,GAAGE,EAAaD,GAAQ,CAAA,CAAE,EAAE,OAAOD,CAAK,CAAC;AAElE,QAAMG,IAAQ,CAAC,MAAM,MAAM,MAAM,IAAI;AACrC,MAAIC,IAAQJ,IAAQ,MAChBK,IAAO;AACX,SAAOD,KAAS,QAAQC,IAAOF,EAAM,SAAS;AAC5C,IAAAC,KAAS,MACTC,KAAQ;AAIV,QAAMC,IAASF,IAAQ,KAAK,IAAI;AAChC,SAAO,GAAGF,EAAaD,GAAQ,EAAE,uBAAuBK,GAAQ,uBAAuBA,EAAA,CAAQ,EAAE,OAAOF,CAAK,CAAC,IAAID,EAAME,CAAI,CAAC;AAC/H;AAUO,SAASE,EAAaC,GAAgBP,GAAwB;AACnE,SAAOQ,EAAoBD,GAAQP,CAAM;AAC3C;AAuBO,SAASQ,EAAoBL,GAAkCH,GAAwB;AAC5F,SAAIG,KAAS,QAAQ,CAAC,OAAO,SAASA,CAAK,IAAU,MAGjD,KAAK,IAAIA,CAAK,IAAI,QAAcF,EAAaD,GAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK,MAAMG,CAAK,IAAI,CAAC,IAC5GF,EAAaD,GAAQ,EAAE,UAAU,WAAW,uBAAuB,EAAA,CAAG,EAAE,OAAOG,CAAK;AAC7F;"}

package/dist/lib/group-in-order.js

@@ -0,0 +1,13 @@
+function u(n, r, c) {
+  if (!n.some((e) => r(e))) return [{ label: void 0, items: [...n] }];
+  const s = [], t = /* @__PURE__ */ new Map();
+  for (const e of n) {
+    const o = r(e) || c;
+    t.has(o) || (s.push(o), t.set(o, [])), t.get(o).push(e);
+  }
+  return s.map((e) => ({ label: e, items: t.get(e) }));
+}
+export {
+  u as groupInOrder
+};
+//# sourceMappingURL=group-in-order.js.map

package/dist/lib/group-in-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-in-order.js","sources":["../../src/lib/group-in-order.ts"],"sourcesContent":["/* DX-4963: the one grouping rule for a grid of rows under headings, shared by `ToggleMatrix` and (through `groupByCategory`) the\n   permission pickers, so it has exactly one implementation. */\n\nexport interface OrderedSection<T> {\n  /** `undefined` when nothing in the set names a group. */\n  label: string | undefined;\n  items: T[];\n}\n\n/**\n * Buckets items by their group, preserving first-seen order.\n *\n * Grouping is opt-in as a WHOLE, not per item: if not one item names a group this returns one ungrouped section rather than inventing\n * an \"Uncategorised\" heading nobody asked to see. When some items name a group and others do not, the rest go under `otherLabel`,\n * because at that point the absence of a group on a few items is itself information worth a heading.\n */\nexport function groupInOrder<T>(items: readonly T[], groupOf: (item: T) => string | undefined, otherLabel: string): OrderedSection<T>[] {\n  if (!items.some((item) => groupOf(item))) return [{ label: undefined, items: [...items] }];\n\n  const order: string[] = [];\n  const buckets = new Map<string, T[]>();\n  for (const item of items) {\n    const label = groupOf(item) || otherLabel;\n    if (!buckets.has(label)) {\n      order.push(label);\n      buckets.set(label, []);\n    }\n    buckets.get(label)!.push(item);\n  }\n  return order.map((label) => ({ label, items: buckets.get(label)! }));\n}\n"],"names":["groupInOrder","items","groupOf","otherLabel","item","order","buckets","label"],"mappings":"AAgBO,SAASA,EAAgBC,GAAqBC,GAA0CC,GAAyC;AACtI,MAAI,CAACF,EAAM,KAAK,CAACG,MAASF,EAAQE,CAAI,CAAC,UAAU,CAAC,EAAE,OAAO,QAAW,OAAO,CAAC,GAAGH,CAAK,GAAG;AAEzF,QAAMI,IAAkB,CAAA,GAClBC,wBAAc,IAAA;AACpB,aAAWF,KAAQH,GAAO;AACxB,UAAMM,IAAQL,EAAQE,CAAI,KAAKD;AAC/B,IAAKG,EAAQ,IAAIC,CAAK,MACpBF,EAAM,KAAKE,CAAK,GAChBD,EAAQ,IAAIC,GAAO,EAAE,IAEvBD,EAAQ,IAAIC,CAAK,EAAG,KAAKH,CAAI;AAAA,EAC/B;AACA,SAAOC,EAAM,IAAI,CAACE,OAAW,EAAE,OAAAA,GAAO,OAAOD,EAAQ,IAAIC,CAAK,EAAA,EAAK;AACrE;"}

package/dist/lib/header-fold.js

@@ -0,0 +1,11 @@
+import { useContext as o, createContext as n } from "react";
+const r = n(0);
+function c(e) {
+  const t = o(r);
+  return t !== 0 && t < e;
+}
+export {
+  r as HeaderWidthContext,
+  c as useHeaderFold
+};
+//# sourceMappingURL=header-fold.js.map

package/dist/lib/header-fold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-fold.js","sources":["../../src/lib/header-fold.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/* ============================================================================\n   HEADER FOLD (DX-5319)\n\n   A header that runs out of room has two honest options: let its controls be\n   squeezed (they shrank to thin lines before this existed) or move the\n   least important of them somewhere else. This is the second, and it is a\n   WIDTH decision, so it is made from the one number that does not depend on the\n   header's contents: the width of the `<header>` itself, which the viewport and\n   the sidebar set and a control appearing or vanishing cannot move. A fold\n   decided from \"did the contents overflow?\" would flicker, because folding a\n   control makes room and room un-folds it; a fold decided from the header's width\n   cannot.\n\n   `AppShell` measures its header and provides the width here. A control names\n   the header width below which it no longer fits (`useHeaderFold(minWidth)`),\n   and the SAME call, made again where the replacement lives (the account menu's\n   `actions`), agrees with it by construction: one threshold, two subtrees.\n\n   Unmeasured (no provider, or the first render before the layout effect has\n   read the header) is `0`, which reads as \"not folded\": the full header paints\n   first and a fold happens before the browser paints, never the other way\n   round.\n   ========================================================================= */\n\n/** The measured width of the `AppShell` header in CSS pixels; `0` until measured. */\nexport const HeaderWidthContext = createContext<number>(0);\n\n/**\n * True when the `AppShell` header is narrower than `minWidth` CSS pixels, i.e. the\n * control that asked no longer fits and should live in the account menu instead.\n * Call it from inside the shell's `header` or `sidebarFooter` subtree (a\n * component the consumer renders there), never from the component that renders\n * `<AppShell>` itself: the width is provided by the shell, below it.\n */\nexport function useHeaderFold(minWidth: number): boolean {\n  const width = useContext(HeaderWidthContext);\n  return width !== 0 && width < minWidth;\n}\n"],"names":["HeaderWidthContext","createContext","useHeaderFold","minWidth","width","useContext"],"mappings":";AA2BO,MAAMA,IAAqBC,EAAsB,CAAC;AASlD,SAASC,EAAcC,GAA2B;AACvD,QAAMC,IAAQC,EAAWL,CAAkB;AAC3C,SAAOI,MAAU,KAAKA,IAAQD;AAChC;"}