@nauticana/sail 1.1.34 → 1.1.36

package/src/component/security/connected_apps.ts

@@ -0,0 +1,40 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { OAuthGrant } from '../../model/access';
+import { AccessService } from '../../service/access.service';
+import { BaseAsync } from '../abstract/base_async';
+
+/**
+ * OAuth clients holding a live grant from the signed-in user, with disconnect; a disconnected
+ * client must authorize again. Selector: <sail-connected-apps>.
+ */
+@Component({
+  selector: 'sail-connected-apps',
+  templateUrl: './connected_apps.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [DatePipe, MatButtonModule],
+})
+export class ConnectedAppsComponent extends BaseAsync implements OnInit {
+  private readonly access = inject(AccessService);
+
+  readonly grants = signal<OAuthGrant[]>([]);
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.run(this.access.grants(), (rows) => this.grants.set(rows), 'Failed to load connected apps.');
+  }
+
+  revoke(grant: OAuthGrant): void {
+    const name = grant.clientName || grant.clientId;
+    if (!confirm(`Disconnect "${name}"? It will have to connect again.`)) return;
+    this.run(this.access.revokeGrant(grant.clientId), () => {
+      this.successMessage.set(`Disconnected ${name}.`);
+      this.load();
+    }, 'Failed to disconnect the app.');
+  }
+}

package/src/index.ts

@@ -7,6 +7,8 @@ export * from './model/oauth_connection';
 export * from './model/notification';
 export * from './model/document';
 export * from './model/agency';
+export * from './model/geo';
+export * from './model/access';
 export * from './model/decorator';
 export * from './component/abstract/base_table';
 export * from './component/dashboard/dashboard_shell';
@@ -53,6 +55,8 @@ export * from './component/security/twofactor_setup';
 export * from './component/security/twofactor_verify';
 export * from './component/security/trusted_devices';
 export * from './component/security/sessions';
+export * from './component/security/api_keys';
+export * from './component/security/connected_apps';
 export * from './component/billing/plan_selector';
 export * from './component/billing/price_selector';
 export * from './component/billing/checkout_button';
@@ -95,6 +99,9 @@ export * from './service/rest_service';
 export * from './service/rest_url';
 export * from './service/label.service';
 export * from './service/caption_pipe';
+export * from './service/currency.service';
+export * from './service/access.service';
+export * from './service/money_pipe';
 export * from './service/base_rest.service';
 export * from './util/text';
 export * from './util/money';

package/src/model/access.ts

@@ -0,0 +1,37 @@
+/** A row of keel's `api_key` table as generic REST returns it; the hash never leaves keel. */
+export interface ApiKey {
+  Id:            number;
+  KeyName:       string;
+  KeyPrefix:     string;
+  Scopes:        string;   // CSV
+  IsActive:      boolean;
+  CreatedAt:     string;
+  ExpiresAt?:    string;
+  LastUsedAt?:   string;
+  UserId?:       number;
+  AllowedCidrs?: string;   // CSV of networks; absent allows any address
+}
+
+/** keel `api_key/generate` request; blank scopes are the product `ScopePolicy`'s to supply. */
+export type NewApiKey = {
+  key_name:      string;
+  scopes:        string;   // CSV
+  allowed_cidrs: string;
+  /** RFC 3339; absent never expires. */
+  expires_at?:   string;
+};
+
+/** keel `api_key/generate` reply: the plaintext is shown once and never stored. */
+export interface MintedApiKey {
+  api_key:    string;
+  key_prefix: string;
+}
+
+/** An OAuth client the signed-in user authorized on keel's authorization server (`authserver.Grant`). */
+export interface OAuthGrant {
+  clientId:     string;
+  clientName:   string;
+  scopes:       string[];
+  authorizedAt: string;
+  lastIssuedAt: string;
+}

package/src/model/appdata.ts

@@ -252,47 +252,32 @@ export interface PartnerCreated {
 	paymentUrl?:     string;
 }
 
