@nexub/react 1.5.0 → 1.6.0

package/dist/{chunk-QD7H3WV3.js → chunk-PGDXFBKT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   floatingSurface
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -56,7 +56,7 @@ var Trigger2 = React.forwardRef(
           ChevronDown,
           {
             size: "xs",
-            className: "relative ml-1 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative ms-1 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -71,7 +71,7 @@ var Content2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+        "nx-motion start-0 top-0 w-full md:absolute md:w-auto",
         className
       ),
       ...props
@@ -94,14 +94,14 @@ var Link2 = React.forwardRef(
 );
 Link2.displayName = "NavigationMenu.Link";
 var Viewport2 = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute start-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
     RadixNav.Viewport,
     {
       ref,
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
+        "nx-motion nx-pop origin-top relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
         floatingSurface,
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ...props
@@ -115,11 +115,11 @@ var Indicator2 = React.forwardRef(
     {
       ref,
       className: cn(
-        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition-opacity duration-effects-fast ease-effects-fast data-[state=hidden]:opacity-0",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--color-border-default)] shadow-md" })
+      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-ss-[2px] bg-[var(--color-outline-variant)] shadow-elevation-1" })
     }
   )
 );

package/dist/{chunk-PQ6GU7SG.js → chunk-PMWYLYM3.js}

@@ -1,7 +1,13 @@
 'use client';
 import {
   inputWrapperVariants
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
+import {
+  disabledText
+} from "./chunk-7SXR4PGO.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -36,6 +42,7 @@ var NumberInput = React.forwardRef(
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const messages = useNexubMessages();
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
     const commit = (next) => {
@@ -51,12 +58,11 @@ var NumberInput = React.forwardRef(
     const decrement = () => commit(currentValue - step);
     const stepperButtonClass = cn(
       "flex items-center justify-center px-2 self-stretch shrink-0",
-      "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
-      "hover:bg-[var(--color-bg-subtle)] transition-colors",
-      "disabled:opacity-50 disabled:pointer-events-none",
-      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)]"
+      // State layer for hover/press; tabIndex -1, so no focus styling needed.
+      "nx-state-layer text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)]",
+      disabledText
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "pr-0 gap-0", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "pe-0 gap-0 overflow-hidden", className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -71,19 +77,19 @@ var NumberInput = React.forwardRef(
           "aria-invalid": invalid ?? void 0,
           className: cn(
             // Wrapper owns ALL focus styling — strip every indicator from the inner input.
-            "flex-1 min-w-0 bg-transparent text-[var(--color-text-primary)]",
+            "flex-1 min-w-0 bg-transparent text-[var(--color-on-surface)]",
             "border-0 shadow-none",
             "outline-none focus:outline-none focus-visible:outline-none",
             "ring-0 focus:ring-0 focus-visible:ring-0",
-            "placeholder:text-[var(--color-text-placeholder)]",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "placeholder:text-[var(--color-on-surface-muted)]",
+            "disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-            size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"
+            size === "sm" ? "text-body-sm" : "text-body-md"
           ),
           ...props
         }
       ),
-      showSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-[var(--color-border-default)] self-stretch", children: [
+      showSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-s border-[var(--color-outline-variant)] self-stretch", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -91,8 +97,8 @@ var NumberInput = React.forwardRef(
             tabIndex: -1,
             onClick: increment,
             disabled: disabled || max !== void 0 && currentValue >= max,
-            className: cn(stepperButtonClass, "border-b border-[var(--color-border-default)] text-xs leading-none flex-1"),
-            "aria-label": "Increment",
+            className: cn(stepperButtonClass, "border-b border-[var(--color-outline-variant)] text-xs leading-none flex-1"),
+            "aria-label": messages.increment,
             children: "\u25B2"
           }
         ),
@@ -104,7 +110,7 @@ var NumberInput = React.forwardRef(
             onClick: decrement,
             disabled: disabled || min !== void 0 && currentValue <= min,
             className: cn(stepperButtonClass, "text-xs leading-none flex-1"),
-            "aria-label": "Decrement",
+            "aria-label": messages.decrement,
             children: "\u25BC"
           }
         )

package/dist/{chunk-I4BHRVRL.js → chunk-PPCGUIAB.js}

