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

package/dist/highlight.cjs

@@ -0,0 +1,140 @@
+"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/highlight.ts
+var highlight_exports = {};
+__export(highlight_exports, {
+  hideHighlight: () => hideHighlight,
+  removeHighlight: () => removeHighlight,
+  showHighlight: () => showHighlight,
+  startPicking: () => startPicking
+});
+module.exports = __toCommonJS(highlight_exports);
+var LAYER = "fx-highlight-layer";
+var overlay = null;
+function build(doc) {
+  const layer = doc.createElement("div");
+  layer.id = LAYER;
+  layer.style.cssText = "position:fixed;inset:0;z-index:2147483646;pointer-events:none;contain:strict;";
+  const label = doc.createElement("div");
+  label.style.cssText = "position:absolute;padding:1px 5px;border-radius:3px;background:#5eead4;color:#07131a;font:11px/1.5 ui-monospace,monospace;white-space:nowrap;";
+  layer.append(label);
+  doc.body.appendChild(layer);
+  return { layer, boxes: [], label };
+}
+function boxIn(overlay2, index) {
+  const held = overlay2.boxes[index];
+  if (held) return held;
+  const box = overlay2.layer.ownerDocument.createElement("div");
+  box.style.cssText = "position:absolute;border:1px solid #5eead4;background:rgba(94,234,212,.16);border-radius:2px;transition:none;";
+  overlay2.layer.append(box);
+  overlay2.boxes.push(box);
+  return box;
+}
+function showHighlight(target, text) {
+  const elements = (Array.isArray(target) ? target : [target]).filter(
+    (el) => el?.isConnected
+  );
+  const first = elements[0];
+  const doc = first?.ownerDocument;
+  if (!doc?.body) {
+    hideHighlight();
+    return;
+  }
+  if (!overlay || overlay.layer.ownerDocument !== doc || !overlay.layer.isConnected) {
+    overlay = build(doc);
+  }
+  const { label, layer } = overlay;
+  layer.style.display = "";
+  let top = Infinity;
+  let left = Infinity;
+  let bottom = 0;
+  elements.forEach((element, index) => {
+    const rect = element.getBoundingClientRect();
+    const box = boxIn(overlay, index);
+    box.style.display = "";
+    box.style.left = `${rect.left}px`;
+    box.style.top = `${rect.top}px`;
+    box.style.width = `${rect.width}px`;
+    box.style.height = `${rect.height}px`;
+    top = Math.min(top, rect.top);
+    left = Math.min(left, rect.left);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  for (let i = elements.length; i < overlay.boxes.length; i++) {
+    overlay.boxes[i].style.display = "none";
+  }
+  if (!text) {
+    label.style.display = "none";
+    return;
+  }
+  label.style.display = "";
+  label.textContent = text;
+  label.style.left = `${Math.max(2, left)}px`;
+  label.style.top = top >= 20 ? `${top - 18}px` : `${bottom + 4}px`;
+}
+function hideHighlight() {
+  if (overlay) overlay.layer.style.display = "none";
+}
+function removeHighlight() {
+  overlay?.layer.remove();
+  overlay = null;
+}
+function startPicking(options) {
+  const doc = options.document ?? globalThis.document;
+  if (!doc?.body) return () => {
+  };
+  const was = doc.body.style.cursor;
+  doc.body.style.cursor = "crosshair";
+  const under = (event) => {
+    const target = event.target;
+    return target?.closest?.(`#${LAYER}`) ? null : target;
+  };
+  const move = (event) => {
+    const element = under(event);
+    const id = options.nodeAt(element);
+    if (element && id !== void 0) showHighlight(element, options.describe?.(id, element));
+    else hideHighlight();
+  };
+  const click = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const target = under(event);
+    const id = options.nodeAt(target);
+    if (!options.sticky) stop();
+    if (id !== void 0) options.onPick(id, target);
+    else if (!options.sticky) options.onCancel?.();
+  };
+  const key = (event) => {
+    if (event.key !== "Escape") return;
+    stop();
+    options.onCancel?.();
+  };
+  const stop = () => {
+    doc.body.style.cursor = was;
+    doc.removeEventListener("pointermove", move, true);
+    doc.removeEventListener("click", click, true);
+    doc.removeEventListener("keydown", key, true);
+    hideHighlight();
+  };
+  doc.addEventListener("pointermove", move, true);
+  doc.addEventListener("click", click, true);
+  doc.addEventListener("keydown", key, true);
+  return stop;
+}

package/dist/highlight.mjs

@@ -0,0 +1,119 @@
+// src/highlight.ts
+var LAYER = "fx-highlight-layer";
+var overlay = null;
+function build(doc) {
+  const layer = doc.createElement("div");
+  layer.id = LAYER;
+  layer.style.cssText = "position:fixed;inset:0;z-index:2147483646;pointer-events:none;contain:strict;";
+  const label = doc.createElement("div");
+  label.style.cssText = "position:absolute;padding:1px 5px;border-radius:3px;background:#5eead4;color:#07131a;font:11px/1.5 ui-monospace,monospace;white-space:nowrap;";
+  layer.append(label);
+  doc.body.appendChild(layer);
+  return { layer, boxes: [], label };
+}
+function boxIn(overlay2, index) {
+  const held = overlay2.boxes[index];
+  if (held) return held;
+  const box = overlay2.layer.ownerDocument.createElement("div");
+  box.style.cssText = "position:absolute;border:1px solid #5eead4;background:rgba(94,234,212,.16);border-radius:2px;transition:none;";
+  overlay2.layer.append(box);
+  overlay2.boxes.push(box);
+  return box;
+}
+function showHighlight(target, text) {
+  const elements = (Array.isArray(target) ? target : [target]).filter(
+    (el) => el?.isConnected
+  );
+  const first = elements[0];
+  const doc = first?.ownerDocument;
+  if (!doc?.body) {
+    hideHighlight();
+    return;
+  }
+  if (!overlay || overlay.layer.ownerDocument !== doc || !overlay.layer.isConnected) {
+    overlay = build(doc);
+  }
+  const { label, layer } = overlay;
+  layer.style.display = "";
+  let top = Infinity;
+  let left = Infinity;
+  let bottom = 0;
+  elements.forEach((element, index) => {
+    const rect = element.getBoundingClientRect();
+    const box = boxIn(overlay, index);
+    box.style.display = "";
+    box.style.left = `${rect.left}px`;
+    box.style.top = `${rect.top}px`;
+    box.style.width = `${rect.width}px`;
+    box.style.height = `${rect.height}px`;
+    top = Math.min(top, rect.top);
+    left = Math.min(left, rect.left);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  for (let i = elements.length; i < overlay.boxes.length; i++) {
+    overlay.boxes[i].style.display = "none";
+  }
+  if (!text) {
+    label.style.display = "none";
+    return;
+  }
+  label.style.display = "";
+  label.textContent = text;
+  label.style.left = `${Math.max(2, left)}px`;
+  label.style.top = top >= 20 ? `${top - 18}px` : `${bottom + 4}px`;
+}
+function hideHighlight() {
+  if (overlay) overlay.layer.style.display = "none";
+}
+function removeHighlight() {
+  overlay?.layer.remove();
+  overlay = null;
+}
+function startPicking(options) {
+  const doc = options.document ?? globalThis.document;
+  if (!doc?.body) return () => {
+  };
+  const was = doc.body.style.cursor;
+  doc.body.style.cursor = "crosshair";
+  const under = (event) => {
+    const target = event.target;
+    return target?.closest?.(`#${LAYER}`) ? null : target;
+  };
+  const move = (event) => {
+    const element = under(event);
+    const id = options.nodeAt(element);
+    if (element && id !== void 0) showHighlight(element, options.describe?.(id, element));
+    else hideHighlight();
+  };
+  const click = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const target = under(event);
+    const id = options.nodeAt(target);
+    if (!options.sticky) stop();
+    if (id !== void 0) options.onPick(id, target);
+    else if (!options.sticky) options.onCancel?.();
+  };
+  const key = (event) => {
+    if (event.key !== "Escape") return;
+    stop();
+    options.onCancel?.();
+  };
+  const stop = () => {
+    doc.body.style.cursor = was;
+    doc.removeEventListener("pointermove", move, true);
+    doc.removeEventListener("click", click, true);
+    doc.removeEventListener("keydown", key, true);
+    hideHighlight();
+  };
+  doc.addEventListener("pointermove", move, true);
+  doc.addEventListener("click", click, true);
+  doc.addEventListener("keydown", key, true);
+  return stop;
+}
+export {
+  hideHighlight,
+  removeHighlight,
+  showHighlight,
+  startPicking
+};

package/dist/history.cjs

@@ -0,0 +1,95 @@
+"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/history.ts
+var history_exports = {};
+__export(history_exports, {
+  createHistory: () => createHistory,
+  toCommits: () => toCommits
+});
+module.exports = __toCommonJS(history_exports);
+var OFF = {
+  wrote() {
+  },
+  ran() {
+  },
+  created() {
+  },
+  disposed() {
+  },
+  take: () => [],
+  dropped: 0,
+  clear() {
+  }
+};
+function createHistory(limit) {
+  if (limit <= 0) return OFF;
+  let events = [];
+  let seq = 0;
+  let commit = 0;
+  let dropped = 0;
+  const push = (event) => {
+    events.push({ ...event, seq: seq++, t: Date.now(), commit });
+    if (events.length > limit) {
+      dropped += events.length - limit;
+      events = events.slice(-limit);
+    }
+  };
+  return {
+    wrote(id, by, detail) {
+      if (by === void 0) commit++;
+      push({ kind: "write", id, by, ...detail });
+    },
+    ran(id, by) {
+      push({ kind: "ran", id, by });
+    },
+    created(id, by, label) {
+      push({ kind: "created", id, by, label });
+    },
+    disposed(id, label) {
+      push({ kind: "disposed", id, label });
+    },
+    take() {
+      const taken = events;
+      events = [];
+      return taken;
+    },
+    get dropped() {
+      return dropped;
+    },
+    clear() {
+      events = [];
+      dropped = 0;
+    }
+  };
+}
+function toCommits(events) {
+  const byNumber = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    const bucket = byNumber.get(event.commit);
+    if (bucket) bucket.push(event);
+    else byNumber.set(event.commit, [event]);
+  }
+  return [...byNumber.entries()].sort((a, b) => a[0] - b[0]).map(([commit, group]) => ({
+    commit,
+    t: group[0].t,
+    events: group,
+    cause: group.find((e) => e.kind === "write" && e.by === void 0)
+  }));
+}

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) {

package/dist/history.mjs

@@ -0,0 +1,74 @@
+// src/history.ts
+var OFF = {
+  wrote() {
+  },
+  ran() {
+  },
+  created() {
+  },
+  disposed() {
+  },
+  take: () => [],
+  dropped: 0,
+  clear() {
+  }
+};
+function createHistory(limit) {
+  if (limit <= 0) return OFF;
+  let events = [];
+  let seq = 0;
+  let commit = 0;
+  let dropped = 0;
+  const push = (event) => {
+    events.push({ ...event, seq: seq++, t: Date.now(), commit });
+    if (events.length > limit) {
+      dropped += events.length - limit;
+      events = events.slice(-limit);
+    }
+  };
+  return {
+    wrote(id, by, detail) {
+      if (by === void 0) commit++;
+      push({ kind: "write", id, by, ...detail });
+    },
+    ran(id, by) {
+      push({ kind: "ran", id, by });
+    },
+    created(id, by, label) {
+      push({ kind: "created", id, by, label });
+    },
+    disposed(id, label) {
+      push({ kind: "disposed", id, label });
+    },
+    take() {
+      const taken = events;
+      events = [];
+      return taken;
+    },
+    get dropped() {
+      return dropped;
+    },
+    clear() {
+      events = [];
+      dropped = 0;
+    }
+  };
+}
+function toCommits(events) {
+  const byNumber = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    const bucket = byNumber.get(event.commit);
+    if (bucket) bucket.push(event);
+    else byNumber.set(event.commit, [event]);
+  }
+  return [...byNumber.entries()].sort((a, b) => a[0] - b[0]).map(([commit, group]) => ({
+    commit,
+    t: group[0].t,
+    events: group,
+    cause: group.find((e) => e.kind === "write" && e.by === void 0)
+  }));
+}
+export {
+  createHistory,
+  toCommits
+};