fancy-ui-react 0.2.0

package/dist/components/sources/Sources.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import type { SourceData } from "../../internals/ai-types.js";
+/**
+ * Props for Sources
+ */
+export interface SourcesProps {
+    /** The documents backing the answer, in the order they should be read. */
+    sources: SourceData[];
+    /** Whether the list is expanded. Starts closed. */
+    open?: boolean;
+    /** Called whenever the list opens or closes. */
+    onToggle?: (open: boolean) => void;
+    /** Replaces the default trigger-and-list composition entirely. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays open/close through the sound controller when the source list
+     * expands or collapses. Off by default; only audible once the user
+     * has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The citations under an answer: a pill you can ignore and a set of cards you
+ * can scan.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const Sources: import("react").ForwardRefExoticComponent<SourcesProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/sources/Sources.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { SourcesTrigger } from "./SourcesTrigger.js";
+import { SourcesList } from "./SourcesList.js";
+import { SOURCES_CONTEXT_KEY } from "./types.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+const Sources = forwardRef(function Sources2({ sources, open: openProp, onToggle, children, className, sound = false }, ref) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const uid = useFancyId();
+  const listId = `${uid}-list`;
+  const playCue = useSoundCue(sound);
+  const context = useMemo(
+    () => ({
+      open: { current: open },
+      count: sources.length,
+      sources,
+      listId,
+      toggle() {
+        const next = !open;
+        if (!isControlled) setUncontrolledOpen(next);
+        playCue(next ? "open" : "close");
+        onToggle?.(next);
+      }
+    }),
+    [open, sources, listId, isControlled, onToggle, playCue]
+  );
+  return /* @__PURE__ */ jsx(SOURCES_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ref, className: cn("ft-sources w-full", className), "data-open": open, children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SourcesTrigger, {}),
+    /* @__PURE__ */ jsx(SourcesList, {})
+  ] }) }) });
+});
+export {
+  Sources
+};

package/dist/components/sources/SourcesList.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { SourceData } from "../../internals/ai-types.js";
+/**
+ * Props for SourcesList
+ */
+export interface SourcesListProps {
+    /** Replaces the default card. Receives the source and its index. */
+    item?: (source: SourceData, index: number) => ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The expanding region of cards. */
+export declare function SourcesList({ item, className }: SourcesListProps): import("react").JSX.Element;

package/dist/components/sources/SourcesList.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { useInertAttribute } from "../../internals/dom/use-inert-attribute.js";
+import { SourceCard } from "./SourceCard.js";
+import { SOURCES_CONTEXT_KEY } from "./types.js";
+/* empty css                 */
+function SourcesList({ item, className }) {
+  const sources = useContext(SOURCES_CONTEXT_KEY);
+  const items = sources?.sources ?? [];
+  const isOpen = sources?.open.current ?? true;
+  const inertRef = useInertAttribute(!isOpen);
+  return /* @__PURE__ */ jsx("div", { className: cn("ft-sources-list", isOpen && "ft-open"), children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: inertRef,
+      id: sources?.listId,
+      "aria-label": "Sources",
+      className: cn("ft-sources-grid", className),
+      children: items.map((source, index) => (
+        /*
+        	The entrance animation hangs off `.ft-in` rather than mount, because
+        	the cards never unmount: collapsing is a height transition over live
+        	DOM, so re-adding the class is the only thing that can replay it.
+        */
+        /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cn("ft-sources-item", isOpen && "ft-in"),
+            style: { "--ft-sources-index": index },
+            children: item ? item(source, index) : /* @__PURE__ */ jsx(SourceCard, { source })
+          },
+          source.id
+        )
+      ))
+    }
+  ) }) });
+}
+export {
+  SourcesList
+};

