@lavalogic/scoria 0.40.27 → 0.40.29

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

@@ -11,6 +11,7 @@ import InfoAlert from "../../InfoAlert.svelte";
 import TextInput from "../../TextInput.svelte";
 import VerticalTabGroup from "../../VerticalTabGroup.svelte";
 import { cssLength } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { Size } from "../../../Types/Internal/Size.js";
 import { Variant } from "../../../Types/Internal/Variant.js";
 import { getContext, onMount } from "svelte";
@@ -61,7 +62,7 @@ function saveLiveStateInto(view) {
 	void guard(async () => {
 		await tableContext.saveLiveStateIntoView(view);
 		await tableContext.refreshSavedViews();
-	}, `Could not save changes to "${view.name}". Please try again.`);
+	}, i18n["scoria.message.save_into_failed"]({ name: view.name }));
 }
 // Whether remote saved views are available at all. A table created
 // without `datatableUuid` / `remoteLayouts` opts out of remote views;
@@ -79,10 +80,17 @@ const currentUserId = $derived(tableContext.getUserId());
 const sectionViews = $derived(tableContext._viewState.savedViews(section));
 const myViews = $derived(sectionViews.filter((view) => currentUserId === undefined || view.ownerUserId === currentUserId));
 const sharedViews = $derived(sectionViews.filter((view) => currentUserId !== undefined && view.ownerUserId !== currentUserId));
