@nauticana/sail 0.8.1 → 0.8.4

package/README.md

@@ -1051,6 +1051,25 @@ protected onActionSuccess(action: TableAction, record?: Record<string, unknown>)
 
 If your downstream component extends `BaseTable` / `BaseView` and uses the alias-input pattern from v0.8.0 (`input + effect`), you can optionally migrate to `linkedSignal` — but the old pattern still compiles.
 
+```typescript
+import { input, linkedSignal } from '@angular/core';
+
+export class MyView extends BaseView {
+  // Aliased input MUST be public — Angular's strict template type-checker
+  // resolves `[tableName]="x"` from a parent template back to this field
+  // by name, and a `private` / `protected` modifier rejects the binding
+  // with TS2445. The override signal can be any visibility.
+  readonly tableNameInput = input('', { alias: 'tableName' });
+
+  override readonly tableName = linkedSignal<string, string>({
+    source: () => this.tableNameInput(),
+    computation: (v, prev) => v || prev?.value || '',  // preserve .set() when input goes empty
+  });
+}
+```
+
+The `computation` callback runs whenever the source changes. Returning `v || prev?.value` gives "use the bound value if provided, else keep the last non-empty value we had locally" — same semantics the v0.8.0 `effect()` carried.
+
 ### 5. Internal: `BaseTable.caption` is no longer memoised; `Navigation.allMenuItems` via `toSignal`
 
 `getCaption()` and `colCaption()` previously cached on first read, so `tableName` updates after first render returned stale captions. They now recompute each call (cost is negligible). `Navigation` reads `allMenuItems` via `toSignal(getMenus(), { initialValue: [] })` instead of a manual `subscribe` in `ngOnInit`.
@@ -1077,11 +1096,84 @@ Expected errors after the upgrade:
 - **`'app-*' is not a known element`** — selector rename, see step 1.
 - **`'@Output' is deprecated`** — leftover from the v0.8.0 migration; finish it.
 - **`peerinvalid` / `--legacy-peer-deps` prompts on `npm install`** — your project still has TS 6.x. Downgrade per step 6.
