@marianmeres/stuic 3.181.0 → 3.182.0

package/dist/components/Input/FieldTable.svelte.d.ts

@@ -0,0 +1,98 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import type { MaybeLocalized } from "../../utils/tr.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+/** The cell types `FieldTable` renders itself. */
+export type FieldTableCellType = "text" | "number" | "select" | "checkbox" | "date" | "url";
+export interface FieldTableColumn {
+    /** The row-object key this cell reads and writes. */
+    key: string;
+    /** A built-in cell type, or anything else for the `cell` snippet. */
+    type: FieldTableCellType | (string & {});
+    label: MaybeLocalized;
+    /** `select` cells: the choices. */
+    options?: {
+        value: string;
+        label: MaybeLocalized;
+    }[];
+    /** `number` cells: a display unit — in the header ("Qty (pcs)") and after the input. */
+    unit?: string;
+    placeholder?: MaybeLocalized;
+    /** `text` / `url` cells: the input's `maxlength`, re-checked by validation. */
+    maxLength?: number;
+    /** Extra per-cell rule, run after the built-in one. Return a message to fail. */
+    validate?: (value: unknown, row: Record<string, unknown>) => string | undefined | void;
+}
+/** What the `cell` snippet receives for a column whose `type` is not built in. */
+export interface FieldTableCellContext {
+    column: FieldTableColumn;
+    row: Record<string, unknown>;
+    rowIndex: number;
+    value: unknown;
+    setValue: (next: unknown) => void;
+    /** The id the cell's `<label for>` points at. Put it on your control. */
+    id: string;
+    disabled: boolean;
+    invalid: boolean;
+    describedby: string | undefined;
+}
+export type FieldTableRow = Record<string, unknown>;
+export interface Props extends InputWrapClassProps, Record<string, any> {
+    /** Bindable. The rows — a live array, no string round trip. */
+    value: FieldTableRow[];
+    /** The hidden input carrying `JSON.stringify(value)`. */
+    name: string;
+    /** One entry per cell, in order. */
+    columns: FieldTableColumn[];
+    /** "Add row" is disabled at the cap; a seeded list above it is a validation error. */
+    maxRows?: number;
+    /** At least one row. */
+    required?: boolean;
+    /** The `tr()` fallback chain used to resolve column and option labels. */
+    displayLanguage?: string | string[];
+    /** Decimal separator of number cells (input and display). Default: the browser's. */
+    locale?: string;
+    /** `auto` switches on the component's OWN width (container query). */
+    layout?: "auto" | "table" | "stacked";
+    /** `sm` 32rem, `md` 40rem, `lg` 48rem, `xl` 56rem; ignored unless `layout="auto"`. */
+    tableFrom?: "sm" | "md" | "lg" | "xl";
+    /** Move up / move down buttons per row. Default `true`. */
+    reorderable?: boolean;
+    /** What "Add row" inserts. Default: one empty value per column. */
+    newRow?: () => FieldTableRow;
+    /** Renders any column whose `type` is not built in. */
+    cell?: Snippet<[FieldTableCellContext]>;
+    addLabel?: string;
+    emptyMessage?: string;
+    /** Fired after every change. */
+    onChange?: (value: FieldTableRow[]) => void;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    style?: string;
+    t?: TranslateFn;
+}
+declare const FieldTable: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value">;
+type FieldTable = ReturnType<typeof FieldTable>;
+export default FieldTable;

package/dist/components/Input/README.md

@@ -18,6 +18,7 @@ A comprehensive form input system with multiple field components, validation sup
 | `FieldFile`       | File upload input                                              |
 | `FieldAssets`     | Asset/image upload with preview                                |
 | `FieldKeyValues`  | Key-value pairs editor with JSON serialization                 |
+| `FieldTable`      | Rows × typed columns editor (a list of records) — see below    |
 | `FieldLikeButton` | Like/favorite toggle button                                    |
 | `Fieldset`        | Fieldset with legend                                           |
 | `Honeypot`        | Hidden anti-bot trap field (server-less)                       |
@@ -886,6 +887,256 @@ field shell adds:
 The trigger follows the `--stuic-input-*` size tokens (`renderSize`), the dialog card the
 `--stuic-modal-dialog-bg` / `-text` tokens.
 
