@intinyagroup/calendar 0.1.1-alpha.11 → 0.1.1-alpha.13

package/dist/DatePicker.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import * as Popover from '@intinyagroup/ui';
   import { Button, Input } from '@intinyagroup/ui';
-  import { Calendar, type CalendarDate } from '@intinyagroup/calendar';
+  import Calendar, { type CalendarDate } from './Calendar.svelte';
   import { Calendar as CalendarIcon, X } from 'lucide-svelte';
-  import { cn } from '@intinyagroup/grid-core/utils';
+  import { cn } from '@intinyagroup/ui/utils';
 
   let {
     value = $bindable(null),

package/dist/DatePicker.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CalendarDate } from '@intinyagroup/calendar';
+import { type CalendarDate } from './Calendar.svelte';
 type $$ComponentProps = {
     value?: CalendarDate | null;
     placeholder?: string;

package/dist/DateRangePicker.svelte

@@ -186,14 +186,23 @@
 </script>
 
 <div class={cn('relative inline-block w-full max-w-sm', className)}>
-  <button
-    type="button"
-    {disabled}
-    onclick={() => (isOpen = !isOpen)}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-disabled={disabled}
+    onclick={() => { if (!disabled) isOpen = !isOpen; }}
+    onkeydown={(e) => {
+      if (disabled) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        isOpen = !isOpen;
+      }
+    }}
     class={cn(
-      'flex h-10 w-full items-center justify-between rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 text-sm transition-colors text-left',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 text-sm transition-colors text-left cursor-pointer select-none',
       'hover:border-[var(--ui-border)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-ring)]/20 focus:border-[var(--ui-primary)]',
-      disabled && 'opacity-50 cursor-not-allowed',
+      disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
       value.start ? 'text-[var(--ui-foreground)]' : 'text-[var(--ui-muted-foreground)]'
     )}
   >
