@rozie-ui/data-table-solid 0.4.0 → 0.6.0

package/src/EditorCheckbox.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'solid-js';
-import { mergeProps, splitProps } from 'solid-js';
+import { createEffect, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
+import { rozieAttr } from '@rozie/runtime-solid';
 
 interface EditorCheckboxProps {
   /**
@@ -26,11 +27,27 @@ interface EditorCheckboxProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus', 'columnLabel']);
+
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) inputElRef?.focus();
+  })(v)), { defer: true }));
+  let inputElRef: HTMLElement | null = null;
 
   // Immediate-commit-on-change: read .checked the global-filter way, coerce to a
   // real boolean, and commit it directly.
@@ -44,9 +61,26 @@ export default function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element
     }
   }
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
+  // C-02 / editor-owns-focus: focus OUR OWN control when the host says we should hold it.
+  // $onMount covers the initial open (autofocus is already true on first render); the LAZY
+  // $watch (NOT { immediate: true } — an immediate watch fires PRE-mount and sees a null
+  // ref on Lit/Solid) covers a REACTIVE refocus while already mounted, e.g. a row-mode
+  // validation failure flipping autofocus back onto this already-open drop-in.
+
   return (
     <>
-    <input type="checkbox" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} checked={!!local.value} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} data-rozie-s-3d792482="" />
+    <input type="checkbox" data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} checked={!!local.value} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} data-rozie-s-3d792482="" />
     </>
   );
 }

package/src/EditorDate.tsx

@@ -1,5 +1,27 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
+import { rozieAttr } from '@rozie/runtime-solid';
+// C-07: the native `<input type="date">` accepts ONLY `YYYY-MM-DD` and renders BLANK for
+// anything else, silently. The seed used to be `String($props.value)`, which is not the ISO
+// coercion this component's own docs: string promises — so a `Date`, an ISO datetime string,
+// an epoch number or a localised string all produced an empty editor. `toIsoDateString`
+// (helpers/dateValue.ts) is the real coercion, pure and unit-tested.
+import { toIsoDateString } from './helpers/dateValue';
+
+// ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+// A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+// places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+// DEFAULT — Angular sets inputs after construction. Measured directly: this editor opened
+// EMPTY on angular for every row, including one whose value was already `YYYY-MM-DD`, while
+// vue and lit seeded correctly. That is why the shape of the incoming value (C-07) could not
+// be the whole story, and why the existing EditorDate coverage never saw either problem: it
+// fills the input before asserting anything.
+//
+// Reading the prop through a derived function instead is correct on all six by construction,
+// with no flash of an empty control on the fine-grained targets and no per-target branch. It
+// is the pattern `FilterSelect` in this same package already uses (`selectValue()`), which is
+// exactly why FilterSelect was the one drop-in unaffected. `touched` is what keeps the user's
+// typing from being overwritten by the live prop read once they have started editing.
 
 interface EditorDateProps {
   /**
@@ -26,29 +48,61 @@ interface EditorDateProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function EditorDate(_props: EditorDateProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus', 'columnLabel']);
 
   const [draft, setDraft] = createSignal('');
+  const [touched, setTouched] = createSignal(false);
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) inputElRef?.focus();
+  })(v)), { defer: true }));
+  let inputElRef: HTMLElement | null = null;
 
-  // Seed the draft once from the incoming value (setup-once). A native date input
-  // only accepts `YYYY-MM-DD`; normalize null/undefined to ''.
-  setDraft(local.value != null ? String(local.value) : '');
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured directly: this editor opened
+  // EMPTY on angular for every row, including one whose value was already `YYYY-MM-DD`, while
+  // vue and lit seeded correctly. That is why the shape of the incoming value (C-07) could not
+  // be the whole story, and why the existing EditorDate coverage never saw either problem: it
+  // fills the input before asserting anything.
+  //
+  // Reading the prop through a derived function instead is correct on all six by construction,
+  // with no flash of an empty control on the fine-grained targets and no per-target branch. It
+  // is the pattern `FilterSelect` in this same package already uses (`selectValue()`), which is
+  // exactly why FilterSelect was the one drop-in unaffected. `touched` is what keeps the user's
+  // typing from being overwritten by the live prop read once they have started editing.
+  function draftValue() {
+    return touched() ? draft() : toIsoDateString(local.value);
+  }
   function onInput(e: any) {
     setDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
   function doCommit() {
     // commit the ISO date string the native control already produced.
-    local.commit && local.commit(draft());
+    local.commit && local.commit(draftValue());
   }
   function doCancel() {
     local.cancel && local.cancel();
   }
   function onChange(e: any) {
     setDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
   function onKeydown(e: any) {
     if (e && e.key === 'Enter') {
@@ -63,9 +117,26 @@ export default function EditorDate(_props: EditorDateProps): JSX.Element {
     doCommit();
   }
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
+  // C-02 / editor-owns-focus: focus OUR OWN control when the host says we should hold it.
+  // $onMount covers the initial open (autofocus is already true on first render); the LAZY
+  // $watch (NOT { immediate: true } — an immediate watch fires PRE-mount and sees a null
+  // ref on Lit/Solid) covers a REACTIVE refocus while already mounted, e.g. a row-mode
+  // validation failure flipping autofocus back onto this already-open drop-in.
+
   return (
     <>
-    <input type="date" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-7abe1a56="" />
+    <input type="date" data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draftValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-7abe1a56="" />
     </>
   );
 }

package/src/EditorNumber.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
+import { rozieAttr } from '@rozie/runtime-solid';
 
 interface EditorNumberProps {
   /**
@@ -26,18 +27,46 @@ interface EditorNumberProps {
    * `() => void` — revert the edit (Escape). Null-guarded at call sites.
    */
   cancel?: ((...args: any[]) => any) | null;
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function EditorNumber(_props: EditorNumberProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus', 'columnLabel']);
 
   const [draft, setDraft] = createSignal('');
+  const [touched, setTouched] = createSignal(false);
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) inputElRef?.focus();
+  })(v)), { defer: true }));
+  let inputElRef: HTMLElement | null = null;
 
   // Seed the draft string once from the incoming value (setup-once).
