@getmicdrop/svelte-components 5.18.2 → 5.20.0

package/dist/utils/dateHelpers.js

@@ -0,0 +1,253 @@
+// ============================================
+// DATE/TIME FORMATTING UTILITIES
+// ============================================
+/**
+ * Convert a value to a date string using Date.toDateString().
+ * Returns null if the value is falsy.
+ */
+export function convertToDate(value) {
+    return value ? new Date(value).toDateString() : null;
+}
+/**
+ * Convert an ISO date string to a local Date using UTC components (date only, no time).
+ */
+export function convertToCustomDateFormat(isoString) {
+    const date = new Date(isoString);
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth();
+    const day = date.getUTCDate();
+    return new Date(year, month, day);
+}
+/**
+ * Convert an ISO date string to a UTC Date preserving hours and minutes.
+ */
+export function convertToCustomDateTimeFormat(isoDateString) {
+    const date = new Date(isoDateString);
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes()));
+}
+/**
+ * Format a date string's time as "H:MM AM/PM" using UTC hours.
+ */
+export function formatHour(dateString) {
+    const date = new Date(dateString);
+    const hour = date.getUTCHours();
+    const minutes = date.getUTCMinutes();
+    const suffix = hour >= 12 ? "PM" : "AM";
+    const displayHour = hour % 12 || 12;
+    const displayMinutes = minutes < 10 ? "0" + minutes : minutes;
+    return `${displayHour}:${displayMinutes} ${suffix}`;
+}
+/**
+ * Format a date as short form: "Thu, Oct 24".
+ */
+export function formattedDate(date) {
+    const options = {
+        weekday: "short",
+        month: "short",
+        day: "2-digit",
+    };
+    return new Date(date).toLocaleDateString("en-US", options);
+}
+/** Get the ordinal suffix (st, nd, rd, th) for a day of the month. */
+function getOrdinalSuffix(day) {
+    if (day >= 11 && day <= 13)
+        return "th";
+    switch (day % 10) {
+        case 1:
+            return "st";
+        case 2:
+            return "nd";
+        case 3:
+            return "rd";
+        default:
+            return "th";
+    }
+}
+/**
+ * Format a date as long form with ordinal: "Thursday, October 24th, 2024".
+ */
+export function formattedFullDate(date) {
+    const options = {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+    };
+    const formatted = new Date(date).toLocaleDateString("en-US", options);
+    const day = new Date(date).getDate();
+    const ordinalSuffix = getOrdinalSuffix(day);
+    return formatted.replace(/\d+/, day + ordinalSuffix);
+}
+/**
+ * Format a datetime string using Intl.DateTimeFormat with timezone support.
+ */
+export const formatDateTime = (dateTimeString, timeZone = "UTC") => {
+    const options = {
+        weekday: "short",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        hour12: true,
+        timeZone: timeZone,
+    };
+    const date = new Date(dateTimeString);
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+};
+/**
+ * Format a start datetime as a single "H:MM AM/PM" time string (UTC).
+ */
+export const formatTimeline = (startDateTime) => {
+    const formatHourInternal = (date) => {
+        let hours = date.getUTCHours();
+        const minutes = date.getUTCMinutes();
+        const suffix = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12 || 12;
+        return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${suffix}`;
+    };
+    const start = formatHourInternal(new Date(startDateTime));
+    return `${start}`;
+};
+/**
+ * Format a time range as "H:MM AM - H:MM PM" (UTC).
+ */
+export function formatTimeRange(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    function formatTime(date) {
+        let hours = date.getUTCHours();
+        const minutes = date.getUTCMinutes();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12;
+        hours = hours ? hours : 12;
+        const minutesStr = minutes < 10 ? "0" + minutes : minutes;
+        return hours + ":" + minutesStr + " " + ampm;
+    }
+    const startTime = formatTime(start);
+    const endTime = formatTime(end);
+    return `${startTime} - ${endTime}`;
+}
+/**
+ * Get an array of date strings between two dates (inclusive), formatted as "YYYY-M-D".
+ */
+export function getDateRange(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const dateArray = [];
+    const currentDate = new Date(start);
+    while (currentDate <= end) {
+        dateArray.push(`${currentDate.getUTCFullYear()}-${currentDate.getUTCMonth() + 1}-${currentDate.getUTCDate()}`);
+        currentDate.setUTCDate(currentDate.getUTCDate() + 1);
+    }
+    return dateArray;
+}
+/**
+ * Get abbreviated day of week from a date string (e.g., "Mon", "Tue").
+ */
+export const getDay = (dateString) => {
+    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const date = new Date(dateString);
+    return days[date.getUTCDay()];
+};
+/**
+ * Get abbreviated month from a date string (e.g., "Jan", "Feb").
+ */
+export const getMonth = (dateString) => {
+    const months = [
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+    ];
+    const date = new Date(dateString);
+    return months[date.getUTCMonth()];
+};
+/**
+ * Get the day of the month (1-31) from a date string.
+ */
+export const getDateOfMonth = (dateString) => {
+    const date = new Date(dateString);
+    return date.getUTCDate();
+};
+/**
+ * Relative time string (e.g., "5 minutes ago", "2 days ago").
+ */
+export function timeAgo(date) {
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - new Date(date).getTime()) / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(months / 12);
+    if (seconds < 60) {
+        return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
+    }
+    else if (minutes < 60) {
+        return `${minutes} minute${minutes !== 1 ? "s" : ""} ago`;
+    }
+    else if (hours < 24) {
+        return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
+    }
+    else if (days < 30) {
+        return `${days} day${days !== 1 ? "s" : ""} ago`;
+    }
+    else if (months < 12) {
+        return `${months} month${months !== 1 ? "s" : ""} ago`;
+    }
+    else {
+        return `${years} year${years !== 1 ? "s" : ""} ago`;
+    }
+}
+/**
+ * Get day options: weekdays if "weeks", or numbered days 1-31 with ordinal suffixes.
+ */
+export function getDays(params) {
+    if (params === "weeks") {
+        return [
+            { value: "monday", label: "Monday" },
+            { value: "tuesday", label: "Tuesday" },
+            { value: "wednesday", label: "Wednesday" },
+            { value: "thursday", label: "Thursday" },
+            { value: "friday", label: "Friday" },
+        ];
+    }
+    else {
+        return Array.from({ length: 31 }, (_, i) => {
+            const day = i + 1;
+            const suffix = day % 10 === 1 && day !== 11
+                ? "st"
+                : day % 10 === 2 && day !== 12
+                    ? "nd"
+                    : day % 10 === 3 && day !== 13
+                        ? "rd"
+                        : "th";
+            return {
+                value: day.toString(),
+                label: day + suffix,
+            };
+        });
+    }
+}
+/**
+ * Get numeric options based on time unit: 12 for months, 10 for weeks, 31 for days.
+ */
+export function getDaysNumberOptions(timeUnit) {
+    if (timeUnit === "months") {
+        return Array.from({ length: 12 }, (_, i) => ({
+            value: (i + 1).toString(),
+            label: (i + 1).toString(),
+        }));
+    }
+    else if (timeUnit === "weeks") {
+        return Array.from({ length: 10 }, (_, i) => ({
+            value: (i + 1).toString(),
+            label: (i + 1).toString(),
+        }));
+    }
+    else {
+        return Array.from({ length: 31 }, (_, i) => ({
+            value: (i + 1).toString(),
+            label: (i + 1).toString(),
+        }));
+    }
+}

package/dist/utils/eventFormatters.d.ts

@@ -0,0 +1,9 @@
+export declare const getRoleFromRoleOnStage: (roleOnStage: number | undefined) => string;
+/**
+ * Format an event performer invite or event-performer join into a normalized show object.
+ * Handles both V1 (EventPerformer with event.Event) and V2 (PerformerInvite with event.event) shapes.
+ */
+export declare const formatEvent: (event: Record<string, any>) => Record<string, any>;
+export declare const formatRosterEventPerformerInvite: (event: Record<string, any>) => Record<string, any>;
+export declare const formatVenue: (event: Record<string, any>) => Record<string, any>;
+//# sourceMappingURL=eventFormatters.d.ts.map

package/dist/utils/eventFormatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventFormatters.d.ts","sourceRoot":"","sources":["../../src/lib/utils/eventFormatters.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM,GAAG,SAAS,KAAG,MAExE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CA4C1E,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAc/F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAmB1E,CAAC"}

package/dist/utils/eventFormatters.js

@@ -0,0 +1,96 @@
+import { formatTimeRange, getDateRange } from "./dateHelpers";
+// ============================================
+// EVENT FORMATTING UTILITIES
+// ============================================
+/** Map roleOnStage numeric value to role name string. */
+const ROLE_ON_STAGE_MAP = {
+    0: "Performer",
+    1: "Host",
+    2: "Headliner",
+    3: "Feature",
+    4: "Special Guest",
+    5: "Opener",
+    6: "Guest",
+    7: "Teacher",
+    8: "Assistant",
+};
+export const getRoleFromRoleOnStage = (roleOnStage) => {
+    return ROLE_ON_STAGE_MAP[roleOnStage] || "Performer";
+};
+/**
+ * Format an event performer invite or event-performer join into a normalized show object.
+ * Handles both V1 (EventPerformer with event.Event) and V2 (PerformerInvite with event.event) shapes.
+ */
+export const formatEvent = (event) => {
+    // V2 uses lowercase "event", V1 uses uppercase "Event"
+    const eventData = event.event || event.Event;
+    // Get venue stage name (the physical stage at the venue, e.g., "Main Room", "Showroom")
+    // Not to be confused with performer's stage name (their performance alias)
+    const venueStageName = eventData?.stage?.name || eventData?.stage?.googleName || eventData?.googleName || "";
+    const venueAddress = eventData?.venue?.address || "";
+    const role = getRoleFromRoleOnStage(event.roleOnStage);
+    // Get custom booking notification message from venue (set in venue edit page)
+    const bookingMessage = eventData?.venue?.booking_notification || "No additional details available.";
+    // V2 returns "status" string, V1 returns numeric "acceptedState"
+    const status = event.status || (event.acceptedState !== undefined
+        ? { 0: "invited", 2: "confirmed", 1: "declined", 3: "declined", 4: "cancelled" }[event.acceptedState]
+        : "unknown");
+    const setLength = event.setLength ?? 0;
+    return {
+        eventId: eventData?.ID,
+        venueId: eventData?.venue?.ID,
+        title: eventData?.title,
+        role: role,
+        startDateTime: eventData?.startDateTime,
+        status: status,
+        doorsOpenTime: eventData?.doorsOpenTime,
+        spotDuration: `${setLength} min spot`,
+        venueName: eventData?.venue?.name,
+        location: venueAddress,
+        id: event.invitationId || String(event.id || event.ID),
+        image: eventData?.image,
+        details: {
+            venue: eventData?.venue?.name,
+            stageName: venueStageName,
+            address: venueAddress,
+            setLength: `${setLength} min`,
+            eventDetails: bookingMessage,
+        },
+        lastUpdated: event.updatedAt || event.UpdatedAt,
+    };
+};
+export const formatRosterEventPerformerInvite = (event) => {
+    return {
+        venueId: event.venueId,
+        role: event.role || "Performer",
+        acceptedState: event.acceptedState,
+        name: event.Venue.name,
+        shortVenue: `${event.Venue.firstName} ${event.Venue.lastName} - ${event.Venue.role}`,
+        location: `${event.Venue.address}`,
+        id: event.invitationId,
+        lastUpdated: event.UpdatedAt,
+        image: event.Venue.image,
+        hasAvailability: true,
+        invitationAccepted: event.acceptedState === 2,
+    };
+};
+export const formatVenue = (event) => {
+    return {
+        venueId: event.Event.venueId,
+        name: event.Event.venue.name,
+        image: event.Event.venue.squareImageUrl || event.Event.venue.image,
+        location: `${event.Event.venue.address}`,
+        start: event.Event.startDateTime,
+        end: event.Event.endDateTime,
+        doorOpen: event.Event.doorsOpenTime,
+        email: event.Event.venue.email,
+        phone: event.Event.venue.phone,
+        description: event.Event.venue.description,
+        instagram: event.Event.venue.instagram,
+        facebook: event.Event.venue.facebook,
+        twitter: event.Event.venue.twitter,
+        lastUpdated: event.UpdatedAt,
+        timeRange: formatTimeRange(event.Event.startDateTime, event.Event.endDateTime),
+        dateRange: getDateRange(event.Event.startDateTime, event.Event.endDateTime),
+    };
+};

package/dist/utils/feedbackContext.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Feedback Context Collector
+ * SSR-safe utility that gathers environment context for feedback submissions.
+ */
+export interface FeedbackLastError {
+    code: string;
+    message: string;
+    requestId?: string;
+    traceId?: string;
+}
+export interface FeedbackContextData {
+    url: string;
+    app: string;
+    appVersion: string;
+    userAgent: string;
+    timestamp: string;
+    lastError?: FeedbackLastError;
+}
+/**
+ * Collect feedback context from the current environment.
+ * Safe to call in SSR — returns empty strings for browser-only values.
+ */
+export declare function collectFeedbackContext(app: string, appVersion: string, lastError?: FeedbackLastError | null): FeedbackContextData;
+//# sourceMappingURL=feedbackContext.d.ts.map

package/dist/utils/feedbackContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedbackContext.d.ts","sourceRoot":"","sources":["../../src/lib/utils/feedbackContext.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,EAClB,SAAS,CAAC,EAAE,iBAAiB,GAAG,IAAI,GACnC,mBAAmB,CAWrB"}

package/dist/utils/feedbackContext.js

@@ -0,0 +1,19 @@
+/**
+ * Feedback Context Collector
+ * SSR-safe utility that gathers environment context for feedback submissions.
+ */
+/**
+ * Collect feedback context from the current environment.
+ * Safe to call in SSR — returns empty strings for browser-only values.
+ */
+export function collectFeedbackContext(app, appVersion, lastError) {
+    const isBrowser = typeof window !== 'undefined';
+    return {
+        url: isBrowser ? window.location.href : '',
+        app,
+        appVersion,
+        userAgent: isBrowser ? navigator.userAgent : '',
+        timestamp: new Date().toISOString(),
+        lastError: lastError || undefined,
+    };
+}

package/dist/utils/fetchHelpers.d.ts

@@ -0,0 +1,17 @@
+interface FetchResult<T = unknown> {
+    data: T | null;
+    error: string | null;
+}
+interface PostResult<T = unknown> extends FetchResult<T> {
+    ok: boolean;
+}
+/**
+ * Fetch data from an API endpoint with error handling.
+ */
+export declare function fetchData<T = unknown>(endpoint: string, options?: RequestInit): Promise<FetchResult<T>>;
+/**
+ * Post JSON data to an API endpoint.
+ */
+export declare function postData<T = unknown>(endpoint: string, data: unknown): Promise<PostResult<T>>;
+export {};
+//# sourceMappingURL=fetchHelpers.d.ts.map

package/dist/utils/fetchHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchHelpers.d.ts","sourceRoot":"","sources":["../../src/lib/utils/fetchHelpers.ts"],"names":[],"mappings":"AAKA,UAAU,WAAW,CAAC,CAAC,GAAG,OAAO;IAC/B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IACtD,EAAE,EAAE,OAAO,CAAC;CACb;AAED;;GAEG;AACH,wBAAsB,SAAS,CAAC,CAAC,GAAG,OAAO,EACzC,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAiBzB;AAED;;GAEG;AACH,wBAAsB,QAAQ,CAAC,CAAC,GAAG,OAAO,EACxC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,OAAO,GACZ,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAkBxB"}

package/dist/utils/fetchHelpers.js

@@ -0,0 +1,45 @@
+/* global RequestInit */
+// ============================================
+// DATA FETCHING UTILITIES
+// ============================================
+/**
+ * Fetch data from an API endpoint with error handling.
+ */
+export async function fetchData(endpoint, options = {}) {
+    try {
+        const res = await fetch(endpoint, {
+            headers: { "Content-Type": "application/json", ...options.headers },
+            ...options,
+        });
+        if (!res.ok) {
+            const errorText = await res.text().catch(() => "Unknown error");
+            throw new Error(errorText || `Request failed with status ${res.status}`);
+        }
+        const data = await res.json();
+        return { data, error: null };
+    }
+    catch (err) {
+        return { data: null, error: err.message };
+    }
+}
+/**
+ * Post JSON data to an API endpoint.
+ */
+export async function postData(endpoint, data) {
+    try {
+        const res = await fetch(endpoint, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data),
+        });
+        const responseData = await res.json().catch(() => ({}));
+        return {
+            data: responseData,
+            error: res.ok ? null : (responseData?.message || "Request failed"),
+            ok: res.ok,
+        };
+    }
+    catch (err) {
+        return { data: null, error: err.message, ok: false };
+    }
+}

package/dist/utils/focusTrap.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Svelte action to trap focus within an element (for modals and dialogs).
+ * When used, focus will cycle between focusable elements within the container.
+ *
+ * @param {HTMLElement} node - The container element to trap focus within
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.enabled - Whether the focus trap is active
+ * @param {HTMLElement} options.returnFocusTo - Element to return focus to when trap is disabled
+ * @returns {Object} Svelte action lifecycle methods
+ *
+ * Usage:
+ * <div use:focusTrap={{ enabled: isOpen, returnFocusTo: triggerElement }}>
+ *   ...modal content...
+ * </div>
+ */
+export function focusTrap(node: HTMLElement, options?: {
+    enabled: boolean;
+    returnFocusTo: HTMLElement;
+}): Object;
+//# sourceMappingURL=focusTrap.d.ts.map

package/dist/utils/focusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../src/lib/utils/focusTrap.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,gCAXW,WAAW,YAEnB;IAAyB,OAAO,EAAxB,OAAO;IACc,aAAa,EAAlC,WAAW;CACnB,GAAU,MAAM,CAyHlB"}

package/dist/utils/focusTrap.js

@@ -0,0 +1,130 @@
+/**
+ * Svelte action to trap focus within an element (for modals and dialogs).
+ * When used, focus will cycle between focusable elements within the container.
+ *
+ * @param {HTMLElement} node - The container element to trap focus within
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.enabled - Whether the focus trap is active
+ * @param {HTMLElement} options.returnFocusTo - Element to return focus to when trap is disabled
+ * @returns {Object} Svelte action lifecycle methods
+ *
+ * Usage:
+ * <div use:focusTrap={{ enabled: isOpen, returnFocusTo: triggerElement }}>
+ *   ...modal content...
+ * </div>
+ */
+export function focusTrap(node, options = {}) {
+  const FOCUSABLE_SELECTORS = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable]',
+    'audio[controls]',
+    'video[controls]',
+    'details>summary:first-of-type',
+    'details',
+  ].join(',');
+
+  let enabled = options.enabled ?? true;
+  let returnFocusTo = options.returnFocusTo ?? null;
+  let previouslyFocused = null;
+
+  function getFocusableElements() {
+    const elements = Array.from(node.querySelectorAll(FOCUSABLE_SELECTORS));
+    return elements.filter(
+      el => !el.hasAttribute('disabled') && el.tabIndex !== -1 && isVisible(el)
+    );
+  }
+
+  function isVisible(element) {
+    return !!(
+      element.offsetWidth ||
+      element.offsetHeight ||
+      element.getClientRects().length
+    );
+  }
+
+  function handleKeydown(event) {
+    if (!enabled || event.key !== 'Tab') return;
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      // Shift+Tab: going backwards
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      // Tab: going forwards
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  function activate() {
+    if (!enabled) return;
+
+    // Store previously focused element
+    previouslyFocused = document.activeElement;
+
+    // Focus the first focusable element or the container itself
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      // Use requestAnimationFrame to ensure DOM is ready
+      requestAnimationFrame(() => {
+        focusableElements[0].focus();
+      });
+    } else {
+      // If no focusable elements, make the container focusable
+      node.setAttribute('tabindex', '-1');
+      node.focus();
+    }
+
+    document.addEventListener('keydown', handleKeydown);
+  }
+
+  function deactivate() {
+    document.removeEventListener('keydown', handleKeydown);
+
+    // Return focus to the specified element or the previously focused element
+    const focusTarget = returnFocusTo || previouslyFocused;
+    if (focusTarget && typeof focusTarget.focus === 'function') {
+      focusTarget.focus();
+    }
+  }
+
+  // Initialize
+  if (enabled) {
+    activate();
+  }
+
+  return {
+    update(newOptions) {
+      const newEnabled = newOptions.enabled ?? true;
+      returnFocusTo = newOptions.returnFocusTo ?? null;
+
+      if (newEnabled !== enabled) {
+        enabled = newEnabled;
+        if (enabled) {
+          activate();
+        } else {
+          deactivate();
+        }
+      }
+    },
+    destroy() {
+      deactivate();
+    },
+  };
+}