@stll/ui 0.7.0 → 0.8.0

package/dist/components/application-rail.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from "react";
+//#region src/components/application-rail.d.ts
+declare const APPLICATION_RAIL_WIDTH: "w-12";
+declare const APPLICATION_RAIL_BUTTON_SIZE: "size-11";
+declare const APPLICATION_RAIL_ICON_SIZE: "size-4";
+/**
+ * A compact application navigation rail. It preserves the same desktop width,
+ * button rhythm, separators, and account affordance as a collapsed app
+ * sidebar without bringing sidebar expansion or mobile-sheet state into hosts
+ * that only need a fixed rail.
+ */
+declare const ApplicationRail: ({ className, ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
+declare const ApplicationRailHeader: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ApplicationRailContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ApplicationRailMenu: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ApplicationRailButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
+declare const ApplicationRailSeparator: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+//#endregion
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator };

package/dist/components/application-rail.js

@@ -0,0 +1,52 @@
+import { cn } from "../lib/utils.js";
+import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/application-rail.tsx
+const APPLICATION_RAIL_WIDTH = "w-12";
+const APPLICATION_RAIL_BUTTON_SIZE = "size-11";
+const APPLICATION_RAIL_ICON_SIZE = "size-4";
+/**
+* A compact application navigation rail. It preserves the same desktop width,
+* button rhythm, separators, and account affordance as a collapsed app
+* sidebar without bringing sidebar expansion or mobile-sheet state into hosts
+* that only need a fixed rail.
+*/
+const ApplicationRail = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	className: cn("bg-sidebar text-sidebar-foreground hidden h-full min-h-0 shrink-0 flex-col border-e md:flex", APPLICATION_RAIL_WIDTH, className),
+	"data-slot": "application-rail",
+	...props
+});
+const ApplicationRailHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center justify-center border-b p-0.5", TOOLBAR_ROW_HEIGHT, className),
+	"data-slot": "application-rail-header",
+	...props
+});
+const ApplicationRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden", className),
+	"data-slot": "application-rail-content",
+	...props
+});
+const ApplicationRailMenu = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-0.5 p-0.5", className),
+	"data-slot": "application-rail-menu",
+	...props
+});
+const ApplicationRailButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
+	className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md outline-hidden transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", APPLICATION_RAIL_BUTTON_SIZE, className),
+	"data-slot": "application-rail-button",
+	type: "button",
+	...props
+});
+const ApplicationRailSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("bg-sidebar-border h-px shrink-0", className),
+	"data-slot": "application-rail-separator",
+	role: "separator",
+	...props
+});
+const ApplicationRailFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("mt-auto flex shrink-0 flex-col gap-0.5 p-0.5", className),
+	"data-slot": "application-rail-footer",
+	...props
+});
+//#endregion
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator };

package/dist/components/application-shell.js

@@ -14,7 +14,7 @@ const ApplicationShell = ({ children, className, header, inspector, mainClassNam
 	children: [
 		sidebar,
 		/* @__PURE__ */ jsxs("main", {
-			className: cn("bg-background relative flex w-full flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
+			className: cn("bg-background relative flex w-full min-w-0 flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
 			"data-slot": "application-shell-main",
 			children: [header, children]
 		}),

package/dist/components/button-variants.d.ts

@@ -10,7 +10,7 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon" | "default" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
+  size?: "xs" | "sm" | "icon" | "default" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "xl" | null | undefined;
   variant?: "destructive" | "outline" | "link" | "default" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/combobox.d.ts

@@ -1,16 +1,17 @@
+import { ControlSize } from "../lib/control-size.js";
 import * as React$1 from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/components/combobox.d.ts
 declare const Combobox: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
 declare const ComboboxChipsInput: ({ className, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
-  size?: "sm" | "default" | "lg" | number;
+  size?: ControlSize | number;
   ref?: React$1.Ref<HTMLInputElement>;
 }) => React$1.JSX.Element;
 declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
   showTrigger?: boolean;
   showClear?: boolean;
   startAddon?: React$1.ReactNode;
-  size?: "sm" | "default" | "lg" | number;
+  size?: ControlSize | number;
   ref?: React$1.Ref<HTMLInputElement>;
 }) => React$1.JSX.Element;
 declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;

package/dist/components/combobox.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { containedHandler } from "../hooks/use-contained-handler.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
 import { Input } from "./input.js";
 import { ScrollArea } from "./scroll-area.js";
 import { ChevronsUpDownIcon, XIcon } from "lucide-react";
@@ -25,9 +26,10 @@ const Combobox = (props) => {
 	});
 };
 const ComboboxChipsInput = ({ className, size, ...props }) => {
-	const sizeValue = size ?? "default";
+	const sizeValue = size ?? CONTROL_SIZE.default;
+	const controlSize = typeof sizeValue === "number" ? CONTROL_SIZE.default : sizeValue;
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
-		className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", sizeValue === "sm" ? "ps-1.5" : "ps-2", className),
+		className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", COMBOBOX_CHIPS_INPUT_SIZE_CLASS_NAMES[controlSize], className),
 		"data-size": typeof sizeValue === "string" ? sizeValue : void 0,
 		"data-slot": "combobox-chips-input",
 		size: typeof sizeValue === "number" ? sizeValue : void 0,
@@ -35,18 +37,19 @@ const ComboboxChipsInput = ({ className, size, ...props }) => {
 	});
 };
 const ComboboxInput = ({ className, showTrigger = true, showClear = false, startAddon, size, ...props }) => {
-	const sizeValue = size ?? "default";
+	const sizeValue = size ?? CONTROL_SIZE.default;
+	const controlSize = typeof sizeValue === "number" ? CONTROL_SIZE.default : sizeValue;
 	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
 		className: "text-foreground relative w-full not-has-[>*.w-full]:w-fit has-disabled:opacity-64",
 		children: [
 			Boolean(startAddon) && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
-				className: "pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+				className: cn("pointer-events-none absolute inset-y-0 start-px z-10 flex items-center opacity-80 [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_START_ADDON_SIZE_CLASS_NAMES[controlSize]),
 				"data-slot": "combobox-start-addon",
 				children: startAddon
 			}),
 			/* @__PURE__ */ jsx(Combobox$1.Input, {
-				className: cn(Boolean(startAddon) && "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)]", sizeValue === "sm" ? "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5" : "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7", className),
+				className: cn(Boolean(startAddon) && COMBOBOX_INPUT_START_ADDON_SIZE_CLASS_NAMES[controlSize], COMBOBOX_INPUT_SIZE_CLASS_NAMES[controlSize], className),
 				"data-slot": "combobox-input",
 				render: /* @__PURE__ */ jsx(Input, {
 					className: "has-disabled:opacity-100",
@@ -56,16 +59,41 @@ const ComboboxInput = ({ className, showTrigger = true, showClear = false, start
 				...props
 			}),
 			showTrigger && /* @__PURE__ */ jsx(ComboboxTrigger, {
-				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", sizeValue === "sm" ? "end-0" : "end-0.5"),
+				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_ACTION_SIZE_CLASS_NAMES[controlSize]),
 				children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
 			}),
 			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
-				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", sizeValue === "sm" ? "end-0" : "end-0.5"),
+				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_ACTION_SIZE_CLASS_NAMES[controlSize]),
 				children: /* @__PURE__ */ jsx(XIcon, {})
 			})
 		]
 	});
 };
