@qeetrix/react 0.0.2 → 0.0.4

package/dist/css/select.css

@@ -170,4 +170,20 @@
     font-variation-settings: "GEOM" var(--qx-font-geometry-body);
     color: var(--qx-color-text-subtle);
   }
+  
+  @media (forced-colors: active) {
+    .qx-select-trigger {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-select-option[data-highlighted] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-select-option[data-highlighted] .qx-select-option-check {
+      color: highlighttext;
+    }
+  }
 }

package/dist/css/separator.css

@@ -25,4 +25,11 @@
   .qx-separator[data-tone="strong"] {
     background: var(--qx-color-border-strong);
   }
+  
+  @media (forced-colors: active) {
+    .qx-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
 }

package/dist/css/skeleton.css

@@ -30,4 +30,10 @@
       opacity: .45;
     }
   }
+  
+  @media (forced-colors: active) {
+    .qx-skeleton {
+      border: var(--qx-border-width-default) solid GrayText;
+    }
+  }
 }

package/dist/css/slider.css

@@ -83,4 +83,26 @@
     background: var(--qx-color-icon-disabled);
     cursor: not-allowed;
   }
+  
+  @media (forced-colors: active) {
+    .qx-slider-track, .qx-slider-indicator, .qx-slider-thumb {
+      forced-color-adjust: none;
+    }
+  
+    .qx-slider-track {
+      background: graytext;
+    }
+  
+    .qx-slider-indicator, .qx-slider-thumb {
+      background: highlight;
+    }
+  
+    .qx-slider-thumb {
+      box-shadow: 0 0 0 var(--qx-border-width-strong) Canvas;
+    }
+  
+    .qx-slider-thumb[data-disabled], [data-disabled] .qx-slider-indicator {
+      background: graytext;
+    }
+  }
 }

package/dist/css/switch.css

@@ -76,4 +76,37 @@
   .qx-choice-label > .qx-switch {
     margin-block: 1px;
   }
+  
+  @media (forced-colors: active) {
+    .qx-switch, .qx-switch-thumb {
+      forced-color-adjust: none;
+    }
+  
+    .qx-switch {
+      background: canvas;
+      border-color: canvastext;
+    }
+  
+    .qx-switch-thumb {
+      background: canvastext;
+    }
+  
+    .qx-switch[data-checked] {
+      background: highlight;
+      border-color: highlight;
+    }
+  
+    .qx-switch-thumb[data-checked] {
+      background: highlighttext;
+    }
+  
+    .qx-switch[data-disabled] {
+      background: canvas;
+      border-color: graytext;
+    }
+  
+    .qx-switch-thumb[data-disabled] {
+      background: graytext;
+    }
+  }
 }

package/dist/css/tabs.css

@@ -109,4 +109,15 @@
     outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
     outline-offset: var(--qx-focus-ring-offset);
   }
+  
+  @media (forced-colors: active) {
+    .qx-tabs-list:not([data-orientation="vertical"]) {
+      border-block-end: var(--qx-border-width-strong) solid CanvasText;
+    }
+  
+    .qx-tabs-indicator {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  }
 }

package/dist/css/toast.css

@@ -105,4 +105,11 @@
     flex: none;
     margin-block: -2px;
   }
+  
+  @media (forced-colors: active) {
+    .qx-toast {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-inline-start-width: var(--qx-border-width-accent);
+    }
+  }
 }

package/dist/css/toggle.css

@@ -109,4 +109,17 @@
   .qx-toggle-group[data-variant="segmented"][data-size="lg"] > .qx-toggle {
     block-size: calc(var(--qx-size-control-lg) - 2 * var(--qx-border-width-default));
   }
