@ultimat3/ui 23.0.0 → 25.0.0

package/src/components/file-input-view.ts

@@ -85,7 +85,7 @@ const BYTE_UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte'] as c
 const BYTE_STEP = 1000;
 
 /** A size a human reads, in the viewer's locale — never a hand-built "1.2 MB" string. */
-export function formatBytes(bytes: number, locale: string): string {
+export function formatFileSize(bytes: number, locale: string): string {
   const safe = Number.isFinite(bytes) && bytes > 0 ? bytes : 0;
   let value = safe;
   let index = 0;
@@ -106,22 +106,41 @@ export interface FileTarget {
   files: FileList | null;
 }
 
+/** Builds the `FileList` an input's `files` accepts — the one constructor the DOM offers for it. */
+export type FileListOf<TFile extends FileCandidate> = (files: readonly TFile[]) => FileList;
+
+function dataTransferList<TFile extends FileCandidate>(files: readonly TFile[]): FileList {
+  const transfer = new DataTransfer();
+  for (const one of files) transfer.items.add(one as unknown as File);
+  return transfer.files;
+}
+
 /**
- * Hand a drop's files to the real `<input>`, so a dropped file behaves exactly like a picked one.
+ * Make the real `<input>` hold exactly the files the control ACCEPTED, so the form posts what the
+ * control showed and nothing it refused.
  *
- * Without this a `<Dropzone name="avatar" required>` inside a `<form>` shows the accepted file and
- * then refuses to submit: `onSelect` fired, but `input.files` is still empty, so `required` blocks
- * on "Please select a file" and a submit that got past it would post no file at all. Native form
- * participation is what the `name`/`required` props promise. `files` is assignable from a
- * `DataTransfer`'s own `FileList` in every current engine — that is the supported way to do this.
+ * A drop never reaches the input on its own: without this a `<Dropzone name="avatar" required>`
+ * shows the accepted file and then refuses to submit. And handing it the whole drop posted the
+ * files `accept` / `maxBytes` / `maxFiles` turned away — `accept` is a hint to the picker, never a
+ * filter on `files`. So a `drop` with something accepted is adopted as the accepted list, and a
+ * drop with nothing accepted leaves an earlier pick alone, as a refused drop should. A `pick`
+ * already set `files` itself; it is narrowed only when it refused something — to an empty list if
+ * it refused everything, because the refused file is the one the form would otherwise post. A list
+ * is BUILT (`listOf`, a `DataTransfer` in a browser) only when something was refused.
  */
-export function adoptDroppedFiles(
+export function adoptAcceptedFiles<TFile extends FileCandidate>(
   input: FileTarget | undefined,
-  dropped: FileList | null | undefined,
+  offered: FileList | null | undefined,
+  selection: FileSelection<TFile>,
+  origin: 'drop' | 'pick',
+  listOf: FileListOf<TFile> = dataTransferList,
 ): void {
-  // An empty drop must not CLEAR a previous pick: the browser does not, and neither does this.
-  if (input === undefined || dropped === null || dropped === undefined || dropped.length === 0) {
-    return;
+  if (input === undefined) return;
+  if (origin === 'drop' && selection.accepted.length === 0) return;
+  if (selection.rejected.length > 0) {
+    input.files = listOf(selection.accepted);
+  } else if (origin === 'drop' && offered !== null && offered !== undefined) {
+    // Nothing refused: the drop's own list, which needs no constructor at all.
+    input.files = offered;
   }
-  input.files = dropped;
 }

package/src/components/gauge-view.ts

@@ -0,0 +1,43 @@
+// The dial of a Gauge, apart from its markup: a 270° ring open at the bottom, and the share of it
+// a value fills. `Gauge` takes that share from `meterShare` — one rule for "value of max", so a
+// Gauge and a Meter beside it can never disagree about what 7 of 4 draws.
+
+import { annularSector } from './donut-chart-view';
+
+/**
+ * 200 wide, cropped to 172 tall: the dial's open quarter is at the bottom, and the box ends just
+ * under the ring's lowest point (`gauge-view.test.ts` holds that) instead of spending the strip.
+ */
+export const GAUGE = {
+  width: 200,
+  height: 172,
+  centre: 100,
+  outer: 92,
+  inner: 74,
+  /** Seven-thirty: -135° from twelve o'clock. */
+  from: -Math.PI * 0.75,
+  sweep: Math.PI * 1.5,
+} as const;
+
+const clampShare = (share: number): number =>
+  Number.isFinite(share) ? Math.min(1, Math.max(0, share)) : 0;
+
+/** The angle where a fill of `share` stops. */
+export function gaugeFillEnd(share: number): number {
+  return GAUGE.from + clampShare(share) * GAUGE.sweep;
+}
+
+export interface GaugeArcs {
+  readonly track: string;
+  /** `''` at a share of 0 — an empty dial is the track alone, not a zero-width sliver. */
+  readonly fill: string;
+}
+
+export function gaugeArcs(share: number): GaugeArcs {
+  const { centre, outer, inner, from } = GAUGE;
+  const end = gaugeFillEnd(share);
+  return {
+    track: annularSector(centre, centre, outer, inner, from, gaugeFillEnd(1)),
+    fill: annularSector(centre, centre, outer, inner, from, end),
+  };
+}

package/src/components/heading-node.tsx

@@ -0,0 +1,62 @@
+// The heading element a composite renders, written out one intrinsic per level. `<Heading>` over
+// `headingTag(level)` is a string to the server's JSX factory and a COMPONENT to the island
+// build's Solid transform, which calls it and throws (#488, `intrinsic-root.test.ts`). PageHeader,
+// Section and Accordion all render through this, so the switch exists once.
+
+import type { JSX } from 'solid-js';
+import type { HeadingTag } from './heading-level';
+
+export interface HeadingNodeAttrs {
+  readonly id?: string | undefined;
+  readonly class?: string | undefined;
+}
+
+/**
+ * `tag` comes from `headingTag(level)`, resolved once by the caller so an off-scale level still
+ * throws `X_UI_INVALID_VALUE` there. `content` is an accessor: read inside the element, it stays
+ * reactive in an island.
+ */
+export function headingNode(
+  tag: HeadingTag,
+  attrs: HeadingNodeAttrs,
+  content: () => JSX.Element,
+): JSX.Element {
+  switch (tag) {
+    case 'h1':
+      return (
+        <h1 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h1>
+      );
+    case 'h2':
+      return (
+        <h2 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h2>
+      );
+    case 'h3':
+      return (
+        <h3 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h3>
+      );
+    case 'h4':
+      return (
+        <h4 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h4>
+      );
+    case 'h5':
+      return (
+        <h5 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h5>
+      );
+    case 'h6':
+      return (
+        <h6 id={attrs.id} class={attrs.class}>
+          {content()}
+        </h6>
+      );
+  }
+}

package/src/components/image-source.ts

@@ -41,7 +41,7 @@ interface Candidate {
  * byte-stable whatever order the caller built the list in. `undefined` for an
  * empty list — the component omits the attribute rather than emitting an empty one.
  */
-export function srcsetFor(variants: readonly ImageVariant[] | undefined): string | undefined {
+export function variantSrcset(variants: readonly ImageVariant[] | undefined): string | undefined {
   if (variants === undefined || variants.length === 0) return undefined;
 
   const candidates = variants.map(toCandidate);
@@ -239,9 +239,9 @@ export interface ImageSourceSet {
 export function sourceSetsFor(sources: ImageSources | undefined): readonly ImageSourceSet[] {
   if (sources === undefined) return [];
   const sets: ImageSourceSet[] = [];
-  const avif = srcsetFor(sources.avif);
+  const avif = variantSrcset(sources.avif);
   if (avif !== undefined) sets.push({ type: 'image/avif', srcset: avif });
-  const webp = srcsetFor(sources.webp);
+  const webp = variantSrcset(sources.webp);
   if (webp !== undefined) sets.push({ type: 'image/webp', srcset: webp });
   return sets;
 }

package/src/components/line-chart-view.ts

@@ -0,0 +1,153 @@
+// The geometry of a LineChart / AreaChart, apart from its markup: the nice value scale over every
+// series, each point's position, the line through each unbroken run and the area under it. Pure,
+// so a server render and an island draw one chart; `null` is a gap, never a dive to zero.
+
+import type { ChartSeries } from './chart-frame-view';
+import { finiteOrNull } from './chart-frame-view';
+import type { NiceScale } from './chart-ticks-view';
+import { niceTicks } from './chart-ticks-view';
+
+/**
+ * 600 × 200, 3:1 — a dashboard row, not a hero. `pad` keeps a marker on the outermost point (and
+ * a stroke on the top grid line) inside the box. Labels are HTML outside the svg, like BarChart's
+ * (issue 494): inside a viewBox they would scale with it.
+ */
+export const LINE_CHART = { width: 600, height: 200, pad: 8 } as const;
+
+/** Past this many keys a marker per point is a second, lumpier line; only the newest is marked. */
+export const MARKERS_ON_EVERY_POINT_UP_TO = 24;
+
+export interface LinePoint {
+  /** The key's index — a gap skips an index, so this is not the point's position in the array. */
+  readonly index: number;
+  readonly x: number;
+  readonly y: number;
+  readonly value: number;
+}
+
+export interface LineSeriesGeometry {
+  readonly points: readonly LinePoint[];
+  /** `M … L …`, one `M` per unbroken run; `''` for a series with no value. */
+  readonly line: string;
+  /** Each run of two or more points closed down to the baseline; `''` when there is none. */
+  readonly area: string;
+}
+
+export interface LineTick {
+  readonly value: number;
+  readonly y: number;
+}
+
+export interface LineLayout {
+  readonly scale: NiceScale;
+  readonly ticks: readonly LineTick[];
+  /** The y of zero — or of the axis edge nearest it, for a range that does not cross zero. */
+  readonly baselineY: number;
+  /** The x of every key, gap or not — where its axis label sits. */
+  readonly keyX: readonly number[];
+  readonly series: readonly LineSeriesGeometry[];
+}
+
+export interface LineLayoutInput {
+  readonly keys: readonly string[];
+  readonly series: readonly ChartSeries[];
+  /** Start the axis at zero (the honest default for counts) or fit it to the data. */
+  readonly zero: boolean;
+  readonly maxTicks: number;
+}
+
+const round = (value: number): number => Math.round(value * 10) / 10;
+
+/**
+ * Every drawn value is a whole number — a count. Detected rather than asked for: a prop is one
+ * more thing a caller forgets, and the data already says it. One fraction anywhere turns it off.
+ */
+function allIntegers(input: LineLayoutInput): boolean {
+  return input.series.every((series) =>
+    input.keys.every((_, i) => {
+      const value = finiteOrNull(series.values[i]);
+      return value === null || Number.isInteger(value);
+    }),
+  );
+}
+
+function extent(input: LineLayoutInput): readonly [number, number] {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const series of input.series) {
+    for (let i = 0; i < input.keys.length; i += 1) {
+      const value = finiteOrNull(series.values[i]);
+      if (value === null) continue;
+      lo = Math.min(lo, value);
+      hi = Math.max(hi, value);
+    }
+  }
+  if (lo > hi) return [0, 1];
+  return input.zero ? [Math.min(0, lo), Math.max(0, hi)] : [lo, hi];
+}
+
+function runsOf(points: readonly LinePoint[]): LinePoint[][] {
+  const runs: LinePoint[][] = [];
+  let previous = -2;
+  for (const point of points) {
+    if (point.index !== previous + 1 || runs.length === 0) runs.push([]);
+    runs.at(-1)?.push(point);
+    previous = point.index;
+  }
+  return runs;
+}
+
+const at = (point: LinePoint): string => `${point.x},${point.y}`;
+
+export function lineLayout(input: LineLayoutInput): LineLayout {
+  const [lo, hi] = extent(input);
+  const scale = niceTicks(lo, hi, input.maxTicks, { integer: allIntegers(input) });
+  const { width, height, pad } = LINE_CHART;
+  // Halved on both sides, which leaves the ratio exact (a power-of-two scale commutes with
+  // rounding): `max - min` over the full float64 range overflows to Infinity, and the bottom
+  // tick's `Infinity / Infinity` drew `y="NaN"`.
+  const half = scale.max / 2 - scale.min / 2;
+  const yOf = (value: number): number =>
+    round(pad + ((scale.max / 2 - value / 2) / half) * (height - pad * 2));
+  const count = input.keys.length;
+  const xOf = (index: number): number =>
+    count <= 1 ? width / 2 : round(pad + (index * (width - pad * 2)) / (count - 1));
+  const baselineY = yOf(Math.min(scale.max, Math.max(scale.min, 0)));
+
+  const series = input.series.map((one): LineSeriesGeometry => {
+    const points: LinePoint[] = [];
+    for (let index = 0; index < count; index += 1) {
+      const value = finiteOrNull(one.values[index]);
+      if (value !== null) points.push({ index, x: xOf(index), y: yOf(value), value });
+    }
+    const runs = runsOf(points);
+    const line = runs
+      .map((run) => run.map((point, i) => `${i === 0 ? 'M' : 'L'}${at(point)}`).join(' '))
+      .join(' ');
+    const area = runs
+      .filter((run) => run.length > 1)
+      .map((run) => {
+        const first = run[0] as LinePoint;
+        const last = run.at(-1) as LinePoint;
+        const top = run.map((point) => `L${at(point)}`).join(' ');
+        return `M${first.x},${baselineY} ${top} L${last.x},${baselineY} Z`;
+      })
+      .join(' ');
+    return { points, line, area };
+  });
+
+  return {
+    scale,
+    ticks: scale.ticks.map((value) => ({ value, y: yOf(value) })),
+    baselineY,
+    keyX: input.keys.map((_, index) => xOf(index)),
+    series,
+  };
+}
+
+/** The points that carry a marker: all of them on a short series, only the newest on a dense one. */
+export function markedPoints(points: readonly LinePoint[], keyCount: number): readonly LinePoint[] {
+  if (keyCount <= MARKERS_ON_EVERY_POINT_UP_TO) return points;
+  const last = points.at(-1);
+  return last === undefined ? [] : [last];
+}

package/src/components/link-target.ts

@@ -19,7 +19,27 @@ export interface LinkTarget {
 export function linkTarget(href: string, declaredExternal?: boolean | undefined): LinkTarget {
   const safe = safeUrl(href, 'href');
   if (safe === null) return { href: undefined, external: false };
-  return { href: safe, external: declaredExternal === true || /^https?:\/\//.test(safe) };
+  return { href: safe, external: declaredExternal === true || namesAnotherOrigin(safe) };
+}
+
+/** An origin no real link can name: whatever resolves AWAY from it carried its own authority. */
+const SENTINEL_ORIGIN = 'http://link-target.invalid';
+
+/**
+ * Decided the way a browser resolves the href, not by its spelling: `//cdn.test`, `HTTPS://…` and
+ * a leading space all leave the page's origin, and a regex over the raw string read each of them
+ * as internal — no `noopener`, no external hint. A value the parser refuses is treated as external,
+ * because the hardening is the safe side of a wrong guess.
+ */
+function namesAnotherOrigin(href: string): boolean {
+  try {
+    const url = new URL(href, `${SENTINEL_ORIGIN}/`);
+    return (
+      (url.protocol === 'http:' || url.protocol === 'https:') && url.origin !== SENTINEL_ORIGIN
+    );
+  } catch {
+    return true;
+  }
 }
 
 /**

package/src/components/meter-view.ts

@@ -11,3 +11,16 @@ export function meterShare(value: number, max: number): number {
 export function meterWidth(share: number): string {
   return (share * 100).toFixed(1);
 }
+
+/**
+ * The `aria-valuenow` / `aria-valuemax` pair, from the SAME rule as the fill: a meter that draws
+ * full must not speak "7 of 4". With no usable maximum the bar is empty, and so is the range it
+ * speaks — 0 of 1, because `aria-valuemax` must stay above `aria-valuemin`.
+ */
+export function meterAria(
+  value: number,
+  max: number,
+): { readonly now: number; readonly max: number } {
+  if (!Number.isFinite(max) || max <= 0) return { now: 0, max: 1 };
+  return { now: Number.isFinite(value) ? Math.min(max, Math.max(0, value)) : 0, max };
+}

package/src/components/money-view.ts

@@ -1,12 +1,7 @@
 // Pure formatting core behind <Money>. Split out so the rule "format through the
 // injected locale, never an ambient default" is testable without a renderer.
 
-import {
-  type FormatMoneyOptions,
-  formatMoney,
-  type Money,
-  money as makeMoney,
-} from '@ultimat3/money';
+import { type FormatMoneyOptions, formatMoney, fromMinor, type Money } from '@ultimat3/money';
 import { invalidValueError } from '../errors';
 
 /** A bare number is minor units in the context currency. */
@@ -36,7 +31,7 @@ export function toMoney(value: MoneyInput, currency: string): Money {
       throw invalidValueError('Money', value, 'an integer number of minor units');
     }
     // Delegated so the currency code is validated by the one authority on it.
-    return makeMoney(value, currency);
+    return fromMinor(value, currency);
   }
   if (!Number.isInteger(value.minor)) {
     throw invalidValueError('Money', value, 'an integer number of minor units');

package/src/components/qr-matrix.ts

@@ -75,28 +75,15 @@ function drawAlignmentPattern(matrix: Matrix, centerRow: number, centerCol: numb
 function drawFunctionPatterns(matrix: Matrix, version: number): void {
   const size = matrix.size;
 
-  // Three finder patterns, each an 8x8 area (7x7 pattern plus a light separator ring); only the
-  // 7x7 pattern is drawn as dark/light above, so the surrounding separator is drawn explicitly.
+  // Three finder patterns. `drawFinderPattern`'s outermost ring (`dist === 4`) IS the light
+  // separator, clipped to the matrix — drawing a second ring one further out would claim row and
+  // column 8, the format strip and two timing modules.
   const corners: readonly (readonly [number, number])[] = [
     [3, 3],
     [3, size - 4],
     [size - 4, 3],
   ];
   for (const [row, col] of corners) drawFinderPattern(matrix, row, col);
-  // Separators: the light ring one module beyond each finder pattern, clipped to the matrix.
-  for (const [row, col] of corners) {
-    for (let d = -4; d <= 4; d++) {
-      for (const [r, c] of [
-        [row + d, col - 5],
-        [row + d, col + 5],
-        [row - 5, col + d],
-        [row + 5, col + d],
-      ] as const) {
-        if (r >= 0 && c >= 0 && r < size && c < size && !matrix.isSet(r, c))
-          matrix.set(r, c, false);
-      }
-    }
-  }
 
   // Timing patterns: row 6 and column 6, alternating dark/light, skipping cells the finder
   // patterns already claimed.
@@ -107,11 +94,14 @@ function drawFunctionPatterns(matrix: Matrix, version: number): void {
   }
 
   // Alignment pattern(s): every (row, col) pair from this version's coordinate list, except the
-  // one that overlaps the top-left finder pattern.
+  // three that would land on a finder pattern — (first, first), (first, last) and (last, first).
   const positions = ALIGNMENT_POSITIONS[version - 1] ?? [];
+  const first = positions[0];
+  const last = positions[positions.length - 1];
   for (const row of positions) {
     for (const col of positions) {
-      if (row === 6 && col === 6) continue;
+      if (row === first && (col === first || col === last)) continue;
+      if (row === last && col === first) continue;
       drawAlignmentPattern(matrix, row, col);
     }
   }
@@ -158,10 +148,11 @@ function drawFormatInfo(matrix: Matrix, maskPattern: number): void {
   matrix.set(8, 7, bit(8));
   for (let i = 9; i <= 14; i++) matrix.set(8, 14 - i, bit(i));
 
-  // The mirrored copy: bits 0-7 along row `size-1` down to `size-8` in column 8, bits 8-14 up
-  // column `size-1` down to `size-15` in row 8.
-  for (let i = 0; i <= 7; i++) matrix.set(size - 1 - i, 8, bit(i));
-  for (let i = 8; i <= 14; i++) matrix.set(8, size - 15 + i, bit(i));
+  // The second copy: bits 0-7 along row 8 from column `size-1` leftwards to `size-8`, bits 8-14
+  // down column 8 from row `size-7` to `size-1` — one short of the fixed dark module at
+  // (`size-8`, 8), which belongs to no format copy.
+  for (let i = 0; i <= 7; i++) matrix.set(8, size - 1 - i, bit(i));
+  for (let i = 8; i <= 14; i++) matrix.set(size - 15 + i, 8, bit(i));
 }
 
 /** Whether mask `pattern` (0-7, ISO 18004 §8.8.1) flips the module at `(row, col)`. */
@@ -198,11 +189,13 @@ function drawData(matrix: Matrix, codewords: readonly number[], pattern: number)
   let bitIndex = 0;
   let upward = true;
   for (let colPair = size - 1; colPair > 0; colPair -= 2) {
+    // The vertical timing column carries no data, so the strip that would straddle it moves one
+    // module left — which is also what makes column 0 the last strip's left half.
+    if (colPair === 6) colPair = 5;
     for (let count = 0; count < size; count++) {
       const row = upward ? size - 1 - count : count;
       for (let colOffset = 0; colOffset < 2; colOffset++) {
         const col = colPair - colOffset;
-        if (col === 6) continue; // the vertical timing column carries no data
         if (matrix.isSet(row, col)) continue;
         const bit = bits[bitIndex] ?? false;
         bitIndex++;

package/src/components/relative-time-view.ts

@@ -27,16 +27,23 @@ const THRESHOLDS: readonly Threshold[] = [
   { unit: 'second', ms: 1000 },
 ];
 
+const unitMs = (index: number): number => (THRESHOLDS[index] as Threshold).ms;
+const roundIn = (delta: number, index: number): number => Math.round(delta / unitMs(index));
+
 export function relativeTimeText(options: RelativeTimeOptions): string {
   const target = toDate(options.value).getTime();
   const base = options.now === undefined ? Date.now() : toDate(options.now).getTime();
   const delta = target - base;
   const magnitude = Math.abs(delta);
 
-  const threshold =
-    THRESHOLDS.find((candidate) => magnitude >= candidate.ms) ??
-    (THRESHOLDS[THRESHOLDS.length - 1] as Threshold);
-  const value = Math.round(delta / threshold.ms);
+  let index = THRESHOLDS.findIndex((candidate) => magnitude >= candidate.ms);
+  if (index < 0) index = THRESHOLDS.length - 1;
+  // Promote AFTER rounding: 59.6 minutes rounds to 60, and "60 minutes ago" is "1 hour ago".
+  while (index > 0 && Math.abs(roundIn(delta, index)) * unitMs(index) >= unitMs(index - 1)) {
+    index -= 1;
+  }
+  const threshold = THRESHOLDS[index] as Threshold;
+  const value = roundIn(delta, index);
 
   const formatter = new Intl.RelativeTimeFormat(options.locale, {
     numeric: options.numeric ?? 'auto',

package/src/form/form-binding.ts

@@ -99,13 +99,19 @@ function declaredFields(fields: readonly string[]): ReadonlySet<string> {
   return declared;
 }
 
-export function createFormBinding<TValues, TResult>(
+export function formBinding<TValues, TResult>(
   options: FormBindingOptions<TValues, TResult>,
 ): FormBinding<TValues, TResult> {
   const fields = declaredFields(options.fields);
   let state: FormState<TResult> = IDLE_FORM_STATE;
   let touch: FormTouch = NO_FORM_TOUCH;
   let inFlight: Promise<FormState<TResult>> | null = null;
+  /**
+   * The paths changed since the in-flight submit read the form, or `null` with none in flight.
+   * Every edit counts, a revert to `initial` included: the server now holds what was submitted,
+   * not the opening value, so the baseline cannot say whether an edit made after the read is lost.
+   */
+  let editedInFlight: Set<string> | null = null;
 
   /**
    * A transition names the submit's own members; `touched`/`dirty` are added here, from the one
@@ -146,24 +152,32 @@ export function createFormBinding<TValues, TResult>(
   const run = async (values: TValues): Promise<FormState<TResult>> => {
     // Cleared, never carried: a stale message would mark a control invalid for a value the user
     // has already changed, on the one screen where the user is watching for exactly that.
+    // Opened BEFORE the publish: `onState` is synchronous, so a subscriber can edit in reaction
+    // to `submitting` itself, and that edit already postdates what this submit read.
+    editedInFlight = new Set();
     publish({ status: 'submitting', ...NO_FORM_ERRORS, result: undefined, issues: [] });
 
-    const schema = options.schema;
-    if (schema !== undefined) {
-      // The result's `value` is read by nothing. Deliberately: the parse below is the browser's
-      // opinion, and the only thing this file wants from it is which paths to complain about.
-      const local = issuesFromValidation(await schema['~standard'].validate(values));
-      if (local.length > 0) return failed(local);
-    }
-
     try {
+      // Inside the `try`: a validate that throws or rejects is a failed submit, never a `submit()`
+      // that rejects with the state left at `submitting` and the control refusing every retry.
+      const schema = options.schema;
+      if (schema !== undefined) {
+        // The result's `value` is read by nothing. Deliberately: the parse below is the browser's
+        // opinion, and the only thing this file wants from it is which paths to complain about.
+        const local = issuesFromValidation(await schema['~standard'].validate(values));
+        if (local.length > 0) return failed(local);
+      }
       const result = await options.submit(values);
-      // The server accepted what the form held, so there is nothing left to lose. `touched` stays:
-      // the user has still visited those fields, and a hint that vanishes on save is a flicker.
-      touch = { touched: touch.touched, dirty: NO_FORM_TOUCH.dirty };
+      // The server accepted what the form held WHEN IT SUBMITTED, so only what changed since is
+      // left to lose — clearing that too let a navigation guard drop an edit typed during the save.
+      // `touched` stays: the user has still visited those fields, and a hint that vanishes on save
+      // is a flicker.
+      touch = { touched: touch.touched, dirty: editedInFlight ?? NO_FORM_TOUCH.dirty };
       return publish({ status: 'succeeded', ...NO_FORM_ERRORS, result, issues: [] });
     } catch (rejection) {
       return failed(issuesFromRejection(rejection));
+    } finally {
+      editedInFlight = null;
     }
   };
 
@@ -183,10 +197,14 @@ export function createFormBinding<TValues, TResult>(
     pending: () => state.status === 'submitting',
     firstInvalidField: () => firstInvalidField(state, fields),
     touch: (path) => publishTouch(markTouched(touch, path)),
-    edit: (path, value) =>
-      publishTouch(markDirty(touch, path, !sameFieldValue(value, baseline(path)))),
+    edit: (path, value) => {
+      editedInFlight?.add(path);
+      publishTouch(markDirty(touch, path, !sameFieldValue(value, baseline(path))));
+    },
     reset: () => {
       touch = NO_FORM_TOUCH;
+      // A reset mid-flight discards what was typed before it, the in-flight window's share too.
+      if (editedInFlight !== null) editedInFlight = new Set();
       publish(IDLE_FORM_STATE);
     },
   };

package/src/form/use-form.ts

@@ -1,11 +1,11 @@
-// The reactive shell over `createFormBinding`, and the whole of what it adds: the state lands in a
+// The reactive shell over `formBinding`, and the whole of what it adds: the state lands in a
 // signal, so a `<Field error={form.errorFor('title')}>` re-renders when a submit answers.
 //
 // Reactivity goes through `solid()` like every other read in this package — a component that
 // imported solid-js directly would make @ultimat3/ui depend on a runtime it deliberately does not.
 
 import { solid } from '../theme/solid-adapter';
-import { createFormBinding, type FormBinding, type FormBindingOptions } from './form-binding';
+import { type FormBinding, type FormBindingOptions, formBinding } from './form-binding';
 import {
   errorOf,
   type FormState,
@@ -24,7 +24,7 @@ export function useForm<TValues, TResult>(
 ): FormBinding<TValues, TResult> {
   const runtime = solid();
   const [state, setState] = runtime.createSignal<FormState<TResult>>(IDLE_FORM_STATE);
-  const binding = createFormBinding<TValues, TResult>({
+  const binding = formBinding<TValues, TResult>({
     ...options,
     onState: (next) => {
       options.onState?.(next);

package/src/global.scss

@@ -5,3 +5,12 @@
 
 @use 'tokens/theme';
 @use 'tokens/reset';
+
+// A held island's reveal that needs no script (`@ultimat3/render`'s `ISLAND_HOLD_REVEAL`, issue 506):
+// its wrapper animates to this after the hold's cap, so JS off or a blocked runtime still shows
+// the server's markup. The name is held equal to render's by `island-hold-replay.test.ts`.
+@keyframes ultimate-hold-reveal {
+  to {
+    visibility: visible;
+  }
+}