@stll/ui 0.0.1-placeholder.0 → 0.2.0

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,60 @@
+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 { 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 { 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, 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, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, 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, 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, TableFooter, TableHead, TableHeader, TableRow, 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, getFirstWeekday, getLocaleWeekInfo, getWeekendDays, isStructuredInputType, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, stellaToast, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth };

package/dist/index.js

@@ -0,0 +1,59 @@
+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 { 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";
+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, 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, getFirstWeekday, getLocaleWeekInfo, getWeekendDays, isStructuredInputType, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, stellaToast, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useViewportWidth };

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 };

package/dist/inspector/dock.d.ts

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

package/dist/inspector/dock.js

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

package/dist/inspector/index.d.ts

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

package/dist/inspector/index.js

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

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

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

package/dist/inspector/layout-tokens.js

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