layerchart 2.0.0-next.7 → 2.0.0-next.9

package/dist/components/Axis.svelte

@@ -43,6 +43,18 @@
      */
     ticks?: TicksConfig;
 
+    /**
+     * Width or height of each tick in pxiels (responsive reduce)
+     */
+    tickSpacing?: number;
+
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
+
     /**
      * Length of the tick line
      * @default 4
@@ -114,7 +126,7 @@
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Group, { type GroupProps } from './Group.svelte';
@@ -126,7 +138,7 @@
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
   import { type MotionProp } from '../utils/motion.svelte.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { resolveTickFormat, resolveTickVals, type TicksConfig } from '../utils/ticks.js';
 
   let {
     placement,
@@ -136,6 +148,12 @@
     rule = false,
     grid = false,
     ticks,
+    tickSpacing = ['top', 'bottom', 'angle'].includes(placement)
+      ? 80
+      : ['left', 'right', 'radius'].includes(placement)
+        ? 50
+        : undefined,
+    tickMultiline = false,
     tickLength = 4,
     tickMarks = true,
     format,
@@ -169,7 +187,27 @@
   const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
   const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
 
-  const tickVals = $derived(resolveTickVals(scale, ticks, placement));
+  const ctxSize = $derived(
+    orientation === 'vertical'
+      ? ctx.height
+      : orientation === 'horizontal'
+        ? ctx.width
+        : orientation === 'radius'
+          ? ctx.height / 2
+          : orientation === 'angle'
+            ? ctx.width
+            : null
+  );
+
+  const tickCount = $derived(
+    typeof ticks === 'number'
+      ? ticks
+      : tickSpacing && ctxSize
+        ? Math.round(ctxSize / tickSpacing)
+        : undefined
+  );
+  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount));
+  const tickFormat = $derived(resolveTickFormat(scale, ticks, tickCount, format, tickMultiline));
 
   function getCoords(tick: any) {
     switch (placement) {
@@ -356,7 +394,7 @@
     <Text {...resolvedLabelProps} />
   {/if}
 
-  {#each tickVals as tick, index (tick.toString())}
+  {#each tickVals as tick, index (tick)}
     {@const tickCoords = getCoords(tick)}
     {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
     {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
@@ -366,7 +404,7 @@
     {@const resolvedTickLabelProps = {
       x: orientation === 'angle' ? radialTickCoordsX : tickCoords.x,
       y: orientation === 'angle' ? radialTickCoordsY : tickCoords.y,
-      value: formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v)),
+      value: tickFormat(tick, index),
       ...getDefaultTickLabelProps(tick),
       motion,
       ...tickLabelProps,

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

@@ -36,6 +36,16 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      * Control the number of ticks
      */
     ticks?: TicksConfig;
+    /**
+     * Width or height of each tick in pxiels (responsive reduce)
+     */
+    tickSpacing?: number;
+    /**
+     * Whether to render tick labels on multiple lines for additional context
+     *
+     * @default false
+     */
+    tickMultiline?: boolean;
     /**
      * Length of the tick line
      * @default 4

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

@@ -97,6 +97,20 @@
      */
     verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
 
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?:
+      | 'auto'
+      | 'text-before-edge'
+      | 'text-after-edge'
+      | 'middle'
+      | 'hanging'
+      | 'ideographic'
+      | 'mathematical';
+
     /**
      * Rotational angle of the text
      */
@@ -178,20 +192,6 @@
   import { degreesToRadians } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
 
-  /*
-    TODO:
-      - [ ] Handle styled text (use <slot /> to measure?)
-			- [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-			  - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-				- https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-    Reference:
-    - https://bl.ocks.org/mbostock/7555321
-    - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-      - https://airbnb.io/visx/text
-      - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-  */
-
   const uid = $props.id();
 
   let {
@@ -208,6 +208,7 @@
     scaleToFit = false,
     textAnchor = 'start',
     verticalAnchor = 'end',
+    dominantBaseline = 'auto',
     rotate,
     opacity = 1,
     strokeWidth = 0,
@@ -227,6 +228,8 @@
     ...restProps
   }: TextProps = $props();
 
+  const renderCtx = getRenderContext();
+
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
   let pathRef = $state<SVGPathElement>();
@@ -260,49 +263,49 @@
     };
   });
 
-  const rawText = $derived(value != null ? value.toString() : '');
+  // Handle null and convert `\n` strings back to newline characters
+  const rawText = $derived(value != null ? value.toString().replace(/\\n/g, '\n') : '');
 
   const textValue = $derived.by(() => {
     if (!truncateConfig) return rawText;
     return truncateText(rawText, truncateConfig);
   });
 
-  const renderCtx = getRenderContext();
-
-  const words = $derived(textValue ? textValue.split(/(?:(?!\u00A0+)\s+)/) : []);
-
-  const wordsWithWidth = $derived(
-    words.map((word) => ({
-      word,
-      width: getStringWidth(word, style) || 0,
-    }))
-  );
-
   const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
 
-  const wordsByLines = $derived(
-    wordsWithWidth.reduce((result: { words: string[]; width?: number }[], item) => {
-      const currentLine = result[result.length - 1];
-
-      if (
-        currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)
-      ) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
-      } else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
-      }
-
-      return result;
-    }, [])
-  );
+  const wordsByLines = $derived.by(() => {
+    // Split by newlines to preserve explicit line breaks
+    const lines = textValue.split('\n');
+
+    return lines.flatMap((line) => {
+      // Split each line into words
+      const words = line.split(/(?:(?!\u00A0+)\s+)/);
+
+      // Handle word wrapping within each line
+      return words.reduce((result: { words: string[]; width?: number }[], item) => {
+        const currentLine = result[result.length - 1];
+        const itemWidth = getStringWidth(item, style) || 0;
+
+        if (
+          currentLine &&
+          (width == null || scaleToFit || (currentLine.width || 0) + itemWidth + spaceWidth < width)
+        ) {
+          // Word can be added to an existing line
+          currentLine.words.push(item);
+          currentLine.width = currentLine.width || 0;
+          currentLine.width += itemWidth + spaceWidth;
+        } else {
+          // Add first word to line or word is too long to scaleToFit on existing line
+          const newLine = { words: [item], width: itemWidth };
+          result.push(newLine);
+        }
+
+        return result;
+      }, []);
+    });
+  });
 
-  const lines = $derived(wordsByLines.length);
+  const lineCount = $derived(wordsByLines.length);
 
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
@@ -329,9 +332,9 @@
     if (verticalAnchor === 'start') {
       return getPixelValue(capHeight);
     } else if (verticalAnchor === 'middle') {
-      return ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+      return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
     } else {
-      return (lines - 1) * -getPixelValue(lineHeight);
+      return (lineCount - 1) * -getPixelValue(lineHeight);
     }
   });
 
@@ -348,7 +351,7 @@
   const scaleTransform = $derived.by(() => {
     if (
       scaleToFit &&
-      lines > 0 &&
+      lineCount > 0 &&
       typeof x == 'number' &&
       typeof y == 'number' &&
       typeof width == 'number'
@@ -500,6 +503,7 @@
       >
         <textPath
           style="text-anchor: {textAnchor};"
+          dominant-baseline={dominantBaseline}
           href="#{pathId}"
           {startOffset}
           class={cls(layerClass('text-path'))}
@@ -514,6 +518,7 @@
         y={motionY.current}
         {transform}
         text-anchor={textAnchor}
+        dominant-baseline={dominantBaseline}
         {...restProps}
         {fill}
         fill-opacity={fillOpacity}

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

@@ -80,6 +80,12 @@ export type TextPropsWithoutHTML = {
      * @default 'end'
      */
     verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?: 'auto' | 'text-before-edge' | 'text-after-edge' | 'middle' | 'hanging' | 'ideographic' | 'mathematical';
     /**
      * Rotational angle of the text
      */

package/dist/components/charts/AreaChart.svelte

@@ -398,13 +398,8 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => {
-          if (seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format:
+          seriesLayout === 'stackExpand' ? (value) => format(value, 'percentRound') : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
@@ -412,7 +407,6 @@
 
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

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,
@@ -350,26 +365,20 @@
       return {
         placement: radial ? 'radius' : 'left',
 
-        format: (value) => {
-          if (isVertical && seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format:
+          isVertical && seriesLayout === 'stackExpand'
+            ? (value) => format(value, 'percentRound')
+            : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => {
-        if (!isVertical && seriesLayout === 'stackExpand') {
-          return format(value, 'percentRound');
-        } else {
-          return format(value, undefined, { variant: 'short' });
-        }
-      },
+      format:
+        !isVertical && seriesLayout === 'stackExpand'
+          ? (value) => format(value, 'percentRound')
+          : undefined,
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/LineChart.svelte

@@ -70,7 +70,6 @@
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
   import { scaleLinear, scaleTime } from 'd3-scale';
-  import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Axis from '../Axis.svelte';
@@ -284,14 +283,12 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => format(value, undefined, { variant: 'short' }),
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/ScatterChart.svelte

@@ -205,14 +205,12 @@
     if (axisDirection === 'y') {
       return {
         placement: 'left',
-        format: (value) => format(value, undefined, { variant: 'short' }),
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
     }
     return {
       placement: 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };

package/dist/components/charts/utils.svelte.d.ts

@@ -8,8 +8,8 @@ export declare class HighlightKey<TData, SeriesComponent extends Component> {
 }
 export declare class SeriesState<TData, TComponent extends Component> {
     #private;
-    selectedSeries: SelectionState<unknown>;
-    selectedKeys: SelectionState<unknown>;
+    selectedSeries: SelectionState<unknown, false>;
+    selectedKeys: SelectionState<unknown, false>;
     highlightKey: HighlightKey<TData, TComponent>;
     constructor(getSeries: () => SeriesData<TData, TComponent>[]);
     get series(): SeriesData<TData, TComponent>[];

package/dist/docs/Code.svelte

@@ -14,14 +14,14 @@
     class: className,
   }: {
     source: string | null;
-    language: string;
-    highlightedSource: string;
-    classes: {
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
       root?: string;
       pre?: string;
       code?: string;
     };
-    class: string;
+    class?: string;
   } = $props();
 </script>
 

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

@@ -1,14 +1,14 @@
 import 'prism-svelte';
 type $$ComponentProps = {
     source: string | null;
-    language: string;
-    highlightedSource: string;
-    classes: {
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
         root?: string;
         pre?: string;
         code?: string;
     };
-    class: string;
+    class?: string;
 };
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/docs/Json.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  const { value, defaultExpandedPaths = ['$'], class: className } = $props();
+  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]', className)}>

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

@@ -1,7 +1,10 @@
-declare const Json: import("svelte").Component<{
-    value: any;
-    defaultExpandedPaths?: any[];
-    class: any;
-}, {}, "">;
+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/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/utils/arcText.svelte.js

@@ -216,7 +216,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +224,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {

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.d.ts

@@ -1,9 +1,9 @@
 import { type TimeInterval } from 'd3-time';
+import { Duration, type FormatType } from '@layerstack/utils';
 import { type AnyScale } from './scales.svelte.js';
-export declare function getMajorTicks(start: Date, end: Date): TimeInterval | null;
-export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
-export declare function getMinorTicks(start: Date, end: Date): TimeInterval | null;
+export declare function getDurationFormat(duration: Duration, multiline?: boolean): (date: Date, i: number) => string;
 export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
     interval: TimeInterval | null;
 } | null;
-export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, placement?: 'radius' | 'top' | 'bottom' | 'left' | 'right' | 'angle'): any[];
+export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
+export declare function resolveTickFormat(scale: AnyScale, ticks?: TicksConfig, count?: number, formatType?: FormatType, multiline?: boolean): (date: Date, i: number) => string;

package/dist/utils/ticks.js

@@ -1,183 +1,130 @@
-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';
-// TODO: Use PeriodType along with Duration to format (and possibly select intervals)
-const majorTicks = [
-    {
-        predicate: (duration) => duration == null, // Unknown
-        interval: timeYear.every(1), // Better than rendering a lot of items
-        format: (date) => date.toString(),
-    },
-    {
-        predicate: (duration) => duration.years > 1,
-        interval: timeYear.every(1),
-        format: (date) => formatDate(date, PeriodType.CalendarYear, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.years,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 30,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days,
-        interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.hours,
-        interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 10,
-        interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes,
-        interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.seconds > 10,
-        interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => duration.seconds,
-        interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => true, // 0 or more milliseconds
-        interval: timeMillisecond.every(100),
-        format: (date) => format(date, 'h:mm:ss.SSS'),
-    },
-];
-const minorTicks = [
-    {
-        predicate: (duration) => duration == null, // Unknown
-        interval: timeYear.every(1), // Better than rendering a lot of items
-        format: (date) => date.toString(),
-    },
-    {
-        predicate: (duration) => duration.years,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 90,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 30,
-        interval: timeWeek.every(1),
-        format: (date) => formatDate(date, PeriodType.WeekSun, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 7,
-        interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 3,
-        interval: timeHour.every(8),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.days,
-        interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.hours,
-        interval: timeMinute.every(15),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 10,
-        interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 2,
-        interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes,
-        interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => duration.seconds,
-        interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => true, // 0 or more milliseconds
-        interval: timeMillisecond.every(10),
-        format: (date) => format(date, 'h:mm:ss.SSS'),
-    },
-];
-export function getMajorTicks(start, end) {
-    const duration = getDuration(start, end);
-    for (var t of majorTicks) {
-        if (t.predicate(duration)) {
-            return t.interval;
+import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
+import { format, PeriodType, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
+import { isScaleBand, isScaleTime } from './scales.svelte.js';
+export function getDurationFormat(duration, multiline = false) {
+    return function (date, i) {
+        if (+duration >= +new Duration({ duration: { years: 1 } })) {
+            // Year
+            return format(date, PeriodType.CalendarYear);
         }
-    }
-    fail(`Unable to locate major ticks for duration: ${duration}`);
-}
-export function formatMajorTick(date, rangeStart, rangeEnd) {
-    const duration = getDuration(rangeStart, rangeEnd);
-    for (var t of majorTicks) {
-        if (t.predicate(duration)) {
-            return t.format(date);
+        else if (+duration >= +new Duration({ duration: { days: 28 } })) {
+            // Month
+            const isFirst = i === 0 || +timeYear.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Month, { variant: 'short' }) +
+                    (isFirst ? `\n${format(date, PeriodType.CalendarYear)}` : ''));
+            }
+            else {
+                return (format(date, PeriodType.Month, { variant: 'short' }) +
+                    (isFirst ? ` '${format(date, PeriodType.CalendarYear, { variant: 'short' })}` : ''));
+            }
         }
-    }
-    fail(`Unable to format major ticks for duration: ${duration}`);
-}
-export function getMinorTicks(start, end) {
-    const duration = getDuration(start, end);
-    for (var t of minorTicks) {
-        if (t.predicate(duration)) {
-            return t.interval;
+        else if (+duration >= +new Duration({ duration: { days: 1 } })) {
+            // Day
+            const isFirst = i === 0 || +timeMonth.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Custom, { custom: DateToken.DayOfMonth_numeric }) +
+                    (isFirst ? `\n${format(date, PeriodType.Month, { variant: 'short' })}` : ''));
+            }
+            else {
+                return format(date, PeriodType.Day, { variant: 'short' });
+            }
         }
-    }
-    fail(`Unable to locate minor ticks for duration: ${duration}`);
+        else if (+duration >= +new Duration({ duration: { hours: 1 } })) {
+            // Hours
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric }) +
+                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            }
+            else {
+                return isFirst
+                    ? format(date, PeriodType.Day, { variant: 'short' })
+                    : format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric });
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { minutes: 1 } })) {
+            // Minutes
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.TimeOnly, { variant: 'short' }) +
+                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            }
+            else {
+                return format(date, PeriodType.TimeOnly, { variant: 'short' });
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { seconds: 1 } })) {
+            // Seconds
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            return (format(date, PeriodType.TimeOnly) +
+                (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+        }
+        else if (+duration >= +new Duration({ duration: { milliseconds: 1 } })) {
+            // Milliseconds
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            return (format(date, PeriodType.Custom, {
+                custom: [
+                    DateToken.Hour_2Digit,
+                    DateToken.Minute_2Digit,
+                    DateToken.Second_2Digit,
+                    DateToken.MiliSecond_3,
+                    DateToken.Hour_woAMPM,
+                ],
+            }) + (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+        }
+        else {
+            return date.toString();
+        }
+    };
 }
-export function resolveTickVals(scale, ticks, placement) {
+export function resolveTickVals(scale, ticks, count) {
+    // Explicit ticks
     if (Array.isArray(ticks))
         return ticks;
+    // Function
     if (typeof ticks === 'function')
         return ticks(scale) ?? [];
+    // Interval
     if (isLiteralObject(ticks) && 'interval' in ticks) {
         if (ticks.interval === null || !('ticks' in scale) || typeof scale.ticks !== 'function') {
             return []; // Explicitly return empty array for null interval or invalid scale
         }
         return scale.ticks(ticks.interval);
     }
+    // Band (use domain)
     if (isScaleBand(scale)) {
         return ticks && typeof ticks === 'number'
             ? scale.domain().filter((_, i) => i % ticks === 0)
             : scale.domain();
     }
+    // Ticks from scale
     if (scale.ticks && typeof scale.ticks === 'function') {
-        if (placement) {
-            return scale.ticks(ticks ?? (placement === 'left' || placement === 'right' ? 4 : undefined));
-        }
-        return scale.ticks(ticks);
+        return scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
     }
     return [];
 }
-function isLiteralObject(val) {
-    return val !== null && typeof val === 'object' && !Array.isArray(val);
+export function resolveTickFormat(scale, ticks, count, formatType, multiline = false) {
+    // Explicit format
+    if (formatType) {
+        return (tick) => format(tick, formatType);
+    }
+    // Time scale
+    if (isScaleTime(scale) && count) {
+        if (isLiteralObject(ticks) && 'interval' in ticks && ticks.interval != null) {
+            const start = ticks.interval.floor(new Date());
+            const end = ticks.interval.ceil(new Date());
+            return getDurationFormat(new Duration({ start, end }), multiline);
+        }
+        else {
+            // Compare first 2 ticks to determine duration between ticks for formatting
+            const [start, end] = timeTicks(scale.domain()[0], scale.domain()[1], count);
+            return getDurationFormat(new Duration({ start, end }), multiline);
+        }
+    }
+    // Format from scale
+    if (scale.tickFormat) {
+        return scale.tickFormat(count);
+    }
+    return (tick) => `${tick}`;
 }

package/dist/utils/ticks.test.js

@@ -35,33 +35,23 @@ describe('resolveTickVals', () => {
         const scale = { domain: mockDomain, bandwidth: vi.fn() };
         expect(resolveTickVals(scale)).toEqual(['a', 'b', 'c', 'd', 'e']);
     });
-    it('uses default 4 ticks for left placement', () => {
-        const scale = { ticks: vi.fn(() => [1, 2, 3, 4]) };
-        expect(resolveTickVals(scale, undefined, 'left')).toEqual([1, 2, 3, 4]);
-        expect(scale.ticks).toHaveBeenCalledWith(4);
-    });
-    it('uses default 4 ticks for right placement', () => {
-        const scale = { ticks: vi.fn(() => [1, 2, 3, 4]) };
-        expect(resolveTickVals(scale, undefined, 'right')).toEqual([1, 2, 3, 4]);
-        expect(scale.ticks).toHaveBeenCalledWith(4);
-    });
     it('uses undefined for non-left/right placement', () => {
-        const scale = { ticks: vi.fn(() => [1, 2]) };
-        expect(resolveTickVals(scale, undefined, 'top')).toEqual([1, 2]);
+        const scale = { domain: mockDomain, ticks: vi.fn(() => [1, 2]) };
+        expect(resolveTickVals(scale, undefined, undefined)).toEqual([1, 2]);
         expect(scale.ticks).toHaveBeenCalledWith(undefined);
     });
     it('passes number ticks to scale.ticks', () => {
-        const scale = { ticks: vi.fn(() => [10, 20]) };
+        const scale = { domain: mockDomain, ticks: vi.fn(() => [10, 20]) };
         expect(resolveTickVals(scale, 5)).toEqual([10, 20]);
         expect(scale.ticks).toHaveBeenCalledWith(5);
     });
     it('returns empty array for scale without ticks', () => {
-        const scale = {};
+        const scale = { domain: mockDomain };
         expect(resolveTickVals(scale, 5)).toEqual([]);
     });
     it('handles null ticks with placement', () => {
-        const scale = { ticks: vi.fn(() => [1, 2, 3]) };
-        expect(resolveTickVals(scale, null, 'bottom')).toEqual([1, 2, 3]);
+        const scale = { domain: mockDomain, ticks: vi.fn(() => [1, 2, 3]) };
+        expect(resolveTickVals(scale, null, undefined)).toEqual([1, 2, 3]);
         expect(scale.ticks).toHaveBeenCalledWith(undefined);
     });
 });

package/package.json

@@ -4,14 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.9",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
-    "@iconify-json/lucide": "^1.2.42",
+    "@iconify-json/lucide": "^1.2.44",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
     "@sveltejs/adapter-cloudflare": "^7.0.3",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -43,7 +43,7 @@
     "@types/topojson-specification": "^1.0.5",
     "marked": "^15.0.11",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.242.2",
+    "posthog-js": "^1.245.1",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prism-svelte": "^0.5.0",
@@ -52,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.30.1",
+    "svelte": "5.32.1",
     "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
     "svelte-ux": "2.0.0-next.2",
@@ -66,15 +66,15 @@
     "unplugin-icons": "^22.1.0",
     "us-atlas": "^3.0.1",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.4"
   },
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@layerstack/svelte-actions": "1.0.1-next.2",
-    "@layerstack/svelte-state": "0.1.0-next.4",
+    "@layerstack/svelte-state": "0.1.0-next.7",
     "@layerstack/tailwind": "2.0.0-next.4",
-    "@layerstack/utils": "1.1.0-next.2",
+    "@layerstack/utils": "2.0.0-next.3",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",