mates-devtools 0.1.0-beta.5 → 0.1.0-beta.6

package/dist/mates-devtools.umd.js

@@ -1,114 +1,114 @@
-(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("mates")):typeof define=="function"&&define.amd?define(["exports","mates"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.MatesDevTools={},s.Mates))})(this,(function(s,o){"use strict";const Gt="selected",on="selected",cn=o.keyframes("mates-dt-flash",{"0%":{background:"var(--dt-flash-bg)",color:"#fff"},"100%":{background:"transparent",color:"var(--dt-text-muted)"}}),ot={"&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"var(--dt-scrollbar)",borderRadius:"3px"},"&::-webkit-scrollbar-thumb:hover":{background:"var(--dt-scrollbar-hover)"}},r=o.globalCSS({fab:{position:"fixed",bottom:"50px",right:"50px",width:"44px",height:"44px",borderRadius:"50%",background:"var(--dt-bg)",border:"2px solid var(--dt-border)",color:"var(--dt-text-bright)",fontSize:"20px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",zIndex:"100000",boxShadow:"0 2px 10px rgba(0,0,0,0.4)",userSelect:"none",transition:"box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease","-webkit-tap-highlight-color":"transparent","&:hover":{borderColor:"var(--dt-accent)",boxShadow:"0 4px 16px rgba(0,119,230,0.3)"},"&:active":{cursor:"grabbing",transform:"scale(0.95)"}},fabDragging:{cursor:"grabbing",transform:"scale(0.95)"},panel:{position:"fixed",bottom:"0",left:"0",right:"0",width:"100%",height:"320px",background:"var(--dt-bg)",borderTop:"1px solid var(--dt-border)",boxShadow:"0 -2px 12px rgba(0,0,0,0.4)",zIndex:"99999",display:"flex",flexDirection:"column",fontFamily:"'SF Mono', 'Fira Code', 'Consolas', monospace",fontSize:"13px",color:"var(--dt-text)",opacity:"0",transform:"translateY(12px)",transition:"opacity 0.2s ease, transform 0.2s ease",pointerEvents:"none"},panelVisible:{opacity:"1",transform:"translateY(0)",pointerEvents:"all"},minimized:{display:"none"},resizeHandle:{position:"absolute",top:"0",left:"0",right:"0",height:"4px",cursor:"ns-resize",zIndex:"1","&:hover":{background:"rgba(0,119,230,0.4)"}},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 10px",height:"38px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"16px"},headerLeft:{display:"flex",alignItems:"center",gap:"16px",minWidth:"0"},title:{fontWeight:"700",fontSize:"12px",color:"var(--dt-text-bright)",letterSpacing:"0.06em",textTransform:"uppercase",whiteSpace:"nowrap",flexShrink:"0"},controls:{display:"flex",alignItems:"center",gap:"4px",flexShrink:"0"},button:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 6px",borderRadius:"4px",fontSize:"13px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text-bright)"}},tabBar:{display:"flex",alignItems:"center",gap:"4px"},tabBtn:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",fontWeight:"500",letterSpacing:"0.03em",transition:"background 0.1s, color 0.1s",position:"relative","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{color:"var(--dt-text-selected)",background:"var(--dt-bg-selected)"}},tabBadge:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"var(--dt-accent)",color:"#fff",borderRadius:"8px",fontSize:"10px",fontWeight:"700",minWidth:"16px",height:"16px",padding:"0 4px",marginLeft:"5px",lineHeight:"1"},body:{display:"flex",flex:"1",minHeight:"0",overflow:"hidden"},leftColumn:{width:"260px",minWidth:"160px",borderRight:"1px solid var(--dt-border-2)",display:"flex",flexDirection:"column",flexShrink:"0"},leftTabs:{display:"flex",gap:"4px",padding:"5px 8px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0"},leftTabBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"3px 6px",borderRadius:"3px",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},content:{flex:"1",overflowY:"auto",...ot},componentSearch:{width:"100%",boxSizing:"border-box",background:"var(--dt-bg-input)",border:"none",borderBottom:"1px solid var(--dt-border-2)",color:"var(--dt-text)",fontFamily:"inherit",fontSize:"12px",padding:"6px 10px",outline:"none",flexShrink:"0","&::placeholder":{color:"var(--dt-text-dimmer)"},"&:focus":{borderBottomColor:"var(--dt-accent)"}},componentList:{listStyle:"none",margin:"0",padding:"4px 0"},componentItem:{display:"flex",alignItems:"center",gap:"6px",justifyContent:"space-between",padding:"5px 8px",cursor:"pointer",borderRadius:"3px",margin:"1px 4px",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},componentName:{flex:"1",minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"12px",color:"var(--dt-text)"},componentBadge:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0"},componentBadgeSelected:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0",color:"var(--dt-accent)"},componentCount:{fontSize:"11px",color:"var(--dt-text-dim)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentCountSelected:{fontSize:"11px",color:"var(--dt-accent)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentHighlightBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},componentHighlightBtnSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},empty:{padding:"16px 12px",color:"var(--dt-text-dimmer)",fontSize:"12px",textAlign:"center"},treeToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",lineHeight:"1",flexShrink:"0",width:"16px",textAlign:"center","&:hover":{color:"var(--dt-text)"}},treeLeaf:{display:"inline-block",width:"16px",flexShrink:"0",textAlign:"center",color:"var(--dt-text-dim)"},inspector:{flex:"1",minWidth:"0",overflowY:"auto",padding:"10px",...ot},inspectorBreadcrumb:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"10px",flexWrap:"wrap"},breadcrumbSegment:{color:"var(--dt-text-dim)",cursor:"pointer",fontSize:"11px","&:hover":{color:"var(--dt-text-selected)"}},breadcrumbSeparator:{color:"var(--dt-border)",fontSize:"11px"},breadcrumbCurrent:{color:"var(--dt-text-selected)",fontSize:"11px"},inspectorTitle:{fontWeight:"600",fontSize:"13px",color:"var(--dt-text-bright)",marginBottom:"8px"},instanceCount:{fontSize:"11px",color:"var(--dt-text-dim)",marginBottom:"8px"},instanceList:{listStyle:"none",margin:"0 0 8px 0",padding:"0",display:"flex",flexDirection:"column",gap:"4px"},instanceGroup:{border:"1px solid var(--dt-border-2)",borderRadius:"4px",overflow:"hidden"},instanceItem:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"6px",padding:"5px 10px",cursor:"pointer",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)"}},instanceToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-text)"}},instanceToggleSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-accent)"}},instanceId:{fontSize:"11px",color:"var(--dt-text-dim)",flexShrink:"0",marginRight:"2px"},instanceDetails:{margin:"0 0 6px 0",padding:"8px 12px",borderLeft:"2px solid var(--dt-instance-border)",background:"var(--dt-instance-bg)",borderRadius:"0 4px 4px 0"},highlightBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 7px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s","&:hover":{borderColor:"var(--dt-accent)",color:"var(--dt-accent)"}},domHighlight:{position:"absolute",zIndex:"100001",pointerEvents:"none",border:"2px solid #e53e3e",background:"rgba(229,62,62,0.18)",borderRadius:"3px",transition:"opacity 0.6s ease"},hooksSummary:{display:"flex",flexWrap:"wrap",gap:"5px",marginBottom:"10px"},hookPill:{display:"inline-flex",alignItems:"center",gap:"4px",background:"var(--dt-bg-2)",border:"1px solid var(--dt-border)",borderRadius:"10px",padding:"2px 8px",fontSize:"11px"},hookPillLabel:{color:"var(--dt-text-muted)"},hookPillCount:{color:"var(--dt-hook-count)",fontWeight:"600"},sectionHeader:{fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--dt-text-dim)",marginBottom:"4px",marginTop:"12px","&:first-child":{marginTop:"0"}},propItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},propKey:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},propValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},scopeItem:{padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},scopeName:{color:"var(--dt-scope-name)"},atomItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},atomName:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},atomValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},highlight:{display:"inline-block",padding:"1px 5px",borderRadius:"8px",fontSize:"11px",color:"var(--dt-text-muted)",background:"transparent",transition:"background 0.1s, color 0.1s"},highlightFlash:{animation:`${cn} 0.6s ease forwards`},logsPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},logsToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},logsFilterRow:{display:"flex",gap:"4px"},logsFilterBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},logsActions:{display:"flex",gap:"6px",alignItems:"center"},logsCount:{fontSize:"11px",color:"var(--dt-text-dimmer)"},logsContainer:{flex:"1",overflowY:"auto",padding:"4px 0",...ot},logEntry:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 10px",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},logTs:{color:"var(--dt-text-dimmer)",flexShrink:"0",fontSize:"11px",minWidth:"56px"},logBadge:{flexShrink:"0",padding:"1px 5px",borderRadius:"3px",fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.05em"},logLabel:{color:"var(--dt-text)",flexShrink:"0"},logDetail:{color:"var(--dt-text-muted)",wordBreak:"break-all",flex:"1",minWidth:"0"},perfPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},perfToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},perfTabs:{display:"flex",gap:"4px"},perfTabBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},perfActions:{display:"flex",gap:"6px",alignItems:"center"},perfContent:{flex:"1",overflowY:"auto",...ot},perfTable:{width:"100%",borderCollapse:"collapse",fontSize:"12px"},perfTh:{padding:"5px 10px",textAlign:"left",color:"var(--dt-text-dim)",fontWeight:"600",fontSize:"10px",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--dt-border-2)",position:"sticky",top:"0",background:"var(--dt-bg)"},perfThRight:{textAlign:"right"},perfRow:{borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},perfRowClickable:{cursor:"pointer"},perfCell:{padding:"4px 10px",verticalAlign:"middle"},perfName:{color:"var(--dt-text)",fontWeight:"500"},perfNum:{textAlign:"right",color:"var(--dt-text-muted)",fontVariantNumeric:"tabular-nums"},perfBarWrap:{width:"80px",height:"6px",background:"var(--dt-bg-3)",borderRadius:"3px",overflow:"hidden",display:"inline-block",verticalAlign:"middle"},perfBar:{height:"100%",background:"var(--dt-accent)",borderRadius:"3px",transition:"width 0.2s ease"},perfBarLabel:{fontSize:"11px",color:"var(--dt-text-dim)",marginLeft:"5px"}}),wt=new Set,it=new WeakMap,ct=new WeakMap,N=o.event("devtools");function Ut(t,e){try{wt.add(t);let n=it.get(e);n||(n=new Set,it.set(e,n)),n.add(t),ct.set(t,1),N.trigger({type:"mount",component:t})}catch{}}function Yt(t,e){try{if(wt.delete(t),e){const n=it.get(e);n&&n.delete(t)}N.trigger({type:"unmount",component:t})}catch{}}function Xt(t){try{const e=ct.get(t)??0;ct.set(t,e+1),N.trigger({type:"render",component:t})}catch{}}function j(t){try{return ct.get(t)??0}catch{}return 0}function A(t){try{return t._depth??0}catch{}return 0}function St(t){try{return t._parentComponent??null}catch{}return null}function kt(){try{return Array.from(wt).filter(t=>{const e=t._view||t.oldView;return!e?.__devtools__&&!e?.skipDevToolsRender})}catch{}return[]}function ln(t){try{const e=it.get(t);return e?Array.from(e):[]}catch{}return[]}function E(t){try{return(t._view||t.oldView)?.name||"Anonymous"}catch{}return""}function an(t){try{return t._view||t.oldView||null}catch{}return null}function qt(){try{const t=kt(),e=new Map;for(const i of t){const c=an(i);if(!c)continue;let l=e.get(c);l||(l=[],e.set(c,l)),l.push(i)}const n=[];for(const[i,c]of e)n.push({viewFn:i,name:i.name||"Anonymous",instances:c});try{n.sort((i,c)=>{const l=a=>a.instances.reduce((u,d)=>Math.min(u,A(d)),1/0);return l(i)-l(c)})}catch{}return n}catch{}return[]}const h={row:"display:flex;align-items:baseline;gap:4px;font-size:13px;line-height:20px;font-family:'SF Mono',Monaco,Consolas,monospace;",toggle:"cursor:pointer;background:none;border:none;color:#888;font-size:10px;padding:0 2px;width:14px;text-align:center;flex-shrink:0;",key:"color:#9cdcfe;white-space:nowrap;",colon:"color:#777;",string:"color:#ce9178;",number:"color:#b5cea8;",boolean:"color:#569cd6;",null:"color:#569cd6;font-style:italic;",undefined:"color:#777;font-style:italic;",function:"color:#dcdcaa;font-style:italic;",symbol:"color:#c586c0;",preview:"color:#888;font-style:italic;",children:"margin-left:14px;padding-left:6px;border-left:1px solid #333;",badge:"color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"},Jt=new WeakMap;let Kt=null;function Ct(t){try{Kt=t}catch{}}function Qt(t){try{let e=Jt.get(t);return e||(e=new Set,Jt.set(t,e)),e}catch{return new Set}}function sn(t,e){try{return Qt(t).has(e)}catch{return!1}}function dn(t,e){try{const n=Qt(t);n.has(e)?n.delete(e):n.add(e);try{Kt?.()}catch{}}catch{}}function un(t){try{return t==null?!1:typeof t=="object"}catch{return!1}}function lt(t){try{return t===null?"null":t===void 0?"undefined":Array.isArray(t)?"array":t instanceof Date?"date":t instanceof RegExp?"regexp":t instanceof Map?"map":t instanceof Set?"set":typeof t}catch{return""}}function Zt(t,e=60){try{const n=lt(t);if(n==="array"){const i=t;if(i.length===0)return"[]";const c=i.slice(0,5).map(a=>te(a)).join(", "),l=i.length>5?", …":"";return`[${c}${l}]  (${i.length})`}if(n==="map")return`Map(${t.size})`;if(n==="set")return`Set(${t.size})`;if(n==="date")return`Date(${t.toISOString()})`;if(n==="regexp")return String(t);if(n==="object"){const i=t,c=Object.keys(i);if(c.length===0)return"{}";const l=c.slice(0,4).map(d=>`${d}: ${te(i[d])}`).join(", "),a=c.length>4?", …":"",u=`{${l}${a}}`;return u.length>e?u.slice(0,e-1)+"…}":u}return String(t)}catch{return""}}function te(t){try{switch(lt(t)){case"string":{const n=t;return n.length>30?`"${n.slice(0,27)}…"`:`"${n}"`}case"number":case"boolean":return String(t);case"null":return"null";case"undefined":return"undefined";case"function":return"ƒ()";case"symbol":return String(t);case"array":return`Array(${t.length})`;case"object":return"{…}";case"date":return"Date";case"map":return`Map(${t.size})`;case"set":return`Set(${t.size})`;default:return String(t)}}catch{return""}}function pn(t){try{switch(lt(t)){case"string":return o.html`<span style="${h.string}">"${String(t)}"</span>`;case"number":return o.html`<span style="${h.number}">${String(t)}</span>`;case"boolean":return o.html`<span style="${h.boolean}">${String(t)}</span>`;case"null":return o.html`<span style="${h.null}">null</span>`;case"undefined":return o.html`<span style="${h.undefined}">undefined</span>`;case"function":return o.html`<span style="${h.function}"
+(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("mates")):typeof define=="function"&&define.amd?define(["exports","mates"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.MatesDevTools={},s.Mates))})(this,(function(s,i){"use strict";const Wt="selected",rn="selected",on=i.keyframes("mates-dt-flash",{"0%":{background:"var(--dt-flash-bg)",color:"#fff"},"100%":{background:"transparent",color:"var(--dt-text-muted)"}}),ot={"&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"var(--dt-scrollbar)",borderRadius:"3px"},"&::-webkit-scrollbar-thumb:hover":{background:"var(--dt-scrollbar-hover)"}},r=i.globalCSS({fab:{position:"fixed",bottom:"50px",right:"50px",width:"44px",height:"44px",borderRadius:"50%",background:"var(--dt-bg)",border:"2px solid var(--dt-border)",color:"var(--dt-text-bright)",fontSize:"20px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",zIndex:"100000",boxShadow:"0 2px 10px rgba(0,0,0,0.4)",userSelect:"none",transition:"box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease","-webkit-tap-highlight-color":"transparent","&:hover":{borderColor:"var(--dt-accent)",boxShadow:"0 4px 16px rgba(0,119,230,0.3)"},"&:active":{cursor:"grabbing",transform:"scale(0.95)"}},fabDragging:{cursor:"grabbing",transform:"scale(0.95)"},panel:{position:"fixed",bottom:"0",left:"0",right:"0",width:"100%",height:"320px",background:"var(--dt-bg)",borderTop:"1px solid var(--dt-border)",boxShadow:"0 -2px 12px rgba(0,0,0,0.4)",zIndex:"99999",display:"flex",flexDirection:"column",fontFamily:"'SF Mono', 'Fira Code', 'Consolas', monospace",fontSize:"13px",color:"var(--dt-text)",opacity:"0",transform:"translateY(12px)",transition:"opacity 0.2s ease, transform 0.2s ease",pointerEvents:"none"},panelVisible:{opacity:"1",transform:"translateY(0)",pointerEvents:"all"},minimized:{display:"none"},resizeHandle:{position:"absolute",top:"0",left:"0",right:"0",height:"4px",cursor:"ns-resize",zIndex:"1","&:hover":{background:"rgba(0,119,230,0.4)"}},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 10px",height:"38px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"16px"},headerLeft:{display:"flex",alignItems:"center",gap:"16px",minWidth:"0"},title:{fontWeight:"700",fontSize:"12px",color:"var(--dt-text-bright)",letterSpacing:"0.06em",textTransform:"uppercase",whiteSpace:"nowrap",flexShrink:"0"},controls:{display:"flex",alignItems:"center",gap:"4px",flexShrink:"0"},button:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 6px",borderRadius:"4px",fontSize:"13px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text-bright)"}},tabBar:{display:"flex",alignItems:"center",gap:"4px"},tabBtn:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",fontWeight:"500",letterSpacing:"0.03em",transition:"background 0.1s, color 0.1s",position:"relative","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{color:"var(--dt-text-selected)",background:"var(--dt-bg-selected)"}},tabBadge:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"var(--dt-accent)",color:"#fff",borderRadius:"8px",fontSize:"10px",fontWeight:"700",minWidth:"16px",height:"16px",padding:"0 4px",marginLeft:"5px",lineHeight:"1"},body:{display:"flex",flex:"1",minHeight:"0",overflow:"hidden"},leftColumn:{width:"260px",minWidth:"160px",borderRight:"1px solid var(--dt-border-2)",display:"flex",flexDirection:"column",flexShrink:"0"},leftTabs:{display:"flex",gap:"4px",padding:"5px 8px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0"},leftTabBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"3px 6px",borderRadius:"3px",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},content:{flex:"1",overflowY:"auto",...ot},componentSearch:{width:"100%",boxSizing:"border-box",background:"var(--dt-bg-input)",border:"none",borderBottom:"1px solid var(--dt-border-2)",color:"var(--dt-text)",fontFamily:"inherit",fontSize:"12px",padding:"6px 10px",outline:"none",flexShrink:"0","&::placeholder":{color:"var(--dt-text-dimmer)"},"&:focus":{borderBottomColor:"var(--dt-accent)"}},componentList:{listStyle:"none",margin:"0",padding:"4px 0"},componentItem:{display:"flex",alignItems:"center",gap:"6px",justifyContent:"space-between",padding:"5px 8px",cursor:"pointer",borderRadius:"3px",margin:"1px 4px",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},componentName:{flex:"1",minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"12px",color:"var(--dt-text)"},componentBadge:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0"},componentBadgeSelected:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0",color:"var(--dt-accent)"},componentCount:{fontSize:"11px",color:"var(--dt-text-dim)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentCountSelected:{fontSize:"11px",color:"var(--dt-accent)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentHighlightBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},componentHighlightBtnSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},empty:{padding:"16px 12px",color:"var(--dt-text-dimmer)",fontSize:"12px",textAlign:"center"},treeToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",lineHeight:"1",flexShrink:"0",width:"16px",textAlign:"center","&:hover":{color:"var(--dt-text)"}},treeLeaf:{display:"inline-block",width:"16px",flexShrink:"0",textAlign:"center",color:"var(--dt-text-dim)"},inspector:{flex:"1",minWidth:"0",overflowY:"auto",padding:"10px",...ot},inspectorBreadcrumb:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"10px",flexWrap:"wrap"},breadcrumbSegment:{color:"var(--dt-text-dim)",cursor:"pointer",fontSize:"11px","&:hover":{color:"var(--dt-text-selected)"}},breadcrumbSeparator:{color:"var(--dt-border)",fontSize:"11px"},breadcrumbCurrent:{color:"var(--dt-text-selected)",fontSize:"11px"},inspectorTitle:{fontWeight:"600",fontSize:"13px",color:"var(--dt-text-bright)",marginBottom:"8px"},instanceCount:{fontSize:"11px",color:"var(--dt-text-dim)",marginBottom:"8px"},instanceList:{listStyle:"none",margin:"0 0 8px 0",padding:"0",display:"flex",flexDirection:"column",gap:"4px"},instanceGroup:{border:"1px solid var(--dt-border-2)",borderRadius:"4px",overflow:"hidden"},instanceItem:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"6px",padding:"5px 10px",cursor:"pointer",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)"}},instanceToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-text)"}},instanceToggleSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-accent)"}},instanceId:{fontSize:"11px",color:"var(--dt-text-dim)",flexShrink:"0",marginRight:"2px"},instanceDetails:{margin:"0 0 6px 0",padding:"8px 12px",borderLeft:"2px solid var(--dt-instance-border)",background:"var(--dt-instance-bg)",borderRadius:"0 4px 4px 0"},highlightBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 7px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s","&:hover":{borderColor:"var(--dt-accent)",color:"var(--dt-accent)"}},domHighlight:{position:"absolute",zIndex:"100001",pointerEvents:"none",border:"2px solid #e53e3e",background:"rgba(229,62,62,0.18)",borderRadius:"3px",transition:"opacity 0.6s ease"},hooksSummary:{display:"flex",flexWrap:"wrap",gap:"5px",marginBottom:"10px"},hookPill:{display:"inline-flex",alignItems:"center",gap:"4px",background:"var(--dt-bg-2)",border:"1px solid var(--dt-border)",borderRadius:"10px",padding:"2px 8px",fontSize:"11px"},hookPillLabel:{color:"var(--dt-text-muted)"},hookPillCount:{color:"var(--dt-hook-count)",fontWeight:"600"},sectionHeader:{fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--dt-text-dim)",marginBottom:"4px",marginTop:"12px","&:first-child":{marginTop:"0"}},propItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},propKey:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},propValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},scopeItem:{padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},scopeName:{color:"var(--dt-scope-name)"},atomItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},atomName:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},atomValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},highlight:{display:"inline-block",padding:"1px 5px",borderRadius:"8px",fontSize:"11px",color:"var(--dt-text-muted)",background:"transparent",transition:"background 0.1s, color 0.1s"},highlightFlash:{animation:`${on} 0.6s ease forwards`},logsPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},logsToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},logsFilterRow:{display:"flex",gap:"4px"},logsFilterBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},logsActions:{display:"flex",gap:"6px",alignItems:"center"},logsCount:{fontSize:"11px",color:"var(--dt-text-dimmer)"},logsContainer:{flex:"1",overflowY:"auto",padding:"4px 0",...ot},logEntry:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 10px",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},logTs:{color:"var(--dt-text-dimmer)",flexShrink:"0",fontSize:"11px",minWidth:"56px"},logBadge:{flexShrink:"0",padding:"1px 5px",borderRadius:"3px",fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.05em"},logLabel:{color:"var(--dt-text)",flexShrink:"0"},logDetail:{color:"var(--dt-text-muted)",wordBreak:"break-all",flex:"1",minWidth:"0"},perfPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},perfToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},perfTabs:{display:"flex",gap:"4px"},perfTabBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},perfActions:{display:"flex",gap:"6px",alignItems:"center"},perfContent:{flex:"1",overflowY:"auto",...ot},perfTable:{width:"100%",borderCollapse:"collapse",fontSize:"12px"},perfTh:{padding:"5px 10px",textAlign:"left",color:"var(--dt-text-dim)",fontWeight:"600",fontSize:"10px",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--dt-border-2)",position:"sticky",top:"0",background:"var(--dt-bg)"},perfThRight:{textAlign:"right"},perfRow:{borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},perfRowClickable:{cursor:"pointer"},perfCell:{padding:"4px 10px",verticalAlign:"middle"},perfName:{color:"var(--dt-text)",fontWeight:"500"},perfNum:{textAlign:"right",color:"var(--dt-text-muted)",fontVariantNumeric:"tabular-nums"},perfBarWrap:{width:"80px",height:"6px",background:"var(--dt-bg-3)",borderRadius:"3px",overflow:"hidden",display:"inline-block",verticalAlign:"middle"},perfBar:{height:"100%",background:"var(--dt-accent)",borderRadius:"3px",transition:"width 0.2s ease"},perfBarLabel:{fontSize:"11px",color:"var(--dt-text-dim)",marginLeft:"5px"}}),_t=new Set,it=new WeakMap,ct=new WeakMap,N=i.event("devtools");function Gt(t,e){try{_t.add(t);let n=it.get(e);n||(n=new Set,it.set(e,n)),n.add(t),ct.set(t,1),N.trigger({type:"mount",component:t})}catch{}}function Ut(t,e){try{if(_t.delete(t),e){const n=it.get(e);n&&n.delete(t)}N.trigger({type:"unmount",component:t})}catch{}}function Yt(t){try{const e=ct.get(t)??0;ct.set(t,e+1),N.trigger({type:"render",component:t})}catch{}}function j(t){try{return ct.get(t)??0}catch{}return 0}function E(t){try{return t._depth??0}catch{}return 0}function wt(t){try{return t._parentComponent??null}catch{}return null}function St(){try{return Array.from(_t).filter(t=>{const e=t._view||t.oldView;return!e?.__devtools__&&!e?.skipDevToolsRender})}catch{}return[]}function cn(t){try{const e=it.get(t);return e?Array.from(e):[]}catch{}return[]}function A(t){try{return(t._view||t.oldView)?.name||"Anonymous"}catch{}return""}function ln(t){try{return t._view||t.oldView||null}catch{}return null}function Xt(){try{const t=St(),e=new Map;for(const o of t){const c=ln(o);if(!c)continue;let l=e.get(c);l||(l=[],e.set(c,l)),l.push(o)}const n=[];for(const[o,c]of e)n.push({viewFn:o,name:o.name||"Anonymous",instances:c});try{n.sort((o,c)=>{const l=a=>a.instances.reduce((u,d)=>Math.min(u,E(d)),1/0);return l(o)-l(c)})}catch{}return n}catch{}return[]}const h={row:"display:flex;align-items:baseline;gap:4px;font-size:13px;line-height:20px;font-family:'SF Mono',Monaco,Consolas,monospace;",toggle:"cursor:pointer;background:none;border:none;color:#888;font-size:10px;padding:0 2px;width:14px;text-align:center;flex-shrink:0;",key:"color:#9cdcfe;white-space:nowrap;",colon:"color:#777;",string:"color:#ce9178;",number:"color:#b5cea8;",boolean:"color:#569cd6;",null:"color:#569cd6;font-style:italic;",undefined:"color:#777;font-style:italic;",function:"color:#dcdcaa;font-style:italic;",symbol:"color:#c586c0;",preview:"color:#888;font-style:italic;",children:"margin-left:14px;padding-left:6px;border-left:1px solid #333;",badge:"color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"},qt=new WeakMap;let Jt=null;function kt(t){try{Jt=t}catch{}}function Kt(t){try{let e=qt.get(t);return e||(e=new Set,qt.set(t,e)),e}catch{return new Set}}function an(t,e){try{return Kt(t).has(e)}catch{return!1}}function sn(t,e){try{const n=Kt(t);n.has(e)?n.delete(e):n.add(e);try{Jt?.()}catch{}}catch{}}function dn(t){try{return t==null?!1:typeof t=="object"}catch{return!1}}function lt(t){try{return t===null?"null":t===void 0?"undefined":Array.isArray(t)?"array":t instanceof Date?"date":t instanceof RegExp?"regexp":t instanceof Map?"map":t instanceof Set?"set":typeof t}catch{return""}}function Qt(t,e=60){try{const n=lt(t);if(n==="array"){const o=t;if(o.length===0)return"[]";const c=o.slice(0,5).map(a=>Zt(a)).join(", "),l=o.length>5?", …":"";return`[${c}${l}]  (${o.length})`}if(n==="map")return`Map(${t.size})`;if(n==="set")return`Set(${t.size})`;if(n==="date")return`Date(${t.toISOString()})`;if(n==="regexp")return String(t);if(n==="object"){const o=t,c=Object.keys(o);if(c.length===0)return"{}";const l=c.slice(0,4).map(d=>`${d}: ${Zt(o[d])}`).join(", "),a=c.length>4?", …":"",u=`{${l}${a}}`;return u.length>e?u.slice(0,e-1)+"…}":u}return String(t)}catch{return""}}function Zt(t){try{switch(lt(t)){case"string":{const n=t;return n.length>30?`"${n.slice(0,27)}…"`:`"${n}"`}case"number":case"boolean":return String(t);case"null":return"null";case"undefined":return"undefined";case"function":return"ƒ()";case"symbol":return String(t);case"array":return`Array(${t.length})`;case"object":return"{…}";case"date":return"Date";case"map":return`Map(${t.size})`;case"set":return`Set(${t.size})`;default:return String(t)}}catch{return""}}function un(t){try{switch(lt(t)){case"string":return i.html`<span style="${h.string}">"${String(t)}"</span>`;case"number":return i.html`<span style="${h.number}">${String(t)}</span>`;case"boolean":return i.html`<span style="${h.boolean}">${String(t)}</span>`;case"null":return i.html`<span style="${h.null}">null</span>`;case"undefined":return i.html`<span style="${h.undefined}">undefined</span>`;case"function":return i.html`<span style="${h.function}"
           >ƒ ${t.name||"anonymous"}()</span
-        >`;case"symbol":return o.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return o.html`<span style="${h.string}"
+        >`;case"symbol":return i.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return i.html`<span style="${h.string}"
           >${t.toISOString()}</span
-        >`;case"regexp":return o.html`<span style="${h.string}">${String(t)}</span>`;default:return o.html`<span style="${h.preview}">${String(t)}</span>`}}catch{return o.html``}}function fn(t){try{if(t instanceof Map)return Array.from(t.entries()).map(([e,n])=>({key:String(e),value:n}));if(t instanceof Set)return Array.from(t).map((e,n)=>({key:String(n),value:e}));if(Array.isArray(t))return t.map((e,n)=>({key:String(n),value:e}));if(typeof t=="object"&&t!==null){const e=[],n=new Set;for(const c of Object.keys(t)){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}let i=Object.getPrototypeOf(t);for(;i&&i!==Object.prototype;){for(const c of Object.getOwnPropertyNames(i)){if(n.has(c)||c==="constructor")continue;if(Object.getOwnPropertyDescriptor(i,c)?.get){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}}i=Object.getPrototypeOf(i)}return e}return[]}catch{return[]}}function T(t,e,n,i="root",c=0){try{if(c>15)return o.html`
+        >`;case"regexp":return i.html`<span style="${h.string}">${String(t)}</span>`;default:return i.html`<span style="${h.preview}">${String(t)}</span>`}}catch{return i.html``}}function pn(t){try{if(t instanceof Map)return Array.from(t.entries()).map(([e,n])=>({key:String(e),value:n}));if(t instanceof Set)return Array.from(t).map((e,n)=>({key:String(n),value:e}));if(Array.isArray(t))return t.map((e,n)=>({key:String(n),value:e}));if(typeof t=="object"&&t!==null){const e=[],n=new Set;for(const c of Object.keys(t)){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}let o=Object.getPrototypeOf(t);for(;o&&o!==Object.prototype;){for(const c of Object.getOwnPropertyNames(o)){if(n.has(c)||c==="constructor")continue;if(Object.getOwnPropertyDescriptor(o,c)?.get){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}}o=Object.getPrototypeOf(o)}return e}return[]}catch{return[]}}function T(t,e,n,o="root",c=0){try{if(c>15)return i.html`
         <div style="${h.row}">
