@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/inspector/dock.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+//#region src/inspector/dock.d.ts
+/**
+ * Docked inspector pane: an in-flow spacer plus a fixed overlay.
+ *
+ * The spacer is what makes the content column reflow: the pane itself is
+ * `position: fixed`, so without a same-width sibling in the flow it would
+ * cover the content instead of displacing it. Keeping the pane fixed
+ * (rather than in the flow) is what lets it span the full viewport height
+ * regardless of the topbar above the content.
+ *
+ * The root carries the reserved inline size itself rather than leaving it to
+ * the spacer alone: a block-level root in a plain block host would otherwise
+ * take the full containing width and push the content column off-screen,
+ * which is exactly the failure the spacer exists to prevent. With the width
+ * on the root, the dock reserves the same footprint in a flex row, a grid
+ * track, or a plain block.
+ */
+type InspectorResizeHandleProps = {
+  "aria-orientation": "vertical";
+  "aria-valuemax": number;
+  "aria-valuemin": number;
+  "aria-valuenow": number;
+  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+  onLostPointerCapture: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+  onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+  tabIndex: number;
+};
+type InspectorDockProps = {
+  children: ReactNode;
+  className?: string | undefined;
+  /** Accessible name for the drag handle. */
+  resizeHandleLabel: string;
+  /** Handlers and ARIA state from `useInspectorPaneWidth`. */
+  resizeHandleProps: InspectorResizeHandleProps;
+  /** Double-click affordance restoring the default width. */
+  onResetWidth?: (() => void) | undefined;
+  /** Whether the full pane is shown, as opposed to the bare rail. */
+  showPaneContent: boolean;
+  /** Inline size the dock reserves, in CSS pixels. */
+  width: number;
+};
+declare const InspectorDock: ({ children, className, onResetWidth, resizeHandleLabel, resizeHandleProps, showPaneContent, width }: InspectorDockProps) => import("react").JSX.Element;
+//#endregion
+export { InspectorDock };

package/dist/inspector/dock.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inspector/dock.tsx
+const InspectorDock = ({ children, className, onResetWidth, resizeHandleLabel, resizeHandleProps, showPaneContent, width }) => {
+	const widthPx = `${width}px`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("text-sidebar-foreground hidden shrink-0 md:block", className),
+		"data-side": "inline-end",
+		"data-slot": "inspector-dock",
+		"data-state": showPaneContent ? "expanded" : "collapsed",
+		style: { width: widthPx },
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "bg-sidebar relative w-full",
+			"data-slot": "inspector-dock-spacer"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "fixed inset-y-0 end-0 z-10 hidden h-svh md:flex",
+			"data-slot": "inspector-dock-pane",
+			style: { width: widthPx },
+			children: [showPaneContent && /* @__PURE__ */ jsx("div", {
+				"aria-label": resizeHandleLabel,
+				className: "hover:bg-border active:bg-border focus-visible:bg-primary focus-visible:outline-primary absolute inset-y-0 -start-px z-20 flex w-1 cursor-col-resize items-center justify-center border-s focus-visible:outline-2",
+				"data-slot": "inspector-resize-handle",
+				role: "separator",
+				...resizeHandleProps,
+				tabIndex: 0,
+				onDoubleClick: onResetWidth
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bg-sidebar flex h-full w-full flex-col",
+				children
+			})]
+		})]
+	});
+};
+//#endregion
+export { InspectorDock };

package/dist/inspector/index.d.ts

@@ -0,0 +1,6 @@
+import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
+import { InspectorDock } from "./dock.js";
+import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./layout-tokens.js";
+import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./pane-width.js";
+import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./use-pane-width.js";
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/index.js

@@ -0,0 +1,6 @@
+import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./layout-tokens.js";
+import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
+import { InspectorDock } from "./dock.js";
+import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./pane-width.js";
+import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./use-pane-width.js";
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/layout-tokens.d.ts

