runeforge 0.0.55 → 0.0.57

package/dist/components/Avatar.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-  let {
-    src = null,
-    text = '',
-    alt = '',
-    class: className = 'w-10 rounded-full',
-    textClass = '',
-  }: {
-    src?: string | null;
-    text?: string;
-    alt?: string;
-    class?: string;
-    textClass?: string;
-  } = $props();
-
-  const placeholder = $derived(text.trim().slice(0, 2).toUpperCase() || '?');
-</script>
-
-{#if src}
-  <div class="avatar">
-    <div class={className}>
-      <img {src} {alt} />
-    </div>
-  </div>
-{:else}
-  <div class="avatar avatar-placeholder">
-    <div class="bg-neutral text-neutral-content {className}">
-      <span class={textClass}>{placeholder}</span>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  let {
+    src = null,
+    text = '',
+    alt = '',
+    class: className = 'w-10 rounded-full',
+    textClass = '',
+  }: {
+    src?: string | null;
+    text?: string;
+    alt?: string;
+    class?: string;
+    textClass?: string;
+  } = $props();
+
+  const placeholder = $derived(text.trim().slice(0, 2).toUpperCase() || '?');
+</script>
+
+{#if src}
+  <div class="avatar">
+    <div class={className}>
+      <img {src} {alt} />
+    </div>
+  </div>
+{:else}
+  <div class="avatar avatar-placeholder">
+    <div class="bg-neutral text-neutral-content {className}">
+      <span class={textClass}>{placeholder}</span>
+    </div>
+  </div>
+{/if}

package/dist/components/IconRenderer.svelte

@@ -1,22 +1,73 @@
-<script lang="ts">
-  import { getIconSet } from '../icons/context.js';
-
-  let {
-    name,
-    size = '1em',
-    class: className = '',
-  }: {
-    name: string;
-    size?: string | number;
-    class?: string;
-  } = $props();
-
-  const icons = $derived(getIconSet());
-  const IconComponent = $derived(icons?.getByName?.(name) ?? null);
-</script>
-
-{#if IconComponent}
-  <IconComponent {size} class={className} />
-{:else}
-  <span class={className} title={name}></span>
-{/if}
+<script lang="ts" module>
+  // Module-scoped so every IconRenderer instance shares one fetch/cache per
+  // URL instead of re-requesting the same SVG file.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const cache = new Map<string, Promise<string | null>>();
+
+  async function loadSvg(url: string): Promise<string | null> {
+    let pending = cache.get(url);
+    if (!pending) {
+      pending = fetch(url)
+        .then((res) => (res.ok ? res.text() : null))
+        .catch(() => null);
+      cache.set(url, pending);
+    }
+    const svg = await pending;
+    if (svg === null) cache.delete(url);
+    return svg;
+  }
+
+  /** Stamps `class`/width/height onto the fetched markup's root `<svg>` tag
+   * so Tailwind sizing and `currentColor` theming apply the same way they
+   * would to a hand-written inline SVG. */
+  function styleSvg(svg: string, className: string, size: string): string {
+    return svg.replace(
+      '<svg',
+      `<svg class="${className}" width="${size}" height="${size}"`
+    );
+  }
+</script>
+
+<script lang="ts">
+  import { getIconAssetsPath } from '../icons/context.js';
+
+  let {
+    name,
+    basePath,
+    size = '1em',
+    class: className = '',
+  }: {
+    name: string;
+    /** Overrides the `setIconAssetsPath` context value for this instance. */
+    basePath?: string;
+    size?: string | number;
+    class?: string;
+  } = $props();
+
+  const resolvedBasePath = $derived(basePath ?? getIconAssetsPath());
+  const dimension = $derived(typeof size === 'number' ? `${size}px` : size);
+  const src = $derived(name ? `${resolvedBasePath}/${name}` : null);
+
+  let markup = $state<string | null>(null);
+
+  $effect(() => {
+    if (!src) {
+      markup = null;
+      return;
+    }
+    let cancelled = false;
+    loadSvg(src).then((svg) => {
+      if (!cancelled) markup = svg;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
+</script>
+
+{#if markup}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html styleSvg(markup, className, dimension)}
+{:else}
+  <span class={className} title={name}></span>
+{/if}

package/dist/components/IconRenderer.svelte.d.ts

@@ -1,5 +1,7 @@
 type $$ComponentProps = {
     name: string;
+    /** Overrides the `setIconAssetsPath` context value for this instance. */
+    basePath?: string;
     size?: string | number;
     class?: string;
 };

package/dist/components/Modal.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Button from './form/Button.svelte';
-
-  let {
-    title = '',
-    onClose,
-    closeOnClickOutside = true,
-    onClickOutside,
-    children,
-    class: additionalClass,
-    width,
-    maxWidth,
-    height,
-    maxHeight,
-  }: {
-    title?: string;
-    onClose?: () => void;
-    /** Whether clicking the backdrop (outside the modal box) closes the modal. */
-    closeOnClickOutside?: boolean;
-    /** Callback invoked when clicking outside the modal. Defaults to `onClose`. */
-    onClickOutside?: () => void;
-    children: Snippet;
-    /** Extra classes merged onto the modal box, e.g. Tailwind size utilities
-     * like `max-w-4xl` or `w-11/12`. */
-    class?: string;
-    /** Explicit size overrides (any valid CSS length, e.g. '600px', '90vw').
-     * Applied as inline styles, so they take priority over `class` utilities. */
-    width?: string;
-    maxWidth?: string;
-    height?: string;
-    maxHeight?: string;
-  } = $props();
-
-  const handleClickOutside = $derived(onClickOutside ?? onClose);
-
-  const boxStyle = $derived(
-    [
-      width ? `width:${width}` : '',
-      maxWidth ? `max-width:${maxWidth}` : '',
-      height ? `height:${height}` : '',
-      maxHeight ? `max-height:${maxHeight}` : '',
-    ]
-      .filter(Boolean)
-      .join(';')
-  );
-</script>
-
-<dialog class="modal" open>
-  <div class={['modal-box', additionalClass]} style={boxStyle}>
-    <div class="flex items-center justify-between gap-4">
-      <h3 class="text-lg font-bold">{title}</h3>
-      {#if onClose}
-        <Button
-          variant="ghost"
-          class="btn-circle"
-          aria-label="Cerrar"
-          onclick={onClose}
-        >
-          ✕
-        </Button>
-      {/if}
-    </div>
-
-    <div class="divider my-2"></div>
-
-    {@render children()}
-  </div>
-
-  {#if closeOnClickOutside && handleClickOutside}
-    <div class="modal-backdrop">
-      <button onclick={handleClickOutside} aria-label="Cerrar"></button>
-    </div>
-  {/if}
-</dialog>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Button from './form/Button.svelte';
+
+  let {
+    title = '',
+    onClose,
+    closeOnClickOutside = true,
+    onClickOutside,
+    children,
+    class: additionalClass,
+    width,
+    maxWidth,
+    height,
+    maxHeight,
+  }: {
+    title?: string;
+    onClose?: () => void;
+    /** Whether clicking the backdrop (outside the modal box) closes the modal. */
+    closeOnClickOutside?: boolean;
+    /** Callback invoked when clicking outside the modal. Defaults to `onClose`. */
+    onClickOutside?: () => void;
+    children: Snippet;
+    /** Extra classes merged onto the modal box, e.g. Tailwind size utilities
+     * like `max-w-4xl` or `w-11/12`. */
+    class?: string;
+    /** Explicit size overrides (any valid CSS length, e.g. '600px', '90vw').
+     * Applied as inline styles, so they take priority over `class` utilities. */
+    width?: string;
+    maxWidth?: string;
+    height?: string;
+    maxHeight?: string;
+  } = $props();
+
+  const handleClickOutside = $derived(onClickOutside ?? onClose);
+
+  const boxStyle = $derived(
+    [
+      width ? `width:${width}` : '',
+      maxWidth ? `max-width:${maxWidth}` : '',
+      height ? `height:${height}` : '',
+      maxHeight ? `max-height:${maxHeight}` : '',
+    ]
+      .filter(Boolean)
+      .join(';')
+  );
+</script>
+
+<dialog class="modal" open>
+  <div class={['modal-box', additionalClass]} style={boxStyle}>
+    <div class="flex items-center justify-between gap-4">
+      <h3 class="text-lg font-bold">{title}</h3>
+      {#if onClose}
+        <Button
+          variant="ghost"
+          class="btn-circle"
+          aria-label="Cerrar"
+          onclick={onClose}
+        >
+          ✕
+        </Button>
+      {/if}
+    </div>
+
+    <div class="divider my-2"></div>
+
+    {@render children()}
+  </div>
+
+  {#if closeOnClickOutside && handleClickOutside}
+    <div class="modal-backdrop">
+      <button onclick={handleClickOutside} aria-label="Cerrar"></button>
+    </div>
+  {/if}
+</dialog>

package/dist/components/common/Header.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Breadcrumbs from '../navigation/Breadcrumbs.svelte';
-  import type { BreadcrumbItem } from '../../types/breadcrumb.js';
-
-  let {
-    title,
-    breadcrumbs = [],
-    buttons,
-  }: {
-    title: string;
-    breadcrumbs?: BreadcrumbItem[];
-    buttons?: Snippet;
-  } = $props();
-</script>
-
-<div class="header-root flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-  <div class="flex flex-col gap-1 flex-1">
-    <h1>{title}</h1>
-    <Breadcrumbs items={breadcrumbs} />
-  </div>
-
-  {#if buttons}
-    <div class="flex min-w-0 items-center gap-2 sm:pt-1">
-      {@render buttons()}
-    </div>
-  {/if}
-</div>
-
-<style>
-  h1 {
-    font-size: var(--runeforge-crud-title-size, 1.875rem);
-  }
-
-  .header-root {
-    width: 100%;
-    max-width: var(--runeforge-crud-max-width);
-    margin-inline: auto;
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Breadcrumbs from '../navigation/Breadcrumbs.svelte';
+  import type { BreadcrumbItem } from '../../types/breadcrumb.js';
+
+  let {
+    title,
+    breadcrumbs = [],
+    buttons,
+  }: {
+    title: string;
+    breadcrumbs?: BreadcrumbItem[];
+    buttons?: Snippet;
+  } = $props();
+</script>
+
+<div class="header-root flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+  <div class="flex flex-col gap-1 flex-1">
+    <h1>{title}</h1>
+    <Breadcrumbs items={breadcrumbs} />
+  </div>
+
+  {#if buttons}
+    <div class="flex min-w-0 items-center gap-2 sm:pt-1">
+      {@render buttons()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  h1 {
+    font-size: var(--runeforge-crud-title-size, 1.875rem);
+  }
+
+  .header-root {
+    width: 100%;
+    max-width: var(--runeforge-crud-max-width);
+    margin-inline: auto;
+  }
+</style>