layerchart 0.54.0 → 0.55.0

package/dist/components/tooltip/TooltipItem.svelte

@@ -1,12 +1,20 @@
-<script>import { format as formatUtil } from '@layerstack/utils';
-import { cls } from '@layerstack/tailwind';
-export let label;
-/** Value to be formatted and displayed.  Can also be passed as default slot */
-export let value = undefined;
-export let format = undefined;
-export let valueAlign = 'left';
-export let color = undefined;
-export let classes = {};
+<script lang="ts">
+  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+
+  export let label: any;
+  /** Value to be formatted and displayed.  Can also be passed as default slot */
+  export let value: any = undefined;
+  export let format: FormatType | undefined = undefined;
+  export let valueAlign: 'left' | 'right' | 'center' = 'left';
+  export let color: string | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    label?: string;
+    value?: string;
+    color?: string;
+  } = {};
 </script>
 
 <div class={cls('contents', classes.root, $$props.class)} {...$$restProps}>

package/dist/components/tooltip/TooltipList.svelte

@@ -1,4 +1,5 @@
-<script>import { cls } from '@layerstack/tailwind';
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
 </script>
 
 <div

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,4 +1,5 @@
-<script>import { cls } from '@layerstack/tailwind';
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
 </script>
 
-<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)} />
+<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>

package/dist/docs/Blockquote.svelte

@@ -1,6 +1,7 @@
-<script>import { mdiInformation } from '@mdi/js';
-import { Icon } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
+<script lang="ts">
+  import { mdiInformation } from '@mdi/js';
+  import { Icon } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 </script>
 
 <div

package/dist/docs/Code.svelte

@@ -1,13 +1,20 @@
-<script>import Prism from 'prismjs';
-import 'prism-svelte';
-import { CopyButton } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
-export let source = null;
-export let language = 'svelte';
-export let highlightedSource = source
+<script lang="ts">
+  import Prism from 'prismjs';
+  import 'prism-svelte';
+  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 = {};
+
+  export let classes: {
+    root?: string;
+    pre?: string;
+    code?: string;
+  } = {};
 </script>
 
 <div class={cls('Code', 'rounded', classes.root, $$props.class)}>

package/dist/docs/CurveMenuField.svelte

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

package/dist/docs/GeoDebug.svelte

@@ -1,11 +1,15 @@
-<script>import { Checkbox } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
-import { format } from '@layerstack/utils';
-import { chartContext } from '../components/ChartContext.svelte';
-import { geoContext } from '../components/GeoContext.svelte';
-const { width, height } = chartContext();
-const geo = geoContext();
-let showCenter = false;
+<script lang="ts">
+  import { Checkbox } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { format } from '@layerstack/utils';
+
+  import { chartContext } from '../components/ChartContext.svelte';
+  import { geoContext } from '../components/GeoContext.svelte';
+
+  const { width, height } = chartContext();
+  const geo = geoContext();
+
+  let showCenter = false;
 </script>
 
 <div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
