@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/SocialButton/SocialButton.js

@@ -0,0 +1,29 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { BrandIcon } from "../BrandIcon/BrandIcon.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/SocialButton/SocialButton.tsx
+var ICON_SIZE = {
+	xs: 14,
+	sm: 16,
+	md: 18,
+	lg: 20
+};
+/**
+* A provider sign-in button: a `<Button>` with the provider brand mark and a label.
+* @see docs/components/SocialButton.md
+*/
+var SocialButton = forwardRef(function SocialButton({ provider, label, variant = "secondary", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant,
+		size,
+		...props,
+		children: [/* @__PURE__ */ jsx(BrandIcon, {
+			name: provider,
+			size: ICON_SIZE[size]
+		}), label]
+	});
+});
+export { SocialButton };

package/dist/components/SocialButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SocialButton } from './SocialButton.js';
+export type { SocialButtonProps } from './SocialButton.js';

package/dist/components/Sortable/Sortable.css

@@ -0,0 +1,127 @@
+:root {
+  --sortable-list-gap: var(--space-2);
+  --sortable-grid-gap: var(--sortable-list-gap);
+  --sortable-item-shadow-dragging: var(--shadow-lg);
+  --sortable-handle-bg: transparent;
+  --sortable-handle-radius: var(--radius-sm);
+  --sortable-handle-fg: var(--color-fg-subtle);
+  --sortable-handle-padding: var(--space-1);
+  --sortable-handle-fg-hover: var(--color-fg);
+  --sortable-handle-bg-hover: var(--color-bg-subtle);
+  --sortable-handle-border-color-focus: var(--color-accent);
+  --sortable-handle-ring-focus: var(--ring-accent);
+}
+
+.Sortable__list__g0YfV {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sortable-list-gap);
+}
+
+.Sortable__grid__VgZzn {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(var(--sortable-columns, 12), minmax(0, 1fr));
+  gap: var(--sortable-grid-gap);
+  align-items: stretch;
+}
+
+.Sortable__item__75sqa {
+  position: relative;
+  grid-column: var(--sortable-item-span, auto);
+  touch-action: none;
+}
+
+.Sortable__item__75sqa[data-dragging=true] {
+  cursor: grabbing;
+}
+
+.Sortable__overlayItem__dDN0m {
+  box-shadow: var(--sortable-item-shadow-dragging);
+  cursor: grabbing;
+}
+
+.Sortable__handle__wHFlt {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sortable-handle-bg);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--sortable-handle-radius);
+  color: var(--sortable-handle-fg);
+  cursor: grab;
+  padding: var(--sortable-handle-padding);
+  touch-action: none;
+}
+.Sortable__handle__wHFlt:hover {
+  color: var(--sortable-handle-fg-hover);
+  background: var(--sortable-handle-bg-hover);
+}
+.Sortable__handle__wHFlt:focus-visible {
+  border-color: var(--sortable-handle-border-color-focus);
+  outline: var(--ring-width) solid var(--sortable-handle-ring-focus);
+  outline-offset: var(--ring-offset);
+}
+
+.Sortable__item__75sqa[data-dragging=true] .Sortable__handle__wHFlt {
+  cursor: grabbing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Sortable__item__75sqa {
+    transition: none !important;
+  }
+}
+.Sortable__collapsible__OD3_Q {
+  container-type: inline-size;
+}
+
+.Sortable__stepContainer__fXmNH {
+  display: grid;
+  container-type: inline-size;
+}
+
+@container (max-width: 480px) {
+  .Sortable__collapsible__OD3_Q.Sortable__collapseSm__sZH8F > * {
+    grid-column: 1/-1;
+  }
+}
+@container (max-width: 640px) {
+  .Sortable__collapsible__OD3_Q.Sortable__collapseMd__3pLVQ > * {
+    grid-column: 1/-1;
+  }
+}
+@container (max-width: 768px) {
+  .Sortable__collapsible__OD3_Q.Sortable__collapseLg__yW9LU > * {
+    grid-column: 1/-1;
+  }
+}
+@container (max-width: 768px) {
+  .Sortable__grid__VgZzn.Sortable__stepLg__XxwL5 {
+    grid-template-columns: var(--sortable-columns-lg, none);
+  }
+  .Sortable__grid__VgZzn.Sortable__stepLg__XxwL5 > .Sortable__item__75sqa {
+    grid-column: var(--sortable-item-span-lg, auto);
+  }
+}
+@container (max-width: 640px) {
+  .Sortable__grid__VgZzn.Sortable__stepMd__WuiaR {
+    grid-template-columns: var(--sortable-columns-md, none);
+  }
+  .Sortable__grid__VgZzn.Sortable__stepMd__WuiaR > .Sortable__item__75sqa {
+    grid-column: var(--sortable-item-span-md, auto);
+  }
+}
+@container (max-width: 480px) {
+  .Sortable__grid__VgZzn.Sortable__stepSm__63tE4 {
+    grid-template-columns: var(--sortable-columns-sm, none);
+  }
+  .Sortable__grid__VgZzn.Sortable__stepSm__63tE4 > .Sortable__item__75sqa {
+    grid-column: var(--sortable-item-span-sm, auto);
+  }
+}

