runeforge 0.0.61 → 0.0.63

package/dist/components/form/TreeNode.svelte

@@ -11,6 +11,8 @@
 		depth,
 		columns,
 		defaultExpanded,
+		visible = null,
+		forceExpanded = null
 	}: {
 		node: SelectOption;
 		childrenByParent: Map<string | null, SelectOption[]>;
@@ -20,11 +22,27 @@
 		depth: number;
 		columns: number;
 		defaultExpanded: boolean;
+		// Active search results: node values allowed to render, and the subset
+		// that must stay expanded because their match is in a descendant, not
+		// on the node itself. Both null outside of a search.
+		visible?: Set<string> | null;
+		forceExpanded?: Set<string> | null;
 	} = $props();
 
 	let expanded = $state(defaultExpanded);
 
-	const children = $derived(childrenByParent.get(node.value) ?? []);
+	// A search match below this node overrides manual collapse so the result
+	// is reachable; re-derived only when this node's forced state actually
+	// flips, so a manual collapse made afterwards (still mid-search) sticks.
+	const isForceExpanded = $derived(forceExpanded?.has(node.value) ?? false);
+	$effect(() => {
+		if (isForceExpanded) expanded = true;
+	});
+
+	const allChildren = $derived(childrenByParent.get(node.value) ?? []);
+	const children = $derived(
+		visible ? allChildren.filter((child) => visible.has(child.value)) : allChildren
+	);
 	const hasChildren = $derived(children.length > 0);
 </script>
 
