layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/RadialGradient/RadialGradient.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type {
+    RadialGradientProps,
+    RadialGradientPropsWithoutHTML,
+  } from './RadialGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import RadialGradientSvg from './RadialGradient.svg.svelte';
+  import RadialGradientCanvas from './RadialGradient.canvas.svelte';
+  import type { RadialGradientProps } from './RadialGradient.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: RadialGradientProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RadialGradientSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <RadialGradientCanvas {...props} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { RadialGradientProps, RadialGradientPropsWithoutHTML, } from './RadialGradient.shared.svelte.js';
+import type { RadialGradientProps } from './RadialGradient.shared.svelte.js';
+declare const RadialGradient: import("svelte").Component<RadialGradientProps, {}, "">;
+type RadialGradient = ReturnType<typeof RadialGradient>;
+export default RadialGradient;

package/dist/components/RadialGradient/RadialGradient.svg.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  export type {
+    RadialGradientProps,
+    RadialGradientPropsWithoutHTML,
+  } from './RadialGradient.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { createId } from '../../utils/createId.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import type { RadialGradientProps } from './RadialGradient.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('radialGradient-', uid),
+    stops = ['var(--tw-gradient-from)', 'var(--tw-gradient-to)'],
+    cx = '50%',
+    cy = '50%',
+    fx = cx,
+    fy = cy,
+    r = '50%',
+    spreadMethod = 'pad',
+    transform = undefined,
+    units = 'objectBoundingBox',
+    children,
+    stopsContent,
+    class: className,
+    ...rest
+  }: RadialGradientProps = $props();
+</script>
+
+<defs>
+  <radialGradient
+    {id}
+    {cx}
+    {cy}
+    {fx}
+    {fy}
+    {r}
+    {spreadMethod}
+    gradientTransform={transform}
+    gradientUnits={units}
+    {...extractLayerProps({ ...rest, class: className }, 'lc-radial-gradient')}
+  >
+    {#if stopsContent}
+      {@render stopsContent()}
+    {:else if stops}
+      {@const stopClass = cls('lc-radial-gradient-stop', className)}
+      {#each stops as stop, i}
+        {#if Array.isArray(stop)}
+          <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />
+        {:else}
+          <stop
+            offset="{i * (100 / (stops.length - 1))}%"
+            stop-color={stop}
+            class={stopClass}
+          />
+        {/if}
+      {/each}
+    {/if}
+  </radialGradient>
+</defs>
+
+{@render children?.({ id, gradient: `url(#${id})` })}

package/dist/components/RadialGradient/RadialGradient.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RadialGradientProps, RadialGradientPropsWithoutHTML, } from './RadialGradient.shared.svelte.js';
+import type { RadialGradientProps } from './RadialGradient.shared.svelte.js';
+declare const RadialGradient: import("svelte").Component<RadialGradientProps, {}, "">;
+type RadialGradient = ReturnType<typeof RadialGradient>;
+export default RadialGradient;

package/dist/components/{Raster.svelte → Raster/Raster.base.svelte}

@@ -1,58 +1,12 @@
 <script lang="ts" module>
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { Accessor } from '../utils/common.js';
-  import type { InterpolateMethod } from '../utils/rasterInterpolate.js';
-
-  export type RasterPropsWithoutHTML = {
-    /**
-     * Input data. Interpretation depends on other props:
-     * - With `width`/`height`: flat array of grid values (row-major order)
-     * - With `value` accessor: array of objects with x/y/value properties (scattered data)
-     * - Without: uses chart context data for scattered interpolation
-     */
-    data?: number[] | Float64Array | any[];
-    /** Grid width (columns). When set, `data` is treated as a flat grid array. */
-    width?: number;
-    /** Grid height (rows). When set, `data` is treated as a flat grid array. */
-    height?: number;
-
-    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
-    x1?: number;
-    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
-    y1?: number;
-    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
-    x2?: number;
-    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
-    y2?: number;
-
-    /**
-     * Value channel. Interpretation depends on the type:
-     * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
-     * - `string | number | (d) => any`: accessor for scattered data interpolation
-     * @default 'value'
-     */
-    value?: Accessor | ((x: number, y: number) => number);
-
-    /** X accessor for scattered data. Defaults to chart context. */
-    x?: Accessor;
-    /** Y accessor for scattered data. Defaults to chart context. */
-    y?: Accessor;
-
-    /** Interpolation method for scattered data. @default 'barycentric' */
-    interpolate?: InterpolateMethod;
-
-    /** Pixel size (downsampling factor). Higher = fewer pixels, faster. @default 1 */
-    pixelSize?: number;
-    /** Gaussian blur radius applied to grid values. @default 0 */
-    blur?: number;
-
-    /** Image rendering quality hint. @default 'auto' */
-    imageRendering?: 'auto' | 'pixelated' | 'crisp-edges';
-  } & Pick<CommonStyleProps, 'opacity'>;
-
-  export type RasterProps = RasterPropsWithoutHTML &
-    Without<SVGAttributes<SVGImageElement>, RasterPropsWithoutHTML>;
+  import type { Component } from 'svelte';
+  import type { RasterProps } from './Raster.shared.svelte.js';
+
+  export type RasterBaseLayerComponents = {
+    Image: Component<any>;
+  };
+
+  export type RasterBaseProps = RasterProps & RasterBaseLayerComponents;
 </script>
 
 <script lang="ts">
@@ -62,17 +16,21 @@
   import { max, min } from 'd3-array';
   import { rgb } from 'd3-color';
 
-  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { gridCellCenterToBounds, resolveRasterBounds } from '../utils/index.js';
-  import { interpolateGrid } from '../utils/rasterInterpolate.js';
-  import Image from './Image.svelte';
+  import {
+    accessor as resolveAccessor,
+    chartDataArray,
+    type Accessor,
+  } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { gridCellCenterToBounds, resolveRasterBounds } from '../../utils/index.js';
+  import { interpolateGrid } from '../../utils/rasterInterpolate.js';
 
   const ctx = getChartContext();
   const geo = getGeoContext();
 
   let {
+    Image,
     data: dataProp,
     width: widthProp,
     height: heightProp,
@@ -90,9 +48,8 @@
     opacity,
     class: className,
     ...restProps
-  }: RasterProps = $props();
+  }: RasterBaseProps = $props();
 
-  // Detect grid mode: data + width/height
   const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
   const hasExplicitBounds = $derived(
     x1Prop !== undefined || y1Prop !== undefined || x2Prop !== undefined || y2Prop !== undefined
@@ -104,7 +61,6 @@
     !!(geo.projection && geo.projection.invert && isGridMode && hasExplicitBounds)
   );
 
-  // Register as composite-mark with markInfo for grid mode domain participation
   ctx.registerComponent({
     name: 'Raster',
     kind: 'composite-mark',
@@ -121,27 +77,23 @@
     },
   });
 
-  // Grid dimensions (accounting for pixelSize downsampling)
   const gridW = $derived(widthProp ?? Math.max(1, Math.ceil(ctx.width / pixelSize)));
   const gridH = $derived(heightProp ?? Math.max(1, Math.ceil(ctx.height / pixelSize)));
 
-  // Scale factors from grid to chart pixel coordinates
   const scaleX = $derived(ctx.width / gridW);
   const scaleY = $derived(ctx.height / gridH);
-
   const rasterScaleX = $derived(gridW / ctx.width);
   const rasterScaleY = $derived(gridH / ctx.height);
 
-  // Resolve grid values
   const sourceGridValues = $derived.by(() => {
     if (!ctx.width || !ctx.height) return new Float64Array(0);
 
-    // Mode 1: Grid data (flat array + width/height)
     if (isGridMode) {
-      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
+      return dataProp instanceof Float64Array
+        ? dataProp
+        : Float64Array.from(dataProp as number[]);
     }
 
-    // Mode 2: Continuous function
     if (typeof valueProp === 'function' && valueProp.length >= 2) {
       const fn = valueProp as (x: number, y: number) => number;
       const grid = new Float64Array(gridW * gridH);
@@ -159,7 +111,6 @@
       return grid;
     }
 
-    // Mode 3: Scattered data
     const chartData = dataProp ? (dataProp as any[]) : chartDataArray(ctx.data);
     if (!chartData || chartData.length === 0) return new Float64Array(0);
 
@@ -201,11 +152,9 @@
     if (useProjectedGridSampling) {
       return interpolateGrid(projectedGridPoints, gridW, gridH, interpolateMethod);
     }
-
     return sourceGridValues;
   });
 
