@kortix/ui 0.14.6 → 0.14.8

package/dist/customize/triggers/schedule-view.js

@@ -84,7 +84,9 @@ export function TriggerToolbarMenu({ canManage, paused, isPending, onToggle, onS
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     if (!canManage)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-base", disabled: isPending, "aria-label": tI18nComplete.raw('textd47d7cb0e4f8'), children: _jsx(DotsThreeIcon, { className: "text-muted-foreground size-4 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-76", children: [_jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: paused, onSelect: () => onToggle(true), children: _jsx(RichRowBody, { icon: PauseIcon, title: tI18nComplete.raw('text0b6258b50010'), description: tI18nComplete.raw('textdae75dce541f') }) }), _jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: !paused, onSelect: () => onToggle(false), children: _jsx(RichRowBody, { icon: PlayIcon, title: tI18nComplete.raw('text43e673c5503d'), description: tI18nComplete.raw('textced57bebd466') }) }), onSelectMode ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: onSelectMode, children: [_jsx(CheckSquareIcon, {}), tI18nComplete.raw('text2a78025de6aa')] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-base", 
+                    // `size-9`: the New trigger button and the search input beside it are `h-9`.
+                    className: "size-9", disabled: isPending, "aria-label": tI18nComplete.raw('textd47d7cb0e4f8'), children: _jsx(DotsThreeIcon, { className: "text-muted-foreground size-4 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-76", children: [_jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: paused, onSelect: () => onToggle(true), children: _jsx(RichRowBody, { icon: PauseIcon, title: tI18nComplete.raw('text0b6258b50010'), description: tI18nComplete.raw('textdae75dce541f') }) }), _jsx(DropdownMenuItem, { className: RICH_ROW_CLASS, disabled: !paused, onSelect: () => onToggle(false), children: _jsx(RichRowBody, { icon: PlayIcon, title: tI18nComplete.raw('text43e673c5503d'), description: tI18nComplete.raw('textced57bebd466') }) }), onSelectMode ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: onSelectMode, children: [_jsx(CheckSquareIcon, {}), tI18nComplete.raw('text2a78025de6aa')] })] })) : null] })] }));
 }
 /**
  * The project-wide pause switch (`PATCH /projects/:id/triggers/activation`):
@@ -387,7 +389,7 @@ export function ScheduleView({ projectId }) {
                        Both are hidden until the list has loaded — neither means anything
                        on an error or a 403. */
                         showContent ? (
-                        // Search, then one group: ⋯ and New trigger, both `secondary` at `h-8`.
+                        // Search, then one group: ⋯ and New trigger, both `secondary` at `h-9`, the search input's height.
                         _jsxs(ButtonGroup, { children: [triggers.length > 0 || paused ? (_jsx(TriggerActivationMenu, { projectId: projectId, onSelectMode: triggers.length > 0 ? enterSelectMode : undefined })) : null, canWrite ? (_jsx(NewEntityMenu, { label: copy.createLabel, pending: configure.pending, onChat: () => configure.start(newConfigPrompt('trigger')), manual: { onSelect: () => openCreate() }, caret: false })) : null] })) : undefined, children: [_jsxs("div", { className: "space-y-4", children: [accountPaused && showContent && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tAutomations('bannerTitle') }), _jsx(AlertDescription, { children: tAutomations('bannerDescription') })] })), paused && showContent && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('textb18b93a52cd2') }), _jsx(AlertDescription, { children: tI18nComplete.raw('textc9e9d972eda2') }), controls.canUpdate ? (_jsx(AlertActions, { children: _jsxs(Button, { variant: "outline", size: "sm", disabled: resumeAll.isPending, onClick: () => resumeAll.mutate(false), children: [resumeAll.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text43e673c5503d')] }) })) : null] })), triggersQuery.isLoading ? (_jsx("div", { className: "space-y-1", children: Array.from({ length: 5 }).map((_, i) => (
                                         // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length placeholder
                                         _jsx(Skeleton, { className: "h-10 rounded-md" }, i))) })) : isForbidden ? (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: tI18nComplete.raw('textabb84be05cfa') }), _jsxs(AlertDescription, { children: [tI18nComplete.raw('text22cd1f210415'), " ", copy.noun, tI18nComplete.raw('text382584f2456e')] })] })) : triggersQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete('text7ce02a51e3dd', { value0: copy.noun }), description: triggersQuery.error?.message ?? tI18nComplete.raw('text0c953ab32c60'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => triggersQuery.refetch(), children: tI18nComplete.raw('textd8b8392e2c54') }) })) : filter !== 'all' && ofKind.length === 0 ? (_jsx(EmptyState, { size: "sm", title: kindCopy[filter].emptyTitle })) : triggers.length === 0 ? (_jsx(EmptyState, { icon: LightningIcon, title: copy.emptyTitle, description: copy.emptyBody, className: "py-12", action: canWrite ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => openCreate(), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), copy.createLabel] })) : undefined })) : filtered.length === 0 ? (_jsxs("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: [tI18nComplete.raw('text965b516df3ba'), ' ', _jsx("span", { className: "text-foreground font-medium", children: debouncedQuery }), "."] })) : (_jsx(TriggerList, { triggers: filtered, groups: appGroups, eventNames: eventNames, projectPaused: paused, selectedSlug: selected?.slug ?? null, runningSlug: run.isPending ? (run.variables?.slug ?? null) : liveSlug, onOpen: (t) => openTrigger(t.slug), selection: selectMode

package/dist/files/project/api/runtime-files.js

@@ -194,12 +194,13 @@ export async function readFile(projectId, ref, filePath) {
     // text, and the JSON content read is byte-safe for it.
     if (hasExtension && getLanguageFromExt(name) !== 'plaintext') {
         const result = await readProjectFile(projectId, relativePath, ref);
-        return { type: 'text', content: result.content };
+        return { type: 'text', content: result.content, revision: result.revision };
     }
     // Unknown or missing extension: the bytes decide, text or binary.
     const bytes = await readRawBytes(projectId, relativePath, ref);
     if (isTextBytes(bytes)) {
-        return { type: 'text', content: new TextDecoder().decode(bytes), mimeType: 'text/plain; charset=utf-8' };
+        const result = await readProjectFile(projectId, relativePath, ref);
+        return { type: 'text', content: result.content, revision: result.revision, mimeType: 'text/plain; charset=utf-8' };
     }
     return { type: 'binary', content: '', mimeType: 'application/octet-stream' };
 }

package/dist/files/project/file-source.js

@@ -1,4 +1,9 @@
 'use client';
+import { useQueryClient } from '@tanstack/react-query';
+import { writeProjectFile } from '@kortix/sdk';
+import { fileContentKeys } from './hooks/use-file-content.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useMemo } from 'react';
 import { downloadFile, uploadFile } from './api/runtime-files.js';
 import { FilePathBreadcrumbs } from './components/file-breadcrumbs.js';
@@ -16,6 +21,8 @@ import { useBinaryBlob } from './hooks/use-binary-blob.js';
  */
 export function useProjectFileSource() {
     const ctx = useProjectContext();
+    const queryClient = useQueryClient();
+    const canWrite = useProjectCan(ctx?.projectId ?? '', PROJECT_ACTIONS.PROJECT_FILE_WRITE).allowed === true;
     return useMemo(() => ({
         id: 'project-ref',
         useFileContent,
@@ -25,6 +32,16 @@ export function useProjectFileSource() {
             ? downloadFile(ctx.projectId, ctx.ref, filePath, fileName)
             : Promise.reject(new Error('No project context for download')),
         upload: uploadFile,
+        editablePreview: canWrite,
+        save: ctx && canWrite ? async (filePath, file, revision) => {
+            if (!revision)
+                throw new Error('Reload the file before saving.');
+            await writeProjectFile(ctx.projectId, {
+                path: filePath.replace(/^\/workspace\//, '').replace(/^\//, ''), ref: ctx.ref,
+                content: await file.text(), expected_revision: revision,
+            });
+            await queryClient.invalidateQueries({ queryKey: fileContentKeys.all });
+        } : undefined,
         Breadcrumbs: FilePathBreadcrumbs,
-    }), [ctx]);
+    }), [ctx, canWrite, queryClient]);
 }

package/dist/files/project/hooks/use-file-content.js

@@ -20,6 +20,8 @@ export function useFileContent(filePath, options) {
         staleTime: options?.staleTime ?? 10_000,
         gcTime: 5 * 60_000,
         refetchOnWindowFocus: false,
+        // A revision used for edits must remain paired with the displayed text.
+        refetchOnMount: false,
         retry: (failureCount, error) => {
             const msg = error.message.toLowerCase();
             if (msg.includes('404') ||

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

@@ -9,7 +9,7 @@ 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 { 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: () => handleSave(latestContentRef.current), 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
+    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')

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, onNext, onPrev, 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, statusSlot, extraActions, shareContext, historyLabel, embedded, targetLine, }: FilePreviewModalProps): import("react").JSX.Element | null;

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

@@ -54,9 +54,19 @@ 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, onNext, onPrev, 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, statusSlot, extraActions, shareContext, historyLabel = "History", embedded = false, targetLine = null, }) {
     const tI18nHardcoded = useTranslations("hardcodedUi");
     const isOpen = panelMode === "viewer" && !!selectedFilePath;
+    const [dirty, setDirty] = useState(false);
+    const leave = (action) => {
+        if (dirty && !window.confirm('Discard unsaved changes?'))
+            return;
+        setDirty(false);
+        action();
+    };
+    const onClose = () => leave(closePreview);
+    const onNext = () => leave(nextPreview);
+    const onPrev = () => leave(prevPreview);
     // Embedded viewers start inline (in the side panel); "Expand" pops them to
     // the full-screen overlay. Non-embedded viewers are always full-screen.
     const [expanded, setExpanded] = useState(false);
@@ -264,7 +274,7 @@ export function FilePreviewModal({ selectedFilePath, panelMode, filePathList, cu
                             : "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, showHeader: false, readOnly: true, 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 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 })] }));
     // Inline (embedded, not expanded): fill the relative parent — the side panel —
     // instead of portaling to a full-screen overlay. No backdrop, no body lock.

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

@@ -5,6 +5,7 @@ import { type ComponentType, type ReactNode } from 'react';
  * their own typed hooks without conversion.
  */
 export interface FileContent {
+    revision?: string;
     type: 'text' | 'binary';
     content: string;
     patch?: FilePatch;
@@ -79,7 +80,8 @@ export interface FileSource {
      * instead of `upload`, so a source can refuse a save over a file someone
      * changed since it was read (a conditional write) rather than clobber it.
      */
-    save?: (filePath: string, file: File) => Promise<unknown>;
+    editablePreview?: boolean;
+    save?: (filePath: string, file: File, revision?: string) => Promise<unknown>;
     /**
      * Every byte the viewer shows comes from this source, which owns the
      * authorization. Previewers that otherwise read a sandbox path themselves

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

@@ -61,6 +61,13 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     const contentRevision = useContentRevision(fileContent);
     const fetchRevision = useContentRevision(dataUpdatedAt || undefined);
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    // A refetch may replace server content while CodeEditor retains a dirty draft.
+    // CAS must compare against the revision that draft started from.
+    const draftRevisionRef = useRef(fileContent?.revision);
+    useEffect(() => {
+        if (!hasUnsavedChanges)
+            draftRevisionRef.current = fileContent?.revision;
+    }, [hasUnsavedChanges, fileContent?.revision]);
     const [isSaving, setIsSaving] = useState(false);
     const [saveFlash, setSaveFlash] = useState(false);
     // Tracks the latest editor content so we can save from the header button.
@@ -120,12 +127,12 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // 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 ?? '';
-    // Keep latestContentRef in sync with loaded content
+    // Refresh clean content only; header Save must keep the visible dirty draft.
     useEffect(() => {
-        if (fileContent?.content) {
-            latestContentRef.current = fileContent.content;
+        if (!hasUnsavedChanges) {
+            latestContentRef.current = fileContent?.content ?? '';
         }
-    }, [fileContent?.content]);
+    }, [fileContent?.content, hasUnsavedChanges]);
     // Reset state when the FILE changes — markdown defaults to rendered preview.
     //
     // `setIsMarkdownPreview` MUST NOT be a dependency here, and this effect must
@@ -167,15 +174,17 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     // Save handler — called by CodeEditor (Cmd+S) and by the header Save button.
     // When called from the header button we pass latestContentRef.current.
     // When called from CodeEditor's Cmd+S, CodeEditor passes its own localContent.
+    const draftGeneration = useRef(0);
     const handleSave = useCallback(async (content) => {
         if (readOnly)
             return;
+        const generation = draftGeneration.current;
         setIsSaving(true);
         try {
             const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
             const file = new File([blob], fileName, { type: 'text/plain' });
             if (source.save) {
-                await source.save(filePath, file);
+                await source.save(filePath, file, draftRevisionRef.current);
             }
             else {
                 const parentPath = filePath.substring(0, filePath.lastIndexOf('/'));
@@ -184,7 +193,15 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
             // Refetch so fileContent.content (= originalContent for CodeEditor) updates.
             // CodeEditor's originalContent effect will then sync savedContent.current
             // to match localContent, clearing its internal hasChanges flag.
-            await refetch();
+            const refreshed = await refetch();
+            if (refreshed && typeof refreshed === 'object' && 'data' in refreshed) {
+                const data = refreshed.data;
+                if (data && typeof data === 'object' && 'revision' in data && typeof data.revision === 'string') {
+                    draftRevisionRef.current = data.revision;
+                }
+            }
+            if (draftGeneration.current !== generation)
+                return;
             setHasUnsavedChanges(false);
             setSaveFlash(true);
             if (saveFlashTimerRef.current)
@@ -199,6 +216,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
                     ? err.message
                     : tI18nHardcoded.raw('i18nComplete.text27c2ccd962c2'),
             }));
+            throw err;
         }
         finally {
             setIsSaving(false);
@@ -216,6 +234,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
     const handleEditorChange = useCallback((content) => {
         if (readOnly)
             return;
+        draftGeneration.current++;
         latestContentRef.current = content;
     }, [readOnly]);
     // Cmd+S handler for when CodeEditor is not mounted (e.g. markdown preview)
@@ -226,7 +245,7 @@ export function useFileContentState({ filePath, onUnsavedChange, onSaved, readOn
             if ((e.metaKey || e.ctrlKey) && e.key === 's') {
                 e.preventDefault();
                 if (hasUnsavedChanges && latestContentRef.current) {
-                    handleSave(latestContentRef.current);
+                    void handleSave(latestContentRef.current).catch(() => undefined);
                 }
             }
         };

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

@@ -148,8 +148,8 @@ function expiryLabel(expiresAt) {
 /**
  * `Copy link` and everything about the link behind it, in one popover.
  *
- * A file or app mint always makes a NEW public token (only transcripts are
- * reused server-side), so the popover reads the session's live shares first:
+ * A file or app mint always makes a NEW public token, so the popover reads
+ * the session's live shares first:
  *
  *   - a live link for this exact file or port → show it, copy it, see when it
  *     expires, revoke it;