layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/docs/GeoDebug.svelte

@@ -2,54 +2,59 @@
   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';
 
-  import { chartContext } from '../components/ChartContext.svelte';
-  import { geoContext } from '../components/GeoContext.svelte';
+  const ctx = getChartContext();
+  const geoCtx = getGeoContext();
 
-  const { width, height } = chartContext();
-  const geo = geoContext();
+  let { class: className }: HTMLAttributes<HTMLElement> = $props();
 
-  let showCenter = false;
+  let showCenter = $state(false);
 </script>
 
-<div
-  class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
->
-  <div class="grid gap-2 text-xs">
-    <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
-
-    <div>
-      <span class="opacity-50">translate:</span>
-      {#each $geo.translate() as coord}
-        <div class="text-right">{format(coord, 'decimal')}</div>
-      {/each}
-    </div>
-
-    <div>
-      <span class="opacity-50">rotate:</span>
-      {#each $geo.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">
-        {$geo.center?.()}
-      </span>
-    </div>
-
-    <div>
-      <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
-      {#each $geo.invert?.([$width / 2, $height / 2]) ?? [] as coord}
-        <div class="text-right">{format(coord, 'decimal')}</div>
-      {/each}
+{#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>
-</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 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,16 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GeoDebugProps = typeof __propDef.props;
-export type GeoDebugEvents = typeof __propDef.events;
-export type GeoDebugSlots = typeof __propDef.slots;
-export default class GeoDebug extends SvelteComponentTyped<GeoDebugProps, GeoDebugEvents, GeoDebugSlots> {
-}
-export {};
+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,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>

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

@@ -1,18 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type Header1Props = typeof __propDef.props;
-export type Header1Events = typeof __propDef.events;
-export type Header1Slots = typeof __propDef.slots;
-export default class Header1 extends SvelteComponentTyped<Header1Props, Header1Events, Header1Slots> {
-}
-export {};
+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,12 +1,20 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  export let value: any;
-  export let defaultExpandedPaths = ['$'];
+  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]', $$props.class)}>
+<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>
   <JsonTree
     {value}
     {defaultExpandedPaths}

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

@@ -1,18 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value: any;
-        defaultExpandedPaths?: string[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import { type ComponentProps } from 'svelte';
+import JsonTree from 'svelte-json-tree';
+type $$ComponentProps = {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
 };
-export type JsonProps = typeof __propDef.props;
-export type JsonEvents = typeof __propDef.events;
-export type JsonSlots = typeof __propDef.slots;
-export default class Json extends SvelteComponentTyped<JsonProps, JsonEvents, JsonSlots> {
-}
-export {};
+declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
+type Json = ReturnType<typeof Json>;
+export default Json;

package/dist/docs/Layout.svelte

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

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

@@ -1,18 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
 import blockquote from './Blockquote.svelte';
 import a from './Link.svelte';
 export { a, blockquote };
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type LayoutProps = typeof __propDef.props;
-export type LayoutEvents = typeof __propDef.events;
-export type LayoutSlots = typeof __propDef.slots;
-export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
-}
+declare const Layout: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/docs/Link.svelte

@@ -1,5 +1,9 @@
+<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}>
-  <slot />
+<!-- svelte-ignore a11y_missing_attribute -->
+<a class="text-primary font-medium" {...restProps}>
+  {@render children()}
 </a>

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

@@ -1,27 +1,5 @@
-/** @typedef {typeof __propDef.props}  LinkProps */
-/** @typedef {typeof __propDef.events}  LinkEvents */
-/** @typedef {typeof __propDef.slots}  LinkSlots */
-export default class Link extends SvelteComponentTyped<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+declare const Link: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/docs/PathDataMenuField.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import * as easings from 'svelte/easing';
-
   import { MenuField } from 'svelte-ux';
 
-  export let value: any | undefined = undefined;
-
-  // TODO: Allow updating externally without loosing selection
-  export let amplitude = 1;
-  export let frequency = 10;
-  export let phase = 0;
+  let {
+    value = $bindable(),
+    amplitude = 1,
+    frequency = 10,
+    phase = 0,
+  }: {
+    value?: any;
+    amplitude?: number;
+    frequency?: number;
+    phase?: number;
+  } = $props();
 
-  $: mathOptions = [
+  const mathOptions = $derived([
     {
       label: 'sin',
       group: 'math',
@@ -53,7 +57,7 @@
       group: 'math',
       value: (x: number) => amplitude * Math.pow(x, frequency) + phase,
     },
-  ];
+  ]);
 
   const easingOptions = Object.entries(easings).map(([key, value]) => {
     return {
@@ -63,7 +67,7 @@
     };
   });
 
-  $: options = [...mathOptions, ...easingOptions];
+  const options = $derived([...mathOptions, ...easingOptions]);
 
   // Select initial option
   onMount(() => {

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

@@ -1,19 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: any | undefined;
-        amplitude?: number;
-        frequency?: number;
-        phase?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    value?: any;
+    amplitude?: number;
+    frequency?: number;
+    phase?: number;
 };
-export type PathDataMenuFieldProps = typeof __propDef.props;
-export type PathDataMenuFieldEvents = typeof __propDef.events;
-export type PathDataMenuFieldSlots = typeof __propDef.slots;
-export default class PathDataMenuField extends SvelteComponentTyped<PathDataMenuFieldProps, PathDataMenuFieldEvents, PathDataMenuFieldSlots> {
-}
-export {};
+declare const PathDataMenuField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PathDataMenuField = ReturnType<typeof PathDataMenuField>;
+export default PathDataMenuField;

package/dist/docs/Preview.svelte

@@ -10,12 +10,25 @@
 
   import Code from './Code.svelte';
   import Json from './Json.svelte';
+  import type { Snippet } from 'svelte';
 
-  export let code: string | undefined = undefined;
-  export let data: any | undefined = undefined;
-  export let language = 'svelte';
-  export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
-  export let showCode = false;
+  let {
+    code,
+    data,
+    language = 'svelte',
+    highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '',
+    showCode = false,
+    class: className,
+    children,
+  }: {
+    code?: string;
+    data?: any;
+    language?: string;
+    highlightedCode?: string;
+    showCode?: boolean;
+    class?: string | null;
+    children: Snippet;
+  } = $props();
 
   /**
    * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
@@ -41,9 +54,9 @@
   }
 </script>
 
-<div class={cls('Preview border rounded-sm bg-surface-100', $$props.class)}>
+<div class={cls('Preview border rounded-sm bg-surface-100', className)}>
   <div class="p-4">
-    <slot />
+    {@render children?.()}
   </div>
 
   {#if code && showCode}

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

@@ -1,24 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
 import 'prism-svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        code?: string | undefined | undefined;
-        data?: any | undefined;
-        language?: string | undefined;
-        highlightedCode?: string | undefined;
-        showCode?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    code?: string;
+    data?: any;
+    language?: string;
+    highlightedCode?: string;
+    showCode?: boolean;
+    class?: string | null;
+    children: Snippet;
 };
-export type PreviewProps = typeof __propDef.props;
-export type PreviewEvents = typeof __propDef.events;
-export type PreviewSlots = typeof __propDef.slots;
-export default class Preview extends SvelteComponentTyped<PreviewProps, PreviewEvents, PreviewSlots> {
-}
-export {};
+declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/docs/TilesetField.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { SelectField, Switch } from 'svelte-ux';
 
-  export let doubleScale = devicePixelRatio > 1;
+  let { doubleScale = $bindable(devicePixelRatio > 1), serviceUrl = $bindable() } = $props();
 
   // TODO: Access via context, or possibly global state
   const ACCESS_TOKEN =
     'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
 
   // https://docs.mapbox.com/api/maps/styles/
-  $: mapboxv1 = (style: string) => (x: number, y: number, z: number) => {
+  const mapboxv1 = $derived((style: string) => (x: number, y: number, z: number) => {
     return `https://api.mapbox.com/styles/v1/mapbox/${style}/tiles/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://docs.mapbox.com/api/maps/raster-tiles/
   // https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/
-  $: mapboxv4 = (tileset: string) => (x: number, y: number, z: number) => {
+  const mapboxv4 = $derived((tileset: string) => (x: number, y: number, z: number) => {
     return `https://${'abc'[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/${tileset}/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }.png?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://apps.nationalmap.gov/services/
   const nationalmap = (tileset: string) => (x: number, y: number, z: number) => {
@@ -54,7 +54,7 @@
     return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`;
   };
 
-  $: services = {
+  const services = $derived<Record<string, Record<string, Function>>>({
     'mapbox v1': {
       'streets-v11': mapboxv1('streets-v11'),
       'light-v10': mapboxv1('light-v10'),
@@ -100,24 +100,25 @@
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
-  } as Record<string, Record<string, Function>>;
-
-  $: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
-    return Object.entries(service).map(([label, value]) => {
-      return { label, value: `${group}:${label}`, group, serviceUrl: value };
-    });
   });
 
-  $: defaultServiceUrl = services['mapbox v1']['streets-v11'];
-  export let serviceUrl = defaultServiceUrl;
+  const serviceOptions = $derived(
+    Object.entries(services).flatMap(([group, service]) => {
+      return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+      });
+    })
+  );
 
-  $: getServiceUrl = (option: string) => {
+  const getServiceUrl = $derived((option: string) => {
     const [selectedService, selectedTileset] = selected.split(':');
     return services[selectedService][selectedTileset];
-  };
+  });
 
-  let selected = 'mapbox v1:streets-v11';
-  $: serviceUrl = getServiceUrl(selected);
+  let selected = $state('mapbox v1:streets-v11');
+  $effect(() => {
+    serviceUrl = getServiceUrl(selected);
+  });
 </script>
 
 <SelectField
@@ -128,7 +129,7 @@
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation role="none">
+  <div slot="append" onclick={(e) => e.stopPropagation()} role="none">
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>

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

@@ -1,19 +1,6 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        doubleScale?: boolean;
-        serviceUrl?: Function;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TilesetFieldProps = typeof __propDef.props;
-export type TilesetFieldEvents = typeof __propDef.events;
-export type TilesetFieldSlots = typeof __propDef.slots;
-export default class TilesetField extends SvelteComponentTyped<TilesetFieldProps, TilesetFieldEvents, TilesetFieldSlots> {
-}
-export {};
+declare const TilesetField: import("svelte").Component<{
+    doubleScale?: any;
+    serviceUrl?: any;
+}, {}, "doubleScale" | "serviceUrl">;
+type TilesetField = ReturnType<typeof TilesetField>;
+export default TilesetField;

package/dist/docs/TransformDebug.svelte

@@ -2,22 +2,21 @@
   import { cls } from '@layerstack/tailwind';
   import { format } from '@layerstack/utils';
 
-  import { transformContext } from '../components/TransformContext.svelte';
+  import { getTransformContext } from '../components/TransformContext.svelte';
 
-  const transform = transformContext();
-  const { translate, scale } = transform;
+  const transform = getTransformContext();
 </script>
 
 <div
   class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
 >
   <div class="grid gap-2 text-xs">
-    <div><span class="opacity-50">scale:</span> {format($scale, 'decimal')}</div>
+    <div><span class="opacity-50">scale:</span> {format(transform.scale, 'decimal')}</div>
 
     <div>
       <span class="opacity-50">translate:</span>
-      <div class="text-right">{format($translate.x, 'decimal')}</div>
-      <div class="text-right">{format($translate.y, 'decimal')}</div>
+      <div class="text-right">{format(transform.translate.x, 'decimal')}</div>
+      <div class="text-right">{format(transform.translate.y, 'decimal')}</div>
     </div>
   </div>
 </div>