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

package/dist/components/Circle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type { Snippet } from 'svelte';
   import type { CommonStyleProps, Without } from '../utils/types.js';
 
   export type CirclePropsWithoutHTML = {
@@ -52,6 +53,9 @@
     ref?: SVGCircleElement;
 
     motion?: MotionProp;
+
+    /** Children content to render.  Note: Only works for Html layers */
+    children?: Snippet;
   } & CommonStyleProps;
 
   export type CircleProps = CirclePropsWithoutHTML &
@@ -60,11 +64,11 @@
 
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge } from '@layerstack/utils';
 
-  import { getRenderContext } from './Chart.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { renderCircle, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
@@ -84,6 +88,7 @@
     opacity,
     class: className,
     ref: refProp = $bindable(),
+    children,
     ...restProps
   }: CircleProps = $props();
 
@@ -97,7 +102,7 @@
   const initialCy = initialCyProp ?? cy;
   const initialR = initialRProp ?? r;
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   const motionCx = createMotion(initialCx, () => cx, motion);
   const motionCy = createMotion(initialCy, () => cy, motion);
@@ -115,6 +120,7 @@
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: cls('lc-circle', className),
+            style: restProps.style as string | undefined,
           }
     );
   }
@@ -123,7 +129,7 @@
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Circle',
       render,
@@ -144,12 +150,13 @@
         strokeWidth,
         opacity,
         className,
+        restProps.style,
       ],
     });
   }
 </script>
 
-{#if renderCtx === 'svg'}
+{#if layerCtx === 'svg'}
   <circle
     bind:this={ref}
     cx={motionCx.current}
@@ -163,7 +170,7 @@
     class={cls('lc-circle', className)}
     {...restProps}
   />
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   <div
     style:position="absolute"
     style:left="{motionCx.current}px"
@@ -179,7 +186,9 @@
     style:transform="translate(-50%, -50%)"
     class={cls('lc-circle', className)}
     {...restProps}
-  ></div>
+  >
+    {@render children?.()}
+  </div>
 {/if}
 
 <style>

package/dist/components/Circle.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { CommonStyleProps, Without } from '../utils/types.js';
 export type CirclePropsWithoutHTML = {
     /**
@@ -43,6 +44,8 @@ export type CirclePropsWithoutHTML = {
      */
     ref?: SVGCircleElement;
     motion?: MotionProp;
+    /** Children content to render.  Note: Only works for Html layers */
+    children?: Snippet;
 } & CommonStyleProps;
 export type CircleProps = CirclePropsWithoutHTML & Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
 import { type MotionProp } from '../utils/motion.svelte.js';

package/dist/components/ClipPath.svelte

@@ -3,7 +3,7 @@
   import type { Without } from '../utils/types.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
-  import { getRenderContext } from './Chart.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
 
   export type ClipPathPropsWithoutHTML = {
     /**
@@ -56,10 +56,10 @@
 
   const url = $derived(`url(#${id})`);
 
-  const renderContext = getRenderContext();
+  const layerCtx = getLayerContext();
 </script>
 
-{#if renderContext === 'svg'}
+{#if layerCtx === 'svg'}
   <defs>
     <clipPath {id} {...restProps}>
       {@render clip?.({ id })}
@@ -72,7 +72,7 @@
 {/if}
 
 {#if children}
-  {#if disabled || renderContext !== 'svg'}
+  {#if disabled || layerCtx !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
     <g style:clip-path={url} class="lc-clip-path-g">

package/dist/components/Connector.svelte

@@ -46,10 +46,10 @@
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
-  } & SplinePropsWithoutHTML;
+  } & PathPropsWithoutHTML;
 
   export type ConnectorProps = ConnectorPropsWithoutHTML &
-    Without<SplineProps, ConnectorPropsWithoutHTML>;
+    Without<PathProps, ConnectorPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -61,7 +61,7 @@
     type ConnectorSweep,
     type ConnectorType,
   } from '../utils/connectorUtils.js';
-  import Spline, { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+  import Path, { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
   import type { Without } from '../utils/types.js';
   import { createId } from '../utils/createId.js';
   import { extractLayerProps } from '../utils/attributes.js';
@@ -135,7 +135,7 @@
   );
 </script>
 
-<Spline
+<Path
   pathData={motionPath.current}
   bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}

package/dist/components/Connector.svelte.d.ts

@@ -40,11 +40,11 @@ export type ConnectorPropsWithoutHTML = {
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
-} & SplinePropsWithoutHTML;
-export type ConnectorProps = ConnectorPropsWithoutHTML & Without<SplineProps, ConnectorPropsWithoutHTML>;
+} & PathPropsWithoutHTML;
+export type ConnectorProps = ConnectorPropsWithoutHTML & Without<PathProps, ConnectorPropsWithoutHTML>;
 import { type CurveFactory } from 'd3-shape';
 import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
-import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
+import { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
 import type { Without } from '../utils/types.js';
 declare const Connector: import("svelte").Component<ConnectorProps, {}, "pathRef">;
 type Connector = ReturnType<typeof Connector>;

package/dist/components/Ellipse.svelte

@@ -74,11 +74,11 @@
 
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge } from '@layerstack/utils';
 
-  import { getRenderContext } from './Chart.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { renderEllipse, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
@@ -114,7 +114,7 @@
   const initialRx = initialRxProp ?? rx;
   const initialRy = initialRyProp ?? ry;
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   const motionCx = createMotion(initialCx, () => cx, motion);
   const motionCy = createMotion(initialCy, () => cy, motion);
@@ -141,7 +141,7 @@
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Ellipse',
       render,
@@ -168,7 +168,7 @@
   }
 </script>
 
-{#if renderCtx === 'svg'}
+{#if layerCtx === 'svg'}
   <ellipse
     bind:this={ref}
     cx={motionCx.current}
@@ -183,7 +183,7 @@
     class={cls('lc-ellipse', className)}
     {...restProps}
   />
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   <div
     style:position="absolute"
     style:left="{motionCx.current}px"

package/dist/components/Frame.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let { ref: refProp = $bindable(), full = false, ...restProps }: FrameProps = $props();

package/dist/components/GeoContext.svelte

@@ -1,26 +1,10 @@
 <script lang="ts" module>
-  import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-  import { getTransformContext } from './TransformContext.svelte';
-  import { Context } from 'runed';
-  import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
+  import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
 
-  export type GeoContextValue = {
-    projection: GeoProjection | undefined;
-  };
-
-  /**
-   * Access or set the current GeoContext.
-   */
-  const _GeoContext = new Context<GeoContextValue>('GeoContext');
-
-  export function getGeoContext() {
-    return _GeoContext.getOr({ projection: undefined } as GeoContextValue);
-  }
-
-  export function setGeoContext(geo: GeoContextValue) {
-    return _GeoContext.set(geo);
-  }
+  import { setGeoContext, type GeoContextValue } from '../contexts/geo.js';
+  import { getTransformContext } from '../contexts/transform.js';
+  import { getChartContext } from '../contexts/chart.js';
 
   export type GeoContextProps = {
     /**

package/dist/components/GeoContext.svelte.d.ts

@@ -1,10 +1,6 @@
-import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
 import type { Snippet } from 'svelte';
-export type GeoContextValue = {
-    projection: GeoProjection | undefined;
-};
-export declare function getGeoContext(): GeoContextValue;
-export declare function setGeoContext(geo: GeoContextValue): GeoContextValue;
+import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
+import { type GeoContextValue } from '../contexts/geo.js';
 export type GeoContextProps = {
     /**
      * A d3 projection function. Pass this in as an uncalled function, e.g.

package/dist/components/GeoEdgeFade.svelte

@@ -22,7 +22,7 @@
   import { scaleLinear } from 'd3-scale';
   import { geoDistance } from 'd3-geo';
 
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getGeoContext } from '../contexts/geo.js';
   import Group, { type GroupProps } from './Group.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
 

package/dist/components/GeoPath.svelte

@@ -1,9 +1,6 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
   import type { Snippet } from 'svelte';
-  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+  import type { SVGAttributes } from 'svelte/elements';
   import {
     geoPath as d3GeoPath,
     geoTransform as d3geoTransform,
@@ -12,7 +9,11 @@
     type GeoProjection,
     type GeoTransformPrototype,
   } from 'd3-geo';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { TooltipContextValue } from '../contexts/tooltip.js';
+  import type { PathProps } from './Path.svelte';
 
   export type GeoPathPropsWithoutHTML = {
     /**
@@ -59,42 +60,45 @@
     ref?: SVGPathElement;
 
     children?: Snippet<[{ geoPath: ReturnType<typeof geoCurvePath> | undefined }]>;
-  } & CommonStyleProps;
+  } & CommonStyleProps &
+    Pick<
+      PathProps,
+      | 'motion'
+      | 'draw'
+      | 'marker'
+      | 'markerStart'
+      | 'markerMid'
+      | 'markerEnd'
+      | 'startContent'
+      | 'endContent'
+    >;
 
   export type GeoPathProps = GeoPathPropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
-  import { merge } from 'lodash-es';
+  import { cls } from '@layerstack/tailwind';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { geoCurvePath } from '../utils/geo.js';
-  import { getGeoContext } from './GeoContext.svelte';
-  import { createKey } from '../utils/key.svelte.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import Path from './Path.svelte';
 
   let {
-    fill,
-    stroke,
-    strokeWidth,
-    opacity,
     geoTransform,
     geojson,
     tooltipContext,
     curve = curveLinearClosed,
     onclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
     class: className,
     ref: refProp = $bindable(),
     children,
     ...restProps
   }: GeoPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
   const geo = getGeoContext();
 
   const projection = $derived(
@@ -111,109 +115,40 @@
     return geoCurvePath(projection, curve);
   });
 
-  const renderCtx = getRenderContext();
-
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    if (!geojson) return;
-    const pathData = geoPath?.(geojson);
-    renderPathData(
-      ctx,
-      pathData,
-      styleOverrides
-        ? merge({ styles: { strokeWidth } }, styleOverrides)
-        : {
-            styles: { fill, stroke, strokeWidth, opacity },
-            classes: className,
-          }
-    );
-  }
-
-  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const pathData = $derived(geojson ? geoPath?.(geojson) : '');
 
-  // Hide `geoPath` and `tooltip` reactivity
+  // Hide `geoPath` reactivity from onclick handler
   function _onClick(e: MouseEvent) {
     onclick?.(e, geoPath);
   }
 
-  const _onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointerenter?.(e);
+  function _onPointerEnter(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointerenter?.(e);
     tooltipContext?.show(e, geojson);
-  };
+  }
 
-  const _onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointermove?.(e);
+  function _onPointerMove(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointermove?.(e);
     tooltipContext?.show(e, geojson);
-  };
+  }
 
-  const _onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointerleave?.(e);
+  function _onPointerLeave(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointerleave?.(e);
     tooltipContext?.hide();
-  };
-
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'GeoPath',
-      render,
-      events: {
-        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
-        click: onclick ? _onClick : undefined,
-        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
-        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
-        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
-        pointerdown: restProps.onpointerdown,
-        touchmove: restProps.ontouchmove,
-      },
-      deps: () => [
-        projection,
-        geojson,
-        curve,
-        fillKey.current,
-        strokeKey.current,
-        strokeWidth,
-        opacity,
-        className,
-      ],
-    });
   }
 </script>
 
 {#if children}
   {@render children({ geoPath })}
-{:else if renderCtx === 'svg'}
-  <path
-    bind:this={ref}
+{:else}
+  <Path
+    {pathData}
     {...restProps}
-    d={geojson ? geoPath?.(geojson) : ''}
-    {fill}
-    {stroke}
-    stroke-width={strokeWidth}
-    {opacity}
     onclick={_onClick}
-    onpointerenter={_onPointerEnter}
-    onpointermove={_onPointerMove}
-    onpointerleave={_onPointerLeave}
-    class={['lc-geo-path', className]}
+    onpointerenter={tooltipContext || onpointerenter ? _onPointerEnter : undefined}
+    onpointermove={tooltipContext || onpointermove ? _onPointerMove : undefined}
+    onpointerleave={tooltipContext || onpointerleave ? _onPointerLeave : undefined}
+    class={cls('lc-geo-path', className)}
+    pathRef={refProp}
   />
 {/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-geo-path)) {
-      --fill-color: transparent;
-      --stroke-color: initial;
-    }
-
-    /* Svg | Canvas layers */
-    :global(:where(.lc-layout-svg .lc-geo-path, svg.lc-geo-path):not([fill])) {
-      fill: var(--fill-color);
-    }
-    :global(:where(.lc-layout-svg .lc-geo-path, svg.lc-geo-path):not([stroke])) {
-      stroke: var(--stroke-color);
-    }
-  }
-</style>

package/dist/components/GeoPath.svelte.d.ts

@@ -1,9 +1,10 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { TooltipContextValue } from '../contexts/tooltip.js';
+import type { PathProps } from './Path.svelte';
 export type GeoPathPropsWithoutHTML = {
     /**
      * GeoJSON data to render
@@ -43,7 +44,7 @@ export type GeoPathPropsWithoutHTML = {
     children?: Snippet<[{
         geoPath: ReturnType<typeof geoCurvePath> | undefined;
     }]>;
-} & CommonStyleProps;
+} & CommonStyleProps & Pick<PathProps, 'motion' | 'draw' | 'marker' | 'markerStart' | 'markerMid' | 'markerEnd' | 'startContent' | 'endContent'>;
 export type GeoPathProps = GeoPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
 import { geoCurvePath } from '../utils/geo.js';
 declare const GeoPath: import("svelte").Component<GeoPathProps, {}, "ref">;

package/dist/components/GeoPoint.svelte

@@ -31,8 +31,8 @@
 
 <script lang="ts">
   import Group from './Group.svelte';
-  import { getRenderContext } from './Chart.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let { lat, long, ref: refProp = $bindable(), children, ...restProps }: GeoPointProps = $props();
@@ -48,10 +48,10 @@
   const x = $derived(points[0]);
   const y = $derived(points[1]);
 
-  const renderContext = getRenderContext();
+  const layerCtx = getLayerContext();
 </script>
 
-{#if renderContext === 'svg'}
+{#if layerCtx === 'svg'}
   {#if children}
     <Group {x} {y} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
       {@render children({ x, y })}
@@ -61,7 +61,7 @@
   {/if}
 {/if}
 
-{#if renderContext === 'canvas'}
+{#if layerCtx === 'canvas'}
   {#if children}
     <!-- TODO: Handle Canvas translation. Consolidate with svg use case above -->
     <!-- <Group {x} {y} {...$$restProps}> -->

package/dist/components/GeoSpline.svelte

@@ -35,21 +35,10 @@
 <script lang="ts">
   import { geoOrthographic, geoInterpolate } from 'd3-geo';
 
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
-  let {
-    link,
-    loft = 1.0,
-    curve = curveNatural,
-    pathRef: pathRefProp = $bindable(),
-    ...restProps
-  }: GeoSplineProps = $props();
-
-  let pathRef = $state<SVGPathElement>();
-  $effect.pre(() => {
-    pathRefProp = pathRef;
-  });
+  let { link, loft = 1.0, curve = curveNatural, ...restProps }: GeoSplineProps = $props();
 
   const geoCtx = getGeoContext();
 
@@ -76,7 +65,6 @@
 </script>
 
 <Spline
-  bind:pathRef
   data={[source, middle, target]}
   x={(d) => d[0]}
   y={(d) => d[1]}

package/dist/components/GeoSpline.svelte.d.ts

@@ -27,6 +27,6 @@ export type GeoSplinePropsWithoutHTML = {
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
 export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
-declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "pathRef">;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/GeoTile.svelte

@@ -44,11 +44,12 @@
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
-  import { getRenderContext, getChartContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let {
@@ -63,7 +64,7 @@
 
   const ctx = getChartContext();
   const geoCtx = getGeoContext();
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   const center = $derived(geoCtx.projection?.([0, 0]) ?? [0, 0]);
 
@@ -90,7 +91,7 @@
     }
   }
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'GeoTile',
       render,
@@ -99,7 +100,7 @@
   }
 </script>
 
-{#if renderCtx === 'svg' && url}
+{#if layerCtx === 'svg' && url}
   {#if children}
     {@render children({ tiles })}
   {:else}

package/dist/components/GeoVisible.svelte

@@ -12,7 +12,7 @@
 
 <script lang="ts">
   import { isVisible } from '../utils/geo.js';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getGeoContext } from '../contexts/geo.js';
 
   let { lat, long, children }: GeoVisibleProps = $props();
   const geoCtx = getGeoContext();