@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/drag-drop/shift.js

@@ -0,0 +1,157 @@
+import { isLaneDrop as C } from "../../lib/dnd/cross-drop.js";
+const k = { x: "left", y: "top" }, E = { x: "right", y: "bottom" }, M = { x: "width", y: "height" };
+function O(e, n, i) {
+  const r = $(e, n, i);
+  if (r !== null) return r;
+  for (const o of e.containers) {
+    if (o.id === n) continue;
+    const t = $(e, o.id, o.axis);
+    if (t !== null) return t;
+  }
+  return 0;
+}
+function $(e, n, i) {
+  const r = e.items.filter((t) => t.container === n);
+  for (let t = 1; t < r.length; t++) {
+    if (r[t].group !== r[t - 1].group) continue;
+    const p = r[t].rect[k[i]] - r[t - 1].rect[E[i]];
+    if (p >= 0) return p;
+  }
+  return r.find((t) => (t.marginEnd ?? 0) > 0)?.marginEnd ?? null;
+}
+function P(e) {
+  return e.phase !== "dragging" || !e.id || !e.point || !e.grab ? null : { x: e.point.x - e.grab.x, y: e.point.y - e.grab.y };
+}
+function D(e, n, i) {
+  if (n.phase !== "dragging" || !n.id || !n.from || !n.over || !e) return null;
+  const r = e.containers.find((u) => u.id === i), o = e.items.find((u) => u.id === n.id);
+  if (!r || !o) return null;
+  const t = r.axis, p = o.rect[M[t]], h = O(e, i, t), m = p + h, g = n.from.container === i ? n.from.index : null, s = n.over.container === i && !C(r.crossDrop, n.from.container, i) ? n.over.index : null, d = e.items.filter((u) => u.container === i && u.id !== n.id), c = y(d, (u) => u.group, o.group, g), l = y(d, (u) => u.piece, o.piece, g), f = c.emptyId !== null ? p : m, a = (u) => g !== null && u >= g ? -f : 0, w = s === null ? null : F(d, c.spans, o, s), x = s === null ? null : L(d, w, s), b = x?.kind === "group-empty" ? p : m, v = (u) => s !== null && u >= s ? b : 0, I = H(l.spans, {
+    carried: o,
+    holder: w,
+    closesAt: g,
+    opensAt: s,
+    openAmount: b,
+    closeAmount: f,
+    gapSize: p,
+    step: m,
+    groupEmptied: c.emptyId !== null
+  }), S = x && R(x, I.headClosed, d, a, s, h);
+  return {
+    axis: t,
+    restCount: d.length,
+    gapSize: p,
+    step: m,
+    spacing: h,
+    markerAt: s,
+    marker: S,
+    itemShift: (u) => a(u) + v(u),
+    pieces: I.shifts
+  };
+}
+function H(e, { carried: n, holder: i, closesAt: r, opensAt: o, openAmount: t, closeAmount: p, gapSize: h, step: m, groupEmptied: g }) {
+  const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
+  for (const [c, l] of e) {
+    const f = r !== null && n.piece === c, a = i?.piece === c, w = l.first === l.end, x = i === null ? void 0 : e.get(i.piece)?.first, b = !a && (!w || x === void 0 || x < l.first), v = r !== null && (l.first > r || l.first === r && !f) ? -p : 0, I = o !== null && (o < l.first || o === l.first && b) ? t : 0, S = f && !a ? g ? h : m : 0, u = a && !f ? t : 0;
+    d.set(c, v), s.set(c, { headShift: v + I, frameDelta: u - S });
+  }
+  return { shifts: s, headClosed: d };
+}
+function R(e, n, i, r, o, t) {
+  switch (e.kind) {
+    case "item-before":
+      return { placement: e, shift: r(e.restIndex) };
+    case "item-after":
+      return { placement: e, shift: r(e.restIndex) + t - (i[e.restIndex].marginEnd ?? t) };
+    case "group-before":
+      return { placement: e, shift: n.get(e.piece) };
+    case "group-after":
+      return { placement: e, shift: r(i.length - 1) };
+    case "group-empty":
+      return { placement: e, shift: r(o) };
+    case "container-empty":
+      return { placement: e, shift: r(0) };
+  }
+}
+function y(e, n, i, r) {
+  const o = /* @__PURE__ */ new Map();
+  return e.forEach((t, p) => {
+    const h = n(t);
+    if (h === void 0) return;
+    const m = o.get(h);
+    if (!m) o.set(h, { first: p, end: p + 1 });
+    else if (m.end === p) m.end = p + 1;
+    else throw new Error(`the cards of group box (or piece) "${h}" are not consecutive in their container: item ${t.id} follows a card outside it; draw one box's pieces next to each other`);
+  }), r !== null && i !== void 0 && !o.has(i) ? (o.set(i, { first: r, end: r }), { spans: o, emptyId: i }) : { spans: o, emptyId: null };
+}
+function T(e, n, i) {
+  return i > e.first && i < e.end ? !0 : n && (i === e.first || i === e.end);
+}
+function F(e, n, i, r) {
+  for (const [o, t] of n)
+    if (T(t, i.group === o, r))
+      return t.first === t.end ? { group: o, piece: z(i, o), empty: !0 } : { group: o, piece: z(e[Math.min(r, t.end - 1)], o), empty: !1 };
+  return null;
+}
+function z(e, n) {
+  if (e.group !== n || e.piece === void 0)
+    throw new Error(`item ${e.id} sits in group box "${n}" but is registered as group "${e.group}", piece "${e.piece}"`);
+  return e.piece;
+}
+function L(e, n, i) {
+  if (n !== null)
+    return n.empty ? { kind: "group-empty", piece: n.piece } : i < e.length && e[i].group === n.group ? { kind: "item-before", restIndex: i } : { kind: "item-after", restIndex: i - 1 };
+  if (e.length === 0) return { kind: "container-empty" };
+  if (i < e.length) {
+    const o = e[i];
+    return o.piece === void 0 ? { kind: "item-before", restIndex: i } : { kind: "group-before", piece: o.piece };
+  }
+  const r = e[e.length - 1];
+  return r.piece === void 0 ? { kind: "item-after", restIndex: e.length - 1 } : { kind: "group-after", piece: r.piece };
+}
+function Z(e, n) {
+  if (n.phase !== "dragging" || !n.id || !n.over || !e) return null;
+  const i = n.over.container, r = D(e, n, i), o = e.containers.find((f) => f.id === i);
+  if (!r || !o) return null;
+  const t = r.axis, p = e.items.filter(
+    (f) => f.container === i && f.id !== n.id
+  ), h = t === "x" ? "top" : "left", m = t === "x" ? "height" : "width";
+  let g, s = o.rect;
+  const { marker: d } = r, c = d?.placement;
+  if (c?.kind === "group-empty")
+    s = e.items.find((f) => f.id === n.id).rect, g = s[k[t]];
+  else if (!c || c.kind === "container-empty")
+    g = o.rect[k[t]];
+  else if (c.kind === "item-before")
+    s = p[c.restIndex].rect, g = s[k[t]] + d.shift;
+  else if (c.kind === "item-after") {
+    const f = p[c.restIndex];
+    s = f.rect, g = s[E[t]] + d.shift + (f.marginEnd ?? r.spacing);
+  } else {
+    const f = e.groups.find((a) => a.container === i && a.piece === c.piece);
+    if (!f) throw new Error(`group piece "${c.piece}" is drawn in container "${i}" but was not registered`);
+    s = f.rect, g = c.kind === "group-before" ? s[k[t]] + d.shift : s[E[t]] + d.shift + r.spacing;
+  }
+  const l = { start: g, size: r.gapSize };
+  return t === "x" ? {
+    left: l.start,
+    width: l.size,
+    top: s[h],
+    height: s[m]
+  } : {
+    top: l.start,
+    height: l.size,
+    left: s[h],
+    width: s[m]
+  };
+}
+function j(e, n) {
+  return { translate: e === "x" ? `${n}px 0` : `0 ${n}px` };
+}
+export {
+  P as carriedPoint,
+  D as containerShift,
+  Z as gapRect,
+  j as shiftStyle
+};
+//# sourceMappingURL=shift.js.map