@@ -0,0 +1,28 @@
+//#region src/inspector/layout-tokens.d.ts
+/**
+ * Layout constants the inspector chrome is built from.
+ *
+ * The rail's cells, the header strip, and the property rows all share one
+ * height, so a pane assembled from these parts keeps a single vertical
+ * rhythm no matter which of them a section happens to use.
+ */
+/**
+ * Every inspector row, header strip, and rail cell is exactly this tall.
+ * A *fixed* height, not a minimum: rows that grow with their content break
+ * the vertical rhythm the rail's 48px cells establish, and a list of
+ * key/value rows stops scanning as a list once the rows differ in height.
+ */
+declare const TOOLBAR_ROW_HEIGHT: "h-12";
+declare const TOOLBAR_ROW_HEIGHT_PX: 48;
+declare const SIDE_RAIL_WIDTH: "w-12";
+/**
+ * Borders sit on both inline edges of the rail box so the total footprint
+ * stays exactly 48px under `border-box`.
+ */
+declare const SIDE_RAIL_CONTAINER_CLASS: "bg-sidebar flex shrink-0 flex-col border-s border-e w-12";
+declare const SIDE_RAIL_ICON_BUTTON_SIZE: "size-8";
+declare const SIDE_RAIL_TAB_ICON_SIZE: "size-3.5";
+/** Two-column grid the key/value rows share. */
+declare const PROPERTY_ROW_GRID: "grid-cols-[8rem_minmax(0,1fr)]";
+//#endregion
+export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };

package/dist/inspector/layout-tokens.js

@@ -0,0 +1,28 @@
+//#region src/inspector/layout-tokens.ts
+/**
+* Layout constants the inspector chrome is built from.
+*
+* The rail's cells, the header strip, and the property rows all share one
+* height, so a pane assembled from these parts keeps a single vertical
+* rhythm no matter which of them a section happens to use.
+*/
+/**
+* Every inspector row, header strip, and rail cell is exactly this tall.
+* A *fixed* height, not a minimum: rows that grow with their content break
+* the vertical rhythm the rail's 48px cells establish, and a list of
+* key/value rows stops scanning as a list once the rows differ in height.
+*/
+const TOOLBAR_ROW_HEIGHT = "h-12";
+const TOOLBAR_ROW_HEIGHT_PX = 48;
+const SIDE_RAIL_WIDTH = "w-12";
+/**
+* Borders sit on both inline edges of the rail box so the total footprint
+* stays exactly 48px under `border-box`.
+*/
+const SIDE_RAIL_CONTAINER_CLASS = `bg-sidebar flex shrink-0 flex-col border-s border-e ${SIDE_RAIL_WIDTH}`;
+const SIDE_RAIL_ICON_BUTTON_SIZE = "size-8";
+const SIDE_RAIL_TAB_ICON_SIZE = "size-3.5";
+/** Two-column grid the key/value rows share. */
+const PROPERTY_ROW_GRID = "grid-cols-[8rem_minmax(0,1fr)]";
+//#endregion
+export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };

package/dist/inspector/pane-width.d.ts