-          ${e!=null?o.html`<span style="${h.key}">${e}</span
-                ><span style="${h.colon}">:</span>`:o.nothing}
+          ${e!=null?i.html`<span style="${h.key}">${e}</span
+                ><span style="${h.colon}">:</span>`:i.nothing}
           <span style="${h.preview}">[max depth]</span>
         </div>
-      `;const l=un(n),a=l&&sn(t,i);if(!l)return o.html`
+      `;const l=dn(n),a=l&&an(t,o);if(!l)return i.html`
         <div style="${h.row}">
           <span style="${h.toggle}"></span>
-          ${e!=null?o.html`<span style="${h.key}">${e}</span
-                ><span style="${h.colon}">:</span>`:o.nothing}
-          ${pn(n)}
+          ${e!=null?i.html`<span style="${h.key}">${e}</span
+                ><span style="${h.colon}">:</span>`:i.nothing}
+          ${un(n)}
         </div>
-      `;const u=a?fn(n):[],d=lt(n);return o.html`
+      `;const u=a?pn(n):[],d=lt(n);return i.html`
       <div>
         <div
           style="${h.row}cursor:pointer;user-select:none;"
-          @click=${p=>{try{p.stopPropagation(),dn(t,i)}catch{}}}
+          @click=${p=>{try{p.stopPropagation(),sn(t,o)}catch{}}}
         >
           <span style="${h.toggle}">${a?"▼":"▶"}</span>
-          ${e!=null?o.html`<span style="${h.key}">${e}</span
-                ><span style="${h.colon}">:</span>`:o.nothing}
-          ${a?o.html`<span style="${h.preview}"
-                >${d==="array"?`Array(${n.length})`:d==="object"?"{":Zt(n)}</span
-              >`:o.html`<span style="${h.preview}">${Zt(n)}</span>`}
+          ${e!=null?i.html`<span style="${h.key}">${e}</span
+                ><span style="${h.colon}">:</span>`:i.nothing}
+          ${a?i.html`<span style="${h.preview}"
+                >${d==="array"?`Array(${n.length})`:d==="object"?"{":Qt(n)}</span
+              >`:i.html`<span style="${h.preview}">${Qt(n)}</span>`}
         </div>
-        ${a?o.html`
+        ${a?i.html`
               <div style="${h.children}">
-                ${u.map(p=>T(t,p.key,p.value,`${i}.${p.key}`,c+1))}
-                ${u.length===0?o.html`<div style="${h.row}">
+                ${u.map(p=>T(t,p.key,p.value,`${o}.${p.key}`,c+1))}
+                ${u.length===0?i.html`<div style="${h.row}">
                       <span style="${h.preview}">(empty)</span>
-                    </div>`:o.nothing}
+                    </div>`:i.nothing}
               </div>
-              ${d==="object"&&a?o.html`<div style="${h.row};margin-left:14px;">
+              ${d==="object"&&a?i.html`<div style="${h.row};margin-left:14px;">
                     <span style="${h.preview}">}</span>
-                  </div>`:o.nothing}
-            `:o.nothing}
+                  </div>`:i.nothing}
+            `:i.nothing}
       </div>
-    `}catch{return o.html``}}function hn(t,e,n="root"){try{const i=Object.keys(e);return i.length===0?o.html`<div style="color:#777;font-size:13px;padding:2px 0;">
+    `}catch{return i.html``}}function fn(t,e,n="root"){try{const o=Object.keys(e);return o.length===0?i.html`<div style="color:#777;font-size:13px;padding:2px 0;">
         No data
-      </div>`:o.html`
-      ${i.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
-    `}catch{return o.html``}}function ee(t){try{const e=Object.keys(t);return e.length===0?o.html`<div style="color: #777; font-size: 13px;">No props</div>`:o.html`
-      ${o.repeat(e,n=>n,n=>T(t,n,t[n],`props.${n}`,0))}
-    `}catch{return o.html``}}function ne(t){try{return!t||t.size===0?o.html`<div style="color: #777; font-size: 13px;">No scopes</div>`:o.html`
-      ${[...t?.entries()||[]].map(([e,n])=>{try{const i=e.name||"AnonymousScope",c={},l=new Set;for(const d of Object.keys(n))if(!(d==="__isScope___"||d==="reset")){l.add(d);try{const p=n[d];p&&typeof p=="function"&&p.__isAtom___?c[`${d} (atom)`]=p.get():c[d]=p}catch{c[d]="[error reading]"}}let a=Object.getPrototypeOf(n);for(;a&&a!==Object.prototype;){for(const d of Object.getOwnPropertyNames(a)){if(l.has(d)||d==="constructor"||d==="__isScope___"||d==="reset")continue;if(Object.getOwnPropertyDescriptor(a,d)?.get){l.add(d);try{c[`${d} (get)`]=n[d]}catch{c[`${d} (get)`]="[error reading]"}}}a=Object.getPrototypeOf(a)}const u=n;return o.html`
+      </div>`:i.html`
+      ${o.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
+    `}catch{return i.html``}}function te(t){try{const e=Object.keys(t);return e.length===0?i.html`<div style="color: #777; font-size: 13px;">No props</div>`:i.html`
+      ${i.repeat(e,n=>n,n=>T(t,n,t[n],`props.${n}`,0))}
+    `}catch{return i.html``}}function ee(t){try{return!t||t.size===0?i.html`<div style="color: #777; font-size: 13px;">No scopes</div>`:i.html`
+      ${[...t?.entries()||[]].map(([e,n])=>{try{const o=e.name||"AnonymousScope",c={},l=new Set;for(const d of Object.keys(n))if(!(d==="__isScope___"||d==="reset")){l.add(d);try{const p=n[d];p&&typeof p=="function"&&p.__isAtom___?c[`${d} (atom)`]=p.get():c[d]=p}catch{c[d]="[error reading]"}}let a=Object.getPrototypeOf(n);for(;a&&a!==Object.prototype;){for(const d of Object.getOwnPropertyNames(a)){if(l.has(d)||d==="constructor"||d==="__isScope___"||d==="reset")continue;if(Object.getOwnPropertyDescriptor(a,d)?.get){l.add(d);try{c[`${d} (get)`]=n[d]}catch{c[`${d} (get)`]="[error reading]"}}}a=Object.getPrototypeOf(a)}const u=n;return i.html`
               <div style="margin-bottom:6px;">
                 <div
                   style="color:#4ec9b0;font-weight:500;font-size:13px;margin-bottom:2px;font-family:'SF Mono',Monaco,Consolas,monospace;"
                 >
-                  ${i}
+                  ${o}
                 </div>
                 <div style="margin-left:4px;">
-                  ${Object.keys(c).length===0?o.html`<div style="color:#666;font-size:13px;">
+                  ${Object.keys(c).length===0?i.html`<div style="color:#666;font-size:13px;">
                         (empty scope)
-                      </div>`:o.html`
-                        ${Object.keys(c).map(d=>T(u,d,c[d],`scope_${i}.${d}`,0))}
+                      </div>`:i.html`
+                        ${Object.keys(c).map(d=>T(u,d,c[d],`scope_${o}.${d}`,0))}
                       `}
                 </div>
               </div>
-            `}catch{return o.html``}})}
-    `}catch{return o.html``}}function gn(t){try{if(!t)return[];const e=[];for(const n of t.keys())if(n&&typeof n=="function"&&n.__isAtom___)try{e.push({id:n.__id__??"?",value:n.get(),key:n})}catch{}return e}catch{return[]}}function re(t){try{const e=gn(t);return e.length===0?o.html`<div style="color: #777; font-size: 13px;">No atoms</div>`:o.html`
-      ${o.repeat(e,n=>n.id,(n,i)=>{const c=e.length===1?"atom":`atom#${i+1}`,l=typeof n.value=="object"&&n.value!==null?n.value:n.key;return T(l,c,n.value,`atom_${n.id}`,0)})}
-    `}catch{return o.html``}}function oe(t){try{return!t||t.length===0?o.html`<div style="color: #777; font-size: 13px;">No state</div>`:o.html`
-      ${t.map((e,n)=>{const i=t.length===1?"state":`state#${n+1}`;let c;try{c=e.atom.get()}catch{c=e.state}return T(c,i,c,`useState_${n}`,0)})}
-    `}catch{return o.html``}}function mn(t){try{const e={onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0},n=t._useStates;n&&(e.useState=n.length);const i=t.cleanups;if(!i)return e;for(const c of i.keys())if(c!=null){if(c.__isAtom___){e.atoms++;continue}if(c.__isSetter___){e.setters++;continue}if(c.__isCleanupEvent___){e.events++;continue}if(c.__isEvent___){e.events++;continue}if(c.__isChannel___){e.channels++;continue}if(c.__isOnMount__){e.onMount++;continue}if(c.__isOnCleanup__){e.onCleanup++;continue}if(c.__isOnPaint__){e.onPaint++;continue}if(c.__isOnAllMount__){e.onAllMount++;continue}if(c.__isEffect__){e.effects++;continue}if(c.__isOn__){e.on++;continue}}return e}catch{return{onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0}}}function bn(t,e){try{return o.html`
+            `}catch{return i.html``}})}
+    `}catch{return i.html``}}function hn(t){try{if(!t)return[];const e=[];for(const n of t.keys())if(n&&typeof n=="function"&&n.__isAtom___)try{e.push({id:n.__id__??"?",value:n.get(),key:n})}catch{}return e}catch{return[]}}function ne(t){try{const e=hn(t);return e.length===0?i.html`<div style="color: #777; font-size: 13px;">No atoms</div>`:i.html`
+      ${i.repeat(e,n=>n.id,(n,o)=>{const c=e.length===1?"atom":`atom#${o+1}`,l=typeof n.value=="object"&&n.value!==null?n.value:n.key;return T(l,c,n.value,`atom_${n.id}`,0)})}
+    `}catch{return i.html``}}function re(t){try{return!t||t.length===0?i.html`<div style="color: #777; font-size: 13px;">No state</div>`:i.html`
+      ${t.map((e,n)=>{const o=t.length===1?"state":`state#${n+1}`;let c;try{c=e.atom.get()}catch{c=e.state}return T(c,o,c,`useState_${n}`,0)})}
+    `}catch{return i.html``}}function gn(t){try{const e={onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0},n=t._useStates;n&&(e.useState=n.length);const o=t.cleanups;if(!o)return e;for(const c of o.keys())if(c!=null){if(c.__isAtom___){e.atoms++;continue}if(c.__isSetter___){e.setters++;continue}if(c.__isCleanupEvent___){e.events++;continue}if(c.__isEvent___){e.events++;continue}if(c.__isChannel___){e.channels++;continue}if(c.__isOnMount__){e.onMount++;continue}if(c.__isOnCleanup__){e.onCleanup++;continue}if(c.__isOnPaint__){e.onPaint++;continue}if(c.__isOnAllMount__){e.onAllMount++;continue}if(c.__isEffect__){e.effects++;continue}if(c.__isOn__){e.on++;continue}}return e}catch{return{onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0}}}function mn(t,e){try{return i.html`
       <span class="${r.hookPill}">
         <span class="${r.hookPillLabel}">${t}</span>
         <span class="${r.hookPillCount}">${e}</span>
       </span>
-    `}catch{return o.html``}}function Tt(t){try{const e=mn(t),n=[];return e.onMount>0&&n.push({label:"onMount",count:e.onMount}),e.onCleanup>0&&n.push({label:"onCleanup",count:e.onCleanup}),e.onPaint>0&&n.push({label:"onPaint",count:e.onPaint}),e.onAllMount>0&&n.push({label:"onAllMount",count:e.onAllMount}),e.effects>0&&n.push({label:"effect",count:e.effects}),e.on>0&&n.push({label:"on",count:e.on}),e.setters>0&&n.push({label:"setter",count:e.setters}),e.useState>0&&n.push({label:"useState",count:e.useState}),e.atoms>0&&n.push({label:"atom",count:e.atoms}),e.events>0&&n.push({label:"event",count:e.events}),e.channels>0&&n.push({label:"channel",count:e.channels}),n.length===0?o.nothing:o.html`
+    `}catch{return i.html``}}function Ct(t){try{const e=gn(t),n=[];return e.onMount>0&&n.push({label:"onMount",count:e.onMount}),e.onCleanup>0&&n.push({label:"onCleanup",count:e.onCleanup}),e.onPaint>0&&n.push({label:"onPaint",count:e.onPaint}),e.onAllMount>0&&n.push({label:"onAllMount",count:e.onAllMount}),e.effects>0&&n.push({label:"effect",count:e.effects}),e.on>0&&n.push({label:"on",count:e.on}),e.setters>0&&n.push({label:"setter",count:e.setters}),e.useState>0&&n.push({label:"useState",count:e.useState}),e.atoms>0&&n.push({label:"atom",count:e.atoms}),e.events>0&&n.push({label:"event",count:e.events}),e.channels>0&&n.push({label:"channel",count:e.channels}),n.length===0?i.nothing:i.html`
       <div class="${r.hooksSummary}">
-        ${n.map(i=>bn(i.label,i.count))}
+        ${n.map(o=>mn(o.label,o.count))}
       </div>
-    `}catch{return o.html``}}function yn(t,e){try{t.stopPropagation(),bt(e)}catch{}}function vn(t){try{const e=[];let n=St(t);for(;n;)e.push(E(n)),n=St(n);return e.reverse(),e}catch{return[]}}function ie(t){try{const e=vn(t),n=E(t);if(e.length===0)return o.html`
+    `}catch{return i.html``}}function yn(t,e){try{t.stopPropagation(),mt(e)}catch{}}function bn(t){try{const e=[];let n=wt(t);for(;n;)e.push(A(n)),n=wt(n);return e.reverse(),e}catch{return[]}}function oe(t){try{const e=bn(t),n=A(t);if(e.length===0)return i.html`
         <div class="${r.inspectorBreadcrumb}">
           <span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
             >${n}</span
           >
         </div>
-      `;const i=[];for(let c=0;c<e.length;c++)c>0&&i.push(o.html`<span class="${r.breadcrumbSeparator}">›</span>`),i.push(o.html`<span class="${r.breadcrumbSegment}">${e[c]}</span>`);return i.push(o.html`<span class="${r.breadcrumbSeparator}">›</span>`),i.push(o.html`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
+      `;const o=[];for(let c=0;c<e.length;c++)c>0&&o.push(i.html`<span class="${r.breadcrumbSeparator}">›</span>`),o.push(i.html`<span class="${r.breadcrumbSegment}">${e[c]}</span>`);return o.push(i.html`<span class="${r.breadcrumbSeparator}">›</span>`),o.push(i.html`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
         >${n}</span
-      >`),o.html` <div class="${r.inspectorBreadcrumb}">${i}</div> `}catch{return o.html``}}function ce(t){try{return o.html`
+      >`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function ie(t){try{return i.html`
       <div class="${r.instanceDetails}">
         <div class="${r.sectionHeader}">Props</div>
-        ${ee(t._props||{})}
+        ${te(t._props||{})}
 
         <div class="${r.sectionHeader}">State</div>
-        ${oe(t._useStates)}
+        ${re(t._useStates)}
 
         <div class="${r.sectionHeader}">Atoms</div>
-        ${re(t.cleanups)}
+        ${ne(t.cleanups)}
 
         <div class="${r.sectionHeader}">Scopes</div>
-        ${ne(t.scopes)}
+        ${ee(t.scopes)}
       </div>
-    `}catch{return o.html``}}function le(){try{return o.html`
+    `}catch{return i.html``}}function ce(){try{return i.html`
       <div class="${r.inspector}">
         <div class="${r.empty}">Select a component to inspect</div>
       </div>
-    `}catch{return o.html``}}function ae(t){try{const e=E(t),n=t.componentId,i=A(t),c=j(t);return o.html`
+    `}catch{return i.html``}}function le(t){try{const e=A(t),n=t.componentId,o=E(t),c=j(t);return i.html`
       <div class="${r.inspector}">
-        ${ie(t)}
+        ${oe(t)}
         <div class="${r.inspectorTitle}">
           <span>${e}</span>
           <span class="${r.instanceCount}">
-            #${n.toString().slice(2,6)} · depth ${i} · renders ${c}
+            #${n.toString().slice(2,6)} · depth ${o} · renders ${c}
           </span>
           <button
             class="${r.highlightBtn}"
@@ -133,9 +133,9 @@
           </button>
         </div>
 
-        ${Tt(t)} ${ce(t)}
+        ${Ct(t)} ${ie(t)}
       </div>
-    `}catch{return o.html``}}function xn(t,e,n,i){try{const{name:c,instances:l}=t;return o.html`
+    `}catch{return i.html``}}function vn(t,e,n,o){try{const{name:c,instances:l}=t;return i.html`
       <div class="${r.inspector}">
         <div class="${r.inspectorTitle}">
           <span>${c}</span>
@@ -145,15 +145,15 @@
         </div>
 
         <ul class="${r.instanceList}">
-          ${o.repeat(l,a=>a.componentId,a=>{const u=a.componentId,d=A(a),p=j(a),v=e===u;return o.html`
+          ${i.repeat(l,a=>a.componentId,a=>{const u=a.componentId,d=E(a),p=j(a),b=e===u;return i.html`
                 <li class="${r.instanceGroup}">
                   <div
-                    class="${r.instanceItem} ${v?on:""}"
+                    class="${r.instanceItem} ${b?rn:""}"
                     @click=${()=>{try{n(u)}catch{}}}
                   >
                     <span
-                      class="${r.instanceToggle} ${v?r.instanceToggleSelected:""}"
-                      >${v?"▼":"▶"}</span
+                      class="${r.instanceToggle} ${b?r.instanceToggleSelected:""}"
+                      >${b?"▼":"▶"}</span
                     >
                     <span class="${r.instanceId}"
                       >#${u.toString().slice(2,6)}</span
@@ -164,7 +164,7 @@
                     >
                     <button
                       class="${r.componentHighlightBtn}"
-                      @click=${m=>{try{m.stopPropagation(),i(a)}catch{}}}
+                      @click=${m=>{try{m.stopPropagation(),o(a)}catch{}}}
                       title="Highlight in page"
                     >
                       <svg
@@ -183,49 +183,49 @@
                       </svg>
                     </button>
                   </div>
-                  ${v?o.html`
-                        ${ie(a)} ${Tt(a)}
-                        ${ce(a)}
-                      `:o.nothing}
+                  ${b?i.html`
+                        ${oe(a)} ${Ct(a)}
+                        ${ie(a)}
+                      `:i.nothing}
                 </li>
               `})}
         </ul>
       </div>
-    `}catch{return o.html``}}function Mt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?ae(t.selectedComponent):le();const{selectedGroup:e,selectedInstanceId:n,onSelectInstance:i,onHighlight:c}=t;return e?e.instances.length===1?ae(e.instances[0]):xn(e,n,i,c):le()}catch{return o.html``}}const M=new Set;let W=null,G=null,U=null,Y=null,at=!1,st=!1;const dt=o.atom(0);dt.skipDevToolsLog=!0;function R(){try{dt.set(M.size)}catch{}}function X(t){st=!0;try{return t()}finally{st=!1}}function $n(){try{if(at)return;at=!0,W=window.setTimeout,G=window.setInterval,U=window.clearTimeout,Y=window.clearInterval;const t=W,e=G,n=U,i=Y;window.setTimeout=function(l,a,...u){let d;try{if(typeof l!="function")return d=t(l,a,...u),d;const p=l;d=t(function(...m){try{return M.delete(d)&&R(),p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=t(l,a,...u)}return d},window.setInterval=function(l,a,...u){let d;try{if(typeof l!="function")return d=e(l,a,...u),d;const p=l;d=e(function(...m){try{return p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=e(l,a,...u)}return d},window.clearTimeout=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}n(l)},window.clearInterval=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}i(l)}}catch{}}function _n(){try{if(!at)return;at=!1,W&&(window.setTimeout=W),G&&(window.setInterval=G),U&&(window.clearTimeout=U),Y&&(window.clearInterval=Y),W=null,G=null,U=null,Y=null,M.clear(),R()}catch{}}const It=new WeakMap;let wn=0;function Sn(t){return It.has(t)||It.set(t,`mdt-hl-${++wn}`),It.get(t)}function se(t,e,n){try{const i=n.get(e),c=i!==void 0&&i!==t;n.set(e,t);const l=Sn(e);return c&&X(()=>setTimeout(()=>{try{const a=document.getElementById(l);if(!a)return;a.classList.remove("mdt-highlight-flash"),a.offsetWidth,a.classList.add("mdt-highlight-flash"),setTimeout(()=>{try{a.classList.remove("mdt-highlight-flash")}catch{}},600)}catch{}},0)),o.html`<span id="${l}" class="mdt-highlight">${t}</span>`}catch{return o.html``}}const kn=new WeakMap;let Bt="";function Cn(t){try{let e=0;for(const n of t.instances){const i=j(n);i>e&&(e=i)}return e}catch{return 0}}function Lt(t){try{let e=1/0;for(const n of t.instances){const i=A(n);i<e&&(e=i)}return e===1/0?0:e}catch{return 0}}function de({groups:t,selectedViewFn:e,onSelectGroup:n,onHighlight:i,renderCallback:c}){try{const l=Bt.trim().toLowerCase(),u=[...l?t.filter(p=>p.name.toLowerCase().includes(l)):t].sort((p,v)=>{const m=Lt(p),x=Lt(v);return m-x||p.name.localeCompare(v.name)}),d=p=>{try{Bt=p.target.value,c()}catch{}};return o.html`
+    `}catch{return i.html``}}function Tt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?le(t.selectedComponent):ce();const{selectedGroup:e,selectedInstanceId:n,onSelectInstance:o,onHighlight:c}=t;return e?e.instances.length===1?le(e.instances[0]):vn(e,n,o,c):ce()}catch{return i.html``}}const M=new Set;let W=null,G=null,U=null,Y=null,at=!1,st=!1;const dt=i.atom(0);dt.skipDevToolsLog=!0;function R(){try{dt.set(M.size)}catch{}}function X(t){st=!0;try{return t()}finally{st=!1}}function xn(){try{if(at)return;at=!0,W=window.setTimeout,G=window.setInterval,U=window.clearTimeout,Y=window.clearInterval;const t=W,e=G,n=U,o=Y;window.setTimeout=function(l,a,...u){let d;try{if(typeof l!="function")return d=t(l,a,...u),d;const p=l;d=t(function(...m){try{return M.delete(d)&&R(),p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=t(l,a,...u)}return d},window.setInterval=function(l,a,...u){let d;try{if(typeof l!="function")return d=e(l,a,...u),d;const p=l;d=e(function(...m){try{return p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=e(l,a,...u)}return d},window.clearTimeout=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}n(l)},window.clearInterval=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}o(l)}}catch{}}function $n(){try{if(!at)return;at=!1,W&&(window.setTimeout=W),G&&(window.setInterval=G),U&&(window.clearTimeout=U),Y&&(window.clearInterval=Y),W=null,G=null,U=null,Y=null,M.clear(),R()}catch{}}const Mt=new WeakMap;let _n=0;function wn(t){return Mt.has(t)||Mt.set(t,`mdt-hl-${++_n}`),Mt.get(t)}function ae(t,e,n){try{const o=n.get(e),c=o!==void 0&&o!==t;n.set(e,t);const l=wn(e);return c&&X(()=>setTimeout(()=>{try{const a=document.getElementById(l);if(!a)return;a.classList.remove("mdt-highlight-flash"),a.offsetWidth,a.classList.add("mdt-highlight-flash"),setTimeout(()=>{try{a.classList.remove("mdt-highlight-flash")}catch{}},600)}catch{}},0)),i.html`<span id="${l}" class="mdt-highlight">${t}</span>`}catch{return i.html``}}const Sn=new WeakMap;let It="";function kn(t){try{let e=0;for(const n of t.instances){const o=j(n);o>e&&(e=o)}return e}catch{return 0}}function Bt(t){try{let e=1/0;for(const n of t.instances){const o=E(n);o<e&&(e=o)}return e===1/0?0:e}catch{return 0}}function se({groups:t,selectedViewFn:e,onSelectGroup:n,onHighlight:o,renderCallback:c}){try{const l=It.trim().toLowerCase(),u=[...l?t.filter(p=>p.name.toLowerCase().includes(l)):t].sort((p,b)=>{const m=Bt(p),v=Bt(b);return m-v||p.name.localeCompare(b.name)}),d=p=>{try{It=p.target.value,c()}catch{}};return i.html`
       <div class="${r.content}">
         <div style="padding: 0 0 6px 0; flex-shrink: 0;">
           <input
             class="${r.componentSearch}"
             type="text"
             placeholder="Search components…"
-            .value=${Bt}
+            .value=${It}
             @input=${d}
           />
         </div>
-        ${u.length===0?o.html`<div class="${r.empty}">
+        ${u.length===0?i.html`<div class="${r.empty}">
               ${l?"No matching components":"No components mounted"}
-            </div>`:o.html`
+            </div>`:i.html`
               <ul class="${r.componentList}">
-                ${o.repeat(u,p=>p.viewFn,p=>{const v=Cn(p),m=e===p.viewFn,x=Lt(p),_t=p.instances.length,nn=p.instances[0];return o.html`
+                ${i.repeat(u,p=>p.viewFn,p=>{const b=kn(p),m=e===p.viewFn,v=Bt(p),$t=p.instances.length,en=p.instances[0];return i.html`
                       <li
-                        class="${r.componentItem} ${m?Gt:""}"
+                        class="${r.componentItem} ${m?Wt:""}"
                         @click=${()=>{try{n(p.viewFn)}catch{}}}
                       >
-                        ${se(v,nn,kn)}
+                        ${ae(b,en,Sn)}
                         <span class="${r.componentName}"
                           >${p.name}</span
                         >
-                        ${_t>1?o.html`<span
+                        ${$t>1?i.html`<span
                               class="${r.componentCount} ${m?r.componentCountSelected:""}"
-                              >×${_t}</span
+                              >×${$t}</span
                             >`:""}
                         <span
                           class="${r.componentBadge} ${m?r.componentBadgeSelected:""}"
-                          >depth ${x}</span
+                          >depth ${v}</span
                         >
                         <button
                           class="${r.componentHighlightBtn} ${m?r.componentHighlightBtnSelected:""}"
-                          @click=${rn=>{try{rn.stopPropagation(),i(nn)}catch{}}}
+                          @click=${nn=>{try{nn.stopPropagation(),o(en)}catch{}}}
                           title="Highlight in page"
                         >
                           <svg
@@ -250,23 +250,23 @@
               </ul>
             `}
       </div>
-    `}catch{return o.html``}}const Tn=new WeakMap,At=new WeakSet;function Mn(t){try{const e=new Set(t),n=new Map;for(const l of t)n.set(l,{component:l,name:E(l),depth:A(l),id:l.componentId,children:[]});const i=[];for(const l of t){const a=n.get(l),u=St(l);if(u&&e.has(u)){const d=n.get(u);if(d){d.children.push(a);continue}}i.push(a)}const c=l=>{try{l.sort((a,u)=>a.depth-u.depth||a.name.localeCompare(u.name));for(const a of l)c(a.children)}catch{}};return c(i),i}catch{return[]}}function ue(t,e,n,i,c){try{const l=t.children.length>0,a=At.has(t.component),u=j(t.component),d=e===t.id,p=t.depth*16,v=x=>{try{x.stopPropagation(),a?At.delete(t.component):At.add(t.component),c()}catch{}},m=()=>{try{n(t.id)}catch{}};return o.html`
+    `}catch{return i.html``}}const Cn=new WeakMap,Lt=new WeakSet;function Tn(t){try{const e=new Set(t),n=new Map;for(const l of t)n.set(l,{component:l,name:A(l),depth:E(l),id:l.componentId,children:[]});const o=[];for(const l of t){const a=n.get(l),u=wt(l);if(u&&e.has(u)){const d=n.get(u);if(d){d.children.push(a);continue}}o.push(a)}const c=l=>{try{l.sort((a,u)=>a.depth-u.depth||a.name.localeCompare(u.name));for(const a of l)c(a.children)}catch{}};return c(o),o}catch{return[]}}function de(t,e,n,o,c){try{const l=t.children.length>0,a=Lt.has(t.component),u=j(t.component),d=e===t.id,p=t.depth*16,b=v=>{try{v.stopPropagation(),a?Lt.delete(t.component):Lt.add(t.component),c()}catch{}},m=()=>{try{n(t.id)}catch{}};return i.html`
       <li
-        class="${r.componentItem} ${d?Gt:""}"
+        class="${r.componentItem} ${d?Wt:""}"
         style="margin-left: ${p}px;"
         @click=${m}
       >
-        ${l?o.html`<span class="${r.treeToggle}" @click=${v}
+        ${l?i.html`<span class="${r.treeToggle}" @click=${b}
               >${a?"▶":"▼"}</span
-            >`:o.html`<span class="${r.treeLeaf}">·</span>`}
-        ${se(u,t.component,Tn)}
+            >`:i.html`<span class="${r.treeLeaf}">·</span>`}
+        ${ae(u,t.component,Cn)}
         <span class="${r.componentName}">${t.name}</span>
         <span class="${r.componentBadge}"
           >#${t.id.toString().slice(2,6)}</span
         >
         <button
           class="${r.componentHighlightBtn}"
-          @click=${x=>{try{x.stopPropagation(),i(t.component)}catch{}}}
+          @click=${v=>{try{v.stopPropagation(),o(t.component)}catch{}}}
           title="Highlight in page"
         >
           <svg
@@ -287,16 +287,16 @@
           </svg>
         </button>
       </li>
-      ${l&&!a?o.repeat(t.children,x=>x.component,x=>ue(x,e,n,i,c)):o.nothing}
-    `}catch{return o.html``}}function pe({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:i}){try{const c=kt(),l=Mn(c);return o.html`
+      ${l&&!a?i.repeat(t.children,v=>v.component,v=>de(v,e,n,o,c)):i.nothing}
+    `}catch{return i.html``}}function ue({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:o}){try{const c=St(),l=Tn(c);return i.html`
       <div class="${r.content}">
-        ${l.length===0?o.html`<div class="${r.empty}">No components mounted</div>`:o.html`
+        ${l.length===0?i.html`<div class="${r.empty}">No components mounted</div>`:i.html`
               <ul class="${r.componentList}">
-                ${o.repeat(l,a=>a.component,a=>ue(a,t,e,n,i))}
+                ${i.repeat(l,a=>a.component,a=>de(a,t,e,n,o))}
               </ul>
             `}
       </div>
-    `}catch{return o.html``}}const fe=()=>(o.effect(()=>{try{console.log(dt())}catch{}}),()=>{try{return o.html`Active Timers (${dt()})`}catch{return o.html``}});fe.skipDevToolsRender=!0;function he({activeTab:t,onTabChange:e,onMinimise:n,onClose:i,unreadLogCount:c}){try{return o.html`
+    `}catch{return i.html``}}const pe=()=>(i.effect(()=>{try{console.log(dt())}catch{}}),()=>{try{return i.html`Active Timers (${dt()})`}catch{return i.html``}});pe.skipDevToolsRender=!0;function fe({activeTab:t,onTabChange:e,onMinimise:n,onClose:o,unreadLogCount:c}){try{return i.html`
       <div class="${r.header}">
         <div class="${r.headerLeft}">
           <div class="${r.title}">🔧 Mates DevTools</div>
@@ -312,7 +312,7 @@
               @click=${()=>{try{e("logs")}catch{}}}
             >
               Logs
-              ${c>0?o.html`<span class="${r.tabBadge}"
+              ${c>0?i.html`<span class="${r.tabBadge}"
                     >${c>99?"99+":c}</span
                   >`:""}
             </button>
@@ -325,7 +325,7 @@
           </nav>
         </div>
         <div>
-          <button style="margin-left: 10px">${o.x(fe)}</button>
+          <button style="margin-left: 10px">${i.x(pe)}</button>
         </div>
         <div class="${r.controls}">
           <button
@@ -337,41 +337,41 @@
           </button>
           <button
             class="${r.button}"
-            @click=${()=>{try{i()}catch{}}}
+            @click=${()=>{try{o()}catch{}}}
             title="Close"
           >
             ×
           </button>
         </div>
       </div>
-    `}catch{return o.html``}}let ut=null;function ge(t){try{return ut=t,()=>{ut===t&&(ut=null)}}catch{}return()=>{}}let $=!1;function me(){$=!0}function be(){$=!1}function In(){return $}const Bn=100,P=[];let ye=1,pt=0;const ve=new Set(["devtools","DOMReady","Paint"]);function k(t,e,n){try{P.length>=Bn&&P.shift(),P.push({id:ye++,ts:performance.now(),category:t,label:e,detail:n}),pt++;try{ut?.()}catch{}}catch{}}function Et(t){try{if(t===void 0)return"undefined";if(t===null)return"null";if(typeof t=="function")return"ƒ()";try{const e=JSON.stringify(t);return e.length>120?e.slice(0,117)+"...":e}catch{return String(t)}}catch{}return""}function xe(){return P}function Ln(){return P.length}function $e(){return pt}function _e(){try{pt=0}catch{}}function we(){try{P.length=0,pt=0,ye=1}catch{}}function Se(t){try{if(!$)return;k("mount",t,"mounted")}catch{}}function ke(t,e){try{if(!$)return;k("update",t,`updated (${e.toFixed(2)}ms)`)}catch{}}function Ce(t){try{if(!$)return;k("cleanup",t,"cleaned up")}catch{}}function Te(t,e){try{if(!$)return;k("setter",t,Et(e))}catch{}}function Me(t){try{if(!$)return;k("action",t)}catch{}}function Ie(t,e){try{if(!$||ve.has(t))return;k("event",t,e!==void 0?Et(e):void 0)}catch{}}const Rt=80,Be=120;function z(t,e){try{return t.length>e?t.slice(0,e-1)+"…":t}catch{}return""}function An(t,e,n){try{if(!$)return;const i=n?`pending · ${z(n,50)}`:"pending";k("fetch",z(`${t} ${e}`,Rt),i)}catch{}}function Le(t,e,n,i){try{if(!$)return;k("fetch",z(`${t} ${e}`,Rt),z(`${n} · ${i.toFixed(0)}ms`,Be))}catch{}}function Ae(t,e,n,i){try{if(!$)return;k("fetch",z(`${t} ${e}`,Rt),z(`error · ${i.toFixed(0)}ms · ${n}`,Be))}catch{}}function Ee(t,e){try{if(!$||ve.has(t))return;k("event",`${t} (cleanup)`,e!==void 0?Et(e):void 0)}catch{}}const H={mount:"#66bb6a",update:"#42a5f5",cleanup:"#ef5350",setter:"#4fc3f7",action:"#81c784",event:"#ffb74d",fetch:"#ce93d8"},En={mount:"MNT",update:"UPD",cleanup:"CLN",setter:"SET",action:"ACT",event:"EVT",fetch:"NET"};let w="all";const Rn={all:null,lifecycle:["mount","update","cleanup"],logs:["setter","action","event"],network:["fetch"]};function Pn(t){try{const e=t/1e3|0,n=t%1e3,i=e/60|0,c=e%60;return`${String(i).padStart(2,"0")}:${String(c).padStart(2,"0")}.${String(n|0).padStart(3,"0")}`}catch{return""}}function zn(){try{const t=xe(),e=Rn[w];if(!e)return t;const n=new Set(e);return t.filter(i=>n.has(i.category))}catch{return[]}}function Re({onClear:t,renderCallback:e}){try{_e();const n=zn();return o.html`
+    `}catch{return i.html``}}let ut=null;function he(t){try{return ut=t,()=>{ut===t&&(ut=null)}}catch{}return()=>{}}let x=!1;function ge(){x=!0}function me(){x=!1}function Mn(){return x}const In=100,P=[];let ye=1,pt=0;const be=new Set(["devtools","DOMReady","Paint"]);function k(t,e,n){try{P.length>=In&&P.shift(),P.push({id:ye++,ts:performance.now(),category:t,label:e,detail:n}),pt++;try{ut?.()}catch{}}catch{}}function Et(t){try{if(t===void 0)return"undefined";if(t===null)return"null";if(typeof t=="function")return"ƒ()";try{const e=JSON.stringify(t);return e.length>120?e.slice(0,117)+"...":e}catch{return String(t)}}catch{}return""}function ve(){return P}function Bn(){return P.length}function xe(){return pt}function $e(){try{pt=0}catch{}}function _e(){try{P.length=0,pt=0,ye=1}catch{}}function we(t){try{if(!x)return;k("mount",t,"mounted")}catch{}}function Se(t,e){try{if(!x)return;k("update",t,`updated (${e.toFixed(2)}ms)`)}catch{}}function ke(t){try{if(!x)return;k("cleanup",t,"cleaned up")}catch{}}function Ce(t,e){try{if(!x)return;k("setter",t,Et(e))}catch{}}function Te(t){try{if(!x)return;k("action",t)}catch{}}function Me(t,e){try{if(!x||be.has(t))return;k("event",t,e!==void 0?Et(e):void 0)}catch{}}const At=80,Ie=120;function z(t,e){try{return t.length>e?t.slice(0,e-1)+"…":t}catch{}return""}function Ln(t,e,n){try{if(!x)return;const o=n?`pending · ${z(n,50)}`:"pending";k("fetch",z(`${t} ${e}`,At),o)}catch{}}function Be(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`${n} · ${o.toFixed(0)}ms`,Ie))}catch{}}function Le(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`error · ${o.toFixed(0)}ms · ${n}`,Ie))}catch{}}function Ee(t,e){try{if(!x||be.has(t))return;k("event",`${t} (cleanup)`,e!==void 0?Et(e):void 0)}catch{}}const H={mount:"#66bb6a",update:"#42a5f5",cleanup:"#ef5350",setter:"#4fc3f7",action:"#81c784",event:"#ffb74d",fetch:"#ce93d8"},En={mount:"MNT",update:"UPD",cleanup:"CLN",setter:"SET",action:"ACT",event:"EVT",fetch:"NET"};let _="all";const An={all:null,lifecycle:["mount","update","cleanup"],logs:["setter","action","event"],network:["fetch"]};function Rn(t){try{const e=t/1e3|0,n=t%1e3,o=e/60|0,c=e%60;return`${String(o).padStart(2,"0")}:${String(c).padStart(2,"0")}.${String(n|0).padStart(3,"0")}`}catch{return""}}function Pn(){try{const t=ve(),e=An[_];if(!e)return t;const n=new Set(e);return t.filter(o=>n.has(o.category))}catch{return[]}}function Ae({onClear:t,renderCallback:e}){try{$e();const n=Pn();return i.html`
       <div class="${r.logsPanel}">
         <div class="${r.logsToolbar}">
           <div class="${r.logsFilterRow}">
             <button
-              class="${r.logsFilterBtn} ${w==="all"?"active":""}"
-              @click=${()=>{try{w="all",e()}catch{}}}
+              class="${r.logsFilterBtn} ${_==="all"?"active":""}"
+              @click=${()=>{try{_="all",e()}catch{}}}
             >
               All
             </button>
             <button
-              class="${r.logsFilterBtn} ${w==="lifecycle"?"active":""}"
+              class="${r.logsFilterBtn} ${_==="lifecycle"?"active":""}"
               style="--mdt-filter-color: ${H.mount}"
-              @click=${()=>{try{w=w==="lifecycle"?"all":"lifecycle",e()}catch{}}}
+              @click=${()=>{try{_=_==="lifecycle"?"all":"lifecycle",e()}catch{}}}
             >
               Mounts / Updates
             </button>
             <button
-              class="${r.logsFilterBtn} ${w==="logs"?"active":""}"
+              class="${r.logsFilterBtn} ${_==="logs"?"active":""}"
               style="--mdt-filter-color: ${H.setter}"
-              @click=${()=>{try{w=w==="logs"?"all":"logs",e()}catch{}}}
+              @click=${()=>{try{_=_==="logs"?"all":"logs",e()}catch{}}}
             >
               Logs
             </button>
             <button
-              class="${r.logsFilterBtn} ${w==="network"?"active":""}"
+              class="${r.logsFilterBtn} ${_==="network"?"active":""}"
               style="--mdt-filter-color: ${H.fetch}"
-              @click=${()=>{try{w=w==="network"?"all":"network",e()}catch{}}}
+              @click=${()=>{try{_=_==="network"?"all":"network",e()}catch{}}}
             >
               Network
             </button>
@@ -380,7 +380,7 @@
             <span class="${r.logsCount}">${n.length} entries</span>
             <button
               class="${r.button}"
-              @click=${()=>{try{we(),t()}catch{}}}
+              @click=${()=>{try{_e(),t()}catch{}}}
               title="Clear logs"
             >
               🗑
@@ -389,27 +389,27 @@
         </div>
 
         <div class="${r.logsContainer}">
-          ${n.length===0?o.html`<div class="${r.empty}">
+          ${n.length===0?i.html`<div class="${r.empty}">
                 No logs yet. Interact with the app to see activity.
-              </div>`:o.repeat(n,i=>i.id,i=>o.html`
+              </div>`:i.repeat(n,o=>o.id,o=>i.html`
                   <div class="${r.logEntry}">
-                    <span class="${r.logTs}">${Pn(i.ts)}</span>
+                    <span class="${r.logTs}">${Rn(o.ts)}</span>
                     <span
                       class="${r.logBadge}"
-                      style="background: ${H[i.category]}22; color: ${H[i.category]}; border-color: ${H[i.category]}44;"
-                      >${En[i.category]}</span
+                      style="background: ${H[o.category]}22; color: ${H[o.category]}; border-color: ${H[o.category]}44;"
+                      >${En[o.category]}</span
                     >
-                    <span class="${r.logLabel}">${i.label}</span>
-                    ${i.detail?o.html`<span class="${r.logDetail}"
-                          >${i.detail}</span
-                        >`:o.nothing}
+                    <span class="${r.logLabel}">${o.label}</span>
+                    ${o.detail?i.html`<span class="${r.logDetail}"
+                          >${o.detail}</span
+                        >`:i.nothing}
                   </div>
                 `)}
         </div>
       </div>
-    `}catch{return o.html``}}let q=!1;function Pe(){try{q=!0}catch{}}function ze(){try{q=!1}catch{}}function Hn(){return q}const Fn=100,J=new Map;let He=1,ft=null;function Fe(t){try{return ft=t,()=>{try{ft===t&&(ft=null)}catch{}}}catch{}return()=>{}}function Pt(t,e,n){try{if(!q)return;const i={id:He++,ts:performance.now(),durationMs:n,componentName:t,instanceId:e};let c=J.get(t);c||(c=[],J.set(t,c)),c.length>=Fn&&c.shift(),c.push(i);try{ft?.()}catch{}}catch{}}function Dn(t,e){try{if(!q)return De;const n=performance.now();return()=>Pt(t,e,performance.now()-n)}catch{}return De}function De(){}function Oe(){try{const t=[];for(const[e,n]of J){if(n.length===0)continue;let i=0,c=0,l=1/0;for(const a of n)i+=a.durationMs,a.durationMs>c&&(c=a.durationMs),a.durationMs<l&&(l=a.durationMs);t.push({name:e,renderCount:n.length,avgMs:i/n.length,maxMs:c,minMs:l,lastMs:n[n.length-1].durationMs,totalMs:i,timings:n})}return t.sort((e,n)=>n.totalMs-e.totalMs),t}catch{}return[]}function Ve(){try{const t=[];for(const e of J.values())for(let n=0;n<e.length;n++)t.push(e[n]);return t}catch{}return[]}function On(t=50){try{const e=Ve();return e.sort((n,i)=>i.ts-n.ts),e.length>t?e.slice(0,t):e}catch{}return[]}function Ne(t=20){try{const e=Ve();return e.sort((n,i)=>i.durationMs-n.durationMs),e.length>t?e.slice(0,t):e}catch{}return[]}function je(){try{J.clear(),He=1}catch{}}o.atom(0);function K(t){try{return t<.01?"<0.01ms":t<1?`${t.toFixed(2)}ms`:t<10?`${t.toFixed(1)}ms`:`${t.toFixed(0)}ms`}catch{return""}}function We(t,e){try{return e<=0?0:Math.max(2,Math.min(100,t/e*100))}catch{return 0}}function Ge(t){try{return t<16?"#66bb6a":t<=20?"#ffb74d":"#ef5350"}catch{return""}}let Q="summary";function Vn(t){try{if(t.length===0)return o.html`<div class="${r.empty}">
+    `}catch{return i.html``}}let q=!1;function Re(){try{q=!0}catch{}}function Pe(){try{q=!1}catch{}}function zn(){return q}const Hn=100,J=new Map;let ze=1,ft=null;function He(t){try{return ft=t,()=>{try{ft===t&&(ft=null)}catch{}}}catch{}return()=>{}}function Rt(t,e,n){try{if(!q)return;const o={id:ze++,ts:performance.now(),durationMs:n,componentName:t,instanceId:e};let c=J.get(t);c||(c=[],J.set(t,c)),c.length>=Hn&&c.shift(),c.push(o);try{ft?.()}catch{}}catch{}}function Fn(t,e){try{if(!q)return Fe;const n=performance.now();return()=>Rt(t,e,performance.now()-n)}catch{}return Fe}function Fe(){}function De(){try{const t=[];for(const[e,n]of J){if(n.length===0)continue;let o=0,c=0,l=1/0;for(const a of n)o+=a.durationMs,a.durationMs>c&&(c=a.durationMs),a.durationMs<l&&(l=a.durationMs);t.push({name:e,renderCount:n.length,avgMs:o/n.length,maxMs:c,minMs:l,lastMs:n[n.length-1].durationMs,totalMs:o,timings:n})}return t.sort((e,n)=>n.totalMs-e.totalMs),t}catch{}return[]}function Oe(){try{const t=[];for(const e of J.values())for(let n=0;n<e.length;n++)t.push(e[n]);return t}catch{}return[]}function Dn(t=50){try{const e=Oe();return e.sort((n,o)=>o.ts-n.ts),e.length>t?e.slice(0,t):e}catch{}return[]}function Ve(t=20){try{const e=Oe();return e.sort((n,o)=>o.durationMs-n.durationMs),e.length>t?e.slice(0,t):e}catch{}return[]}function Ne(){try{J.clear(),ze=1}catch{}}i.atom(0);function K(t){try{return t<.01?"<0.01ms":t<1?`${t.toFixed(2)}ms`:t<10?`${t.toFixed(1)}ms`:`${t.toFixed(0)}ms`}catch{return""}}function je(t,e){try{return e<=0?0:Math.max(2,Math.min(100,t/e*100))}catch{return 0}}function We(t){try{return t<16?"#66bb6a":t<=20?"#ffb74d":"#ef5350"}catch{return""}}let Q="summary";function On(t){try{if(t.length===0)return i.html`<div class="${r.empty}">
         No render data yet. Interact with the app to see component performance.
-      </div>`;const e=Math.max(...t.map(n=>n.totalMs));return o.html`
+      </div>`;const e=Math.max(...t.map(n=>n.totalMs));return i.html`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -422,7 +422,7 @@
           </tr>
         </thead>
         <tbody>
-          ${o.repeat(t,n=>n.name,n=>{const i=Ge(n.lastMs);return o.html`
+          ${i.repeat(t,n=>n.name,n=>{const o=We(n.lastMs);return i.html`
                 <tr class="${r.perfRow}">
                   <td class="${r.perfCell} ${r.perfName}">
                     ${n.name}
@@ -443,7 +443,7 @@
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${We(n.totalMs,e)}%; background: ${i};"
+                        style="width: ${je(n.totalMs,e)}%; background: ${o};"
                       ></div>
                       <span class="${r.perfBarLabel}"
                         >${K(n.totalMs)}</span
@@ -454,9 +454,9 @@
               `})}
         </tbody>
       </table>
-    `}catch{return o.html``}}function Nn(t,e){try{if(t.length===0)return o.html`<div class="${r.empty}">
+    `}catch{return i.html``}}function Vn(t,e){try{if(t.length===0)return i.html`<div class="${r.empty}">
         No render data yet. Interact with the app to see slow renders.
-      </div>`;const n=Math.max(...t.map(c=>c.durationMs)),i=!!e;return o.html`
+      </div>`;const n=Math.max(...t.map(c=>c.durationMs)),o=!!e;return i.html`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -466,11 +466,11 @@
           </tr>
         </thead>
         <tbody>
-          ${o.repeat(t,c=>c.id,c=>{const l=Ge(c.durationMs),a=i?()=>{try{e(c.instanceId)}catch{}}:void 0;return o.html`
+          ${i.repeat(t,c=>c.id,c=>{const l=We(c.durationMs),a=o?()=>{try{e(c.instanceId)}catch{}}:void 0;return i.html`
                 <tr
-                  class="${r.perfRow} ${i?r.perfRowClickable:""}"
+                  class="${r.perfRow} ${o?r.perfRowClickable:""}"
                   @click=${a}
-                  title=${i?`Go to ${c.componentName} in Components tab`:""}
+                  title=${o?`Go to ${c.componentName} in Components tab`:""}
                 >
                   <td class="${r.perfCell} ${r.perfName}">
                     ${c.componentName}
@@ -482,7 +482,7 @@
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${We(c.durationMs,n)}%; background: ${l};"
+                        style="width: ${je(c.durationMs,n)}%; background: ${l};"
                       ></div>
                     </div>
                   </td>
@@ -490,7 +490,7 @@
               `})}
         </tbody>
       </table>
-    `}catch{return o.html``}}function Ue({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const i=Oe(),c=Ne(30);return o.html`
+    `}catch{return i.html``}}function Ge({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const o=De(),c=Ve(30);return i.html`
       <div class="${r.perfPanel}">
         <div class="${r.perfToolbar}">
           <div class="${r.perfTabs}">
@@ -510,7 +510,7 @@
           <div class="${r.perfActions}">
             <button
               class="${r.button}"
-              @click=${()=>{try{je(),t()}catch{}}}
+              @click=${()=>{try{Ne(),t()}catch{}}}
               title="Clear performance data"
             >
               🗑
@@ -519,10 +519,10 @@
         </div>
 
         <div class="${r.perfContent}">
-          ${Q==="summary"?Vn(i):Nn(c,n??null)}
+          ${Q==="summary"?On(o):Vn(c,n??null)}
         </div>
       </div>
-    `}catch{return o.html``}}let I=!1,C=!1,Z="components",B="list",_=null,S=null,b=null,F=[],f=null,y=null,ht=null,D=0;const jn=150,Wn=.8,Gn=.5;let L=null;function zt(){try{const t=document.documentElement;L===null&&(L=parseFloat(getComputedStyle(t).paddingBottom)||0),t.style.paddingBottom=`${L+D}px`}catch{}}function Ht(){try{if(L===null)return;document.documentElement.style.paddingBottom=L===0?"":`${L}px`,L=null}catch{}}let Ft=!1,Ye=0,Xe=0,gt=!1,tt=null,et=null,nt=null,O=null,V=null;function Un(){try{V!==null&&(clearTimeout(V),V=null)}catch{}}function mt(){try{Un(),O&&(O.remove(),O=null)}catch{}}function bt(t){try{let e=function(){try{const l=document.createElement("div");l.className=r.domHighlight,document.body.appendChild(l),O=l;const a=n.getBoundingClientRect();c?(l.style.position="fixed",l.style.top=`${a.top}px`,l.style.left=`${a.left}px`):(l.style.top=`${a.top+window.scrollY}px`,l.style.left=`${a.left+window.scrollX}px`),l.style.width=`${a.width}px`,l.style.height=`${a.height}px`,V=X(()=>setTimeout(()=>{try{O===l&&(l.classList.add("fade-out"),V=X(()=>setTimeout(()=>{try{O===l&&mt()}catch{}},600)))}catch{}},1500))}catch{}};mt();const n=t.firstElementChild??t,i=getComputedStyle(n).position,c=i==="fixed"||i==="sticky";if(c)e();else{const l=n.getBoundingClientRect(),a=l.top>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight);a||n.scrollIntoView({behavior:"smooth",block:"center"}),V=X(()=>setTimeout(e,a?0:400))}}catch{}}function qe(){try{if(_===null)return null;for(const t of F)for(const e of t.instances)if(e.componentId===_)return e;return null}catch{}return null}function Dt(){try{return S===null?null:F.find(t=>t.viewFn===S)??null}catch{}return null}function Yn(){try{if(b===null)return null;const t=Dt();return t?t.instances.find(e=>e.componentId===b)??null:null}catch{}return null}function yt(){try{F=qt(),_!==null&&!qe()&&(_=null),S!==null&&!Dt()?(S=null,b=null):b!==null&&!Yn()&&(b=null)}catch{}}function vt(){try{return I&&!C}catch{}return!1}function rt(){try{return y?.querySelector(`.${r.panel}`)??null}catch{}return null}function Xn(t){try{_=_===t?null:t,g()}catch{}}function qn(t){try{S===t?(S=null,b=null):(S=t,b=null),g()}catch{}}function Jn(t){try{b=b===t?null:t,g()}catch{}}function Kn(t){try{_=t,Z="components",yt(),S=null,b=null;for(const e of F){for(const n of e.instances)if(n.componentId===t){S=e.viewFn,b=t;break}if(S)break}g()}catch{}}function Qn(t){try{Z=t,g()}catch{}}function Zn(){try{if(!I||C)return;C=!0,rt()?.classList.remove(r.panelVisible),f&&(f.style.display=""),Ht()}catch{}}function tr(){try{if(!C)return;C=!1,f&&(f.style.display="none"),yt(),g(),zt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function er(){try{I=!1,C=!1,_=null,Je(),mt(),Ht();const t=rt();if(t){t.classList.remove(r.panelVisible);let e=!1;const n=()=>{try{if(e)return;e=!0,t.removeEventListener("transitionend",n),Vt()}catch{}};t.addEventListener("transitionend",n,{once:!0}),X(()=>setTimeout(n,350))}else Vt();f&&(f.style.display="")}catch{}}function nr(){try{if(I)return;I=!0,C=!1,f&&(f.style.display="none"),D=Math.round(window.innerHeight*Gn),rr(),sr(),yt(),g(),zt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function rr(){try{Pe(),tt||(tt=ge(()=>{try{vt()&&g()}catch{}})),et||(et=Fe(()=>{try{vt()&&g()}catch{}}))}catch{}}function Je(){try{ze(),tt&&(tt(),tt=null),et&&(et(),et=null)}catch{}}const Ot="mates-devtools-vars";function or(){try{if(document.getElementById(Ot))return;const t=document.createElement("style");t.id=Ot,t.textContent=`
+    `}catch{return i.html``}}let I=!1,C=!1,Z="components",B="list",$=null,w=null,y=null,F=[],f=null,S=null,D=0;const Nn=150,jn=.8,Wn=.5;let L=null;function Pt(){try{const t=document.documentElement;L===null&&(L=parseFloat(getComputedStyle(t).paddingBottom)||0),t.style.paddingBottom=`${L+D}px`}catch{}}function zt(){try{if(L===null)return;document.documentElement.style.paddingBottom=L===0?"":`${L}px`,L=null}catch{}}let Ht=!1,Ue=0,Ye=0,ht=!1,tt=null,et=null,nt=null,O=null,V=null;function Gn(){try{V!==null&&(clearTimeout(V),V=null)}catch{}}function gt(){try{Gn(),O&&(O.remove(),O=null)}catch{}}function mt(t){try{let e=function(){try{const l=document.createElement("div");l.className=r.domHighlight,document.body.appendChild(l),O=l;const a=n.getBoundingClientRect();c?(l.style.position="fixed",l.style.top=`${a.top}px`,l.style.left=`${a.left}px`):(l.style.top=`${a.top+window.scrollY}px`,l.style.left=`${a.left+window.scrollX}px`),l.style.width=`${a.width}px`,l.style.height=`${a.height}px`,V=X(()=>setTimeout(()=>{try{O===l&&(l.classList.add("fade-out"),V=X(()=>setTimeout(()=>{try{O===l&&gt()}catch{}},600)))}catch{}},1500))}catch{}};gt();const n=t.firstElementChild??t,o=getComputedStyle(n).position,c=o==="fixed"||o==="sticky";if(c)e();else{const l=n.getBoundingClientRect(),a=l.top>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight);a||n.scrollIntoView({behavior:"smooth",block:"center"}),V=X(()=>setTimeout(e,a?0:400))}}catch{}}function Xe(){try{if($===null)return null;for(const t of F)for(const e of t.instances)if(e.componentId===$)return e;return null}catch{}return null}function Ft(){try{return w===null?null:F.find(t=>t.viewFn===w)??null}catch{}return null}function Un(){try{if(y===null)return null;const t=Ft();return t?t.instances.find(e=>e.componentId===y)??null:null}catch{}return null}function yt(){try{F=Xt(),$!==null&&!Xe()&&($=null),w!==null&&!Ft()?(w=null,y=null):y!==null&&!Un()&&(y=null)}catch{}}function bt(){try{return I&&!C}catch{}return!1}function rt(){try{return S?.querySelector(`.${r.panel}`)??null}catch{}return null}function Yn(t){try{$=$===t?null:t,g()}catch{}}function Xn(t){try{w===t?(w=null,y=null):(w=t,y=null),g()}catch{}}function qn(t){try{y=y===t?null:t,g()}catch{}}function Jn(t){try{$=t,Z="components",yt(),w=null,y=null;for(const e of F){for(const n of e.instances)if(n.componentId===t){w=e.viewFn,y=t;break}if(w)break}g()}catch{}}function Kn(t){try{Z=t,g()}catch{}}function Qn(){try{if(!I||C)return;C=!0,rt()?.classList.remove(r.panelVisible),f&&(f.style.display=""),zt()}catch{}}function Zn(){try{if(!C)return;C=!1,f&&(f.style.display="none"),yt(),g(),Pt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function tr(){try{I=!1,C=!1,$=null,qe(),gt(),zt();const t=rt();if(t){t.classList.remove(r.panelVisible);let e=!1;const n=()=>{try{if(e)return;e=!0,t.removeEventListener("transitionend",n),Ot()}catch{}};t.addEventListener("transitionend",n,{once:!0}),X(()=>setTimeout(n,350))}else Ot();f&&(f.style.display="")}catch{}}function er(){try{if(I)return;I=!0,C=!1,f&&(f.style.display="none"),D=Math.round(window.innerHeight*Wn),nr(),ir(),yt(),g(),Pt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function nr(){try{Re(),tt||(tt=he(()=>{try{bt()&&g()}catch{}})),et||(et=He(()=>{try{bt()&&g()}catch{}}))}catch{}}function qe(){try{Pe(),tt&&(tt(),tt=null),et&&(et(),et=null)}catch{}}const Dt="mates-devtools-vars";function rr(){try{if(document.getElementById(Dt))return;const t=document.createElement("style");t.id=Dt,t.textContent=`
     #mates-devtools {
       --dt-bg:           #1a1a1a;
       --dt-bg-2:         #222222;
@@ -554,42 +554,8 @@
       --dt-flash-bg:     rgba(0,180,100,0.45);
     }
 
-    @media (prefers-color-scheme: light) {
-      #mates-devtools,
-      #mates-devtools-fab {
-        --dt-bg:           #f5f5f5;
-        --dt-bg-2:         #ebebeb;
-        --dt-bg-3:         #e0e0e0;
-        --dt-bg-input:     #ffffff;
-        --dt-bg-hover:     #e8e8e8;
-        --dt-bg-selected:  #dbeafe;
-        --dt-bg-active:    rgba(59,130,246,0.12);
-        --dt-border:       #cccccc;
-        --dt-border-2:     #d4d4d4;
-        --dt-border-3:     #e4e4e4;
-        --dt-border-selected: #3b82f6;
-        --dt-text:         #333333;
-        --dt-text-bright:  #111111;
-        --dt-text-muted:   #666666;
-        --dt-text-dim:     #888888;
-        --dt-text-dimmer:  #999999;
-        --dt-text-selected: #1d4ed8;
-        --dt-accent:       #0077e6;
-        --dt-accent-2:     #3b82f6;
-        --dt-scrollbar:    #bbbbbb;
-        --dt-scrollbar-hover: #999999;
-        --dt-prop-key:     #0070c1;
-        --dt-prop-val:     #a31515;
-        --dt-scope-name:   #007f6a;
-        --dt-hook-count:   #0070c1;
-        --dt-instance-border: #3b82f6;
-        --dt-instance-bg:  #f0f4ff;
-        --dt-flash-bg:     rgba(0,160,90,0.3);
-      }
-    }
-
-    #mates-devtools[data-theme="light"],
-    #mates-devtools-fab[data-theme="light"] {
+    :root[data-theme="light"] #mates-devtools,
+    :root[data-theme="light"] #mates-devtools-fab {
       --dt-bg:           #f5f5f5;
       --dt-bg-2:         #ebebeb;
       --dt-bg-3:         #e0e0e0;
@@ -619,7 +585,7 @@
       --dt-instance-bg:  #f0f4ff;
       --dt-flash-bg:     rgba(0,160,90,0.3);
     }
-  `,document.head.appendChild(t)}catch{}}function ir(){try{document.getElementById(Ot)?.remove()}catch{}}function cr(){try{const t=o.themeAtom.resolved;f&&(f.dataset.theme=t),y&&(y.dataset.theme=t)}catch{}}function lr(){try{if(ht)return;cr(),ht=o.effect(()=>{try{const t=o.themeAtom.resolved;f&&(f.dataset.theme=t),y&&(y.dataset.theme=t)}catch{}})}catch{}}function ar(){try{ht?.(),ht=null}catch{}}function sr(){try{if(y)return;or(),y=document.createElement("div"),y.id="mates-devtools",y.dataset.theme=o.themeAtom.resolved,document.body.appendChild(y)}catch{}}function Vt(){try{if(!y)return;o.render(o.html``,y),y.remove(),y=null,ir()}catch{}}function g(){try{if(!y||!I)return;const t=(()=>{try{switch(Z){case"components":return o.html`
+  `,document.head.appendChild(t)}catch{}}function or(){try{document.getElementById(Dt)?.remove()}catch{}}function ir(){try{if(S)return;rr(),S=document.createElement("div"),S.id="mates-devtools",document.body.appendChild(S)}catch{}}function Ot(){try{if(!S)return;i.render(i.html``,S),S.remove(),S=null,or()}catch{}}function g(){try{if(!S||!I)return;const t=(()=>{try{switch(Z){case"components":return i.html`
               <div class="${r.body}">
                 <div class="${r.leftColumn}">
                   <div class="${r.leftTabs}">
@@ -670,14 +636,14 @@
                       </svg>
                     </button>
                   </div>
-                  ${B==="list"?de({groups:F,selectedViewFn:S,onSelectGroup:qn,onHighlight:e=>bt(e),renderCallback:g}):pe({selectedComponentId:_,onSelectComponent:Xn,onHighlight:e=>bt(e),renderCallback:g})}
+                  ${B==="list"?se({groups:F,selectedViewFn:w,onSelectGroup:Xn,onHighlight:e=>mt(e),renderCallback:g}):ue({selectedComponentId:$,onSelectComponent:Yn,onHighlight:e=>mt(e),renderCallback:g})}
                 </div>
-                ${Mt(B==="list"?{selectedGroup:Dt(),selectedInstanceId:b,onSelectInstance:Jn,onHighlight:e=>bt(e)}:{selectedComponent:qe()})}
+                ${Tt(B==="list"?{selectedGroup:Ft(),selectedInstanceId:y,onSelectInstance:qn,onHighlight:e=>mt(e)}:{selectedComponent:Xe()})}
               </div>
-            `;case"logs":return Re({onClear:g,renderCallback:g});case"performance":return Ue({onClear:g,renderCallback:g,onNavigateToComponent:Kn});default:return o.html``}}catch{}return o.html``})();o.render(o.html`
+            `;case"logs":return Ae({onClear:g,renderCallback:g});case"performance":return Ge({onClear:g,renderCallback:g,onNavigateToComponent:Jn});default:return i.html``}}catch{}return i.html``})();i.render(i.html`
         <div class="${r.panel}" style="height: ${D}px;">
-          <div class="${r.resizeHandle}" @mousedown=${dr}></div>
-          ${he({activeTab:Z,onTabChange:Qn,onMinimise:Zn,onClose:er,unreadLogCount:Z==="logs"?0:$e()})}
+          <div class="${r.resizeHandle}" @mousedown=${cr}></div>
+          ${fe({activeTab:Z,onTabChange:Kn,onMinimise:Qn,onClose:tr,unreadLogCount:Z==="logs"?0:xe()})}
           ${t}
         </div>
-      `,y)}catch{}}function dr(t){try{t.preventDefault();const e=t.clientY,n=D,i=l=>{try{const a=window.innerHeight*Wn;D=Math.max(jn,Math.min(a,n+(e-l.clientY)));const u=rt();u&&(u.style.height=`${D}px`),zt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",i),document.addEventListener("mouseup",c)}catch{}}function ur(){try{if(f)return;f=document.createElement("div"),f.id="mates-devtools-fab",f.className=r.fab,f.dataset.theme=o.themeAtom.resolved,f.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",Qe),f.addEventListener("click",Ke),document.body.appendChild(f)}catch{}}function pr(){try{if(!f)return;f.removeEventListener("mousedown",Qe),f.removeEventListener("click",Ke),f.remove(),f=null}catch{}}function Ke(){try{if(gt){gt=!1;return}C?tr():nr()}catch{}}function Qe(t){try{t.preventDefault(),Ft=!0,gt=!1;const e=f.getBoundingClientRect();Ye=t.clientX-e.left,Xe=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Ze),document.addEventListener("mouseup",tn)}catch{}}function Ze(t){try{if(!Ft||!f)return;gt=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-Ye))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-Xe))}px`}catch{}}function tn(){try{Ft=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Ze),document.removeEventListener("mouseup",tn)}catch{}}function fr(){try{$n(),lr(),ur(),nt||(nt=N.__subscribe(t=>{try{t?.type==="unmount"&&(_!==null&&t.component.componentId===_&&(_=null),b!==null&&t.component.componentId===b&&(b=null)),yt(),vt()&&g()}catch{}})),Ct(()=>{try{vt()&&g()}catch{}})}catch{}}function en(){try{_n(),Ct(null),mt(),Je(),be(),Ht(),nt&&(nt(),nt=null),ar(),I=!1,C=!1,B="list",_=null,S=null,b=null,F=[],Vt(),pr()}catch{}}const xt=[];let Nt=null,jt=null,Wt=null;function hr(){try{Nt=o.interceptBefore((t,e)=>{try{const n=(e.method??"GET").toUpperCase();xt.push({method:n,url:t,startTs:performance.now()})}catch{}return{url:t,options:e}}),jt=o.interceptAfter(t=>{try{const e=xt.shift(),n=e?.method??"",i=e?.url??t.url??"",c=e?performance.now()-e.startTs:0;Le(n,i,t.status,c)}catch{}return t}),Wt=o.interceptError(t=>{try{const e=xt.shift(),n=e?performance.now()-e.startTs:0;Ae(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function gr(){try{Nt?.(),jt?.(),Wt?.(),Nt=null,jt=null,Wt=null,xt.length=0}catch{}}function mr(){try{if(o.isDevToolsInstalled())return;o.installDevToolsHooks({registerComponent:Ut,unregisterComponent:Yt,notifyRender:Xt,getComponentName:E,logComponentMount:Se,logComponentRender:ke,logComponentUnmount:Ce,logAtomSet:Te,logAtomUpdate:Me,logEventTrigger:Ie,logCleanupEventTrigger:Ee,logFetchRequest:An,logFetchResponse:Le,logFetchError:Ae,recordRender:Pt}),me(),hr()}catch{}}let $t=!1;function br(){try{if($t)return;$t=!0,mr(),fr()}catch{}}function yr(){try{if(!$t)return;$t=!1,gr(),en()}catch{}}s.clearLogs=we,s.clearPerfData=je,s.connectLogStore=me,s.connectPerfStore=Pe,s.destroyDevTools=en,s.destroyMatesDevTools=yr,s.devToolsEvent=N,s.disconnectLogStore=be,s.disconnectPerfStore=ze,s.getAllComponents=kt,s.getComponentDepth=A,s.getComponentGroups=qt,s.getComponentName=E,s.getComponentsByView=ln,s.getLogCount=Ln,s.getLogs=xe,s.getPerfSummaries=Oe,s.getRecentTimings=On,s.getRenderVersion=j,s.getSlowestRenders=Ne,s.getUnreadLogCount=$e,s.isLogStoreConnected=In,s.isPerfStoreConnected=Hn,s.logAtomSet=Te,s.logAtomUpdate=Me,s.logCleanupEventTrigger=Ee,s.logComponentMount=Se,s.logComponentRender=ke,s.logComponentUnmount=Ce,s.logEventTrigger=Ie,s.markLogsRead=_e,s.notifyRender=Xt,s.onLogEntry=ge,s.onPerfEntry=Fe,s.recordRender=Pt,s.registerComponent=Ut,s.renderAtomsViewer=re,s.renderComponentInspector=Mt,s.renderComponentList=de,s.renderComponentTree=pe,s.renderHeader=he,s.renderHooksViewer=Tt,s.renderLogsViewer=Re,s.renderMatesDevTools=br,s.renderPerfViewer=Ue,s.renderPropsViewer=ee,s.renderScopesViewer=ne,s.renderUseStateViewer=oe,s.renderValueTree=T,s.renderValueTreeEntries=hn,s.setValueTreeRenderCallback=Ct,s.startRenderTiming=Dn,s.styles=r,s.unregisterComponent=Yt,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+      `,S)}catch{}}function cr(t){try{t.preventDefault();const e=t.clientY,n=D,o=l=>{try{const a=window.innerHeight*jn;D=Math.max(Nn,Math.min(a,n+(e-l.clientY)));const u=rt();u&&(u.style.height=`${D}px`),Pt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function lr(){try{if(f)return;f=document.createElement("div"),f.id="mates-devtools-fab",f.className=r.fab,f.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",Ke),f.addEventListener("click",Je),document.body.appendChild(f)}catch{}}function ar(){try{if(!f)return;f.removeEventListener("mousedown",Ke),f.removeEventListener("click",Je),f.remove(),f=null}catch{}}function Je(){try{if(ht){ht=!1;return}C?Zn():er()}catch{}}function Ke(t){try{t.preventDefault(),Ht=!0,ht=!1;const e=f.getBoundingClientRect();Ue=t.clientX-e.left,Ye=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Qe),document.addEventListener("mouseup",Ze)}catch{}}function Qe(t){try{if(!Ht||!f)return;ht=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-Ue))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-Ye))}px`}catch{}}function Ze(){try{Ht=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Qe),document.removeEventListener("mouseup",Ze)}catch{}}function sr(){try{xn(),lr(),nt||(nt=N.__subscribe(t=>{try{t?.type==="unmount"&&($!==null&&t.component.componentId===$&&($=null),y!==null&&t.component.componentId===y&&(y=null)),yt(),bt()&&g()}catch{}})),kt(()=>{try{bt()&&g()}catch{}})}catch{}}function tn(){try{$n(),kt(null),gt(),qe(),me(),zt(),nt&&(nt(),nt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,F=[],Ot(),ar()}catch{}}const vt=[];let Vt=null,Nt=null,jt=null;function dr(){try{Vt=i.interceptBefore((t,e)=>{try{const n=(e.method??"GET").toUpperCase();vt.push({method:n,url:t,startTs:performance.now()})}catch{}return{url:t,options:e}}),Nt=i.interceptAfter(t=>{try{const e=vt.shift(),n=e?.method??"",o=e?.url??t.url??"",c=e?performance.now()-e.startTs:0;Be(n,o,t.status,c)}catch{}return t}),jt=i.interceptError(t=>{try{const e=vt.shift(),n=e?performance.now()-e.startTs:0;Le(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function ur(){try{Vt?.(),Nt?.(),jt?.(),Vt=null,Nt=null,jt=null,vt.length=0}catch{}}function pr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Gt,unregisterComponent:Ut,notifyRender:Yt,getComponentName:A,logComponentMount:we,logComponentRender:Se,logComponentUnmount:ke,logAtomSet:Ce,logAtomUpdate:Te,logEventTrigger:Me,logCleanupEventTrigger:Ee,logFetchRequest:Ln,logFetchResponse:Be,logFetchError:Le,recordRender:Rt}),ge(),dr()}catch{}}let xt=!1;function fr(){try{if(xt)return;xt=!0,pr(),sr()}catch{}}function hr(){try{if(!xt)return;xt=!1,ur(),tn()}catch{}}s.clearLogs=_e,s.clearPerfData=Ne,s.connectLogStore=ge,s.connectPerfStore=Re,s.destroyDevTools=tn,s.destroyMatesDevTools=hr,s.devToolsEvent=N,s.disconnectLogStore=me,s.disconnectPerfStore=Pe,s.getAllComponents=St,s.getComponentDepth=E,s.getComponentGroups=Xt,s.getComponentName=A,s.getComponentsByView=cn,s.getLogCount=Bn,s.getLogs=ve,s.getPerfSummaries=De,s.getRecentTimings=Dn,s.getRenderVersion=j,s.getSlowestRenders=Ve,s.getUnreadLogCount=xe,s.isLogStoreConnected=Mn,s.isPerfStoreConnected=zn,s.logAtomSet=Ce,s.logAtomUpdate=Te,s.logCleanupEventTrigger=Ee,s.logComponentMount=we,s.logComponentRender=Se,s.logComponentUnmount=ke,s.logEventTrigger=Me,s.markLogsRead=$e,s.notifyRender=Yt,s.onLogEntry=he,s.onPerfEntry=He,s.recordRender=Rt,s.registerComponent=Gt,s.renderAtomsViewer=ne,s.renderComponentInspector=Tt,s.renderComponentList=se,s.renderComponentTree=ue,s.renderHeader=fe,s.renderHooksViewer=Ct,s.renderLogsViewer=Ae,s.renderMatesDevTools=fr,s.renderPerfViewer=Ge,s.renderPropsViewer=te,s.renderScopesViewer=ee,s.renderUseStateViewer=re,s.renderValueTree=T,s.renderValueTreeEntries=fn,s.setValueTreeRenderCallback=kt,s.startRenderTiming=Fn,s.styles=r,s.unregisterComponent=Ut,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));