@bimetal/calendar-svelte-components 0.29.0 → 0.32.0

package/dist/components/EventHistory.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { DomainEvent } from '@bimetal/calendar-data';
+  import { formatHistoryTimestamp } from '@bimetal/calendar-core';
   import { getCalendarConfig } from '../binding/index.js';
 
   const eventTypeColors: Record<string, string> = {
@@ -22,12 +23,7 @@
   const config = getCalendarConfig();
   const eventTypeLabels = config.locale.historyEventTypes;
 
-  function formatTime(timestamp: number): string {
-    return new Date(timestamp).toLocaleString(config.locale.code, {
-      day: '2-digit', month: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit',
-    });
-  }
+  const formatTime = (timestamp: number): string => formatHistoryTimestamp(timestamp, config.locale.code);
 
   function getSummary(event: DomainEvent): string {
     const payload = event.payload as Record<string, unknown>;
@@ -47,40 +43,40 @@
   }
 </script>
 
-<div class="event-history">
-  <div class="event-history__header">
-    <button class="event-history__back" onclick={onBack}>&larr;</button>
-    <span class="event-history__title">{config.locale.historyTitle}</span>
+<div class="bm-cal-event-history">
+  <div class="bm-cal-event-history__header">
+    <button class="bm-cal-event-history__back" onclick={onBack}>&larr;</button>
+    <span class="bm-cal-event-history__title">{config.locale.historyTitle}</span>
   </div>
 
   {#if history.length === 0}
-    <div class="event-history__loading">{config.locale.historyLoading}</div>
+    <div class="bm-cal-event-history__loading">{config.locale.historyLoading}</div>
   {/if}
 
-  <div class="event-history__timeline">
+  <div class="bm-cal-event-history__timeline">
     {#each history as entry, idx (entry.envelope.id ?? idx)}
-      <div class="event-history__entry">
-        <div class="event-history__dot-col">
+      <div class="bm-cal-event-history__entry">
+        <div class="bm-cal-event-history__dot-col">
           <div
-            class="event-history__dot"
+            class="bm-cal-event-history__dot"
             style:background-color={eventTypeColors[entry.type] ?? '#8E8E93'}
           ></div>
           {#if idx < history.length - 1}
-            <div class="event-history__line"></div>
+            <div class="bm-cal-event-history__line"></div>
           {/if}
         </div>
-        <div class="event-history__content">
-          <div class="event-history__entry-header">
+        <div class="bm-cal-event-history__content">
+          <div class="bm-cal-event-history__entry-header">
             <span
-              class="event-history__badge"
+              class="bm-cal-event-history__badge"
               style:background-color={eventTypeColors[entry.type] ?? '#8E8E93'}
             >
               {eventTypeLabels[entry.type] ?? entry.type}
             </span>
-            <span class="event-history__time">{formatTime(entry.envelope.timestamp)}</span>
+            <span class="bm-cal-event-history__time">{formatTime(entry.envelope.timestamp)}</span>
           </div>
           {#if getSummary(entry)}
-            <div class="event-history__summary">{getSummary(entry)}</div>
+            <div class="bm-cal-event-history__summary">{getSummary(entry)}</div>
           {/if}
         </div>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"EventHistory.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventHistory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGzD,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAmFJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EventHistory.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EventHistory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIzD,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AA+EJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ResourceFilter.svelte

@@ -13,11 +13,11 @@
 </script>
 
 {#if resources.length > 0}
-  <div class="resource-filter">
+  <div class="bm-cal-resource-filter">
     {#each resources as r (r.id)}
       <button
         type="button"
-        class="resource-filter__pill{hiddenResources.has(r.id) ? ' resource-filter__pill--hidden' : ''}"
+        class="bm-cal-resource-filter__pill{hiddenResources.has(r.id) ? ' bm-cal-resource-filter__pill--hidden' : ''}"
         style:border-left-color={r.color ?? 'transparent'}
         onclick={() => onToggle(r.id)}
       >

package/dist/components/UndoToast.svelte

@@ -37,11 +37,11 @@
 </script>
 
 {#if ctx.lastAction}
-  <div class="undo-toast" role="status">
-    <span class="undo-toast__text">{ctx.lastAction.description}</span>
-    <button class="undo-toast__btn" onclick={handleUndo}>
-      {config.locale.undo ?? 'Undo'}
+  <div class="bm-cal__toast" role="status">
+    <span class="bm-cal__toast-text">{ctx.lastAction.description}</span>
+    <button class="bm-cal__toast-btn" onclick={handleUndo}>
+      {config.locale.undo}
     </button>
-    <button class="undo-toast__dismiss" onclick={() => ctx.dismissUndo()}>&times;</button>
+    <button class="bm-cal__toast-dismiss" onclick={() => ctx.dismissUndo()}>&times;</button>
   </div>
 {/if}

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,23 +32,23 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="agenda-view__event{isSelected ? ' agenda-view__event--selected' : ''}{extraClass}"
+  class="bm-cal-agenda__row bm-cal-agenda__event{isSelected ? ' bm-cal-agenda__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-content">
-      <div class="agenda-view__event-title">{renderedTitle}</div>
-      <div class="agenda-view__event-time">{timeLabel}</div>
+    <div class="bm-cal-agenda__event-color" style:background-color={event.metadata.color ?? '#007AFF'}></div>
+    <div class="bm-cal-agenda__event-content">
+      <div class="bm-cal-agenda__event-title">{renderedTitle}</div>
+      <div class="bm-cal-agenda__event-time">{timeLabel}</div>
     </div>
-    <div class="agenda-view__event-calendar">{category}</div>
+    <div class="bm-cal-agenda__event-calendar">{category}</div>
   {/if}
   {#if slots.badges}
     {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}

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__empty">{config.locale.noEvents}</div>
+<div class="bm-cal-agenda" bind:this={scrollEl}>
+  {#if agenda.empty}
+    <div class="bm-cal-agenda__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>
-          <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>
+    {#if agenda.offsetTop > 0}
+      <div class="bm-cal-agenda__spacer" style:height={`${agenda.offsetTop}px`} aria-hidden="true"></div>
+    {/if}
+    {#each agenda.rows as row (row.key)}
+      {#if row.kind === 'header'}
+        <div class="bm-cal-agenda__row bm-cal-agenda__row--header{row.isToday ? ' bm-cal-agenda__row--today' : ''}">
+          <span class="bm-cal-agenda__date-number">{row.dayOfMonth}</span>
+          <div class="bm-cal-agenda__date-text">
+            <span class="bm-cal-agenda__date-weekday">{row.weekday}</span>
+            <span class="bm-cal-agenda__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="bm-cal-agenda__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/day/AllDayEvent.svelte

@@ -29,7 +29,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="day-view__allday-event{isSelected ? ' day-view__allday-event--selected' : ''}{extraClass}"
+  class="bm-cal-day__allday-event{isSelected ? ' bm-cal-day__allday-event--selected' : ''}{extraClass}"
   style={fullStyle}
   role="button"
   tabindex="0"

package/dist/views/day/DayView.svelte

@@ -118,14 +118,14 @@
 
   function handleGridClick(e: MouseEvent) {
     if (!click.accept(config.clickThresholdMs)) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     // Single click on empty grid deselects; create-dialog moves to dblclick.
     if (ctx.selectedEventId !== null) ctx.onClearSelection();
   }
 
   function handleGridDoubleClick(e: MouseEvent) {
     if (!click.accept(config.clickThresholdMs)) return;
-    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if ((e.target as HTMLElement).closest('.bm-cal-time-event')) return;
     const time = getTimeFromMouseY(e.clientY);
     // Tag + gesnapte Zeit über den geteilten Parser (kein split, wie WeekView).
     const clickedDt = parseDateTimeStr(toDateStr(currentDate), time, currentDate.timezone);
@@ -156,20 +156,20 @@
   }
 </script>
 
-<div class="day-view">
+<div class="bm-cal-day">
   <!-- Header -->
-  <div class="day-view__header">
-    <span class="day-view__day-name">{dayName}</span>
-    <span class="day-view__day-number{isToday ? ' day-view__day-number--today' : ''}">
+  <div class="bm-cal-day__header">
+    <span class="bm-cal-day__day-name">{dayName}</span>
+    <span class="bm-cal-day__day-number{isToday ? ' bm-cal-day__day-number--today' : ''}">
       {getDayOfMonth(currentDate)}
     </span>
   </div>
 
   <!-- All-day events -->
   {#if allDayEvents.length > 0}
-    <div class="day-view__allday">
-      <div class="day-view__allday-label">{config.locale.allDayLabel}</div>
-      <div class="day-view__allday-list">
+    <div class="bm-cal-day__allday">
+      <div class="bm-cal-day__allday-label">{config.locale.allDayLabel}</div>
+      <div class="bm-cal-day__allday-list">
         {#each allDayEvents as ev (ev.id)}
           <AllDayEvent
             {ev}
@@ -186,7 +186,7 @@
   <!-- Time grid -->
   <div
     bind:this={timeGridEl}
-    class="day-view__time-grid"
+    class="bm-cal-day__time-grid"
     role="grid"
     tabindex="0"
     ondragover={handleGridDragOver}
@@ -199,7 +199,7 @@
   >
     <div
       bind:this={gridInnerEl}
-      class="day-view__time-grid-inner"
+      class="bm-cal-day__time-grid-inner"
       style="height: {24 * DEFAULT_HOUR_HEIGHT}px;"
     >
       <!-- Hour rows -->
@@ -207,10 +207,10 @@
         {@const wh = config.core.workingHours}
         {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
         <div
-          class="day-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+          class="bm-cal-day__hour-row{isOff ? ' bm-cal__hour-slot--off' : ''}"
           style="top: {hr * DEFAULT_HOUR_HEIGHT}px; height: {DEFAULT_HOUR_HEIGHT}px;"
         >
-          <div class="day-view__hour-label">
+          <div class="bm-cal-day__hour-label">
             {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
           </div>
         </div>
@@ -218,7 +218,7 @@
 
       <!-- Day column -->
       <div
-        class="day-view__day-col"
+        class="bm-cal-day__day-col"
         style="left: {DEFAULT_TIME_LABEL_WIDTH_DAY}px; width: calc(100% - {DEFAULT_TIME_LABEL_WIDTH_DAY}px);"
       ></div>
 
@@ -243,8 +243,8 @@
 
       <!-- Now line -->
       {#if isToday}
-        <div class="day-view__now-line" style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px;">
-          <div class="day-view__now-dot"></div>
+        <div class="bm-cal-day__now-line" style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px;">
+          <div class="bm-cal-day__now-dot"></div>
         </div>
       {/if}
     </div>

package/dist/views/month/MonthView.svelte

@@ -44,11 +44,11 @@
   });
 </script>
 
-<div class="month-grid">
-  <div class="day-headers">
-    <div class="header-spacer"></div>
+<div class="bm-cal__month-grid">
+  <div class="bm-cal__day-headers">
+    <div class="bm-cal__header-spacer"></div>
     {#each config.locale.dayNamesShort as name (name)}
-      <div class="day-header">{name}</div>
+      <div class="bm-cal__day-header">{name}</div>
     {/each}
   </div>
 

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,11 +24,16 @@
   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 -->
 <div
-  class="timed-entry{isSelected ? ' timed-entry--selected' : ''}{extraClass}"
+  class="bm-cal-timed-entry{isSelected ? ' bm-cal-timed-entry--selected' : ''}{extraClass}"
   style={slotStyleStr}
   role="button"
   tabindex="0"
@@ -39,11 +45,11 @@
   {#if slots.content}
     {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
   {:else}
-    <span class="timed-entry__dot" style:background-color={ev.metadata.color ?? '#007AFF'}></span>
-    <span class="timed-entry__time">
+    <span class="bm-cal-timed-entry__dot" style:background-color={ev.metadata.color ?? '#007AFF'}></span>
+    <span class="bm-cal-timed-entry__time">
       {toTimeStr(ev.timeRange.start)}
     </span>
-    <span class="timed-entry__title">{renderedTitle}</span>
+    <span class="bm-cal-timed-entry__title">{renderedTitle}</span>
   {/if}
   {#if slots.badges}
     {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}

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"}