cursedbelt 5.58.0 → 5.59.0

package/dist/react/components/PaneSplit.d.ts

@@ -0,0 +1,52 @@
+/**
+ * `PaneSplit` — an editor's pane tree, drawn VS Code's way: panes that meet edge to edge, square,
+ * with one hairline between them.
+ *
+ * Graduated from desk's `WorkspaceSplit` on the owner's word: *"Panels and panes should be separated
+ * by sharp corners and thin border lines just like they are in vscode"* — and *"since these changes
+ * apply to layouts and cards they should be changed in cb and should impact desk through cb"*.
+ *
+ * The model is the app's — a tree of leaves and splits, each split carrying the fractions of its
+ * children. This component is only geometry: flex tracks, one seam between each pair of children,
+ * and the arithmetic that turns a pointer into a pair of fractions. Unlike `PanelGrid` it owns no
+ * sizes and persists nothing, which is what an app that stores its layout as a setting needs.
+ *
+ * 🔴 **The seam is keyboard-operable.** Arrow keys move it by 2%, Home/End take it to the bounds.
+ *
+ * 🔴 **The hit strip lives inside the seam's own track** — a real flex item, never a bar hung over
+ * the boundary. An invisible strip centred on the seam sits over the first pixels of the pane beside
+ * it and swallows clicks nobody aimed at it (desk's file `21`, where a 44px hit area ate a fill
+ * handle). So the track is a few pixels wide for the hand, painted the panes' own ground
+ * (`--cb-panesplit-ground`) with the hairline drawn down its middle: to the eye, two panes and one
+ * line, which is VS Code's picture; to the pointer, a target that touches no pane.
+ *
+ * Plain CSS (`paneSplit.css`), prefix `cb-panesplit`, so it draws in an app with no Tailwind pass.
+ */
+import type { JSX } from 'react';
+import './paneSplit.css';
+export type PaneSplitDirection = 'row' | 'column';
+export type PaneSplitNode<P> = {
+    kind: 'leaf';
+    pane: P;
+} | {
+    kind: 'split';
+    direction: PaneSplitDirection;
+    sizes: readonly number[];
+    children: readonly PaneSplitNode<P>[];
+};
+/** Where a node sits in the tree: the child index at each level, from the root. */
+export type PaneSplitPath = readonly number[];
+export interface PaneSplitProps<P> {
+    node: PaneSplitNode<P>;
+    /** A key unique across the whole tree — what keeps a pane's subtree when its siblings close. */
+    paneKey: (pane: P) => string;
+    renderPane: (pane: P) => JSX.Element;
+    /** A seam moved: the split at `path` now has these fractions. */
+    onResize: (path: PaneSplitPath, sizes: number[]) => void;
+    /** The smallest share of an axis a pane can be dragged down to. Default 0.12. */
+    minFraction?: number;
+    /** Where `node` sits — only for a tree drawn from below its root. */
+    path?: PaneSplitPath;
+}
+export declare function PaneSplit<P>(props: PaneSplitProps<P>): JSX.Element;
+//# sourceMappingURL=PaneSplit.d.ts.map

package/dist/react/components/PaneSplit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaneSplit.d.ts","sourceRoot":"","sources":["../../../src/react/components/PaneSplit.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAiB,GAAG,EAA0E,MAAM,OAAO,CAAC;AAExH,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,aAAa,CAAC,CAAC,IACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAA;CAAE,CAAC;AAEtH,mFAAmF;AACnF,MAAM,MAAM,aAAa,GAAG,SAAS,MAAM,EAAE,CAAC;AAE9C,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,gGAAgG;IAChG,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACrC,iEAAiE;IACjE,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzD,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAaD,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAIlE"}

