@urbicon-ui/blocks 6.1.4

package/dist/components/Calendar/CalendarMiniMonth.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { Button } from '../../primitives/Button';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import {
+    getMonthGrid,
+    getWeekdayNames,
+    formatMonthYear,
+    formatDateFull,
+    isSameDay
+  } from '../../date';
+
+  const bt = useBlocksI18n();
+
+  interface CalendarMiniMonthInternalProps {
+    class?: string;
+  }
+
+  let { class: className = '' }: CalendarMiniMonthInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  // Own navigation state — starts synced with main calendar
+  let miniMonth = $state(ctx.displayedMonth);
+  let miniYear = $state(ctx.displayedYear);
+
+  // Sync with main calendar's displayed month/year when they change
+  $effect(() => {
+    miniMonth = ctx.displayedMonth;
+    miniYear = ctx.displayedYear;
+  });
+
+  const miniGrid = $derived(getMonthGrid(miniYear, miniMonth, ctx.weekStartsOn));
+  const miniTitle = $derived(formatMonthYear(miniYear, miniMonth, ctx.locale));
+  const weekdayNames = $derived(getWeekdayNames(ctx.locale, ctx.weekStartsOn, 'narrow'));
+
+  function navigateMini(delta: number) {
+    let m = miniMonth + delta;
+    let y = miniYear;
+    if (m > 11) {
+      m = 0;
+      y++;
+    } else if (m < 0) {
+      m = 11;
+      y--;
+    }
+    miniMonth = m;
+    miniYear = y;
+  }
+
+  function handleDayClick(date: Date) {
+    // Navigate main calendar to this date and select it
+    ctx.selectDate(date);
+    // Also sync view to the clicked day's month
+    if (date.getMonth() !== ctx.displayedMonth || date.getFullYear() !== ctx.displayedYear) {
+      ctx.goToMonth(date.getMonth(), date.getFullYear());
+    }
+    // If in week or day view, update displayed date
+    if (ctx.view === 'week' || ctx.view === 'day') {
+      ctx.navigateDay(0); // triggers a re-render with the newly selected date
+    }
+  }
+
+  // Keyboard navigation for mini calendar grid
+  let focusedMiniDate = $state<Date | null>(null);
+
+  function handleMiniKeydown(e: KeyboardEvent) {
+    if (!focusedMiniDate) return;
+    // Keyboard-nav local computation — no $state on this Date.
+
+    let newDate: Date | null = null;
+
+    /* eslint-disable svelte/prefer-svelte-reactivity */
+    switch (e.key) {
+      case 'ArrowRight':
+        newDate = new Date(focusedMiniDate);
+        newDate.setDate(focusedMiniDate.getDate() + 1);
+        break;
+      case 'ArrowLeft':
+        newDate = new Date(focusedMiniDate);
+        newDate.setDate(focusedMiniDate.getDate() - 1);
+        break;
+      case 'ArrowDown':
+        newDate = new Date(focusedMiniDate);
+        newDate.setDate(focusedMiniDate.getDate() + 7);
+        break;
+      case 'ArrowUp':
+        newDate = new Date(focusedMiniDate);
+        newDate.setDate(focusedMiniDate.getDate() - 7);
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        handleDayClick(focusedMiniDate);
+        return;
+      default:
+        return;
+    }
+    /* eslint-enable svelte/prefer-svelte-reactivity */
+
+    if (newDate) {
+      e.preventDefault();
+      focusedMiniDate = newDate;
+      // Navigate mini calendar if month changed
+      if (newDate.getMonth() !== miniMonth || newDate.getFullYear() !== miniYear) {
+        miniMonth = newDate.getMonth();
+        miniYear = newDate.getFullYear();
+      }
+      requestAnimationFrame(() => {
+        const dateStr = `${newDate!.getFullYear()}-${String(newDate!.getMonth() + 1).padStart(2, '0')}-${String(newDate!.getDate()).padStart(2, '0')}`;
+        const btn = (e.currentTarget as HTMLElement)?.querySelector(
+          `[data-mini-date="${dateStr}"]`
+        ) as HTMLElement;
+        btn?.focus();
+      });
+    }
+  }
+</script>
+
+<div class={slot('miniCalendar', className)}>
+  <!-- Mini header -->
+  <div class={slot('miniCalendarHeader')}>
+    <Button
+      unstyled
+      mint="none"
+      class={slot('miniCalendarNavButton')}
+      onclick={() => navigateMini(-1)}
+      aria-label={bt('calendar.previousMonth')}
+    >
+      ‹
+    </Button>
+    <span class={slot('miniCalendarTitle')}>{miniTitle}</span>
+    <Button
+      unstyled
+      mint="none"
+      class={slot('miniCalendarNavButton')}
+      onclick={() => navigateMini(1)}
+      aria-label={bt('calendar.nextMonth')}
+    >
+      ›
+    </Button>
+  </div>
+
+  <!-- Weekday headers -->
+  <div class="grid grid-cols-7">
+    {#each weekdayNames as name (name)}
+      <span class={slot('miniCalendarWeekday')}>{name}</span>
+    {/each}
+  </div>
+
+  <!-- Day grid -->
+  <div class="grid grid-cols-7" role="grid" onkeydown={handleMiniKeydown}>
+    {#each miniGrid.flat() as date (date.getTime())}
+      {@const inMonth = date.getMonth() === miniMonth}
+      {@const isToday = isSameDay(date, ctx.today)}
+      {@const isSelected = ctx.isDateSelected(date)}
+      {@const hasEvents = ctx.getEventsForDate(date).length > 0}
+      {@const isMiniFirstDay = isSameDay(date, miniGrid[0][0])}
+      {@const isFocusedMini = focusedMiniDate ? isSameDay(date, focusedMiniDate) : false}
+      <button
+        type="button"
+        class="{slot('miniCalendarDay')}
+          {!inMonth ? 'opacity-30' : ''}
+          {isToday && inMonth ? 'bg-primary text-text-on-primary' : ''}
+          {isSelected && !isToday && inMonth ? 'bg-primary-subtle text-primary font-bold' : ''}
+          {hasEvents && inMonth && !isToday && !isSelected ? 'font-bold' : ''}"
+        tabindex={isFocusedMini || (!focusedMiniDate && isMiniFirstDay) ? 0 : -1}
+        role="gridcell"
+        aria-label={formatDateFull(date, ctx.locale)}
+        aria-selected={isSelected || undefined}
+        aria-current={isToday ? 'date' : undefined}
+        data-mini-date={`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`}
+        onclick={() => handleDayClick(date)}
+        onfocus={() => {
+          focusedMiniDate = date;
+        }}
+      >
+        {date.getDate()}
+        {#if hasEvents && inMonth && !isToday}
+          <span class="bg-primary absolute bottom-0 left-1/2 size-1 -translate-x-1/2 rounded-full"
+          ></span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+interface CalendarMiniMonthInternalProps {
+    class?: string;
+}
+declare const CalendarMiniMonth: import("svelte").Component<CalendarMiniMonthInternalProps, {}, "">;
+type CalendarMiniMonth = ReturnType<typeof CalendarMiniMonth>;
+export default CalendarMiniMonth;

package/dist/components/Calendar/CalendarMultiDayBar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { getContrastTextColor } from './calendar.engine';
+  import type { CalendarEvent } from './calendar.types';
+
+  interface CalendarMultiDayBarProps {
+    event: CalendarEvent;
+    startCol: number;
+    spanCols: number;
+    isFirstSegment: boolean;
+    isLastSegment: boolean;
+    row: number;
+    onEventClick?: (event: CalendarEvent) => void;
+  }
+
+  let {
+    event,
+    startCol,
+    spanCols,
+    isFirstSegment,
+    isLastSegment,
+    row,
+    onEventClick
+  }: CalendarMultiDayBarProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  const category = $derived(event.categoryId ? ctx.getCategoryById(event.categoryId) : undefined);
+
+  const bgColor = $derived(category?.color ?? 'var(--color-primary)');
+
+  const textColor = $derived(getContrastTextColor(bgColor));
+
+  const roundedClasses = $derived(
+    [
+      isFirstSegment ? 'rounded-l-md' : 'rounded-l-none',
+      isLastSegment ? 'rounded-r-md' : 'rounded-r-none'
+    ].join(' ')
+  );
+
+  const barHeight = $derived(ctx.size === 'sm' ? 16 : ctx.size === 'lg' ? 24 : 20);
+  const barGap = 2;
+</script>
+
+{#if onEventClick}
+  <button
+    type="button"
+    class="{slot('multiDayBar')} {roundedClasses}"
+    style="
+      grid-column: {startCol + 1} / span {spanCols};
+      grid-row: {row + 1};
+      background-color: {bgColor};
+      color: {textColor};
+      height: {barHeight}px;
+      margin-bottom: {barGap}px;
+    "
+    title={event.title}
+    aria-label={event.title}
+    onclick={() => onEventClick?.(event)}
+  >
+    {#if isFirstSegment}
+      <span class="truncate">{event.title}</span>
+    {/if}
+  </button>
+{:else}
+  <div
+    class="{slot('multiDayBar')} {roundedClasses}"
+    style="
+      grid-column: {startCol + 1} / span {spanCols};
+      grid-row: {row + 1};
+      background-color: {bgColor};
+      color: {textColor};
+      height: {barHeight}px;
+      margin-bottom: {barGap}px;
+    "
+    title={event.title}
+  >
+    {#if isFirstSegment}
+      <span class="truncate">{event.title}</span>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { CalendarEvent } from './calendar.types';
+interface CalendarMultiDayBarProps {
+    event: CalendarEvent;
+    startCol: number;
+    spanCols: number;
+    isFirstSegment: boolean;
+    isLastSegment: boolean;
+    row: number;
+    onEventClick?: (event: CalendarEvent) => void;
+}
+declare const CalendarMultiDayBar: import("svelte").Component<CalendarMultiDayBarProps, {}, "">;
+type CalendarMultiDayBar = ReturnType<typeof CalendarMultiDayBar>;
+export default CalendarMultiDayBar;

package/dist/components/Calendar/CalendarTimeEvent.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Popover } from '../../primitives/Popover';
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { draggableEvent, resizableEvent } from './calendar.drag';
+  import { getContrastTextColor } from './calendar.engine';
+  import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+  import CalendarEventPopover from './CalendarEventPopover.svelte';
+
+  interface CalendarTimeEventInternalProps {
+    event: CalendarEvent;
+    category?: CalendarEventCategory;
+    top: number;
+    height: number;
+    column: number;
+    totalColumns: number;
+    onEventClick?: (event: CalendarEvent) => void;
+  }
+
+  let {
+    event,
+    category,
+    top,
+    height,
+    column,
+    totalColumns,
+    onEventClick
+  }: CalendarTimeEventInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  const bgColor = $derived(category?.color ?? 'oklch(0.65 0.15 250)');
+  const textColor = $derived(getContrastTextColor(bgColor));
+  const widthPercent = $derived(100 / totalColumns);
+  const leftPercent = $derived(column * widthPercent);
+  const isDraggable = $derived(ctx.draggable);
+  const isResizable = $derived(ctx.resizable);
+
+  let eventEl: HTMLButtonElement | undefined = $state();
+
+  // --- Event popover state ---
+  const showPopoverEnabled = $derived(ctx.eventPopover);
+  let popoverOpen = $state(false);
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined;
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function openPopover() {
+    clearTimeout(closeTimer);
+    hoverTimer = setTimeout(() => {
+      popoverOpen = true;
+    }, 300);
+  }
+
+  function scheduleClosePopover() {
+    clearTimeout(hoverTimer);
+    closeTimer = setTimeout(() => {
+      popoverOpen = false;
+    }, 150);
+  }
+
+  function cancelClosePopover() {
+    clearTimeout(closeTimer);
+  }
+
+  function handleMouseEnter() {
+    if (showPopoverEnabled) openPopover();
+  }
+
+  function handleMouseLeave() {
+    if (showPopoverEnabled) scheduleClosePopover();
+  }
+
+  function handleFocus() {
+    if (showPopoverEnabled) {
+      clearTimeout(closeTimer);
+      popoverOpen = true;
+    }
+  }
+
+  function handleBlur() {
+    if (showPopoverEnabled) scheduleClosePopover();
+  }
+
+  onDestroy(() => {
+    clearTimeout(hoverTimer);
+    clearTimeout(closeTimer);
+  });
+
+  function handleDragEnd(targetDate: Date | null) {
+    if (!targetDate || !ctx.onEventMove) return;
+    const eventDuration = event.end ? event.end.getTime() - event.start.getTime() : 60 * 60 * 1000;
+    const newStart = new Date(targetDate); // eslint-disable-line svelte/prefer-svelte-reactivity
+    newStart.setHours(event.start.getHours(), event.start.getMinutes(), event.start.getSeconds());
+    const newEnd = new Date(newStart.getTime() + eventDuration);
+    ctx.onEventMove(event, newStart, newEnd);
+  }
+
+  function handleResizeEnd(ev: CalendarEvent, newEnd: Date) {
+    ctx.onEventResize?.(ev, newEnd);
+  }
+
+  function getGridEl(): HTMLElement | null {
+    let el: HTMLElement | null = eventEl ?? null;
+    while (el) {
+      if (el.scrollHeight > el.clientHeight && el.style.overflowY !== 'hidden') {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return eventEl?.closest('[class*="overflow-y"]') ?? null;
+  }
+</script>
+
+<button
+  bind:this={eventEl}
+  type="button"
+  class="{slot('timeEvent')} {isDraggable ? 'cursor-grab' : onEventClick ? 'cursor-pointer' : ''}"
+  style="
+    top: {top}%;
+    height: {height}%;
+    left: {leftPercent}%;
+    width: calc({widthPercent}% - 2px);
+    background-color: {bgColor};
+    color: {textColor};
+    z-index: {column + 1};
+  "
+  title={showPopoverEnabled ? undefined : event.title}
+  onclick={() => onEventClick?.(event)}
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  {@attach draggableEvent({ event, disabled: !isDraggable, onDragEnd: handleDragEnd })}
+>
+  <span class="block truncate font-medium">{event.title}</span>
+  {#if event.description && height > 5}
+    <span class="block truncate opacity-80">{event.description}</span>
+  {/if}
+
+  {#if isResizable && eventEl}
+    <div
+      class="absolute right-0 bottom-0 left-0 h-1.5 cursor-row-resize rounded-b-md hover:bg-white/30"
+      {@attach resizableEvent({
+        event,
+        gridEl: getGridEl() ?? eventEl.parentElement!,
+        eventEl,
+        startHour: ctx.timeGridStartHour,
+        endHour: ctx.timeGridEndHour,
+        disabled: !isResizable,
+        onResizeEnd: handleResizeEnd
+      })}
+    ></div>
+  {/if}
+</button>
+
+{#if showPopoverEnabled && popoverOpen && eventEl}
+  <Popover
+    triggerElement={eventEl}
+    bind:open={popoverOpen}
+    autoTrigger={false}
+    placement="top"
+    offsetDistance={8}
+    size="sm"
+    onmouseenter={cancelClosePopover}
+    onmouseleave={scheduleClosePopover}
+  >
+    <CalendarEventPopover events={[event]} {onEventClick} />
+  </Popover>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { CalendarEvent, CalendarEventCategory } from './calendar.types';
+interface CalendarTimeEventInternalProps {
+    event: CalendarEvent;
+    category?: CalendarEventCategory;
+    top: number;
+    height: number;
+    column: number;
+    totalColumns: number;
+    onEventClick?: (event: CalendarEvent) => void;
+}
+declare const CalendarTimeEvent: import("svelte").Component<CalendarTimeEventInternalProps, {}, "">;
+type CalendarTimeEvent = ReturnType<typeof CalendarTimeEvent>;
+export default CalendarTimeEvent;

package/dist/components/Calendar/CalendarTimeGrid.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { getCalendarContext, createSlotHelper } from './calendar.context';
+  import { isSameDay, toIso } from '../../date';
+  import { generateTimeSlots, positionEvents } from './calendar.engine';
+  import type { CalendarEvent, PositionedEvent } from './calendar.types';
+  import CalendarTimeEvent from './CalendarTimeEvent.svelte';
+
+  interface CalendarTimeGridInternalProps {
+    dates: Date[];
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+  }
+
+  let { dates, onEventClick, class: className = '' }: CalendarTimeGridInternalProps = $props();
+
+  const ctx = getCalendarContext();
+  const slot = createSlotHelper(ctx);
+
+  // Slot height in px — consistent per-hour height across intervals
+  const hourHeight = $derived(ctx.size === 'sm' ? 40 : ctx.size === 'lg' ? 64 : 48);
+  const slotHeight = $derived(ctx.timeGridInterval === 30 ? hourHeight / 2 : hourHeight);
+  const timeSlots = $derived(
+    generateTimeSlots(ctx.timeGridStartHour, ctx.timeGridEndHour, ctx.timeGridInterval)
+  );
+  const totalHeight = $derived(timeSlots.length * slotHeight);
+
+  // Position timed events per date column
+  const positionedByDate = $derived.by(() => {
+    // Local computation inside $derived — the returned Map is read-only
+    // downstream, so SvelteMap's reactive wrapping is unnecessary.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const map = new Map<string, PositionedEvent[]>();
+    for (const date of dates) {
+      const key = toIso(date);
+      const dayEvents = ctx.getEventsForDate(date).filter((e) => e.allDay === false);
+      map.set(key, positionEvents(dayEvents, date, ctx.timeGridStartHour, ctx.timeGridEndHour));
+    }
+    return map;
+  });
+
+  // Current time indicator (updates every minute)
+  let currentTime = $state(new Date());
+
+  $effect(() => {
+    const id = setInterval(() => {
+      currentTime = new Date();
+    }, 60_000);
+    return () => clearInterval(id);
+  });
+
+  const currentTimePercent = $derived.by(() => {
+    const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
+    const gridStart = ctx.timeGridStartHour * 60;
+    const gridEnd = ctx.timeGridEndHour * 60;
+    if (minutes < gridStart || minutes > gridEnd) return null;
+    return ((minutes - gridStart) / (gridEnd - gridStart)) * 100;
+  });
+
+  let gridEl: HTMLDivElement | undefined = $state();
+
+  // Auto-scroll to current time on mount (only once)
+  let hasAutoScrolled = false;
+  $effect(() => {
+    if (!gridEl || currentTimePercent === null || hasAutoScrolled) return;
+    const scrollTo = (currentTimePercent / 100) * totalHeight - gridEl.clientHeight / 3;
+    gridEl.scrollTop = Math.max(0, scrollTo);
+    hasAutoScrolled = true;
+  });
+
+  const canCreate = $derived(!!ctx.onTimeSlotCreate);
+
+  function handleSlotClick(date: Date, slotHour: number, slotMinute: number) {
+    if (!ctx.onTimeSlotCreate) return;
+    // Local Date math handed straight to a callback — not reactive state.
+    /* eslint-disable svelte/prefer-svelte-reactivity */
+    const start = new Date(date);
+    start.setHours(slotHour, slotMinute, 0, 0);
+    const end = new Date(start);
+    end.setHours(start.getHours() + 1);
+    /* eslint-enable svelte/prefer-svelte-reactivity */
+    ctx.onTimeSlotCreate(start, end);
+  }
+</script>
+
+<div bind:this={gridEl} class={slot('timeGrid', className)}>
+  <div class="flex" style="min-height: {totalHeight}px;">
+    <!-- Time labels column -->
+    <div class="flex shrink-0 flex-col">
+      {#each timeSlots as ts (ts.hour * 60 + ts.minute)}
+        <div class={slot('timeLabel')} style="height: {slotHeight}px;">
+          {ts.label}
+        </div>
+      {/each}
+    </div>
+
+    <!-- Day columns -->
+    <div class="flex flex-1">
+      {#each dates as date (date.getTime())}
+        {@const key = toIso(date)}
+        {@const positioned = positionedByDate.get(key) ?? []}
+        {@const isToday = isSameDay(date, ctx.today)}
+
+        <div class={slot('timeDayColumn')}>
+          <!-- Slot divider lines -->
+          {#each timeSlots as ts (ts.hour * 60 + ts.minute)}
+            {#if canCreate}
+              <button
+                type="button"
+                class="{slot(
+                  'timeSlotRow'
+                )} hover:bg-primary-subtle/30 w-full cursor-cell text-left transition-colors"
+                style="height: {slotHeight}px;"
+                tabindex={-1}
+                aria-label={ts.label}
+                onclick={() => handleSlotClick(date, ts.hour, ts.minute)}
+              ></button>
+            {:else}
+              <div class={slot('timeSlotRow')} style="height: {slotHeight}px;"></div>
+            {/if}
+          {/each}
+
+          <!-- Positioned events -->
+          {#each positioned as pos (pos.event.id)}
+            {@const category = pos.event.categoryId
+              ? ctx.getCategoryById(pos.event.categoryId)
+              : undefined}
+            <CalendarTimeEvent
+              event={pos.event}
+              {category}
+              top={pos.top}
+              height={pos.height}
+              column={pos.column}
+              totalColumns={pos.totalColumns}
+              {onEventClick}
+            />
+          {/each}
+
+          <!-- Current time line -->
+          {#if isToday && currentTimePercent !== null}
+            <div class={slot('currentTimeLine')} style="top: {currentTimePercent}%;">
+              <div class="absolute -top-1 -left-1 size-2 rounded-full bg-red-500"></div>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { CalendarEvent } from './calendar.types';
+interface CalendarTimeGridInternalProps {
+    dates: Date[];
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+}
+declare const CalendarTimeGrid: import("svelte").Component<CalendarTimeGridInternalProps, {}, "">;
+type CalendarTimeGrid = ReturnType<typeof CalendarTimeGrid>;
+export default CalendarTimeGrid;