layerchart 0.41.6 → 0.43.0

package/dist/components/TooltipContext.svelte

@@ -21,12 +21,13 @@ import { bisector, max, min } from 'd3-array';
 import { quadtree as d3Quadtree } from 'd3-quadtree';
 import { cls, sortFunc } from 'svelte-ux';
 import { Svg } from './Chart.svelte';
+import { chartContext } from './ChartContext.svelte';
 import ChartClipPath from './ChartClipPath.svelte';
 import Voronoi from './Voronoi.svelte';
 import { localPoint } from '../utils/event.js';
 import { isScaleBand, scaleInvert } from '../utils/scales.js';
 import { quadtreeRects } from '../utils/quadtree.js';
-const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = getContext('LayerCake');
+const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = chartContext();
 /*
       TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
       - scaleTime / scaleLinear: bisect
@@ -54,7 +55,13 @@ export let radius = Infinity;
 /** Enable debug view (show hit targets, etc) */
 export let debug = false;
 export let onClick = () => { };
-const tooltip = writable({ y: 0, x: 0, data: null, show: showTooltip, hide: hideTooltip });
+const tooltip = writable({
+    y: 0,
+    x: 0,
+    data: null,
+    show: showTooltip,
+    hide: hideTooltip,
+});
 setTooltipContext(tooltip);
 let hideTimeoutId;
 $: bisectX = bisector((d) => {
@@ -112,10 +119,15 @@ 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) {
+    if (
+    // @ts-expect-error
+    e.offsetX < e.currentTarget?.offsetLeft ||
+        // @ts-expect-error
+        e.offsetX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
+        // @ts-expect-error
+        e.offsetY < e.currentTarget?.offsetTop ||
+        // @ts-expect-error
+        e.offsetY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight) {
         // Ignore if within padding of chart
         hideTooltip();
         return;
@@ -148,7 +160,9 @@ function showTooltip(e, tooltipData) {
                 const yValueAtPoint = scaleInvert($yScale, localY);
                 if (isScaleBand($xScale)) {
                     // Find point closest to pointer within the x band
-                    const bandData = $flatData.filter((d) => $x(d) === xValueAtPoint).sort(sortFunc($y)); // sort for bisect
+                    const bandData = $flatData
+                        .filter((d) => $x(d) === xValueAtPoint)
+                        .sort(sortFunc($y)); // sort for bisect
                     const index = bisectY(bandData, yValueAtPoint, 1);
                     const previousValue = bandData[index - 1];
                     const currentValue = bandData[index];
@@ -156,7 +170,9 @@ function showTooltip(e, tooltipData) {
                 }
                 else if (isScaleBand($yScale)) {
                     // Find point closest to pointer within the y band
-                    const bandData = $flatData.filter((d) => $y(d) === yValueAtPoint).sort(sortFunc($x)); // sort for bisect
+                    const bandData = $flatData
+                        .filter((d) => $y(d) === yValueAtPoint)
+                        .sort(sortFunc($x)); // sort for bisect
                     const index = bisectX(bandData, xValueAtPoint, 1);
                     const previousValue = bandData[index - 1];
                     const currentValue = bandData[index];
@@ -232,6 +248,7 @@ $: if (mode === 'quadtree') {
 }
 let rects = [];
 $: if (mode === 'bounds' || mode === 'band') {
+    // @ts-expect-error
     rects = $flatData
         .map((d) => {
         const xValue = $xGet(d);
@@ -240,7 +257,9 @@ $: if (mode === 'bounds' || mode === 'band') {
         const y = Array.isArray(yValue) ? yValue[0] : yValue;
         const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
         const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
+        // @ts-expect-error
         const fullWidth = max($xRange) - min($xRange);
+        // @ts-expect-error
         const fullHeight = max($yRange) - min($yRange);
         if (mode === 'band') {
             // full band width/height regardless of value
@@ -266,7 +285,8 @@ $: if (mode === 'bounds' || mode === 'band') {
                     ? yValue[1] - yValue[0]
                     : isScaleBand($yScale)
                         ? $yScale.step()
-                        : max($yRange) - y,
+                        : // @ts-expect-error
+                            max($yRange) - y,
                 data: d,
             };
         }
@@ -276,6 +296,8 @@ $: if (mode === 'bounds' || mode === 'band') {
 $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   style:width="{$width}px"
   style:height="{$height}px"
@@ -299,19 +321,26 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
     class="absolute"
     style:width="{$containerWidth}px"
     style:height="{$containerHeight}px"
-    style:top="{-$padding.top}px"
-    style:left="{-$padding.left}px"
+    style:top="-{$padding.top ?? 0}px"
+    style:left="-{$padding.left ?? 0}px"
   >
     <slot tooltip={$tooltip} />
 
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
-          on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
-          on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
+          on:pointerenter={(e) => {
+            // @ts-expect-error
+            showTooltip(e.detail.event, e.detail.data);
+          }}
+          on:pointermove={(e) => {
+            showTooltip(e.detail.event, e.detail.data);
+          }}
           on:pointerleave={hideTooltip}
           on:pointerdown={(e) => {
-            if (e.target.hasPointerCapture(e.pointerId)) {
+            // @ts-expect-error
+            if (e.target?.hasPointerCapture(e.pointerId)) {
+              // @ts-expect-error
               e.target.releasePointerCapture(e.pointerId);
             }
           }}
@@ -335,7 +364,9 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
               on:pointermove={(e) => showTooltip(e, rect.data)}
               on:pointerleave={hideTooltip}
               on:pointerdown={(e) => {
-                if (e.target.hasPointerCapture(e.pointerId)) {
+                // @ts-expect-error
+                if (e.target?.hasPointerCapture(e.pointerId)) {
+                  // @ts-expect-error
                   e.target.releasePointerCapture(e.pointerId);
                 }
               }}

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

@@ -35,7 +35,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null;
+                data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: FormatType;
+        format?: FormatType | undefined;
         valueAlign?: "left" | "right" | "center";
         classes?: {
             label?: string;

package/dist/components/TransformContext.svelte

@@ -28,8 +28,9 @@ function setTransformContext(transform) {
 </script>
 
 <script>import { createEventDispatcher } from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 export let mode = 'none';
 /** Translate towards point (ex. mouse cursor/center) while zooming in/out */
 export let translateOnScale = false;
@@ -111,8 +112,11 @@ function onPointerMove(e) {
     }
     if ($dragging) {
         e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-        e.currentTarget.setPointerCapture(e.pointerId);
-        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        // @ts-expect-error
+        e.currentTarget?.setPointerCapture(e.pointerId);
+        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 function onPointerUp(e) {
@@ -142,10 +146,14 @@ function onWheel(e) {
     if ($scrollMode === 'scale' || pinchToZoom) {
         // https://github.com/d3/d3-zoom#zoom_wheelDelta
         const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
-        scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        scaleTo(Math.pow(2, scaleBy), point, 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
     else if ($scrollMode === 'translate') {
-        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 /**
@@ -172,9 +180,11 @@ const translating = motionFinishHandler();
 const scaling = motionFinishHandler();
 const moving = derived([dragging, translating, scaling], ([dragging, translating, scaling]) => dragging || translating || scaling);
 export function setTranslate(point, options) {
+    // @ts-expect-error
     translating.handle(translate.set(point, options));
 }
 export function setScale(value, options) {
+    // @ts-expect-error
     scaling.handle(scale.set(value, options));
 }
 function localPoint(e) {
@@ -207,8 +217,9 @@ setTransformContext({
 });
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  on:mousewheel={onWheel}
+  on:wheel={onWheel}
   on:pointerdown={onPointerDown}
   on:pointermove={onPointerMove}
   on:touchmove={(e) => {

package/dist/components/TransformControls.svelte

@@ -32,6 +32,7 @@ const transform = transformContext();
 const scrollMode = transform.scrollMode;
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(
     'bg-surface-300/50 rounded-full m-1 backdrop-blur z-10 flex',

package/dist/components/Tree.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { tree as d3Tree } from 'd3-hierarchy';
-const { data, width, height, padding } = getContext('LayerCake');
+<script>import { tree as d3Tree } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
+const { data, width, height } = chartContext();
 /**
  * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
  * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -24,6 +24,7 @@ $: {
         tree.separation(separation);
     }
 }
+// @ts-expect-error
 $: treeData = tree($data);
 </script>
 

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

@@ -11,7 +11,7 @@ declare const __propDef: {
            */ nodeSize?: [number, number] | undefined;
         /**
            * see: https://github.com/d3/d3-hierarchy#tree_separation
-           */ separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
+           */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
         orientation?: "vertical" | "horizontal";
     };
     events: {
@@ -19,8 +19,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: any;
-            links: any;
+            nodes: HierarchyPointNode<any>[];
+            links: import("d3-hierarchy").HierarchyPointLink<any>[];
         };
     };
 };

package/dist/components/Treemap.svelte

@@ -1,8 +1,8 @@
-<script>import { getContext } from 'svelte';
-import * as d3 from 'd3-hierarchy';
+<script>import { treemap as d3treemap, treemapBinary, treemapDice, treemapResquarify, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
 import { aspectTile } from '../utils/treemap.js';
-const { data, width, height } = getContext('LayerCake');
-export let tile = d3.treemapSquarify;
+const { data, width, height } = chartContext();
+export let tile = treemapSquarify;
 export let padding = 0;
 export let paddingInner = 0;
 export let paddingOuter = 0;
@@ -13,22 +13,21 @@ export let paddingRight = undefined;
 export let selected = null;
 $: tileFunc =
     tile === 'squarify'
-        ? d3.treemapSquarify
+        ? treemapSquarify
         : tile === 'resquarify'
-            ? d3.treemapResquarify
+            ? treemapResquarify
             : tile === 'binary'
-                ? d3.treemapBinary
+                ? treemapBinary
                 : tile === 'dice'
-                    ? d3.treemapDice
+                    ? treemapDice
                     : tile === 'slice'
-                        ? d3.treemapSlice
+                        ? treemapSlice
                         : tile === 'sliceDice'
-                            ? d3.treemapSliceDice
+                            ? treemapSliceDice
                             : tile;
 let treemap;
 $: {
-    treemap = d3
-        .treemap()
+    treemap = d3treemap()
         .size([$width, $height])
         .tile(aspectTile(tileFunc, $width, $height));
     if (padding) {

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

@@ -1,23 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import * as d3 from 'd3-hierarchy';
+import { treemapSquarify, type HierarchyRectangularNode } from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: typeof d3.treemapSquarify | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice";
+        tile?: typeof treemapSquarify | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice";
         padding?: number;
         paddingInner?: number;
         paddingOuter?: number;
         paddingTop?: number;
         paddingBottom?: number;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
-        selected?: any;
+        paddingLeft?: number | undefined;
+        paddingRight?: number | undefined;
+        selected?: HierarchyRectangularNode<any> | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            nodes: any;
+            nodes: HierarchyRectangularNode<any>[];
         };
     };
 };

package/dist/components/Voronoi.svelte

@@ -1,11 +1,13 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { createEventDispatcher } from 'svelte';
 import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
+// @ts-expect-error
 import { geoVoronoi } from 'd3-geo-voronoi';
+import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import GeoPath from './GeoPath.svelte';
 import { geoContext } from './GeoContext.svelte';
-const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = getContext('LayerCake');
+const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = chartContext();
 const geo = geoContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -18,6 +20,7 @@ $: points = (data ?? $flatData).map((d) => {
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
     const point = [x, y];
+    // @ts-expect-error
     point.data = d;
     return point;
 });
@@ -48,6 +51,8 @@ $: boundHeight = Math.max($height, 0);
   {:else}
     {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
     {#each points as point, i}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}

package/dist/components/layout/Canvas.svelte

@@ -1,12 +1,14 @@
-<script>import { getContext, onMount, setContext } from 'svelte';
+<script>import { onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
-const { width, height, containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { width, height, containerWidth, containerHeight, padding } = chartContext();
 /** The `<canvas>` tag. Useful for bindings. */
 export let element = undefined;
 /** The `<canvas>`'s 2d context. Useful for bindings. */
+// @ts-expect-error: set during onMount()
 export let context = undefined;
 /** Force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.
  * see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently */
@@ -31,7 +33,7 @@ const { mode, scale, translate } = transformContext();
 $: if (context) {
     scaleCanvas(context, $containerWidth, $containerHeight);
     context.clearRect(0, 0, $containerWidth, $containerHeight);
-    context.translate($padding.left, $padding.top);
+    context.translate($padding.left ?? 0, $padding.top ?? 0);
     if (mode === 'canvas') {
         const center = { x: $width / 2, y: $height / 2 };
         const newTranslate = {

package/dist/components/layout/Html.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 /** The layer's outermost `<div>` tag. Useful for bindings. */
 export let element = undefined;
 /** The layer's z-index. */
@@ -14,7 +14,7 @@ export let label = undefined;
 export let labelledBy = undefined;
 /** A string passed to the `aria-describedby` property on the `<div>` tag. */
 export let describedBy = undefined;
-const { padding } = getContext('LayerCake');
+const { padding } = chartContext();
 $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
 </script>
 

package/dist/components/layout/Svg.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-import { cls } from 'svelte-ux';
+<script>import { cls } from 'svelte-ux';
+import { chartContext } from '../ChartContext.svelte';
 import { transformContext } from '../TransformContext.svelte';
 /** The layer's `<svg>` tag. Useful for bindings. */
 export let element = undefined;
@@ -19,7 +19,7 @@ export let labelledBy = undefined;
 export let describedBy = undefined;
 /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
 export let title = undefined;
-const { containerWidth, containerHeight, width, height, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, width, height, padding } = chartContext();
 const { mode, scale, translate } = transformContext();
 let transform = '';
 $: if (mode === 'canvas') {
@@ -32,6 +32,8 @@ $: if (mode === 'canvas') {
 }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   bind:this={element}
   {viewBox}
@@ -48,6 +50,7 @@ $: if (mode === 'canvas') {
   aria-labelledby={labelledBy}
   aria-describedby={describedBy}
   on:click
+  role="figure"
 >
   <slot name="title">
     {#if title}<title>{title}</title>{/if}

package/dist/docs/Code.svelte

@@ -1,16 +1,15 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { CopyButton, cls, getComponentClasses } from 'svelte-ux';
+import { CopyButton, cls } from 'svelte-ux';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source
     ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
 export let classes = {};
-const settingsClasses = getComponentClasses('Code');
 </script>
 
-<div class={cls('Code', 'rounded', settingsClasses.root, classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded', classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre

package/dist/docs/GeoDebug.svelte

@@ -1,7 +1,7 @@
-<script>import { getContext } from 'svelte';
-import { format, Checkbox, cls } from 'svelte-ux';
+<script>import { format, Checkbox, cls } from 'svelte-ux';
+import { chartContext } from '../components/ChartContext.svelte';
 import { geoContext } from '../components/GeoContext.svelte';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 const geo = geoContext();
 let showCenter = false;
 </script>
@@ -33,7 +33,7 @@ let showCenter = false;
 
     <div>
       <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
-      {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
+      {#each $geo.invert?.([$width / 2, $height / 2]) ?? [] as coord}
         <div class="text-right">{format(coord, 'decimal')}</div>
       {/each}
     </div>

package/dist/docs/Link.svelte

@@ -1,7 +1,5 @@
-<script>"use strict";
-// console.log($$props, $$slots);
-</script>
-
+<!-- href provided by markdown/mdsvex -->
+<!-- svelte-ignore a11y-missing-attribute -->
 <a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>

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

@@ -1,3 +1,17 @@
+/** @typedef {typeof __propDef.props}  LinkProps */
+/** @typedef {typeof __propDef.events}  LinkEvents */
+/** @typedef {typeof __propDef.slots}  LinkSlots */
+export default class Link extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -10,9 +24,4 @@ declare const __propDef: {
         default: {};
     };
 };
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
-}
 export {};

package/dist/docs/Preview.svelte

@@ -9,7 +9,7 @@ import Json from './Json.svelte';
 export let code = undefined;
 export let data = undefined;
 export let language = 'svelte';
-export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
+export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
 export let showCode = false;
 let copyValue = null;
 try {

package/dist/docs/TilesetField.svelte

@@ -89,7 +89,7 @@ $: serviceUrl = getServiceUrl(selected);
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation>
+  <div slot="append" on:click|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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         doubleScale?: boolean;
-        serviceUrl?: (x: number, y: number, z: number) => string;
+        serviceUrl?: Function;
     };
     events: {
         click: MouseEvent;

package/dist/docs/ViewSourceButton.svelte

@@ -1,9 +1,9 @@
-<script>import { mdiGithub } from '@mdi/js';
-import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+<script>import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import { mdiGithub } from '@mdi/js';
 import Code from './Code.svelte';
 export let label;
-export let source;
-export let href;
+export let source = undefined;
+export let href = undefined;
 export let icon;
 </script>
 

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

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
+import { Button } from 'svelte-ux';
 declare const __propDef: {
     props: {
         label: string;
-        source: string;
-        href: string;
-        icon: string;
+        source?: string | undefined;
+        href?: string | undefined;
+        icon: ComponentProps<Button>["icon"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/stores/motionStore.d.ts

@@ -1,6 +1,6 @@
 import { spring, tweened } from 'svelte/motion';
-export type SpringOptions = Parameters<typeof spring>[1];
-export type TweenedOptions = Parameters<typeof tweened>[1];
+export type SpringOptions = Parameters<typeof spring<any>>[1];
+export type TweenedOptions = Parameters<typeof tweened<any>>[1];
 export type MotionOptions = {
     spring?: boolean | SpringOptions;
     tweened?: boolean | TweenedOptions;

package/dist/stores/motionStore.js

@@ -22,14 +22,16 @@ export function resolveOptions(prop, options) {
         spring: typeof options.spring === 'boolean' || options.spring == null
             ? options.spring
             : prop in options.spring
-                ? options.spring[prop]
+                ? //@ts-expect-error
+                    options.spring[prop]
                 : Object.keys(options.spring).some((key) => ['precision', 'damping', 'stiffness'].includes(key))
                     ? options.tweened
                     : false,
         tweened: typeof options.tweened === 'boolean' || options.tweened == null
             ? options.tweened
             : prop in options.tweened
-                ? options.tweened[prop]
+                ? //@ts-expect-error
+                    options.tweened[prop]
                 : Object.keys(options.tweened).some((key) => ['delay', 'duration', 'easing'].includes(key))
                     ? options.tweened
                     : false,

package/dist/utils/array.d.ts

@@ -0,0 +1,5 @@
+import { extent as d3extent, type Numeric } from 'd3-array';
+/**
+ * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
+ */
+export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3extent<T>>[0]): [T, T];