@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/generative-ui/index.d.mts

@@ -0,0 +1,4 @@
+
+import { a as GenerativeUIRenderer, i as GenerativeUIAction, n as DEFAULT_COMPONENT_MAP, o as GenerativeUIRendererProps, r as GenerativeComponentProps, t as ComponentMap } from "../../generative-ui-renderer-D69qYK0D.mjs";
+import { UIElement, UITree, UITreeMetadata } from "@od-oneapp/ai-platform/generative-ui/types";
+export { type ComponentMap, DEFAULT_COMPONENT_MAP, type GenerativeComponentProps, type GenerativeUIAction, GenerativeUIRenderer, type GenerativeUIRendererProps, type UIElement, type UITree, type UITreeMetadata };

package/dist/components-ai-elements/generative-ui/index.mjs

@@ -0,0 +1,4 @@
+'use client';
+import { n as GenerativeUIRenderer, t as DEFAULT_COMPONENT_MAP } from "../../generative-ui-renderer-D0ZgNRZF.mjs";
+
+export { DEFAULT_COMPONENT_MAP, GenerativeUIRenderer };

package/dist/components-ai-elements/image/index.d.mts

@@ -0,0 +1,20 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Experimental_GeneratedImage } from "ai";
+
+//#region src/components/ai-elements/image/image.d.ts
+type ImageProps = Experimental_GeneratedImage & {
+  className?: string;
+  alt: string;
+  src?: string;
+};
+declare const Image: ({
+  base64,
+  uint8Array,
+  mediaType,
+  src: urlSrc,
+  ...props
+}: ImageProps) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Image, ImageProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-elements/image/index.mjs

