layerchart 2.0.0-next.4 → 2.0.0-next.41

package/dist/components/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { Placement } from './types.js';
-  import type { Without } from '../utils/types.js';
+  import { asAny, type Without } from '../utils/types.js';
 
   export type LegendItem = {
     value: any;
@@ -37,7 +37,7 @@
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -65,10 +65,6 @@
      */
     orientation?: 'horizontal' | 'vertical';
 
-    onclick?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
-
     /**
      * Determine display ramp (individual color swatches or continuous ramp)
      *
@@ -76,6 +72,11 @@
      */
     variant?: 'ramp' | 'swatches';
 
+    /**
+     * An array of selected items. If provided, the legend fades unselected items.
+     */
+    selected?: string[];
+
     /**
      * Classes to apply to the elements.
      *
@@ -86,11 +87,15 @@
       title?: string;
       label?: string;
       tick?: string;
-      swatches?: string;
+      items?: string;
       swatch?: string;
-      item?: (item: LegendItem) => string;
+      item?: string | ((item: LegendItem) => string);
     };
 
+    onclick?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
+
     /**
      * A bindable reference to the wrapping `<div>` element.
      *
@@ -110,13 +115,14 @@
   import { scaleBand, scaleLinear } from 'd3-scale';
   import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
   import { quantile, range } from 'd3-array';
-  import { format, type FormatType } from '@layerstack/utils';
+  import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
 
   import ColorRamp from './ColorRamp.svelte';
   import { cls } from '@layerstack/tailwind';
   import type { AnyScale } from '../utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { resolveMaybeFn } from '../utils/common.js';
 
   let {
     scale: scaleProp,
@@ -134,6 +140,7 @@
     onpointerenter,
     onpointerleave,
     variant = 'ramp',
+    selected = [],
     classes = {},
     ref: refProp = $bindable(),
     class: className,
@@ -245,6 +252,7 @@
       const tickValues = range(thresholds.length);
       const tickFormat = (i: number) => {
         const value = thresholds[i];
+        // @ts-expect-error - improve types
         return tickFormatProp ? format(value, tickFormatProp) : value;
       };
 
@@ -295,29 +303,9 @@
   bind:this={ref}
   {...restProps}
   data-placement={placement}
-  class={cls(
-    layerClass('legend-container'),
-    'inline-block',
-    'z-1', // stack above tooltip context layers (band rects, voronoi, ...)
-    placement && [
-      'absolute',
-      {
-        'top-left': 'top-0 left-0',
-        top: 'top-0 left-1/2 -translate-x-1/2',
-        'top-right': 'top-0 right-0',
-        left: 'top-1/2 left-0 -translate-y-1/2',
-        center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-        right: 'top-1/2 right-0 -translate-y-1/2',
-        'bottom-left': 'bottom-0 left-0',
-        bottom: 'bottom-0 left-1/2 -translate-x-1/2',
-        'bottom-right': 'bottom-0 right-0',
-      }[placement],
-    ],
-    className,
-    classes.root
-  )}
+  class={cls('lc-legend-container', className, classes.root)}
 >
-  <div class={cls(layerClass('legend-title'), 'text-[10px] font-semibold', classes.title)}>
+  <div class={cls('lc-legend-title', classes.title)}>
     {title}
   </div>
   {#if children}
@@ -330,37 +318,34 @@
       {width}
       height={height + tickLengthProp + tickFontSize}
       viewBox="0 0 {width} {height + tickLengthProp + tickFontSize}"
-      class={cls(layerClass('legend-ramp-svg'), 'overflow-visible')}
+      class={cls('lc-legend-ramp-svg')}
     >
-      <g class={layerClass('legend-ramp-g')}>
+      <g class="lc-legend-ramp-g">
         {#if scaleConfig.interpolator}
           <ColorRamp
             {width}
             {height}
             interpolator={scaleConfig.interpolator}
-            class={layerClass('legend-color-ramp')}
+            class="lc-legend-color-ramp"
           />
         {:else if scaleConfig.swatches}
           {#each scaleConfig.swatches as swatch, i}
-            <rect {...extractLayerProps(swatch, 'legend-swatch')} />
+            <rect {...extractLayerProps(swatch, 'lc-legend-ramp-swatch')} />
           {/each}
         {/if}
       </g>
 
-      <g class={layerClass('legend-tick-group')}>
+      <g class="lc-legend-tick-group">
         {#each tickValuesProp ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick, i}
           <text
             text-anchor="middle"
             x={scaleConfig.xScale?.(tick) + scaleConfig.tickLabelOffset}
             y={height + tickLengthProp + tickFontSize}
             style:font-size={tickFontSize}
-            class={cls(
-              layerClass('legend-tick-text'),
-              'text-[10px] fill-surface-content',
-              classes.label
-            )}
+            class={cls('lc-legend-tick-text', classes.label)}
           >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </text>
 
           {#if scaleConfig.tickLine}
@@ -369,50 +354,138 @@
               y1={0}
               x2={scaleConfig.xScale?.(tick)}
               y2={height + tickLengthProp}
-              class={cls(layerClass('legend-tick-line'), 'stroke-surface-content', classes.tick)}
+              class={cls('lc-legend-tick-line', classes.tick)}
             />
           {/if}
         {/each}
       </g>
     </svg>
   {:else if variant === 'swatches'}
-    <div
-      class={cls(
-        layerClass('legend-swatch-group'),
-        'flex gap-x-4 gap-y-1',
-        orientation === 'vertical' && 'flex-col',
-        classes.swatches
-      )}
-    >
+    <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
       {#each scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick}
         {@const color = scale?.(tick) ?? ''}
         {@const item = { value: tick, color }}
         <button
-          class={cls(
-            layerClass('legend-swatch-button'),
-            'flex gap-1',
-            !onclick && 'cursor-auto',
-            classes.item?.(item)
-          )}
+          class={cls('lc-legend-swatch-button', resolveMaybeFn(classes?.item, item))}
+          style:opacity={selected.length === 0 || selected.includes(tick) ? 1 : 0.3}
           onclick={(e) => onclick?.(e, item)}
           onpointerenter={(e) => onpointerenter?.(e, item)}
           onpointerleave={(e) => onpointerleave?.(e, item)}
         >
-          <div
-            class={cls(layerClass('legend-swatch'), 'h-4 w-4 rounded-full', classes.swatch)}
-            style:background-color={color}
-          ></div>
-          <div
-            class={cls(
-              layerClass('legend-swatch-label'),
-              'text-xs text-surface-content whitespace-nowrap',
-              classes.label
-            )}
-          >
-            {tickFormatProp ? format(tick, tickFormatProp) : tick}
+          <div class={cls('lc-legend-swatch', classes.swatch)} style:background-color={color}></div>
+          <div class={cls('lc-legend-swatch-label', classes.label)}>
+            <!-- @ts-expect-error - improve types -->
+            {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </div>
         </button>
       {/each}
     </div>
   {/if}
 </div>
+
+<style>
+  @layer components {
+    :where(.lc-legend-container) {
+      display: inline-block;
+      z-index: 1; /*stack above tooltip context layers (band rects, voronoi, ...) */
+
+      &[data-placement] {
+        position: absolute;
+      }
+
+      &[data-placement='top-left'] {
+        top: 0;
+        left: 0;
+      }
+      &[data-placement='top'] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='top-right'] {
+        top: 0;
+        right: 0;
+      }
+      &[data-placement='left'] {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='center'] {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &[data-placement='right'] {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='bottom-left'] {
+        bottom: 0;
+        left: 0;
+      }
+      &[data-placement='bottom'] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='bottom-right'] {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    :where(.lc-legend-title) {
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    :where(.lc-legend-ramp-svg) {
+      overflow: visible;
+    }
+
+    :where(.lc-legend-tick-text) {
+      font-size: 10px;
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-legend-tick-line) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-legend-swatch-group) {
+      display: flex;
+      gap: 0.25rem 1rem;
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+      }
+    }
+
+    :where(.lc-legend-swatch-button) {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    :where(.lc-legend-swatch) {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      border-radius: 9999px; /* full */
+    }
+
+    :where(.lc-legend-swatch-label) {
+      font-size: 0.75rem; /* text-xs */
+      line-height: calc(1 / 0.75);
+      color: var(--color-surface-content, currentColor);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Placement } from './types.js';
-import type { Without } from '../utils/types.js';
+import { type Without } from '../utils/types.js';
 export type LegendItem = {
     value: any;
     color: string;
@@ -30,7 +30,7 @@ export type LegendPropsWithoutHTML = {
      * @default width / 64
      */
     ticks?: number;
-    tickFormat?: FormatType;
+    tickFormat?: FormatType | FormatConfig;
     tickValues?: any[];
     /**
      * The font size of the tick labels.
@@ -54,15 +54,16 @@ export type LegendPropsWithoutHTML = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
-    onclick?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
     /**
      * Determine display ramp (individual color swatches or continuous ramp)
      *
      * @default 'ramp'
      */
     variant?: 'ramp' | 'swatches';
+    /**
+     * An array of selected items. If provided, the legend fades unselected items.
+     */
+    selected?: string[];
     /**
      * Classes to apply to the elements.
      *
@@ -73,10 +74,13 @@ export type LegendPropsWithoutHTML = {
         title?: string;
         label?: string;
         tick?: string;
-        swatches?: string;
+        items?: string;
         swatch?: string;
-        item?: (item: LegendItem) => string;
+        item?: string | ((item: LegendItem) => string);
     };
+    onclick?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
     /**
      * A bindable reference to the wrapping `<div>` element.
      *
@@ -90,7 +94,7 @@ export type LegendPropsWithoutHTML = {
 };
 export type LegendProps = LegendPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, LegendPropsWithoutHTML>;
 import type { HTMLAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { AnyScale } from '../utils/scales.svelte.js';
 declare const Legend: import("svelte").Component<LegendProps, {}, "ref">;
 type Legend = ReturnType<typeof Legend>;

package/dist/components/Line.svelte

@@ -4,6 +4,7 @@
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import MarkerWrapper, { type MarkerOptions } from './MarkerWrapper.svelte';
   import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { pointsToAngleAndLength } from '../utils/math.js';
 
   export type LinePropsWithoutHTML = {
     /**
@@ -98,7 +99,6 @@
 
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -148,7 +148,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-line', className),
           }
     );
   }
@@ -195,10 +195,47 @@
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-    class={cls(layerClass('line'), stroke === undefined && 'stroke-surface-content', className)}
+    class={cls('lc-line', className)}
     {...restProps}
   />
   <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
   <MarkerWrapper id={markerMidId} marker={markerMid ?? marker} />
   <MarkerWrapper id={markerEndId} marker={markerEnd ?? marker} />
+{:else if renderCtx === 'html'}
+  {@const { angle, length } = pointsToAngleAndLength(
+    { x: motionX1.current, y: motionY1.current },
+    { x: motionX2.current, y: motionY2.current }
+  )}
+  <!-- STYLE-TODO: Should html use stroke for fill? -->
+  <div
+    style:position="absolute"
+    style:left="{motionX1.current}px"
+    style:top="{motionY1.current}px"
+    style:width="{length}px"
+    style:height="{strokeWidth ?? 1}px"
+    style:transform="translateY(-50%) rotate({angle}deg)"
+    style:transform-origin="0 50%"
+    style:opacity
+    style:background-color={stroke}
+    class={cls('lc-line', className)}
+    style={restProps.style}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-line, svg.lc-line):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-line):not([background-color])) {
+      background-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/LinearGradient.svelte

@@ -81,7 +81,7 @@
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -113,6 +113,35 @@
 
   let canvasGradient = $state<CanvasGradient>();
 
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      // Use direction keywords when no rotation is specified
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+
   function render(_ctx: CanvasRenderingContext2D) {
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
     const _stops = stops.map((stop, i) => {
@@ -170,7 +199,7 @@
       {y2}
       gradientTransform={rotate ? `rotate(${rotate})` : ''}
       gradientUnits={units}
-      {...extractLayerProps(restProps, 'linear-gradient')}
+      {...extractLayerProps(restProps, 'lc-linear-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent?.()}
@@ -180,13 +209,13 @@
             <stop
               offset={stop[0]}
               stop-color={stop[1]}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {:else}
             <stop
               offset="{i * (100 / (stops.length - 1))}%"
               stop-color={stop}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {/if}
         {/each}
@@ -195,4 +224,6 @@
   </defs>
 
   {@render children?.({ id, gradient: `url(#${id})` })}
+{:else if renderCtx === 'html'}
+  {@render children?.({ id, gradient: createCSSGradient() })}
 {/if}

package/dist/components/Link.svelte

@@ -173,5 +173,5 @@ TODO:
   {type}
   {curve}
   {sweep}
-  {...extractLayerProps(restProps, 'link')}
+  {...extractLayerProps(restProps, 'lc-link')}
 />

package/dist/components/Marker.svelte

@@ -73,7 +73,6 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -104,39 +103,51 @@
     {refX}
     {refY}
     {viewBox}
+    data-type={type}
     {...restProps}
-    class={cls(
-      layerClass('marker'),
-      'overflow-visible',
-      // stroke
-      restProps.stroke == null &&
-        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
-          ? 'stroke-[context-stroke]'
-          : type === 'circle'
-            ? 'stroke-surface-100'
-            : 'stroke-none'),
-      // extra stroke attrs
-      '[stroke-linecap:round] [stroke-linejoin:round]',
-      //fill
-      restProps.fill == null &&
-        (['triangle', 'dot', 'circle'].includes(type ?? '')
-          ? 'fill-[context-stroke]'
-          : type === 'circle-stroke'
-            ? 'fill-surface-100'
-            : 'fill-none'),
-      className
-    )}
+    class={cls('lc-marker', className)}
   >
     {#if children}
       {@render children()}
     {:else if type === 'triangle'}
-      <path d="M 0 0 L 10 5 L 0 10 z" class={layerClass('marker-triangle')} />
+      <path d="M 0 0 L 10 5 L 0 10 z" class="lc-marker-triangle" />
     {:else if type === 'arrow'}
-      <polyline points="0 0, 10 5, 0 10" class={layerClass('marker-arrow')} />
+      <polyline points="0 0, 10 5, 0 10" class="lc-marker-arrow" />
     {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
-      <circle cx={5} cy={5} r={5} class={layerClass('marker-circle')} />
+      <circle cx={5} cy={5} r={5} class="lc-marker-circle" />
     {:else if type === 'line'}
-      <polyline points="5 0, 5 10" class={layerClass('marker-line')} />
+      <polyline points="5 0, 5 10" class="lc-marker-line" />
     {/if}
   </marker>
 </defs>
+
+<style>
+  @layer base {
+    :global(:where(.lc-marker)) {
+      overflow: visible;
+
+      &[data-type='arrow'],
+      &[data-type='circle-stroke'],
+      &[data-type='line'] {
+        fill: none;
+        stroke: context-stroke;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      &[data-type='circle'] {
+        stroke: var(--color-surface-100, light-dark(white, black));
+      }
+
+      &[data-type='triangle'],
+      &[data-type='dot'],
+      &[data-type='circle'] {
+        fill: context-stroke;
+      }
+
+      &[data-type='circle-stroke'] {
+        fill: var(--color-surface-100, light-dark(white, black));
+      }
+    }
+  }
+</style>