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

package/dist/value-pane.mjs

@@ -0,0 +1,200 @@
+// src/format.ts
+function indentValue(text, pad = "  ") {
+  const out = [];
+  let depth = 0;
+  let quote = null;
+  let line = "";
+  const flush = () => {
+    if (line.trim()) out.push(pad.repeat(depth) + line.trim());
+    line = "";
+  };
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quote) {
+      line += c;
+      if (c === quote && text[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      quote = c;
+      line += c;
+      continue;
+    }
+    if (c === "{" || c === "[") {
+      line += c;
+      flush();
+      depth++;
+      continue;
+    }
+    if (c === "}" || c === "]") {
+      flush();
+      depth = Math.max(0, depth - 1);
+      line = c;
+      continue;
+    }
+    if (c === ",") {
+      line += c;
+      flush();
+      continue;
+    }
+    line += c;
+  }
+  flush();
+  return out.join("\n");
+}
+
+// src/float.ts
+var MIN_W = 240;
+var MIN_H = 160;
+function draggable(handle, onMove, onStart) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button")) return;
+    event.preventDefault();
+    handle.setPointerCapture(event.pointerId);
+    const fromX = event.clientX;
+    const fromY = event.clientY;
+    onStart?.();
+    const move = (e) => onMove(e.clientX - fromX, e.clientY - fromY);
+    const stop = () => {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", stop);
+      handle.removeEventListener("pointercancel", stop);
+      handle.removeEventListener("lostpointercapture", stop);
+      if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", stop);
+    handle.addEventListener("pointercancel", stop);
+    handle.addEventListener("lostpointercapture", stop);
+  });
+}
+var opened = 0;
+function floatCard(doc, title, at) {
+  const card = doc.createElement("div");
+  card.className = "fx-float";
+  const spot = at ?? {
+    x: 60 + opened % 4 * 28,
+    y: 60 + opened % 4 * 28,
+    width: 360,
+    height: 280
+  };
+  opened += 1;
+  const bar = doc.createElement("div");
+  bar.className = "fx-float-bar";
+  const name = doc.createElement("span");
+  name.textContent = title;
+  bar.append(name);
+  card.append(bar);
+  let x = spot.x;
+  let y = spot.y;
+  let w = spot.width;
+  let h = spot.height;
+  const apply = () => {
+    const view = doc.defaultView;
+    const vw = view?.innerWidth ?? w;
+    const vh = view?.innerHeight ?? h;
+    w = Math.min(Math.max(MIN_W, w), vw);
+    h = Math.min(Math.max(MIN_H, h), vh);
+    x = Math.min(Math.max(0, x), Math.max(0, vw - w));
+    y = Math.min(Math.max(0, y), Math.max(0, vh - h));
+    card.style.left = `${x}px`;
+    card.style.top = `${y}px`;
+    card.style.width = `${w}px`;
+    card.style.height = `${h}px`;
+  };
+  let from = { x, y, w, h };
+  const remember = () => {
+    from = { x, y, w, h };
+  };
+  for (const edge of ["n", "s", "e", "w", "ne", "nw", "se", "sw"]) {
+    const handle = doc.createElement("div");
+    handle.className = `fx-float-h fx-float-${edge}`;
+    card.append(handle);
+    draggable(
+      handle,
+      (dx, dy) => {
+        if (edge.includes("e")) w = from.w + dx;
+        if (edge.includes("s")) h = from.h + dy;
+        if (edge.includes("w")) {
+          w = Math.max(MIN_W, from.w - dx);
+          x = from.x + from.w - w;
+        }
+        if (edge.includes("n")) {
+          h = Math.max(MIN_H, from.h - dy);
+          y = from.y + from.h - h;
+        }
+        apply();
+      },
+      remember
+    );
+  }
+  draggable(
+    bar,
+    (dx, dy) => {
+      x = from.x + dx;
+      y = from.y + dy;
+      apply();
+    },
+    remember
+  );
+  apply();
+  return { card, bar, remove: () => card.remove() };
+}
+
+// src/value-pane.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function createValuePane(host) {
+  const doc = host.ownerDocument;
+  let built = null;
+  const close = () => {
+    built?.remove();
+    built = null;
+  };
+  const onKey = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("keydown", onKey);
+  return {
+    open(title, text) {
+      close();
+      built = floatCard(doc, title, { x: 80, y: 80, width: 420, height: 320 });
+      const shut = doc.createElement("button");
+      shut.type = "button";
+      shut.className = "vp-close";
+      shut.textContent = "✕";
+      shut.title = "Close";
+      shut.addEventListener("click", close);
+      built.bar.append(shut);
+      const body = doc.createElement("pre");
+      body.className = "vp-body";
+      body.innerHTML = escape(indentValue(text));
+      built.card.append(body);
+      doc.body.appendChild(built.card);
+    },
+    close,
+    get isOpen() {
+      return built !== null;
+    },
+    destroy() {
+      doc.removeEventListener("keydown", onKey);
+      close();
+    }
+  };
+}
+var VALUE_PANE_CSS = `
+.vp-close {
+  margin-left: auto; background: none; border: 0; cursor: pointer;
+  color: var(--fx-muted, #8a90a2); font-size: 12px; line-height: 1; padding: 2px 4px;
+}
+.vp-close:hover { color: var(--fx-label, #e7e9ee); }
+.vp-body {
+  flex: 1; margin: 0; padding: 8px; overflow: auto; white-space: pre;
+  font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5;
+  color: var(--fx-label, #e7e9ee);
+}
+`;
+export {
+  VALUE_PANE_CSS,
+  createValuePane
+};

