@407dev/cms-astro 0.1.0

package/dist/toolbar/app.js

@@ -0,0 +1,1176 @@
+import { chromeTokens } from '../chunk-2TKIQIOE.js';
+import { DEFAULT_EDITOR_ORIGINS } from '../chunk-XJPVYMZM.js';
+import { defineToolbarApp } from 'astro/toolbar';
+
+// src/toolbar/widgets.ts
+function extractRichTextSummary(value) {
+  if (!value) return "(empty)";
+  if (typeof value === "string") {
+    const trimmed = value.replace(/<[^>]*>/g, "").trim();
+    return trimmed ? trimmed.length > 50 ? `${trimmed.slice(0, 47)}...` : trimmed : "(empty)";
+  }
+  if (typeof value === "object" && value !== null) {
+    let walk2 = function(node) {
+      if (!node || typeof node !== "object") return;
+      nodeCount++;
+      const n = node;
+      if (typeof n.text === "string" && n.text.trim()) {
+        textRuns.push(n.text.trim());
+      }
+      if (Array.isArray(n.content)) {
+        for (const child of n.content) {
+          walk2(child);
+        }
+      }
+    };
+    const doc = value;
+    let nodeCount = 0;
+    const textRuns = [];
+    walk2(doc);
+    const firstRun = textRuns[0] || "";
+    const snippet = firstRun.length > 40 ? `${firstRun.slice(0, 37)}...` : firstRun;
+    return snippet ? `"${snippet}" (${nodeCount} ${nodeCount === 1 ? "node" : "nodes"})` : `(${nodeCount} ${nodeCount === 1 ? "node" : "nodes"})`;
+  }
+  return String(value);
+}
+function extractImageSummary(value) {
+  if (!value) return "(no image)";
+  if (typeof value === "string") {
+    try {
+      const u = new URL(value, "https://placeholder.local");
+      const filename = u.pathname.split("/").pop() || value;
+      return filename.length > 40 ? `${filename.slice(0, 37)}...` : filename;
+    } catch {
+      return value.length > 40 ? `${value.slice(0, 37)}...` : value;
+    }
+  }
+  if (typeof value === "object" && value !== null) {
+    const img = value;
+    const name = img.url ? img.url.split("/").pop() || "image" : "image";
+    const dim = img.width && img.height ? ` (${img.width}\xD7${img.height})` : "";
+    const alt = img.alt ? ` \u2014 "${img.alt}"` : "";
+    const combined = `${name}${dim}${alt}`;
+    return combined.length > 50 ? `${combined.slice(0, 47)}...` : combined;
+  }
+  return String(value);
+}
+function createTextWidget(ctx) {
+  const container = document.createElement("div");
+  container.className = "cms-widget-container";
+  const form = document.createElement("form");
+  form.className = "cms-widget-form";
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "cms-widget-input";
+  input.value = ctx.value !== void 0 && ctx.value !== null ? String(ctx.value) : "";
+  input.placeholder = ctx.defaultValue !== void 0 && ctx.defaultValue !== null ? String(ctx.defaultValue) : "";
+  input.disabled = Boolean(ctx.disabled);
+  const saveBtn = document.createElement("button");
+  saveBtn.type = "submit";
+  saveBtn.className = "cms-widget-save-btn";
+  saveBtn.textContent = "Save";
+  saveBtn.disabled = Boolean(ctx.disabled);
+  const errorBox = document.createElement("div");
+  errorBox.className = "cms-widget-error";
+  errorBox.style.display = "none";
+  form.appendChild(input);
+  form.appendChild(saveBtn);
+  container.appendChild(form);
+  container.appendChild(errorBox);
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    if (!ctx.onSave || ctx.disabled) return;
+    saveBtn.disabled = true;
+    saveBtn.textContent = "Saving...";
+    errorBox.style.display = "none";
+    try {
+      const res = await ctx.onSave(input.value);
+      if (!res.ok) {
+        errorBox.textContent = res.error || "Failed to save field";
+        errorBox.style.display = "block";
+      }
+    } finally {
+      saveBtn.disabled = Boolean(ctx.disabled);
+      saveBtn.textContent = "Save";
+    }
+  });
+  return container;
+}
+function createNumberWidget(ctx) {
+  const container = document.createElement("div");
+  container.className = "cms-widget-container";
+  const form = document.createElement("form");
+  form.className = "cms-widget-form";
+  const input = document.createElement("input");
+  input.type = "number";
+  input.className = "cms-widget-input";
+  input.value = ctx.value !== void 0 && ctx.value !== null ? String(ctx.value) : "";
+  input.placeholder = ctx.defaultValue !== void 0 && ctx.defaultValue !== null ? String(ctx.defaultValue) : "";
+  input.disabled = Boolean(ctx.disabled);
+  if (ctx.constraints?.min !== void 0) input.min = String(ctx.constraints.min);
+  if (ctx.constraints?.max !== void 0) input.max = String(ctx.constraints.max);
+  if (ctx.constraints?.step !== void 0) input.step = String(ctx.constraints.step);
+  const saveBtn = document.createElement("button");
+  saveBtn.type = "submit";
+  saveBtn.className = "cms-widget-save-btn";
+  saveBtn.textContent = "Save";
+  saveBtn.disabled = Boolean(ctx.disabled);
+  const errorBox = document.createElement("div");
+  errorBox.className = "cms-widget-error";
+  errorBox.style.display = "none";
+  form.appendChild(input);
+  form.appendChild(saveBtn);
+  container.appendChild(form);
+  container.appendChild(errorBox);
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    if (!ctx.onSave || ctx.disabled) return;
+    saveBtn.disabled = true;
+    saveBtn.textContent = "Saving...";
+    errorBox.style.display = "none";
+    const numVal = input.value === "" ? null : Number(input.value);
+    try {
+      const res = await ctx.onSave(numVal);
+      if (!res.ok) {
+        errorBox.textContent = res.error || "Failed to save field";
+        errorBox.style.display = "block";
+      }
+    } finally {
+      saveBtn.disabled = Boolean(ctx.disabled);
+      saveBtn.textContent = "Save";
+    }
+  });
+  return container;
+}
+function createToggleWidget(ctx) {
+  const container = document.createElement("div");
+  container.className = "cms-widget-container cms-widget-toggle-row";
+  const label = document.createElement("label");
+  label.className = "cms-widget-toggle-label";
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.className = "cms-widget-checkbox";
+  input.checked = Boolean(ctx.value ?? ctx.defaultValue ?? false);
+  input.disabled = Boolean(ctx.disabled);
+  const statusText = document.createElement("span");
+  statusText.className = "cms-widget-toggle-text";
+  statusText.textContent = input.checked ? "True" : "False";
+  const errorBox = document.createElement("div");
+  errorBox.className = "cms-widget-error";
+  errorBox.style.display = "none";
+  label.appendChild(input);
+  label.appendChild(statusText);
+  container.appendChild(label);
+  container.appendChild(errorBox);
+  input.addEventListener("change", async () => {
+    statusText.textContent = input.checked ? "True" : "False";
+    if (!ctx.onSave || ctx.disabled) return;
+    input.disabled = true;
+    errorBox.style.display = "none";
+    try {
+      const res = await ctx.onSave(input.checked);
+      if (!res.ok) {
+        errorBox.textContent = res.error || "Failed to save field";
+        errorBox.style.display = "block";
+        input.checked = !input.checked;
+        statusText.textContent = input.checked ? "True" : "False";
+      }
+    } finally {
+      input.disabled = Boolean(ctx.disabled);
+    }
+  });
+  return container;
+}
+function createSelectWidget(ctx) {
+  const container = document.createElement("div");
+  container.className = "cms-widget-container";
+  const select = document.createElement("select");
+  select.className = "cms-widget-select";
+  select.disabled = Boolean(ctx.disabled);
+  const emptyOpt = document.createElement("option");
+  emptyOpt.value = "";
+  emptyOpt.textContent = "(select value)";
+  select.appendChild(emptyOpt);
+  const rawOptions = ctx.constraints?.options;
+  if (Array.isArray(rawOptions)) {
+    for (const opt of rawOptions) {
+      const optEl = document.createElement("option");
+      if (typeof opt === "string") {
+        optEl.value = opt;
+        optEl.textContent = opt;
+      } else if (typeof opt === "object" && opt !== null) {
+        const o = opt;
+        optEl.value = o.value || "";
+        optEl.textContent = o.label || o.value || "";
+      }
+      select.appendChild(optEl);
+    }
+  }
+  const currentVal = ctx.value !== void 0 && ctx.value !== null ? String(ctx.value) : "";
+  select.value = currentVal;
+  const errorBox = document.createElement("div");
+  errorBox.className = "cms-widget-error";
+  errorBox.style.display = "none";
+  container.appendChild(select);
+  container.appendChild(errorBox);
+  select.addEventListener("change", async () => {
+    if (!ctx.onSave || ctx.disabled) return;
+    select.disabled = true;
+    errorBox.style.display = "none";
+    try {
+      const res = await ctx.onSave(select.value);
+      if (!res.ok) {
+        errorBox.textContent = res.error || "Failed to save field";
+        errorBox.style.display = "block";
+        select.value = currentVal;
+      }
+    } finally {
+      select.disabled = Boolean(ctx.disabled);
+    }
+  });
+  return container;
+}
+function createSummaryWidget(ctx) {
+  const container = document.createElement("div");
+  container.className = "cms-widget-summary-row";
+  const summary = document.createElement("div");
+  summary.className = "cms-widget-summary-text";
+  const normType = (ctx.typeId || "").toLowerCase();
+  if (normType === "richtext") {
+    summary.textContent = extractRichTextSummary(ctx.value ?? ctx.defaultValue);
+  } else if (normType === "image") {
+    summary.textContent = extractImageSummary(ctx.value ?? ctx.defaultValue);
+  } else {
+    const v = ctx.value ?? ctx.defaultValue;
+    summary.textContent = v !== void 0 && v !== null ? JSON.stringify(v) : "(no value)";
+  }
+  const cleanOrigin = (ctx.editorOrigin || DEFAULT_EDITOR_ORIGINS[0]).replace(/\/$/, "");
+  const editorUrl = `${cleanOrigin}/sites/${encodeURIComponent(ctx.siteId)}/editor?path=${encodeURIComponent(ctx.routePath || "/")}&field=${encodeURIComponent(ctx.key)}`;
+  const link = document.createElement("a");
+  link.href = editorUrl;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.className = "cms-widget-editor-link";
+  link.innerHTML = "Open in Editor \u2197";
+  container.appendChild(summary);
+  container.appendChild(link);
+  return container;
+}
+var widgetRegistry = /* @__PURE__ */ new Map([
+  ["text", createTextWidget],
+  ["number", createNumberWidget],
+  ["toggle", createToggleWidget],
+  ["select", createSelectWidget]
+]);
+function resolveToolbarWidget(typeId) {
+  const normalized = typeId.toLowerCase();
+  return widgetRegistry.get(normalized) || createSummaryWidget;
+}
+
+// src/toolbar/app.ts
+var app_default = defineToolbarApp({
+  init(canvas, app, server) {
+    let isEmbedded = false;
+    try {
+      isEmbedded = window.self !== window.top || window.parent !== window;
+    } catch {
+      isEmbedded = true;
+    }
+    if (isEmbedded) {
+      const hideToolbar = () => {
+        const toolbar = document.querySelector("astro-dev-toolbar");
+        if (toolbar instanceof HTMLElement) {
+          toolbar.style.setProperty("display", "none", "important");
+        }
+      };
+      hideToolbar();
+      document.addEventListener("astro:page-load", hideToolbar);
+      document.addEventListener("astro:after-swap", hideToolbar);
+    }
+    let devStatus = null;
+    let fieldDefinitions = /* @__PURE__ */ new Map();
+    let bundleFieldsMap = {};
+    let renderedFieldsList = [];
+    const style = document.createElement("style");
+    style.textContent = `
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        color: ${chromeTokens.foreground};
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      astro-dev-toolbar-window {
+        position: fixed !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: auto !important;
+        transform: none !important;
+        width: 440px !important;
+        max-width: 100vw !important;
+        height: 100vh !important;
+        height: 100dvh !important;
+        max-height: 100vh !important;
+        max-height: 100dvh !important;
+        border-radius: 0 !important;
+        border: none !important;
+        border-left: 1px solid ${chromeTokens.border} !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        background: ${chromeTokens.background} !important;
+        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
+        z-index: 999999999 !important;
+        overflow: hidden !important;
+        display: flex !important;
+        flex-direction: column !important;
+      }
+      .toolbar-container {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px 16px 56px 16px;
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        max-height: 100dvh;
+        min-height: 0;
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
+        scrollbar-color: ${chromeTokens.border} transparent;
+        background: ${chromeTokens.background};
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        box-sizing: border-box;
+      }
+      .toolbar-container > * {
+        flex-shrink: 0;
+      }
+      .toolbar-container::-webkit-scrollbar {
+        width: 6px;
+      }
+      .toolbar-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .toolbar-container::-webkit-scrollbar-thumb {
+        background: ${chromeTokens.border};
+        border-radius: 3px;
+      }
+      .toolbar-container::-webkit-scrollbar-thumb:hover {
+        background: ${chromeTokens.borderStrong};
+      }
+      .header-card {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+      .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .title-area {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .app-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: ${chromeTokens.cardForeground};
+      }
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 11px;
+        color: ${chromeTokens.mutedForeground};
+      }
+      .meta-chips {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 10px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      }
+      .chip-site {
+        background: ${chromeTokens.muted};
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .chip-fresh {
+        background: rgba(16, 185, 129, 0.15);
+        color: ${chromeTokens.successText};
+        border: 1px solid rgba(16, 185, 129, 0.3);
+      }
+      .chip-unpushed {
+        background: rgba(234, 179, 8, 0.15);
+        color: ${chromeTokens.warningText};
+        border: 1px solid rgba(234, 179, 8, 0.3);
+      }
+      .toggle-wrap {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .toggle-input {
+        cursor: pointer;
+      }
+      .banner {
+        border-radius: 6px;
+        padding: 10px 12px;
+        font-size: 11px;
+        flex-shrink: 0;
+      }
+      .banner-error {
+        background: rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.4);
+        color: ${chromeTokens.destructiveText};
+      }
+      .banner-warning {
+        background: rgba(234, 179, 8, 0.15);
+        border: 1px solid rgba(234, 179, 8, 0.4);
+        color: ${chromeTokens.warningText};
+      }
+      .banner-info {
+        background: rgba(59, 130, 246, 0.15);
+        border: 1px solid rgba(59, 130, 246, 0.4);
+        color: ${chromeTokens.infoText};
+      }
+      .section-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${chromeTokens.foregroundSubtle};
+        margin-top: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+      .diag-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+      .diag-item {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex-shrink: 0;
+      }
+      .diag-item-error {
+        border-left: 3px solid ${chromeTokens.destructive};
+      }
+      .diag-item-warning {
+        border-left: 3px solid ${chromeTokens.warning};
+      }
+      .diag-loc {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 10px;
+        color: ${chromeTokens.infoText};
+        text-decoration: none;
+      }
+      .diag-loc:hover {
+        text-decoration: underline;
+      }
+      .diag-msg {
+        color: ${chromeTokens.foregroundSecondary};
+        font-size: 11px;
+      }
+      .group-card {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .group-header {
+        background: ${chromeTokens.muted};
+        padding: 6px 10px;
+        font-weight: 600;
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSecondary};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+      .field-list {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+      }
+      .field-row {
+        padding: 8px 10px;
+        border-top: 1px solid ${chromeTokens.border};
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        transition: background-color 0.3s ease;
+        flex-shrink: 0;
+      }
+      @keyframes fieldHighlightPulse {
+        0% {
+          background: rgba(99, 102, 241, 0.35);
+          box-shadow: inset 0 0 0 1px ${chromeTokens.primary};
+        }
+        70% {
+          background: rgba(99, 102, 241, 0.15);
+          box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
+        }
+        100% {
+          background: transparent;
+          box-shadow: none;
+        }
+      }
+      .field-row-highlighted {
+        animation: fieldHighlightPulse 2s ease-out;
+      }
+      .field-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+      }
+      .field-key {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .badge-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .badge {
+        font-size: 9px;
+        padding: 1px 4px;
+        border-radius: 3px;
+        font-weight: 500;
+        text-transform: lowercase;
+      }
+      .badge-no-value {
+        background: rgba(239, 68, 68, 0.2);
+        color: ${chromeTokens.destructiveText};
+      }
+      .badge-no-default {
+        background: rgba(234, 179, 8, 0.2);
+        color: ${chromeTokens.warningText};
+      }
+      .badge-orphaned {
+        background: rgba(168, 85, 247, 0.2);
+        color: ${chromeTokens.primaryText};
+      }
+      .badge-type {
+        background: ${chromeTokens.muted};
+        color: ${chromeTokens.mutedForeground};
+      }
+      /* Widget inputs */
+      .cms-widget-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .cms-widget-form {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+      .cms-widget-input {
+        flex: 1;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.borderStrong};
+        border-radius: 4px;
+        color: ${chromeTokens.foreground};
+        padding: 4px 8px;
+        font-size: 11px;
+        outline: none;
+      }
+      .cms-widget-input:focus {
+        border-color: ${chromeTokens.ring};
+      }
+      .cms-widget-input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .cms-widget-save-btn {
+        background: ${chromeTokens.primary};
+        color: ${chromeTokens.primaryForeground};
+        border: none;
+        border-radius: 4px;
+        padding: 4px 10px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      .cms-widget-save-btn:hover:not(:disabled) {
+        background: color-mix(in srgb, ${chromeTokens.primary} 85%, black);
+      }
+      .cms-widget-save-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .cms-widget-select {
+        width: 100%;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.borderStrong};
+        border-radius: 4px;
+        color: ${chromeTokens.foreground};
+        padding: 4px 8px;
+        font-size: 11px;
+        outline: none;
+      }
+      .cms-widget-toggle-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .cms-widget-toggle-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+      }
+      .cms-widget-checkbox {
+        cursor: pointer;
+      }
+      .cms-widget-toggle-text {
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .cms-widget-summary-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 4px;
+        padding: 4px 8px;
+      }
+      .cms-widget-summary-text {
+        font-size: 11px;
+        color: ${chromeTokens.mutedForeground};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 260px;
+      }
+      .cms-widget-editor-link {
+        font-size: 11px;
+        color: ${chromeTokens.primaryText};
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .cms-widget-editor-link:hover {
+        text-decoration: underline;
+      }
+      .cms-widget-error {
+        font-size: 10px;
+        color: ${chromeTokens.destructiveText};
+        margin-top: 2px;
+      }
+      .empty-notice {
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSubtle};
+        font-style: italic;
+        padding: 8px 0;
+        flex-shrink: 0;
+      }
+    `;
+    canvas.appendChild(style);
+    const windowEl = document.createElement("astro-dev-toolbar-window");
+    windowEl.style.position = "fixed";
+    windowEl.style.top = "0";
+    windowEl.style.right = "0";
+    windowEl.style.bottom = "0";
+    windowEl.style.left = "auto";
+    windowEl.style.transform = "none";
+    windowEl.style.width = "440px";
+    windowEl.style.maxWidth = "100vw";
+    windowEl.style.height = "100vh";
+    windowEl.style.maxHeight = "100vh";
+    windowEl.style.borderRadius = "0";
+    windowEl.style.border = "none";
+    windowEl.style.borderLeft = `1px solid ${chromeTokens.border}`;
+    windowEl.style.padding = "0";
+    windowEl.style.margin = "0";
+    windowEl.style.background = chromeTokens.background;
+    windowEl.style.boxShadow = "-4px 0 24px rgba(0, 0, 0, 0.5)";
+    windowEl.style.zIndex = "999999999";
+    windowEl.style.display = "flex";
+    windowEl.style.flexDirection = "column";
+    windowEl.style.overflow = "hidden";
+    const container = document.createElement("div");
+    container.className = "toolbar-container";
+    container.style.height = "100%";
+    container.style.minHeight = "0";
+    container.style.flex = "1 1 auto";
+    container.style.overflowY = "auto";
+    container.style.boxSizing = "border-box";
+    windowEl.appendChild(container);
+    canvas.appendChild(windowEl);
+    function patchDomElement(key, kind, value, entryRef) {
+      let selector;
+      const eRef = entryRef;
+      const fPath = eRef?.path || key;
+      if (eRef && (eRef.collection || eRef.slug)) {
+        const colAttr = eRef.collection ? `[data-cms-collection="${eRef.collection}"]` : "";
+        const entryAttr = eRef.slug ? `[data-cms-entry="${eRef.slug}"]` : "";
+        const scopeSel = `${colAttr}${entryAttr}`;
+        selector = `${scopeSel} [data-cms-entry-field="${fPath}"], ${scopeSel}[data-cms-entry-field="${fPath}"]`;
+      } else if (eRef) {
+        selector = `[data-cms-entry-field="${fPath}"]`;
+      } else {
+        selector = `[data-cms-field="${key}"]`;
+      }
+      const els = document.querySelectorAll(selector);
+      for (let i = 0; i < els.length; i++) {
+        const el = els[i];
+        if (kind === "image" || el.tagName.toLowerCase() === "img") {
+          if (value && typeof value === "object") {
+            const imgVal = value;
+            if (imgVal.url) el.setAttribute("src", imgVal.url);
+            if (imgVal.alt !== void 0) el.setAttribute("alt", imgVal.alt);
+          } else if (typeof value === "string") {
+            el.setAttribute("src", value);
+          }
+        } else {
+          el.textContent = value !== null && value !== void 0 ? String(value) : "";
+        }
+      }
+    }
+    async function handleSaveValue(key, val, kind, entryRef) {
+      try {
+        const res = await fetch("/_cms/dev/value", {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ key, value: val })
+        });
+        if (res.ok) {
+          bundleFieldsMap[key] = val;
+          const def = fieldDefinitions.get(key);
+          if (def) {
+            def.value = val;
+          }
+          patchDomElement(key, kind, val, entryRef);
+          const w = window;
+          w.__CMS_RESCAN__?.();
+          render();
+          return { ok: true };
+        }
+        const data = await res.json().catch(() => ({}));
+        const errorMsg = data.errors?.map((e) => e.message).join(", ") || data.error || `Save failed (HTTP ${res.status})`;
+        return { ok: false, error: errorMsg };
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        return { ok: false, error: msg };
+      }
+    }
+    function render() {
+      container.innerHTML = "";
+      if (!devStatus) {
+        const loadingDiv = document.createElement("div");
+        loadingDiv.className = "empty-notice";
+        loadingDiv.textContent = "Loading CMS dev status...";
+        container.appendChild(loadingDiv);
+        return;
+      }
+      const isReadOnly = devStatus.status === "read-only";
+      const isRefused = devStatus.status === "refused";
+      const isUnconfigured = devStatus.status === "unconfigured";
+      const disabled = isReadOnly || isRefused || isUnconfigured;
+      const headerCard = document.createElement("div");
+      headerCard.className = "header-card";
+      const headerTop = document.createElement("div");
+      headerTop.className = "header-top";
+      const titleArea = document.createElement("div");
+      titleArea.className = "title-area";
+      const titleSpan = document.createElement("span");
+      titleSpan.className = "app-title";
+      titleSpan.textContent = "CMS Content";
+      titleArea.appendChild(titleSpan);
+      const toggleWrap = document.createElement("label");
+      toggleWrap.className = "toggle-wrap";
+      const toggleCheckbox = document.createElement("input");
+      toggleCheckbox.type = "checkbox";
+      toggleCheckbox.className = "toggle-input";
+      toggleCheckbox.checked = document.documentElement.hasAttribute("data-cms-edit-mode");
+      toggleCheckbox.addEventListener("change", () => {
+        if (toggleCheckbox.checked) {
+          document.documentElement.setAttribute("data-cms-edit-mode", "true");
+        } else {
+          document.documentElement.removeAttribute("data-cms-edit-mode");
+        }
+      });
+      const toggleLabel = document.createElement("span");
+      toggleLabel.textContent = "Outlines";
+      toggleWrap.appendChild(toggleCheckbox);
+      toggleWrap.appendChild(toggleLabel);
+      headerTop.appendChild(titleArea);
+      headerTop.appendChild(toggleWrap);
+      headerCard.appendChild(headerTop);
+      const metaRow = document.createElement("div");
+      metaRow.className = "meta-row";
+      const chips = document.createElement("div");
+      chips.className = "meta-chips";
+      const siteChip = document.createElement("span");
+      siteChip.className = "chip chip-site";
+      siteChip.textContent = devStatus.siteId || "No Site";
+      chips.appendChild(siteChip);
+      if (devStatus.identity?.email || devStatus.identity?.sub) {
+        const userChip = document.createElement("span");
+        userChip.className = "chip chip-site";
+        userChip.textContent = devStatus.identity.email || devStatus.identity.sub;
+        chips.appendChild(userChip);
+      }
+      if (devStatus.verifier?.available) {
+        const freshChip = document.createElement("span");
+        if (devStatus.manifest?.fresh) {
+          freshChip.className = "chip chip-fresh";
+          freshChip.textContent = "\u25CF Fresh";
+        } else {
+          freshChip.className = "chip chip-unpushed";
+          freshChip.textContent = "\u25B2 Unpushed";
+        }
+        chips.appendChild(freshChip);
+      }
+      metaRow.appendChild(chips);
+      headerCard.appendChild(metaRow);
+      container.appendChild(headerCard);
+      if (isReadOnly && devStatus.mismatch) {
+        const banner = document.createElement("div");
+        banner.className = "banner banner-error";
+        banner.textContent = `Toolbar is READ-ONLY: ${devStatus.mismatch.source} (${devStatus.mismatch.actual}) \u2260 site rendered by this dev server (${devStatus.mismatch.expected})`;
+        container.appendChild(banner);
+      } else if (isRefused) {
+        const banner = document.createElement("div");
+        banner.className = "banner banner-error";
+        banner.textContent = `CMS dev routes disabled: ${devStatus.error || "Access refused"}`;
+        container.appendChild(banner);
+      } else if (isUnconfigured) {
+        const banner = document.createElement("div");
+        banner.className = "banner banner-info";
+        banner.textContent = devStatus.error || "Not logged in. Run `cms login` to enable dev-time editing.";
+        container.appendChild(banner);
+      }
+      const errors = devStatus.verifier?.errors || [];
+      const warnings = devStatus.verifier?.warnings || [];
+      const allDiags = [...errors, ...warnings];
+      if (allDiags.length > 0) {
+        const diagSec = document.createElement("div");
+        diagSec.className = "section-title";
+        diagSec.textContent = `Diagnostics (${allDiags.length})`;
+        container.appendChild(diagSec);
+        const diagList = document.createElement("div");
+        diagList.className = "diag-list";
+        for (const diag of allDiags) {
+          const item = document.createElement("div");
+          item.className = `diag-item ${diag.type === "error" ? "diag-item-error" : "diag-item-warning"}`;
+          if (diag.file) {
+            const locLink = document.createElement("a");
+            locLink.className = "diag-loc";
+            locLink.href = `vscode://file/${diag.file}:${diag.line || 1}:${diag.column || 1}`;
+            locLink.textContent = `${diag.file}:${diag.line || 1}:${diag.column || 1}`;
+            item.appendChild(locLink);
+          }
+          const msg = document.createElement("div");
+          msg.className = "diag-msg";
+          msg.textContent = diag.message;
+          item.appendChild(msg);
+          diagList.appendChild(item);
+        }
+        container.appendChild(diagList);
+      }
+      const fieldsSecTitle = document.createElement("div");
+      fieldsSecTitle.className = "section-title";
+      fieldsSecTitle.textContent = `Rendered Fields (${renderedFieldsList.length})`;
+      container.appendChild(fieldsSecTitle);
+      if (renderedFieldsList.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "empty-notice";
+        empty.textContent = "No CMS fields detected on current page.";
+        container.appendChild(empty);
+      } else {
+        const groupsMap = /* @__PURE__ */ new Map();
+        for (const field of renderedFieldsList) {
+          let groupName = field.group;
+          if (!groupName) {
+            const parts = field.key.split(".");
+            if (parts.length > 1) {
+              groupName = parts.slice(0, -1).join(".");
+            } else {
+              groupName = "Ungrouped";
+            }
+          }
+          if (!groupsMap.has(groupName)) {
+            groupsMap.set(groupName, []);
+          }
+          groupsMap.get(groupName)?.push(field);
+        }
+        const currentRoute = window.location.pathname || "/";
+        const editorOrigin = devStatus.editorOrigins?.[0] || DEFAULT_EDITOR_ORIGINS[0];
+        for (const [groupName, groupFields] of groupsMap.entries()) {
+          const groupCard = document.createElement("div");
+          groupCard.className = "group-card";
+          const groupHeader = document.createElement("div");
+          groupHeader.className = "group-header";
+          groupHeader.textContent = groupName;
+          groupCard.appendChild(groupHeader);
+          const fieldList = document.createElement("div");
+          fieldList.className = "field-list";
+          for (const field of groupFields) {
+            const def = fieldDefinitions.get(field.key);
+            const rawVal = bundleFieldsMap[field.key] !== void 0 ? bundleFieldsMap[field.key] : def?.value !== void 0 ? def.value : def?.default_value;
+            const typeId = def?.type || field.kind || "text";
+            const isOrphaned = Boolean(def?.orphaned_at);
+            const hasNoValue = rawVal === void 0 || rawVal === null || rawVal === "";
+            const hasNoDefault = def?.default_value === void 0 || def?.default_value === null;
+            const row = document.createElement("div");
+            row.className = "field-row";
+            row.dataset.fieldKey = field.key;
+            row.setAttribute("data-field-key", field.key);
+            const meta = document.createElement("div");
+            meta.className = "field-meta";
+            const keySpan = document.createElement("span");
+            keySpan.className = "field-key";
+            keySpan.textContent = field.key;
+            meta.appendChild(keySpan);
+            const badgeGroup = document.createElement("div");
+            badgeGroup.className = "badge-group";
+            if (isOrphaned) {
+              const b = document.createElement("span");
+              b.className = "badge badge-orphaned";
+              b.textContent = "orphaned";
+              badgeGroup.appendChild(b);
+            }
+            if (hasNoValue) {
+              const b = document.createElement("span");
+              b.className = "badge badge-no-value";
+              b.textContent = "no value";
+              badgeGroup.appendChild(b);
+            }
+            if (hasNoDefault) {
+              const b = document.createElement("span");
+              b.className = "badge badge-no-default";
+              b.textContent = "no default";
+              badgeGroup.appendChild(b);
+            }
+            const typeBadge = document.createElement("span");
+            typeBadge.className = "badge badge-type";
+            typeBadge.textContent = typeId;
+            badgeGroup.appendChild(typeBadge);
+            meta.appendChild(badgeGroup);
+            row.appendChild(meta);
+            const renderer = resolveToolbarWidget(typeId);
+            const widgetEl = renderer({
+              key: field.key,
+              typeId,
+              value: rawVal,
+              defaultValue: def?.default_value,
+              constraints: def?.constraints,
+              disabled,
+              siteId: devStatus.siteId,
+              routePath: currentRoute,
+              editorOrigin,
+              onSave: async (v) => handleSaveValue(field.key, v, field.kind || typeId, field.entryRef)
+            });
+            row.appendChild(widgetEl);
+            fieldList.appendChild(row);
+          }
+          groupCard.appendChild(fieldList);
+          container.appendChild(groupCard);
+        }
+      }
+      const renderedKeys = new Set(renderedFieldsList.map((f) => f.key));
+      const orphanedDefs = [];
+      for (const def of fieldDefinitions.values()) {
+        if (def.orphaned_at || !renderedKeys.has(def.key)) {
+          orphanedDefs.push(def);
+        }
+      }
+      if (orphanedDefs.length > 0) {
+        const orphanTitle = document.createElement("div");
+        orphanTitle.className = "section-title";
+        orphanTitle.textContent = `Unrendered / Orphaned Fields (${orphanedDefs.length})`;
+        container.appendChild(orphanTitle);
+        const orphanCard = document.createElement("div");
+        orphanCard.className = "group-card";
+        const orphanList = document.createElement("div");
+        orphanList.className = "field-list";
+        for (const o of orphanedDefs) {
+          const row = document.createElement("div");
+          row.className = "field-row";
+          row.dataset.fieldKey = o.key;
+          row.setAttribute("data-field-key", o.key);
+          const meta = document.createElement("div");
+          meta.className = "field-meta";
+          const keySpan = document.createElement("span");
+          keySpan.className = "field-key";
+          keySpan.textContent = o.key;
+          meta.appendChild(keySpan);
+          const badgeGroup = document.createElement("div");
+          badgeGroup.className = "badge-group";
+          if (o.orphaned_at) {
+            const b = document.createElement("span");
+            b.className = "badge badge-orphaned";
+            b.textContent = "orphaned";
+            badgeGroup.appendChild(b);
+          } else {
+            const b = document.createElement("span");
+            b.className = "badge badge-type";
+            b.textContent = "unrendered";
+            badgeGroup.appendChild(b);
+          }
+          meta.appendChild(badgeGroup);
+          row.appendChild(meta);
+          orphanList.appendChild(row);
+        }
+        orphanCard.appendChild(orphanList);
+        container.appendChild(orphanCard);
+      }
+    }
+    async function loadData() {
+      try {
+        const statusRes = await fetch("/_cms/dev/status");
+        if (statusRes.ok) {
+          devStatus = await statusRes.json();
+        } else if (statusRes.status === 503) {
+          const errData = await statusRes.json().catch(() => ({}));
+          devStatus = {
+            status: errData.status || "refused",
+            siteId: "",
+            apiUrl: "",
+            manifest: { fresh: true, localHash: null, pushedHash: null },
+            verifier: { available: false, errors: [], warnings: [] },
+            error: errData.error
+          };
+        }
+        if (devStatus?.verifier?.errors && devStatus.verifier.errors.length > 0) {
+          app.toggleNotification({ state: true, level: "error" });
+        } else if (devStatus?.verifier?.warnings && devStatus.verifier.warnings.length > 0) {
+          app.toggleNotification({ state: true, level: "warning" });
+        } else {
+          app.toggleNotification({ state: false });
+        }
+        if (devStatus && devStatus.status !== "refused" && devStatus.status !== "unconfigured") {
+          const bundleRes = await fetch("/_cms/dev/bundle");
+          if (bundleRes.ok) {
+            const bundleData = await bundleRes.json();
+            if (bundleData.bundle?.fields) {
+              bundleFieldsMap = bundleData.bundle.fields;
+            }
+            if (Array.isArray(bundleData.fields)) {
+              fieldDefinitions = new Map(bundleData.fields.map((f) => [f.key, f]));
+            }
+          }
+        }
+      } catch (_err) {
+      }
+      const winFields = window.__CMS_FIELDS__;
+      if (Array.isArray(winFields)) {
+        renderedFieldsList = winFields;
+      }
+      render();
+    }
+    server.on("cms:diagnostics", (data) => {
+      if (devStatus) {
+        devStatus.verifier = {
+          available: Boolean(data.available),
+          errors: data.errors || [],
+          warnings: data.warnings || []
+        };
+        if (data.fresh !== void 0) {
+          devStatus.manifest.fresh = data.fresh;
+        }
+        if (data.errors && data.errors.length > 0) {
+          app.toggleNotification({ state: true, level: "error" });
+        } else if (data.warnings && data.warnings.length > 0) {
+          app.toggleNotification({ state: true, level: "warning" });
+        } else {
+          app.toggleNotification({ state: false });
+        }
+        render();
+      }
+    });
+    function escapeCssKey(str) {
+      if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(str);
+      }
+      return str.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, "\\$1");
+    }
+    function focusFieldRow(key) {
+      if (!key) return;
+      const targetRow = container.querySelector(
+        `[data-field-key="${escapeCssKey(key)}"]`
+      );
+      if (targetRow) {
+        targetRow.scrollIntoView({ behavior: "smooth", block: "center" });
+        targetRow.classList.remove("field-row-highlighted");
+        void targetRow.offsetWidth;
+        targetRow.classList.add("field-row-highlighted");
+        const inputEl = targetRow.querySelector(
+          'input:not([type="checkbox"]), select, textarea, button, a'
+        );
+        if (inputEl) {
+          setTimeout(() => {
+            inputEl.focus();
+            if (typeof inputEl.select === "function") {
+              inputEl.select();
+            }
+          }, 150);
+        }
+      }
+    }
+    document.addEventListener("cms:fields-updated", ((e) => {
+      if (Array.isArray(e.detail)) {
+        renderedFieldsList = e.detail;
+        render();
+      }
+    }));
+    document.addEventListener("cms:field-selected", ((e) => {
+      if (e.detail?.key) {
+        focusFieldRow(e.detail.key);
+      }
+    }));
+    document.addEventListener("astro:page-load", () => {
+      loadData();
+    });
+    loadData();
+  }
+});
+
+export { app_default as default };
+//# sourceMappingURL=app.js.map
+//# sourceMappingURL=app.js.map