@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/expanded-editor-modal.js

@@ -0,0 +1,140 @@
+import { cn } from "../lib/cn.js";
+import { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import { MODAL_LAYER } from "./tooltip-root.js";
+import { Button } from "./button.js";
+import { FLOATING_LAYER, Tooltip } from "./overlay.js";
+import * as React from "react";
+import { IconChevronRight } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/kit/ui/expanded-editor-modal.tsx
+/**
+* ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
+* and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
+* wide, header = breadcrumb (… › Field) + a quiet meta line (word count, rows) + Done. Esc closes (menus and popovers
+* inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
+* underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
+* D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
+* shifts left (`data-floating-dock`). Esc closes that panel before the modal.
+*/
+/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes
+*  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */
+var OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;
+var LIST = "[role=menu],[role=listbox]";
+/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */
+function isOpenList(el) {
+	if (el.matches("[data-open],[data-state=open]")) return true;
+	return !!el.id && !!document.querySelector(`[aria-controls~="${CSS.escape(el.id)}"][aria-expanded=true]`);
+}
+var openListIn = (root) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);
+function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "reading", initialFocus, returnFocus, children }) {
+	const title = crumbs[crumbs.length - 1] ?? "Editor";
+	const parents = crumbs.slice(0, -1);
+	const body = React.useRef(null);
+	const opener = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (open) opener.current = document.activeElement;
+	}, [open]);
+	const change = (next, details) => {
+		if (!next && details.reason === "outside-press") {
+			const t = details.event.target;
+			if (t instanceof Element && t.closest("[data-floating-layer]")) return details.cancel();
+		}
+		if (!next && details.reason === "escape-key") {
+			const e = details.event;
+			const t = e.target instanceof Element ? e.target : null;
+			const list = t?.closest(LIST);
+			const inner = openListIn(body.current) || Array.from(document.querySelectorAll("[data-floating-layer]")).some(openListIn);
+			if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || list && isOpenList(list) || inner) return details.cancel();
+			const panel = body.current?.parentElement?.querySelector("[data-floating-panel]");
+			if (panel) {
+				details.cancel();
+				e.bcmsPanelHandled = true;
+				panel.dispatchEvent(new CustomEvent("floatingpanel:escape"));
+				return;
+			}
+		}
+		onOpenChange(next);
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: change,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			...KIT_SCOPE,
+			className: "fixed inset-0 z-[70] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...KIT_SCOPE,
+			[MODAL_LAYER]: "",
+			"aria-describedby": void 0,
+			initialFocus: () => {
+				requestAnimationFrame(() => requestAnimationFrame(() => {
+					(initialFocus?.() ?? body.current?.querySelector("[contenteditable=true], [data-cell], input, textarea"))?.focus({ preventScroll: true });
+				}));
+				return body.current;
+			},
+			finalFocus: () => {
+				const o = opener.current;
+				const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : returnFocus?.() ?? o;
+				requestAnimationFrame(() => target?.focus({ preventScroll: true }));
+				return false;
+			},
+			onKeyDown: (e) => {
+				if (e.key !== "Escape" && e.key !== "F6") e.stopPropagation();
+			},
+			"data-expanded-editor": "",
+			className: cn("fixed inset-4 z-[71] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", FLOATING_LINE, SURFACE_RAISED, "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3",
+				children: [
+					/* @__PURE__ */ jsxs("nav", {
+						"aria-label": "Field path",
+						className: "flex min-w-0 flex-1 items-center gap-1 text-kit-sm",
+						children: [parents.map((c, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+							content: c,
+							side: "bottom",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "max-w-[220px] truncate text-kit-fg-3",
+								children: c
+							})
+						}), /* @__PURE__ */ jsx(IconChevronRight, {
+							className: "size-3 shrink-0 text-kit-fg-4",
+							stroke: 1.5,
+							"aria-hidden": true
+						})] }, `${c}-${i}`)), /* @__PURE__ */ jsx(Dialog.Title, {
+							render: /* @__PURE__ */ jsx("span", { "aria-current": "location" }),
+							className: "min-w-0 truncate font-medium text-kit-fg",
+							children: title
+						})]
+					}),
+					meta ? /* @__PURE__ */ jsx("span", {
+						className: "hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline",
+						children: meta
+					}) : null,
+					/* @__PURE__ */ jsx(Dialog.Close, {
+						render: /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "primary"
+						}),
+						children: "Done"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: body,
+				tabIndex: -1,
+				"data-expanded-body": "",
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none",
+				children: layout === "reading" ? /* @__PURE__ */ jsx("div", {
+					className: "mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10",
+					children
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-full min-h-0 flex-col p-4",
+					children
+				})
+			})]
+		})] })
+	});
+}
+//#endregion
+export { ExpandedEditorModal };
+
+//# sourceMappingURL=expanded-editor-modal.js.map