package/dist/wire.cjs

@@ -0,0 +1,109 @@
+/*! @fluixi/devtools v0.2.0-alpha.4 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+"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/wire.ts
+var wire_exports = {};
+__export(wire_exports, {
+  applySnapshot: () => applySnapshot,
+  serializeGraph: () => serializeGraph,
+  snapshotToRenderMap: () => snapshotToRenderMap
+});
+module.exports = __toCommonJS(wire_exports);
+var STATE_NAME = { 0: "clean", 1: "check", 2: "dirty" };
+var STATE_CODE = { clean: 0, check: 1, dirty: 2 };
+function serializeGraph(graph, now = Date.now(), options = {}) {
+  const nodes = [];
+  const wanted = options.ids ? new Set(options.ids) : null;
+  for (const node of graph.values()) {
+    if (wanted && !wanted.has(node.id)) continue;
+    const state = typeof node.core?.state === "number" ? STATE_NAME[node.core.state] : void 0;
+    nodes.push({
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: [...node.deps],
+      writes: [...node.writes],
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      version: node.core?.version,
+      state,
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      // Falls back to what the node already carries, so a relay that re-serialises a
+      // snapshot it received does not drop the description.
+      dom: options.dom?.(node.id) ?? node.dom
+    });
+  }
+  const removed = options.removed ? [...options.removed] : void 0;
+  const events = options.events?.length ? [...options.events] : void 0;
+  const cursor = options.cursor;
+  return wanted ? { t: now, nodes, partial: true, removed, events, cursor } : { t: now, nodes, events, cursor };
+}
+function snapshotToRenderMap(snapshot) {
+  const map = /* @__PURE__ */ new Map();
+  for (const node of snapshot.nodes) {
+    map.set(node.id, {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: new Set(node.deps),
+      writes: new Set(node.writes),
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      core: { version: node.version, state: node.state ? STATE_CODE[node.state] : void 0 },
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      dom: node.dom
+    });
+  }
+  return map;
+}
+function applySnapshot(graph, snapshot) {
+  if (!snapshot.partial) return snapshotToRenderMap(snapshot);
+  for (const [id, node] of snapshotToRenderMap(snapshot)) graph.set(id, node);
+  for (const id of snapshot.removed ?? []) graph.delete(id);
+  return graph;
+}

package/dist/wire.d.ts

@@ -0,0 +1,100 @@
+import type { DomTarget, NodeKind, NodeState, PropReport, RNode } from './instrument.js';
+import type { ReactiveSourceLocation } from './source.js';
+import type { DomNode } from './dom.js';
+import type { GraphEvent } from './history.js';
+export type { NodeKind, NodeState, DomTarget, PropReport } from './instrument.js';
+export type { ReactiveSourceLocation } from './source.js';
+export type { GraphEvent, GraphEventKind } from './history.js';
+export interface WireNode {
+    readonly id: number;
+    readonly label: string;
+    readonly kind: NodeKind;
+    /** Whether the label is the author's own. Absent means the framework named it. */
+    readonly authored?: boolean;
+    /** Source ids read on the last run (read edges: source → this). */
+    readonly deps: number[];
+    /** Signal ids written while this node ran. Empty on an observed graph. */
+    readonly writes: number[];
+    readonly value?: string;
+    /** The value with room to read it, for a tooltip or an inspector. */
+    readonly detail?: string;
+    readonly runs: number;
+    /** Producer's Date.now() at the last change. The consumer's clock agrees with it. */
+    readonly lastPulse: number;
+    readonly order?: number;
+    readonly version?: number;
+    readonly state?: NodeState;
+    readonly loading?: boolean;
+    /** Arrived as its own chunk rather than in the page's first bundle. */
+    readonly lazy?: boolean;
+    /** Components only: the props the tag was handed. */
+    readonly props?: PropReport[];
+    /** What plugins attached, by plugin name. Passed through by a reader that lacks them. */
+    readonly extra?: Record<string, unknown>;
+    /** Where the node was created, when the compiler marked it. */
+    readonly source?: ReactiveSourceLocation;
+    /** Components only: where the component itself was declared. */
+    readonly declaredAt?: ReactiveSourceLocation;
+    /** The line of the application that led to a node the compiler did not mark. */
+    readonly usedAt?: ReactiveSourceLocation;
+    /** The node whose run created this one. */
+    readonly createdIn?: number;
+    /** How many dom bindings read it. */
+    readonly bindings?: number;
+    /** What those bindings write: the text of an `li`, the `class` of a `div`. */
+    readonly targets?: DomTarget[];
+    /** Where it is set from outside any computation. */
+    readonly setAt?: ReactiveSourceLocation[];
+    /**
+     * What this tag rendered, for a panel that is not in the page and so has no elements of
+     * its own. Only sent when the producer was asked for it.
+     */
+    readonly dom?: DomNode[];
+}
+export interface GraphSnapshot {
+    /** Producer clock (ms since epoch), so a pulse still ages correctly after the trip. */
+    readonly t: number;
+    readonly nodes: WireNode[];
+    /** True when `nodes` is only what changed, so a consumer keeps the rest of what it has. */
+    readonly partial?: boolean;
+    /** Ids the producer no longer has. Only meaningful on a partial. */
+    readonly removed?: number[];
+    /**
+     * Why there is nothing to show, when a producer can say. A dev server that is running but
+     * has no devtools installed answers with this rather than with a 404, which reads the same
+     * as a server that is not a fluixi project at all.
+     */
+    readonly reason?: string;
+    /** Oldest first, and always a delta: resending it would replay what the consumer has. */
+    readonly events?: GraphEvent[];
+    /**
+     * Where the producer had got to. A consumer folding in deltas keeps this and asks for
+     * what came after it, so two of them reading at their own pace both see every change.
+     */
+    readonly cursor?: number;
+}
+export interface SerializeOptions {
+    /** Send only these nodes, being what `sample()` returned. Makes it a partial. */
+    ids?: Iterable<number>;
+    removed?: Iterable<number>;
+    /** What `takeEvents()` returned. Omitted rather than sent empty. */
+    events?: readonly GraphEvent[];
+    /**
+     * Describe what each tag rendered, so a panel elsewhere can draw the dom too. Off unless
+     * asked: it is the largest thing a snapshot can carry. Undefined for a node that rendered
+     * nothing, so the field is left off instead of sending an empty array per node.
+     */
+    dom?: (id: number) => DomNode[] | undefined;
+    /** Passed through to the snapshot, for a consumer that will come back for more. */
+    cursor?: number;
+}
+/** Flatten a live graph for transport. */
+export declare function serializeGraph(graph: Map<number, RNode>, now?: number, options?: SerializeOptions): GraphSnapshot;
+/** Rebuild a graph the renderer can draw. Nodes have no reader: a snapshot is already read. */
+export declare function snapshotToRenderMap(snapshot: GraphSnapshot): Map<number, RNode>;
+/**
+ * Fold a snapshot into what is already on screen. A full one replaces the graph; a partial
+ * updates the nodes it carries and drops the ones the producer says are gone.
+ */
+export declare function applySnapshot(graph: Map<number, RNode>, snapshot: GraphSnapshot): Map<number, RNode>;
+//# sourceMappingURL=wire.d.ts.map

