@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/date-timeline/useBarDrag.js

@@ -0,0 +1,44 @@
+import { useState as b, useRef as a, useEffect as T } from "react";
+import { editSpan as X } from "../../lib/date-timeline/scale.js";
+const R = 3;
+function M(E, L, y) {
+  const [k, S] = b(null), d = a(null), n = a(null), l = a(!1), w = a(void 0), f = a({ items: E, pxPerDay: L, onItemChange: y });
+  f.current = { items: E, pxPerDay: L, onItemChange: y };
+  const v = (t) => {
+    d.current = t, S(t);
+  }, m = () => {
+    clearTimeout(w.current), l.current = !1;
+  }, p = (t) => {
+    const e = d.current;
+    if (!e || (n.current?.(), n.current = null, v(null), e.active && (l.current = !0, w.current = setTimeout(m, 0)), !t || !e.active || e.days === 0)) return;
+    const { items: c, onItemChange: o } = f.current, r = c.find((i) => i.id === e.id);
+    if (!r || !o) return;
+    const s = X(r, e.edit, e.days);
+    o(r.id, s.start, s.end);
+  };
+  return T(
+    () => () => {
+      n.current?.(), clearTimeout(w.current);
+    },
+    []
+  ), { drag: k, startDrag: (t, e) => {
+    if (!e.editable || t.button !== 0) return;
+    const c = t.target.closest("[data-edge]")?.dataset.edge;
+    m(), n.current?.(), v({ id: e.id, edit: c === "start" || c === "end" ? c : "move", startX: t.clientX, days: 0, active: !1 });
+    const o = (g) => {
+      const u = d.current;
+      if (!u) return;
+      const D = g.clientX - u.startX;
+      !u.active && Math.abs(D) < R || v({ ...u, active: !0, days: Math.round(D / f.current.pxPerDay) });
+    }, r = () => p(!0), s = () => p(!1), i = (g) => {
+      g.key === "Escape" && p(!1);
+    };
+    window.addEventListener("pointermove", o), window.addEventListener("pointerup", r), window.addEventListener("pointercancel", s), window.addEventListener("keydown", i), n.current = () => {
+      window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", r), window.removeEventListener("pointercancel", s), window.removeEventListener("keydown", i);
+    };
+  }, consumeSwallowedClick: () => l.current ? (m(), !0) : !1 };
+}
+export {
+  M as useBarDrag
+};
+//# sourceMappingURL=useBarDrag.js.map

package/dist/components/date-timeline/useBarDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBarDrag.js","sources":["../../../src/components/date-timeline/useBarDrag.ts"],"sourcesContent":["import { useEffect, useRef, useState, type PointerEvent } from \"react\";\nimport { editSpan, type DateTimelineEdit } from \"../../lib/date-timeline/scale\";\nimport type { DateTimelineChange, DateTimelineItem } from \"./DateTimeline\";\n\n/* ============================================================================\n   THE DRAG CONTROLLER (DXUI-60) — one press-move-release on one bar.\n\n   A press on an editable bar starts a drag; the pointer then moves and releases\n   anywhere on the page, so the listeners live on the window for as long as the\n   press is held. They are added in the press itself, never in an effect, so a\n   move right after it is never missed. The pointer must travel a few pixels\n   before the press counts as a drag; less is a click and the bar activates as\n   it always did.\n\n   A drag ends in a click on the same button. That click must not activate the\n   item, but it only follows when the release was over the button, so the\n   suppression is cleared one tick after the release whether or not a click came.\n   ============================================================================ */\n\n/** A pointer must travel this far before a press becomes a drag; less is a click. */\nconst DRAG_THRESHOLD_PX = 3;\n\nexport interface Drag {\n  id: string;\n  edit: DateTimelineEdit;\n  startX: number;\n  days: number;\n  active: boolean;\n}\n\nexport function useBarDrag(items: readonly DateTimelineItem[], pxPerDay: number, onItemChange: DateTimelineChange | undefined) {\n  const [drag, setDrag] = useState<Drag | null>(null);\n  const dragRef = useRef<Drag | null>(null);\n  const release = useRef<(() => void) | null>(null);\n  const swallowClick = useRef(false);\n  const swallowTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const latest = useRef({ items, pxPerDay, onItemChange });\n  latest.current = { items, pxPerDay, onItemChange };\n\n  const setDragState = (next: Drag | null) => {\n    dragRef.current = next;\n    setDrag(next);\n  };\n  const clearSwallow = () => {\n    clearTimeout(swallowTimer.current);\n    swallowClick.current = false;\n  };\n  const endDrag = (commit: boolean) => {\n    const current = dragRef.current;\n    if (!current) return;\n    release.current?.();\n    release.current = null;\n    setDragState(null);\n    if (current.active) {\n      swallowClick.current = true;\n      swallowTimer.current = setTimeout(clearSwallow, 0);\n    }\n    if (!commit || !current.active || current.days === 0) return;\n    const { items: all, onItemChange: change } = latest.current;\n    const item = all.find((i) => i.id === current.id);\n    if (!item || !change) return;\n    const next = editSpan(item, current.edit, current.days);\n    change(item.id, next.start, next.end);\n  };\n  // A press held when the timeline unmounts must not leave its listeners or timer behind.\n  useEffect(\n    () => () => {\n      release.current?.();\n      clearTimeout(swallowTimer.current);\n    },\n    [],\n  );\n\n  const startDrag = (e: PointerEvent<HTMLElement>, item: DateTimelineItem) => {\n    if (!item.editable || e.button !== 0) return;\n    const grabbed = (e.target as HTMLElement).closest<HTMLElement>(\"[data-edge]\")?.dataset.edge;\n    clearSwallow();\n    release.current?.();\n    setDragState({ id: item.id, edit: grabbed === \"start\" || grabbed === \"end\" ? grabbed : \"move\", startX: e.clientX, days: 0, active: false });\n    const move = (m: globalThis.PointerEvent) => {\n      const current = dragRef.current;\n      if (!current) return;\n      const dx = m.clientX - current.startX;\n      if (!current.active && Math.abs(dx) < DRAG_THRESHOLD_PX) return;\n      setDragState({ ...current, active: true, days: Math.round(dx / latest.current.pxPerDay) });\n    };\n    const up = () => endDrag(true);\n    const cancel = () => endDrag(false);\n    const key = (k: globalThis.KeyboardEvent) => {\n      if (k.key === \"Escape\") endDrag(false);\n    };\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", up);\n    window.addEventListener(\"pointercancel\", cancel);\n    window.addEventListener(\"keydown\", key);\n    release.current = () => {\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", up);\n      window.removeEventListener(\"pointercancel\", cancel);\n      window.removeEventListener(\"keydown\", key);\n    };\n  };\n\n  /** True once for the click that ends a drag: the caller then skips activating the item. */\n  const consumeSwallowedClick = () => {\n    if (!swallowClick.current) return false;\n    clearSwallow();\n    return true;\n  };\n\n  return { drag, startDrag, consumeSwallowedClick };\n}\n"],"names":["DRAG_THRESHOLD_PX","useBarDrag","items","pxPerDay","onItemChange","drag","setDrag","useState","dragRef","useRef","release","swallowClick","swallowTimer","latest","setDragState","next","clearSwallow","endDrag","commit","current","all","change","item","editSpan","useEffect","e","grabbed","move","m","dx","up","cancel","key","k"],"mappings":"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"}

package/dist/components/date-timeline/useMarkerDrag.js

@@ -0,0 +1,40 @@
+import { useState as C, useRef as l, useEffect as M } from "react";
+import { clampMarkerDays as R, addDays as b } from "../../lib/date-timeline/scale.js";
+const h = 3;
+function O(w, m, g, E) {
+  const [D, k] = C(null), f = l(null), c = l(!1), s = l(null), i = l({ markers: w, pxPerDay: m, range: g, onMarkerChange: E });
+  i.current = { markers: w, pxPerDay: m, range: g, onMarkerChange: E };
+  const p = (e) => {
+    f.current = e, k(e);
+  }, v = (e) => {
+    const t = f.current;
+    if (!t || (s.current?.(), s.current = null, p(null), !e || t.days === 0)) return;
+    const { markers: d, onMarkerChange: o } = i.current, n = d.find((u) => u.id === t.id);
+    !n || !o || o(n.id, b(n.date, t.days));
+  };
+  return M(() => () => s.current?.(), []), { drag: D, startDrag: (e, t) => {
+    if (!t.editable || t.pending || w.some((r) => r.pending) || e.button !== 0) return;
+    s.current?.(), c.current = !1, p({ id: t.id, startX: e.clientX, days: 0 });
+    const d = (r) => {
+      const a = f.current;
+      if (!a) return;
+      Math.abs(r.clientX - a.startX) > h && (c.current = !0);
+      const { pxPerDay: L, range: S } = i.current, y = i.current.markers.find((X) => X.id === a.id);
+      y && p({ ...a, days: R(y.date, Math.round((r.clientX - a.startX) / L), S) });
+    }, o = () => v(!0), n = () => v(!1), u = (r) => {
+      r.key === "Escape" && v(!1);
+    };
+    window.addEventListener("pointermove", d), window.addEventListener("pointerup", o), window.addEventListener("pointercancel", n), window.addEventListener("keydown", u), s.current = () => {
+      window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", n), window.removeEventListener("keydown", u);
+    };
+  }, consumeSwallowedClick: () => {
+    const e = c.current;
+    return c.current = !1, e;
+  }, clearSwallowedClick: () => {
+    c.current = !1;
+  } };
+}
+export {
+  O as useMarkerDrag
+};
+//# sourceMappingURL=useMarkerDrag.js.map

