@enigmax/primitives 0.11.0 → 0.12.0

package/dist/{chunk-42Y7OOJM.js → chunk-DD2X5B2J.js}

@@ -817,4 +817,334 @@ function estimatePasswordStrength(password, options = {}) {
   return { score, bits, warnings, empty: false };
 }
 
-export { INPUT_ICON_PATHS, createButton, createInput, createMarquee, estimatePasswordStrength, generatePassword, iconMarkup };
+// src/core/notifications.ts
+var DEFAULT_MAX = 4;
+var DEFAULT_DURATION = 5e3;
+function createNotifications(options = {}) {
+  const view = typeof document === "undefined" ? null : document;
+  const max = options.max ?? DEFAULT_MAX;
+  const defaultDuration = options.duration ?? DEFAULT_DURATION;
+  const sticky = /* @__PURE__ */ new Set([...options.stickyTones ?? ["error"], "loading"]);
+  let items = [];
+  let paused = false;
+  let sequence = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const timers = /* @__PURE__ */ new Map();
+  function emit() {
+    const snapshot = Object.freeze([...items]);
+    for (const listener of listeners) listener(snapshot);
+  }
+  function clearTimer(id) {
+    const timer = timers.get(id);
+    if (timer?.handle) clearTimeout(timer.handle);
+    timers.delete(id);
+  }
+  function startTimer(id, remaining) {
+    if (!Number.isFinite(remaining) || remaining <= 0) return;
+    const handle = paused ? null : setTimeout(() => dismiss(id), remaining);
+    timers.set(id, { handle, remaining, startedAt: Date.now() });
+  }
+  function dismiss(id) {
+    const next = items.filter((item) => item.id !== id);
+    if (next.length === items.length) return;
+    items = next;
+    clearTimer(id);
+    emit();
+  }
+  function notify(input) {
+    const tone = input.tone ?? "info";
+    const duration = input.duration ?? (sticky.has(tone) ? Infinity : defaultDuration);
+    const existing = input.key ? items.find((item) => item.key === input.key) : void 0;
+    const id = existing?.id ?? `n${++sequence}`;
+    const notification = {
+      id,
+      key: input.key,
+      title: input.title,
+      body: input.body,
+      tone,
+      duration,
+      action: input.action,
+      data: input.data,
+      createdAt: Date.now()
+    };
+    items = existing ? items.map((item) => item.id === id ? notification : item) : [...items, notification];
+    if (items.length > max) {
+      const evictable = items.find((item) => Number.isFinite(item.duration) && item.id !== id);
+      if (evictable) {
+        items = items.filter((item) => item.id !== evictable.id);
+        clearTimer(evictable.id);
+      } else {
+        items = items.slice(items.length - max);
+      }
+    }
+    clearTimer(id);
+    startTimer(id, duration);
+    emit();
+    return id;
+  }
+  const onVisibility = () => {
+    if (!view) return;
+    if (view.hidden) instance.pause();
+    else instance.resume();
+  };
+  function update(id, patch) {
+    const current = items.find((item) => item.id === id);
+    if (!current) return;
+    const tone = patch.tone ?? current.tone;
+    const duration = patch.duration ?? (patch.tone ? sticky.has(tone) ? Infinity : defaultDuration : current.duration);
+    items = items.map((item) => item.id === id ? { ...current, ...patch, tone, duration } : item);
+    clearTimer(id);
+    startTimer(id, duration);
+    emit();
+  }
+  function resolveMessage(message, value) {
+    const resolved = typeof message === "function" ? message(value) : message;
+    return typeof resolved === "string" ? { title: resolved } : resolved;
+  }
+  async function promise(work, messages) {
+    const start = typeof messages.loading === "string" ? { title: messages.loading } : messages.loading;
+    const key = start.key ?? `p${++sequence}`;
+    notify({ ...start, key, tone: "loading" });
+    try {
+      const value = await work;
+      notify({ ...resolveMessage(messages.success, value), key, tone: "success" });
+      return value;
+    } catch (error) {
+      notify({ ...resolveMessage(messages.error, error), key, tone: "error" });
+      throw error;
+    }
+  }
+  const instance = {
+    get items() {
+      return Object.freeze([...items]);
+    },
+    notify,
+    update,
+    promise,
+    dismiss,
+    dismissAll() {
+      for (const item of items) clearTimer(item.id);
+      items = [];
+      emit();
+    },
+    pause() {
+      if (paused) return;
+      paused = true;
+      for (const [id, timer] of timers) {
+        if (!timer.handle) continue;
+        clearTimeout(timer.handle);
+        timers.set(id, {
+          handle: null,
+          remaining: Math.max(timer.remaining - (Date.now() - timer.startedAt), 0),
+          startedAt: Date.now()
+        });
+      }
+    },
+    resume() {
+      if (!paused) return;
+      paused = false;
+      for (const [id, timer] of [...timers]) {
+        clearTimer(id);
+        startTimer(id, timer.remaining);
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    destroy() {
+      for (const item of items) clearTimer(item.id);
+      items = [];
+      listeners.clear();
+      view?.removeEventListener("visibilitychange", onVisibility);
+    }
+  };
+  view?.addEventListener("visibilitychange", onVisibility);
+  return instance;
+}
+
+// src/core/network.ts
+var SERVER_NETWORK_STATE = {
+  online: true,
+  downlink: null,
+  downlinkMax: null,
+  effectiveType: null,
+  rtt: null,
+  saveData: null,
+  type: null,
+  recovered: false,
+  slow: false
+};
+function connection() {
+  if (typeof navigator === "undefined") return null;
+  const nav = navigator;
+  return nav.connection ?? nav.mozConnection ?? nav.webkitConnection ?? null;
+}
+function shallowEqual(left, right) {
+  for (const key of Object.keys(left)) {
+    if (left[key] !== right[key]) return false;
+  }
+  return true;
+}
+function createNetworkMonitor() {
+  if (typeof window === "undefined") {
+    return {
+      get state() {
+        return SERVER_NETWORK_STATE;
+      },
+      subscribe() {
+        return () => {
+        };
+      },
+      destroy() {
+      }
+    };
+  }
+  const listeners = /* @__PURE__ */ new Set();
+  let hasBeenOffline = false;
+  let state = read();
+  function read() {
+    const link2 = connection();
+    const online = navigator.onLine;
+    const effectiveType = link2?.effectiveType ?? null;
+    const saveData = link2?.saveData ?? null;
+    return {
+      online,
+      downlink: link2?.downlink ?? null,
+      downlinkMax: link2?.downlinkMax ?? null,
+      effectiveType,
+      rtt: link2?.rtt ?? null,
+      saveData,
+      type: link2?.type ?? null,
+      recovered: online && hasBeenOffline,
+      slow: saveData === true || effectiveType === "2g" || effectiveType === "slow-2g"
+    };
+  }
+  function update() {
+    if (!navigator.onLine) hasBeenOffline = true;
+    const next = read();
+    if (shallowEqual(state, next)) return;
+    state = next;
+    for (const listener of listeners) listener(state);
+  }
+  const link = connection();
+  window.addEventListener("online", update, { passive: true });
+  window.addEventListener("offline", update, { passive: true });
+  link?.addEventListener("change", update, { passive: true });
+  return {
+    get state() {
+      return state;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    destroy() {
+      listeners.clear();
+      window.removeEventListener("online", update);
+      window.removeEventListener("offline", update);
+      link?.removeEventListener("change", update);
+    }
+  };
+}
+
+// src/core/relative-time.ts
+var ZONED = /([zZ]|[+-]\d{2}:?\d{2})$/;
+var DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+var HAS_TIME = /\d{2}:\d{2}/;
+var DURATION = /^([+-])?P(?:(\d+(?:\.\d+)?)Y)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)W)?(?:(\d+(?:\.\d+)?)D)?(?:T(?:(\d+(?:\.\d+)?)H)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)S)?)?$/;
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var WEEK = 7 * DAY;
+var MONTH = 30 * DAY;
+var YEAR = 365 * DAY;
+function ensureZone(text) {
+  const trimmed = text.trim();
+  if (!trimmed || DATE_ONLY.test(trimmed) || ZONED.test(trimmed)) return trimmed;
+  const iso = trimmed.replace(" ", "T");
+  return HAS_TIME.test(iso) ? `${iso}Z` : iso;
+}
+function normalizeDate(value) {
+  if (value == null) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number") return Number.isFinite(value) ? new Date(value) : null;
+  const date = new Date(ensureZone(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function parseDuration(value) {
+  const match = DURATION.exec(value.trim());
+  if (!match) return 0;
+  const [, sign, years, months, weeks, days, hours, minutes, seconds] = match;
+  const n = (part) => part ? Number(part) : 0;
+  const total = n(years) * YEAR + n(months) * MONTH + n(weeks) * WEEK + n(days) * DAY + n(hours) * HOUR + n(minutes) * MINUTE + n(seconds) * SECOND;
+  return sign === "-" ? -total : total;
+}
+function dateTimeOptions(options) {
+  const { second, minute, hour, weekday, day, month, year, timeZone, timeZoneName } = options;
+  const parts = { timeZone, timeZoneName, second, minute, hour, weekday, day, month, year };
+  for (const key of Object.keys(parts)) {
+    if (parts[key] === void 0) delete parts[key];
+  }
+  return parts;
+}
+function format(date, locale, options) {
+  try {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  } catch {
+    return date.toISOString();
+  }
+}
+function relativeTimeView(value, options = {}, now = /* @__PURE__ */ new Date()) {
+  const date = normalizeDate(value);
+  if (!date) return { date: null, iso: "", label: "", exact: "", beyondThreshold: false, absoluteOnly: false };
+  const { locale, threshold = "P30D", prefix = "on", numericBeyondThreshold = false } = options;
+  const age = Math.abs(date.getTime() - now.getTime());
+  const beyondThreshold = age > parseDuration(threshold);
+  const absoluteOnly = numericBeyondThreshold && beyondThreshold;
+  const parts = absoluteOnly ? { day: "numeric", month: "numeric", year: "numeric", timeZone: options.timeZone } : { day: "numeric", month: "short", year: "numeric", ...dateTimeOptions(options) };
+  const label = format(date, locale, parts);
+  return {
+    date,
+    iso: date.toISOString(),
+    label: !absoluteOnly && prefix ? `${prefix} ${label}` : label,
+    exact: format(date, locale, { dateStyle: "full", timeStyle: "long", timeZone: options.timeZone }),
+    beyondThreshold,
+    absoluteOnly
+  };
+}
+function relativeTimeAttributes(view, options = {}) {
+  const attributes = {
+    datetime: view.iso,
+    format: options.format,
+    tense: options.tense,
+    precision: options.precision,
+    threshold: options.threshold,
+    prefix: options.prefix,
+    "format-style": options.formatStyle,
+    second: options.second,
+    minute: options.minute,
+    hour: options.hour,
+    weekday: options.weekday,
+    day: options.day,
+    month: options.month,
+    year: options.year,
+    lang: options.locale,
+    "time-zone": options.timeZone,
+    "time-zone-name": options.timeZoneName,
+    // Boolean attributes are read by presence: "false" would still be true.
+    "no-title": options.noTitle ? "" : void 0
+  };
+  const out = {};
+  for (const [key, value] of Object.entries(attributes)) {
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+}
+
+export { INPUT_ICON_PATHS, SERVER_NETWORK_STATE, createButton, createInput, createMarquee, createNetworkMonitor, createNotifications, ensureZone, estimatePasswordStrength, generatePassword, iconMarkup, normalizeDate, parseDuration, relativeTimeAttributes, relativeTimeView };

package/dist/{chunk-L4KA342C.js → chunk-YFM2FWHQ.js}

@@ -1,7 +1,7 @@
-import { generatePassword, estimatePasswordStrength, INPUT_ICON_PATHS, createButton, createMarquee, createInput } from './chunk-42Y7OOJM.js';
+import { generatePassword, estimatePasswordStrength, INPUT_ICON_PATHS, createNotifications, createButton, createMarquee, createInput, createNetworkMonitor, SERVER_NETWORK_STATE, relativeTimeView, relativeTimeAttributes } from './chunk-DD2X5B2J.js';
 import { createSearch } from './chunk-UZFEEFMF.js';
-import { forwardRef, createElement, useRef, useState, useId, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, createElement, useRef, useState, useId, useCallback, useEffect, useMemo, useSyncExternalStore, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useMarquee(options = {}) {
@@ -172,7 +172,7 @@ function useButton(options = {}) {
           event.preventDefault();
           return;
         }
-        void instance.press();
+        void instance.press(event);
       },
       "aria-disabled": !state.available,
       "aria-busy": state.loading,
@@ -198,15 +198,16 @@ var Button = forwardRef(function Button2({
   pending,
   href,
   disabled,
-  loading,
+  loading: loading2,
   cooldown,
   shortcut,
   onPress,
+  onClick,
   onChange,
   type = "button",
   ...rest
 }, ref) {
-  const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
+  const button = useButton({ href, disabled, loading: loading2, cooldown, shortcut, onPress: onPress ?? onClick, onChange });
   const state = button;
   const Tag = as ?? (state.element === "a" ? getLinkComponent() : "button");
   const native = Tag === "button" ? { type } : {};
@@ -462,5 +463,256 @@ function PasswordStrength({
     }
   );
 }
+var defaultQueue = createNotifications();
+function useNotifications(queue = defaultQueue) {
+  const snapshot = useRef(queue.items);
+  const items = useSyncExternalStore(
+    (listener) => queue.subscribe((next) => {
+      snapshot.current = next;
+      listener();
+    }),
+    () => snapshot.current,
+    () => snapshot.current
+  );
+  return useMemo(() => ({
+    items,
+    notify: queue.notify,
+    dismiss: queue.dismiss,
+    dismissAll: queue.dismissAll,
+    pause: queue.pause,
+    resume: queue.resume
+  }), [items, queue]);
+}
+function createNotificationQueue(options) {
+  return createNotifications(options);
+}
+function swipeAxis(position) {
+  if (position.endsWith("-center")) return { axis: "y", sign: position.startsWith("top") ? -1 : 1 };
+  return { axis: "x", sign: position.endsWith("-left") ? -1 : 1 };
+}
+function Toaster({
+  queue = defaultQueue,
+  position = "bottom-right",
+  exitDuration = 200,
+  swipeThreshold = 60,
+  children,
+  label = "Notifications",
+  className,
+  style
+}) {
+  const [rendered, setRendered] = useState(
+    () => queue.items.map((notification) => ({ notification, leaving: false }))
+  );
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const sync = (items) => {
+      setRendered((current) => {
+        const live = new Map(items.map((item) => [item.id, item]));
+        const kept = current.map((entry) => {
+          const still = live.get(entry.notification.id);
+          if (still) return { notification: still, leaving: false };
+          if (entry.leaving) return entry;
+          const timer = setTimeout(() => {
+            timers.current.delete(entry.notification.id);
+            setRendered((later) => later.filter((row) => row.notification.id !== entry.notification.id));
+          }, exitDuration);
+          timers.current.set(entry.notification.id, timer);
+          return { ...entry, leaving: true };
+        });
+        const seen = new Set(kept.map((entry) => entry.notification.id));
+        const added = items.filter((item) => !seen.has(item.id)).map((item) => ({ notification: item, leaving: false }));
+        return [...kept, ...added];
+      });
+    };
+    sync(queue.items);
+    return queue.subscribe(sync);
+  }, [queue, exitDuration]);
+  useEffect(() => {
+    const pending = timers.current;
+    return () => {
+      for (const timer of pending.values()) clearTimeout(timer);
+      pending.clear();
+    };
+  }, []);
+  if (!rendered.length) return null;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": label,
+      "data-enigma-toaster": "",
+      "data-position": position,
+      className,
+      style,
+      onPointerEnter: () => queue.pause(),
+      onPointerLeave: () => queue.resume(),
+      onFocusCapture: () => queue.pause(),
+      onBlurCapture: () => queue.resume(),
+      children: rendered.map((entry, index) => /* @__PURE__ */ jsx(
+        Toast,
+        {
+          entry,
+          index: rendered.length - 1 - index,
+          position,
+          swipeThreshold,
+          onDismiss: () => queue.dismiss(entry.notification.id),
+          render: children
+        },
+        entry.notification.id
+      ))
+    }
+  );
+}
+function Toast({ entry, index, position, swipeThreshold, onDismiss, render }) {
+  const { notification, leaving } = entry;
+  const [offset, setOffset] = useState(0);
+  const [swiping, setSwiping] = useState(false);
+  const start = useRef(0);
+  const { axis, sign } = swipeAxis(position);
+  const onPointerDown = useCallback((event) => {
+    if (event.target.closest("button")) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    start.current = axis === "x" ? event.clientX : event.clientY;
+    setSwiping(true);
+  }, [axis]);
+  const onPointerMove = useCallback((event) => {
+    if (!swiping) return;
+    const delta = (axis === "x" ? event.clientX : event.clientY) - start.current;
+    setOffset(sign > 0 ? Math.max(0, delta) : Math.min(0, delta));
+  }, [swiping, axis, sign]);
+  const onPointerUp = useCallback(() => {
+    if (!swiping) return;
+    setSwiping(false);
+    if (Math.abs(offset) >= swipeThreshold) {
+      onDismiss();
+      return;
+    }
+    setOffset(0);
+  }, [swiping, offset, swipeThreshold, onDismiss]);
+  const controls = { dismiss: onDismiss };
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      "data-enigma-toast": "",
+      "data-tone": notification.tone,
+      "data-state": leaving ? "leaving" : "open",
+      "data-index": index,
+      "data-front": index === 0 ? "" : void 0,
+      "data-swiping": swiping ? "" : void 0,
+      role: notification.tone === "error" ? "alert" : "status",
+      "aria-live": notification.tone === "error" ? "assertive" : "polite",
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") onDismiss();
+      },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      style: {
+        // Read by the theme, so the transform stays the stylesheet's decision.
+        "--enigma-toast-swipe": `${offset}px`,
+        "--enigma-toast-index": index
+      },
+      children: render ? render(notification, controls) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { "data-enigma-toast-title": "", children: notification.title }),
+        notification.body && /* @__PURE__ */ jsx("p", { "data-enigma-toast-body": "", children: notification.body }),
+        notification.action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-enigma-toast-action": "",
+            onClick: () => {
+              notification.action?.onSelect();
+              if (notification.action?.dismiss !== false) onDismiss();
+            },
+            children: notification.action.label
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-toast-close": "", "aria-label": "Dismiss", onClick: onDismiss, children: "\xD7" })
+      ] })
+    }
+  );
+}
+function useNetworkState() {
+  const monitor = useMemo(() => createNetworkMonitor(), []);
+  const snapshot = useRef(monitor.state);
+  return useSyncExternalStore(
+    (listener) => monitor.subscribe((next) => {
+      snapshot.current = next;
+      listener();
+    }),
+    () => snapshot.current,
+    () => SERVER_NETWORK_STATE
+  );
+}
+var loading = null;
+function loadElement() {
+  if (loading || typeof window === "undefined") return;
+  loading = import('@github/relative-time-element').catch(() => {
+    return null;
+  });
+}
+function RelativeTime({
+  date,
+  fallback = null,
+  capitalize = false,
+  capitalizeFirst = true,
+  now,
+  format,
+  tense,
+  precision,
+  threshold,
+  prefix,
+  formatStyle,
+  locale,
+  timeZone,
+  second,
+  minute,
+  hour,
+  weekday,
+  day,
+  month,
+  year,
+  timeZoneName,
+  noTitle,
+  numericBeyondThreshold,
+  ...rest
+}) {
+  useEffect(loadElement, []);
+  const options = {
+    format,
+    tense,
+    precision,
+    threshold,
+    prefix,
+    formatStyle,
+    locale,
+    timeZone,
+    second,
+    minute,
+    hour,
+    weekday,
+    day,
+    month,
+    year,
+    timeZoneName,
+    noTitle,
+    numericBeyondThreshold
+  };
+  const view = relativeTimeView(date, options, now);
+  if (!view.date) return fallback;
+  const marks = {
+    "data-relative-time-capitalize": capitalize ? "true" : void 0,
+    "data-relative-time-capitalize-first-letter": capitalizeFirst ? "true" : void 0,
+    // The text differs between the server's instant and the browser's, which is the
+    // one hydration difference React has an escape hatch for rather than a bug.
+    suppressHydrationWarning: true
+  };
+  if (view.absoluteOnly) {
+    return createElement("time", { dateTime: view.iso, title: noTitle ? void 0 : view.exact, ...marks, ...rest }, view.label);
+  }
+  return createElement("relative-time", { ...relativeTimeAttributes(view, options), ...marks, ...rest }, view.label);
+}
 
-export { Button, Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch };
+export { Button, Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch };