@fluixi/devtools 0.2.0-alpha.5 → 0.2.0-alpha.7

package/dist/callsite.cjs

@@ -30,6 +30,15 @@ var INTERNAL = [
   "/packages/dom/",
   "/packages/core/",
   "/packages/devtools/",
+  "/packages/web-components/",
+  "/packages/auth/",
+  "/packages/oauth2/",
+  "/packages/session/",
+  "/packages/router/",
+  "/packages/head/",
+  "/packages/start/",
+  "/packages/server/",
+  "/packages/template-runtime/",
   "/@fluixi/",
   "node_modules",
   "fluixi-devtools",

package/dist/callsite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAqD1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAErE"}
+{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAErE"}

package/dist/callsite.js

@@ -12,6 +12,15 @@ const INTERNAL = [
     '/packages/dom/',
     '/packages/core/',
     '/packages/devtools/',
+    '/packages/web-components/',
+    '/packages/auth/',
+    '/packages/oauth2/',
+    '/packages/session/',
+    '/packages/router/',
+    '/packages/head/',
+    '/packages/start/',
+    '/packages/server/',
+    '/packages/template-runtime/',
     '/@fluixi/',
     'node_modules',
     'fluixi-devtools',

package/dist/callsite.mjs

@@ -5,6 +5,15 @@ var INTERNAL = [
   "/packages/dom/",
   "/packages/core/",
   "/packages/devtools/",
+  "/packages/web-components/",
+  "/packages/auth/",
+  "/packages/oauth2/",
+  "/packages/session/",
+  "/packages/router/",
+  "/packages/head/",
+  "/packages/start/",
+  "/packages/server/",
+  "/packages/template-runtime/",
   "/@fluixi/",
   "node_modules",
   "fluixi-devtools",

package/dist/export.cjs

@@ -38,6 +38,7 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
+shared.classes ??= /* @__PURE__ */ new WeakMap();
 
 // src/format.ts
 var MAX_DEPTH = 3;

package/dist/export.mjs

@@ -22,6 +22,7 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
+shared.classes ??= /* @__PURE__ */ new WeakMap();
 
 // src/format.ts
 var MAX_DEPTH = 3;

package/dist/graph-view.cjs

@@ -77,7 +77,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -197,8 +200,8 @@ var OVER_NATURAL = 12;
 var MIN_MAX_ZOOM = 8;
 var ABSOLUTE_MAX_ZOOM = 4e3;
 var DRAG_SLOP = 4;
-var KIND_CLASS = { state: "n-state", memo: "n-memo", effect: "n-effect", store: "n-store", resource: "n-resource", component: "n-component", control: "n-control", router: "n-router", handler: "n-handler", group: "n-group", binding: "n-binding", setter: "n-setter", directive: "n-directive", context: "n-context", provider: "n-provider" };
-var KIND_GLYPH = { state: "◆ state", memo: "ƒ memo", effect: "⚡ effect", store: "▤ store", resource: "⟳ resource", component: "◧ component", control: "⑂ control flow", router: "⤳ router", handler: "⇄ route", group: "▤ framework", binding: "⇥ dom", setter: "✎ sets", directive: "⌘ directive", context: "◈ context", provider: "◈ provider" };
+var KIND_CLASS = { state: "n-state", memo: "n-memo", effect: "n-effect", store: "n-store", resource: "n-resource", component: "n-component", control: "n-control", router: "n-router", handler: "n-handler", group: "n-group", binding: "n-binding", setter: "n-setter", directive: "n-directive", context: "n-context", provider: "n-provider", "custom-element": "n-custom-element", module: "n-module", service: "n-service" };
+var KIND_GLYPH = { state: "◆ state", memo: "ƒ memo", effect: "⚡ effect", store: "▤ store", resource: "⟳ resource", component: "◧ component", control: "⑂ control flow", router: "⤳ router", handler: "⇄ route", group: "▤ framework", binding: "⇥ dom", setter: "✎ sets", directive: "⌘ directive", context: "◈ context", provider: "◈ provider", "custom-element": "⬡ custom element", module: "▦ module", service: "⚙ service" };
 var GROUP_ID = -1;
 var bindingIds = /* @__PURE__ */ new Map();
 var bindingId = (place) => {
@@ -459,6 +462,7 @@ function createGraphView(svg, options = {}) {
   const inProject = (at) => !!at?.file && at.external !== true;
   const machinery = (n) => {
     if (n.authored !== false) return false;
+    if (n.scope !== void 0) return false;
     if (n.kind === "state" || n.kind === "memo" || n.kind === "effect" || n.kind === "context") {
       return true;
     }
@@ -868,6 +872,11 @@ ${kindRules((k) => `.fx-node.n-${k}`, "--glow")}
 .fx-node.n-binding { opacity: .72; }
 .fx-node.n-setter { opacity: .72; }
 .fx-node.n-binding .fx-box, .fx-node.n-setter .fx-box { stroke-dasharray: 3 3; }
+/* An element, module or service: a group its signals and memos belong to, so it reads as one. */
+.fx-node.n-custom-element .fx-box, .fx-node.n-module .fx-box, .fx-node.n-service .fx-box {
+  stroke-width: 2.2;
+  fill: color-mix(in oklab, var(--glow, #5eead4) 14%, var(--fx-node-bg, #131722));
+}
 .fx-node.n-external { opacity: .55; }
 .fx-node.n-external .fx-box { stroke-dasharray: 3 2; }
 .fx-box { fill: var(--fx-node-bg, #131722); stroke: var(--glow, #5eead4); stroke-width: 1.4; stroke-opacity: calc(.5 + var(--pulse,0) * .5); }

package/dist/graph-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-view.d.ts","sourceRoot":"","sources":["../src/graph-view.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAgHvD,8EAA8E;AAC9E,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAClC,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,uDAAuD;IACvD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,wCAAwC;IACxC,SAAS,IAAI,IAAI,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,iEAAiE;IACjE,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAC7C;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,kFAAkF;IAClF,KAAK,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAuzB7F;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,QAgDxB,CAAC"}
+{"version":3,"file":"graph-view.d.ts","sourceRoot":"","sources":["../src/graph-view.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAgHvD,8EAA8E;AAC9E,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAClC,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,uDAAuD;IACvD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,wCAAwC;IACxC,SAAS,IAAI,IAAI,CAAC;IAClB,sFAAsF;IACtF,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,iEAAiE;IACjE,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IAC7C;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,kFAAkF;IAClF,KAAK,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CA0zB7F;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,QAqDxB,CAAC"}

package/dist/graph-view.js

@@ -50,8 +50,8 @@ const MIN_MAX_ZOOM = 8;
 const ABSOLUTE_MAX_ZOOM = 4000;
 /** Past this the pointer was panning, not clicking. */
 const DRAG_SLOP = 4;
-const KIND_CLASS = { state: 'n-state', memo: 'n-memo', effect: 'n-effect', store: 'n-store', resource: 'n-resource', component: 'n-component', control: 'n-control', router: 'n-router', handler: 'n-handler', group: 'n-group', binding: 'n-binding', setter: 'n-setter', directive: 'n-directive', context: 'n-context', provider: 'n-provider' };
-const KIND_GLYPH = { state: '◆ state', memo: 'ƒ memo', effect: '⚡ effect', store: '▤ store', resource: '⟳ resource', component: '◧ component', control: '⑂ control flow', router: '⤳ router', handler: '⇄ route', group: '▤ framework', binding: '⇥ dom', setter: '✎ sets', directive: '⌘ directive', context: '◈ context', provider: '◈ provider' };
+const KIND_CLASS = { state: 'n-state', memo: 'n-memo', effect: 'n-effect', store: 'n-store', resource: 'n-resource', component: 'n-component', control: 'n-control', router: 'n-router', handler: 'n-handler', group: 'n-group', binding: 'n-binding', setter: 'n-setter', directive: 'n-directive', context: 'n-context', provider: 'n-provider', 'custom-element': 'n-custom-element', module: 'n-module', service: 'n-service' };
+const KIND_GLYPH = { state: '◆ state', memo: 'ƒ memo', effect: '⚡ effect', store: '▤ store', resource: '⟳ resource', component: '◧ component', control: '⑂ control flow', router: '⤳ router', handler: '⇄ route', group: '▤ framework', binding: '⇥ dom', setter: '✎ sets', directive: '⌘ directive', context: '◈ context', provider: '◈ provider', 'custom-element': '⬡ custom element', module: '▦ module', service: '⚙ service' };
 /** The card that stands for everything a dependency made and the application never touched. */
 const GROUP_ID = -1;
 /**
@@ -440,6 +440,10 @@ export function createGraphView(svg, options = {}) {
     const machinery = (n) => {
         if (n.authored !== false)
             return false;
+        // Inside an element, module or service the app declared: what it holds is the point of
+        // showing it, even when a package named the signal rather than the app.
+        if (n.scope !== undefined)
+            return false;
         if (n.kind === 'state' || n.kind === 'memo' || n.kind === 'effect' || n.kind === 'context') {
             return true;
         }
@@ -956,6 +960,11 @@ ${kindRules((k) => `.fx-node.n-${k}`, '--glow')}
 .fx-node.n-binding { opacity: .72; }
 .fx-node.n-setter { opacity: .72; }
 .fx-node.n-binding .fx-box, .fx-node.n-setter .fx-box { stroke-dasharray: 3 3; }
+/* An element, module or service: a group its signals and memos belong to, so it reads as one. */
+.fx-node.n-custom-element .fx-box, .fx-node.n-module .fx-box, .fx-node.n-service .fx-box {
+  stroke-width: 2.2;
+  fill: color-mix(in oklab, var(--glow, #5eead4) 14%, var(--fx-node-bg, #131722));
+}
 .fx-node.n-external { opacity: .55; }
 .fx-node.n-external .fx-box { stroke-dasharray: 3 2; }
 .fx-box { fill: var(--fx-node-bg, #131722); stroke: var(--glow, #5eead4); stroke-width: 1.4; stroke-opacity: calc(.5 + var(--pulse,0) * .5); }

package/dist/graph-view.mjs

@@ -50,7 +50,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -170,8 +173,8 @@ var OVER_NATURAL = 12;
 var MIN_MAX_ZOOM = 8;
 var ABSOLUTE_MAX_ZOOM = 4e3;
 var DRAG_SLOP = 4;
-var KIND_CLASS = { state: "n-state", memo: "n-memo", effect: "n-effect", store: "n-store", resource: "n-resource", component: "n-component", control: "n-control", router: "n-router", handler: "n-handler", group: "n-group", binding: "n-binding", setter: "n-setter", directive: "n-directive", context: "n-context", provider: "n-provider" };
-var KIND_GLYPH = { state: "◆ state", memo: "ƒ memo", effect: "⚡ effect", store: "▤ store", resource: "⟳ resource", component: "◧ component", control: "⑂ control flow", router: "⤳ router", handler: "⇄ route", group: "▤ framework", binding: "⇥ dom", setter: "✎ sets", directive: "⌘ directive", context: "◈ context", provider: "◈ provider" };
+var KIND_CLASS = { state: "n-state", memo: "n-memo", effect: "n-effect", store: "n-store", resource: "n-resource", component: "n-component", control: "n-control", router: "n-router", handler: "n-handler", group: "n-group", binding: "n-binding", setter: "n-setter", directive: "n-directive", context: "n-context", provider: "n-provider", "custom-element": "n-custom-element", module: "n-module", service: "n-service" };
+var KIND_GLYPH = { state: "◆ state", memo: "ƒ memo", effect: "⚡ effect", store: "▤ store", resource: "⟳ resource", component: "◧ component", control: "⑂ control flow", router: "⤳ router", handler: "⇄ route", group: "▤ framework", binding: "⇥ dom", setter: "✎ sets", directive: "⌘ directive", context: "◈ context", provider: "◈ provider", "custom-element": "⬡ custom element", module: "▦ module", service: "⚙ service" };
 var GROUP_ID = -1;
 var bindingIds = /* @__PURE__ */ new Map();
 var bindingId = (place) => {
@@ -432,6 +435,7 @@ function createGraphView(svg, options = {}) {
   const inProject = (at) => !!at?.file && at.external !== true;
   const machinery = (n) => {
     if (n.authored !== false) return false;
+    if (n.scope !== void 0) return false;
     if (n.kind === "state" || n.kind === "memo" || n.kind === "effect" || n.kind === "context") {
       return true;
     }
@@ -841,6 +845,11 @@ ${kindRules((k) => `.fx-node.n-${k}`, "--glow")}
 .fx-node.n-binding { opacity: .72; }
 .fx-node.n-setter { opacity: .72; }
 .fx-node.n-binding .fx-box, .fx-node.n-setter .fx-box { stroke-dasharray: 3 3; }
+/* An element, module or service: a group its signals and memos belong to, so it reads as one. */
+.fx-node.n-custom-element .fx-box, .fx-node.n-module .fx-box, .fx-node.n-service .fx-box {
+  stroke-width: 2.2;
+  fill: color-mix(in oklab, var(--glow, #5eead4) 14%, var(--fx-node-bg, #131722));
+}
 .fx-node.n-external { opacity: .55; }
 .fx-node.n-external .fx-box { stroke-dasharray: 3 2; }
 .fx-box { fill: var(--fx-node-bg, #131722); stroke: var(--glow, #5eead4); stroke-width: 1.4; stroke-opacity: calc(.5 + var(--pulse,0) * .5); }

package/dist/hook.cjs

@@ -207,6 +207,7 @@ var import_signal2 = require("@fluixi/reactive/signal");
 // src/source.ts
 var MARKER = "__fx_source";
 var COMPONENT_MARKER = "__fx_component";
+var CLASS_MARKER = "__fx_class";
 var HOLE_MARKER = "__fx_hole";
 var PROPS_MARKER = "__fx_props";
 var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
@@ -217,12 +218,16 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
-function markReactiveSource(file, line, column, name) {
+shared.classes ??= /* @__PURE__ */ new WeakMap();
+function markReactiveSource(file, line, column, name, self) {
   const location2 = locate(file, line, column);
   if (shared.pending && location2.external && !shared.pending.location?.external) return;
-  shared.pending = { name, location: location2 };
+  shared.pending = self && typeof self === "object" ? { name, location: location2, self } : { name, location: location2 };
   shared.expiring = false;
 }
+function dropReactiveSource() {
+  shared.pending = null;
+}
 function locate(file, line, column) {
   const external = !!file && (/^([a-zA-Z]:)?[\\/]/.test(file) || file.includes("node_modules/"));
   return external ? { file, line, column, external } : { file, line, column };
@@ -236,13 +241,19 @@ function markComponentSource(name, file, line, column) {
   }
   if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
 }
+function markClassSource(constructor, file, line, column) {
+  if (typeof constructor === "function") shared.classes.set(constructor, locate(file, line, column));
+}
+function classSource(constructor) {
+  return typeof constructor === "function" ? shared.classes.get(constructor) : void 0;
+}
 function componentSource(name) {
   return shared.components.get(name) ?? void 0;
 }
 function takeReactiveSource() {
   const mark = shared.pending;
   if (mark) {
-    if (mark.name !== void 0) shared.pending = { location: mark.location };
+    if (mark.name !== void 0 || mark.self) shared.pending = { location: mark.location };
     if (!shared.expiring) {
       shared.expiring = true;
       queueMicrotask(() => {
@@ -282,6 +293,7 @@ function holeLocation(accessor) {
 function installSourceMarker() {
   if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
   if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[CLASS_MARKER] !== "function") host[CLASS_MARKER] = markClassSource;
   if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
   if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
 }
@@ -293,6 +305,15 @@ var INTERNAL = [
   "/packages/dom/",
   "/packages/core/",
   "/packages/devtools/",
+  "/packages/web-components/",
+  "/packages/auth/",
+  "/packages/oauth2/",
+  "/packages/session/",
+  "/packages/router/",
+  "/packages/head/",
+  "/packages/start/",
+  "/packages/server/",
+  "/packages/template-runtime/",
   "/@fluixi/",
   "node_modules",
   "fluixi-devtools",
@@ -672,7 +693,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -689,7 +713,11 @@ var TREE_KINDS = /* @__PURE__ */ new Set([
   "handler",
   // A component a plugin recognised as providing a context. Still a tag the author wrote,
   // so leaving it out took it and everything it rendered out of the tree.
-  "provider"
+  "provider",
+  // Scopes the runtime reported: what their signals and memos belong to.
+  "custom-element",
+  "module",
+  "service"
 ]);
 var TREE_CSS = `
 .fx-tree-row {
@@ -805,9 +833,14 @@ var PREFIX = {
   // A plugin's, and it names them itself.
   directive: "d",
   context: "ctx",
-  provider: "p"
+  provider: "p",
+  // Scopes are always named by what opened them.
+  "custom-element": "el",
+  module: "mod",
+  service: "svc"
 };
 function readProps(props) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -818,13 +851,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue((0, import_signal2.untrack)(() => props[name]), 200);
+      report.value = formatValue(
+        (0, import_signal2.createRoot)((dispose) => {
+          try {
+            return (0, import_signal2.untrack)(() => props[name]);
+          } finally {
+            dispose();
+          }
+        }),
+        200
+      );
     } catch {
     }
     out.push(report);
   }
-  return out.length ? out : void 0;
+  const reports = out.length ? out : void 0;
+  readOnce.set(props, reports);
+  return reports;
 }
+var readOnce = /* @__PURE__ */ new WeakMap();
 function observeGraph(options = {}) {
   installSourceMarker();
   const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
@@ -845,6 +890,10 @@ function observeGraph(options = {}) {
   const boundTo = /* @__PURE__ */ new WeakMap();
   const drivenBy = /* @__PURE__ */ new WeakMap();
   let reaches = /* @__PURE__ */ new Map();
+  const SCOPE_KINDS = /* @__PURE__ */ new Set(["custom-element", "module", "service"]);
+  const scopeIds = /* @__PURE__ */ new WeakMap();
+  const scopeOfTarget = /* @__PURE__ */ new WeakMap();
+  const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
@@ -941,7 +990,9 @@ function observeGraph(options = {}) {
         // Mapped, unlike `mark`: these two came off a stack, so they are positions in the
         // compiled file until a host translates them.
         ...site && !site.external ? { usedAt: mapped(site.location) } : {},
-        ...site && site.external && !mark?.location ? { source: mapped(site.location) } : {}
+        // Not inside a scope: an element's prop is made by the package for the element, and
+        // the package's line says less than the scope it sits in already does.
+        ...site && site.external && !mark?.location && !report.scope ? { source: mapped(site.location) } : {}
       };
       const owner = ancestor(report.parents);
       if (owner !== void 0) node.createdIn = owner;
@@ -951,6 +1002,28 @@ function observeGraph(options = {}) {
         node.createdIn = originId;
         if (from.source) node.source = from.source;
       }
+      const scopeId = report.scope ? scopeIds.get(report.scope) : void 0;
+      if (scopeId !== void 0) {
+        node.scope = scopeId;
+        const creator = node.createdIn !== void 0 ? graph.get(node.createdIn) : void 0;
+        const insideAlready = node.createdIn === scopeId || creator?.scope === scopeId;
+        if (!insideAlready) node.createdIn = scopeId;
+      } else if (node.createdIn !== void 0) {
+        const creator = graph.get(node.createdIn);
+        const inherited = creator && SCOPE_KINDS.has(creator.kind) ? creator.id : creator?.scope;
+        if (inherited !== void 0) node.scope = inherited;
+      }
+      const self = mark?.self;
+      if (self) {
+        const list = fieldsOf.get(self);
+        if (list) list.push(id);
+        else fieldsOf.set(self, [id]);
+        const open = scopeOfTarget.get(self);
+        if (open !== void 0 && graph.has(open)) {
+          node.scope = open;
+          node.createdIn = open;
+        }
+      }
       if (kind !== "effect" && typeof handle === "function") {
         const read = handle;
         node.read = () => (0, import_signal2.untrack)(read);
@@ -1086,20 +1159,90 @@ function observeGraph(options = {}) {
       internals.delete(target);
       const id = ids.get(target);
       if (id === void 0) return;
-      removed.push({ id, rev: ++revision });
-      revs.delete(id);
-      if (removed.length > REMOVED_LOG) removed.splice(0, removed.length - REMOVED_LOG);
-      history.disposed(id, graph.get(id)?.label);
-      graph.delete(id);
-      handed.delete(id);
-      raws.delete(id);
-      cores.delete(id);
-      rendered.delete(id);
-      setters.delete(id);
-      runsAtLastSample.delete(id);
-      unnamed.delete(id);
+      forget(id);
+    },
+    scope(scope, info, parent) {
+      dropReactiveSource();
+      const id = seq++;
+      const kind = info.kind === "element" ? "custom-element" : info.kind;
+      const parentId = parent ? scopeIds.get(parent) : void 0;
+      const found = currentCallSite(origin);
+      const site = found && !/\0|__x00__|^virtual:/.test(found.location.file ?? "") ? found : void 0;
+      const node = {
+        id,
+        label: info.name,
+        kind,
+        // The author named the element, the module and the service; none of them is plumbing.
+        authored: true,
+        deps: /* @__PURE__ */ new Set(),
+        writes: /* @__PURE__ */ new Set(),
+        runs: 0,
+        lastPulse: 0,
+        ...info.detail ? { value: info.detail, detail: info.detail } : {},
+        ...parentId !== void 0 ? { scope: parentId, createdIn: parentId } : {}
+      };
+      const target = info.target;
+      if (kind === "custom-element") {
+        const defined = target ? classSource(target.constructor) : void 0;
+        if (defined) node.declaredAt = defined;
+      } else if (site && !site.external) {
+        node.usedAt = mapped(site.location);
+      }
+      scopeIds.set(scope, id);
+      if (target && typeof target === "object" && target.nodeType === 1) {
+        rendered.set(id, [new WeakRef(target)]);
+      }
+      graph.set(id, node);
+      history.created(id, node.createdIn, node.label);
+      if (target && typeof target === "object") {
+        scopeOfTarget.set(target, id);
+        for (const field of fieldsOf.get(target) ?? []) {
+          const made = graph.get(field);
+          if (!made) continue;
+          made.scope = id;
+          made.createdIn = id;
+          revs.set(field, ++revision);
+        }
+      }
+    },
+    scopeEnded(scope) {
+      const id = scopeIds.get(scope);
+      if (id === void 0) return;
+      const ended = /* @__PURE__ */ new Set([id]);
+      for (let grew = true; grew; ) {
+        grew = false;
+        for (const [other, node] of graph) {
+          if (!ended.has(other) && node.scope !== void 0 && ended.has(node.scope)) {
+            ended.add(other);
+            grew = true;
+          }
+        }
+      }
+      for (const gone of ended) forget(gone);
+    },
+    scopeAdopted(scope, parent) {
+      const node = graph.get(scopeIds.get(scope) ?? -1);
+      const parentId = scopeIds.get(parent);
+      if (!node || parentId === void 0 || parentId === node.id) return;
+      node.scope = parentId;
+      node.createdIn = parentId;
+      revs.set(node.id, ++revision);
     }
   });
+  function forget(id) {
+    removed.push({ id, rev: ++revision });
+    revs.delete(id);
+    if (removed.length > REMOVED_LOG) removed.splice(0, removed.length - REMOVED_LOG);
+    history.disposed(id, graph.get(id)?.label);
+    graph.delete(id);
+    handed.delete(id);
+    raws.delete(id);
+    cores.delete(id);
+    rendered.delete(id);
+    setters.delete(id);
+    runsAtLastSample.delete(id);
+    unnamed.delete(id);
+  }
   const edges = (id, node) => {
     const sources = cores.get(id)?.sources;
     node.deps.clear();
@@ -1119,6 +1262,14 @@ function observeGraph(options = {}) {
         revs.set(id, ++revision);
       };
       const now = Date.now();
+      for (const [id, node] of graph) {
+        if (node.kind !== "custom-element" || node.usedAt) continue;
+        const element = rendered.get(id)?.[0]?.deref();
+        const written = element ? element.__fx_loc : void 0;
+        if (!written?.file) continue;
+        node.usedAt = { file: written.file, line: written.line, column: written.column };
+        revs.set(id, ++revision);
+      }
       const bindings = /* @__PURE__ */ new Map();
       const drives = /* @__PURE__ */ new Map();
       const seen = /* @__PURE__ */ new Map();
@@ -1457,6 +1608,7 @@ function serializeGraph(graph, now = Date.now(), options = {}) {
       declaredAt: node.declaredAt,
       usedAt: node.usedAt,
       createdIn: node.createdIn,
+      scope: node.scope,
       bindings: node.bindings,
       targets: node.targets,
       setAt: node.setAt,