package/ui/expanded-editor-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-editor-modal.js","names":[],"sources":["../../src/kit/ui/expanded-editor-modal.tsx"],"sourcesContent":["/**\n * ExpandedEditorModal (CPO D49): the ONE surface for \"expand this editor\": rich-text fields (⤢ in the toolbar / label row)\n * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px\n * wide, header = breadcrumb (… › Field) + a quiet meta line (word count, rows) + Done. Esc closes (menus and popovers\n * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field\n * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.\n * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column\n * shifts left (`data-floating-dock`). Esc closes that panel before the modal.\n */\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { FLOATING_LAYER, Tooltip } from \"./overlay\";\nimport { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from \"./surfaces\";\nimport { MODAL_LAYER } from \"./tooltip-root\";\n\nexport interface ExpandedEditorModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** root → current, e.g. [\"Alternating feature rows\", \"Thin walls…\", \"Body\"]; the last one is the title */\n  crumbs: string[];\n  /** quiet right-side line in the header (\"312 words\", \"6 rows · 4 columns\") */\n  meta?: React.ReactNode;\n  /** \"reading\" centres a ~720px column (rich text); \"wide\" uses the full dialog width (tables) */\n  layout?: \"reading\" | \"wide\";\n  /** where focus lands on open (defaults to the first editable surface) */\n  initialFocus?: () => HTMLElement | null | undefined;\n  /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */\n  returnFocus?: () => HTMLElement | null | undefined;\n  children: React.ReactNode;\n}\n\n/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes\n *  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */\nconst OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;\nconst LIST = \"[role=menu],[role=listbox]\";\n\n/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */\nfunction isOpenList(el: Element) {\n  if (el.matches(\"[data-open],[data-state=open]\")) return true;\n  return !!el.id && !!document.querySelector(`[aria-controls~=\"${CSS.escape(el.id)}\"][aria-expanded=true]`);\n}\nconst openListIn = (root: ParentNode | null | undefined) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);\n\nexport function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = \"reading\", initialFocus, returnFocus, children }: ExpandedEditorModalProps) {\n  const title = crumbs[crumbs.length - 1] ?? \"Editor\";\n  const parents = crumbs.slice(0, -1);\n  const body = React.useRef<HTMLDivElement>(null);\n  const opener = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    if (open) opener.current = document.activeElement as HTMLElement | null;\n  }, [open]);\n\n  const change = (next: boolean, details: DialogPrimitive.Root.ChangeEventDetails) => {\n    if (!next && details.reason === \"outside-press\") {\n      // the editor's own floating layers (selection toolbar, slash menu) are portalled to <body>, outside this dialog:\n      // clicks there belong to the editor, so they never close the modal\n      const t = details.event.target;\n      if (t instanceof Element && t.closest(FLOATING_LAYER)) return details.cancel();\n    }\n    if (!next && details.reason === \"escape-key\") {\n      const e = details.event;\n      const t = e.target instanceof Element ? e.target : null;\n      // an open slash menu / block picker inside the editor, or a floating menu over it, closes first\n      const list = t?.closest(LIST);\n      const inner = openListIn(body.current) || Array.from(document.querySelectorAll(FLOATING_LAYER)).some(openListIn);\n      if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || (list && isOpenList(list)) || inner) return details.cancel();\n      // then a component's properties panel open in here (D54): it closes, the modal stays\n      const panel = body.current?.parentElement?.querySelector(\"[data-floating-panel]\");\n      if (panel) {\n        details.cancel();\n        (e as KeyboardEvent & { bcmsPanelHandled?: boolean }).bcmsPanelHandled = true;\n        panel.dispatchEvent(new CustomEvent(\"floatingpanel:escape\"));\n        return;\n      }\n    }\n    onOpenChange(next);\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={change}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          {...KIT_SCOPE}\n          className=\"fixed inset-0 z-[70] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n        />\n        <DialogPrimitive.Popup\n          {...KIT_SCOPE}\n          {...{ [MODAL_LAYER]: \"\" }}\n          aria-describedby={undefined}\n          initialFocus={() => {\n            // focus lands INSIDE at once (so the trap has a home), then moves to the editor once it has mounted.\n            // Base UI focuses the returned element in a frame of its own, so the editor waits one frame longer.\n            requestAnimationFrame(() =>\n              requestAnimationFrame(() => {\n                const el = initialFocus?.() ?? body.current?.querySelector<HTMLElement>(\"[contenteditable=true], [data-cell], input, textarea\");\n                el?.focus({ preventScroll: true });\n              }),\n            );\n            return body.current;\n          }}\n          finalFocus={() => {\n            // back to whatever opened it, or, when that is gone or hidden, to the host's fallback (the field itself)\n            const o = opener.current;\n            const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : (returnFocus?.() ?? o);\n            requestAnimationFrame(() => target?.focus({ preventScroll: true }));\n            return false;\n          }}\n          // keys typed in the editor never reach the app behind it (canvas shortcuts, form Esc); F6 still moves to a panel\n          onKeyDown={(e) => {\n            if (e.key !== \"Escape\" && e.key !== \"F6\") e.stopPropagation();\n          }}\n          data-expanded-editor=\"\"\n          className={cn(\n            \"fixed inset-4 z-[71] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10\",\n            FLOATING_LINE,\n            SURFACE_RAISED,\n            \"data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]\",\n            \"data-[open]:animate-kit-pop-in\",\n          )}\n        >\n          <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3\">\n            <nav aria-label=\"Field path\" className=\"flex min-w-0 flex-1 items-center gap-1 text-kit-sm\">\n              {parents.map((c, i) => (\n                <React.Fragment key={`${c}-${i}`}>\n                  <Tooltip content={c} side=\"bottom\">\n                    <span className=\"max-w-[220px] truncate text-kit-fg-3\">{c}</span>\n                  </Tooltip>\n                  <IconChevronRight className=\"size-3 shrink-0 text-kit-fg-4\" stroke={1.5} aria-hidden />\n                </React.Fragment>\n              ))}\n              {/* the field title names the dialog (\"Body\"), not the nav's \"Field path\" */}\n              <DialogPrimitive.Title render={<span aria-current=\"location\" />} className=\"min-w-0 truncate font-medium text-kit-fg\">\n                {title}\n              </DialogPrimitive.Title>\n            </nav>\n            {meta ? <span className=\"hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline\">{meta}</span> : null}\n            <DialogPrimitive.Close render={<Button size=\"sm\" variant=\"primary\" />}>Done</DialogPrimitive.Close>\n          </header>\n          <div ref={body} tabIndex={-1} data-expanded-body=\"\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none\">\n            {layout === \"reading\" ? (\n              <div className=\"mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10\">{children}</div>\n            ) : (\n              <div className=\"flex h-full min-h-0 flex-col p-4\">{children}</div>\n            )}\n          </div>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/ui/field-context.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export declare const FieldIdContext: React.Context<string | undefined>;
+export declare function useFieldId(): string | undefined;
+export declare const FieldLabelledByContext: React.Context<string | undefined>;
+export declare function useFieldLabelledBy(): string | undefined;
+export declare const FieldDescribedByContext: React.Context<string | undefined>;
+export declare function useFieldDescribedBy(): string | undefined;
+export declare const FieldLabelForContext: React.Context<{
+    htmlFor: string;
+    labelId: string;
+} | undefined>;
+export declare function useLabelFor(id: string | undefined): string | undefined;

