@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/Table/Misc/ToolboxPanelModal.svelte

@@ -6,6 +6,7 @@
 >import Checkbox from "../../Checkbox.svelte";
 import DesktopModal from "../../DesktopModal.svelte";
 import { Size } from "../../../Types/Internal/Size.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { getContext } from "svelte";
 import { TableContext } from "../Types/Context/TableContext.svelte.js";
 let { onclose } = $props();
@@ -31,35 +32,35 @@ const onCommaSeparatedCopyChange = (e) => {
 </script>
 
 <DesktopModal
-	headerLabel="Table Settings"
+	headerLabel={i18n['scoria.label.table_settings']()}
 	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
 >
 	<div class="flex">
 		<div class="column-panel">
 			<Checkbox
-				label="Compact"
+				label={i18n['scoria.label.compact']()}
 				size={Size.MediumSmall}
 				id={`is-compact-${tableContext.tableName}-modal`}
 				value={tableContext.isCompact}
 				onchange={onCompactChange}
 			/>
 			<Checkbox
-				label="Single Click Editing"
+				label={i18n['scoria.label.single_click_editing']()}
 				size={Size.MediumSmall}
 				id={`single-click-editing-${tableContext.tableName}-modal`}
 				value={tableContext.singleClickEditing}
 				onchange={onSingleClickChange}
 			/>
 			<Checkbox
-				label="Alternate Row Colours"
+				label={i18n['scoria.label.alternate_row_colours']()}
 				size={Size.MediumSmall}
 				id={`alternate-row-colours-${tableContext.tableName}-modal`}
 				value={tableContext.alternateRowColours}
 				onchange={onAlternateRowColoursChange}
 			/>
 			<Checkbox
-				label="Change Colour on Hover"
+				label={i18n['scoria.label.change_colour_hover']()}
 				size={Size.MediumSmall}
 				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
 				value={tableContext.changeColourOnHover}
@@ -67,14 +68,14 @@ const onCommaSeparatedCopyChange = (e) => {
 			/>
 			{#if tableContext.allowCopy}
 				<Checkbox
-					label="Include Headers When Copying"
+					label={i18n['scoria.label.include_headers_copying']()}
 					size={Size.MediumSmall}
 					id={`copy-with-headers-${tableContext.tableName}-modal`}
 					value={tableContext.copyWithHeaders}
 					onchange={onCopyWithHeadersChange}
 				/>
 				<Checkbox
-					label="Copy as Comma Separated Values"
+					label={i18n['scoria.label.copy_as_csv']()}
 					size={Size.MediumSmall}
 					id={`comma-separated-copy-${tableContext.tableName}-modal`}
 					value={tableContext.commaSeparatedCopy}

package/dist/Components/Table/Misc/UpdateViewOptionsModal.svelte

@@ -9,6 +9,7 @@ import InfoAlert from "../../InfoAlert.svelte";
 import SingleSelect from "../../SingleSelect.svelte";
 import TextInput from "../../TextInput.svelte";
 import { cssLength } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { ColourSet } from "../../../scss/colours.js";
 import { Size } from "../../../Types/Internal/Size.js";
 import { getContext, onMount } from "svelte";
@@ -32,10 +33,10 @@ let errorMessage = $state(null);
 // `true` while the PATCH is in flight, disables the footer buttons.
 let saving = $state(false);
 const visibilityOptions = [{
-	label: "Private — only owner and explicit subscribers",
+	label: i18n["scoria.label.visibility_private"](),
 	value: "private"
 }, {
-	label: "Public — anyone with access to this table can subscribe",
+	label: i18n["scoria.label.visibility_public"](),
 	value: "public"
 }];
 const selectedVisibility = $derived(visibilityOptions.find((o) => o.value === visibility) ?? visibilityOptions[0]);
@@ -51,7 +52,7 @@ async function save() {
 		return;
 	}
 	if (!isValidName) {
-		errorMessage = `Name cannot be empty.`;
+		errorMessage = i18n["scoria.message.name_required"]();
 		return;
 	}
 	errorMessage = null;
@@ -67,7 +68,10 @@ async function save() {
 		onclose();
 	} catch (e) {
 		console.error("[UpdateViewOptionsModal] save failed:", e);
-		errorMessage = e instanceof Error ? `Could not update options. (${e.message})` : "Could not update options.";
+		errorMessage = e instanceof Error ? i18n["scoria.message.error_detail"]({
+			message: i18n["scoria.message.update_options_failed"](),
+			detail: e.message
+		}) : i18n["scoria.message.update_options_failed"]();
 	} finally {
 		saving = false;
 	}
@@ -75,8 +79,10 @@ async function save() {
 </script>
 
 <DesktopModal
-	headerLabel={`Update Options - "${view.name}"`}
-	headerSubtitle={`Rename and change sharing for this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
+	headerLabel={i18n['scoria.label.update_options_header']({ name: view.name })}
+	headerSubtitle={view.kind === 'filter'
+		? i18n['scoria.text.update_filter_subtitle']()
+		: i18n['scoria.text.update_layout_subtitle']()}
 	onclose={() => {
 		if (!saving) {
 			onclose();
@@ -86,7 +92,7 @@ async function save() {
 	minWidth={cssLength('32rem')}
 	buttons={[
 		{
-			label: 'Cancel',
+			label: i18n['scoria.action.cancel'](),
 			callback: () => {
 				if (!saving) {
 					onclose();
@@ -95,7 +101,7 @@ async function save() {
 			disabled: saving,
 		},
 		{
-			label: saving ? 'Saving…' : 'Save',
+			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
 			callback: () => {
 				void save();
 			},
@@ -119,20 +125,22 @@ async function save() {
 		{/if}
 
 		<InfoAlert>
-			Changes apply to every user who has access to this {view.kind === 'filter'
-				? 'filter'
-				: 'layout'}. Making it public allows any user with access to the table to subscribe.
+			{view.kind === 'filter'
+				? i18n['scoria.text.changes_apply_filter']()
+				: i18n['scoria.text.changes_apply_layout']()}
 		</InfoAlert>
 
 		<div class="field">
 			<label
 				class="field-label"
-				for="update-view-name">Name</label
+				for="update-view-name">{i18n['scoria.label.name']()}</label
 			>
 			<TextInput
 				id="update-view-name"
 				bind:value={name}
-				placeholder={`${view.kind === 'filter' ? 'Filter' : 'Layout'} name`}
+				placeholder={view.kind === 'filter'
+					? i18n['scoria.label.filter_name_placeholder']()
+					: i18n['scoria.label.layout_name_placeholder']()}
 				required
 				invalid={!isValidName}
 			/>
@@ -141,11 +149,12 @@ async function save() {
 		<div class="field">
 			<label
 				class="field-label"
-				for="update-view-visibility">Visibility</label
+				for="update-view-visibility">{i18n['scoria.label.visibility']()}</label
 			>
 			<SingleSelect
 				inputId="update-view-visibility"
 				name="Visibility"
+				placeholder={i18n['scoria.label.select_visibility']()}
 				options={visibilityOptions}
 				labelProp="label"
 				valueProp="value"

package/dist/Components/Table/Misc/numberDateFilterTypes.d.ts

@@ -1,8 +1,11 @@
 import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
 /**
- * Static set of filter-mode `SelectOption`s offered for numeric and date
- * columns. Frozen at runtime so consumers cannot mutate the shared
- * module-level array.
+ * Filter-mode `SelectOption`s offered for numeric and date columns.
+ *
+ * A function, not a frozen module-level array: the labels have to resolve while
+ * a component renders, or the first request's locale is served to every later
+ * one. Callers should hold the result in a `$derived` rather than calling it in
+ * markup.
  */
-export declare const numberDateFilterTypes: Array<SelectOption<NumberDateFilterMode>>;
+export declare function numberDateFilterTypes(): Array<SelectOption<NumberDateFilterMode>>;

package/dist/Components/Table/Misc/numberDateFilterTypes.js

@@ -1,18 +1,30 @@
+import { m as i18n } from '../../../paraglide/messages.js';
 import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
 /**
- * Static set of filter-mode `SelectOption`s offered for numeric and date
- * columns. Frozen at runtime so consumers cannot mutate the shared
- * module-level array.
+ * Filter-mode `SelectOption`s offered for numeric and date columns.
+ *
+ * A function, not a frozen module-level array: the labels have to resolve while
+ * a component renders, or the first request's locale is served to every later
+ * one. Callers should hold the result in a `$derived` rather than calling it in
+ * markup.
  */
-export const numberDateFilterTypes = Object.freeze([
-    { value: NumberDateFilterMode.Equals, label: 'Equals' },
-    { value: NumberDateFilterMode.NotEquals, label: 'Does not equal' },
-    { value: NumberDateFilterMode.LessThan, label: 'Less Than' },
-    { value: NumberDateFilterMode.LessThanOrEqual, label: 'Less than or equal to' },
-    { value: NumberDateFilterMode.GreaterThan, label: 'Greater than' },
-    { value: NumberDateFilterMode.GreaterThanOrEqual, label: 'Greater than or equal to' },
-    { value: NumberDateFilterMode.Between, label: 'Between' },
-    { value: NumberDateFilterMode.In, label: 'In' },
-    { value: NumberDateFilterMode.NotIn, label: 'Not in' },
-    { value: NumberDateFilterMode.null, label: 'Is null' },
-]);
+export function numberDateFilterTypes() {
+    return [
+        { value: NumberDateFilterMode.Equals, label: i18n['scoria.label.operator_equals']() },
+        { value: NumberDateFilterMode.NotEquals, label: i18n['scoria.label.operator_not_equals']() },
+        { value: NumberDateFilterMode.LessThan, label: i18n['scoria.label.operator_less_than']() },
+        {
+            value: NumberDateFilterMode.LessThanOrEqual,
+            label: i18n['scoria.label.operator_less_equal'](),
+        },
+        { value: NumberDateFilterMode.GreaterThan, label: i18n['scoria.label.operator_greater_than']() },
+        {
+            value: NumberDateFilterMode.GreaterThanOrEqual,
+            label: i18n['scoria.label.operator_greater_equal'](),
+        },
+        { value: NumberDateFilterMode.Between, label: i18n['scoria.label.operator_between']() },
+        { value: NumberDateFilterMode.In, label: i18n['scoria.label.operator_in']() },
+        { value: NumberDateFilterMode.NotIn, label: i18n['scoria.label.operator_not_in']() },
+        { value: NumberDateFilterMode.null, label: i18n['scoria.label.operator_is_null']() },
+    ];
+}

package/dist/Components/Table/Misc/stringFilterTypes.d.ts

@@ -1,7 +1,11 @@
 import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
 /**
- * Static set of filter-mode `SelectOption`s offered for string columns.
- * Frozen at runtime so consumers cannot mutate the shared module-level array.
+ * Filter-mode `SelectOption`s offered for string columns.
+ *
+ * A function, not a frozen module-level array: the labels have to resolve while
+ * a component renders, or the first request's locale is served to every later
+ * one. Callers should hold the result in a `$derived` rather than calling it in
+ * markup.
  */
-export declare const stringFilterTypes: Array<SelectOption<StringFilterMode>>;
+export declare function stringFilterTypes(): Array<SelectOption<StringFilterMode>>;

package/dist/Components/Table/Misc/stringFilterTypes.js

@@ -1,19 +1,29 @@
+import { m as i18n } from '../../../paraglide/messages.js';
 import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
 /**
- * Static set of filter-mode `SelectOption`s offered for string columns.
- * Frozen at runtime so consumers cannot mutate the shared module-level array.
+ * Filter-mode `SelectOption`s offered for string columns.
+ *
+ * A function, not a frozen module-level array: the labels have to resolve while
+ * a component renders, or the first request's locale is served to every later
+ * one. Callers should hold the result in a `$derived` rather than calling it in
+ * markup.
  */
-export const stringFilterTypes = Object.freeze([
-    { value: StringFilterMode.Equals, label: 'Equals' },
-    { value: StringFilterMode.NotEquals, label: 'Does not equal' },
-    { value: StringFilterMode.Contains, label: 'Contains' },
-    { value: StringFilterMode.NotContains, label: 'Does not contain' },
-    { value: StringFilterMode.StartsWith, label: 'Starts With' },
-    { value: StringFilterMode.NotStartsWith, label: 'Does not start with' },
-    { value: StringFilterMode.EndsWith, label: 'Ends With' },
-    { value: StringFilterMode.NotEndsWith, label: 'Does not end with' },
-    { value: StringFilterMode.In, label: 'In' },
-    { value: StringFilterMode.NotIn, label: 'Not in' },
-    { value: StringFilterMode.Empty, label: 'Empty' },
-    { value: StringFilterMode.null, label: 'Is null' },
-]);
+export function stringFilterTypes() {
+    return [
+        { value: StringFilterMode.Equals, label: i18n['scoria.label.operator_equals']() },
+        { value: StringFilterMode.NotEquals, label: i18n['scoria.label.operator_not_equals']() },
+        { value: StringFilterMode.Contains, label: i18n['scoria.label.operator_contains']() },
+        { value: StringFilterMode.NotContains, label: i18n['scoria.label.operator_not_contains']() },
+        { value: StringFilterMode.StartsWith, label: i18n['scoria.label.operator_starts_with']() },
+        {
+            value: StringFilterMode.NotStartsWith,
+            label: i18n['scoria.label.operator_not_starts_with'](),
+        },
+        { value: StringFilterMode.EndsWith, label: i18n['scoria.label.operator_ends_with']() },
+        { value: StringFilterMode.NotEndsWith, label: i18n['scoria.label.operator_not_ends_with']() },
+        { value: StringFilterMode.In, label: i18n['scoria.label.operator_in']() },
+        { value: StringFilterMode.NotIn, label: i18n['scoria.label.operator_not_in']() },
+        { value: StringFilterMode.Empty, label: i18n['scoria.label.operator_empty']() },
+        { value: StringFilterMode.null, label: i18n['scoria.label.operator_is_null']() },
+    ];
+}

package/dist/Components/Table/NestedTable.svelte

@@ -21,6 +21,10 @@ import { ToolbarPosition } from "./Types/Toolbar/ToolbarPosition.js";
 const DEFAULT_NESTED_TABLE_OPTIONS = Object.freeze({
 	allowCopy: false,
 	enableResize: false,
+	// Nested-table columns can be reordered and pinned by default like
+	// the outer table. Callers opt out per inner table via the
+	// `inner.allowReorder` option on `col.expand` (or the matching
+	// `allowReorder` on top-level `createTable`).
 	allowColumnReordering: true,
 	allowQuickFiltering: true,
 	allowAdvancedFiltering: true,

package/dist/Components/Table/Table.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	module
->import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte";
+>import { m as i18n } from "../../paraglide/messages.js";
+import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte";
 import { cssLength, devCatch, refWrapper } from "../../Helpers/Helpers.svelte";
 import { getContext, onMount, setContext, tick, untrack } from "svelte";
 import LoadingOverlay from "../LoadingOverlay.svelte";
@@ -157,14 +158,14 @@ function openContextMenu(e) {
 			callback: () => {
 				tableContext.copyDataToClipboard().catch(devCatch);
 			},
-			text: "Copy Selection"
+			text: i18n["scoria.action.copy_selection"]()
 		}];
 		if (tableContext.hasHighlightedItems) {
 			options.push({
 				callback: () => {
 					tableContext.copyHighlightedRowsToClipboard().catch(devCatch);
 				},
-				text: "Copy Highlighted Rows"
+				text: i18n["scoria.action.copy_highlighted_rows"]()
 			});
 		}
 		_openContextMenu(e, options).catch(devCatch);
@@ -294,13 +295,13 @@ const colsTemplate = $derived.by(() => {
 	}
 	return tracks.join(" ");
 });
-// Total rendered width of the pinned-left and pinned-right column
+// Total rendered width of the pinned-start and pinned-end column
 // stacks. Driven by `_columnRenderedWidths` so the values track actual
 // layout rather than the declared `columnDef.width`. Exposed to CSS
-// as `--pinned-left` / `--pinned-right`; the SCSS uses these in
-// `scroll-padding-{left,right}` so `scrollIntoView` (called on keyboard
-// nav and focus restore) keeps the focused cell out from behind the
-// pinned columns. The 20px highlight column is always pinned-left.
+// as `--pinned-start` / `--pinned-end`; the SCSS uses these in
+// `scroll-padding-{inline-start,inline-end}` so `scrollIntoView` (called on
+// keyboard nav and focus restore) keeps the focused cell out from behind the
+// pinned columns. The 20px highlight column is always pinned-start.
 const totalPinnedLeftWidth = $derived.by(() => {
 	void tableContext._columnRenderedWidths.size;
 	let total = 20;
@@ -520,7 +521,7 @@ $effect(() => {
 		class:compact={tableContext.isCompact}
 		class:quick-filtering={tableContext.showQuickFiltering}
 		onkeydown={tableContext.handleTdKeydown}
-		style="--pinned-left: {totalPinnedLeftWidth}px; --pinned-right: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
+		style="--pinned-start: {totalPinnedLeftWidth}px; --pinned-end: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
 	>
 		<div
 			class="flex_table"
@@ -582,26 +583,26 @@ div.grid .sidebar-wrapper-left {
   grid-area: sidebar-left;
 }
 div.grid .sidebar-wrapper-left:not(:empty) {
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 div.grid .sidebar-wrapper-right {
   grid-area: sidebar-right;
 }
 div.grid .sidebar-wrapper-right:not(:empty) {
-  margin-left: 1rem;
+  margin-inline-start: 1rem;
 }
 div.grid .footer {
   grid-area: footer;
   border: solid 2px #cbd4da;
   border-top: none;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
 }
 div.grid .datatable {
   border: solid 2px #cbd4da;
   border-bottom: none;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
 }
 
 div.resizer {
@@ -681,8 +682,8 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   flex-grow: 1;
   --progress-bar-radius: 18px;
   scroll-padding-top: var(--sticky-top-height, 0px);
-  scroll-padding-left: var(--pinned-left, 0px);
-  scroll-padding-right: var(--pinned-right, 0px);
+  scroll-padding-inline-start: var(--pinned-start, 0px);
+  scroll-padding-inline-end: var(--pinned-end, 0px);
 }
 .datatable.quick-filtering {
   --quick-filter-height: 3rem;
@@ -705,7 +706,7 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   flex-flow: column nowrap;
   flex-grow: 2;
   width: 100%;
-  text-align: left;
+  text-align: start;
   min-width: max-content;
   isolation: isolate;
 }</style>

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js

@@ -1,3 +1,4 @@
+import { m as i18n } from '../../../../../../paraglide/messages.js';
 import { generateUUID, syntheticColumnId } from '../../../../../../Helpers/Helpers.svelte.js';
 import { ColumnType } from '../../ColumnType.js';
 import { ColumnDef } from '../ColumnDef.svelte.js';
@@ -15,7 +16,7 @@ export class ActionsDef extends ColumnDef {
     constructor(props) {
         super({
             id: props.id ?? syntheticColumnId(`actions-${generateUUID()}`),
-            header: props.header ?? 'Actions',
+            header: props.header ?? i18n['scoria.label.actions'](),
             allowSorting: false,
             allowFiltering: false,
         });

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js

@@ -1,3 +1,4 @@
+import { m as i18n } from '../../../../../../paraglide/messages.js';
 import { generateUUID, syntheticColumnId } from '../../../../../../Helpers/Helpers.svelte.js';
 import { ColumnType } from '../../ColumnType.js';
 import { ColumnDef } from '../ColumnDef.svelte.js';
@@ -30,7 +31,7 @@ export class RowSelectionDef extends ColumnDef {
             : propsOrIsSelectable;
         super({
             id: props.id ?? syntheticColumnId(`is-selectable-${generateUUID()}`),
-            header: 'Row Selected',
+            header: i18n['scoria.label.row_selected'](),
             allowSorting: false,
             allowFiltering: false,
             isValid: props.isValid,

package/dist/Components/Table/Types/Context/ClipboardState.svelte.js

@@ -1,3 +1,4 @@
+import { m as i18n } from '../../../../paraglide/messages.js';
 import { dev } from '$app/environment';
 import { devCatch } from '../../../../Helpers/Helpers.svelte.js';
 import { encapsulate, escapeForSpreadsheet } from '../../clipboardEscape.js';
@@ -77,7 +78,7 @@ export class ClipboardState {
         // rule below is a false-positive in that environment.
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
-            alert('cannot copy in an insecure connection');
+            alert(i18n['scoria.message.cannot_copy_insecure']());
             return;
         }
         return this._performRowCopy(await this.getHighlightedRowData());
@@ -86,7 +87,7 @@ export class ClipboardState {
     copyDataToClipboard = async () => {
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
-            alert('cannot copy in an insecure connection');
+            alert(i18n['scoria.message.cannot_copy_insecure']());
             return;
         }
         return this._performRowCopy(await this.getFocusElementData());

package/dist/Components/Table/Types/Context/ViewState.svelte.js

@@ -1,3 +1,4 @@
+import { m as i18n } from '../../../../paraglide/messages.js';
 /**
  * Per-kind slice of the view-selection state machine - the mutable state
  * for *one* `DatatableViewKind` (`'layout'` or `'filter'`):
@@ -110,9 +111,11 @@ export class ViewState {
      */
     static deriveDropdownLabel(active, dirty) {
         if (active.kind === 'default') {
-            return dirty ? 'Custom (unsaved)' : 'Default';
+            return dirty
+                ? i18n['scoria.label.custom_unsaved']()
+                : i18n['scoria.label.default_view']();
         }
-        return dirty ? `${active.name} (unsaved)` : active.name;
+        return dirty ? i18n['scoria.label.name_unsaved']({ name: active.name }) : active.name;
     }
     /** Resolve the mutable slice for a `DatatableViewKind`. */
     slice(kind) {

package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts

@@ -29,6 +29,12 @@ import type { SortingState } from './SortingState.js';
 export interface IDataRepository<T extends object> {
     paginationState: PaginationState;
     setPageSize: (size: number) => void;
+    /**
+     * Applies the table's configured `defaultPageSize` unless a persisted
+     * records-per-page choice was restored (that always wins). Optional so
+     * custom repositories need not implement it.
+     */
+    applyDefaultPageSize?: (size: number) => void;
     setPage: (page: number) => void;
     nextPage: () => void;
     prevPage: () => void;

package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts

@@ -52,6 +52,14 @@ export declare abstract class TableDataRepository<T extends object, out FilterVa
     abstract pageStartIndex: number;
     abstract pageEndIndexExclusive: number;
     constructor(tableName: string, getUserId: () => string | undefined);
+    /** True when a persisted records-per-page choice was restored on init. */
+    private restoredPageSize;
+    /**
+     * Applies the table's configured default page size, unless the user's own
+     * persisted choice was restored (that always wins). Does not write through
+     * to localStorage: a default is not a choice.
+     */
+    applyDefaultPageSize(size: number): void;
     private _paginationState;
     /** Current page index plus the configured page size. */
     get paginationState(): ReadonlyPaginationState;

package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.js

@@ -26,10 +26,24 @@ export class TableDataRepository {
                 const parsed = Number.parseInt(saved, 10);
                 if (Number.isFinite(parsed) && parsed > 0) {
                     this._paginationState = { pageIndex: 0, pageSize: parsed };
+                    this.restoredPageSize = true;
                 }
             }
         }
     }
+    /** True when a persisted records-per-page choice was restored on init. */
+    restoredPageSize = false;
+    /**
+     * Applies the table's configured default page size, unless the user's own
+     * persisted choice was restored (that always wins). Does not write through
+     * to localStorage: a default is not a choice.
+     */
+    applyDefaultPageSize(size) {
+        if (this.restoredPageSize || !Number.isFinite(size) || size <= 0) {
+            return;
+        }
+        this._paginationState = { pageIndex: 0, pageSize: size };
+    }
     _paginationState = $state({
         pageIndex: 0,
         pageSize: 20,

package/dist/Components/Table/Types/Public/CreateTableOptions.d.ts

@@ -89,6 +89,9 @@ export interface CreateTableOptions<TRow extends object, TRowId extends Primitiv
     /** Page-size options shown in the footer's page-size picker. Defaults to
      *  `[10, 25, 50, 100]`. */
     pageSizes?: ReadonlyArray<number>;
+    /** Records per page before the user has chosen one (a persisted choice
+     *  always wins). Defaults to 20. */
+    defaultPageSize?: number;
     /** Row count above which virtualisation kicks in. Defaults to 100;
      *  matches Phase 7.4. */
     rowVirtualisationThreshold?: number;

package/dist/Components/Table/createTable.svelte.js

@@ -64,6 +64,9 @@ export function createTable(options) {
         (options.rows.kind === 'custom' ? options.rows.remoteFilters : undefined);
     const defsWrapper = remoteFilters ? { defs, remoteFilters } : { defs };
     const repository = makeRepository(options.name, options.rows, options.getUserId);
+    if (options.defaultPageSize != null) {
+        repository.applyDefaultPageSize?.(options.defaultPageSize);
+    }
     const onEditCell = makeOnEditCell(editHandlers, options.onAnyEdit);
     const initOptions = {
         selectionExtractor: rowIdFn,