@mcp-b/react-components 0.48.0 → 0.49.1

package/dist/components/general-purpose/ResponsiveSidebarShell.d.ts

@@ -1,2 +1,128 @@
-import { a as ResponsiveSidebarShellProps, i as ResponsiveSidebarShellControls, n as ResponsiveSidebarShell, r as ResponsiveSidebarShellBar, t as AppBarSlots } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
-export { AppBarSlots, ResponsiveSidebarShell, ResponsiveSidebarShellBar, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };
+import { AppTopBarTitleProps } from "./AppTopBar.js";
+import * as React from "react";
+
+//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
+interface ResponsiveSidebarShellControls {
+  /** The shell's current container layout, shared by in-shell and portalled controls. */
+  compact: boolean;
+  /** Close the sidebar and move focus to the main content. */
+  closeSidebar: () => void;
+  /** Close only when the shell is currently using its compact drawer layout. */
+  closeSidebarOnCompact: () => void;
+}
+/** Reuse the shell's measured layout and drawer controls instead of observing it again. */
+declare function useResponsiveSidebarShell(): ResponsiveSidebarShellControls;
+/**
+ * Bar slot content shared by every shell-owning surface's `bar` prop, so an
+ * app writes one shape whether it is configuring ThinkFullApp, the routine
+ * library, or the shell directly.
+ */
+interface AppBarSlots {
+  /**
+   * App-owned route element rendered as a labelled back control. Back owns
+   * the leading slot the same way `leading` does: the shell's own sidebar
+   * toggle stands down and compact sidebars stay reachable through
+   * `compactTitleTrigger`.
+   */
+  back?: {
+    label: string;
+    link: React.ReactElement;
+  };
+  /** App-owned leading navigation that owns the leading slot at every width. */
+  leading?: React.ReactNode;
+  /** Compact-only navigation that replaces the drawer trigger without hiding the wide rail toggle. */
+  compactLeading?: React.ReactNode;
+  /** Bar title content. Hidden at compact widths when `compactTitleTrigger` stands in. */
+  title?: React.ReactNode;
+  /** Trailing group, before `primary`. Overflow menus and secondary icon controls. */
+  actions?: React.ReactNode;
+  /**
+   * Rightmost trailing control. Sits after `actions` so a host can keep a
+   * single primary action (new thread, new schedule) on the trailing edge
+   * without fighting whatever else the surface puts in the bar.
+   */
+  primary?: React.ReactNode;
+}
+interface ResponsiveSidebarShellBar extends AppBarSlots {
+  /** Native title render contract, including element and render-function composition. */
+  titleRender?: AppTopBarTitleProps["render"];
+  /**
+   * Label content for a compact-width drawer trigger that replaces the plain
+   * title and the icon toggle: the title itself becomes the control that opens
+   * the sidebar. The shell renders the button and the disclosure chevron.
+   */
+  compactTitleTrigger?: React.ReactNode;
+  /** Accessible name for the bar toolbar. Defaults to "Application controls". */
+  label?: string;
+  /** Class for the bar root, the owning surface's styling hook. */
+  className?: string;
+  /**
+   * No bar row at all — for content that brings its own application bar.
+   * Distinct from passing no slots: an empty shell with a sidebar still shows
+   * a bar carrying the toggle.
+   */
+  hidden?: boolean;
+}
+interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+  /**
+   * Navigation or other secondary surface shown beside the selected content.
+   * Omit for a shell that is only a bar row over content — the app bar then
+   * has one mount point whether or not a sidebar exists.
+   *
+   * Open/closed is shell-internal: it is ephemeral presentation state, not a
+   * route, so no host controls it and no resize ever writes into a router.
+   */
+  sidebar?: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
+  /** Main content. */
+  children?: React.ReactNode;
+  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
+  sidebarLabel?: string;
+  /** Whether the sidebar is open. Omit for internal state. */
+  sidebarOpen?: boolean;
+  /** Move the wide-layout toggle into the sidebar while it is open. */
+  sidebarTogglePlacement?: "main" | "sidebar";
+  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
+  defaultSidebarOpen?: boolean;
+  /** Called when the sidebar is opened or closed. */
+  onSidebarOpenChange?: (open: boolean) => void;
+  /** Initial desktop sidebar width in CSS pixels. */
+  defaultSidebarWidth?: number;
+  /** Shell-owned application bar composed from slots. */
+  bar?: ResponsiveSidebarShellBar;
+  /**
+   * Host-owned error shown in the main column above the content, without
+   * replacing it. The shell renders the alert anatomy; pass the message.
+   */
+  error?: React.ReactNode;
+  /** Accessible name for the mobile peek target that returns to the main content. */
+  showMainLabel?: string;
+}
+/**
+ * The one application shell: responsive master-detail with a resizable desktop
+ * sidebar, a compact floating drawer that leaves the main content in place as
+ * a dismiss target, and a shell-owned application bar composed from slots.
+ * The root exposes `data-sidebar-open="true" | "false"` as its public styling
+ * hook, and its container name `responsive-sidebar-shell` is public contract:
+ * surfaces that compose the shell size themselves against it.
+ */
+declare function ResponsiveSidebarShell({
+  sidebar,
+  sidebarLabel,
+  sidebarOpen,
+  sidebarTogglePlacement,
+  defaultSidebarOpen,
+  defaultSidebarWidth,
+  onSidebarOpenChange,
+  bar,
+  error,
+  showMainLabel,
+  className,
+  children,
+  ref,
+  style,
+  ...props
+}: ResponsiveSidebarShellProps & {
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { AppBarSlots, ResponsiveSidebarShell, ResponsiveSidebarShellBar, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, useResponsiveSidebarShell };

package/dist/components/general-purpose/ResponsiveSidebarShell.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
+import { W as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-COCyV98Z.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
@@ -15,6 +15,13 @@ const sidebarMaxWidth = 384;
 const sidebarKeyboardStep = 24;
 /** Matches --sigvelo-layout-break-compact. */
 const compactSidebarWidthRem = 56;
+const SidebarShellContext = React.createContext(null);
+/** Reuse the shell's measured layout and drawer controls instead of observing it again. */
+function useResponsiveSidebarShell() {
+	const controls = React.useContext(SidebarShellContext);
+	if (!controls) throw new Error("useResponsiveSidebarShell must be inside ResponsiveSidebarShell.");
+	return controls;
+}
 function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
 	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
 	return [
@@ -44,6 +51,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 	const mainRef = React.useRef(null);
 	const openerRef = React.useRef(null);
 	const compactRef = React.useRef(null);
+	const [compact, setCompact] = React.useState(true);
 	const restoreSidebarOnWideRef = React.useRef(true);
 	const [isSidebarOpen, setSidebarOpen, primeSidebarOpen] = useControllableSidebar({
 		sidebarOpen,
@@ -59,6 +67,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 			const compact = isCompactSidebar(root);
 			const wasCompact = compactRef.current;
 			compactRef.current = compact;
+			setCompact(compact);
 			if (wasCompact === null) {
 				if (wantsBuiltInDefault && compact) primeSidebarOpen(false);
 				return;
@@ -103,10 +112,16 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 	const dismissSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => openerRef.current?.focus({ preventScroll: true }));
 	}, [setSidebarOpen, updateSidebar]);
-	const sidebarContent = typeof sidebar === "function" ? sidebar({
+	const controls = React.useMemo(() => ({
+		compact,
+		closeSidebar,
+		closeSidebarOnCompact
+	}), [
+		compact,
 		closeSidebar,
 		closeSidebarOnCompact
-	}) : sidebar;
+	]);
+	const sidebarContent = typeof sidebar === "function" ? sidebar(controls) : sidebar;
 	const hasCustomLeading = bar?.leading != null;
 	const hasAppLeading = bar?.back != null || hasCustomLeading;
 	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == null;
@@ -138,107 +153,110 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 	const mainSidebarToggle = sidebarTogglePlacement === "sidebar" || sidebarTogglePlacement === "main" && !hasCustomLeading ? renderSidebarToggle(sidebarTogglePlacement === "sidebar" ? "responsive-sidebar-shell__toggle--sidebar-fallback" : hasTitleTrigger ? "responsive-sidebar-shell__toggle--replaced-by-title" : bar?.compactLeading != null ? "responsive-sidebar-shell__toggle--replaced-by-compact-leading" : void 0) : null;
 	const hasTopBar = !bar?.hidden && (hasSidebar || bar?.back != null || bar?.leading != null || bar?.compactLeading != null || bar?.title != null || bar?.actions != null || bar?.primary != null);
 	const compactLeadingMode = hasTitleTrigger ? "trigger" : !hasAppLeading && bar?.compactLeading != null ? "custom" : void 0;
-	return /* @__PURE__ */ jsx("div", {
-		ref: mergeRefs(rootRef, ref),
-		className: cx("responsive-sidebar-shell", className),
-		"data-recipe": "fill-host",
-		style,
-		...props,
-		"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
-		"data-sidebar-toggle-placement": sidebarTogglePlacement,
-		onKeyDown: (event) => {
-			props.onKeyDown?.(event);
-			if (!event.defaultPrevented && event.key === "Escape" && hasSidebar && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
-				event.preventDefault();
-				dismissSidebar();
-			}
-		},
-		children: /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
-			className: "responsive-sidebar-shell__frame",
-			label: sidebarLabel,
-			side: "start",
-			sizeVariable: "--responsive-sidebar-shell-sidebar-size",
-			defaultSize: defaultSidebarWidth,
-			minSize: sidebarMinWidth,
-			maxSize: sidebarMaxWidth,
-			keyboardStep: sidebarKeyboardStep,
-			children: [
-				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
-				hasSidebar ? /* @__PURE__ */ jsxs("div", {
-					id: sidebarId,
-					className: "responsive-sidebar-shell__sidebar",
-					"aria-hidden": isSidebarOpen ? void 0 : true,
-					inert: isSidebarOpen ? void 0 : true,
-					children: [sidebarToggle ? /* @__PURE__ */ jsx("div", {
-						className: "responsive-sidebar-shell__sidebar-leading",
-						children: sidebarToggle
-					}) : null, /* @__PURE__ */ jsx("div", {
-						className: "responsive-sidebar-shell__sidebar-content",
-						children: sidebarContent
-					})]
-				}) : null,
-				/* @__PURE__ */ jsxs("div", {
-					ref: mainRef,
-					className: "responsive-sidebar-shell__main",
-					tabIndex: -1,
-					children: [
-						hasTopBar ? /* @__PURE__ */ jsxs(AppTopBar.Root, {
-							"aria-label": bar?.label ?? "Application controls",
-							className: bar?.className,
-							"data-compact-leading": compactLeadingMode,
-							children: [
-								hasSidebar || hasAppLeading || bar?.compactLeading != null ? /* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [
-									bar?.back ? /* @__PURE__ */ jsx(AppTopBar.Link, {
-										label: bar.back.label,
-										render: bar.back.link,
-										children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+	return /* @__PURE__ */ jsx(SidebarShellContext.Provider, {
+		value: controls,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(rootRef, ref),
+			className: cx("responsive-sidebar-shell", className),
+			"data-recipe": "fill-host",
+			style,
+			...props,
+			"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
+			"data-sidebar-toggle-placement": sidebarTogglePlacement,
+			onKeyDown: (event) => {
+				props.onKeyDown?.(event);
+				if (!event.defaultPrevented && event.key === "Escape" && hasSidebar && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
+					event.preventDefault();
+					dismissSidebar();
+				}
+			},
+			children: /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
+				className: "responsive-sidebar-shell__frame",
+				label: sidebarLabel,
+				side: "start",
+				sizeVariable: "--responsive-sidebar-shell-sidebar-size",
+				defaultSize: defaultSidebarWidth,
+				minSize: sidebarMinWidth,
+				maxSize: sidebarMaxWidth,
+				keyboardStep: sidebarKeyboardStep,
+				children: [
+					hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
+					hasSidebar ? /* @__PURE__ */ jsxs("div", {
+						id: sidebarId,
+						className: "responsive-sidebar-shell__sidebar",
+						"aria-hidden": isSidebarOpen ? void 0 : true,
+						inert: isSidebarOpen ? void 0 : true,
+						children: [sidebarToggle ? /* @__PURE__ */ jsx("div", {
+							className: "responsive-sidebar-shell__sidebar-leading",
+							children: sidebarToggle
+						}) : null, /* @__PURE__ */ jsx("div", {
+							className: "responsive-sidebar-shell__sidebar-content",
+							children: sidebarContent
+						})]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						ref: mainRef,
+						className: "responsive-sidebar-shell__main",
+						tabIndex: -1,
+						children: [
+							hasTopBar ? /* @__PURE__ */ jsxs(AppTopBar.Root, {
+								"aria-label": bar?.label ?? "Application controls",
+								className: bar?.className,
+								"data-compact-leading": compactLeadingMode,
+								children: [
+									hasSidebar || hasAppLeading || bar?.compactLeading != null ? /* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [
+										bar?.back ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+											label: bar.back.label,
+											render: bar.back.link,
+											children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+										}) : null,
+										bar?.leading,
+										!hasCustomLeading ? mainSidebarToggle : null,
+										compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
+											className: "responsive-sidebar-shell__compact-leading",
+											children: bar?.compactLeading
+										}) : null
+									] }) : null,
+									bar?.title != null || hasTitleTrigger ? /* @__PURE__ */ jsxs(AppTopBar.Title, {
+										render: bar?.titleRender,
+										children: [bar?.title != null ? /* @__PURE__ */ jsx("span", {
+											className: "responsive-sidebar-shell__title-text",
+											children: bar.title
+										}) : null, hasTitleTrigger ? /* @__PURE__ */ jsxs(Button, {
+											type: "button",
+											variant: "ghost",
+											color: "neutral",
+											size: "sm",
+											className: "responsive-sidebar-shell__title-trigger",
+											"aria-controls": sidebarId,
+											"aria-expanded": isSidebarOpen,
+											onClick: (event) => toggleSidebar(event.currentTarget),
+											children: [bar?.compactTitleTrigger, /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+										}) : null]
 									}) : null,
-									bar?.leading,
-									!hasCustomLeading ? mainSidebarToggle : null,
-									compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
-										className: "responsive-sidebar-shell__compact-leading",
-										children: bar?.compactLeading
-									}) : null
-								] }) : null,
-								bar?.title != null || hasTitleTrigger ? /* @__PURE__ */ jsxs(AppTopBar.Title, {
-									render: bar?.titleRender,
-									children: [bar?.title != null ? /* @__PURE__ */ jsx("span", {
-										className: "responsive-sidebar-shell__title-text",
-										children: bar.title
-									}) : null, hasTitleTrigger ? /* @__PURE__ */ jsxs(Button, {
-										type: "button",
-										variant: "ghost",
-										color: "neutral",
-										size: "sm",
-										className: "responsive-sidebar-shell__title-trigger",
-										"aria-controls": sidebarId,
-										"aria-expanded": isSidebarOpen,
-										onClick: (event) => toggleSidebar(event.currentTarget),
-										children: [bar?.compactTitleTrigger, /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
-									}) : null]
-								}) : null,
-								bar?.actions != null || bar?.primary != null ? /* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [bar.actions, bar.primary] }) : null
-							]
-						}) : null,
-						error != null ? /* @__PURE__ */ jsxs("div", {
-							className: "responsive-sidebar-shell__error",
-							role: "alert",
-							children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
-						}) : null,
-						children
-					]
-				}),
-				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "ghost",
-					color: "neutral",
-					className: "responsive-sidebar-shell__peek",
-					"aria-label": showMainLabel,
-					onClick: closeSidebar
-				}) : null
-			]
+									bar?.actions != null || bar?.primary != null ? /* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [bar.actions, bar.primary] }) : null
+								]
+							}) : null,
+							error != null ? /* @__PURE__ */ jsxs("div", {
+								className: "responsive-sidebar-shell__error",
+								role: "alert",
+								children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
+							}) : null,
+							children
+						]
+					}),
+					hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						color: "neutral",
+						className: "responsive-sidebar-shell__peek",
+						"aria-label": showMainLabel,
+						onClick: closeSidebar
+					}) : null
+				]
+			})
 		})
 	});
 }
 //#endregion
-export { ResponsiveSidebarShell };
+export { ResponsiveSidebarShell, useResponsiveSidebarShell };

package/dist/components/general-purpose/SettingsFormDialog.d.ts

@@ -1,48 +1,35 @@
+import { Dialog } from "../foundations/Dialog.js";
+import { FormProps } from "../foundations/Form.js";
 import * as React from "react";
 
 //#region src/components/general-purpose/SettingsFormDialog.d.ts
-type SettingsFormFieldType = "checkbox" | "email" | "password" | "search" | "tel" | "text" | "url";
-/**
- * A checked box submits this, an unchecked one submits the empty string, so
- * `SettingsFormValues` stays all-strings for every field type.
- */
-declare const SETTINGS_FORM_CHECKED = "true";
-interface SettingsFormField {
-  name: string;
-  label: string;
-  description?: React.ReactNode;
-  type?: SettingsFormFieldType;
-  placeholder?: string;
-  autoComplete?: string;
-  required?: boolean;
-  readOnly?: boolean;
-}
-type SettingsFormValues<Fields extends readonly SettingsFormField[]> = Readonly<Record<Fields[number]["name"], string>>;
-interface SettingsFormDialogProps<Fields extends readonly SettingsFormField[]> {
+interface SettingsFormDialogProps<Values extends Record<string, unknown> = Record<string, unknown>> {
   open: boolean;
-  onOpenChange: (open: boolean) => void;
+  /** Base UI owns dismissal reasons and cancellation, including successful submission. */
+  onOpenChange: NonNullable<React.ComponentProps<typeof Dialog.Root>["onOpenChange"]>;
   title: React.ReactNode;
   description: React.ReactNode;
-  fields: Fields;
-  initialValues?: Readonly<Partial<Record<Fields[number]["name"], string | undefined>>>;
+  /** Compose labeled Field/control children with their own defaults and validation. */
+  children: React.ReactNode;
   submitLabel: string;
   submittingLabel?: string;
   removeLabel?: string;
   removingLabel?: string;
   externalError?: string;
-  onSubmit: (values: SettingsFormValues<Fields>) => void | Promise<void>;
+  /** Receives Base UI values and event details unchanged; the host owns parsing and normalization. */
+  onFormSubmit: NonNullable<FormProps<Values>["onFormSubmit"]>;
   onRemove?: () => void | Promise<void>;
 }
 /**
- * Uncontrolled, metadata-driven settings dialog with native validation and
- * shared async submit/remove feedback. Product schemas remain in the host.
+ * Settings dialog with caller-composed controls and shared async submit/remove
+ * feedback. Base UI owns validation and values; product schemas stay in the host.
  */
-declare function SettingsFormDialog<const Fields extends readonly SettingsFormField[]>({
+declare function SettingsFormDialog<Values extends Record<string, unknown> = Record<string, unknown>>({
   open,
   onOpenChange,
   title,
   description,
   ...contentProps
-}: SettingsFormDialogProps<Fields>): React.JSX.Element;
+}: SettingsFormDialogProps<Values>): React.JSX.Element;
 //#endregion
-export { SETTINGS_FORM_CHECKED, SettingsFormDialog, SettingsFormDialogProps, SettingsFormField, SettingsFormFieldType, SettingsFormValues };
+export { SettingsFormDialog, SettingsFormDialogProps };

package/dist/components/general-purpose/SettingsFormDialog.js

@@ -1,127 +1,97 @@
 import { Button } from "../foundations/Button.js";
-import { Field } from "../foundations/Field.js";
-import { Form } from "../foundations/Form.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { Checkbox } from "../foundations/Checkbox.js";
+import { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SettingsFormDialog.tsx
-/**
-* A checked box submits this, an unchecked one submits the empty string, so
-* `SettingsFormValues` stays all-strings for every field type.
-*/
-const SETTINGS_FORM_CHECKED = "true";
-function readSettingsValues(data, fields) {
-	return Object.fromEntries(fields.map((field) => {
-		const value = data[field.name];
-		if (field.type === "checkbox") return [field.name, value === true ? SETTINGS_FORM_CHECKED : ""];
-		return [field.name, typeof value === "string" ? value.trim() : ""];
-	}));
-}
-function SettingsFormDialogContent({ fields, initialValues, submitLabel, submittingLabel = "Saving…", removeLabel, removingLabel = "Removing…", externalError, onSubmit, onRemove, onOpenChange }) {
+function SettingsFormDialogContent({ children, submitLabel, submittingLabel = "Saving…", removeLabel, removingLabel = "Removing…", externalError, onFormSubmit, onRemove, close }) {
 	const [submission, setSubmission] = React.useState(null);
 	const active = React.useRef(true);
+	const inFlight = React.useRef(false);
 	const pending = submission === "submit" || submission === "remove";
 	const error = submission && typeof submission === "object" ? submission.error : null;
-	const initialValueByName = initialValues ?? {};
 	React.useEffect(() => {
 		active.current = true;
 		return () => {
 			active.current = false;
 		};
 	}, []);
-	async function submit(values) {
+	async function submit(...args) {
+		if (inFlight.current) return;
+		inFlight.current = true;
 		setSubmission("submit");
 		try {
-			await onSubmit(readSettingsValues(values, fields));
+			await Promise.resolve(onFormSubmit(...args));
 			if (!active.current) return;
 			setSubmission(null);
-			onOpenChange(false);
+			close();
 		} catch (cause) {
 			if (!active.current) return;
 			setSubmission({ error: formatErrorMessage(cause) });
+		} finally {
+			inFlight.current = false;
 		}
 	}
 	async function remove() {
-		if (!onRemove) return;
+		if (!onRemove || inFlight.current) return;
+		inFlight.current = true;
 		setSubmission("remove");
 		try {
 			await onRemove();
 			if (!active.current) return;
 			setSubmission(null);
-			onOpenChange(false);
+			close();
 		} catch (cause) {
 			if (!active.current) return;
 			setSubmission({ error: formatErrorMessage(cause) });
+		} finally {
+			inFlight.current = false;
 		}
 	}
 	return /* @__PURE__ */ jsxs(Form, {
 		onFormSubmit: submit,
 		children: [
-			fields.map((field) => field.type === "checkbox" ? /* @__PURE__ */ jsxs(Field.Root, {
-				name: field.name,
-				orientation: "horizontal",
-				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-					defaultChecked: initialValueByName[field.name] === SETTINGS_FORM_CHECKED,
-					disabled: field.readOnly,
-					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
-				}), /* @__PURE__ */ jsxs(Field.Content, { children: [/* @__PURE__ */ jsx(Field.Label, { children: field.label }), field.description ? /* @__PURE__ */ jsx(Field.Description, { children: field.description }) : null] })]
-			}, field.name) : /* @__PURE__ */ jsxs(Field.Root, {
-				name: field.name,
-				children: [
-					/* @__PURE__ */ jsx(Field.Label, { children: field.label }),
-					/* @__PURE__ */ jsx(Field.Control, {
-						autoComplete: field.autoComplete,
-						defaultValue: initialValueByName[field.name],
-						placeholder: field.placeholder,
-						readOnly: field.readOnly,
-						required: field.required,
-						type: field.type
-					}),
-					field.description ? /* @__PURE__ */ jsx(Field.Description, { children: field.description }) : null,
-					field.required ? /* @__PURE__ */ jsxs(Field.Error, {
-						match: "valueMissing",
-						children: [field.label, " is required."]
-					}) : null,
-					field.type === "url" ? /* @__PURE__ */ jsx(Field.Error, {
-						match: "typeMismatch",
-						children: "Enter a valid URL."
-					}) : null
-				]
-			}, field.name)),
+			children,
 			error ? /* @__PURE__ */ jsx(Field.Errors, { errors: [error] }) : externalError ? /* @__PURE__ */ jsx(Field.Errors, { errors: [externalError] }) : null,
-			/* @__PURE__ */ jsxs(Dialog.Footer, { children: [onRemove && removeLabel ? /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				variant: "ghost",
-				color: "destructive",
-				disabled: pending,
-				focusableWhenDisabled: pending,
-				onClick: () => void remove(),
-				children: submission === "remove" ? removingLabel : removeLabel
-			}) : null, /* @__PURE__ */ jsx(Button, {
-				type: "submit",
-				color: "primary",
-				disabled: pending,
-				focusableWhenDisabled: pending,
-				children: submission === "submit" ? submittingLabel : submitLabel
-			})] })
+			/* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+				onRemove && removeLabel ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "destructive",
+					disabled: pending,
+					focusableWhenDisabled: pending,
+					onClick: () => void remove(),
+					children: submission === "remove" ? removingLabel : removeLabel
+				}) : null,
+				/* @__PURE__ */ jsx(Dialog.Close, { children: "Cancel" }),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					color: "primary",
+					disabled: pending,
+					focusableWhenDisabled: pending,
+					children: submission === "submit" ? submittingLabel : submitLabel
+				})
+			] })
 		]
 	});
 }
 /**
-* Uncontrolled, metadata-driven settings dialog with native validation and
-* shared async submit/remove feedback. Product schemas remain in the host.
+* Settings dialog with caller-composed controls and shared async submit/remove
+* feedback. Base UI owns validation and values; product schemas stay in the host.
 */
 function SettingsFormDialog({ open, onOpenChange, title, description, ...contentProps }) {
+	const actionsRef = React.useRef(null);
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange,
+		actionsRef,
 		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, { children: [/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: title }), /* @__PURE__ */ jsx(Dialog.Description, { children: description })] }), /* @__PURE__ */ jsx(SettingsFormDialogContent, {
 			...contentProps,
-			onOpenChange
+			close: () => actionsRef.current?.close()
 		}, open ? "open" : "closed")] }) })] })
 	});
 }
 //#endregion
-export { SETTINGS_FORM_CHECKED, SettingsFormDialog };
+export { SettingsFormDialog };

package/dist/components/general-purpose/SetupChecklist.d.ts

@@ -14,6 +14,7 @@ interface SetupChecklistEntry<Id extends string = string> {
 interface SetupChecklistGroupProps<Id extends string = string> {
   /** Quiet visible heading above the checklist rows. */
   label: React.ReactNode;
+  /** Host-owned setup tasks and their current completion state. */
   entries: readonly SetupChecklistEntry<Id>[];
   /** Whether rows are visible when the containing menu first opens. */
   defaultOpen?: boolean;