openclacky 1.4.0 → 1.4.1

data/lib/clacky/default_extensions/ext-studio/panels/studio/view.js

@@ -50,6 +50,12 @@
       "err.generic": "Something went wrong: {{msg}}",
       "err.version_conflict": "Version {{ver}} has already been published. Please enter a higher version number above and try again.",
       "err.invalid_version": "Invalid version. Use format like 1.0.0.",
+      "err.name_taken": "The name \"{{id}}\" is already taken by another user.",
+      "rename.label": "Choose a new ID for your extension:",
+      "rename.placeholder": "e.g. my-ext-yourname",
+      "rename.hint": "Only lowercase letters, digits and hyphens. This will rename the local folder and update ext.yml.",
+      "rename.btn": "Rename & Publish",
+      "rename.renaming": "Renaming…",
       "pub.version.label": "Version",
 
       "publish.confirm.title": "Publish to the marketplace?",
@@ -89,6 +95,27 @@
       "pub.success": "Published successfully",
       "pub.done.close": "Done",
       "pub.retry": "Try again",
+      "pub.readme.placeholder": "## Overview\n\nDescribe what your extension does...",
+      "pub.screenshot.upload": "Upload screenshot",
+      "pub.screenshot.uploading": "Uploading…",
+      "pub.screenshot.section": "Screenshots",
+      "pub.screenshot.hint": "PNG / JPG / GIF, up to 5 MB each",
+      "pub.screenshot.err": "Upload failed: {{msg}}",
+      "pub.screenshot.err.type": "Only PNG / JPG / GIF are allowed",
+      "pub.screenshot.err.size": "File size must be under 5 MB",
+      "pub.readme.edit.title": "Edit README",
+      "readme.pane.editor": "Markdown editor",
+      "readme.pane.preview": "Preview",
+      "pub.readme.edit": "Edit",
+      "pub.readme.section": "Description",
+      "pub.readme.empty": "No description yet — click Edit to add one.",
+      "pub.readme.save.empty": "Description cannot be empty.",
+      "pub.readme.required": "Please add a description (README) before publishing.",
+      "pub.readme.required.skip": "Skip, publish anyway",
+      "pub.readme.required.edit": "Add description",
+      "pub.readme.save": "Save",
+      "pub.readme.saving": "Saving…",
+      "pub.readme.skip": "Skip",
       "extlist.section.cloud": "Published Extensions",
       "extlist.section.cloudHint": "Live on the marketplace",
       "extlist.section.local": "Local Extensions",
@@ -138,25 +165,6 @@
       "meta.saved": "Saved",
       "meta.save.err": "Save failed: {{msg}}",
 
-      "entry.warn.title": "Access entry point not configured",
-      "entry.warn.body": "This extension has UI panels but no entry point is set. Users won't know how to open it after installing.",
-      "entry.warn.setup": "Set up entry point",
-      "entry.warn.skip": "Ignore and continue",
-      "entry.hint": "Choose where users can open this extension after installing it.",
-      "entry.none": "This extension has no UI panels — no entry points needed.",
-      "entry.unset": "Not configured — click Edit to set up.",
-      "entry.slot.label": "Slot",
-      "entry.kind.panel": "Panel",
-      "entry.add": "Add entry point",
-      "entry.remove": "Remove",
-
-      "slot.sidebar.nav": "Sidebar nav",
-      "slot.sidebar.nav.top": "Sidebar nav (top)",
-      "slot.sidebar.nav.bottom": "Sidebar nav (bottom)",
-      "slot.sidebar.footer": "Sidebar footer",
-      "slot.main.workspace": "Main workspace",
-      "slot.session.aside": "Session aside",
-      "slot.settings.tabs": "Settings tab",
       "skills.section.cloud": "Cloud Skills",
       "skills.section.cloudHint": "Published to the platform",
       "skills.section.local": "Local Skills",
@@ -226,6 +234,12 @@
       "err.generic": "出错了：{{msg}}",
       "err.version_conflict": "版本 {{ver}} 已发布过，请在上方输入更高的版本号后重试。",
       "err.invalid_version": "版本号格式不对，请使用如 1.0.0 的格式。",
+      "err.name_taken": "扩展名「{{id}}」已被其他用户占用。",
+      "rename.label": "请为你的扩展选择一个新 ID：",
+      "rename.placeholder": "例如 my-ext-yourname",
+      "rename.hint": "只能使用小写字母、数字和连字符。",
+      "rename.btn": "重命名并发布",
+      "rename.renaming": "重命名中…",
       "pub.version.label": "版本号",
 
       "publish.confirm.title": "确定发布到市场？",
@@ -265,6 +279,27 @@
       "pub.success": "已发布成功",
       "pub.done.close": "完成",
       "pub.retry": "重试",
+      "pub.readme.placeholder": "## 简介\n\n描述你的扩展的功能…",
+      "pub.screenshot.upload": "上传截图",
+      "pub.screenshot.uploading": "上传中…",
+      "pub.screenshot.section": "截图",
+      "pub.screenshot.hint": "PNG / JPG / GIF，每张最大 5 MB",
+      "pub.screenshot.err": "上传失败：{{msg}}",
+      "pub.screenshot.err.type": "仅支持 PNG / JPG / GIF 格式",
+      "pub.screenshot.err.size": "文件大小不能超过 5 MB",
+      "pub.readme.edit.title": "编辑使用说明",
+      "readme.pane.editor": "Markdown 编写",
+      "readme.pane.preview": "预览",
+      "pub.readme.edit": "编辑",
+      "pub.readme.section": "使用说明",
+      "pub.readme.empty": "暂无说明 — 点击编辑添加。",
+      "pub.readme.save.empty": "使用说明不能为空。",
+      "pub.readme.required": "发布前请先填写使用说明。",
+      "pub.readme.required.skip": "忽略，继续发布",
+      "pub.readme.required.edit": "去填写",
+      "pub.readme.save": "保存",
+      "pub.readme.saving": "保存中…",
+      "pub.readme.skip": "跳过",
       "extlist.section.cloud": "已发布扩展",
       "extlist.section.cloudHint": "已上架到市场",
       "extlist.section.local": "本地扩展",
@@ -314,26 +349,6 @@
       "meta.saved": "已保存",
       "meta.save.err": "保存失败：{{msg}}",
 
-      "entry.section": "访问入口",
-      "entry.warn.title": "未配置访问入口",
-      "entry.warn.body": "该扩展包含 UI 面板，但尚未设置访问入口。安装后用户可能不知道如何打开它。",
-      "entry.warn.setup": "去设置",
-      "entry.warn.skip": "忽略，继续发布",
-      "entry.hint": "选择用户安装扩展后可以从哪里打开它。",
-      "entry.none": "该扩展没有 UI 面板，无需配置访问入口。",
-      "entry.unset": "尚未配置 — 点击编辑设置。",
-      "entry.slot.label": "挂载位置",
-      "entry.kind.panel": "面板",
-      "entry.add": "添加入口",
-      "entry.remove": "删除",
-
-      "slot.sidebar.nav": "侧边栏导航",
-      "slot.sidebar.nav.top": "侧边栏导航（顶部）",
-      "slot.sidebar.nav.bottom": "侧边栏导航（底部）",
-      "slot.sidebar.footer": "侧边栏底部",
-      "slot.main.workspace": "主工作区",
-      "slot.session.aside": "会话侧栏",
-      "slot.settings.tabs": "设置页标签",
       "skills.section.cloud": "云端 Skills",
       "skills.section.cloudHint": "已发布到平台",
       "skills.section.local": "本地 Skills",
@@ -395,6 +410,22 @@
     return data;
   }
 
