@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/hooks/use-contained-handler.js

@@ -0,0 +1,54 @@
+//#region src/hooks/use-contained-handler.ts
+/**
+* Wrap a React event handler so it only fires when the event target
+* is a DOM descendant of the given ref.
+*
+* React forwards synthetic events through the parent React tree even
+* when descendants are rendered via createPortal. That makes it unsafe
+* for a parent element to attach `onMouseDown`, `onClick`, `onFocus`,
+* etc. that side-effect (focus steal, preventDefault, selection changes)
+* under the assumption "the target lives inside me" — a portaled popup
+* (Dialog, Combobox, Tooltip) silently bypasses the DOM boundary and
+* triggers the side effect, dismissing itself.
+*
+* Only use for event types whose `target` is the meaningful subject of
+* the event: pointer/mouse/touch/click and `focus`. Do **not** wrap
+* `onBlur`: blur's `target` is the element losing focus, not the new
+* focus destination, so the containment test cannot answer "is focus
+* leaving for a portaled child?". For that case test `relatedTarget`
+* directly inside the handler.
+*
+* The `require-contained-handler` oxlint rule enforces this on any JSX
+* element carrying both `ref={…}` and one of the watched handler props;
+* `containedEventHandler` covers elements that do not otherwise need a ref.
+*
+* @example
+*   const barRef = useRef<HTMLDivElement>(null);
+*   return (
+*     <div
+*       ref={barRef}
+*       onMouseDown={containedHandler(barRef, (e) => {
+*         e.preventDefault();
+*         focusEditor();
+*       })}
+*     >
+*       ...
+*     </div>
+*   );
+*/
+const containedHandler = (ref, handler) => (event) => {
+	if (handler === void 0) return;
+	const container = ref?.current ?? null;
+	if (container !== null && event.target instanceof Node && !container.contains(event.target)) return;
+	handler(event);
+};
+/**
+* Contain a synchronous JSX handler to its own DOM subtree without a ref.
+* Prefer this form when the element does not otherwise need a ref.
+*/
+const containedEventHandler = (handler) => (event) => {
+	if (event.currentTarget instanceof Node && event.target instanceof Node && !event.currentTarget.contains(event.target)) return;
+	handler(event);
+};
+//#endregion
+export { containedEventHandler, containedHandler };

package/dist/hooks/use-content-dir.d.ts

@@ -0,0 +1,48 @@
+//#region src/hooks/use-content-dir.d.ts
+/**
+ * Resolve the `dir` for a free-text field so the caret and alignment follow
+ * the ambient UI direction while the field is empty, then switch to the typed
+ * content's own direction once the user starts writing.
+ *
+ * `dir="auto"` on its own is wrong for this: the bidi heuristic reads the
+ * field's *value*, and an empty value has no strong directional character, so
+ * it falls back to LTR — leaving the caret on the left even under an RTL UI.
+ * Here an empty field omits `dir` entirely (so it inherits the document
+ * direction: caret on the right in Arabic), and a non-empty field uses
+ * `dir="auto"` (Arabic content → RTL, Latin content → LTR, re-evaluated live).
+ *
+ * An explicit `dir="ltr"`/`dir="rtl"` is treated as a forced direction and
+ * returned unchanged (e.g. always-LTR numeric fields).
+ *
+ * Empty↔non-empty is the only transition that changes direction, so the
+ * uncontrolled path stores a boolean and the state setter no-ops (no re-render)
+ * on every keystroke that doesn't cross that boundary.
+ */
+type FieldValue = string | number | readonly string[] | undefined;
+type UseContentDirArgs = {
+  dir: string | undefined;
+  value: FieldValue;
+  defaultValue: FieldValue;
+};
+type UseContentDirResult = {
+  dir: "ltr" | "rtl" | "auto" | undefined;
+  /**
+   * Feed the field's current text on every change so the uncontrolled path can
+   * detect the empty↔non-empty transition. No-op for controlled fields, whose
+   * direction is derived from `value` on render.
+   */
+  trackValue: (text: string) => void;
+};
+declare const isStructuredInputType: (type: string | undefined) => boolean;
+/**
+ * Content-derived direction for a controlled field value: `"auto"` when there
+ * is content, `undefined` when empty (so the field inherits the ambient UI
+ * direction — caret on the RTL side under Arabic). Use this for a raw
+ * `<input>`/`<textarea>` whose value you already control; the shared
+ * `<Input>`/`<Textarea>` apply it for you via `useContentDir`, which also
+ * tracks the empty↔non-empty transition for uncontrolled fields.
+ */
+declare const contentDir: (value: FieldValue) => "auto" | undefined;
+declare const useContentDir: ({ dir, value, defaultValue }: UseContentDirArgs) => UseContentDirResult;
+//#endregion
+export { contentDir, isStructuredInputType, useContentDir };

