minecodex 2.0.12 → 2.0.13

package/features/notes/src/frontend/entry.mjs

@@ -25,6 +25,7 @@ function appearanceLabel(key) {
 }
 function errorMessage(error) {
   const messages = {
+    "Open a chat before using a prompt.": "请先打开一个对话，再使用提示词。",
     "Category was not found": "未找到该分类",
     "Prompt was not found": "未找到该提示词",
     "Choose one emoji or leave it empty": "请选择一个 Emoji，或留空以继承分类图标",
@@ -74,6 +75,8 @@ function position() {
   config.ui.composerMenu(panel, addButton);
 }
 function close(restoreFocus = false) {
+  clearQuickPreview(true);
+  quickTabsObserver?.disconnect();
   generation++;
   panel?.remove();
   panel = null;
@@ -82,6 +85,108 @@ function close(restoreFocus = false) {
   button?.setAttribute("data-state", "closed");
   if (restoreFocus) button?.focus({ preventScroll: true });
 }
+let quickCategory = "all";
+let quickTabsObserver = null;
+let quickPreview = null;
+let quickPreviewTimer = null;
+let quickExitTimer = null;
+function clearQuickPreview(immediate = false, shift = 0) {
+  clearTimeout(quickPreviewTimer);
+  clearTimeout(quickExitTimer);
+  const current = quickPreview;
+  if (!current) return;
+  current.anchor.removeAttribute("data-preview");
+  if (immediate || previewReducedMotion()) {
+    current.node.remove();
+    quickPreview = null;
+    return;
+  }
+  current.node.style.pointerEvents = "none";
+  tweenPreview(current.node, { opacity:0, transform:`translateY(${Math.max(-10, Math.min(10, shift))}px) scale(.98)` }, 150);
+  quickExitTimer = setTimeout(() => {
+    current.node.remove();
+    if (quickPreview === current) quickPreview = null;
+  }, 150);
+}
+function showQuickPreview(item, anchor) {
+  clearQuickPreview(true);
+  const preview = cardPreview(item);
+  if (!preview) return;
+  quickPreviewTimer = setTimeout(() => {
+    if (!panel || !anchor.isConnected) return;
+    const node = element("div", "qp-image-preview");
+    config.ui.surface(node, "popover");
+    config.ui.mount(node, "floating");
+    const image = element("img");
+    image.alt = text(`Full image: ${item.summary}`, `完整图片：${item.summary}`);
+    const place = () => {
+      if (quickPreview?.node !== node || !image.naturalWidth) return;
+      const r = anchor.getBoundingClientRect(), p = panel.getBoundingClientRect();
+      const right = innerWidth - p.right - 24, left = p.left - 24;
+      const available = Math.max(right, left);
+      if (available < 96) { clearQuickPreview(true); return; }
+      const scale = Math.min(280 / image.naturalWidth, available / image.naturalWidth, 360 / image.naturalHeight, (innerHeight - 24) / image.naturalHeight);
+      const width = image.naturalWidth * scale, height = image.naturalHeight * scale;
+      node.style.width = `${width}px`;
+      node.style.height = `${height}px`;
+      node.style.left = `${right >= width ? p.right + 12 : p.left - width - 12}px`;
+      node.style.top = `${Math.max(12, Math.min(r.top + (r.height - height) / 2, innerHeight - height - 12))}px`;
+      node.style.visibility = "visible";
+      if (!previewReducedMotion()) node.animate([{opacity:0,transform:"translateX(-4px) scale(.98)"},{opacity:1,transform:"none"}],{duration:180,easing:"cubic-bezier(.22,1,.36,1)"});
+    };
+    node.append(image);
+    quickPreview = {node, anchor};
+    anchor.dataset.preview = "true";
+    node.addEventListener("pointerenter", () => clearTimeout(quickPreviewTimer));
+    node.addEventListener("pointerleave", () => clearQuickPreview());
+    image.onload = place;
+    image.src = preview.data;
+    if (image.complete) place();
+  }, 160);
+}
+function quickCategoryTabs() {
+  const bar = element("div", "qp-tabs-bar");
+  const tabs = element("div", "qp-tabs");
+  tabs.setAttribute("role", "tablist");
+  tabs.setAttribute("aria-label", text("Prompt categories", "提示词分类"));
+  const choices = [{id:"all",name:text("All","全部")}, ...categories.filter(c => orderedItems(c.id).length), ...(orderedItems(null).length ? [{id:"other",name:text("Other","其他")}] : [])];
+  if (!choices.some(c => c.id === quickCategory)) quickCategory = "all";
+  for (const category of choices) {
+    const tab = control(category.name, () => { quickCategory = category.id; renderList(); panel.querySelector('[aria-selected="true"]')?.focus({preventScroll:true}); }, "qp-tab");
+    tab.setAttribute("role", "tab");
+    tab.setAttribute("aria-selected", String(category.id === quickCategory));
+    tab.setAttribute("aria-controls", "mcx-quick-results");
+    tabs.append(tab);
+  }
+  const arrows = element("div", "qp-tab-arrows");
+  const move = direction => tabs.scrollBy({left:direction * Math.max(100,tabs.clientWidth - 90), behavior:previewReducedMotion() ? "instant" : "smooth"});
+  const previous = control(text("Previous categories","前面的分类"), () => move(-1), "qp-tab-arrow qp-tab-previous", "chevron");
+  const next = control(text("More categories","后面的分类"), () => move(1), "qp-tab-arrow qp-tab-next", "chevron");
+  arrows.append(previous,next);
+  bar.append(tabs,arrows);
+  const update = () => {
+    const naturalWidth = [...tabs.children].reduce((width, tab) => width + tab.offsetWidth + 2, -2);
+    const overflow = naturalWidth > tabs.clientWidth + 1;
+    previous.hidden = !overflow || tabs.scrollLeft <= 1;
+    next.hidden = !overflow || tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 1;
+    arrows.hidden = !overflow;
+    bar.dataset.overflow = String(overflow);
+    tabs.style.setProperty("--qp-arrow-space", `${overflow ? 68 : 0}px`);
+  };
+  tabs.addEventListener("scroll", update, {passive:true});
+  tabs.addEventListener("keydown", event => {
+    if (!["ArrowLeft","ArrowRight"].includes(event.key)) return;
+    event.preventDefault();
+    const buttons = [...tabs.children], i = buttons.indexOf(document.activeElement);
+    const target = buttons[Math.max(0,Math.min(buttons.length-1,i+(event.key === "ArrowRight" ? 1 : -1)))];
+    target?.focus();
+  });
+  quickTabsObserver = new ResizeObserver(update);
+  quickTabsObserver.observe(tabs);
+  requestAnimationFrame(() => { if (!bar.isConnected) return; update(); const selected=tabs.querySelector('[aria-selected="true"]'); if(selected) tabs.scrollLeft = Math.max(0,selected.offsetLeft-tabs.offsetLeft-tabs.clientWidth+selected.offsetWidth+68); update(); });
+  return bar;
+}
+
 // 输入框 Popover：只浏览与插入
 async function loadList() {
   const current = ++generation;
@@ -143,6 +248,8 @@ function orderedItems(categoryId) {
     );
 }
 function renderList() {
+  clearQuickPreview(true);
+  quickTabsObserver?.disconnect();
   panel.replaceChildren();
   const list = element("div", "qp-scroll");
   if (!items.length)
@@ -153,15 +260,19 @@ function renderList() {
     .filter((item) => item.useCount > 0)
     .sort((a, b) => b.calledAt - a.calledAt || a.id.localeCompare(b.id))
     .slice(0, 3);
+  panel.append(quickCategoryTabs());
+  list.id = "mcx-quick-results";
+  let lastScroll = 0;
+  list.addEventListener("scroll", () => { const delta = lastScroll - list.scrollTop; lastScroll = list.scrollTop; clearQuickPreview(false, delta); }, {passive:true});
   const sections = [
-    { name: text("Recently used", "最近使用"), prompts: recent },
+    { id:"recent", name: text("Recently used", "最近使用"), prompts: recent },
     ...categories.map((category) => ({
-      name: category.name,
+      id: category.id, name: category.name,
       prompts: orderedItems(category.id),
     })),
-    { name: text("Other", "其他"), prompts: orderedItems(null) },
+    { id:"other", name: text("Other", "其他"), prompts: orderedItems(null) },
   ];
-  for (const section of sections.filter((section) => section.prompts.length)) {
+  for (const section of sections.filter((section) => section.prompts.length && (quickCategory === "all" || section.id === quickCategory))) {
     list.append(element("div", "qp-header", section.name));
     for (const item of section.prompts) {
       const row = element("div", "qp-row");
@@ -192,10 +303,15 @@ function renderList() {
         insert.append(
           element("span", "qp-preview", item.body.replace(/\s+/g, " ")),
         );
+      insert.addEventListener("pointerenter", () => showQuickPreview(item, insert));
+      insert.addEventListener("focus", () => showQuickPreview(item, insert));
+      insert.addEventListener("pointerleave", () => { clearTimeout(quickPreviewTimer); quickPreviewTimer = setTimeout(() => clearQuickPreview(), 100); });
+      insert.addEventListener("blur", () => clearQuickPreview());
       row.append(insert);
       list.append(row);
     }
   }
+  if (!list.children.length) list.append(element("div", "qp-empty", text("No prompts yet", "还没有提示词")));
   panel.append(list);
   position();
 }
@@ -292,6 +408,9 @@ let page = null;
 let pageGeneration = 0;
 let activeCategory = "all";
 let pageSort = "manual";
+let pageView = "cards";
+try { pageView = localStorage.getItem("minecodex.prompts.view") === "list" ? "list" : "cards"; } catch {}
+let cardResizeObserver = null;
 let searchText = "";
 let editor = null;
 let pageFocus = null;
@@ -329,6 +448,8 @@ function restoreNavigationSelection() {
 }
 function closePage(restoreFocus = false, restoreNavigation = true) {
   dragState?.cancel();
+  closeImagePreview();
+  cardResizeObserver?.disconnect();
   pageGeneration++;
   closePagePopup();
   closeEditor(false);
@@ -381,7 +502,7 @@ function openPage() {
   syncNavigationSelection();
   positionPage();
   page.append(element("div", "pm-empty", text("Loading…", "加载中…")));
-  void loadPage();
+  return loadPage();
 }
 let pagePopup = null;
 let popupTrigger = null;
@@ -541,6 +662,7 @@ function renderPage() {
   actions.append(
     sortButton,
     pageIcon(text("Edit categories", "编辑分类"), "settings", manageCategories),
+    viewSwitcher(),
     searchField,
     pageControl(text("New prompt", "新建提示词"), () => editPrompt(), true),
   );
@@ -594,7 +716,10 @@ function renderPage() {
   renderRows(list);
 }
 function renderRows(list) {
+  closeImagePreview();
+  cardResizeObserver?.disconnect();
   list.replaceChildren();
+  list.dataset.view = pageView;
   const query = searchText.trim().toLocaleLowerCase();
   const groups = [...categories, { id: null, name: text("Other", "其他") }];
   let shown = items.filter(
@@ -617,21 +742,28 @@ function renderRows(list) {
   if (pageSort === "recent")
     shown.sort((a, b) => (b.calledAt ?? 0) - (a.calledAt ?? 0));
   const sections =
-    pageSort === "manual"
+    (pageSort === "manual" || pageView === "cards")
       ? groups
           .map((c) => ({
             name: c.name,
-            items: orderedItems(c.id).filter((p) => shown.includes(p)),
+            items: pageSort === "manual"
+              ? orderedItems(c.id).filter((p) => shown.includes(p))
+              : shown.filter((p) => p.categoryId === c.id),
           }))
           .filter((c) => c.items.length)
       : [{ items: shown }];
   for (const section of sections) {
     if (section.name && activeCategory === "all")
       list.append(element("h2", "", section.name));
+    if (pageView === "cards") {
+      list.append(renderCardSection(section));
+      continue;
+    }
     for (const item of section.items) {
       const row = element("div", "pm-row");
       row.dataset.promptId = item.id;
-      const info = control(item.summary, () => editPrompt(item), "pm-info");
+      const use = control(text(`Use ${item.summary}`, `使用 ${item.summary}`), () => void usePagePrompt(item, use), "pm-list-use");
+      const info = element("div", "pm-info");
       info.replaceChildren(
         element("div", "pm-title", item.summary),
         element("div", "pm-preview", item.body.replace(/\s+/g, " ")),
@@ -650,7 +782,8 @@ function renderRows(list) {
             : text(`${item.useCount} ${item.useCount === 1 ? "call" : "calls"}`, `${item.useCount} 次调用`),
         ),
       );
-      row.append(categoryIcon(item), info, stats);
+      use.replaceChildren(categoryIcon(item), info, stats);
+      row.append(use, pageIcon(text("Edit prompt", "编辑提示词"), "square-pen", () => editPrompt(item)));
       if (pageSort === "manual" && !query)
         row.append(
           orderControls(item, orderedItems(item.categoryId), false, row),
@@ -659,6 +792,241 @@ function renderRows(list) {
     }
   }
 }
+function viewSwitcher() {
+  const group = element("div", "pm-view-switch");
+  group.setAttribute("role", "group");
+  group.setAttribute("aria-label", text("View", "视图"));
+  for (const [value, label] of [["cards", text("Cards", "卡片")], ["list", text("List", "列表")]]) {
+    const button = control(label, () => {
+      pageView = value;
+      try { localStorage.setItem("minecodex.prompts.view", value); } catch {}
+      for (const child of group.children) child.setAttribute("aria-pressed", String(child === button));
+      renderRows(page.querySelector(".pm-list"));
+    }, "pm-view-option", value === "cards" ? "layout-grid" : "list");
+    button.setAttribute("aria-pressed", String(pageView === value));
+    group.append(button);
+  }
+  return group;
+}
+function cardPreview(item) {
+  // 当前只有分类语义，占位图不写入用户提示词，也不冒充生成结果。
+  const category = categories.find((c) => c.id === item.categoryId);
+  if (!/^(生图|图像生成|图片生成|image generation|images?)$/i.test(category?.name?.trim() ?? "")) return null;
+  const previews = config.resources.previews ?? [];
+  const index = orderedItems(item.categoryId).findIndex((p) => p.id === item.id);
+  return previews[index % previews.length] ?? null;
+}
+async function usePagePrompt(item, trigger) {
+  trigger.disabled = true;
+  closePage();
+  try {
+    // Page 归还原路由后等待输入框挂载；不自动发送消息。
+    let editable = null;
+    for (let attempt = 0; attempt < 40 && !signal.aborted; attempt++) {
+      editable = config.codex.composer(null, { purpose: "insertion" })?.editable;
+      if (editable) break;
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+    if (signal.aborted) return;
+    if (!editable) throw new Error("Open a chat before using a prompt.");
+    window.__codexPersonalRuntime.insertText(item.body, editable);
+  } catch (error) {
+    await openPage();
+    pageError(error);
+    return;
+  }
+  try {
+    await api(`/api/prompts/${encodeURIComponent(item.id)}/use`, {
+      method: "POST", body: { action: "insert", success: true },
+    });
+  } catch (error) {
+    // 正文已插入，计数失败不能再次插入。
+    console.warn("[Prompts] Usage could not be saved", error);
+  }
+}
+let imagePreview = null;
+let imagePreviewAnchor = null;
+let imagePreviewTimer = null;
+let imagePreviewSpotlight = null;
+let imagePreviewExitTimer = null;
+const previewReducedMotion = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
+function tweenPreview(node, target, duration) {
+  if (!node) return;
+  const computed = getComputedStyle(node);
+  const from = { opacity:computed.opacity, transform:computed.transform };
+  node.getAnimations().forEach((animation) => animation.cancel());
+  node.animate([from, target], { duration, easing:"cubic-bezier(.22,1,.36,1)", fill:"forwards" });
+}
+function retainImagePreview() {
+  clearTimeout(imagePreviewTimer);
+  if (imagePreviewExitTimer === null) return;
+  clearTimeout(imagePreviewExitTimer);
+  imagePreviewExitTimer = null;
+  tweenPreview(imagePreview, { opacity:1, transform:"none" }, 180);
+  tweenPreview(imagePreviewSpotlight?.overlay, { opacity:1, transform:"none" }, 180);
+}
+function dismissImagePreview() {
+  clearTimeout(imagePreviewTimer);
+  if (!imagePreview || previewReducedMotion()) { closeImagePreview(); return; }
+  if (imagePreviewExitTimer !== null) return;
+  tweenPreview(imagePreview, { opacity:0, transform:"scale(.97)" }, 160);
+  tweenPreview(imagePreviewSpotlight?.overlay, { opacity:0, transform:"none" }, 180);
+  imagePreviewExitTimer = setTimeout(closeImagePreview, 180);
+}
+function closeImagePreview() {
+  clearTimeout(imagePreviewExitTimer);
+  imagePreviewExitTimer = null;
+  clearTimeout(imagePreviewTimer);
+  imagePreviewAnchor?.removeAttribute("aria-describedby");
+  imagePreview?.remove();
+  if (imagePreviewSpotlight) {
+    const { card, placeholder, layer, overlay, cssText } = imagePreviewSpotlight;
+    card.style.cssText = cssText;
+    placeholder.replaceWith(card);
+    layer.remove();
+    overlay.remove();
+    imagePreviewSpotlight = null;
+  }
+  imagePreview = null;
+  imagePreviewAnchor = null;
+}
+function deferImagePreviewClose() {
+  if (document.activeElement === imagePreviewAnchor) return;
+  clearTimeout(imagePreviewTimer);
+  imagePreviewTimer = setTimeout(dismissImagePreview, 100);
+}
+function showImagePreview(anchor, preview, title) {
+  if (imagePreviewAnchor === anchor && imagePreview) {
+    retainImagePreview();
+    return;
+  }
+  closeImagePreview();
+  imagePreviewAnchor = anchor;
+  imagePreviewTimer = setTimeout(() => {
+    if (!anchor.isConnected || !page || signal.aborted) return;
+    const panel = element("div", "pm-image-preview");
+    panel.id = "mcx-prompt-image-preview";
+    panel.setAttribute("role", "tooltip");
+    config.ui.surface(panel, "popover");
+    const image = element("img");
+    image.alt = text(`Full image: ${title}`, `完整图片：${title}`);
+    const position = () => {
+      if (imagePreview !== panel || !image.naturalWidth) return;
+      const r = anchor.getBoundingClientRect();
+      const scale = Math.min(520 / image.naturalWidth, (innerHeight - 40) / image.naturalHeight, (innerWidth - 40) / image.naturalWidth, 640 / image.naturalHeight);
+      const width = image.naturalWidth * scale;
+      const height = image.naturalHeight * scale;
+      panel.style.width = `${width}px`;
+      panel.style.height = `${height}px`;
+      const right = r.right + 12;
+      const left = r.left - width - 12;
+      panel.style.left = `${Math.max(14, Math.min(right + width <= innerWidth - 14 ? right : left >= 14 ? left : r.left + (r.width - width) / 2, innerWidth - width - 14))}px`;
+      panel.style.top = `${Math.max(14, Math.min(r.top + (r.height - height) / 2, innerHeight - height - 14))}px`;
+      panel.style.transformOrigin = `${Math.max(0, Math.min(width, r.left + r.width / 2 - parseFloat(panel.style.left)))}px ${Math.max(0, Math.min(height, r.top + r.height / 2 - parseFloat(panel.style.top)))}px`;
+      panel.style.visibility = "visible";
+      if (!panel.dataset.entered && !previewReducedMotion()) {
+        panel.animate([{ opacity:0, transform:"scale(.96)" }, { opacity:1, transform:"none" }], { duration:240, easing:"cubic-bezier(.22,1,.36,1)", fill:"forwards" });
+      }
+      panel.dataset.entered = "true";
+    };
+    image.addEventListener("load", position, { once: true });
+    image.src = preview.data;
+    panel.append(image);
+    panel.addEventListener("pointerenter", retainImagePreview);
+    panel.addEventListener("pointerleave", deferImagePreviewClose);
+    imagePreview = panel;
+    // 原卡片移入浮层，避开书架的 mask / overflow；占位保持页面不跳动。
+    const card = anchor.closest(".pm-card");
+    const rect = card.getBoundingClientRect();
+    const placeholder = element("div");
+    placeholder.style.width = `${rect.width}px`;
+    placeholder.style.height = `${rect.height}px`;
+    const overlay = element("div", "pm-preview-overlay");
+    config.ui.overlay(overlay);
+    config.ui.layer(overlay, "floating");
+    overlay.addEventListener("pointerdown", dismissImagePreview);
+    const layer = element("div", "pm-preview-spotlight");
+    layer.setAttribute(MARKER, "page");
+    config.ui.layer(layer, "floating");
+    const cssText = card.style.cssText;
+    imagePreviewSpotlight = { card, placeholder, layer, overlay, cssText };
+    card.replaceWith(placeholder);
+    Object.assign(card.style, { position:"absolute", left:`${rect.left}px`, top:`${rect.top}px`, width:`${rect.width}px`, height:`${rect.height}px`, pointerEvents:"auto" });
+    layer.append(card);
+    document.body.append(overlay, layer);
+    if (!previewReducedMotion()) overlay.animate([{ opacity:0 }, { opacity:1 }], { duration:220, easing:"cubic-bezier(.22,1,.36,1)", fill:"forwards" });
+    anchor.setAttribute("aria-describedby", panel.id);
+    document.body.append(panel);
+    position();
+  }, 200);
+}
+window.addEventListener("scroll", closeImagePreview, { capture:true, signal });
+window.addEventListener("resize", closeImagePreview, { signal });
+window.addEventListener("blur", closeImagePreview, { signal });
+window.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && imagePreviewAnchor) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    dismissImagePreview();
+  }
+}, { capture:true, signal });
+signal.addEventListener("abort", closeImagePreview, { once:true });
+function renderCardSection(section) {
+  const shelf = element("div", activeCategory === "all" ? "pm-card-shelf" : "pm-card-grid");
+  if (activeCategory === "all") {
+    shelf.tabIndex = 0;
+    shelf.setAttribute("role", "region");
+    shelf.setAttribute("aria-label", section.name);
+    const updateEdges = () => {
+      shelf.dataset.left = String(shelf.scrollLeft > 3);
+      shelf.dataset.right = String(shelf.scrollLeft + shelf.clientWidth < shelf.scrollWidth - 3);
+    };
+    shelf.addEventListener("scroll", updateEdges, { passive: true });
+    cardResizeObserver ??= new ResizeObserver((entries) => {
+      for (const { target } of entries) target.dispatchEvent(new Event("scroll"));
+    });
+    cardResizeObserver.observe(shelf);
+    requestAnimationFrame(updateEdges);
+  }
+  for (const item of section.items) {
+    const preview = cardPreview(item);
+    const card = element("article", `pm-card${preview ? " pm-card-image" : ""}`);
+    card.dataset.promptId = item.id;
+    card.addEventListener("pointerenter", () => {
+      if (imagePreviewSpotlight?.card === card) retainImagePreview();
+    });
+    card.addEventListener("pointerleave", () => {
+      if (imagePreviewSpotlight?.card === card) deferImagePreviewClose();
+    });
+    if (preview) {
+      const cover = control(text("Edit prompt", "编辑提示词"), () => editPrompt(item), "pm-card-cover");
+      const image = element("img");
+      image.src = preview.data;
+      image.alt = "";
+      image.loading = "lazy";
+      cover.replaceChildren(image);
+      cover.addEventListener("pointerenter", (event) => {
+        if (event.pointerType !== "touch") showImagePreview(cover, preview, item.summary);
+      });
+      cover.addEventListener("pointerleave", (event) => {
+        if (!card.contains(event.relatedTarget)) deferImagePreviewClose();
+      });
+      cover.addEventListener("focus", () => showImagePreview(cover, preview, item.summary));
+      cover.addEventListener("blur", deferImagePreviewClose);
+      cover.addEventListener("click", closeImagePreview);
+      card.append(cover);
+    }
+    const content = control(item.summary, () => editPrompt(item), "pm-card-content");
+    content.replaceChildren(categoryIcon(item), element("h3", "pm-card-title", item.summary), element("p", "pm-card-body", item.body));
+    const footer = element("div", "pm-card-footer");
+    const use = pageControl(text("Use", "使用"), () => void usePagePrompt(item, use));
+    use.setAttribute("aria-label", text(`Use ${item.summary}`, `使用 ${item.summary}`));
+    footer.append(element("span", "pm-count", text(`${item.useCount} ${item.useCount === 1 ? "call" : "calls"}`, `${item.useCount} 次调用`)), use);
+    card.append(content, footer);
+    shelf.append(card);
+  }
+  return shelf;
+}
 function emptyState(searching) {
   const empty = element("div", "pm-empty-state");
   const art = element("span", "pm-empty-art", searching ? "🔎" : "📖");
@@ -876,6 +1244,7 @@ function editorShell(title, back = null) {
   return editor;
 }
 function editPrompt(item = null) {
+  closeImagePreview();
   const target = editorShell(
     item ? text("Edit prompt", "编辑提示词") : text("New prompt", "新建提示词"),
   );
@@ -1345,6 +1714,7 @@ document.addEventListener(
     if (
       panel &&
       !panel.contains(event.target) &&
+      !quickPreview?.node.contains(event.target) &&
       !button?.contains(event.target)
     )
       close();
@@ -1373,7 +1743,7 @@ document.addEventListener(
   },
   { signal, capture: true },
 );
-window.addEventListener("resize", position, { signal });
+window.addEventListener("resize", () => { clearQuickPreview(true); position(); }, { signal });
 window.addEventListener("scroll", position, { signal, capture: true });
 sync();
 

package/features/notes/src/frontend/icons.json

@@ -9,5 +9,8 @@
   "settings": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.33374 8.97461C7.54786 8.97484 8.56163 9.83236 8.80347 10.9746H13.3337C13.6235 10.9749 13.8591 11.2102 13.8591 11.5C13.8591 11.7898 13.6235 12.0251 13.3337 12.0254H8.80347C8.56163 13.1676 7.54786 14.0252 6.33374 14.0254C5.11907 14.0254 4.10455 13.1673 3.86304 12.0244L2.66675 12.0254C2.37691 12.0253 2.14138 11.7899 2.14136 11.5C2.14136 11.2102 2.37693 10.9748 2.66675 10.9746H3.86304C4.10491 9.83221 5.11941 8.97461 6.33374 8.97461ZM6.33374 10.0254C5.51912 10.0254 4.85913 10.6854 4.85913 11.5C4.85913 12.3146 5.51912 12.9746 6.33374 12.9746C7.14814 12.9743 7.80835 12.3145 7.80835 11.5C7.80835 10.6855 7.14814 10.0257 6.33374 10.0254Z\" fill=\"currentColor\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.66675 1.97461C10.881 1.97461 11.8935 2.83236 12.1355 3.97461H13.3328C13.6227 3.97459 13.8581 4.21005 13.8582 4.5C13.8581 4.78993 13.6227 5.02537 13.3328 5.02539H12.1365C11.8946 6.16774 10.881 7.02539 9.66675 7.02539C8.45245 7.02539 7.43893 6.16774 7.19702 5.02539H2.66675C2.3768 5.02539 2.14136 4.78995 2.14136 4.5C2.14136 4.21005 2.3768 3.97461 2.66675 3.97461H7.19702C7.43893 2.83226 8.45245 1.97461 9.66675 1.97461ZM9.66675 3.02539C8.85213 3.02539 8.19214 3.68538 8.19214 4.5C8.19214 5.31462 8.85213 5.97461 9.66675 5.97461C10.4814 5.97461 11.1414 5.31462 11.1414 4.5C11.1414 3.68538 10.4814 3.02539 9.66675 3.02539Z\" fill=\"currentColor\"/></svg>",
   "drag": "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <path d=\"M4 5h16\" />\n  <path d=\"M4 12h16\" />\n  <path d=\"M4 19h16\" />\n</svg>\n",
   "prompt-nav": "<svg\n  class=\"lucide lucide-book-open\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"20\"\n  height=\"20\"\n  viewBox=\"-1.5 -1.5 27 27\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"1.8\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <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\" />\n</svg>",
-  "prompt-nav-selected": "<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56V200a8,8,0,0,1-8,8H160a24,24,0,0,0-24,23.94,7.9,7.9,0,0,1-5.12,7.55A8,8,0,0,1,120,232a24,24,0,0,0-24-24H24a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H88a32,32,0,0,1,32,32v87.73a8.17,8.17,0,0,0,7.47,8.25,8,8,0,0,0,8.53-8V80a32,32,0,0,1,32-32h64A8,8,0,0,1,240,56Z\"/></svg>"
+  "prompt-nav-selected": "<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56V200a8,8,0,0,1-8,8H160a24,24,0,0,0-24,23.94,7.9,7.9,0,0,1-5.12,7.55A8,8,0,0,1,120,232a24,24,0,0,0-24-24H24a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H88a32,32,0,0,1,32,32v87.73a8.17,8.17,0,0,0,7.47,8.25,8,8,0,0,0,8.53-8V80a32,32,0,0,1,32-32h64A8,8,0,0,1,240,56Z\"/></svg>",
+  "layout-grid": "<!-- Lucide, ISC license; see assets/brand/references/lucide-LICENSE.txt -->\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\" />\n  <rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\" />\n  <rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\" />\n  <rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\" />\n</svg>\n",
+  "list": "<!-- Lucide, ISC license; see assets/brand/references/lucide-LICENSE.txt -->\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <path d=\"M3 5h.01\" />\n  <path d=\"M3 12h.01\" />\n  <path d=\"M3 19h.01\" />\n  <path d=\"M8 5h13\" />\n  <path d=\"M8 12h13\" />\n  <path d=\"M8 19h13\" />\n</svg>\n",
+  "square-pen": "<!-- Lucide, ISC license; see assets/brand/references/lucide-LICENSE.txt -->\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n  <path d=\"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z\" />\n</svg>\n"
 }

package/features/notes/src/frontend/styles.css

@@ -108,3 +108,66 @@
   :is([data-minecodex-quick-prompts=page],[data-minecodex-quick-prompts=modal]) .pm-emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; max-height:264px; overflow:auto; }
   :is([data-minecodex-quick-prompts=page],[data-minecodex-quick-prompts=modal]) .pm-emoji-grid .pm-emoji-choice { width:32px; height:32px; min-height:32px; padding:0; display:flex; justify-content:center; font-size:22px; border-radius:var(--mcx-radius-lg); }
   :is([data-minecodex-quick-prompts=page],[data-minecodex-quick-prompts=modal]) .pm-emoji-choice[aria-pressed=true] { background:var(--mcx-color-background-primary-ghost-hover); }
+
+/* 全页面卡片：All 横向书架，单分类自适应网格。 */
+[data-minecodex-quick-prompts=page] {
+  --pm-card-width:292px;
+  --pm-card-height:344px;
+  --pm-image-card-height:416px;
+  --pm-card-gap:16px;
+}
+[data-minecodex-quick-prompts=page] .pm-view-switch { display:flex; flex:none; gap:2px; padding:3px; border-radius:var(--mcx-radius-full); background:var(--mcx-color-background-primary-ghost-hover); }
+[data-minecodex-quick-prompts=page] .pm-view-option { display:flex; align-items:center; justify-content:center; width:32px; height:28px; padding:0; border-radius:inherit; color:var(--mcx-color-text-secondary); white-space:nowrap; }
+[data-minecodex-quick-prompts=page] .pm-view-option[aria-pressed=true] { background:var(--mcx-color-surface); color:var(--mcx-color-text-primary); box-shadow:0 1px 4px #00000012; }
+[data-minecodex-quick-prompts=page] .pm-list[data-view=cards] { gap:0; }
+[data-minecodex-quick-prompts=page] .pm-list[data-view=cards]>h2 { margin:24px 0 14px; }
+[data-minecodex-quick-prompts=page] .pm-card-shelf { display:grid; grid-auto-flow:column; grid-auto-columns:min(var(--pm-card-width), 86%); gap:var(--pm-card-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:2px; padding:4px 2px 18px; margin:0 -2px 8px; scrollbar-width:thin; --pm-fade-left:#000; --pm-fade-right:#000; mask-image:linear-gradient(to right,var(--pm-fade-left),#000 32px,#000 calc(100% - 48px),var(--pm-fade-right)); }
+[data-minecodex-quick-prompts=page] .pm-card-shelf[data-left=true] { --pm-fade-left:transparent; }
+[data-minecodex-quick-prompts=page] .pm-card-shelf[data-right=true] { --pm-fade-right:transparent; }
+[data-minecodex-quick-prompts=page] .pm-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:var(--pm-card-gap); padding:4px 2px 18px; }
+[data-minecodex-quick-prompts=page] .pm-card { display:flex; flex-direction:column; height:var(--pm-card-height); min-width:0; border:1px solid var(--mcx-color-border-subtle,var(--mcx-color-border)); border-radius:var(--mcx-radius-2xl); background:var(--mcx-color-surface); box-shadow:0 4px 16px -6px #00000012; scroll-snap-align:start; overflow:hidden; transition:box-shadow 160ms ease,border-color 160ms ease; }
+[data-minecodex-quick-prompts=page] .pm-card:hover, [data-minecodex-quick-prompts=page] .pm-card:focus-within { border-color:var(--mcx-color-border-primary-outline); box-shadow:0 6px 22px -6px #0000001a; }
+[data-minecodex-quick-prompts=page] .pm-card-content { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:22px 22px 0; min-height:0; flex:1; overflow:hidden; }
+[data-minecodex-quick-prompts=page] .pm-card-title { margin:14px 0 8px; font-size:var(--mcx-text-base); font-weight:var(--font-weight-medium,500); line-height:1.4; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
+[data-minecodex-quick-prompts=page] .pm-card-body { margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; overflow:hidden; color:var(--mcx-color-text-tertiary); font-size:var(--mcx-text-sm); line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
+[data-minecodex-quick-prompts=page] .pm-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px 20px; flex:none; }
+[data-minecodex-quick-prompts=page] .pm-card-footer .pm-command { min-height:30px; height:30px; padding:4px 14px; }
+[data-minecodex-quick-prompts=page] .pm-card-image { height:var(--pm-image-card-height); }
+[data-minecodex-quick-prompts=page] .pm-card-cover { position:relative; width:100%; height:160px; flex:none; overflow:hidden; background:var(--mcx-color-background-primary-ghost-hover); padding:0; }
+[data-minecodex-quick-prompts=page] .pm-card-cover img { width:100%; height:100%; object-fit:cover; object-position:center; }
+[data-minecodex-quick-prompts=page] .pm-card-image .pm-card-content { padding-top:18px; }
+[data-minecodex-quick-prompts=page] .pm-card-image .pm-card-body { -webkit-line-clamp:4; }
+@media (max-width:900px) {
+  [data-minecodex-quick-prompts=page] .pm-heading { align-items:flex-start; flex-wrap:wrap; }
+  [data-minecodex-quick-prompts=page] .pm-header-actions { flex-wrap:wrap; max-width:100%; }
+}
+@media (prefers-reduced-motion:reduce) {
+  [data-minecodex-quick-prompts=page] .pm-card { transition:none; }
+}
+[data-minecodex-quick-prompts=page] .pm-card-footer .pm-command { box-shadow:inset 0 0 0 1px var(--mcx-color-border-primary-outline); }
+[data-minecodex-quick-prompts=page] .pm-card-content:focus-visible, [data-minecodex-quick-prompts=page] .pm-card-cover:focus-visible { outline-offset:-3px; }
+
+[data-minecodex-quick-prompts=page] .pm-view-option svg { width:16px; height:16px; }
+[data-minecodex-quick-prompts=page] .pm-list-use { display:flex; align-items:center; gap:12px; flex:1; min-width:0; align-self:stretch; text-align:left; }
+
+.pm-image-preview { position:fixed; visibility:hidden; padding:0; box-sizing:border-box; border-radius:var(--mcx-radius-2xl); overflow:hidden; }
+.pm-image-preview img { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; }
+
+.pm-preview-overlay { position:fixed; inset:0; }
+[data-minecodex-quick-prompts=page].pm-preview-spotlight { position:fixed; inset:0; overflow:visible; pointer-events:none; }
+
+/* Quick Prompts：固定分类栏，箭头覆盖渐隐尾端，列表保持原生单行密度。 */
+[data-minecodex-quick-prompts=panel] .qp-tabs-bar { position:relative; flex:none; padding:4px 4px 8px; border-bottom:1px solid var(--mcx-color-border); margin-bottom:4px; }
+[data-minecodex-quick-prompts=panel] .qp-tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding-right:var(--qp-arrow-space,0px); }
+[data-minecodex-quick-prompts=panel] .qp-tabs::-webkit-scrollbar { display:none; }
+[data-minecodex-quick-prompts=panel] .qp-tabs-bar[data-overflow=true] .qp-tabs { mask-image:linear-gradient(to right,#000 calc(100% - 90px),transparent calc(100% - 60px)); }
+[data-minecodex-quick-prompts=panel] .qp-tab { flex:none; white-space:nowrap; padding:6px 12px; border-radius:var(--mcx-radius-full); color:var(--mcx-color-text-secondary); }
+[data-minecodex-quick-prompts=panel] .qp-tab[aria-selected=true], [data-minecodex-quick-prompts=panel] .qp-tab:hover, [data-minecodex-quick-prompts=panel] .qp-tab-arrow:hover, [data-minecodex-quick-prompts=panel] .qp-select[data-preview=true] { background:var(--mcx-color-background-primary-ghost-hover); color:var(--mcx-color-text-primary); }
+[data-minecodex-quick-prompts=panel] .qp-tab-arrows { position:absolute; right:4px; top:4px; display:flex; gap:2px; }
+[data-minecodex-quick-prompts=panel] .qp-tab-arrow { display:flex; align-items:center; justify-content:center; width:28px; height:30px; border-radius:var(--mcx-radius-full); }
+[data-minecodex-quick-prompts=panel] .qp-tab-previous svg { transform:rotate(90deg); }
+[data-minecodex-quick-prompts=panel] .qp-tab-next svg { transform:rotate(-90deg); }
+[data-minecodex-quick-prompts=panel] [hidden] { display:none!important; }
+[data-minecodex-quick-prompts=panel] .qp-title { max-width:55%; flex-shrink:0; }
+.qp-image-preview { position:fixed; visibility:hidden; padding:0; overflow:hidden; border-radius:var(--mcx-radius-2xl); transform-origin:left center; }
+.qp-image-preview img { display:block; width:100%; height:100%; object-fit:contain; }