@nauticana/sail 0.8.0 → 0.8.1

package/README.md

@@ -2,7 +2,7 @@
 
 A shared Angular component library for building CRUD-based admin frontends. Provides table management, form handling, navigation, authentication, two-factor authentication, and trusted device management — all driven by metadata from a [keel](https://github.com/nauticana/keel) Go backend.
 
-> **Compatibility:** sail and keel are versioned in lock-step. Use **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400.
+> **Compatibility:** sail and keel are versioned in lock-step. Use **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**, **sail v0.8.x ↔ keel v0.8.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400. The v0.8.x line additionally ships the `table_action` framework (per-table custom buttons surfaced in `TableList` / `TableSearch` / `TableEdit` / `TableDetail`); see the [Migrating to v0.7.0 §5 — TableAction](#migrating-to-v070--payout-user-payment-methods-table-actions) section for the seed shape (basis `table_action` + `authorization_object` + `authorization_object_action` rows) and the [keel/README Table Actions](https://github.com/nauticana/keel#table-actions) section for backend wiring via `handler.WrapTableAction`.
 
 ## What it provides
 
@@ -143,7 +143,7 @@ import { Navigation } from '@nauticana/sail';
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [Navigation],
-  template: `<app-navigation><span toolbar-title>My App</span></app-navigation>`,
+  template: `<sail-navigation><span toolbar-title>My App</span></sail-navigation>`,
 })
 export class App {}
 ```
@@ -328,23 +328,23 @@ export class PricingPage {
 
 **Plan picker** — pure presentational, no API calls:
 ```html
-<app-plan-selector
+<sail-plan-selector
     [plans]="plans()"
     [selected]="selectedPlan()"
     [features]="{ PRO: ['Unlimited users', '24/7 support'] }"
     (selectionChange)="selectedPlan.set($event)">
-</app-plan-selector>
+</sail-plan-selector>
 ```
 
 **Checkout button** — calls `createCheckout()` and redirects to the provider-hosted URL. `PublicPlan.priceId` lets you wire the picker directly to checkout without a local mapping table:
 ```html
-<app-checkout-button
+<sail-checkout-button
     [priceId]="selectedPlan().priceId!"
     [mode]="'subscription'"
     [successUrl]="'https://app.example.com/billing/done'"
     [cancelUrl]="'https://app.example.com/billing'"
     [email]="userEmail">
-</app-checkout-button>
+</sail-checkout-button>
 ```
 
 For one-off charges use `[mode]="'payment'"`. For "save a card without charging" (Stripe SetupIntent), use `[mode]="'setup'"` and **omit** `[priceId]` — keel rejects a non-empty `priceId` in setup mode with 400.
@@ -364,7 +364,7 @@ metadata: {
 
 **Payment methods** — lists saved methods with loading and empty states:
 ```html
-<app-payment-methods></app-payment-methods>
+<sail-payment-methods></sail-payment-methods>
 ```
 
 ### Registration → checkout flow
@@ -430,12 +430,12 @@ import { ConsentGateComponent, ConsentOption, ConsentState, ConsentType } from '
 @Component({
   imports: [ConsentGateComponent],
   template: `
-    <app-consent-gate
+    <sail-consent-gate
         [policyVersion]="'v1'"
         [policyLanguage]="'en'"
         [optionalConsents]="extras"
         (consentStateChange)="onConsent($event)">
-    </app-consent-gate>
+    </sail-consent-gate>
   `,
 })
 export class SignupPage {
@@ -468,12 +468,12 @@ import { BaseAuthService, OtpInputComponent } from '@nauticana/sail';
 @Component({
   imports: [OtpInputComponent],
   template: `
-    <app-otp-input
+    <sail-otp-input
         [contact]="contact()"
         [length]="6"
         (codeComplete)="onVerify($event)"
         (resend)="onResend()">
-    </app-otp-input>
+    </sail-otp-input>
     @if (error()) { <div class="auth-error">{{ error() }}</div> }
   `,
 })
@@ -510,12 +510,12 @@ Override `verifyOtp()` in your own `AuthService extends BaseAuthService` when yo
 `SocialLoginComponent` renders Google / Apple buttons using each provider's official SDK. It loads the SDKs dynamically via `loadScript()` — nothing is bundled into your app.
 
 ```html
