fancy-ui-react 0.2.0

package/dist/components/prompt-suggestions/PromptSuggestions.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useLayoutEffect } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                       */
+const DEFAULT_STAGGER_MS = 60;
+const MAX_STAGGER_MS = 400;
+const PromptSuggestions = forwardRef(
+  function PromptSuggestions2({
+    suggestions,
+    onSelect,
+    visible = true,
+    staggerMs,
+    label = "Suggestions",
+    item,
+    className,
+    sound = false
+  }, ref) {
+    const playCue = useSoundCue(sound);
+    const stagger = staggerMs === void 0 ? void 0 : Math.min(Math.max(staggerMs, 0), MAX_STAGGER_MS);
+    const [generation, setGeneration] = useState(0);
+    const generationSource = useRef(0);
+    const wasVisible = useRef(null);
+    useLayoutEffect(() => {
+      const isVisible = visible;
+      if (wasVisible.current !== null && isVisible && !wasVisible.current) {
+        generationSource.current += 1;
+        setGeneration(generationSource.current);
+      }
+      wasVisible.current = isVisible;
+    }, [visible]);
+    const rootStyle = {
+      ...stagger === void 0 ? {} : { "--ft-suggestions-stagger": `${stagger}ms` },
+      ...visible ? {} : { display: "none" }
+    };
+    function pick(suggestion, index) {
+      playCue("select");
+      onSelect?.(suggestion, index);
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-wrap items-center gap-2", className),
+        style: rootStyle,
+        role: "group",
+        "aria-label": label,
+        children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ft-suggestion border-border text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:bg-muted focus-visible:text-foreground focus-visible:ring-ring cursor-pointer rounded-full border px-3 py-1.5 text-sm transition-colors focus-visible:ring-1 focus-visible:outline-none",
+            style: {
+              "--ft-suggestions-delay": `calc(var(--ft-suggestions-stagger, ${DEFAULT_STAGGER_MS}ms) * ${i})`
+            },
+            onClick: () => pick(suggestion, i),
+            children: item ? item(suggestion, i) : suggestion
+          },
+          `${generation}:${i}`
+        ))
+      }
+    );
+  }
+);
+export {
+  PromptSuggestions
+};

package/dist/components/prompt-suggestions/index.d.ts

@@ -0,0 +1,2 @@
+export { PromptSuggestions } from "./PromptSuggestions.js";
+export type { PromptSuggestionsProps } from "./PromptSuggestions.js";

package/dist/components/pulse-beam/PulseBeam.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type PulseBeamPalette, type PulseBeamTone, type PulseBeamVariant } from "./pulse-beam-data.js";
+export type { PulseBeamPalette, PulseBeamTone, PulseBeamVariant };
+/**
+ * PulseBeam — a breathing, colour-shifting border glow.
+ *
+ * Wrap any card or control. Three masked gradient layers (a 1px ring, a
+ * feathered inner glow and a blurred bloom) are driven by a shared
+ * animation loop through CSS custom properties, so the effect stays on the
+ * compositor and costs one style recalc per frame per instance.
+ */
+export interface PulseBeamProps extends HTMLAttributes<HTMLDivElement> {
+    /** Additional classes on the wrapper */
+    className?: string;
+    /** Content the glow wraps — give it an opaque background and the same radius */
+    children?: ReactNode;
+    /** Show the glow. Off fades out (500ms) and stops the loop; on fades in (600ms). */
+    active?: boolean;
+    /** `inner` paints inside the box; `outside` adds a blurred halo behind the content */
+    variant?: PulseBeamVariant;
+    /** Built-in nine-slot colour set. `mono` halves opacity and disables hue drift. */
+    palette?: PulseBeamPalette;
+    /** Up to nine CSS colours overriding the palette slots in order */
+    colors?: string[];
+    /** Overall intensity, 0–1 */
+    strength?: number;
+    /** Corner radius in px, applied to the wrapper and every layer */
+    radius?: number;
+    /** Multiplier for the breathing and drift periods */
+    speed?: number;
+    /** Opacity / brightness / saturation preset for the surface the card sits on */
+    tone?: PulseBeamTone;
+    /** Slowly rotate every hue over a 14–16s cycle */
+    hueShift?: boolean;
+    /** Override the preset brightness filter */
+    brightness?: number;
+    /** Override the preset saturation filter */
+    saturation?: number;
+    /** Called once the fade-in has completed */
+    onfadein?: () => void;
+    /** Called once the fade-out has completed and the loop has stopped */
+    onfadeout?: () => void;
+}
+export declare const PulseBeam: import("react").ForwardRefExoticComponent<PulseBeamProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/pulse-beam/PulseBeam.js

