@firsthandjs/devtools 0.9.1 → 0.10.0

package/dist/chunk-B62UJE3O.js

@@ -0,0 +1,7 @@
+var r={labels:new WeakMap,parts:new WeakMap,writers:new WeakMap,causes:new WeakMap,components:new WeakMap,cacheLog:[],updates:[],roots:new Set};function m(){r.updates.length=0,r.cacheLog.length=0,r.roots.clear()}function f(e,t,n){e.push(t),e.length>n&&e.shift()}function g(){let e=[];for(let t of r.roots){let n=t.deref();n===void 0?r.roots.delete(t):e.push(n)}return e}function i(e){let t=r.parts.get(e);if(t!==void 0){let o=t.node;return`${(o.tagName??o.nodeName??"node").toLowerCase()}.${t.property}`}let n=r.labels.get(e);return n===void 0?(e.flags&1)===0?"signal":"computed":n.name}function k(e){return r.parts.has(e)?"part":r.labels.get(e)?.kind??((e.flags&1)===0?"signal":"computed")}var a=null,u=null,p=null,d=null,l=null,L=/@firsthandjs|[\\/]node_modules[\\/]|[\\/]packages[\\/](core|dom|deep|devtools|jsx-runtime|data|router|styled|testing)[\\/]src[\\/]/;function N(){let e=(new Error().stack??"").split(`
+`).slice(1),t=[];for(let n of e){if(L.test(n))continue;let o=n.trim().replace(/^at\s+/,"");if(o!==""&&t.push(o),t.length===6)break}return t}function j(){let t=(new Error().stack??"").split(`
+`).slice(1).find(o=>!L.test(o))??"unknown",n=/\(?([^()\s]+:\d+:\d+)\)?$/.exec(t.trim());return n===null?t.trim():n[1]}function W(){if(l!==null)return!1;let e={attached:!0,label(t,n,o){r.labels.set(t,{kind:n,name:o===""?j():o})},cause:y,root(t){r.roots.add(new WeakRef(t))},component(t,n){r.components.set(t,n)},running:O,query(t,n,o){f(r.cacheLog,{event:t,key:n,tags:o},200)},part:C};return globalThis.__FIRSTHAND_DEVTOOLS__=e,l=e,!0}function y(e){d=e,a={update:{at:Math.round(performance.now()),source:i(e),ran:[],stack:N()},effects:[]},f(r.updates,a,100)}function O(e){if(u=e,e===null){p?.();return}d!==null&&(r.causes.set(e,d),a?.update.ran.push(i(e)),a?.effects.push(e))}function C(e,t){if(u===null)return;r.parts.set(u,{node:e,property:t});let n=r.writers.get(e);n===void 0&&(n=new Set,r.writers.set(e,n)),n.add(u)}function R(){l!==null&&(l.attached=!1),globalThis.__FIRSTHAND_DEVTOOLS__=void 0,l=null,u=null,d=null,a=null,p=null,m()}function A(e){p=e}function c(e,t,n){let o={kind:k(e),name:i(e),value:e.v,dependencies:[],dependents:[]};if(t>0)for(let s=e.deps;s!==void 0;s=s.nextDep)o.dependencies.push(c(s.dep,t-1,0));if(n>0)for(let s=e.subs;s!==void 0;s=s.nextSub)o.dependents.push(c(s.sub,0,n-1));return o}function b(e,t){e.cells!==null&&t.push(...e.cells);for(let n=e.head;n!==null;n=n.next)b(n,t)}function K(){let e=[];for(let t of g())b(t,e);return e.map(t=>c(t,1,1))}function T(e,t=8){let n=r.writers.get(e);return n===void 0?[]:[...n].map(o=>c(o,t,0))}function $(e){let t=T(e);return t.length===0?"Nothing reactive writes this node.":t.map(n=>E(w(n)).join(`
+   \u2193
+`)).join(`
+
+`)}function w(e){let t=[];for(let n of e.dependencies){let o=w(n);o.length>t.length&&(t=o)}return[...t,e]}function E(e){return e.map(t=>t.kind==="computed"?`computed(${t.name})`:t.name)}function F(e){let t=r.writers.get(e);if(t===void 0)return null;for(let n of t){let o=r.causes.get(n);if(o!==void 0)return i(o)}return null}function q(){return[...r.cacheLog]}function B(e){let t=r.writers.get(e);if(t===void 0)return[];let n=[];for(let o of t){let s=_(o.scope??null);s.length>n.length&&(n.length=0,n.push(...s))}return n}function _(e){let t=[];for(let n=e;n!==null;n=n.parent){let o=r.components.get(n);o!==void 0&&t.unshift(o)}return t}function P(e){if(e===void 0)return r.updates.map(n=>n.update);let t=r.writers.get(e);return t===void 0?[]:r.updates.filter(n=>n.effects.some(o=>t.has(o))).map(n=>n.update)}export{W as a,R as b,A as c,K as d,T as e,$ as f,w as g,F as h,q as i,B as j,P as k};

package/dist/chunk-UEYJUDK5.js

@@ -0,0 +1,84 @@
+import{c as M,e as H,g as C,h as q,i as A,j as O,k as N}from"./chunk-B62UJE3O.js";var P=`:host { all: initial; }
+.panel {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;
+  width: 460px; max-height: 78vh; display: flex; flex-direction: column;
+  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #e6e6e6; background: #1c1c1f; border: 1px solid #3a3a40;
+  border-radius: 10px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
+}
+header { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
+  border-bottom: 1px solid #3a3a40; }
+header strong { font-weight: 600; letter-spacing: 0.02em; flex: 1; }
+button { font: inherit; color: inherit; background: #2a2a30; border: 1px solid #45454d;
+  border-radius: 5px; padding: 3px 8px; cursor: pointer; }
+button:hover { background: #34343c; }
+button[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }
+.body { display: flex; flex-direction: column; overflow: hidden; padding: 12px; min-height: 0; }
+/* The list scrolls; the detail stays where it can be read. Without this the
+   call stack sits below everything and is only reachable by scrolling past
+   the whole log \u2014 which is exactly when you least want to. */
+/* Two independent scroll areas: the list above, the detail below. Each gets
+   its own, because a call stack that can only be reached by scrolling past
+   forty rows of log is out of reach exactly when it is wanted. */
+.scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 60px; }
+.pinned { flex: 0 1 auto; min-height: 140px; max-height: 65%; overflow-y: auto;
+  overflow-x: hidden; margin-top: 8px; padding-top: 8px;
+  border-top: 1px solid #3a3a40; }
+.detail-head { display: flex; align-items: center; gap: 8px; }
+.detail-head .hint { margin: 0; flex: 1; }
+.detail-head button { padding: 0 6px; line-height: 1.4; }
+.empty { color: #8a8a94; }
+.hint { color: #7c7c88; margin: 14px 0 6px; font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.1em; }
+.hint:first-child { margin-top: 0; }
+.section + .section { margin-top: 2px; }
+.stack { margin: 4px 0 0; }
+.stack div { color: #9a9aa6; padding-left: 10px; border-left: 1px solid #3a3a40; }
+.stack div:first-child { color: #e6e6e6; }
+.filters { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
+.filters .chip { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;
+  padding: 1px 9px; cursor: pointer; color: #9ecbff; }
+.filters .chip[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }
+.count { color: #7c7c88; }
+
+/* The path, as boxes and arrows rather than as three lines of text. */
+.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
+.box { border: 1px solid #45454d; border-radius: 7px; padding: 6px 9px; background: #232329;
+  display: flex; align-items: baseline; gap: 8px; }
+.box .tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
+  padding: 1px 5px; border-radius: 4px; background: #34343c; color: #b9b9c4; }
+.box .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.box .val { color: #c3e88d; }
+.box.signal { border-color: #3d5afe; }
+.box.signal .tag { background: #23306b; color: #b6c4ff; }
+.box.computed { border-color: #c792ea; }
+.box.computed .tag { background: #3a2b47; color: #e6c8ff; }
+.box.part { border-color: #ffcb6b; }
+.box.part .tag { background: #4a3a1c; color: #ffdfa1; }
+.box.trigger { box-shadow: 0 0 0 2px #3d5afe66; }
+.arrow { align-self: center; color: #6a6a76; font-size: 14px; line-height: 1; padding: 3px 0; }
+
+/* The component stack, as crumbs. */
+.crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
+.crumb { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;
+  padding: 1px 8px; color: #c792ea; }
+.crumb + .crumb::before { content: '\u203A'; color: #8a8a94; margin-right: 6px; margin-left: -4px; }
+
+/* The timeline: one row per update, a bar for how much it woke. */
+.track { display: flex; flex-direction: column; gap: 4px; }
+.tick { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 8px;
+  align-items: center; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
+.tick:hover { background: #26262c; }
+.tick[aria-selected='true'] { background: #23306b; }
+.tick .when { color: #8a8a94; text-align: right; }
+.tick .who { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tick .where { color: #7c7c88; white-space: nowrap; }
+.tick .bar { height: 8px; border-radius: 4px; background: #3d5afe; min-width: 4px; }
+.tick .bar.none { background: #4a4a54; }
+.detail .ran { color: #ffdfa1; }
+.cause { color: #ffcb6b; margin: 10px 0 0; }
+.event { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 2px 0; }
+.event .created { color: #c3e88d; }
+.event .invalidated { color: #ffcb6b; }
+.event .dropped { color: #f07178; }
+.event .tags { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`,m="firsthand-devtools-outline",U=`.${m} { outline: 2px solid #3d5afe !important; outline-offset: 1px; }`;var X="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Z(e){let r=[],t=0,n=0;for(let o of e){let a=X.indexOf(o),i=a&32;if(n+=(a&31)<<t,i===0){let s=n&1;n>>=1,r.push(s===1?-n:n),t=0,n=0}else t+=5}return r}function ee(e){let r=[],t=0,n=0,o=0;for(let[a,i]of e.mappings.split(";").entries()){let s=0;for(let p of i.split(",")){if(p==="")continue;let u=Z(p);if(s+=u[0],u.length<4)continue;t+=u[1],n+=u[2],o+=u[3];let b=e.sources[t];b!=null&&r.push({generatedLine:a,generatedColumn:s,source:b,originalLine:n,originalColumn:o})}}return r}var I=new Map,te=/\/\/[#@]\s*sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,([\w+/=]+)/;async function ne(e){let r=I.get(e);if(r!==void 0)return r;let t=(async()=>{try{let o=await(await fetch(e)).text(),a=te.exec(o);if(a===null)return null;let i=JSON.parse(atob(a[1]));return ee(i)}catch{return null}})();return I.set(e,t),t}function re(e,r,t){let n=null;for(let o of e){if(o.generatedLine>r||o.generatedLine===r&&o.generatedColumn>t)break;o.generatedLine===r&&(n=o)}return n}async function F(e){let r=/^(.*?)\(?([^\s()]+):(\d+):(\d+)\)?$/.exec(e.trim().replace(/^at\s+/,""));if(r===null)return e;let[,t,n,o,a]=r;if(!/^https?:\/\//.test(n))return e;let i=await ne(n);if(i===null)return e;let s=re(i,Number(o)-1,Number(a)-1);if(s===null)return e;let u=`${s.source.slice(Math.max(s.source.lastIndexOf("/"),s.source.lastIndexOf("\\"))+1)}:${String(s.originalLine+1)}:${String(s.originalColumn+1)}`;return t.trim()===""?u:`${t.trim()} (${u})`}function v(e,r){let t=document.createElement("button");return t.textContent=e,t.setAttribute("aria-pressed","false"),t.addEventListener("click",r),t}function l(e,r,t){let n=document.createElement(e);return n.className=r,n.textContent=t,n}function G(e){let r=/^(.*?)\(?([^()\s]+):(\d+):(\d+)\)?$/.exec(e);if(r===null)return e;let[,t,n,o,a]=r,i=Math.max(n.lastIndexOf("/"),n.lastIndexOf("\\")),s=n.slice(i+1),p=s.indexOf("?"),b=`${(p===-1?s:s.slice(0,p)).trim()}:${o}:${a}`;return t.trim()===""?b:`${t.trim()} (${b})`}function j(e){let r=/\(([^()]+)\)\s*$/.exec(e);return(r===null?e:r[1]).trim()}function f(e,r,t,n=o=>o){let o=l(e,r,n(G(t)));return F(t).then(a=>{o.textContent=n(G(a))}),o}function E(e){return e.classList.add("pinned"),e}var c=null,k=new Map,w=null;function z(){return c!==null}function Y(){c=null,w=null,k.clear()}function oe(e,r){let t=document.createElement("div");t.className=`box ${e.kind}${r?" trigger":""}`,t.append(l("span","tag",e.kind)),t.append(f("span","label",e.name));let n=e.value;return n!==void 0&&(typeof n!="object"||n===null)&&t.append(l("span","val",JSON.stringify(n))),t}function ae(e,r,t){let n=C(e),o=document.createElement("div");o.className="flow";for(let[a,i]of n.entries())o.append(oe(i,i.name===r)),a<n.length-1&&o.append(l("div","arrow","\u2193"));t.append(o)}function B(e,r){let t=document.createElement("div");if(t.className="scroll",e.append(t),r===null){t.append(l("p","empty","Nothing selected."),l("p","hint","Press \u201CPick\u201D and click an element."));return}let n=O(r);if(n.length>0){t.append(l("p","hint","Component"));let s=document.createElement("div");s.className="crumbs";for(let p of n)s.append(l("span","crumb",p));t.append(s)}let o=H(r);if(o.length===0){t.append(l("p","empty","Nothing reactive writes this node."));return}let a=q(r);t.append(l("p","hint","Path"));for(let s of o)ae(s,a,t);t.append(l("p","cause",a===null?"Has not run since anything changed.":`Triggered by ${a}`));let i=N(r).slice(-6).reverse();i.length>0&&(t.append(l("p","hint",`Last ${String(i.length)} updates`)),t.append(Q(i,e))),c!==null&&e.append(E(S(c,e)))}function Q(e,r){k.clear();let t=Math.max(1,...e.map(o=>o.ran.length)),n=document.createElement("div");n.className="track";for(let o of e){let a=document.createElement("div");a.className="tick",a.setAttribute("aria-selected",String(o===c)),k.set(a,o),a.append(l("span","when",`${String(o.at)}ms`)),a.append(f("span","who",o.source));let i=document.createElement("span");i.className=o.ran.length===0?"bar none":"bar",i.style.width=`${String(Math.round(o.ran.length/t*60)+6)}px`,i.title=`woke ${String(o.ran.length)} of ${String(t)}`,a.append(i);let s=o.stack[0];s!==void 0&&a.append(f("span","where",s,j)),a.addEventListener("click",()=>{R(o,r)}),n.append(a)}return n}function S(e,r){let t=document.createElement("div");t.className="detail";let n=document.createElement("div");n.className="detail-head",n.append(f("p","hint",e.source,a=>`${a} woke ${String(e.ran.length)}`));let o=v("\xD7",()=>{R(e,r)});o.setAttribute("aria-label","Close detail"),n.append(o),t.append(n);for(let a of e.ran)t.append(f("div","ran",a));if(e.stack.length>0){t.append(l("p","hint","Written from"));let a=document.createElement("div");a.className="stack";for(let i of e.stack)a.append(f("div","",i));t.append(a)}return t}function R(e,r){c=c===e?null:e;for(let[t,n]of k)t.setAttribute("aria-selected",String(n===c));r.querySelector(".pinned")?.remove(),c!==null&&r.append(E(S(c,r)))}function W(e,r){let t=N();if(t.length===0){e.append(l("p","empty","Nothing has changed yet."));return}let n=document.createElement("div");n.className="scroll",e.append(n);let o=[...new Set(t.map(i=>i.source))];if(o.length>1){let i=document.createElement("div");i.className="filters";for(let s of o){let p=f("span","chip",s);p.setAttribute("aria-pressed",String(w===s)),p.addEventListener("click",()=>{w=w===s?null:s,c=null,r()}),i.append(p)}n.append(i)}let a=w===null?t:t.filter(i=>i.source===w);n.append(l("p","hint",`${String(a.length)} of ${String(t.length)} updates`)),n.append(Q([...a].reverse(),e)),c!==null&&e.append(E(S(c,e)))}function J(e){let r=document.createElement("div");r.className="scroll",e.append(r);let t=A();if(t.length===0){r.append(l("p","empty","No resource has done anything yet."));return}for(let n of[...t].reverse()){let o=document.createElement("div");o.className="event",o.append(l("span",n.event,n.event)),o.append(l("span","tags",n.tags.join(", "))),r.append(o)}}var d=null,L=null,T=null,x=!1,g="graph",y=null;function h(){if(L===null)return;let{body:e,pick:r,graphTab:t,queryTab:n,timelineTab:o}=L,a=e.querySelector(".scroll")?.scrollTop??0;t.setAttribute("aria-pressed",String(g==="graph")),n.setAttribute("aria-pressed",String(g==="queries")),o.setAttribute("aria-pressed",String(g==="timeline")),r.setAttribute("aria-pressed",String(x)),e.textContent="",g==="graph"?B(e,T):g==="queries"?J(e):W(e,h);let i=e.querySelector(".scroll");i!==null&&(i.scrollTop=a)}function V(e){!x||d===null||e.composedPath().includes(d)||(e.preventDefault(),e.stopPropagation(),T=e.target,x=!1,document.querySelector(`.${m}`)?.classList.remove(m),h())}function D(e){if(!x)return;document.querySelector(`.${m}`)?.classList.remove(m);let r=e.target;r!==null&&r!==d&&r.classList.add(m)}function _(){if(d!==null)return;d=document.createElement("div"),d.setAttribute("data-firsthand-devtools","");let e=d.attachShadow({mode:"open"}),r=document.createElement("style");r.textContent=P;let t=document.createElement("style");t.textContent=U,document.head.append(t);let n=document.createElement("div");n.className="panel";let o=document.createElement("div");o.className="body",n.append(ie(o),o),e.append(r,n),document.body.append(d),document.addEventListener("click",V,!0),document.addEventListener("mouseover",D,!0),M(se),h()}function ie(e){let r=document.createElement("header");r.append(l("strong","","Firsthand"));let t=v("Pick",()=>{x=!x,h()});t.dataset.pick="";let n=$("graph","Graph"),o=$("queries","Queries"),a=$("timeline","Timeline"),i=v("\xD7",K);return i.setAttribute("aria-label","Close"),r.append(t,n,o,a,i),L={body:e,pick:t,graphTab:n,queryTab:o,timelineTab:a},r}function $(e,r){let t=v(r,()=>{g=e,h()});return t.dataset.tab=e,t}function se(){z()||y!==null||(y=requestAnimationFrame(()=>{y=null,h()}))}function K(){M(null),y!==null&&(cancelAnimationFrame(y),y=null),document.removeEventListener("click",V,!0),document.removeEventListener("mouseover",D,!0),document.querySelector(`.${m}`)?.classList.remove(m),d?.remove(),d=null,L=null,x=!1,T=null,g="graph",Y()}function ve(){d===null?_():K()}function we(e){_(),T=e,g="graph",h()}function ye(){h()}export{K as close,_ as open,ye as refresh,we as show,ve as toggle};

