@pure-ds/core 0.6.8 → 0.6.9

package/public/assets/js/pds.js

@@ -4,7 +4,7 @@ var Ge=Object.defineProperty;var Ve=(e,t)=>()=>(e&&(t=e(e=0)),t);var xe=(e,t)=>{
         ${this.handleImageOrIcon(o)}
         <span class="text">${this.formatResultItem(o,n,i)}</span>
         ${this.settings.hideCategory?"":`<span class="category">${o.category||""}</span>`}
-      </div>`;t.forEach(i=>{let o=n.categories[i.category]||{};i.element?this.resultsDiv.appendChild(i.element):(i=typeof i=="string"?{text:i}:i,this.resultsDiv.appendChild(ke(s(o,i))[0])),r++}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):n.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,n,r){let s=typeof t=="string"?{text:t}:t,i=s.text;return n.search&&(i=i.replace("%search%",n.search),s.description=s.description?.replace("%search%",n.search)),i=this.highlight(i,n.search),s.description&&(i=`<div>${i}</div><small>${s.description}</small>`),r.format&&(i=r.format({item:s,result:i,options:n})),i}highlight(t,n){var r=new RegExp("("+n+")","gi");return t.replace(r,'<span class="txt-hl">$1</span>')}async getItems(t,n){this.aborter&&this.aborter.abort();let r=this.caches.get(t.search);if(r)return r;let s=this.settings.map,i=p=>(typeof p=="string"&&(p={text:p}),p),o=p=>s?p.map(l=>({text:l[s]})):p.map(l=>i(l)),d=p=>(this.settings.max&&this.settings.max>0&&(p.length=this.settings.max),p);return this.aborter=new AbortController,this.aborterSignal=this.aborter.signal,new Promise(p=>{let l=u=>{u=this.sort(u,t),this.settings.cache!==!1&&this.caches.set(t.search,u),p(u)};if(Ee(this.items)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength)){l([]);return}let u=this.formatSearch(this.items,t);fetch(u).then(a=>{if(a.status===200){a.json().then(h=>{h=o(h),l(d(h.filter(f=>this.isMatch(t,f))))});return}throw Error(`HTTP error ${a.status} - ${u}`)})}else if(Array.isArray(this.items)){let u=!0;this.items=this.items.map(a=>typeof a=="string"?{text:a}:(u=!1,a)),u&&this.container.classList.add("simple"),l(d(o(this.items)))}else if(typeof this.items=="function")t.control=this.container,Promise.resolve(this.items(t,n)).then(a=>{a=a.map(h=>i(h)),a=o(a),l(a)});else return l(Promise.resolve(this.items.apply(this,t)))})}async items(t){let n=[];t.results=[],t.signal=this.aborterSignal;for(var r in t.categories){let s=t.categories[r];if(s.trigger=s.trigger??(()=>!0),t.results=n,s.trigger(t)){let i=[];try{i=await s.getItems(t)}catch(o){console.warn(`Error loading items for omniBox category '${r}'.`,o)}n=n.concat(i.map(o=>(o.category=r,o)))}}return n}formatSearch(t,n){return t.indexOf("%search%")?t.replace("%search%",n.search||""):t+"?"+this.createQueryParam(n)}createQueryParam(t){let n=t.suggest?"&suggest=true":"";return`q=${t.text}${n}`}isMatch(t,n){return n.text?.indexOf("%search%")>=0?!0:t.search?n.text?.toLowerCase().indexOf(t.search.toLowerCase())>=0:t.suggest}static textFilter(t,n){return function(r){if(!t.search)return!0;if(r.hidden)return!1;let i=(n?r[n]:r).match(new RegExp(t.search,"gi"));if(i)return i;if(r.config?.tags)return r.config.tags.some(o=>o.match(new RegExp(t.search,"gi")))}}};var ee=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(t={}){this._mode="static",this._staticPaths={...this._staticPaths,...t}}async getStylesheet(t){if(this._mode==="live")return null;try{return(await import(this._staticPaths[t]))[t]}catch(n){console.error(`[PDS Registry] Failed to load static ${t}:`,n),console.error(`[PDS Registry] Looking for: ${this._staticPaths[t]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds:build' and configured PDS.start() with the correct static.root path");let r=new CSSStyleSheet;return r.replaceSync("/* Failed to load "+t+" */"),r}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},F=new ee;async function Le(e,t=[],n=null){try{let r=n?.primitivesStylesheet?n.primitivesStylesheet:await F.getStylesheet("primitives");e.adoptedStyleSheets=[r,...t]}catch(r){let s=e.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${s}> failed to adopt primitives:`,r),e.adoptedStyleSheets=t}}async function Re(e,t=["primitives"],n=[],r=null){try{let i=(await Promise.all(t.map(async o=>{if(r)switch(o){case"tokens":return r.tokensStylesheet;case"primitives":return r.primitivesStylesheet;case"components":return r.componentsStylesheet;case"utilities":return r.utilitiesStylesheet;default:break}return F.getStylesheet(o)}))).filter(o=>o!==null);e.adoptedStyleSheets=[...i,...n]}catch(s){let i=e.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${i}> failed to adopt layers:`,s),e.adoptedStyleSheets=n}}function Me(e){let t=new CSSStyleSheet;return t.replaceSync(e),t}var c={FontWeights:{light:300,normal:400,medium:500,semibold:600,bold:700},LineHeights:{tight:1.25,normal:1.5,relaxed:1.75},BorderWidths:{hairline:.5,thin:1,medium:2,thick:3},RadiusSizes:{none:0,small:4,medium:8,large:16,xlarge:24,xxlarge:32},ShadowDepths:{none:"none",light:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",deep:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",extreme:"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},TransitionSpeeds:{fast:150,normal:250,slow:350},AnimationEasings:{linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},TouchTargetSizes:{compact:36,standard:44,comfortable:48,spacious:56},LinkStyles:{inline:"inline",block:"block",button:"button"},FocusStyles:{ring:"ring",outline:"outline",border:"border",glow:"glow"},TabSizes:{compact:2,standard:4,wide:8},SelectIcons:{chevron:"chevron",arrow:"arrow",caret:"caret",none:"none"},IconSizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64,"3xl":96}};var Ce={mode:"live",preset:"default",autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(e,t,...n){console[e](t,...n)}};var re={};xe(re,{deepMerge:()=>Te,fragmentFromTemplateLike:()=>te,isObject:()=>V,parseHTML:()=>ne});function V(e){return e&&typeof e=="object"&&!Array.isArray(e)}function Te(e,t){let n={...e};return V(e)&&V(t)&&Object.keys(t).forEach(r=>{V(t[r])?r in e?n[r]=Te(e[r],t[r]):Object.assign(n,{[r]:t[r]}):Object.assign(n,{[r]:t[r]})}),n}function te(e){let t=Array.isArray(e?.strings)?e.strings:[],n=Array.isArray(e?.values)?e.values:[],r=new Set,s=[],i=/(\s)(\.[\w-]+)=\s*$/;for(let a=0;a<t.length;a+=1){let h=t[a]??"",f=h.match(i);if(f&&a<n.length){let S=f[2].slice(1),m=`pds-val-${a}`;h=h.replace(i,`$1data-pds-prop="${S}:${m}"`),r.add(a)}s.push(h),a<n.length&&!r.has(a)&&s.push(`<!--pds-val-${a}-->`)}let o=document.createElement("template");o.innerHTML=s.join("");let d=(a,h)=>{let f=a.parentNode;if(!f)return;if(h==null){f.removeChild(a);return}let w=S=>{if(S!=null){if(S instanceof Node){f.insertBefore(S,a);return}if(Array.isArray(S)){S.forEach(m=>w(m));return}f.insertBefore(document.createTextNode(String(S)),a)}};w(h),f.removeChild(a)},p=document.createTreeWalker(o.content,NodeFilter.SHOW_COMMENT),l=[];for(;p.nextNode();){let a=p.currentNode;a?.nodeValue?.startsWith("pds-val-")&&l.push(a)}return l.forEach(a=>{let h=Number(a.nodeValue.replace("pds-val-",""));d(a,n[h])}),o.content.querySelectorAll("*").forEach(a=>{let h=a.getAttribute("data-pds-prop");if(!h)return;let[f,w]=h.split(":"),S=Number(String(w).replace("pds-val-",""));f&&Number.isInteger(S)&&(a[f]=n[S]),a.removeAttribute("data-pds-prop")}),o.content}function ne(e){return new DOMParser().parseFromString(e,"text/html").body.childNodes}function se(e,t){if(t==null)return;if(typeof t=="object"&&Array.isArray(t.strings)&&Array.isArray(t.values)){e.appendChild(te(t));return}if(t instanceof Node){e.appendChild(t);return}if(Array.isArray(t)){t.forEach(r=>se(e,r));return}let n=typeof t=="string"?t:String(t);e.appendChild(document.createTextNode(n))}function Ke(){let e=navigator.userAgent,t=/Safari/i.test(e),n=/(Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS|Opera)/i.test(e);return t&&!n}function Qe(e){if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let t=window.matchMedia?.("(max-width: 639px)").matches,n=e.classList.contains("dialog-no-scale-animation")?"pds-dialog-fade-enter":t?"pds-dialog-enter-mobile":"pds-dialog-enter";e.style.animation="none",e.offsetWidth,e.style.animation=`${n} var(--transition-normal) ease`,e.addEventListener("animationend",()=>{e.style.animation=""},{once:!0})}async function De(e,t={}){return t={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...t},new Promise(r=>{let s=document.createElement("dialog");Ke()&&s.classList.add("dialog-no-scale-animation"),Ce.options?.liquidGlassEffects&&s.classList.add("liquid-glass"),t.size&&s.classList.add(`dialog-${t.size}`),t.type&&s.classList.add(`dialog-${t.type}`),t.class&&(Array.isArray(t.class)?s.classList.add(...t.class):s.classList.add(t.class)),t.maxHeight&&s.style.setProperty("--dialog-max-height",t.maxHeight);let i=Object.entries(t.buttons).map(([d,p])=>{let l=p.primary?"btn-primary btn-sm":"btn-outline btn-sm";return`<button type="${p.cancel?"button":"submit"}" class="${l}" value="${d}">${p.name}</button>`});if(t.useForm){let d=document.createElement("div");se(d,e);let p=d.querySelector("form");if(p){s.innerHTML=`
+      </div>`;t.forEach(i=>{let o=n.categories[i.category]||{};i.element?this.resultsDiv.appendChild(i.element):(i=typeof i=="string"?{text:i}:i,this.resultsDiv.appendChild(ke(s(o,i))[0])),r++}),t.length?(this.acItems=this.resultsDiv.querySelectorAll(".ac-itm"),this.controller().show()):n.search.length&&this.controller().empty()}handleImageOrIcon(t){return t.image?`<img src="${t.image}"/>`:typeof this.settings.iconHandler=="function"?this.settings.iconHandler(t):`<svg-icon icon="${t.icon}"></svg-icon>`}formatResultItem(t,n,r){let s=typeof t=="string"?{text:t}:t,i=s.text;return n.search&&(i=i.replace("%search%",n.search),s.description=s.description?.replace("%search%",n.search)),i=this.highlight(i,n.search),s.description&&(i=`<div>${i}</div><small>${s.description}</small>`),r.format&&(i=r.format({item:s,result:i,options:n})),i}highlight(t,n){var r=new RegExp("("+n+")","gi");return t.replace(r,'<span class="txt-hl">$1</span>')}async getItems(t,n){this.aborter&&this.aborter.abort();let r=this.caches.get(t.search);if(r)return r;let s=this.settings.map,i=p=>(typeof p=="string"&&(p={text:p}),p),o=p=>s?p.map(l=>({text:l[s]})):p.map(l=>i(l)),d=p=>(this.settings.max&&this.settings.max>0&&(p.length=this.settings.max),p);return this.aborter=new AbortController,this.aborterSignal=this.aborter.signal,new Promise(p=>{let l=u=>{u=this.sort(u,t),this.settings.cache!==!1&&this.caches.set(t.search,u),p(u)};if(Ee(this.items)){if(this.settings.minlength>0&&(!t.search||t.search.length<this.settings.minlength)){l([]);return}let u=this.formatSearch(this.items,t);fetch(u).then(a=>{if(a.status===200){a.json().then(h=>{h=o(h),l(d(h.filter(f=>this.isMatch(t,f))))});return}throw Error(`HTTP error ${a.status} - ${u}`)})}else if(Array.isArray(this.items)){let u=!0;this.items=this.items.map(a=>typeof a=="string"?{text:a}:(u=!1,a)),u&&this.container.classList.add("simple"),l(d(o(this.items)))}else if(typeof this.items=="function")t.control=this.container,Promise.resolve(this.items(t,n)).then(a=>{a=a.map(h=>i(h)),a=o(a),l(a)});else return l(Promise.resolve(this.items.apply(this,t)))})}async items(t){let n=[];t.results=[],t.signal=this.aborterSignal;for(var r in t.categories){let s=t.categories[r];if(s.trigger=s.trigger??(()=>!0),t.results=n,s.trigger(t)){let i=[];try{i=await s.getItems(t)}catch(o){console.warn(`Error loading items for omniBox category '${r}'.`,o)}n=n.concat(i.map(o=>(o.category=r,o)))}}return n}formatSearch(t,n){return t.indexOf("%search%")?t.replace("%search%",n.search||""):t+"?"+this.createQueryParam(n)}createQueryParam(t){let n=t.suggest?"&suggest=true":"";return`q=${t.text}${n}`}isMatch(t,n){return n.text?.indexOf("%search%")>=0?!0:t.search?n.text?.toLowerCase().indexOf(t.search.toLowerCase())>=0:t.suggest}static textFilter(t,n){return function(r){if(!t.search)return!0;if(r.hidden)return!1;let i=(n?r[n]:r).match(new RegExp(t.search,"gi"));if(i)return i;if(r.config?.tags)return r.config.tags.some(o=>o.match(new RegExp(t.search,"gi")))}}};var ee=class{constructor(){this._mode="static",this._staticPaths={tokens:"/assets/pds/styles/pds-tokens.css.js",primitives:"/assets/pds/styles/pds-primitives.css.js",components:"/assets/pds/styles/pds-components.css.js",utilities:"/assets/pds/styles/pds-utilities.css.js",styles:"/assets/pds/styles/pds-styles.css.js"}}setLiveMode(){this._mode="live"}setStaticMode(t={}){this._mode="static",this._staticPaths={...this._staticPaths,...t}}async getStylesheet(t){if(this._mode==="live")return null;try{return(await import(this._staticPaths[t]))[t]}catch(n){console.error(`[PDS Registry] Failed to load static ${t}:`,n),console.error(`[PDS Registry] Looking for: ${this._staticPaths[t]}`),console.error("[PDS Registry] Make sure you've run 'npm run pds:build' and configured PDS.start() with the correct static.root path");let r=new CSSStyleSheet;return r.replaceSync("/* Failed to load "+t+" */"),r}}get mode(){return this._mode}get isLive(){return this._mode==="live"}},F=new ee;async function Le(e,t=[],n=null){try{let r=n?.primitivesStylesheet?n.primitivesStylesheet:await F.getStylesheet("primitives");e.adoptedStyleSheets=[r,...t]}catch(r){let s=e.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${s}> failed to adopt primitives:`,r),e.adoptedStyleSheets=t}}async function Re(e,t=["primitives"],n=[],r=null){try{let i=(await Promise.all(t.map(async o=>{if(r)switch(o){case"tokens":return r.tokensStylesheet;case"primitives":return r.primitivesStylesheet;case"components":return r.componentsStylesheet;case"utilities":return r.utilitiesStylesheet;default:break}return F.getStylesheet(o)}))).filter(o=>o!==null);e.adoptedStyleSheets=[...i,...n]}catch(s){let i=e.host?.tagName?.toLowerCase()||"unknown";console.error(`[PDS Adopter] <${i}> failed to adopt layers:`,s),e.adoptedStyleSheets=n}}function Me(e){let t=new CSSStyleSheet;return t.replaceSync(e),t}var c={FontWeights:{light:300,normal:400,medium:500,semibold:600,bold:700},LineHeights:{tight:1.25,normal:1.5,relaxed:1.75},BorderWidths:{hairline:.5,thin:1,medium:2,thick:3},RadiusSizes:{none:0,small:4,medium:8,large:16,xlarge:24,xxlarge:32},ShadowDepths:{none:"none",light:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",deep:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",extreme:"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},TransitionSpeeds:{fast:150,normal:250,slow:350},AnimationEasings:{linear:"linear",ease:"ease","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out",bounce:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},TouchTargetSizes:{compact:36,standard:44,comfortable:48,spacious:56},LinkStyles:{inline:"inline",block:"block",button:"button"},FocusStyles:{ring:"ring",outline:"outline",border:"border",glow:"glow"},TabSizes:{compact:2,standard:4,wide:8},SelectIcons:{chevron:"chevron",arrow:"arrow",caret:"caret",none:"none"},IconSizes:{xs:16,sm:20,md:24,lg:32,xl:48,"2xl":64,"3xl":96}};var Ce={mode:"live",liveEdit:!0,preset:"default",autoDefine:{predefine:["pds-icon","pds-drawer","pds-toaster"]},log(e,t,...n){console[e](t,...n)}};var re={};xe(re,{deepMerge:()=>Te,fragmentFromTemplateLike:()=>te,isObject:()=>V,parseHTML:()=>ne});function V(e){return e&&typeof e=="object"&&!Array.isArray(e)}function Te(e,t){let n={...e};return V(e)&&V(t)&&Object.keys(t).forEach(r=>{V(t[r])?r in e?n[r]=Te(e[r],t[r]):Object.assign(n,{[r]:t[r]}):Object.assign(n,{[r]:t[r]})}),n}function te(e){let t=Array.isArray(e?.strings)?e.strings:[],n=Array.isArray(e?.values)?e.values:[],r=new Set,s=[],i=/(\s)(\.[\w-]+)=\s*$/;for(let a=0;a<t.length;a+=1){let h=t[a]??"",f=h.match(i);if(f&&a<n.length){let S=f[2].slice(1),m=`pds-val-${a}`;h=h.replace(i,`$1data-pds-prop="${S}:${m}"`),r.add(a)}s.push(h),a<n.length&&!r.has(a)&&s.push(`<!--pds-val-${a}-->`)}let o=document.createElement("template");o.innerHTML=s.join("");let d=(a,h)=>{let f=a.parentNode;if(!f)return;if(h==null){f.removeChild(a);return}let w=S=>{if(S!=null){if(S instanceof Node){f.insertBefore(S,a);return}if(Array.isArray(S)){S.forEach(m=>w(m));return}f.insertBefore(document.createTextNode(String(S)),a)}};w(h),f.removeChild(a)},p=document.createTreeWalker(o.content,NodeFilter.SHOW_COMMENT),l=[];for(;p.nextNode();){let a=p.currentNode;a?.nodeValue?.startsWith("pds-val-")&&l.push(a)}return l.forEach(a=>{let h=Number(a.nodeValue.replace("pds-val-",""));d(a,n[h])}),o.content.querySelectorAll("*").forEach(a=>{let h=a.getAttribute("data-pds-prop");if(!h)return;let[f,w]=h.split(":"),S=Number(String(w).replace("pds-val-",""));f&&Number.isInteger(S)&&(a[f]=n[S]),a.removeAttribute("data-pds-prop")}),o.content}function ne(e){return new DOMParser().parseFromString(e,"text/html").body.childNodes}function se(e,t){if(t==null)return;if(typeof t=="object"&&Array.isArray(t.strings)&&Array.isArray(t.values)){e.appendChild(te(t));return}if(t instanceof Node){e.appendChild(t);return}if(Array.isArray(t)){t.forEach(r=>se(e,r));return}let n=typeof t=="string"?t:String(t);e.appendChild(document.createTextNode(n))}function Ke(){let e=navigator.userAgent,t=/Safari/i.test(e),n=/(Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS|Opera)/i.test(e);return t&&!n}function Qe(e){if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let t=window.matchMedia?.("(max-width: 639px)").matches,n=e.classList.contains("dialog-no-scale-animation")?"pds-dialog-fade-enter":t?"pds-dialog-enter-mobile":"pds-dialog-enter";e.style.animation="none",e.offsetWidth,e.style.animation=`${n} var(--transition-normal) ease`,e.addEventListener("animationend",()=>{e.style.animation=""},{once:!0})}async function De(e,t={}){return t={...{title:"Confirm",type:"confirm",buttons:{ok:{name:"OK",primary:!0},cancel:{name:"Cancel",cancel:!0}}},...t},new Promise(r=>{let s=document.createElement("dialog");Ke()&&s.classList.add("dialog-no-scale-animation"),Ce.options?.liquidGlassEffects&&s.classList.add("liquid-glass"),t.size&&s.classList.add(`dialog-${t.size}`),t.type&&s.classList.add(`dialog-${t.type}`),t.class&&(Array.isArray(t.class)?s.classList.add(...t.class):s.classList.add(t.class)),t.maxHeight&&s.style.setProperty("--dialog-max-height",t.maxHeight);let i=Object.entries(t.buttons).map(([d,p])=>{let l=p.primary?"btn-primary btn-sm":"btn-outline btn-sm";return`<button type="${p.cancel?"button":"submit"}" class="${l}" value="${d}">${p.name}</button>`});if(t.useForm){let d=document.createElement("div");se(d,e);let p=d.querySelector("form");if(p){s.innerHTML=`
           <header>
             <h2>${t.title}</h2>
           </header>

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;
@@ -443,6 +444,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 +483,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 +496,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;
@@ -768,7 +797,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 +861,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 +895,105 @@ 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;
+}
+
+function getPresetFontFamilyVariations() {
+  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({
+      id: normalized,
+      text: normalized,
+      style: `font-family: ${normalized}`,
+    });
+  };
+
+  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;
+}
+
+function buildFontFamilyOmniboxSettings() {
+  const allItems = getPresetFontFamilyVariations();
+  const filterItems = (search) => {
+    const query = String(search || "").trim().toLowerCase();
+    if (!query) return allItems;
+    return allItems.filter((item) => item.text.toLowerCase().includes(query));
+  };
+
+  return {    
+    hideCategory: true,
+    iconHandler: (item) => {
+      
+      return "";
+    },
+    categories: {
+      FontFamilies: {
+        trigger: () => true,
+        getItems: (options) => filterItems(options?.search),
+        action: (options, ev) => {
+          const input = document.querySelector("[name='/typography/fontFamilyHeadings']");
+          
+          if (input && input.tagName === "PDS-OMNIBOX") {
+            input.value = options?.text || "";
+            
+          }
+          return options?.text || options?.id;
+        },
+      },
+    },
+  };
+}
+
 function buildSchemaFromPaths(paths, design, hints = {}) {
   const schema = { type: "object", properties: {} };
   const uiSchema = {};
@@ -914,6 +1048,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;
@@ -973,6 +1114,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 =
@@ -1173,6 +1316,155 @@ 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;
@@ -1181,7 +1473,13 @@ function setFormSchemas(form, schema, uiSchema, design) {
 
 async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
   const { schema, uiSchema } = buildSchemaFromPaths(paths, design, hints);
+
+  if (!customElements.get("pds-form")) {
+    await customElements.whenDefined("pds-form");
+  }
+
   const form = document.createElement("pds-form");
+  const fontFamilyOmniboxSettings = buildFontFamilyOmniboxSettings();
   form.setAttribute("hide-actions", "");
   form.options = {
     layouts: {
@@ -1191,6 +1489,62 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
       rangeOutput: true,
     },
   };
+  form.defineRenderer(
+    "font-family-omnibox",
+    ({ id, path, value, attrs, set }) => {
+      const resolveSelectedValue = (options, actionResult) => {
+        if (typeof actionResult === "string" && actionResult.trim()) {
+          return actionResult;
+        }
+        const fromText = String(options?.text || "").trim();
+        if (fromText) return fromText;
+        return String(options?.id || "").trim();
+      };
+
+      const categories = Object.fromEntries(
+        Object.entries(fontFamilyOmniboxSettings.categories || {}).map(
+          ([categoryName, categoryConfig]) => {
+            const originalAction = categoryConfig?.action;
+            return [
+              categoryName,
+              {
+                ...categoryConfig,
+                action: (options) => {                  
+                  const actionResult =
+                    typeof originalAction === "function"
+                      ? originalAction(options)
+                      : undefined;
+                  const selected = resolveSelectedValue(options, actionResult);
+                  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");
+      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 ?? "");
+      });
+      return omnibox;
+    }
+  );
   form.addEventListener("pw:submit", onSubmit);
   const values = shallowClone(design || {});
   Object.keys(ENUM_FIELD_OPTIONS).forEach((path) => {
@@ -1208,12 +1562,6 @@ async function buildForm(paths, design, onSubmit, onUndo, hints = {}) {
   });
   setFormSchemas(form, schema, uiSchema, values);
 
-  if (!customElements.get("pds-form")) {
-    customElements.whenDefined("pds-form").then(() => {
-      setFormSchemas(form, schema, uiSchema, values);
-    });
-  }
-
   // Apply button (will trigger form submit programmatically)
   const applyBtn = document.createElement("button");
   applyBtn.className = "btn-primary btn-sm";
@@ -1821,6 +2169,65 @@ class PdsLiveEdit extends HTMLElement {
     const themeToggle = document.createElement("pds-theme");
     themeCard.appendChild(themeToggle);
 
+    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 searchCard = document.createElement("section");
     searchCard.className = "card surface-elevated stack-sm";
 
@@ -1867,6 +2274,7 @@ class PdsLiveEdit extends HTMLElement {
 
     content.appendChild(presetCard);
     content.appendChild(themeCard);
+    content.appendChild(exportCard);
     content.appendChild(searchCard);
 
     this._drawer.replaceChildren(header, content);
@@ -1878,6 +2286,10 @@ class PdsLiveEdit extends HTMLElement {
     }
   }
 
+  async _handleExport(format) {
+    await exportFromLiveEdit(format);
+  }
+
   async _handleFormSubmit(event, form) {
     if (!form || typeof form.getValuesFlat !== "function") return;