-  setDraft(local.value != null ? String(local.value) : '');
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  function draftValue() {
+    return touched() ? draft() : local.value != null ? String(local.value) : '';
+  }
   function onInput(e: any) {
     setDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
 
   // Coerce to a Number at commit time. Defensive guard: an empty/whitespace draft
@@ -45,7 +74,7 @@ export default function EditorNumber(_props: EditorNumberProps): JSX.Element {
   // non-numeric draft also commits null. Otherwise commit the coerced number.
   function doCommit() {
     if (!local.commit) return;
-    const raw = draft();
+    const raw = draftValue();
     if (raw == null || String(raw).trim() === '') {
       local.commit(null);
       return;
@@ -69,9 +98,26 @@ export default function EditorNumber(_props: EditorNumberProps): JSX.Element {
     doCommit();
   }
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
+  // C-02 / editor-owns-focus: focus OUR OWN control when the host says we should hold it.
+  // $onMount covers the initial open (autofocus is already true on first render); the LAZY
+  // $watch (NOT { immediate: true } — an immediate watch fires PRE-mount and sees a null
+  // ref on Lit/Solid) covers a REACTIVE refocus while already mounted, e.g. a row-mode
+  // validation failure flipping autofocus back onto this already-open drop-in.
+
   return (
     <>
-    <input type="number" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-b2792b32="" />
+    <input type="number" data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draftValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-b2792b32="" />
     </>
   );
 }

package/src/EditorSelect.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
 import { rozieAttr, rozieDisplay } from '@rozie/runtime-solid';
 
@@ -32,26 +32,54 @@ interface EditorSelectProps {
    * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
    */
   options?: any[];
+  /**
+   * Focus this editor's primary control when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() as any[] }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'options']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() as any[], autofocus: false, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'options', 'autofocus', 'columnLabel']);
 
   const [draft, setDraft] = createSignal('');
+  const [touched, setTouched] = createSignal(false);
+  onMount(() => {
+    if (local.autofocus) selectElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) selectElRef?.focus();
+  })(v)), { defer: true }));
+  let selectElRef: HTMLElement | null = null;
 
   // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
   // to '' so the <select> binds to a string.
-  setDraft(local.value != null ? String(local.value) : '');
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  function draftValue() {
+    return touched() ? draft() : local.value != null ? String(local.value) : '';
+  }
 
   // Picking/arrow-cycling an option updates the draft only — no commit.
   function onChange(e: any) {
     setDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
 
   // commit/cancel are Function props (default null) — guard before calling.
   function doCommit() {
-    local.commit && local.commit(draft());
+    local.commit && local.commit(draftValue());
   }
   function doCancel() {
     local.cancel && local.cancel();
@@ -69,9 +97,26 @@ export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
     doCommit();
   }
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
+  // C-02 / editor-owns-focus: focus OUR OWN control when the host says we should hold it.
+  // $onMount covers the initial open (autofocus is already true on first render); the LAZY
+  // $watch (NOT { immediate: true } — an immediate watch fires PRE-mount and sees a null
+  // ref on Lit/Solid) covers a REACTIVE refocus while already mounted, e.g. a row-mode
+  // validation failure flipping autofocus back onto this already-open drop-in.
+
   return (
     <>
-    <select data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onBlur(); }} data-rozie-s-117f1a16="">
+    <select data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { selectElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draftValue()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onBlur(); }} data-rozie-s-117f1a16="">
       <Key each={local.options as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-117f1a16="">{rozieDisplay(opt().label)}</option>}</Key>
     </select>
     </>

package/src/EditorText.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'solid-js';
 import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
+import { rozieAttr } from '@rozie/runtime-solid';
 
 interface EditorTextProps {
   /**
@@ -30,13 +31,18 @@ interface EditorTextProps {
    * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
    */
   autofocus?: boolean;
+  /**
+   * The column's human header, forwarded by the slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function EditorText(_props: EditorTextProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus', 'columnLabel']);
 
   const [draft, setDraft] = createSignal('');
+  const [touched, setTouched] = createSignal(false);
   onMount(() => {
     if (local.autofocus) inputElRef?.focus();
   });
@@ -47,17 +53,29 @@ export default function EditorText(_props: EditorTextProps): JSX.Element {
 
   // Seed the draft once at setup from the incoming value (setup-once, NOT in the
   // template). Normalize null/undefined to '' so the input value binds to a string.
-  setDraft(local.value != null ? String(local.value) : '');
+  // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────
+  // A top-level `$data.draft = <read of $props.x>` is setup-once, and on ANGULAR the emitter
+  // places setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT — Angular sets inputs after construction. Measured on the sibling EditorDate: it
+  // opened EMPTY on angular for every row while vue and lit seeded correctly. Reading the prop
+  // through a derived function is correct on all six by construction, with no flash of an empty
+  // control on the fine-grained targets and no per-target branch — the pattern `FilterSelect`
+  // already uses (`selectValue()`), which is why FilterSelect was the one drop-in unaffected.
+  // `touched` keeps the live prop read from overwriting the user once they start typing.
+  function draftValue() {
+    return touched() ? draft() : local.value != null ? String(local.value) : '';
+  }
 
   // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
   // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
   function onInput(e: any) {
     setDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
 
   // commit/cancel are Function props (default null) — guard before calling.
   function doCommit() {
-    local.commit && local.commit(draft());
+    local.commit && local.commit(draftValue());
   }
   function doCancel() {
     local.cancel && local.cancel();
@@ -81,9 +99,20 @@ export default function EditorText(_props: EditorTextProps): JSX.Element {
   // a REACTIVE refocus while already mounted (e.g. a row-mode validation failure that flips
   // autofocus back onto this already-open drop-in).
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
   return (
     <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
+    <input type="text" data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draftValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
     </>
   );
 }

package/src/FilterNumberRange.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, splitProps, untrack } from 'solid-js';
 import { rozieAttr } from '@rozie/runtime-solid';
 
 interface FilterNumberRangeProps {
@@ -23,25 +23,78 @@ interface FilterNumberRangeProps {
    * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
    */
   minMax?: (unknown) | null;
+  /**
+   * The column's human header, forwarded by the `#filter` slot scope — used as the control's accessible name in place of the internal column id.
+   */
+  columnLabel?: string;
 }
 
 export default function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, minMax: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'minMax']);
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, minMax: null, columnLabel: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'minMax', 'columnLabel']);
 
   const [minDraft, setMinDraft] = createSignal('');
   const [maxDraft, setMaxDraft] = createSignal('');
