fancy-ui-react 0.2.0

package/dist/components/toggle-group/types.d.ts

@@ -0,0 +1,75 @@
+/**
+ * The contract between the toggle group root and its items.
+ *
+ * `ToggleGroup` owns the selection and the roving-focus position; every item
+ * reads and drives both through context instead of a prop and a callback
+ * threaded down by hand for each of them. An item mounted outside a group
+ * degrades to a plain, ungrouped button rather than throwing — see
+ * `ToggleGroupItem`.
+ *
+ * The arrow-key sequence is never read off `register`/`unregister` order:
+ * the root re-queries the live DOM at the moment a key is pressed, so items
+ * that mount out of order, or that get reordered by a keyed list after
+ * mounting, still step through in the order they actually appear on screen.
+ * Registration order is used only as the pre-interaction fallback for which
+ * item starts out tabbable.
+ */
+/** What the root publishes. Items read it; only the root writes it. */
+export interface ToggleGroupContext {
+    /** Whether one value can be active at a time, or several. */
+    readonly type: "single" | "multiple";
+    /** The active values, always as an array — `type="single"` just keeps at most one. */
+    readonly value: string[];
+    /** Disables every item, regardless of its own `disabled` prop. */
+    readonly disabled: boolean;
+    /** Sizes every item. */
+    readonly size: "sm" | "md" | "lg";
+    /** The rail's stacking axis. Both arrow-key pairs work in either orientation — see `move`. */
+    readonly orientation: "horizontal" | "vertical";
+    /** Whether `itemValue` is part of the current selection. */
+    isSelected(itemValue: string): boolean;
+    /** Activates or deactivates `itemValue`, following `type`'s rule. */
+    toggle(itemValue: string): void;
+    /**
+     * Joins the roving-focus order. An item skips this entirely while disabled.
+     *
+     * Identity-stable for the life of the root: it is called from an item's own
+     * effect and therefore appears in that effect's dependency list. This is
+     * the React counterpart of the `untrack` the Svelte source wraps the body
+     * in — there, an effect that reads the registry it just mutated alternates
+     * between register and unregister until the scheduler gives up; here, a
+     * context member whose identity changed on every root render would re-run
+     * the same effect on every root render, unregistering and re-registering
+     * forever. The state updater is also a no-op returning the *same* array
+     * when nothing changes, so a duplicate register never schedules a render.
+     */
+    register(itemValue: string): void;
+    /** Leaves the roving-focus order. Identity-stable, for the same reason as `register`. */
+    unregister(itemValue: string): void;
+    /** The value that currently carries `tabindex="0"`, or `null` before anything has registered. */
+    readonly focusedValue: string | null;
+    /** Marks `itemValue` as the roving-focus position, without moving DOM focus. */
+    focus(itemValue: string): void;
+    /**
+     * Moves the roving-focus position `delta` steps from `from` in DOM order,
+     * skipping disabled items and wrapping at both ends, and moves DOM focus
+     * along with it.
+     */
+    move(from: string, delta: number): void;
+    /** Moves the roving-focus position, and DOM focus, to the first or last enabled item in DOM order. */
+    moveToEdge(edge: "first" | "last"): void;
+}
+/**
+ * The context an item reads to find its surrounding group. 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 group = useContext(TOGGLE_GROUP_KEY);
+ * ```
+ *
+ * Read it as optional — an item rendered outside a `ToggleGroup` gets
+ * `undefined` rather than throwing.
+ */
+export declare const TOGGLE_GROUP_KEY: import("react").Context<ToggleGroupContext | undefined>;

package/dist/components/toggle-group/types.js

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

