fancy-ui-react 0.2.0

package/dist/components/chat-message/ChatMessageAction.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { CHAT_MESSAGE_CONTEXT_KEY } from "./types.js";
+const CONFIRM_MS = 2e3;
+function ChatMessageAction({
+  label,
+  onClick,
+  active,
+  confirmLabel,
+  children,
+  className
+}) {
+  const message = useContext(CHAT_MESSAGE_CONTEXT_KEY);
+  const playCue = useSoundCue(message?.sound ?? false);
+  const [confirmed, setConfirmed] = useState(false);
+  const timer = useRef(void 0);
+  function clearTimer() {
+    if (timer.current !== void 0) {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    }
+  }
+  useEffect(() => clearTimer, []);
+  function handleClick(event) {
+    playCue("press");
+    onClick?.(event);
+    if (!confirmLabel) return;
+    setConfirmed(true);
+    clearTimer();
+    timer.current = setTimeout(() => {
+      setConfirmed(false);
+      timer.current = void 0;
+    }, CONFIRM_MS);
+  }
+  const currentLabel = confirmed && confirmLabel ? confirmLabel : label;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:ring-1 focus-visible:outline-none",
+        active && "bg-muted text-foreground",
+        className
+      ),
+      "aria-label": currentLabel,
+      title: currentLabel,
+      "aria-pressed": active,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+export {
+  ChatMessageAction
+};

package/dist/components/chat-message/ChatMessageActions.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ChatMessageActions
+ */
+export interface ChatMessageActionsProps {
+    /** Keep the rail on screen even when the message is neither hovered nor focused. */
+    alwaysVisible?: boolean;
+    /** The buttons — `ChatMessageAction` elements. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The rail of buttons under a turn, revealed on hover or focus. */
+export declare function ChatMessageActions({ alwaysVisible, children, className, }: ChatMessageActionsProps): import("react").JSX.Element;

package/dist/components/chat-message/ChatMessageActions.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { CHAT_MESSAGE_CONTEXT_KEY } from "./types.js";
+/* empty css                         */
+function ChatMessageActions({
+  alwaysVisible = false,
+  children,
+  className
+}) {
+  const message = useContext(CHAT_MESSAGE_CONTEXT_KEY);
+  const visible = alwaysVisible || (message?.hovered.current ?? false);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ft-message-actions flex items-center gap-0.5",
+        className,
+        visible && "ft-visible"
+      ),
+      role: "group",
+      "aria-label": "Message actions",
+      children
+    }
+  );
+}
+export {
+  ChatMessageActions
+};

