@signalflare-ai/ui 0.5.0

package/dist/ai-conversation-DYtExcrw.js

@@ -0,0 +1,184 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/ai-conversation/ai-conversation.tsx
+var SF_AI_CONVERSATION_VARIANTS = {};
+var SF_AI_CONVERSATION_DEFAULT_VARIANTS = {};
+/**
+* Outer scroll container for a conversation. Sticks to the bottom as new
+* messages are added. Pair with `AiConversationContent` and optionally
+* `AiConversationScrollButton`.
+*
+* @example
+* ```tsx
+* <AiConversation ref={scrollRef}>
+*   <AiConversationContent>
+*     {messages.map(m => <AiMessage key={m.id} from={m.role}>...</AiMessage>)}
+*   </AiConversationContent>
+*   <AiConversationScrollButton scrollRef={scrollRef} />
+* </AiConversation>
+* ```
+*/
+var AiConversation = forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("relative flex-1 overflow-y-auto", className),
+		role: "log",
+		"aria-live": "polite",
+		"aria-label": "Conversation",
+		...props,
+		children
+	});
+});
+AiConversation.displayName = "AiConversation";
+/**
+* Inner content wrapper with padding. Place message components inside here.
+*/
+function AiConversationContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-0 overscroll-y-none p-4", className),
+		...props,
+		children
+	});
+}
+/**
+* Floating "scroll to bottom" button. Appears when the user has scrolled up
+* more than `threshold` pixels from the bottom.
+*/
+function AiConversationScrollButton({ scrollRef, threshold = 100, className, onClick, ...props }) {
+	const [show, setShow] = useState(false);
+	useEffect(() => {
+		const el = scrollRef?.current;
+		if (!el) return;
+		const check = () => {
+			setShow(el.scrollHeight - el.scrollTop - el.clientHeight > threshold);
+		};
+		check();
+		el.addEventListener("scroll", check, { passive: true });
+		return () => el.removeEventListener("scroll", check);
+	}, [scrollRef, threshold]);
+	const handleClick = useCallback((e) => {
+		scrollRef?.current?.scrollTo({
+			top: scrollRef.current.scrollHeight,
+			behavior: "smooth"
+		});
+		onClick?.(e);
+	}, [scrollRef, onClick]);
+	if (scrollRef && !show) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Scroll to bottom",
+		className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-md", className),
+		onClick: handleClick,
+		size: "sm",
+		variant: "secondary",
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+	});
+}
+/**
+* `useConversationVirtualizer` — virtualizes a conversation list with
+* dynamic item heights and automatic stick-to-bottom behavior.
+*
+* Built on `@tanstack/react-virtual`. Items are measured dynamically via
+* `ResizeObserver`, so tool calls expanding, subagents collapsing, and
+* streaming text growing all work correctly.
+*
+* **Stick-to-bottom**: When the user is scrolled to (or near) the bottom,
+* new items and item resizes automatically keep the viewport pinned to the
+* bottom. When the user scrolls up, stick-to-bottom disengages until they
+* scroll back down.
+*
+* @example
+* ```tsx
+* const { virtualItems, totalSize, measureRef, isAtBottom, scrollToBottom } =
+*   useConversationVirtualizer({ scrollRef, items });
+*
+* return (
+*   <AiConversation ref={scrollRef}>
+*     <div style={{ height: totalSize, position: "relative" }}>
+*       {virtualItems.map((vi) => {
+*         const item = items[vi.index];
+*         return (
+*           <div key={item.key} ref={measureRef} data-index={vi.index}
+*             style={{ position: "absolute", top: vi.start, width: "100%" }}>
+*             {item.render()}
+*           </div>
+*         );
+*       })}
+*     </div>
+*     {!isAtBottom && <button onClick={() => scrollToBottom()}>↓</button>}
+*   </AiConversation>
+* );
+* ```
+*/
+function useConversationVirtualizer({ scrollRef, items, estimateSize = 80, overscan = 8, stickThreshold = 40 }) {
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const isAtBottomRef = useRef(true);
+	const prevCountRef = useRef(items.length);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const check = () => {
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= stickThreshold;
+			isAtBottomRef.current = atBottom;
+			setIsAtBottom(atBottom);
+		};
+		check();
+		el.addEventListener("scroll", check, { passive: true });
+		return () => el.removeEventListener("scroll", check);
+	}, [scrollRef, stickThreshold]);
+	const prevTotalSizeRef = useRef(0);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => estimateSize,
+		overscan,
+		getItemKey: (index) => items[index]?.key ?? index
+	});
+	virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => isAtBottomRef.current;
+	const virtualItems = virtualizer.getVirtualItems();
+	const totalSize = virtualizer.getTotalSize();
+	useEffect(() => {
+		const count = items.length;
+		if (count > prevCountRef.current && isAtBottomRef.current) requestAnimationFrame(() => {
+			virtualizer.scrollToIndex(count - 1, {
+				align: "end",
+				behavior: "smooth"
+			});
+		});
+		prevCountRef.current = count;
+	}, [items.length, virtualizer]);
+	useEffect(() => {
+		const prev = prevTotalSizeRef.current;
+		prevTotalSizeRef.current = totalSize;
+		if (!isAtBottomRef.current || totalSize <= prev) return;
+		const el = scrollRef.current;
+		if (!el) return;
+		const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+		if (dist > 1 && dist < 300) el.scrollTop = el.scrollHeight - el.clientHeight;
+	}, [totalSize, scrollRef]);
+	return {
+		virtualizer,
+		virtualItems,
+		totalSize,
+		isAtBottom,
+		scrollToBottom: useCallback((behavior = "smooth") => {
+			if (items.length === 0) return;
+			virtualizer.scrollToIndex(items.length - 1, {
+				align: "end",
+				behavior
+			});
+		}, [virtualizer, items.length]),
+		measureRef: useCallback((node) => {
+			if (node) virtualizer.measureElement(node);
+		}, [virtualizer])
+	};
+}
+//#endregion
+export { SF_AI_CONVERSATION_VARIANTS as a, SF_AI_CONVERSATION_DEFAULT_VARIANTS as i, AiConversationContent as n, useConversationVirtualizer as o, AiConversationScrollButton as r, AiConversation as t };
+
+//# sourceMappingURL=ai-conversation-DYtExcrw.js.map

