@pure-ds/core 0.6.9 → 0.6.11

package/src/js/pds-core/pds-live.js

@@ -4,7 +4,18 @@
  */
 import { Generator } from "./pds-generator.js";
 import { applyStyles, adoptLayers, adoptPrimitives } from "./pds-runtime.js";
-import { presets, defaultLog, PDS_CONFIG_RELATIONS } from "./pds-config.js";
+import {
+  presets,
+  defaultLog,
+  PDS_CONFIG_RELATIONS,
+  PDS_DESIGN_CONFIG_SPEC,
+  PDS_DEFAULT_CONFIG_EDITOR_METADATA,
+  PDS_DEFAULT_CONFIG_FORM_SCHEMA,
+  buildDesignConfigFormSchema,
+  getDesignConfigEditorMetadata,
+  validateDesignConfig,
+  validateInitConfig,
+} from "./pds-config.js";
 import { defaultPDSEnhancers } from "./pds-enhancers.js";
 import { defaultPDSEnhancerMetadata } from "./pds-enhancers-meta.js";
 import { resolvePublicAssetURL } from "./pds-paths.js";
@@ -21,12 +32,439 @@ import {
 } from "./pds-start-helpers.js";
 import {
   isPresetThemeCompatible,
+  normalizePresetThemes,
   resolveThemePreference,
 } from "./pds-theme-utils.js";
 
 let __liveApiReady = false;
 let __queryClass = null;
 