package/dist/components/date-timeline/useMarkerDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkerDrag.js","sources":["../../../src/components/date-timeline/useMarkerDrag.ts"],"sourcesContent":["import { useEffect, useRef, useState, type PointerEvent } from \"react\";\nimport { addDays, clampMarkerDays, type DayRange } from \"../../lib/date-timeline/scale\";\nimport type { DateTimelineMarker } from \"./DateTimeline\";\n\n/* ============================================================================\n   THE MARKER DRAG CONTROLLER (DXUI-67) — one press-move-release on one marker's handle.\n\n   The same shape as `useBarDrag`: the pointer moves and releases anywhere on the page, so the\n   listeners live on the window while the press is held, added in the press itself so a move right\n   after it is never missed. A press that travels past a small threshold is a drag, and the click\n   that follows its release is swallowed so it never also activates the marker (DXUI-69). The day count is clamped to the axis, which is built from the markers' own dates.\n   ============================================================================ */\n\n/* Pointer travel, in pixels, past which a press is a drag and not a click. */\nconst DRAG_THRESHOLD_PX = 3;\n\nexport interface MarkerDrag {\n  id: string;\n  startX: number;\n  days: number;\n}\n\nexport function useMarkerDrag(\n  markers: readonly DateTimelineMarker[],\n  pxPerDay: number,\n  range: DayRange,\n  onMarkerChange: ((id: string, date: Date) => void) | undefined,\n) {\n  const [drag, setDrag] = useState<MarkerDrag | null>(null);\n  const dragRef = useRef<MarkerDrag | null>(null);\n  /* A press that travelled is a drag: the click that follows its release is not an activation (DXUI-69). */\n  const travelled = useRef(false);\n  const release = useRef<(() => void) | null>(null);\n  const latest = useRef({ markers, pxPerDay, range, onMarkerChange });\n  latest.current = { markers, pxPerDay, range, onMarkerChange };\n\n  const setDragState = (next: MarkerDrag | null) => {\n    dragRef.current = next;\n    setDrag(next);\n  };\n  const endDrag = (commit: boolean) => {\n    const current = dragRef.current;\n    if (!current) return;\n    release.current?.();\n    release.current = null;\n    setDragState(null);\n    if (!commit || current.days === 0) return;\n    const { markers: all, onMarkerChange: change } = latest.current;\n    const marker = all.find((m) => m.id === current.id);\n    if (!marker || !change) return;\n    change(marker.id, addDays(marker.date, current.days));\n  };\n  // A press held when the timeline unmounts must not leave its listeners behind.\n  useEffect(() => () => release.current?.(), []);\n\n  const startDrag = (e: PointerEvent<HTMLElement>, marker: DateTimelineMarker) => {\n    // A save in flight locks every handle (DEC-111): a pending marker and all the others wait for its answer.\n    if (!marker.editable || marker.pending || markers.some((m) => m.pending) || e.button !== 0) return;\n    release.current?.();\n    travelled.current = false;\n    setDragState({ id: marker.id, startX: e.clientX, days: 0 });\n    const move = (m: globalThis.PointerEvent) => {\n      const current = dragRef.current;\n      if (!current) return;\n      if (Math.abs(m.clientX - current.startX) > DRAG_THRESHOLD_PX) travelled.current = true;\n      const { pxPerDay: px, range: r } = latest.current;\n      const target = latest.current.markers.find((x) => x.id === current.id);\n      if (!target) return;\n      setDragState({ ...current, days: clampMarkerDays(target.date, Math.round((m.clientX - current.startX) / px), r) });\n    };\n    const up = () => endDrag(true);\n    const cancel = () => endDrag(false);\n    const key = (k: globalThis.KeyboardEvent) => {\n      if (k.key === \"Escape\") endDrag(false);\n    };\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", up);\n    window.addEventListener(\"pointercancel\", cancel);\n    window.addEventListener(\"keydown\", key);\n    release.current = () => {\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", up);\n      window.removeEventListener(\"pointercancel\", cancel);\n      window.removeEventListener(\"keydown\", key);\n    };\n  };\n\n  /** True once (and clears) when the click arriving now ends a drag; false for a plain click. */\n  const consumeSwallowedClick = () => {\n    const was = travelled.current;\n    travelled.current = false;\n    return was;\n  };\n  const clearSwallowedClick = () => {\n    travelled.current = false;\n  };\n\n  return { drag, startDrag, consumeSwallowedClick, clearSwallowedClick };\n}\n"],"names":["DRAG_THRESHOLD_PX","useMarkerDrag","markers","pxPerDay","range","onMarkerChange","drag","setDrag","useState","dragRef","useRef","travelled","release","latest","setDragState","next","endDrag","commit","current","all","change","marker","m","addDays","useEffect","move","px","r","target","x","clampMarkerDays","up","cancel","key","k","was"],"mappings":";;AAcA,MAAMA,IAAoB;AAQnB,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAA4B,IAAI,GAClDC,IAAUC,EAA0B,IAAI,GAExCC,IAAYD,EAAO,EAAK,GACxBE,IAAUF,EAA4B,IAAI,GAC1CG,IAASH,EAAO,EAAE,SAAAR,GAAS,UAAAC,GAAU,OAAAC,GAAO,gBAAAC,GAAgB;AAClE,EAAAQ,EAAO,UAAU,EAAE,SAAAX,GAAS,UAAAC,GAAU,OAAAC,GAAO,gBAAAC,EAAA;AAE7C,QAAMS,IAAe,CAACC,MAA4B;AAChD,IAAAN,EAAQ,UAAUM,GAClBR,EAAQQ,CAAI;AAAA,EACd,GACMC,IAAU,CAACC,MAAoB;AACnC,UAAMC,IAAUT,EAAQ;AAKxB,QAJI,CAACS,MACLN,EAAQ,UAAA,GACRA,EAAQ,UAAU,MAClBE,EAAa,IAAI,GACb,CAACG,KAAUC,EAAQ,SAAS,GAAG;AACnC,UAAM,EAAE,SAASC,GAAK,gBAAgBC,EAAA,IAAWP,EAAO,SAClDQ,IAASF,EAAI,KAAK,CAACG,MAAMA,EAAE,OAAOJ,EAAQ,EAAE;AAClD,IAAI,CAACG,KAAU,CAACD,KAChBA,EAAOC,EAAO,IAAIE,EAAQF,EAAO,MAAMH,EAAQ,IAAI,CAAC;AAAA,EACtD;AAEA,SAAAM,EAAU,MAAM,MAAMZ,EAAQ,UAAA,GAAa,CAAA,CAAE,GA4CtC,EAAE,MAAAN,GAAM,WA1CG,CAAC,GAA8Be,MAA+B;AAE9E,QAAI,CAACA,EAAO,YAAYA,EAAO,WAAWnB,EAAQ,KAAK,CAACoB,MAAMA,EAAE,OAAO,KAAK,EAAE,WAAW,EAAG;AAC5F,IAAAV,EAAQ,UAAA,GACRD,EAAU,UAAU,IACpBG,EAAa,EAAE,IAAIO,EAAO,IAAI,QAAQ,EAAE,SAAS,MAAM,GAAG;AAC1D,UAAMI,IAAO,CAACH,MAA+B;AAC3C,YAAMJ,IAAUT,EAAQ;AACxB,UAAI,CAACS,EAAS;AACd,MAAI,KAAK,IAAII,EAAE,UAAUJ,EAAQ,MAAM,IAAIlB,MAAmBW,EAAU,UAAU;AAClF,YAAM,EAAE,UAAUe,GAAI,OAAOC,EAAA,IAAMd,EAAO,SACpCe,IAASf,EAAO,QAAQ,QAAQ,KAAK,CAACgB,MAAMA,EAAE,OAAOX,EAAQ,EAAE;AACrE,MAAKU,KACLd,EAAa,EAAE,GAAGI,GAAS,MAAMY,EAAgBF,EAAO,MAAM,KAAK,OAAON,EAAE,UAAUJ,EAAQ,UAAUQ,CAAE,GAAGC,CAAC,GAAG;AAAA,IACnH,GACMI,IAAK,MAAMf,EAAQ,EAAI,GACvBgB,IAAS,MAAMhB,EAAQ,EAAK,GAC5BiB,IAAM,CAACC,MAAgC;AAC3C,MAAIA,EAAE,QAAQ,YAAUlB,EAAQ,EAAK;AAAA,IACvC;AACA,WAAO,iBAAiB,eAAeS,CAAI,GAC3C,OAAO,iBAAiB,aAAaM,CAAE,GACvC,OAAO,iBAAiB,iBAAiBC,CAAM,GAC/C,OAAO,iBAAiB,WAAWC,CAAG,GACtCrB,EAAQ,UAAU,MAAM;AACtB,aAAO,oBAAoB,eAAea,CAAI,GAC9C,OAAO,oBAAoB,aAAaM,CAAE,GAC1C,OAAO,oBAAoB,iBAAiBC,CAAM,GAClD,OAAO,oBAAoB,WAAWC,CAAG;AAAA,IAC3C;AAAA,EACF,GAY0B,uBATI,MAAM;AAClC,UAAME,IAAMxB,EAAU;AACtB,WAAAA,EAAU,UAAU,IACbwB;AAAA,EACT,GAKiD,qBAJrB,MAAM;AAChC,IAAAxB,EAAU,UAAU;AAAA,EACtB,EAEiD;AACnD;"}

package/dist/components/date-timeline/useTimelineZoom.js

@@ -0,0 +1,44 @@
+import { useRef as m, useCallback as L, useLayoutEffect as p, useEffect as w } from "react";
+import { dayAtViewportX as k, scrollLeftForAnchor as A, scalePxPerDay as f, wheelZoomFactor as E, KEY_ZOOM_FACTOR as D, DEFAULT_PX_PER_DAY as _ } from "../../lib/date-timeline/scale.js";
+function W({ scroller: o, pxPerDay: n, range: c, labelWidth: u, isEmpty: y, onPxPerDayChange: d, centerOnToday: K }) {
+  const i = m({ pxPerDay: n, range: c, labelWidth: u, onPxPerDayChange: d });
+  i.current = { pxPerDay: n, range: c, labelWidth: u, onPxPerDayChange: d };
+  const a = m(null), l = L(
+    (e, r) => {
+      const t = i.current;
+      if (e === t.pxPerDay) return;
+      const s = o.current;
+      if (s) {
+        const h = r === void 0 ? t.labelWidth + (s.clientWidth - t.labelWidth) / 2 : Math.max(t.labelWidth, r);
+        a.current = { day: k(h, s.scrollLeft, t.range.startDay, t.pxPerDay, t.labelWidth), viewportX: h, pxPerDay: e };
+      }
+      t.onPxPerDayChange(e);
+    },
+    [o]
+  );
+  return p(() => {
+    const e = a.current;
+    a.current = null;
+    const r = o.current;
+    e && e.pxPerDay === n && r ? r.scrollLeft = A(e.day, c.startDay, n, u, e.viewportX) : K();
+  }, [n, y]), w(() => {
+    const e = o.current;
+    if (!e) return;
+    const r = (t) => {
+      !t.ctrlKey && !t.metaKey || (t.preventDefault(), l(f(i.current.pxPerDay, E(t.deltaY, t.deltaMode)), t.clientX - e.getBoundingClientRect().left - e.clientLeft));
+    };
+    return e.addEventListener("wheel", r, { passive: !1 }), () => e.removeEventListener("wheel", r);
+  }, [o, y, l]), { zoomTo: l, onKeyDown: (e) => {
+    if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
+    let r;
+    if (e.key === "+" || e.key === "=") r = f(n, D);
+    else if (e.key === "-" || e.key === "_") r = f(n, 1 / D);
+    else if (e.key === "0") r = _;
+    else return;
+    e.preventDefault(), l(r);
+  } };
+}
+export {
+  W as useTimelineZoom
+};
+//# sourceMappingURL=useTimelineZoom.js.map

package/dist/components/date-timeline/useTimelineZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelineZoom.js","sources":["../../../src/components/date-timeline/useTimelineZoom.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, type KeyboardEvent, type RefObject } from \"react\";\nimport {\n  DEFAULT_PX_PER_DAY,\n  KEY_ZOOM_FACTOR,\n  dayAtViewportX,\n  scalePxPerDay,\n  scrollLeftForAnchor,\n  wheelZoomFactor,\n  type DayRange,\n} from \"../../lib/date-timeline/scale\";\n\ninterface TimelineZoomInput {\n  scroller: RefObject<HTMLDivElement | null>;\n  pxPerDay: number;\n  range: DayRange;\n  labelWidth: number;\n  /** True while the scroller is not rendered (no items): the effects run again when it first mounts. */\n  isEmpty: boolean;\n  onPxPerDayChange: (pxPerDay: number) => void;\n  /** Scrolls the date area to today; the fallback when the scale changed without a zoom started here. */\n  centerOnToday: () => void;\n}\n\n/**\n * The timeline's zoom inputs (DXUI-61, DEC-129, DEC-130): Ctrl/Cmd + wheel over the scroller, Ctrl/Cmd + plus, minus and 0 inside the\n * timeline, and `zoomTo` for the slider. A zoom keeps one date still on screen: the one under the pointer for the wheel,\n * the visible center for the rest.\n */\nexport function useTimelineZoom({ scroller, pxPerDay, range, labelWidth, isEmpty, onPxPerDayChange, centerOnToday }: TimelineZoomInput) {\n  /* The new scale only arrives with the host's next render, so the date and where it sits are held here and the scroll is\n     set before paint, from that render's own axis (a change of tick unit moves the axis start). */\n  const latest = useRef({ pxPerDay, range, labelWidth, onPxPerDayChange });\n  latest.current = { pxPerDay, range, labelWidth, onPxPerDayChange };\n  const pendingAnchor = useRef<{ day: number; viewportX: number; pxPerDay: number } | null>(null);\n  const zoomTo = useCallback(\n    (next: number, viewportX?: number) => {\n      const current = latest.current;\n      if (next === current.pxPerDay) return;\n      const el = scroller.current;\n      if (el) {\n        const x = viewportX === undefined ? current.labelWidth + (el.clientWidth - current.labelWidth) / 2 : Math.max(current.labelWidth, viewportX);\n        pendingAnchor.current = { day: dayAtViewportX(x, el.scrollLeft, current.range.startDay, current.pxPerDay, current.labelWidth), viewportX: x, pxPerDay: next };\n      }\n      current.onPxPerDayChange(next);\n    },\n    [scroller],\n  );\n\n  /* Before paint, whenever the scale changes or the scroller first mounts (it is not rendered while empty): a zoom started here\n     keeps its anchor, any other change (the host set the scale itself) opens on today. Not on every `items` change: a host that\n     refetches would otherwise snatch the viewer back to today while they read the far end. */\n  useLayoutEffect(() => {\n    const anchor = pendingAnchor.current;\n    pendingAnchor.current = null;\n    const el = scroller.current;\n    if (anchor && anchor.pxPerDay === pxPerDay && el) {\n      el.scrollLeft = scrollLeftForAnchor(anchor.day, range.startDay, pxPerDay, labelWidth, anchor.viewportX);\n    } else centerOnToday();\n  }, [pxPerDay, isEmpty]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  /* Ctrl (or Cmd) + wheel, which is also how a trackpad pinch arrives. A native non-passive listener: React's `onWheel` is passive and\n     cannot stop the browser's page zoom, and only a wheel over the scroller is stopped. */\n  useEffect(() => {\n    const el = scroller.current;\n    if (!el) return;\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return;\n      event.preventDefault();\n      zoomTo(scalePxPerDay(latest.current.pxPerDay, wheelZoomFactor(event.deltaY, event.deltaMode)), event.clientX - el.getBoundingClientRect().left - el.clientLeft);\n    };\n    el.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => el.removeEventListener(\"wheel\", onWheel);\n  }, [scroller, isEmpty, zoomTo]);\n\n  /* Ctrl (or Cmd) + plus / minus / 0 while focus is inside the timeline (a keydown from any child bubbles to the root that carries this). `=` is the unshifted plus key. */\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!(event.ctrlKey || event.metaKey) || event.altKey) return;\n    let next: number;\n    if (event.key === \"+\" || event.key === \"=\") next = scalePxPerDay(pxPerDay, KEY_ZOOM_FACTOR);\n    else if (event.key === \"-\" || event.key === \"_\") next = scalePxPerDay(pxPerDay, 1 / KEY_ZOOM_FACTOR);\n    else if (event.key === \"0\") next = DEFAULT_PX_PER_DAY;\n    else return;\n    event.preventDefault();\n    zoomTo(next);\n  };\n\n  return { zoomTo, onKeyDown };\n}\n"],"names":["useTimelineZoom","scroller","pxPerDay","range","labelWidth","isEmpty","onPxPerDayChange","centerOnToday","latest","useRef","pendingAnchor","zoomTo","useCallback","next","viewportX","current","el","x","dayAtViewportX","useLayoutEffect","anchor","scrollLeftForAnchor","useEffect","onWheel","event","scalePxPerDay","wheelZoomFactor","KEY_ZOOM_FACTOR","DEFAULT_PX_PER_DAY"],"mappings":";;AA4BO,SAASA,EAAgB,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,YAAAC,GAAY,SAAAC,GAAS,kBAAAC,GAAkB,eAAAC,KAAoC;AAGtI,QAAMC,IAASC,EAAO,EAAE,UAAAP,GAAU,OAAAC,GAAO,YAAAC,GAAY,kBAAAE,GAAkB;AACvE,EAAAE,EAAO,UAAU,EAAE,UAAAN,GAAU,OAAAC,GAAO,YAAAC,GAAY,kBAAAE,EAAA;AAChD,QAAMI,IAAgBD,EAAoE,IAAI,GACxFE,IAASC;AAAA,IACb,CAACC,GAAcC,MAAuB;AACpC,YAAMC,IAAUP,EAAO;AACvB,UAAIK,MAASE,EAAQ,SAAU;AAC/B,YAAMC,IAAKf,EAAS;AACpB,UAAIe,GAAI;AACN,cAAMC,IAAIH,MAAc,SAAYC,EAAQ,cAAcC,EAAG,cAAcD,EAAQ,cAAc,IAAI,KAAK,IAAIA,EAAQ,YAAYD,CAAS;AAC3I,QAAAJ,EAAc,UAAU,EAAE,KAAKQ,EAAeD,GAAGD,EAAG,YAAYD,EAAQ,MAAM,UAAUA,EAAQ,UAAUA,EAAQ,UAAU,GAAG,WAAWE,GAAG,UAAUJ,EAAA;AAAA,MACzJ;AACA,MAAAE,EAAQ,iBAAiBF,CAAI;AAAA,IAC/B;AAAA,IACA,CAACZ,CAAQ;AAAA,EAAA;AAMX,SAAAkB,EAAgB,MAAM;AACpB,UAAMC,IAASV,EAAc;AAC7B,IAAAA,EAAc,UAAU;AACxB,UAAMM,IAAKf,EAAS;AACpB,IAAImB,KAAUA,EAAO,aAAalB,KAAYc,IAC5CA,EAAG,aAAaK,EAAoBD,EAAO,KAAKjB,EAAM,UAAUD,GAAUE,GAAYgB,EAAO,SAAS,IACjGb,EAAA;AAAA,EACT,GAAG,CAACL,GAAUG,CAAO,CAAC,GAItBiB,EAAU,MAAM;AACd,UAAMN,IAAKf,EAAS;AACpB,QAAI,CAACe,EAAI;AACT,UAAMO,IAAU,CAACC,MAAsB;AACrC,MAAI,CAACA,EAAM,WAAW,CAACA,EAAM,YAC7BA,EAAM,eAAA,GACNb,EAAOc,EAAcjB,EAAO,QAAQ,UAAUkB,EAAgBF,EAAM,QAAQA,EAAM,SAAS,CAAC,GAAGA,EAAM,UAAUR,EAAG,wBAAwB,OAAOA,EAAG,UAAU;AAAA,IAChK;AACA,WAAAA,EAAG,iBAAiB,SAASO,GAAS,EAAE,SAAS,IAAO,GACjD,MAAMP,EAAG,oBAAoB,SAASO,CAAO;AAAA,EACtD,GAAG,CAACtB,GAAUI,GAASM,CAAM,CAAC,GAcvB,EAAE,QAAAA,GAAQ,WAXC,CAACa,MAAyB;AAC1C,QAAI,EAAEA,EAAM,WAAWA,EAAM,YAAYA,EAAM,OAAQ;AACvD,QAAIX;AACJ,QAAIW,EAAM,QAAQ,OAAOA,EAAM,QAAQ,IAAK,CAAAX,IAAOY,EAAcvB,GAAUyB,CAAe;AAAA,aACjFH,EAAM,QAAQ,OAAOA,EAAM,QAAQ,IAAK,CAAAX,IAAOY,EAAcvB,GAAU,IAAIyB,CAAe;AAAA,aAC1FH,EAAM,QAAQ,IAAK,CAAAX,IAAOe;AAAA,QAC9B;AACL,IAAAJ,EAAM,eAAA,GACNb,EAAOE,CAAI;AAAA,EACb,EAEiB;AACnB;"}

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