-// One purchasable offer for a plan — a (billing cycle × commitment term) row of
-// keel's `subscription_plan_price` table (v1.0.5). A plan sells several; the
-// customer picks one at checkout via `<sail-price-selector>`. Mirrors keel
-// `billing.PlanPrice`.
+// One purchasable offer for a plan: a (billing cycle × commitment term) row of
+// keel's `subscription_plan_price` table. Mirrors keel `billing.PlanPrice`.
 export interface PlanPrice {
 	billingCycle: string;   // PERIOD_TYPE code (D/W/M/A) — how often charged
 	termCount:    number;   // commitment length, in termType units
 	termType:     string;   // PERIOD_TYPE code — commitment/pricing unit
-	amountMinor:  number;   // price per termType unit, in minor units (cents)
-	amount:       number;   // same amount in major units (currency-exponent applied)
+	amountMinor:  number;   // price per termType unit, in minor units
 	currency:     string;   // ISO 4217
+	exponent:     number;   // minor-unit decimals from keel's currency table
 	// Provider price id (Stripe Price). Empty for free/unpriced offers; pass to
 	// `<sail-checkout-button [priceId]>` / `createCheckout({ priceId })`.
 	priceId?:     string;
 }
 
-// PublicPlan — shape returned by GET /public/plans. Used on the registration
-// page to render the plan picker and to drive `<sail-checkout-button>` flows.
+// Mirrors keel `billing.Plan` from GET /public/plans.
 export interface PublicPlan {
 	id:          string;
 	caption:     string;
-	// NOTE: keel v1.0.7 REMOVED the flat `monthlyCost`/`annualCost` from the plan
-	// JSON (both `/public/plans` and the billing catalog). Price lives per-offer
-	// in `prices[]`; derive a display price with `fromPriceLabel(plan.prices)`.
-	// Purchasable offers (keel v1.0.5 `subscription_plan_price`, nested under the
-	// plan). The source of truth for checkout — feed a chosen offer's `priceId`
-	// to `<sail-checkout-button>`. Returned by `/public/plans` as of keel v1.0.6
-	// (so `<sail-price-selector>` works on the registration page too); absent on
-	// pre-v1.0.6 backends.
-	prices?:     PlanPrice[];
-	// @deprecated keel v1.0.5 moved per-offer prices into `prices[]`
-	// (`subscription_plan.provider_price_id` was dropped). Use
-	// `prices?.[…].priceId`. Kept optional for pre-v1.0.5 backends.
-	priceId?:    string;
-	// keel `subscription_plan.activation_mode` (SUBSCRIPTION_ACTIVATION_MODE
-	// dictionary, single char — e.g. 'P' paid, 'F' free, 'T' trial). Drives the
-	// picker CTA copy ("Start trial" / "Subscribe" / …). Optional — pre-v1.0.3
-	// backends omit it.
-	activationMode?: string;
+	currency:    string;
+	// Purchasable offers; derive a display price with `fromPriceLabel(plan.prices)`
+	// and feed the chosen offer's `priceId` to `<sail-checkout-button>`.
+	prices:      PlanPrice[] | null;
+	// keel `subscription_plan.activation_mode` ('P' paid, 'F' free, 'T' trial); drives the picker CTA.
+	activationMode: string;
 	// Length of the free trial in days when `activationMode === 'T'`.
-	trialDays?:      number;
+	trialDays:      number;
 }
 
 // ConfirmRegisterResponse — shape returned by POST /public/register/confirm:
@@ -323,7 +308,7 @@ export type CheckoutMode = 'subscription' | 'payment' | 'setup';
 export interface CheckoutRequest {
 	mode?:       CheckoutMode;        // default 'subscription'
 	// Required for 'subscription' / 'payment'; must be empty for 'setup'.
-	// Pass `PublicPlan.priceId` straight through.
+	// Pass the chosen `PlanPrice.priceId` straight through.
 	priceId?:    string;
 	quantity?:   number;
 	email?:      string;
@@ -401,33 +386,35 @@ export interface PageRequest {
 	orderBy?: string;
 }
 
+// Mirrors keel `billing.Subscription`; amounts are minor units at `exponent`.
 export interface Subscription {
-	planId:      string;
-	status:      string;  // 'A' active, 'P' pending-payment, 'C' cancelled, 'T' trialing, 'X' past-due — caption via SUBSCRIPTION_STATUS dict
-	begda:       string;
-	endda?:      string;
-	monthlyCost: number;
-	currency:    string;
-	autoRenew:   boolean;
-	// PERIOD_TYPE code (D/W/M/A) the sub is charged on, copied from the chosen
-	// offer (keel `billing_cycle`); absent on pre-v1.0.5 backends.
-	billingCycle?: string;
-	// ISO timestamp the trial ends (keel `trial_end`); empty/absent when not
-	// trialing. Drives `<sail-trial-banner>`.
-	trialEnd?:   string;
-	// Seat quantity on the active/trial sub (keel `seats`); absent for
-	// non-seat plans. Drives `<sail-seat-selector>`.
-	seats?:      number;
-}
-
+	planId:           string;
+	caption?:         string;  // plan display name
+	status:           string;  // 'A' active, 'P' pending-payment, 'C' cancelled, 'T' trialing, 'X' past-due — caption via SUBSCRIPTION_STATUS dict
+	begda:            string;
+	endda?:           string;
+	installmentMinor: number;
+	currency:         string;
+	exponent:         number;
+	autoRenew:        boolean;
+	// PERIOD_TYPE code (D/W/M/A) the sub is charged on, copied from the chosen offer.
+	billingCycle?:    string;
+	// ISO timestamp the trial ends; empty/absent when not trialing. Drives `<sail-trial-banner>`.
+	trialEnd?:        string;
+	// Seat quantity on the active/trial sub; absent for non-seat plans. Drives `<sail-seat-selector>`.
+	seats?:           number;
+}
+
+// Mirrors keel `billing.Invoice`; `status` is keel's one-character invoice status code.
 export interface Invoice {
-	id:       string;
-	number:   string;
-	status:   string;  // 'paid' | 'open' | 'void' | ...
-	total:    number;
-	currency: string;
-	issuedAt: string;
-	paidAt?:  string;
+	id:         string;
+	number:     string;
+	status:     string;
+	totalMinor: number;
+	currency:   string;
+	exponent:   number;
+	issuedAt:   string;
+	paidAt?:    string;
 }
 
 // ── Payout types ──
@@ -469,25 +456,12 @@ export interface BankInfoFormValue {
 	currency:          string;
 	accountHolderName: string;
 	billingAddress:    string;
-	taxIdType:         string;  // 'S' SIN, 'N' SSN, 'E' EIN, 'V' VAT, 'O' other
+	taxIdType:         string;  // keel `tax_id_type` code
 	taxId:             string;
 	provider:          string;
 	providerAgreement: boolean;
 }
 
-// CountryProfile drives the country dropdown in the bank-info form.
-// Each profile bundles ISO codes + tax-id labelling so the form's
-// hint/placeholder text follows the country selection.
-export interface CountryProfile {
-	code:             string;  // ISO 3166-1 alpha-2
-	label:            string;
-	currency:         string;  // ISO 4217
-	taxIdType:        string;  // matches basis constant_header 'tax_id_type'
-	taxIdLabel:       string;
-	taxIdPlaceholder: string;
-	taxIdHint:        string;
-}
-
 // ── User payment methods ──
 // Consumer-side saved cards/wallets. Mirrors basis user_payment_method
 // one-to-one. Distinct from PaymentMethod (partner-scoped SaaS billing

package/src/model/geo.ts

@@ -0,0 +1,12 @@
+/** Rows of keel's `currency` and `country` tables as generic REST returns them. */
+export interface Currency {
+  Code:     string;  // ISO 4217
+  Caption:  string;
+  Exponent: number;  // minor-unit decimals, 0–6
+}
+
+export interface Country {
+  Id:       string;  // ISO 3166-1 alpha-2
+  Caption:  string;
+  Currency: string;  // default ISO 4217 code
+}