+- **`TS2445: Property 'xInput' is protected and only accessible within class …`** during `ng build` from a downstream project, pointing at sail's own `*.html` files (e.g. `[tableName]="..."` in `table_edit.html`) — upgrade to sail `v0.8.1` patch (published after the initial v0.8.1 cut) where the aliased input fields are public. The cause: Angular's strict template type-checker resolves the alias back to the declared field, so `input('', { alias: 'tableName' })` declared as `protected readonly tableNameInput` is unreachable from the parent template that binds `[tableName]=…`. The fix in your own subclasses, if you copied the v0.8.1 pattern: drop the `protected` / `private` modifier on any aliased `input()` field, leave it `readonly`.
 
 ### 8. Backend alignment
 
 v0.8.1 targets **keel v0.8.3**. The shared keel API surface didn't grow in this release; the version pin tracks keel's matching v0.8.x line. See [keel/README.md → Migration Guide](https://github.com/nauticana/keel/blob/main/README.md) for the matching backend changes.
 
+## Migrating to v0.8.2 — server-driven OTP resend cooldown
+
+Additive change. v0.8.1 consumers keep compiling.
+
+### What changed
+
+`OtpResponse` (model/auth.ts) gained an optional `resendCountdownSec?: number` field. keel v0.8.4 populates it from `--otp_ttl_seconds` so the resend timer in `OtpInputComponent` can match the OTP code's actual server-side lifetime instead of relying on the client-side fallback (still 30s for back-compat with older keel deployments / dev mocks that don't return the field).
+
+```ts
+export interface OtpResponse {
+  otpToken: string;
+  resendCountdownSec?: number;   // NEW — present when keel >= v0.8.4
+}
+```
+
+`OtpInputComponent.resendCountdownSec` (input, default 30) is **unchanged**. The recommended pattern is for the page that calls `sendOtp` to capture `res.resendCountdownSec` from the response and pass it to the input so the timer reflects server intent.
+
+### Adoption
+
+Two-step plumbing on the page that owns the OTP screen:
+
+1. **Capture from the send response.** After `auth.sendOtp({...}).subscribe(...)`, store `res.resendCountdownSec` in component state and forward it via router state when navigating to the confirm screen.
+
+   ```ts
+   this.auth.sendOtp({ contact, contactType, purpose: 'login' }).subscribe({
+     next: (res) => {
+       this.router.navigate(['/login/confirm'], {
+         state: {
+           otpToken: res.otpToken,
+           contact,
+           resendCountdownSec: res.resendCountdownSec,   // forward server value
+         },
+       });
+     },
+   });
+   ```
+
+2. **Read on the confirm screen + bind to the input.** Default a local signal to 30 (the legacy fallback) so older keels and the dev OTP mock keep working, then overwrite from router state and from `onResend` responses.
+
+   ```ts
+   readonly resendCountdownSec = signal(30);
+
+   constructor() {
+     const state = this.router.getCurrentNavigation()?.extras.state;
+     if (state && typeof state['resendCountdownSec'] === 'number') {
+       this.resendCountdownSec.set(state['resendCountdownSec']);
+     }
+   }
+
+   onResend() {
+     this.auth.sendOtp({...}).subscribe({
+       next: (res) => {
+         if (typeof res.resendCountdownSec === 'number') {
+           this.resendCountdownSec.set(res.resendCountdownSec);
+         }
+       },
+     });
+   }
+   ```
+
+   ```html
+   <sail-otp-input
+     [contact]="contact()"
+     [resendCountdownSec]="resendCountdownSec()"
+     (codeComplete)="verifyOtp($event)"
+     (resend)="onResend()" />
+   ```
+
+### Backend alignment
+
+v0.8.2 targets **keel v0.8.4**. The new `resendCountdownSec` response field is documented in [keel/README.md → Migration Guide (v0.8.4)](https://github.com/nauticana/keel/blob/main/README.md). Sail will tolerate older keels that don't return the field — the input falls back to its 30s default.
+
 ## Modernization items
 
 When you extend sail in your own app, apply the same patterns sail itself follows. Downstream projects that copied templates or scaffolding from earlier sail versions will benefit from the same sweep. This list is a checklist — none are sail-specific.
@@ -1097,7 +1189,7 @@ When you extend sail in your own app, apply the same patterns sail itself follow
 
 ### Components and directives
 
-- **Signal-based inputs/outputs.** `input()` / `output()` instead of `@Input()` / `@Output()`. Read as `this.x()` / `{{ x() }}`.
+- **Signal-based inputs/outputs.** `input()` / `output()` instead of `@Input()` / `@Output()`. Read as `this.x()` / `{{ x() }}`. **Keep `input()` / `output()` fields publicly accessible** (`readonly` without `private`/`protected`). Angular's strict template type-checker resolves an `{ alias: 'foo' }` back to the declared field name and rejects parent bindings against a non-public field with TS2445.
 - **`model()` for two-way bindings.** When the parent needs `[(value)]` binding semantics, declare `value = model('')` rather than rolling your own `@Output() valueChange`.
 - **`inject()` for dependencies.** No constructor parameter injection. Field-level `inject(Token)` keeps the constructor zero-arg and lets the class be subclassed without parameter forwarding.
 - **`ChangeDetectionStrategy.OnPush` on every component.** Signal-based code is fully compatible with OnPush; without it, change detection still runs needlessly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.8.1",
+  "version": "0.8.4",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "files": [

package/src/component/form/form_field.ts

@@ -31,7 +31,7 @@ import { TableLookup } from "../table/table_lookup";
     ]
 })
 export class DynamicField extends BaseTable {
-    protected readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly tableNameInput = input('', { alias: 'tableName' });
     readonly value = input<any>(undefined);
     readonly valueChange = output<any>();
     readonly recordUpdate = output<{[key: string]: any}>();

package/src/component/login/otp_input.ts

@@ -24,7 +24,13 @@ export class OtpInputComponent implements OnInit {
 
   readonly length = input(6);
   readonly contact = input('');
-  readonly resendCountdownSec = input(30);
+  // Fallback only. Consumers should pass the value returned by
+  // /public/otp/send in `resendCountdownSec` on the response — that is
+  // the authoritative value (sourced from the keel server's
+  // --otp_token_ttl_seconds flag and matches the lifetime of the OTP
+  // code itself). 300s is the legacy default, kept so existing callers
+  // without the new field don't break.
+  readonly resendCountdownSec = input(300);
   readonly disabled = input(false);
 
   readonly codeComplete = output<string>();

package/src/component/table/table_detail.ts

@@ -20,8 +20,8 @@ import { OpCode } from "../../model/common";
     ],
 })
 export class TableDetail extends BaseForm implements OnInit {
-    protected readonly tableNameInput = input('', { alias: 'tableName' });
-    protected readonly recordsInput   = input<any[]>([], { alias: 'records' });
+    readonly tableNameInput = input('', { alias: 'tableName' });
+    readonly recordsInput   = input<any[]>([], { alias: 'records' });
     readonly parentTableName = input('');
     readonly parentRecord = input<any>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */

package/src/component/table/table_edit.ts

@@ -22,9 +22,9 @@ import { OpCode } from "../../model/common";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    protected readonly recordInput    = input<any>({}, { alias: 'record' });
-    protected readonly tableNameInput = input('',      { alias: 'tableName' });
-    protected readonly apiNameInput   = input('',      { alias: 'apiName' });
+    readonly recordInput    = input<any>({}, { alias: 'record' });
+    readonly tableNameInput = input('',      { alias: 'tableName' });
+    readonly apiNameInput   = input('',      { alias: 'apiName' });
 
     readonly record              = linkedSignal<any, any>({       source: () => this.recordInput(),    computation: (v, p) => v ?? p?.value ?? {} });
     override readonly tableName  = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });

package/src/component/table/table_list.ts

@@ -16,9 +16,9 @@ import { MatIconModule } from "@angular/material/icon";
 })
 export class TableList extends BaseView implements OnInit {
     override dialogWidth = '400px';
-    protected readonly tableNameInput      = input('',          { alias: 'tableName' });
-    protected readonly apiNameInput        = input('',          { alias: 'apiName' });
-    protected readonly dialogComponentInput = input<any>(undefined, { alias: 'dialogComponent' });
+    readonly tableNameInput       = input('',          { alias: 'tableName' });
+    readonly apiNameInput          = input('',          { alias: 'apiName' });
+    readonly dialogComponentInput  = input<any>(undefined, { alias: 'dialogComponent' });
 
     // linkedSignal: defaults to the consumer's input, but ngOnInit / route data
     // can override with `.set()`. The `computation` preserves the last

package/src/component/table/table_search.ts

@@ -18,9 +18,9 @@ import { ApplicationMenu } from "../../model/common";
     ],
 })
 export class TableSearch extends BaseForm implements OnInit {
-    protected readonly tableNameInput   = input('', { alias: 'tableName' });
-    protected readonly apiNameInput     = input('', { alias: 'apiName' });
-    protected readonly targetRouteInput = input('', { alias: 'targetRoute' });
+    readonly tableNameInput   = input('', { alias: 'tableName' });
+    readonly apiNameInput     = input('', { alias: 'apiName' });
+    readonly targetRouteInput = input('', { alias: 'targetRoute' });
 
     override readonly tableName  = linkedSignal<string, string>({ source: () => this.tableNameInput(),   computation: (v, p) => v || p?.value || '' });
     readonly apiName              = linkedSignal<string, string>({ source: () => this.apiNameInput(),     computation: (v, p) => v || p?.value || '' });

package/src/model/auth.ts

@@ -80,6 +80,10 @@ export interface OtpRequest {
 // wrong code.
 export interface OtpResponse {
   otpToken: string;
+  // Seconds the client should wait before allowing a resend; mirrors
+  // the server's --otp_ttl_seconds. Optional for back-compat with
+  // older keel versions that didn't return it.
+  resendCountdownSec?: number;
 }
 
 export interface OtpVerifyRequest {