package/dist/index.d.ts

@@ -1,61 +1,42 @@
-/** What a node of the graph is. */
-export type NodeKind = 'signal' | 'computed' | 'effect' | 'part';
 /**
- * One update: a write, and everything that ran because of it.
+ * Devtools for Firsthand (ADR-0020).
  *
- * This is the thing the graph cannot answer on its own. The graph says what
- * depends on what; an update says what actually happened, in order, at a time.
+ * The reactive graph is not something this package records. It is already
+ * there, because propagation and disposal need it: every cell carries its
+ * dependencies and its subscribers as linked lists, and every owner carries
+ * its children and its cells. This package attaches names to those nodes and
+ * reads the structure when asked.
+ *
+ * Nothing here runs unless `attach()` is called, and none of it exists in a
+ * production build of the framework: the hooks that feed it live in modules
+ * the build replaces with empty functions.
+ *
+ * | Module        | What it does                                      |
+ * | ------------- | ------------------------------------------------- |
+ * | `recorded.ts` | what has been observed, and nothing that writes it |
+ * | `record.ts`   | the hook the core calls — the only writer          |
+ * | `names.ts`    | what to call a cell                                |
+ * | `queries.ts`  | the questions, which is all the panel needs        |
+ * | `panel.ts`    | the answers, by pointing rather than by typing     |
+ *
+ * This module is the entry point and nothing else: it wires the console API
+ * and the shortcut, and it is the only module that knows the panel exists.
+ * That is what lets the panel be loaded on demand — a module that imported it
+ * back would be a cycle, and a cycle would defeat the splitting.
  */
-export type Update = {
-    /** Milliseconds since the page loaded, so entries can be read as a sequence. */
-    at: number;
-    /** What was written. */
-    source: string;
-    /** What ran, in the order it ran. */
-    ran: string[];
-    /**
-     * Where the write came from, application frames only.
-     *
-     * "Which signal changed" is half an answer; the other half is which of your
-     * code changed it, and an event handler three files away is exactly the case
-     * where the graph cannot help.
-     *
-     * Kept exactly as the engine gave them, positions in the *compiled* module
-     * and all — browsers do not apply source maps to `error.stack`. The panel
-     * resolves them through the module's own map before showing them; anything
-     * else reading this should do the same.
-     */
-    stack: string[];
-};
-/** Something a resource did. */
-export type QueryEvent = {
-    event: 'created' | 'invalidated' | 'dropped';
-    /** The cache key: its tags and variables, as the client derived them. */
-    key: string;
-    /** The tags the entry carries, which is what an invalidation matches on. */
-    tags: readonly string[];
-};
-/** One node of the graph, as devtools describe it. */
-export type GraphNode = {
-    kind: NodeKind;
-    /** `order.status`, `isEditable`, `button.disabled`, or a creation site. */
-    name: string;
-    /** The value the cell currently holds. */
-    value: unknown;
-    /** What this node reads. */
-    dependencies: GraphNode[];
-    /** What reads this node. */
-    dependents: GraphNode[];
-};
+import { causeOf, cells, chain, inspect, queries, stack, timeline } from './queries.js';
+export { cells, inspect, chain, path, causeOf, queries, stack, timeline } from './queries.js';
+export type { NodeKind, Update, QueryEvent, GraphNode } from './types.js';
 /**
- * Starts recording.
+ * Registers something to be told when the graph has settled.
  *
- * Call it before the application creates anything — an import at the top of
- * the entry module is the usual place — because a cell created earlier has no
- * name to record. It stays in the graph; it is simply labelled by its
- * creation site rather than by what it is called.
+ * Used by the panel to redraw itself. Exported because the panel is a separate
+ * module, not because an application should need it — and re-exported rather
+ * than wrapped so that the panel and an outside caller reach the same function.
+ * A wrapper here would be a line only the panel could have covered, and the
+ * panel does not come through this module.
  */
