layerchart 0.39.0 → 0.40.1

package/dist/components/Brush.svelte

@@ -0,0 +1,244 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { extent } from 'd3-array';
+import { clamp, cls } from 'svelte-ux';
+import Frame from './Frame.svelte';
+import { localPoint } from '../utils/event.js';
+import Group from './Group.svelte';
+const { xScale, yScale, width, height, padding } = getContext('LayerCake');
+const dispatch = createEventDispatcher();
+/** Axis to apply brushing */
+export let axis = 'x';
+/** Size of draggable handles (width/height) */
+export let handleSize = 5;
+/** Only show range while actively brushing.  Useful with `brushEnd` event */
+export let resetOnEnd = false;
+export let xDomain = $xScale.domain();
+export let yDomain = $yScale.domain();
+// Capture original domains for reset()
+const originalXDomain = $xScale.domain();
+const originalYDomain = $yScale.domain();
+$: [xDomainMin, xDomainMax] = extent($xScale.domain());
+$: [yDomainMin, yDomainMax] = extent($yScale.domain());
+/** Attributes passed to range <rect> element */
+export let range = undefined;
+/** Attributes passed to handle <rect> elements */
+export let handle = undefined;
+export let classes = {};
+let frameEl;
+function handler(fn) {
+    return (e) => {
+        const start = {
+            xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
+            yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
+            value: {
+                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+            },
+        };
+        dispatch('brushStart', { xDomain, yDomain });
+        const onPointerMove = (e) => {
+            fn(start, {
+                x: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+                y: $yScale.invert(localPoint(frameEl, e)?.y - $padding.top),
+            });
+            // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
+            //   // Ignore?
+            //   // TODO: What about when using `x` or `y` axis?
+            // } else {
+            dispatch('change', { xDomain, yDomain });
+            // }
+        };
+        const onPointerUp = (e) => {
+            if (e.target === frameEl) {
+                reset();
+                dispatch('change', { xDomain, yDomain });
+            }
+            dispatch('brushEnd', { xDomain, yDomain });
+            if (resetOnEnd) {
+                reset();
+            }
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+    };
+}
+const createRange = handler((start, value) => {
+    isActive = true;
+    xDomain = [
+        clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
+        clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+    ];
+    yDomain = [
+        clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
+        clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+    ];
+});
+const adjustRange = handler((start, value) => {
+    const dx = clamp(value.x - start.value.x, xDomainMin - start.xDomain[0], xDomainMax - start.xDomain[1]);
+    xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
+    const dy = clamp(value.y - start.value.y, yDomainMin - start.yDomain[0], yDomainMax - start.yDomain[1]);
+    yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
+});
+const adjustBottom = handler((start, value) => {
+    yDomain = [
+        clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
+        clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
+    ];
+});
+const adjustTop = handler((start, value) => {
+    yDomain = [
+        clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
+        clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
+    ];
+});
+const adjustLeft = handler((start, value) => {
+    xDomain = [
+        clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
+        clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
+    ];
+});
+const adjustRight = handler((start, value) => {
+    xDomain = [
+        clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
+        clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
+    ];
+});
+function reset() {
+    isActive = false;
+    xDomain = originalXDomain;
+    yDomain = originalYDomain;
+}
+function selectAll() {
+    xDomain = [xDomainMin, xDomainMax];
+    yDomain = [yDomainMin, yDomainMax];
+}
+$: top = $yScale(yDomain[1]);
+$: bottom = $yScale(yDomain[0]);
+$: left = $xScale(xDomain[0]);
+$: right = $xScale(xDomain[1]);
+$: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
+$: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
+$: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
+$: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
+// Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
+$: isActive =
+    xDomain[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
+        xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
+        yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
+        yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+</script>
+
+<g class={cls('Brush select-none', classes.root, $$props.class)}>
+  <Frame
+    class={cls('frame', 'fill-transparent', classes.frame)}
+    on:pointerdown={createRange}
+    on:dblclick={() => selectAll()}
+    bind:rectEl={frameEl}
+  />
+
+  {#if isActive}
+    <Group x={rangeLeft} y={rangeTop} class="range">
+      <slot name="range" {rangeWidth} {rangeHeight}>
+        <rect
+          width={rangeWidth}
+          height={rangeHeight}
+          class={cls(
+            'cursor-move select-none',
+            range?.fill == null && 'fill-surface-content/10',
+            classes.range
+          )}
+          on:pointerdown={adjustRange}
+          on:dblclick={() => reset()}
+          {...range}
+        />
+      </slot>
+    </Group>
+
+    {#if axis === 'both' || axis === 'y'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle top"
+        on:pointerdown={adjustTop}
+        on:dblclick={() => {
+          yDomain[0] = yDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="top" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={rangeLeft}
+        y={bottom - handleSize + 1}
+        class="handle bottom"
+        on:pointerdown={adjustBottom}
+        on:dblclick={() => {
+          yDomain[1] = yDomainMax;
+        }}
+      >
+        <slot name="handle" edge="bottom" {rangeWidth} {rangeHeight}>
+          <rect
+            width={rangeWidth}
+            height={handleSize}
+            class={cls('fill-transparent cursor-ns-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    {#if axis === 'both' || axis === 'x'}
+      <Group
+        x={rangeLeft}
+        y={rangeTop}
+        class="handle left"
+        on:pointerdown={adjustLeft}
+        on:dblclick={() => {
+          xDomain[0] = xDomainMin;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="left" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+
+      <Group
+        x={right - handleSize + 1}
+        y={rangeTop}
+        class="handle right"
+        on:pointerdown={adjustRight}
+        on:dblclick={() => {
+          xDomain[1] = xDomainMax;
+          dispatch('change', { xDomain, yDomain });
+        }}
+      >
+        <slot name="handle" edge="right" {rangeWidth} {rangeHeight}>
+          <rect
+            width={handleSize}
+            height={rangeHeight}
+            class={cls('fill-transparent cursor-ew-resize select-none', classes.handle)}
+            {...handle}
+          />
+        </slot>
+      </Group>
+    {/if}
+
+    <!-- TODO: Add diagonal/corner handles -->
+  {/if}
+</g>

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

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SVGAttributes } from 'svelte/elements';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        axis?: "x" | "y" | "both" | undefined;
+        handleSize?: number | undefined;
+        resetOnEnd?: boolean | undefined;
+        xDomain?: [number | null, number | null] | undefined;
+        yDomain?: [number | null, number | null] | undefined;
+        range?: SVGAttributes<SVGRectElement> | undefined;
+        handle?: SVGAttributes<SVGRectElement> | undefined;
+        classes?: {
+            root?: string | undefined;
+            frame?: string | undefined;
+            range?: string | undefined;
+            handle?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+        brushStart: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+        brushEnd: CustomEvent<{
+            xDomain?: [any, any] | undefined;
+            yDomain?: [any, any] | undefined;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        range: {
+            rangeWidth: any;
+            rangeHeight: any;
+        };
+        handle: {
+            edge: string;
+            rangeWidth: any;
+            rangeHeight: any;
+        };
+    };
+};
+export type BrushProps = typeof __propDef.props;
+export type BrushEvents = typeof __propDef.events;
+export type BrushSlots = typeof __propDef.slots;
+export default class Brush extends SvelteComponentTyped<BrushProps, BrushEvents, BrushSlots> {
+}
+export {};

package/dist/components/Chart.svelte

@@ -76,8 +76,6 @@ export let tooltip = undefined;
 /** Props passed to TransformContext */
 export let transform = undefined;
 export let transformContext = undefined;
-/** Set transformContext's initial translate and scale based on geo object.  Requires `geo.projection` to also be set */
-export let fitGeoObject = undefined;
 // Binded for access within TransformContext
 let geoProjection = undefined;
 // Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
@@ -115,9 +113,10 @@ onMount(() => {
   let:data
   let:flatData
 >
+  <!-- Apply fitGeojson using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
-    fitGeoObject && geo?.projection
-      ? geoFitObjectTransform(geo.projection(), [width, height], fitGeoObject)
+    geo?.applyTransform && geo?.fitGeojson && geo?.projection
+      ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 
   {#key isMounted}

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

@@ -11,13 +11,12 @@ import { type ComponentProps } from 'svelte';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
-import { geoFitObjectTransform } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any[] | undefined;
-        x?: (string | ((d: any) => number)) | (string | ((d: any) => number))[] | undefined;
-        y?: (string | ((d: any) => number)) | (string | ((d: any) => number))[] | undefined;
+        x?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
+        y?: (string | number | ((d: any) => number)) | (string | number | ((d: any) => number))[] | undefined;
         yScale?: Function | undefined;
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
@@ -25,7 +24,6 @@ declare const __propDef: {
         tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         transform?: Partial<ComponentProps<TransformContext>> | undefined;
         transformContext?: TransformContext | undefined;
-        fitGeoObject?: Parameters<typeof geoFitObjectTransform>[2] | undefined;
     };
     events: {
         transform: CustomEvent<{

package/dist/components/ChartClipPath.svelte

@@ -1,15 +1,15 @@
 <script>import { getContext } from 'svelte';
 import RectClipPath from './RectClipPath.svelte';
 const { width, height, padding } = getContext('LayerCake');
-/** Whether clipping should include chart padding (ex. axis) */
-export let includePadding = false;
+/** Include padding area (ex. axis) */
+export let full = false;
 </script>
 
 <RectClipPath
-  x={includePadding ? -$padding.left : 0}
-  y={includePadding ? -$padding.top : 0}
-  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
-  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        includePadding?: boolean | undefined;
+        full?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/Frame.svelte

@@ -2,6 +2,8 @@
 const { width, height, padding } = getContext('LayerCake');
 /** Include padding area */
 export let full = false;
+/** Access underlying `<rect>` element */
+export let rectEl;
 </script>
 
 <rect
@@ -10,5 +12,8 @@ export let full = false;
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
+  on:pointerdown
+  on:dblclick
+  bind:this={rectEl}
   {...$$restProps}
 />

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

@@ -3,9 +3,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean | undefined;
+        rectEl: SVGRectElement;
     };
     events: {
         click: MouseEvent;
+        pointerdown: PointerEvent;
+        dblclick: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Group.svelte

@@ -37,6 +37,7 @@ $: if (center || x != null || y != null) {
   {transform}
   {...$$restProps}
   on:click
+  on:pointerdown
   on:pointerenter
   on:pointermove
   on:pointerleave

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

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        pointerdown: PointerEvent;
         pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;

package/dist/components/Rect.svelte

@@ -36,4 +36,5 @@ $: tick().then(() => {
   on:pointermove
   on:pointerout
   on:pointerleave
+  on:dblclick
 />

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

@@ -24,6 +24,7 @@ declare const __propDef: {
         pointermove: PointerEvent;
         pointerout: PointerEvent;
         pointerleave: PointerEvent;
+        dblclick: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/TooltipContext.svelte

@@ -112,6 +112,14 @@ function showTooltip(e, tooltipData) {
     const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
+    if (e.offsetX < e.currentTarget.offsetLeft ||
+        e.offsetX > e.currentTarget.offsetLeft + e.currentTarget.offsetWidth ||
+        e.offsetY < e.currentTarget.offsetTop ||
+        e.offsetY > e.currentTarget.offsetTop + e.currentTarget.offsetHeight) {
+        // Ignore if within padding of chart
+        hideTooltip();
+        return;
+    }
     // If tooltipData not provided already (voronoi, etc), attempt to find it
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
@@ -267,26 +275,30 @@ $: if (mode === 'bounds' || mode === 'band') {
 }
 </script>
 
-<slot tooltip={$tooltip} />
-
 {#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
-  <Html>
-    <div
-      style:width="{$width}px"
-      style:height="{$height}px"
-      class={cls(
-        'tooltip-trigger absolute touch-none',
-        debug && 'bg-danger/10 outline outline-danger'
-      )}
-      on:pointerenter={showTooltip}
-      on:pointermove={showTooltip}
-      on:pointerleave={hideTooltip}
-      on:click={(e) => {
-        onClick({ data: $tooltip?.data });
-      }}
-    />
-  </Html>
+  <div
+    style:width="{$width}px"
+    style:height="{$height}px"
+    style:top="{$padding.top}px"
+    style:left="{$padding.left}px"
+    class={cls(
+      'tooltip-trigger absolute touch-none',
+      debug && 'bg-danger/10 outline outline-danger'
+    )}
+    on:pointerenter={showTooltip}
+    on:pointermove={showTooltip}
+    on:pointerleave={hideTooltip}
+    on:click={(e) => {
+      onClick({ data: $tooltip?.data });
+    }}
+  >
+    <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
+    <div class="absolute" style:top="-{$padding.top}px" style:left="-{$padding.left}px">
+      <slot tooltip={$tooltip} />
+    </div>
+  </div>
 {:else if mode === 'voronoi'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <Voronoi
       on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
@@ -299,6 +311,7 @@ $: if (mode === 'bounds' || mode === 'band') {
     />
   </Svg>
 {:else if mode === 'bounds' || mode === 'band'}
+  <slot tooltip={$tooltip} />
   <Svg>
     <g class="tooltip-rects">
       {#each rects as rect}
@@ -318,10 +331,12 @@ $: if (mode === 'bounds' || mode === 'band') {
       {/each}
     </g>
   </Svg>
+{:else}
+  <slot tooltip={$tooltip} />
 {/if}
 
 {#if mode === 'quadtree' && debug}
-  <Svg>
+  <Svg pointerEvents={false}>
     <ChartClipPath>
       <g class="tooltip-quadtree">
         {#each quadtreeRects(quadtree, false) as rect}

package/dist/components/TransformContext.svelte

@@ -31,6 +31,7 @@ function setTransformContext(transform) {
 import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
 const { width, height } = getContext('LayerCake');
 export let mode = 'none';
+/** Translate towards point (ex. mouse cursor/center) while zooming in/out */
 export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;

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

@@ -37,7 +37,7 @@ import { motionStore, type MotionOptions } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: TransformMode | undefined;
-        translateOnScale?: boolean | undefined;
+        /** Translate towards point (ex. mouse cursor/center) while zooming in/out */ translateOnScale?: boolean | undefined;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         processTranslate?: ((x: number, y: number, deltaX: number, deltaY: number, scale: number) => {

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';

package/dist/utils/genData.d.ts

@@ -8,6 +8,12 @@ export declare function getRandomNumber(min: number, max: number): number;
  *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
  */
 export declare function getRandomInteger(min: number, max: number, includeMax?: boolean): number;
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export declare function randomWalk(options?: {
+    count?: number;
+}): number[];
 export declare function createSeries(options: {
     count?: number;
     min: number;

package/dist/utils/genData.js

@@ -1,4 +1,6 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { cumsum } from 'd3-array';
+import { randomNormal } from 'd3-random';
 import { degreesToRadians, radiansToDegrees } from './math.js';
 /**
  * Get random number between min (inclusive) and max (exclusive)
@@ -16,6 +18,13 @@ export function getRandomInteger(min, max, includeMax = true) {
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export function randomWalk(options) {
+    const random = randomNormal();
+    return Array.from(cumsum({ length: options?.count ?? 100 }, random));
+}
 export function createSeries(options) {
     const count = options.count ?? 10;
     const min = options.min;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.39.0",
+  "version": "0.40.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -58,7 +58,7 @@
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.2.12"
+    "vite": "^5.2.13"
   },
   "type": "module",
   "dependencies": {
@@ -85,9 +85,9 @@
     "date-fns": "^3.6.0",
     "layercake": "^8.3.0",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.138.0",
+    "posthog-js": "^1.138.3",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.66.5",
+    "svelte-ux": "^0.66.6",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {