@pure-ds/core 0.6.8 → 0.6.10

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

@@ -137,6 +137,7 @@ const SURFACE_CONTEXT_PATHS = new Set([
 const DARK_MODE_PATH_MARKER = ".darkMode.";
 const QUICK_EDIT_LIMIT = 4;
 const DROPDOWN_VIEWPORT_PADDING = 8;
+const FONT_FAMILY_PATH_REGEX = /^typography\.fontFamily/i;
 
 function isHoverCapable() {
   if (typeof window === "undefined" || !window.matchMedia) return false;
@@ -187,14 +188,22 @@ ${EDITOR_TAG} {
 .${DROPDOWN_CLASS} menu {
   min-width: max-content;
   max-width: 350px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: visible;
 }
 .${DROPDOWN_CLASS} .pds-live-editor-menu {
+  display: block;
+  background-color: var(--color-surface-base);
   padding: var(--spacing-1);
   max-width: 350px;
   padding-bottom: 0;
+  overflow: visible;
 }
 .${DROPDOWN_CLASS} .pds-live-editor-form-container {
   padding-bottom: var(--spacing-2);
+  overflow: visible;
 }
 .${DROPDOWN_CLASS} .pds-live-editor-title {
   display: block;
@@ -443,6 +452,33 @@ function collectQuickRulePaths(target) {
   }).flatMap((rule) => rule.paths);
 }
 
+function isHeadingElement(target) {
+  if (!target || !(target instanceof Element)) return false;
+  const tag = target.tagName?.toLowerCase?.() || "";
+  if (/^h[1-6]$/.test(tag)) return true;
+  if (target.getAttribute("role") === "heading") return true;
+  return false;
+}
+
+function hasMeaningfulText(target) {
+  if (!target || !(target instanceof Element)) return false;
+  const tag = target.tagName?.toLowerCase?.() || "";
+  if (["script", "style", "svg", "path", "defs", "symbol"].includes(tag)) return false;
+  const text = target.textContent || "";
+  return text.trim().length > 0;
+}
+
+function collectTypographyPathsForTarget(target) {
+  if (!target || !(target instanceof Element)) return [];
+  if (isHeadingElement(target)) {
+    return ["typography.fontFamilyHeadings"];
+  }
+  if (hasMeaningfulText(target)) {
+    return ["typography.fontFamilyBody"];
+  }
+  return [];
+}
+
 function pathExistsInDesign(path, design) {
   if (!path || !design) return false;
   const segments = path.split(".");
@@ -455,7 +491,7 @@ function pathExistsInDesign(path, design) {
   return true;
 }
 
-function filterPathsByContext(target, paths) {
+function filterPathsByContext(target, paths, alwaysAllow = new Set()) {
   if (!target || !paths.length) return paths;
   const isGlobal = target.matches("body, main");
   const isInForm = Boolean(target.closest("form, pds-form"));
@@ -468,6 +504,7 @@ function filterPathsByContext(target, paths) {
   const design = PDS?.currentConfig?.design || {};
 
   return paths.filter((path) => {
+    if (alwaysAllow.has(path)) return true;
     if (!theme.isDark && path.includes(DARK_MODE_PATH_MARKER)) return false;
     if (path.startsWith("typography.") && !isGlobal) return false;
     if (GLOBAL_LAYOUT_PATHS.has(path) && !isGlobal) return false;
@@ -560,6 +597,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;
@@ -768,7 +861,10 @@ function collectPathsFromComputedStyles(target) {
       const trimmed = value.trim();
       
       // Extract var refs from the value (handles var() with fallbacks)
-      addVarSet(extractAllVarRefs(trimmed));
+      const directVarRefs = extractAllVarRefs(trimmed);
+      addVarSet(directVarRefs);
+      const hasDirectVarRefs = directVarRefs.size > 0;
+      if (hasDirectVarRefs) return;
       
       if (trimmed && valueToVars.has(trimmed)) {
         valueToVars.get(trimmed).forEach((varName) => addVarName(varName));
@@ -829,15 +925,18 @@ function collectQuickContext(target) {
   const byComputed = computed?.paths || [];
   const byRelations = collectPathsFromRelations(target);
   const byQuickRules = collectQuickRulePaths(target);
+  const byTypographyContext = collectTypographyPathsForTarget(target);
   const hints = computed?.hints || {};
   const debug = computed?.debug || { vars: [], paths: [] };
+  const alwaysAllow = new Set(byTypographyContext);
 
   // Prioritize quick rule paths first (selector-based), then computed/relations
   const filtered = filterPathsByContext(target, [
+    ...byTypographyContext,
     ...byQuickRules,
     ...byComputed,
     ...byRelations,
-  ]);
+  ], alwaysAllow);
   if (!filtered.length) {
     return {
       paths: normalizePaths(DEFAULT_QUICK_PATHS),
@@ -860,6 +959,252 @@ function collectDrawerPaths(quickPaths) {
   return normalizePaths([...quickPaths, ...expanded]);
 }
 
+function splitFontFamilyStack(value) {
+  if (typeof value !== "string") return [];
+  const input = value.trim();
+  if (!input) return [];
+  const parts = [];
+  let buffer = "";
+  let quote = null;
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input[i];
+    if (quote) {
+      buffer += char;
+      if (char === quote && input[i - 1] !== "\\") {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      buffer += char;
+      continue;
+    }
+    if (char === ",") {
+      const token = buffer.trim();
+      if (token) parts.push(token);
+      buffer = "";
+      continue;
+    }
+    buffer += char;
+  }
+  const last = buffer.trim();
+  if (last) parts.push(last);
+  return parts;
+}
+
+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;
+
+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 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 (typeof mod?.loadGoogleFont === "function") {
+          return mod.loadGoogleFont;
+        }
+      } catch (e) {}
+    }
+    return null;
+  })();
+  return loadGoogleFontFnPromise;
+}
+
+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 = [];
+  const addItem = (fontFamily) => {
+    const normalized = String(fontFamily || "").trim().replace(/\s+/g, " ");
+    if (!normalized || seen.has(normalized)) return;
+    seen.add(normalized);
+    items.push({
+      //index: items.length,
+      id: normalized,
+      value: normalized,
+      text: normalized,
+      style: `font-family: ${normalized}; font-size: ${previewFontSize};`,
+    });
+  };
+
+  presets.forEach((preset) => {
+    const typography = preset?.typography || {};
+    ["fontFamilyHeadings", "fontFamilyBody"].forEach((key) => {
+      const stack = typography[key];
+      if (typeof stack !== "string" || !stack.trim()) return;
+
+      addItem(stack);
+      const parts = splitFontFamilyStack(stack);
+      parts.forEach((part) => addItem(part));
+      for (let i = 1; i < parts.length; i += 1) {
+        addItem(parts.slice(i).join(", "));
+      }
+    });
+  });
+
+  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 filterItems = (items, search) => {
+    const query = String(search || "").trim().toLowerCase();
+    if (!query) return items;
+    return items.filter((item) => {
+      const text = String(
+        item?.text || item?.id || item?.element?.textContent || ""
+      ).toLowerCase();
+      return text.includes(query);
+    });
+  };
+
+
+  return {   
+    //debug: true,
+    itemGrid: "0 1fr 0",
+    hideCategory: true,
+    iconHandler: (item) => {      
+      return "";
+    },
+    categories: {
+      FontFamilies: {
+        trigger: () => true,
+        getItems: async (options) => {
+          const previewFontSize = resolveFontFamilyPreviewFontSize(options?.control);
+          const allItems = getPresetFontFamilyVariations(previewFontSize);
+          const items = filterItems(allItems, options?.search);
+          
+          await loadGoogleFontsForFontFamilyItems(items);
+
+          return items;
+        },
+        action: (options) => {
+          const input = document.querySelector("pds-omnibox");
+          if (input) {
+            input.value = options.text;
+          }
+        },
+      },
+    },
+  };
+}
+
 function buildSchemaFromPaths(paths, design, hints = {}) {
   const schema = { type: "object", properties: {} };
   const uiSchema = {};
@@ -900,7 +1245,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);
   };
@@ -914,6 +1259,13 @@ function buildSchemaFromPaths(paths, design, hints = {}) {
     if (!parent) {
       parent = { type: "object", title: titleize(category), properties: {} };
       schema.properties[category] = parent;
+
+      if (category === "colors") {
+        uiSchema[`/${category}`] = {
+          "ui:layout": "flex",
+          "ui:layoutOptions": { wrap: true, gap: "sm" },
+        };
+      }
     }
 
     let current = parent;
@@ -923,8 +1275,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
@@ -973,6 +1329,8 @@ function buildSchemaFromPaths(paths, design, hints = {}) {
           uiEntry["ui:step"] = bounds.step;
         } else if (isColorValue(value, path)) {
           uiEntry["ui:widget"] = "input-color";
+        } else if (FONT_FAMILY_PATH_REGEX.test(path) && schemaType === "string") {
+          uiEntry["ui:widget"] = "font-family-omnibox";
         }
 
         const isTextOrNumberInput =
@@ -1089,6 +1447,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);
@@ -1164,6 +1526,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({
@@ -1173,15 +1546,208 @@ async function applyPresetSelection(presetId) {
   await applyDesignPatch({});
 }
 
+function figmafyTokens(rawTokens) {
+  const isPlainObject = (value) =>
+    value !== null && typeof value === "object" && !Array.isArray(value);
+
+  const detectType = (path, key, value) => {
+    const root = path[0];
+
+    if (root === "colors") {
+      if (key === "scheme") return "string";
+      return "color";
+    }
+
+    if (root === "spacing" || root === "radius" || root === "borderWidths") {
+      return "dimension";
+    }
+
+    if (root === "typography") {
+      const group = path[1];
+      if (group === "fontFamily") return "fontFamily";
+      if (group === "fontSize") return "fontSize";
+      if (group === "fontWeight") return "fontWeight";
+      if (group === "lineHeight") return "lineHeight";
+      return "string";
+    }
+
+    if (root === "shadows") return "shadow";
+    if (root === "layout") return "dimension";
+    if (root === "transitions") return "duration";
+    if (root === "zIndex") return "number";
+
+    if (root === "icons") {
+      if (key === "defaultSize" || path.includes("sizes")) {
+        return "dimension";
+      }
+      return "string";
+    }
+
+    if (typeof value === "number") {
+      return "number";
+    }
+
+    if (typeof value === "string") {
+      if (/^\d+(\.\d+)?ms$/.test(value)) return "duration";
+      if (/^\d+(\.\d+)?(px|rem|em|vh|vw|%)$/.test(value)) return "dimension";
+
+      if (
+        /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value) ||
+        /^(rgb|rgba|hsl|hsla|oklab|lab)\(/.test(value)
+      ) {
+        return "color";
+      }
+    }
+
+    return undefined;
+  };
+
+  const walk = (node, path = []) => {
+    if (node == null) return node;
+
+    if (Array.isArray(node)) {
+      return node.map((item, index) => walk(item, path.concat(String(index))));
+    }
+
+    if (isPlainObject(node)) {
+      if (
+        Object.prototype.hasOwnProperty.call(node, "value") &&
+        (Object.prototype.hasOwnProperty.call(node, "type") ||
+          Object.keys(node).length === 1)
+      ) {
+        return node;
+      }
+
+      const result = {};
+      for (const [key, value] of Object.entries(node)) {
+        result[key] = walk(value, path.concat(key));
+      }
+      return result;
+    }
+
+    const key = path[path.length - 1] ?? "";
+    const type = detectType(path, key, node);
+    let value = node;
+
+    if (type === "number" && typeof value === "string") {
+      const num = Number(value);
+      if (!Number.isNaN(num)) value = num;
+    }
+
+    return type ? { value, type } : { value };
+  };
+
+  return walk(rawTokens, []);
+}
+
+function downloadTextFile(content, filename, mimeType) {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+function getLiveEditExportConfig() {
+  const stored = getStoredConfig();
+  const design = shallowClone(PDS?.currentConfig?.design || stored?.design || {});
+  const preset = stored?.preset || PDS?.currentConfig?.preset || PDS?.currentPreset || null;
+  return {
+    preset,
+    design,
+  };
+}
+
+function buildConfigModuleContent(config) {
+  return `export const pdsConfig = ${JSON.stringify(config, null, 2)};\n\nexport default pdsConfig;\n`;
+}
+
+async function exportFromLiveEdit(format) {
+  try {
+    if (format === "config") {
+      const config = getLiveEditExportConfig();
+      const content = buildConfigModuleContent(config);
+      downloadTextFile(content, "pds.config.js", "text/javascript");
+      await PDS?.toast?.("Exported config file", { type: "success" });
+      return;
+    }
+
+    if (format === "figma") {
+      const Generator = await getGeneratorClass();
+      const generator = Generator?.instance;
+      if (!generator || typeof generator.generateTokens !== "function") {
+        throw new Error("Token generator unavailable");
+      }
+
+      const rawTokens = generator.generateTokens();
+      const figmaTokens = figmafyTokens(rawTokens);
+      const content = JSON.stringify(figmaTokens, null, 2);
+      downloadTextFile(content, "design-tokens.figma.json", "application/json");
+      await PDS?.toast?.("Exported Figma tokens", { type: "success" });
+      return;
+    }
+  } catch (error) {
+    console.warn("[pds-live-edit] Export failed", error);
+    await PDS?.toast?.("Export failed", { type: "error" });
+  }
+}
+
 function setFormSchemas(form, schema, uiSchema, design) {
   form.jsonSchema = schema;
   form.uiSchema = uiSchema;
   form.values = shallowClone(design);
 }
 
-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(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", "");
   form.options = {
     layouts: {
@@ -1190,68 +1756,464 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
     enhancements: {
       rangeOutput: true,
     },
+    ...(formOptions && typeof formOptions === "object" ? formOptions : {}),
   };
-  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);
+
+  form.defineRenderer(
+    "font-family-omnibox",
+    ({ id, path, value, attrs, set }) => {
+      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();
+      };
+
+      const categories = Object.fromEntries(
+        Object.entries(fontFamilyOmniboxSettings.categories || {}).map(
+          ([categoryName, categoryConfig]) => {
+            const originalAction = categoryConfig?.action;
+            return [
+              categoryName,
+              {
+                ...categoryConfig,
+                action: (...args) => {
+                  const [options, selectionEvent] = args;
+                  const actionResult =
+                    typeof originalAction === "function"
+                      ? originalAction(...args)
+                      : undefined;
+
+                  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;
+                },
+              },
+            ];
+          }
+        )
+      );
+
+      const omnibox = document.createElement("pds-omnibox");
+      omnibox.id = id;
+      omnibox.setAttribute("name", path);
+      omnibox.setAttribute("item-grid", "0 1fr 0");
+      omnibox.setAttribute(
+        "placeholder",
+        attrs?.placeholder || "Select a font family"
+      );
+      omnibox.value = value ?? "";
+      omnibox.settings = {
+        ...fontFamilyOmniboxSettings,
+        categories,
+      };
+      omnibox.addEventListener("input", (event) => {
+        set(event?.target?.value ?? omnibox.value ?? "");
+      });
+      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;
     }
-  });
-  setFormSchemas(form, schema, uiSchema, values);
+  );
 
-  if (!customElements.get("pds-form")) {
-    customElements.whenDefined("pds-form").then(() => {
-      setFormSchemas(form, schema, uiSchema, values);
-    });
+  form.addEventListener("pw:submit", onSubmit);
+  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 };
 }
 
+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");
+  }
+
+  return createConfiguredForm({
+    schema,
+    uiSchema,
+    values: values || {},
+    onSubmit,
+    onUndo,
+    formOptions: {
+      layouts: {
+        arrays: "compact",
+      },
+      enhancements: {
+        rangeOutput: true,
+      },
+    },
+  });
+}
+
+function getConfigFormPayloadFromMetadata(design) {
+  if (typeof PDS?.buildConfigFormSchema === "function") {
+    return PDS.buildConfigFormSchema(design);
+  }
+
+  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 || {},
+    };
+  }
+
+  return null;
+}
+
+function deepClone(value) {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(value);
+    } catch (e) {
+      // Fall through to JSON clone
+    }
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+
+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();
@@ -1669,7 +2631,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");
@@ -1715,13 +2677,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;
@@ -1789,26 +2766,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");
@@ -1821,53 +2844,129 @@ class PdsLiveEdit extends HTMLElement {
     const themeToggle = document.createElement("pds-theme");
     themeCard.appendChild(themeToggle);
 
-    const searchCard = document.createElement("section");
-    searchCard.className = "card surface-elevated stack-sm";
+    const configCard = document.createElement("section");
+    configCard.className = "card surface-elevated stack-sm";
 
-    const searchTitle = document.createElement("h4");
-    searchTitle.textContent = "Search PDS";
-    searchCard.appendChild(searchTitle);
+    const configTitle = document.createElement("h4");
+    configTitle.textContent = "Configuration";
+    configCard.appendChild(configTitle);
 
-    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" });
-            }
-          },
-        },
-      },
-    };
-    searchCard.appendChild(omnibox);
+    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);
+
+    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 exportCard = document.createElement("section");
+    exportCard.className = "card surface-elevated stack-sm";
+
+    const exportTitle = document.createElement("h4");
+    exportTitle.textContent = "Export";
+    exportCard.appendChild(exportTitle);
+
+    const exportNav = document.createElement("nav");
+    exportNav.setAttribute("data-dropdown", "");
+    exportNav.setAttribute("data-mode", "auto");
+
+    const exportButton = document.createElement("button");
+    exportButton.className = "btn-primary";
+    const exportIcon = document.createElement("pds-icon");
+    exportIcon.setAttribute("icon", "download");
+    exportIcon.setAttribute("size", "sm");
+    const exportLabel = document.createElement("span");
+    exportLabel.textContent = "Download";
+    const exportCaret = document.createElement("pds-icon");
+    exportCaret.setAttribute("icon", "caret-down");
+    exportCaret.setAttribute("size", "sm");
+    exportButton.append(exportIcon, exportLabel, exportCaret);
+
+    const exportMenu = document.createElement("menu");
+
+    const configItem = document.createElement("li");
+    const configLink = document.createElement("a");
+    configLink.href = "#";
+    configLink.addEventListener("click", async (event) => {
+      event.preventDefault();
+      await this._handleExport("config");
+    });
+    const configIcon = document.createElement("pds-icon");
+    configIcon.setAttribute("icon", "file-js");
+    configIcon.setAttribute("size", "sm");
+    const configLabel = document.createElement("span");
+    configLabel.textContent = "Config File";
+    configLink.append(configIcon, configLabel);
+    configItem.appendChild(configLink);
+
+    const figmaItem = document.createElement("li");
+    const figmaLink = document.createElement("a");
+    figmaLink.href = "#";
+    figmaLink.addEventListener("click", async (event) => {
+      event.preventDefault();
+      await this._handleExport("figma");
+    });
+    const figmaIcon = document.createElement("pds-icon");
+    figmaIcon.setAttribute("icon", "brackets-curly");
+    figmaIcon.setAttribute("size", "sm");
+    const figmaLabel = document.createElement("span");
+    figmaLabel.textContent = "Figma Tokens (JSON)";
+    figmaLink.append(figmaIcon, figmaLabel);
+    figmaItem.appendChild(figmaLink);
+
+    exportMenu.append(configItem, figmaItem);
+    exportNav.append(exportButton, exportMenu);
+    exportCard.appendChild(exportNav);
+
+    const resetCard = document.createElement("section");
+    resetCard.className = "card surface-elevated stack-sm";
+
+    const resetTitle = document.createElement("h4");
+    resetTitle.textContent = "Reset";
+    resetCard.appendChild(resetTitle);
+
+    const resetButton = document.createElement("button");
+    resetButton.type = "button";
+    resetButton.className = "btn-outline";
+    resetButton.textContent = "Reset Config";
+    resetButton.addEventListener("click", () => {
+      window.localStorage.removeItem("pure-ds-config");
+      window.location.reload();
+    });
+    resetCard.appendChild(resetButton);
 
     content.appendChild(presetCard);
     content.appendChild(themeCard);
-    content.appendChild(searchCard);
+    content.appendChild(configCard);
+    content.appendChild(exportCard);
+    content.appendChild(resetCard);
 
     this._drawer.replaceChildren(header, content);
 
@@ -1878,6 +2977,10 @@ class PdsLiveEdit extends HTMLElement {
     }
   }
 
+  async _handleExport(format) {
+    await exportFromLiveEdit(format);
+  }
+
   async _handleFormSubmit(event, form) {
     if (!form || typeof form.getValuesFlat !== "function") return;
     
@@ -1896,7 +2999,14 @@ class PdsLiveEdit extends HTMLElement {
     }
     
     // Apply the changes
-    const flatValues = form.getValuesFlat();
+    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 patch = {};
     Object.entries(flatValues || {}).forEach(([path, value]) => {
       setValueAtJsonPath(patch, path, value);