@pure-ds/core 0.6.9 → 0.6.11

package/public/assets/pds/components/pds-live-edit.js

@@ -96,9 +96,42 @@ const QUICK_STYLE_PROPERTIES = [
   "width",
 ];
 
+const LIVE_EDIT_HIGHLIGHT_BLACKLIST = [
+  {
+    id: "toaster",
+    selector: "pds-toaster",
+    includeDescendants: true,
+  },
+  {
+    id: "live-edit-toggle",
+    selector: "#pds-live-edit-toggle",
+    includeDescendants: true,
+  },
+  {
+    id: "ask-dialog",
+    selector: "dialog",
+    includeDescendants: true,
+  },
+];
+
+function isLiveEditHighlightBlacklisted(node) {
+  if (!(node instanceof Element)) return false;
+  return LIVE_EDIT_HIGHLIGHT_BLACKLIST.some((entry) => {
+    if (!entry?.selector) return false;
+    if (entry.includeDescendants) {
+      return Boolean(node.closest(entry.selector));
+    }
+    return node.matches(entry.selector);
+  });
+}
+
 const INLINE_VAR_REGEX = /var\(\s*(--[^)\s,]+)\s*/g;
 const CUSTOM_PROP_REGEX = /--.+/;
 const COLOR_VALUE_REGEX = /#(?:[0-9a-f]{3,8})\b|rgba?\([^)]*\)|hsla?\([^)]*\)/gi;
