layerchart 2.0.0-next.37 → 2.0.0-next.39

package/dist/states/series.svelte.js

@@ -0,0 +1,54 @@
+import { SelectionState } from '@layerstack/svelte-state';
+class HighlightKey {
+    current = $state(null);
+    set = (seriesKey) => {
+        this.current = seriesKey;
+    };
+}
+export class SeriesState {
+    #series = $state.raw([]);
+    selectedKeys = new SelectionState();
+    highlightKey = new HighlightKey();
+    constructor(getSeries) {
+        this.#series = getSeries();
+        $effect.pre(() => {
+            // keep series state in sync with the prop
+            this.#series = getSeries();
+        });
+    }
+    get series() {
+        return this.#series;
+    }
+    get isDefaultSeries() {
+        return this.#series.length === 1 && this.#series[0].key === 'default';
+    }
+    get visibleSeries() {
+        return this.#series.filter((s) => this.isVisible(s.key));
+    }
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey) {
+        return this.selectedKeys.isEmpty() || this.selectedKeys.isSelected(seriesKey);
+    }
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey, defaultValue = false) {
+        if (this.highlightKey.current === null) {
+            return defaultValue;
+        }
+        else {
+            return this.highlightKey.current === seriesKey;
+        }
+    }
+    get allSeriesData() {
+        return this.#series
+            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+            .filter((d) => d);
+    }
+    get allSeriesColors() {
+        return this.#series.map((s) => s.color).filter((c) => c != null);
+    }
+}

package/dist/styles/daisyui-5.css

@@ -0,0 +1,6 @@
+.lc-root-container {
+  --color-surface-100: var(--color-base-100);
+  --color-surface-200: var(--color-base-200);
+  --color-surface-300: var(--color-base-300);
+  --color-surface-content: var(--color-base-content);
+}

package/dist/styles/shadcn-svelte.css

@@ -0,0 +1,11 @@
+/*
+  When NOT using shadcn-svelte Chart component.
+  Not typically needed even when using built-in Chart, as defaults typically are sufficient
+*/
+.lc-root-container {
+  --color-primary: var(--primary);
+  --color-surface-100: var(--card-background);
+  --color-surface-200: var(--card-muted);
+  /* No direct mapping, should add explicit color (light and dark mode) */
+  --color-surface-content: var(--card-foreground);
+}

package/dist/styles/skeleton-3.css

@@ -0,0 +1,15 @@
+.lc-root-container {
+  --color-primary: var(--color-primary-500);
+
+  --color-surface-100: var(--color-surface-50);
+  --color-surface-200: var(--color-surface-100);
+  --color-surface-300: var(--color-surface-200);
+  --color-surface-content: var(--base-font-color);
+
+  html.dark & {
+    --color-surface-100: var(--color-surface-700);
+    --color-surface-200: var(--color-surface-800);
+    --color-surface-300: var(--color-surface-900);
+    --color-surface-content: var(--base-font-color-dark);
+  }
+}

package/dist/utils/attributes.d.ts

@@ -1,14 +1,4 @@
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export declare function layerClass(layerName: string): string;
+import type { ClassValue } from 'svelte/elements';
 type ExtractObjectType<T> = T extends object ? (T extends Function ? never : T) : never;
 type WithClass<T> = T & {
     class?: string;
@@ -21,9 +11,9 @@ type DefaultProps = WithClass<{
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export declare function extractLayerProps<T>(props: T, layerName: string, extraClasses?: string): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
+export declare function extractLayerProps<T>(props: T, className: string, ...extraClasses: ClassValue[]): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
 export {};

package/dist/utils/attributes.js

@@ -1,17 +1,4 @@
 import { cls } from '@layerstack/tailwind';
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export function layerClass(layerName) {
-    return `lc-${layerName}`;
-}
 // type guard to narrow props to an object with optional class
 // for extractLayerProps
 function isObjectWithClass(val) {
@@ -22,19 +9,18 @@ function isObjectWithClass(val) {
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export function extractLayerProps(props, layerName, extraClasses) {
-    const className = layerClass(layerName);
+export function extractLayerProps(props, className, ...extraClasses) {
     if (isObjectWithClass(props)) {
         return {
             ...props,
-            class: cls(className, props.class ?? '', extraClasses),
+            class: cls(className, ...extraClasses, props.class),
         };
     }
     return {
-        class: cls(className, extraClasses),
+        class: cls(className, ...extraClasses),
     };
 }

package/dist/utils/common.d.ts

@@ -16,3 +16,12 @@ export declare function defaultChartPadding<TData, SeriesComponent extends Compo
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export declare function findRelatedData(data: any[], original: any, accessor: Function): any;
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export declare function getObjectOrNull<T>(value: T): T extends object ? T extends Function ? null : T : T extends null ? null : T extends undefined ? undefined : null;
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export declare function resolveMaybeFn<T>(value: T | ((...args: any[]) => T), ...args: any[]): any;

package/dist/utils/common.js

@@ -40,7 +40,7 @@ export function defaultChartPadding(axis = true, legend = false) {
         return {
             top: axis === true || axis === 'y' ? 4 : 0,
             left: axis === true || axis === 'y' ? 20 : 0,
-            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend === true ? 32 : 0),
+            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend ? 32 : 0),
             right: axis === true || axis === 'x' ? 4 : 0,
         };
     }
@@ -54,3 +54,20 @@ export function findRelatedData(data, original, accessor) {
         return accessor(d)?.valueOf() === accessor(original)?.valueOf();
     });
 }
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export function getObjectOrNull(value) {
+    if (typeof value === 'object')
+        return value;
+    if (value === undefined)
+        return undefined;
+    return null;
+}
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export function resolveMaybeFn(value, ...args) {
+    return typeof value === 'function' ? value(...args) : value;
+}

package/dist/utils/common.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { accessor } from './common.js';
+import { accessor, resolveMaybeFn, getObjectOrNull } from './common.js';
 export const testData = {
     one: 1,
     two: 2,
@@ -36,3 +36,28 @@ describe('accessor', () => {
         expect(actual).toEqual(testData);
     });
 });
