@stringpush/sdk 0.2.0 → 0.3.0

package/dist/{overlay-7KC2RRGB.mjs → overlay-Y3NQFQBI.mjs}

@@ -1,6 +1,7 @@
 // src/overlay/constants.ts
 var OVERLAY_ROOT_ID = "translation-overlay-root";
 var EDIT_PANEL_HOST_ID = "translation-edit-panel-host";
+var EDIT_PANEL_BACKDROP_ID = "stringpush-edit-panel-backdrop";
 var OVERLAY_CHUNK_MARKER = "translation-overlay-chunk-v1";
 
 // src/overlay/overlay-api.ts
@@ -160,24 +161,68 @@ function notifyEditPanelRemoteUpdate(update) {
   return activeHandler.applyRemoteUpdate(update);
 }
 
-// src/overlay/edit-panel.ts
-var PANEL_STYLES = `
+// src/overlay/edit-panel-copy.ts
+var EDIT_PANEL_CONFLICT_TITLE = "Conflict detected";
+var EDIT_PANEL_CONFLICT_BODY = "Another editor just saved changes to this key.";
+var EDIT_PANEL_RELOAD_LABEL = "Reload latest values";
+var EDIT_PANEL_FOOTNOTE_STAGING = "Production requires separate promote step.";
+function formatEnvironmentBadgeLabel(environmentName) {
+  const label = capitalizeEnvironment(environmentName);
+  return `${label} Environment`;
+}
+function formatSaveToEnvironmentLabel(environmentName) {
+  return `Save to ${capitalizeEnvironment(environmentName)}`;
+}
+function buildAdminKeyUrl(adminWebOrigin, projectId, keyId) {
+  const origin = adminWebOrigin.replace(/\/$/, "");
+  const params = new URLSearchParams({
+    projectId,
+    keyId
+  });
+  return `${origin}/keys?${params.toString()}`;
+}
+function capitalizeEnvironment(environmentName) {
+  if (!environmentName) {
+    return "Environment";
+  }
+  return environmentName.charAt(0).toUpperCase() + environmentName.slice(1);
+}
+
+// src/overlay/edit-panel-styles.ts
+var EDIT_PANEL_STYLES = `
 :host {
   all: initial;
-  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
   --sp-bg: #ffffff;
-  --sp-text: #0f172a;
-  --sp-muted: #64748b;
+  --sp-text: #0f172b;
+  --sp-muted: #62748e;
   --sp-border: #e2e8f0;
-  --sp-accent: #4338ca;
-  --sp-accent-hover: #3730a3;
-  --sp-warning-bg: #fef3c7;
-  --sp-warning-text: #92400e;
-  --sp-warning-border: #fcd34d;
+  --sp-accent: #4f39f6;
+  --sp-accent-hover: #4338ca;
+  --sp-accent-subtle: #c6d2ff;
+  --sp-surface-muted: #f8fafc;
+  --sp-warning-bg: #fffbeb;
+  --sp-warning-border: #fee685;
+  --sp-warning-title: #7b3306;
+  --sp-warning-body: #bb4d00;
+  --sp-warning-btn-border: #ffd230;
   --sp-badge-draft-bg: #fef3c6;
   --sp-badge-draft-text: #973c00;
+  --sp-badge-reviewed-bg: #eff6ff;
+  --sp-badge-reviewed-text: #1447e6;
+  --sp-badge-reviewed-border: #bedbff;
+  --sp-badge-published-bg: #ecfdf5;
+  --sp-badge-published-text: #007a55;
+  --sp-badge-published-border: #a4f4cf;
   --sp-badge-default-bg: #f1f5f9;
-  --sp-badge-default-text: #475569;
+  --sp-badge-default-text: #45556c;
+  --sp-env-staging-bg: #ecfdf5;
+  --sp-env-staging-border: #a4f4cf;
+  --sp-env-staging-text: #007a55;
+  --sp-env-production-bg: #fff7ed;
+  --sp-env-production-border: #fdba74;
+  --sp-env-production-text: #c2410c;
+  --sp-unsaved: #e17100;
 }
 .panel {
   position: fixed;
@@ -188,77 +233,169 @@ var PANEL_STYLES = `
   height: 100vh;
   background: var(--sp-bg);
   color: var(--sp-text);
-  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
+  box-shadow: -25px 0 25px rgba(0, 0, 0, 0.25);
+  border-left: 1px solid var(--sp-border);
   display: flex;
   flex-direction: column;
   z-index: 2147483647;
 }
 .header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px 16px 12px;
+  background: rgba(248, 250, 252, 0.5);
   border-bottom: 1px solid var(--sp-border);
+  padding: 20px 24px 16px;
 }
-.header-main {
-  min-width: 0;
+.header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
 }
 .brand {
-  margin: 0 0 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--sp-accent);
+  color: var(--sp-muted);
+}
+.brand-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--sp-accent);
+  opacity: 0.85;
 }
 .title {
   margin: 0;
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
 }
-.key-path {
-  margin: 4px 0 0;
-  font: 12px/1.4 ui-monospace, Menlo, monospace;
-  color: var(--sp-muted);
-  word-break: break-all;
+.meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+.key-chip {
+  font: 11px/1.4 ui-monospace, Menlo, monospace;
+  color: #45556c;
+  background: #fff;
+  border: 1px solid var(--sp-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+.env-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 9px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  border: 1px solid transparent;
+}
+.env-badge--staging {
+  background: var(--sp-env-staging-bg);
+  border-color: var(--sp-env-staging-border);
+  color: var(--sp-env-staging-text);
+}
+.env-badge--production {
+  background: var(--sp-env-production-bg);
+  border-color: var(--sp-env-production-border);
+  color: var(--sp-env-production-text);
+}
+.env-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
 }
 .close-btn {
   border: none;
   background: transparent;
-  font-size: 22px;
+  font-size: 20px;
   line-height: 1;
   cursor: pointer;
   color: var(--sp-muted);
-  padding: 2px 4px;
+  padding: 6px;
+  border-radius: 8px;
+}
+.close-btn:focus-visible {
+  outline: 2px solid var(--sp-accent);
+  outline-offset: 2px;
 }
 .body {
   flex: 1;
   overflow: auto;
-  padding: 12px 16px;
+  padding: 24px;
 }
-.locale-row {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--sp-border);
+.banner {
+  margin-bottom: 32px;
+  padding: 17px;
+  border-radius: 10px;
+  border: 1px solid var(--sp-warning-border);
+  background: var(--sp-warning-bg);
+}
+.banner-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.banner-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--sp-warning-body);
+}
+.banner-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sp-warning-title);
+}
+.banner-body {
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--sp-warning-body);
+}
+.banner-reload {
+  margin-top: 12px;
+  border: 1px solid var(--sp-warning-btn-border);
+  background: rgba(255, 251, 235, 0.5);
+  border-radius: 8px;
+  padding: 6px 13px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--sp-badge-draft-text);
+}
+.banner-reload:focus-visible {
+  outline: 2px solid var(--sp-warning-body);
+  outline-offset: 2px;
 }
-.locale-row:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
+.locale-row + .locale-row {
+  margin-top: 24px;
 }
 .locale-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 .locale-label {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: 8px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--sp-text);
 }
@@ -268,102 +405,154 @@ var PANEL_STYLES = `
 }
 .locale-badges {
   display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.unsaved {
+  display: inline-flex;
+  align-items: center;
   gap: 4px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--sp-unsaved);
+}
+.unsaved-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #fe9a00;
 }
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
-  border-radius: 999px;
+  padding: 2px 6px;
+  border-radius: 4px;
   font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  border: 1px solid transparent;
 }
 .badge-default {
   background: var(--sp-badge-default-bg);
+  border-color: var(--sp-border);
   color: var(--sp-badge-default-text);
 }
 .badge-draft {
   background: var(--sp-badge-draft-bg);
+  border-color: var(--sp-warning-border);
   color: var(--sp-badge-draft-text);
 }