+const SHIKI_BUNDLE_URL = "https://esm.sh/shiki@1.29.2?bundle";
+const SETTINGS_ONLY_ATTR = "data-pds-live-settings-only";
+
+let shikiModulePromise = null;
 
 const ENUM_FIELD_OPTIONS = {
   "shape.borderWidth": ["hairline", "thin", "medium", "thick"],
@@ -108,6 +141,47 @@ let cachedTokenIndex = null;
 let cachedTokenIndexMeta = null;
 let colorNormalizer = null;
 
+function escapeHtml(value) {
+  return String(value || "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+async function loadShikiModule() {
+  if (shikiModulePromise) return shikiModulePromise;
+  shikiModulePromise = import(SHIKI_BUNDLE_URL).catch(() => null);
+  return shikiModulePromise;
+}
+
+function resolveShikiTheme() {
+  const isDark =
+    PDS?.theme === "dark" ||
+    document.documentElement.getAttribute("data-theme") === "dark" ||
+    document.documentElement.classList.contains("theme-dark");
+  return isDark ? "github-dark-default" : "github-light-default";
+}
+
+async function renderHtmlWithShiki(code = "") {
+  const fallback = `<pre><code>${escapeHtml(code)}</code></pre>`;
+  const shiki = await loadShikiModule();
+
+  if (!shiki || typeof shiki.codeToHtml !== "function") {
+    return fallback;
+  }
+
+  try {
+    return shiki.codeToHtml(String(code || ""), {
+      lang: "html",
+      theme: resolveShikiTheme(),
+    });
+  } catch (error) {
+    return fallback;
+  }
+}
+
 const GLOBAL_LAYOUT_PATHS = new Set([
   "layout.maxWidth",
   "layout.maxWidths",
@@ -138,6 +212,8 @@ const DARK_MODE_PATH_MARKER = ".darkMode.";
 const QUICK_EDIT_LIMIT = 4;
 const DROPDOWN_VIEWPORT_PADDING = 8;
 const FONT_FAMILY_PATH_REGEX = /^typography\.fontFamily/i;
+const FORM_THEME_CONTEXT_FIELD = "__pdsThemeContext";
+const FORM_THEME_CONTEXT_POINTER = `/${FORM_THEME_CONTEXT_FIELD}`;
 
 function isHoverCapable() {
   if (typeof window === "undefined" || !window.matchMedia) return false;
@@ -188,8 +264,13 @@ ${EDITOR_TAG} {
 .${DROPDOWN_CLASS} menu {
   min-width: max-content;
   max-width: 350px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .${DROPDOWN_CLASS} .pds-live-editor-menu {
+  display: block;
+  background-color: var(--color-surface-base);
   padding: var(--spacing-1);
   max-width: 350px;
   padding-bottom: 0;
@@ -230,8 +311,41 @@ ${EDITOR_TAG} {
   background: var(--color-surface-base);
   position: sticky;
   justify-content: space-between;
+  align-items: center;
+  bottom: 0;
+  z-index: 1;
+}
+.pds-live-editor-drawer-footer {
+  position: sticky;
   bottom: 0;
   z-index: 1;
+  padding-top: var(--spacing-3);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  border-top: var(--border-width-thin) solid var(--color-border);
+  background: var(--color-surface-base);
+}
+.pds-live-editor-drawer-footer > button {
+  width: 100%;
+  justify-content: center;
+}
+.pds-live-editor-drawer-footer .pds-live-editor-reset-btn {
+  color: var(--color-danger-700);
+  border-color: var(--color-danger-700);
+}
+.pds-live-editor-drawer-footer .pds-live-editor-reset-btn:hover,
+.pds-live-editor-drawer-footer .pds-live-editor-reset-btn:focus-visible,
+.pds-live-editor-drawer-footer .pds-live-editor-reset-btn:active {
+  color: var(--color-danger-700);
+  border-color: var(--color-danger-700);
+}
+.pds-live-editor-drawer-content {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: var(--spacing-4);
+}
+.pds-live-editor-drawer-content > .accordion {
+  min-height: 0;
 }
 `;
   document.head.appendChild(style);
@@ -311,6 +425,14 @@ function deepMerge(target = {}, source = {}) {
   return out;
 }
 
+function markNodeTreeAsLiveEditIgnored(node) {
+  if (!(node instanceof Element)) return;
+  node.setAttribute("data-pds-live-edit-ignore", "true");
+  node.querySelectorAll("*").forEach((element) => {
+    element.setAttribute("data-pds-live-edit-ignore", "true");
+  });
+}
+
 function titleize(value) {
   return String(value)
     .replace(/([a-z])([A-Z])/g, "$1 $2")
@@ -589,6 +711,62 @@ function toColorInputValue(value) {
   return hexValue || value;
 }
 
+function isColorPath(path) {
+  return String(path || "").toLowerCase().startsWith("colors.");
+}
+
+function inferColorVariableCandidates(path) {
+  const normalizedPath = String(path || "").toLowerCase();
+  const key = normalizedPath.replace(/^colors\./, "").replace(/^darkmode\./, "");
+  const tail = key.split(".").pop();
+
+  const directMap = {
+    primary: ["--color-primary-500"],
+    secondary: ["--color-secondary-500", "--color-gray-500"],
+    accent: ["--color-accent-500"],
+    background: ["--color-surface-base"],
+    success: ["--color-success-500"],
+    warning: ["--color-warning-500"],
+    danger: ["--color-danger-500"],
+    info: ["--color-info-500"],
+  };
+
+  const candidates = new Set();
+  if (tail && directMap[tail]) {
+    directMap[tail].forEach((item) => candidates.add(item));
+  }
+  if (tail) {
+    candidates.add(`--color-${tail}-500`);
+  }
+
+  return Array.from(candidates);
+}
+
+function resolveColorValueForPath(path, value, hintValue) {
+  if (!isColorPath(path)) return null;
+
+  const fromValue = toColorInputValue(value);
+  if (normalizeHexColor(fromValue)) return fromValue;
+
+  const fromHint = toColorInputValue(hintValue);
+  if (normalizeHexColor(fromHint)) return fromHint;
+
+  if (typeof window === "undefined" || typeof document === "undefined") return null;
+  const root = document.documentElement;
+  if (!root) return null;
+
+  const style = window.getComputedStyle(root);
+  const candidates = inferColorVariableCandidates(path);
+  for (const varName of candidates) {
+    const raw = style.getPropertyValue(varName).trim();
+    if (!raw) continue;
+    const resolved = toColorInputValue(raw);
+    if (normalizeHexColor(resolved)) return resolved;
+  }
+
+  return null;
+}
+
 function getCustomPropertyNames(style) {
   const names = [];
   if (!style) return names;
@@ -929,7 +1107,105 @@ function splitFontFamilyStack(value) {
   return parts;
 }
 
-function getPresetFontFamilyVariations() {
+const GENERIC_FONT_FAMILIES = new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "emoji",
+  "math",
+  "fangsong",
+]);
+
+let loadGoogleFontFnPromise = null;
+let managerModulePromise = null;
+
+function normalizeFontName(fontFamily) {
+  return String(fontFamily || "")
+    .trim()
+    .replace(/^['"]+|['"]+$/g, "")
+    .trim();
+}
+
+function isLikelyLoadableFont(fontFamily) {
+  const normalized = normalizeFontName(fontFamily).toLowerCase();
+  if (!normalized) return false;
+  return !GENERIC_FONT_FAMILIES.has(normalized);
+}
+
+async function getLoadGoogleFontFn() {
+  if (typeof PDS?.loadGoogleFont === "function") {
+    return PDS.loadGoogleFont;
+  }
+  if (loadGoogleFontFnPromise) return loadGoogleFontFnPromise;
+  loadGoogleFontFnPromise = (async () => {
+    const manager = await getPdsManagerModule();
+    if (typeof manager?.loadGoogleFont === "function") {
+      return manager.loadGoogleFont;
+    }
+    return null;
+  })();
+  return loadGoogleFontFnPromise;
+}
+
+async function getPdsManagerModule() {
+  if (managerModulePromise) return managerModulePromise;
+
+  managerModulePromise = (async () => {
+    const candidates = [
+      PDS?.currentConfig?.managerURL,
+      "../core/pds-manager.js",
+      "/assets/pds/core/pds-manager.js",
+    ].filter(Boolean);
+
+    const attempted = new Set();
+    for (const candidate of candidates) {
+      try {
+        const resolved = new URL(candidate, import.meta.url).href;
+        if (attempted.has(resolved)) continue;
+        attempted.add(resolved);
+        const mod = await import(resolved);
+        if (mod && typeof mod === "object") return mod;
+      } catch (e) {}
+    }
+    return null;
+  })();
+
+  return managerModulePromise;
+}
+
+async function loadTypographyFontsForDesign(typography) {
+  if (!typography || typeof typography !== "object") return;
+
+  const loadGoogleFont = await getLoadGoogleFontFn();
+  if (typeof loadGoogleFont !== "function") return;
+
+  const families = [
+    typography.fontFamilyHeadings,
+    typography.fontFamilyBody,
+    typography.fontFamilyMono,
+  ];
+
+  const fontNames = new Set();
+  families.forEach((stack) => {
+    splitFontFamilyStack(stack).forEach((item) => {
+      const fontName = normalizeFontName(item);
+      if (isLikelyLoadableFont(fontName)) {
+        fontNames.add(fontName);
+      }
+    });
+  });
+
+  await Promise.allSettled(Array.from(fontNames).map((name) => loadGoogleFont(name)));
+}
+
+function getPresetFontFamilyVariations(previewFontSize = resolveFontFamilyPreviewFontSize()) {
   const presets = Object.values(PDS?.presets || {});
   const seen = new Set();
   const items = [];
@@ -938,9 +1214,11 @@ function getPresetFontFamilyVariations() {
     if (!normalized || seen.has(normalized)) return;
     seen.add(normalized);
     items.push({
+      //index: items.length,
       id: normalized,
+      value: normalized,
       text: normalized,
-      style: `font-family: ${normalized}`,
+      style: `font-family: ${normalized}; font-size: ${previewFontSize};`,
     });
   };
 
@@ -959,35 +1237,95 @@ function getPresetFontFamilyVariations() {
     });
   });
 
-  return items;
+  return items.sort((a, b) =>
+    String(b?.text || "").localeCompare(String(a?.text || ""), undefined, {
+      sensitivity: "base",
+    })
+  );
+}
+
+function resolveFontFamilyPreviewFontSize(control) {
+  const controlInput = control?.querySelector?.(".ac-input");
+  if (controlInput) {
+    const fontSize = getComputedStyle(controlInput).fontSize;
+    if (fontSize) return fontSize;
+  }
+
+  const selectors = [
+    "[name='/typography/fontFamilyBody']",
+    "[name='/typography/fontFamilyHeadings']",
+    "[name='/typography/fontFamilyMono']",
+  ];
+
+  for (const selector of selectors) {
+    const omnibox = document.querySelector(selector);
+    const input = omnibox?.shadowRoot?.querySelector?.(".ac-input");
+    if (!input) continue;
+    const fontSize = getComputedStyle(input).fontSize;
+    if (fontSize) return fontSize;
+  }
+
+  return "var(--font-size-md)";
+}
+
+async function loadGoogleFontsForFontFamilyItems(items) {
+  if (!Array.isArray(items) || !items.length) return;
+
+  const loadGoogleFont = await getLoadGoogleFontFn();
+  if (typeof loadGoogleFont !== "function") return;
+
+  const fontNames = new Set();
+  items.forEach((item) => {
+    const stack = item?.value || item?.text;
+    splitFontFamilyStack(stack).forEach((entry) => {
+      const fontName = normalizeFontName(entry);
+      if (isLikelyLoadableFont(fontName)) {
+        fontNames.add(fontName);
+      }
+    });
+  });
+
+  if (!fontNames.size) return;
+  await Promise.allSettled(Array.from(fontNames).map((name) => loadGoogleFont(name)));
 }
 
 function buildFontFamilyOmniboxSettings() {
-  const allItems = getPresetFontFamilyVariations();
-  const filterItems = (search) => {
+  const filterItems = (items, search) => {
     const query = String(search || "").trim().toLowerCase();
-    if (!query) return allItems;
-    return allItems.filter((item) => item.text.toLowerCase().includes(query));
+    if (!query) return items;
+    return items.filter((item) => {
+      const text = String(
+        item?.text || item?.id || item?.element?.textContent || ""
+      ).toLowerCase();
+      return text.includes(query);
+    });
   };
 
-  return {    
+
+  return {   
+    //debug: true,
+    itemGrid: "0 1fr 0",
     hideCategory: true,
-    iconHandler: (item) => {
-      
+    iconHandler: (item) => {      
       return "";
     },
     categories: {
       FontFamilies: {
         trigger: () => true,
-        getItems: (options) => filterItems(options?.search),
-        action: (options, ev) => {
-          const input = document.querySelector("[name='/typography/fontFamilyHeadings']");
+        getItems: async (options) => {
+          const previewFontSize = resolveFontFamilyPreviewFontSize(options?.control);
+          const allItems = getPresetFontFamilyVariations(previewFontSize);
+          const items = filterItems(allItems, options?.search);
           
-          if (input && input.tagName === "PDS-OMNIBOX") {
-            input.value = options?.text || "";
-            
+          await loadGoogleFontsForFontFamilyItems(items);
+
+          return items;
+        },
+        action: (options) => {
+          const input = document.querySelector("pds-omnibox");
+          if (input) {
+            input.value = options.text;
           }
-          return options?.text || options?.id;
         },
       },
     },
@@ -1034,7 +1372,7 @@ function buildSchemaFromPaths(paths, design, hints = {}) {
   };
 
   const isColorValue = (value, path) => {
-    if (String(path || "").toLowerCase().startsWith("colors.")) return true;
+    if (isColorPath(path)) return true;
     if (typeof value !== "string") return false;
     return /^#([0-9a-f]{3,8})$/i.test(value) || /^rgba?\(/i.test(value) || /^hsla?\(/i.test(value);
   };
@@ -1064,8 +1402,12 @@ function buildSchemaFromPaths(paths, design, hints = {}) {
         const value = getValueAtPath(design, [category, ...rest]);
         const hintValue = hints[path];
         const enumOptions = getEnumOptions(path);
-        const normalizedValue = normalizeEnumValue(path, value);
-        const normalizedHint = normalizeEnumValue(path, hintValue);
+        const resolvedColorValue = resolveColorValueForPath(path, value, hintValue);
+        const normalizedValue = normalizeEnumValue(path, resolvedColorValue ?? value);
+        const normalizedHint = normalizeEnumValue(
+          path,
+          resolvedColorValue ?? hintValue,
+        );
         const inferredType = Array.isArray(value)
           ? "array"
           : value === null
@@ -1232,6 +1574,10 @@ async function applyDesignPatch(patch) {
   const nextOptions = { ...currentOptions, design: nextDesign };
   if (resolvedPresetId) nextOptions.preset = resolvedPresetId;
 
+  try {
+    await loadTypographyFontsForDesign(nextDesign?.typography);
+  } catch (e) {}
+
   const nextGenerator = new Generator(nextOptions);
   if (PDS?.applyStyles) {
     await PDS.applyStyles(nextGenerator);
@@ -1307,6 +1653,17 @@ function getActivePresetId() {
   return stored?.preset || PDS?.currentConfig?.preset || PDS?.currentPreset || null;
 }
 
+function getPresetNameById(presetId) {
+  if (!presetId) return "";
+  const presets = PDS?.presets || {};
+  const preset =
+    presets?.[presetId] ||
+    Object.values(presets || {}).find(
+      (candidate) => String(candidate?.id || candidate?.name) === String(presetId)
+    );
+  return preset?.name || String(presetId);
+}
+
 async function applyPresetSelection(presetId) {
   if (!presetId) return;
   setStoredConfig({
@@ -1466,18 +1823,58 @@ async function exportFromLiveEdit(format) {
 }
 
 function setFormSchemas(form, schema, uiSchema, design) {
-  form.jsonSchema = schema;
-  form.uiSchema = uiSchema;
-  form.values = shallowClone(design);
+  const themedSchema = withThemeConditionalSchema(schema, uiSchema);
+  const formValues = withThemeContextValues(design);
+  form.jsonSchema = themedSchema.schema;
+  form.uiSchema = themedSchema.uiSchema;
+  form.values = formValues;
 }
 
-async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
-  const { schema, uiSchema } = buildSchemaFromPaths(paths, design, hints);
+async function waitForElementDefinition(tagName, timeoutMs = 4000) {
+  if (customElements.get(tagName)) return true;
+
+  let probe = null;
+  try {
+    if (typeof document !== "undefined" && document.body) {
+      probe = document.createElement(tagName);
+      probe.setAttribute("hidden", "");
+      probe.setAttribute("aria-hidden", "true");
+      probe.style.display = "none";
+      document.body.appendChild(probe);
+    }
+  } catch (e) {}
+
+  await Promise.race([
+    customElements.whenDefined(tagName),
+    new Promise((_, reject) => {
+      setTimeout(() => reject(new Error(`Timed out waiting for <${tagName}> definition`)), timeoutMs);
+    }),
+  ]);
+
+  try {
+    if (probe && probe.parentNode) {
+      probe.parentNode.removeChild(probe);
+    }
+  } catch (e) {}
 
-  if (!customElements.get("pds-form")) {
-    await customElements.whenDefined("pds-form");
+  if (!customElements.get(tagName)) {
+    throw new Error(`<${tagName}> is not defined`);
   }
 
+  return true;
+}
+
+async function createConfiguredForm({
+  schema,
+  uiSchema,
+  values,
+  onSubmit,
+  onUndo,
+  normalizeFlatValues,
+  formOptions,
+}) {
+  await waitForElementDefinition("pds-form");
+
   const form = document.createElement("pds-form");
   const fontFamilyOmniboxSettings = buildFontFamilyOmniboxSettings();
   form.setAttribute("hide-actions", "");
@@ -1488,16 +1885,38 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
     enhancements: {
       rangeOutput: true,
     },
+    ...(formOptions && typeof formOptions === "object" ? formOptions : {}),
   };
+
   form.defineRenderer(
     "font-family-omnibox",
     ({ id, path, value, attrs, set }) => {
-      const resolveSelectedValue = (options, actionResult) => {
+      const resolveSelectedValue = (options, actionResult, selectionEvent) => {
         if (typeof actionResult === "string" && actionResult.trim()) {
           return actionResult;
         }
+
+        const eventDetail = selectionEvent?.detail;
+        const fromEventValue = String(eventDetail?.value || "").trim();
+        if (fromEventValue) return fromEventValue;
+
+        const fromEventText = String(eventDetail?.text || "").trim();
+        if (fromEventText) return fromEventText;
+
+        const fromEventElementText = String(
+          eventDetail?.element?.textContent || ""
+        ).trim();
+        if (fromEventElementText) return fromEventElementText;
+
         const fromText = String(options?.text || "").trim();
         if (fromText) return fromText;
+
+        const fromValue = String(options?.value || "").trim();
+        if (fromValue) return fromValue;
+
+        const fromElementText = String(options?.element?.textContent || "").trim();
+        if (fromElementText) return fromElementText;
+
         return String(options?.id || "").trim();
       };
 
@@ -1509,15 +1928,36 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
               categoryName,
               {
                 ...categoryConfig,
-                action: (options) => {                  
+                action: (...args) => {
+                  const [options, selectionEvent] = args;
                   const actionResult =
                     typeof originalAction === "function"
-                      ? originalAction(options)
+                      ? originalAction(...args)
                       : undefined;
-                  const selected = resolveSelectedValue(options, actionResult);
+
+                  if (actionResult && typeof actionResult.then === "function") {
+                    return actionResult.then((resolved) => {
+                      const selected = resolveSelectedValue(
+                        options,
+                        resolved,
+                        selectionEvent
+                      );
+                      if (selected) {
+                        set(selected);
+                      }
+                      return resolved;
+                    });
+                  }
+
+                  const selected = resolveSelectedValue(
+                    options,
+                    actionResult,
+                    selectionEvent
+                  );
                   if (selected) {
                     set(selected);
                   }
+
                   return actionResult;
                 },
               },
@@ -1529,8 +1969,11 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
       const omnibox = document.createElement("pds-omnibox");
       omnibox.id = id;
       omnibox.setAttribute("name", path);
-      omnibox.setAttribute("item-grid", "0 1fr");
-      omnibox.setAttribute("placeholder", attrs?.placeholder || "Select a font family");           
+      omnibox.setAttribute("item-grid", "0 1fr 0");
+      omnibox.setAttribute(
+        "placeholder",
+        attrs?.placeholder || "Select a font family"
+      );
       omnibox.value = value ?? "";
       omnibox.settings = {
         ...fontFamilyOmniboxSettings,
@@ -1542,161 +1985,691 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
       omnibox.addEventListener("change", (event) => {
         set(event?.target?.value ?? omnibox.value ?? "");
       });
+      omnibox.addEventListener("result-selected", (event) => {
+        const selected = resolveSelectedValue(event?.detail, undefined, event);
+        if (!selected) return;
+        omnibox.value = selected;
+        set(selected);
+      });
       return omnibox;
     }
   );
+
   form.addEventListener("pw:submit", onSubmit);
-  const values = shallowClone(design || {});
-  Object.keys(ENUM_FIELD_OPTIONS).forEach((path) => {
-    const normalized = normalizeEnumValue(path, getValueAtPath(values, path.split(".")));
-    if (normalized !== undefined) {
-      setValueAtPath(values, path.split("."), normalized);
-    }
-  });
-  Object.entries(hints || {}).forEach(([path, hintValue]) => {
-    const segments = path.split(".");
-    const currentValue = getValueAtPath(values, segments);
-    if (currentValue === undefined || currentValue === null) {
-      setValueAtPath(values, segments, hintValue);
-    }
-  });
-  setFormSchemas(form, schema, uiSchema, values);
+  if (typeof normalizeFlatValues === "function") {
+    form._normalizeFlatValues = normalizeFlatValues;
+  }
+  setFormSchemas(form, schema, uiSchema, values || {});
 
-  // Apply button (will trigger form submit programmatically)
   const applyBtn = document.createElement("button");
   applyBtn.className = "btn-primary btn-sm";
   applyBtn.type = "button";
   applyBtn.textContent = "Apply";
   applyBtn.addEventListener("click", async () => {
-    // Manually trigger pw:submit event for pds-form
     if (typeof form.getValuesFlat === "function") {
-      // Wait for form to be ready if it's still loading
       if (!customElements.get("pds-form")) {
         await customElements.whenDefined("pds-form");
       }
-      
-      const flatValues = form.getValuesFlat();
+
+      const flatValues =
+        typeof form._normalizeFlatValues === "function"
+          ? form._normalizeFlatValues(form.getValuesFlat())
+          : form.getValuesFlat();
       const event = new CustomEvent("pw:submit", {
         detail: {
           json: flatValues,
           formData: new FormData(),
           valid: true,
-          issues: []
+          issues: [],
         },
         bubbles: true,
-        cancelable: true
+        cancelable: true,
       });
       form.dispatchEvent(event);
     }
   });
 
-  // Undo button
   const undoBtn = document.createElement("button");
-  undoBtn.className = "btn-secondary btn-sm";
+  undoBtn.className = "btn-secondary btn-sm icon-only";
   undoBtn.type = "button";
-  undoBtn.textContent = "Undo";
+  undoBtn.setAttribute("aria-label", "Undo");
+  undoBtn.setAttribute("title", "Undo");
+  const undoIcon = document.createElement("pds-icon");
+  undoIcon.setAttribute("icon", "arrow-counter-clockwise");
+  undoIcon.setAttribute("size", "sm");
+  undoBtn.appendChild(undoIcon);
   undoBtn.addEventListener("click", onUndo);
 
   return { form, applyBtn, undoBtn };
 }
 
-class PdsLiveEdit extends HTMLElement {
-  constructor() {
-    super();
-    this._boundMouseOver = this._handleMouseOver.bind(this);
-    this._boundMouseOut = this._handleMouseOut.bind(this);
-    this._boundMouseMove = this._handleMouseMove.bind(this);
-    this._boundReposition = this._repositionDropdown.bind(this);
-    this._activeTarget = null;
-    this._activeDropdown = null;
-    this._holdOpen = false;
-    this._closeTimer = null;
-    this._drawer = null;
-    this._selectors = null;
-    this._lastPointer = null;
-    this._boundDocKeydown = this._handleDocumentKeydown.bind(this);
-    this._connected = false;
-    this._undoStack = [];
-    this._dropdownMenuOpen = false;
-    this._dropdownObserver = null;
+async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
+  const quickPayload = buildQuickConfigPayload(paths, design, hints);
+  const schema = quickPayload?.schema;
+  const uiSchema = quickPayload?.uiSchema;
+  const values = quickPayload?.values;
+
+  if (!schema || !uiSchema) {
+    throw new Error("Central config form metadata is unavailable for quick edit");
   }
 
-  connectedCallback() {
-    if (this._connected) return;
-    if (PdsLiveEdit._activeInstance && PdsLiveEdit._activeInstance !== this) {
-      PdsLiveEdit._activeInstance._teardown();
-    }
-    PdsLiveEdit._activeInstance = this;
-    this._connected = true;
-    if (!isHoverCapable()) return;
+  return createConfiguredForm({
+    schema,
+    uiSchema,
+    values: values || {},
+    onSubmit,
+    onUndo,
+    formOptions: {
+      layouts: {
+        arrays: "compact",
+      },
+      enhancements: {
+        rangeOutput: true,
+      },
+    },
+  });
+}
 
-    ensureStyles();
-    this._selectors = collectSelectors();
-    document.addEventListener("mouseover", this._boundMouseOver, true);
-    document.addEventListener("mouseout", this._boundMouseOut, true);
-    document.addEventListener("mousemove", this._boundMouseMove, true);
+function getConfigFormPayloadFromMetadata(design) {
+  if (typeof PDS?.buildConfigFormSchema === "function") {
+    return PDS.buildConfigFormSchema(design);
   }
 
-  disconnectedCallback() {
-    this._teardown();
+  const payload = PDS?.configFormSchema;
+  if (payload && payload.schema && payload.uiSchema) {
+    return {
+      schema: payload.schema,
+      uiSchema: payload.uiSchema,
+      values: shallowClone(design || payload.values || {}),
+      metadata: payload.metadata || {},
+    };
   }
 
-  _teardown() {
-    if (this._connected) {
-      document.removeEventListener("mouseover", this._boundMouseOver, true);
-      document.removeEventListener("mouseout", this._boundMouseOut, true);
-      document.removeEventListener("mousemove", this._boundMouseMove, true);
-    }
-    this._removeRepositionListeners();
-    this._clearCloseTimer();
-    this._removeActiveUI();
-    this._connected = false;
-    if (PdsLiveEdit._activeInstance === this) {
-      PdsLiveEdit._activeInstance = null;
-    }
-  }
+  return null;
+}
 
-  _handleMouseOver(event) {
-    if (!event?.target || !(event.target instanceof Element)) return;
-    
-    // Check if we're hovering over the dropdown (including Shadow DOM elements)
-    if (this._activeDropdown) {
-      const path = event.composedPath ? event.composedPath() : [event.target];
-      const isOverDropdown = path.some(node => node === this._activeDropdown);
-      if (isOverDropdown) {
-        this._clearCloseTimer();
-        return;
-      }
-    }
-    
-    const target = this._findEditableTarget(event.target);
-    
-    // If hovering over the same active target, just clear timer
-    if (target && target === this._activeTarget) {
-      this._clearCloseTimer();
-      return;
-    }
-    
-    // If hovering over a new target, show its editor
-    if (target && target !== this._activeTarget) {
-      this._removeActiveUI();
-      this._showForTarget(target);
+function deepClone(value) {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(value);
+    } catch (e) {
+      // Fall through to JSON clone
     }
   }
+  return JSON.parse(JSON.stringify(value));
+}
 
-  _handleMouseOut(event) {
-    if (!this._activeTarget) return;
-    
-    // Schedule a delayed close - the safe zone logic will determine if we actually close
-    this._scheduleClose();
-  }
+function withThemeContextValues(values) {
+  const nextValues = shallowClone(values || {});
+  nextValues[FORM_THEME_CONTEXT_FIELD] = getActiveTheme().value;
+  return nextValues;
+}
 
-  _findEditableTarget(node) {
+function mergeVisibleWhenCondition(existingCondition, conditionToAdd) {
+  if (!existingCondition) return deepClone(conditionToAdd);
+  if (
+    existingCondition &&
+    typeof existingCondition === "object" &&
+    Array.isArray(existingCondition.$and)
+  ) {
+    return {
+      ...deepClone(existingCondition),
+      $and: [...existingCondition.$and.map((entry) => deepClone(entry)), deepClone(conditionToAdd)],
+    };
+  }
+  return {
+    $and: [deepClone(existingCondition), deepClone(conditionToAdd)],
+  };
+}
+
+function collectSchemaNodeMap(schemaNode, pointer = "", out = new Map()) {
+  if (!schemaNode || typeof schemaNode !== "object") return out;
+  if (pointer) {
+    out.set(pointer, schemaNode);
+  }
+  if (schemaNode.type === "object" && schemaNode.properties && typeof schemaNode.properties === "object") {
+    Object.entries(schemaNode.properties).forEach(([key, childNode]) => {
+      collectSchemaNodeMap(childNode, `${pointer}/${key}`, out);
+    });
+  }
+  return out;
+}
+
+function applyThemeVisibilityConditions(schema, uiSchema) {
+  if (!schema || typeof schema !== "object") {
+    return uiSchema && typeof uiSchema === "object" ? deepClone(uiSchema) : {};
+  }
+
+  const conditionedUi = uiSchema && typeof uiSchema === "object" ? deepClone(uiSchema) : {};
+  const schemaNodeMap = collectSchemaNodeMap(schema);
+
+  const darkCondition = { [FORM_THEME_CONTEXT_POINTER]: "dark" };
+  const lightCondition = { [FORM_THEME_CONTEXT_POINTER]: { $ne: "dark" } };
+
+  const ensureCondition = (pointer, condition) => {
+    if (!pointer || pointer === FORM_THEME_CONTEXT_POINTER) return;
+    const current = conditionedUi[pointer] && typeof conditionedUi[pointer] === "object"
+      ? conditionedUi[pointer]
+      : {};
+    conditionedUi[pointer] = {
+      ...current,
+      "ui:visibleWhen": mergeVisibleWhenCondition(current["ui:visibleWhen"], condition),
+    };
+  };
+
+  schemaNodeMap.forEach((node, pointer) => {
+    if (!pointer.includes("/darkMode") || pointer === FORM_THEME_CONTEXT_POINTER) return;
+
+    ensureCondition(pointer, darkCondition);
+
+    const isDarkLeaf = !(node?.type === "object" && node?.properties);
+    if (!isDarkLeaf) return;
+
+    const lightPointer = pointer.replace("/darkMode/", "/");
+    const lightNode = schemaNodeMap.get(lightPointer);
+    const isLightLeaf = !!lightNode && !(lightNode?.type === "object" && lightNode?.properties);
+    if (isLightLeaf) {
+      ensureCondition(lightPointer, lightCondition);
+    }
+  });
+
+  conditionedUi[FORM_THEME_CONTEXT_POINTER] = {
+    ...(conditionedUi[FORM_THEME_CONTEXT_POINTER] || {}),
+    "ui:hidden": true,
+  };
+
+  return conditionedUi;
+}
+
+function withThemeConditionalSchema(schema, uiSchema) {
+  const baseSchema = deepClone(schema || { type: "object", properties: {} });
+  if (!baseSchema.properties || typeof baseSchema.properties !== "object") {
+    baseSchema.properties = {};
+  }
+
+  baseSchema.properties[FORM_THEME_CONTEXT_FIELD] = {
+    type: "string",
+    oneOf: [
+      { const: "light", title: "Light" },
+      { const: "dark", title: "Dark" },
+    ],
+  };
+
+  const conditionedUi = applyThemeVisibilityConditions(baseSchema, uiSchema);
+  return { schema: baseSchema, uiSchema: conditionedUi };
+}
+
+function shouldKeepPathForSelection(selectedPaths, path) {
+  if (!path) return true;
+  return selectedPaths.some((selectedPath) => {
+    if (selectedPath === path) return true;
+    return selectedPath.startsWith(`${path}.`);
+  });
+}
+
+function pruneSchemaForPaths(node, selectedPaths, path = "") {
+  if (!node || typeof node !== "object") return node;
+  if (!isObjectSchemaNode(node)) return deepClone(node);
+
+  if (path && !shouldKeepPathForSelection(selectedPaths, path)) {
+    return null;
+  }
+
+  const properties = {};
+  Object.entries(node.properties || {}).forEach(([key, childNode]) => {
+    const childPath = path ? `${path}.${key}` : key;
+    if (!shouldKeepPathForSelection(selectedPaths, childPath)) return;
+    const prunedChild = pruneSchemaForPaths(childNode, selectedPaths, childPath);
+    if (prunedChild) {
+      properties[key] = prunedChild;
+    }
+  });
+
+  if (!Object.keys(properties).length) return null;
+
+  const clonedNode = deepClone(node);
+  clonedNode.properties = properties;
+  if (Array.isArray(clonedNode.required)) {
+    clonedNode.required = clonedNode.required.filter((key) =>
+      Object.prototype.hasOwnProperty.call(properties, key)
+    );
+  }
+  return clonedNode;
+}
+
+function uiPointerToPath(pointer) {
+  if (!pointer || pointer === "/") return "";
+  return pointer
+    .replace(/^\//, "")
+    .split("/")
+    .filter(Boolean)
+    .join(".");
+}
+
+function filterUiSchemaForPaths(uiSchema, selectedPaths) {
+  if (!uiSchema || typeof uiSchema !== "object") return {};
+  const filtered = {};
+  Object.entries(uiSchema).forEach(([pointer, value]) => {
+    const path = uiPointerToPath(pointer);
+    if (!path || shouldKeepPathForSelection(selectedPaths, path)) {
+      filtered[pointer] = deepClone(value);
+    }
+  });
+  return filtered;
+}
+
+function buildValuesForPaths(valuesSource, selectedPaths, hints = {}) {
+  const values = {};
+  selectedPaths.forEach((path) => {
+    const segments = path.split(".");
+    let value = getValueAtPath(valuesSource, segments);
+    if ((value === undefined || value === null) && hints[path] !== undefined) {
+      value = hints[path];
+    }
+    if (isColorPath(path)) {
+      const resolvedColorValue = resolveColorValueForPath(path, value, hints[path]);
+      if (resolvedColorValue) {
+        value = resolvedColorValue;
+      }
+    }
+    if (value !== undefined) {
+      setValueAtPath(values, segments, deepClone(value));
+    }
+  });
+  return values;
+}
+
+function buildQuickConfigPayload(paths, design, hints = {}) {
+  const payload = getConfigFormPayloadFromMetadata(design);
+  if (!payload?.schema || !payload?.uiSchema) return null;
+
+  const selectedPaths = normalizePaths(paths);
+  if (!selectedPaths.length) return null;
+
+  const schema = pruneSchemaForPaths(payload.schema, selectedPaths, "");
+  if (!schema) return null;
+
+  const uiSchema = filterUiSchemaForPaths(payload.uiSchema, selectedPaths);
+  const valuesSource =
+    payload?.values && typeof payload.values === "object"
+      ? payload.values
+      : shallowClone(design || {});
+  const values = buildValuesForPaths(valuesSource || {}, selectedPaths, hints);
+
+  return { schema, uiSchema, values };
+}
+
+const FULL_CONFIG_GROUPS_KEY = "__groups";
+
+function isObjectSchemaNode(node) {
+  return !!(node && typeof node === "object" && node.type === "object" && node.properties);
+}
+
+function buildGroupedFullConfigPayload(payload, design) {
+  const values =
+    payload?.values && typeof payload.values === "object"
+      ? payload.values
+      : shallowClone(design || {});
+
+  if (!payload?.schema || !payload?.uiSchema || !isObjectSchemaNode(payload.schema)) {
+    return {
+      schema: payload?.schema,
+      uiSchema: payload?.uiSchema,
+      values,
+      normalizeFlatValues: null,
+    };
+  }
+
+  const rootProperties = payload.schema.properties || {};
+  const groupedKeys = [];
+  const scalarKeys = [];
+
+  Object.entries(rootProperties).forEach(([key, schemaNode]) => {
+    if (isObjectSchemaNode(schemaNode)) {
+      groupedKeys.push(key);
+      return;
+    }
+    scalarKeys.push(key);
+  });
+
+  if (!groupedKeys.length || !scalarKeys.length) {
+    return {
+      schema: payload.schema,
+      uiSchema: payload.uiSchema,
+      values,
+      normalizeFlatValues: null,
+    };
+  }
+
+  const transformedSchema = {
+    ...payload.schema,
+    properties: {
+      ...Object.fromEntries(scalarKeys.map((key) => [key, rootProperties[key]])),
+      [FULL_CONFIG_GROUPS_KEY]: {
+        type: "object",
+        title: "Design Groups",
+        properties: Object.fromEntries(
+          groupedKeys.map((key) => [key, rootProperties[key]])
+        ),
+      },
+    },
+  };
+
+  const transformedValues = {
+    ...Object.fromEntries(scalarKeys.map((key) => [key, values?.[key]])),
+    [FULL_CONFIG_GROUPS_KEY]: Object.fromEntries(
+      groupedKeys.map((key) => [key, values?.[key]])
+    ),
+  };
+
+  const transformedUiSchema = { ...(payload.uiSchema || {}) };
+  const addGroupPrefix = (path = "") => `/${FULL_CONFIG_GROUPS_KEY}${path}`;
+
+  groupedKeys.forEach((key) => {
+    const originalPath = `/${key}`;
+
+    if (Object.prototype.hasOwnProperty.call(transformedUiSchema, originalPath)) {
+      transformedUiSchema[addGroupPrefix(originalPath)] = transformedUiSchema[originalPath];
+      delete transformedUiSchema[originalPath];
+    }
+
+    Object.keys(transformedUiSchema).forEach((path) => {
+      if (!path.startsWith(`${originalPath}/`)) return;
+      transformedUiSchema[addGroupPrefix(path)] = transformedUiSchema[path];
+      delete transformedUiSchema[path];
+    });
+  });
+
+  transformedUiSchema[`/${FULL_CONFIG_GROUPS_KEY}`] = {
+    "ui:layout": "accordion",
+    "ui:layoutOptions": { openFirst: false },
+  };
+
+  const normalizeFlatValues = (flatValues = {}) => {
+    const normalized = {};
+    const groupPointerPrefix = `/${FULL_CONFIG_GROUPS_KEY}/`;
+    const groupDotPrefix = `${FULL_CONFIG_GROUPS_KEY}.`;
+    Object.entries(flatValues || {}).forEach(([path, value]) => {
+      const inputPath = String(path || "");
+      if (!inputPath) return;
+      if (inputPath === FULL_CONFIG_GROUPS_KEY || inputPath === `/${FULL_CONFIG_GROUPS_KEY}`) {
+        return;
+      }
+
+      if (inputPath.startsWith(groupPointerPrefix)) {
+        normalized[`/${inputPath.slice(groupPointerPrefix.length)}`] = value;
+        return;
+      }
+
+      if (inputPath.startsWith(groupDotPrefix)) {
+        normalized[inputPath.slice(groupDotPrefix.length)] = value;
+        return;
+      }
+
+      normalized[inputPath] = value;
+    });
+    return normalized;
+  };
+
+  return {
+    schema: transformedSchema,
+    uiSchema: transformedUiSchema,
+    values: transformedValues,
+    normalizeFlatValues,
+  };
+}
+
+async function buildFullConfigForm(design, onSubmit, onUndo) {
+  const payload = getConfigFormPayloadFromMetadata(design);
+  if (!payload?.schema || !payload?.uiSchema) return null;
+
+  const groupedPayload = buildGroupedFullConfigPayload(payload, design);
+
+  return createConfiguredForm({
+    schema: groupedPayload.schema,
+    uiSchema: groupedPayload.uiSchema,
+    values: groupedPayload.values,
+    onSubmit,
+    onUndo,
+    normalizeFlatValues: groupedPayload.normalizeFlatValues,
+    formOptions: {
+      layouts: {
+        arrays: "compact",
+      },
+      enhancements: {
+        rangeOutput: true,
+      },
+    },
+  });
+}
+
+class PdsLiveEdit extends HTMLElement {
+  constructor() {
+    super();
+    this._boundMouseOver = this._handleMouseOver.bind(this);
+    this._boundMouseOut = this._handleMouseOut.bind(this);
+    this._boundMouseMove = this._handleMouseMove.bind(this);
+    this._boundReposition = this._repositionDropdown.bind(this);
+    this._activeTarget = null;
+    this._activeDropdown = null;
+    this._holdOpen = false;
+    this._closeTimer = null;
+    this._drawer = null;
+    this._selectors = null;
+    this._lastPointer = null;
+    this._boundDocKeydown = this._handleDocumentKeydown.bind(this);
+    this._connected = false;
+    this._undoStack = [];
+    this._dropdownMenuOpen = false;
+    this._dropdownObserver = null;
+    this._boundThemeChanged = this._handleThemeChanged.bind(this);
+    this._themeRefreshInFlight = null;
+    this._drawerConfigFormContainer = null;
+    this._drawerConfigFooter = null;
+    this._interactiveEditingEnabled = true;
+    this._interactionListenersAttached = false;
+  }
+
+  connectedCallback() {
+    if (this._connected) return;
+    if (PdsLiveEdit._activeInstance && PdsLiveEdit._activeInstance !== this) {
+      PdsLiveEdit._activeInstance._teardown();
+    }
+    PdsLiveEdit._activeInstance = this;
+    this._connected = true;
+    if (this.hasAttribute(SETTINGS_ONLY_ATTR)) {
+      this._interactiveEditingEnabled = false;
+    }
+    if (PDS && typeof PDS.addEventListener === "function") {
+      PDS.addEventListener("pds:theme:changed", this._boundThemeChanged);
+    }
+    if (this._interactiveEditingEnabled) {
+      this._enableInteractiveEditing();
+    }
+  }
+
+  disconnectedCallback() {
+    this._teardown();
+  }
+
+  _teardown() {
+    this._disableInteractiveEditing({ clearUI: true });
+    this._connected = false;
+    if (PDS && typeof PDS.removeEventListener === "function") {
+      PDS.removeEventListener("pds:theme:changed", this._boundThemeChanged);
+    }
+    this._removeRepositionListeners();
+    this._clearCloseTimer();
+    this._removeActiveUI();
+    this._drawerConfigFormContainer = null;
+    this._drawerConfigFooter = null;
+    if (PdsLiveEdit._activeInstance === this) {
+      PdsLiveEdit._activeInstance = null;
+    }
+  }
+
+  _enableInteractiveEditing() {
+    if (!isHoverCapable()) return;
+    ensureStyles();
+    this._selectors = collectSelectors();
+    if (this._interactionListenersAttached) return;
+    document.addEventListener("mouseover", this._boundMouseOver, true);
+    document.addEventListener("mouseout", this._boundMouseOut, true);
+    document.addEventListener("mousemove", this._boundMouseMove, true);
+    this._interactionListenersAttached = true;
+  }
+
+  _disableInteractiveEditing(options = {}) {
+    if (this._interactionListenersAttached) {
+      document.removeEventListener("mouseover", this._boundMouseOver, true);
+      document.removeEventListener("mouseout", this._boundMouseOut, true);
+      document.removeEventListener("mousemove", this._boundMouseMove, true);
+      this._interactionListenersAttached = false;
+    }
+
+    if (options?.clearUI !== false) {
+      this._removeActiveUI();
+    }
+  }
+
+  setInteractiveEditingEnabled(enabled = true) {
+    const next = Boolean(enabled);
+    this._interactiveEditingEnabled = next;
+
+    if (next) {
+      this.removeAttribute(SETTINGS_ONLY_ATTR);
+    } else {
+      this.setAttribute(SETTINGS_ONLY_ATTR, "true");
+    }
+
+    if (!this._connected) {
+      return next;
+    }
+
+    if (next) {
+      this._enableInteractiveEditing();
+    } else {
+      this._disableInteractiveEditing({ clearUI: true });
+    }
+
+    return next;
+  }
+
+  isInteractiveEditingEnabled() {
+    return Boolean(this._interactiveEditingEnabled);
+  }
+
+  async _handleThemeChanged() {
+    if (this._themeRefreshInFlight) return this._themeRefreshInFlight;
+    this._themeRefreshInFlight = (async () => {
+      try {
+        await this._refreshQuickFormForTheme();
+        await this._refreshDrawerConfigFormForTheme();
+      } finally {
+        this._themeRefreshInFlight = null;
+      }
+    })();
+    return this._themeRefreshInFlight;
+  }
+
+  async _refreshQuickFormForTheme() {
+    if (!this._activeDropdown || !this._activeTarget) return;
+    if (!document.contains(this._activeTarget)) return;
+
+    const formContainer = this._activeDropdown.querySelector('.pds-live-editor-form-container');
+    const footer = this._activeDropdown.querySelector('.pds-live-editor-footer');
+    if (!formContainer || !footer) return;
+
+    const currentDesign = shallowClone(PDS?.currentConfig?.design || {});
+    const quickContext = collectQuickContext(this._activeTarget);
+    const limitedPaths = quickContext.paths.slice(0, QUICK_EDIT_LIMIT);
+    const quickPaths = quickContext.paths;
+
+    await this._renderQuickForm(
+      formContainer,
+      footer,
+      limitedPaths,
+      currentDesign,
+      quickContext.hints,
+      this._activeTarget,
+      quickPaths
+    );
+  }
+
+  async _refreshDrawerConfigFormForTheme() {
+    if (!this._drawer) return;
+    if (!this._drawer.hasAttribute("open")) return;
+    if (!this._drawerConfigFormContainer || !this._drawerConfigFooter) return;
+
+    const fullDesign = shallowClone(PDS?.currentConfig?.design || {});
+    const fullConfigFormResult = await buildFullConfigForm(
+      fullDesign,
+      (event) => this._handleFormSubmit(event, fullConfigFormResult?.form),
+      () => this._handleUndo()
+    );
+
+    this._drawerConfigFormContainer.replaceChildren();
+    this._drawerConfigFooter.replaceChildren();
+
+    if (fullConfigFormResult?.form) {
+      fullConfigFormResult.form._undoBtn = fullConfigFormResult.undoBtn;
+      fullConfigFormResult.undoBtn.disabled = this._undoStack.length === 0;
+      this._drawerConfigFormContainer.appendChild(fullConfigFormResult.form);
+      this._drawerConfigFooter.appendChild(fullConfigFormResult.applyBtn);
+      this._drawerConfigFooter.appendChild(fullConfigFormResult.undoBtn);
+    } else {
+      const unavailable = document.createElement("p");
+      unavailable.className = "text-muted";
+      unavailable.textContent =
+        "Full config metadata is unavailable in this runtime.";
+      this._drawerConfigFormContainer.appendChild(unavailable);
+    }
+  }
+
+  _handleMouseOver(event) {
+    if (!this._interactiveEditingEnabled) return;
+    if (!event?.target || !(event.target instanceof Element)) return;
+    
+    // Check if we're hovering over the dropdown (including Shadow DOM elements)
+    if (this._activeDropdown) {
+      const path = event.composedPath ? event.composedPath() : [event.target];
+      const isOverDropdown = path.some(node => node === this._activeDropdown);
+      if (isOverDropdown) {
+        this._clearCloseTimer();
+        return;
+      }
+    }
+    
+    const target = this._findEditableTarget(event.target);
+    
+    // If hovering over the same active target, just clear timer
+    if (target && target === this._activeTarget) {
+      this._clearCloseTimer();
+      return;
+    }
+    
+    // If hovering over a new target, show its editor
+    if (target && target !== this._activeTarget) {
+      this._removeActiveUI();
+      this._showForTarget(target);
+    }
+  }
+
+  _handleMouseOut(event) {
+    if (!this._activeTarget) return;
+    
+    // Schedule a delayed close - the safe zone logic will determine if we actually close
+    this._scheduleClose();
+  }
+
+  _findEditableTarget(node) {
     const tag = node.tagName?.toLowerCase?.();
     if (tag && ["html", "head", "meta", "link", "style", "script", "title"].includes(tag)) {
       return null;
     }
     if (!this._selectors?.selector) return null;
+    if (isLiveEditHighlightBlacklisted(node)) return null;
+    if (node.closest("[data-pds-live-edit-ignore]")) return null;
     if (node.closest(EDITOR_TAG)) return null;
     if (node.closest(`.${DROPDOWN_CLASS}`)) return null;
     if (node.closest("pds-drawer")) return null;
@@ -1709,6 +2682,7 @@ class PdsLiveEdit extends HTMLElement {
   }
 
   _showForTarget(target) {
+    if (!this._interactiveEditingEnabled) return;
     const quickContext = collectQuickContext(target);
     const quickPaths = quickContext.paths;
     if (!quickPaths.length) return;
@@ -1753,8 +2727,13 @@ class PdsLiveEdit extends HTMLElement {
     this._lastPointer = null;
     this._dropdownMenuOpen = false;
     
-    // Always re-enable mouseover when UI is removed
-    this._addMouseOverListener();
+    if (
+      this._connected &&
+      this._interactiveEditingEnabled &&
+      this._interactionListenersAttached
+    ) {
+      this._addMouseOverListener();
+    }
   }
 
   _addDocumentListeners() {
@@ -1901,6 +2880,7 @@ class PdsLiveEdit extends HTMLElement {
 
   _addMouseOverListener() {
     if (typeof document === "undefined") return;
+    if (!this._interactiveEditingEnabled) return;
     document.addEventListener("mouseover", this._boundMouseOver, true);
   }
 
@@ -2017,7 +2997,7 @@ class PdsLiveEdit extends HTMLElement {
     button.appendChild(icon);
 
     const menu = document.createElement("menu");
-    const quickItem = document.createElement("li");
+  const quickItem = document.createElement("div");
     quickItem.className = "pds-live-editor-menu";
 
     const header = document.createElement("div");
@@ -2063,13 +3043,28 @@ class PdsLiveEdit extends HTMLElement {
     container.replaceChildren();
     footer.replaceChildren();
     
-    const { form, applyBtn, undoBtn } = await buildForm(
-      paths,
-      design,
-      (event) => this._handleFormSubmit(event, form),
-      () => this._handleUndo(),
-      hints
-    );
+    let form;
+    let applyBtn;
+    let undoBtn;
+    try {
+      const result = await buildForm(
+        paths,
+        design,
+        (event) => this._handleFormSubmit(event, form),
+        () => this._handleUndo(),
+        hints
+      );
+      form = result.form;
+      applyBtn = result.applyBtn;
+      undoBtn = result.undoBtn;
+    } catch (error) {
+      const fallback = document.createElement("p");
+      fallback.className = "text-muted";
+      fallback.textContent = "Editor form unavailable. Lazy component definition did not complete in time.";
+      container.appendChild(fallback);
+      console.warn("[PDS Live Edit] Failed to render quick form:", error);
+      return;
+    }
     
     // Store reference to undo button for enabling/disabling
     form._undoBtn = undoBtn;
@@ -2095,13 +3090,142 @@ class PdsLiveEdit extends HTMLElement {
       this._openDrawer(target, quickPaths);
       this._removeActiveUI();
     });
+
+    const quickModeNav = await this._buildQuickModeDropdown();
     
     // Add buttons to footer
     footer.appendChild(applyBtn);
     footer.appendChild(undoBtn);
+    footer.appendChild(quickModeNav);
     footer.appendChild(gearBtn);
   }
 
+  async _buildQuickModeDropdown() {
+    const nav = document.createElement("nav");
+    nav.setAttribute("data-dropdown", "");
+    nav.setAttribute("data-mode", "auto");
+    nav.setAttribute("data-direction", "auto");
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn-outline btn-sm icon-only";
+    button.setAttribute("aria-label", "Quick theme and preset");
+
+    const icon = document.createElement("pds-icon");
+    icon.setAttribute("icon", "palette");
+    icon.setAttribute("size", "sm");
+    button.appendChild(icon);
+
+    const menu = document.createElement("menu");
+    const content = await this._buildQuickModeContent();
+    menu.appendChild(content);
+    nav.append(button, menu);
+    return nav;
+  }
+
+  async _buildQuickModeContent() {
+    const content = document.createElement("div");
+    content.className = "pds-live-editor-menu stack-sm";
+
+    const themeLabel = document.createElement("label");
+    themeLabel.className = "stack-xs";
+    const themeText = document.createElement("span");
+    themeText.textContent = "Theme";
+    const themeToggle = document.createElement("pds-theme");
+    themeLabel.append(themeText, themeToggle);
+    content.appendChild(themeLabel);
+
+    const presetLabel = document.createElement("label");
+    presetLabel.className = "stack-xs";
+    const presetText = document.createElement("span");
+    presetText.textContent = "Preset";
+    presetLabel.appendChild(presetText);
+
+    let presetControlRendered = false;
+    try {
+      await waitForElementDefinition("pds-omnibox");
+
+      const presetOmnibox = document.createElement("pds-omnibox");
+      presetOmnibox.setAttribute("item-grid", "0 1fr 0");
+      presetOmnibox.setAttribute("placeholder", "Search presets...");
+
+      const activePresetId = getActivePresetId();
+      const activePresetName = getPresetNameById(activePresetId);
+      if (activePresetName) {
+        presetOmnibox.value = activePresetName;
+      }
+
+      const omniboxSettingsBuilder =
+        typeof PDS?.buildPresetOmniboxSettings === "function"
+          ? PDS.buildPresetOmniboxSettings.bind(PDS)
+          : null;
+
+      if (omniboxSettingsBuilder) {
+        presetOmnibox.settings = omniboxSettingsBuilder({
+          onSelect: async ({ preset, selection }) => {
+            if (selection?.disabled) return selection?.id;
+            const presetId = preset?.id || selection?.id;
+            await applyPresetSelection(presetId);
+            return presetId;
+          },
+        });
+      }
+
+      presetOmnibox.addEventListener("result-selected", (event) => {
+        const selectedText = event?.detail?.text;
+        if (typeof selectedText === "string" && selectedText.trim()) {
+          presetOmnibox.value = selectedText;
+        }
+      });
+
+      presetLabel.appendChild(presetOmnibox);
+      presetControlRendered = true;
+    } catch (error) {
+      console.warn("[PDS Live Edit] Quick preset omnibox unavailable, falling back to select.", error);
+    }
+
+    if (!presetControlRendered) {
+      const presetSelect = document.createElement("select");
+      const presetOptions = getPresetOptions();
+      const activePreset = getActivePresetId();
+
+      presetOptions.forEach((preset) => {
+        const option = document.createElement("option");
+        option.value = preset.id;
+        option.textContent = preset.name;
+        if (String(preset.id) === String(activePreset)) {
+          option.selected = true;
+        }
+        presetSelect.appendChild(option);
+      });
+
+      presetSelect.addEventListener("change", async (event) => {
+        const nextPreset = event.target?.value;
+        await applyPresetSelection(nextPreset);
+      });
+
+      presetLabel.appendChild(presetSelect);
+    }
+
+    content.appendChild(presetLabel);
+    return content;
+  }
+
+  async createSharedQuickModeMenuItem() {
+    const item = document.createElement("li");
+    item.className = "pds-live-shared-quick-mode-item";
+    item.setAttribute("data-pds-live-edit-ignore", "true");
+
+    const quickModeContent = await this._buildQuickModeContent();
+    if (!quickModeContent) {
+      return item;
+    }
+
+    markNodeTreeAsLiveEditIgnored(quickModeContent);
+    item.appendChild(quickModeContent);
+    return item;
+  }
+
   async _openDrawer(target, quickPaths) {
     if (!this._drawer) {
       this._drawer = document.createElement("pds-drawer");
@@ -2110,6 +3234,8 @@ class PdsLiveEdit extends HTMLElement {
       this.appendChild(this._drawer);
     }
 
+    this._drawer.style.setProperty("--drawer-width", "min(96vw, 44rem)");
+
     if (!customElements.get("pds-drawer")) {
       await customElements.whenDefined("pds-drawer");
     }
@@ -2121,7 +3247,7 @@ class PdsLiveEdit extends HTMLElement {
 
     const content = document.createElement("div");
     content.setAttribute("slot", "drawer-content");
-    content.className = "stack-md";
+    content.className = "pds-live-editor-drawer-content";
 
     const presetCard = document.createElement("section");
     presetCard.className = "card surface-elevated stack-sm";
@@ -2137,26 +3263,72 @@ class PdsLiveEdit extends HTMLElement {
     presetText.textContent = "Choose a base style";
     presetLabel.appendChild(presetText);
 
-    const presetSelect = document.createElement("select");
-    const presetOptions = getPresetOptions();
-    const activePreset = getActivePresetId();
+    let presetControlRendered = false;
+    try {
+      await waitForElementDefinition("pds-omnibox");
+
+      const presetOmnibox = document.createElement("pds-omnibox");
+      presetOmnibox.setAttribute("item-grid", "0 1fr 0");
+      presetOmnibox.setAttribute("placeholder", "Search presets...");
 
-    presetOptions.forEach((preset) => {
-      const option = document.createElement("option");
-      option.value = preset.id;
-      option.textContent = preset.name;
-      if (String(preset.id) === String(activePreset)) {
-        option.selected = true;
+      const activePresetId = getActivePresetId();
+      const activePresetName = getPresetNameById(activePresetId);
+      if (activePresetName) {
+        presetOmnibox.value = activePresetName;
       }
-      presetSelect.appendChild(option);
-    });
 
-    presetSelect.addEventListener("change", async (event) => {
-      const nextPreset = event.target?.value;
-      await applyPresetSelection(nextPreset);
-    });
+      const omniboxSettingsBuilder =
+        typeof PDS?.buildPresetOmniboxSettings === "function"
+          ? PDS.buildPresetOmniboxSettings.bind(PDS)
+          : null;
+
+      if (omniboxSettingsBuilder) {
+        presetOmnibox.settings = omniboxSettingsBuilder({
+          onSelect: async ({ preset, selection }) => {
+            if (selection?.disabled) return selection?.id;
+            const presetId = preset?.id || selection?.id;
+            await applyPresetSelection(presetId);
+            return presetId;
+          },
+        });
+      }
+
+      presetOmnibox.addEventListener("result-selected", (event) => {
+        const selectedText = event?.detail?.text;
+        if (typeof selectedText === "string" && selectedText.trim()) {
+          presetOmnibox.value = selectedText;
+        }
+      });
+
+      presetLabel.appendChild(presetOmnibox);
+      presetControlRendered = true;
+    } catch (error) {
+      console.warn("[PDS Live Edit] Preset omnibox unavailable, falling back to select.", error);
+    }
+
+    if (!presetControlRendered) {
+      const presetSelect = document.createElement("select");
+      const presetOptions = getPresetOptions();
+      const activePreset = getActivePresetId();
+
+      presetOptions.forEach((preset) => {
+        const option = document.createElement("option");
+        option.value = preset.id;
+        option.textContent = preset.name;
+        if (String(preset.id) === String(activePreset)) {
+          option.selected = true;
+        }
+        presetSelect.appendChild(option);
+      });
+
+      presetSelect.addEventListener("change", async (event) => {
+        const nextPreset = event.target?.value;
+        await applyPresetSelection(nextPreset);
+      });
+
+      presetLabel.appendChild(presetSelect);
+    }
 
-    presetLabel.appendChild(presetSelect);
     presetCard.appendChild(presetLabel);
 
     const themeCard = document.createElement("section");
@@ -2169,6 +3341,84 @@ class PdsLiveEdit extends HTMLElement {
     const themeToggle = document.createElement("pds-theme");
     themeCard.appendChild(themeToggle);
 
+    const configCard = document.createElement("section");
+    configCard.className = "card surface-elevated stack-sm";
+
+    const configTitle = document.createElement("h4");
+    configTitle.textContent = "Configuration";
+    configCard.appendChild(configTitle);
+
+    const configDescription = document.createElement("p");
+    configDescription.className = "text-muted";
+    configDescription.textContent =
+      "Edit the full design config generated from PDS metadata.";
+    configCard.appendChild(configDescription);
+
+    const configFormContainer = document.createElement("div");
+    configFormContainer.className = "stack-sm";
+    configCard.appendChild(configFormContainer);
+
+    const configFooter = document.createElement("div");
+    configFooter.className = "flex gap-sm";
+    configCard.appendChild(configFooter);
+    this._drawerConfigFormContainer = configFormContainer;
+    this._drawerConfigFooter = configFooter;
+
+    const fullDesign = shallowClone(PDS?.currentConfig?.design || {});
+    const fullConfigFormResult = await buildFullConfigForm(
+      fullDesign,
+      (event) => this._handleFormSubmit(event, fullConfigFormResult?.form),
+      () => this._handleUndo()
+    );
+
+    if (fullConfigFormResult?.form) {
+      fullConfigFormResult.form._undoBtn = fullConfigFormResult.undoBtn;
+      fullConfigFormResult.undoBtn.disabled = this._undoStack.length === 0;
+      configFormContainer.appendChild(fullConfigFormResult.form);
+      configFooter.appendChild(fullConfigFormResult.applyBtn);
+      configFooter.appendChild(fullConfigFormResult.undoBtn);
+    } else {
+      const unavailable = document.createElement("p");
+      unavailable.className = "text-muted";
+      unavailable.textContent =
+        "Full config metadata is unavailable in this runtime.";
+      configFormContainer.appendChild(unavailable);
+    }
+
+    const templateCard = document.createElement("section");
+    templateCard.className = "card surface-elevated stack-sm";
+
+    const templateTitle = document.createElement("h4");
+    templateTitle.textContent = "Canvas Templates";
+    templateCard.appendChild(templateTitle);
+
+    const templateCanvas = document.createElement("pds-live-template-canvas");
+    templateCanvas.addEventListener("pds:live-template:inject", async (event) => {
+      await this._applyImportResult(event?.detail?.result, { injectTemplate: true });
+    });
+    templateCard.appendChild(templateCanvas);
+
+    const importCard = document.createElement("section");
+    importCard.className = "card surface-elevated stack-sm";
+
+    const importTitle = document.createElement("h4");
+    importTitle.textContent = "Import & Convert";
+    importCard.appendChild(importTitle);
+
+    const importer = document.createElement("pds-live-importer");
+
+    importer.addEventListener("pds:live-import:result", async (event) => {
+      const result = event?.detail?.result;
+      if (!result) return;
+      await this._applyImportResult(result, {
+        injectTemplate: true,
+        importMode: event?.detail?.importMode,
+      });
+      this._endLiveEditSessionAfterImport();
+    });
+
+    importCard.append(importer);
+
     const exportCard = document.createElement("section");
     exportCard.className = "card surface-elevated stack-sm";
 
@@ -2228,54 +3478,49 @@ class PdsLiveEdit extends HTMLElement {
     exportNav.append(exportButton, exportMenu);
     exportCard.appendChild(exportNav);
 
-    const searchCard = document.createElement("section");
-    searchCard.className = "card surface-elevated stack-sm";
+    const resetButton = document.createElement("button");
+    resetButton.type = "button";
+    resetButton.className = "btn-outline pds-live-editor-reset-btn";
+    resetButton.textContent = "Reset Config";
+    resetButton.addEventListener("click", async () => {
+      await this.resetConfig();
+    });
 
-    const searchTitle = document.createElement("h4");
-    searchTitle.textContent = "Search PDS";
-    searchCard.appendChild(searchTitle);
+    const drawerFooter = document.createElement("div");
+    drawerFooter.className = "pds-live-editor-drawer-footer";
+    drawerFooter.appendChild(resetButton);
 
-    const omnibox = document.createElement("pds-omnibox");
-    omnibox.setAttribute("placeholder", "Search tokens, utilities, components...");
-    omnibox.settings = {
-      iconHandler: (item) => {
-        return item.icon ? `<pds-icon icon="${item.icon}"></pds-icon>` : null;
-      },
-      categories: {
-        Query: {
-          trigger: (options) => options.search.length >= 2,
-          getItems: async (options) => {
-            const query = (options.search || "").trim();
-            if (!query) return [];
-            try {
-              const results = await PDS.query(query);
-              return (results || []).map((result) => ({
-                text: result.text,
-                id: result.value,
-                icon: result.icon || "magnifying-glass",
-                category: result.category,
-                code: result.code,
-              }));
-            } catch (error) {
-              console.warn("Omnibox query failed:", error);
-              return [];
-            }
-          },
-          action: async (options) => {
-            if (options?.code && navigator.clipboard) {
-              await navigator.clipboard.writeText(options.code);
-              await PDS.toast("Copied token to clipboard", { type: "success" });
-            }
-          },
-        },
-      },
+    const accordion = document.createElement("section");
+    accordion.className = "accordion";
+    accordion.setAttribute("aria-label", "Design settings groups");
+
+    const buildAccordionGroup = (title, nodes = [], open = false, sectionId = "") => {
+      const details = document.createElement("details");
+      if (open) details.open = true;
+      if (sectionId) details.dataset.section = sectionId;
+
+      const summary = document.createElement("summary");
+      summary.textContent = title;
+
+      const body = document.createElement("div");
+      body.className = "stack-md";
+      nodes.forEach((node) => {
+        if (node) body.appendChild(node);
+      });
+
+      details.append(summary, body);
+      return details;
     };
-    searchCard.appendChild(omnibox);
 
-    content.appendChild(presetCard);
-    content.appendChild(themeCard);
-    content.appendChild(exportCard);
-    content.appendChild(searchCard);
+    accordion.appendChild(buildAccordionGroup("Preset & Theme", [presetCard, themeCard], true, "preset-theme"));
+    accordion.appendChild(buildAccordionGroup("Configuration", [configCard], false, "configuration"));
+    accordion.appendChild(buildAccordionGroup("Canvas", [templateCard], false, "canvas"));
+    accordion.appendChild(
+      buildAccordionGroup("Import & Export", [importCard, exportCard], false, "import-convert-export")
+    );
+
+    content.appendChild(accordion);
+    content.appendChild(drawerFooter);
 
     this._drawer.replaceChildren(header, content);
 
@@ -2290,6 +3535,161 @@ class PdsLiveEdit extends HTMLElement {
     await exportFromLiveEdit(format);
   }
 
+  _ensureLiveCanvasContainer() {
+    let container = document.getElementById("pds-live-edit-canvas");
+    if (container) return container;
+
+    container = document.createElement("section");
+    container.id = "pds-live-edit-canvas";
+    container.className = "card stack-md";
+
+    const heading = document.createElement("h3");
+    heading.textContent = "PDS Live Canvas";
+    const description = document.createElement("p");
+    description.className = "text-muted";
+    description.textContent = "Injected templates render here to preview config changes.";
+
+    const canvas = document.createElement("div");
+    canvas.id = "pds-live-edit-canvas-content";
+    canvas.className = "stack-md";
+
+    container.append(heading, description, canvas);
+    document.body.appendChild(container);
+    return container;
+  }
+
+  _injectTemplateIntoCanvas(template) {
+    if (!template || typeof template !== "object") return;
+    const container = this._ensureLiveCanvasContainer();
+    const canvas = container.querySelector("#pds-live-edit-canvas-content");
+    if (!canvas) return;
+    canvas.innerHTML = String(template.html || "");
+  }
+
+  async openDesignSettings() {
+    const target = this._activeTarget || document.body;
+    const quickPaths = this._activeTarget ? collectQuickContext(this._activeTarget).paths : [];
+
+    await this._openDrawer(target, quickPaths);
+
+    const drawer = this._drawer;
+    if (!drawer) return;
+
+    const presetGroup = drawer.querySelector('details[data-section="preset-theme"]');
+    if (presetGroup) {
+      presetGroup.setAttribute("open", "");
+    }
+
+    const configGroup = drawer.querySelector('details[data-section="configuration"]');
+    if (configGroup) {
+      configGroup.setAttribute("open", "");
+    }
+  }
+
+  async resetConfig() {
+    let confirmed = true;
+    if (typeof PDS?.ask === "function") {
+      confirmed = await PDS.ask(
+        "This clears your saved local configuration and reloads the page.",
+        {
+          title: "Reset Config?",
+          type: "confirm",
+          buttons: {
+            ok: { name: "Reset", variant: "danger" },
+            cancel: { name: "Cancel", cancel: true },
+          },
+        }
+      );
+    }
+
+    if (!confirmed) return false;
+
+    try {
+      window.localStorage.removeItem("pure-ds-config");
+    } catch (e) {}
+
+    window.location.reload();
+    return true;
+  }
+
+  async openImportDetailsFromToast(options = {}) {
+    const requestedFileName = String(options?.fileName || "");
+    const requestedSourceType = String(options?.sourceType || "");
+    const requestedImportMode = String(options?.importMode || "");
+    const target = this._activeTarget || document.body;
+    const quickPaths = this._activeTarget ? collectQuickContext(this._activeTarget).paths : [];
+
+    await this._openDrawer(target, quickPaths);
+
+    const drawer = this._drawer;
+    if (!drawer) return;
+
+    const importGroup = drawer.querySelector('details[data-section="import-convert-export"]');
+    if (importGroup) {
+      importGroup.setAttribute("open", "");
+    }
+
+    const tryOpenImporterDetails = (attempt = 0) => {
+      const importer = drawer.querySelector("pds-live-importer");
+      if (!importer) {
+        if (attempt < 12) setTimeout(() => tryOpenImporterDetails(attempt + 1), 100);
+        return;
+      }
+
+      if (typeof importer.openHistoryDetailsByMeta === "function") {
+        importer.openHistoryDetailsByMeta({
+          fileName: requestedFileName,
+          sourceType: requestedSourceType,
+          importMode: requestedImportMode,
+        });
+      }
+    };
+
+    tryOpenImporterDetails();
+  }
+
+  _endLiveEditSessionAfterImport() {
+    this._removeActiveUI();
+
+    if (this._drawer) {
+      if (typeof this._drawer.closeDrawer === "function") {
+        this._drawer.closeDrawer();
+      } else {
+        this._drawer.removeAttribute("open");
+      }
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("pds:live-edit:disable", {
+        bubbles: true,
+        composed: true,
+        detail: { reason: "import-complete" },
+      })
+    );
+  }
+
+  async _applyImportResult(result, options = {}) {
+    if (!result || typeof result !== "object") return;
+
+    const importMode = String(options?.importMode || result?.meta?.importMode || "convert-only");
+    const injectTemplate = options.injectTemplate !== false;
+    const validationBlocked = Boolean(result?.meta?.validationBlocked || result?.meta?.validation?.ok === false);
+    const shouldApplyPatch =
+      options.applyDesignPatch === true ||
+      (options.applyDesignPatch !== false && importMode !== "convert-only" && !validationBlocked);
+    const patch = result.designPatch;
+    const patchKeys =
+      patch && typeof patch === "object" ? Object.keys(patch).filter(Boolean) : [];
+
+    if (shouldApplyPatch && patchKeys.length > 0) {
+      await applyDesignPatch(patch);
+    }
+
+    if (injectTemplate && result.template?.html) {
+      this._injectTemplateIntoCanvas(result.template);
+    }
+  }
+
   async _handleFormSubmit(event, form) {
     if (!form || typeof form.getValuesFlat !== "function") return;
     
@@ -2308,9 +3708,24 @@ class PdsLiveEdit extends HTMLElement {
     }
     
     // Apply the changes
-    const flatValues = form.getValuesFlat();
-    const patch = {};
+    const eventJson = event?.detail?.json;
+    const hasEventPayload =
+      eventJson && typeof eventJson === "object" && Object.keys(eventJson).length > 0;
+    const flatValues = hasEventPayload
+      ? eventJson
+      : typeof form._normalizeFlatValues === "function"
+        ? form._normalizeFlatValues(form.getValuesFlat())
+        : form.getValuesFlat();
+    const sanitizedFlatValues = {};
     Object.entries(flatValues || {}).forEach(([path, value]) => {
+      if (path === FORM_THEME_CONTEXT_POINTER || path === FORM_THEME_CONTEXT_FIELD) {
+        return;
+      }
+      sanitizedFlatValues[path] = value;
+    });
+
+    const patch = {};
+    Object.entries(sanitizedFlatValues).forEach(([path, value]) => {
       setValueAtJsonPath(patch, path, value);
     });
     await applyDesignPatch(patch);