@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/server/index.server-ah91j894.js

@@ -0,0 +1,564 @@
+import {
+  waitForTransitionCompletion
+} from "./index.server-78d33trm.js";
+import {
+  useReducedMotion
+} from "./index.server-8hdvr9bt.js";
+import {
+  pushEscapeHandler
+} from "./index.server-mc6vc1pm.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/toast-region/toast-region.svelte
+import * as $ from "svelte/internal/server";
+import { onDestroy } from "svelte";
+
+// src/_internal/toast-context.ts
+import { createContext } from "svelte";
+var [getToastContextStrict, setToastContext] = createContext();
+var getToastContext = getToastContextStrict;
+
+// src/components/toast-region/toast-region.svelte
+function Toast_region($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      maxStack = 5,
+      defaultDuration = 5000,
+      position = "bottom-right",
+      class: className,
+      children
+    } = $$props;
+    const reducedMotion = useReducedMotion();
+    let hydrated = false;
+    let politeStack = [];
+    let assertiveStack = [];
+    const timers = new Map;
+    const removalTimers = new Map;
+    const generations = new Map;
+    let regionElement = null;
+    let nextId = 0;
+    let isPointerInsideRegion = false;
+    let isFocusInsideRegion = false;
+    let destroyed = false;
+    let releaseFocusedToastEscape = null;
+    let returnFocusElement = null;
+    let generationCounter = 0;
+    function isPolite(variant) {
+      return variant === "info" || variant === "success";
+    }
+    function getCurrentStack(variant) {
+      return isPolite(variant) ? politeStack : assertiveStack;
+    }
+    function setCurrentStack(variant, stack) {
+      if (isPolite(variant)) {
+        politeStack = stack;
+      } else {
+        assertiveStack = stack;
+      }
+    }
+    function findToast(id) {
+      return politeStack.find((toast) => toast.id === id) ?? assertiveStack.find((toast) => toast.id === id);
+    }
+    function nextGeneration(id) {
+      const generation = generationCounter += 1;
+      generations.set(id, generation);
+      return generation;
+    }
+    function invalidateGeneration(id) {
+      generations.set(id, generationCounter += 1);
+    }
+    function clearGeneration(id) {
+      generations.delete(id);
+    }
+    function removeFromBothStacks(id) {
+      politeStack = politeStack.filter((toast) => toast.id !== id);
+      assertiveStack = assertiveStack.filter((toast) => toast.id !== id);
+    }
+    function shouldPauseTimers() {
+      return isPointerInsideRegion || isFocusInsideRegion;
+    }
+    function show(message, options = {}) {
+      if (destroyed)
+        return options.id ?? `cinder-toast-${++nextId}`;
+      return upsertToast(message, options).id;
+    }
+    function canMutateToasts() {
+      return hydrated && typeof document !== "undefined" && !destroyed;
+    }
+    function getNextToastId(options) {
+      if (options.id)
+        return options.id;
+      if (!canMutateToasts())
+        return `cinder-toast-${nextId + 1}`;
+      nextId += 1;
+      return `cinder-toast-${nextId}`;
+    }
+    function upsertToast(message, options = {}) {
+      const id = getNextToastId(options);
+      const variant = options.variant ?? "info";
+      const duration = options.duration ?? defaultDuration;
+      const dismissible = options.dismissible ?? true;
+      if (!canMutateToasts()) {
+        return {
+          id,
+          message,
+          variant,
+          duration,
+          dismissible,
+          showIcon: options.showIcon ?? false,
+          generation: 0,
+          pending: options.pending ?? false,
+          leaving: false,
+          swiping: false,
+          ...options.icon ? { icon: options.icon } : {},
+          ...options.action ? { action: options.action } : {}
+        };
+      }
+      clearTimer(id);
+      clearRemovalTimer(id);
+      removeFromBothStacks(id);
+      const item = {
+        id,
+        message,
+        variant,
+        duration,
+        dismissible,
+        showIcon: options.showIcon ?? false,
+        generation: nextGeneration(id),
+        pending: options.pending ?? false,
+        leaving: false,
+        swiping: false,
+        ...options.icon ? { icon: options.icon } : {},
+        ...options.action ? { action: options.action } : {}
+      };
+      setCurrentStack(variant, [...getCurrentStack(variant), item]);
+      dismissOverflow(variant);
+      if (duration > 0) {
+        armTimer(id, duration);
+      }
+      return item;
+    }
+    function dismissOverflow(variant) {
+      const stack = getCurrentStack(variant);
+      const activeToasts = stack.filter((toast) => !toast.leaving);
+      if (activeToasts.length <= maxStack)
+        return;
+      const oldest = activeToasts[0];
+      if (oldest)
+        beginDismiss(oldest.id, "overflow");
+    }
+    function dismiss(id) {
+      if (!canMutateToasts())
+        return;
+      beginDismiss(id, "programmatic");
+    }
+    function dismissAll() {
+      if (!canMutateToasts())
+        return;
+      const ids = [...politeStack, ...assertiveStack].filter((toast) => !toast.leaving).map((toast) => toast.id);
+      for (const id of ids)
+        beginDismiss(id, "dismissAll");
+    }
+    function clearTimer(id) {
+      const record = timers.get(id);
+      if (record) {
+        if (record.handle)
+          clearTimeout(record.handle);
+        timers.delete(id);
+      }
+    }
+    function clearRemovalTimer(id) {
+      const cancelCompletion = removalTimers.get(id);
+      if (cancelCompletion) {
+        cancelCompletion();
+        removalTimers.delete(id);
+      }
+    }
+    function armTimer(id, duration) {
+      if (duration <= 0)
+        return;
+      const record = {
+        handle: null,
+        remaining: duration,
+        startedAt: performance.now()
+      };
+      timers.set(id, record);
+      if (shouldPauseTimers()) {
+        record.handle = null;
+        return;
+      }
+      record.handle = setTimeout(() => beginDismiss(id, "timer"), duration);
+    }
+    function pauseAllTimers() {
+      for (const record of timers.values()) {
+        if (!record.handle)
+          continue;
+        clearTimeout(record.handle);
+        record.handle = null;
+        record.remaining = Math.max(0, record.remaining - (performance.now() - record.startedAt));
+      }
+    }
+    function resumeAllTimers() {
+      if (shouldPauseTimers())
+        return;
+      for (const [id, record] of timers.entries()) {
+        if (record.handle)
+          continue;
+        if (record.remaining <= 0) {
+          beginDismiss(id, "timer");
+          continue;
+        }
+        record.startedAt = performance.now();
+        record.handle = setTimeout(() => beginDismiss(id, "timer"), record.remaining);
+      }
+    }
+    function setRegionPointerInside(nextValue) {
+      isPointerInsideRegion = nextValue;
+      if (shouldPauseTimers()) {
+        pauseAllTimers();
+      } else {
+        resumeAllTimers();
+      }
+    }
+    function handleRegionFocusIn(event) {
+      const previousTarget = event.relatedTarget;
+      if (!isFocusInsideRegion && previousTarget instanceof HTMLElement && !regionElement?.contains(previousTarget)) {
+        returnFocusElement = previousTarget;
+      }
+      isFocusInsideRegion = true;
+      pauseAllTimers();
+      synchronizeFocusedToastEscapeHandler();
+    }
+    function handleRegionFocusOut(event) {
+      const currentTarget = event.currentTarget;
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && currentTarget instanceof Node) {
+        if (currentTarget.contains(nextTarget))
+          return;
+        isFocusInsideRegion = false;
+        releaseToastEscapeHandler();
+        resumeAllTimers();
+        return;
+      }
+      queueMicrotask(() => {
+        if (!(currentTarget instanceof Node))
+          return;
+        isFocusInsideRegion = currentTarget.contains(document.activeElement);
+        synchronizeFocusedToastEscapeHandler();
+        if (!isFocusInsideRegion)
+          resumeAllTimers();
+      });
+    }
+    function getToastElement(id) {
+      return regionElement?.querySelector(`[data-cinder-toast-id="${CSS.escape(id)}"]`) ?? null;
+    }
+    function beginDismiss(id, reason) {
+      const item = findToast(id);
+      if (!item || item.leaving)
+        return;
+      clearTimer(id);
+      invalidateGeneration(id);
+      const element = getToastElement(id);
+      const shell = element?.closest(".cinder-toast-shell");
+      if (element && shell && !reducedMotion.current) {
+        shell.style.setProperty("--cinder-toast-height", `${shell.offsetHeight}px`);
+        shell.offsetHeight;
+      }
+      const focusNeedsMove = element?.contains(document.activeElement) ?? false;
+      item.leaving = true;
+      item.swipeX = 0;
+      item.swiping = false;
+      politeStack = [...politeStack];
+      assertiveStack = [...assertiveStack];
+      if (focusNeedsMove)
+        moveFocusAfterDismiss(id, reason);
+      const generation = item.generation;
+      if (!shell) {
+        queueMicrotask(() => reallyRemove(id, generation));
+        return;
+      }
+      clearRemovalTimer(id);
+      const cancelCompletion = waitForTransitionCompletion({
+        element: shell,
+        reducedMotion: reducedMotion.current,
+        onComplete: () => reallyRemove(id, generation)
+      });
+      removalTimers.set(id, cancelCompletion);
+    }
+    function reallyRemove(id, generation) {
+      const item = findToast(id);
+      if (!item || item.generation !== generation)
+        return;
+      clearTimer(id);
+      clearRemovalTimer(id);
+      removeFromBothStacks(id);
+      clearGeneration(id);
+    }
+    function moveFocusAfterDismiss(id, reason) {
+      if (reason === "timer" || reason === "overflow" || reason === "programmatic" || reason === "dismissAll") {
+        return;
+      }
+      queueMicrotask(() => {
+        const candidates = [...regionElement?.querySelectorAll(".cinder-toast") ?? []].filter((element) => element.dataset["cinderToastId"] !== id).filter((element) => element.dataset["cinderLeaving"] !== "true");
+        const nextControl = candidates.map((element) => element.querySelector("button:not([disabled])")).find((element) => element !== null);
+        (nextControl ?? returnFocusElement ?? document.body).focus();
+        synchronizeFocusedToastEscapeHandler();
+      });
+    }
+    function handleActionClick(item) {
+      if (item.leaving)
+        return;
+      if (!item.action)
+        return;
+      item.action.onAction();
+      if (!item.action.keepOpen) {
+        beginDismiss(item.id, "action");
+      }
+    }
+    function promise(promiseToTrack, options) {
+      const id = getNextToastId(options);
+      if (!canMutateToasts()) {
+        promiseToTrack.then(undefined, () => {});
+        return id;
+      }
+      const loadingOptions = { id, duration: 0, variant: "info", pending: true };
+      if (options.dismissible !== undefined)
+        loadingOptions.dismissible = options.dismissible;
+      const pendingToast = upsertToast(options.loading, loadingOptions);
+      const generation = pendingToast.generation;
+      const isCurrentPromiseToast = () => !destroyed && generations.get(id) === generation && findToast(id);
+      promiseToTrack.then((value) => {
+        if (!isCurrentPromiseToast())
+          return;
+        const message = typeof options.success === "function" ? options.success(value) : options.success;
+        const successOptions = { id, variant: "success" };
+        if (options.duration !== undefined)
+          successOptions.duration = options.duration;
+        if (options.dismissible !== undefined)
+          successOptions.dismissible = options.dismissible;
+        if (options.action !== undefined)
+          successOptions.action = options.action;
+        upsertToast(message, successOptions);
+      }, (error) => {
+        if (!isCurrentPromiseToast())
+          return;
+        const message = typeof options.error === "function" ? options.error(error) : options.error;
+        const errorOptions = { id, variant: "danger" };
+        if (options.duration !== undefined)
+          errorOptions.duration = options.duration;
+        if (options.dismissible !== undefined)
+          errorOptions.dismissible = options.dismissible;
+        if (options.action !== undefined)
+          errorOptions.action = options.action;
+        upsertToast(message, errorOptions);
+      });
+      return id;
+    }
+    function handleToastKeydown(event, item) {
+      if (event.key !== "Escape")
+        return;
+      if (!item.dismissible)
+        return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      beginDismiss(item.id, "keyboard");
+    }
+    function getFocusedToast() {
+      const activeElement = document.activeElement;
+      if (!(activeElement instanceof HTMLElement))
+        return;
+      const toastElement = activeElement.closest(".cinder-toast");
+      const id = toastElement?.dataset["cinderToastId"];
+      if (!id)
+        return;
+      return findToast(id);
+    }
+    function releaseToastEscapeHandler() {
+      releaseFocusedToastEscape?.();
+      releaseFocusedToastEscape = null;
+    }
+    function synchronizeFocusedToastEscapeHandler() {
+      if (!isFocusInsideRegion) {
+        releaseToastEscapeHandler();
+        return;
+      }
+      const focusedToast = getFocusedToast();
+      if (!focusedToast?.dismissible || focusedToast.leaving) {
+        releaseToastEscapeHandler();
+        return;
+      }
+      if (releaseFocusedToastEscape)
+        return;
+      releaseFocusedToastEscape = pushEscapeHandler(() => {
+        const toast = getFocusedToast();
+        if (!toast?.dismissible || toast.leaving)
+          return;
+        beginDismiss(toast.id, "keyboard");
+      });
+    }
+    function updateToastSwipe(id, swipeX) {
+      const item = findToast(id);
+      if (!item || item.leaving)
+        return;
+      item.swipeX = swipeX;
+      item.swiping = swipeX !== 0;
+      politeStack = [...politeStack];
+      assertiveStack = [...assertiveStack];
+    }
+    function createToastInteractions(item) {
+      let pointerId = null;
+      let startX = 0;
+      return (element) => {
+        function handlePointerDown(event) {
+          if (!item.dismissible || item.leaving)
+            return;
+          pointerId = event.pointerId;
+          startX = event.clientX;
+          element.setPointerCapture?.(event.pointerId);
+        }
+        function handlePointerMove(event) {
+          if (pointerId !== event.pointerId)
+            return;
+          updateToastSwipe(item.id, event.clientX - startX);
+        }
+        function handlePointerUp(event) {
+          if (pointerId !== event.pointerId)
+            return;
+          const delta = event.clientX - startX;
+          pointerId = null;
+          if (Math.abs(delta) >= 80) {
+            beginDismiss(item.id, "swipe");
+          } else {
+            updateToastSwipe(item.id, 0);
+          }
+        }
+        function handlePointerCancel() {
+          pointerId = null;
+          updateToastSwipe(item.id, 0);
+        }
+        function handleKeydown(event) {
+          handleToastKeydown(event, item);
+        }
+        element.addEventListener("keydown", handleKeydown);
+        element.addEventListener("pointerdown", handlePointerDown);
+        element.addEventListener("pointermove", handlePointerMove);
+        element.addEventListener("pointerup", handlePointerUp);
+        element.addEventListener("pointercancel", handlePointerCancel);
+        return () => {
+          element.removeEventListener("keydown", handleKeydown);
+          element.removeEventListener("pointerdown", handlePointerDown);
+          element.removeEventListener("pointermove", handlePointerMove);
+          element.removeEventListener("pointerup", handlePointerUp);
+          element.removeEventListener("pointercancel", handlePointerCancel);
+        };
+      };
+    }
+    setToastContext({ show, dismiss, dismissAll, promise });
+    const DISMISS_LABEL_MAX = 60;
+    function dismissLabel(message) {
+      const trimmed = message.trim();
+      if (trimmed.length === 0)
+        return "Dismiss notification";
+      if (trimmed.length <= DISMISS_LABEL_MAX)
+        return `Dismiss: ${trimmed}`;
+      return `Dismiss: ${trimmed.slice(0, DISMISS_LABEL_MAX - 1).trimEnd()}…`;
+    }
+    onDestroy(() => {
+      destroyed = true;
+      for (const id of timers.keys())
+        clearTimer(id);
+      for (const id of removalTimers.keys())
+        clearRemovalTimer(id);
+      generations.clear();
+      politeStack = [];
+      assertiveStack = [];
+      releaseToastEscapeHandler();
+    });
+    function toastItem($$renderer3, toast, index) {
+      $$renderer3.push(`<div class="cinder-toast-shell"${$.attr_style(`--cinder-toast-stack-index: ${index};`)}${$.attr("data-cinder-presence", toast.leaving ? "exiting" : "entered")}><div class="cinder-toast" role="group" aria-label="Notification"${$.attr("data-cinder-variant", toast.variant)}${$.attr("data-cinder-toast-id", toast.id)}${$.attr("data-cinder-pending", toast.pending ? "true" : undefined)}${$.attr("data-cinder-leaving", toast.leaving ? "true" : undefined)}${$.attr("data-cinder-swiping", toast.swiping ? "true" : undefined)}${$.attr_style(toast.swipeX ? `--cinder-toast-swipe-x: ${toast.swipeX}px;` : undefined)}>`);
+      if (toast.icon) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<div class="cinder-toast__icon" aria-hidden="true">`);
+        toast.icon($$renderer3);
+        $$renderer3.push(`<!----></div>`);
+      } else if (toast.showIcon) {
+        $$renderer3.push("<!--[1-->");
+        $$renderer3.push(`<div class="cinder-toast__icon" aria-hidden="true">`);
+        if (toast.variant === "success") {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>`);
+        } else if (toast.variant === "warning") {
+          $$renderer3.push("<!--[1-->");
+          $$renderer3.push(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`);
+        } else if (toast.variant === "danger") {
+          $$renderer3.push("<!--[2-->");
+          $$renderer3.push(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path></svg>`);
+        }
+        $$renderer3.push(`<!--]--></div>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (toast.pending) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<span class="cinder-toast__spinner" aria-hidden="true"></span>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> <div class="cinder-toast__message">${$.escape(toast.message)}</div> `);
+      if (toast.action) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<button type="button" class="cinder-toast__action"${$.attr("disabled", toast.leaving, true)}>${$.escape(toast.action.label)}</button>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (toast.dismissible) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<button type="button" class="cinder-toast__dismiss"${$.attr("aria-label", dismissLabel(toast.message))}${$.attr("disabled", toast.leaving, true)}><svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div></div>`);
+    }
+    if (children) {
+      $$renderer2.push("<!--[0-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (hydrated) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-toast-region", className)))} role="presentation"${$.attr("data-cinder-position", position)}><div role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel"><!--[-->`);
+      const each_array = $.ensure_array_like(politeStack);
+      for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+        let toast = each_array[index];
+        toastItem($$renderer2, toast, index);
+      }
+      $$renderer2.push(`<!--]--></div> <div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel" data-cinder-stack="assertive"><!--[-->`);
+      const each_array_1 = $.ensure_array_like(assertiveStack);
+      for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
+        let toast = each_array_1[index];
+        toastItem($$renderer2, toast, index);
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/toast-region/index.ts
+var toast_region_default = Toast_region;
+export { getToastContext, Toast_region, toast_region_default };
+
+//# debugId=6A11157D3B7DFB2264756E2164756E21