mates-devtools 0.1.0-beta.1

package/dist/mates-devtools.umd.js

@@ -0,0 +1,650 @@
+(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("mates"),require("mates/css-in-js")):typeof define=="function"&&define.amd?define(["exports","mates","mates/css-in-js"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.MatesDevTools={},s.Mates,s.Mates))})(this,(function(s,i,Wt){"use strict";const Gt="selected",on="selected",cn=Wt.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=Wt.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"}}),_t=new Set,it=new WeakMap,ct=new WeakMap,N=i.event("devtools");function Ut(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 Yt(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 qt(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 ln(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 an(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=an(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;"},Kt=new WeakMap;let Jt=null;function kt(t){try{Jt=t}catch{}}function Qt(t){try{let e=Kt.get(t);return e||(e=new Set,Kt.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{Jt?.()}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 o=t;if(o.length===0)return"[]";const c=o.slice(0,5).map(a=>te(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}: ${te(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 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 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 i.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return i.html`<span style="${h.string}"
+          >${t.toISOString()}</span
+        >`;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 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 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?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,o);if(!l)return i.html`
+        <div style="${h.row}">
+          <span style="${h.toggle}"></span>
+          ${e!=null?i.html`<span style="${h.key}">${e}</span
+                ><span style="${h.colon}">:</span>`:i.nothing}
+          ${pn(n)}
+        </div>
+      `;const u=a?fn(n):[],d=lt(n);return i.html`
+      <div>
+        <div
+          style="${h.row}cursor:pointer;user-select:none;"
+          @click=${p=>{try{p.stopPropagation(),dn(t,o)}catch{}}}
+        >
+          <span style="${h.toggle}">${a?"▼":"▶"}</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"?"{":Zt(n)}</span
+              >`:i.html`<span style="${h.preview}">${Zt(n)}</span>`}
+        </div>
+        ${a?i.html`
+              <div style="${h.children}">
+                ${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>`:i.nothing}
+              </div>
+              ${d==="object"&&a?i.html`<div style="${h.row};margin-left:14px;">
+                    <span style="${h.preview}">}</span>
+                  </div>`:i.nothing}
+            `:i.nothing}
+      </div>
+    `}catch{return i.html``}}function hn(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>`:i.html`
+      ${o.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
+    `}catch{return i.html``}}function ee(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 ne(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;"
+                >
+                  ${o}
+                </div>
+                <div style="margin-left:4px;">
+                  ${Object.keys(c).length===0?i.html`<div style="color:#666;font-size:13px;">
+                        (empty scope)
+                      </div>`:i.html`
+                        ${Object.keys(c).map(d=>T(u,d,c[d],`scope_${o}.${d}`,0))}
+                      `}
+                </div>
+              </div>
+            `}catch{return i.html``}})}
+    `}catch{return i.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?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 oe(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 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 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 yn(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 i.html``}}function Ct(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?i.nothing:i.html`
+      <div class="${r.hooksSummary}">
+        ${n.map(o=>yn(o.label,o.count))}
+      </div>
+    `}catch{return i.html``}}function bn(t,e){try{t.stopPropagation(),mt(e)}catch{}}function vn(t){try{const e=[];let n=wt(t);for(;n;)e.push(A(n)),n=wt(n);return e.reverse(),e}catch{return[]}}function ie(t){try{const e=vn(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 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
+      >`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function ce(t){try{return i.html`
+      <div class="${r.instanceDetails}">
+        <div class="${r.sectionHeader}">Props</div>
+        ${ee(t._props||{})}
+
+        <div class="${r.sectionHeader}">State</div>
+        ${oe(t._useStates)}
+
+        <div class="${r.sectionHeader}">Atoms</div>
+        ${re(t.cleanups)}
+
+        <div class="${r.sectionHeader}">Scopes</div>
+        ${ne(t.scopes)}
+      </div>
+    `}catch{return i.html``}}function le(){try{return i.html`
+      <div class="${r.inspector}">
+        <div class="${r.empty}">Select a component to inspect</div>
+      </div>
+    `}catch{return i.html``}}function ae(t){try{const e=A(t),n=t.componentId,o=E(t),c=j(t);return i.html`
+      <div class="${r.inspector}">
+        ${ie(t)}
+        <div class="${r.inspectorTitle}">
+          <span>${e}</span>
+          <span class="${r.instanceCount}">
+            #${n.toString().slice(2,6)} · depth ${o} · renders ${c}
+          </span>
+          <button
+            class="${r.highlightBtn}"
+            style="opacity: 1;"
+            @click=${l=>{try{bn(l,t)}catch{}}}
+            title="Highlight in DOM"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </button>
+        </div>
+
+        ${Ct(t)} ${ce(t)}
+      </div>
+    `}catch{return i.html``}}function xn(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>
+          <span class="${r.instanceCount}">
+            ${l.length} instance${l.length!==1?"s":""}
+          </span>
+        </div>
+
+        <ul class="${r.instanceList}">
+          ${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} ${b?on:""}"
+                    @click=${()=>{try{n(u)}catch{}}}
+                  >
+                    <span
+                      class="${r.instanceToggle} ${b?r.instanceToggleSelected:""}"
+                      >${b?"▼":"▶"}</span
+                    >
+                    <span class="${r.instanceId}"
+                      >#${u.toString().slice(2,6)}</span
+                    >
+                    <span class="${r.componentBadge}">depth ${d}</span>
+                    <span class="${r.componentBadge}"
+                      >renders ${p}</span
+                    >
+                    <button
+                      class="${r.componentHighlightBtn}"
+                      @click=${m=>{try{m.stopPropagation(),o(a)}catch{}}}
+                      title="Highlight in page"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <circle cx="11" cy="11" r="8" />
+                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                      </svg>
+                    </button>
+                  </div>
+                  ${b?i.html`
+                        ${ie(a)} ${Ct(a)}
+                        ${ce(a)}
+                      `:i.nothing}
+                </li>
+              `})}
+        </ul>
+      </div>
+    `}catch{return i.html``}}function Tt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?ae(t.selectedComponent):le();const{selectedGroup:e,selectedInstanceId:n,onSelectInstance:o,onHighlight:c}=t;return e?e.instances.length===1?ae(e.instances[0]):xn(e,n,o,c):le()}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 q(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,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 wn=0;function Sn(t){return Mt.has(t)||Mt.set(t,`mdt-hl-${++wn}`),Mt.get(t)}function se(t,e,n){try{const o=n.get(e),c=o!==void 0&&o!==t;n.set(e,t);const l=Sn(e);return c&&q(()=>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 kn=new WeakMap;let It="";function Cn(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 de({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=${It}
+            @input=${d}
+          />
+        </div>
+        ${u.length===0?i.html`<div class="${r.empty}">
+              ${l?"No matching components":"No components mounted"}
+            </div>`:i.html`
+              <ul class="${r.componentList}">
+                ${i.repeat(u,p=>p.viewFn,p=>{const b=Cn(p),m=e===p.viewFn,v=Bt(p),$t=p.instances.length,nn=p.instances[0];return i.html`
+                      <li
+                        class="${r.componentItem} ${m?Gt:""}"
+                        @click=${()=>{try{n(p.viewFn)}catch{}}}
+                      >
+                        ${se(b,nn,kn)}
+                        <span class="${r.componentName}"
+                          >${p.name}</span
+                        >
+                        ${$t>1?i.html`<span
+                              class="${r.componentCount} ${m?r.componentCountSelected:""}"
+                              >×${$t}</span
+                            >`:""}
+                        <span
+                          class="${r.componentBadge} ${m?r.componentBadgeSelected:""}"
+                          >depth ${v}</span
+                        >
+                        <button
+                          class="${r.componentHighlightBtn} ${m?r.componentHighlightBtnSelected:""}"
+                          @click=${rn=>{try{rn.stopPropagation(),o(nn)}catch{}}}
+                          title="Highlight in page"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="12"
+                            height="12"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="M1 1l6 6" />
+                            <path d="M7 1L1 7" />
+                            <circle cx="11" cy="11" r="8" />
+                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                          </svg>
+                        </button>
+                      </li>
+                    `})}
+              </ul>
+            `}
+      </div>
+    `}catch{return i.html``}}const Tn=new WeakMap,Lt=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: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 ue(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:""}"
+        style="margin-left: ${p}px;"
+        @click=${m}
+      >
+        ${l?i.html`<span class="${r.treeToggle}" @click=${b}
+              >${a?"▶":"▼"}</span
+            >`:i.html`<span class="${r.treeLeaf}">·</span>`}
+        ${se(u,t.component,Tn)}
+        <span class="${r.componentName}">${t.name}</span>
+        <span class="${r.componentBadge}"
+          >#${t.id.toString().slice(2,6)}</span
+        >
+        <button
+          class="${r.componentHighlightBtn}"
+          @click=${v=>{try{v.stopPropagation(),o(t.component)}catch{}}}
+          title="Highlight in page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1 1l6 6" />
+            <path d="M7 1L1 7" />
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </button>
+      </li>
+      ${l&&!a?i.repeat(t.children,v=>v.component,v=>ue(v,e,n,o,c)):i.nothing}
+    `}catch{return i.html``}}function pe({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:o}){try{const c=St(),l=Mn(c);return i.html`
+      <div class="${r.content}">
+        ${l.length===0?i.html`<div class="${r.empty}">No components mounted</div>`:i.html`
+              <ul class="${r.componentList}">
+                ${i.repeat(l,a=>a.component,a=>ue(a,t,e,n,o))}
+              </ul>
+            `}
+      </div>
+    `}catch{return i.html``}}const fe=()=>(i.effect(()=>{try{console.log(dt())}catch{}}),()=>{try{return i.html`Active Timers (${dt()})`}catch{return i.html``}});fe.skipDevToolsRender=!0;function he({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>
+          <nav class="${r.tabBar}">
+            <button
+              class="${r.tabBtn} ${t==="components"?"active":""}"
+              @click=${()=>{try{e("components")}catch{}}}
+            >
+              Components
+            </button>
+            <button
+              class="${r.tabBtn} ${t==="logs"?"active":""}"
+              @click=${()=>{try{e("logs")}catch{}}}
+            >
+              Logs
+              ${c>0?i.html`<span class="${r.tabBadge}"
+                    >${c>99?"99+":c}</span
+                  >`:""}
+            </button>
+            <button
+              class="${r.tabBtn} ${t==="performance"?"active":""}"
+              @click=${()=>{try{e("performance")}catch{}}}
+            >
+              Performance
+            </button>
+          </nav>
+        </div>
+        <div>
+          <button style="margin-left: 10px">${i.x(fe)}</button>
+        </div>
+        <div class="${r.controls}">
+          <button
+            class="${r.button}"
+            @click=${()=>{try{n()}catch{}}}
+            title="Minimise"
+          >
+            _
+          </button>
+          <button
+            class="${r.button}"
+            @click=${()=>{try{o()}catch{}}}
+            title="Close"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    `}catch{return i.html``}}let ut=null;function ge(t){try{return ut=t,()=>{ut===t&&(ut=null)}}catch{}return()=>{}}let x=!1;function me(){x=!0}function ye(){x=!1}function In(){return x}const Bn=100,P=[];let be=1,pt=0;const ve=new Set(["devtools","DOMReady","Paint"]);function k(t,e,n){try{P.length>=Bn&&P.shift(),P.push({id:be++,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,be=1}catch{}}function Se(t){try{if(!x)return;k("mount",t,"mounted")}catch{}}function ke(t,e){try{if(!x)return;k("update",t,`updated (${e.toFixed(2)}ms)`)}catch{}}function Ce(t){try{if(!x)return;k("cleanup",t,"cleaned up")}catch{}}function Te(t,e){try{if(!x)return;k("setter",t,Et(e))}catch{}}function Me(t){try{if(!x)return;k("action",t)}catch{}}function Ie(t,e){try{if(!x||ve.has(t))return;k("event",t,e!==void 0?Et(e):void 0)}catch{}}const At=80,Be=120;function z(t,e){try{return t.length>e?t.slice(0,e-1)+"…":t}catch{}return""}function En(t,e,n){try{if(!x)return;const o=n?`pending · ${z(n,50)}`:"pending";k("fetch",z(`${t} ${e}`,At),o)}catch{}}function Le(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`${n} · ${o.toFixed(0)}ms`,Be))}catch{}}function Ee(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`error · ${o.toFixed(0)}ms · ${n}`,Be))}catch{}}function Ae(t,e){try{if(!x||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"},An={mount:"MNT",update:"UPD",cleanup:"CLN",setter:"SET",action:"ACT",event:"EVT",fetch:"NET"};let _="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,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 zn(){try{const t=xe(),e=Rn[_];if(!e)return t;const n=new Set(e);return t.filter(o=>n.has(o.category))}catch{return[]}}function Re({onClear:t,renderCallback:e}){try{_e();const n=zn();return i.html`
+      <div class="${r.logsPanel}">
+        <div class="${r.logsToolbar}">
+          <div class="${r.logsFilterRow}">
+            <button
+              class="${r.logsFilterBtn} ${_==="all"?"active":""}"
+              @click=${()=>{try{_="all",e()}catch{}}}
+            >
+              All
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${_==="lifecycle"?"active":""}"
+              style="--mdt-filter-color: ${H.mount}"
+              @click=${()=>{try{_=_==="lifecycle"?"all":"lifecycle",e()}catch{}}}
+            >
+              Mounts / Updates
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${_==="logs"?"active":""}"
+              style="--mdt-filter-color: ${H.setter}"
+              @click=${()=>{try{_=_==="logs"?"all":"logs",e()}catch{}}}
+            >
+              Logs
+            </button>
+            <button
+              class="${r.logsFilterBtn} ${_==="network"?"active":""}"
+              style="--mdt-filter-color: ${H.fetch}"
+              @click=${()=>{try{_=_==="network"?"all":"network",e()}catch{}}}
+            >
+              Network
+            </button>
+          </div>
+          <div class="${r.logsActions}">
+            <span class="${r.logsCount}">${n.length} entries</span>
+            <button
+              class="${r.button}"
+              @click=${()=>{try{we(),t()}catch{}}}
+              title="Clear logs"
+            >
+              🗑
+            </button>
+          </div>
+        </div>
+
+        <div class="${r.logsContainer}">
+          ${n.length===0?i.html`<div class="${r.empty}">
+                No logs yet. Interact with the app to see activity.
+              </div>`:i.repeat(n,o=>o.id,o=>i.html`
+                  <div class="${r.logEntry}">
+                    <span class="${r.logTs}">${Pn(o.ts)}</span>
+                    <span
+                      class="${r.logBadge}"
+                      style="background: ${H[o.category]}22; color: ${H[o.category]}; border-color: ${H[o.category]}44;"
+                      >${An[o.category]}</span
+                    >
+                    <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 i.html``}}let X=!1;function Pe(){try{X=!0}catch{}}function ze(){try{X=!1}catch{}}function Hn(){return X}const Fn=100,K=new Map;let He=1,ft=null;function Fe(t){try{return ft=t,()=>{try{ft===t&&(ft=null)}catch{}}}catch{}return()=>{}}function Rt(t,e,n){try{if(!X)return;const o={id:He++,ts:performance.now(),durationMs:n,componentName:t,instanceId:e};let c=K.get(t);c||(c=[],K.set(t,c)),c.length>=Fn&&c.shift(),c.push(o);try{ft?.()}catch{}}catch{}}function Dn(t,e){try{if(!X)return De;const n=performance.now();return()=>Rt(t,e,performance.now()-n)}catch{}return De}function De(){}function Oe(){try{const t=[];for(const[e,n]of K){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 Ve(){try{const t=[];for(const e of K.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,o)=>o.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,o)=>o.durationMs-n.durationMs),e.length>t?e.slice(0,t):e}catch{}return[]}function je(){try{K.clear(),He=1}catch{}}i.atom(0);function J(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 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 i.html`
+      <table class="${r.perfTable}">
+        <thead>
+          <tr>
+            <th class="${r.perfTh}">Component</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Renders</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Avg</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Max</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Last</th>
+            <th class="${r.perfTh}" style="width: 40%;">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${i.repeat(t,n=>n.name,n=>{const o=Ge(n.lastMs);return i.html`
+                <tr class="${r.perfRow}">
+                  <td class="${r.perfCell} ${r.perfName}">
+                    ${n.name}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${n.renderCount}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${J(n.avgMs)}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${J(n.maxMs)}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${J(n.lastMs)}
+                  </td>
+                  <td class="${r.perfCell}">
+                    <div class="${r.perfBarWrap}">
+                      <div
+                        class="${r.perfBar}"
+                        style="width: ${We(n.totalMs,e)}%; background: ${o};"
+                      ></div>
+                      <span class="${r.perfBarLabel}"
+                        >${J(n.totalMs)}</span
+                      >
+                    </div>
+                  </td>
+                </tr>
+              `})}
+        </tbody>
+      </table>
+    `}catch{return i.html``}}function Nn(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)),o=!!e;return i.html`
+      <table class="${r.perfTable}">
+        <thead>
+          <tr>
+            <th class="${r.perfTh}">Component</th>
+            <th class="${r.perfTh} ${r.perfThRight}">Duration</th>
+            <th class="${r.perfTh}" style="width: 50%;">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${i.repeat(t,c=>c.id,c=>{const l=Ge(c.durationMs),a=o?()=>{try{e(c.instanceId)}catch{}}:void 0;return i.html`
+                <tr
+                  class="${r.perfRow} ${o?r.perfRowClickable:""}"
+                  @click=${a}
+                  title=${o?`Go to ${c.componentName} in Components tab`:""}
+                >
+                  <td class="${r.perfCell} ${r.perfName}">
+                    ${c.componentName}
+                  </td>
+                  <td class="${r.perfCell} ${r.perfNum}">
+                    ${J(c.durationMs)}
+                  </td>
+                  <td class="${r.perfCell}">
+                    <div class="${r.perfBarWrap}">
+                      <div
+                        class="${r.perfBar}"
+                        style="width: ${We(c.durationMs,n)}%; background: ${l};"
+                      ></div>
+                    </div>
+                  </td>
+                </tr>
+              `})}
+        </tbody>
+      </table>
+    `}catch{return i.html``}}function Ue({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const o=Oe(),c=Ne(30);return i.html`
+      <div class="${r.perfPanel}">
+        <div class="${r.perfToolbar}">
+          <div class="${r.perfTabs}">
+            <button
+              class="${r.perfTabBtn} ${Q==="summary"?"active":""}"
+              @click=${()=>{try{Q="summary",e()}catch{}}}
+            >
+              Summary
+            </button>
+            <button
+              class="${r.perfTabBtn} ${Q==="slowest"?"active":""}"
+              @click=${()=>{try{Q="slowest",e()}catch{}}}
+            >
+              Slowest Renders
+            </button>
+          </div>
+          <div class="${r.perfActions}">
+            <button
+              class="${r.button}"
+              @click=${()=>{try{je(),t()}catch{}}}
+              title="Clear performance data"
+            >
+              🗑
+            </button>
+          </div>
+        </div>
+
+        <div class="${r.perfContent}">
+          ${Q==="summary"?Vn(o):Nn(c,n??null)}
+        </div>
+      </div>
+    `}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 jn=150,Wn=.8,Gn=.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,Ye=0,qe=0,ht=!1,tt=null,et=null,nt=null,O=null,V=null;function Un(){try{V!==null&&(clearTimeout(V),V=null)}catch{}}function gt(){try{Un(),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=q(()=>setTimeout(()=>{try{O===l&&(l.classList.add("fade-out"),V=q(()=>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=q(()=>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 Yn(){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&&!Yn()&&(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 qn(t){try{$=$===t?null:t,g()}catch{}}function Xn(t){try{w===t?(w=null,y=null):(w=t,y=null),g()}catch{}}function Kn(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 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=""),zt()}catch{}}function tr(){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 er(){try{I=!1,C=!1,$=null,Ke(),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}),q(()=>setTimeout(n,350))}else Ot();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(),cr(),yt(),g(),Pt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function rr(){try{Pe(),tt||(tt=ge(()=>{try{bt()&&g()}catch{}})),et||(et=Fe(()=>{try{bt()&&g()}catch{}}))}catch{}}function Ke(){try{ze(),tt&&(tt(),tt=null),et&&(et(),et=null)}catch{}}const Dt="mates-devtools-vars";function or(){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;
+      --dt-bg-3:         #2a2a2a;
+      --dt-bg-input:     #111111;
+      --dt-bg-hover:     #252525;
+      --dt-bg-selected:  #1a3a6e;
+      --dt-bg-active:    rgba(59,130,246,0.15);
+      --dt-border:       #333333;
+      --dt-border-2:     #2a2a2a;
+      --dt-border-3:     #1e1e1e;
+      --dt-border-selected: #3b82f6;
+      --dt-text:         #cccccc;
+      --dt-text-bright:  #e0e0e0;
+      --dt-text-muted:   #888888;
+      --dt-text-dim:     #666666;
+      --dt-text-dimmer:  #555555;
+      --dt-text-selected: #93c5fd;
+      --dt-accent:       #0077e6;
+      --dt-accent-2:     #3b82f6;
+      --dt-scrollbar:    #444444;
+      --dt-scrollbar-hover: #555555;
+      --dt-prop-key:     #9cdcfe;
+      --dt-prop-val:     #ce9178;
+      --dt-scope-name:   #4ec9b0;
+      --dt-hook-count:   #0099ff;
+      --dt-instance-border: #0066cc;
+      --dt-instance-bg:  #151515;
+      --dt-flash-bg:     rgba(0,180,100,0.45);
+    }
+
+    @media (prefers-color-scheme: light) {
+      #mates-devtools {
+        --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);
+      }
+    }
+  `,document.head.appendChild(t)}catch{}}function ir(){try{document.getElementById(Dt)?.remove()}catch{}}function cr(){try{if(S)return;or(),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,ir()}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}">
+                    <button
+                      class="${r.leftTabBtn} ${B==="list"?"active":""}"
+                      @click=${()=>{try{B="list",g()}catch{}}}
+                      title="Flat list"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <line x1="8" y1="6" x2="21" y2="6" />
+                        <line x1="8" y1="12" x2="21" y2="12" />
+                        <line x1="8" y1="18" x2="21" y2="18" />
+                        <line x1="3" y1="6" x2="3.01" y2="6" />
+                        <line x1="3" y1="12" x2="3.01" y2="12" />
+                        <line x1="3" y1="18" x2="3.01" y2="18" />
+                      </svg>
+                    </button>
+                    <button
+                      class="${r.leftTabBtn} ${B==="tree"?"active":""}"
+                      @click=${()=>{try{B="tree",g()}catch{}}}
+                      title="Tree view"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <line x1="6" y1="3" x2="6" y2="15" />
+                        <circle cx="18" cy="6" r="3" />
+                        <circle cx="6" cy="18" r="3" />
+                        <path d="M6 12a6 6 0 0 0 12-6" />
+                      </svg>
+                    </button>
+                  </div>
+                  ${B==="list"?de({groups:F,selectedViewFn:w,onSelectGroup:Xn,onHighlight:e=>mt(e),renderCallback:g}):pe({selectedComponentId:$,onSelectComponent:qn,onHighlight:e=>mt(e),renderCallback:g})}
+                </div>
+                ${Tt(B==="list"?{selectedGroup:Ft(),selectedInstanceId:y,onSelectInstance:Kn,onHighlight:e=>mt(e)}:{selectedComponent:Xe()})}
+              </div>
+            `;case"logs":return Re({onClear:g,renderCallback:g});case"performance":return Ue({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=${lr}></div>
+          ${he({activeTab:Z,onTabChange:Qn,onMinimise:Zn,onClose:er,unreadLogCount:Z==="logs"?0:$e()})}
+          ${t}
+        </div>
+      `,S)}catch{}}function lr(t){try{t.preventDefault();const e=t.clientY,n=D,o=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`),Pt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function ar(){try{if(f)return;f=document.createElement("div"),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",Qe),f.addEventListener("click",Je),document.body.appendChild(f)}catch{}}function sr(){try{if(!f)return;f.removeEventListener("mousedown",Qe),f.removeEventListener("click",Je),f.remove(),f=null}catch{}}function Je(){try{if(ht){ht=!1;return}C?tr():nr()}catch{}}function Qe(t){try{t.preventDefault(),Ht=!0,ht=!1;const e=f.getBoundingClientRect();Ye=t.clientX-e.left,qe=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Ze),document.addEventListener("mouseup",tn)}catch{}}function Ze(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-Ye))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-qe))}px`}catch{}}function tn(){try{Ht=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Ze),document.removeEventListener("mouseup",tn)}catch{}}function dr(){try{$n(),ar(),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 en(){try{_n(),kt(null),gt(),Ke(),ye(),zt(),nt&&(nt(),nt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,F=[],Ot(),sr()}catch{}}const vt=[];let Vt=null,Nt=null,jt=null;function ur(){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;Le(n,o,t.status,c)}catch{}return t}),jt=i.interceptError(t=>{try{const e=vt.shift(),n=e?performance.now()-e.startTs:0;Ee(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function pr(){try{Vt?.(),Nt?.(),jt?.(),Vt=null,Nt=null,jt=null,vt.length=0}catch{}}function fr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Ut,unregisterComponent:Yt,notifyRender:qt,getComponentName:A,logComponentMount:Se,logComponentRender:ke,logComponentUnmount:Ce,logAtomSet:Te,logAtomUpdate:Me,logEventTrigger:Ie,logCleanupEventTrigger:Ae,logFetchRequest:En,logFetchResponse:Le,logFetchError:Ee,recordRender:Rt}),me(),ur()}catch{}}let xt=!1;function hr(){try{if(xt)return;xt=!0,fr(),dr()}catch{}}function gr(){try{if(!xt)return;xt=!1,pr(),en()}catch{}}s.clearLogs=we,s.clearPerfData=je,s.connectLogStore=me,s.connectPerfStore=Pe,s.destroyDevTools=en,s.destroyMatesDevTools=gr,s.devToolsEvent=N,s.disconnectLogStore=ye,s.disconnectPerfStore=ze,s.getAllComponents=St,s.getComponentDepth=E,s.getComponentGroups=Xt,s.getComponentName=A,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=Ae,s.logComponentMount=Se,s.logComponentRender=ke,s.logComponentUnmount=Ce,s.logEventTrigger=Ie,s.markLogsRead=_e,s.notifyRender=qt,s.onLogEntry=ge,s.onPerfEntry=Fe,s.recordRender=Rt,s.registerComponent=Ut,s.renderAtomsViewer=re,s.renderComponentInspector=Tt,s.renderComponentList=de,s.renderComponentTree=pe,s.renderHeader=he,s.renderHooksViewer=Ct,s.renderLogsViewer=Re,s.renderMatesDevTools=hr,s.renderPerfViewer=Ue,s.renderPropsViewer=ee,s.renderScopesViewer=ne,s.renderUseStateViewer=oe,s.renderValueTree=T,s.renderValueTreeEntries=hn,s.setValueTreeRenderCallback=kt,s.startRenderTiming=Dn,s.styles=r,s.unregisterComponent=Yt,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));