@stll/ui 0.18.0 → 0.20.0

package/dist/inspector/entity-tab.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/inspector/entity-tab.d.ts
+/**
+ * One rail tab for an open entity: a bordered `InspectorRailTab` cell
+ * showing the active tab's icon, with a tooltip carrying the full label.
+ * Generic over what "entity" means — the host supplies the icon dispatch
+ * (file type, task status, chat, …) and, for kinds that want it, the
+ * inactive-state glyph; this only owns the cell's shared shape and
+ * affordances.
+ */
+declare const InspectorEntityTab: ({ active, label, glyph, icon, onClose, onSelect, ...props }: InspectorEntityTabProps) => import("react").JSX.Element;
+type InspectorEntityTabPassthroughProps = Omit<ComponentProps<"button">, "children" | "onAuxClick" | "onClick">;
+type InspectorEntityTabProps = {
+  /** Whether this tab is the one currently shown in the pane. Drives the
+   * active spine, and — when `glyph` is given — swaps the cell's content
+   * between `glyph` and `icon`. */
+  active: boolean;
+  /** Full entity name. Both the button's accessible name and the tooltip
+   * text — the cell itself never has room to show it. */
+  label: string;
+  /**
+   * Short text shown in the cell instead of `icon` while the tab is
+   * inactive (e.g. a 3-character stem the host derives with
+   * `entityTabGlyph`). Omit it for an entity kind whose icon alone already
+   * identifies it (a status glyph, a colored dot, a logo): `icon` then
+   * renders in both states, dimmed while inactive instead of swapping to
+   * text.
+   */
+  glyph?: string | undefined;
+  /** Shown in the cell while the tab is active — and, with no `glyph`,
+   * while inactive too (dimmed). */
+  icon: ReactNode;
+  /**
+   * Middle-click (`onAuxClick` button 1) closes the tab. A keyboard- and
+   * pointer-reachable close affordance still has to exist — normally a
+   * "Close" item in the host's own context menu, wired to the same
+   * callback — this only covers the middle-click gesture.
+   */
+  onClose?: (() => void) | undefined;
+  /** Fires on a (contained) left click: activate this tab. */
+  onSelect?: (() => void) | undefined;
+} & InspectorEntityTabPassthroughProps;
+/**
+ * Short abbreviation for a rail tab's inactive glyph: the filename stem,
+ * the first `length` characters; the cell uppercases it.
+ *
+ * A leading dot is part of the name, not an extension separator — a
+ * dotfile's own extension (a second dot further in) still drops, but the
+ * leading dot itself survives into the glyph: `entityTabGlyph(".gitignore")`
+ * is `".gi"`, not `""`.
+ */
+declare const entityTabGlyph: (name: string, length?: number) => string;
+//#endregion
+export { InspectorEntityTab, InspectorEntityTabProps, entityTabGlyph };

package/dist/inspector/entity-tab.js