+  const [touched, setTouched] = createSignal(false);
+  createEffect(on(() => (() => Array.isArray(local.value) ? String(local.value[0]) + '\u0000' + String(local.value[1]) : '')(), (v) => untrack(() => (() => {
+    setTouched(false);
+  })()), { defer: true }));
 
-  // Seed both drafts once at setup from the incoming [min,max] tuple (setup-once).
-  setMinDraft(Array.isArray(local.value) && local.value[0] != null ? String(local.value[0]) : '');
-  setMaxDraft(Array.isArray(local.value) && local.value[1] != null ? String(local.value[1]) : '');
-
+  // ── C-08 + N-04: both drafts are DERIVED from `$props.value`, with a `touched` latch ─────
+  //
+  // C-08 — this component mounts once per rendered filter row and is NOT remounted when the
+  // filter changes, and both drafts were seeded setup-once. A programmatic reset or an external
+  // `columnFilters` write moved the real filter while these two inputs went on displaying the
+  // old numbers. See FilterText for the full reasoning; `FilterSelect` was never affected
+  // because it reads `$props.value` live, which is the pattern adopted here.
+  //
+  // N-04 — the setup-once seed was ALSO wrong on Angular from the start: the emitter places
+  // setup-once statements in the CONSTRUCTOR, where an `input()` signal still returns its
+  // DEFAULT. Measured on the sibling EditorDate.
+  //
+  // The watch clears `touched` rather than writing the drafts, so the derived readers pick the
+  // new value up on their own. It is keyed on the TUPLE ELEMENTS, not the array identity: the
+  // funnel writes a fresh `[min, max]` array for every apply, so an identity key would fire on
+  // every apply, and a consumer mutating a tuple in place would be missed by it anyway. The key
+  // is a joined STRING rather than an array — an array-returning watch getter is compared by
+  // identity on Lit, so a fresh array every read means it can never report "unchanged" (measured:
+  // the range half of the C-08 case stayed red on lit alone with an array key).
+  function minDraftValue() {
+    return touched() ? minDraft() : Array.isArray(local.value) && local.value[0] != null ? String(local.value[0]) : '';
+  }
+  function maxDraftValue() {
+    return touched() ? maxDraft() : Array.isArray(local.value) && local.value[1] != null ? String(local.value[1]) : '';
+  }
   // Untyped handler params neutralize to `any` (the global-filter idiom).