package/dist/components/chat-message/ChatMessageBranches.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Props for ChatMessageBranches
+ */
+export interface ChatMessageBranchesProps {
+    /** Which version is on screen, 1-based. */
+    index: number;
+    /** How many versions exist. */
+    count: number;
+    /** Asked to show another version, by 1-based index. Required — the navigator holds no state. */
+    onNavigate: (index: number) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The "2/3" version navigator that sits under a regenerated answer. */
+export declare function ChatMessageBranches({ index, count, onNavigate, className, }: ChatMessageBranchesProps): import("react").JSX.Element;

package/dist/components/chat-message/ChatMessageBranches.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { CHAT_MESSAGE_CONTEXT_KEY } from "./types.js";
+const buttonClass = "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring inline-flex size-6 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40";
+function ChatMessageBranches({
+  index,
+  count,
+  onNavigate,
+  className
+}) {
+  const message = useContext(CHAT_MESSAGE_CONTEXT_KEY);
+  const playCue = useSoundCue(message?.sound ?? false);
+  const atStart = index <= 1;
+  const atEnd = index >= count;
+  function navigate(next) {
+    if (next < 1 || next > count) return;
+    playCue("select");
+    onNavigate(next);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-0.5 text-xs",
+        message?.role === "user" && "justify-end",
+        className
+      ),
+      role: "group",
+      "aria-label": "Response versions",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: buttonClass,
+            "aria-label": "Previous version",
+            disabled: atStart,
+            onClick: () => navigate(index - 1),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "size-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+          index,
+          "/",
+          count
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: buttonClass,
+            "aria-label": "Next version",
+            disabled: atEnd,
+            onClick: () => navigate(index + 1),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "size-3.5",
+                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 {
+  ChatMessageBranches
+};

package/dist/components/chat-message/index.d.ts

@@ -0,0 +1,10 @@
+export { ChatMessage } from "./ChatMessage.js";
+export type { ChatMessageProps } from "./ChatMessage.js";
+export { ChatMessageActions } from "./ChatMessageActions.js";
+export type { ChatMessageActionsProps } from "./ChatMessageActions.js";
+export { ChatMessageAction } from "./ChatMessageAction.js";
+export type { ChatMessageActionProps } from "./ChatMessageAction.js";
+export { ChatMessageBranches } from "./ChatMessageBranches.js";
+export type { ChatMessageBranchesProps } from "./ChatMessageBranches.js";
+export { CHAT_MESSAGE_CONTEXT_KEY } from "./types.js";
+export type { ChatMessageContext } from "./types.js";

package/dist/components/chat-message/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The contract between the chat-message root and its parts.
+ *
+ * `ChatMessage` publishes a live, read-only view of the turn it is rendering;
+ * every child reads it through context instead of having the same three values
+ * threaded back down as props. The root rebuilds the object whenever one of
+ * those values changes, which is what re-renders the parts below it — the React
+ * counterpart of the Svelte context's live getters.
+ */
+/** What the root publishes. Children read it; only the root writes it. */
+export interface ChatMessageContext {
+    readonly role: "user" | "assistant" | "system";
+    readonly streaming: boolean;
+    readonly hovered: {
+        readonly current: boolean;
+    };
+    /**
+     * Whether this message plays sound cues — forwarded from the root's own
+     * `sound` prop. Optional so a part read outside a `ChatMessage` root
+     * (`message?.sound`) falls through to `undefined`, which is the correct
+     * "no sound" answer there too.
+     */
+    readonly sound?: boolean;
+}
+/**
+ * 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 message = useContext(CHAT_MESSAGE_CONTEXT_KEY);
+ * ```
+ *
+ * Read it as optional. Every shipped part does, so a part rendered outside a
+ * root degrades instead of throwing.
+ */
+export declare const CHAT_MESSAGE_CONTEXT_KEY: import("react").Context<ChatMessageContext | undefined>;

package/dist/components/chat-message/types.js

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

package/dist/components/chat-panel/ChatEmptyState.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ChatEmptyState
+ */
+export interface ChatEmptyStateProps {
+    /** The greeting, read as the heading of the empty conversation. */
+    title?: string;
+    /** A line under the greeting saying what this assistant is for. */
+    description?: string;
+    /** Decorative mark above the greeting, replacing the default sparkle. */
+    icon?: ReactNode;
+    /** Rendered under the description — where `PromptSuggestions` belongs. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const ChatEmptyState: import("react").ForwardRefExoticComponent<ChatEmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/chat-panel/ChatEmptyState.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+const ChatEmptyState = forwardRef(
+  function ChatEmptyState2({ title = "How can I help?", description, icon, children, className }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "ft-empty text-muted-foreground flex h-full flex-col items-center justify-center gap-3 px-6 py-16 text-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ft-empty-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-8 opacity-60",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M11 5 12.6 10.9 18.5 12.5 12.6 14.1 11 20 9.4 14.1 3.5 12.5 9.4 10.9Z" }),
+                /* @__PURE__ */ jsx("path", { d: "M18.5 3 19.1 5.4 21.5 6 19.1 6.6 18.5 9 17.9 6.6 15.5 6 17.9 5.4Z" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("h2", { className: "ft-empty-title text-foreground text-lg font-semibold text-balance", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "ft-empty-description max-w-prose text-sm leading-relaxed text-balance", children: description }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "ft-empty-extra mt-2 flex w-full flex-col items-center", children }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  ChatEmptyState
+};

package/dist/components/chat-panel/ChatPanel.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ChatPanel
+ */
+export interface ChatPanelProps {
+    /** Whether a reply is still arriving. Pins the scroll region to its bottom while true. */
+    streaming?: boolean;
+    /** Renders `emptyState` in place of `children` — a conversation with no turns yet. */
+    empty?: boolean;
+    /** Label on the pill that appears once the reader scrolls away from the bottom. */
+    returnLabel?: string;
+    /** Accessible name for the panel as a whole. */
+    label?: string;
+    /** Sticky top region: a title, a model name, a close button. */
+    header?: ReactNode;
+    /** The message stream, filling the scroll region. */
+    children?: ReactNode;
+    /** Sticky bottom region — where `Composer` belongs. */
+    composer?: ReactNode;
+    /** Rendered instead of `children` while `empty` — where `ChatEmptyState` belongs. */
+    emptyState?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the press cue through the sound controller when the
+     * jump-to-latest pill is activated. Off by default; only audible
+     * once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const ChatPanel: import("react").ForwardRefExoticComponent<ChatPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/chat-panel/ChatPanel.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { scrollToBottom, useAutoscroll } from "../../internals/use-autoscroll.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css               */
+const BOTTOM_THRESHOLD = 40;
+const ChatPanel = forwardRef(function ChatPanel2({
+  streaming = false,
+  empty = false,
+  returnLabel = "Jump to latest",
+  label = "Conversation",
+  header,
+  children,
+  composer,
+  emptyState,
+  className,
+  sound = false
+}, ref) {
+  const [scrollEl, scrollRef] = useElementRef();
+  const [contentEl, contentRef] = useElementRef();
+  const [stuck, setStuck] = useState(true);
+  const touched = useRef(false);
+  const selfScroll = useRef(false);
+  const frame = useRef(null);
+  const emptyLive = useLiveRef(empty);
+  const playCue = useSoundCue(sound);
+  const syncStuck = useCallback(() => {
+    const el = scrollEl;
+    if (!el) return;
+    setStuck(el.scrollHeight - el.scrollTop - el.clientHeight <= BOTTOM_THRESHOLD);
+  }, [scrollEl]);
+  const snap = useCallback((el, behavior) => {
+    const before = el.scrollTop;
+    scrollToBottom(el, behavior);
+    if (el.scrollTop === before) return;
+    selfScroll.current = true;
+    requestAnimationFrame(() => {
+      selfScroll.current = false;
+    });
+  }, []);
+  function handleScroll() {
+    if (!selfScroll.current) touched.current = true;
+    syncStuck();
+  }
+  const handleMutation = useCallback(() => {
+    if (frame.current !== null) return;
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null;
+      const el = scrollEl;
+      if (!el) return;
+      if (!touched.current && !emptyLive.current) snap(el, "instant");
+      syncStuck();
+    });
+  }, [scrollEl, emptyLive, snap, syncStuck]);
+  function jumpToLatest() {
+    const el = scrollEl;
+    if (!el) return;
+    playCue("press");
+    el.focus({ preventScroll: true });
+    snap(el, prefersReducedMotion() ? "instant" : "smooth");
+  }
+  useAutoscroll(scrollEl, { enabled: streaming });
+  useIsomorphicLayoutEffect(() => {
+    const el = scrollEl;
+    if (!el) return;
+    snap(el, "instant");
+    syncStuck();
+  }, [scrollEl, snap, syncStuck]);
+  useEffect(() => {
+    syncStuck();
+  }, [streaming, empty, syncStuck]);
+  useEffect(() => {
+    const el = scrollEl;
+    if (!el) return;
+    const growth = new MutationObserver(handleMutation);
+    growth.observe(el, { childList: true, subtree: true, characterData: true });
+    let resize = null;
+    if (contentEl && typeof ResizeObserver !== "undefined") {
+      resize = new ResizeObserver(handleMutation);
+      resize.observe(contentEl);
+    }
+    return () => {
+      growth.disconnect();
+      resize?.disconnect();
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+      frame.current = null;
+    };
+  }, [scrollEl, contentEl, handleMutation]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-panel bg-card text-card-foreground flex h-full flex-col overflow-hidden rounded-xl border",
+        className
+      ),
+      role: "region",
+      "aria-label": label,
+      "data-streaming": streaming ? "" : void 0,
+      "data-empty": empty ? "" : void 0,
+      children: [
+        header ? (
+          /*
+           * Sticky without `position: sticky`: the shell is a flex column whose
+           * middle row is the only one allowed to grow, so the two ends simply
+           * never scroll.
+           */
+          /* @__PURE__ */ jsx("div", { className: "ft-panel-header border-border flex-none border-b", children: header })
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "ft-panel-viewport relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollRef,
+              className: "ft-panel-scroll focus-visible:ring-ring h-full overflow-y-auto focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+              tabIndex: 0,
+              onScroll: handleScroll,
+              children: /* @__PURE__ */ jsx("div", { ref: contentRef, children: empty ? emptyState : children })
+            }
+          ),
+          !stuck ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ft-panel-return bg-card text-foreground border-border hover:bg-muted focus-visible:ring-ring absolute inset-x-0 z-10 mx-auto flex w-fit cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium shadow-md transition-colors focus-visible:ring-2 focus-visible:outline-none",
+              onClick: jumpToLatest,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "size-3.5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+                      /* @__PURE__ */ jsx("path", { d: "m19 12-7 7-7-7" })
+                    ]
+                  }
+                ),
+                returnLabel
+              ]
+            }
+          ) : null
+        ] }),
+        composer ? /* @__PURE__ */ jsx("div", { className: "ft-panel-composer border-border bg-card flex-none border-t", children: composer }) : null
+      ]
+    }
+  );
+});
+export {
+  ChatPanel
+};

