layerchart 2.0.0-next.5 → 2.0.0-next.51

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

@@ -1,18 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
-type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
-export type TooltipContextValue<T = any> = {
-    x: number;
-    y: number;
-    data: T | null;
-    payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
-    hide(e?: PointerEvent): void;
-    mode: TooltipMode;
-    isHoveringTooltipArea: boolean;
-    isHoveringTooltipContent: boolean;
-};
-export declare function getTooltipContext<T = any>(): TooltipContextValue<T>;
+import { type Without } from '../../utils/types.js';
+import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
+export type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 type TooltipContextPropsWithoutHTML<T = any> = {
     /**
      * The tooltip interaction mode
@@ -35,6 +24,13 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      * @default false
      */
     locked?: boolean;
+    /**
+     * Controls the touch event behavior on the tooltip container.
+     * By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+     * Use `none` to disable all touch events (useful for improved transform/geo charts interactions)
+     * @default 'pan-y'
+     */
+    touchEvents?: 'none' | 'pan-x' | 'pan-y' | 'auto';
     /**
      * quadtree search or voronoi clip radius
      * @default Infinity
@@ -56,7 +52,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      * Exposed to allow binding in Chart
      * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
      */
-    tooltipContext?: TooltipContextValue<T>;
+    state?: TooltipStateType<T>;
     /**
      * Delay in ms before hiding tooltip
      * @default 0
@@ -69,17 +65,23 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      */
     ref?: HTMLElement;
     children?: Snippet<[{
-        tooltipContext: TooltipContextValue<T>;
+        state: TooltipStateType<T>;
     }]>;
 };
 export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
 import type { Snippet } from 'svelte';
-import { type TooltipPayload } from './tooltipMetaContext.js';
+declare function $$render<TData = any>(): {
+    props: TooltipContextProps<TData>;
+    exports: {};
+    bindings: "ref" | "state";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any> {
-    props(): TooltipContextProps<TData>;
-    events(): {};
-    slots(): {};
-    bindings(): "ref" | "tooltipContext";
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "ref" | "state";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/tooltip/TooltipHeader.svelte

@@ -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,9 +54,8 @@
 </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';
 
   let {
     ref: refProp = $bindable(),
@@ -89,31 +88,46 @@
 </script>
 
 <div
-  class={cls(
-    layerClass('tooltip-header'),
-    'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
-    classes.root,
-    props.root?.class,
-    className
-  )}
+  class={cls('lc-tooltip-header', classes.root, props.root?.class, className)}
   {...restProps}
   bind:this={ref}
 >
   {#if color}
     <div
       bind:this={colorRef}
-      class={cls(
-        layerClass('tooltip-header-color'),
-        'color',
-        'inline-block size-2 rounded-full bg-[var(--color)]',
-        classes.color
-      )}
+      class={cls('lc-tooltip-header-color', classes.color)}
       style:--color={color}
     ></div>
   {/if}
   {#if children}
     {@render children?.()}
   {:else}
-    {format ? formatUtil(value, format) : value}
+    <!-- @ts-expect-error - improve types -->
+    {format ? formatUtil(value, asAny(format)) : value}
   {/if}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-header) {
+      font-weight: 600;
+      white-space: nowrap;
+      border-bottom: 1px solid
+        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
+      margin-bottom: 4px;
+      padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    :where(.lc-tooltip-header-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* rounded-full */
+      background-color: var(--color);
+      flex-shrink: 0;
+    }
+  }
+</style>

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

@@ -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

@@ -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,10 +75,9 @@
 </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';
 
   let {
     ref: refProp = $bindable(),
@@ -129,37 +128,19 @@
 
 <div
   {...props.root}
-  class={cls(
-    layerClass('tooltip-item-root'),
-    'contents',
-    classes.root,
-    className,
-    props.root?.class
-  )}
+  class={cls('lc-tooltip-item-root', classes.root, className, props.root?.class)}
   {...restProps}
   bind:this={ref}
 >
   <div
     {...props.label}
-    class={cls(
-      layerClass('tooltip-item-label'),
-      'label',
-      'flex items-center gap-2 whitespace-nowrap',
-      classes.label,
-      props.label?.class
-    )}
+    class={cls('lc-tooltip-item-label', 'label', classes.label, props.label?.class)}
     bind:this={labelRef}
   >
     {#if color}
       <div
         {...props.color}
-        class={cls(
-          layerClass('tooltip-item-color'),
-          'color',
-          'inline-block size-2 rounded-full bg-[var(--color)]',
-          classes.color,
-          props.color?.class
-        )}
+        class={cls('lc-tooltip-item-color', 'color', classes.color, props.color?.class)}
         style:--color={color}
         bind:this={colorRef}
       ></div>
@@ -174,22 +155,61 @@
   <div
     bind:this={valueRef}
     {...props.value}
-    class={cls(
-      layerClass('tooltip-item-value'),
-      'value',
-      'tabular-nums',
-      {
-        'text-right': valueAlign === 'right',
-        'text-center': valueAlign === 'center',
-      },
-      classes.value,
-      props.value?.class
-    )}
+    class={cls('lc-tooltip-item-value', 'value', classes.value, props.value?.class)}
+    data-align={valueAlign}
   >
     {#if children}
       {@render children()}
     {:else}
-      {format ? formatUtil(value, format) : value}
+      <!-- @ts-expect-error - improve types -->
+      {format ? formatUtil(value, asAny(format)) : value}
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-item-root) {
+      display: contents;
+    }
+
+    :where(.lc-tooltip-item-root[data-highlighted])
+      > :where(.lc-tooltip-item-label, .lc-tooltip-item-value) {
+      opacity: 1;
+      transition: opacity 150ms ease;
+    }
+
+    :where(.lc-tooltip-item-root[data-highlighted='false'])
+      > :where(.lc-tooltip-item-label, .lc-tooltip-item-value) {
+      opacity: 0.1;
+    }
+
+    :where(.lc-tooltip-item-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* full */
+      background-color: var(--color);
+    }
+
+    :where(.lc-tooltip-item-label) {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      white-space: nowrap;
+    }
+
+    :where(.lc-tooltip-item-value) {
+      /* tabular-nums */
+      font-variant-numeric: tabular-nums;
+
+      &[data-align='right'] {
+        text-align: right;
+      }
+
+      &[data-align='center'] {
+        text-align: center;
+      }
+    }
+  }
+</style>

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

@@ -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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -19,14 +18,17 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-list', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-list) {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 4px 8px;
+      align-items: start;
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -18,14 +17,23 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-separator'),
-    'rounded-sm bg-surface-content/20 my-1 col-span-full h-px',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-separator', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-separator) {
+      height: 1px;
+      border-radius: 4px;
+      background-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      margin-top: 4px;
+      margin-bottom: 4px;
+      grid-column: 1 / -1; /* col-span-full */
+    }
+  }
+</style>

package/dist/components/tooltip/index.d.ts

@@ -10,3 +10,4 @@ export { default as Separator } from './TooltipSeparator.svelte';
 export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
 export * from './Tooltip.svelte';
+export { TooltipState, type TooltipSeries } from '../../states/tooltip.svelte.js';

package/dist/components/tooltip/index.js

@@ -10,3 +10,4 @@ export { default as Separator } from './TooltipSeparator.svelte';
 export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
 export * from './Tooltip.svelte';
+export { TooltipState } from '../../states/tooltip.svelte.js';

package/dist/contexts/canvas.d.ts

@@ -0,0 +1,34 @@
+import type { MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { ComputedStylesOptions } from '../utils/canvas.js';
+import type { ComponentNode } from '../states/chart.svelte.js';
+export type ComponentRender<T extends Element = Element> = {
+    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
+    events?: {
+        click?: MouseEventHandler<T> | null;
+        dblclick?: MouseEventHandler<T> | null;
+        pointerenter?: PointerEventHandler<T> | null;
+        pointerover?: PointerEventHandler<T> | null;
+        pointermove?: PointerEventHandler<T> | null;
+        pointerleave?: PointerEventHandler<T> | null;
+        pointerout?: PointerEventHandler<T> | null;
+        pointerdown?: PointerEventHandler<T> | null;
+        touchmove?: TouchEventHandler<T> | null;
+    };
+    /**
+     * Optional dependencies to track and invalidate the canvas context when they change.
+     */
+    deps?: () => any[];
+};
+export type CanvasContextValue = {
+    /**
+     * Register component to render.
+     *
+     * Returns method to unregister on component destroy
+     */
+    register<T extends Element>(component: ComponentRender<T>): () => void;
+    invalidate(): void;
+    /** Get the root ComponentNode of the canvas render tree. Used for server-side rendering. */
+    getRootNode?: () => ComponentNode;
+};
+export declare function getCanvasContext(): CanvasContextValue;
+export declare function setCanvasContext(context: CanvasContextValue): CanvasContextValue;

package/dist/contexts/canvas.js

@@ -0,0 +1,14 @@
+import { Context } from 'runed';
+const CanvasContext = new Context('CanvasContext');
+const defaultCanvasContext = {
+    register: (_) => {
+        return () => { };
+    },
+    invalidate: () => { },
+};
+export function getCanvasContext() {
+    return CanvasContext.getOr(defaultCanvasContext);
+}
+export function setCanvasContext(context) {
+    return CanvasContext.set(context);
+}

package/dist/contexts/chart.d.ts

@@ -0,0 +1,6 @@
+import type { ChartState } from '../states/chart.svelte.js';
+import type { AnyScale } from '../utils/scales.svelte.js';
+export type { ChartState };
+export type { NodeKind, ComponentNode, RegisterComponentOptions } from '../states/chart.svelte.js';
+export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartState<T, XScale, YScale>;
+export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartState<T, XScale, YScale>): ChartState<T, XScale, YScale>;

package/dist/contexts/chart.js

@@ -0,0 +1,48 @@
+import { Context } from 'runed';
+const _ChartContext = new Context('ChartContext');
+/**
+ * Fallback context when used outside of a Chart component.
+ * Provides safe defaults to prevent runtime errors.
+ */
+const fallbackContext = {
+    registerMark: () => () => { },
+    registerComponent: (_options) => ({
+        id: Symbol('noop'),
+        kind: 'mark',
+        name: 'noop',
+        parent: null,
+        children: [],
+        insideCompositeMark: false,
+    }),
+    series: {
+        series: [],
+        visibleSeries: [],
+        highlightKey: null,
+        isVisible: () => true,
+        isHighlighted: () => false,
+        isDefaultSeries: true,
+        allSeriesData: [],
+        allSeriesColors: [],
+        selectedKeys: { isEmpty: () => true, isSelected: () => false },
+    },
+    tooltip: {
+        x: 0,
+        y: 0,
+        data: null,
+        series: [],
+        config: {},
+        isHoveringTooltipArea: false,
+        isHoveringTooltipContent: false,
+        mode: 'manual',
+        show: () => { },
+        hide: () => { },
+    },
+};
+export function getChartContext() {
+    // @ts-expect-error - Type variance is acceptable here
+    return _ChartContext.getOr(fallbackContext);
+}
+export function setChartContext(context) {
+    // @ts-expect-error - shh
+    return _ChartContext.set(context);
+}

package/dist/contexts/componentTree.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/contexts/componentTree.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+// Note: registerComponent requires Svelte context (setContext/getContext)
+// and is tested indirectly via chart state and component integration tests.
+// _removeComponentNode is private on ChartState and tested indirectly.
+/** Helper to create a minimal node without Svelte context */
+function makeNode(name, parent = null) {
+    const node = {
+        id: Symbol(name),
+        kind: 'mark',
+        name,
+        parent,
+        children: [],
+        insideCompositeMark: false,
+    };
+    if (parent) {
+        parent.children.push(node);
+    }
+    return node;
+}
+describe('componentTree', () => {
+    describe('tree structure', () => {
+        it('should build a multi-level tree', () => {
+            const root = makeNode('root');
+            const group = makeNode('group', root);
+            const leaf1 = makeNode('leaf1', group);
+            const leaf2 = makeNode('leaf2', group);
+            const sibling = makeNode('sibling', root);
+            expect(root.children).toHaveLength(2);
+            expect(root.children).toContain(group);
+            expect(root.children).toContain(sibling);
+            expect(group.children).toHaveLength(2);
+            expect(group.children).toContain(leaf1);
+            expect(group.children).toContain(leaf2);
+            expect(leaf1.parent).toBe(group);
+            expect(group.parent).toBe(root);
+        });
+        it('should clean up subtrees correctly', () => {
+            const root = makeNode('root');
+            const group = makeNode('group', root);
+            makeNode('leaf1', group);
+            makeNode('leaf2', group);
+            // Simulate _removeComponentNode (private on ChartState) — remove group from root
+            const idx = root.children.indexOf(group);
+            if (idx >= 0)
+                root.children.splice(idx, 1);
+            expect(root.children).toHaveLength(0);
+            // Group still has its children (for cleanup order - children destroy first)
+            expect(group.children).toHaveLength(2);
+        });
+    });
+    describe('insideCompositeMark', () => {
+        it('should be false for root-level nodes', () => {
+            const root = makeNode('root');
+            expect(root.insideCompositeMark).toBe(false);
+        });
+        it('should be true when parent is a composite-mark', () => {
+            const composite = makeNode('Area');
+            composite.kind = 'composite-mark';
+            const child = {
+                id: Symbol('child'),
+                kind: 'mark',
+                name: 'Spline',
+                parent: composite,
+                children: [],
+                insideCompositeMark: composite.kind === 'composite-mark',
+            };
+            expect(child.insideCompositeMark).toBe(true);
+        });
+        it('should be false when parent is a group (not composite-mark)', () => {
+            const group = makeNode('Group');
+            group.kind = 'group';
+            const child = {
+                id: Symbol('child'),
+                kind: 'mark',
+                name: 'Circle',
+                parent: group,
+                children: [],
+                insideCompositeMark: false, // group is not composite-mark
+            };
+            expect(child.insideCompositeMark).toBe(false);
+        });
+    });
+});

package/dist/contexts/geo.d.ts

@@ -0,0 +1,4 @@
+import type { GeoState, GeoStateProps } from '../states/geo.svelte.js';
+export type { GeoState, GeoStateProps };
+export declare function getGeoContext(): GeoState;
+export declare function setGeoContext(geo: GeoState): GeoState;

package/dist/contexts/geo.js

@@ -0,0 +1,11 @@
+import { Context } from 'runed';
+/**
+ * Access or set the current GeoContext.
+ */
+const _GeoContext = new Context('GeoContext');
+export function getGeoContext() {
+    return _GeoContext.getOr({ projection: undefined });
+}
+export function setGeoContext(geo) {
+    return _GeoContext.set(geo);
+}

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';

package/dist/contexts/index.js

@@ -0,0 +1,5 @@
+export * from './chart.js';
+export * from './geo.js';
+export * from './layer.js';
+export * from './legendPayload.js';
+export * from './settings.js';

package/dist/contexts/layer.d.ts

@@ -0,0 +1,3 @@
+export type LayerContext = 'svg' | 'canvas' | 'html';
+export declare function getLayerContext(): LayerContext;
+export declare function setLayerContext(context: LayerContext): LayerContext;