package/dist/components/Sortable/Sortable.d.ts

@@ -0,0 +1,146 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { type Transform } from '@dnd-kit/utilities';
+import { type GridItemSpan } from '../_internal/gridSpan.js';
+import { type CollapseBreakpoint, type CollapseColumnsMap } from '../_internal/collapse.js';
+/**
+ * Layout arrangement of the sortable items.
+ * - `'list'` (default) — a single vertical column (`verticalListSortingStrategy`).
+ * - `'grid'` — a `columns`-track CSS grid where items carry column spans and
+ *   siblings reflow in 2D during a drag (`rectSortingStrategy`).
+ */
+export type SortableArrangement = 'list' | 'grid';
+/**
+ * Payload fired by `onReorder` after a successful drag-drop or keyboard move.
+ * Consumer applies the move via an immutable `arrayMove(items, from, to)`
+ * (3-line utility, not shipped by the library; `@dnd-kit/sortable` ships an
+ * `arrayMove` consumers can import if they want).
+ */
+export interface SortableReorderEvent {
+    from: number;
+    to: number;
+    id: string | number;
+}
+/**
+ * Clamp a drag `transform` so the dragged node (`nodeRect`) stays within
+ * `boundingRect`. Pure function mirroring dnd-kit's `restrictToBoundingRect`;
+ * exported so the clamp math can be unit-tested without a real DOM / drag.
+ *
+ * `scaleX` / `scaleY` pass through untouched — only the translation is clamped.
+ */
+export declare function restrictTransformToRect(transform: Transform, nodeRect: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}, boundingRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}): Transform;
+export interface SortableProps extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * Fires after a drag or keyboard move with the new position. Consumer
+     * holds the items array and re-renders with the new order.
+     *
+     * Not fired if the drop position equals the source position (no-op).
+     */
+    onReorder?: (event: SortableReorderEvent) => void;
+    /**
+     * When `true` (default), the dragged item is clamped to the list's bounding
+     * box — it can't be dragged outside the `<ol>`. Set `false` for free-drag
+     * (the item can be dragged anywhere on the page). For a vertical list this
+     * constrains the drag vertically to the list's extent.
+     */
+    restrictToContainer?: boolean;
+    /**
+     * Layout arrangement of the items.
+     * - `'list'` (default) — single vertical column; existing behavior unchanged.
+     * - `'grid'` — the `<ol>` becomes a `columns`-track CSS grid. Items carry
+     *   column spans (`Sortable.Item span`), rows are equal-height, and siblings
+     *   reflow in 2D during a drag. Reorder semantics stay order-based (a drop
+     *   reorders the flow; nothing here persists an x/y position).
+     */
+    arrangement?: SortableArrangement;
+    /**
+     * Number of equal-width grid tracks. Only applies when `arrangement="grid"`
+     * (ignored for a list). Default `12`, matching `Grid.Item`'s 12-column
+     * fraction spans (`'25%'`→3 … `'75%'`→9 tracks). Set another count for a
+     * simpler grid, but the named fraction spans then won't map to their
+     * fraction (documented, not validated — same as `Grid`).
+     */
+    columns?: number;
+    /**
+     * Responsive collapse for the grid arrangement — mirrors `Grid`'s
+     * `collapseBelow` exactly (same breakpoints, same container-query
+     * mechanism). Ignored unless `arrangement="grid"`.
+     * - `'sm' | 'md' | 'lg'` — below the container-width threshold (480 / 640 /
+     *   768px of the LIST'S OWN width) every item spans the full row: a single
+     *   visual column.
+     * - `{ lg?: n, md?: n, sm?: n }` — graduated: below each breakpoint the grid
+     *   re-templates to that many columns and item spans clamp to fit (a span
+     *   wider than the step becomes a full row). E.g. `{ md: 6, sm: 1 }`.
+     *
+     * ❌ Anti-pattern: a collapsible Sortable must get its width from its
+     * parent — `container-type: inline-size` zeroes the list's contribution to
+     * intrinsic sizing (same caveat as `Grid`'s `collapseBelow`).
+     *
+     * ⚠️ The map form (and ONLY the map form) wraps the `<ol>` in an extra
+     * `<div>` carrying `container-type: inline-size` — re-templating the `<ol>`
+     * requires querying an ancestor, not the `<ol>` itself. A `> child` selector
+     * aimed at the list from its parent hits that wrapper instead, and layout the
+     * parent applies via `className` lands on the `<ol>` inside it. `ref`,
+     * `className`, `style` and spread props all stay on the `<ol>`.
+     */
+    collapseBelow?: CollapseBreakpoint | CollapseColumnsMap;
+}
+export interface SortableItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
+    /**
+     * Stable identifier for this item. Used by dnd-kit for tracking the item
+     * across reorders. String or number — typically the consumer's database id.
+     */
+    id: string | number;
+    /** Item content — typically a `<Card>` or a row of text + icons. */
+    children: ReactNode;
+    /**
+     * Column span, only meaningful under `<Sortable arrangement="grid">`
+     * (ignored in a list). Mirrors `Grid.Item`'s `span` exactly:
+     * - number — `span N` of the grid's `columns`.
+     * - `'25%' | '33%' | '50%' | '67%' | '75%'` — fractions of a 12-column grid.
+     * - `'100%'` / `'full'` — the entire row (`1 / -1`); safe with any `columns`.
+     * Omit for a single track (auto placement).
+     */
+    span?: GridItemSpan;
+}
+export interface SortableHandleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Decorative content — typically a grip icon (e.g. `<GripVertical size={14} />`).
+     * Rendered inside the Handle's `<button>` wrapped with `aria-hidden`.
+     */
+    children?: ReactNode;
+}
+export interface SortableItemContextValue {
+    listeners: ReturnType<typeof useSortable>['listeners'];
+    attributes: ReturnType<typeof useSortable>['attributes'];
+    setActivatorNodeRef: ReturnType<typeof useSortable>['setActivatorNodeRef'];
+}
+export declare const SortableItemContext: import("react").Context<SortableItemContextValue | null>;
+/**
+ * One reorderable item in a `<Sortable>`; renders an `<li>` with a stable `id`.
+ * @see docs/components/Sortable.md
+ */
+export declare const SortableItem: import("react").ForwardRefExoticComponent<SortableItemProps & import("react").RefAttributes<HTMLLIElement>>;
+/**
+ * Optional drag-origin marker inside a `<Sortable.Item>`; when present, only the Handle initiates drag.
+ * @see docs/components/Sortable.md
+ */
+export declare const SortableHandle: import("react").ForwardRefExoticComponent<SortableHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Drag-to-reorder list (single column) with `Sortable.Item` and `Sortable.Handle`, in list or grid arrangement.
+ * @see docs/components/Sortable.md
+ */
+export declare const Sortable: import("react").ForwardRefExoticComponent<SortableProps & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<SortableItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    Handle: import("react").ForwardRefExoticComponent<SortableHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/Sortable/Sortable.js