package/ui/field-context.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/kit/ui/field-context.ts
+var FieldIdContext = React.createContext(void 0);
+function useFieldId() {
+	return React.useContext(FieldIdContext);
+}
+var FieldLabelledByContext = React.createContext(void 0);
+function useFieldLabelledBy() {
+	return React.useContext(FieldLabelledByContext);
+}
+var FieldDescribedByContext = React.createContext(void 0);
+function useFieldDescribedBy() {
+	return React.useContext(FieldDescribedByContext);
+}
+var FieldLabelForContext = React.createContext(void 0);
+function useLabelFor(id) {
+	const ctx = React.useContext(FieldLabelForContext);
+	return ctx && id && ctx.htmlFor === id ? ctx.labelId : void 0;
+}
+//#endregion
+export { FieldDescribedByContext, FieldIdContext, FieldLabelForContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor };
+
+//# sourceMappingURL=field-context.js.map

package/ui/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","names":[],"sources":["../../src/kit/ui/field-context.ts"],"sourcesContent":["import * as React from \"react\";\n\n/* The Field wrapper (input.tsx) publishes its label wiring here, so controls in other files (Switch, Select) can read it\n   without importing input.tsx. V2 keeps these contexts inside ui/input.tsx; input.tsx should import them from this file. */\n\nexport const FieldIdContext = React.createContext<string | undefined>(undefined);\nexport function useFieldId() {\n  return React.useContext(FieldIdContext);\n}\n\nexport const FieldLabelledByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldLabelledBy() {\n  return React.useContext(FieldLabelledByContext);\n}\n\nexport const FieldDescribedByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldDescribedBy() {\n  return React.useContext(FieldDescribedByContext);\n}\n\n/* `<label for>` without a <label> element. V2 draws no label on an inline-list row, so the row publishes its sr-only\n   name here and the kit control whose id is `htmlFor` (Input, Textarea, Select, Switch, Checkbox) points its\n   aria-labelledby at `labelId`, unless the control carries its own aria-label / aria-labelledby. */\nexport const FieldLabelForContext = React.createContext<{ htmlFor: string; labelId: string } | undefined>(undefined);\nexport function useLabelFor(id: string | undefined) {\n  const ctx = React.useContext(FieldLabelForContext);\n  return ctx && id && ctx.htmlFor === id ? ctx.labelId : undefined;\n}\n"],"mappings":";;AAKA,IAAa,iBAAiB,MAAM,cAAkC,KAAA,EAAU;AAChF,SAAgB,aAAa;AAC3B,QAAO,MAAM,WAAW,eAAe;;AAGzC,IAAa,yBAAyB,MAAM,cAAkC,KAAA,EAAU;AACxF,SAAgB,qBAAqB;AACnC,QAAO,MAAM,WAAW,uBAAuB;;AAGjD,IAAa,0BAA0B,MAAM,cAAkC,KAAA,EAAU;AACzF,SAAgB,sBAAsB;AACpC,QAAO,MAAM,WAAW,wBAAwB;;AAMlD,IAAa,uBAAuB,MAAM,cAAgE,KAAA,EAAU;AACpH,SAAgB,YAAY,IAAwB;CAClD,MAAM,MAAM,MAAM,WAAW,qBAAqB;AAClD,QAAO,OAAO,MAAM,IAAI,YAAY,KAAK,IAAI,UAAU,KAAA"}

