layerchart 2.0.0-next.44 → 2.0.0-next.46

package/package.json

@@ -5,23 +5,18 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.44",
+  "version": "2.0.0-next.46",
   "devDependencies": {
-    "@changesets/cli": "^2.29.6",
-    "@iconify-json/lucide": "^1.2.62",
-    "@rollup/plugin-dsv": "^3.0.5",
-    "@sveltejs/adapter-cloudflare": "^7.2.1",
-    "@sveltejs/kit": "^2.31.1",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
+    "@changesets/cli": "^2.29.8",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.52.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.12",
     "@types/d3": "^7.4.3",
-    "@types/d3-array": "^3.2.1",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
-    "@types/d3-dsv": "^3.0.7",
     "@types/d3-force": "^3.0.10",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-hierarchy": "^3.1.7",
@@ -30,49 +25,33 @@
     "@types/d3-path": "^3.1.1",
     "@types/d3-quadtree": "^3.0.6",
     "@types/d3-random": "^3.0.3",
-    "@types/d3-sankey": "^0.12.4",
+    "@types/d3-sankey": "^0.12.5",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/d3-shape": "^3.1.7",
+    "@types/d3-shape": "^3.1.8",
     "@types/d3-time": "^3.0.4",
-    "@types/lodash-es": "^4.17.12",
-    "@types/shapefile": "^0.6.4",
-    "@types/topojson-client": "^3.1.5",
-    "@types/topojson-simplify": "^3.0.3",
-    "@types/topojson-specification": "^1.0.5",
-    "mdsvex": "^0.12.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.38.2",
-    "svelte-check": "^4.3.1",
-    "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.17",
-    "svelte2tsx": "^0.7.42",
-    "tailwindcss": "^4.1.12",
-    "topojson-client": "^3.1.0",
-    "topojson-simplify": "^3.0.3",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.0",
+    "svelte": "5.53.0",
+    "svelte-check": "^4.4.1",
+    "svelte2tsx": "^0.7.49",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "unist-util-visit": "^5.0.0",
-    "unplugin-icons": "^22.2.0",
-    "us-atlas": "^3.0.1",
-    "vite": "^7.1.2",
-    "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^3.2.4"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2"
   },
   "type": "module",
   "dependencies": {
-    "@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",
-    "@layerstack/utils": "2.0.0-next.14",
+    "@dagrejs/dagre": "^2.0.4",
+    "@layerstack/svelte-actions": "1.0.1-next.18",
+    "@layerstack/svelte-state": "0.1.0-next.23",
+    "@layerstack/tailwind": "2.0.0-next.21",
+    "@layerstack/utils": "2.0.0-next.18",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -92,9 +71,8 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "lodash-es": "^4.17.21",
-    "memoize": "^10.1.0",
-    "runed": "^0.31.1"
+    "memoize": "^10.2.0",
+    "runed": "^0.37.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -121,13 +99,13 @@
   ],
   "svelte": "./dist/index.js",
   "scripts": {
-    "dev": "vite dev --port 3002",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "pnpm package:watch",
     "package": "svelte-package",
+    "package:watch": "svelte-package --watch",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "TZ=UTC-5 vitest",
+    "test:ui": "TZ=UTC-5 vitest --ui",
     "lint": "prettier --check .",
     "format": "prettier --write ."
   }

package/README.md

