@parallelworks/ui 0.51.0 → 0.52.0

package/dist/editor/themes.js

@@ -9,9 +9,8 @@ var fallbacks = {};
 /** A token as Monaco takes it: a 6-digit hex. Monaco can't read display-p3, so
 *  a wide-gamut value is mapped back into sRGB; the default theme fills in for
 *  a host that sets no tokens. */
-function token(name, mode) {
-	const set = typeof window === "undefined" ? "" : getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-	const color = parseColor(expandShorthandHex(set));
+function token(style, name, mode) {
+	const color = parseColor(expandShorthandHex(style?.getPropertyValue(name).trim() ?? ""));
 	if (color) return toHex(color);
 	fallbacks[mode] ??= deriveTheme(schemeFor(DEFAULT_THEME, mode));
 	return fallbacks[mode][name];
@@ -37,27 +36,22 @@ var RULES = [
 	["delimiter", "--theme-code-text"],
 	["operators", "--theme-code-text"]
 ];
-function editorTheme(mode, disabled) {
-	const c = (name) => token(name, mode);
-	const foreground = disabled ? c("--theme-muted-text-color") : c("--theme-code-text");
-	const background = disabled ? c("--theme-input-disabled-bg") : c("--theme-panel-bg");
+function editorTheme(style, mode) {
+	const c = (name) => token(style, name, mode);
 	return {
 		base: mode === "dark" ? "vs-dark" : "vs",
 		inherit: true,
-		rules: disabled ? [{
-			token: "",
-			foreground: foreground.slice(1)
-		}] : RULES.map(([name, t, fontStyle]) => ({
+		rules: RULES.map(([name, t, fontStyle]) => ({
 			token: name,
 			foreground: c(t).slice(1),
 			...fontStyle ? { fontStyle } : {}
 		})),
 		colors: {
-			"editor.foreground": foreground,
-			"editor.background": background,
+			"editor.foreground": c("--theme-code-text"),
+			"editor.background": c("--theme-panel-bg"),
 			"editor.border": c("--theme-border"),
-			"editorCursor.foreground": disabled ? background : c("--theme-app"),
-			"editor.lineHighlightBackground": disabled ? background : c("--theme-hover"),
+			"editorCursor.foreground": c("--theme-app"),
+			"editor.lineHighlightBackground": c("--theme-hover"),
 			"editorLineNumber.foreground": c("--theme-placeholder"),
 			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
 			"editor.selectionBackground": c("--theme-accent-subtle"),
@@ -65,26 +59,60 @@ function editorTheme(mode, disabled) {
 		}
 	};
 }
-/** Monaco themes read from the document's tokens: call again after the host applies another theme. */
+var definedFor = /* @__PURE__ */ new WeakMap();
+/**
+* Defines the light and dark Monaco themes from the document's tokens. Call it again after the
+* host applies other tokens; it returns whether anything changed.
+*/
 function defineEditorThemes(monacoEditor) {
-	for (const mode of ["light", "dark"]) for (const disabled of [false, true]) monacoEditor.defineTheme(getThemeName(mode === "dark", disabled), editorTheme(mode, disabled));
+	const style = typeof window === "undefined" ? void 0 : getComputedStyle(document.documentElement);
+	const themes = ["light", "dark"].map((mode) => [mode, editorTheme(style, mode)]);
+	const snapshot = JSON.stringify(themes);
+	if (definedFor.get(monacoEditor) === snapshot) return false;
+	definedFor.set(monacoEditor, snapshot);
+	for (const [mode, data] of themes) monacoEditor.defineTheme(getThemeName(mode === "dark"), data);
+	return true;
 }
-/** Redefines the editor themes when the host applies other tokens to the document,
-*  and sets `current()` again, so an open editor follows a theme being edited. */
+var followers = /* @__PURE__ */ new Set();
+var observer;
+var frame = 0;
+function flush() {
+	frame = 0;
+	for (const follow of followers) follow();
+}
+/** Redefines the editor themes when the host applies other tokens or another scheme to the
+*  document, and sets `current()` again, so an open editor follows a theme being edited. */
 function followThemeTokens(monacoEditor, current) {
 	if (typeof MutationObserver === "undefined") return () => {};
-	const observer = new MutationObserver(() => {
-		defineEditorThemes(monacoEditor);
-		monacoEditor.setTheme(current());
-	});
-	observer.observe(document.documentElement, {
-		attributes: true,
-		attributeFilter: ["style"]
-	});
-	return () => observer.disconnect();
+	const follow = () => {
+		if (defineEditorThemes(monacoEditor)) monacoEditor.setTheme(current());
+	};
+	followers.add(follow);
+	if (!observer) {
+		observer = new MutationObserver(() => {
+			frame ||= requestAnimationFrame(flush);
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+	}
+	return () => {
+		followers.delete(follow);
+		if (followers.size === 0) {
+			observer?.disconnect();
+			observer = void 0;
+			cancelAnimationFrame(frame);
+			frame = 0;
+		}
+	};
 }
-function getThemeName(isDark, disabled) {
-	return `app-${isDark ? "dark" : "light"}${disabled ? "-disabled" : ""}`;
+function getThemeName(isDark) {
+	return `app-${isDark ? "dark" : "light"}`;
 }
 //#endregion
 export { defineEditorThemes, expandShorthandHex, followThemeTokens, getThemeName };

package/dist/editor/yaml.d.ts

@@ -7,7 +7,11 @@ export interface SchemasSettings {
     /** The schema itself, used instead of fetching `uri`. */
     schema?: object;
 }
-/** Adds JSON schemas that validate and complete YAML models whose URI matches. */
-export declare function configureEditorYaml(added: SchemasSettings[]): void;
+/**
+ * Adds JSON schemas that validate and complete YAML models whose URI matches. A schema with the
+ * `uri` of one already added replaces it, so calling this again, as a reload or a second mount
+ * does, adds nothing twice. Returns a function that removes these schemas.
+ */
+export declare function configureEditorYaml(added: SchemasSettings[]): () => void;
 /** Lets the loaded editor pick up schemas added before or after it loads. */
 export declare function onYamlSchemas(listener: (schemas: SchemasSettings[]) => void): void;

package/dist/editor/yaml.js

@@ -1,10 +1,19 @@
 //#region src/editor/yaml.ts
 var schemas = [];
 var apply;
-/** Adds JSON schemas that validate and complete YAML models whose URI matches. */
+/**
+* Adds JSON schemas that validate and complete YAML models whose URI matches. A schema with the
+* `uri` of one already added replaces it, so calling this again, as a reload or a second mount
+* does, adds nothing twice. Returns a function that removes these schemas.
+*/
 function configureEditorYaml(added) {
-	schemas = [...schemas, ...added];
+	const uris = new Set(added.map((schema) => schema.uri));
+	schemas = [...schemas.filter((schema) => !uris.has(schema.uri)), ...added];
 	apply?.(schemas);
+	return () => {
+		schemas = schemas.filter((schema) => !added.includes(schema));
+		apply?.(schemas);
+	};
 }
 /** Lets the loaded editor pick up schemas added before or after it loads. */
 function onYamlSchemas(listener) {

package/dist/file-explorer/FileExplorer.js

@@ -1,26 +1,28 @@
 import { cx } from "../cx.js";
-import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, CopyIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon, WarningIcon } from "../icons.js";
+import { buttonClasses } from "../components/buttonClasses.js";
+import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
-import { keyedByContent } from "../components/keys.js";
-import { buttonClasses } from "../components/buttonClasses.js";
 import { Loader } from "../components/Loader.js";
 import { toast } from "../components/Toast.js";
+import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { usePersistedState, useSlots, useStrings } from "../components/Provider.js";
 import { useCopy } from "../components/useCopy.js";
 import { Button } from "../components/Button.js";
+import { Callout } from "../components/Callout.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
 import { useContextMenu } from "../components/ContextMenu.js";
-import CopyToClipboard, { CopyCodeBlock } from "../components/CopyToClipboard.js";
+import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { CreateModal } from "../components/CreateModal.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { useSplitter } from "../components/splitter.js";
 import { formatBytes, formatDateTime } from "../format.js";
 import { RelativeTime } from "../components/relativeTime.js";
 import { RefreshButton } from "../components/RefreshButton.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { Table } from "../components/Table.js";
+import { Tabs } from "../components/Tabs.js";
 import { ListActionsHeader, ListSkeleton, listTableFixedProps, listTableProps } from "../list/ListTable.js";
 import { assembleRowMenu, useCopySubmenu } from "../list/rowMenu.js";
 import { calculateUploadNodesTotalSize, createTreeBuilder, getDirectoryNameError, getDirectoryObjectPath, getNodeChildren, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUriScheme, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes } from "./lib/utils.js";
@@ -42,12 +44,10 @@ import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRe
 import { DateTime } from "luxon";
 //#region src/file-explorer/FileExplorer.tsx
 function UriCard({ value }) {
-	const { common } = useStrings();
+	const { fileExplorer: t } = useStrings();
 	const scheme = getUriScheme(value);
-	return /* @__PURE__ */ jsxs(CopyToClipboard, {
-		text: value,
-		showIcon: false,
-		className: "group flex items-stretch rounded-lg border theme-border bg-(--theme-input-bg) overflow-hidden cursor-copy hover:border-(--theme-link)/50 transition-colors duration-150",
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-stretch overflow-hidden rounded-lg border theme-border bg-(--theme-input-bg)",
 		children: [
 			scheme && /* @__PURE__ */ jsx("span", {
 				className: "shrink-0 inline-flex items-center px-3 bg-(--theme-muted-panel-bg) border-r theme-border font-mono text-[11px] font-semibold uppercase tracking-widest theme-muted-text",
@@ -58,9 +58,11 @@ function UriCard({ value }) {
 				children: value
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0 inline-flex items-center justify-center px-3 border-l theme-border theme-muted-text group-hover:text-(--theme-link) group-hover:bg-(--theme-link)/5 transition-colors duration-150",
-				title: common.copyToClipboard,
-				children: /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5" })
+				className: "shrink-0 inline-flex items-center border-l theme-border px-1.5",
+				children: /* @__PURE__ */ jsx(CopyButton, {
+					text: value,
+					"aria-label": t.preview.copyUri
+				})
 			})
 		]
 	});
@@ -320,10 +322,10 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			return { corsError: false };
 		} catch (error) {
 			const isCorsError = error instanceof CorsError;
-			const errorMessage = isCorsError ? error.message || "CORS error" : error instanceof Error ? error.message : "Unknown error";
+			const errorMessage = error instanceof Error && error.message || t.messages.unknownError;
 			if (owns()) {
 				setListings((prev) => recordListingError(options?.replace ? clearListingsUnder(prev, node.path) : prev, node.path, errorMessage));
-				updateConnectionIssuesMessage((prev) => new Map(prev).set(nodeStorageId, `Failed to load contents for ${node.displayName || node.name}: ${errorMessage}`));
+				updateConnectionIssuesMessage((prev) => new Map(prev).set(nodeStorageId, t.messages.loadFailed(node.displayName || node.name, errorMessage)));
 				if (isCorsError) setHasCorsIssue((prev) => new Map(prev).set(nodeStorageId, true));
 			}
 			return { corsError: isCorsError };
@@ -687,22 +689,30 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 		}
 		if (chain.length === 0) return null;
 		return /* @__PURE__ */ jsx("nav", {
-			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[13px]",
-			children: chain.map((node, i) => {
-				const isLast = i === chain.length - 1;
-				const label = node.displayName || node.name;
-				return /* @__PURE__ */ jsxs("span", {
-					className: "flex min-w-0 items-center gap-1",
-					children: [i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color)" }), isLast ? /* @__PURE__ */ jsx("span", {
-						className: "truncate font-semibold text-(--theme-app)",
-						children: label
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => handleSelectTreeItem(node.path, node),
-						className: "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
-						children: label
-					})]
-				}, node.path);
+			"aria-label": t.chrome.location,
+			className: "flex min-w-0 flex-1 overflow-hidden text-[13px]",
+			children: /* @__PURE__ */ jsx("ol", {
+				className: "flex min-w-0 items-center gap-1",
+				children: chain.map((node, i) => {
+					const isLast = i === chain.length - 1;
+					const label = node.displayName || node.name;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 items-center gap-1",
+						children: [i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, {
+							"aria-hidden": "true",
+							className: "h-3 w-3 shrink-0 text-(--theme-muted-text-color) rtl:rotate-180"
+						}), isLast ? /* @__PURE__ */ jsx("span", {
+							"aria-current": "location",
+							className: "truncate font-semibold text-(--theme-app)",
+							children: label
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => handleSelectTreeItem(node.path, node),
+							className: "max-w-[16rem] cursor-pointer truncate text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+							children: label
+						})]
+					}, node.path);
+				})
 			})
 		});
 	};
@@ -1056,33 +1066,41 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											handleUploadInputChange(e.target.files, selectedNode);
 										}
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsx(Button, {
-										variant: "primary",
-										size: "sm",
-										"aria-label": t.createFolder.action,
-										icon: /* @__PURE__ */ jsx(FolderIcon, {}),
-										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										onClick: () => setCreateFolderTarget(selectedNode),
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: t.createFolder.action
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsx(Tooltip, {
+										content: t.createFolder.action,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": t.createFolder.action,
+											icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+											disabled: selectedNode.type === "file" || !selectedNode.storageId,
+											onClick: () => setCreateFolderTarget(selectedNode),
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: t.createFolder.action
+											})
 										})
 									}),
-									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-										"aria-label": t.chrome.upload,
-										className: buttonClasses({
-											variant: "primary",
-											size: "sm"
-										}),
-										disabled: selectedNode.type === "file" || !selectedNode.storageId,
-										children: [
-											/* @__PURE__ */ jsx(UploadIcon, {}),
-											/* @__PURE__ */ jsx("span", {
-												className: "hidden @4xl:inline",
-												children: t.chrome.upload
+									selectedNodeCanWrite && selectedNodeCanUpload && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+										content: t.chrome.upload,
+										side: "bottom",
+										children: /* @__PURE__ */ jsxs(Menu.Trigger, {
+											"aria-label": t.chrome.upload,
+											className: buttonClasses({
+												variant: selectedNode.type === "directory" ? "primary" : "outline",
+												size: "sm"
 											}),
-											/* @__PURE__ */ jsx(ChevronDownIcon, {})
-										]
+											disabled: selectedNode.type === "file" || !selectedNode.storageId,
+											children: [
+												/* @__PURE__ */ jsx(UploadIcon, {}),
+												/* @__PURE__ */ jsx("span", {
+													className: "hidden @4xl:inline",
+													children: t.chrome.upload
+												}),
+												/* @__PURE__ */ jsx(ChevronDownIcon, {})
+											]
+										})
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-36",
@@ -1094,21 +1112,25 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											children: t.chrome.selectFolder
 										})]
 									})] }),