@@ -0,0 +1,121 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE } from "../../motion-zelaDelJ.mjs";
+import { AI_FOCUS, AI_NESTED_RADIUS } from "../../components-ai-elements-constants.mjs";
+import { useMemo, useState } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/image/image.tsx
+/**
+* @fileoverview Image Component - Premium Harmony V2
+*
+* A component for displaying AI-generated images from base64 or Uint8Array data.
+* Supports automatic conversion between formats and handles both browser and Node.js environments.
+* Enhanced with Premium Harmony V2 motion system for smooth loading transitions.
+*
+* Features:
+* - Premium Harmony V2 spring physics animations
+* - Touch vs desktop responsive behavior
+* - Reduced motion support (respects prefers-reduced-motion)
+* - Semantic color tokens and design system constants
+* - 44px minimum touch target support
+* - Loading state with smooth fade-in animation
+* - Focus-visible ring styles for accessibility
+* - Base64 image support with data URI generation
+* - Uint8Array to base64 conversion
+* - Cross-platform compatibility (browser btoa/Node.js Buffer)
+* - Automatic media type handling
+* - URL source support for Storybook demos
+* - Graceful error handling with null return
+* - Integration with Vercel AI SDK Experimental_GeneratedImage
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/image
+* @component Image
+*
+* @useCases
+* - Display AI-generated images from Vercel AI SDK
+* - Show images from base64-encoded data
+* - Render images from Uint8Array buffers
+* - Preview images in Storybook demos
+* - Gallery displays with smooth loading animations
+* - Accessible image presentation with keyboard navigation
+*
+* @example
+* // From base64 - alt text is required
+* <Image base64={imageBase64} mediaType="image/png" alt="A sunset over mountains with orange and pink clouds" />
+*
+* @example
+* // From Uint8Array
+* <Image uint8Array={imageBuffer} mediaType="image/jpeg" alt="User profile photo showing a person smiling" />
+*
+* @example
+* // From URL (Storybook)
+* <Image src="https://example.com/image.png" alt="Product mockup on white background" />
+*
+* @example
+* // With custom styling and loading state
+* <Image base64={imageBase64} mediaType="image/png" alt="Chart showing quarterly sales growth" className="w-full max-w-2xl" />
+*
+* @example
+* // Decorative image (should be hidden from screen readers)
+* <Image src="decorative.png" alt="" aria-hidden="true" />
+*/
+const Image = ({ base64, uint8Array, mediaType, src: urlSrc, ...props }) => {
+	const prefersReducedMotion = useReducedMotion();
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [hasError, setHasError] = useState(false);
+	let src;
+	if (urlSrc) src = urlSrc;
+	else if (base64) src = `data:${mediaType};base64,${base64}`;
+	else if (uint8Array.length > 0) try {
+		const binary = typeof window !== "undefined" ? Array.from(uint8Array, (byte) => String.fromCodePoint(byte)).join("") : Buffer.from(uint8Array).toString("binary");
+		src = `data:${mediaType};base64,${typeof window !== "undefined" ? btoa(binary) : Buffer.from(binary, "binary").toString("base64")}`;
+	} catch {}
+	const imageVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			scale: .95
+		},
+		visible: {
+			opacity: 1,
+			scale: 1,
+			transition: prefersReducedMotion ? { duration: 0 } : isTouchDevice ? SPRING_TACTILE : SPRING_GENTLE
+		},
+		error: {
+			opacity: .5,
+			scale: .98,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE
+		}
+	}), [prefersReducedMotion, isTouchDevice]);
+	if (!src) return null;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: /* @__PURE__ */ jsx(motion.img, {
+			...props,
+			alt: props.alt,
+			animate: hasError ? "error" : isLoaded ? "visible" : "hidden",
+			className: cn("h-auto max-w-full overflow-hidden", AI_NESTED_RADIUS, AI_FOCUS.ring, isTouchDevice && "min-h-[44px]", props.className),
+			"data-loading": !isLoaded,
+			"data-state": hasError ? "error" : isLoaded ? "loaded" : "loading",
+			initial: "hidden",
+			src,
+			tabIndex: 0,
+			variants: imageVariants,
+			onError: () => {
+				setHasError(true);
+				setIsLoaded(true);
+			},
+			onLoad: () => {
+				setIsLoaded(true);
+				setHasError(false);
+			}
+		})
+	});
+};
+
+//#endregion
+export { Image };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/image/image.tsx"],"sourcesContent":["/**\n * @fileoverview Image Component - Premium Harmony V2\n *\n * A component for displaying AI-generated images from base64 or Uint8Array data.\n * Supports automatic conversion between formats and handles both browser and Node.js environments.\n * Enhanced with Premium Harmony V2 motion system for smooth loading transitions.\n *\n * Features:\n * - Premium Harmony V2 spring physics animations\n * - Touch vs desktop responsive behavior\n * - Reduced motion support (respects prefers-reduced-motion)\n * - Semantic color tokens and design system constants\n * - 44px minimum touch target support\n * - Loading state with smooth fade-in animation\n * - Focus-visible ring styles for accessibility\n * - Base64 image support with data URI generation\n * - Uint8Array to base64 conversion\n * - Cross-platform compatibility (browser btoa/Node.js Buffer)\n * - Automatic media type handling\n * - URL source support for Storybook demos\n * - Graceful error handling with null return\n * - Integration with Vercel AI SDK Experimental_GeneratedImage\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/image\n * @component Image\n *\n * @useCases\n * - Display AI-generated images from Vercel AI SDK\n * - Show images from base64-encoded data\n * - Render images from Uint8Array buffers\n * - Preview images in Storybook demos\n * - Gallery displays with smooth loading animations\n * - Accessible image presentation with keyboard navigation\n *\n * @example\n * // From base64 - alt text is required\n * <Image base64={imageBase64} mediaType=\"image/png\" alt=\"A sunset over mountains with orange and pink clouds\" />\n *\n * @example\n * // From Uint8Array\n * <Image uint8Array={imageBuffer} mediaType=\"image/jpeg\" alt=\"User profile photo showing a person smiling\" />\n *\n * @example\n * // From URL (Storybook)\n * <Image src=\"https://example.com/image.png\" alt=\"Product mockup on white background\" />\n *\n * @example\n * // With custom styling and loading state\n * <Image base64={imageBase64} mediaType=\"image/png\" alt=\"Chart showing quarterly sales growth\" className=\"w-full max-w-2xl\" />\n *\n * @example\n * // Decorative image (should be hidden from screen readers)\n * <Image src=\"decorative.png\" alt=\"\" aria-hidden=\"true\" />\n */\n\n'use client';\n\nimport { useMemo, useState } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport {\n  AI_FOCUS,\n  AI_NESTED_RADIUS,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\nimport type { Experimental_GeneratedImage } from 'ai';\n\nexport type ImageProps = Experimental_GeneratedImage & {\n  className?: string;\n  /**\n   * Alt text for the image. Must be a non-empty string describing the image content.\n   * If the image is purely decorative, also include `aria-hidden=\"true\"`.\n   */\n  alt: string;\n  /** URL for Storybook demos (takes precedence over base64/uint8Array) */\n  src?: string;\n};\n\nexport const Image = ({ base64, uint8Array, mediaType, src: urlSrc, ...props }: ImageProps) => {\n  // Premium Harmony V2: Motion and accessibility hooks\n  const prefersReducedMotion = useReducedMotion();\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Loading state for smooth fade-in animation\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [hasError, setHasError] = useState(false);\n\n  // Process image source\n  let src: string | undefined;\n\n  // URL takes precedence (useful for Storybook demos)\n  if (urlSrc) {\n    src = urlSrc;\n  } else if (base64) {\n    src = `data:${mediaType};base64,${base64}`;\n  } else if (uint8Array.length > 0) {\n    // Convert uint8Array to base64 if base64 is not provided\n    try {\n      const binary =\n        typeof window !== 'undefined'\n          ? Array.from(uint8Array, (byte: number) => String.fromCodePoint(byte)).join('')\n          : Buffer.from(uint8Array).toString('binary');\n      const fallbackBase64 =\n        typeof window !== 'undefined'\n          ? btoa(binary)\n          : Buffer.from(binary, 'binary').toString('base64');\n      src = `data:${mediaType};base64,${fallbackBase64}`;\n    } catch {\n      // swallow conversion errors; src remains undefined\n    }\n  }\n\n  // Premium Harmony V2: Memoized animation variants\n  const imageVariants = useMemo(\n    () => ({\n      hidden: {\n        opacity: 0,\n        scale: 0.95,\n      },\n      visible: {\n        opacity: 1,\n        scale: 1,\n        transition: prefersReducedMotion\n          ? { duration: 0 }\n          : (isTouchDevice\n            ? SPRING_TACTILE\n            : SPRING_GENTLE),\n      },\n      error: {\n        opacity: 0.5,\n        scale: 0.98,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE,\n      },\n    }),\n    [prefersReducedMotion, isTouchDevice],\n  );\n\n  if (!src) {\n    return null;\n  }\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.img\n        {...props}\n        alt={props.alt}\n        animate={hasError ? 'error' : (isLoaded ? 'visible' : 'hidden')}\n        className={cn(\n          'h-auto max-w-full overflow-hidden',\n          AI_NESTED_RADIUS,\n          AI_FOCUS.ring,\n          // Premium Harmony V2: Minimum touch target (44px min-height for touch)\n          isTouchDevice && 'min-h-[44px]',\n          props.className,\n        )}\n        data-loading={!isLoaded}\n        data-state={hasError ? 'error' : (isLoaded ? 'loaded' : 'loading')}\n        initial=\"hidden\"\n        src={src}\n        tabIndex={0}\n        variants={imageVariants}\n        onError={() => {\n          setHasError(true);\n          setIsLoaded(true);\n        }}\n        onLoad={() => {\n          setIsLoaded(true);\n          setHasError(false);\n        }}\n      />\n    </AnimatePresence>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAa,SAAS,EAAE,QAAQ,YAAY,WAAW,KAAK,QAAQ,GAAG,YAAwB;CAE7F,MAAM,uBAAuB,kBAAkB;CAC/C,MAAM,gBAAgB,cAAc,oBAAoB;CAGxD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAG/C,IAAI;AAGJ,KAAI,OACF,OAAM;UACG,OACT,OAAM,QAAQ,UAAU,UAAU;UACzB,WAAW,SAAS,EAE7B,KAAI;EACF,MAAM,SACJ,OAAO,WAAW,cACd,MAAM,KAAK,aAAa,SAAiB,OAAO,cAAc,KAAK,CAAC,CAAC,KAAK,GAAG,GAC7E,OAAO,KAAK,WAAW,CAAC,SAAS,SAAS;AAKhD,QAAM,QAAQ,UAAU,UAHtB,OAAO,WAAW,cACd,KAAK,OAAO,GACZ,OAAO,KAAK,QAAQ,SAAS,CAAC,SAAS,SAAS;SAEhD;CAMV,MAAM,gBAAgB,eACb;EACL,QAAQ;GACN,SAAS;GACT,OAAO;GACR;EACD,SAAS;GACP,SAAS;GACT,OAAO;GACP,YAAY,uBACR,EAAE,UAAU,GAAG,GACd,gBACC,iBACA;GACP;EACD,OAAO;GACL,SAAS;GACT,OAAO;GACP,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACF,GACD,CAAC,sBAAsB,cAAc,CACtC;AAED,KAAI,CAAC,IACH,QAAO;AAGT,QACE,oBAAC;EAAgB,MAAK;YACpB,oBAAC,OAAO;GACN,GAAI;GACJ,KAAK,MAAM;GACX,SAAS,WAAW,UAAW,WAAW,YAAY;GACtD,WAAW,GACT,qCACA,kBACA,SAAS,MAET,iBAAiB,gBACjB,MAAM,UACP;GACD,gBAAc,CAAC;GACf,cAAY,WAAW,UAAW,WAAW,WAAW;GACxD,SAAQ;GACH;GACL,UAAU;GACV,UAAU;GACV,eAAe;AACb,gBAAY,KAAK;AACjB,gBAAY,KAAK;;GAEnB,cAAc;AACZ,gBAAY,KAAK;AACjB,gBAAY,MAAM;;IAEpB;GACc"}

package/dist/components-ai-elements/inline-citation/index.d.mts

@@ -0,0 +1,94 @@
+
+import "../../skeleton-ByXUFNDF.mjs";
+import "../../button-BAdq0gBE.mjs";
+import { t as HoverCard } from "../../hover-card-BqEpbXMp.mjs";
+import "../../components-elements-hover-card.mjs";
+import { t as Carousel } from "../../carousel-D-J1Zgn1.mjs";
+import "../../components-elements-carousel.mjs";
+import { ComponentProps } from "react";
+import { HTMLMotionProps } from "motion/react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-elements/inline-citation/inline-citation.d.ts
+type InlineCitationProps = ComponentProps<'span'>;
+declare const InlineCitation: ({
+  className,
+  children,
+  ...props
+}: InlineCitationProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationTextProps = HTMLMotionProps<'span'>;
+declare const InlineCitationText: ({
+  className,
+  ...props
+}: InlineCitationTextProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+declare const InlineCitationCard: (props: InlineCitationCardProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCardTriggerProps = HTMLMotionProps<'button'> & {
+  sources: string[];
+};
+declare const InlineCitationCardTrigger: ({
+  sources,
+  className,
+  ...props
+}: InlineCitationCardTriggerProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCardBodyProps = ComponentProps<'div'>;
+declare const InlineCitationCardBody: ({
+  className,
+  ...props
+}: InlineCitationCardBodyProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+declare const InlineCitationCarousel: ({
+  className,
+  children,
+  ...props
+}: InlineCitationCarouselProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselContentProps = ComponentProps<'div'>;
+declare const InlineCitationCarouselContent: (props: InlineCitationCarouselContentProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselItemProps = ComponentProps<'div'>;
+declare const InlineCitationCarouselItem: ({
+  className,
+  ...props
+}: InlineCitationCarouselItemProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselHeaderProps = ComponentProps<'div'>;
+declare const InlineCitationCarouselHeader: ({
+  className,
+  ...props
+}: InlineCitationCarouselHeaderProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselIndexProps = ComponentProps<'div'>;
+declare const InlineCitationCarouselIndex: ({
+  children,
+  className,
+  ...props
+}: InlineCitationCarouselIndexProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselPrevProps = HTMLMotionProps<'button'>;
+declare const InlineCitationCarouselPrev: ({
+  className,
+  ...props
+}: InlineCitationCarouselPrevProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationCarouselNextProps = HTMLMotionProps<'button'>;
+declare const InlineCitationCarouselNext: ({
+  className,
+  ...props
+}: InlineCitationCarouselNextProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationSourceProps = ComponentProps<'div'> & {
+  title?: string;
+  url?: string;
+  description?: string;
+};
+declare const InlineCitationSource: ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}: InlineCitationSourceProps) => react_jsx_runtime0.JSX.Element;
+type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
+declare const InlineCitationQuote: ({
+  children,
+  className,
+  ...props
+}: InlineCitationQuoteProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardBodyProps, InlineCitationCardProps, InlineCitationCardTrigger, InlineCitationCardTriggerProps, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselContentProps, InlineCitationCarouselHeader, InlineCitationCarouselHeaderProps, InlineCitationCarouselIndex, InlineCitationCarouselIndexProps, InlineCitationCarouselItem, InlineCitationCarouselItemProps, InlineCitationCarouselNext, InlineCitationCarouselNextProps, InlineCitationCarouselPrev, InlineCitationCarouselPrevProps, InlineCitationCarouselProps, InlineCitationProps, InlineCitationQuote, InlineCitationQuoteProps, InlineCitationSource, InlineCitationSourceProps, InlineCitationText, InlineCitationTextProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-elements/inline-citation/index.mjs

@@ -0,0 +1,371 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_FOCUS, AI_HOVER, AI_ICON, AI_SPACING, AI_STACK, AI_TEXT, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { n as CarouselContent, r as CarouselItem, t as Carousel } from "../../carousel-Dx5AOW5k.mjs";
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../hover-card-nn4fjJOh.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useFocusWithin, useHover, useMediaQuery, useMergedRef, useReducedMotion } from "@mantine/hooks";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/inline-citation/inline-citation.tsx
+/**
+* @fileoverview InlineCitation Component - Premium Harmony V2
+*
+* A component for displaying inline citations and source references in AI-generated content.
+* Supports carousel navigation and hover cards for detailed source information.
+*
+* Features:
+* - Premium Harmony V2 motion with spring physics
+* - Touch vs desktop adaptive interactions
+* - Reduced motion support for accessibility
+* - Semantic color tokens throughout
+* - 44px minimum touch targets
+* - Data attributes for state management
+* - Focus-visible ring styles
+* - AnimatePresence for smooth transitions
+* - Context-based hover/focus state tracking
+* - Mantine hooks (useHover, useFocusWithin, useMergedRef, useMediaQuery, useReducedMotion)
+* - Carousel navigation with Embla integration
+* - HoverCard for detailed source preview
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/inline-citation
+* @component InlineCitation, InlineCitationText, InlineCitationCard, InlineCitationCardTrigger, InlineCitationCardBody, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselItem, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselPrev, InlineCitationCarouselNext, InlineCitationSource, InlineCitationQuote
+*
+* @useCases
+* - Display inline citations in AI-generated research content
+* - Show source references with hover card previews
+* - Navigate multiple sources via carousel interface
+* - Provide accessible source attribution in chat responses
+* - Display blockquotes and quotations with visual styling
+* - Support keyboard navigation for citation highlights
+*
+* @subcomponents
+* - InlineCitation - Root container with hover/focus context
+* - InlineCitationText - Highlighted text with active state
+* - InlineCitationCard - HoverCard wrapper for source details
+* - InlineCitationCardTrigger - Trigger button with source hostname
+* - InlineCitationCardBody - HoverCard content container
+* - InlineCitationCarousel - Carousel for multiple sources
+* - InlineCitationCarouselContent - Carousel items container
+* - InlineCitationCarouselItem - Individual carousel item
+* - InlineCitationCarouselHeader - Header with navigation
+* - InlineCitationCarouselIndex - Current/total indicator
+* - InlineCitationCarouselPrev - Previous navigation button
+* - InlineCitationCarouselNext - Next navigation button
+* - InlineCitationSource - Source details display
+* - InlineCitationQuote - Blockquote for citations
+*
+* @example
+* <InlineCitation>
+*   <InlineCitationText>cited text</InlineCitationText>
+*   <InlineCitationCard>
+*     <InlineCitationCardTrigger sources={['https://example.com']} />
+*     <InlineCitationCardBody>
+*       <InlineCitationSource title="Source" url="https://example.com" />
+*     </InlineCitationCardBody>
+*   </InlineCitationCard>
+* </InlineCitation>
+*/
+const safeHostname = (url) => {
+	try {
+		return new URL(url).hostname;
+	} catch {
+		return "unknown";
+	}
+};
+const InlineCitationContext = createContext(null);
+const useInlineCitationContext = () => {
+	const ctx = useContext(InlineCitationContext);
+	if (!ctx) throw new Error("InlineCitation subcomponents must be used within InlineCitation");
+	return ctx;
+};
+const InlineCitation = ({ className, children, ...props }) => {
+	const { hovered, ref: hoverRef } = useHover();
+	const { ref: focusRef, focused } = useFocusWithin();
+	const ref = useMergedRef(hoverRef, focusRef);
+	const isActive = hovered ?? focused;
+	const contextValue = useMemo(() => ({ isActive }), [isActive]);
+	return /* @__PURE__ */ jsx(InlineCitationContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("span", {
+			ref,
+			className: cn("inline items-center gap-1", className),
+			...props,
+			children
+		})
+	});
+};
+const InlineCitationText = ({ className, ...props }) => {
+	const { isActive } = useInlineCitationContext();
+	const reducedMotion = useReducedMotion();
+	const textVariants = useMemo(() => ({
+		inactive: {
+			backgroundColor: "transparent",
+			transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE
+		},
+		active: {
+			backgroundColor: "var(--color-accent)",
+			transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE
+		}
+	}), [reducedMotion]);
+	return /* @__PURE__ */ jsx(motion.span, {
+		animate: isActive ? "active" : "inactive",
+		className: cn(AI_TRANSITION.colors, className),
+		"data-state": isActive ? "active" : "inactive",
+		initial: "inactive",
+		variants: textVariants,
+		...props
+	});
+};
+const InlineCitationCard = (props) => /* @__PURE__ */ jsx(HoverCard, {
+	closeDelay: 0,
+	openDelay: 0,
+	...props
+});
+const InlineCitationCardTrigger = ({ sources, className, ...props }) => {
+	const primarySource = sources[0];
+	const reducedMotion = useReducedMotion();
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const triggerVariants = useMemo(() => ({
+		idle: {
+			scale: 1,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		hover: {
+			scale: isTouch ? 1 : 1.02,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		tap: {
+			scale: .98,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		}
+	}), [reducedMotion, isTouch]);
+	return /* @__PURE__ */ jsx(HoverCardTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.button, {
+			"aria-label": primarySource ? `Source ${safeHostname(primarySource)}${sources.length > 1 ? ` plus ${sources.length - 1} more` : ""}` : "Unknown source",
+			className: cn("bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex items-center gap-1 rounded-full px-2 font-medium", "min-h-[44px] py-2", AI_TEXT.xs, AI_TRANSITION.colors, AI_FOCUS.ring, className),
+			"data-sources-count": sources.length,
+			"data-state": primarySource ? "valid" : "invalid",
+			initial: "idle",
+			type: "button",
+			variants: triggerVariants,
+			whileHover: "hover",
+			whileTap: "tap",
+			...props,
+			children: primarySource ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				safeHostname(primarySource),
+				" ",
+				sources.length > 1 && `+${sources.length - 1}`
+			] }) : "unknown"
+		})
+	});
+};
+const InlineCitationCardBody = ({ className, ...props }) => /* @__PURE__ */ jsx(HoverCardContent, {
+	className: cn("relative w-80 p-0", className),
+	...props
+});
+const CarouselApiContext = createContext(void 0);
+const useCarouselApi = () => {
+	return useContext(CarouselApiContext);
+};
+const InlineCitationCarousel = ({ className, children, ...props }) => {
+	const [api, setApi] = useState();
+	return /* @__PURE__ */ jsx(CarouselApiContext.Provider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(Carousel, {
+			className: cn("w-full", className),
+			setApi,
+			...props,
+			children
+		})
+	});
+};
+const InlineCitationCarouselContent = (props) => /* @__PURE__ */ jsx(CarouselContent, { ...props });
+const InlineCitationCarouselItem = ({ className, ...props }) => /* @__PURE__ */ jsx(CarouselItem, {
+	className: cn("w-full p-4 pl-8", AI_STACK.tight, className),
+	...props
+});
+const InlineCitationCarouselHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("bg-secondary flex items-center justify-between rounded-t-md p-2", AI_SPACING.xs, className),
+	...props
+});
+const InlineCitationCarouselIndex = ({ children, className, ...props }) => {
+	const api = useCarouselApi();
+	const [current, setCurrent] = useState(0);
+	const [count, setCount] = useState(0);
+	useEffect(() => {
+		if (!api) return;
+		const updateCount = () => {
+			setCount(api.scrollSnapList().length);
+		};
+		const updateCurrent = () => {
+			setCurrent(api.selectedScrollSnap() + 1);
+		};
+		const timeoutId = setTimeout(() => {
+			updateCount();
+			updateCurrent();
+		}, 0);
+		api.on("select", updateCurrent);
+		api.on("reInit", updateCount);
+		return () => {
+			clearTimeout(timeoutId);
+			api.off("select", updateCurrent);
+			api.off("reInit", updateCount);
+		};
+	}, [api]);
+	const isFirst = current === 1;
+	const isLast = current === count;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground flex flex-1 items-center justify-end px-3 py-1 text-xs", className),
+		"data-carousel-current": current,
+		"data-carousel-total": count,
+		"data-state": isFirst ? "first" : isLast ? "last" : "middle",
+		...props,
+		children: children ?? `${current}/${count}`
+	});
+};
+const InlineCitationCarouselPrev = ({ className, ...props }) => {
+	const api = useCarouselApi();
+	const reducedMotion = useReducedMotion();
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const handleClick = useCallback(() => {
+		if (api) api.scrollPrev();
+	}, [api]);
+	const buttonVariants = useMemo(() => ({
+		idle: {
+			scale: 1,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		hover: {
+			scale: isTouch ? 1 : 1.05,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		tap: {
+			scale: .95,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		}
+	}), [reducedMotion, isTouch]);
+	return /* @__PURE__ */ jsx(motion.button, {
+		"aria-label": "Previous source",
+		className: cn("flex size-10 min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-full", AI_TRANSITION.colors, AI_HOVER.both, AI_FOCUS.ring, className),
+		"data-carousel-nav": "prev",
+		initial: "idle",
+		onClick: handleClick,
+		type: "button",
+		variants: buttonVariants,
+		whileHover: "hover",
+		whileTap: "tap",
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: cn("text-muted-foreground", AI_ICON.md) })
+	});
+};
+const InlineCitationCarouselNext = ({ className, ...props }) => {
+	const api = useCarouselApi();
+	const reducedMotion = useReducedMotion();
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const handleClick = useCallback(() => {
+		if (api) api.scrollNext();
+	}, [api]);
+	const buttonVariants = useMemo(() => ({
+		idle: {
+			scale: 1,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		hover: {
+			scale: isTouch ? 1 : 1.05,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		},
+		tap: {
+			scale: .95,
+			transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE
+		}
+	}), [reducedMotion, isTouch]);
+	return /* @__PURE__ */ jsx(motion.button, {
+		"aria-label": "Next source",
+		className: cn("flex size-10 min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-full", AI_TRANSITION.colors, AI_HOVER.both, AI_FOCUS.ring, className),
+		"data-carousel-nav": "next",
+		initial: "idle",
+		onClick: handleClick,
+		type: "button",
+		variants: buttonVariants,
+		whileHover: "hover",
+		whileTap: "tap",
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: cn("text-muted-foreground", AI_ICON.md) })
+	});
+};
+const InlineCitationSource = ({ title, url, description, className, children, ...props }) => {
+	const reducedMotion = useReducedMotion();
+	const fadeVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			y: -4
+		},
+		visible: {
+			opacity: 1,
+			y: 0,
+			transition: reducedMotion ? { duration: 0 } : SPRING_FLUID
+		},
+		exit: {
+			opacity: 0,
+			y: -4,
+			transition: reducedMotion ? { duration: 0 } : SPRING_FLUID
+		}
+	}), [reducedMotion]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1", className),
+		"data-has-description": Boolean(description),
+		"data-has-title": Boolean(title),
+		"data-has-url": Boolean(url),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: title ? /* @__PURE__ */ jsx(motion.h4, {
+					animate: "visible",
+					className: "truncate text-sm leading-tight font-medium",
+					exit: "exit",
+					initial: "hidden",
+					variants: fadeVariants,
+					children: title
+				}, "title") : null
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: url ? /* @__PURE__ */ jsx(motion.p, {
+					animate: "visible",
+					className: "text-muted-foreground truncate text-xs break-all",
+					exit: "exit",
+					initial: "hidden",
+					variants: fadeVariants,
+					children: url
+				}, "url") : null
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: description ? /* @__PURE__ */ jsx(motion.p, {
+					animate: "visible",
+					className: "text-muted-foreground line-clamp-3 text-sm leading-relaxed",
+					exit: "exit",
+					initial: "hidden",
+					variants: fadeVariants,
+					children: description
+				}, "description") : null
+			}),
+			children
+		]
+	});
+};
+const InlineCitationQuote = ({ children, className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+	className: cn("border-muted text-muted-foreground border-l-2 pl-3 text-sm italic", className),
+	...props,
+	children
+});
+
+//#endregion
+export { InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationCarouselNext, InlineCitationCarouselPrev, InlineCitationQuote, InlineCitationSource, InlineCitationText };
+//# sourceMappingURL=index.mjs.map