+  async function patchJson(path, body) {
+    const res = await fetch(api(path), {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body || {}),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      const err = new Error(data.error || `Request failed (${res.status})`);
+      err.status = res.status;
+      err.data = data;
+      throw err;
+    }
+    return data;
+  }
+
   async function downloadPack(ext_id) {
     const res = await fetch(api("/pack"), {
       method: "POST",
@@ -560,42 +591,12 @@
   }
 
   // Unified publish flow: one modal that walks the creator from a release form
-  // (version + notes) through progress → device binding (if needed) → done.
-  // The creator owns the version; if it conflicts with the latest published
-  // version they can bump it inline — the modal writes it back to ext.yml
-  // before uploading. `prevVersionOrPromise` may be a value or a Promise.
+  // (version + notes) through progress → done.
+  // `prevVersionOrPromise` may be a value or a Promise.
   // Resolves true when a publish succeeded, false otherwise.
-  function checkEntryPoints(ext) {
-    const hasPanels = (ext.units || []).some((u) => u.kind === "panel");
-    const hasEntries = Array.isArray(ext.entry_points) && ext.entry_points.length > 0;
-    if (!hasPanels || hasEntries) return Promise.resolve(true);
 
+  function runPublishFlow(ext, prevVersionOrPromise, { onPublishDone } = {}) {
     return new Promise((resolve) => {
-      const overlay = el("div", { class: "studio-modal-overlay" });
-      const modal = el("div", { class: "studio-modal", style: "max-width:400px" });
-      overlay.appendChild(modal);
-      document.body.appendChild(overlay);
-
-      function close(result) { document.body.removeChild(overlay); resolve(result); }
-
-      modal.appendChild(el("h3", { class: "studio-modal-title", text: t("entry.warn.title") }));
-      modal.appendChild(el("p", { style: "font-size:13px;color:var(--color-text-secondary);margin:0 0 20px", text: t("entry.warn.body") }));
-
-      const footer = el("div", { class: "studio-modal-footer" });
-      const skipBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("entry.warn.skip") });
-      skipBtn.addEventListener("click", () => close(true));
-      const setupBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("entry.warn.setup") });
-      setupBtn.addEventListener("click", () => { close(false); openMetaEditModal(ext, () => store.reload()); });
-      footer.appendChild(skipBtn);
-      footer.appendChild(setupBtn);
-      modal.appendChild(footer);
-    });
-  }
-
-  function runPublishFlow(ext, prevVersionOrPromise) {
-    return checkEntryPoints(ext).then((proceed) => {
-      if (!proceed) return false;
-      return new Promise((resolve) => {
       let currentVersion = ext.version || "";
       let isUpdate = false;
 
@@ -708,15 +709,20 @@
           });
 
           if (data === null) { resetButtons(); return; }
+
+          // Name taken by another user — show inline rename form.
+          if (!data.ok && data.name_taken) {
+            showRenameForm(ext, data.error);
+            modal.close();
+            resolve(false);
+            return;
+          }
+
           if (!data.ok) throw new Error(data.error || "Publish failed");
 
           done = true;
-          const successLabel = el("span", { class: "studio-pub-success", text: t("pub.success") });
-          modal.footer.insertBefore(successLabel, modal.footer.firstChild);
-          cancelBtn.style.display = "none";
-          publishBtn.disabled = false;
-          publishBtn.textContent = t("pub.btn.done");
-          publishBtn.onclick = () => { modal.close(); resolve(true); };
+          modal.close();
+          resolve(true);
         } catch (e) {
           const msg = e.message || "";
           const isConflict = /must be greater than/i.test(msg);
@@ -734,7 +740,84 @@
         }
       }
     });
-  }); }
+  }
+
+  // Show an inline modal that lets the creator pick a new extension ID when
+  // the current name is already taken by another user on the marketplace.
+  // On confirm: calls set_id to rename the local folder + ext.yml, then
+  // immediately re-triggers the full publish flow with the new id.
+  function showRenameForm(ext, serverError) {
+    const slugFormat = /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/;
+
+    const errorMsg = el("p", { class: "studio-modal-status studio-modal-status-error",
+                                text: t("err.name_taken", { id: ext.id }) });
+
+    const field = el("div", { class: "studio-field" });
+    field.appendChild(el("label", { class: "studio-label", text: t("rename.label") }));
+    const input = el("input", { class: "studio-input", type: "text",
+                                 value: ext.id, placeholder: t("rename.placeholder") });
+    const hint = el("p", { class: "studio-field-hint", text: t("rename.hint") });
+    field.appendChild(input);
+    field.appendChild(hint);
+
+    const status = el("p", { class: "studio-modal-status" });
+    status.style.display = "none";
+
+    let done = false;
+    const modal = openModal({
+      title: t("rename.btn"),
+      body: el("div", null, [field, errorMsg, status]),
+      buttons: [
+        { label: t("pub.btn.cancel"), keepOpen: false, onClick: () => {} },
+        { label: t("rename.btn"), primary: true, keepOpen: true, onClick: () => submit() },
+      ],
+    });
+
+    const confirmBtn = modal.footer.querySelector(".studio-btn-primary");
+    const cancelBtn  = modal.footer.querySelector(".studio-btn:not(.studio-btn-primary)");
+
+    input.addEventListener("input", () => {
+      const val = input.value.trim();
+      const valid = val.length >= 2 && val.length <= 64 && slugFormat.test(val) && val !== ext.id;
+      confirmBtn.disabled = !valid;
+      input.classList.toggle("studio-input-error", !!val && !slugFormat.test(val));
+      status.style.display = "none";
+    });
+    // Disable confirm until user types a valid different id.
+    confirmBtn.disabled = true;
+
+    async function submit() {
+      if (done || confirmBtn.disabled) return;
+      const newId = input.value.trim();
+      confirmBtn.disabled = true;
+      confirmBtn.textContent = t("rename.renaming");
+      cancelBtn.disabled = true;
+      input.disabled = true;
+      status.style.display = "none";
+
+      try {
+        await postJson("/set_id", { ext_id: ext.id, new_id: newId });
+        done = true;
+        modal.close();
+        // Re-trigger the full publish flow with the renamed extension.
+        // Reload store first so the new id is visible.
+        await store.reload();
+        const renamed = store.extensions.find((e) => e.id === newId);
+        if (renamed) {
+          const ok = await runPublishFlow(renamed, null, { skipEntryCheck: true });
+          if (ok) store.reload();
+        }
+      } catch (e) {
+        status.textContent = t("err.generic", { msg: e.message });
+        status.style.display = "";
+        status.className = "studio-modal-status studio-modal-status-error";
+        confirmBtn.disabled = false;
+        confirmBtn.textContent = t("rename.btn");
+        cancelBtn.disabled = false;
+        input.disabled = false;
+      }
+    }
+  }
 
   // Both tabs care about "which local extension am I working on", so we keep a
   // tiny page-level store and let each tab subscribe to changes.
