layerchart 2.0.0-next.6 → 2.0.0-next.8

package/dist/components/Chart.svelte

@@ -844,12 +844,12 @@
     if (verbose === true) {
       if (width <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
+          `[LayerChart] Target div has zero or negative width (${width}). Did you forget to set an explicit width in CSS on the container?`
         );
       }
       if (height <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
+          `[LayerChart] Target div has zero or negative height (${height}). Did you forget to set an explicit height in CSS on the container?`
         );
       }
     }

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/Spline.svelte

@@ -351,8 +351,8 @@
 
   $effect(() => {
     if (!draw) return;
-    [tweenedState.current];
     // Anytime the path data changes, redraw
+    [pathData, data, ctx.data];
     key = Symbol();
   });
 </script>

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/BarChart.svelte

@@ -84,7 +84,7 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
@@ -109,7 +109,7 @@
   import { asAny } from '../../utils/types.js';
   import type { Insets } from '../../utils/rect.svelte.js';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import { isScaleTime, type AnyScale } from '../../utils/scales.svelte.js';
   import { createLegendProps, SeriesState } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
@@ -171,15 +171,56 @@
   const isStackSeries = $derived(seriesLayout.startsWith('stack'));
   const isGroupSeries = $derived(seriesLayout === 'group');
 
+  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
+    let _chartData = (
+      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
+    ) as Array<TData & { stackData?: any }>;
+    if (isStackSeries) {
+      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
+
+      const offset =
+        seriesLayout === 'stackExpand'
+          ? stackOffsetExpand
+          : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+      const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+          const s = series.find((d) => d.key === key)!;
+          return accessor(s.value ?? s.key)(d as any);
+        })
+        .offset(offset)(chartDataArray(data)) as any[];
+
+      _chartData = _chartData.map((d, i) => {
+        return {
+          ...d,
+          stackData: stackData.map((sd) => sd[i]),
+        };
+      });
+    }
+    return _chartData;
+  });
+
   const xScale = $derived(
-    xScaleProp ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear())
+    xScaleProp ??
+      (isVertical
+        ? scaleBand().padding(bandPadding)
+        : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear())
   );
-  const xBaseline = $derived(isVertical ? undefined : 0);
+  const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
-    yScaleProp ?? (isVertical ? scaleLinear() : scaleBand().padding(bandPadding))
+    yScaleProp ??
+      (isVertical
+        ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear()
+        : scaleBand().padding(bandPadding))
   );
-  const yBaseline = $derived(isVertical ? 0 : undefined);
+  const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
   const x1Scale = $derived(
     isGroupSeries && isVertical ? scaleBand().padding(groupPadding) : undefined
@@ -214,37 +255,6 @@
     return d && typeof d === 'object' && 'stackData' in d;
   }
 