+## FieldTable
+
+A form control whose value is **a list of records with a fixed, typed set of columns** —
+a bill of materials, a price list, opening hours, contacts. Each row is a line of typed
+inputs; the bound `value` is a live array of plain row objects, no string round trip:
+
+```ts
+[
+	{ part: "M6 bolt", qty: 12, material: "steel", rohs: true, since: "2026-01-15" },
+	{ part: "Washer", qty: 24, material: "brass", rohs: false, since: "" },
+];
+```
+
+It follows the hidden-input `Field*` contract (like `FieldKeyValues` and `FieldsBuilder`):
+one `<input type="hidden" name>` carries `JSON.stringify(value)`, every inner control is
+nameless, and `required` plus the per-cell rules are enforced by the component's own
+validator. Columns are declared by data:
+
+```svelte
+<script lang="ts">
+	import {
+		FieldTable,
+		type FieldTableColumn,
+		type FieldTableRow,
+	} from "@marianmeres/stuic";
+
+	const columns: FieldTableColumn[] = [
+		{ key: "part", type: "text", label: "Part", maxLength: 60 },
+		{ key: "qty", type: "number", label: "Qty", unit: "pcs" },
+		{
+			key: "material",
+			type: "select",
+			label: "Material",
+			options: [
+				{ value: "steel", label: "Steel" },
+				{ value: "brass", label: "Brass" },
+			],
+		},
+		{ key: "rohs", type: "checkbox", label: "RoHS" },
+		{ key: "since", type: "date", label: "Since" },
+		{ key: "sheet", type: "url", label: "Datasheet" },
+	];
+
+	let bom = $state<FieldTableRow[]>([]);
+</script>
+
+<FieldTable
+	bind:value={bom}
+	name="bom"
+	label="Bill of materials"
+	{columns}
+	maxRows={100}
+/>
+```
+
+### Column shape
+
+```ts
+type FieldTableCellType = "text" | "number" | "select" | "checkbox" | "date" | "url";
+
+interface FieldTableColumn {
+	key: string; // the row-object key this cell reads and writes
+	type: FieldTableCellType | (string & {}); // a built-in type, or anything for `cell`
+	label: MaybeLocalized; // resolved through `tr()` with `displayLanguage`
+	options?: { value: string; label: MaybeLocalized }[]; // `select`
+	unit?: string; // `number`: shown in the header ("Qty (pcs)") and after the input
+	placeholder?: MaybeLocalized;
+	maxLength?: number; // `text` / `url`: the input's maxlength, re-checked by validation
+	validate?: (value: unknown, row: Record<string, unknown>) => string | undefined | void;
+}
+```
+
+### The built-in cells
+
+| type       | Control                                          | Writes                                                 | Blank   | A stored value that does not fit                                              |
+| ---------- | ------------------------------------------------ | ------------------------------------------------------ | ------- | ----------------------------------------------------------------------------- |
+| `text`     | `<input type="text">` (+ `maxlength`)            | string; trimmed on commit (`change`), not while typing | `""`    | over `maxLength` → `err_maxlength`                                            |
+| `number`   | `<input type="text" inputmode="decimal">` + unit | `number`                                               | `null`  | unparseable text is **kept as typed** and flagged `err_number`                |
+| `select`   | `<select>` with a blank first entry              | the option value                                       | `""`    | shown as its own entry, round-trips, flagged `err_select_unknown`             |
+| `checkbox` | `<input type="checkbox">`                        | boolean                                                | `false` | checked iff `=== true`; rewritten only when toggled                           |
+| `date`     | `<input type="date">`                            | `YYYY-MM-DD`                                           | `""`    | input shows empty, value untouched until a date is picked, flagged `err_date` |
+| `url`      | `<input type="text" inputmode="url">`            | string; trimmed on commit                              | `""`    | not an absolute `http:` / `https:` URL → `err_url`                            |
+
+Why no `type="number"` / `type="url"`: a number input defaults to `step=1`, so a decimal
+fails **native** constraint validation and the browser refuses the whole form's submit —
+silently, when the bubble belongs to a control the user cannot see. A url input accepts
+`mailto:` while refusing a bare domain, which matches nobody's rule. Both stay text
+inputs (with the numeric / url keypad) and are validated by the component.
+
+**Number parsing is locale-aware and never guesses.** Whitespace (incl. NBSP) is
+stripped, so `1 000` gives `1000`; `.` is always the decimal separator; `,` is one only
+when `locale` uses it (`Intl.NumberFormat(locale)`), so `4,2` under `sk` is `4.2` and
+under `en` an error — never silently read as grouping. Display uses the locale's decimal
+separator without grouping, so a Slovak user sees `4,2`. While a cell is being typed in,
+the input shows exactly the typed text; blur re-formats it. The two helpers,
+`parseCellNumber(raw, locale)` and `formatCellNumber(n, locale)`, are exported.
+
+**Unknown types** render through the `cell` snippet, which receives
+`{ column, row, rowIndex, value, setValue, id, disabled, invalid, describedby }` — put
+`id` on your control so the row's `<label for>` reaches it. Without the snippet the cell
+shows the raw value read-only and round-trips it.
+
+```svelte
+{#snippet cell(ctx)}
+	{#if ctx.column.type === "color"}
+		<input
+			type="color"
+			id={ctx.id}
+			value={ctx.value}
+			oninput={(e) => ctx.setValue(e.currentTarget.value)}
+		/>
+	{/if}
+{/snippet}
+
+<FieldTable bind:value name="items" {columns} {cell} />
+```
+
+### Value semantics
+
+- **Row objects never gain a key the component invented.** Row identity lives in an
+  internal index-aligned list, so a backend with `additionalProperties: false` on the row
+  never sees a stray id.
+- **Keys not in `columns` are preserved, untouched and unrendered.** The library never
+  silently drops data; a consumer whose backend is closed prunes at its save boundary.
+- **"Add row"** inserts `newRow?.()`, or else one empty value per column (`""` / `null` /
+  `false` as in the table), and focuses the new row's first cell.
+- **A loaded row missing a cell** renders that control empty and writes nothing until the
+  cell is edited.
+- **Change → emit.** `value` is replaced by a JSON copy of the rows, then `onChange`
+  fires, then a bubbling `change` on the hidden input. **External reassignment** is
+  detected by a JSON comparison and rebuilds the rows.
+- **A non-array `value`** (`""`, `null`, `undefined`) renders as zero rows and is not
+  rewritten on mount — a mount never dirties the host form. The first edit emits an array.
+- **A non-object entry** renders as a degraded read-only row (`unknown_row_warning`). It
+  can be moved and removed, is never edited, and round-trips.
+- **Duplicate column keys**: the first occurrence wins, later ones are skipped with a
+  `console.warn`. **An empty column label** falls back to the key.
+
+### Layout
+
+One DOM for both modes — a real `<table>` — restyled by CSS. `layout="auto"` (default)
+switches on the **component's own width** through a container query, not the viewport's:
+a 480px table inside a side panel of a 1440px window stacks. `tableFrom` picks the
+threshold on a fixed scale (`sm` 32rem, `md` 40rem (default), `lg` 48rem, `xl` 56rem);
+`layout="table"` / `"stacked"` are static.
+
+- **table**: `<th scope="col">` headings (with the unit), one row per record, an actions
+  cell (move up / down, remove). Each cell type has a `min-width` token; the table
+  scrolls horizontally inside its own wrapper instead of squashing inputs.
+- **stacked**: each row is a card titled "Row N" with the actions on top, each cell a
+  label + control line.
+
+Every cell carries a real `<label for>` in both modes — "Qty (pcs), row 3" — visually
+hidden in table mode (the heading is visible there), visible and clickable in stacked
+mode. Crossing the breakpoint keeps focus and caret, because nothing remounts.
+
+### Validation and the host `validate()` rule
+
+The validator runs, in order: `required` with zero rows (`err_rows_required`), `maxRows`
+exceeded (`err_max_rows` — a seeded list above the cap is an error, never truncated),
+the first invalid cell in row-major order (`err_cell`: "Row 3, Qty: not a number" —
+built-in rule, then `column.maxLength`, then `column.validate`), then your
+`validate.customValidator`. Each invalid cell is `aria-invalid` with its message inline
+once `validate()` has run or once that cell was blurred; `validate()` scrolls to and
+focuses the first offender.
+
+No cell control carries `required`, `pattern`, `min` / `max` or a validating `type`, so
+a cell scrolled out of view can never make the browser refuse a submit without a
+message. The flip side — the rule for every hidden-input `Field*` — is that **a host that
+submits natively must call `validate()`** (or use `use:onSubmitValidityCheck`) before
+saving.
+
+### Props
+
+| Prop                       | Type                               | Default            | Description                                                       |
+| -------------------------- | ---------------------------------- | ------------------ | ----------------------------------------------------------------- |
+| `value`                    | `FieldTableRow[]`                  | required, bindable | The rows                                                          |
+| `name`                     | `string`                           | required           | The hidden input's name                                           |
+| `columns`                  | `FieldTableColumn[]`               | required           | One entry per cell, in order                                      |
+| `maxRows`                  | `number`                           | -                  | Cap; shows an `n / max` counter                                   |
+| `required`                 | `boolean`                          | `false`            | At least one row                                                  |
+| `displayLanguage`          | `string \| string[]`               | -                  | `tr()` fallback chain for column / option labels                  |
+| `locale`                   | `string`                           | browser            | Decimal separator of number cells                                 |
+| `layout`                   | `"auto" \| "table" \| "stacked"`   | `"auto"`           | See Layout                                                        |
+| `tableFrom`                | `"sm" \| "md" \| "lg" \| "xl"`     | `"md"`             | Container width at which `auto` renders the table                 |
+| `reorderable`              | `boolean`                          | `true`             | Move up / down buttons                                            |
+| `newRow`                   | `() => FieldTableRow`              | per-column empties | What "Add row" inserts                                            |
+| `cell`                     | `Snippet<[FieldTableCellContext]>` | -                  | Renders columns whose `type` is not built in                      |
+| `addLabel`, `emptyMessage` | `string`                           | `t(...)`           | Text overrides                                                    |
+| `onChange`                 | `(value: FieldTableRow[]) => void` | -                  | After every change                                                |
+| `t`                        | `TranslateFn`                      | English            | See i18n                                                          |
+| `renderSize`               | `"sm" \| "md" \| "lg"`             | `"sm"`             | Control size (the cells follow the `--stuic-input-*` size tokens) |
+
+Plus the usual field props: `label`, `description`, `labelAfter`, `below`, `id`,
+`tabindex`, `disabled`, `validate`, `labelLeft*`, `style`, `class`, and the shared
+`InputWrapClassProps`. The imperative API is the standard one: `validate()`,
+`clearValidation()`, `getValidation()`, `focus()` (first cell, or "Add row"),
+`scrollIntoView()`.
+
+### i18n
+
+All UI texts go through `t`. English is built in; Slovak ships bundled and opt-in
+(importing it is what pulls it into your bundle):
+
+```svelte
+<script>
+	import {
+		FieldTable,
+		createFieldTableT,
+		FIELD_TABLE_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createFieldTableT(FIELD_TABLE_MESSAGES_SK);
+</script>
+
+<FieldTable bind:value name="items" {columns} displayLanguage="sk" locale="sk" {t} />
+```
+
+`createFieldTableT(messages, fallbackMessages?)` falls back to `FIELD_TABLE_MESSAGES_EN`
+for any key the catalog does not define, so a partial catalog is fine and a raw key is
+never rendered. Column and option labels are consumer data: pass them as
+`{ en: "...", sk: "..." }` records and set `displayLanguage`.
+
+### Accessibility
+
+- Every cell has an accessible name of the form "Column, row N", in both layouts.
+- The actions are real buttons ("Move row 3 up", "Remove row 3"); a move keeps focus on
+  the moved row's button, a remove focuses the row now at that index (else the previous
+  one, else "Add row"); add, move and remove are announced through a polite live region.
+- "Enter" in a cell submits the host form, like any `FieldInput` in it — there is no
+  "Enter adds a row".
+
+### CSS Variables
+
+Cell controls reuse the `--stuic-input-*` colour and size tokens, so a themed `FieldInput`
+and a themed cell look alike. The table adds:
+
+| Variable                                                             | Default                          | Description                               |
+| -------------------------------------------------------------------- | -------------------------------- | ----------------------------------------- |
+| `--stuic-field-table-border-color`                                   | `--stuic-color-border`           | Stacked card border                       |
+| `--stuic-field-table-header-bg`                                      | `--stuic-color-muted`            | `<th>` background                         |
+| `--stuic-field-table-header-text`                                    | `--stuic-color-muted-foreground` | `<th>` and stacked cell-label color       |
+| `--stuic-field-table-row-divider-color`                              | `--stuic-color-border`           | Line between rows / under a card's title  |
+| `--stuic-field-table-cell-padding-x` / `-y`                          | `0.375rem` / `0.25rem`           | Cell padding in table mode                |
+| `--stuic-field-table-card-bg`                                        | `transparent`                    | Stacked card background                   |
+| `--stuic-field-table-card-gap`                                       | `0.5rem`                         | Gap between stacked cards                 |
+| `--stuic-field-table-card-radius`                                    | `--stuic-radius`                 | Stacked card radius (usage-site fallback) |
+| `--stuic-field-table-invalid-color`                                  | `--stuic-input-accent-error`     | Invalid cell border + inline message      |
+| `--stuic-field-table-unit-text`                                      | `--stuic-color-muted-foreground` | The unit suffix                           |
+| `--stuic-field-table-col-min-{text,number,select,checkbox,date,url}` | `10 / 6 / 8 / 3 / 9.5 / 12rem`   | Minimum cell width per type in table mode |
+
 ## Honeypot & TimeTrap (anti-bot primitives)
 
 Two small, **client-side, server-less** primitives for cheap spam mitigation. They produce **signals** — they do not block anything. Read the signal, then enforce on your server (the only place enforcement is trustworthy). Both are reusable on any form; [`ContactUsForm`](../ContactUsForm/README.md) composes them by default.