@@ -837,12 +920,6 @@
       if (box) { box.innerHTML = ""; }
     }
 
-    function renderDetail() {
-      const ext = store.selected();
-      if (!ext) return;
-      container.appendChild(buildExtInfoCard(ext, () => openMetaEditModal(ext, () => store.reload().then(rebuild))));
-    }
-
     function rebuild() {
       if (!container) return;
       container.innerHTML = "";
@@ -853,8 +930,6 @@
         return;
       }
 
-      renderDetail();
-
       const bar = el("div", { class: "studio-actions" });
       bar.appendChild(el("button", { class: "studio-btn studio-btn-primary studio-verify-status", text: t("btn.recheck"), onclick: runVerify }));
       bar.appendChild(el("span", { class: "studio-verify-summary" }));
@@ -881,16 +956,6 @@
 
   // ── Publish tab ──────────────────────────────────────────────────────────
 
-  const PANEL_SLOTS = [
-    { value: "sidebar.nav",        labelKey: "slot.sidebar.nav" },
-    { value: "sidebar.nav.top",    labelKey: "slot.sidebar.nav.top" },
-    { value: "sidebar.nav.bottom", labelKey: "slot.sidebar.nav.bottom" },
-    { value: "sidebar.footer",     labelKey: "slot.sidebar.footer" },
-    { value: "main.workspace",     labelKey: "slot.main.workspace" },
-    { value: "session.aside",      labelKey: "slot.session.aside" },
-    { value: "settings.tabs",      labelKey: "slot.settings.tabs" },
-  ];
-
   function buildExtInfoCard(ext, onEdit) {
     const card = el("div", { class: "studio-detail" });
 
@@ -908,23 +973,6 @@
     infoRow.appendChild(el("span", { class: "studio-info-value", text: ext.version || "—" }));
     card.appendChild(infoRow);
 
-    const panelUnits = (ext.units || []).filter((u) => u.kind === "panel");
-    if (panelUnits.length) {
-      card.appendChild(el("div", { class: "studio-label studio-section-label", text: t("entry.section") }));
-      const eps = Array.isArray(ext.entry_points) && ext.entry_points.length ? ext.entry_points : null;
-      if (eps) {
-        const chips = el("div", { class: "studio-units" });
-        eps.forEach((ep) => {
-          const slotDef = PANEL_SLOTS.find((s) => s.value === ep.slot);
-          const label = slotDef ? t(slotDef.labelKey) : (ep.slot || ep.kind);
-          chips.appendChild(el("span", { class: "studio-unit-chip", text: label }));
-        });
-        card.appendChild(chips);
-      } else {
-        card.appendChild(el("p", { class: "studio-empty", text: t("entry.unset") }));
-      }
-    }
-
     card.appendChild(el("div", { class: "studio-label studio-section-label", text: t("detail.units") }));
     if (!(ext.units || []).length) {
       card.appendChild(el("p", { class: "studio-empty", text: t("detail.noUnits") }));
@@ -937,10 +985,30 @@
     return card;
   }
 
-  function openMetaEditModal(ext, onSaved) {
-    let entries = Array.isArray(ext.entry_points) ? ext.entry_points.map((ep) => ({ ...ep })) : [];
-    const panelUnits = (ext.units || []).filter((u) => u.kind === "panel");
+  function buildReadmeCard(extId, currentReadme, onEdit) {
+    const card = el("div", { class: "studio-detail studio-readme-card" });
 
+    const head = el("div", { class: "studio-detail-head" });
+    head.appendChild(el("h4", { class: "studio-detail-name", text: t("pub.readme.section") }));
+    const editBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("pub.readme.edit") });
+    editBtn.addEventListener("click", onEdit);
+    head.appendChild(editBtn);
+    card.appendChild(head);
+
+    if (currentReadme && currentReadme.trim()) {
+      const preview = el("div", { class: "studio-readme-preview extension-readme-body studio-readme-card-preview" });
+      preview.innerHTML = typeof marked !== "undefined"
+        ? marked.parse(currentReadme, { breaks: true, gfm: true })
+        : `<pre>${currentReadme}</pre>`;
+      card.appendChild(preview);
+    } else {
+      card.appendChild(el("p", { class: "studio-empty", text: t("pub.readme.empty") }));
+    }
+
+    return card;
+  }
+
+  function openMetaEditModal(ext, onSaved) {
     const overlay = el("div", { class: "studio-modal-overlay" });
     overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
 
@@ -964,50 +1032,6 @@
     descField.appendChild(descInput);
     modal.appendChild(descField);
 
-    if (panelUnits.length) {
-      const entryField = el("div", { class: "studio-field" });
-      entryField.appendChild(el("label", { class: "studio-label", text: t("entry.section") }));
-      entryField.appendChild(el("p", { class: "studio-hint", style: "margin:0 0 8px", text: t("entry.hint") }));
-
-      const listEl = el("div", { class: "studio-entry-list" });
-
-      function renderEntryList() {
-        listEl.innerHTML = "";
-        entries.forEach((ep, idx) => {
-          const row = el("div", { class: "studio-entry-row" });
-
-          const slotSel = el("select", { class: "studio-select" });
-          PANEL_SLOTS.forEach(({ value, labelKey }) => {
-            const opt = el("option", { value, text: t(labelKey) });
-            if (ep.slot === value) opt.selected = true;
-            slotSel.appendChild(opt);
-          });
-          if (!ep.slot) entries[idx].slot = PANEL_SLOTS[0].value;
-          slotSel.addEventListener("change", () => { entries[idx].slot = slotSel.value; });
-
-          const removeBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: "✕" });
-          removeBtn.title = t("entry.remove");
-          removeBtn.addEventListener("click", () => { entries.splice(idx, 1); renderEntryList(); });
-
-          row.appendChild(slotSel);
-          row.appendChild(removeBtn);
-          listEl.appendChild(row);
-        });
-
-        const addBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: `+ ${t("entry.add")}` });
-        addBtn.addEventListener("click", () => {
-          const du = panelUnits[0];
-          entries.push({ panel_id: du ? du.id : "", slot: PANEL_SLOTS[0].value });
-          renderEntryList();
-        });
-        listEl.appendChild(addBtn);
-      }
-
-      renderEntryList();
-      entryField.appendChild(listEl);
-      modal.appendChild(entryField);
-    }
-
     const statusEl = el("span", { class: "studio-form-status" });
     const footer = el("div", { class: "studio-modal-footer" });
     const cancelBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.btn.cancel"), onclick: close });
