@bimetal/calendar-svelte-components 0.29.0 → 0.30.0

package/dist/components/Calendar.svelte

@@ -203,7 +203,7 @@
   {:else if snapshot.currentView === 'day'}
     <DayView currentDate={snapshot.currentDate} />
   {:else if snapshot.currentView === 'agenda'}
-    <AgendaView currentDate={snapshot.currentDate} />
+    <AgendaView agenda={snapshot.agenda!} setViewport={ctrl.setViewport} />
   {:else if snapshot.currentView === 'resource'}
     <ResourceView
       currentDate={snapshot.currentDate}

package/dist/components/EventBar.svelte

@@ -4,6 +4,7 @@
   import { getCalendarContext, getCalendarConfig, buildDragInfo, getEventSlots, toTimeStr } from '../binding/index.js';
   import type { DragInfo } from '../binding/index.js';
   import { createClickIntent, writeCalendarDragData, installTransparentDragImage, eventBarWantsDarkText } from '@bimetal/calendar-headless';
+  import { probeRender } from '@bimetal/svelte';
 
   let {
     item,
@@ -108,6 +109,11 @@
     ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
     : '');
   const fullStyle = $derived(slotStyle ? `${barStyle} ${slotStyle}` : barStyle);
+
+  // v0.30 Slice 3 perf probe: re-runs (post-DOM) ONLY when this bar's DOM-driving deriveds change.
+  // `selectedClass` is equality-gated, so a selection elsewhere does NOT re-run unchanged bars —
+  // proving Svelte 5's fine-grained reactivity is identity-true even with the context selection read.
+  $effect(() => { void fullStyle; void selectedClass; void renderedTitle; probeRender(event.id); });
 </script>
 
 {#if isCompact}

package/dist/components/EventBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventBar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAM1E,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiJJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"EventBar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAO1E,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAuJJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/views/agenda/AgendaEvent.svelte

@@ -1,28 +1,29 @@
 <script lang="ts">
   import type { CalendarEvent } from '@bimetal/calendar-core';
-  import { getRecurrenceInstanceMetadata } from '@bimetal/calendar-core';
   import { getEventSlots } from '../../binding/index.js';
 
   let {
-    ev,
+    event,
     timeLabel,
     category,
     isSelected,
+    instanceDate,
     onEntryMouseDown,
     onEntryClick,
     onEntryDoubleClick,
   }: {
-    ev: CalendarEvent;
+    event: CalendarEvent;
     timeLabel: string;
     category: string;
     isSelected: boolean;
+    instanceDate?: number;
     onEntryMouseDown: () => void;
     onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
     onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
   } = $props();
 
-  const slots = $derived(getEventSlots(ev));
-  const renderedTitle = $derived(slots.title ?? ev.title);
+  const slots = $derived(getEventSlots(event));
+  const renderedTitle = $derived(slots.title ?? event.title);
   const extraClass = $derived(slots.className ? ' ' + slots.className : '');
   const slotStyleStr = $derived(slots.style
     ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
@@ -31,18 +32,18 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="agenda-view__event{isSelected ? ' agenda-view__event--selected' : ''}{extraClass}"
+  class="agenda-view__row agenda-view__event{isSelected ? ' agenda-view__event--selected' : ''}{extraClass}"
   style={slotStyleStr}
   role="button"
   tabindex="0"
   onmousedown={onEntryMouseDown}
-  onclick={(e) => onEntryClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
-  ondblclick={(e) => onEntryDoubleClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
+  onclick={(e) => onEntryClick(e, event.id, instanceDate)}
+  ondblclick={(e) => onEntryDoubleClick(e, event.id, instanceDate)}
 >
   {#if slots.content}
     {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
   {:else}
-    <div class="agenda-view__event-color" style:background-color={ev.metadata.color ?? '#007AFF'}></div>
+    <div class="agenda-view__event-color" style:background-color={event.metadata.color ?? '#007AFF'}></div>
     <div class="agenda-view__event-content">
       <div class="agenda-view__event-title">{renderedTitle}</div>
       <div class="agenda-view__event-time">{timeLabel}</div>

package/dist/views/agenda/AgendaEvent.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { CalendarEvent } from '@bimetal/calendar-core';
 type $$ComponentProps = {
-    ev: CalendarEvent;
+    event: CalendarEvent;
     timeLabel: string;
     category: string;
     isSelected: boolean;
+    instanceDate?: number;
     onEntryMouseDown: () => void;
     onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
     onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;

package/dist/views/agenda/AgendaEvent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgendaEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/agenda/AgendaEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAI;IACtB,EAAE,EAAE,aAAa,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AA2CJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AgendaEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/agenda/AgendaEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG3D,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AA2CJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/views/agenda/AgendaView.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
-  import {
-    addDays, isSameDay, startOfDay, isBefore, isAfter,
-    getDayOfMonth,
-    createTimeRange, overlaps, formatDateTime, now,
-    getRecurrenceInstanceMetadata, isSingleDayAllDay,
-  } from '@bimetal/calendar-core';
-  import { getCalendarContext, getCalendarConfig, toDateStr, toTimeStr } from '../../binding/index.js';
-  import { DEFAULT_AGENDA_RANGE_DAYS, createClickIntent } from '@bimetal/calendar-headless';
+  import type { CalendarEvent } from '@bimetal/calendar-core';
+  import type { AgendaWindow } from '@bimetal/calendar-headless';
+  import { createClickIntent } from '@bimetal/calendar-headless';
+  import { getCalendarContext, getCalendarConfig } from '../../binding/index.js';
   import AgendaEvent from './AgendaEvent.svelte';
 
-  interface DayGroup {
-    date: CalendarDateTime;
-    dateStr: string;
-    events: CalendarEvent[];
-  }
+  /**
+   * The agenda view — a WINDOWED flat list (v0.30 Slice 5b). The controller owns the
+   * whole derivation: it flattens the day-grouped agenda to uniform-height rows
+   * (header | event), formats every time label, computes selection, and windows the
+   * heavy build to the visible slice. This binding only renders `agenda.rows` + the
+   * px spacers and reports the scroll container's metrics via `setViewport` — no
+   * grouping, no formatting, no window math here.
+   */
 
   let {
-    currentDate,
+    agenda,
+    setViewport,
   }: {
-    currentDate: CalendarDateTime;
+    agenda: AgendaWindow;
+    setViewport: (scrollTop: number, viewportHeight: number) => void;
   } = $props();
 
   const config = getCalendarConfig();
@@ -27,60 +27,29 @@
     events: CalendarEvent[];
     onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
     onSelectEvent: (eventId: string, instanceDate?: number) => void;
-    selectedEventId: string | null;
-    selectedInstanceDate: number | undefined;
   }>();
 
   const click = createClickIntent();
 
-  const rangeStartDt = $derived(startOfDay(currentDate));
-  const rangeEndDt = $derived(addDays(rangeStartDt, DEFAULT_AGENDA_RANGE_DAYS));
-  const agendaRange = $derived(createTimeRange(rangeStartDt, rangeEndDt));
-
-  const currentNow = $derived(now(config.core.timezone, config.core.clock));
-
-  const dayGroups = $derived.by((): DayGroup[] => {
-    const groups = new Map<string, CalendarEvent[]>();
-
-    for (const ev of ctx.events) {
-      if (!overlaps(ev.timeRange, agendaRange)) continue;
-
-      const evStart = isBefore(ev.timeRange.start, rangeStartDt) ? rangeStartDt : ev.timeRange.start;
-      const evEnd = isAfter(ev.timeRange.end, rangeEndDt) ? rangeEndDt : ev.timeRange.end;
-
-      let d = startOfDay(evStart);
-      const end = startOfDay(evEnd);
-      const limit = addDays(end, 1);
-      while (isBefore(d, limit) && isBefore(d, rangeEndDt)) {
-        const ds = toDateStr(d);
-        const list = groups.get(ds) || [];
-        list.push(ev);
-        groups.set(ds, list);
-        d = addDays(d, 1);
-      }
-    }
-
-    const result: DayGroup[] = [];
-    for (let i = 0; i < DEFAULT_AGENDA_RANGE_DAYS; i++) {
-      const date = addDays(rangeStartDt, i);
-      const dateStr = toDateStr(date);
-      const dayEvents = groups.get(dateStr);
-      if (dayEvents && dayEvents.length > 0) {
-        dayEvents.sort((a, b) => {
-          if (a.allDay !== b.allDay) return a.allDay ? -1 : 1;
-          return a.timeRange.start.epochMs - b.timeRange.start.epochMs;
-        });
-        result.push({ date, dateStr, events: dayEvents });
-      }
-    }
-    return result;
+  let scrollEl: HTMLDivElement | undefined = $state();
+
+  // Report the scroll container's metrics so the controller windows the rows.
+  $effect(() => {
+    const el = scrollEl;
+    if (!el) return;
+    const report = () => setViewport(el.scrollTop, el.clientHeight);
+    report();
+    el.addEventListener('scroll', report, { passive: true });
+    const ro = new ResizeObserver(report);
+    ro.observe(el);
+    return () => { el.removeEventListener('scroll', report); ro.disconnect(); };
   });
 
   function handleMouseDown() {
     click.markMouseDown();
   }
 
-  function handleEventClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+  function handleEventClick(_e: MouseEvent, eventId: string, instanceDate?: number) {
     if (!click.accept(config.clickThresholdMs)) return;
     ctx.onSelectEvent(eventId, instanceDate);
   }
@@ -90,66 +59,39 @@
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     ctx.onEventClick(eventId, rect, instanceDate);
   }
-
-  function isEventSelected(ev: CalendarEvent): boolean {
-    const id = getRecurrenceInstanceMetadata(ev)?.instanceDate;
-    return ctx.selectedEventId === ev.id && ctx.selectedInstanceDate === id;
-  }
-
-  function formatEventTime(ev: CalendarEvent, date: CalendarDateTime): string {
-    if (ev.allDay) {
-      if (isSingleDayAllDay(ev.timeRange)) {
-        return config.locale.allDayEvent;
-      }
-      const startStr = formatDateTime(ev.timeRange.start, { locale: config.locale.code, dateStyle: 'short' });
-      const endStr = formatDateTime(addDays(ev.timeRange.end, -1), { locale: config.locale.code, dateStyle: 'short' });
-      return `${config.locale.allDayEvent} (${startStr} \u2013 ${endStr})`;
-    }
-    const isFirst = isSameDay(ev.timeRange.start, date);
-    const isLast = isSameDay(ev.timeRange.end, date);
-    const startTime = toTimeStr(ev.timeRange.start);
-    const endTime = toTimeStr(ev.timeRange.end);
-    if (isFirst && isLast) return `${startTime} \u2013 ${endTime}`;
-    if (isFirst) return `${config.locale.timeFrom} ${startTime}`;
-    if (isLast) return `${config.locale.timeUntil} ${endTime}`;
-    return config.locale.allDayEvent;
-  }
 </script>
 
-<div class="agenda-view">
-  {#if dayGroups.length === 0}
+<div class="agenda-view" bind:this={scrollEl}>
+  {#if agenda.empty}
     <div class="agenda-view__empty">{config.locale.noEvents}</div>
   {:else}
-    {#each dayGroups as group (group.dateStr)}
-      {@const isGroupToday = isSameDay(group.date, currentNow)}
-      <div class="agenda-view__day">
-        <div class="agenda-view__date-header{isGroupToday ? ' agenda-view__date-header--today' : ''}">
-          <span class="agenda-view__date-number{isGroupToday ? ' agenda-view__date-number--today' : ''}">
-            {getDayOfMonth(group.date)}
-          </span>
+    {#if agenda.offsetTop > 0}
+      <div class="agenda-view__spacer" style:height={`${agenda.offsetTop}px`} aria-hidden="true"></div>
+    {/if}
+    {#each agenda.rows as row (row.key)}
+      {#if row.kind === 'header'}
+        <div class="agenda-view__row agenda-view__row--header{row.isToday ? ' agenda-view__row--today' : ''}">
+          <span class="agenda-view__date-number">{row.dayOfMonth}</span>
           <div class="agenda-view__date-text">
-            <span class="agenda-view__date-weekday">
-              {formatDateTime(group.date, { locale: config.locale.code, dateStyle: 'full' }).split(',')[0]}
-            </span>
-            <span class="agenda-view__date-full">
-              {formatDateTime(group.date, { locale: config.locale.code, dateStyle: 'long' }).replace(/\d+\.?\s*/, '')}
-            </span>
+            <span class="agenda-view__date-weekday">{row.weekday}</span>
+            <span class="agenda-view__date-full">{row.dateFull}</span>
           </div>
         </div>
-        <div class="agenda-view__events">
-          {#each group.events as ev (`${ev.id}-${group.dateStr}`)}
-            <AgendaEvent
-              {ev}
-              timeLabel={formatEventTime(ev, group.date)}
-              category={(ev.metadata.category as string | undefined) ?? 'default'}
-              isSelected={isEventSelected(ev)}
-              onEntryMouseDown={handleMouseDown}
-              onEntryClick={handleEventClick}
-              onEntryDoubleClick={handleEventDoubleClick}
-            />
-          {/each}
-        </div>
-      </div>
+      {:else}
+        <AgendaEvent
+          event={row.event}
+          timeLabel={row.timeLabel}
+          category={row.category}
+          isSelected={row.isSelected}
+          instanceDate={row.instanceDate ?? undefined}
+          onEntryMouseDown={handleMouseDown}
+          onEntryClick={handleEventClick}
+          onEntryDoubleClick={handleEventDoubleClick}
+        />
+      {/if}
     {/each}
+    {#if agenda.offsetBottom > 0}
+      <div class="agenda-view__spacer" style:height={`${agenda.offsetBottom}px`} aria-hidden="true"></div>
+    {/if}
   {/if}
 </div>

package/dist/views/agenda/AgendaView.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { CalendarDateTime } from '@bimetal/calendar-core';
+import type { AgendaWindow } from '@bimetal/calendar-headless';
 type $$ComponentProps = {
-    currentDate: CalendarDateTime;
+    agenda: AgendaWindow;
+    setViewport: (scrollTop: number, viewportHeight: number) => void;
 };
 declare const AgendaView: import("svelte").Component<$$ComponentProps, {}, "">;
 type AgendaView = ReturnType<typeof AgendaView>;

package/dist/views/agenda/AgendaView.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgendaView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/agenda/AgendaView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAiB7E,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AA2IJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AgendaView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/agenda/AgendaView.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK9D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE,CAAC;AAyFJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/views/month/TimedEntry.svelte

@@ -2,6 +2,7 @@
   import type { CalendarEvent } from '@bimetal/calendar-core';
   import { getRecurrenceInstanceMetadata } from '@bimetal/calendar-core';
   import { getEventSlots, toTimeStr } from '../../binding/index.js';
+  import { probeRender } from '@bimetal/svelte';
 
   let {
     ev,
@@ -23,6 +24,11 @@
   const slotStyleStr = $derived(slots.style
     ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
     : '');
+
+  // v0.30 Slice 3 perf probe: re-runs (post-DOM) ONLY when this entry's DOM-driving values change.
+  // `isSelected` is a per-leaf prop (so a selection elsewhere doesn't touch this leaf) and `ev` is
+  // the Slice-1 ref-stable entity (stable across snapshots unless THIS event changed).
+  $effect(() => { void renderedTitle; void slotStyleStr; void extraClass; void isSelected; void ev; probeRender(ev.id); });
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/views/month/TimedEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimedEntry.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/month/TimedEntry.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAI;IACtB,EAAE,EAAE,aAAa,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AAwCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TimedEntry.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/month/TimedEntry.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK3D,KAAK,gBAAgB,GAAI;IACtB,EAAE,EAAE,aAAa,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AA8CJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/views/week/TimeEvent.svelte

@@ -4,6 +4,7 @@
   import { getCalendarContext, getCalendarConfig, toTimeStr, buildDragInfo, getEventSlots } from '../../binding/index.js';
   import type { DragInfo } from '../../binding/index.js';
   import { createClickIntent, writeCalendarDragData, installTransparentDragImage } from '@bimetal/calendar-headless';
+  import { probeRender } from '@bimetal/svelte';
 
   /**
    * Layout-Position eines Termins (Pilot-Direktive 2026-06-21). Zwei
@@ -132,6 +133,18 @@
     ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
     : '');
   const style = $derived(slotStyleStr ? `${baseStyle} ${slotStyleStr}` : baseStyle);
+
+  // The week timed-layout rebuilds its `item`/`event` wrappers every snapshot, so the raw `event`
+  // prop ref churns even for unchanged events. Route the id through an equality-gated `$derived` so
+  // the probe below tracks the STABLE id string, not the churning prop ref (the DOM-driving
+  // deriveds `style`/`renderedTitle`/… already gate the same churn to their stable values).
+  const eventId = $derived(event.id);
+
+  // v0.30 Slice 3 perf probe: re-runs (post-DOM) ONLY when this event's DOM-driving deriveds
+  // change. `style` folds in all `layout` geometry (top/height/left/width fractions), and
+  // `isSelected` is equality-gated — so a selection or geometry change elsewhere does NOT
+  // re-run unchanged events, proving fine-grained reactivity even with the context selection read.
+  $effect(() => { void style; void isSelected; void renderedTitle; void timeLabel; void duration; probeRender(eventId); });
 </script>
 
 <div

package/dist/views/week/TimeEvent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/TimeEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AACF,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAgJJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TimeEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/TimeEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAQ5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AACF,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA6JJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimetal/calendar-svelte-components",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Default Svelte 5 calendar UI components",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -27,13 +27,13 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@bimetal/svelte": "^0.29.0",
-    "@bimetal/core": "^0.29.0",
-    "@bimetal/calendar-core": "^0.29.0",
-    "@bimetal/calendar-data": "^0.29.0",
-    "@bimetal/calendar-headless": "^0.29.0",
-    "@bimetal/calendar-rules": "^0.29.0",
-    "@bimetal/calendar-themes": "^0.29.0"
+    "@bimetal/svelte": "^0.30.0",
+    "@bimetal/core": "^0.30.0",
+    "@bimetal/calendar-core": "^0.30.0",
+    "@bimetal/calendar-data": "^0.30.0",
+    "@bimetal/calendar-headless": "^0.30.0",
+    "@bimetal/calendar-rules": "^0.30.0",
+    "@bimetal/calendar-themes": "^0.30.0"
   },
   "peerDependencies": {
     "svelte": "^5.46.4"