minecodex 2.0.5 → 2.0.7

package/features/images/src/adapters/codex/native-image-source.mjs

@@ -1,152 +1,15 @@
-// 原生组件、构建产物与 React 上下文只在此适配；不复制图库或编辑器。
-export function createNativeImageSource(codex, { read = async url => (await fetch(url)).text(), load = url => import(url), requestHostAction, libraryApi, createCloudImageActions } = {}) {
-  let connecting;
+import {createNativeImageModules} from "./native-image-modules.mjs";
+
+// 原生呈现与上下文只在此适配；构建产物发现由专用模块提供。
+export function createNativeImageSource(codex, { requestHostAction, libraryApi, createCloudImageActions, promptGlyphSource, signal, modules = createNativeImageModules() } = {}) {
+  const connect = modules.gallery;
   const opened = new Map();
 
-  function imported(source, local) {
-    for (const match of source.matchAll(/import\{([^}]+)\}from["']([^"']+)["']/g)) {
-      for (const binding of match[1].split(",")) {
-        const parts = binding.trim().split(/\s+as\s+/);
-        if (parts.at(-1) === local) return { name: parts[0], file: match[2] };
-      }
-    }
-    throw new Error(`Native Images import contract changed: ${local}`);
-  }
-
-  async function connect() {
-    if (!connecting) connecting = (async () => {
-      const urls = [...document.querySelectorAll('link[rel="modulepreload"],script[src]')].map(node => node.href || node.src);
-      const initialUrl = urls.find(url => /\/app-initial-[^/]+\.js/.test(url));
-      const mainUrl = urls.find(url => /\/app-main-[^/]+\.js/.test(url));
-      if (!initialUrl || !mainUrl) throw new Error("Native Images modules are unavailable");
-      const [initialSource, mainSource] = await Promise.all([read(initialUrl), read(mainUrl)]);
-      const asset = (name, references = initialSource) => {
-        const file = references.match(new RegExp(`(?:["'./])(${name}-[\\w-]+\\.js)`))?.[1];
-        if (!file) throw new Error(`Native Images capability is unavailable: ${name}`);
-        return new URL(file, initialUrl).href;
-      };
-      const module = async (name,references) => {
-        const url = asset(name,references);
-        const [source, exports] = await Promise.all([read(url), load(url)]);
-        // 调用产物公开的惰性初始化器，不扫描或执行任意导出函数。
-        for (const value of Object.values(exports)) {
-          if (typeof value === "function" && /^function ([\w$]+)\(\)\{return\(\1=/.test(String(value))) value();
-        }
-        return {url, source, exports};
-      };
-      const [masonry, layout, sourceImage, menu, selection, initial] = await Promise.all([
-        module("library-masonry"), module("library-item-layout"), module("generated-image-source"),
-        module("generated-image-context-menu"), module("library-selection-toolbar"), load(initialUrl),
-      ]);
-      const [moveDialog,dialogs] = await Promise.all([module("library-move-dialog",selection.source),module("library-item-dialogs",selection.source)]);
-      const [canvas,canvasLayout,filePreview] = await Promise.all([
-        module("image-side-panel"),module("preview-layout"),module("library-cloud-file-preview"),
-      ]);
-      const component = (exports, predicate, name) => {
-        const matches = Object.values(exports).filter(value => typeof value === "function" && predicate(String(value)));
-        if (matches.length !== 1) throw new Error(`Native Images contract changed: ${name}`);
-        return matches[0];
-      };
-      const binding = async (source, url, local) => {
-        if (!local) throw new Error("Native Images component contract changed");
-        const importedBinding = imported(source, local);
-        return (await load(new URL(importedBinding.file, url).href))[importedBinding.name];
-      };
-      const routerLocal = selection.source.match(/get\(([\w$]+)\)\.prepareNavigation\(/)?.[1];
-      const routerAtom = await binding(selection.source, selection.url, routerLocal);
-      const switchLocal = selection.source.match(/([\w$]+)\(e,i\);let _=t.length===1/)?.[1];
-      const switchMode = await binding(selection.source, selection.url, switchLocal);
-      const draftLocal = selection.source.match(/let u=([\w$]+)\(e,\[\]\);e.set/)?.[1];
-      const createChatDraft = await binding(selection.source, selection.url, draftLocal);
-      const rootOwner = mainSource.match(/\(0,([\w$]+)\.createRoot\)/)?.[1];
-      const rootInit = rootOwner && mainSource.match(new RegExp(`${rootOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const reactOwner = masonry.source.match(/([\w$]+)\.useRef\b/)?.[1];
-      const reactInit = reactOwner && masonry.source.match(new RegExp(`${reactOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const [reactFactory, rootFactory] = await Promise.all([
-        binding(masonry.source, masonry.url, reactInit), binding(mainSource, mainUrl, rootInit),
-      ]);
-      const React = reactFactory(), ReactDOM = rootFactory();
-      const portalOwner=canvas.source.match(/\(0,([\w$]+)\.createPortal\)/)?.[1];
-      const portalInit=portalOwner&&canvas.source.match(new RegExp(`${portalOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const createPortal=(await binding(canvas.source,canvas.url,portalInit))().createPortal;
-      const dropdownLocal = selection.source.match(/\(0,[\w$]+\.jsxs?\)\(([\w$]+),\{contentWidth:`menu`/)?.[1];
-      const itemsLocal = selection.source.match(/\(0,[\w$]+\.jsxs?\)\(([\w$]+)\.Item,\{/)?.[1];
-      const buttonLocal = selection.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{ref:[^,]+,color:`mediaOverlay`/)?.[1];
-      const iconLocal = selection.source.match(/color:`mediaOverlay`[^;]+?children:\(0,[\w$]+\.jsx\)\(([\w$]+),\{\}\)/)?.[1];
-      const [Dropdown, Menu, Button, MoreIcon] = await Promise.all([dropdownLocal, itemsLocal, buttonLocal, iconLocal].map(local => binding(selection.source, selection.url, local)));
-      const checkboxFunction = component(selection.exports,source=>/onCheckedChange:/.test(source)&&/viewMode:/.test(source),"selection checkbox");
-      const checkboxLocal = String(checkboxFunction).match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{className:`cursor-interaction`,variant:/)?.[1];
-      const Checkbox = await binding(selection.source,selection.url,checkboxLocal);
-      const rangeSelection = component(selection.exports,source=>/^function [\w$]+\(\{orderedIds:/.test(source)&&/extendRange:/.test(source),"range selection");
-      const selectionLocal = selection.source.match(/\.set\(([\w$]+),new Set\)/)?.[1];
-      const selectionExport = selection.source.match(/export\{([^}]+)\}/)?.[1].split(",").map(value=>value.trim().split(/\s+as\s+/)).find(parts=>parts[0]===selectionLocal)?.at(-1);
-      const nativeSelectedIds = selection.exports[selectionExport];
-      if (!nativeSelectedIds) throw new Error("Native selection state contract changed");
-      const clearPrefix = selection.source.slice(selection.source.indexOf("id:`libraryNext.selection.clear`"));
-      const clearLocal = clearPrefix.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{\}\)/)?.[1];
-      const ClearIcon = await binding(selection.source,selection.url,clearLocal);
-      const dialogLocal = dialogs.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{open:[^,]+,showDialogClose:!1/)?.[1];
-      const contentLocal = dialogs.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{as:`form`,onSubmit:/)?.[1];
-      const [Dialog,DialogContent] = await Promise.all([dialogLocal,contentLocal].map(local=>binding(dialogs.source,dialogs.url,local)));
-      const menuCoreFile = menu.source.match(/from["']([^"']*generated-image-context-menu-[^"']+)["']/)?.[1];
-      const menuCoreUrl = menuCoreFile ? new URL(menuCoreFile,menu.url).href : menu.url;
-      const menuCoreSource = menuCoreFile ? await read(menuCoreUrl) : menu.source;
-      const imageActions = component(menu.exports,source=>/onOpenedInNewTab:/.test(source),"image actions");
-      const imageActionSource = String(imageActions);
-      const imageFileLocal = imageActionSource.match(/let\{file:[\w$]+\}=([\w$]+)\(/)?.[1];
-      const attachLocal = imageActionSource.match(/await ([\w$]+)\(e,i,\[n\],/)?.[1];
-      const downloadLocal = imageActionSource.match(/await ([\w$]+)\(\{downloadSrc:/)?.[1];
-      const [imageFile,attachChatImages,downloadImage] = await Promise.all([imageFileLocal,attachLocal,downloadLocal].map(local=>binding(menuCoreSource,menuCoreUrl,local)));
-      const toolbarClass = selection.source.match(/className:`(pointer-events-auto flex h-toolbar[^`]+)`/)?.[1];
-      const toolbarPositionClass = selection.source.match(/className:`(pointer-events-none fixed inset-x-4 bottom-6[^`]+)`/)?.[1];
-      if (!toolbarClass || !toolbarPositionClass) throw new Error("Native selection toolbar layout changed");
-      const libraryIcon = async label => {
-        const marker = selection.source.indexOf(`defaultMessage:\`${label}\``);
-        const prefix = selection.source.slice(Math.max(0, marker - 500), marker);
-        const match = [...prefix.matchAll(/leftIcon:\(0,[\w$]+\.jsx\)\(([\w$]+),\{icon:\{(assets:\{)?16:([\w$]+),20:([\w$]+)/g)].at(-1);
-        if (!match) throw new Error(`Native Library icon contract changed: ${label}`);
-        const [Icon, small, medium] = await Promise.all([match[1], match[3], match[4]].map(local => binding(selection.source, selection.url, local)));
-        const sizes = {16:small, 20:medium};
-        return React.createElement(Icon, {icon:match[2] ? {assets:sizes} : sizes});
-      };
-      const upload = component(initial, source => /async function/.test(source) && /libraryPersistenceMode:/.test(source) && /uploadPurpose:/.test(source), "Library upload");
-      const setFavorite = component(initial, source => /target_ref:/.test(source) && /showToast:/.test(source), "Library favorite");
-      const auth = String(setFavorite).match(/accountId:e.get\(([\w$]+)\),userId:e.get\(([\w$]+)\)/);
-      const [accountAtom,userAtom] = await Promise.all([auth?.[1],auth?.[2]].map(local => binding(initialSource,initialUrl,local)));
-      if (!accountAtom || !userAtom) throw new Error("Native Library account contract changed");
-      const toastLocal = selection.source.match(/get\(([\w$]+)\)\.danger\(/)?.[1];
-      const toastAtom = await binding(selection.source, selection.url, toastLocal);
-      const favoritePrefix = selection.source.slice(Math.max(0,selection.source.indexOf("id:`library.favorites.add`")-2000),selection.source.indexOf("id:`library.favorites.add`")+500);
-      const favoriteAsset = favoritePrefix.match(/\{16:([\w$]+),20:([\w$]+)\}:\{16:([\w$]+),20:([\w$]+)\}/);
-      if (!favoriteAsset) throw new Error("Native Library favorite icon contract changed");
-      const favoriteIconLocal = favoritePrefix.match(/icon:\{assets:/)?.index;
-      const favoriteIconOwner = favoritePrefix.slice(0,favoriteIconLocal).match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{$/)?.[1];
-      const [FavoriteIcon, savedSmall, savedMedium, emptySmall, emptyMedium] = await Promise.all([favoriteIconOwner,...favoriteAsset.slice(1)].map(local => binding(selection.source,selection.url,local)));
-      const favoriteIcon = saved => React.createElement(FavoriteIcon,{icon:{assets:saved?{16:savedSmall,20:savedMedium}:{16:emptySmall,20:emptyMedium}}});
-      const [chatIcon, downloadIcon, folderIcon, deleteIcon] = await Promise.all([
-        libraryIcon("Chat about this"), libraryIcon("Download"), libraryIcon("Add to folder"), libraryIcon("{kind, select, directory {Delete folder} other {Delete}}"),
-      ]);
-      // 文件画布使用原生 Home Composer 的控制器、附件 scope 和输入组件。
-      const composerLocals=["kr","Qn","$n","rr","ke","hn","tn","P"];
-      const [useComposerController,useHomeComposer,Composer,ComposerSurface,ScopeProvider,composerScope,createComposerValue,composerRouteScope] = await Promise.all(composerLocals.map(local=>binding(filePreview.source,filePreview.url,local)));
-      if (!React.createElement || !ReactDOM.createRoot || !Menu.Item) throw new Error("Native Images rendering contract changed");
-      return {
-        React, ReactDOM, createPortal, Dropdown, Menu, Button, MoreIcon, chatIcon, downloadIcon, folderIcon, favoriteIcon, routerAtom, switchMode, createChatDraft, upload, setFavorite, toastAtom, accountAtom, userAtom,
-        MoveDialog:moveDialog.exports.MoveLibraryItemsDialog,
-        Checkbox,rangeSelection,nativeSelectedIds,ClearIcon,Dialog,DialogContent,ConfirmationContent:dialogs.exports.LibraryItemConfirmationContent,
-        Canvas:canvas.exports.t,CanvasLayout:canvasLayout.exports.r,
-        useComposerController,useHomeComposer,Composer,ComposerSurface,ScopeProvider,composerScope,createComposerValue,composerRouteScope,
-        editImage:component(initial,source=>/async function/.test(source)&&/requireDispatchAcceptance:/.test(source)&&/sourceAttachment:/.test(source)&&/imageVariant/.test(source),"image edit submission"),
-        imageFile,attachChatImages,downloadImage,toolbarClass,toolbarPositionClass,deleteIcon,
-        Masonry: component(masonry.exports, source => /\{items:[^}]+animate:/.test(source), "masonry"),
-        Skeleton: component(masonry.exports, source => /square:/.test(source) && /Loading library/.test(source), "skeleton"),
-        Card: component(layout.exports, source => /actionIndicator:/.test(source) && /documentHeader:/.test(source), "card"),
-        useImage: component(sourceImage.exports, source => /shouldLoadFileDataUrl:/.test(source), "image resolver"),
-        imageMenu: component(menu.exports, source => /onOpenedInNewTab:/.test(source), "image actions"),
-        openImage: component(initial, source => /availableImageCount:/.test(source) && /openInEditor:/.test(source) && /entrypoint:/.test(source), "image preview"),
-      };
-    })().catch(error => { connecting = null; throw error; });
-    return connecting;
+  function uploadFile({base64,name}) {
+    const decoded=atob(base64),bytes=new Uint8Array(decoded.length);
+    // 直接写入字节，避免大图经字符串迭代器创建中间数组。
+    for(let index=0;index<decoded.length;index++)bytes[index]=decoded.charCodeAt(index);
+    return new File([bytes],name,{type:"image/png"});
   }
 
   function environment(anchor) {
@@ -189,7 +52,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
   }
 
   async function mountNavigation(container, anchor, onSelect) {
-    const native = await connect();
+    const native = await modules.navigation();
     const context = environment(anchor);
     const root = native.ReactDOM.createRoot(container);
     return {
@@ -200,7 +63,6 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
           selectedKey,
           tabs:[...contract.props.tabs, {key:"imagegen", name:"Image Gen"}],
           onSelect:key => {
-            if (key === "imagegen") context.libraryScope?.set(native.nativeSelectedIds,new Set());
             onSelect(key);
             if (key !== "imagegen") navigationContract(anchor).props.onSelect(key);
           },
@@ -216,20 +78,21 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
   }
 
   async function mount(container, anchor, {onOpen, onPrompt, onRetry, onHidden}) {
-    const native = await connect();
+    let native = await connect();
     const context = environment(anchor);
     const {React, ReactDOM} = native;
     const h = React.createElement;
+    const promptIcon=h("span",{className:"inline-flex size-4 items-center justify-center","aria-hidden":true,dangerouslySetInnerHTML:{__html:promptGlyphSource}});
     let failure, currentContent, folderDialog, removeDialog, canvasImage, disposed=false, batchBusy=false;
-    let currentImages=[],currentLoading=true,selectedIds=new Set(),selectionAnchor=null;
+    let currentImages=[],currentLoading=true,selectedIds=new Set(),selectionAnchor=null,openRevision=0;
     const scope = context.libraryScope;
     if (!scope) throw new Error("Native Library context is unavailable");
     const {accountId,userId} = scope.value;
     const message = (id,defaultMessage) => context.intl.formatMessage({id,defaultMessage});
     const toast = () => scope.get(native.toastAtom);
-    const assertAccount = () => {
-      if (disposed || scope.get(native.accountAtom) !== accountId || scope.get(native.userAtom) !== userId) throw new Error("Library account changed");
-    };
+    const sameAccount = () => scope.get(native.accountAtom) === accountId && scope.get(native.userAtom) === userId;
+    const isCurrent = () => !disposed && sameAccount();
+    const assertAccount = () => {if (!isCurrent()) throw new Error("Library action is no longer current");};
     const reference = (image,operation,extra={}) => requestHostAction("local-image-source",{operation,id:image.id,accountId,userId,...extra});
     async function favoriteStatus(id) {
       const result = await libraryApi.favoriteStatus(id);
@@ -239,13 +102,12 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     const cloud = createCloudImageActions({
       reference, assertAccount,
-      fileNode:id => libraryApi.fileNode(id), favoriteStatus,
+      favoriteStatus,
       setFavorite:(libraryFileId,favoriteId,isFavorited) => native.setFavorite(scope,{libraryFileId,favoriteId,isFavorited,surface:"library_grid",showToast:true}),
       upload:async file => {
-        const bytes = Uint8Array.from(atob(file.base64),value => value.charCodeAt(0));
         const pendingToast = toast().info(message("minecodex.images.saving","Saving image to Library…"),{duration:0,hasCloseButton:false});
         try {
-          const uploaded = await native.upload(scope,new File([bytes],file.name,{type:"image/png"}),{
+          const uploaded = await native.upload(scope,uploadFile(file),{
             libraryPersistenceMode:"required",storeInLibrary:true,uploadPurpose:"library",beforeRequest:assertAccount,
           });
           return uploaded.libraryFileId;
@@ -255,13 +117,21 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     async function folder(image) {
       const images=Array.isArray(image)?image:[image];
       const registered=[];
-      for(const item of images)registered.push(await cloud.registered(item));
-      const entries=registered.map(item=>item.entry),created=registered.some(item=>item.created);
+      const entries=[];
+      for (const item of images) {
+        const result=await cloud.registered(item);
+        const node=await libraryApi.fileNode(result.libraryFileId);
+        assertAccount();
+        registered.push(result);
+        entries.push({node});
+      }
+      const created=registered.some(item=>item.created);
       let moved = false;
       folderDialog = h(native.MoveDialog,{
         accountId,userId,entries,initialPath:[],
         onMoved:() => {moved=true;},
         onClose:() => {
+          if (!isCurrent()) return;
           folderDialog=null;render(currentContent);
           if (!moved) toast().info(created
             ? message("minecodex.images.folderCanceledSaved","Image saved to Library, but not added to a folder.")
@@ -271,7 +141,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       render(currentContent);
     }
     function operationError(error) {
-      if (disposed) return;
+      if (!isCurrent()) return;
       toast().danger(error.code === "UPLOAD_UNCONFIRMED"
         ? message("minecodex.images.uploadUnconfirmed","Image upload is pending or could not be confirmed. Check Library before uploading again.")
         : message("minecodex.images.libraryActionFailed","Couldn’t complete the Library action. Please try again."));
@@ -279,6 +149,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     const root = ReactDOM.createRoot(container, {onUncaughtError:error => {failure=error;onRetry(error);}});
     function render(content) {
+      if (!isCurrent()) return;
       currentContent = content;
       let tree = h(React.Fragment,null,content,folderDialog,removeDialog,selectionToolbar(),canvasImage?h(ImageCanvas,{key:canvasImage.id,image:canvasImage}):null);
       for (const provider of context.providers) tree = h(provider.type, {value:provider.value}, tree);
@@ -293,7 +164,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       selectedIds=next.selectedIds;selectionAnchor=next.anchor;refresh();
     }
     const selectedImages = () => currentImages.filter(image=>selectedIds.has(image.id));
-    function clearSelection() {selectedIds=new Set();selectionAnchor=null;removeDialog=null;refresh();}
+    function clearSelection() {openRevision++;selectedIds=new Set();selectionAnchor=null;removeDialog=null;refresh();}
     async function performBatch(action) {
       if (batchBusy) return;
       batchBusy=true;refresh();
@@ -307,13 +178,13 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
           h(native.DialogContent,{as:"form",onSubmit:event=>{
             event.preventDefault();if(pending)return;pending=true;update();refresh();
             void requestHostAction("local-image-source",{operation:"hide",ids:images.map(image=>image.id)}).then(result=>{
-              if(disposed)return;
+              if(!isCurrent())return;
               const hidden=new Set(result.hiddenIds);
               currentImages=currentImages.filter(image=>!hidden.has(image.id));
               selectedIds=new Set([...selectedIds].filter(id=>!hidden.has(id)));
               pending=false;removeDialog=null;onHidden?.(result.hiddenIds);refresh();
               toast().info(message("minecodex.images.hidden","Hidden from Image Gen"));
-            }).catch(error=>{pending=false;update();refresh();operationError(error);});
+            }).catch(error=>{if(!isCurrent())return;pending=false;update();refresh();operationError(error);});
           }},h(native.ConfirmationContent,{
             title:context.intl.formatMessage({id:"minecodex.images.hideTitle",defaultMessage:"Delete {count, plural, one {image} other {# images}} from Image Gen?"},{count:images.length}),
             description:message("minecodex.images.hideDescription","These images will only be hidden from Image Gen. Local originals and cloud copies will be kept."),
@@ -347,11 +218,13 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     document.addEventListener("keydown",onSelectionKey);
     async function startChat(images) {
+      assertAccount();
       const conversationId=native.createChatDraft(context.scope,[]);
       native.switchMode(context.scope,"chat");
       const files=[];
-      for(const image of images){const file=await reference(image,"upload-file");files.push(native.imageFile(`data:image/png;base64,${file.base64}`,file.name).file);}
+      for(const image of images){const file=await reference(image,"upload-file");assertAccount();files.push(native.imageFile(`data:image/png;base64,${file.base64}`,file.name).file);}
       if (!await native.attachChatImages(context.scope,conversationId,files,{isTemporaryChat:false})) throw new Error("Could not attach selected images");
+      assertAccount();
       const navigate=context.scope.get(native.routerAtom).prepareNavigation("/",{state:{codexAppMode:"chat",initialChatGptConversationId:conversationId,focusComposerNonce:Date.now()}});
       if(!navigate)throw new Error("Native Chat navigation is unavailable");
       clearSelection();await navigate();
@@ -359,9 +232,19 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     function localImage(image) {
       return {id:image.imageGenerationItemId, src:image.sourcePath, previewSrc:image.sourcePath, alt:image.name, tabTitle:image.name, width:image.width, height:image.height};
     }
-    function open(image, options) {
+    async function open(image, options) {
+      if (!options) {
+        assertAccount();
+        const revision=++openRevision;
+        const canvas=await modules.canvas();
+        // 切换来源或重置列表后，不让晚到的画布覆盖当前页面。
+        if(revision!==openRevision || !isCurrent())return false;
+        native={...native,...canvas};
+        opened.set(image.sourcePath,image);
+        canvasImage=image;refresh();return true;
+      }
+      if (signal?.aborted || !sameAccount()) return;
       opened.set(image.sourcePath, image);
-      if (!options) {canvasImage=image;refresh();return;}
       const {readOnly=false,scope=context.scope,chatGptConversationId}=options;
       const result = native.openImage(scope, {
         chatGptConversationId, alt:image.name, title:image.name, attachmentId:`image-playground:${image.imageGenerationItemId}`,
@@ -369,7 +252,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         imageId:image.imageGenerationItemId, sourceConversationId:image.threadId,
         imageSourceContext:{conversationId:image.threadId, hostId:"local"}, imageSource:"generated",
         readOnly, openInEditor:true,
-        renderHeaderMenuActions:({renderMenu}) => renderMenu(h(native.Menu.Item, {onSelect:() => onPrompt(image), children:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"})})),
+        renderHeaderMenuActions:({renderMenu}) => renderMenu(h(native.Menu.Item, {leftIcon:promptIcon,onSelect:() => onPrompt(image), children:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"})})),
       }, {addToHistory:false});
       if (!result) throw new Error("Native image preview could not open");
     }
@@ -389,15 +272,28 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         h(native.ScopeProvider,{scope:native.composerRouteScope,value:{pathname:"/",routeKind:"home",routeTemplate:"/",search:"",projectContext:null}},
           h(native.ScopeProvider,{scope:native.composerScope,value:composerValue},h(CanvasSurface,{image,resolved,close}))));
       // 原生文件预览占据主内容 viewport，保留导航、二级侧栏和窗口栏。
-      return native.createPortal(h("div",{className:"absolute inset-0 z-40 overflow-hidden", "data-minecodex-image-canvas":image.id,children:content}),viewport);
+      return native.createPortal(h("div",{className:"absolute inset-0 z-40 overflow-hidden", "data-minecodex-image-canvas":image.id,children:[
+        // 画布在主内容内，原生窗口级 overlay 的交通灯避让不适用于此处。
+        h("style",{children:'[data-minecodex-image-canvas] .shrink-0:has(>[data-testid="viewer-header"]){padding-left:0!important;padding-right:0!important}'}),content,
+      ]}),viewport);
     }
     function CanvasSurface({image,resolved,close}) {
       const controller=native.useComposerController();
+      const navigate=native.useFileNavigate();
       const home=native.useHomeComposer({homeComposerController:controller,homeComposerMode:"chat"});
       const [abort]=React.useState(()=>new AbortController());
       const [markup,setMarkup]=React.useState(false);
       const [manualZoomPercent,setManualZoomPercent]=React.useState(null);
       const [submitting,setSubmitting]=React.useState(false);
+      const [composerHeight,setComposerHeight]=React.useState(0);
+      const measureComposer=React.useCallback(node=>{
+        const element=node?.querySelector("[data-codex-composer-root]");
+        if(!element)return;
+        const measure=()=>setComposerHeight(element.getBoundingClientRect().height);
+        const observer=new ResizeObserver(measure);
+        observer.observe(element);measure();
+        return ()=>{observer.disconnect();setComposerHeight(0);};
+      },[]);
       const editorRef=React.useRef(null);
       const attachment=React.useRef(null);
       const submissionAccepted=React.useRef(false);
@@ -408,8 +304,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         assertCurrent();
         if(!attachment.current)attachment.current=(async()=>{
           const file=await reference(image,"upload-file");assertCurrent();
-          const bytes=Uint8Array.from(atob(file.base64),value=>value.charCodeAt(0));
-          const uploaded=await native.upload(context.scope,new File([bytes],file.name,{type:"image/png"}),{storeInLibrary:false,beforeRequest:assertCurrent,signal:abort.signal});
+          const uploaded=await native.upload(context.scope,uploadFile(file),{storeInLibrary:false,beforeRequest:assertCurrent,signal:abort.signal});
           return {...uploaded,width:image.width,height:image.height,imageReference:true};
         })().catch(error=>{attachment.current=null;throw error;});
         return attachment.current;
@@ -438,31 +333,47 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         }catch(error){if(!abort.signal.aborted)operationError(error);return false;}
         finally {if(!abort.signal.aborted)setSubmitting(false);}
       };
-      const composer=h(native.ComposerSurface,{placement:{kind:"home"}},h(native.Composer,{
-        ...props,composerController:controller,composerLayoutMode:"auto-single-line",lockedLayout:"single-line",
-        className:"mx-auto w-full max-w-2xl px-toolbar",errorClassName:"p-3",showFilePicker:false,signal:abort.signal,
-        placeholder:message("libraryFilePreview.composerPlaceholder","Ask about this file"),isPrimaryComposer:false,
-        disableSubmit:props.disableSubmit||submitting,
-        attachmentPreparation:{mimeTypes:["image/png"],prepare:async signal=>{signal?.throwIfAborted();return [await prepare()];}},
-        onSubmitAccepted:accepted,
-      }));
+      const composer=h("div",{ref:measureComposer,className:"contents"},h(native.ComposerSurface,{placement:{kind:"home"}},h(native.FileComposer,{
+        composerController:controller,composerLayoutMode:"auto-single-line",
+        className:"mx-auto w-[min(48rem,calc(100vw-2rem))] max-w-full",
+        composerModeAvailability:native.fileComposerAvailability,
+        hideRunLocationDropdownOverride:true,showUtilityBar:false,surfaceVariant:"inline",
+        placeholderText:message("libraryFilePreview.composerPlaceholder","Ask about this file"),
+        submitDisabled:submitting,selectedProject:null,
+        // 原图仅在发送时成为本地附件，不伪造 Library 身份，也不上传云端。
+        prepareLocalConversationAttachments:async ({fileAttachments,hostId})=>{
+          assertCurrent();
+          const file=await reference(image,"upload-file");assertCurrent();
+          const attached=await native.localAttachmentService(context.scope,hostId).createFileAttachment({contents:uploadFile(file),label:file.name});
+          if(abort.signal.aborted||!isCurrent()){
+            await native.deleteLocalAttachment(context.scope,hostId,attached.path);
+            assertCurrent();
+          }
+          return [...fileAttachments,attached];
+        },
+        onLocalFirstTurnAccepted:()=>{submissionAccepted.current=true;},
+        onLocalConversationCreated:(conversationId,state)=>{submissionAccepted.current=true;close();navigate(native.localThreadRoute(conversationId),{state});},
+      })));
       const dataUrl=resolved.dataUrl??resolved.previewSrc;
       const canvas=h(native.Canvas,{
         alt:image.name,title:image.name,src:dataUrl??image.sourcePath,downloadSrc:dataUrl??image.sourcePath,downloadFilename:image.name,
         attachmentId:`image-playground:${image.imageGenerationItemId}`,attachmentSrc:image.sourcePath,
         chatGptConversationId:props.conversationId,
         imageSource:"generated",imageSourceContext:{conversationId:image.threadId,hostId:"local"},
-        readOnly:false,presentation:"dialog",standalone:true,showViewerHeader:true,onClose:requestClose,
+        readOnly:false,presentation:"overlay",standalone:true,showViewerHeader:true,onClose:requestClose,
         markupMode:{active:markup,onActiveChange:setMarkup,editorRef,isSubmitting:submitting,standaloneComposer:true},
         onImageEditSubmit:submitEdit,
         zoom:{manualZoomPercent,onZoomPercentChange:setManualZoomPercent,onZoomToFit:()=>setManualZoomPercent(null)},
         renderComposer:visible=>h(React.Activity,{mode:visible?"visible":"hidden",children:composer}),
-        renderHeaderMenuActions:({renderMenu})=>renderMenu(h(native.Menu.Item,{onSelect:()=>onPrompt(image),children:message("minecodex.images.viewPrompts","View prompts")})),
+        renderHeaderMenuActions:({renderMenu})=>renderMenu(h(native.Menu.Item,{leftIcon:promptIcon,onSelect:()=>onPrompt(image),children:message("minecodex.images.viewPrompts","View prompts")})),
       });
-      // 原生 overlay 负责底部留白、宽度、避让与 Comment 时的输入框显隐。
-      return h(native.CanvasLayout,{assetName:image.name,contentOwnsHeader:true,onClose:requestClose,children:canvas});
+      // 原生 overlay 的 118px 下限属于旧输入框；画布和拖拽边界跟随实际高度。
+      const reserve=composerHeight>0?`calc(${composerHeight}px + var(--spacing)*4)`:"0px";
+      return h("div",{className:"contents",style:{"--right-panel-composer-overlay-reserve":reserve}},
+        h(native.CanvasLayout,{assetName:image.name,contentOwnsHeader:true,onClose:requestClose,children:canvas}));
     }
     async function chatAbout(image) {
+      assertAccount();
       const conversationId = native.createChatDraft(context.scope, []);
       native.switchMode(context.scope, "chat");
       const navigate = context.scope.get(native.routerAtom).prepareNavigation("/", {
@@ -471,24 +382,31 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       if (!navigate) throw new Error("Native Chat navigation is unavailable");
       await navigate();
       await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
-      const composer = document.querySelector('[data-codex-composer="true"]') ?? document.querySelector('[contenteditable="true"]');
+      // 导航会正常卸载图库；只把面板移交给目标 Chat 的可见输入框。
+      if (signal?.aborted || !sameAccount()) return;
+      const composer = codex.composer(null,{purpose:"insertion"})?.editable;
       if (!composer) throw new Error("Native Chat composer is unavailable");
       const chat = environment(composer);
-      open(image, {readOnly:true, scope:chat.scope, chatGptConversationId:conversationId});
+      await open(image, {readOnly:true, scope:chat.scope, chatGptConversationId:conversationId});
     }
     function ImageCard({image}) {
       const [saved,setSaved] = React.useState(false);
       const [busy,setBusy] = React.useState(false);
+      const active=React.useRef(true);
+      const favoriteRevision=React.useRef(0);
+      React.useEffect(()=>{active.current=true;return()=>{active.current=false;favoriteRevision.current++;};},[]);
       async function perform(action) {
         if (busy) return;
         setBusy(true);
-        try {await action();} catch(error) {operationError(error);} finally {setBusy(false);}
+        try {assertAccount();await action();} catch(error) {operationError(error);} finally {if(active.current&&isCurrent())setBusy(false);}
       }
       async function refreshFavorite(open) {
+        const revision=++favoriteRevision.current;
         if (!open) return;
         try {
           const cached = await reference(image,"reference");
-          setSaved(cached.libraryFileId ? !!(await favoriteStatus(cached.libraryFileId)) : false);
+          const value=cached.libraryFileId ? !!(await favoriteStatus(cached.libraryFileId)) : false;
+          if (active.current && isCurrent() && revision===favoriteRevision.current) setSaved(value);
         } catch(error) {console.error("MineCodex favorite status",error);}
       }
       const resolved = native.useImage({src:image.sourcePath, conversationId:image.threadId, hostId:"local", shouldLoadFileDataUrl:true});
@@ -500,22 +418,19 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         const item = byId.get(id);
         return item && {...item, icon, text:context.intl.formatMessage(message ?? item.message)};
       };
-      const promptGlyph = document.querySelector('[aria-label="Prompts"] svg');
-      const menuGlyph = promptGlyph?.cloneNode(true);
-      if (menuGlyph) {
-        menuGlyph.setAttribute("width","16");menuGlyph.setAttribute("height","16");
-        menuGlyph.style.width="16px";menuGlyph.style.height="16px";
-      }
-      const promptIcon = menuGlyph ? h("span", {className:"inline-flex size-4 items-center justify-center", "aria-hidden":true, dangerouslySetInnerHTML:{__html:menuGlyph.outerHTML}}) : null;
       const menuItems = [
         {id:"chat-about", icon:native.chatIcon, text:context.intl.formatMessage({id:"libraryNext.actions.chatAboutItem",defaultMessage:"Chat about this"}),onSelect:() => {void chatAbout(image).catch(onRetry);}},
+        {id:"view-prompts", icon:promptIcon, text:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"}),onSelect:() => {void open(image).then(opened=>{if(opened&&isCurrent())onPrompt(image);}).catch(operationError);}},
         {id:"favorite",icon:native.favoriteIcon(saved),text:saved
           ? message("library.favorites.remove","Remove from Favorites")
-          : message("library.favorites.add","Add to Favorites"),onSelect:() => {void perform(async () => setSaved(await cloud.favorite(image)));}},
+          : message("library.favorites.add","Add to Favorites"),onSelect:() => {void perform(async () => {
+            favoriteRevision.current++;
+            const value=await cloud.favorite(image);
+            if(active.current&&isCurrent()){favoriteRevision.current++;setSaved(value);}
+          });}},
         action("download-a-copy", native.downloadIcon, {id:"libraryNext.actions.download", defaultMessage:"Download"}),
         {id:"folder",icon:native.folderIcon,text:message("libraryNext.actions.addToFolder","Add to folder"),onSelect:() => {void perform(() => folder(image));}},
         {id:"delete",icon:native.deleteIcon,tone:"danger",text:message("libraryNext.actions.delete","Delete"),onSelect:()=>confirmRemove([image])},
-        {id:"view-prompts", icon:promptIcon, text:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"}),onSelect:() => {open(image);onPrompt(image);}},
       ].filter(Boolean);
       const dropdown = h(native.Dropdown, {
         contentWidth:"menu", align:"end", onOpenChange:refreshFavorite,
@@ -534,17 +449,17 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       },children:h(native.Checkbox,{className:"cursor-interaction",variant:"overlay",checked,disabled:batchBusy,"aria-label":context.intl.formatMessage({id:"libraryNext.selection.item",defaultMessage:"Select {name}"},{name:image.name}),onCheckedChange:value=>select(image,value===true)})});
       return h(native.Card,{name:image.name,selection,selected:checked,selectionActive:selectedIds.size>0,onSelect:event=>{
         if(selectedIds.size || event.shiftKey){select(image,!checked,event.shiftKey);return true;}return false;
-      },onOpen:() => onOpen(image,open),actions:dropdown,children:h("span",{className:"relative flex min-h-0 w-full flex-1 items-center justify-center",children:h("span",{className:"relative flex w-full items-center justify-center",style:{aspectRatio:cardRatio},children:picture})})});
+      },onOpen:() => {void Promise.resolve(onOpen(image,open)).catch(operationError);},actions:dropdown,children:h("span",{className:"relative flex min-h-0 w-full flex-1 items-center justify-center",children:h("span",{className:"relative flex w-full items-center justify-center",style:{aspectRatio:cardRatio},children:picture})})});
     }
     return {
       render({images,loading}) {
         if (failure) throw failure;
         currentImages=images;currentLoading=loading;
-        if(loading){selectedIds=new Set();selectionAnchor=null;removeDialog=null;}
+        if(loading){openRevision++;selectedIds=new Set();selectionAnchor=null;removeDialog=null;scope.set(native.nativeSelectedIds,new Set());}
         refresh();
       },
       clearSelection,
-      dispose() {disposed=true;document.removeEventListener("keydown",onSelectionKey);root.unmount();},
+      dispose() {disposed=true;openRevision++;document.removeEventListener("keydown",onSelectionKey);root.unmount();},
     };
   }
 

package/features/images/src/assets/prompts-menu.svg

@@ -0,0 +1,15 @@
+<!-- Derived from Lucide book-open (ISC): merged stroke subpaths for uniform alpha. -->
+<svg
+  class="icon-xs shrink-0"
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="-1.5 -1.5 27 27"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.8"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 7v14 M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+</svg>

package/features/images/src/frontend/cloud-image-actions.mjs

@@ -1,12 +1,13 @@
 // 工作流只管理云端身份与操作顺序；上传协议和原生组件由 Adapter 提供。
-export function createCloudImageActions({reference,upload,fileNode,favoriteStatus,setFavorite,assertAccount}) {
+export function createCloudImageActions({reference,upload,favoriteStatus,setFavorite,assertAccount}) {
   const pending = new Map();
   function registered(image) {
     if (!pending.has(image.id)) {
       const task = (async () => {
         assertAccount();
         const cached = await reference(image,"reference");
-        if (cached.libraryFileId) return {entry:{node:await fileNode(cached.libraryFileId)},created:false};
+        assertAccount();
+        if (cached.libraryFileId) return {libraryFileId:cached.libraryFileId,created:false};
         const unconfirmed = () => Object.assign(new Error("Library upload is pending or could not be confirmed"),{code:"UPLOAD_UNCONFIRMED"});
         if (cached.status === "uploading") throw unconfirmed();
         const file = await reference(image,"upload-file");
@@ -18,7 +19,7 @@ export function createCloudImageActions({reference,upload,fileNode,favoriteStatu
         // 先保存身份；收藏失败或取消文件夹选择后仍可复用上传结果。
         await reference(image,"register",{libraryFileId,fingerprint:file.fingerprint});
         assertAccount();
-        return {entry:{node:await fileNode(libraryFileId)},created:true};
+        return {libraryFileId,created:true};
       })();
       pending.set(image.id,task);
       const release = () => {if (pending.get(image.id) === task) pending.delete(image.id);};
@@ -29,10 +30,11 @@ export function createCloudImageActions({reference,upload,fileNode,favoriteStatu
   return {
     registered,
     async favorite(image) {
-      const {entry} = await registered(image);
-      const favoriteId = await favoriteStatus(entry.node.id);
+      const {libraryFileId} = await registered(image);
+      const favoriteId = await favoriteStatus(libraryFileId);
+      assertAccount();
+      if (!await setFavorite(libraryFileId,favoriteId,!favoriteId)) throw new Error("Library favorite could not be changed");
       assertAccount();
-      if (!await setFavorite(entry.node.id,favoriteId,!favoriteId)) throw new Error("Library favorite could not be changed");
       return !favoriteId;
     },
   };

package/features/images/src/frontend/local-image-source.mjs

@@ -183,7 +183,8 @@ export function installLocalImageSource(config, signal, sources, native) {
   });
   observer.observe(document.body, {childList:true, subtree:true, attributes:true, attributeFilter:["aria-selected"]});
   void scan();
-  const cleanup = () => {observer.disconnect(); unmount(); pendingPrompt = null;};
+  let cleaned = false;
+  const cleanup = () => {if(cleaned)return;cleaned=true;observer.disconnect();unmount();pendingPrompt=null;};
   signal.addEventListener("abort", cleanup, {once:true});
   return {
     cleanup,