@getmicdrop/svelte-components 5.21.3 → 5.22.0

package/dist/components/Toast/Toaster.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { getToasts, toast } from './toast.svelte';
+  import ToastItem from './ToastItem.svelte';
+
+  interface Props {
+    position?:
+      | 'top-right'
+      | 'top-left'
+      | 'bottom-right'
+      | 'bottom-left'
+      | 'top-center'
+      | 'bottom-center';
+    offset?: string;
+    gap?: string;
+    /** Max toasts visible before older ones drop off the visible stack */
+    visibleCount?: number;
+  }
+
+  let {
+    position = 'top-right',
+    offset = '16px',
+    gap = '14px',
+    visibleCount = 3,
+  }: Props = $props();
+
+  // Get reactive toasts (newest at index 0)
+  let toasts = $derived(getToasts());
+
+  // Hover state — when true, stack expands and all toasts show full size
+  let isExpanded = $state(false);
+
+  // Heights of each toast, indexed by toast id (for expanded mode positioning)
+  let heights = $state<Record<string, number>>({});
+
+  // Measure each toast's natural height with a ResizeObserver action
+  function measureHeight(node: HTMLDivElement, id: string) {
+    const update = () => {
+      const h = node.offsetHeight;
+      if (h && heights[id] !== h) {
+        heights = { ...heights, [id]: h };
+      }
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return {
+      destroy() {
+        observer.disconnect();
+        // Clean up height entry
+        const { [id]: _, ...rest } = heights;
+        heights = rest;
+      },
+    };
+  }
+
+  // Whether the stack grows from the top (top-*) or bottom (bottom-*)
+  let isTop = $derived(position.startsWith('top'));
+
+  // Position classes for the container
+  const positionClasses: Record<string, string> = {
+    'top-right': 'top-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-right': 'bottom-0 right-0',
+    'bottom-left': 'bottom-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+  };
+
+  let positionClass = $derived(
+    positionClasses[position] || positionClasses['top-right']
+  );
+
+  // Compute the cumulative offset for a toast at the given index when expanded.
+  // Sums the heights of all toasts in front of it (closer to the front of the stack)
+  // plus the gap between each.
+  function getExpandedOffset(index: number): number {
+    if (index === 0) return 0;
+    let total = 0;
+    const gapPx = parseInt(gap, 10) || 14;
+    for (let i = 0; i < index; i++) {
+      const t = toasts[i];
+      if (t) {
+        total += (heights[t.id] || 60) + gapPx;
+      }
+    }
+    return total;
+  }
+
+  function handleMouseEnter() {
+    isExpanded = true;
+    // Pause all toasts while hovering
+    for (const t of toasts) {
+      if (t.duration !== Infinity) toast.pause(t.id);
+    }
+  }
+
+  function handleMouseLeave() {
+    isExpanded = false;
+    for (const t of toasts) {
+      if (t.duration !== Infinity && t.pausedAt) toast.resume(t.id);
+    }
+  }
+</script>
+
+<!--
+  Sonner-style toast stack.
+  - Container is fixed, holds toasts in absolute positioning so they overlap
+  - Front toast (index 0) is at z-index top, fully visible
+  - Toasts behind peek out by ~14px each, scaled down 5% per depth
+  - On hover, stack expands: all toasts return to full size, spaced by their actual heights
+-->
+<div
+  class="toast-stack fixed z-70 pointer-events-none {positionClass}"
+  class:is-top={isTop}
+  class:is-expanded={isExpanded}
+  style:padding={offset}
+  role="region"
+  aria-label="Notifications"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+>
+  <!-- Inner wrapper provides a relative coordinate system for absolute toasts -->
+  <div class="toast-stack-inner">
+    {#each toasts as toastData, index (toastData.id)}
+      {@const lift = 14}
+      {@const collapsedY = isTop ? index * lift : -index * lift}
+      {@const expandedOffset = getExpandedOffset(index)}
+      {@const expandedY = isTop ? expandedOffset : -expandedOffset}
+      {@const y = isExpanded ? expandedY : collapsedY}
+      {@const scale = isExpanded ? 1 : Math.max(0.85, 1 - index * 0.05)}
+      {@const isHidden = index >= visibleCount && !isExpanded}
+      <div
+        class="toast-stack-item pointer-events-auto"
+        class:hidden-from-stack={isHidden}
+        style:--y="{y}px"
+        style:--scale={scale}
+        style:z-index={1000 - index}
+        use:measureHeight={toastData.id}
+      >
+        <ToastItem data={toastData} />
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .toast-stack {
+    /* Container is the hover region */
+    width: auto;
+  }
+
+  .toast-stack-inner {
+    position: relative;
+    width: 320px;
+  }
+
+  .toast-stack-item {
+    position: absolute;
+    right: 0;
+    width: 100%;
+    transform: translateY(var(--y, 0)) scale(var(--scale, 1));
+    transition:
+      transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  /* Top-positioned stacks anchor toasts to the top, grow downward */
+  .toast-stack.is-top .toast-stack-item {
+    top: 0;
+    transform-origin: top center;
+  }
+
+  /* Bottom-positioned stacks anchor to the bottom, grow upward */
+  .toast-stack:not(.is-top) .toast-stack-item {
+    bottom: 0;
+    transform-origin: bottom center;
+  }
+
+  /* Hidden toasts (beyond visibleCount in collapsed mode) */
+  .toast-stack-item.hidden-from-stack {
+    pointer-events: none;
+    opacity: 0;
+  }
+</style>

package/dist/components/Toast/Toaster.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    offset?: string;
+    gap?: string;
+    /** Max toasts visible before older ones drop off the visible stack */
+    visibleCount?: number;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;
+//# sourceMappingURL=Toaster.svelte.d.ts.map

package/dist/components/Toast/Toaster.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/Toaster.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,QAAQ,CAAC,EACL,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmHH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Toaster } from "./Toaster.svelte";
+export { default as ToastItem } from "./ToastItem.svelte";
+export type Toast = import("./toast.svelte").Toast;
+export type ToastType = import("./toast.svelte").ToastType;
+export type ToastOptions = import("./toast.svelte").ToastOptions;
+export type ToastAction = import("./toast.svelte").ToastAction;
+export type NotificationToastOptions = import("./toast.svelte").NotificationToastOptions;
+export { toast, getToasts } from "./toast.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/index.js"],"names":[],"mappings":";;oBAOa,OAAO,gBAAgB,EAAE,KAAK;wBAC9B,OAAO,gBAAgB,EAAE,SAAS;2BAClC,OAAO,gBAAgB,EAAE,YAAY;0BACrC,OAAO,gBAAgB,EAAE,WAAW;uCACpC,OAAO,gBAAgB,EAAE,wBAAwB"}

package/dist/components/Toast/index.js

@@ -0,0 +1,13 @@
+// Toast notification system
+export { default as Toaster } from './Toaster.svelte';
+export { default as ToastItem } from './ToastItem.svelte';
+export { toast, getToasts } from './toast.svelte';
+
+// Re-export all types for consumers
+/**
+ * @typedef {import('./toast.svelte').Toast} Toast
+ * @typedef {import('./toast.svelte').ToastType} ToastType
+ * @typedef {import('./toast.svelte').ToastOptions} ToastOptions
+ * @typedef {import('./toast.svelte').ToastAction} ToastAction
+ * @typedef {import('./toast.svelte').NotificationToastOptions} NotificationToastOptions
+ */

package/dist/components/Toast/toast.svelte.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Micdrop Toast System
+ * A modern, macOS-style toast notification system built with Svelte 5 runes.
+ * Supports both simple toasts and rich notification-style toasts.
+ *
+ * Features:
+ * - Smart batching for sales notifications (prevents spam during busy periods)
+ * - Desktop notification support (browser API)
+ * - Swipe-to-dismiss on mobile
+ * - Haptic feedback on toast display (QOL Bible)
+ */
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'notification';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastOptions {
+    description?: string;
+    duration?: number;
+    dismissible?: boolean;
+    onClick?: () => void;
+    action?: ToastAction;
+}
+export interface NotificationToastOptions {
+    name: string;
+    displayName?: string;
+    event: string;
+    status: string;
+    avatar: string;
+    message?: string;
+    performerMessage?: string;
+    eventId?: string;
+    duration?: number;
+    dismissible?: boolean;
+    onClick?: () => void;
+}
+export interface Toast {
+    id: string;
+    type: ToastType;
+    title?: string;
+    description?: string;
+    notification?: {
+        name: string;
+        displayName?: string;
+        event: string;
+        status: string;
+        avatar: string;
+        message?: string;
+        performerMessage?: string;
+        eventId?: string;
+        batchCount?: number;
+        batchTotal?: number;
+    };
+    duration: number;
+    dismissible: boolean;
+    showProgress?: boolean;
+    onClick?: () => void;
+    action?: ToastAction;
+    createdAt: number;
+    pausedAt?: number;
+    remainingTime?: number;
+}
+type PushPreferenceChecker = (status: string) => boolean;
+declare function toast(title: string, options?: ToastOptions): string;
+declare namespace toast {
+    var success: (title: string, options?: ToastOptions) => string;
+    var error: (title: string, options?: ToastOptions) => string;
+    var warning: (title: string, options?: ToastOptions) => string;
+    var info: (title: string, options?: ToastOptions) => string;
+    var loading: (title: string, options?: ToastOptions) => string;
+    var notification: (options: NotificationToastOptions) => string;
+    var dismiss: (id: string) => void;
+    var dismissAll: () => void;
+    var pause: (id: string) => void;
+    var resume: (id: string) => void;
+    var requestDesktopPermission: () => Promise<boolean>;
+    var getDesktopPermission: () => NotificationPermission;
+    var isDesktopEnabled: () => boolean;
+    var setPushPreferenceChecker: (checker: PushPreferenceChecker) => void;
+    var STATUS_TO_PREFERENCE: Record<string, {
+        category: "admin" | "performer";
+        key: string;
+    }>;
+    var promise: <T>(promise: Promise<T>, options: PromiseOptions) => Promise<T>;
+}
+interface PromiseOptions {
+    loading: string;
+    success: string;
+    error: string;
+}
+export declare function getToasts(): Toast[];
+export { toast };
+//# sourceMappingURL=toast.svelte.d.ts.map

package/dist/components/Toast/toast.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toast/toast.svelte.ts"],"names":[],"mappings":"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"}