layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/components/Grid.svelte

@@ -44,6 +44,12 @@
      */
     radialY?: 'circle' | 'linear';
 
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+
     /**
      * Classes to apply to the rendered elements.
      *
@@ -97,12 +103,15 @@
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
 
   const ctx = getChartContext();
 
+  // Mark as composite so child Splines (radial grid) don't register
+  ctx.registerComponent({ name: 'Grid', kind: 'composite-mark' });
+
   let {
     x = false,
     y = false,
@@ -110,6 +119,7 @@
     yTicks: yTicksProp,
     bandAlign = 'center',
     radialY = 'circle',
+    stroke,
     motion,
     transitionIn: transitionInProp,
     transitionInParams = { easing: cubicIn },
@@ -131,8 +141,8 @@
 
   const transitionIn = $derived((transitionInProp ?? tweenConfig?.options) ? fade : () => ({}));
 
-  const xTickVals = $derived(resolveTickVals(ctx.xScale, xTicks));
-  const yTickVals = $derived(resolveTickVals(ctx.yScale, yTicks));
+  const xTickVals = $derived(autoTickVals(ctx.xScale, xTicks));
+  const yTickVals = $derived(autoTickVals(ctx.yScale, yTicks));
 
   const xBandOffset = $derived(
     isScaleBand(ctx.xScale)
@@ -151,11 +161,11 @@
   );
 </script>
 
-<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls('lc-grid', classes.root, className)} {...restProps}>
   {#if x}
-    {@const splineProps = extractLayerProps(x, 'grid-x-line')}
+    {@const splineProps = extractLayerProps(x, 'lc-grid-x-line')}
 
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class="lc-grid-x">
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -165,94 +175,73 @@
             {y1}
             {x2}
             {y2}
+            {stroke}
             motion={tweenConfig}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-radial-line'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
           />
         {:else}
           <Rule
             {x}
             xOffset={xBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
 
       <!-- Add extra rule after last band -->
       {#if isScaleBand(ctx.xScale) && bandAlign === 'between' && !ctx.radial && xTickVals.length}
+        {@const x = ctx.xScale(xTickVals[xTickVals.length - 1])! + ctx.xScale.step() + xBandOffset}
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
+          {stroke}
           {motion}
           {...splineProps}
-          class={cls(
-            layerClass('grid-x-end-rule'),
-            'stroke-surface-content/10',
-            classes.line,
-            splineProps?.class
-          )}
+          class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
         />
       {/if}
     </Group>
   {/if}
 
   {#if y}
-    {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
+    {@const splineProps = extractLayerProps(y, 'lc-grid-y-line')}
+    <Group {transitionIn} {transitionInParams} class="lc-grid-y">
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
             <Circle
               r={ctx.yScale(y) + yBandOffset}
+              {stroke}
               {motion}
               {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-circle'),
-                'fill-none stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
+              class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
             />
           {:else}
             <Spline
               data={xTickVals.map((x) => ({ x, y }))}
               x="x"
               y="y"
+              {stroke}
               motion={tweenConfig}
               curve={curveLinearClosed}
               {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-line'),
-                'stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
+              class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
             />
           {/if}
         {:else}
-          <Rule
-            {y}
-            yOffset={yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={ctx.yScale(y) + yBandOffset}
+            x2={ctx.xRange[1]}
+            y2={ctx.yScale(y) + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
@@ -262,30 +251,56 @@
         {#if ctx.radial}
           <Circle
             r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-radial-circle'),
-              'fill-none stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
           />
         {:else}
-          <Rule
-            y={yTickVals[yTickVals.length - 1]}
-            yOffset={ctx.yScale.step() + yBandOffset}
+          {@const y =
+            ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={y}
+            x2={ctx.xRange[1]}
+            y2={y}
+            {stroke}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-end-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/if}
     </Group>
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(
+      :where(
+        .lc-grid-x-rule,
+        .lc-grid-x-end-rule,
+        .lc-grid-x-radial-line,
+        .lc-grid-y-rule,
+        .lc-grid-y-end-rule,
+        .lc-grid-y-radial-line
+      )
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-grid-y-radial-circle)) {
+      --fill-color: none;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+  }
+</style>

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

@@ -36,6 +36,11 @@ export type GridPropsWithoutHTML<In extends Transition = Transition> = {
      * @default 'circle'
      */
     radialY?: 'circle' | 'linear';
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
     /**
      * Classes to apply to the rendered elements.
      *

package/dist/components/Group.svelte

@@ -2,33 +2,53 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
   import type { Transition, TransitionParams, Without } from '../utils/types.js';
+  import type { DataProp } from '../utils/dataProp.js';
   import { createMotion, extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
 
   export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Translate x
+     * Translate x position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      */
-    x?: number;
+    x?: DataProp;
 
     /**
-     * Initial translate x
+     * Initial translate x (pixel mode only).
      *
      * @default x
      */
     initialX?: number;
 
     /**
-     * Translate y
+     * Translate y position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      */
-    y?: number;
+    y?: DataProp;
 
     /**
-     * Initial translate y
+     * Initial translate y (pixel mode only).
      *
      * @default y
      */
     initialY?: number;
 
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+
     /**
      * Center within chart
      *
@@ -83,24 +103,27 @@
   import { fade } from 'svelte/transition';
   import { cubicIn } from 'svelte/easing';
 
-  import { cls } from '@layerstack/tailwind';
-
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { untrack } from 'svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../contexts/chart.js';
+  import { createDataMotionMap } from '../utils/motion.svelte.js';
+  import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair } from '../utils/dataProp.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { chartDataArray } from '../utils/common.js';
 
-  import { getChartContext } from './Chart.svelte';
-  import { layerClass } from '../utils/attributes.js';
-
-  const ctx = getChartContext();
+  const chartCtx = getChartContext();
+  const geo = getGeoContext();
 
   let {
     x,
     initialX: initialXProp,
     y,
     initialY: initialYProp,
+    data: dataProp,
+    key: keyFn = (_: any, i: number) => i,
     center = false,
     preventTouchMove = false,
-    opacity = 1,
+    opacity = undefined,
     motion,
     transitionIn: transitionInProp,
     transitionInParams: transitionInParamsProp,
@@ -110,17 +133,76 @@
     ...restProps
   }: GroupProps = $props();
 
+  // Data mode detection: if any positional prop is a string or function
+  const dataMode = $derived(hasAnyDataProp(x, y));
+
+  // Data to iterate over in data mode
+  const resolvedData: any[] = $derived(
+    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
+  );
+
+  // Resolve a single data item to pixel coordinates
+  function resolveGroup(d: any) {
+    if (geo.projection) {
+      const [projX, projY] = resolveGeoDataPair(x, y, d, geo.projection);
+      return { x: projX, y: projY };
+    }
+    return {
+      x: resolveDataProp(x, d, chartCtx.xScale, 0),
+      y: resolveDataProp(y, d, chartCtx.yScale, 0),
+    };
+  }
+
+  // --- Data mode motion ---
+  const dataMotionMap = createDataMotionMap(motion);
+
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveGroup(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
+
+  // Single source of truth: resolved values with animated overlay
+  const resolvedItems = $derived.by(() => {
+    if (!dataMode) return [];
+    return resolvedData.map((d, i) => {
+      const key = keyFn(d, i);
+      const resolved = resolveGroup(d);
+      const animated = dataMotionMap?.get(key);
+      return {
+        d,
+        key,
+        x: animated?.x ?? resolved.x,
+        y: animated?.y ?? resolved.y,
+      };
+    });
+  });
+
+  // --- Pixel mode (motion only applies here) ---
   let ref = $state<Element>();
 
   $effect.pre(() => {
     refProp = ref;
   });
 
-  const initialX = initialXProp ?? x;
-  const initialY = initialYProp ?? y;
+  const initialX = initialXProp ?? (typeof x === 'number' ? x : undefined);
+  const initialY = initialYProp ?? (typeof y === 'number' ? y : undefined);
 
-  const trueX = $derived(x ?? (center === 'x' || center === true ? ctx.width / 2 : 0));
-  const trueY = $derived(y ?? (center === 'y' || center === true ? ctx.height / 2 : 0));
+  const trueX = $derived(
+    typeof x === 'number' ? x : (x == null && (center === 'x' || center === true) ? chartCtx.width / 2 : 0)
+  );
+  const trueY = $derived(
+    typeof y === 'number' ? y : (y == null && (center === 'y' || center === true) ? chartCtx.height / 2 : 0)
+  );
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);
 
@@ -137,30 +219,29 @@
     }
   });
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
+  if (layerCtx === 'canvas') {
+    chartCtx.registerComponent({
       name: 'Group',
-      render: (ctx) => {
-        const currentGlobalAlpha = ctx.globalAlpha;
-        ctx.globalAlpha = opacity;
-
-        ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
-
-        // Restore in case it was modified by `opacity`
-        ctx.globalAlpha = currentGlobalAlpha;
-      },
-      retainState: true,
-      events: {
-        click: restProps.onclick,
-        dblclick: restProps.ondblclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-        pointerdown: restProps.onpointerdown,
+      kind: 'group',
+      canvasRender: {
+        render: (ctx) => {
+          ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
+          if (opacity != null) {
+            ctx.globalAlpha *= opacity;
+          }
+        },
+        events: {
+          click: restProps.onclick,
+          dblclick: restProps.ondblclick,
+          pointerenter: restProps.onpointerenter,
+          pointermove: restProps.onpointermove,
+          pointerleave: restProps.onpointerleave,
+          pointerdown: restProps.onpointerdown,
+        },
+        deps: () => [motionX.current, motionY.current, opacity],
       },
-      deps: () => [motionX.current, motionY.current, opacity],
     });
   }
 
@@ -173,30 +254,66 @@
   };
 </script>
 
-{#if renderCtx === 'canvas'}
+{#if layerCtx === 'canvas'}
   {@render children?.()}
-{:else if renderCtx === 'svg'}
-  <g
-    style:transform
-    class={cls(layerClass('group-g'), className)}
-    in:transitionIn={transitionInParams}
-    {opacity}
-    {...restProps}
-    ontouchmove={handleTouchMove}
-    bind:this={ref}
-  >
-    {@render children?.()}
-  </g>
-{:else}
-  <div
-    bind:this={ref}
-    style:transform
-    style:opacity
-    in:transitionIn={transitionInParams}
-    {...restProps}
-    class={cls(layerClass('group-div'), 'absolute', className)}
-    ontouchmove={handleTouchMove}
-  >
-    {@render children?.()}
-  </div>
+{:else if layerCtx === 'svg'}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      <g
+        style:transform="translate({item.x}px, {item.y}px)"
+        class={['lc-group-g', className]}
+        {opacity}
+        {...restProps}
+        ontouchmove={handleTouchMove}
+      >
+        {@render children?.()}
+      </g>
+    {/each}
+  {:else}
+    <g
+      style:transform
+      class={['lc-group-g', className]}
+      in:transitionIn={transitionInParams}
+      {opacity}
+      {...restProps}
+      ontouchmove={handleTouchMove}
+      bind:this={ref}
+    >
+      {@render children?.()}
+    </g>
+  {/if}
+{:else if layerCtx === 'html'}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      <div
+        style:transform="translate({item.x}px, {item.y}px)"
+        style:opacity
+        {...restProps}
+        class={['lc-group-div', className]}
+        ontouchmove={handleTouchMove}
+      >
+        {@render children?.()}
+      </div>
+    {/each}
+  {:else}
+    <div
+      bind:this={ref}
+      style:transform
+      style:opacity
+      in:transitionIn={transitionInParams}
+      {...restProps}
+      class={['lc-group-div', className]}
+      ontouchmove={handleTouchMove}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}
+
+<style>
+  @layer base {
+    :where(.lc-group-div) {
+      position: absolute;
+    }
+  }
+</style>

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

@@ -1,28 +1,46 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Transition, TransitionParams, Without } from '../utils/types.js';
+import type { DataProp } from '../utils/dataProp.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
-     * Translate x
+     * Translate x position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
      */
-    x?: number;
+    x?: DataProp;
     /**
-     * Initial translate x
+     * Initial translate x (pixel mode only).
      *
      * @default x
      */
     initialX?: number;
     /**
-     * Translate y
+     * Translate y position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
      */
-    y?: number;
+    y?: DataProp;
     /**
-     * Initial translate y
+     * Initial translate y (pixel mode only).
      *
      * @default y
      */
     initialY?: number;
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
     /**
      * Center within chart
      *
@@ -62,10 +80,17 @@ export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     transitionInParams?: TransitionParams<In>;
 };
 export type GroupProps = GroupPropsWithoutHTML & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
+declare function $$render<T extends Transition = Transition>(): {
+    props: GroupProps;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends Transition = Transition> {
-    props(): GroupProps;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/Group.svelte.test.d.ts

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