fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/timeline/Timeline.js

@@ -1,95 +1,184 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback, memo } from "react";
 import { cn } from "../../utils.js";
 import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
 import { rafThrottle } from "../../internals/motion/raf.js";
-function writeProgressLine(line, progress, height) {
-  if (!line) return;
-  line.style.height = `${progress * height}px`;
-  line.style.opacity = String(Math.min(progress / 0.1, 1));
-}
-function Timeline({ items = [], title, description, className, content }) {
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+/* empty css             */
+const DOT_HALF = 20;
+const END_PAD = 56;
+const STICKY_FALLBACK = 160;
+const pad = (n) => String(n).padStart(2, "0");
+const TimelineContent = memo(function TimelineContent2({
+  content,
+  item
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: content ? content(item) : null });
+});
+function Timeline({
+  items = [],
+  title,
+  description,
+  className,
+  content,
+  accent
+}) {
+  const reduced = useReducedMotion();
+  const rootRef = useRef(null);
   const timelineRef = useRef(null);
-  const progressRef = useRef(null);
+  const rowEls = useRef([]);
+  const dotOffsets = useRef([]);
+  const readingLine = useRef(STICKY_FALLBACK + DOT_HALF);
+  const head = useRef(0);
   const heightRef = useRef(0);
-  const progressValueRef = useRef(0);
   const [timelineHeight, setTimelineHeight] = useState(0);
-  useIsomorphicLayoutEffect(() => {
-    function measure(el2) {
-      heightRef.current = el2.getBoundingClientRect().height;
-      setTimelineHeight(heightRef.current);
-    }
-    function updateProgress() {
-      const el2 = timelineRef.current;
-      if (!el2) return;
-      const rect = el2.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const startOffset = viewportHeight * 0.1;
-      const endOffset = viewportHeight * 0.5;
-      const start = rect.top - startOffset;
-      const end = rect.bottom - endOffset;
-      const total = end - start;
-      if (total <= 0) {
-        progressValueRef.current = 0;
-      } else {
-        const progress = -start / total;
-        progressValueRef.current = Math.max(0, Math.min(1, progress));
-      }
-      writeProgressLine(progressRef.current, progressValueRef.current, heightRef.current);
+  const [ready, setReady] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const place = useCallback(() => {
+    const track = timelineRef.current;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const offsets = dotOffsets.current;
+    const start = offsets[0] ?? 0;
+    const end = Math.max(start, heightRef.current - END_PAD);
+    const raw = readingLine.current - rect.top;
+    const next = Math.min(end, Math.max(start, raw));
+    head.current = next;
+    rootRef.current?.style.setProperty("--tl-progress", `${next}px`);
+    let idx = -1;
+    for (let i = 0; i < offsets.length; i++) {
+      if (offsets[i] <= next + 0.5) idx = i;
     }
-    const el = timelineRef.current;
-    if (el) {
-      measure(el);
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      if (timelineRef.current) {
-        measure(timelineRef.current);
-        writeProgressLine(progressRef.current, progressValueRef.current, heightRef.current);
-      }
-    });
-    if (el) {
-      resizeObserver.observe(el);
+    setActiveIndex(idx);
+    setReady(true);
+  }, []);
+  const measure = useCallback(() => {
+    const track = timelineRef.current;
+    if (!track) return;
+    heightRef.current = track.offsetHeight;
+    setTimelineHeight(heightRef.current);
+    const next = [];
+    let firstDotCentre = DOT_HALF;
+    for (const row of rowEls.current) {
+      if (!row) continue;
+      const padTop = parseFloat(getComputedStyle(row).paddingTop) || 0;
+      const box = row.querySelector("[data-timeline-dot-box]");
+      const centre = box && box.offsetHeight ? box.offsetTop + box.offsetHeight / 2 : DOT_HALF;
+      if (next.length === 0) firstDotCentre = centre;
+      next.push(row.offsetTop + padTop + centre);
     }
-    const onScroll = rafThrottle(updateProgress);
+    dotOffsets.current = next;
+    const label = track.querySelector("[data-timeline-label]");
+    const top = label ? parseFloat(getComputedStyle(label).top) : NaN;
+    readingLine.current = (Number.isFinite(top) ? top : STICKY_FALLBACK) + firstDotCentre;
+    place();
+  }, [place]);
+  useIsomorphicLayoutEffect(() => {
+    const onScroll = rafThrottle(place);
+    const onResize = rafThrottle(measure);
+    const resizeObserver = new ResizeObserver(() => onResize());
+    if (timelineRef.current) resizeObserver.observe(timelineRef.current);
     window.addEventListener("scroll", onScroll, { passive: true });
-    updateProgress();
+    window.addEventListener("resize", onResize, { passive: true });
+    measure();
     return () => {
       onScroll.cancel();
+      onResize.cancel();
       resizeObserver.disconnect();
       window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
     };
-  }, []);
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full font-sans md:px-10", className), children: [
-    (title || description) && /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4 py-20 md:px-8 lg:px-10", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 max-w-4xl text-lg md:text-4xl", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-sm text-sm md:text-base", children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { ref: timelineRef, className: "relative z-0 mx-auto max-w-7xl pb-20", children: [
-      items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex justify-start pt-10 md:gap-10 md:pt-40", children: [
-        /* @__PURE__ */ jsxs("div", { className: "sticky top-40 z-40 flex max-w-xs flex-col items-center self-start md:w-full md:flex-row lg:max-w-sm", children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-background absolute left-3 flex size-10 items-center justify-center rounded-full md:left-3", children: /* @__PURE__ */ jsx("div", { className: "size-4 rounded-full border border-neutral-300 bg-neutral-200 p-2 dark:border-neutral-700 dark:bg-neutral-800" }) }),
-          /* @__PURE__ */ jsx("h3", { className: "hidden text-xl font-bold text-neutral-500 md:block md:pl-20 md:text-5xl dark:text-neutral-500", children: item.label })
+  }, [place, measure]);
+  const itemCount = items.length;
+  const measuredCount = useRef(itemCount);
+  useIsomorphicLayoutEffect(() => {
+    if (measuredCount.current === itemCount) return;
+    measuredCount.current = itemCount;
+    measure();
+  }, [itemCount, measure]);
+  const rowState = (index) => {
+    if (index === activeIndex) return "active";
+    return index < activeIndex ? "past" : "upcoming";
+  };
+  const rootStyle = {
+    "--timeline-accent": accent,
+    "--tl-progress": `${head.current}px`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("tl-root w-full font-sans md:px-10", className),
+      style: rootStyle,
+      "data-motion": reduced ? "reduced" : "full",
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4 py-12 md:px-8 md:py-16 lg:px-10", children: [
+          title && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-3 max-w-4xl text-lg font-medium tracking-tight text-balance md:text-4xl", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-sm text-sm md:text-base", children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-full pr-4 pl-20 md:pl-4", children: content ? content(item) : null })
-      ] }, `${item.id}-${index}`)),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: { height: `${timelineHeight}px` },
-          className: "absolute top-0 left-8 w-[2px] overflow-hidden bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-0% via-neutral-200 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] md:left-8 dark:via-neutral-700",
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: progressRef,
-              style: { height: "0px", opacity: 0 },
-              className: "absolute inset-x-0 top-0 w-[2px] rounded-full bg-gradient-to-t from-purple-500 from-0% via-blue-500 via-10% to-transparent"
-            }
-          )
-        }
-      )
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: timelineRef,
+            className: "relative z-0 mx-auto max-w-7xl pb-20",
+            "data-timeline-track": "",
+            children: [
+              items.map((item, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: (el) => {
+                    rowEls.current[index] = el;
+                  },
+                  className: "tl-row flex justify-start pt-10 md:gap-10 md:pt-32",
+                  "data-timeline-row": "",
+                  "data-state": rowState(index),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "tl-label sticky top-40 z-40 flex max-w-xs flex-col items-center self-start md:w-full md:flex-row lg:max-w-sm",
+                        "data-timeline-label": "",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "absolute left-3 flex size-10 items-center justify-center md:left-3",
+                              "data-timeline-dot-box": "",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsxs("span", { className: "tl-dot", "data-timeline-dot": "", "data-lit": index <= activeIndex, children: [
+                                /* @__PURE__ */ jsx("span", { className: "tl-dot-flare" }),
+                                /* @__PURE__ */ jsx("span", { className: "tl-dot-core" })
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "tl-label-text relative hidden md:block md:pl-20", children: [
+                            /* @__PURE__ */ jsx("span", { className: "tl-index", "aria-hidden": "true", children: pad(index + 1) }),
+                            /* @__PURE__ */ jsx("h3", { className: "tl-heading text-xl font-semibold tracking-tight md:text-4xl", children: item.label })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "tl-content w-full pr-4 pl-20 md:pl-4", children: /* @__PURE__ */ jsx(TimelineContent, { content, item }) })
+                  ]
+                },
+                `${item.id}-${index}`
+              )),
+              /* @__PURE__ */ jsxs("div", { className: "tl-rail", style: { height: `${timelineHeight}px` }, "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("div", { className: "tl-rail-line" }),
+                /* @__PURE__ */ jsx("div", { className: "tl-trail" })
+              ] }),
+              !reduced && items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "tl-head", "data-timeline-head": "", "data-ready": ready, "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("span", { className: "tl-head-streak" }),
+                /* @__PURE__ */ jsx("span", { className: "tl-head-halo" }),
+                /* @__PURE__ */ jsx("span", { className: "tl-head-core" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   Timeline

package/dist/index.js

@@ -105,7 +105,7 @@ import { Focus } from "./components/focus/Focus.js";
 import { FormField } from "./components/form-field/FormField.js";
 import { FrostedGlass } from "./components/frosted-glass/FrostedGlass.js";
 import { GlareCard } from "./components/glare-card/GlareCard.js";
-import { GlowBorder } from "./components/glow-border/GlowBorder.js";
+import { GLOW_BORDER_PRESETS, GlowBorder } from "./components/glow-border/GlowBorder.js";
 import { GlowingEffect } from "./components/glowing-effect/GlowingEffect.js";
 import { GradientButton } from "./components/gradient-button/GradientButton.js";
 import { HoverCard } from "./components/hover-card/HoverCard.js";
@@ -340,6 +340,7 @@ export {
   Focus,
   FormField,
   FrostedGlass,
+  GLOW_BORDER_PRESETS,
   GlareCard,
   GlowBorder,
   GlowingEffect,

package/dist/internals/markdown.d.ts

@@ -12,6 +12,11 @@
  *
  * Every entry point is total: it returns a value for any input, including
  * half-written markdown from a stream.
+ *
+ * The non-null assertions below are all of one kind: an index read inside a
+ * loop already bounded by `i < lines.length` / `i < src.length`, or a capture
+ * group of a regex whose match was checked truthy on the line above. Every
+ * invariant is visible next to the assertion that relies on it.
  */
 export type InlineToken = {
     type: "text";

package/dist/internals/motion/haptics.d.ts

@@ -6,10 +6,6 @@
  * exists (Safari on iOS has never implemented it, for instance), and a
  * missing rumble is a non-event a user never notices — a thrown error
  * breaking the surrounding click handler very much would be.
- *
- * No hook: both functions are called from a click handler, never from a
- * render path. `canVibrate()` reads `navigator` and is therefore
- * server-safe only because it guards on `typeof navigator`.
  */
 export declare const HAPTIC_PATTERNS: {
     readonly light: 10;

package/dist/internals/motion/presence-core.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared core: the framework-free state machine behind `usePresence`
+ * (`./presence.ts`), split into its own module so a Vue package can drive
+ * the identical mount/unmount clock. Tracked in `shared-cores.json` at the
+ * repo root as a byte-identical file across every framework package this
+ * library ships — see that manifest and `scripts/check-shared-cores.mjs`
+ * for the identity/purity gate this file must keep passing.
+ *
+ * Framework-free means exactly that: no `import ... from "react"` (or
+ * "svelte"/"vue"), no `import.meta.env`, no `window`/`document`/`navigator`
+ * read at module scope. DOM types (`HTMLElement`, `Element`) are fine — they
+ * come from `lib.dom.d.ts`, not from a framework — and so is calling into a
+ * DOM API from inside a function, which only ever happens once a real node
+ * is handed in through `register`.
+ *
+ * `presence.ts` carries the design rationale for the clock itself (why one
+ * hook owns both directions, why grouping matters, the SSR story); this file
+ * is the mechanism, with the framework-specific ref type swapped for
+ * `PresenceRefCallback` so the same bytes work in every package.
+ */
+import type { TransitionFn } from "./transitions.js";
+/** The three values `Presence` renders into `data-state`, because its source
+ *  renders three. An anchored surface renders `surfaceState`'s two instead —
+ *  the two vocabularies are not interchangeable (convention C-5). */
+export type PresenceState = "opening" | "open" | "closing";
+/**
+ * A framework-free callback ref: called with the live node on attach, `null`
+ * on detach, returning nothing. This is the shape every framework's own ref
+ * callback type is compatible with — React's `RefCallback<HTMLElement>`
+ * resolves to `(instance: HTMLElement | null) => void | (() => void)`, and a
+ * function that always returns `void` satisfies that trivially — so each
+ * package's wrapper can hand a slot's `ref` straight through with no cast.
+ */
+export type PresenceRefCallback = (node: HTMLElement | null) => void;
+/** Internal spelling of `register`'s second/third argument: a params value, or a
+ *  factory called with the direction at the instant the leg starts. */
+export type ParamsOrFactory<P> = P | ((entering: boolean) => P);
+export interface PresenceCoreDeps {
+    setMounted: (mounted: boolean) => void;
+    setState: (state: PresenceState) => void;
+    onEnterStart: () => void;
+    onEnterEnd: () => void;
+    onExitStart: () => void;
+    onExitEnd: () => void;
+    /** Read live at the moment an exit starts, never captured per render. */
+    inertRef: {
+        readonly current: boolean;
+    };
+}
+/**
+ * The framework-free state machine behind `usePresence`. Allocation-only, so
+ * it is safe to build eagerly on first use: it installs no listener and
+ * starts no timer until `sync()` is called from a layout effect.
+ */
+export declare function createPresenceCore(deps: PresenceCoreDeps): {
+    register: <P>(a: string | TransitionFn<P>, b?: TransitionFn<P> | ParamsOrFactory<P>, c?: ParamsOrFactory<P>) => PresenceRefCallback;
+    sync: (open: boolean, mounted: boolean, appear: boolean) => void;
+    teardown: () => void;
+};

package/dist/internals/motion/presence-core.js

@@ -0,0 +1,162 @@
+"use client";
+import { runTransition } from "./animate.js";
+const DEFAULT_KEY = "default";
+function createPresenceCore(deps) {
+  const slots = /* @__PURE__ */ new Map();
+  let leg = null;
+  let starting = false;
+  let inertApplied = false;
+  let firstRun = true;
+  function ensureSlot(key) {
+    const existing = slots.get(key);
+    if (existing) return existing;
+    const slot = {
+      node: null,
+      buildSpec: null,
+      run: void 0,
+      legTo: null,
+      finished: false,
+      pendingLeg: null,
+      // Block body, never a concise arrow: a returned value would be read
+      // as a cleanup function by a framework's ref-callback contract
+      // (React 19's included — convention C-3), and this ref never means to
+      // return one.
+      ref: (node) => {
+        if (node) {
+          slot.node = node;
+          const pending = slot.pendingLeg;
+          slot.pendingLeg = null;
+          if (pending !== null && leg === pending) startSlot(slot, pending);
+          return;
+        }
+        slot.pendingLeg = leg !== null && !slot.finished ? leg : null;
+        slot.run?.abort();
+        slot.run = void 0;
+        slot.node = null;
+        slot.legTo = null;
+        slot.finished = false;
+      }
+    };
+    slots.set(key, slot);
+    return slot;
+  }
+  function register(a, b, c) {
+    const keyed = typeof a === "string";
+    const slot = ensureSlot(keyed ? a : DEFAULT_KEY);
+    const transition = keyed ? b : a;
+    const params = keyed ? c : b;
+    slot.buildSpec = (node, entering) => {
+      const resolved = typeof params === "function" ? params(entering) : params;
+      return transition(node, resolved, { direction: entering ? "in" : "out" });
+    };
+    return slot.ref;
+  }
+  function startSlot(slot, to) {
+    const node = slot.node;
+    const buildSpec = slot.buildSpec;
+    if (!node || !buildSpec) return;
+    const counterpart = slot.run;
+    slot.legTo = to;
+    slot.finished = false;
+    slot.run = void 0;
+    const handle = { current: void 0 };
+    const run = runTransition(node, buildSpec(node, to === 1), to, counterpart, () => {
+      slot.finished = true;
+      if (to === 1) {
+        handle.current?.abort();
+        slot.run = void 0;
+      }
+      settle(to);
+    });
+    handle.current = run;
+    if (!slot.finished) slot.run = run;
+  }
+  function startLegs(to) {
+    starting = true;
+    try {
+      for (const slot of slots.values()) {
+        if (!slot.node) continue;
+        if (slot.legTo === to) continue;
+        startSlot(slot, to);
+      }
+    } finally {
+      starting = false;
+    }
+    settle(to);
+  }
+  function settle(to) {
+    if (starting) return;
+    if (leg !== to) return;
+    for (const slot of slots.values()) {
+      if (!slot.node) continue;
+      if (slot.legTo !== to || !slot.finished) return;
+    }
+    leg = null;
+    if (to === 1) {
+      deps.setState("open");
+      deps.onEnterEnd();
+      return;
+    }
+    deps.setMounted(false);
+    deps.setState("open");
+    deps.onExitEnd();
+  }
+  function beginEnter() {
+    leg = 1;
+    if (inertApplied) {
+      inertApplied = false;
+      for (const slot of slots.values()) {
+        slot.node?.toggleAttribute("inert", false);
+      }
+    }
+    deps.setState("opening");
+    deps.onEnterStart();
+  }
+  function beginExit() {
+    leg = 0;
+    deps.onExitStart();
+    deps.setState("closing");
+    if (deps.inertRef.current) {
+      inertApplied = true;
+      for (const slot of slots.values()) {
+        slot.node?.toggleAttribute("inert", true);
+      }
+    }
+  }
+  function sync(open, mounted, appear) {
+    const first = firstRun;
+    firstRun = false;
+    if (open) {
+      if (!mounted) {
+        beginEnter();
+        deps.setMounted(true);
+        return;
+      }
+      if (first && !appear) {
+        return;
+      }
+      if (leg !== 1) beginEnter();
+      startLegs(1);
+      return;
+    }
+    if (!mounted) return;
+    if (leg !== 0) beginExit();
+    startLegs(0);
+  }
+  function teardown() {
+    for (const slot of slots.values()) {
+      slot.run?.abort();
+      slot.run = void 0;
+      slot.legTo = null;
+      slot.finished = false;
+      slot.pendingLeg = null;
+    }
+    leg = null;
+    inertApplied = false;
+    firstRun = true;
+  }
+  return { register, sync, teardown };
+}
+export {
+  createPresenceCore
+};

package/dist/internals/motion/presence.d.ts

@@ -48,12 +48,10 @@
  * `appear` defaults to false.
  */
 import type { RefCallback } from "react";
+import { type PresenceState } from "./presence-core.js";
 import type { SurfaceState } from "./anchored.js";
 import type { TransitionFn } from "./transitions.js";
-/** The three values `Presence` renders into `data-state`, because its source
- *  renders three. An anchored surface renders `surfaceState`'s two instead —
- *  the two vocabularies are not interchangeable (convention C-5). */
-export type PresenceState = "opening" | "open" | "closing";
+export type { PresenceState };
 export interface UsePresenceOptions {
     /**
      * Animate an entrance when `open` is ALREADY true on the very first render.