@webmaster-droid/web 0.1.0 → 0.2.0

package/dist/index.js

@@ -197,7 +197,7 @@ function parseSelectedEditableFromTarget(target, pagePath) {
   }
   return selected;
 }
-function pickStringValue(document2, path, fallback, componentName, fallbackPropName) {
+function pickStringValue(document2, path, fallback, componentName, fallbackPropName, missingBehavior = "throw") {
   const value = readByPath(document2, path);
   if (typeof value === "string" && value.trim()) {
     return value;
@@ -205,9 +205,12 @@ function pickStringValue(document2, path, fallback, componentName, fallbackPropN
   if (typeof fallback === "string") {
     return fallback;
   }
-  throw new Error(
-    `${componentName} missing content for "${path}". Provide a CMS value or set \`${fallbackPropName}\`.`
-  );
+  const message = `${componentName} missing content for "${path}". Provide a CMS value or set \`${fallbackPropName}\`.`;
+  if (missingBehavior === "empty") {
+    console.error(message);
+    return "";
+  }
+  throw new Error(message);
 }
 function sanitizeRichTextHtml(html) {
   return sanitizeHtml(html, {
@@ -229,7 +232,7 @@ function EditableText({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const value = pickStringValue(document2, path, fallback, "EditableText", "fallback");
+  const value = pickStringValue(document2, path, fallback, "EditableText", "fallback", "empty");
   const attrs = enabled ? editableMeta({
     path,
     label: label ?? path,
@@ -247,7 +250,14 @@ function EditableRichText({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const value = pickStringValue(document2, path, fallback, "EditableRichText", "fallback");
+  const value = pickStringValue(
+    document2,
+    path,
+    fallback,
+    "EditableRichText",
+    "fallback",
+    "empty"
+  );
   const sanitizedHtml = sanitizeRichTextHtml(value);
   const attrs = enabled ? editableMeta({
     path,
@@ -270,8 +280,22 @@ function EditableImage({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const src = pickStringValue(document2, path, fallbackSrc, "EditableImage", "fallbackSrc");
-  const alt = altPath ? pickStringValue(document2, altPath, fallbackAlt, "EditableImage", "fallbackAlt") : fallbackAlt ?? "";
+  const src = pickStringValue(
+    document2,
+    path,
+    fallbackSrc,
+    "EditableImage",
+    "fallbackSrc",
+    "empty"
+  );
+  const alt = altPath ? pickStringValue(
+    document2,
+    altPath,
+    fallbackAlt,
+    "EditableImage",
+    "fallbackAlt",
+    "empty"
+  ) : fallbackAlt ?? "";
   const attrs = enabled ? editableMeta({
     path,
     label: label ?? path,
@@ -290,13 +314,21 @@ function EditableLink({
   ...rest
 }) {
   const { document: document2, enabled } = useEditableDocument();
-  const href = pickStringValue(document2, hrefPath, fallbackHref, "EditableLink", "fallbackHref");
+  const href = pickStringValue(
+    document2,
+    hrefPath,
+    fallbackHref,
+    "EditableLink",
+    "fallbackHref",
+    "empty"
+  );
   const text = pickStringValue(
     document2,
     labelPath,
     fallbackLabel,
     "EditableLink",
-    "fallbackLabel"
+    "fallbackLabel",
+    "empty"
   );
   const attrs = enabled ? editableMeta({
     path: labelPath,
@@ -610,6 +642,13 @@ function getSupabaseBrowserClient(config) {
 // src/context.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var WebmasterDroidContext = createContext2(null);
+var DEFAULT_MODEL_CAPABILITIES = {
+  contentEdit: true,
+  themeTokenEdit: true,
+  imageGenerate: false,
+  imageEdit: false,
+  visionAssist: false
+};
 function WebmasterDroidProvider(props) {
   const resolvedConfig = useMemo(
     () => resolveWebmasterDroidConfig(props.config),
@@ -641,6 +680,9 @@ function WebmasterDroidProvider(props) {
   const [modelId, setModelId] = useState(null);
   const [showModelPickerState, setShowModelPickerState] = useState(false);
   const [modelOptions, setModelOptions] = useState([]);
+  const [capabilities, setCapabilities] = useState(
+    DEFAULT_MODEL_CAPABILITIES
+  );
   const [includeThinking, setIncludeThinking] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const [selectedElement, setSelectedElement] = useState(null);
@@ -675,6 +717,7 @@ function WebmasterDroidProvider(props) {
       const preferredDefault = options.some((option) => option.id === models.defaultModelId) ? models.defaultModelId : options[0]?.id ?? models.defaultModelId;
       setShowModelPickerState(models.showModelPicker);
       setModelOptions(options);
+      setCapabilities(models.capabilities ?? DEFAULT_MODEL_CAPABILITIES);
       setModelId((current) => {
         if (current && options.some((option) => option.id === current)) {
           return current;
@@ -685,6 +728,7 @@ function WebmasterDroidProvider(props) {
       if (!ignore) {
         setShowModelPickerState(false);
         setModelOptions([]);
+        setCapabilities(DEFAULT_MODEL_CAPABILITIES);
         setModelId((current) => current ?? resolvedConfig.defaultModelId);
       }
     });
@@ -705,6 +749,7 @@ function WebmasterDroidProvider(props) {
       setModelId,
       showModelPicker,
       modelOptions,
+      capabilities,
       includeThinking,
       setIncludeThinking,
       refreshKey,
@@ -721,6 +766,7 @@ function WebmasterDroidProvider(props) {
       modelId,
       showModelPicker,
       modelOptions,
+      capabilities,
       includeThinking,
       refreshKey,
       authConfigured,
@@ -737,6 +783,9 @@ function useWebmasterDroid() {
   return context;
 }
 
+// src/overlay.tsx
+import { useEffect as useEffect3 } from "react";
+
 // src/overlay/utils.ts
 function createMessage(role, text, status) {
   return {
@@ -831,6 +880,84 @@ var OVERLAY_FONT_FAMILY = "var(--font-ibm-plex-mono), ui-monospace, SFMono-Regul
 // src/overlay/components.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+
+// src/overlay/class-names.ts
+var OVERLAY_CLASS_NAMES = {
+  panel: "wmd-panel",
+  launcherButton: "wmd-launcher",
+  header: "wmd-header",
+  headerRow: "wmd-header-row",
+  publishState: "wmd-publish-state",
+  publishStatePublished: "wmd-publish-state--published",
+  publishStateUnpublished: "wmd-publish-state--unpublished",
+  publishButton: "wmd-publish-button",
+  tabs: "wmd-tabs",
+  tabButton: "wmd-tab-button",
+  tabButtonActive: "wmd-tab-button--active",
+  loginTitle: "wmd-login-title",
+  headerActions: "wmd-header-actions",
+  iconButton: "wmd-icon-button",
+  icon: "wmd-icon",
+  closeButton: "wmd-close-button",
+  loginSection: "wmd-login-section",
+  loginWarning: "wmd-login-warning",
+  loginCard: "wmd-login-card",
+  loginHeading: "wmd-login-heading",
+  loginFields: "wmd-login-fields",
+  fieldInput: "wmd-field-input",
+  primaryButton: "wmd-primary-button",
+  chatSection: "wmd-chat-section",
+  message: "wmd-message",
+  messageTool: "wmd-message--tool",
+  messageUser: "wmd-message--user",
+  messageThinking: "wmd-message--thinking",
+  messageAssistant: "wmd-message--assistant",
+  messageFallback: "wmd-message--fallback",
+  assistantAvatar: "wmd-assistant-avatar",
+  assistantAvatarFallback: "wmd-assistant-avatar-fallback",
+  assistantAvatarPending: "wmd-assistant-avatar--pending",
+  markdownContent: "wmd-markdown-content",
+  pendingShim: "wmd-pending-shim",
+  footer: "wmd-footer",
+  modelRow: "wmd-model-row",
+  modelLabel: "wmd-model-label",
+  modelSelect: "wmd-model-select",
+  selectedElement: "wmd-selected-element",
+  selectedKind: "wmd-selected-kind",
+  selectedText: "wmd-selected-text",
+  selectedLabel: "wmd-selected-label",
+  selectedClearButton: "wmd-selected-clear",
+  selectedClearIcon: "wmd-selected-clear-icon",
+  composerRow: "wmd-composer-row",
+  composerInput: "wmd-composer-input",
+  sendButton: "wmd-send-button",
+  historySection: "wmd-history-section",
+  historyColumns: "wmd-history-columns",
+  historyCard: "wmd-history-card",
+  historyCardTitle: "wmd-history-card-title",
+  historyList: "wmd-history-list",
+  historyStack: "wmd-history-stack",
+  historyItem: "wmd-history-item",
+  historyItemCheckpoint: "wmd-history-item--checkpoint",
+  historyTextBlock: "wmd-history-text",
+  historyTimestamp: "wmd-history-timestamp",
+  historyReason: "wmd-history-reason",
+  historyActions: "wmd-history-actions",
+  historyAction: "wmd-history-action",
+  historyDelete: "wmd-history-delete",
+  emptyText: "wmd-empty-text"
+};
+function overlayClass(slot, className) {
+  if (!className) {
+    return OVERLAY_CLASS_NAMES[slot];
+  }
+  return `${OVERLAY_CLASS_NAMES[slot]} ${className}`;
+}
+function joinClassNames(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/overlay/components.tsx
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function OverlayHeader({
   isAuthenticated,
@@ -843,12 +970,15 @@ function OverlayHeader({
   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: [
+  return /* @__PURE__ */ jsx3("header", { className: overlayClass("header", "border-b border-stone-300 bg-[#f3eee5] p-2"), children: /* @__PURE__ */ jsxs("div", { className: overlayClass("headerRow", "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"}`,
+          className: joinClassNames(
+            overlayClass("publishState", "rounded border px-1.5 py-0.5 text-[10px] font-medium leading-4"),
+            publishState === "Published" ? overlayClass("publishStatePublished", "border-stone-300 bg-[#ece5d9] text-stone-600") : overlayClass("publishStateUnpublished", "border-stone-500 bg-[#ded4c3] text-stone-800")
+          ),
           children: publishState
         }
       ),
@@ -856,18 +986,24 @@ function OverlayHeader({
         "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",
+          className: overlayClass(
+            "publishButton",
+            "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__ */ jsxs("div", { className: overlayClass("tabs", "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"}`,
+            className: joinClassNames(
+              overlayClass("tabButton", "rounded px-2 py-1 text-[11px] font-medium leading-4"),
+              activeTab === "chat" ? overlayClass("tabButtonActive", "bg-[#f7f2e8] text-stone-900 shadow-sm") : "text-stone-600 hover:text-stone-900"
+            ),
             onClick: () => onTabChange("chat"),
             children: "Chat"
           }
@@ -876,7 +1012,10 @@ function OverlayHeader({
           "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"}`,
+            className: joinClassNames(
+              overlayClass("tabButton", "rounded px-2 py-1 text-[11px] font-medium leading-4"),
+              activeTab === "history" ? overlayClass("tabButtonActive", "bg-[#f7f2e8] text-stone-900 shadow-sm") : "text-stone-600 hover:text-stone-900"
+            ),
             onClick: () => onTabChange("history"),
             children: [
               "History (",
@@ -886,8 +1025,8 @@ function OverlayHeader({
           }
         )
       ] })
-    ] }) : /* @__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: [
+    ] }) : /* @__PURE__ */ jsx3("h2", { className: overlayClass("loginTitle", "text-[12px] font-semibold text-stone-700"), children: "Login" }),
+    /* @__PURE__ */ jsxs("div", { className: overlayClass("headerActions", "ml-auto flex items-center gap-1"), children: [
       isAuthenticated ? /* @__PURE__ */ jsx3(
         "button",
         {
@@ -895,25 +1034,40 @@ function OverlayHeader({
           "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",
+          className: overlayClass(
+            "iconButton",
+            "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",
+          children: /* @__PURE__ */ jsx3(
+            "svg",
             {
-              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"
+              viewBox: "0 0 20 20",
+              fill: "none",
+              className: overlayClass("icon", "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]",
+          className: overlayClass(
+            "closeButton",
+            "rounded border border-stone-300 px-2 py-1 text-[11px] leading-4 text-stone-700 hover:bg-[#efe8dc]"
+          ),
           onClick: onClose,
           children: "Close"
         }
@@ -930,41 +1084,68 @@ function OverlayLoginPanel({
   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"
-        }
+  return /* @__PURE__ */ jsx3(
+    "section",
+    {
+      className: overlayClass(
+        "loginSection",
+        "flex min-h-0 flex-1 items-center justify-center bg-[#ece7dd] p-3"
       ),
-      /* @__PURE__ */ jsx3(
-        "button",
+      children: !authConfigured ? /* @__PURE__ */ jsx3(
+        "div",
         {
-          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"
+          className: overlayClass(
+            "loginWarning",
+            "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: overlayClass("loginCard", "w-full max-w-sm rounded border border-stone-300 bg-[#f8f3e9] p-3"), children: [
+        /* @__PURE__ */ jsx3("h3", { className: overlayClass("loginHeading", "mb-2 text-[12px] font-semibold text-stone-700"), children: "Sign in" }),
+        /* @__PURE__ */ jsxs("div", { className: overlayClass("loginFields", "space-y-2"), children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              value: email,
+              onChange: (event) => onEmailChange(event.target.value),
+              placeholder: "login",
+              className: overlayClass(
+                "fieldInput",
+                "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: overlayClass(
+                "fieldInput",
+                "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: overlayClass(
+                "primaryButton",
+                "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,
@@ -987,14 +1168,29 @@ function OverlayChatPanel({
   isAuthenticated
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("section", { className: "flex-1 space-y-1 overflow-auto bg-[#ece7dd] p-2", children: [
+    /* @__PURE__ */ jsxs("section", { className: overlayClass("chatSection", "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"}`,
+            className: joinClassNames(
+              overlayClass("message"),
+              entry.role === "tool" ? overlayClass("messageTool", "max-w-[96%] px-0.5 py-0 text-[10px] leading-tight text-stone-500") : entry.role === "user" ? overlayClass(
+                "messageUser",
+                "ml-auto max-w-[92%] rounded-md bg-[#2e2b27] px-2 py-1.5 text-[12px] leading-4 text-stone-50"
+              ) : entry.role === "thinking" ? overlayClass(
+                "messageThinking",
+                "max-w-[92%] rounded-md bg-[#e3dbce] px-2 py-1.5 text-[12px] leading-4 text-stone-700"
+              ) : isAssistant ? overlayClass(
+                "messageAssistant",
+                "relative max-w-[92%] rounded-md border border-[#d6ccbb] bg-[#f8f3e9] pl-8 pr-2 py-1.5 text-[12px] leading-4 text-stone-800"
+              ) : overlayClass(
+                "messageFallback",
+                "max-w-[92%] rounded-md bg-[#ddd2bf] px-2 py-1.5 text-[12px] leading-4 text-stone-800"
+              )
+            ),
             children: entry.role === "tool" ? /* @__PURE__ */ jsx3("span", { children: entry.text }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               isAssistant ? showAssistantAvatarImage ? /* @__PURE__ */ jsx3(
                 "img",
@@ -1002,18 +1198,39 @@ function OverlayChatPanel({
                   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" : ""}`,
+                  className: joinClassNames(
+                    overlayClass(
+                      "assistantAvatar",
+                      "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 ? overlayClass("assistantAvatarPending", "animate-pulse") : null
+                  ),
                   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" : ""}`,
+                  className: joinClassNames(
+                    overlayClass(
+                      "assistantAvatarFallback",
+                      "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 ? overlayClass("assistantAvatarPending", "animate-pulse") : null
+                  ),
                   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 }) })
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: overlayClass(
+                    "markdownContent",
+                    "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: overlayClass("pendingShim", "block h-4"), "aria-hidden": "true" }) : /* @__PURE__ */ jsx3(ReactMarkdown, { remarkPlugins: [remarkGfm], children: entry.text })
+                }
+              )
             ] })
           },
           entry.id
@@ -1021,13 +1238,13 @@ function OverlayChatPanel({
       }),
       /* @__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__ */ jsxs("footer", { className: overlayClass("footer", "border-t border-stone-300 bg-[#f3eee5] p-2"), children: [
+      showModelPicker && selectableModels.length > 1 ? /* @__PURE__ */ jsxs("div", { className: overlayClass("modelRow", "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",
+            className: overlayClass("modelLabel", "text-[10px] font-semibold uppercase tracking-wide text-stone-600"),
             children: "Model"
           }
         ),
@@ -1038,45 +1255,78 @@ function OverlayChatPanel({
             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",
+            className: overlayClass(
+              "modelSelect",
+              "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",
+      selectedElement ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: overlayClass(
+            "selectedElement",
+            "mb-1 flex items-center gap-1 rounded border border-stone-300 bg-[#e8dfd1] px-1.5 py-1"
+          ),
+          children: [
+            /* @__PURE__ */ jsx3(
+              "span",
               {
-                d: "M5 5L15 15M15 5L5 15",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round"
+                className: overlayClass(
+                  "selectedKind",
+                  "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)
               }
-            ) })
-          }
-        )
-      ] }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            ),
+            /* @__PURE__ */ jsxs("p", { className: overlayClass("selectedText", "min-w-0 flex-1 truncate text-[10px] leading-3.5 text-stone-600"), children: [
+              /* @__PURE__ */ jsx3("span", { className: overlayClass("selectedLabel", "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: overlayClass(
+                  "selectedClearButton",
+                  "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: overlayClass("selectedClearIcon", "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: overlayClass("composerRow", "flex gap-1.5"), children: [
         /* @__PURE__ */ jsx3(
           "textarea",
           {
@@ -1085,7 +1335,10 @@ function OverlayChatPanel({
             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"
+            className: overlayClass(
+              "composerInput",
+              "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(
@@ -1094,7 +1347,10 @@ function OverlayChatPanel({
             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",
+            className: overlayClass(
+              "sendButton",
+              "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"
           }
         )
@@ -1109,24 +1365,30 @@ function OverlayHistoryPanel({
   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: [
+  return /* @__PURE__ */ jsx3("section", { className: overlayClass("historySection", "flex min-h-0 flex-1 flex-col p-2 text-[11px] leading-4"), children: /* @__PURE__ */ jsxs("div", { className: overlayClass("historyColumns", "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden"), children: [
+    /* @__PURE__ */ jsxs("div", { className: overlayClass("historyCard", "rounded border border-stone-300 bg-[#f8f3e9]"), children: [
+      /* @__PURE__ */ jsxs("div", { className: overlayClass("historyCardTitle", "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(
+      /* @__PURE__ */ jsx3("div", { className: overlayClass("historyList", "max-h-40 overflow-auto px-2 py-1.5"), children: history.published.length > 0 ? /* @__PURE__ */ jsx3("div", { className: overlayClass("historyStack", "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",
+          className: overlayClass(
+            "historyItem",
+            "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("span", { className: overlayClass("historyTimestamp", "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]",
+                className: overlayClass(
+                  "historyAction",
+                  "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"
               }
@@ -1134,61 +1396,88 @@ function OverlayHistoryPanel({
           ]
         },
         `pub-${item.id}`
-      )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No published snapshots." }) })
+      )) }) : /* @__PURE__ */ jsx3("p", { className: overlayClass("emptyText", "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__ */ jsxs(
+      "div",
+      {
+        className: overlayClass(
+          "historyCard",
+          "flex min-h-0 flex-1 flex-col rounded border border-stone-300 bg-[#f8f3e9]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: overlayClass("historyCardTitle", "border-b border-stone-200 px-2 py-1 font-semibold text-stone-700"), children: [
+            "Checkpoints (",
+            history.checkpoints.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: overlayClass("historyList", "min-h-0 flex-1 overflow-auto px-2 py-1.5"), children: history.checkpoints.length > 0 ? /* @__PURE__ */ jsx3("div", { className: overlayClass("historyStack", "space-y-1"), children: history.checkpoints.map((item) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: overlayClass(
+                "historyItemCheckpoint",
+                "flex items-start justify-between gap-2 rounded border border-stone-200 bg-[#f2ecdf] px-2 py-1"
               ),
-              /* @__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",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: overlayClass("historyTextBlock", "min-w-0 flex-1"), children: [
+                  /* @__PURE__ */ jsx3("p", { className: overlayClass("historyTimestamp", "truncate text-[10px] text-stone-700"), children: formatHistoryTime(item.createdAt) }),
+                  item.reason ? /* @__PURE__ */ jsx3("p", { className: overlayClass("historyReason", "truncate text-[10px] text-stone-500"), children: item.reason }) : null
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: overlayClass("historyActions", "flex items-center gap-1"), children: [
+                  /* @__PURE__ */ jsx3(
+                    "button",
                     {
-                      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"
+                      type: "button",
+                      disabled: deletingCheckpointId === item.id,
+                      className: overlayClass(
+                        "historyAction",
+                        "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"
                     }
-                  ) })
-                }
-              )
-            ] })
-          ]
-        },
-        `cp-${item.id}`
-      )) }) : /* @__PURE__ */ jsx3("p", { className: "text-[10px] text-stone-500", children: "No checkpoints yet." }) })
-    ] })
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Delete checkpoint",
+                      title: "Delete checkpoint",
+                      disabled: deletingCheckpointId === item.id,
+                      className: overlayClass(
+                        "historyDelete",
+                        "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: overlayClass("icon", "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: overlayClass("emptyText", "text-[10px] text-stone-500"), children: "No checkpoints yet." }) })
+        ]
+      }
+    )
   ] }) });
 }
 function OverlayLauncherButton({ onOpen }) {
@@ -1197,13 +1486,74 @@ function OverlayLauncherButton({ onOpen }) {
     {
       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",
+      className: overlayClass(
+        "launcherButton",
+        "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/core-styles.ts
+var OVERLAY_CORE_STYLE_ID = "wmd-core-styles";
+var OVERLAY_CORE_STYLE_TEXT = `
+.wmd-panel{position:fixed;right:1rem;bottom:1rem;z-index:100;display:flex;flex-direction:column;width:min(480px,calc(100vw - 1.5rem));height:62vh;max-height:calc(100vh - 1.5rem);overflow:hidden;box-sizing:border-box}
+.wmd-panel *{box-sizing:border-box}
+.wmd-launcher{position:fixed;right:1rem;bottom:1rem;z-index:100;box-sizing:border-box}
+.wmd-header{flex-shrink:0}
+.wmd-header-row{display:flex;align-items:center;gap:.5rem}
+.wmd-header-actions{margin-left:auto;display:flex;align-items:center;gap:.25rem}
+.wmd-tabs{display:inline-flex;align-items:center}
+.wmd-login-section{display:flex;flex:1;min-height:0;align-items:center;justify-content:center}
+.wmd-login-card,.wmd-login-warning{width:100%;max-width:24rem}
+.wmd-login-fields{display:flex;flex-direction:column;gap:.5rem}
+.wmd-chat-section{display:flex;flex:1;min-height:0;flex-direction:column;gap:.25rem;overflow:auto}
+.wmd-message--tool{max-width:96%}
+.wmd-message--user,.wmd-message--thinking,.wmd-message--assistant,.wmd-message--fallback{max-width:92%}
+.wmd-message--user{margin-left:auto}
+.wmd-message--assistant{position:relative}
+.wmd-assistant-avatar,.wmd-assistant-avatar-fallback{position:absolute;top:.375rem;left:.5rem;width:18px;height:18px}
+.wmd-assistant-avatar--pending{animation:wmd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
+.wmd-footer{flex-shrink:0}
+.wmd-model-row,.wmd-selected-element,.wmd-composer-row{display:flex;align-items:center;gap:.375rem}
+.wmd-model-select,.wmd-composer-input{min-width:0;flex:1}
+.wmd-composer-input{resize:none}
+.wmd-history-section{display:flex;flex:1;min-height:0;flex-direction:column}
+.wmd-history-columns{display:flex;flex:1;min-height:0;flex-direction:column;gap:.5rem;overflow:hidden}
+.wmd-history-card{display:flex;min-height:0;flex-direction:column}
+.wmd-history-list{overflow:auto}
+.wmd-history-stack{display:flex;flex-direction:column;gap:.25rem}
+.wmd-history-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
+.wmd-history-item--checkpoint{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
+.wmd-history-text{min-width:0;flex:1}
+.wmd-history-actions{display:flex;align-items:center;gap:.25rem}
+.wmd-history-timestamp,.wmd-history-reason,.wmd-selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wmd-icon-button,.wmd-selected-clear,.wmd-history-delete{display:inline-flex;align-items:center;justify-content:center}
+.wmd-icon{width:14px;height:14px}
+.wmd-selected-clear-icon{width:12px;height:12px}
+@media (max-width:640px){.wmd-panel{left:.75rem;right:.75rem;bottom:.75rem;width:auto;height:min(72vh,540px)}}
+@keyframes wmd-pulse{50%{opacity:.5}}
+`.trim();
+function ensureOverlayCoreStyles(doc) {
+  const target = doc ?? (typeof document !== "undefined" ? document : void 0);
+  if (!target) {
+    return;
+  }
+  if (target.getElementById(OVERLAY_CORE_STYLE_ID)) {
+    return;
+  }
+  const mountTarget = target.head ?? target.documentElement;
+  if (!mountTarget) {
+    return;
+  }
+  const styleElement = target.createElement("style");
+  styleElement.id = OVERLAY_CORE_STYLE_ID;
+  styleElement.textContent = OVERLAY_CORE_STYLE_TEXT;
+  mountTarget.appendChild(styleElement);
+}
+
 // src/overlay/controller.ts
 import {
   useCallback,
@@ -1634,8 +1984,14 @@ Reason: ${checkpoint.reason}` : "";
 
 // src/overlay.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function WebmasterDroidOverlay() {
+function WebmasterDroidOverlay({ injectCoreStyles = true }) {
   const controller = useOverlayController();
+  useEffect3(() => {
+    if (!injectCoreStyles) {
+      return;
+    }
+    ensureOverlayCoreStyles();
+  }, [injectCoreStyles]);
   if (!controller.isAdminMode) {
     return null;
   }
@@ -1644,7 +2000,10 @@ function WebmasterDroidOverlay() {
     {
       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",
+      className: overlayClass(
+        "panel",
+        "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: OVERLAY_FONT_FAMILY },
       children: [
         /* @__PURE__ */ jsx4(
@@ -1731,7 +2090,7 @@ function WebmasterDroidOverlay() {
 import {
   createContext as createContext3,
   useContext as useContext3,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useMemo as useMemo3,
   useState as useState3
 } from "react";
@@ -1770,7 +2129,7 @@ function CmsRuntimeBridge(props) {
     document: defaultDocument,
     error: null
   });
-  useEffect3(() => {
+  useEffect4(() => {
     let ignore = false;
     fetchCmsContent(config.apiBaseUrl, stage, token).then((content2) => {
       if (ignore) {
@@ -1810,7 +2169,7 @@ function CmsRuntimeBridge(props) {
   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
+    props.includeOverlay ? /* @__PURE__ */ jsx5(WebmasterDroidOverlay, { injectCoreStyles: props.injectCoreStyles }) : null
   ] });
 }
 function WebmasterDroidRuntime(props) {
@@ -1820,6 +2179,7 @@ function WebmasterDroidRuntime(props) {
       fallbackDocument: props.fallbackDocument,
       includeOverlay: props.includeOverlay ?? true,
       applyThemeTokens: props.applyThemeTokens ?? true,
+      injectCoreStyles: props.injectCoreStyles ?? true,
       children: props.children
     }
   ) });