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

package/dist/export.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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
+ * document and where it is written from.
+ *
+ * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be
+ * read, `deps: [3]` has to be looked up. Ids stay on the nodes, and a name shared by two nodes
+ * is disambiguated so the export is never ambiguous.
+ */
+import { type RNode } from './instrument.js';
+import type { GraphEvent } from './history.js';
+export interface ExportOptions {
+    /** How much of each value to include. */
+    limit?: number;
+    /** The history, when the host has one. */
+    events?: readonly GraphEvent[];
+    /** Says the graph was read from source rather than from a running application. */
+    fromSource?: boolean;
+}
+interface ExportedNode {
+    id: number;
+    label: string;
+    kind: string;
+    /** Absent when the framework named it — see RNode.authored. */
+    authored?: boolean;
+    value?: string;
+    runs?: number;
+    version?: number;
+    state?: string;
+    reads?: string[];
+    writes?: string[];
+    madeIn?: string;
+    source?: string;
+    declaredAt?: string;
+    usedAt?: string;
+    /** Where it reaches the document, with the line each binding was written on. */
+    updates?: string[];
+    /** Where it is written from, outside any computation. */
+    setAt?: string[];
+}
+export interface ExportedGraph {
+    t: number;
+    nodes: ExportedNode[];
+    /** Present only when the host passed a history. */
+    events?: GraphEvent[];
+    from: 'source' | 'running application';
+}
+/** The graph as a plain object. */
+export declare function exportGraph(graph: Map<number, RNode>, options?: ExportOptions): ExportedGraph;
+/** The same thing as text, indented so it can be read where it is pasted. */
+export declare function graphToJson(graph: Map<number, RNode>, options?: ExportOptions): string;
+export {};
+//# sourceMappingURL=export.d.ts.map

package/dist/export.d.ts.map

@@ -0,0 +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"}

package/dist/export.js

@@ -0,0 +1,90 @@
+/**
+ * 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
+ * document and where it is written from.
+ *
+ * Names rather than ids wherever a reader has to follow a reference: `deps: ["count"]` can be
+ * read, `deps: [3]` has to be looked up. Ids stay on the nodes, and a name shared by two nodes
+ * is disambiguated so the export is never ambiguous.
+ */
+import { nodeState, nodeVersion } from './instrument.js';
+import { formatValue } from './format.js';
+const at = (source) => {
+    if (!source)
+        return undefined;
+    const where = `${source.file ?? ''}:${source.line ?? ''}:${source.column ?? ''}`;
+    // Both when they differ: a template's holes share one original position.
+    const out = source.compiled;
+    const same = out?.line === source.line && out?.column === source.column;
+    return out && !same ? `${where} (out ${out.line ?? ''}:${out.column ?? ''})` : where;
+};
+/** A name, made unique when two nodes share it. */
+function naming(graph) {
+    const seen = new Map();
+    for (const node of graph.values())
+        seen.set(node.label, (seen.get(node.label) ?? 0) + 1);
+    return (id) => {
+        const node = graph.get(id);
+        if (!node)
+            return `#${id}`;
+        return (seen.get(node.label) ?? 0) > 1 ? `${node.label}#${node.id}` : node.label;
+    };
+}
+/** The graph as a plain object. */
+export function exportGraph(graph, options = {}) {
+    const limit = options.limit ?? 400;
+    const name = naming(graph);
+    const nodes = [...graph.values()].map((node) => {
+        let value = node.detail ?? node.value;
+        if (node.read) {
+            try {
+                value = formatValue(node.read(), limit);
+            }
+            catch {
+                // A reader that throws is still a node worth exporting.
+            }
+        }
+        const feeds = [...node.deps].map(name);
+        const wrote = [...node.writes].map(name);
+        const state = nodeState(node);
+        return {
+            id: node.id,
+            label: node.label,
+            kind: node.kind,
+            ...(node.authored === false ? { authored: false } : {}),
+            ...(value ? { value } : {}),
+            ...(node.runs ? { runs: node.runs } : {}),
+            // Only a node with a core has one; a static node would report a version of 0.
+            ...(node.core?.version !== undefined ? { version: nodeVersion(node) } : {}),
+            ...(state ? { state } : {}),
+            ...(feeds.length ? { reads: feeds } : {}),
+            ...(wrote.length ? { writes: wrote } : {}),
+            ...(node.createdIn !== undefined ? { madeIn: name(node.createdIn) } : {}),
+            ...(at(node.source) ? { source: at(node.source) } : {}),
+            ...(at(node.declaredAt) ? { declaredAt: at(node.declaredAt) } : {}),
+            ...(at(node.usedAt) ? { usedAt: at(node.usedAt) } : {}),
+            ...(node.targets?.length
+                ? {
+                    updates: node.targets.map((target) => {
+                        const what = target.name ? `${target.name} of ${target.element}` : target.element;
+                        const where = at(target.source);
+                        return where ? `${what} — ${where}` : what;
+                    }),
+                }
+                : {}),
+            ...(node.setAt?.length ? { setAt: node.setAt.map((s) => at(s)).filter(Boolean) } : {}),
+        };
+    });
+    return {
+        t: Date.now(),
+        from: options.fromSource ? 'source' : 'running application',
+        nodes,
+        ...(options.events?.length ? { events: [...options.events] } : {}),
+    };
+}
+/** The same thing as text, indented so it can be read where it is pasted. */
+export function graphToJson(graph, options = {}) {
+    return JSON.stringify(exportGraph(graph, options), null, 2);
+}

package/dist/export.mjs

@@ -0,0 +1,209 @@
+// src/instrument.ts
+import {
+  createSignal,
+  createMemo,
+  createEffect,
+  createResource,
+  createRoot,
+  untrack,
+  onCleanup,
+  getOwner,
+  runWithOwner,
+  Signal
+} from "@fluixi/reactive/signal";
+import { createStore } from "@fluixi/reactive/store";
+
+// src/source.ts
+var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
+var host = globalThis;
+var shared = host[MARKS] ?? {
+  pending: null,
+  expiring: false,
+  components: /* @__PURE__ */ new Map()
+};
+host[MARKS] = shared;
+
+// src/format.ts
+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;
+}
+
+// src/instrument.ts
+var CORE_STATE = { 0: "clean", 1: "check", 2: "dirty" };
+function nodeVersion(n) {
+  return n.core && typeof n.core.version === "number" ? n.core.version : n.runs;
+}
+function nodeState(n) {
+  return n.core && typeof n.core.state === "number" ? CORE_STATE[n.core.state] : void 0;
+}
+
+// src/export.ts
+var at = (source) => {
+  if (!source) return void 0;
+  const where = `${source.file ?? ""}:${source.line ?? ""}:${source.column ?? ""}`;
+  const out = source.compiled;
+  const same = out?.line === source.line && out?.column === source.column;
+  return out && !same ? `${where} (out ${out.line ?? ""}:${out.column ?? ""})` : where;
+};
+function naming(graph) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) seen.set(node.label, (seen.get(node.label) ?? 0) + 1);
+  return (id) => {
+    const node = graph.get(id);
+    if (!node) return `#${id}`;
+    return (seen.get(node.label) ?? 0) > 1 ? `${node.label}#${node.id}` : node.label;
+  };
+}
+function exportGraph(graph, options = {}) {
+  const limit = options.limit ?? 400;
+  const name = naming(graph);
+  const nodes = [...graph.values()].map((node) => {
+    let value = node.detail ?? node.value;
+    if (node.read) {
+      try {
+        value = formatValue(node.read(), limit);
+      } catch {
+      }
+    }
+    const feeds = [...node.deps].map(name);
+    const wrote = [...node.writes].map(name);
+    const state = nodeState(node);
+    return {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      ...node.authored === false ? { authored: false } : {},
+      ...value ? { value } : {},
+      ...node.runs ? { runs: node.runs } : {},
+      // Only a node with a core has one; a static node would report a version of 0.
+      ...node.core?.version !== void 0 ? { version: nodeVersion(node) } : {},
+      ...state ? { state } : {},
+      ...feeds.length ? { reads: feeds } : {},
+      ...wrote.length ? { writes: wrote } : {},
+      ...node.createdIn !== void 0 ? { madeIn: name(node.createdIn) } : {},
+      ...at(node.source) ? { source: at(node.source) } : {},
+      ...at(node.declaredAt) ? { declaredAt: at(node.declaredAt) } : {},
+      ...at(node.usedAt) ? { usedAt: at(node.usedAt) } : {},
+      ...node.targets?.length ? {
+        updates: node.targets.map((target) => {
+          const what = target.name ? `${target.name} of ${target.element}` : target.element;
+          const where = at(target.source);
+          return where ? `${what} — ${where}` : what;
+        })
+      } : {},
+      ...node.setAt?.length ? { setAt: node.setAt.map((s) => at(s)).filter(Boolean) } : {}
+    };
+  });
+  return {
+    t: Date.now(),
+    from: options.fromSource ? "source" : "running application",
+    nodes,
+    ...options.events?.length ? { events: [...options.events] } : {}
+  };
+}
+function graphToJson(graph, options = {}) {
+  return JSON.stringify(exportGraph(graph, options), null, 2);
+}
+export {
+  exportGraph,
+  graphToJson
+};

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

@@ -0,0 +1,54 @@
+/**
+ * Taking a pane out of the layout and putting it back.
+ *
+ * The inspector, the timeline and the tree each live in a fixed corner of the panel. Reading
+ * one of them properly means giving it room, and the room has to come from the others. So
+ * each carries a button that lifts it into a card over everything, and the same button puts
+ * 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
+ * timeline, not a copy of one.
+ */
+export interface FloatOptions {
+    /** Shown on the card's bar, and on the button that lifts it. */
+    title: string;
+    /** Where a card opens the first time. Defaults to a cascade from the top left. */
+    at?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Told each way round, for a host that wants to remember or relayout. */
+    onChange?: (floating: boolean) => void;
+}
+export interface Floatable {
+    readonly floating: boolean;
+    /** Lift it out, or put it back. Returns what it now is. */
+    toggle(): boolean;
+    dock(): void;
+    destroy(): void;
+}
+/** A card the reader can move and resize, with the pane's own content inside it. */
+export interface FloatCard {
+    readonly card: HTMLElement;
+    /** The bar along the top, for a title or a close button. */
+    readonly bar: HTMLElement;
+    remove(): void;
+}
+/**
+ * The moving and resizing, on its own.
+ *
+ * Both a floated pane and the value pane want the same card, and writing the drag twice is
+ * how two of them end up behaving differently.
+ */
+export declare function floatCard(doc: Document, title: string, at?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): FloatCard;
+export declare function makeFloatable(pane: HTMLElement, options: FloatOptions): Floatable;
+export declare const FLOAT_CSS = "\n.fx-floatable { position: relative; }\n.fx-float-btn {\n  position: absolute; top: 2px; right: 2px; z-index: 5;\n  width: 18px; height: 18px; padding: 0; line-height: 1;\n  font-size: 11px; color: var(--fx-muted, #8a90a2);\n  background: var(--fx-panel, #14161c);\n  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;\n  cursor: pointer; opacity: 0; transition: opacity .12s;\n}\n.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }\n.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }\n\n.fx-float {\n  position: fixed; z-index: 60; display: flex; flex-direction: column;\n  background: var(--fx-panel, #14161c);\n  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;\n  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;\n}\n.fx-float-bar {\n  display: flex; align-items: center; padding: 4px 8px; cursor: move;\n  font-size: 11px; color: var(--fx-muted, #8a90a2);\n  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);\n  user-select: none;\n}\n/* The pane fills the card, whatever it was sized to in the layout it came from. */\n.fx-float > .fx-floated {\n  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;\n}\n/* Edges and corners. Thin, and over everything, so a card can be resized from whichever\n   side is reachable. */\n.fx-float-h { position: absolute; z-index: 1; }\n.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }\n.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }\n.fx-float-n { top: -3px; }\n.fx-float-s { bottom: -3px; }\n.fx-float-e { right: -3px; }\n.fx-float-w { left: -3px; }\n.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }\n.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }\n.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }\n.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }\n.fx-float-se {\n  bottom: 0; right: 0; cursor: nwse-resize;\n  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);\n}\n";
+//# sourceMappingURL=float.d.ts.map

package/dist/float.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"float.d.ts","sourceRoot":"","sources":["../src/float.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AA+CH,MAAM,WAAW,YAAY;IAC3B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,EAAE,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,2DAA2D;IAC3D,MAAM,IAAI,OAAO,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,MAAM,EACb,EAAE,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC3D,SAAS,CAsFX;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,SAAS,CA2EjF;AAED,eAAO,MAAM,SAAS,8mEA8CrB,CAAC"}