@@ -0,0 +1,64 @@
+//#region src/inspector/pane-width.d.ts
+/**
+ * Width arithmetic for a docked inspector pane.
+ *
+ * The pane is a fixed overlay backed by an in-flow spacer, so nothing in
+ * the layout pushes back when it grows: whatever the pane takes comes
+ * straight out of the content column. Without a clamp against the space
+ * actually available, shrinking the window (or expanding the sidebar)
+ * leaves the content column a few dozen pixels wide instead of folding.
+ *
+ * The host application's sidebar width is a parameter rather than an
+ * import, so the policy carries no coupling to any particular shell.
+ */
+declare const INSPECTOR_PANE_DEFAULT_WIDTH = 512;
+declare const INSPECTOR_PANE_MIN_WIDTH = 320;
+declare const INSPECTOR_PANE_MAX_WIDTH = 800;
+/**
+ * Floor for the content column beside the pane. Below this the content
+ * surface stops being usable, so the pane yields space first.
+ */
+declare const INSPECTOR_CONTENT_MIN_WIDTH = 400;
+/** Inline size of the collapsed icon rail, in CSS pixels. */
+declare const INSPECTOR_RAIL_WIDTH = 48;
+type ForceSidebarCollapsedInput = {
+  /** Inline size the expanded sidebar takes out of the layout row. */
+  expandedSidebarWidth: number;
+  inspectorPaneOpen: boolean;
+  /** Viewport width in CSS pixels; 0 before the viewport is known. */
+  viewportWidth: number;
+};
+/**
+ * The expanded sidebar yields its optional width before either docked pane
+ * can violate its minimum. The collapsed rail plus both minimums fit at the
+ * desktop breakpoint, so this policy keeps every desktop width usable.
+ */
+declare const shouldForceSidebarCollapsed: ({ expandedSidebarWidth, inspectorPaneOpen, viewportWidth }: ForceSidebarCollapsedInput) => boolean;
+type InspectorPaneWidthInput = {
+  /** Width the user dragged the pane to. */
+  desiredWidth: number;
+  /** Inline size the sidebar takes out of the same layout row. */
+  sidebarWidth: number;
+  /** Viewport width in CSS pixels; 0 before the viewport is known. */
+  viewportWidth: number;
+};
+/**
+ * Largest width the pane may take without starving the content column.
+ * Never returns less than {@link INSPECTOR_PANE_MIN_WIDTH}: a pane too
+ * narrow to read is no better than a content column too narrow to read,
+ * and collapsing the sidebar is the escape hatch for a genuinely small
+ * viewport.
+ */
+declare const resolveInspectorPaneMaxWidth: ({ sidebarWidth, viewportWidth }: Omit<InspectorPaneWidthInput, "desiredWidth">) => number;
+/** Width the pane renders at, given the width the user asked for. */
+declare const resolveInspectorPaneWidth: ({ desiredWidth, sidebarWidth, viewportWidth }: InspectorPaneWidthInput) => number;
+/**
+ * Width the dock reserves in the layout: the full pane while content is
+ * shown, the bare rail while it is collapsed or minimized.
+ */
+declare const resolveInspectorDockWidth: ({ paneWidth, showPaneContent }: {
+  paneWidth: number;
+  showPaneContent: boolean;
+}) => number;
+//#endregion
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed };

package/dist/inspector/pane-width.js

@@ -0,0 +1,53 @@
+//#region src/inspector/pane-width.ts
+/**
+* Width arithmetic for a docked inspector pane.
+*
+* The pane is a fixed overlay backed by an in-flow spacer, so nothing in
+* the layout pushes back when it grows: whatever the pane takes comes
+* straight out of the content column. Without a clamp against the space
+* actually available, shrinking the window (or expanding the sidebar)
+* leaves the content column a few dozen pixels wide instead of folding.
+*
+* The host application's sidebar width is a parameter rather than an
+* import, so the policy carries no coupling to any particular shell.
+*/
+const INSPECTOR_PANE_DEFAULT_WIDTH = 512;
+const INSPECTOR_PANE_MIN_WIDTH = 320;
+const INSPECTOR_PANE_MAX_WIDTH = 800;
+/**
+* Floor for the content column beside the pane. Below this the content
+* surface stops being usable, so the pane yields space first.
+*/
+const INSPECTOR_CONTENT_MIN_WIDTH = 400;
+/** Inline size of the collapsed icon rail, in CSS pixels. */
+const INSPECTOR_RAIL_WIDTH = 48;
+/**
+* The expanded sidebar yields its optional width before either docked pane
+* can violate its minimum. The collapsed rail plus both minimums fit at the
+* desktop breakpoint, so this policy keeps every desktop width usable.
+*/
+const shouldForceSidebarCollapsed = ({ expandedSidebarWidth, inspectorPaneOpen, viewportWidth }) => inspectorPaneOpen && viewportWidth > 0 && viewportWidth < expandedSidebarWidth + 400 + 320;
+/**
+* Largest width the pane may take without starving the content column.
+* Never returns less than {@link INSPECTOR_PANE_MIN_WIDTH}: a pane too
+* narrow to read is no better than a content column too narrow to read,
+* and collapsing the sidebar is the escape hatch for a genuinely small
+* viewport.
+*/
+const resolveInspectorPaneMaxWidth = ({ sidebarWidth, viewportWidth }) => {
+	if (viewportWidth <= 0) return 320;
+	const available = viewportWidth - sidebarWidth - 400;
+	return Math.max(320, Math.min(800, available));
+};
+/** Width the pane renders at, given the width the user asked for. */
+const resolveInspectorPaneWidth = ({ desiredWidth, sidebarWidth, viewportWidth }) => Math.min(Math.max(desiredWidth, 320), resolveInspectorPaneMaxWidth({
+	sidebarWidth,
+	viewportWidth
+}));
+/**
+* Width the dock reserves in the layout: the full pane while content is
+* shown, the bare rail while it is collapsed or minimized.
+*/
+const resolveInspectorDockWidth = ({ paneWidth, showPaneContent }) => showPaneContent ? paneWidth : 48;
+//#endregion
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed };

package/dist/inspector/use-pane-width.d.ts

@@ -0,0 +1,99 @@
+import { KeyboardEvent, PointerEvent } from "react";
+//#region src/inspector/use-pane-width.d.ts
+/**
+ * Reads a persisted pane width, rejecting anything that is not a finite
+ * number inside the pane's own bounds. A corrupt or stale entry must not
+ * be able to render the pane at a width the drag handle cannot recover
+ * from, so an unusable value falls back to the default rather than being
+ * clamped into something the user never chose.
+ */
+declare const parsePersistedPaneWidth: (raw: string | null) => number;
+/**
+ * Width the drag produces for a pane docked to the inline-end edge.
+ *
+ * That edge is the right in LTR (width = distance from the right) and the
+ * left in RTL (width = distance from the left). Without the RTL branch the
+ * delta is inverted and the drag oscillates.
+ */
+declare const resolveDragWidth: ({ clientX, isRtl, viewportWidth }: {
+  clientX: number;
+  isRtl: boolean;
+  viewportWidth: number;
+}) => number;
+/** Pixels one arrow press moves the edge; Page/Home/End move further. */
+declare const INSPECTOR_PANE_KEYBOARD_STEP = 16;
+declare const INSPECTOR_PANE_KEYBOARD_PAGE_STEP = 64;
+/**
+ * Width a keyboard resize produces. Returns `null` for keys the handle does
+ * not own, so the caller can leave the event alone rather than swallowing
+ * every keystroke that reaches a focusable separator.
+ *
+ * Arrow semantics follow the *edge*, not the width: on an inline-end pane
+ * the inline-start arrow grows it. Under RTL the physical arrows swap, so
+ * the same key keeps meaning "make it bigger" on both sides.
+ */
+declare const resolveKeyboardWidth: ({ currentWidth, isRtl, key }: {
+  currentWidth: number;
+  isRtl: boolean;
+  key: string;
+}) => number | null;
+/**
+ * Reads and writes are wrapped because `window.localStorage` is a getter that
+ * *throws* where storage is blocked — a sandboxed iframe, a hardened privacy
+ * mode, a full quota. The `typeof window` check does not cover that, and a
+ * throw in the state initializer takes the whole pane down on mount. A pane
+ * that forgets its width is a smaller failure than a pane that does not
+ * render, so both directions degrade to in-memory.
+ */
+declare const readStoredWidth: (storageKey: string) => number;
+declare const writeStoredWidth: (storageKey: string, width: number) => void;
+type UseInspectorPaneWidthOptions = {
+  /** Inline size the sidebar takes out of the same layout row. */
+  sidebarWidth: number;
+  /**
+   * `localStorage` key the dragged width is remembered under. Omit to keep
+   * the width in memory only, which resets the pane on every reload.
+   */
+  storageKey?: string | undefined;
+  /** Viewport width in CSS pixels; 0 before the viewport is known. */
+  viewportWidth: number;
+};
+type UseInspectorPaneWidthResult = {
+  /**
+   * Pointer + keyboard handlers and ARIA state to spread onto the drag
+   * handle. The handle is a focusable `separator`, so it is operable
+   * without a pointer.
+   */
+  resizeHandleProps: {
+    "aria-orientation": "vertical";
+    "aria-valuemax": number;
+    "aria-valuemin": number;
+    "aria-valuenow": number;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onLostPointerCapture: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+    tabIndex: number;
+  };
+  /** Reset the pane to its default width (double-click affordance). */
+  resetWidth: () => void;
+  /**
+   * Width the pane renders at: the dragged width clamped against the room
+   * left beside the sidebar.
+   */
+  width: number;
+};
+/**
+ * Owns the docked pane's width: the width the user dragged to, its
+ * persistence, and the clamp against the room actually available.
+ *
+ * What renders is always the clamped value, so shrinking the window or
+ * expanding the sidebar takes space back from the pane instead of crushing
+ * the content column. The *desired* width keeps the user's choice, so the
+ * pane returns to it once the room comes back.
+ */
+declare const useInspectorPaneWidth: ({ sidebarWidth, storageKey, viewportWidth }: UseInspectorPaneWidthOptions) => UseInspectorPaneWidthResult;
+//#endregion
+export { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, readStoredWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth, writeStoredWidth };

