@ishibashi0112/spreadsheet-grid-core 0.39.0

package/dist/controllers/pointerInteractionsController.d.ts

@@ -0,0 +1,74 @@
+import { type GridUiAction } from '../model/gridActions';
+import type { CellCoord, GridColumn, GridUiState } from '../model/gridTypes.unbound';
+import { type GridPaneLayout } from '../logic/geometry';
+import { type RowMetrics } from '../logic/verticalGeometry';
+export declare const TOUCH_TAP_SLOP_PX = 10;
+export declare const TOUCH_DOUBLE_TAP_MS = 300;
+type MutableRef<V> = {
+    current: V;
+};
+type ReadonlyRef<V> = {
+    readonly current: V;
+};
+export type GridPointerEventLike = {
+    button: number;
+    pointerType: string;
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    shiftKey: boolean;
+    preventDefault: () => void;
+};
+export type PointerInteractionsArgs<T> = {
+    gridRootRef: ReadonlyRef<HTMLElement | null>;
+    bodyScrollRef: ReadonlyRef<HTMLElement | null>;
+    scrollContainerRef: ReadonlyRef<HTMLElement | null>;
+    leftPaneScrollRef: ReadonlyRef<HTMLElement | null>;
+    rightPaneScrollRef: ReadonlyRef<HTMLElement | null>;
+    pointerClientRef: MutableRef<{
+        x: number;
+        y: number;
+    } | null>;
+    autoScrollFrameRef: MutableRef<number | null>;
+    uiState: GridUiState;
+    dispatch: (action: GridUiAction) => void;
+    enableRangeSelection: boolean;
+    enableSorting: boolean;
+    orderedColumns: GridColumn<T>[];
+    filteredRowsLength: number;
+    visibleColumnsLength: number;
+    paneLayout: GridPaneLayout<T>;
+    leftLeadingWidth: number;
+    centerLeadingWidth: number;
+    rightLeadingWidth: number;
+    headerHeight: number;
+    rowMetrics: RowMetrics;
+    verticalScaleFactor: number;
+    setHoveredRowIndex: (value: number | null) => void;
+    setHoveredColumnIndex: (value: number | null) => void;
+    enableRowHover: boolean;
+    enableColumnHeaderHover: boolean;
+    enableRowSelection: boolean;
+    onGutterRowSelect: (viewIndex: number, opts: {
+        shiftKey: boolean;
+    }) => void;
+    onGutterRowSelectDrag: (viewIndex: number) => void;
+    onCellDoubleClickRef: ReadonlyRef<(cell: CellCoord) => void>;
+};
+export type PointerInteractionsController<T> = {
+    update: (args: PointerInteractionsArgs<T>) => void;
+    updateSelectionFromPointer: (clientX: number, clientY: number) => void;
+    handleCellPointerDown: (cell: CellCoord, event: GridPointerEventLike) => void;
+    handleCellDoubleClick: (cell: CellCoord) => void;
+    handleCellPointerEnter: (cell: CellCoord, event: GridPointerEventLike) => void;
+    handleNativeDragStart: (event: {
+        preventDefault: () => void;
+    }) => void;
+    handleRowHeaderPointerDown: (rowIndex: number, event: GridPointerEventLike) => void;
+    handleRowHeaderPointerEnter: (rowIndex: number, event: GridPointerEventLike) => void;
+    handleColumnHeaderPointerDown: (colIndex: number, event: GridPointerEventLike) => void;
+    handleColumnHeaderPointerEnter: (colIndex: number, event: GridPointerEventLike) => void;
+    dispose: () => void;
+};
+export declare const createPointerInteractionsController: <T>() => PointerInteractionsController<T>;
+export {};

package/dist/controllers/pointerInteractionsController.js

