@psnext/design-system 2.2.0 → 2.4.0

package/dist/MultiColumn.cjs

@@ -0,0 +1,354 @@
+const require_chunk = require("./chunk.cjs");
+const require_cn = require("./cn.cjs");
+const require_Icon = require("./Icon.cjs");
+let class_variance_authority = require("class-variance-authority");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/layouts/MultiColumn/MultiColumn.utils.ts
+/**
+* Parses the browser-resolved `grid-template-columns` value (always
+* space-separated px values in a real browser, regardless of how the tracks
+* were authored) into a plain array of numbers.
+*/
+function resolvePxTracks(computedGridTemplateColumns) {
+	return computedGridTemplateColumns.split(" ").map((token) => token.trim()).filter(Boolean).map((token) => Number.parseFloat(token));
+}
+/** Parses an authored `minmax(<min>px,<max>px)` track into numeric px bounds, or null for any other track shape. */
+function parseMinMaxPx(track) {
+	const match = track.match(/^minmax\(\s*([\d.]+)px\s*,\s*([\d.]+)px\s*\)$/);
+	if (!match) return null;
+	return {
+		min: Number(match[1]),
+		max: Number(match[2])
+	};
+}
+/**
+* Given the current resolved px widths of two adjacent tracks, shifts the
+* boundary between them by `deltaPx` (left grows, right shrinks, or vice
+* versa) while keeping their combined width constant. Clamps each side to
+* `minSizePx` and, when a side was originally authored as `minmax(min,max)`,
+* to that side's own bounds — so a minmax() column's configured range
+* survives being resized, rather than being silently discarded.
+*/
+function computeResizedPair(currentPx, deltaPx, minSizePx, bounds) {
+	const total = currentPx[0] + currentPx[1];
+	const leftMin = Math.max(minSizePx, bounds[0]?.min ?? Number.NEGATIVE_INFINITY);
+	const leftMax = Math.min(total - minSizePx, bounds[0]?.max ?? Number.POSITIVE_INFINITY);
+	const rightMin = Math.max(minSizePx, bounds[1]?.min ?? Number.NEGATIVE_INFINITY);
+	const rightMax = Math.min(total - minSizePx, bounds[1]?.max ?? Number.POSITIVE_INFINITY);
+	let left = currentPx[0] + deltaPx;
+	left = Math.min(Math.max(left, leftMin), leftMax);
+	let right = total - left;
+	if (right < rightMin) {
+		right = rightMin;
+		left = total - right;
+	} else if (right > rightMax) {
+		right = rightMax;
+		left = total - right;
+	}
+	return [left, right];
+}
+/** Moves `id` one step left (-1) or right (+1) in a left-to-right order list; a no-op copy at either boundary or if `id` isn't present. */
+function moveIdInOrder(order, id, direction) {
+	const index = order.indexOf(id);
+	if (index === -1) return [...order];
+	const targetIndex = index + direction;
+	if (targetIndex < 0 || targetIndex >= order.length) return [...order];
+	const next = [...order];
+	[next[index], next[targetIndex]] = [next[targetIndex], next[index]];
+	return next;
+}
+/** Swaps the positions of `idA` and `idB` in a left-to-right order list; a no-op copy if either id is missing or they're equal. */
+function swapIdsInOrder(order, idA, idB) {
+	if (idA === idB) return [...order];
+	const indexA = order.indexOf(idA);
+	const indexB = order.indexOf(idB);
+	if (indexA === -1 || indexB === -1) return [...order];
+	const next = [...order];
+	[next[indexA], next[indexB]] = [next[indexB], next[indexA]];
+	return next;
+}
+//#endregion
+//#region src/layouts/MultiColumn/MultiColumn.tsx
+const multiColumnVariants = (0, class_variance_authority.cva)("flex flex-col", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		stackBelow: {
+			sm: "sm:grid sm:grid-cols-[var(--mc-columns)]",
+			md: "md:grid md:grid-cols-[var(--mc-columns)]",
+			lg: "lg:grid lg:grid-cols-[var(--mc-columns)]",
+			xl: "xl:grid xl:grid-cols-[var(--mc-columns)]"
+		}
+	},
+	defaultVariants: {
+		gap: "lg",
+		stackBelow: "lg"
+	}
+});
+const stackBelowVisibleClass = {
+	sm: "hidden sm:flex",
+	md: "hidden md:flex",
+	lg: "hidden lg:flex",
+	xl: "hidden xl:flex"
+};
+const MIN_COLUMN_SIZE_PX_DEFAULT = 80;
+const RESIZE_KEYBOARD_STEP_PX = 16;
+function parseMinColumnSize(minColumnSize) {
+	if (!minColumnSize) return MIN_COLUMN_SIZE_PX_DEFAULT;
+	const parsed = Number.parseFloat(minColumnSize);
+	return Number.isFinite(parsed) ? parsed : MIN_COLUMN_SIZE_PX_DEFAULT;
+}
+/** Boundary (center-of-gap) px offsets from the grid's left edge, one per gap between adjacent tracks. */
+function computeHandlePositionsPx(grid) {
+	const computed = getComputedStyle(grid);
+	const tracksPx = resolvePxTracks(computed.gridTemplateColumns);
+	const gapPx = Number.parseFloat(computed.columnGap) || 0;
+	const positions = [];
+	let trackSum = 0;
+	for (let i = 0; i < tracksPx.length - 1; i++) {
+		trackSum += tracksPx[i];
+		positions.push(trackSum + i * gapPx + gapPx / 2);
+	}
+	return positions;
+}
+/** CSS Grid N-column layout — pass one track per column via `columns`; stacks below `stackBelow`. */
+function MultiColumn({ className, style, columns, gap, stackBelow, resizable, onColumnsChange, minColumnSize, reorderable, onReorderChange, children, ...props }) {
+	const gridRef = react.useRef(null);
+	const effectiveStackBelow = stackBelow ?? "lg";
+	const columnsKey = columns.join(" ");
+	const [liveColumns, setLiveColumns] = react.useState(columns);
+	const [syncedColumnsKey, setSyncedColumnsKey] = react.useState(columnsKey);
+	if (columnsKey !== syncedColumnsKey) {
+		setSyncedColumnsKey(columnsKey);
+		setLiveColumns(columns);
+	}
+	const effectiveColumns = resizable ? liveColumns : columns;
+	const minColumnSizePx = parseMinColumnSize(minColumnSize);
+	function commitColumns(next) {
+		setLiveColumns(next);
+		onColumnsChange?.(next);
+	}
+	const dragStateRef = react.useRef(null);
+	const [resizingIndex, setResizingIndex] = react.useState(null);
+	function resizeByDelta(index, deltaPx, startTracksPx) {
+		const originalBounds = columns.map(parseMinMaxPx);
+		const [leftPx, rightPx] = computeResizedPair([startTracksPx[index], startTracksPx[index + 1]], deltaPx, minColumnSizePx, [originalBounds[index] ?? null, originalBounds[index + 1] ?? null]);
+		const next = [...effectiveColumns];
+		next[index] = `${leftPx}px`;
+		next[index + 1] = `${rightPx}px`;
+		commitColumns(next);
+	}
+	function handleResizePointerDown(index) {
+		return (event) => {
+			if (event.button !== 0 && event.pointerType === "mouse") return;
+			event.preventDefault();
+			const grid = gridRef.current;
+			if (!grid) return;
+			const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);
+			dragStateRef.current = {
+				index,
+				startClientX: event.clientX,
+				startTracksPx
+			};
+			setResizingIndex(index);
+			document.body.style.cursor = "col-resize";
+			const onMove = (moveEvent) => {
+				const state = dragStateRef.current;
+				if (!state) return;
+				resizeByDelta(state.index, moveEvent.clientX - state.startClientX, state.startTracksPx);
+			};
+			const onEnd = () => {
+				dragStateRef.current = null;
+				document.body.style.cursor = "";
+				setResizingIndex(null);
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onEnd);
+				window.removeEventListener("pointercancel", onEnd);
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onEnd);
+			window.addEventListener("pointercancel", onEnd);
+		};
+	}
+	function handleResizeKeyDown(index) {
+		return (event) => {
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			const grid = gridRef.current;
+			if (!grid) return;
+			const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);
+			resizeByDelta(index, event.key === "ArrowRight" ? RESIZE_KEYBOARD_STEP_PX : -16, startTracksPx);
+		};
+	}
+	const [handleLeftPx, setHandleLeftPx] = react.useState([]);
+	react.useLayoutEffect(() => {
+		if (!resizable) return;
+		const grid = gridRef.current;
+		if (!grid) return;
+		const recompute = () => setHandleLeftPx(computeHandlePositionsPx(grid));
+		recompute();
+		const observer = new ResizeObserver(recompute);
+		observer.observe(grid);
+		return () => observer.disconnect();
+	}, [resizable, effectiveColumns]);
+	const childArray = react.Children.toArray(children);
+	function idFor(child, index) {
+		if (typeof child.props.id === "string" && child.props.id.length > 0) return child.props.id;
+		if (reorderable && process.env.NODE_ENV !== "production") console.warn("MultiColumn: a MultiColumnItem is missing an `id` prop while `reorderable` is set. Falling back to a generated id — pass `id` on every MultiColumnItem for stable `onReorderChange` results.");
+		return child.key != null ? String(child.key) : `mc-item-${index}`;
+	}
+	const [order, setOrder] = react.useState(() => childArray.map((child, index) => ({
+		id: idFor(child, index),
+		initialOrder: child.props.order ?? index
+	})).sort((a, b) => a.initialOrder - b.initialOrder).map((entry) => entry.id));
+	function commitOrder(next) {
+		setOrder(next);
+		onReorderChange?.(next);
+	}
+	const [draggingId, setDraggingId] = react.useState(null);
+	const [dropTargetId, setDropTargetId] = react.useState(null);
+	function itemIdAtPoint(clientX, clientY) {
+		return document.elementFromPoint(clientX, clientY)?.closest("[data-slot=\"multi-column-item\"]")?.id;
+	}
+	function handleGripPointerDown(id) {
+		return (event) => {
+			event.preventDefault();
+			setDraggingId(id);
+			document.body.style.cursor = "grabbing";
+			function removeListeners() {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				window.removeEventListener("pointercancel", onCancel);
+			}
+			function endDrag() {
+				document.body.style.cursor = "";
+				setDraggingId(null);
+				setDropTargetId(null);
+			}
+			const onMove = (moveEvent) => {
+				const targetId = itemIdAtPoint(moveEvent.clientX, moveEvent.clientY);
+				setDropTargetId(targetId && targetId !== id ? targetId : null);
+			};
+			const onUp = (upEvent) => {
+				removeListeners();
+				const targetId = itemIdAtPoint(upEvent.clientX, upEvent.clientY);
+				if (targetId && targetId !== id) commitOrder(swapIdsInOrder(order, id, targetId));
+				endDrag();
+			};
+			const onCancel = () => {
+				removeListeners();
+				endDrag();
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+			window.addEventListener("pointercancel", onCancel);
+		};
+	}
+	function handleGripKeyDown(id) {
+		return (event) => {
+			if (!event.ctrlKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			commitOrder(moveIdInOrder(order, id, event.key === "ArrowRight" ? 1 : -1));
+		};
+	}
+	const orderIndexById = new Map(order.map((id, index) => [id, index]));
+	const renderedChildren = reorderable ? childArray.map((child, index) => {
+		const id = idFor(child, index);
+		return react.cloneElement(child, {
+			key: id,
+			id,
+			order: orderIndexById.get(id) ?? child.props.order ?? index,
+			className: require_cn.cn(child.props.className, id === draggingId && "opacity-50", id === dropTargetId && id !== draggingId && "ring-2 ring-focus ring-offset-2"),
+			dragHandleProps: {
+				className: stackBelowVisibleClass[effectiveStackBelow],
+				"aria-label": "Drag to reorder this column. Press Ctrl+Left or Ctrl+Right to reorder via keyboard.",
+				tabIndex: 0,
+				onPointerDown: handleGripPointerDown(id),
+				onKeyDown: handleGripKeyDown(id)
+			}
+		});
+	}) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: gridRef,
+		"data-slot": "multi-column",
+		className: require_cn.cn(multiColumnVariants({
+			gap,
+			stackBelow
+		}), resizable && "relative", className),
+		style: {
+			"--mc-columns": effectiveColumns.join(" "),
+			...style
+		},
+		...props,
+		children: [renderedChildren, resizable && effectiveColumns.slice(0, -1).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "multi-column-handle",
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": `Resize columns ${index + 1} and ${index + 2}. Use Arrow Left or Arrow Right to resize via keyboard.`,
+			tabIndex: 0,
+			draggable: false,
+			className: require_cn.cn("absolute inset-y-0 z-10 w-px -translate-x-1/2 touch-none cursor-col-resize items-center justify-center bg-primary-border after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1", stackBelowVisibleClass[effectiveStackBelow], index === resizingIndex && "w-0.5 bg-focus"),
+			style: { left: `${handleLeftPx[index] ?? 0}px` },
+			onPointerDown: handleResizePointerDown(index),
+			onKeyDown: handleResizeKeyDown(index)
+		}, `multi-column-handle-${index}`))]
+	});
+}
+const alignSelfClass = {
+	start: "self-start",
+	center: "self-center",
+	end: "self-end",
+	stretch: "self-stretch"
+};
+/** A single column slot inside MultiColumn; `order` and `align` apply without reshuffling the DOM. */
+function MultiColumnItem({ className, style, order, align, dragHandleProps, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "multi-column-item",
+		className: require_cn.cn(dragHandleProps && "relative", align && alignSelfClass[align], className),
+		style: order !== void 0 ? {
+			order,
+			...style
+		} : style,
+		...props,
+		children: [children, dragHandleProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"data-slot": "multi-column-item-grip",
+			draggable: false,
+			...dragHandleProps,
+			className: require_cn.cn("absolute top-1 right-1 z-10 size-5 cursor-grab touch-none items-center justify-center rounded-2 border bg-primary-border text-muted-txt focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1 active:cursor-grabbing", dragHandleProps.className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.GripVerticalIcon,
+				className: "size-3"
+			})
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "MultiColumn", {
+	enumerable: true,
+	get: function() {
+		return MultiColumn;
+	}
+});
+Object.defineProperty(exports, "MultiColumnItem", {
+	enumerable: true,
+	get: function() {
+		return MultiColumnItem;
+	}
+});
+Object.defineProperty(exports, "multiColumnVariants", {
+	enumerable: true,
+	get: function() {
+		return multiColumnVariants;
+	}
+});
+
+//# sourceMappingURL=MultiColumn.cjs.map

package/dist/MultiColumn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiColumn.cjs","names":["React","cn","Icon","GripVerticalIcon"],"sources":["../src/layouts/MultiColumn/MultiColumn.utils.ts","../src/layouts/MultiColumn/MultiColumn.tsx"],"sourcesContent":["// Pure helpers for MultiColumn's resizable/reorderable interactions, kept\n// separate from the component so the math is unit-testable without a real\n// browser — a real browser is still required to prove the DOM/CSS wiring\n// (see MultiColumn.tsx and the Storybook stories), since jsdom doesn't run\n// layout and can't resolve fr/%/minmax() tracks to pixels.\n\n/** A column's original `minmax(min,max)` bounds in px, or null if it wasn't authored as minmax(). */\ntype MinMaxBoundsPx = { min: number; max: number } | null;\n\n/**\n * Parses the browser-resolved `grid-template-columns` value (always\n * space-separated px values in a real browser, regardless of how the tracks\n * were authored) into a plain array of numbers.\n */\nfunction resolvePxTracks(computedGridTemplateColumns: string): number[] {\n  return computedGridTemplateColumns\n    .split(\" \")\n    .map((token) => token.trim())\n    .filter(Boolean)\n    .map((token) => Number.parseFloat(token));\n}\n\n/** Parses an authored `minmax(<min>px,<max>px)` track into numeric px bounds, or null for any other track shape. */\nfunction parseMinMaxPx(track: string): MinMaxBoundsPx {\n  const match = track.match(/^minmax\\(\\s*([\\d.]+)px\\s*,\\s*([\\d.]+)px\\s*\\)$/);\n  if (!match) return null;\n  return { min: Number(match[1]), max: Number(match[2]) };\n}\n\n/**\n * Given the current resolved px widths of two adjacent tracks, shifts the\n * boundary between them by `deltaPx` (left grows, right shrinks, or vice\n * versa) while keeping their combined width constant. Clamps each side to\n * `minSizePx` and, when a side was originally authored as `minmax(min,max)`,\n * to that side's own bounds — so a minmax() column's configured range\n * survives being resized, rather than being silently discarded.\n */\nfunction computeResizedPair(\n  currentPx: readonly [number, number],\n  deltaPx: number,\n  minSizePx: number,\n  bounds: readonly [MinMaxBoundsPx, MinMaxBoundsPx],\n): [number, number] {\n  const total = currentPx[0] + currentPx[1];\n  const leftMin = Math.max(minSizePx, bounds[0]?.min ?? Number.NEGATIVE_INFINITY);\n  const leftMax = Math.min(total - minSizePx, bounds[0]?.max ?? Number.POSITIVE_INFINITY);\n  const rightMin = Math.max(minSizePx, bounds[1]?.min ?? Number.NEGATIVE_INFINITY);\n  const rightMax = Math.min(total - minSizePx, bounds[1]?.max ?? Number.POSITIVE_INFINITY);\n\n  let left = currentPx[0] + deltaPx;\n  left = Math.min(Math.max(left, leftMin), leftMax);\n  let right = total - left;\n  if (right < rightMin) {\n    right = rightMin;\n    left = total - right;\n  } else if (right > rightMax) {\n    right = rightMax;\n    left = total - right;\n  }\n  return [left, right];\n}\n\n/** Moves `id` one step left (-1) or right (+1) in a left-to-right order list; a no-op copy at either boundary or if `id` isn't present. */\nfunction moveIdInOrder(order: readonly string[], id: string, direction: -1 | 1): string[] {\n  const index = order.indexOf(id);\n  if (index === -1) return [...order];\n  const targetIndex = index + direction;\n  if (targetIndex < 0 || targetIndex >= order.length) return [...order];\n  const next = [...order];\n  [next[index], next[targetIndex]] = [next[targetIndex], next[index]];\n  return next;\n}\n\n/** Swaps the positions of `idA` and `idB` in a left-to-right order list; a no-op copy if either id is missing or they're equal. */\nfunction swapIdsInOrder(order: readonly string[], idA: string, idB: string): string[] {\n  if (idA === idB) return [...order];\n  const indexA = order.indexOf(idA);\n  const indexB = order.indexOf(idB);\n  if (indexA === -1 || indexB === -1) return [...order];\n  const next = [...order];\n  [next[indexA], next[indexB]] = [next[indexB], next[indexA]];\n  return next;\n}\n\nexport {\n  resolvePxTracks,\n  parseMinMaxPx,\n  computeResizedPair,\n  moveIdInOrder,\n  swapIdsInOrder,\n  type MinMaxBoundsPx,\n};\n","import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { GripVerticalIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\nimport {\n  type MinMaxBoundsPx,\n  computeResizedPair,\n  moveIdInOrder,\n  parseMinMaxPx,\n  resolvePxTracks,\n  swapIdsInOrder,\n} from \"./MultiColumn.utils\";\n\n// MultiColumn — CSS Grid N-column layout. `columns` is one grid track per\n// column (fixed \"240px\", percent \"20%\", fractional \"1fr\", or \"minmax(200px,1fr)\"),\n// so the array's length sets the column count. Stacks to a single column\n// (flex-col) below `stackBelow`. The per-instance track list can't be a static\n// Tailwind class (it's computed at runtime), so it's set as the `--mc-columns`\n// custom property via inline style and referenced by a static arbitrary-value\n// class (`<bp>:grid-cols-[var(--mc-columns)]`) — the same technique Sidebar\n// already ships (`w-(--sidebar-width)`), so Tailwind's source scanner still\n// sees a literal class string to generate.\nconst multiColumnVariants = cva(\"flex flex-col\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    stackBelow: {\n      sm: \"sm:grid sm:grid-cols-[var(--mc-columns)]\",\n      md: \"md:grid md:grid-cols-[var(--mc-columns)]\",\n      lg: \"lg:grid lg:grid-cols-[var(--mc-columns)]\",\n      xl: \"xl:grid xl:grid-cols-[var(--mc-columns)]\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n    stackBelow: \"lg\",\n  },\n});\n\n// resizable/reorderable affordances are hidden below `stackBelow` (nothing to\n// horizontally resize or drag once columns are stacked full-width). Listed as\n// literal strings (like the variants above) so Tailwind's scanner sees them\n// regardless of which breakpoint is picked at runtime.\nconst stackBelowVisibleClass = {\n  sm: \"hidden sm:flex\",\n  md: \"hidden md:flex\",\n  lg: \"hidden lg:flex\",\n  xl: \"hidden xl:flex\",\n} as const;\n\ntype MultiColumnBreakpoint = keyof typeof stackBelowVisibleClass;\n\ntype MultiColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof multiColumnVariants> & {\n    /**\n     * One CSS grid track per column, in any combination — length sets the\n     * column count (3, 4, 5, ...N):\n     * - fixed: `\"240px\"` / `\"16rem\"`\n     * - percent: `\"20%\"`\n     * - fractional (fluid, shares remaining space): `\"1fr\"`, `\"2fr\"`\n     * - minmax (clamp between a min and max): `\"minmax(200px,1fr)\"`\n     */\n    columns: string[];\n    /** Space between columns (and between stacked rows below `stackBelow`). */\n    gap?: VariantProps<typeof multiColumnVariants>[\"gap\"];\n    /** Breakpoint the grid activates at; below it, columns stack vertically. Defaults to `\"lg\"`. */\n    stackBelow?: VariantProps<typeof multiColumnVariants>[\"stackBelow\"];\n    /** Renders a drag handle between adjacent columns that live-resizes them. Default off. */\n    resizable?: boolean;\n    /**\n     * Fires with the updated `columns` array while/after dragging a resize\n     * handle. Pass a `columns` value that changes in response to be fully\n     * controlled; omit to let MultiColumn track size internally.\n     */\n    onColumnsChange?: (columns: string[]) => void;\n    /** Minimum size (in px, e.g. `\"80px\"`) a column can be resized down to. Defaults to `\"80px\"`. */\n    minColumnSize?: string;\n    /**\n     * Renders a drag grip on each MultiColumnItem for drag-and-drop\n     * reordering, plus Ctrl+ArrowLeft/Right keyboard reordering when a grip\n     * is focused. Default off. Give each MultiColumnItem a stable `id` when\n     * using this — without one, MultiColumn falls back to a generated id\n     * (with a console warning) so it degrades safely rather than throwing.\n     */\n    reorderable?: boolean;\n    /** Fires with the new left-to-right order of MultiColumnItem `id`s whenever a drag or keyboard move changes order. */\n    onReorderChange?: (orderedIds: string[]) => void;\n  };\n\nconst MIN_COLUMN_SIZE_PX_DEFAULT = 80;\nconst RESIZE_KEYBOARD_STEP_PX = 16;\n\nfunction parseMinColumnSize(minColumnSize: string | undefined): number {\n  if (!minColumnSize) return MIN_COLUMN_SIZE_PX_DEFAULT;\n  const parsed = Number.parseFloat(minColumnSize);\n  return Number.isFinite(parsed) ? parsed : MIN_COLUMN_SIZE_PX_DEFAULT;\n}\n\n/** Boundary (center-of-gap) px offsets from the grid's left edge, one per gap between adjacent tracks. */\nfunction computeHandlePositionsPx(grid: HTMLElement): number[] {\n  const computed = getComputedStyle(grid);\n  const tracksPx = resolvePxTracks(computed.gridTemplateColumns);\n  const gapPx = Number.parseFloat(computed.columnGap) || 0;\n  const positions: number[] = [];\n  let trackSum = 0;\n  for (let i = 0; i < tracksPx.length - 1; i++) {\n    trackSum += tracksPx[i];\n    positions.push(trackSum + i * gapPx + gapPx / 2);\n  }\n  return positions;\n}\n\n/** CSS Grid N-column layout — pass one track per column via `columns`; stacks below `stackBelow`. */\nfunction MultiColumn({\n  className,\n  style,\n  columns,\n  gap,\n  stackBelow,\n  resizable,\n  onColumnsChange,\n  minColumnSize,\n  reorderable,\n  onReorderChange,\n  children,\n  ...props\n}: MultiColumnProps) {\n  const gridRef = React.useRef<HTMLDivElement>(null);\n  const effectiveStackBelow: MultiColumnBreakpoint = stackBelow ?? \"lg\";\n\n  // ---- Resize state (controlled if the parent re-supplies a changed\n  // `columns` value, uncontrolled otherwise) — adjusted during render rather\n  // than in an effect, per React's documented pattern for deriving state from\n  // a changing prop without an extra render/paint.\n  const columnsKey = columns.join(\" \");\n  const [liveColumns, setLiveColumns] = React.useState(columns);\n  const [syncedColumnsKey, setSyncedColumnsKey] = React.useState(columnsKey);\n  if (columnsKey !== syncedColumnsKey) {\n    setSyncedColumnsKey(columnsKey);\n    setLiveColumns(columns);\n  }\n  const effectiveColumns = resizable ? liveColumns : columns;\n\n  const minColumnSizePx = parseMinColumnSize(minColumnSize);\n\n  function commitColumns(next: string[]) {\n    // Only `liveColumns` changes here — `syncedColumnsKey` must keep tracking\n    // the last-seen `columns` PROP value (not the live value), or the\n    // render-time sync check above would see our own resize as a \"parent\n    // changed `columns`\" event and immediately reset it back.\n    setLiveColumns(next);\n    onColumnsChange?.(next);\n  }\n\n  const dragStateRef = React.useRef<{\n    index: number;\n    startClientX: number;\n    startTracksPx: number[];\n  } | null>(null);\n  // Which handle is actively being dragged, so it can be visibly highlighted\n  // — the live column resizing is the main feedback, but the handle itself\n  // giving no indication of being \"engaged\" reads as unresponsive too.\n  const [resizingIndex, setResizingIndex] = React.useState<number | null>(null);\n\n  function resizeByDelta(index: number, deltaPx: number, startTracksPx: number[]) {\n    // Original minmax() bounds, from the ORIGINAL `columns` prop — remembered\n    // even after a drag freezes a column to an explicit px value, so its\n    // configured range is never silently discarded.\n    const originalBounds: MinMaxBoundsPx[] = columns.map(parseMinMaxPx);\n    const [leftPx, rightPx] = computeResizedPair(\n      [startTracksPx[index], startTracksPx[index + 1]],\n      deltaPx,\n      minColumnSizePx,\n      [originalBounds[index] ?? null, originalBounds[index + 1] ?? null],\n    );\n    const next = [...effectiveColumns];\n    next[index] = `${leftPx}px`;\n    next[index + 1] = `${rightPx}px`;\n    commitColumns(next);\n  }\n\n  function handleResizePointerDown(index: number) {\n    return (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0 && event.pointerType === \"mouse\") return;\n      event.preventDefault();\n      const grid = gridRef.current;\n      if (!grid) return;\n      const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);\n      const startClientX = event.clientX;\n      dragStateRef.current = { index, startClientX, startTracksPx };\n      setResizingIndex(index);\n      // A body-level cursor override, since without pointer capture the\n      // cursor would otherwise flicker to whatever's under the pointer as it\n      // slips off the thin 1px handle during the drag.\n      document.body.style.cursor = \"col-resize\";\n\n      const onMove = (moveEvent: PointerEvent) => {\n        const state = dragStateRef.current;\n        if (!state) return;\n        resizeByDelta(state.index, moveEvent.clientX - state.startClientX, state.startTracksPx);\n      };\n      const onEnd = () => {\n        dragStateRef.current = null;\n        document.body.style.cursor = \"\";\n        setResizingIndex(null);\n        window.removeEventListener(\"pointermove\", onMove);\n        window.removeEventListener(\"pointerup\", onEnd);\n        window.removeEventListener(\"pointercancel\", onEnd);\n      };\n      window.addEventListener(\"pointermove\", onMove);\n      window.addEventListener(\"pointerup\", onEnd);\n      // A trackpad/touch gesture the browser reinterprets as scroll/pan fires\n      // `pointercancel` instead of `pointerup` — clean up the drag state\n      // either way, or it would otherwise get stuck mid-drag.\n      window.addEventListener(\"pointercancel\", onEnd);\n    };\n  }\n\n  function handleResizeKeyDown(index: number) {\n    return (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n      event.preventDefault();\n      const grid = gridRef.current;\n      if (!grid) return;\n      const startTracksPx = resolvePxTracks(getComputedStyle(grid).gridTemplateColumns);\n      const step = event.key === \"ArrowRight\" ? RESIZE_KEYBOARD_STEP_PX : -RESIZE_KEYBOARD_STEP_PX;\n      resizeByDelta(index, step, startTracksPx);\n    };\n  }\n\n  // Handle positions are read from the real rendered layout (resolved px,\n  // including fr/%/minmax()) and kept in sync via ResizeObserver — this is a\n  // real-browser-only guarantee; jsdom doesn't run layout, so this path is\n  // verified manually/in Storybook, not by the unit test suite.\n  const [handleLeftPx, setHandleLeftPx] = React.useState<number[]>([]);\n  React.useLayoutEffect(() => {\n    if (!resizable) return;\n    const grid = gridRef.current;\n    if (!grid) return;\n    const recompute = () => setHandleLeftPx(computeHandlePositionsPx(grid));\n    recompute();\n    const observer = new ResizeObserver(recompute);\n    observer.observe(grid);\n    return () => observer.disconnect();\n  }, [resizable, effectiveColumns]);\n\n  // ---- Reorder state ----\n  const childArray = React.Children.toArray(children) as React.ReactElement<MultiColumnItemProps>[];\n\n  function idFor(child: React.ReactElement<MultiColumnItemProps>, index: number): string {\n    if (typeof child.props.id === \"string\" && child.props.id.length > 0) return child.props.id;\n    if (reorderable && process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"MultiColumn: a MultiColumnItem is missing an `id` prop while `reorderable` is set. Falling back to a generated id — pass `id` on every MultiColumnItem for stable `onReorderChange` results.\",\n      );\n    }\n    return child.key != null ? String(child.key) : `mc-item-${index}`;\n  }\n\n  const [order, setOrder] = React.useState<string[]>(() =>\n    childArray\n      .map((child, index) => ({\n        id: idFor(child, index),\n        initialOrder: child.props.order ?? index,\n      }))\n      .sort((a, b) => a.initialOrder - b.initialOrder)\n      .map((entry) => entry.id),\n  );\n\n  function commitOrder(next: string[]) {\n    setOrder(next);\n    onReorderChange?.(next);\n  }\n\n  // Live drag feedback: which item is being dragged (dimmed) and which item\n  // it's currently hovering over (outlined as the drop target) — without\n  // this, dragging gives no visual feedback at all until the drop commits.\n  const [draggingId, setDraggingId] = React.useState<string | null>(null);\n  const [dropTargetId, setDropTargetId] = React.useState<string | null>(null);\n\n  function itemIdAtPoint(clientX: number, clientY: number): string | undefined {\n    const el = document.elementFromPoint(clientX, clientY);\n    return el?.closest<HTMLElement>('[data-slot=\"multi-column-item\"]')?.id;\n  }\n\n  function handleGripPointerDown(id: string) {\n    return (event: React.PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      setDraggingId(id);\n      // A body-level cursor override, since without pointer capture the\n      // cursor would otherwise flicker to whatever's under the pointer as it\n      // moves over other elements during the drag.\n      document.body.style.cursor = \"grabbing\";\n\n      function removeListeners() {\n        window.removeEventListener(\"pointermove\", onMove);\n        window.removeEventListener(\"pointerup\", onUp);\n        window.removeEventListener(\"pointercancel\", onCancel);\n      }\n      function endDrag() {\n        document.body.style.cursor = \"\";\n        setDraggingId(null);\n        setDropTargetId(null);\n      }\n      const onMove = (moveEvent: PointerEvent) => {\n        const targetId = itemIdAtPoint(moveEvent.clientX, moveEvent.clientY);\n        setDropTargetId(targetId && targetId !== id ? targetId : null);\n      };\n      const onUp = (upEvent: PointerEvent) => {\n        removeListeners();\n        const targetId = itemIdAtPoint(upEvent.clientX, upEvent.clientY);\n        if (targetId && targetId !== id) {\n          commitOrder(swapIdsInOrder(order, id, targetId));\n        }\n        endDrag();\n      };\n      // A trackpad/touch gesture the browser reinterprets as scroll/pan fires\n      // `pointercancel` instead of `pointerup` — just clean up, no drop.\n      const onCancel = () => {\n        removeListeners();\n        endDrag();\n      };\n      window.addEventListener(\"pointermove\", onMove);\n      window.addEventListener(\"pointerup\", onUp);\n      window.addEventListener(\"pointercancel\", onCancel);\n    };\n  }\n\n  function handleGripKeyDown(id: string) {\n    return (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (!event.ctrlKey || (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\")) return;\n      event.preventDefault();\n      commitOrder(moveIdInOrder(order, id, event.key === \"ArrowRight\" ? 1 : -1));\n    };\n  }\n\n  const orderIndexById = new Map(order.map((id, index) => [id, index]));\n\n  const renderedChildren = reorderable\n    ? childArray.map((child, index) => {\n        const id = idFor(child, index);\n        return React.cloneElement(child, {\n          key: id,\n          id,\n          order: orderIndexById.get(id) ?? child.props.order ?? index,\n          // Merge with (not replace) the item's own className, so the\n          // dragged item dims and the current drop target gets a ring —\n          // otherwise a drag gives no visual feedback at all until it drops.\n          // (`ring-*`, not `outline-*`, matching this file's/`Resizable`'s\n          // existing convention for visible highlights — a bare `outline-2`\n          // has no `outline-style`, so it renders nothing on its own.)\n          className: cn(\n            child.props.className,\n            id === draggingId && \"opacity-50\",\n            id === dropTargetId && id !== draggingId && \"ring-2 ring-focus ring-offset-2\",\n          ),\n          dragHandleProps: {\n            className: stackBelowVisibleClass[effectiveStackBelow],\n            \"aria-label\":\n              \"Drag to reorder this column. Press Ctrl+Left or Ctrl+Right to reorder via keyboard.\",\n            tabIndex: 0,\n            onPointerDown: handleGripPointerDown(id),\n            onKeyDown: handleGripKeyDown(id),\n          },\n        });\n      })\n    : children;\n\n  return (\n    <div\n      ref={gridRef}\n      data-slot=\"multi-column\"\n      className={cn(multiColumnVariants({ gap, stackBelow }), resizable && \"relative\", className)}\n      style={{ \"--mc-columns\": effectiveColumns.join(\" \"), ...style } as React.CSSProperties}\n      {...props}\n    >\n      {renderedChildren}\n      {resizable &&\n        effectiveColumns\n          .slice(0, -1)\n          .map((_, index) => (\n            <div\n              key={`multi-column-handle-${index}`}\n              data-slot=\"multi-column-handle\"\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label={`Resize columns ${index + 1} and ${index + 2}. Use Arrow Left or Arrow Right to resize via keyboard.`}\n              tabIndex={0}\n              draggable={false}\n              className={cn(\n                \"absolute inset-y-0 z-10 w-px -translate-x-1/2 touch-none cursor-col-resize items-center justify-center bg-primary-border after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1\",\n                stackBelowVisibleClass[effectiveStackBelow],\n                index === resizingIndex && \"w-0.5 bg-focus\",\n              )}\n              style={{ left: `${handleLeftPx[index] ?? 0}px` }}\n              onPointerDown={handleResizePointerDown(index)}\n              onKeyDown={handleResizeKeyDown(index)}\n            />\n          ))}\n    </div>\n  );\n}\n\nconst alignSelfClass = {\n  start: \"self-start\",\n  center: \"self-center\",\n  end: \"self-end\",\n  stretch: \"self-stretch\",\n} as const;\n\ntype MultiColumnItemProps = React.ComponentProps<\"div\"> & {\n  /** Visual position via CSS `order`, independent of DOM/source order. */\n  order?: number;\n  /** Cross-axis alignment for this column only (`align-self`). */\n  align?: keyof typeof alignSelfClass;\n  /**\n   * Injected automatically by the parent MultiColumn when `reorderable` is\n   * set — renders a drag grip inside this item and wires pointer/keyboard\n   * reordering. Not meant to be passed directly.\n   */\n  dragHandleProps?: React.ComponentProps<\"button\">;\n};\n\n/** A single column slot inside MultiColumn; `order` and `align` apply without reshuffling the DOM. */\nfunction MultiColumnItem({\n  className,\n  style,\n  order,\n  align,\n  dragHandleProps,\n  children,\n  ...props\n}: MultiColumnItemProps) {\n  return (\n    <div\n      data-slot=\"multi-column-item\"\n      className={cn(dragHandleProps && \"relative\", align && alignSelfClass[align], className)}\n      style={order !== undefined ? { order, ...style } : style}\n      {...props}\n    >\n      {children}\n      {dragHandleProps && (\n        <button\n          type=\"button\"\n          data-slot=\"multi-column-item-grip\"\n          draggable={false}\n          {...dragHandleProps}\n          className={cn(\n            \"absolute top-1 right-1 z-10 size-5 cursor-grab touch-none items-center justify-center rounded-2 border bg-primary-border text-muted-txt focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-focus focus-visible:ring-offset-1 active:cursor-grabbing\",\n            dragHandleProps.className,\n          )}\n        >\n          <Icon as={GripVerticalIcon} className=\"size-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport {\n  MultiColumn,\n  MultiColumnItem,\n  multiColumnVariants,\n  type MultiColumnProps,\n  type MultiColumnItemProps,\n};\n"],"mappings":"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"}