@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/formatting/Number.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+A `<data>` element whose text is the `Intl.NumberFormat` rendering and whose `value` attribute keeps the raw number.
+-->
+<!--
+  NumberFormat — a `<data>` element whose text is `Intl.NumberFormat`'s
+  rendering and whose `value` attribute is the raw number/bigint, so the
+  machine-readable figure survives locale formatting.
+
+  Exported as `NumberFormat` (not `Number`) to avoid shadowing the global.
+
+  ARIA contract: none beyond native `<data>` semantics — `value` carries the
+  machine-readable figure, the rendered text carries the locale-formatted one.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { value, locales = getComponentsContext().locale(), style = "decimal", unit, unitDisplay = "short", currency, currencyDisplay = "symbol", maximumFractionDigits, minimumFractionDigits, signDisplay, notation, options, ...rest } = $props();
+// The formatter and the formatted string are separate `$derived` values so
+// constructing the (relatively expensive) `Intl.NumberFormat` is skipped
+// when only `value` changes. See PERF-CPU-003 in
+// docs/specs/performance-invariants.md.
+const format = $derived(new Intl.NumberFormat(locales, options ?? {
+	style,
+	unit,
+	unitDisplay,
+	currency,
+	currencyDisplay,
+	maximumFractionDigits,
+	minimumFractionDigits,
+	signDisplay,
+	notation
+}));
+const formatted = $derived(format.format(value));
+const raw = $derived(String(value));
+</script>
+
+<data {...rest} value={raw}>{formatted}</data>

package/dist/formatting/Number.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLDataAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLDataAttributes, 'value'> {
+    /** The number to format; the raw value also goes in the `value` attribute. */
+    value: number | bigint;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * `Intl.NumberFormat` `style`.
+     * @defaultValue `'decimal'`
+     */
+    style?: Intl.NumberFormatOptions['style'] | undefined;
+    /** The unit when `style` is `unit` (`kilometer`, `percent`). */
+    unit?: string | undefined;
+    /**
+     * `Intl.NumberFormat` `unitDisplay`.
+     * @defaultValue `'short'`
+     */
+    unitDisplay?: Intl.NumberFormatOptions['unitDisplay'] | undefined;
+    /** ISO 4217 code when `style` is `currency`. */
+    currency?: string | undefined;
+    /**
+     * `Intl.NumberFormat` `currencyDisplay`.
+     * @defaultValue `'symbol'`
+     */
+    currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'] | undefined;
+    /** `Intl.NumberFormat` `maximumFractionDigits`. */
+    maximumFractionDigits?: number | undefined;
+    /** `Intl.NumberFormat` `minimumFractionDigits`. */
+    minimumFractionDigits?: number | undefined;
+    /** `Intl.NumberFormat` `signDisplay`. */
+    signDisplay?: Intl.NumberFormatOptions['signDisplay'] | undefined;
+    /** `Intl.NumberFormat` `notation`. */
+    notation?: Intl.NumberFormatOptions['notation'] | undefined;
+    /** Raw `Intl.NumberFormatOptions`; wins over the individual style props when given. */
+    options?: Intl.NumberFormatOptions | undefined;
+}
+/** A `<data>` element whose text is the `Intl.NumberFormat` rendering and whose `value` attribute keeps the raw number. */
+declare const Number: import("svelte").Component<Props, {}, "">;
+type Number = ReturnType<typeof Number>;
+export default Number;

package/dist/formatting/RelativeTime.svelte

