@gramlot/gramlot-examples 0.3.3 → 0.3.5

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

@@ -93,6 +93,239 @@
   function readParameterEnums(node) {
     return Object.fromEntries(Object.entries(node._getMeta("gramlot_component")?.parameters ?? {}).filter(([, spec]) => spec.enum).map(([name, spec]) => [name, spec.enum]));
   }
+  var InspectorHistory = class {
+    #undo = [];
+    #redo = [];
+    #references = /* @__PURE__ */ new WeakMap();
+    constructor(gramlot) {
+      this.gramlot = gramlot;
+      this.Source = gramlot.src.source.constructor;
+      this.Bag = gramlot.data.constructor;
+    }
+    get state() {
+      return { undo: this.#undo.at(-1)?.label ?? "", redo: this.#redo.at(-1)?.label ?? "" };
+    }
+    clear() {
+      this.#undo = [];
+      this.#redo = [];
+    }
+    #ref(node) {
+      if (!this.#references.has(node)) this.#references.set(node, { node });
+      return this.#references.get(node);
+    }
+    #bind(ref, node) {
+      ref.node = node;
+      this.#references.set(node, ref);
+    }
+    #capture(value) {
+      if (!(value instanceof this.Bag)) return value;
+      return value.getNodes().map((node) => [
+        this.#ref(node),
+        node.nodeTag,
+        node.resolver,
+        Object.entries(node.getAttr()).sort(([a], [b]) => a.localeCompare(b)),
+        this.#capture(node.getValue(true))
+      ]);
+    }
+    #equal(a, b) {
+      return Object.is(a, b) || Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => this.#equal(v, b[i]));
+    }
+    #commit(label, capture, redo, undo) {
+      const before = capture();
+      let error;
+      try {
+        redo();
+      } catch (caught) {
+        error = caught;
+      }
+      const after = capture();
+      if (!this.#equal(before, after)) {
+        this.#undo.push({ label, capture, before, after, undo, redo });
+        this.#redo = [];
+      }
+      if (error) throw error;
+    }
+    #step(from, to, direction, expected, result) {
+      const action = from.at(-1);
+      if (!action) return;
+      if (this.gramlot.state === "disposed") throw new Error("Inspected page disconnected");
+      if (!this.#equal(action.capture(), action[expected])) throw new Error("The target changed outside the inspector. Undo/Redo would overwrite those changes.");
+      let error;
+      try {
+        action[direction]();
+      } catch (caught) {
+        error = caught;
+      }
+      if (this.#equal(action.capture(), action[result])) {
+        from.pop();
+        to.push(action);
+      } else if (!error) error = new Error("The application changed the target during Undo/Redo.");
+      if (error) throw error;
+    }
+    undo() {
+      this.#step(this.#undo, this.#redo, "undo", "after", "before");
+    }
+    redo() {
+      this.#step(this.#redo, this.#undo, "redo", "before", "after");
+    }
+    edit(node, attrs, value, changeAttrs, changeValue) {
+      const ref = this.#ref(node), oldAttrs = { ...node.getAttr() }, oldValue = node.getValue(true);
+      const capture = () => [ref.node.parentBag, this.#captureNode(ref.node)];
+      const write = (attributes, content) => {
+        if (changeAttrs) ref.node.setAttr(attributes, true, false, false);
+        if (changeValue) ref.node.setValue(content);
+      };
+      this.#commit("Edit value or attributes", capture, () => write(attrs, value), () => write(oldAttrs, oldValue));
+    }
+    #captureNode(node) {
+      return [node.resolver, Object.entries(node.getAttr()).sort(([a], [b]) => a.localeCompare(b)), this.#capture(node.getValue(true))];
+    }
+    #sourceCapture = () => this.#capture(this.gramlot.src.source);
+    #node(path) {
+      if (typeof path !== "string" || !path) throw new Error("Select a Source node");
+      const node = this.gramlot.src.source.getNode(path);
+      if (!node || node.resolver) throw new Error("Source node is missing or deferred");
+      return node;
+    }
+    #removable(node) {
+      if (node.parentBag === this.gramlot.src.source) throw new Error("The page Source root cannot be removed or moved");
+    }
+    #saved(node) {
+      return { ref: this.#ref(node), label: node.label, tag: node.nodeTag, value: node.getValue(true), attrs: { ...node.getAttr() } };
+    }
+    #restore(saved, bag, index) {
+      if (bag.getNode(saved.label)) throw new Error(`Source label already exists: ${saved.label}`);
+      try {
+        bag.setItem(saved.label, saved.value, saved.attrs, index, false, false, "inspector", false, true, null, saved.tag);
+      } finally {
+        const inserted = bag.getNode(saved.label);
+        if (inserted) this.#bind(saved.ref, inserted);
+      }
+    }
+    #parentState(parent) {
+      return { value: parent.getValue(true), attrs: { ...parent.getAttr() } };
+    }
+    #setParent(parent, state) {
+      parent.setValue(state.value, true, state.attrs, false);
+      parent.setAttr(state.attrs, true, false, false);
+    }
+    childFields(parent) {
+      const specifications = parent._getMeta("gramlot_component")?.childParameters ?? {};
+      return Object.entries(specifications).filter(([, spec]) => spec.required).map(([name, spec]) => {
+        const children = parent.getValue(true);
+        const used = spec.unique && children instanceof this.Source ? children.getNodes().map((child) => child.getAttr(name)) : [];
+        return { name, choices: spec.enum.filter((value) => !used.includes(value)) };
+      });
+    }
+    validateChild(parent, attrs, moving = null) {
+      const specifications = parent._getMeta("gramlot_component")?.childParameters ?? {};
+      for (const [name, spec] of Object.entries(specifications)) {
+        const value = attrs[name];
+        if (spec.required && value == null) throw new Error(`Choose ${name} before inserting the child`);
+        if (spec.enum && value != null && !spec.enum.includes(value)) throw new Error(`Invalid ${name}: ${value}`);
+        const children = parent.getValue(true);
+        if (spec.unique && children instanceof this.Source && children.getNodes().some((child) => child !== moving && child.getAttr(name) === value)) {
+          throw new Error(`${name} is already in use: ${value}`);
+        }
+      }
+    }
+    catalog(path) {
+      const node = this.#node(path), builder = node.builder;
+      return Object.entries(builder.schema).filter(([, info]) => !info._meta?.data_element && !info._meta?.subbuilder && !info._meta?.container).map(([tag, info]) => ({ tag, kind: info._meta?.gramlot_component ? "component" : "html", fields: this.childFields(node) }));
+    }
+    insert(path, requestedTag, attrs = {}) {
+      const parent = this.#node(path), builder = parent.builder;
+      const tag = builder.schemaTag(requestedTag);
+      if (!this.catalog(path).some((entry) => entry.tag === tag)) throw new Error("Choose an available component or HTML tag");
+      this.validateChild(parent, attrs);
+      const previous = this.#parentState(parent), parentRef = this.#ref(parent);
+      let saved, promoted;
+      const redo = () => {
+        if (saved) {
+          if (!(previous.value instanceof this.Source)) this.#setParent(parentRef.node, promoted);
+          this.#restore(saved, parentRef.node.getValue(true), parentRef.node.getValue(true).getNodes().length);
+          return;
+        }
+        const existing = previous.value instanceof this.Source ? new Set(previous.value.getNodes()) : /* @__PURE__ */ new Set();
+        try {
+          builder.commandOnNode(parentRef.node, tag, null, attrs);
+        } finally {
+          const body = parentRef.node.getValue(true);
+          if (body instanceof this.Source) {
+            const added = body.getNodes().find((node) => !existing.has(node));
+            if (added) {
+              saved = this.#saved(added);
+              promoted = this.#parentState(parentRef.node);
+            }
+          }
+        }
+      };
+      const undo = () => {
+        if (saved) saved.ref.node.parentBag.popNode(saved.ref.node.label, "inspector");
+        if (!(previous.value instanceof this.Source)) this.#setParent(parentRef.node, previous);
+      };
+      this.#commit("Add element", this.#sourceCapture, redo, undo);
+      return `${path}.${saved.label}`;
+    }
+    remove(path) {
+      const node = this.#node(path);
+      this.#removable(node);
+      const saved = this.#saved(node), bag = node.parentBag, index = bag.getNodes().indexOf(node);
+      this.#commit(
+        "Remove branch",
+        this.#sourceCapture,
+        () => saved.ref.node.parentBag.popNode(saved.label, "inspector"),
+        () => this.#restore(saved, bag, index)
+      );
+      return path.slice(0, path.lastIndexOf("."));
+    }
+    move(path, destination, placement) {
+      if (!["before", "inside", "after"].includes(placement)) throw new Error("Invalid drop position");
+      const node = this.#node(path), target = this.#node(destination);
+      this.#removable(node);
+      if (path === destination || destination.startsWith(path + ".")) throw new Error("A branch cannot be moved into itself");
+      const parent = placement === "inside" ? target : target.parentBag.parentNode;
+      if (!parent) throw new Error("Drop inside the page Source root");
+      const builder = parent.builder;
+      if (node.builder !== builder) throw new Error("Branches cannot cross builder dialects");
+      this.validateChild(parent, node.getAttr(), node);
+      const parentRef = this.#ref(parent);
+      const previous = this.#parentState(parent), origin = node.parentBag, oldIndex = origin.getNodes().indexOf(node);
+      const body = previous.value;
+      if (body instanceof this.Source && body !== origin && body.getNode(node.label)) throw new Error(`Source label already exists: ${node.label}`);
+      const children = body instanceof this.Source ? body.getNodes().filter((child) => child !== node) : [];
+      if (parent.nodeTag) {
+        builder.validateParent(node.nodeTag, parent.nodeTag);
+        builder.validateChildren(parent.nodeTag, [...children.map((child) => child.nodeTag), node.nodeTag]);
+      }
+      let index = placement === "inside" ? children.length : children.indexOf(target) + (placement === "after" ? 1 : 0);
+      if (index < 0) throw new Error("Drop target changed");
+      if (body === origin) {
+        const ref = this.#ref(node);
+        this.#commit("Move branch", this.#sourceCapture, () => origin.move(origin.getNodes().indexOf(ref.node), index), () => origin.move(origin.getNodes().indexOf(ref.node), oldIndex));
+      } else {
+        const saved = this.#saved(node);
+        const destinationBag = body instanceof this.Source ? body : new this.Source(null, builder);
+        let promoted;
+        this.#commit("Move branch", this.#sourceCapture, () => {
+          if (!(body instanceof this.Source)) {
+            if (promoted) this.#setParent(parentRef.node, promoted);
+            else {
+              builder.promoteNodeValue(parentRef.node, body, destinationBag);
+              promoted = this.#parentState(parentRef.node);
+            }
+          }
+          saved.ref.node.parentBag.popNode(saved.label, "inspector");
+          this.#restore(saved, destinationBag, index);
+        }, () => {
+          saved.ref.node.parentBag.popNode(saved.label, "inspector");
+          this.#restore(saved, origin, oldIndex);
+          if (!(body instanceof this.Source)) this.#setParent(parentRef.node, previous);
+        });
+      }
+      return `${placement === "inside" ? destination : destination.slice(0, destination.lastIndexOf("."))}.${node.label}`;
+    }
+  };
   var InspectorStyles = class {
     #document;
     #element = null;
@@ -168,6 +401,7 @@
     const document2 = gramlot.src.renderer.destination.ownerDocument;
     const window2 = document2.defaultView;
     const styles = new InspectorStyles(document2);
+    const history = new InspectorHistory(gramlot);
     const subscriber = `inspector-bridge-${window2.crypto.getRandomValues(new Uint32Array(4)).join("-")}`;
     const identities = /* @__PURE__ */ new WeakMap();
     const versions = /* @__PURE__ */ new WeakMap();
@@ -202,7 +436,8 @@
     const snapshot = () => ({
       data: describe(bag("data"), "data"),
       source: describe(bag("source"), "source"),
-      breakpoints: [...breakpoints.values()].map(({ test, ...record }) => record)
+      breakpoints: [...breakpoints.values()].map(({ test, ...record }) => record),
+      history: history.state
     });
     const send = (data) => {
       if (!stopped) port.postMessage(data);
@@ -275,8 +510,7 @@
         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);
+      history.edit(node, attrs, value, !!(command.set.length || command.remove.length), Object.hasOwn(command, "value"));
     };
     const setBreakpoint = (command) => {
       bag(command.root);
@@ -302,10 +536,27 @@
           send({ type: "result", id: message.id, ok: true, styles: styles.snapshot() });
           return;
         }