package/dist/inspector/use-pane-width.js

@@ -0,0 +1,149 @@
+import { resolveInspectorPaneWidth } from "./pane-width.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/inspector/use-pane-width.ts
+/**
+* Reads a persisted pane width, rejecting anything that is not a finite
+* number inside the pane's own bounds. A corrupt or stale entry must not
+* be able to render the pane at a width the drag handle cannot recover
+* from, so an unusable value falls back to the default rather than being
+* clamped into something the user never chose.
+*/
+const parsePersistedPaneWidth = (raw) => {
+	if (raw === null) return 512;
+	const parsed = Number.parseInt(raw, 10);
+	if (!Number.isFinite(parsed) || parsed < 320 || parsed > 800) return 512;
+	return parsed;
+};
+/**
+* Width the drag produces for a pane docked to the inline-end edge.
+*
+* That edge is the right in LTR (width = distance from the right) and the
+* left in RTL (width = distance from the left). Without the RTL branch the
+* delta is inverted and the drag oscillates.
+*/
+const resolveDragWidth = ({ clientX, isRtl, viewportWidth }) => isRtl ? clientX : viewportWidth - clientX;
+/** Pixels one arrow press moves the edge; Page/Home/End move further. */
+const INSPECTOR_PANE_KEYBOARD_STEP = 16;
+const INSPECTOR_PANE_KEYBOARD_PAGE_STEP = 64;
+/**
+* Width a keyboard resize produces. Returns `null` for keys the handle does
+* not own, so the caller can leave the event alone rather than swallowing
+* every keystroke that reaches a focusable separator.
+*
+* Arrow semantics follow the *edge*, not the width: on an inline-end pane
+* the inline-start arrow grows it. Under RTL the physical arrows swap, so
+* the same key keeps meaning "make it bigger" on both sides.
+*/
+const resolveKeyboardWidth = ({ currentWidth, isRtl, key }) => {
+	const grow = isRtl ? "ArrowRight" : "ArrowLeft";
+	const shrink = isRtl ? "ArrowLeft" : "ArrowRight";
+	switch (key) {
+		case grow: return currentWidth + 16;
+		case shrink: return currentWidth - 16;
+		case "PageUp": return currentWidth + 64;
+		case "PageDown": return currentWidth - 64;
+		case "Home": return 320;
+		case "End": return 800;
+		case "Enter": return 512;
+		default: return null;
+	}
+};
+/**
+* Reads and writes are wrapped because `window.localStorage` is a getter that
+* *throws* where storage is blocked — a sandboxed iframe, a hardened privacy
+* mode, a full quota. The `typeof window` check does not cover that, and a
+* throw in the state initializer takes the whole pane down on mount. A pane
+* that forgets its width is a smaller failure than a pane that does not
+* render, so both directions degrade to in-memory.
+*/
+const readStoredWidth = (storageKey) => {
+	if (typeof window === "undefined") return 512;
+	try {
+		return parsePersistedPaneWidth(window.localStorage.getItem(storageKey));
+	} catch {
+		return 512;
+	}
+};
+const writeStoredWidth = (storageKey, width) => {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(storageKey, String(width));
+	} catch {}
+};
+/**
+* Owns the docked pane's width: the width the user dragged to, its
+* persistence, and the clamp against the room actually available.
+*
+* What renders is always the clamped value, so shrinking the window or
+* expanding the sidebar takes space back from the pane instead of crushing
+* the content column. The *desired* width keeps the user's choice, so the
+* pane returns to it once the room comes back.
+*/
+const useInspectorPaneWidth = ({ sidebarWidth, storageKey, viewportWidth }) => {
+	const [desiredWidth, setDesiredWidth] = useState(() => storageKey === void 0 ? 512 : readStoredWidth(storageKey));
+	const isDragging = useRef(false);
+	useEffect(() => {
+		if (storageKey === void 0) return;
+		writeStoredWidth(storageKey, desiredWidth);
+	}, [desiredWidth, storageKey]);
+	const handlePointerDown = (event) => {
+		event.preventDefault();
+		isDragging.current = true;
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		if (!isDragging.current) return;
+		setDesiredWidth(resolveDragWidth({
+			clientX: event.clientX,
+			isRtl: document.documentElement.dir === "rtl",
+			viewportWidth: window.innerWidth
+		}));
+	};
+	/**
+	* Ends the drag however the pointer stream ended. `pointerup` is only one of
+	* the ways: a touch taken over by scrolling, a context menu, or the handle
+	* losing capture mid-drag all end it without one, and a drag flag left set
+	* would resize the pane on the next pointer movement with no button held.
+	*/
+	const endDrag = (event) => {
+		isDragging.current = false;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const handleKeyDown = (event) => {
+		const next = resolveKeyboardWidth({
+			currentWidth: desiredWidth,
+			isRtl: document.documentElement.dir === "rtl",
+			key: event.key
+		});
+		if (next === null) return;
+		event.preventDefault();
+		setDesiredWidth(Math.min(Math.max(next, 320), 800));
+	};
+	const resetWidth = () => {
+		setDesiredWidth(512);
+	};
+	const width = resolveInspectorPaneWidth({
+		desiredWidth,
+		sidebarWidth,
+		viewportWidth
+	});
+	return {
+		resetWidth,
+		resizeHandleProps: {
+			"aria-orientation": "vertical",
+			"aria-valuemax": 800,
+			"aria-valuemin": 320,
+			"aria-valuenow": width,
+			onKeyDown: handleKeyDown,
+			onLostPointerCapture: endDrag,
+			onPointerCancel: endDrag,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: endDrag,
+			tabIndex: 0
+		},
+		width
+	};
+};
+//#endregion
+export { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, readStoredWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth, writeStoredWidth };

package/dist/kanban/card-properties.d.ts

@@ -0,0 +1,27 @@
+//#region src/kanban/card-properties.d.ts
+/**
+ * Which properties a kanban card renders as values.
+ *
+ * A card draws some fields itself — a title, a badge row, a footer — and the
+ * rest as generic property values. The split used to be a chain of literal id
+ * comparisons inside the card component, which meant the card knew every id the
+ * board could hold. Here the caller names its reserved ids once and vetoes the
+ * rest through a predicate.
+ */
+type KanbanCardFieldSelection = {
+  /** Field ids the card renders itself, so they are not repeated as values. */
+  reservedFieldIds: readonly string[];
+  /**
+   * Vetoes a field the board could render but this card should not (a
+   * system-computed property whose value the column already conveys, say).
+   * Omit to render every unreserved field.
+   */
+  isRenderable?: ((fieldId: string) => boolean) | undefined;
+};
+/**
+ * The visible field ids a card renders as property values, in view order and
+ * without duplicates.
+ */
+declare const selectKanbanCardFieldIds: (visibleFieldIds: readonly string[], { reservedFieldIds, isRenderable }: KanbanCardFieldSelection) => string[];
+//#endregion
+export { KanbanCardFieldSelection, selectKanbanCardFieldIds };

package/dist/kanban/card-properties.js

@@ -0,0 +1,19 @@
+//#region src/kanban/card-properties.ts
+/**
+* The visible field ids a card renders as property values, in view order and
+* without duplicates.
+*/
+const selectKanbanCardFieldIds = (visibleFieldIds, { reservedFieldIds, isRenderable }) => {
+	const reserved = new Set(reservedFieldIds);
+	const seen = /* @__PURE__ */ new Set();
+	const selected = [];
+	for (const fieldId of visibleFieldIds) {
+		if (reserved.has(fieldId) || seen.has(fieldId)) continue;
+		seen.add(fieldId);
+		if (isRenderable && !isRenderable(fieldId)) continue;
+		selected.push(fieldId);
+	}
+	return selected;
+};
+//#endregion
+export { selectKanbanCardFieldIds };

package/dist/kanban/card-shell.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, RefObject } from "react";
+//#region src/kanban/card-shell.d.ts
+type KanbanCardShellProps = {
+  children: ReactNode;
+  /** Overlay slot pinned to the top-end corner (row actions). */
+  actions?: ReactNode;
+  /** Marks the card whose detail is currently open. */
+  active?: boolean | undefined;
+  /**
+   * Opens the card. Omit for a card with nothing to open: the shell then
+   * renders a plain region instead of a button, so a card that does nothing
+   * never lands in the tab order.
+   */
+  onOpen?: (() => void) | undefined;
+  /** The card body, for callers that measure or flash it. */
+  bodyRef?: RefObject<HTMLDivElement | null> | undefined;
+  /** The drag source the shell wraps the card in. */
+  dragRef?: RefObject<HTMLDivElement | null> | undefined;
+  className?: string | undefined;
+};
+/**
+ * The card chrome: border, hover lift, active ring, drag wrapper, and the
+ * keyboard contract for a card that opens something.
+ *
+ * The shell carries no idea of what a card holds. Every board rendered one of
+ * three near-identical copies of this markup, differing only in whether the
+ * card opened anything, which is why opening is a prop rather than a branch at
+ * each call site.
+ */
+declare const KanbanCardShell: ({ children, actions, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
+//#endregion
+export { KanbanCardShell, KanbanCardShellProps };

package/dist/kanban/card-shell.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/utils.js";
+import { containedHandler } from "../hooks/use-contained-handler.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kanban/card-shell.tsx
+/**
+* The card chrome: border, hover lift, active ring, drag wrapper, and the
+* keyboard contract for a card that opens something.
+*
+* The shell carries no idea of what a card holds. Every board rendered one of
+* three near-identical copies of this markup, differing only in whether the
+* card opened anything, which is why opening is a prop rather than a branch at
+* each call site.
+*/
+const KanbanCardShell = ({ children, actions, active, onOpen, bodyRef, dragRef, className }) => {
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [children, actions] });
+	if (!onOpen) return /* @__PURE__ */ jsx("div", {
+		className: "group/card",
+		ref: dragRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(CARD_CLASS, active && ACTIVE_CLASS, className),
+			ref: bodyRef,
+			children: body
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "group/card",
+		ref: dragRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(CARD_CLASS, "cursor-pointer transition-shadow hover:shadow-md", active && ACTIVE_CLASS, className),
+			onClick: containedHandler(bodyRef, onOpen),
+			onKeyDown: (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				onOpen();
+			},
+			ref: bodyRef,
+			role: "button",
+			tabIndex: 0,
+			children: body
+		})
+	});
+};
+const CARD_CLASS = "bg-card relative block w-full rounded-lg border p-3 text-start shadow-xs";
+const ACTIVE_CLASS = "ring-primary/30 ring-2";
+//#endregion
+export { KanbanCardShell };