@arc-lo/ui 0.2.1 → 0.3.0

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