fancy-ui-react 0.2.0

package/dist/components/sticky-scroll/StickyScroll.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, memo } from "react";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { observeInView } from "../../internals/motion/in-view.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+/* empty css                  */
+const fadePanel = preset("fade");
+function StickyScrollItemImpl({
+  index,
+  active,
+  value,
+  item,
+  onActivate
+}) {
+  const [node, ref] = useElementRef();
+  useIsomorphicLayoutEffect(() => {
+    if (!node) return;
+    const handle = observeInView(node, {
+      once: false,
+      threshold: 0,
+      rootMargin: "-50% 0px -50% 0px",
+      onChange: (visible) => {
+        if (visible) onActivate(index);
+      }
+    });
+    return () => {
+      handle.destroy();
+    };
+  }, [node, index, onActivate]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      className: "ft-stickyscroll-item",
+      "data-index": index,
+      "data-active": active,
+      onFocus: () => onActivate(index),
+      children: item(value, index, active)
+    }
+  );
+}
+const StickyScrollItem = memo(StickyScrollItemImpl);
+function PanelFrame({ open, appear, duration, onExited, children }) {
+  const presence = usePresence(open, { appear, onExitEnd: onExited });
+  if (!presence.mounted) return null;
+  return /* @__PURE__ */ jsx("div", { ref: presence.register(fadePanel, { duration }), className: "ft-stickyscroll-panel-frame", children });
+}
+function StickyScrollImpl(props, forwardedRef) {
+  const {
+    items,
+    item,
+    panel,
+    activeIndex: activeIndexProp,
+    panelSide = "end",
+    crossfade = true,
+    panelClass,
+    panelHidden = true,
+    onChange,
+    className,
+    ...restProps
+  } = props;
+  const [uncontrolledIndex, setUncontrolledIndex] = useState(0);
+  const isControlled = activeIndexProp !== void 0;
+  const activeIndex = isControlled ? activeIndexProp : uncontrolledIndex;
+  const reduced = useReducedMotion();
+  const effectiveCrossfade = crossfade && !reduced;
+  const panelDuration = effectiveCrossfade ? DURATIONS.base : 0;
+  const panelIndex = items.length > 0 ? Math.min(Math.max(activeIndex, 0), items.length - 1) : 0;
+  const setActive = useEventCallback((i) => {
+    if (activeIndex === i) return;
+    if (!isControlled) setUncontrolledIndex(i);
+    onChange?.(i, items[i]);
+  });
+  const [frames, setFrames] = useState(() => [
+    { key: 0, live: true, frozen: null, appear: false }
+  ]);
+  const lastPanelNode = useRef(null);
+  const [prevPanelIndex, setPrevPanelIndex] = useState(panelIndex);
+  if (prevPanelIndex !== panelIndex) {
+    setPrevPanelIndex(panelIndex);
+    const frozen = lastPanelNode.current;
+    setFrames((current) => [
+      ...current.filter((f) => !f.live),
+      ...current.filter((f) => f.live).map((f) => ({ ...f, live: false, frozen })),
+      {
+        key: current.reduce((highest, f) => Math.max(highest, f.key), 0) + 1,
+        live: true,
+        frozen: null,
+        appear: true
+      }
+    ]);
+  }
+  const liveNode = items.length > 0 ? panel(items[panelIndex], panelIndex) : null;
+  useIsomorphicLayoutEffect(() => {
+    lastPanelNode.current = liveNode;
+  });
+  return (
+    // Exactly two children live directly under `.ft-stickyscroll`: the
+    // items column and the panel. One wrapping flex line does BOTH layout
+    // jobs — two side-by-side columns when the container fits both, or two
+    // full-width rows when it doesn't — with no breakpoint to keep in
+    // sync: each child asks for a 20rem basis and they wrap when the pair
+    // (plus the real gap) no longer fits. That wrap is also what gives the
+    // panel real sticky travel once stacked, since a flex item's
+    // containing block is the whole container's content box (see the
+    // stylesheet).
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cn("ft-stickyscroll", className),
+        ...restProps,
+        "data-panel-side": panelSide,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ft-stickyscroll-items", children: items.map((it, i) => /* @__PURE__ */ jsx(
+            StickyScrollItem,
+            {
+              index: i,
+              active: i === activeIndex,
+              value: it,
+              item,
+              onActivate: setActive
+            },
+            i
+          )) }),
+          items.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("ft-stickyscroll-panel", panelClass),
+              "aria-hidden": panelHidden ? "true" : void 0,
+              children: frames.map((f) => /* @__PURE__ */ jsx(
+                PanelFrame,
+                {
+                  open: f.live,
+                  appear: f.appear,
+                  duration: panelDuration,
+                  onExited: () => setFrames((current) => current.filter((x) => x.key !== f.key)),
+                  children: f.live ? liveNode : f.frozen
+                },
+                f.key
+              ))
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+const StickyScrollForwarded = forwardRef(
+  StickyScrollImpl
+);
+StickyScrollForwarded.displayName = "StickyScroll";
+const StickyScroll = StickyScrollForwarded;
+export {
+  StickyScroll
+};

package/dist/components/sticky-scroll/index.d.ts

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

package/dist/components/streaming-text/StreamingText.d.ts

@@ -0,0 +1,20 @@
+export interface StreamingTextProps {
+    /**
+     * The accumulated text so far — not the latest delta. Reassign it with a
+     * longer string as chunks arrive and the growth is what animates.
+     */
+    text: string;
+    /** While true, a soft block cursor trails the last character. */
+    streaming?: boolean;
+    /** Render the text as markdown instead of a tinted plain-text stream. */
+    markdown?: boolean;
+    /** How long a newly arrived chunk stays tinted, in ms. Plain mode only. */
+    settleMs?: number;
+    /** Colour a chunk fades from, and the cursor's fill. Any CSS colour. */
+    tintColor?: string;
+    /** Called once when `streaming` goes from true to false. */
+    onComplete?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const StreamingText: import("react").ForwardRefExoticComponent<StreamingTextProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/streaming-text/StreamingText.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { StreamText } from "../../internals/StreamText.js";
+import { Markdown } from "../../internals/markdown/Markdown.js";
+/* empty css                   */
+const cursor = /* @__PURE__ */ jsx("span", { className: "ft-streaming-cursor", "aria-hidden": "true" });
+const StreamingText = forwardRef(function StreamingText2({ text, streaming = false, markdown = false, settleMs = 350, tintColor, onComplete, className }, ref) {
+  const wasStreamingRef = useRef(streaming);
+  useEffect(() => {
+    const now = streaming;
+    if (wasStreamingRef.current && !now) onComplete?.();
+    wasStreamingRef.current = now;
+  }, [streaming, onComplete]);
+  const style = tintColor ? { ["--ft-tint-color"]: tintColor } : void 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("ft-streaming-text", markdown && "ft-streaming-block", className),
+      style,
+      children: markdown ? /* @__PURE__ */ jsx(Markdown, { text, trailingCursor: streaming ? cursor : void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StreamText, { text, settleMs }),
+        streaming ? cursor : null
+      ] })
+    }
+  );
+});
+export {
+  StreamingText
+};

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

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