package/dist/react/components/PaneSplit.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import './paneSplit.css';
+const DEFAULT_MIN_FRACTION = 0.12;
+/**
+ * A key for a child that follows its content rather than its position: closing a pane in the middle
+ * of a row shifts every later child's index, and `key={index}` would hand React the wrong subtree.
+ */
+function childKey(node, paneKey) {
+    if (node.kind === 'leaf')
+        return paneKey(node.pane);
+    return node.children.map((child) => childKey(child, paneKey)).join('|');
+}
+export function PaneSplit(props) {
+    const { node } = props;
+    if (node.kind === 'leaf')
+        return props.renderPane(node.pane);
+    return _jsx(SplitNode, { ...props, node: node, path: props.path ?? [] });
+}
+function SplitNode({ node, path, paneKey, renderPane, onResize, minFraction = DEFAULT_MIN_FRACTION, }) {
+    const frame = useRef(null);
+    const dragging = useRef(null);
+    /** Set the share of the pair either side of seam `index`; only those two panes move. */
+    const setShare = useCallback((index, share) => {
+        const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
+        if (pair <= 0)
+            return;
+        const bounded = Math.min(Math.max(share, minFraction), 1 - minFraction);
+        const sizes = [...node.sizes];
+        sizes[index] = pair * bounded;
+        sizes[index + 1] = pair * (1 - bounded);
+        onResize(path, sizes);
+    }, [node.sizes, minFraction, onResize, path]);
+    const moveSeam = (index, position) => {
+        const box = frame.current?.getBoundingClientRect();
+        if (!box)
+            return;
+        const total = node.direction === 'row' ? box.width : box.height;
+        if (total <= 0)
+            return;
+        const offset = (node.direction === 'row' ? position - box.left : position - box.top) / total;
+        const before = node.sizes.slice(0, index).reduce((sum, size) => sum + size, 0);
+        const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
+        if (pair <= 0)
+            return;
+        setShare(index, (offset - before) / pair);
+    };
+    const nudgeSeam = (index, delta) => {
+        const pair = (node.sizes[index] ?? 0) + (node.sizes[index + 1] ?? 0);
+        if (pair <= 0)
+            return;
+        setShare(index, (node.sizes[index] ?? 0) / pair + delta);
+    };
+    const onKeyDown = (event, index) => {
+        const back = node.direction === 'row' ? 'ArrowLeft' : 'ArrowUp';
+        const forward = node.direction === 'row' ? 'ArrowRight' : 'ArrowDown';
+        if (event.key === back)
+            nudgeSeam(index, -0.02);
+        else if (event.key === forward)
+            nudgeSeam(index, 0.02);
+        else if (event.key === 'Home')
+            nudgeSeam(index, -1);
+        else if (event.key === 'End')
+            nudgeSeam(index, 1);
+        else
+            return;
+        event.preventDefault();
+    };
+    const onPointerDown = (event, index) => {
+        if (event.button !== 0)
+            return;
+        dragging.current = index;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        event.preventDefault();
+    };
+    const onPointerMove = (event) => {
+        if (dragging.current === null)
+            return;
+        moveSeam(dragging.current, node.direction === 'row' ? event.clientX : event.clientY);
+    };
+    const endDrag = (event) => {
+        if (dragging.current === null)
+            return;
+        dragging.current = null;
+        if (event.currentTarget.hasPointerCapture?.(event.pointerId))
+            event.currentTarget.releasePointerCapture(event.pointerId);
+    };
+    const minPercent = Math.round(minFraction * 100);
+    return (_jsx("div", { className: "cb-panesplit", "data-direction": node.direction, ref: frame, children: node.children.map((child, index) => (_jsx(ChildAndSeam, { last: index === node.children.length - 1, size: node.sizes[index] ?? 1 / node.children.length, seam: {
+                direction: node.direction,
+                percent: Math.round((node.sizes[index] ?? 0) * 100),
+                min: minPercent,
+                max: 100 - minPercent,
+                onKeyDown: (event) => onKeyDown(event, index),
+                onPointerDown: (event) => onPointerDown(event, index),
+                onPointerMove,
+                endDrag,
+            }, children: _jsx(PaneSplit, { node: child, path: [...path, index], paneKey: paneKey, renderPane: renderPane, onResize: onResize, minFraction: minFraction }) }, childKey(child, paneKey)))) }));
+}
+function ChildAndSeam({ last, size, seam, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "cb-panesplit__cell", style: { '--cb-panesplit-share': size }, children: children }), !last && (_jsx("div", { className: "cb-panesplit__seam", role: "separator", tabIndex: 0, "aria-orientation": seam.direction === 'row' ? 'vertical' : 'horizontal', "aria-label": seam.direction === 'row' ? 'Width of the pane on the left' : 'Height of the pane above', "aria-valuenow": seam.percent, "aria-valuemin": seam.min, "aria-valuemax": seam.max, onKeyDown: seam.onKeyDown, onPointerDown: seam.onPointerDown, onPointerMove: seam.onPointerMove, onPointerUp: seam.endDrag, onPointerCancel: seam.endDrag }))] }));
+}
+//# sourceMappingURL=PaneSplit.js.map

package/dist/react/components/PaneSplit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaneSplit.js","sourceRoot":"","sources":["../../../src/react/components/PaneSplit.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/PointerDrag.d.ts

@@ -0,0 +1,88 @@
+/**
+ * `usePointerDrag` + `DragGhost` — a drag you can SEE, with a mouse or a finger.
+ *
+ * The owner, of desk's tab deck: *"When I drag a tab in desk app it should animate or show the tab
+ * moving with your mouse cursor (or on iphone with the dragging gesture) like vs code does."* — and
+ * *"since these changes apply to layouts and cards they should be changed in cb"*. So the gesture
+ * and its picture live here, and an app keeps only what is its own: where a drop lands.
+ *
+ * ## The gesture
+ *
+ * Pointer events, never HTML5 drag-and-drop, for `SheetTabStrip`'s reasons: the native API's image
+ * is a translucent screenshot the page cannot style, it cannot be driven by CDP in a check, and it
+ * fires nothing at all for touch.
+ *
+ * - **Mouse and pen**: a press becomes a drag past `slop` pixels of travel, so a click is still a
+ *   click and a double-click still lands. 🔴 The pointer is captured AT THE PRESS: a quick flick
+ *   leaves a 30px tab inside one frame, and an element that only hears moves while the pointer is
+ *   over it never sees the travel that would make it a drag (measured in desk's browser check).
+ *   Capture to the pressed element itself redirects nothing a click needs — down and up both land
+ *   on it.
+ * - **Touch**: a finger has to REST for `holdMs` first. Anything that moves before then is a scroll
+ *   and is left to the browser — a tab strip pans sideways, and a drag that starts on any touch takes
+ *   the pan away from the gesture people use most. Once the hold fires, a non-passive `touchmove`
+ *   listener (registered at the press, so the browser waits for it) cancels the scroll for the rest
+ *   of the gesture. 250 ms and 5 px are `pointerDnd.ts`'s long-press, so a hold means the same thing
+ *   on every draggable surface of the belt.
+ * - **Escape** abandons a drag wherever focus is; nothing is committed.
+ *
+ * ## The picture
+ *
+ * `DragGhost` draws the thing being dragged under the pointer, offset by where it was grabbed, at
+ * the size it had — VS Code's lifted tab. It is `position: fixed`, so a scrolling strip or a pane's
+ * `overflow: hidden` does not clip it, and it ignores the pointer, so `document.elementFromPoint`
+ * still answers with the drop target beneath it. Plain CSS (`pointerDrag.css`), so it draws in an
+ * app with no Tailwind pass.
+ */
+import type { PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+import './pointerDrag.css';
+/** Pixels a mouse or pen travels before a press is a drag. */
+export declare const POINTER_DRAG_SLOP_PX = 5;
+/** How long a finger rests before a touch press is a drag — `pointerDnd.ts`'s long-press. */
+export declare const POINTER_DRAG_HOLD_MS = 250;
+export interface DragPoint {
+    x: number;
+    y: number;
+}
+export interface PointerDragState<T> {
+    item: T;
+    /** Where the pointer is now, in client coordinates. */
+    at: DragPoint;
+    /** Where inside the source element it was grabbed — the ghost keeps that point under the pointer. */
+    grab: DragPoint;
+    /** The source element's size when the press began, so the ghost is the same shape. */
+    width: number;
+    height: number;
+    pointerType: string;
+}
+export interface UsePointerDragOptions<T> {
+    /** Every move once the press has become a drag — where a drop marker is worked out. */
+    onMove?: (state: PointerDragState<T>) => void;
+    /** Released while dragging. */
+    onDrop: (state: PointerDragState<T>) => void;
+    /** Released without ever becoming a drag. */
+    onTap?: (item: T) => void;
+    /** The drag was abandoned — Escape, or the browser took the pointer back. */
+    onCancel?: () => void;
+    slop?: number;
+    holdMs?: number;
+    disabled?: boolean;
+}
+export interface PointerDragBindings {
+    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: ReactPointerEvent<HTMLElement>) => void;
+}
+export declare function usePointerDrag<T>(options: UsePointerDragOptions<T>): {
+    drag: PointerDragState<T> | null;
+    bind: (item: T) => PointerDragBindings;
+};
+export interface DragGhostProps {
+    drag: Pick<PointerDragState<unknown>, 'at' | 'grab' | 'width' | 'height'> | null;
+    children: ReactNode;
+    className?: string;
+}
+/** The dragged thing, lifted and following the pointer. Renders nothing while nothing is dragged. */
+export declare function DragGhost({ drag, children, className }: DragGhostProps): import("react").JSX.Element | null;
+//# sourceMappingURL=PointerDrag.d.ts.map

package/dist/react/components/PointerDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerDrag.d.ts","sourceRoot":"","sources":["../../../src/react/components/PointerDrag.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,EAAiB,YAAY,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,mBAAmB,CAAC;AAE3B,8DAA8D;AAC9D,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,6FAA6F;AAC7F,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,uDAAuD;IACvD,EAAE,EAAE,SAAS,CAAC;IACd,qGAAqG;IACrG,IAAI,EAAE,SAAS,CAAC;IAChB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,uFAAuF;IACvF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC9C,+BAA+B;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAClE;AA8BD,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IACpE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,mBAAmB,CAAC;CACxC,CAoHA;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,IAAI,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qGAAqG;AACrG,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,sCAoBtE"}

package/dist/react/components/PointerDrag.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import './pointerDrag.css';
+/** Pixels a mouse or pen travels before a press is a drag. */
+export const POINTER_DRAG_SLOP_PX = 5;
+/** How long a finger rests before a touch press is a drag — `pointerDnd.ts`'s long-press. */
+export const POINTER_DRAG_HOLD_MS = 250;
+function stateOf(current) {
+    return {
+        item: current.item,
+        at: current.at,
+        grab: current.grab,
+        width: current.width,
+        height: current.height,
+        pointerType: current.pointerType,
+    };
+}
+export function usePointerDrag(options) {
+    const latest = useRef(options);
+    latest.current = options;
+    const press = useRef(null);
+    const [drag, setDrag] = useState(null);
+    /** The non-passive listener that holds the page still once a touch drag is live. */
+    const holdScroll = useCallback((event) => {
+        if (press.current?.live)
+            event.preventDefault();
+    }, []);
+    const finish = useCallback(() => {
+        const current = press.current;
+        press.current = null;
+        if (current?.timer)
+            clearTimeout(current.timer);
+        if (current?.element.hasPointerCapture?.(current.pointerId))
+            current.element.releasePointerCapture(current.pointerId);
+        window.removeEventListener('touchmove', holdScroll);
+        setDrag(null);
+    }, [holdScroll]);
+    const goLive = useCallback((current) => {
+        current.live = true;
+        const state = stateOf(current);
+        setDrag(state);
+        latest.current.onMove?.(state);
+    }, []);
+    // Escape puts everything back, wherever focus is.
+    const live = drag !== null;
+    useEffect(() => {
+        if (!live)
+            return;
+        const onKey = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            finish();
+            latest.current.onCancel?.();
+        };
+        window.addEventListener('keydown', onKey, true);
+        return () => window.removeEventListener('keydown', onKey, true);
+    }, [live, finish]);
+    // A drag in flight when the owner unmounts must not leave a timer or a listener behind.
+    useEffect(() => finish, [finish]);
+    const bind = (item) => ({
+        onPointerDown: (event) => {
+            if (latest.current.disabled || press.current)
+                return;
+            if (event.pointerType === 'mouse' && event.button !== 0)
+                return;
+            const element = event.currentTarget;
+            const box = element.getBoundingClientRect();
+            const at = { x: event.clientX, y: event.clientY };
+            const current = {
+                item,
+                pointerId: event.pointerId,
+                pointerType: event.pointerType,
+                start: at,
+                grab: { x: at.x - box.left, y: at.y - box.top },
+                width: box.width,
+                height: box.height,
+                element,
+                live: false,
+                abandoned: false,
+                timer: null,
+                at,
+            };
+            press.current = current;
+            element.setPointerCapture?.(event.pointerId);
+            if (event.pointerType === 'touch') {
+                window.addEventListener('touchmove', holdScroll, { passive: false });
+                current.timer = setTimeout(() => {
+                    current.timer = null;
+                    if (press.current === current && !current.abandoned)
+                        goLive(current);
+                }, latest.current.holdMs ?? POINTER_DRAG_HOLD_MS);
+            }
+        },
+        onPointerMove: (event) => {
+            const current = press.current;
+            if (!current || current.pointerId !== event.pointerId)
+                return;
+            current.at = { x: event.clientX, y: event.clientY };
+            const travelled = Math.hypot(current.at.x - current.start.x, current.at.y - current.start.y);
+            const slop = latest.current.slop ?? POINTER_DRAG_SLOP_PX;
+            if (!current.live) {
+                if (travelled < slop)
+                    return;
+                if (current.pointerType === 'touch') {
+                    // Moved before the hold: a scroll. Let the browser have it.
+                    current.abandoned = true;
+                    return;
+                }
+                goLive(current);
+                return;
+            }
+            const state = stateOf(current);
+            setDrag(state);
+            latest.current.onMove?.(state);
+        },
+        onPointerUp: (event) => {
+            const current = press.current;
+            if (!current || current.pointerId !== event.pointerId)
+                return;
+            current.at = { x: event.clientX, y: event.clientY };
+            const state = stateOf(current);
+            const { live: wasLive, abandoned } = current;
+            finish();
+            if (wasLive)
+                latest.current.onDrop(state);
+            else if (!abandoned)
+                latest.current.onTap?.(current.item);
+        },
+        onPointerCancel: (event) => {
+            const current = press.current;
+            if (!current || current.pointerId !== event.pointerId)
+                return;
+            const wasLive = current.live;
+            finish();
+            if (wasLive)
+                latest.current.onCancel?.();
+        },
+    });
+    return { drag, bind };
+}
+/** The dragged thing, lifted and following the pointer. Renders nothing while nothing is dragged. */
+export function DragGhost({ drag, children, className }) {
+    if (!drag)
+        return null;
+    return (_jsx("div", { "aria-hidden": true, className: className ? `cb-dragghost ${className}` : 'cb-dragghost', "data-testid": "drag-ghost", 
+        // Custom properties only — `pointerDrag.css` turns them into the box, the offset and the band.
+        style: {
+            '--cb-dragghost-x': `${drag.at.x - drag.grab.x}px`,
+            '--cb-dragghost-y': `${drag.at.y - drag.grab.y}px`,
+            '--cb-dragghost-w': `${drag.width}px`,
+            '--cb-dragghost-h': `${drag.height}px`,
+        }, children: children }));
+}
+//# sourceMappingURL=PointerDrag.js.map

package/dist/react/components/PointerDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerDrag.js","sourceRoot":"","sources":["../../../src/react/components/PointerDrag.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/paneSplit.css

@@ -0,0 +1,93 @@
+/*
+ * PaneSplit's look, as plain CSS — so it draws in an app with NO Tailwind pass (desk), the way
+ * `sheetTabStrip.css` travels. Prefix `cb-panesplit`. `@layer base` for that file's reason.
+ *
+ * VS Code's picture: panes meet edge to edge and one 1px line separates them. The seam's track is
+ * wider than the line for the hand (`--cb-panesplit-reach`, 5px), painted the panes' own ground so
+ * only the line reads; on hover or keyboard focus the line thickens to the accent, as VS Code's sash
+ * does.
+ *
+ * Knobs:
+ *   --cb-panesplit-ground  what the seam's track is painted — set it to the panes' background
+ *   --cb-panesplit-line    the hairline's colour (default `--border`)
+ *   --cb-panesplit-reach   the seam's track, the size of the hit area (default 5px)
+ *   --cb-panesplit-active  the line on hover and focus (default `--ring`)
+ */
+
+@layer base {
+	.cb-panesplit {
+		display: flex;
+		flex: 1 1 auto;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.cb-panesplit[data-direction='row'] {
+		flex-direction: row;
+	}
+
+	.cb-panesplit[data-direction='column'] {
+		flex-direction: column;
+	}
+
+	/* `flex-basis: 0` with the share as the grow factor, never a percentage width: a percentage would
+	   have to account for the seams' own pixels, so a row of four panes would drift wider than its
+	   frame. The share arrives as `--cb-panesplit-share`. */
+	.cb-panesplit__cell {
+		flex: var(--cb-panesplit-share, 1) 1 0;
+		display: flex;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.cb-panesplit__seam {
+		flex: 0 0 auto;
+		position: relative;
+		background: var(--cb-panesplit-ground, transparent);
+		touch-action: none;
+	}
+
+	.cb-panesplit[data-direction='row'] > .cb-panesplit__seam {
+		width: var(--cb-panesplit-reach, 5px);
+		cursor: col-resize;
+	}
+
+	.cb-panesplit[data-direction='column'] > .cb-panesplit__seam {
+		height: var(--cb-panesplit-reach, 5px);
+		cursor: row-resize;
+	}
+
+	/* The hairline, down the middle of the track. */
+	.cb-panesplit__seam::after {
+		content: '';
+		position: absolute;
+		background: var(--cb-panesplit-line, var(--border));
+		transition: background 120ms ease;
+	}
+
+	.cb-panesplit[data-direction='row'] > .cb-panesplit__seam::after {
+		inset: 0 auto 0 calc(50% - 0.5px);
+		width: 1px;
+	}
+
+	.cb-panesplit[data-direction='column'] > .cb-panesplit__seam::after {
+		inset: calc(50% - 0.5px) 0 auto 0;
+		height: 1px;
+	}
+
+	.cb-panesplit[data-direction='row'] > .cb-panesplit__seam:is(:hover, :focus-visible)::after {
+		left: calc(50% - 1.5px);
+		width: 3px;
+		background: var(--cb-panesplit-active, var(--ring));
+	}
+
+	.cb-panesplit[data-direction='column'] > .cb-panesplit__seam:is(:hover, :focus-visible)::after {
+		top: calc(50% - 1.5px);
+		height: 3px;
+		background: var(--cb-panesplit-active, var(--ring));
+	}
+
+	.cb-panesplit__seam:focus-visible {
+		outline: none;
+	}
+}

package/dist/react/components/pointerDrag.css

@@ -0,0 +1,39 @@
+/*
+ * DragGhost's look, as plain CSS — so it draws in an app with NO Tailwind pass (desk), the way
+ * `sheetTabStrip.css` travels. Prefix `cb-dragghost`. `@layer base` for that file's reason: an app's
+ * own rule for the ghost's class still wins.
+ *
+ * The lifted tab: the surface it came from, a hairline and a soft shadow, slightly translucent so
+ * the drop marker underneath stays readable. Square corners — a tab is square in VS Code, and the
+ * ghost is the tab.
+ *
+ * It rides the popover band (06 §1), as useCrossContainerDrag's ghost does. 🔴 Every `var()` read here
+ * has a fallback or a theme token behind it: an app's built stylesheet must define whatever it reads
+ * bare (desk's `belt-tokens.test.ts`), and a name only an inline style sets is not defined there.
+ */
+
+@layer base {
+	.cb-dragghost {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: var(--cb-dragghost-w, auto);
+		height: var(--cb-dragghost-h, auto);
+		transform: translate3d(var(--cb-dragghost-x, 0), var(--cb-dragghost-y, 0), 0);
+		z-index: var(--z-popover, 1100);
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		overflow: hidden;
+		pointer-events: none;
+		white-space: nowrap;
+		color: var(--foreground);
+		background: var(--popover, var(--background));
+		border: 1px solid var(--border);
+		box-shadow: var(--shadow-popover);
+		opacity: 0.92;
+		cursor: grabbing;
+		will-change: transform;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.58.0",
+	"version": "5.59.0",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -30,7 +30,9 @@
 			"./react/media-gallery",
 			"./react/media/player-strip",
 			"./react/media/video-player",
+			"./react/pane-split",
 			"./react/pdf-viewer",
+			"./react/pointer-drag",
 			"./react/rich-text",
 			"./react/search-input",
 			"./react/sheet-tab-strip",
@@ -546,6 +548,18 @@
 			"source": "./src/react/sharing/index.ts",
 			"import": "./dist/react/sharing/index.js"
 		},
+		"./react/pane-split": {
+			"types": "./dist/react/components/PaneSplit.d.ts",
+			"bun": "./src/react/components/PaneSplit.tsx",
+			"source": "./src/react/components/PaneSplit.tsx",
+			"import": "./dist/react/components/PaneSplit.js"
+		},
+		"./react/pointer-drag": {
+			"types": "./dist/react/components/PointerDrag.d.ts",
+			"bun": "./src/react/components/PointerDrag.tsx",
+			"source": "./src/react/components/PointerDrag.tsx",
+			"import": "./dist/react/components/PointerDrag.js"
+		},
 		"./react/sheet-tab-strip": {
 			"types": "./dist/react/components/SheetTabStrip.d.ts",
 			"bun": "./src/react/components/SheetTabStrip.tsx",

package/scripts/styleAreas.ts

@@ -389,6 +389,9 @@ export const AREAS: readonly Area[] = [
 			'components/SheetTabStrip.tsx',
 			'components/sheetTabStripLogic.ts',
 			'components/SplitPane.tsx',
+			// An app-owned pane tree and the visible tab drag (desk-split-pane-tab-dragging) — plain CSS both.
+			'components/PaneSplit.tsx',
+			'components/PointerDrag.tsx',
 			'components/WidgetHeader.tsx',
 			'components/DragHandle.tsx',
 			'components/DropIndicator.tsx',