+const COMBOBOX_CHIPS_INPUT_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "ps-1.5",
+	[CONTROL_SIZE.default]: "ps-2",
+	[CONTROL_SIZE.lg]: "ps-2"
+};
+const COMBOBOX_START_ADDON_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "ps-[calc(--spacing(2.5)-1px)]",
+	[CONTROL_SIZE.default]: "ps-[calc(--spacing(3)-1px)]",
+	[CONTROL_SIZE.lg]: "ps-[calc(--spacing(3)-1px)]"
+};
+const COMBOBOX_INPUT_START_ADDON_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)]",
+	[CONTROL_SIZE.default]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]",
+	[CONTROL_SIZE.lg]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]"
+};
+const COMBOBOX_INPUT_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5",
+	[CONTROL_SIZE.default]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7",
+	[CONTROL_SIZE.lg]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7"
+};
+const COMBOBOX_ACTION_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "end-0",
+	[CONTROL_SIZE.default]: "end-0.5",
+	[CONTROL_SIZE.lg]: "end-0.5"
+};
 const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
 	className,
 	"data-slot": "combobox-trigger",

package/dist/components/command.d.ts

@@ -1,3 +1,4 @@
+import { ControlSize } from "../lib/control-size.js";
 import { DialogContent as DialogPopup } from "./dialog.js";
 import * as React$1 from "react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
@@ -11,7 +12,7 @@ declare const CommandDialog: typeof Dialog.Root;
 declare const CommandDialogTrigger: (props: Dialog.Trigger.Props) => React$1.JSX.Element;
 declare const CommandDialogPopup: ({ className, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPopup>) => React$1.JSX.Element;
 type CommandInputProps = Omit<Autocomplete.Input.Props, "size"> & {
-  size?: "sm" | "default" | "lg" | number;
+  size?: ControlSize | number;
   wrapperClassName?: string;
   ref?: React$1.Ref<HTMLInputElement>;
 };

package/dist/components/command.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
 import { useContentDir } from "../hooks/use-content-dir.js";
 import { DialogContent as DialogPopup } from "./dialog.js";
 import { SearchIcon } from "lucide-react";
@@ -24,7 +25,7 @@ const CommandDialogPopup = ({ className, showCloseButton = false, ...props }) =>
 	showCloseButton,
 	...props
 });
-const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange, ...props }) => {
+const CommandInput = ({ className, size = CONTROL_SIZE.lg, wrapperClassName, dir, onChange, ...props }) => {
 	const tracked = useContentDir({
 		dir: void 0,
 		value: void 0,
@@ -38,7 +39,7 @@ const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange,
 		className: cn("flex min-w-0 flex-1 items-center gap-3", wrapperClassName),
 		"data-slot": "command-input-wrapper",
 		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-5 shrink-0" }), /* @__PURE__ */ jsx(Autocomplete.Input, {
-			className: cn("placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:text-sm", size === "sm" && "h-7 text-sm", size === "default" && "h-8", size === "lg" && "h-9", className),
+			className: cn("placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:text-sm", typeof size === "number" ? void 0 : COMMAND_INPUT_SIZE_CLASS_NAMES[size], className),
 			"data-slot": "command-input",
 			size: typeof size === "number" ? size : void 0,
 			...props,
@@ -47,6 +48,11 @@ const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange,
 		})]
 	});
 };
+const COMMAND_INPUT_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "h-7 text-sm",
+	[CONTROL_SIZE.default]: "h-8",
+	[CONTROL_SIZE.lg]: "h-9"
+};
 const CommandPanel = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("bg-popover text-popover-foreground flex min-h-0 flex-col rounded-lg border shadow-lg/5", className),
 	"data-slot": "command-panel",

package/dist/components/input.d.ts

@@ -1,8 +1,9 @@
+import { ControlSize } from "../lib/control-size.js";
 import * as React$1 from "react";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/components/input.d.ts
 type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "style"> & {
-  size?: "sm" | "default" | "lg" | number;
+  size?: ControlSize | number;
   style?: React$1.CSSProperties;
   unstyled?: boolean;
   nativeInput?: boolean;

package/dist/components/input.js

@@ -1,11 +1,13 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
 import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
 import { SearchIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/components/input.tsx
-const Input = ({ className, size = "default", unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
+const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
+	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : void 0),
 		value: props.value,
@@ -15,7 +17,7 @@ const Input = ({ className, size = "default", unstyled = false, nativeInput = fa
 		contentDir.trackValue(event.currentTarget.value);
 		onChange?.(event);
 	};
-	const inputClassName = cn("placeholder:text-foreground-placeholder h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:leading-7.5", size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", props.type === "file" && "text-muted-foreground file:text-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium");
+	const inputClassName = cn("placeholder:text-foreground-placeholder h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:leading-7.5", INPUT_SIZE_CLASS_NAMES[controlSize], props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", props.type === "file" && "text-muted-foreground file:text-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium");
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
 		"data-size": size,
@@ -42,5 +44,10 @@ const Input = ({ className, size = "default", unstyled = false, nativeInput = fa
 		})]
 	});
 };
+const INPUT_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
+	[CONTROL_SIZE.default]: void 0,
+	[CONTROL_SIZE.lg]: "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5"
+};
 //#endregion
 export { Input };

package/dist/components/select.d.ts

@@ -1,3 +1,4 @@
+import { ControlSize } from "../lib/control-size.js";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/components/select.d.ts
@@ -6,7 +7,7 @@ type SelectItemProps = Select$1.Item.Props & {
 };
 declare const Select: <Value, Multiple extends boolean | undefined = false>({ children, itemToStringLabel, ...props }: Select$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
 declare const SelectTrigger: ({ className, size, children, ...props }: Select$1.Trigger.Props & {
-  size?: "sm" | "default" | "lg";
+  size?: ControlSize;
 }) => React$1.JSX.Element;
 declare const SelectValue: ({ className, children, placeholder, ...props }: Select$1.Value.Props) => React$1.JSX.Element;
 declare const SelectPopup: ({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, collisionAvoidance, ...props }: Select$1.Popup.Props & {

package/dist/components/select.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
 import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
@@ -31,8 +32,8 @@ const Select = ({ children, itemToStringLabel, ...props }) => {
 		children: root
 	});
 };
-const SelectTrigger = ({ className, size = "default", children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
-	className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 transition-shadow outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", size === "sm" && "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7", size === "lg" && "min-h-10 sm:min-h-9", className),
+const SelectTrigger = ({ className, size = CONTROL_SIZE.default, children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
+	className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 transition-shadow outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
 	"data-slot": "select-trigger",
 	...props,
 	children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
@@ -40,6 +41,11 @@ const SelectTrigger = ({ className, size = "default", children, ...props }) => /
 		children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "-me-1 size-4.5 opacity-80 sm:size-4" })
 	})]
 });
+const SELECT_TRIGGER_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+	[CONTROL_SIZE.default]: void 0,
+	[CONTROL_SIZE.lg]: "min-h-10 sm:min-h-9"
+};
 const SelectValue = ({ className, children, placeholder, ...props }) => {
 	const displays = React$1.use(SelectItemDisplaysContext);
 	if (children !== void 0 || displays.size === 0) return /* @__PURE__ */ jsx(Select$1.Value, {

package/dist/components/textarea.d.ts

@@ -1,7 +1,8 @@
+import { ControlSize } from "../lib/control-size.js";
 import * as React$1 from "react";
 //#region src/components/textarea.d.ts
 type TextareaProps = React$1.ComponentProps<"textarea"> & {
-  size?: "sm" | "default" | "lg" | number;
+  size?: ControlSize | number;
   unstyled?: boolean;
 };
 declare const Textarea: ({ className, size, unstyled, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;

package/dist/components/textarea.js

@@ -1,11 +1,13 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
 import { useContentDir } from "../hooks/use-content-dir.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Field } from "@base-ui/react/field";
 //#region src/components/textarea.tsx
-const Textarea = ({ className, size = "default", unstyled = false, dir, onChange, ...props }) => {
+const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, dir, onChange, ...props }) => {
+	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir,
 		value: props.value,
@@ -20,12 +22,17 @@ const Textarea = ({ className, size = "default", unstyled = false, dir, onChange
 		"data-size": size,
 		"data-slot": "textarea-control",
 		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
-			className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", size === "sm" && "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5", size === "lg" && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"),
+			className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", TEXTAREA_SIZE_CLASS_NAMES[controlSize]),
 			"data-slot": "textarea",
 			...mergeProps(defaultProps, props, { onChange: handleChange }),
 			dir: contentDir.dir
 		}) })
 	});
 };
+const TEXTAREA_SIZE_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
+	[CONTROL_SIZE.default]: void 0,
+	[CONTROL_SIZE.lg]: "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"
+};
 //#endregion
 export { Textarea };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import "./calendar/index.js";
 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 { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator } from "./components/application-rail.js";
 import { ApplicationShell, ApplicationShellProps } from "./components/application-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
@@ -14,6 +15,7 @@ import { buttonAccessibleDisabledClass, buttonVariants } from "./components/butt
 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 { CONTROL_SIZE, CONTROL_SIZES, ControlSize } from "./lib/control-size.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";
@@ -60,6 +62,7 @@ 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 { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./inspector/tabs.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./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";
@@ -83,4 +86,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
 import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
 import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
 import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.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, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, 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, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, 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, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, 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 RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, 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, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, 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, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, 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, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, 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, type ControlSize, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, 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, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, 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 RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, 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, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, 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, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -1,5 +1,7 @@
 import { cn, composeRefs } from "./lib/utils.js";
 import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.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 { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator } from "./components/application-rail.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";
@@ -14,6 +16,7 @@ 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 { CONTROL_SIZE, CONTROL_SIZES } from "./lib/control-size.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";
@@ -58,9 +61,9 @@ import { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnI
 import { DataTable } from "./data-table/table.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 { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./inspector/tabs.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";
@@ -79,4 +82,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
 import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
 import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
 import { ReviewStatusBadge } from "./review/review-status-badge.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, ApplicationShell, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, 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, DataTable, 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, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, 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, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, 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, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, 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, UNKNOWN_AUTHOR_LABEL, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, 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, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, ApplicationShell, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, 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, DataTable, 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, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, 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, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, 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, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, 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, UNKNOWN_AUTHOR_LABEL, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/inspector/index.d.ts

@@ -1,6 +1,7 @@
 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 { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./layout-tokens.js";
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_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 };
+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, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/index.js

@@ -1,6 +1,7 @@
 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 { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.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 };
+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, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/tabs.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/inspector/tabs.d.ts
+/**
+ * A tabbed inspector keeps its content beside the same fixed-width rail as a
+ * docked inspector. The mobile layout moves the rail below the header rather
+ * than leaving a narrow column beside a full-screen sheet.
+ */
+declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
+declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
+declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
+declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
+declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;
+//#endregion
+export { INSPECTOR_RAIL_MEDIA_QUERY, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, resolveInspectorTabOrientation };

package/dist/inspector/tabs.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/inspector/tabs.tsx
+/**
+* A tabbed inspector keeps its content beside the same fixed-width rail as a
+* docked inspector. The mobile layout moves the rail below the header rather
+* than leaving a narrow column beside a full-screen sheet.
+*/
+const InspectorTabs = ({ className, ...props }) => {
+	const isRailLayout = useInspectorRailLayout();
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		className: (state) => cn("grid h-full min-h-0 w-full grid-cols-1 grid-rows-[3rem_3rem_minmax(0,1fr)] overflow-hidden md:grid-cols-[3rem_minmax(0,1fr)] md:grid-rows-[3rem_minmax(0,1fr)]", resolveClassName(className, state)),
+		"data-slot": "inspector-tabs",
+		...props,
+		orientation: resolveInspectorTabOrientation(isRailLayout)
+	});
+};
+const INSPECTOR_RAIL_MEDIA_QUERY = "(min-width: 48rem)";
+const resolveInspectorTabOrientation = (isRailLayout) => isRailLayout ? "vertical" : "horizontal";
+const subscribeToInspectorRailLayout = (onChange) => {
+	const mediaQueryList = window.matchMedia(INSPECTOR_RAIL_MEDIA_QUERY);
+	mediaQueryList.addEventListener("change", onChange);
+	return () => mediaQueryList.removeEventListener("change", onChange);
+};
+const getInspectorRailLayoutSnapshot = () => window.matchMedia(INSPECTOR_RAIL_MEDIA_QUERY).matches;
+const getServerInspectorRailLayoutSnapshot = () => false;
+const useInspectorRailLayout = () => React$1.useSyncExternalStore(subscribeToInspectorRailLayout, getInspectorRailLayoutSnapshot, getServerInspectorRailLayoutSnapshot);
+const resolveClassName = (value, state) => typeof value === "function" ? value(state) : value;
+const InspectorTabList = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
+	className: (state) => cn("bg-sidebar col-start-1 row-start-2 flex min-w-0 shrink-0 scrollbar-none overflow-x-auto overflow-y-hidden overscroll-x-contain border-b md:row-span-2 md:row-start-1 md:h-full md:flex-col md:overflow-x-hidden md:overflow-y-auto md:overscroll-y-contain md:border-s md:border-e md:border-b-0 [&::-webkit-scrollbar]:hidden", TOOLBAR_ROW_HEIGHT, "md:w-12", resolveClassName(className, state)),
+	"data-slot": "inspector-tab-list",
+	...props
+});
+const InspectorTab = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+	className: (state) => cn("group/tab text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring data-active:bg-background data-active:text-foreground data-active:before:bg-primary relative flex size-12 shrink-0 cursor-pointer items-center justify-center border-e transition-colors outline-none before:absolute before:inset-x-0 before:bottom-0 before:hidden before:h-0.5 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset data-active:before:block data-disabled:pointer-events-none data-disabled:opacity-60 md:w-full md:flex-none md:border-e-0 md:border-b md:before:inset-y-0 md:before:start-0 md:before:h-auto md:before:w-0.5", resolveClassName(className, state)),
+	"data-slot": "inspector-tab",
+	...props
+});
+const InspectorTabPanel = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
+	className: (state) => cn("col-start-1 row-start-3 min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain outline-none md:col-start-2 md:row-start-2", resolveClassName(className, state)),
+	"data-slot": "inspector-tab-panel",
+	...props
+});
+//#endregion
+export { INSPECTOR_RAIL_MEDIA_QUERY, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, resolveInspectorTabOrientation };