@@ -0,0 +1,262 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { resolveCollapsedGridItemSpan, resolveGridItemSpan } from "../_internal/gridSpan.js";
+import { COLLAPSE_BREAKPOINTS, CollapseColumnsContext, collapseTrackTemplate } from "../_internal/collapse.js";
+import { sortableTarget, useDragAccessibility } from "../_internal/dragAnnouncements.js";
+import Sortable_module_default from "./Sortable.module.js";
+import { Children, createContext, forwardRef, isValidElement, useContext, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+// src/components/Sortable/Sortable.tsx
+/**
+* Clamp a drag `transform` so the dragged node (`nodeRect`) stays within
+* `boundingRect`. Pure function mirroring dnd-kit's `restrictToBoundingRect`;
+* exported so the clamp math can be unit-tested without a real DOM / drag.
+*
+* `scaleX` / `scaleY` pass through untouched — only the translation is clamped.
+*/
+function restrictTransformToRect(transform, nodeRect, boundingRect) {
+	const value = { ...transform };
+	if (nodeRect.top + transform.y <= boundingRect.top) value.y = boundingRect.top - nodeRect.top;
+	else if (nodeRect.bottom + transform.y >= boundingRect.top + boundingRect.height) value.y = boundingRect.top + boundingRect.height - nodeRect.bottom;
+	if (nodeRect.left + transform.x <= boundingRect.left) value.x = boundingRect.left - nodeRect.left;
+	else if (nodeRect.right + transform.x >= boundingRect.left + boundingRect.width) value.x = boundingRect.left + boundingRect.width - nodeRect.right;
+	return value;
+}
+var SortableItemContext = createContext(null);
+var OVERLAY_ITEM_CONTEXT = {
+	listeners: void 0,
+	attributes: {},
+	setActivatorNodeRef: () => {}
+};
+/**
+* Recursively check whether the children subtree contains a `Sortable.Handle`.
+* Used by `Sortable.Item` to decide whether to attach drag listeners to itself
+* (no Handle present) or rely on the Handle to attach them.
+*
+* **Limitation:** only walks `React.Children` and direct `props.children`.
+* If a consumer wraps `<Sortable.Handle>` inside their own custom component
+* (e.g. `<TaskRow>` whose JSX internally renders the Handle), the walk sees
+* `<TaskRow>` but not the Handle inside it — the Item is classified as
+* no-Handle and gets whole-item drag. Workaround: put `<Sortable.Handle>` at
+* the same JSX nesting level as the rest of the Item's content.
+*/
+function containsHandle(children) {
+	let found = false;
+	function walk(node) {
+		if (found) return;
+		if (!isValidElement(node)) return;
+		if (node.type === SortableHandle) {
+			found = true;
+			return;
+		}
+		const { children: nested } = node.props;
+		if (nested != null) Children.forEach(nested, walk);
+	}
+	Children.forEach(children, walk);
+	return found;
+}
+var collapseClass = {
+	sm: Sortable_module_default.collapseSm,
+	md: Sortable_module_default.collapseMd,
+	lg: Sortable_module_default.collapseLg
+};
+var stepClass = {
+	sm: Sortable_module_default.stepSm,
+	md: Sortable_module_default.stepMd,
+	lg: Sortable_module_default.stepLg
+};
+var SortableRoot = forwardRef(function SortableRoot({ onReorder, restrictToContainer = true, arrangement = "list", columns = 12, collapseBelow, className, style, children, ...rest }, ref) {
+	const isGrid = arrangement === "grid";
+	const collapse = isGrid ? collapseBelow : void 0;
+	const collapseMap = typeof collapse === "object" ? collapse : void 0;
+	const collapseKeys = collapseMap ? COLLAPSE_BREAKPOINTS.filter((b) => collapseMap[b] !== void 0) : [];
+	const [activeId, setActiveId] = useState(null);
+	useFloatingSurface(activeId != null);
+	const olRef = useRef(null);
+	const itemIds = useMemo(() => {
+		const ids = [];
+		Children.forEach(children, (child) => {
+			if (isValidElement(child) && child.type === SortableItem) ids.push(child.props.id);
+		});
+		return ids;
+	}, [children]);
+	const activeChildren = useMemo(() => {
+		if (activeId == null) return null;
+		let content = null;
+		Children.forEach(children, (child) => {
+			if (isValidElement(child) && child.type === SortableItem && child.props.id === activeId) content = child.props.children;
+		});
+		return content;
+	}, [activeId, children]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragStart = (event) => {
+		setActiveId(event.active.id);
+	};
+	const handleDragEnd = (event) => {
+		setActiveId(null);
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const from = itemIds.indexOf(active.id);
+		const to = itemIds.indexOf(over.id);
+		if (from < 0 || to < 0) return;
+		onReorder?.({
+			from,
+			to,
+			id: active.id
+		});
+	};
+	const handleDragCancel = () => {
+		setActiveId(null);
+	};
+	const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	const restrictModifier = useMemo(() => ({ transform, draggingNodeRect }) => {
+		const container = olRef.current?.getBoundingClientRect();
+		if (!draggingNodeRect || !container) return transform;
+		return restrictTransformToRect(transform, draggingNodeRect, container);
+	}, []);
+	const modifiers = restrictToContainer ? [restrictModifier] : void 0;
+	const accessibility = useDragAccessibility(sortableTarget);
+	const ol = /* @__PURE__ */ jsx("ol", {
+		ref: mergeRefs(olRef, ref),
+		className: clsx(isGrid ? Sortable_module_default.grid : Sortable_module_default.list, typeof collapse === "string" && Sortable_module_default.collapsible, typeof collapse === "string" && collapseClass[collapse], ...collapseKeys.map((b) => stepClass[b]), className),
+		style: isGrid ? {
+			...style,
+			...Object.fromEntries(collapseKeys.map((b) => [`--sortable-columns-${b}`, collapseTrackTemplate(collapseMap[b])])),
+			["--sortable-columns"]: columns
+		} : style,
+		...rest,
+		children
+	});
+	const list = collapseMap && collapseKeys.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: Sortable_module_default.stepContainer,
+		children: ol
+	}) : ol;
+	const tree = /* @__PURE__ */ jsxs(DndContext, {
+		accessibility,
+		sensors,
+		modifiers,
+		collisionDetection: isGrid ? closestCenter : void 0,
+		onDragStart: handleDragStart,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: [/* @__PURE__ */ jsx(SortableContext, {
+			items: itemIds,
+			strategy: isGrid ? rectSortingStrategy : verticalListSortingStrategy,
+			children: list
+		}), /* @__PURE__ */ jsx(DragOverlay, {
+			modifiers,
+			dropAnimation: prefersReducedMotion ? null : void 0,
+			children: activeChildren != null ? /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+				value: OVERLAY_ITEM_CONTEXT,
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx(Sortable_module_default.item, Sortable_module_default.overlayItem),
+					"data-dragging": "true",
+					children: activeChildren
+				})
+			}) : null
+		})]
+	});
+	return collapseMap && collapseKeys.length > 0 ? /* @__PURE__ */ jsx(CollapseColumnsContext.Provider, {
+		value: collapseMap,
+		children: tree
+	}) : tree;
+});
+SortableRoot.displayName = "Sortable";
+/**
+* One reorderable item in a `<Sortable>`; renders an `<li>` with a stable `id`.
+* @see docs/components/Sortable.md
+*/
+var SortableItem = forwardRef(function SortableItem({ id, span, className, children, ...rest }, ref) {
+	const liRef = useRef(null);
+	const dragLabel = rest["aria-label"];
+	const data = useMemo(() => ({
+		dragLabel,
+		dragNode: liRef
+	}), [dragLabel]);
+	const { setNodeRef, setActivatorNodeRef, listeners, attributes, transform, transition, isDragging } = useSortable({
+		id,
+		data
+	});
+	const hasHandle = useMemo(() => containsHandle(children), [children]);
+	const collapseMap = useContext(CollapseColumnsContext);
+	const ctxValue = useMemo(() => ({
+		listeners,
+		attributes,
+		setActivatorNodeRef
+	}), [
+		listeners,
+		attributes,
+		setActivatorNodeRef
+	]);
+	const setRef = (node) => {
+		liRef.current = node;
+		setNodeRef(node);
+		if (!hasHandle) setActivatorNodeRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("li", {
+			ref: setRef,
+			style: {
+				transform: CSS.Transform.toString(transform),
+				transition,
+				opacity: isDragging ? 0 : void 0,
+				["--sortable-item-span"]: resolveGridItemSpan(span) ?? "auto",
+				...collapseMap ? Object.fromEntries(Object.keys(collapseMap).map((b) => [`--sortable-item-span-${b}`, resolveCollapsedGridItemSpan(span, collapseMap[b])])) : void 0
+			},
+			"data-dragging": isDragging ? "true" : void 0,
+			className: clsx(Sortable_module_default.item, className),
+			...hasHandle ? {} : listeners,
+			...hasHandle ? {} : attributes,
+			...rest,
+			children
+		})
+	});
+});
+SortableItem.displayName = "SortableItem";
+/**
+* Optional drag-origin marker inside a `<Sortable.Item>`; when present, only the Handle initiates drag.
+* @see docs/components/Sortable.md
+*/
+var SortableHandle = forwardRef(function SortableHandle({ className, children, "aria-label": ariaLabel, ...rest }, ref) {
+	const t = useTranslation();
+	const ctx = useContext(SortableItemContext);
+	if (!ctx) throw new Error("<Sortable.Handle> must be rendered inside a <Sortable.Item>.");
+	const setRef = (node) => {
+		ctx.setActivatorNodeRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref: setRef,
+		type: "button",
+		"aria-label": ariaLabel || t("drag.handleLabel"),
+		className: clsx(Sortable_module_default.handle, className),
+		...rest,
+		"data-sortable-handle": "true",
+		...ctx.listeners,
+		...ctx.attributes,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children
+		})
+	});
+});
+SortableHandle.displayName = "SortableHandle";
+/**
+* Drag-to-reorder list (single column) with `Sortable.Item` and `Sortable.Handle`, in list or grid arrangement.
+* @see docs/components/Sortable.md
+*/
+var Sortable = Object.assign(SortableRoot, {
+	Item: SortableItem,
+	Handle: SortableHandle
+});
+export { Sortable, SortableHandle, SortableItem, SortableItemContext, restrictTransformToRect };

