@kortix/ui 0.14.8 → 0.14.9

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;

package/dist/files/viewer/use-file-content-state.js

@@ -4,9 +4,10 @@ import { errorToast, successToast } from '../../primitives/toast.js';
 import { useHeicBlob } from '../../internal/hooks/use-heic-url.js';
 import { isHeicFile } from '../../internal/lib/utils/heic-convert.js';
 import { findDiagnosticsForFile, useDiagnosticsStore } from '../../internal/stores/diagnostics-store.js';
-import { isSandboxNotReadyError } from '@kortix/sdk';
+import { isRuntimeStartingError } from '@kortix/sdk';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFileSource } from './file-source.js';
+import { useFileCaption } from '../../internal/stores/file-preview-store.js';
 import { getFileCategory, getLanguageFromExt } from './preview-policy.js';
 import { usePreviewFit } from './preview-fit.js';
 import { useContentRevision } from './use-content-revision.js';
@@ -15,6 +16,10 @@ const BLOB_CATEGORIES = ['docx', 'video', 'audio', 'pptx', 'zip'];
 function isImageMime(mimeType) {
     return !!mimeType && mimeType.startsWith('image/');
 }
+/** The raster images the shared image store holds (R38): not SVG (text), not HEIC (converted). */
+const RASTER_IMAGE = /\.(png|jpe?g|gif|webp|bmp|avif)$/i;
+const NO_SHARED_IMAGE = { url: null, loading: false, error: null, retry: () => { } };
+const noSharedImage = () => NO_SHARED_IMAGE;
 function isBlobCategory(cat) {
     return BLOB_CATEGORIES.includes(cat);
 }
@@ -52,7 +57,15 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // BLOB_CATEGORY). Keyed off the filename alone, so it cannot depend on the
     // response it is disabling.
     const isZipArchive = getFileCategory(fileName) === 'zip';
-    const { data: fileContent, isLoading, error, refetch, dataUpdatedAt, } = useFileContent(isHeicImage || isZipArchive ? null : filePath);
+    // A raster image of the live workspace draws from the page's shared image
+    // store: the bytes the image card already loaded, at once, else one read of
+    // the file as bytes. Never the base64 text read, a second download of the
+    // same picture under another cache key (R38).
+    const sharedImagePath = source.useSharedImage && RASTER_IMAGE.test(fileName) ? filePath : null;
+    // An image the card opened names its bytes' sha256: drawn from the store with no read.
+    const sharedImageSha = useFileCaption(filePath)?.sha256;
+    const sharedImage = (source.useSharedImage ?? noSharedImage)(sharedImagePath, sharedImageSha);
+    const { data: fileContent, isLoading, error, refetch, dataUpdatedAt, } = useFileContent(isHeicImage || isZipArchive || sharedImagePath ? null : filePath);
     // The agent's turn end refetches this file. The xlsx and sqlite renderers
     // read their own bytes, so they remount only when the content really
     // changed (structural sharing keeps the reference otherwise). The HTML frame
@@ -123,7 +136,10 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // there is no sandbox behind Files.
     const readsOwnBytes = fileCategory === 'xlsx' || fileCategory === 'sqlite';
     const blobPath = isBlobCategory(fileCategory) || isHeicImage || (source.bytesOnly && readsOwnBytes) ? filePath : null;
-    const { blobUrl, blob: rawBlob, isLoading: blobLoading, error: blobError, } = useBinaryBlob(blobPath);
+    const { blobUrl, blob: rawBlob, isLoading: binaryLoading, error: binaryError, } = useBinaryBlob(blobPath);
+    const blobLoading = sharedImagePath ? sharedImage.loading : binaryLoading;
+    const blobError = sharedImagePath ? sharedImage.error : binaryError;
+    const hasBytes = sharedImagePath ? !!sharedImage.url : !!rawBlob;
     // HEIC conversion — converts the raw HEIC blob to a renderable JPEG URL
     const { url: heicImageUrl, isConverting: heicConverting } = useHeicBlob(isHeicImage ? rawBlob : null, fileName);
     const displayContent = fileContent?.content ?? '';
@@ -266,13 +282,15 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     const imageDataUrl = useMemo(() => {
         if (isHeicImage)
             return null;
+        if (sharedImagePath)
+            return sharedImage.url;
         if (fileContent?.encoding === 'base64' && isImageMime(fileContent.mimeType)) {
             return `data:${fileContent.mimeType};base64,${fileContent.content}`;
         }
         return null;
-    }, [fileContent, isHeicImage]);
+    }, [fileContent, isHeicImage, sharedImagePath, sharedImage.url]);
     // Determine loading state
-    const needsBlob = isBlobCategory(fileCategory) || isHeicImage || (!!source.bytesOnly && readsOwnBytes);
+    const needsBlob = isBlobCategory(fileCategory) || isHeicImage || (!!source.bytesOnly && readsOwnBytes) || !!sharedImagePath;
     const isContentReady = needsBlob ? !blobLoading && !blobError : !isLoading && !error;
     const contentError = needsBlob
         ? blobError
@@ -286,7 +304,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // state, never a failure. The file hooks keep polling while this is true
     // (SANDBOX_WAKING_REFETCH_INTERVAL_MS), so the content appears on its own
     // once the box is up.
-    const isSandboxWaking = !!contentError && isSandboxNotReadyError(contentError);
+    const isSandboxWaking = !!contentError && isRuntimeStartingError(contentError);
     // Detect "file not found" — either via explicit error or empty resolution
     const isNotFound = useMemo(() => {
         if (contentError)
@@ -294,7 +312,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
         // Query settled with no data and no error → file likely doesn't exist
         if (!showLoadingState && !contentError && !needsBlob && !isLoading && !fileContent)
             return true;
-        if (!showLoadingState && !contentError && needsBlob && !blobLoading && !blobError && !rawBlob)
+        if (!showLoadingState && !contentError && needsBlob && !blobLoading && !blobError && !hasBytes)
             return true;
         return false;
     }, [
@@ -305,7 +323,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
         fileContent,
         blobLoading,
         blobError,
-        rawBlob,
+        hasBytes,
     ]);
     // Report load status up (used by `show` cards to hide dead references). Only
     // fires when a caller opts in via `onStatusChange`; the default viewer is
@@ -327,7 +345,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // case the surface itself has to speak for.
     //
     // A HEIC whose CONVERSION fails is deliberately not one of them:
-    // `use-heic-url.ts` catches the `heic2any` rejection and falls back to a blob
+    // `use-heic-url.ts` catches the HEIC decoder rejection and falls back to a blob
     // URL over the raw bytes, which a browser with native HEIC support then
     // renders correctly. So `heicImageUrl` is set, this predicate is false, and
     // ImageRenderer mounts. Where the browser also cannot decode it, the release
@@ -363,7 +381,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
         isJsonFile, isHtmlFile, isMarkdownPreview, setIsMarkdownPreview, isJsonTreeView,
         setIsJsonTreeView, isHtmlPreview, setIsHtmlPreview, fileDiagErrorCount, fileDiagWarningCount,
         fileDiagnostics, tHardcodedUi, tI18nHardcoded, blobUrl, rawBlob,
-        blobLoading, blobError, heicImageUrl, heicConverting, displayContent,
+        blobLoading, blobError, sharedImagePath, retrySharedImage: sharedImage.retry, heicImageUrl, heicConverting, displayContent,
         handleDownload, handleSave, handleDiscard, handleEditorChange, imageDataUrl,
         needsBlob, isContentReady, contentError, showLoadingState, isSandboxWaking,
         isNotFound,

package/dist/files/viewer/viewer-actions.d.ts

@@ -39,10 +39,12 @@ export declare function pathCrumbs(path: string | undefined): string[];
  * Folders truncate before the name does — the name is what tells two open
  * files apart.
  */
-export declare function ViewerPathPill({ icon, path, fileName, children, }: {
+export declare function ViewerPathPill({ icon, path, fileName, nameRef, children, }: {
     icon: React.ReactNode;
     path?: string;
     fileName: string;
+    /** The name element, for a host that measures whether it is still readable. */
+    nameRef?: React.Ref<HTMLSpanElement>;
     /** The file's actions — `RefreshButton`, `ViewerActions`. */
     children?: React.ReactNode;
 }): import("react").JSX.Element;

package/dist/files/viewer/viewer-actions.js

@@ -72,9 +72,9 @@ export function pathCrumbs(path) {
  * Folders truncate before the name does — the name is what tells two open
  * files apart.
  */
-export function ViewerPathPill({ icon, path, fileName, children, }) {
+export function ViewerPathPill({ icon, path, fileName, nameRef, children, }) {
     const crumbs = pathCrumbs(path);
-    return (_jsxs("span", { className: "bg-muted flex h-8 min-w-0 flex-1 items-center gap-1 rounded-md px-1", children: [_jsx("span", { className: "flex h-6 min-w-6 shrink-0 items-center justify-center", children: icon }), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", title: path, children: [crumbs.length > 0 && (_jsxs("span", { className: "text-muted-foreground min-w-0 shrink-[3] truncate", children: [crumbs.join(' / '), " /"] })), _jsx("span", { className: "text-foreground min-w-0 truncate font-medium", children: fileName })] }), children && _jsx(ButtonGroup, { className: "shrink-0", children: children })] }));
+    return (_jsxs("span", { className: "bg-muted flex h-8 min-w-0 flex-1 items-center gap-1 rounded-md px-1", children: [_jsx("span", { className: "flex h-6 min-w-6 shrink-0 items-center justify-center", children: icon }), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", title: path, children: [crumbs.length > 0 && (_jsxs("span", { className: "text-muted-foreground min-w-0 shrink-[3] truncate", children: [crumbs.join(' / '), " /"] })), _jsx("span", { ref: nameRef, className: "text-foreground min-w-0 truncate font-medium", children: fileName })] }), children && _jsx(ButtonGroup, { className: "shrink-0", children: children })] }));
 }
 /**
  * `true` for 2s after `flash()` — the window a copy button shows its check.

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/use-mobile.d.ts

@@ -1,2 +1,7 @@
 export declare const MOBILE_BREAKPOINT = 768;
 export declare function useIsMobile(): boolean;
+/**
+ * Below Tailwind's `sm` (640px): a phone. The composer's attach / agent row
+ * moves under the card only here; a 720px desktop window keeps it inside.
+ */
+export declare function useIsPhone(): boolean;

package/dist/hooks/use-mobile.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMediaQuery } from './use-media-query.js';
 export const MOBILE_BREAKPOINT = 768;
 export function useIsMobile() {
     const [isMobile, setIsMobile] = React.useState(undefined);
@@ -13,3 +14,10 @@ export function useIsMobile() {
     }, []);
     return !!isMobile;
 }
+/**
+ * Below Tailwind's `sm` (640px): a phone. The composer's attach / agent row
+ * moves under the card only here; a 720px desktop window keeps it inside.
+ */
+export function useIsPhone() {
+    return useMediaQuery('(max-width: 639px)');
+}