package/dist/components/tool-call/ToolCall.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { ToolCallData } from "../../internals/ai-types.js";
+/**
+ * Props for ToolCall
+ */
+export interface ToolCallProps {
+    /** The invocation to render: name, status, and whatever payloads exist so far. */
+    call: ToolCallData;
+    /**
+     * Whether the payloads are expanded. Controlled when supplied — pair it with
+     * `onToggle`, the React counterpart of the Svelte source's `bind:open`. Left
+     * out until either the reader or a failure decides — see the open-behaviour
+     * contract in the README.
+     */
+    open?: boolean;
+    /** Replaces the default request rendering. Receives `call.input`. */
+    input?: (value: unknown) => ReactNode;
+    /** Replaces the default result rendering. Receives `call.output`. */
+    output?: (value: unknown) => ReactNode;
+    /** Leading icon, replacing the default wrench. */
+    icon?: ReactNode;
+    /** Called whenever the card opens or closes, by click or on its own. */
+    onToggle?: (open: boolean) => void;
+    /** 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;
+}
+/**
+ * One tool invocation as a collapsible card: name, status dot, duration in the
+ * header; request and result payloads behind a click.
+ *
+ * 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 ToolCall: import("react").ForwardRefExoticComponent<ToolCallProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tool-call/ToolCall.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { formatElapsed } from "../../internals/use-elapsed.js";
+import { useInertAttribute } from "../../internals/dom/use-inert-attribute.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css              */
+const STATUS_LABELS = {
+  pending: "Pending",
+  running: "Running",
+  done: "Completed",
+  error: "Failed",
+  cancelled: "Cancelled"
+};
+const FALLBACK_ERROR = "The tool call failed.";
+function formatDuration(ms) {
+  if (Number.isFinite(ms) && ms >= 0 && ms < 1e3) return `${Math.round(ms)}ms`;
+  return formatElapsed(ms);
+}
+function formatPayload(value) {
+  if (value === void 0) return "";
+  if (value === null || typeof value !== "object") return String(value);
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    try {
+      const ancestors = [];
+      const json = JSON.stringify(
+        value,
+        function(_key, entry) {
+          if (typeof entry === "bigint") return `${entry}n`;
+          if (entry !== null && typeof entry === "object") {
+            while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+              ancestors.pop();
+            }
+            if (ancestors.includes(entry)) return "[Circular]";
+            ancestors.push(entry);
+          }
+          return entry;
+        },
+        2
+      );
+      return json ?? String(value);
+    } catch {
+      return String(value);
+    }
+  }
+}
+const ToolCall = forwardRef(function ToolCall2({ call, open, input, output, icon, onToggle, className, sound = false }, ref) {
+  const uid = useFancyId();
+  const headerId = `${uid}-header`;
+  const bodyId = `${uid}-body`;
+  const requestId = `${uid}-request`;
+  const resultId = `${uid}-result`;
+  const playCue = useSoundCue(sound);
+  const [autoOpen, setAutoOpen] = useState(() => call.status === "error");
+  const userToggledRef = useRef(false);
+  const isOpen = open ?? autoOpen;
+  const inertRef = useInertAttribute(!isOpen);
+  const status = call.status;
+  const isError = status === "error";
+  const errorText = isError ? call.error ?? FALLBACK_ERROR : "";
+  const duration = call.durationMs === void 0 ? "" : formatDuration(call.durationMs);
+  const hasRequest = input !== void 0 || call.input !== void 0;
+  const hasOutput = output !== void 0 || call.output !== void 0;
+  const hasResult = hasOutput || errorText !== "";
+  const requestText = hasRequest ? formatPayload(call.input) : "";
+  const resultText = hasOutput ? formatPayload(call.output) : "";
+  function commit(next) {
+    if ((open ?? autoOpen) === next) return;
+    setAutoOpen(next);
+    onToggle?.(next);
+  }
+  function toggle() {
+    userToggledRef.current = true;
+    const next = !isOpen;
+    playCue(next ? "open" : "close");
+    commit(next);
+  }
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  const onToggleRef = useRef(onToggle);
+  onToggleRef.current = onToggle;
+  useEffect(() => {
+    if (call.status !== "error" || userToggledRef.current) return;
+    if (isOpenRef.current) return;
+    setAutoOpen(true);
+    onToggleRef.current?.(true);
+  }, [call.status]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("ft-toolcall border-border bg-card/50 w-full rounded-lg border text-sm", className),
+      "data-status": status,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: headerId,
+            className: "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors",
+            "aria-expanded": isOpen,
+            "aria-controls": bodyId,
+            onClick: toggle,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ft-toolcall-icon flex-none", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "size-3.5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "ft-toolcall-dot flex-none",
+                    status === "pending" && "ft-status-pending",
+                    status === "running" && "ft-status-running",
+                    status === "done" && "ft-status-done",
+                    isError && "ft-status-error",
+                    status === "cancelled" && "ft-status-cancelled"
+                  ),
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "ft-toolcall-name text-foreground min-w-0 truncate font-mono text-xs",
+                    status === "cancelled" && "ft-struck"
+                  ),
+                  children: call.name
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABELS[status] }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto flex flex-none items-center gap-2", children: [
+                duration ? /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums", children: duration }) : null,
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn("ft-toolcall-chevron size-3.5", 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" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("ft-toolcall-body", isOpen && "ft-open"), children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: inertRef,
+            id: bodyId,
+            role: "group",
+            "aria-labelledby": headerId,
+            className: "flex flex-col gap-3 px-3 pb-3",
+            children: [
+              hasRequest ? /* @__PURE__ */ jsxs("section", { "aria-labelledby": requestId, children: [
+                /* @__PURE__ */ jsx("div", { id: requestId, className: "text-muted-foreground mb-1 text-xs font-medium", children: "Request" }),
+                input ? input(call.input) : /* @__PURE__ */ jsx("pre", { className: "ft-toolcall-payload", children: requestText })
+              ] }) : null,
+              hasResult ? /* @__PURE__ */ jsxs("section", { "aria-labelledby": resultId, children: [
+                /* @__PURE__ */ jsx("div", { id: resultId, className: "text-muted-foreground mb-1 text-xs font-medium", children: "Result" }),
+                errorText ? /* @__PURE__ */ jsx("p", { className: "ft-toolcall-error-text", children: errorText }) : null,
+                output ? output(call.output) : hasOutput ? /* @__PURE__ */ jsx("pre", { className: cn("ft-toolcall-payload", errorText && "mt-2"), children: resultText }) : null
+              ] }) : null,
+              !hasRequest && !hasResult ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs italic", children: "Nothing recorded yet." }) : null
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+});
+export {
+  ToolCall
+};