-<app-social-login
+<sail-social-login
     [providers]="['google', 'apple']"
     [consent]="consentState"
     (loginSuccess)="onSuccess($event)"
     (loginError)="onError($event)">
-</app-social-login>
+</sail-social-login>
 ```
 
 Config required in `SAIL_GUI_CONFIG`:
@@ -557,7 +557,7 @@ auth.deleteAccount(reauth, 'Closing my account.').subscribe();
 ### Account deletion
 
 ```html
-<app-account-deletion [confirmationText]="'DELETE'"></app-account-deletion>
+<sail-account-deletion [confirmationText]="'DELETE'"></sail-account-deletion>
 ```
 
 Typed-confirmation UX: the destructive button is disabled until the user types the exact `confirmationText` (default `DELETE`) **and** confirms their password. Optional reason textarea is forwarded to the backend. On success, local session is cleared and the router navigates to `config.accountDeletedRoute` (default `/login/local`).
@@ -567,7 +567,7 @@ Typed-confirmation UX: the destructive button is disabled until the user types t
 `TrustedDevicesComponent` ships a "Sign out of all devices" button that reveals a password field, then calls `BaseAuthService.logoutEverywhere({ password })` (`POST /api/user/logout-everywhere`). It also displays a single-device-mode banner when configured:
 
 ```html
-<app-trusted-devices [singleDeviceSession]="user.singleDeviceSession"></app-trusted-devices>
+<sail-trusted-devices [singleDeviceSession]="user.singleDeviceSession"></sail-trusted-devices>
 ```
 
 Pass `singleDeviceSession` from your login response (the field is part of `LoginResponse2FA`). When true, the banner reads: *"This account is in single-device mode — signing in on another device will sign you out here."*
@@ -977,6 +977,111 @@ Type errors after the upgrade fall into four buckets:
 - **`Property 'X' does not exist on type 'EventEmitter<T>'.`** — you still import `EventEmitter`. Replace the field with `output<T>()` per step 3.
 - **`'@Input' is deprecated`** / Angular language-service squiggles on decorators — step 3.
 
+## Migrating to v0.8.1 — selector standardisation, OOP cleanup, keel v0.8.3 alignment
+
+v0.8.1 is a polish pass on top of v0.8.0's signal migration. The biggest change is **the component selector prefix**: every sail component is now `sail-*`, where v0.8.0 still shipped a mix of `app-*` (older components) and `sail-*` (the v0.6 / v0.7 additions). The rest of the release is internal OOP cleanup that's mostly invisible to downstream code, plus a TypeScript downgrade and a keel pin.
+
+| | v0.8.0 | v0.8.1 |
+|---|---|---|
+| keel | `v0.8.0` | `v0.8.3` |
+| TypeScript | `~6.0.3` | `~5.9.3` |
+| Component selector prefix | `app-*` (older) + `sail-*` (newer) | `sail-*` (uniform) |
+
+### 1. Selector rename — `app-*` → `sail-*` (and `table-*` / `dynamic-field` / `record-form` → `sail-*`)
+
+Every sail component selector now starts with `sail-`. **This is the breaking change**: any downstream template that embeds a sail component needs the prefix updated. Search-and-replace across your templates:
+
+| Old | New |
+|---|---|
+| `<app-navigation>` | `<sail-navigation>` |
+| `<app-login>` | `<sail-login>` |
+| `<app-register>` | `<sail-register>` |
+| `<app-chpass>` | `<sail-chpass>` |
+| `<app-confirm-register>` | `<sail-confirm-register>` |
+| `<app-confirm-chpass>` | `<sail-confirm-chpass>` |
+| `<app-twofactor-setup>` | `<sail-twofactor-setup>` |
+| `<app-twofactor-verify>` | `<sail-twofactor-verify>` |
+| `<app-trusted-devices>` | `<sail-trusted-devices>` |
+| `<app-account-deletion>` | `<sail-account-deletion>` |
+| `<app-consent-gate>` | `<sail-consent-gate>` |
+| `<app-otp-input>` | `<sail-otp-input>` |
+| `<app-social-login>` | `<sail-social-login>` |
+| `<app-plan-selector>` | `<sail-plan-selector>` |
+| `<app-checkout-button>` | `<sail-checkout-button>` |
+| `<app-payment-methods>` | `<sail-payment-methods>` |
+| `<table-list>` | `<sail-table-list>` |
+| `<table-search>` | `<sail-table-search>` |
+| `<table-edit>` | `<sail-table-edit>` |
+| `<table-detail>` | `<sail-table-detail>` |
+| `<table-lookup>` | `<sail-table-lookup>` |
+| `<table-report>` | `<sail-table-report>` |
+| `<table-form>` | `<sail-table-form>` |
+| `<record-form>` | `<sail-record-form>` |
+| `<dynamic-field>` | `<sail-dynamic-field>` |
+
+The payout / user-payment-method selectors (`<sail-payout-bank-info-form>`, `<sail-payout-provider-onboarding>`, `<sail-user-payment-methods>`) were already on `sail-*` in v0.7.0 — no change there.
+
+**Why:** the Angular style guide assigns `app-*` to the consumer application (Angular CLI defaults to it for new components). A library shipping `app-*` selectors collides with the downstream's own components and reads ambiguously in mixed templates. v0.8.1 makes the prefix uniform across sail and unambiguous against your code.
+
+### 2. Internal: TableAction template-method pull-up
+
+`executeAction()` was duplicated three times across `TableList`, `TableSearch`, and `TableDetail` in v0.8.0. v0.8.1 moves the body into `BaseTable` with two `protected` hooks:
+
+```typescript
+protected beforeExecuteAction(action: TableAction, record?: Record<string, unknown>): boolean { return true; }
+protected onActionSuccess(action: TableAction, record?: Record<string, unknown>): void { /* no-op */ }
+```
+
+**For your subclasses:** if you have a custom view that extends `BaseTable` / `BaseForm` / `BaseView` and renders the action toolbar, you no longer write your own `executeAction()` — inherit it. Override `onActionSuccess()` to refresh your screen (the way `TableList` re-fetches) and `beforeExecuteAction()` to add per-screen pre-flight guards (the way `TableDetail` blocks unsaved rows).
+
+**For your templates:** unchanged. Action buttons still call `(click)="executeAction(action, record)"`.
+
+**Bonus:** `TableEdit` now renders per-record actions too (v0.8.0 was missing them) and re-fetches the record after a successful action.
+
+### 3. Internal: `BaseAsync` pulled up onto 5 more components
+
+`ChpassComponent`, `ConfirmChpassComponent`, `ConfirmRegisterComponent`, `TwoFactorSetupComponent`, and `TwoFactorVerifyComponent` were re-declaring their own `errorMessage` / `successMessage` signals and hand-rolled subscribe blocks. They now `extends BaseAsync` and use `this.run(obs, onSuccess, fallback)` — public template API is unchanged (`{{ errorMessage() }}` / `{{ successMessage() }}` still work).
+
+### 4. Internal: `BaseRestService` + `requireAuth()` + `openRecordDialog()` + `linkedSignal` alias-inputs
+
+- **`BaseRestService`** (`src/service/base_rest.service.ts`) owns the shared `inject(HttpClient)` and `url(path)` helper. `BackendService`, `BaseAuthService`, `BillingService`, `PayoutService`, and `UserPaymentMethodService` all extend it. The 27 hand-spelled `RestURL.httpHost + RestURL.xURL` getters in `BaseAuthService` are now `readonly` fields built via `this.url(...)`.
+- **`BaseTable.requireAuth(check, verb)`** replaces 8 copies of `alert('Missing authorization to … records')` across the codebase.
+- **`BaseView.openRecordDialog(record, isNew)`** collapses the duplicated `addRecord` / `editRecord` dialog-open bodies.
+- **`linkedSignal`** replaces the v0.8.0 `input() + signal + effect()` pattern across `TableList`, `TableSearch`, `TableEdit`, `TableDetail`, and `DynamicField`. One-line declarations per field; behaviour is unchanged (empty input doesn't override a `.set()` value).
+
+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.
+
+### 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`.
+
+### 6. TypeScript pinned to `~5.9.3`
+
+`@angular/compiler-cli@21.2` declares `typescript >=5.9 <6.1` as a peer, but downstream projects report that TS `6.0.3` requires `--legacy-peer-deps` on `npm install` because of transitive package mismatches. To keep the install path clean for all consumers, v0.8.1 pins to `~5.9.3`. Bump your downstream's `package.json` to match:
+
+```diff
+- "typescript": "~6.0.x"
++ "typescript": "~5.9.3"
+```
+
+### 7. Clean install + recompile
+
+```bash
+rm -rf node_modules package-lock.json
+npm install
+ng build
+```
+
+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.
+
+### 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.
+
 ## 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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": [