package/dist/wire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wire.d.ts","sourceRoot":"","sources":["../src/wire.ts"],"names":[],"mappings":"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"}

package/dist/wire.js

@@ -0,0 +1,93 @@
+const STATE_NAME = { 0: 'clean', 1: 'check', 2: 'dirty' };
+const STATE_CODE = { clean: 0, check: 1, dirty: 2 };
+/** Flatten a live graph for transport. */
+export function serializeGraph(graph, now = Date.now(), options = {}) {
+    const nodes = [];
+    const wanted = options.ids ? new Set(options.ids) : null;
+    for (const node of graph.values()) {
+        if (wanted && !wanted.has(node.id))
+            continue;
+        const state = typeof node.core?.state === 'number' ? STATE_NAME[node.core.state] : undefined;
+        nodes.push({
+            id: node.id,
+            label: node.label,
+            kind: node.kind,
+            authored: node.authored,
+            deps: [...node.deps],
+            writes: [...node.writes],
+            value: node.value,
+            detail: node.detail,
+            runs: node.runs,
+            lastPulse: node.lastPulse,
+            order: node.order,
+            version: node.core?.version,
+            state,
+            loading: node.loading,
+            lazy: node.lazy,
+            props: node.props,
+            extra: node.extra,
+            source: node.source,
+            declaredAt: node.declaredAt,
+            usedAt: node.usedAt,
+            createdIn: node.createdIn,
+            bindings: node.bindings,
+            targets: node.targets,
+            setAt: node.setAt,
+            // Falls back to what the node already carries, so a relay that re-serialises a
+            // snapshot it received does not drop the description.
+            dom: options.dom?.(node.id) ?? node.dom,
+        });
+    }
+    const removed = options.removed ? [...options.removed] : undefined;
+    const events = options.events?.length ? [...options.events] : undefined;
+    const cursor = options.cursor;
+    return wanted
+        ? { t: now, nodes, partial: true, removed, events, cursor }
+        : { t: now, nodes, events, cursor };
+}
+/** Rebuild a graph the renderer can draw. Nodes have no reader: a snapshot is already read. */
+export function snapshotToRenderMap(snapshot) {
+    const map = new Map();
+    for (const node of snapshot.nodes) {
+        map.set(node.id, {
+            id: node.id,
+            label: node.label,
+            kind: node.kind,
+            authored: node.authored,
+            deps: new Set(node.deps),
+            writes: new Set(node.writes),
+            value: node.value,
+            detail: node.detail,
+            runs: node.runs,
+            lastPulse: node.lastPulse,
+            order: node.order,
+            core: { version: node.version, state: node.state ? STATE_CODE[node.state] : undefined },
+            loading: node.loading,
+            lazy: node.lazy,
+            props: node.props,
+            extra: node.extra,
+            source: node.source,
+            declaredAt: node.declaredAt,
+            usedAt: node.usedAt,
+            createdIn: node.createdIn,
+            bindings: node.bindings,
+            targets: node.targets,
+            setAt: node.setAt,
+            dom: node.dom,
+        });
+    }
+    return map;
+}
+/**
+ * Fold a snapshot into what is already on screen. A full one replaces the graph; a partial
+ * updates the nodes it carries and drops the ones the producer says are gone.
+ */
+export function applySnapshot(graph, snapshot) {
+    if (!snapshot.partial)
+        return snapshotToRenderMap(snapshot);
+    for (const [id, node] of snapshotToRenderMap(snapshot))
+        graph.set(id, node);
+    for (const id of snapshot.removed ?? [])
+        graph.delete(id);
+    return graph;
+}