package/dist/ai-conversation-DYtExcrw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-conversation-DYtExcrw.js","names":[],"sources":["../src/components/ai-conversation/ai-conversation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ArrowDownIcon } from \"@phosphor-icons/react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type { Virtualizer, VirtualItem } from \"@tanstack/react-virtual\";\nimport type { ComponentProps, ReactNode, RefObject } from \"react\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_CONVERSATION_VARIANTS = {} as const;\nexport const SF_AI_CONVERSATION_DEFAULT_VARIANTS = {} as const;\n\n// ─── AiConversation ──────────────────────────────────────────────────────────\n\nexport type AiConversationProps = ComponentProps<\"div\">;\n\n/**\n * Outer scroll container for a conversation. Sticks to the bottom as new\n * messages are added. Pair with `AiConversationContent` and optionally\n * `AiConversationScrollButton`.\n *\n * @example\n * ```tsx\n * <AiConversation ref={scrollRef}>\n *   <AiConversationContent>\n *     {messages.map(m => <AiMessage key={m.id} from={m.role}>...</AiMessage>)}\n *   </AiConversationContent>\n *   <AiConversationScrollButton scrollRef={scrollRef} />\n * </AiConversation>\n * ```\n */\nexport const AiConversation = forwardRef<HTMLDivElement, AiConversationProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative flex-1 overflow-y-auto\", className)}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-label=\"Conversation\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAiConversation.displayName = \"AiConversation\";\n\n// ─── AiConversationContent ───────────────────────────────────────────────────\n\nexport type AiConversationContentProps = ComponentProps<\"div\">;\n\n/**\n * Inner content wrapper with padding. Place message components inside here.\n */\nexport function AiConversationContent({\n  className,\n  children,\n  ...props\n}: AiConversationContentProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-0 overscroll-y-none p-4\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── AiConversationScrollButton ──────────────────────────────────────────────\n\nexport type AiConversationScrollButtonProps = ComponentProps<typeof Button> & {\n  /**\n   * Ref to the scroll container (the `AiConversation` element).\n   * When omitted, the button is always visible.\n   */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Scroll threshold in pixels from bottom to show the button. @default 100 */\n  threshold?: number;\n};\n\n/**\n * Floating \"scroll to bottom\" button. Appears when the user has scrolled up\n * more than `threshold` pixels from the bottom.\n */\nexport function AiConversationScrollButton({\n  scrollRef,\n  threshold = 100,\n  className,\n  onClick,\n  ...props\n}: AiConversationScrollButtonProps) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const el = scrollRef?.current;\n    if (!el) return;\n\n    const check = () => {\n      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;\n      setShow(distFromBottom > threshold);\n    };\n\n    check();\n    el.addEventListener(\"scroll\", check, { passive: true });\n    return () => el.removeEventListener(\"scroll\", check);\n  }, [scrollRef, threshold]);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      scrollRef?.current?.scrollTo({\n        top: scrollRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n      onClick?.(e);\n    },\n    [scrollRef, onClick]\n  );\n\n  if (scrollRef && !show) return null;\n\n  return (\n    <Button\n      aria-label=\"Scroll to bottom\"\n      className={cn(\n        \"absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-md\",\n        className\n      )}\n      onClick={handleClick}\n      size=\"sm\"\n      variant=\"secondary\"\n      {...props}\n    >\n      <ArrowDownIcon className=\"size-4\" />\n    </Button>\n  );\n}\n\n// ─── Virtualized Conversation ────────────────────────────────────────────────\n\n/** A single item in the virtualized conversation list. */\nexport interface ConversationItem {\n  /** Unique key for this item. */\n  key: string;\n  /**\n   * Render the item content. The virtualizer handles measurement and\n   * positioning on the wrapper — just return the content.\n   */\n  render: () => ReactNode;\n}\n\nexport interface UseConversationVirtualizerOptions {\n  /** Ref to the scroll container element. */\n  scrollRef: RefObject<HTMLElement | null>;\n  /** The conversation items to virtualize. */\n  items: ConversationItem[];\n  /**\n   * Estimated height of a single item in pixels.\n   * Used before measurement. Doesn't need to be exact.\n   * @default 80\n   */\n  estimateSize?: number;\n  /**\n   * Number of items to render beyond the visible area.\n   * @default 8\n   */\n  overscan?: number;\n  /**\n   * Pixel distance from bottom to consider \"at bottom\" for stick-to-bottom.\n   * @default 40\n   */\n  stickThreshold?: number;\n}\n\nexport interface UseConversationVirtualizerReturn {\n  /** The TanStack virtualizer instance. */\n  virtualizer: Virtualizer<HTMLElement, Element>;\n  /** The virtual items to render. */\n  virtualItems: VirtualItem[];\n  /** Total measured/estimated height of all items. */\n  totalSize: number;\n  /** Whether the user is currently at the bottom of the conversation. */\n  isAtBottom: boolean;\n  /** Smoothly scroll to the bottom. */\n  scrollToBottom: (behavior?: ScrollBehavior) => void;\n  /** Get the measurement ref for a virtual item by index. */\n  measureRef: (node: HTMLElement | null) => void;\n}\n\n/**\n * `useConversationVirtualizer` — virtualizes a conversation list with\n * dynamic item heights and automatic stick-to-bottom behavior.\n *\n * Built on `@tanstack/react-virtual`. Items are measured dynamically via\n * `ResizeObserver`, so tool calls expanding, subagents collapsing, and\n * streaming text growing all work correctly.\n *\n * **Stick-to-bottom**: When the user is scrolled to (or near) the bottom,\n * new items and item resizes automatically keep the viewport pinned to the\n * bottom. When the user scrolls up, stick-to-bottom disengages until they\n * scroll back down.\n *\n * @example\n * ```tsx\n * const { virtualItems, totalSize, measureRef, isAtBottom, scrollToBottom } =\n *   useConversationVirtualizer({ scrollRef, items });\n *\n * return (\n *   <AiConversation ref={scrollRef}>\n *     <div style={{ height: totalSize, position: \"relative\" }}>\n *       {virtualItems.map((vi) => {\n *         const item = items[vi.index];\n *         return (\n *           <div key={item.key} ref={measureRef} data-index={vi.index}\n *             style={{ position: \"absolute\", top: vi.start, width: \"100%\" }}>\n *             {item.render()}\n *           </div>\n *         );\n *       })}\n *     </div>\n *     {!isAtBottom && <button onClick={() => scrollToBottom()}>↓</button>}\n *   </AiConversation>\n * );\n * ```\n */\nexport function useConversationVirtualizer({\n  scrollRef,\n  items,\n  estimateSize = 80,\n  overscan = 8,\n  stickThreshold = 40,\n}: UseConversationVirtualizerOptions): UseConversationVirtualizerReturn {\n  const [isAtBottom, setIsAtBottom] = useState(true);\n  const isAtBottomRef = useRef(true);\n  const prevCountRef = useRef(items.length);\n\n  // Track whether user is at the bottom\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const check = () => {\n      const dist = el.scrollHeight - el.scrollTop - el.clientHeight;\n      const atBottom = dist <= stickThreshold;\n      isAtBottomRef.current = atBottom;\n      setIsAtBottom(atBottom);\n    };\n\n    check();\n    el.addEventListener(\"scroll\", check, { passive: true });\n    return () => el.removeEventListener(\"scroll\", check);\n  }, [scrollRef, stickThreshold]);\n\n  // Track the previous totalSize so we can detect growth from item resizes\n  const prevTotalSizeRef = useRef(0);\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => estimateSize,\n    overscan,\n    getItemKey: (index) => items[index]?.key ?? index,\n  });\n\n  // When items resize (streaming text, collapsible expand) and we're at\n  // bottom, adjust scroll so the bottom stays pinned.\n  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () =>\n    isAtBottomRef.current;\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n\n  // When new items are added and we're at bottom, scroll to the end\n  useEffect(() => {\n    const count = items.length;\n    if (count > prevCountRef.current && isAtBottomRef.current) {\n      requestAnimationFrame(() => {\n        virtualizer.scrollToIndex(count - 1, {\n          align: \"end\",\n          behavior: \"smooth\",\n        });\n      });\n    }\n    prevCountRef.current = count;\n  }, [items.length, virtualizer]);\n\n  // When totalSize grows (item content expanded, streaming text grew)\n  // and we're stuck to bottom, smoothly follow by scrolling down.\n  // This complements shouldAdjustScrollPositionOnItemSizeChange which\n  // handles the instantaneous adjustment — this handles the smooth follow.\n  useEffect(() => {\n    const prev = prevTotalSizeRef.current;\n    prevTotalSizeRef.current = totalSize;\n\n    if (!isAtBottomRef.current || totalSize <= prev) return;\n\n    const el = scrollRef.current;\n    if (!el) return;\n\n    // Only nudge if we're slightly off — the shouldAdjust callback handles\n    // most cases, but measurement batching can leave a small gap.\n    const dist = el.scrollHeight - el.scrollTop - el.clientHeight;\n    if (dist > 1 && dist < 300) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [totalSize, scrollRef]);\n\n  const scrollToBottom = useCallback(\n    (behavior: ScrollBehavior = \"smooth\") => {\n      if (items.length === 0) return;\n      virtualizer.scrollToIndex(items.length - 1, { align: \"end\", behavior });\n    },\n    [virtualizer, items.length]\n  );\n\n  const measureRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) virtualizer.measureElement(node);\n    },\n    [virtualizer]\n  );\n\n  return {\n    virtualizer,\n    virtualItems,\n    totalSize,\n    isAtBottom,\n    scrollToBottom,\n    measureRef,\n  };\n}\n"],"mappings":"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"}