+  
+  @media (forced-colors: active) {
+    .qx-toggle {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-toggle[data-pressed] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
 }

package/dist/css/tooltip.css

@@ -38,4 +38,10 @@
   .qx-tooltip[data-instant] {
     transition: none;
   }
+  
+  @media (forced-colors: active) {
+    .qx-tooltip {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
 }

package/dist/dialog/dialog.d.ts

@@ -1,3 +1,4 @@
+import { QeetrixMessages } from "../internal/messages.js";
 import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 /** The kind of decision: `standard`, or a `danger` / `warning` alert dialog. */
@@ -24,6 +25,8 @@ export interface DialogContentProps extends Omit<Dialog.Popup.Props, "className"
   description?: ReactNode;
   /** Width: `sm` 400, `md` 560 (default) or `lg` 800px. */
   size?: DialogSize;
+  /** The close button's label, over QeetrixProvider's and the English default. */
+  messages?: Partial<QeetrixMessages["overlay"]>;
   /** Placement only. */
   className?: string;
   style?: CSSProperties;
@@ -43,7 +46,7 @@ export declare function DialogClose(props: DialogCloseProps): ReactElement;
  * body and footer. The close button comes last in the DOM, so initial focus lands on the first field
  * or else the footer's first (least destructive) action.
  */
-export declare function DialogContent({ title, description, size, className, children, ...props }: DialogContentProps): ReactElement;
+export declare function DialogContent({ title, description, size, messages, className, children, ...props }: DialogContentProps): ReactElement;
 /** The dialog's content; it scrolls when the dialog reaches its maximum height. */
 export declare function DialogBody({ className, ...props }: DialogBodyProps): ReactElement;
 /** The actions, end-aligned: tertiary first, then the primary or destructive action. */

package/dist/dialog/dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { cx } from "../internal/cx.js";
-import { messages } from "../internal/messages.js";
 import { IconButton } from "../button/button.js";
+import { useMessages } from "../provider/provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use } from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
@@ -59,8 +59,9 @@ function DialogClose(props) {
 * body and footer. The close button comes last in the DOM, so initial focus lands on the first field
 * or else the footer's first (least destructive) action.
 */
-function DialogContent({ title, description, size = "md", className, children, ...props }) {
+function DialogContent({ title, description, size = "md", messages, className, children, ...props }) {
 	const { intent, dismissible } = use(DialogContext);
+	const strings = useMessages("overlay", messages);
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 		className: "qx-dialog-backdrop",
 		"data-slot": "dialog-backdrop"
@@ -93,7 +94,7 @@ function DialogContent({ title, description, size = "md", className, children, .
 					"data-slot": "dialog-close",
 					children: /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
 						icon: XIcon,
-						"aria-label": messages.overlay.close,
+						"aria-label": strings.close,
 						size: "sm"
 					}) })
 				})

package/dist/drawer/drawer.d.ts

@@ -1,3 +1,4 @@
+import { QeetrixMessages } from "../internal/messages.js";
 import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
 import { Drawer } from "@base-ui/react/drawer";
 /** The edge a drawer opens from, in the text direction: `end` is the right edge in English. */
@@ -16,6 +17,8 @@ export interface DrawerContentProps extends Omit<Drawer.Popup.Props, "className"
   description?: ReactNode;
   /** Width: `sm` 400, `md` 560 (default) or `lg` 800px. */
   size?: DrawerSize;
+  /** The close button's label, over QeetrixProvider's and the English default. */
+  messages?: Partial<QeetrixMessages["overlay"]>;
   /** Placement only. */
   className?: string;
   style?: CSSProperties;
@@ -38,7 +41,7 @@ export declare function DrawerClose(props: DrawerCloseProps): ReactElement;
  * focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
  * drawer itself, so a phone's keyboard doesn't open over it.
  */
-export declare function DrawerContent({ title, description, size, initialFocus, ref, className, children, ...props }: DrawerContentProps): ReactElement;
+export declare function DrawerContent({ title, description, size, messages, initialFocus, ref, className, children, ...props }: DrawerContentProps): ReactElement;
 /** The drawer's content; it scrolls, and text in it can be selected without starting a swipe. */
 export declare function DrawerBody({ className, ...props }: DrawerBodyProps): ReactElement;
 /** The actions, end-aligned under a rule: tertiary first, then the primary action. */

package/dist/drawer/drawer.js

@@ -1,12 +1,12 @@
 "use client";
 import { cx } from "../internal/cx.js";
-import { messages } from "../internal/messages.js";
 import { IconButton } from "../button/button.js";
+import { useMessages } from "../provider/provider.js";
 import { mergeRefs } from "../internal/refs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useRef } from "react";
-import { XIcon } from "@qeetrix/icons/icons/x";
 import { useDirection } from "@base-ui/react/direction-provider";
+import { XIcon } from "@qeetrix/icons/icons/x";
 import { Drawer } from "@base-ui/react/drawer";
 // src/drawer/drawer.tsx
 const SideContext = createContext("end");
@@ -37,8 +37,9 @@ function DrawerClose(props) {
 * focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
 * drawer itself, so a phone's keyboard doesn't open over it.
 */
-function DrawerContent({ title, description, size = "md", initialFocus, ref, className, children, ...props }) {
+function DrawerContent({ title, description, size = "md", messages, initialFocus, ref, className, children, ...props }) {
 	const side = use(SideContext);
+	const strings = useMessages("overlay", messages);
 	const popup = useRef(null);
 	const firstInBody = (type) => type === "touch" || (popup.current?.querySelector(`[data-slot="drawer-body"] :is(${FOCUSABLE})`) ?? true);
 	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, {
@@ -74,7 +75,7 @@ function DrawerContent({ title, description, size = "md", initialFocus, ref, cla
 					"data-slot": "drawer-close",
 					children: /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
 						icon: XIcon,
-						"aria-label": messages.overlay.close,
+						"aria-label": strings.close,
 						size: "sm"
 					}) })
 				})

package/dist/experimental/alert/alert.d.ts

@@ -0,0 +1,29 @@
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends Omit<ComponentProps<"div">, "title"> {
+  /** Default `info`. The icon and a hidden word ("Warning:") carry it, never colour alone. */
+  tone?: AlertTone;
+  /** What happened, in a few words: "Directory sync failed". */
+  title: ReactNode;
+  /** One or two sentences: why, and what to do. */
+  children?: ReactNode;
+  /** Buttons or links under the text: one primary at most. */
+  actions?: ReactNode;
+  /** Adds a Dismiss button. The product decides whether the alert comes back. */
+  onDismiss?: () => void;
+  /**
+   * Only for an alert that appears after something happens: `polite` (`role="status"`) waits its
+   * turn; `urgent` (`role="alert"`) interrupts, for errors that block the task. An alert that is
+   * there when the page loads needs neither.
+   */
+  announce?: "polite" | "urgent";
+  /** This alert's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["alert"]>;
+}
+/**
+ * A message in the page (07-components.md, C2): above a form, inside a card, or across the top of
+ * a console page in AppShell's `notifications`. A tinted surface with the 3px status edge on its
+ * start side. It never takes focus and never disappears by itself.
+ */
+export declare function Alert({ tone, title, children, actions, onDismiss, announce, messages, className, ...props }: AlertProps): ReactElement;

package/dist/experimental/alert/alert.js

@@ -0,0 +1,72 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { IconButton } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { CircleCheckIcon } from "@qeetrix/icons/icons/circle-check";
+import { InfoIcon } from "@qeetrix/icons/icons/info";
+import { TriangleAlertIcon } from "@qeetrix/icons/icons/triangle-alert";
+// src/experimental/alert/alert.tsx
+const ICONS = {
+	info: InfoIcon,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon,
+	danger: CircleAlertIcon
+};
+/**
+* A message in the page (07-components.md, C2): above a form, inside a card, or across the top of
+* a console page in AppShell's `notifications`. A tinted surface with the 3px status edge on its
+* start side. It never takes focus and never disappears by itself.
+*/
+function Alert({ tone = "info", title, children, actions, onDismiss, announce, messages, className, ...props }) {
+	const strings = useMessages("alert", messages);
+	const Icon = ICONS[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: announce === "urgent" ? "alert" : announce === "polite" ? "status" : void 0,
+		className: cx("qx-alert", className),
+		"data-slot": "alert",
+		"data-tone": tone,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-alert-icon"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-alert-body",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "qx-alert-title",
+						"data-slot": "alert-title",
+						children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: `${strings[tone]}: ` }), title]
+					}),
+					children != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-alert-description",
+						"data-slot": "alert-description",
+						children
+					}),
+					actions != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-alert-actions",
+						"data-slot": "alert-actions",
+						children: actions
+					})
+				]
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				icon: XIcon,
+				"aria-label": strings.dismiss,
+				size: "sm",
+				tone: "neutral",
+				tooltip: false,
+				onClick: onDismiss,
+				className: "qx-alert-dismiss"
+			})
+		]
+	});
+}
+export { Alert };

package/dist/experimental/alert/index.d.ts

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertTone } from "./alert.js";
+export { Alert, type AlertProps, type AlertTone };

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

@@ -0,0 +1,60 @@
+import { QeetrixIcon } from "../../internal/control.js";
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** The frame's density; `inherit` leaves it to the page. */
+export type AppShellDensity = "compact" | "default" | "comfortable" | "inherit";
+/** An end-edge panel: help, the assistant, activity. */
+export interface AppShellDrawer {
+  id: string;
+  /** The trigger's label and the panel's title. */
+  label: string;
+  /** The trigger's icon, from `@qeetrix/icons`. */
+  icon: QeetrixIcon;
+  /** The panel's content. */
+  content: ReactNode;
+  /** A dot on the trigger: something new inside. */
+  badge?: boolean;
+}
+export interface AppShellProps extends Omit<ComponentProps<"div">, "children"> {
+  /** The global bar: a TopBar. */
+  topBar?: ReactNode;
+  /** The navigation: a Sidebar. */
+  sidebar?: ReactNode;
+  /** End-edge panels: help, the assistant, activity. Their triggers sit in the TopBar. */
+  drawers?: AppShellDrawer[];
+  /** The open panel's id, or `null`, controlled. */
+  activeDrawer?: string | null;
+  /** The open panel when uncontrolled. Default none. */
+  defaultActiveDrawer?: string | null;
+  /** Called with the panel that opens, or `null` when it closes. */
+  onActiveDrawerChange?: (id: string | null) => void;
+  /** Page messages (Alerts) above the page header. */
+  notifications?: ReactNode;
+  /** The frame's density. Default `compact`: consoles are dense (design rules §15). */
+  density?: AppShellDensity;
+  /** The page: a PageHeader and PageContent. */
+  children?: ReactNode;
+  /** Whether the sidebar is collapsed to its icon rail, controlled. */
+  sidebarCollapsed?: boolean;
+  /** The initial collapsed state when uncontrolled. Default `false`. */
+  defaultSidebarCollapsed?: boolean;
+  /** Called with the new collapsed state. Persist it in the product, e.g. the user's settings. */
+  onSidebarCollapsedChange?: (collapsed: boolean) => void;
+  /** The main region's id, which the built-in skip link targets. Default `main`. */
+  mainId?: string;
+  /** The shell's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["appShell"]>;
+}
+export interface AppShellState {
+  /** The sidebar is showing as its icon rail. */
+  collapsed: boolean;
+}
+/** The AppShell's state, for content inside its sidebar or bar. */
+export declare function useAppShell(): AppShellState;
+/**
+ * The frame of a Qeet console (07-components.md, C1 · Ruled): the black scope bar across the full
+ * width; the ruled navigation column, which collapses to a 48px icon rail that expands while
+ * hovered or focused; the page; and a panel on the end edge that the bar's tools open. Seams are
+ * 1px rules, never shadows. Compact by default.
+ */
+export declare function AppShell({ topBar, sidebar, drawers, activeDrawer, defaultActiveDrawer, onActiveDrawerChange, notifications, density, children, sidebarCollapsed, defaultSidebarCollapsed, onSidebarCollapsedChange, mainId, messages, className, ...props }: AppShellProps): ReactElement;

