@mcp-b/react-components 0.48.0 → 0.49.1

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

@@ -1,2 +1,77 @@
-import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-DeTU9YpW.js";
+import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
+import { B as PlusIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon } from "../../icons-cuEtsgj9.js";
+import { Button } from "../foundations/Button.js";
+import { Menu } from "../foundations/Menu.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/menu-disclosure-group.tsx
+/**
+* A menu-native disclosure: its trigger stays in the menu roving-focus model,
+* while its rows mount only after the user expands the section.
+*/
+function MenuDisclosureGroup({ children, className, defaultOpen = false, label, triggerClassName, ...props }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		className: mergeBaseClassName("menu-disclosure-group", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-expanded": open,
+			className: mergeBaseClassName("menu-disclosure-group__trigger", triggerClassName),
+			closeOnClick: false,
+			onClick: () => setOpen((current) => !current),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sigvelo-truncate-grow",
+				children: label
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+		}), open ? /* @__PURE__ */ jsx("div", {
+			className: "menu-disclosure-group__items",
+			children
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/general-purpose/SetupChecklist.tsx
+/** Checklist rows for any Menu surface (composer plus menu, tray menu). */
+function SetupChecklistGroup({ label, entries, defaultOpen = false, onSelect }) {
+	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
+		label,
+		defaultOpen,
+		children: entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
+			onClick: () => onSelect(entry.id),
+			children: [
+				entry.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "sigvelo-truncate-grow",
+					children: entry.description
+				}),
+				entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+			]
+		}, entry.id))
+	});
+}
+/** Progress-aware tray trigger opening the checklist in its own menu. */
+function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
+	const completed = entries.filter((entry) => entry.complete).length;
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		"aria-label": `${actionLabel} — ${completed} of ${entries.length} set up`,
+		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
+		children: [completed === entries.length ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: actionLabel })]
+	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		side: "bottom",
+		align: "start",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(SetupChecklistGroup, {
+			defaultOpen: true,
+			label,
+			entries,
+			onSelect
+		}) })
+	}) })] });
+}
+//#endregion
 export { SetupChecklistAction, SetupChecklistGroup };

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

@@ -1,5 +1,5 @@
-import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
-import { t as CopyButtonProps } from "../../copy-button-C0JyjClr.js";
+import { n as IconButtonProps } from "../../IconButton-ByiyjkYE.js";
+import { t as CopyButtonProps } from "../../copy-button-OUwOdgEm.js";
 import * as React from "react";
 
 //#region src/components/general-purpose/Terminal.d.ts
@@ -42,7 +42,7 @@ declare function Terminal({
   ref,
   ...props
 }: TerminalProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface TerminalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function TerminalHeader({

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Z as TerminalIcon, nt as XIcon } from "../../icons-CeGfXO21.js";
+import { Z as TerminalIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-Dk2vRe9j.js";
+import { t as CopyButton } from "../../copy-button-CSDuDfdP.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -56,6 +56,15 @@ function parseAnsi(input) {
 		dim: c.decorations?.includes("dim") ?? false
 	}));
 }
+const ANSI_ESCAPE_SEQUENCE = /\u001b\[[0-9;?]*[a-zA-Z]/g;
+/**
+* The same text with every escape sequence removed, for surfaces that need the
+* plain characters instead of {@link parseAnsi}'s formatted segments — copying
+* terminal output, measuring it, or searching it.
+*/
+function stripAnsi(input) {
+	return input.replace(ANSI_ESCAPE_SEQUENCE, "");
+}
 //#endregion
 //#region src/components/general-purpose/Terminal.tsx
 const TerminalContext = React.createContext(null);
@@ -219,9 +228,5 @@ function TerminalClearButton({ className, label = "Clear terminal", onClick, ...
 		children: /* @__PURE__ */ jsx(XIcon, {})
 	});
 }
-const ANSI_REGEX = /\u001b\[[0-9;?]*[a-zA-Z]/g;
-function stripAnsi(input) {
-	return input.replace(ANSI_REGEX, "");
-}
 //#endregion
 export { Terminal, TerminalActions, TerminalClearButton, TerminalContent, TerminalCopyButton, TerminalHeader, TerminalStatus, TerminalTitle };

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

@@ -1,5 +1,6 @@
 import { Collapsible } from "../foundations/Collapsible.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/general-purpose/TestResults.d.ts
 type TestStatusValue = "passed" | "failed" | "skipped" | "running";
@@ -15,12 +16,12 @@ interface TestSummary {
   /** Total runtime in milliseconds. */
   duration?: number;
 }
-interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TestResultsProps extends useRender.ComponentProps<"div"> {
   /** Aggregate test counts used by the summary and progress bar. */
   summary?: TestSummary;
   /** Additional class names for layout only; do not override status colors from apps. */
   className?: string;
-  /** Optional custom report content; defaults to summary and empty content slots. */
+  /** Explicit header, summary, progress, and suite content parts. */
   children?: React.ReactNode;
 }
 /**
@@ -39,22 +40,33 @@ interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
  * @example
  * ```tsx
  * <TestResults summary={{ passed: 10, failed: 1, skipped: 0, total: 11 }}>
- *   <TestSuite name="auth.test.ts" status="failed">
- *     <Test name="rejects bad tokens" status="failed">
- *       <TestError message="Expected 401, received 500" />
- *     </Test>
- *   </TestSuite>
+ *   <TestResultsHeader>
+ *     <TestResultsSummary />
+ *     <TestResultsProgress />
+ *   </TestResultsHeader>
+ *   <TestResultsContent>
+ *     <TestSuite name="auth.test.ts" status="failed">
+ *       <TestSuiteName />
+ *       <TestSuiteContent>
+ *         <Test name="rejects bad tokens" status="failed">
+ *           <TestStatus />
+ *           <TestName />
+ *           <TestError message="Expected 401, received 500" />
+ *         </Test>
+ *       </TestSuiteContent>
+ *     </TestSuite>
+ *   </TestResultsContent>
  * </TestResults>
  * ```
  */
 declare function TestResults({
-  className,
+  render,
   summary,
   children,
   ref,
   ...props
 }: TestResultsProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface TestResultsHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function TestResultsHeader({
@@ -150,13 +162,13 @@ declare function TestSuiteContent({
 }: TestSuiteContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface TestProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TestProps extends useRender.ComponentProps<"div"> {
   name: string;
   status: TestStatusValue;
   duration?: number;
 }
 declare function Test({
-  className,
+  render,
   name,
   status,
   duration,

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

@@ -1,9 +1,11 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
+import { K as SpinnerIcon, d as CheckIcon, nt as XIcon, p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { K as SpinnerIcon, d as CheckIcon, nt as XIcon, p as ChevronRightIcon } from "../../icons-CeGfXO21.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/general-purpose/TestResults.tsx
 const TestResultsContext = React.createContext({});
 /**
@@ -22,28 +24,42 @@ const TestResultsContext = React.createContext({});
 * @example
 * ```tsx
 * <TestResults summary={{ passed: 10, failed: 1, skipped: 0, total: 11 }}>
-*   <TestSuite name="auth.test.ts" status="failed">
-*     <Test name="rejects bad tokens" status="failed">
-*       <TestError message="Expected 401, received 500" />
-*     </Test>
-*   </TestSuite>
+*   <TestResultsHeader>
+*     <TestResultsSummary />
+*     <TestResultsProgress />
+*   </TestResultsHeader>
+*   <TestResultsContent>
+*     <TestSuite name="auth.test.ts" status="failed">
+*       <TestSuiteName />
+*       <TestSuiteContent>
+*         <Test name="rejects bad tokens" status="failed">
+*           <TestStatus />
+*           <TestName />
+*           <TestError message="Expected 401, received 500" />
+*         </Test>
+*       </TestSuiteContent>
+*     </TestSuite>
+*   </TestResultsContent>
 * </TestResults>
 * ```
 */
-function TestResults({ className, summary, children, ref, ...props }) {
+function TestResults({ render, summary, children, ref, ...props }) {
 	const overall = summary && summary.failed > 0 ? "failed" : "passed";
 	const contextValue = React.useMemo(() => ({ summary }), [summary]);
-	const isComposable = hasComposableTestResultsChildren(children);
-	return /* @__PURE__ */ jsx(TestResultsContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("test-results", className),
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: "test-results",
 			"data-status": overall,
-			...props,
 			"data-recipe": "framed-panel",
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TestResultsHeader, { children: [/* @__PURE__ */ jsx(TestResultsSummary, {}), /* @__PURE__ */ jsx(TestResultsProgress, {})] }), /* @__PURE__ */ jsx(TestResultsContent, { children })] })
-		})
+			children
+		}, props)
+	});
+	return /* @__PURE__ */ jsx(TestResultsContext.Provider, {
+		value: contextValue,
+		children: element
 	});
 }
 function TestResultsHeader({ className, children, ref, ...props }) {
@@ -147,9 +163,6 @@ function TestResultsContent({ className, children, ref, ...props }) {
 		children
 	});
 }
