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

package/dist/float.cjs

@@ -0,0 +1,232 @@
+"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/float.ts
+var float_exports = {};
+__export(float_exports, {
+  FLOAT_CSS: () => FLOAT_CSS,
+  floatCard: () => floatCard,
+  makeFloatable: () => makeFloatable
+});
+module.exports = __toCommonJS(float_exports);
+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() };
+}
+function makeFloatable(pane, options) {
+  const doc = pane.ownerDocument;
+  let card = null;
+  let home = null;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-float-btn";
+  button.textContent = "⇱";
+  button.title = `Float ${options.title}`;
+  pane.classList.add("fx-floatable");
+  pane.append(button);
+  const keep = new MutationObserver(() => {
+    if (button.parentNode !== pane) pane.append(button);
+  });
+  keep.observe(pane, { childList: true });
+  function dock() {
+    if (!card || !home) return;
+    home.parent.insertBefore(pane, home.before);
+    card.remove();
+    card = null;
+    home = null;
+    pane.classList.remove("fx-floated");
+    button.textContent = "⇱";
+    button.title = `Float ${options.title}`;
+    options.onChange?.(false);
+  }
+  function float() {
+    if (card || !pane.parentNode) return;
+    home = { parent: pane.parentNode, before: pane.nextSibling };
+    const built = floatCard(doc, options.title, options.at);
+    card = built.card;
+    card.append(pane);
+    doc.body.appendChild(card);
+    pane.classList.add("fx-floated");
+    button.textContent = "⇲";
+    button.title = `Put ${options.title} back`;
+    options.onChange?.(true);
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (card) dock();
+    else float();
+  });
+  return {
+    get floating() {
+      return card !== null;
+    },
+    toggle() {
+      if (card) dock();
+      else float();
+      return card !== null;
+    },
+    dock,
+    destroy() {
+      keep.disconnect();
+      dock();
+      button.remove();
+      pane.classList.remove("fx-floatable");
+    }
+  };
+}
+var FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;

package/dist/float.mjs

@@ -0,0 +1,211 @@
+// 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() };
+}
+function makeFloatable(pane, options) {
+  const doc = pane.ownerDocument;
+  let card = null;
+  let home = null;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-float-btn";
+  button.textContent = "⇱";
+  button.title = `Float ${options.title}`;
+  pane.classList.add("fx-floatable");
+  pane.append(button);
+  const keep = new MutationObserver(() => {
+    if (button.parentNode !== pane) pane.append(button);
+  });
+  keep.observe(pane, { childList: true });
+  function dock() {
+    if (!card || !home) return;
+    home.parent.insertBefore(pane, home.before);
+    card.remove();
+    card = null;
+    home = null;
+    pane.classList.remove("fx-floated");
+    button.textContent = "⇱";
+    button.title = `Float ${options.title}`;
+    options.onChange?.(false);
+  }
+  function float() {
+    if (card || !pane.parentNode) return;
+    home = { parent: pane.parentNode, before: pane.nextSibling };
+    const built = floatCard(doc, options.title, options.at);
+    card = built.card;
+    card.append(pane);
+    doc.body.appendChild(card);
+    pane.classList.add("fx-floated");
+    button.textContent = "⇲";
+    button.title = `Put ${options.title} back`;
+    options.onChange?.(true);
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (card) dock();
+    else float();
+  });
+  return {
+    get floating() {
+      return card !== null;
+    },
+    toggle() {
+      if (card) dock();
+      else float();
+      return card !== null;
+    },
+    dock,
+    destroy() {
+      keep.disconnect();
+      dock();
+      button.remove();
+      pane.classList.remove("fx-floatable");
+    }
+  };
+}
+var FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;
+export {
+  FLOAT_CSS,
+  floatCard,
+  makeFloatable
+};

package/dist/format.cjs

@@ -0,0 +1,175 @@
+"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/format.ts
+var format_exports = {};
+__export(format_exports, {
+  formatValue: () => formatValue,
+  indentValue: () => indentValue,
+  shorten: () => shorten
+});
+module.exports = __toCommonJS(format_exports);
+var MAX_DEPTH = 3;
+var MAX_ENTRIES = 8;
+function domName(v) {
+  if (typeof v?.nodeType !== "number" || typeof v.nodeName !== "string") return null;
+  return v.tagName ? `<${v.tagName.toLowerCase()}>` : `#${v.nodeName.toLowerCase()}`;
+}
+function fnName(v) {
+  return v.name ? `ƒ ${v.name}()` : "ƒ";
+}
+function className(v) {
+  const name = v.constructor?.name;
+  return name && name !== "Object" ? `${name} ` : "";
+}
+function primitive(v) {
+  if (v === null) return "null";
+  switch (typeof v) {
+    case "undefined":
+      return "undefined";
+    case "string":
+      return JSON.stringify(v);
+    case "number":
+    case "boolean":
+      return String(v);
+    case "bigint":
+      return `${v}n`;
+    case "symbol":
+      return v.toString();
+    case "function":
+      return fnName(v);
+    default:
+      return null;
+  }
+}
+function walk(value, depth, seen) {
+  const simple = primitive(value);
+  if (simple !== null) return simple;
+  const object = value;
+  if (seen.has(object)) return "[circular]";
+  const dom = domName(object);
+  if (dom) return dom;
+  if (object instanceof Date) return Number.isNaN(object.getTime()) ? "Invalid Date" : object.toISOString();
+  if (object instanceof RegExp) return String(object);
+  if (object instanceof Error) return `${object.name}: ${object.message}`;
+  if (object instanceof Promise) return "Promise";
+  if (ArrayBuffer.isView(object)) {
+    return `${className(object).trim()}(${object.length ?? ""})`;
+  }
+  if (depth >= MAX_DEPTH) return Array.isArray(object) ? "[…]" : "{…}";
+  seen.add(object);
+  try {
+    if (Array.isArray(object)) {
+      const shown2 = object.slice(0, MAX_ENTRIES).map((item) => walk(item, depth + 1, seen));
+      if (object.length > MAX_ENTRIES) shown2.push("…");
+      return `[${shown2.join(", ")}]`;
+    }
+    if (object instanceof Map) {
+      const shown2 = [];
+      for (const [k, v] of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(`${walk(k, depth + 1, seen)} => ${walk(v, depth + 1, seen)}`);
+      }
+      return `Map(${object.size}) {${shown2.join(", ")}}`;
+    }
+    if (object instanceof Set) {
+      const shown2 = [];
+      for (const item of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(walk(item, depth + 1, seen));
+      }
+      return `Set(${object.size}) {${shown2.join(", ")}}`;
+    }
+    const keys = Object.keys(object);
+    const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
+      let read;
+      try {
+        read = walk(object[key], depth + 1, seen);
+      } catch {
+        read = "[unreadable]";
+      }
+      return `${key}: ${read}`;
+    });
+    if (keys.length > MAX_ENTRIES) shown.push("…");
+    return `${className(object)}{${shown.join(", ")}}`;
+  } finally {
+    seen.delete(object);
+  }
+}
+function formatValue(value, limit = 240) {
+  let text;
+  try {
+    text = walk(value, 0, /* @__PURE__ */ new Set());
+  } catch {
+    text = "[unreadable]";
+  }
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+function shorten(text, limit = 18) {
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+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");
+}