@@ -0,0 +1,37 @@
+import { createContext as e, useContext as n } from "react";
+const t = e(null), i = e(null), u = e(null), a = e(null), s = e(!1), d = t.Provider, c = i.Provider, p = u.Provider, l = a.Provider, C = s.Provider;
+function g() {
+  return n(s);
+}
+function v() {
+  return n(a);
+}
+function f(o) {
+  const r = n(t);
+  if (!r) throw new Error(`<${o}> must be rendered inside a <DragDrop>.`);
+  return r;
+}
+function P(o) {
+  const r = n(i);
+  if (!r)
+    throw new Error(`<${o}> must be rendered inside a <DragDropContainer>.`);
+  return r;
+}
+function m(o) {
+  const r = n(u);
+  if (!r) throw new Error(`<${o}> must be rendered inside a <DragDropItem>.`);
+  return r;
+}
+export {
+  C as DragDropCloneProvider,
+  c as DragDropContainerProvider,
+  l as DragDropGroupProvider,
+  p as DragDropItemProvider,
+  d as DragDropProvider,
+  f as useDragDrop,
+  g as useDragDropClone,
+  P as useDragDropContainer,
+  v as useDragDropGroup,
+  m as useDragDropItem
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/drag-drop/context.ts"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\nimport type { DragAxis, DragId, ContainerId, DragSession, GroupId, PieceId } from \"../../lib/dnd\";\nimport type { ContainerShift } from \"./shift\";\n\n/* ----------------------------------------------------------------------------\n   Shared state for `DragDrop`'s parts.\n\n   THREE MODULE-PRIVATE CONTEXTS AND THREE HOOKS THAT THROW, which is the shape\n   every multi-part component in this library uses (`Panel.tsx`,\n   `code-editor/context.ts`). Three rather than one because the nesting is real:\n   the board owns the session, a container owns the axis and the shift its own\n   children apply, and an item owns the element a handle attaches to. Flattening\n   them would make a container's shift visible to a sibling container's items,\n   which is precisely the mistake that produces a whole column moving in\n   sympathy with the one next to it.\n\n   The throw is the point. A `<DragDropHandle>` rendered outside an item would\n   otherwise read `undefined`, attach to nothing, and render a grip that is\n   focusable, styled, described by the instructions — and inert. That failure\n   has no error, no type error and no visible symptom on a machine with a mouse,\n   which is the entire class this project keeps finding.\n   -------------------------------------------------------------------------- */\n\nexport interface DragDropContextValue {\n  session: DragSession;\n  /**\n   * The id of THIS board's instructions paragraph, generated per board.\n   *\n   * Per board, not per page: the engine's `DRAG_INSTRUCTIONS_ID` is a module\n   * constant, so two boards on one page emit the same id twice and every\n   * handle's `aria-describedby` then resolves to whichever the browser saw\n   * first. A duplicate id is valid HTML that no check reads, and the symptom —\n   * one board's handles describing the other's — is invisible to everything\n   * except a screen reader.\n   */\n  instructionsId: string;\n  /**\n   * What the carried card SHOWS — never how, whether, or where it is carried.\n   *\n   * There is exactly one carry mechanism (`DragDrop.tsx#CarriedCard`: a `fixed`\n   * clone portalled to the body) and every item uses it, so this is content and\n   * nothing else. Absent — the ordinary case — the clone renders the carried\n   * item's OWN children, which is the only version of the card that cannot\n   * drift from the row it stands for.\n   *\n   * This used to be a `lifted` boolean counting mounted `<DragDropOverlay>`s,\n   * and it selected a MECHANISM: overlay mounted meant a portalled clone,\n   * absent meant the row transformed itself in flow. Two mechanisms is what\n   * this field no longer is. A board that forgot the overlay got a card that\n   * could not leave its own scroll container, which is a defect a consumer had\n   * no way to know it owed — and the reason the mechanism is not a choice.\n   */\n  renderCarried: ((id: DragId) => ReactNode) | undefined;\n  /** Items and containers publish their spoken names here at mount. */\n  registerLabel: (kind: \"item\" | \"container\", id: string, label: string | undefined) => () => void;\n  /**\n   * THE CENSUS — what this board is actually made of, so a board that cannot\n   * work can say so.\n   *\n   * A misconfiguration that produces SILENCE is a library defect, not a\n   * consumer defect, and this surface is full of the shape: a board whose rows\n   * have no drag source renders perfectly, announces itself correctly, passes\n   * every test, and cannot be dragged at all. No error, nothing to see. Same\n   * for a board with no `onDragEnd`, which drags beautifully and drops nothing.\n   *\n   * Parts report themselves here at mount; `DragDrop` reads the tally once the\n   * page has settled and warns in development. See `DragDrop.tsx#useCensus`.\n   */\n  census: DragDropCensus;\n}\n\nexport interface DragDropCensus {\n  /** One row. `container` and `index` are reported so duplicates can be found. */\n  item: (id: string, container: string, index: number) => () => void;\n  /** One thing the sensors can actually attach to — a grip, or a whole surface. */\n  source: (id: string) => () => void;\n}\n\nexport interface DragDropContainerContextValue {\n  id: ContainerId;\n  axis: DragAxis;\n  /** Null when no drag is in flight — nothing moves and no gap is open. */\n  shift: ContainerShift | null;\n}\n\nexport interface DragDropItemContextValue {\n  id: DragId;\n  /** The element the pointer and keyboard sensors attach to. */\n  setHandleRef: (el: HTMLElement | null) => void;\n  /** Spoken name, used to build the handle's accessible name. */\n  label: string | undefined;\n}\n\n/** DX-5522: the group box an item is drawn in, and (DX-5521) the piece of it. */\nexport interface DragDropGroupContextValue {\n  id: GroupId;\n  piece: PieceId;\n}\n\nconst BoardContext = createContext<DragDropContextValue | null>(null);\nconst ContainerContext = createContext<DragDropContainerContextValue | null>(null);\nconst ItemContext = createContext<DragDropItemContextValue | null>(null);\nconst GroupContext = createContext<DragDropGroupContextValue | null>(null);\n\n/**\n * True inside the carried clone — the same card markup, rendered a second time\n * as the thing being carried.\n *\n * IT IS A PICTURE OF A CARD, NOT A SECOND CARD. Reusing the consumer's own\n * markup is the only way the clone cannot drift from the row it represents, and\n * the cost is that everything interactive inside it arrives twice: a second\n * element answering `[data-dnd-handle]` (which every gate in this repo counts),\n * a second `tabIndex={0}` in the tab order, and a second element the sensors\n * would attach to. So the parts render their appearance here and none of their\n * behaviour. Defaults to false, and never throws — a card rendered outside a\n * clone is the ordinary case.\n */\nconst CloneContext = createContext(false);\n\nexport const DragDropProvider = BoardContext.Provider;\nexport const DragDropContainerProvider = ContainerContext.Provider;\nexport const DragDropItemProvider = ItemContext.Provider;\nexport const DragDropGroupProvider = GroupContext.Provider;\nexport const DragDropCloneProvider = CloneContext.Provider;\n\nexport function useDragDropClone(): boolean {\n  return useContext(CloneContext);\n}\n\n/** The group box this item is drawn in, or null for an item drawn on its own — never throws: most items have none. */\nexport function useDragDropGroup(): DragDropGroupContextValue | null {\n  return useContext(GroupContext);\n}\n\nexport function useDragDrop(component: string): DragDropContextValue {\n  const value = useContext(BoardContext);\n  if (!value) throw new Error(`<${component}> must be rendered inside a <DragDrop>.`);\n  return value;\n}\n\nexport function useDragDropContainer(component: string): DragDropContainerContextValue {\n  const value = useContext(ContainerContext);\n  if (!value) {\n    throw new Error(`<${component}> must be rendered inside a <DragDropContainer>.`);\n  }\n  return value;\n}\n\nexport function useDragDropItem(component: string): DragDropItemContextValue {\n  const value = useContext(ItemContext);\n  if (!value) throw new Error(`<${component}> must be rendered inside a <DragDropItem>.`);\n  return value;\n}\n"],"names":["BoardContext","createContext","ContainerContext","ItemContext","GroupContext","CloneContext","DragDropProvider","DragDropContainerProvider","DragDropItemProvider","DragDropGroupProvider","DragDropCloneProvider","useDragDropClone","useContext","useDragDropGroup","useDragDrop","component","value","useDragDropContainer","useDragDropItem"],"mappings":";AAmGA,MAAMA,IAAeC,EAA2C,IAAI,GAC9DC,IAAmBD,EAAoD,IAAI,GAC3EE,IAAcF,EAA+C,IAAI,GACjEG,IAAeH,EAAgD,IAAI,GAenEI,IAAeJ,EAAc,EAAK,GAE3BK,IAAmBN,EAAa,UAChCO,IAA4BL,EAAiB,UAC7CM,IAAuBL,EAAY,UACnCM,IAAwBL,EAAa,UACrCM,IAAwBL,EAAa;AAE3C,SAASM,IAA4B;AAC1C,SAAOC,EAAWP,CAAY;AAChC;AAGO,SAASQ,IAAqD;AACnE,SAAOD,EAAWR,CAAY;AAChC;AAEO,SAASU,EAAYC,GAAyC;AACnE,QAAMC,IAAQJ,EAAWZ,CAAY;AACrC,MAAI,CAACgB,EAAO,OAAM,IAAI,MAAM,IAAID,CAAS,yCAAyC;AAClF,SAAOC;AACT;AAEO,SAASC,EAAqBF,GAAkD;AACrF,QAAMC,IAAQJ,EAAWV,CAAgB;AACzC,MAAI,CAACc;AACH,UAAM,IAAI,MAAM,IAAID,CAAS,kDAAkD;AAEjF,SAAOC;AACT;AAEO,SAASE,EAAgBH,GAA6C;AAC3E,QAAMC,IAAQJ,EAAWT,CAAW;AACpC,MAAI,CAACa,EAAO,OAAM,IAAI,MAAM,IAAID,CAAS,6CAA6C;AACtF,SAAOC;AACT;"}

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

@@ -0,0 +1,270 @@
+import { tv as e } from "tailwind-variants";
+const t = e({
+  slots: {
+    /* No layout of its own. A board is a grid, a row, a single column or a
+       page-wide splitter, and every one of those belongs to the consumer —
+       what this element exists for is to give the live region and the
+       instructions a home that cannot be forgotten. Both are `sr-only`, which
+       is absolutely positioned, so neither becomes a grid or flex child of
+       whatever layout the consumer puts here. */
+    root: "",
+    /* THE DROP CONTAINER IS THE SCROLLER, and they have to be the same element:
+           auto-scroll finds its edges from whatever is scrollable under the pointer,
+           so a wrapper that scrolls while a child registers as the container gives
+           the two different boxes — the list scrolls from one edge while the
+           insertion point is resolved against another.
+    
+           NO `gap`. Spacing lives on the items as a margin, because the insertion
+           marker is a zero-height child and a flex `gap` would add a whole gap's
+           worth of layout for it — moving every box below it, on a surface whose
+           whole design depends on the boxes not moving. A margin adds nothing for a
+           zero-height element, so the marker is free.
+    
+           BOTH AXES ARE DECLARED, on the `axis` variant below, and the CROSS one is
+           `hidden` — see the note there. Declaring only the reorder axis is what
+           produced a scrollbar nobody asked for. */
+    container: "relative flex min-h-0 min-w-0 overscroll-contain",
+    /* The MEASURED element. Nothing here may transform it — see `shift.ts`. */
+    item: "min-w-0 shrink-0",
+    /* The element that moves. Its transition is only declared WHILE a drag is
+       in flight — see the `moving` variant. */
+    shift: "min-w-0",
+    /* DX-5522: A GROUP BOX'S FRAME, the decoration drawn around a group's cards. It is out of flow and the cards are not
+       inside it, so changing its extent moves no measured box (the cards are what the engine measures, and they sit in a
+       sibling), and the group's own layout box — the registered, measured one — stays what it was at pickup. The extent is
+       set inline from `ContainerShift.groups`; the transition only exists while a drag does, for the reason on `moving`. */
+    groupFrame: "pointer-events-none absolute",
+    /* The element holding a group's cards. In the container's own direction, and a group's LAST card leaves no margin after
+       itself: the box's padding is the space under it, and an item's margin there would make the box taller than its cards.
+       The marker drawn after that card compensates (`shift.ts`, `item-after`). */
+    groupItems: "flex",
+    /* Zero-sized in flow, so where the marker sits in the DOM says WHICH slot
+       is the target without its presence changing a single box. The visible
+       landing zone is its absolutely-positioned child. */
+    marker: [
+      "pointer-events-none relative shrink-0",
+      "transition-[var(--tx-colors),translate]",
+      "duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard"
+    ],
+    /* Fades in rather than appearing at full strength: the gap takes a moment
+       to open, and an outline drawn at once sits on top of the neighbour that
+       is still moving out of it. */
+    landing: "absolute animate-fade-in rounded-lg border-2 border-dashed border-accent-border bg-accent-subtle",
+    /* THE WHOLE CARD AS THE DRAG SOURCE — `DragDropHandle`'s alternative.
+           It carries no appearance of its own: the thing being dragged is the
+           consumer's card, and a surface that painted anything would paint over it.
+           What it does carry is the two properties a drag source cannot work
+           without.
+    
+           `select-none`, because a press-and-move on a card full of text selects
+           that text, and a drag under a growing blue selection reads as broken even
+           when the card lands correctly. A grip never had this problem — there is
+           nothing inside a 24px icon to select.
+    
+           `touch-pan-*` comes from the `axis` variant, for exactly the reason the
+           grip's does: `touch-action: none` would eat every swipe that happens to
+           begin on a card, and on a board that is every swipe. */
+    surface: [
+      "min-w-0 select-none outline-none",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring"
+    ],
+    handle: [
+      /* PADDING, NOT `min-h-6`, and the difference is measurable. `dx-tap` is
+         44px on a coarse pointer and `auto` on a mouse, so the grip on a desktop
+         would otherwise be exactly its icon — 16px, under WCAG 2.2's 24px floor
+         (conformant on the spacing exception, since the next grip is a whole
+         card away, but not easy to hit). A `min-w-6` fixes that and breaks the
+         other end: Tailwind emits it into `@layer utilities`, which outranks
+         `dx-tap`'s `@layer components`, so it CAPS the touch target back down to
+         24px. Measured: 24x24 under coarse-pointer emulation with
+         `--tap-target` resolving to 44px, system-wide rule ACK-5 silently
+         reverted for this one control. Padding is additive and outranks
+         nothing. */
+      "dx-tap inline-grid shrink-0 cursor-grab place-items-center rounded p-1",
+      "text-tertiary outline-none",
+      "transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover",
+      /* BOTH AXES, and the background is the one that is load-bearing. A
+         text-only hover works right up until a consumer sets the handle's
+         resting colour to the same `text-primary` it hovers to — which the
+         demo's own column grips do, because they read as chips — and then
+         hovering changes nothing at all. Measured by `audit:hover` at
+         ΔE 0.000 on two of them, on the first run after this component
+         landed. `--surface-hover` is the system's interaction fill and it
+         mixes from whatever ground the handle sits on, so it stays visible
+         however the consumer paints the rest. */
+      "hover:bg-surface-hover hover:text-primary active:cursor-grabbing",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring"
+    ],
+    /* POINTER EVENTS OFF, AND IT IS NOT DECORATION. A clone sitting under the
+           cursor makes `elementFromPoint` return the CLONE, so auto-scroll resolves
+           the document instead of the column and silently stops scrolling — measured
+           once already, on this component's own engine.
+    
+           `fixed`, not `absolute`: the card is carried across containers that clip
+           their own overflow, and an absolutely-positioned clone is clipped by the
+           first one it leaves. It is rendered through a portal for the same reason. */
+    overlay: [
+      "pointer-events-none fixed top-0 left-0 z-(--z-drag) min-w-0",
+      "transition-[var(--tx-colors),translate]",
+      "ease-standard"
+    ]
+  },
+  variants: {
+    /* THE REORDER AXIS SCROLLS; THE CROSS AXIS IS `hidden`, EXPLICITLY.
+           Declaring one axis and leaving the other alone does NOT leave the other
+           alone: CSS computes `overflow-x: visible` to `auto` the moment
+           `overflow-y` is not `visible` (and vice versa). So `overflow-y-auto` on
+           its own silently made every vertical list a HORIZONTAL scroller too —
+           measured, `getComputedStyle(container).overflowX === "auto"` on a
+           container whose only overflow class was `overflow-y-auto`.
+    
+           At rest that costs nothing, because nothing overflows sideways: every
+           container in this package measured `scrollWidth === clientWidth`. What
+           made it visible was a drag, back when the held row was carried IN FLOW —
+           a transformed in-flow element contributes to its ancestor's scrollable
+           overflow region, so the row inflated the extent of the very container it
+           was inside (512 -> 607px on a straight 90px sideways drag), which bought
+           a scrollbar under a list with nothing to scroll, then auto-scroll theft
+           (`isScrollable` asks whether an element BOTH declares a scrolling
+           overflow AND actually overflows, and the row supplied the second half by
+           itself), then an unbounded runaway — 435 -> 2985px of extent in three
+           seconds, because scrolling moved the row's rest box and the row's offset
+           was measured from it.
+    
+           NONE OF THAT IS REACHABLE ANY MORE, AND THAT IS THE POINT OF THIS
+           DECLARATION SURVIVING THE FIX. The carried card is a `fixed` clone in a
+           portal (`DragDrop.tsx#CarriedCard`) — nothing transformed is left in
+           flow, so nothing inflates an extent, and the same portal is what lets the
+           card bleed past this container's edge instead of being clipped at it.
+           What this pair still does is keep the SECOND scroller from existing at
+           all: `overflow-y-auto` alone computes to a horizontal scroller, and a
+           container that declares a scrolling overflow it does not need is one
+           `elementFromPoint` result away from being auto-scroll's target for an
+           axis with no travel in it. The declaration is cheap and the coercion is
+           silent, which is the whole argument for stating both.
+    
+           `hidden` rather than `visible` because `visible` is not available: an
+           element cannot scroll one axis and overflow the other, by the same
+           computation described above. The cross axis is the half of that trade
+           that costs nothing — no surface here scrolls a column sideways or a row
+           vertically, `item` is `min-w-0` and its content truncates, and the only
+           thing that ever needed to escape sideways is the carried card, which is
+           no longer in the box to be clipped. The reorder axis keeps `auto`
+           untouched, so `attachAutoScroll` goes on driving the only axis a reorder
+           ever needed to scroll. */
+    axis: {
+      y: {
+        container: "flex-col overflow-x-hidden overflow-y-auto",
+        item: "mb-2",
+        groupFrame: "inset-0",
+        groupItems: "flex-col",
+        marker: "h-0 w-full",
+        landing: "inset-x-0 top-0",
+        handle: "touch-pan-y",
+        surface: "touch-pan-y"
+      },
+      x: {
+        container: "flex-row overflow-x-auto overflow-y-hidden",
+        item: "mr-2",
+        groupFrame: "inset-0",
+        groupItems: "flex-row",
+        /* `self-stretch`, AND IT USED TO BE `h-full` — WHICH MEASURED ZERO.
+        
+                   A row's height is normally its content's, so it is INDEFINITE, and a
+                   percentage against an indefinite height resolves to `auto`. `auto` on
+                   a marker that is `w-0` with an absolutely positioned child is nothing
+                   at all: measured mid-drag in the demo's own chip row, the marker came
+                   out 0 × 0 inside a 56px container, so the line showing where the chip
+                   was about to land did not exist. It is invisible in the one place it
+                   is the whole affordance, and it fails silently.
+        
+                   Worse than a no-op, because `align-self: stretch` applies only while
+                   the cross-size property is `auto` — so writing `height: 100%` is what
+                   TOOK the stretch away. Same defect, same cause, as the `h-full` the
+                   kanban lane carried (see `kanban/recipe.ts`); it just had no visible
+                   symptom on a bounded row, which is what the demo happened to have.
+        
+                   Stated as `self-stretch` rather than left to the container's default
+                   because it is the declaration that is load-bearing here, and a future
+                   `items-center` on the container — reasonable for a row of chips — would
+                   otherwise silently take it away again. */
+        marker: "w-0 self-stretch",
+        landing: "inset-y-0 left-0",
+        handle: "touch-pan-x",
+        surface: "touch-pan-x"
+      }
+    },
+    /* THE TRANSITION ONLY EXISTS WHILE A DRAG DOES, and that is not a
+           micro-optimisation — it is the difference between an animation and a
+           leftover. On release the consumer reorders its data, so every row's BOX
+           jumps to its new place in the same frame the shift returns to zero: a
+           transition still declared then slides the row from an offset that no
+           longer means anything, on top of a layout change that already happened.
+           Measured: `audit:dnd` reads a handle's box immediately after a drop and
+           presses there, and for 160ms afterwards the handle was somewhere else.
+    
+           Nothing is lost at the other end. Pickup opens no gap — the insertion
+           point starts at the card's own place, so every shift is zero — and by the
+           time the first one is not, this class has been present for a frame.
+    
+           Stripping it hands the element back to the base rule in `index.css`, so
+           it keeps the global colour fade rather than losing it. */
+    moving: {
+      true: {
+        shift: [
+          "transition-[var(--tx-colors),translate,opacity]",
+          "duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard"
+        ],
+        groupFrame: [
+          "transition-[var(--tx-colors),top,bottom,left,right]",
+          "duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard"
+        ]
+      },
+      false: {}
+    },
+    /* THERE IS NO `carried` VARIANT, and its absence is the shape of the fix.
+       It used to dress the row itself as the card in the hand — a 2% lift
+       scale, `z-(--z-drag)`, `duration-0`, `pointer-events-none` — for boards
+       that had not mounted an overlay to carry it instead. Carrying a row in
+       flow is what this component stopped doing: it cannot leave its own
+       scroller, and it inflates that scroller's extent (see the `axis` variant
+       above). Every carried card is now the `overlay` slot below, and the row
+       it left is a hole — `opacity-0`, no dressing, nothing to configure. */
+    mode: {
+      /* Following the cursor: no transition at all. Easing a clone toward the
+         pointer makes it lag behind the hand that is moving it, which reads as
+         the drag having become unresponsive rather than as smoothing. */
+      pointer: { overlay: "duration-0 rotate-2 shadow-xl" },
+      /* No pointer to follow, so it rests in the slot it would land in and
+         glides between slots as the arrow keys move the insertion point. The
+         ring is deliberate: focus stays on the handle inside the item's own
+         (now empty) slot, so this is the only thing on screen that shows the
+         keyboard where it is. */
+      keyboard: {
+        overlay: [
+          "duration-[calc(var(--dur-base)*var(--motion-travel))]",
+          "rounded-lg shadow-lg ring-2 ring-focus-ring"
+        ]
+      }
+    },
+    /* DX-5521: a group box's piece that the next piece continues (a box drawn across two page blocks of a windowed list, see
+       `PieceId`). Its last card keeps its margin, because the next card of the box follows it, and the piece leaves no margin
+       after itself, so the two pieces meet edge to edge and the cards across the join are spaced like any two in one box. */
+    continuesAfter: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    /* A box's LAST card leaves no margin after itself (see `groupItems`); a piece that continues has no last card of the box. */
+    { axis: "y", continuesAfter: !1, class: { groupItems: "[&>[data-dnd-item]:not(:has(~[data-dnd-item]))]:mb-0" } },
+    { axis: "x", continuesAfter: !1, class: { groupItems: "[&>[data-dnd-item]:not(:has(~[data-dnd-item]))]:mr-0" } },
+    { axis: "y", continuesAfter: !0, class: { item: "mb-0" } },
+    { axis: "x", continuesAfter: !0, class: { item: "mr-0" } }
+  ],
+  defaultVariants: { axis: "y", mode: "pointer", moving: !1, continuesAfter: !1 }
+});
+export {
+  t as dnd
+};
+//# sourceMappingURL=recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recipe.js","sources":["../../../src/components/drag-drop/recipe.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/* ----------------------------------------------------------------------------\n   The slots for `DragDrop`.\n\n   ONE DURATION TOKEN CARRIES THE WHOLE PREFERENCE, and it is multiplied by\n   `--motion-travel`, not `--motion-scale`. Reduced motion in this system halves\n   duration and zeroes DISTANCE (`styles/motion.css`, D-18) — but the distance\n   here is the message: the gap that opens is the only thing on screen saying\n   where the card will land, so zeroing it would remove the information rather\n   than the motion. Zeroing the duration instead is the honest reading of\n   \"reduce\": the gap still opens, it opens instantly, and nothing travels.\n\n   The elements that carry it — `shift` and `overlay` — deliberately hold no\n   colour of their own. A single `transition-duration` covers every property in\n   the list, so a colour on one of these would go instant under reduced motion\n   along with the travel; the coloured surface is the consumer's card INSIDE\n   them, which keeps the global colour fade untouched. The list still re-includes\n   `var(--tx-colors)` because naming a transition REPLACES the global one rather\n   than extending it, and an element with no colour transition at all is what\n   `audit:motion` counts as an offender (MOTION-1).\n   -------------------------------------------------------------------------- */\n\nexport const dnd = tv({\n  slots: {\n    /* No layout of its own. A board is a grid, a row, a single column or a\n       page-wide splitter, and every one of those belongs to the consumer —\n       what this element exists for is to give the live region and the\n       instructions a home that cannot be forgotten. Both are `sr-only`, which\n       is absolutely positioned, so neither becomes a grid or flex child of\n       whatever layout the consumer puts here. */\n    root: \"\",\n\n    /* THE DROP CONTAINER IS THE SCROLLER, and they have to be the same element:\n       auto-scroll finds its edges from whatever is scrollable under the pointer,\n       so a wrapper that scrolls while a child registers as the container gives\n       the two different boxes — the list scrolls from one edge while the\n       insertion point is resolved against another.\n\n       NO `gap`. Spacing lives on the items as a margin, because the insertion\n       marker is a zero-height child and a flex `gap` would add a whole gap's\n       worth of layout for it — moving every box below it, on a surface whose\n       whole design depends on the boxes not moving. A margin adds nothing for a\n       zero-height element, so the marker is free.\n\n       BOTH AXES ARE DECLARED, on the `axis` variant below, and the CROSS one is\n       `hidden` — see the note there. Declaring only the reorder axis is what\n       produced a scrollbar nobody asked for. */\n    container: \"relative flex min-h-0 min-w-0 overscroll-contain\",\n\n    /* The MEASURED element. Nothing here may transform it — see `shift.ts`. */\n    item: \"min-w-0 shrink-0\",\n\n    /* The element that moves. Its transition is only declared WHILE a drag is\n       in flight — see the `moving` variant. */\n    shift: \"min-w-0\",\n\n    /* DX-5522: A GROUP BOX'S FRAME, the decoration drawn around a group's cards. It is out of flow and the cards are not\n       inside it, so changing its extent moves no measured box (the cards are what the engine measures, and they sit in a\n       sibling), and the group's own layout box — the registered, measured one — stays what it was at pickup. The extent is\n       set inline from `ContainerShift.groups`; the transition only exists while a drag does, for the reason on `moving`. */\n    groupFrame: \"pointer-events-none absolute\",\n\n    /* The element holding a group's cards. In the container's own direction, and a group's LAST card leaves no margin after\n       itself: the box's padding is the space under it, and an item's margin there would make the box taller than its cards.\n       The marker drawn after that card compensates (`shift.ts`, `item-after`). */\n    groupItems: \"flex\",\n\n    /* Zero-sized in flow, so where the marker sits in the DOM says WHICH slot\n       is the target without its presence changing a single box. The visible\n       landing zone is its absolutely-positioned child. */\n    marker: [\n      \"pointer-events-none relative shrink-0\",\n      \"transition-[var(--tx-colors),translate]\",\n      \"duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard\",\n    ],\n    /* Fades in rather than appearing at full strength: the gap takes a moment\n       to open, and an outline drawn at once sits on top of the neighbour that\n       is still moving out of it. */\n    landing: \"absolute animate-fade-in rounded-lg border-2 border-dashed border-accent-border bg-accent-subtle\",\n\n    /* THE WHOLE CARD AS THE DRAG SOURCE — `DragDropHandle`'s alternative.\n       It carries no appearance of its own: the thing being dragged is the\n       consumer's card, and a surface that painted anything would paint over it.\n       What it does carry is the two properties a drag source cannot work\n       without.\n\n       `select-none`, because a press-and-move on a card full of text selects\n       that text, and a drag under a growing blue selection reads as broken even\n       when the card lands correctly. A grip never had this problem — there is\n       nothing inside a 24px icon to select.\n\n       `touch-pan-*` comes from the `axis` variant, for exactly the reason the\n       grip's does: `touch-action: none` would eat every swipe that happens to\n       begin on a card, and on a board that is every swipe. */\n    surface: [\n      \"min-w-0 select-none outline-none\",\n      \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n    ],\n\n    handle: [\n      /* PADDING, NOT `min-h-6`, and the difference is measurable. `dx-tap` is\n         44px on a coarse pointer and `auto` on a mouse, so the grip on a desktop\n         would otherwise be exactly its icon — 16px, under WCAG 2.2's 24px floor\n         (conformant on the spacing exception, since the next grip is a whole\n         card away, but not easy to hit). A `min-w-6` fixes that and breaks the\n         other end: Tailwind emits it into `@layer utilities`, which outranks\n         `dx-tap`'s `@layer components`, so it CAPS the touch target back down to\n         24px. Measured: 24x24 under coarse-pointer emulation with\n         `--tap-target` resolving to 44px, system-wide rule ACK-5 silently\n         reverted for this one control. Padding is additive and outranks\n         nothing. */\n      \"dx-tap inline-grid shrink-0 cursor-grab place-items-center rounded p-1\",\n      \"text-tertiary outline-none\",\n      \"transition-[var(--tx-colors)] duration-(--dur-fast) ease-hover\",\n      /* BOTH AXES, and the background is the one that is load-bearing. A\n         text-only hover works right up until a consumer sets the handle's\n         resting colour to the same `text-primary` it hovers to — which the\n         demo's own column grips do, because they read as chips — and then\n         hovering changes nothing at all. Measured by `audit:hover` at\n         ΔE 0.000 on two of them, on the first run after this component\n         landed. `--surface-hover` is the system's interaction fill and it\n         mixes from whatever ground the handle sits on, so it stays visible\n         however the consumer paints the rest. */\n      \"hover:bg-surface-hover hover:text-primary active:cursor-grabbing\",\n      \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n    ],\n\n    /* POINTER EVENTS OFF, AND IT IS NOT DECORATION. A clone sitting under the\n       cursor makes `elementFromPoint` return the CLONE, so auto-scroll resolves\n       the document instead of the column and silently stops scrolling — measured\n       once already, on this component's own engine.\n\n       `fixed`, not `absolute`: the card is carried across containers that clip\n       their own overflow, and an absolutely-positioned clone is clipped by the\n       first one it leaves. It is rendered through a portal for the same reason. */\n    overlay: [\n      \"pointer-events-none fixed top-0 left-0 z-(--z-drag) min-w-0\",\n      \"transition-[var(--tx-colors),translate]\",\n      \"ease-standard\",\n    ],\n  },\n  variants: {\n    /* THE REORDER AXIS SCROLLS; THE CROSS AXIS IS `hidden`, EXPLICITLY.\n       Declaring one axis and leaving the other alone does NOT leave the other\n       alone: CSS computes `overflow-x: visible` to `auto` the moment\n       `overflow-y` is not `visible` (and vice versa). So `overflow-y-auto` on\n       its own silently made every vertical list a HORIZONTAL scroller too —\n       measured, `getComputedStyle(container).overflowX === \"auto\"` on a\n       container whose only overflow class was `overflow-y-auto`.\n\n       At rest that costs nothing, because nothing overflows sideways: every\n       container in this package measured `scrollWidth === clientWidth`. What\n       made it visible was a drag, back when the held row was carried IN FLOW —\n       a transformed in-flow element contributes to its ancestor's scrollable\n       overflow region, so the row inflated the extent of the very container it\n       was inside (512 -> 607px on a straight 90px sideways drag), which bought\n       a scrollbar under a list with nothing to scroll, then auto-scroll theft\n       (`isScrollable` asks whether an element BOTH declares a scrolling\n       overflow AND actually overflows, and the row supplied the second half by\n       itself), then an unbounded runaway — 435 -> 2985px of extent in three\n       seconds, because scrolling moved the row's rest box and the row's offset\n       was measured from it.\n\n       NONE OF THAT IS REACHABLE ANY MORE, AND THAT IS THE POINT OF THIS\n       DECLARATION SURVIVING THE FIX. The carried card is a `fixed` clone in a\n       portal (`DragDrop.tsx#CarriedCard`) — nothing transformed is left in\n       flow, so nothing inflates an extent, and the same portal is what lets the\n       card bleed past this container's edge instead of being clipped at it.\n       What this pair still does is keep the SECOND scroller from existing at\n       all: `overflow-y-auto` alone computes to a horizontal scroller, and a\n       container that declares a scrolling overflow it does not need is one\n       `elementFromPoint` result away from being auto-scroll's target for an\n       axis with no travel in it. The declaration is cheap and the coercion is\n       silent, which is the whole argument for stating both.\n\n       `hidden` rather than `visible` because `visible` is not available: an\n       element cannot scroll one axis and overflow the other, by the same\n       computation described above. The cross axis is the half of that trade\n       that costs nothing — no surface here scrolls a column sideways or a row\n       vertically, `item` is `min-w-0` and its content truncates, and the only\n       thing that ever needed to escape sideways is the carried card, which is\n       no longer in the box to be clipped. The reorder axis keeps `auto`\n       untouched, so `attachAutoScroll` goes on driving the only axis a reorder\n       ever needed to scroll. */\n    axis: {\n      y: {\n        container: \"flex-col overflow-x-hidden overflow-y-auto\",\n        item: \"mb-2\",\n        groupFrame: \"inset-0\",\n        groupItems: \"flex-col\",\n        marker: \"h-0 w-full\",\n        landing: \"inset-x-0 top-0\",\n        handle: \"touch-pan-y\",\n        surface: \"touch-pan-y\",\n      },\n      x: {\n        container: \"flex-row overflow-x-auto overflow-y-hidden\",\n        item: \"mr-2\",\n        groupFrame: \"inset-0\",\n        groupItems: \"flex-row\",\n        /* `self-stretch`, AND IT USED TO BE `h-full` — WHICH MEASURED ZERO.\n\n           A row's height is normally its content's, so it is INDEFINITE, and a\n           percentage against an indefinite height resolves to `auto`. `auto` on\n           a marker that is `w-0` with an absolutely positioned child is nothing\n           at all: measured mid-drag in the demo's own chip row, the marker came\n           out 0 × 0 inside a 56px container, so the line showing where the chip\n           was about to land did not exist. It is invisible in the one place it\n           is the whole affordance, and it fails silently.\n\n           Worse than a no-op, because `align-self: stretch` applies only while\n           the cross-size property is `auto` — so writing `height: 100%` is what\n           TOOK the stretch away. Same defect, same cause, as the `h-full` the\n           kanban lane carried (see `kanban/recipe.ts`); it just had no visible\n           symptom on a bounded row, which is what the demo happened to have.\n\n           Stated as `self-stretch` rather than left to the container's default\n           because it is the declaration that is load-bearing here, and a future\n           `items-center` on the container — reasonable for a row of chips — would\n           otherwise silently take it away again. */\n        marker: \"w-0 self-stretch\",\n        landing: \"inset-y-0 left-0\",\n        handle: \"touch-pan-x\",\n        surface: \"touch-pan-x\",\n      },\n    },\n    /* THE TRANSITION ONLY EXISTS WHILE A DRAG DOES, and that is not a\n       micro-optimisation — it is the difference between an animation and a\n       leftover. On release the consumer reorders its data, so every row's BOX\n       jumps to its new place in the same frame the shift returns to zero: a\n       transition still declared then slides the row from an offset that no\n       longer means anything, on top of a layout change that already happened.\n       Measured: `audit:dnd` reads a handle's box immediately after a drop and\n       presses there, and for 160ms afterwards the handle was somewhere else.\n\n       Nothing is lost at the other end. Pickup opens no gap — the insertion\n       point starts at the card's own place, so every shift is zero — and by the\n       time the first one is not, this class has been present for a frame.\n\n       Stripping it hands the element back to the base rule in `index.css`, so\n       it keeps the global colour fade rather than losing it. */\n    moving: {\n      true: {\n        shift: [\n          \"transition-[var(--tx-colors),translate,opacity]\",\n          \"duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard\",\n        ],\n        groupFrame: [\n          \"transition-[var(--tx-colors),top,bottom,left,right]\",\n          \"duration-[calc(var(--dur-base)*var(--motion-travel))] ease-standard\",\n        ],\n      },\n      false: {},\n    },\n    /* THERE IS NO `carried` VARIANT, and its absence is the shape of the fix.\n       It used to dress the row itself as the card in the hand — a 2% lift\n       scale, `z-(--z-drag)`, `duration-0`, `pointer-events-none` — for boards\n       that had not mounted an overlay to carry it instead. Carrying a row in\n       flow is what this component stopped doing: it cannot leave its own\n       scroller, and it inflates that scroller's extent (see the `axis` variant\n       above). Every carried card is now the `overlay` slot below, and the row\n       it left is a hole — `opacity-0`, no dressing, nothing to configure. */\n    mode: {\n      /* Following the cursor: no transition at all. Easing a clone toward the\n         pointer makes it lag behind the hand that is moving it, which reads as\n         the drag having become unresponsive rather than as smoothing. */\n      pointer: { overlay: \"duration-0 rotate-2 shadow-xl\" },\n      /* No pointer to follow, so it rests in the slot it would land in and\n         glides between slots as the arrow keys move the insertion point. The\n         ring is deliberate: focus stays on the handle inside the item's own\n         (now empty) slot, so this is the only thing on screen that shows the\n         keyboard where it is. */\n      keyboard: {\n        overlay: [\n          \"duration-[calc(var(--dur-base)*var(--motion-travel))]\",\n          \"rounded-lg shadow-lg ring-2 ring-focus-ring\",\n        ],\n      },\n    },\n    /* DX-5521: a group box's piece that the next piece continues (a box drawn across two page blocks of a windowed list, see\n       `PieceId`). Its last card keeps its margin, because the next card of the box follows it, and the piece leaves no margin\n       after itself, so the two pieces meet edge to edge and the cards across the join are spaced like any two in one box. */\n    continuesAfter: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    /* A box's LAST card leaves no margin after itself (see `groupItems`); a piece that continues has no last card of the box. */\n    { axis: \"y\", continuesAfter: false, class: { groupItems: \"[&>[data-dnd-item]:not(:has(~[data-dnd-item]))]:mb-0\" } },\n    { axis: \"x\", continuesAfter: false, class: { groupItems: \"[&>[data-dnd-item]:not(:has(~[data-dnd-item]))]:mr-0\" } },\n    { axis: \"y\", continuesAfter: true, class: { item: \"mb-0\" } },\n    { axis: \"x\", continuesAfter: true, class: { item: \"mr-0\" } },\n  ],\n  defaultVariants: { axis: \"y\", mode: \"pointer\", moving: false, continuesAfter: false },\n});\n"],"names":["dnd","tv"],"mappings":"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"}