@@ -45,5 +49,5 @@ let showCenter = false;
 {#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}

package/dist/docs/Header1.svelte

@@ -1,4 +1,5 @@
-<script>import { SectionDivider } from 'svelte-ux';
+<script lang="ts">
+  import { SectionDivider } from 'svelte-ux';
 </script>
 
 <!--

package/dist/docs/Json.svelte

@@ -1,7 +1,9 @@
-<script>import JsonTree from 'svelte-json-tree';
-import { cls } from '@layerstack/tailwind';
-export let value;
-export let defaultExpandedPaths = ['$'];
+<script lang="ts">
+  import JsonTree from 'svelte-json-tree';
+  import { cls } from '@layerstack/tailwind';
+
+  export let value: any;
+  export let defaultExpandedPaths = ['$'];
 </script>
 
 <div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', $$props.class)}>

package/dist/docs/Layout.svelte

@@ -7,12 +7,12 @@
   export { a, blockquote };
 </script>
 
-<script>"use strict";
-// frontmatter: https://mdsvex.com/docs#frontmatter-1
-// export let name = undefined;
-// export let sourceUrl = undefined;
-// export let docUrl = undefined;
-// export let description = undefined;
+<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;
 </script>
 
 <slot />

package/dist/docs/PathDataMenuField.svelte

@@ -1,66 +1,74 @@
-<script>import { onMount } from 'svelte';
-import * as easings from 'svelte/easing';
-import { MenuField } from 'svelte-ux';
-export let value = undefined;
-// TODO: Allow updating externally without loosing selection
-export let amplitude = 1;
-export let frequency = 10;
-export let phase = 0;
-$: mathOptions = [
+<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;
+
+  $: mathOptions = [
     {
-        label: 'sin',
-        group: 'math',
-        value: (x) => amplitude * Math.sin(x * frequency) + phase,
+      label: 'sin',
+      group: 'math',
+      value: (x: number) => amplitude * Math.sin(x * frequency) + phase,
     },
     {
-        label: 'cos',
-        group: 'math',
-        value: (x) => amplitude * Math.cos(x * frequency) + phase,
+      label: 'cos',
+      group: 'math',
+      value: (x: number) => amplitude * Math.cos(x * frequency) + phase,
     },
     {
-        label: 'tan',
-        group: 'math',
-        value: (x) => amplitude * Math.tan(x * frequency) + phase,
+      label: 'tan',
+      group: 'math',
+      value: (x: number) => amplitude * Math.tan(x * frequency) + phase,
     },
     {
-        label: 'sqrt',
-        group: 'math',
-        value: (x) => amplitude * Math.sqrt(x * frequency) + phase,
+      label: 'sqrt',
+      group: 'math',
+      value: (x: number) => amplitude * Math.sqrt(x * frequency) + phase,
     },
     {
-        label: 'ceil',
-        group: 'math',
-        value: (x) => amplitude * Math.ceil(x * frequency) + phase,
+      label: 'ceil',
+      group: 'math',
+      value: (x: number) => amplitude * Math.ceil(x * frequency) + phase,
     },
     {
-        label: 'floor',
-        group: 'math',
-        value: (x) => amplitude * Math.floor(x * frequency) + phase,
+      label: 'floor',
+      group: 'math',
+      value: (x: number) => amplitude * Math.floor(x * frequency) + phase,
     },
     {
-        label: 'round',
-        group: 'math',
-        value: (x) => amplitude * Math.round(x * frequency) + phase,
+      label: 'round',
+      group: 'math',
+      value: (x: number) => amplitude * Math.round(x * frequency) + phase,
     },
-    { label: 'random', group: 'math', value: (x) => amplitude * Math.random() + phase },
+    { label: 'random', group: 'math', value: (x: number) => amplitude * Math.random() + phase },
     {
-        label: 'pow',
-        group: 'math',
-        value: (x) => amplitude * Math.pow(x, frequency) + phase,
+      label: 'pow',
+      group: 'math',
+      value: (x: number) => amplitude * Math.pow(x, frequency) + phase,
     },
-];
-const easingOptions = Object.entries(easings).map(([key, value]) => {
+  ];
+
+  const easingOptions = Object.entries(easings).map(([key, value]) => {
     return {
-        label: key,
-        value,
-        group: 'easing',
+      label: key,
+      value,
+      group: 'easing',
     };
-});
-$: options = [...mathOptions, ...easingOptions];
-// Select initial option
-onMount(() => {
+  });
+
+  $: options = [...mathOptions, ...easingOptions];
+
+  // Select initial option
+  onMount(() => {
     value = options[0].value;
-});
+  });
 </script>
 
 <MenuField label="Path data" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/Preview.svelte

@@ -1,40 +1,46 @@
-<script>import { slide } from 'svelte/transition';
-// TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
-import Prism from 'prismjs';
-import 'prism-svelte';
-import { mdiCodeTags, mdiTable } from '@mdi/js';
-import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
-import { entries, fromEntries } from '@layerstack/utils';
-import { isLiteralObject } from '@layerstack/utils/object';
-import Code from './Code.svelte';
-import Json from './Json.svelte';
-export let code = undefined;
-export let data = undefined;
-export let language = 'svelte';
-export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
-export let showCode = false;
-/**
- * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
- */
-function replacer(key, value) {
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
+  import Prism from 'prismjs';
+  import 'prism-svelte';
+  import { mdiCodeTags, mdiTable } from '@mdi/js';
+
+  import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { entries, fromEntries } from '@layerstack/utils';
+  import { isLiteralObject } from '@layerstack/utils/object';
+
+  import Code from './Code.svelte';
+  import Json from './Json.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;
+
+  /**
+   * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
+   */
+  function replacer(this: any, key: string, value: any): any {
     // TODO: Improve handling of circular structures and handle other data types (Map, Set, etc)
     if (this[key] instanceof Date) {
-        return `new Date('${this[key].toISOString()}')`;
+      return `new Date('${this[key].toISOString()}')`;
     }
+
     return value;
-}
-function getDataAsString(_data) {
+  }
+
+  function getDataAsString(_data: typeof data) {
     try {
-        // Regular expression to match quoted instantiation (ex. `"new Date(...)"`) and stripe the quotes  (`new Date(...)`)
-        const datePattern = /"(new \w+\([^)]*\))"/g;
-        return JSON.stringify(_data, replacer, 2).replace(datePattern, '$1');
-    }
-    catch (e) {
-        console.error('Error capturing value to copy', e);
-        return '';
+      // Regular expression to match quoted instantiation (ex. `"new Date(...)"`) and stripe the quotes  (`new Date(...)`)
+      const datePattern = /"(new \w+\([^)]*\))"/g;
+      return JSON.stringify(_data, replacer, 2).replace(datePattern, '$1');
+    } catch (e) {
+      console.error('Error capturing value to copy', e);
+      return '';
     }
-}
+  }
 </script>
 
 <div class={cls('Preview border rounded bg-surface-100', $$props.class)}>
@@ -60,12 +66,12 @@ function getDataAsString(_data) {
 {/if}
 
 {#if data}
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button icon={mdiTable} class="text-surface-content/70 py-1" on:click={toggle}>View data</Button
     >
     <Dialog
       {open}
-      on:close={toggle}
+      on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">

package/dist/docs/TilesetField.svelte

@@ -1,84 +1,102 @@
-<script>import { SelectField, Switch } from 'svelte-ux';
-export let doubleScale = devicePixelRatio > 1;
-// TODO: Access via context, or possibly global state
-const ACCESS_TOKEN = 'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
-// https://docs.mapbox.com/api/maps/styles/
-$: mapboxv1 = (style) => (x, y, z) => {
-    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) => (x, y, z) => {
-    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) => (x, y, z) => {
+<script lang="ts">
+  import { SelectField, Switch } from 'svelte-ux';
+
+  export let doubleScale = devicePixelRatio > 1;
+
+  // 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) => {
+    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) => {
+    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) => {
     return `https://basemap.nationalmap.gov/arcgis/rest/services/${tileset}/MapServer/tile/${z}/${y}/${x}`;
-};
-// https://services.arcgisonline.com/arcgis/rest/services
-// https://www.arcgis.com/home/webmap/viewer.html?useExisting=1
-// https://www.arcgis.com/apps/mapviewer/index.html
-const arcgis = (tileset) => (x, y, z) => {
+  };
+
+  // https://services.arcgisonline.com/arcgis/rest/services
+  // https://www.arcgis.com/home/webmap/viewer.html?useExisting=1
+  // https://www.arcgis.com/apps/mapviewer/index.html
+  const arcgis = (tileset: string) => (x: number, y: number, z: number) => {
     return `https://services.arcgisonline.com/ArcGIS/rest/services/${tileset}/MapServer/tile/${z}/${y}/${x}`;
-};
-const arcgisVector = (tileset) => (x, y, z) => {
+  };
+
+  const arcgisVector = (tileset: string) => (x: number, y: number, z: number) => {
     return `https://basemaps.arcgis.com/arcgis/rest/services/${tileset}/VectorTileServer/tile/${z}/${y}/${x}.pbf`;
     // https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1572/1108.pbf
-};
-$: services = {
+  };
+
+  $: services = {
     'mapbox v1': {
-        'streets-v11': mapboxv1('streets-v11'),
-        'light-v10': mapboxv1('light-v10'),
-        'dark-v10': mapboxv1('dark-v10'),
-        'outdoors-v12': mapboxv1('outdoors-v12'),
-        'satelllite-v9': mapboxv1('satellite-v9'),
-        'satelllite-streets-v12': mapboxv1('satellite-streets-v12'),
-        'navigation-day-v1': mapboxv1('navigation-day-v1'),
-        'navigation-night-v1': mapboxv1('navigation-night-v1'),
+      'streets-v11': mapboxv1('streets-v11'),
+      'light-v10': mapboxv1('light-v10'),
+      'dark-v10': mapboxv1('dark-v10'),
+      'outdoors-v12': mapboxv1('outdoors-v12'),
+      'satelllite-v9': mapboxv1('satellite-v9'),
+      'satelllite-streets-v12': mapboxv1('satellite-streets-v12'),
+      'navigation-day-v1': mapboxv1('navigation-day-v1'),
+      'navigation-night-v1': mapboxv1('navigation-night-v1'),
     },
     'mapbox v4': {
-        'natural-earth-2': mapboxv4('mapbox.natural-earth-2'),
-        satellite: mapboxv4('mapbox.satellite'),
-        streets: mapboxv4('mapbox.mapbox-streets-v8'),
-        terrain: mapboxv4('mapbox.mapbox-terrain-v2'),
-        'terrain-dem': mapboxv4('mapbox.mapbox-terrain-dem-v1'),
-        traffic: mapboxv4('mapbox.mapbox-traffic-v1'),
-        // 'transit (mapbox v4)': mapboxv4('mapbox.transit-v2'),
+      'natural-earth-2': mapboxv4('mapbox.natural-earth-2'),
+      satellite: mapboxv4('mapbox.satellite'),
+      streets: mapboxv4('mapbox.mapbox-streets-v8'),
+      terrain: mapboxv4('mapbox.mapbox-terrain-v2'),
+      'terrain-dem': mapboxv4('mapbox.mapbox-terrain-dem-v1'),
+      traffic: mapboxv4('mapbox.mapbox-traffic-v1'),
+      // 'transit (mapbox v4)': mapboxv4('mapbox.transit-v2'),
     },
     'National Map Services': {
-        Hydrography: nationalmap('USGSHydroCached'),
-        'USGS Imagery Topo Base Map': nationalmap('USGSImageryTopo'),
-        'USGS Imagery Only Base Map': nationalmap('USGSImageryOnly'),
-        'USGS Shaded Relief': nationalmap('USGSShadedReliefOnly'),
-        'USGS Topo Base Map': nationalmap('USGSTopo'),
+      Hydrography: nationalmap('USGSHydroCached'),
+      'USGS Imagery Topo Base Map': nationalmap('USGSImageryTopo'),
+      'USGS Imagery Only Base Map': nationalmap('USGSImageryOnly'),
+      'USGS Shaded Relief': nationalmap('USGSShadedReliefOnly'),
+      'USGS Topo Base Map': nationalmap('USGSTopo'),
     },
     ArcGIS: {
-        'USA Topo Map': arcgis('USA_Topo_Maps'),
-        'National Geographic World Map': arcgis('NatGeo_World_Map'),
-        'World Imagery': arcgis('World_Imagery'),
-        'World Physicial Map': arcgis('World_Physical_Map'),
-        'World Shaded Relief': arcgis('World_Shaded_Relief'),
-        'World Street Map': arcgis('World_Street_Map'),
-        'World Terrain Base': arcgis('World_Terrain_Base'),
-        'World Topo Map': arcgis('World_Topo_Map'),
+      'USA Topo Map': arcgis('USA_Topo_Maps'),
+      'National Geographic World Map': arcgis('NatGeo_World_Map'),
+      'World Imagery': arcgis('World_Imagery'),
+      'World Physicial Map': arcgis('World_Physical_Map'),
+      'World Shaded Relief': arcgis('World_Shaded_Relief'),
+      'World Street Map': arcgis('World_Street_Map'),
+      'World Terrain Base': arcgis('World_Terrain_Base'),
+      'World Topo Map': arcgis('World_Topo_Map'),
     },
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
-};
-$: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
+  } 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 };
+      return { label, value: `${group}:${label}`, group, serviceUrl: value };
     });