-									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Menu.Trigger, {
-										"aria-label": common.download,
-										className: buttonClasses({
-											variant: "primary",
-											size: "sm"
-										}),
-										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
-										children: [
-											/* @__PURE__ */ jsx(DownloadIcon, {}),
-											/* @__PURE__ */ jsx("span", {
-												className: "hidden @4xl:inline",
-												children: common.download
+									/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+										content: common.download,
+										side: "bottom",
+										children: /* @__PURE__ */ jsxs(Menu.Trigger, {
+											"aria-label": common.download,
+											className: buttonClasses({
+												variant: selectedNode.type === "file" ? "primary" : "outline",
+												size: "sm"
 											}),
-											/* @__PURE__ */ jsx(ChevronDownIcon, {})
-										]
+											disabled: checkedItems.size === 0 && selectedNode.type !== "file" || hasFolderSelected() || !selectedNode.storageId,
+											children: [
+												/* @__PURE__ */ jsx(DownloadIcon, {}),
+												/* @__PURE__ */ jsx("span", {
+													className: "hidden @4xl:inline",
+													children: common.download
+												}),
+												/* @__PURE__ */ jsx(ChevronDownIcon, {})
+											]
+										})
 									}), /* @__PURE__ */ jsxs(MenuPopup, {
 										align: "end",
 										className: "w-72",
@@ -1121,7 +1143,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 												className: "text-sm text-center pb-1.5",
 												children: downloadCommand.label
 											}), /* @__PURE__ */ jsx(CopyCodeBlock, {
-												textToCopy: downloadCommandText,
+												text: downloadCommandText,
 												children: /* @__PURE__ */ jsx("div", {
 													className: "overflow-x-auto text-xs",
 													children: keyedByContent(downloadCommandText.split("\n"), (l) => l).map(({ key, item: line }) => /* @__PURE__ */ jsx("div", {
@@ -1132,28 +1154,37 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											})]
 										})] })]
 									})] }),
-									groups.length > 0 && selectedNodeCanManageAccess && /* @__PURE__ */ jsx(Button, {
-										variant: "primary",
-										size: "sm",
-										"aria-label": t.chrome.access,
-										icon: /* @__PURE__ */ jsx(AccessIcon, {}),
-										disabled: !selectedNode.storageId,
-										onClick: () => setAccessDrawerOpen(true),
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: t.chrome.manageAccess
+									groups.length > 0 && selectedNodeCanManageAccess && /* @__PURE__ */ jsx(Tooltip, {
+										content: t.chrome.manageAccess,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": t.chrome.access,
+											icon: /* @__PURE__ */ jsx(AccessIcon, {}),
+											disabled: !selectedNode.storageId,
+											onClick: () => setAccessDrawerOpen(true),
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: t.chrome.manageAccess
+											})
 										})
 									}),
-									selectedNodeCanDelete && /* @__PURE__ */ jsx(Button, {
-										variant: "danger",
-										size: "sm",
-										"aria-label": common.delete,
-										icon: /* @__PURE__ */ jsx(TrashIcon, {}),
-										disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
-										onClick: onDeleteClick,
-										children: /* @__PURE__ */ jsx("span", {
-											className: "hidden @4xl:inline",
-											children: common.delete
+									selectedNodeCanDelete && /* @__PURE__ */ jsx(Tooltip, {
+										content: common.delete,
+										side: "bottom",
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "outline",
+											size: "sm",
+											"aria-label": common.delete,
+											icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+											className: "*:text-(--theme-error-text)",
+											disabled: checkedItems.size === 0 && selectedNode.type !== "file" || !selectedNode.storageId,
+											onClick: onDeleteClick,
+											children: /* @__PURE__ */ jsx("span", {
+												className: "hidden @4xl:inline",
+												children: common.delete
+											})
 										})
 									})
 								]
@@ -1202,22 +1233,20 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							const createdDt = selectedNode.created ? DateTime.fromISO(selectedNode.created) : null;
 							const previewable = canPreview(selectedNode);
 							const effectiveTab = previewable ? detailTab : "details";
-							const tabClass = (active) => cx("mx-2.5 border-b-2 px-1 py-2.5 text-[13px] font-medium cursor-pointer transition-colors", active ? "theme-text border-(--theme-accent)" : "theme-muted-text border-transparent hover:theme-text");
 							return /* @__PURE__ */ jsxs("div", {
 								className: "flex h-full min-h-0 flex-col",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex shrink-0 items-center border-b theme-border px-3",
-									children: [/* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: tabClass(effectiveTab === "details"),
-										onClick: () => setDetailTab("details"),
-										children: t.preview.detailsTab
-									}), previewable && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: tabClass(effectiveTab === "preview"),
-										onClick: () => setDetailTab("preview"),
-										children: t.preview.previewTab
-									})]
+								children: [/* @__PURE__ */ jsx(Tabs, {
+									label: selectedNode.name,
+									items: [{
+										value: "details",
+										label: t.preview.detailsTab
+									}, ...previewable ? [{
+										value: "preview",
+										label: t.preview.previewTab
+									}] : []],
+									value: effectiveTab,
+									onValueChange: setDetailTab,
+									className: "shrink-0 px-3"
 								}), effectiveTab === "preview" && previewable ? /* @__PURE__ */ jsx(FilePreviewInline, {
 									node: selectedNode,
 									storage: selectedStorage ?? null,
@@ -1274,12 +1303,12 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 												node: selectedNode,
 												onShare: onShareFileButtonClick
 											}), /* @__PURE__ */ jsx(InfoTip, {
-												text: "This will generate a pre-signed URL for this file. Anyone with this link can temporarily access and download the file, even if they don't have an account. The link will automatically expire after 12 hours.",
+												text: t.chrome.shareHelp,
 												side: "right"
 											})]
 										}),
 										/* @__PURE__ */ jsxs("div", {
-											className: "px-6 py-5 mt-5 border-t theme-border",
+											className: cx("px-6 py-5", (uris.length > 0 || selectedNodeCanShare) && "mt-5 border-t theme-border"),
 											children: [/* @__PURE__ */ jsx("h3", {
 												className: "text-[11px] font-semibold uppercase tracking-widest theme-muted-text mb-3",
 												children: t.chrome.details
@@ -1388,8 +1417,8 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "text-sm flex flex-col gap-2 mt-2 text-left",
 					children: [
-						/* @__PURE__ */ jsx("ul", {
-							className: "list-disc pl-5 max-h-40 overflow-auto theme-muted-panel py-1",
+						/* @__PURE__ */ jsx("div", {
+							className: "max-h-40 overflow-auto theme-muted-panel py-1 pl-3",
 							children: pendingUpload?.uploadNodes && renderUploadNodes(pendingUpload.uploadNodes)
 						}),
 						/* @__PURE__ */ jsxs("div", { children: [
@@ -1409,26 +1438,16 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 								}),
 								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-amber-800 font-semibold"),
+									className: cx(isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && "text-(--theme-warning-text) font-semibold"),
 									children: formatBytes(pendingUpload?.totalSize ?? 0)
 								})
 							]
 						}),
-						isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && /* @__PURE__ */ jsx("div", {
-							className: "mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg",
-							children: /* @__PURE__ */ jsxs("div", {
-								className: "flex items-start gap-2",
-								children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-600 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-									className: "text-amber-800",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "font-semibold mb-1",
-										children: t.confirmUpload.sizeLimitTitle
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "text-sm",
-										children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatBytes(pendingUpload?.totalSize ?? 0), formatBytes(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
-									})]
-								})]
-							})
+						isUploadSizeExceeded(pendingUpload?.totalSize ?? 0) && /* @__PURE__ */ jsxs(Callout, {
+							tone: "warning",
+							title: t.confirmUpload.sizeLimitTitle,
+							className: "mt-3",
+							children: [/* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitBody(formatBytes(pendingUpload?.totalSize ?? 0), formatBytes(MAX_UPLOAD_SIZE)) }), /* @__PURE__ */ jsx("p", { children: t.confirmUpload.sizeLimitHint })]
 						})
 					]
 				})