package/dist/ai-info-banner-BpzauUAY.js

@@ -0,0 +1,76 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowsClockwiseIcon, InfoIcon, WarningCircleIcon } from "@phosphor-icons/react";
+//#region src/components/ai-info-banner/ai-info-banner.tsx
+var SF_AI_INFO_BANNER_VARIANTS = { level: {
+	info: {
+		classes: "",
+		description: "Informational notice"
+	},
+	error: {
+		classes: "",
+		description: "Error notice"
+	},
+	change: {
+		classes: "",
+		description: "State change notice (model/mode switch)"
+	}
+} };
+var SF_AI_INFO_BANNER_DEFAULT_VARIANTS = { level: "info" };
+var LEVEL_CONFIG = {
+	info: {
+		icon: InfoIcon,
+		iconClassName: "text-sf-info",
+		borderClassName: "border-sf-info/20"
+	},
+	error: {
+		icon: WarningCircleIcon,
+		iconClassName: "text-sf-danger",
+		borderClassName: "border-sf-danger/20"
+	},
+	change: {
+		icon: ArrowsClockwiseIcon,
+		iconClassName: "text-sf-subtle",
+		borderClassName: "border-sf-line"
+	}
+};
+/**
+* Inline conversation banner for system notices. Renders as a compact,
+* horizontally centered divider-like notice rather than a chat bubble.
+*
+* Maps to harness events: `error`, `info`, `mode_changed`, `model_changed`.
+*
+* @example
+* ```tsx
+* <AiInfoBanner level="error">
+*   Connection lost. Retrying in 3s…
+* </AiInfoBanner>
+*
+* <AiInfoBanner level="change">
+*   Switched to claude-opus-4-6
+* </AiInfoBanner>
+*
+* <AiInfoBanner level="info">
+*   Follow-up queued — will send after current response
+* </AiInfoBanner>
+* ```
+*/
+function AiInfoBanner({ level = "info", icon, children, className, ...props }) {
+	const config = LEVEL_CONFIG[level];
+	const IconComponent = icon ?? config.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-center gap-2 border-y px-4 py-1.5", config.borderClassName, className),
+		role: level === "error" ? "alert" : "status",
+		...props,
+		children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("size-3.5 shrink-0", config.iconClassName) }), /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-sf-subtle",
+			children
+		})]
+	});
+}
+AiInfoBanner.displayName = "AiInfoBanner";
+//#endregion
+export { SF_AI_INFO_BANNER_DEFAULT_VARIANTS as n, SF_AI_INFO_BANNER_VARIANTS as r, AiInfoBanner as t };
+
+//# sourceMappingURL=ai-info-banner-BpzauUAY.js.map

