@lavalogic/scoria 0.36.0 → 0.37.0

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

@@ -1,84 +1,150 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
 	import Checkbox from '../../Checkbox.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
 	import { getContext } from 'svelte';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
-	const onCompactChange = (e: Event) => {
-		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
 	};
 
-	const onSingleCLickChange = (e: Event) => {
-		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
 	};
 
-	const onAlternateRowColoursChange = (e: Event) => {
-		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
 	};
 
-	const onChangeColourOnHoverChange = (e: Event) => {
-		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
 	};
 
-	const onCopyWithHeadersChange = (e: Event) => {
-		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
 	};
 
-	const onCommaSeparatedCopyChange = (e: Event) => {
-		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
 	};
 </script>
 
-<div class="column-panel">
-	<h3>Settings</h3>
-	<Checkbox
-		label="Compact"
-		id={`is-compact-${tableContext.tableName}`}
-		value={tableContext.isCompact}
-		onchange={onCompactChange}
-	/>
-	<Checkbox
-		label="Single Click Editing"
-		id={`single-click-editing-${tableContext.tableName}`}
-		value={tableContext.singleClickEditing}
-		onchange={onSingleCLickChange}
-	/>
-	<Checkbox
-		label="Alternate Row Colours"
-		id={`alternate-row-colours-${tableContext.tableName}`}
-		value={tableContext.alternateRowColours}
-		onchange={onAlternateRowColoursChange}
-	/>
-	<Checkbox
-		label="Change Colour on Hover"
-		id={`change-colour-on-hover-${tableContext.tableName}`}
-		value={tableContext.changeColourOnHover}
-		onchange={onChangeColourOnHoverChange}
-	/>
-	{#if tableContext.allowCopy}
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Settings</h2>
+	</header>
+	<div class="side-panel-body">
 		<Checkbox
-			label="Include Headers When Copying"
-			id={`copy-with-headers-${tableContext.tableName}`}
-			value={tableContext.copyWithHeaders}
-			onchange={onCopyWithHeadersChange}
+			label="Compact"
+			size={Size.MediumSmall}
+			id={`is-compact-${tableContext.tableName}`}
+			value={tableContext.isCompact}
+			onchange={onCompactChange}
 		/>
 		<Checkbox
-			label="Copy as Comma Separated Values"
-			id={`comma-separated-copy-${tableContext.tableName}`}
-			value={tableContext.commaSeparatedCopy}
-			onchange={onCommaSeparatedCopyChange}
+			label="Single Click Editing"
+			size={Size.MediumSmall}
+			id={`single-click-editing-${tableContext.tableName}`}
+			value={tableContext.singleClickEditing}
+			onchange={onSingleClickChange}
 		/>
-	{/if}
-</div>
+		<Checkbox
+			label="Alternate Row Colours"
+			size={Size.MediumSmall}
+			id={`alternate-row-colours-${tableContext.tableName}`}
+			value={tableContext.alternateRowColours}
+			onchange={onAlternateRowColoursChange}
+		/>
+		<Checkbox
+			label="Change Colour on Hover"
+			size={Size.MediumSmall}
+			id={`change-colour-on-hover-${tableContext.tableName}`}
+			value={tableContext.changeColourOnHover}
+			onchange={onChangeColourOnHoverChange}
+		/>
+		{#if tableContext.allowCopy}
+			<Checkbox
+				label="Include Headers When Copying"
+				size={Size.MediumSmall}
+				id={`copy-with-headers-${tableContext.tableName}`}
+				value={tableContext.copyWithHeaders}
+				onchange={onCopyWithHeadersChange}
+			/>
+			<Checkbox
+				label="Copy as Comma Separated Values"
+				size={Size.MediumSmall}
+				id={`comma-separated-copy-${tableContext.tableName}`}
+				value={tableContext.commaSeparatedCopy}
+				onchange={onCommaSeparatedCopyChange}
+			/>
+		{/if}
+	</div>
+</section>
 
-<style>div.column-panel {
-  padding: 0.5rem;
+<style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
-  gap: 0.5rem;
-  background-color: #ffffff;
   height: 100%;
+  width: 100%;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.side-panel-header {
+  flex-shrink: 0;
+  padding: 1.25rem 1.25rem 0.875rem;
+  border-bottom: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.side-panel-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #3a4952;
+  line-height: 1.25;
+}
+
+.side-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.side-panel-footer {
+  flex-shrink: 0;
+  padding: 0.875rem 1.25rem;
+  border-top: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.75rem;
+  align-items: center;
+  box-sizing: border-box;
 }</style>

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

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ToolboxPanel: $$IsomorphicComponent;
-type ToolboxPanel<T extends object> = InstanceType<typeof ToolboxPanel<T>>;
+type ToolboxPanel<T extends object, IdType extends Primitive> = InstanceType<typeof ToolboxPanel<T, IdType>>;
 export default ToolboxPanel;

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

@@ -2,40 +2,50 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
 	import Checkbox from '../../Checkbox.svelte';
 	import DesktopModal from '../../DesktopModal.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
 
 	let { onclose }: ToolboxPanelModalProps = $props();
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
-	const onCompactChange = (e: Event) => {
-		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
+	const onCompactChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setIsCompact(e.currentTarget.checked);
 	};
 
-	const onSingleCLickChange = (e: Event) => {
-		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
+	const onSingleClickChange = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		tableContext.setSingleClickEditing(e.currentTarget.checked);
 	};
 
-	const onAlternateRowColoursChange = (e: Event) => {
-		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
+	const onAlternateRowColoursChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setAlternateRowColours(e.currentTarget.checked);
 	};
 
-	const onChangeColourOnHoverChange = (e: Event) => {
-		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
+	const onChangeColourOnHoverChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setChangeColourOnHover(e.currentTarget.checked);
 	};
 
-	const onCopyWithHeadersChange = (e: Event) => {
-		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
+	const onCopyWithHeadersChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCopyWithHeaders(e.currentTarget.checked);
 	};
 
-	const onCommaSeparatedCopyChange = (e: Event) => {
-		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
+	const onCommaSeparatedCopyChange = (
+		e: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) => {
+		tableContext.setCommaSeparatedCopy(e.currentTarget.checked);
 	};
 </script>
 
@@ -48,24 +58,28 @@
 		<div class="column-panel">
 			<Checkbox
 				label="Compact"
+				size={Size.MediumSmall}
 				id={`is-compact-${tableContext.tableName}-modal`}
 				value={tableContext.isCompact}
 				onchange={onCompactChange}
 			/>
 			<Checkbox
 				label="Single Click Editing"
+				size={Size.MediumSmall}
 				id={`single-click-editing-${tableContext.tableName}-modal`}
 				value={tableContext.singleClickEditing}
-				onchange={onSingleCLickChange}
+				onchange={onSingleClickChange}
 			/>
 			<Checkbox
 				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"
+				size={Size.MediumSmall}
 				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
 				value={tableContext.changeColourOnHover}
 				onchange={onChangeColourOnHoverChange}
@@ -73,12 +87,14 @@
 			{#if tableContext.allowCopy}
 				<Checkbox
 					label="Include Headers When Copying"
+					size={Size.MediumSmall}
 					id={`copy-with-headers-${tableContext.tableName}-modal`}
 					value={tableContext.copyWithHeaders}
 					onchange={onCopyWithHeadersChange}
 				/>
 				<Checkbox
 					label="Copy as Comma Separated Values"
+					size={Size.MediumSmall}
 					id={`comma-separated-copy-${tableContext.tableName}-modal`}
 					value={tableContext.commaSeparatedCopy}
 					onchange={onCommaSeparatedCopyChange}
@@ -94,13 +110,4 @@
   height: 100%;
   width: 100%;
   flex: 1;
-}
-
-div.column-panel {
-  padding: 0.5rem;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.5rem;
-  background-color: #ffffff;
-  height: 100%;
 }</style>

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

@@ -1,25 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: ToolboxPanelModalProps;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ToolboxPanelModal: $$IsomorphicComponent;
-type ToolboxPanelModal<T extends object> = InstanceType<typeof ToolboxPanelModal<T>>;
+type ToolboxPanelModal<T extends object, IdType extends Primitive> = InstanceType<typeof ToolboxPanelModal<T, IdType>>;
 export default ToolboxPanelModal;

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

@@ -1,3 +1,8 @@
+/**
+ * Props for `ToolboxPanelModal` (the touch / horizontal-toolbar variant of
+ * the table settings panel).
+ */
 export interface ToolboxPanelModalProps {
+    /** Called when the modal requests close. */
     onclose?: () => void;
 }

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

@@ -1,5 +1,8 @@
+import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
-export declare const numberDateFilterTypes: {
-    value: NumberDateFilterMode;
-    label: string;
-}[];
+/**
+ * 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.
+ */
+export declare const numberDateFilterTypes: Array<SelectOption<NumberDateFilterMode>>;

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

@@ -1,5 +1,10 @@
 import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
-export const numberDateFilterTypes = [
+/**
+ * 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.
+ */
+export const numberDateFilterTypes = Object.freeze([
     { value: NumberDateFilterMode.Equals, label: 'Equals' },
     { value: NumberDateFilterMode.NotEquals, label: 'Does not equal' },
     { value: NumberDateFilterMode.LessThan, label: 'Less Than' },
@@ -9,5 +14,5 @@ export const numberDateFilterTypes = [
     { value: NumberDateFilterMode.Between, label: 'Between' },
     { value: NumberDateFilterMode.In, label: 'In' },
     { value: NumberDateFilterMode.NotIn, label: 'Not in' },
-    { value: NumberDateFilterMode.null, label: 'Is null' }
-];
+    { value: NumberDateFilterMode.null, label: 'Is null' },
+]);

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

@@ -1,5 +1,7 @@
+import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-export declare const stringFilterTypes: {
-    value: StringFilterMode;
-    label: string;
-}[];
+/**
+ * Static set of filter-mode `SelectOption`s offered for string columns.
+ * Frozen at runtime so consumers cannot mutate the shared module-level array.
+ */
+export declare const stringFilterTypes: Array<SelectOption<StringFilterMode>>;

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

@@ -1,5 +1,9 @@
 import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-export const stringFilterTypes = [
+/**
+ * Static set of filter-mode `SelectOption`s offered for string columns.
+ * Frozen at runtime so consumers cannot mutate the shared module-level array.
+ */
+export const stringFilterTypes = Object.freeze([
     { value: StringFilterMode.Equals, label: 'Equals' },
     { value: StringFilterMode.NotEquals, label: 'Does not equal' },
     { value: StringFilterMode.Contains, label: 'Contains' },
@@ -11,5 +15,5 @@ export const stringFilterTypes = [
     { value: StringFilterMode.In, label: 'In' },
     { value: StringFilterMode.NotIn, label: 'Not in' },
     { value: StringFilterMode.Empty, label: 'Empty' },
-    { value: StringFilterMode.null, label: 'Is null' }
-];
+    { value: StringFilterMode.null, label: 'Is null' },
+]);

package/dist/Components/Table/NestedTable.svelte

@@ -1,92 +1,136 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import Table from './Table.svelte';
-	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
-	import { TableContext } from './Types/Context/TableContext.svelte.js';
+	import type { NestedTableProps } from './NestedTableProps.js';
 	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
+	import { TableContext } from './Types/Context/TableContext.svelte.js';
 	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
 	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
 
-	const defaultOptions: Omit<
+	/**
+	 * Default `TableInitOptions` overrides applied to every nested table.
+	 * Tuned for read-only inline display: copy, resize and column
+	 * reordering are turned off, quick / advanced filtering remain on so
+	 * the consumer can still narrow rows, the toolbar is hidden, and the
+	 * footer is suppressed because pagination is rarely useful for inline
+	 * nested data.
+	 *
+	 * Frozen so consumers cannot accidentally mutate the shared default
+	 * object.
+	 */
+	const DEFAULT_NESTED_TABLE_OPTIONS: Omit<
 		TableInitOptions<object, never>,
 		'selectionExtractor' | 'getUserId'
-	> = {
+	> = Object.freeze({
 		allowCopy: false,
 		enableResize: false,
 		allowColumnReordering: false,
 		allowQuickFiltering: true,
 		allowAdvancedFiltering: true,
 		toolbar: ToolbarPosition.None,
-		displayFooter: false
-	};
-
-	export interface NestedTableProps<T extends object, IdType extends Primitive> {
-		tableName: string;
-		data: Array<T>;
-		columnDefWrapper: DefsWrapper<T>;
-		options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> &
-			Partial<TableInitOptions<T, IdType>>;
-		oncontextmenu?: (e: MouseEvent) => void;
-		getUserId: () => string | undefined;
-	}
+		displayFooter: false,
+	});
 </script>
 
-<script lang="ts" generics="T extends object,IdType extends Primitive">
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
+>
 	const {
 		tableName,
 		data,
 		columnDefWrapper,
 		options,
 		oncontextmenu,
-		getUserId
+		getUserId,
 	}: NestedTableProps<T, IdType> = $props();
 
+	// Reactive wrapper exposing the `data` prop as `.value` so the
+	// underlying LocalTableDataRepository can read it through its
+	// RefWrapper contract without us materialising a copy.
 	const wrapper = {
 		get value() {
 			return data;
-		}
+		},
 	};
 
 	let root: HTMLDivElement | undefined = $state();
-	const maxWidth: number | undefined = $derived(
-		root?.closest('.flex_table')?.getBoundingClientRect().width
-	);
 
-	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
+	// Track the parent `.datatable`'s visible width (clientWidth) via
+	// ResizeObserver. `.datatable` is the horizontal scroll container,
+	// so its `clientWidth` is the visible viewport regardless of how
+	// wide the inner `.datatable-grid` has grown via `min-width:
+	// max-content`. Measuring `.flex_table` instead would pick up the
+	// scroll-content width through flex `min-width: auto` propagation,
+	// which sized the nested table to the full grid (much wider than
+	// the visible area) and broke the sticky-fit behaviour.
+	//
+	// Reading layout inside a derivation would force a synchronous
+	// reflow on every reactive re-run; the ResizeObserver path keeps
+	// it out of the reactive graph (workorder NestedTable P1).
+	let maxWidth: number | undefined = $state();
+	$effect(() => {
+		if (!root) {
+			return;
+		}
+		const scrollHost = root.closest('.datatable');
+		if (!(scrollHost instanceof HTMLElement)) {
+			return;
+		}
+		maxWidth = scrollHost.clientWidth;
+		const ro = new ResizeObserver(() => {
+			maxWidth = scrollHost.clientWidth;
+		});
+		ro.observe(scrollHost);
+		return () => {
+			ro.disconnect();
+		};
+	});
+
+	// These class instances are plain objects whose internal fields are
+	// already `$state`-backed; wrapping them in `$state(...)` (as the
+	// pre-cleanup version did) adds a redundant reactive layer. The
+	// dataRepo and tableContext references must remain stable across
+	// updates: a fresh `dataRepo` would clear filter/sort state, and a
+	// fresh `tableContext` would tear down focus.
+	//
+	// svelte-ignore state_referenced_locally
+	const dataRepo = new LocalTableDataRepository<T>(tableName, wrapper, () => getUserId());
 
-	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const tableContext: TableContext<T, IdType> | undefined = $state(
-		TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
-			...defaultOptions,
-			...options,
-			getUserId: () => getUserId()
-		})
-	);
+	// svelte-ignore state_referenced_locally
+	const tableContext = TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
+		...DEFAULT_NESTED_TABLE_OPTIONS,
+		...options,
+		getUserId: () => getUserId(),
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="limit-height"
 	bind:this={root}
-	style={maxWidth != null ? `max-width: ${maxWidth}px` : ''}
+	style:width={maxWidth != null ? `${maxWidth}px` : null}
 	oncontextmenu={(e) => {
 		e.stopPropagation();
 		oncontextmenu?.(e);
 	}}
 >
-	{#if tableContext}
-		<Table nested {tableContext} />
-	{/if}
+	<Table
+		nested
+		{tableContext}
+	/>
 </div>
 
 <style>.limit-height {
-  box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
-  position: relative;
-  padding: 1.5rem;
-  background-color: #f4f7f9;
   position: sticky;
   left: 0;
   z-index: 3;
+  padding: 1.5rem;
+  box-sizing: border-box;
+  background-color: #f4f7f9;
+  box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
 }</style>