package/dist/components/Input/field-table-i18n-sk.d.ts

@@ -0,0 +1,21 @@
+import type { FieldTableMessages } from "./field-table-i18n.js";
+/**
+ * Slovak message catalog for `FieldTable`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually imported
+ * (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldTable,
+ *     createFieldTableT,
+ *     FIELD_TABLE_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldTableT(FIELD_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldTable name="items" bind:value {columns} locale="sk" {t} />
+ * ```
+ */
+export declare const FIELD_TABLE_MESSAGES_SK: FieldTableMessages;

package/dist/components/Input/field-table-i18n-sk.js

@@ -0,0 +1,41 @@
+/**
+ * Slovak message catalog for `FieldTable`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually imported
+ * (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldTable,
+ *     createFieldTableT,
+ *     FIELD_TABLE_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldTableT(FIELD_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldTable name="items" bind:value {columns} locale="sk" {t} />
+ * ```
+ */
+export const FIELD_TABLE_MESSAGES_SK = {
+    field_req_att: "Toto pole vyžaduje pozornosť. Skontrolujte ho a skúste to znova.",
+    add_row: "Pridať riadok",
+    empty_message: "Zatiaľ žiadne riadky",
+    row_label: "Riadok {{row}}",
+    actions_label: "Akcie",
+    move_row_up: "Posunúť riadok {{row}} vyššie",
+    move_row_down: "Posunúť riadok {{row}} nižšie",
+    remove_row: "Odstrániť riadok {{row}}",
+    added_row: "Pridaný riadok {{row}}",
+    removed_row: "Odstránený riadok {{row}}",
+    moved_row: "Riadok presunutý na pozíciu {{position}} z {{total}}",
+    unknown_row_warning: "Tento riadok nie je záznam, ktorý vie tento editor zobraziť. Zostáva nezmenený.",
+    err_rows_required: "Vyžaduje sa aspoň jeden riadok",
+    err_max_rows: "Maximálny počet riadkov je {{max}}",
+    err_cell: "Riadok {{row}}, {{column}}: {{message}}",
+    err_number: "nie je číslo",
+    err_url: "musí byť webová adresa začínajúca na http:// alebo https://",
+    err_date: "nie je platný dátum",
+    err_select_unknown: "„{{value}}“ nie je medzi možnosťami",
+    err_maxlength: "príliš dlhé (max. {{max}} znakov)",
+};