package/src/service/access.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { Observable, catchError, throwError } from 'rxjs';
+import { ApiKey, MintedApiKey, NewApiKey, OAuthGrant } from '../model/access';
+import { TableAction } from '../model/appdata';
+import { BackendService } from './rest_service';
+import { RestURL } from './rest_url';
+
+/** The signed-in user's API keys (keel `api_key` table and actions) and OAuth grants. */
+@Injectable({ providedIn: 'root' })
+export class AccessService extends BackendService {
+  apiKeys(): Observable<ApiKey[]> {
+    return this.list<ApiKey>('api_key', undefined, { orderBy: 'created_at desc' });
+  }
+
+  mintApiKey(key: NewApiKey): Observable<MintedApiKey> {
+    return this.apiKeyAction<MintedApiKey>('generate', key);
+  }
+
+  restrictApiKey(id: number, allowedCidrs: string): Observable<void> {
+    return this.apiKeyAction<void>('restrict', { id, allowed_cidrs: allowedCidrs });
+  }
+
+  revokeApiKey(id: number): Observable<{ message: string }> {
+    return this.delete('api_key', { Id: String(id) });
+  }
+
+  grants(): Observable<OAuthGrant[]> {
+    return this.http.get<OAuthGrant[]>(this.url(RestURL.oauthGrantsURL))
+      .pipe(catchError((err) => this.handleError(err)));
+  }
+
+  revokeGrant(clientId: string): Observable<void> {
+    return this.http.post<void>(this.url(RestURL.oauthGrantRevokeURL), { clientId })
+      .pipe(catchError((err) => this.handleError(err)));
+  }
+
+  canApiKeyAction(name: string): boolean {
+    const action = this.findApiKeyAction(name);
+    return !!action && this.auth.canExecute(action.authorityObject, action.authorityCheck, 'api_key');
+  }
+
+  canRevokeApiKey(): boolean {
+    return this.auth.canDelete('api_key');
+  }
+
+  private apiKeyAction<T>(name: string, body: Record<string, unknown>): Observable<T> {
+    const action = this.findApiKeyAction(name);
+    return action
+      ? this.executeAction<T>(action.method, body)
+      : throwError(() => new Error(`sail: api_key/${name} is not available in backend metadata.`));
+  }
+
+  private findApiKeyAction(name: string): TableAction | undefined {
+    return (this.auth.getTableDefinition('api_key')?.Actions ?? []).find((action) => action.action === name);
+  }
+}

package/src/service/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable, WritableSignal, inject, signal } from '@angular/core';
 import { HttpErrorResponse, HttpParams } from '@angular/common/http';
 import { filter, finalize, map, mergeMap, shareReplay, take, tap } from 'rxjs/operators';
 import { PasswordRules } from '../util/password_policy';
+import { httpStatus } from '../util/errors';
 import { ActiveSession, ApplicationData, ConfirmRegisterResponse, DictionaryPath, LoginResponse2FA, PartnerCreated, PartnerRegistration, PartnerSetup, RestReport, TableDefinition, TokenPair, TrustedDevice, TwoFactorSetupResponse, TwoFactorVerifyRequest, TwoFactorVerifyResponse } from '../model/appdata';
 import {
   LoginResponseSocial,
@@ -289,7 +290,7 @@ export abstract class BaseAuthService extends BaseRestService {
       },
       error: (err: unknown) => {
         console.error('Session handoff failed:', err);
-        this.sessionHandoffError.set(handoffErrorMessage((err as { status?: number } | null)?.status));
+        this.sessionHandoffError.set(handoffErrorMessage(httpStatus(err)));
       },
     });
   }

package/src/service/caption_pipe.ts

@@ -18,8 +18,14 @@ export class CaptionPipe implements PipeTransform {
     this.loaded();
     if (!this.requested.has(constantId)) {
       this.requested.add(constantId);
-      this.labels.loadLabels(constantId).pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({ next: () => this.loaded.update((n) => n + 1), error: () => this.requested.delete(constantId) });
+      // A cached domain emits synchronously: its caption is already current, and a signal
+      // write during render would throw NG0600.
+      let rendering = true;
+      this.labels.loadLabels(constantId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+        next: () => { if (!rendering) this.loaded.update((n) => n + 1); },
+        error: () => this.requested.delete(constantId),
+      });
+      rendering = false;
     }
     return this.labels.getLabel(constantId, code);
   }

package/src/service/currency.service.ts

@@ -0,0 +1,51 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { Observable, map, of, shareReplay, tap } from 'rxjs';
+import { Currency } from '../model/geo';
+import { formatMinor } from '../util/money';
+import { BackendService } from './rest_service';
+
+/**
+ * keel's `currency` catalog, the only source of minor-unit exponents. Loaded once through
+ * generic REST, so the caller's role needs `TABLE SELECT currency`.
+ */
+@Injectable({ providedIn: 'root' })
+export class CurrencyService {
+  private readonly backend = inject(BackendService);
+  private readonly byCode = new Map<string, Currency>();
+  private pending?: Observable<void>;
+  readonly ready = signal(false);
+  readonly failed = signal(false);
+
+  /** Load the catalog; completed and concurrent calls share one request, a failed one is retried. */
+  load(): Observable<void> {
+    if (this.ready()) return of(undefined);
+    this.failed.set(false);
+    this.pending ??= this.backend.list<Currency>('currency', undefined, { limit: 1000 }).pipe(
+      tap({
+        next: (rows) => {
+          for (const row of rows) this.byCode.set(row.Code, row);
+          this.ready.set(true);
+        },
+        error: () => {
+          this.pending = undefined;
+          this.failed.set(true);
+        },
+      }),
+      map(() => undefined),
+      shareReplay({ bufferSize: 1, refCount: false }),
+    );
+    return this.pending;
+  }
+
+  /** Minor-unit exponent of a code; an unknown code is an error, never a guess. */
+  exponent(currency: string): number {
+    if (!this.ready()) throw new Error('sail: the currency catalog is not loaded.');
+    const row = this.byCode.get(currency);
+    if (!row) throw new Error(`sail: unknown currency "${currency}".`);
+    return row.Exponent;
+  }
+
+  format(minor: number, currency: string): string {
+    return formatMinor(minor, currency, this.exponent(currency));
+  }
+}

