terminoir 0.5.0 → 0.5.1

package/dist/components/CalendarGrid.svelte

@@ -3,8 +3,8 @@
   import {
     addDays,
     calendarRange,
-    dayLayout,
     eventsOn,
+    layoutDay,
     monthGrid,
     sameDay,
     startOfWeek,
@@ -52,11 +52,12 @@
   }
 </script>
 
-{#snippet chip(event: CalendarEvent, showTime: boolean)}
+{#snippet chip(event: CalendarEvent, showTime: boolean, compact = false)}
   <button
     type="button"
     class="terminoir-cal__event terminoir-focusable"
     class:terminoir-cal__event--muted={event.muted}
+    class:terminoir-cal__event--compact={compact}
     style:--event-color={event.color}
     title={event.title}
     disabled={!onEventClick}
@@ -91,10 +92,15 @@
         </div>
         {#each weekDays as day (day.getTime())}
           <div class="terminoir-cal__day-col" class:terminoir-cal__day-col--today={sameDay(day, today)}>
-            {#each eventsOn(events, day).filter((e) => !e.allDay) as event (event.id)}
-              {@const layout = dayLayout(event)}
-              <div class="terminoir-cal__timed" style:top={`${layout.top}%`} style:height={`${layout.height}%`}>
-                {@render chip(event, true)}
+            {#each layoutDay(eventsOn(events, day).filter((e) => !e.allDay)) as placed (placed.event.id)}
+              <div
+                class="terminoir-cal__timed"
+                style:top={`${placed.top}%`}
+                style:height={`${placed.height}%`}
+                style:left={`calc(${(placed.lane / placed.lanes) * 100}% + 2px)`}
+                style:width={`calc(${100 / placed.lanes}% - 4px)`}
+              >
+                {@render chip(placed.event, true, placed.compact)}
               </div>
             {/each}
           </div>
@@ -179,8 +185,17 @@
     background-size: 100% var(--cal-hour);
   }
   .terminoir-cal__day-col--today { background-color: color-mix(in srgb, var(--primary) 4%, transparent); }
-  .terminoir-cal__timed { position: absolute; left: 2px; right: 2px; display: flex; }
+  .terminoir-cal__timed { position: absolute; display: flex; }
   .terminoir-cal__timed .terminoir-cal__event { align-items: flex-start; height: 100%; flex-direction: column; gap: 0; }
+  .terminoir-cal__timed .terminoir-cal__event--compact {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-1);
+    padding-block: 0;
+    font-size: 0.6875rem;
+    line-height: 1;
+  }
   .terminoir-cal__event {
     --event-color: var(--primary);
     display: flex;

package/dist/components/Dialog.svelte

@@ -28,19 +28,27 @@
     }
   }
 
-  function onKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      open = false;
-      onclose?.();
-    }
-  }
+  let dialogEl: HTMLDivElement | undefined = $state();
 
