@kortix/ui 0.14.8 → 0.14.10

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)');
+}