package/dist/components/subagent-list/SubagentList.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { SubagentData } from "../../internals/ai-types.js";
+/**
+ * Props for SubagentList
+ */
+export interface SubagentListProps {
+    /** The delegated workers, in the order they were spawned */
+    agents: SubagentData[];
+    /**
+     * Accessible name for the list. Left undefined it is derived from the
+     * statuses — "3 agents running", then "3 agents finished".
+     */
+    label?: string;
+    /** Called when a row is activated; supplying it turns every row into a button */
+    onSelect?: (agent: SubagentData, index: number) => void;
+    /** Replaces the built-in row body, keeping the status dot */
+    item?: (agent: SubagentData, index: number) => ReactNode;
+    /** Tighter rows with the task line dropped */
+    compact?: boolean;
+    /** 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 SubagentList: import("react").ForwardRefExoticComponent<SubagentListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/subagent-list/SubagentList.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                  */
+const STATUS_WORDS = {
+  pending: "pending",
+  running: "running",
+  done: "done",
+  error: "error",
+  cancelled: "cancelled"
+};
+const STATUS_LABELS = {
+  pending: "Pending",
+  running: "Running",
+  done: "Completed",
+  error: "Failed",
+  cancelled: "Cancelled"
+};
+function isFinished(status) {
+  return status === "done" || status === "error" || status === "cancelled";
+}
+function noun(count) {
+  return count === 1 ? "agent" : "agents";
+}
+function showsProgress(agent) {
+  return agent.status === "running" && agent.progress != null && Number.isFinite(agent.progress);
+}
+function percent(progress) {
+  return Math.round(Math.min(1, Math.max(0, progress ?? 0)) * 100);
+}
+function buildRows(agents) {
+  const ids = new Set(agents.map((agent) => agent.id));
+  const seen = /* @__PURE__ */ new Map();
+  const used = /* @__PURE__ */ new Set();
+  return agents.map((agent, index) => {
+    const occurrence = seen.get(agent.id) ?? 0;
+    seen.set(agent.id, occurrence + 1);
+    let key = agent.id;
+    if (occurrence > 0) {
+      let suffix = occurrence;
+      do {
+        key = `${agent.id}#${suffix}`;
+        suffix++;
+      } while (ids.has(key) || used.has(key));
+    }
+    used.add(key);
+    return { agent, index, key };
+  });
+}
+function RowBody({
+  agent,
+  index,
+  compact,
+  onSelect,
+  item
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ft-subagents-dot",
+          agent.status === "pending" && "ft-status-pending",
+          agent.status === "running" && "ft-status-running",
+          agent.status === "done" && "ft-status-done",
+          agent.status === "error" && "ft-status-error",
+          agent.status === "cancelled" && "ft-status-cancelled"
+        ),
+        "aria-hidden": "true"
+      }
+    ),
+    item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: STATUS_LABELS[agent.status] }),
+      item(agent, index)
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "ft-subagents-main 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-subagents-name truncate font-medium", title: agent.name, children: agent.name }),
+          agent.model ? (
+            // `text-foreground/70` rather than `text-muted-foreground`: at
+            // 10px the badge is not large text, so it owes 4.5:1, and the
+            // muted token only reaches 4.33:1 on a light page. Seventy
+            // percent of the foreground clears it on both themes.
+            /* @__PURE__ */ jsx("span", { className: "ft-subagents-model text-foreground/70 shrink-0 font-mono", children: agent.model })
+          ) : null
+        ] }),
+        !compact && agent.task ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ft-subagents-task text-muted-foreground mt-0.5 block truncate",
+            title: agent.task,
+            children: agent.task
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ft-subagents-meta flex shrink-0 items-center", children: showsProgress(agent) ? (() => {
+        const value = percent(agent.progress);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          onSelect ? (
+            // Only needed inside the selectable row's button: a `progressbar`
+            // is a range role, so its own value feeds the button's accessible
+            // name instead of being announced on its own, and these words are
+            // what makes that name legible. A standalone row keeps the
+            // `progressbar` as its own object, independently announced with
+            // its label and value — this text would only repeat it.
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              STATUS_LABELS[agent.status],
+              ", ",
+              value,
+              "%"
+            ] })
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ft-subagents-progress",
+              role: "progressbar",
+              "aria-label": STATUS_LABELS.running,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": value,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ft-subagents-progress-fill",
+                  style: { width: `${value}%` }
+                }
+              )
+            }
+          )
+        ] });
+      })() : /* @__PURE__ */ jsx("span", { className: "ft-subagents-state text-muted-foreground", children: STATUS_WORDS[agent.status] }) })
+    ] })
+  ] });
+}
+const SubagentList = forwardRef(function SubagentList2({ agents, label, onSelect, item, compact = false, className, sound = false }, ref) {
+  const playCue = useSoundCue(sound);
+  const runningCount = agents.filter((agent) => agent.status === "running").length;
+  const allFinished = agents.length > 0 && agents.every((agent) => isFinished(agent.status));
+  const autoLabel = (() => {
+    const total = agents.length;
+    if (total === 0) return "No agents";
+    if (runningCount > 0) return `${runningCount} ${noun(runningCount)} running`;
+    if (allFinished) return `${total} ${noun(total)} finished`;
+    return `${total} ${noun(total)}`;
+  })();
+  const listLabel = label ?? autoLabel;
+  const rows = buildRows(agents);
+  function selectAgent(agent, index) {
+    playCue("select");
+    onSelect?.(agent, index);
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("ft-subagents w-full text-sm", compact && "ft-subagents-compact", className), children: /* @__PURE__ */ jsx("ul", { className: "ft-subagents-list", role: "list", "aria-label": listLabel, children: rows.map(({ agent, index, key }) => /* @__PURE__ */ jsx("li", { className: "ft-subagents-row", children: onSelect ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "ft-subagents-body hover:bg-muted/60 focus-visible:ring-ring flex w-full cursor-pointer items-start gap-2.5 rounded-md text-left transition-colors focus-visible:ring-1 focus-visible:outline-none",
+      onClick: () => selectAgent(agent, index),
+      children: /* @__PURE__ */ jsx(RowBody, { agent, index, compact, onSelect, item })
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: "ft-subagents-body flex w-full items-start gap-2.5 rounded-md", children: /* @__PURE__ */ jsx(RowBody, { agent, index, compact, item }) }) }, key)) }) });
+});
+export {
+  SubagentList
+};

package/dist/components/subagent-list/index.d.ts

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+export type SwitchSize = "sm" | "md" | "lg";
+export interface SwitchProps {
+    /**
+     * Whether the switch is on. Controlled when supplied: pair it with
+     * `onCheckedChange`, the React counterpart of the Svelte source's
+     * `bind:checked`.
+     */
+    checked?: boolean;
+    /** Initial on/off state when uncontrolled (no `checked` prop given). */
+    defaultChecked?: boolean;
+    /** Called with the new value whenever the switch 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;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Form value submitted while on. */
+    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 track. */
+    children?: ReactNode;
+    /** Track/knob size. */
+    size?: SwitchSize;
+    /** 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 `role="switch"` — the input IS the
+ * track, restyled rather than replaced, with the knob drawn as a pseudo-element
+ * so the input stays the only focusable, checkable thing.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<input>`.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/switch/Switch.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css           */
+const Switch = forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    disabled = false,
+    required = false,
+    id,
+    name,
+    value,
+    label,
+    children,
+    size = "md",
+    className,
+    sound = false
+  }, forwardedRef) => {
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? false;
+    const playCue = useSoundCue(sound);
+    function handleChange(event) {
+      if (effectiveDisabled) {
+        event.currentTarget.checked = checked;
+        return;
+      }
+      const next = event.currentTarget.checked;
+      if (!isControlled) setUncontrolledChecked(next);
+      playCue(next ? "toggle-on" : "toggle-off");
+      onCheckedChange?.(next);
+    }
+    const wrapperClasses = cn(
+      "ft-switch-wrap inline-flex items-center gap-[10px] text-[13px]",
+      effectiveDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      className
+    );
+    return /* @__PURE__ */ jsxs("label", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: forwardedRef,
+          type: "checkbox",
+          role: "switch",
+          "data-size": size,
+          className: "ft-switch",
+          id: effectiveId,
+          name,
+          value,
+          checked,
+          disabled: effectiveDisabled,
+          required: effectiveRequired,
+          "aria-checked": checked,
+          "aria-invalid": effectiveInvalid ? "true" : void 0,
+          "aria-describedby": field?.describedBy,
+          "aria-label": label,
+          onChange: handleChange
+        }
+      ),
+      children
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+export {
+  Switch
+};

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

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch.js";
+export type { SwitchProps, SwitchSize } from "./Switch.js";

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+export interface TabsProps {
+    /**
+     * The active tab's value. Passing it makes the selection controlled — the
+     * React counterpart of the Svelte source's `$bindable`; omit it entirely to
+     * let the root own its own selection and report every change through
+     * `onValueChange`.
+     */
+    value?: string;
+    /** Called with the new value whenever the active tab changes. */
+    onValueChange?: (value: string) => void;
+    /** The tablist's stacking axis and which arrow-key pair moves it. Defaults to `"horizontal"`. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether arrowing to a trigger selects it immediately (`"automatic"`),
+     * or only moves focus, leaving Enter/Space to select (`"manual"`).
+     * Defaults to `"automatic"`.
+     */
+    activation?: "automatic" | "manual";
+    /** Accent underline, or a segmented pill rail. Defaults to `"underline"`. */
+    variant?: "underline" | "segmented";
+    /** A `TabsList` and one or more `TabsContent`s. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the select cue through the sound controller. Off by default;
+     * only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The root of the tabs compound: it owns the active value, the roving-focus
+ * position, and the id pair every trigger/panel couple is wired up with.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`, so the port carries no wider attribute
+ * surface than the component it mirrors.
+ */
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;