npm - layerchart - Versions diffs - 2.0.0-next.2 → 2.0.0-next.21 - Mend

layerchart 2.0.0-next.2 → 2.0.0-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/components/AnnotationLine.svelte +17 -29
package/dist/components/AnnotationLine.svelte.d.ts +4 -2
package/dist/components/AnnotationPoint.svelte +11 -13
package/dist/components/AnnotationPoint.svelte.d.ts +4 -2
package/dist/components/AnnotationRange.svelte +3 -3
package/dist/components/Arc.svelte +2 -2
package/dist/components/Axis.svelte +52 -24
package/dist/components/Axis.svelte.d.ts +14 -3
package/dist/components/Bar.svelte +7 -4
package/dist/components/Bar.svelte.d.ts +4 -1
package/dist/components/Bars.svelte +9 -6
package/dist/components/Bars.svelte.d.ts +3 -3
package/dist/components/Blur.svelte +20 -12
package/dist/components/Blur.svelte.d.ts +2 -5
package/dist/components/Calendar.svelte +10 -6
package/dist/components/Calendar.svelte.d.ts +2 -1
package/dist/components/Chart.svelte +2 -2
package/dist/components/ClipPath.svelte +14 -9
package/dist/components/Connector.svelte +2 -2
package/dist/components/Connector.svelte.d.ts +1 -1
package/dist/components/Ellipse.svelte +187 -0
package/dist/components/Ellipse.svelte.d.ts +64 -0
package/dist/components/ForceSimulation.svelte +168 -50
package/dist/components/ForceSimulation.svelte.d.ts +80 -21
package/dist/components/GeoEdgeFade.svelte +4 -3
package/dist/components/GeoEdgeFade.svelte.d.ts +2 -2
package/dist/components/GeoPath.svelte +12 -5
package/dist/components/GeoPoint.svelte +1 -2
package/dist/components/GeoSpline.svelte +4 -4
package/dist/components/GeoSpline.svelte.d.ts +1 -1
package/dist/components/Graticule.svelte +3 -2
package/dist/components/Grid.svelte +8 -7
package/dist/components/Grid.svelte.d.ts +2 -1
package/dist/components/Group.svelte +45 -5
package/dist/components/Group.svelte.d.ts +32 -4
package/dist/components/Highlight.svelte +1 -1
package/dist/components/Hull.svelte +4 -4
package/dist/components/Hull.svelte.d.ts +2 -2
package/dist/components/Labels.svelte +6 -4
package/dist/components/Labels.svelte.d.ts +2 -2
package/dist/components/Legend.svelte +8 -5
package/dist/components/Legend.svelte.d.ts +3 -3
package/dist/components/MonthPath.svelte +14 -11
package/dist/components/MonthPath.svelte.d.ts +4 -3
package/dist/components/Polygon.svelte +285 -0
package/dist/components/Polygon.svelte.d.ts +115 -0
package/dist/components/RadialGradient.svelte +1 -3
package/dist/components/Rule.svelte +3 -2
package/dist/components/Spline.svelte +30 -18
package/dist/components/Spline.svelte.d.ts +12 -4
package/dist/components/Text.svelte +60 -48
package/dist/components/Text.svelte.d.ts +6 -0
package/dist/components/Treemap.svelte +63 -26
package/dist/components/Treemap.svelte.d.ts +11 -11
package/dist/components/Voronoi.svelte +55 -36
package/dist/components/Voronoi.svelte.d.ts +5 -3
package/dist/components/charts/ArcChart.svelte +2 -2
package/dist/components/charts/AreaChart.svelte +9 -10
package/dist/components/charts/BarChart.svelte +63 -53
package/dist/components/charts/DefaultTooltip.svelte +1 -1
package/dist/components/charts/LineChart.svelte +8 -5
package/dist/components/charts/PieChart.svelte +2 -2
package/dist/components/charts/ScatterChart.svelte +0 -2
package/dist/components/charts/utils.svelte.d.ts +3 -3
package/dist/components/charts/utils.svelte.js +7 -3
package/dist/components/index.d.ts +4 -0
package/dist/components/index.js +4 -0
package/dist/components/layout/Canvas.svelte +67 -49
package/dist/components/layout/Canvas.svelte.d.ts +6 -0
package/dist/components/layout/Layer.svelte +6 -4
package/dist/components/layout/Layer.svelte.d.ts +6 -4
package/dist/components/tooltip/Tooltip.svelte +14 -7
package/dist/components/tooltip/TooltipContext.svelte +25 -8
package/dist/components/tooltip/TooltipContext.svelte.d.ts +1 -1
package/dist/components/tooltip/TooltipHeader.svelte +5 -4
package/dist/components/tooltip/TooltipHeader.svelte.d.ts +3 -3
package/dist/components/tooltip/TooltipItem.svelte +5 -4
package/dist/components/tooltip/TooltipItem.svelte.d.ts +3 -3
package/dist/components/tooltip/TooltipList.svelte +1 -1
package/dist/components/tooltip/tooltipMetaContext.d.ts +2 -2
package/dist/docs/Blockquote.svelte +3 -1
package/dist/docs/Blockquote.svelte.d.ts +4 -19
package/dist/docs/Code.svelte +20 -12
package/dist/docs/Code.svelte.d.ts +9 -23
package/dist/docs/Header1.svelte +4 -2
package/dist/docs/Header1.svelte.d.ts +4 -28
package/dist/docs/Json.svelte +11 -3
package/dist/docs/Json.svelte.d.ts +9 -21
package/dist/docs/Layout.svelte +10 -7
package/dist/docs/Layout.svelte.d.ts +4 -19
package/dist/docs/Link.svelte +7 -3
package/dist/docs/Link.svelte.d.ts +4 -38
package/dist/docs/TilesetField.svelte +20 -19
package/dist/docs/TilesetField.svelte.d.ts +5 -22
package/dist/docs/ViewSourceButton.svelte +7 -4
package/dist/docs/ViewSourceButton.svelte.d.ts +7 -21
package/dist/utils/arcText.svelte.js +4 -4
package/dist/utils/canvas.d.ts +77 -0
package/dist/utils/canvas.js +105 -41
package/dist/utils/genData.d.ts +14 -0
package/dist/utils/genData.js +24 -6
package/dist/utils/path.d.ts +10 -0
package/dist/utils/path.js +30 -0
package/dist/utils/scales.svelte.d.ts +3 -2
package/dist/utils/scales.svelte.js +7 -3
package/dist/utils/shape.d.ts +43 -0
package/dist/utils/shape.js +59 -0
package/dist/utils/string.d.ts +49 -0
package/dist/utils/string.js +4 -2
package/dist/utils/ticks.d.ts +4 -4
package/dist/utils/ticks.js +106 -159
package/dist/utils/ticks.test.js +6 -16
package/dist/utils/treemap.d.ts +1 -1
package/package.json +27 -24
package/dist/utils/object.js +0 -2

package/dist/components/layout/Canvas.svelte CHANGED Viewed

@@ -64,6 +64,13 @@
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *
@@ -144,13 +151,13 @@
   import { onMount, untrack, type Snippet } from 'svelte';
   import { cls } from '@layerstack/tailwind';
   import { Logger, localPoint } from '@layerstack/utils';
-  import { darkColorScheme } from '@layerstack/svelte-stores';
+  import { MediaQueryPresets } from '@layerstack/svelte-state';
   import { setRenderContext } from '../Chart.svelte';
   import { getTransformContext } from '../TransformContext.svelte';
   import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
-  import { Context } from 'runed';
+  import { Context, useMutationObserver, watch } from 'runed';
   import type {
     HTMLCanvasAttributes,
     MouseEventHandler,
@@ -171,6 +178,7 @@
     fallback,
     center = false,
     ignoreTransform = false,
+    disableHitCanvas = false,
     class: className,
     children,
     onclick,
@@ -256,6 +264,23 @@
    * end HitCanvas
    */
+  // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
+  const { dark } = new MediaQueryPresets();
+  watch(
+    () => dark.current,
+    () => {
+      canvasContext.invalidate();
+    }
+  );
+  useMutationObserver(
+    () => document.documentElement,
+    () => canvasContext.invalidate(),
+    {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    }
+  );
   onMount(() => {
     context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
@@ -263,22 +288,7 @@
       willReadFrequently: false, // Explicitly set to `false` to resolve pixel artifacts between fill and stroke with the same color (issue #372)
     }) as CanvasRenderingContext2D;
-    // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
-    darkColorScheme.subscribe(() => {
-      canvasContext.invalidate();
-    });
-    const observer = new MutationObserver(() => {
-      canvasContext.invalidate();
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class', 'data-theme'],
-    });
     return () => {
-      observer.disconnect();
       if (frameId) {
         cancelAnimationFrame(frameId);
       }
@@ -336,45 +346,53 @@
       context.restore();
     }
-    // sync hit canvas with main canvas
+    /*
+     * Sync hit canvas with main canvas
+     */
     if (hitCanvasContext) {
-      // scale hit canvas to match main canvas
-      scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
-      hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
-      // reset and sync transform to the state after retainState components
-      hitCanvasContext.resetTransform();
-      hitCanvasContext.setTransform(mainTransformAfterRetain);
-      // reset color generator
-      colorGenerator = rgbColorGenerator();
       const inactiveMoving = !activeCanvas && transformCtx.moving;
-      // render retainState components on hit canvas (e.g., Group)
-      for (const c of retainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
-          // since the transform was already applied via setTransform, skip rendering
-          // the retainState component's transform again; proceed to its children
-          continue;
+      if (disableHitCanvas || transformCtx.dragging || inactiveMoving) {
+        // Skip rendering hit canvas
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+      } else {
+        // scale hit canvas to match main canvas
+        scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+        // reset and sync transform to the state after retainState components
+        hitCanvasContext.resetTransform();
+        hitCanvasContext.setTransform(mainTransformAfterRetain);
+        // reset color generator
+        colorGenerator = rgbColorGenerator();
+        // render retainState components on hit canvas (e.g., Group)
+        for (const c of retainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
+          if (componentHasEvents) {
+            // since the transform was already applied via setTransform, skip rendering
+            // the retainState component's transform again; proceed to its children
+            continue;
+          }
         }
-      }
-      // render non-retainState components on hit canvas
-      for (const c of nonRetainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
+        // render non-retainState components on hit canvas
+        for (const c of nonRetainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
-          const color = getColorStr(colorGenerator.next().value);
-          const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
+          if (componentHasEvents) {
+            const color = getColorStr(colorGenerator.next().value);
+            const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
-          hitCanvasContext.save();
-          c.render(hitCanvasContext, styleOverrides);
-          hitCanvasContext.restore();
+            hitCanvasContext.save();
+            c.render(hitCanvasContext, styleOverrides);
+            hitCanvasContext.restore();
-          componentByColor.set(color, c);
+            componentByColor.set(color, c);
+          }
         }
       }
     }

package/dist/components/layout/Canvas.svelte.d.ts CHANGED Viewed

@@ -55,6 +55,12 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *

package/dist/components/layout/Layer.svelte CHANGED Viewed

@@ -3,17 +3,19 @@
   export type CanvasLayerProps = {
     type: 'canvas';
-  } & Omit<ComponentProps<typeof Canvas>, 'type'>;
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
   export type HtmlLayerProps = {
     type: 'html';
-  } & Omit<ComponentProps<typeof Html>, 'type'>;
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
   export type SvgLayerProps = {
     type: 'svg';
-  } & Omit<ComponentProps<typeof Svg>, 'type'>;
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
-  export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+  export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
 </script>
 <script lang="ts">

package/dist/components/layout/Layer.svelte.d.ts CHANGED Viewed

@@ -1,14 +1,16 @@
 import type { ComponentProps } from 'svelte';
 export type CanvasLayerProps = {
     type: 'canvas';
-} & Omit<ComponentProps<typeof Canvas>, 'type'>;
+} & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
 export type HtmlLayerProps = {
     type: 'html';
-} & Omit<ComponentProps<typeof Html>, 'type'>;
+} & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
 export type SvgLayerProps = {
     type: 'svg';
-} & Omit<ComponentProps<typeof Svg>, 'type'>;
-export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+} & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+};
 import Canvas from './Canvas.svelte';
 import Html from './Html.svelte';
 import Svg from './Svg.svelte';