package/src/service/money_pipe.ts

@@ -0,0 +1,27 @@
+import { DestroyRef, Pipe, PipeTransform, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { formatMinor } from '../util/money';
+import { CurrencyService } from './currency.service';
+
+/**
+ * `{{ minor | sailMoney:currency }}` formats integer minor units at the catalog exponent, '' until
+ * the catalog loads; `{{ minor | sailMoney:currency:exponent }}` uses the exponent keel sent with
+ * the amount and needs no catalog. Impure so it re-renders once the catalog is ready.
+ */
+@Pipe({ name: 'sailMoney', pure: false })
+export class MoneyPipe implements PipeTransform {
+  private readonly currencies = inject(CurrencyService);
+  private readonly destroyRef = inject(DestroyRef);
+  private requested = false;
+
+  transform(minor: number, currency: string, exponent?: number): string {
+    if (exponent !== undefined) return formatMinor(minor, currency, exponent);
+    if (this.currencies.ready()) return this.currencies.format(minor, currency);
+    if (this.currencies.failed()) throw new Error('sail: failed to load the currency catalog.');
+    if (!this.requested) {
+      this.requested = true;
+      this.currencies.load().pipe(takeUntilDestroyed(this.destroyRef)).subscribe({ error: () => undefined });
+    }
+    return '';
+  }
+}

package/src/service/rest_service.ts

@@ -39,7 +39,7 @@ export class SailApiError extends Error {
 
 @Injectable({providedIn: 'root'})
 export class BackendService extends BaseRestService {
-    private readonly auth = inject(BaseAuthService);
+    protected readonly auth = inject(BaseAuthService);
 
     /** Resolved per call so configureRestUrls() may run any time before the first request. */
     protected get prefix(): string {

package/src/service/rest_url.ts

@@ -25,6 +25,9 @@ export const RestURL = {
   trustedDeviceRevokeURL: '/api/user/trusted-device/revoke',
   sessionListURL: '/api/user/sessions',
   sessionRevokeURL: '/api/user/sessions/revoke',
+  // keel GrantHandler (v1.2.112): the signed-in user's OAuth grants.
+  oauthGrantsURL:      '/api/user/oauth-grants',
+  oauthGrantRevokeURL: '/api/user/oauth-grants/revoke',
   checkoutURL:       '/api/billing/checkout',
   subscriptionURL:   '/api/billing/subscription',
   cancelSubURL:      '/api/billing/subscription/cancel',

package/src/util/errors.ts

@@ -21,7 +21,8 @@ function asString(value: unknown): string | undefined {
   return typeof value === 'string' && value ? value : undefined;
 }
 
-function statusOf(err: unknown): number | undefined {
+/** The HTTP status of any sail error shape; undefined when it carries none. */
+export function httpStatus(err: unknown): number | undefined {
   if (!err || typeof err !== 'object') return undefined;
   const s = (err as { status?: unknown }).status;
   return typeof s === 'number' ? s : undefined;
@@ -34,12 +35,12 @@ function statusOf(err: unknown): number | undefined {
  * available. Use it to offer a retry rather than reporting a backend rejection.
  */
 export function isTransportFailure(err: unknown): boolean {
-  return statusOf(err) === 0;
+  return httpStatus(err) === 0;
 }
 
 /** True for keel's 403: the session is valid but lacks the grant for this action. */
 export function isPermissionDenied(err: unknown): boolean {
-  return statusOf(err) === 403;
+  return httpStatus(err) === 403;
 }
 
 /**
@@ -55,7 +56,7 @@ export function isPermissionDenied(err: unknown): boolean {
  * exposing their response text.
  */
 export function errorDetail(err: unknown, fallback: string, statuses?: readonly number[]): string {
-  const status = statusOf(err);
+  const status = httpStatus(err);
   if (statuses && status !== undefined && !statuses.includes(status)) {
     return fallback;
   }

package/src/util/money.ts

@@ -1,31 +1,19 @@
 import { PlanPrice } from '../model/appdata';
 
 /**
- * Format a major-unit amount in its currency, honouring the currency exponent
- * (JPY 0 decimals, BHD 3, …) via `Intl`. Falls back to "<amount> <currency>"
- * for an unknown currency code rather than throwing.
+ * Format integer minor units at the currency's exponent from keel's `currency` table.
+ * `Intl` supplies only the symbol and grouping; it never decides the decimals.
  */
-export function formatCurrency(amount: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount);
-  } catch {
-    return `${amount} ${currency}`;
+export function formatMinor(minor: number, currency: string, exponent: number): string {
+  if (!Number.isSafeInteger(minor)) throw new Error(`sail: money must be a safe integer (${minor}).`);
+  if (!Number.isInteger(exponent) || exponent < 0 || exponent > 6) {
+    throw new Error(`sail: currency "${currency}" has no valid exponent (${exponent}).`);
   }
-}
-
-/**
- * Format an integer minor-unit amount using the currency's exponent reported
- * by Intl (JPY 0, USD 2, BHD 3, ...). No hardcoded /100 assumption.
- */
-export function formatMinorCurrency(minor: number, currency: string): string {
   const code = currency.trim().toUpperCase();
-  try {
-    const formatter = new Intl.NumberFormat(undefined, { style: 'currency', currency: code });
-    const exponent = formatter.resolvedOptions().maximumFractionDigits ?? 2;
-    return formatter.format(minor / 10 ** exponent);
-  } catch {
-    return `${minor} ${code}`;
-  }
+  if (!code) throw new Error('sail: currency is required.');
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency', currency: code, minimumFractionDigits: exponent, maximumFractionDigits: exponent,
+  }).format(minor / 10 ** exponent);
 }
 
 /** PERIOD_TYPE code vocabulary — the single source for cycle labels/durations. */
@@ -38,19 +26,15 @@ export const PERIOD_TYPE_INFO: Record<string, { label: string; noun: string; suf
 };
 
 /**
- * "From" price teaser for a plan card / dropdown — the cheapest offer once
- * normalized per month (a $2 daily offer must not undercut a $30 monthly one),
- * compared within one currency, rendered with its cycle ("from $30.00/mo").
- * Returns '' when the plan has no priced offers (free/trial). The exact offer
- * is chosen later via `<sail-price-selector>`.
+ * "From" price teaser for a plan card: the cheapest offer per month within the first
+ * offer's currency, rendered with its cycle ("from $30.00/mo"); '' when nothing is priced.
  */
-export function fromPriceLabel(prices: PlanPrice[] | undefined): string {
-  const priced = (prices ?? []).filter((p) => p.amount > 0);
+export function fromPriceLabel(prices: readonly PlanPrice[] | null | undefined): string {
+  const priced = (prices ?? []).filter((p) => p.amountMinor > 0);
   if (priced.length === 0) return '';
-  const currency = priced[0].currency;
-  const comparable = priced.filter((p) => p.currency === currency);
-  const perMonth = (p: PlanPrice) => p.amount / (PERIOD_TYPE_INFO[p.billingCycle]?.months ?? 1);
+  const comparable = priced.filter((p) => p.currency === priced[0].currency);
+  const perMonth = (p: PlanPrice) => p.amountMinor / (PERIOD_TYPE_INFO[p.billingCycle]?.months ?? 1);
   const lowest = comparable.reduce((a, b) => (perMonth(b) < perMonth(a) ? b : a));
-  const formatted = formatCurrency(lowest.amount, lowest.currency) + (PERIOD_TYPE_INFO[lowest.billingCycle]?.suffix ?? '');
-  return priced.length > 1 ? `from ${formatted}` : formatted;
+  const formatted = formatMinor(lowest.amountMinor, lowest.currency, lowest.exponent) + (PERIOD_TYPE_INFO[lowest.billingCycle]?.suffix ?? '');
+  return comparable.length > 1 ? `from ${formatted}` : formatted;
 }