@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/DragDrop.js

@@ -0,0 +1,395 @@
+import { jsxs as N, jsx as m, Fragment as G } from "react/jsx-runtime";
+import { useId as B, useMemo as T, useEffect as I, useRef as R, useCallback as L, useLayoutEffect as Q, useState as U } from "react";
+import { createPortal as V } from "react-dom";
+import { useRender as Y } from "@base-ui/react/use-render";
+import { cn as w } from "../lib/cn.js";
+import { devWarn as E } from "../lib/dev-warn.js";
+import { DragDropProvider as Z, useDragDrop as A, DragDropContainerProvider as ee, useDragDropContainer as O, DragDropGroupProvider as te, useDragDropItem as q, useDragDropClone as W, useDragDropGroup as re, DragDropItemProvider as _, DragDropCloneProvider as ne } from "./drag-drop/context.js";
+import { dnd as x } from "./drag-drop/recipe.js";
+import { containerShift as oe, shiftStyle as F, carriedPoint as se, gapRect as ae } from "./drag-drop/shift.js";
+import { Icon as ie } from "./Icon.js";
+import { useCreateDragSession as ce, DragSessionProvider as de, useDropContainer as ue, useDragState as X, useGroupBox as le, useDraggable as pe } from "../lib/dnd/use-drag.js";
+import { attachAutoScroll as me } from "../lib/dnd/autoscroll.js";
+import { DragInstructions as fe, DragLiveRegion as ge } from "../lib/dnd/announce.js";
+import { useUiStrings as he } from "../lib/i18n/provider.js";
+const De = () => {
+};
+function ve(e) {
+  const r = R([]), n = R([]), s = R(null), u = L(() => {
+    const t = r.current;
+    if (t.length === 0) return;
+    const c = new Set(n.current), d = t.filter((l) => !c.has(l.id));
+    if (d.length > 0) {
+      const l = d.slice(0, 6).map((h) => h.id).join(", "), p = d.length > 6 ? `, and ${d.length - 6} more` : "";
+      E(
+        "DragDrop",
+        `${d.length} of ${t.length} item(s) have no drag source and cannot be picked up (${l}${p}). Render a <DragDropHandle> inside the <DragDropItem> for a grip, or a <DragDropSurface> to make the whole row the source.`
+      );
+    }
+    e || E(
+      "DragDrop",
+      "no `onDragEnd`, so a completed drag writes nothing and the row returns to where it started. The engine reports the drop; committing it is the consumer's half."
+    );
+    const o = /* @__PURE__ */ new Set(), f = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), D = /* @__PURE__ */ new Set();
+    for (const l of t) {
+      o.has(l.id) && f.add(l.id), o.add(l.id);
+      const p = `${l.container}#${l.index}`;
+      g.has(p) && D.add(p), g.add(p);
+    }
+    f.size > 0 && E(
+      "DragDrop",
+      `two or more items share an id (${[...f].join(", ")}). The engine registers by id, so the later registration replaces the earlier one and a drop can land on a row that is no longer reachable.`
+    ), D.size > 0 && E(
+      "DragDrop",
+      `two or more items claim the same position (${[...D].join(", ")}). \`index\` must be the position in the consumer's own data — never a render counter over a filtered list — because every insertion point is computed against it.`
+    );
+  }, [e]), i = L(() => {
+    s.current === null && (s.current = setTimeout(() => {
+      s.current = null, u();
+    }, 0));
+  }, [u]);
+  return I(
+    () => () => {
+      s.current !== null && (clearTimeout(s.current), s.current = null);
+    },
+    []
+  ), T(
+    () => ({
+      item: (t, c, d) => {
+        const o = { id: t, container: c, index: d };
+        return r.current.push(o), i(), () => {
+          const f = r.current.indexOf(o);
+          f >= 0 && r.current.splice(f, 1);
+        };
+      },
+      source: (t) => (n.current.push(t), i(), () => {
+        const c = n.current.indexOf(t);
+        c >= 0 && n.current.splice(c, 1);
+      })
+    }),
+    [i]
+  );
+}
+function He({
+  autoScroll: e,
+  renderCarried: r,
+  className: n,
+  children: s,
+  ...u
+}) {
+  const i = ce(u), t = ve(u.onDragEnd !== void 0), c = B(), d = x(), { threshold: o, maxSpeed: f, reducedMaxSpeed: g } = e ?? {}, D = T(
+    () => ({ threshold: o, maxSpeed: f, reducedMaxSpeed: g }),
+    [o, f, g]
+  );
+  I(() => me(i, D), [i, D]);
+  const l = R({
+    item: /* @__PURE__ */ new Map(),
+    container: /* @__PURE__ */ new Map()
+  }), p = L(
+    (a, v, b) => b === void 0 ? () => {
+    } : (l.current[a].set(v, b), () => {
+      l.current[a].get(v) === b && l.current[a].delete(v);
+    }),
+    []
+  ), h = T(
+    () => ({ session: i, instructionsId: c, renderCarried: r, registerLabel: p, census: t }),
+    [i, c, r, p, t]
+  );
+  return /* @__PURE__ */ N("div", { className: w(d.root(), n), children: [
+    /* @__PURE__ */ m(fe, { id: c }),
+    /* @__PURE__ */ m(
+      ge,
+      {
+        session: i,
+        labelOf: (a) => l.current.item.get(a) ?? a,
+        containerLabelOf: (a) => l.current.container.get(a) ?? a
+      }
+    ),
+    /* @__PURE__ */ m(de, { value: i, children: /* @__PURE__ */ m(Z, { value: h, children: s }) })
+  ] });
+}
+function Fe({
+  id: e,
+  label: r,
+  axis: n = "y",
+  offset: s,
+  total: u,
+  crossDrop: i,
+  className: t,
+  children: c
+}) {
+  const { session: d, registerLabel: o } = A("DragDropContainer"), { setContainerRef: f, isOver: g } = ue(d, { id: e, axis: n, offset: s, total: u, crossDrop: i }), D = X(d), l = x({ axis: n });
+  I(
+    () => o("container", e, r),
+    [o, e, r]
+  );
+  const p = oe(d.getLayout(), D, e), h = T(() => ({ id: e, axis: n, shift: p }), [e, n, p]);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: f,
+      [J]: e,
+      "data-dnd-over": g ? "true" : void 0,
+      className: w(l.container(), t),
+      children: /* @__PURE__ */ N(ee, { value: h, children: [
+        c,
+        p?.marker?.placement.kind === "container-empty" && /* @__PURE__ */ m(M, { shift: p, translate: p.marker.shift })
+      ] })
+    }
+  );
+}
+function Me({
+  id: e,
+  index: r,
+  label: n,
+  className: s,
+  children: u
+}) {
+  const { session: i, renderCarried: t, registerLabel: c, census: d } = A("DragDropItem"), { id: o, axis: f, shift: g } = O("DragDropItem"), D = re(), { setItemRef: l, setHandleRef: p } = pe(i, {
+    id: e,
+    container: o,
+    index: r,
+    axis: f,
+    group: D?.id,
+    piece: D?.piece
+  }), h = X(i);
+  I(() => c("item", e, n), [c, e, n]), I(() => d.item(e, o, r), [d, e, o, r]);
+  const a = h.phase === "dragging" && h.id === e, v = x({ axis: f, moving: g !== null }), b = h.from && h.from.container === o && h.from.index < r ? r - 1 : r, S = g?.marker?.placement, y = !a && S?.kind === "item-before" && S.restIndex === b, k = !a && S?.kind === "item-after" && S.restIndex === b, C = g?.marker && /* @__PURE__ */ m(M, { shift: g, translate: g.marker.shift });
+  return (
+    /* A FRAGMENT, so the marker is a DIRECT CHILD of the container. Wrapping the
+       pair in a div would make the row the container's child and the marker the
+       row's, which puts the insertion point inside the box it is meant to sit
+       between — and gives the flex column one box where it needs two. */
+    /* @__PURE__ */ N(G, { children: [
+      y && C,
+      /* @__PURE__ */ m(
+        "div",
+        {
+          ref: l,
+          "data-dnd-item": e,
+          "data-dnd-dragging": a ? "true" : void 0,
+          className: w(v.item(), s),
+          children: /* @__PURE__ */ m(
+            "div",
+            {
+              className: w(
+                v.shift(),
+                /* THE HOLE, never the card. The card is always somewhere else while
+                               it is carried — `CarriedCard` below — so this one is invisible,
+                               and `containerShift` closes the slot around it. It stays in FLOW
+                               rather than unmounting: the engine measures `[data-dnd-item]` and
+                               a row that vanished from the snapshot mid-gesture would take its
+                               own `from` index with it.
+                
+                               `opacity-0` and NOT `visibility`/`display`: the siblings glide
+                               into the closing slot over `--dur-base`, and this fades out on
+                               the same clock (the `moving` variant puts `opacity` in the
+                               transition list). A card that blinked out would beat them there.
+                
+                               It is deliberately still hit-testable. `autoscroll.ts#scrollerAt`
+                               reads `elementFromPoint`, and this resolving to the row inside
+                               the column is correct — the clone is the thing that must stay out
+                               of the way, and it is `pointer-events-none` for that reason. */
+                a && "opacity-0"
+              ),
+              style: F(f, a ? 0 : g?.itemShift(b) ?? 0),
+              children: /* @__PURE__ */ m(_, { value: { id: e, setHandleRef: p, label: n }, children: u })
+            }
+          )
+        }
+      ),
+      k && C,
+      a && /* @__PURE__ */ m(ye, { id: e, state: h, layout: i.getLayout(), children: /* @__PURE__ */ m(_, { value: { id: e, setHandleRef: De, label: n }, children: t ? t(e) : u }) })
+    ] })
+  );
+}
+function Ue({
+  id: e,
+  label: r,
+  frame: n,
+  header: s,
+  render: u,
+  className: i,
+  testId: t,
+  contentClassName: c,
+  children: d,
+  continuesBefore: o = !1,
+  continuesAfter: f = !1
+}) {
+  const { session: g } = A("DragDropGroup"), { id: D, axis: l, shift: p } = O("DragDropGroup"), h = B(), a = le(g, { id: e, piece: h, container: D }), v = x({ axis: l, moving: p !== null, continuesAfter: f }), b = R(null), S = `${h}${be}`;
+  Q(() => {
+    const $ = b.current, j = $.closest(`[${J}]`);
+    if (j === null) throw new Error(`DragDropGroup ${e}: its cards are not drawn inside its DragDropContainer's element.`);
+    return z(j, e), () => z(j, e, $);
+  }, [e, o]);
+  const y = p?.pieces.get(h), k = p?.marker?.placement, C = ($) => k?.kind === $ && k.piece === h, P = p?.marker && /* @__PURE__ */ m(M, { shift: p, translate: p.marker.shift }), K = Y({
+    render: u,
+    // I18N-ALLOW: DOM tag name handed to the Base UI render slot
+    defaultTagName: "div",
+    props: {
+      className: w("relative", c),
+      children: /* @__PURE__ */ N(G, { children: [
+        s != null && /* @__PURE__ */ m("div", { className: v.shift(), style: F(l, y?.headShift ?? 0), children: s }),
+        /* @__PURE__ */ N(
+          "div",
+          {
+            ref: b,
+            id: S,
+            role: o ? void 0 : "group",
+            "aria-label": o ? void 0 : r,
+            [H]: e,
+            className: v.groupItems(),
+            children: [
+              /* @__PURE__ */ m(te, { value: { id: e, piece: h }, children: d }),
+              C("group-empty") && P
+            ]
+          }
+        )
+      ] })
+    }
+  });
+  return /* @__PURE__ */ N(G, { children: [
+    C("group-before") && P,
+    /* @__PURE__ */ N(
+      "div",
+      {
+        ref: a,
+        "data-dnd-group": e,
+        "data-dnd-group-continues": we(o, f),
+        "data-testid": t,
+        className: w("relative", v.item(), i),
+        children: [
+          n != null && /* @__PURE__ */ m("div", { "aria-hidden": "true", "data-dnd-group-frame": "", className: v.groupFrame(), style: y ? Se(l, y) : void 0, children: n }),
+          K
+        ]
+      }
+    ),
+    C("group-after") && P
+  ] });
+}
+const J = "data-dnd-container", H = "data-dnd-group-items", be = "items";
+function z(e, r, n) {
+  const s = [...e.querySelectorAll(`[${H}]`)].filter(
+    (t) => t.getAttribute(H) === r && t !== n
+  ), [u, ...i] = s;
+  for (const t of i) t.removeAttribute("aria-owns");
+  u !== void 0 && (u.getAttribute("role") === "group" && i.length > 0 ? u.setAttribute("aria-owns", i.map((t) => t.id).join(" ")) : u.removeAttribute("aria-owns"));
+}
+function we(e, r) {
+  if (e && r) return "both";
+  if (e) return "before";
+  if (r) return "after";
+}
+function Se(e, r) {
+  const n = r.headShift, s = r.headShift + r.frameDelta;
+  return e === "y" ? { top: n, bottom: -s } : { left: n, right: -s };
+}
+function ye({
+  id: e,
+  state: r,
+  layout: n,
+  children: s
+}) {
+  const u = r.mode ?? "pointer", i = x({ mode: u }), t = se(r), c = t ? null : ae(n, r), d = t ? { left: t.x, top: t.y, width: n?.items.find((o) => o.id === e)?.rect.width } : c && { left: c.left, top: c.top, width: c.width };
+  return d ? V(
+    /* @__PURE__ */ m(
+      "div",
+      {
+        "data-dnd-overlay": e,
+        "aria-hidden": "true",
+        className: i.overlay(),
+        style: { translate: `${d.left}px ${d.top}px`, width: d.width },
+        children: /* @__PURE__ */ m(ne, { value: !0, children: s })
+      }
+    ),
+    document.body
+  ) : null;
+}
+const Ie = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function _e({ label: e, className: r, children: n }) {
+  const { instructionsId: s, census: u } = A("DragDropSurface"), { axis: i } = O("DragDropSurface"), { id: t, setHandleRef: c, label: d } = q("DragDropSurface"), o = W();
+  I(() => o ? void 0 : u.source(t), [u, t, o]);
+  const f = x({ axis: i }), [g, D] = U(null), [l, p] = U(!1), h = L(
+    (a) => {
+      D(a), c(a);
+    },
+    [c]
+  );
+  return I(() => {
+    if (!g || o) return;
+    const a = g.querySelector(Ie);
+    if (p(a === null), !a) return;
+    const v = a.getAttribute("aria-describedby"), b = v ? v.split(/\s+/).filter(Boolean) : [];
+    if (!b.includes(s))
+      return a.setAttribute("aria-describedby", [...b, s].join(" ")), () => {
+        const S = a.getAttribute("aria-describedby");
+        if (!S) return;
+        const y = S.split(/\s+/).filter((k) => k && k !== s);
+        y.length ? a.setAttribute("aria-describedby", y.join(" ")) : a.removeAttribute("aria-describedby");
+      };
+  }, [g, o, s, n]), o ? /* @__PURE__ */ m("div", { className: w(f.surface(), r), children: n }) : /* @__PURE__ */ m(
+    "div",
+    {
+      ref: h,
+      "data-dnd-handle": t,
+      "data-dnd-surface": "",
+      className: w(f.surface(), r),
+      ...l ? {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": e ?? d ?? t,
+        "aria-describedby": s
+      } : {},
+      children: n
+    }
+  );
+}
+function ze({ label: e, className: r, children: n }) {
+  const { instructionsId: s, census: u } = A("DragDropHandle"), { axis: i } = O("DragDropHandle"), { id: t, setHandleRef: c, label: d } = q("DragDropHandle"), o = W(), f = he().dragDrop;
+  I(() => o ? void 0 : u.source(t), [u, t, o]);
+  const g = x({ axis: i }), D = n ?? /* @__PURE__ */ m(ie, { name: "grip-vertical", size: "sm" });
+  return o ? /* @__PURE__ */ m("span", { "aria-hidden": "true", className: w(g.handle(), r), children: D }) : /* @__PURE__ */ m(
+    "span",
+    {
+      ref: c,
+      "data-dnd-handle": t,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": e ?? f.reorder(d ?? t),
+      "aria-describedby": s,
+      className: w(g.handle(), r),
+      children: D
+    }
+  );
+}
+function M({
+  shift: e,
+  translate: r
+}) {
+  const n = x({ axis: e.axis });
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-dnd-marker": "",
+      "aria-hidden": "true",
+      className: n.marker(),
+      style: F(e.axis, r),
+      children: /* @__PURE__ */ m(
+        "div",
+        {
+          className: n.landing(),
+          style: e.axis === "x" ? { width: e.gapSize } : { height: e.gapSize }
+        }
+      )
+    }
+  );
+}
+export {
+  He as DragDrop,
+  Fe as DragDropContainer,
+  Ue as DragDropGroup,
+  ze as DragDropHandle,
+  Me as DragDropItem,
+  _e as DragDropSurface
+};
+//# sourceMappingURL=DragDrop.js.map