@@ -0,0 +1,56 @@
+import { cn } from "../lib/utils.js";
+import { SIDE_RAIL_TAB_ICON_SIZE } from "./layout-tokens.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
+import { InspectorRailTab } from "./chrome.js";
+import { containedEventHandler } from "../hooks/use-contained-handler.js";
+import { resolveEntityTabActivateHandler, resolveEntityTabCloseHandler } from "./entity-tab.logic.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/inspector/entity-tab.tsx
+/**
+* One rail tab for an open entity: a bordered `InspectorRailTab` cell
+* showing the active tab's icon, with a tooltip carrying the full label.
+* Generic over what "entity" means — the host supplies the icon dispatch
+* (file type, task status, chat, …) and, for kinds that want it, the
+* inactive-state glyph; this only owns the cell's shared shape and
+* affordances.
+*/
+const InspectorEntityTab = ({ active, label, glyph, icon, onClose, onSelect, ...props }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(InspectorRailTab, {
+	...props,
+	active,
+	"aria-label": label,
+	onAuxClick: (event) => {
+		const close = resolveEntityTabCloseHandler(event.button, onClose);
+		if (close) {
+			event.preventDefault();
+			close();
+		}
+	},
+	onClick: containedEventHandler(resolveEntityTabActivateHandler(onSelect)),
+	children: !active && glyph !== void 0 ? /* @__PURE__ */ jsx("span", {
+		className: "text-[9px] leading-none font-semibold tracking-tight uppercase",
+		children: glyph
+	}) : /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center justify-center", SIDE_RAIL_TAB_ICON_SIZE, !active && "opacity-70"),
+		children: icon
+	})
+}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+	side: "left",
+	children: label
+})] });
+/**
+* Short abbreviation for a rail tab's inactive glyph: the filename stem,
+* the first `length` characters; the cell uppercases it.
+*
+* A leading dot is part of the name, not an extension separator — a
+* dotfile's own extension (a second dot further in) still drops, but the
+* leading dot itself survives into the glyph: `entityTabGlyph(".gitignore")`
+* is `".gi"`, not `""`.
+*/
+const entityTabGlyph = (name, length = 3) => {
+	const leadingDot = name.startsWith(".") ? "." : "";
+	const rest = leadingDot === "" ? name : name.slice(1);
+	const dot = rest.lastIndexOf(".");
+	return (leadingDot + (dot === -1 ? rest : rest.slice(0, dot))).slice(0, length);
+};
+//#endregion
+export { InspectorEntityTab, entityTabGlyph };

package/dist/inspector/entity-tab.logic.d.ts

@@ -0,0 +1,28 @@
+//#region src/inspector/entity-tab.logic.d.ts
+/**
+ * Pure activation/close-gesture policy for `InspectorEntityTab`, kept out
+ * of the component so it's unit-testable without a DOM: each function
+ * takes only the plain values a `MouseEvent` carries (or the host's
+ * optional callbacks), never the event object itself.
+ */
+/** Whether a mouse button number is the tab's "close" gesture
+ * (middle-click). */
+declare const isEntityTabCloseGesture: (button: number) => boolean;
+/**
+ * Resolves what an `onAuxClick` with this `button` should do: close the
+ * tab (the given `onClose`) when the gesture matches and the host
+ * supplied one, or nothing (`undefined`) otherwise. Returning `undefined`
+ * for "do nothing" (rather than a boolean) lets the component skip
+ * `preventDefault()` too when there's truly nothing to do, leaving the
+ * browser's own middle-click behavior alone.
+ */
+declare const resolveEntityTabCloseHandler: (button: number, onClose: (() => void) | undefined) => (() => void) | undefined;
+/**
+ * Resolves the tab's click/activation handler: `onSelect` when the host
+ * supplied one, a stable no-op otherwise, so the component always has a
+ * callable handler to hand to `containedEventHandler` regardless of
+ * whether the host cares about selection.
+ */
+declare const resolveEntityTabActivateHandler: (onSelect: (() => void) | undefined) => (() => void);
+//#endregion
+export { isEntityTabCloseGesture, resolveEntityTabActivateHandler, resolveEntityTabCloseHandler };

package/dist/inspector/entity-tab.logic.js