package/dist/ai-info-banner-BpzauUAY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-info-banner-BpzauUAY.js","names":[],"sources":["../src/components/ai-info-banner/ai-info-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  InfoIcon,\n  WarningCircleIcon,\n  ArrowsClockwiseIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_INFO_BANNER_VARIANTS = {\n  level: {\n    info: { classes: \"\", description: \"Informational notice\" },\n    error: { classes: \"\", description: \"Error notice\" },\n    change: {\n      classes: \"\",\n      description: \"State change notice (model/mode switch)\",\n    },\n  },\n} as const;\n\nexport const SF_AI_INFO_BANNER_DEFAULT_VARIANTS = {\n  level: \"info\",\n} as const;\n\nexport type SFAiInfoBannerLevel = keyof typeof SF_AI_INFO_BANNER_VARIANTS.level;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiInfoBannerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Banner level controls icon and color treatment. */\n  level?: SFAiInfoBannerLevel;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Content to display. */\n  children: ReactNode;\n};\n\n// ─── Level config ─────────────────────────────────────────────────────────────\n\nconst LEVEL_CONFIG: Record<\n  SFAiInfoBannerLevel,\n  { icon: ElementType; iconClassName: string; borderClassName: string }\n> = {\n  info: {\n    icon: InfoIcon,\n    iconClassName: \"text-sf-info\",\n    borderClassName: \"border-sf-info/20\",\n  },\n  error: {\n    icon: WarningCircleIcon,\n    iconClassName: \"text-sf-danger\",\n    borderClassName: \"border-sf-danger/20\",\n  },\n  change: {\n    icon: ArrowsClockwiseIcon,\n    iconClassName: \"text-sf-subtle\",\n    borderClassName: \"border-sf-line\",\n  },\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Inline conversation banner for system notices. Renders as a compact,\n * horizontally centered divider-like notice rather than a chat bubble.\n *\n * Maps to harness events: `error`, `info`, `mode_changed`, `model_changed`.\n *\n * @example\n * ```tsx\n * <AiInfoBanner level=\"error\">\n *   Connection lost. Retrying in 3s…\n * </AiInfoBanner>\n *\n * <AiInfoBanner level=\"change\">\n *   Switched to claude-opus-4-6\n * </AiInfoBanner>\n *\n * <AiInfoBanner level=\"info\">\n *   Follow-up queued — will send after current response\n * </AiInfoBanner>\n * ```\n */\nexport function AiInfoBanner({\n  level = \"info\",\n  icon,\n  children,\n  className,\n  ...props\n}: AiInfoBannerProps) {\n  const config = LEVEL_CONFIG[level];\n  const IconComponent = icon ?? config.icon;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-2 border-y px-4 py-1.5\",\n        config.borderClassName,\n        className\n      )}\n      role={level === \"error\" ? \"alert\" : \"status\"}\n      {...props}\n    >\n      <IconComponent\n        className={cn(\"size-3.5 shrink-0\", config.iconClassName)}\n      />\n      <span className=\"text-xs text-sf-subtle\">{children}</span>\n    </div>\n  );\n}\n\nAiInfoBanner.displayName = \"AiInfoBanner\";\n"],"mappings":";;;;;AAaA,IAAa,6BAA6B,EACxC,OAAO;CACL,MAAM;EAAE,SAAS;EAAI,aAAa;EAAwB;CAC1D,OAAO;EAAE,SAAS;EAAI,aAAa;EAAgB;CACnD,QAAQ;EACN,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,qCAAqC,EAChD,OAAO,QACR;AAiBD,IAAM,eAGF;CACF,MAAM;EACJ,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACD,OAAO;EACL,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACD,QAAQ;EACN,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACF;;;;;;;;;;;;;;;;;;;;;;AAyBD,SAAgB,aAAa,EAC3B,QAAQ,QACR,MACA,UACA,WACA,GAAG,SACiB;CACpB,MAAM,SAAS,aAAa;CAC5B,MAAM,gBAAgB,QAAQ,OAAO;AAErC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+DACA,OAAO,iBACP,UACD;EACD,MAAM,UAAU,UAAU,UAAU;EACpC,GAAI;YAPN,CASE,oBAAC,eAAD,EACE,WAAW,GAAG,qBAAqB,OAAO,cAAc,EACxD,CAAA,EACF,oBAAC,QAAD;GAAM,WAAU;GAA0B;GAAgB,CAAA,CACtD;;;AAIV,aAAa,cAAc"}

package/dist/ai-loader-Cr3eQkNS.js

@@ -0,0 +1,134 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-loader/ai-loader.tsx
+var SF_AI_LOADER_VARIANTS = { size: {
+	sm: {
+		classes: "size-3",
+		description: "Small — 12px"
+	},
+	base: {
+		classes: "size-4",
+		description: "Default — 16px"
+	},
+	lg: {
+		classes: "size-5",
+		description: "Large — 20px"
+	}
+} };
+var SF_AI_LOADER_DEFAULT_VARIANTS = { size: "base" };
+function LoaderIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className,
+		fill: "none",
+		viewBox: "0 0 16 16",
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "Loading" }),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: "url(#ai-loader-clip)",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						d: "M8 0V4",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M8 16V12",
+						opacity: "0.5",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M3.29773 1.52783L5.64887 4.7639",
+						opacity: "0.9",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12.7023 1.52783L10.3511 4.7639",
+						opacity: "0.1",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12.7023 14.472L10.3511 11.236",
+						opacity: "0.4",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M3.29773 14.472L5.64887 11.236",
+						opacity: "0.6",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M15.6085 5.52783L11.8043 6.7639",
+						opacity: "0.2",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M0.391602 10.472L4.19583 9.23598",
+						opacity: "0.7",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M15.6085 10.4722L11.8043 9.2361",
+						opacity: "0.3",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M0.391602 5.52783L4.19583 6.7639",
+						opacity: "0.8",
+						stroke: "currentColor",
+						strokeLinejoin: "round",
+						strokeWidth: "1.5"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: "ai-loader-clip",
+				children: /* @__PURE__ */ jsx("rect", {
+					fill: "white",
+					height: "16",
+					width: "16"
+				})
+			}) })
+		]
+	});
+}
+/**
+* Spinning radial loader for AI streaming states.
+*
+* @example
+* ```tsx
+* <AiLoader />
+* <AiLoader size="sm" className="text-sf-subtle" />
+* ```
+*/
+function AiLoader({ size = SF_AI_LOADER_DEFAULT_VARIANTS.size, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Loading",
+		className: cn("inline-flex animate-spin items-center justify-center", className),
+		role: "status",
+		...props,
+		children: /* @__PURE__ */ jsx(LoaderIcon, { className: SF_AI_LOADER_VARIANTS.size[size].classes })
+	});
+}
+//#endregion
+export { SF_AI_LOADER_DEFAULT_VARIANTS as n, SF_AI_LOADER_VARIANTS as r, AiLoader as t };
+
+//# sourceMappingURL=ai-loader-Cr3eQkNS.js.map

package/dist/ai-loader-Cr3eQkNS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-loader-Cr3eQkNS.js","names":[],"sources":["../src/components/ai-loader/ai-loader.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_LOADER_VARIANTS = {\n  size: {\n    sm: { classes: \"size-3\", description: \"Small — 12px\" },\n    base: { classes: \"size-4\", description: \"Default — 16px\" },\n    lg: { classes: \"size-5\", description: \"Large — 20px\" },\n  },\n} as const;\n\nexport const SF_AI_LOADER_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type SFAiLoaderSize = keyof typeof SF_AI_LOADER_VARIANTS.size;\n\nexport interface SFAiLoaderVariantsProps {\n  /**\n   * Icon size.\n   * - `\"sm\"` — 12px\n   * - `\"base\"` — 16px (default)\n   * - `\"lg\"` — 20px\n   * @default \"base\"\n   */\n  size?: SFAiLoaderSize;\n}\n\n// ─── SVG icon ────────────────────────────────────────────────────────────────\n\nfunction LoaderIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n    >\n      <title>Loading</title>\n      <g clipPath=\"url(#ai-loader-clip)\">\n        <path\n          d=\"M8 0V4\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M8 16V12\"\n          opacity=\"0.5\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M3.29773 1.52783L5.64887 4.7639\"\n          opacity=\"0.9\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M12.7023 1.52783L10.3511 4.7639\"\n          opacity=\"0.1\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M12.7023 14.472L10.3511 11.236\"\n          opacity=\"0.4\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M3.29773 14.472L5.64887 11.236\"\n          opacity=\"0.6\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M15.6085 5.52783L11.8043 6.7639\"\n          opacity=\"0.2\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M0.391602 10.472L4.19583 9.23598\"\n          opacity=\"0.7\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M15.6085 10.4722L11.8043 9.2361\"\n          opacity=\"0.3\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M0.391602 5.52783L4.19583 6.7639\"\n          opacity=\"0.8\"\n          stroke=\"currentColor\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"ai-loader-clip\">\n          <rect fill=\"white\" height=\"16\" width=\"16\" />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport interface AiLoaderProps\n  extends SFAiLoaderVariantsProps, HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Spinning radial loader for AI streaming states.\n *\n * @example\n * ```tsx\n * <AiLoader />\n * <AiLoader size=\"sm\" className=\"text-sf-subtle\" />\n * ```\n */\nexport function AiLoader({\n  size = SF_AI_LOADER_DEFAULT_VARIANTS.size,\n  className,\n  ...props\n}: AiLoaderProps) {\n  return (\n    <div\n      aria-label=\"Loading\"\n      className={cn(\n        \"inline-flex animate-spin items-center justify-center\",\n        className\n      )}\n      role=\"status\"\n      {...props}\n    >\n      <LoaderIcon className={SF_AI_LOADER_VARIANTS.size[size].classes} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,wBAAwB,EACnC,MAAM;CACJ,IAAI;EAAE,SAAS;EAAU,aAAa;EAAgB;CACtD,MAAM;EAAE,SAAS;EAAU,aAAa;EAAkB;CAC1D,IAAI;EAAE,SAAS;EAAU,aAAa;EAAgB;CACvD,EACF;AAED,IAAa,gCAAgC,EAC3C,MAAM,QACP;AAiBD,SAAS,WAAW,EAAE,aAAqC;AACzD,QACE,qBAAC,OAAD;EACE,eAAY;EACD;EACX,MAAK;EACL,SAAQ;YAJV;GAME,oBAAC,SAAD,EAAA,UAAO,WAAe,CAAA;GACtB,qBAAC,KAAD;IAAG,UAAS;cAAZ;KACE,oBAAC,QAAD;MACE,GAAE;MACF,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACF,oBAAC,QAAD;MACE,GAAE;MACF,SAAQ;MACR,QAAO;MACP,gBAAe;MACf,aAAY;MACZ,CAAA;KACA;;GACJ,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;IAAU,IAAG;cACX,oBAAC,QAAD;KAAM,MAAK;KAAQ,QAAO;KAAK,OAAM;KAAO,CAAA;IACnC,CAAA,EACN,CAAA;GACH;;;;;;;;;;;;AAkBV,SAAgB,SAAS,EACvB,OAAO,8BAA8B,MACrC,WACA,GAAG,SACa;AAChB,QACE,oBAAC,OAAD;EACE,cAAW;EACX,WAAW,GACT,wDACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,YAAD,EAAY,WAAW,sBAAsB,KAAK,MAAM,SAAW,CAAA;EAC/D,CAAA"}