mates-devtools 0.1.0-beta.6 → 0.1.0-beta.7
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.
- package/dist/mates-devtools.es.js +912 -734
- package/dist/mates-devtools.umd.js +132 -87
- package/dist/types/Mates-DevTools/src/MatesDevTools.d.ts.map +1 -1
- package/dist/types/Mates-DevTools/src/MatesDevToolsComponent.d.ts.map +1 -1
- package/dist/types/Mates-DevTools/src/components/Header.d.ts +3 -2
- package/dist/types/Mates-DevTools/src/components/Header.d.ts.map +1 -1
- package/dist/types/Mates-DevTools/src/components/UserLogsViewer.d.ts +6 -0
- package/dist/types/Mates-DevTools/src/components/UserLogsViewer.d.ts.map +1 -0
- package/dist/types/Mates-DevTools/src/userLogStore.d.ts +26 -0
- package/dist/types/Mates-DevTools/src/userLogStore.d.ts.map +1 -0
- package/dist/types/lib/Directives/animationClasses.d.ts +1 -1
- package/dist/types/lib/Directives/customEvent.d.ts +74 -0
- package/dist/types/lib/Directives/customEvent.d.ts.map +1 -0
- package/dist/types/lib/Directives/disappear.d.ts +23 -0
- package/dist/types/lib/Directives/disappear.d.ts.map +1 -0
- package/dist/types/lib/Directives/eleHook.d.ts.map +1 -1
- package/dist/types/lib/Directives/htmlHook.d.ts.map +1 -1
- package/dist/types/lib/Directives/index.d.ts +5 -3
- package/dist/types/lib/Directives/index.d.ts.map +1 -1
- package/dist/types/lib/Directives/onDirective.d.ts.map +1 -1
- package/dist/types/lib/Directives/onParentDirective.d.ts +1 -1
- package/dist/types/lib/Directives/timerDirective.d.ts +6 -6
- package/dist/types/lib/Directives/timerDirective.d.ts.map +1 -1
- package/dist/types/lib/Directives/virtualHelpers.d.ts +8 -6
- package/dist/types/lib/Directives/virtualHelpers.d.ts.map +1 -1
- package/dist/types/lib/Fetch/Fetch.d.ts +59 -13
- package/dist/types/lib/Fetch/Fetch.d.ts.map +1 -1
- package/dist/types/lib/MatesUtils/FetchUtils.d.ts +23 -0
- package/dist/types/lib/MatesUtils/FetchUtils.d.ts.map +1 -0
- package/dist/types/lib/MatesUtils/MatesUtils.d.ts +47 -0
- package/dist/types/lib/MatesUtils/MatesUtils.d.ts.map +1 -0
- package/dist/types/lib/MatesUtils/RouterUtils.d.ts +39 -0
- package/dist/types/lib/MatesUtils/RouterUtils.d.ts.map +1 -0
- package/dist/types/lib/MatesUtils/StorageUtils.d.ts +16 -0
- package/dist/types/lib/MatesUtils/StorageUtils.d.ts.map +1 -0
- package/dist/types/lib/MatesUtils/ThemeUtils.d.ts +18 -0
- package/dist/types/lib/MatesUtils/ThemeUtils.d.ts.map +1 -0
- package/dist/types/lib/MatesUtils/index.d.ts +6 -0
- package/dist/types/lib/MatesUtils/index.d.ts.map +1 -0
- package/dist/types/lib/Mutables/Extended Atoms/changeFlagAtom.d.ts +56 -0
- package/dist/types/lib/Mutables/Extended Atoms/changeFlagAtom.d.ts.map +1 -0
- package/dist/types/lib/Mutables/Extended Atoms/index.d.ts +1 -0
- package/dist/types/lib/Mutables/Extended Atoms/index.d.ts.map +1 -1
- package/dist/types/lib/Mutables/Extended Atoms/themeAtom.d.ts +3 -15
- package/dist/types/lib/Mutables/Extended Atoms/themeAtom.d.ts.map +1 -1
- package/dist/types/lib/Mutables/atom/atom.d.ts.map +1 -1
- package/dist/types/lib/Mutables/atom/delayAtom.d.ts +40 -0
- package/dist/types/lib/Mutables/atom/delayAtom.d.ts.map +1 -0
- package/dist/types/lib/Mutables/atom/index.d.ts +2 -1
- package/dist/types/lib/Mutables/atom/index.d.ts.map +1 -1
- package/dist/types/lib/Mutables/atom/storageAtom.d.ts +9 -31
- package/dist/types/lib/Mutables/atom/storageAtom.d.ts.map +1 -1
- package/dist/types/lib/Mutables/atom/titleAtom.d.ts +3 -9
- package/dist/types/lib/Mutables/atom/titleAtom.d.ts.map +1 -1
- package/dist/types/lib/Mutables/form/formAtom.d.ts +7 -5
- package/dist/types/lib/Mutables/form/formAtom.d.ts.map +1 -1
- package/dist/types/lib/Mutables/scope/scope.d.ts +32 -1
- package/dist/types/lib/Mutables/scope/scope.d.ts.map +1 -1
- package/dist/types/lib/Mutables/useStore/hostContext.d.ts.map +1 -1
- package/dist/types/lib/Mutables/useStore/subscription.d.ts +1 -1
- package/dist/types/lib/Mutables/useStore/subscription.d.ts.map +1 -1
- package/dist/types/lib/Router/Router.d.ts +2 -2
- package/dist/types/lib/Router/Router.d.ts.map +1 -1
- package/dist/types/lib/Router/animatedRouter.d.ts.map +1 -1
- package/dist/types/lib/Router/hashAtom.d.ts +7 -3
- package/dist/types/lib/Router/hashAtom.d.ts.map +1 -1
- package/dist/types/lib/Router/historyStateAtom.d.ts +8 -0
- package/dist/types/lib/Router/historyStateAtom.d.ts.map +1 -0
- package/dist/types/lib/Router/historyUtils.d.ts +14 -0
- package/dist/types/lib/Router/historyUtils.d.ts.map +1 -0
- package/dist/types/lib/Router/index.d.ts +2 -6
- package/dist/types/lib/Router/index.d.ts.map +1 -1
- package/dist/types/lib/Router/isPathMatching.d.ts +5 -1
- package/dist/types/lib/Router/isPathMatching.d.ts.map +1 -1
- package/dist/types/lib/Router/location.d.ts +4 -63
- package/dist/types/lib/Router/location.d.ts.map +1 -1
- package/dist/types/lib/Router/navigateTo.d.ts +8 -27
- package/dist/types/lib/Router/navigateTo.d.ts.map +1 -1
- package/dist/types/lib/Router/navigationLock.d.ts +5 -46
- package/dist/types/lib/Router/navigationLock.d.ts.map +1 -1
- package/dist/types/lib/Router/navigationRequest.d.ts +26 -0
- package/dist/types/lib/Router/navigationRequest.d.ts.map +1 -0
- package/dist/types/lib/Router/pathAtom.d.ts +16 -36
- package/dist/types/lib/Router/pathAtom.d.ts.map +1 -1
- package/dist/types/lib/Router/qsAtom.d.ts +7 -3
- package/dist/types/lib/Router/qsAtom.d.ts.map +1 -1
- package/dist/types/lib/Template/hmr.d.ts +6 -0
- package/dist/types/lib/Template/hmr.d.ts.map +1 -0
- package/dist/types/lib/Template/x-x.d.ts +1 -0
- package/dist/types/lib/Template/x-x.d.ts.map +1 -1
- package/dist/types/lib/Template/x-x.types.d.ts +0 -22
- package/dist/types/lib/Template/x-x.types.d.ts.map +1 -1
- package/dist/types/lib/Template/x.d.ts +19 -2
- package/dist/types/lib/Template/x.d.ts.map +1 -1
- package/dist/types/lib/TrackState/componentStatus.d.ts +0 -5
- package/dist/types/lib/TrackState/componentStatus.d.ts.map +1 -1
- package/dist/types/lib/TrackState/readTracking.d.ts.map +1 -1
- package/dist/types/lib/Utils/cookie.d.ts +2 -0
- package/dist/types/lib/Utils/cookie.d.ts.map +1 -0
- package/dist/types/lib/Utils/countdown.d.ts +48 -0
- package/dist/types/lib/Utils/countdown.d.ts.map +1 -0
- package/dist/types/lib/Utils/index.d.ts +3 -0
- package/dist/types/lib/Utils/index.d.ts.map +1 -1
- package/dist/types/lib/Utils/logEvent.d.ts +24 -0
- package/dist/types/lib/Utils/logEvent.d.ts.map +1 -0
- package/dist/types/lib/Utils/logger.d.ts +24 -13
- package/dist/types/lib/Utils/logger.d.ts.map +1 -1
- package/dist/types/lib/Utils/onceIdle.d.ts +28 -0
- package/dist/types/lib/Utils/onceIdle.d.ts.map +1 -0
- package/dist/types/lib/Utils/svgIcon.d.ts +2 -4
- package/dist/types/lib/Utils/svgIcon.d.ts.map +1 -1
- package/dist/types/lib/actions/asyncAction.d.ts.map +1 -1
- package/dist/types/lib/css-in-js/index.d.ts +1 -1
- package/dist/types/lib/css-in-js/index.d.ts.map +1 -1
- package/dist/types/lib/css-in-js/stylesheet.d.ts +15 -0
- package/dist/types/lib/css-in-js/stylesheet.d.ts.map +1 -1
- package/dist/types/lib/css-in-js/theme.d.ts +0 -8
- package/dist/types/lib/css-in-js/theme.d.ts.map +1 -1
- package/dist/types/lib/index.d.ts +25 -18
- package/dist/types/lib/index.d.ts.map +1 -1
- package/dist/types/lib/indexdb/index.d.ts +3 -0
- package/dist/types/lib/indexdb/index.d.ts.map +1 -0
- package/dist/types/lib/indexdb/indexdb.d.ts +86 -0
- package/dist/types/lib/indexdb/indexdb.d.ts.map +1 -0
- package/dist/types/lib/indexdb/types.d.ts +249 -0
- package/dist/types/lib/indexdb/types.d.ts.map +1 -0
- package/dist/types/lib/minidb/index.d.ts +3 -0
- package/dist/types/lib/minidb/index.d.ts.map +1 -0
- package/dist/types/lib/minidb/minidb.d.ts +105 -0
- package/dist/types/lib/minidb/minidb.d.ts.map +1 -0
- package/dist/types/lib/on/hooks.d.ts.map +1 -1
- package/dist/types/lib/portals/floating-container.d.ts +129 -0
- package/dist/types/lib/portals/floating-container.d.ts.map +1 -0
- package/dist/types/lib/portals/index.d.ts +5 -3
- package/dist/types/lib/portals/index.d.ts.map +1 -1
- package/dist/types/lib/portals/popup.d.ts +75 -11
- package/dist/types/lib/portals/popup.d.ts.map +1 -1
- package/dist/types/lib/portals/popupPlacement.d.ts +52 -0
- package/dist/types/lib/portals/popupPlacement.d.ts.map +1 -0
- package/dist/types/lib/portals/portal.d.ts +40 -16
- package/dist/types/lib/portals/portal.d.ts.map +1 -1
- package/dist/types/lib/socket/ws.d.ts +2 -2
- package/dist/types/lib/ssr/index.d.ts +1 -0
- package/dist/types/lib/ssr/index.d.ts.map +1 -1
- package/dist/types/lib/ssr/ssrFlag.d.ts +56 -21
- package/dist/types/lib/ssr/ssrFlag.d.ts.map +1 -1
- package/dist/types/lib/ssr/useCtx.d.ts +63 -0
- package/dist/types/lib/ssr/useCtx.d.ts.map +1 -0
- package/dist/types/lib/virtualizer/Virtualizer.d.ts +3 -2
- package/dist/types/lib/virtualizer/Virtualizer.d.ts.map +1 -1
- package/dist/types/lib/virtualizer/layouts/shared/BaseLayout.d.ts +8 -0
- package/dist/types/lib/virtualizer/layouts/shared/BaseLayout.d.ts.map +1 -1
- package/dist/types/lib/virtualizer/mates-adapter.d.ts +36 -88
- package/dist/types/lib/virtualizer/mates-adapter.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/types/lib/Router/pathResolver.d.ts +0 -9
- package/dist/types/lib/Router/pathResolver.d.ts.map +0 -1
- package/dist/types/lib/portals/tip.d.ts +0 -38
- package/dist/types/lib/portals/tip.d.ts.map +0 -1
- package/dist/types/lib/virtualizer/layouts/grid.d.ts +0 -25
- package/dist/types/lib/virtualizer/layouts/grid.d.ts.map +0 -1
|
@@ -1,53 +1,53 @@
|
|
|
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(a,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("mates")):typeof define=="function"&&define.amd?define(["exports","mates"],i):(a=typeof globalThis<"u"?globalThis:a||self,i(a.MatesDevTools={},a.Mates))})(this,(function(a,i){"use strict";const qt="selected",pn="selected",fn=i.keyframes("mates-dt-flash",{"0%":{background:"var(--dt-flash-bg)",color:"#fff"},"100%":{background:"transparent",color:"var(--dt-text-muted)"}}),lt={"&::-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",...lt},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",...lt},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:`${fn} 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",...lt},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",...lt},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"}}),Ct=new Set,st=new WeakMap,at=new WeakMap,j=i.event("devtools");function Jt(t,e){try{Ct.add(t);let n=st.get(e);n||(n=new Set,st.set(e,n)),n.add(t),at.set(t,1),j.trigger({type:"mount",component:t})}catch{}}function Kt(t,e){try{if(Ct.delete(t),e){const n=st.get(e);n&&n.delete(t)}j.trigger({type:"unmount",component:t})}catch{}}function Qt(t){try{const e=at.get(t)??0;at.set(t,e+1),j.trigger({type:"render",component:t})}catch{}}function W(t){try{return at.get(t)??0}catch{}return 0}function E(t){try{return t._depth??0}catch{}return 0}function Tt(t){try{return t._parentComponent??null}catch{}return null}function Mt(){try{return Array.from(Ct).filter(t=>{const e=t._view||t.oldView;return!e?.__devtools__&&!e?.skipDevToolsRender})}catch{}return[]}function hn(t){try{const e=st.get(t);return e?Array.from(e):[]}catch{}return[]}function R(t){try{return(t._view||t.oldView)?.name||"Anonymous"}catch{}return""}function gn(t){try{return t._view||t.oldView||null}catch{}return null}function Zt(){try{const t=Mt(),e=new Map;for(const o of t){const c=gn(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=s=>s.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;"},te=new WeakMap;let ee=null;function It(t){try{ee=t}catch{}}function ne(t){try{let e=te.get(t);return e||(e=new Set,te.set(t,e)),e}catch{return new Set}}function mn(t,e){try{return ne(t).has(e)}catch{return!1}}function yn(t,e){try{const n=ne(t);n.has(e)?n.delete(e):n.add(e);try{ee?.()}catch{}}catch{}}function bn(t){try{return t==null?!1:typeof t=="object"}catch{return!1}}function dt(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 re(t,e=60){try{const n=dt(t);if(n==="array"){const o=t;if(o.length===0)return"[]";const c=o.slice(0,5).map(s=>oe(s)).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}: ${oe(o[d])}`).join(", "),s=c.length>4?", …":"",u=`{${l}${s}}`;return u.length>e?u.slice(0,e-1)+"…}":u}return String(t)}catch{return""}}function oe(t){try{switch(dt(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 vn(t){try{switch(dt(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}"
|
|
2
2
|
>ƒ ${t.name||"anonymous"}()</span
|
|
3
3
|
>`;case"symbol":return i.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return i.html`<span style="${h.string}"
|
|
4
4
|
>${t.toISOString()}</span
|
|
5
|
-
>`;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
|
|
5
|
+
>`;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 xn(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`
|
|
6
6
|
<div style="${h.row}">
|
|
7
7
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
8
8
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
9
9
|
<span style="${h.preview}">[max depth]</span>
|
|
10
10
|
</div>
|
|
11
|
-
`;const l=
|
|
11
|
+
`;const l=bn(n),s=l&&mn(t,o);if(!l)return i.html`
|
|
12
12
|
<div style="${h.row}">
|
|
13
13
|
<span style="${h.toggle}"></span>
|
|
14
14
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
15
15
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
16
|
-
${
|
|
16
|
+
${vn(n)}
|
|
17
17
|
</div>
|
|
18
|
-
`;const u=
|
|
18
|
+
`;const u=s?xn(n):[],d=dt(n);return i.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(),yn(t,o)}catch{}}}
|
|
23
23
|
>
|
|
24
|
-
<span style="${h.toggle}">${
|
|
24
|
+
<span style="${h.toggle}">${s?"▼":"▶"}</span>
|
|
25
25
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
26
26
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
27
|
-
${
|
|
28
|
-
>${d==="array"?`Array(${n.length})`:d==="object"?"{":
|
|
29
|
-
>`:i.html`<span style="${h.preview}">${
|
|
27
|
+
${s?i.html`<span style="${h.preview}"
|
|
28
|
+
>${d==="array"?`Array(${n.length})`:d==="object"?"{":re(n)}</span
|
|
29
|
+
>`:i.html`<span style="${h.preview}">${re(n)}</span>`}
|
|
30
30
|
</div>
|
|
31
|
-
${
|
|
31
|
+
${s?i.html`
|
|
32
32
|
<div style="${h.children}">
|
|
33
33
|
${u.map(p=>T(t,p.key,p.value,`${o}.${p.key}`,c+1))}
|
|
34
34
|
${u.length===0?i.html`<div style="${h.row}">
|
|
35
35
|
<span style="${h.preview}">(empty)</span>
|
|
36
36
|
</div>`:i.nothing}
|
|
37
37
|
</div>
|
|
38
|
-
${d==="object"&&
|
|
38
|
+
${d==="object"&&s?i.html`<div style="${h.row};margin-left:14px;">
|
|
39
39
|
<span style="${h.preview}">}</span>
|
|
40
40
|
</div>`:i.nothing}
|
|
41
41
|
`:i.nothing}
|
|
42
42
|
</div>
|
|
43
|
-
`}catch{return i.html``}}function
|
|
43
|
+
`}catch{return i.html``}}function $n(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;">
|
|
44
44
|
No data
|
|
45
45
|
</div>`:i.html`
|
|
46
46
|
${o.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
|
|
47
|
-
`}catch{return i.html``}}function
|
|
47
|
+
`}catch{return i.html``}}function ie(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`
|
|
48
48
|
${i.repeat(e,n=>n,n=>T(t,n,t[n],`props.${n}`,0))}
|
|
49
|
-
`}catch{return i.html``}}function
|
|
50
|
-
${[...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
|
|
49
|
+
`}catch{return i.html``}}function ce(t){try{return!t||t.size===0?i.html`<div style="color: #777; font-size: 13px;">No scopes</div>`:i.html`
|
|
50
|
+
${[...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 s=Object.getPrototypeOf(n);for(;s&&s!==Object.prototype;){for(const d of Object.getOwnPropertyNames(s)){if(l.has(d)||d==="constructor"||d==="__isScope___"||d==="reset")continue;if(Object.getOwnPropertyDescriptor(s,d)?.get){l.add(d);try{c[`${d} (get)`]=n[d]}catch{c[`${d} (get)`]="[error reading]"}}}s=Object.getPrototypeOf(s)}const u=n;return i.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;"
|
|
@@ -63,20 +63,20 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
`}catch{return i.html``}})}
|
|
66
|
-
`}catch{return i.html``}}function
|
|
66
|
+
`}catch{return i.html``}}function _n(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 le(t){try{const e=_n(t);return e.length===0?i.html`<div style="color: #777; font-size: 13px;">No atoms</div>`:i.html`
|
|
67
67
|
${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)})}
|
|
68
|
-
`}catch{return i.html``}}function
|
|
68
|
+
`}catch{return i.html``}}function se(t){try{return!t||t.length===0?i.html`<div style="color: #777; font-size: 13px;">No state</div>`:i.html`
|
|
69
69
|
${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)})}
|
|
70
|
-
`}catch{return i.html``}}function
|
|
70
|
+
`}catch{return i.html``}}function wn(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 Sn(t,e){try{return i.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 i.html``}}function
|
|
75
|
+
`}catch{return i.html``}}function Bt(t){try{const e=wn(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`
|
|
76
76
|
<div class="${r.hooksSummary}">
|
|
77
|
-
${n.map(o=>
|
|
77
|
+
${n.map(o=>Sn(o.label,o.count))}
|
|
78
78
|
</div>
|
|
79
|
-
`}catch{return i.html``}}function
|
|
79
|
+
`}catch{return i.html``}}function kn(t,e){try{t.stopPropagation(),$t(e)}catch{}}function Cn(t){try{const e=[];let n=Tt(t);for(;n;)e.push(R(n)),n=Tt(n);return e.reverse(),e}catch{return[]}}function ae(t){try{const e=Cn(t),n=R(t);if(e.length===0)return i.html`
|
|
80
80
|
<div class="${r.inspectorBreadcrumb}">
|
|
81
81
|
<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
|
|
82
82
|
>${n}</span
|
|
@@ -84,27 +84,27 @@
|
|
|
84
84
|
</div>
|
|
85
85
|
`;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}"
|
|
86
86
|
>${n}</span
|
|
87
|
-
>`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function
|
|
87
|
+
>`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function de(t){try{return i.html`
|
|
88
88
|
<div class="${r.instanceDetails}">
|
|
89
89
|
<div class="${r.sectionHeader}">Props</div>
|
|
90
|
-
${
|
|
90
|
+
${ie(t._props||{})}
|
|
91
91
|
|
|
92
92
|
<div class="${r.sectionHeader}">State</div>
|
|
93
|
-
${
|
|
93
|
+
${se(t._useStates)}
|
|
94
94
|
|
|
95
95
|
<div class="${r.sectionHeader}">Atoms</div>
|
|
96
|
-
${
|
|
96
|
+
${le(t.cleanups)}
|
|
97
97
|
|
|
98
98
|
<div class="${r.sectionHeader}">Scopes</div>
|
|
99
|
-
${
|
|
99
|
+
${ce(t.scopes)}
|
|
100
100
|
</div>
|
|
101
|
-
`}catch{return i.html``}}function
|
|
101
|
+
`}catch{return i.html``}}function ue(){try{return i.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 i.html``}}function
|
|
105
|
+
`}catch{return i.html``}}function pe(t){try{const e=R(t),n=t.componentId,o=E(t),c=W(t);return i.html`
|
|
106
106
|
<div class="${r.inspector}">
|
|
107
|
-
${
|
|
107
|
+
${ae(t)}
|
|
108
108
|
<div class="${r.inspectorTitle}">
|
|
109
109
|
<span>${e}</span>
|
|
110
110
|
<span class="${r.instanceCount}">
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<button
|
|
114
114
|
class="${r.highlightBtn}"
|
|
115
115
|
style="opacity: 1;"
|
|
116
|
-
@click=${l=>{try{
|
|
116
|
+
@click=${l=>{try{kn(l,t)}catch{}}}
|
|
117
117
|
title="Highlight in DOM"
|
|
118
118
|
>
|
|
119
119
|
<svg
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
</button>
|
|
134
134
|
</div>
|
|
135
135
|
|
|
136
|
-
${
|
|
136
|
+
${Bt(t)} ${de(t)}
|
|
137
137
|
</div>
|
|
138
|
-
`}catch{return i.html``}}function
|
|
138
|
+
`}catch{return i.html``}}function Tn(t,e,n,o){try{const{name:c,instances:l}=t;return i.html`
|
|
139
139
|
<div class="${r.inspector}">
|
|
140
140
|
<div class="${r.inspectorTitle}">
|
|
141
141
|
<span>${c}</span>
|
|
@@ -145,10 +145,10 @@
|
|
|
145
145
|
</div>
|
|
146
146
|
|
|
147
147
|
<ul class="${r.instanceList}">
|
|
148
|
-
${i.repeat(l,
|
|
148
|
+
${i.repeat(l,s=>s.componentId,s=>{const u=s.componentId,d=E(s),p=W(s),b=e===u;return i.html`
|
|
149
149
|
<li class="${r.instanceGroup}">
|
|
150
150
|
<div
|
|
151
|
-
class="${r.instanceItem} ${b?
|
|
151
|
+
class="${r.instanceItem} ${b?pn:""}"
|
|
152
152
|
@click=${()=>{try{n(u)}catch{}}}
|
|
153
153
|
>
|
|
154
154
|
<span
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
>
|
|
165
165
|
<button
|
|
166
166
|
class="${r.componentHighlightBtn}"
|
|
167
|
-
@click=${m=>{try{m.stopPropagation(),o(
|
|
167
|
+
@click=${m=>{try{m.stopPropagation(),o(s)}catch{}}}
|
|
168
168
|
title="Highlight in page"
|
|
169
169
|
>
|
|
170
170
|
<svg
|
|
@@ -184,21 +184,21 @@
|
|
|
184
184
|
</button>
|
|
185
185
|
</div>
|
|
186
186
|
${b?i.html`
|
|
187
|
-
${
|
|
188
|
-
${
|
|
187
|
+
${ae(s)} ${Bt(s)}
|
|
188
|
+
${de(s)}
|
|
189
189
|
`:i.nothing}
|
|
190
190
|
</li>
|
|
191
191
|
`})}
|
|
192
192
|
</ul>
|
|
193
193
|
</div>
|
|
194
|
-
`}catch{return i.html``}}function
|
|
194
|
+
`}catch{return i.html``}}function Lt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?pe(t.selectedComponent):ue();const{selectedGroup:e,selectedInstanceId:n,onSelectInstance:o,onHighlight:c}=t;return e?e.instances.length===1?pe(e.instances[0]):Tn(e,n,o,c):ue()}catch{return i.html``}}const M=new Set;let U=null,G=null,Y=null,X=null,ut=!1,pt=!1;const ft=i.atom(0);ft.skipDevToolsLog=!0;function A(){try{ft.set(M.size)}catch{}}function q(t){pt=!0;try{return t()}finally{pt=!1}}function Mn(){try{if(ut)return;ut=!0,U=window.setTimeout,G=window.setInterval,Y=window.clearTimeout,X=window.clearInterval;const t=U,e=G,n=Y,o=X;window.setTimeout=function(l,s,...u){let d;try{if(typeof l!="function")return d=t(l,s,...u),d;const p=l;d=t(function(...m){try{return M.delete(d)&&A(),p.apply(this,m.length?m:u)}catch{}},s,...u),pt||(M.add(d),A())}catch{d=t(l,s,...u)}return d},window.setInterval=function(l,s,...u){let d;try{if(typeof l!="function")return d=e(l,s,...u),d;const p=l;d=e(function(...m){try{return p.apply(this,m.length?m:u)}catch{}},s,...u),pt||(M.add(d),A())}catch{d=e(l,s,...u)}return d},window.clearTimeout=function(l){try{l!==void 0&&M.delete(l)&&A()}catch{}n(l)},window.clearInterval=function(l){try{l!==void 0&&M.delete(l)&&A()}catch{}o(l)}}catch{}}function In(){try{if(!ut)return;ut=!1,U&&(window.setTimeout=U),G&&(window.setInterval=G),Y&&(window.clearTimeout=Y),X&&(window.clearInterval=X),U=null,G=null,Y=null,X=null,M.clear(),A()}catch{}}const Et=new WeakMap;let Bn=0;function Ln(t){return Et.has(t)||Et.set(t,`mdt-hl-${++Bn}`),Et.get(t)}function fe(t,e,n){try{const o=n.get(e),c=o!==void 0&&o!==t;n.set(e,t);const l=Ln(e);return c&&q(()=>setTimeout(()=>{try{const s=document.getElementById(l);if(!s)return;s.classList.remove("mdt-highlight-flash"),s.offsetWidth,s.classList.add("mdt-highlight-flash"),setTimeout(()=>{try{s.classList.remove("mdt-highlight-flash")}catch{}},600)}catch{}},0)),i.html`<span id="${l}" class="mdt-highlight">${t}</span>`}catch{return i.html``}}const En=new WeakMap;let Rt="";function Rn(t){try{let e=0;for(const n of t.instances){const o=W(n);o>e&&(e=o)}return e}catch{return 0}}function At(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 he({groups:t,selectedViewFn:e,onSelectGroup:n,onHighlight:o,renderCallback:c}){try{const l=Rt.trim().toLowerCase(),u=[...l?t.filter(p=>p.name.toLowerCase().includes(l)):t].sort((p,b)=>{const m=At(p),v=At(b);return m-v||p.name.localeCompare(b.name)}),d=p=>{try{Rt=p.target.value,c()}catch{}};return i.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=${Rt}
|
|
202
202
|
@input=${d}
|
|
203
203
|
/>
|
|
204
204
|
</div>
|
|
@@ -206,18 +206,18 @@
|
|
|
206
206
|
${l?"No matching components":"No components mounted"}
|
|
207
207
|
</div>`:i.html`
|
|
208
208
|
<ul class="${r.componentList}">
|
|
209
|
-
${i.repeat(u,p=>p.viewFn,p=>{const b=
|
|
209
|
+
${i.repeat(u,p=>p.viewFn,p=>{const b=Rn(p),m=e===p.viewFn,v=At(p),kt=p.instances.length,dn=p.instances[0];return i.html`
|
|
210
210
|
<li
|
|
211
|
-
class="${r.componentItem} ${m?
|
|
211
|
+
class="${r.componentItem} ${m?qt:""}"
|
|
212
212
|
@click=${()=>{try{n(p.viewFn)}catch{}}}
|
|
213
213
|
>
|
|
214
|
-
${
|
|
214
|
+
${fe(b,dn,En)}
|
|
215
215
|
<span class="${r.componentName}"
|
|
216
216
|
>${p.name}</span
|
|
217
217
|
>
|
|
218
|
-
${
|
|
218
|
+
${kt>1?i.html`<span
|
|
219
219
|
class="${r.componentCount} ${m?r.componentCountSelected:""}"
|
|
220
|
-
>×${
|
|
220
|
+
>×${kt}</span
|
|
221
221
|
>`:""}
|
|
222
222
|
<span
|
|
223
223
|
class="${r.componentBadge} ${m?r.componentBadgeSelected:""}"
|
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
>
|
|
226
226
|
<button
|
|
227
227
|
class="${r.componentHighlightBtn} ${m?r.componentHighlightBtnSelected:""}"
|
|
228
|
-
@click=${
|
|
228
|
+
@click=${un=>{try{un.stopPropagation(),o(dn)}catch{}}}
|
|
229
229
|
title="Highlight in page"
|
|
230
230
|
>
|
|
231
231
|
<svg
|
|
@@ -250,16 +250,16 @@
|
|
|
250
250
|
</ul>
|
|
251
251
|
`}
|
|
252
252
|
</div>
|
|
253
|
-
`}catch{return i.html``}}const
|
|
253
|
+
`}catch{return i.html``}}const An=new WeakMap,Pt=new WeakSet;function Pn(t){try{const e=new Set(t),n=new Map;for(const l of t)n.set(l,{component:l,name:R(l),depth:E(l),id:l.componentId,children:[]});const o=[];for(const l of t){const s=n.get(l),u=Tt(l);if(u&&e.has(u)){const d=n.get(u);if(d){d.children.push(s);continue}}o.push(s)}const c=l=>{try{l.sort((s,u)=>s.depth-u.depth||s.name.localeCompare(u.name));for(const s of l)c(s.children)}catch{}};return c(o),o}catch{return[]}}function ge(t,e,n,o,c){try{const l=t.children.length>0,s=Pt.has(t.component),u=W(t.component),d=e===t.id,p=t.depth*16,b=v=>{try{v.stopPropagation(),s?Pt.delete(t.component):Pt.add(t.component),c()}catch{}},m=()=>{try{n(t.id)}catch{}};return i.html`
|
|
254
254
|
<li
|
|
255
|
-
class="${r.componentItem} ${d?
|
|
255
|
+
class="${r.componentItem} ${d?qt:""}"
|
|
256
256
|
style="margin-left: ${p}px;"
|
|
257
257
|
@click=${m}
|
|
258
258
|
>
|
|
259
259
|
${l?i.html`<span class="${r.treeToggle}" @click=${b}
|
|
260
|
-
>${
|
|
260
|
+
>${s?"▶":"▼"}</span
|
|
261
261
|
>`:i.html`<span class="${r.treeLeaf}">·</span>`}
|
|
262
|
-
${
|
|
262
|
+
${fe(u,t.component,An)}
|
|
263
263
|
<span class="${r.componentName}">${t.name}</span>
|
|
264
264
|
<span class="${r.componentBadge}"
|
|
265
265
|
>#${t.id.toString().slice(2,6)}</span
|
|
@@ -287,16 +287,16 @@
|
|
|
287
287
|
</svg>
|
|
288
288
|
</button>
|
|
289
289
|
</li>
|
|
290
|
-
${l&&!
|
|
291
|
-
`}catch{return i.html``}}function
|
|
290
|
+
${l&&!s?i.repeat(t.children,v=>v.component,v=>ge(v,e,n,o,c)):i.nothing}
|
|
291
|
+
`}catch{return i.html``}}function me({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:o}){try{const c=Mt(),l=Pn(c);return i.html`
|
|
292
292
|
<div class="${r.content}">
|
|
293
293
|
${l.length===0?i.html`<div class="${r.empty}">No components mounted</div>`:i.html`
|
|
294
294
|
<ul class="${r.componentList}">
|
|
295
|
-
${i.repeat(l,
|
|
295
|
+
${i.repeat(l,s=>s.component,s=>ge(s,t,e,n,o))}
|
|
296
296
|
</ul>
|
|
297
297
|
`}
|
|
298
298
|
</div>
|
|
299
|
-
`}catch{return i.html``}}const
|
|
299
|
+
`}catch{return i.html``}}const ye=()=>(i.effect(()=>{try{console.log(ft())}catch{}}),()=>{try{return i.html`Active Timers (${ft()})`}catch{return i.html``}});ye.skipDevToolsRender=!0;function be({activeTab:t,onTabChange:e,onMinimise:n,onClose:o,unreadLogCount:c,unreadUserLogCount:l}){try{return i.html`
|
|
300
300
|
<div class="${r.header}">
|
|
301
301
|
<div class="${r.headerLeft}">
|
|
302
302
|
<div class="${r.title}">🔧 Mates DevTools</div>
|
|
@@ -316,6 +316,15 @@
|
|
|
316
316
|
>${c>99?"99+":c}</span
|
|
317
317
|
>`:""}
|
|
318
318
|
</button>
|
|
319
|
+
<button
|
|
320
|
+
class="${r.tabBtn} ${t==="user-logs"?"active":""}"
|
|
321
|
+
@click=${()=>{try{e("user-logs")}catch{}}}
|
|
322
|
+
>
|
|
323
|
+
User Logs
|
|
324
|
+
${l>0?i.html`<span class="${r.tabBadge}"
|
|
325
|
+
>${l>99?"99+":l}</span
|
|
326
|
+
>`:""}
|
|
327
|
+
</button>
|
|
319
328
|
<button
|
|
320
329
|
class="${r.tabBtn} ${t==="performance"?"active":""}"
|
|
321
330
|
@click=${()=>{try{e("performance")}catch{}}}
|
|
@@ -325,7 +334,7 @@
|
|
|
325
334
|
</nav>
|
|
326
335
|
</div>
|
|
327
336
|
<div>
|
|
328
|
-
<button style="margin-left: 10px">${i.x(
|
|
337
|
+
<button style="margin-left: 10px">${i.x(ye)}</button>
|
|
329
338
|
</div>
|
|
330
339
|
<div class="${r.controls}">
|
|
331
340
|
<button
|
|
@@ -344,7 +353,7 @@
|
|
|
344
353
|
</button>
|
|
345
354
|
</div>
|
|
346
355
|
</div>
|
|
347
|
-
`}catch{return i.html``}}let
|
|
356
|
+
`}catch{return i.html``}}let ht=null;function ve(t){try{return ht=t,()=>{ht===t&&(ht=null)}}catch{}return()=>{}}let x=!1;function xe(){x=!0}function $e(){x=!1}function zn(){return x}const Hn=100,P=[];let _e=1,gt=0;const we=new Set(["devtools","DOMReady","Paint"]);function k(t,e,n){try{P.length>=Hn&&P.shift(),P.push({id:_e++,ts:performance.now(),category:t,label:e,detail:n}),gt++;try{ht?.()}catch{}}catch{}}function zt(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 Se(){return P}function Fn(){return P.length}function ke(){return gt}function Ce(){try{gt=0}catch{}}function Te(){try{P.length=0,gt=0,_e=1}catch{}}function Me(t){try{if(!x)return;k("mount",t,"mounted")}catch{}}function Ie(t,e){try{if(!x)return;k("update",t,`updated (${e.toFixed(2)}ms)`)}catch{}}function Be(t){try{if(!x)return;k("cleanup",t,"cleaned up")}catch{}}function Le(t,e){try{if(!x)return;k("setter",t,zt(e))}catch{}}function Ee(t){try{if(!x)return;k("action",t)}catch{}}function Re(t,e){try{if(!x||we.has(t))return;k("event",t,e!==void 0?zt(e):void 0)}catch{}}const Ht=80,Ae=120;function z(t,e){try{return t.length>e?t.slice(0,e-1)+"…":t}catch{}return""}function Dn(t,e,n){try{if(!x)return;const o=n?`pending · ${z(n,50)}`:"pending";k("fetch",z(`${t} ${e}`,Ht),o)}catch{}}function Pe(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,Ht),z(`${n} · ${o.toFixed(0)}ms`,Ae))}catch{}}function ze(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,Ht),z(`error · ${o.toFixed(0)}ms · ${n}`,Ae))}catch{}}function He(t,e){try{if(!x||we.has(t))return;k("event",`${t} (cleanup)`,e!==void 0?zt(e):void 0)}catch{}}const H={mount:"#66bb6a",update:"#42a5f5",cleanup:"#ef5350",setter:"#4fc3f7",action:"#81c784",event:"#ffb74d",fetch:"#ce93d8"},On={mount:"MNT",update:"UPD",cleanup:"CLN",setter:"SET",action:"ACT",event:"EVT",fetch:"NET"};let _="all";const Nn={all:null,lifecycle:["mount","update","cleanup"],logs:["setter","action","event"],network:["fetch"]};function Vn(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 jn(){try{const t=Se(),e=Nn[_];if(!e)return t;const n=new Set(e);return t.filter(o=>n.has(o.category))}catch{return[]}}function Fe({onClear:t,renderCallback:e}){try{Ce();const n=jn();return i.html`
|
|
348
357
|
<div class="${r.logsPanel}">
|
|
349
358
|
<div class="${r.logsToolbar}">
|
|
350
359
|
<div class="${r.logsFilterRow}">
|
|
@@ -380,7 +389,7 @@
|
|
|
380
389
|
<span class="${r.logsCount}">${n.length} entries</span>
|
|
381
390
|
<button
|
|
382
391
|
class="${r.button}"
|
|
383
|
-
@click=${()=>{try{
|
|
392
|
+
@click=${()=>{try{Te(),t()}catch{}}}
|
|
384
393
|
title="Clear logs"
|
|
385
394
|
>
|
|
386
395
|
🗑
|
|
@@ -393,11 +402,11 @@
|
|
|
393
402
|
No logs yet. Interact with the app to see activity.
|
|
394
403
|
</div>`:i.repeat(n,o=>o.id,o=>i.html`
|
|
395
404
|
<div class="${r.logEntry}">
|
|
396
|
-
<span class="${r.logTs}">${
|
|
405
|
+
<span class="${r.logTs}">${Vn(o.ts)}</span>
|
|
397
406
|
<span
|
|
398
407
|
class="${r.logBadge}"
|
|
399
408
|
style="background: ${H[o.category]}22; color: ${H[o.category]}; border-color: ${H[o.category]}44;"
|
|
400
|
-
>${
|
|
409
|
+
>${On[o.category]}</span
|
|
401
410
|
>
|
|
402
411
|
<span class="${r.logLabel}">${o.label}</span>
|
|
403
412
|
${o.detail?i.html`<span class="${r.logDetail}"
|
|
@@ -407,7 +416,7 @@
|
|
|
407
416
|
`)}
|
|
408
417
|
</div>
|
|
409
418
|
</div>
|
|
410
|
-
`}catch{return i.html``}}let
|
|
419
|
+
`}catch{return i.html``}}let J=!1;function De(){try{J=!0}catch{}}function Oe(){try{J=!1}catch{}}function Wn(){return J}const Un=100,K=new Map;let Ne=1,mt=null;function Ve(t){try{return mt=t,()=>{try{mt===t&&(mt=null)}catch{}}}catch{}return()=>{}}function Ft(t,e,n){try{if(!J)return;const o={id:Ne++,ts:performance.now(),durationMs:n,componentName:t,instanceId:e};let c=K.get(t);c||(c=[],K.set(t,c)),c.length>=Un&&c.shift(),c.push(o);try{mt?.()}catch{}}catch{}}function Gn(t,e){try{if(!J)return je;const n=performance.now();return()=>Ft(t,e,performance.now()-n)}catch{}return je}function je(){}function We(){try{const t=[];for(const[e,n]of K){if(n.length===0)continue;let o=0,c=0,l=1/0;for(const s of n)o+=s.durationMs,s.durationMs>c&&(c=s.durationMs),s.durationMs<l&&(l=s.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 Ue(){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 Yn(t=50){try{const e=Ue();return e.sort((n,o)=>o.ts-n.ts),e.length>t?e.slice(0,t):e}catch{}return[]}function Ge(t=20){try{const e=Ue();return e.sort((n,o)=>o.durationMs-n.durationMs),e.length>t?e.slice(0,t):e}catch{}return[]}function Ye(){try{K.clear(),Ne=1}catch{}}i.atom(0);function Q(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 Xe(t,e){try{return e<=0?0:Math.max(2,Math.min(100,t/e*100))}catch{return 0}}function qe(t){try{return t<16?"#66bb6a":t<=20?"#ffb74d":"#ef5350"}catch{return""}}let Z="summary";function Xn(t){try{if(t.length===0)return i.html`<div class="${r.empty}">
|
|
411
420
|
No render data yet. Interact with the app to see component performance.
|
|
412
421
|
</div>`;const e=Math.max(...t.map(n=>n.totalMs));return i.html`
|
|
413
422
|
<table class="${r.perfTable}">
|
|
@@ -422,7 +431,7 @@
|
|
|
422
431
|
</tr>
|
|
423
432
|
</thead>
|
|
424
433
|
<tbody>
|
|
425
|
-
${i.repeat(t,n=>n.name,n=>{const o=
|
|
434
|
+
${i.repeat(t,n=>n.name,n=>{const o=qe(n.lastMs);return i.html`
|
|
426
435
|
<tr class="${r.perfRow}">
|
|
427
436
|
<td class="${r.perfCell} ${r.perfName}">
|
|
428
437
|
${n.name}
|
|
@@ -431,22 +440,22 @@
|
|
|
431
440
|
${n.renderCount}
|
|
432
441
|
</td>
|
|
433
442
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
434
|
-
${
|
|
443
|
+
${Q(n.avgMs)}
|
|
435
444
|
</td>
|
|
436
445
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
437
|
-
${
|
|
446
|
+
${Q(n.maxMs)}
|
|
438
447
|
</td>
|
|
439
448
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
440
|
-
${
|
|
449
|
+
${Q(n.lastMs)}
|
|
441
450
|
</td>
|
|
442
451
|
<td class="${r.perfCell}">
|
|
443
452
|
<div class="${r.perfBarWrap}">
|
|
444
453
|
<div
|
|
445
454
|
class="${r.perfBar}"
|
|
446
|
-
style="width: ${
|
|
455
|
+
style="width: ${Xe(n.totalMs,e)}%; background: ${o};"
|
|
447
456
|
></div>
|
|
448
457
|
<span class="${r.perfBarLabel}"
|
|
449
|
-
>${
|
|
458
|
+
>${Q(n.totalMs)}</span
|
|
450
459
|
>
|
|
451
460
|
</div>
|
|
452
461
|
</td>
|
|
@@ -454,7 +463,7 @@
|
|
|
454
463
|
`})}
|
|
455
464
|
</tbody>
|
|
456
465
|
</table>
|
|
457
|
-
`}catch{return i.html``}}function
|
|
466
|
+
`}catch{return i.html``}}function qn(t,e){try{if(t.length===0)return i.html`<div class="${r.empty}">
|
|
458
467
|
No render data yet. Interact with the app to see slow renders.
|
|
459
468
|
</div>`;const n=Math.max(...t.map(c=>c.durationMs)),o=!!e;return i.html`
|
|
460
469
|
<table class="${r.perfTable}">
|
|
@@ -466,23 +475,23 @@
|
|
|
466
475
|
</tr>
|
|
467
476
|
</thead>
|
|
468
477
|
<tbody>
|
|
469
|
-
${i.repeat(t,c=>c.id,c=>{const l=
|
|
478
|
+
${i.repeat(t,c=>c.id,c=>{const l=qe(c.durationMs),s=o?()=>{try{e(c.instanceId)}catch{}}:void 0;return i.html`
|
|
470
479
|
<tr
|
|
471
480
|
class="${r.perfRow} ${o?r.perfRowClickable:""}"
|
|
472
|
-
@click=${
|
|
481
|
+
@click=${s}
|
|
473
482
|
title=${o?`Go to ${c.componentName} in Components tab`:""}
|
|
474
483
|
>
|
|
475
484
|
<td class="${r.perfCell} ${r.perfName}">
|
|
476
485
|
${c.componentName}
|
|
477
486
|
</td>
|
|
478
487
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
479
|
-
${
|
|
488
|
+
${Q(c.durationMs)}
|
|
480
489
|
</td>
|
|
481
490
|
<td class="${r.perfCell}">
|
|
482
491
|
<div class="${r.perfBarWrap}">
|
|
483
492
|
<div
|
|
484
493
|
class="${r.perfBar}"
|
|
485
|
-
style="width: ${
|
|
494
|
+
style="width: ${Xe(c.durationMs,n)}%; background: ${l};"
|
|
486
495
|
></div>
|
|
487
496
|
</div>
|
|
488
497
|
</td>
|
|
@@ -490,19 +499,19 @@
|
|
|
490
499
|
`})}
|
|
491
500
|
</tbody>
|
|
492
501
|
</table>
|
|
493
|
-
`}catch{return i.html``}}function
|
|
502
|
+
`}catch{return i.html``}}function Je({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const o=We(),c=Ge(30);return i.html`
|
|
494
503
|
<div class="${r.perfPanel}">
|
|
495
504
|
<div class="${r.perfToolbar}">
|
|
496
505
|
<div class="${r.perfTabs}">
|
|
497
506
|
<button
|
|
498
|
-
class="${r.perfTabBtn} ${
|
|
499
|
-
@click=${()=>{try{
|
|
507
|
+
class="${r.perfTabBtn} ${Z==="summary"?"active":""}"
|
|
508
|
+
@click=${()=>{try{Z="summary",e()}catch{}}}
|
|
500
509
|
>
|
|
501
510
|
Summary
|
|
502
511
|
</button>
|
|
503
512
|
<button
|
|
504
|
-
class="${r.perfTabBtn} ${
|
|
505
|
-
@click=${()=>{try{
|
|
513
|
+
class="${r.perfTabBtn} ${Z==="slowest"?"active":""}"
|
|
514
|
+
@click=${()=>{try{Z="slowest",e()}catch{}}}
|
|
506
515
|
>
|
|
507
516
|
Slowest Renders
|
|
508
517
|
</button>
|
|
@@ -510,7 +519,7 @@
|
|
|
510
519
|
<div class="${r.perfActions}">
|
|
511
520
|
<button
|
|
512
521
|
class="${r.button}"
|
|
513
|
-
@click=${()=>{try{
|
|
522
|
+
@click=${()=>{try{Ye(),t()}catch{}}}
|
|
514
523
|
title="Clear performance data"
|
|
515
524
|
>
|
|
516
525
|
🗑
|
|
@@ -519,10 +528,46 @@
|
|
|
519
528
|
</div>
|
|
520
529
|
|
|
521
530
|
<div class="${r.perfContent}">
|
|
522
|
-
${
|
|
531
|
+
${Z==="summary"?Xn(o):qn(c,n??null)}
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
`}catch{return i.html``}}const Jn=100,tt=[];let Ke=1,yt=0,bt=null,Qe=null;function Kn(t){try{return bt=t,()=>{bt===t&&(bt=null)}}catch{}return()=>{}}function Qn(t){try{return t===null?"null":t===void 0?"undefined":typeof t=="string"?t:t instanceof Error?`${t.name}: ${t.message}`:typeof t=="function"?"ƒ()":JSON.stringify(t)}catch{try{return String(t)}catch{return""}}}function Ze(){try{if(Qe)return;Qe=i.matesLogEvent.__subscribe(t=>{try{tt.length>=Jn&&tt.shift(),tt.push({id:Ke++,ts:t.ts??performance.now(),level:t.level,message:Qn(t.message),data:t.data}),yt++;try{bt?.()}catch{}}catch{}})}catch{}}function Zn(){return tt}function tr(){return yt}function er(){try{yt=0}catch{}}function nr(){try{tt.length=0,yt=0,Ke=1}catch{}}const Dt={log:"#4fc3f7",warn:"#ffb74d",error:"#ef5350"},rr={log:"LOG",warn:"WRN",error:"ERR"};function or(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 ir(t){if(t==null)return"";try{return JSON.stringify(t,null,2)}catch{try{return String(t)}catch{return""}}}function cr({onClear:t,renderCallback:e}){try{er();const n=Zn();return i.html`
|
|
535
|
+
<div class="${r.logsPanel}">
|
|
536
|
+
<div class="${r.logsToolbar}">
|
|
537
|
+
<div class="${r.logsFilterRow}">
|
|
538
|
+
<span style="font-size:0.72rem;color:var(--mdt-text-muted);padding:0 4px;">
|
|
539
|
+
User logs from <code style="font-size:0.7rem;opacity:.8;">log()</code> / <code style="font-size:0.7rem;opacity:.8;">logError()</code>
|
|
540
|
+
</span>
|
|
541
|
+
</div>
|
|
542
|
+
<div class="${r.logsActions}">
|
|
543
|
+
<span class="${r.logsCount}">${n.length} entries</span>
|
|
544
|
+
<button
|
|
545
|
+
class="${r.button}"
|
|
546
|
+
@click=${()=>{try{nr(),t()}catch{}}}
|
|
547
|
+
title="Clear user logs"
|
|
548
|
+
>🗑</button>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
|
|
552
|
+
<div class="${r.logsContainer}">
|
|
553
|
+
${n.length===0?i.html`<div class="${r.empty}">
|
|
554
|
+
No user logs yet. Call <code>log("message", data)</code> or <code>logError(...)</code> from your app.
|
|
555
|
+
</div>`:i.repeat([...n].reverse(),o=>o.id,o=>{const c=ir(o.data);return i.html`
|
|
556
|
+
<div class="${r.logEntry}" style="align-items:flex-start;flex-direction:column;gap:2px;padding:5px 8px;">
|
|
557
|
+
<div style="display:flex;align-items:center;gap:6px;width:100%;">
|
|
558
|
+
<span class="${r.logTs}">${or(o.ts)}</span>
|
|
559
|
+
<span
|
|
560
|
+
class="${r.logBadge}"
|
|
561
|
+
style="background:${Dt[o.level]}22;color:${Dt[o.level]};border-color:${Dt[o.level]}44;"
|
|
562
|
+
>${rr[o.level]}</span>
|
|
563
|
+
<span class="${r.logLabel}" style="flex:1;">${o.message}</span>
|
|
564
|
+
</div>
|
|
565
|
+
${c?i.html`<pre style="margin:0 0 0 52px;font-size:0.68rem;color:var(--mdt-text-muted);white-space:pre-wrap;word-break:break-all;max-height:120px;overflow:auto;">${c}</pre>`:i.nothing}
|
|
566
|
+
</div>
|
|
567
|
+
`})}
|
|
523
568
|
</div>
|
|
524
569
|
</div>
|
|
525
|
-
`}catch{return i.html``}}let I=!1,C=!1,
|
|
570
|
+
`}catch{return i.html``}}let I=!1,C=!1,F="components",B="list",$=null,w=null,y=null,D=[],f=null,S=null,O=0;const lr=150,sr=.8,ar=.5;let L=null;function Ot(){try{const t=document.documentElement;L===null&&(L=parseFloat(getComputedStyle(t).paddingBottom)||0),t.style.paddingBottom=`${L+O}px`}catch{}}function Nt(){try{if(L===null)return;document.documentElement.style.paddingBottom=L===0?"":`${L}px`,L=null}catch{}}let Vt=!1,tn=0,en=0,vt=!1,et=null,nt=null,rt=null,ot=null,N=null,V=null;function dr(){try{V!==null&&(clearTimeout(V),V=null)}catch{}}function xt(){try{dr(),N&&(N.remove(),N=null)}catch{}}function $t(t){try{let e=function(){try{const l=document.createElement("div");l.className=r.domHighlight,document.body.appendChild(l),N=l;const s=n.getBoundingClientRect();c?(l.style.position="fixed",l.style.top=`${s.top}px`,l.style.left=`${s.left}px`):(l.style.top=`${s.top+window.scrollY}px`,l.style.left=`${s.left+window.scrollX}px`),l.style.width=`${s.width}px`,l.style.height=`${s.height}px`,V=q(()=>setTimeout(()=>{try{N===l&&(l.classList.add("fade-out"),V=q(()=>setTimeout(()=>{try{N===l&&xt()}catch{}},600)))}catch{}},1500))}catch{}};xt();const n=t.firstElementChild??t,o=getComputedStyle(n).position,c=o==="fixed"||o==="sticky";if(c)e();else{const l=n.getBoundingClientRect(),s=l.top>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight);s||n.scrollIntoView({behavior:"smooth",block:"center"}),V=q(()=>setTimeout(e,s?0:400))}}catch{}}function nn(){try{if($===null)return null;for(const t of D)for(const e of t.instances)if(e.componentId===$)return e;return null}catch{}return null}function jt(){try{return w===null?null:D.find(t=>t.viewFn===w)??null}catch{}return null}function ur(){try{if(y===null)return null;const t=jt();return t?t.instances.find(e=>e.componentId===y)??null:null}catch{}return null}function _t(){try{D=Zt(),$!==null&&!nn()&&($=null),w!==null&&!jt()?(w=null,y=null):y!==null&&!ur()&&(y=null)}catch{}}function it(){try{return I&&!C}catch{}return!1}function ct(){try{return S?.querySelector(`.${r.panel}`)??null}catch{}return null}function pr(t){try{$=$===t?null:t,g()}catch{}}function fr(t){try{w===t?(w=null,y=null):(w=t,y=null),g()}catch{}}function hr(t){try{y=y===t?null:t,g()}catch{}}function gr(t){try{$=t,F="components",_t(),w=null,y=null;for(const e of D){for(const n of e.instances)if(n.componentId===t){w=e.viewFn,y=t;break}if(w)break}g()}catch{}}function mr(t){try{F=t,g()}catch{}}function yr(){try{if(!I||C)return;C=!0,ct()?.classList.remove(r.panelVisible),f&&(f.style.display=""),Nt()}catch{}}function br(){try{if(!C)return;C=!1,f&&(f.style.display="none"),_t(),g(),Ot(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{ct()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function vr(){try{I=!1,C=!1,$=null,rn(),xt(),Nt();const t=ct();if(t){t.classList.remove(r.panelVisible);let e=!1;const n=()=>{try{if(e)return;e=!0,t.removeEventListener("transitionend",n),Ut()}catch{}};t.addEventListener("transitionend",n,{once:!0}),q(()=>setTimeout(n,350))}else Ut();f&&(f.style.display="")}catch{}}function xr(){try{if(I)return;I=!0,C=!1,f&&(f.style.display="none"),O=Math.round(window.innerHeight*ar),$r(),Sr(),_t(),g(),Ot(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{ct()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function $r(){try{De(),et||(et=ve(()=>{try{it()&&g()}catch{}})),nt||(nt=Ve(()=>{try{it()&&g()}catch{}})),Ze(),ot||(ot=Kn(()=>{try{it()&&g()}catch{}}))}catch{}}function rn(){try{Oe(),et&&(et(),et=null),nt&&(nt(),nt=null),ot&&(ot(),ot=null)}catch{}}const Wt="mates-devtools-vars";function _r(){try{if(document.getElementById(Wt))return;const t=document.createElement("style");t.id=Wt,t.textContent=`
|
|
526
571
|
#mates-devtools {
|
|
527
572
|
--dt-bg: #1a1a1a;
|
|
528
573
|
--dt-bg-2: #222222;
|
|
@@ -585,7 +630,7 @@
|
|
|
585
630
|
--dt-instance-bg: #f0f4ff;
|
|
586
631
|
--dt-flash-bg: rgba(0,160,90,0.3);
|
|
587
632
|
}
|
|
588
|
-
`,document.head.appendChild(t)}catch{}}function
|
|
633
|
+
`,document.head.appendChild(t)}catch{}}function wr(){try{document.getElementById(Wt)?.remove()}catch{}}function Sr(){try{if(S)return;_r(),S=document.createElement("div"),S.id="mates-devtools",document.body.appendChild(S)}catch{}}function Ut(){try{if(!S)return;i.render(i.html``,S),S.remove(),S=null,wr()}catch{}}function g(){try{if(!S||!I)return;const t=(()=>{try{switch(F){case"components":return i.html`
|
|
589
634
|
<div class="${r.body}">
|
|
590
635
|
<div class="${r.leftColumn}">
|
|
591
636
|
<div class="${r.leftTabs}">
|
|
@@ -636,14 +681,14 @@
|
|
|
636
681
|
</svg>
|
|
637
682
|
</button>
|
|
638
683
|
</div>
|
|
639
|
-
${B==="list"?
|
|
684
|
+
${B==="list"?he({groups:D,selectedViewFn:w,onSelectGroup:fr,onHighlight:e=>$t(e),renderCallback:g}):me({selectedComponentId:$,onSelectComponent:pr,onHighlight:e=>$t(e),renderCallback:g})}
|
|
640
685
|
</div>
|
|
641
|
-
${
|
|
686
|
+
${Lt(B==="list"?{selectedGroup:jt(),selectedInstanceId:y,onSelectInstance:hr,onHighlight:e=>$t(e)}:{selectedComponent:nn()})}
|
|
642
687
|
</div>
|
|
643
|
-
`;case"logs":return
|
|
644
|
-
<div class="${r.panel}" style="height: ${
|
|
645
|
-
<div class="${r.resizeHandle}" @mousedown=${
|
|
646
|
-
${
|
|
688
|
+
`;case"logs":return Fe({onClear:g,renderCallback:g});case"user-logs":return cr({onClear:g,renderCallback:g});case"performance":return Je({onClear:g,renderCallback:g,onNavigateToComponent:gr});default:return i.html``}}catch{}return i.html``})();i.render(i.html`
|
|
689
|
+
<div class="${r.panel}" style="height: ${O}px;">
|
|
690
|
+
<div class="${r.resizeHandle}" @mousedown=${kr}></div>
|
|
691
|
+
${be({activeTab:F,onTabChange:mr,onMinimise:yr,onClose:vr,unreadLogCount:F==="logs"?0:ke(),unreadUserLogCount:F==="user-logs"?0:tr()})}
|
|
647
692
|
${t}
|
|
648
693
|
</div>
|
|
649
|
-
`,S)}catch{}}function
|
|
694
|
+
`,S)}catch{}}function kr(t){try{t.preventDefault();const e=t.clientY,n=O,o=l=>{try{const s=window.innerHeight*sr;O=Math.max(lr,Math.min(s,n+(e-l.clientY)));const u=ct();u&&(u.style.height=`${O}px`),Ot()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function Cr(){try{if(f)return;f=document.createElement("div"),f.id="mates-devtools-fab",f.className=r.fab,f.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",cn),f.addEventListener("click",on),document.body.appendChild(f)}catch{}}function Tr(){try{if(!f)return;f.removeEventListener("mousedown",cn),f.removeEventListener("click",on),f.remove(),f=null}catch{}}function on(){try{if(vt){vt=!1;return}C?br():xr()}catch{}}function cn(t){try{t.preventDefault(),Vt=!0,vt=!1;const e=f.getBoundingClientRect();tn=t.clientX-e.left,en=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",ln),document.addEventListener("mouseup",sn)}catch{}}function ln(t){try{if(!Vt||!f)return;vt=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-tn))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-en))}px`}catch{}}function sn(){try{Vt=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",ln),document.removeEventListener("mouseup",sn)}catch{}}function Mr(){try{Mn(),Cr(),rt||(rt=j.__subscribe(t=>{try{t?.type==="unmount"&&($!==null&&t.component.componentId===$&&($=null),y!==null&&t.component.componentId===y&&(y=null)),_t(),it()&&g()}catch{}})),It(()=>{try{it()&&g()}catch{}})}catch{}}function an(){try{In(),It(null),xt(),rn(),$e(),Nt(),rt&&(rt(),rt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,D=[],Ut(),Tr()}catch{}}const wt=[];let Gt=null,Yt=null,Xt=null;function Ir(){const t=new i.FetchUtils;try{Gt=t.interceptBefore((e,n)=>{try{const o=(n.method??"GET").toUpperCase();wt.push({method:o,url:e,startTs:performance.now()})}catch{}return{url:e,options:n}}),Yt=t.interceptAfter(e=>{try{const n=wt.shift(),o=n?.method??"",c=n?.url??e.url??"",l=n?performance.now()-n.startTs:0;Pe(o,c,e.status,l)}catch{}return e}),Xt=t.interceptError(e=>{try{const n=wt.shift(),o=n?performance.now()-n.startTs:0;ze(n?.method??"",n?.url??"",e.message,o)}catch{}})}catch{}}function Br(){try{Gt?.(),Yt?.(),Xt?.(),Gt=null,Yt=null,Xt=null,wt.length=0}catch{}}function Lr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Jt,unregisterComponent:Kt,notifyRender:Qt,getComponentName:R,logComponentMount:Me,logComponentRender:Ie,logComponentUnmount:Be,logAtomSet:Le,logAtomUpdate:Ee,logEventTrigger:Re,logCleanupEventTrigger:He,logFetchRequest:Dn,logFetchResponse:Pe,logFetchError:ze,recordRender:Ft}),xe(),Ze(),Ir()}catch{}}let St=!1;function Er(){try{if(St)return;St=!0,Lr(),Mr()}catch{}}function Rr(){try{if(!St)return;St=!1,Br(),an()}catch{}}a.clearLogs=Te,a.clearPerfData=Ye,a.connectLogStore=xe,a.connectPerfStore=De,a.destroyDevTools=an,a.destroyMatesDevTools=Rr,a.devToolsEvent=j,a.disconnectLogStore=$e,a.disconnectPerfStore=Oe,a.getAllComponents=Mt,a.getComponentDepth=E,a.getComponentGroups=Zt,a.getComponentName=R,a.getComponentsByView=hn,a.getLogCount=Fn,a.getLogs=Se,a.getPerfSummaries=We,a.getRecentTimings=Yn,a.getRenderVersion=W,a.getSlowestRenders=Ge,a.getUnreadLogCount=ke,a.isLogStoreConnected=zn,a.isPerfStoreConnected=Wn,a.logAtomSet=Le,a.logAtomUpdate=Ee,a.logCleanupEventTrigger=He,a.logComponentMount=Me,a.logComponentRender=Ie,a.logComponentUnmount=Be,a.logEventTrigger=Re,a.markLogsRead=Ce,a.notifyRender=Qt,a.onLogEntry=ve,a.onPerfEntry=Ve,a.recordRender=Ft,a.registerComponent=Jt,a.renderAtomsViewer=le,a.renderComponentInspector=Lt,a.renderComponentList=he,a.renderComponentTree=me,a.renderHeader=be,a.renderHooksViewer=Bt,a.renderLogsViewer=Fe,a.renderMatesDevTools=Er,a.renderPerfViewer=Je,a.renderPropsViewer=ie,a.renderScopesViewer=ce,a.renderUseStateViewer=se,a.renderValueTree=T,a.renderValueTreeEntries=$n,a.setValueTreeRenderCallback=It,a.startRenderTiming=Gn,a.styles=r,a.unregisterComponent=Kt,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|