fancy-ui-react 0.2.0

package/dist/components/approval-card/ApprovalCard.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+/** The three states of a human-in-the-loop gate. */
+export type ApprovalState = "pending" | "approved" | "denied";
+/**
+ * Props for ApprovalCard
+ */
+export interface ApprovalCardProps {
+    /** What the agent is asking permission for, e.g. "Run database migration". */
+    title: string;
+    /** Secondary muted line under the title — the consequence, the blast radius. */
+    description?: string;
+    /**
+     * Which side of the gate we are on. Controlled when supplied: pair it
+     * with `onStateChange`, the React counterpart of the Svelte source's
+     * `bind:state`. Left out, the card keeps the state itself and starts
+     * at `"pending"`.
+     */
+    state?: ApprovalState;
+    /** Called with the new state whenever it changes, however the change happened. */
+    onStateChange?: (state: ApprovalState) => void;
+    /** Marks the action as irreversible: red approve button and a warning tint on the card. */
+    destructive?: boolean;
+    /** Label for the approve button. */
+    approveLabel?: string;
+    /** Label for the deny button. */
+    denyLabel?: string;
+    /**
+     * Called when approve is pressed, with the decision that was just taken
+     * (always `"approved"`). The argument is the point: `onStateChange` has
+     * only just been called at this instant, so a controlled consumer's own
+     * `state` has not re-rendered yet and still reads `"pending"`. The Svelte
+     * source's `bind:state` writes through synchronously and needs no argument;
+     * React does. A `() => void` handler keeps working — it simply ignores it.
+     */
+    onApprove?: (state: ApprovalState) => void;
+    /** Called when deny is pressed, with the decision (always `"denied"`). See `onApprove`. */
+    onDeny?: (state: ApprovalState) => void;
+    /** The consumer is executing the decision: both buttons go disabled and the card is `aria-busy`. */
+    busy?: boolean;
+    /** The detail region between the header and the footer — a diff, a command preview. */
+    children?: 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;
+}
+/**
+ * A human-in-the-loop gate: nothing happens until someone presses a button,
+ * then the footer collapses to a one-line verdict.
+ *
+ * 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 ApprovalCard: import("react").ForwardRefExoticComponent<ApprovalCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/approval-card/ApprovalCard.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                  */
+const RESOLVED_LABELS = {
+  approved: "Approved",
+  denied: "Denied"
+};
+const ApprovalCard = forwardRef(function ApprovalCard2({
+  title,
+  description,
+  state,
+  onStateChange,
+  destructive = false,
+  approveLabel = "Approve",
+  denyLabel = "Deny",
+  onApprove,
+  onDeny,
+  busy = false,
+  children,
+  className,
+  sound = false
+}, ref) {
+  const [uncontrolledState, setUncontrolledState] = useState("pending");
+  const isControlled = state !== void 0;
+  const currentState = isControlled ? state : uncontrolledState;
+  const isPending = currentState === "pending";
+  const isApproved = currentState === "approved";
+  const resolvedLabel = isApproved ? RESOLVED_LABELS.approved : RESOLVED_LABELS.denied;
+  const resolvedRef = useRef(null);
+  const shouldFocusResolved = useRef(false);
+  const playCue = useSoundCue(sound);
+  useEffect(() => {
+    if (shouldFocusResolved.current) {
+      shouldFocusResolved.current = false;
+      resolvedRef.current?.focus();
+    }
+  });
+  function decide(next) {
+    if (busy || currentState !== "pending") return;
+    if (!isControlled) {
+      setUncontrolledState(next);
+    }
+    onStateChange?.(next);
+    playCue("select");
+    if (next === "approved") onApprove?.(next);
+    else onDeny?.(next);
+    shouldFocusResolved.current = true;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-approval border-border bg-card/50 w-full rounded-lg border p-4 text-sm",
+        destructive && "ft-destructive",
+        className
+      ),
+      role: "group",
+      "aria-label": title,
+      "aria-busy": busy ? "true" : void 0,
+      "data-state": currentState,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "ft-approval-icon mt-0.5 flex-none", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+                destructive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12 8v3.5" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 15h.01" })
+                ] })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "ft-approval-title text-foreground font-medium", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "ft-approval-description text-muted-foreground mt-0.5 text-xs leading-relaxed", children: description })
+          ] })
+        ] }),
+        children != null && children !== false && /* @__PURE__ */ jsx("div", { className: "ft-approval-detail mt-3 min-w-0", children }),
+        /* @__PURE__ */ jsx("div", { className: "ft-approval-foot mt-3", "aria-live": "polite", children: isPending ? /* @__PURE__ */ jsxs("div", { className: "ft-approval-actions flex flex-wrap items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ft-approval-deny text-muted-foreground hover:text-foreground hover:bg-foreground/5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
+              disabled: busy,
+              onClick: () => decide("denied"),
+              children: denyLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "ft-approval-approve bg-foreground text-background hover:bg-foreground/90 rounded-md px-3 py-1.5 text-xs font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
+                destructive && "ft-destructive"
+              ),
+              disabled: busy,
+              onClick: () => decide("approved"),
+              children: approveLabel
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(
+          "p",
+          {
+            ref: resolvedRef,
+            tabIndex: -1,
+            className: cn(
+              "ft-approval-resolved focus-visible:ring-ring flex items-center gap-1.5 rounded-md text-xs font-medium focus-visible:ring-1 focus-visible:outline-none",
+              isApproved && "ft-approved"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "size-3.5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: isApproved ? /* @__PURE__ */ jsx("path", { d: "m20 6-11 11-5-5" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ] })
+                }
+              ) }),
+              resolvedLabel
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+ApprovalCard.displayName = "ApprovalCard";
+export {
+  ApprovalCard
+};

package/dist/components/approval-card/index.d.ts

@@ -0,0 +1,2 @@
+export { ApprovalCard } from "./ApprovalCard.js";
+export type { ApprovalCardProps, ApprovalState } from "./ApprovalCard.js";

package/dist/components/artifact-card/ArtifactCard.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { StreamStatus } from "../../internals/ai-types.js";
+/**
+ * Props for ArtifactCard
+ */
+export interface ArtifactCardProps {
+    /** What the document is called. Required — it is the card's whole identity. */
+    title: string;
+    /** The kind of thing it is, on the muted line under the title. */
+    kind?: string;
+    /** Which revision is on screen, 1-based. Rendered as `v3`. */
+    version?: number;
+    /** How many revisions exist. With `version`, the badge reads `v3/5`. */
+    versionCount?: number;
+    /**
+     * Asked to show another revision, by 1-based version number. Supplying it
+     * turns the badge into a navigator; the card holds no version state itself.
+     */
+    onVersionChange?: (version: number) => void;
+    /** Where the document is in its life: waiting, being written, finished, failed. */
+    status?: StreamStatus;
+    /** The text so far — not the latest delta. Growing it is what streams. */
+    preview?: string;
+    /** Asked to open the document. Supplying it adds an Open button to the header rail. */
+    onOpen?: () => void;
+    /** Buttons for the top-right rail: copy, download, delete. */
+    actions?: 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;
+}
+/**
+ * A generated document rendered as a thing rather than a wall of text: a title,
+ * what kind of thing it is, which draft is on screen, and a few lines of the
+ * document itself dissolving into the card's edge.
+ *
+ * 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 ArtifactCard: import("react").ForwardRefExoticComponent<ArtifactCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/artifact-card/ArtifactCard.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { StreamingText } from "../streaming-text/StreamingText.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                  */
+const STATUS_LABELS = {
+  idle: "Not started",
+  streaming: "Writing",
+  done: "Ready",
+  error: "Failed"
+};
+const ERROR_TEXT = "This document could not be generated.";
+const CONTROL_SELECTOR = "a[href], button, input, select, textarea, [contenteditable='true']";
+const OPEN_GUARD_SELECTOR = `${CONTROL_SELECTOR}, .ft-artifact-versions, .ft-artifact-actions`;
+const navButtonClass = "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring inline-flex size-5 cursor-pointer items-center justify-center rounded transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:opacity-40";
+const ArtifactCard = forwardRef(function ArtifactCard2({
+  title,
+  kind = "Document",
+  version,
+  versionCount,
+  onVersionChange,
+  status = "done",
+  preview,
+  onOpen,
+  actions,
+  className,
+  sound = false
+}, ref) {
+  const playCue = useSoundCue(sound);
+  const isStreaming = status === "streaming";
+  const isError = status === "error";
+  const hasPreview = preview !== void 0 && preview !== "";
+  const hasVersion = version !== void 0;
+  const hasCount = hasVersion && versionCount !== void 0 && versionCount > 0;
+  const navigable = hasCount && onVersionChange !== void 0;
+  const versionLabel = hasCount ? `v${version}/${versionCount}` : hasVersion ? `v${version}` : "";
+  const atFirst = (version ?? 1) <= 1;
+  const atLast = (version ?? 1) >= (versionCount ?? 1);
+  function fromControl(event) {
+    const target = event.target;
+    return target instanceof Element && target.closest(OPEN_GUARD_SELECTOR) !== null;
+  }
+  function open(event) {
+    if (fromControl(event)) return;
+    playCue("press");
+    onOpen?.();
+  }
+  function openFromButton() {
+    playCue("press");
+    onOpen?.();
+  }
+  function step(delta) {
+    const current = version ?? 1;
+    const next = current + delta;
+    if (next < 1 || next > (versionCount ?? 1)) return;
+    playCue("select");
+    onVersionChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-artifact border-border bg-card relative w-full overflow-hidden rounded-lg border",
+        onOpen && "hover:border-foreground/25 cursor-pointer transition-colors",
+        className
+      ),
+      "data-status": status,
+      onClick: onOpen ? open : void 0,
+      children: [
+        isStreaming ? /* @__PURE__ */ jsx("span", { className: "ft-artifact-sweep", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 px-3 py-2.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "ft-artifact-icon text-muted-foreground mt-0.5 flex-none", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "size-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.75",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" }),
+                /* @__PURE__ */ jsx("path", { d: "M19 8v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7z" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "ft-artifact-title text-foreground truncate text-sm font-medium", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "ft-artifact-kind text-muted-foreground truncate text-xs", children: kind })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-none items-center gap-1", children: [
+            navigable ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "ft-artifact-versions text-muted-foreground flex items-center gap-0.5 text-xs",
+                role: "group",
+                "aria-label": "Document versions",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: navButtonClass,
+                      "aria-label": "Previous version",
+                      disabled: atFirst,
+                      onClick: () => step(-1),
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "size-3",
+                          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__ */ jsx("span", { className: "ft-artifact-version tabular-nums", children: versionLabel }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: navButtonClass,
+                      "aria-label": "Next version",
+                      disabled: atLast,
+                      onClick: () => step(1),
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "size-3",
+                          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" })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : hasVersion ? /* @__PURE__ */ jsx("span", { className: "ft-artifact-version text-muted-foreground text-xs tabular-nums", children: versionLabel }) : null,
+            actions ? /* @__PURE__ */ jsx("div", { className: "ft-artifact-actions flex items-center gap-1", children: actions }) : null,
+            onOpen ? (
+              /*
+              	The visible affordance and the operable one are the same element: a
+              	real button, so it takes a tab stop and handles Enter and Space on the
+              	browser's terms, and it names the document rather than saying "Open"
+              	into a list of identical cards.
+              */
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "ft-artifact-open text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-0.5 inline-flex cursor-pointer items-center gap-1 rounded text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none",
+                  "aria-label": `Open ${title}`,
+                  onClick: openFromButton,
+                  children: [
+                    "Open",
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        className: "size-3",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+                          /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABELS[status] }),
+        hasPreview ? /* @__PURE__ */ jsx("div", { className: "ft-artifact-preview border-border border-t px-3 py-3 text-sm", children: /* @__PURE__ */ jsx("div", { className: "ft-artifact-clamp", children: /* @__PURE__ */ jsx(StreamingText, { text: preview ?? "", streaming: isStreaming }) }) }) : null,
+        isError ? /* @__PURE__ */ jsx("p", { className: "ft-artifact-error border-border border-t px-3 py-2 text-xs", children: ERROR_TEXT }) : null
+      ]
+    }
+  );
+});
+export {
+  ArtifactCard
+};

package/dist/components/artifact-card/index.d.ts

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

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,36 @@
+export interface AutocompleteProps {
+    /** Candidate strings offered as the user types. Advisory only — any text is a valid value, matched or not. */
+    suggestions: string[];
+    /** The free-text value. */
+    value?: string;
+    /** Called with the new value on every keystroke. */
+    onValueChange?: (value: string) => void;
+    /** Called only when a suggestion is committed via click or Enter — never fires from plain typing. */
+    onSelect?: (suggestion: string) => void;
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    /** Blocks focus and typing; 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 — the visible value doubles as the submitted one, unlike Combobox. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Characters required before suggestions appear. */
+    minLength?: number;
+    /** Maximum number of suggestions shown at once. */
+    maxSuggestions?: number;
+    /** 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;
+}
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;