package/dist/hooks/use-content-dir.js

@@ -0,0 +1,45 @@
+import { useState } from "react";
+//#region src/hooks/use-content-dir.ts
+const STRUCTURED_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"email",
+	"url",
+	"tel",
+	"number",
+	"password",
+	"date",
+	"datetime-local",
+	"time",
+	"month",
+	"week"
+]);
+const isStructuredInputType = (type) => type !== void 0 && STRUCTURED_INPUT_TYPES.has(type);
+const hasText = (value) => {
+	if (typeof value === "string") return value.length > 0;
+	if (typeof value === "number") return true;
+	return Array.isArray(value) && value.length > 0;
+};
+/**
+* Content-derived direction for a controlled field value: `"auto"` when there
+* is content, `undefined` when empty (so the field inherits the ambient UI
+* direction — caret on the RTL side under Arabic). Use this for a raw
+* `<input>`/`<textarea>` whose value you already control; the shared
+* `<Input>`/`<Textarea>` apply it for you via `useContentDir`, which also
+* tracks the empty↔non-empty transition for uncontrolled fields.
+*/
+const contentDir = (value) => hasText(value) ? "auto" : void 0;
+const useContentDir = ({ dir, value, defaultValue }) => {
+	const forcedDir = dir === "ltr" || dir === "rtl" ? dir : void 0;
+	const isControlled = value !== void 0;
+	const [uncontrolledHasText, setUncontrolledHasText] = useState(() => hasText(defaultValue));
+	const contentPresent = isControlled ? hasText(value) : uncontrolledHasText;
+	return {
+		dir: forcedDir ?? (contentPresent ? "auto" : void 0),
+		trackValue: (text) => {
+			if (isControlled) return;
+			const next = text.length > 0;
+			setUncontrolledHasText((previous) => previous === next ? previous : next);
+		}
+	};
+};
+//#endregion
+export { contentDir, isStructuredInputType, useContentDir };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+const MOBILE_QUERY = `(max-width: 767px)`;
+const subscribe = (onChange) => {
+	const mql = window.matchMedia(MOBILE_QUERY);
+	mql.addEventListener("change", onChange);
+	return () => mql.removeEventListener("change", onChange);
+};
+const getSnapshot = () => window.innerWidth < MOBILE_BREAKPOINT;
+const getServerSnapshot = () => false;
+function useIsMobile() {
+	return React$1.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-viewport-width.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-viewport-width.d.ts
+/** Viewport width in CSS pixels, tracked across resizes. */
+declare function useViewportWidth(): number;
+//#endregion
+export { useViewportWidth };

package/dist/hooks/use-viewport-width.js

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+//#region src/hooks/use-viewport-width.ts
+const subscribe = (onChange) => {
+	window.addEventListener("resize", onChange);
+	return () => window.removeEventListener("resize", onChange);
+};
+const getSnapshot = () => window.innerWidth;
+const getServerSnapshot = () => 0;
+/** Viewport width in CSS pixels, tracked across resizes. */
+function useViewportWidth() {
+	return React$1.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { useViewportWidth };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
+import { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer } from "./lib/overlay-layer.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
+import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
+import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
+import { buttonAccessibleDisabledClass, buttonVariants } from "./components/button-variants.js";
+import { Button } from "./components/button.js";
+import { Checkbox } from "./components/checkbox.js";
+import { ColorPicker, ColorPickerContent, ColorPickerContentProps, ColorPickerProps, ColorPreset, DEFAULT_PRESETS } from "./components/color-picker.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter } from "./components/combobox.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogContent as DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport } from "./components/dialog.js";
+import { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut } from "./components/command.js";
+import { DatePickerPopover, DatePickerPopoverProps } from "./components/date-picker-popover.js";
+import { Input, InputProps } from "./components/input.js";
+import { DestructiveActionConfirmation, useDestructiveActionConfirmation } from "./components/destructive-action-confirmation.js";
+import { DestructiveConfirmDialog, DestructiveConfirmDialogProps } from "./components/destructive-confirm-dialog.js";
+import { DirectionalIcon } from "./components/directional-icon.js";
+import { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity } from "./components/field.js";
+import { Form } from "./components/form.js";
+import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "./components/frame.js";
+import { HexColorPicker, HexColorPickerProps } from "./components/hex-color-picker.js";
+import { Textarea, TextareaProps } from "./components/textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/input-group.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./components/input-otp.js";
+import { Label } from "./components/label.js";
+import { DropdownMenu as Menu, DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuCreateHandle as MenuCreateHandle, DropdownMenuGroup as MenuGroup, DropdownMenuItem as MenuItem, DropdownMenuLabel as MenuGroupLabel, DropdownMenuPortal as MenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuShortcut as MenuShortcut, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger, DropdownMenuTrigger as MenuTrigger } from "./components/menu.js";
+import { OutlineItem, OutlineRail, OutlineRailProps } from "./components/outline-rail.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/pagination.js";
+import { Popover, PopoverClose, PopoverContent as PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger } from "./components/popover.js";
+import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCardTrigger as PreviewCardTrigger, PreviewCardPrimitive } from "./components/preview-card.js";
+import { MenuPreviewLayout, PreviewPane } from "./components/preview-pane.js";
+import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
+import { ScrollToTop, ScrollToTopProps } from "./components/scroll-to-top.js";
+import { SecretInput, SecretInputProps } from "./components/secret-input.js";
+import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
+import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
+import { Separator, TextSeparator } from "./components/separator.js";
+import { Sheet, SheetBackdrop, SheetClose, SheetContent as SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetSide, SheetTitle, SheetTrigger } from "./components/sheet.js";
+import { Skeleton } from "./components/skeleton.js";
+import { StellaMark } from "./components/stella-mark.js";
+import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
+import { SortDirection, SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
+import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
+import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastPosition, ToastProvider, stellaToast } from "./components/toast.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+import { TableColumnCapabilities, TableColumnDescriptor, TableSchema, duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
+import { containedEventHandler, containedHandler } from "./hooks/use-contained-handler.js";
+import { contentDir, isStructuredInputType, useContentDir } from "./hooks/use-content-dir.js";
+import { useIsMobile } from "./hooks/use-mobile.js";
+import { useViewportWidth } from "./hooks/use-viewport-width.js";
+import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./inspector/chrome.js";
+import { InspectorDock } from "./inspector/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 "./inspector/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 "./inspector/pane-width.js";
+import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./inspector/use-pane-width.js";
+import "./inspector/index.js";
+import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./kanban/card-properties.js";
+import { KanbanCardShell, KanbanCardShellProps } from "./kanban/card-shell.js";
+import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-header.js";
+import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
+import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import "./kanban/index.js";
+import { cn, composeRefs } from "./lib/utils.js";
+import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, 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, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanSchema, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type ResolveKanbanGroupingParams, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -0,0 +1,65 @@
+import { cn, composeRefs } from "./lib/utils.js";
+import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "./lib/overlay-layer.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
+import { BidiText, UserText } from "./components/bidi-text.js";
+import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
+import { DirectionalIcon } from "./components/directional-icon.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
+import { buttonAccessibleDisabledClass, buttonVariants } from "./components/button-variants.js";
+import { Button } from "./components/button.js";
+import { Checkbox } from "./components/checkbox.js";
+import { ColorPicker, ColorPickerContent, DEFAULT_PRESETS } from "./components/color-picker.js";
+import { containedEventHandler, containedHandler } from "./hooks/use-contained-handler.js";
+import { contentDir, isStructuredInputType, useContentDir } from "./hooks/use-content-dir.js";
+import { Input } from "./components/input.js";
+import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter } from "./components/combobox.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogContent as DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport } from "./components/dialog.js";
+import { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut } from "./components/command.js";
+import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
+import { Popover, PopoverClose, PopoverContent as PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger } from "./components/popover.js";
+import { DatePickerPopover } from "./components/date-picker-popover.js";
+import { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity } from "./components/field.js";
+import { DestructiveActionConfirmation, useDestructiveActionConfirmation } from "./components/destructive-action-confirmation.js";
+import { DestructiveConfirmDialog } from "./components/destructive-confirm-dialog.js";
+import { Form } from "./components/form.js";
+import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "./components/frame.js";
+import { HexColorPicker } from "./components/hex-color-picker.js";
+import { Textarea } from "./components/textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea } from "./components/input-group.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./components/input-otp.js";
+import { Label } from "./components/label.js";
+import { DropdownMenu as Menu, DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuCreateHandle as MenuCreateHandle, DropdownMenuGroup as MenuGroup, DropdownMenuItem as MenuItem, DropdownMenuLabel as MenuGroupLabel, DropdownMenuPortal as MenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuShortcut as MenuShortcut, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger, DropdownMenuTrigger as MenuTrigger } from "./components/menu.js";
+import { OutlineRail } from "./components/outline-rail.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/pagination.js";
+import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCardTrigger as PreviewCardTrigger, PreviewCardPrimitive } from "./components/preview-card.js";
+import { MenuPreviewLayout, PreviewPane } from "./components/preview-pane.js";
+import { ScrollToTop } from "./components/scroll-to-top.js";
+import { SecretInput } from "./components/secret-input.js";
+import { SegmentedIconToggle } from "./components/segmented-icon-toggle.js";
+import { Select, SelectContent as SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
+import { Separator, TextSeparator } from "./components/separator.js";
+import { Sheet, SheetBackdrop, SheetClose, SheetContent as SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger } from "./components/sheet.js";
+import { Skeleton } from "./components/skeleton.js";
+import { StellaMark } from "./components/stella-mark.js";
+import { StellaWordmarkLatin } from "./components/stella-wordmark.js";
+import { SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
+import { Tabs, TabsContent as TabsPanel, TabsList, TabsTab } from "./components/tabs.js";
+import { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastProvider, stellaToast } from "./components/toast.js";
+import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds } from "./data-table/schema.js";
+import { useIsMobile } from "./hooks/use-mobile.js";
+import { useViewportWidth } from "./hooks/use-viewport-width.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 "./inspector/layout-tokens.js";
+import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./inspector/chrome.js";
+import { InspectorDock } from "./inspector/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 "./inspector/pane-width.js";
+import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./inspector/use-pane-width.js";
+import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
+import { KanbanCardShell } from "./kanban/card-shell.js";
+import { KanbanColumnHeader } from "./kanban/column-header.js";
+import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, 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, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KanbanCardShell, KanbanColumnHeader, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getLocaleWeekInfo, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, optionColors, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth, visibleColumnIds };