-function hasComposableTestResultsChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestResultsHeader || child.type === TestResultsSummary || child.type === TestResultsProgress || child.type === TestResultsContent));
-}
 const TestSuiteContext = React.createContext({
 	name: "",
 	status: "passed"
@@ -159,20 +172,16 @@ function TestSuite({ className, name, status, defaultOpen, children, ref, ...pro
 		name,
 		status
 	}), [name, status]);
-	const isComposable = hasComposableTestSuiteChildren(children);
 	return /* @__PURE__ */ jsx(TestSuiteContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Collapsible.Root, {
 			ref,
-			className: cx("test-results__suite", className),
+			className: mergeBaseClassName("test-results__suite", className),
 			defaultOpen: defaultOpen ?? status === "failed",
 			"data-status": status,
 			...props,
 			unstyled: true,
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TestSuiteName, {}), /* @__PURE__ */ jsx(TestSuiteContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "test-results__suite-tests",
-				children
-			}) })] })
+			children
 		})
 	});
 }
@@ -180,7 +189,7 @@ function TestSuiteName({ className, children, ref, ...props }) {
 	const { name, status } = React.useContext(TestSuiteContext);
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
-		className: cx("test-results__suite-trigger", className),
+		className: mergeBaseClassName("test-results__suite-trigger", className),
 		...props,
 		unstyled: true,
 		children: [
@@ -224,20 +233,17 @@ function TestSuiteStats({ className, passed = 0, failed = 0, skipped = 0, childr
 function TestSuiteContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
-		className: cx("test-results__suite-content", className),
+		className: mergeBaseClassName("test-results__suite-content", className),
 		...props,
 		unstyled: true,
 		children
 	});
 }
-function hasComposableTestSuiteChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestSuiteName || child.type === TestSuiteContent));
-}
 const TestContext = React.createContext({
 	name: "",
 	status: "passed"
 });
-function Test({ className, name, status, duration, children, ref, ...props }) {
+function Test({ render, name, status, duration, children, ref, ...props }) {
 	const contextValue = React.useMemo(() => ({
 		duration,
 		name,
@@ -247,24 +253,19 @@ function Test({ className, name, status, duration, children, ref, ...props }) {
 		name,
 		status
 	]);
-	const isComposable = hasComposableTestChildren(children);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cx("test-results__test", `test-results__test--${status}`),
+			"data-status": status,
+			children
+		}, props)
+	});
 	return /* @__PURE__ */ jsx(TestContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("test-results__test", `test-results__test--${status}`, className),
-			"data-status": status,
-			...props,
-			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(TestStatus, {}),
-				/* @__PURE__ */ jsx(TestName, {}),
-				/* @__PURE__ */ jsx(TestDuration, {}),
-				children ? /* @__PURE__ */ jsx("div", {
-					className: "test-results__test-children",
-					children
-				}) : null
-			] })
-		})
+		children: element
 	});
 }
 function TestStatus({ className, children, status, ref, ...props }) {
@@ -301,9 +302,6 @@ function TestDuration({ className, children, ref, ...props }) {
 		children: children ?? `${duration}ms`
 	});
 }