package/dist/components/tool-call/index.d.ts

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

package/dist/components/tool-timeline/ToolTimeline.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import type { ToolTimelineItemData } from "../../internals/ai-types.js";
+/**
+ * Props for ToolTimeline
+ */
+export interface ToolTimelineProps {
+    /** The agent's activity log, oldest first */
+    items: ToolTimelineItemData[];
+    /** Called when a row is activated; supplying it turns every row into a button */
+    onSelect?: (item: ToolTimelineItemData, index: number) => void;
+    /** Replaces the built-in row body, keeping the rail and its dot */
+    item?: (item: ToolTimelineItemData, index: number) => ReactNode;
+    /** Tighter rows with the detail line dropped */
+    compact?: boolean;
+    /** Accessible name for the list */
+    label?: string;
+    /** 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;
+}
+/**
+ * ToolTimeline renders an agent's activity log as a vertical rail of dated,
+ * diffed rows. A shared clock (`useNow`) keeps relative timestamps fresh
+ * while the list stays mounted, at the cost of one interval for the whole
+ * list rather than one per row.
+ */
+export declare const ToolTimeline: import("react").ForwardRefExoticComponent<ToolTimelineProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tool-timeline/ToolTimeline.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { formatRelativeTime } from "../../internals/relative-time.js";
+import { useNow } from "../../internals/use-elapsed.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                  */
+function iso(timestamp) {
+  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  return Number.isFinite(date.getTime()) ? date.toISOString() : "";
+}
+const ToolTimeline = forwardRef(function ToolTimeline2({ items, onSelect, item, compact = false, label = "Activity", className, sound = false }, ref) {
+  const now = useNow();
+  const playCue = useSoundCue(sound);
+  function selectEntry(entry, index) {
+    playCue("select");
+    onSelect?.(entry, index);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-tooltimeline w-full text-sm",
+        compact && "ft-tooltimeline-compact",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("ol", { className: "ft-tooltimeline-list", "aria-label": label, children: items.map((entry, index) => {
+        const body = item ? item(entry, index) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "ft-tooltimeline-text min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "ft-tooltimeline-verb font-medium", children: entry.verb }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ft-tooltimeline-target truncate font-mono text-[0.8125rem]",
+                  title: entry.target,
+                  children: entry.target
+                }
+              )
+            ] }),
+            !compact && entry.detail ? /* @__PURE__ */ jsx("span", { className: "ft-tooltimeline-detail text-muted-foreground mt-0.5 block truncate", children: entry.detail }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "ft-tooltimeline-meta flex shrink-0 items-baseline gap-2", children: [
+            entry.additions != null ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "ft-tooltimeline-additions tabular-nums",
+                role: "img",
+                "aria-label": `${entry.additions} additions`,
+                children: [
+                  "+",
+                  entry.additions
+                ]
+              }
+            ) : null,
+            entry.deletions != null ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "ft-tooltimeline-deletions tabular-nums",
+                role: "img",
+                "aria-label": `${entry.deletions} deletions`,
+                children: [
+                  "−",
+                  entry.deletions
+                ]
+              }
+            ) : null,
+            entry.timestamp != null ? /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "ft-tooltimeline-time text-muted-foreground tabular-nums",
+                dateTime: iso(entry.timestamp),
+                title: iso(entry.timestamp),
+                children: formatRelativeTime(entry.timestamp, { now })
+              }
+            ) : null
+          ] })
+        ] });
+        return /* @__PURE__ */ jsxs("li", { className: "ft-tooltimeline-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "ft-tooltimeline-dot", "aria-hidden": "true" }),
+          onSelect ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ft-tooltimeline-body hover:bg-muted/60 focus-visible:ring-ring flex w-full cursor-pointer items-baseline gap-3 rounded-md text-left transition-colors focus-visible:ring-1 focus-visible:outline-none",
+              onClick: () => selectEntry(entry, index),
+              children: body
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "ft-tooltimeline-body flex items-baseline gap-3 rounded-md", children: body })
+        ] }, entry.id);
+      }) })
+    }
+  );
+});
+export {
+  ToolTimeline
+};

