layerchart 2.0.0-next.5 → 2.0.0-next.7

package/dist/components/RadialGradient.svelte

@@ -102,6 +102,7 @@
     fx = cx,
     fy = cy,
     r = '50%',
+    // fr = '0%'; // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
     spreadMethod = 'pad',
     transform = undefined,
     units = 'objectBoundingBox',
@@ -111,9 +112,6 @@
     ...restProps
   }: RadialGradientProps = $props();
 
-  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-  // export let fr = '0%';
-
   const ctx = getChartContext();
 
   const renderCtx = getRenderContext();

package/dist/components/charts/ArcChart.svelte

@@ -264,8 +264,8 @@
       placement: 'bottom',
       variant: 'swatches',
       onclick: (e, item) => {
-        selectedKeys.toggleSelected(item.value);
-        selectedSeries.toggleSelected(item.value);
+        selectedKeys.toggle(item.value);
+        selectedSeries.toggle(item.value);
       },
       onpointerenter: (e, item) => (highlightKey.current = item.value),
       onpointerleave: (e) => (highlightKey.current = null),

package/dist/components/charts/DefaultTooltip.svelte

@@ -41,7 +41,7 @@
       {/each}
 
       {#if canHaveTotal && payload.length > 1 && !tooltipProps?.hideTotal}
-        <Tooltip.Separator {...tooltipProps?.separator} />
+        <Tooltip.Separator {...tooltipProps?.separator} children={undefined} />
 
         <Tooltip.Item
           label="total"

package/dist/components/charts/PieChart.svelte

@@ -281,9 +281,9 @@
       placement: 'bottom',
       variant: 'swatches',
       onclick: (e, item) => {
-        selectedKeys.toggleSelected(item.value);
+        selectedKeys.toggle(item.value);
         // TODO: investigate
-        // selectedSeries.toggleSelected(item.value);
+        // selectedSeries.toggle(item.value);
       },
       onpointerenter: (e, item) => (highlightKey.current = item.value),
       onpointerleave: (e) => (highlightKey.current = null),

package/dist/components/charts/utils.svelte.js

@@ -13,6 +13,10 @@ export class SeriesState {
     highlightKey = new HighlightKey();
     constructor(getSeries) {
         this.#series = getSeries();
+        $effect.pre(() => {
+            // keep series state in sync with the prop
+            this.#series = getSeries();
+        });
     }
     get series() {
         return this.#series;
@@ -40,7 +44,7 @@ export function createLegendProps(opts) {
         tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
         placement: 'bottom',
         variant: 'swatches',
-        onclick: (_, item) => opts.seriesState.selectedSeries.toggleSelected(item.value),
+        onclick: (_, item) => opts.seriesState.selectedSeries.toggle(item.value),
         onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
         onpointerleave: () => (opts.seriesState.highlightKey.current = null),
         ...opts.props,

package/dist/components/layout/Canvas.svelte

@@ -64,6 +64,13 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
+
     /**
      * Show the hit canvas for debugging purposes.
      *
@@ -144,13 +151,13 @@
   import { onMount, untrack, type Snippet } from 'svelte';
   import { cls } from '@layerstack/tailwind';
   import { Logger, localPoint } from '@layerstack/utils';
-  import { darkColorScheme } from '@layerstack/svelte-stores';
+  import { MediaQueryPresets } from '@layerstack/svelte-state';
 
   import { setRenderContext } from '../Chart.svelte';
   import { getTransformContext } from '../TransformContext.svelte';
   import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
-  import { Context } from 'runed';
+  import { Context, useMutationObserver, watch } from 'runed';
   import type {
     HTMLCanvasAttributes,
     MouseEventHandler,
@@ -171,6 +178,7 @@
     fallback,
     center = false,
     ignoreTransform = false,
+    disableHitCanvas = false,
     class: className,
     children,
     onclick,
@@ -256,6 +264,23 @@
    * end HitCanvas
    */
 
+  // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
+  const { dark } = new MediaQueryPresets();
+  watch(
+    () => dark.current,
+    () => {
+      canvasContext.invalidate();
+    }
+  );
+  useMutationObserver(
+    () => document.documentElement,
+    () => canvasContext.invalidate(),
+    {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    }
+  );
+
   onMount(() => {
     context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
 
@@ -263,22 +288,7 @@
       willReadFrequently: false, // Explicitly set to `false` to resolve pixel artifacts between fill and stroke with the same color (issue #372)
     }) as CanvasRenderingContext2D;
 
-    // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
-    darkColorScheme.subscribe(() => {
-      canvasContext.invalidate();
-    });
-
-    const observer = new MutationObserver(() => {
-      canvasContext.invalidate();
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class', 'data-theme'],
-    });
-
     return () => {
-      observer.disconnect();
       if (frameId) {
         cancelAnimationFrame(frameId);
       }
@@ -366,7 +376,7 @@
       for (const c of nonRetainStateComponents) {
         const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
 
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
+        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging && !disableHitCanvas) {
           const color = getColorStr(colorGenerator.next().value);
           const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
 

package/dist/components/layout/Canvas.svelte.d.ts

@@ -55,6 +55,12 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *

package/dist/docs/Blockquote.svelte

@@ -2,6 +2,8 @@
   import { mdiInformation } from '@mdi/js';
   import { Icon } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+
+  const { children } = $props();
 </script>
 
 <div
@@ -11,5 +13,5 @@
   )}
 >
   <Icon data={mdiInformation} class="text-primary" />
-  <slot />
+  {@render children()}
 </div>

package/dist/docs/Blockquote.svelte.d.ts

@@ -1,20 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Blockquote = InstanceType<typeof Blockquote>;
+declare const Blockquote: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/docs/Code.svelte

@@ -4,20 +4,28 @@
   import { CopyButton } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
-  export let source: string | null = null;
-  export let language = 'svelte';
-  export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
-    : '';
-
-  export let classes: {
-    root?: string;
-    pre?: string;
-    code?: string;
-  } = {};
+  const {
+    source = null,
+    language = 'svelte',
+    highlightedSource = source
+      ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
+      : '',
+    classes = {},
+    class: className,
+  }: {
+    source: string | null;
+    language: string;
+    highlightedSource: string;
+    classes: {
+      root?: string;
+      pre?: string;
+      code?: string;
+    };
+    class: string;
+  } = $props();
 </script>
 
-<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', classes.root, className)}>
   {#if source}
     <div class="relative">
       <pre

package/dist/docs/Code.svelte.d.ts

@@ -1,29 +1,15 @@
 import 'prism-svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Code: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    source?: string | null | undefined;
-    language?: string | undefined;
-    highlightedSource?: string | undefined;
-    classes?: {
+type $$ComponentProps = {
+    source: string | null;
+    language: string;
+    highlightedSource: string;
+    classes: {
         root?: string;
         pre?: string;
         code?: string;
-    } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Code = InstanceType<typeof Code>;
+    };
+    class: string;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/docs/Header1.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { SectionDivider } from 'svelte-ux';
+
+  let { children, ...restProps } = $props();
 </script>
 
 <!--
@@ -9,6 +11,6 @@
       - Maybe possible to set/get props from markdown/mdsvex
         - Example: `#API { id: 'api' }
 -->
-<SectionDivider {...$$restProps}>
-  <slot />
+<SectionDivider {...restProps}>
+  {@render children()}
 </SectionDivider>

package/dist/docs/Header1.svelte.d.ts

@@ -1,29 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Header1: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Header1 = InstanceType<typeof Header1>;
+declare const Header1: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Header1 = ReturnType<typeof Header1>;
 export default Header1;

package/dist/docs/Json.svelte

@@ -2,11 +2,10 @@
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  export let value: any;
-  export let defaultExpandedPaths = ['$'];
+  const { value, defaultExpandedPaths = ['$'], class: className } = $props();
 </script>
 
-<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', $$props.class)}>
+<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>
   <JsonTree
     {value}
     {defaultExpandedPaths}

package/dist/docs/Json.svelte.d.ts

@@ -1,22 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Json: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+declare const Json: import("svelte").Component<{
     value: any;
-    defaultExpandedPaths?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Json = InstanceType<typeof Json>;
+    defaultExpandedPaths?: any[];
+    class: any;
+}, {}, "">;
+type Json = ReturnType<typeof Json>;
 export default Json;

package/dist/docs/Layout.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   // Custom components: https://mdsvex.com/docs#custom-components
   import blockquote from './Blockquote.svelte';
   import a from './Link.svelte';
@@ -8,11 +8,14 @@
 </script>
 
 <script lang="ts">
-  // frontmatter: https://mdsvex.com/docs#frontmatter-1
-  // export let name = undefined;
-  // export let sourceUrl = undefined;
-  // export let docUrl = undefined;
-  // export let description = undefined;
+  let {
+    // frontmatter: https://mdsvex.com/docs#frontmatter-1
+    // name,
+    // sourceUrl,
+    // docUrl,
+    // description,
+    children,
+  } = $props();
 </script>
 
-<slot />
+{@render children()}

package/dist/docs/Layout.svelte.d.ts

@@ -1,23 +1,8 @@
 import blockquote from './Blockquote.svelte';
 import a from './Link.svelte';
 export { a, blockquote };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Layout: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Layout = InstanceType<typeof Layout>;
+declare const Layout: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/dist/docs/Link.svelte

@@ -1,5 +1,9 @@
+<script lang="ts">
+  let { children, ...restProps } = $props();
+</script>
+
 <!-- href provided by markdown/mdsvex -->
-<!-- svelte-ignore a11y-missing-attribute -->
-<a class="text-primary font-medium" {...$$restProps}>
-  <slot />
+<!-- svelte-ignore a11y_missing_attribute -->
+<a class="text-primary font-medium" {...restProps}>
+  {@render children()}
 </a>

package/dist/docs/Link.svelte.d.ts

@@ -1,39 +1,5 @@
+declare const Link: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Link = ReturnType<typeof Link>;
 export default Link;
-type Link = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Link: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/docs/ViewSourceButton.svelte

@@ -5,10 +5,13 @@
 
   import Code from './Code.svelte';
 
-  export let label: string;
-  export let source: string | undefined = undefined;
-  export let href: string | undefined = undefined;
-  export let icon: ComponentProps<Button>['icon'];
+  const {
+    label,
+    source,
+    href,
+    icon,
+  }: { label: string; source?: string; href?: string; icon: ComponentProps<Button>['icon'] } =
+    $props();
 </script>
 
 {#if source}

package/dist/docs/ViewSourceButton.svelte.d.ts

@@ -1,25 +1,11 @@
 import type { ComponentProps } from 'svelte';
 import { Button } from 'svelte-ux';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ViewSourceButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     label: string;
-    source?: string | undefined;
-    href?: string | undefined;
-    icon: ComponentProps<Button>["icon"];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ViewSourceButton = InstanceType<typeof ViewSourceButton>;
+    source?: string;
+    href?: string;
+    icon: ComponentProps<Button>['icon'];
+};
+declare const ViewSourceButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewSourceButton = ReturnType<typeof ViewSourceButton>;
 export default ViewSourceButton;

package/package.json

@@ -4,19 +4,19 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.5",
+  "version": "2.0.0-next.7",
   "devDependencies": {
-    "@changesets/cli": "^2.29.2",
+    "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.42",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
-    "@sveltejs/adapter-cloudflare": "^4.9.0",
-    "@sveltejs/kit": "^2.20.8",
+    "@sveltejs/adapter-cloudflare": "^7.0.3",
+    "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.7",
     "@types/d3": "^7.4.3",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -42,22 +42,22 @@
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "marked": "^15.0.11",
-    "mdsvex": "0.12.3",
-    "posthog-js": "^1.239.0",
+    "mdsvex": "^0.12.3",
+    "posthog-js": "^1.242.2",
     "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.28.2",
-    "svelte-check": "^4.1.6",
+    "svelte": "5.30.1",
+    "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
     "svelte-ux": "2.0.0-next.2",
-    "svelte2tsx": "^0.7.36",
-    "tailwindcss": "^4.1.5",
+    "svelte2tsx": "^0.7.39",
+    "tailwindcss": "^4.1.7",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
@@ -65,17 +65,16 @@
     "unist-util-visit": "^5.0.0",
     "unplugin-icons": "^22.1.0",
     "us-atlas": "^3.0.1",
-    "vite": "^6.3.4",
-    "vitest": "^3.1.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   },
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "1.0.1-next.0",
-    "@layerstack/svelte-state": "0.1.0-next.1",
-    "@layerstack/svelte-stores": "1.0.2-next.0",
-    "@layerstack/tailwind": "2.0.0-next.2",
-    "@layerstack/utils": "1.1.0-next.0",
+    "@layerstack/svelte-actions": "1.0.1-next.2",
+    "@layerstack/svelte-state": "0.1.0-next.4",
+    "@layerstack/tailwind": "2.0.0-next.4",
+    "@layerstack/utils": "1.1.0-next.2",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -97,7 +96,7 @@
     "d3-time": "^3.1.0",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
-    "runed": "^0.26.0"
+    "runed": "^0.28.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"