-function hasComposableTestChildren(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestStatus || child.type === TestName || child.type === TestDuration));
-}
 function TestError({ className, message, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,

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

@@ -6,7 +6,9 @@ interface ThemeModeControlProps {
   "aria-label"?: string;
   /** Name used by the radio group's hidden form input. @default "theme" */
   name?: string;
+  /** Prevents changing the current theme preference. */
   disabled?: boolean;
+  /** Additional class name for layout in the consuming surface. */
   className?: string;
 }
 /**

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

@@ -1,6 +1,6 @@
-import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-CeGfXO21.js";
-import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
+import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-cuEtsgj9.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
+import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [

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

@@ -1,5 +1,6 @@
-import { n as IconButtonProps } from "../../IconButton-BAUFhUk8.js";
+import { n as IconButtonProps } from "../../IconButton-ByiyjkYE.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/general-purpose/WebPreview.d.ts
 interface WebPreviewContextValue {
@@ -15,6 +16,8 @@ interface WebPreviewContextValue {
   reloadToken: number;
 }
 interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Omit the frame when the host already supplies panel chrome. */
+  surface?: "framed" | "plain";
   /** Initial URL for uncontrolled preview history. */
   defaultUrl?: string;
   /** Controlled URL. Controlled previews leave history ownership to the caller. */
@@ -60,6 +63,7 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  * ```
  */
 declare function WebPreview({
+  surface,
   className,
   defaultUrl,
   url: controlledUrl,
@@ -69,10 +73,14 @@ declare function WebPreview({
   "data-recipe": recipe,
   ...props
 }: WebPreviewProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface WebPreviewNavigationProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface WebPreviewNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tabs join the address row below them without a second dividing edge. */
+  variant?: "address" | "tabs";
+}
 declare function WebPreviewNavigation({
+  variant,
   className,
   children,
   ref,
@@ -115,6 +123,23 @@ declare function WebPreviewUrl({
 }: WebPreviewUrlProps & {
   ref?: React.Ref<HTMLInputElement>;
 }): React.JSX.Element;
+interface WebPreviewViewportProps extends useRender.ComponentProps<"div"> {}
+/** Media surface shared by iframe previews and host-provided live views.
+ * Compose a behavior part such as Tabs.Panel through render to keep one element. */
+declare function WebPreviewViewport({
+  render,
+  ref,
+  ...props
+}: WebPreviewViewportProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+interface WebPreviewEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Centered placeholder or session state inside a preview surface. */
+declare function WebPreviewEmpty({
+  className,
+  ref,
+  ...props
+}: WebPreviewEmptyProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
 interface WebPreviewBodyProps extends Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "loading"> {
   /** Optional placeholder shown while the iframe has no src. */
   loading?: React.ReactNode;
@@ -149,4 +174,4 @@ declare function WebPreviewConsole({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ConsoleLog, ConsoleLogLevel, WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps };
+export { ConsoleLog, ConsoleLogLevel, WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewEmpty, WebPreviewEmptyProps, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps, WebPreviewViewport, WebPreviewViewportProps };

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

@@ -1,11 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { H as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { H as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { Input } from "../foundations/Input.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { Input } from "../foundations/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/general-purpose/WebPreview.tsx
 const WebPreviewContext = React.createContext(null);
 function useWebPreviewContext() {
@@ -44,7 +46,7 @@ function useWebPreviewContext() {
 * </WebPreview>
 * ```
 */
-function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, "data-recipe": recipe, ...props }) {
+function WebPreview({ surface = "framed", className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, "data-recipe": recipe, ...props }) {
 	const [navigation, setNavigation] = React.useState(() => ({
 		history: defaultUrl ? [defaultUrl] : [],
 		index: defaultUrl ? 0 : -1
@@ -125,16 +127,18 @@ function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChang
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: cx("web-preview", className),
+			"data-surface": surface,
 			...props,
 			"data-recipe": cx("framed-panel", recipe),
 			children
 		})
 	});
 }
-function WebPreviewNavigation({ className, children, ref, ...props }) {
+function WebPreviewNavigation({ variant = "address", className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: cx("web-preview__nav", className),
+		"data-variant": variant,
 		...props,
 		children
 	});
@@ -220,21 +224,42 @@ function WebPreviewUrl({ className, placeholder = "Enter URL…", value, onChang
 		})
 	});
 }
+/** Media surface shared by iframe previews and host-provided live views.
+* Compose a behavior part such as Tabs.Panel through render to keep one element. */
+function WebPreviewViewport({ render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({ className: "web-preview__body" }, props)
+	});
+}
+/** Centered placeholder or session state inside a preview surface. */
+function WebPreviewEmpty({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("web-preview__empty", className),
+		...props
+	});
+}
 function WebPreviewBody({ className, loading, src, ref, interactive = true, ...props }) {
 	const { url, reloadToken } = useWebPreviewContext();
 	const effectiveSrc = src ?? url;
 	const iframeSrc = effectiveSrc ? `${effectiveSrc}${reloadToken ? `#reload-${reloadToken}` : ""}` : void 0;
-	if (!iframeSrc) return /* @__PURE__ */ jsx("div", {
-		className: cx("web-preview__body", "web-preview__body--empty", className),
+	if (!iframeSrc) return /* @__PURE__ */ jsx(WebPreviewViewport, {
+		className,
+		render: /* @__PURE__ */ jsx(WebPreviewEmpty, {}),
 		children: loading ?? "Enter a URL above to preview a site."
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("iframe", {
-		ref,
-		src: iframeSrc,
-		sandbox: "allow-scripts allow-forms allow-popups allow-presentation",
-		title: "Web preview",
-		className: cx("web-preview__body", !interactive && "web-preview__body--readonly", className),
-		...props
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WebPreviewViewport, {
+		className: cx(!interactive && "web-preview__body--readonly", className),
+		render: /* @__PURE__ */ jsx("iframe", {
+			ref,
+			src: iframeSrc,
+			sandbox: "allow-scripts allow-forms allow-popups allow-presentation",
+			title: "Web preview",
+			...props
+		})
 	}, iframeSrc), loading] });
 }
 function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
@@ -289,4 +314,4 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 	});
 }
 //#endregion
-export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl };
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewEmpty, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, WebPreviewViewport };

package/dist/components/nanites/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon } from "../../icons-CeGfXO21.js";
+import { D as LinkIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-BSJl682D.js";
 import { Popover } from "../foundations/Popover.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-g8sADidM.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";