@quilltap/theme-storybook 1.0.45 → 1.0.46
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/{chunk-77W5TNBS.mjs → chunk-ENP3AWD5.mjs} +675 -583
- package/dist/index.css +97 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +676 -583
- package/dist/index.mjs +4 -2
- package/dist/stories/index.d.mts +19 -1
- package/dist/stories/index.d.ts +19 -1
- package/dist/stories/index.js +678 -585
- package/dist/stories/index.mjs +5 -3
- package/package.json +1 -1
- package/src/css/qt-components.css +128 -0
- package/src/stories/components/Workspace.tsx +139 -0
- package/src/stories/index.ts +1 -0
|
@@ -1426,244 +1426,335 @@ var Tabs = () => {
|
|
|
1426
1426
|
] });
|
|
1427
1427
|
};
|
|
1428
1428
|
|
|
1429
|
-
// src/stories/components/
|
|
1429
|
+
// src/stories/components/Workspace.tsx
|
|
1430
|
+
import { useState as useState3 } from "react";
|
|
1430
1431
|
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1431
|
-
var
|
|
1432
|
+
var SectionHeading = ({ children }) => /* @__PURE__ */ jsx13(
|
|
1433
|
+
"h3",
|
|
1434
|
+
{
|
|
1435
|
+
style: {
|
|
1436
|
+
fontSize: "1.125rem",
|
|
1437
|
+
fontWeight: 700,
|
|
1438
|
+
marginBottom: "1rem",
|
|
1439
|
+
borderBottom: "1px solid var(--color-border)",
|
|
1440
|
+
paddingBottom: "0.5rem"
|
|
1441
|
+
},
|
|
1442
|
+
children
|
|
1443
|
+
}
|
|
1444
|
+
);
|
|
1445
|
+
var CloseGlyph = () => /* @__PURE__ */ jsx13("svg", { className: "qt-tab-close-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
|
|
1446
|
+
var WorkspaceTab = ({ label, active, closeable = true }) => /* @__PURE__ */ jsxs13(
|
|
1447
|
+
"div",
|
|
1448
|
+
{
|
|
1449
|
+
className: `qt-tab ${active ? "qt-tab-active" : ""}`,
|
|
1450
|
+
style: { display: "inline-flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" },
|
|
1451
|
+
children: [
|
|
1452
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-tab-label", children: label }),
|
|
1453
|
+
closeable && /* @__PURE__ */ jsx13("span", { className: "qt-tab-close", role: "button", "aria-label": `Close ${label}`, children: /* @__PURE__ */ jsx13(CloseGlyph, {}) })
|
|
1454
|
+
]
|
|
1455
|
+
}
|
|
1456
|
+
);
|
|
1457
|
+
var Workspace = () => {
|
|
1458
|
+
const [active, setActive] = useState3("salon");
|
|
1432
1459
|
return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.5rem" }, children: [
|
|
1433
|
-
/* @__PURE__ */ jsx13("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "
|
|
1460
|
+
/* @__PURE__ */ jsx13("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Workspace" }),
|
|
1461
|
+
/* @__PURE__ */ jsxs13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1.5rem", maxWidth: "46rem" }, children: [
|
|
1462
|
+
"The tabbed two-pane shell. Set ",
|
|
1463
|
+
/* @__PURE__ */ jsx13("code", { children: "--qt-workspace-accent" }),
|
|
1464
|
+
" in your theme to re-tint the active tab, the pane divider, and the split drop-zone in one move."
|
|
1465
|
+
] }),
|
|
1434
1466
|
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1435
|
-
/* @__PURE__ */ jsx13(
|
|
1436
|
-
/* @__PURE__ */
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1467
|
+
/* @__PURE__ */ jsx13(SectionHeading, { children: "Tab strip \u2014 active & inactive" }),
|
|
1468
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-tab-strip", role: "tablist", style: { borderRadius: "0.5rem 0.5rem 0 0" }, children: [
|
|
1469
|
+
{ id: "home", label: "Home" },
|
|
1470
|
+
{ id: "salon", label: "The Salon \u2014 Bertie" },
|
|
1471
|
+
{ id: "aurora", label: "Aurora" },
|
|
1472
|
+
{ id: "scriptorium", label: "The Scriptorium" }
|
|
1473
|
+
].map((t) => /* @__PURE__ */ jsx13("div", { onClick: () => setActive(t.id), children: /* @__PURE__ */ jsx13(WorkspaceTab, { label: t.label, active: active === t.id, closeable: t.id !== "home" }) }, t.id)) })
|
|
1474
|
+
] }),
|
|
1475
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1476
|
+
/* @__PURE__ */ jsx13(SectionHeading, { children: "Pane divider" }),
|
|
1477
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem" }, children: "Resizable split between the two panes. Hover (or focus) to see the accent." }),
|
|
1478
|
+
/* @__PURE__ */ jsxs13(
|
|
1479
|
+
"div",
|
|
1480
|
+
{
|
|
1481
|
+
style: {
|
|
1482
|
+
display: "grid",
|
|
1483
|
+
gridTemplateColumns: "1fr 8px 1fr",
|
|
1484
|
+
height: "120px",
|
|
1485
|
+
border: "1px solid var(--color-border)",
|
|
1486
|
+
borderRadius: "0.5rem",
|
|
1487
|
+
overflow: "hidden"
|
|
1488
|
+
},
|
|
1489
|
+
children: [
|
|
1490
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-panel", style: { display: "grid", placeItems: "center" }, children: "Left pane" }),
|
|
1491
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-workspace-divider", tabIndex: 0, role: "separator", "aria-label": "Resize panes", children: /* @__PURE__ */ jsx13("div", { className: "qt-workspace-divider-grip" }) }),
|
|
1492
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-panel", style: { display: "grid", placeItems: "center" }, children: "Right pane" })
|
|
1493
|
+
]
|
|
1494
|
+
}
|
|
1495
|
+
)
|
|
1496
|
+
] }),
|
|
1497
|
+
/* @__PURE__ */ jsxs13("section", { children: [
|
|
1498
|
+
/* @__PURE__ */ jsx13(SectionHeading, { children: "Split drop-zone" }),
|
|
1499
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem" }, children: "Shown while a tab is dragged toward a pane edge to create the split." }),
|
|
1500
|
+
/* @__PURE__ */ jsxs13(
|
|
1501
|
+
"div",
|
|
1502
|
+
{
|
|
1503
|
+
style: {
|
|
1504
|
+
position: "relative",
|
|
1505
|
+
height: "120px",
|
|
1506
|
+
border: "1px solid var(--color-border)",
|
|
1507
|
+
borderRadius: "0.5rem",
|
|
1508
|
+
overflow: "hidden"
|
|
1509
|
+
},
|
|
1510
|
+
children: [
|
|
1511
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-panel", style: { height: "100%", display: "grid", placeItems: "center" }, children: "Pane" }),
|
|
1512
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-tab-drop-zone", children: /* @__PURE__ */ jsx13("span", { className: "qt-tab-drop-zone-hint", children: "Drop to split" }) })
|
|
1513
|
+
]
|
|
1514
|
+
}
|
|
1515
|
+
)
|
|
1516
|
+
] })
|
|
1517
|
+
] });
|
|
1518
|
+
};
|
|
1519
|
+
|
|
1520
|
+
// src/stories/components/Chat.tsx
|
|
1521
|
+
import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1522
|
+
var Chat = () => {
|
|
1523
|
+
return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
|
|
1524
|
+
/* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Chat Components" }),
|
|
1525
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1526
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
|
|
1527
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1528
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1529
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-header", children: [
|
|
1530
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "You" }),
|
|
1531
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1441
1532
|
] }),
|
|
1442
|
-
/* @__PURE__ */
|
|
1533
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx14("p", { children: "Hello! How are you today?" }) })
|
|
1443
1534
|
] }) }),
|
|
1444
|
-
/* @__PURE__ */
|
|
1445
|
-
/* @__PURE__ */
|
|
1446
|
-
/* @__PURE__ */
|
|
1447
|
-
/* @__PURE__ */
|
|
1448
|
-
/* @__PURE__ */
|
|
1449
|
-
/* @__PURE__ */
|
|
1535
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1536
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1537
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1538
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-header", children: [
|
|
1539
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1540
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1450
1541
|
] }),
|
|
1451
|
-
/* @__PURE__ */
|
|
1542
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx14("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
|
|
1452
1543
|
] })
|
|
1453
1544
|
] }),
|
|
1454
|
-
/* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1456
|
-
/* @__PURE__ */
|
|
1457
|
-
/* @__PURE__ */
|
|
1458
|
-
/* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1545
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1546
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1547
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1548
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-header", children: [
|
|
1549
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1550
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-message-time", children: "2:31 PM" })
|
|
1460
1551
|
] }),
|
|
1461
|
-
/* @__PURE__ */
|
|
1462
|
-
/* @__PURE__ */
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1552
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-content", children: [
|
|
1553
|
+
/* @__PURE__ */ jsx14("p", { children: "Here's some information you might find helpful:" }),
|
|
1554
|
+
/* @__PURE__ */ jsxs14("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
|
|
1555
|
+
/* @__PURE__ */ jsx14("li", { children: "First point of interest" }),
|
|
1556
|
+
/* @__PURE__ */ jsx14("li", { children: "Second important detail" }),
|
|
1557
|
+
/* @__PURE__ */ jsx14("li", { children: "Third relevant fact" })
|
|
1467
1558
|
] }),
|
|
1468
|
-
/* @__PURE__ */
|
|
1559
|
+
/* @__PURE__ */ jsx14("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
|
|
1469
1560
|
] }),
|
|
1470
|
-
/* @__PURE__ */
|
|
1471
|
-
/* @__PURE__ */
|
|
1472
|
-
/* @__PURE__ */
|
|
1561
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-actions", children: [
|
|
1562
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", title: "Edit", children: /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }) }),
|
|
1563
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", title: "Copy", children: /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) })
|
|
1473
1564
|
] })
|
|
1474
1565
|
] })
|
|
1475
1566
|
] }),
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1567
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-system", children: /* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx14("p", { children: "Alice has joined the conversation." }) }) }),
|
|
1568
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1569
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "You" }) }),
|
|
1570
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx14("p", { children: "That's exactly what I needed, thanks!" }) })
|
|
1480
1571
|
] }) })
|
|
1481
1572
|
] })
|
|
1482
1573
|
] }),
|
|
1483
|
-
/* @__PURE__ */
|
|
1484
|
-
/* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1486
|
-
/* @__PURE__ */
|
|
1487
|
-
/* @__PURE__ */
|
|
1488
|
-
/* @__PURE__ */
|
|
1489
|
-
/* @__PURE__ */
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1574
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1575
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Messages" }),
|
|
1576
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages from different characters with their avatars." }),
|
|
1577
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1578
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1579
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1580
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
1581
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Alice" }),
|
|
1582
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx14("p", { children: "*waves cheerfully* Hi there! I'm so glad to meet you!" }) })
|
|
1492
1583
|
] })
|
|
1493
1584
|
] }),
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1585
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1586
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "B" }) }),
|
|
1587
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
1588
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Bob" }),
|
|
1589
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx14("p", { children: "*nods thoughtfully* Interesting point. Let me think about that..." }) })
|
|
1499
1590
|
] })
|
|
1500
1591
|
] })
|
|
1501
1592
|
] })
|
|
1502
1593
|
] }),
|
|
1503
|
-
/* @__PURE__ */
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
1509
|
-
/* @__PURE__ */
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */
|
|
1594
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1595
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay Annotations" }),
|
|
1596
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Special text formatting for roleplay-style messages with narration, inner thoughts, and out-of-character text." }),
|
|
1597
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1598
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1599
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1600
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1601
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1602
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs14("p", { children: [
|
|
1512
1603
|
'"Hello there!" ',
|
|
1513
|
-
/* @__PURE__ */
|
|
1604
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
|
|
1514
1605
|
] }) })
|
|
1515
1606
|
] })
|
|
1516
1607
|
] }),
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
/* @__PURE__ */
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1521
|
-
/* @__PURE__ */
|
|
1522
|
-
/* @__PURE__ */
|
|
1608
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1609
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1610
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1611
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1612
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs14("p", { children: [
|
|
1613
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-narration", children: "She paused for a moment, considering her words carefully." }),
|
|
1523
1614
|
" ",
|
|
1524
|
-
/* @__PURE__ */
|
|
1615
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
|
|
1525
1616
|
] }) })
|
|
1526
1617
|
] })
|
|
1527
1618
|
] }),
|
|
1528
|
-
/* @__PURE__ */
|
|
1529
|
-
/* @__PURE__ */
|
|
1530
|
-
/* @__PURE__ */
|
|
1531
|
-
/* @__PURE__ */
|
|
1532
|
-
/* @__PURE__ */
|
|
1619
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1620
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1621
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1622
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx14("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1623
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx14("p", { children: /* @__PURE__ */ jsx14("span", { className: "qt-chat-ooc", children: "((OOC: Should we continue the scene or take a break?))" }) }) })
|
|
1533
1624
|
] })
|
|
1534
1625
|
] })
|
|
1535
1626
|
] })
|
|
1536
1627
|
] }),
|
|
1537
|
-
/* @__PURE__ */
|
|
1538
|
-
/* @__PURE__ */
|
|
1539
|
-
/* @__PURE__ */
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
/* @__PURE__ */
|
|
1543
|
-
/* @__PURE__ */
|
|
1544
|
-
/* @__PURE__ */
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
] }),
|
|
1547
|
-
/* @__PURE__ */
|
|
1548
|
-
/* @__PURE__ */
|
|
1549
|
-
/* @__PURE__ */
|
|
1550
|
-
/* @__PURE__ */
|
|
1551
|
-
/* @__PURE__ */
|
|
1552
|
-
/* @__PURE__ */
|
|
1553
|
-
/* @__PURE__ */
|
|
1554
|
-
] }),
|
|
1555
|
-
/* @__PURE__ */
|
|
1556
|
-
/* @__PURE__ */
|
|
1557
|
-
/* @__PURE__ */
|
|
1558
|
-
/* @__PURE__ */
|
|
1559
|
-
/* @__PURE__ */
|
|
1560
|
-
/* @__PURE__ */
|
|
1561
|
-
/* @__PURE__ */
|
|
1628
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1629
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay-Template Styles" }),
|
|
1630
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top." }),
|
|
1631
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-content", style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "36rem" }, children: [
|
|
1632
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1633
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-1", children: "Style 1" }),
|
|
1634
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-2", children: "Style 2" }),
|
|
1635
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-3", children: "Style 3" }),
|
|
1636
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-4", children: "Style 4" })
|
|
1637
|
+
] }),
|
|
1638
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1639
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-danger", children: "Danger" }),
|
|
1640
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-warning", children: "Warning" }),
|
|
1641
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-success", children: "Success" }),
|
|
1642
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-info", children: "Info" }),
|
|
1643
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-muted", children: "Muted" }),
|
|
1644
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-code", children: "code" })
|
|
1645
|
+
] }),
|
|
1646
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1647
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-2 qt-rp-bold", children: "Bold" }),
|
|
1648
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-3 qt-rp-italic", children: "Italic" }),
|
|
1649
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-1 qt-rp-reverse", children: "Reverse" }),
|
|
1650
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-4 qt-rp-underline-double", children: "Underline" }),
|
|
1651
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-info qt-rp-border-dashed", children: "Dashed border" }),
|
|
1652
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-roleplay-muted qt-rp-font-serif", children: "Serif font" })
|
|
1562
1653
|
] })
|
|
1563
1654
|
] })
|
|
1564
1655
|
] }),
|
|
1565
|
-
/* @__PURE__ */
|
|
1566
|
-
/* @__PURE__ */
|
|
1567
|
-
/* @__PURE__ */
|
|
1568
|
-
/* @__PURE__ */
|
|
1569
|
-
/* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1656
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1657
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
|
|
1658
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),
|
|
1659
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1660
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper", children: [
|
|
1661
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
|
|
1662
|
+
/* @__PURE__ */ jsx14("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
|
|
1572
1663
|
] }) }),
|
|
1573
|
-
/* @__PURE__ */
|
|
1574
|
-
/* @__PURE__ */
|
|
1575
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper qt-chat-message-whisper-overheard", children: [
|
|
1665
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
|
|
1666
|
+
/* @__PURE__ */ jsx14("p", { children: "Keep an eye on the door. We may need a quick exit." })
|
|
1576
1667
|
] }) })
|
|
1577
1668
|
] })
|
|
1578
1669
|
] }),
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1670
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1671
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1672
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Inner thoughts and actions from characters in silent mode. They can think and act physically, but cannot speak aloud. Distinguished from whispers by dotted borders and sage/teal tones." }),
|
|
1673
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1674
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1675
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1676
|
+
/* @__PURE__ */ jsx14("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1586
1677
|
] }) }),
|
|
1587
|
-
/* @__PURE__ */
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
/* @__PURE__ */
|
|
1678
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1679
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1680
|
+
/* @__PURE__ */ jsx14("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1590
1681
|
] }) })
|
|
1591
1682
|
] })
|
|
1592
1683
|
] }),
|
|
1593
|
-
/* @__PURE__ */
|
|
1594
|
-
/* @__PURE__ */
|
|
1595
|
-
/* @__PURE__ */
|
|
1596
|
-
/* @__PURE__ */
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
/* @__PURE__ */
|
|
1599
|
-
/* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1601
|
-
/* @__PURE__ */
|
|
1684
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1685
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wardrobe Action Notices" }),
|
|
1686
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Inline summaries of outfit changes (equip, unequip, gift). Distinguished from whispers (dashed purple) and silent messages (dotted teal) by a double border and warm amber/gold tones." }),
|
|
1687
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1688
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1689
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1690
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1691
|
+
/* @__PURE__ */ jsx14("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
|
|
1692
|
+
/* @__PURE__ */ jsx14("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
|
|
1602
1693
|
] })
|
|
1603
1694
|
] }),
|
|
1604
|
-
/* @__PURE__ */
|
|
1605
|
-
/* @__PURE__ */
|
|
1606
|
-
/* @__PURE__ */
|
|
1607
|
-
/* @__PURE__ */
|
|
1608
|
-
/* @__PURE__ */
|
|
1695
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1696
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1697
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1698
|
+
/* @__PURE__ */ jsx14("div", { children: "Removed item from the footwear slot." }),
|
|
1699
|
+
/* @__PURE__ */ jsx14("div", { children: "Wearing: Crimson Evening Gown (top, bottom), barefoot" })
|
|
1609
1700
|
] })
|
|
1610
1701
|
] }),
|
|
1611
|
-
/* @__PURE__ */
|
|
1612
|
-
/* @__PURE__ */
|
|
1613
|
-
/* @__PURE__ */
|
|
1614
|
-
/* @__PURE__ */
|
|
1615
|
-
/* @__PURE__ */
|
|
1702
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1703
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1704
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1705
|
+
/* @__PURE__ */ jsx14("div", { children: "Gifted \u201CSilver Pocket Watch\u201D to Marcus." }),
|
|
1706
|
+
/* @__PURE__ */ jsx14("div", { children: "Marcus put it on immediately." })
|
|
1616
1707
|
] })
|
|
1617
1708
|
] })
|
|
1618
1709
|
] })
|
|
1619
1710
|
] }),
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
/* @__PURE__ */
|
|
1622
|
-
/* @__PURE__ */
|
|
1623
|
-
/* @__PURE__ */
|
|
1624
|
-
/* @__PURE__ */
|
|
1625
|
-
/* @__PURE__ */
|
|
1626
|
-
/* @__PURE__ */
|
|
1627
|
-
/* @__PURE__ */
|
|
1628
|
-
/* @__PURE__ */
|
|
1629
|
-
/* @__PURE__ */
|
|
1630
|
-
/* @__PURE__ */
|
|
1711
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1712
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1713
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
1714
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1715
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-chat-toolbar-button", title: "Bold", children: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 4h8a4 4 0 014 4v2M6 4v16M6 4h8a2 2 0 012 2v2M6 12h12" }) }) }),
|
|
1716
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-chat-toolbar-button", title: "Italic", children: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 5h4m-4 14h4M9 5h6M9 19H3" }) }) }),
|
|
1717
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-chat-toolbar-button", title: "Underline", children: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 5v10a4 4 0 008 0V5m0 14H7" }) }) }),
|
|
1718
|
+
/* @__PURE__ */ jsx14("div", { style: { flex: 1 } }),
|
|
1719
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-chat-toolbar-button", title: "Settings", children: /* @__PURE__ */ jsxs14("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1720
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1721
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1631
1722
|
] }) })
|
|
1632
1723
|
] })
|
|
1633
1724
|
] }),
|
|
1634
|
-
/* @__PURE__ */
|
|
1635
|
-
/* @__PURE__ */
|
|
1636
|
-
/* @__PURE__ */
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
/* @__PURE__ */
|
|
1639
|
-
/* @__PURE__ */
|
|
1725
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1726
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "RP Annotation Buttons" }),
|
|
1727
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
|
|
1728
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1729
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
|
|
1730
|
+
/* @__PURE__ */ jsx14("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
|
|
1640
1731
|
"Narration"
|
|
1641
1732
|
] }),
|
|
1642
|
-
/* @__PURE__ */
|
|
1643
|
-
/* @__PURE__ */
|
|
1733
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
|
|
1734
|
+
/* @__PURE__ */ jsx14("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" }) }),
|
|
1644
1735
|
"Internal"
|
|
1645
1736
|
] }),
|
|
1646
|
-
/* @__PURE__ */
|
|
1647
|
-
/* @__PURE__ */
|
|
1737
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
|
|
1738
|
+
/* @__PURE__ */ jsx14("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
|
|
1648
1739
|
"OOC"
|
|
1649
1740
|
] })
|
|
1650
1741
|
] })
|
|
1651
1742
|
] }),
|
|
1652
|
-
/* @__PURE__ */
|
|
1653
|
-
/* @__PURE__ */
|
|
1654
|
-
/* @__PURE__ */
|
|
1655
|
-
/* @__PURE__ */
|
|
1656
|
-
/* @__PURE__ */
|
|
1657
|
-
/* @__PURE__ */
|
|
1658
|
-
/* @__PURE__ */
|
|
1659
|
-
/* @__PURE__ */
|
|
1743
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1744
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
|
|
1745
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
|
|
1746
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
|
|
1747
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
|
|
1748
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-attachment-chip", children: [
|
|
1749
|
+
/* @__PURE__ */ jsx14("span", { children: "document.pdf" }),
|
|
1750
|
+
/* @__PURE__ */ jsx14("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1660
1751
|
] }),
|
|
1661
|
-
/* @__PURE__ */
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
/* @__PURE__ */
|
|
1752
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-attachment-chip", children: [
|
|
1753
|
+
/* @__PURE__ */ jsx14("span", { children: "image.png" }),
|
|
1754
|
+
/* @__PURE__ */ jsx14("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1664
1755
|
] })
|
|
1665
1756
|
] }),
|
|
1666
|
-
/* @__PURE__ */
|
|
1757
|
+
/* @__PURE__ */ jsx14(
|
|
1667
1758
|
"textarea",
|
|
1668
1759
|
{
|
|
1669
1760
|
className: "qt-chat-composer-input",
|
|
@@ -1672,17 +1763,17 @@ var Chat = () => {
|
|
|
1672
1763
|
style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
|
|
1673
1764
|
}
|
|
1674
1765
|
),
|
|
1675
|
-
/* @__PURE__ */
|
|
1676
|
-
/* @__PURE__ */
|
|
1677
|
-
/* @__PURE__ */
|
|
1766
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1767
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-chat-attachment-button", children: /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }),
|
|
1768
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", children: "Send" })
|
|
1678
1769
|
] })
|
|
1679
1770
|
] })
|
|
1680
1771
|
] }),
|
|
1681
|
-
/* @__PURE__ */
|
|
1682
|
-
/* @__PURE__ */
|
|
1683
|
-
/* @__PURE__ */
|
|
1684
|
-
/* @__PURE__ */
|
|
1685
|
-
/* @__PURE__ */
|
|
1772
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1773
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
|
|
1774
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs14("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
|
|
1775
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", "aria-label": "Attach file", children: /* @__PURE__ */ jsx14("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }) }),
|
|
1776
|
+
/* @__PURE__ */ jsx14(
|
|
1686
1777
|
"textarea",
|
|
1687
1778
|
{
|
|
1688
1779
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1690,65 +1781,65 @@ var Chat = () => {
|
|
|
1690
1781
|
rows: 1
|
|
1691
1782
|
}
|
|
1692
1783
|
),
|
|
1693
|
-
/* @__PURE__ */
|
|
1784
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary qt-chat-composer-send", style: { height: "auto", padding: "0.5rem 1rem" }, children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
|
|
1694
1785
|
] }) })
|
|
1695
1786
|
] }),
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1698
|
-
/* @__PURE__ */
|
|
1699
|
-
/* @__PURE__ */
|
|
1700
|
-
/* @__PURE__ */
|
|
1701
|
-
/* @__PURE__ */
|
|
1702
|
-
/* @__PURE__ */
|
|
1703
|
-
/* @__PURE__ */
|
|
1787
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1788
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Typing Indicator" }),
|
|
1789
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem", maxWidth: "32rem" }, children: [
|
|
1790
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1791
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsxs14("div", { className: "qt-typing-indicator", children: [
|
|
1792
|
+
/* @__PURE__ */ jsx14("span", {}),
|
|
1793
|
+
/* @__PURE__ */ jsx14("span", {}),
|
|
1794
|
+
/* @__PURE__ */ jsx14("span", {})
|
|
1704
1795
|
] }) })
|
|
1705
1796
|
] })
|
|
1706
1797
|
] }),
|
|
1707
|
-
/* @__PURE__ */
|
|
1708
|
-
/* @__PURE__ */
|
|
1709
|
-
/* @__PURE__ */
|
|
1710
|
-
/* @__PURE__ */
|
|
1711
|
-
/* @__PURE__ */
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__PURE__ */
|
|
1714
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1799
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
|
|
1800
|
+
/* @__PURE__ */ jsx14("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
|
|
1801
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1802
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-chat-continue-button", children: [
|
|
1803
|
+
/* @__PURE__ */ jsxs14("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1804
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
|
|
1805
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
|
|
1715
1806
|
] }),
|
|
1716
1807
|
"Continue"
|
|
1717
1808
|
] }),
|
|
1718
|
-
/* @__PURE__ */
|
|
1719
|
-
/* @__PURE__ */
|
|
1720
|
-
/* @__PURE__ */
|
|
1721
|
-
/* @__PURE__ */
|
|
1809
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-chat-stop-button", children: [
|
|
1810
|
+
/* @__PURE__ */ jsxs14("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1811
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
|
|
1812
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" })
|
|
1722
1813
|
] }),
|
|
1723
1814
|
"Stop"
|
|
1724
1815
|
] })
|
|
1725
1816
|
] })
|
|
1726
1817
|
] }),
|
|
1727
|
-
/* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
/* @__PURE__ */
|
|
1731
|
-
/* @__PURE__ */
|
|
1732
|
-
/* @__PURE__ */
|
|
1733
|
-
/* @__PURE__ */
|
|
1734
|
-
/* @__PURE__ */
|
|
1735
|
-
/* @__PURE__ */
|
|
1818
|
+
/* @__PURE__ */ jsxs14("section", { children: [
|
|
1819
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
1820
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
|
1821
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-border)" }, children: [
|
|
1822
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1823
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1824
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
1825
|
+
/* @__PURE__ */ jsx14("div", { style: { fontWeight: 600 }, children: "Assistant" }),
|
|
1826
|
+
/* @__PURE__ */ jsx14("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Online" })
|
|
1736
1827
|
] })
|
|
1737
1828
|
] }),
|
|
1738
|
-
/* @__PURE__ */
|
|
1739
|
-
/* @__PURE__ */
|
|
1740
|
-
/* @__PURE__ */
|
|
1829
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", gap: "0.5rem" }, children: /* @__PURE__ */ jsx14("button", { className: "qt-button-icon", "aria-label": "Settings", children: /* @__PURE__ */ jsxs14("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1830
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1831
|
+
/* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1741
1832
|
] }) }) })
|
|
1742
1833
|
] }),
|
|
1743
|
-
/* @__PURE__ */
|
|
1744
|
-
/* @__PURE__ */
|
|
1745
|
-
/* @__PURE__ */
|
|
1746
|
-
/* @__PURE__ */
|
|
1834
|
+
/* @__PURE__ */ jsxs14("div", { style: { flex: 1, overflow: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
1835
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1836
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1837
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx14("p", { children: "Hello! How can I help you today?" }) })
|
|
1747
1838
|
] }),
|
|
1748
|
-
/* @__PURE__ */
|
|
1839
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx14("p", { children: "I'd like to know more about theming." }) }) })
|
|
1749
1840
|
] }),
|
|
1750
|
-
/* @__PURE__ */
|
|
1751
|
-
/* @__PURE__ */
|
|
1841
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-composer", style: { margin: "0.5rem", borderRadius: "var(--radius-lg)" }, children: [
|
|
1842
|
+
/* @__PURE__ */ jsx14(
|
|
1752
1843
|
"textarea",
|
|
1753
1844
|
{
|
|
1754
1845
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1756,7 +1847,7 @@ var Chat = () => {
|
|
|
1756
1847
|
rows: 1
|
|
1757
1848
|
}
|
|
1758
1849
|
),
|
|
1759
|
-
/* @__PURE__ */
|
|
1850
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Send" })
|
|
1760
1851
|
] })
|
|
1761
1852
|
] })
|
|
1762
1853
|
] })
|
|
@@ -1764,7 +1855,7 @@ var Chat = () => {
|
|
|
1764
1855
|
};
|
|
1765
1856
|
|
|
1766
1857
|
// src/stories/components/Terminal.tsx
|
|
1767
|
-
import { jsx as
|
|
1858
|
+
import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1768
1859
|
var sampleOutput = `$ git status
|
|
1769
1860
|
On branch main
|
|
1770
1861
|
Your branch is up to date with 'origin/main'.
|
|
@@ -1776,117 +1867,117 @@ $ npm run dev
|
|
|
1776
1867
|
- Local: http://localhost:3000
|
|
1777
1868
|
- ready started server on 0.0.0.0:3000`;
|
|
1778
1869
|
var Terminal = () => {
|
|
1779
|
-
return /* @__PURE__ */
|
|
1780
|
-
/* @__PURE__ */
|
|
1781
|
-
/* @__PURE__ */
|
|
1870
|
+
return /* @__PURE__ */ jsxs15("div", { style: { padding: "1.5rem" }, children: [
|
|
1871
|
+
/* @__PURE__ */ jsx15("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Terminal Components" }),
|
|
1872
|
+
/* @__PURE__ */ jsxs15("p", { style: { marginBottom: "1.5rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1782
1873
|
"The terminal carries its own identity. By default it stays dark in both light and dark themes \u2014 but a theme can override",
|
|
1783
1874
|
" ",
|
|
1784
|
-
/* @__PURE__ */
|
|
1875
|
+
/* @__PURE__ */ jsx15("code", { children: "--qt-terminal-bg" }),
|
|
1785
1876
|
", ",
|
|
1786
|
-
/* @__PURE__ */
|
|
1877
|
+
/* @__PURE__ */ jsx15("code", { children: "--qt-terminal-fg" }),
|
|
1787
1878
|
", and the",
|
|
1788
|
-
/* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsx15("code", { children: "--qt-terminal-chrome-*" }),
|
|
1789
1880
|
" tokens to reskin every surface below."
|
|
1790
1881
|
] }),
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
/* @__PURE__ */
|
|
1882
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1883
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "In-chat embed" }),
|
|
1884
|
+
/* @__PURE__ */ jsxs15("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1885
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-terminal-embed" }),
|
|
1795
1886
|
" wraps the embed card; the header and footer strips inherit the surrounding theme so they nest cleanly with chat bubbles."
|
|
1796
1887
|
] }),
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1800
|
-
/* @__PURE__ */
|
|
1801
|
-
/* @__PURE__ */
|
|
1802
|
-
/* @__PURE__ */
|
|
1888
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1889
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-embed-header", children: [
|
|
1890
|
+
/* @__PURE__ */ jsx15("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: /* @__PURE__ */ jsx15("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1891
|
+
/* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1892
|
+
/* @__PURE__ */ jsx15("button", { className: "qt-button-icon", type: "button", children: "Pop out" }),
|
|
1893
|
+
/* @__PURE__ */ jsx15("button", { className: "qt-button-icon qt-text-destructive", type: "button", children: "Kill" })
|
|
1803
1894
|
] })
|
|
1804
1895
|
] }),
|
|
1805
|
-
/* @__PURE__ */
|
|
1896
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-terminal-surface", style: { padding: "0.75rem", fontFamily: "var(--qt-font-mono, monospace)", color: "var(--qt-terminal-fg)", fontSize: "0.8125rem", whiteSpace: "pre-wrap" }, children: sampleOutput })
|
|
1806
1897
|
] })
|
|
1807
1898
|
] }),
|
|
1808
|
-
/* @__PURE__ */
|
|
1809
|
-
/* @__PURE__ */
|
|
1810
|
-
/* @__PURE__ */
|
|
1811
|
-
/* @__PURE__ */
|
|
1812
|
-
/* @__PURE__ */
|
|
1813
|
-
/* @__PURE__ */
|
|
1814
|
-
/* @__PURE__ */
|
|
1899
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1900
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Embed footer (handed off to Terminal Mode pane)" }),
|
|
1901
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1902
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-terminal-embed-header", children: /* @__PURE__ */ jsx15("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1903
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-embed-footer", children: [
|
|
1904
|
+
/* @__PURE__ */ jsx15("span", { className: "qt-text-secondary", children: "Showing in Terminal Mode pane." }),
|
|
1905
|
+
/* @__PURE__ */ jsx15("button", { className: "qt-button-secondary", type: "button", style: { fontSize: "0.75rem", padding: "0.25rem 0.5rem" }, children: "Go to pane \u2192" })
|
|
1815
1906
|
] })
|
|
1816
1907
|
] })
|
|
1817
1908
|
] }),
|
|
1818
|
-
/* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
1820
|
-
/* @__PURE__ */
|
|
1909
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1910
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Pop-out page chrome" }),
|
|
1911
|
+
/* @__PURE__ */ jsxs15("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1821
1912
|
"The full-screen pop-out page uses",
|
|
1822
1913
|
" ",
|
|
1823
|
-
/* @__PURE__ */
|
|
1914
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-terminal-popout-page" }),
|
|
1824
1915
|
" as the outer canvas and",
|
|
1825
1916
|
" ",
|
|
1826
|
-
/* @__PURE__ */
|
|
1917
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-terminal-popout-header" }),
|
|
1827
1918
|
" for the breadcrumb bar."
|
|
1828
1919
|
] }),
|
|
1829
|
-
/* @__PURE__ */
|
|
1830
|
-
/* @__PURE__ */
|
|
1831
|
-
/* @__PURE__ */
|
|
1832
|
-
/* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
1835
|
-
/* @__PURE__ */
|
|
1920
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-popout-page", style: { borderRadius: "0.5rem", overflow: "hidden", border: "1px solid var(--color-border)", height: "240px", display: "flex", flexDirection: "column" }, children: [
|
|
1921
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-terminal-popout-header", children: [
|
|
1922
|
+
/* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1923
|
+
/* @__PURE__ */ jsx15("button", { className: "qt-button-icon", type: "button", style: { color: "inherit" }, children: "\u2190" }),
|
|
1924
|
+
/* @__PURE__ */ jsx15("a", { href: "#", className: "qt-terminal-popout-link", style: { fontSize: "0.875rem" }, children: "Chat" }),
|
|
1925
|
+
/* @__PURE__ */ jsx15("span", { className: "qt-terminal-popout-separator", children: "/" }),
|
|
1926
|
+
/* @__PURE__ */ jsx15("h1", { className: "qt-terminal-popout-title", style: { fontSize: "1rem", margin: 0 }, children: "Terminal \u2014 zsh" })
|
|
1836
1927
|
] }),
|
|
1837
|
-
/* @__PURE__ */
|
|
1928
|
+
/* @__PURE__ */ jsx15("button", { className: "qt-button-destructive", type: "button", style: { fontSize: "0.875rem" }, children: "Kill Session" })
|
|
1838
1929
|
] }),
|
|
1839
|
-
/* @__PURE__ */
|
|
1930
|
+
/* @__PURE__ */ jsx15("div", { style: { flex: 1, padding: "0.75rem", fontFamily: "var(--qt-font-mono, monospace)", color: "var(--qt-terminal-fg)", fontSize: "0.8125rem", whiteSpace: "pre-wrap" }, children: sampleOutput })
|
|
1840
1931
|
] })
|
|
1841
1932
|
] }),
|
|
1842
|
-
/* @__PURE__ */
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
/* @__PURE__ */
|
|
1933
|
+
/* @__PURE__ */ jsxs15("section", { children: [
|
|
1934
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Session-exited overlay" }),
|
|
1935
|
+
/* @__PURE__ */ jsxs15("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1845
1936
|
"When the PTY exits but the terminal stays mounted, the",
|
|
1846
1937
|
" ",
|
|
1847
|
-
/* @__PURE__ */
|
|
1938
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-terminal-closed-badge" }),
|
|
1848
1939
|
" overlay marks it."
|
|
1849
1940
|
] }),
|
|
1850
|
-
/* @__PURE__ */
|
|
1941
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-terminal-surface", style: { position: "relative", height: "120px", borderRadius: "0.5rem" }, children: /* @__PURE__ */ jsx15("span", { className: "qt-terminal-closed-badge", children: "Closed" }) })
|
|
1851
1942
|
] })
|
|
1852
1943
|
] });
|
|
1853
1944
|
};
|
|
1854
1945
|
|
|
1855
1946
|
// src/stories/components/FilePreview.tsx
|
|
1856
|
-
import { jsx as
|
|
1947
|
+
import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1857
1948
|
var FilePreview = () => {
|
|
1858
|
-
return /* @__PURE__ */
|
|
1859
|
-
/* @__PURE__ */
|
|
1860
|
-
/* @__PURE__ */
|
|
1861
|
-
/* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
1949
|
+
return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
|
|
1950
|
+
/* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "File Preview Components" }),
|
|
1951
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1952
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Scroll Container" }),
|
|
1953
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1954
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-scroll" }),
|
|
1864
1955
|
" - Scrollable container for file content with configurable max height."
|
|
1865
1956
|
] }),
|
|
1866
|
-
/* @__PURE__ */
|
|
1957
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-file-preview-scroll", style: { height: "150px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx16("div", { style: { padding: "1rem" }, children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs16("p", { style: { margin: "0.5rem 0" }, children: [
|
|
1867
1958
|
"Line ",
|
|
1868
1959
|
i + 1,
|
|
1869
1960
|
": Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
1870
1961
|
] }, i)) }) })
|
|
1871
1962
|
] }),
|
|
1872
|
-
/* @__PURE__ */
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1963
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1964
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Content Panel" }),
|
|
1965
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1966
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-panel" }),
|
|
1876
1967
|
" - Background panel for rendered markdown content."
|
|
1877
1968
|
] }),
|
|
1878
|
-
/* @__PURE__ */
|
|
1879
|
-
/* @__PURE__ */
|
|
1880
|
-
/* @__PURE__ */
|
|
1969
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-file-preview-panel", children: [
|
|
1970
|
+
/* @__PURE__ */ jsx16("h4", { style: { margin: "0 0 0.5rem 0" }, children: "Document Title" }),
|
|
1971
|
+
/* @__PURE__ */ jsx16("p", { style: { margin: 0 }, children: "This is a content panel used for displaying rendered markdown files with a subtle background." })
|
|
1881
1972
|
] })
|
|
1882
1973
|
] }),
|
|
1883
|
-
/* @__PURE__ */
|
|
1884
|
-
/* @__PURE__ */
|
|
1885
|
-
/* @__PURE__ */
|
|
1886
|
-
/* @__PURE__ */
|
|
1974
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1975
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code Block" }),
|
|
1976
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1977
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-code" }),
|
|
1887
1978
|
" - Styled code block for plain text and source files with word wrap."
|
|
1888
1979
|
] }),
|
|
1889
|
-
/* @__PURE__ */
|
|
1980
|
+
/* @__PURE__ */ jsx16("pre", { className: "qt-file-preview-code", children: `function greet(name: string): string {
|
|
1890
1981
|
return \`Hello, \${name}!\`;
|
|
1891
1982
|
}
|
|
1892
1983
|
|
|
@@ -1894,133 +1985,133 @@ var FilePreview = () => {
|
|
|
1894
1985
|
const message = greet("World");
|
|
1895
1986
|
console.log(message);` })
|
|
1896
1987
|
] }),
|
|
1897
|
-
/* @__PURE__ */
|
|
1898
|
-
/* @__PURE__ */
|
|
1899
|
-
/* @__PURE__ */
|
|
1900
|
-
/* @__PURE__ */
|
|
1988
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1989
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading State" }),
|
|
1990
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1991
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-loading" }),
|
|
1901
1992
|
" + ",
|
|
1902
|
-
/* @__PURE__ */
|
|
1993
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-loading-text" }),
|
|
1903
1994
|
" - Loading indicator."
|
|
1904
1995
|
] }),
|
|
1905
|
-
/* @__PURE__ */
|
|
1996
|
+
/* @__PURE__ */ jsx16("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-file-preview-loading", style: { minHeight: "150px" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-file-preview-loading-text", children: "Loading file..." }) }) })
|
|
1906
1997
|
] }),
|
|
1907
|
-
/* @__PURE__ */
|
|
1908
|
-
/* @__PURE__ */
|
|
1909
|
-
/* @__PURE__ */
|
|
1910
|
-
/* @__PURE__ */
|
|
1998
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1999
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty / Error State" }),
|
|
2000
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
2001
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-empty" }),
|
|
1911
2002
|
" + ",
|
|
1912
|
-
/* @__PURE__ */
|
|
2003
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-file-preview-empty-icon" }),
|
|
1913
2004
|
" - Empty or error state display."
|
|
1914
2005
|
] }),
|
|
1915
|
-
/* @__PURE__ */
|
|
1916
|
-
/* @__PURE__ */
|
|
1917
|
-
/* @__PURE__ */
|
|
1918
|
-
/* @__PURE__ */
|
|
2006
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }, children: [
|
|
2007
|
+
/* @__PURE__ */ jsx16("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs16("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
2008
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-file-preview-empty-icon", children: "\u{1F4C4}" }),
|
|
2009
|
+
/* @__PURE__ */ jsx16("p", { children: "No content available" })
|
|
1919
2010
|
] }) }),
|
|
1920
|
-
/* @__PURE__ */
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
2011
|
+
/* @__PURE__ */ jsx16("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs16("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
2012
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-file-preview-empty-icon", children: "\u26A0\uFE0F" }),
|
|
2013
|
+
/* @__PURE__ */ jsx16("p", { children: "Failed to load file" })
|
|
1923
2014
|
] }) })
|
|
1924
2015
|
] })
|
|
1925
2016
|
] }),
|
|
1926
|
-
/* @__PURE__ */
|
|
1927
|
-
/* @__PURE__ */
|
|
1928
|
-
/* @__PURE__ */
|
|
1929
|
-
/* @__PURE__ */
|
|
2017
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2018
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wikilinks" }),
|
|
2019
|
+
/* @__PURE__ */ jsxs16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
2020
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-wikilink" }),
|
|
1930
2021
|
" + ",
|
|
1931
|
-
/* @__PURE__ */
|
|
2022
|
+
/* @__PURE__ */ jsx16("code", { children: ".qt-wikilink-broken" }),
|
|
1932
2023
|
" - Internal document links in markdown."
|
|
1933
2024
|
] }),
|
|
1934
|
-
/* @__PURE__ */
|
|
2025
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-file-preview-panel", children: /* @__PURE__ */ jsxs16("p", { style: { margin: 0, lineHeight: 2 }, children: [
|
|
1935
2026
|
"This document references ",
|
|
1936
|
-
/* @__PURE__ */
|
|
2027
|
+
/* @__PURE__ */ jsx16("button", { type: "button", className: "qt-wikilink", children: "Character Profile" }),
|
|
1937
2028
|
" and links to ",
|
|
1938
|
-
/* @__PURE__ */
|
|
2029
|
+
/* @__PURE__ */ jsx16("button", { type: "button", className: "qt-wikilink", children: "World Building \u2192 Geography" }),
|
|
1939
2030
|
". There's also a ",
|
|
1940
|
-
/* @__PURE__ */
|
|
2031
|
+
/* @__PURE__ */ jsx16("button", { type: "button", className: "qt-wikilink-broken", children: "Missing Document" }),
|
|
1941
2032
|
" that doesn't exist yet."
|
|
1942
2033
|
] }) })
|
|
1943
2034
|
] }),
|
|
1944
|
-
/* @__PURE__ */
|
|
1945
|
-
/* @__PURE__ */
|
|
1946
|
-
/* @__PURE__ */
|
|
2035
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2036
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "CSS Variables" }),
|
|
2037
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.5rem" }, children: [
|
|
1947
2038
|
{ name: "--qt-file-preview-max-height", value: "70vh", desc: "Max height of scroll container" },
|
|
1948
2039
|
{ name: "--qt-file-preview-min-height", value: "300px", desc: "Min height of loading/empty states" },
|
|
1949
2040
|
{ name: "--qt-file-preview-panel-bg", value: "muted/30%", desc: "Content panel background" },
|
|
1950
2041
|
{ name: "--qt-code-bg", value: "muted", desc: "Code block background" },
|
|
1951
2042
|
{ name: "--qt-code-fg", value: "foreground", desc: "Code block text color" },
|
|
1952
2043
|
{ name: "--qt-code-font", value: "monospace", desc: "Code block font family" }
|
|
1953
|
-
].map(({ name, value, desc }) => /* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
/* @__PURE__ */
|
|
2044
|
+
].map(({ name, value, desc }) => /* @__PURE__ */ jsxs16("div", { style: { padding: "0.75rem", background: "var(--color-muted)", borderRadius: "var(--radius-md)" }, children: [
|
|
2045
|
+
/* @__PURE__ */ jsx16("code", { style: { fontSize: "0.75rem", fontWeight: 600 }, children: name }),
|
|
2046
|
+
/* @__PURE__ */ jsxs16("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.25rem" }, children: [
|
|
1956
2047
|
"Default: ",
|
|
1957
2048
|
value
|
|
1958
2049
|
] }),
|
|
1959
|
-
/* @__PURE__ */
|
|
2050
|
+
/* @__PURE__ */ jsx16("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: desc })
|
|
1960
2051
|
] }, name)) })
|
|
1961
2052
|
] })
|
|
1962
2053
|
] });
|
|
1963
2054
|
};
|
|
1964
2055
|
|
|
1965
2056
|
// src/stories/components/ThemeComparison.tsx
|
|
1966
|
-
import { jsx as
|
|
2057
|
+
import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1967
2058
|
var ThemePanel = ({ title, description }) => {
|
|
1968
|
-
return /* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
] }),
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
1975
|
-
/* @__PURE__ */
|
|
1976
|
-
/* @__PURE__ */
|
|
2059
|
+
return /* @__PURE__ */ jsxs17("div", { style: { flex: 1, minWidth: "20rem" }, children: [
|
|
2060
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "1rem" }, children: [
|
|
2061
|
+
/* @__PURE__ */ jsx17("h4", { style: { fontWeight: 600 }, children: title }),
|
|
2062
|
+
/* @__PURE__ */ jsx17("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: description })
|
|
2063
|
+
] }),
|
|
2064
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-card", style: { marginBottom: "1rem" }, children: [
|
|
2065
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-card-header", children: [
|
|
2066
|
+
/* @__PURE__ */ jsx17("h5", { className: "qt-card-title", children: "Sample Card" }),
|
|
2067
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-card-description", children: "This is how cards look in this theme." })
|
|
1977
2068
|
] }),
|
|
1978
|
-
/* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
2069
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-card-body", children: [
|
|
2070
|
+
/* @__PURE__ */ jsx17("p", { style: { marginBottom: "1rem" }, children: "Cards are used throughout the application for grouping content." }),
|
|
2071
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
2072
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
2073
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
2074
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-success", children: "Success" })
|
|
1984
2075
|
] })
|
|
1985
2076
|
] }),
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
2077
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-card-footer", children: [
|
|
2078
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-ghost", children: "Cancel" }),
|
|
2079
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Save" })
|
|
1989
2080
|
] })
|
|
1990
2081
|
] }),
|
|
1991
|
-
/* @__PURE__ */
|
|
1992
|
-
/* @__PURE__ */
|
|
1993
|
-
/* @__PURE__ */
|
|
1994
|
-
/* @__PURE__ */
|
|
2082
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-panel", style: { padding: "1rem", marginBottom: "1rem" }, children: [
|
|
2083
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
2084
|
+
/* @__PURE__ */ jsx17("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Text Input" }),
|
|
2085
|
+
/* @__PURE__ */ jsx17("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
|
|
1995
2086
|
] }),
|
|
1996
|
-
/* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
1998
|
-
/* @__PURE__ */
|
|
1999
|
-
/* @__PURE__ */
|
|
2000
|
-
/* @__PURE__ */
|
|
2087
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
2088
|
+
/* @__PURE__ */ jsx17("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Select" }),
|
|
2089
|
+
/* @__PURE__ */ jsxs17("select", { className: "qt-input qt-select", children: [
|
|
2090
|
+
/* @__PURE__ */ jsx17("option", { children: "Option 1" }),
|
|
2091
|
+
/* @__PURE__ */ jsx17("option", { children: "Option 2" })
|
|
2001
2092
|
] })
|
|
2002
2093
|
] }),
|
|
2003
|
-
/* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2005
|
-
/* @__PURE__ */
|
|
2094
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
2095
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-secondary qt-button-sm", children: "Secondary" }),
|
|
2096
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Primary" })
|
|
2006
2097
|
] })
|
|
2007
2098
|
] }),
|
|
2008
|
-
/* @__PURE__ */
|
|
2009
|
-
/* @__PURE__ */
|
|
2010
|
-
/* @__PURE__ */
|
|
2011
|
-
/* @__PURE__ */
|
|
2099
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2100
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
2101
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
2102
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx17("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
|
|
2012
2103
|
] }),
|
|
2013
|
-
/* @__PURE__ */
|
|
2104
|
+
/* @__PURE__ */ jsx17("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx17("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx17("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
|
|
2014
2105
|
] })
|
|
2015
2106
|
] });
|
|
2016
2107
|
};
|
|
2017
2108
|
var ThemeComparison = () => {
|
|
2018
|
-
return /* @__PURE__ */
|
|
2019
|
-
/* @__PURE__ */
|
|
2020
|
-
/* @__PURE__ */
|
|
2021
|
-
/* @__PURE__ */
|
|
2022
|
-
/* @__PURE__ */
|
|
2023
|
-
/* @__PURE__ */
|
|
2109
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "1.5rem" }, children: [
|
|
2110
|
+
/* @__PURE__ */ jsx17("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Theme Comparison" }),
|
|
2111
|
+
/* @__PURE__ */ jsx17("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1.5rem" }, children: "Compare your custom theme against the default Quilltap theme. Use the theme toggle above to switch between themes." }),
|
|
2112
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2113
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Current Theme Preview" }),
|
|
2114
|
+
/* @__PURE__ */ jsx17(
|
|
2024
2115
|
ThemePanel,
|
|
2025
2116
|
{
|
|
2026
2117
|
title: "Active Theme",
|
|
@@ -2028,9 +2119,9 @@ var ThemeComparison = () => {
|
|
|
2028
2119
|
}
|
|
2029
2120
|
)
|
|
2030
2121
|
] }),
|
|
2031
|
-
/* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
/* @__PURE__ */
|
|
2122
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2123
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Key Theme Colors" }),
|
|
2124
|
+
/* @__PURE__ */ jsx17("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
2034
2125
|
{ name: "Background", var: "--color-background" },
|
|
2035
2126
|
{ name: "Foreground", var: "--color-foreground" },
|
|
2036
2127
|
{ name: "Card", var: "--color-card" },
|
|
@@ -2039,8 +2130,8 @@ var ThemeComparison = () => {
|
|
|
2039
2130
|
{ name: "Muted", var: "--color-muted" },
|
|
2040
2131
|
{ name: "Accent", var: "--color-accent" },
|
|
2041
2132
|
{ name: "Border", var: "--color-border" }
|
|
2042
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
2043
|
-
/* @__PURE__ */
|
|
2133
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs17("div", { style: { textAlign: "center" }, children: [
|
|
2134
|
+
/* @__PURE__ */ jsx17(
|
|
2044
2135
|
"div",
|
|
2045
2136
|
{
|
|
2046
2137
|
style: {
|
|
@@ -2052,17 +2143,17 @@ var ThemeComparison = () => {
|
|
|
2052
2143
|
}
|
|
2053
2144
|
}
|
|
2054
2145
|
),
|
|
2055
|
-
/* @__PURE__ */
|
|
2146
|
+
/* @__PURE__ */ jsx17("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
2056
2147
|
] }, cssVar)) })
|
|
2057
2148
|
] }),
|
|
2058
|
-
/* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2149
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2150
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Semantic Colors" }),
|
|
2151
|
+
/* @__PURE__ */ jsx17("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
2061
2152
|
{ name: "Destructive", var: "--color-destructive" },
|
|
2062
2153
|
{ name: "Success", var: "--color-success" },
|
|
2063
2154
|
{ name: "Warning", var: "--color-warning" }
|
|
2064
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
2065
|
-
/* @__PURE__ */
|
|
2155
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs17("div", { style: { textAlign: "center" }, children: [
|
|
2156
|
+
/* @__PURE__ */ jsx17(
|
|
2066
2157
|
"div",
|
|
2067
2158
|
{
|
|
2068
2159
|
style: {
|
|
@@ -2074,50 +2165,50 @@ var ThemeComparison = () => {
|
|
|
2074
2165
|
}
|
|
2075
2166
|
}
|
|
2076
2167
|
),
|
|
2077
|
-
/* @__PURE__ */
|
|
2168
|
+
/* @__PURE__ */ jsx17("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
2078
2169
|
] }, cssVar)) })
|
|
2079
2170
|
] }),
|
|
2080
|
-
/* @__PURE__ */
|
|
2081
|
-
/* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2085
|
-
/* @__PURE__ */
|
|
2086
|
-
/* @__PURE__ */
|
|
2087
|
-
/* @__PURE__ */
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
/* @__PURE__ */
|
|
2171
|
+
/* @__PURE__ */ jsxs17("section", { children: [
|
|
2172
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Showcase" }),
|
|
2173
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2174
|
+
/* @__PURE__ */ jsx17("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Buttons" }),
|
|
2175
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2176
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Primary" }),
|
|
2177
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-secondary", children: "Secondary" }),
|
|
2178
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-ghost", children: "Ghost" }),
|
|
2179
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-destructive", children: "Destructive" }),
|
|
2180
|
+
/* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", disabled: true, children: "Disabled" })
|
|
2090
2181
|
] })
|
|
2091
2182
|
] }),
|
|
2092
|
-
/* @__PURE__ */
|
|
2093
|
-
/* @__PURE__ */
|
|
2094
|
-
/* @__PURE__ */
|
|
2095
|
-
/* @__PURE__ */
|
|
2096
|
-
/* @__PURE__ */
|
|
2097
|
-
/* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2099
|
-
/* @__PURE__ */
|
|
2100
|
-
/* @__PURE__ */
|
|
2183
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2184
|
+
/* @__PURE__ */ jsx17("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Badges" }),
|
|
2185
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2186
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-default", children: "Default" }),
|
|
2187
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
2188
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
2189
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-success", children: "Success" }),
|
|
2190
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-warning", children: "Warning" }),
|
|
2191
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge qt-badge-destructive", children: "Destructive" })
|
|
2101
2192
|
] })
|
|
2102
2193
|
] }),
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2105
|
-
/* @__PURE__ */
|
|
2106
|
-
/* @__PURE__ */
|
|
2107
|
-
/* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
/* @__PURE__ */
|
|
2194
|
+
/* @__PURE__ */ jsxs17("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2195
|
+
/* @__PURE__ */ jsx17("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Interactive Card" }),
|
|
2196
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-card qt-card-interactive", style: { maxWidth: "20rem", cursor: "pointer" }, children: /* @__PURE__ */ jsx17("div", { className: "qt-card-header", children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
2197
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
2198
|
+
/* @__PURE__ */ jsxs17("div", { children: [
|
|
2199
|
+
/* @__PURE__ */ jsx17("h5", { className: "qt-card-title", children: "Character Name" }),
|
|
2200
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-card-description", children: "Click to interact" })
|
|
2110
2201
|
] })
|
|
2111
2202
|
] }) }) })
|
|
2112
2203
|
] }),
|
|
2113
|
-
/* @__PURE__ */
|
|
2114
|
-
/* @__PURE__ */
|
|
2115
|
-
/* @__PURE__ */
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
/* @__PURE__ */
|
|
2118
|
-
/* @__PURE__ */
|
|
2119
|
-
/* @__PURE__ */
|
|
2120
|
-
/* @__PURE__ */
|
|
2204
|
+
/* @__PURE__ */ jsxs17("div", { children: [
|
|
2205
|
+
/* @__PURE__ */ jsx17("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Form Elements" }),
|
|
2206
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap", maxWidth: "32rem" }, children: [
|
|
2207
|
+
/* @__PURE__ */ jsx17("input", { className: "qt-input", type: "text", placeholder: "Text input", style: { flex: "1 1 10rem" } }),
|
|
2208
|
+
/* @__PURE__ */ jsxs17("select", { className: "qt-input qt-select", style: { flex: "1 1 10rem" }, children: [
|
|
2209
|
+
/* @__PURE__ */ jsx17("option", { children: "Select option" }),
|
|
2210
|
+
/* @__PURE__ */ jsx17("option", { children: "Option 1" }),
|
|
2211
|
+
/* @__PURE__ */ jsx17("option", { children: "Option 2" })
|
|
2121
2212
|
] })
|
|
2122
2213
|
] })
|
|
2123
2214
|
] })
|
|
@@ -2126,125 +2217,125 @@ var ThemeComparison = () => {
|
|
|
2126
2217
|
};
|
|
2127
2218
|
|
|
2128
2219
|
// src/stories/components/EmptyState.tsx
|
|
2129
|
-
import { jsx as
|
|
2220
|
+
import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2130
2221
|
var EmptyState = () => {
|
|
2131
|
-
return /* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
/* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2137
|
-
/* @__PURE__ */
|
|
2138
|
-
/* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ jsxs18("div", { style: { padding: "1.5rem" }, children: [
|
|
2223
|
+
/* @__PURE__ */ jsx18("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
|
|
2224
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2225
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
|
|
2226
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-empty-state", children: [
|
|
2227
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }),
|
|
2228
|
+
/* @__PURE__ */ jsx18("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
|
|
2229
|
+
/* @__PURE__ */ jsx18("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
|
|
2139
2230
|
] })
|
|
2140
2231
|
] }),
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2145
|
-
/* @__PURE__ */
|
|
2146
|
-
/* @__PURE__ */
|
|
2147
|
-
/* @__PURE__ */
|
|
2232
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2233
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
|
|
2234
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-empty-state", children: [
|
|
2235
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" }) }) }),
|
|
2236
|
+
/* @__PURE__ */ jsx18("h4", { className: "qt-empty-state-title", children: "No characters" }),
|
|
2237
|
+
/* @__PURE__ */ jsx18("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
|
|
2238
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx18("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
|
|
2148
2239
|
] })
|
|
2149
2240
|
] }),
|
|
2150
|
-
/* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2152
|
-
/* @__PURE__ */
|
|
2153
|
-
/* @__PURE__ */
|
|
2154
|
-
/* @__PURE__ */
|
|
2155
|
-
/* @__PURE__ */
|
|
2156
|
-
/* @__PURE__ */
|
|
2241
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2242
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
|
|
2243
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-empty-state", children: [
|
|
2244
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
|
|
2245
|
+
/* @__PURE__ */ jsx18("h4", { className: "qt-empty-state-title", children: "No results found" }),
|
|
2246
|
+
/* @__PURE__ */ jsx18("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
|
|
2247
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx18("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
|
|
2157
2248
|
] })
|
|
2158
2249
|
] }),
|
|
2159
|
-
/* @__PURE__ */
|
|
2160
|
-
/* @__PURE__ */
|
|
2161
|
-
/* @__PURE__ */
|
|
2162
|
-
/* @__PURE__ */
|
|
2163
|
-
/* @__PURE__ */
|
|
2164
|
-
/* @__PURE__ */
|
|
2165
|
-
/* @__PURE__ */
|
|
2250
|
+
/* @__PURE__ */ jsxs18("section", { children: [
|
|
2251
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
|
|
2252
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-empty-state", children: [
|
|
2253
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
|
|
2254
|
+
/* @__PURE__ */ jsx18("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
|
|
2255
|
+
/* @__PURE__ */ jsx18("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
|
|
2256
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx18("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
|
|
2166
2257
|
] })
|
|
2167
2258
|
] })
|
|
2168
2259
|
] });
|
|
2169
2260
|
};
|
|
2170
2261
|
|
|
2171
2262
|
// src/stories/components/Loading.tsx
|
|
2172
|
-
import { jsx as
|
|
2263
|
+
import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2173
2264
|
var Loading = () => {
|
|
2174
|
-
return /* @__PURE__ */
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2177
|
-
/* @__PURE__ */
|
|
2178
|
-
/* @__PURE__ */
|
|
2179
|
-
/* @__PURE__ */
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
] }),
|
|
2183
|
-
/* @__PURE__ */
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
] }),
|
|
2187
|
-
/* @__PURE__ */
|
|
2188
|
-
/* @__PURE__ */
|
|
2189
|
-
/* @__PURE__ */
|
|
2265
|
+
return /* @__PURE__ */ jsxs19("div", { style: { padding: "1.5rem" }, children: [
|
|
2266
|
+
/* @__PURE__ */ jsx19("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
|
|
2267
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2268
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
|
|
2269
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
|
|
2270
|
+
/* @__PURE__ */ jsxs19("div", { style: { textAlign: "center" }, children: [
|
|
2271
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
|
|
2272
|
+
/* @__PURE__ */ jsx19("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
|
|
2273
|
+
] }),
|
|
2274
|
+
/* @__PURE__ */ jsxs19("div", { style: { textAlign: "center" }, children: [
|
|
2275
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
|
|
2276
|
+
/* @__PURE__ */ jsx19("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
|
|
2277
|
+
] }),
|
|
2278
|
+
/* @__PURE__ */ jsxs19("div", { style: { textAlign: "center" }, children: [
|
|
2279
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
|
|
2280
|
+
/* @__PURE__ */ jsx19("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
|
|
2190
2281
|
] })
|
|
2191
2282
|
] })
|
|
2192
2283
|
] }),
|
|
2193
|
-
/* @__PURE__ */
|
|
2194
|
-
/* @__PURE__ */
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2284
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2285
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
|
|
2286
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2287
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
|
|
2288
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
|
|
2289
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2199
2290
|
] })
|
|
2200
2291
|
] }),
|
|
2201
|
-
/* @__PURE__ */
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2292
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2293
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
|
|
2294
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
|
|
2295
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
|
|
2296
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
|
|
2297
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2298
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
|
|
2299
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
|
|
2209
2300
|
] })
|
|
2210
2301
|
] }),
|
|
2211
|
-
/* @__PURE__ */
|
|
2212
|
-
/* @__PURE__ */
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2302
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2303
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2304
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2305
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
|
|
2215
2306
|
] })
|
|
2216
2307
|
] })
|
|
2217
2308
|
] }),
|
|
2218
|
-
/* @__PURE__ */
|
|
2219
|
-
/* @__PURE__ */
|
|
2220
|
-
/* @__PURE__ */
|
|
2221
|
-
/* @__PURE__ */
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
/* @__PURE__ */
|
|
2309
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2310
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
|
|
2311
|
+
/* @__PURE__ */ jsx19("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
2312
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2313
|
+
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2314
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
|
|
2315
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2316
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2317
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2318
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2228
2319
|
] }) })
|
|
2229
2320
|
] })
|
|
2230
2321
|
] }) })
|
|
2231
2322
|
] }),
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2235
|
-
/* @__PURE__ */
|
|
2236
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2324
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
|
|
2325
|
+
/* @__PURE__ */ jsx19("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs19("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
|
|
2326
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2327
|
+
/* @__PURE__ */ jsx19("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx19("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
|
|
2237
2328
|
] }, i)) })
|
|
2238
2329
|
] }),
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2243
|
-
/* @__PURE__ */
|
|
2330
|
+
/* @__PURE__ */ jsxs19("section", { children: [
|
|
2331
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
|
|
2332
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2333
|
+
/* @__PURE__ */ jsxs19("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2334
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2244
2335
|
"Loading..."
|
|
2245
2336
|
] }),
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2337
|
+
/* @__PURE__ */ jsxs19("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2338
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2248
2339
|
"Saving..."
|
|
2249
2340
|
] })
|
|
2250
2341
|
] })
|
|
@@ -2253,130 +2344,130 @@ var Loading = () => {
|
|
|
2253
2344
|
};
|
|
2254
2345
|
|
|
2255
2346
|
// src/stories/components/Participant.tsx
|
|
2256
|
-
import { jsx as
|
|
2347
|
+
import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2257
2348
|
var Participant = () => {
|
|
2258
|
-
return /* @__PURE__ */
|
|
2259
|
-
/* @__PURE__ */
|
|
2260
|
-
/* @__PURE__ */
|
|
2261
|
-
/* @__PURE__ */
|
|
2262
|
-
/* @__PURE__ */
|
|
2263
|
-
/* @__PURE__ */
|
|
2264
|
-
/* @__PURE__ */
|
|
2265
|
-
/* @__PURE__ */
|
|
2266
|
-
/* @__PURE__ */
|
|
2267
|
-
/* @__PURE__ */
|
|
2349
|
+
return /* @__PURE__ */ jsxs20("div", { style: { padding: "1.5rem" }, children: [
|
|
2350
|
+
/* @__PURE__ */ jsx20("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
|
|
2351
|
+
/* @__PURE__ */ jsxs20("section", { style: { marginBottom: "2rem" }, children: [
|
|
2352
|
+
/* @__PURE__ */ jsx20("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
|
|
2353
|
+
/* @__PURE__ */ jsxs20("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2354
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2355
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2356
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2357
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2358
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "AI Assistant" })
|
|
2268
2359
|
] })
|
|
2269
2360
|
] }) }),
|
|
2270
|
-
/* @__PURE__ */
|
|
2271
|
-
/* @__PURE__ */
|
|
2272
|
-
/* @__PURE__ */
|
|
2273
|
-
/* @__PURE__ */
|
|
2274
|
-
/* @__PURE__ */
|
|
2361
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2362
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2363
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2364
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2365
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2275
2366
|
] })
|
|
2276
2367
|
] }) }),
|
|
2277
|
-
/* @__PURE__ */
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
/* @__PURE__ */
|
|
2280
|
-
/* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2368
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2369
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2370
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2371
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2372
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2282
2373
|
] })
|
|
2283
2374
|
] }) })
|
|
2284
2375
|
] })
|
|
2285
2376
|
] }),
|
|
2286
|
-
/* @__PURE__ */
|
|
2287
|
-
/* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2289
|
-
/* @__PURE__ */
|
|
2290
|
-
/* @__PURE__ */
|
|
2291
|
-
/* @__PURE__ */
|
|
2292
|
-
/* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2377
|
+
/* @__PURE__ */ jsxs20("section", { style: { marginBottom: "2rem" }, children: [
|
|
2378
|
+
/* @__PURE__ */ jsx20("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
2379
|
+
/* @__PURE__ */ jsx20("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Characters can be active, silent (thinking but not speaking), absent (away from the scene), or removed." }),
|
|
2380
|
+
/* @__PURE__ */ jsxs20("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2381
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2382
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2383
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2384
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2385
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2295
2386
|
] })
|
|
2296
2387
|
] }) }),
|
|
2297
|
-
/* @__PURE__ */
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2388
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2389
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2390
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
2391
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ jsx20("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { d: "M16.5 12A4.5 4.5 0 0 0 12 7.5v4.09l3.13 3.13A4.46 4.46 0 0 0 16.5 12ZM19 12c0 1.68-.59 3.22-1.57 4.43L21 20l-1.41 1.41-18-18L3 2l4.57 4.57A7.97 7.97 0 0 1 12 4c4.42 0 8 3.58 8 8Zm-7-8a6 6 0 0 0-6 6c0 1.33.44 2.56 1.17 3.56L5 11.44A7.94 7.94 0 0 1 4 8" }) }) })
|
|
2301
2392
|
] }),
|
|
2302
|
-
/* @__PURE__ */
|
|
2303
|
-
/* @__PURE__ */
|
|
2304
|
-
/* @__PURE__ */
|
|
2305
|
-
/* @__PURE__ */
|
|
2393
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2394
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2395
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2396
|
+
/* @__PURE__ */ jsx20("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
2306
2397
|
] }),
|
|
2307
|
-
/* @__PURE__ */
|
|
2398
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
2308
2399
|
] })
|
|
2309
2400
|
] }) }),
|
|
2310
|
-
/* @__PURE__ */
|
|
2311
|
-
/* @__PURE__ */
|
|
2312
|
-
/* @__PURE__ */
|
|
2313
|
-
/* @__PURE__ */
|
|
2401
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2402
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2403
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2404
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ jsx20("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
2314
2405
|
] }),
|
|
2315
|
-
/* @__PURE__ */
|
|
2316
|
-
/* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2318
|
-
/* @__PURE__ */
|
|
2406
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2407
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2408
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2409
|
+
/* @__PURE__ */ jsx20("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
2319
2410
|
] }),
|
|
2320
|
-
/* @__PURE__ */
|
|
2411
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
2321
2412
|
] })
|
|
2322
2413
|
] }) }),
|
|
2323
|
-
/* @__PURE__ */
|
|
2324
|
-
/* @__PURE__ */
|
|
2325
|
-
/* @__PURE__ */
|
|
2326
|
-
/* @__PURE__ */
|
|
2327
|
-
/* @__PURE__ */
|
|
2414
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2415
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2416
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2417
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2418
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2328
2419
|
] })
|
|
2329
2420
|
] }) })
|
|
2330
2421
|
] })
|
|
2331
2422
|
] }),
|
|
2332
|
-
/* @__PURE__ */
|
|
2333
|
-
/* @__PURE__ */
|
|
2334
|
-
/* @__PURE__ */
|
|
2335
|
-
/* @__PURE__ */
|
|
2336
|
-
/* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
/* @__PURE__ */
|
|
2339
|
-
/* @__PURE__ */
|
|
2340
|
-
/* @__PURE__ */
|
|
2341
|
-
/* @__PURE__ */
|
|
2423
|
+
/* @__PURE__ */ jsxs20("section", { style: { marginBottom: "2rem" }, children: [
|
|
2424
|
+
/* @__PURE__ */ jsx20("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
|
2425
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2426
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ jsx20("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
|
|
2427
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
|
|
2428
|
+
/* @__PURE__ */ jsx20("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ jsx20("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
|
|
2429
|
+
/* @__PURE__ */ jsxs20("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2430
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2431
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2432
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
|
|
2342
2433
|
] }) }),
|
|
2343
|
-
/* @__PURE__ */
|
|
2344
|
-
/* @__PURE__ */
|
|
2345
|
-
/* @__PURE__ */
|
|
2434
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2435
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2436
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
|
|
2346
2437
|
] }) })
|
|
2347
2438
|
] })
|
|
2348
2439
|
] })
|
|
2349
2440
|
] })
|
|
2350
2441
|
] }),
|
|
2351
|
-
/* @__PURE__ */
|
|
2352
|
-
/* @__PURE__ */
|
|
2353
|
-
/* @__PURE__ */
|
|
2354
|
-
/* @__PURE__ */
|
|
2355
|
-
/* @__PURE__ */
|
|
2356
|
-
/* @__PURE__ */
|
|
2357
|
-
/* @__PURE__ */
|
|
2358
|
-
/* @__PURE__ */
|
|
2359
|
-
/* @__PURE__ */
|
|
2360
|
-
/* @__PURE__ */
|
|
2361
|
-
/* @__PURE__ */
|
|
2362
|
-
/* @__PURE__ */
|
|
2363
|
-
/* @__PURE__ */
|
|
2364
|
-
/* @__PURE__ */
|
|
2442
|
+
/* @__PURE__ */ jsxs20("section", { children: [
|
|
2443
|
+
/* @__PURE__ */ jsx20("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
|
|
2444
|
+
/* @__PURE__ */ jsxs20("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
2445
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2446
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2447
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2448
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2449
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
|
|
2450
|
+
/* @__PURE__ */ jsx20("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs20("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
|
|
2451
|
+
/* @__PURE__ */ jsx20("option", { value: "", children: "Select a provider..." }),
|
|
2452
|
+
/* @__PURE__ */ jsx20("option", { value: "__user__", children: "User (you type)" }),
|
|
2453
|
+
/* @__PURE__ */ jsx20("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2454
|
+
/* @__PURE__ */ jsx20("option", { value: "claude", children: "claude-3-opus" }),
|
|
2455
|
+
/* @__PURE__ */ jsx20("option", { value: "gemini", children: "gemini-pro" })
|
|
2365
2456
|
] }) })
|
|
2366
2457
|
] })
|
|
2367
2458
|
] }) }),
|
|
2368
|
-
/* @__PURE__ */
|
|
2369
|
-
/* @__PURE__ */
|
|
2370
|
-
/* @__PURE__ */
|
|
2371
|
-
/* @__PURE__ */
|
|
2372
|
-
/* @__PURE__ */
|
|
2373
|
-
/* @__PURE__ */
|
|
2459
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-header", children: [
|
|
2460
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx20("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2461
|
+
/* @__PURE__ */ jsxs20("div", { className: "qt-participant-card-info", children: [
|
|
2462
|
+
/* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2463
|
+
/* @__PURE__ */ jsx20("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2464
|
+
/* @__PURE__ */ jsx20("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
|
|
2374
2465
|
] }),
|
|
2375
|
-
/* @__PURE__ */
|
|
2376
|
-
/* @__PURE__ */
|
|
2377
|
-
/* @__PURE__ */
|
|
2378
|
-
/* @__PURE__ */
|
|
2379
|
-
/* @__PURE__ */
|
|
2466
|
+
/* @__PURE__ */ jsx20("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs20("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
|
|
2467
|
+
/* @__PURE__ */ jsx20("option", { value: "", children: "Select a provider..." }),
|
|
2468
|
+
/* @__PURE__ */ jsx20("option", { value: "__user__", children: "User (you type)" }),
|
|
2469
|
+
/* @__PURE__ */ jsx20("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2470
|
+
/* @__PURE__ */ jsx20("option", { value: "claude", children: "claude-3-opus" })
|
|
2380
2471
|
] }) })
|
|
2381
2472
|
] })
|
|
2382
2473
|
] }) })
|
|
@@ -2400,6 +2491,7 @@ export {
|
|
|
2400
2491
|
Avatars,
|
|
2401
2492
|
Dialogs,
|
|
2402
2493
|
Tabs,
|
|
2494
|
+
Workspace,
|
|
2403
2495
|
Chat,
|
|
2404
2496
|
Terminal,
|
|
2405
2497
|
FilePreview,
|