@@ -0,0 +1,262 @@
+import { isSyntheticColumnKey as e } from "../logic/detailRow.js";
+import { gridActions as t } from "../model/gridActions.js";
+import { clamp as n, findLogicalIndexFromPaneOffset as r } from "../logic/geometry.js";
+import { computeNextScrollPosition as i, hasPointerLeftActivationRadius as a, resolveAutoScrollAxisDirection as o, resolveScrollContentBox as s } from "../logic/autoScrollGeometry.js";
+import { nextSortEntries as c } from "../logic/sorting.js";
+import { clientYToRowIndex as l } from "../logic/verticalGeometry.js";
+//#region src/controllers/pointerInteractionsController.ts
+var u = 10, d = 300, f = () => {
+	let u = null, d = !1, f = !1, p = null, m = null, h = "mouse", g = null, _ = null, v = !1, y = !1, b = () => u?.uiState.dragState ?? null, x = (e, t) => {
+		if (u === null) return null;
+		let { bodyScrollRef: i, scrollContainerRef: a, leftPaneScrollRef: o, rightPaneScrollRef: s, filteredRowsLength: c, visibleColumnsLength: d, paneLayout: f, leftLeadingWidth: p, centerLeadingWidth: m, rightLeadingWidth: h, headerHeight: g, rowMetrics: _, verticalScaleFactor: v } = u, y = i.current;
+		if (!y || c === 0 || d === 0) return null;
+		let b = y.getBoundingClientRect(), x = l(y.scrollTop + t - b.top - g, a.current?.scrollTop ?? 0, v, _), S = null, C = o.current;
+		if (S === null && C && f.left.entries.length > 0) {
+			let t = C.getBoundingClientRect();
+			if (e < t.right) {
+				let n = e - t.left - p;
+				S = r(f.left, n);
+			}
+		}
+		let w = s.current;
+		if (S === null && w && f.right.entries.length > 0) {
+			let t = w.getBoundingClientRect();
+			if (e >= t.left) {
+				let n = e - t.left - h;
+				S = r(f.right, n);
+			}
+		}
+		if (S === null && f.center.entries.length > 0) {
+			let t = y.scrollLeft + e - b.left - m;
+			S = r(f.center, Math.max(t, 0));
+		}
+		return S === null ? null : {
+			row: x,
+			col: n(S, 0, d - 1)
+		};
+	}, S = (e, n) => {
+		let r = b();
+		if (u === null || !r || r.type !== "selection") return;
+		let i = x(e, n);
+		if (i) {
+			if (r.selectionKind === "cell") {
+				u.dispatch(t.updateSelection(i));
+				return;
+			}
+			if (r.selectionKind === "row") {
+				u.dispatch(t.updateRowSelection(i.row));
+				return;
+			}
+			r.selectionKind === "col" && u.dispatch(t.updateColumnSelection(i.col));
+		}
+	}, C = (e, n) => {
+		if (u === null) return;
+		let { gridRootRef: r, dispatch: i, enableRangeSelection: a, enableRowSelection: o, onGutterRowSelect: s, onCellDoubleClickRef: c } = u;
+		r.current?.focus({ preventScroll: !0 });
+		let { target: l } = e;
+		if (l.kind === "cell") {
+			let e = m;
+			if (e && e.cell.row === l.cell.row && e.cell.col === l.cell.col && n - e.time < 300) {
+				m = null, c.current(l.cell);
+				return;
+			}
+			m = {
+				cell: l.cell,
+				time: n
+			}, i(t.activateCell(l.cell)), a && (i(t.startSelection(l.cell)), i(t.endSelection()));
+			return;
+		}
+		if (m = null, l.kind === "row") {
+			if (o) {
+				s(l.rowIndex, { shiftKey: !1 });
+				return;
+			}
+			i(t.startRowSelection(l.rowIndex)), i(t.endSelection());
+			return;
+		}
+		i(t.startColumnSelection(l.colIndex)), i(t.endSelection());
+	}, w = () => {
+		u !== null && (f = !1, u.dispatch(t.endSelection()), u.dispatch(t.endColumnResize()));
+	}, T = (e) => {
+		u !== null && (u.pointerClientRef.current = {
+			x: e.clientX,
+			y: e.clientY
+		}, b()?.type === "columnResize" && u.dispatch(t.updateColumnResize(e.clientX)));
+	}, E = (e) => {
+		let t = p;
+		t && (p = null, e.pointerId === t.pointerId && Math.abs(e.clientX - t.x) < 10 && Math.abs(e.clientY - t.y) < 10 && C(t, e.timeStamp)), w();
+	}, D = () => {
+		p = null, w();
+	}, O = () => {
+		d || (d = !0, window.addEventListener("pointermove", T), window.addEventListener("pointerup", E), window.addEventListener("pointercancel", D));
+	}, k = () => {
+		d && (d = !1, window.removeEventListener("pointermove", T), window.removeEventListener("pointerup", E), window.removeEventListener("pointercancel", D));
+	}, A = () => {
+		y = !1, u !== null && u.autoScrollFrameRef.current !== null && (cancelAnimationFrame(u.autoScrollFrameRef.current), u.autoScrollFrameRef.current = null);
+	}, j = () => {
+		if (u === null || !y) return;
+		let { scrollContainerRef: e, pointerClientRef: t, autoScrollFrameRef: n } = u, r = e.current, c = t.current;
+		if (!r || !c) {
+			n.current = requestAnimationFrame(j);
+			return;
+		}
+		if (!v) {
+			let e = _;
+			if (e && !a(e, c, 6)) {
+				n.current = requestAnimationFrame(j);
+				return;
+			}
+			v = !0;
+		}
+		let l = r.getBoundingClientRect(), d = s({
+			rectLeft: l.left,
+			rectTop: l.top,
+			clientLeft: r.clientLeft,
+			clientTop: r.clientTop,
+			clientWidth: r.clientWidth,
+			clientHeight: r.clientHeight
+		}), f = b(), p = f?.type === "selection" && f.selectionKind === "col", m = f?.type === "selection" && f.selectionKind === "row", h = p ? 0 : o(c.y, d.top, d.bottom, 24), g = m ? 0 : o(c.x, d.left, d.right, 24), x = i(r.scrollTop, h, 18, r.scrollHeight - r.clientHeight), C = i(r.scrollLeft, g, 18, r.scrollWidth - r.clientWidth);
+		(x !== r.scrollTop || C !== r.scrollLeft) && (r.scrollTo({
+			top: x,
+			left: C,
+			behavior: "auto"
+		}), S(c.x, c.y)), n.current = requestAnimationFrame(j);
+	}, M = () => {
+		let e = b()?.type === "selection";
+		e && !y ? (y = !0, u !== null && (u.autoScrollFrameRef.current = requestAnimationFrame(j))) : !e && y && A();
+	}, N = () => {
+		if (g !== null) return;
+		let e = () => {
+			if (!f || u === null) {
+				g = null;
+				return;
+			}
+			let { scrollContainerRef: t, pointerClientRef: n, onGutterRowSelectDrag: r } = u, c = t.current, l = n.current;
+			if (!c || !l) {
+				g = requestAnimationFrame(e);
+				return;
+			}
+			if (!v) {
+				let t = _;
+				if (t && !a(t, l, 6)) {
+					g = requestAnimationFrame(e);
+					return;
+				}
+				v = !0;
+			}
+			let d = c.getBoundingClientRect(), p = s({
+				rectLeft: d.left,
+				rectTop: d.top,
+				clientLeft: c.clientLeft,
+				clientTop: c.clientTop,
+				clientWidth: c.clientWidth,
+				clientHeight: c.clientHeight
+			}), m = o(l.y, p.top, p.bottom, 24), h = i(c.scrollTop, m, 18, c.scrollHeight - c.clientHeight);
+			if (h !== c.scrollTop) {
+				c.scrollTo({
+					top: h,
+					left: c.scrollLeft,
+					behavior: "auto"
+				});
+				let e = x(l.x, l.y);
+				e && r(e.row);
+			}
+			g = requestAnimationFrame(e);
+		};
+		g = requestAnimationFrame(e);
+	}, P = (e, t) => (e.preventDefault(), u === null || e.button !== 0 ? !1 : (h = e.pointerType, e.pointerType === "touch" ? (p = {
+		pointerId: e.pointerId,
+		x: e.clientX,
+		y: e.clientY,
+		target: t
+	}, !1) : (u.gridRootRef.current?.focus({ preventScroll: !0 }), u.pointerClientRef.current = {
+		x: e.clientX,
+		y: e.clientY
+	}, _ = {
+		x: e.clientX,
+		y: e.clientY
+	}, v = !1, !0)));
+	return {
+		update: (e) => {
+			u = e, O(), M();
+		},
+		updateSelectionFromPointer: S,
+		handleCellPointerDown: (e, n) => {
+			!P(n, {
+				kind: "cell",
+				cell: e
+			}) || u === null || (u.dispatch(t.activateCell(e)), u.enableRangeSelection && u.dispatch(t.startSelection(e)));
+		},
+		handleCellDoubleClick: (e) => {
+			h === "touch" || u === null || u.onCellDoubleClickRef.current(e);
+		},
+		handleCellPointerEnter: (e, n) => {
+			if (u === null || (u.enableRowHover && u.setHoveredRowIndex(e.row), !u.enableRangeSelection)) return;
+			let r = b();
+			r?.type !== "selection" || r.selectionKind !== "cell" || (u.pointerClientRef.current = {
+				x: n.clientX,
+				y: n.clientY
+			}, u.dispatch(t.updateSelection(e)));
+		},
+		handleNativeDragStart: (e) => {
+			e.preventDefault();
+		},
+		handleRowHeaderPointerDown: (e, n) => {
+			if (!(!P(n, {
+				kind: "row",
+				rowIndex: e
+			}) || u === null)) {
+				if (u.enableRowSelection) {
+					f = !0, u.onGutterRowSelect(e, { shiftKey: n.shiftKey }), N();
+					return;
+				}
+				u.dispatch(t.startRowSelection(e));
+			}
+		},
+		handleRowHeaderPointerEnter: (e, n) => {
+			if (u === null) return;
+			if (u.enableRowHover && u.setHoveredRowIndex(e), f) {
+				u.pointerClientRef.current = {
+					x: n.clientX,
+					y: n.clientY
+				}, u.onGutterRowSelectDrag(e);
+				return;
+			}
+			let r = b();
+			r?.type !== "selection" || r.selectionKind !== "row" || (u.pointerClientRef.current = {
+				x: n.clientX,
+				y: n.clientY
+			}, u.dispatch(t.updateRowSelection(e)));
+		},
+		handleColumnHeaderPointerDown: (n, r) => {
+			if (!(!P(r, {
+				kind: "col",
+				colIndex: n
+			}) || u === null)) {
+				if (r.shiftKey && u.enableSorting) {
+					let r = u.orderedColumns[n];
+					if (r && !e(r.key)) {
+						let e = u.uiState.sort, n = e.find((e) => e.columnKey === r.key)?.direction ? "desc" : "asc", i = c(e, r.key, n, !0);
+						u.dispatch(i.length === 0 ? t.clearSort() : t.setSort(i));
+					}
+					return;
+				}
+				u.dispatch(t.startColumnSelection(n));
+			}
+		},
+		handleColumnHeaderPointerEnter: (e, n) => {
+			if (u === null) return;
+			u.setHoveredRowIndex(null), u.enableColumnHeaderHover && u.setHoveredColumnIndex(e);
+			let r = b();
+			r?.type !== "selection" || r.selectionKind !== "col" || (u.pointerClientRef.current = {
+				x: n.clientX,
+				y: n.clientY
+			}, u.dispatch(t.updateColumnSelection(e)));
+		},
+		dispose: () => {
+			k(), A(), g !== null && (cancelAnimationFrame(g), g = null);
+		}
+	};
+};
+//#endregion
+export { d as TOUCH_DOUBLE_TAP_MS, u as TOUCH_TAP_SLOP_PX, f as createPointerInteractionsController };