package/dist/components/Sortable/Sortable.module.js

@@ -0,0 +1,31 @@
+import "./Sortable.css";
+// src/components/Sortable/Sortable.module.scss
+var list = "Sortable__list__g0YfV";
+var grid = "Sortable__grid__VgZzn";
+var item = "Sortable__item__75sqa";
+var overlayItem = "Sortable__overlayItem__dDN0m";
+var handle = "Sortable__handle__wHFlt";
+var collapsible = "Sortable__collapsible__OD3_Q";
+var stepContainer = "Sortable__stepContainer__fXmNH";
+var collapseSm = "Sortable__collapseSm__sZH8F";
+var collapseMd = "Sortable__collapseMd__3pLVQ";
+var collapseLg = "Sortable__collapseLg__yW9LU";
+var stepLg = "Sortable__stepLg__XxwL5";
+var stepMd = "Sortable__stepMd__WuiaR";
+var stepSm = "Sortable__stepSm__63tE4";
+var Sortable_module_default = {
+	list,
+	grid,
+	item,
+	overlayItem,
+	handle,
+	collapsible,
+	stepContainer,
+	collapseSm,
+	collapseMd,
+	collapseLg,
+	stepLg,
+	stepMd,
+	stepSm
+};
+export { collapseLg, collapseMd, collapseSm, collapsible, Sortable_module_default as default, grid, handle, item, list, overlayItem, stepContainer, stepLg, stepMd, stepSm };