@@ -53,6 +53,6 @@
     "@angular/router": "^21.2.8",
     "class-validator": "^0.15.1",
     "rxjs": "~7.8.0",
-    "typescript": "~6.0.3"
+    "typescript": "~5.9.3"
   }
 }

package/src/component/abstract/base_async.ts

@@ -20,9 +20,15 @@ export abstract class BaseAsync {
     this.successMessage.set('');
   }
 
-  /** Set errorMessage from an HTTP error object; falls back to `fallback`. */
+  /**
+   * Set errorMessage from an HTTP error object; falls back to `fallback`.
+   *
+   * Reads `err.error.detail` first (keel emits RFC 7807 ProblemDetail with
+   * `detail` as the human-readable field), then `err.error.message` for
+   * legacy / non-RFC-7807 endpoints, then the supplied fallback.
+   */
   protected setError(err: any, fallback: string): void {
-    this.errorMessage.set(err?.error?.message ?? fallback);
+    this.errorMessage.set(err?.error?.detail ?? err?.error?.message ?? fallback);
     this.loading.set(false);
   }
 

package/src/component/abstract/base_table.ts

@@ -1,59 +1,69 @@
 import { inject, signal, WritableSignal } from "@angular/core";
 import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
-import { ConstantValue } from "../../model/common";
+import { ConstantValue, LookupStyle, OpCode } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
+import { BackendService } from "../../service/rest_service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
+import { titleCase } from "../../util/text";
+
+
+/** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
+export type AuthVerb = 'create' | 'read' | 'update' | 'delete' | 'view';
 
 
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
+    protected readonly backendService = inject(BackendService);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
     readonly tableName: WritableSignal<string> = signal('');
+    /** Optional consumer-set override; when empty the title-cased table name is used. */
     caption = '';
+    /** Consumer-set per-field option overrides (per fieldName). When unset, options come from the column's LookupDomain / LookupTable. */
     fieldOptions: {[key: string]: ConstantValue[]} = {};
-    fieldLabels: {[key: string]: string} = {};
     isReadOnlyBound = this.isReadOnly.bind(this);
 
     isReadOnly(_fieldName: string): boolean {
         return false;
     }
 
-    titleCase(str: string): string {
-        return str.replaceAll('_', ' ').toLowerCase().split(' ').map((word: string) => {
-                return word.charAt(0).toUpperCase() + word.slice(1);
-        }).join(' ');
-    }
+    /** Re-exported on the class so templates can call `titleCase(x)` without an extra import in the consumer. */
+    titleCase(str: string): string { return titleCase(str); }
 
