pandorga 1.3.11 → 1.4.2

data/studio-app/src/main.js

@@ -17,8 +17,6 @@ import {
   loadPageSizePreference,
   savePageSizePreference,
   formatEntryListMeta,
-  itemTags,
-  collectDistinctTags,
 } from "./lib/list-controls.js";
 import {
   yamlEditKind,
@@ -212,8 +210,6 @@ const state = {
   listPageSizeByCollection: Object.create(null),
   /** Per-collection current page (1-based; session only). */
   listPageByCollection: Object.create(null),
-  /** Per-collection tag filter (session only; writing lists). */
-  listTagByCollection: Object.create(null),
   /** In-session nav entry counts keyed by collection name. */
   navCountByCollection: Object.create(null),
   /** Session tree cache: collection name → { items }. Avoids re-fetch on revisit. */
@@ -297,6 +293,25 @@ function navGroupDomId(group) {
   );
 }
 
+/** Expand/collapse a left-nav group without rebuilding the shell (keeps scroll). */
+function toggleNavGroup(group) {
+  const open = !state.navOpenGroups.has(group);
+  if (open) state.navOpenGroups.add(group);
+  else state.navOpenGroups.delete(group);
+
+  const items = document.getElementById(navGroupDomId(group));
+  if (!items) return;
+  items.hidden = !open;
+  const toggle = items
+    .closest(".studio-nav-group")
+    ?.querySelector(".studio-nav-group-toggle");
+  if (toggle) {
+    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    const icon = toggle.querySelector(".material-symbols-outlined");
+    if (icon) icon.textContent = open ? "expand_more" : "chevron_right";
+  }
+}
+
 function collectionHint(col) {
   const cleaned = sanitizeUiCopy(col.description);
   if (cleaned) return cleaned;
@@ -532,19 +547,6 @@ function resetListPage() {
   state.listPageByCollection[name] = 1;
 }
 
-function currentListTag() {
-  const name = state.collection?.name;
-  if (!name) return "";
-  return state.listTagByCollection[name] || "";
-}
-
-function setListTag(tag) {
-  const name = state.collection?.name;
-  if (!name) return;
-  state.listTagByCollection[name] = String(tag || "");
-  resetListPage();
-}
-
 function rememberNavCount(col, count) {
   if (!col?.name) return;
   state.navCountByCollection[col.name] = Math.max(0, Number(count) || 0);
@@ -792,7 +794,7 @@ function renderThemeMenu() {
   ));
 
   const btn = el("button", {
-    className: "btn btn-icon",
+    className: "btn btn-tool",
     type: "button",
     title: "Theme",
     "aria-label": "Theme",
@@ -812,54 +814,168 @@ function renderThemeMenu() {
       text: THEME_MENU_ICONS[themeChoice()] || THEME_MENU_ICONS.system,
       "aria-hidden": "true",
     }),
+    el("span", { className: "btn-label", text: "Theme" }),
   ]);
 
   return el("div", { className: "studio-theme-menu" }, [btn, menu]);
 }
 