-});
-$: defaultServiceUrl = services['mapbox v1']['streets-v11'];
-export let serviceUrl = defaultServiceUrl;
-$: getServiceUrl = (option) => {
+  });
+
+  $: defaultServiceUrl = services['mapbox v1']['streets-v11'];
+  export let serviceUrl = defaultServiceUrl;
+
+  $: getServiceUrl = (option: string) => {
     const [selectedService, selectedTileset] = selected.split(':');
     return services[selectedService][selectedTileset];
-};
-let selected = 'mapbox v1:streets-v11';
-$: serviceUrl = getServiceUrl(selected);
+  };
+
+  let selected = 'mapbox v1:streets-v11';
+  $: serviceUrl = getServiceUrl(selected);
 </script>
 
 <SelectField

package/dist/docs/TransformDebug.svelte

@@ -1,8 +1,11 @@
-<script>import { cls } from '@layerstack/tailwind';
-import { format } from '@layerstack/utils';
-import { transformContext } from '../components/TransformContext.svelte';
-const transform = transformContext();
-const { translate, scale } = transform;
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { format } from '@layerstack/utils';
+
+  import { transformContext } from '../components/TransformContext.svelte';
+
+  const transform = transformContext();
+  const { translate, scale } = transform;
 </script>
 
 <div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>

package/dist/docs/ViewSourceButton.svelte

@@ -1,18 +1,22 @@
-<script>import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-import { mdiGithub } from '@mdi/js';
-import Code from './Code.svelte';
-export let label;
-export let source = undefined;
-export let href = undefined;
-export let icon;
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
+  import { mdiGithub } from '@mdi/js';
+
+  import Code from './Code.svelte';
+
+  export let label: string;
+  export let source: string | undefined = undefined;
+  export let href: string | undefined = undefined;
+  export let icon: ComponentProps<Button>['icon'];
 </script>
 
 {#if source}
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
     <Dialog
       {open}
-      on:close={toggle}
+      on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">