runeforge 0.0.55 → 0.0.56

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>

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>