package/dist/components/drag-drop/shift.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shift.js","sources":["../../../src/components/drag-drop/shift.ts"],"sourcesContent":["import { isLaneDrop } from \"../../lib/dnd\";\nimport type {\n  ContainerId,\n  DragAxis,\n  DragState,\n  GroupId,\n  ItemRect,\n  LayoutSnapshot,\n  PieceId,\n  Point,\n} from \"../../lib/dnd\";\n\n/* ----------------------------------------------------------------------------\n   THE SIBLING SHIFT, as arithmetic.\n\n   A reorder reads as objects moving out of each other's way, not as a list with\n   a line drawn through it. Two displacements produce that, and they are\n   independent:\n\n     THE HOME SLOT CLOSES.  Everything after the carried item's own position\n                            moves back by one step, so the space it occupied\n                            disappears.\n     THE GAP OPENS.         Everything at or after the insertion index moves\n                            forward by one step, so a space appears where the\n                            item would land.\n\n   Both are stated against `rest` — the container's items with the carried one\n   removed — which is the same list `DropTarget.index` is counted against (see\n   `lib/dnd/types.ts`). That is the whole reason same-container and\n   cross-container moves need no special cases here: for a same-container move\n   the two displacements cancel outside the range between the two positions,\n   and inside it exactly one applies.\n\n   IT IS `translate`, NEVER LAYOUT, AND NEVER ON THE MEASURED ELEMENT. The\n   engine hit-tests a snapshot of every box taken at pickup and re-taken on\n   scroll, resize and every auto-scroll frame (`geometry.ts#measure`, which\n   calls `getBoundingClientRect`) — and `getBoundingClientRect` reports the\n   TRANSFORMED box. So a shift applied to the registered element would feed the\n   opened gap back into the midpoint rule that decided to open it: the insertion\n   point moves, which moves the boxes, which moves the insertion point. The\n   shift therefore lives on a child of the registered element, one level in.\n   A transformed descendant does not change its ancestor's box, so the engine\n   goes on measuring the layout the user's pointer is actually being compared\n   against, and the collision stays stable while the picture moves.\n\n   Everything here is pure and takes a snapshot rather than a DOM, so the\n   arithmetic is checkable against hand-written rectangles — `drag-drop.test.tsx`\n   does exactly that, including the cases a browser makes expensive to reach.\n   -------------------------------------------------------------------------- */\n\n/** Which edge of a rect starts, ends and sizes a container's reorder axis. */\nconst START = { x: \"left\", y: \"top\" } as const;\nconst END = { x: \"right\", y: \"bottom\" } as const;\nconst SIZE = { x: \"width\", y: \"height\" } as const;\n\n/**\n * DX-5522: where the insertion marker is drawn, which is the part of the picture a group box makes ambiguous. A boundary\n * between two items at the edge of a group box is the trailing edge of one entry and the leading edge of the next, and a\n * marker drawn at the DOM position of either would sit inside a box the card does not belong to. So the kind says which\n * element draws it, and every kind sits where the gap is, never straddling a box edge:\n *\n *   item-before / item-after   an item draws it directly before / after itself (inside its group box when it has one);\n *   group-before / group-after the group box draws it outside its own frame, between two entries of the container: the\n *                              box's first piece before it, its last piece after it (DX-5521, see `PieceId`);\n *   group-empty                the carried card is the only card of its group box: the piece it was in draws it there;\n *   container-empty            the container holds nothing else, so it draws the marker itself.\n */\nexport type MarkerPlacement =\n  | { kind: \"item-before\"; restIndex: number }\n  | { kind: \"item-after\"; restIndex: number }\n  | { kind: \"group-before\"; piece: PieceId }\n  | { kind: \"group-after\"; piece: PieceId }\n  | { kind: \"group-empty\"; piece: PieceId }\n  | { kind: \"container-empty\" };\n\n/** A marker's placement and the displacement it takes (the home slot's closing only: it IS the gap). */\nexport interface MarkerSlot {\n  placement: MarkerPlacement;\n  shift: number;\n}\n\n/**\n * DX-5522: what a group box does while a card is carried. Its cards move by `itemShift` like any others; the box around\n * them is the consumer's, and it has to follow them or the cards that slide out of it draw over whatever lies outside.\n * DX-5521: stated per PIECE of the box (see `PieceId`): a box drawn in one piece is the case it always was.\n */\nexport interface GroupShift {\n  /** How far the piece's near edge and header (everything above its first card) move: the net displacement at its top edge. */\n  headShift: number;\n  /**\n   * How much the piece's far edge moves relative to its near edge: negative when the carried card leaves the piece (it\n   * shrinks by the card's slot), positive when the marker opens a gap inside it (it grows by the gap), zero otherwise.\n   */\n  frameDelta: number;\n}\n\nexport interface ContainerShift {\n  axis: DragAxis;\n  /** Items in this container with the carried one removed. */\n  restCount: number;\n  /**\n   * The carried item's extent along the axis — the size of the hole that opens.\n   * The step neighbours move by is this PLUS the spacing between two items,\n   * because the arriving item brings its own gap with it.\n   */\n  gapSize: number;\n  /** `gapSize` plus the measured spacing: how far one neighbour moves. */\n  step: number;\n  /** Measured spacing between two adjacent items of this container. */\n  spacing: number;\n  /** Insertion index in this container, or null when it is not the target. */\n  markerAt: number | null;\n  /** The marker's placement and displacement, or null when this container draws none. */\n  marker: MarkerSlot | null;\n  /** Displacement along the axis, in px, for the rest item at `restIndex`. */\n  itemShift: (restIndex: number) => number;\n  /** DX-5522 / DX-5521: what each piece of a group box in this container does, by piece id. */\n  pieces: ReadonlyMap<PieceId, GroupShift>;\n}\n\n/**\n * Spacing between two adjacent items of one container, measured rather than\n * assumed.\n *\n * Measured because the consumer sets it: `<DragDropItem>` ships an 8px bottom\n * margin and `className` overrides it, so any constant here would be a second\n * copy of a number the markup already owns — right until someone changes one of\n * them, at which point the gap opens the wrong size and nothing reports it.\n *\n * A container that holds fewer than two items has no spacing to measure, so the\n * first container that does answers for it. They share a stylesheet; the\n * alternative is a lone card in an empty column opening a gap with no gap in it.\n */\nfunction spacingOf(\n  layout: LayoutSnapshot,\n  container: ContainerId,\n  axis: DragAxis,\n): number {\n  const here = measureSpacing(layout, container, axis);\n  if (here !== null) return here;\n  for (const c of layout.containers) {\n    if (c.id === container) continue;\n    const other = measureSpacing(layout, c.id, c.axis);\n    if (other !== null) return other;\n  }\n  return 0;\n}\n\nfunction measureSpacing(\n  layout: LayoutSnapshot,\n  container: ContainerId,\n  axis: DragAxis,\n): number | null {\n  /* `measure()` emits items in container-then-index order, so consecutive\n     entries of one container are consecutive on screen. */\n  const items = layout.items.filter((i) => i.container === container);\n  for (let i = 1; i < items.length; i++) {\n    /* DX-5522: two cards in different group boxes are a whole box edge apart (padding, border, the box's own margin), which\n       is not the spacing between two cards; only a pair inside one box, or a pair of loose cards, measures it. */\n    if (items[i].group !== items[i - 1].group) continue;\n    const distance = items[i].rect[START[axis]] - items[i - 1].rect[END[axis]];\n    /* Negative means the two overlap — a wrapped row, or a box measured\n       mid-animation. It is not a spacing, so keep looking. */\n    if (distance >= 0) return distance;\n  }\n  /* A container whose every neighbouring pair straddles a box edge still says its spacing in the margin it leaves after a card. */\n  const margin = items.find((i) => (i.marginEnd ?? 0) > 0);\n  return margin?.marginEnd ?? null;\n}\n\n/**\n * Where a pointer-carried card sits on screen, in VIEWPORT coordinates — what\n * makes the thing under the cursor BE the thing you picked up.\n *\n * A VIEWPORT POINT, NOT A DISPLACEMENT, AND THAT IS THE WHOLE FIX. This was an\n * offset from the card's resting box for exactly as long as the ROW did the\n * carrying, under an in-flow `translate` on a child of the measured element.\n * Two things are wrong with carrying a card in flow and neither can be tuned\n * away:\n *\n *   IT CANNOT LEAVE.  A descendant of a scroll container is clipped by it. A\n *                     card carried past the edge of its own list is cut off at\n *                     that edge, and the container cannot stop clipping — it is\n *                     the scroller, and a scrolling axis forces its cross axis\n *                     to a non-`visible` value (see `recipe.ts`).\n *   IT INFLATES.      A transformed in-flow element contributes to its\n *                     ancestor's SCROLLABLE OVERFLOW REGION, so the held row\n *                     grew the extent of the very container it was inside —\n *                     measured 512 -> 607px on a straight 90px sideways drag,\n *                     which is auto-scroll theft and then a runaway.\n *\n * Neither is about SIZE, so neither is fixed by shrinking the card: the growth\n * is the card following the hand, and a held object has to follow the hand on\n * BOTH axes or it slides out from under the cursor the moment the hand moves\n * the other way. Measured: dropping the 2% lift scale took a 95.12px overhang\n * to 90.00px, and 90px was the pointer's own sideways travel. So the card is\n * carried by a `fixed` clone portalled to the body (`DragDrop.tsx#CarriedCard`)\n * — out of the flow entirely, where there is no ancestor to clip it and no\n * extent to inflate.\n *\n * `grab` is where inside the box the press landed, so the card tracks the point\n * that was actually pressed rather than snapping a corner to the cursor.\n *\n * Null in keyboard mode: there is no pointer to follow, and a keyboard drag\n * moves slot to slot with the marker saying where. That is not a fallback — it\n * is a different question with a different honest answer, and `gapRect` is it.\n */\nexport function carriedPoint(state: DragState): Point | null {\n  if (state.phase !== \"dragging\" || !state.id) return null;\n  if (!state.point || !state.grab) return null;\n  return { x: state.point.x - state.grab.x, y: state.point.y - state.grab.y };\n}\n\n/**\n * Everything one container needs to render the shift, or null when no drag is\n * in flight and nothing should move.\n *\n * THE HOME SLOT CLOSES WHENEVER A DRAG IS LIVE, with no condition on it, and\n * that is a consequence of there being ONE carry mechanism rather than a\n * simplification of two. There used to be a `lifted` argument here, because a\n * portalled clone and an in-flow `translate` were different answers to \"is the\n * card still in its slot\" and a keyboard drag with no clone was a third. Every\n * drag now lifts the card out into a portalled clone — pointer and keyboard\n * alike — so the slot is empty every time, and a caller cannot get this wrong\n * by forgetting to say so.\n */\nexport function containerShift(\n  layout: LayoutSnapshot | null,\n  state: DragState,\n  container: ContainerId,\n): ContainerShift | null {\n  if (state.phase !== \"dragging\" || !state.id || !state.from || !state.over) return null;\n  if (!layout) return null;\n\n  const registered = layout.containers.find((c) => c.id === container);\n  const carried = layout.items.find((i) => i.id === state.id);\n  if (!registered || !carried) return null;\n\n  const axis = registered.axis;\n  const gapSize = carried.rect[SIZE[axis]];\n  const spacing = spacingOf(layout, container, axis);\n  const step = gapSize + spacing;\n\n  /* `from.index` counts the list WITH the carried item present, so an item is\n     after it exactly when its rest-index is at or beyond that number. That\n     coincidence is the `DropTarget.index` contract doing its job — see\n     `isNoOp` in `lib/dnd/geometry.ts` for the same identity from the other\n     side. */\n  const closesAt = state.from.container === container ? state.from.index : null;\n  /* DX-4583: a card carried in from elsewhere to a lane that takes it as a whole\n     opens no gap and shows no marker — there is no position to show. Read from\n     the layout the shift is computed from, so it cannot disagree with `gapRect`. */\n  const opensAt =\n    state.over.container === container && !isLaneDrop(registered.crossDrop, state.from.container, container)\n      ? state.over.index\n      : null;\n\n  const rest = layout.items.filter((i) => i.container === container && i.id !== state.id);\n  const groups = spansOf(rest, (item) => item.group, carried.group, closesAt);\n  const pieces = spansOf(rest, (item) => item.piece, carried.piece, closesAt);\n\n  /* DX-5522: a card that is the ONLY card of its group box leaves no sibling behind to have been spaced from it, so the slot\n     it closes (and the gap it reopens in its own box) is its own size, not a size plus a spacing. */\n  const closeAmount = groups.emptyId !== null ? gapSize : step;\n  const closed = (restIndex: number) =>\n    closesAt !== null && restIndex >= closesAt ? -closeAmount : 0;\n\n  const holder = opensAt === null ? null : gapHolder(rest, groups.spans, carried, opensAt);\n  const placement = opensAt === null ? null : placeMarker(rest, holder, opensAt);\n  const openAmount = placement?.kind === \"group-empty\" ? gapSize : step;\n  const opened = (restIndex: number) => (opensAt !== null && restIndex >= opensAt ? openAmount : 0);\n\n  const shifts = pieceShiftsOf(pieces.spans, {\n    carried,\n    holder,\n    closesAt,\n    opensAt,\n    openAmount,\n    closeAmount,\n    gapSize,\n    step,\n    groupEmptied: groups.emptyId !== null,\n  });\n  const marker = placement && markerSlot(placement, shifts.headClosed, rest, closed, opensAt, spacing);\n\n  return {\n    axis,\n    restCount: rest.length,\n    gapSize,\n    step,\n    spacing,\n    markerAt: opensAt,\n    marker,\n    itemShift: (restIndex) => closed(restIndex) + opened(restIndex),\n    pieces: shifts.shifts,\n  };\n}\n\n/** What `pieceShiftsOf` reads of the carry: the carried card, where the gap is held, and the slot sizes `containerShift` worked out. */\ninterface PieceShiftInput {\n  carried: ItemRect;\n  /** The box and piece the opened gap is inside (`gapHolder`), or null when the gap is between entries. */\n  holder: GapHolder | null;\n  /** The rest-index the carried card's home slot closes at, or null when it was carried in from another container. */\n  closesAt: number | null;\n  /** The rest-index the gap opens at, or null when no gap opens in this container. */\n  opensAt: number | null;\n  openAmount: number;\n  closeAmount: number;\n  gapSize: number;\n  step: number;\n  /** The carried card was the only card of its box: the box it leaves shrinks by the card alone, with no spacing. */\n  groupEmptied: boolean;\n}\n\n/**\n * DX-5522: what each group box does while the card is carried: its header's net displacement and how far its frame changes.\n * DX-5521: worked out per piece of a box (see `PieceId`), from the cards that piece holds. A piece is home to the carried\n * card when the card was drawn in it, and the opened gap is inside it when it is inside the box and drawn by one of this\n * piece's cards (`gapHolder`), so where two pieces of one box meet, the gap belongs to exactly one of them.\n */\nfunction pieceShiftsOf(\n  spans: ReadonlyMap<PieceId, Span>,\n  { carried, holder, closesAt, opensAt, openAmount, closeAmount, gapSize, step, groupEmptied }: PieceShiftInput,\n): { shifts: Map<PieceId, GroupShift>; headClosed: Map<PieceId, number> } {\n  const shifts = new Map<PieceId, GroupShift>();\n  const headClosedOf = new Map<PieceId, number>();\n  for (const [piece, span] of spans) {\n    const homeHere = closesAt !== null && carried.piece === piece;\n    const inside = holder?.piece === piece;\n    /* The header sits above the piece's first card. It is behind the home slot (closed) unless the carried card was this\n       piece's first, and ahead of the gap (opened) unless the gap is inside this piece. A piece the carried card emptied\n       (DX-5521, its box goes on in another piece) stands where the card was, at the same boundary as the piece after it: the\n       gap opened there is ahead of it only when it is drawn in an earlier piece. */\n    const emptied = span.first === span.end;\n    const holderFirst = holder === null ? undefined : spans.get(holder.piece)?.first;\n    const gapAhead = !inside && (!emptied || holderFirst === undefined || holderFirst < span.first);\n    const headClosed = closesAt !== null && (span.first > closesAt || (span.first === closesAt && !homeHere)) ? -closeAmount : 0;\n    const headOpened = opensAt !== null && (opensAt < span.first || (opensAt === span.first && gapAhead)) ? openAmount : 0;\n    const leaves = homeHere && !inside ? (groupEmptied ? gapSize : step) : 0;\n    const enters = inside && !homeHere ? openAmount : 0;\n    headClosedOf.set(piece, headClosed);\n    shifts.set(piece, { headShift: headClosed + headOpened, frameDelta: enters - leaves });\n  }\n  return { shifts, headClosed: headClosedOf };\n}\n\n/** DX-5522: the marker's displacement for its placement: the home slot's closing, which IS the gap. */\nfunction markerSlot(\n  placement: MarkerPlacement,\n  headClosed: ReadonlyMap<PieceId, number>,\n  rest: readonly ItemRect[],\n  closed: (restIndex: number) => number,\n  opensAt: number | null,\n  spacing: number,\n): MarkerSlot {\n  switch (placement.kind) {\n    case \"item-before\":\n      return { placement, shift: closed(placement.restIndex) };\n    case \"item-after\":\n      /* The marker is zero-sized and sits where the item's trailing margin ends; the gap starts a spacing after the\n         item. The last card of a group box has no trailing margin, so the marker makes the difference up. */\n      return { placement, shift: closed(placement.restIndex) + spacing - (rest[placement.restIndex].marginEnd ?? spacing) };\n    case \"group-before\":\n      /* The piece is the one the next rest card is drawn in (`placeMarker`), so `pieceShiftsOf` has an entry for it. */\n      return { placement, shift: headClosed.get(placement.piece)! };\n    case \"group-after\":\n      return { placement, shift: closed(rest.length - 1) };\n    case \"group-empty\":\n      return { placement, shift: closed(opensAt!) };\n    case \"container-empty\":\n      return { placement, shift: closed(0) };\n  }\n}\n\n/** A run of cards in a container's rest list: the boundary before its first card and the boundary after its last. */\ninterface Span {\n  first: number;\n  end: number;\n}\n\n/**\n * DX-5522: the span of every group box in a container (the carried card taken out), keyed by what `keyOf` reads off a card:\n * its group (a whole box) or, DX-5521, its piece. The carried card's own key is kept even when no other card is left under\n * it: its box (or piece) is still drawn, around the hole, and `emptyId` names it.\n *\n * DX-5521: a box's cards, and a piece's, are consecutive in their container (`DragDropGroup`'s contract). A box whose\n * pieces are drawn apart (another card or box between them) would let a card be carried \"inside\" it across whatever lies\n * between, so a key whose cards are not consecutive throws instead of being framed as one span.\n */\nfunction spansOf<K extends string>(\n  rest: readonly ItemRect[],\n  keyOf: (item: ItemRect) => K | undefined,\n  carriedKey: K | undefined,\n  closesAt: number | null,\n): { spans: Map<K, Span>; emptyId: K | null } {\n  const spans = new Map<K, Span>();\n  rest.forEach((item, at) => {\n    const key = keyOf(item);\n    if (key === undefined) return;\n    const span = spans.get(key);\n    if (!span) spans.set(key, { first: at, end: at + 1 });\n    else if (span.end === at) span.end = at + 1;\n    else throw new Error(`the cards of group box (or piece) \"${key}\" are not consecutive in their container: item ${item.id} follows a card outside it; draw one box's pieces next to each other`);\n  });\n  if (closesAt !== null && carriedKey !== undefined && !spans.has(carriedKey)) {\n    spans.set(carriedKey, { first: closesAt, end: closesAt });\n    return { spans, emptyId: carriedKey };\n  }\n  return { spans, emptyId: null };\n}\n\n/**\n * DX-5522: is the insertion boundary `at` inside this group box? Strictly between two of its cards, always. At the box's\n * leading or trailing edge it is the boundary between two entries of the container, and it belongs to the box only when the\n * carried card is one of the box's own (a card dropped there is drawn in it): any other card is placed between entries,\n * outside every frame.\n */\nfunction insideSpan(span: Span, carriedIsMember: boolean, at: number): boolean {\n  if (at > span.first && at < span.end) return true;\n  return carriedIsMember && (at === span.first || at === span.end);\n}\n\n/** The box the opened gap is inside, and the piece of it that draws the gap. */\ninterface GapHolder {\n  group: GroupId;\n  piece: PieceId;\n  /** The box has no card left but the carried one: the gap is the hole it left. */\n  empty: boolean;\n}\n\n/**\n * The box (by `insideSpan`) the insertion boundary `at` is inside, or null when it is between entries. DX-5521: and the\n * piece that holds it, which is the piece of the card the marker is drawn beside: the card after the boundary, or the box's\n * last card at its trailing edge. Where two pieces of the box meet, that is the later piece's first card.\n */\nfunction gapHolder(rest: readonly ItemRect[], spans: ReadonlyMap<GroupId, Span>, carried: ItemRect, at: number): GapHolder | null {\n  for (const [group, span] of spans) {\n    if (!insideSpan(span, carried.group === group, at)) continue;\n    /* An emptied box is the carried card's own (`spansOf` keeps only that one empty), so its piece is the carried card's. */\n    if (span.first === span.end) return { group, piece: pieceIn(carried, group), empty: true };\n    return { group, piece: pieceIn(rest[Math.min(at, span.end - 1)], group), empty: false };\n  }\n  return null;\n}\n\n/**\n * DX-5521: the piece `item` is drawn in, as a card of `group`. Every grouped card names its piece (`useDraggable` throws on\n * a group without one), and a card inside a box's span is that box's own because `spansOf` refused a box whose cards are\n * not consecutive. Either failing means the layout does not describe what is drawn: throw rather than frame a wrong piece.\n */\nfunction pieceIn(item: ItemRect, group: GroupId): PieceId {\n  if (item.group !== group || item.piece === undefined) {\n    throw new Error(`item ${item.id} sits in group box \"${group}\" but is registered as group \"${item.group}\", piece \"${item.piece}\"`);\n  }\n  return item.piece;\n}\n\n/** DX-5522: which element draws the marker for the insertion boundary `at`. See `MarkerPlacement`. */\nfunction placeMarker(rest: readonly ItemRect[], holder: GapHolder | null, at: number): MarkerPlacement {\n  if (holder !== null) {\n    if (holder.empty) return { kind: \"group-empty\", piece: holder.piece };\n    return at < rest.length && rest[at].group === holder.group ? { kind: \"item-before\", restIndex: at } : { kind: \"item-after\", restIndex: at - 1 };\n  }\n  if (rest.length === 0) return { kind: \"container-empty\" };\n  if (at < rest.length) {\n    const next = rest[at];\n    return next.piece === undefined ? { kind: \"item-before\", restIndex: at } : { kind: \"group-before\", piece: next.piece };\n  }\n  const last = rest[rest.length - 1];\n  return last.piece === undefined ? { kind: \"item-after\", restIndex: rest.length - 1 } : { kind: \"group-after\", piece: last.piece };\n}\n\n/** A rect in viewport coordinates. */\nexport interface GapRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Where the opened gap sits on screen, for a carried card that has no pointer\n * to follow.\n *\n * Viewport coordinates, taken from the same snapshot the shift is computed\n * from, so the two cannot disagree about where the hole is. The snapshot is\n * re-taken whenever the keyboard insertion point moves out of view\n * (`autoscroll.ts#keepKeyboardTargetVisible`), which is the only thing that\n * moves these boxes during a keyboard drag.\n */\nexport function gapRect(layout: LayoutSnapshot | null, state: DragState): GapRect | null {\n  if (state.phase !== \"dragging\" || !state.id || !state.over) return null;\n  if (!layout) return null;\n\n  const container = state.over.container;\n  const shift = containerShift(layout, state, container);\n  const registered = layout.containers.find((c) => c.id === container);\n  if (!shift || !registered) return null;\n\n  const axis = shift.axis;\n  const rest = layout.items.filter(\n    (i) => i.container === container && i.id !== state.id,\n  );\n  // I18N-ALLOW: CSS property name chosen by the drag axis\n  const cross = axis === \"x\" ? \"top\" : \"left\";\n  const crossSize = axis === \"x\" ? \"height\" : \"width\";\n\n  let start: number;\n  let anchor = registered.rect;\n  const { marker } = shift;\n  const placement = marker?.placement;\n  if (placement?.kind === \"group-empty\") {\n    /* DX-5522: the carried card is the only card of its box, so the gap is the hole it left. */\n    anchor = layout.items.find((i) => i.id === state.id)!.rect;\n    start = anchor[START[axis]];\n  } else if (!placement || placement.kind === \"container-empty\") {\n    /* An empty column has nothing to sit beside, so the gap starts where its\n       content does. The container's padding is not in the snapshot, so this is\n       the box's own edge — a few pixels high. */\n    /* DX-4583: a lane that takes the card as a whole has no position to sit at\n       either, so the clone snaps to the same edge, over a lane that may hold\n       cards. */\n    start = registered.rect[START[axis]];\n  } else if (placement.kind === \"item-before\") {\n    /* The neighbour has already moved out of the way by a whole step — the\n       card AND the spacing it brings with it — so the gap starts where the\n       neighbour was, less the home slot if that closed. */\n    anchor = rest[placement.restIndex].rect;\n    start = anchor[START[axis]] + marker!.shift;\n  } else if (placement.kind === \"item-after\") {\n    const item = rest[placement.restIndex];\n    anchor = item.rect;\n    start = anchor[END[axis]] + marker!.shift + (item.marginEnd ?? shift.spacing);\n  } else {\n    /* DX-5522: between two entries of the container, outside every frame: the group box beside the gap is the anchor (DX-5521:\n       its first piece before it, its last piece after it). */\n    const box = layout.groups.find((g) => g.container === container && g.piece === placement.piece);\n    if (!box) throw new Error(`group piece \"${placement.piece}\" is drawn in container \"${container}\" but was not registered`);\n    anchor = box.rect;\n    start =\n      placement.kind === \"group-before\"\n        ? anchor[START[axis]] + marker!.shift\n        : anchor[END[axis]] + marker!.shift + shift.spacing;\n  }\n\n  const along = { start, size: shift.gapSize };\n  return axis === \"x\"\n    ? {\n        left: along.start,\n        width: along.size,\n        top: anchor[cross],\n        height: anchor[crossSize],\n      }\n    : {\n        top: along.start,\n        height: along.size,\n        left: anchor[cross],\n        width: anchor[crossSize],\n      };\n}\n\n/**\n * The shift as an inline style.\n *\n * `translate` rather than `transform`, so a component can still rotate or scale\n * the same element without the two having to be composed into one string — the\n * floating clone does exactly that.\n */\nexport function shiftStyle(axis: DragAxis, distance: number): { translate: string } {\n  // I18N-ALLOW: CSS translate value built from the drag distance\n  return { translate: axis === \"x\" ? `${distance}px 0` : `0 ${distance}px` };\n}\n"],"names":["START","END","SIZE","spacingOf","layout","container","axis","here","measureSpacing","c","other","items","i","distance","carriedPoint","state","containerShift","registered","carried","gapSize","spacing","step","closesAt","opensAt","isLaneDrop","rest","groups","spansOf","item","pieces","closeAmount","closed","restIndex","holder","gapHolder","placement","placeMarker","openAmount","opened","shifts","pieceShiftsOf","marker","markerSlot","spans","groupEmptied","headClosedOf","piece","span","homeHere","inside","emptied","holderFirst","gapAhead","headClosed","headOpened","leaves","enters","keyOf","carriedKey","at","key","insideSpan","carriedIsMember","group","pieceIn","next","last","gapRect","shift","cross","crossSize","start","anchor","box","g","along","shiftStyle"],"mappings":"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"}

package/dist/components/edit/activation.js

@@ -0,0 +1,10 @@
+function n(t, i, e) {
+  if (!(i === void 0 || e !== void 0))
+    throw new Error(
+      `${t}: \`editing\` is controlled but \`onEditingChange\` is missing. The field hands the closed state back through it after every commit and Escape — without it the caller's \`editing\` stays true while the field is shut, and nothing is ever saved again. Pass both, or neither.`
+    );
+}
+export {
+  n as assertActivationPair
+};
+//# sourceMappingURL=activation.js.map

package/dist/components/edit/activation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activation.js","sources":["../../../src/components/edit/activation.ts"],"sourcesContent":["/**\n * The controlled activation pair every pencil-activated field takes, and the\n * pair `EditGutter` hands out — so wiring a pencil to a field is one spread.\n *\n * `editing` says whether the field is open. The field calls\n * `onEditingChange(false)` when it closes itself (a landed commit, Escape) and\n * when it declines to open (read-only); it never calls `onEditingChange(true)`\n * for an opening the caller made. The pair is all-or-nothing: a controlled\n * `editing` with no way to hand the closed state back would leave the field\n * shut after its first commit while the caller still believes it is open.\n */\nexport interface EditActivation {\n  editing: boolean;\n  onEditingChange: (editing: boolean) => void;\n}\n\n/**\n * Throws when a caller controls `editing` without `onEditingChange`. The\n * types already forbid it; this covers a caller that got past them (a cast,\n * a spread of `any`, plain JavaScript). DX-3372 review P0.\n */\nexport function assertActivationPair(\n  component: string,\n  editing: boolean | undefined,\n  onEditingChange: ((editing: boolean) => void) | undefined,\n): void {\n  if (editing === undefined || onEditingChange !== undefined) return;\n  throw new Error(\n    `${component}: \\`editing\\` is controlled but \\`onEditingChange\\` is missing. The field hands the ` +\n      \"closed state back through it after every commit and Escape — without it the caller's `editing` \" +\n      \"stays true while the field is shut, and nothing is ever saved again. Pass both, or neither.\",\n  );\n}\n"],"names":["assertActivationPair","component","editing","onEditingChange"],"mappings":"AAqBO,SAASA,EACdC,GACAC,GACAC,GACM;AACN,MAAI,EAAAD,MAAY,UAAaC,MAAoB;AACjD,UAAM,IAAI;AAAA,MACR,GAAGF,CAAS;AAAA,IAAA;AAIhB;"}