package/dist/components/tooltip/Tooltip.svelte CHANGED Viewed

@@ -359,13 +359,8 @@
 {#if tooltipCtx.data}
   <div
     {...props.root}
-    class={cls(
-      layerClass('tooltip-root'),
-      'absolute z-50 select-none',
-      !pointerEvents && 'pointer-events-none',
-      classes.root,
-      props.root?.class
-    )}
+    class={cls('root', layerClass('tooltip-root'), classes.root, props.root?.class)}
+    class:pointer-events-none={!pointerEvents}
     style:top="{motionY.current}px"
     style:left="{motionX.current}px"
     transition:fade={{ duration: 100 }}
@@ -408,3 +403,15 @@
     </div>
   </div>
 {/if}
+<style>
+  .root {
+    position: absolute;
+    z-index: 50;
+    user-select: none;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+</style>

package/dist/components/tooltip/TooltipContext.svelte CHANGED Viewed

@@ -72,7 +72,7 @@
     locked?: boolean;
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;
@@ -116,11 +116,14 @@
 </script>
 <script lang="ts" generics="TData = any">
+  import type { Snippet } from 'svelte';
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
+  import { getChartContext } from '../Chart.svelte';
+  import { getGeoContext } from '../GeoContext.svelte';
   import Svg from './../layout/Svg.svelte';
   import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
@@ -130,8 +133,6 @@
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import { getChartContext } from '../Chart.svelte';
-  import type { Snippet } from 'svelte';
   import {
     getTooltipMetaContext,
     getTooltipPayload,
@@ -140,6 +141,7 @@
   import { layerClass } from '../../utils/attributes.js';
   const ctx = getChartContext<any>();
+  const geoCtx = getGeoContext();
   let {
     ref: refProp = $bindable(),
@@ -357,7 +359,11 @@
         }
         case 'quadtree': {
-          tooltipData = quadtree?.find(point.x, point.y, radius);
+          tooltipData = quadtree?.find(
+            point.x - ctx.padding.left,
+            point.y - ctx.padding.top,
+            radius
+          );
           break;
         }
       }
@@ -402,11 +408,14 @@
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
     if (mode === 'quadtree') {
       return d3Quadtree()
-        .extent([
-          [0, 0],
-          [ctx.width, ctx.height],
-        ])
         .x((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[0];
+          }
           const value = ctx.xGet(d);
           if (Array.isArray(value)) {
@@ -420,6 +429,13 @@
           }
         })
         .y((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[1];
+          }
           const value = ctx.yGet(d);
           if (Array.isArray(value)) {
@@ -546,6 +562,7 @@
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
+          r={radius}
           onpointerenter={(e, { data }) => {
             showTooltip(e, data);
           }}

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

@@ -36,7 +36,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      */
     locked?: boolean;
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;

package/dist/components/tooltip/TooltipHeader.svelte CHANGED Viewed

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
   export type TooltipHeaderPropsWithoutHTML = {
     /**
@@ -13,7 +13,7 @@
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * The color to use for the color dot.
@@ -54,7 +54,7 @@
 </script>
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import { layerClass } from '../../utils/attributes.js';
@@ -114,6 +114,7 @@
   {#if children}
     {@render children?.()}
   {:else}
-    {format ? formatUtil(value, format) : value}
+    <!-- @ts-expect-error - improve types -->
+    {format ? formatUtil(value, asAny(format)) : value}
   {/if}
 </div>

package/dist/components/tooltip/TooltipHeader.svelte.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The value to display in the tooltip header when the `children`
@@ -10,7 +10,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * The color to use for the color dot.
      */
@@ -40,7 +40,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     children?: Snippet;
 };
 export type TooltipHeaderProps = TooltipHeaderPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipHeaderPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 declare const TooltipHeader: import("svelte").Component<TooltipHeaderProps, {}, "ref" | "colorRef">;
 type TooltipHeader = ReturnType<typeof TooltipHeader>;
 export default TooltipHeader;

package/dist/components/tooltip/TooltipItem.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
   export type TooltipItemPropsWithoutHTML = {
     /**
@@ -16,7 +16,7 @@
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Alignment of the value.
@@ -75,7 +75,7 @@
 </script>
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import type { Snippet } from 'svelte';
   import { layerClass } from '../../utils/attributes.js';
@@ -189,7 +189,8 @@
     {#if children}
       {@render children()}
     {:else}
-      {format ? formatUtil(value, format) : value}
+      <!-- @ts-expect-error - improve types -->
+      {format ? formatUtil(value, asAny(format)) : value}
     {/if}
   </div>
 </div>

package/dist/components/tooltip/TooltipItem.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipItemPropsWithoutHTML = {
     /**
      * The label to display in the tooltip item.
@@ -13,7 +13,7 @@ export type TooltipItemPropsWithoutHTML = {
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Alignment of the value.
      *
@@ -59,7 +59,7 @@ export type TooltipItemPropsWithoutHTML = {
     colorRef?: HTMLElement;
 };
 export type TooltipItemProps = TooltipItemPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Snippet } from 'svelte';
 declare const TooltipItem: import("svelte").Component<TooltipItemProps, {}, "ref" | "colorRef" | "labelRef" | "valueRef">;
 type TooltipItem = ReturnType<typeof TooltipItem>;

package/dist/components/tooltip/TooltipList.svelte CHANGED Viewed

@@ -23,7 +23,7 @@
   bind:this={ref}
   class={cls(
     layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
+    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-start',
     className
   )}
   {...restProps}

package/dist/components/tooltip/tooltipMetaContext.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData } from '../charts/index.js';
 import type { ChartContextValue } from '../Chart.svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
 export type BarTooltipMetaContextValue = {
     type: 'bar';
@@ -52,7 +52,7 @@ export type TooltipPayload = {
     chartType?: SimplifiedChartType;
     payload: any;
     rawSeriesData?: SeriesData<any, any>;
-    formatter?: FormatType;
+    formatter?: FormatType | FormatConfig;
 };
 type BasePayloadHandlerProps = {
     ctx: ChartContextValue;

package/dist/docs/Blockquote.svelte CHANGED Viewed

@@ -2,6 +2,8 @@
   import { mdiInformation } from '@mdi/js';
   import { Icon } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+  const { children } = $props();
 </script>
 <div
@@ -11,5 +13,5 @@
   )}
 >
   <Icon data={mdiInformation} class="text-primary" />
-  <slot />
+  {@render children()}
 </div>

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

@@ -1,20 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Blockquote = InstanceType<typeof Blockquote>;
+declare const Blockquote: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/docs/Code.svelte CHANGED Viewed

@@ -4,20 +4,28 @@
   import { CopyButton } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
-  export let source: string | null = null;
-  export let language = 'svelte';
-  export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
-    : '';
-  export let classes: {
-    root?: string;
-    pre?: string;
-    code?: string;
-  } = {};
+  const {
+    source = null,
+    language = 'svelte',
+    highlightedSource = source
+      ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
+      : '',
+    classes = {},
+    class: className,
+  }: {
+    source: string | null;
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
+      root?: string;
+      pre?: string;
+      code?: string;
+    };
+    class?: string;
+  } = $props();
 </script>
-<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', classes.root, className)}>
   {#if source}
     <div class="relative">
       <pre

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

@@ -1,29 +1,15 @@
 import 'prism-svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Code: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    source?: string | null | undefined;
-    language?: string | undefined;
-    highlightedSource?: string | undefined;
+type $$ComponentProps = {
+    source: string | null;
+    language?: string;
+    highlightedSource?: string;
     classes?: {
         root?: string;
         pre?: string;
         code?: string;
-    } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Code = InstanceType<typeof Code>;
+    };
+    class?: string;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/docs/Header1.svelte CHANGED Viewed

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { SectionDivider } from 'svelte-ux';
+  let { children, ...restProps } = $props();
 </script>
 <!--
@@ -9,6 +11,6 @@
       - Maybe possible to set/get props from markdown/mdsvex
         - Example: `#API { id: 'api' }
 -->
-<SectionDivider {...$$restProps}>
-  <slot />
+<SectionDivider {...restProps}>
+  {@render children()}
 </SectionDivider>