package/dist/lib/control-size.d.ts

@@ -0,0 +1,10 @@
+//#region src/lib/control-size.d.ts
+declare const CONTROL_SIZE: Readonly<{
+  readonly sm: "sm";
+  readonly default: "default";
+  readonly lg: "lg";
+}>;
+type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
+declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+//#endregion
+export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/control-size.js

@@ -0,0 +1,9 @@
+//#region src/lib/control-size.ts
+const CONTROL_SIZE = Object.freeze({
+	sm: "sm",
+	default: "default",
+	lg: "lg"
+});
+const CONTROL_SIZES = Object.freeze(Object.values(CONTROL_SIZE));
+//#endregion
+export { CONTROL_SIZE, CONTROL_SIZES };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -37,6 +37,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./alert-dialog": {
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
@@ -85,6 +89,10 @@
       "types": "./dist/components/command.d.ts",
       "import": "./dist/components/command.js"
     },
+    "./control-size": {
+      "types": "./dist/lib/control-size.d.ts",
+      "import": "./dist/lib/control-size.js"
+    },
     "./calendar": {
       "types": "./dist/calendar/index.d.ts",
       "import": "./dist/calendar/index.js"
@@ -314,6 +322,10 @@
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"
     },
+    "./components/application-rail": {
+      "types": "./dist/components/application-rail.d.ts",
+      "import": "./dist/components/application-rail.js"
+    },
     "./components/alert-dialog": {
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"