package/dist/experimental/app-shell/app-shell.js

@@ -0,0 +1,224 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { Tooltip } from "../../tooltip/tooltip.js";
+import { IconButton } from "../../button/button.js";
+import { useMediaQuery } from "../../internal/media.js";
+import { useMessages } from "../../provider/provider.js";
+import { SkipLink } from "../../skip-link/skip-link.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { Drawer } from "@base-ui/react/drawer";
+import { PanelLeftCloseIcon } from "@qeetrix/icons/icons/panel-left-close";
+import { PanelLeftOpenIcon } from "@qeetrix/icons/icons/panel-left-open";
+// src/experimental/app-shell/app-shell.tsx
+/** The `expanded` window class (tokens `breakpoint.expanded`): the sidebar is a column from here. */
+const WIDE = "(width >= 840px)";
+/** How long the pointer rests on the rail before it expands over the page. */
+const PEEK_DELAY = 200;
+const ShellContext = createContext(null);
+const outside = {
+	collapsed: false,
+	inDrawer: false,
+	narrow: false,
+	expand: () => {},
+	closeDrawer: () => {},
+	openNavigation: () => {},
+	drawers: [],
+	activeDrawer: null,
+	toggleDrawer: () => {},
+	strings: {
+		collapse: "",
+		expand: "",
+		open: "",
+		navigation: "",
+		tools: "",
+		closePanel: ""
+	}
+};
+/** The shell's state, for its own parts. Outside an AppShell, a sidebar is expanded. */
+function useShellState() {
+	return use(ShellContext) ?? outside;
+}
+/** The AppShell's state, for content inside its sidebar or bar. */
+function useAppShell() {
+	const { collapsed, inDrawer } = useShellState();
+	return { collapsed: collapsed && !inDrawer };
+}
+/**
+* The frame of a Qeet console (07-components.md, C1 · Ruled): the black scope bar across the full
+* width; the ruled navigation column, which collapses to a 48px icon rail that expands while
+* hovered or focused; the page; and a panel on the end edge that the bar's tools open. Seams are
+* 1px rules, never shadows. Compact by default.
+*/
+function AppShell({ topBar, sidebar, drawers = [], activeDrawer, defaultActiveDrawer = null, onActiveDrawerChange, notifications, density = "compact", children, sidebarCollapsed, defaultSidebarCollapsed = false, onSidebarCollapsedChange, mainId = "main", messages, className, ...props }) {
+	const strings = useMessages("appShell", messages);
+	const skip = useMessages("skipLink");
+	const wide = useMediaQuery(WIDE, true);
+	const rtl = useDirection() === "rtl";
+	const panelTitle = useId();
+	const [ownCollapsed, setOwnCollapsed] = useState(defaultSidebarCollapsed);
+	const collapsed = sidebarCollapsed ?? ownCollapsed;
+	const setCollapsed = (next) => {
+		if (sidebarCollapsed === void 0) setOwnCollapsed(next);
+		onSidebarCollapsedChange?.(next);
+	};
+	const [ownDrawer, setOwnDrawer] = useState(defaultActiveDrawer);
+	const active = activeDrawer === void 0 ? ownDrawer : activeDrawer;
+	const setActive = (next) => {
+		if (activeDrawer === void 0) setOwnDrawer(next);
+		onActiveDrawerChange?.(next);
+	};
+	const panel = drawers.find((drawer) => drawer.id === active);
+	const [navOpen, setNavOpen] = useState(false);
+	const [peek, setPeek] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => window.clearTimeout(timer.current), []);
+	const startPeek = () => {
+		if (!collapsed) return;
+		window.clearTimeout(timer.current);
+		timer.current = window.setTimeout(() => setPeek(true), PEEK_DELAY);
+	};
+	const endPeek = () => {
+		window.clearTimeout(timer.current);
+		setPeek(false);
+	};
+	const shell = {
+		collapsed: collapsed && !peek,
+		inDrawer: false,
+		narrow: !wide,
+		expand: () => {
+			endPeek();
+			setCollapsed(false);
+		},
+		closeDrawer: () => setNavOpen(false),
+		openNavigation: () => setNavOpen(true),
+		drawers,
+		activeDrawer: active,
+		toggleDrawer: (id) => setActive(active === id ? null : id),
+		strings
+	};
+	const collapseControl = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "qx-app-shell-collapse",
+		"aria-expanded": !collapsed,
+		onClick: () => {
+			endPeek();
+			setCollapsed(!collapsed);
+		},
+		children: [/* @__PURE__ */ jsx(collapsed ? PanelLeftOpenIcon : PanelLeftCloseIcon, {
+			shape: "round",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-app-shell-collapse-icon"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "qx-app-shell-collapse-label",
+			children: collapsed ? strings.expand : strings.collapse
+		})]
+	});
+	return /* @__PURE__ */ jsx(ShellContext, {
+		value: shell,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cx("qx-app-shell", className),
+			"data-slot": "app-shell",
+			"data-qx-density": density === "inherit" ? void 0 : density,
+			"data-collapsed": collapsed ? "" : void 0,
+			"data-drawer-open": panel ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsx(SkipLink, {
+					href: `#${mainId}`,
+					children: skip.label
+				}),
+				topBar != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-app-shell-top",
+					children: topBar
+				}),
+				sidebar != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-app-shell-nav",
+					"data-slot": "app-shell-nav",
+					"data-peek": peek ? "" : void 0,
+					onPointerEnter: startPeek,
+					onPointerLeave: endPeek,
+					onFocus: () => collapsed && setPeek(true),
+					onBlur: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) setPeek(false);
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "qx-app-shell-nav-panel",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "qx-app-shell-nav-body",
+							children: sidebar
+						}), /* @__PURE__ */ jsx("div", {
+							className: "qx-app-shell-nav-foot",
+							children: /* @__PURE__ */ jsx(Tooltip, {
+								content: strings.expand,
+								side: "inline-end",
+								disabled: !collapsed || peek,
+								children: collapseControl
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("main", {
+					id: mainId,
+					tabIndex: -1,
+					className: "qx-app-shell-main",
+					"data-slot": "app-shell-main",
+					children: [notifications != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-app-shell-notifications",
+						"data-slot": "app-shell-notifications",
+						children: notifications
+					}), children]
+				}),
+				panel && /* @__PURE__ */ jsxs("aside", {
+					className: "qx-app-shell-panel",
+					"data-slot": "app-shell-panel",
+					"aria-labelledby": panelTitle,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "qx-app-shell-panel-header",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: panelTitle,
+							className: "qx-app-shell-panel-title",
+							children: panel.label
+						}), /* @__PURE__ */ jsx(IconButton, {
+							icon: XIcon,
+							"aria-label": strings.closePanel,
+							size: "sm",
+							tone: "neutral",
+							tooltip: false,
+							onClick: () => setActive(null)
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "qx-app-shell-panel-body",
+						children: panel.content
+					})]
+				}),
+				sidebar != null && /* @__PURE__ */ jsx(Drawer.Root, {
+					open: navOpen && !wide,
+					onOpenChange: setNavOpen,
+					swipeDirection: rtl ? "right" : "left",
+					children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: "qx-app-shell-backdrop" }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+						className: "qx-app-shell-viewport",
+						children: /* @__PURE__ */ jsx(Drawer.Popup, {
+							className: "qx-app-shell-drawer",
+							"data-slot": "app-shell-drawer",
+							"data-qx-density": density === "inherit" ? void 0 : density,
+							"aria-label": strings.navigation,
+							children: /* @__PURE__ */ jsx(ShellContext, {
+								value: {
+									...shell,
+									collapsed: false,
+									inDrawer: true
+								},
+								children: sidebar
+							})
+						})
+					})] })
+				})
+			]
+		})
+	});
+}
+export { AppShell, useAppShell, useShellState };