layerchart 2.0.0-next.40 → 2.0.0-next.42

package/dist/components/Calendar.svelte

@@ -107,7 +107,7 @@
     yearDays.map((date) => {
       const cellData = dataByDate.get(date) ?? { date };
       return {
-        x: timeWeek.count(timeYear(date), date) * cellSize[0],
+        x: timeWeek.count(start, date) * cellSize[0],
         y: date.getDay() * cellSize[1],
         color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
         data: cellData,
@@ -136,14 +136,19 @@
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
+    <MonthPath
+      {date}
+      startOfRange={start}
+      {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]}
+      x={timeWeek.count(start, timeWeek.ceil(date)) * cellSize[0]}
       value={format(date, 'month', { variant: 'short' })}
       capHeight="7px"
       {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}

package/dist/components/MonthPath.svelte

@@ -15,6 +15,11 @@
      */
     cellSize: number | [number, number];
 
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
+
     /**
      * A bindable reference to the underlying `<path>` element.
      *
@@ -38,6 +43,7 @@
   let {
     date,
     cellSize: cellSizeProp,
+    startOfRange,
     pathRef: pathRefProp = $bindable(),
     class: className,
     ...restProps
@@ -54,12 +60,12 @@
 
   // start of month
   const startDayOfWeek = $derived(date.getDay());
-  const startWeek = $derived(timeWeek.count(timeYear(date), date));
+  const startWeek = $derived(timeWeek.count(startOfRange, date));
 
   // end of month
   const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
-  const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
+  const endWeek = $derived(timeWeek.count(startOfRange, monthEnd));
 
   const pathData = $derived(`
     M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}

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

@@ -11,6 +11,10 @@ export type MonthPathPropsWithoutHTML = {
      * - array - sets [width, height].
      */
     cellSize: number | [number, number];
+    /**
+     * The start date of the calendar (used to calculate week offsets).
+     */
+    startOfRange: Date;
     /**
      * A bindable reference to the underlying `<path>` element.
      *

package/dist/components/tooltip/Tooltip.svelte

@@ -192,8 +192,8 @@
   const ctx = getChartContext();
   const tooltipCtx = getTooltipContext();
 
-  let tooltipWidth = $state(0);
-  let tooltipHeight = $state(0);
+  let tooltipWidth = $state<number | null>(null);
+  let tooltipHeight = $state<number | null>(null);
 
   function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
@@ -201,12 +201,11 @@
   }
 
   const positions = $derived.by(() => {
-    if (!tooltipCtx.data) {
-      // if no data, fallback?
-      const tooltipX = untrack(() => tooltipCtx.x);
-      const tooltipY = untrack(() => tooltipCtx.y);
-      return { x: tooltipX, y: tooltipY };
+    // if no data or tooltip size is not known yet, return null
+    if (!tooltipCtx.data || tooltipWidth === null || tooltipHeight === null) {
+      return { x: null, y: null };
     }
+
     const xBandOffset = isScaleBand(ctx.xScale)
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
@@ -345,8 +344,8 @@
     };
   });
 
-  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
-  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
+  const motionX = createMotion(null, () => positions.x, motion);
+  const motionY = createMotion(null, () => positions.y, motion);
 
   $effect(() => {
     if (!tooltipCtx.data) {

package/dist/utils/motion.svelte.js

@@ -63,7 +63,7 @@ function setupTracking(motion, getValue, options) {
     if (options.controlled)
         return;
     $effect(() => {
-        motion.set(getValue());
+        motion.set(getValue(), { instant: motion.target == null });
     });
 }
 export function createMotion(initialValue, getValue, motionProp, options = {}) {

package/package.json

@@ -4,7 +4,8 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.40",
+  "homepage": "https://layerchart.com",
+  "version": "2.0.0-next.42",
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
     "@iconify-json/lucide": "^1.2.62",