@cancia/toolbar 0.0.1

package/dist/cancia.js

@@ -0,0 +1,2629 @@
+// src/state.ts
+var state = {
+  config: null,
+  cmsData: {},
+  pending: /* @__PURE__ */ new Map(),
+  activeLang: "",
+  editMode: false,
+  /** Auth token from sessionStorage — set by toolbar/index.ts after session validation */
+  sessionToken: "",
+  /** Called by toolbar logout button — wired up by index.ts to avoid circular deps */
+  onLogout: null,
+  /** List schemas, keyed by name. Loaded once on toolbar init. */
+  schemas: {},
+  /** Currently-selected locale for list-panel + modal. Defaults to activeLang on open. */
+  activeListLocale: ""
+};
+function pendingKey(key, lang) {
+  return `${key}.${lang}`;
+}
+function getValue(key, lang) {
+  const full = `${key}.${lang}`;
+  const p = state.pending.get(full);
+  if (p) return p.value;
+  if (state.cmsData[full] !== void 0) return state.cmsData[full];
+  return "";
+}
+function setPending(key, lang, value) {
+  const full = pendingKey(key, lang);
+  state.pending.set(full, { key, lang, value });
+}
+function applyOverlay() {
+  document.querySelectorAll("[data-cms]").forEach((el) => {
+    if (el.dataset.cmsList !== void 0) return;
+    const key = el.dataset.cms;
+    if (!key) return;
+    const savedValue = state.cmsData[`${key}.${state.activeLang}`];
+    if (savedValue === void 0) return;
+    if (el.tagName === "IMG") {
+      el.src = savedValue;
+      return;
+    }
+    if (el.childElementCount > 0) {
+      console.warn(
+        `Cancia: skipping overlay for "${key}" \u2014 element has child elements (textContent would destroy them).`
+      );
+      return;
+    }
+    el.textContent = savedValue;
+  });
+}
+function revertPending() {
+  for (const [fullKey, { key, lang }] of state.pending) {
+    const savedValue = state.cmsData[fullKey] ?? "";
+    document.querySelectorAll(`[data-cms="${key}"]`).forEach((el) => {
+      if (el.tagName === "IMG") {
+        el.src = savedValue;
+      } else {
+        el.textContent = savedValue;
+      }
+    });
+  }
+  state.pending.clear();
+}
+
+// src/api.ts
+function headers() {
+  const h = { "Content-Type": "application/json" };
+  if (state.sessionToken) h["Authorization"] = `Bearer ${state.sessionToken}`;
+  return h;
+}
+async function fetchContent() {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(`${apiUrl}/api/cancia/content?site=${encodeURIComponent(site)}`, {
+    headers: headers()
+  });
+  if (!res.ok) throw new Error(`Cancia: failed to fetch content (${res.status})`);
+  return res.json();
+}
+async function saveEntry(key, lang, value) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(`${apiUrl}/api/cancia/save`, {
+    method: "POST",
+    headers: headers(),
+    body: JSON.stringify({ key, lang, value, site })
+  });
+  if (!res.ok) throw new Error(`Cancia: failed to save (${res.status})`);
+}
+function isAuthError(err) {
+  return err instanceof Error && err.message.includes("(401)");
+}
+function uploadImage(file, onProgress) {
+  return new Promise((resolve, reject) => {
+    const { apiUrl, site } = state.config;
+    const form = new FormData();
+    form.append("file", file);
+    form.append("site", site);
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", `${apiUrl}/api/cancia/upload`);
+    if (state.sessionToken) xhr.setRequestHeader("Authorization", `Bearer ${state.sessionToken}`);
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.lengthComputable) onProgress?.(Math.round(e.loaded / e.total * 100));
+    });
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          resolve(JSON.parse(xhr.responseText).url);
+        } catch {
+          reject(new Error("Cancia: invalid upload response"));
+        }
+      } else {
+        reject(new Error(`Cancia: failed to upload image (${xhr.status})`));
+      }
+    });
+    xhr.addEventListener("error", () => reject(new Error("Cancia: upload network error")));
+    xhr.send(form);
+  });
+}
+async function triggerPublish() {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(`${apiUrl}/api/cancia/publish`, {
+    method: "POST",
+    headers: headers(),
+    body: JSON.stringify({ site })
+  });
+  if (!res.ok) throw new Error(`Cancia: publish failed (${res.status})`);
+}
+async function fetchSchemas() {
+  const { apiUrl } = state.config;
+  const res = await fetch(`${apiUrl}/api/cancia/schemas`, { headers: headers() });
+  if (!res.ok) throw new Error(`Cancia: failed to fetch schemas (${res.status})`);
+  const body = await res.json();
+  return body.schemas;
+}
+function localeParam(locale) {
+  return locale ? `&locale=${encodeURIComponent(locale)}` : "";
+}
+async function fetchList(listName, locale) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}?site=${encodeURIComponent(site)}${localeParam(locale)}`,
+    { headers: headers() }
+  );
+  if (!res.ok) throw new Error(`Cancia: failed to fetch list "${listName}" (${res.status})`);
+  const body = await res.json();
+  return body.entries;
+}
+async function fetchTranslations(listName) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/_translations?site=${encodeURIComponent(site)}`,
+    { headers: headers() }
+  );
+  if (!res.ok) throw new Error(`Cancia: failed to fetch translations (${res.status})`);
+  const body = await res.json();
+  return body.translations;
+}
+async function createListEntry(listName, data, locale, id) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}?site=${encodeURIComponent(site)}${localeParam(locale)}`,
+    { method: "POST", headers: headers(), body: JSON.stringify({ data, id }) }
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error ?? `Cancia: failed to create entry (${res.status})`);
+  }
+  const body = await res.json();
+  return body.entry;
+}
+async function updateListEntry(listName, id, data, rev, locale) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/${encodeURIComponent(id)}?site=${encodeURIComponent(site)}${localeParam(locale)}`,
+    { method: "PATCH", headers: headers(), body: JSON.stringify({ data, _rev: rev }) }
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    const message = err.error ?? `Cancia: failed to update entry (${res.status})`;
+    throw Object.assign(new Error(message), { code: err.code });
+  }
+  const body = await res.json();
+  return body.entry;
+}
+async function deleteListEntry(listName, id, locale) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/${encodeURIComponent(id)}?site=${encodeURIComponent(site)}${localeParam(locale)}`,
+    { method: "DELETE", headers: headers() }
+  );
+  if (!res.ok) throw new Error(`Cancia: failed to delete entry (${res.status})`);
+}
+async function flushPending() {
+  const entries = Array.from(state.pending.values());
+  const results = await Promise.allSettled(
+    entries.map(({ key, lang, value }) => saveEntry(key, lang, value))
+  );
+  results.forEach((result, i) => {
+    if (result.status === "fulfilled") {
+      const { key, lang } = entries[i];
+      state.pending.delete(`${key}.${lang}`);
+    }
+  });
+  const failed = results.filter((r) => r.status === "rejected").length;
+  if (failed > 0) throw new Error(`Cancia: ${failed} save(s) failed`);
+}
+
+// src/highlight.ts
+var CMS_SELECTOR = "[data-cms], [data-cms-list]";
+var onSelect = null;
+var currentHighlighted = null;
+var cleanupFns = [];
+var scrollRAF = null;
+var overlayEl = null;
+var tooltipEl = null;
+var styleInjected = false;
+function accent() {
+  return state.config?.accentColor ?? "#6366f1";
+}
+function fieldType(el) {
+  if (el.dataset.cmsType === "image") return "image";
+  return el.tagName === "IMG" ? "image" : "text";
+}
+function elementMode(el) {
+  return el.dataset.cmsList ? "list" : "field";
+}
+function injectStyles() {
+  if (styleInjected) return;
+  styleInjected = true;
+  const s = document.createElement("style");
+  s.textContent = `
+    @keyframes cancia-highlight-in {
+      from { opacity: 0; transform: scale(0.98); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    @keyframes cancia-tooltip-in {
+      from { opacity: 0; transform: scale(0.95) translateY(3px); }
+      to   { opacity: 1; transform: scale(1)    translateY(0); }
+    }
+  `;
+  document.head.appendChild(s);
+}
+function getOrCreateOverlay() {
+  if (!overlayEl) {
+    overlayEl = document.createElement("div");
+    overlayEl.dataset.canciaOverlay = "1";
+    overlayEl.style.cssText = `
+      position: fixed;
+      pointer-events: none !important;
+      box-sizing: border-box;
+      border-radius: 5px;
+      z-index: 2147483644;
+      will-change: top, left, width, height, opacity;
+      transition: top 0.08s cubic-bezier(0.16,1,0.3,1), left 0.08s cubic-bezier(0.16,1,0.3,1),
+                  width 0.08s cubic-bezier(0.16,1,0.3,1), height 0.08s cubic-bezier(0.16,1,0.3,1);
+    `;
+    document.body.appendChild(overlayEl);
+  }
+  return overlayEl;
+}
+function getOrCreateTooltip() {
+  if (!tooltipEl) {
+    tooltipEl = document.createElement("div");
+    tooltipEl.dataset.canciaTooltip = "1";
+    tooltipEl.style.cssText = `
+      position: fixed;
+      pointer-events: none !important;
+      z-index: 2147483645;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      color: #fff;
+      background: rgba(10,10,12,0.92);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      border: 1px solid rgba(255,255,255,0.1);
+      padding: 4px 8px;
+      border-radius: 6px;
+      white-space: nowrap;
+      max-width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    `;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+}
+var lastOverlayEl = null;
+function listAccent(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return "#059669";
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const shifted = [g, b, r].map((c) => c.toString(16).padStart(2, "0")).join("");
+  return `#${shifted}`;
+}
+var FIELD_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+  <path d="M2 4h10M2 7h7M2 10h5"/>
+</svg>`;
+var IMAGE_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="1" y="1" width="12" height="12" rx="2"/>
+  <circle cx="4.5" cy="4.5" r="1.2"/>
+  <path d="M1 9.5l3.5-3 2.5 2.5 2-1.5 3 3.5"/>
+</svg>`;
+var LIST_ICON = `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="1" y="2" width="3" height="3" rx="0.5"/>
+  <rect x="1" y="7.5" width="3" height="3" rx="0.5"/>
+  <path d="M6 3.5h7M6 9h7"/>
+</svg>`;
+function positionOverlay(el, animate = false) {
+  const rect = el.getBoundingClientRect();
+  const mode = elementMode(el);
+  const a = mode === "list" ? listAccent(accent()) : accent();
+  const overlay = getOrCreateOverlay();
+  const tooltip = getOrCreateTooltip();
+  const padding = 3;
+  overlay.style.top = `${rect.top - padding}px`;
+  overlay.style.left = `${rect.left - padding}px`;
+  overlay.style.width = `${rect.width + padding * 2}px`;
+  overlay.style.height = `${rect.height + padding * 2}px`;
+  if (lastOverlayEl !== el) {
+    lastOverlayEl = el;
+    overlay.style.border = `2px ${mode === "list" ? "dashed" : "solid"} ${a}`;
+    overlay.style.background = `${a}12`;
+    let badgeIcon;
+    let badgeLabel;
+    let tooltipText;
+    if (mode === "list") {
+      badgeIcon = LIST_ICON;
+      badgeLabel = "list";
+      tooltipText = `list: ${el.dataset.cmsList}`;
+    } else {
+      const type = fieldType(el);
+      badgeIcon = type === "image" ? IMAGE_ICON : FIELD_ICON;
+      badgeLabel = type;
+      tooltipText = el.dataset.cms ?? "";
+    }
+    overlay.innerHTML = `
+      <div style="
+        position: absolute; top: -1px; left: -1px;
+        background: ${a}; color: #fff;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
+        padding: 2px 6px; border-radius: 3px 0 4px 0;
+        display: flex; align-items: center; gap: 4px;
+        line-height: 1;
+      ">
+        ${badgeIcon}
+        ${badgeLabel}
+      </div>
+    `;
+    tooltip.textContent = tooltipText;
+  }
+  overlay.style.display = "block";
+  if (animate) overlay.style.animation = "cancia-highlight-in 0.12s ease-out forwards";
+  tooltip.style.display = "block";
+  if (animate) tooltip.style.animation = "cancia-tooltip-in 0.1s ease-out forwards";
+  const tooltipMargin = 8;
+  const tooltipH = 26;
+  if (rect.top - tooltipH - tooltipMargin > 0) {
+    tooltip.style.top = `${rect.top - tooltipH - tooltipMargin + padding}px`;
+    tooltip.style.left = `${rect.left - padding}px`;
+  } else {
+    tooltip.style.top = `${rect.bottom + tooltipMargin - padding}px`;
+    tooltip.style.left = `${rect.left - padding}px`;
+  }
+}
+function hideOverlay() {
+  lastOverlayEl = null;
+  if (overlayEl) {
+    overlayEl.style.display = "none";
+    overlayEl.style.animation = "none";
+  }
+  if (tooltipEl) {
+    tooltipEl.style.display = "none";
+    tooltipEl.style.animation = "none";
+  }
+}
+function handleScroll() {
+  if (scrollRAF !== null) return;
+  scrollRAF = requestAnimationFrame(() => {
+    scrollRAF = null;
+    if (currentHighlighted) {
+      positionOverlay(currentHighlighted);
+    }
+  });
+}
+function handleMouseOver(e) {
+  const target = e.target.closest(CMS_SELECTOR);
+  if (!target) return;
+  currentHighlighted = target;
+  target.style.cursor = "pointer";
+  positionOverlay(target, true);
+}
+function handleMouseOut(e) {
+  const target = e.target.closest(CMS_SELECTOR);
+  if (!target) return;
+  const related = e.relatedTarget;
+  if (related && target.contains(related)) return;
+  target.style.cursor = "";
+  if (currentHighlighted === target) {
+    currentHighlighted = null;
+    hideOverlay();
+  }
+}
+function handleClick(e) {
+  const target = e.target.closest(CMS_SELECTOR);
+  if (!target) return;
+  e.preventDefault();
+  e.stopPropagation();
+  hideOverlay();
+  if (elementMode(target) === "list") {
+    const listName = target.dataset.cmsList;
+    onSelect?.({ kind: "list", el: target, listName });
+  } else {
+    const key = target.dataset.cms;
+    onSelect?.({ kind: "field", el: target, key, fieldType: fieldType(target) });
+  }
+}
+function attachHighlight(selectCallback) {
+  injectStyles();
+  onSelect = selectCallback;
+  document.addEventListener("mouseover", handleMouseOver, true);
+  document.addEventListener("mouseout", handleMouseOut, true);
+  document.addEventListener("click", handleClick, true);
+  window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+  cleanupFns = [
+    () => document.removeEventListener("mouseover", handleMouseOver, true),
+    () => document.removeEventListener("mouseout", handleMouseOut, true),
+    () => document.removeEventListener("click", handleClick, true),
+    () => window.removeEventListener("scroll", handleScroll, true)
+  ];
+}
+function detachHighlight() {
+  if (currentHighlighted) {
+    currentHighlighted.style.cursor = "";
+    currentHighlighted = null;
+  }
+  if (scrollRAF !== null) {
+    cancelAnimationFrame(scrollRAF);
+    scrollRAF = null;
+  }
+  hideOverlay();
+  overlayEl?.remove();
+  overlayEl = null;
+  tooltipEl?.remove();
+  tooltipEl = null;
+  cleanupFns.forEach((fn) => fn());
+  cleanupFns = [];
+  onSelect = null;
+}
+
+// src/events.ts
+var listeners = /* @__PURE__ */ new Set();
+function onPendingChange(cb) {
+  if (cb) {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+  }
+  listeners.forEach((fn) => fn());
+}
+
+// src/popup.ts
+var popupEl = null;
+var outsideListener = null;
+var keyListener = null;
+var dragover = false;
+var inputHandlers = /* @__PURE__ */ new WeakMap();
+function accent2() {
+  return state.config?.accentColor ?? "#6366f1";
+}
+function getPopupPosition(anchor) {
+  const rect = anchor.getBoundingClientRect();
+  const scrollY = window.scrollY;
+  const scrollX = window.scrollX;
+  const popupW = 320;
+  const popupH = 260;
+  const margin = 10;
+  let left = rect.left + scrollX;
+  let top = rect.bottom + scrollY + margin;
+  let origin = "top left";
+  if (rect.bottom + popupH + margin > window.innerHeight) {
+    top = rect.top + scrollY - popupH - margin;
+    origin = "bottom left";
+  }
+  if (left + popupW > window.innerWidth + scrollX) {
+    left = window.innerWidth + scrollX - popupW - margin;
+    origin = origin.replace("left", "right");
+  }
+  if (left < scrollX + margin) left = scrollX + margin;
+  return { top, left, origin };
+}
+function buildHeader(key, onClose) {
+  const header = document.createElement("div");
+  header.style.cssText = `
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 14px;
+  `;
+  const titleWrap = document.createElement("div");
+  titleWrap.style.cssText = `display: flex; flex-direction: column; gap: 1px; min-width: 0;`;
+  const titleEl = document.createElement("span");
+  const keyParts = key.split(".");
+  titleEl.textContent = keyParts[keyParts.length - 1].replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  titleEl.style.cssText = `
+    font-size: 13px; font-weight: 600;
+    color: rgba(255,255,255,0.9);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  `;
+  const keyEl = document.createElement("span");
+  keyEl.textContent = key;
+  keyEl.style.cssText = `
+    font-size: 10px; font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
+    color: rgba(255,255,255,0.22); letter-spacing: 0.03em;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  `;
+  titleWrap.appendChild(titleEl);
+  titleWrap.appendChild(keyEl);
+  header.appendChild(titleWrap);
+  header.appendChild(makeCloseButton(onClose));
+  return header;
+}
+function buildTextPopup(key, anchorEl, onClose) {
+  const langs = state.config?.languages ?? ["en"];
+  let activeLang = state.activeLang || langs[0];
+  const wrap = document.createElement("div");
+  wrap.dataset.canciaPopup = "1";
+  applyPopupStyles(wrap);
+  wrap.appendChild(buildHeader(key, onClose));
+  if (langs.length > 1) {
+    const tabs = document.createElement("div");
+    tabs.style.cssText = `display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);`;
+    const renderTabs2 = () => {
+      tabs.innerHTML = "";
+      langs.forEach((lang) => {
+        const tab = document.createElement("button");
+        tab.textContent = lang.toUpperCase();
+        const isActive = lang === activeLang;
+        tab.style.cssText = `
+          padding: 5px 10px 6px; border: none; border-bottom: 2px solid;
+          margin-bottom: -1px;
+          font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.06em;
+          background: transparent;
+          border-bottom-color: ${isActive ? accent2() : "transparent"};
+          color: ${isActive ? "#fff" : "rgba(255,255,255,0.3)"};
+          transition: color 0.15s, border-color 0.15s;
+        `;
+        tab.addEventListener("mouseenter", () => {
+          if (!isActive) tab.style.color = "rgba(255,255,255,0.6)";
+        });
+        tab.addEventListener("mouseleave", () => {
+          if (!isActive) tab.style.color = "rgba(255,255,255,0.3)";
+        });
+        tab.addEventListener("click", () => {
+          const current = wrap.querySelector("textarea");
+          if (current) {
+            const existing = getValue(key, activeLang);
+            const fallback = anchorEl.textContent?.trim() || "";
+            if (current.value !== (existing || fallback)) {
+              setPending(key, activeLang, current.value);
+            }
+          }
+          activeLang = lang;
+          state.activeLang = lang;
+          applyOverlay();
+          renderTabs2();
+          renderTextarea();
+        });
+        tabs.appendChild(tab);
+      });
+    };
+    renderTabs2();
+    wrap.appendChild(tabs);
+  }
+  let textarea;
+  const attachInputHandler = () => {
+    const prev = inputHandlers.get(textarea);
+    if (prev) textarea.removeEventListener("input", prev);
+    const handler = () => {
+      setPending(key, activeLang, textarea.value);
+      onPendingChange();
+      anchorEl.textContent = textarea.value;
+    };
+    inputHandlers.set(textarea, handler);
+    textarea.addEventListener("input", handler);
+  };
+  const renderTextarea = (isInit = false) => {
+    if (!isInit && textarea) {
+      textarea.value = getValue(key, activeLang) || anchorEl.textContent?.trim() || "";
+      textarea.style.borderColor = `${accent2()}66`;
+      textarea.style.background = "rgba(255,255,255,0.05)";
+      attachInputHandler();
+      return;
+    }
+    const footerEl = wrap.querySelector("[data-cancia-footer]");
+    textarea = document.createElement("textarea");
+    textarea.value = getValue(key, activeLang) || anchorEl.textContent?.trim() || "";
+    textarea.rows = 4;
+    textarea.placeholder = "Enter text\u2026";
+    textarea.style.cssText = `
+      width: 100%; box-sizing: border-box;
+      background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.9);
+      border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 13px; font-family: inherit; resize: none; outline: none;
+      transition: border-color 0.18s, background 0.18s;
+      line-height: 1.55;
+      caret-color: ${accent2()};
+    `;
+    textarea.addEventListener("focus", () => {
+      textarea.style.borderColor = `${accent2()}66`;
+      textarea.style.background = "rgba(255,255,255,0.05)";
+    });
+    textarea.addEventListener("blur", () => {
+      textarea.style.borderColor = "rgba(255,255,255,0.07)";
+      textarea.style.background = "rgba(255,255,255,0.03)";
+    });
+    attachInputHandler();
+    if (footerEl) {
+      wrap.insertBefore(textarea, footerEl);
+    } else {
+      wrap.appendChild(textarea);
+    }
+    setTimeout(() => textarea.focus(), 80);
+  };
+  renderTextarea(true);
+  const footer = document.createElement("div");
+  footer.dataset.canciaFooter = "1";
+  footer.style.cssText = `display: flex; justify-content: flex-end; margin-top: 10px;`;
+  const saveBtn = makePrimaryButton("Save", accent2());
+  saveBtn.dataset.canciaSave = "1";
+  saveBtn.title = "Save (\u2318S)";
+  saveBtn.addEventListener("click", () => {
+    const existing = getValue(key, activeLang);
+    const fallback = anchorEl.textContent?.trim() || "";
+    if (textarea.value !== (existing || fallback)) {
+      setPending(key, activeLang, textarea.value);
+    }
+    onPendingChange();
+    onClose();
+  });
+  footer.appendChild(saveBtn);
+  wrap.appendChild(footer);
+  return wrap;
+}
+function buildImagePopup(key, anchorEl, onClose) {
+  const wrap = document.createElement("div");
+  wrap.dataset.canciaPopup = "1";
+  applyPopupStyles(wrap);
+  wrap.appendChild(buildHeader(key, onClose));
+  const currentSrc = anchorEl.tagName === "IMG" ? anchorEl.src : anchorEl.querySelector("img")?.src ?? "";
+  if (currentSrc && !currentSrc.startsWith("data:")) {
+    const previewWrap = document.createElement("div");
+    previewWrap.style.cssText = `
+      border-radius: 10px; overflow: hidden; margin-bottom: 10px;
+      border: 1px solid rgba(255,255,255,0.06);
+      position: relative; height: 100px;
+    `;
+    const previewImg = document.createElement("img");
+    previewImg.src = currentSrc;
+    previewImg.style.cssText = `width: 100%; height: 100%; object-fit: cover; display: block;`;
+    const previewLabel = document.createElement("div");
+    previewLabel.textContent = "Current";
+    previewLabel.style.cssText = `
+      position: absolute; bottom: 0; left: 0; right: 0;
+      font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em;
+      padding: 16px 8px 6px;
+      background: linear-gradient(transparent, rgba(0,0,0,0.55));
+    `;
+    previewWrap.appendChild(previewImg);
+    previewWrap.appendChild(previewLabel);
+    wrap.appendChild(previewWrap);
+  }
+  const dropZone = document.createElement("label");
+  dropZone.style.cssText = `
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 8px;
+    border: 1.5px dashed rgba(255,255,255,0.1); border-radius: 10px;
+    padding: 24px 20px;
+    cursor: pointer;
+    transition: border-color 0.18s, background 0.18s;
+    background: rgba(255,255,255,0.015);
+  `;
+  const uploadIcon = document.createElement("div");
+  uploadIcon.style.cssText = `color: rgba(255,255,255,0.35); transition: color 0.18s;`;
+  uploadIcon.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 15V3m0 0L8 7m4-4l4 4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/>
+  </svg>`;
+  const dropText = document.createElement("div");
+  dropText.style.cssText = `text-align: center;`;
+  dropText.innerHTML = `
+    <div style="font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);">Drop an image</div>
+    <div style="font-size:11px;color:rgba(255,255,255,0.25);margin-top:2px;">or click to browse</div>
+  `;
+  dropZone.appendChild(uploadIcon);
+  dropZone.appendChild(dropText);
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = "image/*";
+  fileInput.style.display = "none";
+  dropZone.appendChild(fileInput);
+  const statusWrap = document.createElement("div");
+  statusWrap.style.cssText = `margin-top: 8px; min-height: 18px;`;
+  const statusMsg = document.createElement("p");
+  statusMsg.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.35); margin: 0; text-align: center; transition: color 0.2s;`;
+  const progressBar = document.createElement("div");
+  progressBar.style.cssText = `
+    height: 2px; border-radius: 2px; background: rgba(255,255,255,0.05);
+    overflow: hidden; margin-top: 6px; display: none;
+  `;
+  const progressFill = document.createElement("div");
+  progressFill.style.cssText = `
+    height: 100%; border-radius: 2px; background: ${accent2()};
+    width: 0%; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  `;
+  progressBar.appendChild(progressFill);
+  statusWrap.appendChild(statusMsg);
+  statusWrap.appendChild(progressBar);
+  const handleFile = async (file) => {
+    if (!file.type.startsWith("image/")) {
+      statusMsg.textContent = "Only image files are supported";
+      statusMsg.style.color = "#f87171";
+      return;
+    }
+    const maxMb = 10;
+    if (file.size > maxMb * 1024 * 1024) {
+      statusMsg.textContent = `File too large (max ${maxMb}MB)`;
+      statusMsg.style.color = "#f87171";
+      return;
+    }
+    dropZone.style.borderColor = `${accent2()}55`;
+    dropZone.style.background = `${accent2()}0a`;
+    uploadIcon.style.color = accent2();
+    statusMsg.textContent = "Uploading\u2026";
+    statusMsg.style.color = "rgba(255,255,255,0.45)";
+    progressBar.style.display = "block";
+    progressFill.style.width = "0%";
+    try {
+      const url = await uploadImage(file, (percent) => {
+        progressFill.style.width = `${percent}%`;
+      });
+      progressFill.style.width = "100%";
+      setPending(key, state.activeLang, url);
+      onPendingChange();
+      if (anchorEl.tagName === "IMG") {
+        const img = anchorEl;
+        img.srcset = "";
+        img.src = url;
+      } else {
+        const img = document.createElement("img");
+        img.src = url;
+        img.alt = "";
+        img.style.cssText = "width:100%;height:100%;object-fit:cover;display:block;";
+        img.dataset.cms = key;
+        anchorEl.replaceWith(img);
+      }
+      setTimeout(() => {
+        statusMsg.textContent = "Done";
+        statusMsg.style.color = "#4ade80";
+        setTimeout(onClose, 600);
+      }, 200);
+    } catch {
+      progressBar.style.display = "none";
+      statusMsg.textContent = "Upload failed \u2014 try again";
+      statusMsg.style.color = "#f87171";
+      dropZone.style.borderColor = "rgba(255,255,255,0.1)";
+      dropZone.style.background = "rgba(255,255,255,0.015)";
+      uploadIcon.style.color = "rgba(255,255,255,0.35)";
+    }
+  };
+  fileInput.addEventListener("change", () => {
+    if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+  });
+  dropZone.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    if (!dragover) {
+      dragover = true;
+      dropZone.style.borderColor = `${accent2()}88`;
+      dropZone.style.background = `${accent2()}0d`;
+      uploadIcon.style.color = accent2();
+    }
+  });
+  dropZone.addEventListener("dragleave", () => {
+    dragover = false;
+    dropZone.style.borderColor = "rgba(255,255,255,0.1)";
+    dropZone.style.background = "rgba(255,255,255,0.015)";
+    uploadIcon.style.color = "rgba(255,255,255,0.35)";
+  });
+  dropZone.addEventListener("drop", (e) => {
+    e.preventDefault();
+    dragover = false;
+    dropZone.style.borderColor = "rgba(255,255,255,0.1)";
+    dropZone.style.background = "rgba(255,255,255,0.015)";
+    const file = e.dataTransfer?.files[0];
+    if (file) handleFile(file);
+  });
+  dropZone.addEventListener("mouseenter", () => {
+    if (!dragover) {
+      dropZone.style.borderColor = "rgba(255,255,255,0.18)";
+      dropZone.style.background = "rgba(255,255,255,0.03)";
+    }
+  });
+  dropZone.addEventListener("mouseleave", () => {
+    if (!dragover) {
+      dropZone.style.borderColor = "rgba(255,255,255,0.1)";
+      dropZone.style.background = "rgba(255,255,255,0.015)";
+    }
+  });
+  wrap.appendChild(dropZone);
+  wrap.appendChild(statusWrap);
+  return wrap;
+}
+function makeCloseButton(onClose) {
+  const btn = document.createElement("button");
+  btn.style.cssText = `
+    display: flex; align-items: center; justify-content: center;
+    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
+    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
+    cursor: pointer; color: rgba(255,255,255,0.35); padding: 0;
+    transition: background 0.15s, color 0.15s;
+  `;
+  btn.innerHTML = `<svg width="9" height="9" viewBox="0 0 10 10" fill="none">
+    <path d="M1 1l8 8M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>`;
+  btn.addEventListener("mouseenter", () => {
+    btn.style.background = "rgba(255,255,255,0.08)";
+    btn.style.color = "rgba(255,255,255,0.75)";
+  });
+  btn.addEventListener("mouseleave", () => {
+    btn.style.background = "rgba(255,255,255,0.04)";
+    btn.style.color = "rgba(255,255,255,0.35)";
+  });
+  btn.addEventListener("click", onClose);
+  return btn;
+}
+function makePrimaryButton(label, color) {
+  const btn = document.createElement("button");
+  btn.textContent = label;
+  btn.style.cssText = `
+    padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;
+    background: #fff; color: #0c0c0e;
+    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
+    transition: opacity 0.15s, transform 0.1s cubic-bezier(0.2, 0, 0, 1);
+  `;
+  btn.addEventListener("mouseenter", () => btn.style.opacity = "0.88");
+  btn.addEventListener("mouseleave", () => btn.style.opacity = "1");
+  return btn;
+}
+function applyPopupStyles(el) {
+  el.style.cssText = `
+    position: absolute;
+    z-index: 2147483646;
+    width: 320px;
+    background: rgba(14, 14, 16, 0.97);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 14px;
+    padding: 14px;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.4);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    animation: cancia-popup-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+  `;
+}
+function openPopup(key, fieldType2, anchorEl, onClose) {
+  closePopup();
+  const popup = fieldType2 === "image" ? buildImagePopup(key, anchorEl, () => {
+    onClose();
+    closePopup();
+  }) : buildTextPopup(key, anchorEl, () => {
+    onClose();
+    closePopup();
+  });
+  document.body.appendChild(popup);
+  popupEl = popup;
+  const { top, left, origin } = getPopupPosition(anchorEl);
+  popup.style.top = `${top}px`;
+  popup.style.left = `${left}px`;
+  popup.style.transformOrigin = origin;
+  outsideListener = (e) => {
+    if (!popup.contains(e.target)) {
+      closePopup();
+      onClose();
+    }
+  };
+  setTimeout(() => {
+    if (outsideListener) document.addEventListener("click", outsideListener, true);
+  }, 100);
+  keyListener = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closePopup();
+      onClose();
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+      e.preventDefault();
+      popup.querySelector("[data-cancia-save]")?.click();
+    }
+  };
+  document.addEventListener("keydown", keyListener, true);
+}
+function closePopup() {
+  if (outsideListener) {
+    document.removeEventListener("click", outsideListener, true);
+    outsideListener = null;
+  }
+  if (keyListener) {
+    document.removeEventListener("keydown", keyListener, true);
+    keyListener = null;
+  }
+  if (popupEl) {
+    const el = popupEl;
+    popupEl = null;
+    el.style.animation = "none";
+    el.style.transition = "opacity 0.18s cubic-bezier(0.4, 0, 1, 1), transform 0.18s cubic-bezier(0.4, 0, 1, 1)";
+    el.style.opacity = "0";
+    el.style.transform = "scale(0.96) translateY(3px)";
+    setTimeout(() => el.remove(), 200);
+  }
+}
+
+// src/list-panel.ts
+var PANEL_Z = 2147483646;
+var BACKDROP_Z = 2147483646;
+var panelEl = null;
+var backdropEl = null;
+var styleInjected2 = false;
+var currentSchema = null;
+var currentBody = null;
+var currentTabsRow = null;
+var currentOnEditEntry = null;
+var currentOnAddEntry = null;
+var currentOnTranslateEntry = null;
+function injectStyles2() {
+  if (styleInjected2) return;
+  styleInjected2 = true;
+  const s = document.createElement("style");
+  s.textContent = `
+    @keyframes cancia-panel-in {
+      from { transform: translateX(100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes cancia-panel-out {
+      from { transform: translateX(0); }
+      to   { transform: translateX(100%); }
+    }
+    @keyframes cancia-backdrop-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+  `;
+  document.head.appendChild(s);
+}
+function accent3() {
+  return state.config?.accentColor ?? "#6366f1";
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function formatExcerpt(value, maxLength = 120) {
+  if (typeof value !== "string") return "";
+  const trimmed = value.trim();
+  if (trimmed.length <= maxLength) return trimmed;
+  return trimmed.slice(0, maxLength).trimEnd() + "\u2026";
+}
+function locales() {
+  return state.config?.languages ?? [];
+}
+function buildShell(schema) {
+  const panel = document.createElement("div");
+  panel.dataset.canciaListPanel = "1";
+  panel.style.cssText = `
+    position: fixed;
+    top: 0; right: 0; bottom: 0;
+    width: min(420px, 100vw);
+    background: #fff;
+    color: #1a1a1d;
+    z-index: ${PANEL_Z};
+    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    animation: cancia-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  `;
+  panel.innerHTML = `
+    <header style="
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid #eaeaea;
+    ">
+      <div>
+        <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #777;">List</div>
+        <div style="font-size: 17px; font-weight: 600; margin-top: 2px;">${escapeHtml(schema.label)}</div>
+      </div>
+      <button data-cancia-close style="
+        appearance: none; border: 0; background: transparent;
+        cursor: pointer; padding: 6px; border-radius: 6px;
+        color: #555; transition: background 0.12s, color 0.12s;
+      " aria-label="Close panel">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M4 4l10 10M14 4L4 14"/>
+        </svg>
+      </button>
+    </header>
+    <div data-cancia-tabs style="
+      display: flex; gap: 4px;
+      padding: 8px 16px 0;
+      border-bottom: 1px solid #f3f3f3;
+      overflow-x: auto;
+    "></div>
+    <div style="padding: 12px 20px; border-bottom: 1px solid #f3f3f3;">
+      <button data-cancia-add style="
+        appearance: none; border: 1px dashed ${accent3()}; background: ${accent3()}10;
+        color: ${accent3()}; font-weight: 600; font-size: 13px;
+        padding: 10px 14px; border-radius: 8px; width: 100%; cursor: pointer;
+        display: flex; align-items: center; justify-content: center; gap: 6px;
+        transition: background 0.12s;
+      ">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M7 2v10M2 7h10"/>
+        </svg>
+        Add ${escapeHtml(schema.labelSingular.toLowerCase())}
+      </button>
+    </div>
+    <div data-cancia-entries style="
+      flex: 1; overflow-y: auto;
+      padding: 8px 12px 16px;
+    ">
+      <div data-cancia-loading style="text-align: center; padding: 32px 12px; color: #888; font-size: 13px;">Loading\u2026</div>
+    </div>
+  `;
+  const body = panel.querySelector("[data-cancia-entries]");
+  const tabsRow = panel.querySelector("[data-cancia-tabs]");
+  return { panel, body, tabsRow };
+}
+function renderTabs(tabsRow, activeLocale, onSwitch) {
+  tabsRow.innerHTML = "";
+  const langs = locales();
+  if (langs.length <= 1) {
+    tabsRow.style.display = "none";
+    return;
+  }
+  tabsRow.style.display = "flex";
+  for (const loc of langs) {
+    const tab = document.createElement("button");
+    const isActive = loc === activeLocale;
+    tab.style.cssText = `
+      appearance: none; border: 0; background: transparent;
+      font-family: inherit; font-size: 12px; font-weight: 600;
+      letter-spacing: 0.04em; text-transform: uppercase;
+      padding: 8px 10px 9px;
+      cursor: ${isActive ? "default" : "pointer"};
+      color: ${isActive ? accent3() : "#777"};
+      border-bottom: 2px solid ${isActive ? accent3() : "transparent"};
+      margin-bottom: -1px;
+      transition: color 0.12s, border-color 0.12s;
+    `;
+    tab.textContent = loc;
+    if (!isActive) {
+      tab.addEventListener("mouseenter", () => {
+        tab.style.color = "#333";
+      });
+      tab.addEventListener("mouseleave", () => {
+        tab.style.color = "#777";
+      });
+      tab.addEventListener("click", () => onSwitch(loc));
+    }
+    tabsRow.appendChild(tab);
+  }
+}
+function renderEntries(body, schema, activeLocale, entriesInLocale, translations, allEntries) {
+  const entryById = /* @__PURE__ */ new Map();
+  for (const e of entriesInLocale) entryById.set(e.id, e);
+  const orderedIds = entriesInLocale.map((e) => e.id);
+  const seen = new Set(orderedIds);
+  for (const t of translations) {
+    if (!seen.has(t.id)) {
+      orderedIds.push(t.id);
+      seen.add(t.id);
+    }
+  }
+  const rows = orderedIds.map((id) => {
+    const entry = entryById.get(id) ?? null;
+    let translatedFrom = null;
+    if (!entry) {
+      const t = translations.find((x) => x.id === id);
+      if (t && t.locales.length > 0) translatedFrom = t.locales[0];
+    }
+    return { id, locale: activeLocale, entry, translatedFrom };
+  });
+  if (rows.length === 0) {
+    body.innerHTML = `
+      <div style="text-align: center; padding: 40px 12px; color: #888; font-size: 13px;">
+        No entries yet. Click "Add ${escapeHtml(schema.labelSingular.toLowerCase())}" above to create one.
+      </div>
+    `;
+    return;
+  }
+  body.innerHTML = "";
+  rows.forEach((row) => {
+    const item = document.createElement("button");
+    const isStub = row.entry === null;
+    item.style.cssText = `
+      appearance: none; border: 1px solid transparent; background: ${isStub ? "#fff8ee" : "#fafafa"};
+      text-align: left; width: 100%;
+      padding: 12px 14px; border-radius: 8px; cursor: pointer;
+      margin-bottom: 6px;
+      transition: background 0.12s, border-color 0.12s, transform 0.12s;
+      display: block;
+    `;
+    if (row.entry) {
+      const titleValue = row.entry.data[schema.titleField];
+      const title = typeof titleValue === "string" && titleValue.trim().length > 0 ? titleValue : `(untitled ${schema.labelSingular.toLowerCase()})`;
+      const excerptValue = schema.bodyField ? row.entry.data[schema.bodyField] : void 0;
+      const excerpt = formatExcerpt(excerptValue);
+      item.innerHTML = `
+        <div style="font-weight: 600; font-size: 14px; color: #1a1a1d;">${escapeHtml(title)}</div>
+        ${excerpt ? `<div style="font-size: 12px; color: #666; margin-top: 4px; line-height: 1.4;">${escapeHtml(excerpt)}</div>` : ""}
+      `;
+      item.addEventListener("mouseenter", () => {
+        item.style.background = "#f3f3f3";
+        item.style.borderColor = "#e3e3e3";
+      });
+      item.addEventListener("mouseleave", () => {
+        item.style.background = "#fafafa";
+        item.style.borderColor = "transparent";
+      });
+      item.addEventListener("click", () => currentOnEditEntry?.(row.entry, activeLocale));
+    } else {
+      const sourceLocale = row.translatedFrom;
+      const sourceEntry = allEntries.get(sourceLocale)?.find((e) => e.id === row.id) ?? null;
+      const sourceTitleValue = sourceEntry?.data[schema.titleField];
+      const sourceTitle = typeof sourceTitleValue === "string" && sourceTitleValue.trim().length > 0 ? sourceTitleValue : row.id;
+      item.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="
+            font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
+            background: #f5b400; color: #fff;
+            padding: 2px 6px; border-radius: 4px;
+          ">Not translated</span>
+          <span style="font-size: 11px; color: #888;">from ${escapeHtml(sourceLocale)}</span>
+        </div>
+        <div style="font-weight: 600; font-size: 14px; color: #6b5616; margin-top: 6px;">${escapeHtml(sourceTitle)}</div>
+        <div style="font-size: 11px; color: #b08800; margin-top: 4px;">Click to translate into ${escapeHtml(activeLocale)}</div>
+      `;
+      item.addEventListener("mouseenter", () => {
+        item.style.background = "#fff2d5";
+        item.style.borderColor = "#f5d27a";
+      });
+      item.addEventListener("mouseleave", () => {
+        item.style.background = "#fff8ee";
+        item.style.borderColor = "transparent";
+      });
+      item.addEventListener(
+        "click",
+        () => currentOnTranslateEntry?.(row.id, sourceEntry, activeLocale)
+      );
+    }
+    body.appendChild(item);
+  });
+}
+async function openListPanel(opts) {
+  closeListPanel();
+  injectStyles2();
+  const backdrop = document.createElement("div");
+  backdrop.dataset.canciaPanelBackdrop = "1";
+  backdrop.style.cssText = `
+    position: fixed; inset: 0;
+    background: rgba(10,10,12,0.32);
+    z-index: ${BACKDROP_Z};
+    animation: cancia-backdrop-in 0.18s ease-out forwards;
+  `;
+  backdrop.addEventListener("click", () => closeListPanel());
+  document.body.appendChild(backdrop);
+  backdropEl = backdrop;
+  const { panel, body, tabsRow } = buildShell(opts.schema);
+  document.body.appendChild(panel);
+  panelEl = panel;
+  currentSchema = opts.schema;
+  currentBody = body;
+  currentTabsRow = tabsRow;
+  currentOnEditEntry = opts.onEditEntry;
+  currentOnAddEntry = opts.onAddEntry;
+  currentOnTranslateEntry = opts.onTranslateEntry;
+  const langs = locales();
+  const initial = opts.initialLocale ?? state.activeLang ?? langs[0] ?? "";
+  state.activeListLocale = langs.includes(initial) ? initial : langs[0] ?? initial;
+  panel.querySelector("[data-cancia-close]")?.addEventListener(
+    "click",
+    () => closeListPanel()
+  );
+  panel.querySelector("[data-cancia-add]")?.addEventListener(
+    "click",
+    () => currentOnAddEntry?.(state.activeListLocale)
+  );
+  await refreshListPanel();
+}
+async function refreshListPanel() {
+  if (!panelEl || !currentSchema || !currentBody || !currentTabsRow) return;
+  const schema = currentSchema;
+  const body = currentBody;
+  const tabsRow = currentTabsRow;
+  renderTabs(tabsRow, state.activeListLocale, async (newLocale) => {
+    state.activeListLocale = newLocale;
+    await refreshListPanel();
+  });
+  try {
+    const langs = locales();
+    const [translations, ...perLocale] = await Promise.all([
+      fetchTranslations(schema.name),
+      ...langs.map((l) => fetchList(schema.name, l))
+    ]);
+    if (!panelEl) return;
+    const allEntries = /* @__PURE__ */ new Map();
+    langs.forEach((l, i) => allEntries.set(l, perLocale[i] ?? []));
+    const activeEntries = allEntries.get(state.activeListLocale) ?? [];
+    renderEntries(body, schema, state.activeListLocale, activeEntries, translations, allEntries);
+  } catch (err) {
+    if (!panelEl) return;
+    body.innerHTML = `
+      <div style="text-align: center; padding: 32px 12px; color: #c0392b; font-size: 13px;">
+        Failed to load entries: ${escapeHtml(err instanceof Error ? err.message : String(err))}
+      </div>
+    `;
+  }
+}
+function closeListPanel() {
+  if (panelEl) {
+    panelEl.style.animation = "cancia-panel-out 0.18s cubic-bezier(0.7, 0, 0.84, 0) forwards";
+    const el = panelEl;
+    setTimeout(() => el.remove(), 180);
+    panelEl = null;
+  }
+  if (backdropEl) {
+    const el = backdropEl;
+    el.style.opacity = "0";
+    el.style.transition = "opacity 0.18s ease-out";
+    setTimeout(() => el.remove(), 180);
+    backdropEl = null;
+  }
+  currentSchema = null;
+  currentBody = null;
+  currentTabsRow = null;
+  currentOnEditEntry = null;
+  currentOnAddEntry = null;
+  currentOnTranslateEntry = null;
+}
+function isListPanelOpen() {
+  return panelEl !== null;
+}
+
+// src/entry-modal.ts
+var MODAL_Z = 2147483647;
+var BACKDROP_Z2 = 2147483646;
+var modalEl = null;
+var backdropEl2 = null;
+var escListener = null;
+var styleInjected3 = false;
+function injectStyles3() {
+  if (styleInjected3) return;
+  styleInjected3 = true;
+  const s = document.createElement("style");
+  s.textContent = `
+    @keyframes cancia-modal-in {
+      from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
+      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    }
+    @keyframes cancia-modal-out {
+      from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+      to   { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
+    }
+    .cancia-form-input:focus,
+    .cancia-form-textarea:focus,
+    .cancia-form-select:focus {
+      border-color: var(--cancia-accent-border, rgba(99,102,241,0.6));
+      background: rgba(255,255,255,0.05);
+      outline: none;
+    }
+    .cancia-form-input::placeholder,
+    .cancia-form-textarea::placeholder {
+      color: rgba(255,255,255,0.25);
+    }
+    .cancia-form-select option {
+      background: #15151a;
+      color: rgba(255,255,255,0.9);
+    }
+    .cancia-field-error {
+      color: #ff8786;
+      font-size: 11px;
+      margin-top: 5px;
+      line-height: 1.35;
+    }
+  `;
+  document.head.appendChild(s);
+}
+function accent4() {
+  return state.config?.accentColor ?? "#6366f1";
+}
+function accentBorder() {
+  const a = accent4();
+  if (/^#[0-9a-f]{6}$/i.test(a)) return `${a}99`;
+  return "rgba(99,102,241,0.6)";
+}
+function isoToLocalInput(iso) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function localInputToIso(local) {
+  if (!local) return "";
+  const d = new Date(local);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toISOString();
+}
+var INPUT_BASE = `
+  width: 100%; box-sizing: border-box;
+  background: rgba(255,255,255,0.03);
+  color: rgba(255,255,255,0.9);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 8px;
+  padding: 8px 11px;
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 0.18s, background 0.18s;
+`;
+function renderField(field, initial) {
+  const wrapper = document.createElement("div");
+  wrapper.style.cssText = `margin-bottom: 14px;`;
+  const labelRow = document.createElement("label");
+  labelRow.style.cssText = `
+    display: flex; align-items: baseline; justify-content: space-between;
+    gap: 8px;
+    font-size: 11px; font-weight: 600;
+    color: rgba(255,255,255,0.75);
+    letter-spacing: 0.04em;
+    margin-bottom: 5px;
+  `;
+  const labelText = document.createElement("span");
+  labelText.textContent = field.label;
+  if (field.required) {
+    const star = document.createElement("span");
+    star.textContent = " *";
+    star.style.color = "rgba(255,135,134,0.8)";
+    labelText.appendChild(star);
+  }
+  labelRow.appendChild(labelText);
+  wrapper.appendChild(labelRow);
+  if (field.description) {
+    const help = document.createElement("div");
+    help.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 6px; line-height: 1.4;`;
+    help.textContent = field.description;
+    wrapper.appendChild(help);
+  }
+  const errorEl = document.createElement("div");
+  errorEl.className = "cancia-field-error";
+  errorEl.style.display = "none";
+  const setError = (msg) => {
+    if (msg) {
+      errorEl.textContent = msg;
+      errorEl.style.display = "block";
+    } else {
+      errorEl.textContent = "";
+      errorEl.style.display = "none";
+    }
+  };
+  let getValue2;
+  switch (field.widget) {
+    case "textarea": {
+      const ta = document.createElement("textarea");
+      ta.className = "cancia-form-textarea";
+      ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 110px; max-height: 320px; caret-color: ${accent4()};`;
+      ta.rows = 5;
+      if (field.placeholder) ta.placeholder = field.placeholder;
+      if (typeof initial === "string") ta.value = initial;
+      wrapper.appendChild(ta);
+      getValue2 = () => ta.value;
+      break;
+    }
+    case "checkbox": {
+      const row = document.createElement("label");
+      row.style.cssText = `display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; padding: 6px 0;`;
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.style.cssText = `width: 16px; height: 16px; accent-color: ${accent4()};`;
+      if (initial === true) cb.checked = true;
+      const txt = document.createElement("span");
+      txt.style.cssText = `font-size: 13px; color: rgba(255,255,255,0.7);`;
+      txt.textContent = field.placeholder ?? `Enable ${field.label.toLowerCase()}`;
+      row.appendChild(cb);
+      row.appendChild(txt);
+      wrapper.appendChild(row);
+      getValue2 = () => cb.checked;
+      break;
+    }
+    case "select": {
+      const sel = document.createElement("select");
+      sel.className = "cancia-form-select";
+      sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
+      if (!field.required) {
+        const empty = document.createElement("option");
+        empty.value = "";
+        empty.textContent = "\u2014";
+        sel.appendChild(empty);
+      }
+      for (const opt of field.options ?? []) {
+        const o = document.createElement("option");
+        o.value = opt;
+        o.textContent = opt;
+        if (initial === opt) o.selected = true;
+        sel.appendChild(o);
+      }
+      wrapper.appendChild(sel);
+      getValue2 = () => sel.value === "" ? void 0 : sel.value;
+      break;
+    }
+    case "image": {
+      const initialUrl = typeof initial === "string" ? initial : "";
+      let currentUrl = initialUrl;
+      const container = document.createElement("div");
+      container.style.cssText = `
+        display: flex; gap: 10px; align-items: stretch;
+        background: rgba(255,255,255,0.02);
+        border: 1px dashed rgba(255,255,255,0.1);
+        border-radius: 10px;
+        padding: 10px;
+      `;
+      const preview = document.createElement("div");
+      preview.style.cssText = `
+        width: 72px; height: 72px; flex-shrink: 0;
+        background: rgba(255,255,255,0.04) no-repeat center / cover;
+        border: 1px solid rgba(255,255,255,0.06);
+        border-radius: 6px;
+        display: flex; align-items: center; justify-content: center;
+        color: rgba(255,255,255,0.25);
+      `;
+      const updatePreview = (url) => {
+        if (url) {
+          preview.style.backgroundImage = `url("${url.replace(/"/g, '\\"')}")`;
+          preview.innerHTML = "";
+        } else {
+          preview.style.backgroundImage = "";
+          preview.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>`;
+        }
+      };
+      updatePreview(initialUrl);
+      const right = document.createElement("div");
+      right.style.cssText = `flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;`;
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = "image/*";
+      fileInput.style.display = "none";
+      const btnRow = document.createElement("div");
+      btnRow.style.cssText = `display: flex; gap: 6px;`;
+      const uploadBtn = document.createElement("button");
+      uploadBtn.type = "button";
+      uploadBtn.style.cssText = `
+        appearance: none; cursor: pointer;
+        background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
+        border: 1px solid rgba(255,255,255,0.07);
+        font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
+        padding: 5px 10px; border-radius: 6px;
+        transition: background 0.15s;
+      `;
+      uploadBtn.textContent = "Upload\u2026";
+      uploadBtn.addEventListener("mouseenter", () => {
+        uploadBtn.style.background = "rgba(255,255,255,0.1)";
+      });
+      uploadBtn.addEventListener("mouseleave", () => {
+        uploadBtn.style.background = "rgba(255,255,255,0.06)";
+      });
+      uploadBtn.addEventListener("click", () => fileInput.click());
+      const clearBtn = document.createElement("button");
+      clearBtn.type = "button";
+      clearBtn.style.cssText = `
+        appearance: none; cursor: pointer;
+        background: transparent; color: rgba(255,255,255,0.4);
+        border: 1px solid transparent;
+        font-size: 11px;
+        padding: 5px 8px; border-radius: 6px;
+      `;
+      clearBtn.textContent = "Clear";
+      clearBtn.addEventListener("click", () => {
+        currentUrl = "";
+        urlField.value = "";
+        updatePreview("");
+      });
+      btnRow.appendChild(uploadBtn);
+      btnRow.appendChild(clearBtn);
+      const urlField = document.createElement("input");
+      urlField.type = "url";
+      urlField.className = "cancia-form-input";
+      urlField.style.cssText = `${INPUT_BASE} font-size: 11px; padding: 6px 9px;`;
+      urlField.placeholder = "https://\u2026 or upload";
+      urlField.value = initialUrl;
+      urlField.addEventListener("input", () => {
+        currentUrl = urlField.value.trim();
+        updatePreview(currentUrl);
+      });
+      const progressEl = document.createElement("div");
+      progressEl.style.cssText = `font-size: 10px; color: rgba(255,255,255,0.5); height: 12px;`;
+      right.appendChild(btnRow);
+      right.appendChild(urlField);
+      right.appendChild(progressEl);
+      container.appendChild(preview);
+      container.appendChild(right);
+      container.appendChild(fileInput);
+      wrapper.appendChild(container);
+      fileInput.addEventListener("change", async () => {
+        const file = fileInput.files?.[0];
+        if (!file) return;
+        uploadBtn.disabled = true;
+        progressEl.style.color = "rgba(255,255,255,0.5)";
+        try {
+          const url = await uploadImage(file, (pct) => {
+            progressEl.textContent = `Uploading\u2026 ${pct}%`;
+          });
+          currentUrl = url;
+          urlField.value = url;
+          updatePreview(url);
+          progressEl.textContent = "Uploaded";
+          setTimeout(() => {
+            progressEl.textContent = "";
+          }, 1500);
+        } catch (err) {
+          progressEl.textContent = `Upload failed: ${err instanceof Error ? err.message : String(err)}`;
+          progressEl.style.color = "#ff8786";
+        } finally {
+          uploadBtn.disabled = false;
+          fileInput.value = "";
+        }
+      });
+      getValue2 = () => currentUrl === "" ? void 0 : currentUrl;
+      break;
+    }
+    case "datetime": {
+      const input = document.createElement("input");
+      input.type = "datetime-local";
+      input.className = "cancia-form-input";
+      input.style.cssText = `${INPUT_BASE} color-scheme: dark; caret-color: ${accent4()};`;
+      if (typeof initial === "string") input.value = isoToLocalInput(initial);
+      wrapper.appendChild(input);
+      getValue2 = () => {
+        const v = input.value.trim();
+        if (!v) return void 0;
+        return localInputToIso(v);
+      };
+      break;
+    }
+    case "number": {
+      const input = document.createElement("input");
+      input.type = "number";
+      input.className = "cancia-form-input";
+      input.style.cssText = `${INPUT_BASE} caret-color: ${accent4()};`;
+      if (field.min !== void 0) input.min = String(field.min);
+      if (field.max !== void 0) input.max = String(field.max);
+      if (typeof initial === "number") input.value = String(initial);
+      else if (typeof initial === "string" && initial !== "") input.value = initial;
+      wrapper.appendChild(input);
+      getValue2 = () => {
+        const v = input.value.trim();
+        if (v === "") return void 0;
+        const n = Number(v);
+        return Number.isNaN(n) ? void 0 : n;
+      };
+      break;
+    }
+    default: {
+      const input = document.createElement("input");
+      input.type = field.widget === "url" ? "url" : field.widget === "email" ? "email" : "text";
+      input.className = "cancia-form-input";
+      input.style.cssText = `${INPUT_BASE} caret-color: ${accent4()};`;
+      if (field.placeholder) input.placeholder = field.placeholder;
+      if (field.minLength !== void 0) input.minLength = field.minLength;
+      if (field.maxLength !== void 0) input.maxLength = field.maxLength;
+      if (typeof initial === "string") input.value = initial;
+      wrapper.appendChild(input);
+      getValue2 = () => input.value;
+      break;
+    }
+  }
+  wrapper.appendChild(errorEl);
+  return { wrapper, fieldState: { field, getValue: getValue2, setError } };
+}
+function preValidate(fieldStates) {
+  const data = {};
+  let ok = true;
+  for (const f of fieldStates) {
+    const value = f.getValue();
+    f.setError(null);
+    if (f.field.required && (value === void 0 || value === "" || value === null)) {
+      f.setError(`${f.field.label} is required`);
+      ok = false;
+      continue;
+    }
+    if (typeof value === "string") {
+      if (f.field.minLength !== void 0 && value.length < f.field.minLength) {
+        f.setError(`Must be at least ${f.field.minLength} character${f.field.minLength === 1 ? "" : "s"}`);
+        ok = false;
+        continue;
+      }
+      if (f.field.maxLength !== void 0 && value.length > f.field.maxLength) {
+        f.setError(`Must be at most ${f.field.maxLength} characters`);
+        ok = false;
+        continue;
+      }
+    }
+    if (value !== void 0 && value !== "") {
+      data[f.field.name] = value;
+    }
+  }
+  return { data, ok };
+}
+function openEntryModal(opts) {
+  closeEntryModal();
+  injectStyles3();
+  const isEdit = opts.entry !== null;
+  const isTranslate = !isEdit && (opts.translateFromEntry ?? null) !== null;
+  document.documentElement.style.setProperty("--cancia-accent-border", accentBorder());
+  const backdrop = document.createElement("div");
+  backdrop.dataset.canciaModalBackdrop = "1";
+  backdrop.style.cssText = `
+    position: fixed; inset: 0;
+    background: rgba(8,8,10,0.55);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    z-index: ${BACKDROP_Z2};
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  `;
+  document.body.appendChild(backdrop);
+  requestAnimationFrame(() => {
+    backdrop.style.opacity = "1";
+  });
+  backdropEl2 = backdrop;
+  const modal = document.createElement("div");
+  modal.dataset.canciaModal = "1";
+  modal.style.cssText = `
+    position: fixed;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(480px, calc(100vw - 32px));
+    max-height: min(680px, calc(100vh - 48px));
+    display: flex; flex-direction: column;
+    background: rgba(14, 14, 16, 0.97);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 14px;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5), 0 24px 64px rgba(0,0,0,0.4);
+    z-index: ${MODAL_Z};
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: rgba(255,255,255,0.9);
+    animation: cancia-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    overflow: hidden;
+  `;
+  document.body.appendChild(modal);
+  modalEl = modal;
+  const header = document.createElement("div");
+  header.style.cssText = `
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 16px 12px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    flex-shrink: 0;
+  `;
+  const titleWrap = document.createElement("div");
+  titleWrap.style.cssText = `display: flex; flex-direction: column; gap: 2px; min-width: 0;`;
+  const eyebrow = document.createElement("span");
+  eyebrow.style.cssText = `
+    font-size: 10px; font-weight: 600;
+    color: rgba(255,255,255,0.32);
+    letter-spacing: 0.08em; text-transform: uppercase;
+  `;
+  const action = isEdit ? "Edit" : isTranslate ? "Translate" : "New";
+  eyebrow.textContent = `${action} ${opts.schema.labelSingular.toLowerCase()} \xB7 ${opts.locale}`;
+  const titleEl = document.createElement("span");
+  titleEl.style.cssText = `
+    font-size: 14px; font-weight: 600;
+    color: rgba(255,255,255,0.92);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  `;
+  titleEl.textContent = opts.schema.label;
+  titleWrap.appendChild(eyebrow);
+  titleWrap.appendChild(titleEl);
+  header.appendChild(titleWrap);
+  header.appendChild(makeCloseButton(() => closeEntryModal()));
+  modal.appendChild(header);
+  const body = document.createElement("div");
+  body.style.cssText = `
+    padding: 14px 16px 4px;
+    overflow-y: auto;
+    flex: 1 1 auto;
+    min-height: 0;
+  `;
+  modal.appendChild(body);
+  const formError = document.createElement("div");
+  formError.style.cssText = `
+    display: none;
+    background: rgba(255,135,134,0.08);
+    color: #ff8786;
+    border: 1px solid rgba(255,135,134,0.18);
+    border-radius: 8px;
+    padding: 9px 11px;
+    font-size: 12px;
+    line-height: 1.4;
+    margin-bottom: 12px;
+  `;
+  body.appendChild(formError);
+  function showFormError(msg) {
+    formError.textContent = msg;
+    formError.style.display = "block";
+  }
+  function clearFormError() {
+    formError.textContent = "";
+    formError.style.display = "none";
+  }
+  if (isTranslate) {
+    const banner = document.createElement("div");
+    banner.style.cssText = `
+      background: rgba(245,180,0,0.1);
+      color: #f5b400;
+      border: 1px solid rgba(245,180,0,0.25);
+      border-radius: 8px;
+      padding: 9px 11px;
+      font-size: 12px;
+      line-height: 1.4;
+      margin-bottom: 12px;
+    `;
+    const src = opts.translateFromEntry;
+    banner.textContent = `Translating from ${src.locale} into ${opts.locale}. Fields are pre-filled from the source.`;
+    body.appendChild(banner);
+  }
+  const fieldStates = [];
+  const sourceForInitial = opts.entry ?? opts.translateFromEntry ?? null;
+  for (const f of opts.schema.fields) {
+    const initial = sourceForInitial?.data[f.name];
+    const { wrapper, fieldState } = renderField(f, initial);
+    body.appendChild(wrapper);
+    fieldStates.push(fieldState);
+  }
+  const footer = document.createElement("div");
+  footer.style.cssText = `
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 10px;
+    padding: 12px 16px;
+    border-top: 1px solid rgba(255,255,255,0.06);
+    background: rgba(0,0,0,0.18);
+    flex-shrink: 0;
+  `;
+  const leftActions = document.createElement("div");
+  const rightActions = document.createElement("div");
+  rightActions.style.cssText = `display: flex; gap: 8px;`;
+  if (isEdit) {
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.style.cssText = `
+      appearance: none; cursor: pointer;
+      background: transparent; border: 1px solid transparent;
+      color: #ff8786;
+      font-size: 12px; font-weight: 500;
+      padding: 6px 10px; border-radius: 7px;
+      transition: background 0.15s;
+    `;
+    deleteBtn.textContent = "Delete";
+    deleteBtn.addEventListener("mouseenter", () => {
+      deleteBtn.style.background = "rgba(255,135,134,0.08)";
+    });
+    deleteBtn.addEventListener("mouseleave", () => {
+      deleteBtn.style.background = "transparent";
+    });
+    deleteBtn.addEventListener("click", async () => {
+      if (!confirm(`Delete the ${opts.locale} version of this ${opts.schema.labelSingular.toLowerCase()}? This can't be undone.`)) return;
+      deleteBtn.disabled = true;
+      try {
+        await deleteListEntry(opts.schema.name, opts.entry.id, opts.locale);
+        opts.onSaved();
+        closeEntryModal();
+      } catch (err) {
+        showFormError(err instanceof Error ? err.message : String(err));
+        deleteBtn.disabled = false;
+      }
+    });
+    leftActions.appendChild(deleteBtn);
+  }
+  const cancelBtn = document.createElement("button");
+  cancelBtn.type = "button";
+  cancelBtn.style.cssText = `
+    appearance: none; cursor: pointer;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.07);
+    color: rgba(255,255,255,0.75);
+    font-size: 12px; font-weight: 500;
+    padding: 7px 14px; border-radius: 8px;
+    transition: background 0.15s, color 0.15s;
+  `;
+  cancelBtn.textContent = "Cancel";
+  cancelBtn.addEventListener("mouseenter", () => {
+    cancelBtn.style.background = "rgba(255,255,255,0.08)";
+    cancelBtn.style.color = "rgba(255,255,255,0.9)";
+  });
+  cancelBtn.addEventListener("mouseleave", () => {
+    cancelBtn.style.background = "rgba(255,255,255,0.04)";
+    cancelBtn.style.color = "rgba(255,255,255,0.75)";
+  });
+  cancelBtn.addEventListener("click", () => closeEntryModal());
+  const saveBtn = makePrimaryButton(isEdit ? "Save" : "Create", accent4());
+  saveBtn.addEventListener("click", async () => {
+    clearFormError();
+    const { data, ok } = preValidate(fieldStates);
+    if (!ok) return;
+    saveBtn.disabled = true;
+    saveBtn.style.opacity = "0.6";
+    const original = saveBtn.textContent;
+    saveBtn.textContent = isEdit ? "Saving\u2026" : "Creating\u2026";
+    try {
+      if (isEdit) {
+        await updateListEntry(opts.schema.name, opts.entry.id, data, opts.entry._rev, opts.locale);
+      } else {
+        let id;
+        if (opts.fixedId) {
+          id = opts.fixedId;
+        } else {
+          const slugFieldName = opts.schema.slugField;
+          id = slugFieldName && typeof data[slugFieldName] === "string" ? data[slugFieldName] : void 0;
+        }
+        await createListEntry(opts.schema.name, data, opts.locale, id);
+      }
+      opts.onSaved();
+      closeEntryModal();
+    } catch (err) {
+      const error = err;
+      if (error.message.includes("Validation failed")) {
+        showFormError("Server-side validation failed. Check the fields above.");
+      } else if (error.code === "REV_CONFLICT") {
+        showFormError("This entry was changed by someone else. Close and reopen to see the latest version.");
+      } else {
+        showFormError(error.message);
+      }
+      saveBtn.disabled = false;
+      saveBtn.style.opacity = "1";
+      saveBtn.textContent = original ?? (isEdit ? "Save" : "Create");
+    }
+  });
+  rightActions.appendChild(cancelBtn);
+  rightActions.appendChild(saveBtn);
+  footer.appendChild(leftActions);
+  footer.appendChild(rightActions);
+  modal.appendChild(footer);
+  backdrop.addEventListener("click", () => closeEntryModal());
+  escListener = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      closeEntryModal();
+    }
+  };
+  document.addEventListener("keydown", escListener, true);
+  setTimeout(() => {
+    const firstInput = body.querySelector("input, textarea, select");
+    firstInput?.focus();
+  }, 90);
+}
+function closeEntryModal() {
+  if (modalEl) {
+    modalEl.style.animation = "cancia-modal-out 0.16s cubic-bezier(0.7, 0, 0.84, 0) forwards";
+    const el = modalEl;
+    setTimeout(() => el.remove(), 160);
+    modalEl = null;
+  }
+  if (backdropEl2) {
+    const el = backdropEl2;
+    el.style.opacity = "0";
+    setTimeout(() => el.remove(), 180);
+    backdropEl2 = null;
+  }
+  if (escListener) {
+    document.removeEventListener("keydown", escListener, true);
+    escListener = null;
+  }
+}
+function isEntryModalOpen() {
+  return modalEl !== null;
+}
+
+// src/toolbar.ts
+var toolbarEl = null;
+var pendingPanelEl = null;
+var isExpanded = false;
+var expandedEscListener = null;
+function accent5() {
+  return state.config?.accentColor ?? "#6366f1";
+}
+var styleInjected4 = false;
+function injectStyles4() {
+  if (styleInjected4) return;
+  styleInjected4 = true;
+  const s = document.createElement("style");
+  s.textContent = `
+    @keyframes cancia-enter {
+      from { opacity: 0; transform: scale(0.5) rotate(90deg); }
+      to   { opacity: 1; transform: scale(1)   rotate(0deg); }
+    }
+    @keyframes cancia-exit {
+      from { opacity: 1; transform: scale(1); }
+      to   { opacity: 0; transform: scale(0.8); }
+    }
+    @keyframes cancia-controls-in {
+      from { opacity: 0; filter: blur(8px); transform: scale(0.6); }
+      to   { opacity: 1; filter: blur(0px); transform: scale(1); }
+    }
+    @keyframes cancia-controls-out {
+      from { opacity: 1; filter: blur(0px); transform: scale(1); }
+      to   { opacity: 0; filter: blur(6px); transform: scale(0.5); }
+    }
+    @keyframes cancia-fade-in {
+      from { opacity: 0; transform: scale(0.94) translateY(5px); }
+      to   { opacity: 1; transform: scale(1)    translateY(0); }
+    }
+    @keyframes cancia-popup-in {
+      from { opacity: 0; transform: scale(0.93); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    @keyframes cancia-badge-pop {
+      0%   { transform: scale(0); }
+      60%  { transform: scale(1.25); }
+      100% { transform: scale(1); }
+    }
+    @keyframes cancia-icon-slide-in {
+      from { transform: translateY(-150%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes cancia-tooltip-in {
+      from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+    }
+    [data-cancia-toolbar] * { box-sizing: border-box; }
+    [data-cancia-toolbar] button:active:not(:disabled) { transform: scale(0.92) !important; }
+    [data-cancia-popup] * { box-sizing: border-box; }
+    [data-cancia-popup] button:active:not(:disabled) { transform: scale(0.94) !important; }
+    /* Protect stroke-based icons from host page "svg { fill: currentColor }" rules */
+    [data-cancia-toolbar] svg[fill="none"] { fill: none !important; }
+    [data-cancia-toolbar] svg[fill="none"] :not([fill]) { fill: none !important; }
+    [data-cancia-popup] svg[fill="none"] { fill: none !important; }
+    [data-cancia-popup] svg[fill="none"] :not([fill]) { fill: none !important; }
+    /* Reset cosmetic host CSS leaking into toolbar buttons */
+    [data-cancia-toolbar] :where(button) {
+      background: unset; border: unset; border-radius: unset; padding: unset;
+      margin: unset; color: unset; font-family: unset; font-weight: unset;
+      font-size: unset; line-height: unset; letter-spacing: unset;
+      box-shadow: unset; outline: unset; text-transform: unset;
+    }
+  `;
+  document.head.appendChild(s);
+}
+var btnTooltipEl = null;
+var tooltipHideTimer = null;
+var tooltipShowTimer = null;
+var tooltipVisible = false;
+function getOrCreateBtnTooltip() {
+  if (!btnTooltipEl) {
+    btnTooltipEl = document.createElement("div");
+    btnTooltipEl.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      z-index: 2147483646;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
+      color: #fff;
+      background: rgba(10,10,12,0.92);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      border: 1px solid rgba(255,255,255,0.1);
+      padding: 4px 8px; border-radius: 6px;
+      white-space: nowrap;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      display: none;
+    `;
+    document.body.appendChild(btnTooltipEl);
+  }
+  return btnTooltipEl;
+}
+function showBtnTooltip(btn, label) {
+  if (tooltipHideTimer) {
+    clearTimeout(tooltipHideTimer);
+    tooltipHideTimer = null;
+  }
+  if (tooltipShowTimer) {
+    clearTimeout(tooltipShowTimer);
+    tooltipShowTimer = null;
+  }
+  const doShow = () => {
+    tooltipVisible = true;
+    const tooltip = getOrCreateBtnTooltip();
+    tooltip.textContent = label;
+    tooltip.style.display = "block";
+    tooltip.style.animation = "cancia-tooltip-in 0.12s cubic-bezier(0.16,1,0.3,1) both";
+    const rect = btn.getBoundingClientRect();
+    const tooltipH = 26;
+    const gap = 8;
+    tooltip.style.top = `${rect.top - tooltipH - gap}px`;
+    tooltip.style.left = `${rect.left + rect.width / 2}px`;
+  };
+  if (tooltipVisible) {
+    doShow();
+  } else {
+    tooltipShowTimer = setTimeout(doShow, 400);
+  }
+}
+function hideBtnTooltip() {
+  if (tooltipShowTimer) {
+    clearTimeout(tooltipShowTimer);
+    tooltipShowTimer = null;
+  }
+  if (tooltipHideTimer) clearTimeout(tooltipHideTimer);
+  tooltipHideTimer = setTimeout(() => {
+    tooltipVisible = false;
+    if (btnTooltipEl) btnTooltipEl.style.display = "none";
+  }, 80);
+}
+function buildToolbar() {
+  injectStyles4();
+  const bar = document.createElement("div");
+  bar.dataset.canciaToolbar = "1";
+  bar.style.cssText = `
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 2147483647;
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    background: rgba(12, 12, 14, 0.92);
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.08);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 13px;
+    color: #f0f0f0;
+    user-select: none;
+    cursor: pointer;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1), border-radius 0.45s cubic-bezier(0.19, 1, 0.22, 1);
+    animation: cancia-enter 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both;
+  `;
+  const collapseIcon = document.createElement("div");
+  collapseIcon.style.cssText = `
+    position: absolute;
+    display: flex; align-items: center; justify-content: center;
+    color: rgba(255,255,255,0.7);
+    transition: opacity 0.15s, transform 0.15s cubic-bezier(0.2,0,0,1);
+    pointer-events: none;
+  `;
+  collapseIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 20h9"/>
+    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+  </svg>`;
+  const controls = document.createElement("div");
+  controls.style.cssText = `
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 5px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transform-origin: right center;
+  `;
+  let editActive = false;
+  const editBtn = makeIconButton(
+    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+    </svg>`,
+    "Edit",
+    () => toggleEditMode()
+  );
+  controls.appendChild(editBtn);
+  const hasHook = state.config?.hasDeployHook ?? true;
+  const publishBtn = makeIconButton(
+    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 2L11 13"/>
+      <path d="M22 2L15 22l-4-9-9-4 20-7z"/>
+    </svg>`,
+    hasHook ? "Publish" : "Publish (no deploy hook configured)",
+    () => handlePublish(publishBtn)
+  );
+  if (!hasHook) {
+    publishBtn.disabled = true;
+    publishBtn.style.opacity = "0.3";
+    publishBtn.style.cursor = "not-allowed";
+  }
+  controls.appendChild(publishBtn);
+  const logoutBtn = makeIconButton(
+    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+      <path d="M16 17l5-5-5-5"/>
+      <path d="M21 12H9"/>
+    </svg>`,
+    "Log out",
+    () => state.onLogout?.()
+  );
+  controls.appendChild(logoutBtn);
+  controls.appendChild(makeDivider());
+  const collapseBtn = makeIconButton(
+    `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+      <path d="M6 6l12 12M18 6L6 18"/>
+    </svg>`,
+    "Close",
+    () => collapse(bar, collapseIcon, controls)
+  );
+  controls.appendChild(collapseBtn);
+  bar.appendChild(collapseIcon);
+  bar.appendChild(controls);
+  bar.addEventListener("click", () => {
+    if (!isExpanded) expand(bar, collapseIcon, controls);
+  });
+  bar.addEventListener("mouseenter", () => {
+    if (!isExpanded) bar.style.background = "rgba(24, 24, 28, 0.96)";
+  });
+  bar.addEventListener("mouseleave", () => {
+    bar.style.background = "rgba(12, 12, 14, 0.92)";
+  });
+  onPendingChange(() => {
+    const count = state.pending.size;
+    if (count > 0) {
+      showPendingPanel(count);
+    } else {
+      hidePendingPanel();
+    }
+  });
+  let editModeEscListener = null;
+  function toggleEditMode() {
+    editActive = !editActive;
+    state.editMode = editActive;
+    const svgEl = editBtn.querySelector("svg");
+    if (editActive) {
+      editBtn.style.background = `${accent5()}22`;
+      editBtn.style.color = accent5();
+      if (svgEl) svgEl.style.stroke = accent5();
+      editBtn.dataset.canciaTooltip = "Stop editing (Esc)";
+      attachHighlight((selection) => {
+        if (selection.kind === "field") {
+          openPopup(selection.key, selection.fieldType, selection.el, () => {
+          });
+          return;
+        }
+        const schema = state.schemas[selection.listName];
+        if (!schema) {
+          console.warn(`[cancia] No schema found for list "${selection.listName}". Define it in src/cms/schemas.ts.`);
+          return;
+        }
+        openListPanel({
+          schema,
+          onAddEntry: (locale) => {
+            openEntryModal({
+              schema,
+              locale,
+              entry: null,
+              onSaved: () => {
+                refreshListPanel();
+              }
+            });
+          },
+          onEditEntry: (entry, locale) => {
+            openEntryModal({
+              schema,
+              locale,
+              entry,
+              onSaved: () => {
+                refreshListPanel();
+              }
+            });
+          },
+          onTranslateEntry: (id, sourceEntry, targetLocale) => {
+            openEntryModal({
+              schema,
+              locale: targetLocale,
+              entry: null,
+              translateFromEntry: sourceEntry,
+              fixedId: id,
+              onSaved: () => {
+                refreshListPanel();
+              }
+            });
+          }
+        });
+      });
+      editModeEscListener = (e) => {
+        if (e.key !== "Escape") return;
+        if (isEntryModalOpen()) {
+          return;
+        }
+        if (isListPanelOpen()) {
+          closeListPanel();
+          return;
+        }
+        if (!document.querySelector("[data-cancia-popup]")) {
+          toggleEditMode();
+        }
+      };
+      document.addEventListener("keydown", editModeEscListener, true);
+    } else {
+      editBtn.style.background = "transparent";
+      editBtn.style.color = "rgba(255,255,255,0.85)";
+      if (svgEl) svgEl.style.stroke = "";
+      editBtn.dataset.canciaTooltip = "Edit";
+      detachHighlight();
+      closePopup();
+      closeEntryModal();
+      closeListPanel();
+      if (editModeEscListener) {
+        document.removeEventListener("keydown", editModeEscListener, true);
+        editModeEscListener = null;
+      }
+    }
+  }
+  return bar;
+}
+function expand(bar, icon, controls) {
+  if (isExpanded) return;
+  isExpanded = true;
+  expandedEscListener = (e) => {
+    if (e.key === "Escape" && !document.querySelector("[data-cancia-popup]") && !state.editMode) {
+      collapse(bar, icon, controls);
+    }
+  };
+  document.addEventListener("keydown", expandedEscListener, true);
+  controls.style.visibility = "hidden";
+  controls.style.opacity = "0";
+  controls.style.pointerEvents = "none";
+  bar.style.width = "max-content";
+  bar.style.borderRadius = "100px";
+  requestAnimationFrame(() => {
+    const naturalW = bar.scrollWidth;
+    bar.style.width = "44px";
+    controls.style.visibility = "";
+    requestAnimationFrame(() => {
+      bar.style.width = `${naturalW}px`;
+      bar.style.borderRadius = "100px";
+      bar.style.cursor = "default";
+      icon.style.opacity = "0";
+      icon.style.transform = "scale(0.5) rotate(-90deg)";
+      setTimeout(() => {
+        controls.style.pointerEvents = "auto";
+        controls.style.animation = "cancia-controls-in 0.4s cubic-bezier(0.19, 1, 0.22, 1) both";
+        controls.style.opacity = "1";
+      }, 80);
+    });
+  });
+}
+function collapse(bar, icon, controls) {
+  if (!isExpanded) return;
+  isExpanded = false;
+  hideBtnTooltip();
+  if (expandedEscListener) {
+    document.removeEventListener("keydown", expandedEscListener, true);
+    expandedEscListener = null;
+  }
+  controls.style.pointerEvents = "none";
+  controls.style.animation = "cancia-controls-out 0.15s cubic-bezier(0.4, 0, 1, 1) both";
+  setTimeout(() => {
+    controls.style.opacity = "0";
+    bar.style.width = "44px";
+    bar.style.borderRadius = "22px";
+    bar.style.cursor = "pointer";
+    icon.style.opacity = "1";
+    icon.style.transform = "scale(1) rotate(0deg)";
+  }, 100);
+}
+async function handleSave(btn) {
+  if (btn) {
+    btn.disabled = true;
+    btn.style.opacity = "0.5";
+  }
+  try {
+    await flushPending();
+    flashPanelMessage("Saved", "success");
+  } catch (err) {
+    console.error(err);
+    if (isAuthError(err)) {
+      unmountToolbar();
+      return;
+    }
+    if (btn) {
+      btn.disabled = false;
+      btn.style.opacity = "1";
+    }
+    flashPanelMessage("Save failed", "error");
+  }
+}
+async function handlePublish(btn) {
+  btn.disabled = true;
+  btn.style.opacity = "0.5";
+  try {
+    if (state.pending.size > 0) await flushPending();
+    await triggerPublish();
+    showToast("Published!", "success");
+  } catch (err) {
+    console.error(err);
+    showToast("Publish failed", "error");
+  } finally {
+    btn.disabled = false;
+    btn.style.opacity = "1";
+  }
+}
+function showToast(message, type) {
+  const toast = document.createElement("div");
+  const color = type === "success" ? "#4ade80" : "#f87171";
+  toast.style.cssText = `
+    position: fixed; bottom: 80px; right: 24px; z-index: 2147483647;
+    display: flex; align-items: center; gap: 8px;
+    background: rgba(12, 12, 14, 0.95);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 10px; padding: 10px 14px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 13px; font-weight: 500; color: #f0f0f0;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+    pointer-events: none;
+    animation: cancia-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+  `;
+  const dot = document.createElement("span");
+  dot.style.cssText = `width: 7px; height: 7px; border-radius: 50%; background: ${color}; flex-shrink: 0;`;
+  const label = document.createElement("span");
+  label.textContent = message;
+  toast.appendChild(dot);
+  toast.appendChild(label);
+  document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.style.transition = "opacity 0.25s cubic-bezier(0.4,0,1,1), transform 0.25s cubic-bezier(0.4,0,1,1)";
+    toast.style.opacity = "0";
+    toast.style.transform = "translateY(4px)";
+    setTimeout(() => toast.remove(), 300);
+  }, 2e3);
+}
+function makeIconButton(svg, title, onClick) {
+  const btn = document.createElement("button");
+  btn.style.cssText = `
+    display: flex; align-items: center; justify-content: center;
+    width: 34px; height: 34px; border-radius: 50%;
+    border: none; background: transparent;
+    cursor: pointer; color: rgba(255,255,255,0.85); flex-shrink: 0; padding: 0;
+    transition: color 0.15s, background 0.15s, transform 0.1s cubic-bezier(0.2,0,0,1);
+  `;
+  btn.innerHTML = svg;
+  const svgEl = btn.querySelector("svg");
+  if (svgEl) {
+    svgEl.style.cssText = "display:block;flex-shrink:0;overflow:visible;margin:auto;";
+    svgEl.setAttribute("stroke-width", "1.5");
+  }
+  btn.dataset.canciaTooltip = title;
+  btn.addEventListener("mouseenter", () => {
+    if (!btn.disabled) {
+      btn.style.background = "rgba(255,255,255,0.1)";
+      showBtnTooltip(btn, btn.dataset.canciaTooltip ?? title);
+    }
+  });
+  btn.addEventListener("mouseleave", () => {
+    const activeColor = state.config?.accentColor ?? "#6366f1";
+    if (!btn.style.background.includes(activeColor.slice(1, 7))) {
+      btn.style.background = "transparent";
+    }
+    hideBtnTooltip();
+  });
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    hideBtnTooltip();
+    onClick();
+  });
+  return btn;
+}
+function makeDivider() {
+  const d = document.createElement("span");
+  d.style.cssText = `width: 1px; height: 14px; background: rgba(255,255,255,0.08); flex-shrink: 0; margin: 0 1px;`;
+  return d;
+}
+function showPendingPanel(count) {
+  if (!pendingPanelEl) {
+    pendingPanelEl = document.createElement("div");
+    pendingPanelEl.style.cssText = `
+      position: fixed;
+      bottom: 80px;
+      right: 24px;
+      z-index: 2147483646;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      background: rgba(12, 12, 14, 0.92);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px;
+      padding: 0;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      animation: cancia-fade-in 0.25s cubic-bezier(0.16,1,0.3,1) both;
+      width: max-content;
+      overflow: hidden;
+    `;
+    const label2 = document.createElement("span");
+    label2.dataset.canciaPendingLabel = "1";
+    label2.style.cssText = `font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`;
+    const saveBtn = document.createElement("button");
+    saveBtn.dataset.canciaSaveBtn = "1";
+    saveBtn.title = "Save changes";
+    saveBtn.style.cssText = `
+      padding: 5px 10px; border-radius: 7px; border: none; cursor: pointer;
+      background: #fff; color: #0c0c0e;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
+      transition: opacity 0.15s, transform 0.1s cubic-bezier(0.2,0,0,1);
+      flex-shrink: 0;
+    `;
+    saveBtn.textContent = "Save";
+    saveBtn.addEventListener("mouseenter", () => {
+      saveBtn.style.opacity = "0.85";
+    });
+    saveBtn.addEventListener("mouseleave", () => {
+      saveBtn.style.opacity = "1";
+    });
+    saveBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      handleSave(saveBtn);
+    });
+    const undoBtn = document.createElement("button");
+    undoBtn.title = "Discard changes";
+    undoBtn.style.cssText = `
+      padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
+      background: transparent; color: rgba(255,255,255,0.5);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
+      transition: color 0.15s, border-color 0.15s;
+      flex-shrink: 0;
+    `;
+    undoBtn.textContent = "Discard";
+    undoBtn.addEventListener("mouseenter", () => {
+      undoBtn.style.color = "rgba(255,255,255,0.8)";
+      undoBtn.style.borderColor = "rgba(255,255,255,0.2)";
+    });
+    undoBtn.addEventListener("mouseleave", () => {
+      undoBtn.style.color = "rgba(255,255,255,0.5)";
+      undoBtn.style.borderColor = "rgba(255,255,255,0.1)";
+    });
+    undoBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      revertPending();
+      closePopup();
+      hidePendingPanel();
+    });
+    const slot = document.createElement("div");
+    slot.dataset.canciaPanelSlot = "1";
+    slot.style.cssText = `display:grid;place-items:center;overflow:hidden;`;
+    const row = document.createElement("div");
+    row.dataset.canciaPanelRow = "1";
+    row.style.cssText = `
+      grid-area: 1/1; display: flex; align-items: center; gap: 6px;
+      padding: 7px 7px 7px 12px;
+      transition: transform 200ms cubic-bezier(0.785,0.135,0.15,0.86);
+    `;
+    row.appendChild(label2);
+    row.appendChild(undoBtn);
+    row.appendChild(saveBtn);
+    const flash = document.createElement("div");
+    flash.dataset.canciaPanelFlash = "1";
+    flash.style.cssText = `
+      grid-area: 1/1; display: flex; align-items: center; gap: 7px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap;
+      padding: 7px 12px;
+      transform: translateY(-150%);
+      transition: transform 200ms cubic-bezier(0.785,0.135,0.15,0.86);
+    `;
+    slot.appendChild(row);
+    slot.appendChild(flash);
+    pendingPanelEl.appendChild(slot);
+    document.body.appendChild(pendingPanelEl);
+  }
+  const label = pendingPanelEl.querySelector("[data-cancia-pending-label]");
+  if (label) label.textContent = `${count} unsaved change${count === 1 ? "" : "s"}`;
+}
+function flashPanelMessage(message, type) {
+  if (!pendingPanelEl) return;
+  const color = type === "success" ? "#4ade80" : "#f87171";
+  const row = pendingPanelEl.querySelector("[data-cancia-panel-row]");
+  const flash = pendingPanelEl.querySelector("[data-cancia-panel-flash]");
+  if (!row || !flash) return;
+  flash.innerHTML = `<span style="width:7px;height:7px;border-radius:50%;background:${color};flex-shrink:0;display:block;"></span>${message}`;
+  row.style.transform = "translateY(150%)";
+  flash.style.transform = "translateY(0)";
+  setTimeout(() => hidePendingPanel(), 1600);
+}
+function hidePendingPanel() {
+  if (!pendingPanelEl) return;
+  const panel = pendingPanelEl;
+  pendingPanelEl = null;
+  panel.style.transition = "opacity 0.2s cubic-bezier(0.4,0,1,1), transform 0.2s cubic-bezier(0.4,0,1,1)";
+  panel.style.opacity = "0";
+  panel.style.transform = "translateY(4px)";
+  setTimeout(() => panel.remove(), 220);
+}
+function mountToolbar() {
+  if (toolbarEl) return;
+  isExpanded = false;
+  toolbarEl = buildToolbar();
+  document.body.appendChild(toolbarEl);
+}
+function unmountToolbar() {
+  detachHighlight();
+  closePopup();
+  isExpanded = false;
+  btnTooltipEl?.remove();
+  btnTooltipEl = null;
+  pendingPanelEl?.remove();
+  pendingPanelEl = null;
+  if (toolbarEl) {
+    toolbarEl.style.animation = "cancia-exit 0.25s cubic-bezier(0.4, 0, 1, 1) both";
+    setTimeout(() => {
+      toolbarEl?.remove();
+      toolbarEl = null;
+    }, 260);
+  }
+}
+
+// src/index.ts
+var SESSION_KEY = "cancia_session";
+function getSessionToken() {
+  try {
+    return sessionStorage.getItem(SESSION_KEY);
+  } catch {
+    return null;
+  }
+}
+function setSessionToken(token) {
+  try {
+    sessionStorage.setItem(SESSION_KEY, token);
+  } catch {
+  }
+}
+function clearSession() {
+  try {
+    sessionStorage.removeItem(SESSION_KEY);
+  } catch {
+  }
+}
+async function handleMagicUrl() {
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get("cancia");
+  if (!token) return null;
+  params.delete("cancia");
+  const newSearch = params.toString();
+  const cleanUrl = window.location.pathname + (newSearch ? `?${newSearch}` : "") + window.location.hash;
+  window.history.replaceState(null, "", cleanUrl);
+  try {
+    const res = await fetch("/api/cancia/auth", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token })
+    });
+    if (res.ok) {
+      setSessionToken(token);
+      return token;
+    }
+  } catch {
+  }
+  console.warn("Cancia: magic link token is invalid or expired.");
+  return null;
+}
+async function init(config) {
+  state.config = config;
+  state.activeLang = config.languages[0];
+  if (window.__CANCIA_DATA__) {
+    state.cmsData = window.__CANCIA_DATA__;
+  }
+  try {
+    const fresh = await fetchContent();
+    state.cmsData = fresh;
+  } catch (err) {
+    if (!config.public && err instanceof Error && err.message.includes("401")) {
+      clearSession();
+      console.warn("Cancia: session expired or invalid, toolbar not mounted.");
+      return;
+    }
+    console.warn("Cancia: could not fetch CMS content, using preloaded data.");
+  }
+  applyOverlay();
+  try {
+    state.schemas = await fetchSchemas();
+  } catch {
+    state.schemas = {};
+  }
+  mountToolbar();
+}
+async function tryAutoInit() {
+  if (!window.__CANCIA__) return;
+  if (window.__CANCIA__.public) {
+    init(window.__CANCIA__);
+    return;
+  }
+  const token = await handleMagicUrl() ?? getSessionToken();
+  if (!token) return;
+  state.sessionToken = token;
+  state.onLogout = () => {
+    clearSession();
+    unmountToolbar();
+  };
+  init(window.__CANCIA__);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", tryAutoInit);
+  } else {
+    tryAutoInit();
+  }
+}
+export {
+  clearSession,
+  unmountToolbar as destroy,
+  getValue,
+  init,
+  onPendingChange
+};
+//# sourceMappingURL=cancia.js.map