+describe('getObjectOrNull', () => {
+    it('returns null for non-object values', () => {
+        expect(getObjectOrNull(5)).toBeNull();
+        expect(getObjectOrNull('string')).toBeNull();
+        expect(getObjectOrNull(null)).toBeNull();
+        expect(getObjectOrNull(undefined)).toBeUndefined();
+    });
+    it('returns null for functions', () => {
+        const fn = () => { };
+        expect(getObjectOrNull(fn)).toBeNull();
+    });
+    it('returns the object if value is an object', () => {
+        const obj = { a: 1 };
+        expect(getObjectOrNull(obj)).toBe(obj);
+    });
+});
+describe('resolveMaybeFn', () => {
+    it('returns value if not a function', () => {
+        expect(resolveMaybeFn(5)).toBe(5);
+    });
+    it('calls function with args', () => {
+        const fn = (a, b) => a + b;
+        expect(resolveMaybeFn(fn, 2, 3)).toBe(5);
+    });
+});

package/dist/utils/graph/dagre.d.ts

@@ -25,10 +25,10 @@ export declare function dagreGraph(data: DagreProps['data'], { nodes, nodeId, ed
     filterNodes?: DagreProps['filterNodes'];
 }): dagre.graphlib.Graph<{}>;
 /**
- * Get all upstream predecessors for dagre nodeId
+ * Get all upstream predecessors ids for dagre nodeId
  */
-export declare function dagreAncestors(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];
+export declare function dagreAncestors(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): string[];
 /**
- * Get all downstream descendants for dagre nodeId
+ * Get all downstream descendants ids for dagre nodeId
  */
-export declare function dagreDescendants(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): dagre.Node[];
+export declare function dagreDescendants(graph: dagre.graphlib.Graph, nodeId: string, maxDepth?: number, currentDepth?: number): string[];

package/dist/utils/graph/dagre.js

@@ -49,7 +49,7 @@ export function dagreGraph(data, { nodes = (d) => d.nodes, nodeId = (d) => d.id,
     return g;
 }
 /**
- * Get all upstream predecessors for dagre nodeId
+ * Get all upstream predecessors ids for dagre nodeId
  */
 export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
@@ -58,21 +58,19 @@ export function dagreAncestors(graph, nodeId, maxDepth = Infinity, currentDepth
     const predecessors = graph.predecessors(nodeId) ?? [];
     return [
         ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
         ...predecessors.flatMap((pId) => dagreAncestors(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }
 /**
- * Get all downstream descendants for dagre nodeId
+ * Get all downstream descendants ids for dagre nodeId
  */
 export function dagreDescendants(graph, nodeId, maxDepth = Infinity, currentDepth = 0) {
     if (currentDepth === maxDepth) {
         return [];
     }
-    const predecessors = graph.successors(nodeId) ?? [];
+    const successors = graph.successors(nodeId) ?? [];
     return [
-        ...predecessors,
-        // @ts-expect-error: Types from dagre appear incorrect
-        ...predecessors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
+        ...successors,
+        ...successors.flatMap((pId) => dagreDescendants(graph, pId, maxDepth, currentDepth + 1)),
     ];
 }

package/dist/utils/math.d.ts

@@ -23,6 +23,23 @@ export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
     radians: number;
 };
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export declare function pointsToAngleAndLength(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}): {
+    radians: number;
+    angle: number;
+    length: number;
+};
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;
 /** Convert fahrenheit temperature to celsius */

package/dist/utils/math.js

@@ -37,6 +37,23 @@ export function cartesianToPolar(x, y) {
         radians,
     };
 }
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export function pointsToAngleAndLength(point1, point2) {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const radians = Math.atan2(dy, dx);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    return {
+        radians,
+        angle: radiansToDegrees(radians),
+        length,
+    };
+}
 /** Convert celsius temperature to fahrenheit */
 export function celsiusToFahrenheit(temperature) {
     return temperature * (9 / 5) + 32;

package/dist/utils/scales.svelte.js

@@ -97,9 +97,9 @@ export function createScale(scale, domain, range, context) {
  */
 export function autoScale(domain, data, propAccessor) {
     let values = null;
-    if (domain && domain.length > 0) {
-        // Determine based on domain values
-        values = domain;
+    if (domain && domain.length > 0 && domain.some((d) => d != null)) {
+        // Determine based on non-null domain values
+        values = domain.filter((d) => d != null);
     }
     else if (data && data.length > 0 && propAccessor) {
         // Determine based on data values

package/dist/utils/stack.js

@@ -91,7 +91,7 @@ export function stackOffsetSeparated(series, order) {
         return;
     // Standard series
     for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
-        (s0 = s1), (s1 = series[order[i]]);
+        ((s0 = s1), (s1 = series[order[i]]));
         // @ts-expect-error
         let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
         for (var j = 0; j < m; ++j) {

package/dist/utils/types.d.ts

@@ -1,7 +1,8 @@
+import type { MouseEventHandler, PointerEventHandler } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
 import type { HierarchyNode } from 'd3-hierarchy';
-import type { AnyScale } from './scales.svelte.js';
 import type { SankeyGraph } from 'd3-sankey';
-import type { TransitionConfig } from 'svelte/transition';
+import type { AnyScale } from './scales.svelte.js';
 /**
  * Useful to workaround Svelte 3/4 markup type issues
  * TODO: Remove usage after migrating to Svelte 5
@@ -79,6 +80,18 @@ export type CommonStyleProps = {
      */
     opacity?: number;
 };
+/**
+ * Events for primatives which support `SVGRectElement` and `HTMLDivElement` elements based on render context
+ */
+export type CommonEvents = {
+    onclick?: MouseEventHandler<Element> | null;
+    ondblclick?: MouseEventHandler<Element> | null;
+    onpointerenter?: PointerEventHandler<Element> | null;
+    onpointermove?: PointerEventHandler<Element> | null;
+    onpointerleave?: PointerEventHandler<Element> | null;
+    onpointerover?: PointerEventHandler<Element> | null;
+    onpointerout?: PointerEventHandler<Element> | null;
+};
 export type OnlyObjects<T> = T extends object ? T : never;
 export type Getter<T> = () => T;
 export type GetterValues<T> = {

package/package.json

@@ -4,18 +4,18 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.37",
+  "version": "2.0.0-next.39",
   "devDependencies": {
-    "@changesets/cli": "^2.29.4",
-    "@iconify-json/lucide": "^1.2.48",
+    "@changesets/cli": "^2.29.6",
+    "@iconify-json/lucide": "^1.2.62",
     "@rollup/plugin-dsv": "^3.0.5",
-    "@sveltejs/adapter-cloudflare": "^7.0.4",
-    "@sveltejs/kit": "^2.21.5",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/adapter-cloudflare": "^7.2.1",
+    "@sveltejs/kit": "^2.31.1",
+    "@sveltejs/package": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.12",
     "@types/d3": "^7.4.3",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -39,36 +39,35 @@
     "@types/topojson-client": "^3.1.5",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
-    "marked": "^15.0.12",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.252.0",
-    "prettier": "^3.5.3",
+    "posthog-js": "^1.260.1",
+    "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "rehype-slug": "^6.0.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "shapefile": "^0.6.6",
     "shiki": "^3.9.2",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.34.1",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.38.2",
+    "svelte-check": "^4.3.1",
     "svelte-json-tree": "^2.2.0",
     "svelte-ux": "2.0.0-next.17",
-    "svelte2tsx": "^0.7.39",
-    "tailwindcss": "^4.1.10",
+    "svelte2tsx": "^0.7.42",
+    "tailwindcss": "^4.1.12",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "unist-util-visit": "^5.0.0",
-    "unplugin-icons": "^22.1.0",
+    "unplugin-icons": "^22.2.0",
     "us-atlas": "^3.0.1",
-    "vite": "^6.3.5",
-    "vite-plugin-devtools-json": "^0.2.0",
-    "vitest": "^3.2.3"
+    "vite": "^7.1.2",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vitest": "^3.2.4"
   },
   "type": "module",
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
+    "@dagrejs/dagre": "^1.1.5",
     "@layerstack/svelte-actions": "1.0.1-next.14",
     "@layerstack/svelte-state": "0.1.0-next.19",
     "@layerstack/tailwind": "2.0.0-next.17",
@@ -94,7 +93,7 @@
     "d3-time": "^3.1.0",
     "lodash-es": "^4.17.21",
     "memoize": "^10.1.0",
-    "runed": "^0.28.0"
+    "runed": "^0.31.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -110,6 +109,10 @@
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js",
       "default": "./dist/utils/*.js"
+    },
+    "./*.css": {
+      "style": "./dist/styles/*.css",
+      "default": "./dist/styles/*.css"
     }
   },
   "files": [