@bettercms-ai/kit 0.1.0 → 1.0.0

package/ui/floating-panel.js

@@ -0,0 +1,912 @@
+import { cn } from "../lib/cn.js";
+import { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionValue, useReducedMotion } from "framer-motion";
+import { createPortal } from "react-dom";
+//#region src/kit/ui/floating-panel.tsx
+/**
+* FloatingPanel (CPO D54): ONE primitive for every non-modal window over the work surface. It owns drag, magnetic snap,
+* resize and "remember where I put it"; the ⌘J assistant (D30) and the component properties panel both use it.
+*
+*   geometry      track() · snapRect() · <SnapGuides> · <ResizeEdges> (4 edges + 4 corners) · <ResizeGrip> (keyboard)
+*                 (the low-level pieces, shared with the assistant's floating window)
+*   <FloatingPanel>  a small properties window anchored to the thing it edits:
+*     float  (≥768 with a mouse) docks in the editor column's right gutter (≥356px), else the left gutter, else it
+*            overlays the right edge; avoids a floating assistant, the Publish tray and the 56px navbar. While docked
+*            it follows the anchor's top (sticky between 72px from the top and 16px from the bottom); once dragged it
+*            stays where it was put. 340 × auto (≤560), resizable 300×240 … 520 × (viewport − 96). Header = drag
+*            handle; double-click resets it to its docked default. Side, offset and size persist per user and per
+*            width bucket (≥1280 · 768–1279).
+*     side   (768–1279 on touch) a 340px right sheet, no scrim.
+*     sheet  (<768) a bottom sheet, 50% or 90% tall; drag the grabber down to close.
+*     modal  inside a D49 ExpandedEditorModal (`container`): docked into the modal's right 340px (the reading column
+*            shifts left), or over the modal's edge when it is narrow.
+*   Non-modal: `role="dialog"` + `aria-modal="false"`, no focus trap, outside clicks never close it. Esc closes (menus,
+*   pickers and field drafts first), F6 moves focus between the panel and `focusBack()`. Marked `data-floating-layer`.
+*   Layering: canvas toolbars < panel 52 (= the D30 window) < sheets 55 < dialogs 60 < menus 80 < tooltips 90.
+*/
+var SHADOW_SHEET_R = "shadow-[-12px_0_32px_-16px_rgb(0_0_0/0.18)] [.dark_&]:shadow-[-12px_0_32px_-16px_oklch(0.12_0.01_286/0.5)]";
+var SHADOW_SHEET_B = "shadow-[0_-16px_40px_-12px_rgb(0_0_0/0.2)] [.dark_&]:shadow-[0_-16px_40px_-12px_oklch(0.12_0.01_286/0.5)]";
+var Z_FLOAT = "z-[52]";
+var EASE = [
+	.32,
+	.72,
+	0,
+	1
+];
+var NO_GUIDES = {
+	v: [],
+	h: []
+};
+var vw = () => window.innerWidth;
+var vh = () => window.innerHeight;
+var clampN = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+/** Clamp to the viewport, then pull any edge within SNAP px of a line onto it (the nearest wins). */
+function snapRect(x, y, w, h, lines, b) {
+	let nx = clampN(x, b.pad, Math.max(b.pad, vw() - w - b.pad));
+	let ny = clampN(y, b.top, Math.max(b.top, vh() - h - b.pad));
+	const g = {
+		v: [],
+		h: []
+	};
+	let best = 17;
+	let gx = null;
+	let sx = nx;
+	for (const L of lines.v) {
+		const a = Math.abs(nx - L);
+		if (a <= 16 && a < best) best = a, sx = L, gx = L - 1;
+		const z = Math.abs(nx + w - L);
+		if (z <= 16 && z < best) best = z, sx = L - w, gx = L;
+	}
+	nx = sx;
+	if (gx != null) g.v.push(gx);
+	best = 17;
+	let gy = null;
+	let sy = ny;
+	for (const L of lines.h) {
+		const a = Math.abs(ny - L);
+		if (a <= 16 && a < best) best = a, sy = L, gy = L - 1;
+		const z = Math.abs(ny + h - L);
+		if (z <= 16 && z < best) best = z, sy = L - h, gy = L;
+	}
+	ny = sy;
+	if (gy != null) g.h.push(gy);
+	return {
+		x: nx,
+		y: ny,
+		g
+	};
+}
+/** Runs a pointer drag on window-level listeners (works from any handle, survives leaving the element). */
+function track(e, onMove, onEnd, cursor) {
+	const sx = e.clientX;
+	const sy = e.clientY;
+	let moved = false;
+	if (cursor) document.body.style.cursor = cursor;
+	document.body.style.userSelect = "none";
+	const move = (ev) => {
+		const dx = ev.clientX - sx;
+		const dy = ev.clientY - sy;
+		if (!moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+		moved = true;
+		onMove(dx, dy);
+	};
+	const up = () => {
+		window.removeEventListener("pointermove", move);
+		window.removeEventListener("pointerup", up);
+		window.removeEventListener("pointercancel", up);
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+		onEnd(moved);
+	};
+	window.addEventListener("pointermove", move);
+	window.addEventListener("pointerup", up);
+	window.addEventListener("pointercancel", up);
+}
+/** Magnetic guides: a 1px hairline along each line the window is snapped to. */
+function SnapGuides({ guides }) {
+	const line = cn("pointer-events-none fixed bg-[var(--kit-brand)]", Z_FLOAT);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [guides.v.map((p) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: line,
+		style: {
+			left: p,
+			top: 8,
+			bottom: 8,
+			width: 1
+		}
+	}, `v${p}`)), guides.h.map((p) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: line,
+		style: {
+			top: p,
+			left: 8,
+			right: 8,
+			height: 1
+		}
+	}, `h${p}`))] });
+}
+var HANDLES = [
+	{
+		d: "n",
+		cls: "inset-x-3 top-0 h-1.5",
+		cursor: "ns-resize"
+	},
+	{
+		d: "s",
+		cls: "inset-x-3 bottom-0 h-1.5",
+		cursor: "ns-resize"
+	},
+	{
+		d: "w",
+		cls: "inset-y-3 left-0 w-1.5",
+		cursor: "ew-resize"
+	},
+	{
+		d: "e",
+		cls: "inset-y-3 right-0 w-1.5",
+		cursor: "ew-resize"
+	},
+	{
+		d: "nw",
+		cls: "left-0 top-0 size-3",
+		cursor: "nwse-resize"
+	},
+	{
+		d: "se",
+		cls: "bottom-0 right-0 size-3",
+		cursor: "nwse-resize"
+	},
+	{
+		d: "ne",
+		cls: "right-0 top-0 size-3",
+		cursor: "nesw-resize"
+	},
+	{
+		d: "sw",
+		cls: "bottom-0 left-0 size-3",
+		cursor: "nesw-resize"
+	}
+];
+/** Resize from 4 edges and 4 corners. `onStart` runs before the first read (e.g. turn an auto height into a number). */
+function ResizeEdges({ geom, bounds, onStart, onEnd }) {
+	const { x, y, w, h } = geom;
+	return /* @__PURE__ */ jsx(Fragment, { children: HANDLES.map((hd) => /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		style: { cursor: hd.cursor },
+		className: cn("absolute z-30 touch-none", hd.cls),
+		onPointerDown: (e) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			e.stopPropagation();
+			onStart?.();
+			const o = {
+				x: x.get(),
+				y: y.get(),
+				w: w.get(),
+				h: h.get()
+			};
+			const maxW = bounds.maxW();
+			const maxH = bounds.maxH();
+			track(e, (dx, dy) => {
+				let nw = o.w;
+				let nh = o.h;
+				if (hd.d.includes("e")) nw = o.w + dx;
+				if (hd.d.includes("w")) nw = o.w - dx;
+				if (hd.d.includes("s")) nh = o.h + dy;
+				if (hd.d.includes("n")) nh = o.h - dy;
+				nw = clampN(nw, bounds.minW, maxW);
+				nh = clampN(nh, bounds.minH, maxH);
+				const nx = clampN(hd.d.includes("w") ? o.x + o.w - nw : o.x, bounds.pad, vw() - nw - bounds.pad);
+				const ny = clampN(hd.d.includes("n") ? o.y + o.h - nh : o.y, bounds.top, vh() - nh - bounds.pad);
+				x.set(nx);
+				y.set(ny);
+				w.set(nw);
+				h.set(nh);
+			}, (moved) => moved && onEnd(hd.d), hd.cursor);
+		}
+	}, hd.d)) });
+}
+/** Keyboard resize: a focusable grip (role="separator"). ←/→ width, ↑/↓ height (±16, Shift ±64); grows toward the open side. */
+function ResizeGrip({ geom, bounds, label, onStart, onEnd, className }) {
+	const { x, y, w, h } = geom;
+	const [size, setSize] = React.useState(() => ({
+		w: Math.round(w.get()),
+		h: Math.round(h.get())
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-valuetext": `${size.w} by ${size.h} pixels`,
+		"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
+		onFocus: () => setSize({
+			w: Math.round(w.get()),
+			h: Math.round(h.get())
+		}),
+		onKeyDown: (e) => {
+			const step = e.shiftKey ? 64 : 16;
+			const dw = e.key === "ArrowRight" ? step : e.key === "ArrowLeft" ? -step : 0;
+			const dh = e.key === "ArrowDown" ? step : e.key === "ArrowUp" ? -step : 0;
+			if (!dw && !dh) return;
+			e.preventDefault();
+			e.stopPropagation();
+			onStart?.();
+			const nw = clampN(w.get() + dw, bounds.minW, bounds.maxW());
+			const nh = clampN(h.get() + dh, bounds.minH, bounds.maxH());
+			x.set(clampN(x.get(), bounds.pad, Math.max(bounds.pad, vw() - nw - bounds.pad)));
+			y.set(clampN(y.get(), bounds.top, Math.max(bounds.top, vh() - nh - bounds.pad)));
+			w.set(nw);
+			h.set(nh);
+			setSize({
+				w: Math.round(nw),
+				h: Math.round(nh)
+			});
+			onEnd();
+		},
+		className: cn("group/kgrip pointer-events-none absolute bottom-0.5 right-0.5 z-40 flex size-4 items-end justify-end rounded-kit-sm outline-none", className),
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": true,
+			viewBox: "0 0 10 10",
+			className: "size-2.5 text-kit-fg-4 opacity-0 transition-opacity group-focus-visible/kgrip:opacity-100",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M9 3 3 9M9 6 6 9",
+				stroke: "currentColor",
+				strokeWidth: "1.2",
+				strokeLinecap: "round"
+			})
+		})
+	});
+}
+var PREFS_KEY = "bcms-kit-floating-panel";
+var prefListeners = /* @__PURE__ */ new Set();
+function readPrefs() {
+	try {
+		const raw = typeof localStorage === "undefined" ? null : localStorage.getItem(PREFS_KEY);
+		const parsed = raw ? JSON.parse(raw) : null;
+		return parsed && typeof parsed === "object" ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+var prefState = {
+	prefs: readPrefs(),
+	patch: (key, p) => {
+		const next = p === null ? {} : {
+			...prefState.prefs[key],
+			...p
+		};
+		for (const k of Object.keys(next)) if (next[k] === void 0) delete next[k];
+		prefState.prefs = {
+			...prefState.prefs,
+			[key]: next
+		};
+		try {
+			localStorage.setItem(PREFS_KEY, JSON.stringify(prefState.prefs));
+		} catch {}
+		prefListeners.forEach((l) => l());
+	}
+};
+var subscribePrefs = (l) => {
+	prefListeners.add(l);
+	return () => prefListeners.delete(l);
+};
+/** Read the remembered placements with a selector; `useFloatingPanelPrefs.getState()` for imperative reads and writes. */
+function useFloatingPanelPrefs(select) {
+	return React.useSyncExternalStore(subscribePrefs, () => select(prefState), () => select(prefState));
+}
+useFloatingPanelPrefs.getState = () => prefState;
+var bucketNow = () => vw() >= 1280 ? "wide" : "mid";
+function useMedia(q) {
+	const [ok, setOk] = React.useState(() => typeof window !== "undefined" && window.matchMedia(q).matches);
+	React.useEffect(() => {
+		const m = window.matchMedia(q);
+		const on = () => setOk(m.matches);
+		on();
+		m.addEventListener("change", on);
+		return () => m.removeEventListener("change", on);
+	}, [q]);
+	return ok;
+}
+/** How a panel presents at this width and pointer: float · side (tablet touch) · sheet (phones) · modal (inside a D49 modal). */
+function usePanelMode(inModal) {
+	const phone = useMedia("(max-width: 767px)");
+	const touchTablet = useMedia("(max-width: 1279px) and (pointer: coarse)");
+	if (inModal) return "modal";
+	return phone ? "sheet" : touchTablet ? "side" : "float";
+}
+function scrollParent(el) {
+	let p = el?.parentElement ?? null;
+	while (p && p !== document.body && p !== document.documentElement) {
+		const o = getComputedStyle(p).overflowY;
+		if ((o === "auto" || o === "scroll") && p.scrollHeight > p.clientHeight) return p;
+		p = p.parentElement;
+	}
+	return null;
+}
+/** Things a panel never covers by default: a floating or docked assistant, anything marked `data-floating-avoid`. */
+var AVOID = "#assistant-panel, [data-floating-avoid]";
+/** Right-side panels of the page (the editor's Publishing · History · Comments): the panel takes the other side. */
+var SIDE_PANELS = "[data-doc-settings], [data-side-panel]";
+/** A menu, picker, popover or another dialog is open: it takes Esc first. */
+/** An open Base UI popup (popover, menu, select, combobox): it carries data-open and data-side. Kit tooltips don't count. */
+var POPUP_OPEN = "[data-open][data-side]:not([data-kit-tooltip])";
+var OWNS_ESCAPE = `[role=menu],[role=listbox],[data-cell-editing],${POPUP_OPEN}`;
+function layerOpen(self) {
+	if (document.querySelector(`${POPUP_OPEN}, [data-cell-editing]`)) return true;
+	const floating = (n) => n.getAttribute("role") === "menu" || !!n.closest("[data-floating-layer]:not([data-floating-panel])");
+	if (Array.from(document.querySelectorAll("[role=menu], [role=listbox]")).some((n) => n.getClientRects().length && floating(n))) return true;
+	return Array.from(document.querySelectorAll("[role=dialog]:is([data-open],[data-state=open])")).some((d) => d !== self && !d.hasAttribute("data-expanded-editor") && !d.hasAttribute("data-floating-panel") && d.id !== "assistant-panel" && !d.hasAttribute("data-doc-panel"));
+}
+var FOCUSABLE = "input:not([type=hidden]):not([disabled]), textarea:not([disabled]), [contenteditable=true], select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
+/** Events from the panel never reach the React tree it was rendered from (the card, the editor around it). */
+var stop = (e) => e.stopPropagation();
+var FENCE = {
+	onFocus: stop,
+	onBlur: stop,
+	onClick: stop,
+	onDoubleClick: stop,
+	onMouseDown: stop,
+	onMouseUp: stop,
+	onMouseMove: stop,
+	onInput: stop,
+	onPaste: stop,
+	onCut: stop,
+	onCopy: stop,
+	onKeyUp: stop,
+	onContextMenu: stop
+};
+var PANEL_MAX_AUTO_H = 560;
+var TOP_LIMIT = 72;
+var BOTTOM_GAP = 16;
+var FLOAT_BOUNDS = {
+	minW: 300,
+	minH: 240,
+	maxW: () => Math.min(520, vw() - 32),
+	maxH: () => vh() - 96,
+	top: 60,
+	pad: 8
+};
+var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, anchor, container, header, children, sheetFooter, onClose, focusBack, instant, bodyClassName, onPanelKeyDown }, handle) {
+	const reduce = useReducedMotion();
+	const mode = usePanelMode(!!container);
+	const root = React.useRef(null);
+	const live = React.useRef(null);
+	const [bucket, setBucket] = React.useState(bucketNow);
+	const key = `${id}:${bucket}`;
+	const pref = useFloatingPanelPrefs((s) => s.prefs[key]) ?? EMPTY;
+	const patch = (p) => {
+		useFloatingPanelPrefs.getState().patch(key, p);
+		prefRef.current = useFloatingPanelPrefs.getState().prefs[key] ?? EMPTY;
+	};
+	const x = useMotionValue(-9999);
+	const y = useMotionValue(-9999);
+	const w = useMotionValue(pref.w ?? 340);
+	const h = useMotionValue(pref.h ?? 0);
+	const geom = React.useMemo(() => ({
+		x,
+		y,
+		w,
+		h
+	}), [
+		x,
+		y,
+		w,
+		h
+	]);
+	const [explicitH, setExplicitH] = React.useState(!!pref.h);
+	const [maxAuto, setMaxAuto] = React.useState(PANEL_MAX_AUTO_H);
+	const [guides, setGuides] = React.useState(NO_GUIDES);
+	const [kbd, setKbd] = React.useState(null);
+	const [sheetH, setSheetH] = React.useState(50);
+	const busy = React.useRef(false);
+	const prefRef = React.useRef(pref);
+	prefRef.current = pref;
+	const kbdRef = React.useRef(kbd);
+	kbdRef.current = kbd;
+	const closeRef = React.useRef(onClose);
+	closeRef.current = onClose;
+	const backRef = React.useRef(focusBack);
+	backRef.current = focusBack;
+	React.useEffect(() => {
+		const on = () => setBucket(bucketNow());
+		window.addEventListener("resize", on);
+		return () => window.removeEventListener("resize", on);
+	}, []);
+	React.useEffect(() => {
+		w.set(pref.w ?? 340);
+		setExplicitH(!!pref.h);
+		if (pref.h) h.set(pref.h);
+	}, [key]);
+	const column = React.useCallback(() => (anchor?.closest("[data-rt-editor]") ?? anchor)?.getBoundingClientRect() ?? null, [anchor]);
+	/** Where the panel sits now (float mode): its remembered spot, or docked beside the column, following the anchor. */
+	const layout = React.useCallback(() => {
+		const el = root.current;
+		if (!el || !anchor || mode !== "float" || busy.current || kbdRef.current) return;
+		const p = prefRef.current;
+		const sc = scrollParent(anchor)?.getBoundingClientRect();
+		const top = Math.max(TOP_LIMIT, (sc?.top ?? 0) + 8);
+		let bottom = vh() - BOTTOM_GAP;
+		const tray = document.querySelector("[data-action-tray]")?.getBoundingClientRect();
+		if (tray && tray.height && tray.top > top + 240) bottom = Math.min(bottom, tray.top - 8);
+		if (sc && sc.bottom > top + 240) bottom = Math.min(bottom, sc.bottom - 8);
+		const room = Math.max(FLOAT_BOUNDS.minH, bottom - top);
+		const nextMax = Math.min(PANEL_MAX_AUTO_H, room);
+		setMaxAuto((m) => m === nextMax ? m : nextMax);
+		const ww = w.get();
+		const ph = Math.min(el.offsetHeight || 320, room);
+		if (p.pos) {
+			x.set(clampN(p.pos.x, 8, Math.max(8, vw() - ww - 8)));
+			y.set(clampN(p.pos.y, 60, Math.max(60, vh() - ph - 8)));
+			return;
+		}
+		const col = column();
+		const a = anchor.getBoundingClientRect();
+		if (!col) return;
+		let L = Math.max(8, sc?.left ?? 0);
+		let R = Math.min(vw() - 8, sc?.right ?? vw());
+		for (const o of Array.from(document.querySelectorAll(AVOID))) {
+			if (o === el || el.contains(o)) continue;
+			const r = o.getBoundingClientRect();
+			if (!r.width || !r.height || r.bottom < top || r.top > bottom) continue;
+			if (r.left + r.width / 2 < col.left + col.width / 2) L = Math.max(L, r.right);
+			else R = Math.min(R, r.left);
+		}
+		const need = ww + 16;
+		const fits = {
+			right: R - col.right >= need,
+			left: col.left - L >= need
+		};
+		const rightBusy = Array.from(document.querySelectorAll(SIDE_PANELS)).some((n) => n.getBoundingClientRect().width > 40);
+		const nx = (p.side ?? (rightBusy ? "left" : fits.right ? "right" : fits.left ? "left" : "right")) === "right" ? fits.right ? col.right + 16 : R - ww - 8 : fits.left ? col.left - 16 - ww : L + 8;
+		x.set(clampN(nx, 8, Math.max(8, vw() - ww - 8)));
+		y.set(clampN(a.top, top, Math.max(top, bottom - ph)));
+	}, [
+		anchor,
+		mode,
+		column,
+		w,
+		x,
+		y
+	]);
+	React.useLayoutEffect(() => {
+		layout();
+	}, [
+		layout,
+		pref.pos,
+		pref.side,
+		pref.w,
+		explicitH
+	]);
+	React.useEffect(() => {
+		if (mode !== "float") return;
+		let raf = 0;
+		let settle = 0;
+		const on = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(layout);
+			window.clearTimeout(settle);
+			settle = window.setTimeout(layout, 320);
+		};
+		window.addEventListener("scroll", on, true);
+		window.addEventListener("resize", on);
+		window.addEventListener("pointerup", on);
+		const ro = new ResizeObserver(on);
+		if (root.current) ro.observe(root.current);
+		if (anchor) ro.observe(anchor);
+		const sc = scrollParent(anchor);
+		if (sc) ro.observe(sc);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.clearTimeout(settle);
+			window.removeEventListener("scroll", on, true);
+			window.removeEventListener("resize", on);
+			window.removeEventListener("pointerup", on);
+			ro.disconnect();
+		};
+	}, [
+		mode,
+		layout,
+		anchor
+	]);
+	const [modalFit, setModalFit] = React.useState("dock");
+	React.useLayoutEffect(() => {
+		if (mode !== "modal" || !container) return;
+		const fit = () => {
+			const cw = container.clientWidth;
+			const next = cw < 560 ? "bottom" : cw >= 1020 ? "dock" : "overlay";
+			setModalFit(next);
+			if (next === "dock") container.setAttribute("data-floating-dock", "right");
+			else container.removeAttribute("data-floating-dock");
+		};
+		fit();
+		const ro = new ResizeObserver(fit);
+		ro.observe(container);
+		return () => {
+			ro.disconnect();
+			container.removeAttribute("data-floating-dock");
+		};
+	}, [mode, container]);
+	const toExplicit = () => {
+		if (explicitH || !root.current) return;
+		h.set(root.current.offsetHeight);
+		setExplicitH(true);
+	};
+	const say = (text) => {
+		const el = live.current;
+		if (!el) return;
+		el.textContent = "";
+		window.setTimeout(() => {
+			if (live.current) live.current.textContent = text;
+		}, 60);
+	};
+	const reset = () => {
+		patch(null);
+		setExplicitH(false);
+		w.set(340);
+	};
+	React.useImperativeHandle(handle, () => ({
+		dock: (side) => patch({
+			side,
+			pos: void 0
+		}),
+		reset,
+		keyboard: (m) => {
+			if (mode !== "float") return;
+			if (m === "resize") toExplicit();
+			setKbd({
+				mode: m,
+				start: {
+					x: x.get(),
+					y: y.get(),
+					w: w.get(),
+					h: root.current?.offsetHeight ?? h.get()
+				},
+				explicit: explicitH
+			});
+			window.setTimeout(() => root.current?.focus({ preventScroll: true }), 80);
+			say(m === "move" ? "Moving the panel. Arrow keys move it, Enter keeps it there, Escape cancels." : "Resizing the panel. Arrow keys resize it, Enter keeps the size, Escape cancels.");
+		},
+		announce: say,
+		el: () => root.current
+	}));
+	/** Esc: keyboard mode cancels first, then the panel closes and focus goes back to the card. */
+	const escape = React.useCallback(() => {
+		const k = kbdRef.current;
+		if (k) {
+			x.set(k.start.x);
+			y.set(k.start.y);
+			w.set(k.start.w);
+			if (!k.explicit) setExplicitH(false);
+			else h.set(k.start.h);
+			setKbd(null);
+			say("Cancelled");
+			return;
+		}
+		closeRef.current();
+		backRef.current?.();
+	}, [
+		x,
+		y,
+		w,
+		h
+	]);
+	React.useEffect(() => {
+		const el = root.current;
+		const onKey = (e) => {
+			if (el?.contains(e.target)) return;
+			if (e.key === "F6") {
+				e.preventDefault();
+				(Array.from(el?.querySelectorAll(`[data-panel-body] :is(${FOCUSABLE})`) ?? []).find((n) => n.getClientRects().length) ?? el)?.focus({ preventScroll: true });
+				return;
+			}
+			if (e.key !== "Escape" || e.defaultPrevented || layerOpen(el)) return;
+			if (!container && document.querySelector("[data-expanded-editor]")) return;
+			e.preventDefault();
+			escape();
+		};
+		const onForward = () => escape();
+		window.addEventListener("keydown", onKey);
+		el?.addEventListener("floatingpanel:escape", onForward);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			el?.removeEventListener("floatingpanel:escape", onForward);
+		};
+	}, [container, escape]);
+	const keyRef = React.useRef(() => {});
+	keyRef.current = (e) => {
+		const native = e;
+		onPanelKeyDown?.(e);
+		const k = kbdRef.current;
+		if (k) {
+			const step = e.shiftKey ? 64 : 16;
+			const dx = e.key === "ArrowRight" ? step : e.key === "ArrowLeft" ? -step : 0;
+			const dy = e.key === "ArrowDown" ? step : e.key === "ArrowUp" ? -step : 0;
+			if (dx || dy) {
+				e.preventDefault();
+				if (k.mode === "move") {
+					x.set(clampN(x.get() + dx, 8, vw() - w.get() - 8));
+					y.set(clampN(y.get() + dy, 60, vh() - h.get() - 8));
+				} else {
+					w.set(clampN(w.get() + dx, FLOAT_BOUNDS.minW, FLOAT_BOUNDS.maxW()));
+					h.set(clampN(h.get() + dy, FLOAT_BOUNDS.minH, FLOAT_BOUNDS.maxH()));
+					x.set(clampN(x.get(), 8, vw() - w.get() - 8));
+				}
+				return;
+			}
+			if (e.key === "Enter") {
+				e.preventDefault();
+				patch(k.mode === "move" ? { pos: {
+					x: x.get(),
+					y: y.get()
+				} } : {
+					w: w.get(),
+					h: h.get(),
+					pos: {
+						x: x.get(),
+						y: y.get()
+					}
+				});
+				setKbd(null);
+				say(k.mode === "move" ? "Panel moved" : "Panel resized");
+				return;
+			}
+		}
+		if (e.key === "F6") {
+			e.preventDefault();
+			backRef.current?.();
+		} else if (e.key === "Escape" && !native.bcmsPanelHandled && !e.target.closest?.(OWNS_ESCAPE) && !layerOpen(root.current)) {
+			e.preventDefault();
+			native.bcmsPanelHandled = true;
+			escape();
+		}
+	};
+	React.useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		const on = (e) => keyRef.current(e);
+		el.addEventListener("keydown", on);
+		return () => el.removeEventListener("keydown", on);
+	}, [mode]);
+	const onKeyDown = (e) => {
+		if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() === "z") e.stopPropagation();
+	};
+	const onHeaderDown = (e) => {
+		if (mode !== "float" || e.button !== 0 || e.target.closest("button, a, input, textarea, [role=menuitem], [contenteditable]")) return;
+		e.preventDefault();
+		const ox = x.get();
+		const oy = y.get();
+		const ww = w.get();
+		const hh = root.current?.offsetHeight ?? h.get();
+		const col = column();
+		const lines = {
+			v: [
+				16,
+				vw() - 16,
+				...col ? [col.left, col.right] : []
+			],
+			h: [TOP_LIMIT, vh() - 16]
+		};
+		busy.current = true;
+		track(e, (dx, dy) => {
+			const r = snapRect(ox + dx, oy + dy, ww, hh, lines, FLOAT_BOUNDS);
+			x.set(r.x);
+			y.set(r.y);
+			setGuides((g) => g.v.join() === r.g.v.join() && g.h.join() === r.g.h.join() ? g : r.g);
+		}, (moved) => {
+			busy.current = false;
+			setGuides(NO_GUIDES);
+			if (moved) patch({ pos: {
+				x: x.get(),
+				y: y.get()
+			} });
+		}, "grabbing");
+	};
+	const headerEl = /* @__PURE__ */ jsx("div", {
+		"data-panel-header": "",
+		onPointerDown: onHeaderDown,
+		onDoubleClick: (e) => {
+			if (mode !== "float" || e.target.closest("button, a, input, [role=menuitem]")) return;
+			reset();
+		},
+		className: cn("flex h-10 shrink-0 items-center gap-1 border-b border-kit-line-subtle pl-3 pr-1.5", mode === "float" && "cursor-grab touch-none select-none active:cursor-grabbing"),
+		children: header
+	});
+	const body = /* @__PURE__ */ jsx("div", {
+		"data-panel-body": "",
+		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain", bodyClassName),
+		children
+	});
+	const liveEl = /* @__PURE__ */ jsx("div", {
+		ref: live,
+		"aria-live": "polite",
+		className: "sr-only"
+	});
+	const common = {
+		ref: root,
+		role: "dialog",
+		"aria-modal": false,
+		"aria-labelledby": labelledBy,
+		tabIndex: -1,
+		...KIT_SCOPE,
+		"data-floating-layer": "",
+		"data-floating-panel": "",
+		"data-state": "open",
+		"data-kbd": kbd ? kbd.mode : void 0,
+		onKeyDown,
+		...FENCE
+	};
+	const fade = reduce || instant ? { duration: 0 } : {
+		duration: .16,
+		ease: EASE
+	};
+	let node;
+	if (mode === "sheet") node = /* @__PURE__ */ jsxs(motion.div, {
+		...common,
+		initial: { y: reduce || instant ? 0 : "100%" },
+		animate: { y: 0 },
+		transition: reduce || instant ? { duration: 0 } : {
+			duration: .24,
+			ease: EASE
+		},
+		style: { height: `${sheetH}dvh` },
+		className: cn("fixed inset-x-0 bottom-0 z-[55] flex flex-col overflow-hidden rounded-t-kit-xl border-t border-kit-line pb-[env(safe-area-inset-bottom)] text-kit-fg outline-none", SURFACE_RAISED, SHADOW_SHEET_B),
+		children: [
+			/* @__PURE__ */ jsx(SheetGrabber, {
+				height: sheetH,
+				onHeight: setSheetH,
+				onClose: () => escape()
+			}),
+			headerEl,
+			body,
+			sheetFooter ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 justify-end border-t border-kit-line-subtle px-3 py-2",
+				children: sheetFooter
+			}) : null,
+			liveEl
+		]
+	});
+	else if (mode === "side") node = /* @__PURE__ */ jsxs(motion.div, {
+		...common,
+		initial: { x: reduce || instant ? 0 : "100%" },
+		animate: { x: 0 },
+		transition: reduce || instant ? { duration: 0 } : {
+			duration: .22,
+			ease: EASE
+		},
+		style: {
+			width: 340,
+			top: 56
+		},
+		className: cn("fixed bottom-0 right-0 z-[55] flex flex-col border-l border-kit-line text-kit-fg outline-none", SURFACE_RAISED, SHADOW_SHEET_R),
+		children: [
+			headerEl,
+			body,
+			liveEl
+		]
+	});
+	else if (mode === "modal") node = /* @__PURE__ */ jsxs(motion.div, {
+		...common,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		transition: fade,
+		style: modalFit === "dock" ? {
+			width: 340,
+			top: 48,
+			right: 0,
+			bottom: 0
+		} : modalFit === "overlay" ? {
+			width: 340,
+			top: 56,
+			right: 8,
+			bottom: 8
+		} : {
+			left: 0,
+			right: 0,
+			bottom: 0,
+			height: "55%"
+		},
+		className: cn("absolute z-[20] flex flex-col overflow-hidden text-kit-fg outline-none", SURFACE_RAISED, modalFit === "dock" ? "border-l border-kit-line" : modalFit === "overlay" ? cn("rounded-kit-xl border shadow-kit-lg", FLOATING_LINE) : cn("rounded-t-kit-xl border-t border-kit-line", SHADOW_SHEET_B)),
+		children: [
+			headerEl,
+			body,
+			liveEl
+		]
+	});
+	else node = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SnapGuides, { guides }), /* @__PURE__ */ jsxs(motion.div, {
+		...common,
+		style: {
+			x,
+			y,
+			width: w,
+			height: explicitH ? h : void 0,
+			maxHeight: explicitH ? void 0 : maxAuto,
+			left: 0,
+			top: 0
+		},
+		initial: {
+			opacity: 0,
+			scale: reduce || instant ? 1 : .98
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		transition: fade,
+		className: cn("fixed flex flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none", SURFACE_RAISED, kbd ? "border-dashed border-[var(--kit-emphasis-line)]" : FLOATING_LINE, Z_FLOAT),
+		children: [
+			/* @__PURE__ */ jsx(ResizeEdges, {
+				geom,
+				bounds: FLOAT_BOUNDS,
+				onStart: () => {
+					busy.current = true;
+					toExplicit();
+				},
+				onEnd: (dir) => {
+					busy.current = false;
+					const moved = dir.includes("w") || dir.includes("n") || !!prefRef.current.pos;
+					patch({
+						w: w.get(),
+						h: h.get(),
+						...moved ? { pos: {
+							x: x.get(),
+							y: y.get()
+						} } : {}
+					});
+				}
+			}),
+			headerEl,
+			body,
+			/* @__PURE__ */ jsx(ResizeGrip, {
+				geom,
+				bounds: FLOAT_BOUNDS,
+				label: "Resize panel",
+				onStart: toExplicit,
+				onEnd: () => patch({
+					w: w.get(),
+					h: h.get(),
+					pos: {
+						x: x.get(),
+						y: y.get()
+					}
+				})
+			}),
+			liveEl
+		]
+	})] });
+	return createPortal(node, container ?? document.body);
+});
+var EMPTY = {};
+/** Bottom-sheet grabber: drag down to close, up for 90%; a tap toggles 50% ↔ 90%. */
+function SheetGrabber({ height, onHeight, onClose }) {
+	const dy = React.useRef(0);
+	const dragged = React.useRef(false);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": height === 50 ? "Expand panel" : "Shrink panel",
+		onPointerDown: (e) => {
+			dy.current = 0;
+			dragged.current = false;
+			track(e, (_dx, d) => {
+				dy.current = d;
+				dragged.current = true;
+			}, (moved) => {
+				if (!moved) return;
+				if (dy.current > 80) onClose();
+				else if (dy.current < -40) onHeight(90);
+				else if (dy.current > 40 && height === 90) onHeight(50);
+			});
+		},
+		onClick: () => {
+			if (dragged.current) return void (dragged.current = false);
+			onHeight(height === 50 ? 90 : 50);
+		},
+		className: "flex h-5 w-full shrink-0 touch-none items-center justify-center",
+		children: /* @__PURE__ */ jsx("span", { className: "h-1 w-9 rounded-full bg-kit-line-strong" })
+	});
+}
+//#endregion
+export { FloatingPanel };
+
+//# sourceMappingURL=floating-panel.js.map