@webmaster-droid/web 0.1.0-alpha.1 → 0.1.0

package/dist/index.js

@@ -6,11 +6,36 @@ import {
   createElement,
   useContext
 } from "react";
+import sanitizeHtml from "sanitize-html";
 import { jsx } from "react/jsx-runtime";
 var EDITABLE_ROOTS = ["pages.", "layout.", "seo.", "themeTokens."];
 var MAX_PATH_LENGTH = 320;
 var MAX_LABEL_LENGTH = 120;
 var MAX_PREVIEW_LENGTH = 140;
+var RICH_TEXT_ALLOWED_TAGS = [
+  "a",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "i",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "strong",
+  "u",
+  "ul"
+];
+var RICH_TEXT_ALLOWED_ATTRS = ["href", "title", "aria-label", "rel"];
 var EditableContext = createContext(null);
 function EditableProvider(props) {
   return /* @__PURE__ */ jsx(
@@ -172,9 +197,28 @@ function parseSelectedEditableFromTarget(target, pagePath) {
   }
   return selected;
 }
-function pickStringValue(document2, path, fallback) {
+function pickStringValue(document2, path, fallback, componentName, fallbackPropName) {
   const value = readByPath(document2, path);
-  return typeof value === "string" && value.trim() ? value : fallback;
+  if (typeof value === "string" && value.trim()) {
+    return value;
+  }
+  if (typeof fallback === "string") {
+    return fallback;
+  }
+  throw new Error(
+    `${componentName} missing content for "${path}". Provide a CMS value or set \`${fallbackPropName}\`.`
+  );
+}
+function sanitizeRichTextHtml(html) {
+  return sanitizeHtml(html, {
+    allowedTags: [...RICH_TEXT_ALLOWED_TAGS],
+    allowedAttributes: {
+      a: [...RICH_TEXT_ALLOWED_ATTRS]
+    },
+    allowedSchemes: ["http", "https", "mailto", "tel"],
+    allowProtocolRelative: false,
+    disallowedTagsMode: "discard"
+  });
 }
 function EditableText({
   path,
@@ -185,7 +229,7 @@ function EditableText({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const value = pickStringValue(document2, path, fallback);
+  const value = pickStringValue(document2, path, fallback, "EditableText", "fallback");
   const attrs = enabled ? editableMeta({
     path,
     label: label ?? path,
@@ -203,7 +247,8 @@ function EditableRichText({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const value = pickStringValue(document2, path, fallback);
+  const value = pickStringValue(document2, path, fallback, "EditableRichText", "fallback");
+  const sanitizedHtml = sanitizeRichTextHtml(value);
   const attrs = enabled ? editableMeta({
     path,
     label: label ?? path,
@@ -213,7 +258,7 @@ function EditableRichText({
   return createElement(as, {
     ...rest,
     ...attrs,
-    dangerouslySetInnerHTML: { __html: value }
+    dangerouslySetInnerHTML: { __html: sanitizedHtml }
   });
 }
 function EditableImage({
@@ -225,8 +270,8 @@ function EditableImage({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const src = pickStringValue(document2, path, fallbackSrc);
-  const alt = altPath ? pickStringValue(document2, altPath, fallbackAlt) : fallbackAlt;
+  const src = pickStringValue(document2, path, fallbackSrc, "EditableImage", "fallbackSrc");
+  const alt = altPath ? pickStringValue(document2, altPath, fallbackAlt, "EditableImage", "fallbackAlt") : fallbackAlt ?? "";
   const attrs = enabled ? editableMeta({
     path,
     label: label ?? path,
@@ -245,8 +290,14 @@ function EditableLink({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const href = pickStringValue(document2, hrefPath, fallbackHref);
-  const text = pickStringValue(document2, labelPath, fallbackLabel);
+  const href = pickStringValue(document2, hrefPath, fallbackHref, "EditableLink", "fallbackHref");
+  const text = pickStringValue(
+    document2,
+    labelPath,
+    fallbackLabel,
+    "EditableLink",
+    "fallbackLabel"
+  );
   const attrs = enabled ? editableMeta({
     path: labelPath,
     label: label ?? labelPath,
@@ -686,18 +737,7 @@ function useWebmasterDroid() {
   return context;
 }
 
-// src/overlay.tsx
-import {
-  useCallback,
-  useEffect as useEffect2,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2
-} from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { REQUIRED_PUBLISH_CONFIRMATION } from "@webmaster-droid/contracts";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+// src/overlay/utils.ts
 function createMessage(role, text, status) {
   return {
     id: `${role}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
@@ -786,7 +826,394 @@ function kindIcon(kind) {
   }
   return "TXT";
 }
-function WebmasterDroidOverlay() {
+var OVERLAY_FONT_FAMILY = "var(--font-ibm-plex-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+
+// src/overlay/components.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function OverlayHeader({
+  isAuthenticated,
+  publishState,
+  activeTab,
+  historyCount,
+  clearChatDisabled,
+  onPublish,
+  onTabChange,
+  onClearChat,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx3("header", { className: "border-b border-stone-300 bg-[#f3eee5] p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    isAuthenticated ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: `rounded border px-1.5 py-0.5 text-[10px] font-medium leading-4 ${publishState === "Published" ? "border-stone-300 bg-[#ece5d9] text-stone-600" : "border-stone-500 bg-[#ded4c3] text-stone-800"}`,
+          children: publishState
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-stone-700 bg-stone-800 px-2 py-1 text-[11px] font-semibold leading-4 text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
+          onClick: onPublish,
+          disabled: !isAuthenticated,
+          children: "Publish"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-md border border-stone-300 bg-[#e8dfd1] p-0.5", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: `rounded px-2 py-1 text-[11px] font-medium leading-4 ${activeTab === "chat" ? "bg-[#f7f2e8] text-stone-900 shadow-sm" : "text-stone-600 hover:text-stone-900"}`,
+            onClick: () => onTabChange("chat"),
+            children: "Chat"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `rounded px-2 py-1 text-[11px] font-medium leading-4 ${activeTab === "history" ? "bg-[#f7f2e8] text-stone-900 shadow-sm" : "text-stone-600 hover:text-stone-900"}`,
+            onClick: () => onTabChange("history"),
+            children: [
+              "History (",
+              historyCount,
+              ")"
+            ]
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx3("h2", { className: "text-[12px] font-semibold text-stone-700", children: "Login" }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+      isAuthenticated ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear chat",
+          title: "Clear chat",
+          disabled: clearChatDisabled,
+          className: "inline-flex h-6 w-6 items-center justify-center rounded border border-stone-300 text-stone-600 hover:bg-[#efe8dc] hover:text-stone-800 disabled:cursor-not-allowed disabled:opacity-50",
+          onClick: onClearChat,
+          children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3.5 w-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+            "path",
+            {
+              d: "M4.5 5.5H15.5M8 3.75H12M7 7.5V13.5M10 7.5V13.5M13 7.5V13.5M6.5 5.5L7 15C7.03 15.6 7.53 16.08 8.13 16.08H11.87C12.47 16.08 12.97 15.6 13 15L13.5 5.5",
+              stroke: "currentColor",
+              strokeWidth: "1.4",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-stone-300 px-2 py-1 text-[11px] leading-4 text-stone-700 hover:bg-[#efe8dc]",
+          onClick: onClose,
+          children: "Close"
+        }
+      )
+    ] })
+  ] }) });
+}
+function OverlayLoginPanel({
+  authConfigured,
+  email,
+  password,
+  signingIn,
+  onEmailChange,
+  onPasswordChange,
+  onSignIn
+}) {
+  return /* @__PURE__ */ jsx3("section", { className: "flex min-h-0 flex-1 items-center justify-center bg-[#ece7dd] p-3", children: !authConfigured ? /* @__PURE__ */ jsx3("div", { className: "w-full max-w-sm rounded border border-red-300 bg-[#f8f3e9] p-3 text-[11px] leading-4 text-red-700", children: "Missing Supabase config (`supabaseUrl` / `supabaseAnonKey`)." }) : /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm rounded border border-stone-300 bg-[#f8f3e9] p-3", children: [
+    /* @__PURE__ */ jsx3("h3", { className: "mb-2 text-[12px] font-semibold text-stone-700", children: "Sign in" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "text",
+          value: email,
+          onChange: (event) => onEmailChange(event.target.value),
+          placeholder: "login",
+          className: "w-full rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] text-stone-900 outline-none focus:border-stone-500"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "password",
+          value: password,
+          onChange: (event) => onPasswordChange(event.target.value),
+          placeholder: "Password",
+          className: "w-full rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] text-stone-900 outline-none focus:border-stone-500"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: onSignIn,
+          disabled: signingIn || !email.trim() || !password,
+          className: "w-full rounded border border-stone-700 bg-stone-800 px-2 py-1.5 text-[12px] font-medium text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
+          children: signingIn ? "Signing in" : "Sign in"
+        }
+      )
+    ] })
+  ] }) });
+}
+function OverlayChatPanel({
+  messages,
+  chatEndRef,
+  showAssistantAvatarImage,
+  assistantAvatarUrl,
+  assistantAvatarFallbackLabel,
+  onAssistantAvatarError,
+  showModelPicker,
+  selectableModels,
+  modelId,
+  sending,
+  onModelChange,
+  selectedElement,
+  onClearSelectedElement,
+  message,
+  onMessageChange,
+  onMessageKeyDown,
+  onSend,
+  isAuthenticated
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("section", { className: "flex-1 space-y-1 overflow-auto bg-[#ece7dd] p-2", children: [
+      messages.map((entry) => {
+        const isAssistant = entry.role === "assistant";
+        const isPendingAssistant = isAssistant && entry.status === "pending";
+        return /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: entry.role === "tool" ? "max-w-[96%] px-0.5 py-0 text-[10px] leading-tight text-stone-500" : `max-w-[92%] rounded-md py-1.5 text-[12px] leading-4 ${entry.role === "user" ? "ml-auto bg-[#2e2b27] px-2 text-stone-50" : entry.role === "thinking" ? "bg-[#e3dbce] px-2 text-stone-700" : isAssistant ? "relative border border-[#d6ccbb] bg-[#f8f3e9] pl-8 pr-2 text-stone-800" : "bg-[#ddd2bf] px-2 text-stone-800"}`,
+            children: entry.role === "tool" ? /* @__PURE__ */ jsx3("span", { children: entry.text }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              isAssistant ? showAssistantAvatarImage ? /* @__PURE__ */ jsx3(
+                "img",
+                {
+                  src: assistantAvatarUrl,
+                  alt: "",
+                  "aria-hidden": "true",
+                  className: `pointer-events-none absolute left-2 top-1.5 h-[18px] w-[18px] select-none rounded-full border border-[#d6ccbb] bg-[#efe8dc] object-cover ${isPendingAssistant ? "animate-pulse" : ""}`,
+                  onError: onAssistantAvatarError
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `pointer-events-none absolute left-2 top-1.5 inline-flex h-[18px] w-[18px] select-none items-center justify-center rounded-full border border-[#d6ccbb] bg-[#efe8dc] text-[9px] font-semibold text-stone-700 ${isPendingAssistant ? "animate-pulse" : ""}`,
+                  children: assistantAvatarFallbackLabel
+                }
+              ) : null,
+              /* @__PURE__ */ jsx3("div", { className: "max-w-none text-inherit [&_code]:rounded [&_code]:bg-stone-900/10 [&_code]:px-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_p]:mb-1 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-4", children: isPendingAssistant && !entry.text.trim() ? /* @__PURE__ */ jsx3("span", { className: "block h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx3(ReactMarkdown, { remarkPlugins: [remarkGfm], children: entry.text }) })
+            ] })
+          },
+          entry.id
+        );
+      }),
+      /* @__PURE__ */ jsx3("div", { ref: chatEndRef })
+    ] }),
+    /* @__PURE__ */ jsxs("footer", { className: "border-t border-stone-300 bg-[#f3eee5] p-2", children: [
+      showModelPicker && selectableModels.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx3(
+          "label",
+          {
+            htmlFor: "admin-model-picker",
+            className: "text-[10px] font-semibold uppercase tracking-wide text-stone-600",
+            children: "Model"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "select",
+          {
+            id: "admin-model-picker",
+            value: modelId ?? selectableModels[0]?.id,
+            onChange: (event) => onModelChange(event.target.value),
+            disabled: sending,
+            className: "h-7 min-w-0 flex-1 rounded border border-stone-300 bg-[#f7f2e8] px-2 text-[11px] text-stone-800 outline-none focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60",
+            children: selectableModels.map((option) => /* @__PURE__ */ jsx3("option", { value: option.id, children: option.label }, option.id))
+          }
+        )
+      ] }) : null,
+      selectedElement ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1 rounded border border-stone-300 bg-[#e8dfd1] px-1.5 py-1", children: [
+        /* @__PURE__ */ jsx3("span", { className: "inline-flex shrink-0 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] px-1 py-0.5 text-[9px] font-semibold text-stone-700", children: kindIcon(selectedElement.kind) }),
+        /* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 truncate text-[10px] leading-3.5 text-stone-600", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-semibold text-stone-800", children: selectedElement.label }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            " \xB7 ",
+            selectedElement.path
+          ] }),
+          selectedElement.preview ? /* @__PURE__ */ jsxs("span", { children: [
+            " \xB7 ",
+            selectedElement.preview
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear selected element",
+            title: "Clear selected element",
+            className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] text-stone-700 hover:bg-[#efe8dc]",
+            onClick: onClearSelectedElement,
+            children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                d: "M5 5L15 15M15 5L5 15",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            value: message,
+            onChange: (event) => onMessageChange(event.target.value),
+            onKeyDown: onMessageKeyDown,
+            rows: 2,
+            placeholder: "Ask the agent to edit text, image URLs, or theme tokens",
+            className: "flex-1 resize-none rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] leading-4 text-stone-900 outline-none placeholder:text-stone-500 focus:border-stone-500"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: onSend,
+            disabled: !isAuthenticated || sending || !message.trim(),
+            className: "rounded border border-stone-500 bg-stone-600 px-3 py-1.5 text-[12px] font-semibold text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
+            children: sending ? "Sending" : "Send"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function OverlayHistoryPanel({
+  history,
+  deletingCheckpointId,
+  onRestorePublished,
+  onRestoreCheckpoint,
+  onDeleteCheckpoint
+}) {
+  return /* @__PURE__ */ jsx3("section", { className: "flex min-h-0 flex-1 flex-col p-2 text-[11px] leading-4", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded border border-stone-300 bg-[#f8f3e9]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border-b border-stone-200 px-2 py-1 font-semibold text-stone-700", children: [
+        "Published (",
+        history.published.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "max-h-40 overflow-auto px-2 py-1.5", children: history.published.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: history.published.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 rounded border border-stone-200 bg-[#f2ecdf] px-2 py-1",
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate text-[10px] text-stone-700", children: formatHistoryTime(item.createdAt) }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: "rounded border border-stone-300 bg-[#f7f2e8] px-1.5 py-0.5 text-[10px] text-stone-700 hover:bg-[#efe8dc]",
+                onClick: () => onRestorePublished(item),
+                children: "Restore"
+              }
+            )
+          ]
+        },
+        `pub-${item.id}`
+      )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No published snapshots." }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col rounded border border-stone-300 bg-[#f8f3e9]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border-b border-stone-200 px-2 py-1 font-semibold text-stone-700", children: [
+        "Checkpoints (",
+        history.checkpoints.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 overflow-auto px-2 py-1.5", children: history.checkpoints.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: history.checkpoints.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start justify-between gap-2 rounded border border-stone-200 bg-[#f2ecdf] px-2 py-1",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx3("p", { className: "truncate text-[10px] text-stone-700", children: formatHistoryTime(item.createdAt) }),
+              item.reason ? /* @__PURE__ */ jsx3("p", { className: "truncate text-[10px] text-stone-500", children: item.reason }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: deletingCheckpointId === item.id,
+                  className: "rounded border border-stone-300 bg-[#f7f2e8] px-1.5 py-0.5 text-[10px] text-stone-700 hover:bg-[#efe8dc] disabled:cursor-not-allowed disabled:opacity-50",
+                  onClick: () => onRestoreCheckpoint(item),
+                  children: "Restore"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Delete checkpoint",
+                  title: "Delete checkpoint",
+                  disabled: deletingCheckpointId === item.id,
+                  className: "inline-flex h-6 w-6 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] text-stone-700 hover:bg-[#efe8dc] disabled:cursor-not-allowed disabled:opacity-50",
+                  onClick: () => onDeleteCheckpoint(item),
+                  children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3.5 w-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+                    "path",
+                    {
+                      d: "M4.5 5.5H15.5M8 3.75H12M7 7.5V13.5M10 7.5V13.5M13 7.5V13.5M6.5 5.5L7 15C7.03 15.6 7.53 16.08 8.13 16.08H11.87C12.47 16.08 12.97 15.6 13 15L13.5 5.5",
+                      stroke: "currentColor",
+                      strokeWidth: "1.4",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ) })
+                }
+              )
+            ] })
+          ]
+        },
+        `cp-${item.id}`
+      )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No checkpoints yet." }) })
+    ] })
+  ] }) });
+}
+function OverlayLauncherButton({ onOpen }) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen,
+      className: "fixed bottom-4 right-4 z-[100] rounded-full border border-stone-600 bg-stone-700 px-4 py-2 text-[12px] font-semibold text-stone-100 shadow-xl hover:bg-stone-800",
+      style: { fontFamily: OVERLAY_FONT_FAMILY },
+      children: "Chat to Webmaster"
+    }
+  );
+}
+
+// src/overlay/controller.ts
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState2
+} from "react";
+import { REQUIRED_PUBLISH_CONFIRMATION } from "@webmaster-droid/contracts";
+function useOverlayController() {
   const {
     config,
     isAdminMode,
@@ -878,11 +1305,7 @@ function WebmasterDroidOverlay() {
       document.removeEventListener("click", onDocumentClickCapture, true);
     };
   }, [isAdminMode, isOpen, setSelectedElement]);
-  const selectableModels = modelOptions;
-  if (!isAdminMode) {
-    return null;
-  }
-  const signInWithPassword = async () => {
+  const signInWithPassword = useCallback(async () => {
     if (!supabase) {
       setMessages((prev) => [
         ...prev,
@@ -915,8 +1338,8 @@ function WebmasterDroidOverlay() {
     } finally {
       setSigningIn(false);
     }
-  };
-  const onSend = async () => {
+  }, [email, password, supabase]);
+  const onSend = useCallback(async () => {
     if (!token || !message.trim() || sending) {
       return;
     }
@@ -1020,14 +1443,28 @@ function WebmasterDroidOverlay() {
     } catch (error) {
       const detail = error instanceof Error ? error.message : "Chat failed.";
       const pendingAssistantId = pendingAssistantIdRef.current;
-      setMessages((prev) => [...removeMessageById(prev, pendingAssistantId), createMessage("system", detail)]);
+      setMessages((prev) => [
+        ...removeMessageById(prev, pendingAssistantId),
+        createMessage("system", detail)
+      ]);
       pendingAssistantIdRef.current = null;
     } finally {
       pendingAssistantIdRef.current = null;
       setSending(false);
     }
-  };
-  const onPublish = async () => {
+  }, [
+    config.apiBaseUrl,
+    includeThinking,
+    message,
+    messages,
+    modelId,
+    requestRefresh,
+    refreshHistory,
+    selectedElement,
+    sending,
+    token
+  ]);
+  const onPublish = useCallback(async () => {
     if (!token) {
       return;
     }
@@ -1051,53 +1488,59 @@ function WebmasterDroidOverlay() {
       const detail = error instanceof Error ? error.message : "Publish failed.";
       setMessages((prev) => [...prev, createMessage("system", detail)]);
     }
-  };
-  const onRollback = async (request, label) => {
-    if (!token) {
-      return;
-    }
-    try {
-      await rollbackDraft(config.apiBaseUrl, token, request);
-      requestRefresh();
-      await refreshHistory(false);
-      setMessages((prev) => [
-        ...prev,
-        createMessage("system", `Draft restored from ${label}.`)
-      ]);
-    } catch (error) {
-      const detail = error instanceof Error ? error.message : "Rollback failed.";
-      setMessages((prev) => [...prev, createMessage("system", detail)]);
-    }
-  };
-  const onDeleteCheckpoint = async (checkpoint) => {
-    if (!token || deletingCheckpointId) {
-      return;
-    }
-    const timestampLabel = formatHistoryTime(checkpoint.createdAt);
-    const reasonLine = checkpoint.reason ? `
+  }, [config.apiBaseUrl, requestRefresh, refreshHistory, token]);
+  const onRollback = useCallback(
+    async (request, label) => {
+      if (!token) {
+        return;
+      }
+      try {
+        await rollbackDraft(config.apiBaseUrl, token, request);
+        requestRefresh();
+        await refreshHistory(false);
+        setMessages((prev) => [
+          ...prev,
+          createMessage("system", `Draft restored from ${label}.`)
+        ]);
+      } catch (error) {
+        const detail = error instanceof Error ? error.message : "Rollback failed.";
+        setMessages((prev) => [...prev, createMessage("system", detail)]);
+      }
+    },
+    [config.apiBaseUrl, requestRefresh, refreshHistory, token]
+  );
+  const onDeleteCheckpoint = useCallback(
+    async (checkpoint) => {
+      if (!token || deletingCheckpointId) {
+        return;
+      }
+      const timestampLabel = formatHistoryTime(checkpoint.createdAt);
+      const reasonLine = checkpoint.reason ? `
 Reason: ${checkpoint.reason}` : "";
-    const approved = window.confirm(
-      `Delete checkpoint from ${timestampLabel}? This cannot be undone.${reasonLine}`
-    );
-    if (!approved) {
-      return;
-    }
-    setDeletingCheckpointId(checkpoint.id);
-    try {
-      await deleteCheckpoint(config.apiBaseUrl, token, { checkpointId: checkpoint.id });
-      await refreshHistory(false);
-      setMessages((prev) => [
-        ...prev,
-        createMessage("system", `Deleted checkpoint from ${timestampLabel}.`)
-      ]);
-    } catch (error) {
-      const detail = error instanceof Error ? error.message : "Delete checkpoint failed.";
-      setMessages((prev) => [...prev, createMessage("system", detail)]);
-    } finally {
-      setDeletingCheckpointId((current) => current === checkpoint.id ? null : current);
-    }
-  };
-  const onClearChat = () => {
+      const approved = window.confirm(
+        `Delete checkpoint from ${timestampLabel}? This cannot be undone.${reasonLine}`
+      );
+      if (!approved) {
+        return;
+      }
+      setDeletingCheckpointId(checkpoint.id);
+      try {
+        await deleteCheckpoint(config.apiBaseUrl, token, { checkpointId: checkpoint.id });
+        await refreshHistory(false);
+        setMessages((prev) => [
+          ...prev,
+          createMessage("system", `Deleted checkpoint from ${timestampLabel}.`)
+        ]);
+      } catch (error) {
+        const detail = error instanceof Error ? error.message : "Delete checkpoint failed.";
+        setMessages((prev) => [...prev, createMessage("system", detail)]);
+      } finally {
+        setDeletingCheckpointId((current) => current === checkpoint.id ? null : current);
+      }
+    },
+    [config.apiBaseUrl, deletingCheckpointId, refreshHistory, token]
+  );
+  const onClearChat = useCallback(() => {
     if (sending) {
       return;
     }
@@ -1108,372 +1551,180 @@ Reason: ${checkpoint.reason}` : "";
     setMessages([]);
     setMessage("");
     clearSelectedElement();
-  };
-  const onMessageKeyDown = (event) => {
-    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
-      return;
-    }
-    event.preventDefault();
-    if (!isAuthenticated || sending || !message.trim()) {
-      return;
-    }
-    void onSend();
-  };
-  const latestPublished = history.published.reduce((max, item) => {
-    const value = historyTimestamp(item.createdAt);
-    if (value === null) {
-      return max;
-    }
-    return max === null ? value : Math.max(max, value);
-  }, null);
-  const latestCheckpoint = history.checkpoints.reduce((max, item) => {
-    const value = historyTimestamp(item.createdAt);
-    if (value === null) {
-      return max;
-    }
-    return max === null ? value : Math.max(max, value);
-  }, null);
+  }, [clearSelectedElement, message, messages.length, selectedElement, sending]);
+  const onMessageKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+        return;
+      }
+      event.preventDefault();
+      if (!isAuthenticated || sending || !message.trim()) {
+        return;
+      }
+      void onSend();
+    },
+    [isAuthenticated, message, onSend, sending]
+  );
+  const latestPublished = useMemo2(
+    () => history.published.reduce((max, item) => {
+      const value = historyTimestamp(item.createdAt);
+      if (value === null) {
+        return max;
+      }
+      return max === null ? value : Math.max(max, value);
+    }, null),
+    [history.published]
+  );
+  const latestCheckpoint = useMemo2(
+    () => history.checkpoints.reduce((max, item) => {
+      const value = historyTimestamp(item.createdAt);
+      if (value === null) {
+        return max;
+      }
+      return max === null ? value : Math.max(max, value);
+    }, null),
+    [history.checkpoints]
+  );
   const publishState = latestCheckpoint !== null && (latestPublished === null || latestCheckpoint > latestPublished) ? "Unpublished" : "Published";
   const assistantAvatarFallbackLabel = (config.assistantAvatarFallback || "W").trim().charAt(0).toUpperCase() || "W";
   const showAssistantAvatarImage = Boolean(config.assistantAvatarUrl) && !assistantAvatarFailed;
-  return /* @__PURE__ */ jsx3(Fragment, { children: isOpen ? /* @__PURE__ */ jsxs(
+  return {
+    isAdminMode,
+    isAuthenticated,
+    authConfigured,
+    isOpen,
+    setIsOpen,
+    activeTab,
+    setActiveTab,
+    overlayRootRef,
+    chatEndRef,
+    publishState,
+    selectableModels: modelOptions,
+    showModelPicker,
+    modelId,
+    setModelId,
+    includeThinking,
+    selectedElement,
+    clearSelectedElement,
+    email,
+    setEmail,
+    password,
+    setPassword,
+    signingIn,
+    signInWithPassword,
+    message,
+    setMessage,
+    messages,
+    sending,
+    onSend,
+    onPublish,
+    onRollback,
+    history,
+    deletingCheckpointId,
+    onDeleteCheckpoint,
+    onClearChat,
+    onMessageKeyDown,
+    assistantAvatarFallbackLabel,
+    showAssistantAvatarImage,
+    assistantAvatarUrl: config.assistantAvatarUrl,
+    setAssistantAvatarFailed,
+    clearChatDisabled: sending || messages.length === 0 && !message.trim() && !selectedElement
+  };
+}
+
+// src/overlay.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function WebmasterDroidOverlay() {
+  const controller = useOverlayController();
+  if (!controller.isAdminMode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(Fragment2, { children: controller.isOpen ? /* @__PURE__ */ jsxs2(
     "div",
     {
-      ref: overlayRootRef,
+      ref: controller.overlayRootRef,
       "data-admin-overlay-root": true,
       className: "fixed bottom-4 right-4 z-[100] flex h-[62vh] w-[min(480px,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-lg border border-stone-300 bg-[#f6f2eb] text-stone-900 shadow-2xl",
-      style: {
-        fontFamily: "var(--font-ibm-plex-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
-      },
+      style: { fontFamily: OVERLAY_FONT_FAMILY },
       children: [
-        /* @__PURE__ */ jsx3("header", { className: "border-b border-stone-300 bg-[#f3eee5] p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          isAuthenticated ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx3(
-              "span",
-              {
-                className: `rounded border px-1.5 py-0.5 text-[10px] font-medium leading-4 ${publishState === "Published" ? "border-stone-300 bg-[#ece5d9] text-stone-600" : "border-stone-500 bg-[#ded4c3] text-stone-800"}`,
-                children: publishState
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                className: "rounded border border-stone-700 bg-stone-800 px-2 py-1 text-[11px] font-semibold leading-4 text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
-                onClick: onPublish,
-                disabled: !isAuthenticated,
-                children: "Publish"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-md border border-stone-300 bg-[#e8dfd1] p-0.5", children: [
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  className: `rounded px-2 py-1 text-[11px] font-medium leading-4 ${activeTab === "chat" ? "bg-[#f7f2e8] text-stone-900 shadow-sm" : "text-stone-600 hover:text-stone-900"}`,
-                  onClick: () => setActiveTab("chat"),
-                  children: "Chat"
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: `rounded px-2 py-1 text-[11px] font-medium leading-4 ${activeTab === "history" ? "bg-[#f7f2e8] text-stone-900 shadow-sm" : "text-stone-600 hover:text-stone-900"}`,
-                  onClick: () => setActiveTab("history"),
-                  children: [
-                    "History (",
-                    history.published.length + history.checkpoints.length,
-                    ")"
-                  ]
-                }
-              )
-            ] })
-          ] }) : /* @__PURE__ */ jsx3("h2", { className: "text-[12px] font-semibold text-stone-700", children: "Login" }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
-            isAuthenticated ? /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Clear chat",
-                title: "Clear chat",
-                disabled: sending || messages.length === 0 && !message.trim() && !selectedElement,
-                className: "inline-flex h-6 w-6 items-center justify-center rounded border border-stone-300 text-stone-600 hover:bg-[#efe8dc] hover:text-stone-800 disabled:cursor-not-allowed disabled:opacity-50",
-                onClick: onClearChat,
-                children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3.5 w-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
-                  "path",
-                  {
-                    d: "M4.5 5.5H15.5M8 3.75H12M7 7.5V13.5M10 7.5V13.5M13 7.5V13.5M6.5 5.5L7 15C7.03 15.6 7.53 16.08 8.13 16.08H11.87C12.47 16.08 12.97 15.6 13 15L13.5 5.5",
-                    stroke: "currentColor",
-                    strokeWidth: "1.4",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
-              }
-            ) : null,
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                className: "rounded border border-stone-300 px-2 py-1 text-[11px] leading-4 text-stone-700 hover:bg-[#efe8dc]",
-                onClick: () => setIsOpen(false),
-                children: "Close"
-              }
-            )
-          ] })
-        ] }) }),
-        !isAuthenticated ? /* @__PURE__ */ jsx3("section", { className: "flex min-h-0 flex-1 items-center justify-center bg-[#ece7dd] p-3", children: !authConfigured ? /* @__PURE__ */ jsx3("div", { className: "w-full max-w-sm rounded border border-red-300 bg-[#f8f3e9] p-3 text-[11px] leading-4 text-red-700", children: "Missing Supabase config (`supabaseUrl` / `supabaseAnonKey`)." }) : /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm rounded border border-stone-300 bg-[#f8f3e9] p-3", children: [
-          /* @__PURE__ */ jsx3("h3", { className: "mb-2 text-[12px] font-semibold text-stone-700", children: "Sign in" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx3(
-              "input",
-              {
-                type: "text",
-                value: email,
-                onChange: (event) => setEmail(event.target.value),
-                placeholder: "login",
-                className: "w-full rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] text-stone-900 outline-none focus:border-stone-500"
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "input",
-              {
-                type: "password",
-                value: password,
-                onChange: (event) => setPassword(event.target.value),
-                placeholder: "Password",
-                className: "w-full rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] text-stone-900 outline-none focus:border-stone-500"
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: signInWithPassword,
-                disabled: signingIn || !email.trim() || !password,
-                className: "w-full rounded border border-stone-700 bg-stone-800 px-2 py-1.5 text-[12px] font-medium text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
-                children: signingIn ? "Signing in" : "Sign in"
-              }
-            )
-          ] })
-        ] }) }) : activeTab === "chat" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("section", { className: "flex-1 space-y-1 overflow-auto bg-[#ece7dd] p-2", children: [
-            messages.map((entry) => {
-              const isAssistant = entry.role === "assistant";
-              const isPendingAssistant = isAssistant && entry.status === "pending";
-              return /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: entry.role === "tool" ? "max-w-[96%] px-0.5 py-0 text-[10px] leading-tight text-stone-500" : `max-w-[92%] rounded-md py-1.5 text-[12px] leading-4 ${entry.role === "user" ? "ml-auto bg-[#2e2b27] px-2 text-stone-50" : entry.role === "thinking" ? "bg-[#e3dbce] px-2 text-stone-700" : isAssistant ? "relative border border-[#d6ccbb] bg-[#f8f3e9] pl-8 pr-2 text-stone-800" : "bg-[#ddd2bf] px-2 text-stone-800"}`,
-                  children: entry.role === "tool" ? /* @__PURE__ */ jsx3("span", { children: entry.text }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    isAssistant ? showAssistantAvatarImage ? /* @__PURE__ */ jsx3(
-                      "img",
-                      {
-                        src: config.assistantAvatarUrl,
-                        alt: "",
-                        "aria-hidden": "true",
-                        className: `pointer-events-none absolute left-2 top-1.5 h-[18px] w-[18px] select-none rounded-full border border-[#d6ccbb] bg-[#efe8dc] object-cover ${isPendingAssistant ? "animate-pulse" : ""}`,
-                        onError: () => setAssistantAvatarFailed(true)
-                      }
-                    ) : /* @__PURE__ */ jsx3(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: `pointer-events-none absolute left-2 top-1.5 inline-flex h-[18px] w-[18px] select-none items-center justify-center rounded-full border border-[#d6ccbb] bg-[#efe8dc] text-[9px] font-semibold text-stone-700 ${isPendingAssistant ? "animate-pulse" : ""}`,
-                        children: assistantAvatarFallbackLabel
-                      }
-                    ) : null,
-                    /* @__PURE__ */ jsx3("div", { className: "max-w-none text-inherit [&_code]:rounded [&_code]:bg-stone-900/10 [&_code]:px-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_p]:mb-1 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-4", children: isPendingAssistant && !entry.text.trim() ? /* @__PURE__ */ jsx3("span", { className: "block h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx3(ReactMarkdown, { remarkPlugins: [remarkGfm], children: entry.text }) })
-                  ] })
-                },
-                entry.id
+        /* @__PURE__ */ jsx4(
+          OverlayHeader,
+          {
+            isAuthenticated: controller.isAuthenticated,
+            publishState: controller.publishState,
+            activeTab: controller.activeTab,
+            historyCount: controller.history.published.length + controller.history.checkpoints.length,
+            clearChatDisabled: controller.clearChatDisabled,
+            onPublish: () => {
+              void controller.onPublish();
+            },
+            onTabChange: controller.setActiveTab,
+            onClearChat: controller.onClearChat,
+            onClose: () => controller.setIsOpen(false)
+          }
+        ),
+        !controller.isAuthenticated ? /* @__PURE__ */ jsx4(
+          OverlayLoginPanel,
+          {
+            authConfigured: controller.authConfigured,
+            email: controller.email,
+            password: controller.password,
+            signingIn: controller.signingIn,
+            onEmailChange: controller.setEmail,
+            onPasswordChange: controller.setPassword,
+            onSignIn: () => {
+              void controller.signInWithPassword();
+            }
+          }
+        ) : controller.activeTab === "chat" ? /* @__PURE__ */ jsx4(
+          OverlayChatPanel,
+          {
+            messages: controller.messages,
+            chatEndRef: controller.chatEndRef,
+            showAssistantAvatarImage: controller.showAssistantAvatarImage,
+            assistantAvatarUrl: controller.assistantAvatarUrl,
+            assistantAvatarFallbackLabel: controller.assistantAvatarFallbackLabel,
+            onAssistantAvatarError: () => controller.setAssistantAvatarFailed(true),
+            showModelPicker: controller.showModelPicker,
+            selectableModels: controller.selectableModels,
+            modelId: controller.modelId,
+            sending: controller.sending,
+            onModelChange: controller.setModelId,
+            selectedElement: controller.selectedElement,
+            onClearSelectedElement: controller.clearSelectedElement,
+            message: controller.message,
+            onMessageChange: controller.setMessage,
+            onMessageKeyDown: controller.onMessageKeyDown,
+            onSend: () => {
+              void controller.onSend();
+            },
+            isAuthenticated: controller.isAuthenticated
+          }
+        ) : /* @__PURE__ */ jsx4(
+          OverlayHistoryPanel,
+          {
+            history: controller.history,
+            deletingCheckpointId: controller.deletingCheckpointId,
+            onRestorePublished: (item) => {
+              void controller.onRollback(
+                { sourceType: "published", sourceId: item.id },
+                `published snapshot at ${formatHistoryTime(item.createdAt)}`
               );
-            }),
-            /* @__PURE__ */ jsx3("div", { ref: chatEndRef })
-          ] }),
-          /* @__PURE__ */ jsxs("footer", { className: "border-t border-stone-300 bg-[#f3eee5] p-2", children: [
-            showModelPicker && selectableModels.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx3(
-                "label",
-                {
-                  htmlFor: "admin-model-picker",
-                  className: "text-[10px] font-semibold uppercase tracking-wide text-stone-600",
-                  children: "Model"
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "select",
-                {
-                  id: "admin-model-picker",
-                  value: modelId ?? selectableModels[0]?.id,
-                  onChange: (event) => setModelId(event.target.value),
-                  disabled: sending,
-                  className: "h-7 min-w-0 flex-1 rounded border border-stone-300 bg-[#f7f2e8] px-2 text-[11px] text-stone-800 outline-none focus:border-stone-500 disabled:cursor-not-allowed disabled:opacity-60",
-                  children: selectableModels.map((option) => /* @__PURE__ */ jsx3("option", { value: option.id, children: option.label }, option.id))
-                }
-              )
-            ] }) : null,
-            selectedElement ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1 rounded border border-stone-300 bg-[#e8dfd1] px-1.5 py-1", children: [
-              /* @__PURE__ */ jsx3("span", { className: "inline-flex shrink-0 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] px-1 py-0.5 text-[9px] font-semibold text-stone-700", children: kindIcon(selectedElement.kind) }),
-              /* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 truncate text-[10px] leading-3.5 text-stone-600", children: [
-                /* @__PURE__ */ jsx3("span", { className: "font-semibold text-stone-800", children: selectedElement.label }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  " \xB7 ",
-                  selectedElement.path
-                ] }),
-                selectedElement.preview ? /* @__PURE__ */ jsxs("span", { children: [
-                  " \xB7 ",
-                  selectedElement.preview
-                ] }) : null
-              ] }),
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Clear selected element",
-                  title: "Clear selected element",
-                  className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] text-stone-700 hover:bg-[#efe8dc]",
-                  onClick: clearSelectedElement,
-                  children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3 w-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
-                    "path",
-                    {
-                      d: "M5 5L15 15M15 5L5 15",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round"
-                    }
-                  ) })
-                }
-              )
-            ] }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-              /* @__PURE__ */ jsx3(
-                "textarea",
-                {
-                  value: message,
-                  onChange: (event) => setMessage(event.target.value),
-                  onKeyDown: onMessageKeyDown,
-                  rows: 2,
-                  placeholder: "Ask the agent to edit text, image URLs, or theme tokens",
-                  className: "flex-1 resize-none rounded border border-stone-300 bg-[#f4efe6] px-2 py-1.5 text-[12px] leading-4 text-stone-900 outline-none placeholder:text-stone-500 focus:border-stone-500"
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  onClick: onSend,
-                  disabled: !isAuthenticated || sending || !message.trim(),
-                  className: "rounded border border-stone-500 bg-stone-600 px-3 py-1.5 text-[12px] font-semibold text-stone-100 hover:bg-stone-700 disabled:cursor-not-allowed disabled:opacity-50",
-                  children: sending ? "Sending" : "Send"
-                }
-              )
-            ] })
-          ] })
-        ] }) : /* @__PURE__ */ jsx3("section", { className: "flex min-h-0 flex-1 flex-col p-2 text-[11px] leading-4", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs("div", { className: "rounded border border-stone-300 bg-[#f8f3e9]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "border-b border-stone-200 px-2 py-1 font-semibold text-stone-700", children: [
-              "Published (",
-              history.published.length,
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx3("div", { className: "max-h-40 overflow-auto px-2 py-1.5", children: history.published.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: history.published.map((item) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between gap-2 rounded border border-stone-200 bg-[#f2ecdf] px-2 py-1",
-                children: [
-                  /* @__PURE__ */ jsx3("span", { className: "truncate text-[10px] text-stone-700", children: formatHistoryTime(item.createdAt) }),
-                  /* @__PURE__ */ jsx3(
-                    "button",
-                    {
-                      type: "button",
-                      className: "rounded border border-stone-300 bg-[#f7f2e8] px-1.5 py-0.5 text-[10px] text-stone-700 hover:bg-[#efe8dc]",
-                      onClick: () => onRollback(
-                        { sourceType: "published", sourceId: item.id },
-                        `published snapshot at ${formatHistoryTime(item.createdAt)}`
-                      ),
-                      children: "Restore"
-                    }
-                  )
-                ]
-              },
-              `pub-${item.id}`
-            )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No published snapshots." }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col rounded border border-stone-300 bg-[#f8f3e9]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "border-b border-stone-200 px-2 py-1 font-semibold text-stone-700", children: [
-              "Checkpoints (",
-              history.checkpoints.length,
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 overflow-auto px-2 py-1.5", children: history.checkpoints.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: history.checkpoints.map((item) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-start justify-between gap-2 rounded border border-stone-200 bg-[#f2ecdf] px-2 py-1",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx3("p", { className: "truncate text-[10px] text-stone-700", children: formatHistoryTime(item.createdAt) }),
-                    item.reason ? /* @__PURE__ */ jsx3("p", { className: "truncate text-[10px] text-stone-500", children: item.reason }) : null
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx3(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: deletingCheckpointId === item.id,
-                        className: "rounded border border-stone-300 bg-[#f7f2e8] px-1.5 py-0.5 text-[10px] text-stone-700 hover:bg-[#efe8dc] disabled:cursor-not-allowed disabled:opacity-50",
-                        onClick: () => onRollback(
-                          { sourceType: "checkpoint", sourceId: item.id },
-                          `checkpoint at ${formatHistoryTime(item.createdAt)}`
-                        ),
-                        children: "Restore"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx3(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": "Delete checkpoint",
-                        title: "Delete checkpoint",
-                        disabled: deletingCheckpointId === item.id,
-                        className: "inline-flex h-6 w-6 items-center justify-center rounded border border-stone-300 bg-[#f7f2e8] text-stone-700 hover:bg-[#efe8dc] disabled:cursor-not-allowed disabled:opacity-50",
-                        onClick: () => {
-                          void onDeleteCheckpoint(item);
-                        },
-                        children: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-3.5 w-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
-                          "path",
-                          {
-                            d: "M4.5 5.5H15.5M8 3.75H12M7 7.5V13.5M10 7.5V13.5M13 7.5V13.5M6.5 5.5L7 15C7.03 15.6 7.53 16.08 8.13 16.08H11.87C12.47 16.08 12.97 15.6 13 15L13.5 5.5",
-                            stroke: "currentColor",
-                            strokeWidth: "1.4",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
-                          }
-                        ) })
-                      }
-                    )
-                  ] })
-                ]
-              },
-              `cp-${item.id}`
-            )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No checkpoints yet." }) })
-          ] })
-        ] }) })
+            },
+            onRestoreCheckpoint: (item) => {
+              void controller.onRollback(
+                { sourceType: "checkpoint", sourceId: item.id },
+                `checkpoint at ${formatHistoryTime(item.createdAt)}`
+              );
+            },
+            onDeleteCheckpoint: (item) => {
+              void controller.onDeleteCheckpoint(item);
+            }
+          }
+        )
       ]
     }