package/dist/components/edit/outcome.js

@@ -0,0 +1,47 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { Icon as o } from "../Icon.js";
+import { cn as s } from "../../lib/cn.js";
+function d(e) {
+  return typeof e == "object" && e !== null && "refusal" in e;
+}
+function f(e) {
+  return typeof e?.then == "function";
+}
+function m(e, r, t) {
+  if (r === "")
+    throw new Error(
+      `${e}: ${t} refused a value with an empty reason. A refusal nobody can read leaves the field open with nothing beside it — return ${t === "validate" ? "null" : "nothing"} to accept the value, or say why it cannot be used.`
+    );
+}
+function c({
+  id: e,
+  children: r,
+  className: t
+}) {
+  return /* @__PURE__ */ a(
+    "p",
+    {
+      id: e,
+      role: "alert",
+      "data-slot": "edit-outcome",
+      className: s(
+        "absolute top-full right-0 left-0 z-10 mt-1",
+        "flex items-start gap-1.5 rounded-md px-2 py-1.5",
+        "border border-danger-border bg-surface shadow-md",
+        "text-2xs font-medium text-danger-text",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ n(o, { name: "circle-alert", size: "xs", className: "mt-px shrink-0", "aria-hidden": !0 }),
+        /* @__PURE__ */ n("span", { children: r })
+      ]
+    }
+  );
+}
+export {
+  c as OutcomeMessage,
+  m as assertReadableRefusal,
+  f as isPromise,
+  d as isRefusal
+};
+//# sourceMappingURL=outcome.js.map

