@gramlot/gramlot-examples 0.2.11 → 0.2.14

package/src/gramlot_examples/gallery/dist/inspector.js

@@ -0,0 +1,1801 @@
+(() => {
+  // inspector-runtime:runtime
+  var Gramlot = window.gramlot.constructor;
+  var Bag = window.gramlot.data.constructor;
+  var GramlotBuilder = window.gramlot.src.builder.constructor;
+
+  // node_modules/@gramlot/gramlot/tools/gramlot-tools-inspector.js
+  var editorTypes = ["string", "number", "integer", "boolean", "date", "time", "datetime", "null"];
+  function scalarType(value) {
+    if (value === null) return "null";
+    if (["string", "boolean"].includes(typeof value)) return typeof value;
+    if (typeof value === "number" && Number.isFinite(value)) return Number.isSafeInteger(value) ? "integer" : "number";
+    if (value instanceof Date && Number.isFinite(value.getTime())) {
+      const iso = value.toISOString();
+      return iso.slice(0, 10) === "1970-01-01" ? "time" : iso.endsWith("T00:00:00.000Z") ? "date" : "datetime";
+    }
+    return null;
+  }
+  function scalarText(value, type) {
+    if (type === "null") return "";
+    if (value instanceof Date) {
+      const iso = value.toISOString();
+      return type === "date" ? iso.slice(0, 10) : type === "time" ? iso.slice(11, 23) : iso;
+    }
+    return String(value);
+  }
+  function parseScalar(type, text) {
+    if (type === "string") return text;
+    if (type === "null") return null;
+    if (type === "boolean" && ["true", "false"].includes(text)) return text === "true";
+    if (type === "number" || type === "integer") {
+      if (/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(text.trim())) {
+        const value = Number(text);
+        if (Number.isFinite(value) && (type !== "integer" || Number.isSafeInteger(value))) return value;
+      }
+    }
+    if (["date", "time", "datetime"].includes(type)) {
+      const pattern = type === "date" ? /^\d{4}-\d{2}-\d{2}$/ : type === "time" ? /^\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?$/ : /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?Z$/;
+      if (pattern.test(text)) {
+        const input = type === "date" ? `${text}T00:00:00Z` : type === "time" ? `1970-01-01T${text}Z` : text;
+        const date = new Date(input);
+        if (Number.isFinite(date.getTime())) {
+          const iso = date.toISOString();
+          const supplied = input.replace(/Z$/, "").split(/[T:.]/);
+          const actual = iso.replace(/Z$/, "").split(/[T:.]/);
+          if (supplied.every((part, index) => index === 4 ? Number(part.padEnd(3, "0")) === Number(actual[index]) : part === actual[index])) return date;
+        }
+      }
+    }
+    throw new Error(`Invalid ${type} value: ${text || "(empty)"}`);
+  }
+  var InspectorStyles = class {
+    #document;
+    #element = null;
+    #rule = null;
+    constructor(document2) {
+      this.#document = document2;
+    }
+    snapshot() {
+      const computed = this.#document.defaultView.getComputedStyle(this.#document.documentElement);
+      const names = /* @__PURE__ */ new Set();
+      for (let index = 0; index < computed.length; index++) {
+        const name = computed.item(index);
+        if (name.startsWith("--gramlot-")) names.add(name);
+      }
+      for (let index = 0; index < (this.#rule?.style.length ?? 0); index++) names.add(this.#rule.style.item(index));
+      return [...names].sort((left, right) => left.localeCompare(right, "en", { numeric: true })).map((name) => ({
+        name,
+        value: computed.getPropertyValue(name).trim(),
+        override: this.#rule?.style.getPropertyValue(name) ?? ""
+      }));
+    }
+    set(name, value) {
+      if (typeof name !== "string" || !this.snapshot().some((row) => row.name === name)) {
+        throw new Error("Choose an existing --gramlot-* variable on the document root");
+      }
+      if (typeof value !== "string" || !value.trim() || !this.#document.defaultView.CSS.supports(name, value)) {
+        throw new Error("Enter a valid CSS variable value");
+      }
+      if (!this.#element) {
+        const element = this.#document.createElement("style");
+        this.#document.head.append(element);
+        if (!element.sheet) {
+          element.remove();
+          throw new Error("The page does not allow the inspector preview stylesheet");
+        }
+        element.sheet.insertRule(":root {}", 0);
+        this.#element = element;
+        this.#rule = element.sheet.cssRules[0];
+      }
+      this.#rule.style.setProperty(name, value, "important");
+    }
+    reset(name) {
+      if (typeof name !== "string" || !name.startsWith("--gramlot-")) throw new Error("Invalid CSS variable name");
+      this.#rule?.style.removeProperty(name);
+      if (this.#rule?.style.length === 0) this.dispose();
+    }
+    dispose() {
+      this.#element?.remove();
+      this.#element = null;
+      this.#rule = null;
+    }
+  };
+  var roots = ["data", "source"];
+  var forbidden = /* @__PURE__ */ new Set(["_meta", "__proto__", "prototype", "constructor"]);
+  function attachInspectorAgent(gramlot, port) {
+    if (!gramlot || gramlot.state === "disposed") throw new TypeError("Expected a live Gramlot instance");
+    const Bag4 = gramlot.data.constructor;
+    const encodeScalar2 = (value) => {
+      const wrapper = new Bag4();
+      wrapper.setItem("value", value);
+      return wrapper.toTytx("json");
+    };
+    const decodeScalar2 = (text) => {
+      const value = Bag4.fromTytx(text, "json").getItem("value");
+      if (!scalarType(value)) throw new TypeError("The inspector edits scalar values only");
+      return value;
+    };
+    function cell(value) {
+      if (scalarType(value)) return { encoded: encodeScalar2(value) };
+      const display = value instanceof Bag4 ? `Bag (${value.getNodes().length} nodes)` : value === void 0 ? "undefined" : typeof value === "function" ? "[Function]" : typeof value === "bigint" || typeof value === "symbol" ? String(value) : JSON.stringify(value);
+      return { display, readonly: true };
+    }
+    const document2 = gramlot.src.renderer.destination.ownerDocument;
+    const window2 = document2.defaultView;
+    const styles = new InspectorStyles(document2);
+    const subscriber = `inspector-bridge-${window2.crypto.getRandomValues(new Uint32Array(4)).join("-")}`;
+    const identities = /* @__PURE__ */ new WeakMap();
+    const versions = /* @__PURE__ */ new WeakMap();
+    let nextNode = 0, stopped = false, scheduled = false;
+    const breakpoints = /* @__PURE__ */ new Map();
+    const bag = (root) => {
+      if (!roots.includes(root)) throw new Error(`Unknown root: ${root}`);
+      return root === "data" ? gramlot.data : gramlot.src.source;
+    };
+    const identity = (node) => {
+      if (!identities.has(node)) identities.set(node, ++nextNode);
+      return identities.get(node);
+    };
+    const describe = (store, ancestors = /* @__PURE__ */ new Set()) => {
+      if (ancestors.has(store)) throw new Error("Inspector snapshots require an acyclic Bag");
+      const next = /* @__PURE__ */ new Set([...ancestors, store]);
+      return store.getNodes().map((node) => {
+        const value = node.getValue(true);
+        const branch = !node.resolver && value instanceof Bag4;
+        return {
+          id: identity(node),
+          label: node.label,
+          revision: versions.get(node) ?? 0,
+          value: branch ? null : cell(value),
+          children: branch ? describe(value, next) : null,
+          readonly: !!node.resolver,
+          attrs: Object.entries(node.getAttr()).filter(([name]) => name !== "_meta").map(([name, value2]) => [name, cell(value2)])
+        };
+      });
+    };
+    const snapshot = () => ({
+      data: describe(bag("data")),
+      source: describe(bag("source")),
+      breakpoints: [...breakpoints.values()].map(({ test, ...record }) => record)
+    });
+    const send = (data) => {
+      if (!stopped) port.postMessage(data);
+    };
+    const flush = () => {
+      if (scheduled || stopped) return;
+      scheduled = true;
+      queueMicrotask(() => {
+        scheduled = false;
+        if (stopped) return;
+        try {
+          send({ type: "snapshot", snapshot: snapshot() });
+        } catch (error) {
+          send({ type: "error", error: error.message });
+        }
+      });
+    };
+    const hit = (config, root, fields) => {
+      config.hits++;
+      if (config.mode === "debugger") {
+        debugger;
+      } else window2.console.log("** Gramlot breakpoint **", root, fields);
+    };
+    const changed = (root, event) => {
+      const structural = event.evt === "ins" || event.evt === "del";
+      const labels = event.pathlist === null ? [] : event.pathlist;
+      for (const node of Array.isArray(event.node) ? event.node : [event.node]) {
+        versions.set(node, (versions.get(node) ?? 0) + 1);
+        const path = (structural ? [...labels, node.label] : labels).join(".");
+        const config = breakpoints.get(`${root}:${path}`);
+        if (!config) continue;
+        const fields = {
+          evt: event.evt,
+          node,
+          value: node.getValue(true),
+          oldvalue: event.oldvalue,
+          attrs_diff: event.attrs_diff,
+          reason: event.reason,
+          path
+        };
+        if (config.test) {
+          try {
+            if (!config.test(fields.evt, node, fields.value, fields.oldvalue, fields.attrs_diff, fields.reason, path)) continue;
+            config.error = "";
+          } catch (error) {
+            config.error = error.message;
+            continue;
+          }
+        }
+        hit(config, root, fields);
+      }
+      flush();
+    };
+    const edit = (command) => {
+      const node = bag(command.root).getNode(command.path);
+      if (!node || identity(node) !== command.nodeId || (versions.get(node) ?? 0) !== command.revision) {
+        throw new Error("Node changed or was removed. Press Escape to reload before saving.");
+      }
+      const attrs = { ...node.getAttr() };
+      for (const name of command.remove) {
+        if (forbidden.has(name) || !Object.hasOwn(attrs, name) || !scalarType(attrs[name])) throw new Error(`Cannot remove attribute: ${name}`);
+        delete attrs[name];
+      }
+      for (const [name, encoded] of command.set) {
+        if (!name.trim() || forbidden.has(name) || Object.hasOwn(attrs, name) && !scalarType(attrs[name])) throw new Error(`Cannot edit attribute: ${name}`);
+        attrs[name] = decodeScalar2(encoded);
+      }
+      let value;
+      if (Object.hasOwn(command, "value")) {
+        if (node.resolver || !scalarType(node.getValue(true))) throw new Error("This value is read-only");
+        value = decodeScalar2(command.value);
+      }
+      if (command.set.length || command.remove.length) node.setAttr(attrs, true, false, false);
+      if (Object.hasOwn(command, "value")) node.setValue(value);
+    };
+    const setBreakpoint = (command) => {
+      bag(command.root);
+      if (typeof command.path !== "string" || !command.path || !["", "console", "debugger"].includes(command.mode)) throw new Error("Invalid breakpoint");
+      const condition = command.condition.trim();
+      const test = command.mode && condition ? new window2.Function("evt", "node", "value", "oldvalue", "attrs_diff", "reason", "path", `"use strict"; return (${condition});`) : null;
+      const key = `${command.root}:${command.path}`;
+      if (command.mode) breakpoints.set(key, { root: command.root, path: command.path, mode: command.mode, condition, hits: 0, error: "", test });
+      else breakpoints.delete(key);
+    };
+    const receive = (event) => {
+      const message = event.data;
+      if (message.type === "disconnect") {
+        dispose();
+        return;
+      }
+      try {
+        if (["styles", "setStyle", "resetStyle", "resetStyles"].includes(message.type)) {
+          if (gramlot.state === "disposed") throw new Error("Inspected page disconnected");
+          if (message.type === "setStyle") styles.set(message.command.name, message.command.value);
+          if (message.type === "resetStyle") styles.reset(message.command.name);
+          if (message.type === "resetStyles") styles.dispose();
+          send({ type: "result", id: message.id, ok: true, styles: styles.snapshot() });
+          return;
+        }
+        if (message.type === "edit") edit(message.command);
+        else if (message.type === "breakpoint") setBreakpoint(message.command);
+        else if (message.type !== "refresh") throw new Error(`Unknown inspector command: ${message.type}`);
+        send({ type: "result", id: message.id, ok: true, snapshot: snapshot() });
+      } catch (error) {
+        send({ type: "result", id: message.id, ok: false, error: error.message });
+      }
+    };
+    function dispose() {
+      if (stopped) return;
+      send({ type: "closed" });
+      stopped = true;
+      for (const root of roots) bag(root).unsubscribe(subscriber, { any: true });
+      breakpoints.clear();
+      styles.dispose();
+      port.removeEventListener("message", receive);
+      window2.removeEventListener("pagehide", dispose);
+      port.close();
+    }
+    for (const root of roots) bag(root).subscribe(subscriber, { any: (event) => changed(root, event) });
+    port.addEventListener("message", receive);
+    window2.addEventListener("pagehide", dispose);
+    port.start();
+    flush();
+    return { dispose };
+  }
+  var roots2 = ["data", "source"];
+  function encodeScalar(value) {
+    if (!scalarType(value)) throw new TypeError("The inspector edits scalar values only");
+    const wrapper = new Bag();
+    wrapper.setItem("value", value);
+    return wrapper.toTytx("json");
+  }
+  function decodeScalar(text) {
+    const value = Bag.fromTytx(text, "json").getItem("value");
+    if (!scalarType(value)) throw new TypeError("The inspector edits scalar values only");
+    return value;
+  }
+  var InspectorConnection = class {
+    data = new Bag();
+    source = new Bag();
+    state = "connecting";
+    error = "";
+    breakpoints = [];
+    styles = null;
+    #info = /* @__PURE__ */ new WeakMap();
+    #listeners = /* @__PURE__ */ new Set();
+    #pending = /* @__PURE__ */ new Map();
+    #next = 0;
+    #port;
+    constructor(port) {
+      this.#port = port;
+      port.addEventListener("message", this.#receive);
+      port.start();
+    }
+    nodeInfo(node) {
+      return this.#info.get(node);
+    }
+    subscribe(callback) {
+      this.#listeners.add(callback);
+      return () => this.#listeners.delete(callback);
+    }
+    #notify() {
+      for (const callback of this.#listeners) callback();
+    }
+    #receive = (event) => {
+      const message = event.data;
+      if (message.type === "closed") {
+        this.close();
+        return;
+      }
+      try {
+        if (message.styles) this.styles = message.styles;
+        if (message.snapshot) {
+          for (const root of roots2) this.#reconcile(this[root], message.snapshot[root]);
+          this.breakpoints = message.snapshot.breakpoints;
+          this.state = "started";
+          this.error = "";
+        } else if (message.type === "error") this.error = message.error;
+      } catch (error) {
+        this.error = error.message;
+      }
+      if (message.type === "result") {
+        const pending = this.#pending.get(message.id);
+        if (pending) {
+          this.#pending.delete(message.id);
+          if (message.ok && !this.error) pending.resolve();
+          else pending.reject(new Error(message.error || this.error));
+        }
+      }
+      this.#notify();
+    };
+    #reconcile(store, rows) {
+      const labels = new Set(rows.map((row) => row.label));
+      for (const node of store.getNodes()) if (!labels.has(node.label)) store.popNode(node.label);
+      for (const [index, row] of rows.entries()) {
+        let node = store.getNode(row.label);
+        let previous = node ? this.#info.get(node) : null;
+        if (node && previous?.id !== row.id) {
+          store.popNode(row.label);
+          node = null;
+          previous = null;
+        }
+        const branch = row.children !== null;
+        const read = (descriptor) => descriptor.readonly ? descriptor.display : decodeScalar(descriptor.encoded);
+        const value = branch ? previous?.branch ? node.getValue(true) : new Bag() : previous?.valueWire === JSON.stringify(row.value) ? node.getValue(true) : read(row.value);
+        const attrs = {};
+        for (const [name, descriptor] of row.attrs) {
+          attrs[name] = previous?.attrsWire.get(name) === JSON.stringify(descriptor) ? node.getAttr(name) : read(descriptor);
+        }
+        if (!node) node = store.setItem(row.label, value, null, ">", false, false);
+        else if (!Object.is(node.getValue(true), value)) node.setValue(value);
+        if (!previous || previous.attrsWire.size !== row.attrs.length || row.attrs.some(([name, descriptor]) => previous.attrsWire.get(name) !== JSON.stringify(descriptor))) {
+          node.setAttr(attrs, true, false, false);
+        }
+        this.#info.set(node, {
+          id: row.id,
+          revision: row.revision,
+          branch,
+          readonly: row.readonly || !!row.value?.readonly,
+          readonlyAttrs: new Set(row.attrs.filter(([, descriptor]) => descriptor.readonly).map(([name]) => name)),
+          valueWire: JSON.stringify(row.value),
+          attrsWire: new Map(row.attrs.map(([name, descriptor]) => [name, JSON.stringify(descriptor)]))
+        });
+        if (branch) this.#reconcile(value, row.children);
+        const position = store.getNodes().indexOf(node);
+        if (position !== index) store.move(position, index);
+      }
+    }
+    request(type, command = {}) {
+      if (this.state === "disposed") return Promise.reject(new Error("Inspected page disconnected"));
+      const id = ++this.#next;
+      return new Promise((resolve, reject) => {
+        this.#pending.set(id, { resolve, reject });
+        this.#port.postMessage({ type, command, id });
+      });
+    }
+    close() {
+      if (this.state === "disposed") return;
+      this.#port.postMessage({ type: "disconnect" });
+      this.#port.removeEventListener("message", this.#receive);
+      this.#port.close();
+      this.state = "disposed";
+      for (const pending of this.#pending.values()) pending.reject(new Error("Inspected page disconnected"));
+      this.#pending.clear();
+      this.#notify();
+    }
+  };
+  var gramlot_tools_inspector_default = ":host { all: initial; color-scheme: light; font: 12px/1.4 system-ui, sans-serif; color: #38414b; }\n* { box-sizing: border-box; }\nbutton, input, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\nbutton:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid #3574cb; outline-offset: -1px; }\n.tree { padding: 7px 3px; }\n.properties { background: white; }\n.properties-heading { font-size: 11px; display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 0 8px; background: #f1f3f5; color: #6d7989; border-bottom: 1px solid #d1d7df; }\n.properties-heading button { background: white; border: 1px solid #c5cdda; border-radius: 2px; width: 23px; height: 23px; padding: 0; font-size: 18px; line-height: 20px; }\nfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }\n.property-row { display: grid; grid-template-columns: minmax(95px, 30%) minmax(0, 1fr); min-height: 20px; border-bottom: 1px solid #d1d7df; font-size: 11px; }\n.property-name { display: flex; align-items: center; justify-content: flex-end; background: #888; color: white; font-weight: 700; padding: 1px 6px; border-right: 1px solid #d1d7df; overflow-wrap: anywhere; text-align: right; }\n.property-value { display: flex; align-items: center; min-width: 0; }\n.property-row input { border: 0; border-radius: 0; min-width: 0; width: 100%; height: 19px; padding: 1px 5px; background: transparent; }\n.property-name input { color: white; text-align: right; padding: 0; }\n.property-value input { flex: 1; }\n.property-value input[type=checkbox] { flex: none; width: 14px; height: 14px; margin: 2px 6px; }\n.property-value select { max-width: 82px; height: 20px; padding: 0; border: 0; border-left: 1px solid #d1d7df; background: #f1f3f5; font-size: 10px; }\n.remove { margin-left: auto; flex: none; width: 22px; height: 20px; padding: 3px; border: 0; background: transparent; color: #7c8797; opacity: 0; }\n.remove svg { width: 13px; height: 13px; }\n.property-row:hover .remove, .property-row:focus-within .remove { opacity: 1; }\n.remove:hover { color: #b82323; background: #fbe9e9; }\n:disabled { cursor: default; opacity: .65; }\n.path { flex: none; padding: 5px 9px; border-top: 1px solid #c9cfd6; background: #f5f7f9; color: #697687; font-size: 11px; min-height: 27px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status, .breakpoint-line { font-size: 11px; margin: 0; padding: 3px 8px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status { color: #a12121; }\n.breakpoint-line { background: #fff2ed; color: #854127; border-bottom: 1px solid #d1d7df; }\n.error:empty, .edit-status:empty, .breakpoint-status:empty, .breakpoint-line:empty { display: none; }\n.breakpoint-dialog { width: min(340px, 90vw); color: #38414b; border: 1px solid #bbc3cf; border-radius: 4px; padding: 12px; box-shadow: 0 8px 28px #0003; font: 12px/1.4 system-ui, sans-serif; }\n.breakpoint-dialog::backdrop { background: #0002; }\n.breakpoint-dialog h2 { font-size: 13px; margin: 0 0 10px; overflow-wrap: anywhere; }\n.breakpoint-dialog select, .breakpoint-dialog input { width: 100%; border: 1px solid #bbc3cf; padding: 4px; margin: 0 0 7px; background: white; }\n.dialog-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 7px; }\n.dialog-actions button { padding: 3px 10px; border: 1px solid #bbc3cf; border-radius: 3px; background: #f1f3f5; }\n.heading-label { flex: 1; }\n.properties-heading .breakpoint-count { width: auto; padding: 0 5px; margin-right: 5px; font-size: 11px; color: #b04a35; }\n.breakpoint-entry { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #d1d7df; }\n.breakpoint-entry span { flex: 1; overflow-wrap: anywhere; }\n.breakpoint-entry button { background: transparent; border: 0; font-size: 17px; }\n[hidden] { display: none !important; }\n.targetbar { flex: none; height: 28px; padding: 2px 6px; background: #edf2fa; border-bottom: 1px solid #dadce0; }\n.targetbar select { width: 100%; height: 23px; border: 0; background: transparent; font-size: 11px; }\n.styles-panel { flex: 1; min-height: 0; overflow: auto; background: #fff; font-size: 11px; }\n.styles-toolbar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: #f1f3f5; border-bottom: 1px solid #d1d7df; }\n.styles-toolbar span { flex: 1; font-weight: 600; }\n.styles-toolbar button, .styles-toolbar a { padding: 3px 7px; border: 1px solid #c5cdda; border-radius: 3px; background: white; }\n.styles-toolbar a { color: inherit; text-decoration: none; }\n.styles-toolbar a[aria-disabled=true] { cursor: default; opacity: .65; }\n.styles-toolbar a:focus-visible { outline: 1px solid #3574cb; outline-offset: -1px; }\n.styles-help, .styles-empty, .styles-status { margin: 0; padding: 7px 9px; color: #697687; }\n.styles-status { color: #a12121; }\n.styles-status:empty { display: none; }\n.styles-group h3 { margin: 0; padding: 6px 9px; font-size: 11px; background: #edf2fa; border-block: 1px solid #d1d7df; }\n.style-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 25px 23px; align-items: center; gap: 8px; min-width: 0; padding: 3px 9px; border-bottom: 1px solid #e8ebef; }\n.style-row label { min-width: 0; font: 11px/1.4 ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.style-row input { min-width: 0; width: 100%; height: 23px; padding: 2px 5px; border: 1px solid #c5cdda; border-radius: 3px; background: white; }\n.style-row input[type=color] { width: 25px; padding: 1px; cursor: pointer; }\n.style-row button { grid-column: 4; width: 23px; height: 23px; padding: 0; border: 1px solid #c5cdda; border-radius: 3px; background: #f5f7f9; font-size: 15px; }\n\n:host([embedded]) { display: block; height: 100%; min-height: 0; }\n:host([embedded]) > div { height: 100%; }\n.embedded-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }\n";
+  var gramlot_poc_tree_default = "/* Copyright 2025-2026 Softwell S.r.l. - SPDX-License-Identifier: Apache-2.0\n * Inspector subset of the DevTools storeTree stylesheet and inspector.css variables. */\n:host { display:block; font:11px/18px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#38414b; }\n:host([hidden]) { display:none; }\nul { list-style:none; margin:0; padding-left:17px; }\n.tree-root { padding-left:16px; }\n.tree-root > ul { padding-left:2px; }\nsummary, .leaf { position:relative; }\nli { line-height:18px; }\nsummary { display:flex; align-items:center; gap:7px; padding:0 5px; cursor:pointer; user-select:none; list-style:none; }\nsummary::-webkit-details-marker { display:none; }\nsummary::before { content:''; width:5px; height:5px; border-right:1.5px solid #78818a; border-bottom:1.5px solid #78818a; transform:rotate(-45deg); flex:none; margin:0 3px; }\ndetails[open] > summary::before { transform:rotate(45deg); }\n.leaf { display:flex; align-items:center; gap:7px; padding:0 5px 0 23px; cursor:pointer; }\nsummary:hover,.leaf:hover { background:#f0f3f6; }\n.selected,.selected:hover { background:transparent; color:#315dbd; font-weight:700; border-radius:2px; }\n.caption { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n/* Reserve a left gutter; showing an action must not shift the node label. */\n.actions { position:absolute; left:-14px; top:0; display:inline-flex; opacity:0; pointer-events:none; }\nsummary:hover > .actions,.leaf:hover > .actions,summary:focus-visible > .actions,.leaf:focus-visible > .actions,\n.actions:has(button:focus-visible),.actions:has(button.active) { opacity:1; pointer-events:auto; }\n.actions button { border:0; background:transparent; color:#80868b; font:inherit; font-size:11px; line-height:18px; width:14px; height:18px; padding:0; cursor:pointer; border-radius:3px; }\n.actions button:hover { background:#e1e5ed; }\n.actions button[data-action=breakpoint] { font-size:0; }\n.actions button[data-action=breakpoint]::before { content:''; display:inline-block; box-sizing:border-box; width:8px; height:8px; border:1.5px solid currentColor; border-radius:50%; vertical-align:middle; }\n.actions button.active { color:#b3261e; }\n.actions button.active.conditional { color:#f9ab00; }\n.actions button.active[data-action=breakpoint]::before { background:currentColor; }\n.actions button:focus-visible,summary:focus-visible,.leaf:focus-visible { outline:2px solid #356f9f; outline-offset:-2px; }\n";
+  var sequence = 0;
+  var GramlotPocTree = class extends HTMLElement {
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = gramlot_poc_tree_default;
+      this._root = this.ownerDocument.createElement("div");
+      this._root.className = "tree-root";
+      shadow.append(style, this._root);
+      this._store = null;
+      this._selectedPath = null;
+      this._expanded = /* @__PURE__ */ new Set();
+      this._nodes = /* @__PURE__ */ new Map();
+      this._rowActions = [];
+      this._pendingRender = null;
+      this._subId = `gramlot-poc-tree-${++sequence}`;
+    }
+    get storeBag() {
+      return this._store;
+    }
+    set storeBag(bag) {
+      if (bag !== null && !(bag instanceof Bag)) throw new TypeError("storeBag requires a Bag or null");
+      if (bag === this._store) return;
+      if (this.isConnected && this._store) this._store.unsubscribe(this._subId, { any: true });
+      this._store = bag;
+      this._selectedPath = null;
+      this._expanded.clear();
+      this._root.replaceChildren();
+      if (this.isConnected) {
+        this._subscribe();
+        this._render();
+      }
+    }
+    get selectedPath() {
+      return this._selectedPath;
+    }
+    set selectedPath(path) {
+      if (path !== null && typeof path !== "string") throw new TypeError("selectedPath requires a string or null");
+      this._selectedPath = path;
+      if (this.isConnected) this._markSelection();
+    }
+    get rowActions() {
+      return this._rowActions;
+    }
+    set rowActions(actions) {
+      if (!Array.isArray(actions) || actions.some((action) => !action || typeof action.id !== "string" || !action.id || typeof action.label !== "string" || !action.label)) {
+        throw new TypeError("rowActions requires actions with id and label");
+      }
+      this._rowActions = actions.map((action) => ({ ...action }));
+      if (this.isConnected) this._render();
+    }
+    connectedCallback() {
+      this._subscribe();
+      this._render();
+    }
+    disconnectedCallback() {
+      this._pendingRender = null;
+      if (this._store) this._store.unsubscribe(this._subId, { any: true });
+    }
+    _subscribe() {
+      if (this._store) this._store.subscribe(this._subId, { any: () => {
+        if (this._pendingRender) return;
+        const pending = this._pendingRender = {};
+        queueMicrotask(() => {
+          if (this._pendingRender === pending && this.isConnected) this._render();
+        });
+      } });
+    }
+    _render() {
+      this._pendingRender = null;
+      for (const details of this._root.querySelectorAll("details")) {
+        if (details.open) this._expanded.add(details.dataset.path);
+        else this._expanded.delete(details.dataset.path);
+      }
+      this._nodes.clear();
+      this._root.replaceChildren(...this._store ? [this._buildLevel(this._store, "", /* @__PURE__ */ new Set())] : []);
+      if (this._selectedPath !== null && !this._nodes.has(this._selectedPath)) {
+        this._selectedPath = null;
+        this._notifySelection();
+      }
+    }
+    _buildLevel(bag, prefix, ancestors) {
+      if (ancestors.has(bag)) throw new TypeError("gramlot-poc-tree requires an acyclic Bag");
+      const nextAncestors = /* @__PURE__ */ new Set([...ancestors, bag]);
+      const document2 = this.ownerDocument;
+      const list = document2.createElement("ul");
+      for (const node of bag.getNodes()) {
+        const path = prefix ? `${prefix}.${node.label}` : node.label;
+        this._nodes.set(path, node);
+        const value = node.getValue(true);
+        const item = document2.createElement("li");
+        let row;
+        if (!node.resolver && value instanceof Bag) {
+          const details = document2.createElement("details");
+          details.dataset.path = path;
+          details.open = this._expanded.has(path);
+          row = document2.createElement("summary");
+          details.append(row, this._buildLevel(value, path, nextAncestors));
+          item.append(details);
+        } else {
+          row = item;
+          row.className = "leaf";
+          row.tabIndex = 0;
+          row.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              this._select(path);
+            }
+          });
+        }
+        row.dataset.nodePath = path;
+        row.classList.toggle("selected", path === this._selectedPath);
+        const caption = document2.createElement("span");
+        caption.className = "caption";
+        caption.textContent = node.label;
+        row.append(caption);
+        row.addEventListener("click", () => this._select(path));
+        this._actions(row, path, node);
+        list.append(item);
+      }
+      return list;
+    }
+    _actions(row, path, node) {
+      if (!this._rowActions.length) return;
+      const actions = this.ownerDocument.createElement("span");
+      actions.className = "actions";
+      for (const action of this._rowActions) {
+        const button = this.ownerDocument.createElement("button");
+        button.type = "button";
+        button.textContent = action.icon ?? action.label;
+        button.title = action.label;
+        button.setAttribute("aria-label", action.label);
+        button.dataset.action = action.id;
+        button.classList.toggle("active", action.activePaths?.includes(path) ?? false);
+        button.classList.toggle("conditional", action.conditionalPaths?.includes(path) ?? false);
+        button.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          this.dispatchEvent(new this.ownerDocument.defaultView.CustomEvent("tree-action", {
+            bubbles: true,
+            composed: true,
+            detail: { action: action.id, path, node }
+          }));
+        });
+        actions.append(button);
+      }
+      row.append(actions);
+    }
+    _markSelection() {
+      for (const row of this._root.querySelectorAll("[data-node-path]")) {
+        row.classList.toggle("selected", row.dataset.nodePath === this._selectedPath);
+      }
+    }
+    _select(path) {
+      this._selectedPath = path;
+      this._markSelection();
+      this._notifySelection();
+    }
+    _notifySelection() {
+      this.dispatchEvent(new this.ownerDocument.defaultView.CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        detail: { path: this._selectedPath, node: this._nodes.get(this._selectedPath) ?? null }
+      }));
+    }
+  };
+  customElements.define("gramlot-poc-tree", GramlotPocTree);
+  var GramlotPocPalette = class extends HTMLElement {
+    static observedAttributes = ["title", "collapsed"];
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" }).innerHTML = `<style>
+:host{box-sizing:border-box;position:fixed;z-index:2147483647;left:16px;top:16px;width:480px;height:620px;min-width:min(280px,100vw);min-height:200px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);display:block;font:11px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:white;color:#38414b;border:1px solid #b9bec5;border-radius:4px;box-shadow:0 6px 22px #20283026;overflow:hidden}
+*{box-sizing:border-box}.frame{height:100%;display:flex;flex-direction:column}.bar{display:flex;align-items:center;height:25px;min-height:25px;padding:0 4px;border-bottom:1px solid #d8d8dc;background:#eceef1;cursor:move;touch-action:none;user-select:none}.title{flex:1;min-width:0;text-align:left;padding-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}.body{flex:1;min-height:0;display:flex;flex-direction:column}.resize{position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;touch-action:none;background:repeating-linear-gradient(135deg,transparent 0 3px,#aab0b8 3px 4px,transparent 4px 6px);clip-path:polygon(100% 0,100% 100%,0 100%)}button{font:inherit;color:#69727c;background:transparent;border:0;cursor:pointer}.close,.collapse{width:22px;flex:none;height:22px;font-size:18px;line-height:18px;padding:0}.close:hover,.collapse:hover{background:#dce1e7}.bar:focus-visible,button:focus-visible{outline:2px solid #356f9f;outline-offset:-2px}.resize:focus-visible{clip-path:none}::slotted(*){min-height:0}
+:host([collapsed]){height:27px!important;min-height:27px}:host([collapsed]) .body,:host([collapsed]) .resize{display:none}
+</style><div class="frame" role="dialog" aria-modal="false" aria-labelledby="title"><div class="bar" tabindex="0" aria-label="Move inspector: arrow keys, Home to reset"><span class="title" id="title"></span><button class="collapse" type="button" aria-label="Collapse inspector" aria-expanded="true" aria-controls="palette-body">\u2212</button><button class="close" type="button" aria-label="Close inspector">\xD7</button></div><div class="body" id="palette-body"><slot></slot></div><button class="resize" type="button" aria-label="Resize inspector: arrow keys"></button></div>`;
+      this._bar = this.shadowRoot.querySelector(".bar");
+      this._grip = this.shadowRoot.querySelector(".resize");
+      this._collapse = this.shadowRoot.querySelector(".collapse");
+      this._collapse.addEventListener("click", () => {
+        this.collapsed = !this.collapsed;
+      });
+      this.shadowRoot.querySelector(".close").addEventListener("click", () => this.dispatchEvent(
+        new this.ownerDocument.defaultView.CustomEvent("close", { bubbles: true, composed: true })
+      ));
+      for (const handle of [this._bar, this._grip]) {
+        handle.addEventListener("pointerdown", (event) => {
+          if (event.button !== 0 || handle === this._bar && event.target.closest("button")) return;
+          this._gesture = { x: event.clientX, y: event.clientY, rect: this.getBoundingClientRect(), resize: handle === this._grip };
+          handle.setPointerCapture(event.pointerId);
+          event.preventDefault();
+        });
+        handle.addEventListener("pointermove", (event) => {
+          if (this._gesture) this._adjust(this._gesture.rect, event.clientX - this._gesture.x, event.clientY - this._gesture.y, this._gesture.resize);
+        });
+        for (const name of ["pointerup", "pointercancel", "lostpointercapture"]) handle.addEventListener(name, () => {
+          this._gesture = null;
+        });
+        handle.addEventListener("keydown", (event) => {
+          if (event.target !== handle) return;
+          if (event.key === "Home" && handle === this._bar) {
+            this.style.left = "16px";
+            this.style.top = "16px";
+            event.preventDefault();
+            return;
+          }
+          const step = event.shiftKey ? 1 : 10;
+          const delta = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }[event.key];
+          if (delta) {
+            event.preventDefault();
+            this._adjust(this.getBoundingClientRect(), ...delta, handle === this._grip);
+          }
+        });
+      }
+      this._fit = () => this._adjust(this.getBoundingClientRect(), 0, 0, false);
+    }
+    get collapsed() {
+      return this.hasAttribute("collapsed");
+    }
+    set collapsed(value) {
+      this.toggleAttribute("collapsed", value);
+    }
+    attributeChangedCallback(name) {
+      if (name === "title") this.shadowRoot.querySelector(".title").textContent = this.getAttribute("title") ?? "";
+      else {
+        this._collapse.textContent = this.collapsed ? "\uFF0B" : "\u2212";
+        this._collapse.setAttribute("aria-expanded", String(!this.collapsed));
+        this._collapse.setAttribute("aria-label", this.collapsed ? "Expand inspector" : "Collapse inspector");
+      }
+    }
+    connectedCallback() {
+      this.ownerDocument.defaultView.addEventListener("resize", this._fit);
+    }
+    disconnectedCallback() {
+      this.ownerDocument.defaultView.removeEventListener("resize", this._fit);
+      this._gesture = null;
+    }
+    _adjust(rect, dx, dy, resize) {
+      const win = this.ownerDocument.defaultView;
+      if (resize && this.collapsed) return;
+      if (resize) {
+        this.style.width = Math.max(Math.min(280, win.innerWidth - 16), Math.min(win.innerWidth - 16, rect.width + dx)) + "px";
+        this.style.height = Math.max(Math.min(200, win.innerHeight - 16), Math.min(win.innerHeight - 16, rect.height + dy)) + "px";
+      } else {
+        this.style.left = Math.max(0, Math.min(win.innerWidth - Math.min(rect.width, win.innerWidth), rect.left + dx)) + "px";
+        this.style.top = Math.max(0, Math.min(win.innerHeight - 25, rect.top + dy)) + "px";
+      }
+    }
+  };
+  customElements.define("gramlot-poc-palette", GramlotPocPalette);
+  var GramlotPocTabs = class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" }).innerHTML = `<style>
+:host{display:flex;flex:none;background:#edf2fa;border-bottom:1px solid #d3e3fd}
+::slotted(button){height:25px;padding:0 10px;border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;color:#474747;font:500 11px/23px system-ui,sans-serif;cursor:pointer}
+::slotted(button:hover){background:#e1e5ed}::slotted(button[aria-selected=true]){color:#0b57d0;border-bottom-color:#0b57d0}::slotted(button:focus-visible){outline:2px solid #0b57d0;outline-offset:-2px}
+</style><slot></slot>`;
+      this.addEventListener("keydown", (event) => {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+        const tabs = [...this.children].filter((element) => element.getAttribute("role") === "tab");
+        const index = tabs.indexOf(event.target);
+        if (index < 0) return;
+        const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
+        event.preventDefault();
+        tabs[next].focus();
+        tabs[next].click();
+      });
+    }
+  };
+  customElements.define("gramlot-poc-tabs", GramlotPocTabs);
+  var GramlotPocSplitter = class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" }).innerHTML = `<style>
+:host{display:grid;grid-template-rows:minmax(60px,var(--top-size,45%)) 6px minmax(60px,1fr);min-height:126px;flex:1;overflow:hidden}
+.region{overflow:auto;min-height:0;min-width:0}.handle{position:relative;background:#e4e7eb;cursor:row-resize;touch-action:none;user-select:none}.handle:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:1px;width:28px;background:#c2c9d3}.handle:hover{background:#c4d9ef}.handle:focus-visible{outline:2px solid #356f9f;outline-offset:-2px}::slotted(*){min-height:0}
+</style><div class="region"><slot name="top"></slot></div><div class="handle" role="separator" aria-label="Resize tree and properties" aria-orientation="horizontal" tabindex="0" aria-valuemin="10" aria-valuemax="90" aria-valuenow="45"></div><div class="region"><slot name="bottom"></slot></div>`;
+      const handle = this.shadowRoot.querySelector(".handle");
+      handle.addEventListener("pointerdown", (event) => {
+        if (event.button !== 0) return;
+        this._dragging = true;
+        handle.setPointerCapture(event.pointerId);
+        event.preventDefault();
+      });
+      handle.addEventListener("pointermove", (event) => {
+        if (this._dragging) {
+          const rect = this.getBoundingClientRect();
+          this._resize(100 * (event.clientY - rect.top) / rect.height);
+        }
+      });
+      for (const name of ["pointerup", "pointercancel", "lostpointercapture"]) handle.addEventListener(name, () => {
+        this._dragging = false;
+      });
+      handle.addEventListener("keydown", (event) => {
+        if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+        event.preventDefault();
+        const value = Number(handle.getAttribute("aria-valuenow"));
+        this._resize(event.key === "Home" ? 10 : event.key === "End" ? 90 : value + (event.key === "ArrowUp" ? -5 : 5));
+      });
+    }
+    _resize(value) {
+      value = Math.max(10, Math.min(90, value));
+      this.style.setProperty("--top-size", `${value}%`);
+      this.shadowRoot.querySelector(".handle").setAttribute("aria-valuenow", String(Math.round(value)));
+    }
+    disconnectedCallback() {
+      this._dragging = false;
+    }
+  };
+  customElements.define("gramlot-poc-splitter", GramlotPocSplitter);
+  var nextId = 0;
+  var GramlotToolsInspector = class extends HTMLElement {
+    #target = null;
+    #connection = null;
+    #connectionRelease = null;
+    #targets = [];
+    #selectedTarget = null;
+    #ui = null;
+    #mount;
+    #subscriber = `gramlot-tools-inspector-${++nextId}`;
+    #subscriptions = [];
+    #nodes = [];
+    #nodeIds = /* @__PURE__ */ new WeakMap();
+    #nextNodeId = 0;
+    #pending = false;
+    #generation = 0;
+    #snapshot = null;
+    #nextRow = 0;
+    #nextBreakpoint = 0;
+    #breakpointTests = /* @__PURE__ */ new Map();
+    #trees = {};
+    #breakpointTarget = null;
+    #styles = null;
+    #styleNames = "";
+    #styleRequest = 0;
+    #styleDownloadUrl = null;
+    constructor() {
+      super();
+      this.#mount = this.ownerDocument.createElement("div");
+      this.attachShadow({ mode: "open" }).append(this.#mount);
+    }
+    get gramlot() {
+      return this.#target;
+    }
+    set gramlot(value) {
+      if (value !== null && (!(value instanceof Gramlot) || value.state === "disposed")) {
+        throw new TypeError("gramlot must be a live Gramlot instance or null");
+      }
+      this.#unsubscribe();
+      this.#connection = null;
+      this.#targets = [];
+      this.#selectedTarget = null;
+      this.#target = value;
+      this.#snapshot = null;
+      this.#breakpointTarget = null;
+      this.#breakpointTests.clear();
+      if (this.#ui) {
+        this.#renderTargets();
+        this.#dialog().close();
+        this.#dialog("breakpoints").close();
+        this.#ui.data.setItem("breakpointError", "");
+        this.#ui.data.setItem("selection", null);
+        this.#ui.data.setItem("busy", false);
+        this.#ui.data.setItem("breakpoints", new Bag());
+        this.#ui.data.setItem("editor.dirty", false);
+        this.#ui.data.setItem("breakpointDirty", false);
+        this.#ui.data.setItem("breakpointStatus", "");
+        this.#subscribe();
+        this.#refresh();
+        if (this.#ui.data.getItem("tab") === "styles") this.#loadStyles();
+      }
+    }
+    get targets() {
+      return this.#targets.map((entry) => ({ ...entry }));
+    }
+    set targets(entries) {
+      if (!Array.isArray(entries) || entries.some((entry) => typeof entry.id !== "string" || typeof entry.title !== "string" || !(entry.connection instanceof InspectorConnection)) || new Set(entries.map((entry) => entry.id)).size !== entries.length) {
+        throw new TypeError("targets requires unique id/title/InspectorConnection records");
+      }
+      if (!entries.length) {
+        this.gramlot = null;
+        return;
+      }
+      this.#targets = entries.map((entry) => ({ ...entry }));
+      this.#renderTargets();
+      const chosen = entries.find((entry) => entry.id === this.#selectedTarget) ?? entries[0];
+      if (chosen) this.selectedTarget = chosen.id;
+    }
+    get selectedTarget() {
+      return this.#selectedTarget;
+    }
+    set selectedTarget(id) {
+      const entry = this.#targets.find((entry2) => entry2.id === id);
+      if (!entry) throw new Error(`Unknown inspector target: ${id}`);
+      this.#selectedTarget = id;
+      if (this.#ui) this.#ui.data.setItem("targetId", id);
+      if (entry.connection === this.#connection) return;
+      this.#unsubscribe();
+      this.#target = null;
+      this.#connection = entry.connection;
+      this.#snapshot = null;
+      this.#breakpointTarget = null;
+      this.#breakpointTests.clear();
+      if (this.#ui) {
+        this.#dialog().close();
+        this.#dialog("breakpoints").close();
+        this.#ui.data.setItem("selection", null);
+        this.#ui.data.setItem("busy", false);
+        this.#ui.data.setItem("editor.dirty", false);
+        this.#ui.data.setItem("breakpointDirty", false);
+        this.#subscribe();
+        this.#refresh();
+        if (this.#ui.data.getItem("tab") === "styles") this.#loadStyles();
+      }
+    }
+    #renderTargets() {
+      if (!this.#ui) return;
+      const builder = new GramlotBuilder();
+      for (const entry of this.#targets) builder.root.option(entry.title, { value: entry.id });
+      this.#ui.src.source.getNode("main.palette.targetbar.targets").setValue(this.#ui.src.prepareSource(builder.source));
+      this.#ui.data.setItem("singleTarget", this.#targets.length < 2);
+      this.#ui.data.setItem("targetId", this.#selectedTarget ?? this.#targets[0]?.id ?? "");
+    }
+    #state() {
+      return (this.#connection ?? this.#target)?.state;
+    }
+    #targetBag(root) {
+      return this.#connection ? this.#connection[root] : root === "data" ? this.#target.data : this.#target.src.source;
+    }
+    connectedCallback() {
+      if (this.#ui) return;
+      const inspector = this;
+      const ui = new Gramlot({ document: this.ownerDocument, element: this.#mount, transport: false });
+      this.#ui = ui;
+      class Logic {
+        close(node, event) {
+          event.stopPropagation();
+          inspector.remove();
+          inspector.dispatchEvent(new inspector.ownerDocument.defaultView.CustomEvent("close"));
+        }
+        editChanged(node) {
+          const row = ui.data.getItem(`editor.rows.${node.getAttr("data-row")}`);
+          row.setItem("isNull", false);
+          ui.data.setItem("editor.dirty", true);
+          ui.data.setItem("editor.status", "Unsaved changes");
+        }
+        typeChanged(node) {
+          const row = ui.data.getItem(`editor.rows.${node.getAttr("data-row")}`);
+          row.setItem("inputType", inspector.#inputType(row.getItem("type")));
+          row.setItem("text", row.getItem("type") === "boolean" ? false : "");
+          row.setItem("isNull", row.getItem("type") === "null");
+          ui.data.setItem("editor.dirty", true);
+        }
+        leaveRow(node, event) {
+          if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) return;
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(() => {
+          }, event.relatedTarget);
+        }
+        editKey(node, event) {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            inspector.#loadEditor(inspector.#selected());
+          } else if (event.key === "Enter" && !event.isComposing) {
+            event.preventDefault();
+            inspector.#applyEdit();
+          } else if (event.key === "Backspace" && !event.repeat && !event.isComposing) {
+            const row = ui.data.getItem(`editor.rows.${node.getAttr("data-row")}`);
+            if (!row.getItem("locked") && (row.getItem("type") === "boolean" || row.getItem("text") === "" || row.getItem("text") === null)) {
+              event.preventDefault();
+              row.setItem("isNull", true);
+              row.setItem("text", null);
+              ui.data.setItem("editor.dirty", true);
+            }
+          }
+        }
+        keepFocus(node, event) {
+          event.preventDefault();
+        }
+        addAttribute() {
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(() => inspector.#addAttribute());
+          else inspector.#addAttribute();
+        }
+        selectTarget() {
+          const id = ui.data.getItem("targetId");
+          const choose = () => {
+            inspector.selectedTarget = id;
+          };
+          if (ui.data.getItem("editor.dirty")) {
+            ui.data.setItem("targetId", inspector.selectedTarget);
+            inspector.#applyEdit(choose);
+          } else choose();
+        }
+        removeAttribute(node) {
+          ui.data.setItem(`editor.rows.${node.getAttr("data-row")}.removed`, true);
+          ui.data.setItem("editor.dirty", true);
+          inspector.#applyEdit();
+        }
+        selectRoot(node) {
+          const choose = () => {
+            const tab = node.getAttr("data-root");
+            ui.data.setItem("tab", tab);
+            if (tab !== "styles") {
+              ui.data.setItem("root", tab);
+              ui.data.setItem("selection", null);
+              inspector.#snapshot = null;
+            }
+            inspector.#refresh();
+            if (tab === "styles") inspector.#loadStyles();
+          };
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(choose);
+          else choose();
+        }
+        refreshStyles() {
+          inspector.#loadStyles();
+        }
+        styleChanged(node) {
+          ui.data.setItem(`styles.rows.${node.getAttr("data-row")}.dirty`, true);
+        }
+        setStyle(node) {
+          const row = ui.data.getItem(`styles.rows.${node.getAttr("data-row")}`);
+          if (node.getAttr("data-field") === "color") row.setItem("dirty", false);
+          else if (!row.getItem("dirty")) return;
+          inspector.#loadStyles("setStyle", { name: row.getItem("name"), value: row.getItem(node.getAttr("data-field")) });
+        }
+        styleKey(node, event) {
+          if (event.key === "Enter" && !event.isComposing) {
+            event.preventDefault();
+            this.setStyle(node);
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            inspector.#loadStyles();
+          }
+        }
+        resetStyle(node) {
+          inspector.#loadStyles("resetStyle", { name: ui.data.getItem(`styles.rows.${node.getAttr("data-row")}.name`) });
+        }
+        resetStyles() {
+          inspector.#loadStyles("resetStyles");
+        }
+        selectNode(node, event) {
+          const choose = () => {
+            const entry = inspector.#nodes.find((item) => item.node === event.detail.node);
+            ui.data.setItem("selection", entry?.id ?? null);
+            inspector.#loadEditor(entry);
+            inspector.#details();
+          };
+          if (ui.data.getItem("editor.dirty")) {
+            inspector.#trees[ui.data.getItem("root")].selectedPath = inspector.#selected()?.path.join(".") ?? null;
+            inspector.#applyEdit(choose);
+          } else choose();
+        }
+        openBreakpoint(node, event) {
+          if (event.detail.action !== "breakpoint") return;
+          ui.data.setItem("breakpointDirty", false);
+          ui.data.setItem("breakpointStatus", "");
+          inspector.#breakpointTarget = { root: node.getAttr("data-root"), path: event.detail.path };
+          inspector.#loadBreakpoint();
+          if (!inspector.#findBreakpoint(inspector.#breakpointTarget.root, event.detail.path)) ui.data.setItem("editor.mode", "debugger");
+          ui.data.setItem("breakpointWhere", `${inspector.#breakpointTarget.root}: ${event.detail.path}`);
+          inspector.#dialog().showModal();
+        }
+        closeBreakpoint() {
+          inspector.#dialog().close();
+          inspector.#breakpointTarget = null;
+          ui.data.setItem("breakpointDirty", false);
+        }
+        breakpointChanged() {
+          ui.data.setItem("breakpointDirty", true);
+        }
+        setBreakpoint() {
+          inspector.#setBreakpoint(() => {
+            inspector.#dialog().close();
+            inspector.#breakpointTarget = null;
+          });
+        }
+        showBreakpoints() {
+          inspector.#renderBreakpoints();
+          inspector.#dialog("breakpoints").showModal();
+        }
+        closeBreakpoints() {
+          inspector.#dialog("breakpoints").close();
+        }
+        removeBreakpoint(node) {
+          const id = node.getAttr("data-breakpoint");
+          if (inspector.#connection) {
+            const config = ui.data.getItem(`breakpoints.${id}`);
+            inspector.#connection.request("breakpoint", { root: config.getItem("root"), path: config.getItem("path"), mode: "", condition: "" }).then(() => {
+              inspector.#refresh();
+              inspector.#renderBreakpoints();
+            }).catch((error) => ui.data.setItem("breakpointError", error.message));
+            return;
+          }
+          ui.data.getItem("breakpoints").popNode(id);
+          inspector.#breakpointTests.delete(id);
+          inspector.#renderBreakpoints();
+          inspector.#refresh();
+        }
+      }
+      ui.src.logicRegistry.register(Logic, { group: "inspector", resource: "gramlot-tools-inspector" });
+      for (const [key, value] of Object.entries({
+        root: "data",
+        tab: "data",
+        stylesActive: false,
+        treeActive: true,
+        dataActive: true,
+        sourceActive: false,
+        targetId: "",
+        singleTarget: true,
+        busy: false,
+        selection: null,
+        path: "",
+        error: "",
+        status: "",
+        breakpointWhere: "",
+        breakpointLine: "",
+        breakpointStatus: "",
+        breakpointError: "",
+        breakpointCount: "\u25CF 0",
+        noBreakpoints: true
+      })) ui.data.setItem(key, value);
+      ui.data.setItem("editor", new Bag({ dirty: false, disabled: true, status: "", mode: "", condition: "" }));
+      ui.data.setItem("breakpoints", new Bag());
+      ui.data.setItem("breakpointDirty", false);
+      ui.data.setItem("styles", new Bag({ status: "", busy: false, noChanges: true, noDownload: true, downloadUrl: null, rows: new Bag() }));
+      const builder = new GramlotBuilder();
+      const root = builder.root;
+      root.style(gramlot_tools_inspector_default);
+      const palette = this.hasAttribute("embedded") ? root.section({ node_label: "palette", class: "embedded-panel", "aria-label": "Gramlot inspector" }) : root.webcomponent({ code: "gramlot-poc-palette", node_label: "palette", title: "Gramlot inspector", connect_onclose: "inspector.close" });
+      const targetbar = palette.div({ node_label: "targetbar", class: "targetbar", hidden: "^singleTarget" });
+      targetbar.select({ node_label: "targets", value: "^targetId", disabled: "^busy", "aria-label": "Inspected page", connect_onchange: "inspector.selectTarget" });
+      const toolbar = palette.webcomponent({ code: "gramlot-poc-tabs", node_label: "tabs", role: "tablist", "aria-label": "Inspected root" });
+      for (const name of ["Data", "Source", "Styles"]) toolbar.button(name, {
+        node_label: name.toLowerCase(),
+        type: "button",
+        role: "tab",
+        "data-root": name.toLowerCase(),
+        "aria-selected": "false",
+        connect_onclick: "inspector.selectRoot"
+      });
+      palette.p("^error", { role: "alert", class: "error" });
+      const content = palette.webcomponent({ code: "gramlot-poc-splitter", node_label: "content", hidden: "^stylesActive" });
+      const trees = content.div({ node_label: "tree", slot: "top", class: "tree" });
+      for (const name of ["data", "source"]) trees.webcomponent({
+        code: "gramlot-poc-tree",
+        node_label: name,
+        "data-root": name,
+        hidden: name === "data" ? "^sourceActive" : "^dataActive",
+        connect_onchange: "inspector.selectNode",
+        "connect_ontree-action": "inspector.openBreakpoint"
+      });
+      const properties = content.section({ node_label: "properties", slot: "bottom", class: "properties", "aria-label": "Selected node properties" });
+      const heading = properties.div({ class: "properties-heading" });
+      heading.span("Properties", { class: "heading-label" });
+      heading.button("^breakpointCount", {
+        type: "button",
+        class: "breakpoint-count",
+        hidden: "^noBreakpoints",
+        "aria-label": "Active breakpoints",
+        title: "Active breakpoints",
+        connect_onclick: "inspector.showBreakpoints"
+      });
+      heading.button("+", {
+        type: "button",
+        "aria-label": "Add attribute",
+        title: "Add attribute",
+        disabled: "^editor.disabled",
+        connect_onpointerdown: "inspector.keepFocus",
+        connect_onclick: "inspector.addAttribute"
+      });
+      properties.p("^breakpointLine", { class: "breakpoint-line" });
+      properties.p("^breakpointError", { class: "breakpoint-status", role: "alert" });
+      const editor = properties.fieldset({ node_label: "editor", disabled: "^editor.disabled" });
+      editor.div({ node_label: "rows", class: "rows" });
+      properties.p("^editor.status", { role: "status", class: "edit-status" });
+      const styles = palette.section({ node_label: "styles", class: "styles-panel", hidden: "^treeActive", "aria-label": "CSS variables" });
+      const stylebar = styles.div({ class: "styles-toolbar" });
+      stylebar.span("Document variables");
+      stylebar.button("Refresh", { type: "button", disabled: "^styles.busy", connect_onclick: "inspector.refreshStyles" });
+      stylebar.button("Reset all", { type: "button", disabled: "^styles.noChanges", connect_onclick: "inspector.resetStyles" });
+      stylebar.a("Download CSS", { href: "^styles.downloadUrl", download: "theme-overrides.css", "aria-disabled": "^styles.noDownload" });
+      styles.p("Temporary preview \xB7 Enter or leave a field to apply. Closing the connection clears previews.", { class: "styles-help" });
+      styles.p("^styles.status", { role: "status", class: "styles-status" });
+      styles.p("No --gramlot-* variables on this document root. Load a Gramlot theme, then Refresh.", { class: "styles-empty", node_label: "empty" });
+      styles.div({ node_label: "rows", class: "styles-rows" });
+      const footer = palette.footer({ class: "path", hidden: "^stylesActive" });
+      footer.span("Path: ");
+      footer.em("^path");
+      const breakpoint = palette.dialog({ node_label: "breakpoint", "aria-label": "Breakpoint", class: "breakpoint-dialog", connect_oncancel: "inspector.closeBreakpoint" });
+      breakpoint.h2("^breakpointWhere");
+      const mode = breakpoint.select({ value: "^editor.mode", connect_onchange: "inspector.breakpointChanged", "aria-label": "Breakpoint mode" });
+      for (const [value, label] of [["", "Off"], ["debugger", "Debugger"], ["console", "Console"]]) mode.option(label, { value });
+      breakpoint.input({ value: "^editor.condition", live: true, connect_oninput: "inspector.breakpointChanged", "aria-label": "Breakpoint condition", placeholder: "Condition (optional)" });
+      breakpoint.p("^breakpointStatus", { role: "status", class: "breakpoint-status" });
+      const actions = breakpoint.div({ class: "dialog-actions" });
+      actions.button("Cancel", { type: "button", connect_onclick: "inspector.closeBreakpoint" });
+      actions.button("Save", { type: "button", connect_onclick: "inspector.setBreakpoint" });
+      const list = palette.dialog({ node_label: "breakpoints", "aria-label": "Active breakpoints", class: "breakpoint-dialog" });
+      list.h2("Active breakpoints");
+      list.div({ node_label: "entries" });
+      list.div({ class: "dialog-actions" }).button("Close", { type: "button", connect_onclick: "inspector.closeBreakpoints" });
+      ui.src.startSource(builder.source);
+      for (const name of ["data", "source"]) this.#trees[name] = ui.dom.getDomNode(ui.src.source.getNode(`main.palette.content.tree.${name}`));
+      this.#renderTargets();
+      this.#subscribe();
+      this.#refresh();
+    }
+    #dialog(name = "breakpoint") {
+      return this.#ui.dom.getDomNode(this.#ui.src.source.getNode(`main.palette.${name}`));
+    }
+    disconnectedCallback() {
+      this.#unsubscribe();
+      this.#ui?.dispose();
+      this.#ui = null;
+      this.#nodes = [];
+      this.#trees = {};
+      this.#breakpointTarget = null;
+      this.#snapshot = null;
+      this.#breakpointTests.clear();
+    }
+    #subscribe() {
+      if (this.#connection) {
+        this.#connectionRelease = this.#connection.subscribe(() => this.#schedule());
+        return;
+      }
+      if (!this.#target) return;
+      this.#subscriptions = [this.#target.data, this.#target.src.source];
+      for (const [index, bag] of this.#subscriptions.entries()) bag.subscribe(this.#subscriber, { any: (event) => {
+        this.#checkBreakpoints(index === 0 ? "data" : "source", event);
+        this.#schedule();
+      } });
+    }
+    #unsubscribe() {
+      ++this.#styleRequest;
+      this.#styles?.dispose();
+      this.#styles = null;
+      if (this.#ui) {
+        this.#renderStyles([]);
+        this.#ui.data.setItem("styles.busy", false);
+        this.#ui.data.setItem("styles.status", "");
+      }
+      this.#connectionRelease?.();
+      this.#connectionRelease = null;
+      ++this.#generation;
+      this.#pending = false;
+      for (const bag of this.#subscriptions) bag.unsubscribe(this.#subscriber, { any: true });
+      this.#subscriptions = [];
+    }
+    #schedule() {
+      if (this.#pending) return;
+      this.#pending = true;
+      const generation = this.#generation;
+      queueMicrotask(() => {
+        if (generation !== this.#generation || !this.#ui) return;
+        this.#pending = false;
+        this.#refresh();
+      });
+    }
+    #bag() {
+      return this.#targetBag(this.#ui.data.getItem("root"));
+    }
+    #refresh() {
+      const ui = this.#ui;
+      if (!ui) return;
+      try {
+        this.#nodes = [];
+        const root = ui.data.getItem("root");
+        const tab = ui.data.getItem("tab");
+        ui.data.setItem("stylesActive", tab === "styles");
+        ui.data.setItem("treeActive", tab !== "styles");
+        for (const name of ["data", "source", "styles"]) {
+          ui.src.source.getNode(`main.palette.tabs.${name}`).setAttr({ "aria-selected": String(tab === name) });
+        }
+        if (this.#connection) {
+          const configurations = new Bag();
+          for (const [index, record] of this.#connection.breakpoints.entries()) configurations.setItem(`b${index}`, new Bag(record));
+          ui.data.setItem("breakpoints", configurations);
+          ui.data.setItem("breakpointError", this.#connection.breakpoints.filter((record) => record.error).map((record) => `${record.root}: ${record.path}: ${record.error}`).join("; "));
+        }
+        const count = ui.data.getItem("breakpoints").getNodes().length;
+        ui.data.setItem("breakpointCount", `\u25CF ${count}`);
+        ui.data.setItem("noBreakpoints", count === 0);
+        ui.data.setItem("dataActive", root === "data");
+        ui.data.setItem("sourceActive", root === "source");
+        for (const name of ["data", "source"]) {
+          const tree = this.#trees[name];
+          tree.storeBag = this.#connection || this.#target ? this.#targetBag(name) : null;
+          const breakpoints = ui.data.getItem("breakpoints").getNodes().filter((node) => node.value.getItem("root") === name);
+          tree.rowActions = [{
+            id: "breakpoint",
+            icon: "\u25CB",
+            label: "Breakpoint",
+            activePaths: breakpoints.map((node) => node.value.getItem("path")),
+            conditionalPaths: breakpoints.filter((node) => node.value.getItem("condition").trim()).map((node) => node.value.getItem("path"))
+          }];
+        }
+        if (this.#target || this.#connection) this.#index(this.#bag(), []);
+        this.#trees[root].selectedPath = this.#selected()?.path.join(".") ?? null;
+        ui.data.setItem("error", this.#connection ? this.#connection.error || (this.#state() === "disposed" ? "Inspected page disconnected." : this.#state() === "connecting" ? "Connecting\u2026" : "") : this.#target ? "" : "No Gramlot instance selected.");
+        this.#details();
+      } catch (error) {
+        ui.data.setItem("error", error.message);
+      }
+    }
+    async #loadStyles(type = "styles", command = {}) {
+      const ui = this.#ui;
+      const request = ++this.#styleRequest;
+      ui.data.setItem("styles.busy", true);
+      ui.data.setItem("styles.downloadUrl", null);
+      ui.data.setItem("styles.noDownload", true);
+      ui.data.setItem("styles.status", "");
+      try {
+        if (!this.#state() || this.#state() === "disposed" || this.#connection && this.#state() !== "started") {
+          throw new Error("Select a connected page before editing CSS variables");
+        }
+        let rows;
+        if (this.#connection) {
+          const connection = this.#connection;
+          await connection.request(type, command);
+          rows = connection.styles;
+        } else {
+          this.#styles ??= new InspectorStyles(this.#target.src.renderer.destination.ownerDocument);
+          if (type === "setStyle") this.#styles.set(command.name, command.value);
+          if (type === "resetStyle") this.#styles.reset(command.name);
+          if (type === "resetStyles") this.#styles.dispose();
+          rows = this.#styles.snapshot();
+        }
+        if (this.#ui !== ui || request !== this.#styleRequest) return;
+        this.#renderStyles(rows, type, command);
+      } catch (error) {
+        if (this.#ui === ui && request === this.#styleRequest) ui.data.setItem("styles.status", error.message);
+      } finally {
+        if (this.#ui === ui && request === this.#styleRequest) {
+          ui.data.setItem("styles.busy", false);
+          ui.data.setItem("styles.downloadUrl", this.#styleDownloadUrl);
+          ui.data.setItem("styles.noDownload", !this.#styleDownloadUrl);
+        }
+      }
+    }
+    #renderStyles(rows, type = "styles", command = {}) {
+      const ui = this.#ui;
+      const browser = this.ownerDocument.defaultView;
+      if (this.#styleDownloadUrl) browser.URL.revokeObjectURL(this.#styleDownloadUrl);
+      this.#styleDownloadUrl = null;
+      const overrides = rows.filter((row) => row.override);
+      if (overrides.length) {
+        const declarations = overrides.map((row) => `  ${browser.CSS.escape(row.name)}: ${row.override} !important;`).join("\n");
+        const css = `/* Gramlot overrides. Load after the theme stylesheet. */
+:root {
+${declarations}
+}
+`;
+        this.#styleDownloadUrl = browser.URL.createObjectURL(new browser.Blob([css], { type: "text/css;charset=utf-8" }));
+      }
+      ui.data.setItem("styles.downloadUrl", ui.data.getItem("styles.busy") ? null : this.#styleDownloadUrl);
+      ui.data.setItem("styles.noDownload", ui.data.getItem("styles.busy") || !this.#styleDownloadUrl);
+      const names = JSON.stringify(rows.map((row) => row.name));
+      const rebuild = names !== this.#styleNames;
+      this.#styleNames = names;
+      const builder = rebuild ? new GramlotBuilder() : null;
+      const groups = /* @__PURE__ */ new Map();
+      if (rebuild) {
+        ui.src.source.getNode("main.palette.styles.rows").setValue(ui.src.prepareSource(new GramlotBuilder().source));
+        ui.data.setItem("styles.rows", new Bag());
+      }
+      for (const [index, record] of rows.entries()) {
+        const id = `v${index}`, path = `styles.rows.${id}`;
+        const color = /^#[\da-f]{6}$/i.test(record.value) ? record.value : /^#[\da-f]{3}$/i.test(record.value) ? "#" + [...record.value.slice(1)].map((char) => char + char).join("") : null;
+        const fields = {
+          name: record.name,
+          text: record.override || record.value,
+          computed: record.value,
+          dirty: false,
+          color: color ?? "#000000",
+          noColor: color === null,
+          unchanged: !record.override
+        };
+        if (!rebuild && ui.data.getItem(`${path}.dirty`) && !["styles", "resetStyles"].includes(type)) {
+          const acknowledged = record.name === command.name && (type === "resetStyle" || ui.data.getItem(`${path}.text`) === command.value);
+          if (!acknowledged) {
+            delete fields.text;
+            delete fields.dirty;
+          }
+        }
+        if (rebuild) ui.data.setItem(path, new Bag(fields));
+        else for (const [key, value] of Object.entries(fields)) ui.data.setItem(`${path}.${key}`, value);
+        if (!rebuild) continue;
+        const group = record.name.includes("-font-") ? "Typography" : record.name.includes("-space-") ? "Spacing" : /-(radius|page-width)/.test(record.name) ? "Dimensions" : record.name.endsWith("-shadow") ? "Effects" : color ? "Colors" : "Other";
+        if (!groups.has(group)) {
+          const section = builder.root.section({ class: "styles-group" });
+          section.h3(group);
+          groups.set(group, section);
+        }
+        const row = groups.get(group).div({ class: "style-row" });
+        row.html_label(record.name, { for: `${this.#subscriber}-${id}`, title: record.name });
+        row.input({
+          id: `${this.#subscriber}-${id}`,
+          value: `^${path}.text`,
+          live: true,
+          "aria-label": `${record.name} value`,
+          title: `^${path}.computed`,
+          "data-row": id,
+          "data-field": "text",
+          connect_oninput: "inspector.styleChanged",
+          connect_onchange: "inspector.setStyle",
+          connect_onkeydown: "inspector.styleKey",
+          spellcheck: "false"
+        });
+        row.input({
+          type: "color",
+          value: `^${path}.color`,
+          hidden: `^${path}.noColor`,
+          "aria-label": `${record.name} color`,
+          "data-row": id,
+          "data-field": "color",
+          connect_onchange: "inspector.setStyle"
+        });
+        row.button("\u21B6", {
+          type: "button",
+          "aria-label": `Reset ${record.name}`,
+          title: "Reset variable",
+          disabled: `^${path}.unchanged`,
+          "data-row": id,
+          connect_onclick: "inspector.resetStyle"
+        });
+      }
+      if (rebuild) ui.src.source.getNode("main.palette.styles.rows").setValue(ui.src.prepareSource(builder.source));
+      ui.data.setItem("styles.noChanges", !rows.some((row) => row.override));
+      ui.src.source.getNode("main.palette.styles.empty").setAttr({ hidden: rows.length !== 0 });
+    }
+    #index(bag, labels) {
+      for (const node of bag.getNodes()) {
+        const path = [...labels, node.label];
+        if (!this.#nodeIds.has(node)) this.#nodeIds.set(node, String(++this.#nextNodeId));
+        this.#nodes.push({ id: this.#nodeIds.get(node), node, path });
+        const value = node.getValue(true);
+        if (!node.resolver && value instanceof Bag) this.#index(value, path);
+      }
+    }
+    #details() {
+      const ui = this.#ui;
+      const entry = this.#selected();
+      const node = entry?.node;
+      ui.data.setItem("path", node ? entry.path.join(".") : "");
+      const bp = node ? this.#findBreakpoint(ui.data.getItem("root"), entry.path.join("."))?.value : null;
+      ui.data.setItem("breakpointLine", bp ? `Breakpoint: ${bp.getItem("mode")} \xB7 ${bp.getItem("hits")} hits${bp.getItem("condition") ? ` \xB7 if ${bp.getItem("condition")}` : ""}` : "");
+      if (!node || this.#snapshot?.node !== node || !ui.data.getItem("editor.dirty") && !this.#unchanged()) this.#loadEditor(entry);
+      else if (!this.#unchanged()) ui.data.setItem("editor.status", "Node changed outside this draft. Press Escape to reload the cell before saving.");
+    }
+    #selected() {
+      return this.#nodes.find((item) => item.id === this.#ui.data.getItem("selection"));
+    }
+    #unchanged() {
+      const entry = this.#selected();
+      const snapshot = this.#snapshot;
+      if (!entry || !snapshot || entry.node !== snapshot.node || !entry.node.parentBag || !entry.node.parentBag.getNodes().includes(entry.node) || this.#state() === "disposed") return false;
+      if (this.#connection && this.#connection.nodeInfo(entry.node)?.revision !== snapshot.revision) return false;
+      const attrs = entry.node.getAttr();
+      return Object.is(entry.node.getValue(true), snapshot.value) && entry.node.resolver === snapshot.resolver && Object.keys(attrs).length === Object.keys(snapshot.attrs).length && Object.entries(snapshot.attrs).every(([name, value]) => Object.is(attrs[name], value));
+    }
+    #inputType(type) {
+      return { boolean: "checkbox", number: "number", integer: "number", date: "date", time: "time", datetime: "datetime-local" }[type] ?? "text";
+    }
+    #row(name, value, primary, locked = false) {
+      const scalar = scalarType(value);
+      const type = scalar === "null" ? "string" : scalar;
+      let text = value === null ? "" : type === "boolean" ? value : type ? scalarText(value, type) : this.#format(value);
+      if (type === "datetime") text = text.replace(/Z$/, "");
+      return new Bag({
+        name,
+        initialName: name,
+        initialText: text,
+        initialType: type,
+        text,
+        type: type ?? "readonly",
+        inputType: this.#inputType(type),
+        isNull: value === null,
+        primary,
+        locked: locked || !type,
+        removed: false
+      });
+    }
+    #loadEditor(entry) {
+      const ui = this.#ui;
+      this.#snapshot = entry ? {
+        node: entry.node,
+        value: entry.node.getValue(true),
+        attrs: { ...entry.node.getAttr() },
+        resolver: entry.node.resolver,
+        revision: this.#connection?.nodeInfo(entry.node)?.revision
+      } : null;
+      const rows = new Bag();
+      if (entry) {
+        if (!(this.#snapshot.value instanceof Bag)) rows.setItem(`r${++this.#nextRow}`, this.#row("value", this.#snapshot.value, true, !!entry.node.resolver || !!this.#connection?.nodeInfo(entry.node)?.readonly));
+        for (const [name, value] of Object.entries(this.#snapshot.attrs)) {
+          if (name !== "_meta") rows.setItem(`r${++this.#nextRow}`, this.#row(name, value, false, !!this.#connection?.nodeInfo(entry.node)?.readonlyAttrs.has(name)));
+        }
+      }
+      ui.data.setItem("editor.rows", rows);
+      ui.data.setItem("editor.disabled", !entry || this.#state() === "disposed");
+      ui.data.setItem("editor.dirty", false);
+      ui.data.setItem("editor.status", "");
+      this.#renderEditor();
+      this.#loadBreakpoint();
+    }
+    #renderEditor() {
+      const builder = new GramlotBuilder();
+      for (const row of this.#ui.data.getItem("editor.rows").getNodes()) {
+        const data = row.value;
+        if (data.getItem("removed")) continue;
+        const primary = data.getItem("primary");
+        const name = data.getItem("name");
+        const fresh = data.getItem("initialName") === "";
+        const locked = data.getItem("locked");
+        const line = builder.root.div({
+          class: "property-row",
+          datapath: `editor.rows.${row.label}`,
+          "data-row": row.label,
+          connect_onfocusout: "inspector.leaveRow"
+        });
+        const label = line.div({ class: "property-name" });
+        if (fresh) label.input({ value: "^.name", live: true, "aria-label": "New attribute name", "data-row": row.label, connect_oninput: "inspector.editChanged" });
+        else label.span(name);
+        const cell = line.div({ class: "property-value" });
+        cell.input({
+          value: "^.text",
+          type: "^.inputType",
+          live: true,
+          step: data.getItem("type") === "integer" ? "1" : "any",
+          disabled: locked,
+          "aria-label": primary ? "Value" : `${name || "New attribute"} value`,
+          "data-row": row.label,
+          title: data.getItem("isNull") ? "Null value. Backspace on an empty cell sets null." : "Enter to save; Escape to revert; Backspace on an empty cell sets null.",
+          connect_oninput: "inspector.editChanged",
+          connect_onkeydown: "inspector.editKey"
+        });
+        if (fresh) {
+          const type = cell.select({ value: "^.type", "aria-label": "New attribute type", "data-row": row.label, connect_onchange: "inspector.typeChanged" });
+          for (const value of editorTypes) type.option(value, { value });
+        }
+        if (!primary) {
+          const button = cell.button({
+            type: "button",
+            disabled: locked,
+            "aria-label": `Remove ${name || "new attribute"}`,
+            class: "remove",
+            "data-row": row.label,
+            connect_onpointerdown: "inspector.keepFocus",
+            connect_onclick: "inspector.removeAttribute"
+          });
+          button.svg({
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: 1.5,
+            stroke_linecap: "round",
+            stroke_linejoin: "round"
+          }).path({ d: "M3 6h18M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M5 6l1 14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1l1-14M10 10v7M14 10v7" });
+        }
+      }
+      this.#ui.src.source.getNode("main.palette.content.properties.editor.rows").setValue(this.#ui.src.prepareSource(builder.source));
+    }
+    #addAttribute() {
+      if (!this.#snapshot) return;
+      this.#ui.data.getItem("editor.rows").setItem(`r${++this.#nextRow}`, this.#row("", "", false));
+      this.#ui.data.setItem("editor.status", "");
+      this.#renderEditor();
+      this.shadowRoot.querySelector('[aria-label="New attribute name"]').focus();
+    }
+    #acceptEdit(target) {
+      this.#ui.data.setItem("editor.dirty", false);
+      const rows = this.#ui.data.getItem("editor.rows").getNodes();
+      if (rows.some((row) => row.value.getItem("removed") || row.value.getItem("initialName") === "")) {
+        this.#loadEditor(this.#selected());
+      } else {
+        this.#snapshot = {
+          node: target,
+          value: target.getValue(true),
+          attrs: { ...target.getAttr() },
+          resolver: target.resolver,
+          revision: this.#connection?.nodeInfo(target).revision
+        };
+        for (const row of rows) {
+          row.value.setItem("initialText", row.value.getItem("text"));
+          row.value.setItem("initialType", row.value.getItem("type"));
+        }
+      }
+      this.#ui.data.setItem("editor.status", "");
+    }
+    #applyEdit(after = () => {
+    }, focusTarget = this.shadowRoot.activeElement) {
+      if (this.#ui.data.getItem("busy")) return false;
+      try {
+        if (!this.#unchanged()) throw new Error("Node changed or was removed. Press Escape to reload the cell before saving.");
+        const attrs = Object.hasOwn(this.#snapshot.attrs, "_meta") ? { _meta: this.#snapshot.attrs._meta } : {};
+        let value = this.#snapshot.value;
+        for (const node of this.#ui.data.getItem("editor.rows").getNodes()) {
+          const row = node.getValue(true);
+          const primary = row.getItem("primary");
+          const name = row.getItem("name");
+          if (row.getItem("removed")) continue;
+          if (!primary) {
+            if (!name.trim()) throw new Error("Enter an attribute name.");
+            if (["__proto__", "prototype", "constructor"].includes(name) || name === "_meta" && !row.getItem("locked")) throw new Error("Unsupported attribute name.");
+            if (Object.hasOwn(attrs, name)) throw new Error(`Duplicate attribute: ${name}`);
+          }
+          const initialName = row.getItem("initialName");
+          const unchanged = row.getItem("text") === row.getItem("initialText") && row.getItem("type") === row.getItem("initialType") && (primary || Object.hasOwn(this.#snapshot.attrs, initialName));
+          const text = row.getItem("text");
+          const parsed = row.getItem("locked") || unchanged && !row.getItem("isNull") ? primary ? value : this.#snapshot.attrs[initialName] : row.getItem("isNull") || text === null ? null : parseScalar(row.getItem("type"), String(text) + (row.getItem("type") === "datetime" ? "Z" : ""));
+          if (primary) value = parsed;
+          else attrs[name] = parsed;
+        }
+        const target = this.#snapshot.node;
+        const changed = Object.keys(attrs).length !== Object.keys(this.#snapshot.attrs).length || Object.entries(attrs).some(([name, item]) => !Object.is(item, this.#snapshot.attrs[name]));
+        if (this.#connection) {
+          const connection = this.#connection;
+          const entry = this.#selected();
+          const command = {
+            root: this.#ui.data.getItem("root"),
+            path: entry.path.join("."),
+            nodeId: connection.nodeInfo(target).id,
+            revision: this.#snapshot.revision,
+            set: Object.entries(attrs).filter(([name, item]) => name !== "_meta" && !Object.is(item, this.#snapshot.attrs[name])).map(([name, item]) => [name, encodeScalar(item)]),
+            remove: Object.keys(this.#snapshot.attrs).filter((name) => name !== "_meta" && !Object.hasOwn(attrs, name))
+          };
+          if (!Object.is(value, this.#snapshot.value)) command.value = encodeScalar(value);
+          this.#ui.data.setItem("busy", true);
+          this.#ui.data.setItem("editor.disabled", true);
+          const generation = this.#generation;
+          connection.request("edit", command).then(() => {
+            if (!this.#ui || generation !== this.#generation) return;
+            this.#acceptEdit(target);
+            this.#ui.data.setItem("busy", false);
+            this.#ui.data.setItem("editor.disabled", false);
+            if (focusTarget?.isConnected && !this.shadowRoot.activeElement) focusTarget.focus();
+            this.#refresh();
+            after();
+          }).catch((error) => {
+            if (this.#ui && generation === this.#generation) this.#ui.data.setItem("editor.status", error.message);
+          }).finally(() => {
+            if (this.#ui && generation === this.#generation) {
+              this.#ui.data.setItem("busy", false);
+              this.#ui.data.setItem("editor.disabled", !this.#selected() || this.#state() === "disposed");
+            }
+          });
+          return false;
+        }
+        if (changed) target.setAttr(attrs, true, false, false);
+        if (!Object.is(value, this.#snapshot.value)) target.setValue(value);
+        this.#acceptEdit(target);
+        this.#refresh();
+        this.#ui.data.setItem("editor.status", "");
+        after();
+        return true;
+      } catch (error) {
+        this.#ui.data.setItem("editor.status", error.message);
+        return false;
+      }
+    }
+    #findBreakpoint(root, path) {
+      return this.#ui.data.getItem("breakpoints").getNodes().find((node) => {
+        const value = node.getValue(true);
+        return value.getItem("root") === root && value.getItem("path") === path;
+      });
+    }
+    #loadBreakpoint() {
+      if (this.#ui.data.getItem("breakpointDirty")) return;
+      const entry = this.#selected();
+      const where = this.#breakpointTarget ?? (entry ? { root: this.#ui.data.getItem("root"), path: entry.path.join(".") } : null);
+      const config = where ? this.#findBreakpoint(where.root, where.path)?.getValue(true) : null;
+      this.#ui.data.setItem("editor.mode", config?.getItem("mode") ?? "");
+      this.#ui.data.setItem("editor.condition", config?.getItem("condition") ?? "");
+    }
+    #setBreakpoint(after = () => {
+    }) {
+      const entry = this.#selected();
+      const where = this.#breakpointTarget ?? (entry ? { root: this.#ui.data.getItem("root"), path: entry.path.join(".") } : null);
+      if (!where) return false;
+      const ui = this.#ui;
+      const { root, path } = where;
+      const mode = ui.data.getItem("editor.mode");
+      const condition = ui.data.getItem("editor.condition").trim();
+      const existing = this.#findBreakpoint(root, path);
+      if (this.#connection) {
+        const generation = this.#generation;
+        this.#connection.request("breakpoint", { root, path, mode, condition }).then(() => {
+          if (!this.#ui || generation !== this.#generation) return;
+          ui.data.setItem("breakpointDirty", false);
+          ui.data.setItem("breakpointStatus", "");
+          this.#refresh();
+          after();
+        }).catch((error) => {
+          if (this.#ui && generation === this.#generation) ui.data.setItem("breakpointStatus", `Breakpoint not saved: ${error.message}`);
+        });
+        return false;
+      }
+      try {
+        if (!["", "debugger", "console"].includes(mode)) throw new Error("Unknown breakpoint mode");
+        const test = mode && condition ? new this.ownerDocument.defaultView.Function(
+          "evt",
+          "node",
+          "value",
+          "oldvalue",
+          "attrs_diff",
+          "reason",
+          "path",
+          `"use strict"; return (${condition});`
+        ) : null;
+        if (existing) {
+          ui.data.getItem("breakpoints").popNode(existing.label);
+          this.#breakpointTests.delete(existing.label);
+        }
+        if (mode) {
+          const id = `b${++this.#nextBreakpoint}`;
+          ui.data.getItem("breakpoints").setItem(id, new Bag({ root, path, mode, condition, hits: 0 }));
+          if (test) this.#breakpointTests.set(id, test);
+        }
+        ui.data.setItem("breakpointDirty", false);
+        ui.data.setItem("breakpointError", "");
+        ui.data.setItem("breakpointStatus", mode ? `Breakpoint set on ${root}: ${path}` : "Breakpoint removed");
+        this.#refresh();
+        after();
+        return true;
+      } catch (error) {
+        ui.data.setItem("breakpointStatus", `Breakpoint not saved: ${error.message}`);
+        return false;
+      }
+    }
+    #renderBreakpoints() {
+      const builder = new GramlotBuilder();
+      for (const node of this.#ui.data.getItem("breakpoints").getNodes()) {
+        const config = node.value;
+        const row = builder.root.div({ class: "breakpoint-entry" });
+        row.span(`${config.getItem("root")}: ${config.getItem("path")} \xB7 ${config.getItem("mode")} \xB7 ${config.getItem("hits")} hits`);
+        row.button("\xD7", {
+          type: "button",
+          "aria-label": `Remove breakpoint ${config.getItem("root")}: ${config.getItem("path")}`,
+          "data-breakpoint": node.label,
+          connect_onclick: "inspector.removeBreakpoint"
+        });
+      }
+      this.#ui.src.source.getNode("main.palette.breakpoints.entries").setValue(this.#ui.src.prepareSource(builder.source));
+    }
+    #checkBreakpoints(root, event) {
+      if (!this.#ui) return;
+      const structural = event.evt === "ins" || event.evt === "del";
+      const pathlist = event.pathlist === null ? [] : event.pathlist;
+      for (const node of Array.isArray(event.node) ? event.node : [event.node]) {
+        const path = (structural ? [...pathlist, node.label] : pathlist).join(".");
+        const config = this.#findBreakpoint(root, path);
+        if (!config) continue;
+        const fields = {
+          evt: event.evt,
+          node,
+          value: node.getValue(true),
+          oldvalue: event.oldvalue,
+          attrs_diff: event.attrs_diff,
+          reason: event.reason,
+          path
+        };
+        const test = this.#breakpointTests.get(config.label);
+        if (test) {
+          try {
+            if (!test(fields.evt, node, fields.value, fields.oldvalue, fields.attrs_diff, fields.reason, path)) continue;
+          } catch (error) {
+            this.#ui.data.setItem("breakpointStatus", `Condition failed on ${root}: ${path}: ${error.message}`);
+            this.#ui.data.setItem("breakpointError", `Condition failed on ${root}: ${path}: ${error.message}`);
+            continue;
+          }
+        }
+        const value = config.getValue(true);
+        value.setItem("hits", value.getItem("hits") + 1);
+        this.#ui.data.setItem("breakpointStatus", `Hit ${root}: ${path} (${event.evt})`);
+        this.#hitBreakpoint(value.getItem("mode"), root, fields);
+      }
+    }
+    #hitBreakpoint(mode, root, fields) {
+      if (mode === "debugger") {
+        debugger;
+      } else this.ownerDocument.defaultView.console.log("** Gramlot breakpoint **", root, fields);
+    }
+    #format(value) {
+      if (value instanceof Bag) return `${value.constructor.name} (${value.getNodes().length} nodes)`;
+      if (typeof value === "string") return value;
+      if (value === void 0) return "undefined";
+      if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
+      if (typeof value === "bigint") return `${value}n`;
+      if (value instanceof Date) return value.toISOString();
+      return JSON.stringify(value, null, 2);
+    }
+  };
+  customElements.define("gramlot-tools-inspector", GramlotToolsInspector);
+
+  // src/gramlot_examples/gallery/browser/inspector-messages.js
+  var INSPECTOR_READY = "gallery:inspector-ready";
+  var INSPECTOR_CONNECT = "gallery:inspector-connect";
+
+  // src/gramlot_examples/gallery/browser/gallery-inspector.js
+  function mountGalleryInspector(renderer, root) {
+    const document2 = renderer.destination.ownerDocument;
+    const window2 = document2.defaultView;
+    const button = document2.getElementById("gallery-inspector");
+    const buttonNode = renderer.elements.get(button).node;
+    let entries = /* @__PURE__ */ new Map(), active = null, palette = null, rootAgent = null;
+    const ready = /* @__PURE__ */ new Set();
+    const connections = /* @__PURE__ */ new Map();
+    const buttonState = () => buttonNode.setAttr({ disabled: false, aria_pressed: String(!!palette) });
+    const close = () => {
+      palette?.remove();
+      palette = null;
+      for (const connection of connections.values()) connection.close();
+      connections.clear();
+      rootAgent?.dispose();
+      rootAgent = null;
+      buttonState();
+    };
+    const connectRoot = () => {
+      const channel = new window2.MessageChannel();
+      rootAgent = attachInspectorAgent(window2.gramlot, channel.port1);
+      connections.set("top", new InspectorConnection(channel.port2));
+    };
+    const connectFrame = (entry) => {
+      const channel = new window2.MessageChannel();
+      connections.set(entry.key, new InspectorConnection(channel.port1));
+      entry.frame.contentWindow.postMessage({ type: INSPECTOR_CONNECT }, "*", [channel.port2]);
+    };
+    const sync = (follow = false) => {
+      if (!palette) return;
+      const entry = entries.get(active);
+      const available = entry?.frame && ready.has(entry.frame.contentWindow);
+      if (available && !connections.has(entry.key)) connectFrame(entry);
+      const targets = [{ id: "top", title: `${document2.title || "Gallery"} (top)`, connection: connections.get("top") }];
+      if (available) targets.push({ id: entry.key, title: entry.tab.textContent, connection: connections.get(entry.key) });
+      palette.targets = targets;
+      if (follow) palette.selectedTarget = available ? entry.key : "top";
+      for (const [id, connection] of connections) if (id !== "top" && !entries.has(id)) {
+        connection.close();
+        connections.delete(id);
+      }
+    };
+    const toggle = () => {
+      if (palette) {
+        close();
+        return;
+      }
+      connectRoot();
+      palette = document2.createElement("gramlot-tools-inspector");
+      palette.addEventListener("close", close);
+      sync(true);
+      document2.body.append(palette);
+      buttonState();
+    };
+    const receive = (event) => {
+      if (event.data?.type !== INSPECTOR_READY) return;
+      const entry = [...entries.values()].find((item) => item.frame?.contentWindow === event.source);
+      if (!entry) return;
+      ready.add(event.source);
+      connections.get(entry.key)?.close();
+      connections.delete(entry.key);
+      sync(entry.key === active);
+    };
+    const update = (nextEntries, nextActive) => {
+      const changed = nextActive !== active;
+      entries = nextEntries;
+      active = nextActive;
+      sync(changed);
+    };
+    button.addEventListener("click", toggle);
+    window2.addEventListener("message", receive);
+    buttonState();
+    renderer.onDispose(root, () => {
+      button.removeEventListener("click", toggle);
+      window2.removeEventListener("message", receive);
+      close();
+      ready.clear();
+    });
+    return { update };
+  }
+
+  // src/gramlot_examples/gallery/browser/inspector-entry.js
+  var script = document.currentScript;
+  queueMicrotask(() => {
+    const renderer = window.gramlot.src.renderer;
+    const record = renderer.elements.get(script);
+    if (!record || renderer.disposed || renderer.records.get(record.node) !== record) return;
+    mountGalleryInspector(renderer, record.node);
+  });
+})();