package/dist/components/Input/field-table-i18n.d.ts

@@ -0,0 +1,60 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `FieldTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{row}}`, `{{max}}`, ...).
+ */
+export declare const FIELD_TABLE_MESSAGES_EN: {
+    field_req_att: string;
+    add_row: string;
+    empty_message: string;
+    row_label: string;
+    actions_label: string;
+    move_row_up: string;
+    move_row_down: string;
+    remove_row: string;
+    added_row: string;
+    removed_row: string;
+    moved_row: string;
+    unknown_row_warning: string;
+    err_rows_required: string;
+    err_max_rows: string;
+    err_cell: string;
+    err_number: string;
+    err_url: string;
+    err_date: string;
+    err_select_unknown: string;
+    err_maxlength: string;
+};
+/** Every message key `FieldTable` may look up. */
+export type FieldTableMessageKey = keyof typeof FIELD_TABLE_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type FieldTableMessages = Record<FieldTableMessageKey, string>;
+/**
+ * Builds the `t` prop of `FieldTable` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldTable,
+ *     createFieldTableT,
+ *     FIELD_TABLE_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *
+ *   // full locale, plus a field specific tweak
+ *   const t = createFieldTableT({
+ *     ...FIELD_TABLE_MESSAGES_SK,
+ *     add_row: "Pridať položku",
+ *   });
+ * </script>
+ *
+ * <FieldTable name="items" bind:value {columns} {t} />
+ * ```
+ */
+export declare function createFieldTableT(messages: Partial<FieldTableMessages> | Record<string, string>, fallbackMessages?: Partial<FieldTableMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/Input/field-table-i18n.js

@@ -0,0 +1,66 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `FieldTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{row}}`, `{{max}}`, ...).
+ */
+export const FIELD_TABLE_MESSAGES_EN = {
+    field_req_att: "This field requires attention. Please review and try again.",
+    add_row: "Add row",
+    empty_message: "No rows yet",
+    row_label: "Row {{row}}",
+    actions_label: "Actions",
+    move_row_up: "Move row {{row}} up",
+    move_row_down: "Move row {{row}} down",
+    remove_row: "Remove row {{row}}",
+    added_row: "Row {{row}} added",
+    removed_row: "Row {{row}} removed",
+    moved_row: "Row moved to position {{position}} of {{total}}",
+    unknown_row_warning: "This row is not a record this editor can show. It is kept unchanged.",
+    err_rows_required: "At least one row is required",
+    err_max_rows: "Maximum number of rows is {{max}}",
+    err_cell: "Row {{row}}, {{column}}: {{message}}",
+    err_number: "not a number",
+    err_url: "must be a web address starting with http:// or https://",
+    err_date: "not a valid date",
+    err_select_unknown: "“{{value}}” is not one of the choices",
+    err_maxlength: "too long (max {{max}} characters)",
+};
+/**
+ * Builds the `t` prop of `FieldTable` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldTable,
+ *     createFieldTableT,
+ *     FIELD_TABLE_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *
+ *   // full locale, plus a field specific tweak
+ *   const t = createFieldTableT({
+ *     ...FIELD_TABLE_MESSAGES_SK,
+ *     add_row: "Pridať položku",
+ *   });
+ * </script>
+ *
+ * <FieldTable name="items" bind:value {columns} {t} />
+ * ```
+ */
+export function createFieldTableT(messages, fallbackMessages = FIELD_TABLE_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values)
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createFieldTableT(FIELD_TABLE_MESSAGES_EN);

package/dist/components/Input/field-table-number.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Locale-aware number parsing and formatting for `FieldTable`'s `number` cells.
+ *
+ * Pure functions (no DOM), so they can be unit-tested in the fast node project.
+ * The rule they implement is "never guess": a typed value is either read as one
+ * unambiguous number, or rejected.
+ */
+/** A parse outcome — `null` is "blank" (an empty cell), never an error. */
+export type ParsedCellNumber = {
+    ok: true;
+    value: number | null;
+} | {
+    ok: false;
+};
+/**
+ * The decimal separator `Intl` uses for `locale` (`"."` for `en`, `","` for `sk`).
+ * `undefined` means the runtime's default locale. An unknown locale falls back to `"."`.
+ */
+export declare function decimalSeparator(locale?: string): string;
+/**
+ * Parses what a user typed into a number cell.
+ *
+ * - Whitespace anywhere (including NBSP / narrow NBSP) is stripped: `"1 000"` → `1000`.
+ * - `"."` is always accepted as the decimal separator.
+ * - `","` is accepted as the decimal separator **only** when `locale` uses it. Under an
+ *   English locale `"1,000"` is rejected — it is never silently read as a thousands group.
+ * - Two separators (`"1.2.3"`, `"1,2,3"`, `"1,000.5"`) are rejected.
+ * - A Unicode minus (`"−5"`, what `Intl` formats in some locales) reads as a minus sign.
+ * - Blank is `{ ok: true, value: null }`.
+ *
+ * @example
+ * ```ts
+ * parseCellNumber("4.2", "sk");  // { ok: true, value: 4.2 }
+ * parseCellNumber("4,2", "sk");  // { ok: true, value: 4.2 }
+ * parseCellNumber("4,2", "en");  // { ok: false }
+ * parseCellNumber("1 000", "en"); // { ok: true, value: 1000 }
+ * parseCellNumber("", "en");     // { ok: true, value: null }
+ * ```
+ */
+export declare function parseCellNumber(raw: string, locale?: string): ParsedCellNumber;
+/**
+ * Formats a number for display in a number cell: no grouping, up to 20 fraction
+ * digits (so `4.2` is never rounded away), Latin digits, the locale's decimal
+ * separator. A Slovak user sees `4,2` for `4.2`; an English one `4.2`.
+ *
+ * A non-finite input yields `""`.
+ */
+export declare function formatCellNumber(n: number, locale?: string): string;