-  ) : /* @__PURE__ */ jsx3(
-    "button",
-    {
-      type: "button",
-      onClick: () => setIsOpen(true),
-      className: "fixed bottom-4 right-4 z-[100] rounded-full border border-stone-600 bg-stone-700 px-4 py-2 text-[12px] font-semibold text-stone-100 shadow-xl hover:bg-stone-800",
-      style: {
-        fontFamily: "var(--font-ibm-plex-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
-      },
-      children: "Chat to Webmaster"
-    }
-  ) });
+  ) : /* @__PURE__ */ jsx4(OverlayLauncherButton, { onOpen: () => controller.setIsOpen(true) }) });
 }
 
 // src/runtime.tsx
@@ -1484,7 +1735,10 @@ import {
   useMemo as useMemo3,
   useState as useState3
 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import {
+  createDefaultCmsDocument
+} from "@webmaster-droid/contracts";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var CmsRuntimeContext = createContext3(null);
 function createThemeCssVariables(tokens) {
   return {
@@ -1499,6 +1753,10 @@ function createThemeCssVariables(tokens) {
 }
 function CmsRuntimeBridge(props) {
   const { config, isAdminMode, isAuthenticated, token, refreshKey } = useWebmasterDroid();
+  const defaultDocument = useMemo3(
+    () => props.fallbackDocument ?? createDefaultCmsDocument(),
+    [props.fallbackDocument]
+  );
   const stage = useMemo3(
     () => isAdminMode && isAuthenticated ? "draft" : "live",
     [isAdminMode, isAuthenticated]
@@ -1509,7 +1767,7 @@ function CmsRuntimeBridge(props) {
   );
   const [state, setState] = useState3({
     requestKey: "",
-    document: props.fallbackDocument,
+    document: defaultDocument,
     error: null
   });
   useEffect3(() => {
@@ -1530,14 +1788,14 @@ function CmsRuntimeBridge(props) {
       const message = error2 instanceof Error ? error2.message : "Failed to load content.";
       setState({
         requestKey,
-        document: props.fallbackDocument,
+        document: defaultDocument,
         error: message
       });
     });
     return () => {
       ignore = true;
     };
-  }, [config.apiBaseUrl, props.fallbackDocument, requestKey, stage, token]);
+  }, [config.apiBaseUrl, defaultDocument, requestKey, stage, token]);
   const loading = state.requestKey !== requestKey;
   const error = loading ? null : state.error;
   const value = useMemo3(
@@ -1549,14 +1807,14 @@ function CmsRuntimeBridge(props) {
     }),
     [error, loading, stage, state.document]
   );
-  const content = props.applyThemeTokens ? /* @__PURE__ */ jsx4("div", { style: createThemeCssVariables(value.document.themeTokens), children: props.children }) : props.children;
-  return /* @__PURE__ */ jsxs2(CmsRuntimeContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx4(EditableProvider, { document: value.document, mode: stage, enabled: isAdminMode, children: content }),
-    props.includeOverlay ? /* @__PURE__ */ jsx4(WebmasterDroidOverlay, {}) : null
+  const content = props.applyThemeTokens ? /* @__PURE__ */ jsx5("div", { style: createThemeCssVariables(value.document.themeTokens), children: props.children }) : props.children;
+  return /* @__PURE__ */ jsxs3(CmsRuntimeContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx5(EditableProvider, { document: value.document, mode: stage, enabled: isAdminMode, children: content }),
+    props.includeOverlay ? /* @__PURE__ */ jsx5(WebmasterDroidOverlay, {}) : null
   ] });
 }
 function WebmasterDroidRuntime(props) {
-  return /* @__PURE__ */ jsx4(WebmasterDroidProvider, { config: props.config, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(WebmasterDroidProvider, { config: props.config, children: /* @__PURE__ */ jsx5(
     CmsRuntimeBridge,
     {
       fallbackDocument: props.fallbackDocument,