-        if (message.type === "edit") edit(message.command);
+        let selection;
+        if (message.type === "catalog") {
+          send({ type: "result", id: message.id, ok: true, catalog: history.catalog(message.command.path) });
+          return;
+        }
+        if (["insert", "remove", "move"].includes(message.type)) {
+          const command = message.command, node = bag("source").getNode(command.path);
+          if (!node || identity(node) !== command.nodeId || (versions.get(node) ?? 0) !== command.revision) throw new Error("Source node changed. Select it again.");
+          if (message.type === "insert") selection = history.insert(command.path, command.tag, command.attrs);
+          if (message.type === "remove") selection = history.remove(command.path);
+          if (message.type === "move") {
+            const target = bag("source").getNode(command.destination);
+            if (!target || identity(target) !== command.targetId || (versions.get(target) ?? 0) !== command.targetRevision) throw new Error("Drop target changed. Try again.");
+            selection = history.move(command.path, command.destination, command.placement);
+          }
+        } else if (message.type === "undo") history.undo();
+        else if (message.type === "redo") history.redo();
+        else 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() });
+        send({ type: "result", id: message.id, ok: true, selection, snapshot: snapshot() });
       } catch (error) {
         send({ type: "result", id: message.id, ok: false, error: error.message });
       }
@@ -316,6 +567,7 @@
       stopped = true;
       for (const root of roots) bag(root).unsubscribe(subscriber, { any: true });
       breakpoints.clear();
+      history.clear();
       styles.dispose();
       port.removeEventListener("message", receive);
       window2.removeEventListener("pagehide", dispose);
@@ -347,6 +599,7 @@
     error = "";
     breakpoints = [];
     styles = null;
+    history = { undo: "", redo: "" };
     #info = /* @__PURE__ */ new WeakMap();
     #listeners = /* @__PURE__ */ new Set();
     #pending = /* @__PURE__ */ new Map();
@@ -378,6 +631,7 @@
         if (message.snapshot) {
           for (const root of roots2) this.#reconcile(this[root], message.snapshot[root]);
           this.breakpoints = message.snapshot.breakpoints;
+          this.history = message.snapshot.history;
           this.state = "started";
           this.error = "";
         } else if (message.type === "error") this.error = message.error;
@@ -388,7 +642,7 @@
         const pending = this.#pending.get(message.id);
         if (pending) {
           this.#pending.delete(message.id);
-          if (message.ok && !this.error) pending.resolve();
+          if (message.ok && !this.error) pending.resolve(message);
           else pending.reject(new Error(message.error || this.error));
         }
       }
@@ -451,8 +705,8 @@
       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 { display: inline-flex; align-items: center; justify-content: center; 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\n.property-value select.enum-value { flex: 1; min-width: 0; max-width: none; width: 100%; border: 0; background: white; font: inherit; padding: 1px 5px; }\n\n/* Presentation changes preserve the inspector runtime and selection. */\n:host([hidden]) { display: none; }\n:host([docked]) { display: block; height: 100%; min-height: 0; }\n:host([docked][hidden]) { display: none; }\n:host([docked]) > div { height: 100%; }\n:host([docked]) .targetbar select { min-height: 40px; font-size: 16px; }\n:host([docked]) .property-row { min-height: 36px; font-size: 13px; }\n:host([docked]) .property-row input { min-height: 35px; font-size: 16px; }\n:host([docked]) .remove { opacity: 1; min-height: 35px; width: 32px; }\n\n:host([docked]) { --tree-action-size: 28px; --tree-font-size: 14px; --tree-row-height: 40px; --separator-size: 14px; }\n:host([docked]) .targetbar { height: 44px; }\n:host([docked]) gramlot-poc-tabs > button { height: 44px; font-size: 14px; }\n:host([docked]) .properties-heading { height: 40px; font-size: 13px; }\n:host([docked]) .properties-heading button { width: 36px; height: 36px; }\n:host([docked]) .property-value select { height: 35px; font-size: 14px; }\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:var(--tree-font-size,11px)/var(--tree-row-height,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:calc(var(--tree-action-size,14px) + 2px); }\n.tree-root > ul { padding-left:2px; }\nsummary, .leaf { position:relative; }\nli { line-height:var(--tree-row-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:calc(-1 * var(--tree-action-size,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:var(--tree-row-height,18px); width:var(--tree-action-size,14px); height:var(--tree-row-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\n@media (hover: none) { .actions { opacity:1; pointer-events:auto; } }\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 { display: inline-flex; align-items: center; justify-content: center; 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\n.property-value select.enum-value { flex: 1; min-width: 0; max-width: none; width: 100%; border: 0; background: white; font: inherit; padding: 1px 5px; }\n\n/* Presentation changes preserve the inspector runtime and selection. */\n:host([hidden]) { display: none; }\n:host([docked]) { display: block; height: 100%; min-height: 0; }\n:host([docked][hidden]) { display: none; }\n:host([docked]) > div { height: 100%; }\n:host([docked]) .targetbar select { min-height: 40px; font-size: 16px; }\n:host([docked]) .property-row { min-height: 36px; font-size: 13px; }\n:host([docked]) .property-row input { min-height: 35px; font-size: 16px; }\n:host([docked]) .remove { opacity: 1; min-height: 35px; width: 32px; }\n\n:host([docked]) { --tree-action-size: 28px; --tree-font-size: 14px; --tree-row-height: 40px; --separator-size: 14px; }\n:host([docked]) .targetbar { height: 44px; }\n:host([docked]) gramlot-poc-tabs > button { height: 44px; font-size: 14px; }\n:host([docked]) .properties-heading { height: 40px; font-size: 13px; }\n:host([docked]) .properties-heading button { width: 36px; height: 36px; }\n:host([docked]) .property-value select { height: 35px; font-size: 14px; }\n\n.history-toolbar { flex:none; display:flex; align-items:center; gap:6px; padding:4px 8px; border-bottom:1px solid #d1d7df; background:#f6f8fb; font:11px/1.4 system-ui,sans-serif; }\n.history-toolbar button { flex:none; padding:3px 6px; border:1px solid #c5cdda; border-radius:3px; background:white; cursor:pointer; }\n.history-toolbar button:disabled { opacity:.45; cursor:default; }\n.history-toolbar span { min-width:0; color:#a12121; overflow-wrap:anywhere; }\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:var(--tree-font-size,11px)/var(--tree-row-height,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:calc(var(--tree-action-size,14px) + 2px); }\n.tree-root > ul { padding-left:2px; }\nsummary, .leaf { position:relative; }\nli { line-height:var(--tree-row-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:calc(-1 * var(--tree-action-size,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:var(--tree-row-height,18px); width:var(--tree-action-size,14px); height:var(--tree-row-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\n@media (hover: none) { .actions { opacity:1; pointer-events:auto; } }\n\n.actions-end { position:static; margin-left:auto; flex:none; }\n[data-drop=inside] { outline:2px solid #356f9f; outline-offset:-2px; background:#e7f0fc; }\n[data-drop=before] { box-shadow:inset 0 2px #356f9f; }\n[data-drop=after] { box-shadow:inset 0 -2px #356f9f; }\n";
   var sequence = 0;
   var GramlotPocTree = class extends HTMLElement {
     constructor() {
@@ -468,6 +722,9 @@
       this._expanded = /* @__PURE__ */ new Set();
       this._nodes = /* @__PURE__ */ new Map();
       this._rowActions = [];
+      this.dragEnabled = false;
+      this.fixedPaths = [];
+      this._drag = null;
       this._pendingRender = null;
       this._subId = `gramlot-poc-tree-${++sequence}`;
     }
@@ -495,6 +752,12 @@
       this._selectedPath = path;
       if (this.isConnected) this._markSelection();
     }
+    revealPath(path) {
+      for (const details of this._root.querySelectorAll("details")) {
+        if (path.startsWith(details.dataset.path + ".")) details.open = true;
+      }
+      this.selectedPath = path;
+    }
     get rowActions() {
       return this._rowActions;
     }
@@ -524,12 +787,22 @@
     }
     _render() {
       this._pendingRender = null;
+      const focused = this.shadowRoot.activeElement;
+      const focusedPath = focused?.closest("[data-node-path]")?.dataset.nodePath;
+      const focusedAction = focused?.dataset.action;
       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 (focusedPath) {
+        let path = focusedPath;
+        while (path && !this._nodes.has(path)) path = path.includes(".") ? path.slice(0, path.lastIndexOf(".")) : "";
+        const row = [...this._root.querySelectorAll("[data-node-path]")].find((item) => item.dataset.nodePath === path);
+        const action = focusedAction && row && [...row.querySelectorAll("button")].find((button) => button.dataset.action === focusedAction);
+        (action || row)?.focus({ preventScroll: true });
+      }
       if (this._selectedPath !== null && !this._nodes.has(this._selectedPath)) {
         this._selectedPath = null;
         this._notifySelection();
@@ -572,35 +845,91 @@
         row.append(caption);
         row.addEventListener("click", () => this._select(path));
         this._actions(row, path, node);
+        this._dragEvents(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);
+      for (const position of ["start", "end"]) {
+        const actions = this.ownerDocument.createElement("span");
+        actions.className = `actions actions-${position}`;
+        for (const action of this._rowActions) {
+          if ((action.position ?? "start") !== position || action.hiddenPaths?.includes(path)) continue;
+          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);
+        }
+        if (actions.childElementCount) row.append(actions);
       }
-      row.append(actions);
+    }
+    _clearDrop() {
+      for (const row of this._root.querySelectorAll("[data-drop]")) delete row.dataset.drop;
+    }
+    _dragEvents(row, path, node) {
+      if (!this.dragEnabled) return;
+      row.draggable = !this.fixedPaths.includes(path);
+      row.addEventListener("dragstart", (event) => {
+        if (!row.draggable || event.target.closest("button")) {
+          event.preventDefault();
+          return;
+        }
+        event.stopPropagation();
+        this._drag = { path, node };
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("application/x-gramlot-source", this._subId);
+      });
+      const placement = (event) => {
+        const rect = row.getBoundingClientRect();
+        const fraction = (event.clientY - rect.top) / rect.height;
+        return this.fixedPaths.includes(path) ? "inside" : fraction < 0.25 ? "before" : fraction > 0.75 ? "after" : "inside";
+      };
+      const valid = () => this._drag && this._drag.path !== path && !path.startsWith(this._drag.path + ".");
+      row.addEventListener("dragover", (event) => {
+        if (!valid()) return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = "move";
+        this._clearDrop();
+        row.dataset.drop = placement(event);
+      });
+      row.addEventListener("dragleave", () => {
+        delete row.dataset.drop;
+      });
+      row.addEventListener("drop", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this._clearDrop();
+        if (!valid() || event.dataTransfer.getData("application/x-gramlot-source") !== this._subId) return;
+        const source = this._drag;
+        this._drag = null;
+        if (this._store.getNode(source.path) !== source.node) return;
+        this.dispatchEvent(new this.ownerDocument.defaultView.CustomEvent("tree-drop", {
+          bubbles: true,
+          composed: true,
+          detail: { path: source.path, destination: path, placement: placement(event) }
+        }));
+      });
+      row.addEventListener("dragend", () => {
+        this._drag = null;
+        this._clearDrop();
+      });
     }
     _markSelection() {
       for (const row of this._root.querySelectorAll("[data-node-path]")) {
@@ -777,6 +1106,9 @@
       }
     }
     #target = null;
+    #history = null;
+    #insertTarget = null;
+    #catalog = [];
     #connection = null;
     #connectionRelease = null;
     #targets = [];
@@ -1020,6 +1352,67 @@
             inspector.#applyEdit(choose);
           } else choose();
         }
+        sourceAction(node, event) {
+          if (event.detail.action === "breakpoint") {
+            this.openBreakpoint(node, event);
+            return;
+          }
+          const run = () => {
+            if (event.detail.action === "insert") inspector.#openInsert(event.detail.path);
+            if (event.detail.action === "remove") {
+              try {
+                inspector.#runCommand("remove", inspector.#sourceCommand(event.detail.path));
+              } catch (error) {
+                ui.data.setItem("status", error.message);
+              }
+            }
+          };
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(run);
+          else run();
+        }
+        sourceDrop(node, event) {
+          const run = () => {
+            try {
+              const { path, destination, placement } = event.detail;
+              const command = inspector.#sourceCommand(path);
+              const target = inspector.#sourceCommand(destination);
+              inspector.#runCommand("move", { ...command, destination, placement, targetId: target.nodeId, targetRevision: target.revision });
+            } catch (error) {
+              ui.data.setItem("status", error.message);
+            }
+          };
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(run);
+          else run();
+        }
+        insertKind() {
+          inspector.#insertChoices();
+        }
+        addElement() {
+          inspector.#runCommand("insert", { ...inspector.#insertTarget, tag: ui.data.getItem("insert.tag"), attrs: Object.fromEntries((inspector.#catalog[0]?.fields ?? []).map(({ name }) => [name, ui.data.getItem(`insert.attrs.${name}`)])) });
+        }
+        closeInsert() {
+          inspector.#dialog("insert").close();
+          inspector.#insertTarget = null;
+        }
+        undo() {
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(() => inspector.#runCommand("undo"));
+          else inspector.#runCommand("undo");
+        }
+        redo() {
+          if (ui.data.getItem("editor.dirty")) inspector.#applyEdit(() => inspector.#runCommand("redo"));
+          else inspector.#runCommand("redo");
+        }
+        historyKey(node, event) {
+          if (!(event.metaKey || event.ctrlKey) || event.altKey || event.target.closest("input,textarea,select,[contenteditable]")) return;
+          if (event.key.toLowerCase() === "z") {
+            event.preventDefault();
+            event.shiftKey ? this.redo() : this.undo();
+          }
+          if (event.key.toLowerCase() === "y") {
+            event.preventDefault();
+            this.redo();
+          }
+        }
         openBreakpoint(node, event) {
           if (event.detail.action !== "breakpoint") return;
           ui.data.setItem("breakpointDirty", false);
@@ -1089,6 +1482,8 @@
         breakpointCount: "\u25CF 0",
         noBreakpoints: true
       })) ui.data.setItem(key, value);
+      ui.data.setItem("history", new Bag({ noUndo: true, noRedo: true, undo: "", redo: "" }));
+      ui.data.setItem("insert", new Bag({ kind: "html", tag: "", html: true, component: false, status: "" }));
       ui.data.setItem("editor", new Bag({ dirty: false, disabled: true, status: "", mode: "", condition: "" }));
       ui.data.setItem("breakpoints", new Bag());
       ui.data.setItem("breakpointDirty", false);
@@ -1096,7 +1491,7 @@
       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", docked: this.hasAttribute("docked") ? "" : null, connect_onclose: "inspector.close" });
+      const palette = this.hasAttribute("embedded") ? root.section({ node_label: "palette", class: "embedded-panel", "aria-label": "Gramlot inspector", connect_onkeydown: "inspector.historyKey" }) : root.webcomponent({ code: "gramlot-poc-palette", node_label: "palette", title: "Gramlot inspector", docked: this.hasAttribute("docked") ? "" : null, connect_onclose: "inspector.close", connect_onkeydown: "inspector.historyKey" });
       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" });
@@ -1108,6 +1503,10 @@
         "aria-selected": "false",
         connect_onclick: "inspector.selectRoot"
       });
+      const historybar = palette.div({ class: "history-toolbar", hidden: "^stylesActive" });
+      historybar.html_button("\u21B6 Undo", { type: "button", disabled: "^history.noUndo", title: "^history.undo", connect_onclick: "inspector.undo" });
+      historybar.html_button("\u21B7 Redo", { type: "button", disabled: "^history.noRedo", title: "^history.redo", connect_onclick: "inspector.redo" });
+      historybar.span("^status", { role: "status" });
       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" });
@@ -1117,7 +1516,8 @@
         "data-root": name,
         hidden: name === "data" ? "^sourceActive" : "^dataActive",
         connect_onchange: "inspector.selectNode",
-        "connect_ontree-action": "inspector.openBreakpoint"
+        "connect_ontree-action": "inspector.sourceAction",
+        "connect_ontree-drop": "inspector.sourceDrop"
       });
       const properties = content.section({ node_label: "properties", slot: "bottom", class: "properties", "aria-label": "Selected node properties" });
       const heading = properties.div({ class: "properties-heading" });
