@kortix/ui 0.14.8 → 0.14.10

package/dist/files/runtime/hooks/use-shared-image.js

@@ -0,0 +1,177 @@
+'use client';
+import { createImageCache, isRuntimeStartingError, isSessionAttachmentRef } from '@kortix/sdk';
+import { binaryBlobKeys, useRuntimeStore } from '@kortix/sdk/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { useCurrentAccountStore } from '../../../internal/stores/current-account-store.js';
+import { useBinaryBlob } from './use-binary-blob.js';
+/**
+ * The page's shared images (R38). Two stores, one per key:
+ *
+ * - **By path: React Query's blob cache** (`useBinaryBlob`, `binaryBlobKeys`).
+ *   The image card, the full-screen viewer, a `show` card and a Files preview
+ *   read ONE query per sandbox file. Every invalidation that already exists
+ *   reaches them all: `file.edited`, the turn end, the show card's Refresh and
+ *   the viewer's Refresh refetch it, and a file rewritten in place draws its
+ *   new bytes everywhere (`keepBlobIfUnchanged` keeps unchanged bytes the same
+ *   Blob, so nothing reloads for them).
+ * - **By sha256: `byDigest`.** Bytes whose digest the tool output named, after
+ *   the digest is checked against the bytes. An image already loaded under one
+ *   path draws at once under another path with the same bytes (a Drive copy),
+ *   with no read. Content-addressed and verified, so it never goes stale.
+ *   Evicted least recently used past 64 images or 256 MiB.
+ *
+ * One object URL per Blob, shared by every surface that draws it, so a second
+ * surface never decodes the image again. It is revoked about 1 s after the last
+ * surface lets it go.
+ *
+ * Bound: an image on screen is never evicted. Its Blob stays while a surface
+ * draws it, so memory is the images mounted at once plus `byDigest`'s 256 MiB.
+ * This is the same as before R38, when each mount held its own blob URL.
+ */
+const byDigest = createImageCache({ maxEntries: 64, maxBytes: 256 * 1024 * 1024 });
+// One object URL per Blob. Revoked a moment after its last release, so a
+// StrictMode remount (release, then acquire in the same tick) and a render that
+// never commits keep a live URL instead of a revoked one.
+const urls = new Map();
+const naturalRatios = new WeakMap();
+const REVOKE_GRACE_MS = 1000;
+function urlFor(blob) {
+    let held = urls.get(blob);
+    if (!held) {
+        held = { url: URL.createObjectURL(blob), refs: 0 };
+        urls.set(blob, held);
+        scheduleRevoke(blob);
+    }
+    return held.url;
+}
+function scheduleRevoke(blob) {
+    setTimeout(() => {
+        const held = urls.get(blob);
+        if (!held || held.refs > 0)
+            return;
+        URL.revokeObjectURL(held.url);
+        urls.delete(blob);
+    }, REVOKE_GRACE_MS);
+}
+/**
+ * Drops every shared image: the digests, and the URL of every image no surface
+ * draws (the rest go when their surface unmounts). Runs on a sign-out and an
+ * account switch.
+ */
+export function clearSharedImages() {
+    byDigest.clear();
+    for (const [blob, held] of urls) {
+        if (held.refs > 0)
+            continue;
+        URL.revokeObjectURL(held.url);
+        urls.delete(blob);
+    }
+}
+// A sign-out clears the selected account; an account switch changes it.
+useCurrentAccountStore.subscribe((state, previous) => {
+    if (state.selectedAccountId !== previous.selectedAccountId)
+        clearSharedImages();
+});
+/** The sha256 of each Blob read and hashed. */
+const blobDigests = new WeakMap();
+/** The bytes a digest disagreed with, read again once each (never a loop). */
+const rereadOnce = new WeakSet();
+/** `useBinaryBlob`'s query key for `path`. */
+function blobKey(serverUrl, path) {
+    return isSessionAttachmentRef(path) ? ['session-attachment', 'blob', path] : binaryBlobKeys.file(serverUrl, path);
+}
+/** The lowercase hex sha256 of `blob`, or null when it cannot be computed (no Web Crypto, over 32 MiB). */
+async function digestOf(blob) {
+    if (blob.size > 32 * 1024 * 1024 || !globalThis.crypto?.subtle)
+        return null;
+    const hash = await globalThis.crypto.subtle.digest('SHA-256', await blob.arrayBuffer());
+    return [...new Uint8Array(hash)].map((byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/**
+ * The image at `path` (a sandbox path or a stored attachment ref), or the
+ * bytes with digest `sha256`. A digest already in `byDigest` draws at once and
+ * reads nothing. Otherwise the file is read through its one shared query, and
+ * bytes whose digest matches `sha256` join `byDigest`.
+ */
+export function useSharedImage(path, sha256, options) {
+    const revalidate = !!options?.revalidate;
+    const serverUrl = useRuntimeStore((s) => s.getActiveServerUrl());
+    const read = useCallback(() => (sha256 ? byDigest.get({ sha256 })?.value : undefined), [sha256]);
+    const pinned = useSyncExternalStore(byDigest.subscribe, read, read);
+    const file = useBinaryBlob(path && (!pinned || revalidate) ? path : null, { imageWait: true });
+    const queryClient = useQueryClient();
+    // Re-renders once a read's digest is known.
+    const [, setDigested] = useState(0);
+    const readDigest = file.blob ? blobDigests.get(file.blob) : undefined;
+    // The file's own bytes win once known to differ from the pinned digest.
+    const blob = revalidate && file.blob && readDigest !== undefined && readDigest !== sha256 ? file.blob : (pinned ?? file.blob);
+    // Trust a digest only once the bytes match it: the file may have changed
+    // after the tool hashed it, and a wrong entry would draw under every later
+    // lookup. Cached bytes that do not match are read again once: the output
+    // names newer bytes than the cache holds (the file was rewritten).
+    useEffect(() => {
+        const read = file.blob;
+        if (!read || !sha256 || !path)
+            return;
+        let live = true;
+        void digestOf(read).then((digest) => {
+            if (!live || digest === null)
+                return;
+            blobDigests.set(read, digest);
+            setDigested((n) => n + 1);
+            if (digest === sha256)
+                byDigest.put({ sha256 }, read, read.size);
+            else if (!revalidate && !rereadOnce.has(read)) {
+                rereadOnce.add(read);
+                void queryClient.invalidateQueries({ queryKey: blobKey(serverUrl, path) });
+            }
+        });
+        return () => {
+            live = false;
+        };
+    }, [file.blob, sha256, path, queryClient, serverUrl, revalidate]);
+    // An image on screen is never evicted from `byDigest`: held while drawn.
+    useEffect(() => {
+        const entry = sha256 && pinned ? byDigest.get({ sha256 }) : undefined;
+        return entry ? byDigest.retain(entry) : undefined;
+    }, [sha256, pinned]);
+    // Held while drawn, so the URL is never revoked under an <img>.
+    useEffect(() => {
+        if (!blob)
+            return;
+        const held = urls.get(blob);
+        if (!held)
+            return;
+        held.refs++;
+        return () => {
+            held.refs--;
+            if (held.refs === 0)
+                scheduleRevoke(blob);
+        };
+    }, [blob]);
+    const starting = !!file.error && isRuntimeStartingError(file.error) && !file.waitedOut;
+    const retry = useCallback(() => {
+        if (!path)
+            return;
+        // A reset, not a refetch: the wait's failure count starts over.
+        void queryClient.resetQueries({ queryKey: blobKey(serverUrl, path) });
+    }, [path, queryClient, serverUrl]);
+    const onNaturalSize = useCallback((width, height) => {
+        if (blob)
+            naturalRatios.set(blob, `${width} / ${height}`);
+    }, [blob]);
+    return useMemo(() => ({
+        // The read's own URL covers a render with no Blob in hand (a server render).
+        url: blob ? urlFor(blob) : file.blobUrl,
+        naturalRatio: blob ? (naturalRatios.get(blob) ?? null) : null,
+        loading: !blob && !!path && (file.isLoading || starting),
+        error: blob || starting ? null : file.waitedOut ? 'unavailable' : file.error,
+        retry,
+        onNaturalSize,
+    }), [blob, file.blobUrl, file.isLoading, file.error, file.waitedOut, starting, path, retry, onNaturalSize]);
+}
+/** The full-screen viewer's image (`FileSource.useSharedImage`): a digest draws at once, the file is always read too. */
+export function useViewerImage(path, sha256) {
+    return useSharedImage(path, sha256, { revalidate: true });
+}

package/dist/files/viewer/file-content-renderer.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
+import { type Variant } from 'motion/react';
+/**
+ * The caption's disclosure motion (kortix-brand motion.md: a disclosure is
+ * `duration-moderate`, ease-out; the exit runs faster, at `duration-normal`).
+ * Height and opacity together, so the image above shrinks and grows with it.
+ * Reduced motion: no transition, the caption is simply there or not.
+ */
+export declare function captionMotion(reduceMotion: boolean): {
+    expanded: Variant;
+    collapsed: Variant;
+};
 export interface FileContentRendererProps {
     /** Path to the file to render */
     filePath: string;
     /** Whether to show the compact header bar with file name, toggles, save/download buttons */
     showHeader?: boolean;
+    /** Render the header's edit controls into this host toolbar instead of a
+     *  row of their own (`FilePreviewModal`). The host owns the path and Download. */
+    headerSlot?: HTMLElement | null;
     /** Additional header actions (rendered after built-in buttons) */
     headerActions?: React.ReactNode;
     /** Callback when unsaved state changes */
@@ -44,5 +58,12 @@ export interface FileContentRendererProps {
      *  their own bytes (xlsx, sqlite, the HTML frame), which a cache refetch
      *  cannot reach. */
     reloadKey?: number;
+    /**
+     * A full-screen viewer (the preview modal, the panel's file preview) shows
+     * an image's caption under it when it was opened with one (a generated
+     * image's prompt and model). Off for every embedded render: a Files grid
+     * tile, a `show` card.
+     */
+    showCaption?: boolean;
 }
-export declare function FileContentRenderer({ filePath, showHeader, headerActions, onUnsavedChange, onSaved, className, errorFallback, targetLine, readOnly, markdownPreview, onMarkdownPreviewChange, onStatusChange, imageControls, fitOnOpen, findText, codeEditorEditorClassName, reloadKey, }: FileContentRendererProps): React.JSX.Element;
+export declare function FileContentRenderer({ filePath, showHeader, headerSlot, headerActions, onUnsavedChange, onSaved, className, errorFallback, targetLine, readOnly, markdownPreview, onMarkdownPreviewChange, onStatusChange, imageControls, fitOnOpen, findText, codeEditorEditorClassName, reloadKey, showCaption, }: FileContentRendererProps): React.JSX.Element;

package/dist/files/viewer/file-content-renderer.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../i18n/index.js';
 import { ErrorBoundary } from '../../primitives/error-boundary.js';
 import { CodeEditor } from '../editor/lazy-code-editor.js';
@@ -7,16 +7,20 @@ import { MarkdownWithFrontmatter } from '../../markdown/markdown-frontmatter.js'
 import { Button } from '../../primitives/button.js';
 import { InfoBanner } from '../../primitives/info-banner.js';
 import Loading from '../../primitives/loading.js';
+import { ImageUnavailable } from '../renderers/image-frame.js';
 import { MermaidDiagram } from '../renderers/mermaid/mermaid-diagram.js';
 import { cn } from '../../lib/utils.js';
 import { toSandboxAbsolutePath } from '@kortix/sdk';
 import { GitDiffIcon as FileDiff, FileXIcon as FileWarning, FileXIcon as FileX, } from '@phosphor-icons/react';
-import { lazy, Suspense, useCallback } from 'react';
+import { lazy, Suspense, useCallback, useMemo, useState } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { Disclosure, DisclosureContent } from '../../primitives/disclosure.js';
 // Direct module import, not the feature barrel: the barrel re-exports THIS file.
 import { HtmlPreview } from './html-preview.js';
 import { JsonTreeView } from './json-tree-view.js';
 import { FileHeader } from './file-header.js';
 import { useFileContentState } from './use-file-content-state.js';
+import { useFileCaption } from '../../internal/stores/file-preview-store.js';
 import { Download } from '../../internal/icons/download.js';
 // ---------------------------------------------------------------------------
 // Lazy-load heavy renderers to keep initial bundle small
@@ -39,13 +43,42 @@ const ZipRenderer = lazy(() => import('../renderers/zip/zip-renderer.js').then((
 function RendererFallback() {
     return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }) }));
 }
+/** kortix-brand `motion.easing.out`: enter and exit. */
+const EASE_OUT = [0, 0, 0.2, 1];
+/**
+ * The caption's disclosure motion (kortix-brand motion.md: a disclosure is
+ * `duration-moderate`, ease-out; the exit runs faster, at `duration-normal`).
+ * Height and opacity together, so the image above shrinks and grows with it.
+ * Reduced motion: no transition, the caption is simply there or not.
+ */
+export function captionMotion(reduceMotion) {
+    const enter = reduceMotion ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT };
+    const exit = reduceMotion ? { duration: 0 } : { duration: 0.15, ease: EASE_OUT };
+    return {
+        expanded: { height: 'auto', opacity: 1, transition: enter },
+        collapsed: { height: 0, opacity: 0, transition: exit },
+    };
+}
+/**
+ * An image with its caption under it: a generated image's prompt and the model
+ * that made it, in a disclosure the viewer's details toggle (ⓘ, the trigger on
+ * the zoom shelf, `ImageRenderer` `info`) opens. Only an image opened with a
+ * caption has one; any other file renders exactly as without it.
+ */
+function CaptionedImage({ caption, open, onOpenChange, children, }) {
+    const reduceMotion = !!useReducedMotion();
+    const variants = useMemo(() => captionMotion(reduceMotion), [reduceMotion]);
+    if (!caption)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onOpenChange, variants: variants, className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1", children: children }), _jsx(DisclosureContent, { className: "shrink-0", children: _jsxs("div", { "data-file-caption": "", className: "border-border max-h-32 overflow-y-auto border-t px-4 py-3", children: [_jsx("p", { className: "text-foreground text-sm text-pretty", children: caption.text }), caption.model ? _jsx("p", { className: "text-muted-foreground mt-1 font-mono text-xs", children: caption.model }) : null] }) })] }));
+}
 /** Shared "file does not exist" UI shown when a file cannot be loaded. */
 function FileNotFoundState({ filePath }) {
     const tHardcodedUi = useTranslations('hardcodedUi');
     return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "bg-muted/50 flex h-12 w-12 items-center justify-center rounded-sm", children: _jsx(FileX, { className: "text-muted-foreground/40 h-6 w-6" }) }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line195JsxTextFileNotFound') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsx("p", { className: "text-muted-foreground/40 max-w-xs text-xs", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line201JsxTextThisFileDoesNotExistOrMayHave') })] }));
 }
