layerchart 2.0.0-next.37 → 2.0.0-next.39

package/dist/components/Spline.svelte

@@ -132,7 +132,6 @@
   import { getChartContext } from './Chart.svelte';
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -274,7 +273,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-spline-path', className),
           }
     );
   }
@@ -362,12 +361,7 @@
     <path
       d={tweenedState.current}
       {...restProps}
-      class={cls(
-        layerClass('spline-path'),
-        !fill && 'fill-none',
-        !stroke && 'stroke-surface-content',
-        className
-      )}
+      class={cls('lc-spline-path', className)}
       {fill}
       fill-opacity={fillOpacity}
       {stroke}
@@ -384,7 +378,7 @@
     <MarkerWrapper id={markerEndId} marker={markerEnd} />
 
     {#if startContent && startPoint}
-      <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
+      <Group x={startPoint.x} y={startPoint.y} class="lc-spline-g-start">
         {@render startContent({
           point: startPoint,
           value: {
@@ -396,7 +390,7 @@
     {/if}
 
     {#if endContent && endPoint.current}
-      <Group x={endPoint.current.x} y={endPoint.current.y} class={layerClass('spline-g-end')}>
+      <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-spline-g-end">
         {@render endContent({
           point: endPoint.current,
           value: {
@@ -408,3 +402,28 @@
     {/if}
   {/key}
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-spline-path)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-spline-path):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-spline-path):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Text.svelte

@@ -188,7 +188,6 @@
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
 
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
   import { degreesToRadians } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
 
@@ -411,7 +410,7 @@
             paintOrder: 'stroke',
             textAnchor,
           },
-          classes: cls(fill === undefined && 'fill-surface-content', className),
+          classes: cls('lc-text', className),
         };
 
     const computedStyles = getComputedStyles(ctx.canvas, styles);
@@ -473,13 +472,7 @@
 {#if renderCtx === 'svg'}
   <!-- `overflow: visible` allow contents to be shown outside element -->
   <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg
-    x={dx}
-    y={dy}
-    {...svgProps}
-    class={cls(layerClass('text-svg'), 'overflow-visible [paint-order:stroke]', svgProps?.class)}
-    bind:this={svgRef}
-  >
+  <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]} bind:this={svgRef}>
     {#if path}
       <defs>
         {#key path}
@@ -496,14 +489,14 @@
         stroke-width={strokeWidth}
         {opacity}
         transform={transformProp}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         <textPath
           style="text-anchor: {textAnchor};"
           dominant-baseline={dominantBaseline}
           href="#{pathId}"
           {startOffset}
-          class={cls(layerClass('text-path'))}
+          class="lc-text-path"
         >
           {wordsByLines.map((line) => line.words.join(' ')).join()}
         </textPath>
@@ -522,13 +515,13 @@
         {stroke}
         stroke-width={strokeWidth}
         {opacity}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         {#each wordsByLines as line, index}
           <tspan
             x={motionX.current}
             dy={index === 0 ? startDy : getPixelValue(lineHeight)}
-            class={layerClass('text-tspan')}
+            class="lc-text-tspan"
           >
             {line.words.join(' ')}
           </tspan>
@@ -536,4 +529,57 @@
       </text>
     {/if}
   </svg>
+{:else if renderCtx === 'html'}
+  {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+  {@const translateY =
+    verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+  <!-- TODO: How best to handle dx/dy when adjusted for svg style issues? -->
+  <!-- style:line-height={lineHeight} -->
+  <!-- TODO: How to handle fill-/stroke- vs bg-/text-/border- colors? -->
+  <div
+    style:position="absolute"
+    style:left="{dx + motionX.current}px"
+    style:top="{dy + motionY.current}px"
+    style:transform="translate({translateX}, {translateY}) rotate({rotate ?? 0}deg)"
+    style:transform-origin="{verticalAnchor === 'middle'
+      ? 'center'
+      : verticalAnchor === 'end'
+        ? 'bottom'
+        : 'top'}
+    {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+    class={['lc-text', className]}
+  >
+    {textValue}
+  </div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-text)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    :global(:where(.lc-text-svg)) {
+      overflow: visible;
+      paint-order: stroke;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([fill])) {
+      color: var(--fill-color);
+      fill: currentColor;
+    }
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-text):not([background-color])) {
+      color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-text):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/TileImage.svelte

@@ -135,7 +135,7 @@
     y={(y + ty) * scale - 0.5}
     width={scale + 1}
     height={scale + 1}
-    {...extractLayerProps(restProps, 'tile-image-lower')}
+    {...extractLayerProps(restProps, 'lc-tile-image-lower')}
   />
   <image
     {href}
@@ -143,7 +143,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    {...extractLayerProps(restProps, 'tile-image')}
+    {...extractLayerProps(restProps, 'lc-tile-image')}
   />
 {/key}
 {#if debug}
@@ -152,7 +152,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    class="stroke-danger/50 fill-none"
+    class="lc-tile-image-debug-rect"
   />
   <Text
     x={(x + tx) * scale}
@@ -161,6 +161,21 @@
     dx={2}
     dy={-2}
     value="{x}-{y}-{z}"
-    class="text-[8px] fill-black/50"
+    class="lc-tile-image-debug-text"
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-tile-image-debug-rect)) {
+      fill: none;
+      stroke: var(--color-danger, red);
+    }
+
+    :global(:where(.lc-tile-image-debug-text)) {
+      --fill-color: var(--color-danger, red);
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+</style>

package/dist/components/TransformContext.svelte

@@ -216,8 +216,6 @@
   import type { Without } from '../utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
   import {
     createControlledMotion,
     createMotionTracker,
@@ -519,9 +517,17 @@
   onpointerup={onPointerUp}
   ondblclick={onDoubleClick}
   onclickcapture={onClick}
-  class={cls(layerClass('transform-context'), 'h-full', className)}
+  class={['lc-transform-context', className]}
   bind:this={ref}
   {...restProps}
 >
   {@render children?.({ transformContext: transformContext })}
 </div>
+
+<style>
+  @layer base {
+    :where(.lc-transform-context) {
+      height: 100%;
+    }
+  }
+</style>

package/dist/components/TransformControls.svelte

@@ -32,7 +32,6 @@
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-  import { cls } from '@layerstack/tailwind';
 
   import LucideFocus from '~icons/lucide/focus';
   import LucideChevronDown from '~icons/lucide/chevron-down';
@@ -85,22 +84,9 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
-    orientation === 'vertical' && 'flex-col',
-    {
-      'top-left': 'absolute top-0 left-0',
-      top: 'absolute top-0 left-1/2 -translate-x-1/2',
-      'top-right': 'absolute top-0 right-0',
-      left: 'absolute top-1/2 left-0 -translate-y-1/2',
-      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-      right: 'absolute top-1/2 right-0 -translate-y-1/2',
-      'bottom-left': 'absolute bottom-0 left-0',
-      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0',
-    }[placement],
-    className
-  )}
+  class={['lc-transform-controls', className]}
+  data-orientation={orientation}
+  data-placement={placement}
   ondblclick={(e) => {
     // Stop from propagating to TransformContext
     e.stopPropagation();
@@ -173,3 +159,72 @@
     </Tooltip>
   {/if}
 </div>
+
+<style>
+  @layer components {
+    :where(.lc-transform-controls) {
+      display: flex;
+      background: color-mix(
+        in oklab,
+        var(--color-surface-300, light-dark(white, black)) 50%,
+        transparent
+      );
+      border: 1px solid
+        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
+      border-radius: 9999px;
+      margin: 4px;
+      backdrop-filter: blur(8px);
+      z-index: 10;
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+      }
+
+      &[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;
+      }
+    }
+  }
+</style>

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

@@ -25,10 +25,17 @@ export type TreeProps<T> = {
 };
 import { type HierarchyPointNode, type HierarchyPointLink, type HierarchyNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: TreeProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): TreeProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

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

@@ -58,10 +58,17 @@ export type TreemapProps<T> = {
 };
 import { treemapSquarify, type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: TreemapProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): TreemapProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/Voronoi.svelte

@@ -71,8 +71,6 @@
   import { getGeoContext } from './GeoContext.svelte';
   import CircleClipPath from './CircleClipPath.svelte';
 
-  import { layerClass } from '../utils/attributes.js';
-
   let {
     data,
     r,
@@ -118,7 +116,7 @@
   const disableClip = $derived(r === 0 || r == null || r === Infinity);
 </script>
 
-<Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<Group {...restProps} class={cls('lc-voronoi-g', classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
@@ -131,11 +129,7 @@
       >
         <GeoPath
           geojson={feature}
-          class={cls(
-            layerClass('voronoi-geo-path'),
-            'fill-transparent stroke-transparent',
-            classes.path
-          )}
+          class={['lc-voronoi-geo-path', classes.path]}
           onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
           onpointerenter={(e) =>
             onpointerenter?.(e, { data: feature.properties.site.data, feature })}
@@ -158,11 +152,7 @@
         <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
           <Spline
             {pathData}
-            class={cls(
-              layerClass('voronoi-path'),
-              'fill-transparent stroke-transparent',
-              classes.path
-            )}
+            class={['lc-voronoi-path', classes.path]}
             onclick={(e) => onclick?.(e, { data: point.data, point })}
             onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
             onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
@@ -178,3 +168,12 @@
     {/each}
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-voronoi-path, .lc-voronoi-geo-path)) {
+      fill: transparent;
+      stroke: transparent;
+    }
+  }
+</style>

package/dist/components/charts/ArcChart.svelte

@@ -124,7 +124,6 @@
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
-  import { SelectionState } from '@layerstack/svelte-state';
 
   import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
   import Chart from '../Chart.svelte';
@@ -133,7 +132,13 @@
   import Legend from '../Legend.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    getObjectOrNull,
+    resolveMaybeFn,
+    type Accessor,
+  } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
   import type {
     SeriesData,
@@ -141,7 +146,8 @@
     SimplifiedChartPropsObject,
     SimplifiedChartSnippet,
   } from './types.js';
-  import { HighlightKey } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import { getColorIfDefined } from '../../utils/color.js';
 
@@ -223,63 +229,32 @@
     });
   });
 
-  const selectedSeries = new SelectionState();
-
-  const visibleSeries = $derived(
-    series.filter((s) => selectedSeries.isEmpty() || selectedSeries.isSelected(s.key))
-  );
-
-  const allSeriesData = $derived(
-    visibleSeries
-      .flatMap((s) =>
-        s.data?.map((d) => {
-          return { seriesKey: s.key, ...d };
-        })
-      )
-      .filter((d) => d) as Array<TData & { stackData?: any }>
-  );
+  const seriesState = new SeriesState(() => series);
 
   const chartData = $derived(
-    allSeriesData.length ? allSeriesData : chartDataArray(data)
+    seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
   ) as Array<TData>;
 
-  const seriesColors = $derived(series.map((s) => s.color).filter((d) => d != null));
-
-  const highlightKey = new HighlightKey<TData, typeof Arc>();
-  const selectedKeys = new SelectionState();
-
   const visibleData = $derived(
     chartData.filter((d) => {
       const dataKey = keyAccessor(d);
-      return selectedKeys.isEmpty() || selectedKeys.isSelected(dataKey);
+      return seriesState.selectedKeys.isEmpty() || seriesState.selectedKeys.isSelected(dataKey);
     })
   );
 
   function getLegendProps(): ComponentProps<typeof Legend> {
-    return {
-      tickFormat: (tick) => {
-        const item = chartData.find((d) => keyAccessor(d) === tick);
-        return item ? (labelAccessor(item) ?? tick) : tick;
-      },
-      placement: 'bottom',
-      variant: 'swatches',
-      onclick: (e, item) => {
-        selectedKeys.toggle(item.value);
-        selectedSeries.toggle(item.value);
-      },
-      onpointerenter: (e, item) => (highlightKey.current = item.value),
-      onpointerleave: (e) => (highlightKey.current = null),
-      ...props.legend,
-      ...(typeof legend === 'object' ? legend : null),
-      classes: {
-        item: (item) =>
-          visibleData.length && !visibleData.some((d) => keyAccessor(d) === item.value)
-            ? 'opacity-50'
-            : '',
-        ...props.legend?.classes,
-        ...(typeof legend === 'object' ? legend.classes : null),
+    return createLegendProps({
+      seriesState,
+      props: {
+        tickFormat: (tick) => {
+          // Use data label instead of series label
+          const item = chartData.find((d) => keyAccessor(d) === tick);
+          return item ? (labelAccessor(item) ?? tick) : tick;
+        },
+        ...props.legend,
+        ...getObjectOrNull(legend),
       },
-    };
+    });
   }
 
   function getGroupProps(): ComponentProps<typeof Group> {
@@ -317,6 +292,7 @@
         multiSeries && (trackOuterRadius ?? 0) < 0 ? i * (trackOuterRadius ?? 0) : trackOuterRadius,
       fill: s.color ?? context.cScale?.(context.c(d)),
       track: { fill: s.color ?? context.cScale?.(context.c(d)), fillOpacity: 0.1 },
+      opacity: seriesState.isHighlighted(keyAccessor(d), true) ? 1 : 0.1,
       tooltipContext: context.tooltip,
       data: d,
       onclick: (e) => {
@@ -326,12 +302,7 @@
       },
       ...props.arc,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        highlightKey.current && highlightKey.current !== keyAccessor(d) && 'opacity-50',
-        props.arc?.class,
-        s.props?.class
-      ),
+      class: cls(props.arc?.class, s.props?.class),
     };
   }
 