-// Human labels for the active section, so the three tabs and headings
-// read "My Layouts" / "My Filters" etc. without branching everywhere.
-const sectionNoun = $derived(section === "filter" ? "Filter" : "Layout");
-const sectionNounPlural = $derived(section === "filter" ? "Filters" : "Layouts");
+/**
+* Picks the layout or filter member of a paired message.
+*
+* Every phrase naming the section ships as two complete sentences rather than
+* one with the noun injected: articles and adjectives agree with the noun in
+* most European languages, and `.toLowerCase()` on a noun is wrong in German
+* and meaningless in scripts without case.
+*/
+function pair(layout, filter) {
+	return section === "filter" ? filter() : layout();
+}
 /**
 * Run an adapter-backed action, clearing any prior error first and
 * routing a rejection to the inline error banner. Keeps every async
@@ -112,7 +120,7 @@ onMount(() => {
 		return;
 	}
 	loadingViews = true;
-	void guard(() => tableContext.refreshSavedViews(), "Could not load saved layouts and filters. Please try again.").finally(() => {
+	void guard(() => tableContext.refreshSavedViews(), i18n["scoria.message.views_load_failed"]()).finally(() => {
 		loadingViews = false;
 	});
 });
@@ -130,7 +138,7 @@ function deleteView(view) {
 	void guard(async () => {
 		await adapter.deleteView(view.id);
 		await tableContext.refreshSavedViews();
-	}, `Could not delete "${view.name}". Please try again.`);
+	}, i18n["scoria.message.delete_failed"]({ name: view.name }));
 }
 /**
 * Save the live state of the active section as a brand-new view.
@@ -149,7 +157,7 @@ function saveNewView() {
 		await tableContext.saveCurrentAsNewView(trimmed, section);
 		newViewName = "";
 		selectTab("mine");
-	}, `Could not save the new ${sectionNoun.toLowerCase()}. Please try again.`);
+	}, pair(i18n["scoria.message.save_layout_failed"], i18n["scoria.message.save_filter_failed"]));
 }
 /** Remove the current user as a subscriber of a shared view. */
 function unsubscribe(view) {
@@ -160,7 +168,7 @@ function unsubscribe(view) {
 	void guard(async () => {
 		await adapter.removeSubscriber(view.id, currentUserId);
 		await tableContext.refreshSavedViews();
-	}, `Could not unsubscribe from "${view.name}". Please try again.`);
+	}, i18n["scoria.message.unsubscribe_failed"]({ name: view.name }));
 }
 /** Remove a named subscriber from a view the current user owns. */
 function removeSubscriber(view, userId) {
@@ -171,7 +179,7 @@ function removeSubscriber(view, userId) {
 	void guard(async () => {
 		await adapter.removeSubscriber(view.id, userId);
 		await tableContext.refreshSavedViews();
-	}, "Could not remove the subscriber. Please try again.");
+	}, i18n["scoria.message.remove_subscriber_failed"]());
 }
 /** Fetch the public views the user could subscribe to. */
 function loadPublicViews() {
@@ -184,7 +192,7 @@ function loadPublicViews() {
 	void guard(async () => {
 		const all = await adapter.listPublicViews(datatableUuid);
 		publicViews = all.filter((view) => view.kind === section);
-	}, "Could not load views available to subscribe to. Please try again.").finally(() => {
+	}, i18n["scoria.message.load_public_views_failed"]()).finally(() => {
 		loadingPublicViews = false;
 	});
 }
@@ -198,7 +206,7 @@ function subscribe(view) {
 		await adapter.addSubscriber(view.id, currentUserId);
 		await tableContext.refreshSavedViews();
 		loadPublicViews();
-	}, `Could not subscribe to "${view.name}". Please try again.`);
+	}, i18n["scoria.message.subscribe_failed"]({ name: view.name }));
 }
 /** Switch the active left-nav section, resetting the tab + scratch UI. */
 function selectSection(next) {
@@ -229,7 +237,7 @@ function selectTab(next) {
 *  flips so the labels track "My Layouts" / "My Filters" etc. */
 const innerTabs = $derived([
 	{
-		label: `My ${sectionNounPlural}`,
+		label: pair(i18n["scoria.label.my_layouts"], i18n["scoria.label.my_filters"]),
 		content: tabBody,
 		args: { tab: "mine" },
 		onclick: () => {
@@ -237,7 +245,11 @@ const innerTabs = $derived([
 		}
 	},
 	{
-		label: `Shared ${sectionNounPlural}`,
+		// DESIGN-REVIEW: the mockups were internally inconsistent
+		// ("Subscribed to Filters" on one, "Shared Filters" on
+		// another). Resolved to "Shared" consistently for both the
+		// layout and filter sections.
+		label: pair(i18n["scoria.label.shared_layouts"], i18n["scoria.label.shared_filters"]),
 		content: tabBody,
 		args: { tab: "shared" },
 		onclick: () => {
@@ -245,7 +257,7 @@ const innerTabs = $derived([
 		}
 	},
 	{
-		label: `Save a new ${sectionNoun}`,
+		label: pair(i18n["scoria.label.save_new_layout"], i18n["scoria.label.save_new_filter"]),
 		content: tabBody,
 		args: { tab: "save" },
 		onclick: () => {
@@ -257,14 +269,14 @@ const selectedInnerTab = $derived(innerTabs.find((t) => t.args.tab === tab) ?? i
 /** The two left-nav sections. Each renders the inner `VerticalTabGroup`
 *  via the shared `sectionPane` snippet. */
 const sectionTabs = [{
-	label: "Table Layouts",
+	label: i18n["scoria.label.layouts_section"](),
 	content: sectionPane,
 	args: { kind: "layout" },
 	onclick: () => {
 		selectSection("layout");
 	}
 }, {
-	label: "Table Filters",
+	label: i18n["scoria.label.filters_section"](),
 	content: sectionPane,
 	args: { kind: "filter" },
 	onclick: () => {
@@ -303,11 +315,10 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 
 		{#if args.tab === 'mine'}
 			{#if loadingViews}
-				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
+				<InfoAlert>{pair(i18n['scoria.message.loading_layouts'], i18n['scoria.message.loading_filters'])}</InfoAlert>
 			{:else if myViews.length === 0}
 				<InfoAlert>
-					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
-					tab to create one.
+					{pair(i18n['scoria.text.no_layouts_saved'], i18n['scoria.text.no_filters_saved'])}
 				</InfoAlert>
 			{:else}
 				<ul class="card-list">
@@ -322,7 +333,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										nowrap
 										onclick={() => {
 											applyView(view);
-										}}>Apply</Button
+										}}>{i18n['scoria.action.apply']()}</Button
 									>
 									<!--
 										"Save Layout" / "Save Filter" overwrites THIS saved
@@ -339,7 +350,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										iconLeft={{ name: 'circle-tick', size: Size.Small }}
 										onclick={() => {
 											saveLiveStateInto(view);
-										}}>Save {sectionNoun}</Button
+										}}>{pair(i18n['scoria.action.save_layout'], i18n['scoria.action.save_filter'])}</Button
 									>
 									<!--
 										"Update Options" opens a dedicated modal that edits
@@ -355,7 +366,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										iconLeft={{ name: 'edit', size: Size.Small }}
 										onclick={() => {
 											updatingOptionsView = view;
-										}}>Update Options</Button
+										}}>{i18n['scoria.action.update_options']()}</Button
 									>
 									<Button
 										variant={Variant.Secondary}
@@ -369,7 +380,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 											// to Additional" (which is the current user
 											// joining a public view).
 											sharingView = view;
-										}}>Share</Button
+										}}>{i18n['scoria.action.share']()}</Button
 									>
 									<Button
 										variant={Variant.Secondary}
@@ -378,7 +389,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										iconLeft={{ name: 'circle-cross', size: Size.Small }}
 										onclick={() => {
 											deleteView(view);
-										}}>Delete</Button
+										}}>{i18n['scoria.action.delete']()}</Button
 									>
 								</div>
 							</div>
@@ -397,7 +408,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 												nowrap
 												onclick={() => {
 													removeSubscriber(view, subscriber.userId);
-												}}>Remove</Button
+												}}>{i18n['scoria.action.remove']()}</Button
 											>
 										</li>
 									{/each}
@@ -415,14 +426,14 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 					nowrap
 					disabled={loadingPublicViews}
 					iconLeft={{ name: 'circle-plus', size: Size.Small }}
-					onclick={loadPublicViews}>Subscribe to Additional...</Button
+					onclick={loadPublicViews}>{i18n['scoria.action.subscribe_additional']()}</Button
 				>
 			</div>
 
 			{#if publicViews !== null}
 				{#if publicViews.length === 0}
 					<InfoAlert>
-						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
+						{pair(i18n['scoria.text.no_further_layouts'], i18n['scoria.text.no_further_filters'])}
 					</InfoAlert>
 				{:else}
 					<ul class="card-list">
@@ -438,7 +449,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 											disabled={currentUserId === undefined}
 											onclick={() => {
 												subscribe(view);
-											}}>Subscribe</Button
+											}}>{i18n['scoria.action.subscribe']()}</Button
 										>
 									</div>
 								</div>
@@ -450,7 +461,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 
 			{#if sharedViews.length === 0}
 				<InfoAlert>
-					No {sectionNounPlural.toLowerCase()} are currently shared with you.
+					{pair(i18n['scoria.text.no_layouts_shared'], i18n['scoria.text.no_filters_shared'])}
 				</InfoAlert>
 			{:else}
 				<ul class="card-list">
@@ -465,7 +476,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										nowrap
 										onclick={() => {
 											applyView(view);
-										}}>Apply</Button
+										}}>{i18n['scoria.action.apply']()}</Button
 									>
 									<Button
 										variant={Variant.Secondary}
@@ -474,7 +485,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 										disabled={currentUserId === undefined}
 										onclick={() => {
 											unsubscribe(view);
-										}}>Unsubscribe</Button
+										}}>{i18n['scoria.action.unsubscribe']()}</Button
 									>
 								</div>
 							</div>
