@gramlot/gramlot-examples 0.2.12 → 0.2.14

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

@@ -6437,30 +6437,82 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     throw new Error(`Invalid ${type} value: ${text2 || "(empty)"}`);
   }
-  var sequence = 0;
+  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 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(text2) {
-    const value = Bag.fromTytx(text2, "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: encodeScalar(value) };
-    const display = value instanceof Bag ? `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 };
-  }
   function attachInspectorAgent(gramlot, port) {
-    if (!(gramlot instanceof Gramlot) || gramlot.state === "disposed") throw new TypeError("Expected a live Gramlot instance");
+    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 = (text2) => {
+      const value = Bag4.fromTytx(text2, "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 subscriber = `inspector-bridge-${++sequence}`;
+    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;
@@ -6478,7 +6530,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const next = /* @__PURE__ */ new Set([...ancestors, store]);
       return store.getNodes().map((node) => {
         const value = node.getValue(true);
-        const branch = !node.resolver && value instanceof Bag;
+        const branch = !node.resolver && value instanceof Bag4;
         return {
           id: identity(node),
           label: node.label,
@@ -6559,12 +6611,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }
       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] = decodeScalar(encoded);
+        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 = decodeScalar(command.value);
+        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);
@@ -6585,6 +6637,14 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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}`);
@@ -6599,6 +6659,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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();
@@ -6610,12 +6671,25 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     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(text2) {
+    const value = Bag.fromTytx(text2, "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();
@@ -6643,8 +6717,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         return;
       }
       try {
+        if (message.styles) this.styles = message.styles;
         if (message.snapshot) {
-          for (const root of roots) this.#reconcile(this[root], message.snapshot[root]);
+          for (const root of roots2) this.#reconcile(this[root], message.snapshot[root]);
           this.breakpoints = message.snapshot.breakpoints;
           this.state = "started";
           this.error = "";
@@ -6665,7 +6740,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     #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 row of rows) {
+      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) {
@@ -6695,6 +6770,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           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 = {}) {
@@ -6716,9 +6793,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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";
+  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 sequence2 = 0;
+  var sequence = 0;
   var GramlotPocTree = class extends HTMLElement {
     constructor() {
       super();
@@ -6734,7 +6811,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this._nodes = /* @__PURE__ */ new Map();
       this._rowActions = [];
       this._pendingRender = null;
-      this._subId = `gramlot-poc-tree-${++sequence2}`;
+      this._subId = `gramlot-poc-tree-${++sequence}`;
     }
     get storeBag() {
       return this._store;
@@ -7052,6 +7129,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     #breakpointTests = /* @__PURE__ */ new Map();
     #trees = {};
     #breakpointTarget = null;
+    #styles = null;
+    #styleNames = "";
+    #styleRequest = 0;
+    #styleDownloadUrl = null;
     constructor() {
       super();
       this.#mount = this.ownerDocument.createElement("div");
@@ -7085,6 +7166,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         this.#ui.data.setItem("breakpointStatus", "");
         this.#subscribe();
         this.#refresh();
+        if (this.#ui.data.getItem("tab") === "styles") this.#loadStyles();
       }
     }
     get targets() {
@@ -7127,6 +7209,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         this.#ui.data.setItem("breakpointDirty", false);
         this.#subscribe();
         this.#refresh();
+        if (this.#ui.data.getItem("tab") === "styles") this.#loadStyles();
       }
     }
     #renderTargets() {
@@ -7213,14 +7296,47 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         }
         selectRoot(node) {
           const choose = () => {
-            ui.data.setItem("root", node.getAttr("data-root"));
-            ui.data.setItem("selection", null);
-            inspector.#snapshot = null;
+            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);
@@ -7283,6 +7399,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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: "",
@@ -7302,14 +7421,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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 = root.webcomponent({ code: "gramlot-poc-palette", node_label: "palette", title: "Gramlot inspector", connect_onclose: "inspector.close" });
+      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"]) toolbar.button(name, {
+      for (const name of ["Data", "Source", "Styles"]) toolbar.button(name, {
         node_label: name.toLowerCase(),
         type: "button",
         role: "tab",
@@ -7318,7 +7438,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         connect_onclick: "inspector.selectRoot"
       });
       palette.p("^error", { role: "alert", class: "error" });
-      const content = palette.webcomponent({ code: "gramlot-poc-splitter", node_label: "content" });
+      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",
@@ -7352,7 +7472,17 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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 footer = palette.footer({ class: "path" });
+      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" });
@@ -7400,6 +7530,14 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       } });
     }
     #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;
@@ -7426,6 +7564,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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));
@@ -7438,7 +7582,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         ui.data.setItem("dataActive", root === "data");
         ui.data.setItem("sourceActive", root === "source");
         for (const name of ["data", "source"]) {
-          ui.src.source.getNode(`main.palette.tabs.${name}`).setAttr({ "aria-selected": String(root === name) });
           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);
@@ -7458,6 +7601,132 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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];
@@ -7551,8 +7820,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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 cell2 = line.div({ class: "property-value" });
-        cell2.input({
+        const cell = line.div({ class: "property-value" });
+        cell.input({
           value: "^.text",
           type: "^.inputType",
           live: true,
@@ -7565,11 +7834,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           connect_onkeydown: "inspector.editKey"
         });
         if (fresh) {
-          const type = cell2.select({ value: "^.type", "aria-label": "New attribute type", "data-row": row.label, connect_onchange: "inspector.typeChanged" });
+          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 = cell2.button({
+          const button = cell.button({
             type: "button",
             disabled: locked,
             "aria-label": `Remove ${name || "new attribute"}`,