@arc-lo/ui 0.2.0 → 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 +1069 -186
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +197 -88
- package/dist/index.d.ts +197 -88
- package/dist/index.js +1069 -188
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/styles.css +184 -17
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
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
1432
|
+
color: themeVars.accentFg
|
|
1417
1433
|
} : {
|
|
1418
|
-
backgroundColor: themeVars.
|
|
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
|
-
|
|
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
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
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
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
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
|
-
"
|
|
1564
|
+
"div",
|
|
1537
1565
|
{
|
|
1538
1566
|
ref,
|
|
1539
1567
|
role: "status",
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
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
|
-
"
|
|
1580
|
+
"div",
|
|
1549
1581
|
{
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1566
|
-
var
|
|
1567
|
-
({
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
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
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
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
|
-
|
|
1666
|
+
"div",
|
|
1591
1667
|
{
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
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
|
-
|
|
1678
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1604
1679
|
"div",
|
|
1605
1680
|
{
|
|
1606
|
-
|
|
1607
|
-
|
|
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
|
-
|
|
1610
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1611
|
-
|
|
1612
|
-
|
|
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
|
-
|
|
1622
|
-
var
|
|
1623
|
-
({
|
|
1624
|
-
|
|
1625
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1636
|
-
var
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
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: {
|
|
3481
|
+
style: {
|
|
3482
|
+
backgroundColor: themeVars.surfaceSecondary,
|
|
3483
|
+
borderColor: themeVars.border
|
|
3484
|
+
},
|
|
2636
3485
|
...props,
|
|
2637
3486
|
children: [
|
|
2638
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
"
|
|
2642
|
-
{
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
"
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
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
|