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

package/dist/palette.cjs

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/palette.ts
+var palette_exports = {};
+__export(palette_exports, {
+  KIND_COLOR: () => KIND_COLOR,
+  kindColor: () => kindColor,
+  kindRules: () => kindRules,
+  kindVar: () => kindVar
+});
+module.exports = __toCommonJS(palette_exports);
+var KIND_COLOR = {
+  state: "#34d399",
+  memo: "#a78bfa",
+  effect: "#fbbf24",
+  store: "#38bdf8",
+  resource: "#fb7185",
+  component: "#f0abfc",
+  provider: "#fb923c",
+  control: "#22d3ee",
+  router: "#818cf8",
+  handler: "#f472b6",
+  context: "#a3e635",
+  directive: "#5eead4",
+  binding: "#5eead4",
+  setter: "#fb7185",
+  group: "#8a90a2",
+  element: "#8a90a2"
+};
+var kindVar = (kind) => `--fx-kind-${kind}`;
+var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
+var KINDS = Object.keys(KIND_COLOR);
+function kindRules(selector, property) {
+  return KINDS.map((kind) => `${selector(kind)} { ${property}: ${kindColor(kind)}; }`).join("\n");
+}

package/dist/palette.mjs

@@ -0,0 +1,31 @@
+// src/palette.ts
+var KIND_COLOR = {
+  state: "#34d399",
+  memo: "#a78bfa",
+  effect: "#fbbf24",
+  store: "#38bdf8",
+  resource: "#fb7185",
+  component: "#f0abfc",
+  provider: "#fb923c",
+  control: "#22d3ee",
+  router: "#818cf8",
+  handler: "#f472b6",
+  context: "#a3e635",
+  directive: "#5eead4",
+  binding: "#5eead4",
+  setter: "#fb7185",
+  group: "#8a90a2",
+  element: "#8a90a2"
+};
+var kindVar = (kind) => `--fx-kind-${kind}`;
+var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
+var KINDS = Object.keys(KIND_COLOR);
+function kindRules(selector, property) {
+  return KINDS.map((kind) => `${selector(kind)} { ${property}: ${kindColor(kind)}; }`).join("\n");
+}
+export {
+  KIND_COLOR,
+  kindColor,
+  kindRules,
+  kindVar
+};

package/dist/path.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/path.ts
+var path_exports = {};
+__export(path_exports, {
+  shortenPath: () => shortenPath
+});
+module.exports = __toCommonJS(path_exports);
+var normalize = (file) => file.replace(/\\/g, "/");
+var ROOTED = /^\/|^(Users|home|var|opt|private|tmp|mnt|srv)\//;
+var WORKSPACE_DIRS = /* @__PURE__ */ new Set(["packages", "apps", "libs", "examples"]);
+function shortenPath(file, root) {
+  const path = normalize(file);
+  if (root) {
+    const base = normalize(root).replace(/\/+$/, "");
+    if (base && path.startsWith(`${base}/`)) return path.slice(base.length + 1);
+    if (base.startsWith("/") && path.startsWith(`${base.slice(1)}/`)) return path.slice(base.length);
+  }
+  const installed = path.lastIndexOf("node_modules/");
+  if (installed >= 0) return path.slice(installed + "node_modules/".length);
+  if (ROOTED.test(path)) {
+    const segments = path.split("/");
+    for (let i = segments.length - 2; i > 0; i--) {
+      if (WORKSPACE_DIRS.has(segments[i])) return segments.slice(i).join("/");
+    }
+  }
+  return path;
+}

package/dist/path.d.ts

@@ -5,14 +5,14 @@
  * ran it: `/Users/someone/work/app/packages/dom/src/lib/dom/runtime.ts`. All of it before
  * the package name says nothing about the project, and it is most of the line.
  *
- * The full path is kept for opening the file — only what is displayed is shortened.
+ * The full path is kept for opening the file: only what is displayed is shortened.
  */
 /**
  * The part of `file` worth showing.
  *
  * Tried in order: below the project root when the host knows it, then the package a
  * node_modules path names, then the workspace package a monorepo path names. A path that
- * matches none of those is left as it is — guessing at a shorter form would hide which file
+ * matches none of those is left as it is: guessing at a shorter form would hide which file
  * it is, and the point of the line is to say that.
  */
 export declare function shortenPath(file: string, root?: string): string;

package/dist/path.js

@@ -5,7 +5,7 @@
  * ran it: `/Users/someone/work/app/packages/dom/src/lib/dom/runtime.ts`. All of it before
  * the package name says nothing about the project, and it is most of the line.
  *
- * The full path is kept for opening the file — only what is displayed is shortened.
+ * The full path is kept for opening the file: only what is displayed is shortened.
  */
 /** Windows separators, and the leading slash an origin-stripped path can lose. */
 const normalize = (file) => file.replace(/\\/g, '/');
@@ -18,7 +18,7 @@ const WORKSPACE_DIRS = new Set(['packages', 'apps', 'libs', 'examples']);
  *
  * Tried in order: below the project root when the host knows it, then the package a
  * node_modules path names, then the workspace package a monorepo path names. A path that
- * matches none of those is left as it is — guessing at a shorter form would hide which file
+ * matches none of those is left as it is: guessing at a shorter form would hide which file
  * it is, and the point of the line is to say that.
  */
 export function shortenPath(file, root) {

package/dist/path.mjs

@@ -0,0 +1,24 @@
+// src/path.ts
+var normalize = (file) => file.replace(/\\/g, "/");
+var ROOTED = /^\/|^(Users|home|var|opt|private|tmp|mnt|srv)\//;
+var WORKSPACE_DIRS = /* @__PURE__ */ new Set(["packages", "apps", "libs", "examples"]);
+function shortenPath(file, root) {
+  const path = normalize(file);
+  if (root) {
+    const base = normalize(root).replace(/\/+$/, "");
+    if (base && path.startsWith(`${base}/`)) return path.slice(base.length + 1);
+    if (base.startsWith("/") && path.startsWith(`${base.slice(1)}/`)) return path.slice(base.length);
+  }
+  const installed = path.lastIndexOf("node_modules/");
+  if (installed >= 0) return path.slice(installed + "node_modules/".length);
+  if (ROOTED.test(path)) {
+    const segments = path.split("/");
+    for (let i = segments.length - 2; i > 0; i--) {
+      if (WORKSPACE_DIRS.has(segments[i])) return segments.slice(i).join("/");
+    }
+  }
+  return path;
+}
+export {
+  shortenPath
+};

package/dist/plugin.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  annotationOf: () => annotationOf,
+  devtoolsPlugins: () => devtoolsPlugins,
+  pluginBadge: () => pluginBadge,
+  pluginElementBadge: () => pluginElementBadge,
+  pluginElementRows: () => pluginElementRows,
+  pluginRows: () => pluginRows,
+  registerDevtoolsPlugin: () => registerDevtoolsPlugin
+});
+module.exports = __toCommonJS(plugin_exports);
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+function devtoolsPlugins() {
+  return plugins;
+}
+function annotationOf(node, name) {
+  return node.extra?.[name];
+}
+function pluginRows(node, graph) {
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.rows) continue;
+    try {
+      out.push(...plugin.rows(node, graph));
+    } catch {
+    }
+  }
+  return out;
+}
+function pluginElementRows(extra) {
+  if (!extra) return [];
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.elementRows) continue;
+    try {
+      out.push(...plugin.elementRows(extra));
+    } catch {
+    }
+  }
+  return out;
+}
+function pluginElementBadge(extra) {
+  if (!extra) return void 0;
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.elementBadge?.(extra);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+function pluginBadge(node) {
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.badge?.(node);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}

package/dist/plugin.mjs

@@ -0,0 +1,66 @@
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+function devtoolsPlugins() {
+  return plugins;
+}
+function annotationOf(node, name) {
+  return node.extra?.[name];
+}
+function pluginRows(node, graph) {
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.rows) continue;
+    try {
+      out.push(...plugin.rows(node, graph));
+    } catch {
+    }
+  }
+  return out;
+}
+function pluginElementRows(extra) {
+  if (!extra) return [];
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.elementRows) continue;
+    try {
+      out.push(...plugin.elementRows(extra));
+    } catch {
+    }
+  }
+  return out;
+}
+function pluginElementBadge(extra) {
+  if (!extra) return void 0;
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.elementBadge?.(extra);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+function pluginBadge(node) {
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.badge?.(node);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+export {
+  annotationOf,
+  devtoolsPlugins,
+  pluginBadge,
+  pluginElementBadge,
+  pluginElementRows,
+  pluginRows,
+  registerDevtoolsPlugin
+};

package/dist/plugins/context.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/context.ts
+var context_exports = {};
+__export(context_exports, {
+  NAME: () => NAME,
+  contextPlugin: () => contextPlugin
+});
+module.exports = __toCommonJS(context_exports);
+
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME = "context";
+var contextPlugin = {
+  name: NAME,
+  collect(ctx) {
+    const nodes = /* @__PURE__ */ new Map();
+    ctx.onContext((report) => {
+      if (report.owner === void 0) return;
+      let node = nodes.get(report.id);
+      if (node === void 0) {
+        const label = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label,
+          kind: "context",
+          // A context is created at module scope with nothing running, so the only line it
+          // can carry is the one that provided or read it.
+          ...report.at ? { source: report.at } : {},
+          // The router's own contexts are the framework's, and belong in its card rather
+          // than beside the ones the application wrote.
+          authored: report.at?.external !== true,
+          // Under whoever provided it. A context read with no provider above it belongs to
+          // the reader, which is the honest place for a default value.
+          createdIn: report.owner,
+          // Short on the card, whole in the inspector, the way every other node works.
+          ...report.value !== void 0 ? { value: shorten(report.value), detail: report.value } : {}
+        });
+        nodes.set(report.id, node);
+      }
+      if (report.kind === "provide") ctx.retype(report.owner, "provider");
+      const held = ctx.annotation(report.owner) ?? [];
+      const already = held.some((n) => n.name === report.name && n.kind === report.kind);
+      if (already) return;
+      held.push({
+        name: report.name,
+        kind: report.kind,
+        ...report.value !== void 0 ? { value: report.value } : {}
+      });
+      ctx.annotate(report.owner, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: note.kind === "provide" ? `provides ${note.name}` : `reads ${note.name}`,
+      ...note.value !== void 0 ? { value: note.value } : {}
+    }));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const given = notes.filter((n) => n.kind === "provide");
+    if (given.length === 1) return `provides ${given[0].name}`;
+    if (given.length > 1) return `provides ${given.length}`;
+    return notes.length === 1 ? `reads ${notes[0].name}` : `reads ${notes.length}`;
+  }
+};
+registerDevtoolsPlugin(contextPlugin);

package/dist/plugins/context.mjs

@@ -0,0 +1,75 @@
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/format.ts
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+// src/plugins/context.ts
+var NAME = "context";
+var contextPlugin = {
+  name: NAME,
+  collect(ctx) {
+    const nodes = /* @__PURE__ */ new Map();
+    ctx.onContext((report) => {
+      if (report.owner === void 0) return;
+      let node = nodes.get(report.id);
+      if (node === void 0) {
+        const label = report.name === "context" && report.ownerLabel ? `${report.ownerLabel} context` : report.name;
+        node = ctx.add({
+          label,
+          kind: "context",
+          // A context is created at module scope with nothing running, so the only line it
+          // can carry is the one that provided or read it.
+          ...report.at ? { source: report.at } : {},
+          // The router's own contexts are the framework's, and belong in its card rather
+          // than beside the ones the application wrote.
+          authored: report.at?.external !== true,
+          // Under whoever provided it. A context read with no provider above it belongs to
+          // the reader, which is the honest place for a default value.
+          createdIn: report.owner,
+          // Short on the card, whole in the inspector, the way every other node works.
+          ...report.value !== void 0 ? { value: shorten(report.value), detail: report.value } : {}
+        });
+        nodes.set(report.id, node);
+      }
+      if (report.kind === "provide") ctx.retype(report.owner, "provider");
+      const held = ctx.annotation(report.owner) ?? [];
+      const already = held.some((n) => n.name === report.name && n.kind === report.kind);
+      if (already) return;
+      held.push({
+        name: report.name,
+        kind: report.kind,
+        ...report.value !== void 0 ? { value: report.value } : {}
+      });
+      ctx.annotate(report.owner, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: note.kind === "provide" ? `provides ${note.name}` : `reads ${note.name}`,
+      ...note.value !== void 0 ? { value: note.value } : {}
+    }));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const given = notes.filter((n) => n.kind === "provide");
+    if (given.length === 1) return `provides ${given[0].name}`;
+    if (given.length > 1) return `provides ${given.length}`;
+    return notes.length === 1 ? `reads ${notes[0].name}` : `reads ${notes.length}`;
+  }
+};
+registerDevtoolsPlugin(contextPlugin);
+export {
+  NAME,
+  contextPlugin
+};