-function renderStudioToolbar() {
-  const saveLabel = state.saving ? "Saving…" : state.dirty ? "Save draft" : "Saved";
-  const saveIcon = state.saving ? "progress_activity" : state.dirty ? "save" : "check";
-  return el("div", { className: "studio-toolbar studio-icon-bar" }, [
+function isLocalDevHost() {
+  const host = String(window.location.hostname || "");
+  return host === "localhost" || host === "127.0.0.1" || host === "[::1]";
+}
+
+function collectionAllowsCreate(col = state.collection) {
+  if (!col || col.type !== "collection") return false;
+  return col.operations?.create !== false;
+}
+
+function collectionAllowsDelete(col = state.collection) {
+  if (!col) return false;
+  return col.operations?.delete === true;
+}
+
+function sanitizeEntryKey(raw) {
+  return String(raw || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}
+
+function expandFilenamePattern(pattern, key) {
+  const now = new Date();
+  const y = String(now.getFullYear());
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return String(pattern || "{key}.md")
+    .replaceAll("{year}", y)
+    .replaceAll("{month}", m)
+    .replaceAll("{day}", d)
+    .replaceAll("{key}", key);
+}
+
+function todayIsoDate() {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+}
+
+function toolbarActionButton({
+  className,
+  title,
+  ariaLabel,
+  action = null,
+  disabled = false,
+  onClick,
+  icon,
+  label = null,
+  spinning = false,
+}) {
+  const kids = [
     el("span", {
-      className: "status-pill" + (state.error ? " error" : ""),
-      text: state.error
-        ? "Error"
-        : state.status || (state.session?.email || state.session?.userId || ""),
-      title: state.error || state.errorDetail || state.status || "",
+      className:
+        "material-symbols-outlined" + (spinning ? " studio-icon-spin" : ""),
+      text: icon,
+      "aria-hidden": "true",
     }),
-    el("span", { className: "spacer" }),
-    renderThemeMenu(),
-    el("button", {
-      className: "btn btn-icon",
+  ];
+  if (label) {
+    kids.push(el("span", { className: "btn-label", text: label }));
+  }
+  return el(
+    "button",
+    {
+      className,
       type: "button",
+      title,
+      "aria-label": ariaLabel,
+      "data-studio-action": action,
+      disabled,
+      onClick,
+    },
+    kids
+  );
+}
+
+function renderStudioToolbar({ brand = null, menuToggle = null } = {}) {
+  const saveLabel = state.saving ? "Saving…" : state.dirty ? "Save" : "Saved";
+  const saveIcon = state.saving ? "progress_activity" : state.dirty ? "save" : "check";
+  const statusText = state.error ? "Error" : state.status || "";
+
+  const brandCluster = el("div", { className: "studio-toolbar-brand" }, [
+    brand,
+    statusText
+      ? el("span", {
+          className: "status-pill studio-toolbar-status" + (state.error ? " error" : ""),
+          text: statusText,
+          title: state.error || state.errorDetail || state.status || "",
+        })
+      : null,
+  ]);
+
+  const actions = [
+    renderThemeMenu(),
+    toolbarActionButton({
+      className: "btn btn-tool",
       title: "Revert all edits to the last loaded or saved version",
-      "aria-label": "Discard edits",
-      "data-studio-action": "discard",
+      ariaLabel: "Discard edits",
+      action: "discard",
       disabled: !state.file || !state.dirty || !state.baseline,
       onClick: () => discardChanges(),
-    }, [materialIcon("undo")]),
-    el("button", {
-      className: "btn btn-icon btn-primary",
-      type: "button",
+      icon: "undo",
+      label: "Revert",
+    }),
+    toolbarActionButton({
+      className: "btn btn-tool btn-primary",
       title: state.saving
         ? "Saving this draft"
         : state.dirty
           ? "Commit this draft"
           : "No edits to commit yet",
-      "aria-label": saveLabel,
-      "data-studio-action": "save",
+      ariaLabel: saveLabel,
+      action: "save",
       disabled: state.saving || !state.file || !state.dirty,
       onClick: () => saveCurrent(),
-    }, [
-      el("span", {
-        className:
-          "material-symbols-outlined" + (state.saving ? " studio-icon-spin" : ""),
-        text: saveIcon,
-        "aria-hidden": "true",
-      }),
-    ]),
-  ]);
+      icon: saveIcon,
+      label: saveLabel,
+      spinning: state.saving,
+    }),
+  ];
+  if (state.file && collectionAllowsDelete()) {
+    actions.push(
+      toolbarActionButton({
+        className: "btn btn-tool btn-danger",
+        title: "Delete this entry from the repository",
+        ariaLabel: "Delete entry",
+        action: "delete",
+        onClick: () => deleteCurrentEntry(),
+        icon: "delete",
+        label: "Delete",
+      })
+    );
+  }
+  if (isLocalDevHost()) {
+    actions.push(
+      toolbarActionButton({
+        className: "btn btn-tool btn-reexport",
+        title: "Export content JSON locally and reload",
+        ariaLabel: "Export locally",
+        action: "reexport",
+        onClick: () => reexportLocalContent(),
+        icon: "sync",
+        label: "Export",
+      })
+    );
+  }
+
+  const kids = [
+    brandCluster,
+    el("span", { className: "spacer", "aria-hidden": "true" }),
+    ...actions,
+  ];
+  if (menuToggle) kids.push(menuToggle);
+  return el("header", { className: "studio-toolbar studio-icon-bar" }, kids);
 }
 
 function clerkUserEmail(clerk) {
@@ -985,11 +1101,11 @@ function renderPendingReviewGate(clerk, emailHint) {
   app.append(box);
 }
 
-/** Left-nav / map section order (References before Portfolio). */
+/** Left-nav / map section order. */
 const NAV_GROUP_ORDER = [
   "Writing",
-  "References",
   "Portfolio",
+  "References",
   "Pages",
   "CV Summary",
   "Presentation",
@@ -1040,9 +1156,7 @@ function renderMediaNavGroup() {
     "aria-expanded": open ? "true" : "false",
     "aria-controls": items.id,
     onClick: () => {
-      if (state.navOpenGroups.has(group)) state.navOpenGroups.delete(group);
-      else state.navOpenGroups.add(group);
-      renderShell();
+      toggleNavGroup(group);
     },
   }, [
     el("span", {
@@ -1102,13 +1216,13 @@ function renderShell() {
   const menuOpen = !!state.navMenuOpen;
 
   const brand = el("button", {
-    className: "studio-brand studio-brand-home",
+    className: "studio-brand studio-brand-home studio-brand-toolbar",
     type: "button",
     title: "Studio home",
     "aria-current": !state.collection && !state.mediaOpen ? "page" : null,
     onClick: () => goHome(),
   }, [
-    studioMark({ size: 40 }),
+    studioMark({ size: 22 }),
     el("span", { className: "studio-brand-copy" }, [
       el("span", { className: "studio-brand-name", text: "Studio" }),
     ]),
@@ -1144,6 +1258,8 @@ function renderShell() {
     id: "studio-nav-panel",
   });
 
+  panel.append(renderMediaNavGroup());
+
   for (const [group, cols] of groups) {
     const open = state.navOpenGroups.has(group);
     const items = el("div", {
@@ -1186,9 +1302,7 @@ function renderShell() {
       "aria-expanded": open ? "true" : "false",
       "aria-controls": items.id,
       onClick: () => {
-        if (state.navOpenGroups.has(group)) state.navOpenGroups.delete(group);
-        else state.navOpenGroups.add(group);
-        renderShell();
+        toggleNavGroup(group);
       },
     }, [
       el("span", {
@@ -1203,14 +1317,6 @@ function renderShell() {
     ]);
 
     panel.append(el("div", { className: "studio-nav-group" }, [toggle, items]));
-
-    if (group === "Portfolio" || (group === "References" && !groups.has("Portfolio"))) {
-      panel.append(renderMediaNavGroup());
-    }
-  }
-
-  if (!groups.has("Portfolio") && !groups.has("References")) {
-    panel.append(renderMediaNavGroup());
   }
 
   const nav = el(
@@ -1219,16 +1325,12 @@ function renderShell() {
       className: "studio-nav" + (menuOpen ? " is-open" : ""),
       "aria-label": "Collections",
     },
-    [
-      el("div", { className: "studio-nav-bar" }, [brand, menuToggle]),
-      panel,
-    ]
+    [panel]
   );
 
-  const toolbar = renderStudioToolbar();
+  const toolbar = renderStudioToolbar({ brand, menuToggle });
 
   const main = el("div", { className: "studio-main" }, [
-    toolbar,
     renderErrorBanner(),
     renderStudioBreadcrumb(),
     el("div", {
@@ -1237,7 +1339,7 @@ function renderShell() {
     }),
   ]);
 
-  app.append(el("div", { className: "studio-shell" }, [nav, main]));
+  app.append(el("div", { className: "studio-shell" }, [toolbar, nav, main]));
   renderMain();
   syncThemeMenuUi();
   if (!window.__studioMenuDismissBound) {
@@ -1565,7 +1667,7 @@ function syncCommitButtons() {
   const save = document.querySelector("[data-studio-action='save']");
   const discard = document.querySelector("[data-studio-action='discard']");
   if (save) {
-    const saveLabel = state.saving ? "Saving…" : state.dirty ? "Save draft" : "Saved";
+    const saveLabel = state.saving ? "Saving…" : state.dirty ? "Save" : "Saved";
     save.disabled = state.saving || !state.file || !state.dirty;
     save.title = state.saving
       ? "Saving this draft"
@@ -1582,6 +1684,8 @@ function syncCommitButtons() {
           : "check";
       icon.classList.toggle("studio-icon-spin", state.saving);
     }
+    const label = save.querySelector(".btn-label");
+    if (label) label.textContent = saveLabel;
   }
   if (discard) {
     discard.disabled = !state.file || !state.dirty || !state.baseline;
@@ -1948,7 +2052,7 @@ function renderYamlEditorPane() {
 
 function renderStudioMap() {
   const groups = collectionGroups(state.schema);
-  const sections = [];
+  const sections = [renderMediaMapSection()];
 
   for (const [group, cols] of groups) {
     const cards = cols.map((col) =>
@@ -1984,23 +2088,8 @@ function renderStudioMap() {
         el("div", { className: "studio-map-grid" }, cards),
       ])
     );
-
-    // Insert Media section after Portfolio (or after References if no Portfolio).
-    if (group === "Portfolio" || (group === "References" && !groups.has("Portfolio"))) {
-      sections.push(renderMediaMapSection());
-    }
-  }
-
-  if (!groups.has("Portfolio") && !groups.has("References")) {
-    sections.push(renderMediaMapSection());
   }
 
-  // Split groups across two columns so wide screens read as a ledger board,
-  // not a single skinny stack in empty space.
-  const splitAt = Math.ceil(sections.length / 2);
-  const colA = sections.slice(0, splitAt);
-  const colB = sections.slice(splitAt);
-
   return el("div", { className: "pane studio-map" }, [
     el("span", {
       className: "studio-shard studio-shard--lead",
@@ -2010,20 +2099,15 @@ function renderStudioMap() {
       className: "studio-shard studio-shard--beta studio-shard--trail",
       "aria-hidden": "true",
     }),
-    el("header", { className: "studio-map-header" }, [
-      el("p", { className: "studio-map-kicker", text: "Studio" }),
-      el("h1", { text: "Studio map" }),
-      el("p", {
-        className: "studio-map-lede",
-        text: "Pick a collection, page, or the media library. Groups match the left navigation.",
-      }),
-    ]),
-    el("div", { className: "studio-map-board", role: "navigation", "aria-label": "Collections map" }, [
-      el("div", { className: "studio-map-col" }, colA),
-      colB.length
-        ? el("div", { className: "studio-map-col" }, colB)
-        : null,
-    ]),
+    el(
+      "div",
+      {
+        className: "studio-map-board",
+        role: "navigation",
+        "aria-label": "Collections map",
+      },
+      sections
+    ),
   ]);
 }
 
@@ -2057,12 +2141,10 @@ function renderListPane() {
   const query = currentListQuery();
   const sortId = currentListSortId();
   const pageSizeId = currentListPageSizeId();
-  const tagFilter = currentListTag();
   const writing = isWritingCollection();
   const filtered = applyListControls(state.items, {
     query,
     sortId,
-    tag: writing ? tagFilter : "",
   });
   const pageInfo = paginateItems(filtered, {
     pageSizeId,
@@ -2179,8 +2261,6 @@ function renderListPane() {
     ]),
   ]);
 
-  const tagChips = writing ? renderTagFilterChips(state.items, tagFilter) : null;
-
   let emptyNode = null;
   if (!filtered.length) {
     if (state.error) {
@@ -2205,9 +2285,7 @@ function renderListPane() {
     } else {
       emptyNode = el("p", {
         className: "list-empty",
-        text: tagFilter
-          ? "No entries match this tag filter."
-          : "No entries match this search.",
+        text: "No entries match this search.",
       });
     }
   }
@@ -2250,7 +2328,7 @@ function renderListPane() {
   // Title already shows total entry count — list-count only when range/filter adds info.
   let countText = "";
   if (state.items.length > 0) {
-    const filteredNote = query || tagFilter;
+    const filteredNote = query;
     if (!filtered.length) {
       countText = filteredNote ? `0 of ${state.items.length}` : "";
     } else if (pageInfo.pageSize == null) {
@@ -2269,7 +2347,6 @@ function renderListPane() {
     ? el("div", { className: "ledger-columns", "aria-hidden": "true" }, [
         el("span", { className: "ledger-col-thumb" }),
         el("span", { className: "ledger-col-manuscript", text: "Manuscript" }),
-        el("span", { className: "ledger-col-taxonomy", text: "Taxonomy" }),
         el("span", { className: "ledger-col-ops", text: "Operations" }),
       ])
     : null;
@@ -2277,7 +2354,6 @@ function renderListPane() {
   return el("div", { className: "pane" }, [
     header,
     controls,
-    tagChips,
     countText
       ? el("p", { className: "list-count", text: countText })
       : null,
@@ -2287,48 +2363,6 @@ function renderListPane() {
   ]);
 }
 
-function renderTagFilterChips(items, activeTag) {
-  const tags = collectDistinctTags(items);
-  if (!tags.length) return null;
-  const chips = [
-    el("button", {
-      className:
-        "list-tag-chip" + (!activeTag ? " is-active" : ""),
-      type: "button",
-      text: `All (${items.length})`,
-      "aria-pressed": !activeTag ? "true" : "false",
-      onClick: () => {
-        setListTag("");
-        renderMain();
-      },
-    }),
-  ];
-  for (const tag of tags) {
-    const count = items.filter((item) =>
-      itemTags(item).some((t) => t.toLowerCase() === tag.toLowerCase())
-    ).length;
-    if (!count) continue;
-    const active = activeTag.toLowerCase() === tag.toLowerCase();
-    chips.push(
-      el("button", {
-        className: "list-tag-chip" + (active ? " is-active" : ""),
-        type: "button",
-        text: `${tag} (${count})`,
-        "aria-pressed": active ? "true" : "false",
-        onClick: () => {
-          setListTag(active ? "" : tag);
-          renderMain();
-        },
-      })
-    );
-  }
-  return el("div", {
-    className: "list-tag-filters",
-    role: "group",
-    "aria-label": "Filter by tag",
-  }, chips);
-}
-
 function languageChip(itemOrFields) {
   const lang = String(itemOrFields?.language || "").trim();
   if (!lang) return null;
@@ -2339,21 +2373,49 @@ function languageChip(itemOrFields) {
   });
 }
 
-function taxonomyChips(item) {
-  const tags = itemTags(item);
-  if (!tags.length) return null;
-  return el(
-    "div",
-    { className: "ledger-taxonomy" },
-    tags.map((tag) =>
-      el("span", { className: "ledger-tag", text: tag })
-    )
+function renderLedgerOps(item, { open }) {
+  const canDelete = collectionAllowsDelete();
+  const label = item.title || item.name || "entry";
+  const editBtn = el(
+    "button",
+    {
+      className: "btn btn-icon ledger-op-btn ledger-edit-btn",
+      type: "button",
+      title: `Edit ${label}`,
+      "aria-label": `Edit ${label}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        open();
+      },
+    },
+    [materialIcon("edit")]
   );
+  const deleteBtn = canDelete
+    ? el(
+        "button",
+        {
+          className: "btn btn-icon ledger-op-btn ledger-delete-btn",
+          type: "button",
+          title: `Delete ${label}`,
+          "aria-label": `Delete ${label}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            deleteEntry(item.path, item.sha);
+          },
+        },
+        [materialIcon("delete")]
+      )
+    : null;
+  return el("div", { className: "ledger-ops", role: "group", "aria-label": "Operations" }, [
+    editBtn,
+    deleteBtn,
+  ]);
 }
 
 function renderLedgerRow(item, writing) {
   const metaText = formatEntryListMeta(item, state.collection);
   const open = () => openFile(item.path);
+  const ops = renderLedgerOps(item, { open });
 
   if (!writing) {
     const titleBlock = el("div", { className: "ledger-copy" }, [
@@ -2366,14 +2428,21 @@ function renderLedgerRow(item, writing) {
         : null,
     ]);
     return el(
-      "button",
+      "div",
       {
-        className: "ledger-row",
-        type: "button",
+        className: "ledger-row ledger-row--plain",
+        role: "button",
+        tabindex: "0",
         title: entryHint(item),
         onClick: open,
+        onKeydown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            open();
+          }
+        },
       },
-      [thumbnailNode(item), titleBlock]
+      [thumbnailNode(item), titleBlock, ops]
     );
   }
 
@@ -2392,13 +2461,6 @@ function renderLedgerRow(item, writing) {
       : null,
   ]);
 
-  const taxonomy = taxonomyChips(item) || el("div", { className: "ledger-taxonomy" });
-
-  const ops = el("div", { className: "ledger-ops", "aria-hidden": "true" }, [
-    el("span", { className: "ledger-ops-edit", text: "Edit" }),
-    materialIcon("chevron_right", "ledger-ops-icon"),
-  ]);
-
   return el(
     "div",
     {
@@ -2414,7 +2476,7 @@ function renderLedgerRow(item, writing) {
         }
       },
     },
-    [thumbnailNode(item), manuscript, taxonomy, ops]
+    [thumbnailNode(item), manuscript, ops]
   );
 }
 
@@ -2472,6 +2534,21 @@ function renderListHeader(collection, { entryCount = null } = {}) {
       })
     );
   }
+  if (collectionAllowsCreate(collection)) {
+    titleRow.push(
+      el(
+        "button",
+        {
+          className: "btn btn-tool btn-primary list-new-btn",
+          type: "button",
+          title: `Add a new ${label} entry`,
+          "aria-label": `New ${label} entry`,
+          onClick: () => createNewEntry(),
+        },
+        [materialIcon("add"), el("span", { className: "btn-label", text: "New" })]
+      )
+    );
+  }
   return el("header", { className: "list-register" }, [
     el("p", { className: "list-register-kicker" }, [
       el("span", { className: "list-register-mark", "aria-hidden": "true" }),
@@ -3704,6 +3781,158 @@ function discardChanges() {
   renderShell();
 }
 
+async function reexportLocalContent() {
+  state.status = "Reexporting…";
+  clearError();
+  renderShell();
+  try {
+    const res = await fetch("/__dev/reexport", {
+      method: "POST",
+      headers: { Accept: "application/json" },
+    });
+    let data = {};
+    try {
+      data = await res.json();
+    } catch {
+      data = {};
+    }
+    if (!res.ok || !data.ok) {
+      throw new Error((data && data.error) || `Export failed: ${res.status}`);
+    }
+    state.status = "Reexported — reloading…";
+    renderShell();
+    setTimeout(() => {
+      try {
+        const url = new URL(window.location.href);
+        url.searchParams.set("_refresh", String(Date.now()));
+        window.location.replace(url.toString());
+      } catch {
+        window.location.reload();
+      }
+    }, 200);
+  } catch (err) {
+    captureError(err);
+    renderShell();
+  }
+}
+
+async function createNewEntry() {
+  const col = state.collection;
+  if (!collectionAllowsCreate(col)) return;
+  const raw = window.prompt(`New ${col.label || "entry"} key (slug):`);
+  if (raw == null) return;
+  const key = sanitizeEntryKey(raw);
+  if (!key) {
+    state.error = "Key must use letters, numbers, or hyphens.";
+    state.errorDetail = "";
+    renderShell();
+    return;
+  }
+  const filename = expandFilenamePattern(col.filename, key);
+  const path = `${String(col.path || "").replace(/\/$/, "")}/${filename}`;
+
+  const fields = emptyItemFromFields(col.fields || []);
+  for (const field of col.fields || []) {
+    if (
+      field?.hidden &&
+      field.name &&
+      Object.prototype.hasOwnProperty.call(field, "default")
+    ) {
+      fields[field.name] = field.default;
+    }
+  }
+  fields.key = key;
+  if (!fields.title) fields.title = key;
+  if (String(col.filename || "").includes("{year}") && !fields.date) {
+    fields.date = todayIsoDate();
+  }
+
+  let content;
+  if (col.format === "yaml") {
+    content = dumpYaml(pruneEmptyFields({ ...fields }, col.fields));
+  } else {
+    content = rebuildDocument("---\n---\n\n", {
+      fields,
+      body: "\n",
+      format: col.format || "yaml-frontmatter",
+    });
+  }
+  if (!content.endsWith("\n")) content += "\n";
+
+  state.status = `Creating ${path}…`;
+  clearError();
+  renderShell();
+  try {
+    let exists = false;
+    try {
+      await studioApi.getFile(path);
+      exists = true;
+    } catch (err) {
+      if (err.status !== 404 && err.code !== "not_found") throw err;
+    }
+    if (exists) throw new Error(`${path} already exists`);
+
+    await studioApi.putFile({
+      path,
+      content,
+      sha: null,
+      message: `studio: create ${path}`,
+    });
+    invalidateTreeCache(col.name);
+    state.status = `Created ${path}`;
+    await selectCollection(col);
+    await openFile(path);
+  } catch (err) {
+    captureError(err);
+    renderShell();
+  }
+}
+
+async function deleteEntry(path, sha = null) {
+  const col = state.collection;
+  if (!collectionAllowsDelete(col) || !path) return;
+  const name = String(path).split("/").pop() || path;
+  if (!window.confirm(`Delete ${name}?\n\nThis commits a deletion to main and cannot be undone from Studio.`)) {
+    return;
+  }
+  state.status = `Deleting ${path}…`;
+  clearError();
+  renderShell();
+  try {
+    let fileSha = sha;
+    if (!fileSha) {
+      const data = await studioApi.getFile(path);
+      fileSha = data.sha;
+    }
+    await studioApi.deleteFile({
+      path,
+      sha: fileSha,
+      message: `studio: delete ${path}`,
+    });
+    invalidateTreeCache(col?.name);
+    if (state.file === path) {
+      destroyBodyEditor();
+      state.file = null;
+      state.baseline = null;
+      state.sha = null;
+      state.dirty = false;
+      state.fields = {};
+      state.body = "";
+    }
+    state.status = `Deleted ${path}`;
+    if (col) await selectCollection(col);
+    else renderShell();
+  } catch (err) {
+    captureError(err);
+    renderShell();
+  }
+}
+
+async function deleteCurrentEntry() {
+  if (!state.file) return;
+  await deleteEntry(state.file, state.sha);
+}
+
 async function saveCurrent() {
   if (!state.file || state.saving) return;
   syncBodyFromEditor();