+  // C-01 — the range used to commit from `@change`, which is NOT the same event across
+  // targets for a text/number input: React maps `onChange` onto the native `input`
+  // event, so on React it fired on EVERY keystroke, in the same tick as the `@input`
+  // handler's `$data` write. `$data` is an async `useState` write there, so the commit
+  // re-read the PREVIOUS keystroke's draft and the filter ran one keystroke behind (the
+  // first keystroke cleared it). The other five use the real `change` event — blur or
+  // Enter — and were already correct.
+  //
+  // Fixed by committing on the events that mean the same thing everywhere, Enter and
+  // blur, which is also the contract FilterText already uses; and by making applyRange
+  // take both drafts as arguments so it can never re-read a value written in its own
+  // tick. That combination is target-independent rather than a React special case.
   function onMinInput(e: any) {
     setMinDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
   }
   function onMaxInput(e: any) {
     setMaxDraft(e && e.target ? e.target.value : '');
+    setTouched(true);
+  }
+
+  // Commit the range on Enter or blur — the same commit-on-commit contract FilterText
+  // uses, NOT per keystroke. Both read the drafts in a tick where nothing has just
+  // written them, so every target reads the settled value.
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') applyRange(minDraftValue(), maxDraftValue());
+  }
+  function onBlur() {
+    applyRange(minDraftValue(), maxDraftValue());
   }
 
   // Plain string-coercion functions for the placeholders (NOT $computed — the
@@ -55,9 +108,12 @@ export default function FilterNumberRange(_props: FilterNumberRangeProps): JSX.E
 
   // Convert a draft to a Number or undefined (empty string → undefined so a
   // one-sided range works). Both undefined → clear the filter.
-  function applyRange() {
-    const minNum = minDraft() === '' ? undefined : Number(minDraft());
-    const maxNum = maxDraft() === '' ? undefined : Number(maxDraft());
+  // Takes both drafts as ARGUMENTS — never re-reads $data — so it is correct on all six
+  // targets regardless of when in the tick it runs. Callers that have just written a
+  // draft pass the value they wrote.
+  function applyRange(minDraft: any, maxDraft: any) {
+    const minNum = minDraft === '' ? undefined : Number(minDraft);
+    const maxNum = maxDraft === '' ? undefined : Number(maxDraft);
     if (minNum === undefined && maxNum === undefined) {
       local.setFilter && local.setFilter(local.columnId, '');
     } else {
@@ -65,12 +121,23 @@ export default function FilterNumberRange(_props: FilterNumberRangeProps): JSX.E
     }
   }
 
+  // C-11 — the accessible name must be the column's HUMAN header, not its internal id.
+  // `columnId` is a lookup key (`unit_price`, `col_3`); a screen reader announcing it is
+  // reading an implementation detail aloud. table-core keeps the authored header on
+  // `column.columnDef.header`, which is a string for every declarative `<Column header>`;
+  // a header rendered by a function has no static text, so fall back to the id rather
+  // than invent one.
+  function a11yLabel() {
+    if (typeof local.columnLabel === 'string' && local.columnLabel !== '') return local.columnLabel;
+    return local.columnId;
+  }
+
   return (
     <>
     <span style={{ display: "flex", "align-items": "center" }} data-rozie-s-97b2c090="">
-      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + ' min')} class={"rdt-col-filter"} placeholder={rozieAttr(minPlaceholder())} value={minDraft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMinInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { applyRange(); }} data-rozie-s-97b2c090="" />
+      <input part="col-filter" type="number" aria-label={rozieAttr(a11yLabel() + ' min')} class={"rdt-col-filter"} placeholder={rozieAttr(minPlaceholder())} value={minDraftValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMinInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-97b2c090="" />
       <span data-rozie-s-97b2c090=""> - </span>
-      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + ' max')} class={"rdt-col-filter"} placeholder={rozieAttr(maxPlaceholder())} value={maxDraft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMaxInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { applyRange(); }} data-rozie-s-97b2c090="" />
+      <input part="col-filter" type="number" aria-label={rozieAttr(a11yLabel() + ' max')} class={"rdt-col-filter"} placeholder={rozieAttr(maxPlaceholder())} value={maxDraftValue()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMaxInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-97b2c090="" />
     </span>
     </>
   );