@arc-lo/ui 0.2.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, forwardRef, useState, useCallback, useRef, useEffect, useMemo, useId, useContext } from 'react';
1
+ import { createContext, forwardRef, useState, useCallback, useRef, useEffect, useId, useMemo, useContext } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { twMerge } from 'tailwind-merge';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -30,6 +30,8 @@ function cn(...inputs) {
30
30
  // src/lib/theme.ts
31
31
  var themeVars = {
32
32
  accent: "var(--arclo-accent, #6C5CE7)",
33
+ accentFg: "var(--arclo-accent-fg, #ffffff)",
34
+ accentBright: "var(--arclo-accent-bright, rgb(167,139,250))",
33
35
  surface: "var(--arclo-surface, #ffffff)",
34
36
  surfaceSecondary: "var(--arclo-surface-secondary, #f9fafb)",
35
37
  border: "var(--arclo-border, #e5e7eb)",
@@ -37,7 +39,9 @@ var themeVars = {
37
39
  textSecondary: "var(--arclo-text-secondary, #6b7280)",
38
40
  textMuted: "var(--arclo-text-muted, #9ca3af)",
39
41
  error: "var(--arclo-error, #ef4444)",
40
- errorSurface: "var(--arclo-error-surface, #fef2f2)"};
42
+ errorSurface: "var(--arclo-error-surface, #fef2f2)",
43
+ radius: "var(--arclo-radius, 0.75rem)"
44
+ };
41
45
  function chunkText(text, mode) {
42
46
  switch (mode) {
43
47
  case "char":
@@ -537,9 +541,13 @@ var Chip = forwardRef(
537
541
  {
538
542
  ref,
539
543
  className: cn(
540
- "arclo-prompt-chip inline-flex items-center gap-1.5 rounded-lg bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600",
544
+ "arclo-prompt-chip inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium",
541
545
  className
542
546
  ),
547
+ style: {
548
+ backgroundColor: themeVars.surfaceSecondary,
549
+ color: themeVars.textSecondary
550
+ },
543
551
  ...props,
544
552
  children: [
545
553
  children,
@@ -593,8 +601,12 @@ var Input = forwardRef(
593
601
  disabled: disabled || isSubmitting,
594
602
  rows: minRows,
595
603
  placeholder: "Ask anything...",
604
+ style: {
605
+ scrollbarWidth: "none",
606
+ color: themeVars.text
607
+ },
596
608
  className: cn(
597
- "arclo-prompt-input w-full resize-none bg-transparent px-4 py-3 text-[15px] leading-relaxed outline-none placeholder:text-gray-400 [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.300)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300",
609
+ "arclo-prompt-input w-full resize-none bg-transparent px-4 py-3 text-[15px] leading-relaxed outline-none",
598
610
  className
599
611
  ),
600
612
  ...props
@@ -620,23 +632,30 @@ var Footer = forwardRef(
620
632
  }
621
633
  );
622
634
  Footer.displayName = "PromptBox.Footer";
635
+ var ArrowUpIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
623
636
  var SubmitButton = forwardRef(
624
- ({ children, className, ...props }, ref) => {
637
+ ({ children, variant = "default", loadingLabel, className, ...props }, ref) => {
625
638
  const { value, isSubmitting, disabled } = usePromptBoxContext();
626
639
  const isEmpty = !value.trim();
640
+ const isIcon = variant === "icon";
641
+ const content = children ?? (isIcon ? isSubmitting ? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsx(ArrowUpIcon, {}) : variant === "icon-text" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
642
+ isSubmitting ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsx(ArrowUpIcon, {}),
643
+ isSubmitting ? loadingLabel ?? "Sending..." : "Send"
644
+ ] }) : isSubmitting ? loadingLabel ?? "Sending..." : "Send");
627
645
  return /* @__PURE__ */ jsx(
628
646
  "button",
629
647
  {
630
648
  ref,
631
649
  type: "submit",
632
650
  disabled: isEmpty || isSubmitting || disabled,
633
- style: { backgroundColor: themeVars.accent },
651
+ style: { backgroundColor: themeVars.accent, color: themeVars.accentFg },
634
652
  className: cn(
635
- "arclo-prompt-submit ml-auto rounded-xl px-4 py-2 text-sm font-medium text-white transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
653
+ "arclo-prompt-submit ml-auto transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
654
+ isIcon ? "rounded-xl p-2" : "rounded-xl px-4 py-2 text-sm font-medium",
636
655
  className
637
656
  ),
638
657
  ...props,
639
- children: children ?? (isSubmitting ? "Sending..." : "Send")
658
+ children: content
640
659
  }
641
660
  );
642
661
  }
@@ -1328,9 +1347,13 @@ var Messages = forwardRef(
1328
1347
  {
1329
1348
  ref,
1330
1349
  className: cn(
1331
- "arclo-chat-messages flex-1 overflow-y-auto space-y-4 p-4 [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.300)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300",
1350
+ "arclo-chat-messages flex-1 overflow-y-auto space-y-4 p-4",
1332
1351
  className
1333
1352
  ),
1353
+ style: {
1354
+ scrollbarWidth: "thin",
1355
+ scrollbarColor: `var(--arclo-border, #e5e7eb) transparent`
1356
+ },
1334
1357
  ...props,
1335
1358
  children
1336
1359
  }
@@ -1411,9 +1434,9 @@ var Message = forwardRef(
1411
1434
  ),
1412
1435
  style: isUser ? {
1413
1436
  backgroundColor: themeVars.accent,
1414
- color: "#ffffff"
1437
+ color: themeVars.accentFg
1415
1438
  } : {
1416
- backgroundColor: themeVars.surfaceSecondary,
1439
+ backgroundColor: themeVars.surface,
1417
1440
  color: themeVars.text,
1418
1441
  border: `1px solid ${themeVars.border}`
1419
1442
  },
@@ -1448,8 +1471,14 @@ var ScrollAnchor = forwardRef(
1448
1471
  useEffect(() => {
1449
1472
  const el = innerRef.current;
1450
1473
  if (!el) return;
1474
+ const scrollParent = el.closest(".arclo-chat-messages");
1451
1475
  const observer = new MutationObserver(() => {
1452
- el.scrollIntoView({ behavior: "smooth", block: "end" });
1476
+ if (scrollParent) {
1477
+ scrollParent.scrollTo({
1478
+ top: scrollParent.scrollHeight,
1479
+ behavior: "smooth"
1480
+ });
1481
+ }
1453
1482
  });
1454
1483
  const parent = el.parentElement;
1455
1484
  if (parent) {
@@ -1469,171 +1498,995 @@ var ScrollAnchor = forwardRef(
1469
1498
  }
1470
1499
  );
1471
1500
  ScrollAnchor.displayName = "ChatThread.ScrollAnchor";
1472
- var levelConfig = {
1473
- high: {
1474
- label: "High confidence",
1475
- classes: "bg-emerald-50 text-emerald-700 border-emerald-200"
1476
- },
1477
- medium: {
1478
- label: "Medium confidence",
1479
- classes: "bg-amber-50 text-amber-700 border-amber-200"
1480
- },
1481
- low: {
1482
- label: "Low confidence",
1483
- classes: "bg-red-50 text-red-700 border-red-200"
1484
- },
1485
- unknown: {
1486
- label: "Confidence unknown",
1487
- classes: "bg-gray-50 text-gray-500 border-gray-200"
1501
+
1502
+ // src/image-gen/index.ts
1503
+ var image_gen_exports = {};
1504
+ __export(image_gen_exports, {
1505
+ Download: () => Download,
1506
+ ErrorFallback: () => ErrorFallback2,
1507
+ Overlay: () => Overlay,
1508
+ Placeholder: () => Placeholder,
1509
+ Preview: () => Preview,
1510
+ Progress: () => Progress,
1511
+ Retry: () => Retry,
1512
+ Root: () => Root7,
1513
+ Toolbar: () => Toolbar2
1514
+ });
1515
+ var ImageGenContext = createContext(null);
1516
+ function useImageGenContext() {
1517
+ const ctx = useContext(ImageGenContext);
1518
+ if (!ctx) {
1519
+ throw new Error(
1520
+ "useImageGenContext must be used within <ImageGen.Root>"
1521
+ );
1488
1522
  }
1489
- };
1490
- var ConfidenceBadge = forwardRef(
1491
- ({ level, label, variant = "badge", className, ...props }, ref) => {
1492
- const config = levelConfig[level];
1493
- const displayLabel = label ?? config.label;
1494
- if (variant === "dot") {
1495
- return /* @__PURE__ */ jsx(
1496
- "span",
1497
- {
1498
- ref,
1499
- role: "status",
1500
- "aria-label": displayLabel,
1501
- title: displayLabel,
1502
- className: cn(
1503
- "arclo-confidence-dot inline-block h-2.5 w-2.5 shrink-0 rounded-full",
1504
- level === "high" && "bg-emerald-500",
1505
- level === "medium" && "bg-amber-500",
1506
- level === "low" && "bg-red-500",
1507
- level === "unknown" && "bg-gray-400",
1508
- className
1509
- ),
1510
- ...props
1511
- }
1512
- );
1513
- }
1514
- if (variant === "inline") {
1515
- return /* @__PURE__ */ jsx(
1516
- "span",
1517
- {
1518
- ref,
1519
- role: "status",
1520
- className: cn(
1521
- "arclo-confidence-inline text-xs italic",
1522
- level === "high" && "text-emerald-600",
1523
- level === "medium" && "text-amber-600",
1524
- level === "low" && "text-red-600",
1525
- level === "unknown" && "text-gray-400",
1526
- className
1527
- ),
1528
- ...props,
1529
- children: displayLabel
1530
- }
1531
- );
1532
- }
1523
+ return ctx;
1524
+ }
1525
+ var Root7 = forwardRef(
1526
+ ({
1527
+ state,
1528
+ src,
1529
+ alt,
1530
+ aspectRatio = "1/1",
1531
+ prompt,
1532
+ onRetry,
1533
+ onDownload,
1534
+ blurReveal = true,
1535
+ children,
1536
+ className,
1537
+ ...props
1538
+ }, ref) => {
1539
+ const ctx = {
1540
+ state,
1541
+ src,
1542
+ alt,
1543
+ aspectRatio,
1544
+ prompt,
1545
+ onRetry,
1546
+ onDownload,
1547
+ blurReveal
1548
+ };
1549
+ return /* @__PURE__ */ jsx(ImageGenContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
1550
+ "div",
1551
+ {
1552
+ ref,
1553
+ "data-state": state,
1554
+ style: { position: "relative" },
1555
+ className: cn("arclo-image-gen", className),
1556
+ ...props,
1557
+ children
1558
+ }
1559
+ ) });
1560
+ }
1561
+ );
1562
+ Root7.displayName = "ImageGen.Root";
1563
+ var Placeholder = forwardRef(
1564
+ ({ className, ...props }, ref) => {
1565
+ const { state, src, aspectRatio } = useImageGenContext();
1566
+ const visible = state === "idle" || state === "pending" || state === "generating" && !src;
1567
+ if (!visible) return null;
1533
1568
  return /* @__PURE__ */ jsxs(
1534
- "span",
1569
+ "div",
1535
1570
  {
1536
1571
  ref,
1537
1572
  role: "status",
1538
- className: cn(
1539
- "arclo-confidence-badge inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium",
1540
- config.classes,
1541
- className
1542
- ),
1573
+ "aria-label": "Loading image",
1574
+ style: {
1575
+ aspectRatio,
1576
+ backgroundColor: themeVars.surfaceSecondary,
1577
+ borderRadius: themeVars.radius,
1578
+ overflow: "hidden",
1579
+ position: "relative"
1580
+ },
1581
+ className: cn("arclo-image-gen-placeholder", className),
1543
1582
  ...props,
1544
1583
  children: [
1545
1584
  /* @__PURE__ */ jsx(
1546
- "span",
1585
+ "div",
1547
1586
  {
1548
- className: cn(
1549
- "h-2 w-2 shrink-0 rounded-full",
1550
- level === "high" && "bg-emerald-500",
1551
- level === "medium" && "bg-amber-500",
1552
- level === "low" && "bg-red-500",
1553
- level === "unknown" && "bg-gray-400"
1554
- )
1587
+ dangerouslySetInnerHTML: {
1588
+ __html: `<style>
1589
+ @keyframes arclo-shimmer {
1590
+ 0% { transform: translateX(-100%); }
1591
+ 100% { transform: translateX(100%); }
1592
+ }
1593
+ </style>`
1594
+ }
1555
1595
  }
1556
1596
  ),
1557
- displayLabel
1597
+ /* @__PURE__ */ jsx(
1598
+ "div",
1599
+ {
1600
+ style: {
1601
+ position: "absolute",
1602
+ inset: 0,
1603
+ background: `linear-gradient(90deg, transparent 0%, ${themeVars.border} 50%, transparent 100%)`,
1604
+ animation: "arclo-shimmer 1.5s ease-in-out infinite"
1605
+ }
1606
+ }
1607
+ )
1558
1608
  ]
1559
1609
  }
1560
1610
  );
1561
1611
  }
1562
1612
  );
1563
- ConfidenceBadge.displayName = "ConfidenceBadge";
1564
- var CitationInline = forwardRef(
1565
- ({
1566
- index,
1567
- href,
1568
- sourceTitle,
1569
- preview,
1570
- variant = "superscript",
1571
- className,
1572
- ...props
1573
- }, ref) => {
1574
- const [showPreview, setShowPreview] = useState(false);
1575
- const label = variant === "bracket" ? `[${index}]` : `${index}`;
1576
- const Tag = href ? "a" : "span";
1577
- const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
1578
- return /* @__PURE__ */ jsxs(
1579
- "span",
1613
+ Placeholder.displayName = "ImageGen.Placeholder";
1614
+ var Preview = forwardRef(
1615
+ ({ className, style, ...props }, ref) => {
1616
+ const { state, src, alt, aspectRatio, blurReveal } = useImageGenContext();
1617
+ if (!src) return null;
1618
+ const isDone = state === "done";
1619
+ const blurValue = blurReveal && !isDone ? "blur(20px)" : "blur(0)";
1620
+ return /* @__PURE__ */ jsx(
1621
+ "img",
1580
1622
  {
1581
1623
  ref,
1582
- className: cn("arclo-citation relative inline-block", className),
1583
- onMouseEnter: () => setShowPreview(true),
1584
- onMouseLeave: () => setShowPreview(false),
1624
+ src,
1625
+ alt: alt ?? "",
1626
+ "data-state": state,
1627
+ style: {
1628
+ aspectRatio,
1629
+ width: "100%",
1630
+ display: "block",
1631
+ borderRadius: themeVars.radius,
1632
+ objectFit: "cover",
1633
+ filter: blurValue,
1634
+ transition: "filter 0.6s ease-out",
1635
+ ...style
1636
+ },
1637
+ className: cn("arclo-image-gen-preview", className),
1638
+ ...props
1639
+ }
1640
+ );
1641
+ }
1642
+ );
1643
+ Preview.displayName = "ImageGen.Preview";
1644
+ var Progress = forwardRef(
1645
+ ({ progress, className, ...props }, ref) => {
1646
+ const { state } = useImageGenContext();
1647
+ if (state !== "pending" && state !== "generating") return null;
1648
+ const isIndeterminate = progress === void 0;
1649
+ return /* @__PURE__ */ jsx(
1650
+ "div",
1651
+ {
1652
+ ref,
1653
+ role: "progressbar",
1654
+ "aria-valuenow": isIndeterminate ? void 0 : progress,
1655
+ "aria-valuemin": 0,
1656
+ "aria-valuemax": 100,
1657
+ style: {
1658
+ position: "absolute",
1659
+ bottom: 0,
1660
+ left: 0,
1661
+ right: 0,
1662
+ height: "3px",
1663
+ backgroundColor: themeVars.surfaceSecondary,
1664
+ borderRadius: "0 0 3px 3px",
1665
+ overflow: "hidden"
1666
+ },
1667
+ className: cn("arclo-image-gen-progress", className),
1585
1668
  ...props,
1586
- children: [
1669
+ children: isIndeterminate ? /* @__PURE__ */ jsxs(Fragment, { children: [
1587
1670
  /* @__PURE__ */ jsx(
1588
- Tag,
1671
+ "div",
1589
1672
  {
1590
- ...linkProps,
1591
- className: cn(
1592
- "arclo-citation-trigger transition-colors cursor-pointer",
1593
- variant === "superscript" && "align-super text-[0.65em] text-blue-600 hover:text-blue-800",
1594
- variant === "bracket" && "text-sm text-blue-600 hover:text-blue-800",
1595
- variant === "pill" && "inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-[0.6rem] font-medium text-blue-700 hover:bg-blue-200"
1596
- ),
1597
- "aria-label": sourceTitle ? `Source: ${sourceTitle}` : `Citation ${index}`,
1598
- children: label
1673
+ dangerouslySetInnerHTML: {
1674
+ __html: `<style>
1675
+ @keyframes arclo-progress-shimmer {
1676
+ 0% { transform: translateX(-100%); }
1677
+ 100% { transform: translateX(200%); }
1678
+ }
1679
+ </style>`
1680
+ }
1599
1681
  }
1600
1682
  ),
1601
- preview && showPreview && /* @__PURE__ */ jsxs(
1683
+ /* @__PURE__ */ jsx(
1602
1684
  "div",
1603
1685
  {
1604
- role: "tooltip",
1605
- className: "arclo-citation-preview absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-3 text-sm shadow-lg",
1686
+ style: {
1687
+ width: "40%",
1688
+ height: "100%",
1689
+ backgroundColor: themeVars.accent,
1690
+ animation: "arclo-progress-shimmer 1.2s ease-in-out infinite"
1691
+ }
1692
+ }
1693
+ )
1694
+ ] }) : /* @__PURE__ */ jsx(
1695
+ "div",
1696
+ {
1697
+ style: {
1698
+ width: `${Math.min(100, Math.max(0, progress))}%`,
1699
+ height: "100%",
1700
+ backgroundColor: themeVars.accent,
1701
+ transition: "width 0.3s ease-out"
1702
+ }
1703
+ }
1704
+ )
1705
+ }
1706
+ );
1707
+ }
1708
+ );
1709
+ Progress.displayName = "ImageGen.Progress";
1710
+ var stateLabels = {
1711
+ idle: "Waiting",
1712
+ pending: "Preparing...",
1713
+ generating: "Generating...",
1714
+ done: "Done",
1715
+ error: "Error"
1716
+ };
1717
+ var Overlay = forwardRef(
1718
+ ({ label, className, ...props }, ref) => {
1719
+ const { state } = useImageGenContext();
1720
+ if (state !== "pending" && state !== "generating") return null;
1721
+ const displayLabel = label ?? stateLabels[state];
1722
+ return /* @__PURE__ */ jsxs(
1723
+ "div",
1724
+ {
1725
+ ref,
1726
+ style: {
1727
+ position: "absolute",
1728
+ inset: 0,
1729
+ display: "flex",
1730
+ flexDirection: "column",
1731
+ alignItems: "center",
1732
+ justifyContent: "center",
1733
+ gap: "8px",
1734
+ backgroundColor: "rgba(0, 0, 0, 0.4)",
1735
+ borderRadius: themeVars.radius,
1736
+ color: "#ffffff"
1737
+ },
1738
+ className: cn("arclo-image-gen-overlay", className),
1739
+ ...props,
1740
+ children: [
1741
+ /* @__PURE__ */ jsxs(
1742
+ "svg",
1743
+ {
1744
+ width: "24",
1745
+ height: "24",
1746
+ viewBox: "0 0 24 24",
1747
+ fill: "none",
1748
+ style: { animation: "spin 1s linear infinite" },
1606
1749
  children: [
1607
- sourceTitle && /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-gray-900", children: sourceTitle }),
1608
- /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: preview }),
1609
- href && /* @__PURE__ */ jsx("p", { className: "mt-2 truncate text-xs text-blue-500", children: href }),
1610
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-white" })
1750
+ /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
1751
+ /* @__PURE__ */ jsx(
1752
+ "circle",
1753
+ {
1754
+ cx: "12",
1755
+ cy: "12",
1756
+ r: "10",
1757
+ stroke: "currentColor",
1758
+ strokeWidth: "3",
1759
+ strokeDasharray: "31.4 31.4",
1760
+ strokeLinecap: "round"
1761
+ }
1762
+ )
1611
1763
  ]
1612
1764
  }
1613
- )
1765
+ ),
1766
+ displayLabel && /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500 }, children: displayLabel })
1614
1767
  ]
1615
1768
  }
1616
1769
  );
1617
1770
  }
1618
1771
  );
1619
- CitationInline.displayName = "CitationInline";
1620
- var CitationGroup = forwardRef(
1621
- ({ children, className, ...props }, ref) => {
1622
- return /* @__PURE__ */ jsx(
1623
- "span",
1772
+ Overlay.displayName = "ImageGen.Overlay";
1773
+ var ErrorFallback2 = forwardRef(
1774
+ ({ message = "Failed to generate image.", className, ...props }, ref) => {
1775
+ const { state, onRetry } = useImageGenContext();
1776
+ if (state !== "error") return null;
1777
+ return /* @__PURE__ */ jsxs(
1778
+ "div",
1624
1779
  {
1625
1780
  ref,
1626
- className: cn("arclo-citation-group inline-flex gap-0.5", className),
1781
+ role: "alert",
1782
+ style: {
1783
+ borderColor: themeVars.error,
1784
+ backgroundColor: themeVars.errorSurface,
1785
+ color: themeVars.error
1786
+ },
1787
+ className: cn(
1788
+ "arclo-image-gen-error rounded-lg border p-4 text-sm",
1789
+ className
1790
+ ),
1627
1791
  ...props,
1628
- children
1792
+ children: [
1793
+ /* @__PURE__ */ jsx("p", { children: message }),
1794
+ onRetry && /* @__PURE__ */ jsx(
1795
+ "button",
1796
+ {
1797
+ type: "button",
1798
+ onClick: onRetry,
1799
+ style: { color: themeVars.error },
1800
+ className: "mt-2 underline cursor-pointer",
1801
+ children: "Try again"
1802
+ }
1803
+ )
1804
+ ]
1629
1805
  }
1630
1806
  );
1631
1807
  }
1632
1808
  );
1633
- CitationGroup.displayName = "CitationGroup";
1634
- var typeConfig = {
1635
- safety: {
1636
- icon: "\u{1F6E1}",
1809
+ ErrorFallback2.displayName = "ImageGen.ErrorFallback";
1810
+ var Toolbar2 = forwardRef(
1811
+ ({ children, className, ...props }, ref) => {
1812
+ const { state } = useImageGenContext();
1813
+ if (state !== "done") return null;
1814
+ return /* @__PURE__ */ jsx(
1815
+ "div",
1816
+ {
1817
+ ref,
1818
+ className: cn(
1819
+ "arclo-image-gen-toolbar mt-2 flex items-center gap-2 animate-in fade-in duration-150",
1820
+ className
1821
+ ),
1822
+ ...props,
1823
+ children
1824
+ }
1825
+ );
1826
+ }
1827
+ );
1828
+ Toolbar2.displayName = "ImageGen.Toolbar";
1829
+ var Download = forwardRef(
1830
+ ({ children, className, ...props }, ref) => {
1831
+ const { onDownload } = useImageGenContext();
1832
+ return /* @__PURE__ */ jsx(
1833
+ "button",
1834
+ {
1835
+ ref,
1836
+ type: "button",
1837
+ onClick: onDownload,
1838
+ style: {
1839
+ backgroundColor: themeVars.accent,
1840
+ color: themeVars.accentFg,
1841
+ borderRadius: themeVars.radius
1842
+ },
1843
+ className: cn(
1844
+ "arclo-image-gen-download px-3 py-1.5 text-sm cursor-pointer",
1845
+ className
1846
+ ),
1847
+ ...props,
1848
+ children: children ?? "Download"
1849
+ }
1850
+ );
1851
+ }
1852
+ );
1853
+ Download.displayName = "ImageGen.Download";
1854
+ var Retry = forwardRef(
1855
+ ({ children, className, ...props }, ref) => {
1856
+ const { onRetry } = useImageGenContext();
1857
+ return /* @__PURE__ */ jsx(
1858
+ "button",
1859
+ {
1860
+ ref,
1861
+ type: "button",
1862
+ onClick: onRetry,
1863
+ style: {
1864
+ borderColor: themeVars.border,
1865
+ color: themeVars.text,
1866
+ borderRadius: themeVars.radius,
1867
+ borderWidth: "1px",
1868
+ borderStyle: "solid"
1869
+ },
1870
+ className: cn(
1871
+ "arclo-image-gen-retry px-3 py-1.5 text-sm cursor-pointer",
1872
+ className
1873
+ ),
1874
+ ...props,
1875
+ children: children ?? "Retry"
1876
+ }
1877
+ );
1878
+ }
1879
+ );
1880
+ Retry.displayName = "ImageGen.Retry";
1881
+
1882
+ // src/video-gen/index.ts
1883
+ var video_gen_exports = {};
1884
+ __export(video_gen_exports, {
1885
+ ErrorFallback: () => ErrorFallback3,
1886
+ Placeholder: () => Placeholder2,
1887
+ PlayButton: () => PlayButton,
1888
+ Player: () => Player,
1889
+ Progress: () => Progress2,
1890
+ Root: () => Root8,
1891
+ StageLabel: () => StageLabel,
1892
+ Thumbnail: () => Thumbnail,
1893
+ Toolbar: () => Toolbar3
1894
+ });
1895
+ var VideoGenContext = createContext(null);
1896
+ function useVideoGenContext() {
1897
+ const ctx = useContext(VideoGenContext);
1898
+ if (!ctx) {
1899
+ throw new Error(
1900
+ "useVideoGenContext must be used within <VideoGen.Root>"
1901
+ );
1902
+ }
1903
+ return ctx;
1904
+ }
1905
+ var Root8 = forwardRef(
1906
+ ({
1907
+ state,
1908
+ src = null,
1909
+ poster = null,
1910
+ progress,
1911
+ aspectRatio = "16/9",
1912
+ duration = null,
1913
+ prompt,
1914
+ onRetry,
1915
+ onDownload,
1916
+ onPlay,
1917
+ children,
1918
+ className,
1919
+ style,
1920
+ ...props
1921
+ }, ref) => {
1922
+ const ctx = {
1923
+ state,
1924
+ src,
1925
+ poster,
1926
+ progress,
1927
+ aspectRatio,
1928
+ duration,
1929
+ prompt,
1930
+ onRetry,
1931
+ onDownload,
1932
+ onPlay
1933
+ };
1934
+ return /* @__PURE__ */ jsx(VideoGenContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
1935
+ "div",
1936
+ {
1937
+ ref,
1938
+ "data-state": state,
1939
+ className: cn("arclo-video-gen relative overflow-hidden", className),
1940
+ style: {
1941
+ aspectRatio,
1942
+ borderRadius: themeVars.radius,
1943
+ ...style
1944
+ },
1945
+ ...props,
1946
+ children
1947
+ }
1948
+ ) });
1949
+ }
1950
+ );
1951
+ Root8.displayName = "VideoGen.Root";
1952
+ var Placeholder2 = forwardRef(
1953
+ ({ className, ...props }, ref) => {
1954
+ const { state, poster } = useVideoGenContext();
1955
+ const id = useId().replace(/:/g, "");
1956
+ const visible = (state === "idle" || state === "queued" || state === "processing") && !poster;
1957
+ if (!visible) return null;
1958
+ return /* @__PURE__ */ jsxs(
1959
+ "div",
1960
+ {
1961
+ ref,
1962
+ role: "status",
1963
+ "aria-label": "Preparing video",
1964
+ className: cn(
1965
+ "arclo-video-gen-placeholder absolute inset-0 flex items-center justify-center",
1966
+ className
1967
+ ),
1968
+ style: { backgroundColor: themeVars.surfaceSecondary },
1969
+ ...props,
1970
+ children: [
1971
+ /* @__PURE__ */ jsx(
1972
+ "style",
1973
+ {
1974
+ dangerouslySetInnerHTML: {
1975
+ __html: `
1976
+ @keyframes arclo-vg-shimmer-${id} {
1977
+ 0% { background-position: -200% 0; }
1978
+ 100% { background-position: 200% 0; }
1979
+ }`
1980
+ }
1981
+ }
1982
+ ),
1983
+ /* @__PURE__ */ jsx(
1984
+ "div",
1985
+ {
1986
+ className: "absolute inset-0",
1987
+ style: {
1988
+ background: `linear-gradient(90deg, transparent 0%, ${themeVars.border} 50%, transparent 100%)`,
1989
+ backgroundSize: "200% 100%",
1990
+ animation: `arclo-vg-shimmer-${id} 2s ease-in-out infinite`,
1991
+ opacity: 0.5
1992
+ }
1993
+ }
1994
+ ),
1995
+ /* @__PURE__ */ jsxs(
1996
+ "svg",
1997
+ {
1998
+ width: "48",
1999
+ height: "48",
2000
+ viewBox: "0 0 24 24",
2001
+ fill: "none",
2002
+ stroke: "currentColor",
2003
+ strokeWidth: "1.5",
2004
+ strokeLinecap: "round",
2005
+ strokeLinejoin: "round",
2006
+ style: { color: themeVars.textMuted, position: "relative", zIndex: 1 },
2007
+ children: [
2008
+ /* @__PURE__ */ jsx("path", { d: "M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
2009
+ /* @__PURE__ */ jsx("path", { d: "M4 11V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4" }),
2010
+ /* @__PURE__ */ jsx("path", { d: "M4 11h16" }),
2011
+ /* @__PURE__ */ jsx("path", { d: "M7 5l2 6" }),
2012
+ /* @__PURE__ */ jsx("path", { d: "M11 5l2 6" }),
2013
+ /* @__PURE__ */ jsx("path", { d: "M15 5l2 6" })
2014
+ ]
2015
+ }
2016
+ )
2017
+ ]
2018
+ }
2019
+ );
2020
+ }
2021
+ );
2022
+ Placeholder2.displayName = "VideoGen.Placeholder";
2023
+ var Thumbnail = forwardRef(
2024
+ ({ className, style: styleProp, ...props }, ref) => {
2025
+ const { state, poster } = useVideoGenContext();
2026
+ const visible = poster && (state === "processing" || state === "rendering" || state === "done");
2027
+ if (!visible) return null;
2028
+ return /* @__PURE__ */ jsx(
2029
+ "img",
2030
+ {
2031
+ ref,
2032
+ src: poster,
2033
+ alt: "Video thumbnail",
2034
+ className: cn(
2035
+ "arclo-video-gen-thumbnail absolute inset-0 h-full w-full object-cover",
2036
+ className
2037
+ ),
2038
+ style: {
2039
+ borderRadius: themeVars.radius,
2040
+ ...styleProp
2041
+ },
2042
+ ...props
2043
+ }
2044
+ );
2045
+ }
2046
+ );
2047
+ Thumbnail.displayName = "VideoGen.Thumbnail";
2048
+ var Player = forwardRef(
2049
+ ({ className, style: styleProp, autoPlay, loop, muted, ...props }, ref) => {
2050
+ const { state, src, poster } = useVideoGenContext();
2051
+ if (state !== "done" || !src) return null;
2052
+ return /* @__PURE__ */ jsx(
2053
+ "video",
2054
+ {
2055
+ ref,
2056
+ src,
2057
+ poster: poster ?? void 0,
2058
+ controls: true,
2059
+ autoPlay,
2060
+ loop,
2061
+ muted,
2062
+ className: cn(
2063
+ "arclo-video-gen-player absolute inset-0 h-full w-full object-contain",
2064
+ className
2065
+ ),
2066
+ style: {
2067
+ borderRadius: themeVars.radius,
2068
+ backgroundColor: themeVars.surface,
2069
+ ...styleProp
2070
+ },
2071
+ ...props
2072
+ }
2073
+ );
2074
+ }
2075
+ );
2076
+ Player.displayName = "VideoGen.Player";
2077
+ var Progress2 = forwardRef(
2078
+ ({ className, ...props }, ref) => {
2079
+ const { state, progress } = useVideoGenContext();
2080
+ const id = useId().replace(/:/g, "");
2081
+ const visible = state === "queued" || state === "processing" || state === "rendering";
2082
+ if (!visible) return null;
2083
+ const isDeterminate = progress != null;
2084
+ return /* @__PURE__ */ jsxs(
2085
+ "div",
2086
+ {
2087
+ ref,
2088
+ role: "progressbar",
2089
+ "aria-valuenow": isDeterminate ? progress : void 0,
2090
+ "aria-valuemin": 0,
2091
+ "aria-valuemax": 100,
2092
+ className: cn(
2093
+ "arclo-video-gen-progress absolute bottom-0 left-0 right-0 h-1",
2094
+ className
2095
+ ),
2096
+ style: { backgroundColor: `color-mix(in srgb, ${themeVars.accent} 20%, transparent)` },
2097
+ ...props,
2098
+ children: [
2099
+ /* @__PURE__ */ jsx(
2100
+ "style",
2101
+ {
2102
+ dangerouslySetInnerHTML: {
2103
+ __html: `
2104
+ @keyframes arclo-vg-indeterminate-${id} {
2105
+ 0% { transform: translateX(-100%); }
2106
+ 100% { transform: translateX(400%); }
2107
+ }`
2108
+ }
2109
+ }
2110
+ ),
2111
+ /* @__PURE__ */ jsx(
2112
+ "div",
2113
+ {
2114
+ className: "h-full",
2115
+ style: isDeterminate ? {
2116
+ width: `${Math.min(100, Math.max(0, progress))}%`,
2117
+ backgroundColor: themeVars.accent,
2118
+ transition: "width 0.3s ease"
2119
+ } : {
2120
+ width: "25%",
2121
+ backgroundColor: themeVars.accent,
2122
+ animation: `arclo-vg-indeterminate-${id} 1.5s ease-in-out infinite`
2123
+ }
2124
+ }
2125
+ )
2126
+ ]
2127
+ }
2128
+ );
2129
+ }
2130
+ );
2131
+ Progress2.displayName = "VideoGen.Progress";
2132
+ function getAutoLabel(state, progress) {
2133
+ switch (state) {
2134
+ case "idle":
2135
+ return "";
2136
+ case "queued":
2137
+ return "Queued...";
2138
+ case "processing":
2139
+ return progress != null ? `Processing ${Math.round(progress)}%` : "Processing...";
2140
+ case "rendering":
2141
+ return progress != null ? `Rendering ${Math.round(progress)}%` : "Rendering...";
2142
+ case "done":
2143
+ return "Complete";
2144
+ case "error":
2145
+ return "Failed";
2146
+ default:
2147
+ return "";
2148
+ }
2149
+ }
2150
+ var StageLabel = forwardRef(
2151
+ ({ label, className, ...props }, ref) => {
2152
+ const { state, progress } = useVideoGenContext();
2153
+ const id = useId().replace(/:/g, "");
2154
+ const displayLabel = label ?? getAutoLabel(state, progress);
2155
+ const isActive = state === "queued" || state === "processing" || state === "rendering";
2156
+ if (!displayLabel) return null;
2157
+ const accentColor = themeVars.accent;
2158
+ const brightColor = themeVars.accentBright;
2159
+ return /* @__PURE__ */ jsxs(
2160
+ "span",
2161
+ {
2162
+ ref,
2163
+ "data-state": state,
2164
+ className: cn(
2165
+ "arclo-video-gen-stage-label text-sm font-medium",
2166
+ className
2167
+ ),
2168
+ style: { color: accentColor },
2169
+ ...props,
2170
+ children: [
2171
+ /* @__PURE__ */ jsx(
2172
+ "style",
2173
+ {
2174
+ dangerouslySetInnerHTML: {
2175
+ __html: `
2176
+ @keyframes arclo-vg-sweep-${id} {
2177
+ 0%, 100% { color: ${accentColor}; opacity: 0.5; }
2178
+ 50% { color: ${brightColor}; opacity: 1; }
2179
+ }`
2180
+ }
2181
+ }
2182
+ ),
2183
+ isActive ? /* @__PURE__ */ jsx("span", { "aria-label": displayLabel, children: displayLabel.split("").map((char, i) => /* @__PURE__ */ jsx(
2184
+ "span",
2185
+ {
2186
+ style: {
2187
+ display: "inline-block",
2188
+ animation: `arclo-vg-sweep-${id} 1.5s ease-in-out infinite`,
2189
+ animationDelay: `${i * 0.08}s`
2190
+ },
2191
+ children: char === " " ? "\xA0" : char
2192
+ },
2193
+ i
2194
+ )) }) : /* @__PURE__ */ jsx("span", { children: displayLabel })
2195
+ ]
2196
+ }
2197
+ );
2198
+ }
2199
+ );
2200
+ StageLabel.displayName = "VideoGen.StageLabel";
2201
+ var ErrorFallback3 = forwardRef(
2202
+ ({ message = "Video generation failed.", className, ...props }, ref) => {
2203
+ const { state, onRetry } = useVideoGenContext();
2204
+ if (state !== "error") return null;
2205
+ return /* @__PURE__ */ jsxs(
2206
+ "div",
2207
+ {
2208
+ ref,
2209
+ role: "alert",
2210
+ className: cn(
2211
+ "arclo-video-gen-error absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-sm",
2212
+ className
2213
+ ),
2214
+ style: {
2215
+ backgroundColor: themeVars.errorSurface,
2216
+ color: themeVars.error,
2217
+ borderRadius: themeVars.radius
2218
+ },
2219
+ ...props,
2220
+ children: [
2221
+ /* @__PURE__ */ jsxs(
2222
+ "svg",
2223
+ {
2224
+ width: "24",
2225
+ height: "24",
2226
+ viewBox: "0 0 24 24",
2227
+ fill: "none",
2228
+ stroke: "currentColor",
2229
+ strokeWidth: "2",
2230
+ strokeLinecap: "round",
2231
+ strokeLinejoin: "round",
2232
+ children: [
2233
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
2234
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
2235
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
2236
+ ]
2237
+ }
2238
+ ),
2239
+ /* @__PURE__ */ jsx("p", { children: message }),
2240
+ onRetry && /* @__PURE__ */ jsx(
2241
+ "button",
2242
+ {
2243
+ type: "button",
2244
+ onClick: onRetry,
2245
+ className: "mt-1 underline cursor-pointer",
2246
+ style: { color: themeVars.error },
2247
+ children: "Try again"
2248
+ }
2249
+ )
2250
+ ]
2251
+ }
2252
+ );
2253
+ }
2254
+ );
2255
+ ErrorFallback3.displayName = "VideoGen.ErrorFallback";
2256
+ var Toolbar3 = forwardRef(
2257
+ ({ children, className, ...props }, ref) => {
2258
+ const { state } = useVideoGenContext();
2259
+ if (state !== "done") return null;
2260
+ return /* @__PURE__ */ jsx(
2261
+ "div",
2262
+ {
2263
+ ref,
2264
+ className: cn(
2265
+ "arclo-video-gen-toolbar absolute bottom-4 right-4 flex items-center gap-2 animate-in fade-in duration-150",
2266
+ className
2267
+ ),
2268
+ ...props,
2269
+ children
2270
+ }
2271
+ );
2272
+ }
2273
+ );
2274
+ Toolbar3.displayName = "VideoGen.Toolbar";
2275
+ var PlayButton = forwardRef(
2276
+ ({ className, children, ...props }, ref) => {
2277
+ const { state, onPlay, src } = useVideoGenContext();
2278
+ useRef(null);
2279
+ const visible = state === "done" && src;
2280
+ if (!visible) return null;
2281
+ const handleClick = () => {
2282
+ if (onPlay) {
2283
+ onPlay();
2284
+ } else {
2285
+ const root = ref?.current?.closest(
2286
+ ".arclo-video-gen"
2287
+ );
2288
+ const video = root?.querySelector("video");
2289
+ if (video) {
2290
+ video.play();
2291
+ }
2292
+ }
2293
+ };
2294
+ return /* @__PURE__ */ jsx(
2295
+ "button",
2296
+ {
2297
+ ref,
2298
+ type: "button",
2299
+ "aria-label": "Play video",
2300
+ onClick: handleClick,
2301
+ className: cn(
2302
+ "arclo-video-gen-play-button absolute inset-0 m-auto flex h-16 w-16 items-center justify-center rounded-full cursor-pointer transition-transform hover:scale-110",
2303
+ className
2304
+ ),
2305
+ style: {
2306
+ backgroundColor: themeVars.accent,
2307
+ color: themeVars.accentFg
2308
+ },
2309
+ ...props,
2310
+ children: children ?? /* @__PURE__ */ jsx(
2311
+ "svg",
2312
+ {
2313
+ width: "28",
2314
+ height: "28",
2315
+ viewBox: "0 0 24 24",
2316
+ fill: "currentColor",
2317
+ children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
2318
+ }
2319
+ )
2320
+ }
2321
+ );
2322
+ }
2323
+ );
2324
+ PlayButton.displayName = "VideoGen.PlayButton";
2325
+ var levelConfig = {
2326
+ high: {
2327
+ label: "High confidence",
2328
+ classes: "bg-emerald-50 text-emerald-700 border-emerald-200"
2329
+ },
2330
+ medium: {
2331
+ label: "Medium confidence",
2332
+ classes: "bg-amber-50 text-amber-700 border-amber-200"
2333
+ },
2334
+ low: {
2335
+ label: "Low confidence",
2336
+ classes: "bg-red-50 text-red-700 border-red-200"
2337
+ },
2338
+ unknown: {
2339
+ label: "Confidence unknown",
2340
+ classes: "bg-gray-50 text-gray-500 border-gray-200"
2341
+ }
2342
+ };
2343
+ var ConfidenceBadge = forwardRef(
2344
+ ({ level, label, variant = "badge", className, ...props }, ref) => {
2345
+ const config = levelConfig[level];
2346
+ const displayLabel = label ?? config.label;
2347
+ if (variant === "dot") {
2348
+ return /* @__PURE__ */ jsx(
2349
+ "span",
2350
+ {
2351
+ ref,
2352
+ role: "status",
2353
+ "aria-label": displayLabel,
2354
+ title: displayLabel,
2355
+ className: cn(
2356
+ "arclo-confidence-dot inline-block h-2.5 w-2.5 shrink-0 rounded-full",
2357
+ level === "high" && "bg-emerald-500",
2358
+ level === "medium" && "bg-amber-500",
2359
+ level === "low" && "bg-red-500",
2360
+ level === "unknown" && "bg-gray-400",
2361
+ className
2362
+ ),
2363
+ ...props
2364
+ }
2365
+ );
2366
+ }
2367
+ if (variant === "inline") {
2368
+ return /* @__PURE__ */ jsx(
2369
+ "span",
2370
+ {
2371
+ ref,
2372
+ role: "status",
2373
+ className: cn(
2374
+ "arclo-confidence-inline text-xs italic",
2375
+ level === "high" && "text-emerald-600",
2376
+ level === "medium" && "text-amber-600",
2377
+ level === "low" && "text-red-600",
2378
+ level === "unknown" && "text-gray-400",
2379
+ className
2380
+ ),
2381
+ ...props,
2382
+ children: displayLabel
2383
+ }
2384
+ );
2385
+ }
2386
+ return /* @__PURE__ */ jsxs(
2387
+ "span",
2388
+ {
2389
+ ref,
2390
+ role: "status",
2391
+ className: cn(
2392
+ "arclo-confidence-badge inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium",
2393
+ config.classes,
2394
+ className
2395
+ ),
2396
+ ...props,
2397
+ children: [
2398
+ /* @__PURE__ */ jsx(
2399
+ "span",
2400
+ {
2401
+ className: cn(
2402
+ "h-2 w-2 shrink-0 rounded-full",
2403
+ level === "high" && "bg-emerald-500",
2404
+ level === "medium" && "bg-amber-500",
2405
+ level === "low" && "bg-red-500",
2406
+ level === "unknown" && "bg-gray-400"
2407
+ )
2408
+ }
2409
+ ),
2410
+ displayLabel
2411
+ ]
2412
+ }
2413
+ );
2414
+ }
2415
+ );
2416
+ ConfidenceBadge.displayName = "ConfidenceBadge";
2417
+ var CitationInline = forwardRef(
2418
+ ({
2419
+ index,
2420
+ href,
2421
+ sourceTitle,
2422
+ preview,
2423
+ variant = "superscript",
2424
+ className,
2425
+ ...props
2426
+ }, ref) => {
2427
+ const [showPreview, setShowPreview] = useState(false);
2428
+ const label = variant === "bracket" ? `[${index}]` : `${index}`;
2429
+ const Tag = href ? "a" : "span";
2430
+ const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
2431
+ return /* @__PURE__ */ jsxs(
2432
+ "span",
2433
+ {
2434
+ ref,
2435
+ className: cn("arclo-citation relative inline-block", className),
2436
+ onMouseEnter: () => setShowPreview(true),
2437
+ onMouseLeave: () => setShowPreview(false),
2438
+ ...props,
2439
+ children: [
2440
+ /* @__PURE__ */ jsx(
2441
+ Tag,
2442
+ {
2443
+ ...linkProps,
2444
+ className: cn(
2445
+ "arclo-citation-trigger transition-colors cursor-pointer",
2446
+ variant === "superscript" && "align-super text-[0.65em] text-blue-600 hover:text-blue-800",
2447
+ variant === "bracket" && "text-sm text-blue-600 hover:text-blue-800",
2448
+ variant === "pill" && "inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-[0.6rem] font-medium text-blue-700 hover:bg-blue-200"
2449
+ ),
2450
+ "aria-label": sourceTitle ? `Source: ${sourceTitle}` : `Citation ${index}`,
2451
+ children: label
2452
+ }
2453
+ ),
2454
+ preview && showPreview && /* @__PURE__ */ jsxs(
2455
+ "div",
2456
+ {
2457
+ role: "tooltip",
2458
+ className: "arclo-citation-preview absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-3 text-sm shadow-lg",
2459
+ children: [
2460
+ sourceTitle && /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-gray-900", children: sourceTitle }),
2461
+ /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: preview }),
2462
+ href && /* @__PURE__ */ jsx("p", { className: "mt-2 truncate text-xs text-blue-500", children: href }),
2463
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-white" })
2464
+ ]
2465
+ }
2466
+ )
2467
+ ]
2468
+ }
2469
+ );
2470
+ }
2471
+ );
2472
+ CitationInline.displayName = "CitationInline";
2473
+ var CitationGroup = forwardRef(
2474
+ ({ children, className, ...props }, ref) => {
2475
+ return /* @__PURE__ */ jsx(
2476
+ "span",
2477
+ {
2478
+ ref,
2479
+ className: cn("arclo-citation-group inline-flex gap-0.5", className),
2480
+ ...props,
2481
+ children
2482
+ }
2483
+ );
2484
+ }
2485
+ );
2486
+ CitationGroup.displayName = "CitationGroup";
2487
+ var typeConfig = {
2488
+ safety: {
2489
+ icon: "\u{1F6E1}",
1637
2490
  defaultReason: "I can't help with that request for safety reasons.",
1638
2491
  accent: "border-red-200 bg-red-50"
1639
2492
  },
@@ -2630,59 +3483,94 @@ var CodeBlock = forwardRef(
2630
3483
  "arclo-code-block overflow-hidden rounded-xl border",
2631
3484
  className
2632
3485
  ),
2633
- style: { backgroundColor: "#1e1e2e", borderColor: "#313244" },
3486
+ style: {
3487
+ backgroundColor: themeVars.surfaceSecondary,
3488
+ borderColor: themeVars.border
3489
+ },
2634
3490
  ...props,
2635
3491
  children: [
2636
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", style: { borderBottom: "1px solid #313244" }, children: [
2637
- /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider", style: { color: "#a6adc8" }, children: language ?? "code" }),
2638
- /* @__PURE__ */ jsx(
2639
- "button",
2640
- {
2641
- type: "button",
2642
- onClick: handleCopy,
2643
- className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors cursor-pointer",
2644
- style: { color: "#a6adc8" },
2645
- children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
2646
- /* @__PURE__ */ jsx(
2647
- "svg",
2648
- {
2649
- className: "h-3.5 w-3.5 text-emerald-400",
2650
- viewBox: "0 0 24 24",
2651
- fill: "none",
2652
- stroke: "currentColor",
2653
- strokeWidth: "2",
2654
- strokeLinecap: "round",
2655
- strokeLinejoin: "round",
2656
- children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
2657
- }
2658
- ),
2659
- "Copied"
2660
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2661
- /* @__PURE__ */ jsxs(
2662
- "svg",
2663
- {
2664
- className: "h-3.5 w-3.5",
2665
- viewBox: "0 0 24 24",
2666
- fill: "none",
2667
- stroke: "currentColor",
2668
- strokeWidth: "2",
2669
- strokeLinecap: "round",
2670
- strokeLinejoin: "round",
2671
- children: [
2672
- /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
2673
- /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
2674
- ]
2675
- }
2676
- ),
2677
- "Copy"
2678
- ] })
2679
- }
2680
- )
2681
- ] }),
2682
- /* @__PURE__ */ jsx("div", { className: "overflow-auto [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.700)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-700", style: { maxHeight }, children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "font-mono", style: { color: "#cdd6f4" }, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
2683
- showLineNumbers && /* @__PURE__ */ jsx("span", { className: "mr-4 inline-block w-8 shrink-0 select-none text-right", style: { color: "#585b70" }, children: i + 1 }),
2684
- /* @__PURE__ */ jsx("span", { className: "flex-1", children: line || "\n" })
2685
- ] }, i)) }) }) })
3492
+ /* @__PURE__ */ jsxs(
3493
+ "div",
3494
+ {
3495
+ className: "flex items-center justify-between px-4 py-2",
3496
+ style: { borderBottom: `1px solid ${themeVars.border}` },
3497
+ children: [
3498
+ /* @__PURE__ */ jsx(
3499
+ "span",
3500
+ {
3501
+ className: "text-[11px] font-medium uppercase tracking-wider",
3502
+ style: { color: themeVars.textMuted },
3503
+ children: language ?? "code"
3504
+ }
3505
+ ),
3506
+ /* @__PURE__ */ jsx(
3507
+ "button",
3508
+ {
3509
+ type: "button",
3510
+ onClick: handleCopy,
3511
+ className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors cursor-pointer",
3512
+ style: { color: themeVars.textMuted },
3513
+ children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
3514
+ /* @__PURE__ */ jsx(
3515
+ "svg",
3516
+ {
3517
+ className: "h-3.5 w-3.5",
3518
+ style: { color: "#10b981" },
3519
+ viewBox: "0 0 24 24",
3520
+ fill: "none",
3521
+ stroke: "currentColor",
3522
+ strokeWidth: "2",
3523
+ strokeLinecap: "round",
3524
+ strokeLinejoin: "round",
3525
+ children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
3526
+ }
3527
+ ),
3528
+ "Copied"
3529
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
3530
+ /* @__PURE__ */ jsxs(
3531
+ "svg",
3532
+ {
3533
+ className: "h-3.5 w-3.5",
3534
+ viewBox: "0 0 24 24",
3535
+ fill: "none",
3536
+ stroke: "currentColor",
3537
+ strokeWidth: "2",
3538
+ strokeLinecap: "round",
3539
+ strokeLinejoin: "round",
3540
+ children: [
3541
+ /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
3542
+ /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
3543
+ ]
3544
+ }
3545
+ ),
3546
+ "Copy"
3547
+ ] })
3548
+ }
3549
+ )
3550
+ ]
3551
+ }
3552
+ ),
3553
+ /* @__PURE__ */ jsx(
3554
+ "div",
3555
+ {
3556
+ className: "overflow-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",
3557
+ style: {
3558
+ maxHeight,
3559
+ scrollbarColor: `${themeVars.border} transparent`
3560
+ },
3561
+ children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "font-mono", style: { color: themeVars.text }, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
3562
+ showLineNumbers && /* @__PURE__ */ jsx(
3563
+ "span",
3564
+ {
3565
+ className: "mr-4 inline-block w-8 shrink-0 select-none text-right",
3566
+ style: { color: themeVars.textMuted },
3567
+ children: i + 1
3568
+ }
3569
+ ),
3570
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: line || "\n" })
3571
+ ] }, i)) }) })
3572
+ }
3573
+ )
2686
3574
  ]