package/dist/components/edit/outcome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outcome.js","sources":["../../../src/components/edit/outcome.tsx"],"sourcesContent":["import { Icon } from \"../Icon\";\nimport { cn } from \"../../lib/cn\";\n\n/* ============================================================================\n   THE COMMIT-OUTCOME CONTRACT shared by every in-place editor — `InlineEdit`\n   (plain text) and `InlineMarkdownEdit` (markdown). DX-3372 extracted it from\n   `InlineEdit.tsx` rather than letting the markdown field grow a second copy:\n   one `{ refusal }` shape, one \"an empty reason is a bug\" rule, one message\n   overlay, so a save conflict reads identically whichever kind of field it\n   happened in.\n   ========================================================================= */\n\n/* NEUTRAL NAMES (DX-3372 review, L2): these serve every in-place editor, so\n   none of them is named after one. The `InlineEdit*` spellings were removed,\n   not aliased. */\n\n/**\n * The caller's refusal of a value, with the reason that will be shown.\n */\nexport interface EditRefusal {\n  refusal: string;\n}\n\n/** What `onCommit` may report. Returning nothing accepts the value. */\nexport type EditOutcome = void | EditRefusal;\n\n/** Every in-place editor's `onCommit`: the new value and the value editing began from. */\nexport type EditCommit = (value: string, base: string) => EditOutcome | Promise<EditOutcome>;\n\nexport function isRefusal(outcome: EditOutcome): outcome is EditRefusal {\n  return typeof outcome === \"object\" && outcome !== null && \"refusal\" in outcome;\n}\n\nexport function isPromise(outcome: EditOutcome | Promise<EditOutcome>): outcome is Promise<EditOutcome> {\n  return typeof (outcome as Promise<EditOutcome>)?.then === \"function\";\n}\n\n/**\n * A refusal nobody can read leaves the field open with nothing beside it — the\n * exact silent failure the outcome contract exists to rule out — so an empty\n * reason is a programming error, thrown rather than rendered.\n */\nexport function assertReadableRefusal(\n  component: string,\n  reason: string,\n  source: \"validate\" | \"onCommit\",\n): void {\n  if (reason !== \"\") return;\n  throw new Error(\n    `${component}: ${source} refused a value with an empty reason. A refusal ` +\n      \"nobody can read leaves the field open with nothing beside it — return \" +\n      `${source === \"validate\" ? \"null\" : \"nothing\"} to accept the value, or say why it cannot be used.`,\n  );\n}\n\n/**\n * THE MESSAGE IS AN OVERLAY, for the reason `InlineEdit` measured: in normal\n * flow a refusal grows the control's own wrapper, which inside a fixed-height\n * row shoves everything beside it. Absolutely positioned, it cannot contribute\n * height. The parent must be `relative`.\n */\nexport function OutcomeMessage({\n  id,\n  children,\n  className,\n}: {\n  id?: string;\n  children: string;\n  className?: string;\n}) {\n  return (\n    <p\n      id={id}\n      role=\"alert\"\n      data-slot=\"edit-outcome\"\n      className={cn(\n        \"absolute top-full right-0 left-0 z-10 mt-1\",\n        \"flex items-start gap-1.5 rounded-md px-2 py-1.5\",\n        \"border border-danger-border bg-surface shadow-md\",\n        \"text-2xs font-medium text-danger-text\",\n        className,\n      )}\n    >\n      <Icon name=\"circle-alert\" size=\"xs\" className=\"mt-px shrink-0\" aria-hidden />\n      <span>{children}</span>\n    </p>\n  );\n}\n"],"names":["isRefusal","outcome","isPromise","assertReadableRefusal","component","reason","source","OutcomeMessage","id","children","className","jsxs","cn","jsx","Icon"],"mappings":";;;AA6BO,SAASA,EAAUC,GAA8C;AACtE,SAAO,OAAOA,KAAY,YAAYA,MAAY,QAAQ,aAAaA;AACzE;AAEO,SAASC,EAAUD,GAA8E;AACtG,SAAO,OAAQA,GAAkC,QAAS;AAC5D;AAOO,SAASE,EACdC,GACAC,GACAC,GACM;AACN,MAAID,MAAW;AACf,UAAM,IAAI;AAAA,MACR,GAAGD,CAAS,KAAKE,CAAM,0HAElBA,MAAW,aAAa,SAAS,SAAS;AAAA,IAAA;AAEnD;AAQO,SAASC,EAAe;AAAA,EAC7B,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAIG;AACD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAH;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAF;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAG,EAACC,GAAA,EAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,kBAAiB,eAAW,GAAA,CAAC;AAAA,QAC3E,gBAAAD,EAAC,UAAM,UAAAJ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}

package/dist/components/edit/use-edit-session.js