@@ -0,0 +1,32 @@
+//#region src/inspector/entity-tab.logic.ts
+/**
+* Pure activation/close-gesture policy for `InspectorEntityTab`, kept out
+* of the component so it's unit-testable without a DOM: each function
+* takes only the plain values a `MouseEvent` carries (or the host's
+* optional callbacks), never the event object itself.
+*/
+/** The `MouseEvent.button` value for a middle-click (the wheel / auxiliary
+* button) — the browser convention `onAuxClick` reports it under. */
+const MIDDLE_CLICK_BUTTON = 1;
+/** Whether a mouse button number is the tab's "close" gesture
+* (middle-click). */
+const isEntityTabCloseGesture = (button) => button === MIDDLE_CLICK_BUTTON;
+/**
+* Resolves what an `onAuxClick` with this `button` should do: close the
+* tab (the given `onClose`) when the gesture matches and the host
+* supplied one, or nothing (`undefined`) otherwise. Returning `undefined`
+* for "do nothing" (rather than a boolean) lets the component skip
+* `preventDefault()` too when there's truly nothing to do, leaving the
+* browser's own middle-click behavior alone.
+*/
+const resolveEntityTabCloseHandler = (button, onClose) => isEntityTabCloseGesture(button) ? onClose : void 0;
+/**
+* Resolves the tab's click/activation handler: `onSelect` when the host
+* supplied one, a stable no-op otherwise, so the component always has a
+* callable handler to hand to `containedEventHandler` regardless of
+* whether the host cares about selection.
+*/
+const resolveEntityTabActivateHandler = (onSelect) => onSelect ?? entityTabNoop;
+const entityTabNoop = () => void 0;
+//#endregion
+export { isEntityTabCloseGesture, resolveEntityTabActivateHandler, resolveEntityTabCloseHandler };

package/dist/inspector/facet-bar.d.ts

@@ -0,0 +1,46 @@
+//#region src/inspector/facet-bar.d.ts
+type InspectorFacetBarProps<F extends string> = {
+  facet: F;
+  facets: readonly F[];
+  /** Display label per facet. */
+  labels: Record<F, string>;
+  /**
+   * Facets rendered but not interactive — visible so users can find
+   * them, but clicking does nothing (e.g. an AI-suggestions chip
+   * before any proposals exist).
+   */
+  disabledFacets?: ReadonlySet<F> | undefined;
+  /**
+   * Bumping this replays a one-shot attention pulse on the active
+   * chip (e.g. after a background action changes it). Undefined or
+   * unchanged: no pulse.
+   */
+  pulseSeq?: number | undefined;
+  /**
+   * Suffix appended to the active facet's label, e.g. `"v1"` →
+   * "Preview · v1". Hidden on inactive chips so the row stays
+   * scannable.
+   */
+  activeBadge?: string | undefined;
+  /** Accessible name for the overflow chevron trigger. The host owns
+   * copy/translation; this only wires the affordance. */
+  overflowMenuLabel: string;
+  onChange: (next: F) => void;
+};
+/**
+ * Inspector subtab row: a single line of pill chips at toolbar-row
+ * height. Presentational and facet-agnostic — every inspector tab
+ * type (file-viewer facets, template-studio fields/clauses/history)
+ * drives it with its own facet union + labels so the row reads
+ * identically across the inspector.
+ *
+ * Labels are never truncated: when the row is too narrow for every
+ * chip, the ones that don't fit collapse into a trailing chevron
+ * (`˅`) dropdown. The active facet is pinned visible ahead of the rest
+ * so the current tab stays readable rather than hiding inside the menu
+ * — except at the narrowest widths, where not even the active chip fits
+ * beside the trigger; see `resolveFacetOverflow`'s narrow-width floor.
+ */
+declare const InspectorFacetBar: <F extends string>({ facet, facets, labels, disabledFacets, pulseSeq, activeBadge, overflowMenuLabel, onChange }: InspectorFacetBarProps<F>) => import("react").JSX.Element;
+//#endregion
+export { InspectorFacetBar, InspectorFacetBarProps };

package/dist/inspector/facet-bar.js