@@ -2,6 +2,9 @@
 import {
   useControllableState
 } from "./chunk-JLUCMNVS.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -38,6 +41,7 @@ var Rating = React.forwardRef(
       onChange: onValueChange
     });
     const [hovered, setHovered] = React.useState(null);
+    const messages = useNexubMessages();
     const displayValue = hovered ?? value ?? 0;
     const starRefs = React.useRef([]);
     const tabStop = value && value > 0 ? value : 1;
@@ -54,7 +58,7 @@ var Rating = React.forwardRef(
         ref,
         className: cn(ratingVariants({ size }), className),
         role: "radiogroup",
-        "aria-label": "Rating",
+        "aria-label": messages.rating,
         "aria-readonly": readOnly || void 0,
         ...props,
         children: Array.from({ length: max }, (_, i) => {
@@ -70,7 +74,7 @@ var Rating = React.forwardRef(
               role: "radio",
               tabIndex: starValue === tabStop ? 0 : -1,
               "aria-checked": starValue === (value ?? 0),
-              "aria-label": `${starValue} star${starValue !== 1 ? "s" : ""}`,
+              "aria-label": messages.ratingStars(starValue),
               disabled: readOnly,
               onClick: () => !readOnly && setValue(starValue),
               onKeyDown: (e) => !readOnly && handleKeyDown(e, starValue),
@@ -80,7 +84,7 @@ var Rating = React.forwardRef(
                 "bg-transparent border-0 p-0 m-0 inline-flex items-center justify-center transition-transform",
                 !readOnly && "cursor-pointer hover:scale-110",
                 readOnly && "cursor-default",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1 rounded-sm",
+                "rounded-shape-min",
                 "disabled:pointer-events-none"
               ),
               children: /* @__PURE__ */ jsx(
@@ -104,8 +108,8 @@ function StarIcon({ filled, ...props }) {
     "svg",
     {
       viewBox: "0 0 20 20",
-      fill: filled ? "var(--color-founderub-500, #f59e0b)" : "none",
-      stroke: filled ? "var(--color-founderub-500, #f59e0b)" : "var(--color-border-default)",
+      fill: filled ? "var(--color-palette-warning-72)" : "none",
+      stroke: filled ? "var(--color-warning)" : "var(--color-outline-variant)",
       strokeWidth: "1.5",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,

package/dist/{chunk-NIX4SEKM.js → chunk-PREMZMLU.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  toneTextClasses
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -27,16 +30,16 @@ var labelVariants = cva(
 );
 var Label = React.forwardRef(
   ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
-    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
     return /* @__PURE__ */ jsxs(
       "label",
       {
         ref,
         "data-tone": tone,
-        style: { ...toneStyle, ...style },
+        style,
         className: cn(
           labelVariants({ size, disabled }),
-          "text-[var(--color-text-primary)]",
+          "text-[var(--color-on-surface)]",
+          tone && toneTextClasses[tone],
           className
         ),
         ...props,
@@ -46,7 +49,7 @@ var Label = React.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "text-[var(--color-danger-500)] leading-none",
+              className: "text-[var(--color-error)] leading-none",
               children: "*"
             }
           )

package/dist/{chunk-4SSUM4CL.js → chunk-Q3ESHXKU.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -8,7 +11,7 @@ import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", className: cn("", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": useNexubMessages().breadcrumb, className: cn("", className), ...props })
 );
 Root.displayName = "Breadcrumb.Root";
 var List = React.forwardRef(
@@ -17,7 +20,7 @@ var List = React.forwardRef(
     {
       ref,
       className: cn(
-        "flex flex-wrap items-center gap-1.5 text-sm text-[var(--color-text-muted)] sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm text-[var(--color-on-surface-muted)] sm:gap-2.5",
         className
       ),
       ...props
@@ -33,7 +36,7 @@ var Link = React.forwardRef(({ className, children, ...props }, ref) => /* @__PU
   "a",
   {
     ref,
-    className: cn("transition-colors hover:text-[var(--color-text-primary)]", className),
+    className: cn("transition-colors hover:text-[var(--color-on-surface)]", className),
     ...props,
     children
   }
@@ -47,7 +50,7 @@ var Page = React.forwardRef(
       role: "link",
       "aria-current": "page",
       "aria-disabled": "true",
-      className: cn("font-normal text-[var(--color-text-primary)]", className),
+      className: cn("font-normal text-[var(--color-on-surface)]", className),
       ...props
     }
   )
@@ -62,7 +65,7 @@ var Separator = ({
     role: "presentation",
     "aria-hidden": "true",
     className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className),
-    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "rtl:-scale-x-100" })
   }
 );
 Separator.displayName = "Breadcrumb.Separator";
@@ -75,7 +78,7 @@ var Ellipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs(
     ...props,
     children: [
       /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: useNexubMessages().breadcrumbMore })
     ]
   }
 );

package/dist/{chunk-KM6Z3VTI.js → chunk-QVTVDL6Y.js}

@@ -15,7 +15,7 @@ var FormError = React.forwardRef(
         ref,
         role: "alert",
         className: cn(
-          "flex items-center gap-1.5 text-sm text-[var(--color-danger-600)] leading-snug",
+          "flex items-center gap-1.5 text-sm text-[var(--color-on-error-container)] leading-snug",
           className
         ),
         ...props,

package/dist/{chunk-AXOKFS4K.js → chunk-RSU2UHN4.js}

@@ -1,7 +1,13 @@
 'use client';
+import {
+  NumberTicker
+} from "./chunk-MEUJBGY5.js";
 import {
   moneyFormatter
 } from "./chunk-CIQHFMF6.js";
+import {
+  useIntlLocale
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -15,8 +21,11 @@ var sizes = {
   lg: "text-title-lg",
   display: "font-display text-display-sm"
 };
+var mutedClass = "text-[0.55em] font-semibold text-[var(--color-on-surface-variant)]";
+var muted = (type) => type === "currency" || type === "decimal" || type === "fraction";
 var Amount = React.forwardRef(
-  ({ value, currency, locale, size = "md", tone = "neutral", signDisplay, className, ...props }, ref) => {
+  ({ value, currency, locale: localeProp, size = "md", tone = "neutral", signDisplay, animate = false, className, ...props }, ref) => {
+    const locale = useIntlLocale(localeProp);
     const parts = moneyFormatter(currency, locale, { signDisplay }).formatToParts(value);
     const quiet = size === "display";
     return /* @__PURE__ */ jsx(
@@ -32,10 +41,17 @@ var Amount = React.forwardRef(
           className
         ),
         ...props,
-        children: parts.map((p, i) => {
+        children: animate ? /* @__PURE__ */ jsx(
+          NumberTicker,
+          {
+            value: parts.map((p) => ({
+              value: p.type === "minusSign" ? "\u2212" : p.value,
+              className: quiet && muted(p.type) ? mutedClass : void 0
+            }))
+          }
+        ) : parts.map((p, i) => {
           const text = p.type === "minusSign" ? "\u2212" : p.value;
-          const muted = quiet && (p.type === "currency" || p.type === "decimal" || p.type === "fraction");
-          return muted ? /* @__PURE__ */ jsx("span", { className: "text-[0.55em] font-semibold text-[var(--color-on-surface-variant)]", children: text }, i) : /* @__PURE__ */ jsx(React.Fragment, { children: text }, i);
+          return quiet && muted(p.type) ? /* @__PURE__ */ jsx("span", { className: mutedClass, children: text }, i) : /* @__PURE__ */ jsx(React.Fragment, { children: text }, i);
         })
       }
     );

package/dist/{chunk-DJZZ3FIP.js → chunk-RUR57JZQ.js}

@@ -1,9 +1,8 @@
 'use client';
 import {
-  enterExit,
   overlaySurface,
   scrim
-} from "./chunk-KQPLFVFR.js";
+} from "./chunk-FLZD7HQY.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";
@@ -26,11 +25,8 @@ var Overlay2 = React.forwardRef(
       {
         ref,
         className: cn(
-          "fixed inset-0 z-[var(--z-modal)]",
+          "fixed inset-0 z-[var(--z-modal)] nx-motion",
           scrim,
-          enterExit,
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           className
         ),
         ...props
@@ -54,14 +50,9 @@ var Content2 = React.forwardRef(
         ref,
         className: cn(
           "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+          "nx-motion nx-dialog",
           overlaySurface,
-          enterExit,
           "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
           sizeMap[size],
           surface === "glass" && glassSurfaceClass,
           className
@@ -81,7 +72,7 @@ var Title2 = React.forwardRef(
       RadixDialog.Title,
       {
         ref,
-        className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+        className: cn("text-lg font-semibold text-[var(--color-on-surface)]", className),
         ...props
       }
     );
@@ -94,7 +85,7 @@ var Description2 = React.forwardRef(
       RadixDialog.Description,
       {
         ref,
-        className: cn("mt-1 text-sm text-[var(--color-text-muted)]", className),
+        className: cn("mt-1 text-sm text-[var(--color-on-surface-muted)]", className),
         ...props
       }
     );

package/dist/{chunk-ZV3AF5CL.js → chunk-S2CTBFLN.js}

@@ -6,14 +6,25 @@ import {
 // src/components/AspectRatio/AspectRatio.tsx
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+var RATIO_CLASS = {
+  "1.0000": "aspect-square",
+  "1.7778": "aspect-video",
+  "1.3333": "aspect-[4/3]",
+  "1.5000": "aspect-[3/2]",
+  "2.3333": "aspect-[21/9]",
+  "0.5625": "aspect-[9/16]",
+  "0.7500": "aspect-[3/4]",
+  "0.6667": "aspect-[2/3]"
+};
 var AspectRatio = React.forwardRef(
   ({ ratio = 16 / 9, className, children, style, ...rest }, ref) => {
+    const ratioClass = RATIO_CLASS[ratio.toFixed(4)];
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn("relative w-full overflow-hidden", className),
-        style: { aspectRatio: String(ratio), ...style },
+        className: cn("relative w-full overflow-hidden", ratioClass, className),
+        style: ratioClass ? style : { aspectRatio: String(ratio), ...style },
         ...rest,
         children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full", children })
       }

package/dist/{chunk-WESZPFBZ.js → chunk-S7GH2BJP.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -13,15 +16,15 @@ import { jsx } from "react/jsx-runtime";
 var PasswordInput = React.forwardRef(
   ({ className, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
+    const messages = useNexubMessages();
     const toggleButton = /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword((prev) => !prev),
-        "aria-label": showPassword ? "Hide password" : "Show password",
+        "aria-label": showPassword ? messages.hidePassword : messages.showPassword,
         className: cn(
-          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+          "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
         children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
       }

package/dist/chunk-SAUA52EJ.js

@@ -0,0 +1,131 @@
+'use client';
+import {
+  HoverCard
+} from "./chunk-KE4YVG5Q.js";
+import {
+  useNexubMessages
+} from "./chunk-743Y5MY3.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Citation/Citation.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var fallbackMessages = {
+  sources: "Sources",
+  source: (index) => `Source ${index}`
+};
+function useCitationMessages(overrides) {
+  const provided = useNexubMessages();
+  return { ...fallbackMessages, sources: provided.sources ?? fallbackMessages.sources, source: provided.source ?? fallbackMessages.source, ...overrides };
+}
+function safeUrl(url) {
+  if (!url) return void 0;
+  try {
+    const u = new URL(url);
+    return u.protocol === "http:" || u.protocol === "https:" ? u.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function sourceDomain(source) {
+  if (source.domain) return source.domain;
+  const href = safeUrl(source.url);
+  return href ? new URL(href).hostname.replace(/^www\./, "") : "";
+}
+function Favicon({ source, className }) {
+  const src = safeUrl(source.favicon);
+  const [failed, setFailed] = React.useState(false);
+  const base = cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", className);
+  if (src && !failed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: "",
+        referrerPolicy: "no-referrer",
+        loading: "lazy",
+        onError: () => setFailed(true),
+        className: cn(base, "object-cover")
+      }
+    );
+  }
+  const letter = (sourceDomain(source) || source.title).charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(base, "bg-[var(--color-surface-container-high)] text-label-sm text-[var(--color-on-surface-variant)]"), children: letter });
+}
+var linkProps = { target: "_blank", rel: "noopener noreferrer" };
+var Citation = React.forwardRef(
+  ({ index, source, messages, className, ...props }, ref) => {
+    const m = useCitationMessages(messages);
+    const href = safeUrl(source.url);
+    const label = `${m.source(index)}: ${source.title}`;
+    const domain = sourceDomain(source);
+    const marker = cn(
+      "mx-0.5 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-shape-control px-1.5 align-middle",
+      "bg-[var(--color-secondary-container)] text-label-sm leading-none text-[var(--color-on-secondary-container)] no-underline",
+      href && "nx-state-layer",
+      className
+    );
+    return /* @__PURE__ */ jsxs(HoverCard.Root, { children: [
+      /* @__PURE__ */ jsx(HoverCard.Trigger, { asChild: true, children: href ? /* @__PURE__ */ jsx("a", { ref, href, ...linkProps, "aria-label": label, className: marker, ...props, children: index }) : /* @__PURE__ */ jsxs("span", { ref, className: marker, ...props, children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ] }) }),
+      /* @__PURE__ */ jsxs(HoverCard.Content, { className: "w-72", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Favicon, { source, className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-label-sm text-[var(--color-on-surface-muted)]", children: domain })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-title-sm text-[var(--color-on-surface)]", children: source.title }),
+        source.snippet && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 text-body-sm text-[var(--color-on-surface-variant)]", children: source.snippet })
+      ] })
+    ] });
+  }
+);
+Citation.displayName = "Citation";
+var SourceChip = React.forwardRef(
+  ({ source, className, ...props }, ref) => {
+    const href = safeUrl(source.url);
+    const cls = cn(
+      "inline-flex h-9 max-w-[16rem] items-center gap-2 rounded-shape-control border border-[var(--color-outline-variant)] px-3",
+      "bg-[var(--color-surface-container-low)] text-label-md text-[var(--color-on-surface)] no-underline",
+      href && "nx-state-layer",
+      className
+    );
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Favicon, { source, className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-on-surface-muted)]", children: sourceDomain(source) }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: source.title })
+    ] });
+    return href ? /* @__PURE__ */ jsx("a", { ref, href, ...linkProps, className: cls, ...props, children: content }) : /* @__PURE__ */ jsx("span", { ref, className: cls, ...props, children: content });
+  }
+);
+SourceChip.displayName = "SourceChip";
+var SourceList = React.forwardRef(
+  ({ sources, messages, className, ...props }, ref) => {
+    const m = useCitationMessages(messages);
+    const id = React.useId();
+    return /* @__PURE__ */ jsxs("section", { ref, "aria-labelledby": id, className: cn("[container-type:inline-size]", className), ...props, children: [
+      /* @__PURE__ */ jsx("p", { id, className: "mb-2 text-label-md text-[var(--color-on-surface-variant)]", children: m.sources }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: cn(
+            "flex snap-x snap-mandatory scroll-px-1 gap-2 overflow-x-auto p-1",
+            "[@container(min-width:480px)]:flex-wrap [@container(min-width:480px)]:overflow-x-visible"
+          ),
+          children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { className: "shrink-0 snap-start", children: /* @__PURE__ */ jsx(SourceChip, { source: s }) }, `${i}-${s.url}`))
+        }
+      )
+    ] });
+  }
+);
+SourceList.displayName = "SourceList";
+
+export {
+  safeUrl,
+  Citation,
+  SourceChip,
+  SourceList
+};

package/dist/{chunk-72I7EVOL.js → chunk-SYZADSLI.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  pressable
+} from "./chunk-7SXR4PGO.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -10,15 +13,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var toneConfig = {
   error: {
     icon: /* @__PURE__ */ jsx(AlertCircle, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-error-default)]"
+    color: "text-[var(--color-error)]"
   },
   warning: {
     icon: /* @__PURE__ */ jsx(AlertTriangle, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-warning-default)]"
+    color: "text-[var(--color-warning)]"
   },
   info: {
     icon: /* @__PURE__ */ jsx(Info, { size: "xl", "aria-hidden": "true" }),
-    color: "text-[var(--color-semantic-info-default)]"
+    color: "text-[var(--color-info)]"
   }
 };
 var ErrorState = React.forwardRef(
@@ -36,14 +39,15 @@ var ErrorState = React.forwardRef(
         children: [
           /* @__PURE__ */ jsx("span", { className: color, children: icon }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-[var(--color-text-muted)]", children: description })
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--color-on-surface)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-[var(--color-on-surface-muted)]", children: description })
           ] }),
           onRetry && /* @__PURE__ */ jsx(
             "button",
             {
+              type: "button",
               onClick: onRetry,
-              className: "inline-flex h-9 items-center justify-center rounded-md bg-[var(--color-fill-primary)] px-4 text-sm font-medium text-white hover:bg-[var(--color-fill-primary-hover)] transition-colors",
+              className: cn(pressable, "inline-flex h-9 items-center justify-center bg-[var(--color-primary)] px-4 text-label-lg text-[var(--color-on-primary)]"),
               children: "Try again"
             }
           )