package/dist/file-explorer/FileExplorerContext.js

@@ -1,5 +1,5 @@
-import { keyedByContent } from "../components/keys.js";
 import { toast } from "../components/Toast.js";
+import { keyedByContent } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
 import { mapWithConcurrency } from "./lib/batch.js";
 import { calculateUploadNodesTotalSize, getUploadSessionETA, removeLeadingSlash } from "./lib/utils.js";

package/dist/file-explorer/FilePreview/StreamedBadge.js

@@ -1,4 +1,6 @@
+import { cx } from "../../cx.js";
 import { LockIcon } from "../../icons.js";
+import { toneSurface } from "../../components/tone.js";
 import { useStrings } from "../../components/Provider.js";
 import { InfoTip } from "../../components/InfoTip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +9,7 @@ function StreamedBadge() {
 	const t = useStrings().fileExplorer;
 	return /* @__PURE__ */ jsxs(InfoTip, {
 		text: t.preview.streamedTooltip,
-		className: "shrink-0 gap-1 rounded-full border border-green-500/40 bg-green-500/15 px-2 py-0.5 text-[11px] text-green-600",
+		className: cx("shrink-0 gap-1 rounded-full border px-2 py-0.5 text-[11px]", toneSurface.success),
 		children: [/* @__PURE__ */ jsx(LockIcon, { className: "h-2.5 w-2.5" }), t.preview.streamed]
 	});
 }