package/dist/controllers/popoverSupport.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../logic/detailRow.cjs");var t=e=>{document.activeElement instanceof HTMLElement&&document.activeElement.blur(),e?.blur()},n=t=>{requestAnimationFrame(()=>{e.isFocusInsideDetailCard()||t.current?.focus()})},r=e=>{let t=!1,n=()=>e.onResize?.(),r=t=>e.onScroll?.(t),i=t=>{let n=t.target;n&&(e.isInside(n)||e.onOutsidePointerDown())},a=t=>e.onKeyDown?.(t);return{attach:()=>{t||(t=!0,window.addEventListener(`resize`,n),window.addEventListener(`scroll`,r,!0),window.addEventListener(`pointerdown`,i),window.addEventListener(`keydown`,a,!0))},detach:()=>{t&&(t=!1,window.removeEventListener(`resize`,n),window.removeEventListener(`scroll`,r,!0),window.removeEventListener(`pointerdown`,i),window.removeEventListener(`keydown`,a,!0))},isAttached:()=>t}};exports.blurForPopover=t,exports.createPopoverWindowBindings=r,exports.restoreGridFocus=n;

package/dist/controllers/popoverSupport.d.ts

@@ -0,0 +1,18 @@
+export type ReadonlyElementRef<E extends HTMLElement = HTMLElement> = {
+    readonly current: E | null;
+};
+export declare const blurForPopover: (gridRoot: HTMLElement | null) => void;
+export declare const restoreGridFocus: (gridRootRef: ReadonlyElementRef) => void;
+export type PopoverWindowHandlers = {
+    onResize?: () => void;
+    onScroll?: (event: Event) => void;
+    isInside: (target: Node) => boolean;
+    onOutsidePointerDown: () => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+};
+export type PopoverWindowBindings = {
+    attach: () => void;
+    detach: () => void;
+    isAttached: () => boolean;
+};
+export declare const createPopoverWindowBindings: (handlers: PopoverWindowHandlers) => PopoverWindowBindings;