@@ -1,41 +0,0 @@
-# LayerChart
-
-![](https://img.shields.io/github/license/techniq/layerchart?style=flat)
-[![](https://img.shields.io/npm/v/layerchart?style=flat)](https://www.npmjs.com/package/layerchart)
-![npm](https://img.shields.io/npm/dw/layerchart?style=flat&color=orange)
-
-![](https://img.shields.io/github/license/layerchart?style=flat)
-[![](https://dcbadge.vercel.app/api/server/697JhMPD3t?style=flat)](https://discord.gg/697JhMPD3t)
-
-A large collection of composable Svelte chart components to build a wide range of visualizations
-
-- Cartesian (Bar, Area, Stack, Scatter)
-- Radial (Pie, Arc, Sunburst)
-- Hierarchy (Pack, Tree, Treemap, Sunburst)
-- Graph (Sankey)
-- Geo (Choropleth, Spike, Bubble, Point, Globe)
-
-Interactions
-
-- Tooltip, Highlights, Pan/Zoom
-
-SVG
-
-- Basic (Arc, Circle, Group, Line, Spline, Text)
-- Gradients and Patterns
-- ClipPath
-- Multi-line text
-
-Others
-
-- Legends including ColorRamps
-
-See also [Svelte UX](http://svelte-ux.techniq.dev) for a large collection of components, actions, stores, and utilities to build highly interactive applications.
-
-## Publishing
-
-- `npm run changeset` for each changelog worthy change
-- `npm run version` to bump `package.json` version based on changesets, materialize changesets into CHANGELOG.md
-- Commit as `Version bump to x.y.z` (TODO: automate)
-- `npm run publish` to publish version to npm
-- `git push --tags` to publish tags to Github

package/dist/components/layout/Layer.svelte

@@ -1,41 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentProps } from 'svelte';
-
-  export type CanvasLayerProps = {
-    type: 'canvas';
-  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
-
-  export type HtmlLayerProps = {
-    type: 'html';
-  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
-
-  export type SvgLayerProps = {
-    type: 'svg';
-  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
-
-  export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
-    onpointermove?: (e: PointerEvent) => void;
-  };
-</script>
-
-<script lang="ts">
-  import Canvas from './Canvas.svelte';
-  import Html from './Html.svelte';
-  import Svg from './Svg.svelte';
-
-  let { type, children, ...restProps }: LayerProps = $props();
-</script>
-
-{#if type === 'canvas'}
-  <Canvas {...restProps as ComponentProps<typeof Canvas>}>
-    {@render children?.()}
-  </Canvas>
-{:else if type === 'svg'}
-  <Svg {...restProps as ComponentProps<typeof Svg>}>
-    {@render children?.()}
-  </Svg>
-{:else if type === 'html'}
-  <Html {...restProps as ComponentProps<typeof Html>}>
-    {@render children?.()}
-  </Html>
-{/if}

package/dist/docs/Blockquote.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-
-  import LucideInfo from '~icons/lucide/info';
-
-  const { children } = $props();
-</script>
-
-<div
-  class={cls(
-    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
-    '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
-  )}
->
-  <LucideInfo class="text-primary" />
-  {@render children()}
-</div>

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

@@ -1,5 +0,0 @@
-declare const Blockquote: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type Blockquote = ReturnType<typeof Blockquote>;
-export default Blockquote;

package/dist/docs/Code.svelte

@@ -1,80 +0,0 @@
-<script module>
-  import { createHighlighter } from 'shiki';
-
-  const highlighter = createHighlighter({
-    themes: ['github-light-default', 'github-dark-default'],
-    langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh'],
-  });
-</script>
-
-<script lang="ts">
-  import { CopyButton } from 'svelte-ux';
-  import { cls } from '@layerstack/tailwind';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  interface Props {
-    source?: string | null;
-    language?: string;
-    classes?: { root?: string; pre?: string; code?: string };
-  }
-
-  let {
-    source = null,
-    language = 'svelte',
-    classes = {},
-    class: className,
-  }: Props & HTMLAttributes<HTMLDivElement> = $props();
-</script>
-
-<div
-  class={cls(
-    'Code',
-    'relative bg-surface-200 dark:bg-surface-300 p-4 overflow-auto not-prose',
-    classes.root,
-    className
-  )}
->
-  {#if source}
-    <pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
-      <code class={cls('text-xs', classes.code)}>
-        {#await highlighter}
-          <div>Loading...</div>
-        {:then h}
-          {@html h.codeToHtml(source, {
-            lang: language,
-            themes: {
-              light: 'github-light-default',
-              dark: 'github-dark-default',
-            },
-          })}
-        {:catch error}
-          <div class="text-red-500">Error loading code highlighting: {error.message}</div>
-        {/await}
-
-      </code>
-    </pre>
-
-    <div class="absolute top-0 right-0 p-2 z-10">
-      <CopyButton
-        value={source ?? ''}
-        class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
-        size="sm"
-      />
-    </div>
-  {/if}
-</div>
-
-<style>
-  :global(.shiki) {
-    background-color: transparent !important;
-  }
-
-  :global(html.dark .shiki),
-  :global(html.dark .shiki span) {
-    color: var(--shiki-dark) !important;
-    /* background-color: var(--shiki-dark-bg) !important; */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-</style>

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

@@ -1,14 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props {
-    source?: string | null;
-    language?: string;
-    classes?: {
-        root?: string;
-        pre?: string;
-        code?: string;
-    };
-}
-type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
-declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
-type Code = ReturnType<typeof Code>;
-export default Code;

package/dist/docs/ConnectorSweepMenuField.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { MenuField } from 'svelte-ux';
-  import type { ConnectorSweep } from '../utils/connectorUtils.js';
-
-  let {
-    value = $bindable('horizontal-vertical'),
-  }: {
-    value?: ConnectorSweep;
-  } = $props();
-
-  const options = ['horizontal-vertical', 'vertical-horizontal', 'none'].map((type) => ({
-    label: type,
-    value: type,
-  }));
-</script>
-
-<MenuField label="Connector Sweep" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

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

@@ -1,7 +0,0 @@
-import type { ConnectorSweep } from '../utils/connectorUtils.js';
-type $$ComponentProps = {
-    value?: ConnectorSweep;
-};
-declare const ConnectorSweepMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
-type ConnectorSweepMenuField = ReturnType<typeof ConnectorSweepMenuField>;
-export default ConnectorSweepMenuField;

package/dist/docs/ConnectorTypeMenuField.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { MenuField } from 'svelte-ux';
-  import type { ConnectorType } from '../utils/connectorUtils.js';
-
-  let {
-    value = $bindable('rounded'),
-  }: {
-    value?: ConnectorType;
-  } = $props();
-
-  const options = ['straight', 'square', 'beveled', 'rounded', 'd3'].map((type) => ({
-    label: type,
-    value: type,
-  }));
-</script>
-
-<MenuField label="Connector Type" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

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

@@ -1,7 +0,0 @@
-import type { ConnectorType } from '../utils/connectorUtils.js';
-type $$ComponentProps = {
-    value?: ConnectorType;
-};
-declare const ConnectorTypeMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
-type ConnectorTypeMenuField = ReturnType<typeof ConnectorTypeMenuField>;
-export default ConnectorTypeMenuField;

package/dist/docs/CurveMenuField.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import * as d3shapes from 'd3-shape';
-
-  import { MenuField } from 'svelte-ux';
-  import { entries } from '@layerstack/utils';
-  import type { ComponentProps } from 'svelte';
-
-  let {
-    value = $bindable(),
-    showOpenClosed = false,
-    ...restProps
-  }: {
-    value?: any;
-    showOpenClosed?: boolean;
-  } & ComponentProps<MenuField> = $props();
-
-  if (value === undefined) {
-    value = d3shapes['curveLinear'];
-  }
-
-  const options = entries(d3shapes)
-    .filter(([key]) => {
-      return (
-        key.startsWith('curve') &&
-        (showOpenClosed ? true : !key.endsWith('Open') && !key.endsWith('Closed')) &&
-        !key.includes('Bundle') // Not compatibile with area
-      );
-    })
-    .map(([key, value]) => {
-      return {
-        label: key.replace('curve', ''),
-        value: value,
-      };
-    });
-</script>
-
-<MenuField
-  label="Curve"
-  {options}
-  bind:value
-  stepper
-  classes={{ menuIcon: 'hidden' }}
-  {...restProps}
-/>

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

@@ -1,9 +0,0 @@
-import { MenuField } from 'svelte-ux';
-import type { ComponentProps } from 'svelte';
-type $$ComponentProps = {
-    value?: any;
-    showOpenClosed?: boolean;
-} & ComponentProps<MenuField>;
-declare const CurveMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
-type CurveMenuField = ReturnType<typeof CurveMenuField>;
-export default CurveMenuField;

package/dist/docs/GeoDebug.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { Checkbox } from 'svelte-ux';
-  import { cls } from '@layerstack/tailwind';
-  import { format } from '@layerstack/utils';
-  import { getChartContext } from '../components/Chart.svelte';
-  import { getGeoContext } from '../components/GeoContext.svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  const ctx = getChartContext();
-  const geoCtx = getGeoContext();
-
-  let { class: className }: HTMLAttributes<HTMLElement> = $props();
-
-  let showCenter = $state(false);
-</script>
-
-{#if geoCtx.projection}
-  <div class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', className)}>
-    <div class="grid gap-2 text-xs">
-      <div>
-        <span class="opacity-50">scale:</span>
-        {format(geoCtx.projection.scale(), 'decimal')}
-      </div>
-
-      <div>
-        <span class="opacity-50">translate:</span>
-        {#each geoCtx.projection.translate() as coord}
-          <div class="text-right">{format(coord, 'decimal')}</div>
-        {/each}
-      </div>
-
-      <div>
-        <span class="opacity-50">rotate:</span>
-        {#each geoCtx.projection.rotate() as angle}
-          <div class="text-right">{format(angle, 'decimal')}</div>
-        {/each}
-      </div>
-
-      <div class="grid grid-cols-[auto_1fr]">
-        <span class="opacity-50">center:</span>
-        <span class="text-right">
-          {geoCtx.projection.center?.()}
-        </span>
-      </div>
-
-      <div>
-        <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
-        {#each geoCtx.projection.invert?.([ctx.width / 2, ctx.height / 2]) ?? [] as coord}
-          <div class="text-right">{format(coord, 'decimal')}</div>
-        {/each}
-      </div>
-    </div>
-  </div>
-
-  {#if showCenter}
-    <div
-      class="absolute w-2 h-2 bg-danger/80 rounded-full z-1 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-    ></div>
-  {/if}
-{/if}

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

@@ -1,4 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-declare const GeoDebug: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
-type GeoDebug = ReturnType<typeof GeoDebug>;
-export default GeoDebug;

package/dist/docs/Header1.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { SectionDivider } from 'svelte-ux';
-
-  let { children, ...restProps } = $props();
-</script>
-
-<!--
-  TODO:
-    - [ ] Set id based on slot value
-      - Needed for #examples, #api, etc
-      - Maybe possible to set/get props from markdown/mdsvex
-        - Example: `#API { id: 'api' }
--->
-<SectionDivider {...restProps}>
-  {@render children()}
-</SectionDivider>

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

@@ -1,5 +0,0 @@
-declare const Header1: import("svelte").Component<{
-    children: any;
-} & Record<string, any>, {}, "">;
-type Header1 = ReturnType<typeof Header1>;
-export default Header1;

package/dist/docs/Json.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
-  import JsonTree from 'svelte-json-tree';
-  import { cls } from '@layerstack/tailwind';
-
-  const {
-    value,
-    defaultExpandedPaths = ['$'],
-    class: className,
-  }: {
-    value: ComponentProps<JsonTree>['value'];
-    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
-    class?: string;
-  } = $props();
-</script>
-
-<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>
-  <JsonTree
-    {value}
-    {defaultExpandedPaths}
-    shouldTreatIterableAsObject
-    --json-tree-property-color="#72a2d3"
-    --json-tree-string-color="#6cd1c7"
-    --json-tree-symbol-color="#6cd1c7"
-    --json-tree-boolean-color="#9681f7"
-    --json-tree-function-color="#e59b6f"
-    --json-tree-number-color="#9681f7"
-    --json-tree-label-color="#9ca0a5"
-    --json-tree-arrow-color="#e8eaed"
-    --json-tree-null-color="#81868a"
-    --json-tree-undefined-color="#81868a"
-    --json-tree-date-color="#9ca0a5"
-    --json-tree-operator-color="#e8eaed"
-    --json-tree-regex-color="#6cd1c7"
-  />
-</div>

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

@@ -1,10 +0,0 @@
-import { type ComponentProps } from 'svelte';
-import JsonTree from 'svelte-json-tree';
-type $$ComponentProps = {
-    value: ComponentProps<JsonTree>['value'];
-    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
-    class?: string;
-};
-declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
-type Json = ReturnType<typeof Json>;
-export default Json;

package/dist/docs/Layout.svelte

@@ -1,21 +0,0 @@
-<script module>
-  // Custom components: https://mdsvex.com/docs#custom-components
-  import blockquote from './Blockquote.svelte';
-  import a from './Link.svelte';
-  import h1 from './Header1.svelte';
-
-  export { a, blockquote };
-</script>
-
-<script lang="ts">
-  let {
-    // frontmatter: https://mdsvex.com/docs#frontmatter-1
-    // name,
-    // sourceUrl,
-    // docUrl,
-    // description,
-    children,
-  } = $props();
-</script>
-
-{@render children()}

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

@@ -1,8 +0,0 @@
-import blockquote from './Blockquote.svelte';
-import a from './Link.svelte';
-export { a, blockquote };
-declare const Layout: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type Layout = ReturnType<typeof Layout>;
-export default Layout;

package/dist/docs/Link.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  let { children, ...restProps } = $props();
-</script>
-
-<!-- href provided by markdown/mdsvex -->
-<!-- svelte-ignore a11y_missing_attribute -->
-<a class="text-primary font-medium" {...restProps}>
-  {@render children()}
-</a>

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

@@ -1,5 +0,0 @@
-declare const Link: import("svelte").Component<{
-    children: any;
-} & Record<string, any>, {}, "">;
-type Link = ReturnType<typeof Link>;
-export default Link;