@gramlot/gramlot-examples 0.2.15 → 0.3.0

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

@@ -0,0 +1,541 @@
+// node_modules/@gramlot/gramlot/src/webcomponent.js
+var NAME = /^[a-z][.0-9_a-z\-\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\u{10000}-\u{EFFFF}]*$/u;
+var RESERVED = /* @__PURE__ */ new Set([
+  "annotation-xml",
+  "color-profile",
+  "font-face",
+  "font-face-src",
+  "font-face-uri",
+  "font-face-format",
+  "font-face-name",
+  "missing-glyph"
+]);
+function webcomponentCode(attrs) {
+  const code = attrs.code;
+  if (typeof code !== "string" || NAME.exec(code)?.[0] !== code || !code.includes("-") || RESERVED.has(code)) {
+    throw new TypeError("webcomponent: code must be a literal custom-element name");
+  }
+  return code;
+}
+
+// node_modules/@gramlot/gramlot/src/components/registry.js
+function freeze(value) {
+  for (const child of Object.values(value)) if (child && typeof child === "object") freeze(child);
+  return Object.freeze(value);
+}
+function annotation(parameter) {
+  if (typeof parameter.dtype !== "string" && !Array.isArray(parameter.dtype)) throw new TypeError("Component parameter requires dtype");
+  const alternatives = (Array.isArray(parameter.dtype) ? parameter.dtype : [parameter.dtype]).map((dtype) => ({ kind: "dtype", dtype }));
+  if (parameter.nullable) alternatives.push({ kind: "dtype", dtype: "NN" });
+  if (parameter.binding && parameter.dtype !== "T") alternatives.push({
+    kind: "annotated",
+    base: { kind: "dtype", dtype: "T" },
+    metadata: [{ kind: "regex", pattern: "^[\\^=].+", flags: 0 }]
+  });
+  return alternatives.length === 1 ? alternatives[0] : { kind: "union", items: alternatives };
+}
+function defineComponent({ name, tag, base, mixins = [], parameters = {}, subTags = "", presentationDefaults = [], dataScope = false, command = false, implementation }) {
+  webcomponentCode({ code: tag });
+  if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(name)) throw new TypeError("Invalid component authoring name");
+  const effective = { ...base.parameters };
+  for (const mixin of mixins) {
+    for (const [key, spec] of Object.entries(mixin.parameters)) {
+      if (Object.hasOwn(effective, key)) throw new Error(`Duplicate mixin parameter: ${key}`);
+      effective[key] = spec;
+    }
+  }
+  Object.assign(effective, parameters);
+  for (const spec of Object.values(effective)) annotation(spec);
+  return Object.freeze({
+    name,
+    tag,
+    base,
+    subTags,
+    presentationDefaults: Object.freeze([...presentationDefaults]),
+    dataScope,
+    command,
+    mixins: Object.freeze([...mixins]),
+    parameters: freeze(structuredClone(effective)),
+    implementation
+  });
+}
+var ComponentCollection = class {
+  #classes = /* @__PURE__ */ new WeakMap();
+  constructor({ name, components }) {
+    this.name = name;
+    this.components = Object.freeze([...components]);
+    const names = /* @__PURE__ */ new Set(), tags = /* @__PURE__ */ new Set();
+    for (const component of components) {
+      if (names.has(component.name.toLowerCase()) || tags.has(component.tag)) {
+        throw new Error(`Duplicate component: ${component.name}`);
+      }
+      names.add(component.name.toLowerCase());
+      tags.add(component.tag);
+    }
+  }
+  /** Same JSON consumed by Python and JavaScript Builders. */
+  toDocument() {
+    return {
+      document_format: { name: "builder_grammar", version: "1.1" },
+      grammar: { name: this.name, version: null, title: this.name, description: null },
+      abstracts: {},
+      elements: Object.fromEntries(this.components.map((component) => [component.name, {
+        doc: null,
+        sub_tags: component.subTags,
+        parent_tags: null,
+        inherits_from: null,
+        ns: null,
+        node_label: null,
+        collection_key: null,
+        attributes: {
+          parameters: [
+            ...Object.entries(component.parameters).map(([name, spec]) => ({
+              name,
+              kind: "keyword_only",
+              role: "attribute",
+              annotation: annotation(spec),
+              has_default: true,
+              default: spec.default ?? null
+            })),
+            {
+              name: "attr",
+              kind: "var_keyword",
+              role: "attribute",
+              annotation: { kind: "any" },
+              has_default: false
+            }
+          ],
+          accepts_var_keyword: true,
+          accepts_var_positional: false
+        },
+        _meta: { render_tag: component.tag, gramlot_component: {
+          parameters: structuredClone(component.parameters),
+          presentationDefaults: [...component.presentationDefaults],
+          dataScope: component.dataScope,
+          command: component.command
+        } }
+      }]))
+    };
+  }
+  /** Register once per document realm, only when the collection is activated. */
+  register(window) {
+    if (this.#classes.has(window)) return;
+    const classes = [];
+    for (const component of this.components) {
+      if (window.customElements.get(component.tag)) throw new Error(`Custom element already registered: ${component.tag}`);
+      let Base = component.base(window.HTMLElement);
+      for (const mixin of component.mixins) Base = mixin(Base);
+      const Class = component.implementation(Base);
+      Object.defineProperty(Class, "gramlotComponent", { value: component });
+      classes.push([component.tag, Class]);
+    }
+    for (const [tag, Class] of classes) window.customElements.define(tag, Class);
+    this.#classes.set(window, classes);
+  }
+};
+function defineCollection(options) {
+  return new ComponentCollection(options);
+}
+
+// node_modules/@gramlot/gramlot/src/components/labelbox.js
+var POSITIONS = ["TL", "TC", "TR", "L", "R", "BL", "BC", "BR"];
+function project(element, attrs, adapt, previous) {
+  const next = adapt(attrs);
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)])) {
+    if (next[key] == null) element.removeAttribute(key);
+    else element.setAttribute(key, String(next[key]));
+  }
+  return next;
+}
+function Labelbox(Base) {
+  return class extends Base {
+    #previous = { box: {}, label: {}, labelBox: {}, controlBox: {} };
+    constructor() {
+      super();
+      this.box = this.ownerDocument.createElement("div");
+      this.box.className = "labelbox";
+      this.labelBox = this.ownerDocument.createElement("div");
+      this.labelBox.className = "label-box";
+      this.fieldLabel = this.ownerDocument.createElement("label");
+      this.fieldLabel.id = "field-label";
+      this.fieldLabel.htmlFor = "control";
+      this.labelBox.append(this.fieldLabel);
+      this.box.append(this.labelBox, this.controlBox);
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = `.labelbox{--gramlot-label-width:initial;--gramlot-formlet-label-width:initial;display:grid;gap:var(--gramlot-label-gap,.25em);grid-template-areas:'label' 'control'}
+                .label-box{grid-area:label;color:var(--gramlot-label-color,var(--gramlot-text-secondary,inherit));font-size:var(--gramlot-label-size,1em)} .control-box{grid-area:control}
+                .labelbox[data-position='L']{grid-template-areas:'label control';align-items:center}
+                .labelbox[data-position='R']{grid-template-areas:'control label';align-items:center}
+                .labelbox[data-position^='B']{grid-template-areas:'control' 'label'}
+                .labelbox[data-position$='C']>.label-box{text-align:center}
+                .labelbox[data-position$='R']>.label-box{text-align:right}
+                .label-box[hidden]{display:none} .label-box label{display:block}
+                .labelbox[data-position='L']>.label-box{text-align:right;padding-right:2px}
+                .labelbox[data-formlet-aligned]>.label-box>label{width:max-content;margin-left:auto}
+                .labelbox[data-position='L']{grid-template-columns:var(--gramlot-label-width,var(--gramlot-formlet-label-width,max-content)) minmax(0,1fr)}`;
+      this.shadowRoot.append(style, this.box);
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      const { lbl, lbl_position = "TL" } = this.parameters;
+      if (!POSITIONS.includes(lbl_position)) throw new TypeError(`Invalid lbl_position: ${lbl_position}`);
+      const groups = { box: {}, label: {}, labelBox: {}, controlBox: {} };
+      const prefixes = [["box_l_", "labelBox"], ["box_c_", "controlBox"], ["lbl_", "label"], ["box_", "box"]];
+      for (const [name, value] of Object.entries(rest)) {
+        const match = prefixes.find(([prefix]) => name.startsWith(prefix));
+        if (match) {
+          groups[match[1]][name.slice(match[0].length)] = value;
+          delete rest[name];
+        }
+      }
+      const elements = { box: this.box, label: this.fieldLabel, labelBox: this.labelBox, controlBox: this.controlBox };
+      for (const [name, element] of Object.entries(elements)) {
+        this.#previous[name] = project(element, groups[name], adapt, this.#previous[name]);
+      }
+      if (attrs.lbl_width == null) this.box.style.removeProperty("--gramlot-label-width");
+      else this.box.style.setProperty("--gramlot-label-width", attrs.lbl_width);
+      this.box.classList.add("labelbox");
+      this.labelBox.classList.add("label-box");
+      this.controlBox.classList.add("control-box");
+      this.box.dataset.position = lbl_position;
+      this.fieldLabel.textContent = lbl ?? "";
+      this.labelBox.hidden = lbl == null || lbl === "";
+      if (this.control.localName !== "input") {
+        if (this.labelBox.hidden) this.control.removeAttribute("aria-labelledby");
+        else this.control.setAttribute("aria-labelledby", "field-label");
+      }
+      this.dispatchEvent(new this.ownerDocument.defaultView.Event("gramlot-label-layout", { bubbles: true }));
+      return rest;
+    }
+  };
+}
+Labelbox.parameters = {
+  lbl: { dtype: "T", qualification: "intl_str", nullable: true, binding: "read" },
+  lbl_position: { dtype: "T", default: "TL", binding: "read", enum: POSITIONS }
+};
+
+// node_modules/@gramlot/gramlot/src/components/parameters.js
+function projectParameters(element, attrs) {
+  element.parameters = Object.fromEntries(Object.entries(element.constructor.gramlotComponent.parameters).map(([name, spec]) => [name, Object.hasOwn(attrs, name) ? attrs[name] : spec.default]));
+  return Object.fromEntries(Object.entries(attrs).filter(([name]) => !Object.hasOwn(element.parameters, name)));
+}
+
+// node_modules/@gramlot/gramlot/src/components/popup.js
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 3;
+function positionPopup(popup, anchor, { align = "start", matchWidth = false } = {}) {
+  const view = anchor.ownerDocument.defaultView;
+  const field = anchor.getBoundingClientRect();
+  const availableWidth = Math.max(0, view.innerWidth - 2 * VIEWPORT_MARGIN);
+  popup.style.setProperty("--gramlot-popup-available-width", `${availableWidth}px`);
+  if (matchWidth) popup.style.width = `${Math.min(field.width, availableWidth)}px`;
+  popup.style.removeProperty("--gramlot-popup-available-height");
+  const natural = popup.getBoundingClientRect();
+  const below = Math.max(0, view.innerHeight - VIEWPORT_MARGIN - field.bottom - ANCHOR_GAP);
+  const above = Math.max(0, field.top - VIEWPORT_MARGIN - ANCHOR_GAP);
+  const upwards = natural.height > below && above > below;
+  popup.style.setProperty("--gramlot-popup-available-height", `${upwards ? above : below}px`);
+  const size = popup.getBoundingClientRect();
+  const left = align === "end" ? field.right - size.width : field.left;
+  const top = upwards ? field.top - size.height - ANCHOR_GAP : field.bottom + ANCHOR_GAP;
+  popup.style.left = `${Math.max(VIEWPORT_MARGIN, Math.min(left, view.innerWidth - size.width - VIEWPORT_MARGIN))}px`;
+  popup.style.top = `${Math.max(VIEWPORT_MARGIN, Math.min(top, view.innerHeight - size.height - VIEWPORT_MARGIN))}px`;
+}
+
+// node_modules/@gramlot/gramlot/src/components/formlet-labels.js
+var FormletLabels = class {
+  #fields = /* @__PURE__ */ new Set();
+  #observer;
+  #frame;
+  constructor(formlet) {
+    this.formlet = formlet;
+    this.window = formlet.ownerDocument.defaultView;
+    this.slot = formlet.control.querySelector("slot");
+  }
+  connect() {
+    this.#observer = new this.window.ResizeObserver(this.schedule);
+    this.#observer.observe(this.formlet.control);
+    this.slot.addEventListener("slotchange", this.schedule);
+    this.formlet.addEventListener("gramlot-label-layout", this.schedule);
+    this.formlet.ownerDocument.fonts.addEventListener("loadingdone", this.schedule);
+    this.schedule();
+  }
+  disconnect() {
+    this.#observer.disconnect();
+    this.window.cancelAnimationFrame(this.#frame);
+    this.#frame = void 0;
+    this.slot.removeEventListener("slotchange", this.schedule);
+    this.formlet.removeEventListener("gramlot-label-layout", this.schedule);
+    this.formlet.ownerDocument.fonts.removeEventListener("loadingdone", this.schedule);
+    for (const field of this.#fields) this.#clear(field);
+    this.#fields.clear();
+  }
+  schedule = () => {
+    if (!this.formlet.isConnected || this.#frame !== void 0) return;
+    this.#frame = this.window.requestAnimationFrame(() => {
+      this.#frame = void 0;
+      this.#align();
+    });
+  };
+  #clear(field) {
+    delete field.box.dataset.formletAligned;
+    field.box.style.removeProperty("--gramlot-formlet-label-width");
+  }
+  #align() {
+    const fields = new Set(this.slot.assignedElements().filter((field) => "fieldLabel" in field && field.box.dataset.position === "L"));
+    for (const field of this.#fields) if (!fields.has(field)) {
+      this.#observer.unobserve(field.fieldLabel);
+      this.#clear(field);
+    }
+    for (const field of fields) {
+      field.box.dataset.formletAligned = "";
+      if (!this.#fields.has(field)) this.#observer.observe(field.fieldLabel);
+    }
+    this.#fields = fields;
+    const columns = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      if (!field.getClientRects().length) continue;
+      const host = field.getBoundingClientRect();
+      const label = field.labelBox.getBoundingClientRect();
+      const style = this.window.getComputedStyle(field.labelBox);
+      const boxStyle = this.window.getComputedStyle(field.box);
+      const gap = parseFloat(boxStyle.columnGap) || 0;
+      const labelLeft = field.labelBox.hidden ? field.box.getBoundingClientRect().left + parseFloat(boxStyle.paddingLeft) + parseFloat(boxStyle.borderLeftWidth) : label.left;
+      const inset = labelLeft - host.left + gap;
+      const width = field.box.style.getPropertyValue("--gramlot-label-width") ? label.width : field.fieldLabel.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+      const column = columns.get(host.left) ?? [];
+      column.push({ field, inset, width });
+      columns.set(host.left, column);
+    }
+    for (const column of columns.values()) {
+      const edge = Math.max(...column.map(({ inset, width }) => inset + width));
+      for (const { field, inset } of column) {
+        field.box.style.setProperty("--gramlot-formlet-label-width", `${edge - inset}px`);
+      }
+    }
+  }
+};
+
+// node_modules/@gramlot/gramlot/src/components/layout.js
+var COPY_FEEDBACK_DURATION = 1600;
+function Container(HTMLElement) {
+  return class extends HTMLElement {
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = `:host{display:block;min-width:0;font:inherit;color:var(--gramlot-ink,CanvasText)}
+                *,*::before,*::after{box-sizing:border-box}.control-box{min-width:0}slot{display:contents}
+                ::slotted(*){min-width:0;max-width:100%}`;
+      this.controlBox = this.ownerDocument.createElement("div");
+      this.controlBox.className = "control-box";
+      this.control = this.controlBox;
+      this.control.id = "control";
+      this.control.append(this.ownerDocument.createElement("slot"));
+      shadow.append(style, this.controlBox);
+    }
+    projectAttributes(attrs) {
+      return projectParameters(this, attrs);
+    }
+  };
+}
+Container.parameters = {};
+var Formlet = defineComponent({
+  name: "formlet",
+  tag: "gramlot-formlet",
+  base: Container,
+  subTags: "*",
+  presentationDefaults: ["lbl_", "box_"],
+  parameters: {
+    columns: { dtype: ["L", "T"], default: 1, binding: "read" },
+    col_min_width: { dtype: "T", nullable: true, binding: "read" }
+  },
+  implementation: (Base) => class extends Base {
+    #labels;
+    constructor() {
+      super();
+      const style = this.ownerDocument.createElement("style");
+      style.textContent = `.control-box{display:grid;gap:inherit;align-items:start}
+                :host{gap:var(--gramlot-formlet-gap,8px 16px)}`;
+      this.shadowRoot.append(style);
+      this.#labels = new FormletLabels(this);
+    }
+    connectedCallback() {
+      this.#labels.connect();
+    }
+    disconnectedCallback() {
+      this.#labels.disconnect();
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      const { columns, col_min_width } = this.parameters;
+      if (typeof columns === "number" && (!Number.isInteger(columns) || columns < 1)) {
+        throw new TypeError("formlet columns must be a positive integer or CSS track list");
+      }
+      this.control.style.gridTemplateColumns = col_min_width ? `repeat(auto-fit, minmax(min(100%, ${col_min_width}), 1fr))` : typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : columns;
+      this.#labels.schedule();
+      return Object.fromEntries(Object.entries(rest).filter(([name]) => !/^(lbl_|box_)/.test(name)));
+    }
+  }
+});
+var GroupBox = defineComponent({
+  name: "groupBox",
+  tag: "gramlot-group-box",
+  base: Container,
+  subTags: "*",
+  dataScope: true,
+  mixins: [Labelbox],
+  parameters: {
+    copy: { dtype: "B", default: false, binding: "read" },
+    lbl_variant: { dtype: "T", default: "bar", binding: "read", enum: ["bar", "underline"] }
+  },
+  implementation: (Base) => class extends Base {
+    #generation = 0;
+    #timer;
+    #busy = false;
+    #menuEvents;
+    #menuOpen = false;
+    constructor() {
+      super();
+      this.control.setAttribute("role", "group");
+      this.fieldLabel.removeAttribute("for");
+      const doc = this.ownerDocument;
+      const style = doc.createElement("style");
+      style.textContent = `.labelbox{gap:0;border:1px solid var(--gramlot-border-control,#aaa);border-radius:var(--gramlot-radius-sm,4px)}
+                .label-box{display:flex;align-items:center;gap:.4em;padding:var(--gramlot-group-header-padding,.35em .65em);background:var(--gramlot-surface-subtle,#eef1f5)}
+                .label-box[hidden]{display:none}.label-box label{flex:1;min-width:0}
+                .control-box{padding:var(--gramlot-group-padding,.65em)}.labelbox[data-variant=underline]{border:0}
+                [data-variant=underline]>.label-box{background:transparent;border-bottom:1px solid var(--gramlot-border-control,#aaa)}
+                .actions{display:flex;align-items:center}.actions[hidden]{display:none}
+                button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:var(--gramlot-radius-sm,4px);background:transparent;
+                    padding:var(--gramlot-group-action-padding,.2em .4em);min-width:var(--gramlot-touch-target,var(--gramlot-group-action-size,24px));min-height:var(--gramlot-touch-target,var(--gramlot-group-action-size,24px))}
+                button:hover{background:var(--gramlot-field-readonly-background,#ddd)}button:disabled{opacity:.5}
+                button:focus-visible{outline:2px solid var(--gramlot-focus-ring,Highlight)}
+                .copy-menu{max-width:var(--gramlot-popup-available-width,100vw);position:fixed;inset:auto;margin:0;padding:var(--gramlot-popup-padding,4px);max-height:var(--gramlot-popup-available-height,100vh);overflow:auto;border:1px solid var(--gramlot-border-control,#aaa);
+                    background:var(--gramlot-field-background,Canvas);color:var(--gramlot-ink,CanvasText);border-radius:var(--gramlot-radius-sm,4px)}
+                .copy-menu button{display:block;width:100%;text-align:left}
+                .status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}`;
+      this.actions = doc.createElement("span");
+      this.actions.className = "actions";
+      this.copyButton = doc.createElement("button");
+      this.copyButton.type = "button";
+      this.copyButton.textContent = "\u29C9";
+      this.copyButton.title = "Copy TYTX";
+      this.copyButton.setAttribute("aria-label", "Copy TYTX");
+      this.menuButton = doc.createElement("button");
+      this.menuButton.type = "button";
+      this.menuButton.textContent = "\u25BE";
+      this.menuButton.setAttribute("aria-label", "Choose copy format");
+      this.menuButton.setAttribute("aria-expanded", "false");
+      this.copyMenu = doc.createElement("div");
+      this.copyMenu.className = "copy-menu";
+      this.copyMenu.id = "copy-menu";
+      this.copyMenu.setAttribute("popover", "auto");
+      this.menuButton.setAttribute("aria-controls", "copy-menu");
+      for (const format of ["TYTX", "JSON"]) {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.textContent = `Copy ${format}`;
+        button.addEventListener("click", () => {
+          this.closeCopyMenu();
+          this.copyData(format);
+        });
+        this.copyMenu.append(button);
+      }
+      this.status = doc.createElement("span");
+      this.status.className = "status";
+      this.status.setAttribute("role", "status");
+      this.copyButton.addEventListener("click", () => this.copyData("TYTX"));
+      this.menuButton.addEventListener("click", () => {
+        if (this.#menuOpen) {
+          this.closeCopyMenu();
+          return;
+        }
+        this.copyMenu.showPopover();
+        this.#menuOpen = true;
+        positionPopup(this.copyMenu, this.menuButton, { align: "end" });
+        const view = doc.defaultView;
+        this.#menuEvents = new view.AbortController();
+        const options = { capture: true, signal: this.#menuEvents.signal };
+        view.addEventListener("scroll", (event) => {
+          if (!event.composedPath().includes(this.copyMenu)) this.closeCopyMenu();
+        }, options);
+        view.addEventListener("resize", () => this.closeCopyMenu(), options);
+        this.copyMenu.firstElementChild.focus();
+      });
+      this.copyMenu.addEventListener("toggle", (event) => {
+        this.menuButton.setAttribute("aria-expanded", String(event.newState === "open"));
+        if (event.newState === "closed") {
+          this.#menuOpen = false;
+          this.#menuEvents?.abort();
+          this.#menuEvents = null;
+        }
+      });
+      this.actions.append(this.copyButton, this.menuButton, this.status);
+      this.labelBox.append(this.actions);
+      this.shadowRoot.append(style, this.copyMenu);
+    }
+    closeCopyMenu() {
+      if (this.#menuOpen) this.copyMenu.hidePopover();
+      this.#menuOpen = false;
+      this.#menuEvents?.abort();
+      this.#menuEvents = null;
+      this.menuButton.setAttribute("aria-expanded", "false");
+    }
+    projectAttributes(attrs, adapt) {
+      const rest = super.projectAttributes(attrs, adapt);
+      if (!this.constructor.gramlotComponent.parameters.lbl_variant.enum.includes(this.parameters.lbl_variant)) throw new TypeError("groupBox lbl_variant must be bar or underline");
+      this.box.dataset.variant = this.parameters.lbl_variant;
+      this.actions.hidden = !this.parameters.copy;
+      if (!this.parameters.copy) this.closeCopyMenu();
+      this.labelBox.hidden = this.labelBox.hidden && !this.parameters.copy;
+      this.copyButton.disabled = this.#busy;
+      this.menuButton.disabled = this.#busy;
+      return rest;
+    }
+    async copyData(format = "TYTX") {
+      if (!["TYTX", "JSON"].includes(format)) throw new TypeError("Copy format must be TYTX or JSON");
+      if (!this.parameters.copy || this.#busy || !this.isConnected) return;
+      const generation = ++this.#generation;
+      this.copyButton.title = "Copy TYTX";
+      this.copyButton.textContent = "\u29C9";
+      this.status.textContent = "";
+      this.#busy = true;
+      this.copyButton.disabled = this.menuButton.disabled = true;
+      this.ownerDocument.defaultView.clearTimeout(this.#timer);
+      try {
+        const bag = this.readDataScope();
+        const text = format === "TYTX" ? bag.toTytx() : JSON.stringify(bag.asDict(false, false, true), null, 2);
+        await this.ownerDocument.defaultView.navigator.clipboard.writeText(text);
+        if (generation !== this.#generation || !this.isConnected) return;
+        this.copyButton.textContent = "\u2713";
+        this.status.textContent = `Copied ${format}`;
+        this.#timer = this.ownerDocument.defaultView.setTimeout(() => {
+          this.copyButton.textContent = "\u29C9";
+          this.status.textContent = "";
+        }, COPY_FEEDBACK_DURATION);
+      } catch (error) {
+        if (generation !== this.#generation || !this.isConnected) return;
+        this.copyButton.textContent = "!";
+        this.copyButton.title = this.status.textContent = `Copy failed: ${error.message}`;
+      } finally {
+        if (generation === this.#generation) {
+          this.#busy = false;
+          this.copyButton.disabled = this.menuButton.disabled = false;
+        }
+      }
+    }
+    disconnectedCallback() {
+      this.closeCopyMenu();
+      this.#generation++;
+      this.#busy = false;
+      this.ownerDocument.defaultView.clearTimeout(this.#timer);
+    }
+  }
+});
+var layout_default = defineCollection({ name: "layout", components: [Formlet, GroupBox] });
+export {
+  Formlet,
+  GroupBox,
+  layout_default as default
+};

package/src/gramlot_examples/gallery/dist/theme-styles.js

@@ -1,2 +1,2 @@
-// Generated from Gramlot Compact; edit the core theme, not this file.
-export const compactStyle = "/* Gramlot Compact: load after gramlot-base/theme.css. Colors and behavior stay in Base. */\n@layer gramlot.tokens {\n  :root {\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: 28px;\n    padding: .25rem .5rem;\n    font-size: 1rem;\n    line-height: 1.35;\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";
+// Generated from canonical Gramlot themes.
+export const appearanceStyles = {"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"};