package/dist/file-explorer/FilePreview/Viewer.js

@@ -1,7 +1,7 @@
 import { cx } from "../../cx.js";
 import { DownloadIcon, FileIcon, LockIcon, MusicIcon, ZipIcon } from "../../icons.js";
-import { positionKeys, withPositionKeys } from "../../components/keys.js";
 import { Loader } from "../../components/Loader.js";
+import { positionKeys, withPositionKeys } from "../../components/keys.js";
 import { useStrings } from "../../components/Provider.js";
 import { Button } from "../../components/Button.js";
 import Markdown from "../../components/Markdown.js";
@@ -439,7 +439,7 @@ function NotebookOutputView({ output }) {
 		children: joinSource(output.text)
 	});
 	if (output.output_type === "error") return /* @__PURE__ */ jsx("pre", {
-		className: "mt-2 overflow-auto rounded-lg bg-red-500/15 px-3 py-2 font-mono text-[11px] text-red-500",
+		className: "mt-2 overflow-auto rounded-lg bg-(--theme-error-muted) px-3 py-2 font-mono text-[11px] text-(--theme-error-text)",
 		children: stripAnsi((output.traceback ?? []).join("\n"))
 	});
 	const plain = output.data?.["text/plain"];

package/dist/file-explorer/FilePreview/index.js