-    getCaption() {
-        if (!this.caption) {
-            this.caption = this.titleCase(this.tableName());
-        }
-        return this.caption;
+    /** Display title for the active table; recomputes when `tableName` changes. */
+    getCaption(): string {
+        return this.caption || titleCase(this.tableName());
     }
 
+    /** Display label for a column; uses the metadata Caption, otherwise title-cases the field name. */
     colCaption(fieldName: string): string {
-        if (!this.fieldLabels[fieldName]) {
-            const col = this.getColumn(fieldName);
-            this.fieldLabels[fieldName] = col?.Caption || this.titleCase(fieldName);
-        }
-        return this.fieldLabels[fieldName];
-    }
-
-    canRead() {
-        return this.cacheService.canRead(this.tableName());
+        const col = this.getColumn(fieldName);
+        return col?.Caption || titleCase(fieldName);
     }
 
-    canCreate() {
-        return this.cacheService.canCreate(this.tableName());
-    }
+    canRead()   { return this.cacheService.canRead(this.tableName()); }
+    canCreate() { return this.cacheService.canCreate(this.tableName()); }
+    canUpdate() { return this.cacheService.canUpdate(this.tableName()); }
+    canDelete() { return this.cacheService.canDelete(this.tableName()); }
 
-    canUpdate() {
-        return this.cacheService.canUpdate(this.tableName());
-    }
+    /** True when the record is a locally-inserted row not yet persisted (op_code === 'I'). */
+    isInserted(record: Record<string, unknown>): boolean { return record[this.config.opField] === OpCode.Insert; }
+    /** True when the record is marked for update (op_code === 'U'). */
+    isUpdated(record: Record<string, unknown>):  boolean { return record[this.config.opField] === OpCode.Update; }
+    /** True when the record is marked for delete (op_code === 'D'). */
+    isDeleted(record: Record<string, unknown>):  boolean { return record[this.config.opField] === OpCode.Delete; }
 
-    canDelete() {
-        return this.cacheService.canDelete(this.tableName());
+    /**
+     * Authorization guard with shared "Missing authorization" copy. Pass the
+     * permission predicate (typically a `canX()` method on this class) and
+     * the verb that fills the alert. Returns true when allowed.
+     *
+     *   if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
+     */
+    protected requireAuth(check: () => boolean, verb: AuthVerb): boolean {
+        if (check()) return true;
+        alert(`Missing authorization to ${verb} records`);
+        return false;
     }
 
     /**
@@ -81,6 +91,55 @@ export abstract class BaseTable {
         return this.cacheService.canExecute(action.authorityObject, action.authorityCheck, this.tableName());
     }
 
+    /**
+     * Fire a TableAction. Template method:
+     *
+     *   1. Authorization check + alert  (shared)
+     *   2. Subclass-specific pre-flight guard via `beforeExecuteAction()` —
+     *      returns false to abort silently (the hook has already shown its
+     *      own alert).
+     *   3. Optional confirm prompt from `action.confirmMessage`
+     *   4. POST `{}` for table-level actions or `primaryKeyValues(record)`
+     *      for record-specific actions
+     *   5. On success, dispatch `onActionSuccess()` so subclasses can refresh
+     *      their views; on error, log and alert.
+     *
+     * Subclasses typically only override the two hooks.
+     */
+    executeAction(action: TableAction, record?: Record<string, unknown>): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (!this.beforeExecuteAction(action, record)) return;
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.backendService.executeAction(action.method, body).subscribe({
+            next: () => this.onActionSuccess(action, record),
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
+
+    /**
+     * Pre-flight hook for `executeAction()`. Return false to abort the action
+     * (the override should `alert()` or otherwise surface why). Default: allow.
+     */
+    protected beforeExecuteAction(_action: TableAction, _record?: Record<string, unknown>): boolean {
+        return true;
+    }
+
+    /**
+     * Post-success hook for `executeAction()`. Override to refresh the screen
+     * — e.g. `TableList` re-fetches the row list. Default: no-op (screens
+     * driven by parent state, like `TableDetail`, leave refresh to the parent).
+     */
+    protected onActionSuccess(_action: TableAction, _record?: Record<string, unknown>): void {
+        // intentionally empty
+    }
+
     /**
      * Pulls the primary-key column values off a record into a plain
      * object keyed by the columns' PascalName. Used as the request
@@ -99,7 +158,7 @@ export abstract class BaseTable {
     }
 
     emptyRecord(): any {
-        const record : any = {[this.config.opField]: 'I'}
+        const record : any = {[this.config.opField]: OpCode.Insert}
         const tableDef = this.cacheService.getTableDefinition(this.tableName());
         const tableOverride = this.config.tableOverrides?.[this.tableName()];
         const editableTimestamps = new Set(tableOverride?.editableTimestamps ?? []);
@@ -178,7 +237,7 @@ export abstract class BaseTable {
             const match = options?.find(o => o.Value === String(rawValue));
             if (match) return match.Caption ?? String(rawValue);
         }
-        if (col.LookupTable && col.LookupStyle === 'D') {
+        if (col.LookupTable && col.LookupStyle === LookupStyle.Dropdown) {
             const options = this.cacheService.getTableValues(col.LookupTable);
             const match = options?.find(o => o.Value === String(rawValue));
             if (match) return match.Caption ?? String(rawValue);
@@ -261,7 +320,7 @@ export abstract class BaseTable {
     readyToSave(record: any, original?: any) {
         this.restoreRecordTimeStamp(record);
         const op = record[this.config.opField];
-        if (op === 'I' || op === 'D') return; // already marked
+        if (op === OpCode.Insert || op === OpCode.Delete) return; // already marked
         // Original snapshot may carry display-formatted timestamps; restore both
         // sides to the same wire format before comparing, otherwise scalar
         // fields like Passdate look "modified" purely due to formatting.
@@ -269,11 +328,11 @@ export abstract class BaseTable {
             const normalized = { ...original };
             this.restoreRecordTimeStamp(normalized);
             if (!this.isRecordDirty(record, normalized)) {
-                record[this.config.opField] = 'R';
+                record[this.config.opField] = OpCode.Readonly;
                 return;
             }
         }
-        record[this.config.opField] = 'U';
+        record[this.config.opField] = OpCode.Update;
     }
 
     /** Shallow compare of own scalar fields, ignoring child arrays and op_code. */
@@ -308,7 +367,7 @@ export abstract class BaseTable {
         if (col && col.LookupDomain) {
             return this.cacheService.getDomainValues(col.LookupDomain);
         }
-        if (col && col.LookupTable && col.LookupStyle === 'D') {
+        if (col && col.LookupTable && col.LookupStyle === LookupStyle.Dropdown) {
             return this.cacheService.getTableValues(col.LookupTable);
         }
         return undefined;

package/src/component/abstract/base_view.ts

@@ -35,66 +35,53 @@ export abstract class BaseView extends BaseTable {
         return tableDef.Keys.map((key) => record[key.PascalName]).join('_');
     }
 
-    addRecord() {
-        if (!this.canCreate()) {
-            alert('Missing authorization to create records');
-            return;
-        }
-        const record = this.emptyRecord();
-
-        if (Object.keys(record).length === 1 && this.records.length > 0) {
-            Object.keys(this.records[0]).forEach((key) => {
-                record[key] = '';
-            });
-        }
+    /**
+     * Shared row-dialog opener. Builds the dialog data and wires the result
+     * straight into `handleUpdate()` (subclass-specific). Used by both
+     * `addRecord()` (new row + empty `original`) and `editRecord()` (existing
+     * row passed through verbatim).
+     */
+    private openRecordDialog(record: {[key: string]: any}, isNew: boolean): void {
+        const dialogData = this.getDialogData(record, isNew);
+        const apiName = this.apiName();
+        if (apiName) dialogData['apiName'] = apiName;
 
-        const dialogRef = this.dialog.open(this.dialogComponent(), {
+        this.dialog.open(this.dialogComponent(), {
             width: '90vw',
             maxWidth: '1200px',
             maxHeight: '90vh',
             disableClose: true,
-            data: this.getDialogData(record, true),
+            data: dialogData,
+        }).afterClosed().subscribe((result) => {
+            if (result) this.handleUpdate(result, isNew, isNew ? {} : record);
         });
+    }
 
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) this.handleUpdate(result, true, {});
-        });
+    addRecord() {
+        if (!this.requireAuth(() => this.canCreate(), 'create')) return;
+        const record = this.emptyRecord();
+        // Seed columns from an existing row when emptyRecord() returned just the
+        // op-code field (table metadata wasn't loaded yet).
+        if (Object.keys(record).length === 1 && this.records.length > 0) {
+            Object.keys(this.records[0]).forEach((key) => { record[key] = ''; });
+        }
+        this.openRecordDialog(record, true);
     }
 
     /**
      * Open the row dialog. Renamed conceptually from "edit": when the user
-     * has only `canRead()` , we still want to show them the record + child rows.
+     * has only `canRead()`, we still want to show them the record + child rows.
      * The dialog itself (TableEdit) handles read-only mode — its Edit/New/Delete
      * buttons are gated by the same permissions.
      * Block only when neither read nor update is granted.
      */
     editRecord(record: {[key: string]: any}) {
-        if (!this.canUpdate() && !this.canRead()) {
-            alert('Missing authorization to view records');
-            return;
-        }
-        const dialogData = this.getDialogData(record, false);
-        const apiName = this.apiName();
-        if (apiName) {
-            dialogData['apiName'] = apiName;
-        }
-        const dialogRef = this.dialog.open(this.dialogComponent(), {
-            width: '90vw',
-            maxWidth: '1200px',
-            maxHeight: '90vh',
-            disableClose: true,
-            data: dialogData,
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) this.handleUpdate(result, false, record);
-        });
+        if (!this.canUpdate() && !this.requireAuth(() => this.canRead(), 'view')) return;
+        this.openRecordDialog(record, false);
     }
 
     deleteRecord(record: {[key: string]: any}) {
-        if (!this.canDelete()) {
-            alert('Missing authorization to delete records');
-            return;
-        }
+        if (!this.requireAuth(() => this.canDelete(), 'delete')) return;
         this.handleDelete(record);
     }
 }

package/src/component/billing/checkout_button.ts

@@ -13,7 +13,7 @@ import { CheckoutMode } from '../../model/appdata';
  * rejected with 400.
  */
 @Component({
-  selector: 'app-checkout-button',
+  selector: 'sail-checkout-button',
   templateUrl: './checkout_button.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/billing/payment_methods.ts

@@ -11,7 +11,7 @@ import { PaymentMethod } from '../../model/appdata';
  * `[portalUrl]` to show it; otherwise the button is hidden.
  */
 @Component({
-  selector: 'app-payment-methods',
+  selector: 'sail-payment-methods',
   templateUrl: './payment_methods.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/billing/plan_selector.ts

@@ -7,7 +7,7 @@ import { PublicPlan } from '../../model/appdata';
  * The caller provides the plans and handles the selection event.
  */
 @Component({
-  selector: 'app-plan-selector',
+  selector: 'sail-plan-selector',
   templateUrl: './plan_selector.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/form/form_field.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, output, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatDialog } from "@angular/material/dialog";
@@ -7,11 +7,11 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatSelectModule } from "@angular/material/select";
 import { BaseTable } from "../abstract/base_table";
-import { ConstantValue } from "../../model/common";
+import { ConstantValue, LookupStyle } from "../../model/common";
 import { TableLookup } from "../table/table_lookup";
 
 @Component({
-    selector: 'dynamic-field',
+    selector: 'sail-dynamic-field',
     templateUrl: './form_field.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -31,7 +31,7 @@ import { TableLookup } from "../table/table_lookup";
     ]
 })
 export class DynamicField extends BaseTable {
-    readonly tableNameInput = input('', { alias: 'tableName' });
+    protected readonly tableNameInput = input('', { alias: 'tableName' });
     readonly value = input<any>(undefined);
     readonly valueChange = output<any>();
     readonly recordUpdate = output<{[key: string]: any}>();
@@ -41,19 +41,16 @@ export class DynamicField extends BaseTable {
     readonly subscriptSizing = input<'fixed' | 'dynamic'>('dynamic');
     readonly appearance = input<'fill' | 'outline'>('outline');
 
-    private readonly dialog = inject(MatDialog);
+    override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
 
-    constructor() {
-        super();
-        effect(() => { const v = this.tableNameInput(); if (v) this.tableName.set(v); });
-    }
+    private readonly dialog = inject(MatDialog);
 
     get col() {
         return this.getColumn(this.field());
     }
 
     get inputType() {
-        if (!this.col || !this.col.InputType || this.col.LookupStyle === 'S') return 'text';
+        if (!this.col || !this.col.InputType || this.col.LookupStyle === LookupStyle.Search) return 'text';
         return this.col.InputType;
     }
 
@@ -90,7 +87,7 @@ export class DynamicField extends BaseTable {
     }
 
     isLookupTableSearch(): boolean {
-        return !!(this.col && this.col.LookupTable && this.col.LookupStyle === 'S');
+        return !!(this.col && this.col.LookupTable && this.col.LookupStyle === LookupStyle.Search);
     }
 
     get maxLength() {