package/ui/floating-panel.d.ts

@@ -0,0 +1,152 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+import { type MotionValue } from "framer-motion";
+export declare const NAV = 56;
+export declare const SNAP = 16;
+export declare const EDGE = 16;
+export declare const Z_FLOAT = "z-[52]";
+export declare const EASE: readonly [0.32, 0.72, 0, 1];
+export type Rect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** Where a window may sit and how big it may get. `top` is the smallest y (under the navbar), `pad` the inset elsewhere. */
+export interface Bounds {
+    minW: number;
+    minH: number;
+    maxW: () => number;
+    maxH: () => number;
+    top: number;
+    pad: number;
+}
+/** Magnetic lines in viewport px: `v` = x positions (left/right edges snap to them), `h` = y positions. */
+export interface SnapLines {
+    v: number[];
+    h: number[];
+}
+/** 1px guide lines to draw (viewport px). */
+export interface Guides {
+    v: number[];
+    h: number[];
+}
+export declare const NO_GUIDES: Guides;
+export interface Geom {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+    w: MotionValue<number>;
+    h: MotionValue<number>;
+}
+export declare const vw: () => number;
+export declare const vh: () => number;
+export declare const clampN: (n: number, lo: number, hi: number) => number;
+export declare function fitRect(g: Rect, b: Bounds): Rect;
+/** Clamp to the viewport, then pull any edge within SNAP px of a line onto it (the nearest wins). */
+export declare function snapRect(x: number, y: number, w: number, h: number, lines: SnapLines, b: Bounds): {
+    x: number;
+    y: number;
+    g: Guides;
+};
+/** Runs a pointer drag on window-level listeners (works from any handle, survives leaving the element). */
+export declare function track(e: React.PointerEvent, onMove: (dx: number, dy: number) => void, onEnd: (moved: boolean) => void, cursor?: string): void;
+/** Magnetic guides: a 1px hairline along each line the window is snapped to. */
+export declare function SnapGuides({ guides }: {
+    guides: Guides;
+}): import("react/jsx-runtime").JSX.Element;
+export type ResizeDir = "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se";
+/** Resize from 4 edges and 4 corners. `onStart` runs before the first read (e.g. turn an auto height into a number). */
+export declare function ResizeEdges({ geom, bounds, onStart, onEnd }: {
+    geom: Geom;
+    bounds: Bounds;
+    onStart?: () => void;
+    onEnd: (dir: ResizeDir) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Keyboard resize: a focusable grip (role="separator"). ←/→ width, ↑/↓ height (±16, Shift ±64); grows toward the open side. */
+export declare function ResizeGrip({ geom, bounds, label, onStart, onEnd, className }: {
+    geom: Geom;
+    bounds: Bounds;
+    label: string;
+    onStart?: () => void;
+    onEnd: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface PanelPref {
+    side?: "left" | "right";
+    /** set once the person drags it: the panel stays here instead of following its anchor */
+    pos?: {
+        x: number;
+        y: number;
+    };
+    w?: number;
+    /** set once the person resizes the height; otherwise the height follows the content */
+    h?: number;
+}
+interface PanelPrefState {
+    prefs: Record<string, PanelPref>;
+    patch: (key: string, p: Partial<PanelPref> | null) => void;
+}
+/** Read the remembered placements with a selector; `useFloatingPanelPrefs.getState()` for imperative reads and writes. */
+export declare function useFloatingPanelPrefs<T>(select: (s: PanelPrefState) => T): T;
+export declare namespace useFloatingPanelPrefs {
+    var getState: () => PanelPrefState;
+}
+export type WidthBucket = "wide" | "mid";
+export type PanelMode = "float" | "side" | "sheet" | "modal";
+/** How a panel presents at this width and pointer: float · side (tablet touch) · sheet (phones) · modal (inside a D49 modal). */
+export declare function usePanelMode(inModal?: boolean): PanelMode;
+export declare const PANEL_W = 340;
+export interface FloatingPanelHandle {
+    dock: (side: "left" | "right") => void;
+    /** back to the docked default (position and size) */
+    reset: () => void;
+    /** keyboard move / resize: arrows ±16 (Shift ±64), Enter commits, Esc cancels */
+    keyboard: (mode: "move" | "resize") => void;
+    /** a polite announcement from the panel's own live region */
+    announce: (text: string) => void;
+    el: () => HTMLElement | null;
+}
+export interface FloatingPanelProps {
+    /** remembered placement key (one per kind of panel) */
+    id: string;
+    /** id of the element that names the panel (the header title) */
+    labelledBy: string;
+    /** the thing it edits: the panel follows it and docks beside its column (`[data-rt-editor]`) */
+    anchor: HTMLElement | null;
+    /** render inside this element instead of <body> (the D49 modal) */
+    container?: HTMLElement | null;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    /** bottom-sheet footer (Done) */
+    sheetFooter?: React.ReactNode;
+    onClose: () => void;
+    /** F6 / Esc: where focus goes back to (the card) */
+    focusBack?: () => void;
+    /** a refill (another component picked while open): no entrance animation */
+    instant?: boolean;
+    bodyClassName?: string;
+    /** keys anywhere in the panel, before its own handling (⌘Z joins the host's undo) */
+    onPanelKeyDown?: (e: KeyboardEvent) => void;
+}
+export declare const FloatingPanel: React.ForwardRefExoticComponent<FloatingPanelProps & React.RefAttributes<FloatingPanelHandle>>;
+export {};