@zerotal/flow 1.7.3 → 1.7.5

package/CHANGELOG.md

@@ -11,6 +11,38 @@ change.
 
 ## [Unreleased]
 
+## [1.7.3] — 2026-08-20
+
+### Changed
+
+- **BREAKING — `this.title(…)` is removed.** Declare `static title` instead — a string, or a
+  function of the component: `static title = (c: SearchPage) => \`Search: ${c.query}\``. It is
+resolved on the server for every render and every patch, so a title that depends on state
+follows it without an action remembering to update it. `_titleValue` and the per-frame reset
+  go with it.
+
+  A call to `this.title(…)` on a component that declares its own `title` field now sets that
+  field rather than the document title, which is silent — search for `this.title(` before
+  upgrading.
+
+### Fixed
+
+- **A bound password field silently discarded every keystroke.** The client-writable set was
+  `fillable` minus `hidden`, which conflates two allow-lists that answer different questions:
+  `fillable`/`guarded` govern what may be _written_, `visible`/`hidden` govern what may be
+  _shown_. A password is in both — fillable because a user sets it, hidden because the stored
+  hash must never reach a page — so subtracting made it unwritable, and
+  `<input type="password" value={this.user.password} blur />` accepted typing and dropped it
+  on arrival. `hidden` is no longer subtracted. It is still never _sent_: the hash does not
+  leave the server, and the field arrives empty as it should. A hidden value the client
+  supplied now survives until save, and one the _server_ produced is never echoed back.
+
+  A half-typed secret is also stripped from the [durable snapshot](/docs/flow/lifecycle)
+  before it is persisted — that store is written server-side after every request and may be
+  backed by Redis, which is no place for a password in progress.
+
+## [1.7.2] — 2026-08-18
+
 ### Added
 
 - **`@on` can name a channel per instance.** A listener's channel is read off the _class_, so
@@ -52,20 +84,6 @@ change.
 
 ### Fixed
 
-- **A bound password field silently discarded every keystroke.** The client-writable set was
-  `fillable` minus `hidden`, which conflates two allow-lists that answer different questions:
-  `fillable`/`guarded` govern what may be _written_, `visible`/`hidden` govern what may be
-  _shown_. A password is in both — fillable because a user sets it, hidden because the stored
-  hash must never reach a page — so subtracting made it unwritable, and
-  `<input type="password" value={this.user.password} blur />` accepted typing and dropped it
-  on arrival. `hidden` is no longer subtracted. It is still never _sent_: the hash does not
-  leave the server, and the field arrives empty as it should. A hidden value the client
-  supplied now survives until save, and one the _server_ produced is never echoed back.
-
-  A half-typed secret is also stripped from the [durable snapshot](/docs/flow/lifecycle)
-  before it is persisted — that store is written server-side after every request and may be
-  backed by Redis, which is no place for a password in progress.
-
 - **`<FileUpload>` never stopped saying "Uploading… 100%".** A successful upload left the
   dropzone reporting progress forever. The bytes had gone up, the signed reference had come
   back, and the bound property had been set — the only thing that failed was the component
@@ -115,20 +133,23 @@ change.
 
 ### Documented
 
-Four behaviours that were true but written down nowhere, each found by hitting it:
-
 - **AOT compilation and `__()` are mutually exclusive** — a function call in a text child forces
   the runtime fallback, so a translated app compiles no pages at all. Normally that is a speed
   cost; under `cspSafe`, where every page must compile, it is a build failure. `performance.md`
   now lists what blocks compilation and what to do about it.
+
 - **`FlowTest` opens no request scope**, so `Auth.user()` and `Auth.attempt()` throw and no
   action behind a sign-in can be driven without wrapping it. `testing.md` carries the wrapper.
+
 - **A layout cannot set the document's `lang`** — Flow emits `<html lang="en">` and offers no
   hook, so a localised app marks up its wrapper instead and the root element stays wrong.
+
 - **`<Tabs>` selection is client-only and its strip is not themeable** — no bindable prop, so no
   `?tab=`, no back button, and hardcoded gray/indigo that is invisible on a light surface.
+
 - **Flow and `zerotal/view` components do not interoperate** — the two JSX runtimes produce
   different element types (`HtmlNode` vs `SafeHtml`), so a view `FC` in a Flow page is `TS2786`.
+
 - **`onSort` does not say which container took the drop** — the destination is encoded in which
   method runs, so dragging between containers needs one action per container.
 

package/api-surface.md

@@ -281,8 +281,6 @@ function registerComponent = (PageClass: typeof Component, path?: string) => voi
 
 function registerFlowEvent = <K extends EventName>(name: K, guard: (payload: unknown) => payload is FlowEvents[K]) => void
 
-function registerFlowModel = (name: string, ModelClass: typeof BaseModel) => void
-
 function registerForm = (FormClass: new () => Form) => void
 
 function registerSynth = (synth: Synth) => void
