@ctrl-ui/react 0.8.8 → 0.8.10

package/dist/action-bar.js

@@ -1,11 +1,11 @@
 "use client";
-import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { Toolbar } from "@base-ui/react/toolbar";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/action-bar.tsx
 const ActionBarContext = createContext({});
 async function resolveCopyValue(value) {

package/dist/activity.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { ScrollArea } from "./ui/scroll-area.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight, CircleAlert, CircleDashed, LoaderCircle } from "lucide-react";

package/dist/blocks/design-canvas-inspector.js

@@ -1,11 +1,11 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
+import { Separator } from "../ui/separator.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
-import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/blocks/design-canvas.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
-import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
-import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
 import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
+import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
+import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";

package/dist/blocks/discussion.js

@@ -1,9 +1,9 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { Kbd, KbdGroup } from "../ui/kbd.js";
 import { ChatComposer, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar } from "../chat-composer.js";
 import { ChatMessageReplies } from "../chat-message/social.js";
 import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
-import { Kbd, KbdGroup } from "../ui/kbd.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx

package/dist/blocks/file-explorer.js

@@ -5,15 +5,15 @@ import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/blocks/settings.js

@@ -2,16 +2,16 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
-import { ScrollArea } from "../ui/scroll-area.js";
 import { prefersReducedMotion } from "../lib/motion.js";
+import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
-import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/chat-composer-editor/extensions/mention.js

@@ -2,8 +2,8 @@
 import { LiveStatus } from "../../ui/live-status.js";
 import { isComposingKey, useTriggerMenu } from "../../hooks/use-trigger-menu.js";
 import { spawnExitGhost } from "../ghost.js";
-import { detectTrigger } from "../../lib/trigger-detect.js";
 import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../../ui/trigger-menu.js";
+import { detectTrigger } from "../../lib/trigger-detect.js";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-composer-editor/extensions/mention.tsx

package/dist/chat-composer.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "./lib/cn.js";
 import { hasSkinAdornment, skinAdornment } from "./skin.js";
+import { cn } from "./lib/cn.js";
 import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
 import { Spinner } from "./ui/spinner.js";

package/dist/chat-layout.js

@@ -7,9 +7,9 @@ import { ScrollArea } from "./ui/scroll-area.js";
 import { ChatThreadAnnounceContext } from "./hooks/use-chat-message.js";
 import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
 import { createContext, useContext, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/chat-layout.tsx
 const chromeSizing = {
 	panel: "mx-auto min-h-[640px] max-w-3xl",

package/dist/context.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
-import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";

package/dist/dynamic-notification.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
 import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
+import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
 import { useDynamicNotification } from "./hooks/use-dynamic-notification.js";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/filter-bar/parts.js

@@ -5,9 +5,9 @@ import { useFilterBarContext } from "./context.js";
 import { describeFilter, formatFilterValue } from "./model.js";
 import { FilterBarEditor, FilterBarInlineInput } from "./editor.js";
 import { useEffect, useId, useRef } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PlusIcon, XIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/filter-bar/parts.tsx
 function chipSegments(item, field, operator, draft) {
 	const segments = [{

package/dist/filter-bar.js

@@ -6,8 +6,8 @@ import { describeFilter, fieldOperators, filterNavigationKeys } from "./filter-b
 import { filterMotionEnabled, useFilterBarMotion } from "./filter-bar/motion.js";
 import { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput } from "./filter-bar/parts.js";
 import { useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/filter-bar.tsx
 function valueStatusMessage(field) {
 	if (field?.error) return typeof field.error === "string" ? field.error : "Couldn’t load values.";

package/dist/inline-citation.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { SourceFavicon, sourceHostname } from "./source-badge.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";

package/dist/knob-contracts/app-shell-header-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/app-shell-header-knobs.d.ts
+export declare const appShellHeaderKnobs: readonly ["--cui-app-shell-header-height", "--cui-app-shell-header-padding-inline", "--cui-app-shell-header-background", "--cui-app-shell-header-border-color", "--cui-app-shell-header-border-width"];
+export type AppShellHeaderKnobStyle = Partial<Record<(typeof appShellHeaderKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/app-shell-header-knobs.js

@@ -0,0 +1,10 @@
+//#region src/knob-contracts/app-shell-header-knobs.ts
+const appShellHeaderKnobs = [
+	"--cui-app-shell-header-height",
+	"--cui-app-shell-header-padding-inline",
+	"--cui-app-shell-header-background",
+	"--cui-app-shell-header-border-color",
+	"--cui-app-shell-header-border-width"
+];
+//#endregion
+export { appShellHeaderKnobs };

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { AsYouType } from "libphonenumber-js/max";
 import { getCountryCallingCode } from "react-phone-number-input/max";
+import { AsYouType } from "libphonenumber-js/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/styles/index.css

@@ -13,6 +13,12 @@
 @import "./recipes/popup-controls.css";
 @import "./recipes/popup-lists.css";
 @import "./recipes/popup-motion.css";
+@import "./recipes/page-layout.css";
+@import "./recipes/track-highlight.css";
+@import "./recipes/sidebar.css";
+@import "./recipes/sidebar-menu.css";
+@import "./recipes/sidebar-parts.css";
+@import "./recipes/app-shell-header.css";
 @import "./recipes/audio-visualizer.css";
 @import "./recipes/audio-recorder.css";
 @import "./recipes/field.css";
@@ -20,7 +26,6 @@
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";
-@import "./recipes/track-highlight.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
@@ -35,9 +40,6 @@
 @import "./code.css";
 @import "./recipes/code.css";
 @import "./recipes/code-diff.css";
-@import "./recipes/sidebar.css";
-@import "./recipes/sidebar-menu.css";
-@import "./recipes/sidebar-parts.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
@@ -66,7 +68,6 @@
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
-@import "./recipes/page-layout.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/rich-tooltip.css";

package/dist/styles/recipes/app-shell-header.css

@@ -0,0 +1,43 @@
+@layer components {
+  :where([data-control-family="app-shell-header"][data-slot="root"]) {
+    --cui-app-shell-header-height: calc(var(--spacing) * 14);
+    --cui-app-shell-header-padding-inline: calc(var(--spacing) * 4);
+    --cui-app-shell-header-background: var(--background);
+    --cui-app-shell-header-border-width: 1px;
+    --cui-app-shell-header-border-color: var(--border);
+    min-height: var(--cui-app-shell-header-height);
+    padding-inline: var(--cui-app-shell-header-padding-inline);
+    background: var(--cui-app-shell-header-background);
+    border-block-end: var(--cui-app-shell-header-border-width) solid var(--cui-app-shell-header-border-color);
+  }
+}
+
+@property --cui-app-shell-header-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-app-shell-header-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-app-shell-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-app-shell-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-app-shell-header-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/sidebar-menu.css

@@ -11,6 +11,7 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"]) {
+    inline-size: 100%;
     gap: calc(var(--spacing) * 1.5);
     block-size: var(--cui-sidebar-menu-button-height);
     border-radius: var(--cui-sidebar-menu-button-radius);
@@ -24,18 +25,24 @@
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
     --cui-sidebar-menu-button-height: var(--control-h-sm);
-    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 0.75);
     --cui-sidebar-menu-button-font-size: var(--text-label);
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
     --cui-sidebar-menu-button-height: var(--control-h-lg);
-    --cui-sidebar-menu-button-padding-inline: calc(var(--padding-x) * 1.25);
     gap: calc(var(--spacing) * 2);
   }
 
-  :where([data-control-family="sidebar"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="menu-button"]) {
-    --cui-sidebar-menu-button-padding-inline: 0px;
+  :where(
+    [data-control-family="sidebar"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="menu-button"] > :not(:first-child)
+  ) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    white-space: nowrap;
   }
 
   :where([data-control-family="sidebar"][data-slot="menu-action"]) {
@@ -262,4 +269,14 @@
       padding-inline-end: calc(var(--touch-target) + var(--spacing) * 10);
     }
   }
+
+  :where([data-control-family="sidebar"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="menu-button"]) {
+    --cui-sidebar-menu-button-padding-inline: 0px;
+    inline-size: calc(var(--sidebar-width-icon) - var(--spacing) * 4);
+    max-inline-size: 100%;
+    padding-inline: var(--cui-sidebar-menu-button-padding-inline);
+    justify-content: center;
+    gap: 0;
+    overflow: visible;
+  }
 }

package/dist/styles/recipes/sidebar-parts.css

@@ -1,4 +1,42 @@
 @layer components {
+  :where([data-control-family="sidebar"][data-slot="container"]) {
+    translate: 0;
+    transition:
+      width var(--duration-base) var(--ease-standard),
+      translate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inner"]) {
+    transition: padding var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="left"]:dir(ltr) [data-slot="container"]),
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="right"]:dir(rtl) [data-slot="container"]) {
+    translate: -100% 0;
+  }
+
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="right"]:dir(ltr) [data-slot="container"]),
+  :where([data-control-family="sidebar"][data-collapsible="offcanvas"][data-side="left"]:dir(rtl) [data-slot="container"]) {
+    translate: 100% 0;
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="wrapper"][data-resizing]
+      [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
+  ),
+  :where(
+    [data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-slot="rail"]:focus-visible)
+      [data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])
+  ) {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="sidebar"]:is([data-slot="container"], [data-slot="gap"], [data-slot="inner"])) {
+      transition: none;
+    }
+  }
+
   :where([data-control-family="sidebar"][data-slot="rail"]) {
     inline-size: calc(var(--spacing) * 4);
     background-image: linear-gradient(var(--cui-sidebar-rail-divider-background), var(--cui-sidebar-rail-divider-background));

package/dist/styles/recipes/sidebar.css

@@ -69,7 +69,7 @@
     --cui-sidebar-group-label-padding: 0px calc(var(--spacing) * 2);
     --cui-sidebar-menu-button-height: var(--control-h-md);
     --cui-sidebar-menu-button-padding-block: 0px;
-    --cui-sidebar-menu-button-padding-inline: var(--padding-x);
+    --cui-sidebar-menu-button-padding-inline: calc(var(--sidebar-width-icon) / 2 - var(--spacing) * 4);
     --cui-sidebar-menu-button-font-size: var(--text-body);
     --cui-sidebar-menu-button-font-weight: 400;
     --cui-sidebar-menu-button-active-font-weight: 500;
@@ -96,6 +96,7 @@
 
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
+    transition: width var(--duration-base) var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {

package/dist/ui/alert-dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/alert.tsx
 const alertVariants = ["default", "destructive"];
 function Alert({ variant = "default", className, ...props }) {

package/dist/ui/app-shell.d.ts

@@ -0,0 +1,16 @@
+import { SidebarProviderProps } from "./sidebar-provider.js";
+import { SidebarInsetProps } from "./sidebar.js";
+import { AppShellHeaderKnobStyle } from "../knob-contracts/app-shell-header-knobs.js";
+import { PageScroll } from "./page-layout.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/app-shell.d.ts
+export type AppShellProps = SidebarProviderProps & {
+  scroll?: PageScroll;
+};
+export declare function AppShell({ scroll, layout, className, ...props }: AppShellProps): import("react").JSX.Element;
+export declare function AppShellContent({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+export type AppShellHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  style?: CSSProperties & AppShellHeaderKnobStyle;
+};
+export declare function AppShellHeader({ className, ...props }: AppShellHeaderProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/app-shell.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SidebarProvider } from "./sidebar-provider.js";
+import { SidebarInset } from "./sidebar.js";
+import { PageScrollContext, usePageScroll } from "./page-layout.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/app-shell.tsx
+function AppShell({ scroll = "auto", layout = "viewport", className, ...props }) {
+	const resolvedScroll = usePageScroll(scroll);
+	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
+		value: resolvedScroll,
+		children: /* @__PURE__ */ jsx(SidebarProvider, {
+			"data-app-shell": "",
+			"data-scroll": resolvedScroll,
+			layout,
+			className: cn(layout === "viewport" && (resolvedScroll === "page" ? "min-h-dvh" : "h-dvh min-h-0 overflow-hidden"), className),
+			...props
+		})
+	});
+}
+function AppShellContent({ className, ...props }) {
+	const scroll = usePageScroll();
+	return /* @__PURE__ */ jsx(SidebarInset, {
+		"data-app-shell-content": "",
+		className: cn("min-h-0", scroll !== "page" && "overflow-hidden", className),
+		...props
+	});
+}
+function AppShellHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "app-shell",
+		"data-control-family": "app-shell-header",
+		"data-slot": "root",
+		className: cn("sticky top-0 z-30 flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { AppShell, AppShellContent, AppShellHeader };

package/dist/ui/autocomplete.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/ui/breadcrumb.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {

package/dist/ui/button.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { skinAdornment } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];

package/dist/ui/card.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/card.tsx
 function Card({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/code-diff.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { ScrollArea } from "./scroll-area.js";
 import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
+import { ScrollArea } from "./scroll-area.js";
 import { CodeCopy, CodeFloatingCopy, CodeTokenLine } from "./code.js";
 import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/ui/code.js

@@ -1,10 +1,10 @@
 "use client";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
-import { ScrollArea } from "./scroll-area.js";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/collapsible.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#region src/ui/collapsible.tsx
 function CollapsibleTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/color-picker.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";

package/dist/ui/combobox.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/ui/context-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute, skinAdornment } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";

package/dist/ui/drawer.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dropdown-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/empty.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/hover-card.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";

package/dist/ui/input-group.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { createContext, use } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/input-group.tsx
 const InputGroupSurfaceContext = createContext(false);
 function useIsInsideInputGroup() {

package/dist/ui/item.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/item.tsx
 const itemVariants = [
 	"default",

package/dist/ui/menubar.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/morphing-panel.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/morphing-panel.tsx
 function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/navigation-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/ui/page-layout.d.ts

@@ -10,6 +10,7 @@ export type PageScroll = PageScrollMode | "auto";
 export declare const pageHeaderVariants: readonly ["flow", "sticky", "floating"];
 export type PageHeaderVariant = (typeof pageHeaderVariants)[number];
 type PageStyle = CSSProperties & PageLayoutKnobStyle;
+export declare const PageScrollContext: import("react").Context<"inset" | "none" | "page" | null>;
 export declare function usePageScroll(scroll?: PageScroll): PageScrollMode;
 export type PageLayoutProps = Omit<ComponentProps<"div">, "style"> & {
   scroll?: PageScroll;

package/dist/ui/page-layout.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/page-layout.tsx
 const pageWidths = [
@@ -20,9 +21,12 @@ const pageHeaderVariants = [
 	"sticky",
 	"floating"
 ];
+const PageScrollContext = createContext(null);
 function usePageScroll(scroll = "auto") {
 	const skin = useSkin();
+	const inheritedScroll = useContext(PageScrollContext);
 	if (scroll !== "auto") return scroll;
+	if (inheritedScroll) return inheritedScroll;
 	return skin.sidebarLayout === "page" ? "page" : "inset";
 }
 function PageLayout({ scroll = "auto", width = "prose", scrollViewportRef, children, className, ...props }) {
@@ -34,7 +38,7 @@ function PageLayout({ scroll = "auto", width = "prose", scrollViewportRef, child
 		"data-slot": "root",
 		"data-scroll": resolvedScroll,
 		"data-width": width,
-		className: cn("flex w-full flex-col", resolvedScroll !== "page" && "min-h-0 flex-1 overflow-hidden", className),
+		className: cn("flex min-w-0 w-full flex-col", resolvedScroll === "page" ? "grow" : "min-h-0 flex-1 overflow-hidden", className),
 		...props,
 		children: scrollsInset ? /* @__PURE__ */ jsx(ScrollArea, {
 			className: "min-h-0 flex-1",
@@ -103,4 +107,4 @@ function PageBody({ aside, contentClassName, children, className, ...props }) {
 	});
 }
 //#endregion
-export { PageActions, PageBody, PageDescription, PageHeader, PageLayout, PageTitle, pageHeaderVariants, pageScrollModes, pageWidths, usePageScroll };
+export { PageActions, PageBody, PageDescription, PageHeader, PageLayout, PageScrollContext, PageTitle, pageHeaderVariants, pageScrollModes, pageWidths, usePageScroll };

package/dist/ui/phone-input.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { Input } from "./input.js";
-import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 import flags from "react-phone-number-input/flags";
+import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;

package/dist/ui/popover.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

package/dist/ui/rich-tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { prefersReducedMotion } from "../lib/motion.js";
 import { PopupArrowShape } from "../popup-parts.js";

package/dist/ui/select.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";

package/dist/ui/sheet.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";

package/dist/ui/sidebar-menu.js

@@ -5,8 +5,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [
@@ -72,7 +72,7 @@ function SidebarMenu({ className, indicator, style, children, ...props }) {
 		"data-control-family": "sidebar",
 		"data-slot": "menu",
 		"data-indicator": resolvedIndicator,
-		className: cn("flex min-w-0 flex-col", hasHighlight ? void 0 : className),
+		className: cn("flex min-w-0 flex-col group-data-[collapsible=icon]:mx-0 group-data-[collapsible=icon]:border-0 group-data-[collapsible=icon]:px-0", hasHighlight ? void 0 : className),
 		style: hasHighlight ? void 0 : style,
 		...props,
 		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
@@ -113,6 +113,7 @@ function SidebarMenuBadge({ className, ...props }) {
 function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ref, ...props }) {
 	const { isMobile, state } = useSidebar();
 	const surface = useContext(SidebarSurfaceContext);
+	const tooltipEnabled = !isMobile && state === "collapsed" && surface?.collapsible === "icon";
 	const indicator = useContext(SidebarMenuContext);
 	const buttonRef = useRef(null);
 	const [textLabel, setTextLabel] = useState("");
@@ -131,19 +132,20 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
 			"data-variant": variant,
 			"data-active": isActive || void 0,
 			"data-track-item": indicator !== "none" ? "" : void 0,
-			className: cn("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:w-(--cui-sidebar-menu-button-height) disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
+			className: cn("peer/menu-button flex items-center overflow-hidden text-start disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
 			children
 		}
 	});
 	if (!tooltip && surface?.collapsible !== "icon") return button;
 	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !tooltipEnabled,
 		onOpenChange: (open) => {
 			if (open && !tooltip) setTextLabel(buttonRef.current?.textContent?.trim() ?? "");
 		},
 		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
 			side: surface?.side === "right" ? "inline-start" : "inline-end",
 			align: "center",
-			hidden: state !== "collapsed" || isMobile,
+			hidden: !tooltipEnabled,
 			children: tooltip ?? textLabel
 		})]
 	});

package/dist/ui/sidebar-provider.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
-import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
 import { TooltipProvider } from "./tooltip.js";
+import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "16rem";

package/dist/ui/sidebar-resize-rail.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/sidebar-resize-rail.tsx
 const DRAG_THRESHOLD_PX = 5;
 const KEYBOARD_STEP_PX = 10;

package/dist/ui/sidebar.js

@@ -8,9 +8,9 @@ import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements,
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";
@@ -36,7 +36,7 @@ function Sidebar({ side = "left", collapsible = "offcanvas", ...props }) {
 }
 function SidebarSurface({ variant, label = "Navigation", ref, className, children, style, railContainerRef, ...props }) {
 	const { side, collapsible } = useSidebarSurface();
-	const { offcanvasRef } = useSidebarElements();
+	const { offcanvasRef, triggerRef } = useSidebarElements();
 	const skin = useSkin();
 	const { isMobile, state, openMobile, setOpenMobile, layout, sidebarId } = useSidebar();
 	const resolvedVariant = variant ?? skin.sidebarLayout ?? "sidebar";
@@ -50,7 +50,7 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			"data-control-family": "sidebar",
 			"data-slot": "container",
 			tabIndex: -1,
-			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]" : "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -90,6 +90,7 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			onOpenChange: setOpenMobile,
 			children: /* @__PURE__ */ jsxs(SheetContent, {
 				side,
+				finalFocus: triggerRef,
 				className: "w-(--sidebar-width) gap-0 p-0",
 				style: mobileSheetStyle,
 				children: [/* @__PURE__ */ jsx(SheetHeader, {

package/dist/ui/timeline.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/timeline.tsx
 function Timeline({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {

package/dist/ui/toast.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";

package/dist/ui/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
-import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 import { CSSProperties, ComponentProps } from "react";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 //#region src/ui/toolbar.d.ts
 export type ToolbarVariant = "default" | "inverse" | "floating";
 export type ToolbarLinkVariant = "default" | "track";

package/dist/ui/toolbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 //#region src/ui/toolbar.tsx
 function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {

package/dist/ui/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { PopupArrowShape } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/tree.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
 const TYPEAHEAD_TIMEOUT = 500;

package/dist/ui/trigger-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/user-ask.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { Button } from "./ui/button.js";
-import { LiveStatus } from "./ui/live-status.js";
 import { useUserAsk } from "./hooks/use-user-ask.js";
+import { Button } from "./ui/button.js";
 import { Kbd } from "./ui/kbd.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {