@gramlot/gramlot-examples 0.2.15 → 0.3.0

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

@@ -1584,13 +1584,13 @@
   });
 
   // node_modules/@gramlot/gramlot/src/index-page-styles.js
-  var 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';
+  var 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' };
 
   // 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"]);
+  var APPEARANCES = /* @__PURE__ */ new Set(["base", "compact", "mimi", "joanna"]);
 
   // node_modules/@gramlot/gramlot/src/index-page-runtime.js
   function mountIndexPage(renderer, root, onSelection = () => {
@@ -1607,6 +1607,10 @@
     const appearance = byId("index-appearance");
     const sidebar = byId("index-sidebar");
     const sidebarHandle = byId("index-sidebar-divider");
+    const navigationToggle = byId("index-navigation-toggle");
+    const codeToggle = byId("index-code-toggle");
+    const codeSidebar = byId("index-code");
+    const codeHandle = byId("index-code-divider");
     const preferencesKey = `gramlot.${shell.id}.preferences:${window2.location.pathname}`;
     let preferences = {};
     try {
@@ -1630,12 +1634,17 @@
     state.setItem("keyboard", keyboard?.checked ?? false);
     state.setItem("theme", theme?.value ?? "light");
     state.setItem("appearance", appearance?.value ?? "compact");
+    state.setItem("navigationVisible", preferences.navigationVisible !== false);
+    state.setItem("codeVisible", preferences.codeVisible !== false);
     const savePreferences = () => {
       try {
         window2.localStorage.setItem(preferencesKey, JSON.stringify({
           theme: state.getItem("theme"),
           appearance: state.getItem("appearance"),
-          sidebarWidth: state.getItem("preferredSidebarWidth")
+          sidebarWidth: state.getItem("preferredSidebarWidth"),
+          codeWidth: state.getItem("preferredCodeWidth"),
+          navigationVisible: state.getItem("navigationVisible"),
+          codeVisible: state.getItem("codeVisible")
         }));
       } catch (error) {
         if (error.name !== "SecurityError" && error.name !== "QuotaExceededError") throw error;
@@ -1643,7 +1652,7 @@
     };
     const entries2 = /* @__PURE__ */ new Map();
     const releases = [];
-    const style = root.builder.wrapSource(root.value).style(compactStyle, { media: (appearance?.value ?? "compact") === "compact" ? "all" : "not all" });
+    const style = root.builder.wrapSource(root.value).style(appearanceStyles[appearance?.value ?? "compact"]);
     let drag = null;
     let disposed = false;
     let installPrompt = null;
@@ -1673,10 +1682,27 @@
     const send = (frame) => frame.contentWindow.postMessage({ type: THEME_SET, theme: state.getItem("theme"), appearance: state.getItem("appearance") }, "*");
     const applyTheme = () => {
       document2.documentElement.setAttribute("data-theme", state.getItem("theme"));
-      style.setAttr({ media: state.getItem("appearance") === "compact" ? "all" : "not all" });
+      style.setValue(appearanceStyles[state.getItem("appearance")]);
       for (const { frame } of entries2.values()) if (frame) send(frame);
     };
     const updateInspector = () => onSelection(entries2, state.getItem("active"));
+    const updatePanels = () => {
+      if (navigationToggle) {
+        const visible = state.getItem("navigationVisible");
+        set(sidebar, { hidden: !visible });
+        set(sidebarHandle, { hidden: !visible });
+        set(navigationToggle, { aria_expanded: String(visible) });
+        set(shell, { data_navigation_hidden: String(!visible) });
+      }
+      if (codeSidebar) {
+        const available = Boolean(entries2.get(state.getItem("active"))?.code);
+        const visible = available && state.getItem("codeVisible");
+        set(codeSidebar, { hidden: !visible });
+        set(codeHandle, { hidden: !visible });
+        set(codeToggle, { disabled: !available, aria_expanded: String(visible) });
+        set(shell, { data_code_visible: String(visible) });
+      }
+    };
     function select(key) {
       const entry = entries2.get(key);
       if (!opened.getItem(key)) {
@@ -1689,29 +1715,38 @@
         const active = current === key;
         set(item.tab, { aria_selected: String(active), tabindex: active && state.getItem("keyboard") ? 0 : -1 });
         set(item.panel, { hidden: !active });
+        if (item.code) set(item.code, { hidden: !active });
         if (item.open) set(item.open, { aria_current: active ? "page" : null });
       }
       state.setItem("active", key);
+      updatePanels();
       updateInspector();
     }
-    function setRatio(entry, value) {
-      const ratio = Math.max(20, Math.min(80, value));
-      state.setItem(`ratio.${entry.key}`, ratio);
-      set(entry.split, { style: `--split-position: ${ratio}%` });
-      set(entry.handle, { aria_valuenow: ratio });
-    }
     const sidebarMaximum = () => Math.max(120, Math.min(460, Math.floor(window2.innerWidth * 0.6)));
+    const applyWidths = () => set(shell, { style: `--sidebar-width: ${state.getItem("sidebarWidth")}px; --code-width: ${state.getItem("codeWidth") ?? 420}px` });
     const setSidebarWidth = (value, remember = false) => {
       const maximum = sidebarMaximum();
       const width = Math.max(120, Math.min(maximum, value));
       state.setItem("sidebarWidth", width);
-      set(shell, { style: `--sidebar-width: ${width}px` });
+      applyWidths();
       set(sidebarHandle, { aria_valuenow: width, aria_valuemax: maximum });
       if (remember) {
         state.setItem("preferredSidebarWidth", width);
         savePreferences();
       }
     };
+    const codeMaximum = () => Math.max(200, Math.floor(window2.innerWidth * 0.6));
+    const setCodeWidth = (value, remember = false) => {
+      const maximum = codeMaximum();
+      const width = Math.max(200, Math.min(maximum, value));
+      state.setItem("codeWidth", width);
+      applyWidths();
+      set(codeHandle, { aria_valuenow: width, aria_valuemax: maximum });
+      if (remember) {
+        state.setItem("preferredCodeWidth", width);
+        savePreferences();
+      }
+    };
     const beginDrag = (handle, event, move) => {
       if (event.button !== 0) return;
       stopDrag();
@@ -1756,6 +1791,38 @@
       const width = typeof savedWidth === "number" && Number.isFinite(savedWidth) && savedWidth >= 120 && savedWidth <= 460 ? savedWidth : sidebar.getBoundingClientRect().width || Number(sidebarHandle.getAttribute("aria-valuenow"));
       state.setItem("preferredSidebarWidth", width);
       setSidebarWidth(width);
+      listen(navigationToggle, "click", () => {
+        state.setItem("navigationVisible", !state.getItem("navigationVisible"));
+        updatePanels();
+        savePreferences();
+      });
+      listen(codeToggle, "click", () => {
+        state.setItem("codeVisible", !state.getItem("codeVisible"));
+        updatePanels();
+        savePreferences();
+      });
+      if (codeHandle) {
+        const saved = preferences.codeWidth;
+        const width2 = typeof saved === "number" && Number.isFinite(saved) && saved >= 200 ? saved : 420;
+        state.setItem("preferredCodeWidth", width2);
+        setCodeWidth(width2);
+        listen(codeHandle, "keydown", (event) => {
+          const current = state.getItem("codeWidth");
+          const value = event.key === "ArrowLeft" ? current + 10 : event.key === "ArrowRight" ? current - 10 : event.key === "Home" ? 200 : event.key === "End" ? codeMaximum() : null;
+          if (value == null) return;
+          event.preventDefault();
+          setCodeWidth(value, true);
+        });
+        listen(codeHandle, "pointerdown", (event) => beginDrag(
+          codeHandle,
+          event,
+          (x2) => setCodeWidth(Math.round(shell.getBoundingClientRect().right - x2), true)
+        ));
+        listen(codeHandle, "lostpointercapture", () => {
+          if (drag?.handle === codeHandle) stopDrag();
+        });
+        listen(window2, "resize", () => setCodeWidth(state.getItem("preferredCodeWidth")));
+      }
       listen(sidebarHandle, "keydown", (event) => {
         const current = state.getItem("sidebarWidth");
         const value = event.key === "ArrowLeft" ? current - 10 : event.key === "ArrowRight" ? current + 10 : event.key === "Home" ? 120 : event.key === "End" ? sidebarMaximum() : null;
@@ -1778,6 +1845,7 @@
           key,
           tab,
           panel: byId(`panel-${key}`),
+          code: byId(`codepane-${key}`),
           open: key === "intro" ? null : byId(`open-${key}`)
         };
         entries2.set(key, entry);
@@ -1802,25 +1870,7 @@
         prepareEntry(entry, { byId, node, set, listen });
         if (entry.panel.classList.contains("index-category")) continue;
         entry.frame = byId(`frame-${key}`);
-        entry.split = byId(`split-${key}`);
-        entry.handle = byId(`divider-${key}`);
-        if (entry.handle) state.setItem(`ratio.${key}`, Number(entry.handle.getAttribute("aria-valuenow")));
         listen(entry.frame, "load", () => send(entry.frame));
-        if (!entry.handle) continue;
-        listen(entry.handle, "keydown", (event) => {
-          const current = state.getItem(`ratio.${key}`);
-          const value = event.key === "ArrowLeft" ? current - 5 : event.key === "ArrowRight" ? current + 5 : event.key === "Home" ? 20 : event.key === "End" ? 80 : null;
-          if (value == null) return;
-          event.preventDefault();
-          setRatio(entry, value);
-        });
-        listen(entry.handle, "pointerdown", (event) => beginDrag(entry.handle, event, (x2) => {
-          const bounds = entry.split.getBoundingClientRect();
-          if (bounds.width > 0) setRatio(entry, Math.round((x2 - bounds.left) * 100 / bounds.width));
-        }));
-        listen(entry.handle, "lostpointercapture", () => {
-          if (drag?.handle === entry.handle) stopDrag();
-        });
       }
       listen(document2, "pointermove", (event) => {
         if (!drag || event.pointerId !== drag.pointerId) return;
@@ -1839,7 +1889,7 @@
         }
       });
       listen(appearance, "change", () => {
-        if (!APPEARANCES.has(appearance?.value ?? "compact")) throw new Error("Index appearance must be base or compact");
+        if (!APPEARANCES.has(appearance?.value ?? "compact")) throw new Error("Unknown index appearance");
         state.setItem("appearance", appearance?.value ?? "compact");
         set(appearance, { value: appearance?.value ?? "compact" });
         for (const option of appearance.options) set(option, { selected: option.value === (appearance?.value ?? "compact") });
@@ -1865,6 +1915,7 @@
         }
       });
       applyTheme();
+      updatePanels();
       updateInspector();
       renderer.onDispose(root, dispose);
     } catch (error) {
@@ -1874,6 +1925,85 @@
     return { dispose };
   }
 
+  // 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 mountGallerySettings(renderer, root) {
+    const document2 = renderer.destination.ownerDocument;
+    const window2 = document2.defaultView;
+    const control = document2.getElementById("gallery-label-position");
+    const source = renderer.elements.get(control).node;
+    const state = new root.builder.data.constructor();
+    const key = `gramlot.gallery.settings:${window2.location.pathname}`;
+    let saved;
+    try {
+      saved = window2.localStorage.getItem(key);
+    } catch (error) {
+      if (error.name !== "SecurityError") throw error;
+    }
+    state.setItem("labelPosition", LABEL_POSITIONS.has(saved) ? saved : "example");
+    source.setAttr({ value: state.getItem("labelPosition") });
+    for (const option of control.options) renderer.elements.get(option).node.setAttr({ selected: option.value === state.getItem("labelPosition") });
+    const frames = () => [...renderer.records.get(root).element.querySelectorAll(".gallery-preview iframe")];
+    const previewKey = (frame) => frame.id.slice("frame-".length);
+    const send = (frame) => frame.contentWindow.postMessage({
+      type: SETTINGS_SET,
+      labelPosition: state.getItem("labelPosition"),
+      touchMode: state.getItem(`preview.${previewKey(frame)}`) === "mobile" ? "on" : "off"
+    }, "*");
+    const listeners = [];
+    for (const frame of frames()) {
+      const key2 = previewKey(frame);
+      const stage = document2.getElementById(`preview-stage-${key2}`);
+      state.setItem(`preview.${key2}`, "normal");
+      for (const mode of ["normal", "mobile"]) {
+        const button = document2.getElementById(`preview-${mode}-${key2}`);
+        const select = () => {
+          state.setItem(`preview.${key2}`, mode);
+          renderer.elements.get(stage).node.setAttr({ "data-preview-mode": mode });
+          for (const candidate of ["normal", "mobile"]) {
+            const target = document2.getElementById(`preview-${candidate}-${key2}`);
+            renderer.elements.get(target).node.setAttr({ "aria-pressed": String(candidate === mode) });
+          }
+          if (frame.hasAttribute("src")) send(frame);
+        };
+        button.addEventListener("click", select);
+        listeners.push(() => button.removeEventListener("click", select));
+      }
+    }
+    const change = () => {
+      state.setItem("labelPosition", control.value);
+      source.setAttr({ value: control.value });
+      try {
+        window2.localStorage.setItem(key, control.value);
+      } catch (error) {
+        if (!["SecurityError", "QuotaExceededError"].includes(error.name)) throw error;
+      }
+      for (const frame of frames()) if (frame.hasAttribute("src")) send(frame);
+    };
+    const message = (event) => {
+      if (event.data?.type !== THEME_READY) return;
+      const frame = frames().find((item) => item.contentWindow === event.source);
+      if (frame) {
+        send(frame);
+        const button = document2.getElementById(`preview-mobile-${previewKey(frame)}`);
+        if (button) renderer.elements.get(button).node.setAttr({ title: event.data.devices?.length ? `Declared devices: ${event.data.devices.join(", ")}` : "Device suitability not declared; preview only" });
+      }
+    };
+    control.addEventListener("change", change);
+    window2.addEventListener("message", message);
+    let disposed = false;
+    const dispose = () => {
+      if (disposed) return;
+      disposed = true;
+      for (const release of listeners) release();
+      control.removeEventListener("change", change);
+      window2.removeEventListener("message", message);
+    };
+    renderer.onDispose(root, dispose);
+    return { dispose };
+  }
+
   // node_modules/highlight.js/es/core.js
   var import_core = __toESM(require_core(), 1);
   var core_default = import_core.default;
@@ -6354,7 +6484,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 
   // src/gramlot_examples/gallery/browser/gallery.js
   function mountGallery(renderer, root, onSelection) {
-    return mountIndexPage(renderer, root, onSelection, (entry, { byId, node, set, listen }) => {
+    const settings = mountGallerySettings(renderer, root);
+    const index = mountIndexPage(renderer, root, onSelection, (entry, { byId, node, set, listen }) => {
       const { key } = entry;
       renderReadme(byId(`readme-${key}`));
       if (entry.panel.classList.contains("index-category")) return;
@@ -6374,17 +6505,21 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           set(byId(item.getAttribute("aria-controls")), { hidden: !active });
         }
       };
-      for (const [index, sourceTab] of sourceTabs.entries()) {
+      for (const [index2, sourceTab] of sourceTabs.entries()) {
         listen(sourceTab, "click", () => selectSource(sourceTab));
         listen(sourceTab, "keydown", (event) => {
           if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
-          const next = event.key === "Home" ? 0 : event.key === "End" ? sourceTabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + sourceTabs.length) % sourceTabs.length;
+          const next = event.key === "Home" ? 0 : event.key === "End" ? sourceTabs.length - 1 : (index2 + (event.key === "ArrowRight" ? 1 : -1) + sourceTabs.length) % sourceTabs.length;
           event.preventDefault();
           selectSource(sourceTabs[next]);
           sourceTabs[next].focus();
         });
       }
     });
+    return { dispose() {
+      settings.dispose();
+      index.dispose();
+    } };
   }
 
   // inspector-runtime:runtime
@@ -6437,6 +6572,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     throw new Error(`Invalid ${type} value: ${text2 || "(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;
@@ -6525,7 +6663,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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) => {
@@ -6536,15 +6674,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           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) => {
@@ -6764,6 +6903,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           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),
@@ -6793,7 +6933,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.#notify();
     }
   };
-  var gramlot_tools_inspector_default = ":host { all: initial; color-scheme: light; font: 12px/1.4 system-ui, sans-serif; color: #38414b; }\n* { box-sizing: border-box; }\nbutton, input, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\nbutton:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid #3574cb; outline-offset: -1px; }\n.tree { padding: 7px 3px; }\n.properties { background: white; }\n.properties-heading { font-size: 11px; display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 0 8px; background: #f1f3f5; color: #6d7989; border-bottom: 1px solid #d1d7df; }\n.properties-heading button { background: white; border: 1px solid #c5cdda; border-radius: 2px; width: 23px; height: 23px; padding: 0; font-size: 18px; line-height: 20px; }\nfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }\n.property-row { display: grid; grid-template-columns: minmax(95px, 30%) minmax(0, 1fr); min-height: 20px; border-bottom: 1px solid #d1d7df; font-size: 11px; }\n.property-name { display: flex; align-items: center; justify-content: flex-end; background: #888; color: white; font-weight: 700; padding: 1px 6px; border-right: 1px solid #d1d7df; overflow-wrap: anywhere; text-align: right; }\n.property-value { display: flex; align-items: center; min-width: 0; }\n.property-row input { border: 0; border-radius: 0; min-width: 0; width: 100%; height: 19px; padding: 1px 5px; background: transparent; }\n.property-name input { color: white; text-align: right; padding: 0; }\n.property-value input { flex: 1; }\n.property-value input[type=checkbox] { flex: none; width: 14px; height: 14px; margin: 2px 6px; }\n.property-value select { max-width: 82px; height: 20px; padding: 0; border: 0; border-left: 1px solid #d1d7df; background: #f1f3f5; font-size: 10px; }\n.remove { margin-left: auto; flex: none; width: 22px; height: 20px; padding: 3px; border: 0; background: transparent; color: #7c8797; opacity: 0; }\n.remove svg { width: 13px; height: 13px; }\n.property-row:hover .remove, .property-row:focus-within .remove { opacity: 1; }\n.remove:hover { color: #b82323; background: #fbe9e9; }\n:disabled { cursor: default; opacity: .65; }\n.path { flex: none; padding: 5px 9px; border-top: 1px solid #c9cfd6; background: #f5f7f9; color: #697687; font-size: 11px; min-height: 27px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status, .breakpoint-line { font-size: 11px; margin: 0; padding: 3px 8px; overflow-wrap: anywhere; }\n.error, .edit-status, .breakpoint-status { color: #a12121; }\n.breakpoint-line { background: #fff2ed; color: #854127; border-bottom: 1px solid #d1d7df; }\n.error:empty, .edit-status:empty, .breakpoint-status:empty, .breakpoint-line:empty { display: none; }\n.breakpoint-dialog { width: min(340px, 90vw); color: #38414b; border: 1px solid #bbc3cf; border-radius: 4px; padding: 12px; box-shadow: 0 8px 28px #0003; font: 12px/1.4 system-ui, sans-serif; }\n.breakpoint-dialog::backdrop { background: #0002; }\n.breakpoint-dialog h2 { font-size: 13px; margin: 0 0 10px; overflow-wrap: anywhere; }\n.breakpoint-dialog select, .breakpoint-dialog input { width: 100%; border: 1px solid #bbc3cf; padding: 4px; margin: 0 0 7px; background: white; }\n.dialog-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 7px; }\n.dialog-actions button { padding: 3px 10px; border: 1px solid #bbc3cf; border-radius: 3px; background: #f1f3f5; }\n.heading-label { flex: 1; }\n.properties-heading .breakpoint-count { width: auto; padding: 0 5px; margin-right: 5px; font-size: 11px; color: #b04a35; }\n.breakpoint-entry { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #d1d7df; }\n.breakpoint-entry span { flex: 1; overflow-wrap: anywhere; }\n.breakpoint-entry button { background: transparent; border: 0; font-size: 17px; }\n[hidden] { display: none !important; }\n.targetbar { flex: none; height: 28px; padding: 2px 6px; background: #edf2fa; border-bottom: 1px solid #dadce0; }\n.targetbar select { width: 100%; height: 23px; border: 0; background: transparent; font-size: 11px; }\n.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 {
@@ -7243,6 +7383,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           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")));
@@ -7429,7 +7573,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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",
@@ -7451,7 +7595,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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",
@@ -7459,7 +7603,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         title: "Active breakpoints",
         connect_onclick: "inspector.showBreakpoints"
       });
-      heading.button("+", {
+      heading.html_button("+", {
         type: "button",
         "aria-label": "Add attribute",
         title: "Add attribute",
@@ -7475,8 +7619,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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" });
@@ -7492,12 +7636,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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();
@@ -7714,7 +7858,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",
@@ -7784,6 +7928,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
@@ -7821,7 +7966,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,
@@ -7835,10 +7993,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"}`,
@@ -7874,6 +8032,7 @@ ${declarations}
         this.#loadEditor(this.#selected());
       } else {
         this.#snapshot = {
+          ...this.#snapshot,
           node: target,
           value: target.getValue(true),
           attrs: { ...target.getAttr() },
@@ -8033,7 +8192,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,