layerchart 2.0.0-next.29 → 2.0.0-next.30

package/dist/components/AnnotationPoint.svelte

@@ -88,23 +88,30 @@
         ? 'start'
         : 'middle',
   });
-</script>
 
-<Circle
-  cx={point.x}
-  cy={point.y}
-  {r}
-  onpointermove={(e) => {
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
       e.stopPropagation();
       ctx.tooltip.show(e, { annotation: { label, details } });
     }
-  }}
-  onpointerleave={() => {
+  }
+
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
     if (details) {
+      e.stopPropagation();
       ctx.tooltip.hide();
     }
-  }}
+  }
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onmousemove={onPointerMove}
+  ontouchmove={onPointerMove}
+  onmouseleave={onPointerLeave}
+  ontouchend={onPointerLeave}
   {...props?.circle}
   class={cls('stroke-surface-100', props?.circle?.class)}
 />

package/dist/components/TransformControls.svelte

@@ -34,18 +34,14 @@
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
-  // TODO: maybe we include the icons as I think importing them like this
-  // will bog down the dev server
-  import {
-    mdiArrowULeftTop,
-    mdiMagnifyPlusOutline,
-    mdiMagnifyMinusOutline,
-    mdiImageFilterCenterFocus,
-    mdiChevronDown,
-    mdiResize,
-    mdiArrowExpandAll,
-    mdiCancel,
-  } from '@mdi/js';
+  import LucideFocus from '~icons/lucide/focus';
+  import LucideChevronDown from '~icons/lucide/chevron-down';
+  import LucideCircleOff from '~icons/lucide/circle-off';
+  import LucideImageUpscale from '~icons/lucide/image-upscale';
+  import LucideMove from '~icons/lucide/move';
+  import LucideUndo2 from '~icons/lucide/undo-2';
+  import LucideZoomIn from '~icons/lucide/zoom-in';
+  import LucideZoomOut from '~icons/lucide/zoom-out';
 
   import { getTransformContext } from './TransformContext.svelte';
   import type { Without } from '../utils/types.js';
@@ -113,7 +109,7 @@
   {#if show.includes('zoomIn')}
     <Tooltip title="Zoom in">
       <Button
-        icon={mdiMagnifyPlusOutline}
+        icon={LucideZoomIn}
         on:click={() => transform.zoomIn()}
         {size}
         class="text-surface-content p-2"
@@ -124,7 +120,7 @@
   {#if show.includes('zoomOut')}
     <Tooltip title="Zoom out">
       <Button
-        icon={mdiMagnifyMinusOutline}
+        icon={LucideZoomOut}
         on:click={() => transform.zoomOut()}
         {size}
         class="text-surface-content p-2"
@@ -135,7 +131,7 @@
   {#if show.includes('center')}
     <Tooltip title="Center">
       <Button
-        icon={mdiImageFilterCenterFocus}
+        icon={LucideFocus}
         on:click={() => transform.translateCenter()}
         {size}
         class="text-surface-content p-2"
@@ -146,7 +142,7 @@
   {#if show.includes('reset')}
     <Tooltip title="Reset">
       <Button
-        icon={mdiArrowULeftTop}
+        icon={LucideUndo2}
         on:click={() => transform.reset()}
         {size}
         class="text-surface-content p-2"
@@ -159,9 +155,9 @@
       <MenuButton
         iconOnly
         options={[
-          { label: 'None', value: 'none', icon: mdiCancel },
-          { label: 'Zoom', value: 'scale', icon: mdiResize },
-          { label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
+          { label: 'None', value: 'none', icon: LucideCircleOff },
+          { label: 'Zoom', value: 'scale', icon: LucideImageUpscale },
+          { label: 'Move', value: 'translate', icon: LucideMove },
         ]}
         menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
         menuIcon={null}
@@ -171,7 +167,7 @@
         class="text-surface-content"
       >
         <svelte:fragment slot="selection" let:value>
-          <Icon data={value?.icon ?? mdiChevronDown} />
+          <Icon data={value?.icon ?? LucideChevronDown} />
         </svelte:fragment>
       </MenuButton>
     </Tooltip>

package/dist/components/index.js

@@ -128,7 +128,7 @@ export * as Tooltip from './tooltip/index.js';
 export * from './tooltip/TooltipContext.svelte';
 export { default as TransformContext } from './TransformContext.svelte';
 export * from './TransformContext.svelte';
-// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelet-ux` or `@mdi/js` (as they are dev dependencies)
+// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelte-ux` or `~icons` (as they are dev dependencies)
 export { default as Tree } from './Tree.svelte';
 export * from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';

package/dist/components/tooltip/TooltipContext.svelte

@@ -22,7 +22,11 @@
     y: number;
     data: T | null;
     payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    show(
+      e: PointerEvent | MouseEvent | TouchEvent,
+      tooltipData?: any,
+      payload?: TooltipPayload
+    ): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
     isHoveringTooltipArea: boolean;

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

@@ -6,7 +6,7 @@ export type TooltipContextValue<T = any> = {
     y: number;
     data: T | null;
     payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    show(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any, payload?: TooltipPayload): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
     isHoveringTooltipArea: boolean;

package/dist/docs/Blockquote.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { mdiInformation } from '@mdi/js';
-  import { Icon } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
+  import LucideInfo from '~icons/lucide/info';
+
   const { children } = $props();
 </script>
 
@@ -12,6 +12,6 @@
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >
-  <Icon data={mdiInformation} class="text-primary" />
+  <LucideInfo class="text-primary" />
   {@render children()}
 </div>

package/dist/docs/Preview.svelte

@@ -3,7 +3,9 @@
   // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
   import Prism from 'prismjs';
   import 'prism-svelte';
-  import { mdiCodeTags, mdiTable } from '@mdi/js';
+
+  import LucideCode from '~icons/lucide/code';
+  import LucideTable from '~icons/lucide/table';
 
   import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
@@ -68,7 +70,7 @@
 
 {#if code}
   <Button
-    icon={mdiCodeTags}
+    icon={LucideCode}
     class="text-surface-content/70 py-1"
     on:click={() => (showCode = !showCode)}
   >
@@ -78,7 +80,8 @@
 
 {#if data}
   <Toggle let:on={open} let:toggle let:toggleOff>
-    <Button icon={mdiTable} class="text-surface-content/70 py-1" on:click={toggle}>View data</Button
+    <Button icon={LucideTable} class="text-surface-content/70 py-1" on:click={toggle}
+      >View data</Button
     >
     <Dialog
       {open}

package/dist/docs/ViewSourceButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-  import { mdiGithub } from '@mdi/js';
+  import LucideGithub from '~icons/lucide/github.svelte';
 
   import Code from './Code.svelte';
 
@@ -29,7 +29,7 @@
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
+          <Button icon={LucideGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}

package/package.json

@@ -4,11 +4,10 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.29",
+  "version": "2.0.0-next.30",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",
-    "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
     "@sveltejs/adapter-cloudflare": "^7.0.4",
     "@sveltejs/kit": "^2.21.5",
@@ -56,7 +55,7 @@
     "svelte": "5.34.1",
     "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.13",
+    "svelte-ux": "2.0.0-next.14",
     "svelte2tsx": "^0.7.39",
     "tailwindcss": "^4.1.10",
     "topojson-client": "^3.1.0",