@@ -485,8 +496,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 		{:else}
 			<div class="save-tab">
 				<InfoAlert>
-					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
-					{sectionNoun.toLowerCase()}.
+					{pair(i18n['scoria.text.save_layout_intro'], i18n['scoria.text.save_filter_intro'])}
 				</InfoAlert>
 				<!-- The InfoAlert above spans the full tab body so the
 					empty-state visuals are consistent across all three tabs.
@@ -496,7 +506,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 					the whole 50vw modal. -->
 				<div class="save-tab-form">
 					<TextInput
-						placeholder={`${sectionNoun} name`}
+						placeholder={pair(i18n['scoria.label.layout_name_placeholder'], i18n['scoria.label.filter_name_placeholder'])}
 						bind:value={newViewName}
 						onkeydown={(e: KeyboardEvent) => {
 							if (e.key === 'Enter') {
@@ -512,7 +522,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 					<div class="save-tab-actions">
 						<Button
 							disabled={!newViewName.trim()}
-							onclick={saveNewView}>Save Current</Button
+							onclick={saveNewView}>{i18n['scoria.action.save_current']()}</Button
 						>
 					</div>
 				</div>
@@ -522,12 +532,12 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 {/snippet}
 
 <DesktopModal
-	headerLabel="Table Configuration"
+	headerLabel={i18n['scoria.action.table_configuration']()}
 	headerSubtitle={tableContext.datatableUuid
-		? `Table Identifier: ${tableContext.datatableUuid}`
+		? i18n['scoria.label.table_identifier']({ id: tableContext.datatableUuid })
 		: undefined}
 	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
 	width={cssLength('50vw')}
 	minWidth={cssLength('40rem')}
 >
@@ -537,7 +547,7 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
 				name="circle-information"
 				size={Size.Large}
 			/>
-			<p>Saved layouts and filters are unavailable for this table.</p>
+			<p>{i18n['scoria.text.views_unavailable']()}</p>
 		</div>
 	{:else}
 		<div class="config">

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

@@ -9,7 +9,8 @@ import Icon from "../../Icon.svelte";
 import NumberInput from "../../NumberInput.svelte";
 import SingleSelect from "../../SingleSelect.svelte";
 import { AlertContext } from "../../../Contexts/AlertContext.svelte.js";
-import { autoPluralise, devCatch } from "../../../Helpers/Helpers.svelte.js";
+import { devCatch } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { Colour, ColourSet } from "../../../scss/colours.js";
 import { Side } from "../../../Types/Internal/Side.js";
 import { Size } from "../../../Types/Internal/Size.js";
@@ -159,12 +160,16 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 >
 	<div class="block">
 		<span
-			>Actioning: {tableContext.dataRepo.filterType === FilterType.Real ? 'Loaded' : 'All'} Records</span
+			>{tableContext.dataRepo.filterType === FilterType.Real
+				? i18n['scoria.text.actioning_loaded']()
+				: i18n['scoria.text.actioning_all']()}</span
 		>
 	</div>
 
 	<div class="block">
-		<span>{tableContext.selectedItems.size} Records Selected</span>
+		<span
+			>{i18n['scoria.text.records_selected']({ count: tableContext.selectedItems.size })}</span
+		>
 		<Action
 			size={Size.FillHeight}
 			disabled={hasNoSelectedItems}
@@ -188,7 +193,7 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 				colour: selectedItemIconColour,
 			}}
 			onclick={() => {
-				alertContext.prompt('Are you sure you want to clear your selection?', {
+				alertContext.prompt(i18n['scoria.prompt.clear_selection'](), {
 					onYes: () => {
 						tableContext.showSelectedOnly = false;
 						tableContext.resetSelectedItems();
@@ -199,17 +204,18 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 	</div>
 
 	<div class="block">
-		<span>{tableContext.paginationRepo?.totalRows ?? 0} Rows</span>
+		<span>{i18n['scoria.text.row_count']({ count: tableContext.paginationRepo?.totalRows ?? 0 })}</span>
 	</div>
 
 	{#if tableContext.paginationRepo}
 		<!-- forceUpwards={!nested} -->
 		<div class="block records-per-page">
-			<span>Records per Page:</span>
+			<span>{i18n['scoria.label.records_per_page']()}</span>
 			<!-- label="Records per Page:" -->
 			<SingleSelect
 				lazyDropdown
 				name="Page Size"
+				placeholder={i18n['scoria.label.select_page_size']()}
 				borderless
 				creatable
 				createFilter={(value: string) => {
@@ -251,7 +257,7 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 					name="paper"
 					colour={Colour['$ui-blue-6']}
 				/>
-				<span>{tableContext.lastPage} {autoPluralise('Page', tableContext.lastPage)}</span>
+				<span>{i18n['scoria.text.page_count']({ count: tableContext.lastPage })}</span>
 			</div>
 
 			<div class="block">
@@ -262,7 +268,7 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 					/></label
 				>
 
-				<label for="{tableContext.tableName}-jump-to-page">Jump to page:</label>
+				<label for="{tableContext.tableName}-jump-to-page">{i18n['scoria.label.jump_to_page']()}</label>
 
 				<NumberInput
 					id="{tableContext.tableName}-jump-to-page"
@@ -290,7 +296,7 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 					iconLeft={{
 						name: 'left-close',
 						size: Size.FillHeight,
-					}}>Previous Page</Button
+					}}>{i18n['scoria.action.previous_page']()}</Button
 				>
 			</div>
 
@@ -324,7 +330,7 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 					iconRight={{
 						name: 'right-close',
 						size: Size.FillHeight,
-					}}>Next Page</Button
+					}}>{i18n['scoria.action.next_page']()}</Button
 				>
 			</div>
 		</div>
@@ -396,10 +402,10 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
   background-color: #ffffff;
 }
 .spread_row > *:first-child {
-  border-bottom-left-radius: 4px;
+  border-end-start-radius: 4px;
 }
 .spread_row > *:last-child {
-  border-bottom-right-radius: 4px;
+  border-end-end-radius: 4px;
 }
 .spread_row .spacer {
   flex-grow: 2;

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

@@ -5,6 +5,7 @@
 	generics="T extends object, IdType extends Primitive"
 >import Button from "../../Button.svelte";
 import { devCatch } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { Side } from "../../../Types/Internal/Side.js";
 import { Size } from "../../../Types/Internal/Size.js";
 import { Variant } from "../../../Types/Internal/Variant.js";
@@ -46,7 +47,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 		variant={Variant.Toolbar}
 		iconTop={{
 			name: 'assessment',
-		}}>Quick Filter</Button
+		}}>{i18n['scoria.action.quick_filter']()}</Button
 	>
 	<Button
 		side={Side.Bottom}
@@ -59,7 +60,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 		variant={Variant.Toolbar}
 		iconTop={{
 			name: 'filter-bars',
-		}}>Advanced Filter</Button
+		}}>{i18n['scoria.action.advanced_filter']()}</Button
 	>
 	<Button
 		side={Side.Bottom}
@@ -71,7 +72,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 		toggled={expandedPanel === ExpandedPanel.Column}
 		iconTop={{
 			name: 'columns',
-		}}>Modify Columns</Button
+		}}>{i18n['scoria.action.modify_columns']()}</Button
 	>
 	<Button
 		size={Size.Small}
@@ -83,7 +84,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 		variant={Variant.Toolbar}
 		iconTop={{
 			name: 'category',
-		}}>My Tool Box</Button
+		}}>{i18n['scoria.action.toolbox']()}</Button
 	>
 	<Button
 		size={Size.Small}
@@ -96,7 +97,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 		variant={Variant.Toolbar}
 		iconTop={{
 			name: 'setting-cog',
-		}}>Table Configuration</Button
+		}}>{i18n['scoria.action.table_configuration']()}</Button
 	>
 	{#if tableContext.dataRepo.addEmptyRow}
 		<Button
@@ -108,7 +109,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 			variant={Variant.Toolbar}
 			iconTop={{
 				name: 'plus',
-			}}>Add a Row</Button
+			}}>{i18n['scoria.action.add_row']()}</Button
 		>
 	{/if}
 
@@ -124,7 +125,7 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 			variant={Variant.Toolbar}
 			iconTop={{
 				name: 'refresh',
-			}}>Refresh</Button
+			}}>{i18n['scoria.action.refresh']()}</Button
 		>
 	{/if}
 

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

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="T extends object, IdType extends Primitive"
->import Button from "../../Button.svelte";
+>import { m as i18n } from "../../../paraglide/messages.js";
+import Button from "../../Button.svelte";
 import { devCatch } from "../../../Helpers/Helpers.svelte.js";
 import { Side } from "../../../Types/Internal/Side.js";
 import { Size } from "../../../Types/Internal/Size.js";
@@ -105,7 +106,7 @@ function handleEscKey(e) {
 			name: 'assessment',
 			size: Size.Medium,
 		}}
