@visulima/dev-toolbar 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/apps/performance/index.js

@@ -1,4 +1,4 @@
-var L=Object.defineProperty;var f=(t,e)=>L(t,"name",{value:e,configurable:!0});import{addHookName as y}from"preact/devtools";import{useState as C,useRef as M,useEffect as H}from"preact/hooks";import d from"../../packem_shared/cn-DWLJYh3h.js";import{jsx as r,jsxs as i}from"preact/jsx-runtime";const $=`<!-- @license lucide-static v0.576.0 - ISC -->
+var j=Object.defineProperty;var f=(t,e)=>j(t,"name",{value:e,configurable:!0});import{addHookName as w}from"preact/devtools";import{clsx as c}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as C,useRef as F,useEffect as H}from"preact/hooks";import{jsx as r,jsxs as i}from"preact/jsx-runtime";const L=`<!-- @license lucide-static v0.577.0 - ISC -->
 <svg
   class="lucide lucide-gauge"
   xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ var L=Object.defineProperty;var f=(t,e)=>L(t,"name",{value:e,configurable:!0});i
   <path d="m12 14 4-4" />
   <path d="M3.34 19a10 10 0 1 1 17.32 0" />
 </svg>
-`;var j=Object.defineProperty,b=f((t,e)=>j(t,"name",{value:e,configurable:!0}),"s$1");const I={cls:{good:.1,poor:.25},fcp:{good:1800,poor:3e3},fid:{good:100,poor:300},lcp:{good:2500,poor:4e3},ttfb:{good:800,poor:1800}},x=b((t,e)=>{const{good:s,poor:n}=I[t];return e<=s?"good":e<=n?"needs-improvement":"poor"},"getCwvRating");class z{static{f(this,"PerformanceMonitor")}static{b(this,"PerformanceMonitor")}clsValue=0;fpsSamples=[];listeners=new Set;longTaskIdCounter=0;longTasks=[];memory=null;memoryInterval=null;observers=[];rafId=null;running=!1;vitals={cls:null,fcp:null,fid:null,lcp:null,ttfb:null};clearLongTasks(){this.longTasks=[],this.emit()}getSnapshot(){return{fps:this.currentFps(),longTasks:[...this.longTasks],memory:this.memory,vitals:{...this.vitals}}}start(){this.running||globalThis.window===void 0||(this.running=!0,this.startFps(),this.startMemory(),this.startCwv(),this.startLongTasks(),this.loadTtfb())}stop(){if(this.running){this.running=!1,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.memoryInterval!==null&&(clearInterval(this.memoryInterval),this.memoryInterval=null);for(const e of this.observers)e.disconnect();this.observers=[]}}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}currentFps(){if(this.fpsSamples.length<2)return 0;const e=this.fpsSamples.slice(-Math.min(this.fpsSamples.length,10));if(e.length<2)return 0;let s=0,n=0;for(let l=1;l<e.length;l++){const a=e[l]-e[l-1];a>0&&a<500&&(s+=a,n++)}return n===0?0:Math.min(60,Math.round(1e3/(s/n)))}emit(){const e=this.getSnapshot();for(const s of this.listeners)s(e)}loadTtfb(){const e=performance.getEntriesByType("navigation");e.length>0&&e[0]&&(this.vitals.ttfb=Math.round(e[0].responseStart-e[0].requestStart),this.emit())}startCwv(){this.tryObserve("largest-contentful-paint",e=>{const s=e.getEntries().at(-1);s&&(this.vitals.lcp=Math.round(s.startTime),this.emit())}),this.tryObserve("layout-shift",e=>{for(const s of e.getEntries()){const n=s;n.hadRecentInput||(this.clsValue+=n.value,this.vitals.cls=Math.round(this.clsValue*1e3)/1e3)}this.emit()}),this.tryObserve("first-input",e=>{const s=e.getEntries()[0];s&&(this.vitals.fid=Math.round(s.processingStart-s.startTime),this.emit())}),this.tryObserve("paint",e=>{for(const s of e.getEntries())s.name==="first-contentful-paint"&&(this.vitals.fcp=Math.round(s.startTime),this.emit())})}startFps(){let e=null;const s=b(n=>{this.running&&(e!==null&&(this.fpsSamples.push(n),this.fpsSamples.length>60&&this.fpsSamples.shift(),this.fpsSamples.length%16===0&&this.emit()),e=n,this.rafId=requestAnimationFrame(s))},"tick");this.rafId=requestAnimationFrame(s)}startLongTasks(){this.tryObserve("longtask",e=>{for(const s of e.getEntries())this.longTaskIdCounter++,this.longTasks.push({duration:Math.round(s.duration),id:`lt-${this.longTaskIdCounter}`,startTime:Math.round(s.startTime)}),this.longTasks.length>100&&this.longTasks.shift();this.emit()})}startMemory(){const e=performance;if(!e.memory)return;const s=b(()=>{e.memory&&(this.memory={jsHeapSizeLimit:e.memory.jsHeapSizeLimit,totalJSHeapSize:e.memory.totalJSHeapSize,usedJSHeapSize:e.memory.usedJSHeapSize},this.emit())},"read");s(),this.memoryInterval=setInterval(s,1e3)}tryObserve(e,s){try{const n=new PerformanceObserver(s);n.observe({buffered:!0,type:e}),this.observers.push(n)}catch{}}}const p=new z;var P=Object.defineProperty,u=f((t,e)=>P(t,"name",{value:e,configurable:!0}),"s");const S=u(t=>t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,"formatBytes"),B=u(t=>`${t} ms`,"formatMs"),k={good:"text-success-foreground","needs-improvement":"text-warning-foreground",poor:"text-destructive"},J={good:"bg-success/10 border-success/30","needs-improvement":"bg-warning/10 border-warning/30",poor:"bg-destructive/10 border-destructive/30"},O=u(({samples:t})=>{if(t.length<2)return r("svg",{height:36,width:120});const e=120/(t.length-1),s=t.map((n,l)=>{const a=l*e,o=36-n/60*36;return`${a.toFixed(1)},${o.toFixed(1)}`}).join(" ");return r("svg",{height:36,style:"overflow: visible",width:120,children:r("polyline",{fill:"none",points:s,stroke:"currentColor","stroke-linejoin":"round","stroke-width":"1.5"})})},"FpsSparkline"),R=u(({memory:t})=>{const e=t.usedJSHeapSize/t.jsHeapSizeLimit*100,s=t.totalJSHeapSize/t.jsHeapSizeLimit*100,n=e>80?"bg-destructive":e>50?"bg-warning":"bg-success";return i("div",{class:"space-y-1.5",children:[i("div",{class:"relative h-2 bg-foreground/8 rounded-full overflow-hidden",children:[r("div",{class:"absolute left-0 top-0 h-full bg-foreground/12 rounded-full",style:{width:`${s}%`}}),r("div",{class:d("absolute left-0 top-0 h-full rounded-full",n),style:{width:`${e}%`}})]}),i("div",{class:"flex justify-between text-[0.65rem] text-muted-foreground",children:[i("span",{children:["Used: ",r("span",{class:"text-foreground font-medium",children:S(t.usedJSHeapSize)})]}),i("span",{children:["Total: ",r("span",{class:"text-foreground font-medium",children:S(t.totalJSHeapSize)})]}),i("span",{children:["Limit: ",r("span",{class:"text-foreground font-medium",children:S(t.jsHeapSizeLimit)})]})]})]})},"MemoryBar"),E=u(({label:t,metric:e,unit:s,value:n})=>{if(n===null)return i("div",{class:"flex flex-col items-center gap-1 p-3 border border-border bg-foreground/2 min-w-0",children:[r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wider font-semibold truncate w-full text-center",children:t}),r("span",{class:"text-[0.7rem] text-muted-foreground/50",children:"—"})]});const l=x(e,n),a=e==="cls"?n.toFixed(3):B(n);return i("div",{class:d("flex flex-col items-center gap-1 p-3 border min-w-0",J[l]),children:[r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wider font-semibold truncate w-full text-center",children:t}),r("span",{class:d("text-[0.9rem] font-bold tabular-nums",k[l]),children:a}),r("span",{class:"text-[0.6rem] text-muted-foreground/70 uppercase tracking-wide",children:s})]})},"CwvCard"),V=u(({task:t})=>i("div",{class:"flex items-center gap-3 px-3 py-2 border-b border-border/50 last:border-0 text-[0.7rem]",children:[i("span",{class:"text-muted-foreground tabular-nums w-20 shrink-0",children:[t.startTime.toLocaleString()," ms"]}),r("div",{class:"flex-1 bg-foreground/6 rounded-sm overflow-hidden h-2",children:r("div",{class:"h-full bg-warning",style:{width:`${Math.min(100,t.duration/200*100)}%`},title:`${t.duration} ms`})}),i("span",{class:"text-warning-foreground font-semibold tabular-nums w-16 text-right shrink-0",children:[t.duration," ms"]})]}),"LongTaskRow"),g=u(({action:t,children:e,title:s})=>i("section",{class:"border border-border",children:[i("div",{class:"flex items-center justify-between px-4 py-2.5 bg-foreground/3 border-b border-border",children:[r("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:s}),t]}),r("div",{class:"p-4",children:e})]}),"Section"),A=120,q=u(t=>{const[e,s]=y(C(()=>p.getSnapshot()),"snapshot"),n=y(M([]),"fpsHistoryRef");H(()=>(p.start(),p.subscribe(c=>{n.current.push(c.fps),n.current.length>A&&n.current.shift(),s(c)})),[]);const{fps:l,longTasks:a,memory:o,vitals:m}=e,h=l>=50?"good":l>=30?"needs-improvement":"poor",F=[{label:"LCP",metric:"lcp",unit:"ms",value:m.lcp},{label:"FID",metric:"fid",unit:"ms",value:m.fid},{label:"CLS",metric:"cls",unit:"score",value:m.cls},{label:"FCP",metric:"fcp",unit:"ms",value:m.fcp},{label:"TTFB",metric:"ttfb",unit:"ms",value:m.ttfb}];return i("div",{class:"p-5 space-y-4",children:[r(g,{title:"FPS",children:i("div",{class:"flex items-end gap-5",children:[i("div",{class:"flex flex-col items-center gap-0.5 shrink-0",children:[r("span",{class:d("text-3xl font-bold tabular-nums leading-none",k[h]),children:l}),r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wide",children:"fps"})]}),r("div",{class:d("flex-1 min-w-0",k[h]),children:r(O,{samples:n.current})}),i("div",{class:"flex flex-col justify-between h-9 text-[0.6rem] text-muted-foreground/50 shrink-0 tabular-nums",children:[r("span",{children:"60"}),r("span",{children:"30"}),r("span",{children:"0"})]})]})}),o?r(g,{title:"JS Heap Memory",children:r(R,{memory:o})}):r(g,{title:"JS Heap Memory",children:i("p",{class:"text-[0.72rem] text-muted-foreground text-center py-2",children:["Not available — enable ",r("code",{class:"font-mono text-foreground/70",children:"--enable-precise-memory-info"})," in Chrome flags."]})}),i(g,{title:"Core Web Vitals",children:[r("div",{class:"grid grid-cols-3 gap-2",children:F.map(c=>r(E,{label:c.label,metric:c.metric,unit:c.unit,value:c.value},c.metric))}),r("p",{class:"mt-2 text-[0.62rem] text-muted-foreground/60",children:"Measured from page load. Reload to refresh. LCP and FID update as the page is interacted with."})]}),r(g,{action:a.length>0?r("button",{class:"px-2 py-0.5 text-[0.65rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent transition-colors",onClick:u(()=>p.clearLongTasks(),"onClick"),type:"button",children:"Clear"}):void 0,title:`Long Tasks${a.length>0?` (${a.length})`:""}`,children:a.length===0?r("p",{class:"text-[0.72rem] text-muted-foreground text-center py-2",children:"No long tasks detected yet."}):r("div",{class:"max-h-48 overflow-y-auto devtools-content-scroll",children:a.map(c=>r(V,{task:c},c.id))})})]})},"PerformanceApp");var D=Object.defineProperty,w=f((t,e)=>D(t,"name",{value:e,configurable:!0}),"c");const T=w(t=>t<1024*1024?`${(t/1024).toFixed(0)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,"formatBytes"),v={good:"text-success-foreground","needs-improvement":"text-warning-foreground",poor:"text-destructive"},N=w(({samples:t})=>{if(t.length<2)return r("svg",{height:24,width:60});const e=60/(t.length-1),s=t.map((n,l)=>`${(l*e).toFixed(1)},${(24-n/60*24).toFixed(1)}`).join(" ");return r("svg",{height:24,style:"overflow:visible",width:60,children:r("polyline",{fill:"none",points:s,stroke:"currentColor","stroke-linejoin":"round","stroke-width":"1.5"})})},"MiniSparkline"),K=w(({memory:t})=>{const e=t.usedJSHeapSize/t.jsHeapSizeLimit*100,s=e>80?"bg-destructive":e>50?"bg-warning":"bg-success";return i("div",{class:"flex items-center gap-2",children:[r("div",{class:"flex-1 h-1.5 bg-foreground/8 rounded-full overflow-hidden",children:r("div",{class:d("h-full rounded-full",s),style:{width:`${e}%`}})}),i("span",{class:"text-[0.65rem] tabular-nums text-muted-foreground shrink-0",children:[T(t.usedJSHeapSize)," / ",T(t.jsHeapSizeLimit)]})]})},"MiniMemoryBar"),W=60,U=w(t=>{const[e,s]=y(C(()=>p.getSnapshot()),"snapshot"),n=y(M([]),"fpsHistoryRef");H(()=>(p.start(),p.subscribe(h=>{n.current.push(h.fps),n.current.length>W&&n.current.shift(),s(h)})),[]);const{fps:l,memory:a,vitals:o}=e,m=l>=50?"good":l>=30?"needs-improvement":"poor";return i("div",{class:"space-y-3 min-w-[200px]",children:[i("div",{class:"flex items-end gap-3",children:[i("div",{class:"flex flex-col items-center gap-0 shrink-0",children:[r("span",{class:d("text-2xl font-bold tabular-nums leading-none",v[m]),children:l}),r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"fps"})]}),r("div",{class:d("flex-1 min-w-0",v[m]),children:r(N,{samples:n.current})})]}),i("div",{class:"flex gap-3",children:[o.lcp!==null&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"LCP"}),i("span",{class:d("text-[0.8rem] font-semibold tabular-nums",v[x("lcp",o.lcp)]),children:[o.lcp," ms"]})]}),o.fcp!==null&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"FCP"}),i("span",{class:d("text-[0.8rem] font-semibold tabular-nums",v[x("fcp",o.fcp)]),children:[o.fcp," ms"]})]}),o.cls!==null&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"CLS"}),r("span",{class:d("text-[0.8rem] font-semibold tabular-nums",v[x("cls",o.cls)]),children:o.cls.toFixed(3)})]}),o.lcp===null&&o.fcp===null&&o.cls===null&&r("span",{class:"text-[0.65rem] text-muted-foreground/50",children:"Collecting metrics…"})]}),a&&i("div",{children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide block mb-1",children:"Heap"}),r(K,{memory:a})]})]})},"PerformanceTooltip"),Z={component:q,icon:$,id:"dev-toolbar:performance",name:"Performance",tooltip:U};export{Z as default};
+`;var I=Object.defineProperty,x=f((t,e)=>I(t,"name",{value:e,configurable:!0}),"n");const z={cls:{good:.1,poor:.25},fcp:{good:1800,poor:3e3},fid:{good:100,poor:300},lcp:{good:2500,poor:4e3},ttfb:{good:800,poor:1800}},y=x((t,e)=>{const{good:s,poor:n}=z[t];return e<=s?"good":e<=n?"needs-improvement":"poor"},"getCwvRating");class P{static{f(this,"f")}static{x(this,"PerformanceMonitor")}clsValue=0;fpsSamples=[];listeners=new Set;longTaskIdCounter=0;longTasks=[];memory=void 0;memoryInterval=void 0;observers=[];rafId=void 0;running=!1;vitals={cls:void 0,fcp:void 0,fid:void 0,lcp:void 0,ttfb:void 0};clearLongTasks(){this.longTasks=[],this.emit()}getSnapshot(){return{fps:this.currentFps(),longTasks:[...this.longTasks],memory:this.memory,vitals:{...this.vitals}}}start(){this.running||globalThis.window===void 0||(this.running=!0,this.startFps(),this.startMemory(),this.startCwv(),this.startLongTasks(),this.loadTtfb())}stop(){if(this.running){this.running=!1,this.rafId!==void 0&&(cancelAnimationFrame(this.rafId),this.rafId=void 0),this.memoryInterval!==void 0&&(clearInterval(this.memoryInterval),this.memoryInterval=void 0);for(const e of this.observers)e.disconnect();this.observers=[]}}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}currentFps(){if(this.fpsSamples.length<2)return 0;const e=this.fpsSamples.slice(-Math.min(this.fpsSamples.length,10));if(e.length<2)return 0;let s=0,n=0;for(let o=1;o<e.length;o+=1){const a=e[o]-e[o-1];a>0&&a<500&&(s+=a,n+=1)}return n===0?0:Math.min(60,Math.round(1e3/(s/n)))}emit(){const e=this.getSnapshot();for(const s of this.listeners)s(e)}loadTtfb(){const e=performance.getEntriesByType("navigation");e.length>0&&e[0]&&(this.vitals.ttfb=Math.round(e[0].responseStart-e[0].requestStart),this.emit())}startCwv(){this.tryObserve("largest-contentful-paint",e=>{const s=e.getEntries().at(-1);s&&(this.vitals.lcp=Math.round(s.startTime),this.emit())}),this.tryObserve("layout-shift",e=>{for(const s of e.getEntries()){const n=s;n.hadRecentInput||(this.clsValue+=n.value,this.vitals.cls=Math.round(this.clsValue*1e3)/1e3)}this.emit()}),this.tryObserve("first-input",e=>{const s=e.getEntries()[0];s&&(this.vitals.fid=Math.round(s.processingStart-s.startTime),this.emit())}),this.tryObserve("paint",e=>{for(const s of e.getEntries())s.name==="first-contentful-paint"&&(this.vitals.fcp=Math.round(s.startTime),this.emit())})}startFps(){let e;const s=x(n=>{this.running&&(e!==void 0&&(this.fpsSamples.push(n),this.fpsSamples.length>60&&this.fpsSamples.shift(),this.fpsSamples.length%16===0&&this.emit()),e=n,this.rafId=requestAnimationFrame(s))},"tick");this.rafId=requestAnimationFrame(s)}startLongTasks(){this.tryObserve("longtask",e=>{for(const s of e.getEntries())this.longTaskIdCounter+=1,this.longTasks.push({duration:Math.round(s.duration),id:`lt-${this.longTaskIdCounter}`,startTime:Math.round(s.startTime)}),this.longTasks.length>100&&this.longTasks.shift();this.emit()})}startMemory(){const e=performance;if(!e.memory)return;const s=x(()=>{e.memory&&(this.memory={jsHeapSizeLimit:e.memory.jsHeapSizeLimit,totalJSHeapSize:e.memory.totalJSHeapSize,usedJSHeapSize:e.memory.usedJSHeapSize},this.emit())},"read");s(),this.memoryInterval=setInterval(s,1e3)}tryObserve(e,s){try{const n=new PerformanceObserver(s);n.observe({buffered:!0,type:e}),this.observers.push(n)}catch{}}}const p=new P;var B=Object.defineProperty,u=f((t,e)=>B(t,"name",{value:e,configurable:!0}),"i");const S=u(t=>t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,"formatBytes"),J=u(t=>`${t} ms`,"formatMs"),T={good:"text-success-foreground","needs-improvement":"text-warning-foreground",poor:"text-destructive"},O={good:"bg-success/10 border-success/30","needs-improvement":"bg-warning/10 border-warning/30",poor:"bg-destructive/10 border-destructive/30"},R=u(({samples:t})=>{if(t.length<2)return r("svg",{height:36,width:120});const e=120/(t.length-1),s=t.map((n,o)=>{const a=o*e,l=36-n/60*36;return`${a.toFixed(1)},${l.toFixed(1)}`}).join(" ");return r("svg",{height:36,style:"overflow: visible",width:120,children:r("polyline",{fill:"none",points:s,stroke:"currentColor","stroke-linejoin":"round","stroke-width":"1.5"})})},"FpsSparkline"),E=u(({memory:t})=>{const e=t.usedJSHeapSize/t.jsHeapSizeLimit*100,s=t.totalJSHeapSize/t.jsHeapSizeLimit*100,n=e>50?"bg-warning":"bg-success",o=e>80?"bg-destructive":n;return i("div",{class:"space-y-1.5",children:[i("div",{class:"relative h-2 bg-foreground/8 rounded-full overflow-hidden",children:[r("div",{class:"absolute left-0 top-0 h-full bg-foreground/12 rounded-full",style:{width:`${s}%`}}),r("div",{class:c("absolute left-0 top-0 h-full rounded-full",o),style:{width:`${e}%`}})]}),i("div",{class:"flex justify-between text-[0.65rem] text-muted-foreground",children:[i("span",{children:["Used: ",r("span",{class:"text-foreground font-medium",children:S(t.usedJSHeapSize)})]}),i("span",{children:["Total: ",r("span",{class:"text-foreground font-medium",children:S(t.totalJSHeapSize)})]}),i("span",{children:["Limit: ",r("span",{class:"text-foreground font-medium",children:S(t.jsHeapSizeLimit)})]})]})]})},"MemoryBar"),A=u(({label:t,metric:e,unit:s,value:n})=>{if(n===void 0)return i("div",{class:"flex flex-col items-center gap-1 p-3 border border-border bg-foreground/2 min-w-0",children:[r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wider font-semibold truncate w-full text-center",children:t}),r("span",{class:"text-[0.7rem] text-muted-foreground/50",children:"—"})]});const o=y(e,n),a=e==="cls"?n.toFixed(3):J(n);return i("div",{class:c("flex flex-col items-center gap-1 p-3 border min-w-0",O[o]),children:[r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wider font-semibold truncate w-full text-center",children:t}),r("span",{class:c("text-[0.9rem] font-bold tabular-nums",T[o]),children:a}),r("span",{class:"text-[0.6rem] text-muted-foreground/70 uppercase tracking-wide",children:s})]})},"CwvCard"),V=u(({task:t})=>i("div",{class:"flex items-center gap-3 px-3 py-2 border-b border-border/50 last:border-0 text-[0.7rem]",children:[i("span",{class:"text-muted-foreground tabular-nums w-20 shrink-0",children:[t.startTime.toLocaleString()," ms"]}),r("div",{class:"flex-1 bg-foreground/6 rounded-sm overflow-hidden h-2",children:r("div",{class:"h-full bg-warning",style:{width:`${Math.min(100,t.duration/200*100)}%`},title:`${t.duration} ms`})}),i("span",{class:"text-warning-foreground font-semibold tabular-nums w-16 text-right shrink-0",children:[t.duration," ms"]})]}),"LongTaskRow"),g=u(({action:t,children:e,title:s})=>i("section",{class:"border border-border",children:[i("div",{class:"flex items-center justify-between px-4 py-2.5 bg-foreground/3 border-b border-border",children:[r("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:s}),t]}),r("div",{class:"p-4",children:e})]}),"Section"),q=120,N=u(t=>{const[e,s]=w(C(()=>p.getSnapshot()),"snapshot"),n=w(F([]),"fpsHistoryRef");H(()=>(p.start(),p.subscribe(d=>{n.current.push(d.fps),n.current.length>q&&n.current.shift(),s(d)})),[]);const{fps:o,longTasks:a,memory:l,vitals:m}=e,b=o>=30?"needs-improvement":"poor",h=o>=50?"good":b,$=[{label:"LCP",metric:"lcp",unit:"ms",value:m.lcp},{label:"FID",metric:"fid",unit:"ms",value:m.fid},{label:"CLS",metric:"cls",unit:"score",value:m.cls},{label:"FCP",metric:"fcp",unit:"ms",value:m.fcp},{label:"TTFB",metric:"ttfb",unit:"ms",value:m.ttfb}];return i("div",{class:"p-5 space-y-4",children:[r(g,{title:"FPS",children:i("div",{class:"flex items-end gap-5",children:[i("div",{class:"flex flex-col items-center gap-0.5 shrink-0",children:[r("span",{class:c("text-3xl font-bold tabular-nums leading-none",T[h]),children:o}),r("span",{class:"text-[0.6rem] text-muted-foreground uppercase tracking-wide",children:"fps"})]}),r("div",{class:c("flex-1 min-w-0",T[h]),children:r(R,{samples:n.current})}),i("div",{class:"flex flex-col justify-between h-9 text-[0.6rem] text-muted-foreground/50 shrink-0 tabular-nums",children:[r("span",{children:"60"}),r("span",{children:"30"}),r("span",{children:"0"})]})]})}),l?r(g,{title:"JS Heap Memory",children:r(E,{memory:l})}):r(g,{title:"JS Heap Memory",children:i("p",{class:"text-[0.72rem] text-muted-foreground text-center py-2",children:["Not available — enable ",r("code",{class:"font-mono text-foreground/70",children:"--enable-precise-memory-info"})," in Chrome flags."]})}),i(g,{title:"Core Web Vitals",children:[r("div",{class:"grid grid-cols-3 gap-2",children:$.map(d=>r(A,{label:d.label,metric:d.metric,unit:d.unit,value:d.value},d.metric))}),r("p",{class:"mt-2 text-[0.62rem] text-muted-foreground/60",children:"Measured from page load. Reload to refresh. LCP and FID update as the page is interacted with."})]}),r(g,{action:a.length>0?r("button",{class:"px-2 py-0.5 text-[0.65rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent transition-colors",onClick:u(()=>p.clearLongTasks(),"onClick"),type:"button",children:"Clear"}):void 0,title:`Long Tasks${a.length>0?` (${a.length})`:""}`,children:a.length===0?r("p",{class:"text-[0.72rem] text-muted-foreground text-center py-2",children:"No long tasks detected yet."}):r("div",{class:"max-h-48 overflow-y-auto devtools-content-scroll",children:a.map(d=>r(V,{task:d},d.id))})})]})},"PerformanceApp");var D=Object.defineProperty,k=f((t,e)=>D(t,"name",{value:e,configurable:!0}),"l");const M=k(t=>t<1024*1024?`${(t/1024).toFixed(0)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,"formatBytes"),v={good:"text-success-foreground","needs-improvement":"text-warning-foreground",poor:"text-destructive"},K=k(({samples:t})=>{if(t.length<2)return r("svg",{height:24,width:60});const e=60/(t.length-1),s=t.map((n,o)=>`${(o*e).toFixed(1)},${(24-n/60*24).toFixed(1)}`).join(" ");return r("svg",{height:24,style:"overflow:visible",width:60,children:r("polyline",{fill:"none",points:s,stroke:"currentColor","stroke-linejoin":"round","stroke-width":"1.5"})})},"MiniSparkline"),W=k(({memory:t})=>{const e=t.usedJSHeapSize/t.jsHeapSizeLimit*100,s=e>50?"bg-warning":"bg-success",n=e>80?"bg-destructive":s;return i("div",{class:"flex items-center gap-2",children:[r("div",{class:"flex-1 h-1.5 bg-foreground/8 rounded-full overflow-hidden",children:r("div",{class:c("h-full rounded-full",n),style:{width:`${e}%`}})}),i("span",{class:"text-[0.65rem] tabular-nums text-muted-foreground shrink-0",children:[M(t.usedJSHeapSize)," / ",M(t.jsHeapSizeLimit)]})]})},"MiniMemoryBar"),U=60,G=k(t=>{const[e,s]=w(C(()=>p.getSnapshot()),"snapshot"),n=w(F([]),"fpsHistoryRef");H(()=>(p.start(),p.subscribe(h=>{n.current.push(h.fps),n.current.length>U&&n.current.shift(),s(h)})),[]);const{fps:o,memory:a,vitals:l}=e,m=o>=30?"needs-improvement":"poor",b=o>=50?"good":m;return i("div",{class:"space-y-3 min-w-[200px]",children:[i("div",{class:"flex items-end gap-3",children:[i("div",{class:"flex flex-col items-center gap-0 shrink-0",children:[r("span",{class:c("text-2xl font-bold tabular-nums leading-none",v[b]),children:o}),r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"fps"})]}),r("div",{class:c("flex-1 min-w-0",v[b]),children:r(K,{samples:n.current})})]}),i("div",{class:"flex gap-3",children:[l.lcp!==void 0&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"LCP"}),i("span",{class:c("text-[0.8rem] font-semibold tabular-nums",v[y("lcp",l.lcp)]),children:[l.lcp," ms"]})]}),l.fcp!==void 0&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"FCP"}),i("span",{class:c("text-[0.8rem] font-semibold tabular-nums",v[y("fcp",l.fcp)]),children:[l.fcp," ms"]})]}),l.cls!==void 0&&i("div",{class:"flex flex-col gap-0.5",children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide",children:"CLS"}),r("span",{class:c("text-[0.8rem] font-semibold tabular-nums",v[y("cls",l.cls)]),children:l.cls.toFixed(3)})]}),l.lcp===void 0&&l.fcp===void 0&&l.cls===void 0&&r("span",{class:"text-[0.65rem] text-muted-foreground/50",children:"Collecting metrics…"})]}),a&&i("div",{children:[r("span",{class:"text-[0.55rem] text-muted-foreground uppercase tracking-wide block mb-1",children:"Heap"}),r(W,{memory:a})]})]})},"PerformanceTooltip"),ee={component:N,icon:L,id:"dev-toolbar:performance",name:"Performance",tooltip:G};export{ee as default};

package/dist/apps/performance/performance-app.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource preact */
 import type { ComponentChildren } from "preact";
 import type { AppComponentProps } from "../../types/app.d.ts";
 declare const PerformanceApp: (_props: AppComponentProps) => ComponentChildren;

package/dist/apps/performance/performance-tooltip.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource preact */
 import type { ComponentChildren } from "preact";
 import type { AppTooltipProps } from "../../types/app.d.ts";
 declare const PerformanceTooltip: (_props: AppTooltipProps) => ComponentChildren;

package/dist/apps/seo/index.js

@@ -1,4 +1,4 @@
-var C=Object.defineProperty;var w=(i,t)=>C(i,"name",{value:t,configurable:!0});import{addHookName as u}from"preact/devtools";import{useState as h,useRef as S,useEffect as D}from"preact/hooks";import b from"../../packem_shared/cn-DWLJYh3h.js";import{jsxs as r,jsx as e,Fragment as I}from"preact/jsx-runtime";import k from"../../packem_shared/Button-DODNCTPZ.js";import T from"../../packem_shared/Badge-C30mDKKG.js";const j=`<!-- @license lucide-static v0.576.0 - ISC -->
+var J=Object.defineProperty;var j=(r,e)=>J(r,"name",{value:e,configurable:!0});import{addHookName as h}from"preact/devtools";import{clsx as b}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as v,useRef as Y,useEffect as X}from"preact/hooks";import{jsxs as i,jsx as t,Fragment as E}from"preact/jsx-runtime";import _ from"../../packem_shared/Button-Bkx66Co7.js";import K from"../../packem_shared/Badge-BEgU04nl.js";const F=`<!-- @license lucide-static v0.577.0 - ISC -->
 <svg
   class="lucide lucide-search"
   xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ var C=Object.defineProperty;var w=(i,t)=>C(i,"name",{value:t,configurable:!0});i
   <path d="m21 21-4.34-4.34" />
   <circle cx="11" cy="11" r="8" />
 </svg>
-`;var _=Object.defineProperty,s=w((i,t)=>_(i,"name",{value:t,configurable:!0}),"c");const A=s(()=>{const i=s(c=>document.querySelector(`meta[name="${c}"]`)?.content??"","getMeta"),t=s(c=>document.querySelector(`meta[property="og:${c}"]`)?.content??"","getOg"),l=s(c=>document.querySelector(`meta[name="twitter:${c}"]`)?.content??document.querySelector(`meta[property="twitter:${c}"]`)?.content??"","getTwitter"),n=s(c=>document.querySelector(`meta[property="article:${c}"]`)?.content??"","getArticle");return{articleAuthor:n("author"),articleModifiedTime:n("modified_time"),articlePublishedTime:n("published_time"),articleSection:n("section"),canonical:document.querySelector('link[rel="canonical"]')?.href??"",description:i("description"),ogDescription:t("description"),ogImage:t("image"),ogImageAlt:t("image:alt"),ogLocale:t("locale"),ogSiteName:t("site_name"),ogTitle:t("title"),ogType:t("type"),ogUrl:t("url"),title:document.title??"",twitterCard:l("card"),twitterCreator:l("creator"),twitterDescription:l("description"),twitterImage:l("image"),twitterImageAlt:l("image:alt"),twitterSite:l("site"),twitterTitle:l("title")}},"readMetaTags"),v=[{description:"Page title shown in browser tabs and search engine results",key:"title",label:"title",priority:"required",snippet:"<title>Your Page Title</title>"},{description:"Title shown when your page is shared on social media",key:"ogTitle",label:"og:title",priority:"required",snippet:'<meta property="og:title" content="Your Page Title" />'},{description:"Description shown when sharing on social media (max 200 chars)",key:"ogDescription",label:"og:description",priority:"required",snippet:'<meta property="og:description" content="Your page description" />'},{description:"Image shown when sharing (recommended: 1200 × 630 px)",key:"ogImage",label:"og:image",priority:"required",snippet:'<meta property="og:image" content="https://yoursite.com/og-image.jpg" />'},{description:"Twitter card format — controls how link previews appear on X / Twitter",key:"twitterCard",label:"twitter:card",priority:"required",snippet:'<meta name="twitter:card" content="summary_large_image" />'},{description:"Meta description used by search engines (max 160 chars)",key:"description",label:"description",priority:"recommended",snippet:'<meta name="description" content="Your page description" />'},{description:"Canonical URL to prevent duplicate content issues with search engines",key:"canonical",label:"canonical",priority:"recommended",snippet:'<link rel="canonical" href="https://yoursite.com/page" />'},{description:"Canonical page URL for Open Graph — should match the canonical link tag",key:"ogUrl",label:"og:url",priority:"recommended",snippet:'<meta property="og:url" content="https://yoursite.com/page" />'},{description:"Type of content: website, article, product, video.movie, etc.",key:"ogType",label:"og:type",priority:"recommended",snippet:'<meta property="og:type" content="website" />'},{description:"Your website name — shown for consistent branding on social platforms",key:"ogSiteName",label:"og:site_name",priority:"recommended",snippet:'<meta property="og:site_name" content="Your Site Name" />'},{description:"Language and territory of page content (e.g. en_US, de_DE, fr_FR)",key:"ogLocale",label:"og:locale",priority:"recommended",snippet:'<meta property="og:locale" content="en_US" />'},{description:"Alt text for the OG image — important for accessibility on social platforms",key:"ogImageAlt",label:"og:image:alt",priority:"recommended",snippet:'<meta property="og:image:alt" content="Description of the shared image" />'},{description:"Override title specifically for X / Twitter cards (falls back to og:title)",key:"twitterTitle",label:"twitter:title",priority:"recommended",snippet:'<meta name="twitter:title" content="Your Page Title" />'},{description:"Override description for X / Twitter cards (falls back to og:description)",key:"twitterDescription",label:"twitter:description",priority:"recommended",snippet:'<meta name="twitter:description" content="Your page description" />'},{description:"Override image for X / Twitter cards (falls back to og:image)",key:"twitterImage",label:"twitter:image",priority:"recommended",snippet:'<meta name="twitter:image" content="https://yoursite.com/twitter-card.jpg" />'},{description:"X / Twitter handle of the website owner (e.g. @yourhandle)",key:"twitterSite",label:"twitter:site",priority:"recommended",snippet:'<meta name="twitter:site" content="@yourhandle" />'}],U=[{accentClass:"border-blue-500/30",descKey:"ogDescription",id:"facebook",imageKey:"ogImage",name:"Facebook",requiredKeys:["ogTitle","ogDescription","ogImage"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-foreground/20",descKey:"twitterDescription",id:"twitter",imageKey:"twitterImage",name:"X / Twitter",requiredKeys:["twitterTitle","twitterDescription","twitterImage","twitterCard"],titleKey:"twitterTitle",urlKey:"ogUrl"},{accentClass:"border-blue-600/30",descKey:"ogDescription",id:"linkedin",imageKey:"ogImage",name:"LinkedIn",requiredKeys:["ogTitle","ogDescription","ogImage"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-indigo-500/30",descKey:"ogDescription",id:"discord",imageKey:"ogImage",name:"Discord",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-green-500/30",descKey:"ogDescription",id:"slack",imageKey:"ogImage",name:"Slack",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-purple-500/30",descKey:"ogDescription",id:"mastodon",imageKey:"ogImage",name:"Mastodon",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-sky-500/30",descKey:"ogDescription",id:"bluesky",imageKey:"ogImage",name:"Bluesky",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"}],M=s(({meta:i,platform:t})=>{const l=i[t.titleKey]||i.title||"No title",n=i[t.descKey]||i.description||"",c=i[t.imageKey]||"",g=i[t.urlKey]||i.canonical||"",d=t.requiredKeys.filter(p=>!i[p]);return r("div",{class:b("border bg-card overflow-hidden",t.accentClass),children:[r("div",{class:"flex items-center justify-between gap-2 px-3 py-2 border-b border-border/50 bg-foreground/2",children:[e("span",{class:"text-[0.65rem] font-bold uppercase tracking-wider text-muted-foreground",children:t.name}),d.length>0&&r("span",{class:"text-[0.6rem] px-1.5 py-0.5 bg-warning/10 text-warning border border-warning/20 font-medium",children:["Missing: ",d.join(", ")]})]}),r("div",{class:"p-3",children:[e("div",{class:"w-full aspect-[1200/630] bg-foreground/6 border border-border/50 mb-2.5 overflow-hidden relative",children:c?e("img",{alt:"OG image preview",class:"w-full h-full object-cover",loading:"lazy",src:c}):e("div",{class:"absolute inset-0 flex items-center justify-center",children:e("span",{class:"text-[0.65rem] text-muted-foreground/40 uppercase tracking-wider",children:"No image"})})}),g&&e("div",{class:"text-[0.6rem] text-muted-foreground/60 uppercase tracking-wider truncate mb-1",children:g}),e("div",{class:"text-[0.8rem] font-semibold text-foreground line-clamp-1",children:l}),n&&e("div",{class:"text-[0.7rem] text-muted-foreground line-clamp-2 mt-0.5",children:n})]})]})},"SocialPreview"),a=s(({label:i,required:t=!1,value:l})=>r("div",{class:"flex items-start gap-3 py-2 border-b border-border/30 last:border-0",children:[e("div",{class:"w-44 shrink-0",children:e("span",{class:"text-[0.7rem] font-mono text-muted-foreground",children:i})}),e("div",{class:"flex-1 min-w-0",children:l?e("span",{class:"text-[0.75rem] text-foreground break-all",children:l}):e("span",{class:b("text-[0.7rem]",t?"text-warning":"text-muted-foreground/40"),children:t?"⚠ Missing":"—"})})]}),"MetaRow"),m=s(({children:i})=>r("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/60 mb-2",children:[e("span",{class:"text-primary/50",children:"// "}),i]}),"SectionHeading"),O=s(({text:i})=>{const[t,l]=u(h(!1),"copied"),n=u(S(null),"timerRef"),c=s(()=>{navigator.clipboard.writeText(i).then(()=>{l(!0),n.current&&clearTimeout(n.current),n.current=setTimeout(l,2e3,!1)}).catch(console.error)},"handleCopy");return e(k,{class:b("text-[0.6rem] font-mono shrink-0",t?"border-success/40 text-success bg-success/8":""),onClick:c,size:"sm",variant:"outline",children:t?"Copied!":"Copy"})},"CopyButton"),x=s(({def:i})=>r("div",{class:"border border-border/60 bg-card p-3 space-y-2",children:[r("div",{class:"flex items-start justify-between gap-3",children:[e("code",{class:"text-[0.7rem] font-mono font-bold text-foreground",children:i.label}),e(T,{class:"text-[0.58rem] uppercase tracking-wide shrink-0",variant:i.priority==="required"?"destructive":"warning",children:i.priority})]}),e("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed",children:i.description}),r("div",{class:"flex items-center gap-2",children:[e("code",{class:"flex-1 min-w-0 text-[0.65rem] font-mono text-muted-foreground bg-foreground/4 border border-border/40 px-2 py-1 overflow-x-auto whitespace-nowrap block",children:i.snippet}),e(O,{text:i.snippet})]})]}),"MissingTagCard"),P=s(i=>{const[t,l]=u(h(null),"meta"),[n,c]=u(h("preview"),"activeTab"),g=s(()=>{l(A())},"refresh");if(D(()=>{g()},[]),!t)return r("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[e("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(o=>e("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${o}ms`}},o))}),e("span",{class:"text-[0.75rem] text-muted-foreground",children:"Reading meta tags…"})]});const d=v.filter(o=>o.priority==="required"&&!t[o.key]),p=v.filter(o=>o.priority==="recommended"&&!t[o.key]),y=d.length+p.length,K=t.ogType==="article"||!!(t.articleAuthor||t.articlePublishedTime||t.articleModifiedTime||t.articleSection);return r("div",{class:"flex flex-col h-full",children:[r("div",{class:"flex items-center justify-between gap-3 px-4 py-2.5 border-b border-border shrink-0",children:[e("div",{class:"flex items-center gap-0",children:["preview","tags","missing"].map(o=>{const q=o==="preview"?"Social Previews":o==="tags"?"Meta Tags":"Missing",f=o==="missing"&&y>0?y:null;return r("button",{class:b("flex items-center gap-1.5 px-3 py-1.5 text-[0.75rem] font-medium border-0 cursor-pointer transition-colors capitalize",n===o?"text-foreground border-b-2 border-primary bg-transparent":"text-muted-foreground bg-transparent hover:text-foreground"),onClick:s(()=>c(o),"onClick"),type:"button",children:[q,f!==null&&e(T,{class:"text-[0.58rem] min-w-[1.1rem] text-center",variant:d.length>0?"destructive":"warning",children:f})]},o)})}),e(k,{onClick:g,size:"sm",variant:"outline",children:"Refresh"})]}),r("div",{class:"flex-1 overflow-auto",children:[n==="preview"&&e("div",{class:"p-4 grid grid-cols-2 gap-4",children:U.map(o=>e(M,{meta:t,platform:o},o.id))}),n==="tags"&&r("div",{class:"p-5 space-y-5",children:[r("div",{children:[e(m,{children:"Basic"}),e("div",{class:"border border-border bg-card",children:r("div",{class:"px-4",children:[e(a,{label:"title",required:!0,value:t.title}),e(a,{label:"description",required:!0,value:t.description}),e(a,{label:"canonical",value:t.canonical})]})})]}),r("div",{children:[e(m,{children:"Open Graph"}),e("div",{class:"border border-border bg-card",children:r("div",{class:"px-4",children:[e(a,{label:"og:title",required:!0,value:t.ogTitle}),e(a,{label:"og:description",required:!0,value:t.ogDescription}),e(a,{label:"og:image",required:!0,value:t.ogImage}),e(a,{label:"og:image:alt",value:t.ogImageAlt}),e(a,{label:"og:url",value:t.ogUrl}),e(a,{label:"og:type",value:t.ogType}),e(a,{label:"og:site_name",value:t.ogSiteName}),e(a,{label:"og:locale",value:t.ogLocale})]})})]}),K&&r("div",{children:[e(m,{children:"Article"}),e("div",{class:"border border-border bg-card",children:r("div",{class:"px-4",children:[e(a,{label:"article:author",value:t.articleAuthor}),e(a,{label:"article:published_time",value:t.articlePublishedTime}),e(a,{label:"article:modified_time",value:t.articleModifiedTime}),e(a,{label:"article:section",value:t.articleSection})]})})]}),r("div",{children:[e(m,{children:"X / Twitter"}),e("div",{class:"border border-border bg-card",children:r("div",{class:"px-4",children:[e(a,{label:"twitter:card",required:!0,value:t.twitterCard}),e(a,{label:"twitter:title",value:t.twitterTitle}),e(a,{label:"twitter:description",value:t.twitterDescription}),e(a,{label:"twitter:image",value:t.twitterImage}),e(a,{label:"twitter:image:alt",value:t.twitterImageAlt}),e(a,{label:"twitter:site",value:t.twitterSite}),e(a,{label:"twitter:creator",value:t.twitterCreator})]})})]})]}),n==="missing"&&e("div",{class:"p-5 space-y-5",children:y===0?r("div",{class:"flex flex-col items-center justify-center py-12 gap-3",children:[e("div",{class:"size-10 border border-success/30 bg-success/8 flex items-center justify-center text-success text-lg select-none",children:"✓"}),e("p",{class:"text-[0.8rem] font-medium text-foreground/70",children:"All recommended tags are present"}),e("p",{class:"text-[0.7rem] text-muted-foreground",children:"Your page has all required and recommended meta tags."})]}):r(I,{children:[d.length>0&&r("div",{children:[r("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-destructive/80 mb-2 flex items-center gap-1.5",children:[e("span",{children:"Required"}),e("span",{class:"bg-destructive/10 border border-destructive/25 text-destructive px-1 font-bold",children:d.length})]}),e("div",{class:"space-y-2",children:d.map(o=>e(x,{def:o},o.key))})]}),p.length>0&&r("div",{children:[r("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-warning/80 mb-2 flex items-center gap-1.5",children:[e("span",{children:"Recommended"}),e("span",{class:"bg-warning/10 border border-warning/25 text-warning px-1 font-bold",children:p.length})]}),e("div",{class:"space-y-2",children:p.map(o=>e(x,{def:o},o.key))})]})]})})]})]})},"SeoApp"),B={component:P,icon:j,id:"dev-toolbar:seo",name:"SEO"};export{B as default};
+`;var V=Object.defineProperty,l=j((r,e)=>V(r,"name",{value:e,configurable:!0}),"l");const G=l(()=>{const r=l(s=>document.querySelector(`meta[name="${s}"]`)?.content??"","getMeta"),e=l(s=>document.querySelector(`meta[property="og:${s}"]`)?.content??"","getOg"),o=l(s=>document.querySelector(`meta[name="twitter:${s}"]`)?.content??document.querySelector(`meta[property="twitter:${s}"]`)?.content??"","getTwitter"),n=l(s=>document.querySelector(`meta[property="article:${s}"]`)?.content??"","getArticle");return{articleAuthor:n("author"),articleModifiedTime:n("modified_time"),articlePublishedTime:n("published_time"),articleSection:n("section"),canonical:document.querySelector('link[rel="canonical"]')?.href??"",description:r("description"),ogDescription:e("description"),ogImage:e("image"),ogImageAlt:e("image:alt"),ogLocale:e("locale"),ogSiteName:e("site_name"),ogTitle:e("title"),ogType:e("type"),ogUrl:e("url"),title:document.title??"",twitterCard:o("card"),twitterCreator:o("creator"),twitterDescription:o("description"),twitterImage:o("image"),twitterImageAlt:o("image:alt"),twitterSite:o("site"),twitterTitle:o("title")}},"readMetaTags"),W=/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2})?(?:[+-]\d{2}:\d{2}|Z)?)?$/,D=l(r=>typeof r=="string"&&W.test(r),"isISO8601"),a=l((r,e)=>r[e]!==void 0&&r[e]!==null&&r[e]!=="","has"),I=l(r=>Array.isArray(r)&&r.length>0,"isNonEmptyArray"),C=l(r=>{const e=[];if(!a(r,"headline")&&!a(r,"name")&&e.push({message:"headline (or name) is required",property:"headline",severity:"error"}),a(r,"author")){const o=r.author;typeof o=="object"&&!Array.isArray(o)&&!a(o,"name")&&e.push({message:"author.name is missing",property:"author.name",severity:"warning"})}else e.push({message:"author is required",property:"author",severity:"error"});return a(r,"datePublished")?D(r.datePublished)||e.push({message:"datePublished should be ISO 8601 format (e.g. 2024-01-15T09:00:00Z)",property:"datePublished",severity:"warning"}):e.push({message:"datePublished is required",property:"datePublished",severity:"error"}),a(r,"image")||e.push({message:"image is recommended for rich results",property:"image",severity:"warning"}),a(r,"description")||e.push({message:"description is recommended",property:"description",severity:"suggestion"}),e},"validateArticle"),H=l(r=>{const e=[];a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"});const o=a(r,"offers"),n=a(r,"aggregateRating"),s=a(r,"review");if(!o&&!n&&!s&&e.push({message:"At least one of: offers, aggregateRating, or review is required for rich results",property:"offers",severity:"error"}),o){const c=Array.isArray(r.offers)?r.offers[0]:r.offers;c&&typeof c=="object"&&(!a(c,"price")&&!a(c,"priceSpecification")&&e.push({message:"offers.price is required",property:"offers.price",severity:"error"}),a(c,"priceCurrency")||e.push({message:"offers.priceCurrency is required (e.g. 'USD')",property:"offers.priceCurrency",severity:"error"}))}if(n){const c=r.aggregateRating;a(c,"ratingValue")||e.push({message:"aggregateRating.ratingValue is required",property:"aggregateRating.ratingValue",severity:"error"}),!a(c,"reviewCount")&&!a(c,"ratingCount")&&e.push({message:"aggregateRating.reviewCount (or ratingCount) is required",property:"aggregateRating.reviewCount",severity:"error"})}return a(r,"image")||e.push({message:"image is recommended for rich results",property:"image",severity:"suggestion"}),e},"validateProduct"),Q=l(r=>{const e=[],o=r.itemListElement;return I(o)?(o.length<2&&e.push({message:"itemListElement should have at least 2 items",property:"itemListElement",severity:"warning"}),o.forEach((n,s)=>{n.position!==s+1&&e.push({message:`itemListElement[${s}].position should be ${s+1}`,property:`itemListElement[${s}].position`,severity:"warning"}),n.name||n.item?.name||e.push({message:`itemListElement[${s}].name is required`,property:`itemListElement[${s}].name`,severity:"error"})}),e):(e.push({message:"itemListElement array is required",property:"itemListElement",severity:"error"}),e)},"validateBreadcrumbList"),Z=l(r=>{const e=[],o=r.mainEntity;return I(o)?(o.forEach((n,s)=>{a(n,"name")||e.push({message:`mainEntity[${s}].name (question text) is required`,property:`mainEntity[${s}].name`,severity:"error"});const c=n.acceptedAnswer;(!c||!a(c,"text"))&&e.push({message:`mainEntity[${s}].acceptedAnswer.text is required`,property:`mainEntity[${s}].acceptedAnswer.text`,severity:"error"})}),e):(e.push({message:"mainEntity array with at least one Question is required",property:"mainEntity",severity:"error"}),e)},"validateFaqPage"),O=l(r=>{const e=[];a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"startDate")?D(r.startDate)||e.push({message:"startDate should be ISO 8601 format",property:"startDate",severity:"warning"}):e.push({message:"startDate is required",property:"startDate",severity:"error"});const o=r.location;return o?a(o,"name")||e.push({message:"location.name is required",property:"location.name",severity:"error"}):e.push({message:"location is required",property:"location",severity:"error"}),a(r,"description")||e.push({message:"description is recommended",property:"description",severity:"suggestion"}),e},"validateEvent"),P=l(r=>{const e=[];return a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"url")||e.push({message:"url is recommended",property:"url",severity:"warning"}),a(r,"logo")||e.push({message:"logo is recommended for Knowledge Panel eligibility",property:"logo",severity:"suggestion"}),e},"validateOrganization"),ee=l(r=>{const e=[];return a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"url")||e.push({message:"url is recommended",property:"url",severity:"suggestion"}),e},"validatePerson"),re=l(r=>{const e=[];return a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"image")||e.push({message:"image is required for rich results",property:"image",severity:"error"}),!a(r,"recipeIngredient")&&!a(r,"ingredients")&&e.push({message:"recipeIngredient is recommended",property:"recipeIngredient",severity:"suggestion"}),a(r,"recipeInstructions")||e.push({message:"recipeInstructions is recommended",property:"recipeInstructions",severity:"suggestion"}),a(r,"author")||e.push({message:"author is recommended",property:"author",severity:"suggestion"}),e},"validateRecipe"),L=l(r=>{const e=[];return a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"url")||e.push({message:"url is recommended",property:"url",severity:"warning"}),e},"validateWebSiteOrPage"),te=l(r=>{const e=[];return a(r,"name")||e.push({message:"name is required",property:"name",severity:"error"}),a(r,"description")||e.push({message:"description is required",property:"description",severity:"error"}),a(r,"thumbnailUrl")||e.push({message:"thumbnailUrl is required for rich results",property:"thumbnailUrl",severity:"error"}),a(r,"uploadDate")?D(r.uploadDate)||e.push({message:"uploadDate should be ISO 8601 format",property:"uploadDate",severity:"warning"}):e.push({message:"uploadDate is required",property:"uploadDate",severity:"error"}),e},"validateVideoObject"),M={Article:C,BlogPosting:C,BreadcrumbList:Q,Event:O,EventSeries:O,FAQPage:Z,LocalBusiness:P,NewsArticle:C,Organization:P,Person:ee,Product:H,Recipe:re,VideoObject:te,WebPage:L,WebSite:L},ie=new Set(Object.keys(M)),se=l(r=>{const e=[],o=String(r["@context"]??""),n=String(r["@type"]??"");if(o?o.includes("schema.org")||e.push({message:"@context should reference schema.org",property:"@context",severity:"warning"}):e.push({message:"@context is missing — should be 'https://schema.org'",property:"@context",severity:"error"}),!n)return e.push({message:"@type is required",property:"@type",severity:"error"}),e;ie.has(n)||e.push({message:`@type '${n}' is not validated — no known rules for this type`,property:"@type",severity:"suggestion"});const s=M[n];return s&&e.push(...s(r)),e},"validateJsonLd"),oe=l(r=>r.some(e=>e.severity==="error")?"error":r.some(e=>e.severity==="warning")?"warning":r.some(e=>e.severity==="suggestion")?"suggestion":"ok","deriveStatus"),R=l((r,e,o,n)=>{const s=se(r),c=String(r["@type"]??"Unknown");return{context:String(r["@context"]??""),graphIndex:o,index:e,messages:s,parsed:r,raw:n??JSON.stringify(r,void 0,2),status:oe(s),type:c}},"processJsonLdNode"),ne=/^\/\/<!\[CDATA\[/,ae=/\/\/\]\]>$/,le=/^<!\[CDATA\[/,ce=/\]\]>$/,de=l(()=>{const r=document.querySelectorAll('script[type="application/ld+json"]'),e=[];return r.forEach((o,n)=>{let s=(o.textContent??"").trim();s=s.replace(ne,"").replace(ae,""),s=s.replace(le,"").replace(ce,"");try{const c=JSON.parse(s);if(I(c["@graph"])){const y=String(c["@context"]??"");c["@graph"].forEach((g,m)=>{const u={"@context":g["@context"]??y,...g};e.push(R(u,n,m,void 0))})}else e.push(R(c,n,void 0,s))}catch{e.push({context:"",index:n,messages:[{message:"Could not parse JSON content",property:"",severity:"error"}],parsed:{},raw:s,status:"error",type:"Invalid JSON"})}}),e},"readJsonLdSchemas"),U=[{description:"Page title shown in browser tabs and search engine results",key:"title",label:"title",priority:"required",snippet:"<title>Your Page Title</title>"},{description:"Title shown when your page is shared on social media",key:"ogTitle",label:"og:title",priority:"required",snippet:'<meta property="og:title" content="Your Page Title" />'},{description:"Description shown when sharing on social media (max 200 chars)",key:"ogDescription",label:"og:description",priority:"required",snippet:'<meta property="og:description" content="Your page description" />'},{description:"Image shown when sharing (recommended: 1200 × 630 px)",key:"ogImage",label:"og:image",priority:"required",snippet:'<meta property="og:image" content="https://yoursite.com/og-image.jpg" />'},{description:"Twitter card format — controls how link previews appear on X / Twitter",key:"twitterCard",label:"twitter:card",priority:"required",snippet:'<meta name="twitter:card" content="summary_large_image" />'},{description:"Meta description used by search engines (max 160 chars)",key:"description",label:"description",priority:"recommended",snippet:'<meta name="description" content="Your page description" />'},{description:"Canonical URL to prevent duplicate content issues with search engines",key:"canonical",label:"canonical",priority:"recommended",snippet:'<link rel="canonical" href="https://yoursite.com/page" />'},{description:"Canonical page URL for Open Graph — should match the canonical link tag",key:"ogUrl",label:"og:url",priority:"recommended",snippet:'<meta property="og:url" content="https://yoursite.com/page" />'},{description:"Type of content: website, article, product, video.movie, etc.",key:"ogType",label:"og:type",priority:"recommended",snippet:'<meta property="og:type" content="website" />'},{description:"Your website name — shown for consistent branding on social platforms",key:"ogSiteName",label:"og:site_name",priority:"recommended",snippet:'<meta property="og:site_name" content="Your Site Name" />'},{description:"Language and territory of page content (e.g. en_US, de_DE, fr_FR)",key:"ogLocale",label:"og:locale",priority:"recommended",snippet:'<meta property="og:locale" content="en_US" />'},{description:"Alt text for the OG image — important for accessibility on social platforms",key:"ogImageAlt",label:"og:image:alt",priority:"recommended",snippet:'<meta property="og:image:alt" content="Description of the shared image" />'},{description:"Override title specifically for X / Twitter cards (falls back to og:title)",key:"twitterTitle",label:"twitter:title",priority:"recommended",snippet:'<meta name="twitter:title" content="Your Page Title" />'},{description:"Override description for X / Twitter cards (falls back to og:description)",key:"twitterDescription",label:"twitter:description",priority:"recommended",snippet:'<meta name="twitter:description" content="Your page description" />'},{description:"Override image for X / Twitter cards (falls back to og:image)",key:"twitterImage",label:"twitter:image",priority:"recommended",snippet:'<meta name="twitter:image" content="https://yoursite.com/twitter-card.jpg" />'},{description:"X / Twitter handle of the website owner (e.g. @yourhandle)",key:"twitterSite",label:"twitter:site",priority:"recommended",snippet:'<meta name="twitter:site" content="@yourhandle" />'}],pe=[{accentClass:"border-blue-500/30",descKey:"ogDescription",id:"facebook",imageKey:"ogImage",name:"Facebook",requiredKeys:["ogTitle","ogDescription","ogImage"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-foreground/20",descKey:"twitterDescription",id:"twitter",imageKey:"twitterImage",name:"X / Twitter",requiredKeys:["twitterTitle","twitterDescription","twitterImage","twitterCard"],titleKey:"twitterTitle",urlKey:"ogUrl"},{accentClass:"border-blue-600/30",descKey:"ogDescription",id:"linkedin",imageKey:"ogImage",name:"LinkedIn",requiredKeys:["ogTitle","ogDescription","ogImage"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-indigo-500/30",descKey:"ogDescription",id:"discord",imageKey:"ogImage",name:"Discord",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-green-500/30",descKey:"ogDescription",id:"slack",imageKey:"ogImage",name:"Slack",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-purple-500/30",descKey:"ogDescription",id:"mastodon",imageKey:"ogImage",name:"Mastodon",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"},{accentClass:"border-sky-500/30",descKey:"ogDescription",id:"bluesky",imageKey:"ogImage",name:"Bluesky",requiredKeys:["ogTitle","ogDescription"],titleKey:"ogTitle",urlKey:"ogUrl"}],ge=l(({meta:r,platform:e})=>{const o=r[e.titleKey]||r.title||"No title",n=r[e.descKey]||r.description||"",s=r[e.imageKey]||"",c=r[e.urlKey]||r.canonical||"",y=e.requiredKeys.filter(g=>!r[g]);return i("div",{class:b("border bg-card overflow-hidden",e.accentClass),children:[i("div",{class:"flex items-center justify-between gap-2 px-3 py-2 border-b border-border/50 bg-foreground/2",children:[t("span",{class:"text-[0.65rem] font-bold uppercase tracking-wider text-muted-foreground",children:e.name}),y.length>0&&i("span",{class:"text-[0.6rem] px-1.5 py-0.5 bg-warning/10 text-warning border border-warning/20 font-medium",children:["Missing: ",y.join(", ")]})]}),i("div",{class:"p-3",children:[t("div",{class:"w-full aspect-[1200/630] bg-foreground/6 border border-border/50 mb-2.5 overflow-hidden relative",children:s?t("img",{alt:"OG image preview",class:"w-full h-full object-cover",loading:"lazy",src:s}):t("div",{class:"absolute inset-0 flex items-center justify-center",children:t("span",{class:"text-[0.65rem] text-muted-foreground/40 uppercase tracking-wider",children:"No image"})})}),c&&t("div",{class:"text-[0.6rem] text-muted-foreground/60 uppercase tracking-wider truncate mb-1",children:c}),t("div",{class:"text-[0.8rem] font-semibold text-foreground line-clamp-1",children:o}),n&&t("div",{class:"text-[0.7rem] text-muted-foreground line-clamp-2 mt-0.5",children:n})]})]})},"SocialPreview"),p=l(({label:r,required:e=!1,value:o})=>i("div",{class:"flex items-start gap-3 py-2 border-b border-border/30 last:border-0",children:[t("div",{class:"w-44 shrink-0",children:t("span",{class:"text-[0.7rem] font-mono text-muted-foreground",children:r})}),t("div",{class:"flex-1 min-w-0",children:o?t("span",{class:"text-[0.75rem] text-foreground break-all",children:o}):t("span",{class:b("text-[0.7rem]",e?"text-warning":"text-muted-foreground/40"),children:e?"⚠ Missing":"—"})})]}),"MetaRow"),k=l(({children:r})=>i("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/60 mb-2",children:[t("span",{class:"text-primary/50",children:"// "}),r]}),"SectionHeading"),z=l(({text:r})=>{const[e,o]=h(v(!1),"copied"),n=h(Y(void 0),"timerRef"),s=l(()=>{navigator.clipboard.writeText(r).then(()=>{o(!0),n.current&&clearTimeout(n.current),n.current=setTimeout(o,2e3,!1)}).catch(()=>{})},"handleCopy");return t(_,{class:b("text-[0.6rem] font-mono shrink-0",e?"border-success/40 text-success bg-success/8":""),onClick:s,size:"sm",variant:"outline",children:e?"Copied!":"Copy"})},"CopyButton"),N=l(({def:r})=>i("div",{class:"border border-border/60 bg-card p-3 space-y-2",children:[i("div",{class:"flex items-start justify-between gap-3",children:[t("code",{class:"text-[0.7rem] font-mono font-bold text-foreground",children:r.label}),t(K,{class:"text-[0.58rem] uppercase tracking-wide shrink-0",variant:r.priority==="required"?"destructive":"warning",children:r.priority})]}),t("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed",children:r.description}),i("div",{class:"flex items-center gap-2",children:[t("code",{class:"flex-1 min-w-0 text-[0.65rem] font-mono text-muted-foreground bg-foreground/4 border border-border/40 px-2 py-1 overflow-x-auto whitespace-nowrap block",children:r.snippet}),t(z,{text:r.snippet})]})]}),"MissingTagCard"),$={error:{color:"text-destructive",icon:"✖",label:"Error"},ok:{color:"text-success",icon:"✔",label:"OK"},suggestion:{color:"text-primary",icon:"ℹ",label:"Info"},warning:{color:"text-warning",icon:"⚠",label:"Warning"}},me={error:"destructive",ok:"success",suggestion:"outline",warning:"warning"},ue=l(({schema:r})=>{const[e,o]=h(v(!1),"open"),[n,s]=h(v(!1),"showRaw"),c=$[r.status],y=r.graphIndex===void 0?`Script ${r.index+1}`:`Script ${r.index+1} @graph[${r.graphIndex}]`;return i("div",{class:"border border-border bg-card overflow-hidden",children:[i("button",{class:"w-full flex items-center justify-between gap-3 px-4 py-3 bg-transparent border-0 cursor-pointer text-left hover:bg-foreground/3 transition-colors",onClick:l(()=>o(g=>!g),"onClick"),type:"button",children:[i("div",{class:"flex items-center gap-2 min-w-0",children:[t("span",{class:b("text-base shrink-0 leading-none",c.color),children:c.icon}),t("span",{class:"text-[0.7rem] text-muted-foreground font-mono shrink-0",children:y}),t("code",{class:"text-[0.75rem] font-mono font-semibold text-foreground truncate",children:r.type})]}),i("div",{class:"flex items-center gap-2 shrink-0",children:[t(K,{variant:me[r.status],children:c.label}),t("span",{class:b("text-muted-foreground text-[0.65rem] transition-transform duration-150",e?"rotate-90":""),children:"▶"})]})]}),e&&i("div",{class:"border-t border-border",children:[r.messages.length>0?t("div",{class:"px-4 py-3 space-y-1.5",children:r.messages.map((g,m)=>{const u=$[g.severity];return i("div",{class:"flex items-start gap-2 text-[0.72rem]",children:[t("span",{class:b("shrink-0 leading-none mt-px",u.color),children:u.icon}),i("div",{class:"min-w-0",children:[g.property&&i("code",{class:"text-[0.65rem] font-mono text-muted-foreground mr-1.5",children:[g.property,":"]}),t("span",{class:"text-foreground/80",children:g.message})]})]},m)})}):i("div",{class:"px-4 py-3 flex items-center gap-2 text-[0.72rem] text-success",children:[t("span",{children:"✔"}),t("span",{children:"No issues found"})]}),i("div",{class:"border-t border-border/50 px-4 py-2 flex items-center justify-between",children:[i("button",{class:"text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors bg-transparent border-0 cursor-pointer p-0",onClick:l(()=>s(g=>!g),"onClick"),type:"button",children:[n?"Hide":"Show"," raw JSON"]}),t(z,{text:r.raw})]}),n&&t("pre",{class:"text-[0.65rem] font-mono leading-relaxed bg-foreground/3 border-t border-border/50 px-4 py-3 overflow-x-auto max-h-60 text-muted-foreground whitespace-pre-wrap break-all m-0",children:r.raw})]})]})},"SchemaCard"),ye=l(r=>{const[e,o]=h(v(void 0),"meta"),[n,s]=h(v([]),"schemas"),[c,y]=h(v("preview"),"activeTab"),g=l(()=>{o(G()),s(de())},"refresh");if(X(()=>{g()},[]),!e)return i("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[t("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(d=>t("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${d}ms`}},d))}),t("span",{class:"text-[0.75rem] text-muted-foreground",children:"Reading meta tags…"})]});const m=U.filter(d=>d.priority==="required"&&!e[d.key]),u=U.filter(d=>d.priority==="recommended"&&!e[d.key]),q=m.length+u.length,f=n.filter(d=>d.status==="error").length,A=n.filter(d=>d.status==="warning").length;let x;f>0?x=f:A>0&&(x=A);const B=e.ogType==="article"||!!(e.articleAuthor||e.articlePublishedTime||e.articleModifiedTime||e.articleSection);return i("div",{class:"flex flex-col h-full",children:[i("div",{class:"flex items-center justify-between gap-3 px-4 py-2.5 border-b border-border shrink-0",children:[t("div",{class:"flex items-center gap-0",children:["preview","tags","missing","jsonld"].map(d=>{const T={jsonld:"Structured Data",missing:"Missing",preview:"Social Previews",tags:"Meta Tags"}[d];let w;d==="missing"&&q>0?w=q:d==="jsonld"&&x!==void 0&&(w=x);let S;return d==="missing"?S=m.length>0?"destructive":"warning":S=f>0?"destructive":"warning",i("button",{class:b("flex items-center gap-1.5 px-3 py-1.5 text-[0.75rem] font-medium border-0 cursor-pointer transition-colors capitalize",c===d?"text-foreground border-b-2 border-primary bg-transparent":"text-muted-foreground bg-transparent hover:text-foreground"),onClick:l(()=>y(d),"onClick"),type:"button",children:[T,w!==void 0&&t(K,{class:"text-[0.58rem] min-w-[1.1rem] text-center",variant:S,children:w})]},d)})}),t(_,{onClick:g,size:"sm",variant:"outline",children:"Refresh"})]}),i("div",{class:"flex-1 overflow-auto",children:[c==="preview"&&t("div",{class:"p-4 grid grid-cols-2 gap-4",children:pe.map(d=>t(ge,{meta:e,platform:d},d.id))}),c==="tags"&&i("div",{class:"p-5 space-y-5",children:[i("div",{children:[t(k,{children:"Basic"}),t("div",{class:"border border-border bg-card",children:i("div",{class:"px-4",children:[t(p,{label:"title",required:!0,value:e.title}),t(p,{label:"description",required:!0,value:e.description}),t(p,{label:"canonical",value:e.canonical})]})})]}),i("div",{children:[t(k,{children:"Open Graph"}),t("div",{class:"border border-border bg-card",children:i("div",{class:"px-4",children:[t(p,{label:"og:title",required:!0,value:e.ogTitle}),t(p,{label:"og:description",required:!0,value:e.ogDescription}),t(p,{label:"og:image",required:!0,value:e.ogImage}),t(p,{label:"og:image:alt",value:e.ogImageAlt}),t(p,{label:"og:url",value:e.ogUrl}),t(p,{label:"og:type",value:e.ogType}),t(p,{label:"og:site_name",value:e.ogSiteName}),t(p,{label:"og:locale",value:e.ogLocale})]})})]}),B&&i("div",{children:[t(k,{children:"Article"}),t("div",{class:"border border-border bg-card",children:i("div",{class:"px-4",children:[t(p,{label:"article:author",value:e.articleAuthor}),t(p,{label:"article:published_time",value:e.articlePublishedTime}),t(p,{label:"article:modified_time",value:e.articleModifiedTime}),t(p,{label:"article:section",value:e.articleSection})]})})]}),i("div",{children:[t(k,{children:"X / Twitter"}),t("div",{class:"border border-border bg-card",children:i("div",{class:"px-4",children:[t(p,{label:"twitter:card",required:!0,value:e.twitterCard}),t(p,{label:"twitter:title",value:e.twitterTitle}),t(p,{label:"twitter:description",value:e.twitterDescription}),t(p,{label:"twitter:image",value:e.twitterImage}),t(p,{label:"twitter:image:alt",value:e.twitterImageAlt}),t(p,{label:"twitter:site",value:e.twitterSite}),t(p,{label:"twitter:creator",value:e.twitterCreator})]})})]})]}),c==="jsonld"&&t("div",{class:"p-5 space-y-3",children:n.length===0?i("div",{class:"flex flex-col items-center justify-center py-12 gap-3",children:[t("div",{class:"size-10 border border-border flex items-center justify-center text-muted-foreground/40 text-lg select-none",children:"{}"}),t("p",{class:"text-[0.8rem] font-medium text-foreground/70",children:"No structured data found"}),i("p",{class:"text-[0.7rem] text-muted-foreground text-center max-w-xs leading-relaxed",children:["Add a ",t("code",{class:"font-mono bg-foreground/6 px-1",children:'<script type="application/ld+json">'})," block to help search engines understand your content."]})]}):i(E,{children:[i("div",{class:"flex items-center justify-between mb-1",children:[i("p",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[n.length," schema",n.length===1?"":"s"," detected"]}),f>0&&i("span",{class:"text-[0.65rem] text-destructive font-medium",children:[f," error",f===1?"":"s"]})]}),n.map((d,T)=>t(ue,{schema:d},T))]})}),c==="missing"&&t("div",{class:"p-5 space-y-5",children:q===0?i("div",{class:"flex flex-col items-center justify-center py-12 gap-3",children:[t("div",{class:"size-10 border border-success/30 bg-success/8 flex items-center justify-center text-success text-lg select-none",children:"✓"}),t("p",{class:"text-[0.8rem] font-medium text-foreground/70",children:"All recommended tags are present"}),t("p",{class:"text-[0.7rem] text-muted-foreground",children:"Your page has all required and recommended meta tags."})]}):i(E,{children:[m.length>0&&i("div",{children:[i("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-destructive/80 mb-2 flex items-center gap-1.5",children:[t("span",{children:"Required"}),t("span",{class:"bg-destructive/10 border border-destructive/25 text-destructive px-1 font-bold",children:m.length})]}),t("div",{class:"space-y-2",children:m.map(d=>t(N,{def:d},d.key))})]}),u.length>0&&i("div",{children:[i("p",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-warning/80 mb-2 flex items-center gap-1.5",children:[t("span",{children:"Recommended"}),t("span",{class:"bg-warning/10 border border-warning/25 text-warning px-1 font-bold",children:u.length})]}),t("div",{class:"space-y-2",children:u.map(d=>t(N,{def:d},d.key))})]})]})})]})]})},"SeoApp"),qe={component:ye,icon:F,id:"dev-toolbar:seo",name:"SEO"};export{qe as default};

package/dist/apps/seo/seo-app.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource preact */
 import type { ComponentChildren } from "preact";
 import type { AppComponentProps } from "../../types/app.d.ts";
 declare const SeoApp: (_props: AppComponentProps) => ComponentChildren;

package/dist/apps/settings/index.js

@@ -1,4 +1,4 @@
-var k=Object.defineProperty;var f=(t,n)=>k(t,"name",{value:n,configurable:!0});import{addHookName as C}from"preact/devtools";import{useState as x,useRef as y,useEffect as w}from"preact/hooks";import{u as F,a as E,D as c}from"../../packem_shared/use-theme-CX1gG6Sv.js";import v from"../../packem_shared/Icon-DWFLZkwW.js";import u from"../../packem_shared/cn-DWLJYh3h.js";import{jsxs as l,jsx as e}from"preact/jsx-runtime";import p from"../../packem_shared/Button-DODNCTPZ.js";const S=`<!-- @license lucide-static v0.576.0 - ISC -->
+var k=Object.defineProperty;var f=(o,n)=>k(o,"name",{value:n,configurable:!0});import{addHookName as C}from"preact/devtools";import{clsx as h}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as D,useRef as y,useEffect as w}from"preact/hooks";import{h as E,r as c}from"../../packem_shared/use-frame-state-CxrlPUM5.js";import{_ as F}from"../../packem_shared/use-theme-zpm4zmqP.js";import v from"../../packem_shared/Icon-B6UHkC0o.js";import{jsxs as r,jsx as e}from"preact/jsx-runtime";import p from"../../packem_shared/Button-Bkx66Co7.js";const S=`<!-- @license lucide-static v0.577.0 - ISC -->
 <svg
   class="lucide lucide-settings"
   xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ var k=Object.defineProperty;var f=(t,n)=>k(t,"name",{value:n,configurable:!0});i
   <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
   <circle cx="12" cy="12" r="3" />
 </svg>
-`,T="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E",A="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E",K="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E";var M=Object.defineProperty,i=f((t,n)=>M(t,"name",{value:n,configurable:!0}),"o");const d=i(({control:t,description:n,label:o})=>l("div",{class:"flex items-center justify-between gap-6 py-3.5",children:[l("div",{class:"min-w-0",children:[e("div",{class:"text-[0.8125rem] font-medium text-foreground leading-none mb-0.5",children:o}),n&&e("div",{class:"text-[0.725rem] text-muted-foreground leading-snug mt-1",children:n})]}),e("div",{class:"shrink-0",children:t})]}),"SettingRow"),g=i(({children:t,title:n})=>l("section",{children:[l("h3",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2 px-1 flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"}),n]}),e("div",{class:"rounded-none border border-border bg-card divide-y divide-border overflow-hidden border-l-2 border-l-primary/20",children:e("div",{class:"px-4",children:t})})]}),"Section"),b=i(({checked:t,onChange:n})=>e("button",{"aria-checked":t,class:u("relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-none border-2 border-transparent","transition-colors duration-200 ease-in-out","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",t?"bg-primary":"bg-foreground/15"),onClick:i(()=>n(!t),"onClick"),role:"switch",type:"button",children:e("span",{class:u("pointer-events-none inline-block h-4 w-4 shadow-sm","transition-all duration-200 ease-in-out",t?"translate-x-4 bg-primary-foreground":"translate-x-0 bg-white")})}),"Toggle"),j=i(({onChange:t,value:n})=>{const o=[{icon:e(v,{size:13,src:K}),label:"Light",value:"light"},{icon:e(v,{size:13,src:A}),label:"Dark",value:"dark"},{icon:e(v,{size:13,src:T}),label:"System",value:"system"}];return e("div",{class:"flex items-center gap-0.5 bg-foreground/6 p-0.5",children:o.map(s=>l("button",{"aria-pressed":n===s.value,class:u("flex items-center gap-1.5 px-2.5 py-1.5 text-[0.75rem] font-medium","transition-all duration-150 cursor-pointer border-0",n===s.value?"bg-background text-foreground shadow-sm":"bg-transparent text-muted-foreground hover:text-foreground"),onClick:i(()=>t(s.value),"onClick"),type:"button",children:[s.icon,s.label]},s.value))})},"ThemeControl"),P=[{label:"Never",value:-1},{label:"Always",value:0},{label:"2s",value:2e3},{label:"5s",value:5e3},{label:"10s",value:1e4},{label:"30s",value:3e4}],z=i(({onChange:t,value:n})=>e("select",{class:u("bg-foreground/6 border border-border","text-[0.775rem] font-medium text-foreground","px-2.5 py-1.5 cursor-pointer","focus:outline-none focus:ring-1 focus:ring-ring","transition-colors duration-150"),onChange:i(o=>t(Number(o.target.value)),"onChange"),value:String(n),children:P.map(o=>e("option",{value:String(o.value),children:o.label},o.value))}),"HideDelayControl"),R=i(t=>t.split("+"),"formatBinding"),B=i(({part:t})=>e("span",{class:"inline-flex items-center px-1.5 py-0.5 text-[0.65rem] font-mono font-medium bg-foreground/8 border border-border text-foreground",children:t}),"KeyBadge"),D=i(({onChange:t,value:n})=>{const[o,s]=C(x(!1),"capturing"),m=C(y(null),"buttonRef");return w(()=>{if(!o)return;const r=i(a=>{if(a.preventDefault(),a.stopPropagation(),["Alt","Control","Meta","Shift"].includes(a.key))return;const h=[];a.altKey&&h.push("Alt"),a.ctrlKey&&h.push("Control"),a.metaKey&&h.push("Meta"),a.shiftKey&&h.push("Shift"),h.push(a.key),t(h.join("+")),s(!1)},"handleKeyDown");return globalThis.addEventListener("keydown",r,!0),()=>globalThis.removeEventListener("keydown",r,!0)},[o,t]),l("div",{class:"flex items-center gap-2",children:[e("div",{class:"flex items-center gap-0.5",children:R(n).map((r,a)=>l("span",{class:"flex items-center gap-0.5",children:[a>0&&e("span",{class:"text-muted-foreground/40 text-[0.6rem] mx-0.5",children:"+"}),e(B,{part:r})]},a))}),e(p,{class:u("text-[0.7rem]",o?"border-primary text-primary bg-primary/8 animate-pulse":""),onClick:i(()=>s(r=>!r),"onClick"),ref:m,size:"sm",variant:"outline",children:o?"Press keys…":"Record"}),e(p,{class:"text-[0.7rem]",onClick:i(()=>{s(!1)},"onClick"),size:"sm",title:"Cancel",variant:"ghost",children:"✕"})]})},"KeyCapture"),N=i(t=>{const{state:n,updateState:o}=F(),{setTheme:s,theme:m}=E();return l("div",{class:"p-5 space-y-5 max-w-2xl",children:[l(g,{title:"Appearance",children:[e(d,{control:e(j,{onChange:s,value:m}),description:"Color scheme for the DevTools panel.",label:"Theme"}),e(d,{control:e(b,{checked:n.reduceMotion,onChange:i(r=>o({reduceMotion:r}),"onChange")}),description:"Disable animations and transitions throughout the toolbar.",label:"Reduce motion"})]}),l(g,{title:"Toolbar",children:[e(d,{control:e(z,{onChange:i(r=>o({minimizePanelInactive:r}),"onChange"),value:n.minimizePanelInactive}),description:"Collapse the toolbar pill after a period of inactivity. Set 'Never' to always keep it visible.",label:"Auto-hide when inactive"}),e(d,{control:e(b,{checked:n.preferShowFloatingPanel,onChange:i(r=>o({preferShowFloatingPanel:r}),"onChange")}),description:"Keep the toolbar pill visible even when the DevTools panel is not open.",label:"Show toolbar when panel is closed"})]}),e(g,{title:"Panel",children:e(d,{control:e(b,{checked:n.closeOnOutsideClick,onChange:i(r=>o({closeOnOutsideClick:r}),"onChange")}),description:"Close the DevTools panel when clicking outside of it.",label:"Close on outside click"})}),l(g,{title:"Keyboard Shortcuts",children:[e(d,{control:l("div",{class:"flex items-center gap-2",children:[e(D,{onChange:i(r=>o({keybindings:{...n.keybindings??c,toggle:r}}),"onChange"),value:n.keybindings?.toggle??c.toggle}),n.keybindings?.toggle!==c.toggle&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:i(()=>o({keybindings:{...n.keybindings??c,toggle:c.toggle}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Open or close the DevTools panel.",label:"Toggle toolbar"}),e(d,{control:l("div",{class:"flex items-center gap-2",children:[e(D,{onChange:i(r=>o({keybindings:{...n.keybindings??c,close:r}}),"onChange"),value:n.keybindings?.close??c.close}),n.keybindings?.close!==c.close&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:i(()=>o({keybindings:{...n.keybindings??c,close:c.close}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Dismiss the active app or close the panel.",label:"Close panel"})]})]})},"SettingsApp"),q={component:N,defaultOpen:!0,icon:S,id:"dev-toolbar:settings",name:"Settings"};export{q as default};
+`,A="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E",T="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E",M="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E";var P=Object.defineProperty,t=f((o,n)=>P(o,"name",{value:n,configurable:!0}),"l");const d=t(({control:o,description:n,label:l})=>r("div",{class:"flex items-center justify-between gap-6 py-3.5",children:[r("div",{class:"min-w-0",children:[e("div",{class:"text-[0.8125rem] font-medium text-foreground leading-none mb-0.5",children:l}),n&&e("div",{class:"text-[0.725rem] text-muted-foreground leading-snug mt-1",children:n})]}),e("div",{class:"shrink-0",children:o})]}),"SettingRow"),g=t(({children:o,title:n})=>r("section",{children:[r("h3",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2 px-1 flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"}),n]}),e("div",{class:"rounded-none border border-border bg-card divide-y divide-border overflow-hidden border-l-2 border-l-primary/20",children:e("div",{class:"px-4",children:o})})]}),"Section"),b=t(({checked:o,onChange:n})=>e("button",{"aria-checked":o,class:h("relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-none border-2 border-transparent","transition-colors duration-200 ease-in-out","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",o?"bg-primary":"bg-foreground/15"),onClick:t(()=>n(!o),"onClick"),role:"switch",type:"button",children:e("span",{class:h("pointer-events-none inline-block h-4 w-4 shadow-sm","transition-all duration-200 ease-in-out",o?"translate-x-4 bg-primary-foreground":"translate-x-0 bg-white")})}),"Toggle"),O=t(({onChange:o,value:n})=>{const l=[{icon:e(v,{size:13,src:M}),label:"Light",value:"light"},{icon:e(v,{size:13,src:T}),label:"Dark",value:"dark"},{icon:e(v,{size:13,src:A}),label:"System",value:"system"}];return e("div",{class:"flex items-center gap-0.5 bg-foreground/6 p-0.5",children:l.map(a=>r("button",{"aria-pressed":n===a.value,class:h("flex items-center gap-1.5 px-2.5 py-1.5 text-[0.75rem] font-medium","transition-all duration-150 cursor-pointer border-0",n===a.value?"bg-background text-foreground shadow-sm":"bg-transparent text-muted-foreground hover:text-foreground"),onClick:t(()=>o(a.value),"onClick"),type:"button",children:[a.icon,a.label]},a.value))})},"ThemeControl"),R=[{label:"Never",value:-1},{label:"Always",value:0},{label:"2s",value:2e3},{label:"5s",value:5e3},{label:"10s",value:1e4},{label:"30s",value:3e4}],j=t(({onChange:o,value:n})=>e("select",{class:h("bg-foreground/6 border border-border","text-[0.775rem] font-medium text-foreground","px-2.5 py-1.5 cursor-pointer","focus:outline-none focus:ring-1 focus:ring-ring","transition-colors duration-150"),onChange:t(l=>o(Number(l.target.value)),"onChange"),value:String(n),children:R.map(l=>e("option",{value:String(l.value),children:l.label},l.value))}),"HideDelayControl"),K=[{label:"Auto-detected",value:""},{label:"AppCode",value:"appcode"},{label:"Android Studio",value:"android-studio"},{label:"Atom",value:"atom"},{label:"Atom Beta",value:"atom-beta"},{label:"Brackets",value:"brackets"},{label:"CLion",value:"clion"},{label:"Visual Studio Code",value:"code"},{label:"Visual Studio Code Insiders",value:"code-insiders"},{label:"VSCodium",value:"codium"},{label:"Cursor",value:"cursor"},{label:"GNU Emacs",value:"emacs"},{label:"GNU Emacs for Mac OS X",value:"emacsforosx"},{label:"IntelliJ IDEA",value:"intellij"},{label:"GNU nano",value:"nano"},{label:"NeoVim",value:"neovim"},{label:"Notepad++",value:"notepad++"},{label:"PhpStorm",value:"phpstorm"},{label:"PyCharm",value:"pycharm"},{label:"Rider",value:"rider"},{label:"RubyMine",value:"rubymine"},{label:"SublimeText",value:"sublime"},{label:"TextMate",value:"textmate"},{label:"Vim",value:"vim"},{label:"Visual Studio",value:"visualstudio"},{label:"WebStorm",value:"webstorm"},{label:"Xcode",value:"xcode"},{label:"Zed",value:"zed"}],N=t(({onChange:o,value:n})=>e("select",{class:h("bg-foreground/6 border border-border","text-[0.775rem] font-medium text-foreground","px-2.5 py-1.5 cursor-pointer","focus:outline-none focus:ring-1 focus:ring-ring","transition-colors duration-150"),onChange:t(l=>o(l.target.value),"onChange"),value:n,children:K.map(l=>e("option",{value:l.value,children:l.label},l.value))}),"EditorControl"),z=t(o=>o.split("+"),"formatBinding"),B=t(({part:o})=>e("span",{class:"inline-flex items-center px-1.5 py-0.5 text-[0.65rem] font-mono font-medium bg-foreground/8 border border-border text-foreground",children:o}),"KeyBadge"),x=t(({onChange:o,value:n})=>{const[l,a]=C(D(!1),"capturing"),m=C(y(null),"buttonRef");return w(()=>{if(!l)return;const i=t(s=>{if(s.preventDefault(),s.stopPropagation(),["Alt","Control","Meta","Shift"].includes(s.key))return;const u=[];s.altKey&&u.push("Alt"),s.ctrlKey&&u.push("Control"),s.metaKey&&u.push("Meta"),s.shiftKey&&u.push("Shift"),u.push(s.key),o(u.join("+")),a(!1)},"handleKeyDown");return globalThis.addEventListener("keydown",i,!0),()=>globalThis.removeEventListener("keydown",i,!0)},[l,o]),r("div",{class:"flex items-center gap-2",children:[e("div",{class:"flex items-center gap-0.5",children:z(n).map((i,s)=>r("span",{class:"flex items-center gap-0.5",children:[s>0&&e("span",{class:"text-muted-foreground/40 text-[0.6rem] mx-0.5",children:"+"}),e(B,{part:i})]},s))}),e(p,{class:h("text-[0.7rem]",l?"border-primary text-primary bg-primary/8 animate-pulse":""),onClick:t(()=>a(i=>!i),"onClick"),ref:m,size:"sm",variant:"outline",children:l?"Press keys…":"Record"}),e(p,{class:"text-[0.7rem]",onClick:t(()=>{a(!1)},"onClick"),size:"sm",title:"Cancel",variant:"ghost",children:"✕"})]})},"KeyCapture"),I=t(o=>{const{state:n,updateState:l}=E(),{setTheme:a,theme:m}=F();return r("div",{class:"p-5 space-y-5 max-w-2xl",children:[r(g,{title:"Appearance",children:[e(d,{control:e(O,{onChange:a,value:m}),description:"Color scheme for the DevTools panel.",label:"Theme"}),e(d,{control:e(b,{checked:n.reduceMotion,onChange:t(i=>l({reduceMotion:i}),"onChange")}),description:"Disable animations and transitions throughout the toolbar.",label:"Reduce motion"})]}),r(g,{title:"Toolbar",children:[e(d,{control:e(j,{onChange:t(i=>l({minimizePanelInactive:i}),"onChange"),value:n.minimizePanelInactive}),description:"Collapse the toolbar pill after a period of inactivity. Set 'Never' to always keep it visible.",label:"Auto-hide when inactive"}),e(d,{control:e(b,{checked:n.preferShowFloatingPanel,onChange:t(i=>l({preferShowFloatingPanel:i}),"onChange")}),description:"Keep the toolbar pill visible even when the DevTools panel is not open.",label:"Show toolbar when panel is closed"})]}),e(g,{title:"Panel",children:e(d,{control:e(b,{checked:n.closeOnOutsideClick,onChange:t(i=>l({closeOnOutsideClick:i}),"onChange")}),description:"Close the DevTools panel when clicking outside of it.",label:"Close on outside click"})}),e(g,{title:"Editor",children:e(d,{control:e(N,{onChange:t(i=>l({editor:i}),"onChange"),value:n.editor}),description:"Editor to open when clicking 'Open in editor'. Select Auto-detected to use the running IDE or EDITOR environment variable.",label:"Preferred editor"})}),r(g,{title:"Keyboard Shortcuts",children:[e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(x,{onChange:t(i=>l({keybindings:{...n.keybindings??c,toggle:i}}),"onChange"),value:n.keybindings?.toggle??c.toggle}),n.keybindings?.toggle!==c.toggle&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:t(()=>l({keybindings:{...n.keybindings??c,toggle:c.toggle}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Open or close the DevTools panel.",label:"Toggle toolbar"}),e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(x,{onChange:t(i=>l({keybindings:{...n.keybindings??c,close:i}}),"onChange"),value:n.keybindings?.close??c.close}),n.keybindings?.close!==c.close&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:t(()=>l({keybindings:{...n.keybindings??c,close:c.close}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Dismiss the active app or close the panel.",label:"Close panel"})]})]})},"SettingsApp"),Z={component:I,defaultOpen:!0,icon:S,id:"dev-toolbar:settings",name:"Settings"};export{Z as default};

package/dist/apps/tailwind/index.js

@@ -1,7 +1,7 @@
-var Y=Object.defineProperty;var q=(r,n)=>Y(r,"name",{value:n,configurable:!0});import{addHookName as y}from"preact/devtools";import{useState as k,useRef as Z,useMemo as E,useEffect as _}from"preact/hooks";import w from"../../packem_shared/cn-DWLJYh3h.js";import{jsxs as s,jsx as e,Fragment as K}from"preact/jsx-runtime";var Q=Object.defineProperty,d=q((r,n)=>Q(r,"name",{value:n,configurable:!0}),"d");const G=d((r,n)=>{for(const o of r)if(o instanceof CSSStyleRule){if(o.selectorText.split(",").some(l=>{const i=l.trim();return i===":root"||i==="html"}))for(let l=0;l<o.style.length;l++){const i=o.style[l];if(i.startsWith("--")&&!i.startsWith("--tw-")&&!i.startsWith("--brand-")){const p=o.style.getPropertyValue(i).trim();p&&n.set(i,p)}}}else"cssRules"in o&&o.cssRules instanceof CSSRuleList&&G(o.cssRules,n)},"collectVariablesFromRules"),U=d(()=>{const r=new Map;for(const n of document.styleSheets)try{G(n.cssRules,r)}catch{}return r},"scanRootVariables"),b=d(r=>r.endsWith("rem")?Number.parseFloat(r)*16:r.endsWith("px")?Number.parseFloat(r):r.endsWith("em")?Number.parseFloat(r)*16:0,"parseToPx"),ee=d(r=>{const n=[],o=[],l=[],i=[],p=[],f=[];for(const[a,h]of r)a.startsWith("--color-")?n.push({cssVar:a,name:a.slice(8),value:h}):a.startsWith("--spacing-")?o.push({cssVar:a,name:a.slice(10),numericPx:b(h),value:h}):a.startsWith("--text-")&&!a.includes("--line-height")&&!a.endsWith("--font-weight")?l.push({cssVar:a,name:a.slice(7),sizePx:b(h),value:h}):a.startsWith("--font-")?i.push({cssVar:a,name:a.slice(7),value:h}):a.startsWith("--radius-")?p.push({cssVar:a,name:a.slice(9),value:h}):(a.startsWith("--shadow-")||a.startsWith("--drop-shadow-"))&&f.push({cssVar:a,name:a.slice(2),value:h});return o.sort((a,h)=>a.numericPx-h.numericPx),l.sort((a,h)=>a.sizePx-h.sizePx),{colors:n,fontFamilies:i,fontSizes:l,radii:p,shadows:f,spacing:o}},"extractTokens"),$=d(r=>/^\w+-\d+$/.test(r),"isNumericScale"),te=d(r=>{const n=[],o=new Map;for(const l of r)if($(l.name)){const i=l.name.replace(/-\d+$/,""),p=o.get(i)??[];p.push(l),o.set(i,p)}else n.push(l);for(const l of o.values())l.sort((i,p)=>{const f=Number.parseInt(i.name.match(/-(\d+)$/)?.[1]??"0",10),a=Number.parseInt(p.name.match(/-(\d+)$/)?.[1]??"0",10);return f-a});return{scales:o,semantic:n}},"groupColors"),j=d(()=>{const[r,n]=y(k(!1),"copied"),o=y(Z(null),"timer");return{copied:r,copy:d(l=>{navigator.clipboard.writeText(l).catch(()=>{}),n(!0),o.current&&clearTimeout(o.current),o.current=setTimeout(n,1500,!1)},"copy")}},"useCopy"),T=d(({count:r,title:n})=>s("div",{class:"flex items-center gap-2 px-3 py-1.5 bg-foreground/3 border-b border-border/40",children:[s("span",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/70",children:[e("span",{class:"text-primary/50",children:"// "}),n]}),r!==void 0&&r>0&&e("span",{class:"ml-auto text-[0.58rem] font-mono text-muted-foreground/50",children:r})]}),"SectionTitle"),re=d(({token:r})=>{const{copied:n,copy:o}=j();return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:d(()=>o(r.cssVar),"onClick"),title:`Click to copy ${r.cssVar}`,type:"button",children:[e("span",{class:"shrink-0 size-5 border border-black/10 dark:border-white/10",style:{background:`var(${r.cssVar})`}}),s("span",{class:"flex-1 min-w-0",children:[e("span",{class:"block text-[0.68rem] font-mono text-foreground truncate",children:r.name}),e("span",{class:"block text-[0.6rem] font-mono text-muted-foreground/60 truncate",children:r.value})]}),e("span",{class:w("text-[0.6rem] font-mono shrink-0 transition-opacity",n?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:n?"copied!":"copy"})]})},"ColorItem"),oe=d(({name:r,tokens:n})=>{const{copied:o,copy:l}=j();return s("div",{class:"px-3 py-2",children:[s("div",{class:"flex items-center gap-2 mb-1.5",children:[e("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 w-16 shrink-0",children:r}),e("div",{class:"flex flex-1 gap-px overflow-hidden",children:n.map(i=>e("button",{class:"flex-1 h-5 border-0 cursor-pointer transition-transform hover:scale-110 hover:z-10",onClick:d(()=>l(i.cssVar),"onClick"),style:{background:`var(${i.cssVar})`,minWidth:0},title:`${i.name}
-${i.value}
-Click to copy ${i.cssVar}`,type:"button"},i.cssVar))})]}),o&&e("span",{class:"text-[0.6rem] font-mono text-primary/70 pl-[72px]",children:"copied!"})]})},"ColorScaleRow"),ne=d(({colors:r})=>{const{scales:n,semantic:o}=y(E(()=>te(r),[r]),"scales");return r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"◫"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No color tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Color tokens are read from ",e("code",{class:"font-mono",children:"--color-*"})," CSS variables on ",e("code",{class:"font-mono",children:":root"})]})]}):s("div",{children:[o.length>0&&s("div",{class:"border-b border-border/40",children:[e(T,{count:o.length,title:"Semantic"}),e("div",{class:"py-1",children:o.map(l=>e(re,{token:l},l.cssVar))})]}),n.size>0&&s("div",{children:[e(T,{count:n.size,title:"Palette"}),e("div",{class:"py-1 divide-y divide-border/20",children:Array.from(n.entries(),([l,i])=>e(oe,{name:l,tokens:i},l))})]})]})},"ColorsTab"),se=d(({spacing:r})=>{const n=y(E(()=>Math.max(...r.map(o=>o.numericPx),1),[r]),"maxPx");return r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"↔"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No spacing tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Spacing tokens are read from ",e("code",{class:"font-mono",children:"--spacing-*"})," CSS variables"]})]}):e("div",{class:"p-3 space-y-1",children:r.map(o=>{const l=n>0?Math.max(o.numericPx/n*100,2):2;return s("div",{class:"flex items-center gap-2.5",children:[e("span",{class:"text-[0.62rem] font-mono text-muted-foreground/70 w-8 shrink-0 text-right",children:o.name}),e("div",{class:"flex-1 flex items-center gap-1.5",children:e("div",{class:"flex-1 h-3.5 bg-foreground/5 border border-border/30 overflow-hidden",children:e("div",{class:"h-full bg-primary/30 border-r border-primary/40",style:{width:`${l}%`}})})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 w-14 text-right shrink-0",children:o.value})]},o.cssVar)})})},"SpacingTab"),le=d(({fontFamilies:r,fontSizes:n})=>n.length===0&&r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"Aa"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No typography tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Font size tokens are read from ",e("code",{class:"font-mono",children:"--text-*"})," and font family tokens from ",e("code",{class:"font-mono",children:"--font-*"})]})]}):s("div",{children:[n.length>0&&s("div",{class:"border-b border-border/40",children:[e(T,{count:n.length,title:"Font Sizes"}),e("div",{class:"p-3 space-y-1.5",children:n.map(o=>{const l=Math.min(o.sizePx||14,48);return s("div",{class:"flex items-center gap-3",children:[e("span",{class:"text-[0.6rem] font-mono text-muted-foreground/60 w-10 shrink-0 text-right",children:o.name}),e("span",{class:"text-foreground leading-none truncate flex-1",style:{fontSize:`${l}px`},children:"Ag"}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 shrink-0",children:o.value})]},o.cssVar)})})]}),r.length>0&&s("div",{children:[e(T,{count:r.length,title:"Font Families"}),e("div",{class:"p-3 space-y-2",children:r.map(o=>s("div",{class:"space-y-0.5",children:[e("div",{class:"flex items-center justify-between gap-2",children:e("code",{class:"text-[0.68rem] font-mono text-foreground",children:o.name})}),e("p",{class:"text-[0.75rem] text-foreground/70 truncate",style:{fontFamily:`var(${o.cssVar})`},children:"The quick brown fox"}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:o.value})]},o.cssVar))})]})]}),"TypographyTab"),ce=d(({radii:r,shadows:n})=>r.length===0&&n.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"◻"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No effect tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Radius tokens from ",e("code",{class:"font-mono",children:"--radius-*"})," and shadow tokens from ",e("code",{class:"font-mono",children:"--shadow-*"})]})]}):s("div",{children:[r.length>0&&s("div",{class:"border-b border-border/40",children:[e(T,{count:r.length,title:"Border Radius"}),e("div",{class:"p-3 flex flex-wrap gap-3",children:r.map(o=>s("div",{class:"flex flex-col items-center gap-1.5",children:[e("div",{class:"size-10 border-2 border-primary/40 bg-primary/8",style:{borderRadius:`var(${o.cssVar})`}}),e("code",{class:"text-[0.6rem] font-mono text-muted-foreground/70",children:o.name}),e("code",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:o.value})]},o.cssVar))})]}),n.length>0&&s("div",{children:[e(T,{count:n.length,title:"Shadows"}),e("div",{class:"p-3 space-y-3",children:n.map(o=>s("div",{class:"space-y-1.5",children:[e("div",{class:"flex items-center justify-between gap-2",children:e("code",{class:"text-[0.68rem] font-mono text-foreground",children:o.name})}),e("div",{class:"h-10 bg-card border border-border/40",style:{boxShadow:`var(${o.cssVar})`}}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:o.value})]},o.cssVar))})]})]}),"EffectsTab"),ie=d(({name:r,tokens:n})=>{const{copied:o,copy:l}=j();return s("div",{class:"px-3 py-2",children:[s("div",{class:"flex items-center gap-2 mb-1",children:[e("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 w-16 shrink-0",children:r}),e("div",{class:"flex flex-1 gap-px overflow-hidden",children:n.map(([i,p])=>e("button",{class:"flex-1 h-5 border-0 cursor-pointer transition-transform hover:scale-110 hover:z-10",onClick:d(()=>l(i),"onClick"),style:{background:p},title:`${i}
-${p}
-Click to copy`,type:"button"},i))})]}),o&&e("span",{class:"text-[0.6rem] font-mono text-primary/70 pl-[72px]",children:"copied!"})]})},"ConfigColorScaleRow"),H=d(({cssVar:r,isCustom:n,value:o})=>{const{copied:l,copy:i}=j(),p=r.slice(8);return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:d(()=>i(r),"onClick"),title:`Click to copy ${r}`,type:"button",children:[e("span",{class:"shrink-0 size-5 border border-black/10",style:{background:o}}),s("span",{class:"flex-1 min-w-0",children:[s("span",{class:"flex items-center gap-1.5",children:[e("span",{class:"text-[0.68rem] font-mono text-foreground truncate",children:p}),n&&e("span",{class:"text-[0.55rem] font-bold uppercase tracking-wide text-primary/70 bg-primary/10 px-1",children:"custom"})]}),e("span",{class:"block text-[0.6rem] font-mono text-muted-foreground/60 truncate",children:o})]}),e("span",{class:w("text-[0.6rem] font-mono shrink-0 transition-opacity",l?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:l?"copied!":"copy"})]})},"ConfigSemanticColorItem"),g=d(({children:r,count:n,defaultOpen:o=!0,title:l})=>{const[i,p]=y(k(o),"open");return s("div",{class:"border-b border-border/40",children:[s("button",{class:"w-full flex items-center gap-2 px-3 py-1.5 bg-foreground/3 hover:bg-foreground/5 transition-colors cursor-pointer border-0 text-left",onClick:d(()=>p(f=>!f),"onClick"),type:"button",children:[s("span",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/70 flex-1",children:[e("span",{class:"text-primary/50",children:"// "}),l]}),e("span",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:n}),e("span",{class:w("text-muted-foreground/40 text-[0.6rem] transition-transform duration-150 ml-1",i&&"rotate-90"),children:"▶"})]}),i&&r]})},"ConfigSection"),W=d(({cssVar:r,isCustom:n,value:o})=>{const{copied:l,copy:i}=j(),p=r.replace(/^--/,"");return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:d(()=>i(r),"onClick"),type:"button",children:[e("span",{class:"flex-1 min-w-0",children:s("span",{class:"flex items-center gap-1.5",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground truncate",children:p}),n&&e("span",{class:"text-[0.55rem] font-bold uppercase tracking-wide text-primary/70 bg-primary/10 px-1 shrink-0",children:"custom"})]})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 truncate max-w-[160px] shrink-0",children:o}),e("span",{class:w("text-[0.6rem] font-mono shrink-0 transition-opacity w-8 text-right",l?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:l?"✓":"copy"})]})},"ConfigTokenRow"),ae=d(({configData:r,error:n,loading:o,onRetry:l})=>{const[i,p]=y(k(""),"colorSearch");if(o)return s("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[e("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(t=>e("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${t}ms`}},t))}),e("span",{class:"text-[0.75rem] text-muted-foreground",children:"Loading Tailwind config…"})]});if(n||!r)return s("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[e("p",{class:"text-[0.8rem] text-destructive",children:n??"No config available"}),e("button",{class:"px-3 py-1.5 text-[0.75rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent",onClick:l,type:"button",children:"Retry"})]});const{cssFiles:f,customTheme:a,defaultTheme:h,version:u}=r,x={...h,...a},C=Object.entries(x).filter(([t])=>t.startsWith("--color-")),S=C.filter(([t])=>!$(t.slice(8))),F=C.filter(([t])=>$(t.slice(8))),m=new Map;for(const[t,c]of F){const v=t.slice(8).replace(/-\d+$/,""),V=m.get(v)??[];V.push([t,c]),m.set(v,V)}for(const t of m.values())t.sort((c,v)=>{const V=Number.parseInt(c[0].match(/-(\d+)$/)?.[1]??"0",10),X=Number.parseInt(v[0].match(/-(\d+)$/)?.[1]??"0",10);return V-X});const O=i?[...m.entries()].filter(([t])=>t.toLowerCase().includes(i.toLowerCase())):[...m.entries()],z=Object.entries(x).filter(([t])=>t.startsWith("--spacing-")).sort(([,t],[,c])=>b(t)-b(c)),R=Object.entries(x).filter(([t])=>t.startsWith("--font-")),N=Object.entries(x).filter(([t])=>t.startsWith("--text-")&&!t.includes("--line-height")&&!t.endsWith("--font-weight")).sort(([,t],[,c])=>b(t)-b(c)),P=Object.entries(x).filter(([t])=>t.startsWith("--breakpoint-")).sort(([,t],[,c])=>b(t)-b(c)),M=Object.entries(x).filter(([t])=>t.startsWith("--radius-")),D=Object.entries(x).filter(([t])=>t.startsWith("--shadow-")||t.startsWith("--drop-shadow-")),I=Object.entries(x).filter(([t])=>t.startsWith("--blur-")),A=Object.entries(x).filter(([t])=>t.startsWith("--animate-")),J=["--color-","--spacing-","--font-","--text-","--breakpoint-","--radius-","--shadow-","--drop-shadow-","--blur-","--animate-","--tw-","--brand-"],B=Object.entries(x).filter(([t])=>!J.some(c=>t.startsWith(c))),L=z.reduce((t,[,c])=>Math.max(t,b(c)),1);return s("div",{children:[s("div",{class:"flex items-center gap-2 px-3 py-2 border-b border-border/40 bg-foreground/2 shrink-0",children:[e("span",{class:w("text-[0.6rem] font-bold uppercase tracking-wide px-1.5 py-0.5 shrink-0",u==="v4"?"bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20":u==="v3"?"bg-primary/10 text-primary border border-primary/20":"bg-foreground/8 text-muted-foreground border border-border"),children:u==="unknown"?"Tailwind":`Tailwind ${u}`}),f.length>0&&s("code",{class:"text-[0.62rem] font-mono text-muted-foreground/70 truncate flex-1",children:[f[0],f.length>1&&s("span",{class:"text-muted-foreground/40",children:[" +",f.length-1]})]}),s("span",{class:"text-[0.6rem] font-mono text-muted-foreground/50 shrink-0",children:[Object.keys(x).length," tokens"]})]}),Object.keys(a).length>0&&e(g,{count:Object.keys(a).length,title:"Custom Overrides",children:e("div",{class:"py-1",children:Object.entries(a).map(([t,c])=>t.startsWith("--color-")&&!$(t.slice(8))?e(H,{cssVar:t,isCustom:!0,value:c},t):e(W,{cssVar:t,isCustom:!0,value:c},t))})}),S.length>0&&e(g,{count:S.length,title:"Semantic Colors",children:e("div",{class:"py-1",children:S.map(([t,c])=>e(H,{cssVar:t,isCustom:t in a,value:c},t))})}),m.size>0&&s(g,{count:m.size,defaultOpen:!1,title:"Color Palette",children:[e("div",{class:"px-3 pt-2 pb-1 border-b border-border/20",children:e("input",{class:"w-full bg-foreground/4 border border-border/40 px-2 py-1 text-[0.68rem] font-mono text-foreground placeholder:text-muted-foreground/40 outline-none focus:border-primary/40",onInput:d(t=>p(t.target.value),"onInput"),placeholder:"Filter scales…",type:"text",value:i})}),s("div",{class:"py-1 divide-y divide-border/20",children:[O.map(([t,c])=>e(ie,{name:t,tokens:c},t)),O.length===0&&e("p",{class:"text-center text-[0.7rem] text-muted-foreground/50 py-4",children:"No colors match"})]})]}),z.length>0&&e(g,{count:z.length,defaultOpen:!1,title:"Spacing",children:e("div",{class:"p-3 space-y-1",children:z.map(([t,c])=>{const v=b(c),V=L>0?Math.max(v/L*100,1):1;return s("div",{class:"flex items-center gap-2.5",children:[e("span",{class:"text-[0.62rem] font-mono text-muted-foreground/70 w-10 shrink-0 text-right",children:t.slice(10)}),e("div",{class:"flex-1 h-3 bg-foreground/5 border border-border/30 overflow-hidden",children:e("div",{class:"h-full bg-primary/30 border-r border-primary/40",style:{width:`${V}%`}})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 w-14 text-right shrink-0",children:c})]},t)})})}),P.length>0&&e(g,{count:P.length,defaultOpen:!1,title:"Breakpoints",children:e("div",{class:"p-3 space-y-1.5",children:P.map(([t,c])=>e(W,{cssVar:t,isCustom:t in a,value:c},t))})}),R.length>0&&e(g,{count:R.length,defaultOpen:!1,title:"Font Families",children:e("div",{class:"p-3 space-y-2",children:R.map(([t,c])=>s("div",{class:"space-y-0.5",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground",children:t.slice(7)}),e("p",{class:"text-[0.75rem] text-foreground/70 truncate",style:{fontFamily:c.startsWith("--theme(")?"inherit":c},children:"The quick brown fox"}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:c})]},t))})}),N.length>0&&e(g,{count:N.length,defaultOpen:!1,title:"Font Sizes",children:e("div",{class:"p-3 space-y-1.5",children:N.map(([t,c])=>{const v=Math.min(b(c)||14,48);return s("div",{class:"flex items-center gap-3",children:[e("span",{class:"text-[0.6rem] font-mono text-muted-foreground/60 w-12 shrink-0 text-right",children:t.slice(7)}),e("span",{class:"text-foreground leading-none truncate flex-1",style:{fontSize:`${v}px`},children:"Ag"}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 shrink-0",children:c})]},t)})})}),M.length>0&&e(g,{count:M.length,defaultOpen:!1,title:"Border Radius",children:e("div",{class:"p-3 flex flex-wrap gap-3",children:M.map(([t,c])=>s("div",{class:"flex flex-col items-center gap-1.5",children:[e("div",{class:"size-10 border-2 border-primary/40 bg-primary/8",style:{borderRadius:c.startsWith("--theme(")?"4px":c}}),e("code",{class:"text-[0.6rem] font-mono text-muted-foreground/70",children:t.slice(9)}),e("code",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:c})]},t))})}),D.length>0&&e(g,{count:D.length,defaultOpen:!1,title:"Shadows",children:e("div",{class:"p-3 space-y-3",children:D.map(([t,c])=>s("div",{class:"space-y-1",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground",children:t.slice(2)}),!c.startsWith("--theme(")&&e("div",{class:"h-8 bg-card border border-border/40",style:{boxShadow:c}}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:c})]},t))})}),I.length>0&&e(g,{count:I.length,defaultOpen:!1,title:"Blur",children:e("div",{class:"py-1",children:I.map(([t,c])=>e(W,{cssVar:t,isCustom:t in a,value:c},t))})}),A.length>0&&e(g,{count:A.length,defaultOpen:!1,title:"Animations",children:e("div",{class:"py-1",children:A.map(([t,c])=>e(W,{cssVar:t,isCustom:t in a,value:c},t))})}),B.length>0&&e(g,{count:B.length,defaultOpen:!1,title:"Other",children:e("div",{class:"py-1",children:B.map(([t,c])=>e(W,{cssVar:t,isCustom:t in a,value:c},t))})})]})},"ConfigTab"),de=d(()=>s("div",{class:"flex flex-col items-center justify-center h-full gap-4 py-16 px-8 text-center select-none",children:[e("div",{class:"size-12 border border-primary/20 bg-primary/5 flex items-center justify-center text-primary/30 text-2xl",children:"◻"}),s("div",{class:"space-y-1.5",children:[e("p",{class:"text-[0.8rem] font-medium text-foreground/70",children:"No design tokens detected"}),s("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed max-w-[240px]",children:["This app reads CSS custom properties from your page's ",e("code",{class:"font-mono text-[0.65rem]",children:":root"})," selector. Make sure your app uses Tailwind CSS v4 or defines custom properties."]})]})]}),"EmptyState"),pe=d(({helpers:r})=>{const[n,o]=y(k("colors"),"tab"),[l,i]=y(k(null),"configData"),[p,f]=y(k(!1),"configLoading"),[a,h]=y(k(null),"configError"),u=y(E(()=>{const m=U();return ee(m)},[]),"tokens"),x=d(()=>{f(!0),h(null),r.rpc.getTailwindConfig().then(m=>{i(m),f(!1)}).catch(m=>{h(m.message??"Failed to load Tailwind config"),f(!1)})},"loadConfig");_(()=>{n==="config"&&!l&&!p&&!a&&x()},[n]);const C=u.colors.length+u.spacing.length+u.fontSizes.length+u.radii.length,S={colors:u.colors.length,config:l?Object.keys(l.defaultTheme).length+Object.keys(l.customTheme).length:0,effects:u.radii.length+u.shadows.length,spacing:u.spacing.length,type:u.fontSizes.length+u.fontFamilies.length},F=[{id:"colors",label:"Colors"},{id:"spacing",label:"Spacing"},{id:"type",label:"Type"},{id:"effects",label:"Effects"},{id:"config",label:"Config"}];return s("div",{class:"flex flex-col h-full",children:[s("div",{class:"flex items-center justify-between gap-3 px-4 py-3 border-b border-border shrink-0",children:[e("span",{class:"text-[0.75rem] font-medium text-foreground",children:"Design Tokens"}),C>0&&s("span",{class:"text-[0.65rem] font-mono text-muted-foreground/60 bg-foreground/5 px-2 py-0.5 border border-border/40",children:[C," page tokens"]})]}),C===0&&n!=="config"?e(de,{}):s(K,{children:[e("div",{class:"flex border-b border-border shrink-0 overflow-x-auto",children:F.map(({id:m,label:O})=>s("button",{class:w("flex-shrink-0 px-3 py-2 text-[0.68rem] font-medium transition-colors cursor-pointer border-0 border-b-2 -mb-px",n===m?"text-primary border-primary bg-primary/4":"text-muted-foreground hover:text-foreground border-transparent bg-transparent"),onClick:d(()=>o(m),"onClick"),type:"button",children:[O,S[m]>0&&e("span",{class:w("ml-1.5 text-[0.58rem] font-mono",n===m?"text-primary/70":"text-muted-foreground/50"),children:S[m]})]},m))}),s("div",{class:"flex-1 overflow-auto devtools-content-scroll",children:[n==="colors"&&e(ne,{colors:u.colors}),n==="spacing"&&e(se,{spacing:u.spacing}),n==="type"&&e(le,{fontFamilies:u.fontFamilies,fontSizes:u.fontSizes}),n==="effects"&&e(ce,{radii:u.radii,shadows:u.shadows}),n==="config"&&e(ae,{configData:l,error:a,loading:p,onRetry:x})]})]})]})},"TailwindApp"),ue=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
+var Y=Object.defineProperty;var q=(r,n)=>Y(r,"name",{value:n,configurable:!0});import{addHookName as b}from"preact/devtools";import{clsx as S}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as C,useRef as G,useMemo as J,useEffect as Z}from"preact/hooks";import{jsxs as s,jsx as e,Fragment as ee}from"preact/jsx-runtime";var te=Object.defineProperty,p=q((r,n)=>te(r,"name",{value:n,configurable:!0}),"p$1");const re=/^\w+-\d+$/,K=/-\d+$/,N=/-(\d+)$/,oe=/^--/,ne=p(r=>r.split(",").some(n=>{const o=n.trim();return o===":root"||o==="html"}),"isRootSelector"),se=p((r,n)=>{for(let o=0;o<r.length;o+=1){const l=r[o];if(l.startsWith("--")&&!l.startsWith("--tw-")&&!l.startsWith("--brand-")){const a=r.getPropertyValue(l).trim();a&&n.set(l,a)}}},"collectRootStyleVariables"),Q=p((r,n)=>{for(const o of r)o instanceof CSSStyleRule?ne(o.selectorText)&&se(o.style,n):"cssRules"in o&&o.cssRules instanceof CSSRuleList&&Q(o.cssRules,n)},"collectVariablesFromRules"),le=p(()=>{const r=new Map;for(const n of document.styleSheets)try{Q(n.cssRules,r)}catch{}return r},"scanRootVariables"),g=p(r=>r.endsWith("rem")?Number.parseFloat(r)*16:r.endsWith("px")?Number.parseFloat(r):r.endsWith("em")?Number.parseFloat(r)*16:0,"parseToPx"),ce=p(r=>{const n=[],o=[],l=[],a=[],m=[],h=[];for(const[d,i]of r)d.startsWith("--color-")?n.push({cssVar:d,name:d.slice(8),value:i}):d.startsWith("--spacing-")?o.push({cssVar:d,name:d.slice(10),numericPx:g(i),value:i}):d.startsWith("--text-")&&!d.includes("--line-height")&&!d.endsWith("--font-weight")?l.push({cssVar:d,name:d.slice(7),sizePx:g(i),value:i}):d.startsWith("--font-")?a.push({cssVar:d,name:d.slice(7),value:i}):d.startsWith("--radius-")?m.push({cssVar:d,name:d.slice(9),value:i}):(d.startsWith("--shadow-")||d.startsWith("--drop-shadow-"))&&h.push({cssVar:d,name:d.slice(2),value:i});const u=o.toSorted((d,i)=>d.numericPx-i.numericPx),v=l.toSorted((d,i)=>d.sizePx-i.sizePx);return{colors:n,fontFamilies:a,fontSizes:v,radii:m,shadows:h,spacing:u}},"extractTokens"),$=p(r=>re.test(r),"isNumericScale"),ie=p(r=>{const n=[],o=new Map;for(const l of r)if($(l.name)){const a=l.name.replace(K,""),m=o.get(a)??[];m.push(l),o.set(a,m)}else n.push(l);for(const[l,a]of o)o.set(l,a.toSorted((m,h)=>{const u=Number.parseInt(m.name.match(N)?.[1]??"0",10),v=Number.parseInt(h.name.match(N)?.[1]??"0",10);return u-v}));return{scales:o,semantic:n}},"groupColors"),O=p(()=>{const[r,n]=b(C(!1),"copied"),o=b(G(null),"timer");return{copied:r,copy:p(l=>{navigator.clipboard.writeText(l).catch(()=>{}),n(!0),o.current&&clearTimeout(o.current),o.current=setTimeout(n,1500,!1)},"copy")}},"useCopy"),W=p(({count:r,title:n})=>s("div",{class:"flex items-center gap-2 px-3 py-1.5 bg-foreground/3 border-b border-border/40",children:[s("span",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/70",children:[e("span",{class:"text-primary/50",children:"// "}),n]}),r!==void 0&&r>0&&e("span",{class:"ml-auto text-[0.58rem] font-mono text-muted-foreground/50",children:r})]}),"SectionTitle"),ae=p(({token:r})=>{const{copied:n,copy:o}=O();return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:p(()=>o(r.cssVar),"onClick"),title:`Click to copy ${r.cssVar}`,type:"button",children:[e("span",{class:"shrink-0 size-5 border border-black/10 dark:border-white/10",style:{background:`var(${r.cssVar})`}}),s("span",{class:"flex-1 min-w-0",children:[e("span",{class:"block text-[0.68rem] font-mono text-foreground truncate",children:r.name}),e("span",{class:"block text-[0.6rem] font-mono text-muted-foreground/60 truncate",children:r.value})]}),e("span",{class:S("text-[0.6rem] font-mono shrink-0 transition-opacity",n?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:n?"copied!":"copy"})]})},"ColorItem"),de=p(({name:r,tokens:n})=>{const{copied:o,copy:l}=O();return s("div",{class:"px-3 py-2",children:[s("div",{class:"flex items-center gap-2 mb-1.5",children:[e("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 w-16 shrink-0",children:r}),e("div",{class:"flex flex-1 gap-px overflow-hidden",children:n.map(a=>e("button",{class:"flex-1 h-5 border-0 cursor-pointer transition-transform hover:scale-110 hover:z-10",onClick:p(()=>l(a.cssVar),"onClick"),style:{background:`var(${a.cssVar})`,minWidth:0},title:`${a.name}
+${a.value}
+Click to copy ${a.cssVar}`,type:"button"},a.cssVar))})]}),o&&e("span",{class:"text-[0.6rem] font-mono text-primary/70 pl-[72px]",children:"copied!"})]})},"ColorScaleRow"),pe=p(({colors:r})=>{const{scales:n,semantic:o}=b(J(()=>ie(r),[r]),"scales");return r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"◫"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No color tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Color tokens are read from ",e("code",{class:"font-mono",children:"--color-*"})," CSS variables on ",e("code",{class:"font-mono",children:":root"})]})]}):s("div",{children:[o.length>0&&s("div",{class:"border-b border-border/40",children:[e(W,{count:o.length,title:"Semantic"}),e("div",{class:"py-1",children:o.map(l=>e(ae,{token:l},l.cssVar))})]}),n.size>0&&s("div",{children:[e(W,{count:n.size,title:"Palette"}),e("div",{class:"py-1 divide-y divide-border/20",children:Array.from(n.entries(),([l,a])=>e(de,{name:l,tokens:a},l))})]})]})},"ColorsTab"),me=p(({spacing:r})=>{const n=b(J(()=>Math.max(...r.map(o=>o.numericPx),1),[r]),"maxPx");return r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"↔"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No spacing tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Spacing tokens are read from ",e("code",{class:"font-mono",children:"--spacing-*"})," CSS variables"]})]}):e("div",{class:"p-3 space-y-1",children:r.map(o=>{const l=n>0?Math.max(o.numericPx/n*100,2):2;return s("div",{class:"flex items-center gap-2.5",children:[e("span",{class:"text-[0.62rem] font-mono text-muted-foreground/70 w-8 shrink-0 text-right",children:o.name}),e("div",{class:"flex-1 flex items-center gap-1.5",children:e("div",{class:"flex-1 h-3.5 bg-foreground/5 border border-border/30 overflow-hidden",children:e("div",{class:"h-full bg-primary/30 border-r border-primary/40",style:{width:`${l}%`}})})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 w-14 text-right shrink-0",children:o.value})]},o.cssVar)})})},"SpacingTab"),ue=p(({fontFamilies:r,fontSizes:n})=>n.length===0&&r.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"Aa"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No typography tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Font size tokens are read from ",e("code",{class:"font-mono",children:"--text-*"})," and font family tokens from ",e("code",{class:"font-mono",children:"--font-*"})]})]}):s("div",{children:[n.length>0&&s("div",{class:"border-b border-border/40",children:[e(W,{count:n.length,title:"Font Sizes"}),e("div",{class:"p-3 space-y-1.5",children:n.map(o=>{const l=Math.min(o.sizePx||14,48);return s("div",{class:"flex items-center gap-3",children:[e("span",{class:"text-[0.6rem] font-mono text-muted-foreground/60 w-10 shrink-0 text-right",children:o.name}),e("span",{class:"text-foreground leading-none truncate flex-1",style:{fontSize:`${l}px`},children:"Ag"}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 shrink-0",children:o.value})]},o.cssVar)})})]}),r.length>0&&s("div",{children:[e(W,{count:r.length,title:"Font Families"}),e("div",{class:"p-3 space-y-2",children:r.map(o=>s("div",{class:"space-y-0.5",children:[e("div",{class:"flex items-center justify-between gap-2",children:e("code",{class:"text-[0.68rem] font-mono text-foreground",children:o.name})}),e("p",{class:"text-[0.75rem] text-foreground/70 truncate",style:{fontFamily:`var(${o.cssVar})`},children:"The quick brown fox"}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:o.value})]},o.cssVar))})]})]}),"TypographyTab"),fe=p(({radii:r,shadows:n})=>r.length===0&&n.length===0?s("div",{class:"flex flex-col items-center justify-center py-16 gap-3 text-center px-6",children:[e("span",{class:"text-3xl text-muted-foreground/20",children:"◻"}),e("p",{class:"text-[0.75rem] text-muted-foreground/60",children:"No effect tokens found"}),s("p",{class:"text-[0.65rem] text-muted-foreground/40 leading-relaxed",children:["Radius tokens from ",e("code",{class:"font-mono",children:"--radius-*"})," and shadow tokens from ",e("code",{class:"font-mono",children:"--shadow-*"})]})]}):s("div",{children:[r.length>0&&s("div",{class:"border-b border-border/40",children:[e(W,{count:r.length,title:"Border Radius"}),e("div",{class:"p-3 flex flex-wrap gap-3",children:r.map(o=>s("div",{class:"flex flex-col items-center gap-1.5",children:[e("div",{class:"size-10 border-2 border-primary/40 bg-primary/8",style:{borderRadius:`var(${o.cssVar})`}}),e("code",{class:"text-[0.6rem] font-mono text-muted-foreground/70",children:o.name}),e("code",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:o.value})]},o.cssVar))})]}),n.length>0&&s("div",{children:[e(W,{count:n.length,title:"Shadows"}),e("div",{class:"p-3 space-y-3",children:n.map(o=>s("div",{class:"space-y-1.5",children:[e("div",{class:"flex items-center justify-between gap-2",children:e("code",{class:"text-[0.68rem] font-mono text-foreground",children:o.name})}),e("div",{class:"h-10 bg-card border border-border/40",style:{boxShadow:`var(${o.cssVar})`}}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:o.value})]},o.cssVar))})]})]}),"EffectsTab"),he=p(({name:r,tokens:n})=>{const{copied:o,copy:l}=O();return s("div",{class:"px-3 py-2",children:[s("div",{class:"flex items-center gap-2 mb-1",children:[e("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 w-16 shrink-0",children:r}),e("div",{class:"flex flex-1 gap-px overflow-hidden",children:n.map(([a,m])=>e("button",{class:"flex-1 h-5 border-0 cursor-pointer transition-transform hover:scale-110 hover:z-10",onClick:p(()=>l(a),"onClick"),style:{background:m},title:`${a}
+${m}
+Click to copy`,type:"button"},a))})]}),o&&e("span",{class:"text-[0.6rem] font-mono text-primary/70 pl-[72px]",children:"copied!"})]})},"ConfigColorScaleRow"),H=p(({cssVar:r,isCustom:n,value:o})=>{const{copied:l,copy:a}=O(),m=r.slice(8);return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:p(()=>a(r),"onClick"),title:`Click to copy ${r}`,type:"button",children:[e("span",{class:"shrink-0 size-5 border border-black/10",style:{background:o}}),s("span",{class:"flex-1 min-w-0",children:[s("span",{class:"flex items-center gap-1.5",children:[e("span",{class:"text-[0.68rem] font-mono text-foreground truncate",children:m}),n&&e("span",{class:"text-[0.55rem] font-bold uppercase tracking-wide text-primary/70 bg-primary/10 px-1",children:"custom"})]}),e("span",{class:"block text-[0.6rem] font-mono text-muted-foreground/60 truncate",children:o})]}),e("span",{class:S("text-[0.6rem] font-mono shrink-0 transition-opacity",l?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:l?"copied!":"copy"})]})},"ConfigSemanticColorItem"),x=p(({children:r,count:n,defaultOpen:o=!0,title:l})=>{const[a,m]=b(C(o),"open");return s("div",{class:"border-b border-border/40",children:[s("button",{class:"w-full flex items-center gap-2 px-3 py-1.5 bg-foreground/3 hover:bg-foreground/5 transition-colors cursor-pointer border-0 text-left",onClick:p(()=>m(h=>!h),"onClick"),type:"button",children:[s("span",{class:"text-[0.58rem] font-bold uppercase tracking-[0.12em] text-muted-foreground/70 flex-1",children:[e("span",{class:"text-primary/50",children:"// "}),l]}),e("span",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:n}),e("span",{class:S("text-muted-foreground/40 text-[0.6rem] transition-transform duration-150 ml-1",a&&"rotate-90"),children:"▶"})]}),a&&r]})},"ConfigSection"),z=p(({cssVar:r,isCustom:n,value:o})=>{const{copied:l,copy:a}=O(),m=r.replace(oe,"");return s("button",{class:"group flex items-center gap-2.5 w-full text-left hover:bg-foreground/4 px-3 py-1.5 transition-colors cursor-pointer bg-transparent border-0",onClick:p(()=>a(r),"onClick"),type:"button",children:[e("span",{class:"flex-1 min-w-0",children:s("span",{class:"flex items-center gap-1.5",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground truncate",children:m}),n&&e("span",{class:"text-[0.55rem] font-bold uppercase tracking-wide text-primary/70 bg-primary/10 px-1 shrink-0",children:"custom"})]})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 truncate max-w-[160px] shrink-0",children:o}),e("span",{class:S("text-[0.6rem] font-mono shrink-0 transition-opacity w-8 text-right",l?"text-primary opacity-100":"text-muted-foreground/40 opacity-0 group-hover:opacity-100"),children:l?"✓":"copy"})]})},"ConfigTokenRow"),xe=p(({configData:r,error:n,loading:o,onRetry:l})=>{const[a,m]=b(C(""),"colorSearch");if(o)return s("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[e("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(t=>e("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${t}ms`}},t))}),e("span",{class:"text-[0.75rem] text-muted-foreground",children:"Loading Tailwind config…"})]});if(n||!r)return s("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[e("p",{class:"text-[0.8rem] text-destructive",children:n??"No config available"}),e("button",{class:"px-3 py-1.5 text-[0.75rem] border border-border text-muted-foreground hover:text-foreground cursor-pointer bg-transparent",onClick:l,type:"button",children:"Retry"})]});const{cssFiles:h,customTheme:u,defaultTheme:v,version:d}=r,i={...v,...u},j=Object.entries(i).filter(([t])=>t.startsWith("--color-")),w=j.filter(([t])=>!$(t.slice(8))),R=j.filter(([t])=>$(t.slice(8))),y=new Map;for(const[t,c]of R){const k=t.slice(8).replace(K,""),T=y.get(k)??[];T.push([t,c]),y.set(k,T)}for(const[t,c]of y)y.set(t,c.toSorted((k,T)=>{const _=Number.parseInt(k[0].match(N)?.[1]??"0",10),U=Number.parseInt(T[0].match(N)?.[1]??"0",10);return _-U}));const f=a?[...y.entries()].filter(([t])=>t.toLowerCase().includes(a.toLowerCase())):[...y.entries()],V=Object.entries(i).filter(([t])=>t.startsWith("--spacing-")).toSorted(([,t],[,c])=>g(t)-g(c)),P=Object.entries(i).filter(([t])=>t.startsWith("--font-")),M=Object.entries(i).filter(([t])=>t.startsWith("--text-")&&!t.includes("--line-height")&&!t.endsWith("--font-weight")).toSorted(([,t],[,c])=>g(t)-g(c)),I=Object.entries(i).filter(([t])=>t.startsWith("--breakpoint-")).toSorted(([,t],[,c])=>g(t)-g(c)),D=Object.entries(i).filter(([t])=>t.startsWith("--radius-")),A=Object.entries(i).filter(([t])=>t.startsWith("--shadow-")||t.startsWith("--drop-shadow-")),B=Object.entries(i).filter(([t])=>t.startsWith("--blur-")),E=Object.entries(i).filter(([t])=>t.startsWith("--animate-")),X=["--color-","--spacing-","--font-","--text-","--breakpoint-","--radius-","--shadow-","--drop-shadow-","--blur-","--animate-","--tw-","--brand-"],L=Object.entries(i).filter(([t])=>!X.some(c=>t.startsWith(c)));let F=1;for(const[,t]of V)F=Math.max(F,g(t));return s("div",{children:[s("div",{class:"flex items-center gap-2 px-3 py-2 border-b border-border/40 bg-foreground/2 shrink-0",children:[e("span",{class:S("text-[0.6rem] font-bold uppercase tracking-wide px-1.5 py-0.5 shrink-0",d==="v4"&&"bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20",d==="v3"&&"bg-primary/10 text-primary border border-primary/20",d==="unknown"&&"bg-foreground/8 text-muted-foreground border border-border"),children:d==="unknown"?"Tailwind":`Tailwind ${d}`}),h.length>0&&s("code",{class:"text-[0.62rem] font-mono text-muted-foreground/70 truncate flex-1",children:[h[0],h.length>1&&s("span",{class:"text-muted-foreground/40",children:[" +",h.length-1]})]}),s("span",{class:"text-[0.6rem] font-mono text-muted-foreground/50 shrink-0",children:[Object.keys(i).length," tokens"]})]}),Object.keys(u).length>0&&e(x,{count:Object.keys(u).length,title:"Custom Overrides",children:e("div",{class:"py-1",children:Object.entries(u).map(([t,c])=>t.startsWith("--color-")&&!$(t.slice(8))?e(H,{cssVar:t,isCustom:!0,value:c},t):e(z,{cssVar:t,isCustom:!0,value:c},t))})}),w.length>0&&e(x,{count:w.length,title:"Semantic Colors",children:e("div",{class:"py-1",children:w.map(([t,c])=>e(H,{cssVar:t,isCustom:t in u,value:c},t))})}),y.size>0&&s(x,{count:y.size,defaultOpen:!1,title:"Color Palette",children:[e("div",{class:"px-3 pt-2 pb-1 border-b border-border/20",children:e("input",{class:"w-full bg-foreground/4 border border-border/40 px-2 py-1 text-[0.68rem] font-mono text-foreground placeholder:text-muted-foreground/40 outline-none focus:border-primary/40",onInput:p(t=>m(t.target.value),"onInput"),placeholder:"Filter scales…",type:"text",value:a})}),s("div",{class:"py-1 divide-y divide-border/20",children:[f.map(([t,c])=>e(he,{name:t,tokens:c},t)),f.length===0&&e("p",{class:"text-center text-[0.7rem] text-muted-foreground/50 py-4",children:"No colors match"})]})]}),V.length>0&&e(x,{count:V.length,defaultOpen:!1,title:"Spacing",children:e("div",{class:"p-3 space-y-1",children:V.map(([t,c])=>{const k=g(c),T=F>0?Math.max(k/F*100,1):1;return s("div",{class:"flex items-center gap-2.5",children:[e("span",{class:"text-[0.62rem] font-mono text-muted-foreground/70 w-10 shrink-0 text-right",children:t.slice(10)}),e("div",{class:"flex-1 h-3 bg-foreground/5 border border-border/30 overflow-hidden",children:e("div",{class:"h-full bg-primary/30 border-r border-primary/40",style:{width:`${T}%`}})}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 w-14 text-right shrink-0",children:c})]},t)})})}),I.length>0&&e(x,{count:I.length,defaultOpen:!1,title:"Breakpoints",children:e("div",{class:"p-3 space-y-1.5",children:I.map(([t,c])=>e(z,{cssVar:t,isCustom:t in u,value:c},t))})}),P.length>0&&e(x,{count:P.length,defaultOpen:!1,title:"Font Families",children:e("div",{class:"p-3 space-y-2",children:P.map(([t,c])=>s("div",{class:"space-y-0.5",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground",children:t.slice(7)}),e("p",{class:"text-[0.75rem] text-foreground/70 truncate",style:{fontFamily:c.startsWith("--theme(")?"inherit":c},children:"The quick brown fox"}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:c})]},t))})}),M.length>0&&e(x,{count:M.length,defaultOpen:!1,title:"Font Sizes",children:e("div",{class:"p-3 space-y-1.5",children:M.map(([t,c])=>{const k=Math.min(g(c)||14,48);return s("div",{class:"flex items-center gap-3",children:[e("span",{class:"text-[0.6rem] font-mono text-muted-foreground/60 w-12 shrink-0 text-right",children:t.slice(7)}),e("span",{class:"text-foreground leading-none truncate flex-1",style:{fontSize:`${k}px`},children:"Ag"}),e("code",{class:"text-[0.62rem] font-mono text-muted-foreground/60 shrink-0",children:c})]},t)})})}),D.length>0&&e(x,{count:D.length,defaultOpen:!1,title:"Border Radius",children:e("div",{class:"p-3 flex flex-wrap gap-3",children:D.map(([t,c])=>s("div",{class:"flex flex-col items-center gap-1.5",children:[e("div",{class:"size-10 border-2 border-primary/40 bg-primary/8",style:{borderRadius:c.startsWith("--theme(")?"4px":c}}),e("code",{class:"text-[0.6rem] font-mono text-muted-foreground/70",children:t.slice(9)}),e("code",{class:"text-[0.58rem] font-mono text-muted-foreground/50",children:c})]},t))})}),A.length>0&&e(x,{count:A.length,defaultOpen:!1,title:"Shadows",children:e("div",{class:"p-3 space-y-3",children:A.map(([t,c])=>s("div",{class:"space-y-1",children:[e("code",{class:"text-[0.68rem] font-mono text-foreground",children:t.slice(2)}),!c.startsWith("--theme(")&&e("div",{class:"h-8 bg-card border border-border/40",style:{boxShadow:c}}),e("code",{class:"block text-[0.58rem] font-mono text-muted-foreground/50 truncate",children:c})]},t))})}),B.length>0&&e(x,{count:B.length,defaultOpen:!1,title:"Blur",children:e("div",{class:"py-1",children:B.map(([t,c])=>e(z,{cssVar:t,isCustom:t in u,value:c},t))})}),E.length>0&&e(x,{count:E.length,defaultOpen:!1,title:"Animations",children:e("div",{class:"py-1",children:E.map(([t,c])=>e(z,{cssVar:t,isCustom:t in u,value:c},t))})}),L.length>0&&e(x,{count:L.length,defaultOpen:!1,title:"Other",children:e("div",{class:"py-1",children:L.map(([t,c])=>e(z,{cssVar:t,isCustom:t in u,value:c},t))})})]})},"ConfigTab"),ge=p(()=>s("div",{class:"flex flex-col items-center justify-center h-full gap-4 py-16 px-8 text-center select-none",children:[e("div",{class:"size-12 border border-primary/20 bg-primary/5 flex items-center justify-center text-primary/30 text-2xl",children:"◻"}),s("div",{class:"space-y-1.5",children:[e("p",{class:"text-[0.8rem] font-medium text-foreground/70",children:"No design tokens detected"}),s("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed max-w-[240px]",children:["This app reads CSS custom properties from your page's ",e("code",{class:"font-mono text-[0.65rem]",children:":root"})," selector. Make sure your app uses Tailwind CSS v4 or defines custom properties."]})]})]}),"EmptyState"),be=p(({helpers:r})=>{const[n,o]=b(C("colors"),"tab"),[l,a]=b(C(void 0),"configData"),[m,h]=b(C(!1),"configLoading"),[u,v]=b(C(void 0),"configError"),d=b(G(void 0),"tokensRef");if(!d.current){const f=le();d.current=ce(f)}const i=d.current,j=p(()=>{h(!0),v(void 0),r.rpc.getTailwindConfig().then(f=>(a(f),h(!1),f)).catch(f=>{v(f.message??"Failed to load Tailwind config"),h(!1)})},"loadConfig");Z(()=>{n==="config"&&!l&&!m&&!u&&j()},[n]);const w=i.colors.length+i.spacing.length+i.fontSizes.length+i.radii.length,R={colors:i.colors.length,config:l?Object.keys(l.defaultTheme).length+Object.keys(l.customTheme).length:0,effects:i.radii.length+i.shadows.length,spacing:i.spacing.length,type:i.fontSizes.length+i.fontFamilies.length},y=[{id:"colors",label:"Colors"},{id:"spacing",label:"Spacing"},{id:"type",label:"Type"},{id:"effects",label:"Effects"},{id:"config",label:"Config"}];return s("div",{class:"flex flex-col h-full",children:[s("div",{class:"flex items-center justify-between gap-3 px-4 py-3 border-b border-border shrink-0",children:[e("span",{class:"text-[0.75rem] font-medium text-foreground",children:"Design Tokens"}),w>0&&s("span",{class:"text-[0.65rem] font-mono text-muted-foreground/60 bg-foreground/5 px-2 py-0.5 border border-border/40",children:[w," page tokens"]})]}),w===0&&n!=="config"?e(ge,{}):s(ee,{children:[e("div",{class:"flex border-b border-border shrink-0 overflow-x-auto",children:y.map(({id:f,label:V})=>s("button",{class:S("flex-shrink-0 px-3 py-2 text-[0.68rem] font-medium transition-colors cursor-pointer border-0 border-b-2 -mb-px",n===f?"text-primary border-primary bg-primary/4":"text-muted-foreground hover:text-foreground border-transparent bg-transparent"),onClick:p(()=>o(f),"onClick"),type:"button",children:[V,R[f]>0&&e("span",{class:S("ml-1.5 text-[0.58rem] font-mono",n===f?"text-primary/70":"text-muted-foreground/50"),children:R[f]})]},f))}),s("div",{class:"flex-1 overflow-auto devtools-content-scroll",children:[n==="colors"&&e(pe,{colors:i.colors}),n==="spacing"&&e(me,{spacing:i.spacing}),n==="type"&&e(ue,{fontFamilies:i.fontFamilies,fontSizes:i.fontSizes}),n==="effects"&&e(fe,{radii:i.radii,shadows:i.shadows}),n==="config"&&e(xe,{configData:l,error:u,loading:m,onRetry:j})]})]})]})},"TailwindApp"),ye=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" fill="#06B6D4"/>
-</svg>`,be={component:pe,icon:ue,id:"dev-toolbar:tailwind",name:"Design Tokens"};export{be as default};
+</svg>`,Ve={component:be,icon:ye,id:"dev-toolbar:tailwind",name:"Design Tokens"};export{Ve as default};

package/dist/apps/tailwind/tailwind-app.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource preact */
 import type { ComponentChildren } from "preact";
 import type { AppComponentProps } from "../../types/app.d.ts";
 declare const TailwindApp: ({ helpers }: AppComponentProps) => ComponentChildren;

package/dist/apps/timeline/index.js

@@ -1,4 +1,4 @@
-var U=Object.defineProperty;var b=(e,t)=>U(e,"name",{value:t,configurable:!0});import{g as k,D as L}from"../../packem_shared/store-BxE0w51s.js";import{addHookName as g}from"preact/devtools";import{useState as x,useRef as z,useEffect as I}from"preact/hooks";import C from"../../packem_shared/cn-DWLJYh3h.js";import{jsx as n,jsxs as l}from"preact/jsx-runtime";import A from"../../packem_shared/Badge-C30mDKKG.js";import D from"../../packem_shared/Button-DODNCTPZ.js";var N=Object.defineProperty,y=b((e,t)=>N(e,"name",{value:t,configurable:!0}),"d");const j="__visulima_timeline_capture__",f=y(e=>`${e}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,7)}`,"generateId"),O=y(e=>e.startsWith("/@")||e.includes("/__vite")||e.includes("__visulima-dev-toolbar")||e.startsWith("data:")||e.startsWith("blob:"),"isViteInternalUrl"),P=y(()=>{if(globalThis[j])return;globalThis[j]=!0;const e=k();if(import.meta.hot&&(import.meta.hot.on("vite:beforeUpdate",t=>{const o=t,i=o.updates?.map(h=>h.path).join(", ")??"";e.addEvent("hmr",{data:{updates:o.updates},id:f("hmr"),level:"info",subtitle:i||void 0,time:Date.now(),title:"HMR Update"})}),import.meta.hot.on("vite:beforeFullReload",t=>{const o=t;e.addEvent("hmr",{id:f("hmr-reload"),level:"warning",subtitle:o.path??void 0,time:Date.now(),title:"Full Reload"})}),import.meta.hot.on("vite:error",t=>{const o=t,{err:i}=o;e.addEvent("errors",{data:i?{loc:i.loc,message:i.message,plugin:i.plugin,stack:i.stack}:void 0,id:f("vite-err"),level:"error",subtitle:i?.message??"Unknown error",time:Date.now(),title:"Vite Error"})})),globalThis.window!==void 0&&typeof globalThis.fetch=="function"){const t=globalThis.fetch.bind(globalThis);globalThis.fetch=async(...o)=>{const i=o[0],h=o[1],s=typeof i=="string"?i:i instanceof URL?i.href:i.url,d=(h?.method??(i instanceof Request?i.method:"GET")).toUpperCase();if(O(s))return t(...o);const u=Date.now();try{const a=await t(...o),p=Date.now()-u;return e.addEvent("network",{data:{method:d,status:a.status,statusText:a.statusText,url:s},duration:p,id:f("net"),level:a.ok?"info":"warning",subtitle:`${a.status} ${a.statusText}`,time:u,title:`${d} ${s}`}),a}catch(a){const p=Date.now()-u,v=a instanceof Error?a.message:"Network error";throw e.addEvent("network",{data:{error:v,method:d,url:s},duration:p,id:f("net-err"),level:"error",subtitle:v,time:u,title:`${d} ${s}`}),a}}}globalThis.window!==void 0&&(globalThis.addEventListener("error",t=>{t.filename?.includes("visulima-dev-toolbar")||e.addEvent("errors",{data:{colno:t.colno,filename:t.filename,lineno:t.lineno,message:t.message},id:f("err"),level:"error",subtitle:t.filename?`${t.filename}:${t.lineno}:${t.colno}`:void 0,time:Date.now(),title:t.message||"JavaScript Error"})}),globalThis.addEventListener("unhandledrejection",t=>{const{reason:o}=t,i=o instanceof Error?o.message:String(o??"Unhandled promise rejection");e.addEvent("errors",{data:{reason:String(o)},id:f("rej"),level:"error",subtitle:i,time:Date.now(),title:"Unhandled Promise Rejection"})}))},"startTimelineCapture"),B=`<!-- @license lucide-static v0.576.0 - ISC -->
+var R=Object.defineProperty;var x=(e,t)=>R(e,"name",{value:t,configurable:!0});import{m as y,D as L}from"../../packem_shared/store-DaUtLjf3.js";import{addHookName as b}from"preact/devtools";import{clsx as C}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as w,useRef as z,useEffect as I}from"preact/hooks";import{jsx as i,jsxs as l}from"preact/jsx-runtime";import A from"../../packem_shared/Badge-BEgU04nl.js";import D from"../../packem_shared/Button-Bkx66Co7.js";var N=Object.defineProperty,T=x((e,t)=>N(e,"name",{value:t,configurable:!0}),"d");const j="__visulima_timeline_capture__",f=T(e=>`${e}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,7)}`,"generateId"),O=T(e=>e.startsWith("/@")||e.includes("/__vite")||e.includes("__visulima-dev-toolbar")||e.startsWith("data:")||e.startsWith("blob:"),"isViteInternalUrl"),P=T(()=>{if(globalThis[j])return;globalThis[j]=!0;const e=y();if(import.meta.hot&&(import.meta.hot.on("vite:beforeUpdate",t=>{const n=t,o=n.updates?.map(h=>h.path).join(", ")??"";e.addEvent("hmr",{data:{updates:n.updates},id:f("hmr"),level:"info",subtitle:o||void 0,time:Date.now(),title:"HMR Update"})}),import.meta.hot.on("vite:beforeFullReload",t=>{const n=t;e.addEvent("hmr",{id:f("hmr-reload"),level:"warning",subtitle:n.path??void 0,time:Date.now(),title:"Full Reload"})}),import.meta.hot.on("vite:error",t=>{const n=t,{err:o}=n;e.addEvent("errors",{data:o?{loc:o.loc,message:o.message,plugin:o.plugin,stack:o.stack}:void 0,id:f("vite-err"),level:"error",subtitle:o?.message??"Unknown error",time:Date.now(),title:"Vite Error"})})),globalThis.window!==void 0&&typeof globalThis.fetch=="function"){const t=globalThis.fetch.bind(globalThis);globalThis.fetch=async(...n)=>{const o=n[0],h=n[1],v=o instanceof URL?o.href:o.url,s=typeof o=="string"?o:v,c=(h?.method??(o instanceof Request?o.method:"GET")).toUpperCase();if(O(s))return t(...n);const u=Date.now();try{const a=await t(...n),p=Date.now()-u;return e.addEvent("network",{data:{method:c,status:a.status,statusText:a.statusText,url:s},duration:p,id:f("net"),level:a.ok?"info":"warning",subtitle:`${a.status} ${a.statusText}`,time:u,title:`${c} ${s}`}),a}catch(a){const p=Date.now()-u,g=a instanceof Error?a.message:"Network error";throw e.addEvent("network",{data:{error:g,method:c,url:s},duration:p,id:f("net-err"),level:"error",subtitle:g,time:u,title:`${c} ${s}`}),a}}}globalThis.window!==void 0&&(globalThis.addEventListener("error",t=>{t.filename?.includes("visulima-dev-toolbar")||e.addEvent("errors",{data:{colno:t.colno,filename:t.filename,lineno:t.lineno,message:t.message},id:f("err"),level:"error",subtitle:t.filename?`${t.filename}:${t.lineno}:${t.colno}`:void 0,time:Date.now(),title:t.message||"JavaScript Error"})}),globalThis.addEventListener("unhandledrejection",t=>{const{reason:n}=t,o=n instanceof Error?n.message:String(n??"Unhandled promise rejection");e.addEvent("errors",{data:{reason:String(n)},id:f("rej"),level:"error",subtitle:o,time:Date.now(),title:"Unhandled Promise Rejection"})}))},"startTimelineCapture"),B=`<!-- @license lucide-static v0.577.0 - ISC -->
 <svg
   class="lucide lucide-gantt-chart"
   xmlns="http://www.w3.org/2000/svg"
@@ -15,4 +15,4 @@ var U=Object.defineProperty;var b=(e,t)=>U(e,"name",{value:t,configurable:!0});i
   <path d="M4 12h10" />
   <path d="M12 19h8" />
 </svg>
-`;var F=Object.defineProperty,c=b((e,t)=>F(e,"name",{value:t,configurable:!0}),"o");const G=500,w="all",S=c(e=>new Date(e).toLocaleTimeString("en-US",{fractionalSecondDigits:3,hour:"2-digit",hour12:!1,minute:"2-digit",second:"2-digit"}),"formatTime"),H={error:"destructive",info:"info",warning:"warning"},$=c(({level:e})=>e?n(A,{class:"text-[0.6rem] uppercase tracking-wider",variant:H[e]??"info",children:e}):null,"LevelBadge"),W=c(({event:e,onClose:t})=>l("div",{class:"border-l border-border bg-background h-full flex flex-col min-w-0 w-80 shrink-0",children:[l("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[n("span",{class:"text-[0.75rem] font-semibold text-foreground truncate",children:e.title}),n(D,{"aria-label":"Close detail",class:"h-5 w-5 shrink-0",onClick:t,size:"icon",variant:"ghost",children:"✕"})]}),l("div",{class:"flex-1 overflow-auto p-4 space-y-3",children:[l("div",{class:"space-y-1",children:[n("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Time"}),n("div",{class:"text-[0.8rem] font-mono text-foreground",children:S(e.time)})]}),e.subtitle&&l("div",{class:"space-y-1",children:[n("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Subtitle"}),n("div",{class:"text-[0.8rem] text-foreground",children:e.subtitle})]}),e.duration!==void 0&&l("div",{class:"space-y-1",children:[n("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Duration"}),l("div",{class:"text-[0.8rem] font-mono text-foreground",children:[e.duration,"ms"]})]}),e.level&&l("div",{class:"space-y-1",children:[n("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Level"}),n($,{level:e.level})]}),e.data&&Object.keys(e.data).length>0&&l("div",{class:"space-y-1",children:[n("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Data"}),n("pre",{class:"text-[0.7rem] font-mono text-foreground/80 bg-foreground/4 p-3 overflow-auto border border-border/50 whitespace-pre-wrap break-all",children:JSON.stringify(e.data,null,2)})]})]})]}),"EventDetail"),q=c(e=>{const[t,o]=g(x(w),"activeTab"),[i,h]=g(x([]),"groups"),[s,d]=g(x(null),"selectedEvent"),u=g(z(null),"intervalRef"),a=c(()=>{const r=k();h(r.getGroups().map(m=>({...m,events:[...m.events]})))},"refresh");I(()=>(a(),u.current=setInterval(a,G),()=>{u.current!==null&&clearInterval(u.current)}),[]);const p=new Map(L.map(r=>[r.id,r.color])),v=[{color:void 0,id:w,label:"All"},...i.map(r=>({color:p.get(r.id)??r.color,id:r.id,label:r.label}))],T=t===w?i.flatMap(r=>r.events).sort((r,m)=>r.time-m.time):i.find(r=>r.id===t)?.events??[],M=c(()=>{k().clearAll(),d(null),a()},"clearAll");return l("div",{class:"flex flex-col h-full",children:[l("div",{class:"flex items-center justify-between gap-2 px-4 py-2 border-b border-border shrink-0",children:[n("div",{class:"flex items-center gap-0 overflow-x-auto",children:v.map(r=>l("button",{class:C("px-3 py-1.5 text-[0.75rem] font-medium whitespace-nowrap border-0 cursor-pointer transition-colors duration-150",t===r.id?"text-foreground border-b-2 border-primary bg-transparent":"text-muted-foreground bg-transparent hover:text-foreground"),onClick:c(()=>{o(r.id),d(null)},"onClick"),type:"button",children:[r.color&&n("span",{class:"inline-block size-2 rounded-full mr-1.5 align-middle",style:{backgroundColor:r.color}}),r.label]},r.id))}),n(D,{onClick:M,size:"sm",title:"Clear all events",variant:"outline",children:"Clear"})]}),l("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[n("div",{class:"flex-1 overflow-auto",children:T.length===0?l("div",{class:"flex flex-col items-center justify-center h-full gap-4 p-8 text-center select-none",children:[n("div",{class:"size-12 border border-border/50 bg-foreground/2 flex items-center justify-center",children:n("svg",{"aria-hidden":"true",class:"size-5 text-muted-foreground/40",fill:"none",stroke:"currentColor","stroke-width":"1.5",viewBox:"0 0 24 24",children:n("path",{d:"M12 6v6h4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z","stroke-linecap":"round","stroke-linejoin":"round"})})}),l("div",{class:"space-y-1",children:[n("p",{class:"text-[0.8rem] font-medium text-foreground/60",children:"No events recorded yet"}),n("p",{class:"text-[0.7rem] text-muted-foreground",children:"Events appear here as your app runs"}),n("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-2 max-w-[240px] leading-relaxed",children:"HMR updates, network requests, and custom events are captured automatically"})]})]}):n("div",{class:"divide-y divide-border/50",children:T.map(r=>{const m=i.find(_=>_.events.some(R=>R.id===r.id)),E=p.get(m?.id??"")??m?.color;return l("button",{class:C("w-full flex items-start gap-3 px-4 py-3 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",s?.id===r.id&&"bg-primary/6"),onClick:c(()=>d(s?.id===r.id?null:r),"onClick"),type:"button",children:[E&&n("span",{class:"mt-1 size-1.5 rounded-full shrink-0",style:{backgroundColor:E}}),l("div",{class:"flex-1 min-w-0",children:[l("div",{class:"flex items-center gap-2 flex-wrap",children:[n("span",{class:"text-[0.8rem] font-medium text-foreground truncate",children:r.title}),n($,{level:r.level})]}),r.subtitle&&n("div",{class:"text-[0.725rem] text-muted-foreground truncate mt-0.5",children:r.subtitle})]}),n("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 shrink-0 mt-0.5",children:S(r.time)})]},r.id)})})}),s&&n(W,{event:s,onClose:c(()=>d(null),"onClose")})]})]})},"TimelineApp");P();const te={component:q,icon:B,id:"dev-toolbar:timeline",name:"Timeline"};export{te as default};
+`;var F=Object.defineProperty,d=x((e,t)=>F(e,"name",{value:t,configurable:!0}),"i");const G=500,k="all",S=d(e=>new Date(e).toLocaleTimeString("en-US",{fractionalSecondDigits:3,hour:"2-digit",hour12:!1,minute:"2-digit",second:"2-digit"}),"formatTime"),H={error:"destructive",info:"info",warning:"warning"},$=d(({level:e})=>{if(e)return i(A,{class:"text-[0.6rem] uppercase tracking-wider",variant:H[e]??"info",children:e})},"LevelBadge"),W=d(({event:e,onClose:t})=>l("div",{class:"border-l border-border bg-background h-full flex flex-col min-w-0 w-80 shrink-0",children:[l("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[i("span",{class:"text-[0.75rem] font-semibold text-foreground truncate",children:e.title}),i(D,{"aria-label":"Close detail",class:"h-5 w-5 shrink-0",onClick:t,size:"icon",variant:"ghost",children:"✕"})]}),l("div",{class:"flex-1 overflow-auto p-4 space-y-3",children:[l("div",{class:"space-y-1",children:[i("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Time"}),i("div",{class:"text-[0.8rem] font-mono text-foreground",children:S(e.time)})]}),e.subtitle&&l("div",{class:"space-y-1",children:[i("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Subtitle"}),i("div",{class:"text-[0.8rem] text-foreground",children:e.subtitle})]}),e.duration!==void 0&&l("div",{class:"space-y-1",children:[i("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Duration"}),l("div",{class:"text-[0.8rem] font-mono text-foreground",children:[e.duration,"ms"]})]}),e.level&&l("div",{class:"space-y-1",children:[i("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Level"}),i($,{level:e.level})]}),e.data&&Object.keys(e.data).length>0&&l("div",{class:"space-y-1",children:[i("div",{class:"text-[0.65rem] uppercase tracking-wider text-muted-foreground font-medium",children:"Data"}),i("pre",{class:"text-[0.7rem] font-mono text-foreground/80 bg-foreground/4 p-3 overflow-auto border border-border/50 whitespace-pre-wrap break-all",children:JSON.stringify(e.data,void 0,2)})]})]})]}),"EventDetail"),q=d(e=>{const[t,n]=b(w(k),"activeTab"),[o,h]=b(w([]),"groups"),[v,s]=b(w(void 0),"selectedEvent"),c=b(z(void 0),"intervalRef"),u=d(()=>{const r=y();h(r.getGroups().map(m=>({...m,events:[...m.events]})))},"refresh");I(()=>(u(),c.current=setInterval(u,G),()=>{c.current!==void 0&&clearInterval(c.current)}),[]);const a=new Map(L.map(r=>[r.id,r.color])),p=[{color:void 0,id:k,label:"All"},...o.map(r=>({color:a.get(r.id)??r.color,id:r.id,label:r.label}))],g=t===k?o.flatMap(r=>r.events).toSorted((r,m)=>r.time-m.time):o.find(r=>r.id===t)?.events??[],M=d(()=>{y().clearAll(),s(void 0),u()},"clearAll");return l("div",{class:"flex flex-col h-full",children:[l("div",{class:"flex items-center justify-between gap-2 px-4 py-2 border-b border-border shrink-0",children:[i("div",{class:"flex items-center gap-0 overflow-x-auto",children:p.map(r=>l("button",{class:C("px-3 py-1.5 text-[0.75rem] font-medium whitespace-nowrap border-0 cursor-pointer transition-colors duration-150",t===r.id?"text-foreground border-b-2 border-primary bg-transparent":"text-muted-foreground bg-transparent hover:text-foreground"),onClick:d(()=>{n(r.id),s(void 0)},"onClick"),type:"button",children:[r.color&&i("span",{class:"inline-block size-2 rounded-full mr-1.5 align-middle",style:{backgroundColor:r.color}}),r.label]},r.id))}),i(D,{onClick:M,size:"sm",title:"Clear all events",variant:"outline",children:"Clear"})]}),l("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[i("div",{class:"flex-1 overflow-auto",children:g.length===0?l("div",{class:"flex flex-col items-center justify-center h-full gap-4 p-8 text-center select-none",children:[i("div",{class:"size-12 border border-border/50 bg-foreground/2 flex items-center justify-center",children:i("svg",{"aria-hidden":"true",class:"size-5 text-muted-foreground/40",fill:"none",stroke:"currentColor","stroke-width":"1.5",viewBox:"0 0 24 24",children:i("path",{d:"M12 6v6h4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z","stroke-linecap":"round","stroke-linejoin":"round"})})}),l("div",{class:"space-y-1",children:[i("p",{class:"text-[0.8rem] font-medium text-foreground/60",children:"No events recorded yet"}),i("p",{class:"text-[0.7rem] text-muted-foreground",children:"Events appear here as your app runs"}),i("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-2 max-w-[240px] leading-relaxed",children:"HMR updates, network requests, and custom events are captured automatically"})]})]}):i("div",{class:"divide-y divide-border/50",children:g.map(r=>{const m=o.find(_=>_.events.some(U=>U.id===r.id)),E=a.get(m?.id??"")??m?.color;return l("button",{class:C("w-full flex items-start gap-3 px-4 py-3 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",v?.id===r.id&&"bg-primary/6"),onClick:d(()=>s(v?.id===r.id?void 0:r),"onClick"),type:"button",children:[E&&i("span",{class:"mt-1 size-1.5 rounded-full shrink-0",style:{backgroundColor:E}}),l("div",{class:"flex-1 min-w-0",children:[l("div",{class:"flex items-center gap-2 flex-wrap",children:[i("span",{class:"text-[0.8rem] font-medium text-foreground truncate",children:r.title}),i($,{level:r.level})]}),r.subtitle&&i("div",{class:"text-[0.725rem] text-muted-foreground truncate mt-0.5",children:r.subtitle})]}),i("span",{class:"text-[0.65rem] font-mono text-muted-foreground/70 shrink-0 mt-0.5",children:S(r.time)})]},r.id)})})}),v&&i(W,{event:v,onClose:d(()=>s(void 0),"onClose")})]})]})},"TimelineApp");P();const te={component:q,icon:B,id:"dev-toolbar:timeline",name:"Timeline"};export{te as default};

package/dist/apps/timeline/timeline-app.d.ts

@@ -1,4 +1,3 @@
-/** @jsxImportSource preact */
 import type { ComponentChildren } from "preact";
 import type { AppComponentProps } from "../../types/app.d.ts";
 declare const TimelineApp: (_props: AppComponentProps) => ComponentChildren;