mates-devtools 0.1.0-beta.4 → 0.1.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,114 +1,114 @@
|
|
|
1
|
-
(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}"
|
|
1
|
+
(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}"
|
|
2
2
|
>ƒ ${t.name||"anonymous"}()</span
|
|
3
|
-
>`;case"symbol":return
|
|
3
|
+
>`;case"symbol":return o.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return o.html`<span style="${h.string}"
|
|
4
4
|
>${t.toISOString()}</span
|
|
5
|
-
>`;case"regexp":return
|
|
5
|
+
>`;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`
|
|
6
6
|
<div style="${h.row}">
|
|
7
|
-
${e!=null?
|
|
8
|
-
><span style="${h.colon}">:</span>`:
|
|
7
|
+
${e!=null?o.html`<span style="${h.key}">${e}</span
|
|
8
|
+
><span style="${h.colon}">:</span>`:o.nothing}
|
|
9
9
|
<span style="${h.preview}">[max depth]</span>
|
|
10
10
|
</div>
|
|
11
|
-
`;const l=
|
|
11
|
+
`;const l=un(n),a=l&&sn(t,i);if(!l)return o.html`
|
|
12
12
|
<div style="${h.row}">
|
|
13
13
|
<span style="${h.toggle}"></span>
|
|
14
|
-
${e!=null?
|
|
15
|
-
><span style="${h.colon}">:</span>`:
|
|
16
|
-
${
|
|
14
|
+
${e!=null?o.html`<span style="${h.key}">${e}</span
|
|
15
|
+
><span style="${h.colon}">:</span>`:o.nothing}
|
|
16
|
+
${pn(n)}
|
|
17
17
|
</div>
|
|
18
|
-
`;const u=a?
|
|
18
|
+
`;const u=a?fn(n):[],d=lt(n);return o.html`
|
|
19
19
|
<div>
|
|
20
20
|
<div
|
|
21
21
|
style="${h.row}cursor:pointer;user-select:none;"
|
|
22
|
-
@click=${p=>{try{p.stopPropagation(),
|
|
22
|
+
@click=${p=>{try{p.stopPropagation(),dn(t,i)}catch{}}}
|
|
23
23
|
>
|
|
24
24
|
<span style="${h.toggle}">${a?"▼":"▶"}</span>
|
|
25
|
-
${e!=null?
|
|
26
|
-
><span style="${h.colon}">:</span>`:
|
|
27
|
-
${a?
|
|
28
|
-
>${d==="array"?`Array(${n.length})`:d==="object"?"{":
|
|
29
|
-
>`:
|
|
25
|
+
${e!=null?o.html`<span style="${h.key}">${e}</span
|
|
26
|
+
><span style="${h.colon}">:</span>`:o.nothing}
|
|
27
|
+
${a?o.html`<span style="${h.preview}"
|
|
28
|
+
>${d==="array"?`Array(${n.length})`:d==="object"?"{":Zt(n)}</span
|
|
29
|
+
>`:o.html`<span style="${h.preview}">${Zt(n)}</span>`}
|
|
30
30
|
</div>
|
|
31
|
-
${a?
|
|
31
|
+
${a?o.html`
|
|
32
32
|
<div style="${h.children}">
|
|
33
|
-
${u.map(p=>T(t,p.key,p.value,`${
|
|
34
|
-
${u.length===0?
|
|
33
|
+
${u.map(p=>T(t,p.key,p.value,`${i}.${p.key}`,c+1))}
|
|
34
|
+
${u.length===0?o.html`<div style="${h.row}">
|
|
35
35
|
<span style="${h.preview}">(empty)</span>
|
|
36
|
-
</div>`:
|
|
36
|
+
</div>`:o.nothing}
|
|
37
37
|
</div>
|
|
38
|
-
${d==="object"&&a?
|
|
38
|
+
${d==="object"&&a?o.html`<div style="${h.row};margin-left:14px;">
|
|
39
39
|
<span style="${h.preview}">}</span>
|
|
40
|
-
</div>`:
|
|
41
|
-
`:
|
|
40
|
+
</div>`:o.nothing}
|
|
41
|
+
`:o.nothing}
|
|
42
42
|
</div>
|
|
43
|
-
`}catch{return
|
|
43
|
+
`}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;">
|
|
44
44
|
No data
|
|
45
|
-
</div>`:
|
|
46
|
-
${
|
|
47
|
-
`}catch{return
|
|
48
|
-
${
|
|
49
|
-
`}catch{return
|
|
50
|
-
${[...t?.entries()||[]].map(([e,n])=>{try{const
|
|
45
|
+
</div>`:o.html`
|
|
46
|
+
${i.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
|
|
47
|
+
`}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`
|
|
48
|
+
${o.repeat(e,n=>n,n=>T(t,n,t[n],`props.${n}`,0))}
|
|
49
|
+
`}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`
|
|
50
|
+
${[...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`
|
|
51
51
|
<div style="margin-bottom:6px;">
|
|
52
52
|
<div
|
|
53
53
|
style="color:#4ec9b0;font-weight:500;font-size:13px;margin-bottom:2px;font-family:'SF Mono',Monaco,Consolas,monospace;"
|
|
54
54
|
>
|
|
55
|
-
${
|
|
55
|
+
${i}
|
|
56
56
|
</div>
|
|
57
57
|
<div style="margin-left:4px;">
|
|
58
|
-
${Object.keys(c).length===0?
|
|
58
|
+
${Object.keys(c).length===0?o.html`<div style="color:#666;font-size:13px;">
|
|
59
59
|
(empty scope)
|
|
60
|
-
</div>`:
|
|
61
|
-
${Object.keys(c).map(d=>T(u,d,c[d],`scope_${
|
|
60
|
+
</div>`:o.html`
|
|
61
|
+
${Object.keys(c).map(d=>T(u,d,c[d],`scope_${i}.${d}`,0))}
|
|
62
62
|
`}
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
|
-
`}catch{return
|
|
66
|
-
`}catch{return
|
|
67
|
-
${
|
|
68
|
-
`}catch{return
|
|
69
|
-
${t.map((e,n)=>{const
|
|
70
|
-
`}catch{return
|
|
65
|
+
`}catch{return o.html``}})}
|
|
66
|
+
`}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`
|
|
67
|
+
${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)})}
|
|
68
|
+
`}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`
|
|
69
|
+
${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)})}
|
|
70
|
+
`}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`
|
|
71
71
|
<span class="${r.hookPill}">
|
|
72
72
|
<span class="${r.hookPillLabel}">${t}</span>
|
|
73
73
|
<span class="${r.hookPillCount}">${e}</span>
|
|
74
74
|
</span>
|
|
75
|
-
`}catch{return
|
|
75
|
+
`}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`
|
|
76
76
|
<div class="${r.hooksSummary}">
|
|
77
|
-
${n.map(
|
|
77
|
+
${n.map(i=>bn(i.label,i.count))}
|
|
78
78
|
</div>
|
|
79
|
-
`}catch{return
|
|
79
|
+
`}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`
|
|
80
80
|
<div class="${r.inspectorBreadcrumb}">
|
|
81
81
|
<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
|
|
82
82
|
>${n}</span
|
|
83
83
|
>
|
|
84
84
|
</div>
|
|
85
|
-
`;const
|
|
85
|
+
`;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}"
|
|
86
86
|
>${n}</span
|
|
87
|
-
>`),
|
|
87
|
+
>`),o.html` <div class="${r.inspectorBreadcrumb}">${i}</div> `}catch{return o.html``}}function ce(t){try{return o.html`
|
|
88
88
|
<div class="${r.instanceDetails}">
|
|
89
89
|
<div class="${r.sectionHeader}">Props</div>
|
|
90
|
-
${
|
|
90
|
+
${ee(t._props||{})}
|
|
91
91
|
|
|
92
92
|
<div class="${r.sectionHeader}">State</div>
|
|
93
|
-
${
|
|
93
|
+
${oe(t._useStates)}
|
|
94
94
|
|
|
95
95
|
<div class="${r.sectionHeader}">Atoms</div>
|
|
96
|
-
${
|
|
96
|
+
${re(t.cleanups)}
|
|
97
97
|
|
|
98
98
|
<div class="${r.sectionHeader}">Scopes</div>
|
|
99
|
-
${
|
|
99
|
+
${ne(t.scopes)}
|
|
100
100
|
</div>
|
|
101
|
-
`}catch{return
|
|
101
|
+
`}catch{return o.html``}}function le(){try{return o.html`
|
|
102
102
|
<div class="${r.inspector}">
|
|
103
103
|
<div class="${r.empty}">Select a component to inspect</div>
|
|
104
104
|
</div>
|
|
105
|
-
`}catch{return
|
|
105
|
+
`}catch{return o.html``}}function ae(t){try{const e=E(t),n=t.componentId,i=A(t),c=j(t);return o.html`
|
|
106
106
|
<div class="${r.inspector}">
|
|
107
|
-
${
|
|
107
|
+
${ie(t)}
|
|
108
108
|
<div class="${r.inspectorTitle}">
|
|
109
109
|
<span>${e}</span>
|
|
110
110
|
<span class="${r.instanceCount}">
|
|
111
|
-
#${n.toString().slice(2,6)} · depth ${
|
|
111
|
+
#${n.toString().slice(2,6)} · depth ${i} · renders ${c}
|
|
112
112
|
</span>
|
|
113
113
|
<button
|
|
114
114
|
class="${r.highlightBtn}"
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
</button>
|
|
134
134
|
</div>
|
|
135
135
|
|
|
136
|
-
${
|
|
136
|
+
${Tt(t)} ${ce(t)}
|
|
137
137
|
</div>
|
|
138
|
-
`}catch{return
|
|
138
|
+
`}catch{return o.html``}}function xn(t,e,n,i){try{const{name:c,instances:l}=t;return o.html`
|
|
139
139
|
<div class="${r.inspector}">
|
|
140
140
|
<div class="${r.inspectorTitle}">
|
|
141
141
|
<span>${c}</span>
|
|
@@ -145,15 +145,15 @@
|
|
|
145
145
|
</div>
|
|
146
146
|
|
|
147
147
|
<ul class="${r.instanceList}">
|
|
148
|
-
${
|
|
148
|
+
${o.repeat(l,a=>a.componentId,a=>{const u=a.componentId,d=A(a),p=j(a),v=e===u;return o.html`
|
|
149
149
|
<li class="${r.instanceGroup}">
|
|
150
150
|
<div
|
|
151
|
-
class="${r.instanceItem} ${
|
|
151
|
+
class="${r.instanceItem} ${v?on:""}"
|
|
152
152
|
@click=${()=>{try{n(u)}catch{}}}
|
|
153
153
|
>
|
|
154
154
|
<span
|
|
155
|
-
class="${r.instanceToggle} ${
|
|
156
|
-
>${
|
|
155
|
+
class="${r.instanceToggle} ${v?r.instanceToggleSelected:""}"
|
|
156
|
+
>${v?"▼":"▶"}</span
|
|
157
157
|
>
|
|
158
158
|
<span class="${r.instanceId}"
|
|
159
159
|
>#${u.toString().slice(2,6)}</span
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
>
|
|
165
165
|
<button
|
|
166
166
|
class="${r.componentHighlightBtn}"
|
|
167
|
-
@click=${m=>{try{m.stopPropagation(),
|
|
167
|
+
@click=${m=>{try{m.stopPropagation(),i(a)}catch{}}}
|
|
168
168
|
title="Highlight in page"
|
|
169
169
|
>
|
|
170
170
|
<svg
|
|
@@ -183,49 +183,49 @@
|
|
|
183
183
|
</svg>
|
|
184
184
|
</button>
|
|
185
185
|
</div>
|
|
186
|
-
${
|
|
187
|
-
${
|
|
188
|
-
${
|
|
189
|
-
`:
|
|
186
|
+
${v?o.html`
|
|
187
|
+
${ie(a)} ${Tt(a)}
|
|
188
|
+
${ce(a)}
|
|
189
|
+
`:o.nothing}
|
|
190
190
|
</li>
|
|
191
191
|
`})}
|
|
192
192
|
</ul>
|
|
193
193
|
</div>
|
|
194
|
-
`}catch{return
|
|
194
|
+
`}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`
|
|
195
195
|
<div class="${r.content}">
|
|
196
196
|
<div style="padding: 0 0 6px 0; flex-shrink: 0;">
|
|
197
197
|
<input
|
|
198
198
|
class="${r.componentSearch}"
|
|
199
199
|
type="text"
|
|
200
200
|
placeholder="Search components…"
|
|
201
|
-
.value=${
|
|
201
|
+
.value=${Bt}
|
|
202
202
|
@input=${d}
|
|
203
203
|
/>
|
|
204
204
|
</div>
|
|
205
|
-
${u.length===0?
|
|
205
|
+
${u.length===0?o.html`<div class="${r.empty}">
|
|
206
206
|
${l?"No matching components":"No components mounted"}
|
|
207
|
-
</div>`:
|
|
207
|
+
</div>`:o.html`
|
|
208
208
|
<ul class="${r.componentList}">
|
|
209
|
-
${
|
|
209
|
+
${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`
|
|
210
210
|
<li
|
|
211
|
-
class="${r.componentItem} ${m?
|
|
211
|
+
class="${r.componentItem} ${m?Gt:""}"
|
|
212
212
|
@click=${()=>{try{n(p.viewFn)}catch{}}}
|
|
213
213
|
>
|
|
214
|
-
${
|
|
214
|
+
${se(v,nn,kn)}
|
|
215
215
|
<span class="${r.componentName}"
|
|
216
216
|
>${p.name}</span
|
|
217
217
|
>
|
|
218
|
-
${
|
|
218
|
+
${_t>1?o.html`<span
|
|
219
219
|
class="${r.componentCount} ${m?r.componentCountSelected:""}"
|
|
220
|
-
>×${
|
|
220
|
+
>×${_t}</span
|
|
221
221
|
>`:""}
|
|
222
222
|
<span
|
|
223
223
|
class="${r.componentBadge} ${m?r.componentBadgeSelected:""}"
|
|
224
|
-
>depth ${
|
|
224
|
+
>depth ${x}</span
|
|
225
225
|
>
|
|
226
226
|
<button
|
|
227
227
|
class="${r.componentHighlightBtn} ${m?r.componentHighlightBtnSelected:""}"
|
|
228
|
-
@click=${
|
|
228
|
+
@click=${rn=>{try{rn.stopPropagation(),i(nn)}catch{}}}
|
|
229
229
|
title="Highlight in page"
|
|
230
230
|
>
|
|
231
231
|
<svg
|
|
@@ -250,23 +250,23 @@
|
|
|
250
250
|
</ul>
|
|
251
251
|
`}
|
|
252
252
|
</div>
|
|
253
|
-
`}catch{return
|
|
253
|
+
`}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`
|
|
254
254
|
<li
|
|
255
|
-
class="${r.componentItem} ${d?
|
|
255
|
+
class="${r.componentItem} ${d?Gt:""}"
|
|
256
256
|
style="margin-left: ${p}px;"
|
|
257
257
|
@click=${m}
|
|
258
258
|
>
|
|
259
|
-
${l?
|
|
259
|
+
${l?o.html`<span class="${r.treeToggle}" @click=${v}
|
|
260
260
|
>${a?"▶":"▼"}</span
|
|
261
|
-
>`:
|
|
262
|
-
${
|
|
261
|
+
>`:o.html`<span class="${r.treeLeaf}">·</span>`}
|
|
262
|
+
${se(u,t.component,Tn)}
|
|
263
263
|
<span class="${r.componentName}">${t.name}</span>
|
|
264
264
|
<span class="${r.componentBadge}"
|
|
265
265
|
>#${t.id.toString().slice(2,6)}</span
|
|
266
266
|
>
|
|
267
267
|
<button
|
|
268
268
|
class="${r.componentHighlightBtn}"
|
|
269
|
-
@click=${
|
|
269
|
+
@click=${x=>{try{x.stopPropagation(),i(t.component)}catch{}}}
|
|
270
270
|
title="Highlight in page"
|
|
271
271
|
>
|
|
272
272
|
<svg
|
|
@@ -287,16 +287,16 @@
|
|
|
287
287
|
</svg>
|
|
288
288
|
</button>
|
|
289
289
|
</li>
|
|
290
|
-
${l&&!a?
|
|
291
|
-
`}catch{return
|
|
290
|
+
${l&&!a?o.repeat(t.children,x=>x.component,x=>ue(x,e,n,i,c)):o.nothing}
|
|
291
|
+
`}catch{return o.html``}}function pe({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:i}){try{const c=kt(),l=Mn(c);return o.html`
|
|
292
292
|
<div class="${r.content}">
|
|
293
|
-
${l.length===0?
|
|
293
|
+
${l.length===0?o.html`<div class="${r.empty}">No components mounted</div>`:o.html`
|
|
294
294
|
<ul class="${r.componentList}">
|
|
295
|
-
${
|
|
295
|
+
${o.repeat(l,a=>a.component,a=>ue(a,t,e,n,i))}
|
|
296
296
|
</ul>
|
|
297
297
|
`}
|
|
298
298
|
</div>
|
|
299
|
-
`}catch{return
|
|
299
|
+
`}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`
|
|
300
300
|
<div class="${r.header}">
|
|
301
301
|
<div class="${r.headerLeft}">
|
|
302
302
|
<div class="${r.title}">🔧 Mates DevTools</div>
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
@click=${()=>{try{e("logs")}catch{}}}
|
|
313
313
|
>
|
|
314
314
|
Logs
|
|
315
|
-
${c>0?
|
|
315
|
+
${c>0?o.html`<span class="${r.tabBadge}"
|
|
316
316
|
>${c>99?"99+":c}</span
|
|
317
317
|
>`:""}
|
|
318
318
|
</button>
|
|
@@ -325,7 +325,7 @@
|
|
|
325
325
|
</nav>
|
|
326
326
|
</div>
|
|
327
327
|
<div>
|
|
328
|
-
<button style="margin-left: 10px">${
|
|
328
|
+
<button style="margin-left: 10px">${o.x(fe)}</button>
|
|
329
329
|
</div>
|
|
330
330
|
<div class="${r.controls}">
|
|
331
331
|
<button
|
|
@@ -337,41 +337,41 @@
|
|
|
337
337
|
</button>
|
|
338
338
|
<button
|
|
339
339
|
class="${r.button}"
|
|
340
|
-
@click=${()=>{try{
|
|
340
|
+
@click=${()=>{try{i()}catch{}}}
|
|
341
341
|
title="Close"
|
|
342
342
|
>
|
|
343
343
|
×
|
|
344
344
|
</button>
|
|
345
345
|
</div>
|
|
346
346
|
</div>
|
|
347
|
-
`}catch{return
|
|
347
|
+
`}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`
|
|
348
348
|
<div class="${r.logsPanel}">
|
|
349
349
|
<div class="${r.logsToolbar}">
|
|
350
350
|
<div class="${r.logsFilterRow}">
|
|
351
351
|
<button
|
|
352
|
-
class="${r.logsFilterBtn} ${
|
|
353
|
-
@click=${()=>{try{
|
|
352
|
+
class="${r.logsFilterBtn} ${w==="all"?"active":""}"
|
|
353
|
+
@click=${()=>{try{w="all",e()}catch{}}}
|
|
354
354
|
>
|
|
355
355
|
All
|
|
356
356
|
</button>
|
|
357
357
|
<button
|
|
358
|
-
class="${r.logsFilterBtn} ${
|
|
358
|
+
class="${r.logsFilterBtn} ${w==="lifecycle"?"active":""}"
|
|
359
359
|
style="--mdt-filter-color: ${H.mount}"
|
|
360
|
-
@click=${()=>{try{
|
|
360
|
+
@click=${()=>{try{w=w==="lifecycle"?"all":"lifecycle",e()}catch{}}}
|
|
361
361
|
>
|
|
362
362
|
Mounts / Updates
|
|
363
363
|
</button>
|
|
364
364
|
<button
|
|
365
|
-
class="${r.logsFilterBtn} ${
|
|
365
|
+
class="${r.logsFilterBtn} ${w==="logs"?"active":""}"
|
|
366
366
|
style="--mdt-filter-color: ${H.setter}"
|
|
367
|
-
@click=${()=>{try{
|
|
367
|
+
@click=${()=>{try{w=w==="logs"?"all":"logs",e()}catch{}}}
|
|
368
368
|
>
|
|
369
369
|
Logs
|
|
370
370
|
</button>
|
|
371
371
|
<button
|
|
372
|
-
class="${r.logsFilterBtn} ${
|
|
372
|
+
class="${r.logsFilterBtn} ${w==="network"?"active":""}"
|
|
373
373
|
style="--mdt-filter-color: ${H.fetch}"
|
|
374
|
-
@click=${()=>{try{
|
|
374
|
+
@click=${()=>{try{w=w==="network"?"all":"network",e()}catch{}}}
|
|
375
375
|
>
|
|
376
376
|
Network
|
|
377
377
|
</button>
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
<span class="${r.logsCount}">${n.length} entries</span>
|
|
381
381
|
<button
|
|
382
382
|
class="${r.button}"
|
|
383
|
-
@click=${()=>{try{
|
|
383
|
+
@click=${()=>{try{we(),t()}catch{}}}
|
|
384
384
|
title="Clear logs"
|
|
385
385
|
>
|
|
386
386
|
🗑
|
|
@@ -389,27 +389,27 @@
|
|
|
389
389
|
</div>
|
|
390
390
|
|
|
391
391
|
<div class="${r.logsContainer}">
|
|
392
|
-
${n.length===0?
|
|
392
|
+
${n.length===0?o.html`<div class="${r.empty}">
|
|
393
393
|
No logs yet. Interact with the app to see activity.
|
|
394
|
-
</div>`:
|
|
394
|
+
</div>`:o.repeat(n,i=>i.id,i=>o.html`
|
|
395
395
|
<div class="${r.logEntry}">
|
|
396
|
-
<span class="${r.logTs}">${
|
|
396
|
+
<span class="${r.logTs}">${Pn(i.ts)}</span>
|
|
397
397
|
<span
|
|
398
398
|
class="${r.logBadge}"
|
|
399
|
-
style="background: ${H[
|
|
400
|
-
>${En[
|
|
399
|
+
style="background: ${H[i.category]}22; color: ${H[i.category]}; border-color: ${H[i.category]}44;"
|
|
400
|
+
>${En[i.category]}</span
|
|
401
401
|
>
|
|
402
|
-
<span class="${r.logLabel}">${
|
|
403
|
-
${
|
|
404
|
-
>${
|
|
405
|
-
>`:
|
|
402
|
+
<span class="${r.logLabel}">${i.label}</span>
|
|
403
|
+
${i.detail?o.html`<span class="${r.logDetail}"
|
|
404
|
+
>${i.detail}</span
|
|
405
|
+
>`:o.nothing}
|
|
406
406
|
</div>
|
|
407
407
|
`)}
|
|
408
408
|
</div>
|
|
409
409
|
</div>
|
|
410
|
-
`}catch{return
|
|
410
|
+
`}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}">
|
|
411
411
|
No render data yet. Interact with the app to see component performance.
|
|
412
|
-
</div>`;const e=Math.max(...t.map(n=>n.totalMs));return
|
|
412
|
+
</div>`;const e=Math.max(...t.map(n=>n.totalMs));return o.html`
|
|
413
413
|
<table class="${r.perfTable}">
|
|
414
414
|
<thead>
|
|
415
415
|
<tr>
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
</tr>
|
|
423
423
|
</thead>
|
|
424
424
|
<tbody>
|
|
425
|
-
${
|
|
425
|
+
${o.repeat(t,n=>n.name,n=>{const i=Ge(n.lastMs);return o.html`
|
|
426
426
|
<tr class="${r.perfRow}">
|
|
427
427
|
<td class="${r.perfCell} ${r.perfName}">
|
|
428
428
|
${n.name}
|
|
@@ -443,7 +443,7 @@
|
|
|
443
443
|
<div class="${r.perfBarWrap}">
|
|
444
444
|
<div
|
|
445
445
|
class="${r.perfBar}"
|
|
446
|
-
style="width: ${
|
|
446
|
+
style="width: ${We(n.totalMs,e)}%; background: ${i};"
|
|
447
447
|
></div>
|
|
448
448
|
<span class="${r.perfBarLabel}"
|
|
449
449
|
>${K(n.totalMs)}</span
|
|
@@ -454,9 +454,9 @@
|
|
|
454
454
|
`})}
|
|
455
455
|
</tbody>
|
|
456
456
|
</table>
|
|
457
|
-
`}catch{return
|
|
457
|
+
`}catch{return o.html``}}function Nn(t,e){try{if(t.length===0)return o.html`<div class="${r.empty}">
|
|
458
458
|
No render data yet. Interact with the app to see slow renders.
|
|
459
|
-
</div>`;const n=Math.max(...t.map(c=>c.durationMs)),
|
|
459
|
+
</div>`;const n=Math.max(...t.map(c=>c.durationMs)),i=!!e;return o.html`
|
|
460
460
|
<table class="${r.perfTable}">
|
|
461
461
|
<thead>
|
|
462
462
|
<tr>
|
|
@@ -466,11 +466,11 @@
|
|
|
466
466
|
</tr>
|
|
467
467
|
</thead>
|
|
468
468
|
<tbody>
|
|
469
|
-
${
|
|
469
|
+
${o.repeat(t,c=>c.id,c=>{const l=Ge(c.durationMs),a=i?()=>{try{e(c.instanceId)}catch{}}:void 0;return o.html`
|
|
470
470
|
<tr
|
|
471
|
-
class="${r.perfRow} ${
|
|
471
|
+
class="${r.perfRow} ${i?r.perfRowClickable:""}"
|
|
472
472
|
@click=${a}
|
|
473
|
-
title=${
|
|
473
|
+
title=${i?`Go to ${c.componentName} in Components tab`:""}
|
|
474
474
|
>
|
|
475
475
|
<td class="${r.perfCell} ${r.perfName}">
|
|
476
476
|
${c.componentName}
|
|
@@ -482,7 +482,7 @@
|
|
|
482
482
|
<div class="${r.perfBarWrap}">
|
|
483
483
|
<div
|
|
484
484
|
class="${r.perfBar}"
|
|
485
|
-
style="width: ${
|
|
485
|
+
style="width: ${We(c.durationMs,n)}%; background: ${l};"
|
|
486
486
|
></div>
|
|
487
487
|
</div>
|
|
488
488
|
</td>
|
|
@@ -490,7 +490,7 @@
|
|
|
490
490
|
`})}
|
|
491
491
|
</tbody>
|
|
492
492
|
</table>
|
|
493
|
-
`}catch{return
|
|
493
|
+
`}catch{return o.html``}}function Ue({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const i=Oe(),c=Ne(30);return o.html`
|
|
494
494
|
<div class="${r.perfPanel}">
|
|
495
495
|
<div class="${r.perfToolbar}">
|
|
496
496
|
<div class="${r.perfTabs}">
|
|
@@ -510,7 +510,7 @@
|
|
|
510
510
|
<div class="${r.perfActions}">
|
|
511
511
|
<button
|
|
512
512
|
class="${r.button}"
|
|
513
|
-
@click=${()=>{try{
|
|
513
|
+
@click=${()=>{try{je(),t()}catch{}}}
|
|
514
514
|
title="Clear performance data"
|
|
515
515
|
>
|
|
516
516
|
🗑
|
|
@@ -519,10 +519,10 @@
|
|
|
519
519
|
</div>
|
|
520
520
|
|
|
521
521
|
<div class="${r.perfContent}">
|
|
522
|
-
${Q==="summary"?
|
|
522
|
+
${Q==="summary"?Vn(i):Nn(c,n??null)}
|
|
523
523
|
</div>
|
|
524
524
|
</div>
|
|
525
|
-
`}catch{return
|
|
525
|
+
`}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=`
|
|
526
526
|
#mates-devtools {
|
|
527
527
|
--dt-bg: #1a1a1a;
|
|
528
528
|
--dt-bg-2: #222222;
|
|
@@ -555,7 +555,8 @@
|
|
|
555
555
|
}
|
|
556
556
|
|
|
557
557
|
@media (prefers-color-scheme: light) {
|
|
558
|
-
#mates-devtools
|
|
558
|
+
#mates-devtools,
|
|
559
|
+
#mates-devtools-fab {
|
|
559
560
|
--dt-bg: #f5f5f5;
|
|
560
561
|
--dt-bg-2: #ebebeb;
|
|
561
562
|
--dt-bg-3: #e0e0e0;
|
|
@@ -586,7 +587,39 @@
|
|
|
586
587
|
--dt-flash-bg: rgba(0,160,90,0.3);
|
|
587
588
|
}
|
|
588
589
|
}
|
|
589
|
-
|
|
590
|
+
|
|
591
|
+
#mates-devtools[data-theme="light"],
|
|
592
|
+
#mates-devtools-fab[data-theme="light"] {
|
|
593
|
+
--dt-bg: #f5f5f5;
|
|
594
|
+
--dt-bg-2: #ebebeb;
|
|
595
|
+
--dt-bg-3: #e0e0e0;
|
|
596
|
+
--dt-bg-input: #ffffff;
|
|
597
|
+
--dt-bg-hover: #e8e8e8;
|
|
598
|
+
--dt-bg-selected: #dbeafe;
|
|
599
|
+
--dt-bg-active: rgba(59,130,246,0.12);
|
|
600
|
+
--dt-border: #cccccc;
|
|
601
|
+
--dt-border-2: #d4d4d4;
|
|
602
|
+
--dt-border-3: #e4e4e4;
|
|
603
|
+
--dt-border-selected: #3b82f6;
|
|
604
|
+
--dt-text: #333333;
|
|
605
|
+
--dt-text-bright: #111111;
|
|
606
|
+
--dt-text-muted: #666666;
|
|
607
|
+
--dt-text-dim: #888888;
|
|
608
|
+
--dt-text-dimmer: #999999;
|
|
609
|
+
--dt-text-selected: #1d4ed8;
|
|
610
|
+
--dt-accent: #0077e6;
|
|
611
|
+
--dt-accent-2: #3b82f6;
|
|
612
|
+
--dt-scrollbar: #bbbbbb;
|
|
613
|
+
--dt-scrollbar-hover: #999999;
|
|
614
|
+
--dt-prop-key: #0070c1;
|
|
615
|
+
--dt-prop-val: #a31515;
|
|
616
|
+
--dt-scope-name: #007f6a;
|
|
617
|
+
--dt-hook-count: #0070c1;
|
|
618
|
+
--dt-instance-border: #3b82f6;
|
|
619
|
+
--dt-instance-bg: #f0f4ff;
|
|
620
|
+
--dt-flash-bg: rgba(0,160,90,0.3);
|
|
621
|
+
}
|
|
622
|
+
`,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`
|
|
590
623
|
<div class="${r.body}">
|
|
591
624
|
<div class="${r.leftColumn}">
|
|
592
625
|
<div class="${r.leftTabs}">
|
|
@@ -637,14 +670,14 @@
|
|
|
637
670
|
</svg>
|
|
638
671
|
</button>
|
|
639
672
|
</div>
|
|
640
|
-
${B==="list"?
|
|
673
|
+
${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})}
|
|
641
674
|
</div>
|
|
642
|
-
${
|
|
675
|
+
${Mt(B==="list"?{selectedGroup:Dt(),selectedInstanceId:b,onSelectInstance:Jn,onHighlight:e=>bt(e)}:{selectedComponent:qe()})}
|
|
643
676
|
</div>
|
|
644
|
-
`;case"logs":return
|
|
677
|
+
`;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`
|
|
645
678
|
<div class="${r.panel}" style="height: ${D}px;">
|
|
646
|
-
<div class="${r.resizeHandle}" @mousedown=${
|
|
647
|
-
${
|
|
679
|
+
<div class="${r.resizeHandle}" @mousedown=${dr}></div>
|
|
680
|
+
${he({activeTab:Z,onTabChange:Qn,onMinimise:Zn,onClose:er,unreadLogCount:Z==="logs"?0:$e()})}
|
|
648
681
|
${t}
|
|
649
682
|
</div>
|
|
650
|
-
`,
|
|
683
|
+
`,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"})}));
|