@bimetal/calendar-svelte-components 0.29.0

package/dist/components/Calendar.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+  import type { CalendarDateTime } from '@bimetal/core';
+  import { getYear, getMonth } from '@bimetal/core';
+  import type { CalendarStore } from '@bimetal/calendar-data';
+  import type { CalendarRule } from '@bimetal/calendar-rules';
+  import { parseDragInfo } from '@bimetal/calendar-headless';
+  import {
+    setCalendarContext,
+    setCalendarConfig,
+    createCalendarControllerBinding,
+  } from '../binding/index.js';
+  import type {
+    CalendarConfig, CalendarConfigInput, CustomViewDefinition, EventDialogMode, RenderEventFn, AnchorRect,
+  } from '../binding/index.js';
+  import { onDestroy, untrack } from 'svelte';
+  import CalendarHeader from './CalendarHeader.svelte';
+  import EventDialog from './EventDialog.svelte';
+  import UndoToast from './UndoToast.svelte';
+  import MonthView from '../views/month/MonthView.svelte';
+  import WeekView from '../views/week/WeekView.svelte';
+  import DayView from '../views/day/DayView.svelte';
+  import AgendaView from '../views/agenda/AgendaView.svelte';
+  import YearView from '../views/year/YearView.svelte';
+  import CategoryFilter from './CategoryFilter.svelte';
+  import ResourceFilter from './ResourceFilter.svelte';
+  import ResourceView from '../views/resource/ResourceView.svelte';
+  import TimelineView from '../views/timeline/TimelineView.svelte';
+
+  let {
+    store,
+    rules = undefined,
+    config: configInput = undefined,
+    darkMode = false,
+    showCategoryFilter = false,
+    showResourceFilter = false,
+    customViews = undefined,
+    eventDialog = { kind: 'builtin' },
+    onEventClick: consumerOnEventClick = undefined,
+    onNewEventRequested: consumerOnNewEventRequested = undefined,
+    renderEvent = undefined,
+    onError = undefined,
+  }: {
+    store: CalendarStore;
+    rules?: CalendarRule[];
+    config?: CalendarConfigInput;
+    darkMode?: boolean;
+    showCategoryFilter?: boolean;
+    showResourceFilter?: boolean;
+    customViews?: readonly CustomViewDefinition[];
+    eventDialog?: EventDialogMode;
+    onEventClick?: (eventId: string, anchorRect: AnchorRect, instanceDate?: number) => void;
+    onNewEventRequested?: (defaultDate: CalendarDateTime, anchorRect: AnchorRect, defaultResourceId?: string) => void;
+    renderEvent?: RenderEventFn;
+    /** Controller error channel: domain rejections surface as toasts; any other
+     *  error (e.g. ConcurrencyError) is passed here instead of rejecting. */
+    onError?: (err: unknown) => void;
+  } = $props();
+
+  // ── Canonical controller binding ──────────────────────────────
+  // The controller owns ALL interaction state and semantics. This component is
+  // a thin bridge: it subscribes to the snapshot, forwards intents, and parses
+  // DOM events into DragInfo. The controller is created ONCE (under `untrack`):
+  // `store` is immutable after mount — runes + `untrack` deliberately do NOT
+  // recreate it when the `store` prop changes; remount the component (e.g. via
+  // `{#key store}`) to switch stores. config/rules/customViews/eventDialog are
+  // captured here only as the initial value and then pushed reactively via the
+  // `$effect`s below, so the initial-value reads are deliberate.
+  const binding = untrack(() => createCalendarControllerBinding({
+    store,
+    config: configInput,
+    rules,
+    customViews,
+    eventDialogKind: eventDialog.kind,
+    // The consumer's `none`-mode callbacks are read fresh on each fire, so they
+    // never go stale even though the controller is created once.
+    onEventClickExternal: (id, rect, inst) => consumerOnEventClick?.(id, rect, inst),
+    onNewEventRequestedExternal: (date, rect, rid) => consumerOnNewEventRequested?.(date, rect, rid),
+    onError: (err) => onError?.(err),
+  }));
+  const ctrl = binding.ctrl;
+
+  // `$binding` auto-subscribes via the store contract; the snapshot is
+  // identity-stable until an intent changes something.
+  const snapshot = $derived($binding);
+
+  // ── Reactive option updates (config is reactive, not mount-captured) ──
+  $effect(() => { ctrl.setConfig(configInput); });
+  $effect(() => { ctrl.setRules(rules); });
+  $effect(() => { ctrl.setCustomViews(customViews); });
+  // F8: dialog mode is a dynamic prop — keep the controller in sync after mount.
+  $effect(() => { ctrl.setEventDialogKind(eventDialog.kind); });
+
+  onDestroy(() => binding.destroy());
+
+  // ── v0.29 Tastatur: root-scoped keydown → controller (Ctrl/Cmd+Z undo, Escape
+  // clears selection). Bound on the `.calendar` root below (onkeydown) — NOT a window
+  // listener (no document-level routing). Semantics live in the controller. ──
+  function onKey(e: KeyboardEvent) {
+    ctrl.handleKeydown(e);
+  }
+
+  // ── DOM-event → controller-intent bindings (the only place DOM is parsed) ──
+  function handleDropEvent(e: DragEvent, dropDate: CalendarDateTime) {
+    const info = parseDragInfo(e.dataTransfer);
+    if (info) void ctrl.dropAllDay(info, dropDate);
+  }
+  function handleDropTimedEvent(e: DragEvent, dropDate: CalendarDateTime, dropTime: string) {
+    const info = parseDragInfo(e.dataTransfer);
+    if (info) void ctrl.dropTimed(info, dropDate, dropTime);
+  }
+  function handleResourceDrop(e: DragEvent, dropDate: CalendarDateTime, dropTime: string, resourceId: string) {
+    const info = parseDragInfo(e.dataTransfer);
+    if (info) void ctrl.dropResource(info, dropDate, dropTime, resourceId);
+  }
+  function handleTimelineDrop(e: DragEvent, dropDate: CalendarDateTime, targetResourceId: string) {
+    const info = parseDragInfo(e.dataTransfer);
+    if (info) void ctrl.dropTimeline(info, dropDate, targetResourceId);
+  }
+
+  function handleResourceCellClick(date: CalendarDateTime, time: string, resourceId: string, anchorRect: AnchorRect) {
+    ctrl.openCreateFromResourceCell(date, time, resourceId, anchorRect);
+  }
+  function handleTimelineCellClick(date: CalendarDateTime, resourceId: string, anchorRect: AnchorRect) {
+    ctrl.openCreate(date, anchorRect, resourceId);
+  }
+
+  // ── Calendar context (shape UNCHANGED so child views need no changes) ──
+  // Getters read straight off the reactive snapshot, so views stay live.
+  // F9: config is provided via a reactive `$state` holder kept in sync with the
+  // snapshot. Child views hold a stable reference (`getCalendarConfig()`) and
+  // read its properties in their templates, so a post-mount `setConfig`
+  // (locale/timezone/granularity) now propagates — matching React/Vue, instead
+  // of freezing the mount-time value under `untrack`.
+  const configHolder = $state<CalendarConfig>(untrack(() => ({ ...snapshot.config })));
+  $effect(() => { Object.assign(configHolder, snapshot.config); });
+  setCalendarConfig(configHolder);
+  setCalendarContext({
+    get events() { return [...snapshot.events]; },
+    get view() { return snapshot.currentView; },
+    // B-CAL-1: das gezogene Event mit bereits neu gebautem timeRange. Views
+    // tauschen es per id ein, rekonstruieren nichts. `null` ohne Drag.
+    get previewEvent() { return snapshot.previewEvent; },
+    // B-CAL-3: die hover-expandierte Monatszelle (Tag-epochMs) + ihre Intents,
+    // Eigentum des Controllers — das Binding hält KEIN expand-`$state`.
+    get expandedMonthDay() { return snapshot.expandedMonthDay; },
+    onExpandMonthCell: (dayEpochMs: number) => ctrl.expandMonthCell(dayEpochMs),
+    onCollapseMonthCell: () => ctrl.collapseMonthCell(),
+    onEventClick: (eventId: string, anchorRect: AnchorRect, instanceDate?: number) => ctrl.openEdit(eventId, anchorRect, instanceDate),
+    onDayCellClick: (date: CalendarDateTime, anchorRect: AnchorRect) => ctrl.openCreate(date, anchorRect),
+    onDropEvent: handleDropEvent,
+    onDropTimedEvent: handleDropTimedEvent,
+    onDragOverDate: (date: CalendarDateTime) => ctrl.updatePreview(date),
+    onDragOverDateTime: (date: CalendarDateTime, time: string) => ctrl.updateTimedPreview(date, time),
+    onDragStart: ctrl.startDrag,
+    onHidePreview: () => ctrl.hidePreview(),
+    onDragEnd: () => ctrl.endDrag(),
+    get selectedEventId() { return snapshot.selection?.eventId ?? null; },
+    get selectedInstanceDate() { return snapshot.selection?.instanceDate; },
+    onSelectEvent: (eventId: string, instanceDate?: number) => ctrl.selectEvent(eventId, instanceDate),
+    onClearSelection: () => ctrl.clearSelection(),
+    onUndo: (entityId: string) => ctrl.undo(entityId),
+    getHistory: (entityId: string) => ctrl.getHistory(entityId),
+    get lastAction() { return snapshot.lastAction; },
+    dismissUndo: () => ctrl.dismissUndo(),
+    get renderEvent() { return renderEvent; },
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="calendar" class:dark={darkMode} onkeydown={onKey}>
+  <CalendarHeader
+    title={snapshot.title}
+    currentView={snapshot.currentView}
+    viewConfigs={[...snapshot.viewConfigList]}
+    onPrev={() => ctrl.prev()}
+    onNext={() => ctrl.next()}
+    onToday={() => ctrl.today()}
+    onViewChange={(v) => ctrl.setView(v)}
+  />
+
+  {#if showCategoryFilter && snapshot.config.categories.length > 0}
+    <CategoryFilter
+      categories={snapshot.config.categories}
+      hiddenCategories={snapshot.hiddenCategories}
+      onToggle={(name) => ctrl.toggleCategory(name)}
+    />
+  {/if}
+
+  {#if showResourceFilter && snapshot.config.resources.length > 0}
+    <ResourceFilter
+      resources={snapshot.config.resources}
+      hiddenResources={snapshot.hiddenResources}
+      onToggle={(id) => ctrl.toggleResource(id)}
+    />
+  {/if}
+
+  {#if snapshot.currentView === 'year'}
+    <YearView year={getYear(snapshot.currentDate)} onMonthClick={(y, m) => ctrl.goToMonth(y, m)} />
+  {:else if snapshot.currentView === 'month'}
+    <MonthView year={getYear(snapshot.currentDate)} month={getMonth(snapshot.currentDate)} />
+  {:else if snapshot.currentView === 'week'}
+    <WeekView currentDate={snapshot.currentDate} />
+  {:else if snapshot.currentView === 'day'}
+    <DayView currentDate={snapshot.currentDate} />
+  {:else if snapshot.currentView === 'agenda'}
+    <AgendaView currentDate={snapshot.currentDate} />
+  {:else if snapshot.currentView === 'resource'}
+    <ResourceView
+      currentDate={snapshot.currentDate}
+      visibleResources={snapshot.visibleResources}
+      onResourceCellClick={handleResourceCellClick}
+      onResourceDrop={handleResourceDrop}
+    />
+  {:else if snapshot.currentView === 'timeline'}
+    <TimelineView
+      currentDate={snapshot.currentDate}
+      days={snapshot.config.core.timelineDays ?? 7}
+      visibleResources={snapshot.visibleResources}
+      onTimelineCellClick={handleTimelineCellClick}
+      onTimelineDrop={handleTimelineDrop}
+    />
+  {:else if customViews && customViews.find(v => v.id === snapshot.currentView)}
+    {@const custom = customViews.find(v => v.id === snapshot.currentView)!}
+    {@const CustomComp = custom.component}
+    <CustomComp
+      currentDate={snapshot.currentDate}
+      events={snapshot.events}
+      config={snapshot.config}
+      onNewEvent={(d, anchorRect) => ctrl.openCreate(d, anchorRect ?? new DOMRect(0, 0, 0, 0))}
+      onEventClick={(eventId, anchorRect, instanceDate) => ctrl.openEdit(eventId, anchorRect, instanceDate)}
+      selectedEventId={snapshot.selection?.eventId ?? null}
+      selectedInstanceDate={snapshot.selection?.instanceDate}
+      onSelectEvent={(eventId, instanceDate) => ctrl.selectEvent(eventId, instanceDate)}
+      onClearSelection={() => ctrl.clearSelection()}
+    />
+  {/if}
+
+  {#if snapshot.dialog && eventDialog.kind === 'builtin'}
+    <EventDialog
+      dialog={snapshot.dialog}
+      setDraft={(patch) => ctrl.setDraft(patch)}
+      onSave={() => void ctrl.saveDialogFromInput()}
+      onDelete={(id) => ctrl.deleteDialog(id)}
+      onClose={() => ctrl.closeDialog()}
+    />
+  {/if}
+
+  {#if snapshot.dialog && eventDialog.kind === 'custom'}
+    {@const CustomDialog = eventDialog.component}
+    <CustomDialog
+      event={snapshot.dialog.event}
+      defaultDate={snapshot.dialog.defaultDate}
+      anchorRect={snapshot.dialog.anchorRect}
+      defaultResourceId={snapshot.dialog.defaultResourceId}
+      config={snapshot.config}
+      onSave={(evt) => ctrl.saveDialog(evt)}
+      onDelete={(id) => ctrl.deleteDialog(id)}
+      onClose={() => ctrl.closeDialog()}
+    />
+  {/if}
+
+  <UndoToast />
+</div>

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

@@ -0,0 +1,24 @@
+import type { CalendarDateTime } from '@bimetal/core';
+import type { CalendarStore } from '@bimetal/calendar-data';
+import type { CalendarRule } from '@bimetal/calendar-rules';
+import type { CalendarConfigInput, CustomViewDefinition, EventDialogMode, RenderEventFn, AnchorRect } from '../binding/index.js';
+type $$ComponentProps = {
+    store: CalendarStore;
+    rules?: CalendarRule[];
+    config?: CalendarConfigInput;
+    darkMode?: boolean;
+    showCategoryFilter?: boolean;
+    showResourceFilter?: boolean;
+    customViews?: readonly CustomViewDefinition[];
+    eventDialog?: EventDialogMode;
+    onEventClick?: (eventId: string, anchorRect: AnchorRect, instanceDate?: number) => void;
+    onNewEventRequested?: (defaultDate: CalendarDateTime, anchorRect: AnchorRect, defaultResourceId?: string) => void;
+    renderEvent?: RenderEventFn;
+    /** Controller error channel: domain rejections surface as toasts; any other
+     *  error (e.g. ConcurrencyError) is passed here instead of rejecting. */
+    onError?: (err: unknown) => void;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;
+//# sourceMappingURL=Calendar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAO5D,OAAO,KAAK,EACQ,mBAAmB,EAAE,oBAAoB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EACtG,MAAM,qBAAqB,CAAC;AAe9B,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClH,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;6EACyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAkMJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/CalendarHeader.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { ViewType } from '@bimetal/calendar-core';
+  import type { ViewConfig } from '../binding/index.js';
+  import { getCalendarConfig } from '../binding/index.js';
+
+  let {
+    title,
+    currentView,
+    viewConfigs,
+    onPrev,
+    onNext,
+    onToday,
+    onViewChange,
+  }: {
+    title: string;
+    currentView: ViewType;
+    viewConfigs: ViewConfig[];
+    onPrev: () => void;
+    onNext: () => void;
+    onToday: () => void;
+    onViewChange: (view: ViewType) => void;
+  } = $props();
+
+  const config = getCalendarConfig();
+</script>
+
+<div class="calendar-header">
+  <h1 class="month-title">{title}</h1>
+  <div class="header-controls">
+    <div class="view-switcher">
+      {#each viewConfigs as vc (vc.type)}
+        <button
+          class="view-btn"
+          class:view-btn--active={currentView === vc.type}
+          onclick={() => onViewChange(vc.type)}
+        >
+          {vc.label}
+        </button>
+      {/each}
+    </div>
+    <div class="nav-controls">
+      <button class="nav-btn" aria-label={config.locale.prev} onclick={onPrev}>&lsaquo;</button>
+      <button class="today-btn" onclick={onToday}>{config.locale.today}</button>
+      <button class="nav-btn" aria-label={config.locale.next} onclick={onNext}>&rsaquo;</button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { ViewType } from '@bimetal/calendar-core';
+import type { ViewConfig } from '../binding/index.js';
+type $$ComponentProps = {
+    title: string;
+    currentView: ViewType;
+    viewConfigs: ViewConfig[];
+    onPrev: () => void;
+    onNext: () => void;
+    onToday: () => void;
+    onViewChange: (view: ViewType) => void;
+};
+declare const CalendarHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;
+//# sourceMappingURL=CalendarHeader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC,CAAC;AAuCJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/CategoryFilter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Category } from '../binding/index.js';
+
+  let {
+    categories,
+    hiddenCategories,
+    onToggle,
+  }: {
+    categories: Category[];
+    hiddenCategories: ReadonlySet<string>;
+    onToggle: (name: string) => void;
+  } = $props();
+</script>
+
+{#if categories.length > 0}
+  <div class="category-filter">
+    {#each categories as cat (cat.name)}
+      {@const isHidden = hiddenCategories.has(cat.name)}
+      <button
+        class="category-filter__pill{isHidden ? ' category-filter__pill--hidden' : ''}"
+        style:background-color={cat.color}
+        onclick={() => onToggle(cat.name)}
+        type="button"
+      >
+        {cat.name}
+      </button>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Category } from '../binding/index.js';
+type $$ComponentProps = {
+    categories: Category[];
+    hiddenCategories: ReadonlySet<string>;
+    onToggle: (name: string) => void;
+};
+declare const CategoryFilter: import("svelte").Component<$$ComponentProps, {}, "">;
+type CategoryFilter = ReturnType<typeof CategoryFilter>;
+export default CategoryFilter;
+//# sourceMappingURL=CategoryFilter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CategoryFilter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEnD,KAAK,gBAAgB,GAAI;IACtB,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAwBJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/EventBar.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import type { CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+  import { daysBetween, getRecurrenceInstanceMetadata, isExpandedRecurrenceInstance } from '@bimetal/calendar-core';
+  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';
+
+  let {
+    item,
+    weekDates,
+    ghost = false,
+  }: {
+    item: LayoutItem;
+    weekDates: CalendarDateTime[];
+    ghost?: boolean;
+  } = $props();
+
+  const ctx = getCalendarContext<{
+    onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
+    onSelectEvent: (eventId: string, instanceDate?: number) => void;
+    selectedEventId: string | null;
+    selectedInstanceDate: number | undefined;
+    onDragStart: (info: DragInfo) => void;
+    onDragEnd: () => void;
+  }>();
+  const config = getCalendarConfig();
+
+  const click = createClickIntent();
+
+  function handleMouseDown() {
+    click.markMouseDown();
+  }
+
+  function handleDragStart(e: DragEvent) {
+    click.markDragged();
+    const { segment, dayIndex, daySpan } = item;
+    const { event } = segment;
+    const bar = e.currentTarget as HTMLElement;
+    const barRect = bar.getBoundingClientRect();
+    const colWidth = barRect.width / daySpan;
+    const grabColInBar = Math.min(
+      Math.max(0, Math.floor((e.clientX - barRect.left) / colWidth)),
+      daySpan - 1,
+    );
+
+    const grabbedDate = weekDates[dayIndex + grabColInBar];
+    const offset = daysBetween(event.timeRange.start, grabbedDate);
+
+    const info = buildDragInfo(event, 'move', { dayOffset: offset });
+    writeCalendarDragData(e.dataTransfer!, info);
+    ctx.onDragStart(info);
+  }
+
+  function handleResizeDragStart(e: DragEvent, edge: 'start' | 'end') {
+    e.stopPropagation();
+    click.markDragged();
+    installTransparentDragImage(e.dataTransfer!);
+    const { event } = item.segment;
+    const info = buildDragInfo(event, 'resize', { edge });
+    writeCalendarDragData(e.dataTransfer!, info);
+    ctx.onDragStart(info);
+  }
+
+  function handleClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!click.accept(config.clickThresholdMs)) return;
+    const instanceDate = getRecurrenceInstanceMetadata(item.segment.event)?.instanceDate;
+    ctx.onSelectEvent(item.segment.event.id, instanceDate);
+  }
+
+  function handleDoubleClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!click.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const instanceDate = getRecurrenceInstanceMetadata(item.segment.event)?.instanceDate;
+    ctx.onEventClick(item.segment.event.id, rect, instanceDate);
+  }
+
+  const segment = $derived(item.segment);
+  const event = $derived(segment.event);
+  const isStart = $derived(segment.isStart);
+  const isEnd = $derived(segment.isEnd);
+  const startCol = $derived(item.dayIndex);
+  const span = $derived(item.daySpan);
+  const lane = $derived(item.column);
+  const isCompact = $derived(span === 1 && isStart && isEnd && !event.allDay);
+  const isBar = $derived(!isCompact);
+  const color = $derived(event.metadata.color ?? '#007AFF');
+  const isRecurring = $derived(isExpandedRecurrenceInstance(event) || !!event.recurrence);
+  const ghostClass = $derived(ghost ? ' event-bar--ghost' : '');
+  const instanceDate = $derived(getRecurrenceInstanceMetadata(event)?.instanceDate);
+  const isSelected = $derived(ctx.selectedEventId === event.id && ctx.selectedInstanceDate === instanceDate);
+  const selectedClass = $derived(isSelected ? ' event-bar--selected' : '');
+
+  const gridStyle = $derived(`grid-column: ${startCol + 1} / span ${span}; grid-row: ${lane + 1};`);
+  const barStyle = $derived(
+    isCompact
+      ? gridStyle
+      : `${gridStyle} background-color: ${color}; border-radius: ${isStart ? 4 : 0}px ${isEnd ? 4 : 0}px ${isEnd ? 4 : 0}px ${isStart ? 4 : 0}px;`
+  );
+
+  const timeStr = $derived(toTimeStr(event.timeRange.start));
+
+  const slots = $derived(getEventSlots(event));
+  const renderedTitle = $derived(slots.title ?? event.title);
+  const extraClass = $derived(slots.className ? ' ' + slots.className : '');
+  const slotStyle = $derived(slots.style
+    ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
+    : '');
+  const fullStyle = $derived(slotStyle ? `${barStyle} ${slotStyle}` : barStyle);
+</script>
+
+{#if isCompact}
+  <div
+    class="event-bar event-bar--single{ghostClass}{selectedClass}{extraClass}"
+    style={fullStyle}
+    draggable={!ghost}
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e as any); }}
+    onmousedown={handleMouseDown}
+    ondragstart={handleDragStart}
+    ondragend={ctx.onDragEnd}
+    onclick={handleClick}
+    ondblclick={handleDoubleClick}
+    title={renderedTitle}
+  >
+    {#if slots.content}
+      {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
+    {:else}
+      <span class="event-dot" style:background-color={color}></span>
+      <span class="event-time">{timeStr}</span>
+      <span class="event-title event-title--dark">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
+    {/if}
+    {#if slots.badges}
+      {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
+    {/if}
+  </div>
+{:else}
+  <div
+    class="event-bar event-bar--multi{ghostClass}{selectedClass}{extraClass}"
+    style={fullStyle}
+    draggable={!ghost}
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e as any); }}
+    onmousedown={handleMouseDown}
+    ondragstart={handleDragStart}
+    ondragend={ctx.onDragEnd}
+    onclick={handleClick}
+    ondblclick={handleDoubleClick}
+    title={renderedTitle}
+  >
+    {#if isBar && isStart && !ghost}
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
+      <div
+        class="resize-handle resize-handle--start"
+        role="separator"
+        aria-label="Resize start"
+        draggable={true}
+        ondragstart={(e) => handleResizeDragStart(e, 'start')}
+        ondragend={ctx.onDragEnd}
+        onmousedown={(e) => e.stopPropagation()}
+      ></div>
+    {/if}
+    {#if slots.content}
+      {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
+    {:else}
+      <span class="event-title{eventBarWantsDarkText(color) ? ' event-title--on-light' : ''}">{isRecurring ? '↻ ' : ''}{renderedTitle}</span>
+    {/if}
+    {#if slots.badges}
+      {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
+    {/if}
+    {#if isBar && isEnd && !ghost}
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
+      <div
+        class="resize-handle resize-handle--end"
+        role="separator"
+        aria-label="Resize end"
+        draggable={true}
+        ondragstart={(e) => handleResizeDragStart(e, 'end')}
+        ondragend={ctx.onDragEnd}
+        onmousedown={(e) => e.stopPropagation()}
+      ></div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    item: LayoutItem;
+    weekDates: CalendarDateTime[];
+    ghost?: boolean;
+};
+declare const EventBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventBar = ReturnType<typeof EventBar>;
+export default EventBar;
+//# sourceMappingURL=EventBar.svelte.d.ts.map

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

@@ -0,0 +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"}