-export function FileContentRenderer({ filePath, showHeader = true, headerActions, onUnsavedChange, onSaved, className, errorFallback, targetLine, readOnly = false, markdownPreview, onMarkdownPreviewChange, onStatusChange, imageControls, fitOnOpen = false, findText, codeEditorEditorClassName, reloadKey = 0, }) {
-    const { source, Breadcrumbs, fileContent, isLoading, error, contentRevision, fetchRevision, hasUnsavedChanges, setHasUnsavedChanges, isSaving, saveFlash, latestContentRef, discardKey, fileName, isHeicImage, language, fileCategory, isMarkdownFile, isMermaidFile, hasPreviewToggle, isJsonFile, isHtmlFile, isMarkdownPreview, setIsMarkdownPreview, isJsonTreeView, setIsJsonTreeView, isHtmlPreview, setIsHtmlPreview, fileDiagErrorCount, fileDiagWarningCount, fileDiagnostics, tHardcodedUi, tI18nHardcoded, blobUrl, rawBlob, blobLoading, blobError, heicImageUrl, heicConverting, displayContent, handleDownload, handleSave, handleDiscard, handleEditorChange, imageDataUrl, needsBlob, isContentReady, contentError, showLoadingState, isSandboxWaking, isNotFound, } = useFileContentState({
+export function FileContentRenderer({ filePath, showHeader = true, headerSlot, headerActions, onUnsavedChange, onSaved, className, errorFallback, targetLine, readOnly = false, markdownPreview, onMarkdownPreviewChange, onStatusChange, imageControls, fitOnOpen = false, findText, codeEditorEditorClassName, reloadKey = 0, showCaption = false, }) {
+    const { source, Breadcrumbs, fileContent, isLoading, error, contentRevision, fetchRevision, hasUnsavedChanges, setHasUnsavedChanges, isSaving, saveFlash, latestContentRef, discardKey, fileName, isHeicImage, language, fileCategory, isMarkdownFile, isMermaidFile, hasPreviewToggle, isJsonFile, isHtmlFile, isMarkdownPreview, setIsMarkdownPreview, isJsonTreeView, setIsJsonTreeView, isHtmlPreview, setIsHtmlPreview, fileDiagErrorCount, fileDiagWarningCount, fileDiagnostics, tHardcodedUi, tI18nHardcoded, blobUrl, rawBlob, blobLoading, blobError, sharedImagePath, retrySharedImage, heicImageUrl, heicConverting, displayContent, handleDownload, handleSave, handleDiscard, handleEditorChange, imageDataUrl, needsBlob, isContentReady, contentError, showLoadingState, isSandboxWaking, isNotFound, } = useFileContentState({
         filePath,
         onUnsavedChange,
         onSaved,
@@ -55,6 +88,14 @@ export function FileContentRenderer({ filePath, showHeader = true, headerActions
         onStatusChange,
         targetLine,
     });
+    const storedCaption = useFileCaption(filePath);
+    const caption = showCaption ? storedCaption : undefined;
+    // The caption is hidden until the details toggle opens it; per file, so the next image starts closed.
+    const tImageGen = useTranslations('imageGen');
+    const [captionOpenFor, setCaptionOpenFor] = useState(null);
+    const captionOpen = captionOpenFor === filePath;
+    const onCaptionOpenChange = (open) => setCaptionOpenFor(open ? filePath : null);
+    const imageInfo = caption ? { pressed: captionOpen, label: tImageGen('details') } : undefined;
     const bytesOnly = !!source.bytesOnly;
     // The table has no lines: a jump to a line (a content-search match) opens
     // CSV and TSV in the code editor.
@@ -86,10 +127,12 @@ export function FileContentRenderer({ filePath, showHeader = true, headerActions
         targetLine,
     };
     const discardLabel = tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line600JsxAttrTitleDiscardChanges');
-    return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [_jsx(FileHeader, { showHeader, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi }), _jsx("div", { className: cn('flex-1', readOnly ? 'overflow-auto' : 'overflow-hidden'), children: _jsxs(ErrorBoundary, { fallback: () => (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "bg-destructive/10 flex h-12 w-12 items-center justify-center rounded-sm", children: _jsx(FileWarning, { className: "text-destructive/50 h-6 w-6" }) }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tI18nHardcoded.raw('autoFeaturesFileViewerFileContentRendererJsxTextCouldnT794ae800') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" }), tI18nHardcoded.raw('i18nComplete.textd6eafe823591')] })] })), children: [showLoadingState && (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }) })), contentError && !showLoadingState && isSandboxWaking && (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tI18nHardcoded.raw('i18nComplete.text5e3de76869f3') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsx("p", { className: "text-muted-foreground/40 max-w-xs text-xs", children: tI18nHardcoded.raw('i18nComplete.textd4707c58c4a4') })] })), contentError &&
+    return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [_jsx(FileHeader, { showHeader, headerSlot, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi }), _jsx("div", { className: cn('flex-1', readOnly ? 'overflow-auto' : 'overflow-hidden'), children: _jsxs(ErrorBoundary, { fallback: () => (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "bg-destructive/10 flex h-12 w-12 items-center justify-center rounded-sm", children: _jsx(FileWarning, { className: "text-destructive/50 h-6 w-6" }) }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tI18nHardcoded.raw('autoFeaturesFileViewerFileContentRendererJsxTextCouldnT794ae800') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" }), tI18nHardcoded.raw('i18nComplete.textd6eafe823591')] })] })), children: [showLoadingState && (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }) })), contentError && !showLoadingState && isSandboxWaking && (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tI18nHardcoded.raw('i18nComplete.text5e3de76869f3') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsx("p", { className: "text-muted-foreground/40 max-w-xs text-xs", children: tI18nHardcoded.raw('i18nComplete.textd4707c58c4a4') })] })), contentError &&
                             !showLoadingState &&
                             !isSandboxWaking &&
-                            (errorFallback ? (errorFallback(contentError, filePath)) : isNotFound ? (_jsx(FileNotFoundState, { filePath: filePath })) : (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "bg-destructive/10 flex h-12 w-12 items-center justify-center rounded-sm", children: _jsx(FileWarning, { className: "text-destructive/50 h-6 w-6" }) }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line692JsxTextFailedToLoadFile') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsx("p", { className: "text-muted-foreground/60 max-w-sm text-xs", children: contentError })] }))), !isLoading && !error && imageDataUrl && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ImageRenderer, { url: imageDataUrl, className: "h-full", fileName: fileName, controls: imageControls }) })), isHeicImage && (blobLoading || heicConverting) && _jsx(RendererFallback, {}), isHeicImage && !blobLoading && !blobError && heicImageUrl && !heicConverting && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ImageRenderer, { url: heicImageUrl, className: "h-full", fileName: fileName, controls: imageControls }) })), isContentReady && fileCategory === 'pdf' && fileContent?.content && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(PdfRenderer, { fileContent: fileContent.content, fileName: fileName, className: "h-full", fitOnOpen: fitOnOpen, findText: findText, showDownload: false }) })), isContentReady && fileCategory === 'docx' && rawBlob && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(DocxRenderer, { blob: rawBlob, fileName: fileName, className: "h-full", showDownload: false }) })), isContentReady && fileCategory === 'zip' && rawBlob && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ZipRenderer, { blob: rawBlob, fileName: fileName, className: "h-full" }, filePath) })), !isLoading && !error && !isNotFound && fileCategory === 'xlsx' && (!bytesOnly || blobUrl) && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(XlsxRenderer, { 
+                            (sharedImagePath && !isNotFound ? (
+                            // An image never shows the read's raw error text (R38).
+                            _jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsx(ImageUnavailable, { onRetry: retrySharedImage }) })) : errorFallback ? (errorFallback(contentError, filePath)) : isNotFound ? (_jsx(FileNotFoundState, { filePath: filePath })) : (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "bg-destructive/10 flex h-12 w-12 items-center justify-center rounded-sm", children: _jsx(FileWarning, { className: "text-destructive/50 h-6 w-6" }) }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line692JsxTextFailedToLoadFile') }), _jsx("p", { className: "text-muted-foreground/50 max-w-sm font-mono text-xs break-all", children: filePath }), _jsx("p", { className: "text-muted-foreground/60 max-w-sm text-xs", children: contentError })] }))), !isLoading && !error && imageDataUrl && (_jsx(CaptionedImage, { caption: caption, open: captionOpen, onOpenChange: onCaptionOpenChange, children: _jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ImageRenderer, { url: imageDataUrl, className: "h-full", fileName: fileName, controls: imageControls, info: imageInfo }) }) })), isHeicImage && (blobLoading || heicConverting) && _jsx(RendererFallback, {}), isHeicImage && !blobLoading && !blobError && heicImageUrl && !heicConverting && (_jsx(CaptionedImage, { caption: caption, open: captionOpen, onOpenChange: onCaptionOpenChange, children: _jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ImageRenderer, { url: heicImageUrl, className: "h-full", fileName: fileName, controls: imageControls, info: imageInfo }) }) })), isContentReady && fileCategory === 'pdf' && fileContent?.content && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(PdfRenderer, { fileContent: fileContent.content, fileName: fileName, className: "h-full", fitOnOpen: fitOnOpen, findText: findText, showDownload: false }) })), isContentReady && fileCategory === 'docx' && rawBlob && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(DocxRenderer, { blob: rawBlob, fileName: fileName, className: "h-full", showDownload: false }) })), isContentReady && fileCategory === 'zip' && rawBlob && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(ZipRenderer, { blob: rawBlob, fileName: fileName, className: "h-full" }, filePath) })), !isLoading && !error && !isNotFound && fileCategory === 'xlsx' && (!bytesOnly || blobUrl) && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(XlsxRenderer, { 
                                 // A bytes-only source hands the workbook over as a blob URL;
                                 // the renderer reads a sandbox path only for a session.
                                 filePath: bytesOnly ? blobUrl : filePath, fileName: fileName, className: "h-full", showDownload: false }, `xlsx-${filePath}-${contentRevision}-${reloadKey}`) })), !isLoading && !error && !isNotFound && fileCategory === 'sqlite' && (!bytesOnly || rawBlob) && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(SqliteRenderer, { filePath: filePath, fileName: fileName, className: "h-full", readOnly: readOnly, ...(bytesOnly ? { bytes: rawBlob, onSave: saveThroughSource } : {}) }, `sqlite-${filePath}-${contentRevision}-${reloadKey}`) })), !isLoading && !error && csvAsTable && fileContent && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(CsvRenderer, { content: fileContent.content, fileName: fileName, className: "h-full", showDownload: false }) })), isContentReady && fileCategory === 'video' && blobUrl && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(VideoRenderer, { url: blobUrl, className: "h-full" }) })), isContentReady && fileCategory === 'audio' && blobUrl && (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-5 p-8", children: [_jsx("div", { className: "bg-muted/50 flex h-14 w-14 items-center justify-center rounded-sm", children: _jsxs("svg", { className: "text-muted-foreground/40 h-6 w-6", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("path", { d: "M9 18V5l12-2v13" }), _jsx("circle", { cx: "6", cy: "18", r: "3" }), _jsx("circle", { cx: "18", cy: "16", r: "3" })] }) }), _jsx("p", { className: "text-muted-foreground/60 text-sm", children: fileName }), _jsx("audio", { controls: true, src: blobUrl, className: "w-full max-w-sm" })] })), isContentReady && fileCategory === 'pptx' && rawBlob && (_jsx(Suspense, { fallback: _jsx(RendererFallback, {}), children: _jsx(PptxRenderer, { blob: rawBlob, binaryUrl: blobUrl, filePath: filePath, fileName: fileName, className: "h-full", onDownload: handleDownload }) })), isHtmlFile && isHtmlPreview && (_jsx(HtmlPreview, { path: toSandboxAbsolutePath(filePath), reloadKey: `${fetchRevision}-${reloadKey}`, fileName: fileName, pendingLabel: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line805JsxTextStartingPreviewServer') }, `html-preview-${filePath}`)), isHtmlFile && !isHtmlPreview && !isLoading && !error && fileContent?.type === 'text' && (_jsx(CodeEditor, { editorClassName: codeEditorEditorClassName, ...codeEditorProps, className: readOnly ? 'min-h-full' : 'h-full' }, `html-source-${filePath}-${discardKey}`)), !isLoading &&
@@ -114,7 +157,7 @@ export function FileContentRenderer({ filePath, showHeader = true, headerActions
                                 // below, so an edit in Source shows up here before saving.
                                 _jsx(MermaidDiagram, { source: hasUnsavedChanges ? latestContentRef.current : displayContent, fileName: fileName, onShowSource: () => setIsMarkdownPreview(false), className: "h-full" }, filePath)) : isMarkdownPreview && isMarkdownFile ? (
                                 // Markdown is prose, so it gets a measure. The markdown root
-                                // renders at text-[15px]; full-bleed on a wide viewport that
+                                // renders at text-base (16px); full-bleed on a wide viewport that
                                 // is ~190 characters per line, well past the comfortable
                                 // 65-90. `max-w-2xl` is the same reading column the customize
                                 // sections use, and it is a no-op in panels already narrower

package/dist/files/viewer/file-header.d.ts

@@ -2,6 +2,10 @@ import type { ComponentType, ReactNode, Dispatch, SetStateAction, MutableRefObje
 import type { FileContent } from './file-source.js';
 interface FileHeaderProps {
     showHeader: boolean;
+    /** A host toolbar to render into (`FilePreviewModal`). The host owns the
+     *  name, path, Download and the Markdown toggle, so only the edit state and
+     *  the HTML/JSON view toggles go there. */
+    headerSlot?: HTMLElement | null;
     Breadcrumbs: ComponentType<{
         filePath: string;
     }> | undefined;
@@ -30,8 +34,8 @@ interface FileHeaderProps {
     handleDownload: () => Promise<void>;
     blobUrl: string | null;
     rawBlob: Blob | null;
-    tI18nHardcoded: ReturnType<typeof import("../../i18n/index.js").useTranslations>;
-    tHardcodedUi: ReturnType<typeof import("../../i18n/index.js").useTranslations>;
+    tI18nHardcoded: ReturnType<typeof import('../../i18n/index.js').useTranslations>;
+    tHardcodedUi: ReturnType<typeof import('../../i18n/index.js').useTranslations>;
 }
-export declare function FileHeader({ showHeader, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi }: FileHeaderProps): import("react").JSX.Element;
+export declare function FileHeader({ showHeader, headerSlot, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi, }: FileHeaderProps): import("react").JSX.Element | null;
 export {};

package/dist/files/viewer/file-header.js

@@ -6,16 +6,25 @@ import Hint from '../../primitives/hint.js';
 import Loading from '../../primitives/loading.js';
 import { StatusDot } from '../../primitives/status.js';
 import { cn } from '../../lib/utils.js';
-import { WarningIcon as AlertTriangle, BracketsCurlyIcon as Braces, CheckIcon as Check, WarningCircleIcon as CircleAlert, CodeIcon as Code, EyeIcon as Eye, GlobeIcon as Globe, ArrowCounterClockwiseIcon as RotateCcw, FloppyDiskIcon as Save } from '@phosphor-icons/react';
+import { WarningIcon as AlertTriangle, BracketsCurlyIcon as Braces, CheckIcon as Check, WarningCircleIcon as CircleAlert, CodeIcon as Code, EyeIcon as Eye, GlobeIcon as Globe, ArrowCounterClockwiseIcon as RotateCcw, FloppyDiskIcon as Save, } from '@phosphor-icons/react';
+import { createPortal } from 'react-dom';
 import { Download } from '../../internal/icons/download.js';
-export function FileHeader({ showHeader, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi }) {
-    return (_jsx(_Fragment, { children: showHeader && (_jsxs("div", { className: "border-border/50 flex h-10 shrink-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: [Breadcrumbs && _jsx(Breadcrumbs, { filePath: filePath }), !readOnly && hasUnsavedChanges && (_jsxs(Badge, { variant: "warning", size: "sm", className: "shrink-0", children: [_jsx(StatusDot, { tone: "warning", pulse: true }), tI18nHardcoded.raw('i18nComplete.text7117f0807129')] })), !readOnly && saveFlash && !hasUnsavedChanges && (_jsxs(Badge, { variant: "success", size: "sm", className: "shrink-0", children: [_jsx(Check, { className: "h-3 w-3" }), tI18nHardcoded.raw('i18nComplete.textb5c120b316c2')] })), readOnly && (_jsx(Badge, { variant: "muted", size: "sm", className: "shrink-0 tracking-wider uppercase", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line554JsxTextViewOnly') })), (fileDiagErrorCount > 0 || fileDiagWarningCount > 0) && (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5", children: [fileDiagErrorCount > 0 && (_jsxs("span", { className: "text-destructive inline-flex items-center gap-0.5 text-xs font-medium tabular-nums", children: [_jsx(CircleAlert, { className: "h-3 w-3" }), fileDiagErrorCount] })), fileDiagWarningCount > 0 && (_jsxs("span", { className: "text-kortix-orange inline-flex items-center gap-0.5 text-xs font-medium tabular-nums", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), fileDiagWarningCount] }))] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [!readOnly && hasUnsavedChanges && fileContent?.type === 'text' && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "default", size: "sm", className: "h-7 gap-1.5 px-3 text-xs font-medium", onClick: () => { void handleSave(latestContentRef.current).catch(() => undefined); }, disabled: isSaving, title: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line586JsxAttrTitleSaveS'), children: [isSaving ? (_jsx(Loading, { className: "h-3.5 w-3.5" })) : (_jsx(Save, { className: "h-3.5 w-3.5" })), tI18nHardcoded.raw('i18nComplete.text1509f561f241')] }), _jsx(Hint, { label: discardLabel, side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": discardLabel, className: "text-muted-foreground hover:text-foreground h-7 w-7 active:scale-[0.96]", onClick: handleDiscard, children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }) })] })), isHtmlFile && (_jsx(Hint, { label: isHtmlPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isHtmlPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', "aria-pressed": isHtmlPreview, className: cn('h-7 w-7 active:scale-[0.96]', isHtmlPreview && 'text-primary'), onClick: () => setIsHtmlPreview((v) => !v), children: isHtmlPreview ? _jsx(Code, { className: "h-4 w-4" }) : _jsx(Globe, { className: "h-4 w-4" }) }) })), isJsonFile && fileContent?.type === 'text' && (_jsx(Hint, { label: isJsonTreeView
-                                ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
-                                : tI18nHardcoded.raw('i18nComplete.text4f50bda41e87'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isJsonTreeView
-                                    ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
-                                    : tI18nHardcoded.raw('i18nComplete.text4f50bda41e87'), "aria-pressed": isJsonTreeView, className: cn('h-7 w-7 active:scale-[0.96]', isJsonTreeView && 'text-primary'), onClick: () => setIsJsonTreeView((v) => !v), children: _jsx(Braces, { className: "h-4 w-4" }) }) })), hasPreviewToggle && fileContent?.type === 'text' && (_jsx(Hint, { label: isMarkdownPreview
-                                ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
-                                : 'Preview', side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isMarkdownPreview
-                                    ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
-                                    : 'Preview', "aria-pressed": isMarkdownPreview, className: cn('h-7 w-7 active:scale-[0.96]', isMarkdownPreview && 'text-primary'), onClick: () => setIsMarkdownPreview((v) => !v), children: isMarkdownPreview ? _jsx(Code, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }) })), headerActions, _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1.5 px-3 text-xs font-medium", onClick: handleDownload, disabled: !fileContent && !blobUrl && !rawBlob, "aria-label": tI18nHardcoded.raw('i18nComplete.textd6eafe823591'), children: [_jsx(Download, { className: "h-3.5 w-3.5" }), tI18nHardcoded.raw('i18nComplete.textd6eafe823591')] })] })] })) }));
+export function FileHeader({ showHeader, headerSlot, Breadcrumbs, filePath, readOnly, hasUnsavedChanges, saveFlash, fileDiagErrorCount, fileDiagWarningCount, fileContent, isSaving, handleSave, latestContentRef, discardLabel, handleDiscard, isHtmlFile, isHtmlPreview, setIsHtmlPreview, isJsonFile, isJsonTreeView, setIsJsonTreeView, hasPreviewToggle, isMarkdownPreview, setIsMarkdownPreview, headerActions, handleDownload, blobUrl, rawBlob, tI18nHardcoded, tHardcodedUi, }) {
+    const status = (_jsxs(_Fragment, { children: [!readOnly && hasUnsavedChanges && (_jsxs(Badge, { variant: "warning", size: "sm", className: "shrink-0", children: [_jsx(StatusDot, { tone: "warning", pulse: true }), tI18nHardcoded.raw('i18nComplete.text7117f0807129')] })), !readOnly && saveFlash && !hasUnsavedChanges && (_jsxs(Badge, { variant: "success", size: "sm", className: "shrink-0", children: [_jsx(Check, { className: "h-3 w-3" }), tI18nHardcoded.raw('i18nComplete.textb5c120b316c2')] })), readOnly && (_jsx(Badge, { variant: "muted", size: "sm", className: "shrink-0 tracking-wider uppercase", children: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line554JsxTextViewOnly') })), (fileDiagErrorCount > 0 || fileDiagWarningCount > 0) && (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5", children: [fileDiagErrorCount > 0 && (_jsxs("span", { className: "text-destructive inline-flex items-center gap-0.5 text-xs font-medium tabular-nums", children: [_jsx(CircleAlert, { className: "h-3 w-3" }), fileDiagErrorCount] })), fileDiagWarningCount > 0 && (_jsxs("span", { className: "text-kortix-orange inline-flex items-center gap-0.5 text-xs font-medium tabular-nums", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), fileDiagWarningCount] }))] }))] }));
+    const editActions = (_jsxs(_Fragment, { children: [!readOnly && hasUnsavedChanges && fileContent?.type === 'text' && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "default", size: "sm", className: "h-7 gap-1.5 px-3 text-xs font-medium", onClick: () => {
+                            void handleSave(latestContentRef.current).catch(() => undefined);
+                        }, disabled: isSaving, title: tHardcodedUi.raw('featuresFilesComponentsFileContentRenderer.line586JsxAttrTitleSaveS'), children: [isSaving ? _jsx(Loading, { className: "h-3.5 w-3.5" }) : _jsx(Save, { className: "h-3.5 w-3.5" }), tI18nHardcoded.raw('i18nComplete.text1509f561f241')] }), _jsx(Hint, { label: discardLabel, side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": discardLabel, className: "text-muted-foreground hover:text-foreground h-7 w-7 active:scale-[0.96]", onClick: handleDiscard, children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }) })] })), isHtmlFile && (_jsx(Hint, { label: isHtmlPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isHtmlPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', "aria-pressed": isHtmlPreview, className: cn('h-7 w-7 active:scale-[0.96]', isHtmlPreview && 'text-primary'), onClick: () => setIsHtmlPreview((v) => !v), children: isHtmlPreview ? _jsx(Code, { className: "h-4 w-4" }) : _jsx(Globe, { className: "h-4 w-4" }) }) })), isJsonFile && fileContent?.type === 'text' && (_jsx(Hint, { label: isJsonTreeView
+                    ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
+                    : tI18nHardcoded.raw('i18nComplete.text4f50bda41e87'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isJsonTreeView
+                        ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3')
+                        : tI18nHardcoded.raw('i18nComplete.text4f50bda41e87'), "aria-pressed": isJsonTreeView, className: cn('h-7 w-7 active:scale-[0.96]', isJsonTreeView && 'text-primary'), onClick: () => setIsJsonTreeView((v) => !v), children: _jsx(Braces, { className: "h-4 w-4" }) }) }))] }));
+    // `null` while the host toolbar mounts: render nothing rather than a row.
+    if (headerSlot !== undefined) {
+        return showHeader && headerSlot
+            ? createPortal(_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [status, editActions] }), headerSlot)
+            : null;
+    }
+    if (!showHeader)
+        return null;
+    return (_jsxs("div", { className: "border-border/50 flex h-10 shrink-0 items-center gap-2 border-b px-3 py-1.5", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: [Breadcrumbs && _jsx(Breadcrumbs, { filePath: filePath }), status] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [editActions, hasPreviewToggle && fileContent?.type === 'text' && (_jsx(Hint, { label: isMarkdownPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": isMarkdownPreview ? tI18nHardcoded.raw('i18nComplete.text6ee818aa2de3') : 'Preview', "aria-pressed": isMarkdownPreview, className: cn('h-7 w-7 active:scale-[0.96]', isMarkdownPreview && 'text-primary'), onClick: () => setIsMarkdownPreview((v) => !v), children: isMarkdownPreview ? _jsx(Code, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }) })), headerActions, _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1.5 px-3 text-xs font-medium", onClick: handleDownload, disabled: !fileContent && !blobUrl && !rawBlob, "aria-label": tI18nHardcoded.raw('i18nComplete.textd6eafe823591'), children: [_jsx(Download, { className: "h-3.5 w-3.5" }), tI18nHardcoded.raw('i18nComplete.textd6eafe823591')] })] })] }));
 }

package/dist/files/viewer/file-preview-modal.d.ts

@@ -60,4 +60,4 @@ export interface FilePreviewModalProps extends FilePreviewState {
  *     hit that path, which is why only the mouse appeared broken.)
  * Z-index is dialog-depth aware so it always stacks above its host overlay.
  */
-export declare function FilePreviewModal({ selectedFilePath, panelMode, filePathList, currentFileIndex, onClose: closePreview, onNext: nextPreview, onPrev: prevPreview, source, HistoryContent, statusSlot, extraActions, shareContext, historyLabel, embedded, targetLine, }: FilePreviewModalProps): import("react").JSX.Element | null;
+export declare function FilePreviewModal({ selectedFilePath, panelMode, filePathList, currentFileIndex, onClose: closePreview, onNext: nextPreview, onPrev: prevPreview, source, HistoryContent, renderFileIcon, statusSlot, extraActions, shareContext, historyLabel, embedded, targetLine, }: FilePreviewModalProps): import("react").JSX.Element | null;

package/dist/files/viewer/file-preview-modal.js

@@ -1,22 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PublicShareLinkButton } from "../../internal/share/public-share-link-button.js";
 import { Button } from "../../primitives/button.js";
 import { ButtonGroup } from "../../primitives/button-group.js";
 import Hint from "../../primitives/hint.js";
-import Loading from "../../primitives/loading.js";
 import { errorToast, successToast } from "../../primitives/toast.js";
 import { Download } from "../../internal/icons/download.js";
 import { useTranslations } from "../../i18n/index.js";
 import { cn } from "../../lib/utils.js";
 import { dialogContentZ, DialogDepthProvider, dialogOverlayZ, useDialogLayerDepth, } from "../../lib/z-stack.js";
-import { ArrowClockwiseIcon, CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, CodeIcon as Code, EyeIcon as Eye, ClockCounterClockwiseIcon as History, ArrowsOutSimpleIcon as Maximize2, ArrowsInSimpleIcon as Minimize2, XIcon as X, } from "@phosphor-icons/react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, CodeIcon as Code, EyeIcon as Eye, ClockCounterClockwiseIcon as History, ArrowsOutSimpleIcon as Maximize2, ArrowsInSimpleIcon as Minimize2, XIcon as X, } from "@phosphor-icons/react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { FileContentRenderer } from "./file-content-renderer.js";
 import { FileSourceProvider, } from "./file-source.js";
 import { getLanguageFromExt } from "./preview-policy.js";
 import { SaveAsPdfButton } from "./save-as-pdf-button.js";
+import { RefreshButton, ViewerActions, ViewerPathPill, fileShareInput, } from "./viewer-actions.js";
 /** Tabbable elements used by the focus trap below. */
 const FOCUSABLE_SELECTOR = [
     "a[href]",
@@ -54,7 +53,7 @@ const NO_REFRESH = {
  *     hit that path, which is why only the mouse appeared broken.)
  * Z-index is dialog-depth aware so it always stacks above its host overlay.
  */
-export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, currentFileIndex, onClose: closePreview, onNext: nextPreview, onPrev: prevPreview, source, HistoryContent, statusSlot, extraActions, shareContext, historyLabel = "History", embedded = false, targetLine = null, }) {
+export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, currentFileIndex, onClose: closePreview, onNext: nextPreview, onPrev: prevPreview, source, HistoryContent, renderFileIcon, statusSlot, extraActions, shareContext, historyLabel = "History", embedded = false, targetLine = null, }) {
     const tI18nHardcoded = useTranslations("hardcodedUi");
     const isOpen = panelMode === "viewer" && !!selectedFilePath;
     const [dirty, setDirty] = useState(false);
@@ -81,7 +80,6 @@ export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, cu
     // renders — the same pattern `FileContentRenderer` uses for `useFileContent`.
     const useRefresh = source.useRefresh ?? useNoRefresh;
     const { refresh, refreshing, reloadKey } = useRefresh(selectedFilePath);
-    const refreshLabel = tI18nHardcoded.raw("i18nComplete.text0e9161011702");
     const [markdownPreview, setMarkdownPreview] = useState(true);
     // Markdown and Mermaid files both open rendered, with a Source toggle.
     const isMarkdownFile = ["markdown", "mermaid"].includes(getLanguageFromExt(fileName));
@@ -90,17 +88,6 @@ export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, cu
     // The PDF export renders through a session's sandbox; a bytes-only source has none.
     const exportsPdf = getLanguageFromExt(fileName) === "markdown" && !source.bytesOnly;
     const { data: pdfSource } = source.useFileContent(exportsPdf ? selectedFilePath : null);
-    const shareInput = useMemo(() => {
-        if (!selectedFilePath || !shareContext)
-            return null;
-        return {
-            file: {
-                label: fileName || selectedFilePath,
-                path: selectedFilePath,
-            },
-            mode: "view",
-        };
-    }, [fileName, selectedFilePath, shareContext]);
     // The dialog surface — focus target for the trap and the focus-on-open below.
     const surfaceRef = useRef(null);
     // Reset transient view state when the file changes. A jump to a line shows
@@ -228,6 +215,7 @@ export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, cu
     const [toolbarEl, toolbarRef] = useState(null);
     const [nameEl, nameRef] = useState(null);
     const compactToolbar = useCompactRow(toolbarEl, nameEl);
+    const [editSlot, editSlotRef] = useState(null);
     useEffect(() => {
         if (!isOpen || !fullscreen)
             return;
@@ -260,22 +248,22 @@ export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, cu
     // or display:none would clip or collapse it. React context is preserved.
     if (typeof document === "undefined")
         return null;
-    const toolbar = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 pl-1", children: [_jsx("span", { ref: nameRef, className: "max-w-[300px] truncate text-sm font-medium", children: fileName }), !compactToolbar && statusSlot] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isMarkdownFile && (_jsx(Hint, { label: markdownPreview
+    const toolbar = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsxs(ViewerPathPill, { icon: renderFileIcon(fileName), path: selectedFilePath ?? undefined, fileName: fileName, nameRef: nameRef, children: [source.useRefresh && (_jsx(RefreshButton, { onRefresh: refresh, refreshing: refreshing })), _jsx(ViewerActions, { shareContext: shareContext, shareInput: fileShareInput(selectedFilePath ?? undefined, fileName) })] }), !compactToolbar && statusSlot] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("div", { ref: editSlotRef, className: "flex items-center empty:hidden" }), isMarkdownFile && (_jsx(Hint, { label: markdownPreview
                             ? tI18nHardcoded.raw("i18nComplete.text6ee818aa2de3")
                             : "Preview", side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": markdownPreview
                                 ? tI18nHardcoded.raw("i18nComplete.text6ee818aa2de3")
                                 : "Preview", "aria-pressed": markdownPreview, className: cn("h-8 w-8 active:scale-[0.96]", markdownPreview
                                 ? "text-muted-foreground hover:text-foreground"
-                                : "text-foreground bg-muted"), onClick: () => setMarkdownPreview((v) => !v), children: markdownPreview ? (_jsx(Code, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) }) })), source.useRefresh && (_jsx(Hint, { label: refreshLabel, side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": refreshLabel, "aria-busy": refreshing, disabled: refreshing, className: "text-muted-foreground hover:text-foreground h-8 w-8 active:scale-[0.96]", onClick: refresh, children: refreshing ? (_jsx(Loading, { className: "text-muted-foreground size-4 motion-reduce:animate-none" })) : (_jsx(ArrowClockwiseIcon, { className: "h-4 w-4" })) }) })), filePathList.length > 1 && !compactToolbar && (
+                                : "text-foreground bg-muted"), onClick: () => setMarkdownPreview((v) => !v), children: markdownPreview ? (_jsx(Code, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) }) })), filePathList.length > 1 && !compactToolbar && (
                     // Previous / next live with the other actions; the arrow keys still work.
                     _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrTitlePreviousb7cda316"), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon-base", disabled: !hasPrev, "aria-label": tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrAriaLabel03ab3a76"), className: "active:scale-[0.96]", onClick: onPrev, children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }) }), _jsx(Hint, { label: tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrTitleNext96666bd8"), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon-base", disabled: !hasNext, "aria-label": tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrAriaLabelda6ea7e4"), className: "active:scale-[0.96]", onClick: onNext, children: _jsx(ChevronRight, { className: "h-4 w-4" }) }) })] })), _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: historyLabel, side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon-base", "aria-label": historyLabel, "aria-pressed": !!historyPath, className: cn("active:scale-[0.96]", historyPath && "bg-accent"), onClick: () => setHistoryPath(historyPath ? null : selectedFilePath), children: _jsx(History, { className: "h-4 w-4" }) }) }), exportsPdf && !compactToolbar && (_jsx(SaveAsPdfButton, { fileName: fileName, content: pdfSource?.type === "text" ? pdfSource.content : undefined, variant: "secondary", className: "h-8 w-8", iconClassName: "h-4 w-4" })), _jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5 active:scale-[0.96]", onClick: handleDownload, "aria-label": tI18nHardcoded.raw("i18nComplete.textd6eafe823591"), children: [_jsx(Download, { className: "h-3.5 w-3.5" }), !compactToolbar &&
-                                        tI18nHardcoded.raw("i18nComplete.textd6eafe823591")] })] }), shareContext && !compactToolbar && (_jsx(PublicShareLinkButton, { projectId: shareContext.projectId, sessionId: shareContext.sessionId, input: shareInput, tooltip: tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrTooltipCopy42229181"), className: "text-muted-foreground hover:text-foreground" })), extraActions, embedded && (_jsx(Hint, { label: expanded
+                                        tI18nHardcoded.raw("i18nComplete.textd6eafe823591")] })] }), extraActions, embedded && (_jsx(Hint, { label: expanded
                             ? tI18nHardcoded.raw("i18nComplete.textde12e3c7c7a8")
                             : "Expand", side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": expanded
                                 ? tI18nHardcoded.raw("i18nComplete.textde12e3c7c7a8")
                                 : "Expand", "aria-pressed": expanded, className: "text-muted-foreground hover:text-foreground h-8 w-8 active:scale-[0.96]", onClick: () => setExpanded((v) => !v), children: expanded ? (_jsx(Minimize2, { className: "h-4 w-4" })) : (_jsx(Maximize2, { className: "h-4 w-4" })) }) })), _jsx(ButtonGroup, { className: "ml-1.5", children: _jsx(Hint, { label: tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrTitleClosea40d0510"), side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon-base", "aria-label": tI18nHardcoded.raw("autoFeaturesFileViewerFilePreviewModalJsxAttrTitleClosea40d0510"), className: "active:scale-[0.96]", onClick: onClose, children: _jsx(X, { className: "h-4 w-4" }) }) }) })] })] }));
-    const body = (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-full w-full overflow-hidden px-3 pt-3 pb-2", children: _jsx(FileSourceProvider, { value: source, children: _jsx(FileContentRenderer, { filePath: selectedFilePath, reloadKey: reloadKey, onUnsavedChange: setDirty, showHeader: !!source.editablePreview, readOnly: !source.editablePreview, targetLine: targetLine, markdownPreview: markdownPreview, onMarkdownPreviewChange: setMarkdownPreview }) }) }), historyPath && (_jsx("div", { className: "bg-popover border-border/60 animate-in slide-in-from-bottom-4 fade-in-0 absolute right-4 bottom-4 z-30 overflow-hidden rounded-md border shadow-md duration-normal", children: _jsx(HistoryContent, { filePath: historyPath, onClose: () => setHistoryPath(null) }) }))] }));
-    const panelInner = (_jsxs(_Fragment, { children: [_jsx("div", { ref: toolbarRef, className: "border-border/40 bg-background/95 flex h-12 shrink-0 items-center gap-2 border-b px-3 backdrop-blur-sm", children: toolbar }), _jsx("div", { ref: contentRef, className: "relative min-h-0 flex-1 overflow-hidden", children: body })] }));
+    const body = (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-full w-full overflow-hidden px-3 pt-3 pb-2", children: _jsx(FileSourceProvider, { value: source, children: _jsx(FileContentRenderer, { filePath: selectedFilePath, showCaption: true, reloadKey: reloadKey, onUnsavedChange: setDirty, showHeader: !!source.editablePreview, headerSlot: editSlot, readOnly: !source.editablePreview, targetLine: targetLine, markdownPreview: markdownPreview, onMarkdownPreviewChange: setMarkdownPreview }) }) }), historyPath && (_jsx("div", { className: "bg-popover border-border/60 animate-in slide-in-from-bottom-4 fade-in-0 absolute right-4 bottom-4 z-30 overflow-hidden rounded-md border shadow-md duration-normal", children: _jsx(HistoryContent, { filePath: historyPath, onClose: () => setHistoryPath(null) }) }))] }));
+    const panelInner = (_jsxs(_Fragment, { children: [_jsx("div", { ref: toolbarRef, "data-file-toolbar": "", className: "border-border/40 bg-background/95 flex h-12 shrink-0 items-center gap-2 border-b px-3 backdrop-blur-sm", children: toolbar }), _jsx("div", { ref: contentRef, className: "relative min-h-0 flex-1 overflow-hidden", children: body })] }));
     // Inline (embedded, not expanded): fill the relative parent — the side panel —
     // instead of portaling to a full-screen overlay. No backdrop, no body lock.
     if (!fullscreen) {

package/dist/files/viewer/file-source.d.ts

@@ -105,6 +105,19 @@ export interface FileSource {
      * `reloadKey` goes to `<FileContentRenderer reloadKey>`.
      */
     useRefresh?: (filePath: string | null) => FileRefreshResult;
+    /**
+     * The page's shared image store (R38), for a source whose paths are the live
+     * sandbox's: a raster image draws from the bytes another surface (the image
+     * card, a `show` card) already loaded, else is read once as bytes. A source
+     * with other paths (a git ref, a Drive, a share) omits it.
+     */
+    useSharedImage?: (filePath: string | null, sha256?: string | null) => SharedImageResult;
+}
+export interface SharedImageResult {
+    url: string | null;
+    loading: boolean;
+    error: string | null;
+    retry: () => void;
 }
 export interface FileRefreshResult {
     refresh: () => void;

package/dist/files/viewer/use-file-content-state.d.ts

@@ -43,6 +43,8 @@ export declare function useFileContentState({ filePath, onUnsavedChange, onSaved
     rawBlob: Blob | null;
     blobLoading: boolean;
     blobError: string | null;
+    sharedImagePath: string | null;
+    retrySharedImage: () => void;
     heicImageUrl: string | null;
     heicConverting: boolean;
     displayContent: string;