@@ -0,0 +1,146 @@
+import { useRef as s, useState as R, useEffect as y } from "react";
+import { assertReadableRefusal as z, isPromise as O, isRefusal as A } from "./outcome.js";
+function U(p) {
+  const t = s(p);
+  t.current = p;
+  const [B, D] = R(!1), [M, h] = R(null), [P, g] = R(null), [v, C] = R(0), [w, G] = R(0), S = s(!1), o = s(0), d = s(p.value), a = s(null), x = s([]), H = s(0), m = s(null), i = s(null);
+  y(() => {
+    v > 0 && t.current.refocus();
+  }, [v]), y(() => {
+    w > 0 && i.current !== null && t.current.reopen();
+  }, [w]), y(
+    () => () => {
+      o.current += 1, m.current = null, i.current = null;
+    },
+    []
+  );
+  function f(e) {
+    S.current = e, D(e);
+  }
+  function I(e = null) {
+    f(!1), h(e), g(null);
+  }
+  function J(e, u = null, c) {
+    o.current += 1;
+    const r = c ?? i.current;
+    return i.current = null, m.current = null, d.current = r ? r.base : e, I(r ? r.refusal : u), r?.failure && g(r.failure), r ? r.text : e;
+  }
+  function K(e, u, c) {
+    const r = m.current;
+    if ("error" in e && c === o.current && t.current.onError?.(e.error), !(r === null || r.id !== u)) {
+      if (m.current = null, "error" in e)
+        i.current = { text: r.text, base: r.base, refusal: null, failure: t.current.failureMessage };
+      else if (A(e.outcome))
+        z(t.current.component, e.outcome.refusal, "onCommit"), i.current = { text: r.text, base: r.base, refusal: e.outcome.refusal, failure: null };
+      else
+        return;
+      G((l) => l + 1);
+    }
+  }
+  function L() {
+    o.current += 1, I();
+  }
+  function k(e, u) {
+    z(t.current.component, e, u), f(!1), h(e), C((c) => c + 1);
+  }
+  function q(e) {
+    f(!1), g(t.current.failureMessage), t.current.onError?.(e), C((u) => u + 1);
+  }
+  function E(e, u, c, r) {
+    const l = (n) => {
+      a.current = null;
+      try {
+        u === o.current ? c(n) : ("error" in n && t.current.onError?.(n.error), r?.(n));
+      } finally {
+        for (const b of x.current.splice(0)) b();
+      }
+    };
+    a.current = e.then(
+      (n) => l({ outcome: n }),
+      (n) => l({ error: n })
+    );
+  }
+  function F(e) {
+    if (a.current === null) {
+      e();
+      return;
+    }
+    const u = o.current;
+    x.current.push(() => {
+      u === o.current && F(e);
+    });
+  }
+  function W(e) {
+    if (A(e)) {
+      k(e.refusal, "onCommit");
+      return;
+    }
+    f(!1), t.current.close();
+  }
+  function j(e, u) {
+    if (S.current) return;
+    if (e === t.current.value || e === d.current) {
+      t.current.close();
+      return;
+    }
+    const c = u?.(e) ?? null;
+    if (c !== null) {
+      k(c, "validate");
+      return;
+    }
+    if (a.current !== null) {
+      f(!0), F(() => {
+        f(!1), j(e, u);
+      });
+      return;
+    }
+    const r = o.current;
+    let l;
+    try {
+      l = t.current.onCommit(e, d.current);
+    } catch (n) {
+      q(n);
+      return;
+    }
+    if (!O(l)) {
+      W(l);
+      return;
+    }
+    if (t.current.commitMode === "close") {
+      const n = ++H.current;
+      m.current = { id: n, text: e, base: d.current };
+      const b = (N) => K(N, n, r);
+      E(l, r, b, b), t.current.close();
+      return;
+    }
+    f(!0), E(l, r, (n) => "error" in n ? q(n.error) : W(n.outcome));
+  }
+  return {
+    pending: B,
+    refusal: M,
+    failure: P,
+    blocked: M ?? P,
+    get base() {
+      return d.current;
+    },
+    begin: J,
+    restored: () => i.current,
+    end: L,
+    commit: j,
+    refuse: k,
+    fail: q,
+    setPending: f,
+    isPending: () => S.current,
+    setRefusal: h,
+    clearFailure: () => g(null),
+    token: () => o.current,
+    busy: () => a.current !== null,
+    inFlight: () => a.current,
+    track: E,
+    whenIdle: F
+  };
+}
+export {
+  U as useEditSession
+};
+//# sourceMappingURL=use-edit-session.js.map

