@joewinke/jatui 0.41.1 → 0.42.0

package/dist/components/calendar/monthPacking.js

@@ -0,0 +1,254 @@
+/**
+ * Month-view lane packing.
+ *
+ * Upstreamed from MOS `lib/components/calendar/shared/monthPacking.ts`
+ * (jatui-lfxyy) with its tests. The only change is the event type: any
+ * `PackableEvent` (id, title, start, end?, allDay?) works, and start/end may
+ * be ISO strings or `Date`s. The MOS event type satisfies it as-is.
+ *
+ * A month row has to place two kinds of thing — bars that span several days and
+ * chips that sit on one — and the only way to guarantee they never collide is to
+ * let a single allocator hand out every slot. This module is that allocator. The
+ * grid then renders each segment as a CSS grid item at (column span, lane), so
+ * overlap becomes structurally impossible instead of a matter of keeping two
+ * pixel offsets in agreement.
+ */
+const DAY_MS = 86400000;
+/** Parse "YYYY-MM-DD" as local midnight, not the UTC midnight `new Date` gives. */
+export function parseLocalDate(str) {
+    if (str instanceof Date)
+        return new Date(str.getTime());
+    if (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
+        const [y, m, d] = str.split("-").map(Number);
+        return new Date(y, m - 1, d);
+    }
+    return new Date(str);
+}
+export function isSameDay(d1, d2) {
+    return (d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate());
+}
+/** Whole days between two dates, ignoring time of day. */
+export function dayDiff(from, to) {
+    const a = new Date(from.getFullYear(), from.getMonth(), from.getDate());
+    const b = new Date(to.getFullYear(), to.getMonth(), to.getDate());
+    return Math.round((b.getTime() - a.getTime()) / DAY_MS);
+}
+export function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+/**
+ * Inclusive first and last day an event occupies, both at local midnight.
+ *
+ * Flooring is load-bearing: month cells are midnight dates, so a 9am event
+ * whose range kept its time would fail `cell >= start` and disappear from the
+ * grid rather than render an hour late.
+ */
+export function eventDayRange(ev) {
+    const start = startOfDay(parseLocalDate(ev.start));
+    if (!ev.end)
+        return [start, start];
+    const end = startOfDay(parseLocalDate(ev.end));
+    return [start, end < start ? start : end];
+}
+/**
+ * Assign every event touching `week` a lane, greedily, widest span first.
+ *
+ * `week` must be exactly seven consecutive days, each carrying the events that
+ * touch it (an event covering three days appears on all three). Duplicates are
+ * collapsed into one segment spanning the columns it covers.
+ */
+export function packWeek(week, now = new Date()) {
+    const rowStart = week[0].date;
+    const seen = new Set();
+    const items = [];
+    for (const day of week) {
+        for (const ev of day.events) {
+            if (seen.has(ev.id))
+                continue;
+            seen.add(ev.id);
+            const [s, e] = eventDayRange(ev);
+            const rawStart = dayDiff(rowStart, s);
+            const rawEnd = dayDiff(rowStart, e);
+            items.push({
+                ev,
+                rawStart,
+                rawEnd,
+                startCol: Math.max(0, rawStart),
+                endCol: Math.min(6, rawEnd),
+            });
+        }
+    }
+    // Widest spans claim the top lanes, then all-day before timed, then
+    // chronological. Reading down a column then matches reading across a row.
+    items.sort((a, b) => {
+        const spanA = a.endCol - a.startCol;
+        const spanB = b.endCol - b.startCol;
+        if (spanA !== spanB)
+            return spanB - spanA;
+        if (!!a.ev.allDay !== !!b.ev.allDay)
+            return a.ev.allDay ? -1 : 1;
+        const t = parseLocalDate(a.ev.start).getTime() - parseLocalDate(b.ev.start).getTime();
+        if (t !== 0)
+            return t;
+        return a.ev.title.localeCompare(b.ev.title);
+    });
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const occupied = [];
+    const segments = [];
+    for (const it of items) {
+        let lane = 0;
+        for (;;) {
+            if (!occupied[lane])
+                occupied[lane] = new Array(7).fill(false);
+            let free = true;
+            for (let c = it.startCol; c <= it.endCol; c++) {
+                if (occupied[lane][c]) {
+                    free = false;
+                    break;
+                }
+            }
+            if (free)
+                break;
+            lane++;
+        }
+        for (let c = it.startCol; c <= it.endCol; c++)
+            occupied[lane][c] = true;
+        const [, endDate] = eventDayRange(it.ev);
+        segments.push({
+            ev: it.ev,
+            startCol: it.startCol,
+            endCol: it.endCol,
+            lane,
+            continuesLeft: it.rawStart < 0,
+            continuesRight: it.rawEnd > 6,
+            filled: !!it.ev.allDay || it.endCol > it.startCol || it.rawStart < 0,
+            past: endDate < today,
+        });
+    }
+    return { segments, laneCount: occupied.length };
+}
+/**
+ * Decide what a row shows given how many lanes fit.
+ *
+ * The "+N more" marker lives in the LAST VISIBLE lane rather than in a lane of
+ * its own. A dedicated marker row costs every column a slot because one busy
+ * day overflowed, which on a short window collapsed whole rows to a single
+ * event. Here only the columns that actually overflow give up their last lane,
+ * so a quiet day beside a busy one keeps showing its events.
+ *
+ * A segment spanning several columns is one grid item, so it cannot be shown
+ * for some of its days and hidden for others: if any column it covers needs the
+ * marker, the whole segment folds in. That can push a further column over, so
+ * this iterates to a fixed point.
+ */
+export function computeVisibility(segments, capacity) {
+    const visibleLanes = Math.max(1, capacity);
+    const hiddenIds = new Set();
+    for (const seg of segments) {
+        if (seg.lane >= visibleLanes)
+            hiddenIds.add(seg.ev.id);
+    }
+    const markedColumns = () => {
+        const cols = new Array(7).fill(false);
+        for (const seg of segments) {
+            if (!hiddenIds.has(seg.ev.id))
+                continue;
+            for (let c = seg.startCol; c <= seg.endCol; c++)
+                cols[c] = true;
+        }
+        return cols;
+    };
+    let cols = markedColumns();
+    for (let guard = 0; guard < segments.length + 1; guard++) {
+        let changed = false;
+        for (const seg of segments) {
+            if (hiddenIds.has(seg.ev.id))
+                continue;
+            if (seg.lane !== visibleLanes - 1)
+                continue;
+            for (let c = seg.startCol; c <= seg.endCol; c++) {
+                if (cols[c]) {
+                    hiddenIds.add(seg.ev.id);
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (!changed)
+            break;
+        cols = markedColumns();
+    }
+    // Recovery. A marker is only worth its slot when it stands for more than the
+    // event it replaced, so pull hidden segments back into any free lane —
+    // including the marker's own lane once nothing is left to mark. This is what
+    // stops a day from ever rendering "+1 more" beside empty space.
+    const laneOverrides = new Map();
+    const laneOf = (seg) => laneOverrides.get(seg.ev.id) ?? seg.lane;
+    const occupied = Array.from({ length: visibleLanes }, () => new Array(7).fill(false));
+    for (const seg of segments) {
+        if (hiddenIds.has(seg.ev.id))
+            continue;
+        const lane = laneOf(seg);
+        if (lane >= visibleLanes)
+            continue;
+        for (let c = seg.startCol; c <= seg.endCol; c++)
+            occupied[lane][c] = true;
+    }
+    for (let guard = 0; guard < segments.length + 1; guard++) {
+        const candidates = segments
+            .filter((s) => hiddenIds.has(s.ev.id))
+            .sort((a, b) => a.lane - b.lane);
+        let placed = false;
+        for (const seg of candidates) {
+            // Columns that still need a marker if this segment comes back.
+            const stillHidden = new Array(7).fill(0);
+            for (const other of segments) {
+                if (other.ev.id === seg.ev.id)
+                    continue;
+                if (!hiddenIds.has(other.ev.id))
+                    continue;
+                for (let c = other.startCol; c <= other.endCol; c++)
+                    stillHidden[c]++;
+            }
+            let target = -1;
+            for (let lane = 0; lane < visibleLanes; lane++) {
+                let ok = true;
+                for (let c = seg.startCol; c <= seg.endCol; c++) {
+                    if (occupied[lane][c]) {
+                        ok = false;
+                        break;
+                    }
+                    // The last lane has to stay free wherever a marker is still needed.
+                    if (lane === visibleLanes - 1 && stillHidden[c] > 0) {
+                        ok = false;
+                        break;
+                    }
+                }
+                if (ok) {
+                    target = lane;
+                    break;
+                }
+            }
+            if (target >= 0) {
+                hiddenIds.delete(seg.ev.id);
+                laneOverrides.set(seg.ev.id, target);
+                for (let c = seg.startCol; c <= seg.endCol; c++)
+                    occupied[target][c] = true;
+                placed = true;
+                break;
+            }
+        }
+        if (!placed)
+            break;
+    }
+    const moreCounts = new Array(7).fill(0);
+    for (const seg of segments) {
+        if (!hiddenIds.has(seg.ev.id))
+            continue;
+        for (let c = seg.startCol; c <= seg.endCol; c++)
+            moreCounts[c]++;
+    }
+    return { visibleLanes, hiddenIds, moreCounts, laneOverrides };
+}

package/dist/components/calendar/timeSlots.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Time-slot helpers behind TimeSlotPicker and BookingScheduler.
+ *
+ * Slots are instants (`Date`). What a person sees — the clock time, which part
+ * of the day a slot falls in — depends on the time zone it is shown in, so
+ * every helper here takes an optional IANA `timeZone` and reads the wall clock
+ * through `Intl` rather than `Date#getHours` (which is always the runtime's
+ * zone).
+ */
+export type HourCycle = 'h12' | 'h23';
+export type DayPart = 'morning' | 'afternoon' | 'evening';
+/** Wall-clock hour (0–23) of `date` in `timeZone` (runtime zone when omitted). */
+export declare function hourInZone(date: Date, timeZone?: string): number;
+/** Morning < 12:00 ≤ afternoon < 17:00 ≤ evening, on the zone's wall clock. */
+export declare function dayPart(date: Date, timeZone?: string): DayPart;
+export interface SlotGroup<T> {
+    part: DayPart;
+    slots: T[];
+}
+/** Slots grouped by part of day, in order, empty groups dropped. */
+export declare function groupSlotsByDayPart<T extends {
+    start: Date;
+}>(slots: T[], timeZone?: string): SlotGroup<T>[];
+/** "9:30 AM" (h12) or "09:30" (h23) on the zone's wall clock. */
+export declare function formatSlotTime(date: Date, opts?: {
+    hourCycle?: HourCycle;
+    timeZone?: string;
+    locale?: string;
+}): string;
+/** "Wednesday, March 4 at 9:30 AM" — a slot's accessible name. */
+export declare function formatSlotLabel(date: Date, opts?: {
+    hourCycle?: HourCycle;
+    timeZone?: string;
+    locale?: string;
+}): string;
+/** The hour cycle the locale prefers (en-US h12, en-GB/de h23). */
+export declare function localeHourCycle(locale?: string): HourCycle;
+/** The runtime's IANA zone ("America/Chicago"). */
+export declare function localTimeZone(): string;
+/** "GMT-5" style offset label for `timeZone` at `at`. */
+export declare function timeZoneOffsetLabel(timeZone: string, at?: Date, locale?: string): string;
+/** "America/New_York" → "New York". */
+export declare function timeZoneCity(timeZone: string): string;
+/** A short list for a time-zone picker: the viewer's own zone first, then common ones, de-duplicated. */
+export declare function commonTimeZones(extra?: string[]): string[];
+/**
+ * Roving-focus step through an ordered slot list: arrows ±1 (Left/Right
+ * mirrored in RTL), Up/Down ±`columns` (one visual row), Home/End to the
+ * ends. Unavailable slots are skipped. Returns the new index, or null when
+ * the key is not a navigation key.
+ */
+export declare function nextSlotIndex(slots: {
+    available: boolean;
+}[], current: number, key: string, opts?: {
+    columns?: number;
+    rtl?: boolean;
+}): number | null;

package/dist/components/calendar/timeSlots.js

@@ -0,0 +1,163 @@
+/**
+ * Time-slot helpers behind TimeSlotPicker and BookingScheduler.
+ *
+ * Slots are instants (`Date`). What a person sees — the clock time, which part
+ * of the day a slot falls in — depends on the time zone it is shown in, so
+ * every helper here takes an optional IANA `timeZone` and reads the wall clock
+ * through `Intl` rather than `Date#getHours` (which is always the runtime's
+ * zone).
+ */
+/** Wall-clock hour (0–23) of `date` in `timeZone` (runtime zone when omitted). */
+export function hourInZone(date, timeZone) {
+    if (!timeZone)
+        return date.getHours();
+    const parts = new Intl.DateTimeFormat('en-US', { hour: 'numeric', hourCycle: 'h23', timeZone }).formatToParts(date);
+    const h = Number(parts.find((p) => p.type === 'hour')?.value ?? date.getHours());
+    return h === 24 ? 0 : h;
+}
+/** Morning < 12:00 ≤ afternoon < 17:00 ≤ evening, on the zone's wall clock. */
+export function dayPart(date, timeZone) {
+    const h = hourInZone(date, timeZone);
+    if (h < 12)
+        return 'morning';
+    if (h < 17)
+        return 'afternoon';
+    return 'evening';
+}
+/** Slots grouped by part of day, in order, empty groups dropped. */
+export function groupSlotsByDayPart(slots, timeZone) {
+    const groups = { morning: [], afternoon: [], evening: [] };
+    for (const s of slots)
+        groups[dayPart(s.start, timeZone)].push(s);
+    return ['morning', 'afternoon', 'evening']
+        .map((part) => ({ part, slots: groups[part] }))
+        .filter((g) => g.slots.length > 0);
+}
+/** "9:30 AM" (h12) or "09:30" (h23) on the zone's wall clock. */
+export function formatSlotTime(date, opts = {}) {
+    const { hourCycle = 'h12', timeZone, locale = 'en-US' } = opts;
+    return new Intl.DateTimeFormat(locale, {
+        hour: hourCycle === 'h12' ? 'numeric' : '2-digit',
+        minute: '2-digit',
+        hourCycle,
+        timeZone
+    }).format(date);
+}
+/** "Wednesday, March 4 at 9:30 AM" — a slot's accessible name. */
+export function formatSlotLabel(date, opts = {}) {
+    const { timeZone, locale = 'en-US' } = opts;
+    const day = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', timeZone }).format(date);
+    return `${day}, ${formatSlotTime(date, opts)}`;
+}
+/** The hour cycle the locale prefers (en-US h12, en-GB/de h23). */
+export function localeHourCycle(locale) {
+    try {
+        const hc = new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hourCycle;
+        return hc === 'h11' || hc === 'h12' ? 'h12' : 'h23';
+    }
+    catch {
+        return 'h12';
+    }
+}
+/** The runtime's IANA zone ("America/Chicago"). */
+export function localTimeZone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+}
+/** "GMT-5" style offset label for `timeZone` at `at`. */
+export function timeZoneOffsetLabel(timeZone, at = new Date(), locale = 'en-US') {
+    try {
+        const parts = new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: 'shortOffset' }).formatToParts(at);
+        return parts.find((p) => p.type === 'timeZoneName')?.value ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+/** "America/New_York" → "New York". */
+export function timeZoneCity(timeZone) {
+    const tail = timeZone.split('/').pop() ?? timeZone;
+    return tail.replace(/_/g, ' ');
+}
+/** A short list for a time-zone picker: the viewer's own zone first, then common ones, de-duplicated. */
+export function commonTimeZones(extra = []) {
+    const base = [
+        localTimeZone(),
+        ...extra,
+        'America/Los_Angeles',
+        'America/Denver',
+        'America/Chicago',
+        'America/New_York',
+        'America/Sao_Paulo',
+        'Europe/London',
+        'Europe/Berlin',
+        'Africa/Johannesburg',
+        'Asia/Dubai',
+        'Asia/Kolkata',
+        'Asia/Singapore',
+        'Asia/Tokyo',
+        'Australia/Sydney',
+        'Pacific/Auckland',
+        'UTC'
+    ];
+    return [...new Set(base)];
+}
+/**
+ * Roving-focus step through an ordered slot list: arrows ±1 (Left/Right
+ * mirrored in RTL), Up/Down ±`columns` (one visual row), Home/End to the
+ * ends. Unavailable slots are skipped. Returns the new index, or null when
+ * the key is not a navigation key.
+ */
+export function nextSlotIndex(slots, current, key, opts = {}) {
+    const { columns = 1, rtl = false } = opts;
+    const n = slots.length;
+    if (n === 0)
+        return null;
+    const ok = (i) => i >= 0 && i < n && slots[i].available;
+    const firstOk = () => {
+        for (let i = 0; i < n; i++)
+            if (ok(i))
+                return i;
+        return current;
+    };
+    const lastOk = () => {
+        for (let i = n - 1; i >= 0; i--)
+            if (ok(i))
+                return i;
+        return current;
+    };
+    let step;
+    switch (key) {
+        case 'ArrowRight':
+            step = rtl ? -1 : 1;
+            break;
+        case 'ArrowLeft':
+            step = rtl ? 1 : -1;
+            break;
+        case 'ArrowDown':
+            step = Math.max(1, columns);
+            break;
+        case 'ArrowUp':
+            step = -Math.max(1, columns);
+            break;
+        case 'Home':
+            return firstOk();
+        case 'End':
+            return lastOk();
+        default:
+            return null;
+    }
+    // Land `step` away, then walk on one slot at a time past unavailable ones.
+    // A move off either end stays put (no wrap), like a grid edge.
+    let i = current + step;
+    while (i >= 0 && i < n) {
+        if (ok(i))
+            return i;
+        i += step > 0 ? 1 : -1;
+    }
+    return current;
+}

package/dist/index.d.ts

@@ -138,6 +138,23 @@ export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
 export { default as BookingForm } from './components/BookingForm.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as BookingScheduler } from './components/BookingScheduler.svelte';
+export { default as EventCalendar } from './components/EventCalendar.svelte';
+export { default as CalendarMonthGrid } from './components/calendar/MonthGrid.svelte';
+export type { MonthGridDay, MonthGridProps } from './components/calendar/MonthGrid.svelte';
+export { createCalendarGrid } from './components/calendar/createCalendarGrid';
+export type { CalendarGrid, CalendarGridOptions } from './components/calendar/createCalendarGrid';
+export { buildMonthMatrix, nextFocusDate, weekStartForLocale, resolveWeekStart, weekdayLabels, toIsoDate, parseIsoDate, makeIsDisabled, defaultRangePresets, defaultRangePresetsWithAll, resolvePreset, matchPreset, rangeDayCount, formatRangeLabel, datePlaceholder, formatTypedDate, parseTypedDate } from './components/calendar/calendarGrid';
+export type { Weekday, DateRange, IsoDateRange, RangePreset, MonthCell } from './components/calendar/calendarGrid';
+export { formatSlotTime, groupSlotsByDayPart, nextSlotIndex, localeHourCycle, localTimeZone, commonTimeZones, timeZoneOffsetLabel } from './components/calendar/timeSlots';
+export type { HourCycle, DayPart, SlotGroup } from './components/calendar/timeSlots';
+export { packWeek, computeVisibility, eventDayRange } from './components/calendar/monthPacking';
+export type { PackableEvent, MonthDay, WeekSegment, PackedWeek, WeekVisibility } from './components/calendar/monthPacking';
+export { layoutDay, eventInterval } from './components/calendar/dayOverlap';
+export type { DayPlacement, DayOverlapOptions } from './components/calendar/dayOverlap';
+export { eventColorStyle, visibleRange, viewTitle, stepDate, agendaDays } from './components/calendar/eventCalendar';
+export type { CalendarEventItem, EventColor, EventCalendarView } from './components/calendar/eventCalendar';
 export type { ShortenedLink } from './components/LinkShortener.svelte';
 export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';

package/dist/index.js

@@ -176,6 +176,17 @@ export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
 export { default as BookingForm } from './components/BookingForm.svelte';
+// Dates + calendar (BoardUI wave 4, jatui-lfxyy). Every helper is also on 'jatui/calendar'.
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as BookingScheduler } from './components/BookingScheduler.svelte';
+export { default as EventCalendar } from './components/EventCalendar.svelte';
+export { default as CalendarMonthGrid } from './components/calendar/MonthGrid.svelte';
+export { createCalendarGrid } from './components/calendar/createCalendarGrid';
+export { buildMonthMatrix, nextFocusDate, weekStartForLocale, resolveWeekStart, weekdayLabels, toIsoDate, parseIsoDate, makeIsDisabled, defaultRangePresets, defaultRangePresetsWithAll, resolvePreset, matchPreset, rangeDayCount, formatRangeLabel, datePlaceholder, formatTypedDate, parseTypedDate } from './components/calendar/calendarGrid';
+export { formatSlotTime, groupSlotsByDayPart, nextSlotIndex, localeHourCycle, localTimeZone, commonTimeZones, timeZoneOffsetLabel } from './components/calendar/timeSlots';
+export { packWeek, computeVisibility, eventDayRange } from './components/calendar/monthPacking';
+export { layoutDay, eventInterval } from './components/calendar/dayOverlap';
+export { eventColorStyle, visibleRange, viewTitle, stepDate, agendaDays } from './components/calendar/eventCalendar';
 export { DAYS_OF_WEEK, DAYS_SHORT, LOCATION_LABELS, LOCATION_ICONS } from './types/booking';
 // Utilities — date formatting
 export { normalizeTimestamp, parseTimestamp, formatRelativeTime, formatFullDate, formatShortDate, formatLastActivity, formatDate, getTimeSinceMs, getTimeSinceMinutes, isWithinMinutes, formatDateTime, taskAge, pacingColor, formatPacingDuration, } from './utils/dateFormatters';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -78,6 +78,11 @@
       "svelte": "./dist/components/review/index.js",
       "default": "./dist/components/review/index.js"
     },
+    "./calendar": {
+      "types": "./dist/components/calendar/index.d.ts",
+      "svelte": "./dist/components/calendar/index.js",
+      "default": "./dist/components/calendar/index.js"
+    },
     "./artifact-blocks": {
       "types": "./dist/artifact-blocks/index.d.ts",
       "svelte": "./dist/artifact-blocks/index.js",