+.badge-reviewed {
+  background: var(--sp-badge-reviewed-bg);
+  border-color: var(--sp-badge-reviewed-border);
+  color: var(--sp-badge-reviewed-text);
+}
+.badge-published {
+  background: var(--sp-badge-published-bg);
+  border-color: var(--sp-badge-published-border);
+  color: var(--sp-badge-published-text);
+}
 .locale-row textarea {
   width: 100%;
-  min-height: 80px;
+  min-height: 60px;
   box-sizing: border-box;
-  border: 1px solid #cbd5e1;
+  border: 1px solid #cad5e2;
   border-radius: 8px;
   padding: 10px 12px;
   font: 14px/1.45 inherit;
   resize: vertical;
   color: var(--sp-text);
+  background: var(--sp-surface-muted);
+}
+.locale-row textarea.is-dirty {
+  background: #fff;
+  border-color: #a3b3ff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 }
 .locale-row textarea:focus-visible {
   outline: 2px solid var(--sp-accent);
   outline-offset: 1px;
   border-color: var(--sp-accent);
 }
-.banner {
-  margin: 0 16px 12px;
-  padding: 12px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--sp-warning-border);
-  background: var(--sp-warning-bg);
-  color: var(--sp-warning-text);
-  font-size: 13px;
-  line-height: 1.45;
-}
-.banner p {
-  margin: 0;
-}
-.banner button {
-  margin-top: 10px;
-  border: 1px solid #d97706;
-  background: #fff;
-  border-radius: 6px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--sp-warning-text);
-}
 .footer {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  padding: 12px 16px 16px;
   border-top: 1px solid var(--sp-border);
+  background: var(--sp-surface-muted);
+  padding: 16px 24px;
+}
+.footer-actions {
+  display: flex;
+  gap: 12px;
 }
