stimeo-ui 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7dc7faa9f1a7d87af3398be60736f22e76e8e1b6ef534d0b8605e3fcdb9f4eb
-  data.tar.gz: 05bd47298cc4e0592f1247140c83e1cedff106c91b6a972734e5d9d3a507e3ea
+  metadata.gz: 3a8ccbe681a75206e0bb8a8866faeb91e0f3878c6b05cba845d00a333bb87041
+  data.tar.gz: f037b2908d8f19d55f1b9c5823a80b0459f995837b396dcc686b6b9318ee58dc
 SHA512:
-  metadata.gz: aa22c951a7b4d5ba07c34f5f17c86227f8079d1222c40d895a1198c274c021198dc89edad6c129df4526b79001455834c88bd7ffdd46eb95dbd76166dba5975e
-  data.tar.gz: f95da4d63fee6006b75ec78a7dd91a73d3535fe82b456a298dd7a273e1f415df829c0fe08fc4c065d0d680d70d8434874226f30eadb5eccf4e5fc1b5ef5c99cb
+  metadata.gz: 785070e68e5d1cad2c96d1ca1821096662d2612a42121c254d5d0b92400b2e4f04af759fb1ad8827c1100dad712a43e5c0d45032aa72449d54956d3bf606f982
+  data.tar.gz: 2e1632573e162636ffd659fb01b0cc0c5d5d22d0d521e6f9c39793a28023f0403eb3008fd5640d65f73b74d7d19ce210d01b7413b459db3fa5e6bbf8bcb58dce

data/CHANGELOG.md

@@ -7,6 +7,94 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.9.0] - 2026-08-28
+
+Minor release with no new components. Ten existing ones are reworked —
+bulk-select, clipboard, color-picker, data-grid, editable, filter, masonry, otp,
+reset-before-cache, and resizable — and of those, bulk-select, clipboard,
+data-grid, and editable also changed their markup contracts, so read Removed and
+Changed before upgrading. The Inspector manifest stays on schema v12.
+
+### Removed
+
+- bulk-select: `announce`, and the `aria-live` on the `bar` target that went with
+  it — the count goes through the page's `stimeo--announcer` now.
+- clipboard: the live-region requirement on the `feedback` target. Drop the
+  `role="status"` and `aria-live`; the slot is a plain visible label.
+- editable: the `onBlur` action. Drop `blur->stimeo--editable#onBlur` — the
+  departure is watched on the controller element.
+
+### Added
+
+- bulk-select: `announceText`, carrying `{count}`, and a `reconcile` event.
+- clipboard: `announceCopiedText` and `announceErrorText`. Like `announceText`
+  they default to empty, so seat a `stimeo--announcer` on the page and write the
+  wording you want read.
+- editable: `save` / `cancel` / `revert` actions, and `data-value` on the
+  `display` target for a display that renders the value rather than being it.
+- color-picker: `data-value-text`, an `aria-valuetext` template whose `{value}`
+  carries the channel value, for pages that are not in English.
+- Declarations read once are followed when they change — filter's `match`,
+  masonry's `minColumnWidth` / `gap`, resizable's `min` / `max` — as are targets
+  swapped in later by color-picker, editable, masonry, and resizable, and masonry
+  also relays out when a descendant resource finishes loading.
+
+### Changed
+
+- bulk-select: `selectAllPages` checks the rows on the page too, so a row that
+  arrives while the mode is on lands checked. Hiding the bar hands focus to the
+  select-all box, and a `bar` carrying `role="toolbar"` wants `stimeo--toolbar`
+  alongside it for the arrow keys and the single tab stop.
+- clipboard: `copied` and `error` are transient `data-state` values — a
+  `connect()` that finds either returns to `idle`, and the state is rewound
+  before Turbo caches the page. Any other authored `data-state` is left alone.
+- color-picker: `aria-valuenow` / `aria-valuetext` / `aria-valuemin` /
+  `aria-valuemax` are controller-owned, so the markup supplies `role="slider"`
+  and a name; an omitted range resolves to the channel default (hue `0`–`360`,
+  the rest `0`–`100`). Only a primary-button press drags, and an `alpha` slider
+  is inert unless `alpha` is on.
+- data-grid: a keystroke or click that reached a control inside a cell, and one
+  an IME is composing, belongs to that control — no move, no sort, no selection.
+  The exception is a click on a sortable header's own `<button>`, which needs
+  `tabindex="-1"`; host `gridcell` / `columnheader` on `td` / `th`.
+- editable: the mode is read back from the DOM and the controller writes no ARIA.
+  Focus landing inside the component has not left the edit, so a Save or Cancel
+  button beside the input keeps it open, and the value is trimmed once at the save.
+- reset-before-cache: `data-reset-value` returns a field to what the markup
+  declares — `defaultValue`, `defaultChecked`, the `selected` option — instead of
+  emptying it; a file input empties and `hidden` / `submit` / `reset` / `button` /
+  `image` are left alone.
+- resizable: a separator with no `aria-orientation` reads as `horizontal`, and
+  `toggle` reopens at the position the pane collapsed from. Pointer capture and
+  the drag listeners sit on the `separator` target, not on `event.target` and
+  `document`.
+- masonry: `layout` fires when the result moves, not only on a column count
+  change, and every relayout after the first is deferred to a microtask. otp:
+  `reconcile` reports a move in the pair (joined value, `data-state`).
+- A declaration that cannot be read falls back to its default instead of reaching
+  ARIA or CSS as `NaN` — masonry's `minColumnWidth` / `gap`, resizable's `min` /
+  `max` / `value` / `step`, bulk-select's `totalCount`, and reset-before-cache's
+  `scope`, which no longer aborts the whole sweep.
+- Inspector: clipboard's `feedback` is no longer required, a color-picker
+  `slider` is checked for `role` and a name only, and bulk-select and clipboard
+  join the components that need a `stimeo--announcer`.
+
+### Fixed
+
+- data-grid: `Enter` and `Space` on a `<button>` nested in a cell reach it, so a
+  row-action button is keyboard-reachable, and rows coming and going at runtime
+  re-establish exactly one tab stop. editable: tabbing past a Save or Cancel
+  button no longer strands the editor open, and a display removed mid-edit no
+  longer throws. bulk-select: a nested bulk-select's rows stay out of the outer
+  container's count.
+- clipboard: a copy that resolved after disconnect wrote to the detached element
+  and armed a timer past the teardown, and a repeat inside the feedback window is
+  read out again. In color-picker a drag belongs to the pointer that started it,
+  in masonry an item removed and re-appended in one batch keeps its layout hooks,
+  and in resizable `data-dragging` no longer rides a Turbo snapshot.
+- reset-before-cache: `data-reset-value` wrote an empty string into a checkbox's
+  `value` attribute, and could leave a select with nothing selected at all.
+
 ## [0.8.0] - 2026-08-22
 
 Minor release with no new components. Eight existing ones are reworked —
@@ -695,6 +783,7 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
+[0.9.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.9.0
 [0.8.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.8.0
 [0.7.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.7.0
 [0.6.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.6.0

data/dist/controllers/bulk_select_controller.js

@@ -1,72 +1,189 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/bulk_select_controller.ts
+
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/bulk_select_controller.ts
 var BulkSelectController = class extends Controller {
   static targets = ["all", "item", "bar", "count", "selectAllPages"];
   static values = {
     totalCount: { type: Number, default: 0 },
-    announce: { type: Boolean, default: true }
+    announceText: { type: String, default: "" }
   };
   static actions = ["clear", "selectAllPages"];
-  static events = ["change"];
-  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it
-   *  survives a Turbo swap and `connect()` can rehydrate it. */
+  static events = ["change", "reconcile"];
+  /** All-pages mode is a transient UI state, mirrored to `data-all-pages` so a
+   *  `connect()` over markup that already carries the attribute rehydrates the
+   *  mode — a morph, a Turbo Stream, or a server that renders it back. A restore
+   *  visit serves the server's markup instead, so the mode does not survive one. */
   #allPagesMode = false;
-  /** Last emitted figures, so a recompute dispatches `change` only on real change. */
+  /** Last emitted figures, so a recompute reports only on a real change. */
   #lastCount = -1;
   #lastAllPages = false;
+  /** Collapses every signal from one DOM or Value update into one repair. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());
   /** Delegated `change` handler covering the select-all box and every row. */
   #onChange = (event) => {
     const target = event.target;
     if (!target) return;
     if (this.hasAllTarget && target === this.allTarget) {
       this.#applyAll();
-    } else if (target.matches('[data-stimeo--bulk-select-target="item"]')) {
+    } else if (this.itemTargets.some((item) => item === target)) {
       this.#exitAllPages();
-      this.#recompute(true);
+      this.#reportChange(this.#recompute());
     }
   };
   connect() {
     this.#allPagesMode = this.element.dataset.allPages === "true";
+    this.#reconcile.activate();
     this.element.addEventListener("change", this.#onChange);
-    this.#recompute(false);
+    this.#recompute();
   }
   disconnect() {
     this.element.removeEventListener("change", this.#onChange);
+    this.#reconcile.cancel();
+  }
+  /** Repairs the figures for a row that arrived at runtime. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after a row leaves, so a removed selection stops counting. */
+  itemTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reflects the current selection onto a select-all box added at runtime. */
+  allTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after the select-all box leaves. */
+  allTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+  totalCountValueChanged() {
+    if (!Number.isFinite(this.totalCountValue)) {
+      this.totalCountValue = 0;
+      return;
+    }
+    this.#reconcile.schedule();
+  }
+  /** Repaints so wording changed at runtime is used by the next announcement. */
+  announceTextValueChanged() {
+    this.#reconcile.schedule();
   }
   /** Clears every selection (rows + select-all) and exits all-pages mode. */
   clear() {
-    for (const item of this.#items) item.checked = false;
+    for (const item of this.itemTargets) item.checked = false;
     if (this.hasAllTarget) {
       this.allTarget.checked = false;
       this.allTarget.indeterminate = false;
     }
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
-  /** Enters "select all across pages" mode (count shows `totalCount`). */
+  /**
+   * Enters "select all across pages" mode: the count shows `totalCount`, and every
+   * row on this page is checked.
+   *
+   * The mode's claim is that the whole set is selected, so leaving a visible row
+   * unchecked would put the page and the count in open disagreement.
+   */
   selectAllPages() {
     this.#allPagesMode = true;
-    this.#recompute(true);
+    this.#checkEveryRow();
+    this.#reportChange(this.#recompute());
+  }
+  /** Marks every row on this page selected. */
+  #checkEveryRow() {
+    for (const item of this.itemTargets) item.checked = true;
   }
   /** Mirrors the select-all box to every row, then recomputes. */
   #applyAll() {
     if (!this.hasAllTarget) return;
     const { checked } = this.allTarget;
-    for (const item of this.#items) item.checked = checked;
+    for (const item of this.itemTargets) item.checked = checked;
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
   #exitAllPages() {
     this.#allPagesMode = false;
   }
+  /** Repairs the derived state after the page moved rows or a render input. */
+  #reconcileNow() {
+    if (this.#allPagesMode) this.#checkEveryRow();
+    const detail = this.#recompute();
+    if (!detail) return;
+    this.dispatch("reconcile", { detail });
+    this.#announce(detail);
+  }
+  /** Reports a selection the user moved. */
+  #reportChange(detail) {
+    if (!detail) return;
+    this.dispatch("change", { detail });
+    this.#announce(detail);
+  }
+  /** Hands the count to the shared announcer, worded by the consumer. */
+  #announce(detail) {
+    announce(fillTemplate(this.announceTextValue, { count: detail.count }));
+  }
   /**
    * Recomputes the count, the select-all checked/indeterminate state, and the bar
-   * visibility from the current DOM. Dispatches `change` (when `notify`) only if
-   * the emitted count or all-pages flag actually changed.
+   * visibility from the current DOM. Returns the figures when the emitted count or
+   * all-pages flag actually moved, and `null` when they did not.
+   *
+   * @stimeoRenderRoot
    */
-  #recompute(notify) {
-    const items = this.#items;
+  #recompute() {
+    const items = this.itemTargets;
     const total = items.length;
     const checked = items.filter((item) => item.checked).length;
     const allPages = this.#allPagesMode;
@@ -77,8 +194,10 @@ var BulkSelectController = class extends Controller {
     const count = allPages ? this.totalCountValue : checked;
     const show = allPages || checked > 0;
     if (this.hasBarTarget) {
+      if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {
+        this.allTarget.focus();
+      }
       this.barTarget.hidden = !show;
-      this.barTarget.setAttribute("aria-live", this.announceValue ? "polite" : "off");
     }
     if (this.hasCountTarget) this.countTarget.textContent = String(count);
     this.element.setAttribute("data-selected-count", String(checked));
@@ -87,15 +206,7 @@ var BulkSelectController = class extends Controller {
     const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;
     this.#lastCount = count;
     this.#lastAllPages = allPages;
-    if (notify && changed) {
-      this.dispatch("change", { detail: { count, allPages } });
-    }
-  }
-  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */
-  get #items() {
-    return Array.from(
-      this.element.querySelectorAll('[data-stimeo--bulk-select-target="item"]')
-    );
+    return changed ? { count, allPages } : null;
   }
 };
 

data/dist/controllers/clipboard_controller.js

@@ -2,6 +2,46 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/clipboard_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/default_attribute.ts
 function setDefaultAttribute(element, name, value) {
   if (element.hasAttribute(name)) return false;
@@ -63,45 +103,59 @@ var SafeTimeout = class extends TimerRegistry {
 };
 
 // src/controllers/clipboard_controller.ts
+var TRANSIENT_STATES = /* @__PURE__ */ new Set(["copied", "error"]);
 var ClipboardController = class extends Controller {
   static targets = ["source", "button", "feedback"];
   static values = {
     text: { type: String, default: "" },
     feedbackDuration: { type: Number, default: 2e3 },
     copiedLabel: { type: String, default: "Copied" },
-    errorLabel: { type: String, default: "Copy failed" }
+    errorLabel: { type: String, default: "Copy failed" },
+    announceCopiedText: { type: String, default: "" },
+    announceErrorText: { type: String, default: "" }
   };
   static actions = ["copy"];
   static events = ["copy"];
-  /** Auto-clear timer for the completion notice; torn down on disconnect. */
+  /**
+   * The pending return to idle — the only timer this controller schedules, so
+   * `clearAll()` is exactly "drop the auto-clear" and needs no id of its own.
+   */
   #timers = new SafeTimeout();
+  /** Returns the completion state to idle for the snapshot Turbo takes. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewind());
   /**
-   * The pending auto-clear timer id, or `null` when none is scheduled. Tracked so
-   * a rapid second copy cancels the first window instead of letting a stale timer
-   * reset the freshly-shown notice early.
+   * Whether this connection is still live. `copy()` suspends on the Clipboard API,
+   * and a teardown that lands while it is suspended must win: the continuation
+   * would otherwise write to an element nobody owns and arm a timer past the
+   * `clearAll()` that was supposed to be the last word.
    */
-  #resetTimerId = null;
+  #connected = false;
   connect() {
-    setDefaultAttribute(this.element, "data-state", "idle");
+    this.#connected = true;
+    this.#adopt();
+    this.#beforeCache.activate();
   }
   disconnect() {
+    this.#connected = false;
+    this.#beforeCache.deactivate();
     this.#timers.clearAll();
   }
   /**
    * Copies the resolved text and reports the outcome. Bound via `data-action`
-   * (click). Always dispatches `stimeo--clipboard:copy` with `{ success, text }`
-   * — including on failure — so consumers can react either way.
+   * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text }` once per
+   * completed attempt — including on failure — so consumers can react either way.
+   * An attempt whose connection ended while it was in flight reports nothing.
    */
   async copy() {
     const text = this.#resolveText();
     let success = false;
     try {
-      if (!navigator.clipboard?.writeText) throw new Error("Clipboard API unavailable");
       await navigator.clipboard.writeText(text);
       success = true;
     } catch {
       success = false;
     }
+    if (!this.#connected) return;
     this.#reportResult(success);
     this.dispatch("copy", { detail: { success, text } });
   }
@@ -118,24 +172,52 @@ var ClipboardController = class extends Controller {
     }
     return source.textContent ?? "";
   }
-  /** Reflects the result on `data-state`, announces it, and schedules a reset. */
+  /**
+   * Reads the current state back from the DOM.
+   *
+   * A `copied` or `error` found at connect time is this controller's own output
+   * from a connection that is gone, and so is the timer that would have cleared it
+   * — nothing else would ever return the element to `idle`. Any other authored
+   * value belongs to the consumer and only a missing attribute takes the default.
+   */
+  #adopt() {
+    if (this.#inTransientState()) {
+      this.#reset();
+      return;
+    }
+    setDefaultAttribute(this.element, "data-state", "idle");
+  }
+  /** Whether `data-state` currently holds one of the values this controller writes. */
+  #inTransientState() {
+    const state = this.element.getAttribute("data-state");
+    return state !== null && TRANSIENT_STATES.has(state);
+  }
+  /**
+   * Returns the completion state to idle for the snapshot Turbo is about to take,
+   * so a page reached with the Back button does not report a copy that happened
+   * before the navigation. Only a state this controller wrote is rewound — an
+   * authored one is the consumer's and has to survive into the snapshot, exactly as
+   * `connect()` leaves it alone. State only — no `copy` is dispatched, which would
+   * claim a fresh copy ran.
+   */
+  #rewind() {
+    if (!this.#inTransientState()) return;
+    this.#timers.clearAll();
+    this.#reset();
+  }
+  /** Reflects the result, announces it, and schedules the return to idle. */
   #reportResult(success) {
     this.element.setAttribute("data-state", success ? "copied" : "error");
     if (this.hasFeedbackTarget) {
       this.feedbackTarget.textContent = success ? this.copiedLabelValue : this.errorLabelValue;
     }
-    if (this.#resetTimerId !== null) {
-      this.#timers.clear(this.#resetTimerId);
-      this.#resetTimerId = null;
-    }
+    announce(success ? this.announceCopiedTextValue : this.announceErrorTextValue);
+    this.#timers.clearAll();
     if (this.feedbackDurationValue > 0) {
-      this.#resetTimerId = this.#timers.set(() => {
-        this.#resetTimerId = null;
-        this.#reset();
-      }, this.feedbackDurationValue);
+      this.#timers.set(() => this.#reset(), this.feedbackDurationValue);
     }
   }
-  /** Returns to the idle state and clears the completion notice. */
+  /** Returns to the idle state and empties the completion slot. */
   #reset() {
     this.element.setAttribute("data-state", "idle");
     if (this.hasFeedbackTarget) {