@@ -0,0 +1,197 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { cn } from "../../utils.js";
+import { LAYER_PRESETS, motionPreset, buildOscillators, buildLayerBackgrounds } from "./pulse-beam-data.js";
+import { registerPulse } from "./pulse-beam-loop.js";
+/* empty css               */
+const FADE_IN_MS = 600;
+const FADE_OUT_MS = 500;
+const FADE_SLACK_MS = 80;
+const PulseBeam = forwardRef(function PulseBeam2({
+  className,
+  children,
+  active = true,
+  variant = "inner",
+  palette = "colorful",
+  colors,
+  strength = 1,
+  radius = 16,
+  speed = 1,
+  tone = "dark",
+  hueShift = true,
+  brightness,
+  saturation,
+  onfadein,
+  onfadeout,
+  style,
+  ...restProps
+}, forwardedRef) {
+  const [phase, setPhaseState] = useState("idle");
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const phaseRef = useRef("idle");
+  const reducedMotionRef = useRef(false);
+  const pendingRef = useRef(null);
+  const fadeTimerRef = useRef(void 0);
+  const onfadeinRef = useRef(onfadein);
+  onfadeinRef.current = onfadein;
+  const onfadeoutRef = useRef(onfadeout);
+  onfadeoutRef.current = onfadeout;
+  const hostRef = useRef(null);
+  const setHostRef = useComposedRefs(forwardedRef, hostRef);
+  const setPhase = (next) => {
+    phaseRef.current = next;
+    setPhaseState(next);
+  };
+  const preset = LAYER_PRESETS[variant][tone];
+  const isMono = palette === "mono" && !colors?.length;
+  const monoFactor = isMono ? 0.5 : 1;
+  const motion = useMemo(() => motionPreset(variant, tone, speed), [variant, tone, speed]);
+  const oscillators = useMemo(() => buildOscillators(motion), [motion]);
+  const hueEnabled = hueShift && !isMono;
+  const colorsKey = colors?.join("|");
+  const backgrounds = useMemo(
+    () => buildLayerBackgrounds({ variant, palette, colors, tone, op: motion.op }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [variant, palette, colorsKey, tone, motion.op]
+  );
+  const clampedStrength = Math.min(1, Math.max(0, Number.isFinite(strength) ? strength : 1));
+  const running = phase !== "idle";
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    reducedMotionRef.current = mq.matches;
+    setReducedMotion(mq.matches);
+    const handler = (e) => {
+      reducedMotionRef.current = e.matches;
+      setReducedMotion(e.matches);
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const settle = (kind) => {
+    if (pendingRef.current !== kind) return;
+    pendingRef.current = null;
+    clearTimeout(fadeTimerRef.current);
+    if (kind === "out") {
+      setPhase("idle");
+      onfadeoutRef.current?.();
+    } else {
+      onfadeinRef.current?.();
+    }
+  };
+  const handleTransitionEnd = (e) => {
+    if (e.propertyName !== "opacity" || e.target !== e.currentTarget) return;
+    settle(phaseRef.current === "fading" ? "out" : "in");
+  };
+  useEffect(() => {
+    const on = active;
+    const host = hostRef.current;
+    clearTimeout(fadeTimerRef.current);
+    if (on) {
+      if (phaseRef.current !== "active") {
+        if (phaseRef.current === "idle" && host) void host.offsetWidth;
+        setPhase("active");
+        pendingRef.current = "in";
+      }
+    } else {
+      if (phaseRef.current === "idle") {
+        pendingRef.current = null;
+        return;
+      }
+      setPhase("fading");
+      pendingRef.current = "out";
+    }
+    if (pendingRef.current === null) return;
+    const ms = reducedMotionRef.current ? 0 : (on ? FADE_IN_MS : FADE_OUT_MS) + FADE_SLACK_MS;
+    fadeTimerRef.current = setTimeout(() => settle(on ? "in" : "out"), ms);
+    return () => clearTimeout(fadeTimerRef.current);
+  }, [active]);
+  useEffect(() => {
+    const host = hostRef.current;
+    const hue = hueEnabled ? { period: motion.huePeriod } : null;
+    if (!host) return;
+    if (!hue) host.style.removeProperty("--pb-hue");
+    if (!running || reducedMotion) return;
+    const handle = registerPulse(host, oscillators, hue);
+    let io;
+    if (typeof IntersectionObserver !== "undefined") {
+      io = new IntersectionObserver(
+        ([entry]) => {
+          if (entry) handle.setPaused(!entry.isIntersecting);
+        },
+        { rootMargin: "256px" }
+      );
+      io.observe(host);
+    }
+    return () => {
+      io?.disconnect();
+      handle.unregister();
+    };
+  }, [running, reducedMotion, oscillators, hueEnabled, motion]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || variant !== "outside" || typeof ResizeObserver === "undefined") return;
+    const clamp = (v) => Math.max(0.35, Math.min(4, v));
+    const apply = () => {
+      const r = host.getBoundingClientRect();
+      if (!r.width || !r.height) return;
+      host.style.setProperty("--pb-sx", clamp(r.width / 350).toFixed(3));
+      host.style.setProperty("--pb-sy", clamp(r.height / 140).toFixed(3));
+    };
+    apply();
+    const ro = new ResizeObserver(apply);
+    ro.observe(host);
+    return () => {
+      ro.disconnect();
+      host.style.removeProperty("--pb-sx");
+      host.style.removeProperty("--pb-sy");
+    };
+  }, [variant]);
+  const hostStyle = {
+    ...style,
+    "--pb-strength": clampedStrength,
+    "--pb-radius": `${radius}px`,
+    "--pb-o-stroke": preset.stroke * monoFactor,
+    "--pb-o-glow": preset.glow * monoFactor,
+    "--pb-o-bloom": preset.bloom * monoFactor,
+    "--pb-brightness": brightness ?? preset.brightness,
+    "--pb-saturation": saturation ?? preset.saturation,
+    "--pb-glow-blur": `${preset.glowBlur}px`,
+    "--pb-bloom-blur": `${preset.bloomBlur}px`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setHostRef,
+      className: cn("pulse-beam", className),
+      style: hostStyle,
+      ...restProps,
+      "data-variant": variant,
+      "data-state": phase,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("div", { className: "pulse-beam__layer pulse-beam__glow", style: { background: backgrounds.glow } }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pulse-beam__layer pulse-beam__stroke",
+            style: { background: backgrounds.stroke },
+            onTransitionEnd: handleTransitionEnd
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pulse-beam__layer pulse-beam__bloom",
+            style: { background: backgrounds.bloom }
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  PulseBeam
+};

package/dist/components/pulse-beam/index.d.ts

@@ -0,0 +1,2 @@
+export { PulseBeam } from "./PulseBeam.js";
+export type { PulseBeamProps, PulseBeamPalette, PulseBeamTone, PulseBeamVariant, } from "./PulseBeam.js";

package/dist/components/pulse-beam/pulse-beam-data.d.ts

@@ -0,0 +1,81 @@
+/**
+ * PulseBeam — pure data and string builders.
+ *
+ * Everything here is DOM-free so it can be unit-tested without jsdom and
+ * evaluated safely on the server. The component reads these tables to build
+ * the three layer backgrounds and the oscillator set that the shared loop
+ * (`pulse-beam-loop.ts`) drives through CSS custom properties.
+ *
+ * Custom property namespace: `--pb-*`. Every `var()` carries a fallback so the
+ * static (reduced-motion, or pre-first-frame) render is already correct.
+ */
+export type PulseBeamVariant = "inner" | "outside";
+export type PulseBeamPalette = "colorful" | "mono" | "ocean" | "sunset";
+export type PulseBeamTone = "dark" | "light";
+type Rgb = readonly [number, number, number];
+/** One animated custom property: a cosine breathing between `a` and `b`. */
+export interface Oscillator {
+    prop: string;
+    a: number;
+    b: number;
+    /** seconds */
+    period: number;
+    /** seconds */
+    delay: number;
+    unit: "" | "px";
+}
+export declare const PALETTES: Record<PulseBeamPalette, readonly Rgb[]>;
+export interface LayerPreset {
+    stroke: number;
+    glow: number;
+    bloom: number;
+    brightness: number;
+    saturation: number;
+    /** px — outside variant only (inner glow is masked, not blurred) */
+    glowBlur: number;
+    /** px */
+    bloomBlur: number;
+}
+export declare const LAYER_PRESETS: Record<PulseBeamVariant, Record<PulseBeamTone, LayerPreset>>;
+export interface MotionPreset {
+    /** shape scale amplitude (±) */
+    sp: number;
+    /** drift amplitude in px (±) */
+    dr: number;
+    /** corner alpha dip: alphas breathe between 1 - op and 1 */
+    op: number;
+    /** global height scale amplitude (±) */
+    gh: number;
+    /** base period for drift + alpha (s) */
+    bs: number;
+    /** base period for shape (s) */
+    ss: number;
+    /** period for global height (s) */
+    ghs: number;
+    /** full hue rotation period (s) */
+    huePeriod: number;
+}
+/** Motion preset with `speed` applied (higher = faster breathing; hue period untouched). */
+export declare function motionPreset(variant: PulseBeamVariant, tone: PulseBeamTone, speed?: number): MotionPreset;
+/** Cosine breathing: `a` at t = delay, `b` half a period later, back to `a`. */
+export declare function oscillate(o: Oscillator, t: number): number;
+/** The 17 animated properties (3 regions × 4, global height, 4 corner alphas). */
+export declare function buildOscillators(m: MotionPreset): Oscillator[];
+/** Parse `#rgb`, `#rrggbb`, `rgb()` / `rgba()` to a triplet; anything else → null. */
+export declare function parseRgb(input: string): Rgb | null;
+export interface BackgroundOptions {
+    variant: PulseBeamVariant;
+    palette: PulseBeamPalette;
+    colors?: string[];
+    tone: PulseBeamTone;
+    /** `op` from the motion preset — sets the bloom's static alpha */
+    op: number;
+}
+export interface LayerBackgrounds {
+    stroke: string;
+    glow: string;
+    bloom: string;
+}
+/** Build the three layer `background` values for the given configuration. */
+export declare function buildLayerBackgrounds(o: BackgroundOptions): LayerBackgrounds;
+export {};