fancy-ui-react 0.2.0

package/dist/components/sidebar/SidebarSeparator.d.ts

@@ -0,0 +1,5 @@
+export interface SidebarSeparatorProps {
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const SidebarSeparator: import("react").ForwardRefExoticComponent<SidebarSeparatorProps & import("react").RefAttributes<HTMLHRElement>>;

package/dist/components/sidebar/SidebarSeparator.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+const SidebarSeparator = forwardRef(
+  function SidebarSeparator2({ className }, ref) {
+    return /* @__PURE__ */ jsx("hr", { ref, className: cn("ft-sidebar-separator border-border my-2 w-full", className) });
+  }
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+export {
+  SidebarSeparator
+};

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

@@ -0,0 +1,12 @@
+export { Sidebar } from "./Sidebar.js";
+export type { SidebarProps } from "./Sidebar.js";
+export { SidebarGroup } from "./SidebarGroup.js";
+export type { SidebarGroupProps } from "./SidebarGroup.js";
+export { SidebarItem } from "./SidebarItem.js";
+export type { SidebarItemProps } from "./SidebarItem.js";
+export { SidebarSeparator } from "./SidebarSeparator.js";
+export type { SidebarSeparatorProps } from "./SidebarSeparator.js";
+export { SidebarFooter } from "./SidebarFooter.js";
+export type { SidebarFooterProps } from "./SidebarFooter.js";
+export { SIDEBAR_KEY } from "./types.js";
+export type { SidebarContext } from "./types.js";

package/dist/components/sidebar/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The contract between `Sidebar` and everything nested inside it.
+ *
+ * `Sidebar` owns the collapsed/expanded state and publishes it through
+ * context so `SidebarGroup`, `SidebarItem` and `SidebarFooter` can each
+ * adapt their own rendering (icon-only, `sr-only` labels) without the state
+ * being threaded down as a prop through every layer by hand. Unlike
+ * `ToggleGroupContext`, this context is read-only from the consumer side —
+ * there is no `toggle`/`setCollapsed` method here on purpose: `collapsed` is
+ * driven entirely from outside the compound (a consumer's own trigger,
+ * passed through `Sidebar`'s `collapsed` prop), never by anything nested
+ * inside it.
+ *
+ * A subcomponent mounted outside a `Sidebar` degrades instead of throwing —
+ * the context reads `undefined` and every consumer treats that the same as
+ * `collapsed: false`. See each subcomponent for the exact fallback.
+ */
+/** What `Sidebar` publishes. Nested components read it; only `Sidebar` writes it. */
+export interface SidebarContext {
+    /** Whether the sidebar is currently in its icon-only, collapsed state. */
+    readonly collapsed: boolean;
+}
+/**
+ * The context nested components read to learn whether the surrounding rail is
+ * collapsed. The 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 sidebar = useContext(SIDEBAR_KEY);
+ * ```
+ *
+ * Read it as optional — a subcomponent rendered outside a `Sidebar` gets
+ * `undefined` rather than throwing.
+ */
+export declare const SIDEBAR_KEY: import("react").Context<SidebarContext | undefined>;

package/dist/components/sidebar/types.js

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Props for Skeleton.
+ */
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "className"> {
+    /** Bone shape: a block, one or more text lines, or a circular avatar */
+    variant?: "rect" | "text" | "circle";
+    /** Number of text lines to render; only read when `variant="text"`. The
+     * last line renders at 60% width so a paragraph placeholder doesn't read
+     * as a perfect rectangle. */
+    lines?: number;
+    /** Shimmer sweep, opacity pulse, or a static muted bone (still a valid
+     * loading cue on its own). */
+    animation?: "shimmer" | "pulse" | "none";
+    /** Whether the placeholder is currently showing. In wrapping mode
+     * (`children` supplied) this drives the swap to real content; in
+     * standalone mode it drives whether anything renders at all. */
+    loading?: boolean;
+    /** The one screen-reader announcement. Pass `""` to silence it entirely. */
+    label?: string;
+    /** Real content to reveal once `loading` is false. Its mere presence (not
+     * its value) is what switches Skeleton from standalone to wrapping mode —
+     * see the README for the two ARIA shapes that follow from that. */
+    children?: ReactNode;
+    /** Additional CSS classes. Also the usual sizing hook: `rect`/`text` bones
+     * have no intrinsic size, so a caller sizes them with `className="h-4 w-40"`
+     * or similar. */
+    className?: string;
+}
+/**
+ * The forwarded ref is `null` whenever nothing is rendered (standalone mode
+ * with `loading=false`), matching the rest of the library's "ref is null
+ * while there's no root to bind" convention (see Presence).
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { JS_EASINGS, DURATIONS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+/* empty css             */
+const bonesFade = preset("fade");
+const Skeleton = forwardRef(function Skeleton2({
+  variant = "rect",
+  lines = 1,
+  animation = "shimmer",
+  loading = true,
+  label = "Loading",
+  children,
+  className,
+  style,
+  ...restProps
+}, forwardedRef) {
+  const wrapping = children !== void 0;
+  let lineCount = 1;
+  if (variant === "text") {
+    const n = Math.floor(lines);
+    lineCount = Number.isFinite(n) ? Math.max(1, n) : 1;
+  }
+  const bones = Array.from({ length: lineCount }, (_, i) => i);
+  const [bonesLingering, setBonesLingering] = useState(false);
+  useEffect(() => {
+    setBonesLingering(loading);
+  }, [loading]);
+  const overlayOpen = !loading && bonesLingering;
+  const overlayPresence = usePresence(overlayOpen);
+  const overlayRef = overlayPresence.register(
+    bonesFade,
+    (entering) => entering ? { duration: 0 } : {
+      duration: prefersReducedMotion() ? 0 : DURATIONS.exit,
+      easing: JS_EASINGS.in
+    }
+  );
+  const [phaseValue, setPhaseValue] = useState(null);
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof document.timeline?.currentTime !== "number") {
+      setPhaseValue(null);
+      return;
+    }
+    const durationMs = 1600;
+    const phase = -(Number(document.timeline.currentTime) % durationMs);
+    setPhaseValue(`${phase}ms`);
+  }, []);
+  const mergedStyle = phaseValue === null ? style : { ...style, "--ft-skeleton-phase": phaseValue };
+  function boneClass(index) {
+    return cn(
+      "ft-skeleton-bone",
+      index === lineCount - 1 && lineCount > 1 && "ft-skeleton-bone--short"
+    );
+  }
+  const bonesList = bones.map((i) => /* @__PURE__ */ jsx("div", { className: boneClass(i), "aria-hidden": "true" }, i));
+  if (wrapping) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cn("ft-skeleton", className),
+        ...restProps,
+        style: mergedStyle,
+        "aria-busy": loading ? "true" : void 0,
+        "data-variant": variant,
+        "data-animation": animation,
+        "data-loading": loading ? "true" : void 0,
+        children: [
+          loading ? bonesList : /* @__PURE__ */ jsxs(Fragment, { children: [
+            overlayPresence.mounted && /* @__PURE__ */ jsx("div", { ref: overlayRef, className: "ft-skeleton-bones-out", "aria-hidden": "true", children: bonesList }),
+            children
+          ] }),
+          label !== "" && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: loading ? label : "" })
+        ]
+      }
+    );
+  }
+  if (!loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: forwardedRef,
+      className: cn("ft-skeleton", className),
+      ...restProps,
+      style: mergedStyle,
+      role: "status",
+      "aria-live": "polite",
+      "data-variant": variant,
+      "data-animation": animation,
+      "data-loading": loading ? "true" : void 0,
+      children: [
+        bonesList,
+        label !== "" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+});
+export {
+  Skeleton
+};

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

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

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,32 @@
+export interface SliderProps {
+    /** Current value; seeds internal state and resyncs whenever the prop changes. */
+    value?: number;
+    /** Called with the new value on every input event. */
+    onValueChange?: (value: number) => void;
+    /** Lower bound. */
+    min?: number;
+    /** Upper bound. */
+    max?: number;
+    /** Increment size, including fractional steps. */
+    step?: number;
+    /** Blocks dragging and keyboard interaction. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Shows the current value in a bubble that tracks the thumb. */
+    showValue?: boolean;
+    /** Shows `min` and `max` as end labels below the track. */
+    showBounds?: boolean;
+    /** Additional CSS classes, applied to the outer wrapper. */
+    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 Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/slider/Slider.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css           */
+const Slider = forwardRef(
+  ({
+    value: valueProp = 0,
+    onValueChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    id,
+    name,
+    label,
+    showValue = false,
+    showBounds = false,
+    className,
+    sound = false
+  }, ref) => {
+    const [value, setValue] = useState(valueProp);
+    const [seededFrom, setSeededFrom] = useState(valueProp);
+    if (valueProp !== seededFrom) {
+      setSeededFrom(valueProp);
+      setValue(valueProp);
+    }
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveInvalid = field?.invalid ?? false;
+    const clampedValue = Math.min(max, Math.max(min, value));
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    useEffect(() => {
+      const current = valueRef.current;
+      const clamped = Math.min(max, Math.max(min, current));
+      if (clamped !== current) {
+        valueRef.current = clamped;
+        setValue(clamped);
+        onValueChange?.(clamped);
+      }
+    }, [min, max]);
+    const fraction = max > min ? Math.min(1, Math.max(0, (clampedValue - min) / (max - min))) : 0;
+    function handleInput(event) {
+      if (effectiveDisabled) return;
+      const next = Number(event.currentTarget.value);
+      setValue(next);
+      onValueChange?.(next);
+    }
+    const [inputNode, inputNodeRef] = useElementRef();
+    const composedRef = useComposedRefs(ref, inputNodeRef);
+    const effectiveDisabledRef = useLiveRef(effectiveDisabled);
+    const playCue = useSoundCue(sound);
+    useEffect(() => {
+      if (!inputNode) return;
+      function handleChange() {
+        if (effectiveDisabledRef.current) return;
+        playCue("tick");
+      }
+      inputNode.addEventListener("change", handleChange);
+      return () => inputNode.removeEventListener("change", handleChange);
+    }, [inputNode, effectiveDisabledRef, playCue]);
+    return /* @__PURE__ */ jsxs("div", { className: cn("ft-slider-wrap flex w-full flex-col gap-4", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", style: showValue ? { paddingTop: "22px" } : void 0, children: [
+        showValue && // Decorative: the input's own aria-valuenow already carries this
+        // number for assistive tech, so the bubble is hidden from it to
+        // avoid announcing the value twice.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ft-slider-bubble border-input bg-background pointer-events-none absolute -top-1 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-0.5 font-mono text-[11px] whitespace-nowrap",
+            style: { left: `${fraction * 100}%`, color: "var(--ft-slider-accent-end)" },
+            "aria-hidden": "true",
+            children: clampedValue
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: composedRef,
+            type: "range",
+            className: "ft-slider h-1 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            id: effectiveId,
+            name,
+            min,
+            max,
+            step,
+            value: clampedValue,
+            disabled: effectiveDisabled,
+            "aria-describedby": field?.describedBy,
+            "aria-invalid": effectiveInvalid ? "true" : void 0,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": clampedValue,
+            "aria-label": label,
+            style: { "--ft-slider-fill": `${fraction * 100}%` },
+            onChange: handleInput
+          }
+        )
+      ] }),
+      showBounds && // Decorative echo of min/max; the authoritative values live on the
+      // input's own min/max/aria-valuemin/aria-valuemax attributes.
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex justify-between text-[11px]", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { children: min }),
+        /* @__PURE__ */ jsx("span", { children: max })
+      ] })
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+export {
+  Slider
+};

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

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