@@ -0,0 +1,166 @@
+import { cn } from "../lib/utils.js";
+import { TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
+import { Button } from "../components/button.js";
+import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuItem as MenuItem, DropdownMenuTrigger as MenuTrigger } from "../components/menu.js";
+import { resolveFacetOverflow } from "./facet-bar.logic.js";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/inspector/facet-bar.tsx
+/**
+* Inspector subtab row: a single line of pill chips at toolbar-row
+* height. Presentational and facet-agnostic — every inspector tab
+* type (file-viewer facets, template-studio fields/clauses/history)
+* drives it with its own facet union + labels so the row reads
+* identically across the inspector.
+*
+* Labels are never truncated: when the row is too narrow for every
+* chip, the ones that don't fit collapse into a trailing chevron
+* (`˅`) dropdown. The active facet is pinned visible ahead of the rest
+* so the current tab stays readable rather than hiding inside the menu
+* — except at the narrowest widths, where not even the active chip fits
+* beside the trigger; see `resolveFacetOverflow`'s narrow-width floor.
+*/
+const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, activeBadge, overflowMenuLabel, onChange }) => {
+	const lastPulseSeq = useRef(pulseSeq);
+	const containerRef = useRef(null);
+	const measureRef = useRef(null);
+	const [visibleCount, setVisibleCount] = useState(facets.length);
+	useEffect(() => {
+		if (pulseSeq === void 0 || pulseSeq === lastPulseSeq.current) return;
+		lastPulseSeq.current = pulseSeq;
+		const activeChip = containerRef.current?.querySelector("[data-facet-chip-active]");
+		if (activeChip instanceof HTMLElement) flashFacetChip(activeChip);
+	}, [pulseSeq]);
+	useEffect(() => {
+		const container = containerRef.current;
+		const measure = measureRef.current;
+		if (!container || !measure) return;
+		const recompute = () => {
+			const style = getComputedStyle(container);
+			const padX = (Number.parseFloat(style.paddingInlineStart) || 0) + (Number.parseFloat(style.paddingInlineEnd) || 0);
+			const gap = Number.parseFloat(style.columnGap) || 0;
+			const availableWidth = container.clientWidth - padX;
+			const cells = [...measure.children];
+			const triggerWidth = cells.at(-1)?.getBoundingClientRect().width ?? 0;
+			const chipWidths = cells.slice(0, facets.length).map((cell) => cell.getBoundingClientRect().width);
+			const policy = resolveFacetOverflow({
+				activeIndex: facets.indexOf(facet),
+				availableWidth,
+				chipWidths,
+				gap,
+				triggerWidth
+			});
+			setVisibleCount(policy.visibleCount);
+		};
+		const observer = new ResizeObserver(recompute);
+		observer.observe(container);
+		observer.observe(measure);
+		recompute();
+		return () => observer.disconnect();
+	}, [facets, facet]);
+	const overflowing = visibleCount < facets.length;
+	const activeIndex = facets.indexOf(facet);
+	let visibleFacets;
+	let overflowFacets;
+	if (!overflowing) {
+		visibleFacets = [...facets];
+		overflowFacets = [];
+	} else if (visibleCount === 0) {
+		visibleFacets = [];
+		overflowFacets = [...facets];
+	} else if (activeIndex < visibleCount) {
+		visibleFacets = facets.slice(0, visibleCount);
+		overflowFacets = facets.slice(visibleCount);
+	} else {
+		visibleFacets = [...facets.slice(0, visibleCount - 1), facet];
+		overflowFacets = facets.filter((value) => !visibleFacets.includes(value));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-background/85 supports-[backdrop-filter]:bg-background/65 sticky top-0 z-10 flex shrink-0 items-center gap-0.5 overflow-hidden border-b px-1.5 backdrop-blur", TOOLBAR_ROW_HEIGHT),
+		ref: containerRef,
+		children: [
+			visibleFacets.map((value) => /* @__PURE__ */ jsx(FacetChip, {
+				activeBadge,
+				disabled: disabledFacets?.has(value) ?? false,
+				isActive: value === facet,
+				label: labels[value],
+				onSelect: () => onChange(value)
+			}, value)),
+			overflowing && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+				"aria-label": overflowMenuLabel,
+				className: "ms-auto",
+				render: /* @__PURE__ */ jsx(Button, {
+					size: "icon-sm",
+					type: "button",
+					variant: "outline"
+				}),
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+			}), /* @__PURE__ */ jsx(MenuPopup, {
+				align: "end",
+				side: "bottom",
+				children: overflowFacets.map((value) => /* @__PURE__ */ jsx(MenuItem, {
+					disabled: disabledFacets?.has(value) ?? false,
+					onClick: () => onChange(value),
+					children: labels[value]
+				}, value))
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none invisible absolute flex w-max items-center gap-0.5",
+				ref: measureRef,
+				children: [facets.map((value) => /* @__PURE__ */ jsx("span", {
+					className: cn(CHIP_CLASS, INACTIVE_CHIP_CLASS),
+					children: labels[value]
+				}, value)), /* @__PURE__ */ jsx("span", { className: "size-8 shrink-0 rounded-lg border sm:size-7" })]
+			})
+		]
+	});
+};
+/** One-shot attention flash: a ring that appears with a couple of opacity
+* dips over 1.4s, then fades — the same imperative Web Animations API
+* technique the rail's `flashTabElement` uses, so a single call finishes on
+* its own without any pulsing state to track or clean up. */
+const flashFacetChip = (el) => {
+	const ring = "0 0 0 2px var(--color-foreground-disabled)";
+	el.animate([
+		{
+			boxShadow: ring,
+			opacity: 1
+		},
+		{
+			boxShadow: ring,
+			opacity: .5
+		},
+		{
+			boxShadow: ring,
+			opacity: 1
+		},
+		{
+			boxShadow: ring,
+			opacity: .5
+		},
+		{
+			boxShadow: "0 0 0 2px transparent",
+			opacity: 1
+		}
+	], {
+		duration: 1400,
+		easing: "ease-in-out"
+	});
+};
+const CHIP_CLASS = "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium whitespace-nowrap transition-colors";
+const INACTIVE_CHIP_CLASS = "text-muted-foreground hover:bg-muted hover:text-foreground";
+const FacetChip = ({ label, isActive, disabled, activeBadge, onSelect }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	render: /* @__PURE__ */ jsx("button", {
+		className: cn(CHIP_CLASS, isActive ? "bg-foreground text-background" : INACTIVE_CHIP_CLASS, disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"),
+		"data-facet-chip-active": isActive ? "" : void 0,
+		disabled,
+		onClick: onSelect,
+		type: "button"
+	}),
+	children: label
+}), /* @__PURE__ */ jsx(TooltipPopup, { children: isActive && activeBadge !== void 0 ? `${label} · ${activeBadge}` : label })] });
+//#endregion
+export { InspectorFacetBar };