@@ -1169,6 +1569,19 @@
       list.h2("Active breakpoints");
       list.div({ node_label: "entries" });
       list.div({ class: "dialog-actions" }).html_button("Close", { type: "button", connect_onclick: "inspector.closeBreakpoints" });
+      const insert = palette.dialog({ node_label: "insert", "aria-label": "Add Source element", class: "breakpoint-dialog", connect_oncancel: "inspector.closeInsert" });
+      insert.h2("Add a child element");
+      const kind = insert.select({ value: "^insert.kind", "aria-label": "Element kind", connect_onchange: "inspector.insertKind" });
+      kind.option("HTML tag", { value: "html" });
+      kind.option("Widget or container", { value: "component" });
+      insert.select({ node_label: "components", value: "^insert.tag", hidden: "^insert.html", "aria-label": "Widget or container" });
+      insert.input({ value: "^insert.tag", live: true, hidden: "^insert.component", list: `${this.#subscriber}-tags`, "aria-label": "HTML tag", placeholder: "div, span\u2026" });
+      insert.datalist({ node_label: "tags", id: `${this.#subscriber}-tags` });
+      insert.div({ node_label: "fields" });
+      insert.p("^insert.status", { role: "status" });
+      const insertActions = insert.div({ class: "dialog-actions" });
+      insertActions.html_button("Cancel", { type: "button", connect_onclick: "inspector.closeInsert" });
+      insertActions.html_button("Add", { type: "button", disabled: "^busy", connect_onclick: "inspector.addElement" });
       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();