@@ -60,7 +78,18 @@
 
 	{#if expanded && hasChildren}
 		{#each children as child (child.value)}
-			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} {defaultExpanded} />
+			<TreeNode
+				node={child}
+				{childrenByParent}
+				{selected}
+				{onToggle}
+				{disabled}
+				depth={depth + 1}
+				{columns}
+				{defaultExpanded}
+				{visible}
+				{forceExpanded}
+			/>
 		{/each}
 	{/if}
 </div>

package/dist/components/form/TreeNode.svelte.d.ts

@@ -9,6 +9,8 @@ type $$ComponentProps = {
     depth: number;
     columns: number;
     defaultExpanded: boolean;
+    visible?: Set<string> | null;
+    forceExpanded?: Set<string> | null;
 };
 declare const TreeNode: import("svelte").Component<$$ComponentProps, {}, "">;
 type TreeNode = ReturnType<typeof TreeNode>;

package/dist/components/navigation/Breadcrumbs.svelte

@@ -1,111 +1,111 @@
-<script lang="ts">
-  import { getIconSet } from '../../icons/context.js';
-  import { defaultIconSet } from '../../icons/sets/default.js';
-  import { getConfig } from '../../config/context.js';
-  import type { BreadcrumbItem } from '../../types/breadcrumb.js';
-
-  let {
-    items = [],
-    homeHref,
-  }: {
-    items?: BreadcrumbItem[];
-    homeHref?: string;
-  } = $props();
-
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-
-  const home: BreadcrumbItem = $derived({
-    label: 'Inicio',
-    icon: icons.home,
-    link: { href: homeHref ?? getConfig().homeHref ?? '/' },
-  });
-
-  const allItems = $derived([home, ...items]);
-</script>
-
-<div class="breadcrumbs">
-  <ul>
-    {#each allItems as item, i (i)}
-      <li>
-        {#if item.link !== undefined}
-          <a class="inline-flex items-center gap-2" {...item.link}>
-            {#if item.icon}
-              {@const ItemIcon = item.icon}
-              <ItemIcon />
-            {/if}
-            <span>{item.label}</span>
-          </a>
-        {:else}
-          <span class="inline-flex items-center gap-2">
-            {#if item.icon}
-              {@const ItemIcon = item.icon}
-              <ItemIcon />
-            {/if}
-            <span>{item.label}</span>
-          </span>
-        {/if}
-      </li>
-    {/each}
-  </ul>
-</div>
-
-<style>
-  div {
-    font-size: var(--runeforge-breadcrumb-font-size, 0.875rem);
-  }
-
-  :global(.breadcrumbs svg) {
-    width: var(--runeforge-breadcrumb-icon-size, 1rem);
-    height: var(--runeforge-breadcrumb-icon-size, 1rem);
-    flex-shrink: 0;
-  }
-
-  /*
-   * DaisyUI breadcrumbs use @layer rules that Tailwind v4 doesn't propagate
-   * from node_modules. These unlayered rules override that gap.
-   */
-  :global(.breadcrumbs > ul),
-  :global(.breadcrumbs > ol),
-  :global(.breadcrumbs > menu) {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    overflow-x: auto;
-  }
-
-  :global(.breadcrumbs > ul > li),
-  :global(.breadcrumbs > ol > li),
-  :global(.breadcrumbs > menu > li) {
-    display: flex;
-    align-items: center;
-  }
-
-  :global(.breadcrumbs > ul > li + li::before),
-  :global(.breadcrumbs > ol > li + li::before),
-  :global(.breadcrumbs > menu > li + li::before) {
-    content: '';
-    display: block;
-    opacity: 0.4;
-    border-top: 1px solid;
-    border-right: 1px solid;
-    width: 0.375rem;
-    height: 0.375rem;
-    margin-inline: 0.5rem 0.75rem;
-    rotate: 45deg;
-  }
-
-  /*
-   * Tailwind preflight sets svg { display: block }, which stacks icons above
-   * labels when the <a>/<span> inline-flex class isn't generated from node_modules.
-   */
-  :global(.breadcrumbs > ul > li > a),
-  :global(.breadcrumbs > ul > li > span),
-  :global(.breadcrumbs > ol > li > a),
-  :global(.breadcrumbs > ol > li > span),
-  :global(.breadcrumbs > menu > li > a),
-  :global(.breadcrumbs > menu > li > span) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-</style>
+<script lang="ts">
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import { getConfig } from '../../config/context.js';
+  import type { BreadcrumbItem } from '../../types/breadcrumb.js';
+
+  let {
+    items = [],
+    homeHref,
+  }: {
+    items?: BreadcrumbItem[];
+    homeHref?: string;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+
+  const home: BreadcrumbItem = $derived({
+    label: 'Inicio',
+    icon: icons.home,
+    link: { href: homeHref ?? getConfig().homeHref ?? '/' },
+  });
+
+  const allItems = $derived([home, ...items]);
+</script>
+
+<div class="breadcrumbs">
+  <ul>
+    {#each allItems as item, i (i)}
+      <li>
+        {#if item.link !== undefined}
+          <a class="inline-flex items-center gap-2" {...item.link}>
+            {#if item.icon}
+              {@const ItemIcon = item.icon}
+              <ItemIcon />
+            {/if}
+            <span>{item.label}</span>
+          </a>
+        {:else}
+          <span class="inline-flex items-center gap-2">
+            {#if item.icon}
+              {@const ItemIcon = item.icon}
+              <ItemIcon />
+            {/if}
+            <span>{item.label}</span>
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  div {
+    font-size: var(--runeforge-breadcrumb-font-size, 0.875rem);
+  }
+
+  :global(.breadcrumbs svg) {
+    width: var(--runeforge-breadcrumb-icon-size, 1rem);
+    height: var(--runeforge-breadcrumb-icon-size, 1rem);
+    flex-shrink: 0;
+  }
+
+  /*
+   * DaisyUI breadcrumbs use @layer rules that Tailwind v4 doesn't propagate
+   * from node_modules. These unlayered rules override that gap.
+   */
+  :global(.breadcrumbs > ul),
+  :global(.breadcrumbs > ol),
+  :global(.breadcrumbs > menu) {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+
+  :global(.breadcrumbs > ul > li),
+  :global(.breadcrumbs > ol > li),
+  :global(.breadcrumbs > menu > li) {
+    display: flex;
+    align-items: center;
+  }
+
+  :global(.breadcrumbs > ul > li + li::before),
+  :global(.breadcrumbs > ol > li + li::before),
+  :global(.breadcrumbs > menu > li + li::before) {
+    content: '';
+    display: block;
+    opacity: 0.4;
+    border-top: 1px solid;
+    border-right: 1px solid;
+    width: 0.375rem;
+    height: 0.375rem;
+    margin-inline: 0.5rem 0.75rem;
+    rotate: 45deg;
+  }
+
+  /*
+   * Tailwind preflight sets svg { display: block }, which stacks icons above
+   * labels when the <a>/<span> inline-flex class isn't generated from node_modules.
+   */
+  :global(.breadcrumbs > ul > li > a),
+  :global(.breadcrumbs > ul > li > span),
+  :global(.breadcrumbs > ol > li > a),
+  :global(.breadcrumbs > ol > li > span),
+  :global(.breadcrumbs > menu > li > a),
+  :global(.breadcrumbs > menu > li > span) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

package/dist/components/table/ColumnFilter.svelte

@@ -1,168 +1,168 @@
-<script lang="ts" generics="T extends object">
-	import { onMount } from 'svelte';
-	import Label from '../form/Label.svelte';
-	import Button from '../form/Button.svelte';
-	import { getIconSet } from '../../icons/context.js';
-	import { defaultIconSet } from '../../icons/sets/default.js';
-	import { getStrings } from '../../i18n/context.js';
-
-	const strings = getStrings();
-
-	onMount(() => {
-		import('cally');
-	});
-	import type { DistinctEntry } from '../../types/table.js';
-	import type { FilterState } from './state.svelte.js';
-	import type { ColumnDefinition } from '../../types/crud/columns.js';
-
-	let {
-		column,
-		entries = [],
-		filter,
-		maxCheckboxValues = 20,
-		onchange
-	}: {
-		column: ColumnDefinition<T>;
-		entries?: DistinctEntry<T>[];
-		filter: FilterState;
-		maxCheckboxValues?: number;
-		onchange?: () => void;
-	} = $props();
-
-	const icons = $derived(getIconSet() ?? defaultIconSet);
-	const popId = $derived(`filter-pop-${column.attribute}`);
-	const anchor = $derived(`--filter-anchor-${column.attribute}`);
-	const isDatetime = $derived(column.type === 'datetime');
-
-	const dateRange = $derived(filter.dateRangeFor(column.attribute));
-	const calendarValue = $derived(
-		dateRange.from || dateRange.to ? `${dateRange.from}/${dateRange.to}` : ''
-	);
-
-	let calendarEl: HTMLElement | undefined = $state();
-
-	$effect(() => {
-		if (!calendarEl) return;
-		function handler() {
-			const value = (calendarEl as HTMLElement & { value: string }).value ?? '';
-			const [from = '', to = ''] = value.split('/');
-			filter.setDateRange(column.attribute, from, to);
-			onchange?.();
-		}
-		calendarEl.addEventListener('change', handler);
-		return () => calendarEl?.removeEventListener('change', handler);
-	});
-
-	let debounceTimer: ReturnType<typeof setTimeout>;
-	function setText(value: string) {
-		filter.setText(column.attribute, value);
-		clearTimeout(debounceTimer);
-		debounceTimer = setTimeout(() => onchange?.(), 300);
-	}
-	function toggle(value: string) {
-		filter.toggleValue(column.attribute, value);
-		onchange?.();
-	}
-	function clear() {
-		filter.clear(column.attribute);
-		onchange?.();
-	}
-</script>
-
-<Button
-	variant="ghost"
-	class={['btn-xs btn-square', filter.hasActive(column.attribute) && 'text-primary']}
-	popovertarget={popId}
-	style="anchor-name:{anchor}"
-	aria-label={strings.filterColumn(column.title ?? column.attribute)}
-	title={strings.filter}
->
-	{#if filter.hasActive(column.attribute)}
-		{@const Icon = icons.filterActive}
-		<Icon class="size-3.5" />
-	{:else}
-		{@const Icon = icons.filter}
-		<Icon class="size-3.5" />
-	{/if}
-</Button>
-
-<div
-	popover="auto"
-	id={popId}
-	style="position-anchor:{anchor}; position-try-fallbacks:flip-block;"
-	class="dropdown dropdown-end rounded-box border border-base-content/10 bg-base-100 p-3 shadow-lg"
-	class:w-56={!isDatetime}
->
-	{#if isDatetime}
-		<calendar-range class="cally bg-base-100" value={calendarValue} bind:this={calendarEl}>
-			<svg
-				aria-label={strings.previous}
-				class="fill-current size-4"
-				{...{ slot: 'previous' }}
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg
-			>
-			<svg
-				aria-label={strings.next}
-				class="fill-current size-4"
-				{...{ slot: 'next' }}
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg
-			>
-			<calendar-month></calendar-month>
-		</calendar-range>
-		{#if dateRange.from || dateRange.to}
-			<p class="mt-2 text-center text-xs text-base-content/60">
-				{dateRange.from || '…'} → {dateRange.to || '…'}
-			</p>
-		{/if}
-		{#if filter.hasActive(column.attribute)}
-			<Button variant="ghost" class="btn-sm mt-2 w-full" onclick={clear}>
-				{strings.clearFilter}
-			</Button>
-		{/if}
-	{:else}
-		<div class="relative">
-			<input
-				type="text"
-				class={[
-					'input input-bordered input-sm w-full',
-					filter.hasActive(column.attribute) && 'pr-7'
-				]}
-				placeholder={strings.filterPlaceholder}
-				value={filter.textFor(column.attribute)}
-				oninput={(e) => setText(e.currentTarget.value)}
-			/>
-			{#if filter.hasActive(column.attribute)}
-				{@const Icon = icons.clear}
-				<Button
-					variant="ghost"
-					class="btn-xs btn-square btn-circle absolute top-1/2 right-1 -translate-y-1/2"
-					aria-label={strings.clearFilter}
-					title={strings.clearFilter}
-					onclick={clear}
-				>
-					<Icon class="size-3" />
-				</Button>
-			{/if}
-		</div>
-
-		{#if entries.length > 0 && entries.length < maxCheckboxValues}
-			<div class="mt-2 flex max-h-60 flex-col gap-1 overflow-y-auto">
-				{#each entries as entry (entry.key)}
-					<Label class="flex cursor-pointer items-center gap-2 text-sm font-normal normal-case">
-						<input
-							type="checkbox"
-							class="checkbox checkbox-xs shrink-0"
-							checked={filter.isChecked(column.attribute, entry.key)}
-							onchange={() => toggle(entry.key)}
-						/>
-						<span class="truncate">
-							{entry.key === '' ? strings.emptyValue : (entry.label ?? entry.key)}
-						</span>
-					</Label>
-				{/each}
-			</div>
-		{/if}
-	{/if}
-</div>
+<script lang="ts" generics="T extends object">
+	import { onMount } from 'svelte';
+	import Label from '../form/Label.svelte';
+	import Button from '../form/Button.svelte';
+	import { getIconSet } from '../../icons/context.js';
+	import { defaultIconSet } from '../../icons/sets/default.js';
+	import { getStrings } from '../../i18n/context.js';
+
+	const strings = getStrings();
+
+	onMount(() => {
+		import('cally');
+	});
+	import type { DistinctEntry } from '../../types/table.js';
+	import type { FilterState } from './state.svelte.js';
+	import type { ColumnDefinition } from '../../types/crud/columns.js';
+
+	let {
+		column,
+		entries = [],
+		filter,
+		maxCheckboxValues = 20,
+		onchange
+	}: {
+		column: ColumnDefinition<T>;
+		entries?: DistinctEntry<T>[];
+		filter: FilterState;
+		maxCheckboxValues?: number;
+		onchange?: () => void;
+	} = $props();
+
+	const icons = $derived(getIconSet() ?? defaultIconSet);
+	const popId = $derived(`filter-pop-${column.attribute}`);
+	const anchor = $derived(`--filter-anchor-${column.attribute}`);
+	const isDatetime = $derived(column.type === 'datetime');
+
+	const dateRange = $derived(filter.dateRangeFor(column.attribute));
+	const calendarValue = $derived(
+		dateRange.from || dateRange.to ? `${dateRange.from}/${dateRange.to}` : ''
+	);
+
+	let calendarEl: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!calendarEl) return;
+		function handler() {
+			const value = (calendarEl as HTMLElement & { value: string }).value ?? '';
+			const [from = '', to = ''] = value.split('/');
+			filter.setDateRange(column.attribute, from, to);
+			onchange?.();
+		}
+		calendarEl.addEventListener('change', handler);
+		return () => calendarEl?.removeEventListener('change', handler);
+	});
+
+	let debounceTimer: ReturnType<typeof setTimeout>;
+	function setText(value: string) {
+		filter.setText(column.attribute, value);
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => onchange?.(), 300);
+	}
+	function toggle(value: string) {
+		filter.toggleValue(column.attribute, value);
+		onchange?.();
+	}
+	function clear() {
+		filter.clear(column.attribute);
+		onchange?.();
+	}
+</script>
+
+<Button
+	variant="ghost"
+	class={['btn-xs btn-square', filter.hasActive(column.attribute) && 'text-primary']}
+	popovertarget={popId}
+	style="anchor-name:{anchor}"
+	aria-label={strings.filterColumn(column.title ?? column.attribute)}
+	title={strings.filter}
+>
+	{#if filter.hasActive(column.attribute)}
+		{@const Icon = icons.filterActive}
+		<Icon class="size-3.5" />
+	{:else}
+		{@const Icon = icons.filter}
+		<Icon class="size-3.5" />
+	{/if}
+</Button>
+
+<div
+	popover="auto"
+	id={popId}
+	style="position-anchor:{anchor}; position-try-fallbacks:flip-block;"
+	class="dropdown dropdown-end rounded-box border border-base-content/10 bg-base-100 p-3 shadow-lg"
+	class:w-56={!isDatetime}
+>
+	{#if isDatetime}
+		<calendar-range class="cally bg-base-100" value={calendarValue} bind:this={calendarEl}>
+			<svg
+				aria-label={strings.previous}
+				class="fill-current size-4"
+				{...{ slot: 'previous' }}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg
+			>
+			<svg
+				aria-label={strings.next}
+				class="fill-current size-4"
+				{...{ slot: 'next' }}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg
+			>
+			<calendar-month></calendar-month>
+		</calendar-range>
+		{#if dateRange.from || dateRange.to}
+			<p class="mt-2 text-center text-xs text-base-content/60">
+				{dateRange.from || '…'} → {dateRange.to || '…'}
+			</p>
+		{/if}
+		{#if filter.hasActive(column.attribute)}
+			<Button variant="ghost" class="btn-sm mt-2 w-full" onclick={clear}>
+				{strings.clearFilter}
+			</Button>
+		{/if}
+	{:else}
+		<div class="relative">
+			<input
+				type="text"
+				class={[
+					'input input-bordered input-sm w-full',
+					filter.hasActive(column.attribute) && 'pr-7'
+				]}
+				placeholder={strings.filterPlaceholder}
+				value={filter.textFor(column.attribute)}
+				oninput={(e) => setText(e.currentTarget.value)}
+			/>
+			{#if filter.hasActive(column.attribute)}
+				{@const Icon = icons.clear}
+				<Button
+					variant="ghost"
+					class="btn-xs btn-square btn-circle absolute top-1/2 right-1 -translate-y-1/2"
+					aria-label={strings.clearFilter}
+					title={strings.clearFilter}
+					onclick={clear}
+				>
+					<Icon class="size-3" />
+				</Button>
+			{/if}
+		</div>
+
+		{#if entries.length > 0 && entries.length < maxCheckboxValues}
+			<div class="mt-2 flex max-h-60 flex-col gap-1 overflow-y-auto">
+				{#each entries as entry (entry.key)}
+					<Label class="flex cursor-pointer items-center gap-2 text-sm font-normal normal-case">
+						<input
+							type="checkbox"
+							class="checkbox checkbox-xs shrink-0"
+							checked={filter.isChecked(column.attribute, entry.key)}
+							onchange={() => toggle(entry.key)}
+						/>
+						<span class="truncate">
+							{entry.key === '' ? strings.emptyValue : (entry.label ?? entry.key)}
+						</span>
+					</Label>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>