package/dist/components/chat-panel/index.d.ts

@@ -0,0 +1,4 @@
+export { ChatPanel } from "./ChatPanel.js";
+export type { ChatPanelProps } from "./ChatPanel.js";
+export { ChatEmptyState } from "./ChatEmptyState.js";
+export type { ChatEmptyStateProps } from "./ChatEmptyState.js";

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+export interface CheckboxProps {
+    /**
+     * Whether the box is checked. Controlled when supplied: pair it with
+     * `onCheckedChange`, the React counterpart of the Svelte source's
+     * `bind:checked`. This is the real state underneath even while
+     * `indeterminate` is true — a click always resolves to this value,
+     * never to a third state.
+     */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled (no `checked` prop given). */
+    defaultChecked?: boolean;
+    /**
+     * Mixed/dash visual state. A DOM property with no HTML attribute
+     * equivalent, so it is assigned straight to the element and reapplied
+     * whenever this prop changes, not only on mount. Any interaction that
+     * changes `checked` clears it back to `false` — a controlled caller
+     * that wants it to stay cleared simply stops re-passing `true`, which
+     * it learns to do from `onCheckedChange`.
+     */
+    indeterminate?: boolean;
+    /** Called with the new checked value whenever the box is activated. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Blocks interaction; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Native `required`. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Form value submitted while checked. */
+    value?: string;
+    /**
+     * Accessible name, rendered as `aria-label`. Typically for a control
+     * with no visible `children` text; also applies alongside `children`
+     * that render no text of their own (e.g. an icon), since the two props
+     * aren't mutually exclusive and there is no way to detect from here
+     * whether an arbitrary node renders text. Skip this when `children`
+     * already supplies the visible label text — passing both means
+     * `aria-label` wins the accessible name and the visible text is
+     * announced by nothing.
+     */
+    label?: string;
+    /** Visible label text, rendered beside the box. */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the wrapping `<label>`. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off
+     * by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A native `<input type="checkbox">` with a drawn tick, a real indeterminate
+ * state and full FormField integration.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<input>`.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;