@quilltap/theme-storybook 1.0.33 → 1.0.35
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/CHANGELOG.md +14 -0
- package/dist/{chunk-C4SJNVAC.mjs → chunk-7CI72GBQ.mjs} +409 -319
- package/dist/index.css +140 -2
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +410 -319
- package/dist/index.mjs +3 -1
- package/dist/stories/index.d.mts +12 -1
- package/dist/stories/index.d.ts +12 -1
- package/dist/stories/index.js +410 -319
- package/dist/stories/index.mjs +3 -1
- package/package.json +4 -4
- package/src/css/qt-components.css +183 -2
- package/src/stories/components/Terminal.tsx +129 -0
- package/src/stories/index.ts +1 -0
|
@@ -1462,41 +1462,130 @@ var Chat = () => {
|
|
|
1462
1462
|
] });
|
|
1463
1463
|
};
|
|
1464
1464
|
|
|
1465
|
-
// src/stories/components/
|
|
1465
|
+
// src/stories/components/Terminal.tsx
|
|
1466
1466
|
import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1467
|
-
var
|
|
1467
|
+
var sampleOutput = `$ git status
|
|
1468
|
+
On branch main
|
|
1469
|
+
Your branch is up to date with 'origin/main'.
|
|
1470
|
+
|
|
1471
|
+
nothing to commit, working tree clean
|
|
1472
|
+
$ npm run dev
|
|
1473
|
+
> next dev
|
|
1474
|
+
\u25B2 Next.js 16.0.0
|
|
1475
|
+
- Local: http://localhost:3000
|
|
1476
|
+
- ready started server on 0.0.0.0:3000`;
|
|
1477
|
+
var Terminal = () => {
|
|
1468
1478
|
return /* @__PURE__ */ jsxs12("div", { style: { padding: "1.5rem" }, children: [
|
|
1469
|
-
/* @__PURE__ */ jsx12("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "
|
|
1479
|
+
/* @__PURE__ */ jsx12("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Terminal Components" }),
|
|
1480
|
+
/* @__PURE__ */ jsxs12("p", { style: { marginBottom: "1.5rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1481
|
+
"The terminal carries its own identity. By default it stays dark in both light and dark themes \u2014 but a theme can override",
|
|
1482
|
+
" ",
|
|
1483
|
+
/* @__PURE__ */ jsx12("code", { children: "--qt-terminal-bg" }),
|
|
1484
|
+
", ",
|
|
1485
|
+
/* @__PURE__ */ jsx12("code", { children: "--qt-terminal-fg" }),
|
|
1486
|
+
", and the",
|
|
1487
|
+
/* @__PURE__ */ jsx12("code", { children: "--qt-terminal-chrome-*" }),
|
|
1488
|
+
" tokens to reskin every surface below."
|
|
1489
|
+
] }),
|
|
1490
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1491
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "In-chat embed" }),
|
|
1492
|
+
/* @__PURE__ */ jsxs12("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1493
|
+
/* @__PURE__ */ jsx12("code", { children: ".qt-terminal-embed" }),
|
|
1494
|
+
" wraps the embed card; the header and footer strips inherit the surrounding theme so they nest cleanly with chat bubbles."
|
|
1495
|
+
] }),
|
|
1496
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1497
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-terminal-embed-header", children: [
|
|
1498
|
+
/* @__PURE__ */ jsx12("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: /* @__PURE__ */ jsx12("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1499
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1500
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-icon", type: "button", children: "Pop out" }),
|
|
1501
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-icon qt-text-destructive", type: "button", children: "Kill" })
|
|
1502
|
+
] })
|
|
1503
|
+
] }),
|
|
1504
|
+
/* @__PURE__ */ jsx12("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 })
|
|
1505
|
+
] })
|
|
1506
|
+
] }),
|
|
1507
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1508
|
+
/* @__PURE__ */ jsx12("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)" }),
|
|
1509
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1510
|
+
/* @__PURE__ */ jsx12("div", { className: "qt-terminal-embed-header", children: /* @__PURE__ */ jsx12("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1511
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-terminal-embed-footer", children: [
|
|
1512
|
+
/* @__PURE__ */ jsx12("span", { className: "qt-text-secondary", children: "Showing in Terminal Mode pane." }),
|
|
1513
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-secondary", type: "button", style: { fontSize: "0.75rem", padding: "0.25rem 0.5rem" }, children: "Go to pane \u2192" })
|
|
1514
|
+
] })
|
|
1515
|
+
] })
|
|
1516
|
+
] }),
|
|
1470
1517
|
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1471
|
-
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "
|
|
1472
|
-
/* @__PURE__ */ jsxs12("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)"
|
|
1473
|
-
|
|
1518
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Pop-out page chrome" }),
|
|
1519
|
+
/* @__PURE__ */ jsxs12("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1520
|
+
"The full-screen pop-out page uses",
|
|
1521
|
+
" ",
|
|
1522
|
+
/* @__PURE__ */ jsx12("code", { children: ".qt-terminal-popout-page" }),
|
|
1523
|
+
" as the outer canvas and",
|
|
1524
|
+
" ",
|
|
1525
|
+
/* @__PURE__ */ jsx12("code", { children: ".qt-terminal-popout-header" }),
|
|
1526
|
+
" for the breadcrumb bar."
|
|
1527
|
+
] }),
|
|
1528
|
+
/* @__PURE__ */ jsxs12("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: [
|
|
1529
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-terminal-popout-header", children: [
|
|
1530
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1531
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-icon", type: "button", style: { color: "inherit" }, children: "\u2190" }),
|
|
1532
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-terminal-popout-link", style: { fontSize: "0.875rem" }, children: "Chat" }),
|
|
1533
|
+
/* @__PURE__ */ jsx12("span", { className: "qt-terminal-popout-separator", children: "/" }),
|
|
1534
|
+
/* @__PURE__ */ jsx12("h1", { className: "qt-terminal-popout-title", style: { fontSize: "1rem", margin: 0 }, children: "Terminal \u2014 zsh" })
|
|
1535
|
+
] }),
|
|
1536
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-destructive", type: "button", style: { fontSize: "0.875rem" }, children: "Kill Session" })
|
|
1537
|
+
] }),
|
|
1538
|
+
/* @__PURE__ */ jsx12("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 })
|
|
1539
|
+
] })
|
|
1540
|
+
] }),
|
|
1541
|
+
/* @__PURE__ */ jsxs12("section", { children: [
|
|
1542
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Session-exited overlay" }),
|
|
1543
|
+
/* @__PURE__ */ jsxs12("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1544
|
+
"When the PTY exits but the terminal stays mounted, the",
|
|
1545
|
+
" ",
|
|
1546
|
+
/* @__PURE__ */ jsx12("code", { children: ".qt-terminal-closed-badge" }),
|
|
1547
|
+
" overlay marks it."
|
|
1548
|
+
] }),
|
|
1549
|
+
/* @__PURE__ */ jsx12("div", { className: "qt-terminal-surface", style: { position: "relative", height: "120px", borderRadius: "0.5rem" }, children: /* @__PURE__ */ jsx12("span", { className: "qt-terminal-closed-badge", children: "Closed" }) })
|
|
1550
|
+
] })
|
|
1551
|
+
] });
|
|
1552
|
+
};
|
|
1553
|
+
|
|
1554
|
+
// src/stories/components/FilePreview.tsx
|
|
1555
|
+
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1556
|
+
var FilePreview = () => {
|
|
1557
|
+
return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.5rem" }, children: [
|
|
1558
|
+
/* @__PURE__ */ jsx13("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "File Preview Components" }),
|
|
1559
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1560
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Scroll Container" }),
|
|
1561
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1562
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-scroll" }),
|
|
1474
1563
|
" - Scrollable container for file content with configurable max height."
|
|
1475
1564
|
] }),
|
|
1476
|
-
/* @__PURE__ */
|
|
1565
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-file-preview-scroll", style: { height: "150px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx13("div", { style: { padding: "1rem" }, children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs13("p", { style: { margin: "0.5rem 0" }, children: [
|
|
1477
1566
|
"Line ",
|
|
1478
1567
|
i + 1,
|
|
1479
1568
|
": Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
1480
1569
|
] }, i)) }) })
|
|
1481
1570
|
] }),
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1484
|
-
/* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1571
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1572
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Content Panel" }),
|
|
1573
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1574
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-panel" }),
|
|
1486
1575
|
" - Background panel for rendered markdown content."
|
|
1487
1576
|
] }),
|
|
1488
|
-
/* @__PURE__ */
|
|
1489
|
-
/* @__PURE__ */
|
|
1490
|
-
/* @__PURE__ */
|
|
1577
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-file-preview-panel", children: [
|
|
1578
|
+
/* @__PURE__ */ jsx13("h4", { style: { margin: "0 0 0.5rem 0" }, children: "Document Title" }),
|
|
1579
|
+
/* @__PURE__ */ jsx13("p", { style: { margin: 0 }, children: "This is a content panel used for displaying rendered markdown files with a subtle background." })
|
|
1491
1580
|
] })
|
|
1492
1581
|
] }),
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1582
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1583
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code Block" }),
|
|
1584
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1585
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-code" }),
|
|
1497
1586
|
" - Styled code block for plain text and source files with word wrap."
|
|
1498
1587
|
] }),
|
|
1499
|
-
/* @__PURE__ */
|
|
1588
|
+
/* @__PURE__ */ jsx13("pre", { className: "qt-file-preview-code", children: `function greet(name: string): string {
|
|
1500
1589
|
return \`Hello, \${name}!\`;
|
|
1501
1590
|
}
|
|
1502
1591
|
|
|
@@ -1504,133 +1593,133 @@ var FilePreview = () => {
|
|
|
1504
1593
|
const message = greet("World");
|
|
1505
1594
|
console.log(message);` })
|
|
1506
1595
|
] }),
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
1509
|
-
/* @__PURE__ */
|
|
1510
|
-
/* @__PURE__ */
|
|
1596
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1597
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading State" }),
|
|
1598
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1599
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-loading" }),
|
|
1511
1600
|
" + ",
|
|
1512
|
-
/* @__PURE__ */
|
|
1601
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-loading-text" }),
|
|
1513
1602
|
" - Loading indicator."
|
|
1514
1603
|
] }),
|
|
1515
|
-
/* @__PURE__ */
|
|
1604
|
+
/* @__PURE__ */ jsx13("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-file-preview-loading", style: { minHeight: "150px" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-file-preview-loading-text", children: "Loading file..." }) }) })
|
|
1516
1605
|
] }),
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
/* @__PURE__ */
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1606
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1607
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty / Error State" }),
|
|
1608
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1609
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-empty" }),
|
|
1521
1610
|
" + ",
|
|
1522
|
-
/* @__PURE__ */
|
|
1611
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-file-preview-empty-icon" }),
|
|
1523
1612
|
" - Empty or error state display."
|
|
1524
1613
|
] }),
|
|
1525
|
-
/* @__PURE__ */
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
/* @__PURE__ */
|
|
1528
|
-
/* @__PURE__ */
|
|
1614
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }, children: [
|
|
1615
|
+
/* @__PURE__ */ jsx13("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1616
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-file-preview-empty-icon", children: "\u{1F4C4}" }),
|
|
1617
|
+
/* @__PURE__ */ jsx13("p", { children: "No content available" })
|
|
1529
1618
|
] }) }),
|
|
1530
|
-
/* @__PURE__ */
|
|
1531
|
-
/* @__PURE__ */
|
|
1532
|
-
/* @__PURE__ */
|
|
1619
|
+
/* @__PURE__ */ jsx13("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1620
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-file-preview-empty-icon", children: "\u26A0\uFE0F" }),
|
|
1621
|
+
/* @__PURE__ */ jsx13("p", { children: "Failed to load file" })
|
|
1533
1622
|
] }) })
|
|
1534
1623
|
] })
|
|
1535
1624
|
] }),
|
|
1536
|
-
/* @__PURE__ */
|
|
1537
|
-
/* @__PURE__ */
|
|
1538
|
-
/* @__PURE__ */
|
|
1539
|
-
/* @__PURE__ */
|
|
1625
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1626
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wikilinks" }),
|
|
1627
|
+
/* @__PURE__ */ jsxs13("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1628
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-wikilink" }),
|
|
1540
1629
|
" + ",
|
|
1541
|
-
/* @__PURE__ */
|
|
1630
|
+
/* @__PURE__ */ jsx13("code", { children: ".qt-wikilink-broken" }),
|
|
1542
1631
|
" - Internal document links in markdown."
|
|
1543
1632
|
] }),
|
|
1544
|
-
/* @__PURE__ */
|
|
1633
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-file-preview-panel", children: /* @__PURE__ */ jsxs13("p", { style: { margin: 0, lineHeight: 2 }, children: [
|
|
1545
1634
|
"This document references ",
|
|
1546
|
-
/* @__PURE__ */
|
|
1635
|
+
/* @__PURE__ */ jsx13("button", { type: "button", className: "qt-wikilink", children: "Character Profile" }),
|
|
1547
1636
|
" and links to ",
|
|
1548
|
-
/* @__PURE__ */
|
|
1637
|
+
/* @__PURE__ */ jsx13("button", { type: "button", className: "qt-wikilink", children: "World Building \u2192 Geography" }),
|
|
1549
1638
|
". There's also a ",
|
|
1550
|
-
/* @__PURE__ */
|
|
1639
|
+
/* @__PURE__ */ jsx13("button", { type: "button", className: "qt-wikilink-broken", children: "Missing Document" }),
|
|
1551
1640
|
" that doesn't exist yet."
|
|
1552
1641
|
] }) })
|
|
1553
1642
|
] }),
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
/* @__PURE__ */
|
|
1556
|
-
/* @__PURE__ */
|
|
1643
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1644
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "CSS Variables" }),
|
|
1645
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.5rem" }, children: [
|
|
1557
1646
|
{ name: "--qt-file-preview-max-height", value: "70vh", desc: "Max height of scroll container" },
|
|
1558
1647
|
{ name: "--qt-file-preview-min-height", value: "300px", desc: "Min height of loading/empty states" },
|
|
1559
1648
|
{ name: "--qt-file-preview-panel-bg", value: "muted/30%", desc: "Content panel background" },
|
|
1560
1649
|
{ name: "--qt-code-bg", value: "muted", desc: "Code block background" },
|
|
1561
1650
|
{ name: "--qt-code-fg", value: "foreground", desc: "Code block text color" },
|
|
1562
1651
|
{ name: "--qt-code-font", value: "monospace", desc: "Code block font family" }
|
|
1563
|
-
].map(({ name, value, desc }) => /* @__PURE__ */
|
|
1564
|
-
/* @__PURE__ */
|
|
1565
|
-
/* @__PURE__ */
|
|
1652
|
+
].map(({ name, value, desc }) => /* @__PURE__ */ jsxs13("div", { style: { padding: "0.75rem", background: "var(--color-muted)", borderRadius: "var(--radius-md)" }, children: [
|
|
1653
|
+
/* @__PURE__ */ jsx13("code", { style: { fontSize: "0.75rem", fontWeight: 600 }, children: name }),
|
|
1654
|
+
/* @__PURE__ */ jsxs13("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.25rem" }, children: [
|
|
1566
1655
|
"Default: ",
|
|
1567
1656
|
value
|
|
1568
1657
|
] }),
|
|
1569
|
-
/* @__PURE__ */
|
|
1658
|
+
/* @__PURE__ */ jsx13("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: desc })
|
|
1570
1659
|
] }, name)) })
|
|
1571
1660
|
] })
|
|
1572
1661
|
] });
|
|
1573
1662
|
};
|
|
1574
1663
|
|
|
1575
1664
|
// src/stories/components/ThemeComparison.tsx
|
|
1576
|
-
import { jsx as
|
|
1665
|
+
import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1577
1666
|
var ThemePanel = ({ title, description }) => {
|
|
1578
|
-
return /* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
] }),
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1586
|
-
/* @__PURE__ */
|
|
1667
|
+
return /* @__PURE__ */ jsxs14("div", { style: { flex: 1, minWidth: "20rem" }, children: [
|
|
1668
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "1rem" }, children: [
|
|
1669
|
+
/* @__PURE__ */ jsx14("h4", { style: { fontWeight: 600 }, children: title }),
|
|
1670
|
+
/* @__PURE__ */ jsx14("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: description })
|
|
1671
|
+
] }),
|
|
1672
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-card", style: { marginBottom: "1rem" }, children: [
|
|
1673
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-card-header", children: [
|
|
1674
|
+
/* @__PURE__ */ jsx14("h5", { className: "qt-card-title", children: "Sample Card" }),
|
|
1675
|
+
/* @__PURE__ */ jsx14("p", { className: "qt-card-description", children: "This is how cards look in this theme." })
|
|
1587
1676
|
] }),
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1591
|
-
/* @__PURE__ */
|
|
1592
|
-
/* @__PURE__ */
|
|
1593
|
-
/* @__PURE__ */
|
|
1677
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-card-body", children: [
|
|
1678
|
+
/* @__PURE__ */ jsx14("p", { style: { marginBottom: "1rem" }, children: "Cards are used throughout the application for grouping content." }),
|
|
1679
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1680
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
1681
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
1682
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-success", children: "Success" })
|
|
1594
1683
|
] })
|
|
1595
1684
|
] }),
|
|
1596
|
-
/* @__PURE__ */
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
/* @__PURE__ */
|
|
1685
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-card-footer", children: [
|
|
1686
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-ghost", children: "Cancel" }),
|
|
1687
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", children: "Save" })
|
|
1599
1688
|
] })
|
|
1600
1689
|
] }),
|
|
1601
|
-
/* @__PURE__ */
|
|
1602
|
-
/* @__PURE__ */
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__PURE__ */
|
|
1690
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-panel", style: { padding: "1rem", marginBottom: "1rem" }, children: [
|
|
1691
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1692
|
+
/* @__PURE__ */ jsx14("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Text Input" }),
|
|
1693
|
+
/* @__PURE__ */ jsx14("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
|
|
1605
1694
|
] }),
|
|
1606
|
-
/* @__PURE__ */
|
|
1607
|
-
/* @__PURE__ */
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1695
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1696
|
+
/* @__PURE__ */ jsx14("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Select" }),
|
|
1697
|
+
/* @__PURE__ */ jsxs14("select", { className: "qt-input qt-select", children: [
|
|
1698
|
+
/* @__PURE__ */ jsx14("option", { children: "Option 1" }),
|
|
1699
|
+
/* @__PURE__ */ jsx14("option", { children: "Option 2" })
|
|
1611
1700
|
] })
|
|
1612
1701
|
] }),
|
|
1613
|
-
/* @__PURE__ */
|
|
1614
|
-
/* @__PURE__ */
|
|
1615
|
-
/* @__PURE__ */
|
|
1702
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1703
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-secondary qt-button-sm", children: "Secondary" }),
|
|
1704
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Primary" })
|
|
1616
1705
|
] })
|
|
1617
1706
|
] }),
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
/* @__PURE__ */
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
/* @__PURE__ */
|
|
1707
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1708
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1709
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1710
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx14("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
|
|
1622
1711
|
] }),
|
|
1623
|
-
/* @__PURE__ */
|
|
1712
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx14("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx14("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
|
|
1624
1713
|
] })
|
|
1625
1714
|
] });
|
|
1626
1715
|
};
|
|
1627
1716
|
var ThemeComparison = () => {
|
|
1628
|
-
return /* @__PURE__ */
|
|
1629
|
-
/* @__PURE__ */
|
|
1630
|
-
/* @__PURE__ */
|
|
1631
|
-
/* @__PURE__ */
|
|
1632
|
-
/* @__PURE__ */
|
|
1633
|
-
/* @__PURE__ */
|
|
1717
|
+
return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
|
|
1718
|
+
/* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Theme Comparison" }),
|
|
1719
|
+
/* @__PURE__ */ jsx14("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." }),
|
|
1720
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1721
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Current Theme Preview" }),
|
|
1722
|
+
/* @__PURE__ */ jsx14(
|
|
1634
1723
|
ThemePanel,
|
|
1635
1724
|
{
|
|
1636
1725
|
title: "Active Theme",
|
|
@@ -1638,9 +1727,9 @@ var ThemeComparison = () => {
|
|
|
1638
1727
|
}
|
|
1639
1728
|
)
|
|
1640
1729
|
] }),
|
|
1641
|
-
/* @__PURE__ */
|
|
1642
|
-
/* @__PURE__ */
|
|
1643
|
-
/* @__PURE__ */
|
|
1730
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1731
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Key Theme Colors" }),
|
|
1732
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1644
1733
|
{ name: "Background", var: "--color-background" },
|
|
1645
1734
|
{ name: "Foreground", var: "--color-foreground" },
|
|
1646
1735
|
{ name: "Card", var: "--color-card" },
|
|
@@ -1649,8 +1738,8 @@ var ThemeComparison = () => {
|
|
|
1649
1738
|
{ name: "Muted", var: "--color-muted" },
|
|
1650
1739
|
{ name: "Accent", var: "--color-accent" },
|
|
1651
1740
|
{ name: "Border", var: "--color-border" }
|
|
1652
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1653
|
-
/* @__PURE__ */
|
|
1741
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs14("div", { style: { textAlign: "center" }, children: [
|
|
1742
|
+
/* @__PURE__ */ jsx14(
|
|
1654
1743
|
"div",
|
|
1655
1744
|
{
|
|
1656
1745
|
style: {
|
|
@@ -1662,17 +1751,17 @@ var ThemeComparison = () => {
|
|
|
1662
1751
|
}
|
|
1663
1752
|
}
|
|
1664
1753
|
),
|
|
1665
|
-
/* @__PURE__ */
|
|
1754
|
+
/* @__PURE__ */ jsx14("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1666
1755
|
] }, cssVar)) })
|
|
1667
1756
|
] }),
|
|
1668
|
-
/* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1757
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1758
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Semantic Colors" }),
|
|
1759
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1671
1760
|
{ name: "Destructive", var: "--color-destructive" },
|
|
1672
1761
|
{ name: "Success", var: "--color-success" },
|
|
1673
1762
|
{ name: "Warning", var: "--color-warning" }
|
|
1674
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1675
|
-
/* @__PURE__ */
|
|
1763
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs14("div", { style: { textAlign: "center" }, children: [
|
|
1764
|
+
/* @__PURE__ */ jsx14(
|
|
1676
1765
|
"div",
|
|
1677
1766
|
{
|
|
1678
1767
|
style: {
|
|
@@ -1684,50 +1773,50 @@ var ThemeComparison = () => {
|
|
|
1684
1773
|
}
|
|
1685
1774
|
}
|
|
1686
1775
|
),
|
|
1687
|
-
/* @__PURE__ */
|
|
1776
|
+
/* @__PURE__ */ jsx14("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1688
1777
|
] }, cssVar)) })
|
|
1689
1778
|
] }),
|
|
1690
|
-
/* @__PURE__ */
|
|
1691
|
-
/* @__PURE__ */
|
|
1692
|
-
/* @__PURE__ */
|
|
1693
|
-
/* @__PURE__ */
|
|
1694
|
-
/* @__PURE__ */
|
|
1695
|
-
/* @__PURE__ */
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1698
|
-
/* @__PURE__ */
|
|
1699
|
-
/* @__PURE__ */
|
|
1779
|
+
/* @__PURE__ */ jsxs14("section", { children: [
|
|
1780
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Showcase" }),
|
|
1781
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1782
|
+
/* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Buttons" }),
|
|
1783
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
1784
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", children: "Primary" }),
|
|
1785
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-secondary", children: "Secondary" }),
|
|
1786
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-ghost", children: "Ghost" }),
|
|
1787
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-destructive", children: "Destructive" }),
|
|
1788
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button qt-button-primary", disabled: true, children: "Disabled" })
|
|
1700
1789
|
] })
|
|
1701
1790
|
] }),
|
|
1702
|
-
/* @__PURE__ */
|
|
1703
|
-
/* @__PURE__ */
|
|
1704
|
-
/* @__PURE__ */
|
|
1705
|
-
/* @__PURE__ */
|
|
1706
|
-
/* @__PURE__ */
|
|
1707
|
-
/* @__PURE__ */
|
|
1708
|
-
/* @__PURE__ */
|
|
1709
|
-
/* @__PURE__ */
|
|
1710
|
-
/* @__PURE__ */
|
|
1791
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1792
|
+
/* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Badges" }),
|
|
1793
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
1794
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-default", children: "Default" }),
|
|
1795
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
1796
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
1797
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-success", children: "Success" }),
|
|
1798
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-warning", children: "Warning" }),
|
|
1799
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-badge qt-badge-destructive", children: "Destructive" })
|
|
1711
1800
|
] })
|
|
1712
1801
|
] }),
|
|
1713
|
-
/* @__PURE__ */
|
|
1714
|
-
/* @__PURE__ */
|
|
1715
|
-
/* @__PURE__ */
|
|
1716
|
-
/* @__PURE__ */
|
|
1717
|
-
/* @__PURE__ */
|
|
1718
|
-
/* @__PURE__ */
|
|
1719
|
-
/* @__PURE__ */
|
|
1802
|
+
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
1803
|
+
/* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Interactive Card" }),
|
|
1804
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-card qt-card-interactive", style: { maxWidth: "20rem", cursor: "pointer" }, children: /* @__PURE__ */ jsx14("div", { className: "qt-card-header", children: /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1805
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx14("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1806
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
1807
|
+
/* @__PURE__ */ jsx14("h5", { className: "qt-card-title", children: "Character Name" }),
|
|
1808
|
+
/* @__PURE__ */ jsx14("p", { className: "qt-card-description", children: "Click to interact" })
|
|
1720
1809
|
] })
|
|
1721
1810
|
] }) }) })
|
|
1722
1811
|
] }),
|
|
1723
|
-
/* @__PURE__ */
|
|
1724
|
-
/* @__PURE__ */
|
|
1725
|
-
/* @__PURE__ */
|
|
1726
|
-
/* @__PURE__ */
|
|
1727
|
-
/* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
/* @__PURE__ */
|
|
1812
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
1813
|
+
/* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Form Elements" }),
|
|
1814
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap", maxWidth: "32rem" }, children: [
|
|
1815
|
+
/* @__PURE__ */ jsx14("input", { className: "qt-input", type: "text", placeholder: "Text input", style: { flex: "1 1 10rem" } }),
|
|
1816
|
+
/* @__PURE__ */ jsxs14("select", { className: "qt-input qt-select", style: { flex: "1 1 10rem" }, children: [
|
|
1817
|
+
/* @__PURE__ */ jsx14("option", { children: "Select option" }),
|
|
1818
|
+
/* @__PURE__ */ jsx14("option", { children: "Option 1" }),
|
|
1819
|
+
/* @__PURE__ */ jsx14("option", { children: "Option 2" })
|
|
1731
1820
|
] })
|
|
1732
1821
|
] })
|
|
1733
1822
|
] })
|
|
@@ -1736,125 +1825,125 @@ var ThemeComparison = () => {
|
|
|
1736
1825
|
};
|
|
1737
1826
|
|
|
1738
1827
|
// src/stories/components/EmptyState.tsx
|
|
1739
|
-
import { jsx as
|
|
1828
|
+
import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1740
1829
|
var EmptyState = () => {
|
|
1741
|
-
return /* @__PURE__ */
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1744
|
-
/* @__PURE__ */
|
|
1745
|
-
/* @__PURE__ */
|
|
1746
|
-
/* @__PURE__ */
|
|
1747
|
-
/* @__PURE__ */
|
|
1748
|
-
/* @__PURE__ */
|
|
1830
|
+
return /* @__PURE__ */ jsxs15("div", { style: { padding: "1.5rem" }, children: [
|
|
1831
|
+
/* @__PURE__ */ jsx15("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
|
|
1832
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1833
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
|
|
1834
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-empty-state", children: [
|
|
1835
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("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" }) }) }),
|
|
1836
|
+
/* @__PURE__ */ jsx15("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
|
|
1837
|
+
/* @__PURE__ */ jsx15("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
|
|
1749
1838
|
] })
|
|
1750
1839
|
] }),
|
|
1751
|
-
/* @__PURE__ */
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__PURE__ */
|
|
1755
|
-
/* @__PURE__ */
|
|
1756
|
-
/* @__PURE__ */
|
|
1757
|
-
/* @__PURE__ */
|
|
1840
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1841
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
|
|
1842
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-empty-state", children: [
|
|
1843
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("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" }) }) }),
|
|
1844
|
+
/* @__PURE__ */ jsx15("h4", { className: "qt-empty-state-title", children: "No characters" }),
|
|
1845
|
+
/* @__PURE__ */ jsx15("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
|
|
1846
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx15("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
|
|
1758
1847
|
] })
|
|
1759
1848
|
] }),
|
|
1760
|
-
/* @__PURE__ */
|
|
1761
|
-
/* @__PURE__ */
|
|
1762
|
-
/* @__PURE__ */
|
|
1763
|
-
/* @__PURE__ */
|
|
1764
|
-
/* @__PURE__ */
|
|
1765
|
-
/* @__PURE__ */
|
|
1766
|
-
/* @__PURE__ */
|
|
1849
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1850
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
|
|
1851
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-empty-state", children: [
|
|
1852
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
|
|
1853
|
+
/* @__PURE__ */ jsx15("h4", { className: "qt-empty-state-title", children: "No results found" }),
|
|
1854
|
+
/* @__PURE__ */ jsx15("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
|
|
1855
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx15("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
|
|
1767
1856
|
] })
|
|
1768
1857
|
] }),
|
|
1769
|
-
/* @__PURE__ */
|
|
1770
|
-
/* @__PURE__ */
|
|
1771
|
-
/* @__PURE__ */
|
|
1772
|
-
/* @__PURE__ */
|
|
1773
|
-
/* @__PURE__ */
|
|
1774
|
-
/* @__PURE__ */
|
|
1775
|
-
/* @__PURE__ */
|
|
1858
|
+
/* @__PURE__ */ jsxs15("section", { children: [
|
|
1859
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
|
|
1860
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-empty-state", children: [
|
|
1861
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("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" }) }) }),
|
|
1862
|
+
/* @__PURE__ */ jsx15("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
|
|
1863
|
+
/* @__PURE__ */ jsx15("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
|
|
1864
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx15("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
|
|
1776
1865
|
] })
|
|
1777
1866
|
] })
|
|
1778
1867
|
] });
|
|
1779
1868
|
};
|
|
1780
1869
|
|
|
1781
1870
|
// src/stories/components/Loading.tsx
|
|
1782
|
-
import { jsx as
|
|
1871
|
+
import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1783
1872
|
var Loading = () => {
|
|
1784
|
-
return /* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
/* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
/* @__PURE__ */
|
|
1789
|
-
/* @__PURE__ */
|
|
1790
|
-
/* @__PURE__ */
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
] }),
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
/* @__PURE__ */
|
|
1795
|
-
/* @__PURE__ */
|
|
1796
|
-
] }),
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1873
|
+
return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
|
|
1874
|
+
/* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
|
|
1875
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1876
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
|
|
1877
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
|
|
1878
|
+
/* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
1879
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
|
|
1880
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
|
|
1881
|
+
] }),
|
|
1882
|
+
/* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
1883
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
|
|
1884
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
|
|
1885
|
+
] }),
|
|
1886
|
+
/* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
1887
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
|
|
1888
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
|
|
1800
1889
|
] })
|
|
1801
1890
|
] })
|
|
1802
1891
|
] }),
|
|
1803
|
-
/* @__PURE__ */
|
|
1804
|
-
/* @__PURE__ */
|
|
1805
|
-
/* @__PURE__ */
|
|
1806
|
-
/* @__PURE__ */
|
|
1807
|
-
/* @__PURE__ */
|
|
1808
|
-
/* @__PURE__ */
|
|
1892
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1893
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
|
|
1894
|
+
/* @__PURE__ */ jsxs16("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1895
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
|
|
1896
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
|
|
1897
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
1809
1898
|
] })
|
|
1810
1899
|
] }),
|
|
1811
|
-
/* @__PURE__ */
|
|
1812
|
-
/* @__PURE__ */
|
|
1813
|
-
/* @__PURE__ */
|
|
1814
|
-
/* @__PURE__ */
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1817
|
-
/* @__PURE__ */
|
|
1818
|
-
/* @__PURE__ */
|
|
1900
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1901
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
|
|
1902
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
|
|
1903
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
|
|
1904
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
|
|
1905
|
+
/* @__PURE__ */ jsxs16("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1906
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
|
|
1907
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
|
|
1819
1908
|
] })
|
|
1820
1909
|
] }),
|
|
1821
|
-
/* @__PURE__ */
|
|
1822
|
-
/* @__PURE__ */
|
|
1823
|
-
/* @__PURE__ */
|
|
1824
|
-
/* @__PURE__ */
|
|
1910
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1911
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
1912
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
1913
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
|
|
1825
1914
|
] })
|
|
1826
1915
|
] })
|
|
1827
1916
|
] }),
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
/* @__PURE__ */
|
|
1830
|
-
/* @__PURE__ */
|
|
1831
|
-
/* @__PURE__ */
|
|
1832
|
-
/* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
1835
|
-
/* @__PURE__ */
|
|
1836
|
-
/* @__PURE__ */
|
|
1837
|
-
/* @__PURE__ */
|
|
1917
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1918
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
|
|
1919
|
+
/* @__PURE__ */ jsx16("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
1920
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
1921
|
+
/* @__PURE__ */ jsxs16("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1922
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
|
|
1923
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1924
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
1925
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
1926
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
1838
1927
|
] }) })
|
|
1839
1928
|
] })
|
|
1840
1929
|
] }) })
|
|
1841
1930
|
] }),
|
|
1842
|
-
/* @__PURE__ */
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
/* @__PURE__ */
|
|
1845
|
-
/* @__PURE__ */
|
|
1846
|
-
/* @__PURE__ */
|
|
1931
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1932
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
|
|
1933
|
+
/* @__PURE__ */ jsx16("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs16("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
|
|
1934
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
1935
|
+
/* @__PURE__ */ jsx16("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx16("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
|
|
1847
1936
|
] }, i)) })
|
|
1848
1937
|
] }),
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
/* @__PURE__ */
|
|
1938
|
+
/* @__PURE__ */ jsxs16("section", { children: [
|
|
1939
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
|
|
1940
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
1941
|
+
/* @__PURE__ */ jsxs16("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1942
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
1854
1943
|
"Loading..."
|
|
1855
1944
|
] }),
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1945
|
+
/* @__PURE__ */ jsxs16("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1946
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
1858
1947
|
"Saving..."
|
|
1859
1948
|
] })
|
|
1860
1949
|
] })
|
|
@@ -1863,130 +1952,130 @@ var Loading = () => {
|
|
|
1863
1952
|
};
|
|
1864
1953
|
|
|
1865
1954
|
// src/stories/components/Participant.tsx
|
|
1866
|
-
import { jsx as
|
|
1955
|
+
import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1867
1956
|
var Participant = () => {
|
|
1868
|
-
return /* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1871
|
-
/* @__PURE__ */
|
|
1872
|
-
/* @__PURE__ */
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1876
|
-
/* @__PURE__ */
|
|
1877
|
-
/* @__PURE__ */
|
|
1957
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "1.5rem" }, children: [
|
|
1958
|
+
/* @__PURE__ */ jsx17("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
|
|
1959
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
1960
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
|
|
1961
|
+
/* @__PURE__ */ jsxs17("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1962
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
1963
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
1964
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
1965
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
1966
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "AI Assistant" })
|
|
1878
1967
|
] })
|
|
1879
1968
|
] }) }),
|
|
1880
|
-
/* @__PURE__ */
|
|
1881
|
-
/* @__PURE__ */
|
|
1882
|
-
/* @__PURE__ */
|
|
1883
|
-
/* @__PURE__ */
|
|
1884
|
-
/* @__PURE__ */
|
|
1969
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
1970
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
1971
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
1972
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
1973
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
1885
1974
|
] })
|
|
1886
1975
|
] }) }),
|
|
1887
|
-
/* @__PURE__ */
|
|
1888
|
-
/* @__PURE__ */
|
|
1889
|
-
/* @__PURE__ */
|
|
1890
|
-
/* @__PURE__ */
|
|
1891
|
-
/* @__PURE__ */
|
|
1976
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
1977
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
1978
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
1979
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "You" }),
|
|
1980
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Human" })
|
|
1892
1981
|
] })
|
|
1893
1982
|
] }) })
|
|
1894
1983
|
] })
|
|
1895
1984
|
] }),
|
|
1896
|
-
/* @__PURE__ */
|
|
1897
|
-
/* @__PURE__ */
|
|
1898
|
-
/* @__PURE__ */
|
|
1899
|
-
/* @__PURE__ */
|
|
1900
|
-
/* @__PURE__ */
|
|
1901
|
-
/* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
1903
|
-
/* @__PURE__ */
|
|
1904
|
-
/* @__PURE__ */
|
|
1985
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
1986
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
1987
|
+
/* @__PURE__ */ jsx17("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." }),
|
|
1988
|
+
/* @__PURE__ */ jsxs17("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1989
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
1990
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
1991
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
1992
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
1993
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
1905
1994
|
] })
|
|
1906
1995
|
] }) }),
|
|
1907
|
-
/* @__PURE__ */
|
|
1908
|
-
/* @__PURE__ */
|
|
1909
|
-
/* @__PURE__ */
|
|
1910
|
-
/* @__PURE__ */
|
|
1996
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
1997
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1998
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
1999
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ jsx17("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) })
|
|
1911
2000
|
] }),
|
|
1912
|
-
/* @__PURE__ */
|
|
1913
|
-
/* @__PURE__ */
|
|
1914
|
-
/* @__PURE__ */
|
|
1915
|
-
/* @__PURE__ */
|
|
2001
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
2002
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2003
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2004
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
1916
2005
|
] }),
|
|
1917
|
-
/* @__PURE__ */
|
|
2006
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
1918
2007
|
] })
|
|
1919
2008
|
] }) }),
|
|
1920
|
-
/* @__PURE__ */
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
1923
|
-
/* @__PURE__ */
|
|
2009
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2010
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2011
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2012
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ jsx17("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
1924
2013
|
] }),
|
|
1925
|
-
/* @__PURE__ */
|
|
1926
|
-
/* @__PURE__ */
|
|
1927
|
-
/* @__PURE__ */
|
|
1928
|
-
/* @__PURE__ */
|
|
2014
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
2015
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2016
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2017
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
1929
2018
|
] }),
|
|
1930
|
-
/* @__PURE__ */
|
|
2019
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
1931
2020
|
] })
|
|
1932
2021
|
] }) }),
|
|
1933
|
-
/* @__PURE__ */
|
|
1934
|
-
/* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
1936
|
-
/* @__PURE__ */
|
|
1937
|
-
/* @__PURE__ */
|
|
2022
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2023
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2024
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
2025
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2026
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "Human" })
|
|
1938
2027
|
] })
|
|
1939
2028
|
] }) })
|
|
1940
2029
|
] })
|
|
1941
2030
|
] }),
|
|
1942
|
-
/* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
/* @__PURE__ */
|
|
1945
|
-
/* @__PURE__ */
|
|
1946
|
-
/* @__PURE__ */
|
|
1947
|
-
/* @__PURE__ */
|
|
1948
|
-
/* @__PURE__ */
|
|
1949
|
-
/* @__PURE__ */
|
|
1950
|
-
/* @__PURE__ */
|
|
1951
|
-
/* @__PURE__ */
|
|
2031
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2032
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
|
2033
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2034
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ jsx17("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
|
|
2035
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
|
|
2036
|
+
/* @__PURE__ */ jsx17("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ jsx17("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
|
|
2037
|
+
/* @__PURE__ */ jsxs17("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2038
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2039
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2040
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
|
|
1952
2041
|
] }) }),
|
|
1953
|
-
/* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
/* @__PURE__ */
|
|
2042
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2043
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2044
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
|
|
1956
2045
|
] }) })
|
|
1957
2046
|
] })
|
|
1958
2047
|
] })
|
|
1959
2048
|
] })
|
|
1960
2049
|
] }),
|
|
1961
|
-
/* @__PURE__ */
|
|
1962
|
-
/* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
1964
|
-
/* @__PURE__ */
|
|
1965
|
-
/* @__PURE__ */
|
|
1966
|
-
/* @__PURE__ */
|
|
1967
|
-
/* @__PURE__ */
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
/* @__PURE__ */
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
2050
|
+
/* @__PURE__ */ jsxs17("section", { children: [
|
|
2051
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
|
|
2052
|
+
/* @__PURE__ */ jsxs17("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
2053
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2054
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2055
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
2056
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2057
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
|
|
2058
|
+
/* @__PURE__ */ jsx17("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs17("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
|
|
2059
|
+
/* @__PURE__ */ jsx17("option", { value: "", children: "Select a provider..." }),
|
|
2060
|
+
/* @__PURE__ */ jsx17("option", { value: "__user__", children: "User (you type)" }),
|
|
2061
|
+
/* @__PURE__ */ jsx17("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2062
|
+
/* @__PURE__ */ jsx17("option", { value: "claude", children: "claude-3-opus" }),
|
|
2063
|
+
/* @__PURE__ */ jsx17("option", { value: "gemini", children: "gemini-pro" })
|
|
1975
2064
|
] }) })
|
|
1976
2065
|
] })
|
|
1977
2066
|
] }) }),
|
|
1978
|
-
/* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
2067
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-header", children: [
|
|
2068
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx17("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2069
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-participant-card-info", children: [
|
|
2070
|
+
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2071
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2072
|
+
/* @__PURE__ */ jsx17("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
|
|
1984
2073
|
] }),
|
|
1985
|
-
/* @__PURE__ */
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
2074
|
+
/* @__PURE__ */ jsx17("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs17("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
|
|
2075
|
+
/* @__PURE__ */ jsx17("option", { value: "", children: "Select a provider..." }),
|
|
2076
|
+
/* @__PURE__ */ jsx17("option", { value: "__user__", children: "User (you type)" }),
|
|
2077
|
+
/* @__PURE__ */ jsx17("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2078
|
+
/* @__PURE__ */ jsx17("option", { value: "claude", children: "claude-3-opus" })
|
|
1990
2079
|
] }) })
|
|
1991
2080
|
] })
|
|
1992
2081
|
] }) })
|
|
@@ -2009,6 +2098,7 @@ export {
|
|
|
2009
2098
|
Dialogs,
|
|
2010
2099
|
Tabs,
|
|
2011
2100
|
Chat,
|
|
2101
|
+
Terminal,
|
|
2012
2102
|
FilePreview,
|
|
2013
2103
|
ThemeComparison,
|
|
2014
2104
|
EmptyState,
|