@enigmax/primitives 0.16.0 → 0.18.0

package/dist/chunk-XQHCZAPJ.js

@@ -0,0 +1,102 @@
+import { estimatePasswordStrength } from './chunk-HC2ME5PU.js';
+import { useMemo, useRef, useEffect, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SCORE_LABELS = ["Very weak", "Weak", "Fair", "Strong", "Very strong"];
+function PasswordExtras({
+  id,
+  value,
+  strength,
+  onStrengthChange,
+  onScore,
+  breach,
+  breachDelay,
+  onBreachChange,
+  classNames
+}) {
+  const estimateOptions = typeof strength === "object" ? strength : void 0;
+  const userInputs = estimateOptions?.userInputs;
+  const report = useMemo(
+    () => strength === false ? null : estimatePasswordStrength(value, { userInputs }),
+    // The array is compared by identity, so a literal would re-estimate every render.
+    [strength, value, userInputs]
+  );
+  const strengthListener = useRef(onStrengthChange);
+  strengthListener.current = onStrengthChange;
+  const scoreListener = useRef(onScore);
+  scoreListener.current = onScore;
+  useEffect(() => {
+    if (!report) return;
+    strengthListener.current?.(report);
+    scoreListener.current(report.empty ? null : report.score);
+  }, [report]);
+  const [breachState, setBreachState] = useState({ status: "idle", count: 0, error: null });
+  const breachListener = useRef(onBreachChange);
+  breachListener.current = onBreachChange;
+  useEffect(() => {
+    if (!breach || !value) {
+      setBreachState({ status: "idle", count: 0, error: null });
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      setBreachState({ status: "checking", count: 0, error: null });
+      breach(value, { signal: controller.signal }).then((result) => {
+        if (controller.signal.aborted) return;
+        setBreachState({ status: result.breached ? "breached" : "safe", count: result.count, error: null });
+      }).catch((error) => {
+        if (controller.signal.aborted) return;
+        setBreachState({ status: "error", count: 0, error });
+      });
+    }, breachDelay);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [breach, value, breachDelay]);
+  useEffect(() => {
+    breachListener.current(breachState);
+  }, [breachState]);
+  if (!report) return null;
+  return /* @__PURE__ */ jsx(PasswordStrength, { id, report, classNames });
+}
+function PasswordStrength({
+  value = "",
+  report,
+  userInputs,
+  segments = 5,
+  labels = SCORE_LABELS,
+  showWarning = true,
+  classNames,
+  ...props
+}) {
+  const computed = useMemo(
+    () => report ?? estimatePasswordStrength(value, { userInputs }),
+    [report, value, userInputs]
+  );
+  const score = computed.score;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-enigma-password-strength": "",
+      "data-score": computed.empty ? void 0 : score,
+      "data-empty": computed.empty ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-enigma-password-strength-track": "", "aria-hidden": "true", className: classNames?.track, children: Array.from({ length: segments }, (unused, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-enigma-password-strength-segment": "",
+            className: classNames?.segment,
+            "data-filled": !computed.empty && index <= score ? "" : void 0
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsx("p", { "data-enigma-password-strength-label": "", role: "status", "aria-live": "polite", className: classNames?.label, children: computed.empty ? "" : labels[score] ?? "" }),
+        showWarning && !computed.empty && computed.warnings.length > 0 && /* @__PURE__ */ jsx("p", { "data-enigma-password-strength-warning": "", className: classNames?.warning, children: computed.warnings[0] })
+      ]
+    }
+  );
+}
+
+export { PasswordExtras, PasswordStrength };

package/dist/chunk-ZCUFYBPB.js

@@ -0,0 +1,154 @@
+import { defaultQueue } from './chunk-QYMUIW5I.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+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" })
+      ] })
+    }
+  );
+}
+
+export { Toaster };

package/dist/chunk-ZWR2EXHQ.js

@@ -0,0 +1,55 @@
+import { createMarquee } from './chunk-UOSSNUSC.js';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useMarquee(options = {}) {
+  const laneRef = useRef(null);
+  const trackRef = useRef(null);
+  const instanceRef = useRef(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const [copies, setCopies] = useState(2);
+  const [dragging, setDragging] = useState(false);
+  const [period, setPeriod] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    const lane = laneRef.current;
+    const track = trackRef.current;
+    if (!lane || !track) return;
+    const instance = createMarquee(lane, track, {
+      ...optionsRef.current,
+      // React owns the DOM; cloning behind its back would be undone on render.
+      copies: "external",
+      onCopyCountChange: setCopies,
+      onMeasure: (measured) => setPeriod(measured),
+      onItemClick: (event) => optionsRef.current.onItemClick?.(event)
+    });
+    instanceRef.current = instance;
+    const syncDragging = () => setDragging(instance.dragging);
+    lane.addEventListener("pointerdown", syncDragging);
+    window.addEventListener("pointerup", syncDragging);
+    window.addEventListener("pointercancel", syncDragging);
+    return () => {
+      lane.removeEventListener("pointerdown", syncDragging);
+      window.removeEventListener("pointerup", syncDragging);
+      window.removeEventListener("pointercancel", syncDragging);
+      instance.destroy();
+      instanceRef.current = null;
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    instanceRef.current?.update(options);
+  }, [options.speed, options.reverse, options.vertical, options.draggable, options.hover, options.decay]);
+  useIsomorphicLayoutEffect(() => {
+    instanceRef.current?.measure();
+  }, [copies]);
+  return {
+    laneRef,
+    trackRef,
+    copies,
+    dragging,
+    period,
+    measure: () => instanceRef.current?.measure()
+  };
+}
+
+export { useMarquee };

package/dist/flags-BBJc9unY.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Country flags as ASSETS, which is the only form of them that renders everywhere.
+ *
+ * The emoji flag is the thing this replaces. It is a pair of regional-indicator code
+ * points, and the glyph for that pair exists only where the platform ships one: Windows
+ * has never shipped country flags in Segoe UI Emoji, so `\u{1F1EA}\u{1F1F8}` renders as
+ * the letters "ES" for the largest desktop platform there is - and a language picker built
+ * out of them looks broken to those readers, with nothing in the code to explain why.
+ * There is no font stack that fixes it, so the fix is not a font: it is an image.
+ *
+ * Three sets, all SVG, all served by enigma itself:
+ *
+ * - `rect` (4:3) and `square` (1:1) - the classic rectangular artwork.
+ * - `circle` - round, which is what a flag next to an avatar or inside a chip wants.
+ *
+ * They are served from enigma's own tree rather than from anyone else's, because a
+ * component whose default source is a third party is a component that breaks when that
+ * third party moves, renames a branch, or goes away.
+ *
+ * Nothing here touches the DOM, so it renders on a server.
+ */
+type FlagShape = "rect" | "square" | "circle";
+/**
+ * `svg` is what the sets are stored as, so it is what a remote source can serve. `png` and
+ * `webp` exist for a LOCAL set (`enigma add flags --flags local --flag-formats webp`), which
+ * rasterises what it downloads, and for a mirror of your own.
+ */
+type FlagFormat = "svg" | "png" | "webp";
+/**
+ * Where the files come from.
+ *
+ * - `"cdn"` - enigma's own artwork, over a CDN. Nothing to install.
+ * - `"local"` - files under `basePath` in your own public directory.
+ * - any URL - a mirror of your own with the same layout
+ *   (`<base>/<shape>/<code>.<format>`), which is exactly the tree the downloader writes.
+ */
+type FlagSource = "cdn" | "local" | (string & {});
+/** enigma's own artwork, over a CDN. Every source shares this layout. */
+declare const FLAG_CDN = "https://cdn.jsdelivr.net/gh/FJRG2007/enigma@main/assets/flags";
+interface FlagOptions {
+    shape?: FlagShape;
+    format?: FlagFormat;
+    source?: FlagSource;
+    /** Where a local set is served from. Default `/flags`. */
+    basePath?: string;
+    /** Rendered HEIGHT in px. The width follows the shape's ratio. Default 16. */
+    size?: number;
+    /**
+     * Language the automatic name is written in. Left out, it follows the document's own
+     * `lang`, which is what a translated page wants.
+     */
+    locale?: string;
+}
+interface FlagConfig extends Required<Omit<FlagOptions, "size" | "locale">> {
+    size: number;
+    locale?: string;
+}
+/**
+ * Set the defaults for every flag on the page, once, at startup.
+ *
+ * This is what makes the CDN/local decision a one-line change rather than a prop on every
+ * call site: `configureFlags({ source: "local" })` moves the whole app onto the files the
+ * downloader wrote, and nothing else in the codebase mentions where a flag comes from.
+ */
+declare function configureFlags(patch: Partial<FlagConfig>): FlagConfig;
+declare function flagConfig(): FlagConfig;
+/** Test seam and a way back to the shipped defaults. */
+declare function resetFlagConfig(): FlagConfig;
+/** Width / height of each shape. The circle set is square; only `rect` is 4:3. */
+declare const FLAG_RATIO: Record<FlagShape, number>;
+/**
+ * Anything a codebase calls a country into the file name the sets use, or null.
+ *
+ * Null rather than a guess: a code this cannot resolve would otherwise become a 404 image
+ * with no alt text, and a broken flag beside a country name is worse than no flag at all.
+ * An emoji flag is accepted and converted, so migrating an existing picker is a rename of
+ * the component and nothing else.
+ */
+declare function normalizeFlagCode(value: string | null | undefined): string | null;
+/**
+ * The country's name, in the reader's language, or null.
+ *
+ * `Intl.DisplayNames` is the whole implementation: the names are in the runtime already,
+ * translated, and maintained by whoever maintains the platform - so this ships no table of
+ * 250 country names to go stale, and a Spanish page says "España" without being told.
+ *
+ * Null for anything it cannot name, and that is deliberate for SUBDIVISIONS: `gb-eng` is
+ * England, and falling back to the region (`gb`, "United Kingdom") would put a confidently
+ * wrong name on the flag. A name nobody can source is worse than no name.
+ */
+declare function flagName(code: string | null | undefined, locale?: string): string | null;
+/** Everything a renderer needs, computed in one pass. Null when the code is unusable. */
+interface FlagView {
+    /** The file name, e.g. `es`, `gb-eng`. */
+    code: string;
+    src: string;
+    shape: FlagShape;
+    format: FlagFormat;
+    width: number;
+    height: number;
+    /** The automatic name, when there is one. */
+    name: string | null;
+}
+/**
+ * The URL for one flag. Null when the code cannot be resolved.
+ *
+ * A raster format asked of the CDN falls back to SVG rather than producing a 404: the sets
+ * are stored as SVG, so `format: "webp"` is only meaningful against a local set or a mirror.
+ * It says so once, in development, instead of silently disagreeing with the call site.
+ */
+declare function flagSrc(code: string | null | undefined, options?: FlagOptions): string | null;
+/** `flagSrc` plus the resolved geometry and name, for a renderer that has to size the box. */
+declare function flagView(code: string | null | undefined, options?: FlagOptions): FlagView | null;
+interface FlagAttributeOptions extends FlagOptions {
+    /** Your own accessible name, which wins over the automatic one. */
+    label?: string;
+    /**
+     * Beside a country name that is already on screen, the flag is decoration and repeating
+     * the name only makes a screen reader say it twice.
+     */
+    decorative?: boolean;
+}
+/**
+ * Attributes for a plain `<img>`, for vanilla, Astro and any template language.
+ *
+ * The accessible name is AUTOMATIC: the country's own name, in the reader's language, from
+ * `Intl.DisplayNames`. `label` replaces it and `decorative` drops it. Nothing is ever
+ * invented - a subdivision the platform cannot name, or a runtime without `Intl`, renders
+ * as decoration rather than putting a bare "ES" into a screen reader.
+ */
+declare function flagAttributes(code: string | null | undefined, options?: FlagAttributeOptions): Record<string, string | number> | null;
+
+export { FLAG_CDN as F, FLAG_RATIO as a, type FlagConfig as b, type FlagFormat as c, type FlagOptions as d, type FlagShape as e, type FlagSource as f, type FlagView as g, configureFlags as h, flagAttributes as i, flagConfig as j, flagName as k, flagSrc as l, flagView as m, normalizeFlagCode as n, resetFlagConfig as r };