@@ -0,0 +1,69 @@
+<!-- @component
+"3 days ago" / "in 2 hours" via `Intl.RelativeTimeFormat`, in the largest unit whose magnitude is at least one.
+-->
+<!--
+  RelativeTime — "3 days ago" / "in 2 hours" via `Intl.RelativeTimeFormat`,
+  picking the largest unit (seconds → years) whose magnitude is at least one.
+
+  ARIA contract: none beyond native `<time>` semantics. The absolute instant
+  is never hidden — it is both the machine-readable `datetime` and the
+  human-readable `title`, so a reader who hovers (or a tool that reads
+  `title`) gets the precise moment the relative text is glossing over.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { value, now, locales = getComponentsContext().locale(), numeric = "auto", style = "long", ...rest } = $props();
+const UNITS = [
+	{
+		unit: "year",
+		ms: 365.25 * 24 * 60 * 60 * 1e3
+	},
+	{
+		unit: "month",
+		ms: 30.44 * 24 * 60 * 60 * 1e3
+	},
+	{
+		unit: "week",
+		ms: 7 * 24 * 60 * 60 * 1e3
+	},
+	{
+		unit: "day",
+		ms: 24 * 60 * 60 * 1e3
+	},
+	{
+		unit: "hour",
+		ms: 60 * 60 * 1e3
+	},
+	{
+		unit: "minute",
+		ms: 60 * 1e3
+	},
+	{
+		unit: "second",
+		ms: 1e3
+	}
+];
+const instant = $derived(new Date(value));
+const reference = $derived(new Date(now ?? Date.now()));
+const diffMs = $derived(instant.getTime() - reference.getTime());
+// Largest unit whose magnitude rounds to at least one; falls back to
+// seconds for anything smaller (e.g. "0 seconds ago" / "in 0 seconds").
+const picked = $derived(UNITS.find((candidate) => Math.abs(diffMs) >= candidate.ms) ?? UNITS[UNITS.length - 1]);
+const roundedValue = $derived(Math.round(diffMs / picked.ms));
+// The formatter and the formatted string are separate `$derived` values so
+// constructing the (relatively expensive) `Intl.RelativeTimeFormat` is
+// skipped when only `value`/`now` change. See PERF-CPU-003 in
+// docs/specs/performance-invariants.md.
+const format = $derived(new Intl.RelativeTimeFormat(locales, {
+	numeric,
+	style
+}));
+const formatted = $derived(format.format(roundedValue, picked.unit));
+const iso = $derived(instant.toISOString());
+const absoluteFormat = $derived(new Intl.DateTimeFormat(locales, {
+	dateStyle: "full",
+	timeStyle: "short"
+}));
+const absolute = $derived(absoluteFormat.format(instant));
+</script>
+
+<time {...rest} datetime={iso} title={absolute}>{formatted}</time>

package/dist/formatting/RelativeTime.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLTimeAttributes } from 'svelte/elements';
+interface Props extends HTMLTimeAttributes {
+    /** The instant: a `Date`, epoch milliseconds or an ISO string. */
+    value: Date | number | string;
+    /** The instant "now" is measured from; defaults to the current wall clock at render. */
+    now?: Date | number | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * `Intl.RelativeTimeFormat` `numeric`; `auto` allows "yesterday".
+     * @defaultValue `'auto'`
+     */
+    numeric?: Intl.RelativeTimeFormatOptions['numeric'] | undefined;
+    /**
+     * `Intl.RelativeTimeFormat` `style`.
+     * @defaultValue `'long'`
+     */
+    style?: Intl.RelativeTimeFormatOptions['style'] | undefined;
+}
+/** "3 days ago" / "in 2 hours" via `Intl.RelativeTimeFormat`, in the largest unit whose magnitude is at least one. */
+declare const RelativeTime: import("svelte").Component<Props, {}, "">;
+type RelativeTime = ReturnType<typeof RelativeTime>;
+export default RelativeTime;

package/dist/formatting/Year.svelte