package/dist/inspector/facet-bar.logic.d.ts

@@ -0,0 +1,51 @@
+//#region src/inspector/facet-bar.logic.d.ts
+/**
+ * Pure overflow policy for `InspectorFacetBar`: given the row's available
+ * width and each chip's natural (measured) width, decides how many chips
+ * stay visible and whether the overflow trigger renders — kept out of the
+ * component so it's unit-testable without a DOM or a `ResizeObserver`.
+ */
+type FacetOverflowInput = {
+  /** Width inside the row available to the chips (the trigger's own
+   * footprint is reserved out of this by the policy, not by the caller). */
+  availableWidth: number;
+  /** Each chip's natural width, in the same order as the facets they
+   * represent. */
+  chipWidths: readonly number[];
+  /** Index into `chipWidths` of the active chip — always kept visible
+   * whenever anything is. */
+  activeIndex: number;
+  /** The overflow trigger's own footprint, reserved alongside the chips
+   * whenever not every chip fits. */
+  triggerWidth: number;
+  /** Horizontal gap between adjacent chips, and between the last chip and
+   * the trigger. */
+  gap?: number;
+};
+type FacetOverflowPolicy = {
+  /** How many chips are visible. Counts a prefix of `chipWidths` in their
+   * given order when the active chip already falls inside that prefix;
+   * otherwise counts the active chip plus however many others (in order,
+   * skipping the active one) fit alongside it. `0` is the narrow-width
+   * floor: not even the active chip fits, so nothing but the trigger
+   * shows. */
+  visibleCount: number;
+  /** Whether the overflow trigger renders at all. */
+  showOverflowTrigger: boolean;
+};
+/**
+ * Decides the facet row's visible/overflow split.
+ *
+ * Narrow-width floor: if even the active chip cannot fit beside the
+ * trigger, showing it anyway would push the trigger past
+ * `availableWidth` — the row clips overflow, so the trigger (the only way
+ * to reach ANY facet from this row) would become unreachable. Rather than
+ * shrink the active chip below its natural width (this policy has no
+ * minimum-width input to shrink to), this drops the active chip from the
+ * visible row too and shows only the trigger: every facet, including the
+ * active one, still reaches through the overflow menu, and the trigger
+ * itself always stays on screen.
+ */
+declare const resolveFacetOverflow: ({ availableWidth, chipWidths, activeIndex, triggerWidth, gap }: FacetOverflowInput) => FacetOverflowPolicy;
+//#endregion
+export { FacetOverflowInput, FacetOverflowPolicy, resolveFacetOverflow };

