layerchart 0.27.0 → 0.28.0-next.1

package/dist/components/Axis.svelte

@@ -91,7 +91,7 @@ function getDefaultLabelProps() {
         y1={$yRange[0] || 0}
         y2={$yRange[1] || 0}
         {...lineProps}
-        class={cls('rule stroke-gray-400', lineProps?.class)}
+        class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
     {/if}
 
@@ -102,7 +102,7 @@ function getDefaultLabelProps() {
         y1={placement === 'top' ? yRangeMin : yRangeMax}
         y2={placement === 'top' ? yRangeMin : yRangeMax}
         {...lineProps}
-        class={cls('rule stroke-gray-400', lineProps?.class)}
+        class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
     {/if}
   {/if}
@@ -119,7 +119,7 @@ function getDefaultLabelProps() {
             x2={tickCoords.x}
             y2={yRangeMax}
             {...lineProps}
-            class={cls('grid stroke-gray-200', lineProps?.class)}
+            class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
         {:else if orientation === 'vertical'}
           <line
@@ -128,7 +128,7 @@ function getDefaultLabelProps() {
             x2={$width}
             y2={tickCoords.y}
             {...lineProps}
-            class={cls('grid stroke-gray-200', lineProps?.class)}
+            class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
         {/if}
       {/if}
@@ -140,7 +140,7 @@ function getDefaultLabelProps() {
           y1={tickCoords.y}
           x2={tickCoords.x}
           y2={tickCoords.y + (placement === 'top' ? -tickSize : tickSize)}
-          class="tick stroke-gray-400"
+          class="tick stroke-surface-content/50"
         />
       {:else if orientation === 'vertical'}
         <line
@@ -148,7 +148,7 @@ function getDefaultLabelProps() {
           y1={tickCoords.y}
           x2={tickCoords.x + (placement === 'left' ? -tickSize : tickSize)}
           y2={tickCoords.y}
-          class="tick stroke-gray-400"
+          class="tick stroke-surface-content/50"
         />
       {/if}
 
@@ -159,7 +159,7 @@ function getDefaultLabelProps() {
         {...getDefaultLabelProps()}
         {...labelProps}
         class={cls(
-          'label text-[10px] stroke-white [stroke-width:2px] font-light',
+          'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
           labelProps?.class
         )}
       />

package/dist/components/Calendar.svelte

@@ -51,7 +51,7 @@ $: cells = yearDays.map((date) => {
       fill={cell.color}
       on:mousemove={(e) => tooltip?.show(e, cell.data)}
       on:mouseleave={(e) => tooltip?.hide()}
-      class="stroke-black/5"
+      class="stroke-surface-content/5"
       {...$$restProps}
     />
   {/each}

package/dist/components/Highlight.svelte

@@ -167,7 +167,10 @@ $: if ($tooltip.data) {
         spring
         {..._area}
         {...typeof area === 'object' ? area : null}
-        class={cls(!area.fill && 'fill-black/5', typeof area === 'object' ? area.class : null)}
+        class={cls(
+          !area.fill && 'fill-surface-content/5',
+          typeof area === 'object' ? area.class : null
+        )}
         on:click
       />
     </slot>
@@ -184,7 +187,7 @@ $: if ($tooltip.data) {
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
         radius={typeof bar === 'object' ? bar.radius : null}
         bar={$tooltip.data}
-        class={cls(!bar.fill && 'fill-accent-500', typeof bar === 'object' ? bar.class : null)}
+        class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
         on:click
       />
     </slot>
@@ -201,7 +204,7 @@ $: if ($tooltip.data) {
           y2={line.y2}
           {...typeof lines === 'object' ? lines : null}
           class={cls(
-            'stroke-black/20 stroke-2 [stroke-dasharray:2,2] pointer-events-none',
+            'stroke-surface-content/20 stroke-2 [stroke-dasharray:2,2] pointer-events-none',
             typeof lines === 'object' ? lines.class : null
           )}
         />
@@ -223,7 +226,7 @@ $: if ($tooltip.data) {
           {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !fill && 'fill-accent-500',
+            !fill && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
         />

package/dist/components/Labels.svelte

@@ -101,7 +101,7 @@ $: getTextProps = (item) => {
     <!-- TODO: Add labels for each item when array/stack?  Use `getValue(item)` instead and iterate -->
     <Text
       value={getFormattedValue(item)}
-      class="text-xs stroke-white [stroke-width:2px]"
+      class="text-xs stroke-surface-100 [stroke-width:2px]"
       {...getTextProps(item)}
       {...$$restProps}
     />

package/dist/components/Legend.svelte

@@ -147,7 +147,7 @@ else {
             x={xScale(tick) + tickLabelOffset}
             y={height + tickSize + tickFontSize}
             style:font-size={tickFontSize}
-            class={classes.label}
+            class={cls('fill-surface-content', classes.label)}
           >
             {tickFormat ? format(tick, tickFormat) : tick}
           </text>
@@ -158,7 +158,7 @@ else {
               y1={0}
               x2={xScale(tick)}
               y2={height + tickSize}
-              class={cls('stroke-black', classes.tick)}
+              class={cls('stroke-surface-content', classes.tick)}
             />
           {/if}
         {/each}

package/dist/components/Link.svelte

@@ -11,8 +11,8 @@ export let source = sankey ? (d) => [d.source.x1, d.y0] : (d) => d.source;
 export let target = sankey ? (d) => [d.target.x0, d.y1] : (d) => d.target;
 /** Convenient property to swap x/y accessor logic */
 export let orientation = sankey ? 'horizontal' : 'vertical';
-export let x = sankey ? (d) => d[0] : (d) => (orientation === 'horizontal' ? d.y : d.x);
-export let y = sankey ? (d) => d[1] : (d) => (orientation === 'horizontal' ? d.x : d.y);
+export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
+export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
 export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 export let tweened = undefined;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;

package/dist/components/MonthPath.svelte

@@ -22,4 +22,4 @@ $: pathData = `
   `;
 </script>
 
-<path d={pathData} fill="none" stroke="black" {...$$restProps} />
+<path d={pathData} fill="none" class="stroke-surface-content/20" {...$$restProps} />

package/dist/components/Points.svelte

@@ -78,11 +78,11 @@ $: _links = $data.flatMap((d) => {
         const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
         return {
             source: {
-                x: xMin + getOffset(xMin, offsetX, $xScale),
+                x: xMin + getOffset(xMin, offsetX, $xScale) + r,
                 y,
             },
             target: {
-                x: xMax + getOffset(xMax, offsetX, $xScale),
+                x: xMax + getOffset(xMax, offsetX, $xScale) - r,
                 y: y,
             },
         };
@@ -112,7 +112,11 @@ $: _links = $data.flatMap((d) => {
   {#if links}
     <g class="link-group">
       {#each _links as link}
-        <Link data={link} stroke="black" {...typeof links === 'object' ? links : null} />
+        <Link
+          data={link}
+          class="stroke-surface-content/50"
+          {...typeof links === 'object' ? links : null}
+        />
       {/each}
     </g>
   {/if}

package/dist/components/Text.svelte

@@ -1,4 +1,5 @@
-<script>import { getStringWidth } from '../utils/string';
+<script>import { cls } from 'svelte-ux';
+import { getStringWidth } from '../utils/string';
 /*
   TODO:
     - [ ] Handle styled text (use <slot /> to measure?)
@@ -123,7 +124,14 @@ function isValidXOrY(xOrY) {
 <!-- `paint-order: stroke` supports stroke outlining text  -->
 <svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
   {#if isValidXOrY(x) && isValidXOrY(y)}
-    <text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
+    <text
+      {x}
+      {y}
+      {transform}
+      text-anchor={textAnchor}
+      {...$$restProps}
+      class={cls('fill-surface-content', $$props.class)}
+    >
       {#each wordsByLines as line, index}
         <tspan {x} dy={index === 0 ? startDy : lineHeight}>
           {line.words.join(' ')}

package/dist/components/Tooltip.svelte

@@ -119,7 +119,10 @@ $: if ($tooltip?.data) {
             'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
             '[&_.label]:text-white/75',
           ],
-          light: ['bg-white text-gray-800 border border-gray-500', '[&_.label]:text-black/50'],
+          light: [
+            'bg-white text-gray-800 border border-gray-500',
+            '[&_.label]:text-surface-content/50',
+          ],
           none: '',
         }[variant],
         classes.container,

package/dist/docs/Blockquote.svelte

@@ -1,11 +1,13 @@
 <script>import { mdiInformation } from '@mdi/js';
-import { Icon } from 'svelte-ux';
-// console.log($$props, $$slots);
+import { Icon, cls } from 'svelte-ux';
 </script>
 
 <div
-  class="bg-accent-500/10 border-l-[6px] border-l-accent-500 border-accent-500/30 text-accent-900 px-4 py-2 border my-4 rounded flex items-center gap-2 text-sm"
+  class={cls(
+    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded flex items-center gap-2 text-sm',
+    '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
+  )}
 >
-  <Icon data={mdiInformation} class="text-accent-500" />
+  <Icon data={mdiInformation} class="text-primary" />
   <slot />
 </div>

package/dist/docs/Code.svelte

@@ -1,22 +1,30 @@
 <script>import Prism from 'prismjs';
 import 'prism-svelte';
-import { CopyButton, cls } from 'svelte-ux';
+import { CopyButton, cls, getComponentTheme } from 'svelte-ux';
 export let source = null;
 export let language = 'svelte';
 export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language], language)
+    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
+export let classes = {};
+const theme = getComponentTheme('Code');
 </script>
 
-<div class={cls('rounded', $$restProps.class)}>
+<div class={cls('Code', 'rounded', theme.root, classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
-      <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
-        <code class="language-{language}">{@html highlightedSource}</code>
+      <pre
+        class={cls('language-{language} rounded', classes.pre)}
+        style="margin: 0; white-space: normal;">
+          <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
       </pre>
 
-      <div class="absolute top-0 right-0 p-2">
-        <CopyButton value={source} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
+      <div class="absolute top-0 right-0 p-2 z-10">
+        <CopyButton
+          value={source ?? ''}
+          class="text-white/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
+          size="sm"
+        />
       </div>
     </div>
   {/if}

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

@@ -6,6 +6,11 @@ declare const __propDef: {
         source?: string | null | undefined;
         language?: string | undefined;
         highlightedSource?: any;
+        classes?: {
+            root?: string | undefined;
+            pre?: string | undefined;
+            code?: string | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/docs/GeoDebug.svelte

@@ -8,26 +8,28 @@ 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($geo.scale(), 'decimal')}</div>
+    <div><span class="text-surface-content/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
     <div>
-      <span class="text-black/50">translate:</span>
+      <span class="text-surface-content/50">translate:</span>
       {#each $geo.translate() as coord}
         <div class="ml-2">{format(coord, 'decimal')}</div>
       {/each}
     </div>
 
     <div>
-      <span class="text-black/50">rotate:</span>
+      <span class="text-surface-content/50">rotate:</span>
       {#each $geo.rotate() as angle}
         <div class="ml-2">{format(angle, 'decimal')}</div>
       {/each}
     </div>
 
-    <div><span class="text-black/50">center:</span> {$geo.center?.()}</div>
+    <div><span class="text-surface-content/50">center:</span> {$geo.center?.()}</div>
 
     <div>
-      <span class="text-black/50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
+      <span class="text-surface-content/50"
+        >long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span
+      >
       {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
         <div class="ml-2">{format(coord, 'decimal')}</div>
       {/each}

package/dist/docs/Link.svelte

@@ -2,6 +2,6 @@
 // console.log($$props, $$slots);
 </script>
 
-<a class="text-accent-500 font-medium" {...$$restProps}>
+<a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>

package/dist/docs/Preview.svelte

@@ -3,7 +3,8 @@
 import Prism from 'prismjs';
 import 'prism-svelte';
 import { mdiCodeTags, mdiTable } from '@mdi/js';
-import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+import { Button, CopyButton, Dialog, Toggle, Tooltip, cls } from 'svelte-ux';
+import Code from './Code.svelte';
 import Json from './Json.svelte';
 export let code = undefined;
 export let data = undefined;
@@ -20,36 +21,32 @@ catch (e) {
 }
 </script>
 
-<div class="border border-black/20 rounded bg-white">
+<div class={cls('Preview border rounded bg-surface-100', $$props.class)}>
   <div class="p-4">
     <slot />
   </div>
 
   {#if code && showCode}
-    <div class="relative">
-      <pre
-        class="language-{language} rounded"
-        style="margin: 0; white-space: normal;"
-        transition:slide|local>
-          <code class="language-{language}">{@html highlightedCode}</code>
-      </pre>
-
-      <div class="absolute top-0 right-0 p-2">
-        <CopyButton value={code} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
-      </div>
+    <div transition:slide class="bg-surface-200">
+      <Code source={code} highlightedSource={highlightedCode} classes={{ pre: 'rounded-t-none' }} />
     </div>
   {/if}
 </div>
 
 {#if code}
-  <Button icon={mdiCodeTags} class=" text-black/60 py-1" on:click={() => (showCode = !showCode)}>
-    {showCode ? 'Hide' : 'Show'} code
+  <Button
+    icon={mdiCodeTags}
+    class="text-surface-content/70 py-1"
+    on:click={() => (showCode = !showCode)}
+  >
+    {showCode ? 'Hide' : 'Show'} Code
   </Button>
 {/if}
 
 {#if data}
   <Toggle let:on={open} let:toggle>
-    <Button icon={mdiTable} class=" text-black/60 py-1" on:click={toggle}>View data</Button>
+    <Button icon={mdiTable} class="text-surface-content/70 py-1" on:click={toggle}>View data</Button
+    >
     <Dialog
       {open}
       on:close={toggle}
@@ -62,7 +59,7 @@ catch (e) {
 
         {#if copyValue}
           <Tooltip title="Copy">
-            <CopyButton value={copyValue} variant="fill-light" color="accent" />
+            <CopyButton value={copyValue} variant="fill-light" color="primary" />
           </Tooltip>
         {/if}
       </div>
@@ -70,7 +67,7 @@ catch (e) {
       <Json value={data} />
 
       <div slot="actions">
-        <Button variant="fill" color="accent">Close</Button>
+        <Button variant="fill" color="primary">Close</Button>
       </div>
     </Dialog>
   </Toggle>

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         code?: string | undefined;
         data?: any | undefined;
         language?: string | undefined;

package/dist/docs/TilesetField.svelte

@@ -34,7 +34,7 @@ $: serviceOptions = {
         'satelllite-v9': mapboxv1('satellite-v9'),
         'satelllite-streets-v12': mapboxv1('satellite-streets-v12'),
         'navigation-day-v1': mapboxv1('navigation-day-v1'),
-        'navigation-night-v1': mapboxv1('navigation-night-v1')
+        'navigation-night-v1': mapboxv1('navigation-night-v1'),
     },
     'mapbox v4': {
         'natural-earth-2': mapboxv4('mapbox.natural-earth-2'),
@@ -42,7 +42,7 @@ $: serviceOptions = {
         streets: mapboxv4('mapbox.mapbox-streets-v8'),
         terrain: mapboxv4('mapbox.mapbox-terrain-v2'),
         'terrain-dem': mapboxv4('mapbox.mapbox-terrain-dem-v1'),
-        traffic: mapboxv4('mapbox.mapbox-traffic-v1')
+        traffic: mapboxv4('mapbox.mapbox-traffic-v1'),
         // 'transit (mapbox v4)': mapboxv4('mapbox.transit-v2'),
     },
     'National Map Services': {
@@ -50,7 +50,7 @@ $: serviceOptions = {
         'USGS Imagery Topo Base Map': nationalmap('USGSImageryTopo'),
         'USGS Imagery Only Base Map': nationalmap('USGSImageryOnly'),
         'USGS Shaded Relief': nationalmap('USGSShadedReliefOnly'),
-        'USGS Topo Base Map': nationalmap('USGSTopo')
+        'USGS Topo Base Map': nationalmap('USGSTopo'),
     },
     ArcGIS: {
         'USA Topo Map': arcgis('USA_Topo_Maps'),
@@ -60,8 +60,8 @@ $: serviceOptions = {
         'World Shaded Relief': arcgis('World_Shaded_Relief'),
         'World Street Map': arcgis('World_Street_Map'),
         'World Terrain Base': arcgis('World_Terrain_Base'),
-        'World Topo Map': arcgis('World_Topo_Map')
-    }
+        'World Topo Map': arcgis('World_Topo_Map'),
+    },
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
@@ -87,7 +87,7 @@ $: serviceUrl = getServiceUrl(selected);
     {/each}
   </select>
   <div slot="append">
-    <div class="text-[10px] text-black/50 text-center">2x</div>
+    <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>
 </Field>

package/dist/docs/ViewSourceButton.svelte

@@ -9,7 +9,7 @@ export let icon;
 
 {#if source}
   <Toggle let:on={open} let:toggle>
-    <Button {icon} on:click={toggle} variant="fill-light" color="accent" size="sm">{label}</Button>
+    <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
     <Dialog
       {open}
       on:close={toggle}
@@ -18,11 +18,11 @@ export let icon;
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
-          <div class="text-xs text-black/50 truncate">{href}</div>
+          <div class="text-xs text-surface-content/50 truncate">{href}</div>
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="accent" {href} target="_blank">
+          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}
@@ -33,13 +33,13 @@ export let icon;
       </div>
 
       <div slot="actions">
-        <Button variant="fill" color="accent">Close</Button>
+        <Button variant="fill" color="primary">Close</Button>
       </div>
     </Dialog>
   </Toggle>
 {:else if href}
   <Tooltip title="Edit this page">
-    <Button {icon} {href} target="_blank" variant="fill-light" color="accent" size="sm">
+    <Button {icon} {href} target="_blank" variant="fill-light" color="primary" size="sm">
       {label}
     </Button>
   </Tooltip>

package/dist/docs/ZoomControls.svelte

@@ -1,5 +1,5 @@
 <script>import { Button, Tooltip, cls } from 'svelte-ux';
-import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus } from '@mdi/js';
+import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
 export let zoom;
 export let placement = 'top-right';
 export let orientation = 'vertical';
@@ -7,7 +7,7 @@ export let orientation = 'vertical';
 
 <div
   class={cls(
-    'bg-black/5 rounded-full m-1 backdrop-blur z-10 flex',
+    'bg-surface-content/5 rounded-full m-1 backdrop-blur z-10 flex',
     orientation === 'vertical' && 'flex-col',
     {
       'top-left': 'absolute top-0 left-0',
@@ -18,7 +18,7 @@ export let orientation = 'vertical';
       right: 'absolute top-1/2 right-0 -translate-y-1/2',
       'bottom-left': 'absolute bottom-0 left-0',
       bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0'
+      'bottom-right': 'absolute bottom-0 right-0',
     }[placement]
   )}
 >
@@ -26,24 +26,28 @@ export let orientation = 'vertical';
     <Button
       icon={mdiMagnifyPlusOutline}
       on:click={() => zoom.increase()}
-      class="text-black/50 p-2"
+      class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Zoom out">
     <Button
       icon={mdiMagnifyMinusOutline}
       on:click={() => zoom.decrease()}
-      class="text-black/50 p-2"
+      class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Center">
     <Button
       icon={mdiImageFilterCenterFocus}
       on:click={() => zoom.translateCenter()}
-      class="text-black/50 p-2"
+      class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Reset">
-    <Button icon={mdiArrowULeftTop} on:click={() => zoom.reset()} class="text-black/50 p-2" />
+    <Button
+      icon={mdiArrowULeftTop}
+      on:click={() => zoom.reset()}
+      class="text-surface-content/50 p-2"
+    />
   </Tooltip>
 </div>

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.27.0",
+  "version": "0.28.0-next.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-vercel": "^3.1.0",
+    "@sveltejs/adapter-auto": "^2.1.1",
     "@sveltejs/kit": "^1.27.6",
     "@sveltejs/package": "^2.2.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -42,6 +42,7 @@
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.19",
     "execa": "^8.0.1",
     "marked": "^10.0.0",
     "mdsvex": "^0.11.0",
@@ -66,7 +67,6 @@
     "@changesets/cli": "^2.26.2",
     "@mdi/js": "^7.3.67",
     "@types/d3-time": "^3.0.2",
-    "@vercel/analytics": "^1.1.1",
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
@@ -85,8 +85,9 @@
     "date-fns": "^2.30.0",
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
+    "posthog-js": "^1.95.1",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.56.0",
+    "svelte-ux": "0.58.0-next.3",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {