@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/GridInput.svelte

@@ -1,199 +1,209 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { dev } from '$app/environment';
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-	import type { GridItem } from '../Types/Internal/GridItem.js';
-	import type {
-		GridMultiSelectItem,
-		GridMultiSelectItemAsObject,
-		GridMultiSelectItemAsPrimitive,
-	} from '../Types/Internal/GridMultiSelectItem.js';
-	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
-	import type {
-		GridSingleSelectItem,
-		GridSingleSelectItemAsObject,
-		GridSingleSelectItemAsPrimitive,
-	} from '../Types/Internal/GridSingleSelectItem.js';
-	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
-	import type { ValueProp } from '../Types/Internal/Misc.js';
-	import type { GridInputProps } from './GridInputProps.js';
-	import MultiSelect from './MultiSelect.svelte';
-	import SingleSelect from './SingleSelect.svelte';
-	import TextInput from './TextInput.svelte';
-
-	const textTypes = new Set(['text', 'email', 'tel']);
-</script>
-
-<script
-	lang="ts"
-	generics="V extends object,VP extends ValueProp<V>"
->
-	const { item, first, last }: GridInputProps<V, VP> = $props();
-
-	let value = $derived(isText(item) ? (item.value ?? '') : '');
-
-	function isText<V extends object, VP extends ValueProp<V>>(
-		item: GridItem<V, VP>
-	): item is GridTextItem {
-		return item.type == null || textTypes.has(item.type);
-	}
-
-	function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
-		return item.type == 'select';
-	}
-
-	function isMultiSelect<A extends object, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridMultiSelectItem<A, B> {
-		return 'multi' in item && item.multi === true;
-	}
-
-	function isMultiSelectPrimitive<A extends object, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isMultiSelectObject<A extends object, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsObject<A, B> {
-		return 'valueAsObject' in item && item.valueAsObject;
-	}
-
-	function isSingleSelect<A extends object, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridSingleSelectItem<A, B> {
-		return !('multi' in item) || item.multi === false;
-	}
-
-	function isSingleSelectPrimitive<A extends object, B extends ValueProp<A>>(
-		item: GridSingleSelectItem<A, B>
-	): item is GridSingleSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isSingleSelectObject<A extends object, B extends ValueProp<A>>(
-		item: GridSingleSelectItem<A, B>
-	): item is GridSingleSelectItemAsObject<A, B> {
-		return 'valueAsObject' in item && item.valueAsObject;
-	}
-</script>
-
-<label
-	class:first
-	class:last
->
-	<div class="left">
-		<span
-			class:first
-			class:last>{item.label}</span
-		>
-	</div>
-	{#if isText(item)}
-		<TextInput
-			disabled={item.disabled}
-			bind:value
-			oninput={() => {
-				item.updater(value);
-			}}
-			required={item.required}
-			invalid={item.invalid}
-		/>
-	{:else if isSelect(item)}
-		{#if isMultiSelect(item)}
-			{#await item.options}
-				{loadingText}
-			{:then options}
-				{#if isMultiSelectObject<V, VP>(item)}
-					<MultiSelect
-						name={item.name}
-						{options}
-						valueAsObject={true}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						selectedValues={item.value}
-						invalid={item.invalid}
-						onchange={(v: Array<V>) => {
-							item.updater(v);
-						}}
-					/>
-				{:else if isMultiSelectPrimitive(item)}
-					<MultiSelect
-						name={item.name}
-						{options}
-						valueAsObject={false}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						selectedValues={item.value}
-						invalid={item.invalid}
-						onchange={(v: Array<V>) => {
-							const values = v.map((it) => it[item.valueProp]);
-
-							item.updater(values);
-						}}
-					/>
-				{/if}
-			{/await}
-		{:else if isSingleSelect(item)}
-			{#await item.options}
-				{loadingText}
-			{:then options}
-				{#if isSingleSelectObject(item)}
-					<SingleSelect
-						{options}
-						name={item.name}
-						valueAsObject={true}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						value={item.value}
-						required={item.required}
-						clearable={!item.required}
-						disabled={item.disabled}
-						invalid={item.invalid}
-						onchange={(v: V | null) => {
-							item.updater(v);
-						}}
-					/>
-				{:else if isSingleSelectPrimitive(item)}
-					<SingleSelect
-						{options}
-						name={item.name}
-						valueAsObject={false}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						value={item.value}
-						required={item.required}
-						clearable={!item.required}
-						disabled={item.disabled}
-						invalid={item.invalid}
-						onchange={(v: V | null) => {
-							const x = v == null ? null : v[item.valueProp];
-
-							item.updater(x);
-						}}
-					/>
-				{/if}
-			{/await}
-		{/if}
-	{:else if dev}
-		{@const type = item.type}
-		unknown type: {type}
-		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-		{@debug type}
-	{/if}
-</label>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { dev } from '$app/environment';
+	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import type { GridItem } from '../Types/Internal/GridItem.js';
+	import type {
+		GridMultiSelectItem,
+		GridMultiSelectItemAsObject,
+		GridMultiSelectItemAsPrimitive,
+	} from '../Types/Internal/GridMultiSelectItem.js';
+	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
+	import type {
+		GridSingleSelectItem,
+		GridSingleSelectItemAsObject,
+		GridSingleSelectItemAsPrimitive,
+	} from '../Types/Internal/GridSingleSelectItem.js';
+	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
+	import type { GridInputProps } from './GridInputProps.js';
+	import MultiSelect from './MultiSelect.svelte';
+	import SingleSelect from './SingleSelect.svelte';
+	import TextInput from './TextInput.svelte';
+
+	const textTypes = new Set(['text', 'email', 'tel']);
+</script>
+
+<script
+	lang="ts"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
+>
+	const { item, first, last }: GridInputProps<V, VP> = $props();
+
+	let value = $derived(isText(item) ? (item.value ?? '') : '');
+
+	function isText<V extends Record<string, unknown>, VP extends ValueProp<V>>(
+		item: GridItem<V, VP>
+	): item is GridTextItem {
+		return item.type == null || textTypes.has(item.type);
+	}
+
+	function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
+		return item.type == 'select';
+	}
+
+	function isMultiSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridSelectItem<A, B>
+	): item is GridMultiSelectItem<A, B> {
+		return 'multi' in item && item.multi === true;
+	}
+
+	function isMultiSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && !item.valueAsObject;
+	}
+
+	function isMultiSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsObject<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject;
+	}
+
+	function isSingleSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridSelectItem<A, B>
+	): item is GridSingleSelectItem<A, B> {
+		return !('multi' in item) || item.multi === false;
+	}
+
+	function isSingleSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && !item.valueAsObject;
+	}
+
+	function isSingleSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsObject<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject;
+	}
+</script>
+
+<label
+	class:first
+	class:last
+>
+	<div class="left">
+		<span
+			class:first
+			class:last>{item.label}</span
+		>
+	</div>
+	{#if isText(item)}
+		<TextInput
+			disabled={item.disabled}
+			bind:value
+			oninput={() => {
+				item.updater(value);
+			}}
+			required={item.required}
+			invalid={item.invalid}
+		/>
+	{:else if isSelect(item)}
+		{#if isMultiSelect(item)}
+			{#await item.options}
+				{loadingText}
+			{:then options}
+				{#if isMultiSelectObject<V, VP>(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={true}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v: Array<V>) => {
+							item.updater(v);
+						}}
+					/>
+				{:else if isMultiSelectPrimitive(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={false}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v: Array<V[VP]>) => {
+							// Phase 7.6: `valueAsObject={false}` means MultiSelect
+							// hands us the primitives directly; no more `.map`
+							// to dig `.value` off each option object.
+							item.updater(v);
+						}}
+					/>
+				{/if}
+			{/await}
+		{:else if isSingleSelect(item)}
+			{#await item.options}
+				{loadingText}
+			{:then options}
+				{#if isSingleSelectObject(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={true}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(v: V | null) => {
+							item.updater(v);
+						}}
+					/>
+				{:else if isSingleSelectPrimitive(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={false}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(
+							// Phase 7.6: `valueAsObject={false}` means SingleSelect
+							// already passes the primitive key value; no need to
+							// dig it back out of an option object. `clearable` is
+							// enabled when the field is not `required`, so the
+							// callback must accept `null` to satisfy the
+							// SingleSelect prop signature. The annotation collapses
+							// to `unknown` because `V extends Record<string,
+							// unknown>` makes `V[VP]` itself `unknown`.
+							// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+							v: V[VP] | null
+						) => {
+							item.updater(v);
+						}}
+					/>
+				{/if}
+			{/await}
+		{/if}
+	{:else if dev}
+		{@const type = item.type}
+		unknown type: {type}
+		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+		{@debug type}
+	{/if}
+</label>
+
 <style>label {
   display: contents;
   --input-border-radius: 0;
   --sv-border-radius: 0;
 }
 label .left {
-  background-color: #eaeef3;
+  background-color: #f4f7f9;
   display: flex;
   flex-flow: row nowrap;
   padding: 0.75rem;
@@ -205,4 +215,4 @@ label.first {
 }
 label.last {
   border-radius: 0 0 4px 4px;
-}</style>
+}</style>

package/dist/Components/GridInput.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { GridInputProps } from './GridInputProps.js';
-declare function $$render<V extends object, VP extends ValueProp<V>>(): {
+declare function $$render<V extends Record<string, unknown>, VP extends ValueProp<V>>(): {
     props: GridInputProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
+declare class __sveltets_Render<V extends Record<string, unknown>, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends Record<string, unknown>, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends Record<string, unknown>, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInput: $$IsomorphicComponent;
-type GridInput<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInput<V, VP>>;
+type GridInput<V extends Record<string, unknown>, VP extends ValueProp<V>> = InstanceType<typeof GridInput<V, VP>>;
 export default GridInput;

package/dist/Components/GridInputProps.d.ts

@@ -1,7 +1,10 @@
 import type { GridItem } from '../Types/Internal/GridItem.js';
 import type { ValueProp } from '../Types/Internal/Misc.js';
-export interface GridInputProps<V extends object, VP extends ValueProp<V>> {
+export interface GridInputProps<V extends Record<string, unknown>, VP extends ValueProp<V>> {
+    /** Item descriptor controlling which sub-input is rendered. */
     item: GridItem<V, VP>;
+    /** True when this row is first in its GridInputSet. */
     first: boolean;
+    /** True when this row is last in its GridInputSet. */
     last: boolean;
 }

package/dist/Components/GridInputSet.svelte

@@ -1,29 +1,36 @@
-<svelte:options runes />
-
-<script lang="ts" generics="V extends object,VP extends ValueProp<V>">
-	import type { ValueProp } from '../Types/Internal/Misc.js';
-	import GridInput from './GridInput.svelte';
-	import type { GridInputSetProps } from './GridInputSetProps.js';
-
-	const { items, header }: GridInputSetProps<V, VP> = $props();
-
-	const lastIndex = $derived(items.length - 1);
-</script>
-
-<div class="grid">
-	{#if header}
-		{@render header()}
-	{/if}
-	{#each items as item, index (item)}
-		<GridInput item={items[index]} first={index == 0} last={index == lastIndex} />
-	{/each}
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
+>
+	import type { ValueProp } from '../Types/Internal/Misc.js';
+	import GridInput from './GridInput.svelte';
+	import type { GridInputSetProps } from './GridInputSetProps.js';
+
+	const { items, header }: GridInputSetProps<V, VP> = $props();
+
+	const lastIndex = $derived(items.length - 1);
+</script>
+
+<div class="grid">
+	{#if header}
+		{@render header()}
+	{/if}
+	{#each items as item, index (item.label)}
+		<GridInput
+			{item}
+			first={index == 0}
+			last={index == lastIndex}
+		/>
+	{/each}
+</div>
+
 <style>.grid {
   display: grid;
   grid-template-columns: [label] 16rem [value] 1fr;
   gap: 1px;
-  border: solid 1px #ced2d6;
+  border: solid 1px #dae0e5;
   border-radius: 4px;
-  background-color: #ced2d6;
-}</style>
+  background-color: #dae0e5;
+}</style>

package/dist/Components/GridInputSet.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { GridInputSetProps } from './GridInputSetProps.js';
-declare function $$render<V extends object, VP extends ValueProp<V>>(): {
+declare function $$render<V extends Record<string, unknown>, VP extends ValueProp<V>>(): {
     props: GridInputSetProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
+declare class __sveltets_Render<V extends Record<string, unknown>, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends Record<string, unknown>, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends Record<string, unknown>, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInputSet: $$IsomorphicComponent;
-type GridInputSet<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInputSet<V, VP>>;
+type GridInputSet<V extends Record<string, unknown>, VP extends ValueProp<V>> = InstanceType<typeof GridInputSet<V, VP>>;
 export default GridInputSet;

package/dist/Components/GridInputSetProps.d.ts

@@ -1,7 +1,9 @@
 import type { GridItem } from '../Types/Internal/GridItem.js';
 import type { ValueProp } from '../Types/Internal/Misc.js';
 import type { Snippet } from 'svelte';
-export interface GridInputSetProps<V extends object, VP extends ValueProp<V>> {
-    items: Array<GridItem<V, VP>>;
+export interface GridInputSetProps<V extends Record<string, unknown>, VP extends ValueProp<V>> {
+    /** Readonly list of grid item descriptors to render as rows. */
+    items: ReadonlyArray<GridItem<V, VP>>;
+    /** Optional header snippet rendered above the first row. */
     header?: Snippet;
 }