@gramlot/gramlot-examples 0.2.16 → 0.3.0

package/README.md

@@ -12,7 +12,7 @@ npm install @gramlot/gramlot-examples
 [![PyPI](https://img.shields.io/pypi/v/gramlot-examples)](https://pypi.org/project/gramlot-examples/)
 [![npm](https://img.shields.io/npm/v/@gramlot/gramlot-examples)](https://www.npmjs.com/package/@gramlot/gramlot-examples)
 
-Current release: 0.2.16.
+Current release: 0.3.0.
 
 [Documentation and learning sequence](https://gramlot-examples.readthedocs.io/en/latest/)
 include every lesson, its Python and JavaScript source, and the gallery guide.
@@ -30,17 +30,20 @@ Choose [packaged or source-checkout updates](docs/010-gallery.md#ge-010-050). A
 
 ## Pages
 
-[`src/gramlot_examples/pages/`](https://github.com/gramlot-org/gramlot-examples/blob/main/src/gramlot_examples/pages/README.md) holds three
+[`src/gramlot_examples/pages/`](https://github.com/gramlot-org/gramlot-examples/blob/main/src/gramlot_examples/pages/README.md) holds four
 families. Each example is a Python page and its JavaScript equivalent, with a
 same-name README:
 
 - `html_svg/`: thirteen HTML and SVG pages, without binding (`e01`–`e13`);
 - `binding/`: eleven pages whose DOM follows the Data (`b01`–`b11`);
-- `controllers/`: twenty-one pages with formulas, controllers, named logic, events, the
+- `controllers/`: twenty-two pages with formulas, controllers, named logic, events, the
   end-to-end story, `dataRpc` calls to the endpoints of the page, `remote` fragments and
-  `dataRemote` values (`c01`–`c21`). Later lessons introduce topics, authored references, native ask,
+  `dataRemote` values (`c01`–`c22`). Later lessons introduce topics, authored references, native ask,
   parent/child messages, plain HTML buttons and delayed Gramlot clicks. The package
-  requires core 0.2.20 or later; each lesson states which features it uses.
+  requires the current core release; each lesson states which features it uses.
+
+- `components/`: twenty-five lessons for inputs, labelbox, formlet, group copy,
+  command buttons and field validation (`w01`–`w25`), with compact touch previews.
 
 Each `NN_name.js` exports `Page` and `Logic`; the Python page `NN_name.py` takes its
 `Logic` from the module beside it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramlot/gramlot-examples",
-  "version": "0.2.16",
+  "version": "0.3.0",
   "description": "Gramlot example pages, the gallery page and its catalogue.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
     "prepack": "node scripts/build-browser.mjs"
   },
   "dependencies": {
-    "@gramlot/gramlot": ">=0.2.20"
+    "@gramlot/gramlot": ">=0.3.0"
   },
   "devDependencies": {
     "@genrojs/bag": ">=0.11.0",
@@ -41,7 +41,8 @@
     "src/gramlot_examples/gallery/page.js",
     "src/gramlot_examples/gallery/gallery-page.js",
     "src/gramlot_examples/gallery/gallery.css",
-    "src/gramlot_examples/gallery/dist"
+    "src/gramlot_examples/gallery/dist",
+    "src/gramlot_examples/gallery/collections.js"
   ],
   "engines": {
     "node": ">=22"

package/src/gramlot_examples/catalog.json

@@ -331,6 +331,162 @@
           "description": "Core 0.2.20: revisit CSS lengths, boolean state and formatted text with attribute pointer transforms."
         }
       ]
+    },
+    {
+      "key": "components",
+      "title": "Input components",
+      "examples": [
+        {
+          "key": "w01",
+          "title": "Textbox and labelbox",
+          "folder": "01_textbox",
+          "description": "Two textboxes share a customer name. Type in either one, switch live editing off and on, and move the label without rebuilding the field."
+        },
+        {
+          "key": "w02",
+          "title": "Checkbox and labelbox",
+          "folder": "02_checkbox",
+          "description": "Two checkboxes share one boolean preference. Click either caption, then disable both using the State checkbox."
+        },
+        {
+          "key": "w03",
+          "title": "RadioButtonText and labelbox",
+          "folder": "03_radio_button_text",
+          "description": "Choose one delivery option in each group. Change the column count and label position, and try the arrow keys inside a group."
+        },
+        {
+          "key": "w04",
+          "title": "Multiline text and labelbox",
+          "folder": "04_text_box_area",
+          "description": "Two multiline fields share one note. Switch live editing and move the label while keeping the text and selection."
+        },
+        {
+          "key": "w05",
+          "title": "Password and labelbox",
+          "folder": "05_passwordbox",
+          "description": "Two password fields share a sample value. The browser masks the characters; changing either field updates the other."
+        },
+        {
+          "key": "w06",
+          "title": "Single radio buttons",
+          "folder": "06_radio_button",
+          "description": "Each radio binds its own boolean. A shared group makes the choices exclusive; a separate group stays independent."
+        },
+        {
+          "key": "w07",
+          "title": "Color and labelbox",
+          "folder": "07_colorpicker",
+          "description": "Choose a color in either picker. Both controls and the swatch follow the same Data value."
+        },
+        {
+          "key": "w08",
+          "title": "Horizontal slider",
+          "folder": "08_horizontal_slider",
+          "description": "Two horizontal sliders share a numeric level. Drag or use the arrow keys; switch live editing to compare immediate and committed updates."
+        },
+        {
+          "key": "w09",
+          "title": "Vertical slider",
+          "folder": "09_vertical_slider",
+          "description": "Vertical and horizontal sliders share the same level. The vertical minimum is at the bottom and the maximum at the top."
+        },
+        {
+          "key": "w10",
+          "title": "Number editing",
+          "folder": "10_number_textbox",
+          "description": "Try a comma decimal, an integer and an exact Decimal. Invalid text stays in the field without changing Data."
+        },
+        {
+          "key": "w11",
+          "title": "Date editing",
+          "folder": "11_date_textbox",
+          "description": "Enter a calendar date or a word such as oggi or domani. Two fields share one civil date."
+        },
+        {
+          "key": "w12",
+          "title": "Time editing",
+          "folder": "12_time_textbox",
+          "description": "Edit a civil time with hours, minutes and optional seconds. The two fields keep the same typed value."
+        },
+        {
+          "key": "w13",
+          "title": "Filtering select",
+          "folder": "13_filtering_select",
+          "description": "Search a caption, store its code. Two fields share the same choice and the same list."
+        },
+        {
+          "key": "w14",
+          "title": "Callback select",
+          "folder": "14_callback_select",
+          "description": "Search 100 random samples generated once in this page. The callback reads a Data Bag, without a server request."
+        },
+        {
+          "key": "w15",
+          "title": "Combo box",
+          "folder": "15_combo_box",
+          "description": "Choose a suggested city or enter a different one. Two fields share the same text; suggestions do not restrict what you can write."
+        },
+        {
+          "key": "w16",
+          "title": "Checkbox group",
+          "folder": "16_checkbox_text",
+          "description": "Choose several notification channels. Two groups share the same comma-separated codes; clearing all choices writes null."
+        },
+        {
+          "key": "w17",
+          "title": "Date calendar",
+          "folder": "17_date_calendar",
+          "description": "Pick a day or type a date. The inline calendar, popup and text-only field share the same Data value."
+        },
+        {
+          "key": "w18",
+          "title": "Required values and length",
+          "folder": "18_validation",
+          "description": "Invalid drafts remain visible with a message while Data keeps the last accepted value."
+        },
+        {
+          "key": "w19",
+          "folder": "19_formlet",
+          "title": "Formlet and shared labels",
+          "description": "Arrange fields in columns and share label settings. Changing the layout preserves each field and its draft."
+        },
+        {
+          "key": "w20",
+          "folder": "20_group_box",
+          "title": "GroupBox and typed copy",
+          "description": "Group customer data under a heading. Copy TYTX with its types or choose plain JSON from the copy menu."
+        },
+        {
+          "key": "w21",
+          "folder": "21_switch",
+          "title": "Checkbox as a switch",
+          "description": "A switch and a checkbox share one boolean. Compare their appearance, captions and read-only state."
+        },
+        {
+          "key": "w22",
+          "folder": "22_button",
+          "title": "Button commands",
+          "description": "Compare the Gramlot command button with plain HTML. Try confirmation and a delayed command."
+        },
+        {
+          "key": "w23",
+          "folder": "23_toggle_button",
+          "title": "Toggle button with LED",
+          "description": "A command button and a checkbox share a boolean. The LED and aria-pressed follow Data."
+        },
+        {
+          "key": "w24",
+          "folder": "24_dropdown_button",
+          "title": "Dropdown commands and persistence",
+          "description": "The main surface executes; the arrow opens the menu. Shift-select a command to run it and make it the default."
+        },
+        {
+          "key": "w25",
+          "folder": "25_validation_engine",
+          "title": "Validation rules and callbacks",
+          "description": "Transformations, conditions, warnings, local callbacks and remote validation."
+        }
+      ]
     }
   ]
 }

package/src/gramlot_examples/gallery/collections.js

@@ -0,0 +1,4 @@
+// Collections selected by the gallery application.
+import inputs from '@gramlot/gramlot/components/inputs';
+import layout from '@gramlot/gramlot/components/layout';
+export const collections = [inputs, layout].map(collection => ({grammar: collection.toDocument(), module: `/gallery/dist/${collection.name}.js`}));

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

@@ -1,4 +1,45 @@
 (() => {
+  // node_modules/@gramlot/gramlot/src/index-theme.js
+  var THEME_READY = "index:theme-ready";
+  var THEME_SET = "index:theme-set";
+  var THEMES = /* @__PURE__ */ new Set(["light", "dark"]);
+  var APPEARANCES = /* @__PURE__ */ new Set(["base", "compact", "mimi", "joanna"]);
+
+  // src/gramlot_examples/gallery/browser/gallery-settings.js
+  var SETTINGS_SET = "gallery:settings-set";
+  var LABEL_POSITIONS = /* @__PURE__ */ new Set(["example", "TL", "TC", "TR", "L", "R", "BL", "BC", "BR"]);
+  function mountFrameSettings(renderer, owner) {
+    const window2 = renderer.destination.ownerDocument.defaultView;
+    if (window2.parent === window2) return;
+    const originals = /* @__PURE__ */ new Map();
+    const message = (event) => {
+      if (event.source !== window2.parent || event.data?.type !== SETTINGS_SET || !LABEL_POSITIONS.has(event.data.labelPosition)) return;
+      if (["auto", "on", "off"].includes(event.data.touchMode)) renderer.binding.gramlot.dom.setTouchMode(event.data.touchMode);
+      const position = event.data.labelPosition;
+      if (position === "example") {
+        for (const [node, attrs] of originals) if (renderer.records.has(node)) node.setAttr(attrs);
+        originals.clear();
+        return;
+      }
+      for (const [node] of renderer.records) {
+        if (node.getAttr("lbl") == null) continue;
+        const component = node._getMeta("gramlot_component");
+        if (component && !component.parameters.value) continue;
+        if (!originals.has(node)) {
+          originals.set(node, Object.fromEntries(["lbl_position"].map((name) => [name, node.getAttr(name)])));
+        }
+        const attrs = originals.get(node);
+        node.setAttr({ ...attrs, lbl_position: position });
+      }
+    };
+    window2.addEventListener("message", message);
+    renderer.onDispose(owner, () => {
+      window2.removeEventListener("message", message);
+      for (const [node, attrs] of originals) if (renderer.records.has(node)) node.setAttr(attrs);
+      originals.clear();
+    });
+  }
+
   // inspector-runtime:runtime
   var Gramlot = window.gramlot.constructor;
   var Bag = window.gramlot.data.constructor;
@@ -49,6 +90,9 @@
     }
     throw new Error(`Invalid ${type} value: ${text || "(empty)"}`);
   }
+  function readParameterEnums(node) {
+    return Object.fromEntries(Object.entries(node._getMeta("gramlot_component")?.parameters ?? {}).filter(([, spec]) => spec.enum).map(([name, spec]) => [name, spec.enum]));
+  }
   var InspectorStyles = class {
     #document;
     #element = null;
@@ -137,7 +181,7 @@
       if (!identities.has(node)) identities.set(node, ++nextNode);
       return identities.get(node);
     };
-    const describe = (store, ancestors = /* @__PURE__ */ new Set()) => {
+    const describe = (store, root, ancestors = /* @__PURE__ */ new Set()) => {
       if (ancestors.has(store)) throw new Error("Inspector snapshots require an acyclic Bag");
       const next = /* @__PURE__ */ new Set([...ancestors, store]);
       return store.getNodes().map((node) => {
@@ -148,15 +192,16 @@
           label: node.label,
           revision: versions.get(node) ?? 0,
           value: branch ? null : cell(value),
-          children: branch ? describe(value, next) : null,
+          children: branch ? describe(value, root, next) : null,
           readonly: !!node.resolver,
+          parameterEnums: root === "source" ? readParameterEnums(node) : {},
           attrs: Object.entries(node.getAttr()).filter(([name]) => name !== "_meta").map(([name, value2]) => [name, cell(value2)])
         };
       });
     };
     const snapshot = () => ({
-      data: describe(bag("data")),
-      source: describe(bag("source")),
+      data: describe(bag("data"), "data"),
+      source: describe(bag("source"), "source"),
       breakpoints: [...breakpoints.values()].map(({ test, ...record }) => record)
     });
     const send = (data) => {
@@ -376,6 +421,7 @@
           id: row.id,
           revision: row.revision,
           branch,
+          parameterEnums: row.parameterEnums,
           readonly: row.readonly || !!row.value?.readonly,
           readonlyAttrs: new Set(row.attrs.filter(([, descriptor]) => descriptor.readonly).map(([name]) => name)),
           valueWire: JSON.stringify(row.value),
@@ -405,7 +451,7 @@
       this.#notify();
     }
   };
-  var gramlot_tools_inspector_default = ":host { all: initial; color-scheme: light; font: 12px/1.4 system-ui, sans-serif; color: #38414b; }\n* { box-sizing: border-box; }\nbutton, input, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\nbutton:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid #3574cb; outline-offset: -1px; }\n.tree { padding: 7px 3px; }\n.properties { background: white; }\n.properties-heading { font-size: 11px; display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 0 8px; background: #f1f3f5; color: #6d7989; border-bottom: 1px solid #d1d7df; }\n.properties-heading button { background: white; border: 1px solid #c5cdda; border-radius: 2px; width: 23px; height: 23px; padding: 0; font-size: 18px; line-height: 20px; }\nfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }\n.property-row { display: grid; grid-template-columns: minmax(95px, 30%) minmax(0, 1fr); min-height: 20px; border-bottom: 1px solid #d1d7df; font-size: 11px; }\n.property-name { display: flex; align-items: center; justify-content: flex-end; background: #888; color: white; font-weight: 700; padding: 1px 6px; border-right: 1px solid #d1d7df; overflow-wrap: anywhere; text-align: right; }\n.property-value { display: flex; align-items: center; min-width: 0; }\n.property-row input { border: 0; border-radius: 0; min-width: 0; width: 100%; height: 19px; padding: 1px 5px; background: transparent; }\n.property-name input { color: white; text-align: right; padding: 0; }\n.property-value input { flex: 1; }\n.property-value input[type=checkbox] { flex: none; width: 14px; height: 14px; margin: 2px 6px; }\n.property-value select { max-width: 82px; height: 20px; padding: 0; border: 0; border-left: 1px solid #d1d7df; background: #f1f3f5; font-size: 10px; }\n.remove { margin-left: auto; flex: none; width: 22px; height: 20px; padding: 3px; border: 0; background: transparent; color: #7c8797; opacity: 0; }\n.remove svg { width: 13px; height: 13px; }\n.property-row:hover .remove, .property-row:focus-within .remove { opacity: 1; }\n.remove:hover { color: #b82323; background: #fbe9e9; }\n:disabled { cursor: default; opacity: .65; }\n.path { flex: none; padding: 5px 9px; border-top: 1px solid #c9cfd6; background: #f5f7f9; color: #697687; font-size: 11px; min-height: 27px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status, .breakpoint-line { font-size: 11px; margin: 0; padding: 3px 8px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status { color: #a12121; }\n.breakpoint-line { background: #fff2ed; color: #854127; border-bottom: 1px solid #d1d7df; }\n.error:empty, .edit-status:empty, .breakpoint-status:empty, .breakpoint-line:empty { display: none; }\n.breakpoint-dialog { width: min(340px, 90vw); color: #38414b; border: 1px solid #bbc3cf; border-radius: 4px; padding: 12px; box-shadow: 0 8px 28px #0003; font: 12px/1.4 system-ui, sans-serif; }\n.breakpoint-dialog::backdrop { background: #0002; }\n.breakpoint-dialog h2 { font-size: 13px; margin: 0 0 10px; overflow-wrap: anywhere; }\n.breakpoint-dialog select, .breakpoint-dialog input { width: 100%; border: 1px solid #bbc3cf; padding: 4px; margin: 0 0 7px; background: white; }\n.dialog-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 7px; }\n.dialog-actions button { padding: 3px 10px; border: 1px solid #bbc3cf; border-radius: 3px; background: #f1f3f5; }\n.heading-label { flex: 1; }\n.properties-heading .breakpoint-count { width: auto; padding: 0 5px; margin-right: 5px; font-size: 11px; color: #b04a35; }\n.breakpoint-entry { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #d1d7df; }\n.breakpoint-entry span { flex: 1; overflow-wrap: anywhere; }\n.breakpoint-entry button { background: transparent; border: 0; font-size: 17px; }\n[hidden] { display: none !important; }\n.targetbar { flex: none; height: 28px; padding: 2px 6px; background: #edf2fa; border-bottom: 1px solid #dadce0; }\n.targetbar select { width: 100%; height: 23px; border: 0; background: transparent; font-size: 11px; }\n.styles-panel { flex: 1; min-height: 0; overflow: auto; background: #fff; font-size: 11px; }\n.styles-toolbar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: #f1f3f5; border-bottom: 1px solid #d1d7df; }\n.styles-toolbar span { flex: 1; font-weight: 600; }\n.styles-toolbar button, .styles-toolbar a { padding: 3px 7px; border: 1px solid #c5cdda; border-radius: 3px; background: white; }\n.styles-toolbar a { color: inherit; text-decoration: none; }\n.styles-toolbar a[aria-disabled=true] { cursor: default; opacity: .65; }\n.styles-toolbar a:focus-visible { outline: 1px solid #3574cb; outline-offset: -1px; }\n.styles-help, .styles-empty, .styles-status { margin: 0; padding: 7px 9px; color: #697687; }\n.styles-status { color: #a12121; }\n.styles-status:empty { display: none; }\n.styles-group h3 { margin: 0; padding: 6px 9px; font-size: 11px; background: #edf2fa; border-block: 1px solid #d1d7df; }\n.style-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 25px 23px; align-items: center; gap: 8px; min-width: 0; padding: 3px 9px; border-bottom: 1px solid #e8ebef; }\n.style-row label { min-width: 0; font: 11px/1.4 ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.style-row input { min-width: 0; width: 100%; height: 23px; padding: 2px 5px; border: 1px solid #c5cdda; border-radius: 3px; background: white; }\n.style-row input[type=color] { width: 25px; padding: 1px; cursor: pointer; }\n.style-row button { grid-column: 4; width: 23px; height: 23px; padding: 0; border: 1px solid #c5cdda; border-radius: 3px; background: #f5f7f9; font-size: 15px; }\n\n:host([embedded]) { display: block; height: 100%; min-height: 0; }\n:host([embedded]) > div { height: 100%; }\n.embedded-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }\n";
+  var gramlot_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";
   var gramlot_poc_tree_default = "/* Copyright 2025-2026 Softwell S.r.l. - SPDX-License-Identifier: Apache-2.0\n * Inspector subset of the DevTools storeTree stylesheet and inspector.css variables. */\n:host { display:block; font:11px/18px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#38414b; }\n:host([hidden]) { display:none; }\nul { list-style:none; margin:0; padding-left:17px; }\n.tree-root { padding-left:16px; }\n.tree-root > ul { padding-left:2px; }\nsummary, .leaf { position:relative; }\nli { line-height:18px; }\nsummary { display:flex; align-items:center; gap:7px; padding:0 5px; cursor:pointer; user-select:none; list-style:none; }\nsummary::-webkit-details-marker { display:none; }\nsummary::before { content:''; width:5px; height:5px; border-right:1.5px solid #78818a; border-bottom:1.5px solid #78818a; transform:rotate(-45deg); flex:none; margin:0 3px; }\ndetails[open] > summary::before { transform:rotate(45deg); }\n.leaf { display:flex; align-items:center; gap:7px; padding:0 5px 0 23px; cursor:pointer; }\nsummary:hover,.leaf:hover { background:#f0f3f6; }\n.selected,.selected:hover { background:transparent; color:#315dbd; font-weight:700; border-radius:2px; }\n.caption { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n/* Reserve a left gutter; showing an action must not shift the node label. */\n.actions { position:absolute; left:-14px; top:0; display:inline-flex; opacity:0; pointer-events:none; }\nsummary:hover > .actions,.leaf:hover > .actions,summary:focus-visible > .actions,.leaf:focus-visible > .actions,\n.actions:has(button:focus-visible),.actions:has(button.active) { opacity:1; pointer-events:auto; }\n.actions button { border:0; background:transparent; color:#80868b; font:inherit; font-size:11px; line-height:18px; width:14px; height:18px; padding:0; cursor:pointer; border-radius:3px; }\n.actions button:hover { background:#e1e5ed; }\n.actions button[data-action=breakpoint] { font-size:0; }\n.actions button[data-action=breakpoint]::before { content:''; display:inline-block; box-sizing:border-box; width:8px; height:8px; border:1.5px solid currentColor; border-radius:50%; vertical-align:middle; }\n.actions button.active { color:#b3261e; }\n.actions button.active.conditional { color:#f9ab00; }\n.actions button.active[data-action=breakpoint]::before { background:currentColor; }\n.actions button:focus-visible,summary:focus-visible,.leaf:focus-visible { outline:2px solid #356f9f; outline-offset:-2px; }\n";
   var sequence = 0;
   var GramlotPocTree = class extends HTMLElement {
@@ -855,6 +901,10 @@
           ui.data.setItem("editor.dirty", true);
           ui.data.setItem("editor.status", "Unsaved changes");
         }
+        enumChanged(node) {
+          this.editChanged(node);
+          inspector.#applyEdit();
+        }
         typeChanged(node) {
           const row = ui.data.getItem(`editor.rows.${node.getAttr("data-row")}`);
           row.setItem("inputType", inspector.#inputType(row.getItem("type")));
@@ -1041,7 +1091,7 @@
       const targetbar = palette.div({ node_label: "targetbar", class: "targetbar", hidden: "^singleTarget" });
       targetbar.select({ node_label: "targets", value: "^targetId", disabled: "^busy", "aria-label": "Inspected page", connect_onchange: "inspector.selectTarget" });
       const toolbar = palette.webcomponent({ code: "gramlot-poc-tabs", node_label: "tabs", role: "tablist", "aria-label": "Inspected root" });
-      for (const name of ["Data", "Source", "Styles"]) toolbar.button(name, {
+      for (const name of ["Data", "Source", "Styles"]) toolbar.html_button(name, {
         node_label: name.toLowerCase(),
         type: "button",
         role: "tab",
@@ -1063,7 +1113,7 @@
       const properties = content.section({ node_label: "properties", slot: "bottom", class: "properties", "aria-label": "Selected node properties" });
       const heading = properties.div({ class: "properties-heading" });
       heading.span("Properties", { class: "heading-label" });
-      heading.button("^breakpointCount", {
+      heading.html_button("^breakpointCount", {
         type: "button",
         class: "breakpoint-count",
         hidden: "^noBreakpoints",
@@ -1071,7 +1121,7 @@
         title: "Active breakpoints",
         connect_onclick: "inspector.showBreakpoints"
       });
-      heading.button("+", {
+      heading.html_button("+", {
         type: "button",
         "aria-label": "Add attribute",
         title: "Add attribute",
@@ -1087,8 +1137,8 @@
       const styles = palette.section({ node_label: "styles", class: "styles-panel", hidden: "^treeActive", "aria-label": "CSS variables" });
       const stylebar = styles.div({ class: "styles-toolbar" });
       stylebar.span("Document variables");
-      stylebar.button("Refresh", { type: "button", disabled: "^styles.busy", connect_onclick: "inspector.refreshStyles" });
-      stylebar.button("Reset all", { type: "button", disabled: "^styles.noChanges", connect_onclick: "inspector.resetStyles" });
+      stylebar.html_button("Refresh", { type: "button", disabled: "^styles.busy", connect_onclick: "inspector.refreshStyles" });
+      stylebar.html_button("Reset all", { type: "button", disabled: "^styles.noChanges", connect_onclick: "inspector.resetStyles" });
       stylebar.a("Download CSS", { href: "^styles.downloadUrl", download: "theme-overrides.css", "aria-disabled": "^styles.noDownload" });
       styles.p("Temporary preview \xB7 Enter or leave a field to apply. Closing the connection clears previews.", { class: "styles-help" });
       styles.p("^styles.status", { role: "status", class: "styles-status" });
@@ -1104,12 +1154,12 @@
       breakpoint.input({ value: "^editor.condition", live: true, connect_oninput: "inspector.breakpointChanged", "aria-label": "Breakpoint condition", placeholder: "Condition (optional)" });
       breakpoint.p("^breakpointStatus", { role: "status", class: "breakpoint-status" });
       const actions = breakpoint.div({ class: "dialog-actions" });
-      actions.button("Cancel", { type: "button", connect_onclick: "inspector.closeBreakpoint" });
-      actions.button("Save", { type: "button", connect_onclick: "inspector.setBreakpoint" });
+      actions.html_button("Cancel", { type: "button", connect_onclick: "inspector.closeBreakpoint" });
+      actions.html_button("Save", { type: "button", connect_onclick: "inspector.setBreakpoint" });
       const list = palette.dialog({ node_label: "breakpoints", "aria-label": "Active breakpoints", class: "breakpoint-dialog" });
       list.h2("Active breakpoints");
       list.div({ node_label: "entries" });
-      list.div({ class: "dialog-actions" }).button("Close", { type: "button", connect_onclick: "inspector.closeBreakpoints" });
+      list.div({ class: "dialog-actions" }).html_button("Close", { type: "button", connect_onclick: "inspector.closeBreakpoints" });
       ui.src.startSource(builder.source);
       for (const name of ["data", "source"]) this.#trees[name] = ui.dom.getDomNode(ui.src.source.getNode(`main.palette.content.tree.${name}`));
       this.#renderTargets();
@@ -1326,7 +1376,7 @@ ${declarations}
           "data-field": "color",
           connect_onchange: "inspector.setStyle"
         });
-        row.button("\u21B6", {
+        row.html_button("\u21B6", {
           type: "button",
           "aria-label": `Reset ${record.name}`,
           title: "Reset variable",
@@ -1396,6 +1446,7 @@ ${declarations}
       this.#snapshot = entry ? {
         node: entry.node,
         value: entry.node.getValue(true),
+        parameterEnums: ui.data.getItem("root") !== "source" ? {} : this.#connection ? this.#connection.nodeInfo(entry.node).parameterEnums : readParameterEnums(entry.node),
         attrs: { ...entry.node.getAttr() },
         resolver: entry.node.resolver,
         revision: this.#connection?.nodeInfo(entry.node)?.revision
@@ -1433,7 +1484,20 @@ ${declarations}
         if (fresh) label.input({ value: "^.name", live: true, "aria-label": "New attribute name", "data-row": row.label, connect_oninput: "inspector.editChanged" });
         else label.span(name);
         const cell = line.div({ class: "property-value" });
-        cell.input({
+        const choices = !primary && this.#snapshot.parameterEnums[name];
+        const value = data.getItem("text");
+        if (choices && choices.includes(value)) {
+          const select = cell.select({
+            value: "^.text",
+            class: "enum-value",
+            disabled: locked,
+            "aria-label": `${name} value`,
+            "data-row": row.label,
+            connect_onchange: "inspector.enumChanged",
+            connect_onkeydown: "inspector.editKey"
+          });
+          for (const choice of choices) select.option(choice, { value: choice });
+        } else cell.input({
           value: "^.text",
           type: "^.inputType",
           live: true,
@@ -1447,10 +1511,10 @@ ${declarations}
         });
         if (fresh) {
           const type = cell.select({ value: "^.type", "aria-label": "New attribute type", "data-row": row.label, connect_onchange: "inspector.typeChanged" });
-          for (const value of editorTypes) type.option(value, { value });
+          for (const value2 of editorTypes) type.option(value2, { value: value2 });
         }
         if (!primary) {
-          const button = cell.button({
+          const button = cell.html_button({
             type: "button",
             disabled: locked,
             "aria-label": `Remove ${name || "new attribute"}`,
@@ -1486,6 +1550,7 @@ ${declarations}
         this.#loadEditor(this.#selected());
       } else {
         this.#snapshot = {
+          ...this.#snapshot,
           node: target,
           value: target.getValue(true),
           attrs: { ...target.getAttr() },
@@ -1645,7 +1710,7 @@ ${declarations}
         const config = node.value;
         const row = builder.root.div({ class: "breakpoint-entry" });
         row.span(`${config.getItem("root")}: ${config.getItem("path")} \xB7 ${config.getItem("mode")} \xB7 ${config.getItem("hits")} hits`);
-        row.button("\xD7", {
+        row.html_button("\xD7", {
           type: "button",
           "aria-label": `Remove breakpoint ${config.getItem("root")}: ${config.getItem("path")}`,
           "data-breakpoint": node.label,
@@ -1726,31 +1791,25 @@ ${declarations}
     });
   }
 
-  // node_modules/@gramlot/gramlot/src/index-theme.js
-  var THEME_READY = "index:theme-ready";
-  var THEME_SET = "index:theme-set";
-  var THEMES = /* @__PURE__ */ new Set(["light", "dark"]);
-  var APPEARANCES = /* @__PURE__ */ new Set(["base", "compact"]);
-
   // src/gramlot_examples/gallery/dist/theme-styles.js
-  var compactStyle2 = '/* 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';
+  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' };
 
   // src/gramlot_examples/gallery/browser/frame-theme.js
   function mountFrameTheme(renderer, node) {
     const window2 = renderer.destination.ownerDocument.defaultView;
     if (window2.parent === window2) return;
-    const style = node.builder.wrapSource(node.parentBag).style(compactStyle2, { media: "all" });
+    const style = node.builder.wrapSource(node.parentBag).style(appearanceStyles2.compact);
     const message = (event) => {
       if (event.source !== window2.parent || event.data?.type !== THEME_SET || !THEMES.has(event.data.theme) || !APPEARANCES.has(event.data.appearance)) return;
       window2.document.documentElement.setAttribute("data-theme", event.data.theme);
-      style.setAttr({ media: event.data.appearance === "compact" ? "all" : "not all" });
+      style.setValue(appearanceStyles2[event.data.appearance]);
     };
     window2.addEventListener("message", message);
     renderer.onDispose(node, () => {
       window2.removeEventListener("message", message);
       if (style.parentBag) style.parentBag.popNode(style.label);
     });
-    window2.parent.postMessage({ type: THEME_READY }, "*");
+    window2.parent.postMessage({ type: THEME_READY, devices: renderer.binding.gramlot.devices }, "*");
   }
 
   // src/gramlot_examples/gallery/browser/frame-entry.js
@@ -1760,6 +1819,7 @@ ${declarations}
     const record = renderer.elements.get(script);
     if (!record || renderer.disposed || renderer.records.get(record.node) !== record) return;
     mountFrameInspector(renderer, record.node);
+    mountFrameSettings(renderer, record.node);
     mountFrameTheme(renderer, record.node);
   });
 })();