-export declare function attach(): void;
+export { setWatcher as watch } from './record.js';
 /** What `attach()` puts on `globalThis` for the browser console to use. */
 export type Console = {
     chain: typeof chain;
@@ -69,95 +50,15 @@ export type Console = {
     /** Opens the panel, or shows it for a node you already have. */
     panel: (node?: Node) => void;
 };
-/** Stops recording and forgets everything. Mostly for tests. */
-export declare function detach(): void;
-/** Every computed and effect currently alive, in owner order. */
-export declare function cells(): GraphNode[];
-/**
- * What feeds a DOM node, all the way up to the signals.
- *
- * This is the question the panel exists for: the node is on the screen, the
- * value is wrong, and what you want to know is where it came from.
- */
-export declare function inspect(node: Node, depth?: number): GraphNode[];
-/**
- * The chain from a DOM node up to its sources, as text.
- *
- * ```
- * order.status
- *    ↓
- * computed(isEditable)
- *    ↓
- * button.disabled
- * ```
- *
- * Only the deepest path is drawn, because a chain is a story and a tree is
- * not. `inspect` returns the whole shape for anything that wants it.
- */
-export declare function chain(node: Node): string;
-/**
- * The longest path through a node's dependencies, sources first.
- *
- * One path rather than the whole tree, because a chain is a story: it is what
- * `chain` prints and what the panel draws as boxes. `inspect` has the shape
- * for anything that wants all of it.
- */
-export declare function path(node: GraphNode): GraphNode[];
 /**
- * Why an effect last ran: the dependency whose change scheduled it.
- *
- * The graph does not keep this — nothing needs it once the flush is over — so
- * it is the one fact devtools record rather than read.
- */
-export declare function causeOf(node: Node): string | null;
-/**
- * What the resources have done, oldest first.
- *
- * The cache is the one part of the framework whose behaviour is not in the
- * reactive graph: a tag match is a decision rather than an edge, and an
- * invalidation that matched nothing looks exactly like one that was never
- * sent. Bounded to the last 200 events, because a long session should not
- * become a memory leak in a debugging tool.
- *
- * ```ts
- * queries().filter((e) => e.event === 'invalidated');
- * ```
- */
-export declare function queries(): QueryEvent[];
-/**
- * Registers something to be told when the graph has settled.
- *
- * Used by the panel to redraw itself. Exported because the panel is a separate
- * module, not because an application should need it.
- */
-export declare function watch(onSettled: (() => void) | null): void;
-/**
- * The component stack a DOM node's part lives in, outermost first.
- *
- * The owner tree already has the shape — a component's scope is the parent of
- * everything its setup created — so this is a walk, not a recording. What the
- * DOM layer contributes is the name, which only it knows and only at the
- * moment an instance is created.
- *
- * ```ts
- * stack(button); // ['App', 'OrderPage', 'SaveButton']
- * ```
- */
-export declare function stack(node: Node): string[];
-/**
- * Every update, oldest first: what was written, and what ran because of it.
- *
- * The graph answers "what depends on this". This answers "what happened", in
- * order and with a time — which is the question when something updated and
- * nobody expected it to.
- *
- * ```ts
- * timeline();            // everything
- * timeline(button);      // only the updates that ran this node's part
- * ```
+ * Starts recording.
  *
- * The last 100 updates, so that a page left open overnight is still a
- * debugging tool rather than a leak.
+ * Call it before the application creates anything — an import at the top of
+ * the entry module is the usual place — because a cell created earlier has no
+ * name to record. It stays in the graph; it is simply labelled by its
+ * creation site rather than by what it is called.
  */
-export declare function timeline(node?: Node): Update[];
+export declare function attach(): void;
+/** Stops recording and forgets everything. Mostly for tests. */
+export declare function detach(): void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,EAAE,MAAM,EAAE,CAAC;IACd;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7C,yEAAyE;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,sDAAsD;AACtD,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,EAAE,SAAS,EAAE,CAAC;CACzB,CAAC;AA0IF;;;;;;;GAOG;AACH,wBAAgB,MAAM,IAAI,IAAI,CAuH7B;AAED,2EAA2E;AAC3E,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,gEAAgE;IAChE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,MAAM,IAAI,IAAI,CAkB7B;AA8ED,iEAAiE;AACjE,wBAAgB,KAAK,IAAI,SAAS,EAAE,CAMnC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,SAAI,GAAG,SAAS,EAAE,CAM1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAMxC;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,CASjD;AAMD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAYjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,IAAI,UAAU,EAAE,CAEtC;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAE1D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,CAsB1C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,CAW9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE9F,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE1E;;;;;;;;GAQG;AACH,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAKlD,2EAA2E;AAC3E,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,gEAAgE;IAChE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,MAAM,IAAI,IAAI,CAwC7B;AAqBD,gEAAgE;AAChE,wBAAgB,MAAM,IAAI,IAAI,CAO7B"}

package/dist/index.js

@@ -1 +1 @@
-import{a,b,c,d,e,f,g,h,i,j,k}from"./chunk-7MQSJYVB.js";export{a as attach,g as causeOf,c as cells,e as chain,b as detach,d as inspect,f as path,h as queries,j as stack,k as timeline,i as watch};
+import{a as p,b as d,c as f,d as t,e as i,f as n,g as u,h as l,i as s,j as a,k as r}from"./chunk-B62UJE3O.js";var o=null;function N(){p()&&(o=e=>{e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==="f"&&(e.preventDefault(),y())},globalThis.addEventListener("keydown",o),console.info("[firsthand] devtools attached \u2014 press Ctrl+Shift+F for the panel, or call __FIRSTHAND__.panel()"),globalThis.__FIRSTHAND__={chain:n,inspect:i,causeOf:l,stack:a,timeline:r,cells:t,queries:s,detach:_,panel:e=>{h(e)}})}async function h(e){let c=await import("./chunk-UEYJUDK5.js");e===void 0?c.open():c.show(e)}async function y(){(await import("./chunk-UEYJUDK5.js")).toggle()}function _(){d(),delete globalThis.__FIRSTHAND__,o!==null&&(globalThis.removeEventListener("keydown",o),o=null)}export{N as attach,l as causeOf,t as cells,n as chain,_ as detach,i as inspect,u as path,s as queries,a as stack,r as timeline,f as watch};

package/dist/names.d.ts

@@ -0,0 +1,12 @@
+/**
+ * What to call a cell.
+ *
+ * Its own module because both halves need it and neither should import the
+ * other: the hook names a cell as it records an update, and the query API names
+ * it again when somebody asks what the graph looks like.
+ */
+import type { CellLike, NodeKind } from './types.js';
+/** A readable name for a cell, whatever devtools managed to learn about it. */
+export declare function nameOf(cell: CellLike): string;
+export declare function kindOf(cell: CellLike): NodeKind;
+//# sourceMappingURL=names.d.ts.map

package/dist/names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"names.d.ts","sourceRoot":"","sources":["../src/names.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAErD,+EAA+E;AAC/E,wBAAgB,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAY7C;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAK/C"}

package/dist/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.ts"],"names":[],"mappings":"AAgfA;;;;;;GAMG;AACH,wBAAgB,IAAI,IAAI,IAAI,CA2E3B;AAED,oEAAoE;AACpE,wBAAgB,KAAK,IAAI,IAAI,CAiB5B;AAED,2DAA2D;AAC3D,wBAAgB,MAAM,IAAI,IAAI,CAM7B;AAED,yDAAyD;AACzD,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAKrC;AAED,wEAAwE;AACxE,wBAAgB,OAAO,IAAI,IAAI,CAE9B"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.ts"],"names":[],"mappings":"AAiFA;;;;;;GAMG;AACH,wBAAgB,IAAI,IAAI,IAAI,CA4B3B;AA0DD,oEAAoE;AACpE,wBAAgB,KAAK,IAAI,IAAI,CAgB5B;AAED,2DAA2D;AAC3D,wBAAgB,MAAM,IAAI,IAAI,CAM7B;AAED,yDAAyD;AACzD,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAKrC;AAED,wEAAwE;AACxE,wBAAgB,OAAO,IAAI,IAAI,CAE9B"}

package/dist/queries.d.ts

@@ -0,0 +1,96 @@
+/**
+ * The questions devtools answer, and the only things a panel needs.
+ *
+ * The reactive graph is not something this package records. It is already
+ * there, because propagation and disposal need it: every cell carries its
+ * dependencies and its subscribers as linked lists, and every owner carries its
+ * children and its cells. These functions read that structure and put names on
+ * it, using what `record.ts` wrote down.
+ *
+ * `panel.ts` imports from here rather than from the entry module, which is what
+ * keeps the entry module free to load the panel on demand.
+ */
+import type { GraphNode, QueryEvent, Update } from './types.js';
+/** Every computed and effect currently alive, in owner order. */
+export declare function cells(): GraphNode[];
+/**
+ * What feeds a DOM node, all the way up to the signals.
+ *
+ * This is the question the panel exists for: the node is on the screen, the
+ * value is wrong, and what you want to know is where it came from.
+ */
+export declare function inspect(node: Node, depth?: number): GraphNode[];
+/**
+ * The chain from a DOM node up to its sources, as text.
+ *
+ * ```
+ * order.status
+ *    ↓
+ * computed(isEditable)
+ *    ↓
+ * button.disabled
+ * ```
+ *
+ * Only the deepest path is drawn, because a chain is a story and a tree is
+ * not. `inspect` returns the whole shape for anything that wants it.
+ */
+export declare function chain(node: Node): string;
+/**
+ * The longest path through a node's dependencies, sources first.
+ *
+ * One path rather than the whole tree, because a chain is a story: it is what
+ * `chain` prints and what the panel draws as boxes. `inspect` has the shape
+ * for anything that wants all of it.
+ */
+export declare function path(node: GraphNode): GraphNode[];
+/**
+ * Why an effect last ran: the dependency whose change scheduled it.
+ *
+ * The graph does not keep this — nothing needs it once the flush is over — so
+ * it is the one fact devtools record rather than read.
+ */
+export declare function causeOf(node: Node): string | null;
+/**
+ * What the resources have done, oldest first.
+ *
+ * The cache is the one part of the framework whose behaviour is not in the
+ * reactive graph: a tag match is a decision rather than an edge, and an
+ * invalidation that matched nothing looks exactly like one that was never
+ * sent. Bounded to the last 200 events, because a long session should not
+ * become a memory leak in a debugging tool.
+ *
+ * ```ts
+ * queries().filter((e) => e.event === 'invalidated');
+ * ```
+ */
+export declare function queries(): QueryEvent[];
+/**
+ * The component stack a DOM node's part lives in, outermost first.
+ *
+ * The owner tree already has the shape — a component's scope is the parent of
+ * everything its setup created — so this is a walk, not a recording. What the
+ * DOM layer contributes is the name, which only it knows and only at the
+ * moment an instance is created.
+ *
+ * ```ts
+ * stack(button); // ['App', 'OrderPage', 'SaveButton']
+ * ```
+ */
+export declare function stack(node: Node): string[];
+/**
+ * Every update, oldest first: what was written, and what ran because of it.
+ *
+ * The graph answers "what depends on this". This answers "what happened", in
+ * order and with a time — which is the question when something updated and
+ * nobody expected it to.
+ *
+ * ```ts
+ * timeline();            // everything
+ * timeline(button);      // only the updates that ran this node's part
+ * ```
+ *
+ * The last 100 updates, so that a page left open overnight is still a
+ * debugging tool rather than a leak.
+ */
+export declare function timeline(node?: Node): Update[];
+//# sourceMappingURL=queries.d.ts.map

package/dist/queries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.d.ts","sourceRoot":"","sources":["../src/queries.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,OAAO,KAAK,EAAY,SAAS,EAAa,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AA0CrF,iEAAiE;AACjE,wBAAgB,KAAK,IAAI,SAAS,EAAE,CAMnC;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,SAAI,GAAG,SAAS,EAAE,CAM1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAMxC;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,CASjD;AAMD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAYjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,IAAI,UAAU,EAAE,CAEtC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,CAc1C;AAcD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,CAW9C"}

package/dist/record.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The hook the core calls, and the only thing in this package that writes.
+ *
+ * Nothing here runs unless `install()` is called, and none of it exists in a
+ * production build of the framework: the hooks that feed it live in modules the
+ * build replaces with empty functions (ADR-0020).
+ *
+ * It knows how to record and nothing about how anyone reads it back. That is
+ * what lets `queries.ts` sit beside it rather than above it, and it is why the
+ * panel can be loaded without loading this.
+ */
+/**
+ * Installs the hook, unless one is already installed.
+ *
+ * Returns whether it did, so the caller knows whether the rest of attaching —
+ * the shortcut, the console API — still has to happen.
+ */
+export declare function install(): boolean;
+/** Stops recording and forgets everything. */
+export declare function uninstall(): void;
+/** Who to tell when the graph has settled. The panel is the only caller. */
+export declare function setWatcher(onSettled: (() => void) | null): void;
+//# sourceMappingURL=record.d.ts.map

package/dist/record.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record.d.ts","sourceRoot":"","sources":["../src/record.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAuFH;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,OAAO,CAyBjC;AAwDD,8CAA8C;AAC9C,wBAAgB,SAAS,IAAI,IAAI,CAWhC;AAED,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAE/D"}

package/dist/recorded.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Everything devtools have written down, and nothing that writes it.
+ *
+ * One module holding the data so that the two halves above it — the hook that
+ * records and the API that reads — can both reach it without reaching each
+ * other. Kept as one object rather than eight exports because it is one thing:
+ * what this session has observed.
+ *
+ * All of it is bounded or weak. A tool that made a page leak while you debugged
+ * it would be worse than no tool.
+ */
+import type { CellLike, Label, OwnerLike, QueryEvent, Update } from './types.js';
+/** `MUTABLE`, from the core's flags: distinguishes a computed from a signal. */
+export declare const MUTABLE: number;
+/** Bounded: a long session would otherwise keep every fetch it ever made. */
+export declare const LOG_LIMIT = 200;
+/** Bounded, for the same reason the cache log is. */
+export declare const UPDATE_LIMIT = 100;
+export declare const recorded: {
+    labels: WeakMap<object, Label>;
+    /** Which node and property each effect writes, learned while it runs. */
+    parts: WeakMap<object, {
+        node: object;
+        property: string;
+    }>;
+    /** The effect a DOM node is written by, for looking a chain up from the page. */
+    writers: WeakMap<object, Set<object>>;
+    /** Why each effect last ran. */
+    causes: WeakMap<object, object>;
+    /** The component each scope belongs to, as the DOM layer reported it. */
+    components: WeakMap<object, string>;
+    /** What the resources have done, newest last. */
+    cacheLog: QueryEvent[];
+    /**
+     * Every update, newest last.
+     *
+     * The effects are kept beside the update rather than inside it: two parts
+     * writing two paragraphs are both called `p.text`, so asking "which updates
+     * ran *this* node" has to compare identities, not names.
+     */
+    updates: {
+        update: Update;
+        effects: object[];
+    }[];
+    roots: Set<WeakRef<OwnerLike>>;
+};
+/** Forgets everything. The weak maps need no clearing: nothing holds them. */
+export declare function forget(): void;
+/** Appends to a log that must not grow without bound. */
+export declare function append<T>(log: T[], entry: T, limit: number): void;
+/** Every live root, with the dead references swept out on the way past. */
+export declare function liveRoots(): OwnerLike[];
+export type { CellLike };
+//# sourceMappingURL=recorded.d.ts.map

