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

package/dist/components/Bar.svelte

@@ -71,7 +71,8 @@
     Without<
       Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>,
       BarPropsWithoutHTML
-    >;
+    > &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -81,10 +82,10 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
@@ -127,7 +128,7 @@
 
   const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
 
-  const isVertical = $derived(isScaleBand(ctx.xScale));
+  const isVertical = $derived(isScaleBand(ctx.xScale) || isScaleTime(ctx.xScale));
   const valueAccessor = $derived(accessor(isVertical ? y : x));
   const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
@@ -136,10 +137,10 @@
   const rounded = $derived(
     roundedProp === 'edge'
       ? isVertical
-        ? resolvedValue >= 0
+        ? resolvedValue >= 0 && ctx.yRange[0] > ctx.yRange[1] // not inverted (bottom to top)
           ? 'top'
           : 'bottom'
-        : resolvedValue >= 0
+        : resolvedValue >= 0 && ctx.xRange[0] < ctx.xRange[1] // not inverted (left to right)
           ? 'right'
           : 'left'
       : roundedProp
@@ -151,16 +152,20 @@
   const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
   const width = $derived(dimensions.width);
   const height = $derived(dimensions.height);
-  const diameter = $derived(2 * radius);
+
+  // Clamp radius to prevent extending beyond bounding box
+  const r = $derived(Math.min(radius, width / 2, height / 2));
+  const diameter = $derived(2 * r);
+
   const pathData = $derived(
-    `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
-      ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
+    `M${dimensions.x + r},${dimensions.y} h${width - diameter}
+      ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
       v${height - diameter}
-      ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
+      ${bottomRight ? `a${r},${r} 0 0 1 ${-r},${r}` : `v${r}h${-r}`}
       h${diameter - width}
-      ${bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`}
+      ${bottomLeft ? `a${r},${r} 0 0 1 ${-r},${-r}` : `h${-r}v${-r}`}
       v${diameter - height}
-      ${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
+      ${topLeft ? `a${r},${r} 0 0 1 ${r},${-r}` : `v${-r}h${r}`}
       z`
       .split('\n')
       .join('')
@@ -179,7 +184,7 @@
     {strokeWidth}
     {opacity}
     cornerRadius={radius}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else if rounded === 'all' || rounded === 'none' || radius === 0}
   <Rect
@@ -195,7 +200,7 @@
     {initialHeight}
     {initialWidth}
     {...dimensions}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else}
   {@const tweenMotion = extractTweenConfig(motion)}
@@ -207,6 +212,6 @@
     {strokeWidth}
     {opacity}
     motion={tweenMotion}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {/if}

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

@@ -41,10 +41,10 @@ export type BarPropsWithoutHTML = {
     rounded?: 'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 } & CommonStyleProps;
-export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML>;
+export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML> & CommonEvents;
 import type { SVGAttributes } from 'svelte/elements';
 import { type Accessor } from '../utils/common.js';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 declare const Bar: import("svelte").Component<BarProps, {}, "">;
 type Bar = ReturnType<typeof Bar>;

package/dist/components/Bars.svelte

@@ -32,9 +32,9 @@
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
   import Group from './Group.svelte';
 
-  import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { chartDataArray } from '../utils/common.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   let {
     fill,
@@ -52,7 +52,7 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<Group class={layerClass('bars')}>
+<Group class="lc-bars">
   {#if children}
     {@render children()}
   {:else}
@@ -64,7 +64,7 @@
         {stroke}
         fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
         onclick={(e) => onBarClick(e, { data: d })}
-        {...extractLayerProps(restProps, 'bars-bar')}
+        {...extractLayerProps(restProps, 'lc-bars-bar')}
       />
     {/each}
   {/if}

package/dist/components/Blur.svelte

@@ -14,9 +14,9 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
@@ -24,7 +24,6 @@
   import type { Snippet } from 'svelte';
   import { getRenderContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -35,14 +34,16 @@
 
 {#if renderContext === 'svg'}
   <defs>
-    <filter {id} class={layerClass('blur-filter')}>
+    <filter {id} class="lc-blur-filter">
       <feGaussianBlur in="SourceGraphic" {stdDeviation} />
     </filter>
   </defs>
 
   {#if children}
-    <g filter="url(#{id})" class={layerClass('blur-g')}>
-      {@render children({ id, url: `url(#${id})` })}
+    <g filter="url(#{id})" class="lc-blur-g">
+      {@render children()}
     </g>
   {/if}
+{:else if children}
+  {@render children()}
 {/if}

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

@@ -11,12 +11,9 @@ export type BlurProps = {
     stdDeviation?: number;
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{
-        id: string;
-        url: string;
-    }]>;
+    children?: Snippet;
 };
 import type { Snippet } from 'svelte';
 declare const Blur: import("svelte").Component<BlurProps, {}, "">;

package/dist/components/BrushContext.svelte

@@ -148,7 +148,6 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -319,7 +318,7 @@
           _range.width < RESET_THRESHOLD ||
           _range.height < RESET_THRESHOLD
         ) {
-          // Clicked on frame, or pointer delta was <1
+          // Clicked on frame, or pointer delta was less than threshold (default: 1px)
           if (ignoreResetClick) {
             logger.debug('ignoring frame click reset');
           } else {
@@ -463,7 +462,6 @@
 {#if disabled}
   {@render children?.({ brushContext })}
 {:else}
-  {@const handleClass = layerClass('brush-handle')}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={rootEl}
@@ -471,12 +469,12 @@
     style:left="{ctx.padding.left}px"
     style:width="{ctx.width}px"
     style:height="{ctx.height}px"
-    class={cls(layerClass('brush-context'), 'absolute touch-none')}
+    class={cls('lc-brush-context')}
     onpointerdown={createRange}
     ondblclick={() => selectAll()}
   >
     <div
-      class={cls(layerClass('brush-container'), 'absolute')}
+      class={cls('lc-brush-container')}
       style:top="-{ctx.padding.top ?? 0}px"
       style:left="-{ctx.padding.left ?? 0}px"
       style:width="{ctx.containerWidth}px"
@@ -492,13 +490,7 @@
         style:top="{_range.y}px"
         style:width="{_range.width}px"
         style:height="{_range.height}px"
-        class={cls(
-          layerClass('brush-range'),
-          'absolute bg-surface-content/10 cursor-move select-none',
-          'z-10',
-          classes.range,
-          range?.class
-        )}
+        class={cls('lc-brush-range', classes.range, range?.class)}
         onpointerdown={adjustRange}
         ondblclick={() => reset()}
       ></div>
@@ -511,14 +503,7 @@
           style:width="{_range.width}px"
           style:height="{handleSize}px"
           data-position="top"
-          class={cls(
-            handleClass,
-            'cursor-ns-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustTop}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -536,15 +521,7 @@
           style:width="{_range.width}px"
           style:height="{handleSize}px"
           data-position="bottom"
-          class={cls(
-            handleClass,
-            'handle bottom',
-            'cursor-ns-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustBottom}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -564,14 +541,7 @@
           style:width="{handleSize}px"
           style:height="{_range.height}px"
           data-position="left"
-          class={cls(
-            handleClass,
-            'cursor-ew-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustLeft}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -589,14 +559,7 @@
           style:width="{handleSize}px"
           style:height="{_range.height}px"
           data-position="right"
-          class={cls(
-            handleClass,
-            'cursor-ew-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustRight}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -610,3 +573,40 @@
     {/if}
   </div>
 {/if}
+
+<style>
+  @layer base {
+    :where(.lc-brush-context) {
+      position: absolute;
+      touch-action: none;
+    }
+
+    :where(.lc-brush-container) {
+      position: absolute;
+    }
+
+    :where(.lc-brush-range) {
+      position: absolute;
+      cursor: move;
+      user-select: none;
+      z-index: 10;
+      background: color-mix(in oklab, var(--color-surface-content, currentColor) 10%, transparent);
+    }
+
+    :where(.lc-brush-handle) {
+      position: absolute;
+      user-select: none;
+      z-index: 10;
+
+      &[data-position='top'],
+      &[data-position='bottom'] {
+        cursor: ns-resize;
+      }
+
+      &[data-position='left'],
+      &[data-position='right'] {
+        cursor: ew-resize;
+      }
+    }
+  }
+</style>

package/dist/components/Calendar.svelte

@@ -36,14 +36,14 @@
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
 
     /**
      * Tooltip context to setup mouse events to show tooltip for related data
      */
     tooltipContext?: TooltipContextValue;
 
-    children?: Snippet<[{ cells: CalendarCell[] }]>;
+    children?: Snippet<[{ cells: CalendarCell[]; cellSize: [number, number] }]>;
   } & Omit<
     RectPropsWithoutHTML,
     'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
@@ -57,7 +57,7 @@
   import { type ComponentProps, type Snippet } from 'svelte';
   import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
   import { index } from 'd3-array';
-  import { format } from 'date-fns';
+  import { format } from '@layerstack/utils';
 
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
@@ -74,9 +74,9 @@
     start,
     cellSize: cellSizeProp,
     monthPath = false,
+    monthLabel = true,
     tooltipContext: tooltip,
     children,
-    monthLabel,
     ...restProps
   }: CalendarPropsWithoutHTML = $props();
 
@@ -117,7 +117,7 @@
 </script>
 
 {#if children}
-  {@render children({ cells })}
+  {@render children({ cells, cellSize })}
 {:else}
   {#each cells as cell}
     <Rect
@@ -128,20 +128,41 @@
       fill={cell.color}
       onpointermove={(e) => tooltip?.show(e, cell.data)}
       onpointerleave={(e) => tooltip?.hide()}
-      {...extractLayerProps(restProps, 'calendar-cell', 'stroke-surface-content/5')}
+      strokeWidth={1}
+      {...extractLayerProps(restProps, 'lc-calendar-cell')}
     />
   {/each}
 {/if}
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'calendar-month-path')} />
+    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
+  {/each}
+{/if}
 
+{#if monthLabel}
+  {#each yearMonths as date}
     <Text
       x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
-      y={-4}
-      value={format(date, 'MMM')}
-      {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
+      value={format(date, 'month', { variant: 'short' })}
+      capHeight="7px"
+      {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}
     />
   {/each}
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-calendar-cell)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 5%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-calendar-month-label)) {
+      font-size: 12px;
+    }
+  }
+</style>

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

@@ -30,13 +30,14 @@ export type CalendarPropsWithoutHTML = {
     /**
      * Props to pass to the `<text>` element for month labels.
      */
-    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    monthLabel?: boolean | Partial<ComponentProps<typeof Text>>;
     /**
      * Tooltip context to setup mouse events to show tooltip for related data
      */
     tooltipContext?: TooltipContextValue;
     children?: Snippet<[{
         cells: CalendarCell[];
+        cellSize: [number, number];
     }]>;
 } & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
 export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;