@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ToolInvocation.js

@@ -0,0 +1,72 @@
+import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ThinkChatToolParts.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-CqTcGRYy.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
+//#region src/components/ToolInvocation.tsx
+function formatToolValue(value) {
+	if (value === void 0) return void 0;
+	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function describeToolPart(part) {
+	const name = getToolDisplayName(part);
+	let action;
+	switch (part.state) {
+		case "approval-requested":
+			action = `${name} awaiting approval`;
+			break;
+		case "approval-responded":
+			action = part.approval.approved ? `Running ${name}` : `${name} denied`;
+			break;
+		case "output-error":
+			action = `${name} failed`;
+			break;
+		case "output-denied":
+			action = `${name} denied`;
+			break;
+		case "output-available":
+			action = part.preliminary ? `Running ${name}` : `Ran ${name}`;
+			break;
+		case "input-streaming":
+		case "input-available":
+			action = `Running ${name}`;
+			break;
+	}
+	const detail = summarizeToolInput(getToolInput(part));
+	return detail ? `${action} · ${detail}` : action;
+}
+/**
+* Read-only generic disclosure for one upstream AI SDK tool invocation.
+*
+* The component derives its name, state, input, output, denial, and error
+* presentation from the whole `ToolUIPart | DynamicToolUIPart`. Approval
+* response controls belong to transport-aware adapters rather than this
+* transcript renderer. ThinkChat may replace this fallback with richer panels
+* for known workspace, browser, fetch, session, skill, and execute tools.
+*/
+function ToolInvocation({ part, defaultOpen }) {
+	const state = getToolPartState(part);
+	const failed = isToolPartFailed(part);
+	const deniedReason = part.state === "output-denied" ? part.approval.reason : void 0;
+	const output = state === "error" ? part.errorText : state === "denied" ? deniedReason ?? "Denied" : formatToolValue(getToolOutput(part));
+	const inputStatus = part.state === "approval-requested" ? "awaiting approval" : part.state === "approval-responded" ? part.approval.approved ? "approved" : "denied" : void 0;
+	const outputStatus = state === "denied" ? "denied" : failed ? "error" : part.state === "output-available" && part.preliminary ? "preliminary" : void 0;
+	return /* @__PURE__ */ jsxs(Activity, {
+		isStreaming: isToolPartWorking(part),
+		defaultOpen,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
+			label: part.title ?? getToolName(part),
+			text: formatToolValue(getToolInput(part)),
+			status: inputStatus,
+			error: inputStatus === "denied"
+		}), output !== void 0 ? /* @__PURE__ */ jsx(ActivityPanel, {
+			label: "output",
+			text: output,
+			status: outputStatus,
+			error: failed
+		}) : null] })]
+	});
+}
+//#endregion
+export { ToolInvocation };

package/dist/components/Toolbar.d.ts

@@ -5,45 +5,27 @@ import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 /**
  * Props for the Toolbar.Root component.
  */
-interface ToolbarRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Root> {}
 /**
  * Props for the Toolbar.Button component.
  */
-interface ToolbarButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Button>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Button> {}
 /**
  * Props for the Toolbar.Link component.
  */
-interface ToolbarLinkProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Link>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarLinkProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Link> {}
 /**
  * Props for the Toolbar.Group component.
  */
-interface ToolbarGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Group>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarGroupProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Group> {}
 /**
  * Props for the Toolbar.Separator component.
  */
-interface ToolbarSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Separator>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarSeparatorProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Separator> {}
 /**
  * Props for the Toolbar.Input component.
  */
-interface ToolbarInputProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Input>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ToolbarInputProps extends React.ComponentPropsWithoutRef<typeof Toolbar$1.Input> {}
 /**
  * Container for grouping toolbar buttons and controls.
  *

package/dist/components/Toolbar.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
@@ -17,8 +18,8 @@ import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 *
 * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
 */
