@stealthscale/component-screen 0.0.1 → 0.2.2

package/dist/root-qEh4u7y5.js

@@ -0,0 +1,1182 @@
+import { r as FOLDS, t as recipe } from "./recipe-DRMsitrw.js";
+import { c } from "react/compiler-runtime";
+import { createSlotRecipeContext } from "@stealthscale/theme";
+import { createRequiredContext, useConst, useControllableState, useSafeLayoutEffect } from "@stealthscale/hooks";
+import { RovingFocus, VisuallyHidden } from "@stealthscale/component-a11y";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId, useState } from "react";
+import { Portal } from "@stealthscale/component-primitives";
+import { Menu, Tooltip } from "@stealthscale/component-disclosure";
+//#region src/toolbar/item.tsx
+/**
+* Renders the control as a roving focus item.
+*
+* @param props - The element or component it renders as, the link's target and the item's props.
+* @returns The control element.
+*/
+function Item(t0) {
+	const $ = c(10);
+	let as;
+	let href;
+	let rest;
+	if ($[0] !== t0) {
+		({as, href, ...rest} = t0);
+		$[0] = t0;
+		$[1] = as;
+		$[2] = href;
+		$[3] = rest;
+	} else {
+		as = $[1];
+		href = $[2];
+		rest = $[3];
+	}
+	let t1;
+	if ($[4] !== as || $[5] !== href || $[6] !== rest) {
+		t1 = as === void 0 ? href === void 0 ? {
+			as: "button",
+			type: "button",
+			...rest
+		} : {
+			as: "a",
+			href,
+			...rest
+		} : {
+			as,
+			href,
+			...rest
+		};
+		$[4] = as;
+		$[5] = href;
+		$[6] = rest;
+		$[7] = t1;
+	} else t1 = $[7];
+	const t2 = t1;
+	let t3;
+	if ($[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(RovingFocus.Item, { ...t2 });
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+//#endregion
+//#region src/folding/fold.ts
+/**
+* Registers the actions a narrow row folds into its menu.
+*
+* @remarks
+*   A folded action renders nothing in its row and registers with the row, so no hidden control
+*   remains in the tab order or in a toolbar's arrow-key order. The row keeps the entries in state
+*   and renders its menu from them. An action folds in a layout effect, so the row and its menu
+*   render before the browser paints the narrow row.
+*/
+/**
+* Context through which a row provides its fold functions to its actions.
+*/
+const FoldContext = createContext(void 0);
+/**
+* Returns the entries with an action added at the end, or replaced in place under its id.
+*/
+function placed(held, id, action) {
+	const at = held.findIndex((entry) => entry.id === id);
+	return at === -1 ? [...held, {
+		action,
+		id
+	}] : held.with(at, {
+		action,
+		id
+	});
+}
+/**
+* Keeps a row's folded actions and the functions that register them.
+*
+* @remarks
+*   The functions keep their identity for the row's lifetime, so an action's registering effect
+*   runs when the action folds or unfolds and not when the row renders.
+* @returns The entries in the order the actions folded, and the functions to provide to them.
+*/
+function useFolded() {
+	const $ = c(5);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [entries, setEntries] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => ({
+			put: (id, action) => {
+				setEntries((held) => placed(held, id, action));
+			},
+			remove: (id_0) => {
+				setEntries((held_0) => held_0.filter((entry) => entry.id !== id_0));
+			}
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	const fold = useConst(t1);
+	let t2;
+	if ($[2] !== entries || $[3] !== fold) {
+		t2 = [entries, fold];
+		$[2] = entries;
+		$[3] = fold;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+/**
+* Registers an action with its row while it is folded.
+*
+* @remarks
+*   The first effect adds the entry when the action folds and removes it when the action unfolds or
+*   unmounts. The second runs after every render of a folded action and replaces the entry's data
+*   in place, so an `onClick` written inline keeps the action's place in the menu. An action
+*   outside a row that folds registers nothing.
+* @param folded - Whether the row folds the action into its menu.
+* @param action - The action as the menu row renders it.
+* @param id - The id the action registers under. A toolbar control passes the id it writes in
+*   `data-folds`, and any other action registers under an id of its own.
+*/
+function useFoldable(folded, action, id) {
+	const $ = c(10);
+	const fold = use(FoldContext);
+	const own = useId();
+	const key = id ?? own;
+	let t0;
+	let t1;
+	if ($[0] !== fold || $[1] !== folded || $[2] !== key) {
+		t0 = () => {
+			if (!folded || fold === void 0) return;
+			return () => {
+				fold.remove(key);
+			};
+		};
+		t1 = [
+			fold,
+			folded,
+			key
+		];
+		$[0] = fold;
+		$[1] = folded;
+		$[2] = key;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useSafeLayoutEffect(t0, t1);
+	let t2;
+	if ($[5] !== action || $[6] !== fold || $[7] !== folded || $[8] !== key) {
+		t2 = () => {
+			if (folded) fold?.put(key, action);
+		};
+		$[5] = action;
+		$[6] = fold;
+		$[7] = folded;
+		$[8] = key;
+		$[9] = t2;
+	} else t2 = $[9];
+	useSafeLayoutEffect(t2);
+}
+//#endregion
+//#region src/sidebar/state.ts
+/**
+* Provides the sidebar's state to its parts, and a nav block's label identifier to its `NavLabel`.
+*
+* @remarks
+*   The root provides whether the sidebar is a rail and how to open the panel it is in, which the
+*   search reads to open the panel before it takes focus. A block creates its label identifier and
+*   the label reads it, so the two always match without an identifier from the caller. A
+*   `NavLabel` outside a block throws.
+*/
+/**
+* Size of the search field and the rail's search button per sidebar size.
+*/
+const FIELDS = {
+	lg: "md",
+	md: "sm",
+	sm: "sm"
+};
+/**
+* Returns the size of a sidebar's search field and of the rail's search button.
+*
+* @param size - The sidebar's size.
+* @returns The field's size, one smaller than the sidebar, down to `sm`.
+*/
+function fieldSizeOf(size) {
+	return FIELDS[size];
+}
+/**
+* Provides the sidebar's state and reads it, throwing outside `Sidebar.Root` or returning
+* `undefined` there.
+*/
+const [SidebarProvider, useSidebar, useEnclosingSidebar] = createRequiredContext("Sidebar.Root");
+/**
+* Provides the block's state and reads it, throwing outside a `Sidebar.Nav`.
+*/
+const [NavProvider, useNav] = createRequiredContext("Sidebar.Nav");
+//#endregion
+//#region src/switcher/context.ts
+/**
+* Binds the switcher's recipe to the elements of its parts.
+*
+* @remarks
+*   The binding is in its own module, because an application's compiler reads the recipe at build
+*   time and the binding imports the runtime.
+*/
+/**
+* Binds the recipe once. The root provides the variants and every other part reads them.
+*/
+const { withContext, withRootProvider } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/switcher/detail.ts
+/**
+* Renders the detail `span` at the switcher's size.
+*/
+const Detail = withContext("span", "detail");
+//#endregion
+//#region src/switcher/indicator.ts
+/**
+* Renders the menu's indicator with the indicator slot's class.
+*/
+const Indicator = withContext(Menu.Indicator, "indicator");
+//#endregion
+//#region src/switcher/label.ts
+/**
+* Renders the label `span` at the switcher's size.
+*/
+const Label = withContext("span", "label");
+//#endregion
+//#region src/switcher/mark.ts
+/**
+* Renders the mark `span` at the switcher's size, hidden from the accessibility tree.
+*/
+const Mark = withContext("span", "mark", { defaultProps: { "aria-hidden": true } });
+//#endregion
+//#region src/switcher/name.ts
+/**
+* Renders the name `span` at the switcher's size.
+*/
+const Name = withContext("span", "name");
+//#endregion
+//#region src/switcher/choice.ts
+/**
+* Returns the initials of a name: the first letter of each of its first two words, in capitals.
+*
+* @param label - The name.
+* @returns One or two letters.
+*/
+function initialsOf(label) {
+	return label.split(/\s+/u).filter((word) => word !== "").slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+//#endregion
+//#region src/switcher/current.tsx
+/**
+* Renders the mark, and the name over the detail.
+*
+* @param props - The current choice.
+* @returns The mark and the label.
+*/
+function Current(t0) {
+	const $ = c(15);
+	const { choice } = t0;
+	let t1;
+	if ($[0] !== choice.label || $[1] !== choice.mark) {
+		t1 = choice.mark ?? initialsOf(choice.label);
+		$[0] = choice.label;
+		$[1] = choice.mark;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Mark, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== choice.label) {
+		t3 = /* @__PURE__ */ jsx(Name, { children: choice.label });
+		$[5] = choice.label;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== choice.detail) {
+		t4 = choice.detail === void 0 ? null : /* @__PURE__ */ jsx(Detail, { children: choice.detail });
+		$[7] = choice.detail;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Label, { children: [t3, t4] });
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t5] });
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+//#endregion
+//#region src/switcher/option.tsx
+/**
+* Renders the row as a checkable radio, or as a link for a choice with a page of its own.
+*
+* @param props - Whether the choice is current, the check's glyph, the choice and the handler.
+* @returns The menu's option item.
+*/
+function Option(t0) {
+	const $ = c(29);
+	const { checked, checkIcon, choice, onChoose } = t0;
+	let t1;
+	if ($[0] !== choice.href) {
+		t1 = choice.href === void 0 ? {} : {
+			as: "a",
+			href: choice.href
+		};
+		$[0] = choice.href;
+		$[1] = t1;
+	} else t1 = $[1];
+	const linked = t1;
+	let t2;
+	if ($[2] !== choice.value || $[3] !== onChoose) {
+		t2 = () => {
+			onChoose(choice.value);
+		};
+		$[2] = choice.value;
+		$[3] = onChoose;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== checkIcon) {
+		t3 = /* @__PURE__ */ jsx(Menu.ItemIndicator, { children: checkIcon });
+		$[5] = checkIcon;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== choice.label || $[8] !== choice.mark) {
+		t4 = choice.mark ?? initialsOf(choice.label);
+		$[7] = choice.label;
+		$[8] = choice.mark;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Menu.ItemMark, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== choice.label) {
+		t6 = /* @__PURE__ */ jsx(Menu.ItemText, { children: choice.label });
+		$[12] = choice.label;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== choice.detail) {
+		t7 = choice.detail === void 0 ? null : /* @__PURE__ */ jsx(Menu.ItemDescription, { children: choice.detail });
+		$[14] = choice.detail;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t6 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Menu.ItemLines, { children: [t6, t7] });
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== checked || $[20] !== choice.disabled || $[21] !== choice.label || $[22] !== choice.value || $[23] !== linked || $[24] !== t2 || $[25] !== t3 || $[26] !== t5 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Menu.OptionItem, {
+			checked,
+			disabled: choice.disabled,
+			onCheckedChange: t2,
+			type: "radio",
+			value: choice.value,
+			valueText: choice.label,
+			...linked,
+			children: [
+				t3,
+				t5,
+				t8
+			]
+		});
+		$[19] = checked;
+		$[20] = choice.disabled;
+		$[21] = choice.label;
+		$[22] = choice.value;
+		$[23] = linked;
+		$[24] = t2;
+		$[25] = t3;
+		$[26] = t5;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+}
+//#endregion
+//#region src/switcher/rows.tsx
+/**
+* Renders a radio row per choice, checked for the current one, and the actions after a separator.
+*
+* @param props - The choices, the current value, the check's glyph, the handler and the actions.
+* @returns A radio row per choice, then a separator and the actions where there are any.
+*/
+function Rows(t0) {
+	const $ = c(14);
+	const { checkIcon, children, choices, chosen, onChoose } = t0;
+	let t1;
+	if ($[0] !== checkIcon || $[1] !== choices || $[2] !== chosen || $[3] !== onChoose) {
+		let t2;
+		if ($[5] !== checkIcon || $[6] !== chosen || $[7] !== onChoose) {
+			t2 = (choice) => /* @__PURE__ */ jsx(Option, {
+				checked: choice.value === chosen,
+				checkIcon,
+				choice,
+				onChoose
+			}, choice.value);
+			$[5] = checkIcon;
+			$[6] = chosen;
+			$[7] = onChoose;
+			$[8] = t2;
+		} else t2 = $[8];
+		t1 = choices.map(t2);
+		$[0] = checkIcon;
+		$[1] = choices;
+		$[2] = chosen;
+		$[3] = onChoose;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[9] !== children) {
+		t2 = children === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Separator, {}), children] });
+		$[9] = children;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+//#endregion
+//#region src/switcher/submenu.tsx
+/**
+* Positioning of the submenu, which covers part of the menu where the window has no room beside
+* it, as in a phone-width window.
+*/
+const OVERLAPPING = { overlap: true };
+/**
+* Renders the row and the submenu it opens.
+*
+* @param props - The rows' props, the current choice, the indicator and the label.
+* @returns The submenu's root.
+*/
+function Submenu(t0) {
+	const $ = c(20);
+	let current;
+	let indicator;
+	let label;
+	let rows;
+	if ($[0] !== t0) {
+		({current, indicator, label, ...rows} = t0);
+		$[0] = t0;
+		$[1] = current;
+		$[2] = indicator;
+		$[3] = label;
+		$[4] = rows;
+	} else {
+		current = $[1];
+		indicator = $[2];
+		label = $[3];
+		rows = $[4];
+	}
+	let t1;
+	if ($[5] !== current) {
+		t1 = current === void 0 ? null : /* @__PURE__ */ jsx(Menu.ItemDescription, { children: current.label });
+		$[5] = current;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== label || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Menu.ItemLines, { children: [label, t1] });
+		$[7] = label;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== indicator) {
+		t3 = indicator === void 0 ? null : /* @__PURE__ */ jsx(Menu.Indicator, { children: indicator });
+		$[10] = indicator;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Menu.TriggerItem, { children: [t2, t3] });
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== rows) {
+		t5 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Rows, { ...rows }) }) }) });
+		$[15] = rows;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Menu.Root, {
+			positioning: OVERLAPPING,
+			children: [t4, t5]
+		});
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+//#endregion
+//#region src/toolbar/state.ts
+/**
+* Provides the toolbar's measured width, the controls it moves into its menu and its size to the
+* controls in it.
+*
+* @remarks
+*   An action reads the width and the moved ids to fold itself into the row's menu, and the size to
+*   render the library's button at the toolbar's size.
+*/
+/**
+* Creates the context through which the root provides the toolbar state, with a reader that throws
+* outside a toolbar and one that returns `undefined` there.
+*/
+const [ToolbarProvider, useToolbar, useEnclosingToolbar] = createRequiredContext("Toolbar");
+//#endregion
+//#region src/switcher/moved.tsx
+/**
+* Moves a switcher into its toolbar's menu while the narrow row has no room for it.
+*/
+/**
+* Registers the switcher's row with the toolbar's menu while the row moves the switcher there.
+*
+* @remarks
+*   The toolbar moves only a control that wrote its id in `data-folds`, which a switcher's trigger
+*   does inside a toolbar. Outside a toolbar the switcher is never moved. The registration takes
+*   the row again after every render of a moved switcher, so the row shows the current choice.
+* @param id - The id the switcher's trigger writes in `data-folds`.
+* @param submenu - The props of the row that opens the switcher's choices.
+* @returns `true` while the toolbar moves the switcher into its menu.
+*/
+function useMoved(id, submenu) {
+	const $ = c(5);
+	const moved = useEnclosingToolbar()?.moved.has(id) === true;
+	let t0;
+	if ($[0] !== submenu) {
+		t0 = /* @__PURE__ */ jsx(Submenu, { ...submenu });
+		$[0] = submenu;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== submenu.label || $[3] !== t0) {
+		t1 = {
+			label: submenu.label,
+			row: t0
+		};
+		$[2] = submenu.label;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	useFoldable(moved, t1, id);
+	return moved;
+}
+//#endregion
+//#region src/switcher/state.ts
+/**
+* Derives where a switcher renders from the sidebar or the toolbar around it, and provides it to
+* the switcher's parts.
+*
+* @remarks
+*   A switcher in a sidebar is a row at the sidebar's size, and its mark alone while the sidebar
+*   is a rail. A switcher in a toolbar is one of the row's controls at the toolbar's size, and a
+*   switcher with a mark hides its name while the toolbar is narrow. Anywhere else it is one line
+*   at its own size. A caller's `placement` or `size` applies over the derived one.
+*/
+/**
+* Maps a toolbar's size to the nearest switcher size: `sm` up to `sm`, and `lg` from `lg`.
+*/
+const SIZES = {
+	"2xl": "lg",
+	"3xl": "lg",
+	"4xl": "lg",
+	lg: "lg",
+	md: "md",
+	sm: "sm",
+	xl: "lg",
+	xs: "sm"
+};
+/**
+* Provides the switcher's state and reads it, throwing outside `Switcher.Root`.
+*/
+const [SwitcherProvider, useSwitcher] = createRequiredContext("Switcher.Root");
+/**
+* Returns the placement a switcher takes from what is around it.
+*
+* @param inSidebar - Whether a sidebar is around the switcher.
+* @param inToolbar - Whether a toolbar is around the switcher.
+* @returns `sidebar`, `toolbar` or `alone`, the nearest sidebar first.
+*/
+function placementOf(inSidebar, inToolbar) {
+	if (inSidebar) return "sidebar";
+	if (inToolbar) return "toolbar";
+	return "alone";
+}
+/**
+* Returns the state of a switcher in a sidebar: a row at the sidebar's size, iconic on a rail.
+*
+* @param sidebar - The sidebar around the switcher, if any.
+* @param size - The caller's size.
+* @returns The state.
+*/
+function rowOf(sidebar, size) {
+	return {
+		iconic: sidebar?.iconic ?? false,
+		narrow: false,
+		placement: "sidebar",
+		roving: false,
+		size: size ?? sidebar?.size ?? "md"
+	};
+}
+/**
+* Returns the state of a switcher in a toolbar: a control at the toolbar's size, narrow with it.
+*
+* @param toolbar - The toolbar around the switcher, if any.
+* @param size - The caller's size.
+* @returns The state.
+*/
+function controlOf(toolbar, size) {
+	return {
+		iconic: false,
+		narrow: toolbar?.narrow ?? false,
+		placement: "toolbar",
+		roving: toolbar !== void 0,
+		size: size ?? SIZES[toolbar?.size ?? "md"]
+	};
+}
+/**
+* Returns where a switcher renders, from the caller's settings and the sidebar or toolbar around
+* it.
+*
+* @param placement - The caller's placement, which applies over the derived one.
+* @param size - The caller's size, which applies over the derived one.
+* @returns The placement, the size, and whether the switcher is iconic or narrow.
+*/
+function usePlaced(placement, size) {
+	const $ = c(13);
+	const sidebar = useEnclosingSidebar();
+	const toolbar = useEnclosingToolbar();
+	let t0;
+	if ($[0] !== placement || $[1] !== sidebar || $[2] !== toolbar) {
+		t0 = placement ?? placementOf(sidebar !== void 0, toolbar !== void 0);
+		$[0] = placement;
+		$[1] = sidebar;
+		$[2] = toolbar;
+		$[3] = t0;
+	} else t0 = $[3];
+	const placed = t0;
+	if (placed === "sidebar") {
+		let t1;
+		if ($[4] !== sidebar || $[5] !== size) {
+			t1 = rowOf(sidebar, size);
+			$[4] = sidebar;
+			$[5] = size;
+			$[6] = t1;
+		} else t1 = $[6];
+		return t1;
+	}
+	if (placed === "toolbar") {
+		let t1;
+		if ($[7] !== size || $[8] !== toolbar) {
+			t1 = controlOf(toolbar, size);
+			$[7] = size;
+			$[8] = toolbar;
+			$[9] = t1;
+		} else t1 = $[9];
+		return t1;
+	}
+	const t1 = size ?? "md";
+	let t2;
+	if ($[10] !== placed || $[11] !== t1) {
+		t2 = {
+			iconic: false,
+			narrow: false,
+			placement: placed,
+			roving: false,
+			size: t1
+		};
+		$[10] = placed;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+}
+//#endregion
+//#region src/switcher/trigger.tsx
+/**
+* Renders the menu's trigger with the root slot's class.
+*/
+const Pressed = withContext(Menu.Trigger, "root");
+/**
+* Renders the control with its label before its children.
+*
+* @param props - `label` and the menu trigger's props.
+* @returns The menu's trigger with the hidden label before the children.
+*/
+function Trigger(t0) {
+	const $ = c(12);
+	let children;
+	let label;
+	let rest;
+	if ($[0] !== t0) {
+		({children, label, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = label;
+		$[3] = rest;
+	} else {
+		children = $[1];
+		label = $[2];
+		rest = $[3];
+	}
+	const { iconic, narrow } = useSwitcher();
+	const t1 = iconic ? "" : void 0;
+	const t2 = narrow ? "" : void 0;
+	let t3;
+	if ($[4] !== label) {
+		t3 = /* @__PURE__ */ jsx(VisuallyHidden, { children: label });
+		$[4] = label;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== rest || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Pressed, {
+			...rest,
+			"data-iconic": t1,
+			"data-narrow": t2,
+			children: [t3, children]
+		});
+		$[6] = children;
+		$[7] = rest;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+//#endregion
+//#region src/switcher/placed.tsx
+/**
+* Placement of the tooltip: beside the rail, towards the page.
+*/
+const BESIDE = { placement: "right" };
+/**
+* Renders the trigger as a toolbar control, with a tooltip on a rail, or on its own.
+*
+* @param props - The trigger's content and label, the current name and the trigger's id.
+* @returns The trigger in its placement's form.
+*/
+function Placed(t0) {
+	const $ = c(22);
+	const { children, folds, label, name, triggerId } = t0;
+	const { iconic, roving } = useSwitcher();
+	if (roving) {
+		let t1;
+		if ($[0] !== folds) {
+			t1 = { [FOLDS]: folds };
+			$[0] = folds;
+			$[1] = t1;
+		} else t1 = $[1];
+		let t2;
+		if ($[2] !== children || $[3] !== label || $[4] !== t1) {
+			t2 = /* @__PURE__ */ jsx(Item, {
+				as: Trigger,
+				label,
+				...t1,
+				children
+			});
+			$[2] = children;
+			$[3] = label;
+			$[4] = t1;
+			$[5] = t2;
+		} else t2 = $[5];
+		return t2;
+	}
+	if (!iconic || name === void 0) {
+		let t1;
+		if ($[6] !== children || $[7] !== label) {
+			t1 = /* @__PURE__ */ jsx(Trigger, {
+				label,
+				children
+			});
+			$[6] = children;
+			$[7] = label;
+			$[8] = t1;
+		} else t1 = $[8];
+		return t1;
+	}
+	let t1;
+	if ($[9] !== triggerId) {
+		t1 = { trigger: triggerId };
+		$[9] = triggerId;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== label) {
+		t2 = { label };
+		$[11] = label;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== children || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			as: Trigger,
+			...t2,
+			children
+		});
+		$[13] = children;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== name) {
+		t4 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: name }) }) });
+		$[16] = name;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== t1 || $[19] !== t3 || $[20] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Tooltip.Root, {
+			ids: t1,
+			positioning: BESIDE,
+			children: [t3, t4]
+		});
+		$[18] = t1;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
+}
+//#endregion
+//#region src/switcher/listed.tsx
+/**
+* Renders a switcher from a list of choices: the trigger with the current choice, and the menu of
+* every choice with the caller's actions after a separator.
+*
+* @remarks
+*   The current choice is the caller's `value`, or the component's own state from `defaultValue`,
+*   which defaults to the first choice. The trigger shows the current choice's mark, its name and
+*   its detail. The glyphs are the caller's: `indicator` at the trigger's end and `checkIcon` on
+*   the current row. A narrow toolbar that has no room for the switcher renders no trigger, and its
+*   menu lists a row that opens the same choices.
+*/
+/**
+* Renders the trigger and the menu of the choices.
+*
+* @param props - The choices, the current value, the glyphs, the label and the actions.
+* @returns The trigger and the portalled menu.
+*/
+function Listed(t0) {
+	const $ = c(32);
+	const { checkIcon, children, choices, defaultValue, indicator, label, onValueChange, triggerId, value } = t0;
+	const id = useId();
+	const t1 = defaultValue ?? choices[0]?.value ?? "";
+	let t2;
+	if ($[0] !== onValueChange || $[1] !== t1 || $[2] !== value) {
+		t2 = {
+			defaultValue: t1,
+			onChange: onValueChange,
+			value
+		};
+		$[0] = onValueChange;
+		$[1] = t1;
+		$[2] = value;
+		$[3] = t2;
+	} else t2 = $[3];
+	const [chosen, setChosen] = useControllableState(t2);
+	let t3;
+	if ($[4] !== choices || $[5] !== chosen) {
+		let t4;
+		if ($[7] !== chosen) {
+			t4 = (choice) => choice.value === chosen;
+			$[7] = chosen;
+			$[8] = t4;
+		} else t4 = $[8];
+		t3 = choices.find(t4);
+		$[4] = choices;
+		$[5] = chosen;
+		$[6] = t3;
+	} else t3 = $[6];
+	const current = t3;
+	let t4;
+	if ($[9] !== checkIcon || $[10] !== children || $[11] !== choices || $[12] !== chosen || $[13] !== setChosen) {
+		t4 = {
+			checkIcon,
+			children,
+			choices,
+			chosen,
+			onChoose: setChosen
+		};
+		$[9] = checkIcon;
+		$[10] = children;
+		$[11] = choices;
+		$[12] = chosen;
+		$[13] = setChosen;
+		$[14] = t4;
+	} else t4 = $[14];
+	const rows = t4;
+	let t5;
+	if ($[15] !== current || $[16] !== indicator || $[17] !== label || $[18] !== rows) {
+		t5 = {
+			...rows,
+			current,
+			indicator,
+			label
+		};
+		$[15] = current;
+		$[16] = indicator;
+		$[17] = label;
+		$[18] = rows;
+		$[19] = t5;
+	} else t5 = $[19];
+	const moved = useMoved(id, t5);
+	let t6;
+	if ($[20] !== current || $[21] !== id || $[22] !== indicator || $[23] !== label || $[24] !== moved || $[25] !== triggerId) {
+		t6 = moved ? null : /* @__PURE__ */ jsxs(Placed, {
+			folds: id,
+			label,
+			name: current?.label,
+			triggerId,
+			children: [current === void 0 ? null : /* @__PURE__ */ jsx(Current, { choice: current }), indicator === void 0 ? null : /* @__PURE__ */ jsx(Indicator, { children: indicator })]
+		});
+		$[20] = current;
+		$[21] = id;
+		$[22] = indicator;
+		$[23] = label;
+		$[24] = moved;
+		$[25] = triggerId;
+		$[26] = t6;
+	} else t6 = $[26];
+	let t7;
+	if ($[27] !== rows) {
+		t7 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Rows, { ...rows }) }) }) });
+		$[27] = rows;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== t6 || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t7] });
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
+}
+//#endregion
+//#region src/switcher/sized.tsx
+/**
+* Renders the menu at the step.
+*
+* @param props - The step and the menu's props.
+* @returns The menu at that size.
+*/
+function Sized(t0) {
+	const $ = c(6);
+	let rest;
+	let step;
+	if ($[0] !== t0) {
+		({step, ...rest} = t0);
+		$[0] = t0;
+		$[1] = rest;
+		$[2] = step;
+	} else {
+		rest = $[1];
+		step = $[2];
+	}
+	let t1;
+	if ($[3] !== rest || $[4] !== step) {
+		t1 = /* @__PURE__ */ jsx(Menu.Root, {
+			...rest,
+			size: step
+		});
+		$[3] = rest;
+		$[4] = step;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+//#endregion
+//#region src/switcher/root.tsx
+/**
+* Renders the switcher's menu, derives where the switcher renders, and provides both to the
+* control's parts.
+*
+* @remarks
+*   `Switcher.Root` is the disclosure package's `Menu.Root`, so the roles, the keyboard, Escape and
+*   the positioning come from the menu. With `items` the root renders the trigger and the menu of
+*   the choices itself, and its children are `Switcher.Action` rows after them. Without `items`
+*   the children are the caller's trigger and menu. The root reads the sidebar or the toolbar
+*   around it for the placement and the size, unless the caller states them, and passes the size
+*   to the menu, so the rows render at the control's size. In a sidebar the menu is as wide as the
+*   control, and on a rail it opens beside the rail.
+*/
+/**
+* The binding, with its props typed as `ProvidedProps`.
+*
+* @remarks
+*   The binding types a variant without `undefined`, and under `exactOptionalPropertyTypes` an
+*   omitted variant arrives as `undefined`, which the recipe's props allow. The runtime is the
+*   same: the binding splits the switcher's variants off before the menu receives the rest.
+*/
+const Provided = withRootProvider(Sized);
+/**
+* Renders the menu with the switcher's variants, at the switcher's size.
+*
+* @remarks
+*   A caller's `positioning` applies over the placement's, and a caller's `ids` over the trigger id
+*   the root shares with the rail's tooltip.
+* @param props - The choices, the glyphs, the switcher's variants and the menu's props.
+* @returns The menu, providing the variants and the placement.
+*/
+function Root(t0) {
+	const $ = c(39);
+	let checkIcon;
+	let children;
+	let defaultValue;
+	let indicator;
+	let items;
+	let onValueChange;
+	let placement;
+	let positioning;
+	let rest;
+	let size;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({checkIcon, children, defaultValue, indicator, items, label: t1, onValueChange, placement, positioning, size, value, ...rest} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = children;
+		$[3] = defaultValue;
+		$[4] = indicator;
+		$[5] = items;
+		$[6] = onValueChange;
+		$[7] = placement;
+		$[8] = positioning;
+		$[9] = rest;
+		$[10] = size;
+		$[11] = t1;
+		$[12] = value;
+	} else {
+		checkIcon = $[1];
+		children = $[2];
+		defaultValue = $[3];
+		indicator = $[4];
+		items = $[5];
+		onValueChange = $[6];
+		placement = $[7];
+		positioning = $[8];
+		rest = $[9];
+		size = $[10];
+		t1 = $[11];
+		value = $[12];
+	}
+	const label = t1 === void 0 ? "" : t1;
+	const state = usePlaced(placement, size);
+	const triggerId = useId();
+	const row = state.placement === "sidebar";
+	let t2;
+	if ($[13] !== triggerId) {
+		t2 = { trigger: triggerId };
+		$[13] = triggerId;
+		$[14] = t2;
+	} else t2 = $[14];
+	const t3 = state.iconic ? "right-start" : "bottom-start";
+	const t4 = row && !state.iconic;
+	let t5;
+	if ($[15] !== positioning || $[16] !== t3 || $[17] !== t4) {
+		t5 = {
+			placement: t3,
+			sameWidth: t4,
+			...positioning
+		};
+		$[15] = positioning;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== checkIcon || $[20] !== children || $[21] !== defaultValue || $[22] !== indicator || $[23] !== items || $[24] !== label || $[25] !== onValueChange || $[26] !== triggerId || $[27] !== value) {
+		t6 = items === void 0 ? children : /* @__PURE__ */ jsx(Listed, {
+			checkIcon,
+			choices: items,
+			defaultValue,
+			indicator,
+			label,
+			onValueChange,
+			triggerId,
+			value,
+			children
+		});
+		$[19] = checkIcon;
+		$[20] = children;
+		$[21] = defaultValue;
+		$[22] = indicator;
+		$[23] = items;
+		$[24] = label;
+		$[25] = onValueChange;
+		$[26] = triggerId;
+		$[27] = value;
+		$[28] = t6;
+	} else t6 = $[28];
+	let t7;
+	if ($[29] !== rest || $[30] !== state.placement || $[31] !== state.size || $[32] !== t2 || $[33] !== t5 || $[34] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Provided, {
+			ids: t2,
+			...rest,
+			placement: state.placement,
+			positioning: t5,
+			size: state.size,
+			step: state.size,
+			children: t6
+		});
+		$[29] = rest;
+		$[30] = state.placement;
+		$[31] = state.size;
+		$[32] = t2;
+		$[33] = t5;
+		$[34] = t6;
+		$[35] = t7;
+	} else t7 = $[35];
+	let t8;
+	if ($[36] !== state || $[37] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SwitcherProvider, {
+			value: state,
+			children: t7
+		});
+		$[36] = state;
+		$[37] = t7;
+		$[38] = t8;
+	} else t8 = $[38];
+	return t8;
+}
+//#endregion
+export { useFolded as _, Name as a, Indicator as c, SidebarProvider as d, fieldSizeOf as f, useFoldable as g, FoldContext as h, useToolbar as i, Detail as l, useSidebar as m, Trigger as n, Mark as o, useNav as p, ToolbarProvider as r, Label as s, Root as t, NavProvider as u, Item as v };