-		label="Quick Filter"
+		label={i18n['scoria.action.quick_filter']()}
 	/>
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
@@ -119,7 +120,7 @@ function handleEscKey(e) {
 			name: 'filter-bars',
 			size: Size.Medium,
 		}}
-		label="Advanced Filter"
+		label={i18n['scoria.action.advanced_filter']()}
 	/>
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
@@ -132,7 +133,7 @@ function handleEscKey(e) {
 			name: 'columns',
 			size: Size.Medium,
 		}}
-		label="Modify Columns"
+		label={i18n['scoria.action.modify_columns']()}
 	/>
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
@@ -145,7 +146,7 @@ function handleEscKey(e) {
 			name: 'category',
 			size: Size.Medium,
 		}}
-		label="My Tool Box"
+		label={i18n['scoria.action.toolbox']()}
 	/>
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
@@ -159,7 +160,7 @@ function handleEscKey(e) {
 			name: 'setting-cog',
 			size: Size.Medium,
 		}}
-		label="Table Configuration"
+		label={i18n['scoria.action.table_configuration']()}
 	/>
 
 	{#if tableContext.paginationRepo?.reload}
@@ -175,7 +176,7 @@ function handleEscKey(e) {
 				name: 'refresh',
 				size: Size.Medium,
 			}}