package/dist/components/Sortable/containerAwareCollision.d.ts

@@ -0,0 +1,56 @@
+import { type CollisionDetection } from '@dnd-kit/core';
+/**
+ * `closestCorners`, but the pointer's containing container wins first.
+ *
+ * Why: with plain `closestCorners`, every card registers as a droppable
+ * alongside the column containers, and ranking is by corner distance of the
+ * DRAGGED RECT — not by where the pointer is. Next to a tall column, an
+ * empty/sparse sibling column stretches (flex align-items: stretch) far
+ * beyond its content, so its corners sit hundreds of pixels from the dragged
+ * card while a same-Y card in the SOURCE column sits one column-gap away.
+ * The source card out-ranks the geometrically-containing target column, the
+ * cross-column transit is never detected, and the drop silently resolves as
+ * a same-column no-op (#367).
+ *
+ * Strategy:
+ * 1. No pointer (keyboard drags pass `pointerCoordinates: null`) → plain
+ *    `closestCorners` over everything — keyboard behavior unchanged.
+ * 2. Find the container droppable the pointer is inside (`pointerWithin`
+ *    over containers only). Containers are droppables registered via plain
+ *    `useDroppable` — they carry no `data.sortable`; card/item droppables
+ *    registered via `useSortable` do.
+ * 3. Pointer inside a container → rank with `closestCorners` restricted to
+ *    that container plus the droppables whose center lies inside it (its own
+ *    cards). An empty column is its only candidate, so it wins; over a card,
+ *    the card wins; below the last card, the nearest of card/column wins —
+ *    both resolve to "append" downstream.
+ * 4. Pointer in no container (board gap / outside) → plain `closestCorners`.
+ */
+export declare const containerAwareClosestCorners: CollisionDetection;
+/**
+ * True when the pointer sits outside the collective bounding box of every
+ * CONTAINER droppable — i.e. the drag is over unrelated page content rather
+ * than over the board. Callers use it to reject a drop that collision
+ * detection nonetheless resolved to a container (#387).
+ *
+ * It has to be asked separately because no collision detector can answer it:
+ * `closestCorners` — which `containerAwareClosestCorners` falls back to
+ * whenever the pointer is in no container — pushes a collision for EVERY
+ * measured droppable and uses distance only to rank them, never to reject. So
+ * `over` is never null, and "released nowhere" is indistinguishable from
+ * "released on the nearest column" from the drop handler's side.
+ *
+ * Collective bounding box, not each container's own rect: a board with a `gap`
+ * between columns has pointer positions inside the board but inside no column.
+ * Per-rect testing would cancel those, and a release in a 12px gutter means the
+ * column beside it — which is exactly what `closestCorners` returns. Only
+ * leaving the band of columns entirely is a cancel. Containers only (never the
+ * cards') so a pointer in a sparse column's empty space stays a valid drop,
+ * which is the whole point of #367.
+ *
+ * Returns false whenever it cannot tell — no pointer (keyboard drags pass
+ * `pointerCoordinates: null`) or nothing measured (jsdom lays nothing out) —
+ * so an unmeasurable board keeps committing to the nearest container instead of
+ * cancelling every drop.
+ */
+export declare function isPointerOutsideContainers({ droppableContainers, droppableRects, pointerCoordinates, }: Pick<Parameters<CollisionDetection>[0], 'droppableContainers' | 'droppableRects' | 'pointerCoordinates'>): boolean;