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