package/dist/plugins/directives.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugins/directives.ts
+var directives_exports = {};
+__export(directives_exports, {
+  NAME: () => NAME,
+  directiveBadge: () => directiveBadge,
+  directiveRows: () => directiveRows,
+  directivesOn: () => directivesOn,
+  directivesPlugin: () => directivesPlugin
+});
+module.exports = __toCommonJS(directives_exports);
+
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/plugins/directives.ts
+var NAME = "directives";
+function directivesOn(extra) {
+  return extra?.[NAME] ?? [];
+}
+function directiveBadge(notes) {
+  if (!notes.length) return void 0;
+  const first = notes[0];
+  const short = first.kind === "ref" ? "ref" : label(first);
+  return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+}
+function directiveRows(notes) {
+  return notes.map((note) => ({
+    label: label(note),
+    value: note.element,
+    ...note.at ? { at: note.at } : {}
+  }));
+}
+var label = (note) => note.kind === "ref" ? `ref ${note.name}` : `${note.kind}:${note.name}`;
+var directivesPlugin = {
+  name: NAME,
+  collect(ctx) {
+    ctx.onDirective((report) => {
+      if (!report.target) return;
+      const held = ctx.elementAnnotation(report.target) ?? [];
+      const already = held.some((n) => n.kind === report.kind && n.name === report.name);
+      if (already) return;
+      held.push({
+        kind: report.kind,
+        name: report.name,
+        element: report.element,
+        ...report.at ? { at: report.at } : {}
+      });
+      ctx.annotateElement(report.target, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: label(note),
+      value: note.element,
+      ...note.at ? { at: note.at } : {}
+    }));
+  },
+  elementRows(extra) {
+    return directiveRows(directivesOn(extra));
+  },
+  elementBadge(extra) {
+    return directiveBadge(directivesOn(extra));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const first = notes[0];
+    const short = first.kind === "ref" ? "ref" : label(first);
+    return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+  }
+};
+registerDevtoolsPlugin(directivesPlugin);

package/dist/plugins/directives.mjs

@@ -0,0 +1,75 @@
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at = plugins.findIndex((p) => p.name === plugin.name);
+  if (at === -1) plugins.push(plugin);
+  else plugins[at] = plugin;
+}
+
+// src/plugins/directives.ts
+var NAME = "directives";
+function directivesOn(extra) {
+  return extra?.[NAME] ?? [];
+}
+function directiveBadge(notes) {
+  if (!notes.length) return void 0;
+  const first = notes[0];
+  const short = first.kind === "ref" ? "ref" : label(first);
+  return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+}
+function directiveRows(notes) {
+  return notes.map((note) => ({
+    label: label(note),
+    value: note.element,
+    ...note.at ? { at: note.at } : {}
+  }));
+}
+var label = (note) => note.kind === "ref" ? `ref ${note.name}` : `${note.kind}:${note.name}`;
+var directivesPlugin = {
+  name: NAME,
+  collect(ctx) {
+    ctx.onDirective((report) => {
+      if (!report.target) return;
+      const held = ctx.elementAnnotation(report.target) ?? [];
+      const already = held.some((n) => n.kind === report.kind && n.name === report.name);
+      if (already) return;
+      held.push({
+        kind: report.kind,
+        name: report.name,
+        element: report.element,
+        ...report.at ? { at: report.at } : {}
+      });
+      ctx.annotateElement(report.target, held);
+    });
+  },
+  rows(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return [];
+    return notes.map((note) => ({
+      label: label(note),
+      value: note.element,
+      ...note.at ? { at: note.at } : {}
+    }));
+  },
+  elementRows(extra) {
+    return directiveRows(directivesOn(extra));
+  },
+  elementBadge(extra) {
+    return directiveBadge(directivesOn(extra));
+  },
+  badge(node) {
+    const notes = node.extra?.[NAME];
+    if (!notes?.length) return void 0;
+    const first = notes[0];
+    const short = first.kind === "ref" ? "ref" : label(first);
+    return notes.length > 1 ? `${short} +${notes.length - 1}` : short;
+  }
+};
+registerDevtoolsPlugin(directivesPlugin);
+export {
+  NAME,
+  directiveBadge,
+  directiveRows,
+  directivesOn,
+  directivesPlugin
+};