@quilltap/theme-storybook 1.0.24 → 1.0.26
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-VCF2M2TP.mjs → chunk-TZN7AU3N.mjs} +66 -8
- package/dist/index.css +62 -0
- package/dist/index.js +66 -8
- package/dist/index.mjs +1 -1
- package/dist/stories/index.js +66 -8
- package/dist/stories/index.mjs +1 -1
- package/package.json +6 -6
- package/src/css/qt-components.css +85 -0
- package/src/stories/components/Badges.tsx +14 -0
- package/src/stories/components/Chat.tsx +28 -0
- package/src/stories/components/Participant.tsx +68 -3
|
@@ -823,6 +823,14 @@ var Badges = () => {
|
|
|
823
823
|
] }) }) })
|
|
824
824
|
] })
|
|
825
825
|
] }),
|
|
826
|
+
/* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
|
|
827
|
+
/* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status Badges" }),
|
|
828
|
+
/* @__PURE__ */ jsx7("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Status indicators shown on participant cards for silent and absent characters." }),
|
|
829
|
+
/* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
|
|
830
|
+
/* @__PURE__ */ jsx7("span", { className: "qt-badge-silent", children: "Silent" }),
|
|
831
|
+
/* @__PURE__ */ jsx7("span", { className: "qt-badge-absent", children: "Absent" })
|
|
832
|
+
] })
|
|
833
|
+
] }),
|
|
826
834
|
/* @__PURE__ */ jsxs7("section", { children: [
|
|
827
835
|
/* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage Examples" }),
|
|
828
836
|
/* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
@@ -1267,6 +1275,20 @@ var Chat = () => {
|
|
|
1267
1275
|
] }) })
|
|
1268
1276
|
] })
|
|
1269
1277
|
] }),
|
|
1278
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1279
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1280
|
+
/* @__PURE__ */ jsx11("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." }),
|
|
1281
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1282
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1283
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1284
|
+
/* @__PURE__ */ jsx11("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1285
|
+
] }) }),
|
|
1286
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1287
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1288
|
+
/* @__PURE__ */ jsx11("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1289
|
+
] }) })
|
|
1290
|
+
] })
|
|
1291
|
+
] }),
|
|
1270
1292
|
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1271
1293
|
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1272
1294
|
/* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
@@ -1845,14 +1867,50 @@ var Participant = () => {
|
|
|
1845
1867
|
] })
|
|
1846
1868
|
] }),
|
|
1847
1869
|
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1848
|
-
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "
|
|
1849
|
-
/* @__PURE__ */ jsx16("
|
|
1850
|
-
|
|
1851
|
-
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-
|
|
1852
|
-
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-
|
|
1853
|
-
/* @__PURE__ */
|
|
1854
|
-
|
|
1855
|
-
|
|
1870
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
1871
|
+
/* @__PURE__ */ jsx16("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." }),
|
|
1872
|
+
/* @__PURE__ */ jsxs16("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1873
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
|
|
1874
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
1875
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
|
|
1876
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
1877
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
1878
|
+
] })
|
|
1879
|
+
] }) }),
|
|
1880
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
|
|
1881
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1882
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
1883
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ jsx16("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("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" }) }) })
|
|
1884
|
+
] }),
|
|
1885
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
|
|
1886
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1887
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
1888
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
1889
|
+
] }),
|
|
1890
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
1891
|
+
] })
|
|
1892
|
+
] }) }),
|
|
1893
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
|
|
1894
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1895
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
1896
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ jsx16("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
1897
|
+
] }),
|
|
1898
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
|
|
1899
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1900
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
1901
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
1902
|
+
] }),
|
|
1903
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
1904
|
+
] })
|
|
1905
|
+
] }) }),
|
|
1906
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-header", children: [
|
|
1907
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
1908
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-participant-card-info", children: [
|
|
1909
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-name", children: "You" }),
|
|
1910
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-participant-card-status", children: "Human" })
|
|
1911
|
+
] })
|
|
1912
|
+
] }) })
|
|
1913
|
+
] })
|
|
1856
1914
|
] }),
|
|
1857
1915
|
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1858
1916
|
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
package/dist/index.css
CHANGED
|
@@ -408,6 +408,10 @@ body {
|
|
|
408
408
|
--qt-chat-assistant-border: var(--color-border);
|
|
409
409
|
--qt-chat-assistant-font: var(--font-sans);
|
|
410
410
|
--qt-chat-assistant-font-weight: inherit;
|
|
411
|
+
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
|
|
412
|
+
--qt-chat-silent-fg: var(--qt-chat-assistant-fg);
|
|
413
|
+
--qt-chat-silent-border: #7a9e8e;
|
|
414
|
+
--qt-chat-silent-label-fg: #5d7e6e;
|
|
411
415
|
--qt-chat-composer-bg: var(--color-background);
|
|
412
416
|
--qt-chat-composer-border: var(--color-border);
|
|
413
417
|
--qt-chat-composer-radius: var(--radius-lg);
|
|
@@ -982,6 +986,61 @@ body {
|
|
|
982
986
|
color: var(--qt-chat-assistant-fg);
|
|
983
987
|
border: 1px solid var(--color-border);
|
|
984
988
|
}
|
|
989
|
+
.qt-chat-message-silent {
|
|
990
|
+
background: var(--qt-chat-silent-bg);
|
|
991
|
+
color: var(--qt-chat-silent-fg);
|
|
992
|
+
border: 2px dotted var(--qt-chat-silent-border);
|
|
993
|
+
font-style: italic;
|
|
994
|
+
}
|
|
995
|
+
.qt-chat-silent-label {
|
|
996
|
+
font-size: 0.75rem;
|
|
997
|
+
color: var(--qt-chat-silent-label-fg);
|
|
998
|
+
font-style: italic;
|
|
999
|
+
margin-bottom: 0.25rem;
|
|
1000
|
+
}
|
|
1001
|
+
.qt-badge-silent {
|
|
1002
|
+
background: var(--qt-chat-silent-bg);
|
|
1003
|
+
color: var(--qt-chat-silent-label-fg);
|
|
1004
|
+
border: 1px solid var(--qt-chat-silent-border);
|
|
1005
|
+
border-radius: 9999px;
|
|
1006
|
+
padding: 0.125rem 0.5rem;
|
|
1007
|
+
font-weight: 600;
|
|
1008
|
+
font-size: 0.75rem;
|
|
1009
|
+
}
|
|
1010
|
+
.qt-badge-absent {
|
|
1011
|
+
background: color-mix(in srgb, var(--color-muted) 40%, transparent);
|
|
1012
|
+
color: var(--color-muted-foreground);
|
|
1013
|
+
border: 1px solid var(--color-muted);
|
|
1014
|
+
border-radius: 9999px;
|
|
1015
|
+
padding: 0.125rem 0.5rem;
|
|
1016
|
+
font-weight: 600;
|
|
1017
|
+
font-size: 0.75rem;
|
|
1018
|
+
opacity: 0.8;
|
|
1019
|
+
}
|
|
1020
|
+
.qt-participant-status-overlay {
|
|
1021
|
+
position: absolute;
|
|
1022
|
+
bottom: -0.125rem;
|
|
1023
|
+
right: -0.125rem;
|
|
1024
|
+
width: 1.125rem;
|
|
1025
|
+
height: 1.125rem;
|
|
1026
|
+
border-radius: 9999px;
|
|
1027
|
+
display: flex;
|
|
1028
|
+
align-items: center;
|
|
1029
|
+
justify-content: center;
|
|
1030
|
+
border: 1.5px solid var(--color-background);
|
|
1031
|
+
z-index: 2;
|
|
1032
|
+
}
|
|
1033
|
+
.qt-participant-status-overlay-silent {
|
|
1034
|
+
background: var(--qt-chat-silent-border);
|
|
1035
|
+
color: white;
|
|
1036
|
+
}
|
|
1037
|
+
.qt-participant-status-overlay-absent {
|
|
1038
|
+
background: var(--color-muted);
|
|
1039
|
+
color: var(--color-muted-foreground);
|
|
1040
|
+
}
|
|
1041
|
+
.qt-participant-card-silent {
|
|
1042
|
+
border-color: var(--qt-chat-silent-border);
|
|
1043
|
+
}
|
|
985
1044
|
.qt-chat-composer {
|
|
986
1045
|
display: flex;
|
|
987
1046
|
align-items: flex-end;
|
|
@@ -1560,6 +1619,9 @@ body {
|
|
|
1560
1619
|
}
|
|
1561
1620
|
}
|
|
1562
1621
|
.dark {
|
|
1622
|
+
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);
|
|
1623
|
+
--qt-chat-silent-border: #4a7a6a;
|
|
1624
|
+
--qt-chat-silent-label-fg: #8ab8a4;
|
|
1563
1625
|
--qt-alert-success-bg: hsl(142 76% 36% / 0.2);
|
|
1564
1626
|
--qt-alert-success-fg: hsl(142 76% 65%);
|
|
1565
1627
|
--qt-alert-success-border: hsl(142 76% 36% / 0.5);
|
package/dist/index.js
CHANGED
|
@@ -929,6 +929,14 @@ var Badges = () => {
|
|
|
929
929
|
] }) }) })
|
|
930
930
|
] })
|
|
931
931
|
] }),
|
|
932
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
933
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status Badges" }),
|
|
934
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Status indicators shown on participant cards for silent and absent characters." }),
|
|
935
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge-silent", children: "Silent" }),
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "qt-badge-absent", children: "Absent" })
|
|
938
|
+
] })
|
|
939
|
+
] }),
|
|
932
940
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { children: [
|
|
933
941
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage Examples" }),
|
|
934
942
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
@@ -1373,6 +1381,20 @@ var Chat = () => {
|
|
|
1373
1381
|
] }) })
|
|
1374
1382
|
] })
|
|
1375
1383
|
] }),
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1385
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1386
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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." }),
|
|
1387
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1388
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1389
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1390
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1391
|
+
] }) }),
|
|
1392
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1393
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1395
|
+
] }) })
|
|
1396
|
+
] })
|
|
1397
|
+
] }),
|
|
1376
1398
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1377
1399
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1378
1400
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
@@ -1951,14 +1973,50 @@ var Participant = () => {
|
|
|
1951
1973
|
] })
|
|
1952
1974
|
] }),
|
|
1953
1975
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1954
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "
|
|
1955
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("
|
|
1956
|
-
|
|
1957
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-
|
|
1958
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-
|
|
1959
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.
|
|
1960
|
-
|
|
1961
|
-
|
|
1976
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
1977
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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." }),
|
|
1978
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1979
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1980
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
1981
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1982
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
1983
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
1984
|
+
] })
|
|
1985
|
+
] }) }),
|
|
1986
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1987
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1988
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
1989
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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" }) }) })
|
|
1990
|
+
] }),
|
|
1991
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1992
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1993
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
1994
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
1995
|
+
] }),
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
1997
|
+
] })
|
|
1998
|
+
] }) }),
|
|
1999
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
2000
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2001
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2002
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
2003
|
+
] }),
|
|
2004
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
2005
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2006
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2007
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
2008
|
+
] }),
|
|
2009
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
2010
|
+
] })
|
|
2011
|
+
] }) }),
|
|
2012
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
2013
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2014
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
2015
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2016
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2017
|
+
] })
|
|
2018
|
+
] }) })
|
|
2019
|
+
] })
|
|
1962
2020
|
] }),
|
|
1963
2021
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1964
2022
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
package/dist/index.mjs
CHANGED
package/dist/stories/index.js
CHANGED
|
@@ -866,6 +866,14 @@ var Badges = () => {
|
|
|
866
866
|
] }) }) })
|
|
867
867
|
] })
|
|
868
868
|
] }),
|
|
869
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
870
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status Badges" }),
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "0.75rem", fontSize: "0.875rem" }, children: "Status indicators shown on participant cards for silent and absent characters." }),
|
|
872
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
|
|
873
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "qt-badge-silent", children: "Silent" }),
|
|
874
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "qt-badge-absent", children: "Absent" })
|
|
875
|
+
] })
|
|
876
|
+
] }),
|
|
869
877
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { children: [
|
|
870
878
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage Examples" }),
|
|
871
879
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
@@ -1310,6 +1318,20 @@ var Chat = () => {
|
|
|
1310
1318
|
] }) })
|
|
1311
1319
|
] })
|
|
1312
1320
|
] }),
|
|
1321
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1322
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1323
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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." }),
|
|
1324
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1328
|
+
] }) }),
|
|
1329
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1331
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1332
|
+
] }) })
|
|
1333
|
+
] })
|
|
1334
|
+
] }),
|
|
1313
1335
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1314
1336
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1315
1337
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
@@ -1888,14 +1910,50 @@ var Participant = () => {
|
|
|
1888
1910
|
] })
|
|
1889
1911
|
] }),
|
|
1890
1912
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1891
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "
|
|
1892
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("
|
|
1893
|
-
|
|
1894
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-
|
|
1895
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-
|
|
1896
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.
|
|
1897
|
-
|
|
1898
|
-
|
|
1913
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
1914
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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." }),
|
|
1915
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1916
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1917
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
1918
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1919
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
1920
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
1921
|
+
] })
|
|
1922
|
+
] }) }),
|
|
1923
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1924
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1925
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
1926
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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" }) }) })
|
|
1927
|
+
] }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1929
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1930
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
1931
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
1932
|
+
] }),
|
|
1933
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
1934
|
+
] })
|
|
1935
|
+
] }) }),
|
|
1936
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1937
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
1938
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
1939
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
1940
|
+
] }),
|
|
1941
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1942
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1943
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
1945
|
+
] }),
|
|
1946
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
1947
|
+
] })
|
|
1948
|
+
] }) }),
|
|
1949
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-header", children: [
|
|
1950
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
1951
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "qt-participant-card-info", children: [
|
|
1952
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-name", children: "You" }),
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "qt-participant-card-status", children: "Human" })
|
|
1954
|
+
] })
|
|
1955
|
+
] }) })
|
|
1956
|
+
] })
|
|
1899
1957
|
] }),
|
|
1900
1958
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
1901
1959
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
package/dist/stories/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quilltap/theme-storybook",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.26",
|
|
4
4
|
"description": "Storybook preset and stories for developing Quilltap theme plugins",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"storybook": ">=8.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@storybook/react": "^10.
|
|
46
|
+
"@storybook/react": "^10.3.1",
|
|
47
47
|
"@types/react": "^19.2.14",
|
|
48
|
-
"react": "^19.
|
|
49
|
-
"storybook": "^10.
|
|
50
|
-
"tsup": "^8.
|
|
51
|
-
"typescript": "^5.3
|
|
48
|
+
"react": "^19.2.4",
|
|
49
|
+
"storybook": "^10.3.1",
|
|
50
|
+
"tsup": "^8.5.1",
|
|
51
|
+
"typescript": "^5.9.3"
|
|
52
52
|
},
|
|
53
53
|
"keywords": [
|
|
54
54
|
"quilltap",
|
|
@@ -304,6 +304,12 @@
|
|
|
304
304
|
--qt-chat-assistant-font: var(--font-sans);
|
|
305
305
|
--qt-chat-assistant-font-weight: inherit;
|
|
306
306
|
|
|
307
|
+
/* Chat: Silent messages — inner thoughts/actions from characters in silent mode */
|
|
308
|
+
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
|
|
309
|
+
--qt-chat-silent-fg: var(--qt-chat-assistant-fg);
|
|
310
|
+
--qt-chat-silent-border: #7a9e8e;
|
|
311
|
+
--qt-chat-silent-label-fg: #5d7e6e;
|
|
312
|
+
|
|
307
313
|
/* Chat composer variables */
|
|
308
314
|
--qt-chat-composer-bg: var(--color-background);
|
|
309
315
|
--qt-chat-composer-border: var(--color-border);
|
|
@@ -1019,6 +1025,80 @@
|
|
|
1019
1025
|
border: 1px solid var(--color-border);
|
|
1020
1026
|
}
|
|
1021
1027
|
|
|
1028
|
+
/**
|
|
1029
|
+
* Silent message — inner thoughts and actions from character in silent mode.
|
|
1030
|
+
* Distinguished from whispers by a dotted border (vs dashed) and sage/teal tones.
|
|
1031
|
+
*/
|
|
1032
|
+
.qt-chat-message-silent {
|
|
1033
|
+
background: var(--qt-chat-silent-bg);
|
|
1034
|
+
color: var(--qt-chat-silent-fg);
|
|
1035
|
+
border: 2px dotted var(--qt-chat-silent-border);
|
|
1036
|
+
font-style: italic;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.qt-chat-silent-label {
|
|
1040
|
+
font-size: 0.75rem;
|
|
1041
|
+
color: var(--qt-chat-silent-label-fg);
|
|
1042
|
+
font-style: italic;
|
|
1043
|
+
margin-bottom: 0.25rem;
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
/**
|
|
1047
|
+
* Status badges for silent/absent participants
|
|
1048
|
+
*/
|
|
1049
|
+
.qt-badge-silent {
|
|
1050
|
+
background: var(--qt-chat-silent-bg);
|
|
1051
|
+
color: var(--qt-chat-silent-label-fg);
|
|
1052
|
+
border: 1px solid var(--qt-chat-silent-border);
|
|
1053
|
+
border-radius: 9999px;
|
|
1054
|
+
padding: 0.125rem 0.5rem;
|
|
1055
|
+
font-weight: 600;
|
|
1056
|
+
font-size: 0.75rem;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.qt-badge-absent {
|
|
1060
|
+
background: color-mix(in srgb, var(--color-muted) 40%, transparent);
|
|
1061
|
+
color: var(--color-muted-foreground);
|
|
1062
|
+
border: 1px solid var(--color-muted);
|
|
1063
|
+
border-radius: 9999px;
|
|
1064
|
+
padding: 0.125rem 0.5rem;
|
|
1065
|
+
font-weight: 600;
|
|
1066
|
+
font-size: 0.75rem;
|
|
1067
|
+
opacity: 0.8;
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
/**
|
|
1071
|
+
* Status overlay on participant avatar — small icon badge in the
|
|
1072
|
+
* bottom-right corner, visible when sidebar is collapsed.
|
|
1073
|
+
*/
|
|
1074
|
+
.qt-participant-status-overlay {
|
|
1075
|
+
position: absolute;
|
|
1076
|
+
bottom: -0.125rem;
|
|
1077
|
+
right: -0.125rem;
|
|
1078
|
+
width: 1.125rem;
|
|
1079
|
+
height: 1.125rem;
|
|
1080
|
+
border-radius: 9999px;
|
|
1081
|
+
display: flex;
|
|
1082
|
+
align-items: center;
|
|
1083
|
+
justify-content: center;
|
|
1084
|
+
border: 1.5px solid var(--color-background);
|
|
1085
|
+
z-index: 2;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
.qt-participant-status-overlay-silent {
|
|
1089
|
+
background: var(--qt-chat-silent-border);
|
|
1090
|
+
color: white;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.qt-participant-status-overlay-absent {
|
|
1094
|
+
background: var(--color-muted);
|
|
1095
|
+
color: var(--color-muted-foreground);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.qt-participant-card-silent {
|
|
1099
|
+
border-color: var(--qt-chat-silent-border);
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1022
1102
|
.qt-chat-composer {
|
|
1023
1103
|
display: flex;
|
|
1024
1104
|
align-items: flex-end;
|
|
@@ -1777,6 +1857,11 @@
|
|
|
1777
1857
|
Adjusted colors for dark backgrounds with better contrast
|
|
1778
1858
|
========================================================================== */
|
|
1779
1859
|
.dark {
|
|
1860
|
+
/* Chat: Silent messages — darker mode variants */
|
|
1861
|
+
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);
|
|
1862
|
+
--qt-chat-silent-border: #4a7a6a;
|
|
1863
|
+
--qt-chat-silent-label-fg: #8ab8a4;
|
|
1864
|
+
|
|
1780
1865
|
/* Alert tokens - brighter, more saturated for dark backgrounds */
|
|
1781
1866
|
--qt-alert-success-bg: hsl(142 76% 36% / 0.2);
|
|
1782
1867
|
--qt-alert-success-fg: hsl(142 76% 65%);
|
|
@@ -173,6 +173,20 @@ export const Badges: React.FC = () => {
|
|
|
173
173
|
</div>
|
|
174
174
|
</section>
|
|
175
175
|
|
|
176
|
+
{/* Participant Status Badges */}
|
|
177
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
178
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
179
|
+
Participant Status Badges
|
|
180
|
+
</h3>
|
|
181
|
+
<p style={{ color: 'var(--color-muted-foreground)', marginBottom: '0.75rem', fontSize: '0.875rem' }}>
|
|
182
|
+
Status indicators shown on participant cards for silent and absent characters.
|
|
183
|
+
</p>
|
|
184
|
+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
|
|
185
|
+
<span className="qt-badge-silent">Silent</span>
|
|
186
|
+
<span className="qt-badge-absent">Absent</span>
|
|
187
|
+
</div>
|
|
188
|
+
</section>
|
|
189
|
+
|
|
176
190
|
{/* Badge Usage Examples */}
|
|
177
191
|
<section>
|
|
178
192
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
@@ -220,6 +220,34 @@ export const Chat: React.FC = () => {
|
|
|
220
220
|
</div>
|
|
221
221
|
</section>
|
|
222
222
|
|
|
223
|
+
{/* Silent Messages */}
|
|
224
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
225
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
226
|
+
Silent Messages
|
|
227
|
+
</h3>
|
|
228
|
+
<p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
|
|
229
|
+
Inner thoughts and actions from characters in silent mode. They can think and act physically,
|
|
230
|
+
but cannot speak aloud. Distinguished from whispers by dotted borders and sage/teal tones.
|
|
231
|
+
</p>
|
|
232
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '32rem' }}>
|
|
233
|
+
{/* Silent message — inner thoughts */}
|
|
234
|
+
<div className="qt-chat-message-row qt-chat-message-row-assistant" style={{ marginBottom: '0.5rem' }}>
|
|
235
|
+
<div className="qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent">
|
|
236
|
+
<div className="qt-chat-silent-label">silent — inner thoughts and actions only</div>
|
|
237
|
+
<p>*glances at the door, weighing whether to follow or stay behind*</p>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
{/* Silent message — physical action */}
|
|
242
|
+
<div className="qt-chat-message-row qt-chat-message-row-assistant" style={{ marginBottom: '0.5rem' }}>
|
|
243
|
+
<div className="qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent">
|
|
244
|
+
<div className="qt-chat-silent-label">silent — inner thoughts and actions only</div>
|
|
245
|
+
<p>*quietly pockets the letter before anyone notices, mind racing with questions about its contents*</p>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</section>
|
|
250
|
+
|
|
223
251
|
{/* Chat Toolbar */}
|
|
224
252
|
<section style={{ marginBottom: '2rem' }}>
|
|
225
253
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
@@ -61,12 +61,16 @@ export const Participant: React.FC = () => {
|
|
|
61
61
|
</div>
|
|
62
62
|
</section>
|
|
63
63
|
|
|
64
|
-
{/*
|
|
64
|
+
{/* Participant Status States */}
|
|
65
65
|
<section style={{ marginBottom: '2rem' }}>
|
|
66
66
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
67
|
-
|
|
67
|
+
Participant Status States
|
|
68
68
|
</h3>
|
|
69
|
-
<
|
|
69
|
+
<p style={{ color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
|
|
70
|
+
Characters can be active, silent (thinking but not speaking), absent (away from the scene), or removed.
|
|
71
|
+
</p>
|
|
72
|
+
<div style={{ maxWidth: '20rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
73
|
+
{/* Active — currently speaking */}
|
|
70
74
|
<div className="qt-participant-card qt-participant-card-active">
|
|
71
75
|
<div className="qt-participant-card-header">
|
|
72
76
|
<div className="qt-participant-card-avatar">
|
|
@@ -80,6 +84,67 @@ export const Participant: React.FC = () => {
|
|
|
80
84
|
</div>
|
|
81
85
|
</div>
|
|
82
86
|
</div>
|
|
87
|
+
|
|
88
|
+
{/* Silent — with badge and avatar overlay */}
|
|
89
|
+
<div className="qt-participant-card qt-participant-card-silent">
|
|
90
|
+
<div className="qt-participant-card-header">
|
|
91
|
+
<div className="qt-participant-card-avatar" style={{ position: 'relative' }}>
|
|
92
|
+
<div className="qt-avatar">
|
|
93
|
+
<div className="qt-avatar-fallback">BC</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div className="qt-participant-status-overlay qt-participant-status-overlay-silent">
|
|
96
|
+
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24">
|
|
97
|
+
<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" />
|
|
98
|
+
</svg>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div className="qt-participant-card-info">
|
|
102
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
103
|
+
<div className="qt-participant-card-name">Bob Character</div>
|
|
104
|
+
<span className="qt-badge-silent" style={{ fontSize: '0.625rem' }}>Silent</span>
|
|
105
|
+
</div>
|
|
106
|
+
<div className="qt-participant-card-status">Inner thoughts only</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
{/* Absent — with badge and avatar overlay */}
|
|
112
|
+
<div className="qt-participant-card" style={{ opacity: 0.7 }}>
|
|
113
|
+
<div className="qt-participant-card-header">
|
|
114
|
+
<div className="qt-participant-card-avatar" style={{ position: 'relative' }}>
|
|
115
|
+
<div className="qt-avatar">
|
|
116
|
+
<div className="qt-avatar-fallback">CC</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div className="qt-participant-status-overlay qt-participant-status-overlay-absent">
|
|
119
|
+
<svg width="10" height="10" fill="currentColor" viewBox="0 0 24 24">
|
|
120
|
+
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
|
|
121
|
+
</svg>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div className="qt-participant-card-info">
|
|
125
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
126
|
+
<div className="qt-participant-card-name">Clara Character</div>
|
|
127
|
+
<span className="qt-badge-absent" style={{ fontSize: '0.625rem' }}>Absent</span>
|
|
128
|
+
</div>
|
|
129
|
+
<div className="qt-participant-card-status">Away from the scene</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
{/* Human participant */}
|
|
135
|
+
<div className="qt-participant-card">
|
|
136
|
+
<div className="qt-participant-card-header">
|
|
137
|
+
<div className="qt-participant-card-avatar">
|
|
138
|
+
<div className="qt-avatar">
|
|
139
|
+
<div className="qt-avatar-fallback">YO</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div className="qt-participant-card-info">
|
|
143
|
+
<div className="qt-participant-card-name">You</div>
|
|
144
|
+
<div className="qt-participant-card-status">Human</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
83
148
|
</div>
|
|
84
149
|
</section>
|
|
85
150
|
|