package/dist/recorded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recorded.d.ts","sourceRoot":"","sources":["../src/recorded.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEjF,gFAAgF;AAChF,eAAO,MAAM,OAAO,QAAS,CAAC;AAE9B,6EAA6E;AAC7E,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,qDAAqD;AACrD,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC,eAAO,MAAM,QAAQ;;IAEnB,yEAAyE;;cACtC,MAAM;kBAAY,MAAM;;IAC3D,iFAAiF;;IAEjF,gCAAgC;;IAEhC,yEAAyE;;IAEzE,iDAAiD;cACjC,UAAU,EAAE;IAC5B;;;;;;OAMG;aACY;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE;;CAEvD,CAAC;AAEF,8EAA8E;AAC9E,wBAAgB,MAAM,IAAI,IAAI,CAI7B;AAED,yDAAyD;AACzD,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAKjE;AAED,2EAA2E;AAC3E,wBAAgB,SAAS,IAAI,SAAS,EAAE,CAWvC;AAED,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How the panel looks.
+ *
+ * Its own module because it changes for its own reasons — a colour, a width,
+ * a state nobody could see — and because ninety lines of CSS in the middle of
+ * the code that builds the panel makes both harder to read.
+ *
+ * `all: initial` at the top is the point of the shadow root: the page's
+ * stylesheet cannot reach in, and this cannot reach out. An inspector that
+ * changes what it is inspecting is worse than no inspector.
+ */
+export declare const STYLE = ":host { all: initial; }\n.panel {\n  position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;\n  width: 460px; max-height: 78vh; display: flex; flex-direction: column;\n  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n  color: #e6e6e6; background: #1c1c1f; border: 1px solid #3a3a40;\n  border-radius: 10px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.45);\n}\nheader { display: flex; align-items: center; gap: 6px; padding: 8px 10px;\n  border-bottom: 1px solid #3a3a40; }\nheader strong { font-weight: 600; letter-spacing: 0.02em; flex: 1; }\nbutton { font: inherit; color: inherit; background: #2a2a30; border: 1px solid #45454d;\n  border-radius: 5px; padding: 3px 8px; cursor: pointer; }\nbutton:hover { background: #34343c; }\nbutton[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }\n.body { display: flex; flex-direction: column; overflow: hidden; padding: 12px; min-height: 0; }\n/* The list scrolls; the detail stays where it can be read. Without this the\n   call stack sits below everything and is only reachable by scrolling past\n   the whole log \u2014 which is exactly when you least want to. */\n/* Two independent scroll areas: the list above, the detail below. Each gets\n   its own, because a call stack that can only be reached by scrolling past\n   forty rows of log is out of reach exactly when it is wanted. */\n.scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 60px; }\n.pinned { flex: 0 1 auto; min-height: 140px; max-height: 65%; overflow-y: auto;\n  overflow-x: hidden; margin-top: 8px; padding-top: 8px;\n  border-top: 1px solid #3a3a40; }\n.detail-head { display: flex; align-items: center; gap: 8px; }\n.detail-head .hint { margin: 0; flex: 1; }\n.detail-head button { padding: 0 6px; line-height: 1.4; }\n.empty { color: #8a8a94; }\n.hint { color: #7c7c88; margin: 14px 0 6px; font-size: 10px; text-transform: uppercase;\n  letter-spacing: 0.1em; }\n.hint:first-child { margin-top: 0; }\n.section + .section { margin-top: 2px; }\n.stack { margin: 4px 0 0; }\n.stack div { color: #9a9aa6; padding-left: 10px; border-left: 1px solid #3a3a40; }\n.stack div:first-child { color: #e6e6e6; }\n.filters { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }\n.filters .chip { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;\n  padding: 1px 9px; cursor: pointer; color: #9ecbff; }\n.filters .chip[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }\n.count { color: #7c7c88; }\n\n/* The path, as boxes and arrows rather than as three lines of text. */\n.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }\n.box { border: 1px solid #45454d; border-radius: 7px; padding: 6px 9px; background: #232329;\n  display: flex; align-items: baseline; gap: 8px; }\n.box .tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;\n  padding: 1px 5px; border-radius: 4px; background: #34343c; color: #b9b9c4; }\n.box .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.box .val { color: #c3e88d; }\n.box.signal { border-color: #3d5afe; }\n.box.signal .tag { background: #23306b; color: #b6c4ff; }\n.box.computed { border-color: #c792ea; }\n.box.computed .tag { background: #3a2b47; color: #e6c8ff; }\n.box.part { border-color: #ffcb6b; }\n.box.part .tag { background: #4a3a1c; color: #ffdfa1; }\n.box.trigger { box-shadow: 0 0 0 2px #3d5afe66; }\n.arrow { align-self: center; color: #6a6a76; font-size: 14px; line-height: 1; padding: 3px 0; }\n\n/* The component stack, as crumbs. */\n.crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }\n.crumb { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;\n  padding: 1px 8px; color: #c792ea; }\n.crumb + .crumb::before { content: '\u203A'; color: #8a8a94; margin-right: 6px; margin-left: -4px; }\n\n/* The timeline: one row per update, a bar for how much it woke. */\n.track { display: flex; flex-direction: column; gap: 4px; }\n.tick { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 8px;\n  align-items: center; padding: 3px 4px; border-radius: 5px; cursor: pointer; }\n.tick:hover { background: #26262c; }\n.tick[aria-selected='true'] { background: #23306b; }\n.tick .when { color: #8a8a94; text-align: right; }\n.tick .who { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tick .where { color: #7c7c88; white-space: nowrap; }\n.tick .bar { height: 8px; border-radius: 4px; background: #3d5afe; min-width: 4px; }\n.tick .bar.none { background: #4a4a54; }\n.detail .ran { color: #ffdfa1; }\n.cause { color: #ffcb6b; margin: 10px 0 0; }\n.event { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 2px 0; }\n.event .created { color: #c3e88d; }\n.event .invalidated { color: #ffcb6b; }\n.event .dropped { color: #f07178; }\n.event .tags { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }";
+/** The element the picker is over, highlighted without touching its styles. */
+export declare const OUTLINE = "firsthand-devtools-outline";
+/** The one rule that has to live in the page, because the outline is on it. */
+export declare const OUTLINE_STYLE = ".firsthand-devtools-outline { outline: 2px solid #3d5afe !important; outline-offset: 1px; }";
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,KAAK,y6JAmF+E,CAAC;AAElG,+EAA+E;AAC/E,eAAO,MAAM,OAAO,+BAA+B,CAAC;AAEpD,+EAA+E;AAC/E,eAAO,MAAM,aAAa,gGAAgF,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,84 @@
+/**
+ * What devtools say a graph is.
+ *
+ * The public shapes an application or a panel reads, and the internal ones
+ * describing what the core actually built. The internal three are read and
+ * never written: they are this package's view of another package's private
+ * structure, written down here so that the reading is in one place and the
+ * assumption is visible.
+ */
+/** What a node of the graph is. */
+export type NodeKind = 'signal' | 'computed' | 'effect' | 'part';
+/**
+ * One update: a write, and everything that ran because of it.
+ *
+ * This is the thing the graph cannot answer on its own. The graph says what
+ * depends on what; an update says what actually happened, in order, at a time.
+ */
+export type Update = {
+    /** Milliseconds since the page loaded, so entries can be read as a sequence. */
+    at: number;
+    /** What was written. */
+    source: string;
+    /** What ran, in the order it ran. */
+    ran: string[];
+    /**
+     * Where the write came from, application frames only.
+     *
+     * "Which signal changed" is half an answer; the other half is which of your
+     * code changed it, and an event handler three files away is exactly the case
+     * where the graph cannot help.
+     *
+     * Kept exactly as the engine gave them, positions in the *compiled* module
+     * and all — browsers do not apply source maps to `error.stack`. The panel
+     * resolves them through the module's own map before showing them; anything
+     * else reading this should do the same.
+     */
+    stack: string[];
+};
+/** Something a resource did. */
+export type QueryEvent = {
+    event: 'created' | 'invalidated' | 'dropped';
+    /** The cache key: its tags and variables, as the client derived them. */
+    key: string;
+    /** The tags the entry carries, which is what an invalidation matches on. */
+    tags: readonly string[];
+};
+/** One node of the graph, as devtools describe it. */
+export type GraphNode = {
+    kind: NodeKind;
+    /** `order.status`, `isEditable`, `button.disabled`, or a creation site. */
+    name: string;
+    /** The value the cell currently holds. */
+    value: unknown;
+    /** What this node reads. */
+    dependencies: GraphNode[];
+    /** What reads this node. */
+    dependents: GraphNode[];
+};
+/** Internal shape of a cell, as the core builds it. Read, never written. */
+export type CellLike = {
+    flags: number;
+    v: unknown;
+    deps?: LinkLike;
+    subs?: LinkLike;
+    /** An effect's own scope, which is where the component stack starts. */
+    scope?: OwnerLike;
+};
+export type LinkLike = {
+    dep: CellLike;
+    sub: CellLike;
+    nextDep?: LinkLike;
+    nextSub?: LinkLike;
+};
+export type OwnerLike = {
+    parent: OwnerLike | null;
+    head: OwnerLike | null;
+    next: OwnerLike | null;
+    cells: CellLike[] | null;
+};
+export type Label = {
+    kind: NodeKind;
+    name: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,mCAAmC;AACnC,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,MAAM,GAAG;IACnB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,EAAE,MAAM,EAAE,CAAC;IACd;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7C,yEAAyE;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,sDAAsD;AACtD,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,EAAE,SAAS,EAAE,CAAC;CACzB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,OAAO,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,QAAQ,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC"}

package/dist/views.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The three tabs, and the one piece of state they share.
+ *
+ * A view knows how to draw an answer and nothing about the panel around it:
+ * where a click has to redraw, the panel passes a function in. That is what
+ * lets `panel.ts` own the shell without either module importing the other.
+ *
+ * `chosen` is shared because both the graph and the timeline show the update
+ * list, and an entry opened in one is the same entry in the other.
+ */
+/** Whether an entry is open, which is when a redraw would move it. */
+export declare function hasChosen(): boolean;
+/** Forgets what was open and what was filtered. The panel calls it on close. */
+export declare function resetViews(): void;
+export declare function renderGraph(host: HTMLElement, selected: Node | null): void;
+/**
+ * Every update, with a chip per source to narrow it.
+ *
+ * `redraw` rather than a call back into the panel: a filter changes what the
+ * whole panel shows, and the view does not know what else is on the screen.
+ */
+export declare function renderTimeline(host: HTMLElement, redraw: () => void): void;
+export declare function renderQueries(host: HTMLElement): void;
+//# sourceMappingURL=views.d.ts.map

package/dist/views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../src/views.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAeH,sEAAsE;AACtE,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED,gFAAgF;AAChF,wBAAgB,UAAU,IAAI,IAAI,CAIjC;AAqCD,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAqD1E;AA0FD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,IAAI,GAAG,IAAI,CAkC1E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAgBrD"}

package/dist/widgets.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The small pieces every view is built from.
+ *
+ * Plain DOM, deliberately: this runs inside the page it is inspecting, so it
+ * must not create parts, own scopes or appear in the graph it is showing.
+ * Rendering it with the framework would put the inspector into its own results.
+ */
+export declare function button(label: string, onClick: () => void): HTMLButtonElement;
+export declare function text(tag: string, className: string, content: string): HTMLElement;
+/** Only the position of a frame: `main.tsx:12:11`, without who was running. */
+export declare function position(frame: string): string;
+/**
+ * Anything that carries a position, shown at once and corrected after.
+ *
+ * Two things here name a place: a stack frame, and a cell the compiler did not
+ * name, which is labelled by where it was created. Both come from the engine
+ * and both say where the *compiled* module has it, which is not a line anyone
+ * wrote. Resolving needs the module and its map, so it cannot happen while the
+ * write does — the position appears immediately and is replaced when the
+ * answer arrives.
+ *
+ * A name with no position in it — `h1.text`, or `v (main.tsx:9)`, which the
+ * compiler took from the source in the first place — passes through untouched.
+ */
+export declare function located(tag: string, className: string, name: string, format?: (shown: string) => string): HTMLElement;
+/** Keeps a detail in view while the list above it scrolls. */
+export declare function pin(detail: HTMLElement): HTMLElement;
+//# sourceMappingURL=widgets.d.ts.map

package/dist/widgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.d.ts","sourceRoot":"","sources":["../src/widgets.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,iBAAiB,CAM5E;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,CAKjF;AA0BD,+EAA+E;AAC/E,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,MAAM,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GACnD,WAAW,CAMb;AAED,8DAA8D;AAC9D,wBAAgB,GAAG,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,CAGpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firsthandjs/devtools",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Experimental devtools for Firsthand: see what updates what, why it ran, and when.",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@firsthandjs/core": "0.9.1"
+    "@firsthandjs/core": "0.10.0"
   },
   "engines": {
     "node": ">=20.11.0"

package/dist/chunk-7MQSJYVB.js

@@ -1,7 +0,0 @@
-var m=new WeakMap,L=new WeakMap,i=new WeakMap,N=new WeakMap,v=new WeakMap,d=[],r=[],T=100,l=null,j=200,p=new Set,a=null,b=null,u=null,f=null,c=null,w=1,_=/@firsthandjs|[\\/]node_modules[\\/]|[\\/]packages[\\/](core|dom|deep|devtools|jsx-runtime|data|router|styled|testing)[\\/]src[\\/]/;function D(){let t=(new Error().stack??"").split(`
-`).slice(1),e=[];for(let n of t){if(_.test(n))continue;let o=n.trim().replace(/^at\s+/,"");if(o!==""&&e.push(o),e.length===6)break}return e}function E(){let e=(new Error().stack??"").split(`
-`).slice(1).find(o=>!_.test(o))??"unknown",n=/\(?([^()\s]+:\d+:\d+)\)?$/.exec(e.trim());return n===null?e.trim():n[1]}function U(){if(c!==null)return;let t={attached:!0,label(e,n,o){m.set(e,{kind:n,name:o===""?E():o})},cause(e){f=e,l={update:{at:Math.round(performance.now()),source:h(e),ran:[],stack:D()},effects:[]},r.push(l),r.length>T&&r.shift()},root(e){p.add(new WeakRef(e))},component(e,n){v.set(e,n)},running(e){a=e,e===null&&b?.(),e!==null&&f!==null&&(N.set(e,f),l?.update.ran.push(h(e)),l?.effects.push(e))},query(e,n,o){d.push({event:e,key:n,tags:o}),d.length>j&&d.shift()},part(e,n){if(a===null)return;L.set(a,{node:e,property:n});let o=i.get(e);o===void 0&&(o=new Set,i.set(e,o)),o.add(a)}};globalThis.__FIRSTHAND_DEVTOOLS__=t,c=t,u=e=>{e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==="f"&&(e.preventDefault(),import("./chunk-BCXJOY33.js").then(n=>{n.toggle()}))},globalThis.addEventListener("keydown",u),console.info("[firsthand] devtools attached \u2014 press Ctrl+Shift+F for the panel, or call __FIRSTHAND__.panel()"),globalThis.__FIRSTHAND__={chain:A,inspect:C,causeOf:K,stack:F,timeline:W,cells:I,queries:M,detach:S,panel:e=>{import("./chunk-BCXJOY33.js").then(n=>{e===void 0?n.open():n.show(e)})}}}function S(){c!==null&&(c.attached=!1),globalThis.__FIRSTHAND_DEVTOOLS__=void 0,delete globalThis.__FIRSTHAND__,u!==null&&(globalThis.removeEventListener("keydown",u),u=null),c=null,a=null,f=null,l=null,r.length=0,b=null,d.length=0,p.clear()}function h(t){let e=L.get(t);if(e!==void 0){let o=e.node;return`${(o.tagName??o.nodeName??"node").toLowerCase()}.${e.property}`}let n=m.get(t);return n===void 0?(t.flags&w)===0?"signal":"computed":n.name}function G(t){return L.has(t)?"part":m.get(t)?.kind??((t.flags&w)===0?"signal":"computed")}function g(t,e,n){let o={kind:G(t),name:h(t),value:t.v,dependencies:[],dependents:[]};if(e>0)for(let s=t.deps;s!==void 0;s=s.nextDep)o.dependencies.push(g(s.dep,e-1,0));if(n>0)for(let s=t.subs;s!==void 0;s=s.nextSub)o.dependents.push(g(s.sub,0,n-1));return o}function R(){let t=[];for(let e of p){let n=e.deref();n===void 0?p.delete(e):t.push(n)}return t}function x(t,e){t.cells!==null&&e.push(...t.cells);for(let n=t.head;n!==null;n=n.next)x(n,e)}function I(){let t=[];for(let e of R())x(e,t);return t.map(e=>g(e,1,1))}function C(t,e=8){let n=i.get(t);return n===void 0?[]:[...n].map(o=>g(o,e,0))}function A(t){let e=C(t);return e.length===0?"Nothing reactive writes this node.":e.map(n=>H(O(n)).join(`
-   \u2193
-`)).join(`
-
-`)}function O(t){let e=[];for(let n of t.dependencies){let o=O(n);o.length>e.length&&(e=o)}return[...e,t]}function H(t){return t.map(e=>e.kind==="computed"?`computed(${e.name})`:e.name)}function K(t){let e=i.get(t);if(e===void 0)return null;for(let n of e){let o=N.get(n);if(o!==void 0)return h(o)}return null}function M(){return[...d]}function q(t){b=t}function F(t){let e=i.get(t);if(e===void 0)return[];let n=[];for(let o of e){let s=o.scope??null,k=[];for(;s!==null;){let y=v.get(s);y!==void 0&&k.unshift(y),s=s.parent}k.length>n.length&&(n.length=0,n.push(...k))}return n}function W(t){if(t===void 0)return r.map(n=>n.update);let e=i.get(t);return e===void 0?[]:r.filter(n=>n.effects.some(o=>e.has(o))).map(n=>n.update)}export{U as a,S as b,I as c,C as d,A as e,O as f,K as g,M as h,q as i,F as j,W as k};

package/dist/chunk-BCXJOY33.js

@@ -1,86 +0,0 @@
-import{d as $,f as H,g as q,h as C,i as L,j as A,k as T}from"./chunk-7MQSJYVB.js";var J="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function Q(e){let t=[],r=0,n=0;for(let o of e){let a=J.indexOf(o),i=a&32;if(n+=(a&31)<<r,i===0){let s=n&1;n>>=1,t.push(s===1?-n:n),r=0,n=0}else r+=5}return t}function W(e){let t=[],r=0,n=0,o=0;for(let[a,i]of e.mappings.split(";").entries()){let s=0;for(let u of i.split(",")){if(u==="")continue;let p=Q(u);if(s+=p[0],p.length<4)continue;r+=p[1],n+=p[2],o+=p[3];let m=e.sources[r];m!=null&&t.push({generatedLine:a,generatedColumn:s,source:m,originalLine:n,originalColumn:o})}}return t}var P=new Map,B=/\/\/[#@]\s*sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,([\w+/=]+)/;async function D(e){let t=P.get(e);if(t!==void 0)return t;let r=(async()=>{try{let o=await(await fetch(e)).text(),a=B.exec(o);if(a===null)return null;let i=JSON.parse(atob(a[1]));return W(i)}catch{return null}})();return P.set(e,r),r}function Y(e,t,r){let n=null;for(let o of e){if(o.generatedLine>t||o.generatedLine===t&&o.generatedColumn>r)break;o.generatedLine===t&&(n=o)}return n}async function O(e){let t=/^(.*?)\(?([^\s()]+):(\d+):(\d+)\)?$/.exec(e.trim().replace(/^at\s+/,""));if(t===null)return e;let[,r,n,o,a]=t;if(!/^https?:\/\//.test(n))return e;let i=await D(n);if(i===null)return e;let s=Y(i,Number(o)-1,Number(a)-1);if(s===null)return e;let p=`${s.source.slice(Math.max(s.source.lastIndexOf("/"),s.source.lastIndexOf("\\"))+1)}:${String(s.originalLine+1)}:${String(s.originalColumn+1)}`;return r.trim()===""?p:`${r.trim()} (${p})`}var K=`
-:host { all: initial; }
-.panel {
-  position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;
-  width: 460px; max-height: 78vh; display: flex; flex-direction: column;
-  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: #e6e6e6; background: #1c1c1f; border: 1px solid #3a3a40;
-  border-radius: 10px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
-}
-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
-  border-bottom: 1px solid #3a3a40; }
-header strong { font-weight: 600; letter-spacing: 0.02em; flex: 1; }
-button { font: inherit; color: inherit; background: #2a2a30; border: 1px solid #45454d;
-  border-radius: 5px; padding: 3px 8px; cursor: pointer; }
-button:hover { background: #34343c; }
-button[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }
-.body { display: flex; flex-direction: column; overflow: hidden; padding: 12px; min-height: 0; }
-/* The list scrolls; the detail stays where it can be read. Without this the
-   call stack sits below everything and is only reachable by scrolling past
-   the whole log \u2014 which is exactly when you least want to. */
-/* Two independent scroll areas: the list above, the detail below. Each gets
-   its own, because a call stack that can only be reached by scrolling past
-   forty rows of log is out of reach exactly when it is wanted. */
-.scroll { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 60px; }
-.pinned { flex: 0 1 auto; min-height: 140px; max-height: 65%; overflow-y: auto;
-  overflow-x: hidden; margin-top: 8px; padding-top: 8px;
-  border-top: 1px solid #3a3a40; }
-.detail-head { display: flex; align-items: center; gap: 8px; }
-.detail-head .hint { margin: 0; flex: 1; }
-.detail-head button { padding: 0 6px; line-height: 1.4; }
-.empty { color: #8a8a94; }
-.hint { color: #7c7c88; margin: 14px 0 6px; font-size: 10px; text-transform: uppercase;
-  letter-spacing: 0.1em; }
-.hint:first-child { margin-top: 0; }
-.section + .section { margin-top: 2px; }
-.stack { margin: 4px 0 0; }
-.stack div { color: #9a9aa6; padding-left: 10px; border-left: 1px solid #3a3a40; }
-.stack div:first-child { color: #e6e6e6; }
-.filters { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
-.filters .chip { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;
-  padding: 1px 9px; cursor: pointer; color: #9ecbff; }
-.filters .chip[aria-pressed='true'] { background: #3d5afe; border-color: #3d5afe; color: #fff; }
-.count { color: #7c7c88; }
-
-/* The path, as boxes and arrows rather than as three lines of text. */
-.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
-.box { border: 1px solid #45454d; border-radius: 7px; padding: 6px 9px; background: #232329;
-  display: flex; align-items: baseline; gap: 8px; }
-.box .tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
-  padding: 1px 5px; border-radius: 4px; background: #34343c; color: #b9b9c4; }
-.box .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.box .val { color: #c3e88d; }
-.box.signal { border-color: #3d5afe; }
-.box.signal .tag { background: #23306b; color: #b6c4ff; }
-.box.computed { border-color: #c792ea; }
-.box.computed .tag { background: #3a2b47; color: #e6c8ff; }
-.box.part { border-color: #ffcb6b; }
-.box.part .tag { background: #4a3a1c; color: #ffdfa1; }
-.box.trigger { box-shadow: 0 0 0 2px #3d5afe66; }
-.arrow { align-self: center; color: #6a6a76; font-size: 14px; line-height: 1; padding: 3px 0; }
-
-/* The component stack, as crumbs. */
-.crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
-.crumb { background: #2a2a30; border: 1px solid #45454d; border-radius: 999px;
-  padding: 1px 8px; color: #c792ea; }
-.crumb + .crumb::before { content: '\u203A'; color: #8a8a94; margin-right: 6px; margin-left: -4px; }
-
-/* The timeline: one row per update, a bar for how much it woke. */
-.track { display: flex; flex-direction: column; gap: 4px; }
-.tick { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 8px;
-  align-items: center; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
-.tick:hover { background: #26262c; }
-.tick[aria-selected='true'] { background: #23306b; }
-.tick .when { color: #8a8a94; text-align: right; }
-.tick .who { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tick .where { color: #7c7c88; white-space: nowrap; }
-.tick .bar { height: 8px; border-radius: 4px; background: #3d5afe; min-width: 4px; }
-.tick .bar.none { background: #4a4a54; }
-.detail .ran { color: #ffdfa1; }
-.cause { color: #ffcb6b; margin: 10px 0 0; }
-.event { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 2px 0; }
-.event .created { color: #c3e88d; }
-.event .invalidated { color: #ffcb6b; }
-.event .dropped { color: #f07178; }
-.event .tags { color: #9ecbff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-`,b="firsthand-devtools-outline",d=null,E=null,h=null,v=!1,f="graph",k=null,c=null,M=new Map,w=null;function y(e,t){let r=document.createElement("button");return r.textContent=e,r.setAttribute("aria-pressed","false"),r.addEventListener("click",t),r}function l(e,t,r){let n=document.createElement(e);return n.className=t,n.textContent=r,n}function V(e,t){let r=document.createElement("div");r.className=`box ${e.kind}${t?" trigger":""}`,r.append(l("span","tag",e.kind)),r.append(x("span","label",e.name));let n=e.value;return n!==void 0&&(typeof n!="object"||n===null)&&r.append(l("span","val",JSON.stringify(n))),r}function X(e,t,r){let n=H(e),o=document.createElement("div");o.className="flow";for(let[a,i]of n.entries())o.append(V(i,i.name===t)),a<n.length-1&&o.append(l("div","arrow","\u2193"));r.append(o)}function Z(e){let t=document.createElement("div");if(t.className="scroll",e.append(t),h===null){t.append(l("p","empty","Nothing selected."),l("p","hint","Press \u201CPick\u201D and click an element."));return}let r=A(h);if(r.length>0){t.append(l("p","hint","Component"));let i=document.createElement("div");i.className="crumbs";for(let s of r)i.append(l("span","crumb",s));t.append(i)}let n=$(h);if(n.length===0){t.append(l("p","empty","Nothing reactive writes this node."));return}let o=q(h);t.append(l("p","hint","Path"));for(let i of n)X(i,o,t);t.append(l("p","cause",o===null?"Has not run since anything changed.":`Triggered by ${o}`));let a=T(h).slice(-6).reverse();a.length>0&&(t.append(l("p","hint",`Last ${String(a.length)} updates`)),t.append(F(a))),c!==null&&e.append(N(S(c)))}function F(e){M.clear();let t=Math.max(1,...e.map(n=>n.ran.length)),r=document.createElement("div");r.className="track";for(let n of e){let o=document.createElement("div");o.className="tick",o.setAttribute("aria-selected",String(n===c)),M.set(o,n),o.append(l("span","when",`${String(n.at)}ms`)),o.append(x("span","who",n.source));let a=document.createElement("span");a.className=n.ran.length===0?"bar none":"bar",a.style.width=`${String(Math.round(n.ran.length/t*60)+6)}px`,a.title=`woke ${String(n.ran.length)} of ${String(t)}`,o.append(a);let i=n.stack[0];i!==void 0&&o.append(x("span","where",i,_)),o.addEventListener("click",()=>{I(n)}),r.append(o)}return r}function U(e){let t=/^(.*?)\(?([^()\s]+):(\d+):(\d+)\)?$/.exec(e);if(t===null)return e;let[,r,n,o,a]=t,i=Math.max(n.lastIndexOf("/"),n.lastIndexOf("\\")),s=n.slice(i+1),u=s.indexOf("?"),m=`${(u===-1?s:s.slice(0,u)).trim()}:${o}:${a}`;return r.trim()===""?m:`${r.trim()} (${m})`}function _(e){let t=/\(([^()]+)\)\s*$/.exec(e);return(t===null?e:t[1]).trim()}function x(e,t,r,n=o=>o){let o=l(e,t,n(U(r)));return O(r).then(a=>{o.textContent=n(U(a))}),o}function N(e){return e.classList.add("pinned"),e}function S(e){let t=document.createElement("div");t.className="detail";let r=document.createElement("div");r.className="detail-head",r.append(x("p","hint",e.source,o=>`${o} woke ${String(e.ran.length)}`));let n=y("\xD7",()=>{I(e)});n.setAttribute("aria-label","Close detail"),r.append(n),t.append(r);for(let o of e.ran)t.append(x("div","ran",o));if(e.stack.length>0){t.append(l("p","hint","Written from"));let o=document.createElement("div");o.className="stack";for(let a of e.stack)o.append(x("div","",a));t.append(o)}return t}function I(e){c=c===e?null:e;for(let[r,n]of M)r.setAttribute("aria-selected",String(n===c));let t=E?.body;t!==void 0&&(t.querySelector(".pinned")?.remove(),c!==null&&t.append(N(S(c))))}function ee(e){let t=T();if(t.length===0){e.append(l("p","empty","Nothing has changed yet."));return}let r=document.createElement("div");r.className="scroll",e.append(r);let n=[...new Set(t.map(a=>a.source))];if(n.length>1){let a=document.createElement("div");a.className="filters";for(let i of n){let s=x("span","chip",i);s.setAttribute("aria-pressed",String(w===i)),s.addEventListener("click",()=>{w=w===i?null:i,c=null,g()}),a.append(s)}r.append(a)}let o=w===null?t:t.filter(a=>a.source===w);r.append(l("p","hint",`${String(o.length)} of ${String(t.length)} updates`)),r.append(F([...o].reverse())),c!==null&&e.append(N(S(c)))}function te(e){let t=document.createElement("div");t.className="scroll",e.append(t);let r=C();if(r.length===0){t.append(l("p","empty","No resource has done anything yet."));return}for(let n of[...r].reverse()){let o=document.createElement("div");o.className="event",o.append(l("span",n.event,n.event)),o.append(l("span","tags",n.tags.join(", "))),t.append(o)}}function g(){if(E===null)return;let{body:e,pick:t,graphTab:r,queryTab:n,timelineTab:o}=E,a=e.querySelector(".scroll")?.scrollTop??0;r.setAttribute("aria-pressed",String(f==="graph")),n.setAttribute("aria-pressed",String(f==="queries")),o.setAttribute("aria-pressed",String(f==="timeline")),t.setAttribute("aria-pressed",String(v)),e.textContent="",f==="graph"?Z(e):f==="queries"?te(e):ee(e);let i=e.querySelector(".scroll");i!==null&&(i.scrollTop=a)}function G(e){!v||d===null||e.composedPath().includes(d)||(e.preventDefault(),e.stopPropagation(),h=e.target,v=!1,document.querySelector(`.${b}`)?.classList.remove(b),g())}function z(e){if(!v)return;document.querySelector(`.${b}`)?.classList.remove(b);let t=e.target;t!==null&&t!==d&&t.classList.add(b)}function j(){if(d!==null)return;d=document.createElement("div"),d.setAttribute("data-firsthand-devtools","");let e=d.attachShadow({mode:"open"}),t=document.createElement("style");t.textContent=K;let r=document.createElement("style");r.textContent=`.${b} { outline: 2px solid #3d5afe !important; outline-offset: 1px; }`,document.head.append(r);let n=document.createElement("div");n.className="panel";let o=document.createElement("header");o.append(l("strong","","Firsthand"));let a=y("Pick",()=>{v=!v,g()});a.dataset.pick="";let i=y("Graph",()=>{f="graph",g()});i.dataset.tab="graph";let s=y("Queries",()=>{f="queries",g()});s.dataset.tab="queries";let u=y("Timeline",()=>{f="timeline",g()});u.dataset.tab="timeline";let p=y("\xD7",R);p.setAttribute("aria-label","Close"),o.append(a,i,s,u,p);let m=document.createElement("div");m.className="body",n.append(o,m),e.append(t,n),document.body.append(d),E={body:m,pick:a,graphTab:i,queryTab:s,timelineTab:u},document.addEventListener("click",G,!0),document.addEventListener("mouseover",z,!0),L(()=>{c!==null||k!==null||(k=requestAnimationFrame(()=>{k=null,g()}))}),g()}function R(){L(null),k!==null&&(cancelAnimationFrame(k),k=null),document.removeEventListener("click",G,!0),document.removeEventListener("mouseover",z,!0),document.querySelector(`.${b}`)?.classList.remove(b),d?.remove(),d=null,E=null,c=null,w=null,v=!1,h=null,f="graph"}function ae(){d===null?j():R()}function ie(e){j(),h=e,f="graph",g()}function se(){g()}export{R as close,j as open,se as refresh,ie as show,ae as toggle};