-  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
   const colorScale = $derived.by(() => {
     const validValues = rasterValues.filter((v) => !isNaN(v));
     const minValue = min(validValues) ?? 0;
@@ -217,13 +166,11 @@
     return scaleSequential([minValue, maxValue], interpolateYlGnBu);
   });
 
-  // Pre-compute color lookup table (256 entries) for fast pixel mapping
   const LUT_SIZE = 256;
   const colorLut = $derived.by(() => {
     const lut = new Uint8ClampedArray(LUT_SIZE * 4);
     for (let i = 0; i < LUT_SIZE; i++) {
       const t = i / (LUT_SIZE - 1);
-      // Map through the color scale's domain
       const [lo, hi] = colorScale.domain();
       const value = lo + t * (hi - lo);
       const c = rgb(String(colorScale(value)));
@@ -267,7 +214,6 @@
     };
   });
 
-  // Generate image data URL via offscreen canvas
   const imageDataUrl = $derived.by(() => {
     if (typeof document === 'undefined') return '';
     if (rasterValues.length === 0 || gridW <= 0 || gridH <= 0) return '';

package/dist/components/Raster/Raster.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { RasterProps } from './Raster.shared.svelte.js';
+export type RasterBaseLayerComponents = {
+    Image: Component<any>;
+};
+export type RasterBaseProps = RasterProps & RasterBaseLayerComponents;
+declare const Raster: Component<RasterBaseProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;

package/dist/components/Raster/Raster.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RasterBase from './Raster.base.svelte';
+  import Image from '../Image/Image.canvas.svelte';
+  import type { RasterProps } from './Raster.shared.svelte.js';
+
+  let props: RasterProps = $props();
+</script>
+
+<RasterBase {Image} {...props} />

package/dist/components/Raster/Raster.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+import type { RasterProps } from './Raster.shared.svelte.js';
+declare const Raster: import("svelte").Component<RasterProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;

package/dist/components/Raster/Raster.html.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RasterBase from './Raster.base.svelte';
+  import Image from '../Image/Image.html.svelte';
+  import type { RasterProps } from './Raster.shared.svelte.js';
+
+  let props: RasterProps = $props();
+</script>
+
+<RasterBase {Image} {...props} />

package/dist/components/Raster/Raster.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+import type { RasterProps } from './Raster.shared.svelte.js';
+declare const Raster: import("svelte").Component<RasterProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;

package/dist/components/Raster/Raster.shared.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { Accessor } from '../../utils/common.js';
+import type { InterpolateMethod } from '../../utils/rasterInterpolate.js';
+export type RasterPropsWithoutHTML = {
+    data?: number[] | Float64Array | any[];
+    width?: number;
+    height?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    /** @default 'value' */
+    value?: Accessor | ((x: number, y: number) => number);
+    x?: Accessor;
+    y?: Accessor;
+    /** @default 'barycentric' */
+    interpolate?: InterpolateMethod;
+    /** @default 1 */
+    pixelSize?: number;
+    /** @default 0 */
+    blur?: number;
+    /** @default 'auto' */
+    imageRendering?: 'auto' | 'pixelated' | 'crisp-edges';
+} & Pick<CommonStyleProps, 'opacity'>;
+export type RasterProps = RasterPropsWithoutHTML & Without<SVGAttributes<SVGImageElement>, RasterPropsWithoutHTML>;

package/dist/components/Raster/Raster.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Raster/Raster.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import RasterSvg from './Raster.svg.svelte';
+  import RasterCanvas from './Raster.canvas.svelte';
+  import RasterHtml from './Raster.html.svelte';
+  import type { RasterProps } from './Raster.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: RasterProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <RasterSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <RasterCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <RasterHtml {...props} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+import type { RasterProps } from './Raster.shared.svelte.js';
+declare const Raster: import("svelte").Component<RasterProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;

package/dist/components/Raster/Raster.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RasterBase from './Raster.base.svelte';
+  import Image from '../Image/Image.svg.svelte';
+  import type { RasterProps } from './Raster.shared.svelte.js';
+
+  let props: RasterProps = $props();
+</script>
+
+<RasterBase {Image} {...props} />

package/dist/components/Raster/Raster.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RasterProps, RasterPropsWithoutHTML } from './Raster.shared.svelte.js';
+import type { RasterProps } from './Raster.shared.svelte.js';
+declare const Raster: import("svelte").Component<RasterProps, {}, "">;
+type Raster = ReturnType<typeof Raster>;
+export default Raster;

package/dist/components/Rect/Rect.canvas.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+  export type {
+    RectProps,
+    RectPropsWithoutHTML,
+  } from './Rect.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { renderRect, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import { RectState, rectMarkInfo, type RectProps } from './Rect.shared.svelte.js';
+
+  let { ...rest }: RectProps = $props();
+
+  const c = new RectState(() => rest as RectProps);
+
+  function getStyleOptions(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge(
+          {
+            styles: { strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth },
+          },
+          styleOverrides
+        )
+      : {
+          // Use raw `rest.fill` / `rest.stroke` (not `staticFill`) so canvas
+          // accepts non-string values like `CanvasPattern` / `CanvasGradient`
+          // produced by `<Pattern>` / `<LinearGradient>`. `staticFill` is
+          // string-only for the SVG/HTML pixel-mode templates.
+          styles: {
+            fill: itemFill ?? (rest.fill as any),
+            fillOpacity: itemFillOpacity ?? c.staticFillOpacity,
+            stroke: itemStroke ?? (rest.stroke as any),
+            strokeOpacity: itemStrokeOpacity ?? c.staticStrokeOpacity,
+            strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
+            opacity: itemOpacity ?? c.staticOpacity,
+          },
+          classes: cls('lc-rect', itemClass ?? c.staticClassName),
+          style:
+            [
+              (rest as any).style as string | undefined,
+              c.dashArrayAttr ? `stroke-dasharray: ${c.dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (c.dataMode) {
+      for (const item of c.resolvedItems) {
+        const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d);
+        const resolvedStrokeOpacity = resolveStyleProp(rest.strokeOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(rest.opacity, item.d);
+        const resolvedClass = resolveStyleProp(rest.class, item.d);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderRect(
+          ctx,
+          {
+            x: item.x,
+            y: item.y,
+            width: item.width,
+            height: item.height,
+            rx: c.rx,
+            ry: c.ry,
+          },
+          styleOpts
+        );
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderRect(
+        ctx,
+        {
+          x: c.motionX,
+          y: c.motionY,
+          width: c.motionWidth,
+          height: c.motionHeight,
+          rx: c.rx,
+          ry: c.ry,
+          corners: c.resolvedCorners,
+        },
+        styleOpts
+      );
+    }
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Rect',
+    kind: 'mark',
+    markInfo: () => rectMarkInfo(rest as RectProps, c.dataMode),
+    canvasRender: {
+      render,
+      events: {
+        click: (rest as any).onclick,
+        dblclick: (rest as any).ondblclick,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+        pointerover: (rest as any).onpointerover,
+        pointerout: (rest as any).onpointerout,
+      },
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        c.motionX,
+        c.motionY,
+        c.motionWidth,
+        c.motionHeight,
+        fillKey.current,
+        strokeKey.current,
+        rest.fillOpacity,
+        rest.strokeOpacity,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+        (rest as any).style,
+        c.rx,
+        c.ry,
+        c.resolvedCorners,
+        c.dashArrayAttr,
+      ],
+    },
+  });
+</script>

package/dist/components/Rect/Rect.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { RectProps, RectPropsWithoutHTML, } from './Rect.shared.svelte.js';
+import { type RectProps } from './Rect.shared.svelte.js';
+declare const Rect: import("svelte").Component<RectProps, {}, "">;
+type Rect = ReturnType<typeof Rect>;
+export default Rect;