fancy-ui-react 0.2.0

package/dist/components/compare/Compare.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+import { StarField } from "./StarField.js";
+const KEYBOARD_STEP = 1;
+const KEYBOARD_PAGE_STEP = 10;
+function Compare({
+  firstImage = "",
+  secondImage = "",
+  firstImageAlt = "First image",
+  secondImageAlt = "Second image",
+  className = "",
+  firstContentClass = "",
+  secondContentClass = "",
+  initialSliderPercentage = 50,
+  slideMode = "hover",
+  showHandlebar = true,
+  autoplay = false,
+  autoplayDuration = 5e3,
+  onpercentagechange,
+  ondragstart,
+  ondragend,
+  onhoverenter,
+  onhoverleave,
+  firstContent,
+  secondContent,
+  handle,
+  ariaLabel = "Image comparison slider"
+}) {
+  const sliderRef = useRef(null);
+  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
+  const [isInteracting, setIsInteracting] = useState(false);
+  const isDraggingRef = useRef(false);
+  const isMouseOverRef = useRef(false);
+  const autoplayRAF = useRef(null);
+  const moveRAF = useRef(null);
+  const onPercentageChangeRef = useLiveRef(onpercentagechange);
+  function stopAutoplay() {
+    if (autoplayRAF.current) {
+      cancelAnimationFrame(autoplayRAF.current);
+      autoplayRAF.current = null;
+    }
+  }
+  function stopMoveFrame() {
+    if (moveRAF.current) {
+      cancelAnimationFrame(moveRAF.current);
+      moveRAF.current = null;
+    }
+  }
+  function startAutoplay() {
+    if (!autoplay || isMouseOverRef.current || isDraggingRef.current) return;
+    const startTime = Date.now();
+    function animate() {
+      if (isMouseOverRef.current || isDraggingRef.current) {
+        if (autoplayRAF.current) cancelAnimationFrame(autoplayRAF.current);
+        return;
+      }
+      const elapsedTime = Date.now() - startTime;
+      const progress = elapsedTime % (autoplayDuration * 2) / autoplayDuration;
+      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
+      setSliderXPercent(percentage);
+      onPercentageChangeRef.current?.(percentage);
+      autoplayRAF.current = requestAnimationFrame(animate);
+    }
+    animate();
+  }
+  function mouseEnterHandler() {
+    isMouseOverRef.current = true;
+    onhoverenter?.();
+    if (autoplay) {
+      stopAutoplay();
+    }
+  }
+  function mouseLeaveHandler() {
+    isMouseOverRef.current = false;
+    setIsInteracting(false);
+    onhoverleave?.();
+    if (slideMode === "hover") {
+      setSliderXPercent(initialSliderPercentage);
+      onpercentagechange?.(initialSliderPercentage);
+    }
+    if (slideMode === "drag") {
+      isDraggingRef.current = false;
+    }
+    if (autoplay) {
+      startAutoplay();
+    }
+  }
+  function handleStart() {
+    if (slideMode === "drag") {
+      isDraggingRef.current = true;
+      setIsInteracting(true);
+      ondragstart?.();
+      stopAutoplay();
+    }
+  }
+  function handleEnd() {
+    if (slideMode === "drag") {
+      isDraggingRef.current = false;
+      setIsInteracting(false);
+      ondragend?.();
+      if (autoplay && !isMouseOverRef.current) {
+        startAutoplay();
+      }
+    }
+  }
+  function commitPercent(percent) {
+    const newPercent = Math.max(0, Math.min(100, percent));
+    setSliderXPercent(newPercent);
+    onpercentagechange?.(newPercent);
+  }
+  function handleMove(clientX) {
+    if (!sliderRef.current) return;
+    if (slideMode === "hover" || slideMode === "drag" && isDraggingRef.current) {
+      setIsInteracting(true);
+      stopAutoplay();
+      const rect = sliderRef.current.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const percent = x / rect.width * 100;
+      stopMoveFrame();
+      moveRAF.current = requestAnimationFrame(() => {
+        moveRAF.current = null;
+        commitPercent(percent);
+      });
+    }
+  }
+  function handleKeyDown(event) {
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = sliderXPercent - KEYBOARD_STEP;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        next = sliderXPercent + KEYBOARD_STEP;
+        break;
+      case "PageDown":
+        next = sliderXPercent - KEYBOARD_PAGE_STEP;
+        break;
+      case "PageUp":
+        next = sliderXPercent + KEYBOARD_PAGE_STEP;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = 100;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    stopAutoplay();
+    commitPercent(next);
+  }
+  function handleMouseDown() {
+    handleStart();
+  }
+  function handleMouseMove(e) {
+    handleMove(e.clientX);
+  }
+  function handleTouchStart() {
+    if (!autoplay) handleStart();
+  }
+  function handleTouchEnd() {
+    if (!autoplay) handleEnd();
+  }
+  function handleTouchMove(e) {
+    const touch = e.touches[0];
+    if (!autoplay && touch) handleMove(touch.clientX);
+  }
+  useIsomorphicLayoutEffect(() => {
+    setSliderXPercent(initialSliderPercentage);
+  }, [initialSliderPercentage]);
+  useIsomorphicLayoutEffect(() => {
+    if (autoplay && !isMouseOverRef.current && !isDraggingRef.current) {
+      startAutoplay();
+    } else {
+      stopAutoplay();
+    }
+    return () => {
+      stopAutoplay();
+      stopMoveFrame();
+    };
+  }, [autoplay, autoplayDuration]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: sliderRef,
+      className: cn("h-[400px] w-[400px] overflow-hidden", className),
+      style: {
+        position: "relative",
+        cursor: slideMode === "drag" ? "grab" : "col-resize"
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: mouseLeaveHandler,
+      onMouseEnter: mouseEnterHandler,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleEnd,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      onTouchMove: handleTouchMove,
+      onKeyDown: handleKeyDown,
+      role: "slider",
+      "aria-label": ariaLabel,
+      "aria-valuenow": sliderXPercent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pointer-events-none absolute top-0 z-40 m-auto h-full w-px bg-gradient-to-b from-transparent from-5% via-indigo-500 to-transparent to-95%",
+            style: { left: `${sliderXPercent}%` },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 z-20 h-full w-36 -translate-y-1/2 bg-gradient-to-r from-indigo-400 via-transparent to-transparent [mask-image:radial-gradient(100px_at_left,white,transparent)] opacity-50" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 z-10 h-1/2 w-10 -translate-y-1/2 bg-gradient-to-r from-cyan-400 via-transparent to-transparent [mask-image:radial-gradient(50px_at_left,white,transparent)] opacity-100" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -right-10 h-3/4 w-10 -translate-y-1/2 [mask-image:radial-gradient(100px_at_left,white,transparent)]", children: /* @__PURE__ */ jsx(StarField, { starsCount: 120, className: "size-full" }) }),
+              handle ? handle : showHandlebar ? /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 -right-2.5 z-30 flex size-5 -translate-y-1/2 cursor-grab items-center justify-center rounded-md bg-white shadow-[0px_-1px_0px_0px_#FFFFFF40]", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: "1.5",
+                  stroke: "currentColor",
+                  className: "size-4 text-black",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
+                    }
+                  )
+                }
+              ) }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative z-20 size-full overflow-hidden",
+            style: { pointerEvents: isInteracting ? "none" : "auto" },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 z-20 h-full w-full flex-shrink-0 overflow-hidden rounded-2xl select-none",
+                  firstContentClass
+                ),
+                style: { clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)` },
+                children: firstContent ? firstContent : firstImage ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: firstImageAlt,
+                    src: firstImage,
+                    className: cn(
+                      "absolute inset-0 z-20 h-full w-full flex-shrink-0 rounded-2xl object-cover select-none",
+                      firstContentClass
+                    ),
+                    draggable: false
+                  }
+                ) : null
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute top-0 left-0 z-[19] h-full w-full overflow-hidden rounded-2xl select-none",
+              secondContentClass
+            ),
+            style: { pointerEvents: isInteracting ? "none" : "auto" },
+            children: secondContent ? secondContent : secondImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: secondImageAlt,
+                src: secondImage,
+                className: cn("h-full w-full object-cover", secondContentClass),
+                draggable: false
+              }
+            ) : null
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Compare
+};

package/dist/components/compare/StarField.d.ts

@@ -0,0 +1,22 @@
+export interface StarFieldProps {
+    /** Number of stars to render */
+    starsCount?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Seed for the star layout. The same seed always produces the same sky,
+     * which is what keeps a server render and its hydration identical. Change
+     * it to give two star fields on one page different layouts — the default
+     * is shared, so two `<StarField />` with no seed twinkle the same way.
+     */
+    seed?: number;
+}
+/**
+ * Memoised, because the sky is a constant and its host is not: Compare
+ * re-renders on every autoplay frame and every pointer move while it passes
+ * this component nothing but static literals. Without the boundary each of
+ * those frames would rebuild every star element and diff its inline style to
+ * write nothing — work the Svelte source never does, where the `{#each}` block
+ * is built once and only the divider's own two style properties change.
+ */
+export declare const StarField: import("react").NamedExoticComponent<StarFieldProps>;

package/dist/components/compare/StarField.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+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 createStars(starsCount, seed) {
+  const rng = mulberry32(seed);
+  function random(min, max) {
+    return rng() * (max - min) + min;
+  }
+  function randomSize() {
+    return rng() < 0.5 ? 1 : 2;
+  }
+  return Array.from(
+    { length: starsCount },
+    (_, i) => ({
+      id: i,
+      top: `${random(0, 100)}%`,
+      left: `${random(0, 100)}%`,
+      size: randomSize(),
+      twinkleDuration: random(2, 4),
+      driftDuration: random(5, 10),
+      driftDirection: random(-50, 50),
+      opacityStart: random(0.1, 0.3),
+      opacityEnd: random(0.7, 1)
+    })
+  );
+}
+const StarField = memo(function StarField2({
+  starsCount = 130,
+  className,
+  seed = 1
+}) {
+  const stars = useMemo(() => createStars(starsCount, seed), [starsCount, seed]);
+  return /* @__PURE__ */ jsx("div", { className: cn("fancy-star-field absolute inset-0 overflow-hidden", className), children: stars.map((star) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "star absolute rounded-full bg-white",
+      style: {
+        top: star.top,
+        left: star.left,
+        width: `${star.size}px`,
+        height: `${star.size}px`,
+        "--fancy-ui-twinkle-duration": `${star.twinkleDuration}s`,
+        "--fancy-ui-drift-duration": `${star.driftDuration}s`,
+        "--fancy-ui-drift-direction": `${star.driftDirection}px`,
+        "--fancy-ui-opacity-start": star.opacityStart,
+        "--fancy-ui-opacity-end": star.opacityEnd
+      }
+    },
+    star.id
+  )) });
+});
+export {
+  StarField
+};

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

@@ -0,0 +1,4 @@
+export { Compare } from "./Compare.js";
+export type { CompareProps } from "./Compare.js";
+export { StarField } from "./StarField.js";
+export type { StarFieldProps } from "./StarField.js";

package/dist/components/composer/Composer.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { AttachmentData } from "../../internals/ai-types.js";
+/**
+ * Props for Composer
+ */
+export interface ComposerProps {
+    /**
+     * The draft text. Controlled when passed — report every write through
+     * `onValueChange`; leave it out and the composer keeps its own copy.
+     * Cleared by a successful submit.
+     */
+    value?: string;
+    /** Called with the draft on every write the composer makes: typing, an insertion, a clear. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Files riding along with the draft. Controlled when passed — the consumer
+     * owns uploading them and reports removals back through
+     * `onAttachmentsChange`.
+     */
+    attachments?: AttachmentData[];
+    /** Called with the remaining attachments whenever the composer drops one. */
+    onAttachmentsChange?: (attachments: AttachmentData[]) => void;
+    /** Blocks typing, sending, and attaching. */
+    disabled?: boolean;
+    /** A response is arriving: the send button becomes a stop button. */
+    streaming?: boolean;
+    /** Placeholder for the default input. Ignored once `children` replaces the composition. */
+    placeholder?: string;
+    /** Called with the trimmed draft and a snapshot of the attachments. */
+    onSubmit?: (payload: {
+        text: string;
+        attachments: AttachmentData[];
+    }) => void;
+    /** Called when the stop button is pressed while streaming. */
+    onStop?: () => void;
+    /** Called with the files handed to `addFiles`. Upload them, then push onto `attachments`. */
+    onAttach?: (files: File[]) => void;
+    /** Replaces the default input-and-send-row composition entirely. */
+    children?: ReactNode;
+    /** An overlay covering the composer — a voice panel, a drop target, a confirmation. */
+    accessory?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The root of the composer compound: it owns the draft and publishes it.
+ *
+ * The form element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the source declares `ref = $bindable(null)`.
+ */
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/components/composer/Composer.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useConstant, useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { findTokenStart } from "./caret.js";
+import { ComposerInput } from "./ComposerInput.js";
+import { ComposerSubmit } from "./ComposerSubmit.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css             */
+const NO_ATTACHMENTS = [];
+const Composer = forwardRef(function Composer2({
+  value: valueProp,
+  onValueChange,
+  attachments: attachmentsProp,
+  onAttachmentsChange,
+  disabled = false,
+  streaming = false,
+  placeholder,
+  onSubmit,
+  onStop,
+  onAttach,
+  children,
+  accessory,
+  className,
+  sound = false
+}, forwardedRef) {
+  const playCue = useSoundCue(sound);
+  const [uncontrolledValue, setUncontrolledValue] = useState("");
+  const value = valueProp !== void 0 ? valueProp : uncontrolledValue;
+  const [uncontrolledAttachments, setUncontrolledAttachments] = useState(NO_ATTACHMENTS);
+  const attachments = attachmentsProp !== void 0 ? attachmentsProp : uncontrolledAttachments;
+  const textareaElRef = useRef(null);
+  const [, setRegisteredTextarea] = useState(null);
+  const textareaRef = useConstant(() => ({
+    get current() {
+      return textareaElRef.current;
+    },
+    set current(next) {
+      textareaElRef.current = next;
+      setRegisteredTextarea(next);
+    }
+  }));
+  const pendingCaretRef = useRef(null);
+  const [, setCaretNonce] = useState(0);
+  function applyValue(next) {
+    if (valueProp === void 0) setUncontrolledValue(next);
+    onValueChange?.(next);
+  }
+  function applyAttachments(next) {
+    if (attachmentsProp === void 0) setUncontrolledAttachments(next);
+    onAttachmentsChange?.(next);
+  }
+  const submit = useEventCallback(() => {
+    if (disabled || streaming) return;
+    const text = value.trim();
+    if (text === "" && attachments.length === 0) return;
+    if (!onSubmit) return;
+    playCue("press");
+    onSubmit({ text, attachments: [...attachments] });
+    applyValue("");
+  });
+  const stop = useEventCallback(() => {
+    if (!streaming) return;
+    if (onStop) playCue("press");
+    onStop?.();
+  });
+  const setValue = useEventCallback((next) => {
+    applyValue(next);
+  });
+  const insertText = useEventCallback((text, replaceTriggerToken = false) => {
+    if (disabled || streaming) return;
+    const current = value;
+    const el = textareaElRef.current;
+    const rawEnd = el?.selectionEnd;
+    const end = typeof rawEnd === "number" ? rawEnd : current.length;
+    const rawStart = el?.selectionStart;
+    const selectionStart = typeof rawStart === "number" ? Math.min(rawStart, end) : end;
+    const trigger = replaceTriggerToken ? findTokenStart(current, end) : -1;
+    const start = trigger >= 0 ? trigger : selectionStart;
+    const trailing = current.slice(end);
+    const needsSpace = trigger >= 0 && !/\s$/.test(text) && !/^\s/.test(trailing);
+    const insertion = needsSpace ? `${text} ` : text;
+    const caret = start + insertion.length;
+    applyValue(`${current.slice(0, start)}${insertion}${trailing}`);
+    if (!el) return;
+    pendingCaretRef.current = { el, caret };
+    setCaretNonce((nonce) => nonce + 1);
+  });
+  const addFiles = useEventCallback((files) => {
+    if (disabled || files.length === 0) return;
+    onAttach?.(files);
+  });
+  const removeAttachment = useEventCallback((id) => {
+    applyAttachments(attachments.filter((attachment) => attachment.id !== id));
+  });
+  useIsomorphicLayoutEffect(() => {
+    const pending = pendingCaretRef.current;
+    if (!pending) return;
+    pendingCaretRef.current = null;
+    if (!pending.el.isConnected) return;
+    pending.el.focus();
+    pending.el.setSelectionRange(pending.caret, pending.caret);
+  });
+  const context = {
+    value: { current: value },
+    attachments: { current: attachments },
+    disabled,
+    streaming,
+    stoppable: typeof onStop === "function",
+    sound,
+    // Declared read-only on ComposerContext so no other part writes it; the
+    // setter exists for ComposerInput alone, which registers its element here
+    // on mount. See the note at the top of types.ts.
+    textareaRef,
+    submit,
+    stop,
+    setValue,
+    insertText,
+    addFiles,
+    removeAttachment
+  };
+  function handleSubmit(event) {
+    event.preventDefault();
+    submit();
+  }
+  return /* @__PURE__ */ jsx(COMPOSER_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: forwardedRef,
+      className: cn(
+        "ft-composer relative flex w-full flex-col border p-2",
+        className,
+        disabled && "ft-composer-disabled"
+      ),
+      "data-streaming": streaming ? "" : void 0,
+      onSubmit: handleSubmit,
+      children: [
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ComposerInput, { placeholder }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsx(ComposerSubmit, {})
+          ] })
+        ] }),
+        accessory ? /* @__PURE__ */ jsx("div", { className: "ft-composer-accessory absolute inset-0 z-10", children: accessory }) : null
+      ]
+    }
+  ) });
+});
+export {
+  Composer
+};

package/dist/components/composer/ComposerAttachment.d.ts

@@ -0,0 +1,14 @@
+import type { AttachmentData } from "../../internals/ai-types.js";
+/**
+ * Props for ComposerAttachment
+ */
+export interface ComposerAttachmentProps {
+    /** The file to show: its name, and whatever the upload knows so far. */
+    attachment: AttachmentData;
+    /** Called with the attachment id instead of the composer's own removal. */
+    onRemove?: (id: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** One file riding along with the draft: its name, its size, its upload, its cross. */
+export declare function ComposerAttachment({ attachment, onRemove, className }: ComposerAttachmentProps): import("react").JSX.Element;