@@ -205,14 +214,17 @@
     {#if value.start && !disabled}
       <button
         type="button"
-        onclick={clearRange}
+        onclick={(e) => {
+          e.stopPropagation();
+          clearRange();
+        }}
         class="p-1 rounded-full hover:bg-[var(--ui-secondary)] text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]"
         aria-label="Clear date range"
       >
         <X class="size-3.5" />
       </button>
     {/if}
-  </button>
+  </div>
 
   {#if isOpen}
     <!-- Backdrop for click outside -->

package/dist/EventCalendar.svelte

@@ -44,6 +44,7 @@
     onEventClick,
     onDateClick,
     onAddEvent,
+    onEventReschedule,
   }: {
     events?: CalendarEvent[];
     view?: CalendarView;
@@ -56,17 +57,152 @@
     onEventClick?: (event: CalendarEvent) => void;
     onDateClick?: (date: Date) => void;
     onAddEvent?: (newEvent: CalendarEvent) => void;
+    onEventReschedule?: (detail: { event: CalendarEvent; newStart: Date; newEnd: Date }) => void;
+    onEventResize?: (detail: { event: CalendarEvent; newStart: Date; newEnd: Date }) => void;
   } = $props();
 
-  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
-  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+  let draggedEventId = $state<string | null>(null);
+  let resizingEventId = $state<string | null>(null);
+  let resizeStartY = $state<number>(0);
+  let resizeStartDuration = $state<number>(0);
+
+  function isMultiDayOrAllDay(ev: CalendarEvent): boolean {
+    if (ev.allDay) return true;
+    const s = new Date(ev.start);
+    const e = new Date(ev.end);
+    return !isSameDay(s, e) || (e.getTime() - s.getTime() >= 24 * 60 * 60 * 1000);
+  }
+
+  function handleEventDrop(targetDate: Date, targetHour?: number) {
+    if (!draggedEventId) return;
+    const ev = events.find((e) => e.id === draggedEventId);
+    if (!ev) return;
+
+    const origDurationMs = new Date(ev.end).getTime() - new Date(ev.start).getTime();
+    const newStart = new Date(targetDate);
+    if (targetHour !== undefined) {
+      newStart.setHours(targetHour, 0, 0, 0);
+    } else {
+      newStart.setHours(new Date(ev.start).getHours(), new Date(ev.start).getMinutes(), 0, 0);
+    }
+    const newEnd = new Date(newStart.getTime() + origDurationMs);
+
+    events = events.map((e) =>
+      e.id === draggedEventId ? { ...e, start: newStart, end: newEnd } : e
+    );
+
+    onEventReschedule?.({ event: ev, newStart, newEnd });
+    draggedEventId = null;
+  }
+
+  function handleResizeStart(e: MouseEvent, ev: CalendarEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    resizingEventId = ev.id;
+    resizeStartY = e.clientY;
+    resizeStartDuration = new Date(ev.end).getTime() - new Date(ev.start).getTime();
+
+    function onMouseMove(moveEvent: MouseEvent) {
+      if (!resizingEventId) return;
+      const deltaY = moveEvent.clientY - resizeStartY;
+      // 56px per hour => deltaY / 56 hours
+      const deltaHours = deltaY / 56;
+      // Snap to 15 minute increments (0.25h = 15 * 60 * 1000 ms)
+      const snapIntervalMs = 15 * 60 * 1000;
+      const rawDeltaMs = deltaHours * 60 * 60 * 1000;
+      const snappedDeltaMs = Math.round(rawDeltaMs / snapIntervalMs) * snapIntervalMs;
+      const newDurationMs = Math.max(15 * 60 * 1000, resizeStartDuration + snappedDeltaMs);
+
+      events = events.map((item) => {
+        if (item.id === resizingEventId) {
+          const s = new Date(item.start);
+          return { ...item, end: new Date(s.getTime() + newDurationMs) };
+        }
+        return item;
+      });
+    }
+
+    function onMouseUp() {
+      if (resizingEventId) {
+        const finished = events.find((item) => item.id === resizingEventId);
+        if (finished) {
+          onEventResize?.({ event: finished, newStart: new Date(finished.start), newEnd: new Date(finished.end) });
+        }
+      }
+      resizingEventId = null;
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    }
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
+
+  type LayoutEvent = CalendarEvent & {
+    colIndex: number;
+    colTotal: number;
+  };
+
+  function computeOverlappingLayout(dayEvs: CalendarEvent[]): LayoutEvent[] {
+    // Sort events by start time, then longer events first
+    const sorted = [...dayEvs].sort((a, b) => {
+      const diff = new Date(a.start).getTime() - new Date(b.start).getTime();
+      if (diff !== 0) return diff;
+      return (new Date(b.end).getTime() - new Date(b.start).getTime()) - (new Date(a.end).getTime() - new Date(a.start).getTime());
+    });
+
+    const columns: CalendarEvent[][] = [];
+    const layoutMap = new Map<string, { colIndex: number }>();
+
+    for (const ev of sorted) {
+      let placed = false;
+      for (let i = 0; i < columns.length; i++) {
+        const lastInCol = columns[i][columns[i].length - 1];
+        if (new Date(lastInCol.end).getTime() <= new Date(ev.start).getTime()) {
+          columns[i].push(ev);
+          layoutMap.set(ev.id, { colIndex: i });
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) {
+        columns.push([ev]);
+        layoutMap.set(ev.id, { colIndex: columns.length - 1 });
+      }
+    }
+
+    // Determine overlapping groups
+    return sorted.map((ev) => {
+      const colInfo = layoutMap.get(ev.id) || { colIndex: 0 };
+      // Count how many columns overlap with this event
+      let overlappingCols = 1;
+      for (let c = 0; c < columns.length; c++) {
+        const hasOverlap = columns[c].some(
+          (other) =>
+            new Date(other.start).getTime() < new Date(ev.end).getTime() &&
+            new Date(other.end).getTime() > new Date(ev.start).getTime()
+        );
+        if (hasOverlap && c + 1 > overlappingCols) {
+          overlappingCols = c + 1;
+        }
+      }
+
+      return {
+        ...ev,
+        colIndex: colInfo.colIndex,
+        colTotal: Math.max(1, overlappingCols),
+      };
+    });
+  }
 
   const activeTimeZone = $derived(
     timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
   );
 
-  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
+  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
 
+  const hours = Array.from({ length: 24 }, (_, i) => i);
   // Day names localized and rotated according to firstDayOfWeek via date-fns
   const dayNames = $derived.by(() => {
     const start = startOfWeek(currentDate, { weekStartsOn });
@@ -116,7 +252,26 @@
   });
 
   function getEventsForDay(d: Date): CalendarEvent[] {
-    return events.filter((ev) => isSameDay(new Date(ev.start), d));
+    return events.filter((ev) => {
+      if (isSameDay(new Date(ev.start), d)) return true;
+      // Multi-day spanning: check if date falls between start and end
+      const s = new Date(ev.start);
+      const e = new Date(ev.end);
+      return d >= s && d <= e;
+    });
+  }
+
+  function getTimedEventsForDay(d: Date): CalendarEvent[] {
+    return events.filter((ev) => !isMultiDayOrAllDay(ev) && isSameDay(new Date(ev.start), d));
+  }
+
+  function getAllDayEventsForWeek(days: Date[]): CalendarEvent[] {
+    return events.filter((ev) => {
+      if (!isMultiDayOrAllDay(ev)) return false;
+      const s = new Date(ev.start);
+      const e = new Date(ev.end);
+      return days.some((d) => isSameDay(d, s) || isSameDay(d, e) || (d > s && d < e));
+    });
   }
 
   function getTimeInZone(date: Date): { hours: number; minutes: number } {
@@ -293,12 +448,18 @@
             onDateClick?.(date);
             openCreateModal(date);
           }}
+          ondragover={(e) => e.preventDefault()}
+          ondrop={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleEventDrop(date);
+          }}
           class={cn(
-            'min-h-[100px] p-2 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer',
+            'min-h-[110px] p-1.5 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer select-none',
             !currentMonth && 'bg-[var(--ui-muted)]/15 opacity-50'
           )}
         >
-          <div class="flex items-center justify-between mb-1">
+          <div class="flex items-center justify-between mb-0.5 px-1">
             <span
               class={cn(
                 'text-xs font-semibold size-6 flex items-center justify-center rounded-full',
@@ -314,27 +475,44 @@
             {/if}
           </div>
 
-          <!-- Event pills -->
+          <!-- Event pills with spanning indicator -->
           <div class="flex flex-col gap-1 overflow-hidden">
             {#each dayEvents.slice(0, 3) as ev (ev.id)}
+              {@const isSpanning = isMultiDayOrAllDay(ev)}
+              {@const isStartDay = isSameDay(new Date(ev.start), date)}
+              {@const isEndDay = isSameDay(new Date(ev.end), date)}
+
               <button
                 type="button"
+                draggable="true"
+                ondragstart={(e) => {
+                  e.stopPropagation();
+                  draggedEventId = ev.id;
+                  e.dataTransfer?.setData('text/plain', ev.id);
+                }}
                 onclick={(e) => {
                   e.stopPropagation();
                   onEventClick?.(ev);
                 }}
                 class={cn(
-                  'truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs',
-                  ev.color ? '' : 'bg-[var(--ui-primary)]'
+                  'truncate px-1.5 py-0.5 text-left text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs cursor-grab active:cursor-grabbing',
+                  isSpanning ? 'rounded-none' : 'rounded',
+                  isSpanning && isStartDay && 'rounded-l-md',
+                  isSpanning && isEndDay && 'rounded-r-md',
+                  draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''
                 )}
-                style={ev.color ? `background-color: ${ev.color};` : undefined}
+                style="background-color: {ev.color || 'var(--ui-primary)'};"
               >
-                {formatTime(ev.start)} {ev.title}
+                {#if isSpanning}
+                  <span class="font-semibold">{ev.title}</span>
+                {:else}
+                  <span class="opacity-80 font-normal">{formatTime(ev.start)}</span> {ev.title}
+                {/if}
               </button>
             {/each}
 
             {#if dayEvents.length > 3}
-              <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] pl-1">
+              <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] px-1">
                 +{dayEvents.length - 3} more
               </span>
             {/if}
@@ -356,6 +534,31 @@
       {/each}
     </div>
 
+    <!-- All-day header slot (FullCalendar 1:1) -->
+    {@const allDayEvents = getAllDayEventsForWeek(weekDays)}
+    {#if allDayEvents.length > 0}
+      <div class="grid grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/10 text-xs divide-x divide-[var(--ui-border)] py-1.5">
+        <div class="col-span-1 text-right pr-2 text-[10px] uppercase tracking-wider font-semibold text-[var(--ui-muted-foreground)] flex items-center justify-end">
+          all-day
+        </div>
+        <div class="col-span-7 px-2 flex flex-col gap-1">
+          {#each allDayEvents as ev (ev.id)}
+            <button
+              type="button"
+              onclick={(e) => {
+                e.stopPropagation();
+                onEventClick?.(ev);
+              }}
+              class="w-full truncate rounded px-2 py-0.5 text-left text-[11px] font-semibold text-white shadow-2xs hover:opacity-90"
+              style="background-color: {ev.color || 'var(--ui-primary)'};"
+            >
+              {ev.title} {#if ev.description}• {ev.description}{/if}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
     <div class="grid grid-cols-8 divide-x divide-[var(--ui-border)] max-h-[600px] overflow-y-auto">
       <!-- Hours Column -->
       <div class="col-span-1 divide-y divide-[var(--ui-border)]/50 text-right pr-2 text-[11px] font-medium text-[var(--ui-muted-foreground)]">
@@ -366,7 +569,8 @@
 
       <!-- 7 Days Grid Columns -->
       {#each weekDays as d}
-        {@const dayEvents = getEventsForDay(d)}
+        {@const dayEvents = getTimedEventsForDay(d)}
+        {@const layoutEvents = computeOverlappingLayout(dayEvents)}
         {@const isCurrentDay = isToday(d)}
         {@const nowTime = getTimeInZone(new Date())}
         {@const nowMinutes = nowTime.hours * 60 + nowTime.minutes}
@@ -376,10 +580,19 @@
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <div
           onclick={() => openCreateModal(d)}
-          class="col-span-1 divide-y divide-[var(--ui-border)]/50 relative hover:bg-[var(--ui-secondary)]/10 cursor-pointer"
+          class="col-span-1 divide-y divide-[var(--ui-border)]/50 relative hover:bg-[var(--ui-secondary)]/10 cursor-pointer select-none"
         >
-          {#each hours as _}
-            <div class="h-14"></div>
+          {#each hours as hour}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="h-14 transition-colors hover:bg-[var(--ui-primary)]/10"
+              ondragover={(e) => e.preventDefault()}
+              ondrop={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEventDrop(d, hour);
+              }}
+            ></div>
           {/each}
 
           <!-- Google Calendar style Current Time Red Line -->
@@ -393,22 +606,50 @@
             </div>
           {/if}
 
-          <!-- Render Event Boxes -->
-          {#each dayEvents as ev (ev.id)}
-            {@const evTime = getTimeInZone(new Date(ev.start))}
-            {@const topPos = (evTime.hours + evTime.minutes / 60) * 56}
-            <button
-              type="button"
+          <!-- Render Event Boxes with Collision Overlap Calculation & Resizing -->
+          {#each layoutEvents as ev (ev.id)}
+            {@const evStartTime = getTimeInZone(new Date(ev.start))}
+            {@const evEndTime = getTimeInZone(new Date(ev.end))}
+            {@const startMinutes = evStartTime.hours * 60 + evStartTime.minutes}
+            {@const endMinutes = evEndTime.hours * 60 + evEndTime.minutes}
+            {@const durationMinutes = Math.max(15, endMinutes > startMinutes ? endMinutes - startMinutes : 60)}
+            {@const topPos = (startMinutes / 60) * 56}
+            {@const heightPos = Math.max(26, (durationMinutes / 60) * 56)}
+            {@const widthPercent = 100 / ev.colTotal}
+            {@const leftPercent = ev.colIndex * widthPercent}
+
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <div
+              role="button"
+              tabindex="0"
+              draggable="true"
+              ondragstart={(e) => {
+                draggedEventId = ev.id;
+                e.dataTransfer?.setData('text/plain', ev.id);
+              }}
               onclick={(e) => {
                 e.stopPropagation();
                 onEventClick?.(ev);
               }}
-              class="absolute inset-x-1 rounded p-1 text-left text-[11px] text-white shadow-xs transition-opacity hover:opacity-90 overflow-hidden z-10"
-              style="top: {topPos}px; height: 50px; background-color: {ev.color || 'var(--ui-primary)'};"
+              onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onEventClick?.(ev);
+                }
+              }}
+              class="group/event absolute rounded p-1 text-left text-[11px] text-white shadow-xs transition-opacity hover:opacity-95 overflow-hidden z-10 cursor-grab active:cursor-grabbing {draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''}"
+              style="top: {topPos}px; height: {heightPos}px; left: calc({leftPercent}% + 2px); width: calc({widthPercent}% - 4px); background-color: {ev.color || 'var(--ui-primary)'};"
             >
-              <div class="font-bold truncate">{ev.title}</div>
-              <div class="text-[9px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)}</div>
-            </button>
+              <div class="font-bold truncate leading-tight">{ev.title}</div>
+              <div class="text-[9px] opacity-85 leading-tight">{formatTime(ev.start)} - {formatTime(ev.end)}</div>
+
+              <!-- Bottom edge resize handle (FullCalendar 1:1) -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="absolute inset-x-0 bottom-0 h-2 cursor-s-resize opacity-0 group-hover/event:opacity-100 bg-white/20 hover:bg-white/40 transition-opacity z-20"
+                onmousedown={(e) => handleResizeStart(e, ev)}
+              ></div>
+            </div>
           {/each}
         </div>
       {/each}
@@ -432,23 +673,20 @@
         {/each}
       </div>
 
-      {@const isCurrentDay = isToday(currentDate)}
-      {@const nowTime = getTimeInZone(new Date())}
-      {@const nowMinutes = nowTime.hours * 60 + nowTime.minutes}
-      {@const currentTimeTop = (nowMinutes / 60) * 64}
-
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <div
         onclick={() => openCreateModal(currentDate)}
-        class="col-span-10 divide-y divide-[var(--ui-border)]/50 relative p-1 hover:bg-[var(--ui-secondary)]/10 cursor-pointer"
+        class="col-span-10 divide-y divide-[var(--ui-border)]/50 relative p-1 hover:bg-[var(--ui-secondary)]/10 cursor-pointer select-none"
       >
         {#each hours as _}
           <div class="h-16"></div>
         {/each}
 
         <!-- Google Calendar style Current Time Red Line -->
-        {#if isCurrentDay}
+        {#if isToday(currentDate)}
+          {@const nowTime = getTimeInZone(new Date())}
+          {@const currentTimeTop = ((nowTime.hours * 60 + nowTime.minutes) / 60) * 64}
           <div
             class="absolute inset-x-0 z-30 pointer-events-none flex items-center"
             style="top: {currentTimeTop}px;"
@@ -458,21 +696,49 @@
           </div>
         {/if}
 
-        {#each getEventsForDay(currentDate) as ev (ev.id)}
-          {@const evTime = getTimeInZone(new Date(ev.start))}
-          {@const topPos = (evTime.hours + evTime.minutes / 60) * 64}
-          <button
-            type="button"
+        {#each computeOverlappingLayout(getTimedEventsForDay(currentDate)) as ev (ev.id)}
+          {@const evStartTime = getTimeInZone(new Date(ev.start))}
+          {@const evEndTime = getTimeInZone(new Date(ev.end))}
+          {@const startMinutes = evStartTime.hours * 60 + evStartTime.minutes}
+          {@const endMinutes = evEndTime.hours * 60 + evEndTime.minutes}
+          {@const durationMinutes = Math.max(15, endMinutes > startMinutes ? endMinutes - startMinutes : 60)}
+          {@const topPos = (startMinutes / 60) * 64}
+          {@const heightPos = Math.max(32, (durationMinutes / 60) * 64)}
+          {@const widthPercent = 100 / ev.colTotal}
+          {@const leftPercent = ev.colIndex * widthPercent}
+
+          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+          <div
+            role="button"
+            tabindex="0"
+            draggable="true"
+            ondragstart={(e) => {
+              draggedEventId = ev.id;
+              e.dataTransfer?.setData('text/plain', ev.id);
+            }}
             onclick={(e) => {
               e.stopPropagation();
               onEventClick?.(ev);
             }}
-            class="absolute inset-x-4 rounded-lg p-2 text-left text-white shadow-sm transition-opacity hover:opacity-90 flex flex-col justify-center z-10"
-            style="top: {topPos}px; height: 56px; background-color: {ev.color || 'var(--ui-primary)'};"
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onEventClick?.(ev);
+              }
+            }}
+            class="group/event absolute rounded-lg p-2 text-left text-white shadow-sm transition-opacity hover:opacity-95 overflow-hidden z-10 cursor-grab active:cursor-grabbing {draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''}"
+            style="top: {topPos}px; height: {heightPos}px; left: calc({leftPercent}% + 4px); width: calc({widthPercent}% - 8px); background-color: {ev.color || 'var(--ui-primary)'};"
           >
-            <div class="font-bold text-xs">{ev.title}</div>
-            <div class="text-[10px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)} {#if ev.description}• {ev.description}{/if}</div>
-          </button>
+            <div class="font-bold text-xs truncate leading-tight">{ev.title}</div>
+            <div class="text-[10px] opacity-85 leading-tight">{formatTime(ev.start)} - {formatTime(ev.end)} {#if ev.description}• {ev.description}{/if}</div>
+
+            <!-- Bottom resize handle -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="absolute inset-x-0 bottom-0 h-2.5 cursor-s-resize opacity-0 group-hover/event:opacity-100 bg-white/20 hover:bg-white/40 transition-opacity z-20"
+              onmousedown={(e) => handleResizeStart(e, ev)}
+            ></div>
+          </div>
         {/each}
       </div>
     </div>
@@ -500,28 +766,30 @@
 
         <div class="space-y-3.5 text-xs">
           <div>
-            <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Title</label>
+            <label for="event-cal-title" class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Title</label>
             <input
+              id="event-cal-title"
               type="text"
               bind:value={newEventTitle}
               placeholder="Event title (e.g. Sprint Review)..."
               class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-3 text-xs outline-none focus:border-[var(--ui-primary)]"
-              autofocus
             />
           </div>
 
           <div class="grid grid-cols-2 gap-3">
             <div>
-              <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Start Time</label>
+              <label for="event-cal-start-time" class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Start Time</label>
               <input
+                id="event-cal-start-time"
                 type="time"
                 bind:value={newEventStartTime}
                 class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
               />
             </div>
             <div>
-              <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">End Time</label>
+              <label for="event-cal-end-time" class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">End Time</label>
               <input
+                id="event-cal-end-time"
                 type="time"
                 bind:value={newEventEndTime}
                 class="h-9 w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] px-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
@@ -530,7 +798,7 @@
           </div>
 
           <div>
-            <label class="block mb-1.5 font-semibold text-[var(--ui-muted-foreground)]">Tag Color</label>
+            <span class="block mb-1.5 font-semibold text-[var(--ui-muted-foreground)]">Tag Color</span>
             <div class="flex items-center gap-2">
               {#each presetColors as col}
                 <button
@@ -548,11 +816,10 @@
           </div>
 
           <div>
-            <label class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Description (optional)</label>
+            <label for="event-cal-desc" class="block mb-1 font-semibold text-[var(--ui-muted-foreground)]">Description (optional)</label>
             <textarea
+              id="event-cal-desc"
               bind:value={newEventDescription}
-              rows={2}
-              placeholder="Notes, agenda, or link..."
               class="w-full rounded-lg border border-[var(--ui-input)] bg-[var(--ui-background)] p-2.5 text-xs outline-none focus:border-[var(--ui-primary)]"
             ></textarea>
           </div>

package/dist/EventCalendar.svelte.d.ts

@@ -20,6 +20,16 @@ type $$ComponentProps = {
     onEventClick?: (event: CalendarEvent) => void;
     onDateClick?: (date: Date) => void;
     onAddEvent?: (newEvent: CalendarEvent) => void;
+    onEventReschedule?: (detail: {
+        event: CalendarEvent;
+        newStart: Date;
+        newEnd: Date;
+    }) => void;
+    onEventResize?: (detail: {
+        event: CalendarEvent;
+        newStart: Date;
+        newEnd: Date;
+    }) => void;
 };
 declare const EventCalendar: import("svelte").Component<$$ComponentProps, {}, "events" | "view" | "currentDate">;
 type EventCalendar = ReturnType<typeof EventCalendar>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intinyagroup/calendar",
-  "version": "0.1.1-alpha.11",
+  "version": "0.1.1-alpha.13",
   "description": "Calendar and DatePicker components for intinyagroup UI",
   "type": "module",
   "exports": {
@@ -19,8 +19,9 @@
     "dev": "svelte-package -o dist -w"
   },
   "dependencies": {
-    "@intinyagroup/ui": "0.1.1-alpha.9",
-    "date-fns": "^4.4.0"
+    "@intinyagroup/ui": "0.1.1-alpha.11",
+    "date-fns": "^4.4.0",
+    "lucide-svelte": "^1.0.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",