@bimetal/calendar-svelte-components 0.29.0

package/dist/views/month/WeekRow.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+  import {
+    isSameDay, getDayOfMonth, getMonth, getHours, getMinutes,
+    calendarWeekNumber, now, maxLanes, lanesPerDay, startOfDay, formatDayLabel,
+    getRecurrenceInstanceMetadata,
+  } from '@bimetal/calendar-core';
+  import { getColFromX, getCalendarContext, getCalendarConfig } from '../../binding/index.js';
+  import type { DragInfo } from '../../binding/index.js';
+  import { createClickIntent, maxVisibleTimedInMonth } from '@bimetal/calendar-headless';
+  import EventBar from '../../components/EventBar.svelte';
+  import TimedEntry from './TimedEntry.svelte';
+
+  let {
+    weekDates,
+    items,
+    timedByDay,
+    currentYear,
+    currentMonth,
+  }: {
+    weekDates: CalendarDateTime[];
+    items: LayoutItem[];
+    timedByDay: Map<number, CalendarEvent[]>;
+    currentYear: number;
+    currentMonth: number;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
+    onSelectEvent: (eventId: string, instanceDate?: number) => void;
+    onClearSelection: () => void;
+    selectedEventId: string | null;
+    selectedInstanceDate: number | undefined;
+    onDropEvent: (e: DragEvent, dropDate: CalendarDateTime) => void;
+    onDayCellClick: (date: CalendarDateTime, anchorRect: DOMRect) => void;
+    onDragOverDate: (date: CalendarDateTime) => void;
+    onHidePreview: () => void;
+    previewEvent: CalendarEvent | null;
+    // B-CAL-3: hover-expandierte Monatszelle (Tag-epochMs) + Intents, Eigentum
+    // des Controllers — KEIN lokales expand-`$state`.
+    expandedMonthDay: number | null;
+    onExpandMonthCell: (dayEpochMs: number) => void;
+    onCollapseMonthCell: () => void;
+  }>();
+
+  let rowEl: HTMLDivElement | undefined = $state();
+  const click = createClickIntent();
+  const timedClick = createClickIntent();
+
+  const lanes = $derived(maxLanes(items));
+  const lanesByCol = $derived(lanesPerDay(items, weekDates.length));
+  const weekNumber = $derived(calendarWeekNumber(weekDates[0]));
+  const today = $derived(now(config.core.timezone, config.core.clock));
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = 'move';
+    if (!rowEl) return;
+    const col = getColFromX(e.clientX, rowEl.getBoundingClientRect());
+    ctx.onDragOverDate(weekDates[col]);
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    const row = e.currentTarget as HTMLElement;
+    const rect = row.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      ctx.onHidePreview();
+    }
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    if (!rowEl) return;
+    const col = getColFromX(e.clientX, rowEl.getBoundingClientRect());
+    ctx.onDropEvent(e, weekDates[col]);
+  }
+
+  function handleDayCellMouseDown() {
+    click.markMouseDown();
+  }
+
+  function handleDayCellClick(e: MouseEvent, date: CalendarDateTime) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    // Single click on an empty cell deselects when something is selected,
+    // otherwise it is a no-op. Create-dialog moves to dblclick.
+    if (ctx.selectedEventId !== null) ctx.onClearSelection();
+  }
+
+  function handleDayCellDoubleClick(e: MouseEvent, date: CalendarDateTime) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onDayCellClick(date, rect);
+  }
+
+  function handleTimedEventMouseDown(e: MouseEvent) {
+    e.stopPropagation();
+    timedClick.markMouseDown();
+  }
+
+  function handleTimedEventClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    e.stopPropagation();
+    if (!timedClick.accept(config.clickThresholdMs)) return;
+    ctx.onSelectEvent(eventId, instanceDate);
+  }
+
+  function handleTimedEventDoubleClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    e.stopPropagation();
+    if (!timedClick.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onEventClick(eventId, rect, instanceDate);
+  }
+
+  function isTimedSelected(ev: CalendarEvent): boolean {
+    const id = getRecurrenceInstanceMetadata(ev)?.instanceDate;
+    return ctx.selectedEventId === ev.id && ctx.selectedInstanceDate === id;
+  }
+</script>
+
+<div
+  bind:this={rowEl}
+  class="week-row"
+  style="--lane-count: {lanes};"
+  role="row"
+  tabindex="-1"
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+>
+  <div class="week-number">{weekNumber}</div>
+
+  {#each weekDates as date, colIdx (colIdx)}
+    {@const isToday = isSameDay(date, today)}
+    {@const inMonth = getMonth(date) === currentMonth}
+    {@const dayNum = getDayOfMonth(date)}
+    {@const dayMs = startOfDay(date).epochMs}
+    {@const timedEvents = timedByDay.get(dayMs) ?? []}
+    {@const cellLanes = lanesByCol[colIdx]}
+    {@const maxVisible = maxVisibleTimedInMonth(cellLanes)}
+    {@const hasOverflow = timedEvents.length > maxVisible}
+    {@const isExpanded = ctx.expandedMonthDay === dayMs}
+    {@const showEvents = isExpanded ? timedEvents : timedEvents.slice(0, maxVisible)}
+    {@const overflow = timedEvents.length - maxVisible}
+
+    <div
+      class="day-cell"
+      class:outside-month={!inMonth}
+      style="grid-column: {colIdx + 2}; grid-row: 1 / -1; --lane-count: {cellLanes};"
+      role="gridcell"
+      tabindex="0"
+      onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleDayCellDoubleClick(e as any, date); }}
+      onmousedown={handleDayCellMouseDown}
+      onclick={(e) => handleDayCellClick(e, date)}
+      ondblclick={(e) => handleDayCellDoubleClick(e, date)}
+    >
+      <div class="day-number-container">
+        <span class="day-number" class:today={isToday}>
+          {formatDayLabel(date, config.locale.code)}
+        </span>
+      </div>
+
+      {#if timedEvents.length > 0}
+        <div class="day-cell__timed">
+          {#each showEvents as ev (ev.id)}
+            <TimedEntry
+              {ev}
+              isSelected={isTimedSelected(ev)}
+              onEntryMouseDown={handleTimedEventMouseDown}
+              onEntryClick={handleTimedEventClick}
+              onEntryDoubleClick={handleTimedEventDoubleClick}
+            />
+          {/each}
+          {#if !isExpanded && hasOverflow}
+            <div
+              class="timed-overflow"
+              role="button"
+              tabindex="0"
+              onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') ctx.onExpandMonthCell(dayMs); }}
+              onmouseenter={() => ctx.onExpandMonthCell(dayMs)}
+            >
+              +{overflow} {config.locale.moreEvents}
+            </div>
+          {/if}
+        </div>
+
+        {#if isExpanded && hasOverflow}
+          <div
+            class="day-cell__expand-overlay"
+            role="tooltip"
+            onmouseleave={() => ctx.onCollapseMonthCell()}
+          >
+            <div class="day-number-container">
+              <span class="day-number" class:today={isToday}>{dayNum}</span>
+            </div>
+            {#each timedEvents as ev (ev.id)}
+              <TimedEntry
+              {ev}
+              isSelected={isTimedSelected(ev)}
+              onEntryMouseDown={handleTimedEventMouseDown}
+              onEntryClick={handleTimedEventClick}
+              onEntryDoubleClick={handleTimedEventDoubleClick}
+            />
+            {/each}
+          </div>
+        {/if}
+      {/if}
+    </div>
+  {/each}
+
+  <!-- Events overlay -->
+  <div class="events-overlay">
+    <div class="events-grid">
+      {#each items as layoutItem, idx (`${layoutItem.segment.event.id}-${idx}`)}
+        {@const isDragged = ctx.previewEvent?.id === layoutItem.segment.event.id}
+        <EventBar
+          item={layoutItem}
+          {weekDates}
+          ghost={isDragged}
+        />
+      {/each}
+    </div>
+  </div>
+</div>

package/dist/views/month/WeekRow.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarEvent, CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    weekDates: CalendarDateTime[];
+    items: LayoutItem[];
+    timedByDay: Map<number, CalendarEvent[]>;
+    currentYear: number;
+    currentMonth: number;
+};
+declare const WeekRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type WeekRow = ReturnType<typeof WeekRow>;
+export default WeekRow;
+//# sourceMappingURL=WeekRow.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WeekRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/month/WeekRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAYzF,KAAK,gBAAgB,GAAI;IACtB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AA6KJ,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/views/resource/ResourceView.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime, Resource } from '@bimetal/calendar-core';
+  import {
+    isSameDay, now, startOfDay, addDays,
+    getHours, getMinutes,
+    createTimeRange, overlaps, formatDateTime,
+    segmentTimed, layoutTimed,
+  } from '@bimetal/calendar-core';
+  import { getCalendarConfig, getCalendarContext, snapTimeFromMouseY } from '../../binding/index.js';
+  import { DEFAULT_HOUR_HEIGHT, DEFAULT_TIME_LABEL_WIDTH_DAY, DEFAULT_SCROLL_HOUR, createClickIntent } from '@bimetal/calendar-headless';
+  import { onMount, tick } from 'svelte';
+  import TimeEvent from '../week/TimeEvent.svelte';
+
+  let {
+    currentDate,
+    visibleResources,
+    onResourceCellClick,
+    onResourceDrop,
+  }: {
+    currentDate: CalendarDateTime;
+    visibleResources: readonly Resource[];
+    onResourceCellClick: (date: CalendarDateTime, time: string, resourceId: string, rect: DOMRect) => void;
+    onResourceDrop: (e: DragEvent, date: CalendarDateTime, time: string, resourceId: string) => void;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    previewEvent: CalendarEvent | null;
+    onDragOverDateTime: (date: CalendarDateTime, time: string) => void;
+    onHidePreview: () => void;
+    selectedEventId: string | null;
+    onClearSelection: () => void;
+  }>();
+
+  const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+  let timeGridEl: HTMLDivElement | undefined = $state();
+  let gridInnerEl: HTMLDivElement | undefined = $state();
+  const click = createClickIntent();
+  const timeSnapMinutes = config.core.granularity.day.minutes;
+
+  onMount(async () => {
+    await tick();
+    if (timeGridEl) timeGridEl.scrollTop = DEFAULT_SCROLL_HOUR * DEFAULT_HOUR_HEIGHT;
+  });
+
+  function getTimeFromMouseY(clientY: number, gridInner: HTMLElement): string {
+    return snapTimeFromMouseY(clientY, gridInner.getBoundingClientRect(), DEFAULT_HOUR_HEIGHT, timeSnapMinutes);
+  }
+
+  const dayStart = $derived(startOfDay(currentDate));
+  const dayEnd = $derived(addDays(dayStart, 1));
+  const dayRange = $derived(createTimeRange(dayStart, dayEnd));
+
+  // B-CAL-1: das vom Controller neu gebaute Event per id eintauschen, damit der
+  // Ghost dem Cursor folgt — die Geometrie kommt aus dem Controller, die View
+  // parst nichts.
+  const displayEvents = $derived.by((): CalendarEvent[] => {
+    const pv = ctx.previewEvent;
+    if (!pv) return ctx.events;
+    return ctx.events.map(ev => ev.id === pv.id ? { ...ev, timeRange: pv.timeRange } : ev);
+  });
+
+  // Lane-Layout pro Resource durch den Core (Pilot-Direktive 2026-06-21).
+  const timedLayoutByResource = $derived.by(() => {
+    const map = new Map<string, ReturnType<typeof layoutTimed>>();
+    for (const r of visibleResources) {
+      const own = displayEvents.filter(ev =>
+        !ev.allDay && ev.resourceId === r.id && overlaps(ev.timeRange, dayRange),
+      );
+      map.set(r.id, layoutTimed(segmentTimed(own, currentDate)));
+    }
+    return map;
+  });
+
+  function resourceFromX(clientX: number, gridInner: HTMLElement): string | null {
+    if (visibleResources.length === 0) return null;
+    const rect = gridInner.getBoundingClientRect();
+    const x = clientX - rect.left - DEFAULT_TIME_LABEL_WIDTH_DAY;
+    if (x < 0) return null;
+    const cw = (rect.width - DEFAULT_TIME_LABEL_WIDTH_DAY) / visibleResources.length;
+    const idx = Math.min(visibleResources.length - 1, Math.max(0, Math.floor(x / cw)));
+    return visibleResources[idx].id;
+  }
+
+  const today = $derived(now(config.core.timezone, config.core.clock));
+  const isToday = $derived(isSameDay(currentDate, today));
+  const dayName = $derived(formatDateTime(currentDate, { locale: config.locale.code, dateStyle: 'full' }));
+  const nowHours = $derived(getHours(today) + getMinutes(today) / 60);
+  const colWidth = $derived(`calc((100% - ${DEFAULT_TIME_LABEL_WIDTH_DAY}px) / ${visibleResources.length})`);
+
+  function handleColumnMouseDown() { click.markMouseDown(); }
+
+  function handleGridDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    if (!gridInnerEl) return;
+    const time = getTimeFromMouseY(e.clientY, gridInnerEl);
+    ctx.onDragOverDateTime(currentDate, time);
+  }
+
+  function handleGridDrop(e: DragEvent) {
+    e.preventDefault();
+    if (!gridInnerEl) return;
+    const resourceId = resourceFromX(e.clientX, gridInnerEl);
+    if (!resourceId) return;
+    const time = getTimeFromMouseY(e.clientY, gridInnerEl);
+    onResourceDrop(e, currentDate, time, resourceId);
+  }
+
+  function handleGridDragLeave(e: DragEvent) {
+    const el = e.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right
+      || e.clientY < rect.top || e.clientY > rect.bottom) {
+      ctx.onHidePreview();
+    }
+  }
+
+  function handleColumnClick(e: MouseEvent) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    if ((e.target as HTMLElement).closest('.time-event')) return;
+    // Single click deselects; create-dialog moves to dblclick.
+    if (ctx.selectedEventId !== null) ctx.onClearSelection();
+  }
+
+  function handleColumnDoubleClick(e: MouseEvent, resourceId: string) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    if (!gridInnerEl) return;
+    if ((e.target as HTMLElement).closest('.time-event')) return;
+    const time = getTimeFromMouseY(e.clientY, gridInnerEl);
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    onResourceCellClick(currentDate, time, resourceId, rect);
+  }
+</script>
+
+{#if visibleResources.length === 0}
+  <div class="resource-view resource-view--empty">{config.locale.unassigned ?? 'No resource selected'}</div>
+{:else}
+  <div class="resource-view">
+    <div class="resource-view__header">
+      <div class="resource-view__day-name">{dayName}</div>
+      <div class="resource-view__resources">
+        <div class="resource-view__time-spacer" style:width={`${DEFAULT_TIME_LABEL_WIDTH_DAY}px`}></div>
+        {#each visibleResources as r (r.id)}
+          <div class="resource-view__resource-header" style="flex: 1 1 0; min-width: 0;">
+            {#if r.color}
+              <span class="resource-view__resource-dot" style:background-color={r.color}></span>
+            {/if}
+            <span class="resource-view__resource-name">{r.name}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <div class="resource-view__time-grid" bind:this={timeGridEl}>
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="resource-view__time-grid-inner"
+        bind:this={gridInnerEl}
+        style:height={`${24 * DEFAULT_HOUR_HEIGHT}px`}
+        ondragover={handleGridDragOver}
+        ondrop={handleGridDrop}
+        ondragleave={handleGridDragLeave}
+      >
+        {#each HOURS as hr (hr)}
+          {@const wh = config.core.workingHours}
+          {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
+          <div
+            class="resource-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+            style:top={`${hr * DEFAULT_HOUR_HEIGHT}px`}
+            style:height={`${DEFAULT_HOUR_HEIGHT}px`}
+          >
+            <div class="resource-view__hour-label">
+              {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
+            </div>
+          </div>
+        {/each}
+
+        {#each visibleResources as r, idx (`col-${r.id}`)}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <div
+            class="resource-view__resource-col"
+            role="gridcell"
+            tabindex="-1"
+            style:left={`calc(${DEFAULT_TIME_LABEL_WIDTH_DAY}px + ${idx} * ${colWidth})`}
+            style:width={colWidth}
+            onmousedown={handleColumnMouseDown}
+            onclick={handleColumnClick}
+            ondblclick={(e) => handleColumnDoubleClick(e, r.id)}
+          ></div>
+        {/each}
+
+        {#each visibleResources as r, idx (`evcol-${r.id}`)}
+          {#each (timedLayoutByResource.get(r.id) ?? []) as item (`${item.segment.event.id}-${item.column}`)}
+            <TimeEvent
+              event={item.segment.event}
+              layout={{
+                dayCol: idx,
+                dayCount: visibleResources.length,
+                lane: item.column,
+                laneCount: item.totalColumns,
+                startOffset: item.startOffset,
+                endOffset: item.endOffset,
+              }}
+              dayDate={currentDate}
+              hourHeight={DEFAULT_HOUR_HEIGHT}
+              timeLabelWidth={DEFAULT_TIME_LABEL_WIDTH_DAY}
+              ghost={ctx.previewEvent?.id === item.segment.event.id}
+            />
+          {/each}
+        {/each}
+
+        {#if isToday}
+          <div
+            class="resource-view__now-line"
+            style:top={`${nowHours * DEFAULT_HOUR_HEIGHT}px`}
+            style:left={`${DEFAULT_TIME_LABEL_WIDTH_DAY}px`}
+          >
+            <div class="resource-view__now-dot"></div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/views/resource/ResourceView.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarDateTime, Resource } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    currentDate: CalendarDateTime;
+    visibleResources: readonly Resource[];
+    onResourceCellClick: (date: CalendarDateTime, time: string, resourceId: string, rect: DOMRect) => void;
+    onResourceDrop: (e: DragEvent, date: CalendarDateTime, time: string, resourceId: string) => void;
+};
+declare const ResourceView: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceView = ReturnType<typeof ResourceView>;
+export default ResourceView;
+//# sourceMappingURL=ResourceView.svelte.d.ts.map

package/dist/views/resource/ResourceView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/resource/ResourceView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAYvF,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,gBAAgB,EAAE,SAAS,QAAQ,EAAE,CAAC;IACtC,mBAAmB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvG,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAClG,CAAC;AA8LJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/views/timeline/TimelineView.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime, Resource, LayoutItem } from '@bimetal/calendar-core';
+  import {
+    startOfDay, addDays, isSameDay, now,
+    segmentInRange, layoutAllDay, maxLanes,
+  } from '@bimetal/calendar-core';
+  import { getCalendarConfig, getCalendarContext } from '../../binding/index.js';
+  import { DEFAULT_RESOURCE_LABEL_WIDTH, createClickIntent } from '@bimetal/calendar-headless';
+  import EventBar from '../../components/EventBar.svelte';
+
+
+  let {
+    currentDate,
+    days,
+    visibleResources,
+    onTimelineCellClick,
+    onTimelineDrop,
+  }: {
+    currentDate: CalendarDateTime;
+    days: number;
+    visibleResources: readonly Resource[];
+    onTimelineCellClick: (date: CalendarDateTime, resourceId: string, rect: DOMRect) => void;
+    onTimelineDrop: (e: DragEvent, date: CalendarDateTime, resourceId: string) => void;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    previewEvent: CalendarEvent | null;
+    onDragOverDate: (date: CalendarDateTime) => void;
+    onHidePreview: () => void;
+    selectedEventId: string | null;
+    onClearSelection: () => void;
+  }>();
+
+  const cellClickIntent = createClickIntent();
+
+  const dates = $derived.by<CalendarDateTime[]>(() => {
+    const start = startOfDay(currentDate);
+    return Array.from({ length: days }, (_, i) => addDays(start, i));
+  });
+
+  const dateFmt = $derived(new Intl.DateTimeFormat(config.locale.code, {
+    weekday: 'short', day: 'numeric', month: 'short', timeZone: config.core.timezone,
+  }));
+
+  // B-CAL-1: Der Tag-Shift-Tanz, der die Uhrzeit erhielt, lebt jetzt im
+  // Controller (`computeMoveRange` ist ein reiner addDays). Einfach das neu
+  // gebaute Event per id eintauschen — die Timeline rekonstruiert nichts mehr.
+  const displayEvents = $derived.by<CalendarEvent[]>(() => {
+    const pv = ctx.previewEvent;
+    if (!pv) return ctx.events;
+    return ctx.events.map(ev => ev.id === pv.id ? { ...ev, timeRange: pv.timeRange } : ev);
+  });
+
+  const lanesByResource = $derived.by(() => {
+    const map = new Map<string, LayoutItem[]>();
+    for (const r of visibleResources) {
+      const own = displayEvents.filter(e => e.resourceId === r.id);
+      const segments = segmentInRange(own, dates);
+      map.set(r.id, layoutAllDay(segments, dates));
+    }
+    return map;
+  });
+
+  const today = $derived(now(config.core.timezone, config.core.clock));
+  const colTemplate = $derived(`${DEFAULT_RESOURCE_LABEL_WIDTH}px repeat(${days}, 1fr)`);
+
+  function dayFromX(clientX: number, laneRect: DOMRect): CalendarDateTime {
+    const x = Math.max(0, clientX - laneRect.left);
+    const colWidth = laneRect.width / dates.length;
+    const idx = Math.min(dates.length - 1, Math.floor(x / colWidth));
+    return dates[idx];
+  }
+
+  function cellMouseDown() {
+    cellClickIntent.markMouseDown();
+  }
+
+  function cellClick() {
+    if (!cellClickIntent.accept(config.clickThresholdMs)) return;
+    // Single click deselects; dblclick opens the dialog.
+    if (ctx.selectedEventId !== null) ctx.onClearSelection();
+  }
+
+  function cellDoubleClick(e: MouseEvent, date: CalendarDateTime, resourceId: string) {
+    if (!cellClickIntent.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    onTimelineCellClick(date, resourceId, rect);
+  }
+
+  function handleLaneDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onDragOverDate(dayFromX(e.clientX, rect));
+  }
+
+  function handleLaneDrop(e: DragEvent, resourceId: string) {
+    e.preventDefault();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    onTimelineDrop(e, dayFromX(e.clientX, rect), resourceId);
+  }
+
+  function handleLaneDragLeave(e: DragEvent) {
+    const el = e.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right
+      || e.clientY < rect.top || e.clientY > rect.bottom) {
+      ctx.onHidePreview();
+    }
+  }
+</script>
+
+{#if visibleResources.length === 0}
+  <div class="timeline-view timeline-view--empty">
+    {config.locale.unassigned ?? 'No resource selected'}
+  </div>
+{:else}
+  <div class="timeline-view">
+    <div class="timeline-view__header" style:grid-template-columns={colTemplate}>
+      <div class="timeline-view__corner"></div>
+      {#each dates as d (d.epochMs)}
+        {@const isToday = isSameDay(d, today)}
+        <div class="timeline-view__date-header{isToday ? ' timeline-view__date-header--today' : ''}">
+          {dateFmt.format(new Date(d.epochMs))}
+        </div>
+      {/each}
+    </div>
+
+    <div class="timeline-view__body">
+      {#each visibleResources as r (r.id)}
+        {@const items = lanesByResource.get(r.id) ?? []}
+        {@const lanes = Math.max(1, maxLanes(items))}
+        <div class="timeline-view__lane">
+          <div class="timeline-view__resource-label" style:width={`${DEFAULT_RESOURCE_LABEL_WIDTH}px`}>
+            {#if r.color}
+              <span class="timeline-view__resource-dot" style:background-color={r.color}></span>
+            {/if}
+            <span class="timeline-view__resource-name">{r.name}</span>
+          </div>
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="timeline-view__lane-content"
+            style:display="grid"
+            style:grid-template-columns={`repeat(${days}, 1fr)`}
+            style:grid-auto-rows="32px"
+            style:min-height={`${lanes * 32}px`}
+            ondragover={handleLaneDragOver}
+            ondrop={(e) => handleLaneDrop(e, r.id)}
+            ondragleave={handleLaneDragLeave}
+          >
+            {#each dates as d, i (`cell-${d.epochMs}`)}
+              {@const isToday = isSameDay(d, today)}
+              <button
+                type="button"
+                class="timeline-view__cell{isToday ? ' timeline-view__cell--today' : ''}"
+                style:grid-column={i + 1}
+                style:grid-row="1 / -1"
+                aria-label="{r.name}, {dateFmt.format(new Date(d.epochMs))}"
+                onmousedown={cellMouseDown}
+                onclick={cellClick}
+                ondblclick={(e) => cellDoubleClick(e, d, r.id)}
+              ></button>
+            {/each}
+            {#each items as item, idx (`${item.segment.event.id}-${idx}`)}
+              <EventBar
+                item={item}
+                weekDates={dates}
+                ghost={ctx.previewEvent?.id === item.segment.event.id}
+              />
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/views/timeline/TimelineView.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarDateTime, Resource } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    currentDate: CalendarDateTime;
+    days: number;
+    visibleResources: readonly Resource[];
+    onTimelineCellClick: (date: CalendarDateTime, resourceId: string, rect: DOMRect) => void;
+    onTimelineDrop: (e: DragEvent, date: CalendarDateTime, resourceId: string) => void;
+};
+declare const TimelineView: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelineView = ReturnType<typeof TimelineView>;
+export default TimelineView;
+//# sourceMappingURL=TimelineView.svelte.d.ts.map

package/dist/views/timeline/TimelineView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/timeline/TimelineView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,QAAQ,EAAc,MAAM,wBAAwB,CAAC;AASnG,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,SAAS,QAAQ,EAAE,CAAC;IACtC,mBAAmB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzF,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACpF,CAAC;AAuJJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}