@adia-ai/web-components 0.4.2 → 0.4.3

package/README.md

@@ -9,6 +9,18 @@ A2UI protocol messages into live DOM.
 > [`@adia-ai/a2ui-corpus`](../a2ui/corpus); the MCP server in
 > [`@adia-ai/a2ui-mcp`](../a2ui/mcp).
 
+## Install
+
+```bash
+npm install @adia-ai/web-components
+```
+
+For composite shells (admin / chat / editor / simple / theme clusters), pair with [`@adia-ai/web-modules`](../web-modules):
+
+```bash
+npm install @adia-ai/web-components @adia-ai/web-modules
+```
+
 ## Quick start
 
 ```html

package/components/input/input.a2ui.json

@@ -56,6 +56,11 @@
       "type": "string",
       "default": ""
     },
+    "locale": {
+      "description": "BCP-47 locale tag for `type=\"number\"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set, the input accepts both `.` AND the locale's decimal separator (e.g. `,` in de-DE), uses `Intl.NumberFormat` for display, and groups thousands on blur (e.g. en-US `1,234,567.89`, de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing. `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))` round-trips. Default empty = en-US-equivalent path (no behavior change).",
+      "type": "string",
+      "default": ""
+    },
     "max": {
       "description": "Maximum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemax + the [+] button's disabled state.",
       "type": "number",

package/components/input/input.js

@@ -53,6 +53,13 @@ class UIInput extends UIFormElement {
     max:         { type: Number,  default: null, reflect: true },
     step:        { type: Number,  default: 1,    reflect: true },
     precision:   { type: Number,  default: null, reflect: true },
+    // BCP-47 locale tag, e.g. "de-DE" / "fr-FR" / "en-IN". Default empty =
+    // en-US (`.` decimal separator, no thousands grouping). When set, the
+    // input accepts both `.` AND the locale's decimal separator (so en-US-
+    // formatted programmatic values still parse), and `#format` uses
+    // `Intl.NumberFormat` for display. Internal storage stays in JS-Number
+    // canonical form so `.value` round-trips through `Number(v)` unchanged.
+    locale:      { type: String,  default: '',   reflect: true },
   };
 
   static template = () => null;
@@ -62,15 +69,30 @@ class UIInput extends UIFormElement {
   #upBtn = null;
   #downBtn = null;
   #valueAtFocus = '';
+  #repeatTimer = null;
+  #repeatDelayTimer = null;
+  #cachedSep = '.';
+  #cachedGroup = '';
+  #cachedSepFor = null;
   static #labelSeq = 0;
 
+  // Hold-to-repeat tuning. Initial delay before autorepeat begins, and the
+  // interval between repeats. Values match the cadence of the native
+  // <input type="number"> spinner behavior in Chromium/Safari.
+  static #REPEAT_INITIAL_MS = 400;
+  static #REPEAT_INTERVAL_MS = 60;
+
   get #isNativePassword() { return this.type === 'password'; }
   get #isNumberMode()     { return this.type === 'number'; }
 
-  /** Parsed numeric value. NaN when empty or unparseable. */
+  /** Parsed numeric value. NaN when empty or unparseable. When `locale` is
+   *  set, the value may carry the locale's decimal separator (e.g. "1,5" in
+   *  de-DE); we canonicalize to JS form before `Number(…)`. */
   get valueAsNumber() {
-    const s = String(this.value ?? '').trim();
-    if (!s || s === '-' || s === '.') return NaN;
+    const raw = String(this.value ?? '').trim();
+    if (!raw) return NaN;
+    const s = this.#toCanonical(raw);
+    if (s === '-' || s === '.' || s === '-.') return NaN;
     const n = Number(s);
     return Number.isFinite(n) ? n : NaN;
   }
@@ -111,11 +133,15 @@ class UIInput extends UIFormElement {
     }
 
     // pointerdown.preventDefault keeps focus on the contenteditable surface
-    // when the user pokes a stepper button with a pointing device.
-    this.#upBtn?.addEventListener('pointerdown', this.#onStepperDown);
-    this.#downBtn?.addEventListener('pointerdown', this.#onStepperDown);
-    this.#upBtn?.addEventListener('click', this.#onStepUp);
-    this.#downBtn?.addEventListener('click', this.#onStepDown);
+    // when the user pokes a stepper button with a pointing device. Same
+    // handler fires the initial step + arms hold-to-repeat; pointerup/leave/
+    // cancel on document stops it (the user can drag off the button to
+    // abort the repeat without lifting their finger first).
+    this.#upBtn?.addEventListener('pointerdown', this.#onStepperUpDown);
+    this.#downBtn?.addEventListener('pointerdown', this.#onStepperDownDown);
+    // Stop autorepeat on any pointer release, anywhere — captures the
+    // "drag-off-then-lift" abort path without per-button leave/cancel
+    // bookkeeping. Cheap; runs only while a stepper is held.
 
     // In non-Vite static deploys, the icon registry loads asynchronously
     // after the manifest fetch resolves. If our prefix/suffix were checked
@@ -273,9 +299,12 @@ class UIInput extends UIFormElement {
   }
 
   #runNumberConstraints(val) {
-    const s = String(val ?? '').trim();
+    const raw = String(val ?? '').trim();
     // Empty is handled by `required` in the base class; nothing to check here.
-    if (!s) return true;
+    if (!raw) return true;
+    // Canonicalize for `Number(…)` parse — when `locale` is set the raw
+    // value may carry the locale's decimal separator.
+    const s = this.#toCanonical(raw);
     const n = Number(s);
     if (!Number.isFinite(n)) {
       this.internals.setValidity(
@@ -312,12 +341,87 @@ class UIInput extends UIFormElement {
     return (stepStr.split('.')[1] || '').length;
   }
 
+  /** Locale's decimal separator, or '.' for the default en-US-equivalent path.
+   *  Result cached per-locale on the host so `Intl.NumberFormat.formatToParts`
+   *  isn't called per keystroke. */
+  #decimalSep() {
+    if (!this.locale) return '.';
+    if (this.#cachedSepFor === this.locale) return this.#cachedSep;
+    this.#refreshSepCache();
+    return this.#cachedSep;
+  }
+
+  /** Locale's thousands/grouping separator (e.g. `,` in en-US, `.` in de-DE).
+   *  Returns '' for the default path (no locale → no grouping). Cached
+   *  alongside the decimal separator. */
+  #groupSep() {
+    if (!this.locale) return '';
+    if (this.#cachedSepFor === this.locale) return this.#cachedGroup;
+    this.#refreshSepCache();
+    return this.#cachedGroup;
+  }
+
+  #refreshSepCache() {
+    try {
+      const parts = new Intl.NumberFormat(this.locale).formatToParts(1234567.89);
+      this.#cachedSep   = parts.find((p) => p.type === 'decimal')?.value || '.';
+      this.#cachedGroup = parts.find((p) => p.type === 'group')?.value   || '';
+    } catch {
+      this.#cachedSep   = '.';
+      this.#cachedGroup = '';
+    }
+    this.#cachedSepFor = this.locale;
+  }
+
+  /** Convert a locale-formatted numeric string to the JS-canonical form
+   *  (decimal `.`, no thousands grouping). Strips group separators first so
+   *  "1.234,5" (de-DE) → "1234.5", "1,234.5" (en-US) → "1234.5". Pure string
+   *  transform; no validation. */
+  #toCanonical(s) {
+    const sep = this.#decimalSep();
+    const group = this.#groupSep();
+    let out = String(s);
+    if (group) out = out.split(group).join('');
+    if (sep !== '.') out = out.replace(new RegExp(`\\${sep}`, 'g'), '.');
+    return out;
+  }
+
+  /** Internal/edit-mode format: locale decimal separator, NO thousands
+   *  grouping. Used for `this.value` storage and for the textContent
+   *  rendering while the input is focused (so the user can edit without
+   *  the group separator jumping around as they type). */
   #format(n) {
     if (!Number.isFinite(n)) return '';
     const d = this.#decimals();
+    if (this.locale) {
+      try {
+        return new Intl.NumberFormat(this.locale, {
+          minimumFractionDigits: d,
+          maximumFractionDigits: d,
+          useGrouping: false,
+        }).format(n);
+      } catch { /* fall through to JS toFixed */ }
+    }
     return d > 0 ? n.toFixed(d) : String(Math.round(n));
   }
 
+  /** Display-mode format: locale decimal separator + thousands grouping when
+   *  the locale supports it. Used for the textContent rendering when the
+   *  input is NOT focused (initial render + post-blur). Returns the same as
+   *  `#format` when no `locale` is set. */
+  #formatDisplay(n) {
+    if (!Number.isFinite(n)) return '';
+    if (!this.locale) return this.#format(n);
+    const d = this.#decimals();
+    try {
+      return new Intl.NumberFormat(this.locale, {
+        minimumFractionDigits: d,
+        maximumFractionDigits: d,
+        useGrouping: true,
+      }).format(n);
+    } catch { return this.#format(n); }
+  }
+
   /** Display value derived from the stored string. During focus we leave
    *  the user's raw text alone; otherwise reformat (e.g. "9.9" → "9.90"
    *  for precision=2). Non-numeric stored strings pass through unchanged
@@ -325,9 +429,16 @@ class UIInput extends UIFormElement {
   #formatStored(stored) {
     const s = String(stored ?? '');
     if (!s) return '';
-    const n = Number(s);
+    // Canonicalize before Number() — `.value` may carry the locale's
+    // decimal separator if the host has `locale` set.
+    const n = Number(this.#toCanonical(s));
     if (!Number.isFinite(n)) return s;
-    return this.#format(n);
+    // If the input is currently focused, render without grouping so the
+    // user can edit naturally; otherwise group when locale is set. Falls
+    // back to #format (ungrouped) when there's no locale.
+    return document.activeElement === this.#textEl
+      ? this.#format(n)
+      : this.#formatDisplay(n);
   }
 
   #snap(raw) {
@@ -404,23 +515,40 @@ class UIInput extends UIFormElement {
   #isNumericProspect(s) {
     // Permissive while typing: allow lone '-', lone '.', and trailing '.'.
     // Reject scientific notation, multiple decimals, multiple signs.
-    if (s === '' || s === '-' || s === '.' || s === '-.') {
-      return s === '' || s === '-' || (this.min == null || this.min < 0) ? true : false;
+    // When `locale` is set, accept both '.' AND the locale's decimal
+    // separator, and silently strip thousands-group separators (paste of
+    // "1,234.5" or "1.234,5" both validate).
+    const c = this.#toCanonical(s);
+    if (c === '' || c === '-' || c === '.' || c === '-.') {
+      return c === '' || c === '-' || (this.min == null || this.min < 0) ? true : false;
     }
-    if (!/^-?\d*\.?\d*$/.test(s)) return false;
-    if (s.startsWith('-') && this.min != null && this.min >= 0) return false;
+    if (!/^-?\d*\.?\d*$/.test(c)) return false;
+    if (c.startsWith('-') && this.min != null && this.min >= 0) return false;
     return true;
   }
 
   #sanitizeNumeric(s) {
     // Strip everything but digits / one leading minus / one decimal point.
+    // The decimal mark is the locale's separator; characters that match the
+    // locale's group separator (e.g. `.` in de-DE, `,` in en-US) are silently
+    // dropped — never preserved in `this.value`. The blur handler re-renders
+    // with grouping for display via `#formatDisplay`.
+    //
+    // Note on programmatic `.value = "1.5"` in de-DE: that path doesn't run
+    // through sanitization (UIFormElement.value setter is string-only), so
+    // canonical-form programmatic values still parse correctly via
+    // `valueAsNumber` (which canonicalizes through `#toCanonical`). Only
+    // user-typed/-pasted input flows through this sanitizer, and there the
+    // locale interpretation (`.` = group when sep=`,`) is the correct read.
+    const sep = this.#decimalSep();
     let out = '';
-    let sawDot = false;
+    let sawDecimal = false;
     for (let i = 0; i < s.length; i++) {
       const c = s[i];
       if (c >= '0' && c <= '9') out += c;
       else if (c === '-' && out === '' && (this.min == null || this.min < 0)) out += c;
-      else if (c === '.' && !sawDot) { out += c; sawDot = true; }
+      else if (c === sep && !sawDecimal) { out += sep; sawDecimal = true; }
+      // group separator and other punctuation silently dropped
     }
     return out;
   }
@@ -487,6 +615,18 @@ class UIInput extends UIFormElement {
 
   #onFocus = () => {
     this.#valueAtFocus = this.value ?? '';
+    // When focused: re-render textContent without thousands grouping so the
+    // user can edit naturally — group separators jumping mid-keystroke is
+    // disorienting. Only matters when `locale` is set AND the post-blur
+    // render added grouping; no-op for the default `.` path.
+    if (this.#isNumberMode && this.locale) {
+      const raw = String(this.value ?? '').trim();
+      if (!raw) return;
+      const n = Number(this.#toCanonical(raw));
+      if (!Number.isFinite(n)) return;
+      const ungrouped = this.#format(n);
+      if (this.#textEl.textContent !== ungrouped) this.#textEl.textContent = ungrouped;
+    }
   };
 
   #onBlur = () => {
@@ -497,18 +637,24 @@ class UIInput extends UIFormElement {
   #commitOnBlur() {
     const raw = String(this.value ?? '').trim();
     if (!raw) return;
-    const n = Number(raw);
+    // Canonicalize before Number() — `this.value` may carry the locale's
+    // decimal separator (e.g. "1,5" in de-DE).
+    const n = Number(this.#toCanonical(raw));
     if (!Number.isFinite(n)) return; // leave the bad input visible for the error UX
     const snapped = this.#snap(n);
-    const formatted = this.#format(snapped);
-    if (this.value !== formatted) {
-      this.value = formatted;
-      this.syncValue(formatted);
+    // `this.value` stores the ungrouped, locale-decimal form (round-trippable
+    // through #toCanonical → Number → #format). textContent shows the
+    // grouped display form when `locale` is set.
+    const stored    = this.#format(snapped);
+    const displayed = this.#formatDisplay(snapped);
+    if (this.value !== stored) {
+      this.value = stored;
+      this.syncValue(stored);
       this.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    if (this.#textEl.textContent !== formatted) {
-      this.#textEl.textContent = formatted;
-      this.#textEl.toggleAttribute('data-empty', !formatted);
+    if (this.#textEl.textContent !== displayed) {
+      this.#textEl.textContent = displayed;
+      this.#textEl.toggleAttribute('data-empty', !displayed);
     }
   }
 
@@ -530,13 +676,50 @@ class UIInput extends UIFormElement {
     document.execCommand('insertText', false, text);
   };
 
-  #onStepperDown = (e) => {
+  // Hold-to-repeat: pointerdown fires the initial step + arms an autorepeat
+  // timer. The first repeat fires after REPEAT_INITIAL_MS; subsequent ones
+  // every REPEAT_INTERVAL_MS. pointerup on document stops everything. We
+  // also stop on a stale value (disabled at min/max boundary) so the
+  // browser doesn't keep firing input events for no-op increments.
+  #onStepperUpDown   = (e) => this.#startStepperHold(e, 1);
+  #onStepperDownDown = (e) => this.#startStepperHold(e, -1);
+
+  #startStepperHold(e, multiplier) {
     // Keep focus on the editable surface when the button is pressed.
     e.preventDefault();
-  };
+    if (this.disabled || this.readonly) return;
+    // Initial step fires immediately on press.
+    this.#stepBy(multiplier);
+    this.#stopStepperHold();
+    // Listen for release on document (cheap; only while held).
+    document.addEventListener('pointerup',     this.#onStepperRelease, { once: true });
+    document.addEventListener('pointercancel', this.#onStepperRelease, { once: true });
+    // Initial delay → then continuous repeat.
+    this.#repeatDelayTimer = window.setTimeout(() => {
+      this.#repeatDelayTimer = null;
+      this.#repeatTimer = window.setInterval(() => {
+        const before = this.valueAsNumber;
+        this.#stepBy(multiplier);
+        // Boundary hit → no-op; cancel to avoid wasted intervals + event spam.
+        if (this.valueAsNumber === before) this.#stopStepperHold();
+      }, UIInput.#REPEAT_INTERVAL_MS);
+    }, UIInput.#REPEAT_INITIAL_MS);
+  }
 
-  #onStepUp = () => { this.#stepBy(1); };
-  #onStepDown = () => { this.#stepBy(-1); };
+  #onStepperRelease = () => this.#stopStepperHold();
+
+  #stopStepperHold() {
+    if (this.#repeatDelayTimer != null) {
+      window.clearTimeout(this.#repeatDelayTimer);
+      this.#repeatDelayTimer = null;
+    }
+    if (this.#repeatTimer != null) {
+      window.clearInterval(this.#repeatTimer);
+      this.#repeatTimer = null;
+    }
+    document.removeEventListener('pointerup',     this.#onStepperRelease);
+    document.removeEventListener('pointercancel', this.#onStepperRelease);
+  }
 
   focus() { this.#textEl?.focus(); }
 
@@ -563,10 +746,12 @@ class UIInput extends UIFormElement {
       this.#textEl.removeEventListener('paste',    this.#onPaste);
       this.#textEl.removeEventListener('beforeinput', this.#onBeforeInput);
     }
-    this.#upBtn?.removeEventListener('pointerdown', this.#onStepperDown);
-    this.#downBtn?.removeEventListener('pointerdown', this.#onStepperDown);
-    this.#upBtn?.removeEventListener('click', this.#onStepUp);
-    this.#downBtn?.removeEventListener('click', this.#onStepDown);
+    this.#upBtn?.removeEventListener('pointerdown', this.#onStepperUpDown);
+    this.#downBtn?.removeEventListener('pointerdown', this.#onStepperDownDown);
+    // Cancel any in-flight hold (the document-level pointerup listener
+    // is `{once: true}` so it self-cleans on fire; this also clears the
+    // timers if the host disconnects mid-hold).
+    this.#stopStepperHold();
     this.#textEl = null;
     this.#labelEl = null;
     this.#upBtn = null;
@@ -576,3 +761,4 @@ class UIInput extends UIFormElement {
 customElements.define('input-ui', UIInput);
 
 export { UIInput };
+

package/components/input/input.yaml

@@ -84,6 +84,15 @@ props:
       decimal-count from `step` — e.g. `step=1 precision=2` formats "10.00".
     type: number
     default: null
+  locale:
+    description: BCP-47 locale tag for `type="number"`, e.g. `de-DE`, `fr-FR`, `en-IN`. When set,
+      the input accepts both `.` AND the locale's decimal separator (e.g. `,` in de-DE), uses
+      `Intl.NumberFormat` for display, and groups thousands on blur (e.g. en-US `1,234,567.89`,
+      de-DE `1.234.567,89`). On focus, the input reverts to ungrouped form for easy editing.
+      `.value` always stores the ungrouped, locale-decimal form so `Number(#toCanonical(v))`
+      round-trips. Default empty = en-US-equivalent path (no behavior change).
+    type: string
+    default: ""
   pattern:
     description: Regex pattern for validation. Tested as ^(?:pattern)$ against the value.
     type: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "exports": {