package/dist/wire.mjs

@@ -0,0 +1,89 @@
+/*! @fluixi/devtools v0.2.0-alpha.4 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+
+// src/wire.ts
+var STATE_NAME = { 0: "clean", 1: "check", 2: "dirty" };
+var STATE_CODE = { clean: 0, check: 1, dirty: 2 };
+function serializeGraph(graph, now = Date.now(), options = {}) {
+  const nodes = [];
+  const wanted = options.ids ? new Set(options.ids) : null;
+  for (const node of graph.values()) {
+    if (wanted && !wanted.has(node.id)) continue;
+    const state = typeof node.core?.state === "number" ? STATE_NAME[node.core.state] : void 0;
+    nodes.push({
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: [...node.deps],
+      writes: [...node.writes],
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      version: node.core?.version,
+      state,
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      // Falls back to what the node already carries, so a relay that re-serialises a
+      // snapshot it received does not drop the description.
+      dom: options.dom?.(node.id) ?? node.dom
+    });
+  }
+  const removed = options.removed ? [...options.removed] : void 0;
+  const events = options.events?.length ? [...options.events] : void 0;
+  const cursor = options.cursor;
+  return wanted ? { t: now, nodes, partial: true, removed, events, cursor } : { t: now, nodes, events, cursor };
+}
+function snapshotToRenderMap(snapshot) {
+  const map = /* @__PURE__ */ new Map();
+  for (const node of snapshot.nodes) {
+    map.set(node.id, {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: new Set(node.deps),
+      writes: new Set(node.writes),
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      core: { version: node.version, state: node.state ? STATE_CODE[node.state] : void 0 },
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      dom: node.dom
+    });
+  }
+  return map;
+}
+function applySnapshot(graph, snapshot) {
+  if (!snapshot.partial) return snapshotToRenderMap(snapshot);
+  for (const [id, node] of snapshotToRenderMap(snapshot)) graph.set(id, node);
+  for (const id of snapshot.removed ?? []) graph.delete(id);
+  return graph;
+}
+export {
+  applySnapshot,
+  serializeGraph,
+  snapshotToRenderMap
+};

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@fluixi/devtools",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.4",
   "license": "MIT",
+  "author": "Ibrahima Touré",
   "description": "Live inspector for the Fluixi reactive graph — instrument signals/memos/effects and visualize propagation.",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
+    },
+    "./wire": {
+      "types": "./dist/wire.d.ts",
+      "import": "./dist/wire.mjs",
+      "require": "./dist/wire.cjs",
+      "default": "./dist/wire.js"
     }
   },
   "files": [
@@ -23,10 +31,14 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@fluixi/reactive": "1.0.0-alpha.54"
+    "@bambiste/mix-builder": "^0.4.0",
+    "cross-env": "^7.0.3",
+    "@fluixi/reactive": "1.0.0-alpha.84"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.lib.json",
-    "test": "vitest run"
+    "build": "cross-env NODE_ENV=production mix-builder",
+    "test": "vitest run",
+    "build:typings": "tsc -p tsconfig.lib.json",
+    "dev": "tsc -w -p tsconfig.lib.json"
   }
 }