package/dist/components/edit/use-edit-session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edit-session.js","sources":["../../../src/components/edit/use-edit-session.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { assertReadableRefusal, isPromise, isRefusal, type EditCommit, type EditOutcome } from \"./outcome\";\n\n/* ============================================================================\n   THE EDIT SESSION — the one commit state machine behind every in-place\n   editor (`InlineEdit`, `InlineMarkdownEdit`). DX-3372 review, H2 + L3.\n\n   Both fields used to carry their own copy of pending / refusal / failure /\n   settle / fail, and neither copy knew WHICH EDIT a save belonged to. A caller\n   can close a field — or close it and open it again — while a save is still\n   out, and the outcome of that save then acted on whatever the field was doing\n   by the time it settled: a refusal showed its overlay and pulled focus into a\n   closed field, a success fired a second `onEditingChange(false)`, an autosave\n   wrote the older text back over the save that had just landed, and the\n   markdown field let a second `onCommit` start beside the first.\n\n   WHAT THIS GUARANTEES:\n\n   - A SESSION is one opening of the field: `begin()` starts one, `end()`\n     finishes it. Every save records the session that sent it; when it settles\n     under a DIFFERENT session its outcome is dropped — no message, no focus\n     move, no close. The one exception is a stale REJECTION, which still reaches\n     `onError`, because a save that failed is worth logging even when nobody is\n     looking at the field any more.\n   - UNMOUNTING ENDS THE SESSION, so a save that lands after the field is gone\n     never closes, refuses or re-saves anything. (`InlineEdit`'s autosave still\n     sends text the debounce was holding — see its own unmount handling.)\n   - \"UNCHANGED\" MEANS THE READER CHANGED NOTHING: a commit whose text equals\n     the committed `value` OR the value this session began from is not a\n     write. The second half matters when `value` moved underneath the open\n     field (an earlier session's save landing, someone else's edit): writing\n     the untouched text back would revert that change.\n   - SAVES ARE SERIALISED ACROSS SESSIONS: at most one `onCommit` is ever\n     outstanding per field. A commit asked for while an earlier session's save\n     is still out freezes the field (`pending`) and runs once that save has\n     settled — provided its own session is still open by then.\n   - A refusal or a failure puts focus back into the field (`refocus`), so the\n     message and the text it is about are where the reader is. The refocus runs\n     in an effect AFTER the render that clears `pending`: while a save is out\n     the markdown field is `inert`, and focusing an inert element does nothing.\n\n   COMMIT MODE (DXUI-76). `\"wait\"` (the default) is everything above. `\"close\"`\n   closes the field the moment a save that returns a promise is sent, instead\n   of freezing it until the promise settles - for a screen that already shows\n   the new value (an object store's optimistic layer), where the wait only\n   delays a field the reader is done with. A refusal or failure that lands\n   AFTER the close has no field to show it in, so the session reopens the\n   field (`reopen`) with the text that was sent and the message under it. That\n   late answer is dropped, like any stale outcome, once the field has been\n   opened again by anyone: a later commit in it supersedes the earlier save.\n   ========================================================================= */\n\nexport type CommitMode = \"wait\" | \"close\";\n\nexport type SaveResult = { outcome: EditOutcome } | { error: unknown };\n\nexport interface EditSessionOptions {\n  /** Named in the thrown message when a refusal carries an empty reason. */\n  component: string;\n  /** The committed value — \"unchanged\" is measured against it. Read live. */\n  value: string;\n  onCommit: EditCommit;\n  onError?: (error: unknown) => void;\n  failureMessage: string;\n  /** End editing after a commit that landed (or had nothing to write). */\n  close: () => void;\n  /** Put focus back on the field after a refusal or a failure. */\n  refocus: () => void;\n  /** `\"close\"` closes at once on a promise-returning commit. Default `\"wait\"`. */\n  commitMode?: CommitMode;\n  /** Open the field again so a late refusal or failure can show. */\n  reopen: () => void;\n}\n\ninterface ClosedSave {\n  id: number;\n  text: string;\n  base: string;\n}\n\n/** What the next opening starts from after a late refusal or failure. */\nexport interface Restore {\n  text: string;\n  base: string;\n  refusal: string | null;\n  failure: string | null;\n}\n\nexport interface EditSession {\n  pending: boolean;\n  refusal: string | null;\n  failure: string | null;\n  /** The message on screen, if any — a refusal or a failure. */\n  blocked: string | null;\n  /** The value this session began from — `onCommit`'s `base`. */\n  readonly base: string;\n  /**\n   * Start a new session. `refusal` seeds the message slot (live validation).\n   * Returns the text the field starts with: `base`, or the text of a save\n   * that was refused after the field closed.\n   */\n  begin: (base: string, refusal?: string | null, restore?: Restore | null) => string;\n  /**\n   * What a pending reopen restores, or null. Read it before `begin` consumes\n   * it and hand it back to `begin`: a StrictMode remount runs `begin` twice,\n   * and only the first finds it still pending (DXUI-81).\n   */\n  restored: () => Restore | null;\n  /** Finish the current session: every save still out becomes stale. */\n  end: () => void;\n  /** Commit `next` — unchanged check (see the module comment), `validate`, `onCommit`, outcome. */\n  commit: (next: string, validate?: (next: string) => string | null) => void;\n  refuse: (reason: string, source: \"validate\" | \"onCommit\") => void;\n  fail: (error: unknown) => void;\n  setPending: (pending: boolean) => void;\n  isPending: () => boolean;\n  setRefusal: (refusal: string | null) => void;\n  clearFailure: () => void;\n  /** The current session's token, for a caller that tracks its own save. */\n  token: () => number;\n  /** Whether a save from any session is still out. */\n  busy: () => boolean;\n  /** The in-flight save, settled or not — chain after it to stay in order. */\n  inFlight: () => Promise<void> | null;\n  /**\n   * Track a save sent under `token`. `onResult` runs only if that session is\n   * still current when it settles; otherwise `onStale` does (after a stale\n   * rejection has reached `onError`).\n   */\n  track: (\n    save: Promise<EditOutcome>,\n    token: number,\n    onResult: (result: SaveResult) => void,\n    onStale?: (result: SaveResult) => void,\n  ) => void;\n  /** Run `fn` once no save is out — dropped if this session ends first. */\n  whenIdle: (fn: () => void) => void;\n}\n\nexport function useEditSession(options: EditSessionOptions): EditSession {\n  const latest = useRef(options);\n  latest.current = options;\n\n  const [pending, setPendingState] = useState(false);\n  const [refusal, setRefusal] = useState<string | null>(null);\n  const [failure, setFailure] = useState<string | null>(null);\n  const [focusRequest, setFocusRequest] = useState(0);\n  const [reopenRequest, setReopenRequest] = useState(0);\n\n  /* Refs, not state: they are read from promise callbacks and timers whose\n     render closure is stale. */\n  const pendingRef = useRef(false);\n  const sessionRef = useRef(0);\n  const baseRef = useRef(options.value);\n  const inFlightRef = useRef<Promise<void> | null>(null);\n  const idleWaitersRef = useRef<Array<() => void>>([]);\n  const closedSeqRef = useRef(0);\n  /* The newest save sent by a commit that closed the field at once; a late\n     refusal or failure only reopens the field while this is still it. */\n  const closedRef = useRef<ClosedSave | null>(null);\n  const restoreRef = useRef<Restore | null>(null);\n\n  useEffect(() => {\n    if (focusRequest > 0) latest.current.refocus();\n  }, [focusRequest]);\n\n  /* DXUI-80: the reopen runs in an effect, AFTER the render that closed the\n     field. A save refused before that render would batch \"open\" onto the\n     pending \"close\": `editing` never leaves true, no opening happens, and the\n     restored text and message stay unread. `restoreRef` is null when an opening\n     got there first. */\n  useEffect(() => {\n    if (reopenRequest > 0 && restoreRef.current !== null) latest.current.reopen();\n  }, [reopenRequest]);\n\n  /* Declared first so it runs before any other unmount cleanup that chains\n     on the in-flight save. */\n  useEffect(\n    () => () => {\n      sessionRef.current += 1;\n      closedRef.current = null;\n      restoreRef.current = null;\n    },\n    [],\n  );\n\n  function setPending(next: boolean) {\n    pendingRef.current = next;\n    setPendingState(next);\n  }\n\n  function clearMessages(seed: string | null = null) {\n    setPending(false);\n    setRefusal(seed);\n    setFailure(null);\n  }\n\n  function begin(base: string, seed: string | null = null, given?: Restore | null): string {\n    sessionRef.current += 1;\n    const restore = given ?? restoreRef.current;\n    restoreRef.current = null;\n    closedRef.current = null;\n    baseRef.current = restore ? restore.base : base;\n    clearMessages(restore ? restore.refusal : seed);\n    if (restore?.failure) setFailure(restore.failure);\n    return restore ? restore.text : base;\n  }\n\n  /** A save sent by a closing commit settled: a refusal or failure reopens the field. */\n  function closedSaveSettled(result: SaveResult, id: number, token: number) {\n    const closed = closedRef.current;\n    /* A rejection that settled under the live session was not reported by\n       `track` (only stale ones are). */\n    if (\"error\" in result && token === sessionRef.current) latest.current.onError?.(result.error);\n    if (closed === null || closed.id !== id) return;\n    closedRef.current = null;\n    if (\"error\" in result) {\n      restoreRef.current = { text: closed.text, base: closed.base, refusal: null, failure: latest.current.failureMessage };\n    } else if (isRefusal(result.outcome)) {\n      assertReadableRefusal(latest.current.component, result.outcome.refusal, \"onCommit\");\n      restoreRef.current = { text: closed.text, base: closed.base, refusal: result.outcome.refusal, failure: null };\n    } else {\n      return;\n    }\n    setReopenRequest((n) => n + 1);\n  }\n\n  function end() {\n    sessionRef.current += 1;\n    clearMessages();\n  }\n\n  function refuse(reason: string, source: \"validate\" | \"onCommit\") {\n    assertReadableRefusal(latest.current.component, reason, source);\n    setPending(false);\n    setRefusal(reason);\n    setFocusRequest((n) => n + 1);\n  }\n\n  function fail(error: unknown) {\n    setPending(false);\n    setFailure(latest.current.failureMessage);\n    latest.current.onError?.(error);\n    setFocusRequest((n) => n + 1);\n  }\n\n  function track(\n    save: Promise<EditOutcome>,\n    token: number,\n    onResult: (result: SaveResult) => void,\n    onStale?: (result: SaveResult) => void,\n  ) {\n    const settled = (result: SaveResult) => {\n      inFlightRef.current = null;\n      try {\n        if (token === sessionRef.current) {\n          onResult(result);\n        } else {\n          if (\"error\" in result) latest.current.onError?.(result.error);\n          onStale?.(result);\n        }\n      } finally {\n        /* Whatever `onResult` threw (an empty refusal reason, a caller's\n           handler), the commits queued behind this save still run. */\n        for (const waiter of idleWaitersRef.current.splice(0)) waiter();\n      }\n    };\n    inFlightRef.current = save.then(\n      (outcome) => settled({ outcome }),\n      (error: unknown) => settled({ error }),\n    );\n  }\n\n  function whenIdle(fn: () => void) {\n    if (inFlightRef.current === null) {\n      fn();\n      return;\n    }\n    const token = sessionRef.current;\n    /* Re-enter `whenIdle` rather than calling `fn`: the save that just\n       settled may have started another one. */\n    idleWaitersRef.current.push(() => {\n      if (token === sessionRef.current) whenIdle(fn);\n    });\n  }\n\n  function settle(outcome: EditOutcome) {\n    if (isRefusal(outcome)) {\n      refuse(outcome.refusal, \"onCommit\");\n      return;\n    }\n    setPending(false);\n    latest.current.close();\n  }\n\n  function commit(next: string, validate?: (next: string) => string | null) {\n    if (pendingRef.current) return;\n    /* AN UNCHANGED VALUE IS NOT A WRITE — ahead of `validate`, so a value\n       already on the record is never re-litigated against a rule that\n       tightened after it was saved. */\n    if (next === latest.current.value || next === baseRef.current) {\n      latest.current.close();\n      return;\n    }\n    const local = validate?.(next) ?? null;\n    if (local !== null) {\n      refuse(local, \"validate\");\n      return;\n    }\n    if (inFlightRef.current !== null) {\n      setPending(true);\n      whenIdle(() => {\n        setPending(false);\n        commit(next, validate);\n      });\n      return;\n    }\n    const token = sessionRef.current;\n    let outcome: EditOutcome | Promise<EditOutcome>;\n    try {\n      outcome = latest.current.onCommit(next, baseRef.current);\n    } catch (error) {\n      fail(error);\n      return;\n    }\n    if (!isPromise(outcome)) {\n      settle(outcome);\n      return;\n    }\n    if (latest.current.commitMode === \"close\") {\n      const id = ++closedSeqRef.current;\n      closedRef.current = { id, text: next, base: baseRef.current };\n      const settled = (result: SaveResult) => closedSaveSettled(result, id, token);\n      track(outcome, token, settled, settled);\n      latest.current.close();\n      return;\n    }\n    setPending(true);\n    track(outcome, token, (result) => (\"error\" in result ? fail(result.error) : settle(result.outcome)));\n  }\n\n  return {\n    pending,\n    refusal,\n    failure,\n    blocked: refusal ?? failure,\n    get base() {\n      return baseRef.current;\n    },\n    begin,\n    restored: () => restoreRef.current,\n    end,\n    commit,\n    refuse,\n    fail,\n    setPending,\n    isPending: () => pendingRef.current,\n    setRefusal,\n    clearFailure: () => setFailure(null),\n    token: () => sessionRef.current,\n    busy: () => inFlightRef.current !== null,\n    inFlight: () => inFlightRef.current,\n    track,\n    whenIdle,\n  };\n}\n"],"names":["useEditSession","options","latest","useRef","pending","setPendingState","useState","refusal","setRefusal","failure","setFailure","focusRequest","setFocusRequest","reopenRequest","setReopenRequest","pendingRef","sessionRef","baseRef","inFlightRef","idleWaitersRef","closedSeqRef","closedRef","restoreRef","useEffect","setPending","next","clearMessages","seed","begin","base","given","restore","closedSaveSettled","result","id","token","closed","isRefusal","assertReadableRefusal","n","end","refuse","reason","source","fail","error","track","save","onResult","onStale","settled","waiter","outcome","whenIdle","fn","settle","commit","validate","local","isPromise"],"mappings":"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"}

package/dist/components/file-viewer/FileViewer.js