package/dist/components/DragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDrop.js","sources":["../../src/components/DragDrop.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"../lib/cn\";\nimport { devWarn } from \"../lib/dev-warn\";\nimport {\n  DragInstructions,\n  DragLiveRegion,\n  DragSessionProvider,\n  attachAutoScroll,\n  useCreateDragSession,\n  useDragState,\n  useDraggable,\n  useDropContainer,\n  useGroupBox,\n  type AutoScrollOptions,\n  type ContainerId,\n  type CrossDrop,\n  type DragAxis,\n  type DragId,\n  type DragSessionCallbacks,\n  type DragState,\n  type GroupId,\n  type LayoutSnapshot,\n  type PieceId,\n} from \"../lib/dnd\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport {\n  type DragDropCensus,\n  DragDropContainerProvider,\n  DragDropCloneProvider,\n  DragDropGroupProvider,\n  DragDropItemProvider,\n  DragDropProvider,\n  useDragDrop,\n  useDragDropClone,\n  useDragDropContainer,\n  useDragDropGroup,\n  useDragDropItem,\n} from \"./drag-drop/context\";\nimport { dnd } from \"./drag-drop/recipe\";\nimport { carriedPoint, containerShift, gapRect, shiftStyle, type GroupShift, type MarkerPlacement } from \"./drag-drop/shift\";\nimport { Icon } from \"./Icon\";\n\n/**\n * The handle ref a clone hands its grip: the clone is a picture, and the\n * sensors belong to the row it stands for.\n *\n * A module constant rather than an inline `() => {}` so the item context object\n * handed to a clone is stable across renders — mid-gesture is the only time it\n * is ever rendered, and mid-gesture is when a new identity per frame costs\n * something.\n */\nconst NO_HANDLE = () => {};\n\n/* ============================================================================\n   DRAG AND DROP\n   The reusable half of `lib/dnd`: a board, its columns, its rows and their\n   grips, wired to one session.\n\n   WHAT THIS LAYER EXISTS FOR. The engine is complete and correct, and using it\n   directly means creating the session, attaching auto-scroll, rendering the\n   live region, rendering the instructions, threading the session through every\n   child, computing the insertion point against a list the carried item has been\n   removed from, and remembering `axis` in three places. The first surface built\n   on it did all of that, and the accessible half — the half with no error and\n   no symptom when it is missing — was the part that took two rounds to get\n   right. So the accessible half is not a part a consumer renders here: a\n   `<DragDrop>` renders its own live region and its own instructions, exactly as\n   `useDraggable` attaches BOTH sensors rather than leaving the keyboard one to\n   whoever remembers it.\n\n   THERE IS NO `showMarker`, NO `withClone`, NO `announce` BOOLEAN. Following\n   `Chat.tsx` and `CodeEditor.tsx`: the configuration IS the switch. Rendering a\n   `<DragDropHandle>` is what makes a row draggable; a gap appears because there\n   is somewhere for the card to land.\n\n   WHAT THAT PRINCIPLE MAY NOT DECIDE IS HOW THE CARD MOVES. It decided that\n   twice and was wrong twice. First, rendering a `<DragDropOverlay>` was what\n   put the card under the cursor at all, so a board without one dragged nothing\n   — the gap opened, the marker drew, the drop wrote the right order, and the\n   row sat still. Then the row itself was made to follow the pointer in flow,\n   and an overlay demoted to selecting a MECHANISM: transform the row where it\n   stands, or portal a clone out. That is the version this one replaces, and\n   the reason is that the two mechanisms were never equivalent:\n\n     A ROW CARRIED IN FLOW CANNOT LEAVE ITS LIST. It is a descendant of the\n     scroll container, so the container clips it at its own edge — and the\n     container cannot stop clipping, because a scrolling axis forces its cross\n     axis to a non-`visible` value (`recipe.ts`). Dragging a row sideways showed\n     it sliced off at the boundary.\n\n     AND IT INFLATES THE LIST IT IS INSIDE. A transformed in-flow element\n     contributes to its ancestor's scrollable overflow region: 512 -> 607px of\n     extent on a straight 90px sideways drag, which was a scrollbar, then\n     auto-scroll theft, then a runaway.\n\n   Neither is a matter of degree — the growth IS the card following the hand,\n   and shrinking it does not help (dropping the 2% lift scale moved a 95.12px\n   overhang to 90.00px, and 90px was the pointer's own travel). So there is now\n   ONE carry mechanism and no switch selecting it: every carried card is a\n   `fixed` clone portalled to the body (`CarriedCard`), the row it left renders\n   as the hole it left, and the slot closes. `renderCarried` on `<DragDrop>`\n   changes what that clone SHOWS and nothing else.\n\n   THE PICTURE IS `translate`, THE TRUTH IS THE SNAPSHOT. Siblings move apart to\n   open the gap, and they do it on an element INSIDE the one the engine\n   measures — see `drag-drop/shift.ts` for why that separation is what stops the\n   opened gap from feeding back into the collision that opened it.\n   ========================================================================= */\n\n/* ----------------------------------------------------------------------------\n   THE CENSUS — a board that cannot work says so, in development.\n\n   THE CLASS OF DEFECT. `KanbanBoard` shipped 2.9.0 with its cards made drag\n   sources, because a consumer who forgot got a board that rendered perfectly,\n   announced itself correctly, passed every test, and could not be dragged at\n   all. That fixed the INSTANCE. The shape is general, and this surface has more\n   than one of it:\n\n     A ROW WITH NO SOURCE   nothing to grab. Checked per ROW rather than per\n                            board: a board with none at all is caught the first\n                            time anybody drags anything, but ONE row among forty\n                            -nine that forgot its grip is caught by nobody — the\n                            feature works and that single record is quietly\n                            immovable.\n     NO `onDragEnd`         the card lifts, the siblings part, the marker draws,\n                            the drop writes nothing and the row snaps home. Every\n                            visible half works.\n     TWO ROWS, ONE ID       the engine registers by id, so the second\n                            registration replaces the first and one of the two\n                            rows is a ghost the drop can land on.\n     TWO ROWS, ONE INDEX    the insertion point is computed against these, so\n                            drops land somewhere other than where the marker was.\n\n   None of these throws. None has a visual symptom on a machine with a mouse.\n   Each is found by a person trying to drag something and discovering they\n   cannot, which is the worst possible moment.\n\n   WHY NOT A TYPE ERROR, evaluated rather than assumed. TypeScript cannot\n   require that a particular component appears somewhere in a `ReactNode` tree,\n   so the only type-level version is to move the source out of `children` and\n   into a prop — which costs the composition this component exists for, since a\n   grip usually sits inside the consumer's own card layout rather than beside\n   it.\n\n   The other candidate was to invert the default: make every `DragDropItem` its\n   own drag source unless a handle appears inside it, which removes the\n   \"no source\" state entirely. That does not work, and the reason is in\n   `useDraggable`: the source is ONE element held in state\n   (`const [handleEl, setHandleRef] = useState(...)`). An item that attached\n   itself and a handle that attached itself would both write it, and the item's\n   own wrapper is the PARENT element — so its ref callback runs after its\n   children's and the item would win, silently defeating every grip on the\n   board. Two writers to the ref that decides where the sensors live is a race\n   in the one code path that must never have one.\n\n   So it is a development warning: loud, once, naming what to do. It costs a\n   production build nothing — see `lib/dev-warn.ts`.\n\n   A TIMER RATHER THAN A MOUNT EFFECT, because \"the board is empty\" and \"the\n   board has not finished rendering\" look identical from a parent effect: rows\n   arriving from a fetch, a lazy import or a Suspense boundary all land after\n   it. The tally is re-read on the next macrotask after any change, so a board\n   that fills late is judged on what it eventually became, and a board that\n   never fills is never accused.\n   -------------------------------------------------------------------------- */\n\ninterface CensusEntry {\n  id: string;\n  container: string;\n  index: number;\n}\n\nfunction useCensus(hasDropHandler: boolean): DragDropCensus {\n  const items = useRef<CensusEntry[]>([]);\n  const sources = useRef<string[]>([]);\n  const pending = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const audit = useCallback(() => {\n    const rows = items.current;\n    if (rows.length === 0) return;\n\n    /* PER ROW, NOT PER BOARD, and the difference is the case that actually\n       reaches production. A board with no source at all is caught the first\n       time anybody tries to drag anything. ONE row among forty-nine that\n       forgot its grip is caught by nobody: the board drags, the feature works,\n       and that single record is quietly immovable until somebody needs to move\n       it. A tally of `sources.length === 0` says nothing about it. */\n    const withSource = new Set(sources.current);\n    const dead = rows.filter((row) => !withSource.has(row.id));\n    if (dead.length > 0) {\n      const named = dead.slice(0, 6).map((row) => row.id).join(\", \");\n      // I18N-ALLOW: English developer diagnostic fragment inside a devWarn message, not user text\n      const rest = dead.length > 6 ? `, and ${dead.length - 6} more` : \"\";\n      devWarn(\n        \"DragDrop\",\n        `${dead.length} of ${rows.length} item(s) have no drag source and cannot be ` +\n          `picked up (${named}${rest}). Render a <DragDropHandle> inside the ` +\n          \"<DragDropItem> for a grip, or a <DragDropSurface> to make the whole row \" +\n          \"the source.\",\n      );\n    }\n\n    if (!hasDropHandler) {\n      devWarn(\n        \"DragDrop\",\n        \"no `onDragEnd`, so a completed drag writes nothing and the row returns to \" +\n          \"where it started. The engine reports the drop; committing it is the \" +\n          \"consumer's half.\",\n      );\n    }\n\n    const seenIds = new Set<string>();\n    const duplicateIds = new Set<string>();\n    const seenSlots = new Set<string>();\n    const duplicateSlots = new Set<string>();\n    for (const row of rows) {\n      if (seenIds.has(row.id)) duplicateIds.add(row.id);\n      seenIds.add(row.id);\n      const slot = `${row.container}#${row.index}`;\n      if (seenSlots.has(slot)) duplicateSlots.add(slot);\n      seenSlots.add(slot);\n    }\n    if (duplicateIds.size > 0) {\n      devWarn(\n        \"DragDrop\",\n        `two or more items share an id (${[...duplicateIds].join(\", \")}). The engine ` +\n          \"registers by id, so the later registration replaces the earlier one and a \" +\n          \"drop can land on a row that is no longer reachable.\",\n      );\n    }\n    if (duplicateSlots.size > 0) {\n      devWarn(\n        \"DragDrop\",\n        `two or more items claim the same position (${[...duplicateSlots].join(\", \")}). ` +\n          \"`index` must be the position in the consumer's own data — never a render \" +\n          \"counter over a filtered list — because every insertion point is computed \" +\n          \"against it.\",\n      );\n    }\n  }, [hasDropHandler]);\n\n  const schedule = useCallback(() => {\n    if (pending.current !== null) return;\n    pending.current = setTimeout(() => {\n      pending.current = null;\n      audit();\n    }, 0);\n  }, [audit]);\n\n  useEffect(\n    () => () => {\n      if (pending.current === null) return;\n      clearTimeout(pending.current);\n      /* AND RESET THE SLOT, which is the whole of a bug this had and the unit\n         tests could not see. StrictMode runs this cleanup on its simulated\n         unmount and then mounts the component again; a dead timer id left here\n         makes every later `schedule()` believe a check is already pending, and\n         the census never runs again for the life of the board. Found by\n         removing a grip from the demo and watching a real browser say nothing\n         — `render()` in the test suite does not wrap anything in StrictMode,\n         and all ten tests passed. */\n      pending.current = null;\n    },\n    [],\n  );\n\n  return useMemo(\n    () => ({\n      item: (id, container, index) => {\n        const entry = { id, container, index };\n        items.current.push(entry);\n        schedule();\n        return () => {\n          const at = items.current.indexOf(entry);\n          if (at >= 0) items.current.splice(at, 1);\n        };\n      },\n      source: (id) => {\n        sources.current.push(id);\n        schedule();\n        return () => {\n          const at = sources.current.indexOf(id);\n          if (at >= 0) sources.current.splice(at, 1);\n        };\n      },\n    }),\n    [schedule],\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   ROOT\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropProps extends DragSessionCallbacks {\n  /** Tune the edge auto-scroll. It cannot be turned off; see the banner. */\n  autoScroll?: AutoScrollOptions;\n  /**\n   * What the card in the hand SHOWS. Defaults to the carried item's own\n   * children, which is the version that cannot drift from the row it stands\n   * for.\n   *\n   * It does not decide whether the card is carried, or how — every carried card\n   * is a portalled clone, always. Worth passing when the resting row is dense:\n   * the clone is moving, usually under a cursor, and the two or three fields\n   * that identify the record are the only ones anybody reads off it.\n   */\n  renderCarried?: (id: DragId) => ReactNode;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function DragDrop({\n  autoScroll,\n  renderCarried,\n  className,\n  children,\n  ...callbacks\n}: DragDropProps) {\n  const session = useCreateDragSession(callbacks);\n  const census = useCensus(callbacks.onDragEnd !== undefined);\n  const instructionsId = useId();\n  const s = dnd();\n\n  /* Attached here, once for the whole board rather than once per column: the\n     loop resolves the scroller under the pointer on every frame, so a card\n     carried out of one column and into another scrolls whichever it is over. */\n  const { threshold, maxSpeed, reducedMaxSpeed } = autoScroll ?? {};\n  /* Depend on the VALUES, never on the options object. `autoScroll` is written\n     inline by every real consumer, so depending on its identity would tear the\n     loop down and rebuild it on every render — mid-gesture, which is the only\n     time it matters.\n\n     This used to also have to strip keys that were present and `undefined`,\n     because the engine merged with `{...DEFAULTS, ...options}` and a\n     present-undefined key replaced its default: every speed became NaN and the\n     column silently stopped scrolling, with nothing reporting a fault. The\n     engine resolves per key with `??` now, so forwarding an absent prop is\n     simply absent. */\n  const options = useMemo(\n    () => ({ threshold, maxSpeed, reducedMaxSpeed }),\n    [threshold, maxSpeed, reducedMaxSpeed],\n  );\n  useEffect(() => attachAutoScroll(session, options), [session, options]);\n\n  /* Spoken names are published by the parts that own the content, so the\n     consumer never states them twice. A `Map` in a ref rather than state: this\n     is read once per announcement and never rendered, and putting it in state\n     would re-render the whole board every time a row mounts. */\n  const names = useRef<Record<\"item\" | \"container\", Map<string, string>>>({\n    item: new Map(),\n    container: new Map(),\n  });\n  const registerLabel = useCallback(\n    (kind: \"item\" | \"container\", id: string, label: string | undefined) => {\n      if (label === undefined) return () => {};\n      names.current[kind].set(id, label);\n      return () => {\n        if (names.current[kind].get(id) === label) names.current[kind].delete(id);\n      };\n    },\n    [],\n  );\n\n  const context = useMemo(\n    () => ({ session, instructionsId, renderCarried, registerLabel, census }),\n    [session, instructionsId, renderCarried, registerLabel, census],\n  );\n\n  return (\n    <div className={cn(s.root(), className)}>\n      {/* A GENERATED id, not the engine's module constant. Two boards on one\n          page would otherwise emit the same id twice and every\n          `aria-describedby` after the first would resolve to the wrong\n          element — invalid markup that reads as \"the instructions are there\"\n          to every automated check. `<DragInstructions>` takes the id as a\n          prop for exactly this; it did not at first, and this component\n          re-implemented the paragraph to change one attribute, which is how\n          the instruction text ends up existing twice and drifting. */}\n      <DragInstructions id={instructionsId} />\n      {/* Mounted unconditionally and mounted EMPTY. A live region inserted and\n          populated in the same frame frequently announces nothing at all — the\n          accessibility tree has to have observed it before its content changes\n          to know a change happened. */}\n      <DragLiveRegion\n        session={session}\n        labelOf={(id) => names.current.item.get(id) ?? id}\n        containerLabelOf={(id) => names.current.container.get(id) ?? id}\n      />\n      <DragSessionProvider value={session}>\n        <DragDropProvider value={context}>{children}</DragDropProvider>\n      </DragSessionProvider>\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   CONTAINER\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropContainerProps {\n  id: ContainerId;\n  /**\n   * Human name for this container, spoken in every announcement about it —\n   * \"position 3 of 7 in ToDo\". Falls back to the id, which is at least\n   * speakable and never right.\n   */\n  label?: string;\n  /**\n   * Reorder axis. `\"y\"` is a column of rows, `\"x\"` a row of columns. It decides\n   * which arrow pair steps inside the container and which moves between\n   * containers, which way the siblings part, and which scroll direction the\n   * handle leaves alone for a finger.\n   *\n   * @default \"y\"\n   */\n  axis?: DragAxis;\n  /**\n   * DX-4540: for a container that renders only a window of a longer list — the\n   * position in the whole list of its first item. Every announcement then\n   * speaks the real place (\"position 221 of 500\"), not the place among what\n   * happens to be rendered. Give both or neither.\n   */\n  offset?: number;\n  /** The whole list's length, counting the carried item when it lives here. See `offset`. */\n  total?: number;\n  /**\n   * DX-4583: what a card carried in from ANOTHER container means here.\n   * `\"position\"` (the default) lands it at an index, siblings parting and a\n   * marker showing where. `\"lane\"` lands it in this container as a whole: no gap\n   * opens and no marker shows, because there is no position to show — the\n   * consumer decides what the drop writes (see `Board`'s `crossLaneDrop`). A\n   * card carried inside its own container is always positional.\n   */\n  crossDrop?: CrossDrop;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function DragDropContainer({\n  id,\n  label,\n  axis = \"y\",\n  offset,\n  total,\n  crossDrop,\n  className,\n  children,\n}: DragDropContainerProps) {\n  const { session, registerLabel } = useDragDrop(\"DragDropContainer\");\n  const { setContainerRef, isOver } = useDropContainer(session, { id, axis, offset, total, crossDrop });\n  const state = useDragState(session);\n  const s = dnd({ axis });\n\n  useEffect(\n    () => registerLabel(\"container\", id, label),\n    [registerLabel, id, label],\n  );\n\n  const shift = containerShift(session.getLayout(), state, id);\n  const context = useMemo(() => ({ id, axis, shift }), [id, axis, shift]);\n\n  return (\n    <div\n      ref={setContainerRef}\n      {...{ [CONTAINER_ATTRIBUTE]: id }}\n      data-dnd-over={isOver ? \"true\" : undefined}\n      className={cn(s.container(), className)}\n    >\n      <DragDropContainerProvider value={context}>\n        {children}\n        {/* An empty column has no item to hang the marker off, so the container\n            draws it. `restCount` — never `children` — decides, because the\n            carried card is still mounted here while it is being carried out of\n            its own column, and counting it would leave a column that LOOKS\n            occupied with nowhere visible to drop. */}\n        {shift?.marker?.placement.kind === \"container-empty\" && (\n          <DropMarker shift={shift} translate={shift.marker.shift} />\n        )}\n      </DragDropContainerProvider>\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   ITEM\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropItemProps {\n  id: DragId;\n  /**\n   * Position in the consumer's data for this container. The engine\n   * re-registers on every change, so it must be the real index — never the\n   * render order of a filtered list.\n   */\n  index: number;\n  /** Human name, spoken in announcements and used to name the handle. */\n  label?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function DragDropItem({\n  id,\n  index,\n  label,\n  className,\n  children,\n}: DragDropItemProps) {\n  const { session, renderCarried, registerLabel, census } = useDragDrop(\"DragDropItem\");\n  const { id: container, axis, shift } = useDragDropContainer(\"DragDropItem\");\n  const groupContext = useDragDropGroup();\n  const { setItemRef, setHandleRef } = useDraggable(session, {\n    id,\n    container,\n    index,\n    axis,\n    group: groupContext?.id,\n    piece: groupContext?.piece,\n  });\n  const state = useDragState(session);\n\n  useEffect(() => registerLabel(\"item\", id, label), [registerLabel, id, label]);\n  /* Reported from the ITEM rather than counted in the board's children: rows\n     reach a board through the consumer's own wrappers, memos and fragments, and\n     a counter over `children` sees one element where there are twenty. */\n  useEffect(() => census.item(id, container, index), [census, id, container, index]);\n\n  const carried = state.phase === \"dragging\" && state.id === id;\n\n  const s = dnd({ axis, moving: shift !== null });\n\n  /* THE POSITION IN THE LIST THE CARRIED CARD HAS ALREADY LEFT. Every index the\n     session speaks — `over.index`, and therefore every marker position — counts\n     that list, so a row's own place in it is what decides whether it moves. It\n     is arithmetic rather than a render-order counter because a counter cannot\n     survive the consumer rendering rows through a wrapper, a memo or a\n     fragment, and this component has no say in how they do that. */\n  const restIndex =\n    state.from && state.from.container === container && state.from.index < index\n      ? index - 1\n      : index;\n\n  /* DX-5522: WHICH ELEMENT DRAWS THE MARKER is decided by the container's shift, not by this row's own index: at the edge of a\n     group box the same boundary is the end of one entry and the start of the next, and only one of them is the right place. */\n  const placement = shift?.marker?.placement;\n  const markerBefore = !carried && placement?.kind === \"item-before\" && placement.restIndex === restIndex;\n  const markerAfter = !carried && placement?.kind === \"item-after\" && placement.restIndex === restIndex;\n\n  const marker = shift?.marker && <DropMarker shift={shift} translate={shift.marker.shift} />;\n\n  return (\n    /* A FRAGMENT, so the marker is a DIRECT CHILD of the container. Wrapping the\n       pair in a div would make the row the container's child and the marker the\n       row's, which puts the insertion point inside the box it is meant to sit\n       between — and gives the flex column one box where it needs two. */\n    <>\n      {markerBefore && marker}\n      <div\n        ref={setItemRef}\n        data-dnd-item={id}\n        /* The observable for \"a session is live\". The list ORDER cannot tell\n           \"no drag started\" from \"a drag started and went nowhere\" — a two-pixel\n           wobble resolves to the row's own index and writes nothing either\n           way — so the audit's activation-constraint claim is vacuous without\n           this attribute. */\n        data-dnd-dragging={carried ? \"true\" : undefined}\n        className={cn(s.item(), className)}\n      >\n        <div\n          className={cn(\n            s.shift(),\n            /* THE HOLE, never the card. The card is always somewhere else while\n               it is carried — `CarriedCard` below — so this one is invisible,\n               and `containerShift` closes the slot around it. It stays in FLOW\n               rather than unmounting: the engine measures `[data-dnd-item]` and\n               a row that vanished from the snapshot mid-gesture would take its\n               own `from` index with it.\n\n               `opacity-0` and NOT `visibility`/`display`: the siblings glide\n               into the closing slot over `--dur-base`, and this fades out on\n               the same clock (the `moving` variant puts `opacity` in the\n               transition list). A card that blinked out would beat them there.\n\n               It is deliberately still hit-testable. `autoscroll.ts#scrollerAt`\n               reads `elementFromPoint`, and this resolving to the row inside\n               the column is correct — the clone is the thing that must stay out\n               of the way, and it is `pointer-events-none` for that reason. */\n            carried && \"opacity-0\",\n          )}\n          style={shiftStyle(axis, carried ? 0 : (shift?.itemShift(restIndex) ?? 0))}\n        >\n          <DragDropItemProvider value={{ id, setHandleRef, label }}>\n            {children}\n          </DragDropItemProvider>\n        </div>\n      </div>\n      {markerAfter && marker}\n      {carried && (\n        <CarriedCard id={id} state={state} layout={session.getLayout()}>\n          {/* The clone shows the consumer's own row unless the board named\n              something else. Either way it stays inside the SAME container\n              context as the row it stands for, so a grip in there still knows\n              its axis — and gets a DEAD item context, because a handle that\n              attached its ref here would hand the sensors the clone instead of\n              the row. `DragDropHandle` renders its appearance in a clone and\n              none of its behaviour; this is the half that guarantees it, since\n              a hook cannot be skipped on a condition. */}\n          <DragDropItemProvider value={{ id, setHandleRef: NO_HANDLE, label }}>\n            {renderCarried ? renderCarried(id) : children}\n          </DragDropItemProvider>\n        </CarriedCard>\n      )}\n    </>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   GROUP — a box drawn around some of a container's items (DX-5522)\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropGroupProps {\n  /** Unique among this container's groups, and the same on every render (the cards' parent, say). */\n  id: GroupId;\n  /** Names the set of cards in the box, for assistive technology. */\n  label?: string;\n  /**\n   * The box itself: a decorative element that fills the group and carries its look (background, border, radius). The group\n   * lays it out and resizes it while a card is carried, so it follows the cards inside it instead of standing still.\n   */\n  frame?: ReactNode;\n  /** What sits above the cards inside the box. It is not an item, and it moves with the box. */\n  header?: ReactNode;\n  /**\n   * What the box's content is drawn in: an element, or a function returning one, rendered with the content's props. A plain\n   * `div` when absent. It carries the box's padding, so the frame and the content cannot disagree about it.\n   */\n  render?: useRender.RenderProp;\n  /** On the group's outer element, the one the engine measures (a margin goes here). */\n  className?: string;\n  /** The outer element's `data-testid`. */\n  testId?: string;\n  /** On the content element. */\n  contentClassName?: string;\n  /** The group's `DragDropItem`s, consecutive in their container. */\n  children?: ReactNode;\n  /**\n   * DX-5521: this element is one PIECE of the group's box, and the box goes on in the piece drawn just before it (the\n   * previous page's block of a windowed list). Every piece of one box takes the box's `id`; only the first carries the\n   * `header`. A piece that continues joins its neighbour edge to edge: the consumer's frame and content draw no edge and no\n   * padding there (`BoardCardGroup` does), and the group draws no margin there. See `PieceId`.\n   */\n  continuesBefore?: boolean;\n  /** DX-5521: the box goes on in the piece drawn just after this one. See `continuesBefore`. */\n  continuesAfter?: boolean;\n}\n\n/**\n * A box drawn around consecutive items of a container (the cards of one parent on a board lane).\n *\n * WHY THE ENGINE HAS TO KNOW. A sibling shift moves items by `translate`, one step per item at or beyond the home slot or the\n * insertion point, counted along the whole container. A box the consumer draws around some of them is none of that: it does\n * not move, so a card leaving it drags every card after it up through the box's lower edge, and the cards below it end up\n * drawn inside a box they are not in. The container cannot fix that by moving the box (the box is an ancestor of the items it\n * holds, and a transformed ancestor feeds its movement back into the rects the engine measures), so the box is split into\n * what moves and what does not:\n *\n *   THE FRAME     out of flow, behind the content, not an ancestor of any item. Its far edge moves by `frameDelta`: it\n *                 shrinks by the card's slot when the carried card leaves the box, grows by the gap when the gap opens\n *                 in it, and otherwise follows the cards beside it.\n *   THE HEADER    translated by the same amount as the entry's first card, so a box that sits after the home slot or the\n *                 gap moves as one piece.\n *   THE CARDS     the ordinary item shift, which is right once the frame follows it.\n *\n * AND THE INSERTION MARKER stays out of a box it does not belong to: at the box's edge it is drawn by the group, outside the\n * frame, unless the carried card is one of the box's own. See `MarkerPlacement`.\n *\n * ONE BOX, SEVERAL PIECES (DX-5521). A list that draws each page in a block of its own (`PagedWindowList`) has to keep every\n * card in its own page's block: the blocks are how it knows where the viewer is, and the element the browser's scroll\n * anchoring holds on to. A box whose cards sit on two pages is therefore drawn as one piece in each block, each a\n * `DragDropGroup` with the box's `id`, the first with the header, joined by `continuesAfter` / `continuesBefore`. The\n * engine treats them as one box for where a card may go (a card can be moved anywhere among its box's cards, across the\n * join) and frames each piece around its own cards.\n */\nexport function DragDropGroup({\n  id,\n  label,\n  frame,\n  header,\n  render,\n  className,\n  testId,\n  contentClassName,\n  children,\n  continuesBefore = false,\n  continuesAfter = false,\n}: DragDropGroupProps) {\n  const { session } = useDragDrop(\"DragDropGroup\");\n  const { id: container, axis, shift } = useDragDropContainer(\"DragDropGroup\");\n  const piece = useId();\n  const setGroupRef = useGroupBox(session, { id, piece, container });\n  const s = dnd({ axis, moving: shift !== null, continuesAfter });\n  const itemsRef = useRef<HTMLDivElement>(null);\n  const itemsId = `${piece}${ITEMS_ID_SUFFIX}`;\n\n  /* DX-5521: the box's first piece is its one labelled group, and it OWNS the other pieces' cards (`aria-owns`), so a screen reader hears\n     the whole box as one group wherever its pieces are drawn. Every piece re-syncs the box when it arrives, leaves or changes which side it\n     joins, from the DOM of its container, the only place that knows which pieces are drawn now. */\n  useLayoutEffect(() => {\n    /* itemsRef is set: the list below is always rendered with the piece, and a layout effect runs after the commit that attached its ref. */\n    const items = itemsRef.current!;\n    const root = items.closest(`[${CONTAINER_ATTRIBUTE}]`);\n    if (root === null) throw new Error(`DragDropGroup ${id}: its cards are not drawn inside its DragDropContainer's element.`);\n    ownBoxPieces(root, id);\n    return () => ownBoxPieces(root, id, items);\n  }, [id, continuesBefore]);\n\n  const mine = shift?.pieces.get(piece);\n  const placement = shift?.marker?.placement;\n  const draws = (kind: Extract<MarkerPlacement, { piece: PieceId }>[\"kind\"]) =>\n    placement?.kind === kind && placement.piece === piece;\n  const marker = shift?.marker && <DropMarker shift={shift} translate={shift.marker.shift} />;\n\n  const content = useRender({\n    render,\n    // I18N-ALLOW: DOM tag name handed to the Base UI render slot\n    defaultTagName: \"div\",\n    props: {\n      className: cn(\"relative\", contentClassName),\n      children: (\n        <>\n          {header !== undefined && header !== null && (\n            <div className={s.shift()} style={shiftStyle(axis, mine?.headShift ?? 0)}>\n              {header}\n            </div>\n          )}\n          {/* DX-5521: a box drawn in pieces is ONE group to a screen reader: only its first piece is the labelled group. */}\n          <div\n            ref={itemsRef}\n            id={itemsId}\n            role={continuesBefore ? undefined : \"group\"}\n            aria-label={continuesBefore ? undefined : label}\n            {...{ [GROUP_ITEMS_ATTRIBUTE]: id }}\n            className={s.groupItems()}\n          >\n            <DragDropGroupProvider value={{ id, piece }}>{children}</DragDropGroupProvider>\n            {draws(\"group-empty\") && marker}\n          </div>\n        </>\n      ),\n    },\n  });\n\n  return (\n    <>\n      {draws(\"group-before\") && marker}\n      <div\n        ref={setGroupRef}\n        data-dnd-group={id}\n        data-dnd-group-continues={joinedSides(continuesBefore, continuesAfter)}\n        data-testid={testId}\n        className={cn(\"relative\", s.item(), className)}\n      >\n        {frame !== undefined && frame !== null && (\n          <div aria-hidden=\"true\" data-dnd-group-frame=\"\" className={s.groupFrame()} style={mine ? frameExtent(axis, mine) : undefined}>\n            {frame}\n          </div>\n        )}\n        {content}\n      </div>\n      {draws(\"group-after\") && marker}\n    </>\n  );\n}\n\n/** The attribute on a `DragDropContainer`'s element: the root a group's pieces are looked up in (`ownBoxPieces`). */\nconst CONTAINER_ATTRIBUTE = \"data-dnd-container\";\n/** DX-5521: the attribute on a group piece's card list, whose value is the box's id; it is how the pieces of one box find each other. */\nconst GROUP_ITEMS_ATTRIBUTE = \"data-dnd-group-items\";\n/** DX-5521: appended to a piece's `useId` to make the `id` of its card list, which the box's first piece names in `aria-owns`. */\n// I18N-ALLOW: the tail of a DOM id, never shown\nconst ITEMS_ID_SUFFIX = \"items\";\n\n/**\n * DX-5521: point the box's labelled first piece (`role=\"group\"`) at the card lists of its other pieces drawn in `root` (`aria-owns`, in\n * document order), and clear it everywhere else. `leaving` is a piece's list on its way out of the DOM, left out. A box whose first drawn\n * piece continues an undrawn one has no labelled piece, so nothing owns its pieces.\n */\nfunction ownBoxPieces(root: Element, box: GroupId, leaving?: Element): void {\n  const lists = [...root.querySelectorAll<HTMLElement>(`[${GROUP_ITEMS_ATTRIBUTE}]`)].filter(\n    (list) => list.getAttribute(GROUP_ITEMS_ATTRIBUTE) === box && list !== leaving,\n  );\n  const [first, ...rest] = lists;\n  for (const list of rest) list.removeAttribute(\"aria-owns\");\n  if (first === undefined) return;\n  if (first.getAttribute(\"role\") === \"group\" && rest.length > 0) first.setAttribute(\"aria-owns\", rest.map((list) => list.id).join(\" \"));\n  else first.removeAttribute(\"aria-owns\");\n}\n\n/** DX-5521: which sides of a group piece another piece of its box continues (`data-dnd-group-continues`); none for a whole box. */\nfunction joinedSides(continuesBefore: boolean, continuesAfter: boolean): \"both\" | \"before\" | \"after\" | undefined {\n  if (continuesBefore && continuesAfter) return \"both\";\n  if (continuesBefore) return \"before\";\n  if (continuesAfter) return \"after\";\n  return undefined;\n}\n\n/** A group frame's near and far edges, displaced from the group's own box: the near by the header's shift, the far by that plus the box's growth. */\nfunction frameExtent(axis: DragAxis, shift: GroupShift): { top: number; bottom: number } | { left: number; right: number } {\n  const near = shift.headShift;\n  const far = shift.headShift + shift.frameDelta;\n  return axis === \"y\" ? { top: near, bottom: -far } : { left: near, right: -far };\n}\n\n/* ----------------------------------------------------------------------------\n   THE CARD WHILE IT IS IN THE AIR — module-private, and the ONLY carry\n   -------------------------------------------------------------------------- */\n\n/**\n * The one mechanism: a `fixed` clone, portalled to the body, under the cursor.\n *\n * `fixed` AND PORTALLED ARE THE SAME DECISION MADE TWICE, and both halves are\n * load-bearing. A card is carried across containers that clip their own\n * overflow — every `DragDropContainer` is a scroller, and a scroller clips —\n * so an in-flow or absolutely-positioned clone is cut off at the first edge it\n * reaches. Rendered to the body with no positioned ancestor, it has nothing to\n * be clipped by and contributes to no ancestor's scroll extent.\n *\n * It is rendered by the carried ITEM rather than by the board, which is what\n * makes \"the clone shows the row's own children\" the default instead of\n * something a consumer supplies. A board-level clone cannot see the row's\n * markup; it can only be handed a render prop, and the version of this\n * component that worked that way shipped a board whose cards could not leave\n * their lane because nobody passed one.\n */\nfunction CarriedCard({\n  id,\n  state,\n  layout,\n  children,\n}: {\n  id: DragId;\n  state: DragState;\n  layout: LayoutSnapshot | null;\n  children: ReactNode;\n}) {\n  const mode = state.mode ?? \"pointer\";\n  const s = dnd({ mode });\n\n  const point = carriedPoint(state);\n  /* NO POINTER, SO NOTHING TO FOLLOW. A keyboard drag moves slot to slot, and\n     the honest place for a card with no cursor is the slot it would land in —\n     which is also the only thing on screen that answers the question each arrow\n     press asks. */\n  const gap = point ? null : gapRect(layout, state);\n  const place = point\n    ? { left: point.x, top: point.y, width: layout?.items.find((i) => i.id === id)?.rect.width }\n    : gap && { left: gap.left, top: gap.top, width: gap.width };\n  if (!place) return null;\n\n  return createPortal(\n    <div\n      data-dnd-overlay={id}\n      aria-hidden=\"true\"\n      className={s.overlay()}\n      style={{ translate: `${place.left}px ${place.top}px`, width: place.width }}\n    >\n      <DragDropCloneProvider value={true}>{children}</DragDropCloneProvider>\n    </div>,\n    document.body,\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   SURFACE — the whole card as the drag source\n   -------------------------------------------------------------------------- */\n\n/**\n * Everything a browser will put focus on. Used to find the control a card\n * already has, so the drag instructions can be attached to it rather than to a\n * second tab stop nobody asked for.\n */\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), ' +\n  'textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface DragDropSurfaceProps {\n  /**\n   * Accessible name, used ONLY in the case where the surface has to become\n   * focusable itself — see the banner. Defaults to the item's label.\n   */\n  label?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * THE WHOLE ROW IS THE DRAG SOURCE. The alternative to `DragDropHandle`, and\n * the right one wherever every row is draggable by definition.\n *\n * A GRIP IS A CHOICE ABOUT WHICH ROWS MOVE. On a list where some rows are fixed\n * and some are not, the grip is the affordance that says which — and it is also\n * the only way to keep a row full of buttons from starting a drag from every\n * one of them. On a kanban board neither is true: every card moves, and the\n * card's own job is to open a record. Reported, in the user's words: \"I should\n * be able to drag anywhere on the card and it should drag the card. Get rid of\n * the drag handle entirely. Cards are just draggable. Click opens them, drag\n * drags them.\"\n *\n * THE HARD PART IS NOT THE DRAG, IT IS THE CLICK. A card that is both a drag\n * source and a link has to tell a press-that-moved from a press-that-did-not,\n * and it has to do it without a threshold invented here — the engine already\n * has one, tuned against real devices (`PointerActivation`: 5px for a mouse, a\n * 250ms dwell for a finger). A press under that stays a click and opens the\n * record; a press over it becomes a drag AND has its trailing `click`\n * swallowed, in `sensors/gesture.ts`, because the browser fires one either way.\n *\n * THE KEYBOARD IS THE HALF THAT IS EASY TO LOSE, and losing it is not\n * acceptable — a board that can only be reordered with a mouse is a board some\n * people cannot reorder at all. Two things keep it:\n *\n *   THE KEYS ARE SPLIT. Space picks the card up, Enter is left to whatever\n *   control has focus inside it. The keyboard sensor reads that off the event's\n *   target rather than from a flag here, so a grip (where the source IS the\n *   focused control) keeps both keys and a card gets the split, with nothing to\n *   configure and nothing to forget.\n *\n *   THE INSTRUCTIONS FOLLOW THE FOCUS. A grip carried `aria-describedby`\n *   itself. A card's focus lands on the consumer's own control — a\n *   `RecordCard`'s button — which this component did not render and cannot pass\n *   props to, so the description is attached to that element directly and\n *   removed again on unmount. A card with NO focusable control of its own has\n *   nothing to describe and no way into a drag, so the surface becomes the\n *   focusable control instead. Both branches are measured by\n *   `probe-kanban.mjs`; without the second one, a board of plain cards would be\n *   keyboard-inaccessible with nothing to see and nothing to fail.\n */\nexport function DragDropSurface({ label, className, children }: DragDropSurfaceProps) {\n  const { instructionsId, census } = useDragDrop(\"DragDropSurface\");\n  const { axis } = useDragDropContainer(\"DragDropSurface\");\n  const { id, setHandleRef, label: itemLabel } = useDragDropItem(\"DragDropSurface\");\n  const cloning = useDragDropClone();\n\n  /* Not inside the clone — see the note on `DragDropHandle`. */\n  useEffect(() => (cloning ? undefined : census.source(id)), [census, id, cloning]);\n  const s = dnd({ axis });\n\n  /* IN STATE, NOT A REF, for the same reason `useDraggable` holds its elements\n     that way: an effect that reads `ref.current` does not re-run when the\n     element is swapped without a dependency changing, and the surface would\n     then be describing an element that has left the page. */\n  const [el, setEl] = useState<HTMLElement | null>(null);\n  const [ownsFocus, setOwnsFocus] = useState(false);\n\n  const attach = useCallback(\n    (node: HTMLDivElement | null) => {\n      setEl(node);\n      /* Inside a clone this is the dead `NO_HANDLE` from `DragDropItem`, so\n         calling it is already a no-op — no condition needed, and none wanted:\n         a hook that ran differently in a clone is a hook that is skipped on a\n         condition. */\n      setHandleRef(node);\n    },\n    [setHandleRef],\n  );\n\n  useEffect(() => {\n    if (!el || cloning) return;\n    const focusable = el.querySelector<HTMLElement>(FOCUSABLE);\n    setOwnsFocus(focusable === null);\n    if (!focusable) return;\n\n    const before = focusable.getAttribute(\"aria-describedby\");\n    const tokens = before ? before.split(/\\s+/).filter(Boolean) : [];\n    if (tokens.includes(instructionsId)) return;\n    focusable.setAttribute(\"aria-describedby\", [...tokens, instructionsId].join(\" \"));\n    return () => {\n      /* Re-read rather than restoring the captured string: the consumer's own\n         component may have changed its description in between, and writing the\n         old value back would silently undo that. */\n      const now = focusable.getAttribute(\"aria-describedby\");\n      if (!now) return;\n      const rest = now.split(/\\s+/).filter((t) => t && t !== instructionsId);\n      if (rest.length) focusable.setAttribute(\"aria-describedby\", rest.join(\" \"));\n      else focusable.removeAttribute(\"aria-describedby\");\n    };\n    /* `children` is a dependency because a card that swaps a static row for an\n       interactive one changes the answer to \"what has focus in here\". */\n  }, [el, cloning, instructionsId, children]);\n\n  if (cloning) {\n    /* The clone is a picture. Emitting `data-dnd-handle` here would put a\n       second drag source on the page for every gate that counts them, on an\n       element that is `pointer-events: none` and cannot be reached. */\n    return <div className={cn(s.surface(), className)}>{children}</div>;\n  }\n\n  return (\n    <div\n      ref={attach}\n      data-dnd-handle={id}\n      data-dnd-surface=\"\"\n      className={cn(s.surface(), className)}\n      {...(ownsFocus\n        ? {\n            role: \"button\",\n            tabIndex: 0,\n            \"aria-label\": label ?? itemLabel ?? id,\n            \"aria-describedby\": instructionsId,\n          }\n        : {})}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   HANDLE\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropHandleProps {\n  /** Accessible name. Defaults to `Reorder <the item's label>`. */\n  label?: string;\n  className?: string;\n  /** Defaults to the grip. */\n  children?: ReactNode;\n}\n\nexport function DragDropHandle({ label, className, children }: DragDropHandleProps) {\n  const { instructionsId, census } = useDragDrop(\"DragDropHandle\");\n  const { axis } = useDragDropContainer(\"DragDropHandle\");\n  const { id, setHandleRef, label: itemLabel } = useDragDropItem(\"DragDropHandle\");\n  const cloning = useDragDropClone();\n  const strings = useUiStrings().dragDrop;\n\n  /* NOT INSIDE THE CLONE. A clone's grip is a drawing — it attaches no ref and\n     starts no gesture — so counting it would let a board of undraggable rows\n     report a source the moment one of them was carried, which is exactly when\n     nobody needs telling. */\n  useEffect(() => (cloning ? undefined : census.source(id)), [census, id, cloning]);\n  const s = dnd({ axis });\n  const content = children ?? <Icon name=\"grip-vertical\" size=\"sm\" />;\n\n  /* Inside the clone this is a drawing of a grip. Emitting the real one there\n     would put a second `[data-dnd-handle]` on the page — which every gate here\n     counts — and a second `tabIndex={0}` in the tab order, both belonging to an\n     element that is `pointer-events: none` and cannot be reached anyway. */\n  if (cloning) {\n    return (\n      <span aria-hidden=\"true\" className={cn(s.handle(), className)}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      ref={setHandleRef}\n      data-dnd-handle={id}\n      /* FOCUSABLE AND NAMED, or the keyboard path does not exist. A `<span>`\n         with a listener takes no focus, so Space never reaches the sensor and\n         every key the keyboard sensor implements is dead — on a desktop with a\n         mouse the result looks completely finished.\n\n         `aria-describedby` carries the instructions, which is the working\n         pattern. `aria-grabbed` and `aria-dropeffect` are the attributes whose\n         names promise this feature; they were removed in ARIA 1.2 because\n         assistive-technology support never arrived, and an implementation built\n         on them announces nothing at all. */\n      role=\"button\"\n      tabIndex={0}\n      aria-label={label ?? strings.reorder(itemLabel ?? id)}\n      aria-describedby={instructionsId}\n      className={cn(s.handle(), className)}\n    >\n      {content}\n    </span>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   MARKER — module-private: where the card lands\n   -------------------------------------------------------------------------- */\n\nfunction DropMarker({\n  shift,\n  translate,\n}: {\n  shift: NonNullable<ReturnType<typeof containerShift>>;\n  /** How far the marker is displaced: only the home half of the shift — see `MarkerSlot`. */\n  translate: number;\n}) {\n  const s = dnd({ axis: shift.axis });\n  return (\n    <div\n      data-dnd-marker=\"\"\n      /* Decorative: the position it marks is spoken by the live region, and a\n         second voice for the same fact interrupts the first. */\n      aria-hidden=\"true\"\n      className={s.marker()}\n      /* Only the home half of the shift. The marker IS the gap, so giving it the\n         gap displacement as well would move it out of the space it marks. */\n      style={shiftStyle(shift.axis, translate)}\n    >\n      <div\n        className={s.landing()}\n        /* Inline, because it is a measurement rather than a design decision:\n           the gap is exactly as big as the card that will fill it. */\n        style={\n          shift.axis === \"x\" ? { width: shift.gapSize } : { height: shift.gapSize }\n        }\n      />\n    </div>\n  );\n}\n"],"names":["NO_HANDLE","useCensus","hasDropHandler","items","useRef","sources","pending","audit","useCallback","rows","withSource","dead","row","named","rest","devWarn","seenIds","duplicateIds","seenSlots","duplicateSlots","slot","schedule","useEffect","useMemo","id","container","index","entry","at","DragDrop","autoScroll","renderCarried","className","children","callbacks","session","useCreateDragSession","census","instructionsId","useId","s","dnd","threshold","maxSpeed","reducedMaxSpeed","options","attachAutoScroll","names","registerLabel","kind","label","context","jsxs","cn","jsx","DragInstructions","DragLiveRegion","DragSessionProvider","DragDropProvider","DragDropContainer","axis","offset","total","crossDrop","useDragDrop","setContainerRef","isOver","useDropContainer","state","useDragState","shift","containerShift","CONTAINER_ATTRIBUTE","DragDropContainerProvider","DropMarker","DragDropItem","useDragDropContainer","groupContext","useDragDropGroup","setItemRef","setHandleRef","useDraggable","carried","restIndex","placement","markerBefore","markerAfter","marker","Fragment","shiftStyle","DragDropItemProvider","CarriedCard","DragDropGroup","frame","header","render","testId","contentClassName","continuesBefore","continuesAfter","piece","setGroupRef","useGroupBox","itemsRef","itemsId","ITEMS_ID_SUFFIX","useLayoutEffect","root","ownBoxPieces","mine","draws","content","useRender","GROUP_ITEMS_ATTRIBUTE","DragDropGroupProvider","joinedSides","frameExtent","box","leaving","lists","list","first","near","far","layout","mode","point","carriedPoint","gap","gapRect","place","i","createPortal","DragDropCloneProvider","FOCUSABLE","DragDropSurface","itemLabel","useDragDropItem","cloning","useDragDropClone","el","setEl","useState","ownsFocus","setOwnsFocus","attach","node","focusable","before","tokens","now","t","DragDropHandle","strings","useUiStrings","Icon","translate"],"mappings":"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"}

package/dist/components/Drawer.js

@@ -0,0 +1,100 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useRef as E, useCallback as O } from "react";
+import { Dialog as o } from "@base-ui/react/dialog";
+import { tv as _ } from "tailwind-variants";
+import { cn as k } from "../lib/cn.js";
+import { Icon as R } from "./Icon.js";
+import { IconButton as z } from "./IconButton.js";
+import { useDialogFinalFocus as A, useSupersedePopovers as D } from "./Dialog.js";
+import { OVERLAY_HEADER_ACTIONS_GROW_CLASS as P, OVERLAY_HEADER_ACTIONS_CLASS as F, OVERLAY_POPUP_SURFACE as L, overlayBackdropClassName as V } from "./overlay-shell.js";
+import { useUiStrings as I } from "../lib/i18n/provider.js";
+const T = _({
+  slots: {
+    backdrop: V(),
+    popup: [
+      "fixed inset-y-0 z-(--z-modal) flex h-dvh w-full flex-col",
+      L,
+      "rounded-none border-y-0",
+      "transition-[var(--tx-colors),translate] duration-(--dur-slower) ease-emphasis",
+      "data-ending-style:duration-(--dur-exit-slow) data-ending-style:ease-exit"
+    ],
+    header: "flex items-start gap-4 border-b border-border-subtle px-5 pb-4 pt-5 pr-14",
+    close: "absolute top-4 right-4",
+    titleBlock: "min-w-0 flex-1",
+    title: "font-display text-lg font-semibold text-primary text-balance",
+    description: "mt-1.5 text-sm text-secondary text-pretty",
+    body: "min-h-0 flex-1 overflow-y-auto px-5 py-5"
+  },
+  variants: {
+    side: {
+      right: { popup: "right-0 border-r-0 data-starting-style:translate-x-full data-ending-style:translate-x-full" },
+      left: { popup: "left-0 border-l-0 data-starting-style:-translate-x-full data-ending-style:-translate-x-full" }
+    },
+    size: {
+      /* The default: most of the screen, because what a drawer holds is read, not glanced at. */
+      wide: { popup: "sm:w-[min(64rem,calc(100vw-2rem))]" },
+      md: { popup: "sm:w-[min(32rem,calc(100vw-2rem))]" }
+    },
+    /* DX-5682: a body the host lays out itself (a split view, a thread with a pinned composer): no
+       padding and no scroll of its own, so the content owns both. Same shape as Dialog size="full". */
+    flush: { true: { body: "flex flex-col overflow-hidden p-0" } },
+    /* DXUI-93: set by the Drawer itself from `singleRowHeader`; see the compound variant. */
+    bar: { true: {}, false: {} },
+    /* DXUI-94: set by the Drawer itself from `headerActionsGrow` / `compactHeader`; see the compound variants. */
+    grow: { true: {}, false: {} },
+    compact: { true: {}, false: {} }
+  },
+  compoundVariants: [
+    /* DXUI-93: a header opted in with `singleRowHeader` is ONE thin bar, as Dialog's (DX-5682): the title block, the host's
+       controls and the close button share a single vertically-centred row, and the close button sits IN the row (see the
+       markup) instead of pinned to the corner, so the header costs the body one line, not the title's line plus a padded
+       corner. */
+    { bar: !0, class: { header: "items-center gap-2 px-4 py-3", close: "static flex-none" } },
+    /* DXUI-94: `compactHeader` thins the single-row bar: less padding and a tighter gap. */
+    { bar: !0, compact: !0, class: { header: "gap-1.5 px-3 py-1.5" } },
+    /* DXUI-94: `headerActionsGrow`: the title block takes only what its content needs, so the host's controls fill the rest. */
+    { grow: !0, class: { titleBlock: "flex-initial" } }
+  ],
+  defaultVariants: { side: "right", size: "wide", bar: !1, grow: !1, compact: !1 }
+});
+function X({ open: s, onOpenChange: b, title: g, description: c, headerActions: i, singleRowHeader: a, headerActionsGrow: p, compactHeader: d, side: h, size: y, flush: v, className: w, children: m, ref: r }) {
+  const t = T({ side: h, size: y, flush: v, bar: !!a, grow: !!p, compact: !!d }), N = I().dialog, B = A(s), C = D(s, b), u = E(null), S = O(
+    (n) => {
+      u.current = n, typeof r == "function" ? r(n) : r && (r.current = n);
+    },
+    [r]
+  ), f = a && d ? "xs" : "sm", x = /* @__PURE__ */ e(
+    o.Close,
+    {
+      render: /* @__PURE__ */ e(z, { label: N.close, hideTooltip: !0, size: f, icon: /* @__PURE__ */ e(R, { name: "x", size: f }), className: t.close() })
+    }
+  );
+  return /* @__PURE__ */ e(o.Root, { open: s, onOpenChange: C, children: /* @__PURE__ */ l(o.Portal, { children: [
+    /* @__PURE__ */ e(o.Backdrop, { className: t.backdrop() }),
+    /* @__PURE__ */ l(
+      o.Popup,
+      {
+        ref: S,
+        className: k(t.popup(), w),
+        finalFocus: B,
+        initialFocus: i ? () => u.current : void 0,
+        children: [
+          /* @__PURE__ */ l("div", { className: t.header(), children: [
+            /* @__PURE__ */ l("div", { className: t.titleBlock(), children: [
+              /* @__PURE__ */ e(o.Title, { className: t.title(), children: g }),
+              c && /* @__PURE__ */ e(o.Description, { className: t.description(), children: c })
+            ] }),
+            i && /* @__PURE__ */ e("div", { className: p ? P : F, children: i }),
+            a && x
+          ] }),
+          !a && x,
+          m && /* @__PURE__ */ e("div", { className: t.body(), children: m })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  X as Drawer
+};
+//# sourceMappingURL=Drawer.js.map