@betterportal/config-manager 10.1.43 → 10.1.45

package/lib/plugins/service-betterportal-config-manager/fragmentsEditor.js

@@ -1,367 +1,233 @@
 import { htmlResponse, jsonResponse } from "@betterportal/framework";
-const API_BASE = "/.well-known/bp/admin";
-// Parse-only base for relative request URLs. Never emit this origin.
+import { getCachedManifestForService } from "./syncApi.js";
+const API_BASE = "/.well-known/bp/admin/fragments-editor";
 const RELATIVE_URL_PARSE_BASE = "http://betterportal.invalid";
-async function readFormBody(event) {
-    const fd = await event.req.formData().catch(() => null);
-    if (!fd)
-        return {};
-    const out = {};
-    fd.forEach((v, k) => { if (typeof v === "string")
-        out[k] = v; });
-    return out;
+async function readForm(event) {
+    const data = await event.req.formData().catch(() => null);
+    const result = {};
+    data?.forEach((value, key) => { if (typeof value === "string")
+        result[key] = value; });
+    return result;
 }
-function escapeHtml(s) {
-    return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (character) => ({
+        "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
+    })[character]);
 }
-function getApp(config, appId) {
-    return config.apps.find((a) => a.id === appId) ?? null;
+function appFor(config, appId) {
+    return config.apps.find((app) => app.id === appId) ?? null;
 }
-function getServicesForApp(config, appDef) {
-    const tenant = (config.tenants ?? []).find((t) => t.id === appDef.tenantId);
-    if (!tenant)
+function servicesFor(config, app) {
+    const tenant = config.tenants.find((candidate) => candidate.id === app.tenantId);
+    const shared = (config.sharedServiceActivations ?? []).flatMap((activation) => {
+        if (!activation.enabled || activation.tenantId !== app.tenantId || (activation.appId && activation.appId !== app.id))
+            return [];
+        const service = config.sharedServiceCatalog.find((candidate) => candidate.enabled && candidate.id === activation.sharedServiceId);
+        return service ? [{ ...service, id: activation.id, hostname: service.baseUrl }] : [];
+    });
+    return [
+        ...(tenant?.services ?? []),
+        ...(config.platformServices ?? []).filter((service) => tenant?.activatedPlatformServices?.includes(service.id)),
+        ...shared
+    ].filter((service) => service.enabled);
+}
+function serviceFor(config, app, serviceId) {
+    return servicesFor(config, app).find((service) => service.id === serviceId) ?? null;
+}
+function serviceLabel(config, app, serviceId) {
+    const service = serviceFor(config, app, serviceId);
+    return service ? `${service.title || service.serviceId || service.id} · ${service.serviceId || service.id}` : serviceId;
+}
+function settingsFor(app, shellServiceId) {
+    app.shellFragments = app.shellFragments ?? {};
+    app.shellFragments[shellServiceId] = app.shellFragments[shellServiceId] ?? {};
+    return app.shellFragments[shellServiceId];
+}
+function effectiveBlockItems(app, shellServiceId, definition) {
+    const setting = app.shellFragments?.[shellServiceId]?.[definition.id];
+    if (setting?.mode === "none")
         return [];
-    const tenantSvcs = (tenant.services ?? []).filter((s) => s.enabled).map((s) => ({
-        id: s.id, title: s.title || s.serviceId || s.id, hostname: s.hostname
-    }));
-    const platformSvcs = (tenant.activatedPlatformServices ?? [])
-        .map((psId) => (config.platformServices ?? []).find((p) => p.id === psId && p.enabled))
-        .filter(Boolean)
-        .map((p) => ({ id: p.id, title: `${p.title || p.id} (platform)`, hostname: p.hostname }));
-    const sharedSvcs = (config.sharedServiceActivations ?? [])
-        .filter((activation) => activation.enabled
-        && activation.tenantId === appDef.tenantId
-        && (!activation.appId || activation.appId === appDef.id))
-        .map((activation) => {
-        const shared = (config.sharedServiceCatalog ?? []).find((s) => s.id === activation.sharedServiceId && s.enabled);
-        return shared ? {
-            id: activation.id,
-            title: `${shared.title || shared.id} (shared)`,
-            hostname: shared.baseUrl
-        } : null;
-    })
-        .filter(Boolean);
-    return [...tenantSvcs, ...platformSvcs, ...sharedSvcs];
+    if (setting?.mode === "items")
+        return [...setting.items];
+    if (setting?.mode === "override")
+        return [setting.item];
+    const legacy = app.fragments?.[definition.id] ?? [];
+    if (legacy.length)
+        return legacy.filter((item) => item.enabled).map((item) => ({
+            source: "service",
+            ...item,
+            fragmentId: item.fragmentId.includes(".") ? item.fragmentId : `${definition.id}.${item.fragmentId}`
+        }));
+    const legacySlots = (app.slots ?? []).flatMap((slot) => {
+        if (!slot.enabled || !slot.slotId.startsWith(`${definition.id}.`))
+            return [];
+        const route = app.routes.find((candidate) => candidate.enabled !== false
+            && candidate.serviceId === slot.serviceId
+            && candidate.viewId === slot.viewId);
+        const targetPath = route?.resolvedServicePath ?? route?.targetPath;
+        return targetPath ? [{ source: "service", serviceId: slot.serviceId, fragmentId: slot.slotId, targetPath }] : [];
+    });
+    if (legacySlots.length)
+        return legacySlots;
+    return definition.defaultItems.map((fragmentId) => ({ source: "shell", fragmentId }));
 }
-function getServiceTitle(config, serviceId) {
-    for (const t of config.tenants ?? []) {
-        const s = (t.services ?? []).find((x) => x.id === serviceId);
-        if (s)
-            return s.title || s.serviceId || s.id;
-    }
-    const activation = (config.sharedServiceActivations ?? []).find((x) => x.id === serviceId);
-    if (activation) {
-        const shared = (config.sharedServiceCatalog ?? []).find((x) => x.id === activation.sharedServiceId);
-        if (shared)
-            return `${shared.title || shared.id} (shared)`;
-    }
-    const ps = (config.platformServices ?? []).find((x) => x.id === serviceId);
-    return ps ? (ps.title || ps.id) : serviceId;
+function encodeItem(item) {
+    return item.source === "shell"
+        ? `h:${encodeURIComponent(item.fragmentId)}`
+        : `s:${item.serviceId}:${encodeURIComponent(item.fragmentId)}:${encodeURIComponent(item.targetPath)}`;
 }
-function getServiceHostname(config, serviceId) {
-    for (const t of config.tenants ?? []) {
-        const s = (t.services ?? []).find((x) => x.id === serviceId);
-        if (s)
-            return s.hostname ?? null;
+function decodeItem(value) {
+    try {
+        const parts = value.split(":");
+        if (parts[0] === "h" && parts[1])
+            return { source: "shell", fragmentId: decodeURIComponent(parts[1]) };
+        if (parts[0] === "s" && parts.length === 4)
+            return {
+                source: "service",
+                serviceId: parts[1],
+                fragmentId: decodeURIComponent(parts[2]),
+                targetPath: decodeURIComponent(parts[3])
+            };
     }
-    const activation = (config.sharedServiceActivations ?? []).find((x) => x.id === serviceId);
-    if (activation) {
-        const shared = (config.sharedServiceCatalog ?? []).find((x) => x.id === activation.sharedServiceId);
-        if (shared)
-            return shared.baseUrl ?? null;
+    catch {
+        return null;
     }
-    const ps = (config.platformServices ?? []).find((x) => x.id === serviceId);
-    return ps?.hostname ?? null;
+    return null;
 }
-function getFragments(appDef, location) {
-    const all = (appDef.fragments ?? {});
-    return all[location] ?? [];
+function availableItems(config, app, definitions) {
+    const builtIns = definitions
+        .filter((definition) => definition.kind === "fragment")
+        .map((definition) => ({ item: { source: "shell", fragmentId: definition.id }, label: `Shell · ${definition.title}` }));
+    const services = servicesFor(config, app);
+    const serviceItems = services.flatMap((service) => {
+        const manifest = getCachedManifestForService(config, service.id);
+        return Object.values(manifest?.viewIndex ?? {}).flatMap((view) => view.fragments
+            .filter((fragment) => app.routes.some((route) => route.enabled !== false
+            && route.serviceId === service.id
+            && (route.resolvedServicePath ?? route.targetPath) === fragment.targetPath))
+            .map((fragment) => ({
+            item: { source: "service", serviceId: service.id, fragmentId: fragment.fragmentId, targetPath: fragment.targetPath },
+            label: `${serviceLabel(config, app, service.id)} · ${fragment.fragmentId} (${fragment.targetPath})`
+        })));
+    });
+    return [...builtIns, ...serviceItems];
 }
-function setFragments(appDef, location, frags) {
-    appDef.fragments = appDef.fragments ?? {};
-    appDef.fragments[location] = frags;
+function hidden(appId, shellServiceId, fragmentId) {
+    return `<input type="hidden" name="appId" value="${escapeHtml(appId)}"><input type="hidden" name="shellServiceId" value="${escapeHtml(shellServiceId)}"><input type="hidden" name="fragmentId" value="${escapeHtml(fragmentId)}">`;
 }
-const LOCATIONS = [
-    { id: "nav", label: "Topbar (right side)" },
-    { id: "footer", label: "Footer" }
-];
-function renderFragmentRow(frag, idx, location, appId, config) {
-    const serviceTitle = getServiceTitle(config, frag.serviceId);
-    const btn = (action, label, btnClass, title) => `<form hx-post="${API_BASE}/fragments-editor/${action}" hx-target="#bp-fragments-editor" hx-swap="outerHTML" class="d-inline m-0">
-      <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
-      <input type="hidden" name="location" value="${escapeHtml(location)}" />
-      <input type="hidden" name="index" value="${idx}" />
-      <button type="submit" class="btn btn-sm ${btnClass}" title="${escapeHtml(title)}">${label}</button>
-    </form>`;
-    return `<li class="list-group-item d-flex justify-content-between align-items-center">
-    <div class="d-flex flex-column gap-1 flex-grow-1 min-width-0">
-      <div class="d-flex align-items-center gap-2">
-        <span class="badge text-bg-secondary">${escapeHtml(serviceTitle)}</span>
-        <span class="font-monospace">${escapeHtml(frag.fragmentId)}</span>
-        <span class="text-secondary">-></span>
-        <span class="font-monospace text-secondary small">${escapeHtml(frag.targetPath)}</span>
-      </div>
-    </div>
-    <div class="btn-group btn-group-sm" role="group">
-      ${btn("move-up", "^", "btn-outline-secondary", "Move up")}
-      ${btn("move-down", "v", "btn-outline-secondary", "Move down")}
-      ${btn("toggle", frag.enabled ? "on" : "off", frag.enabled ? "btn-success" : "btn-outline-secondary", frag.enabled ? "Disable" : "Enable")}
-      ${btn("remove", "x", "btn-outline-danger", "Remove")}
-    </div>
-  </li>`;
+function modeButtons(appId, shellServiceId, definition) {
+    const button = (mode, label, style) => `<form class="d-inline" hx-post="${API_BASE}/set-mode" hx-target="#bp-fragments-editor" hx-swap="outerHTML">${hidden(appId, shellServiceId, definition.id)}<input type="hidden" name="mode" value="${mode}"><button class="btn btn-sm ${style}" type="submit">${label}</button></form>`;
+    return `<div class="btn-group">${button("default", "Use shell default", "btn-outline-secondary")}${button("none", "Empty", "btn-outline-danger")}</div>`;
 }
-function renderLocationSection(location, label, frags, appId, config, appDef) {
-    const services = getServicesForApp(config, appDef);
-    const serviceOpts = ["<option value=\"\">Select service...</option>",
-        ...services.map((s) => {
-            const schemaUrl = `${s.hostname.replace(/\/+$/, "")}/.well-known/bp/schema.json`;
-            return `<option value="${escapeHtml(s.id)}" data-schema-url="${escapeHtml(schemaUrl)}">${escapeHtml(s.title)}</option>`;
-        })
-    ].join("");
-    const rows = frags.length === 0
-        ? `<li class="list-group-item text-secondary">No fragments in this location.</li>`
-        : frags.map((f, i) => renderFragmentRow(f, i, location, appId, config)).join("");
-    return `<div class="card mb-3">
-    <div class="card-header"><strong>${escapeHtml(label)}</strong> <span class="small text-secondary">(${frags.length})</span></div>
-    <ul class="list-group list-group-flush">${rows}</ul>
-    <div class="card-body">
-      <form hx-post="${API_BASE}/fragments-editor/add" hx-target="#bp-fragments-editor" hx-swap="outerHTML"
-        class="row g-2 align-items-end">
-        <input type="hidden" name="appId" value="${escapeHtml(appId)}" />
-        <input type="hidden" name="location" value="${escapeHtml(location)}" />
-        <div class="col-md-3">
-          <label class="form-label small mb-0">Service</label>
-          <select name="serviceId" class="form-select form-select-sm" required
-            hx-get="${API_BASE}/fragments-editor/fragments"
-            hx-target="#bp-frag-select-${location}"
-            hx-swap="outerHTML"
-            hx-trigger="change"
-            hx-include="closest form">${serviceOpts}</select>
-        </div>
-        <div class="col-md-3">
-          <label class="form-label small mb-0">Fragment</label>
-          <select id="bp-frag-select-${location}" name="fragmentId" class="form-select form-select-sm" required
-            data-bp-frag-select
-            data-location="${escapeHtml(location)}">
-            <option value="">Pick service first...</option>
-          </select>
-          <div id="bp-frag-status-${location}" class="form-text small text-secondary"></div>
-        </div>
-        <div class="col-md-4">
-          <label class="form-label small mb-0">Target Path</label>
-          <input id="bp-frag-target-${location}" type="text" name="targetPath" class="form-control form-control-sm font-monospace" placeholder="auto-filled" required />
-        </div>
-        <div class="col-md-2">
-          <button type="submit" class="btn btn-primary btn-sm w-100">Add</button>
-        </div>
-      </form>
-    </div>
-  </div>`;
+function itemLabel(item, config, app, definitions) {
+    if (item.source === "shell")
+        return `Shell · ${definitions.find((definition) => definition.id === item.fragmentId)?.title ?? item.fragmentId}`;
+    return `${serviceLabel(config, app, item.serviceId)} · ${item.fragmentId} (${item.targetPath})`;
 }
-function renderFragmentEditorScript() {
-    return `<script>
-(() => {
-  const root = document.getElementById("bp-fragments-editor");
-  if (!root) return;
-
-  const escapeHtml = (value) => String(value).replace(/[&<>"']/g, (ch) => ({
-    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
-  })[ch]);
-
-  const loadFragments = async (fragmentSelect) => {
-    const location = fragmentSelect.dataset.location || "";
-    const schemaUrl = fragmentSelect.dataset.schemaUrl || "";
-    const targetInput = root.querySelector("#bp-frag-target-" + CSS.escape(location));
-    const status = root.querySelector("#bp-frag-status-" + CSS.escape(location));
-    if (targetInput) targetInput.value = "";
-    try {
-      if (status) status.textContent = "Loading service schema from " + schemaUrl;
-      const response = await fetch(schemaUrl, {
-        method: "GET",
-        headers: { Accept: "application/json" },
-        cache: "no-store"
-      });
-      if (!response.ok) throw new Error(String(response.status));
-      const schema = (response.headers.get("content-type") || "").includes("application/json") ? await response.json() : null;
-      if (!schema) throw new Error("service schema returned non-JSON");
-      const fragments = [];
-      for (const route of schema.routes || []) {
-        for (const fragment of route.fragments || []) {
-          if (location && fragment.fragmentLocation !== location) continue;
-          fragments.push({
-            fragmentId: fragment.fragmentId,
-            viewPath: route.path || ""
-          });
-        }
-      }
-
-      if (fragments.length === 0) {
-        fragmentSelect.innerHTML = '<option value="">No fragments at "' + escapeHtml(location) + '"</option>';
-        return;
-      }
-
-      fragmentSelect.innerHTML = '<option value="">Select fragment...</option>' + fragments
-        .map((fragment) => '<option value="' + escapeHtml(fragment.fragmentId) + '" data-view-path="' + escapeHtml(fragment.viewPath) + '">' + escapeHtml(fragment.fragmentId) + ' (' + escapeHtml(fragment.viewPath) + ')</option>')
-        .join("");
-      if (status) status.textContent = "Loaded " + fragments.length + " fragment" + (fragments.length === 1 ? "" : "s") + " from service.";
-    } catch {
-      fragmentSelect.innerHTML = '<option value="">Unable to load fragments from browser</option>';
-      if (status) status.textContent = "Failed to load service schema from " + schemaUrl;
-    }
-  };
-
-  if (root.dataset.bpFragmentsBound !== "1") {
-    root.dataset.bpFragmentsBound = "1";
-    root.addEventListener("change", (event) => {
-      const target = event.target;
-      if (!(target instanceof HTMLSelectElement)) return;
-
-      if (target.matches("[data-bp-frag-select]")) {
-        const location = target.dataset.location || "";
-        const targetInput = root.querySelector("#bp-frag-target-" + CSS.escape(location));
-        const selected = target.selectedOptions && target.selectedOptions[0];
-        if (targetInput) targetInput.value = selected ? (selected.dataset.viewPath || "") : "";
-      }
-    });
-  }
-
-  root.querySelectorAll("[data-bp-frag-select][data-schema-url]").forEach((select) => {
-    if (select.dataset.loaded === "1") return;
-    select.dataset.loaded = "1";
-    loadFragments(select);
-  });
-})();
-</script>`;
+function sourceSelect(items) {
+    return `<select name="source" class="form-select form-select-sm" required><option value="">Select fragment...</option>${items.map(({ item, label }) => `<option value="${escapeHtml(encodeItem(item))}">${escapeHtml(label)}</option>`).join("")}</select>`;
 }
-function renderFragmentSelect(location, schemaUrl) {
-    return `<select id="bp-frag-select-${escapeHtml(location)}" name="fragmentId" class="form-select form-select-sm" required
-    data-bp-frag-select
-    data-location="${escapeHtml(location)}"
-    data-schema-url="${escapeHtml(schemaUrl)}">
-    <option value="">Loading fragments...</option>
-  </select>
-  ${renderFragmentEditorScript()}`;
+function renderDefinition(config, app, shellServiceId, definition, definitions, choices) {
+    const setting = app.shellFragments?.[shellServiceId]?.[definition.id];
+    const status = setting?.mode ?? (app.fragments?.[definition.id]?.length ? "legacy default" : "shell default");
+    if (definition.kind === "fragment") {
+        return `<section class="card mb-3"><div class="card-header d-flex justify-content-between align-items-center"><div><strong>${escapeHtml(definition.title)}</strong><div class="small text-secondary font-monospace">_${escapeHtml(definition.id)}.tsx · ${escapeHtml(status)}</div></div>${modeButtons(app.id, shellServiceId, definition)}</div><div class="card-body"><p class="small text-secondary">${escapeHtml(definition.description)}</p><form class="row g-2" hx-post="${API_BASE}/set-override" hx-target="#bp-fragments-editor" hx-swap="outerHTML">${hidden(app.id, shellServiceId, definition.id)}<div class="col">${sourceSelect(choices.filter(({ item }) => item.source === "service"))}</div><div class="col-auto"><button class="btn btn-sm btn-primary" type="submit">Override</button></div></form></div></section>`;
+    }
+    const items = effectiveBlockItems(app, shellServiceId, definition);
+    const rows = items.length ? items.map((item, index) => `<li class="list-group-item d-flex justify-content-between align-items-center"><span>${escapeHtml(itemLabel(item, config, app, definitions))}</span><div class="btn-group">${["move-up", "move-down", "remove"].map((action) => `<form hx-post="${API_BASE}/${action}" hx-target="#bp-fragments-editor" hx-swap="outerHTML">${hidden(app.id, shellServiceId, definition.id)}<input type="hidden" name="index" value="${index}"><button class="btn btn-sm ${action === "remove" ? "btn-outline-danger" : "btn-outline-secondary"}" type="submit"${(action === "move-up" && index === 0) || (action === "move-down" && index === items.length - 1) ? " disabled" : ""}>${action === "move-up" ? "Move up" : action === "move-down" ? "Move down" : "Remove"}</button></form>`).join("")}</div></li>`).join("") : `<li class="list-group-item text-secondary">Empty block.</li>`;
+    return `<section class="card mb-3"><div class="card-header d-flex justify-content-between align-items-center"><div><strong>${escapeHtml(definition.title)}</strong><div class="small text-secondary font-monospace">_${escapeHtml(definition.id)}/index.tsx · ${escapeHtml(status)}</div></div>${modeButtons(app.id, shellServiceId, definition)}</div><ul class="list-group list-group-flush">${rows}</ul><div class="card-body"><p class="small text-secondary">${escapeHtml(definition.description)}</p><form class="row g-2" hx-post="${API_BASE}/add" hx-target="#bp-fragments-editor" hx-swap="outerHTML">${hidden(app.id, shellServiceId, definition.id)}<div class="col">${sourceSelect(choices)}</div><div class="col-auto"><button class="btn btn-sm btn-primary" type="submit">Add</button></div></form></div></section>`;
 }
-function renderEditor(config, appDef, appId) {
-    const sections = LOCATIONS.map((loc) => renderLocationSection(loc.id, loc.label, getFragments(appDef, loc.id), appId, config, appDef)).join("");
-    return `<div id="bp-fragments-editor">${sections}${renderFragmentEditorScript()}</div>`;
+function renderEditor(config, app) {
+    const shellServiceId = app.shell?.serviceId;
+    if (!shellServiceId)
+        return `<div id="bp-fragments-editor" class="alert alert-secondary">This app has no shell, so it has no shell fragments.</div>`;
+    const manifest = getCachedManifestForService(config, shellServiceId);
+    const definitions = manifest?.shell?.fragments ?? [];
+    if (!definitions.length)
+        return `<div id="bp-fragments-editor" class="alert alert-secondary">The active shell exposes no fragments or has not synced its manifest yet.</div>`;
+    const choices = availableItems(config, app, definitions);
+    return `<div id="bp-fragments-editor"><div class="mb-3"><strong>${escapeHtml(serviceLabel(config, app, shellServiceId))}</strong><div class="small text-secondary">Shell defaults are used until an explicit override, list, or empty value is saved.</div></div>${definitions.map((definition) => renderDefinition(config, app, shellServiceId, definition, definitions, choices)).join("")}</div>`;
 }
-export function registerFragmentsEditorRoutes(app, store) {
-    const respondEditor = async (appId) => {
+export function registerFragmentsEditorRoutes(router, store) {
+    const respond = async (appId) => {
         const config = await store.loadConfig();
-        const appDef = getApp(config, appId);
-        if (!appDef)
-            return htmlResponse(`<div class="alert alert-danger">App not found</div>`, 200, "text/html; mode=fragment");
-        return htmlResponse(renderEditor(config, appDef, appId), 200, "text/html; mode=fragment", {
-            "HX-Trigger": "bp:fragments-changed"
-        });
+        const app = appFor(config, appId);
+        return app
+            ? htmlResponse(renderEditor(config, app), 200, "text/html; mode=fragment", { "HX-Trigger": "bp:fragments-changed" })
+            : htmlResponse(`<div id="bp-fragments-editor" class="alert alert-danger">App not found.</div>`, 200, "text/html; mode=fragment");
     };
-    app.get(`${API_BASE}/fragments-editor`, async (event) => {
-        const url = new URL(event.req.url ?? "", RELATIVE_URL_PARSE_BASE);
-        const appId = url.searchParams.get("appId") ?? "";
-        if (!appId)
-            return htmlResponse(`<div class="alert alert-secondary">Select an app</div>`, 200, "text/html; mode=fragment");
-        return respondEditor(appId);
-    });
-    app.post(`${API_BASE}/fragments-editor/add`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
-        const appDef = getApp(config, f.appId);
-        if (!appDef)
-            return jsonResponse({ error: "App not found" }, 404);
-        if (!f.serviceId || !f.fragmentId || !f.targetPath)
-            return respondEditor(f.appId);
-        const frags = getFragments(appDef, f.location);
-        frags.push({
-            serviceId: f.serviceId,
-            fragmentId: f.fragmentId,
-            targetPath: f.targetPath,
-            enabled: true
-        });
-        setFragments(appDef, f.location, frags);
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
-    });
-    app.post(`${API_BASE}/fragments-editor/remove`, async (event) => {
-        const f = await readFormBody(event);
+    const mutate = (handler) => async (event) => {
+        const form = await readForm(event);
         const config = await store.loadConfig();
-        const appDef = getApp(config, f.appId);
-        if (!appDef)
-            return jsonResponse({ error: "App not found" }, 404);
-        const idx = parseInt(f.index, 10);
-        const frags = getFragments(appDef, f.location);
-        if (idx >= 0 && idx < frags.length)
-            frags.splice(idx, 1);
-        setFragments(appDef, f.location, frags);
+        const app = appFor(config, form.appId);
+        if (!app || app.shell?.serviceId !== form.shellServiceId)
+            return jsonResponse({ error: "Active shell changed; reload the editor" }, 409);
+        const definitions = getCachedManifestForService(config, form.shellServiceId)?.shell?.fragments ?? [];
+        const definition = definitions.find((candidate) => candidate.id === form.fragmentId);
+        if (!definition)
+            return jsonResponse({ error: "Shell fragment is unavailable; reload the editor" }, 409);
+        const choices = availableItems(config, app, definitions);
+        if (!handler(form, app, settingsFor(app, form.shellServiceId), definition, choices))
+            return jsonResponse({ error: "Invalid fragment editor operation" }, 400);
         await store.saveConfig(config);
-        return respondEditor(f.appId);
-    });
-    app.post(`${API_BASE}/fragments-editor/toggle`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
-        const appDef = getApp(config, f.appId);
-        if (!appDef)
-            return jsonResponse({ error: "App not found" }, 404);
-        const idx = parseInt(f.index, 10);
-        const frags = getFragments(appDef, f.location);
-        if (idx >= 0 && idx < frags.length)
-            frags[idx].enabled = !frags[idx].enabled;
-        setFragments(appDef, f.location, frags);
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
-    });
-    app.post(`${API_BASE}/fragments-editor/move-up`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
-        const appDef = getApp(config, f.appId);
-        if (!appDef)
-            return jsonResponse({ error: "App not found" }, 404);
-        const idx = parseInt(f.index, 10);
-        const frags = getFragments(appDef, f.location);
-        if (idx > 0 && idx < frags.length) {
-            const [it] = frags.splice(idx, 1);
-            frags.splice(idx - 1, 0, it);
-        }
-        setFragments(appDef, f.location, frags);
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
-    });
-    app.get(`${API_BASE}/fragments-editor/fragments`, async (event) => {
-        const url = new URL(event.req.url ?? "", RELATIVE_URL_PARSE_BASE);
-        const serviceId = url.searchParams.get("serviceId") ?? "";
-        const location = url.searchParams.get("location") ?? "";
-        if (!serviceId)
-            return htmlResponse(`<option value="">Pick service first...</option>`, 200, "text/html; mode=fragment");
-        const config = await store.loadConfig();
-        const hostname = getServiceHostname(config, serviceId);
-        if (!hostname) {
-            return htmlResponse(`<select id="bp-frag-select-${escapeHtml(location)}" name="fragmentId" class="form-select form-select-sm" required><option value="">No service</option></select>`, 200, "text/html; mode=fragment");
-        }
-        return htmlResponse(renderFragmentSelect(location, `${hostname.replace(/\/+$/, "")}/.well-known/bp/schema.json`), 200, "text/html; mode=fragment");
-    });
-    app.get(`${API_BASE}/fragments-editor/fragment-target`, async (event) => {
-        const url = new URL(event.req.url ?? "", RELATIVE_URL_PARSE_BASE);
-        const serviceId = url.searchParams.get("serviceId") ?? "";
-        const fragmentId = url.searchParams.get("fragmentId") ?? "";
-        const location = url.searchParams.get("location") ?? "";
-        const targetPath = url.searchParams.get("targetPath") ?? "";
-        return htmlResponse(`<input id="bp-frag-target-${escapeHtml(location)}" type="text" name="targetPath" class="form-control form-control-sm font-monospace" value="${escapeHtml(targetPath)}" placeholder="auto-filled" required />`, 200, "text/html; mode=fragment");
+        return respond(form.appId);
+    };
+    router.get(API_BASE, async (event) => {
+        const appId = new URL(event.req.url ?? "", RELATIVE_URL_PARSE_BASE).searchParams.get("appId") ?? "";
+        return appId ? respond(appId) : htmlResponse(`<div id="bp-fragments-editor" class="alert alert-secondary">Select an app.</div>`, 200, "text/html; mode=fragment");
     });
-    app.post(`${API_BASE}/fragments-editor/move-down`, async (event) => {
-        const f = await readFormBody(event);
-        const config = await store.loadConfig();
-        const appDef = getApp(config, f.appId);
-        if (!appDef)
-            return jsonResponse({ error: "App not found" }, 404);
-        const idx = parseInt(f.index, 10);
-        const frags = getFragments(appDef, f.location);
-        if (idx >= 0 && idx < frags.length - 1) {
-            const [it] = frags.splice(idx, 1);
-            frags.splice(idx + 1, 0, it);
-        }
-        setFragments(appDef, f.location, frags);
-        await store.saveConfig(config);
-        return respondEditor(f.appId);
+    router.post(`${API_BASE}/set-mode`, mutate((form, _app, settings) => {
+        if (form.mode === "default")
+            delete settings[form.fragmentId];
+        else if (form.mode === "none")
+            settings[form.fragmentId] = { mode: "none" };
+        else
+            return false;
+        return true;
+    }));
+    router.post(`${API_BASE}/set-override`, mutate((form, _app, settings, definition, choices) => {
+        const item = decodeItem(form.source);
+        if (definition.kind !== "fragment" || item?.source !== "service" || !choices.some((choice) => encodeItem(choice.item) === form.source))
+            return false;
+        settings[form.fragmentId] = { mode: "override", item };
+        return true;
+    }));
+    router.post(`${API_BASE}/add`, mutate((form, app, settings, definition, choices) => {
+        const item = decodeItem(form.source);
+        if (definition.kind !== "block" || !item || !choices.some((choice) => encodeItem(choice.item) === form.source))
+            return false;
+        const current = settings[form.fragmentId]?.mode === "items" ? [...settings[form.fragmentId].items] : effectiveBlockItems(app, form.shellServiceId, definition);
+        settings[form.fragmentId] = { mode: "items", items: [...current, item] };
+        return true;
+    }));
+    const editItems = (operation) => mutate((form, app, settings, definition) => {
+        if (definition.kind !== "block")
+            return false;
+        const current = settings[form.fragmentId]?.mode === "items"
+            ? [...settings[form.fragmentId].items]
+            : effectiveBlockItems(app, form.shellServiceId, definition);
+        if (!operation(current, Number(form.index)))
+            return false;
+        settings[form.fragmentId] = { mode: "items", items: current };
+        return true;
     });
+    router.post(`${API_BASE}/remove`, editItems((items, index) => {
+        if (index < 0 || index >= items.length)
+            return false;
+        items.splice(index, 1);
+        return true;
+    }));
+    router.post(`${API_BASE}/move-up`, editItems((items, index) => {
+        if (index <= 0 || index >= items.length)
+            return false;
+        items.splice(index - 1, 0, ...items.splice(index, 1));
+        return true;
+    }));
+    router.post(`${API_BASE}/move-down`, editItems((items, index) => {
+        if (index < 0 || index >= items.length - 1)
+            return false;
+        items.splice(index + 1, 0, ...items.splice(index, 1));
+        return true;
+    }));
 }
 //# sourceMappingURL=fragmentsEditor.js.map