@@ -0,0 +1,97 @@
+import { jsx as o, jsxs as z, Fragment as R } from "react/jsx-runtime";
+import { useState as U } from "react";
+import { formatBytes as A } from "../../lib/format.js";
+import { useBelow as G } from "../../lib/use-media-query.js";
+import { Dialog as T } from "../Dialog.js";
+import { Icon as w } from "../Icon.js";
+import { IconButton as k } from "../IconButton.js";
+import { Popover as Z } from "../Popover.js";
+import { frameKeyOf as q } from "./frames.js";
+import { useFrameCursor as D } from "./use-frame-cursor.js";
+import { useViewerKeys as E } from "./use-viewer-keys.js";
+import { useViewerZoom as H } from "./use-viewer-zoom.js";
+import { FrameNav as J, ViewerControls as M } from "./ViewerControls.js";
+import { ViewerRail as Q } from "./ViewerRail.js";
+import { stageKindOf as W, ViewerStage as X } from "./ViewerStage.js";
+import { useUiStrings as Y, useUiLocale as _ } from "../../lib/i18n/provider.js";
+function xe({
+  open: m,
+  onOpenChange: b,
+  files: v,
+  initialFileId: V,
+  initialPageId: F,
+  onFrameChange: C,
+  title: L,
+  subtitle: y,
+  onDownload: a,
+  markLabel: K,
+  headerActions: O,
+  overlay: S,
+  renderBody: f
+}) {
+  const i = Y().fileViewer, N = _(), c = K ?? i.marked, { frames: t, frame: e, go: r } = D({ open: m, files: v, initialFileId: V, initialPageId: F, onFrameChange: C }), p = e?.index ?? 0, d = e && !e.page && f ? f(e.file) : null, l = e ? W(e, d) : { kind: "file", fit: null }, s = H({ frameKey: e ? q(e) : "", fit: l.fit }), u = l.fit !== null, j = E({ go: r, index: p, total: t.length, zoom: u ? s : null }), g = G("lg"), [n, B] = U(!0), x = e ? /* @__PURE__ */ o(
+    M,
+    {
+      frame: e,
+      frames: t,
+      go: r,
+      zoom: s,
+      zoomable: u,
+      markLabel: c,
+      headerActions: O,
+      onDownload: a,
+      labelled: g
+    }
+  ) : null, I = L ?? e?.file.name ?? i.defaultTitle, h = e?.file.size === void 0 ? "" : A(e.file.size, N);
+  return /* @__PURE__ */ o(
+    T,
+    {
+      ref: j,
+      open: m,
+      onOpenChange: b,
+      size: "full",
+      title: I,
+      description: y ?? (h === "" ? void 0 : h),
+      headerActions: /* @__PURE__ */ z(R, { children: [
+        /* @__PURE__ */ o(
+          k,
+          {
+            size: "xs",
+            icon: /* @__PURE__ */ o(w, { name: "panel-left", size: "xs" }),
+            label: n ? i.hideFileList : i.showFileList,
+            "aria-pressed": n,
+            onClick: () => B((P) => !P)
+          }
+        ),
+        e ? /* @__PURE__ */ o(J, { frame: e, onGo: r }) : null,
+        g ? /* @__PURE__ */ o(
+          Z,
+          {
+            align: "end",
+            "aria-label": i.moreControls,
+            trigger: /* @__PURE__ */ o(k, { size: "xs", icon: /* @__PURE__ */ o(w, { name: "more-horizontal", size: "xs" }), label: i.moreControls }),
+            children: /* @__PURE__ */ o("div", { className: "flex w-60 flex-col items-stretch gap-2 p-1", children: x })
+          }
+        ) : x
+      ] }),
+      children: e ? /* @__PURE__ */ z("div", { className: "flex min-h-0 flex-1 flex-col sm:flex-row", children: [
+        /* @__PURE__ */ o(Q, { frames: t, index: p, markLabel: c, onSelect: r, hidden: !n }),
+        /* @__PURE__ */ o(
+          X,
+          {
+            frame: e,
+            kind: l.kind,
+            custom: d,
+            zoom: s,
+            onDownload: a,
+            overlay: S?.(e)
+          }
+        )
+      ] }) : null
+    }
+  );
+}
+export {
+  xe as FileViewer
+};
+//# sourceMappingURL=FileViewer.js.map

package/dist/components/file-viewer/FileViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer.js","sources":["../../../src/components/file-viewer/FileViewer.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { formatBytes } from \"../../lib/format\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { useBelow } from \"../../lib/use-media-query\";\nimport { Dialog } from \"../Dialog\";\nimport { Icon } from \"../Icon\";\nimport { IconButton } from \"../IconButton\";\nimport { Popover } from \"../Popover\";\nimport type { FileViewerProps } from \"./types\";\nimport { frameKeyOf } from \"./frames\";\nimport { useFrameCursor } from \"./use-frame-cursor\";\nimport { useViewerKeys } from \"./use-viewer-keys\";\nimport { useViewerZoom } from \"./use-viewer-zoom\";\nimport { FrameNav, ViewerControls } from \"./ViewerControls\";\nimport { ViewerRail } from \"./ViewerRail\";\nimport { stageKindOf, ViewerStage } from \"./ViewerStage\";\n\n/* ============================================================================\n   FILE VIEWER (DX-4398)\n\n   Opens an ordered list of files full screen: a collapsible thumbnail rail,\n   previous/next across every file (a multi-page document is one frame per\n   page), a jump-to-page-number field, zoom and pan, fit, Download, and close.\n   Ported from gpt-manager's page viewer, which showed the pages of ONE document,\n   and generalised to files of any kind.\n\n   THE POSITION IS UNCONTROLLED AND ADDRESSED BY ID (`use-frame-cursor.ts`): open\n   it with `initialFileId` / `initialPageId`, observe it with `onFrameChange`;\n   there is no `index` prop and no controlled cursor. To drive it from outside,\n   reopen it or change its `key`.\n\n   THE SHELL IS `Dialog size=\"full\"`: focus trap, scroll lock, Escape and return\n   focus are the library's, and the viewer handles no Escape of its own. It sits\n   at `--z-modal` like every dialog, so its own Popovers (overflow, jump), toasts\n   and tooltips stay above it, and a Popover it was opened from is closed or\n   hidden (`overlay-stack.ts`). `Dialog.headerActions` is what lets the viewer\n   keep ONE header bar — title, frame navigation, controls, close — instead of a\n   header plus a toolbar row costing the page the height it needs.\n\n   ONE HEADER, TWO LAYOUTS. From `lg` up the secondary controls sit inline;\n   below it they are the content of one overflow Popover. They are the same\n   React subtree rendered in exactly one of the two places (`ViewerControls`), so\n   a Popover inside them is a real child of the overflow popover. Crossing 1024px\n   while open moves them, and a stateful `headerActions` control remounts: state\n   a host needs to keep belongs above the viewer.\n   ========================================================================= */\n\nexport function FileViewer({\n  open,\n  onOpenChange,\n  files,\n  initialFileId,\n  initialPageId,\n  onFrameChange,\n  title,\n  subtitle,\n  onDownload,\n  markLabel,\n  headerActions,\n  overlay,\n  renderBody,\n}: FileViewerProps) {\n  const strings = useUiStrings().fileViewer;\n  const locale = useUiLocale();\n  const mark = markLabel ?? strings.marked;\n  const { frames, frame, go } = useFrameCursor({ open, files, initialFileId, initialPageId, onFrameChange });\n  const index = frame?.index ?? 0;\n\n  /* The stage: what is on it, and how it is zoomed. */\n  const custom: ReactNode = frame && !frame.page && renderBody ? renderBody(frame.file) : null;\n  const stage = frame ? stageKindOf(frame, custom) : { kind: \"file\" as const, fit: null };\n  const zoom = useViewerZoom({ frameKey: frame ? frameKeyOf(frame) : \"\", fit: stage.fit });\n  const zoomable = stage.fit !== null;\n\n  const setPopup = useViewerKeys({ go, index, total: frames.length, zoom: zoomable ? zoom : null });\n\n  const narrow = useBelow(\"lg\");\n  const [railOpen, setRailOpen] = useState(true);\n\n  const controls = frame ? (\n    <ViewerControls\n      frame={frame}\n      frames={frames}\n      go={go}\n      zoom={zoom}\n      zoomable={zoomable}\n      markLabel={mark}\n      headerActions={headerActions}\n      onDownload={onDownload}\n      labelled={narrow}\n    />\n  ) : null;\n\n  const heading = title ?? frame?.file.name ?? strings.defaultTitle;\n  const size = frame?.file.size === undefined ? \"\" : formatBytes(frame.file.size, locale);\n  const description = subtitle ?? (size === \"\" ? undefined : size);\n\n  return (\n    <Dialog\n      ref={setPopup}\n      open={open}\n      onOpenChange={onOpenChange}\n      size=\"full\"\n      title={heading}\n      description={description}\n      headerActions={\n        <>\n          <IconButton\n            size=\"xs\"\n            icon={<Icon name=\"panel-left\" size=\"xs\" />}\n            label={railOpen ? strings.hideFileList : strings.showFileList}\n            aria-pressed={railOpen}\n            onClick={() => setRailOpen((shownNow) => !shownNow)}\n          />\n          {frame ? <FrameNav frame={frame} onGo={go} /> : null}\n          {narrow ? (\n            <Popover\n              align=\"end\"\n              aria-label={strings.moreControls}\n              trigger={<IconButton size=\"xs\" icon={<Icon name=\"more-horizontal\" size=\"xs\" />} label={strings.moreControls} />}\n            >\n              <div className=\"flex w-60 flex-col items-stretch gap-2 p-1\">{controls}</div>\n            </Popover>\n          ) : (\n            controls\n          )}\n        </>\n      }\n    >\n      {frame ? (\n        <div className=\"flex min-h-0 flex-1 flex-col sm:flex-row\">\n          <ViewerRail frames={frames} index={index} markLabel={mark} onSelect={go} hidden={!railOpen} />\n          <ViewerStage\n            frame={frame}\n            kind={stage.kind}\n            custom={custom}\n            zoom={zoom}\n            onDownload={onDownload}\n            overlay={overlay?.(frame)}\n          />\n        </div>\n      ) : null}\n    </Dialog>\n  );\n}\n"],"names":["FileViewer","open","onOpenChange","files","initialFileId","initialPageId","onFrameChange","title","subtitle","onDownload","markLabel","headerActions","overlay","renderBody","strings","useUiStrings","locale","useUiLocale","mark","frames","frame","go","useFrameCursor","index","custom","stage","stageKindOf","zoom","useViewerZoom","frameKeyOf","zoomable","setPopup","useViewerKeys","narrow","useBelow","railOpen","setRailOpen","useState","controls","jsx","ViewerControls","heading","size","formatBytes","Dialog","jsxs","Fragment","IconButton","Icon","shownNow","FrameNav","Popover","ViewerRail","ViewerStage"],"mappings":"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"}