package/dist/inspector/facet-bar.logic.js

@@ -0,0 +1,53 @@
+//#region src/inspector/facet-bar.logic.ts
+const sumWithGaps = (widths, gap) => widths.reduce((sum, width, index) => sum + width + (index > 0 ? gap : 0), 0);
+/**
+* Decides the facet row's visible/overflow split.
+*
+* Narrow-width floor: if even the active chip cannot fit beside the
+* trigger, showing it anyway would push the trigger past
+* `availableWidth` — the row clips overflow, so the trigger (the only way
+* to reach ANY facet from this row) would become unreachable. Rather than
+* shrink the active chip below its natural width (this policy has no
+* minimum-width input to shrink to), this drops the active chip from the
+* visible row too and shows only the trigger: every facet, including the
+* active one, still reaches through the overflow menu, and the trigger
+* itself always stays on screen.
+*/
+const resolveFacetOverflow = ({ availableWidth, chipWidths, activeIndex, triggerWidth, gap = 0 }) => {
+	if (sumWithGaps(chipWidths, gap) <= availableWidth) return {
+		visibleCount: chipWidths.length,
+		showOverflowTrigger: false
+	};
+	let used = 0;
+	let count = 0;
+	for (const width of chipWidths) {
+		const add = width + (count > 0 ? gap : 0);
+		if (used + add + gap + triggerWidth > availableWidth) break;
+		used += add;
+		count += 1;
+	}
+	if (activeIndex < count) return {
+		visibleCount: count,
+		showOverflowTrigger: true
+	};
+	const activeWidth = chipWidths[activeIndex] ?? 0;
+	if (activeWidth + gap + triggerWidth > availableWidth) return {
+		visibleCount: 0,
+		showOverflowTrigger: true
+	};
+	used = activeWidth;
+	count = 0;
+	for (const [index, width] of chipWidths.entries()) {
+		if (index === activeIndex) continue;
+		const add = width + gap;
+		if (used + add + gap + triggerWidth > availableWidth) break;
+		used += add;
+		count += 1;
+	}
+	return {
+		visibleCount: count + 1,
+		showOverflowTrigger: true
+	};
+};
+//#endregion
+export { resolveFacetOverflow };

package/dist/inspector/index.d.ts

@@ -1,7 +1,9 @@
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
 import { InspectorDock } from "./dock.js";
+import { InspectorEntityTab, entityTabGlyph } from "./entity-tab.js";
+import { InspectorFacetBar } from "./facet-bar.js";
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.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_EDITOR_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_EDITOR_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, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, 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 };
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_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, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, 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, entityTabGlyph, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/index.js

@@ -2,6 +2,8 @@ import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZ
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_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 { InspectorDock } from "./dock.js";
+import { InspectorEntityTab, entityTabGlyph } from "./entity-tab.js";
+import { InspectorFacetBar } from "./facet-bar.js";
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.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_EDITOR_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, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, 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 };
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_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, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, 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, entityTabGlyph, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

package/dist/kanban/band-peek.d.ts

