runeforge 0.0.53 → 0.0.55

package/dist/components/form/Select.svelte

@@ -1,209 +1,209 @@
-<script lang="ts">
-	import { getStrings } from '../../i18n/context.js';
-	import type { SearchResolver } from '../../types/attribute.js';
-
-	const strings = getStrings();
-
-	let {
-		name,
-		id,
-		value = $bindable(''),
-		options = [],
-		search: searchFn,
-		searchDebounceMs = 300,
-		placeholder = strings.selectPlaceholder,
-		error = '',
-		disabled = false
-	}: {
-		name?: string;
-		id?: string;
-		value?: string;
-		options?: { value: string; label: string }[];
-		search?: SearchResolver;
-		searchDebounceMs?: number;
-		placeholder?: string;
-		error?: string;
-		disabled?: boolean;
-	} = $props();
-
-	const popId = $props.id();
-	const anchorName = `--select-anchor-${popId}`;
-
-	let query = $state('');
-	let open = $state(false);
-	let containerEl: HTMLElement | undefined = $state();
-	let popoverEl: HTMLElement | undefined = $state();
-	let inputEl: HTMLInputElement | undefined = $state();
-
-	// Options resolved by `searchFn` for the current query; null while no
-	// server search has run yet (e.g. box just opened, query still empty).
-	let remoteResults = $state<{ value: string; label: string }[] | null>(null);
-	let searching = $state(false);
-	// Label of whatever was last picked from `remoteResults`, kept around so the
-	// closed-state input can still show it even though it isn't in `options`.
-	let pickedLabel = $state<string | null>(null);
-
-	let searchToken = 0;
-	$effect(() => {
-		if (!searchFn) return;
-		const q = query.trim();
-		if (!q) {
-			remoteResults = null;
-			searching = false;
-			return;
-		}
-		const token = ++searchToken;
-		searching = true;
-		const timer = setTimeout(() => {
-			searchFn(q).then((results) => {
-				if (token !== searchToken) return; // stale response, a newer query took over
-				remoteResults = results;
-				searching = false;
-			});
-		}, searchDebounceMs);
-		return () => clearTimeout(timer);
-	});
-
-	const filtered = $derived(
-		searchFn
-			? (remoteResults ?? options)
-			: query.trim()
-				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
-				: options
-	);
-
-	const selectedLabel = $derived(
-		value === '' ? '' : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? '')
-	);
-
-	function openPopover() {
-		open = true;
-		query = '';
-		popoverEl?.showPopover();
-	}
-
-	function pick(option: { value: string; label: string }) {
-		value = option.value;
-		pickedLabel = option.label;
-		query = '';
-		popoverEl?.hidePopover();
-		inputEl?.blur();
-	}
-
-	function clear() {
-		value = '';
-		pickedLabel = null;
-		query = '';
-		popoverEl?.hidePopover();
-		inputEl?.blur();
-	}
-
-	// Catches dismissal paths that don't go through pick()/clear() (outside
-	// click, Escape), so a stale search doesn't linger for next time it opens.
-	function onToggle(e: Event) {
-		if ((e as ToggleEvent).newState === 'closed') {
-			open = false;
-			query = '';
-		}
-	}
-
-	// Escape can be pressed while an option button has focus (not just the
-	// text input), so this is wired at the container level rather than on
-	// the input alone — otherwise picking an option and then hitting Escape
-	// would leave the popover open with nothing listening for the key.
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && e.target === inputEl) {
-			// The trigger used to be a plain button, so Enter never submitted the
-			// surrounding form. Now that it's a text input, guard against that.
-			e.preventDefault();
-		} else if (e.key === 'Escape') {
-			// Also suppress the browser's native "revert to last value" behavior
-			// for text inputs on Escape, which would otherwise race our own
-			// close-and-restore-label update and blank the field.
-			e.preventDefault();
-			popoverEl?.hidePopover();
-		}
-	}
-
-	// The trigger is a text input now, not a button, so it can't rely on the
-	// native `popovertarget` invoker exclusion to survive its own opening
-	// click (that relationship only applies to button-like elements — for a
-	// text input, the click that focuses it and opens the popover would
-	// immediately light-dismiss it again). `popover="manual"` opts out of
-	// that dismiss behavior entirely; this handler reimplements "close when
-	// focus leaves the widget" instead.
-	function onFocusOut(e: FocusEvent) {
-		const next = e.relatedTarget as Node | null;
-		if (!next || !containerEl?.contains(next)) {
-			popoverEl?.hidePopover();
-		}
-	}
-</script>
-
-<!--
-  The keydown/focusout handlers here are event delegation for the input and
-  popover option buttons below, not interaction with this div itself — every
-  actually-interactive element inside already has correct native semantics.
--->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
-	{#if name}
-		<input type="hidden" {name} {value} />
-	{/if}
-
-	<input
-		bind:this={inputEl}
-		{id}
-		type="text"
-		class="input input-bordered w-full font-normal"
-		class:input-error={!!error}
-		{disabled}
-		{placeholder}
-		value={open ? query : selectedLabel}
-		oninput={(e) => (query = e.currentTarget.value)}
-		onfocus={openPopover}
-		style="anchor-name:{anchorName}"
-		autocomplete="off"
-	/>
-
-	<div
-		popover="manual"
-		id={popId}
-		bind:this={popoverEl}
-		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
-		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
-		ontoggle={onToggle}
-	>
-		<ul class="max-h-48 overflow-y-auto p-1">
-			<li>
-				<button
-					type="button"
-					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-					onclick={clear}
-				>
-					{placeholder}
-				</button>
-			</li>
-			{#if searching}
-				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
-			{/if}
-			{#each filtered as option (option.value)}
-				<li>
-					<button
-						type="button"
-						class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
-						class:bg-primary={value === option.value}
-						class:text-primary-content={value === option.value}
-						onclick={() => pick(option)}
-					>
-						{option.label}
-					</button>
-				</li>
-			{/each}
-			{#if !searching && filtered.length === 0}
-				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
-			{/if}
-		</ul>
-	</div>
-</div>
+<script lang="ts">
+	import { getStrings } from '../../i18n/context.js';
+	import type { SearchResolver } from '../../types/attribute.js';
+
+	const strings = getStrings();
+
+	let {
+		name,
+		id,
+		value = $bindable(''),
+		options = [],
+		search: searchFn,
+		searchDebounceMs = 300,
+		placeholder = strings.selectPlaceholder,
+		error = '',
+		disabled = false
+	}: {
+		name?: string;
+		id?: string;
+		value?: string;
+		options?: { value: string; label: string }[];
+		search?: SearchResolver;
+		searchDebounceMs?: number;
+		placeholder?: string;
+		error?: string;
+		disabled?: boolean;
+	} = $props();
+
+	const popId = $props.id();
+	const anchorName = `--select-anchor-${popId}`;
+
+	let query = $state('');
+	let open = $state(false);
+	let containerEl: HTMLElement | undefined = $state();
+	let popoverEl: HTMLElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	// Options resolved by `searchFn` for the current query; null while no
+	// server search has run yet (e.g. box just opened, query still empty).
+	let remoteResults = $state<{ value: string; label: string }[] | null>(null);
+	let searching = $state(false);
+	// Label of whatever was last picked from `remoteResults`, kept around so the
+	// closed-state input can still show it even though it isn't in `options`.
+	let pickedLabel = $state<string | null>(null);
+
+	let searchToken = 0;
+	$effect(() => {
+		if (!searchFn) return;
+		const q = query.trim();
+		if (!q) {
+			remoteResults = null;
+			searching = false;
+			return;
+		}
+		const token = ++searchToken;
+		searching = true;
+		const timer = setTimeout(() => {
+			searchFn(q).then((results) => {
+				if (token !== searchToken) return; // stale response, a newer query took over
+				remoteResults = results;
+				searching = false;
+			});
+		}, searchDebounceMs);
+		return () => clearTimeout(timer);
+	});
+
+	const filtered = $derived(
+		searchFn
+			? (remoteResults ?? options)
+			: query.trim()
+				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+				: options
+	);
+
+	const selectedLabel = $derived(
+		value === '' ? '' : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? '')
+	);
+
+	function openPopover() {
+		open = true;
+		query = '';
+		popoverEl?.showPopover();
+	}
+
+	function pick(option: { value: string; label: string }) {
+		value = option.value;
+		pickedLabel = option.label;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	function clear() {
+		value = '';
+		pickedLabel = null;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	// Catches dismissal paths that don't go through pick()/clear() (outside
+	// click, Escape), so a stale search doesn't linger for next time it opens.
+	function onToggle(e: Event) {
+		if ((e as ToggleEvent).newState === 'closed') {
+			open = false;
+			query = '';
+		}
+	}
+
+	// Escape can be pressed while an option button has focus (not just the
+	// text input), so this is wired at the container level rather than on
+	// the input alone — otherwise picking an option and then hitting Escape
+	// would leave the popover open with nothing listening for the key.
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && e.target === inputEl) {
+			// The trigger used to be a plain button, so Enter never submitted the
+			// surrounding form. Now that it's a text input, guard against that.
+			e.preventDefault();
+		} else if (e.key === 'Escape') {
+			// Also suppress the browser's native "revert to last value" behavior
+			// for text inputs on Escape, which would otherwise race our own
+			// close-and-restore-label update and blank the field.
+			e.preventDefault();
+			popoverEl?.hidePopover();
+		}
+	}
+
+	// The trigger is a text input now, not a button, so it can't rely on the
+	// native `popovertarget` invoker exclusion to survive its own opening
+	// click (that relationship only applies to button-like elements — for a
+	// text input, the click that focuses it and opens the popover would
+	// immediately light-dismiss it again). `popover="manual"` opts out of
+	// that dismiss behavior entirely; this handler reimplements "close when
+	// focus leaves the widget" instead.
+	function onFocusOut(e: FocusEvent) {
+		const next = e.relatedTarget as Node | null;
+		if (!next || !containerEl?.contains(next)) {
+			popoverEl?.hidePopover();
+		}
+	}
+</script>
+
+<!--
+  The keydown/focusout handlers here are event delegation for the input and
+  popover option buttons below, not interaction with this div itself — every
+  actually-interactive element inside already has correct native semantics.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+
+	<input
+		bind:this={inputEl}
+		{id}
+		type="text"
+		class="input input-bordered w-full font-normal"
+		class:input-error={!!error}
+		{disabled}
+		{placeholder}
+		value={open ? query : selectedLabel}
+		oninput={(e) => (query = e.currentTarget.value)}
+		onfocus={openPopover}
+		style="anchor-name:{anchorName}"
+		autocomplete="off"
+	/>
+
+	<div
+		popover="manual"
+		id={popId}
+		bind:this={popoverEl}
+		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
+		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
+		ontoggle={onToggle}
+	>
+		<ul class="max-h-48 overflow-y-auto p-1">
+			<li>
+				<button
+					type="button"
+					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
+					onclick={clear}
+				>
+					{placeholder}
+				</button>
+			</li>
+			{#if searching}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+			{/if}
+			{#each filtered as option (option.value)}
+				<li>
+					<button
+						type="button"
+						class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+						class:bg-primary={value === option.value}
+						class:text-primary-content={value === option.value}
+						onclick={() => pick(option)}
+					>
+						{option.label}
+					</button>
+				</li>
+			{/each}
+			{#if !searching && filtered.length === 0}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+			{/if}
+		</ul>
+	</div>
+</div>

package/dist/components/form/Tree.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import type { SelectOption } from '../../types/attribute.js';
-	import { buildChildrenByParent, collectDescendantIds } from '../crud/utils/tree.js';
-	import TreeNode from './TreeNode.svelte';
-
-	let {
-		name,
-		value = $bindable([]),
-		options = [],
-		disabled = false,
-		columns = 1,
-		defaultExpanded = true,
-	}: {
-		name?: string;
-		value?: string[];
-		options?: SelectOption[];
-		disabled?: boolean;
-		columns?: number;
-		defaultExpanded?: boolean;
-	} = $props();
-
-	const childrenByParent = $derived(buildChildrenByParent(options));
-	const selected = $derived(new Set(value));
-	const roots = $derived(childrenByParent.get(null) ?? []);
-
-	function toggle(nodeValue: string, checked: boolean) {
-		const affected = [nodeValue, ...collectDescendantIds(nodeValue, childrenByParent)];
-		if (checked) {
-			value = [...new Set([...value, ...affected])];
-		} else {
-			const affectedSet = new Set(affected);
-			value = value.filter((v) => !affectedSet.has(v));
-		}
-	}
-</script>
-
-<div
-	class="overflow-y-auto rounded-box border border-base-300 p-2"
-	style="max-height: var(--runeforge-tree-max-height, 24rem)"
-	class:opacity-50={disabled}
-	class:pointer-events-none={disabled}
->
-	{#if name}
-		<input type="hidden" {name} value={JSON.stringify(value)} />
-	{/if}
-	{#if roots.length === 0}
-		<p class="px-1 py-2 text-sm text-base-content/40">—</p>
-	{/if}
-	<div class:leaf-columns={columns > 1} style={`--columns: ${columns}`}>
-		{#each roots as root (root.value)}
-			<TreeNode node={root} {childrenByParent} {selected} onToggle={toggle} {disabled} depth={0} {columns} {defaultExpanded} />
-		{/each}
-	</div>
-</div>
-
-<style>
-	@media (min-width: 1024px) {
-		.leaf-columns {
-			columns: var(--columns);
-		}
-	}
-</style>
+<script lang="ts">
+	import type { SelectOption } from '../../types/attribute.js';
+	import { buildChildrenByParent, collectDescendantIds } from '../crud/utils/tree.js';
+	import TreeNode from './TreeNode.svelte';
+
+	let {
+		name,
+		value = $bindable([]),
+		options = [],
+		disabled = false,
+		columns = 1,
+		defaultExpanded = true,
+	}: {
+		name?: string;
+		value?: string[];
+		options?: SelectOption[];
+		disabled?: boolean;
+		columns?: number;
+		defaultExpanded?: boolean;
+	} = $props();
+
+	const childrenByParent = $derived(buildChildrenByParent(options));
+	const selected = $derived(new Set(value));
+	const roots = $derived(childrenByParent.get(null) ?? []);
+
+	function toggle(nodeValue: string, checked: boolean) {
+		const affected = [nodeValue, ...collectDescendantIds(nodeValue, childrenByParent)];
+		if (checked) {
+			value = [...new Set([...value, ...affected])];
+		} else {
+			const affectedSet = new Set(affected);
+			value = value.filter((v) => !affectedSet.has(v));
+		}
+	}
+</script>
+
+<div
+	class="overflow-y-auto rounded-box border border-base-300 p-2"
+	style="max-height: var(--runeforge-tree-max-height, 24rem)"
+	class:opacity-50={disabled}
+	class:pointer-events-none={disabled}
+>
+	{#if name}
+		<input type="hidden" {name} value={JSON.stringify(value)} />
+	{/if}
+	{#if roots.length === 0}
+		<p class="px-1 py-2 text-sm text-base-content/40">—</p>
+	{/if}
+	<div class:leaf-columns={columns > 1} style={`--columns: ${columns}`}>
+		{#each roots as root (root.value)}
+			<TreeNode node={root} {childrenByParent} {selected} onToggle={toggle} {disabled} depth={0} {columns} {defaultExpanded} />
+		{/each}
+	</div>
+</div>
+
+<style>
+	@media (min-width: 1024px) {
+		.leaf-columns {
+			columns: var(--columns);
+		}
+	}
+</style>

package/dist/components/form/TreeNode.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-	import type { SelectOption } from '../../types/attribute.js';
-	import TreeNode from './TreeNode.svelte';
-
-	let {
-		node,
-		childrenByParent,
-		selected,
-		onToggle,
-		disabled,
-		depth,
-		columns,
-		defaultExpanded,
-	}: {
-		node: SelectOption;
-		childrenByParent: Map<string | null, SelectOption[]>;
-		selected: Set<string>;
-		onToggle: (value: string, checked: boolean) => void;
-		disabled: boolean;
-		depth: number;
-		columns: number;
-		defaultExpanded: boolean;
-	} = $props();
-
-	let expanded = $state(defaultExpanded);
-
-	const children = $derived(childrenByParent.get(node.value) ?? []);
-	const hasChildren = $derived(children.length > 0);
-</script>
-
-<div class="flex flex-col" style={`--columns: ${columns}`}>
-	<div
-		class="flex w-full items-center gap-1 rounded py-1 pr-2 transition-colors hover:bg-base-200"
-		style={`padding-left: ${depth * 1.25}rem`}
-	>
-		{#if hasChildren}
-			<button
-				type="button"
-				class="btn btn-ghost btn-xs btn-circle"
-				aria-label={expanded ? 'Collapse' : 'Expand'}
-				onclick={() => (expanded = !expanded)}
-			>
-				<span class="inline-block text-xs transition-transform" class:rotate-90={expanded}>▸</span>
-			</button>
-		{:else}
-			<span class="inline-block size-6"></span>
-		{/if}
-
-		<input
-			type="checkbox"
-			class="checkbox checkbox-sm"
-			checked={selected.has(node.value)}
-			{disabled}
-			onchange={(e) => onToggle(node.value, (e.currentTarget as HTMLInputElement).checked)}
-			aria-label={node.label}
-		/>
-
-		<span>{node.label}</span>
-	</div>
-
-	{#if expanded && hasChildren}
-		{#each children as child (child.value)}
-			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} {defaultExpanded} />
-		{/each}
-	{/if}
-</div>
+<script lang="ts">
+	import type { SelectOption } from '../../types/attribute.js';
+	import TreeNode from './TreeNode.svelte';
+
+	let {
+		node,
+		childrenByParent,
+		selected,
+		onToggle,
+		disabled,
+		depth,
+		columns,
+		defaultExpanded,
+	}: {
+		node: SelectOption;
+		childrenByParent: Map<string | null, SelectOption[]>;
+		selected: Set<string>;
+		onToggle: (value: string, checked: boolean) => void;
+		disabled: boolean;
+		depth: number;
+		columns: number;
+		defaultExpanded: boolean;
+	} = $props();
+
+	let expanded = $state(defaultExpanded);
+
+	const children = $derived(childrenByParent.get(node.value) ?? []);
+	const hasChildren = $derived(children.length > 0);
+</script>
+
+<div class="flex flex-col" style={`--columns: ${columns}`}>
+	<div
+		class="flex w-full items-center gap-1 rounded py-1 pr-2 transition-colors hover:bg-base-200"
+		style={`padding-left: ${depth * 1.25}rem`}
+	>
+		{#if hasChildren}
+			<button
+				type="button"
+				class="btn btn-ghost btn-xs btn-circle"
+				aria-label={expanded ? 'Collapse' : 'Expand'}
+				onclick={() => (expanded = !expanded)}
+			>
+				<span class="inline-block text-xs transition-transform" class:rotate-90={expanded}>▸</span>
+			</button>
+		{:else}
+			<span class="inline-block size-6"></span>
+		{/if}
+
+		<input
+			type="checkbox"
+			class="checkbox checkbox-sm"
+			checked={selected.has(node.value)}
+			{disabled}
+			onchange={(e) => onToggle(node.value, (e.currentTarget as HTMLInputElement).checked)}
+			aria-label={node.label}
+		/>
+
+		<span>{node.label}</span>
+	</div>
+
+	{#if expanded && hasChildren}
+		{#each children as child (child.value)}
+			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} {defaultExpanded} />
+		{/each}
+	{/if}
+</div>