-  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
-    let _chartData = (
-      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
-    ) as Array<TData & { stackData?: any }>;
-    if (isStackSeries) {
-      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
-
-      const offset =
-        seriesLayout === 'stackExpand'
-          ? stackOffsetExpand
-          : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
-      const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-          const s = series.find((d) => d.key === key)!;
-          return accessor(s.value ?? s.key)(d as any);
-        })
-        .offset(offset)(chartDataArray(data)) as any[];
-
-      _chartData = _chartData.map((d, i) => {
-        return {
-          ...d,
-          stackData: stackData.map((sd) => sd[i]),
-        };
-      });
-    }
-    return _chartData;
-  });
-
   function getBarsProps(s: SeriesData<TData, typeof Bars>, i: number): ComponentProps<typeof Bars> {
     const isFirst = i == 0;
     const isLast = i == seriesState.visibleSeries.length - 1;
@@ -278,7 +288,12 @@
       y: isVertical ? valueAccessor : undefined,
       x1: isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: isStackLayout && i !== seriesState.visibleSeries.length - 1 ? 'none' : 'edge',
+      rounded:
+        isStackLayout && i !== seriesState.visibleSeries.length - 1
+          ? 'none'
+          : Array.isArray(xProp) || Array.isArray(yProp)
+            ? 'all'
+            : 'edge',
       radius: 4,
       strokeWidth: 1,
       insets: stackInsets,

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

@@ -44,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;
+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

@@ -1,12 +1,20 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  export let value: any;
-  export let defaultExpandedPaths = ['$'];
+  const {
+    value,
+    defaultExpandedPaths = ['$'],
+    class: className,
+  }: {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+  } = $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,10 @@
-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;
-    value: any;
-    defaultExpandedPaths?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Json = InstanceType<typeof Json>;
+import { type ComponentProps } from 'svelte';
+import JsonTree from 'svelte-json-tree';
+type $$ComponentProps = {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+};
+declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
+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/TilesetField.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { SelectField, Switch } from 'svelte-ux';
 
-  export let doubleScale = devicePixelRatio > 1;
+  let { doubleScale = $bindable(devicePixelRatio > 1), serviceUrl = $bindable() } = $props();
 
   // TODO: Access via context, or possibly global state
   const ACCESS_TOKEN =
     'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
 
   // https://docs.mapbox.com/api/maps/styles/
-  $: mapboxv1 = (style: string) => (x: number, y: number, z: number) => {
+  const mapboxv1 = $derived((style: string) => (x: number, y: number, z: number) => {
     return `https://api.mapbox.com/styles/v1/mapbox/${style}/tiles/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://docs.mapbox.com/api/maps/raster-tiles/
   // https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/
-  $: mapboxv4 = (tileset: string) => (x: number, y: number, z: number) => {
+  const mapboxv4 = $derived((tileset: string) => (x: number, y: number, z: number) => {
     return `https://${'abc'[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/${tileset}/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }.png?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://apps.nationalmap.gov/services/
   const nationalmap = (tileset: string) => (x: number, y: number, z: number) => {
@@ -54,7 +54,7 @@
     return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`;
   };
 
-  $: services = {
+  const services = $derived<Record<string, Record<string, Function>>>({
     'mapbox v1': {
       'streets-v11': mapboxv1('streets-v11'),
       'light-v10': mapboxv1('light-v10'),
@@ -100,24 +100,25 @@
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
-  } as Record<string, Record<string, Function>>;
-
-  $: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
-    return Object.entries(service).map(([label, value]) => {
-      return { label, value: `${group}:${label}`, group, serviceUrl: value };
-    });
   });
 
-  $: defaultServiceUrl = services['mapbox v1']['streets-v11'];
-  export let serviceUrl = defaultServiceUrl;
+  const serviceOptions = $derived(
+    Object.entries(services).flatMap(([group, service]) => {
+      return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+      });
+    })
+  );
 
-  $: getServiceUrl = (option: string) => {
+  const getServiceUrl = $derived((option: string) => {
     const [selectedService, selectedTileset] = selected.split(':');
     return services[selectedService][selectedTileset];
-  };
+  });
 
-  let selected = 'mapbox v1:streets-v11';
-  $: serviceUrl = getServiceUrl(selected);
+  let selected = $state('mapbox v1:streets-v11');
+  $effect(() => {
+    serviceUrl = getServiceUrl(selected);
+  });
 </script>
 
 <SelectField
@@ -128,7 +129,7 @@
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation role="none">
+  <div slot="append" onclick={(e) => e.stopPropagation()} role="none">
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>

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

@@ -1,23 +1,6 @@
-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 TilesetField: $$__sveltets_2_IsomorphicComponent<{
-    doubleScale?: boolean;
-    serviceUrl?: Function;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TilesetField = InstanceType<typeof TilesetField>;
+declare const TilesetField: import("svelte").Component<{
+    doubleScale?: any;
+    serviceUrl?: any;
+}, {}, "doubleScale" | "serviceUrl">;
+type TilesetField = ReturnType<typeof TilesetField>;
 export default TilesetField;

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/dist/utils/scales.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ScaleBand } from 'd3-scale';
+import { type ScaleBand, type ScaleTime } from 'd3-scale';
 import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
 import type { Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
@@ -23,6 +23,8 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
     thresholds?: () => TInput[];
     quantiles?: () => TInput[];
 };
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
+export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
@@ -45,7 +47,6 @@ export declare function createMotionScale<Domain, Range>(scale: AnyScale, motion
  * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => any;
-export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/scales.svelte.js

@@ -5,6 +5,13 @@ import { Spring, Tween } from 'svelte/motion';
 function isAnyScale(scale) {
     return typeof scale === 'function' && typeof scale.range === 'function';
 }
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}
+export function isScaleTime(scale) {
+    const domain = scale.domain();
+    return domain[0] instanceof Date || domain[1] instanceof Date;
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -54,9 +61,6 @@ export function scaleBandInvert(scale) {
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }
-export function isScaleBand(scale) {
-    return typeof scale.bandwidth === 'function';
-}
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/ticks.js

@@ -1,7 +1,7 @@
 import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
 import { format } from 'date-fns';
 import { formatDate, PeriodType, getDuration, fail } from '@layerstack/utils';
-import { isScaleBand } from './scales.svelte.js';
+import { isScaleBand, isScaleTime } from './scales.svelte.js';
 // TODO: Use PeriodType along with Duration to format (and possibly select intervals)
 const majorTicks = [
     {
@@ -170,6 +170,12 @@ export function resolveTickVals(scale, ticks, placement) {
             ? scale.domain().filter((_, i) => i % ticks === 0)
             : scale.domain();
     }
+    // if (isScaleTime(scale)) {
+    //   const interval = getMajorTicks(scale.domain()[0], scale.domain()[1])!;
+    //   // const interval = getMinorTicks(scale.domain()[0], scale.domain()[1]);
+    //   return scale.ticks(interval);
+    // }
+    // Ticks from scale
     if (scale.ticks && typeof scale.ticks === 'function') {
         if (placement) {
             return scale.ticks(ticks ?? (placement === 'left' || placement === 'right' ? 4 : undefined));

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.8",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.42",
@@ -16,7 +16,7 @@
     "@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",
@@ -43,7 +43,7 @@
     "@types/topojson-specification": "^1.0.5",
     "marked": "^15.0.11",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.242.1",
+    "posthog-js": "^1.242.2",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prism-svelte": "^0.5.0",
@@ -52,12 +52,12 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.29.0",
-    "svelte-check": "^4.2.0",
+    "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.38",
-    "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",
@@ -72,8 +72,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@layerstack/svelte-actions": "1.0.1-next.2",
-    "@layerstack/svelte-state": "0.1.0-next.3",
-    "@layerstack/svelte-stores": "1.0.2-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",
@@ -97,7 +96,7 @@
     "d3-time": "^3.1.0",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
-    "runed": "^0.27.0"
+    "runed": "^0.28.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"