package/dist/controllers/popoverSupport.js

@@ -0,0 +1,25 @@
+import { isFocusInsideDetailCard as e } from "../logic/detailRow.js";
+//#region src/controllers/popoverSupport.ts
+var t = (e) => {
+	document.activeElement instanceof HTMLElement && document.activeElement.blur(), e?.blur();
+}, n = (t) => {
+	requestAnimationFrame(() => {
+		e() || t.current?.focus();
+	});
+}, r = (e) => {
+	let t = !1, n = () => e.onResize?.(), r = (t) => e.onScroll?.(t), i = (t) => {
+		let n = t.target;
+		n && (e.isInside(n) || e.onOutsidePointerDown());
+	}, a = (t) => e.onKeyDown?.(t);
+	return {
+		attach: () => {
+			t || (t = !0, window.addEventListener("resize", n), window.addEventListener("scroll", r, !0), window.addEventListener("pointerdown", i), window.addEventListener("keydown", a, !0));
+		},
+		detach: () => {
+			t && (t = !1, window.removeEventListener("resize", n), window.removeEventListener("scroll", r, !0), window.removeEventListener("pointerdown", i), window.removeEventListener("keydown", a, !0));
+		},
+		isAttached: () => t
+	};
+};
+//#endregion
+export { t as blurForPopover, r as createPopoverWindowBindings, n as restoreGridFocus };