@@ -0,0 +1,39 @@
+<!-- @component
+A `<time>` element carrying just a year, for dates whose precision really is a year.
+-->
+<!--
+  Year — a `<time>` element carrying just a year: `datetime="1925"`, and
+  `Intl.DateTimeFormat`'s locale rendering of the year (with its era, when
+  asked) as the text. For publication dates, lifespans and anything else whose
+  precision really is a year.
+
+  ARIA contract: none beyond the native `<time>` semantics. `datetime` is a
+  valid HTML year string (four or more digits), so the value stays
+  machine-readable at the precision it actually has rather than claiming a
+  midnight-on-1-January instant.
+
+  A `number` is a CALENDAR YEAR (`1925`), not an epoch timestamp — that is
+  what a caller holding "the year" has. A `Date` or string is read as an
+  instant and its UTC year is taken, so a date at midnight UTC never renders
+  as the previous year in a timezone west of Greenwich. Years before 1 CE have
+  no HTML year string, so for those `datetime` falls back to the ISO instant.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { value, locales = getComponentsContext().locale(), era, representation = "numeric", ...rest } = $props();
+const instant = $derived.by(() => {
+	if (typeof value !== "number") return new Date(value);
+	const date = new Date(Date.UTC(2e3, 0, 1));
+	date.setUTCFullYear(value);
+	return date;
+});
+const format = $derived(new Intl.DateTimeFormat(locales, {
+	year: representation,
+	era,
+	timeZone: "UTC"
+}));
+const formatted = $derived(format.format(instant));
+const year = $derived(instant.getUTCFullYear());
+const datetime = $derived(year >= 1 ? String(year).padStart(4, "0") : instant.toISOString());
+</script>
+
+<time {...rest} {datetime}>{formatted}</time>

package/dist/formatting/Year.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLTimeAttributes } from 'svelte/elements';
+interface Props extends HTMLTimeAttributes {
+    /** A calendar year, or an instant (its UTC year is used). */
+    value: Date | number | string;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /** Append the era: `1925 AD`. */
+    era?: Intl.DateTimeFormatOptions['era'] | undefined;
+    /**
+     * Four digits or two.
+     * @defaultValue `'numeric'`
+     */
+    representation?: 'numeric' | '2-digit' | undefined;
+}
+/** A `<time>` element carrying just a year, for dates whose precision really is a year. */
+declare const Year: import("svelte").Component<Props, {}, "">;
+type Year = ReturnType<typeof Year>;
+export default Year;

package/dist/formatting/duration.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Lengths of time: the value type, its ISO 8601 form for `<time datetime>`,
+ * and a locale-aware formatter that `Duration` and `Countdown` share and an
+ * app can call in plain TypeScript.
+ *
+ * `formatDuration` uses `Intl.DurationFormat` where the runtime has it
+ * (Baseline 2025) and otherwise composes per-unit `Intl.NumberFormat` unit
+ * strings with an `Intl.ListFormat` of `type: 'unit'`, so the fallback is
+ * still localised, just less idiomatic.
+ *
+ * @module
+ */
+/** A length of time; any subset of fields. Mirrors `Intl.DurationFormat`'s input. */
+export interface DurationValue {
+    readonly years?: number | undefined;
+    readonly months?: number | undefined;
+    readonly weeks?: number | undefined;
+    readonly days?: number | undefined;
+    readonly hours?: number | undefined;
+    readonly minutes?: number | undefined;
+    readonly seconds?: number | undefined;
+    readonly milliseconds?: number | undefined;
+}
+/** How a duration is spelled: `'2 hours, 30 minutes'`, `'2 hr, 30 min'`, `'2h 30m'` or `'2:30:00'`. */
+export type DurationStyle = 'long' | 'short' | 'narrow' | 'digital';
+/**
+ * Split milliseconds into days, hours, minutes, seconds and milliseconds,
+ * leaving out the zero fields (`9_309_000` → `{ hours: 2, minutes: 35,
+ * seconds: 9 }`). Days are the largest unit: months and years have no fixed
+ * length. Negative input is treated as zero.
+ */
+export declare function durationFromMilliseconds(ms: number): DurationValue;
+/**
+ * The ISO 8601 duration string for `<time datetime>`: `{ hours: 2,
+ * minutes: 30 }` → `'PT2H30M'`. Milliseconds join the seconds as a
+ * fraction; an empty duration is `'PT0S'`.
+ */
+export declare function toIsoDuration(value: DurationValue): string;
+/**
+ * Format a duration for `locales` in `style`, through `Intl.DurationFormat`
+ * where available and a localised `NumberFormat` + `ListFormat` composition
+ * otherwise.
+ */
+export declare function formatDuration(value: DurationValue, locales?: string | readonly string[], style?: DurationStyle): string;