@@ -1026,7 +1024,7 @@ interface VirtualizeProps = {
 
 type Constructor = abstract new (...args: any[]) => T
 
-type DurableOption = boolean | {    ttl?: string;    scope?: 'user' | 'session';}
+type DurableOption = boolean | { ttl?: string; scope?: 'user' | 'session' }
 
 type EventName = never
 
@@ -1040,7 +1038,7 @@ type FlashPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' |
 
 type HtmlNode = {    html: string;}
 
-type ListenerName = (string & {}) | ((self: Record<string, any>) => string)
+type ListenerName = LooseEventName | ((self: Record<string, any>) => string)
 
 type Mixin = (Base: TIn) => TOut
 
@@ -1089,12 +1087,8 @@ function __escAttr = (v: unknown) => string
 
 ## ./store  `(./src/store.ts)`
 
-function clientStore = () => Record<string, unknown>
-
 function defineStore = (initial: Record<string, unknown>) => void
 
-function initClientStore = (alpine: AlpineStores) => Record<string, unknown>
-
 interface FlowStore = {}
 
 ## ./testing  `(./src/testing.ts)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerotal/flow",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "license": "MIT",
   "maturity": "stable",
   "private": false,
@@ -47,15 +47,15 @@
     "@alpinejs/morph": "^3.14.9",
     "@alpinejs/persist": "^3.14.9",
     "@alpinejs/resize": "^3.14.9",
-    "@zerotal/client": "1.7.3",
-    "@zerotal/core": "1.7.3",
-    "@zerotal/orm": "1.7.3",
-    "@zerotal/validator": "1.7.3",
+    "@zerotal/client": "1.7.5",
+    "@zerotal/core": "1.7.5",
+    "@zerotal/orm": "1.7.5",
+    "@zerotal/validator": "1.7.5",
     "alpinejs": "^3.14.9",
     "typescript": "^5.8.0"
   },
   "devDependencies": {
-    "@zerotal/broadcasting": "1.7.3",
+    "@zerotal/broadcasting": "1.7.5",
     "@types/alpinejs": "^3.13.10",
     "@types/alpinejs__anchor": "^3.13.1",
     "@types/alpinejs__collapse": "^3.13.4",

package/src/client/bridge.ts

@@ -2612,6 +2612,23 @@ function _linkActive(href: string, path: string, exact = false): boolean {
   return h === path || (h.length > 1 && path.startsWith(h + "/"));
 }
 
+/**
+ * Mark a navigate link as the current page, for both kinds of reader.
+ *
+ * `data-current` styles it; `aria-current` is the only way anyone using a screen
+ * reader learns which of thirty nav items is the page they are on. Setting one
+ * without the other marks the link only for people who can see it.
+ */
+function _mark(el: Element, active: boolean): void {
+  if (active) {
+    el.setAttribute("data-current", "");
+    el.setAttribute("aria-current", "page");
+  } else {
+    el.removeAttribute("data-current");
+    el.removeAttribute("aria-current");
+  }
+}
+
 function _updateCurrentLinks(): void {
   const path = window.location.pathname;
 
@@ -2623,13 +2640,11 @@ function _updateCurrentLinks(): void {
   document.querySelectorAll("a[flow\\:navigate]").forEach((el) => {
     if (el.hasAttribute("flow:current.ignore")) return;
     if (el.hasAttribute("flow:current.force")) {
-      el.setAttribute("data-current", "");
+      _mark(el, true);
       return;
     }
     const exact = el.hasAttribute("flow:current.exact");
-    if (_linkActive(el.getAttribute("href") ?? "", path, exact))
-      el.setAttribute("data-current", "");
-    else el.removeAttribute("data-current");
+    _mark(el, _linkActive(el.getAttribute("href") ?? "", path, exact));
   });
 
   document.querySelectorAll("a[flow\\:navigate][flow\\:current]").forEach((el) => {

package/src/components.ts

@@ -250,7 +250,10 @@ export function Modal(props: ModalProps): HtmlNode {
   if (name) {
     overlay["flow:show"] = name;
     overlay["data-flow-modal"] = name;
-    overlay["x-trap"] = `$flow.${name}`; // trap focus while open (@alpinejs/focus)
+    // `.noscroll` locks the body while the dialog is open. Without it focus is
+    // trapped correctly and the page behind still scrolls under a finger or a
+    // wheel, which on a phone reads as the dialog having broken the page.
+    overlay["x-trap.noscroll"] = `$flow.${name}`; // focus trap + scroll lock (@alpinejs/focus)
     if (title) overlay["aria-labelledby"] = titleId;
   }
   if (!open) overlay["style"] = { display: "none" };
@@ -1482,7 +1485,7 @@ export function Drawer(props: DrawerProps): HtmlNode {
   };
   if (name) {
     panelOut["data-flow-modal"] = name; // Escape-to-close (shared bridge handler)
-    panelOut["x-trap"] = shownExpr; // trap focus while open
+    panelOut["x-trap.noscroll"] = shownExpr; // focus trap + scroll lock, as Modal
     if (title) panelOut["aria-labelledby"] = titleId;
   }