package/dist/components/tool-timeline/index.d.ts

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

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { Side, Align } from "../../internals/anchor-position.js";
+export interface TooltipProps {
+    /** The tooltip's text. Plain text only — a tooltip never holds interactive content. */
+    content: string;
+    /** Side of the trigger to place the tooltip on. */
+    side?: Side;
+    /** Alignment along the trigger's cross axis. */
+    align?: Align;
+    /** Gap in pixels between the trigger and the tooltip. */
+    offset?: number;
+    /** Delay in milliseconds before a hover opens the tooltip. Never applied to a focus open — see the README. */
+    openDelay?: number;
+    /** Delay in milliseconds before the tooltip closes once neither hovered nor focused. */
+    closeDelay?: number;
+    /** Suppresses the tooltip entirely — it never opens, on hover or focus, while true. */
+    disabled?: boolean;
+    /**
+     * The trigger. Must render exactly one focusable element (a button,
+     * link, `IconButton`, ...) — Tooltip attaches its hover/focus
+     * listeners and `aria-describedby` directly to it, imperatively,
+     * since there is no prop to hand them to it declaratively.
+     */
+    children?: ReactNode;
+    /** Additional CSS classes, merged onto the trigger wrapper. */
+    className?: string;
+}
+/**
+ * A plain-text label anchored to a focusable trigger, opening on hover or
+ * focus.
+ *
+ * The source declares `ref = $bindable(null)` for the trigger wrapper
+ * element, so that element arrives through this component's ref channel
+ * (PORTING.md §"API contract") rather than through a prop.
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLSpanElement>>;