package/dist/formatting/duration.js

@@ -0,0 +1,125 @@
+/**
+ * Lengths of time: the value type, its ISO 8601 form for `<time datetime>`,
+ * and a locale-aware formatter that `Duration` and `Countdown` share and an
+ * app can call in plain TypeScript.
+ *
+ * `formatDuration` uses `Intl.DurationFormat` where the runtime has it
+ * (Baseline 2025) and otherwise composes per-unit `Intl.NumberFormat` unit
+ * strings with an `Intl.ListFormat` of `type: 'unit'`, so the fallback is
+ * still localised, just less idiomatic.
+ *
+ * @module
+ */
+/** The fields, largest first, with the `Intl` unit each formats as. */
+const FIELDS = [
+    { field: 'years', unit: 'year' },
+    { field: 'months', unit: 'month' },
+    { field: 'weeks', unit: 'week' },
+    { field: 'days', unit: 'day' },
+    { field: 'hours', unit: 'hour' },
+    { field: 'minutes', unit: 'minute' },
+    { field: 'seconds', unit: 'second' },
+    { field: 'milliseconds', unit: 'millisecond' },
+];
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+/**
+ * Split milliseconds into days, hours, minutes, seconds and milliseconds,
+ * leaving out the zero fields (`9_309_000` → `{ hours: 2, minutes: 35,
+ * seconds: 9 }`). Days are the largest unit: months and years have no fixed
+ * length. Negative input is treated as zero.
+ */
+export function durationFromMilliseconds(ms) {
+    let rest = Math.max(0, Math.round(ms));
+    const parts = {};
+    for (const [field, size] of [
+        ['days', DAY],
+        ['hours', HOUR],
+        ['minutes', MINUTE],
+        ['seconds', SECOND],
+        ['milliseconds', 1],
+    ]) {
+        const count = Math.floor(rest / size);
+        rest -= count * size;
+        if (count > 0)
+            parts[field] = count;
+    }
+    return parts;
+}
+/**
+ * The ISO 8601 duration string for `<time datetime>`: `{ hours: 2,
+ * minutes: 30 }` → `'PT2H30M'`. Milliseconds join the seconds as a
+ * fraction; an empty duration is `'PT0S'`.
+ */
+export function toIsoDuration(value) {
+    const amount = (field) => value[field] ?? 0;
+    const date = [
+        amount('years') > 0 ? `${amount('years')}Y` : '',
+        amount('months') > 0 ? `${amount('months')}M` : '',
+        amount('weeks') > 0 ? `${amount('weeks')}W` : '',
+        amount('days') > 0 ? `${amount('days')}D` : '',
+    ].join('');
+    const seconds = amount('seconds') + amount('milliseconds') / 1000;
+    const time = [
+        amount('hours') > 0 ? `${amount('hours')}H` : '',
+        amount('minutes') > 0 ? `${amount('minutes')}M` : '',
+        seconds > 0 ? `${Number(seconds.toFixed(3))}S` : '',
+    ].join('');
+    if (date === '' && time === '')
+        return 'PT0S';
+    return `P${date}${time === '' ? '' : `T${time}`}`;
+}
+/** `Intl.DurationFormat` when the runtime has it. */
+function nativeDurationFormat() {
+    const intl = Intl;
+    return intl.DurationFormat;
+}
+/** `value` with the `undefined` and zero fields dropped, as `Intl.DurationFormat` wants. */
+function presentFields(value) {
+    return Object.fromEntries(FIELDS.filter(({ field }) => (value[field] ?? 0) !== 0).map(({ field }) => [
+        field,
+        value[field],
+    ]));
+}
+/** `H:MM:SS` from the hours, minutes and seconds, the larger units folded into hours. */
+function digital(value) {
+    const hours = (value.days ?? 0) * 24 + (value.hours ?? 0);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${hours}:${pad(value.minutes ?? 0)}:${pad(value.seconds ?? 0)}`;
+}
+/**
+ * Format a duration for `locales` in `style`, through `Intl.DurationFormat`
+ * where available and a localised `NumberFormat` + `ListFormat` composition
+ * otherwise.
+ */
+export function formatDuration(value, locales, style = 'short') {
+    const present = presentFields(value);
+    const Native = nativeDurationFormat();
+    if (Native !== undefined) {
+        return new Native(locales, { style }).format(present);
+    }
+    if (style === 'digital')
+        return digital(value);
+    const unitDisplay = style;
+    // A mutable copy: TS6's `Intl.ListFormat` (svelte-check) takes no readonly array.
+    const tags = typeof locales === 'object' ? [...locales] : locales;
+    const pieces = FIELDS.filter(({ field }) => present[field] !== undefined).map(({ field, unit }) => new Intl.NumberFormat(tags, {
+        style: 'unit',
+        unit,
+        unitDisplay,
+    }).format(present[field] ?? 0));
+    return new Intl.ListFormat(tags, {
+        type: 'unit',
+        style: style === 'long' ? 'long' : style === 'short' ? 'short' : 'narrow',
+    }).format(pieces.length === 0
+        ? [
+            new Intl.NumberFormat(tags, {
+                style: 'unit',
+                unit: 'second',
+                unitDisplay,
+            }).format(0),
+        ]
+        : pieces);
+}

package/dist/formatting/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * formatting — locale-aware rendering of dates, numbers, lists and search
+ * highlights. See the package README for the family reference.
+ *
+ * @module
+ */
+export { default as Countdown } from './Countdown.svelte';
+export { default as DateTime } from './DateTime.svelte';
+export { default as Duration } from './Duration.svelte';
+export * from './duration.ts';
+export { default as NumberFormat } from './Number.svelte';
+export { default as FormatList } from './FormatList.svelte';
+export { default as RelativeTime } from './RelativeTime.svelte';
+export { default as Year } from './Year.svelte';
+export { default as Highlight, tokenise } from './Highlight.svelte';

package/dist/formatting/index.js

@@ -0,0 +1,17 @@
+/**
+ * formatting — locale-aware rendering of dates, numbers, lists and search
+ * highlights. See the package README for the family reference.
+ *
+ * @module
+ */
+export { default as Countdown } from './Countdown.svelte';
+export { default as DateTime } from './DateTime.svelte';
+export { default as Duration } from './Duration.svelte';
+export * from "./duration.js";
+// `NumberFormat`, not `Number`: a named export called `Number` would shadow
+// the global constructor for anyone importing it by that name.
+export { default as NumberFormat } from './Number.svelte';
+export { default as FormatList } from './FormatList.svelte';
+export { default as RelativeTime } from './RelativeTime.svelte';
+export { default as Year } from './Year.svelte';
+export { default as Highlight, tokenise } from './Highlight.svelte';

package/dist/forms/EntityForm.svelte

@@ -0,0 +1,185 @@
+<!-- @component
+Renders an `@thomasfosterau/effect-forms-svelte` `defineEntityForm` definition through this library’s field primitives.
+-->
+<!--
+  EntityForm — the generic renderer for an `@thomasfosterau/effect-forms-svelte`
+  `defineEntityForm` definition: it walks `definition.entriesFor(mode)` and
+  renders each entry through this library's field primitives —
+  `FormField` + `TextInput` / `DateInput` / `Textarea` / `Select` for scalars
+  and selects, and the entry's own component for a bespoke widget (a picker,
+  a contributor list), bridged through the widget contract below.
+
+  The one component of this package that touches Effect, which is why it is a
+  separate entry point (`@thomasfosterau/components/entity-form`) with
+  `@thomasfosterau/effect-forms-svelte` an OPTIONAL peer: a consumer that
+  never imports this entry never installs the form library or `effect`. The
+  renderer itself imports only the store (`createForm`) and types.
+
+  **Seeding.** `definition`, `mode`, `initial` and `initialRows` configure the
+  store ONCE, at mount: a form never changes entity or mode mid-flight, and an
+  edit page's values must land in the SSR HTML. There is no `$effect`
+  re-seeding, so a value typed before hydration is never wiped by a late seed.
+  A create form whose command carries a client id gets one minted here, once
+  per mount, so a retried submission stays idempotent.
+
+  **The widget contract.** A widget entry receives, in this order: its
+  definition's `props()`, then the caller's `fieldProps[key]`, then the bridge
+  — `name`, `value`, `onChange`, `errors`. The bridge is spread LAST, so
+  neither of the first two can sever the store binding. A `value` widget
+  bridges a string field of the store; a `rows` widget bridges a row list held
+  here and serialises it itself (its own hidden input).
+
+  **Submission.** `enhance(form)` supplies the spreadable `<form>` attributes.
+  It defaults to the store's own `form.props` (POST + its progressive
+  enhancement); a SvelteKit app passes its `$app/forms`-backed `enhanceForm`,
+  which this package cannot import.
+
+  **Form-level messages.** The store's root errors and the caller's
+  `messages` (a failure the store never saw, such as a server action's
+  `fail(500, { message })`) share one `FormErrors` block, store errors first.
+
+  Every string that is not the definition's own (labels, submit labels and
+  option labels are its message thunks) is a prop with an English default.
+-->
+<script lang="ts">import { createForm } from "@thomasfosterau/effect-forms-svelte";
+import DateInput from "../fields/DateInput.svelte";
+import FormField from "../fields/FormField.svelte";
+import Select from "../fields/Select.svelte";
+import TextInput from "../fields/TextInput.svelte";
+import Textarea from "../fields/Textarea.svelte";
+import FormActions from "./FormActions.svelte";
+import FormErrors from "./FormErrors.svelte";
+let { definition, mode, cancelHref, action, initial = {}, initialRows = {}, fieldProps = {}, enhance = (form) => form.props, cancelLabel = "Cancel", pendingLabel = "Saving…", selectPlaceholder = "Choose…", requiredLabel, messages, class: className, ...rest } = $props();
+// Configure-once, at mount (see the header): these reads are deliberately
+// not reactive.
+// svelte-ignore state_referenced_locally
+const configured = {
+	definition,
+	mode,
+	initial,
+	initialRows
+};
+const baseDefaults = configured.mode === "create" ? configured.definition.createDefaults : configured.definition.updateDefaults;
+const mintedId = configured.mode === "create" && configured.definition.clientId ? { id: crypto.randomUUID() } : undefined;
+const defaults = {
+	...baseDefaults,
+	...configured.initial,
+	...mintedId
+};
+const form = createForm({
+	schema: configured.mode === "create" ? configured.definition.createInput : configured.definition.updateInput,
+	defaults
+});
+const entries = configured.definition.entriesFor(configured.mode);
+// SAFETY: `defineEntityForm` validated every entry key against the derived
+// all-string input schema. The definition types that schema `Schema.Top`,
+// whose path-typed accessor admits no key (`never`), so the key is asserted
+// into it and the handle typed by this function's own return type.
+const handle = (key) => form.field(key);
+const getField = (key) => handle(key).value ?? "";
+const setField = (key, next) => {
+	handle(key).value = next;
+};
+let rows = $state(Object.fromEntries(entries.filter((entry) => entry._tag === "widget" && entry.bridge === "rows").map((entry) => [entry.key, [...configured.initialRows[entry.key] ?? []]])));
+const bridge = (entry) => entry.bridge === "rows" ? {
+	name: entry.key,
+	value: rows[entry.key] ?? [],
+	onChange: (next) => {
+		rows[entry.key] = next;
+	},
+	errors: handle(entry.key).visibleErrors
+} : {
+	name: entry.key,
+	value: getField(entry.key),
+	onChange: (next) => setField(entry.key, next),
+	errors: handle(entry.key).visibleErrors
+};
+const selectOptions = (entry) => (configured.definition.fieldFor(entry.key).options ?? []).map((value) => ({
+	value,
+	label: entry.options.optionLabels[value]?.() ?? value
+}));
+const inputMode = (entry) => entry.options.inputmode ?? (configured.definition.fieldFor(entry.key).kind === "number" ? "numeric" : undefined);
+const showHiddenId = configured.mode === "update" || configured.definition.clientId;
+const submitLabel = $derived(mode === "create" ? definition.submit.create() : definition.submit.update());
+const gated = $derived(entries.some((entry) => entry._tag === "widget" && entry.options.gate === true && getField(entry.key) === ""));
+// The empty path is the form's own (non-field) messages.
+// The caller's `messages` (a server fault with no form state) follow them.
+const rootErrors = $derived([...form.errorsAt([]), ...messages ?? []]);
+const fieldId = (key) => `entity-form-${key}`;
+// The `FormField` wrapper is the same for a select and a scalar entry.
+const fieldAttrs = (entry) => ({
+	id: fieldId(entry.key),
+	label: entry.options.label(),
+	required: entry.options.required === true,
+	errors: handle(entry.key).visibleErrors,
+	requiredLabel
+});
+</script>
+
+<!-- A scalar entry's control: a textarea, a date input or a text input. -->
+{#snippet scalarInput(entry: ScalarEntry, control: FieldControl)}
+  {#if entry.multiline}
+    <Textarea
+      {...control}
+      name={entry.key}
+      placeholder={entry.options.placeholder?.()}
+      bind:value={() => getField(entry.key), (next: string) => setField(entry.key, next)}
+    />
+  {:else if entry.options.type === 'date'}
+    <DateInput
+      {...control}
+      name={entry.key}
+      bind:value={() => getField(entry.key), (next: string) => setField(entry.key, next)}
+    />
+  {:else}
+    <TextInput
+      {...control}
+      name={entry.key}
+      type={entry.options.type === 'url' ? 'url' : 'text'}
+      inputmode={inputMode(entry)}
+      placeholder={entry.options.placeholder?.()}
+      bind:value={() => getField(entry.key), (next: string) => setField(entry.key, next)}
+    />
+  {/if}
+{/snippet}
+
+<form {...rest} {...enhance(form)} {action} class={['space-y-4', className]}>
+  {#if showHiddenId}
+    <input type="hidden" name="id" value={getField('id')} />
+  {/if}
+
+  <FormErrors messages={rootErrors} />
+
+  {#each entries as entry (entry.key)}
+    {#if entry._tag === 'widget'}
+      <entry.component {...entry.props()} {...fieldProps[entry.key] ?? {}} {...bridge(entry)} />
+    {:else if entry._tag === 'select'}
+      <FormField {...fieldAttrs(entry)}>
+        {#snippet children(control)}
+          <Select
+            {...control}
+            name={entry.key}
+            options={selectOptions(entry)}
+            placeholder={selectPlaceholder}
+            bind:value={() => getField(entry.key), (next: string) => setField(entry.key, next)}
+          />
+        {/snippet}
+      </FormField>
+    {:else}
+      <FormField {...fieldAttrs(entry)}>
+        {#snippet children(control)}
+          {@render scalarInput(entry, control)}
+        {/snippet}
+      </FormField>
+    {/if}
+  {/each}
+
+  <FormActions
+    {submitLabel}
+    {pendingLabel}
+    pending={form.submitting}
+    disabled={gated}
+    {cancelHref}
+    {cancelLabel}
+  />
+</form>