@@ -1,25 +1,22 @@
 //#region src/kanban/band-peek.d.ts
 /**
- * The peek a collapsed band opens while a pointer rests on its folded slot,
- * as a state machine with an injectable scheduler so its timing rules can be
- * tested without a DOM.
+ * The peek a collapsed band opens while a dragged card rests on its folded
+ * slot, as a state machine with an injectable scheduler so its timing rules
+ * can be tested without a DOM. A plain hover never peeks: the peek exists so
+ * a drag can still land on a specific column inside a folded band, and the
+ * board only feeds the controller drag events.
  *
- * Two rules keep a peek from fighting the pointer:
- *
- *  - A slot that appeared under the pointer does not peek. Folding a band
- *    from its caption leaves the new slot right under the cursor; the first
- *    movement there must not reopen what was just closed. The band is
- *    suppressed until the pointer leaves the slot once.
- *  - A peek ends only after the pointer has left every part of the open
- *    band for a short linger. The band renders as separate elements (its
- *    caption, then its columns in each lane), so moving from the caption
- *    down into a column crosses an element boundary; without the linger the
- *    band would fold under the pointer and the slot would peek it straight
- *    back open.
+ * One rule keeps a peek from fighting the drag: it ends only after the drag
+ * has left every part of the open band for a short linger. The band renders
+ * as separate elements (its caption, then its columns in each lane), so
+ * moving from the caption down into a column crosses an element boundary;
+ * without the linger the band would fold under the card and the slot would
+ * peek it straight back open. The end of the drag, wherever it lands, ends
+ * the peek at once.
  */
-/** How long a pointer rests on a folded slot before the band peeks open. */
+/** How long a dragged card rests on a folded slot before the band peeks open. */
 declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
-/** How long the pointer may be outside an open band before the peek ends. */
+/** How long the drag may be outside an open band before the peek ends. */
 declare const KANBAN_BAND_PEEK_LINGER_MS = 150;
 /** Runs `callback` after `ms`; the returned function cancels it. */
 type BandPeekScheduler = (callback: () => void, ms: number) => () => void;
@@ -32,21 +29,18 @@ type BandPeekControllerOptions = {
   schedule?: BandPeekScheduler;
 };
 type BandPeekController = {
-  /** The pointer moved inside a band's folded slot. */
-  slotPointerMove: (bandId: string) => void;
-  /** The pointer left a band's folded slot. */
-  slotPointerLeave: (bandId: string) => void;
-  /** The pointer entered a part of a band that is rendered open. */
-  openPointerEnter: (bandId: string) => void;
-  /** The pointer left a part of a band that is rendered open. */
-  openPointerLeave: (bandId: string) => void;
-  /**
-   * The band was folded by a pointer on its caption, so its slot now sits
-   * under the pointer; it must not peek until the pointer leaves the slot.
-   */
-  foldedUnderPointer: (bandId: string) => void;
+  /** A dragged card moved over a band's folded slot. */
+  slotDragOver: (bandId: string) => void;
+  /** The drag left a band's folded slot. */
+  slotDragLeave: (bandId: string) => void;
+  /** The drag entered a part of a band that is rendered open. */
+  openDragEnter: (bandId: string) => void;
+  /** The drag left a part of a band that is rendered open. */
+  openDragLeave: (bandId: string) => void;
+  /** The drag ended (dropped or cancelled), wherever it was. */
+  dragEnded: () => void;
   /**
-   * The band was folded without a pointer on it (keyboard, or a controlled
+   * The band was folded (from its caption, the keyboard, or a controlled
    * caller): any peek ends, and the slot may peek on the next hover.
    */
   bandFolded: (bandId: string) => void;
@@ -54,8 +48,7 @@ type BandPeekController = {
   bandExpanded: (bandId: string) => void;
   /**
    * A band's folded slot left the DOM (the band expanded or disappeared) so
-   * a peek it was about to open, or a suppression it carried, no longer
-   * applies.
+   * a peek it was about to open no longer applies.
    */
   slotUnmounted: (bandId: string) => void;
   /** Ends any pending timer, for unmount. */