@@ -1,8 +1,8 @@
 import { cx } from "../../cx.js";
 import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, DownloadIcon, FileIcon, LinkIcon, ZoomInIcon, ZoomOutIcon } from "../../icons.js";
 import { usePersistedState, useStrings } from "../../components/Provider.js";
-import { Modal } from "../../components/Modal.js";
 import { IconButton } from "../../components/IconButton.js";
+import { Modal } from "../../components/Modal.js";
 import { formatBytes } from "../../format.js";
 import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { getPreviewKind } from "./previewType.js";
@@ -20,7 +20,7 @@ function isDocumentView(kind) {
 function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigate, onClose, onDownload, onCopyUri }) {
 	const t = useStrings().fileExplorer;
 	const { common } = useStrings();
-	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "quicklook");
+	const [style, setStyle] = usePersistedState("fileExplorer.previewStyle", "compact");
 	const [zoom, setZoom] = useState(100);
 	const { url, loading: urlLoading, error: urlError } = usePresignedUrl(node, getPresignedUrl, {
 		enabled: open,
@@ -67,8 +67,8 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 						value: style,
 						onValueChange: setStyle,
 						options: [{
-							value: "quicklook",
-							label: t.preview.quickLook
+							value: "compact",
+							label: t.preview.compact
 						}, {
 							value: "overlay",
 							label: t.preview.fullWindow