-.footer button {
+.footer-actions button {
   border-radius: 8px;
-  padding: 9px 14px;
-  font-size: 14px;
-  font-weight: 600;
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+  font-weight: 500;
 }
-.footer .secondary {
-  border: 1px solid #cbd5e1;
+.footer .discard {
+  flex: 1;
+  min-height: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
-  color: #334155;
+  color: var(--sp-text);
+  font-size: 16px;
 }
 .footer .primary {
+  flex: 1;
+  min-height: 53px;
   border: none;
   background: var(--sp-accent);
   color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
 }
 .footer .primary:hover:not(:disabled) {
   background: var(--sp-accent-hover);
 }
-.footer .primary::before {
-  content: "";
-  width: 14px;
-  height: 14px;
-  background: currentColor;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.667 3.5 5.25 9.917 2.333 7' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
-    center / contain no-repeat;
+.footer .primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.primary-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.primary-sub {
+  margin-top: 2px;
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--sp-accent-subtle);
+  line-height: 1.2;
+}
+.footer-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  padding-bottom: 4px;
+}
+.admin-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sp-accent);
+  text-decoration: none;
+}
+.admin-link:focus-visible {
+  outline: 2px solid var(--sp-accent);
+  outline-offset: 2px;
+}
+.footer-note {
+  font-size: 10px;
+  color: var(--sp-muted);
+  text-align: right;
+  line-height: 1.35;
 }
 .status {
   padding: 24px 16px;
@@ -411,41 +600,69 @@ var PANEL_STYLES = `
   font-size: 13px;
 }
 `;
+var EDIT_PANEL_BACKDROP_STYLES = `
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 43, 0.2);
+  z-index: 2147483646;
+  pointer-events: none;
+`;
+
+// src/overlay/edit-panel.ts
 function openEditPanel(keyPath, context) {
   if (typeof document === "undefined") {
     return { destroy: () => {
     } };
   }
   closeEditPanel();
+  const backdrop = document.createElement("div");
+  backdrop.id = EDIT_PANEL_BACKDROP_ID;
+  backdrop.setAttribute("aria-hidden", "true");
+  backdrop.style.cssText = EDIT_PANEL_BACKDROP_STYLES;
   const host = document.createElement("div");
   host.id = EDIT_PANEL_HOST_ID;
   const shadow = host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
-  style.textContent = PANEL_STYLES;
+  style.textContent = EDIT_PANEL_STYLES;
   const panel = document.createElement("div");
   panel.className = "panel";
   panel.setAttribute("role", "dialog");
   panel.setAttribute("aria-label", "Edit translation");
   const header = document.createElement("header");
   header.className = "header";
-  const headerMain = document.createElement("div");
-  headerMain.className = "header-main";
-  const brand = document.createElement("p");
+  const headerTop = document.createElement("div");
+  headerTop.className = "header-top";
+  const brand = document.createElement("div");
   brand.className = "brand";
-  brand.textContent = "StringPush";
-  const title = document.createElement("h2");
-  title.className = "title";
-  title.textContent = "Edit translation";
-  const keyEl = document.createElement("p");
-  keyEl.className = "key-path";
-  keyEl.textContent = keyPath;
-  headerMain.append(brand, title, keyEl);
+  const brandIcon = document.createElement("span");
+  brandIcon.className = "brand-icon";
+  brandIcon.setAttribute("aria-hidden", "true");
+  brand.append(brandIcon, document.createTextNode("StringPush"));
   const closeBtn = document.createElement("button");
   closeBtn.className = "close-btn";
   closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close");
   closeBtn.textContent = "\xD7";
-  header.append(headerMain, closeBtn);
+  headerTop.append(brand, closeBtn);
+  const title = document.createElement("h2");
+  title.className = "title";
+  title.textContent = "Edit translation";
+  const metaRow = document.createElement("div");
+  metaRow.className = "meta-row";
+  const keyChip = document.createElement("span");
+  keyChip.className = "key-chip";
+  keyChip.textContent = keyPath;
+  const envBadge = document.createElement("span");
+  envBadge.className = context.environmentName === "production" ? "env-badge env-badge--production" : "env-badge env-badge--staging";
+  const envDot = document.createElement("span");
+  envDot.className = "env-dot";
+  envDot.setAttribute("aria-hidden", "true");
+  envBadge.append(
+    envDot,
+    document.createTextNode(formatEnvironmentBadgeLabel(context.environmentName))
+  );
+  metaRow.append(keyChip, envBadge);
+  header.append(headerTop, title, metaRow);
   const bodyEl = document.createElement("div");
   bodyEl.className = "body";
   const status = document.createElement("div");
@@ -457,19 +674,38 @@ function openEditPanel(keyPath, context) {
   banner.hidden = true;
   const footer = document.createElement("footer");
   footer.className = "footer";
-  const cancelBtn = document.createElement("button");
-  cancelBtn.type = "button";
-  cancelBtn.className = "secondary";
-  cancelBtn.textContent = "Cancel";
+  const footerActions = document.createElement("div");
+  footerActions.className = "footer-actions";
+  const discardBtn = document.createElement("button");
+  discardBtn.type = "button";
+  discardBtn.className = "discard";
+  discardBtn.textContent = "Discard";
   const saveBtn = document.createElement("button");
   saveBtn.type = "button";
   saveBtn.className = "primary";
-  saveBtn.textContent = "Save draft";
   saveBtn.disabled = true;
-  footer.append(cancelBtn, saveBtn);
-  panel.append(header, banner, bodyEl, footer);
+  const saveLabel = document.createElement("span");
+  saveLabel.className = "primary-label";
+  const saveSub = document.createElement("span");
+  saveSub.className = "primary-sub";
+  saveBtn.append(saveLabel, saveSub);
+  updateSaveButtonLabels(context, saveLabel, saveSub);
+  footerActions.append(discardBtn, saveBtn);
+  const footerMeta = document.createElement("div");
+  footerMeta.className = "footer-meta";
+  const adminLink = document.createElement("a");
+  adminLink.className = "admin-link";
+  adminLink.target = "_blank";
+  adminLink.rel = "noopener noreferrer";
+  adminLink.textContent = "Open in admin \u2197";
+  const footerNote = document.createElement("span");
+  footerNote.className = "footer-note";
+  footerNote.textContent = context.environmentName === "production" ? "Changes apply to production immediately." : EDIT_PANEL_FOOTNOTE_STAGING;
+  footerMeta.append(adminLink, footerNote);
+  footer.append(footerActions, footerMeta);
+  panel.append(header, bodyEl, footer);
   shadow.append(style, panel);
-  document.body.append(host);
+  document.body.append(backdrop, host);
   let destroyed = false;
   let rows = [];
   let keyId = "";
@@ -479,8 +715,15 @@ function openEditPanel(keyPath, context) {
     }
     destroyed = true;
     registerEditPanelRemoteHandler(null);
+    backdrop.remove();
     host.remove();
   };
+  function hasUnsavedChanges() {
+    return rows.some((row) => row.draftValue !== row.value);
+  }
+  function updateSaveDisabled() {
+    saveBtn.disabled = !hasUnsavedChanges() || destroyed;
+  }
   function applyRemoteUpdate(update) {
     if (!shouldApplyTranslationUpdate(update.keyPath, update.localeCode, update.version)) {
       return false;
@@ -493,9 +736,7 @@ function openEditPanel(keyPath, context) {
       return false;
     }
     if (row.draftValue !== row.value) {
-      showConflict(
-        `${update.localeCode} was updated in another tab. Reload to merge your changes.`
-      );
+      showConflict();
       return true;
     }
     row.value = update.value;
@@ -506,10 +747,14 @@ function openEditPanel(keyPath, context) {
     return true;
   }
   closeBtn.addEventListener("click", destroy);
-  cancelBtn.addEventListener("click", destroy);
+  discardBtn.addEventListener("click", destroy);
   function renderRows() {
     bodyEl.replaceChildren();
+    if (!banner.hidden) {
+      bodyEl.append(banner);
+    }
     for (const row of rows) {
+      const isDirty = row.draftValue !== row.value;
       const wrap = document.createElement("div");
       wrap.className = "locale-row";
       const localeHeader = document.createElement("div");
@@ -526,26 +771,65 @@ function openEditPanel(keyPath, context) {
       if (row.localeCode === context.activeLocaleCode) {
         const defaultBadge = document.createElement("span");
         defaultBadge.className = "badge badge-default";
-        defaultBadge.textContent = "Default";
+        defaultBadge.textContent = "Default locale";
         badges.append(defaultBadge);
       }
-      const draftBadge = document.createElement("span");
-      draftBadge.className = "badge badge-draft";
-      draftBadge.textContent = row.draftValue !== row.value ? "Unsaved" : "Draft";
-      badges.append(draftBadge);
+      const unsaved = document.createElement("span");
+      unsaved.className = "unsaved";
+      unsaved.hidden = !isDirty;
+      const dot = document.createElement("span");
+      dot.className = "unsaved-dot";
+      dot.setAttribute("aria-hidden", "true");
+      unsaved.append(dot, document.createTextNode("Unsaved changes"));
+      badges.append(unsaved);
+      let draftBadge = null;
+      if (row.status === "draft" && (isDirty || row.version !== null)) {
+        draftBadge = document.createElement("span");
+        draftBadge.className = "badge badge-draft";
+        draftBadge.textContent = "Draft";
+        badges.append(draftBadge);
+      } else if (row.status === "reviewed") {
+        const reviewedBadge = document.createElement("span");
+        reviewedBadge.className = "badge badge-reviewed";
+        reviewedBadge.textContent = "Reviewed";
+        badges.append(reviewedBadge);
+      } else if (row.status === "published") {
+        const publishedBadge = document.createElement("span");
+        publishedBadge.className = "badge badge-published";
+        publishedBadge.textContent = "Published";
+        badges.append(publishedBadge);
+      }
       localeHeader.append(label, badges);
       const textarea = document.createElement("textarea");
       textarea.id = `locale-${row.localeId}`;
       textarea.setAttribute("aria-label", `${row.localeCode} translation`);
       textarea.value = row.draftValue;
+      if (isDirty) {
+        textarea.classList.add("is-dirty");
+      }
       textarea.addEventListener("input", () => {
         row.draftValue = textarea.value;
-        draftBadge.textContent = row.draftValue !== row.value ? "Unsaved" : "Draft";
+        const dirty = row.draftValue !== row.value;
+        textarea.classList.toggle("is-dirty", dirty);
+        unsaved.hidden = !dirty;
+        if (draftBadge) {
+          draftBadge.hidden = !dirty && row.status !== "draft";
+        }
+        updateSaveDisabled();
       });
       wrap.append(localeHeader, textarea);
       bodyEl.append(wrap);
     }
-    saveBtn.disabled = false;
+    updateSaveDisabled();
+    updateAdminLink();
+  }
+  function updateAdminLink() {
+    if (context.adminWebOrigin && keyId) {
+      adminLink.href = buildAdminKeyUrl(context.adminWebOrigin, context.projectId, keyId);
+      adminLink.hidden = false;
+    } else {
+      adminLink.hidden = true;
+    }
   }
   async function load() {
     try {
@@ -557,6 +841,8 @@ function openEditPanel(keyPath, context) {
         return;
       }
       keyId = keyValues.keyId;
+      context.approvalEnabled = keyValues.approvalEnabled;
+      updateSaveButtonLabels(context, saveLabel, saveSub);
       const localeCodes = new Set(locales.map((l) => l.code));
       rows = keyValues.entries.filter((entry) => localeCodes.has(entry.localeCode)).map((entry) => ({
         ...entry,
@@ -629,15 +915,30 @@ function openEditPanel(keyPath, context) {
     wrap.append(intro, label, input, errorEl, createBtn);
     bodyEl.append(wrap);
   }
-  function showConflict(message) {
+  function showConflict() {
     banner.hidden = false;
     banner.replaceChildren();
-    const text = document.createElement("p");
-    text.textContent = message;
-    banner.append(text);
+    const row = document.createElement("div");
+    row.className = "banner-row";
+    const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    icon.setAttribute("class", "banner-icon");
+    icon.setAttribute("viewBox", "0 0 20 20");
+    icon.setAttribute("fill", "currentColor");
+    icon.innerHTML = '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>';
+    const copy = document.createElement("div");
+    const titleEl = document.createElement("p");
+    titleEl.className = "banner-title";
+    titleEl.textContent = EDIT_PANEL_CONFLICT_TITLE;
+    const body = document.createElement("p");
+    body.className = "banner-body";
+    body.textContent = EDIT_PANEL_CONFLICT_BODY;
+    copy.append(titleEl, body);
+    row.append(icon, copy);
+    banner.append(row);
     const reloadBtn = document.createElement("button");
     reloadBtn.type = "button";
-    reloadBtn.textContent = "Reload";
+    reloadBtn.className = "banner-reload";
+    reloadBtn.textContent = EDIT_PANEL_RELOAD_LABEL;
     reloadBtn.addEventListener("click", () => {
       status.textContent = "Loading\u2026";
       bodyEl.replaceChildren(status);
@@ -645,6 +946,9 @@ function openEditPanel(keyPath, context) {
       void load();
     });
     banner.append(reloadBtn);
+    if (!bodyEl.contains(banner)) {
+      renderRows();
+    }
   }
   saveBtn.addEventListener("click", () => {
     void (async () => {
@@ -664,23 +968,23 @@ function openEditPanel(keyPath, context) {
           row.value = saved.value;
           row.version = saved.version;
           row.draftValue = saved.value;
+          row.status = saved.status;
           context.onSaved(keyPath, row.localeCode, saved.value, saved.version);
         } catch (error) {
           if (error instanceof OverlayApiError && error.isVersionConflict) {
             hadConflict = true;
-            showConflict(
-              "Someone else updated this key. Reload to fetch the latest versions, then try again."
-            );
+            showConflict();
             break;
           }
-          showConflict(error instanceof Error ? error.message : "Save failed");
+          showConflict();
           hadConflict = true;
           break;
         }
       }
-      saveBtn.disabled = hadConflict;
       if (!hadConflict) {
         destroy();
+      } else {
+        updateSaveDisabled();
       }
     })();
   });
@@ -688,8 +992,18 @@ function openEditPanel(keyPath, context) {
   void load();
   return { destroy };
 }
+function updateSaveButtonLabels(context, saveLabel, saveSub) {
+  if (context.approvalEnabled) {
+    saveLabel.textContent = "Save draft";
+    saveSub.textContent = "Needs review before publish";
+    return;
+  }
+  saveLabel.textContent = formatSaveToEnvironmentLabel(context.environmentName);
+  saveSub.textContent = "Updates site immediately";
+}
 function closeEditPanel() {
   registerEditPanelRemoteHandler(null);
+  document.getElementById(EDIT_PANEL_BACKDROP_ID)?.remove();
   document.getElementById(EDIT_PANEL_HOST_ID)?.remove();
 }
 
@@ -1005,6 +1319,10 @@ function mountOverlay(context) {
         apiBaseUrl: context.apiBaseUrl,
         editToken: context.editToken,
         origin: context.origin,
+        projectId: context.projectId,
+        environmentName: context.environmentName,
+        approvalEnabled: context.approvalEnabled ?? false,
+        adminWebOrigin: context.adminWebOrigin,
         activeLocaleCode: context.activeLocaleCode,
         suggestedDefaultMessage,
         onSaved: context.onCatalogPatched
@@ -1036,4 +1354,4 @@ export {
   OVERLAY_ROOT_ID,
   mountOverlay
 };
-//# sourceMappingURL=overlay-7KC2RRGB.mjs.map
+//# sourceMappingURL=overlay-Y3NQFQBI.mjs.map