@signalflare-ai/ui 1.0.0 → 1.2.0

package/scripts/theme-generator/config.ts

@@ -6,7 +6,6 @@
  * - theme-sf.css (base theme — neutral, WCAG-tuned)
  * - theme-fedramp.css (fedramp overrides)
  * - theme-minimal.css (minimal overrides)
- * - theme-blue-tint.css (prior sf look — blue-tinted dark surfaces)
  *
  * Token naming:
  * - Key = current token name used in codebase
@@ -32,10 +31,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.145 0 0)",
           dark: "oklch(0.985 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.145 0 0)",
-          dark: "oklch(0.985 0 0)",
-        },
       },
     },
     "sf-inverse": {
@@ -58,10 +53,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.50 0 0)",
           dark: "oklch(0.55 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.556 0 0)",
-          dark: "oklch(0.65 0 0)",
-        },
       },
     },
     "sf-subtle": {
@@ -75,10 +66,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0 0)",
           dark: "oklch(0.45 0 0)",
         },
-        blueTint: {
-          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
-        },
       },
     },
     "sf-inactive": {
@@ -92,10 +79,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.35 0 0)",
         },
-        blueTint: {
-          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
-        },
       },
     },
     "sf-brand": {
@@ -120,8 +103,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
-          dark: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+          light: "#99ffe4",
+          dark: "#99ffe4",
         },
       },
     },
@@ -136,10 +119,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
-        blueTint: {
-          light: "oklch(0.577 0.245 27.325)",
-          dark: "oklch(0.55 0.18 25)",
-        },
       },
     },
     "sf-warning": {
@@ -153,10 +132,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
-        blueTint: {
-          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
-          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
-        },
       },
     },
   },
@@ -172,7 +147,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -180,11 +155,7 @@ export const THEME_CONFIG: ThemeConfig = {
         },
         minimal: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-50, oklch(0.985 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.14 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -193,7 +164,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.97 0 0)",
-          dark: "oklch(0.14 0 0)",
+          dark: "oklch(0.1913 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -201,11 +172,7 @@ export const THEME_CONFIG: ThemeConfig = {
         },
         minimal: {
           light: "oklch(0.97 0 0)",
-          dark: "oklch(0.14 0 0)",
-        },
-        blueTint: {
-          light: "oklch(1 0 0)",
-          dark: "oklch(0.21 0.005 252)",
+          dark: "oklch(0.1913 0 0)",
         },
       },
     },
@@ -214,15 +181,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(1 0 0)",
-          dark: "oklch(0.22 0 0)",
+          dark: "oklch(0.2002 0 0)",
         },
         minimal: {
           light: "oklch(1 0 0)",
-          dark: "oklch(0.22 0 0)",
-        },
-        blueTint: {
-          light: "oklch(0.99 0 0)",
-          dark: "oklch(0.24 0.005 252)",
+          dark: "oklch(0.2002 0 0)",
         },
       },
     },
@@ -231,15 +194,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.92 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         minimal: {
           light: "oklch(0.92 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-250, oklch(0.9 0 0))",
-          dark: "var(--color-neutral-750, oklch(0.31 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -248,15 +207,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.93 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         minimal: {
           light: "oklch(0.93 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-50, oklch(98.5% 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.10 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -271,10 +226,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.35 0 0)",
           dark: "oklch(0.75 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.205 0 0)",
-          dark: "oklch(0.55 0.01 40)",
-        },
       },
     },
     "sf-control": {
@@ -282,15 +233,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.17 0 0)",
+          dark: "oklch(0.2264 0 0)",
         },
         minimal: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.17 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-white, #fff)",
-          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+          dark: "oklch(0.2264 0 0)",
         },
       },
     },
@@ -299,15 +246,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.94 0 0)",
-          dark: "oklch(0.19 0 0)",
+          dark: "oklch(0.2562 0 0)",
         },
         minimal: {
           light: "oklch(0.94 0 0)",
-          dark: "oklch(0.19 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-150, oklch(0.96 0 0))",
-          dark: "var(--color-neutral-850, oklch(0.23 0 0))",
+          dark: "oklch(0.2562 0 0)",
         },
       },
     },
@@ -318,7 +261,7 @@ export const THEME_CONFIG: ThemeConfig = {
           /* Interactive boundary (form controls, checkbox/radio idle).
              More visible than sf-line so controls read as actionable. */
           light: "oklch(0.80 0 0)",
-          dark: "oklch(0.38 0 0)",
+          dark: "oklch(0.2768 0 0)",
         },
       },
     },
@@ -327,15 +270,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.91 0 0)",
-          dark: "oklch(0.27 0 0)",
+          dark: "oklch(0.2562 0 0)",
         },
         minimal: {
           light: "oklch(0.91 0 0)",
-          dark: "oklch(0.27 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          dark: "oklch(0.2562 0 0)",
         },
       },
     },
@@ -344,15 +283,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.88 0 0)",
-          dark: "oklch(0.31 0 0)",
+          dark: "oklch(0.2768 0 0)",
         },
         minimal: {
           light: "oklch(0.88 0 0)",
-          dark: "oklch(0.31 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+          dark: "oklch(0.2768 0 0)",
         },
       },
     },
@@ -367,10 +302,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
-        blueTint: {
-          light: "oklch(0.5772 0.2324 260)",
-          dark: "oklch(0.5772 0.2324 260)",
-        },
       },
     },
     "sf-brand-hover": {
@@ -384,29 +315,21 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.48 0.05 264)",
           dark: "oklch(0.48 0.05 264)",
         },
-        blueTint: {
-          light: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-        },
       },
     },
     "sf-line": {
       newName: "",
       theme: {
         sf: {
-          /* Flat/minimal aesthetic: near-invisible by design. Decorative only —
-             contrast carried by text + sf-ring (focus) + surface elevation. */
+          /* Vesper-inspired dark boundary; subtle but visible against the default
+             dark surface ramp. */
           light: "oklch(0.85 0 0 / 0.5)",
-          dark: "oklch(0.25 0 0 / 0.5)",
+          dark: "#282828",
         },
         minimal: {
           light: "oklch(0.85 0 0 / 0.5)",
           dark: "oklch(0.25 0 0 / 0.5)",
         },
-        blueTint: {
-          light: "oklch(0.922 0 0)",
-          dark: "oklch(0.3 0.015 250)",
-        },
       },
     },
     "sf-ring": {
@@ -424,10 +347,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.45 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.708 0 0)",
-          dark: "oklch(0.465 0.015 250)",
-        },
       },
     },
     "sf-tip-shadow": {
@@ -441,10 +360,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "transparent",
           dark: "transparent",
         },
-        blueTint: {
-          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
-          dark: "transparent",
-        },
       },
     },
     "sf-tip-stroke": {
@@ -452,16 +367,12 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "transparent",
-          dark: "transparent",
+          dark: "#282828",
         },
         minimal: {
           light: "transparent",
           dark: "transparent",
         },
-        blueTint: {
-          light: "transparent",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
-        },
       },
     },
     "sf-info": {
@@ -475,10 +386,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
-        blueTint: {
-          light: "var(--color-blue-500, oklch(62.3% 0.214 259.815))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-        },
       },
     },
     "sf-info-tint": {
@@ -492,10 +399,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.01 260)",
           dark: "oklch(0.20 0.02 260)",
         },
-        blueTint: {
-          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
-          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
-        },
       },
     },
     "sf-warning": {
@@ -509,10 +412,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
-        blueTint: {
-          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
-          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
-        },
       },
     },
     "sf-warning-tint": {
@@ -526,10 +425,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.02 60)",
           dark: "oklch(0.22 0.03 60)",
         },
-        blueTint: {
-          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
-          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
-        },
       },
     },
     "sf-danger": {
@@ -543,10 +438,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
-        blueTint: {
-          light: "oklch(0.577 0.245 27.325)",
-          dark: "oklch(0.55 0.18 25)",
-        },
       },
     },
     "sf-danger-tint": {
@@ -560,10 +451,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.02 25)",
           dark: "oklch(0.20 0.04 25)",
         },
-        blueTint: {
-          light: "var(--color-red-300, oklch(80.8% 0.114 19.571))",
-          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
-        },
       },
     },
     "sf-success": {
@@ -572,8 +459,8 @@ export const THEME_CONFIG: ThemeConfig = {
         "Success signal color (previously hardcoded in the shadcn bridge)",
       theme: {
         sf: {
-          light: "oklch(0.723 0.219 149.579)",
-          dark: "oklch(0.723 0.219 149.579)",
+          light: "#99ffe4",
+          dark: "#99ffe4",
         },
       },
     },
@@ -773,7 +660,6 @@ export const AVAILABLE_THEMES = [
   "sf",
   "fedramp",
   "minimal",
-  "blueTint",
 ] as const;
 export type AvailableTheme = (typeof AVAILABLE_THEMES)[number];
 

package/scripts/theme-generator/generate-css.ts

@@ -5,7 +5,6 @@
  * Outputs:
  * - theme-sf.css: Base theme with all tokens
  * - theme-fedramp.css: Override layer for fedramp theme
- * - theme-blue-tint.css: Override layer for blue-tint theme
  * - (future themes as needed)
  */
 

package/scripts/theme-generator/index.ts

@@ -52,7 +52,6 @@ Output:
   Generates theme CSS files in src/styles/:
   - theme-sf.css       Base theme with all tokens
   - theme-fedramp.css   FedRAMP theme overrides
-  - theme-blue-tint.css Blue-tint theme overrides
 `);
 }
 

package/dist/ai-conversation-CArP7C8K.js

@@ -1,184 +0,0 @@
-"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-CArP7C8K.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ai-conversation-CArP7C8K.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-uFxHHwBA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-info-banner-uFxHHwBA.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"}