@stll/ui 0.6.0 → 0.8.0

package/README.md

@@ -20,6 +20,7 @@ so a bundler keeps only what is imported:
 
 ```tsx
 import { Button } from "@stll/ui/button";
+import { ApplicationShell } from "@stll/ui/application-shell";
 import { Dialog, DialogPopup } from "@stll/ui/dialog";
 import { Inspector, InspectorDock } from "@stll/ui/inspector";
 import { cn } from "@stll/ui/utils";
@@ -29,6 +30,25 @@ One flat subpath per module: `@stll/ui/<name>` for components, hooks, and
 helpers alike. `@stll/ui` re-exports all of them under one specifier for
 convenience; the subpaths are the real surface, and in-repo code uses those.
 
+## Application shell
+
+`ApplicationShell` keeps the navigation, page chrome and content, and an
+optional inline-end inspector as sibling columns. Pass the host application's
+surfaces as slots; route state, navigation behavior, and inspector behavior
+remain in the host.
+
+```tsx
+import { ApplicationShell } from "@stll/ui/application-shell";
+
+<ApplicationShell
+  header={<PageHeader />}
+  inspector={<InspectorDock />}
+  sidebar={<Navigation />}
+>
+  <Page />
+</ApplicationShell>;
+```
+
 ### Deprecated grouped subpaths
 
 `@stll/ui/components/<name>`, `@stll/ui/hooks/<name>`, and

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.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/components/application-shell.d.ts
+type ApplicationShellProps = {
+  /**
+   * The application navigation surface. It stays a direct sibling of the
+   * content column so sidebar implementations can reserve their own width.
+   */
+  sidebar: ReactNode;
+  /** The route chrome rendered above the application content. */
+  header?: ReactNode | undefined;
+  /** An optional dock or rail at the inline-end edge. */
+  inspector?: ReactNode | undefined;
+  /** The active route or page content. */
+  children: ReactNode;
+  className?: string | undefined;
+  mainClassName?: string | undefined;
+};
+/**
+ * The three-column application frame: navigation, page chrome and content,
+ * then an optional inline-end inspector. Product navigation, route state, and
+ * inspector behaviour stay in the host; this primitive only owns the layout
+ * relationship that lets those surfaces share a viewport without nesting one
+ * inside another.
+ */
+declare const ApplicationShell: ({ children, className, header, inspector, mainClassName, sidebar }: ApplicationShellProps) => import("react").JSX.Element;
+//#endregion
+export { ApplicationShell, type ApplicationShellProps };

package/dist/components/application-shell.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/utils.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/application-shell.tsx
+/**
+* The three-column application frame: navigation, page chrome and content,
+* then an optional inline-end inspector. Product navigation, route state, and
+* inspector behaviour stay in the host; this primitive only owns the layout
+* relationship that lets those surfaces share a viewport without nesting one
+* inside another.
+*/
+const ApplicationShell = ({ children, className, header, inspector, mainClassName, sidebar }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex min-h-svh w-full", className),
+	"data-slot": "application-shell",
+	children: [
+		sidebar,
+		/* @__PURE__ */ jsxs("main", {
+			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]
+		}),
+		inspector
+	]
+});
+//#endregion
+export { ApplicationShell };

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

@@ -10,8 +10,8 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | 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
 export { buttonAccessibleDisabledClass, buttonVariants };

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-group.d.ts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

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,8 @@ 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";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
@@ -13,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";
@@ -59,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";
@@ -72,6 +76,14 @@ import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions,
 import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import "./kanban/index.js";
+import { getInitials } from "./lib/initials.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, 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, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
+import { ReviewCommentAuthor, ReviewCommentCard } from "./review/review-comment-card.js";
+import { ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState } from "./review/review-decision-actions.js";
+import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys } from "./review/review-diff-text.js";
+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 { 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 };