package/dist/components/smooth-cursor/SmoothCursor.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface SpringConfig {
+    /** Controls how quickly the animation settles (default: 45) */
+    damping?: number;
+    /** Controls the spring stiffness (default: 400) */
+    stiffness?: number;
+    /** Controls the virtual mass of the animated object (default: 1) */
+    mass?: number;
+}
+export interface SmoothCursorProps {
+    /** Custom cursor node to replace the default arrow cursor */
+    cursor?: ReactNode;
+    /** Spring physics configuration */
+    springConfig?: SpringConfig;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SmoothCursor({ cursor, springConfig, className }: SmoothCursorProps): import("react").JSX.Element;

package/dist/components/smooth-cursor/SmoothCursor.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { cn } from "../../utils.js";
+function SmoothCursor({ cursor, springConfig = {}, className = "" }) {
+  const config = {
+    damping: springConfig.damping ?? 45,
+    stiffness: springConfig.stiffness ?? 400,
+    mass: springConfig.mass ?? 1
+  };
+  const cursorElRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const configRef = useLiveRef(config);
+  const stateRef = useRef({
+    visible: false,
+    reducedMotion: false,
+    posX: 0,
+    posY: 0,
+    velX: 0,
+    velY: 0,
+    targetX: 0,
+    targetY: 0,
+    rotation: 0,
+    prevX: 0,
+    prevY: 0,
+    rafId: null,
+    lastTime: 0
+  });
+  useEffect(() => {
+    const s = stateRef.current;
+    function startAnimation() {
+      if (s.rafId === null) {
+        s.lastTime = 0;
+        s.rafId = requestAnimationFrame(animate);
+      }
+    }
+    function stopAnimation() {
+      if (s.rafId !== null) {
+        cancelAnimationFrame(s.rafId);
+        s.rafId = null;
+      }
+    }
+    function snapToTarget() {
+      s.posX = s.targetX;
+      s.posY = s.targetY;
+      s.velX = 0;
+      s.velY = 0;
+      if (cursorElRef.current) {
+        cursorElRef.current.style.transform = `translate3d(${s.posX}px, ${s.posY}px, 0)`;
+      }
+    }
+    function onMouseMove(e) {
+      s.targetX = e.clientX;
+      s.targetY = e.clientY;
+      if (!s.visible) {
+        s.posX = s.targetX;
+        s.posY = s.targetY;
+        s.prevX = s.targetX;
+        s.prevY = s.targetY;
+        s.visible = true;
+        setVisible(true);
+      }
+      if (s.reducedMotion) {
+        snapToTarget();
+      } else {
+        startAnimation();
+      }
+    }
+    function onMouseLeave() {
+      s.visible = false;
+      setVisible(false);
+      stopAnimation();
+    }
+    function onMouseEnter(e) {
+      s.targetX = e.clientX;
+      s.targetY = e.clientY;
+      s.posX = s.targetX;
+      s.posY = s.targetY;
+      s.prevX = s.targetX;
+      s.prevY = s.targetY;
+      s.visible = true;
+      setVisible(true);
+      if (!s.reducedMotion) {
+        startAnimation();
+      } else {
+        snapToTarget();
+      }
+    }
+    function animate(time) {
+      if (!s.visible) {
+        s.rafId = null;
+        return;
+      }
+      s.rafId = requestAnimationFrame(animate);
+      if (s.lastTime === 0) {
+        s.lastTime = time;
+        return;
+      }
+      const dt = Math.min((time - s.lastTime) / 1e3, 0.064);
+      s.lastTime = time;
+      const { stiffness, damping, mass } = configRef.current;
+      const forceX = -stiffness * (s.posX - s.targetX) - damping * s.velX;
+      const forceY = -stiffness * (s.posY - s.targetY) - damping * s.velY;
+      const accX = forceX / mass;
+      const accY = forceY / mass;
+      s.velX += accX * dt;
+      s.velY += accY * dt;
+      s.posX += s.velX * dt;
+      s.posY += s.velY * dt;
+      const dx = s.posX - s.prevX;
+      const dy = s.posY - s.prevY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > 0.1) {
+        const targetRotation = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+        let diff = targetRotation - s.rotation;
+        while (diff > 180) diff -= 360;
+        while (diff < -180) diff += 360;
+        s.rotation += diff * 0.3;
+      }
+      s.prevX = s.posX;
+      s.prevY = s.posY;
+      if (cursorElRef.current) {
+        cursorElRef.current.style.transform = `translate3d(${s.posX}px, ${s.posY}px, 0) rotate(${s.rotation}deg)`;
+      }
+    }
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    s.reducedMotion = motionQuery.matches;
+    function onMotionChange(e) {
+      s.reducedMotion = e.matches;
+      if (s.reducedMotion) {
+        stopAnimation();
+        snapToTarget();
+      } else if (s.visible) {
+        startAnimation();
+      }
+    }
+    motionQuery.addEventListener("change", onMotionChange);
+    document.body.style.cursor = "none";
+    document.addEventListener("mousemove", onMouseMove);
+    document.documentElement.addEventListener("mouseleave", onMouseLeave);
+    document.documentElement.addEventListener("mouseenter", onMouseEnter);
+    return () => {
+      document.body.style.cursor = "";
+      motionQuery.removeEventListener("change", onMotionChange);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.documentElement.removeEventListener("mouseleave", onMouseLeave);
+      document.documentElement.removeEventListener("mouseenter", onMouseEnter);
+      stopAnimation();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: cursorElRef,
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none fixed top-0 left-0 z-[9999]",
+        visible ? "opacity-100" : "opacity-0",
+        className
+      ),
+      style: { willChange: "transform", translate: "-50% -50%" },
+      children: cursor || // Default cursor: arrow SVG
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          focusable: "false",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "currentColor",
+              d: "M9.391 2.32C8.42 1.56 7 2.253 7 3.486V28.41c0 1.538 1.966 2.18 2.874.938l6.225-8.523a2 2 0 0 1 1.615-.82h9.69c1.512 0 2.17-1.912.978-2.844z"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  SmoothCursor
+};

package/dist/components/smooth-cursor/index.d.ts

@@ -0,0 +1,2 @@
+export { SmoothCursor } from "./SmoothCursor.js";
+export type { SmoothCursorProps, SpringConfig } from "./SmoothCursor.js";

package/dist/components/sources/SourceCard.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { SourceData } from "../../internals/ai-types.js";
+/**
+ * Props for SourceCard
+ */
+export interface SourceCardProps {
+    /** The document being cited. Only `title` is ever guaranteed to render. */
+    source: SourceData;
+    /** Replaces the monogram: a favicon you host, a logo, an icon. */
+    icon?: ReactNode;
+    /**
+     * Renders the plain, non-anchor shape even when the source has a url. For a
+     * card embedded in a surface — a tooltip preview — that cannot host a link
+     * reachable by keyboard.
+     */
+    interactive?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** One citation: monogram, title, host, and the line worth reading. */
+export declare function SourceCard({ source, icon, interactive, className }: SourceCardProps): import("react").JSX.Element;

package/dist/components/sources/SourceCard.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { hostOf, monogram } from "../../internals/host.js";
+import { sanitizeHref } from "../../internals/markdown.js";
+/* empty css                */
+function resolveHref(raw) {
+  if (raw === "") return null;
+  const hasScheme = /^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith("//");
+  const host = raw.split(/[/?#]/, 1)[0];
+  const looksHostLike = !hasScheme && !raw.startsWith("/") && host.includes(".");
+  return sanitizeHref(looksHostLike ? `https://${raw}` : raw);
+}
+function SourceCard({ source, icon, interactive = true, className }) {
+  const domain = source.domain || hostOf(source.url);
+  const mark = monogram(domain || source.title);
+  const href = interactive && typeof source.url === "string" ? resolveHref(source.url) ?? "" : "";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "ft-source-mark flex-none", "aria-hidden": "true", children: icon || mark }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "ft-source-title text-foreground text-xs leading-snug font-medium", children: source.title }),
+      domain && /* @__PURE__ */ jsx("span", { className: "ft-source-domain text-muted-foreground text-[0.6875rem] leading-none", children: domain }),
+      source.snippet && /* @__PURE__ */ jsx("span", { className: "ft-source-snippet text-muted-foreground mt-0.5 text-[0.6875rem] leading-snug", children: source.snippet })
+    ] })
+  ] });
+  if (href) {
+    return (
+      // `nofollow ugc` because a model chose this link, not the author of the
+      // page it sits on; `noopener noreferrer` because the tab it opens has no
+      // business reaching back into the app or announcing where the reader
+      // came from.
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer nofollow ugc",
+          className: cn("ft-source-card ft-source-linked", className),
+          children: body
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("ft-source-card", className), children: body });
+}
+export {
+  SourceCard
+};