package/dist/inspector/chrome.d.ts

@@ -0,0 +1,72 @@
+import * as React$1 from "react";
+//#region src/inspector/chrome.d.ts
+/**
+ * Inspector chrome: the shell, the icon rail, the header strip, and the
+ * fixed-height key/value rows.
+ *
+ * The class strings are the workspace inspector's own, so an application
+ * built on this package renders that component family rather than something
+ * merely similar.
+ *
+ * Deliberately headless where a component library would otherwise leak: the
+ * rail and the tab strip take rendered children, so the host picks its own
+ * tabs primitive instead of inheriting one.
+ *
+ * Record-data slots (title, description, property value) hold caller-supplied
+ * values such as case numbers, ECLI identifiers, and filenames. They isolate
+ * their own bidi context so a Latin value inside an RTL inspector keeps its
+ * character order and truncates from the correct end; chrome slots stay in
+ * the surrounding direction. `dir` precedes the prop spread so callers can
+ * force a direction. `chrome.test.tsx` pins which slots belong to each group.
+ */
+/** Outermost inspector surface. Fills the dock; owns no scrolling. */
+declare const Inspector: ({ className, ...props }: React$1.ComponentProps<"aside">) => React$1.JSX.Element;
+/**
+ * Vertical 48px icon rail. Hidden below the desktop breakpoint, where the
+ * pane becomes a full-screen sheet and the rail's affordances move into
+ * the header.
+ */
+declare const InspectorRail: ({ className, ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
+/** A rail cell: same height as every header strip and property row. */
+declare const InspectorRailCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const InspectorRailIconButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
+/**
+ * A rail tab. The active tab carries a 2px spine on the rail's inline-start
+ * edge — the same affordance the workspace rail uses to say "this pane is
+ * showing that tab".
+ */
+declare const InspectorRailTab: ({ active, className, ...props }: React$1.ComponentProps<"button"> & {
+  active?: boolean;
+}) => React$1.JSX.Element;
+/** Header strip. One row tall, bordered below, never scrolls. */
+declare const InspectorHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
+declare const InspectorHeaderText: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const InspectorTitle: ({ children, className, ...props }: React$1.ComponentProps<"h2">) => React$1.JSX.Element;
+declare const InspectorDescription: ({ className, ...props }: React$1.ComponentProps<"p">) => React$1.JSX.Element;
+declare const InspectorActions: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+/**
+ * Scroll owner for the active tab. Exactly one of these is mounted at a
+ * time: two nested scrollers inside a 512px pane is how a side panel stops
+ * being navigable.
+ */
+declare const InspectorContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const InspectorSection: ({ className, ...props }: React$1.ComponentProps<"section">) => React$1.JSX.Element;
+/** Section header. Same row height as the properties beneath it. */
+declare const InspectorSectionTitle: ({ children, className, ...props }: React$1.ComponentProps<"h3">) => React$1.JSX.Element;
+declare const InspectorPropertyList: ({ className, ...props }: React$1.ComponentProps<"dl">) => React$1.JSX.Element;
+/**
+ * A key/value row.
+ *
+ * The height is fixed, not a minimum. A row that grows to fit its value
+ * breaks the rhythm the rail's cells set, and a column of rows at differing
+ * heights stops reading as a scannable list — which is the whole point of
+ * the layout. Long values truncate; the full text belongs in a tooltip or
+ * an expanded view, not in a taller row.
+ */
+declare const InspectorProperty: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const InspectorPropertyLabel: ({ className, ...props }: React$1.ComponentProps<"dt">) => React$1.JSX.Element;
+declare const InspectorPropertyValue: ({ className, ...props }: React$1.ComponentProps<"dd">) => React$1.JSX.Element;
+/** Row-height empty state, so an empty list keeps the list's rhythm. */
+declare const InspectorEmptyRow: ({ className, ...props }: React$1.ComponentProps<"p">) => React$1.JSX.Element;
+//#endregion
+export { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle };

package/dist/inspector/chrome.js

@@ -0,0 +1,153 @@
+import { cn } from "../lib/utils.js";
+import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/inspector/chrome.tsx
+/**
+* Inspector chrome: the shell, the icon rail, the header strip, and the
+* fixed-height key/value rows.
+*
+* The class strings are the workspace inspector's own, so an application
+* built on this package renders that component family rather than something
+* merely similar.
+*
+* Deliberately headless where a component library would otherwise leak: the
+* rail and the tab strip take rendered children, so the host picks its own
+* tabs primitive instead of inheriting one.
+*
+* Record-data slots (title, description, property value) hold caller-supplied
+* values such as case numbers, ECLI identifiers, and filenames. They isolate
+* their own bidi context so a Latin value inside an RTL inspector keeps its
+* character order and truncates from the correct end; chrome slots stay in
+* the surrounding direction. `dir` precedes the prop spread so callers can
+* force a direction. `chrome.test.tsx` pins which slots belong to each group.
+*/
+/** Outermost inspector surface. Fills the dock; owns no scrolling. */
+const Inspector = ({ className, ...props }) => /* @__PURE__ */ jsx("aside", {
+	className: cn("bg-background text-foreground flex h-full min-h-0 w-full overflow-hidden shadow-lg", className),
+	"data-slot": "inspector",
+	...props
+});
+/**
+* Vertical 48px icon rail. Hidden below the desktop breakpoint, where the
+* pane becomes a full-screen sheet and the rail's affordances move into
+* the header.
+*/
+const InspectorRail = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	className: cn(SIDE_RAIL_CONTAINER_CLASS, "hidden md:flex", className),
+	"data-slot": "inspector-rail",
+	...props
+});
+/** A rail cell: same height as every header strip and property row. */
+const InspectorRailCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex w-full shrink-0 items-center justify-center border-b", TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "inspector-rail-cell",
+	...props
+});
+const InspectorRailIconButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
+	className: cn("text-muted-foreground hover:bg-accent hover:text-foreground flex items-center justify-center rounded-md transition-colors", SIDE_RAIL_ICON_BUTTON_SIZE, className),
+	"data-slot": "inspector-rail-icon-button",
+	type: "button",
+	...props
+});
+/**
+* A rail tab. The active tab carries a 2px spine on the rail's inline-start
+* edge — the same affordance the workspace rail uses to say "this pane is
+* showing that tab".
+*/
+const InspectorRailTab = ({ active = false, className, ...props }) => /* @__PURE__ */ jsx("button", {
+	"aria-current": active ? "true" : void 0,
+	className: cn("group/tab relative flex min-h-8 w-full items-center justify-center border-b transition-colors", TOOLBAR_ROW_HEIGHT, active ? "bg-background text-foreground before:bg-primary before:absolute before:inset-y-0 before:inset-s-0 before:w-0.5" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
+	"data-active": active ? "" : void 0,
+	"data-slot": "inspector-rail-tab",
+	type: "button",
+	...props
+});
+/** Header strip. One row tall, bordered below, never scrolls. */
+const InspectorHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
+	className: cn("flex shrink-0 items-center justify-between border-b px-3", TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "inspector-header",
+	...props
+});
+const InspectorHeaderText = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 items-center gap-2 overflow-hidden", className),
+	"data-slot": "inspector-header-text",
+	...props
+});
+const InspectorTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("truncate text-xs font-medium [unicode-bidi:isolate]", className),
+	"data-slot": "inspector-title",
+	dir: "auto",
+	...props,
+	children
+});
+const InspectorDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-muted-foreground truncate text-[11px] [unicode-bidi:isolate]", className),
+	"data-slot": "inspector-description",
+	dir: "auto",
+	...props
+});
+const InspectorActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center gap-1 ps-4", className),
+	"data-slot": "inspector-actions",
+	...props
+});
+/**
+* Scroll owner for the active tab. Exactly one of these is mounted at a
+* time: two nested scrollers inside a 512px pane is how a side panel stops
+* being navigable.
+*/
+const InspectorContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
+	"data-slot": "inspector-content",
+	...props
+});
+const InspectorSection = ({ className, ...props }) => /* @__PURE__ */ jsx("section", {
+	className: cn("shrink-0", className),
+	"data-slot": "inspector-section",
+	...props
+});
+/** Section header. Same row height as the properties beneath it. */
+const InspectorSectionTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx("h3", {
+	className: cn("text-muted-foreground flex shrink-0 items-center border-b px-3 text-sm font-medium", TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "inspector-section-title",
+	...props,
+	children
+});
+const InspectorPropertyList = ({ className, ...props }) => /* @__PURE__ */ jsx("dl", {
+	className: cn("min-w-0", className),
+	"data-slot": "inspector-property-list",
+	...props
+});
+/**
+* A key/value row.
+*
+* The height is fixed, not a minimum. A row that grows to fit its value
+* breaks the rhythm the rail's cells set, and a column of rows at differing
+* heights stops reading as a scannable list — which is the whole point of
+* the layout. Long values truncate; the full text belongs in a tooltip or
+* an expanded view, not in a taller row.
+*/
+const InspectorProperty = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("grid shrink-0 items-center gap-3 border-b px-3", PROPERTY_ROW_GRID, TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "inspector-property",
+	...props
+});
+const InspectorPropertyLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("dt", {
+	className: cn("text-muted-foreground min-w-0 truncate text-sm font-medium", className),
+	"data-slot": "inspector-property-label",
+	...props
+});
+const InspectorPropertyValue = ({ className, ...props }) => /* @__PURE__ */ jsx("dd", {
+	className: cn("min-w-0 truncate text-sm [unicode-bidi:isolate]", className),
+	"data-slot": "inspector-property-value",
+	dir: "auto",
+	...props
+});
+/** Row-height empty state, so an empty list keeps the list's rhythm. */
+const InspectorEmptyRow = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-muted-foreground flex shrink-0 items-center border-b px-3 text-sm italic", TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "inspector-empty-row",
+	...props
+});
+//#endregion
+export { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle };