@vibecook/ice 0.1.0 → 0.2.0

package/dist/devtools.js

@@ -1,417 +1,553 @@
 import {
-  ClaimedBy,
   CursorVisual,
   Drag,
   GesturePhases,
+  GestureSuspended,
   HandleSpec,
-  LocalPointer,
   LongPress,
   Pinch,
   Pointer,
-  PointerButtons,
-  PointerScreen,
   Port,
-  Position,
   PrefabId,
-  RoutedConnect,
-  RoutedMarquee,
-  RoutedMove,
-  RoutedPan,
-  RoutedResize,
-  Size,
+  PresencePeer,
   Tap,
-  Watches,
   WheelPan,
   WheelZoom,
-  Wire,
-  defineQuery,
-  prefabs,
-  schemaMeta
-} from "./chunk-5S7GSXJG.js";
-import "./chunk-BCJ47SX7.js";
+  Wire
+} from "./chunk-DXU3RZZS.js";
+import "./chunk-OR5FNVUE.js";
 
-// ../devtools/src/panel.ts
-var TABS = ["pointers", "planes", "sovereignty", "loop"];
-var TAB_LABELS = {
-  pointers: "POINTERS",
-  planes: "PLANES",
-  sovereignty: "SOVEREIGNTY",
-  loop: "LOOP"
-};
-var pointerQ = defineQuery([Pointer]);
-var prefabIdQ = defineQuery([PrefabId]);
-var widgetQ = defineQuery([PrefabId, Position, Size]);
-var portQ = defineQuery([Port]);
-var wireQ = defineQuery([Wire]);
-var handleQ = defineQuery([HandleSpec]);
-var cursorQ = defineQuery([CursorVisual]);
-var RECOGNIZER_KINDS = [
-  { label: "Drag", q: defineQuery([Drag]) },
-  { label: "Tap", q: defineQuery([Tap]) },
-  { label: "LongPress", q: defineQuery([LongPress]) },
-  { label: "Pinch", q: defineQuery([Pinch]) },
-  { label: "WheelPan", q: defineQuery([WheelPan]) },
-  { label: "WheelZoom", q: defineQuery([WheelZoom]) }
-];
-var ROUTE_TAGS = [
-  { label: "move", tag: RoutedMove },
-  { label: "resize", tag: RoutedResize },
-  { label: "connect", tag: RoutedConnect },
-  { label: "marquee", tag: RoutedMarquee },
-  { label: "pan", tag: RoutedPan }
-];
-var C = {
-  bg: "#16181d",
-  panel: "#1c1f26",
-  border: "#2a2e37",
-  text: "#cdd3de",
-  dim: "#8b93a1",
-  accent: "#5aa9e6",
-  head: "#0f1115"
-};
-var BADGE = { doc: "#2f6d43", eligible: "#2a5f87", runtime: "#3a3f49", tag: "#4a3a68" };
-function el(doc, tag, style, text) {
-  const node = doc.createElement(tag);
-  if (style) Object.assign(node.style, style);
-  if (text !== void 0) node.textContent = text;
-  return node;
-}
-function row(doc, text) {
-  return el(doc, "div", {
-    padding: "2px 6px",
-    borderBottom: `1px solid ${C.border}`,
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word"
-  }, text);
-}
-function badge(doc, label, color) {
-  return el(doc, "span", {
-    display: "inline-block",
-    padding: "0 4px",
-    marginLeft: "4px",
-    borderRadius: "3px",
-    background: color,
-    color: C.text,
-    fontSize: "9px",
-    verticalAlign: "middle"
-  }, label);
-}
-function heading(doc, text) {
-  return el(doc, "div", {
-    padding: "4px 6px",
-    color: C.dim,
-    textTransform: "uppercase",
-    fontSize: "9px",
-    letterSpacing: "0.06em",
-    position: "sticky",
-    top: "0",
-    background: C.panel
-  }, text);
-}
-function empty(doc, text) {
-  return el(doc, "div", { padding: "8px 6px", color: C.dim, fontStyle: "italic" }, text);
-}
-function renderPointers({ doc, world }) {
-  const out = [heading(doc, "pointers")];
-  const pointers = world.entities(pointerQ);
-  if (pointers.length === 0) out.push(empty(doc, "no live pointers"));
-  for (const e of pointers) {
-    const id = world.readField(e, Pointer, "id") ?? "?";
-    const device = world.readField(e, Pointer, "device") ?? "?";
-    const local = world.hasTag(e, LocalPointer) ? "\xB7local" : "";
-    const sx = world.has(e, PointerScreen) ? world.readField(e, PointerScreen, "x") : void 0;
-    const sy = world.has(e, PointerScreen) ? world.readField(e, PointerScreen, "y") : void 0;
-    const btns = world.has(e, PointerButtons) ? world.readField(e, PointerButtons, "buttons") : void 0;
-    const claim = world.getRelation(e, ClaimedBy);
-    const at = sx === void 0 ? "" : ` (${fmt(sx)},${fmt(sy ?? 0)})`;
-    const b = btns ? ` btn=${btns}` : "";
-    const c = claim === void 0 ? "" : ` \u2192claim #${claim}`;
-    const r = row(doc, `#${e} ${device}${local} "${id}"${at}${b}${c}`);
-    r.dataset.row = "pointer";
-    out.push(r);
-  }
-  out.push(heading(doc, "recognizers"));
-  let anyRec = false;
-  for (const kind of RECOGNIZER_KINDS) {
-    for (const e of world.entities(kind.q)) {
-      anyRec = true;
-      const phase = GesturePhases.current(world, e) ?? "\u2014";
-      const watches = world.getRelations(e, Watches);
-      const claims = world.getReverse(e, ClaimedBy);
-      const routes = ROUTE_TAGS.filter((rt) => world.hasTag(e, rt.tag)).map((rt) => rt.label);
-      const w = watches.length ? ` watches:[${watches.map((p) => `#${p}`).join(",")}]` : "";
-      const cl = claims.length ? ` claims:[${claims.map((p) => `#${p}`).join(",")}]` : "";
-      const ro = routes.length ? ` routes:${routes.join("+")}` : "";
-      const r = row(doc, `#${e} ${kind.label} [${phase}]${w}${cl}${ro}`);
-      r.dataset.row = "recognizer";
-      out.push(r);
-    }
+// ../devtools/src/attach.ts
+import {
+  attachObserver,
+  attachProfiler,
+  defaultDescribe
+} from "@vibecook/strata-ecs/tools";
+
+// ../devtools/src/dock.ts
+var LS_KEY = "ice-dock:layout";
+var STYLE_ID = "ice-dock-style";
+var MARGIN = 8;
+var KEEP = 90;
+var SLOT_ORDER = ["profiler", "gl", "observer"];
+function loadLayout() {
+  try {
+    return JSON.parse(localStorage.getItem(LS_KEY) ?? "{}");
+  } catch {
+    return {};
   }
-  if (!anyRec) out.push(empty(doc, "no live recognizers"));
-  return out;
 }
-function renderPlanes({ doc, world, engine, state }) {
-  const out = [heading(doc, "reflectors (flushed last frame)")];
-  const frame = engine.lastFrame();
-  const flushedNow = new Set(frame?.reflectorsFlushed ?? []);
-  for (const name of engine.reflectorNames()) state.seenReflectors.add(name);
-  for (const name of flushedNow) state.seenReflectors.add(name);
-  if (state.seenReflectors.size === 0) {
-    out.push(empty(doc, "no reflectors registered"));
-  }
-  for (const name of [...state.seenReflectors].sort()) {
-    const r = row(doc, name);
-    r.appendChild(
-      flushedNow.has(name) ? badge(doc, "flushed", BADGE.eligible) : badge(doc, "idle", BADGE.runtime)
-    );
-    r.dataset.row = "reflector";
-    out.push(r);
+function saveLayout(patch) {
+  try {
+    localStorage.setItem(LS_KEY, JSON.stringify({ ...loadLayout(), ...patch }));
+  } catch {
   }
-  out.push(heading(doc, "entity counts"));
-  const counts = [
-    ["widgets", world.count(widgetQ)],
-    ["ports", world.count(portQ)],
-    ["wires", world.count(wireQ)],
-    ["chrome handles", world.count(handleQ)],
-    ["cursors", world.count(cursorQ)]
-  ];
-  for (const [label, n] of counts) {
-    const r = row(doc, `${label}: ${n}`);
-    r.dataset.row = "count";
-    out.push(r);
-  }
-  return out;
 }
-function renderSovereignty(ctx) {
-  const { doc, world, state } = ctx;
-  const out = [heading(doc, "prefabs (click a row to inspect)")];
-  const buckets = /* @__PURE__ */ new Map();
-  for (const e of world.entities(prefabIdQ)) {
-    const id = world.readField(e, PrefabId, "id");
-    if (id === void 0 || id === null) continue;
-    const b = buckets.get(id);
-    if (b) b.count++;
-    else buckets.set(id, { count: 1, first: e });
-  }
-  const all = prefabs.all();
-  if (all.length === 0) out.push(empty(doc, "no prefabs registered"));
-  for (const p of all) {
-    const bucket = buckets.get(p.id);
-    const n = bucket?.count ?? 0;
-    const r = el(doc, "div", {
-      padding: "2px 6px",
-      borderBottom: `1px solid ${C.border}`,
-      cursor: "pointer",
-      background: state.selectedPrefab === p.id ? C.head : "transparent"
-    });
-    r.textContent = `${p.id}  \xD7${n}`;
-    r.appendChild(badge(doc, p.store, storeColor(p.store)));
-    r.dataset.row = "prefab";
-    r.dataset.prefab = p.id;
-    out.push(r);
-  }
-  const sel = state.selectedPrefab;
-  if (sel !== null) {
-    const p = prefabs.get(sel);
-    const bucket = buckets.get(sel);
-    out.push(heading(doc, `components \u2014 ${sel}`));
-    if (p === void 0 || bucket === void 0) {
-      out.push(empty(doc, "no live entity of this type"));
-    } else {
-      out.push(...renderEntityCells(ctx, p, bucket.first));
-    }
-  }
-  return out;
+var CSS = `
+.ice-dock { position: fixed; z-index: 99999; width: 420px; min-width: 340px; max-width: 92vw;
+  background: rgba(13,17,23,.96); border: 1px solid #30363d; border-radius: 10px;
+  color: #e6edf3; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+  box-shadow: 0 8px 28px rgba(0,0,0,.45); overflow: hidden; resize: horizontal; }
+.ice-dock * { box-sizing: border-box; }
+.ice-dock.collapsed { resize: none; }
+.ice-dock.dragging { opacity: .92; cursor: grabbing; }
+.ice-dock-head { display: flex; align-items: center; gap: 7px; padding: 7px 10px; cursor: grab;
+  background: rgba(22,27,34,.96); user-select: none; }
+.ice-dock-grip { color: #484f58; }
+.ice-dock-name { font-weight: 700; color: #56d4dd; }
+.ice-dock-btn { background: none; border: none; color: #8b949e; cursor: pointer; font: inherit;
+  padding: 2px 6px; margin-left: auto; }
+.ice-dock-btn:hover { color: #e6edf3; }
+.ice-dock-body { max-height: calc(100vh - 96px); overflow-y: auto; }
+.ice-dock.collapsed .ice-dock-body { display: none; }
+.ice-dock-slot { border-top: 1px solid #30363d; }
+.ice-dock-slot:empty { display: none; }
+
+/* De-window the hosted tools \u2014 the dock is the window now. */
+.ice-dock .strata-obs, .ice-dock .strata-prof, .ice-dock .ice-gl {
+  position: static !important; width: auto !important; min-width: 0 !important;
+  border: none !important; border-radius: 0 !important; box-shadow: none !important; }
+.ice-dock .strata-obs { resize: vertical !important; }
+.ice-dock .strata-obs-head { cursor: default; }
+.ice-dock .strata-prof-body, .ice-dock .ice-gl-body { min-width: 0; }
+`;
+function injectStyle(doc) {
+  if (doc.getElementById(STYLE_ID) !== null) return;
+  const el = doc.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = CSS;
+  doc.head.appendChild(el);
 }
-function renderEntityCells(ctx, p, e) {
-  const { doc, world, opts } = ctx;
-  const out = [];
-  out.push(row(doc, opts.keyOf ? `entity #${e}   key: ${String(opts.keyOf(e))}` : `entity #${e}`));
-  const durable = p.store === "durable";
-  for (const c of p.eligible) {
-    if (!world.has(e, c)) continue;
-    const name = schemaMeta.component(c)?.name ?? "(component)";
-    const r = row(doc, name);
-    if (durable && opts.cellInDoc?.(e, c) === true) r.appendChild(badge(doc, "doc", BADGE.doc));
-    else if (durable) r.appendChild(badge(doc, "doc?", BADGE.eligible));
-    else r.appendChild(badge(doc, "rt", BADGE.runtime));
-    r.dataset.row = "component";
-    out.push(r);
+function createDock(opts = {}) {
+  const container = opts.container ?? document.body;
+  const doc = container.ownerDocument;
+  const win = doc.defaultView ?? window;
+  injectStyle(doc);
+  const clampPos = (x, y, w2) => {
+    const maxX = win.innerWidth - KEEP;
+    const minX = Math.min(MARGIN, MARGIN - (w2 - KEEP));
+    const maxY = win.innerHeight - 34;
+    return { x: Math.min(Math.max(x, minX), maxX), y: Math.min(Math.max(y, MARGIN), maxY) };
+  };
+  const root = doc.createElement("div");
+  root.className = "ice-dock";
+  const head = doc.createElement("div");
+  head.className = "ice-dock-head";
+  const grip = doc.createElement("span");
+  grip.className = "ice-dock-grip";
+  grip.setAttribute("aria-hidden", "true");
+  grip.textContent = "\u283F";
+  const name = doc.createElement("span");
+  name.className = "ice-dock-name";
+  name.textContent = opts.title ?? "ice devtools";
+  const collapse = doc.createElement("button");
+  collapse.type = "button";
+  collapse.className = "ice-dock-btn";
+  collapse.title = "Collapse";
+  head.append(grip, name, collapse);
+  const body = doc.createElement("div");
+  body.className = "ice-dock-body";
+  const slots = /* @__PURE__ */ new Map();
+  for (const id of SLOT_ORDER) {
+    const s = doc.createElement("div");
+    s.className = "ice-dock-slot";
+    s.dataset.slot = id;
+    body.appendChild(s);
+    slots.set(id, s);
   }
-  return out;
+  root.append(head, body);
+  container.appendChild(root);
+  const l = loadLayout();
+  const w = typeof l.w === "number" ? l.w : opts.width ?? 420;
+  root.style.width = `${w}px`;
+  const corner = opts.corner ?? "tr";
+  const fx = corner === "tl" || corner === "bl" ? 16 : win.innerWidth - w - 16;
+  const fy = corner === "tl" || corner === "tr" ? 16 : win.innerHeight - 220;
+  const p = clampPos(l.x ?? fx, l.y ?? fy, w);
+  root.style.left = `${p.x}px`;
+  root.style.top = `${p.y}px`;
+  let open = l.open ?? true;
+  const applyOpen = () => {
+    root.classList.toggle("collapsed", !open);
+    collapse.textContent = open ? "\u25BE" : "\u25B8";
+  };
+  applyOpen();
+  collapse.addEventListener("click", () => {
+    open = !open;
+    saveLayout({ open });
+    applyOpen();
+  });
+  let drag = null;
+  head.addEventListener("pointerdown", (e) => {
+    if (e.target.closest("button") !== null) return;
+    const r = root.getBoundingClientRect();
+    drag = { id: e.pointerId, sx: e.clientX, sy: e.clientY, ox: r.left, oy: r.top };
+    if (typeof head.setPointerCapture === "function") {
+      try {
+        head.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    root.classList.add("dragging");
+    e.preventDefault();
+  });
+  head.addEventListener("pointermove", (e) => {
+    if (drag?.id !== e.pointerId) return;
+    const q = clampPos(drag.ox + (e.clientX - drag.sx), drag.oy + (e.clientY - drag.sy), root.offsetWidth);
+    root.style.left = `${q.x}px`;
+    root.style.top = `${q.y}px`;
+  });
+  const endDrag = (e) => {
+    if (drag?.id !== e.pointerId) return;
+    drag = null;
+    root.classList.remove("dragging");
+    const r = root.getBoundingClientRect();
+    saveLayout({ x: r.left, y: r.top });
+  };
+  head.addEventListener("pointerup", endDrag);
+  head.addEventListener("pointercancel", endDrag);
+  const onWinResize = () => {
+    const r = root.getBoundingClientRect();
+    const q = clampPos(r.left, r.top, root.offsetWidth);
+    root.style.left = `${q.x}px`;
+    root.style.top = `${q.y}px`;
+  };
+  win.addEventListener("resize", onWinResize);
+  const ro = new ResizeObserver(() => {
+    saveLayout({ w: root.offsetWidth });
+  });
+  ro.observe(root);
+  let disposed = false;
+  return {
+    el: root,
+    slot(id) {
+      return slots.get(id);
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      win.removeEventListener("resize", onWinResize);
+      ro.disconnect();
+      root.remove();
+    }
+  };
 }
-function storeColor(store) {
-  if (store === "durable") return BADGE.doc;
-  if (store === "runtime") return BADGE.eligible;
-  return BADGE.tag;
+
+// ../devtools/src/gl-panel.ts
+var STYLE_ID2 = "ice-gl-style";
+var CSS2 = `
+.ice-gl { position: fixed; z-index: 99998; background: rgba(13,17,23,.96);
+  border: 1px solid #30363d; border-radius: 10px; color: #e6edf3;
+  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  box-shadow: 0 6px 22px rgba(0,0,0,.45); user-select: none; }
+.ice-gl * { box-sizing: border-box; }
+.ice-gl.tl { top: 10px; left: 10px; } .ice-gl.tr { top: 10px; right: 10px; }
+.ice-gl.bl { bottom: 10px; left: 10px; } .ice-gl.br { bottom: 10px; right: 10px; }
+.ice-gl-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; }
+.ice-gl-name { font-weight: 700; color: #56d4dd; }
+.ice-gl-fps { font-weight: 700; color: #a371f7; min-width: 46px; }
+.ice-gl-gpu { color: #8b949e; min-width: 74px; }
+.ice-gl-caret { color: #8b949e; margin-left: auto; }
+.ice-gl-body { display: none; border-top: 1px solid #21262d; padding: 7px 9px 8px; min-width: 300px; }
+.ice-gl.open .ice-gl-body { display: block; }
+.ice-gl-sect { color: #8b949e; font-weight: 700; padding: 5px 0 2px; }
+.ice-gl-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; white-space: nowrap; }
+.ice-gl-name2 { min-width: 64px; color: #8b949e; }
+.ice-gl-bar { flex: 1; height: 5px; border-radius: 3px; background: #21262d; overflow: hidden; }
+.ice-gl-bar > i { display: block; height: 100%; background: #58a6ff; border-radius: 3px; }
+.ice-gl-stat { color: #e6edf3; margin-left: auto; }
+.ice-gl-dim { color: #8b949e; }
+.ice-gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 10px; padding: 2px 0; }
+.ice-gl-cell b { display: block; color: #e6edf3; font-weight: 700; }
+.ice-gl-cell span { color: #8b949e; }
+.ice-gl-seg { display: flex; height: 7px; border-radius: 3px; overflow: hidden; background: #21262d; margin: 3px 0 2px; }
+.ice-gl-seg > i { display: block; height: 100%; }
+.ice-gl-legend { color: #8b949e; padding-bottom: 2px; }
+`;
+var PHASE_COLORS = {
+  hot: "#ff7b72",
+  waking: "#58a6ff",
+  warm: "#3fb950",
+  cold: "#8b949e",
+  dormant: "#484f58"
+};
+var SPARK_W = 132;
+var SPARK_H = 26;
+var SPARK_SAMPLES = SPARK_W / 2;
+function injectStyle2(doc) {
+  if (doc.getElementById(STYLE_ID2) !== null) return;
+  const el = doc.createElement("style");
+  el.id = STYLE_ID2;
+  el.textContent = CSS2;
+  doc.head.appendChild(el);
 }
-function renderLoop({ doc, engine }) {
-  const frame = engine.lastFrame();
-  if (frame === void 0) {
-    return [heading(doc, "loop"), empty(doc, "no telemetry yet \u2014 arm it and step the engine")];
-  }
-  const out = [heading(doc, "loop")];
-  const ran = frame.systems.filter((s) => s.ran).length;
-  const total = frame.systems.length;
-  out.push(row(doc, `tick #${frame.tick}  ${fmt(frame.totalMicros)}\xB5s  ran ${ran}/${total}`));
-  out.push(heading(doc, "systems (by cost)"));
-  const sorted = [...frame.systems].sort((a, b) => b.micros - a.micros);
-  if (sorted.length === 0) out.push(empty(doc, "no systems registered"));
-  for (const s of sorted) {
-    const mark = s.ran ? "\u25CF" : "\u25CB";
-    const r = row(doc, `${mark} ${s.phase}/${s.system}  ${fmt(s.micros)}\xB5s`);
-    r.style.color = s.ran ? C.text : C.dim;
-    r.dataset.row = "system";
-    out.push(r);
-  }
-  if (frame.phaseFlushMicros.size > 0) {
-    out.push(heading(doc, "phase flush"));
-    for (const [phase, micros] of frame.phaseFlushMicros) {
-      const r = row(doc, `${phase}  ${fmt(micros)}\xB5s`);
-      r.dataset.row = "phase";
-      out.push(r);
+var fmtInt = (n) => n.toLocaleString();
+var fmtK = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(2)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
+var fmtMs = (ms) => `${ms.toFixed(2)}ms`;
+var fmtMB = (b) => `${(b / 1048576).toFixed(0)}MB`;
+function createGlPanel(opts = {}) {
+  const container = opts.container ?? document.body;
+  const doc = container.ownerDocument;
+  const budgetMs = opts.budgetMs ?? 16.7;
+  injectStyle2(doc);
+  const root = doc.createElement("div");
+  root.className = `ice-gl ${opts.corner ?? "bl"}${opts.expanded === true ? " open" : ""}`;
+  const head = doc.createElement("div");
+  head.className = "ice-gl-head";
+  const name = doc.createElement("span");
+  name.className = "ice-gl-name";
+  name.textContent = "ice gl";
+  const fpsEl = doc.createElement("span");
+  fpsEl.className = "ice-gl-fps";
+  const gpuEl = doc.createElement("span");
+  gpuEl.className = "ice-gl-gpu";
+  const spark = doc.createElement("canvas");
+  spark.width = SPARK_W;
+  spark.height = SPARK_H;
+  spark.style.display = "block";
+  const caret = doc.createElement("span");
+  caret.className = "ice-gl-caret";
+  caret.textContent = "\u25BE";
+  head.append(name, fpsEl, gpuEl, spark, caret);
+  head.addEventListener("click", () => root.classList.toggle("open"));
+  const body = doc.createElement("div");
+  body.className = "ice-gl-body";
+  root.append(head, body);
+  container.appendChild(root);
+  const sect = (label) => {
+    const s = doc.createElement("div");
+    s.className = "ice-gl-sect";
+    s.textContent = label;
+    body.appendChild(s);
+  };
+  const bar = (label) => {
+    const row = doc.createElement("div");
+    row.className = "ice-gl-row";
+    const n = doc.createElement("span");
+    n.className = "ice-gl-name2";
+    n.textContent = label;
+    const b = doc.createElement("div");
+    b.className = "ice-gl-bar";
+    const fill = doc.createElement("i");
+    b.appendChild(fill);
+    const stat = doc.createElement("span");
+    stat.className = "ice-gl-stat";
+    row.append(n, b, stat);
+    body.appendChild(row);
+    return { fill, stat };
+  };
+  const textRow = () => {
+    const row = doc.createElement("div");
+    row.className = "ice-gl-row";
+    body.appendChild(row);
+    return row;
+  };
+  sect("frame");
+  const cpuBar = bar("cpu");
+  const gpuBar = bar("gpu");
+  sect("render");
+  const grid = doc.createElement("div");
+  grid.className = "ice-gl-grid";
+  body.appendChild(grid);
+  const cell = (label) => {
+    const c = doc.createElement("div");
+    c.className = "ice-gl-cell";
+    const v = doc.createElement("b");
+    const l = doc.createElement("span");
+    l.textContent = label;
+    c.append(v, l);
+    grid.appendChild(c);
+    return v;
+  };
+  const callsEl = cell("calls");
+  const trisEl = cell("triangles");
+  const ptsEl = cell("pts+lines");
+  const progsEl = cell("programs");
+  const geosEl = cell("geometries");
+  const texsEl = cell("textures");
+  sect("virtual textures");
+  const rtRow = textRow();
+  const fboBar = bar("fbo mem");
+  const seg = doc.createElement("div");
+  seg.className = "ice-gl-seg";
+  body.appendChild(seg);
+  const legend = doc.createElement("div");
+  legend.className = "ice-gl-legend";
+  body.appendChild(legend);
+  const paintRow = textRow();
+  sect("lod");
+  const lodRow = textRow();
+  const bandsRow = textRow();
+  sect("widgets");
+  const cullBar = bar("visible");
+  const samples = [];
+  let latest;
+  let maxCpu = 0;
+  let maxGpu = 0;
+  let evictedTotal = 0;
+  let lastRender = 0;
+  let disposed = false;
+  const drawSpark = () => {
+    const ctx = spark.getContext("2d");
+    if (ctx === null) return;
+    ctx.clearRect(0, 0, SPARK_W, SPARK_H);
+    const top = budgetMs * 2;
+    for (let i = 0; i < samples.length; i++) {
+      const v = samples[i] ?? 0;
+      const h = Math.min(SPARK_H, v / top * SPARK_H);
+      ctx.fillStyle = v > budgetMs ? "#ff7b72" : "#3fb950";
+      ctx.fillRect(i * 2, SPARK_H - h, 1.6, h);
     }
-  }
-  return out;
+    ctx.fillStyle = "rgba(139,148,158,.55)";
+    ctx.fillRect(0, SPARK_H / 2, SPARK_W, 1);
+  };
+  const render = () => {
+    const s = latest;
+    if (s === void 0) return;
+    fpsEl.textContent = s.fps > 0 ? `${Math.round(s.fps)} fps` : "\u2013 fps";
+    gpuEl.textContent = s.gpuMs > 0 ? `gpu ${fmtMs(s.gpuMs)}` : "gpu \u2013";
+    drawSpark();
+    if (!root.classList.contains("open")) return;
+    cpuBar.fill.style.width = `${Math.min(100, s.cpuMs / budgetMs * 100)}%`;
+    cpuBar.stat.textContent = `${fmtMs(s.cpuMs)} \xB7 max ${fmtMs(maxCpu)}`;
+    gpuBar.fill.style.width = `${Math.min(100, s.gpuMs / budgetMs * 100)}%`;
+    gpuBar.fill.style.background = s.gpuMs > budgetMs ? "#ff7b72" : "#58a6ff";
+    gpuBar.stat.textContent = `${fmtMs(s.gpuMs)} \xB7 max ${fmtMs(maxGpu)}`;
+    callsEl.textContent = fmtInt(s.drawCalls);
+    trisEl.textContent = fmtK(s.triangles);
+    ptsEl.textContent = fmtK(s.points + s.lines);
+    progsEl.textContent = fmtInt(s.programs);
+    geosEl.textContent = fmtInt(s.geometries);
+    texsEl.textContent = fmtInt(s.textures);
+    rtRow.textContent = `${s.renderTargets} targets \xB7 ${s.renderMegaPixels.toFixed(1)} MP total`;
+    fboBar.fill.style.width = `${Math.min(100, s.fboBytes / s.fboBudgetBytes * 100)}%`;
+    fboBar.fill.style.background = s.fboBytes > s.fboBudgetBytes * 0.85 ? "#ffa657" : "#58a6ff";
+    fboBar.stat.textContent = `${fmtMB(s.fboBytes)} / ${fmtMB(s.fboBudgetBytes)}`;
+    seg.textContent = "";
+    const phases = [
+      ["hot", s.islands.hot],
+      ["waking", s.islands.waking],
+      ["warm", s.islands.warm],
+      ["cold", s.islands.cold],
+      ["dormant", s.islands.dormant]
+    ];
+    const denom = Math.max(1, s.islands.total);
+    const legendParts = [];
+    for (const [phase, count] of phases) {
+      if (count === 0) continue;
+      const i = doc.createElement("i");
+      i.style.width = `${count / denom * 100}%`;
+      i.style.background = PHASE_COLORS[phase] ?? "#8b949e";
+      seg.appendChild(i);
+      legendParts.push(`${count} ${phase}`);
+    }
+    legend.textContent = legendParts.length > 0 ? legendParts.join(" \xB7 ") : "no islands";
+    paintRow.textContent = `repainted ${s.repainted}/frame \xB7 pending ${s.pendingPaints} \xB7 evicted \u03A3${evictedTotal}`;
+    lodRow.textContent = `zoom ${(s.zoom * 100).toFixed(0)}% \u2192 band \xD7${s.band} \u2192 paint dpr ${s.effectiveDpr.toFixed(2)}`;
+    const bands = Object.entries(s.bandHistogram).sort((a, b) => a[0].localeCompare(b[0]));
+    bandsRow.textContent = bands.length > 0 ? `targets by band: ${bands.map(([k, v]) => `${k}: ${v}`).join(" \xB7 ")}` : "no live targets";
+    const pop = Math.max(1, s.visibleWidgets + s.culledWidgets);
+    cullBar.fill.style.width = `${s.visibleWidgets / pop * 100}%`;
+    cullBar.fill.style.background = "#3fb950";
+    cullBar.stat.textContent = `${s.visibleWidgets} visible \xB7 ${s.culledWidgets} culled`;
+  };
+  return {
+    push(s) {
+      if (disposed) return;
+      latest = s;
+      maxCpu = Math.max(maxCpu, s.cpuMs);
+      maxGpu = Math.max(maxGpu, s.gpuMs);
+      evictedTotal += s.evicted;
+      samples.push(s.gpuMs > 0 ? s.gpuMs : s.cpuMs);
+      if (samples.length > SPARK_SAMPLES) samples.splice(0, samples.length - SPARK_SAMPLES);
+      const now = performance.now();
+      if (now - lastRender >= 120) {
+        lastRender = now;
+        render();
+      }
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      root.remove();
+    }
+  };
 }
-var RENDERERS = {
-  pointers: renderPointers,
-  planes: renderPlanes,
-  sovereignty: renderSovereignty,
-  loop: renderLoop
+
+// ../devtools/src/attach.ts
+var COLOR = {
+  widget: "#3fb950",
+  gesture: "#a371f7",
+  pointer: "#58a6ff",
+  graph: "#ffa657",
+  presence: "#f778ba",
+  chrome: "#8b949e"
 };
-function fmt(n) {
-  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+var PHASE_ORDER = ["Active", "Possible", "Recognized", "Pending", "Ended", "Cancelled", "Failed"];
+function phaseOf(world, e) {
+  if (world.hasTag(e, GestureSuspended)) return "suspended";
+  for (const name of PHASE_ORDER) {
+    if (world.hasTag(e, GesturePhases.tags[name])) return name.toLowerCase();
+  }
+  return null;
+}
+function engineDescribe(world, e) {
+  const prefab = world.get(e, PrefabId)?.id;
+  if (typeof prefab === "string") return { label: prefab, color: COLOR.widget };
+  const kind = world.has(e, Tap) ? "tap" : world.has(e, LongPress) ? "longpress" : world.has(e, Pinch) ? "pinch" : world.has(e, WheelZoom) ? "wheelzoom" : world.has(e, WheelPan) ? "wheelpan" : world.has(e, Drag) ? "drag" : void 0;
+  if (kind !== void 0) return { label: kind, color: COLOR.gesture, phase: phaseOf(world, e) };
+  if (world.has(e, Pointer)) return { label: `pointer:${world.read(e, Pointer).device}`, color: COLOR.pointer };
+  if (world.has(e, Port)) return { label: "port", color: COLOR.graph };
+  if (world.hasTag(e, Wire)) return { label: "wire", color: COLOR.graph };
+  if (world.hasTag(e, PresencePeer)) return { label: "peer", color: COLOR.presence };
+  if (world.has(e, CursorVisual)) return { label: "cursor", color: COLOR.presence };
+  if (world.has(e, HandleSpec)) return { label: "handle", color: COLOR.chrome };
+  return defaultDescribe(world, e);
 }
 function attachDevtools(engine, opts = {}) {
-  const world = engine.world;
-  const container = opts.container ?? document.body;
-  const doc = container.ownerDocument ?? document;
-  if (opts.telemetry !== false) engine.enableTelemetry();
-  const state = {
-    active: "pointers",
-    collapsed: false,
-    selectedPrefab: null,
-    seenReflectors: /* @__PURE__ */ new Set()
+  const isFacade = "docs" in engine;
+  const core = isFacade ? engine.engine : engine;
+  const world = core.world;
+  const docs = isFacade ? engine.docs : void 0;
+  const durable = docs === void 0 ? void 0 : () => {
+    const s = docs.current();
+    if (s === void 0) return null;
+    return {
+      store: s.store,
+      attachment: s.attachment
+    };
   };
-  let detached = false;
-  const root = el(doc, "div", {
-    position: "fixed",
-    right: "12px",
-    bottom: "12px",
-    width: "360px",
-    maxHeight: "70vh",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    background: C.bg,
-    color: C.text,
-    font: "11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
-    border: `1px solid ${C.border}`,
-    borderRadius: "6px",
-    boxShadow: "0 6px 24px rgba(0,0,0,0.4)",
-    zIndex: "2147483000"
-  });
-  root.dataset.iceDevtools = "";
-  const header = el(doc, "div", {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "4px 8px",
-    background: C.head,
-    borderBottom: `1px solid ${C.border}`,
-    cursor: "default",
-    userSelect: "none"
-  });
-  header.appendChild(el(doc, "span", { color: C.accent, fontWeight: "600" }, "ice devtools"));
-  const collapseBtn = el(doc, "button", {
-    background: "transparent",
-    border: "none",
-    color: C.text,
-    cursor: "pointer",
-    font: "inherit",
-    padding: "0 4px"
-  }, "\u25BE");
-  collapseBtn.dataset.collapse = "";
-  header.appendChild(collapseBtn);
-  root.appendChild(header);
-  const tabBar = el(doc, "div", {
-    display: "flex",
-    borderBottom: `1px solid ${C.border}`,
-    background: C.panel
-  });
-  const tabButtons = /* @__PURE__ */ new Map();
-  for (const id of TABS) {
-    const btn = el(doc, "button", {
-      flex: "1",
-      padding: "4px 2px",
-      background: "transparent",
-      border: "none",
-      borderRight: `1px solid ${C.border}`,
-      color: C.dim,
-      cursor: "pointer",
-      font: "inherit",
-      fontSize: "9px",
-      letterSpacing: "0.04em"
-    }, TAB_LABELS[id]);
-    btn.dataset.tab = id;
-    btn.addEventListener("click", () => {
-      state.active = id;
-      render();
-    });
-    tabButtons.set(id, btn);
-    tabBar.appendChild(btn);
-  }
-  root.appendChild(tabBar);
-  const content = el(doc, "div", { flex: "1", overflowY: "auto", overflowX: "hidden" });
-  root.appendChild(content);
-  content.addEventListener("click", (ev) => {
-    const target = ev.target;
-    const prefabRow = target?.closest("[data-prefab]");
-    if (prefabRow?.dataset.prefab) {
-      state.selectedPrefab = prefabRow.dataset.prefab;
-      render();
+  const presence = opts.presence;
+  const ephemeral = presence === void 0 ? void 0 : () => presence()?.eph ?? null;
+  let dock = null;
+  const mountIn = (id) => {
+    if (opts.dock === false) return opts.container !== void 0 ? { container: opts.container } : {};
+    if (dock === null) {
+      dock = createDock({
+        ...typeof opts.dock === "object" ? opts.dock : {},
+        ...opts.container !== void 0 ? { container: opts.container } : {}
+      });
     }
+    return { container: dock.slot(id) };
+  };
+  const observer = opts.observer === false ? null : attachObserver(world, {
+    ...typeof opts.observer === "object" ? opts.observer : {},
+    ...mountIn("observer"),
+    describe: opts.describe ?? engineDescribe,
+    ...durable !== void 0 ? { durable } : {},
+    ...ephemeral !== void 0 ? { ephemeral } : {}
   });
-  collapseBtn.addEventListener("click", () => {
-    state.collapsed = !state.collapsed;
-    render();
+  const profiler = opts.profiler === false ? null : attachProfiler(world, {
+    ...typeof opts.profiler === "object" ? opts.profiler : {},
+    ...mountIn("profiler")
   });
-  const ctx = { doc, world, engine, opts, state };
-  function render() {
-    if (detached) return;
-    for (const [id, btn] of tabButtons) {
-      const on = id === state.active && !state.collapsed;
-      btn.style.color = on ? C.text : C.dim;
-      btn.style.background = on ? C.bg : "transparent";
-    }
-    collapseBtn.textContent = state.collapsed ? "\u25B8" : "\u25BE";
-    if (state.collapsed) {
-      tabBar.style.display = "none";
-      content.style.display = "none";
-      return;
-    }
-    tabBar.style.display = "flex";
-    content.style.display = "block";
-    content.replaceChildren(...RENDERERS[state.active](ctx));
+  let removePublish;
+  if (profiler !== null) {
+    core.enableTelemetry();
+    removePublish = core.onPublish(() => {
+      const us = core.lastFrame()?.phaseFlushMicros.get("reflect");
+      if (us !== void 0 && us > 0) profiler.lane("reflect", us / 1e3);
+    });
   }
-  container.appendChild(root);
-  render();
-  const timer = setInterval(render, opts.intervalMs ?? 250);
+  let glPanel = null;
+  let detached = false;
   return {
+    observer,
+    profiler,
+    lane(name, ms) {
+      profiler?.lane(name, ms);
+    },
+    glStats(stats) {
+      if (detached || opts.glPanel === false) return;
+      if (glPanel === null) {
+        glPanel = createGlPanel({
+          ...typeof opts.glPanel === "object" ? opts.glPanel : {},
+          ...mountIn("gl")
+        });
+      }
+      glPanel.push(stats);
+    },
     detach() {
       if (detached) return;
       detached = true;
-      clearInterval(timer);
-      root.remove();
+      removePublish?.();
+      observer?.dispose();
+      profiler?.dispose();
+      glPanel?.dispose();
+      glPanel = null;
+      dock?.dispose();
+      dock = null;
     }
   };
 }
 
 // ../devtools/src/index.ts
-var DEVTOOLS_VERSION = "0.0.0";
+var DEVTOOLS_VERSION = "0.1.0";
 export {
   DEVTOOLS_VERSION,
-  attachDevtools
+  attachDevtools,
+  createDock,
+  createGlPanel,
+  engineDescribe
 };
 //# sourceMappingURL=devtools.js.map