layerchart 0.15.5 → 0.16.0

package/README.md

@@ -1,3 +1,24 @@
 # layerchart
 
-WIP
+A large collection of composable Svelte chart components to build a wide range of visualizations
+
+- Cartesian (Bar, Area, Stack, Scatter)
+- Radial (Pie, Arc, Sunburst)
+- Hierarchy (Pack, Tree, Treemap, Sunburst)
+- Graph (Sankey)
+- Geo (Choropleth, Spike, Bubble, Point, Globe)
+
+Interactions
+
+- Tooltip, Highlights, Pan/Zoom
+
+SVG
+
+- Basic (Arc, Circle, Group, Line, Path, Text)
+- Gradients and Patterns
+- ClipPath
+- Multi-line text
+
+Others
+
+- Legends including ColorRamps

package/dist/components/AxisX.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { format } from 'svelte-ux/utils/format';
+import { format } from 'svelte-ux';
 import { max } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
-        formatTick?: any;
+        formatTick?: FormatType;
         ticks?: undefined;
         xTick?: undefined;
         yTick?: number | undefined;

package/dist/components/AxisY.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext, SvelteComponentTyped } from 'svelte';
-import { format } from 'svelte-ux/utils/format';
+<script>import { getContext } from 'svelte';
+import { format } from 'svelte-ux';
 import { min, max } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         gridlines?: boolean | svelte.JSX.SVGProps<SVGLineElement>;
         ticks?: number | Function | undefined;
-        formatTick?: any;
+        formatTick?: FormatType;
         xTick?: number | undefined;
         yTick?: number | undefined;
         dxTick?: number | undefined;

package/dist/components/Baseline.svelte

@@ -1,6 +1,6 @@
 <script>import { min, max } from 'd3-array';
 import { getContext } from 'svelte';
-import { cls } from 'svelte-ux/utils/styles';
+import { cls } from 'svelte-ux';
 import { isScaleBand } from '../utils/scales';
 const { xRange, yScale, yRange } = getContext('LayerCake');
 export let x = false;

package/dist/components/Blur.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux';
 export let id = uniqueId('blur-');
 export let stdDeviation = 5;
 </script>

package/dist/components/Chart.svelte

@@ -78,6 +78,8 @@ export let geo = undefined;
 	let:height
 	let:width
 	let:element
+	let:xScale
+	let:yScale
 >
 	<GeoContext {...geo} let:projection>
 		{#if tooltip}
@@ -91,6 +93,8 @@ export let geo = undefined;
 					{element}
 					{projection}
 					{tooltip}
+					{xScale}
+					{yScale}
 				/>
 			</TooltipContext>
 		{:else}
@@ -102,6 +106,8 @@ export let geo = undefined;
 				{width}
 				{element}
 				{projection}
+				{xScale}
+				{yScale}
 			/>
 		{/if}
 	</GeoContext>

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

@@ -31,6 +31,8 @@ declare const __propDef: {
             width: number;
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
+            xScale: any;
+            yScale: any;
         };
     };
 };

package/dist/components/CircleClipPath.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux';
 import ClipPath from './ClipPath.svelte';
 import Circle from './Circle.svelte';
 /** Unique id for clipPath */

package/dist/components/ClipPath.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux';
 /** Unique id for clipPath */
 export let id = uniqueId('clipPath-');
 </script>

package/dist/components/ClipPathUse.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux';
 import ClipPath from './ClipPath.svelte';
 /** Id of path or shape */
 export let refId;

package/dist/components/Labels.svelte

@@ -7,10 +7,10 @@ import { getContext } from 'svelte';
 import { scaleBand } from 'd3-scale';
 import { max, min } from 'd3-array';
 import Text from './Text.svelte';
+import { format as formatValue } from 'svelte-ux';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
-import { isScaleBand } from '../utils/scales';
 import { greatestAbs, unique } from 'svelte-ux/utils/array';
-import { format as formatValue } from 'svelte-ux/utils/format';
+import { isScaleBand } from '../utils/scales';
 const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
 export let orientation = 'auto';
 export let significantDigits = 3;

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
         orientation?: "auto" | "outside" | "inside" | undefined;
         significantDigits?: number | undefined;
-        format?: any;
+        format?: FormatType;
         formatStyle?: any;
         overlap?: boolean | undefined;
         groupBy?: string | undefined;

package/dist/components/Legend.svelte

@@ -2,9 +2,9 @@
 import { scaleBand, scaleLinear } from 'd3-scale';
 import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
 import { quantile, range } from 'd3-array';
-import { format } from 'svelte-ux/utils/format';
+import { format } from 'svelte-ux';
 import ColorRamp from './ColorRamp.svelte';
-import { cls } from 'svelte-ux/utils/styles';
+import { cls } from 'svelte-ux';
 const { rScale } = getContext('LayerCake') ?? {};
 export let scale = undefined;
 export let title = '';

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,7 +8,7 @@ declare const __propDef: {
         width?: number | undefined;
         height?: number | undefined;
         ticks?: number | undefined;
-        tickFormat?: any;
+        tickFormat?: FormatType;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickSize?: number | undefined;

package/dist/components/Link.svelte

@@ -5,7 +5,7 @@ import { motionStore } from '../stores/motionStore';
 export let data = undefined; // TODO: Update Type
 export let orientation = 'horizontal';
 /**
- * Update source and target accessors to be compatibke with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+ * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
  */
 export let sankey = false;
 export let source = sankey ? (d) => [d.source.x1, d.y0] : (d) => d.source;

package/dist/components/RectClipPath.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux/utils/string';
+<script>import { uniqueId } from 'svelte-ux';
 import ClipPath from './ClipPath.svelte';
 import Rect from './Rect.svelte';
 /** Unique id for clipPath */

package/dist/components/Text.svelte

@@ -14,27 +14,27 @@ Reference:
 */
 /** text value */
 export let value = 0;
-/** Maximum width to occupy (approximate as words are not split). */
+/** Maximum width to occupy (approximate as words are not split) */
 export let width = undefined;
-/** x position of the text. */
+/** x position of the text */
 export let x = 0;
-/** y position of the text. */
+/** y position of the text */
 export let y = 0;
-/** dx offset of the text. */
+/** dx offset of the text */
 export let dx = 0;
-/** dy offset of the text. */
+/** dy offset of the text */
 export let dy = 0;
-/** Desired "line height" of the text, implemented as y offsets. */
+/** Desired "line height" of the text, implemented as y offsets */
 export let lineHeight = '1em';
-/** Cap height of the text. */
+/** Cap height of the text */
 export let capHeight = '0.71em'; // Magic number from d3
-/** Whether to scale the fontSize to accommodate the specified width.  */
+/** Whether to scale the fontSize to accommodate the specified width  */
 export let scaleToFit = false;
-/** Horizontal text anchor. */
+/** Horizontal text anchor */
 export let textAnchor = 'start';
-/** Vertical text anchor. */
+/** Vertical text anchor */
 export let verticalAnchor = 'end'; // default SVG behavior
-/** Rotational angle of the text. */
+/** Rotational angle of the text */
 export let rotate = undefined;
 let wordsByLines = [];
 let wordsWithWidth = [];

package/dist/components/TooltipItem.svelte

@@ -1,5 +1,4 @@
-<script>import { cls } from 'svelte-ux/utils/styles';
-import { format as formatUtil } from 'svelte-ux/utils/format';
+<script>import { cls, format as formatUtil } from 'svelte-ux';
 export let label;
 export let value = undefined; // Can be pass as slot
 export let format = undefined;

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from 'svelte-ux';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: any;
+        format?: FormatType;
         valueAlign?: "left" | "right" | "center" | undefined;
     };
     events: {

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;
-        scroll?: "scale" | "translate" | "none" | undefined;
+        scroll?: "none" | "scale" | "translate" | undefined;
         clickDistance?: number | undefined;
         initialTranslate?: {
             x: number;

package/dist/docs/Blockquote.svelte

@@ -1,7 +1,7 @@
-<script>
-  // console.log($$props, $$slots);
+<script>"use strict";
+// console.log($$props, $$slots);
 </script>
 
 <div class="bg-black/5 border-l-4 border-blue-500 p-4 my-4 rounded">
-  <slot />
+	<slot />
 </div>

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

@@ -1,22 +1,6 @@
-/** @typedef {typeof __propDef.props}  BlockquoteProps */
-/** @typedef {typeof __propDef.events}  BlockquoteEvents */
-/** @typedef {typeof __propDef.slots}  BlockquoteSlots */
-export default class Blockquote extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type BlockquoteProps = typeof __propDef.props;
-export type BlockquoteEvents = typeof __propDef.events;
-export type BlockquoteSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,4 +8,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+}
 export {};

package/dist/docs/Code.svelte

@@ -1,14 +1,12 @@
-<script>
-	import Prism from 'prismjs';
-	import 'prism-svelte';
-	import { mdiContentCopy } from '@mdi/js';
-	import { Button } from 'svelte-ux';
-	import { cls } from 'svelte-ux/utils/styles';
-	export let code = null;
-	export let language = 'svelte';
-	export let highlightedCode = code
-		? Prism.highlight(code, Prism.languages[language], language)
-		: '';
+<script>import Prism from 'prismjs';
+import 'prism-svelte';
+import { mdiContentCopy } from '@mdi/js';
+import { Button, cls } from 'svelte-ux';
+export let code = null;
+export let language = 'svelte';
+export let highlightedCode = code
+    ? Prism.highlight(code, Prism.languages[language], language)
+    : '';
 </script>
 
 <div class={cls('rounded', $$restProps.class)}>

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

@@ -1,19 +1,5 @@
-/** @typedef {typeof __propDef.props}  CodeProps */
-/** @typedef {typeof __propDef.events}  CodeEvents */
-/** @typedef {typeof __propDef.slots}  CodeSlots */
-export default class Code extends SvelteComponentTyped<{
-    [x: string]: any;
-    code?: null | undefined;
-    language?: string | undefined;
-    highlightedCode?: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import 'prism-svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -26,4 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
+}
 export {};

package/dist/docs/GeoDebug.svelte

@@ -1,6 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { format, Checkbox } from 'svelte-ux';
-import { cls } from 'svelte-ux/utils/styles';
+import { format, Checkbox, cls } from 'svelte-ux';
 import { geoContext } from '../components/GeoContext.svelte';
 const { width, height } = getContext('LayerCake');
 const geo = geoContext();
@@ -9,19 +8,19 @@ let showCenter = false;
 
 <div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
 	<div class="grid gap-2 ml-2 text-xs">
-		<div><span class="text-black/50">scale:</span> {format.format($geo.scale(), 'decimal')}</div>
+		<div><span class="text-black/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
 		<div>
 			<span class="text-black/50">translate:</span>
 			{#each $geo.translate() as coord}
-				<div class="ml-2">{format.format(coord, 'decimal')}</div>
+				<div class="ml-2">{format(coord, 'decimal')}</div>
 			{/each}
 		</div>
 
 		<div>
 			<span class="text-black/50">rotate:</span>
 			{#each $geo.rotate() as angle}
-				<div class="ml-2">{format.format(angle, 'decimal')}</div>
+				<div class="ml-2">{format(angle, 'decimal')}</div>
 			{/each}
 		</div>
 
@@ -30,7 +29,7 @@ let showCenter = false;
 		<div>
 			<span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
 			{#each $geo.invert?.([$width / 2, $height / 2]) as coord}
-				<div class="ml-2">{format.format(coord, 'decimal')}</div>
+				<div class="ml-2">{format(coord, 'decimal')}</div>
 			{/each}
 		</div>
 	</div>

package/dist/docs/Header1.svelte

@@ -1,5 +1,4 @@
-<script>
-	import { SectionDivider } from 'svelte-ux';
+<script>import { SectionDivider } from 'svelte-ux';
 </script>
 
 <!--

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

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

package/dist/docs/Layout.svelte

@@ -7,12 +7,12 @@
 	export { a, blockquote };
 </script>
 
-<script>
-	// frontmatter: https://mdsvex.com/docs#frontmatter-1
-	// export let name = undefined;
-	// export let sourceUrl = undefined;
-	// export let docUrl = undefined;
-	// export let description = undefined;
+<script>"use strict";
+// frontmatter: https://mdsvex.com/docs#frontmatter-1
+// export let name = undefined;
+// export let sourceUrl = undefined;
+// export let docUrl = undefined;
+// export let description = undefined;
 </script>
 
 <slot />

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

@@ -1,24 +1,9 @@
-/** @typedef {typeof __propDef.props}  LayoutProps */
-/** @typedef {typeof __propDef.events}  LayoutEvents */
-/** @typedef {typeof __propDef.slots}  LayoutSlots */
-export default class Layout extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type LayoutProps = typeof __propDef.props;
-export type LayoutEvents = typeof __propDef.events;
-export type LayoutSlots = typeof __propDef.slots;
-import a from './Link.svelte';
-import blockquote from './Blockquote.svelte';
 import { SvelteComponentTyped } from "svelte";
+import blockquote from './Blockquote.svelte';
+import a from './Link.svelte';
+export { a, blockquote };
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -26,4 +11,8 @@ declare const __propDef: {
         default: {};
     };
 };
-export { a, blockquote };
+export type LayoutProps = typeof __propDef.props;
+export type LayoutEvents = typeof __propDef.events;
+export type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}

package/dist/docs/Link.svelte

@@ -1,7 +1,7 @@
-<script>
-  // console.log($$props, $$slots);
+<script>"use strict";
+// console.log($$props, $$slots);
 </script>
 
 <a class="text-blue-500 font-medium" {...$$restProps}>
-  <slot />
+	<slot />
 </a>

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

@@ -1,17 +1,3 @@
-/** @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: {
@@ -24,4 +10,9 @@ 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

@@ -4,7 +4,7 @@ import 'prism-svelte';
 import { mdiCodeTags, mdiContentCopy } from '@mdi/js';
 import { slide } from 'svelte/transition';
 import { Button } from 'svelte-ux';
-export let code = null;
+export let code = undefined;
 export let language = 'svelte';
 export let highlightedCode = Prism.highlight(code, Prism.languages.svelte, language);
 export let showCode = false;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
 declare const __propDef: {
     props: {
-        code?: null | undefined;
+        code?: string | undefined;
         language?: string | undefined;
         highlightedCode?: any;
         showCode?: boolean | undefined;

package/dist/docs/ZoomControls.svelte

@@ -1,5 +1,4 @@
-<script>import { Button, Tooltip } from 'svelte-ux';
-import { cls } from 'svelte-ux/utils/styles';
+<script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus } from '@mdi/js';
 export let zoom;
 export let placement = 'top-right';

package/dist/utils/quadtree.d.ts

@@ -1,4 +1,12 @@
+import type { Quadtree } from 'd3-quadtree';
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 /**
- * Transverse guadtree and generate rect dimensions
+ * Transverse quadtree and generate rect dimensions
  */
-export declare function quadtreeRects(quadtree: any, showLeaves?: boolean): any[];
+export declare function quadtreeRects<T>(quadtree: Quadtree<T>, showLeaves?: boolean): Rect[];
+export {};

package/dist/utils/quadtree.js

@@ -1,5 +1,5 @@
 /**
- * Transverse guadtree and generate rect dimensions
+ * Transverse quadtree and generate rect dimensions
  */
 export function quadtreeRects(quadtree, showLeaves = true) {
     const rects = [];

package/package.json

@@ -3,7 +3,7 @@
 	"author": "Sean Lynch <techniq35@gmail.com>",
 	"license": "MIT",
 	"repository": "techniq/layerchart",
-	"version": "0.15.5",
+	"version": "0.16.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -17,11 +17,11 @@
 	},
 	"devDependencies": {
 		"@rollup/plugin-dsv": "^3.0.2",
-		"@sveltejs/adapter-vercel": "^2.4.3",
-		"@sveltejs/kit": "^1.16.0",
+		"@sveltejs/adapter-vercel": "^3.0.1",
+		"@sveltejs/kit": "^1.20.2",
 		"@sveltejs/package": "^2.0.2",
 		"@tailwindcss/typography": "^0.5.9",
-		"@types/d3-array": "^3.0.4",
+		"@types/d3-array": "^3.0.5",
 		"@types/d3-delaunay": "^6.0.1",
 		"@types/d3-dsv": "^3.0.1",
 		"@types/d3-geo": "^3.0.3",
@@ -33,29 +33,30 @@
 		"@types/d3-scale": "^4.0.3",
 		"@types/d3-shape": "^3.1.1",
 		"@types/lodash-es": "^4.17.7",
+		"@types/shapefile": "^0.6.1",
 		"@types/topojson-client": "^3.1.1",
 		"autoprefixer": "^10.4.14",
 		"mdsvex": "^0.10.6",
 		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.0",
+		"prettier-plugin-svelte": "^2.10.1",
 		"prism-themes": "^1.9.0",
 		"rehype-slug": "^5.1.0",
-		"svelte-check": "^3.3.0",
-		"svelte-preprocess": "^5.0.1",
-		"svelte2tsx": "^0.6.12",
+		"svelte-check": "^3.4.3",
+		"svelte-preprocess": "^5.0.4",
+		"svelte2tsx": "^0.6.15",
 		"tailwindcss": "^3.3.2",
-		"tslib": "^2.5.0",
-		"typescript": "^5.0.4",
+		"tslib": "^2.5.3",
+		"typescript": "^5.1.3",
 		"unist-util-visit": "^4.1.2",
 		"us-atlas": "^3.0.1",
-		"vite": "^4.3.4",
+		"vite": "^4.3.9",
 		"vite-plugin-sveld": "^1.1.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@mdi/js": "^7.2.96",
 		"@vercel/analytics": "^1.0.1",
-		"d3-array": "^3.2.3",
+		"d3-array": "^3.2.4",
 		"d3-delaunay": "^6.0.4",
 		"d3-dsv": "^3.0.1",
 		"d3-geo": "^3.1.0",
@@ -72,8 +73,9 @@
 		"date-fns": "^2.30.0",
 		"layercake": "^7.4.0",
 		"lodash-es": "^4.17.21",
-		"svelte": "^3.58.0",
-		"svelte-ux": "^0.35.3",
+		"shapefile": "^0.6.6",
+		"svelte": "^3.59.1",
+		"svelte-ux": "^0.40.2",
 		"topojson-client": "^3.1.0"
 	},
 	"main": "./dist/index.js",