@@ -1194,6 +1607,7 @@
         return;
       }
       if (!this.#target) return;
+      this.#history = new InspectorHistory(this.#target);
       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);
@@ -1201,6 +1615,10 @@
       } });
     }
     #unsubscribe() {
+      this.#history?.clear();
+      this.#history = null;
+      this.#insertTarget = null;
+      if (this.#ui) this.#dialog("insert").close();
       ++this.#styleRequest;
       this.#styles?.dispose();
       this.#styles = null;
@@ -1247,6 +1665,11 @@
           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 history = this.#connection ? this.#connection.history : this.#history?.state;
+        for (const action of ["undo", "redo"]) {
+          ui.data.setItem(`history.${action}`, history?.[action] ?? "");
+          ui.data.setItem(`history.no${action === "undo" ? "Undo" : "Redo"}`, !history?.[action] || ui.data.getItem("busy") || this.#state() !== "started");
+        }
         const count = ui.data.getItem("breakpoints").getNodes().length;
         ui.data.setItem("breakpointCount", `\u25CF ${count}`);
         ui.data.setItem("noBreakpoints", count === 0);
@@ -1256,13 +1679,18 @@
           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.dragEnabled = name === "source";
+          tree.fixedPaths = tree.storeBag?.getNodes().map((node) => node.label) ?? [];
           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"))
-          }];
+          }, ...name === "source" ? [
+            { id: "insert", icon: "+", label: "Add child element", position: "end" },
+            { id: "remove", icon: "\u2212", label: "Remove branch", position: "end", hiddenPaths: tree.fixedPaths }
+          ] : []];
         }
         if (this.#target || this.#connection) this.#index(this.#bag(), []);
         this.#trees[root].selectedPath = this.#selected()?.path.join(".") ?? null;
@@ -1632,8 +2060,7 @@ ${declarations}
           });
           return false;
         }
