@mcp-b/react-components 0.14.2 → 0.16.1

package/dist/WorkspaceFileView-rSN_yT0L.js

@@ -0,0 +1,744 @@
+import { g as EyeIcon, m as DownloadIcon, o as CheckIcon, q as WarningIcon, u as CodeIcon, w as MaximizeIcon } from "./icons-CpfUer49.js";
+import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DIPbXrUM.js";
+import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-BkMdE3bS.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-BmB4Xaqq.js";
+import { AppTopBar } from "./components/AppTopBar.js";
+import { WorkspaceHeader } from "./components/WorkspaceHeader.js";
+import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/WorkspaceFile.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { defaultRehypePlugins } from "streamdown";
+import rehypeSlug from "rehype-slug";
+import Lightbox from "yet-another-react-lightbox";
+import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+//#region src/components/_internal/workspace-media-preview.tsx
+const lightboxPlugins = [Zoom, Fullscreen];
+const allowedAssetProtocols = /* @__PURE__ */ new Set([
+	"http:",
+	"https:",
+	"blob:"
+]);
+const SVG_MIME_TYPE = "image/svg+xml";
+const lightboxThemeProperties = [
+	"--sigvelo-color-surface",
+	"--sigvelo-color-text",
+	"--sigvelo-color-text-muted",
+	"--sigvelo-color-neutral-border-subtle",
+	"--sigvelo-border-style",
+	"--sigvelo-border-width",
+	"--sigvelo-spacing-1",
+	"--sigvelo-spacing-2",
+	"--sigvelo-radius-md",
+	"--sigvelo-focus-ring",
+	"--sigvelo-focus-offset"
+];
+function safeAssetUrl(value) {
+	if (!value?.trim()) return null;
+	try {
+		const parsed = new URL(value, "https://workspace.invalid/");
+		return allowedAssetProtocols.has(parsed.protocol) ? value : null;
+	} catch {
+		return null;
+	}
+}
+function toBlobPart(data) {
+	return data;
+}
+function resolveLightboxTheme(element) {
+	const computedStyle = getComputedStyle(element);
+	return {
+		colorScheme: computedStyle.colorScheme,
+		...Object.fromEntries(lightboxThemeProperties.map((property) => [property, computedStyle.getPropertyValue(property)]))
+	};
+}
+/** Create component-owned object URLs for bytes and revoke them on replacement. */
+function useWorkspaceAssetUrl(asset, mimeType) {
+	const [objectUrl, setObjectUrl] = React.useState(null);
+	const assetTokensRef = React.useRef(/* @__PURE__ */ new WeakMap());
+	const nextAssetTokenRef = React.useRef(0);
+	let assetToken = null;
+	if (asset?.kind === "data") {
+		assetToken = assetTokensRef.current.get(asset) ?? null;
+		if (assetToken === null) {
+			assetToken = nextAssetTokenRef.current + 1;
+			nextAssetTokenRef.current = assetToken;
+			assetTokensRef.current.set(asset, assetToken);
+		}
+	}
+	React.useEffect(() => {
+		if (!asset || asset.kind !== "data" || assetToken === null) {
+			setObjectUrl(null);
+			return;
+		}
+		if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function" || typeof Blob === "undefined") {
+			setObjectUrl({
+				token: assetToken,
+				url: null,
+				downloadUrl: null,
+				error: "This browser cannot prepare a local preview."
+			});
+			return;
+		}
+		let url = null;
+		let downloadUrl = null;
+		try {
+			const previewBlob = new Blob([toBlobPart(asset.data)], { type: mimeType });
+			url = URL.createObjectURL(previewBlob);
+			downloadUrl = mimeType === SVG_MIME_TYPE ? URL.createObjectURL(new Blob([previewBlob], { type: "application/octet-stream" })) : url;
+			setObjectUrl({
+				token: assetToken,
+				url,
+				downloadUrl,
+				error: null
+			});
+		} catch {
+			if (url) URL.revokeObjectURL(url);
+			if (downloadUrl && downloadUrl !== url) URL.revokeObjectURL(downloadUrl);
+			setObjectUrl({
+				token: assetToken,
+				url: null,
+				downloadUrl: null,
+				error: "This file could not be prepared for preview."
+			});
+			return;
+		}
+		return () => {
+			if (url) URL.revokeObjectURL(url);
+			if (downloadUrl && downloadUrl !== url) URL.revokeObjectURL(downloadUrl);
+		};
+	}, [
+		asset,
+		assetToken,
+		mimeType
+	]);
+	if (!asset) return {
+		url: null,
+		downloadUrl: null,
+		error: null
+	};
+	if (asset.kind === "url") {
+		const url = safeAssetUrl(asset.url);
+		return {
+			url,
+			downloadUrl: safeAssetUrl(asset.downloadUrl),
+			error: url ? null : "The host returned an unsupported asset URL."
+		};
+	}
+	if (assetToken === null || objectUrl?.token !== assetToken) return {
+		url: null,
+		downloadUrl: null,
+		error: null
+	};
+	return {
+		url: objectUrl.url,
+		downloadUrl: objectUrl.downloadUrl,
+		error: objectUrl.error
+	};
+}
+function WorkspaceAssetActions({ fileName, url, downloadUrl, allowOpen = true }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [allowOpen ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+		label: `Open ${fileName} in a new tab`,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("a", {
+			href: url,
+			target: "_blank",
+			rel: "noreferrer"
+		}),
+		children: /* @__PURE__ */ jsx(MaximizeIcon, { "aria-hidden": "true" })
+	}) : null, downloadUrl ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+		label: `Download ${fileName}`,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("a", {
+			href: downloadUrl,
+			download: fileName,
+			rel: "noreferrer"
+		}),
+		children: /* @__PURE__ */ jsx(DownloadIcon, { "aria-hidden": "true" })
+	}) : null] });
+}
+function formatBytes(size) {
+	if (size < 1024) return `${size} ${size === 1 ? "byte" : "bytes"}`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = size / 1024;
+	let unit = units[0];
+	for (let index = 1; index < units.length && value >= 1024; index += 1) {
+		value /= 1024;
+		unit = units[index];
+	}
+	return `${value >= 10 ? value.toFixed(0) : value.toFixed(1)} ${unit}`;
+}
+function formatDuration(duration) {
+	const seconds = Math.max(0, Math.round(duration));
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor(seconds % 3600 / 60);
+	const remainder = seconds % 60;
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}` : `${minutes}:${String(remainder).padStart(2, "0")}`;
+}
+function WorkspaceMediaDetails({ mimeType, size, dimensions, dimensionsPending = false, duration, durationPending = false, transcriptUrl }) {
+	const dimensionValue = dimensionsPending ? "Loading…" : dimensions ? `${dimensions.width} × ${dimensions.height} px` : null;
+	const durationValue = durationPending ? "Loading…" : duration !== void 0 && duration !== null ? formatDuration(duration) : null;
+	return /* @__PURE__ */ jsxs("figcaption", {
+		className: "workspace-explorer__media-caption",
+		children: [/* @__PURE__ */ jsxs("dl", {
+			className: "workspace-explorer__media-details",
+			children: [
+				dimensionValue ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Dimensions" }), /* @__PURE__ */ jsx("dd", { children: dimensionValue })] }) : null,
+				durationValue ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Duration" }), /* @__PURE__ */ jsx("dd", { children: durationValue })] }) : null,
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Type" }), /* @__PURE__ */ jsx("dd", { children: mimeType })] }),
+				size !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Size" }), /* @__PURE__ */ jsx("dd", { children: formatBytes(size) })] }) : null
+			]
+		}), transcriptUrl ? /* @__PURE__ */ jsx("a", {
+			className: "workspace-explorer__media-transcript",
+			href: transcriptUrl,
+			target: "_blank",
+			rel: "noreferrer",
+			children: "Open transcript"
+		}) : null]
+	});
+}
+function safeTracks(tracks) {
+	return tracks?.filter((track) => safeAssetUrl(track.src)) ?? [];
+}
+function WorkspaceMediaError({ active, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__media-error",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: active ? children : null
+	});
+}
+function WorkspaceImagePreview({ asset, fileName, media, url }) {
+	const [open, setOpen] = React.useState(false);
+	const [dimensions, setDimensions] = React.useState(null);
+	const [hasLoaded, setHasLoaded] = React.useState(false);
+	const [loadFailed, setLoadFailed] = React.useState(false);
+	const figureRef = React.useRef(null);
+	const [lightboxTheme, setLightboxTheme] = React.useState();
+	React.useEffect(() => {
+		setDimensions(null);
+		setHasLoaded(false);
+		setLoadFailed(false);
+		setOpen(false);
+	}, [url]);
+	const alt = asset.alt?.trim() || fileName;
+	const slide = {
+		src: url,
+		alt,
+		width: dimensions?.width,
+		height: dimensions?.height
+	};
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: figureRef,
+		className: "workspace-explorer__media-figure workspace-explorer__media-figure--image",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "workspace-explorer__media-stage",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "workspace-explorer__image-trigger",
+					type: "button",
+					"aria-label": loadFailed ? `${fileName} image preview unavailable` : `Open ${fileName} image viewer`,
+					"aria-disabled": loadFailed || void 0,
+					onClick: () => {
+						if (!loadFailed) {
+							if (figureRef.current) setLightboxTheme(resolveLightboxTheme(figureRef.current));
+							setOpen(true);
+						}
+					},
+					children: loadFailed ? /* @__PURE__ */ jsx("span", {
+						className: "workspace-explorer__media-error",
+						"aria-hidden": "true",
+						children: "This image could not be decoded by the browser."
+					}) : /* @__PURE__ */ jsx("img", {
+						className: "workspace-explorer__image",
+						src: url,
+						alt,
+						role: "img",
+						width: dimensions?.width,
+						height: dimensions?.height,
+						onLoad: (event) => {
+							const { naturalWidth: width, naturalHeight: height } = event.currentTarget;
+							setHasLoaded(true);
+							setDimensions(width > 0 && height > 0 ? {
+								width,
+								height
+							} : null);
+						},
+						onError: () => setLoadFailed(true)
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "workspace-explorer__visually-hidden",
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: loadFailed ? `The ${fileName} image preview could not be decoded.` : null
+				})]
+			}),
+			/* @__PURE__ */ jsx(Lightbox, {
+				className: "workspace-media-lightbox",
+				open,
+				close: () => setOpen(false),
+				slides: [slide],
+				plugins: lightboxPlugins,
+				labels: { Lightbox: `${fileName} image viewer` },
+				carousel: {
+					finite: true,
+					imageFit: "contain"
+				},
+				controller: {
+					closeOnBackdropClick: true,
+					disableSwipeNavigation: true
+				},
+				render: {
+					buttonPrev: () => null,
+					buttonNext: () => null
+				},
+				styles: { root: lightboxTheme },
+				zoom: { scrollToZoom: true }
+			}),
+			/* @__PURE__ */ jsx(WorkspaceMediaDetails, {
+				mimeType: media.mimeType,
+				size: asset.size,
+				dimensions,
+				dimensionsPending: !loadFailed && !hasLoaded
+			})
+		]
+	});
+}
+function WorkspacePdfPreview({ asset, fileName, media, url, downloadUrl }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "workspace-explorer__media-figure workspace-explorer__media-figure--document",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "workspace-explorer__media-stage",
+			children: /* @__PURE__ */ jsx("object", {
+				className: "workspace-explorer__pdf",
+				data: url,
+				type: "application/pdf",
+				"aria-label": `PDF preview: ${fileName}`,
+				children: /* @__PURE__ */ jsxs("p", {
+					className: "workspace-explorer__media-fallback",
+					children: [
+						"PDF preview is unavailable.",
+						" ",
+						/* @__PURE__ */ jsxs("a", {
+							href: url,
+							target: "_blank",
+							rel: "noreferrer",
+							children: ["Open ", fileName]
+						}),
+						downloadUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							" ",
+							"or",
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								href: downloadUrl,
+								download: fileName,
+								children: "download it"
+							})
+						] }) : null,
+						"."
+					]
+				})
+			})
+		}), /* @__PURE__ */ jsx(WorkspaceMediaDetails, {
+			mimeType: media.mimeType,
+			size: asset.size
+		})]
+	});
+}
+function WorkspaceAudioPreview({ asset, fileName, media, url }) {
+	const [duration, setDuration] = React.useState(null);
+	const [metadataLoaded, setMetadataLoaded] = React.useState(false);
+	const [loadFailed, setLoadFailed] = React.useState(false);
+	const tracks = safeTracks(asset.tracks);
+	const transcriptUrl = safeAssetUrl(asset.transcriptUrl);
+	React.useEffect(() => {
+		setDuration(null);
+		setMetadataLoaded(false);
+		setLoadFailed(false);
+	}, [url]);
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "workspace-explorer__media-figure workspace-explorer__media-figure--audio",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "workspace-explorer__media-stage",
+			children: [/* @__PURE__ */ jsxs("audio", {
+				className: "workspace-explorer__audio",
+				controls: true,
+				preload: "metadata",
+				crossOrigin: asset.crossOrigin,
+				"aria-label": `Audio preview: ${fileName}`,
+				onLoadedMetadata: (event) => {
+					const nextDuration = event.currentTarget.duration;
+					setMetadataLoaded(true);
+					setDuration(Number.isFinite(nextDuration) ? nextDuration : null);
+				},
+				onError: () => setLoadFailed(true),
+				children: [
+					/* @__PURE__ */ jsx("source", {
+						src: url,
+						type: media.mimeType
+					}),
+					tracks.map((track) => /* @__PURE__ */ jsx("track", {
+						src: track.src,
+						kind: track.kind,
+						srcLang: track.srcLang,
+						label: track.label,
+						default: track.default
+					}, `${track.kind}:${track.srcLang}:${track.src}`)),
+					/* @__PURE__ */ jsxs("a", {
+						href: url,
+						children: ["Open ", fileName]
+					})
+				]
+			}, url), /* @__PURE__ */ jsx(WorkspaceMediaError, {
+				active: loadFailed,
+				children: "This audio format could not be played by the browser."
+			})]
+		}), /* @__PURE__ */ jsx(WorkspaceMediaDetails, {
+			mimeType: media.mimeType,
+			size: asset.size,
+			duration,
+			durationPending: !loadFailed && !metadataLoaded,
+			transcriptUrl
+		})]
+	});
+}
+function WorkspaceVideoPreview({ asset, fileName, media, url }) {
+	const [duration, setDuration] = React.useState(null);
+	const [dimensions, setDimensions] = React.useState(null);
+	const [metadataLoaded, setMetadataLoaded] = React.useState(false);
+	const [loadFailed, setLoadFailed] = React.useState(false);
+	const tracks = safeTracks(asset.tracks);
+	const posterUrl = safeAssetUrl(asset.posterUrl) ?? void 0;
+	const transcriptUrl = safeAssetUrl(asset.transcriptUrl);
+	React.useEffect(() => {
+		setDuration(null);
+		setDimensions(null);
+		setMetadataLoaded(false);
+		setLoadFailed(false);
+	}, [url]);
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "workspace-explorer__media-figure workspace-explorer__media-figure--video",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "workspace-explorer__media-stage",
+			children: [/* @__PURE__ */ jsxs("video", {
+				className: "workspace-explorer__video",
+				controls: true,
+				preload: "metadata",
+				playsInline: true,
+				crossOrigin: asset.crossOrigin,
+				poster: posterUrl,
+				width: dimensions?.width,
+				height: dimensions?.height,
+				"aria-label": `Video preview: ${fileName}`,
+				onLoadedMetadata: (event) => {
+					const video = event.currentTarget;
+					setMetadataLoaded(true);
+					setDuration(Number.isFinite(video.duration) ? video.duration : null);
+					setDimensions(video.videoWidth > 0 && video.videoHeight > 0 ? {
+						width: video.videoWidth,
+						height: video.videoHeight
+					} : null);
+				},
+				onError: () => setLoadFailed(true),
+				children: [
+					/* @__PURE__ */ jsx("source", {
+						src: url,
+						type: media.mimeType
+					}),
+					tracks.map((track) => /* @__PURE__ */ jsx("track", {
+						src: track.src,
+						kind: track.kind,
+						srcLang: track.srcLang,
+						label: track.label,
+						default: track.default
+					}, `${track.kind}:${track.srcLang}:${track.src}`)),
+					/* @__PURE__ */ jsxs("a", {
+						href: url,
+						children: ["Open ", fileName]
+					})
+				]
+			}, url), /* @__PURE__ */ jsx(WorkspaceMediaError, {
+				active: loadFailed,
+				children: "This video format could not be played by the browser."
+			})]
+		}), /* @__PURE__ */ jsx(WorkspaceMediaDetails, {
+			mimeType: media.mimeType,
+			size: asset.size,
+			dimensions,
+			dimensionsPending: !loadFailed && !metadataLoaded,
+			duration,
+			durationPending: !loadFailed && !metadataLoaded,
+			transcriptUrl
+		})]
+	});
+}
+/** Finished workspace preview surface for one resolved media asset. */
+function WorkspaceMediaPreview(props) {
+	const { onScroll } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "workspace-explorer__media-scroll",
+		"data-workspace-focus-target": "",
+		"data-workspace-scroll": "",
+		onScroll,
+		tabIndex: -1,
+		children: [
+			props.media.kind === "image" ? /* @__PURE__ */ jsx(WorkspaceImagePreview, { ...props }) : null,
+			props.media.kind === "pdf" ? /* @__PURE__ */ jsx(WorkspacePdfPreview, { ...props }) : null,
+			props.media.kind === "audio" ? /* @__PURE__ */ jsx(WorkspaceAudioPreview, { ...props }) : null,
+			props.media.kind === "video" ? /* @__PURE__ */ jsx(WorkspaceVideoPreview, { ...props }) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/WorkspaceFileView.tsx
+function createFileViewRehypePlugins(workspace) {
+	return [...workspace ? createWorkspaceRehypePlugins(workspace.root, workspace.base) : Object.values(defaultRehypePlugins), rehypeSlug];
+}
+function createWorkspaceHeading(tag, prefix) {
+	const level = tag.slice(1);
+	return function WorkspaceHeading({ id, node: _node, ...props }) {
+		const fragment = typeof id === "string" ? id : void 0;
+		return React.createElement(tag, {
+			...props,
+			id: fragment ? `${prefix}-${fragment}` : void 0,
+			"data-streamdown": `heading-${level}`,
+			"data-workspace-fragment": fragment
+		});
+	};
+}
+/** Full-boundary workspace file preview composed from CodeBlock and AppTopBar. */
+function WorkspaceFileView({ file, path, isLoading, isRefreshing, leading, actions, onRefresh }) {
+	const [markdownView, setMarkdownView] = React.useState("preview");
+	const isMarkdown = isWorkspaceMarkdownPath(path);
+	const workspaceNavigation = useWorkspaceNavigationContext();
+	const restoration = useWorkspaceNavigationRestoration();
+	const currentEntry = workspaceNavigation?.navigation.current;
+	const currentDestination = currentEntry?.destination;
+	const fragment = currentDestination?.kind === "file" && currentDestination.path === path ? currentDestination.fragment : null;
+	const entryKey = currentEntry?.key ?? null;
+	const fileViewRef = React.useRef(null);
+	const scrollRef = React.useRef(null);
+	const handledFocusRequestRef = React.useRef(null);
+	const headingPrefix = React.useId().replaceAll(":", "");
+	const workspaceRehypePlugins = React.useMemo(() => createFileViewRehypePlugins(workspaceNavigation), [
+		workspaceNavigation?.base.kind,
+		workspaceNavigation?.base.path,
+		workspaceNavigation?.root
+	]);
+	const media = inferWorkspaceMedia(path, file?.asset?.mimeType ?? file?.info?.mimeType);
+	const assetUrl = useWorkspaceAssetUrl(file?.asset, media?.mimeType ?? "application/octet-stream");
+	const isPreparingAsset = Boolean(file?.asset && !assetUrl.url && !assetUrl.error);
+	const handleScroll = React.useCallback((event) => {
+		if (entryKey) restoration?.recordScroll(entryKey, event.currentTarget.scrollTop);
+	}, [entryKey, restoration]);
+	const markdownComponents = React.useMemo(() => ({
+		h1: createWorkspaceHeading("h1", headingPrefix),
+		h2: createWorkspaceHeading("h2", headingPrefix),
+		h3: createWorkspaceHeading("h3", headingPrefix),
+		h4: createWorkspaceHeading("h4", headingPrefix),
+		h5: createWorkspaceHeading("h5", headingPrefix),
+		h6: createWorkspaceHeading("h6", headingPrefix)
+	}), [headingPrefix]);
+	React.useEffect(() => {
+		setMarkdownView("preview");
+	}, [path]);
+	React.useEffect(() => {
+		if (!entryKey || isLoading || isPreparingAsset || !file) return;
+		const focusRequest = JSON.stringify([
+			entryKey,
+			path,
+			fragment
+		]);
+		if (handledFocusRequestRef.current === focusRequest) return;
+		const surface = fileViewRef.current;
+		if (!surface) return;
+		const saved = restoration?.get(entryKey);
+		const scrollSurface = surface.querySelector("[data-workspace-scroll]");
+		if (saved?.scrollTop !== void 0 && scrollSurface) scrollSurface.scrollTop = saved.scrollTop;
+		let target = null;
+		const focusDestination = saved?.focusDestination;
+		if (focusDestination && saved.focusScope !== "file") {
+			handledFocusRequestRef.current = focusRequest;
+			return;
+		}
+		if (focusDestination?.kind === "file") target = [...surface.querySelectorAll("[data-workspace-link=\"file\"]")].find((candidate) => candidate.dataset.workspacePath === focusDestination.path && (candidate.dataset.workspaceDestinationFragment || null) === focusDestination.fragment) ?? null;
+		if (!target && fragment) target = [...surface.querySelectorAll("[data-workspace-fragment]")].find((candidate) => candidate.dataset.workspaceFragment === fragment) ?? null;
+		target ??= surface.querySelector("[data-streamdown=\"heading-1\"]");
+		target ??= surface.querySelector("[data-workspace-file-heading]");
+		target ??= surface.querySelector("[data-workspace-focus-target]");
+		target ??= surface.querySelector("article");
+		if (!target) return;
+		if (!target.matches("a, button, input, select, textarea")) target.tabIndex = -1;
+		if (saved?.scrollTop === void 0 && !saved?.focusDestination) target.scrollIntoView({ block: "start" });
+		target.focus({ preventScroll: true });
+		handledFocusRequestRef.current = focusRequest;
+	}, [
+		entryKey,
+		file,
+		fragment,
+		isLoading,
+		isPreparingAsset,
+		path,
+		restoration
+	]);
+	const assetActions = file?.asset && assetUrl.url ? /* @__PURE__ */ jsx(WorkspaceAssetActions, {
+		fileName: file.name,
+		url: assetUrl.url,
+		downloadUrl: assetUrl.downloadUrl,
+		allowOpen: media?.mimeType !== "image/svg+xml"
+	}) : null;
+	const headerProps = {
+		path,
+		leading,
+		actions: isMarkdown ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			actions,
+			assetActions,
+			/* @__PURE__ */ jsx(AppTopBar.Button, {
+				label: "Preview Markdown",
+				"aria-pressed": markdownView === "preview",
+				onClick: () => setMarkdownView("preview"),
+				children: /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx(AppTopBar.Button, {
+				label: "View Markdown source",
+				"aria-pressed": markdownView === "source",
+				onClick: () => setMarkdownView("source"),
+				children: /* @__PURE__ */ jsx(CodeIcon, { "aria-hidden": "true" })
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [actions, assetActions] }),
+		isRefreshing,
+		onBack: workspaceNavigation?.navigation.canGoBack ? () => workspaceNavigation.navigation.goBack() : void 0,
+		onForward: workspaceNavigation?.navigation.canGoForward ? () => workspaceNavigation.navigation.goForward() : void 0,
+		onRefresh
+	};
+	if (isLoading || !file || file.error || assetUrl.error || isPreparingAsset || file.asset && !media || !file.asset && (file.content === null || file.content.length === 0)) {
+		let message = "File preview is unavailable.";
+		let role;
+		if (isLoading) message = "Loading file...";
+		else if (file?.error) {
+			message = `Could not preview this file: ${file.error}`;
+			role = "alert";
+		} else if (assetUrl.error) {
+			message = `Could not preview this file: ${assetUrl.error}`;
+			role = "alert";
+		} else if (isPreparingAsset) message = "Preparing file preview...";
+		else if (file?.asset && !media) message = "This media type is not supported.";
+		else if (media && file?.asset === null) message = "This workspace source did not provide preview data for this file.";
+		else if (file?.content === null) message = "This file has no text preview.";
+		else if (file?.content.length === 0) message = "This file is empty.";
+		return /* @__PURE__ */ jsxs("div", {
+			ref: fileViewRef,
+			className: "workspace-explorer__file",
+			"data-workspace-restoration-scope": "file",
+			children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx("div", {
+				className: "workspace-explorer__empty",
+				"data-workspace-focus-target": "",
+				role,
+				children: message
+			})]
+		});
+	}
+	if (file.asset && media && assetUrl.url) return /* @__PURE__ */ jsxs("div", {
+		ref: fileViewRef,
+		className: "workspace-explorer__file",
+		"data-workspace-restoration-scope": "file",
+		children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx(WorkspaceMediaPreview, {
+			asset: file.asset,
+			fileName: file.name,
+			media,
+			url: assetUrl.url,
+			downloadUrl: assetUrl.downloadUrl,
+			onScroll: handleScroll
+		})]
+	});
+	if (file.content === null) return null;
+	if (isMarkdown && markdownView === "preview") {
+		const skill = isWorkspaceSkillPath(file.path) ? parseWorkspaceSkill(file.content) : null;
+		const response = /* @__PURE__ */ jsx(MessageResponse, {
+			className: "workspace-explorer__markdown-content",
+			components: markdownComponents,
+			mode: "static",
+			rehypePlugins: workspaceRehypePlugins,
+			children: skill?.parsed?.body ?? file.content
+		}, path);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: fileViewRef,
+			className: "workspace-explorer__file",
+			"data-workspace-restoration-scope": "file",
+			children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				className: "workspace-explorer__markdown-scroll",
+				"data-workspace-scroll": "",
+				onScroll: handleScroll,
+				children: /* @__PURE__ */ jsxs("article", {
+					className: "workspace-explorer__markdown",
+					children: [skill ? /* @__PURE__ */ jsxs("header", {
+						className: "workspace-explorer__skill",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "workspace-explorer__skill-kicker",
+								children: "Agent Skill"
+							}),
+							skill.parsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "workspace-explorer__skill-name",
+									children: skill.parsed.properties.name
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "workspace-explorer__skill-description",
+									children: skill.parsed.properties.description
+								}),
+								/* @__PURE__ */ jsxs("dl", {
+									className: "workspace-explorer__skill-metadata",
+									children: [skill.parsed.properties.compatibility ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Compatibility" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.compatibility })] }) : null, skill.parsed.properties.allowedTools ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Allowed tools" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.allowedTools })] }) : null]
+								})
+							] }) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "workspace-explorer__skill-status",
+								"data-invalid": skill.validationErrors.length > 0 ? "" : void 0,
+								children: [skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), skill.validationErrors.length > 0 ? `${skill.validationErrors.length.toLocaleString()} validation ${skill.validationErrors.length === 1 ? "issue" : "issues"}` : "Valid Agent Skill"]
+							}),
+							skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx("ul", {
+								className: "workspace-explorer__skill-errors",
+								children: skill.validationErrors.map((error) => /* @__PURE__ */ jsx("li", { children: error }, error))
+							}) : null
+						]
+					}) : null, response]
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: fileViewRef,
+		className: "workspace-explorer__file",
+		"data-workspace-restoration-scope": "file",
+		children: /* @__PURE__ */ jsxs(CodeBlock, {
+			className: "workspace-explorer__code",
+			code: file.content,
+			"data-workspace-focus-target": "",
+			language: inferWorkspaceLanguage(file.path),
+			showLineNumbers: true,
+			children: [/* @__PURE__ */ jsx(WorkspaceHeader, {
+				...headerProps,
+				copyAction: /* @__PURE__ */ jsx(CodeBlockCopyButton, {
+					size: "icon-sm",
+					nativeButton: true,
+					render: /* @__PURE__ */ jsx(AppTopBar.Control, {})
+				})
+			}), /* @__PURE__ */ jsx(CodeBlockContainer, {
+				"data-workspace-scroll": "",
+				onScroll: handleScroll,
+				children: /* @__PURE__ */ jsx(CodeBlockContent, {})
+			})]
+		})
+	});
+}
+//#endregion
+export { WorkspaceFileView as t };