@stll/ui 0.0.1-placeholder.0 → 0.2.0

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/lib/button-disposition.d.ts

@@ -0,0 +1,63 @@
+import * as React$1 from "react";
+//#region src/lib/button-disposition.d.ts
+/**
+ * How a button expresses "unavailable".
+ *
+ * `buttonVariants` carries `disabled:pointer-events-none`, and the browser
+ * suppresses pointer and focus events on a natively disabled control anyway, so
+ * a disabled button never receives hover or focus. A tooltip attached to it can
+ * therefore never open, which is exactly when the user most needs to be told
+ * why the action is unavailable. When there is a tooltip to show, the button
+ * switches to the ARIA accessible-disabled pattern instead: it stays in the tab
+ * order and keeps receiving pointer events, while every activation path is
+ * blocked (see `blockDisabledActivation`).
+ *
+ * This mirrors Base UI's own `focusableWhenDisabled` disposition
+ * (`useFocusableWhenDisabled`): `aria-disabled` instead of `disabled`, focusable,
+ * and non-`Tab` key defaults suppressed.
+ */
+declare const BUTTON_DISPOSITION: {
+  readonly enabled: "enabled";
+  /** Native `disabled`: out of the tab order, inert to pointer and keyboard. */
+  readonly nativeDisabled: "native-disabled";
+  /** `aria-disabled`: focusable and hoverable so its tooltip can still open. */
+  readonly accessibleDisabled: "accessible-disabled";
+};
+type ButtonDisposition = (typeof BUTTON_DISPOSITION)[keyof typeof BUTTON_DISPOSITION];
+type ButtonDispositionInput = {
+  disabled: boolean | undefined;
+  loading: boolean | undefined;
+  /** Resolved tooltip content, i.e. what `renderTooltipTrigger` would mount. */
+  tooltip: React$1.ReactNode;
+};
+declare const resolveButtonDisposition: ({ disabled, loading, tooltip }: ButtonDispositionInput) => ButtonDisposition;
+/**
+ * The parts of a React synthetic event these blockers touch.
+ *
+ * `preventBaseUIHandler` is added by Base UI's `mergeProps` to the rightmost
+ * handler in a merged chain; calling it stops the handlers merged to its left,
+ * which is how a caller's own `onClick` is suppressed.
+ */
+type BlockableEvent = {
+  preventDefault: () => void;
+  preventBaseUIHandler?: (() => void) | undefined;
+};
+/**
+ * Swallow an activation on an `aria-disabled` control.
+ *
+ * `preventDefault()` is what keeps a `type="submit"` button from submitting its
+ * form: the browser's form-submission default runs off the click event, and
+ * implicit submission (Enter in a text field) dispatches a click at the form's
+ * default button, so both paths funnel through here.
+ */
+declare const blockDisabledActivation: (event: BlockableEvent) => void;
+/**
+ * The keyboard counterpart. `Tab` keeps its default so focus can leave the
+ * control; suppressing the default on `Enter`/`Space` stops the browser from
+ * synthesizing the click that would activate or submit.
+ */
+declare const blockDisabledKeyActivation: (event: BlockableEvent & {
+  key: string;
+}) => void;
+//#endregion
+export { BUTTON_DISPOSITION, ButtonDisposition, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition };

package/dist/lib/button-disposition.js

@@ -0,0 +1,52 @@
+import { hasTooltipContent } from "./tooltip-content.js";
+//#region src/lib/button-disposition.ts
+/**
+* How a button expresses "unavailable".
+*
+* `buttonVariants` carries `disabled:pointer-events-none`, and the browser
+* suppresses pointer and focus events on a natively disabled control anyway, so
+* a disabled button never receives hover or focus. A tooltip attached to it can
+* therefore never open, which is exactly when the user most needs to be told
+* why the action is unavailable. When there is a tooltip to show, the button
+* switches to the ARIA accessible-disabled pattern instead: it stays in the tab
+* order and keeps receiving pointer events, while every activation path is
+* blocked (see `blockDisabledActivation`).
+*
+* This mirrors Base UI's own `focusableWhenDisabled` disposition
+* (`useFocusableWhenDisabled`): `aria-disabled` instead of `disabled`, focusable,
+* and non-`Tab` key defaults suppressed.
+*/
+const BUTTON_DISPOSITION = {
+	enabled: "enabled",
+	/** Native `disabled`: out of the tab order, inert to pointer and keyboard. */
+	nativeDisabled: "native-disabled",
+	/** `aria-disabled`: focusable and hoverable so its tooltip can still open. */
+	accessibleDisabled: "accessible-disabled"
+};
+const resolveButtonDisposition = ({ disabled, loading, tooltip }) => {
+	if (disabled !== true && loading !== true) return BUTTON_DISPOSITION.enabled;
+	return hasTooltipContent(tooltip) ? BUTTON_DISPOSITION.accessibleDisabled : BUTTON_DISPOSITION.nativeDisabled;
+};
+/**
+* Swallow an activation on an `aria-disabled` control.
+*
+* `preventDefault()` is what keeps a `type="submit"` button from submitting its
+* form: the browser's form-submission default runs off the click event, and
+* implicit submission (Enter in a text field) dispatches a click at the form's
+* default button, so both paths funnel through here.
+*/
+const blockDisabledActivation = (event) => {
+	event.preventBaseUIHandler?.();
+	event.preventDefault();
+};
+/**
+* The keyboard counterpart. `Tab` keeps its default so focus can leave the
+* control; suppressing the default on `Enter`/`Space` stops the browser from
+* synthesizing the click that would activate or submit.
+*/
+const blockDisabledKeyActivation = (event) => {
+	event.preventBaseUIHandler?.();
+	if (event.key !== "Tab") event.preventDefault();
+};
+//#endregion
+export { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition };

package/dist/lib/overlay-layer.d.ts

@@ -0,0 +1,22 @@
+//#region src/lib/overlay-layer.d.ts
+declare const OVERLAY_LAYER_CLASS_NAMES: {
+  /** Docked composer, suggestion chips, and other in-pane floating chrome. */
+  readonly chrome: "z-[80]";
+  /** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
+  readonly default: "z-[85]";
+  /** Search sits a hair above a plain dialog so its own popup wins. */
+  readonly search: "z-[86]";
+  /**
+   * Transient popups — menu, select, combobox, context menus. Above everything
+   * including the toast viewport (z-[90]), because any of them can be opened
+   * *from* a dialog, a popover or a toast action and must cover its opener.
+   * They sat at z-50 alongside dialogs, so which one won was decided by portal
+   * mount order: a select inside a filter popover rendered behind it.
+   */
+  readonly popup: "z-[100]";
+  /** Historical alias for `popup`; Search's own menus use the same band. */
+  readonly "search-child": "z-[100]";
+};
+type OverlayLayer = keyof typeof OVERLAY_LAYER_CLASS_NAMES;
+//#endregion
+export { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer };

package/dist/lib/overlay-layer.js

@@ -0,0 +1,21 @@
+//#region src/lib/overlay-layer.ts
+const OVERLAY_LAYER_CLASS_NAMES = {
+	/** Docked composer, suggestion chips, and other in-pane floating chrome. */
+	chrome: "z-[80]",
+	/** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
+	default: "z-[85]",
+	/** Search sits a hair above a plain dialog so its own popup wins. */
+	search: "z-[86]",
+	/**
+	* Transient popups — menu, select, combobox, context menus. Above everything
+	* including the toast viewport (z-[90]), because any of them can be opened
+	* *from* a dialog, a popover or a toast action and must cover its opener.
+	* They sat at z-50 alongside dialogs, so which one won was decided by portal
+	* mount order: a select inside a filter popover rendered behind it.
+	*/
+	popup: "z-[100]",
+	/** Historical alias for `popup`; Search's own menus use the same band. */
+	"search-child": "z-[100]"
+};
+//#endregion
+export { OVERLAY_LAYER_CLASS_NAMES };

package/dist/lib/tab-order.d.ts

@@ -0,0 +1,15 @@
+//#region src/lib/tab-order.d.ts
+/**
+ * Whether a committed tab list holds different elements, or the same elements
+ * in a different order, than the previous commit.
+ *
+ * Base UI measures the tabs indicator during render, so it reads the DOM as it
+ * stood before the commit. Its correction is a `ResizeObserver`, which catches
+ * an insertion or a removal (the list's own width changes) but not a reorder:
+ * there the tabs swap places without anything changing size. Detecting that is
+ * the whole of the workaround, so compare identity rather than count, because
+ * React moves the same nodes when it reorders keyed children.
+ */
+declare const hasTabOrderChanged: <T>(previous: readonly T[], next: readonly T[]) => boolean;
+//#endregion
+export { hasTabOrderChanged };

package/dist/lib/tab-order.js

@@ -0,0 +1,15 @@
+//#region src/lib/tab-order.ts
+/**
+* Whether a committed tab list holds different elements, or the same elements
+* in a different order, than the previous commit.
+*
+* Base UI measures the tabs indicator during render, so it reads the DOM as it
+* stood before the commit. Its correction is a `ResizeObserver`, which catches
+* an insertion or a removal (the list's own width changes) but not a reorder:
+* there the tabs swap places without anything changing size. Detecting that is
+* the whole of the workaround, so compare identity rather than count, because
+* React moves the same nodes when it reorders keyed children.
+*/
+const hasTabOrderChanged = (previous, next) => previous.length !== next.length || next.some((tab, index) => tab !== previous[index]);
+//#endregion
+export { hasTabOrderChanged };

package/dist/lib/tooltip-content.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+//#region src/lib/tooltip-content.d.ts
+/**
+ * Whether a tooltip value would actually render a popup.
+ *
+ * Single source of truth for "there is a tooltip": `renderTooltipTrigger`
+ * decides whether to mount one, and `resolveButtonDisposition` decides whether
+ * a disabled button has to stay hoverable so that popup can open. Two copies of
+ * this predicate would drift into a button that suppresses its own tooltip.
+ */
+declare const hasTooltipContent: (content: React$1.ReactNode) => boolean;
+//#endregion
+export { hasTooltipContent };

package/dist/lib/tooltip-content.js

@@ -0,0 +1,12 @@
+//#region src/lib/tooltip-content.ts
+/**
+* Whether a tooltip value would actually render a popup.
+*
+* Single source of truth for "there is a tooltip": `renderTooltipTrigger`
+* decides whether to mount one, and `resolveButtonDisposition` decides whether
+* a disabled button has to stay hoverable so that popup can open. Two copies of
+* this predicate would drift into a button that suppresses its own tooltip.
+*/
+const hasTooltipContent = (content) => content !== void 0 && content !== null && content !== "" && content !== false;
+//#endregion
+export { hasTooltipContent };

package/dist/lib/utils.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue } from "clsx";
+import * as React$1 from "react";
+//#region src/lib/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Compose multiple refs into a single ref callback.
+ * Adapted from `@radix-ui/react-compose-refs` (MIT).
+ *
+ * Collects cleanup functions returned by React 19 ref
+ * callbacks and returns a combined cleanup so React can
+ * invoke it on unmount instead of re-calling with `null`.
+ *
+ * Use this rather than merging refs inline: forwarding a
+ * caller's return value verbatim makes React read whatever
+ * their callback happened to return as a cleanup, and warn
+ * when it is neither a function nor `undefined`.
+ */
+declare const composeRefs: <T>(...refs: (React$1.Ref<T> | undefined)[]) => ((node: T | null) => (() => void) | undefined);
+//#endregion
+export { cn, composeRefs };

package/dist/lib/utils.js

@@ -0,0 +1,41 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* Compose multiple refs into a single ref callback.
+* Adapted from `@radix-ui/react-compose-refs` (MIT).
+*
+* Collects cleanup functions returned by React 19 ref
+* callbacks and returns a combined cleanup so React can
+* invoke it on unmount instead of re-calling with `null`.
+*
+* Use this rather than merging refs inline: forwarding a
+* caller's return value verbatim makes React read whatever
+* their callback happened to return as a cleanup, and warn
+* when it is neither a function nor `undefined`.
+*/
+const composeRefs = (...refs) => (node) => {
+	const cleanups = [];
+	for (const ref of refs) if (typeof ref === "function") {
+		const cleanup = ref(node);
+		if (typeof cleanup === "function") cleanups.push(() => {
+			cleanup();
+		});
+		else if (node !== null) cleanups.push(() => {
+			ref(null);
+		});
+	} else if (ref !== void 0 && ref !== null) {
+		ref.current = node;
+		if (node !== null) cleanups.push(() => {
+			ref.current = null;
+		});
+	}
+	if (cleanups.length > 0) return () => {
+		for (const cleanup of cleanups) cleanup();
+	};
+};
+//#endregion
+export { cn, composeRefs };