package/dist/components/sources/SourcesTrigger.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Props for SourcesTrigger
+ */
+export interface SourcesTriggerProps {
+    /** Overrides the count line. Defaults to "4 sources", singular at one. */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The collapsed pill: monogram stack, count, chevron. */
+export declare function SourcesTrigger({ label, className }: SourcesTriggerProps): import("react").JSX.Element;

package/dist/components/sources/SourcesTrigger.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { monogram, hostOf } from "../../internals/host.js";
+import { SOURCES_CONTEXT_KEY } from "./types.js";
+/* empty css                    */
+const STACK_LIMIT = 3;
+function SourcesTrigger({ label, className }) {
+  const sources = useContext(SOURCES_CONTEXT_KEY);
+  const count = sources?.count ?? 0;
+  const isOpen = sources?.open.current ?? false;
+  const stack = (sources?.sources ?? []).slice(0, STACK_LIMIT);
+  const text = label ?? `${count} ${count === 1 ? "source" : "sources"}`;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "ft-sources-trigger text-muted-foreground hover:text-foreground inline-flex items-center gap-2 rounded-full px-2 py-1 text-xs",
+        className
+      ),
+      "aria-expanded": isOpen,
+      "aria-controls": sources?.listId,
+      onClick: () => sources?.toggle(),
+      children: [
+        stack.length > 0 && // Decorative: every name in it is spelled out in the list below.
+        /* @__PURE__ */ jsx("span", { className: "ft-sources-stack flex flex-none items-center", "aria-hidden": "true", children: stack.map((source) => /* @__PURE__ */ jsx("span", { className: "ft-sources-chip", children: monogram(source.domain || hostOf(source.url) || source.title) }, source.id)) }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: text }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn("ft-sources-chevron size-3 flex-none", isOpen && "ft-open"),
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SourcesTrigger
+};

package/dist/components/sources/index.d.ts

@@ -0,0 +1,10 @@
+export { Sources } from "./Sources.js";
+export type { SourcesProps } from "./Sources.js";
+export { SourcesTrigger } from "./SourcesTrigger.js";
+export type { SourcesTriggerProps } from "./SourcesTrigger.js";
+export { SourcesList } from "./SourcesList.js";
+export type { SourcesListProps } from "./SourcesList.js";
+export { SourceCard } from "./SourceCard.js";
+export type { SourceCardProps } from "./SourceCard.js";
+export { SOURCES_CONTEXT_KEY } from "./types.js";
+export type { SourcesContext } from "./types.js";

package/dist/components/sources/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The contract between the sources root and its parts.
+ *
+ * `Sources` publishes a live, read-only view of the citation set it holds, plus
+ * the one function that changes anything about it. Every part reads it through
+ * context rather than having the same values threaded back down as props, so a
+ * trigger and a list can sit at different depths of a consumer's own markup and
+ * still agree on what is open and what is being cited.
+ */
+import type { SourceData } from "../../internals/ai-types.js";
+/** What the root publishes. Parts read it; only the root writes it. */
+export interface SourcesContext {
+    /**
+     * Whether the list is expanded. The Svelte side wraps it in a box so a
+     * reactive read tracks the root's prop; the box is kept here because it is
+     * part of the published contract a consumer writes its own parts against —
+     * what makes a part re-render is the root rebuilding this object when the
+     * state changes.
+     */
+    readonly open: {
+        readonly current: boolean;
+    };
+    /** How many sources back the answer. */
+    readonly count: number;
+    /** The sources themselves, so a list never needs them threaded down as a prop. */
+    readonly sources: readonly SourceData[];
+    /** The id the list puts on its region, so a trigger can point `aria-controls` at it. */
+    readonly listId: string;
+    /** Flip the list open or closed. */
+    toggle(): void;
+}
+/**
+ * The context a part reads to find the root above it. The Svelte source
+ * publishes it under a `Symbol` context key; React's own context object plays
+ * that role here, so the exported name is kept and the value is a
+ * `React.Context` rather than a symbol:
+ *
+ * ```tsx
+ * const sources = useContext(SOURCES_CONTEXT_KEY);
+ * ```
+ *
+ * Read it as optional. Every shipped part does, so a part rendered outside a
+ * root degrades instead of throwing.
+ */
+export declare const SOURCES_CONTEXT_KEY: import("react").Context<SourcesContext | undefined>;

package/dist/components/sources/types.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+const SOURCES_CONTEXT_KEY = createContext(void 0);
+SOURCES_CONTEXT_KEY.displayName = "SourcesContext";
+export {
+  SOURCES_CONTEXT_KEY
+};

package/dist/components/sparkles/Sparkles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Sparkles - canvas-based floating particle sparkle effect
+ *
+ * Particles drift across a percentage-space field (0-100 on both axes, wrapping
+ * at -2/102) and pulse their alpha off a per-particle sine phase. Everything is
+ * drawn on a 2D canvas from a `requestAnimationFrame` loop; the canvas is sized
+ * from the container's `getBoundingClientRect()` scaled by `devicePixelRatio`
+ * and kept in sync by a `ResizeObserver` on the container.
+ *
+ * The component fills its parent (`size-full`), so give the parent a height.
+ */
+export interface SparklesProps {
+    /** Background color */
+    background?: string;
+    /** Particle color */
+    particleColor?: string;
+    /** Minimum particle size */
+    minSize?: number;
+    /** Maximum particle size */
+    maxSize?: number;
+    /** Particle movement speed */
+    speed?: number;
+    /** Number of particles */
+    particleDensity?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the particle field. The same seed always lays out and drifts the
+     * same sparkles, which is what keeps the component free of `Math.random()`.
+     * Change it to give two fields on one page different sparkles - the default
+     * is shared, so two `<Sparkles />` with no seed show the same field.
+     */
+    seed?: number;
+}
+export declare function Sparkles({ background, particleColor, minSize, maxSize, speed, particleDensity, className, seed, }: SparklesProps): import("react").JSX.Element;

package/dist/components/sparkles/Sparkles.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function Sparkles({
+  background = "#0d47a1",
+  particleColor = "#ffffff",
+  minSize = 1,
+  maxSize = 3,
+  speed = 4,
+  particleDensity = 120,
+  className = "",
+  seed = 1
+}) {
+  const [container, containerRef] = useElementRef();
+  const [canvas, canvasRef] = useElementRef();
+  const particleColorRef = useLiveRef(particleColor);
+  useEffect(() => {
+    if (!container || !canvas) return;
+    const random = mulberry32(seed);
+    let ctx = null;
+    let particles = [];
+    let rafId = 0;
+    let dpr = 1;
+    function resizeCanvas() {
+      if (!canvas || !container) return;
+      dpr = window.devicePixelRatio || 1;
+      const rect = container.getBoundingClientRect();
+      canvas.width = rect.width * dpr;
+      canvas.height = rect.height * dpr;
+      ctx = canvas.getContext("2d");
+      if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    function generateParticles() {
+      particles = [];
+      for (let i = 0; i < particleDensity; i++) {
+        const baseSpeed = 0.05;
+        const speedVariance = random() * 0.3 + 0.7;
+        particles.push({
+          x: random() * 100,
+          y: random() * 100,
+          size: random() * (maxSize - minSize) + minSize,
+          opacity: random() * 0.5 + 0.3,
+          vx: (random() - 0.5) * baseSpeed * speedVariance * speed,
+          vy: ((random() - 0.5) * baseSpeed - baseSpeed * 0.3) * speedVariance * speed,
+          phase: random() * Math.PI * 2,
+          phaseSpeed: 0.015
+        });
+      }
+    }
+    function updateAndDraw() {
+      const context = ctx;
+      if (!context || !canvas) return;
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        if (p.x < -2) p.x = 102;
+        if (p.x > 102) p.x = -2;
+        if (p.y < -2) p.y = 102;
+        if (p.y > 102) p.y = -2;
+        p.phase = (p.phase + p.phaseSpeed) % (Math.PI * 2);
+        const opacity = 0.3 + (Math.sin(p.phase) * 0.3 + 0.3);
+        context.beginPath();
+        context.arc(
+          p.x / 100 * (canvas.width / dpr),
+          p.y / 100 * (canvas.height / dpr),
+          p.size,
+          0,
+          Math.PI * 2
+        );
+        context.fillStyle = `${particleColorRef.current}${Math.floor(opacity * 255).toString(16).padStart(2, "0")}`;
+        context.fill();
+      }
+      rafId = requestAnimationFrame(updateAndDraw);
+    }
+    ctx = canvas.getContext("2d");
+    resizeCanvas();
+    generateParticles();
+    rafId = requestAnimationFrame(updateAndDraw);
+    const resizeObserver = new ResizeObserver(resizeCanvas);
+    resizeObserver.observe(container);
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
+  }, [container, canvas, minSize, maxSize, speed, particleDensity, seed, particleColorRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative size-full overflow-hidden will-change-transform", className),
+      style: { background },
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "absolute inset-0 size-full", "aria-hidden": "true" })
+    }
+  );
+}
+export {
+  Sparkles
+};

package/dist/components/sparkles/index.d.ts

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

package/dist/components/sparkles-text/SparklesText.d.ts

@@ -0,0 +1,28 @@
+/**
+ * SparklesText - Text with animated sparkle stars
+ *
+ * Renders text with SVG sparkle stars overlaid that animate with
+ * fade/scale/rotation effects. Sparkles regenerate periodically.
+ */
+export interface SparklesTextProps {
+    /** Text to display */
+    text: string;
+    /** Number of sparkle stars */
+    sparklesCount?: number;
+    /** Two colors for sparkle stars */
+    colors?: {
+        first: string;
+        second: string;
+    };
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the sparkle field. The same seed always produces the same
+     * initial field, which is what keeps a server render and its hydration
+     * identical. Change it to give two fields on one page different layouts —
+     * the default is shared, so two `<SparklesText />` with no seed start
+     * with the same field.
+     */
+    seed?: number;
+}
+export declare function SparklesText({ text, sparklesCount, colors, className, seed, }: SparklesTextProps): import("react").JSX.Element;

package/dist/components/sparkles-text/SparklesText.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+/* empty css                  */
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateStar(random, colors) {
+  const x = `${random() * 100}%`;
+  const y = `${random() * 100}%`;
+  const color = random() > 0.5 ? colors.first : colors.second;
+  const delay = random() * 2;
+  const scale = random() * 1 + 0.3;
+  const lifespan = random() * 10 + 5;
+  const id = `${x}-${y}-${random()}`;
+  return { id, x, y, color, delay, scale, lifespan };
+}
+function SparklesText({
+  text,
+  sparklesCount = 10,
+  colors = { first: "#9E7AFF", second: "#FE8BBB" },
+  className,
+  seed = 1
+}) {
+  const [sparkles, setSparkles] = useState(() => {
+    const random = mulberry32(seed);
+    return Array.from({ length: sparklesCount }, () => generateStar(random, colors));
+  });
+  const colorsRef = useLiveRef(colors);
+  useEffect(() => {
+    const random = mulberry32(seed + 1);
+    const intervalId = setInterval(() => {
+      setSparkles(
+        (prev) => prev.map((star) => {
+          if (star.lifespan <= 0) {
+            return generateStar(random, colorsRef.current);
+          }
+          return { ...star, lifespan: star.lifespan - 0.1 };
+        })
+      );
+    }, 100);
+    return () => clearInterval(intervalId);
+  }, [seed]);
+  return /* @__PURE__ */ jsx("div", { className: cn("sparkles-text text-6xl font-bold", className), children: /* @__PURE__ */ jsxs("span", { className: "relative inline-block", children: [
+    sparkles.map((sparkle) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "sparkles-star pointer-events-none absolute z-20",
+        style: {
+          left: sparkle.x,
+          top: sparkle.y,
+          "--sparkle-scale": `${sparkle.scale}`,
+          animation: `sparkleAnim 0.8s ease-in-out ${sparkle.delay}s infinite`,
+          transform: "scale(0) rotate(75deg)",
+          opacity: 0
+        },
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",
+            fill: sparkle.color
+          }
+        )
+      },
+      sparkle.id
+    )),
+    text
+  ] }) });
+}
+export {
+  SparklesText
+};

package/dist/components/sparkles-text/index.d.ts

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

package/dist/components/status-morph/StatusMorph.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** The four states StatusMorph can be in. */
+export type StatusMorphState = "idle" | "loading" | "success" | "error";
+interface BaseProps {
+    /** Current state. The component only ever writes it back to `"idle"`
+     * itself, when `resetAfter` fires — every other write is the caller's,
+     * and is always honoured: StatusMorph never fights its owner. */
+    state?: StatusMorphState;
+    /** Called whenever StatusMorph itself writes `state` back to `"idle"`
+     * (the `resetAfter` timer). React has no two-way binding, so a caller
+     * that wants to observe/control the reset wires this into its own
+     * `state`. */
+    onStateChange?: (state: StatusMorphState) => void;
+    /** Milliseconds until an automatic reset to `"idle"` after `"success"` or
+     * `"error"`. `0` disables the timer entirely (manual reset only). Cleared
+     * whenever `state` changes again — internally or externally — or on
+     * unmount. */
+    resetAfter?: number;
+    /** Live-region text per state. Unset keys fall back to the defaults. */
+    labels?: {
+        loading?: string;
+        success?: string;
+        error?: string;
+    };
+    /** `"current"` paints every glyph in `currentColor` (matches the
+     * surrounding text/button colour). `"semantic"` reads the AI-family
+     * `--ft-status-running/-done/-error` vocabulary instead — the ring track
+     * stays neutral in both. */
+    tone?: "current" | "semantic";
+    /** Best-effort tactile feedback (the `success`/`error` haptic patterns)
+     * on entering those states. Opt-in; silently a no-op wherever the
+     * Vibration API is unsupported or refused. */
+    haptic?: boolean;
+    /** Custom idle content, rendered in the same `calc(1em + 1px)` footprint
+     * instead of the default transparent scaffold — so swapping to it never
+     * shifts layout. */
+    idle?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Props for StatusMorph.
+ */
+export interface StatusMorphProps extends BaseProps, Omit<HTMLAttributes<HTMLSpanElement>, keyof BaseProps | "className"> {
+}
+export declare const StatusMorph: import("react").ForwardRefExoticComponent<StatusMorphProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};