@@ -357,7 +328,7 @@
       return key;
     },
     get visibleSeries() {
-      return visibleSeries;
+      return seriesState.visibleSeries;
     },
   });
 </script>
@@ -369,19 +340,19 @@
   x={value}
   {c}
   cDomain={chartData.map(keyAccessor)}
-  cRange={seriesColors.length
-    ? seriesColors
+  cRange={seriesState.allSeriesColors.length
+    ? seriesState.allSeriesColors
     : c !== key
       ? chartData.map((d) => cAccessor(d))
       : [
-          'var(--color-primary)',
-          'var(--color-secondary)',
-          'var(--color-info)',
-          'var(--color-success)',
-          'var(--color-warning)',
-          'var(--color-danger)',
+          'var(--color-primary, currentColor)',
+          'var(--color-secondary, currentColor)',
+          'var(--color-info, currentColor)',
+          'var(--color-success, currentColor)',
+          'var(--color-warning, currentColor)',
+          'var(--color-danger, currentColor)',
         ]}
-  padding={{ bottom: legend === true ? 32 : 0 }}
+  padding={{ bottom: legend ? 32 : 0 }}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -395,10 +366,10 @@
       color: cAccessor,
       context,
       series,
-      visibleSeries,
+      visibleSeries: seriesState.visibleSeries,
       visibleData,
-      highlightKey: highlightKey.current,
-      setHighlightKey: highlightKey.set,
+      highlightKey: seriesState.highlightKey.current,
+      setHighlightKey: seriesState.highlightKey.set,
       getLegendProps,
       getGroupProps,
       getArcProps,
@@ -452,8 +423,8 @@
                 value={valueAccessor(data)}
                 color={context.cScale?.(context.c(data))}
                 {format}
-                onpointerenter={() => (highlightKey.current = keyAccessor(data))}
-                onpointerleave={() => (highlightKey.current = null)}
+                onpointerenter={() => (seriesState.highlightKey.current = keyAccessor(data))}
+                onpointerleave={() => (seriesState.highlightKey.current = null)}
                 {...props.tooltip?.item}
               />
             </Tooltip.List>