@fluixi/devtools 0.2.0-alpha.4 → 0.2.0-alpha.6

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

@@ -3,7 +3,7 @@ import type { ReactiveSourceLocation } from './source.js';
  * Where a node came from, and whether that is the application or something it depends on.
  *
  * The application's own frame is the useful one, but a node made while a package was loading
- * has no application frame above it at all — a router's revalidation counter, made when its
+ * has no application frame above it at all: a router's revalidation counter, made when its
  * module is evaluated. Falling back to the package's own frame is what stops that node being
  * a card with no name, no origin and no explanation.
  */

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',
@@ -49,7 +58,7 @@ function locate(frame, origin) {
  * Where a node came from, and whether that is the application or something it depends on.
  *
  * The application's own frame is the useful one, but a node made while a package was loading
- * has no application frame above it at all — a router's revalidation counter, made when its
+ * has no application frame above it at all: a router's revalidation counter, made when its
  * module is evaluated. Falling back to the package's own frame is what stops that node being
  * a card with no name, no origin and no explanation.
  */

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/change-view.js

@@ -1,4 +1,4 @@
-// A diff, drawn. Shared between the timeline's open row and the panel that opens from it —
+// A diff, drawn. Shared between the timeline's open row and the panel that opens from it , 
 // same rows, cut to a handful in the sidebar and shown in full when there is room.
 //
 // An object is drawn as an object: `{id: 1, text: "go"}` on one line is what the cards
@@ -14,7 +14,7 @@ function pretty(json) {
         return JSON.stringify(JSON.parse(json), null, 2);
     }
     catch {
-        // It came from JSON.stringify, so this should not happen — but a malformed payload is
+        // It came from JSON.stringify, so this should not happen, but a malformed payload is
         // not worth losing the row over.
         return undefined;
     }

package/dist/describe.js

@@ -3,10 +3,10 @@
 // The element is described at the moment it is reported and the reference dropped: holding
 // one would keep a removed subtree alive for as long as the panel is open.
 //
-// Enough to find it on the page — tag, id, a class or two — without being a selector.
+// Enough to find it on the page: tag, id, a class or two, without being a selector.
 /** More than this is a selector, not a label. */
 const MAX_CLASSES = 2;
-/** `text in li` — the element it sits in is what locates it. */
+/** `text in li`: the element it sits in is what locates it. */
 function textOwner(node) {
     const parent = node.parentElement;
     return parent ? `text in ${describeElement(parent)}` : 'text';

package/dist/detail-panel.d.ts

@@ -9,7 +9,7 @@ export interface DetailPanel {
     destroy(): void;
 }
 export interface DetailPanelOptions {
-    /** A node in the panel was clicked — the host can select it on the graph. */
+    /** A node in the panel was clicked: the host can select it on the graph. */
     onPick?(id: number): void;
 }
 export declare function createDetailPanel(host: HTMLElement, options?: DetailPanelOptions): DetailPanel;

package/dist/detail-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../src/detail-panel.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,WAAW;IAC1B,mFAAmF;IACnF,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AA2DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAwIlG;AAED,eAAO,MAAM,gBAAgB,0vHAsCf,CAAC"}
+{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../src/detail-panel.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,WAAW;IAC1B,mFAAmF;IACnF,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AA2DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAwIlG;AAED,eAAO,MAAM,gBAAgB,0vHAsCf,CAAC"}

package/dist/detail-panel.js

@@ -138,7 +138,7 @@ export function createDetailPanel(host, options = {}) {
                 return `<div class="dp-group"><div class="dp-verb">${VERBS[kind]}</div><div class="dp-nodes">${items}</div></div>`;
             })
                 .join('');
-            // Where the value reaches the page — the last step of the chain.
+            // Where the value reaches the page: the last step of the chain.
             const node = cause ? graph.get(cause.id) : undefined;
             // Both: a template's holes can share one original position, and then only the compiled
             // line tells them apart.

package/dist/diff.js

@@ -1,7 +1,7 @@
 // What changed, rather than what the value is now.
 //
 // `todos [{…}] → [{…}, {…}]` says nothing the graph did not. "One row added at index 2, here
-// it is" does. Computed at the write, while both sides are still in hand — afterwards only
+// it is" does. Computed at the write, while both sides are still in hand, afterwards only
 // the new value exists.
 import { formatValue } from './format.js';
 /** Enough to see what happened, few enough that a write stays cheap. */

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.d.ts

@@ -2,7 +2,7 @@
  * The graph as something to paste somewhere else.
  *
  * A panel shows one node at a time; a bug report needs all of them at once. This is the whole
- * graph as plain json — values, kinds, ownership, sources, what each node reaches in the
+ * graph as plain json: values, kinds, ownership, sources, what each node reaches in the
  * document and where it is written from.
  *
  * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be
@@ -23,7 +23,7 @@ interface ExportedNode {
     id: number;
     label: string;
     kind: string;
-    /** Absent when the framework named it — see RNode.authored. */
+    /** Absent when the framework named it: see RNode.authored. */
     authored?: boolean;
     value?: string;
     runs?: number;

package/dist/export.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../src/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAA0B,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAsBD,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,IAAI,EAAE,QAAQ,GAAG,qBAAqB,CAAC;CACxC;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,aAAa,CAoDjG;AAED,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE1F"}
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../src/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAA0B,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAsBD,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,IAAI,EAAE,QAAQ,GAAG,qBAAqB,CAAC;CACxC;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,aAAa,CAoDjG;AAED,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE1F"}

package/dist/export.js

@@ -2,7 +2,7 @@
  * The graph as something to paste somewhere else.
  *
  * A panel shows one node at a time; a bug report needs all of them at once. This is the whole
- * graph as plain json — values, kinds, ownership, sources, what each node reaches in the
+ * graph as plain json: values, kinds, ownership, sources, what each node reaches in the
  * document and where it is written from.
  *
  * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be

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/float.d.ts

@@ -7,7 +7,7 @@
  * it back exactly where it was.
  *
  * The pane element itself is moved rather than re-rendered. Whatever drew into it keeps its
- * handle on it, its listeners, and its scroll position — a floated timeline is the same
+ * handle on it, its listeners, and its scroll position, a floated timeline is the same
  * timeline, not a copy of one.
  */
 export interface FloatOptions {

package/dist/float.js

@@ -7,7 +7,7 @@
  * it back exactly where it was.
  *
  * The pane element itself is moved rather than re-rendered. Whatever drew into it keeps its
- * handle on it, its listeners, and its scroll position — a floated timeline is the same
+ * handle on it, its listeners, and its scroll position, a floated timeline is the same
  * timeline, not a copy of one.
  */
 /** So a card cannot be dragged or resized into something unreadable. */
@@ -146,8 +146,8 @@ export function makeFloatable(pane, options) {
     pane.classList.add('fx-floatable');
     pane.append(button);
     /**
-     * The panes rewrite their own contents — the inspector replaces its markup whenever the
-     * selection changes — which takes the button with it. Rather than asking each of them to
+     * The panes rewrite their own contents: the inspector replaces its markup whenever the
+     * selection changes: which takes the button with it. Rather than asking each of them to
      * leave it alone, it is put back when it goes.
      */
     const keep = new MutationObserver(() => {

package/dist/format.js

@@ -1,14 +1,14 @@
 // Turning a live value into something a graph can print.
 //
-// Not JSON.stringify: a signal holds whatever the author put in it — a Map, a Date, a class
-// instance, a dom node, something that refers to itself, a getter that throws — and
+// Not JSON.stringify: a signal holds whatever the author put in it, a Map, a Date, a class
+// instance, a dom node, something that refers to itself, a getter that throws, and
 // stringify answers `{}`, `[object Object]` or an exception for most of that. This walks the
 // value instead, so every case has an answer and none of them is a crash.
 //
 // It is a label, not a serializer. Depth and length are capped, and what is cut says so.
 const MAX_DEPTH = 3;
 const MAX_ENTRIES = 8;
-/** A dom node, without assuming this realm's Node — an iframe's is a different class. */
+/** A dom node, without assuming this realm's Node, an iframe's is a different class. */
 function domName(v) {
     if (typeof v?.nodeType !== 'number' || typeof v.nodeName !== 'string')
         return null;

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/history.d.ts

@@ -19,7 +19,7 @@ export interface GraphEvent {
     readonly change?: ValueChange;
     /**
      * The name at the time. A consumer normally reads it off the graph, but a disposed node is
-     * no longer there — and a list re-render is mostly disposals — so it travels with the event.
+     * no longer there: and a list re-render is mostly disposals, so it travels with the event.
      */
     readonly label?: string;
 }
@@ -52,7 +52,7 @@ export interface Commit {
     readonly cause?: GraphEvent;
 }
 /**
- * Oldest first. A commit whose opening write has aged out still groups — its events carry the
+ * Oldest first. A commit whose opening write has aged out still groups, its events carry the
  * number, and a partial commit beats dropping the runs after it.
  */
 export declare function toCommits(events: readonly GraphEvent[]): Commit[];

package/dist/history.js

@@ -1,7 +1,7 @@
 // What happened, in order.
 //
 // A snapshot says what the graph is; by the time a panel polls, the propagation is over and
-// everything reads as settled. So the observer's callbacks are recorded as they arrive — the
+// everything reads as settled. So the observer's callbacks are recorded as they arrive, the
 // runtime calls them from inside the write, so the order is real rather than reconstructed.
 //
 // Events group into commits: a write with nothing running came from a handler and opens one.
@@ -62,7 +62,7 @@ export function createHistory(limit) {
     };
 }
 /**
- * Oldest first. A commit whose opening write has aged out still groups — its events carry the
+ * Oldest first. A commit whose opening write has aged out still groups, its events carry the
  * number, and a partial commit beats dropping the runs after it.
  */
 export function toCommits(events) {