-			label="Refresh"
+			label={i18n['scoria.action.refresh']()}
 		/>
 	{/if}
 

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

@@ -4,6 +4,7 @@
 	lang="ts"
 	generics="T extends object, IdType extends Primitive"
 >import SingleSelect from "../../SingleSelect.svelte";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { getContext } from "svelte";
 import { TableContext } from "../Types/Context/TableContext.svelte.js";
 const { kind } = $props();
@@ -34,7 +35,7 @@ const activeValue = $derived(activeView.kind === "saved" ? activeView.id : DEFAU
 // table state is dirty. "Default" is present even when remote saved
 // views are disabled and `savedViews` is empty.
 const options = $derived([{
-	label: "Default",
+	label: i18n["scoria.label.default_view"](),
 	value: DEFAULT_OPTION
 }, ...savedViews.map((view) => ({
 	label: view.name,
@@ -70,8 +71,11 @@ function selectOption(option) {
 
 <div class="view-dropdown">
 	<SingleSelect
-		label={kind === 'filter' ? 'Filter' : 'Layout'}
+		label={kind === 'filter' ? i18n['scoria.label.filter_noun']() : i18n['scoria.label.layout_noun']()}
 		name={kind === 'filter' ? 'Filter' : 'Layout'}
+		placeholder={kind === 'filter'
+			? i18n['scoria.label.select_filter']()
+			: i18n['scoria.label.select_layout']()}
 		{options}
 		labelProp="label"
 		valueProp="value"

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

@@ -5,6 +5,7 @@
 	generics="T extends object, IdType extends Primitive"
 >import Checkbox from "../../Checkbox.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";
 const tableContext = getContext(TableContext.identifier);
@@ -30,32 +31,32 @@ const onCommaSeparatedCopyChange = (e) => {
 
 <section class="side-panel-section">
 	<header class="side-panel-header">
-		<h2>Settings</h2>
+		<h2>{i18n['scoria.label.settings']()}</h2>
 	</header>
 	<div class="side-panel-body">
 		<Checkbox
-			label="Compact"
+			label={i18n['scoria.label.compact']()}
 			size={Size.MediumSmall}
 			id={`is-compact-${tableContext.tableName}`}
 			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}`}
 			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}`}
 			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}`}
 			value={tableContext.changeColourOnHover}
@@ -63,14 +64,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}`}
 				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}`}
 				value={tableContext.commaSeparatedCopy}