-function ToolbarRoot({ className = "", ref, ...props }) {
-	const classes = ["toolbar", className].filter(Boolean).join(" ");
+function ToolbarRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Root, {
 		ref,
 		"data-slot": "toolbar",
@@ -29,8 +30,8 @@ function ToolbarRoot({ className = "", ref, ...props }) {
 /**
 * A clickable button within the toolbar.
 */
-function ToolbarButton({ className = "", ref, ...props }) {
-	const classes = ["toolbar__button", className].filter(Boolean).join(" ");
+function ToolbarButton({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar__button", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Button, {
 		ref,
 		"data-slot": "toolbar-button",
@@ -41,8 +42,8 @@ function ToolbarButton({ className = "", ref, ...props }) {
 /**
 * A link element within the toolbar.
 */
-function ToolbarLink({ className = "", ref, ...props }) {
-	const classes = ["toolbar__link", className].filter(Boolean).join(" ");
+function ToolbarLink({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar__link", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
 		ref,
 		"data-slot": "toolbar-link",
@@ -53,8 +54,8 @@ function ToolbarLink({ className = "", ref, ...props }) {
 /**
 * Groups toolbar items together.
 */
-function ToolbarGroup({ className = "", ref, ...props }) {
-	const classes = ["toolbar__group", className].filter(Boolean).join(" ");
+function ToolbarGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar__group", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Group, {
 		ref,
 		"data-slot": "toolbar-group",
@@ -65,8 +66,8 @@ function ToolbarGroup({ className = "", ref, ...props }) {
 /**
 * Visual separator between toolbar sections.
 */
-function ToolbarSeparator({ className = "", ref, ...props }) {
-	const classes = ["toolbar__separator", className].filter(Boolean).join(" ");
+function ToolbarSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar__separator", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
 		ref,
 		"data-slot": "toolbar-separator",
@@ -77,8 +78,8 @@ function ToolbarSeparator({ className = "", ref, ...props }) {
 /**
 * Input element within the toolbar.
 */
-function ToolbarInput({ className = "", ref, ...props }) {
-	const classes = ["toolbar__input", className].filter(Boolean).join(" ");
+function ToolbarInput({ className, ref, ...props }) {
+	const classes = mergeBaseClassName("toolbar__input", className);
 	return /* @__PURE__ */ jsx(Toolbar$1.Input, {
 		ref,
 		"data-slot": "toolbar-input",

package/dist/components/Tooltip.d.ts

@@ -9,15 +9,9 @@ interface TooltipPositionerProps extends Tooltip$1.Positioner.Props {}
 interface TooltipProviderProps extends Tooltip$1.Provider.Props {
   delayDuration?: number;
 }
-interface TooltipPopupProps extends Omit<Tooltip$1.Popup.Props, "className"> {
-  className?: string;
-}
-interface TooltipViewportProps extends Omit<Tooltip$1.Viewport.Props, "className"> {
-  className?: string;
-}
-interface TooltipArrowProps extends Omit<Tooltip$1.Arrow.Props, "className"> {
-  className?: string;
-}
+interface TooltipPopupProps extends Tooltip$1.Popup.Props {}
+interface TooltipViewportProps extends Tooltip$1.Viewport.Props {}
+interface TooltipArrowProps extends Tooltip$1.Arrow.Props {}
 /**
  * A tooltip component for displaying helpful information on hover.
  *
@@ -46,6 +40,13 @@ declare function TooltipProvider({
   ...props
 }: TooltipProviderProps): React.JSX.Element;
 declare function TooltipTrigger(props: TooltipTriggerProps): React.JSX.Element;
+declare function TooltipPositioner({
+  className,
+  ref,
+  ...props
+}: TooltipPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
 declare function TooltipPopup({
   className,
   ref,
@@ -83,7 +84,7 @@ declare const Tooltip: {
   Provider: typeof TooltipProvider;
   Trigger: typeof TooltipTrigger;
   Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-  Positioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Positioner: typeof TooltipPositioner;
   Popup: typeof TooltipPopup;
   Viewport: typeof TooltipViewport;
   Arrow: typeof TooltipArrow;

package/dist/components/Tooltip.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
@@ -36,12 +37,17 @@ function TooltipTrigger(props) {
 		...props
 	});
 }
-function TooltipPopup({ className = "", ref, role = "tooltip", ...props }) {
-	const classes = [
-		"tooltip__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function TooltipPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["tooltip__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
+	return /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		ref,
+		"data-slot": "tooltip-positioner",
+		className: classes,
+		...props
+	});
+}
+function TooltipPopup({ className, ref, role = "tooltip", ...props }) {
+	const classes = mergeBaseClassName(["tooltip__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Popup, {
 		ref,
 		role,
@@ -55,8 +61,8 @@ function TooltipPopup({ className = "", ref, role = "tooltip", ...props }) {
 * triggers. Pair the adaptive classes from `base-ui-motion.css` with the
 * positioner, popup, and this viewport when that behavior is needed.
 */
-function TooltipViewport({ className = "", ref, ...props }) {
-	const classes = ["tooltip__viewport", className].filter(Boolean).join(" ");
+function TooltipViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["tooltip__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
 		ref,
 		"data-slot": "tooltip-viewport",
@@ -64,8 +70,8 @@ function TooltipViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function TooltipArrow({ className = "", ref, ...props }) {
-	const classes = ["tooltip__arrow", className].filter(Boolean).join(" ");
+function TooltipArrow({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["tooltip__arrow"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 		ref,
 		"data-slot": "tooltip-arrow",
@@ -83,7 +89,7 @@ const Tooltip = {
 	Provider: TooltipProvider,
 	Trigger: TooltipTrigger,
 	Portal: Tooltip$1.Portal,
-	Positioner: Tooltip$1.Positioner,
+	Positioner: TooltipPositioner,
 	Popup: TooltipPopup,
 	Viewport: TooltipViewport,
 	Arrow: TooltipArrow

package/dist/components/TransitionSurface.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+//#region src/components/TransitionSurface.d.ts
+type TransitionSurfaceVariant = "fade" | "scale" | "slide-block" | "slide-inline";
+interface TransitionSurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The restrained entrance and hidden-state treatment applied to the surface.
+   * Pair separate surfaces around Suspense fallback and resolved content.
+   * @default "fade"
+   */
+  variant?: TransitionSurfaceVariant;
+}
+/**
+ * A lightweight presence surface for content inserted by React or revealed
+ * from `hidden`. CSS owns its motion through `@starting-style` and discrete
+ * transitions; this component does not own data loading or Suspense state.
+ */
+declare function TransitionSurface({
+  className,
+  variant,
+  ref,
+  ...props
+}: TransitionSurfaceProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { TransitionSurface, TransitionSurfaceProps, TransitionSurfaceVariant };

package/dist/components/TransitionSurface.js

@@ -0,0 +1,20 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/TransitionSurface.tsx
+/**
+* A lightweight presence surface for content inserted by React or revealed
+* from `hidden`. CSS owns its motion through `@starting-style` and discrete
+* transitions; this component does not own data loading or Suspense state.
+*/
+function TransitionSurface({ className, variant = "fade", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "transition-surface",
+		"data-variant": variant,
+		className: cx("transition-surface", className),
+		...props
+	});
+}
+//#endregion
+export { TransitionSurface };

package/dist/components/WebPreview.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 
 //#region src/components/WebPreview.d.ts
@@ -17,9 +17,9 @@ interface WebPreviewContextValue {
 interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Initial URL for uncontrolled preview history. */
   defaultUrl?: string;
-  /** Controlled URL pushed into preview history when it changes. */
+  /** Controlled URL. Controlled previews leave history ownership to the caller. */
   url?: string;
-  /** Called when the displayed URL changes. */
+  /** Called when navigation requests a URL change. Controlled callers update `url`. */
   onUrlChange?: (url: string) => void;
   /** Additional class names for layout only; do not override iframe sandboxing from apps. */
   className?: string;
@@ -28,8 +28,8 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * An iframe preview with a navigation bar, URL input, and optional console
- * panel. Tracks browsing history internally so back/forward buttons work
- * without depending on the iframe's own history.
+ * panel. Uncontrolled previews track browsing history internally; controlled
+ * previews leave history and back/forward behavior to their caller.
  *
  * Built internally for agent/browser preview surfaces. Use it to display a
  * known URL with local navigation controls. Do not use it for trusted app
@@ -77,8 +77,7 @@ declare function WebPreviewNavigation({
 }: WebPreviewNavigationProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface WebPreviewNavigationButtonProps extends Omit<ButtonProps, "variant" | "size" | "color" | "className" | "onClick"> {
-  className?: string;
+interface WebPreviewNavigationButtonProps extends Omit<ButtonProps, "variant" | "size" | "color" | "onClick"> {
   action?: "back" | "forward" | "reload";
   label?: string;
   tooltip?: string;

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as RefreshIcon, n as ArrowLeftIcon, r as ArrowRightIcon, s as ChevronDownIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { H as RefreshIcon, i as ArrowRightIcon, r as ArrowLeftIcon, u as ChevronDownIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Badge } from "./Badge.js";
@@ -16,8 +16,8 @@ function useWebPreviewContext() {
 }
 /**
 * An iframe preview with a navigation bar, URL input, and optional console
-* panel. Tracks browsing history internally so back/forward buttons work
-* without depending on the iframe's own history.
+* panel. Uncontrolled previews track browsing history internally; controlled
+* previews leave history and back/forward behavior to their caller.
 *
 * Built internally for agent/browser preview surfaces. Use it to display a
 * known URL with local navigation controls. Do not use it for trusted app
@@ -46,61 +46,65 @@ function useWebPreviewContext() {
 * ```
 */
 function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, ...props }) {
-	const initialUrl = controlledUrl ?? defaultUrl;
-	const [history, setHistory] = React.useState(() => initialUrl ? [initialUrl] : []);
-	const [index, setIndex] = React.useState(initialUrl ? 0 : -1);
+	const [navigation, setNavigation] = React.useState(() => ({
+		history: defaultUrl ? [defaultUrl] : [],
+		index: defaultUrl ? 0 : -1
+	}));
 	const [reloadToken, setReloadToken] = React.useState(0);
 	const [consoleOpen, setConsoleOpen] = React.useState(false);
-	const url = index >= 0 ? history[index] ?? "" : "";
-	const onUrlChangeRef = React.useRef(onUrlChange);
-	onUrlChangeRef.current = onUrlChange;
-	const historyRef = React.useRef(history);
-	historyRef.current = history;
-	const indexRef = React.useRef(index);
-	indexRef.current = index;
-	const prevControlledUrlRef = React.useRef(controlledUrl);
-	React.useEffect(() => {
-		if (controlledUrl === void 0) return;
-		if (controlledUrl === prevControlledUrlRef.current) return;
-		prevControlledUrlRef.current = controlledUrl;
-		if (!controlledUrl) {
-			setHistory([]);
-			setIndex(-1);
-			return;
-		}
-		const currentHistory = historyRef.current;
-		const currentIndex = indexRef.current;
-		if (currentIndex >= 0 && currentHistory[currentIndex] === controlledUrl) return;
-		setHistory([...currentHistory.slice(0, currentIndex + 1), controlledUrl]);
-		setIndex(currentIndex + 1);
-	}, [controlledUrl]);
+	const { history, index } = navigation;
+	const isControlled = controlledUrl !== void 0;
+	const url = controlledUrl ?? (index >= 0 ? history[index] ?? "" : "");
 	const setUrl = React.useCallback((next) => {
-		setHistory((prev) => [...prev.slice(0, index + 1), next]);
-		setIndex((prev) => prev + 1);
-		onUrlChangeRef.current?.(next);
-	}, [index]);
+		if (!isControlled) setNavigation((current) => {
+			const history = [...current.history.slice(0, current.index + 1), next];
+			return {
+				history,
+				index: history.length - 1
+			};
+		});
+		onUrlChange?.(next);
+	}, [isControlled, onUrlChange]);
 	const goBack = React.useCallback(() => {
-		setIndex((prev) => Math.max(0, prev - 1));
-	}, []);
+		if (isControlled) return;
+		const nextIndex = Math.max(0, index - 1);
+		if (nextIndex === index) return;
+		setNavigation((current) => ({
+			...current,
+			index: nextIndex
+		}));
+		onUrlChange?.(history[nextIndex] ?? "");
+	}, [
+		history,
+		index,
+		isControlled,
+		onUrlChange
+	]);
 	const goForward = React.useCallback(() => {
-		setIndex((prev) => Math.min(history.length - 1, prev + 1));
-	}, [history.length]);
+		if (isControlled) return;
+		const nextIndex = Math.min(history.length - 1, index + 1);
+		if (nextIndex === index) return;
+		setNavigation((current) => ({
+			...current,
+			index: nextIndex
+		}));
+		onUrlChange?.(history[nextIndex] ?? "");
+	}, [
+		history,
+		index,
+		isControlled,
+		onUrlChange
+	]);
 	const reload = React.useCallback(() => {
 		setReloadToken((n) => n + 1);
 	}, []);
-	const prevIndexRef = React.useRef(index);
-	React.useEffect(() => {
-		if (index === prevIndexRef.current) return;
-		prevIndexRef.current = index;
-		if (index >= 0) onUrlChangeRef.current?.(history[index] ?? "");
-	}, [index, history]);
 	const ctxValue = React.useMemo(() => ({
 		url,
 		setUrl,
 		consoleOpen,
 		setConsoleOpen,
-		canGoBack: index > 0,
-		canGoForward: index >= 0 && index < history.length - 1,
+		canGoBack: !isControlled && index > 0,
+		canGoForward: !isControlled && index >= 0 && index < history.length - 1,
 		goBack,
 		goForward,
 		reload,
@@ -109,6 +113,7 @@ function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChang
 		url,
 		setUrl,
 		consoleOpen,
+		isControlled,
 		index,
 		history.length,
 		goBack,
@@ -122,6 +127,7 @@ function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChang
 			ref,
 			className: cx("web-preview", className),
 			...props,
+			"data-recipe": "framed-panel",
 			children
 		})
 	});
@@ -163,7 +169,8 @@ function WebPreviewNavigationButton({ className, action, label, tooltip, childre
 	};
 	const button = /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
-		size: "icon",
+		size: "sm",
+		iconOnly: true,
 		"aria-label": resolvedLabel,
 		disabled: def?.disabled,
 		className: cx("web-preview__nav-button", action && `web-preview__nav-button--${action}`, className),
@@ -176,11 +183,16 @@ function WebPreviewNavigationButton({ className, action, label, tooltip, childre
 }
 function WebPreviewUrl({ className, placeholder = "Enter URL…", value, onChange, onKeyDown, ref, ...props }) {
 	const { url, setUrl } = useWebPreviewContext();
-	const [draft, setDraft] = React.useState(url);
-	const inputValue = value ?? draft;
-	React.useEffect(() => {
-		setDraft(url);
-	}, [url]);
+	const [draft, setDraft] = React.useState(() => ({
+		url,
+		value: url
+	}));
+	if (draft.url !== url) setDraft({
+		url,
+		value: url
+	});
+	const derivedDraft = draft.url === url ? draft.value : url;
+	const inputValue = value ?? derivedDraft;
 	return /* @__PURE__ */ jsx("form", {
 		className: "web-preview__url-form",
 		onSubmit: (e) => {
@@ -193,7 +205,10 @@ function WebPreviewUrl({ className, placeholder = "Enter URL…", value, onChang
 			type: "text",
 			value: inputValue,
 			onChange: (e) => {
-				setDraft(e.target.value);
+				setDraft({
+					url,
+					value: e.target.value
+				});
 				onChange?.(e);
 			},
 			onKeyDown: (e) => {
@@ -217,7 +232,7 @@ function WebPreviewBody({ className, loading, src, ref, interactive = true, ...p
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("iframe", {
 		ref,
 		src: iframeSrc,
-		sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation",
+		sandbox: "allow-scripts allow-forms allow-popups allow-presentation",
 		title: "Web preview",
 		className: cx("web-preview__body", !interactive && "web-preview__body--readonly", className),
 		...props
@@ -246,7 +261,7 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 			children: [/* @__PURE__ */ jsxs(ScrollArea.Viewport, {
 				className: "web-preview__console-viewport",
 				children: [/* @__PURE__ */ jsx("ul", {
-					className: "web-preview__console-list",
+					className: "web-preview__console-list sigvelo-stack-list",
 					children: logs.length === 0 ? /* @__PURE__ */ jsx("li", {
 						className: "web-preview__console-empty",
 						children: "No console output"

package/dist/components/Workspace.d.ts

@@ -1,2 +1,2 @@
-import { a as useWorkspace, i as WorkspaceState, n as WorkspaceInfo, r as WorkspaceSource, t as UseWorkspaceOptions } from "../Workspace-D39LxGvP.js";
-export { UseWorkspaceOptions, WorkspaceInfo, WorkspaceSource, WorkspaceState, useWorkspace };
+import { a as WorkspaceSource, c as workspaceBinaryFileQueryOptions, d as workspaceFileStatQueryOptions, f as workspaceInfoQueryOptions, i as WorkspaceQueryKey, l as workspaceDirectoryQueryOptions, m as workspaceTextFileQueryOptions, n as WorkspaceFileReadTarget, o as WorkspaceState, p as workspaceQueryKey, r as WorkspaceInfo, s as useWorkspace, t as UseWorkspaceOptions, u as workspaceFileAssetQueryOptions } from "../Workspace-Jez8ffUj.js";
+export { UseWorkspaceOptions, WorkspaceFileReadTarget, WorkspaceInfo, WorkspaceQueryKey, WorkspaceSource, WorkspaceState, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };