@operato/property-editor 10.29.9 → 10.29.12

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [10.29.12](https://github.com/hatiolab/operato/compare/v10.29.11...v10.29.12) (2026-10-06)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+### [10.29.11](https://github.com/hatiolab/operato/compare/v10.29.10...v10.29.11) (2026-10-06)
+
+
+### :rocket: New Features
+
+* **property-editor:** number-map rows are compact and aligned, with a slider for a ranged value ([97f145e](https://github.com/hatiolab/operato/commit/97f145e732cddb4340d162321a3ab88185e23795))
+* **property-editor:** thinner number-map rows, and a slider drag applies as it moves ([75ef024](https://github.com/hatiolab/operato/commit/75ef024d217bbfab74a0d96c61ac770594159ab4))
+
+
+### :bug: Bug Fix
+
+* **property-editor:** number-map value field wide enough for a signed decimal ([7b4d851](https://github.com/hatiolab/operato/commit/7b4d8515d73e7a01cad53582c7f876d9953118ac))
+
+
+
 ### [10.29.9](https://github.com/hatiolab/operato/compare/v10.29.8...v10.29.9) (2026-10-05)
 
 **Note:** Version bump only for package @operato/property-editor

package/coverage/lcov-report/index.html

@@ -30,9 +30,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">40.65% </span>
+                <span class="strong">45.74% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>37/91</span>
+                <span class='fraction'>43/94</span>
             </div>
         
             
@@ -115,8 +115,8 @@
 	</td>
 	<td data-value="84.39" class="pct high">84.39%</td>
 	<td data-value="410" class="abs high">346/410</td>
-	<td data-value="42.1" class="pct low">42.1%</td>
-	<td data-value="38" class="abs low">16/38</td>
+	<td data-value="53.65" class="pct medium">53.65%</td>
+	<td data-value="41" class="abs medium">22/41</td>
 	<td data-value="56.25" class="pct medium">56.25%</td>
 	<td data-value="16" class="abs medium">9/16</td>
 	<td data-value="84.39" class="pct high">84.39%</td>
@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-09-26T13:35:47.979Z
+                at 2026-10-06T00:52:46.443Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov.info

@@ -524,8 +524,8 @@ FN:56,hintOf
 FN:62,_valueChanged
 FNF:3
 FNH:3
-FNDA:6,editorTemplate
-FNDA:12,hintOf
+FNDA:5,editorTemplate
+FNDA:10,hintOf
 FNDA:3,_valueChanged
 DA:1,1
 DA:2,1
@@ -555,38 +555,38 @@ DA:25,1
 DA:26,1
 DA:27,1
 DA:28,1
-DA:29,6
-DA:30,6
-DA:31,6
-DA:32,6
-DA:33,6
-DA:34,6
-DA:35,12
-DA:36,12
-DA:37,12
-DA:38,12
-DA:39,12
-DA:40,12
-DA:41,12
-DA:42,12
-DA:43,12
-DA:44,12
-DA:45,12
-DA:46,12
-DA:47,12
-DA:48,12
-DA:49,12
-DA:50,12
-DA:51,6
-DA:52,6
-DA:53,6
-DA:54,6
+DA:29,5
+DA:30,5
+DA:31,5
+DA:32,5
+DA:33,5
+DA:34,5
+DA:35,10
+DA:36,10
+DA:37,10
+DA:38,10
+DA:39,10
+DA:40,10
+DA:41,10
+DA:42,10
+DA:43,10
+DA:44,10
+DA:45,10
+DA:46,10
+DA:47,10
+DA:48,10
+DA:49,10
+DA:50,10
+DA:51,5
+DA:52,5
+DA:53,5
+DA:54,5
 DA:55,1
 DA:56,1
-DA:57,12
-DA:58,12
-DA:59,12
-DA:60,12
+DA:57,10
+DA:58,10
+DA:59,10
+DA:60,10
 DA:61,1
 DA:62,1
 DA:63,3
@@ -598,28 +598,28 @@ DA:68,3
 DA:69,3
 DA:70,3
 DA:71,3
-DA:72,1
-DA:73,1
-DA:74,1
-DA:75,1
-DA:76,2
-DA:77,2
-DA:78,2
-DA:79,2
-DA:80,2
+DA:72,2
+DA:73,2
+DA:74,2
+DA:75,2
+DA:76,1
+DA:77,1
+DA:78,1
+DA:79,1
+DA:80,1
 DA:81,1
 LF:81
 LH:81
-BRDA:28,0,0,6
+BRDA:28,0,0,5
 BRDA:29,1,0,0
 BRDA:29,2,0,0
 BRDA:30,3,0,0
-BRDA:34,4,0,12
-BRDA:42,5,0,8
+BRDA:34,4,0,10
+BRDA:42,5,0,6
 BRDA:42,6,0,4
 BRDA:42,7,0,0
 BRDA:48,8,0,0
-BRDA:56,9,0,12
+BRDA:56,9,0,10
 BRDA:57,10,0,0
 BRDA:58,11,0,0
 BRDA:59,12,0,0
@@ -628,16 +628,19 @@ BRDA:66,14,0,0
 BRDA:67,15,0,0
 BRDA:67,16,0,0
 BRDA:68,17,0,0
-BRDA:70,18,0,1
-BRDA:70,19,0,0
-BRDA:70,20,0,0
-BRDA:71,21,0,1
-BRDA:73,22,0,0
-BRDA:73,23,0,0
-BRDA:76,24,0,2
-BRDA:67,25,0,5
-BRF:26
-BRH:10
+BRDA:70,18,0,2
+BRDA:70,19,0,2
+BRDA:70,20,0,2
+BRDA:70,21,0,2
+BRDA:71,22,0,2
+BRDA:73,23,0,1
+BRDA:73,24,0,1
+BRDA:73,25,0,1
+BRDA:73,26,0,0
+BRDA:76,27,0,1
+BRDA:67,28,0,5
+BRF:29
+BRH:16
 end_of_record
 TN:
 SF:src/ox-property-editor.ts
@@ -662,13 +665,13 @@ FNDA:0,getEditor
 FNDA:4,connectedCallback
 FNDA:0,editorTemplate
 FNDA:0,getDefaultValue
-FNDA:6,render
-FNDA:6,shouldUpdate
+FNDA:5,render
+FNDA:5,shouldUpdate
 FNDA:0,get valueProperty
-FNDA:6,makeup
+FNDA:5,makeup
 FNDA:0,_computeLabelId
 FNDA:0,_valueChanged
-FNDA:2,observe
+FNDA:1,observe
 DA:1,1
 DA:2,1
 DA:3,1
@@ -903,13 +906,13 @@ DA:231,0
 DA:232,0
 DA:233,4
 DA:234,4
-DA:235,6
-DA:236,6
-DA:237,6
-DA:238,6
-DA:239,6
-DA:240,6
-DA:241,6
+DA:235,5
+DA:236,5
+DA:237,5
+DA:238,5
+DA:239,5
+DA:240,5
+DA:241,5
 DA:242,0
 DA:243,0
 DA:244,0
@@ -918,8 +921,8 @@ DA:246,0
 DA:247,0
 DA:248,0
 DA:249,0
-DA:250,6
-DA:251,6
+DA:250,5
+DA:251,5
 DA:252,0
 DA:253,0
 DA:254,0
@@ -935,33 +938,33 @@ DA:263,0
 DA:264,0
 DA:265,0
 DA:266,0
-DA:267,6
-DA:268,6
-DA:269,6
+DA:267,5
+DA:268,5
+DA:269,5
 DA:270,4
 DA:271,4
 DA:272,4
 DA:273,4
-DA:274,6
+DA:274,5
 DA:275,0
 DA:276,0
-DA:277,6
-DA:278,6
-DA:279,6
-DA:280,6
-DA:281,6
-DA:282,6
-DA:283,6
-DA:284,6
-DA:285,6
+DA:277,5
+DA:278,5
+DA:279,5
+DA:280,5
+DA:281,5
+DA:282,5
+DA:283,5
+DA:284,5
+DA:285,5
 DA:286,4
 DA:287,4
 DA:288,0
 DA:289,0
 DA:290,4
 DA:291,4
-DA:292,6
-DA:293,6
+DA:292,5
+DA:293,5
 DA:294,4
 DA:295,4
 DA:296,0
@@ -991,25 +994,25 @@ DA:319,0
 DA:320,0
 DA:321,4
 DA:322,4
-DA:323,2
+DA:323,1
 DA:324,0
 DA:325,0
 DA:326,0
 DA:327,0
-DA:328,2
+DA:328,1
 DA:329,4
 LF:329
 LH:265
 BRDA:9,0,0,4
 BRDA:220,1,0,4
-BRDA:234,2,0,6
+BRDA:234,2,0,5
 BRDA:236,3,0,0
 BRDA:241,4,0,0
 BRDA:251,5,0,0
-BRDA:273,6,0,6
+BRDA:273,6,0,5
 BRDA:274,7,0,0
-BRDA:291,8,0,6
-BRDA:322,9,0,2
+BRDA:291,8,0,5
+BRDA:322,9,0,1
 BRDA:323,10,0,0
 BRDA:323,11,0,0
 BRF:12

package/dist/src/ox-property-editor-number-map.d.ts

@@ -11,15 +11,24 @@ export interface NumberMapEntry {
     default?: number;
 }
 /**
- * Several numbers kept as one map ({ key: number }) -- a figure's design values a board sets (ADR-0096), a shelf's
- * spacings. Each entry is the number editor's field on a row of its own, its unit beside it, its range and default in
- * the placeholder. A value outside its range is not taken: the field goes back to what it was. A change sends the whole
- * map, so the map is the one value the component holds.
+ * Several numbers kept as one map ({ key: number }) -- a figure's design values and state values a board sets
+ * (ADR-0096), a shelf's spacings. Each entry is one compact row: its name, a slider when it has a range, the number
+ * field, and its unit. A value outside its range is not taken: the field goes back to what it was. A change sends the
+ * whole map, so the map is the one value the component holds.
+ *
+ * The slider is taken at every step of a drag, so what it drives moves with the handle.
  *
  * Built by the Figure lane after the existing editors (chief architect, 2026-09-26); open for the UX lane's review.
  */
 export declare class OxPropertyEditorNumberMap extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
     editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+    /** The slider's range, when the entry has one to slide over. */
+    private rangeOf;
+    /** How far along its range a value is, in percent, for the filled part of the track. */
+    private fillOf;
     private hintOf;
+    /** While dragging the value is taken at every step, so the figure moves with the handle. */
+    private onSlide;
     _valueChanged(e: Event): void;
 }

package/dist/src/ox-property-editor-number-map.js

@@ -1,13 +1,15 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
 /**
- * Several numbers kept as one map ({ key: number }) -- a figure's design values a board sets (ADR-0096), a shelf's
- * spacings. Each entry is the number editor's field on a row of its own, its unit beside it, its range and default in
- * the placeholder. A value outside its range is not taken: the field goes back to what it was. A change sends the whole
- * map, so the map is the one value the component holds.
+ * Several numbers kept as one map ({ key: number }) -- a figure's design values and state values a board sets
+ * (ADR-0096), a shelf's spacings. Each entry is one compact row: its name, a slider when it has a range, the number
+ * field, and its unit. A value outside its range is not taken: the field goes back to what it was. A change sends the
+ * whole map, so the map is the one value the component holds.
+ *
+ * The slider is taken at every step of a drag, so what it drives moves with the handle.
  *
  * Built by the Figure lane after the existing editors (chief architect, 2026-09-26); open for the UX lane's review.
  */
@@ -17,35 +19,65 @@ let OxPropertyEditorNumberMap = class OxPropertyEditorNumberMap extends OxProper
         const entries = (_b = (_a = spec.property) === null || _a === void 0 ? void 0 : _a.entries) !== null && _b !== void 0 ? _b : [];
         const map = value && typeof value === 'object' ? value : {};
         return html `
-      <div fullwidth>
+      <div fullwidth rows>
         ${entries.map(entry => {
             var _a, _b;
+            const shown = (_a = map[entry.key]) !== null && _a !== void 0 ? _a : entry.default;
+            const ranged = this.rangeOf(entry);
             return html `
-            <div data-key=${entry.key} style="display: flex; align-items: center; gap: var(--spacing-small, 4px)">
-              <span style="flex: 1">${entry.label}</span>
-              <input
-                type="number"
-                data-key=${entry.key}
-                aria-label=${entry.label}
-                style="flex: 1"
-                .value=${String((_b = (_a = map[entry.key]) !== null && _a !== void 0 ? _a : entry.default) !== null && _b !== void 0 ? _b : '')}
-                placeholder=${ifDefined(this.hintOf(entry))}
-                min=${ifDefined(entry.min)}
-                max=${ifDefined(entry.max)}
-                ?disabled=${this.disabled}
-              />
-              ${entry.unit ? html `<span>${entry.unit}</span>` : ''}
-            </div>
+            <span name title=${entry.label}>${entry.label}</span>
+            ${ranged
+                ? html `<input
+                  type="range"
+                  data-key=${entry.key}
+                  aria-label=${entry.label}
+                  min=${ranged.min}
+                  max=${ranged.max}
+                  step=${ranged.step}
+                  .value=${String(shown !== null && shown !== void 0 ? shown : ranged.min)}
+                  style=${`--fill: ${this.fillOf(shown !== null && shown !== void 0 ? shown : ranged.min, ranged)}%`}
+                  ?disabled=${this.disabled}
+                  @input=${this.onSlide}
+                />`
+                : nothing}
+            <input
+              type="number"
+              data-key=${entry.key}
+              aria-label=${entry.label}
+              ?wide=${!ranged}
+              .value=${String(shown !== null && shown !== void 0 ? shown : '')}
+              placeholder=${ifDefined(this.hintOf(entry))}
+              min=${ifDefined(entry.min)}
+              max=${ifDefined(entry.max)}
+              step="any"
+              ?disabled=${this.disabled}
+            />
+            <span unit>${(_b = entry.unit) !== null && _b !== void 0 ? _b : ''}</span>
           `;
         })}
       </div>
     `;
     }
+    /** The slider's range, when the entry has one to slide over. */
+    rangeOf(entry) {
+        const { min, max } = entry;
+        if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min)
+            return undefined;
+        return { min: min, max: max, step: (max - min) / 100 };
+    }
+    /** How far along its range a value is, in percent, for the filled part of the track. */
+    fillOf(value, range) {
+        return Math.min(Math.max(((value - range.min) / (range.max - range.min)) * 100, 0), 100);
+    }
     hintOf(entry) {
         const range = entry.min !== undefined && entry.max !== undefined ? `${entry.min}–${entry.max}` : undefined;
         const standard = entry.default !== undefined ? `(${entry.default})` : undefined;
         return [range, standard].filter(Boolean).join(' ') || undefined;
     }
+    /** While dragging the value is taken at every step, so the figure moves with the handle. */
+    onSlide(e) {
+        this._valueChanged(e);
+    }
     _valueChanged(e) {
         var _a, _b, _c, _d;
         e.stopPropagation();
@@ -62,12 +94,150 @@ let OxPropertyEditorNumberMap = class OxPropertyEditorNumberMap extends OxProper
             input.value = String((_d = (_c = map[key]) !== null && _c !== void 0 ? _c : entry === null || entry === void 0 ? void 0 : entry.default) !== null && _d !== void 0 ? _d : '');
             return;
         }
-        map[key] = number;
+        map[key] = input.type === 'range' ? Math.round(number * 100) / 100 : number;
         this.value = map;
+        this.renderRoot.querySelectorAll(`input[data-key="${key}"]`).forEach(one => {
+            one.value = String(map[key]);
+            if (one.type === 'range')
+                one.style.setProperty('--fill', `${this.fillOf(map[key], { min: Number(one.min), max: Number(one.max) })}%`);
+        });
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         this.observe(this.value);
     }
 };
+OxPropertyEditorNumberMap.styles = [
+    ...OxPropertyEditor.styles,
+    css `
+      /*
+       * The rows take the editor's own 24 columns (subgrid), so a name sits in the label column, right-aligned like
+       * every other label, and the fields start where every other field starts.
+       */
+      :host > div[rows] {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-auto-rows: 16px;
+        row-gap: 3px;
+        align-items: center;
+      }
+
+      :host > div[rows] > [name] {
+        grid-column: 1 / var(--property-editor-label-end, 9);
+        text-align: right;
+        font: var(--property-editor-label-font, var(--label-font));
+        color: var(--property-editor-label-color, inherit);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      /* A thin track filled up to the value (--fill), and a small round thumb: quieter than the fields around it. */
+      :host > div[rows] > input[type='range'] {
+        grid-column: var(--property-editor-label-end, 9) / 18;
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        min-width: 0;
+        height: 12px;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+      }
+
+      :host > div[rows] > input[type='range']::-webkit-slider-runnable-track {
+        height: 2px;
+        border-radius: 1px;
+        background: linear-gradient(
+          to right,
+          var(--md-sys-color-primary) var(--fill, 0%),
+          var(--md-sys-color-outline-variant) var(--fill, 0%)
+        );
+      }
+
+      :host > div[rows] > input[type='range']::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 8px;
+        height: 8px;
+        margin-top: -3px;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary);
+        transition: transform 0.12s;
+      }
+
+      :host > div[rows] > input[type='range']:hover::-webkit-slider-thumb,
+      :host > div[rows] > input[type='range']:focus-visible::-webkit-slider-thumb {
+        transform: scale(1.4);
+      }
+
+      :host > div[rows] > input[type='range']::-moz-range-track {
+        height: 2px;
+        border-radius: 1px;
+        background: var(--md-sys-color-outline-variant);
+      }
+
+      :host > div[rows] > input[type='range']::-moz-range-progress {
+        height: 2px;
+        border-radius: 1px;
+        background: var(--md-sys-color-primary);
+      }
+
+      :host > div[rows] > input[type='range']::-moz-range-thumb {
+        width: 8px;
+        height: 8px;
+        border: none;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary);
+      }
+
+      :host > div[rows] > input[type='range']:disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+
+      :host > div[rows] > input[type='number'] {
+        grid-column: 18 / 22;
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        height: 16px;
+        min-height: 0;
+        padding: 0 2px;
+        font: 0.7rem/1 var(--theme-font, Roboto, sans-serif);
+        /* The value reads as text; the field shows itself only when pointed at or typed in. */
+        background: transparent;
+        border-color: transparent;
+        border-radius: 3px;
+      }
+
+      :host > div[rows] > input[type='number']:hover {
+        border-color: var(--md-sys-color-outline-variant);
+      }
+
+      :host > div[rows] > input[type='number']:focus {
+        border-color: var(--md-sys-color-primary);
+        background: var(--property-editor-background, field);
+      }
+
+      :host > div[rows] > input[type='number']::-webkit-inner-spin-button {
+        display: none;
+        min-width: 0;
+      }
+
+      /* No range, no slider: the field takes the slider's room. */
+      :host > div[rows] > input[type='number'][wide] {
+        grid-column: var(--property-editor-label-end, 9) / 22;
+      }
+
+      :host > div[rows] > [unit] {
+        grid-column: 22 / -1;
+        overflow: hidden;
+        font: 0.66rem/1 var(--theme-font, Roboto, sans-serif);
+        color: var(--md-sys-color-outline);
+        white-space: nowrap;
+      }
+    `
+];
 OxPropertyEditorNumberMap = __decorate([
     customElement('ox-property-editor-number-map')
 ], OxPropertyEditorNumberMap);

package/dist/src/ox-property-editor-number-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-number-map.js","sourceRoot":"","sources":["../../src/ox-property-editor-number-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n/** One number of the map: its key, the name shown, and what it is held to. */\nexport interface NumberMapEntry {\n  key: string\n  label: string\n  unit?: string\n  min?: number\n  max?: number\n  default?: number\n}\n\n/**\n * Several numbers kept as one map ({ key: number }) -- a figure's design values a board sets (ADR-0096), a shelf's\n * spacings. Each entry is the number editor's field on a row of its own, its unit beside it, its range and default in\n * the placeholder. A value outside its range is not taken: the field goes back to what it was. A change sends the whole\n * map, so the map is the one value the component holds.\n *\n * Built by the Figure lane after the existing editors (chief architect, 2026-09-26); open for the UX lane's review.\n */\n@customElement('ox-property-editor-number-map')\nexport class OxPropertyEditorNumberMap extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const entries: NumberMapEntry[] = spec.property?.entries ?? []\n    const map: Record<string, number> = value && typeof value === 'object' ? value : {}\n    return html`\n      <div fullwidth>\n        ${entries.map(\n          entry => html`\n            <div data-key=${entry.key} style=\"display: flex; align-items: center; gap: var(--spacing-small, 4px)\">\n              <span style=\"flex: 1\">${entry.label}</span>\n              <input\n                type=\"number\"\n                data-key=${entry.key}\n                aria-label=${entry.label}\n                style=\"flex: 1\"\n                .value=${String(map[entry.key] ?? entry.default ?? '')}\n                placeholder=${ifDefined(this.hintOf(entry))}\n                min=${ifDefined(entry.min)}\n                max=${ifDefined(entry.max)}\n                ?disabled=${this.disabled}\n              />\n              ${entry.unit ? html`<span>${entry.unit}</span>` : ''}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  private hintOf(entry: NumberMapEntry): string | undefined {\n    const range = entry.min !== undefined && entry.max !== undefined ? `${entry.min}–${entry.max}` : undefined\n    const standard = entry.default !== undefined ? `(${entry.default})` : undefined\n    return [range, standard].filter(Boolean).join(' ') || undefined\n  }\n\n  override _valueChanged(e: Event) {\n    e.stopPropagation()\n    const input = e.target as HTMLInputElement\n    const key = input.getAttribute('data-key')\n    if (!key) return\n    const entry = ((this.property?.entries ?? []) as NumberMapEntry[]).find(one => one.key === key)\n    const map: Record<string, number> = this.value && typeof this.value === 'object' ? { ...this.value } : {}\n    const number = input.valueAsNumber\n    const outside = !Number.isFinite(number) || (entry?.min !== undefined && number < entry.min) || (entry?.max !== undefined && number > entry.max)\n    if (outside) {\n      /* Not taken: the field shows what the map holds. */\n      input.value = String(map[key] ?? entry?.default ?? '')\n      return\n    }\n    map[key] = number\n    this.value = map\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.observe(this.value)\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-number-map.js","sourceRoot":"","sources":["../../src/ox-property-editor-number-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n/** One number of the map: its key, the name shown, and what it is held to. */\nexport interface NumberMapEntry {\n  key: string\n  label: string\n  unit?: string\n  min?: number\n  max?: number\n  default?: number\n}\n\n/**\n * Several numbers kept as one map ({ key: number }) -- a figure's design values and state values a board sets\n * (ADR-0096), a shelf's spacings. Each entry is one compact row: its name, a slider when it has a range, the number\n * field, and its unit. A value outside its range is not taken: the field goes back to what it was. A change sends the\n * whole map, so the map is the one value the component holds.\n *\n * The slider is taken at every step of a drag, so what it drives moves with the handle.\n *\n * Built by the Figure lane after the existing editors (chief architect, 2026-09-26); open for the UX lane's review.\n */\n@customElement('ox-property-editor-number-map')\nexport class OxPropertyEditorNumberMap extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      /*\n       * The rows take the editor's own 24 columns (subgrid), so a name sits in the label column, right-aligned like\n       * every other label, and the fields start where every other field starts.\n       */\n      :host > div[rows] {\n        display: grid;\n        grid-template-columns: subgrid;\n        grid-auto-rows: 16px;\n        row-gap: 3px;\n        align-items: center;\n      }\n\n      :host > div[rows] > [name] {\n        grid-column: 1 / var(--property-editor-label-end, 9);\n        text-align: right;\n        font: var(--property-editor-label-font, var(--label-font));\n        color: var(--property-editor-label-color, inherit);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      /* A thin track filled up to the value (--fill), and a small round thumb: quieter than the fields around it. */\n      :host > div[rows] > input[type='range'] {\n        grid-column: var(--property-editor-label-end, 9) / 18;\n        -webkit-appearance: none;\n        appearance: none;\n        width: 100%;\n        min-width: 0;\n        height: 12px;\n        margin: 0;\n        padding: 0;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n      }\n\n      :host > div[rows] > input[type='range']::-webkit-slider-runnable-track {\n        height: 2px;\n        border-radius: 1px;\n        background: linear-gradient(\n          to right,\n          var(--md-sys-color-primary) var(--fill, 0%),\n          var(--md-sys-color-outline-variant) var(--fill, 0%)\n        );\n      }\n\n      :host > div[rows] > input[type='range']::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        width: 8px;\n        height: 8px;\n        margin-top: -3px;\n        border-radius: 50%;\n        background: var(--md-sys-color-primary);\n        transition: transform 0.12s;\n      }\n\n      :host > div[rows] > input[type='range']:hover::-webkit-slider-thumb,\n      :host > div[rows] > input[type='range']:focus-visible::-webkit-slider-thumb {\n        transform: scale(1.4);\n      }\n\n      :host > div[rows] > input[type='range']::-moz-range-track {\n        height: 2px;\n        border-radius: 1px;\n        background: var(--md-sys-color-outline-variant);\n      }\n\n      :host > div[rows] > input[type='range']::-moz-range-progress {\n        height: 2px;\n        border-radius: 1px;\n        background: var(--md-sys-color-primary);\n      }\n\n      :host > div[rows] > input[type='range']::-moz-range-thumb {\n        width: 8px;\n        height: 8px;\n        border: none;\n        border-radius: 50%;\n        background: var(--md-sys-color-primary);\n      }\n\n      :host > div[rows] > input[type='range']:disabled {\n        cursor: default;\n        opacity: 0.5;\n      }\n\n      :host > div[rows] > input[type='number'] {\n        grid-column: 18 / 22;\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n        height: 16px;\n        min-height: 0;\n        padding: 0 2px;\n        font: 0.7rem/1 var(--theme-font, Roboto, sans-serif);\n        /* The value reads as text; the field shows itself only when pointed at or typed in. */\n        background: transparent;\n        border-color: transparent;\n        border-radius: 3px;\n      }\n\n      :host > div[rows] > input[type='number']:hover {\n        border-color: var(--md-sys-color-outline-variant);\n      }\n\n      :host > div[rows] > input[type='number']:focus {\n        border-color: var(--md-sys-color-primary);\n        background: var(--property-editor-background, field);\n      }\n\n      :host > div[rows] > input[type='number']::-webkit-inner-spin-button {\n        display: none;\n        min-width: 0;\n      }\n\n      /* No range, no slider: the field takes the slider's room. */\n      :host > div[rows] > input[type='number'][wide] {\n        grid-column: var(--property-editor-label-end, 9) / 22;\n      }\n\n      :host > div[rows] > [unit] {\n        grid-column: 22 / -1;\n        overflow: hidden;\n        font: 0.66rem/1 var(--theme-font, Roboto, sans-serif);\n        color: var(--md-sys-color-outline);\n        white-space: nowrap;\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const entries: NumberMapEntry[] = spec.property?.entries ?? []\n    const map: Record<string, number> = value && typeof value === 'object' ? value : {}\n    return html`\n      <div fullwidth rows>\n        ${entries.map(entry => {\n          const shown = map[entry.key] ?? entry.default\n          const ranged = this.rangeOf(entry)\n          return html`\n            <span name title=${entry.label}>${entry.label}</span>\n            ${ranged\n              ? html`<input\n                  type=\"range\"\n                  data-key=${entry.key}\n                  aria-label=${entry.label}\n                  min=${ranged.min}\n                  max=${ranged.max}\n                  step=${ranged.step}\n                  .value=${String(shown ?? ranged.min)}\n                  style=${`--fill: ${this.fillOf(shown ?? ranged.min, ranged)}%`}\n                  ?disabled=${this.disabled}\n                  @input=${this.onSlide}\n                />`\n              : nothing}\n            <input\n              type=\"number\"\n              data-key=${entry.key}\n              aria-label=${entry.label}\n              ?wide=${!ranged}\n              .value=${String(shown ?? '')}\n              placeholder=${ifDefined(this.hintOf(entry))}\n              min=${ifDefined(entry.min)}\n              max=${ifDefined(entry.max)}\n              step=\"any\"\n              ?disabled=${this.disabled}\n            />\n            <span unit>${entry.unit ?? ''}</span>\n          `\n        })}\n      </div>\n    `\n  }\n\n  /** The slider's range, when the entry has one to slide over. */\n  private rangeOf(entry: NumberMapEntry): { min: number; max: number; step: number } | undefined {\n    const { min, max } = entry\n    if (!Number.isFinite(min) || !Number.isFinite(max) || max! <= min!) return undefined\n    return { min: min!, max: max!, step: (max! - min!) / 100 }\n  }\n\n  /** How far along its range a value is, in percent, for the filled part of the track. */\n  private fillOf(value: number, range: { min: number; max: number }): number {\n    return Math.min(Math.max(((value - range.min) / (range.max - range.min)) * 100, 0), 100)\n  }\n\n  private hintOf(entry: NumberMapEntry): string | undefined {\n    const range = entry.min !== undefined && entry.max !== undefined ? `${entry.min}–${entry.max}` : undefined\n    const standard = entry.default !== undefined ? `(${entry.default})` : undefined\n    return [range, standard].filter(Boolean).join(' ') || undefined\n  }\n\n  /** While dragging the value is taken at every step, so the figure moves with the handle. */\n  private onSlide(e: Event) {\n    this._valueChanged(e)\n  }\n\n  override _valueChanged(e: Event) {\n    e.stopPropagation()\n    const input = e.target as HTMLInputElement\n    const key = input.getAttribute('data-key')\n    if (!key) return\n    const entry = ((this.property?.entries ?? []) as NumberMapEntry[]).find(one => one.key === key)\n    const map: Record<string, number> = this.value && typeof this.value === 'object' ? { ...this.value } : {}\n    const number = input.valueAsNumber\n    const outside = !Number.isFinite(number) || (entry?.min !== undefined && number < entry.min) || (entry?.max !== undefined && number > entry.max)\n    if (outside) {\n      /* Not taken: the field shows what the map holds. */\n      input.value = String(map[key] ?? entry?.default ?? '')\n      return\n    }\n    map[key] = input.type === 'range' ? Math.round(number * 100) / 100 : number\n    this.value = map\n    this.renderRoot.querySelectorAll<HTMLInputElement>(`input[data-key=\"${key}\"]`).forEach(one => {\n      one.value = String(map[key])\n      if (one.type === 'range') one.style.setProperty('--fill', `${this.fillOf(map[key]!, { min: Number(one.min), max: Number(one.max) })}%`)\n    })\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.observe(this.value)\n  }\n}\n"]}