+const LIVE_EDIT_TOGGLE_ID = "pds-live-edit-toggle";
+const LIVE_EDIT_TOGGLE_STYLE_ID = "pds-live-edit-toggle-style";
+
+function whenDocumentBodyReady(callback) {
+  if (typeof document === "undefined" || typeof callback !== "function") return;
+  if (document.body) {
+    callback();
+    return;
+  }
+
+  const onReady = () => {
+    if (!document.body) return;
+    document.removeEventListener("DOMContentLoaded", onReady);
+    callback();
+  };
+
+  document.addEventListener("DOMContentLoaded", onReady, { once: true });
+}
+
+function mountLiveEdit(options = {}) {
+  const interactive = options?.interactive !== false;
+  if (typeof document === "undefined") return;
+  whenDocumentBodyReady(() => {
+    if (!document.querySelector("pds-live-edit")) {
+      const liveEditor = document.createElement("pds-live-edit");
+      if (!interactive) {
+        liveEditor.setAttribute("data-pds-live-settings-only", "true");
+      }
+      document.body.appendChild(liveEditor);
+    } else if (!interactive) {
+      const existing = document.querySelector("pds-live-edit");
+      if (existing) {
+        existing.setAttribute("data-pds-live-settings-only", "true");
+      }
+    }
+  });
+}
+
+function waitFor(ms = 0) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, Math.max(0, Number(ms) || 0));
+  });
+}
+
+async function ensureLiveEditInstance(options = {}) {
+  const mountIfMissing = options?.mountIfMissing !== false;
+  const interactive = options?.interactive !== false;
+  const requiredMethod =
+    typeof options?.requiredMethod === "string" && options.requiredMethod.trim()
+      ? options.requiredMethod.trim()
+      : "openDesignSettings";
+  const timeoutMs = Number.isFinite(Number(options?.timeoutMs))
+    ? Number(options.timeoutMs)
+    : 2400;
+
+  if (typeof document === "undefined") return null;
+  if (!mountIfMissing && !document.querySelector("pds-live-edit")) {
+    return null;
+  }
+  if (mountIfMissing) {
+    mountLiveEdit({ interactive });
+  }
+
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const liveEditor = document.querySelector("pds-live-edit");
+    if (!liveEditor) {
+      await waitFor(40);
+      continue;
+    }
+
+    if (typeof liveEditor?.[requiredMethod] === "function") {
+      return liveEditor;
+    }
+
+    if (
+      typeof customElements !== "undefined" &&
+      typeof customElements.whenDefined === "function"
+    ) {
+      try {
+        await Promise.race([customElements.whenDefined("pds-live-edit"), waitFor(80)]);
+      } catch (error) {
+        await waitFor(40);
+      }
+      continue;
+    }
+
+    await waitFor(40);
+  }
+
+  const fallback = document.querySelector("pds-live-edit");
+  if (fallback && typeof fallback?.[requiredMethod] === "function") {
+    return fallback;
+  }
+  return null;
+}
+
+function unmountLiveEdit() {
+  if (typeof document === "undefined") return;
+  const editors = document.querySelectorAll("pds-live-edit");
+  editors.forEach((editor) => {
+    if (typeof editor?.setInteractiveEditingEnabled === "function") {
+      editor.setInteractiveEditingEnabled(false);
+    }
+    editor.remove();
+  });
+}
+
+function getLiveEditInteractiveState(liveEditor) {
+  if (!liveEditor) return false;
+  if (typeof liveEditor.isInteractiveEditingEnabled === "function") {
+    return Boolean(liveEditor.isInteractiveEditingEnabled());
+  }
+  return true;
+}
+
+function ensureLiveEditToggleStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(LIVE_EDIT_TOGGLE_STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = LIVE_EDIT_TOGGLE_STYLE_ID;
+  style.textContent = /*css*/`
+    :where(.pds-live-edit-toggle-nav) {
+      position: fixed;
+      top: var(--spacing-3);
+      right: var(--spacing-3);
+      z-index: var(--z-dropdown, 1050);
+    }
+
+    :where(.pds-live-edit-toggle-nav menu) {
+      min-width: 220px;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu a[data-pds-live-action]) {
+      cursor: pointer;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item) {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item .pds-live-editor-menu) {
+      display: grid;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2);
+      border-bottom: var(--border-width-thin) solid var(--color-border);
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item label) {
+      display: grid;
+      gap: var(--spacing-1);
+      margin: 0;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li.pds-live-shared-quick-mode-item label > span) {
+      font-size: var(--font-size-xs);
+      color: var(--color-text-muted);
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li > hr) {
+      border: 0;
+      border-top: var(--border-width-thin) solid var(--color-border);
+      margin: var(--spacing-2) 0 var(--spacing-1) 0;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu li:has(> hr)) {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      pointer-events: none;
+    }
+
+    :where(.pds-live-edit-toggle-nav menu a[data-pds-live-action="reset-config"]) {
+      color: var(--color-danger-700);
+    }
+
+    :where(.pds-live-edit-toggle-nav menu a[data-pds-live-action="reset-config"] pds-icon) {
+      color: var(--color-danger-700);
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function updateLiveEditToggleState(button, isEnabled) {
+  if (!button) return;
+
+  button.classList.toggle("btn-primary", isEnabled);
+  button.classList.toggle("btn-secondary", !isEnabled);
+  button.setAttribute("aria-pressed", isEnabled ? "true" : "false");
+
+  const label = "PDS Manager";
+  button.setAttribute("aria-label", label);
+  button.setAttribute("title", label);
+}
+
+async function ensureLiveEditToggleButton() {
+  if (typeof document === "undefined") return null;
+
+  ensureLiveEditToggleStyles();
+
+  let button = document.getElementById(LIVE_EDIT_TOGGLE_ID);
+  if (!button) {
+    const nav = document.createElement("nav");
+    nav.className = "pds-live-edit-toggle-nav";
+    nav.setAttribute("data-dropdown", "");
+    nav.setAttribute("data-mode", "auto");
+    nav.setAttribute("data-pds-live-edit-ignore", "true");
+
+    button = document.createElement("button");
+    button.id = LIVE_EDIT_TOGGLE_ID;
+    button.type = "button";
+    button.className = "icon-only btn-secondary";
+    button.setAttribute("data-pds-live-edit-ignore", "true");
+    button.innerHTML = '<pds-icon icon="cursor-click" size="sm"></pds-icon>';
+
+    const menu = document.createElement("menu");
+    menu.setAttribute("data-pds-live-edit-ignore", "true");
+
+    const createItem = (action, label, icon) => {
+      const li = document.createElement("li");
+      const link = document.createElement("a");
+      link.href = "#";
+      link.dataset.pdsLiveAction = action;
+      link.setAttribute("data-pds-live-edit-ignore", "true");
+
+      const iconEl = document.createElement("pds-icon");
+      iconEl.setAttribute("icon", icon);
+      iconEl.setAttribute("size", "sm");
+
+      link.append(iconEl, document.createTextNode(` ${label}`));
+      li.appendChild(link);
+      return li;
+    };
+
+    const createSeparator = () => {
+      const li = document.createElement("li");
+      li.setAttribute("data-pds-live-edit-ignore", "true");
+      const hr = document.createElement("hr");
+      hr.setAttribute("aria-hidden", "true");
+      li.appendChild(hr);
+      return li;
+    };
+
+    menu.appendChild(createItem("toggle", "Toggle live editing", "pencil"));
+    menu.appendChild(createItem("open-settings", "Open Settings", "gear"));
+    menu.appendChild(createSeparator());
+    menu.appendChild(createItem("reset-config", "Reset Config", "arrow-counter-clockwise"));
+
+    await ensureSharedQuickModeToggleMenuItem(menu);
+
+    nav.append(button, menu);
+
+    whenDocumentBodyReady(() => {
+      if (!document.getElementById(LIVE_EDIT_TOGGLE_ID)) {
+        document.body.appendChild(nav);
+      }
+    });
+  }
+
+  return button;
+}
+
+async function ensureSharedQuickModeToggleMenuItem(menu) {
+  if (!(menu instanceof Element)) return;
+  if (menu.__pdsLiveSharedMenuItemInFlight) {
+    return menu.__pdsLiveSharedMenuItemInFlight;
+  }
+
+  menu.__pdsLiveSharedMenuItemInFlight = (async () => {
+  menu
+    .querySelectorAll("li.pds-live-shared-quick-mode-item")
+    .forEach((node) => node.remove());
+
+  const liveEditor = await ensureLiveEditInstance({
+    mountIfMissing: true,
+    interactive: false,
+    requiredMethod: "createSharedQuickModeMenuItem",
+    timeoutMs: 7000,
+  });
+
+  if (!liveEditor || typeof liveEditor.createSharedQuickModeMenuItem !== "function") {
+    return;
+  }
+
+  const sharedItem = await liveEditor.createSharedQuickModeMenuItem();
+  if (!(sharedItem instanceof Element)) return;
+
+  sharedItem.classList.add("pds-live-shared-quick-mode-item");
+
+  const resetLink = menu.querySelector('a[data-pds-live-action="reset-config"]');
+  const resetItem = resetLink?.closest("li") || null;
+  const previousItem = resetItem?.previousElementSibling || null;
+  const separatorBeforeReset =
+    previousItem && previousItem.querySelector?.(":scope > hr") ? previousItem : null;
+
+  if (separatorBeforeReset) {
+    menu.insertBefore(sharedItem, separatorBeforeReset);
+    return;
+  }
+
+  if (resetItem) {
+    menu.insertBefore(sharedItem, resetItem);
+    return;
+  }
+
+  menu.appendChild(sharedItem);
+  })();
+
+  try {
+    await menu.__pdsLiveSharedMenuItemInFlight;
+  } finally {
+    menu.__pdsLiveSharedMenuItemInFlight = null;
+  }
+}
+
+function teardownLiveEditToggle() {
+  if (typeof document === "undefined") return;
+  const button = document.getElementById(LIVE_EDIT_TOGGLE_ID);
+  if (button) {
+    const nav = button.closest(".pds-live-edit-toggle-nav");
+    if (nav) {
+      nav.remove();
+    } else {
+      button.remove();
+    }
+  }
+  const style = document.getElementById(LIVE_EDIT_TOGGLE_STYLE_ID);
+  if (style) style.remove();
+  unmountLiveEdit();
+}
+
+async function initializeLiveEditToggle() {
+  if (typeof document === "undefined") return;
+  const toggleButton = await ensureLiveEditToggleButton();
+  if (!toggleButton) return;
+
+  const setLiveEditEnabled = async (enabled) => {
+    if (enabled) {
+      const liveEditor = await ensureLiveEditInstance({ mountIfMissing: true });
+      if (liveEditor && typeof liveEditor.setInteractiveEditingEnabled === "function") {
+        liveEditor.setInteractiveEditingEnabled(true);
+      }
+    } else {
+      unmountLiveEdit();
+    }
+    updateLiveEditToggleState(toggleButton, enabled);
+  };
+
+  void setLiveEditEnabled(false);
+
+  const actionHost = toggleButton.closest(".pds-live-edit-toggle-nav") || toggleButton;
+  if (toggleButton.__pdsLiveEditActionHandler) {
+    actionHost.removeEventListener("click", toggleButton.__pdsLiveEditActionHandler);
+  }
+
+  const actionHandler = async (event) => {
+    const actionElement = event.target?.closest?.("[data-pds-live-action]");
+    if (!actionElement) return;
+
+    event.preventDefault();
+    const action = String(actionElement.dataset.pdsLiveAction || "");
+
+    if (action === "toggle") {
+      const liveEditor = await ensureLiveEditInstance({ mountIfMissing: false });
+      const isEnabled = getLiveEditInteractiveState(liveEditor);
+      await setLiveEditEnabled(!isEnabled);
+      return;
+    }
+
+    if (action === "open-settings") {
+      const liveEditor = await ensureLiveEditInstance({
+        mountIfMissing: true,
+        requiredMethod: "openDesignSettings",
+        interactive: false,
+      });
+      if (liveEditor && typeof liveEditor.setInteractiveEditingEnabled === "function") {
+        liveEditor.setInteractiveEditingEnabled(false);
+      }
+      if (liveEditor && typeof liveEditor.openDesignSettings === "function") {
+        updateLiveEditToggleState(toggleButton, false);
+        await liveEditor.openDesignSettings();
+      }
+      return;
+    }
+
+    if (action === "reset-config") {
+      const liveEditor = await ensureLiveEditInstance({
+        mountIfMissing: true,
+        requiredMethod: "resetConfig",
+        interactive: false,
+      });
+      updateLiveEditToggleState(toggleButton, false);
+      if (liveEditor && typeof liveEditor.resetConfig === "function") {
+        await liveEditor.resetConfig();
+      }
+      return;
+    }
+  };
+
+  toggleButton.__pdsLiveEditActionHandler = actionHandler;
+  actionHost.addEventListener("click", actionHandler);
+
+  if (toggleButton.__pdsLiveEditDisableHandler) {
+    document.removeEventListener("pds:live-edit:disable", toggleButton.__pdsLiveEditDisableHandler);
+  }
+  if (toggleButton.__pdsLiveEditEnableHandler) {
+    document.removeEventListener("pds:live-edit:enable", toggleButton.__pdsLiveEditEnableHandler);
+  }
+
+  const disableHandler = () => {
+    void setLiveEditEnabled(false);
+  };
+
+  const enableHandler = () => {
+    void setLiveEditEnabled(true);
+  };
+
+  toggleButton.__pdsLiveEditDisableHandler = disableHandler;
+  document.addEventListener("pds:live-edit:disable", disableHandler);
+  toggleButton.__pdsLiveEditEnableHandler = enableHandler;
+  document.addEventListener("pds:live-edit:enable", enableHandler);
+}
+
 function getStoredLiveConfig() {
   if (typeof window === "undefined" || !window.localStorage) return null;
   try {
@@ -90,7 +528,143 @@ function applyStoredConfigOverrides(baseConfig) {
   return nextConfig;
 }
 
-async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIfNeeded }) {
+function buildPresetOmniboxSettings(PDS, options = {}) {
+  const {
+    hideCategory = true,
+    itemGrid = "45px 1fr",
+    includeIncompatible = true,
+    disableIncompatible = true,
+    categoryName = "Presets",
+    theme,
+    onSelect,
+    iconHandler,
+  } = options || {};
+
+  const resolvedTheme = resolveThemePreference(theme ?? PDS?.theme);
+
+  const defaultIconHandler = (item) => {
+    const preset = findPresetById(item?.id);
+    const colors = preset?.colors || {};
+    const primary = colors?.primary;
+    const secondary = colors?.secondary;
+    const accent = colors?.accent;
+
+    if (primary && secondary && accent) {
+      return `<span style="display:flex;gap:1px;flex-shrink:0;" aria-hidden="true">
+        <span style="display:inline-block;width:10px;height:20px;background-color:${primary};">&nbsp;</span>
+        <span style="display:inline-block;width:10px;height:20px;background-color:${secondary};">&nbsp;</span>
+        <span style="display:inline-block;width:10px;height:20px;background-color:${accent};">&nbsp;</span>
+      </span>`;
+    }
+
+    if (item?.icon) {
+      return `<pds-icon icon="${item.icon}" size="sm"></pds-icon>`;
+    }
+    return "";
+  };
+
+  const getPresetEntries = () => {
+    const source = PDS?.presets || {};
+    return Object.values(source || {}).filter((preset) => {
+      const presetId = preset?.id || preset?.name;
+      return Boolean(presetId);
+    });
+  };
+
+  const findPresetById = (presetId) => {
+    if (!presetId) return null;
+    const entries = getPresetEntries();
+    return (
+      entries.find((preset) => String(preset?.id || preset?.name) === String(presetId)) ||
+      null
+    );
+  };
+
+  return {
+    hideCategory,
+    itemGrid,
+    iconHandler:
+      typeof iconHandler === "function" ? iconHandler : defaultIconHandler,
+    categories: {
+      [categoryName]: {
+        trigger: () => true,
+        getItems: (context = {}) => {
+          const query = String(context?.search || "").toLowerCase().trim();
+          const entries = getPresetEntries();
+
+          return entries
+            .filter((preset) => {
+              const name = String(preset?.name || preset?.id || "").toLowerCase();
+              const description = String(preset?.description || "").toLowerCase();
+              const tags = Array.isArray(preset?.tags)
+                ? preset.tags.map((tag) => String(tag).toLowerCase())
+                : [];
+
+              if (query) {
+                const matchesQuery =
+                  name.includes(query) ||
+                  description.includes(query) ||
+                  tags.some((tag) => tag.includes(query));
+                if (!matchesQuery) return false;
+              }
+
+              const compatible = isPresetThemeCompatible(preset, resolvedTheme);
+              if (!includeIncompatible && !compatible) return false;
+              return true;
+            })
+            .map((preset) => {
+              const presetId = preset?.id || preset?.name;
+              const compatible = isPresetThemeCompatible(preset, resolvedTheme);
+              const supportedThemes = normalizePresetThemes(preset);
+              const themeHint =
+                supportedThemes.length === 1
+                  ? `${supportedThemes[0]} only`
+                  : `Not available in ${resolvedTheme} mode`;
+              const baseDescription = String(preset?.description || "").trim();
+              const description = compatible
+                ? baseDescription
+                : baseDescription
+                  ? `${baseDescription} - ${themeHint}`
+                  : themeHint;
+
+              return {
+                id: presetId,
+                text: preset?.name || String(presetId),
+                description,
+                icon: "palette",
+                class:
+                  !compatible && disableIncompatible ? "disabled" : "",
+                disabled: !compatible && disableIncompatible,
+                tooltip: !compatible ? themeHint : "",
+              };
+            })
+            .sort((a, b) =>
+              String(a.text || "").localeCompare(String(b.text || ""))
+            );
+        },
+        action: async (selection) => {
+          if (!selection?.id) return selection?.id;
+          if (selection?.disabled) return selection?.id;
+
+          const preset = findPresetById(selection.id);
+          if (!preset) return selection?.id;
+
+          if (typeof onSelect === "function") {
+            return await onSelect({ preset, selection, resolvedTheme });
+          }
+
+          if (typeof PDS?.applyLivePreset === "function") {
+            await PDS.applyLivePreset(preset.id || selection.id);
+          }
+
+          return preset.id || selection.id;
+        },
+      },
+    },
+  };
+}
+
+async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIfNeeded, emitConfigChanged }) {
   if (__liveApiReady) return;
 
   const [ontologyModule, enumsModule, queryModule, commonModule] =
@@ -113,9 +687,21 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
   PDS.common = commonModule || {};
   PDS.presets = presets;
   PDS.configRelations = PDS_CONFIG_RELATIONS;
+  PDS.configSpec = PDS_DESIGN_CONFIG_SPEC;
+  PDS.configEditorMetadata = PDS_DEFAULT_CONFIG_EDITOR_METADATA;
+  PDS.configFormSchema = PDS_DEFAULT_CONFIG_FORM_SCHEMA;
+  PDS.buildConfigFormSchema = buildDesignConfigFormSchema;
+  PDS.getConfigEditorMetadata = getDesignConfigEditorMetadata;
   PDS.enhancerMetadata = defaultPDSEnhancerMetadata;
   PDS.applyStyles = function(generator) {
-    return applyStyles(generator || Generator.instance);
+    const targetGenerator = generator || Generator.instance;
+    applyStyles(targetGenerator);
+    if (typeof emitConfigChanged === "function") {
+      emitConfigChanged({
+        mode: "live",
+        source: "live:styles-applied",
+      });
+    }
   };
   PDS.adoptLayers = function(shadowRoot, layers, additionalSheets) {
     return adoptLayers(
@@ -140,6 +726,9 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
     const queryEngine = new __queryClass(PDS);
     return await queryEngine.search(question);
   };
+  PDS.buildPresetOmniboxSettings = function(options = {}) {
+    return buildPresetOmniboxSettings(PDS, options);
+  };
 
   PDS.applyLivePreset = async function(presetId, options = {}) {
     if (!presetId) return false;
@@ -158,6 +747,8 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
     const normalized = normalizeInitConfig(inputConfig, {}, {
       presets,
       defaultLog,
+      validateDesignConfig,
+      validateInitConfig,
     });
 
     const resolvedTheme = resolveThemePreference(PDS.theme);
@@ -189,7 +780,7 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
       }
     }
 
-    await applyStyles(generator);
+    PDS.applyStyles?.(generator);
 
     const presetInfo = normalized.presetInfo || { id: presetId, name: presetId };
     PDS.currentPreset = presetInfo;
@@ -199,6 +790,12 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
       design: structuredClone(normalized.generatorConfig.design),
       theme: normalized.generatorConfig.theme || baseConfig.theme,
     });
+    PDS.configEditorMetadata = getDesignConfigEditorMetadata(
+      normalized.generatorConfig.design
+    );
+    PDS.configFormSchema = buildDesignConfigFormSchema(
+      normalized.generatorConfig.design
+    );
 
     const persist = options?.persist !== false;
     if (persist && typeof window !== "undefined") {
@@ -293,7 +890,7 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
 }
 
 
-export async function startLive(PDS, config, { emitReady, applyResolvedTheme, setupSystemListenerIfNeeded }) {
+export async function startLive(PDS, config, { emitReady, emitConfigChanged, applyResolvedTheme, setupSystemListenerIfNeeded }) {
   if (!config || typeof config !== "object") {
     throw new Error(
       "PDS.start({ mode: 'live', ... }) requires a valid configuration object"
@@ -303,7 +900,7 @@ export async function startLive(PDS, config, { emitReady, applyResolvedTheme, se
   config = applyStoredConfigOverrides(config);
 
   // Attach live-only API surface (ontology, presets, query, etc.)
-  await __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIfNeeded });
+  await __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIfNeeded, emitConfigChanged });
   attachFoucListener(PDS);
 
   // FOUC Prevention: Use constructable stylesheet for synchronous, immediate effect
@@ -351,7 +948,12 @@ export async function startLive(PDS, config, { emitReady, applyResolvedTheme, se
     });
 
     // 2) Normalize first-arg API: support { preset, design, enhancers }
-    const normalized = normalizeInitConfig(config, {}, { presets, defaultLog });
+    const normalized = normalizeInitConfig(config, {}, {
+      presets,
+      defaultLog,
+      validateDesignConfig,
+      validateInitConfig,
+    });
     if (manageTheme && !isPresetThemeCompatible(normalized.generatorConfig.design, resolvedTheme)) {
       const presetName =
         normalized.presetInfo?.name ||
@@ -441,7 +1043,7 @@ export async function startLive(PDS, config, { emitReady, applyResolvedTheme, se
 
     // Apply styles globally if requested (default behavior)
     if (applyGlobalStyles) {
-      await applyStyles(Generator.instance);
+      PDS.applyStyles?.(Generator.instance);
 
       if (typeof window !== "undefined") {
         setTimeout(() => {
@@ -509,18 +1111,31 @@ export async function startLive(PDS, config, { emitReady, applyResolvedTheme, se
       theme: resolvedTheme,
       enhancers: mergedEnhancers,
     });
+    PDS.configEditorMetadata = getDesignConfigEditorMetadata(
+      normalized.generatorConfig.design
+    );
+    PDS.configFormSchema = buildDesignConfigFormSchema(
+      normalized.generatorConfig.design
+    );
+    if (typeof emitConfigChanged === "function") {
+      emitConfigChanged({
+        mode: "live",
+        source: "live:config-applied",
+        preset: normalized.generatorConfig.preset,
+      });
+    }
 
-    
-    if (config?.liveEdit && typeof document !== "undefined") {
+    if (typeof document !== "undefined") {
       try {
-        if (!document.querySelector("pds-live-edit")) {
+        if (config?.liveEdit) {
           setTimeout(() => {
-            const liveEditor = document.createElement("pds-live-edit");
-            document.body.appendChild(liveEditor);  
-          }, 1000);
+            void initializeLiveEditToggle();
+          }, 0);
+        } else {
+          teardownLiveEditToggle();
         }
       } catch (error) {
-        generatorConfig?.log?.("warn", "Live editor failed to start:", error);
+        generatorConfig?.log?.("warn", "Live editor toggle failed to start:", error);
       }
     }