package/dist/controllers/rowDragController.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../logic/rowReorder.cjs"),t=require("../logic/detailRow.cjs"),n=require("../logic/autoScrollGeometry.cjs"),r=require("../logic/slotDom.cjs");var i=14,a=12,o=`0.5`,s=`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 6 12 2 16 6"/><polyline points="16 18 12 22 8 18"/><line x1="12" y1="2" x2="12" y2="22"/></svg>`,c=`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></svg>`,l=200,u=`cubic-bezier(0.2, 0.7, 0.3, 1)`,d=`data-ssg-row-dragging`,f=()=>typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,p=/translateY\((-?[\d.]+)px\)/,m=e=>{let n=[];return e.querySelectorAll(`.ssg-body-row[data-row-index]`).forEach(r=>{t.isInsideDetailCardOf(e,r)||n.push(r)}),n},h=()=>{let h=null,g=null,_=null,v={x:0,y:0},y=null,b=!1,x=null,S=null,C=null,w=null,T=null,E=null,D=()=>[h?.leftIndicatorRef.current??null,h?.centerIndicatorRef.current??null,h?.rightIndicatorRef.current??null],O=()=>{for(let e of D())e&&(e.style.display=`none`)},k=e=>{if(w)return;let t=document.createElement(`div`);t.setAttribute(`data-grid-drag-ghost`,``),h?.scrollContainerRef.current?.closest(`.ssg-theme-dark`)!=null&&t.classList.add(`ssg-theme-dark`),t.style.cssText=[`position:fixed`,`top:0`,`left:0`,`display:inline-flex`,`align-items:center`,`gap:7px`,`padding:7px 12px 7px 10px`,`border-radius:9px`,`border:1px solid var(--ssg-ghost-border)`,`background:var(--ssg-ghost-bg)`,`color:var(--ssg-ghost-text)`,`font-size:12px`,`font-weight:600`,`line-height:1`,`white-space:nowrap`,`max-width:280px`,`overflow:hidden`,`text-overflow:ellipsis`,`box-shadow:var(--ssg-ghost-shadow)`,`pointer-events:none`,`user-select:none`,`z-index:9999`,`will-change:transform`,`transform:translate(-9999px,-9999px)`].join(`;`),r.applySlotToElement(t,h?.ghostSlot);let n=document.createElement(`span`);n.style.cssText=`display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none`;let i=document.createElement(`span`);i.style.cssText=`overflow:hidden;text-overflow:ellipsis`,i.textContent=e,t.appendChild(n),t.appendChild(i),document.body.appendChild(t),w=t,T=n,E=null},A=e=>{let t=w;if(!t)return;t.style.transform=`translate(`+(v.x+i)+`px,`+(v.y+a)+`px)`;let n=e?`move`:`out`;if(E===n)return;E=n;let r=T;n===`out`?(t.style.opacity=o,r&&(r.innerHTML=c)):(t.style.opacity=`1`,r&&(r.innerHTML=s))},j=()=>{w&&w.parentNode&&w.parentNode.removeChild(w),w=null,T=null,E=null},M=(e,n)=>{let r=h?.scrollContainerRef.current??null;!r||e===null||r.querySelectorAll(`.ssg-body-row[data-row-index="${e}"]`).forEach(e=>{t.isInsideDetailCardOf(r,e)||(n?e.setAttribute(d,``):e.removeAttribute(d))})},N=(t,n)=>{if(h===null)return null;let{scrollContainerRef:r,bodyScrollRef:i,rowMetrics:a,headerHeight:o,verticalScaleFactor:s,windowBaseOffsetPx:c}=h,l=r.current,u=i.current;if(!l||!u)return null;let d=l.getBoundingClientRect();if(t<d.left||t>d.right||n<d.top||n>d.bottom)return null;let f=u.getBoundingClientRect(),p=e.resolveRowDropSlot(u.scrollTop+n-f.top-o-l.scrollTop*(1-s),a);return{slot:p,top:o+e.resolveRowDropSlotTop(p,a)-c}},P=()=>{let t=N(v.x,v.y);A(t);let n=g;if(!t||n===null||e.resolveMoveTargetIndex(n,t.slot)===null){_=null,O();return}_=t.slot;for(let e of D())e&&(e.style.top=`${t.top}px`,e.style.display=`block`)},F=()=>{if(g===null){S=null;return}let e=h?.scrollContainerRef.current??null;if(e&&(b||(!y||n.hasPointerLeftActivationRadius(y,v,6))&&(b=!0),b)){let t=e.getBoundingClientRect(),r=n.resolveScrollContentBox({rectLeft:t.left,rectTop:t.top,clientLeft:e.clientLeft,clientTop:e.clientTop,clientWidth:e.clientWidth,clientHeight:e.clientHeight}),i=n.resolveAutoScrollAxisDirection(v.y,r.top,r.bottom,24),a=n.computeNextScrollPosition(e.scrollTop,i,18,e.scrollHeight-e.clientHeight);a!==e.scrollTop&&e.scrollTo({top:a,behavior:`auto`})}P(),S=requestAnimationFrame(F)},I=()=>{let e=h?.scrollContainerRef.current??null;if(!e)return null;let t=new Map;for(let n of m(e))t.set(n,n.getBoundingClientRect().top);return t},L=t=>{S!==null&&(cancelAnimationFrame(S),S=null),document.body.style.cursor=``,O(),j();let n=g,r=_;if(M(n,!1),g=null,_=null,y=null,!t||n===null||r===null||h===null)return;let i=e.resolveMoveTargetIndex(n,r);i!==null&&(C=f()?null:I(),h.commitRowMove(n,i))};return{update:e=>{h=e},onRowDragHandlePointerDown:(e,t)=>{if(h===null||!h.enabled||t.button!==0)return;t.stopPropagation(),t.preventDefault(),g=e,_=null,v={x:t.clientX,y:t.clientY},y={x:t.clientX,y:t.clientY},b=!1,document.body.style.cursor=`grabbing`,k(h.getRowDragLabel(e)),M(e,!0);let n=t.currentTarget,r=t.pointerId;try{n.setPointerCapture(r)}catch{}let i=e=>{e.pointerId===r&&(v={x:e.clientX,y:e.clientY},P())},a=()=>{window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,o),window.removeEventListener(`pointercancel`,s),window.removeEventListener(`keydown`,c),x=null;try{n.releasePointerCapture(r)}catch{}};function o(e){e.pointerId===r&&(a(),L(!0))}function s(e){e.pointerId===r&&(a(),L(!1))}function c(e){e.key===`Escape`&&(a(),L(!1))}window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,o),window.addEventListener(`pointercancel`,s),window.addEventListener(`keydown`,c),x=a,P(),S=requestAnimationFrame(F)},applyReorderSettle:()=>{let e=C;if(C=null,!e)return;let t=h?.scrollContainerRef.current??null;if(!t)return;let n=[],r=new Map;if(e.forEach((e,t)=>{if(!t.isConnected)return;let i=e-t.getBoundingClientRect().top;if(Math.abs(i)<.5)return;let a=p.exec(t.style.transform);if(!a)return;let o=parseFloat(a[1]);r.set(t,o),t.style.transition=`none`,t.style.transform=`translateY(${o+i}px)`,t.style.willChange=`transform`,n.push(t)}),n.length!==0){t.getBoundingClientRect();for(let e of n)e.style.transition=`transform ${l}ms ${u}`,e.style.transform=`translateY(${r.get(e)??0}px)`;window.setTimeout(()=>{for(let e of n)e.style.transition=``,e.style.willChange=``},280)}},dispose:()=>{x?.(),x=null,S!==null&&(cancelAnimationFrame(S),S=null),document.body.style.cursor=``,j(),M(g,!1),g=null,_=null}}};exports.createRowDragController=h;

package/dist/controllers/rowDragController.d.ts

@@ -0,0 +1,40 @@
+import type { RowMetrics } from '../logic/verticalGeometry';
+import type { GridResolvedSlot } from '../model/gridTypes.unbound';
+type ReadonlyRef<V> = {
+    readonly current: V;
+};
+export type RowDragArgs = {
+    enabled: boolean;
+    rowMetrics: RowMetrics;
+    headerHeight: number;
+    verticalScaleFactor: number;
+    windowBaseOffsetPx: number;
+    scrollContainerRef: ReadonlyRef<HTMLElement | null>;
+    bodyScrollRef: ReadonlyRef<HTMLElement | null>;
+    leftIndicatorRef: ReadonlyRef<HTMLElement | null>;
+    centerIndicatorRef: ReadonlyRef<HTMLElement | null>;
+    rightIndicatorRef: ReadonlyRef<HTMLElement | null>;
+    getRowDragLabel: (viewIndex: number) => string;
+    commitRowMove: (fromIndex: number, toIndex: number) => void;
+    ghostSlot?: GridResolvedSlot;
+};
+export type RowDragHandlePointerEvent = {
+    button: number;
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    currentTarget: {
+        setPointerCapture: (pointerId: number) => void;
+        releasePointerCapture: (pointerId: number) => void;
+    };
+    preventDefault: () => void;
+    stopPropagation: () => void;
+};
+export type RowDragController = {
+    update: (args: RowDragArgs) => void;
+    onRowDragHandlePointerDown: (viewIndex: number, event: RowDragHandlePointerEvent) => void;
+    applyReorderSettle: () => void;
+    dispose: () => void;
+};
+export declare const createRowDragController: () => RowDragController;
+export {};

package/dist/controllers/rowDragController.js

@@ -0,0 +1,192 @@
+import { resolveMoveTargetIndex as e, resolveRowDropSlot as t, resolveRowDropSlotTop as n } from "../logic/rowReorder.js";
+import { isInsideDetailCardOf as r } from "../logic/detailRow.js";
+import { computeNextScrollPosition as i, hasPointerLeftActivationRadius as a, resolveAutoScrollAxisDirection as o, resolveScrollContentBox as s } from "../logic/autoScrollGeometry.js";
+import { applySlotToElement as c } from "../logic/slotDom.js";
+//#region src/controllers/rowDragController.ts
+var l = 14, u = 12, d = "0.5", f = "<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"8 6 12 2 16 6\"/><polyline points=\"16 18 12 22 8 18\"/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"/></svg>", p = "<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"4.9\" y1=\"4.9\" x2=\"19.1\" y2=\"19.1\"/></svg>", m = 200, h = "cubic-bezier(0.2, 0.7, 0.3, 1)", g = "data-ssg-row-dragging", _ = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, v = /translateY\((-?[\d.]+)px\)/, y = (e) => {
+	let t = [];
+	return e.querySelectorAll(".ssg-body-row[data-row-index]").forEach((n) => {
+		r(e, n) || t.push(n);
+	}), t;
+}, b = () => {
+	let b = null, x = null, S = null, C = {
+		x: 0,
+		y: 0
+	}, w = null, T = !1, E = null, D = null, O = null, k = null, A = null, j = null, M = () => [
+		b?.leftIndicatorRef.current ?? null,
+		b?.centerIndicatorRef.current ?? null,
+		b?.rightIndicatorRef.current ?? null
+	], N = () => {
+		for (let e of M()) e && (e.style.display = "none");
+	}, P = (e) => {
+		if (k) return;
+		let t = document.createElement("div");
+		t.setAttribute("data-grid-drag-ghost", ""), b?.scrollContainerRef.current?.closest(".ssg-theme-dark") != null && t.classList.add("ssg-theme-dark"), t.style.cssText = [
+			"position:fixed",
+			"top:0",
+			"left:0",
+			"display:inline-flex",
+			"align-items:center",
+			"gap:7px",
+			"padding:7px 12px 7px 10px",
+			"border-radius:9px",
+			"border:1px solid var(--ssg-ghost-border)",
+			"background:var(--ssg-ghost-bg)",
+			"color:var(--ssg-ghost-text)",
+			"font-size:12px",
+			"font-weight:600",
+			"line-height:1",
+			"white-space:nowrap",
+			"max-width:280px",
+			"overflow:hidden",
+			"text-overflow:ellipsis",
+			"box-shadow:var(--ssg-ghost-shadow)",
+			"pointer-events:none",
+			"user-select:none",
+			"z-index:9999",
+			"will-change:transform",
+			"transform:translate(-9999px,-9999px)"
+		].join(";"), c(t, b?.ghostSlot);
+		let n = document.createElement("span");
+		n.style.cssText = "display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none";
+		let r = document.createElement("span");
+		r.style.cssText = "overflow:hidden;text-overflow:ellipsis", r.textContent = e, t.appendChild(n), t.appendChild(r), document.body.appendChild(t), k = t, A = n, j = null;
+	}, F = (e) => {
+		let t = k;
+		if (!t) return;
+		t.style.transform = "translate(" + (C.x + l) + "px," + (C.y + u) + "px)";
+		let n = e ? "move" : "out";
+		if (j === n) return;
+		j = n;
+		let r = A;
+		n === "out" ? (t.style.opacity = d, r && (r.innerHTML = p)) : (t.style.opacity = "1", r && (r.innerHTML = f));
+	}, I = () => {
+		k && k.parentNode && k.parentNode.removeChild(k), k = null, A = null, j = null;
+	}, L = (e, t) => {
+		let n = b?.scrollContainerRef.current ?? null;
+		!n || e === null || n.querySelectorAll(`.ssg-body-row[data-row-index="${e}"]`).forEach((e) => {
+			r(n, e) || (t ? e.setAttribute(g, "") : e.removeAttribute(g));
+		});
+	}, R = (e, r) => {
+		if (b === null) return null;
+		let { scrollContainerRef: i, bodyScrollRef: a, rowMetrics: o, headerHeight: s, verticalScaleFactor: c, windowBaseOffsetPx: l } = b, u = i.current, d = a.current;
+		if (!u || !d) return null;
+		let f = u.getBoundingClientRect();
+		if (e < f.left || e > f.right || r < f.top || r > f.bottom) return null;
+		let p = d.getBoundingClientRect(), m = t(d.scrollTop + r - p.top - s - u.scrollTop * (1 - c), o);
+		return {
+			slot: m,
+			top: s + n(m, o) - l
+		};
+	}, z = () => {
+		let t = R(C.x, C.y);
+		F(t);
+		let n = x;
+		if (!t || n === null || e(n, t.slot) === null) {
+			S = null, N();
+			return;
+		}
+		S = t.slot;
+		for (let e of M()) e && (e.style.top = `${t.top}px`, e.style.display = "block");
+	}, B = () => {
+		if (x === null) {
+			D = null;
+			return;
+		}
+		let e = b?.scrollContainerRef.current ?? null;
+		if (e && (T || (!w || a(w, C, 6)) && (T = !0), T)) {
+			let t = e.getBoundingClientRect(), n = s({
+				rectLeft: t.left,
+				rectTop: t.top,
+				clientLeft: e.clientLeft,
+				clientTop: e.clientTop,
+				clientWidth: e.clientWidth,
+				clientHeight: e.clientHeight
+			}), r = o(C.y, n.top, n.bottom, 24), a = i(e.scrollTop, r, 18, e.scrollHeight - e.clientHeight);
+			a !== e.scrollTop && e.scrollTo({
+				top: a,
+				behavior: "auto"
+			});
+		}
+		z(), D = requestAnimationFrame(B);
+	}, V = () => {
+		let e = b?.scrollContainerRef.current ?? null;
+		if (!e) return null;
+		let t = /* @__PURE__ */ new Map();
+		for (let n of y(e)) t.set(n, n.getBoundingClientRect().top);
+		return t;
+	}, H = (t) => {
+		D !== null && (cancelAnimationFrame(D), D = null), document.body.style.cursor = "", N(), I();
+		let n = x, r = S;
+		if (L(n, !1), x = null, S = null, w = null, !t || n === null || r === null || b === null) return;
+		let i = e(n, r);
+		i !== null && (O = _() ? null : V(), b.commitRowMove(n, i));
+	};
+	return {
+		update: (e) => {
+			b = e;
+		},
+		onRowDragHandlePointerDown: (e, t) => {
+			if (b === null || !b.enabled || t.button !== 0) return;
+			t.stopPropagation(), t.preventDefault(), x = e, S = null, C = {
+				x: t.clientX,
+				y: t.clientY
+			}, w = {
+				x: t.clientX,
+				y: t.clientY
+			}, T = !1, document.body.style.cursor = "grabbing", P(b.getRowDragLabel(e)), L(e, !0);
+			let n = t.currentTarget, r = t.pointerId;
+			try {
+				n.setPointerCapture(r);
+			} catch {}
+			let i = (e) => {
+				e.pointerId === r && (C = {
+					x: e.clientX,
+					y: e.clientY
+				}, z());
+			}, a = () => {
+				window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", s), window.removeEventListener("keydown", c), E = null;
+				try {
+					n.releasePointerCapture(r);
+				} catch {}
+			};
+			function o(e) {
+				e.pointerId === r && (a(), H(!0));
+			}
+			function s(e) {
+				e.pointerId === r && (a(), H(!1));
+			}
+			function c(e) {
+				e.key === "Escape" && (a(), H(!1));
+			}
+			window.addEventListener("pointermove", i), window.addEventListener("pointerup", o), window.addEventListener("pointercancel", s), window.addEventListener("keydown", c), E = a, z(), D = requestAnimationFrame(B);
+		},
+		applyReorderSettle: () => {
+			let e = O;
+			if (O = null, !e) return;
+			let t = b?.scrollContainerRef.current ?? null;
+			if (!t) return;
+			let n = [], r = /* @__PURE__ */ new Map();
+			if (e.forEach((e, t) => {
+				if (!t.isConnected) return;
+				let i = e - t.getBoundingClientRect().top;
+				if (Math.abs(i) < .5) return;
+				let a = v.exec(t.style.transform);
+				if (!a) return;
+				let o = parseFloat(a[1]);
+				r.set(t, o), t.style.transition = "none", t.style.transform = `translateY(${o + i}px)`, t.style.willChange = "transform", n.push(t);
+			}), n.length !== 0) {
+				t.getBoundingClientRect();
+				for (let e of n) e.style.transition = `transform ${m}ms ${h}`, e.style.transform = `translateY(${r.get(e) ?? 0}px)`;
+				window.setTimeout(() => {
+					for (let e of n) e.style.transition = "", e.style.willChange = "";
+				}, 280);
+			}
+		},
+		dispose: () => {
+			E?.(), E = null, D !== null && (cancelAnimationFrame(D), D = null), document.body.style.cursor = "", I(), L(x, !1), x = null, S = null;
+		}
+	};
+};
+//#endregion
+export { b as createRowDragController };

package/dist/controllers/scrollSyncController.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=()=>{let e=null,t=null,n=0,r=null,i=null,a=()=>{i=null;let t=r;r=null,t&&e?.onScroll?.(t)},o=o=>{e?.setViewState({scrollTop:o.scrollTop,viewportHeight:o.clientHeight,viewportWidth:o.clientWidth});let s=()=>{e?.setViewState({scrollTop:o.scrollTop});let t=n>0?`api`:`user`;t===`api`&&--n;let s=r;r={top:o.scrollTop,left:o.scrollLeft,source:s?.source===`user`?`user`:t},e?.onScroll&&i===null&&(i=requestAnimationFrame(a))};o.addEventListener(`scroll`,s,{passive:!0});let c=new ResizeObserver(()=>{e?.setViewState({viewportHeight:o.clientHeight,viewportWidth:o.clientWidth})});c.observe(o),t=()=>{o.removeEventListener(`scroll`,s),i!==null&&(cancelAnimationFrame(i),i=null),c.disconnect()}};return{update:n=>{if(e=n,t===null){let e=n.scrollContainerRef.current;e&&o(e)}},markApiScroll:()=>{n+=1},dispose:()=>{t?.(),t=null}}};exports.createScrollSyncController=e;

package/dist/controllers/scrollSyncController.d.ts

@@ -0,0 +1,17 @@
+import type { GridScrollEventParams } from '../model/gridTypes.unbound';
+import type { GridViewStatePatch } from '../model/gridStore';
+type ReadonlyRef<V> = {
+    readonly current: V;
+};
+export type ScrollSyncArgs = {
+    scrollContainerRef: ReadonlyRef<HTMLElement | null>;
+    setViewState: (patch: GridViewStatePatch) => void;
+    onScroll: ((params: GridScrollEventParams) => void) | undefined;
+};
+export type ScrollSyncController = {
+    update: (args: ScrollSyncArgs) => void;
+    markApiScroll: () => void;
+    dispose: () => void;
+};
+export declare const createScrollSyncController: () => ScrollSyncController;
+export {};