+  /** Escape closes from anywhere, not only when focus is already inside the dialog. */
   $effect(() => {
     if (!open || typeof document === 'undefined') return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        open = false;
+        onclose?.();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    queueMicrotask(() => {
+      const first = dialogEl?.querySelector<HTMLElement>('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
+      (first ?? dialogEl)?.focus();
+    });
     return () => {
       document.body.style.overflow = prev;
+      document.removeEventListener('keydown', onKey);
     };
   });
 </script>
@@ -50,9 +58,9 @@
     class="terminoir-dialog-backdrop"
     role="presentation"
     onclick={onBackdropClick}
-    onkeydown={onKeydown}
   >
     <div
+      bind:this={dialogEl}
       class={cn('terminoir-dialog glass-modal terminoir-focusable', className)}
       role="dialog"
       aria-modal="true"

package/dist/utils/calendar.d.ts

@@ -26,10 +26,23 @@ export declare function calendarRange(anchor: Date, mode: CalendarMode): {
 export declare function shiftCalendar(anchor: Date, mode: CalendarMode, delta: number): Date;
 /** Six Monday-start weeks covering the month of `monthStart`. */
 export declare function monthGrid(monthStart: Date): Date[];
-/** Events starting on `day`, all-day first, then by start time. */
+/** Events showing on `day` (multi-day all-day events on each day), all-day first, then by start time. */
 export declare function eventsOn(events: CalendarEvent[], day: Date): CalendarEvent[];
 /** Vertical position of a timed event in a day column, as percentages of the day. */
 export declare function dayLayout(event: CalendarEvent): {
     top: number;
     height: number;
 };
+export type PlacedEvent = {
+    event: CalendarEvent;
+    /** Percent of the day from the top. */
+    top: number;
+    height: number;
+    /** Side-by-side column within its overlap group, and how many columns the group has. */
+    lane: number;
+    lanes: number;
+    /** Short enough to render as one line. */
+    compact: boolean;
+};
+/** Lay out a day's timed events so overlapping ones sit side by side instead of on top of each other. */
+export declare function layoutDay(events: CalendarEvent[]): PlacedEvent[];

package/dist/utils/calendar.js

@@ -46,10 +46,18 @@ export function monthGrid(monthStart) {
     const first = startOfWeek(monthStart);
     return Array.from({ length: MONTH_GRID_DAYS }, (_, i) => addDays(first, i));
 }
-/** Events starting on `day`, all-day first, then by start time. */
+/** Whether `event` shows on `day`: timed events on their start day, all-day events on every day they span. */
+function occursOn(event, day) {
+    if (!event.allDay)
+        return sameDay(event.start, day);
+    const dayStart = startOfDay(day).getTime();
+    const end = Math.max(event.end.getTime(), addDays(startOfDay(event.start), 1).getTime());
+    return startOfDay(event.start).getTime() <= dayStart && dayStart < end;
+}
+/** Events showing on `day` (multi-day all-day events on each day), all-day first, then by start time. */
 export function eventsOn(events, day) {
     return events
-        .filter((e) => sameDay(e.start, day))
+        .filter((e) => occursOn(e, day))
         .sort((a, b) => Number(b.allDay) - Number(a.allDay) || a.start.getTime() - b.start.getTime());
 }
 /** Vertical position of a timed event in a day column, as percentages of the day. */
@@ -59,3 +67,39 @@ export function dayLayout(event) {
     const top = (minutes / MINUTES_PER_DAY) * 100;
     return { top, height: Math.min((duration / MINUTES_PER_DAY) * 100, 100 - top) };
 }
+const COMPACT_MAX_MINUTES = 30;
+/** Lay out a day's timed events so overlapping ones sit side by side instead of on top of each other. */
+export function layoutDay(events) {
+    const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime());
+    const placed = [];
+    let group = [];
+    let laneEnds = [];
+    let groupEnd = -Infinity;
+    const closeGroup = () => {
+        for (const item of group)
+            item.lanes = laneEnds.length;
+        group = [];
+        laneEnds = [];
+    };
+    for (const event of sorted) {
+        const start = event.start.getTime();
+        const end = Math.max(event.end.getTime(), start + MIN_EVENT_MINUTES * 60000);
+        if (start >= groupEnd)
+            closeGroup();
+        let lane = laneEnds.findIndex((laneEnd) => laneEnd <= start);
+        if (lane === -1) {
+            lane = laneEnds.length;
+            laneEnds.push(end);
+        }
+        else {
+            laneEnds[lane] = end;
+        }
+        groupEnd = Math.max(groupEnd, end);
+        const minutes = (event.end.getTime() - start) / 60000;
+        const item = { event, ...dayLayout(event), lane, lanes: 1, compact: minutes <= COMPACT_MAX_MINUTES };
+        group.push(item);
+        placed.push(item);
+    }
+    closeGroup();
+    return placed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Terminoir \u2014 Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",