openclacky 1.5.13 → 1.5.15

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

@@ -46,8 +46,11 @@
       "publish.already": "Already published. Enable \"publish a new version\" to ship.",
       "published.title": "Your published extensions",
       "published.empty": "You haven't published anything yet.",
+      "published.brandTitle": "Your brand extensions",
+      "published.brandEmpty": "You haven't published any brand extensions yet.",
       "btn.unpublish": "Unpublish",
       "published.confirm": "Unpublish {{id}} from the marketplace?",
+      "published.brandConfirm": "Unpublish {{id}} from your brand?",
       "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.",
@@ -133,6 +136,8 @@
       "extlist.local.empty": "No local extensions. Create one below.",
       "extlist.badge.published": "Published",
       "extlist.badge.draft": "Draft",
+      "extlist.badge.unlisted": "Unlisted",
+      "extlist.unlisted.hint": "Taken down by the marketplace. Publishing a new version restores it.",
       "extlist.badge.local": "Not published",
       "extlist.verify.ok": "Checks passed",
       "extlist.verify.errors": "{{n}} error(s)",
@@ -140,6 +145,7 @@
       "extlist.btn.publish": "Publish to Marketplace",
       "extlist.btn.publishBrand": "Publish to Brand",
       "extlist.btn.update": "Update",
+      "extlist.btn.updateBrand": "Update Brand Version",
       "extlist.btn.pack": "Pack (.zip)",
       "extlist.btn.packing": "Packing…",
       "extlist.btn.unpublish": "Unpublish",
@@ -147,12 +153,14 @@
       "extlist.btn.disable": "Disable",
       "extlist.btn.enable": "Enable",
       "extlist.btn.delete": "Delete",
+      "extlist.btn.more": "More actions",
       "extlist.badge.disabled": "Disabled",
       "extlist.delete.confirm": "Delete local extension \"{{id}}\"? This cannot be undone.",
       "extlist.iterate.seed": "Iterate on extension {{id}}",
       "extlist.changelog.prompt": "Changelog (optional):",
       "extlist.overwrite.confirm": "\"{{id}}\" is already published. Publish a new version?",
       "extlist.unpublish.confirm": "Unpublish {{id}} from the marketplace?",
+      "extlist.unpublishBrand.confirm": "Unpublish {{id}} from your brand?",
       "extlist.publishing": "Publishing…",
       "extlist.needLicense": "Publishing requires an activated user license.",
       "extlist.brandLocked": "Publishing to the marketplace requires a creator license.",
@@ -244,8 +252,11 @@
       "publish.already": "已发布过。勾选「发布新版本」后再试。",
       "published.title": "你发布的扩展",
       "published.empty": "你还没有发布任何扩展。",
+      "published.brandTitle": "你发布到品牌的扩展",
+      "published.brandEmpty": "你还没有发布到品牌的扩展。",
       "btn.unpublish": "下架",
       "published.confirm": "确定要从市场下架 {{id}} 吗？",
+      "published.brandConfirm": "确定要从品牌下架 {{id}} 吗？",
       "err.generic": "出错了：{{msg}}",
       "err.version_conflict": "版本 {{ver}} 已发布过，请在上方输入更高的版本号后重试。",
       "err.invalid_version": "版本号格式不对，请使用如 1.0.0 的格式。",
@@ -331,6 +342,8 @@
       "extlist.local.empty": "本地暂无扩展，在下方新建一个。",
       "extlist.badge.published": "已发布",
       "extlist.badge.draft": "草稿",
+      "extlist.badge.unlisted": "已下架",
+      "extlist.unlisted.hint": "已被市场下架，重新发布新版本可恢复上架。",
       "extlist.badge.local": "未发布",
       "extlist.verify.ok": "检查通过",
       "extlist.verify.errors": "{{n}} 个错误",
@@ -338,6 +351,7 @@
       "extlist.btn.publish": "发布到市场",
       "extlist.btn.publishBrand": "发布到品牌",
       "extlist.btn.update": "更新到市场",
+      "extlist.btn.updateBrand": "更新到品牌",
       "extlist.btn.pack": "打包(.zip)",
       "extlist.btn.packing": "打包中…",
       "extlist.btn.unpublish": "下架",
@@ -345,12 +359,14 @@
       "extlist.btn.disable": "禁止",
       "extlist.btn.enable": "启用",
       "extlist.btn.delete": "删除",
+      "extlist.btn.more": "更多操作",
       "extlist.badge.disabled": "已禁用",
       "extlist.delete.confirm": "确定要删除本地扩展「{{id}}」吗？此操作不可恢复。",
       "extlist.iterate.seed": "迭代扩展 {{id}}",
       "extlist.changelog.prompt": "更新说明（可选）：",
       "extlist.overwrite.confirm": "「{{id}}」已经发布过了。要发布新版本吗？",
       "extlist.unpublish.confirm": "确定要从市场下架 {{id}} 吗？",
+      "extlist.unpublishBrand.confirm": "确定要从品牌下架 {{id}} 吗？",
       "extlist.publishing": "发布中…",
       "extlist.needLicense": "发布需要已激活的用户授权。",
       "extlist.brandLocked": "发布到市场需要创作者权限。",
@@ -413,6 +429,10 @@
     return str;
   }
 
+  function isBrandOwner() {
+    return typeof Brand !== "undefined" && Brand.branded && Brand.userLicensed;
+  }
+
   function api(path) { return `/api/ext/ext-studio${path}`; }
 
   function toast(msg, type) {
@@ -501,6 +521,76 @@
     return node;
   }
 
+  // ── Shared: overflow menu ──────────────────────────────────────────────
+  // Mirrors the session list's "⋯" menu so buttons collapsed on narrow screens
+  // stay reachable. Items proxy the real buttons rather than duplicating them,
+  // which keeps transient label/disabled state (e.g. "Packing…") in sync.
+  const OVERFLOW_ICON = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="7" r="1.2" fill="currentColor"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/><circle cx="11.5" cy="7" r="1.2" fill="currentColor"/></svg>`;
+
+  let overflowDismiss = null;
+  let overflowAnchor = null;
+
+  function closeOverflowMenu() {
+    if (overflowDismiss) {
+      document.removeEventListener("click", overflowDismiss, true);
+      overflowDismiss = null;
+    }
+    overflowAnchor = null;
+    const existing = document.querySelector(".studio-overflow-menu");
+    if (existing) existing.remove();
+  }
+
+  function openOverflowMenu(anchor, buttons) {
+    // Re-tapping the same "⋯" toggles; tapping a different card must switch to it
+    // rather than merely dismissing the menu that is already open.
+    if (overflowAnchor === anchor) { closeOverflowMenu(); return; }
+    closeOverflowMenu();
+    overflowAnchor = anchor;
+    const menu = el("div", { class: "session-actions-menu studio-overflow-menu" });
+    buttons.forEach((btn) => {
+      const item = el("div", { class: "session-actions-menu-item" }, [
+        el("span", { class: "session-actions-menu-label", text: btn.textContent }),
+      ]);
+      if (btn.classList.contains("studio-btn-danger")) item.classList.add("session-actions-menu-item--danger");
+      if (btn.disabled) {
+        item.classList.add("is-disabled");
+        const tip = btn.getAttribute("data-tooltip");
+        if (tip) item.setAttribute("data-tooltip", tip);
+      } else {
+        item.addEventListener("click", () => { closeOverflowMenu(); btn.click(); });
+      }
+      menu.appendChild(item);
+    });
+
+    // Take the menu out of normal flow before measuring: as a static block child
+    // of <body> it would stretch to the full body width, so mw would be the
+    // viewport width and the clamp below would fling the menu to the far edge.
+    menu.style.visibility = "hidden";
+    menu.style.position = "fixed";
+    menu.style.top = "0px";
+    menu.style.left = "0px";
+    document.body.appendChild(menu);
+    const rect = anchor.getBoundingClientRect();
+    const mw = menu.offsetWidth;
+    const mh = menu.offsetHeight;
+    let top = rect.bottom + 4;
+    let left = rect.left;
+    if (top + mh > window.innerHeight - 8) top = Math.max(8, rect.top - mh - 4);
+    if (left + mw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - mw - 8);
+    menu.style.top = top + "px";
+    menu.style.left = left + "px";
+    menu.style.visibility = "";
+
+    // Capture phase runs before the anchor's own handler, so the anchor has to be
+    // excluded here or reopening would immediately close and reopen the menu.
+    overflowDismiss = (e) => {
+      const node = e.target instanceof Element ? e.target : null;
+      if (node && (node.closest(".studio-overflow-menu") || node.closest(".studio-actions-overflow"))) return;
+      closeOverflowMenu();
+    };
+    document.addEventListener("click", overflowDismiss, true);
+  }
+
   // ── Shared: modal dialog ───────────────────────────────────────────────
   // A minimal overlay modal used by the publish-confirm and device-binding
   // flows. Returns the body element so callers can drive it live (bind flow),
@@ -1412,37 +1502,50 @@
     async function loadPublished() {
       const box = container.querySelector(".studio-published");
       if (!box) return;
+      const brandOwner = isBrandOwner();
+      const titleKey = brandOwner ? "published.brandTitle" : "published.title";
+      const emptyKey = brandOwner ? "published.brandEmpty" : "published.empty";
+      const confirmKey = brandOwner ? "published.brandConfirm" : "published.confirm";
       box.innerHTML = "";
-      box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
+      box.appendChild(el("div", { class: "studio-label", text: t(titleKey) }));
       renderPublishedSkeleton(box);
       try {
-        const data = await getJson("/published");
+        const endpoint = brandOwner ? "/published_brand" : "/published";
+        const data = await getJson(endpoint);
         box.innerHTML = "";
-        box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
-        const exts = data.extensions || [];
-        if (!exts.length) { box.appendChild(el("p", { class: "studio-empty", text: t("published.empty") })); return; }
+        box.appendChild(el("div", { class: "studio-label", text: t(titleKey) }));
+        const exts = brandOwner
+          ? (data.extensions || [])
+          : (data.extensions || []).filter((e) => e.origin !== "self");
+        if (!exts.length) { box.appendChild(el("p", { class: "studio-empty", text: t(emptyKey) })); return; }
         exts.forEach((e) => {
           const card = el("div", { class: "studio-skill-card" });
           const head = el("div", { class: "studio-skill-head" });
+          const unlisted = listingState(e) === "unlisted";
           head.appendChild(el("span", { class: "studio-skill-name", text: e.name || e.id }));
-          const statusKind = e.status === "draft" ? "local" : "published";
-          head.appendChild(el("span", { class: `studio-skill-badge studio-skill-badge-${statusKind}`, text: e.status === "draft" ? t("extlist.badge.draft") : t("extlist.badge.published") }));
+          const stateBadge = el("span", { class: `studio-skill-badge studio-skill-badge-${listingBadgeKind(e)}`, text: listingBadgeText(e) });
+          if (unlisted) stateBadge.setAttribute("data-tooltip", t("extlist.unlisted.hint"));
+          head.appendChild(stateBadge);
           if (e.version) head.appendChild(el("span", { style: "font-size:11px;color:var(--color-text-muted);", text: "v" + e.version }));
-          const unpubBtn = el("button", { class: "studio-btn studio-btn-danger studio-btn-sm", text: t("btn.unpublish") });
-          unpubBtn.style.marginLeft = "auto";
-          unpubBtn.addEventListener("click", async () => {
-            if (!await Clacky.Modal.confirm(t("published.confirm", { id: e.id }))) return;
-            unpubBtn.disabled = true;
-            try { await postJson("/unpublish", { ext_id: e.id }); loadPublished(); }
-            catch (err) { unpubBtn.disabled = false; feedback(t("err.generic", { msg: err.message }), "error"); }
-          });
-          head.appendChild(unpubBtn);
+          // A taken-down extension has nothing left to unpublish — the only way
+          // back on the marketplace is shipping a new version.
+          if ((!brandOwner || e.origin === "self") && !unlisted) {
+            const unpubBtn = el("button", { class: "studio-btn studio-btn-danger studio-btn-sm", text: t("btn.unpublish") });
+            unpubBtn.style.marginLeft = "auto";
+            unpubBtn.addEventListener("click", async () => {
+              if (!await Clacky.Modal.confirm(t(confirmKey, { id: e.id }))) return;
+              unpubBtn.disabled = true;
+              try { await postJson("/unpublish", { ext_id: e.id }); loadPublished(); }
+              catch (err) { unpubBtn.disabled = false; feedback(t("err.generic", { msg: err.message }), "error"); }
+            });
+            head.appendChild(unpubBtn);
+          }
           card.appendChild(head);
           box.appendChild(card);
         });
       } catch (e) {
         box.innerHTML = "";
-        box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
+        box.appendChild(el("div", { class: "studio-label", text: t(titleKey) }));
         box.appendChild(el("p", { class: "studio-empty", text: t("err.generic", { msg: e.message }) }));
       }
     }
@@ -1467,13 +1570,14 @@
       ));
 
       const bar = el("div", { class: "studio-actions" });
-      const brandNonAdmin = typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed;
-      const pubBtn = el("button", { class: "studio-btn studio-btn-primary studio-publish-btn", text: t("btn.publish"), onclick: doPublish });
-      pubBtn.disabled = brandNonAdmin;
-      if (brandNonAdmin) pubBtn.setAttribute("data-tooltip", t("extlist.brandLocked"));
-      bar.appendChild(pubBtn);
-      if (typeof Brand !== "undefined" && Brand.userLicensed) {
-        bar.appendChild(el("button", { class: "studio-btn studio-publish-brand-btn", text: t("btn.publishBrand"), onclick: doPublishBrand }));
+      if (isBrandOwner()) {
+        bar.appendChild(el("button", { class: "studio-btn studio-btn-primary studio-publish-brand-btn", text: t("btn.publishBrand"), onclick: doPublishBrand }));
+      } else {
+        const brandNonAdmin = typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed;
+        const pubBtn = el("button", { class: "studio-btn studio-btn-primary studio-publish-btn", text: t("btn.publish"), onclick: doPublish });
+        pubBtn.disabled = brandNonAdmin;
+        if (brandNonAdmin) pubBtn.setAttribute("data-tooltip", t("extlist.brandLocked"));
+        bar.appendChild(pubBtn);
       }
       const packBtn = el("button", { class: "studio-btn studio-btn-ghost studio-pack-btn", text: t("btn.pack"), onclick: doPack });
       bar.appendChild(packBtn);
@@ -1497,6 +1601,47 @@
     };
   }
 
+  // Cloud / local (plus brand, for extensions) lists as a segmented control
+  // instead of stacked sections — one list visible at a time. `state.active`
+  // lives with the caller so the selection survives a rebuild.
+  function sectionTabs(sections, state) {
+    const bar = el("div", { class: "studio-seg-bar" });
+    const seg = el("div", { class: "segmented-control" });
+    const hint = el("span", { class: "studio-seg-hint" });
+    const listBox = el("div", { class: "studio-seg-body" });
+    bar.appendChild(seg);
+    bar.appendChild(hint);
+
+    if (!sections.some((s) => s.id === state.active)) state.active = sections[0].id;
+
+    function paint() {
+      const current = sections.filter((s) => s.id === state.active)[0] || sections[0];
+      seg.innerHTML = "";
+      sections.forEach((s) => {
+        const btn = el("button", {
+          class: "segmented-control__btn" + (s.id === current.id ? " active" : ""),
+          text: s.label,
+        });
+        btn.addEventListener("click", () => {
+          if (state.active === s.id) return;
+          state.active = s.id;
+          paint();
+        });
+        seg.appendChild(btn);
+      });
+      hint.textContent = current.hint;
+      listBox.innerHTML = "";
+      if (!current.items.length) {
+        listBox.appendChild(el("p", { class: "studio-empty", text: t(current.emptyKey) }));
+      } else {
+        current.items.forEach((item) => listBox.appendChild(current.cardFn(item)));
+      }
+    }
+    paint();
+
+    return [bar, listBox];
+  }
+
   function _skeletonHtml() {
     return Array.from({ length: 3 }).map(() => `
       <div class="studio-skill-card" style="pointer-events:none">
@@ -1514,6 +1659,29 @@
       </div>`).join("");
   }
 
+  // An admin takedown keeps `status: "published"` on the platform record —
+  // only hub_status flips (hidden/removed/quarantined). Map both fields to one
+  // badge state so a taken-down extension never reads as live.
+  function listingState(ext) {
+    if (!ext) return "published";
+    if (ext.status === "draft") return "draft";
+    const hub = ext.hub_status;
+    if (hub && hub !== "active") return "unlisted";
+    return "published";
+  }
+
+  function listingBadgeKind(ext) {
+    const state = listingState(ext);
+    if (state === "draft") return "local";
+    return state === "unlisted" ? "unlisted" : "published";
+  }
+
+  function listingBadgeText(ext) {
+    const state = listingState(ext);
+    if (state === "draft") return t("extlist.badge.draft");
+    return state === "unlisted" ? t("extlist.badge.unlisted") : t("extlist.badge.published");
+  }
+
   // ── Extensions tab (full-page): cloud + local extension cards ──────────────
   // Reuses backend endpoints GET /published (cloud), the shared `store` (local,
   // GET /extensions), POST /publish|/pack|/unpublish, and POST /develop to open
@@ -1524,10 +1692,7 @@
     let brandCloud = [];
     let marketCloud = [];
     let brandPublished = [];
-
-    function licensed() {
-      return !(typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed);
-    }
+    const sectionState = { active: null };
 
     async function reload() {
       await store.reload();
@@ -1548,7 +1713,7 @@
         brandCloud = [];
       }
       marketCloud = cloud.filter((e) => e.origin !== "self");
-      brandPublished = cloud.filter((e) => e.origin === "self");
+      brandPublished = isBrandOwner() ? brandCloud : cloud.filter((e) => e.origin === "self");
     }
 
     function createExtension(idea) {
@@ -1559,8 +1724,10 @@
         .catch((e) => alert(t("err.generic", { msg: e.message })));
     }
 
-    function badge(text, kind) {
-      return el("span", { class: "studio-skill-badge studio-skill-badge-" + kind, text });
+    function badge(text, kind, tooltip) {
+      const node = el("span", { class: "studio-skill-badge studio-skill-badge-" + kind, text });
+      if (tooltip) node.setAttribute("data-tooltip", tooltip);
+      return node;
     }
 
     function formatUnitCounts(counts) {
@@ -1575,9 +1742,9 @@
     function cloudCard(ext) {
       const card = el("div", { class: "studio-skill-card" });
       const head = el("div", { class: "studio-skill-head" });
+      const unlisted = listingState(ext) === "unlisted";
       head.appendChild(el("span", { class: "studio-skill-name", text: ext.name || ext.id }));
-      const isDraft = ext.status === "draft";
-      head.appendChild(badge(isDraft ? t("extlist.badge.draft") : t("extlist.badge.published"), isDraft ? "local" : "published"));
+      head.appendChild(badge(listingBadgeText(ext), listingBadgeKind(ext), unlisted ? t("extlist.unlisted.hint") : null));
       card.appendChild(head);
 
       const meta = el("div", { class: "studio-skill-meta" });
@@ -1586,27 +1753,37 @@
 
       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", text: t("extlist.btn.unpublish") });
-      un.addEventListener("click", async () => {
-        if (!await Clacky.Modal.confirm(t("extlist.unpublish.confirm", { id: ext.id }))) return;
-        un.disabled = true;
-        try { await postJson("/unpublish", { ext_id: ext.id }); await reload(); rebuild(); }
-        catch (e) { un.disabled = false; alert(t("err.generic", { msg: e.message })); }
-      });
-      actions.appendChild(un);
+      // A taken-down extension has nothing left to unpublish — the only way
+      // back on the marketplace is shipping a new version.
+      const canUnpublish = (!isBrandOwner() || ext.origin === "self") && !unlisted;
+      if (canUnpublish) {
+        const un = el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.unpublish") });
+        un.addEventListener("click", async () => {
+          const confirmKey = ext.origin === "self" ? "extlist.unpublishBrand.confirm" : "extlist.unpublish.confirm";
+          if (!await Clacky.Modal.confirm(t(confirmKey, { id: ext.id }))) return;
+          un.disabled = true;
+          try { await postJson("/unpublish", { ext_id: ext.id }); await reload(); rebuild(); }
+          catch (e) { un.disabled = false; alert(t("err.generic", { msg: e.message })); }
+        });
+        actions.appendChild(un);
+      }
       card.appendChild(actions);
       return card;
     }
 
     function localCard(ext) {
+      const brandOwner = isBrandOwner();
       const cloudEntry = cloud.find((c) => c.id === ext.id);
       const marketEntry = marketCloud.find((c) => c.id === ext.id);
-      const published = !!cloudEntry;
+      const brandEntry = brandCloud.find((c) => c.id === ext.id);
+      const published = brandOwner ? !!brandEntry : !!marketEntry;
+      const publishedAnywhere = !!cloudEntry;
       const marketPublished = !!marketEntry;
       const card = el("div", { class: "studio-skill-card" });
       const head = el("div", { class: "studio-skill-head" });
       head.appendChild(el("span", { class: "studio-skill-name", text: `${ext.name} (${ext.id})` }));
-      head.appendChild(badge(published ? t("extlist.badge.published") : t("extlist.badge.local"), published ? "published" : "local"));
+      const publishedEntry = brandOwner ? brandEntry : marketEntry;
+      head.appendChild(published ? badge(listingBadgeText(publishedEntry), listingBadgeKind(publishedEntry)) : badge(t("extlist.badge.local"), "local"));
       if (ext.disabled) {
         head.appendChild(badge(t("extlist.badge.disabled"), "changed"));
       } else if (ext.error_count) {
@@ -1626,41 +1803,51 @@
       card.appendChild(meta);
 
       const actions = el("div", { class: "studio-actions" });
-      const brandNonAdmin = typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed;
-      const pub = el("button", { class: "studio-btn studio-btn-primary", text: marketPublished ? t("extlist.btn.update") : t("extlist.btn.publish") });
-      pub.disabled = !!ext.error_count || brandNonAdmin;
-      const pubTip = ext.error_count ? t("extlist.verify.errors", { n: ext.error_count }) : (brandNonAdmin ? t("extlist.brandLocked") : "");
-      if (pubTip) pub.setAttribute("data-tooltip", pubTip);
-      pub.addEventListener("click", () => doPublish(ext, marketEntry ? marketEntry.version : null));
-      actions.appendChild(pub);
-
-      if (typeof Brand !== "undefined" && Brand.userLicensed) {
-        const brandEntry = brandCloud.find((c) => c.id === ext.id);
-        const brandPub = el("button", { class: "studio-btn", text: t("extlist.btn.publishBrand") });
+      if (brandOwner) {
+        const brandPub = el("button", {
+          class: "studio-btn studio-btn-primary",
+          text: brandEntry ? t("extlist.btn.updateBrand") : t("extlist.btn.publishBrand"),
+        });
         brandPub.disabled = !!ext.error_count;
         if (ext.error_count) brandPub.setAttribute("data-tooltip", t("extlist.verify.errors", { n: ext.error_count }));
         brandPub.addEventListener("click", () => doPublish(ext, brandEntry ? brandEntry.version : null, "self"));
         actions.appendChild(brandPub);
+      } else {
+        const brandNonAdmin = typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed;
+        const pub = el("button", { class: "studio-btn studio-btn-primary", text: marketPublished ? t("extlist.btn.update") : t("extlist.btn.publish") });
+        pub.disabled = !!ext.error_count || brandNonAdmin;
+        const pubTip = ext.error_count ? t("extlist.verify.errors", { n: ext.error_count }) : (brandNonAdmin ? t("extlist.brandLocked") : "");
+        if (pubTip) pub.setAttribute("data-tooltip", pubTip);
+        pub.addEventListener("click", () => doPublish(ext, marketEntry ? marketEntry.version : null));
+        actions.appendChild(pub);
       }
 
       actions.appendChild(el("button", { class: "studio-btn", text: t("extlist.btn.iterate"), onclick: () => createExtension(t("extlist.iterate.seed", { id: ext.id })) }));
-      const packBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.pack") });
+      const packBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-collapsible", text: t("extlist.btn.pack") });
       packBtn.addEventListener("click", () => doPack(ext, packBtn));
       actions.appendChild(packBtn);
 
       const toggleBtn = el("button", {
-        class: "studio-btn studio-btn-ghost",
+        class: "studio-btn studio-btn-ghost studio-btn-collapsible",
         text: ext.disabled ? t("extlist.btn.enable") : t("extlist.btn.disable"),
       });
       toggleBtn.addEventListener("click", () => doToggleDisabled(ext, toggleBtn));
       actions.appendChild(toggleBtn);
       card.appendChild(actions);
 
-      if (!published) {
-        const delBtn = el("button", { class: "studio-btn studio-btn-danger", text: t("extlist.btn.delete") });
+      if (!publishedAnywhere) {
+        const delBtn = el("button", { class: "studio-btn studio-btn-danger studio-btn-collapsible", text: t("extlist.btn.delete") });
         delBtn.addEventListener("click", () => doDelete(ext, delBtn));
         actions.appendChild(delBtn);
       }
+
+      const overflow = el("button", { class: "studio-btn studio-actions-overflow", "aria-label": t("extlist.btn.more"), title: t("extlist.btn.more") });
+      overflow.innerHTML = OVERFLOW_ICON;
+      overflow.addEventListener("click", (e) => {
+        e.stopPropagation();
+        openOverflowMenu(overflow, Array.from(actions.querySelectorAll(".studio-btn-collapsible")));
+      });
+      actions.appendChild(overflow);
       return card;
     }
 
@@ -1714,20 +1901,6 @@
       if (ok) { await reload(); rebuild(); }
     }
 
-    function section(titleKey, hintKey, items, cardFn, emptyKey) {
-      const box = el("div", { class: "studio-skill-section" });
-      const head = el("div", { class: "studio-skill-section-head" });
-      head.appendChild(el("span", { class: "studio-label", text: t(titleKey) }));
-      head.appendChild(el("span", { class: "studio-skill-hint", text: t(hintKey) }));
-      box.appendChild(head);
-      if (!items.length) {
-        box.appendChild(el("p", { class: "studio-empty", text: t(emptyKey) }));
-      } else {
-        items.forEach((s) => box.appendChild(cardFn(s)));
-      }
-      return box;
-    }
-
     function rebuild(headerActions) {
       if (!container) return;
       container.innerHTML = "";
@@ -1745,11 +1918,21 @@
         headerActions.appendChild(newBtn);
       }
 
-      container.appendChild(section("extlist.section.cloud", "extlist.section.cloudHint", marketCloud, cloudCard, "extlist.cloud.empty"));
-      if (brandPublished.length > 0 || (typeof Brand !== "undefined" && Brand.userLicensed)) {
-        container.appendChild(section("extlist.section.brand", "extlist.section.brandHint", brandPublished, cloudCard, "extlist.brand.empty"));
+      const sections = [{
+        id: "local",
+        label: t("extlist.section.local"),
+        hint: t("extlist.section.localHint"),
+        items: store.extensions,
+        cardFn: localCard,
+        emptyKey: "extlist.local.empty",
+      }];
+      if (!isBrandOwner()) {
+        sections.push({ id: "cloud", label: t("extlist.section.cloud"), hint: t("extlist.section.cloudHint"), items: marketCloud, cardFn: cloudCard, emptyKey: "extlist.cloud.empty" });
       }
-      container.appendChild(section("extlist.section.local", "extlist.section.localHint", store.extensions, localCard, "extlist.local.empty"));
+      if (brandPublished.length > 0 || isBrandOwner()) {
+        sections.push({ id: "brand", label: t("extlist.section.brand"), hint: t("extlist.section.brandHint"), items: brandPublished, cardFn: cloudCard, emptyKey: "extlist.brand.empty" });
+      }
+      sectionTabs(sections, sectionState).forEach((node) => container.appendChild(node));
     }
 
     return {
@@ -1772,6 +1955,7 @@
     let cloud = [];
     let local = [];
     let locked = false;
+    const sectionState = { active: null };
 
     async function reload() {
       const r = await getHost("/api/creator/skills");
@@ -1878,20 +2062,6 @@
       }
     }
 
-    function section(titleKey, hintKey, items, cardFn, emptyKey) {
-      const box = el("div", { class: "studio-skill-section" });
-      const head = el("div", { class: "studio-skill-section-head" });
-      head.appendChild(el("span", { class: "studio-label", text: t(titleKey) }));
-      head.appendChild(el("span", { class: "studio-skill-hint", text: t(hintKey) }));
-      box.appendChild(head);
-      if (!items.length) {
-        box.appendChild(el("p", { class: "studio-empty", text: t(emptyKey) }));
-      } else {
-        items.forEach((s) => box.appendChild(cardFn(s)));
-      }
-      return box;
-    }
-
     function rebuild(headerActions) {
       if (!container) return;
       container.innerHTML = "";
@@ -1914,9 +2084,22 @@
         container.appendChild(lockHint);
       }
 
-      const cloudEmptyKey = locked ? "skills.cloud.locked" : "skills.cloud.empty";
-      container.appendChild(section("skills.section.cloud", "skills.section.cloudHint", cloud, cloudCard, cloudEmptyKey));
-      container.appendChild(section("skills.section.local", "skills.section.localHint", local, localCard, "skills.local.empty"));
+      const sections = [{
+        id: "local",
+        label: t("skills.section.local"),
+        hint: t("skills.section.localHint"),
+        items: local,
+        cardFn: localCard,
+        emptyKey: "skills.local.empty",
+      }, {
+        id: "cloud",
+        label: t("skills.section.cloud"),
+        hint: t("skills.section.cloudHint"),
+        items: cloud,
+        cardFn: cloudCard,
+        emptyKey: locked ? "skills.cloud.locked" : "skills.cloud.empty",
+      }];
+      sectionTabs(sections, sectionState).forEach((node) => container.appendChild(node));
     }
 
     return {
@@ -2002,13 +2185,33 @@
     return item;
   }
 
+  let creatorNavItem = null;
+  let brandStatusReady = false;
+
+  function syncCreatorNavVisibility() {
+    if (!creatorNavItem) return;
+    const brandNonAdmin = typeof Brand !== "undefined" && Brand.branded && !Brand.userLicensed;
+    creatorNavItem.hidden = !brandStatusReady || brandNonAdmin;
+  }
+
+  if (typeof Brand !== "undefined") {
+    Brand.on("brand:status", function () {
+      brandStatusReady = true;
+      syncCreatorNavVisibility();
+    });
+  } else {
+    brandStatusReady = true;
+  }
+
   Clacky.ext.ui.registerWorkspace(WS_ID, {
     title: t("ws.title"),
     render(container) { renderWorkspace(container); },
   });
 
   Clacky.ext.ui.mount("sidebar.nav.bottom", function () {
-    return navRow("nav.entry", function () { Clacky.ext.ui.openWorkspace(WS_ID); });
+    creatorNavItem = navRow("nav.entry", function () { Clacky.ext.ui.openWorkspace(WS_ID); });
+    syncCreatorNavVisibility();
+    return creatorNavItem;
   }, { workspace: WS_ID });
 
   // Extension-developer session tools: debug + publish, as aside tabs. These
@@ -2041,7 +2244,7 @@
     .studio-detail-desc { margin: 4px 0 0; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
     .studio-units { display: flex; flex-wrap: wrap; gap: 6px; }
     .studio-unit-chip { display: inline-flex; background: var(--color-bg-hover); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
-    .studio-actions { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
+    .studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
     .studio-skill-promo .studio-actions { margin: 12px 0 0; }
     .studio-btn { padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-primary); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 13px; font-weight: 500; }
     .studio-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
@@ -2083,15 +2286,14 @@
     .studio-page-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
     .studio-page-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--color-text-primary); }
     .studio-btn-sm { padding: 5px 12px; font-size: 12px; }
+    .studio-seg-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+    .studio-seg-hint { font-size: 11px; color: var(--color-text-muted); }
     .studio-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border-primary); margin-bottom: 24px; }
     .studio-tab { padding: 8px 16px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
     .studio-tab:hover { color: var(--color-text-primary); }
     .studio-tab-active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); }
     .studio-ext-block { margin-bottom: 20px; }
     .studio-block-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); padding: 8px 0 0; }
-    .studio-skill-section { margin-bottom: 28px; }
-    .studio-skill-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
-    .studio-skill-hint { font-size: 11px; color: var(--color-text-muted); }
     .studio-skill-card { border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 12px; margin: 0 0 10px; background: var(--color-bg-secondary); }
     .studio-skill-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
     .studio-skill-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
@@ -2099,6 +2301,7 @@
     .studio-skill-badge-published { background: var(--color-success-bg, var(--color-bg-hover)); color: var(--color-success); }
     .studio-skill-badge-local { background: var(--color-bg-hover); color: var(--color-text-tertiary); }
     .studio-skill-badge-changed { background: var(--color-warning-bg, var(--color-bg-hover)); color: var(--color-warning, var(--color-text-secondary)); }
+    .studio-skill-badge-unlisted { background: var(--color-warning-bg, var(--color-bg-hover)); color: var(--color-warning, var(--color-text-secondary)); }
     .studio-skill-badge-shadow { background: var(--color-bg-hover); color: var(--color-text-secondary); }
     .studio-skill-desc { margin: 6px 0 6px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
     .studio-skill-meta { display: flex; gap: 12px; font-size: 11px; color: var(--color-text-muted); margin-top: 6px; }
@@ -2150,6 +2353,12 @@
     .studio-readme-preview pre code, .extension-readme-body pre code { background: none; padding: 0; }
     .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); }
+    .studio-actions-overflow { display: none; align-items: center; justify-content: center; align-self: stretch; box-sizing: border-box; padding: 7px 12px; }
+    .studio-overflow-menu .session-actions-menu-item.is-disabled { opacity: 0.5; cursor: default; }
+    @media (max-width: 768px) {
+      .studio-actions > .studio-btn-collapsible { display: none; }
+      .studio-actions > .studio-actions-overflow { display: inline-flex; }
+    }
   `;
   document.head.appendChild(style);
 })();