2687
3575
  }
2688
3576
  );
@@ -2958,6 +3846,6 @@ var SuggestTopics = forwardRef(
2958
3846
  );
2959
3847
  SuggestTopics.displayName = "SuggestTopics";
2960
3848
 
2961
- export { chat_thread_exports as ChatThread, CitationGroup, CitationInline, CodeBlock, ConfidenceBadge, ConversationBranch, feedback_bar_exports as FeedbackBar, FileAttachment, MarkdownRenderer, ModelSelector, prompt_box_exports as PromptBox, RefusalCard, SourceCard, StatusIndicator, streaming_text_exports as StreamingText, SuggestTopics, thinking_block_exports as ThinkingBlock, TokenUsage, tool_call_exports as ToolCall, TopicCard, useStreamingText };
3849
+ export { chat_thread_exports as ChatThread, CitationGroup, CitationInline, CodeBlock, ConfidenceBadge, ConversationBranch, feedback_bar_exports as FeedbackBar, FileAttachment, image_gen_exports as ImageGen, MarkdownRenderer, ModelSelector, prompt_box_exports as PromptBox, RefusalCard, SourceCard, StatusIndicator, streaming_text_exports as StreamingText, SuggestTopics, thinking_block_exports as ThinkingBlock, TokenUsage, tool_call_exports as ToolCall, TopicCard, video_gen_exports as VideoGen, useStreamingText };
2962
3850
  //# sourceMappingURL=index.js.map
2963
3851
  //# sourceMappingURL=index.js.map