layerchart 1.0.6 → 2.0.0-next.0

package/dist/components/Arc.svelte

@@ -80,6 +80,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = 'none';
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -221,9 +222,10 @@
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
-  fill-opacity={fillOpacity}
+  {fillOpacity}
   {stroke}
   stroke-width={strokeWidth}
+  {opacity}
   class={className}
   {...$$restProps}
   {onclick}

package/dist/components/Area.svelte

@@ -61,6 +61,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -166,7 +167,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -178,7 +179,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    fillKey && fillOpacity && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -228,6 +229,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     {...$$restProps}
     class={cls('path-area', className)}
     on:click={onclick}

package/dist/components/Bar.svelte

@@ -5,8 +5,6 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -37,8 +35,10 @@
   export let y1: Accessor = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
+  export let opacity: number | undefined = undefined;
   export let radius = 0;
 
   /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
@@ -113,19 +113,18 @@
       z`
     .split('\n')
     .join('');
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
 </script>
 
 {#if _rounded === 'all' || _rounded === 'none' || radius === 0}
   <Rect
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
     rx={_rounded === 'none' ? 0 : radius}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}
@@ -138,10 +137,12 @@
   <Spline
     {pathData}
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}

package/dist/components/Bars.svelte

@@ -38,6 +38,8 @@
   export let strokeWidth = 0;
   export let radius = 0;
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
   export let insets: Insets | undefined = undefined;
@@ -64,8 +66,10 @@
         {x1}
         {y1}
         fill={fill ?? ($config.c ? $cGet(d) : null)}
+        {fillOpacity}
         {stroke}
         {strokeWidth}
+        {opacity}
         {radius}
         {insets}
         {spring}

package/dist/components/Circle.svelte

@@ -26,6 +26,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -59,7 +60,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -78,6 +79,7 @@
       fillOpacity &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -114,6 +116,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}

package/dist/components/GeoPath.svelte

@@ -24,6 +24,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /**
    * Tooltip context to setup pointer events to show tooltip for related data
@@ -87,7 +88,7 @@
         styleOverrides
           ? merge({ styles: { strokeWidth } }, styleOverrides)
           : {
-              styles: { fill, stroke, strokeWidth },
+              styles: { fill, stroke, strokeWidth, opacity },
               classes: className,
             }
       );
@@ -100,7 +101,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when geojson, projection, or class change
-    geojson && _projection && fillKey && strokeKey && strokeWidth && className;
+    geojson && _projection && fillKey && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -153,6 +154,7 @@
       {fill}
       {stroke}
       stroke-width={strokeWidth}
+      {opacity}
       on:click={_onClick}
       on:pointerenter={_onPointerEnter}
       on:pointermove={_onPointerMove}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         fill?: string | undefined | undefined;
         stroke?: string | undefined | undefined;
         strokeWidth?: number | undefined | undefined;
+        opacity?: number | undefined | undefined;
         tooltip?: TooltipContextValue | undefined;
         onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath>) => void) | undefined | undefined;
         onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;

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

@@ -8,6 +8,7 @@ declare const __propDef: {
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
             strokeWidth?: number | undefined | undefined;
+            opacity?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
             onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
             onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
@@ -25,6 +26,7 @@ declare const __propDef: {
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
             strokeWidth?: number | undefined | undefined;
+            opacity?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
             onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
             onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;

package/dist/components/Highlight.svelte

@@ -412,7 +412,7 @@
           strokeWidth={6}
           {...typeof points === 'object' ? points : null}
           class={cls(
-            'stroke-white [paint-order:stroke] drop-shadow',
+            'stroke-white [paint-order:stroke] drop-shadow-sm',
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}

package/dist/components/Legend.svelte

@@ -140,7 +140,7 @@
   {...$$restProps}
   class={cls(
     'inline-block',
-    'z-[1]', // stack above tooltip context layers (band rects, voronoi, ...)
+    'z-1', // stack above tooltip context layers (band rects, voronoi, ...)
     placement && [
       'absolute',
       {

package/dist/components/Line.svelte

@@ -28,6 +28,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -79,7 +80,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, stroke, strokeWidth },
+            styles: { fill, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -98,6 +99,7 @@
       fillKey &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -133,6 +135,7 @@
     {fill}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     class={cls(stroke === undefined && 'stroke-surface-content', className)}

package/dist/components/LinearGradient.svelte

@@ -29,6 +29,9 @@
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const { width, height, padding } = chartContext();
 
   const renderContext = getRenderContext();
@@ -42,13 +45,13 @@
       if (Array.isArray(stop)) {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop[1] },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: parsePercent(stop[0]), color: fill };
       } else {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: i / (stops.length - 1), color: fill };
       }
@@ -68,8 +71,7 @@
   }
 
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    x1 && y1 && x2 && y2 && stops;
+    x1 && y1 && x2 && y2 && stops && className;
     canvasContext.invalidate();
   }
 
@@ -103,9 +105,13 @@
         {#if stops}
           {#each stops as stop, i}
             {#if Array.isArray(stop)}
-              <stop offset={stop[0]} stop-color={stop[1]} />
+              <stop offset={stop[0]} stop-color={stop[1]} class={className} />
             {:else}
-              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+              <stop
+                offset="{i * (100 / (stops.length - 1))}%"
+                stop-color={stop}
+                class={className}
+              />
             {/if}
           {/each}
         {/if}

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         y2?: string | undefined;
         rotate?: number | undefined | undefined;
         units?: "objectBoundingBox" | "userSpaceOnUse" | undefined;
+        class?: string | undefined | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Points.svelte

@@ -50,6 +50,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -188,6 +189,7 @@
       {fillOpacity}
       {stroke}
       {strokeWidth}
+      {opacity}
       class={className}
       {...$$restProps}
     />

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

@@ -24,6 +24,7 @@ declare const __propDef: {
         fillOpacity?: number | undefined | undefined;
         stroke?: string | undefined | undefined;
         strokeWidth?: number | undefined | undefined;
+        opacity?: number | undefined | undefined;
         class?: string | undefined | undefined;
     };
     events: {

package/dist/components/Rect.svelte

@@ -34,6 +34,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: ClassValue | undefined = undefined;
   export { className as class };
@@ -74,7 +75,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -93,6 +94,7 @@
       fillKey &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -133,6 +135,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}

package/dist/components/Spline.svelte

@@ -67,6 +67,7 @@
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
   export let opacity: number | undefined = undefined;
@@ -192,7 +193,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, stroke, strokeWidth, opacity },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -204,7 +205,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    $tweened_d && fillKey && strokeKey && strokeWidth && className;
+    $tweened_d && fillKey && fillOpacity && strokeKey && strokeWidth && className;
     canvasContext.invalidate();
   }
 
@@ -274,6 +275,7 @@
       {...$$restProps}
       class={cls('path-line', !fill && 'fill-none', !stroke && 'stroke-surface-content', className)}
       {fill}
+      fill-opacity={fillOpacity}
       {stroke}
       stroke-width={strokeWidth}
       {opacity}

package/dist/components/Text.svelte

@@ -67,6 +67,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -202,7 +203,15 @@
         styleOverrides
           ? merge({ styles: { strokeWidth } }, styleOverrides)
           : {
-              styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
+              styles: {
+                fill,
+                fillOpacity,
+                stroke,
+                strokeWidth,
+                opacity,
+                paintOrder: 'stroke',
+                textAnchor,
+              },
               classes: cls(fill === undefined && 'fill-surface-content', className),
             }
       );
@@ -215,7 +224,14 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    value && $tweened_x && $tweened_y && fillKey && strokeKey && strokeWidth && className;
+    value &&
+      $tweened_x &&
+      $tweened_y &&
+      fillKey &&
+      strokeKey &&
+      strokeWidth &&
+      opacity &&
+      className;
     canvasContext.invalidate();
   }
 
@@ -246,6 +262,7 @@
         fill-opacity={fillOpacity}
         {stroke}
         stroke-width={strokeWidth}
+        {opacity}
         class={cls(fill === undefined && 'fill-surface-content', className)}
       >
         {#each wordsByLines as line, index}

package/dist/components/TransformControls.svelte

@@ -66,7 +66,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur z-10 flex',
+    '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',

package/dist/components/charts/AreaChart.svelte

@@ -68,7 +68,7 @@
     data?: TData[];
     color?: string;
     props?: Partial<ComponentProps<Area>>;
-  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', value: y, color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   /** Determine how to layout series.  Overlap (default) or stack */
@@ -346,6 +346,7 @@
     getAreaProps,
     getLabelsProps,
     getPointsProps,
+    highlightSeriesKey,
     setHighlightSeriesKey,
   }}
 

package/dist/components/charts/BarChart.svelte

@@ -314,7 +314,7 @@
   {y1Domain}
   {y1Range}
   c={isVertical ? y : x}
-  cRange={['hsl(var(--color-primary))']}
+  cRange={['var(--color-primary)']}
   padding={defaultChartPadding(axis, legend)}
   {...$$restProps}
   tooltip={$$props.tooltip === false
@@ -353,6 +353,7 @@
     visibleSeries,
     getBarsProps,
     getLabelsProps,
+    highlightSeriesKey,
     setHighlightSeriesKey,
   }}
   <slot {...slotProps}>

package/dist/components/charts/LineChart.svelte

@@ -64,7 +64,7 @@
     data?: TData[];
     color?: string;
     props?: Partial<ComponentProps<Spline>>;
-  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', value: y, color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
@@ -277,6 +277,7 @@
     getLabelsProps,
     getPointsProps,
     getSplineProps,
+    highlightSeriesKey,
     setHighlightSeriesKey,
   }}
   <slot {...slotProps}>

package/dist/components/charts/PieChart.svelte

@@ -70,7 +70,7 @@
     maxValue?: number;
     color?: string;
     props?: Partial<ComponentProps<Arc>>;
-  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+  }[] = [{ key: 'default', value: value /*, color: 'var(--color-primary)'*/ }];
 
   export let legend: ComponentProps<Legend> | boolean = false;
 
@@ -183,12 +183,12 @@
     : c !== key
       ? chartData.map((d) => cAccessor(d))
       : [
-          'hsl(var(--color-primary))',
-          'hsl(var(--color-secondary))',
-          'hsl(var(--color-info))',
-          'hsl(var(--color-success))',
-          'hsl(var(--color-warning))',
-          'hsl(var(--color-danger))',
+          'var(--color-primary)',
+          'var(--color-secondary)',
+          'var(--color-info)',
+          'var(--color-success)',
+          'var(--color-warning)',
+          'var(--color-danger)',
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
@@ -221,6 +221,7 @@
     tooltip,
     series,
     visibleData,
+    highlightKey,
     setHighlightKey,
   }}
   <slot {...slotProps}>
@@ -257,7 +258,7 @@
                 {cornerRadius}
                 {padAngle}
                 fill={s.color ?? cScale?.(c(d))}
-                track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
+                track={{ fill: s.color ?? cScale?.(c(d)), fillOpacity: 0.1 }}
                 {tooltip}
                 data={d}
                 onclick={(e) => {

package/dist/components/charts/ScatterChart.svelte

@@ -55,7 +55,7 @@
     data: TData[];
     color?: string;
     props?: Partial<ComponentProps<Points>>;
-  }[] = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', data: chartDataArray(data), color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
@@ -240,6 +240,7 @@
     visibleSeries,
     getLabelsProps,
     getPointsProps,
+    highlightSeriesKey,
     setHighlightSeriesKey,
   }}
   {@const activeSeries = tooltip.data

package/dist/components/tooltip/Tooltip.svelte

@@ -216,7 +216,7 @@
   >
     <div
       class={cls(
-        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded elevation-1'],
+        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded-sm elevation-1'],
         {
           default: [
             'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -2,4 +2,4 @@
   import { cls } from '@layerstack/tailwind';
 </script>
 
-<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>
+<div class={cls('rounded-sm bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>

package/dist/docs/Blockquote.svelte

@@ -6,7 +6,7 @@
 
 <div
   class={cls(
-    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded flex items-center gap-2 text-sm',
+    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >

package/dist/docs/Code.svelte

@@ -17,11 +17,11 @@
   } = {};
 </script>
 
-<div class={cls('Code', 'rounded', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre
-        class={cls('language-{language} rounded', classes.pre)}
+        class={cls('language-{language} rounded-sm', classes.pre)}
         style="margin: 0; white-space: normal;">
           <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
       </pre>

package/dist/docs/GeoDebug.svelte

@@ -12,7 +12,9 @@
   let showCenter = false;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+<div
+  class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
+>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
@@ -48,6 +50,6 @@
 
 {#if showCenter}
   <div
-    class="absolute w-2 h-2 bg-danger/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    class="absolute w-2 h-2 bg-danger/80 rounded-full z-1 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
   ></div>
 {/if}

package/dist/docs/Preview.svelte

@@ -41,7 +41,7 @@
   }
 </script>
 
-<div class={cls('Preview border rounded bg-surface-100', $$props.class)}>
+<div class={cls('Preview border rounded-sm bg-surface-100', $$props.class)}>
   <div class="p-4">
     <slot />
   </div>
@@ -70,7 +70,7 @@
     <Dialog
       {open}
       on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
     >
       <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">

package/dist/docs/TransformDebug.svelte

@@ -8,7 +8,9 @@
   const { translate, scale } = transform;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+<div
+  class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
+>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($scale, 'decimal')}</div>
 

package/dist/docs/ViewSourceButton.svelte

@@ -17,7 +17,7 @@
     <Dialog
       {open}
       on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
     >
       <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">

package/dist/utils/canvas.js

@@ -3,7 +3,7 @@ import { memoize } from 'lodash-es';
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 /**
- * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
 export function getComputedStyles(canvas, { styles, classes } = {}) {
     try {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "1.0.6",
+  "version": "2.0.0-next.0",
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
     "@mdi/js": "^7.4.47",
@@ -14,6 +14,7 @@
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -53,9 +54,9 @@
     "svelte": "5.20.4",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^1.0.0",
+    "svelte-ux": "2.0.0-next.1",
     "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.12",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
@@ -68,10 +69,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^1.0.0",
-    "@layerstack/svelte-stores": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
-    "@layerstack/utils": "^1.0.0",
+    "@layerstack/svelte-actions": "1.0.1-next.0",
+    "@layerstack/svelte-stores": "1.0.2-next.0",
+    "@layerstack/tailwind": "2.0.0-next.1",
+    "@layerstack/utils": "1.1.0-next.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -93,9 +94,7 @@
     "d3-time": "^3.1.0",
     "date-fns": "^4.1.0",
     "layercake": "^8.4.2",
-    "lodash-es": "^4.17.21",
-    "shapefile": "^0.6.6",
-    "topojson-client": "^3.1.0"
+    "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
     "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"