@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -3,7 +3,8 @@
 <script
 	lang="ts"
 	generics="T extends object, IdType extends Primitive"
->import { devCatch } from "../../../Helpers/Helpers.svelte.js";
+>import { m as i18n } from "../../../paraglide/messages.js";
+import { devCatch } from "../../../Helpers/Helpers.svelte.js";
 import { Colour } from "../../../scss/colours.js";
 import { Size } from "../../../Types/Internal/Size.js";
 import { getContext } from "svelte";
@@ -18,7 +19,7 @@ const backgroundColour = $derived.by(() => {
 <div class="highlight-header">
 	<div class="wrapper">
 		<Action
-			label="Highlight all rows"
+			label={i18n['scoria.action.highlight_all_rows']()}
 			{backgroundColour}
 			hoverBackgroundColour={Colour['$brand-dark']}
 			size={Size.FillWidth}

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -3,16 +3,17 @@
 <script
 	lang="ts"
 	generics="T extends object, IdType extends Primitive"
->import { getContext } from "svelte";
+>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);
 const checked = $derived(tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false);
 </script>
 
 <div class="checkbox-cell">
-	<label aria-label="Select all rows on this page">
+	<label aria-label={i18n['scoria.label.select_all_rows']()}>
 		<input
-			aria-label="Select all rows on this page"
+			aria-label={i18n['scoria.label.select_all_rows']()}
 			onchange={tableContext.selectAllInCurrentPage}
 			type="checkbox"
 			{checked}

package/dist/Components/Table/Headers/TableHead.svelte

@@ -4,6 +4,7 @@
 	module
 	lang="ts"
 >import Icon from "../../Icon.svelte";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { TooltipContext } from "../../../Contexts/TooltipContext.svelte.js";
 import { Delay } from "../../../Delay/Delay.js";
 import { Colour } from "../../../scss/colours.js";
@@ -159,7 +160,7 @@ function showtooltip(e, columnDef) {
 			return;
 		}
 		tooltipContext.showTooltip({
-			text: `Show ${typeof columnDef.header === "string" ? columnDef.header : columnDef.id}`,
+			text: i18n["scoria.action.show_column"]({ name: typeof columnDef.header === "string" ? columnDef.header : columnDef.id }),
 			arrow: Side.Bottom,
 			delay: Delay.Default,
 			rect
@@ -263,7 +264,7 @@ const currentDropTargetId = $derived(currentDropTarget?.closest("[role=\"columnh
 		ondrop={onDrop}
 	>
 		{#if !header.isPlaceholder}
-			<div class="margin-right">
+			<div class="margin-inline-end">
 				{#if header.column.getCanSort()}
 					<button
 						onmouseenter={(e) => {
@@ -362,7 +363,7 @@ const currentDropTargetId = $derived(currentDropTarget?.closest("[role=\"columnh
   position: relative;
   min-width: 0;
   color: #000000;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
   border-bottom: solid 1px #cbd4da;
 }
 
@@ -403,7 +404,7 @@ const currentDropTargetId = $derived(currentDropTarget?.closest("[role=\"columnh
   z-index: 11;
 }
 
-.margin-right {
+.margin-inline-end {
   display: flex;
   width: 100%;
   height: 100%;
@@ -507,5 +508,5 @@ div.th::after {
 .highlight-column {
   width: 20px;
   overflow: hidden;
-  border-right: solid 1px #cbd4da;
+  border-inline-end: solid 1px #cbd4da;
 }</style>

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

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import ColumnList from "../Body/Rows/ColumnList.svelte";
+<script lang="ts">import { m as i18n } from "../../../paraglide/messages.js";
+import ColumnList from "../Body/Rows/ColumnList.svelte";
 import TextInput from "../../TextInput.svelte";
 import { Size } from "../../../Types/Internal/Size.js";
 import TableViewDropdown from "./TableViewDropdown.svelte";
@@ -9,7 +10,7 @@ let searchValue = $state("");
 
 <section class="side-panel-section">
 	<header class="side-panel-header">
-		<h2>Modify Columns</h2>
+		<h2>{i18n['scoria.action.modify_columns']()}</h2>
 	</header>
 
 	<div class="toolbar">
@@ -20,7 +21,7 @@ let searchValue = $state("");
 		<TextInput
 			bind:value={searchValue}
 			leftIcon={{ name: 'search', size: Size.Medium }}
-			placeholder="Search Columns"
+			placeholder={i18n['scoria.label.search_columns']()}
 			onkeydown={() => {
 				// Override the TextInput default `passthrough` keydown so the
 				// input does not blur on every alphanumeric keystroke (which
@@ -110,7 +111,7 @@ let searchValue = $state("");
   /* Horizontal padding aligned with FilterPanel's `.side-panel-body`
      so the column-list cards leave the same gutter before the panel's
      right border as the filter chips do, and the SidePanel's
-     `border-right` stays visible between the content and the toolbar
+     `border-inline-end` stays visible between the content and the toolbar
      icons. Vertical padding is 0 because `.column-list` provides
      its own 0.5rem padding (which doubles up to a 1.5rem gap from
      the toolbar above and the footer below). */

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

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
-<script lang="ts">import DesktopModal from "../../DesktopModal.svelte";
+<script lang="ts">import { m as i18n } from "../../../paraglide/messages.js";
+import DesktopModal from "../../DesktopModal.svelte";
 import ColumnList from "../Body/Rows/ColumnList.svelte";
 import TextInput from "../../TextInput.svelte";
 import { Size } from "../../../Types/Internal/Size.js";
@@ -9,16 +10,16 @@ let searchValue = $state("");
 </script>
 
 <DesktopModal
-	headerLabel="Modify Columns"
+	headerLabel={i18n['scoria.action.modify_columns']()}
 	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
 >
 	<div class="flex">
 		<div class="column-panel top">
 			<TextInput
 				bind:value={searchValue}
 				leftIcon={{ name: 'search', size: Size.Medium }}
-				placeholder="Search Columns"
+				placeholder={i18n['scoria.label.search_columns']()}
 				onkeydown={() => {
 					// Override the TextInput default `passthrough` keydown so
 					// the input does not blur on every alphanumeric keystroke

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

@@ -13,6 +13,7 @@ import TextInput from "../../TextInput.svelte";
 import DateModal from "../../Touch/DateModal.svelte";
 import { hasQuery } from "../TableHelpers.svelte.js";
 import { devCatch, isDateTuple, isNumericArray } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { getContext, onMount, untrack } from "svelte";
 import { CheckboxDef } from "../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js";
 import { DateInputDef } from "../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js";
@@ -203,14 +204,16 @@ onMount(() => {
 		}
 	}
 });
+const numberDateTypes = $derived(numberDateFilterTypes());
+const stringTypes = $derived(stringFilterTypes());
 const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
 const selectedNumberFilterType = $derived.by(() => {
 	const value = filterMode ?? NumberDateFilterMode.In;
-	return numberDateFilterTypes.find((it) => it.value === value) ?? null;
+	return numberDateTypes.find((it) => it.value === value) ?? null;
 });
 const selectedStringFilterType = $derived.by(() => {
 	const value = filterMode ?? StringFilterMode.Contains;
-	return stringFilterTypes.find((it) => it.value === value) ?? null;
+	return stringTypes.find((it) => it.value === value) ?? null;
 });
 const inputId = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
 let showFromDateModal = $state(false);
@@ -278,19 +281,23 @@ function generateOnChangePrimitive(_label) {
 					<Button
 						onclick={() => {
 							showFromDateModal = true;
-						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+						}}>{i18n['scoria.label.filter_date_from']({
+								date: fromDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
 					>
 
 					<Button
 						onclick={() => {
 							showToDateModal = true;
-						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
+						}}>{i18n['scoria.label.filter_date_to']({
+								date: toDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
 					>
 				</div>
 
 				{#if showFromDateModal}
 					<DateModal
-						header="Edit Date From"
+						header={i18n['scoria.label.edit_date_from']()}
 						value={fromDate}
 						cancelEditing={() => {
 							showFromDateModal = false;
@@ -305,7 +312,7 @@ function generateOnChangePrimitive(_label) {
 				{#if showToDateModal}
 					<DateModal
 						inclusive
-						header="Edit Date To"
+						header={i18n['scoria.label.edit_date_to']()}
 						value={toDate}
 						cancelEditing={() => {
 							showToDateModal = false;
@@ -343,11 +350,11 @@ function generateOnChangePrimitive(_label) {
 						collapseSelection
 					/>
 				{:catch e}
-					<span>Error retrieving options: {e.message}</span>
+					<span>{i18n['scoria.text.error_retrieving_options']({ message: e.message })}</span>
 					<Button
 						onclick={() => {
 							retryOptionsPromise();
-						}}>Retry</Button
+						}}>{i18n['scoria.action.retry_load']()}</Button
 					>
 				{/await}
 			</div>
@@ -433,7 +440,7 @@ function generateOnChangePrimitive(_label) {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					No
+					{i18n['scoria.action.no']()}
 				</label>
 				<label>
 					<input
@@ -444,7 +451,7 @@ function generateOnChangePrimitive(_label) {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					Any
+					{i18n['scoria.label.any']()}
 				</label>
 				<label>
 					<input
@@ -455,7 +462,7 @@ function generateOnChangePrimitive(_label) {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					Yes
+					{i18n['scoria.action.yes']()}
 				</label>
 			</div>
 		{:else if isNumeric}
@@ -464,7 +471,8 @@ function generateOnChangePrimitive(_label) {
 				<SingleSelect
 					{label}
 					name="Filter Type"
-					options={numberDateFilterTypes}
+					placeholder={i18n['scoria.label.select_filter_type']()}
+					options={numberDateTypes}
 					labelProp="label"
 					valueProp="value"
 					valueAsObject
@@ -505,7 +513,7 @@ function generateOnChangePrimitive(_label) {
 							e.stopPropagation();
 						}}
 					/>
-					<span>and</span>
+					<span>{i18n['scoria.label.between_and']()}</span>
 					<NumberInput
 						id={inputId}
 						bind:value={valueMax}
@@ -538,9 +546,10 @@ function generateOnChangePrimitive(_label) {
 			<div class="left">
 				<SingleSelect
 					name="Filter Type"
+					placeholder={i18n['scoria.label.select_filter_type']()}
 					valueAsObject
 					{label}
-					options={stringFilterTypes}
+					options={stringTypes}
 					labelProp="label"
 					valueProp="value"
 					value={selectedStringFilterType}

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

@@ -7,6 +7,7 @@
 import TextInput from "../../TextInput.svelte";
 import { Colour, ColourSet } from "../../../scss/colours.js";
 import { Size } from "../../../Types/Internal/Size.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { SvelteSet } from "svelte/reactivity";
 import { getContext } from "svelte";
 import { TableContext } from "../Types/Context/TableContext.svelte.js";
@@ -105,7 +106,7 @@ function noopKeydown(_e) {
 
 <section class="side-panel-section">
 	<header class="side-panel-header">
-		<h2>Advanced Filter</h2>
+		<h2>{i18n['scoria.action.advanced_filter']()}</h2>
 	</header>
 
 	<div class="toolbar">
@@ -115,8 +116,8 @@ function noopKeydown(_e) {
 		<TableViewDropdown kind="filter" />
 		<div class="quick-find">
 			<TextInput
-				labelTop="Quick Find a Filter"
-				placeholder="Filter…"
+				labelTop={i18n['scoria.label.quick_find_filter']()}
+				placeholder={i18n['scoria.label.filter_placeholder']()}
 				bind:value={quickFindValue}
 				rightIcon={{ name: 'search', size: Size.Medium }}
 				onkeydown={noopKeydown}
@@ -126,10 +127,10 @@ function noopKeydown(_e) {
 
 	<div class="side-panel-body">
 		{#if filterableDefs.length === 0}
-			<p class="empty">No filterable columns.</p>
+			<p class="empty">{i18n['scoria.text.no_filterable_columns']()}</p>
 		{:else if matchingDefs.length === 0}
 			<p class="empty">
-				No filters match &ldquo;{quickFindValue}&rdquo;.
+				{i18n['scoria.text.no_filters_match']({ query: quickFindValue })}
 			</p>
 		{:else}
 			<div class="groups">
@@ -282,8 +283,8 @@ p.empty {
      (combined with the `.group` `overflow: visible` change) the
      header's blue band would leak past the parent's rounded
      corners. */
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
 }
 .group-header h3 {
   margin: 0;
@@ -296,15 +297,15 @@ p.empty {
   border-bottom: none;
   /* When collapsed the header is the only visible row, so it
      has to round all four corners to follow the parent outline. */
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
 }
 
 /* Round the bottom of the body so its visual edge follows the
    parent's rounded outline once `overflow: hidden` is gone. */
 .group:not(.collapsed) > .group-body {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
 }
 
 .group-body {

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

@@ -5,6 +5,7 @@
 	module
 >import DesktopModal from "../../DesktopModal.svelte";
 import { cssLength } from "../../../Helpers/Helpers.svelte.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import FilterPanel from "./FilterPanel.svelte";
 </script>
 
@@ -13,9 +14,9 @@ import FilterPanel from "./FilterPanel.svelte";
 
 <DesktopModal
 	width={cssLength('800px')}
-	headerLabel="Filter by"
+	headerLabel={i18n['scoria.label.filter_by']()}
 	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
 >
 	<div class="flex">
 		<FilterPanel />

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

@@ -9,6 +9,7 @@ import Icon from "../../Icon.svelte";
 import InfoAlert from "../../InfoAlert.svelte";
 import MultiSelect from "../../MultiSelect.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 { Variant } from "../../../Types/Internal/Variant.js";
@@ -81,7 +82,7 @@ onMount(() => {
 	initialIds = new Set(initial.map((u) => u.id));
 	const adapter = tableContext.remoteLayouts;
 	if (!adapter) {
-		errorMessage = "Sharing is unavailable: no remote layouts adapter is configured.";
+		errorMessage = i18n["scoria.message.sharing_unavailable"]();
 		return;
 	}
 	loadingUsers = true;
@@ -92,7 +93,10 @@ onMount(() => {
 		allUsers = users.filter((u) => u.id !== view.ownerUserId);
 	}).catch((e) => {
 		console.error("[ShareViewModal] listUsers failed:", e);
-		errorMessage = e instanceof Error ? `Could not load the user list. (${e.message})` : "Could not load the user list.";
+		errorMessage = e instanceof Error ? i18n["scoria.message.error_detail"]({
+			message: i18n["scoria.message.load_users_failed"](),
+			detail: e.message
+		}) : i18n["scoria.message.load_users_failed"]();
 	}).finally(() => {
 		loadingUsers = false;
 	});
@@ -105,7 +109,7 @@ function removeFromSelection(userId) {
 async function save() {
 	const adapter = tableContext.remoteLayouts;
 	if (!adapter) {
-		errorMessage = "Sharing is unavailable: no remote layouts adapter is configured.";
+		errorMessage = i18n["scoria.message.sharing_unavailable"]();
 		return;
 	}
 	if (!dirty) {
@@ -145,7 +149,10 @@ async function save() {
 		onclose();
 	} catch (e) {
 		console.error("[ShareViewModal] save failed:", e);
-		errorMessage = e instanceof Error ? `Could not update sharing. Some changes may have been applied. (${e.message})` : "Could not update sharing. Some changes may have been applied.";
+		errorMessage = e instanceof Error ? i18n["scoria.message.error_detail"]({
+			message: i18n["scoria.message.update_sharing_failed"](),
+			detail: e.message
+		}) : i18n["scoria.message.update_sharing_failed"]();
 	} finally {
 		saving = false;
 	}
@@ -153,8 +160,10 @@ async function save() {
 </script>
 
 <DesktopModal
-	headerLabel={`Share "${view.name}"`}
-	headerSubtitle={`Choose who can access this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
+	headerLabel={i18n['scoria.label.share_header']({ name: view.name })}
+	headerSubtitle={view.kind === 'filter'
+		? i18n['scoria.text.share_filter_subtitle']()
+		: i18n['scoria.text.share_layout_subtitle']()}
 	onclose={() => {
 		if (!saving) {
 			onclose();
@@ -164,7 +173,7 @@ async function save() {
 	minWidth={cssLength('32rem')}
 	buttons={[
 		{
-			label: 'Cancel',
+			label: i18n['scoria.action.cancel'](),
 			callback: () => {
 				if (!saving) {
 					onclose();
@@ -173,7 +182,7 @@ async function save() {
 			disabled: saving,
 		},
 		{
-			label: saving ? 'Saving…' : 'Save',
+			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
 			callback: () => {
 				void save();
 			},
@@ -198,11 +207,12 @@ async function save() {
 
 		<div class="picker">
 			{#if loadingUsers && allUsers === null}
-				<InfoAlert>Loading users…</InfoAlert>
+				<InfoAlert>{i18n['scoria.message.loading_users']()}</InfoAlert>
 			{:else if allUsers !== null}
 				<MultiSelect
-					label="Users"
+					label={i18n['scoria.label.users']()}
 					name="User"
+					placeholder={i18n['scoria.label.select_user']()}
 					options={allUsers as Array<DatatableViewUser>}
 					labelProp="displayName"
 					valueProp="id"
@@ -217,9 +227,9 @@ async function save() {
 
 		{#if selected.length === 0}
 			<InfoAlert>
-				No users selected. Use the picker above to share this {view.kind === 'filter'
-					? 'filter'
-					: 'layout'} with one or more users.
+				{view.kind === 'filter'
+					? i18n['scoria.text.no_users_filter']()
+					: i18n['scoria.text.no_users_layout']()}
 			</InfoAlert>
 		{:else}
 			<ul class="user-card-list">
@@ -240,7 +250,7 @@ async function save() {
 								reserved no-ops in v1 (see `DatatableView` DTO
 								JSDoc); scoria never sets them.
 							-->
-							<span class="permission-pill">Subscriber</span>
+							<span class="permission-pill">{i18n['scoria.label.subscriber']()}</span>
 							<Button
 								variant={Variant.Secondary}
 								size={Size.MediumSmall}
@@ -249,7 +259,7 @@ async function save() {
 								disabled={saving}
 								onclick={() => {
 									removeFromSelection(user.id);
-								}}>Remove</Button
+								}}>{i18n['scoria.action.remove']()}</Button
 							>
 						</div>
 					</li>

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

@@ -37,11 +37,11 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
   transition: width 0.2s ease-out;
 }
 .side-panel.left {
-  border-left: solid 2px #cbd4da;
+  border-inline-start: solid 2px #cbd4da;
   order: 1;
 }
 .side-panel.right {
-  border-right: solid 2px #cbd4da;
+  border-inline-end: solid 2px #cbd4da;
 }
 .side-panel .side-content {
   display: flex;