-        if (changed) target.setAttr(attrs, true, false, false);
-        if (!Object.is(value, this.#snapshot.value)) target.setValue(value);
+        this.#history.edit(target, attrs, value, changed, !Object.is(value, this.#snapshot.value));
         this.#acceptEdit(target);
         this.#refresh();
         this.#ui.data.setItem("editor.status", "");
@@ -1644,6 +2071,91 @@ ${declarations}
         return false;
       }
     }
+    #sourceCommand(path) {
+      const node = this.#targetBag("source").getNode(path);
+      if (!node) throw new Error("Source node no longer exists");
+      const info = this.#connection?.nodeInfo(node);
+      return { path, nodeId: info?.id, revision: info?.revision, ...this.#connection ? {} : { node } };
+    }
+    async #openInsert(path) {
+      if (this.#ui.data.getItem("busy")) return;
+      const generation = this.#generation;
+      try {
+        this.#insertTarget = this.#sourceCommand(path);
+        this.#catalog = this.#connection ? (await this.#connection.request("catalog", { path })).catalog : this.#history.catalog(path);
+        if (!this.#ui || generation !== this.#generation) return;
+        this.#ui.data.setItem("insert.kind", "html");
+        this.#ui.data.setItem("insert.status", "");
+        this.#insertChoices();
+        const builder = new GramlotBuilder();
+        this.#ui.data.setItem("insert.attrs", new Bag());
+        for (const { name, choices } of this.#catalog[0]?.fields ?? []) {
+          builder.root.html_label(name);
+          const field = builder.root.select({ value: `^insert.attrs.${name}`, "aria-label": name });
+          field.option(`Choose ${name}\u2026`, { value: "", disabled: true });
+          for (const value of choices) field.option(value, { value });
+          this.#ui.data.setItem(`insert.attrs.${name}`, "");
+        }
+        this.#ui.src.source.getNode("main.palette.insert.fields").setValue(this.#ui.src.prepareSource(builder.source));
+        this.#dialog("insert").showModal();
+      } catch (error) {
+        if (this.#ui && generation === this.#generation) this.#ui.data.setItem("status", error.message);
+      }
+    }
+    #insertChoices() {
+      const html = this.#ui.data.getItem("insert.kind") === "html";
+      this.#ui.data.setItem("insert.html", html);
+      this.#ui.data.setItem("insert.component", !html);
+      const choices = this.#catalog.filter((item) => item.kind === (html ? "html" : "component"));
+      const builder = new GramlotBuilder();
+      for (const item of choices) builder.root.option(item.tag, { value: item.tag });
+      this.#ui.src.source.getNode(`main.palette.insert.${html ? "tags" : "components"}`).setValue(this.#ui.src.prepareSource(builder.source));
+      this.#ui.data.setItem("insert.tag", html ? "" : choices[0]?.tag ?? "");
+    }
+    async #runCommand(type, command = {}) {
+      const ui = this.#ui;
+      if (ui.data.getItem("busy")) return;
+      const generation = this.#generation;
+      ui.data.setItem("busy", true);
+      ui.data.setItem("status", "");
+      ui.data.setItem("insert.status", "");
+      try {
+        let selection;
+        if (this.#connection) ({ selection } = await this.#connection.request(type, command));
+        else {
+          if (command.path && this.#targetBag("source").getNode(command.path) !== command.node) throw new Error("Source node changed. Select it again.");
+          if (type === "insert") selection = this.#history.insert(command.path, command.tag, command.attrs);
+          if (type === "remove") selection = this.#history.remove(command.path);
+          if (type === "move") selection = this.#history.move(command.path, command.destination, command.placement);
+          if (type === "undo") this.#history.undo();
+          if (type === "redo") this.#history.redo();
+        }
+        if (!this.#ui || generation !== this.#generation) return;
+        if (type === "insert") this.#dialog("insert").close();
+        this.#snapshot = null;
+        ui.data.setItem("editor.dirty", false);
+        this.#refresh();
+        if (selection) {
+          ui.data.setItem("root", "source");
+          ui.data.setItem("tab", "source");
+          this.#refresh();
+          const entry = this.#nodes.find((item) => item.path.join(".") === selection);
+          ui.data.setItem("selection", entry?.id ?? null);
+          this.#trees.source.revealPath(selection);
+          this.#refresh();
+        }
+      } catch (error) {
+        if (this.#ui && generation === this.#generation) {
+          ui.data.setItem("status", error.message);
+          ui.data.setItem("insert.status", error.message);
+        }
+      } finally {
+        if (this.#ui && generation === this.#generation) {
+          ui.data.setItem("busy", false);
+          this.#refresh();
+        }
+      }
+    }
     #findBreakpoint(root, path) {
       return this.#ui.data.getItem("breakpoints").getNodes().find((node) => {
         const value = node.getValue(true);
@@ -1801,7 +2313,7 @@ ${declarations}
   }
 
   // src/gramlot_examples/gallery/dist/theme-styles.js
-  var appearanceStyles2 = { "base": "", "compact": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n', "mimi": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n\n/* Gramlot adaptation of legacy mimi; load after Base and Compact. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-background: #EDEEF0;\n    --gramlot-surface: #F5F5F6;\n    --gramlot-surface-subtle: #E0E1E3;\n    --gramlot-ink: #3C3D40;\n    --gramlot-text-secondary: #6B6E72;\n    --gramlot-border: #BDBFC2;\n    --gramlot-border-control: #9EA0A3;\n    --gramlot-navigation: #48494C;\n    --gramlot-navigation-text: #FFFFFF;\n    --gramlot-action: #0071E3;\n    --gramlot-action-hover: #005BBB;\n    --gramlot-brand-blue: #0071E3;\n    --gramlot-brand-yellow: #9EA0A3;\n    --gramlot-selected: #E8F1FC;\n    --gramlot-focus-ring: #0071E3;\n    --gramlot-field-background: #FFFFFF;\n    --gramlot-field-readonly-background: #E0E1E3;\n    --gramlot-error: #B3261E;\n    --gramlot-error-background: #FFF1F0;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 6%);\n    --gramlot-radius-sm: 4px;\n    --gramlot-radius: 3px;\n    --gramlot-radius-lg: 3px;\n    --gramlot-field-height: 18px;\n    --gramlot-field-padding: 1px 3px;\n    --gramlot-field-line-height: 1.15;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-label-size: .9em;\n    --gramlot-label-gap: 2px;\n    --gramlot-label-color: var(--gramlot-text-secondary);\n    --gramlot-space-4: 6px;\n    --gramlot-font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme="light"]) {\n    --gramlot-background: #242527;\n    --gramlot-surface: #303134;\n    --gramlot-surface-subtle: #3C3D40;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #6B6E72;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3C3D40;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n    }\n  }\n  :root[data-theme="dark"] {\n    --gramlot-background: #242527;\n    --gramlot-surface: #303134;\n    --gramlot-surface-subtle: #3C3D40;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #6B6E72;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3C3D40;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n  }\n}\n@layer gramlot.base {\n  html { font-size: 12px; }\n}\n@layer gramlot.components {\n  :where(label) { font-size: var(--gramlot-label-size); font-weight: normal; color: var(--gramlot-label-color); margin-block-end: var(--gramlot-label-gap); }\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) { min-block-size: 24px; padding: 2px 8px; font-weight: 500; }\n}\n@layer gramlot.utilities {\n  .card { box-shadow: var(--gramlot-shadow); }\n}\n', "joanna": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n\n/* Gramlot adaptation of legacy joanna; load after Base and Compact. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-background: #F2F2F7;\n    --gramlot-surface: #FFFFFF;\n    --gramlot-surface-subtle: #F2F2F7;\n    --gramlot-ink: #3A3A3C;\n    --gramlot-text-secondary: #636366;\n    --gramlot-border: #D1D1D6;\n    --gramlot-border-control: #AEAEB2;\n    --gramlot-navigation: #3A3A3C;\n    --gramlot-navigation-text: #FFFFFF;\n    --gramlot-action: #007AFF;\n    --gramlot-action-hover: #0061CC;\n    --gramlot-brand-blue: #007AFF;\n    --gramlot-brand-yellow: #AEAEB2;\n    --gramlot-selected: #E0EFFF;\n    --gramlot-focus-ring: #007AFF;\n    --gramlot-field-background: #FFFFFF;\n    --gramlot-field-readonly-background: #F2F2F7;\n    --gramlot-error: #B3261E;\n    --gramlot-error-background: #FFF1F0;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 6%);\n    --gramlot-radius-sm: 6px;\n    --gramlot-radius: 6px;\n    --gramlot-radius-lg: 6px;\n    --gramlot-field-height: 20px;\n    --gramlot-field-padding: 1px 3px;\n    --gramlot-field-line-height: 1.15;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-label-size: .8em;\n    --gramlot-label-gap: 2px;\n    --gramlot-label-color: var(--gramlot-text-secondary);\n    --gramlot-space-4: 6px;\n    --gramlot-font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme="light"]) {\n    --gramlot-background: #1C1C1E;\n    --gramlot-surface: #2C2C2E;\n    --gramlot-surface-subtle: #3A3A3C;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #636366;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3A3A3C;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n    }\n  }\n  :root[data-theme="dark"] {\n    --gramlot-background: #1C1C1E;\n    --gramlot-surface: #2C2C2E;\n    --gramlot-surface-subtle: #3A3A3C;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #636366;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3A3A3C;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n  }\n}\n@layer gramlot.base {\n  html { font-size: 13px; }\n}\n@layer gramlot.components {\n  :where(label) { font-size: var(--gramlot-label-size); font-weight: normal; color: var(--gramlot-label-color); margin-block-end: var(--gramlot-label-gap); }\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) { min-block-size: 26px; padding: 2px 8px; font-weight: 500; }\n}\n@layer gramlot.utilities {\n  .card { box-shadow: var(--gramlot-shadow); }\n}\n' };
+  var appearanceStyles2 = { "base": "", "compact": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n', "mimi": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n\n/* Gramlot adaptation of legacy mimi; load after Base and Compact. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-tab-height: 24px;\n    --gramlot-tab-padding: 3px 10px;\n    --gramlot-tab-radius: 3px;\n    --gramlot-tab-gap: 2px;\n    --gramlot-tab-strip-padding: 3px;\n    --gramlot-tab-background: var(--gramlot-background);\n    --gramlot-tab-selected-background: var(--gramlot-surface);\n    --gramlot-tab-selected-color: var(--gramlot-ink);\n    --gramlot-tab-border: var(--gramlot-border);\n    --gramlot-background: #EDEEF0;\n    --gramlot-surface: #F5F5F6;\n    --gramlot-surface-subtle: #E0E1E3;\n    --gramlot-ink: #3C3D40;\n    --gramlot-text-secondary: #6B6E72;\n    --gramlot-border: #BDBFC2;\n    --gramlot-border-control: #9EA0A3;\n    --gramlot-navigation: #48494C;\n    --gramlot-navigation-text: #FFFFFF;\n    --gramlot-action: #0071E3;\n    --gramlot-action-hover: #005BBB;\n    --gramlot-brand-blue: #0071E3;\n    --gramlot-brand-yellow: #9EA0A3;\n    --gramlot-selected: #E8F1FC;\n    --gramlot-focus-ring: #0071E3;\n    --gramlot-field-background: #FFFFFF;\n    --gramlot-field-readonly-background: #E0E1E3;\n    --gramlot-error: #B3261E;\n    --gramlot-error-background: #FFF1F0;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 6%);\n    --gramlot-radius-sm: 4px;\n    --gramlot-radius: 3px;\n    --gramlot-radius-lg: 3px;\n    --gramlot-field-height: 18px;\n    --gramlot-field-padding: 1px 3px;\n    --gramlot-field-line-height: 1.15;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-label-size: .9em;\n    --gramlot-label-gap: 2px;\n    --gramlot-label-color: var(--gramlot-text-secondary);\n    --gramlot-space-4: 6px;\n    --gramlot-font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme="light"]) {\n    --gramlot-background: #242527;\n    --gramlot-surface: #303134;\n    --gramlot-surface-subtle: #3C3D40;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #6B6E72;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3C3D40;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n    }\n  }\n  :root[data-theme="dark"] {\n    --gramlot-background: #242527;\n    --gramlot-surface: #303134;\n    --gramlot-surface-subtle: #3C3D40;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #6B6E72;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3C3D40;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n  }\n}\n@layer gramlot.base {\n  html { font-size: 12px; }\n}\n@layer gramlot.components {\n  :where(label) { font-size: var(--gramlot-label-size); font-weight: normal; color: var(--gramlot-label-color); margin-block-end: var(--gramlot-label-gap); }\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) { min-block-size: 24px; padding: 2px 8px; font-weight: 500; }\n}\n@layer gramlot.utilities {\n  .card { box-shadow: var(--gramlot-shadow); }\n}\n', "joanna": '/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-field-height: 28px;\n    --gramlot-field-line-height: 1.35;\n    --gramlot-field-padding: .25rem .5rem;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-space-1: .2rem;\n    --gramlot-space-2: .4rem;\n    --gramlot-space-3: .5rem;\n    --gramlot-space-4: .6rem;\n    --gramlot-space-6: .9rem;\n    --gramlot-space-8: 1.2rem;\n    --gramlot-space-12: 1.8rem;\n    --gramlot-radius-sm: .25rem;\n    --gramlot-radius: .35rem;\n    --gramlot-radius-lg: .4rem;\n  }\n}\n\n@layer gramlot.base {\n  html { font-size: 13px; }\n  body { line-height: 1.35; }\n  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure) { margin-block: 0 .5rem; }\n  h1 { font-size: 1.35rem; }\n  h2 { font-size: 1.15rem; }\n  h3 { font-size: 1.05rem; }\n  pre { padding: .5rem; }\n  blockquote { padding-inline-start: .6rem; }\n  hr { margin-block: 1rem; }\n}\n\n@layer gramlot.components {\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) {\n    min-block-size: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\n  }\n  :where(label) { font-size: .95rem; }\n  :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {\n    min-block-size: var(--gramlot-field-height);\n    padding: var(--gramlot-field-padding);\n    font-size: var(--gramlot-field-font-size);\n    line-height: var(--gramlot-field-line-height);\n  }\n  :where(textarea) { min-block-size: 5rem; }\n  :where(input[type="color"]) { min-block-size: 28px; }\n  :where(input[type="file"])::file-selector-button { margin-inline-end: .5rem; padding: .25rem .5rem; }\n  :where(fieldset) { margin-block-end: .6rem; padding: .5rem; }\n  :where(table) { font-size: 1rem; }\n  :where(th, td) { padding: .4rem .5rem; }\n  :where(details) { padding: .4rem .5rem; }\n  :where(details[open] > summary) { margin-block-end: .5rem; }\n  :where(dialog) { padding: .75rem; }\n}\n\n@layer gramlot.utilities {\n  .example-page { inline-size: min(100% - 1.2rem, var(--gramlot-page-width)); padding-block: .6rem; }\n  .card { padding: .6rem; box-shadow: none; }\n}\n\n/* Gramlot adaptation of legacy joanna; load after Base and Compact. */\n@layer gramlot.tokens {\n  :root {\n    --gramlot-tab-height: 26px;\n    --gramlot-tab-padding: 3px 10px;\n    --gramlot-tab-radius: 6px;\n    --gramlot-tab-gap: 2px;\n    --gramlot-tab-strip-padding: 3px;\n    --gramlot-tab-background: var(--gramlot-background);\n    --gramlot-tab-selected-background: var(--gramlot-surface);\n    --gramlot-tab-selected-color: var(--gramlot-ink);\n    --gramlot-tab-border: var(--gramlot-border);\n    --gramlot-background: #F2F2F7;\n    --gramlot-surface: #FFFFFF;\n    --gramlot-surface-subtle: #F2F2F7;\n    --gramlot-ink: #3A3A3C;\n    --gramlot-text-secondary: #636366;\n    --gramlot-border: #D1D1D6;\n    --gramlot-border-control: #AEAEB2;\n    --gramlot-navigation: #3A3A3C;\n    --gramlot-navigation-text: #FFFFFF;\n    --gramlot-action: #007AFF;\n    --gramlot-action-hover: #0061CC;\n    --gramlot-brand-blue: #007AFF;\n    --gramlot-brand-yellow: #AEAEB2;\n    --gramlot-selected: #E0EFFF;\n    --gramlot-focus-ring: #007AFF;\n    --gramlot-field-background: #FFFFFF;\n    --gramlot-field-readonly-background: #F2F2F7;\n    --gramlot-error: #B3261E;\n    --gramlot-error-background: #FFF1F0;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 6%);\n    --gramlot-radius-sm: 6px;\n    --gramlot-radius: 6px;\n    --gramlot-radius-lg: 6px;\n    --gramlot-field-height: 20px;\n    --gramlot-field-padding: 1px 3px;\n    --gramlot-field-line-height: 1.15;\n    --gramlot-field-font-size: 1rem;\n    --gramlot-label-size: .8em;\n    --gramlot-label-gap: 2px;\n    --gramlot-label-color: var(--gramlot-text-secondary);\n    --gramlot-space-4: 6px;\n    --gramlot-font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme="light"]) {\n    --gramlot-background: #1C1C1E;\n    --gramlot-surface: #2C2C2E;\n    --gramlot-surface-subtle: #3A3A3C;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #636366;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3A3A3C;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n    }\n  }\n  :root[data-theme="dark"] {\n    --gramlot-background: #1C1C1E;\n    --gramlot-surface: #2C2C2E;\n    --gramlot-surface-subtle: #3A3A3C;\n    --gramlot-ink: #F2F2F7;\n    --gramlot-text-secondary: #C7C7CC;\n    --gramlot-border: #636366;\n    --gramlot-border-control: #8E8E93;\n    --gramlot-navigation: #1C1C1E;\n    --gramlot-action: #78B7FF;\n    --gramlot-action-hover: #A6CFFF;\n    --gramlot-brand-blue: #3478CA;\n    --gramlot-selected: #254163;\n    --gramlot-focus-ring: #78B7FF;\n    --gramlot-field-background: #202124;\n    --gramlot-field-readonly-background: #3A3A3C;\n    --gramlot-error: #FFB4AB;\n    --gramlot-error-background: #482524;\n    --gramlot-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n  }\n}\n@layer gramlot.base {\n  html { font-size: 13px; }\n}\n@layer gramlot.components {\n  :where(label) { font-size: var(--gramlot-label-size); font-weight: normal; color: var(--gramlot-label-color); margin-block-end: var(--gramlot-label-gap); }\n  :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button) { min-block-size: 26px; padding: 2px 8px; font-weight: 500; }\n}\n@layer gramlot.utilities {\n  .card { box-shadow: var(--gramlot-shadow); }\n}\n' };
 
   // src/gramlot_examples/gallery/browser/frame-theme.js
   function mountFrameTheme(renderer, node) {