@@ -1018,12 +1042,10 @@
       saveBtn.textContent = t("meta.saving");
       statusEl.textContent = "";
       try {
-        const payload = entries.map((ep) => ({ unit_id: ep.panel_id, slot: ep.slot }));
         await postJson("/set_meta", {
           ext_id: ext.id,
           name: nameInput.value.trim(),
           description: descInput.value.trim(),
-          entry_points: payload,
         });
         close();
         if (onSaved) onSaved();
@@ -1040,6 +1062,199 @@
     modal.appendChild(footer);
   }
 
+  // Standalone README + screenshot editor modal, reachable from the published
+  // extension list at any time (not just after first publish).
+
+  // Prompt user to fill in README before publishing.
+  // Returns a Promise that resolves when the user is ready to continue.
+  // If readme is missing, shows a dialog: "Add description" opens the editor,
+  // "Skip" proceeds without filling in.
+  // Options:
+  //   onSaved(readme) — called after user saves the readme in the editor,
+  //                     use this to trigger a UI refresh in the calling panel.
+  function confirmReadme(ext, { onSaved } = {}) {
+    if (ext.readme && ext.readme.trim()) return Promise.resolve();
+    return new Promise((resolve) => {
+      const overlay = el("div", { class: "studio-modal-overlay" });
+      const box = el("div", { class: "studio-modal", style: "max-width:420px;padding:24px 28px 20px" });
+      box.appendChild(el("h3", { class: "studio-modal-title", style: "margin-bottom:10px", text: t("pub.readme.section") }));
+      box.appendChild(el("p", { style: "margin-bottom:20px;color:var(--color-text-secondary);font-size:14px", text: t("pub.readme.required") }));
+      const footer = el("div", { class: "studio-modal-footer" });
+      const skipBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.readme.required.skip") });
+      const editBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("pub.readme.required.edit") });
+      function close(goEdit) {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+        if (goEdit) {
+          openReadmeEditModal(ext.id, ext.readme || "", (saved) => {
+            ext.readme = saved;
+            if (onSaved) onSaved(saved);
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      }
+      skipBtn.addEventListener("click", () => close(false));
+      editBtn.addEventListener("click", () => close(true));
+      footer.appendChild(skipBtn);
+      footer.appendChild(editBtn);
+      box.appendChild(footer);
+      overlay.appendChild(box);
+      document.body.appendChild(overlay);
+    });
+  }
+
+  function openReadmeEditModal(extId, initialReadme, onSaved) {
+    // Use a wider full-overlay modal with a split editor/preview layout.
+    const overlay = el("div", { class: "studio-modal-overlay studio-readme-overlay" });
+    const box = el("div", { class: "studio-modal studio-readme-modal" });
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+    function close() { if (overlay.parentNode) overlay.parentNode.removeChild(overlay); }
+
+    box.appendChild(el("h3", { class: "studio-modal-title", text: t("pub.readme.edit.title") }));
+
+    // Split pane: left = textarea, right = rendered preview
+    const splitPane = el("div", { class: "studio-readme-split" });
+
+    const editorPane = el("div", { class: "studio-readme-pane" });
+    editorPane.appendChild(el("div", { class: "studio-readme-pane-label", text: t("readme.pane.editor") }));
+    const readmeArea = el("textarea", {
+      class: "studio-textarea studio-readme-textarea",
+      placeholder: t("pub.readme.placeholder"),
+    });
+    // Pre-fill with existing readme content
+    if (initialReadme) {
+      readmeArea.value = initialReadme;
+    }
+    editorPane.appendChild(readmeArea);
+    splitPane.appendChild(editorPane);
+
+    const previewPane = el("div", { class: "studio-readme-pane" });
+    previewPane.appendChild(el("div", { class: "studio-readme-pane-label", text: t("readme.pane.preview") }));
+    const previewBody = el("div", { class: "studio-readme-preview extension-readme-body" });
+    previewPane.appendChild(previewBody);
+    splitPane.appendChild(previewPane);
+
+    box.appendChild(splitPane);
+
+    // Render helper
+    function renderPreview() {
+      const md = readmeArea.value;
+      previewBody.innerHTML = md && typeof marked !== "undefined"
+        ? marked.parse(md, { breaks: true, gfm: true })
+        : (md ? `<pre>${md}</pre>` : "");
+    }
+
+    // Live preview on input
+    readmeArea.addEventListener("input", renderPreview);
+
+    // Initial preview if there's pre-filled content
+    if (readmeArea.value) renderPreview();
+
+    // Screenshots section
+    const screenshotsSection = el("div", { class: "studio-readme-screenshots" });
+
+    const screenshotRow = el("div", { class: "studio-readme-screenshots-row" });
+
+    const fileInput = el("input", { type: "file", accept: "image/png,image/jpeg,image/gif", style: "display:none" });
+    screenshotsSection.appendChild(fileInput);
+
+    const uploadBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("pub.screenshot.upload") });
+    uploadBtn.addEventListener("click", () => fileInput.click());
+    screenshotRow.appendChild(uploadBtn);
+    screenshotRow.appendChild(el("span", { class: "studio-readme-screenshots-hint", text: t("pub.screenshot.hint") }));
+    screenshotsSection.appendChild(screenshotRow);
+
+    const screenshotErr = el("p", { class: "studio-modal-status studio-modal-status-error", style: "display:none;margin-top:6px" });
+    screenshotsSection.appendChild(screenshotErr);
+    fileInput.addEventListener("change", async () => {
+      const file = fileInput.files[0];
+      if (!file) return;
+      fileInput.value = "";
+      screenshotErr.style.display = "none";
+      if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: t("pub.screenshot.err.type") });
+        screenshotErr.style.display = "";
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: t("pub.screenshot.err.size") });
+        screenshotErr.style.display = "";
+        return;
+      }
+      uploadBtn.disabled = true;
+      uploadBtn.textContent = t("pub.screenshot.uploading");
+      screenshotErr.style.display = "none";
+      try {
+        const form = new FormData();
+        form.append("ext_id", extId);
+        form.append("file", file);
+        const res = await fetch("/api/ext/ext-studio/screenshot", { method: "POST", body: form });
+        const json = await res.json();
+        if (!res.ok || !json.ok) throw new Error(json.error || "upload failed");
+        // Insert ![](url) at cursor position in the editor.
+        // Ensure the image tag is on its own line by adding newlines if needed.
+        const mdImg = `![](${json.url})`;
+        const start = readmeArea.selectionStart;
+        const end = readmeArea.selectionEnd;
+        const before = readmeArea.value.slice(0, start);
+        const after = readmeArea.value.slice(end);
+        const prefix = before.length > 0 && !before.endsWith("\n") ? "\n" : "";
+        const suffix = after.length > 0 && !after.startsWith("\n") ? "\n" : "";
+        const inserted = prefix + mdImg + suffix;
+        readmeArea.value = before + inserted + after;
+        readmeArea.selectionStart = readmeArea.selectionEnd = start + inserted.length;
+        readmeArea.focus();
+        readmeArea.dispatchEvent(new Event("input"));
+      } catch (e) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: e.message });
+        screenshotErr.style.display = "";
+      } finally {
+        uploadBtn.disabled = false;
+        uploadBtn.textContent = t("pub.screenshot.upload");
+      }
+    });
+
+    box.appendChild(screenshotsSection);
+
+    const statusEl = el("p", { class: "studio-modal-status", style: "display:none;margin-top:8px" });
+    box.appendChild(statusEl);
+
+    const footer = el("div", { class: "studio-modal-footer" });
+    const cancelBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.btn.cancel") });
+    cancelBtn.addEventListener("click", close);
+    const saveBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("pub.readme.save") });
+    saveBtn.addEventListener("click", async () => {
+      const readme = readmeArea.value.trim();
+      if (!readme) {
+        statusEl.className = "studio-modal-status studio-modal-status-error";
+        statusEl.textContent = t("pub.readme.save.empty");
+        statusEl.style.display = "";
+        readmeArea.focus();
+        return;
+      }
+      saveBtn.disabled = true;
+      saveBtn.textContent = t("pub.readme.saving");
+      cancelBtn.disabled = true;
+      statusEl.style.display = "none";
+      try {
+        await patchJson("/readme", { ext_id: extId, readme });
+        close();
+        if (onSaved) onSaved(readme);
+      } catch (e) {
+        statusEl.textContent = t("err.generic", { msg: e.message });
+        statusEl.style.display = "";
+        saveBtn.disabled = false;
+        saveBtn.textContent = t("pub.readme.save");
+        cancelBtn.disabled = false;
+      }
+    });
+    footer.appendChild(cancelBtn);
+    footer.appendChild(saveBtn);
+    box.appendChild(footer);
+  }
+
   function createPublishPanel() {
     let container = null;
     let unsub = null;
@@ -1052,13 +1267,14 @@
     async function doPublish() {
       const ext = store.selected();
       if (!ext) return;
+      await confirmReadme(ext, { onSaved: () => rebuild() });
       const prevVersionPromise = getJson("/published")
         .then((data) => {
           const match = (data.extensions || []).find((e) => e.id === ext.id);
           return match ? match.version : null;
         })
         .catch(() => null);
-      const ok = await runPublishFlow(ext, prevVersionPromise);
+      const ok = await runPublishFlow(ext, prevVersionPromise, { onPublishDone: loadPublished });
       if (ok) loadPublished();
     }
 
@@ -1134,7 +1350,16 @@
       const ext = store.selected();
       if (!ext) return;
 
-      container.appendChild(buildExtInfoCard(ext, () => openMetaEditModal(ext, () => store.reload().then(rebuild))));
+      container.appendChild(buildExtInfoCard(
+        ext,
+        () => openMetaEditModal(ext, () => store.reload().then(rebuild))
+      ));
+
+      container.appendChild(buildReadmeCard(
+        ext.id,
+        ext.readme,
+        () => openReadmeEditModal(ext.id, ext.readme, () => store.reload().then(rebuild))
+      ));
 
       const bar = el("div", { class: "studio-actions" });
       bar.appendChild(el("button", { class: "studio-btn studio-btn-primary studio-publish-btn", text: t("btn.publish"), onclick: doPublish }));
@@ -1233,7 +1458,7 @@
 
       const actions = el("div", { class: "studio-actions" });
       actions.appendChild(el("button", { class: "studio-btn studio-btn-primary", text: t("extlist.btn.iterate"), onclick: () => createExtension(t("extlist.iterate.seed", { id: ext.id })) }));
-      const un = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("extlist.btn.unpublish") });
+      const un = el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.unpublish") });
       un.addEventListener("click", async () => {
         if (!window.confirm(t("extlist.unpublish.confirm", { id: ext.id }))) return;
         un.disabled = true;
@@ -1317,7 +1542,9 @@
     }
 
     async function doPublish(ext, prevVersion) {
-      const ok = await runPublishFlow(ext, prevVersion);
+      await confirmReadme(ext, { onSaved: () => { reload().then(rebuild); } });
+      const onDone = async () => { await reload(); rebuild(); };
+      const ok = await runPublishFlow(ext, prevVersion, { onPublishDone: onDone });
       if (ok) { await reload(); rebuild(); }
     }
 
@@ -1723,13 +1950,25 @@
     .studio-section-label { margin-top: 10px; margin-bottom: 6px; }
     .studio-detail-head .studio-detail-name { margin: 0; }
     .studio-form-status { font-size: 12px; color: var(--color-text-tertiary); }
-    .studio-entry-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
-    .studio-entry-row { display: flex; align-items: stretch; gap: 8px; }
-    .studio-entry-arrow { font-size: 12px; color: var(--color-text-tertiary); flex-shrink: 0; }
-    .studio-entry-row .studio-select { flex: 1; width: auto; padding: 6px 28px 6px 8px; }
-    .studio-entry-row .studio-select:focus { border-color: var(--color-accent-primary); outline: none; }
     .studio-btn-sm { padding: 4px 10px; font-size: 12px; }
-    .studio-entry-row .studio-btn-sm { padding: 0 10px; }
+    .studio-readme-overlay { align-items: center; justify-content: center; }
+    .studio-readme-modal { width: min(1200px, calc(100vw - 48px)); height: calc(100vh - 80px); max-width: calc(100vw - 48px); border-radius: var(--radius-md, 8px); margin: 0; padding: 24px 28px 20px; display: flex; flex-direction: column; }
+    .studio-readme-modal .studio-modal-title { margin-bottom: 16px; flex-shrink: 0; }
+    .studio-readme-split { display: flex; gap: 14px; flex: 1; min-height: 0; margin-bottom: 18px; }
+    .studio-readme-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+    .studio-readme-pane-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-primary); margin-bottom: 8px; }
+    .studio-readme-textarea { flex: 1; resize: none; font-family: monospace; font-size: 12.5px; line-height: 1.65; border-radius: var(--radius-sm); }
+    .studio-readme-preview { flex: 1; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--color-bg-secondary); font-size: 13px; line-height: 1.75; }
+    .studio-readme-preview > *:first-child { margin-top: 0; }
+    .studio-readme-preview img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
+    .studio-readme-screenshots { border-top: 1px solid var(--color-border-primary); padding-top: 14px; margin-bottom: 6px; }
+    .studio-readme-screenshots-row { display: flex; align-items: center; gap: 10px; }
+    .studio-readme-screenshots-hint { font-size: 11px; color: var(--color-text-muted); }
+    .studio-readme-card { margin-top: 8px; }
+    .studio-readme-card-preview { max-height: 200px; overflow-y: auto; font-size: 13px; }
+    .extension-readme-body img { max-width: min(800px, 100%); height: auto; }
+    .studio-link-btn { background: none; border: none; padding: 0; font-size: 12px; color: var(--color-accent-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+    .studio-link-btn:hover { color: var(--color-accent-hover); }
   `;
   document.head.appendChild(style);
 })();