@quilltap/theme-storybook 1.0.40 → 1.0.43
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 +11 -0
- package/dist/{chunk-GXTUADEJ.mjs → chunk-MKFVWQPL.mjs} +864 -756
- package/dist/index.css +10 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +865 -756
- package/dist/index.mjs +3 -1
- package/dist/stories/index.d.mts +13 -1
- package/dist/stories/index.d.ts +13 -1
- package/dist/stories/index.js +865 -756
- package/dist/stories/index.mjs +3 -1
- package/package.json +1 -1
- package/src/css/qt-components.css +20 -0
- package/src/stories/components/Icons.tsx +6 -4
- package/src/stories/components/Surfaces.tsx +107 -0
- package/src/stories/index.ts +1 -0
|
@@ -88,6 +88,7 @@ var ICON_GROUPS = [
|
|
|
88
88
|
"trash",
|
|
89
89
|
"copy",
|
|
90
90
|
"plus",
|
|
91
|
+
"minus",
|
|
91
92
|
"search",
|
|
92
93
|
"download",
|
|
93
94
|
"upload",
|
|
@@ -100,6 +101,7 @@ var ICON_GROUPS = [
|
|
|
100
101
|
"eye-off",
|
|
101
102
|
"star",
|
|
102
103
|
"bookmark",
|
|
104
|
+
"tag",
|
|
103
105
|
"expand",
|
|
104
106
|
"compress"
|
|
105
107
|
]
|
|
@@ -113,7 +115,8 @@ var ICON_GROUPS = [
|
|
|
113
115
|
"arrow-left",
|
|
114
116
|
"arrow-right",
|
|
115
117
|
"arrow-up",
|
|
116
|
-
"arrow-down"
|
|
118
|
+
"arrow-down",
|
|
119
|
+
"sort"
|
|
117
120
|
]
|
|
118
121
|
},
|
|
119
122
|
{
|
|
@@ -218,7 +221,11 @@ var Icons = () => {
|
|
|
218
221
|
/* @__PURE__ */ jsxs2("li", { children: [
|
|
219
222
|
"The ",
|
|
220
223
|
/* @__PURE__ */ jsx2("code", { children: "brand" }),
|
|
221
|
-
" mark
|
|
224
|
+
" mark follows the same rule: an ",
|
|
225
|
+
/* @__PURE__ */ jsx2("code", { children: ".svg" }),
|
|
226
|
+
" override is tinted like any other icon, so ship it as ",
|
|
227
|
+
/* @__PURE__ */ jsx2("code", { children: ".webp" }),
|
|
228
|
+
" if it should keep its own colors."
|
|
222
229
|
] }),
|
|
223
230
|
/* @__PURE__ */ jsxs2("li", { children: [
|
|
224
231
|
"Names must match the built-in names below; unknown names are ignored. Run",
|
|
@@ -1020,75 +1027,175 @@ var Badges = () => {
|
|
|
1020
1027
|
] });
|
|
1021
1028
|
};
|
|
1022
1029
|
|
|
1023
|
-
// src/stories/components/
|
|
1030
|
+
// src/stories/components/Surfaces.tsx
|
|
1024
1031
|
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1025
|
-
var
|
|
1032
|
+
var sectionHeading2 = {
|
|
1033
|
+
fontSize: "1.125rem",
|
|
1034
|
+
fontWeight: 700,
|
|
1035
|
+
marginBottom: "1rem",
|
|
1036
|
+
borderBottom: "1px solid var(--color-border)",
|
|
1037
|
+
paddingBottom: "0.5rem"
|
|
1038
|
+
};
|
|
1039
|
+
var note = {
|
|
1040
|
+
color: "var(--color-muted-foreground)",
|
|
1041
|
+
marginBottom: "1rem",
|
|
1042
|
+
fontSize: "0.875rem"
|
|
1043
|
+
};
|
|
1044
|
+
var Surfaces = () => {
|
|
1026
1045
|
return /* @__PURE__ */ jsxs9("div", { style: { padding: "1.5rem" }, children: [
|
|
1027
|
-
/* @__PURE__ */ jsx9("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "
|
|
1046
|
+
/* @__PURE__ */ jsx9("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Surfaces" }),
|
|
1047
|
+
/* @__PURE__ */ jsxs9("p", { style: { ...note, maxWidth: "44rem" }, children: [
|
|
1048
|
+
"How accent-coloured surfaces stay legible no matter how bold a theme makes its ",
|
|
1049
|
+
/* @__PURE__ */ jsx9("code", { children: "accent" }),
|
|
1050
|
+
" token. Filled surfaces pair the background with",
|
|
1051
|
+
" ",
|
|
1052
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-text-on-accent" }),
|
|
1053
|
+
"; hover rows use ",
|
|
1054
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-hover-accent" }),
|
|
1055
|
+
"; quiet selected/panel surfaces lean on ",
|
|
1056
|
+
/* @__PURE__ */ jsx9("code", { children: "muted" }),
|
|
1057
|
+
" and faint",
|
|
1058
|
+
" ",
|
|
1059
|
+
/* @__PURE__ */ jsx9("code", { children: "primary" }),
|
|
1060
|
+
" instead of the accent."
|
|
1061
|
+
] }),
|
|
1028
1062
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1029
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1030
|
-
/* @__PURE__ */ jsxs9("
|
|
1031
|
-
|
|
1032
|
-
/* @__PURE__ */ jsx9("
|
|
1033
|
-
|
|
1034
|
-
/* @__PURE__ */ jsx9("
|
|
1063
|
+
/* @__PURE__ */ jsx9("h3", { style: sectionHeading2, children: "Filled accent surfaces" }),
|
|
1064
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1065
|
+
"A solid ",
|
|
1066
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-accent" }),
|
|
1067
|
+
" fill ",
|
|
1068
|
+
/* @__PURE__ */ jsx9("strong", { children: "must" }),
|
|
1069
|
+
" be paired with",
|
|
1070
|
+
" ",
|
|
1071
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-text-on-accent" }),
|
|
1072
|
+
" (the theme's ",
|
|
1073
|
+
/* @__PURE__ */ jsx9("code", { children: "accentForeground" }),
|
|
1074
|
+
"). A fill without it falls back to the page foreground and washes out on bold accents."
|
|
1075
|
+
] }),
|
|
1076
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
|
|
1077
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.5rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "keyword" }),
|
|
1078
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.5rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "another keyword" }),
|
|
1079
|
+
/* @__PURE__ */ jsx9("kbd", { className: "qt-bg-accent qt-text-on-accent", style: { padding: "0.125rem 0.375rem", borderRadius: "0.25rem", fontSize: "0.75rem" }, children: "\u21B5" })
|
|
1035
1080
|
] })
|
|
1036
1081
|
] }),
|
|
1037
1082
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1038
|
-
/* @__PURE__ */
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1083
|
+
/* @__PURE__ */ jsxs9("h3", { style: sectionHeading2, children: [
|
|
1084
|
+
"Hover-highlight rows \u2014 ",
|
|
1085
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-hover-accent" })
|
|
1086
|
+
] }),
|
|
1087
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1088
|
+
"For list rows, menu items, and option cards. On hover it paints the accent background and forces the accent foreground onto the row ",
|
|
1089
|
+
/* @__PURE__ */ jsx9("em", { children: "and every descendant" }),
|
|
1090
|
+
" \u2014 so children that carry their own colour (the title and the muted subtitle below) flip too, instead of washing out (or, when their colour matches the accent, vanishing). Hover the rows to see it."
|
|
1091
|
+
] }),
|
|
1092
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem", maxWidth: "24rem", border: "1px solid var(--color-border)", borderRadius: "0.5rem", padding: "0.375rem" }, children: [
|
|
1093
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1094
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Compose a reply" }),
|
|
1095
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Draft a response in this thread" })
|
|
1096
|
+
] }),
|
|
1097
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1098
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Mark as resolved" }),
|
|
1099
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Close and archive this item" })
|
|
1100
|
+
] }),
|
|
1101
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-hover-accent", style: { display: "flex", flexDirection: "column", padding: "0.5rem 0.75rem", borderRadius: "0.375rem", cursor: "pointer" }, children: [
|
|
1102
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-primary", children: "Delete" }),
|
|
1103
|
+
/* @__PURE__ */ jsx9("span", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Remove permanently" })
|
|
1104
|
+
] })
|
|
1044
1105
|
] })
|
|
1045
1106
|
] }),
|
|
1046
|
-
/* @__PURE__ */ jsxs9("section", {
|
|
1047
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1048
|
-
/* @__PURE__ */ jsxs9("
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
/* @__PURE__ */ jsx9("div", { className: "qt-
|
|
1059
|
-
|
|
1107
|
+
/* @__PURE__ */ jsxs9("section", { children: [
|
|
1108
|
+
/* @__PURE__ */ jsx9("h3", { style: sectionHeading2, children: "Quiet selected & panel surfaces" }),
|
|
1109
|
+
/* @__PURE__ */ jsxs9("p", { style: note, children: [
|
|
1110
|
+
"Persistent surfaces (selected cards, informational panels) deliberately avoid the bold accent. Selected states use a faint ",
|
|
1111
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-primary/10" }),
|
|
1112
|
+
" tint; informational panels use the neutral ",
|
|
1113
|
+
/* @__PURE__ */ jsx9("code", { children: "qt-bg-muted" }),
|
|
1114
|
+
" surface."
|
|
1115
|
+
] }),
|
|
1116
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem" }, children: [
|
|
1117
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-bg-primary/10", style: { padding: "0.75rem 1rem", borderRadius: "0.5rem", border: "1px solid var(--color-primary)", maxWidth: "16rem" }, children: [
|
|
1118
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-primary", style: { fontWeight: 600 }, children: "Selected option" }),
|
|
1119
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Faint primary tint marks the choice." })
|
|
1120
|
+
] }),
|
|
1121
|
+
/* @__PURE__ */ jsxs9("div", { className: "qt-bg-muted", style: { padding: "0.75rem 1rem", borderRadius: "0.5rem", border: "1px solid var(--color-border)", maxWidth: "16rem" }, children: [
|
|
1122
|
+
/* @__PURE__ */ jsx9("div", { style: { fontWeight: 600 }, children: "Informational panel" }),
|
|
1123
|
+
/* @__PURE__ */ jsx9("div", { className: "qt-text-secondary", style: { fontSize: "0.8125rem" }, children: "Neutral muted surface, never the accent." })
|
|
1060
1124
|
] })
|
|
1061
1125
|
] })
|
|
1126
|
+
] })
|
|
1127
|
+
] });
|
|
1128
|
+
};
|
|
1129
|
+
|
|
1130
|
+
// src/stories/components/Avatars.tsx
|
|
1131
|
+
import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1132
|
+
var Avatars = () => {
|
|
1133
|
+
return /* @__PURE__ */ jsxs10("div", { style: { padding: "1.5rem" }, children: [
|
|
1134
|
+
/* @__PURE__ */ jsx10("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Avatars" }),
|
|
1135
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1136
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Sizes" }),
|
|
1137
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1138
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SM" }) }),
|
|
1139
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "MD" }) }),
|
|
1140
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-lg", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "LG" }) }),
|
|
1141
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-xl", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "XL" }) })
|
|
1142
|
+
] })
|
|
1062
1143
|
] }),
|
|
1063
|
-
/* @__PURE__ */
|
|
1064
|
-
/* @__PURE__ */
|
|
1065
|
-
/* @__PURE__ */
|
|
1066
|
-
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */ jsx9("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx9("div", { className: "qt-avatar-fallback", children: "+3" }) })
|
|
1144
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1145
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar with Images" }),
|
|
1146
|
+
/* @__PURE__ */ jsx10("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Avatars gracefully fall back to initials when image is unavailable." }),
|
|
1147
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1148
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "AB" }) }),
|
|
1149
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "CD" }) }),
|
|
1150
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "EF" }) })
|
|
1071
1151
|
] })
|
|
1072
1152
|
] }),
|
|
1073
|
-
/* @__PURE__ */
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
1076
|
-
/* @__PURE__ */
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
|
|
1080
|
-
|
|
1153
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1154
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Shapes" }),
|
|
1155
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1156
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1157
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "9999px" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "CR" }) }),
|
|
1158
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Circle" })
|
|
1159
|
+
] }),
|
|
1160
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1161
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "RD" }) }),
|
|
1162
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Rounded" })
|
|
1163
|
+
] }),
|
|
1164
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
1165
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", style: { borderRadius: "var(--radius-sm)" }, children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SQ" }) }),
|
|
1166
|
+
/* @__PURE__ */ jsx10("p", { style: { marginTop: "0.5rem", fontSize: "0.75rem", color: "var(--color-muted-foreground)", textAlign: "center" }, children: "Square" })
|
|
1167
|
+
] })
|
|
1168
|
+
] })
|
|
1169
|
+
] }),
|
|
1170
|
+
/* @__PURE__ */ jsxs10("section", { style: { marginBottom: "2rem" }, children: [
|
|
1171
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Avatar Groups" }),
|
|
1172
|
+
/* @__PURE__ */ jsxs10("div", { className: "qt-avatar-group", children: [
|
|
1173
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1174
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "B" }) }),
|
|
1175
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "C" }) }),
|
|
1176
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "D" }) }),
|
|
1177
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "+3" }) })
|
|
1178
|
+
] })
|
|
1179
|
+
] }),
|
|
1180
|
+
/* @__PURE__ */ jsxs10("section", { children: [
|
|
1181
|
+
/* @__PURE__ */ jsx10("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Usage in Context" }),
|
|
1182
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1183
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.75rem", backgroundColor: "var(--color-muted)", borderRadius: "var(--radius-lg)" }, children: [
|
|
1184
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "JD" }) }),
|
|
1185
|
+
/* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
|
|
1186
|
+
/* @__PURE__ */ jsx10("div", { style: { fontWeight: 600 }, children: "John Doe" }),
|
|
1187
|
+
/* @__PURE__ */ jsx10("div", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "john@example.com" })
|
|
1081
1188
|
] }),
|
|
1082
|
-
/* @__PURE__ */
|
|
1083
|
-
] }),
|
|
1084
|
-
/* @__PURE__ */
|
|
1085
|
-
/* @__PURE__ */
|
|
1086
|
-
/* @__PURE__ */
|
|
1087
|
-
/* @__PURE__ */
|
|
1088
|
-
/* @__PURE__ */
|
|
1089
|
-
/* @__PURE__ */
|
|
1189
|
+
/* @__PURE__ */ jsx10("span", { className: "qt-badge qt-badge-success", children: "Active" })
|
|
1190
|
+
] }),
|
|
1191
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
1192
|
+
/* @__PURE__ */ jsx10("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx10("div", { className: "qt-avatar-fallback", children: "SM" }) }),
|
|
1193
|
+
/* @__PURE__ */ jsxs10("div", { style: { flex: 1 }, children: [
|
|
1194
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1195
|
+
/* @__PURE__ */ jsx10("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Sarah Miller" }),
|
|
1196
|
+
/* @__PURE__ */ jsx10("span", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "2 hours ago" })
|
|
1090
1197
|
] }),
|
|
1091
|
-
/* @__PURE__ */
|
|
1198
|
+
/* @__PURE__ */ jsx10("p", { style: { fontSize: "0.875rem", marginTop: "0.25rem" }, children: "This is a sample comment with an avatar." })
|
|
1092
1199
|
] })
|
|
1093
1200
|
] })
|
|
1094
1201
|
] })
|
|
@@ -1098,131 +1205,131 @@ var Avatars = () => {
|
|
|
1098
1205
|
|
|
1099
1206
|
// src/stories/components/Dialogs.tsx
|
|
1100
1207
|
import { useState } from "react";
|
|
1101
|
-
import { jsx as
|
|
1208
|
+
import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1102
1209
|
var Dialogs = () => {
|
|
1103
1210
|
const [basicOpen, setBasicOpen] = useState(false);
|
|
1104
1211
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
1105
1212
|
const [formOpen, setFormOpen] = useState(false);
|
|
1106
|
-
return /* @__PURE__ */
|
|
1107
|
-
/* @__PURE__ */
|
|
1108
|
-
/* @__PURE__ */
|
|
1109
|
-
/* @__PURE__ */
|
|
1110
|
-
/* @__PURE__ */
|
|
1111
|
-
/* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1113
|
-
/* @__PURE__ */
|
|
1114
|
-
/* @__PURE__ */
|
|
1115
|
-
] })
|
|
1116
|
-
] }),
|
|
1117
|
-
basicOpen && /* @__PURE__ */
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
/* @__PURE__ */
|
|
1121
|
-
/* @__PURE__ */
|
|
1213
|
+
return /* @__PURE__ */ jsxs11("div", { style: { padding: "1.5rem" }, children: [
|
|
1214
|
+
/* @__PURE__ */ jsx11("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Dialogs & Modals" }),
|
|
1215
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1216
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Examples" }),
|
|
1217
|
+
/* @__PURE__ */ jsx11("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Click the buttons below to open different dialog types." }),
|
|
1218
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem" }, children: [
|
|
1219
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", onClick: () => setBasicOpen(true), children: "Basic Dialog" }),
|
|
1220
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(true), children: "Confirmation Dialog" }),
|
|
1221
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setFormOpen(true), children: "Form Dialog" })
|
|
1222
|
+
] })
|
|
1223
|
+
] }),
|
|
1224
|
+
basicOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setBasicOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
|
|
1225
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1226
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Basic Dialog" }),
|
|
1227
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "This is a basic dialog with some content. Dialogs are used to show important information or gather user input." }),
|
|
1228
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setBasicOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1122
1229
|
] }),
|
|
1123
|
-
/* @__PURE__ */
|
|
1124
|
-
/* @__PURE__ */
|
|
1230
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Dialog content area with additional details and information." }) }),
|
|
1231
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-footer", children: /* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setBasicOpen(false), children: "Got it" }) })
|
|
1125
1232
|
] }) }),
|
|
1126
|
-
confirmOpen && /* @__PURE__ */
|
|
1127
|
-
/* @__PURE__ */
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
/* @__PURE__ */
|
|
1130
|
-
/* @__PURE__ */
|
|
1233
|
+
confirmOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setConfirmOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), children: [
|
|
1234
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1235
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Delete Item?" }),
|
|
1236
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "Are you sure you want to delete this item? This action cannot be undone." }),
|
|
1237
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setConfirmOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1131
1238
|
] }),
|
|
1132
|
-
/* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1239
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "This will remove the item from your collection permanently." }) }),
|
|
1240
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1241
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", onClick: () => setConfirmOpen(false), children: "Cancel" }),
|
|
1242
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-destructive", onClick: () => setConfirmOpen(false), children: "Delete" })
|
|
1136
1243
|
] })
|
|
1137
1244
|
] }) }),
|
|
1138
|
-
formOpen && /* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1140
|
-
/* @__PURE__ */
|
|
1141
|
-
/* @__PURE__ */
|
|
1142
|
-
/* @__PURE__ */
|
|
1245
|
+
formOpen && /* @__PURE__ */ jsx11("div", { className: "qt-dialog-overlay", onClick: () => setFormOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", onClick: (e) => e.stopPropagation(), style: { maxWidth: "28rem" }, children: [
|
|
1246
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1247
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Create New Item" }),
|
|
1248
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "Fill in the details below to create a new item." }),
|
|
1249
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", onClick: () => setFormOpen(false), "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1143
1250
|
] }),
|
|
1144
|
-
/* @__PURE__ */
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1148
|
-
] }),
|
|
1149
|
-
/* @__PURE__ */
|
|
1150
|
-
/* @__PURE__ */
|
|
1151
|
-
/* @__PURE__ */
|
|
1152
|
-
] }),
|
|
1153
|
-
/* @__PURE__ */
|
|
1154
|
-
/* @__PURE__ */
|
|
1155
|
-
/* @__PURE__ */
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
/* @__PURE__ */
|
|
1159
|
-
/* @__PURE__ */
|
|
1251
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1252
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1253
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Name" }),
|
|
1254
|
+
/* @__PURE__ */ jsx11("input", { className: "qt-input", type: "text", placeholder: "Enter name..." })
|
|
1255
|
+
] }),
|
|
1256
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1257
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Description" }),
|
|
1258
|
+
/* @__PURE__ */ jsx11("textarea", { className: "qt-input qt-textarea", placeholder: "Enter description...", style: { minHeight: "5rem" } })
|
|
1259
|
+
] }),
|
|
1260
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1261
|
+
/* @__PURE__ */ jsx11("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Category" }),
|
|
1262
|
+
/* @__PURE__ */ jsxs11("select", { className: "qt-input qt-select", children: [
|
|
1263
|
+
/* @__PURE__ */ jsx11("option", { value: "", children: "Select category..." }),
|
|
1264
|
+
/* @__PURE__ */ jsx11("option", { value: "1", children: "Category 1" }),
|
|
1265
|
+
/* @__PURE__ */ jsx11("option", { value: "2", children: "Category 2" }),
|
|
1266
|
+
/* @__PURE__ */ jsx11("option", { value: "3", children: "Category 3" })
|
|
1160
1267
|
] })
|
|
1161
1268
|
] })
|
|
1162
1269
|
] }) }),
|
|
1163
|
-
/* @__PURE__ */
|
|
1164
|
-
/* @__PURE__ */
|
|
1165
|
-
/* @__PURE__ */
|
|
1270
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1271
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", onClick: () => setFormOpen(false), children: "Cancel" }),
|
|
1272
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", onClick: () => setFormOpen(false), children: "Create" })
|
|
1166
1273
|
] })
|
|
1167
1274
|
] }) }),
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
/* @__PURE__ */
|
|
1172
|
-
/* @__PURE__ */
|
|
1173
|
-
/* @__PURE__ */
|
|
1174
|
-
/* @__PURE__ */
|
|
1175
|
-
] }),
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1275
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1276
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Structure (Static Preview)" }),
|
|
1277
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "2rem", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: "0 auto" }, children: [
|
|
1278
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-header", children: [
|
|
1279
|
+
/* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Dialog Title" }),
|
|
1280
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-dialog-description", children: "This is a dialog with a title and description." }),
|
|
1281
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button-icon", "aria-label": "Close", children: /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
1282
|
+
] }),
|
|
1283
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Dialog content area. This can contain text, forms, or any other content." }) }),
|
|
1284
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dialog-footer", children: [
|
|
1285
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-ghost", children: "Secondary Action" }),
|
|
1286
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-primary", children: "Primary Action" })
|
|
1180
1287
|
] })
|
|
1181
1288
|
] }) })
|
|
1182
1289
|
] }),
|
|
1183
|
-
/* @__PURE__ */
|
|
1184
|
-
/* @__PURE__ */
|
|
1185
|
-
/* @__PURE__ */
|
|
1186
|
-
/* @__PURE__ */
|
|
1187
|
-
/* @__PURE__ */
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1290
|
+
/* @__PURE__ */ jsxs11("section", { children: [
|
|
1291
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dialog Sizes" }),
|
|
1292
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
1293
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1294
|
+
/* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Small (max-width: 24rem)" }),
|
|
1295
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog", style: { position: "relative", transform: "none", margin: 0, maxWidth: "24rem" }, children: [
|
|
1296
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Small Dialog" }) }),
|
|
1297
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Compact dialog for simple confirmations." }) })
|
|
1191
1298
|
] }) })
|
|
1192
1299
|
] }),
|
|
1193
|
-
/* @__PURE__ */
|
|
1194
|
-
/* @__PURE__ */
|
|
1195
|
-
/* @__PURE__ */
|
|
1196
|
-
/* @__PURE__ */
|
|
1197
|
-
/* @__PURE__ */
|
|
1300
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1301
|
+
/* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "var(--color-muted-foreground)" }, children: "Large (max-width: 42rem)" }),
|
|
1302
|
+
/* @__PURE__ */ jsx11("div", { style: { backgroundColor: "var(--color-muted)", padding: "1rem", borderRadius: "var(--radius-lg)", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs11("div", { className: "qt-dialog qt-dialog-wide", style: { position: "relative", transform: "none", margin: 0, maxWidth: "42rem" }, children: [
|
|
1303
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-header", children: /* @__PURE__ */ jsx11("h3", { className: "qt-dialog-title", children: "Large Dialog" }) }),
|
|
1304
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dialog-body", children: /* @__PURE__ */ jsx11("p", { children: "Larger dialog for complex forms or detailed content that needs more space." }) })
|
|
1198
1305
|
] }) })
|
|
1199
1306
|
] })
|
|
1200
1307
|
] })
|
|
1201
1308
|
] }),
|
|
1202
|
-
/* @__PURE__ */
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
/* @__PURE__ */
|
|
1205
|
-
/* @__PURE__ */
|
|
1206
|
-
/* @__PURE__ */
|
|
1207
|
-
/* @__PURE__ */
|
|
1208
|
-
/* @__PURE__ */
|
|
1309
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1310
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Popover" }),
|
|
1311
|
+
/* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1312
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Hover for popover" }),
|
|
1313
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-popover", style: { position: "absolute", left: 0, top: "100%", marginTop: "0.5rem", display: "block" }, children: /* @__PURE__ */ jsxs11("div", { style: { padding: "0.75rem" }, children: [
|
|
1314
|
+
/* @__PURE__ */ jsx11("p", { style: { fontWeight: 600, marginBottom: "0.25rem" }, children: "Popover Title" }),
|
|
1315
|
+
/* @__PURE__ */ jsx11("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: "This is popover content that provides additional context." })
|
|
1209
1316
|
] }) })
|
|
1210
1317
|
] })
|
|
1211
1318
|
] }),
|
|
1212
|
-
/* @__PURE__ */
|
|
1213
|
-
/* @__PURE__ */
|
|
1214
|
-
/* @__PURE__ */
|
|
1215
|
-
/* @__PURE__ */
|
|
1216
|
-
/* @__PURE__ */
|
|
1217
|
-
/* @__PURE__ */
|
|
1218
|
-
/* @__PURE__ */
|
|
1319
|
+
/* @__PURE__ */ jsxs11("section", { style: { marginBottom: "2rem" }, children: [
|
|
1320
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Dropdown Menu" }),
|
|
1321
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-dropdown", style: { display: "inline-block", position: "relative" }, children: [
|
|
1322
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", children: "Profile" }),
|
|
1323
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", children: "Settings" }),
|
|
1324
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-separator" }),
|
|
1325
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-dropdown-item", style: { color: "var(--color-destructive)" }, children: "Sign Out" })
|
|
1219
1326
|
] })
|
|
1220
1327
|
] }),
|
|
1221
|
-
/* @__PURE__ */
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__PURE__ */
|
|
1224
|
-
/* @__PURE__ */
|
|
1225
|
-
/* @__PURE__ */
|
|
1328
|
+
/* @__PURE__ */ jsxs11("section", { children: [
|
|
1329
|
+
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
|
|
1330
|
+
/* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "2rem" }, children: /* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1331
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
|
|
1332
|
+
/* @__PURE__ */ jsx11("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
|
|
1226
1333
|
] }) })
|
|
1227
1334
|
] })
|
|
1228
1335
|
] });
|
|
@@ -1230,15 +1337,15 @@ var Dialogs = () => {
|
|
|
1230
1337
|
|
|
1231
1338
|
// src/stories/components/Tabs.tsx
|
|
1232
1339
|
import { useState as useState2 } from "react";
|
|
1233
|
-
import { jsx as
|
|
1340
|
+
import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1234
1341
|
var Tabs = () => {
|
|
1235
1342
|
const [activeTab, setActiveTab] = useState2("tab1");
|
|
1236
|
-
return /* @__PURE__ */
|
|
1237
|
-
/* @__PURE__ */
|
|
1238
|
-
/* @__PURE__ */
|
|
1239
|
-
/* @__PURE__ */
|
|
1240
|
-
/* @__PURE__ */
|
|
1241
|
-
/* @__PURE__ */
|
|
1343
|
+
return /* @__PURE__ */ jsxs12("div", { style: { padding: "1.5rem" }, children: [
|
|
1344
|
+
/* @__PURE__ */ jsx12("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Tabs & Navigation" }),
|
|
1345
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1346
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Tabs" }),
|
|
1347
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-tab-group", children: [
|
|
1348
|
+
/* @__PURE__ */ jsx12(
|
|
1242
1349
|
"button",
|
|
1243
1350
|
{
|
|
1244
1351
|
className: `qt-tab ${activeTab === "tab1" ? "qt-tab-active" : ""}`,
|
|
@@ -1246,7 +1353,7 @@ var Tabs = () => {
|
|
|
1246
1353
|
children: "Account"
|
|
1247
1354
|
}
|
|
1248
1355
|
),
|
|
1249
|
-
/* @__PURE__ */
|
|
1356
|
+
/* @__PURE__ */ jsx12(
|
|
1250
1357
|
"button",
|
|
1251
1358
|
{
|
|
1252
1359
|
className: `qt-tab ${activeTab === "tab2" ? "qt-tab-active" : ""}`,
|
|
@@ -1254,7 +1361,7 @@ var Tabs = () => {
|
|
|
1254
1361
|
children: "Settings"
|
|
1255
1362
|
}
|
|
1256
1363
|
),
|
|
1257
|
-
/* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ jsx12(
|
|
1258
1365
|
"button",
|
|
1259
1366
|
{
|
|
1260
1367
|
className: `qt-tab ${activeTab === "tab3" ? "qt-tab-active" : ""}`,
|
|
@@ -1263,56 +1370,56 @@ var Tabs = () => {
|
|
|
1263
1370
|
}
|
|
1264
1371
|
)
|
|
1265
1372
|
] }),
|
|
1266
|
-
/* @__PURE__ */
|
|
1267
|
-
activeTab === "tab1" && /* @__PURE__ */
|
|
1268
|
-
/* @__PURE__ */
|
|
1269
|
-
/* @__PURE__ */
|
|
1270
|
-
] }),
|
|
1271
|
-
activeTab === "tab2" && /* @__PURE__ */
|
|
1272
|
-
/* @__PURE__ */
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
] }),
|
|
1275
|
-
activeTab === "tab3" && /* @__PURE__ */
|
|
1276
|
-
/* @__PURE__ */
|
|
1277
|
-
/* @__PURE__ */
|
|
1373
|
+
/* @__PURE__ */ jsxs12("div", { children: [
|
|
1374
|
+
activeTab === "tab1" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1375
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Account Settings" }),
|
|
1376
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Manage your account settings and preferences." })
|
|
1377
|
+
] }),
|
|
1378
|
+
activeTab === "tab2" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1379
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "General Settings" }),
|
|
1380
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Configure general application settings." })
|
|
1381
|
+
] }),
|
|
1382
|
+
activeTab === "tab3" && /* @__PURE__ */ jsxs12("div", { className: "qt-tab-content", children: [
|
|
1383
|
+
/* @__PURE__ */ jsx12("h4", { style: { fontWeight: 600, marginBottom: "0.5rem" }, children: "Notification Preferences" }),
|
|
1384
|
+
/* @__PURE__ */ jsx12("p", { style: { color: "var(--color-muted-foreground)" }, children: "Choose how you want to receive notifications." })
|
|
1278
1385
|
] })
|
|
1279
1386
|
] })
|
|
1280
1387
|
] }),
|
|
1281
|
-
/* @__PURE__ */
|
|
1282
|
-
/* @__PURE__ */
|
|
1283
|
-
/* @__PURE__ */
|
|
1284
|
-
/* @__PURE__ */
|
|
1285
|
-
/* @__PURE__ */
|
|
1388
|
+
/* @__PURE__ */ jsxs12("section", { style: { marginBottom: "2rem" }, children: [
|
|
1389
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tabs with Icons" }),
|
|
1390
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-tab-group", children: [
|
|
1391
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab qt-tab-active", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1392
|
+
/* @__PURE__ */ jsx12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
|
|
1286
1393
|
"Home"
|
|
1287
1394
|
] }),
|
|
1288
|
-
/* @__PURE__ */
|
|
1289
|
-
/* @__PURE__ */
|
|
1395
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1396
|
+
/* @__PURE__ */ jsx12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }),
|
|
1290
1397
|
"Profile"
|
|
1291
1398
|
] }),
|
|
1292
|
-
/* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */
|
|
1295
|
-
/* @__PURE__ */
|
|
1399
|
+
/* @__PURE__ */ jsxs12("button", { className: "qt-tab", style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1400
|
+
/* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1401
|
+
/* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1402
|
+
/* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1296
1403
|
] }),
|
|
1297
1404
|
"Settings"
|
|
1298
1405
|
] })
|
|
1299
1406
|
] })
|
|
1300
1407
|
] }),
|
|
1301
|
-
/* @__PURE__ */
|
|
1302
|
-
/* @__PURE__ */
|
|
1303
|
-
/* @__PURE__ */
|
|
1304
|
-
/* @__PURE__ */
|
|
1305
|
-
/* @__PURE__ */
|
|
1306
|
-
/* @__PURE__ */
|
|
1307
|
-
/* @__PURE__ */
|
|
1308
|
-
/* @__PURE__ */
|
|
1309
|
-
/* @__PURE__ */
|
|
1310
|
-
/* @__PURE__ */
|
|
1408
|
+
/* @__PURE__ */ jsxs12("section", { children: [
|
|
1409
|
+
/* @__PURE__ */ jsx12("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Navigation Bar" }),
|
|
1410
|
+
/* @__PURE__ */ jsxs12("div", { className: "qt-navbar", children: [
|
|
1411
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
|
|
1412
|
+
/* @__PURE__ */ jsx12("div", { style: { fontWeight: 700, fontSize: "1.125rem" }, children: "Quilltap" }),
|
|
1413
|
+
/* @__PURE__ */ jsxs12("nav", { style: { display: "flex", gap: "0.25rem" }, children: [
|
|
1414
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link qt-navbar-link-active", children: "Dashboard" }),
|
|
1415
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Characters" }),
|
|
1416
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Chats" }),
|
|
1417
|
+
/* @__PURE__ */ jsx12("a", { href: "#", className: "qt-navbar-link", children: "Settings" })
|
|
1311
1418
|
] })
|
|
1312
1419
|
] }),
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1421
|
+
/* @__PURE__ */ jsx12("button", { className: "qt-button-icon", "aria-label": "Notifications", children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }) }),
|
|
1422
|
+
/* @__PURE__ */ jsx12("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx12("div", { className: "qt-avatar-fallback", children: "U" }) })
|
|
1316
1423
|
] })
|
|
1317
1424
|
] })
|
|
1318
1425
|
] })
|
|
@@ -1320,215 +1427,215 @@ var Tabs = () => {
|
|
|
1320
1427
|
};
|
|
1321
1428
|
|
|
1322
1429
|
// src/stories/components/Chat.tsx
|
|
1323
|
-
import { jsx as
|
|
1430
|
+
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1324
1431
|
var Chat = () => {
|
|
1325
|
-
return /* @__PURE__ */
|
|
1326
|
-
/* @__PURE__ */
|
|
1327
|
-
/* @__PURE__ */
|
|
1328
|
-
/* @__PURE__ */
|
|
1329
|
-
/* @__PURE__ */
|
|
1330
|
-
/* @__PURE__ */
|
|
1331
|
-
/* @__PURE__ */
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
/* @__PURE__ */
|
|
1432
|
+
return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.5rem" }, children: [
|
|
1433
|
+
/* @__PURE__ */ jsx13("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Chat Components" }),
|
|
1434
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1435
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Message Bubbles" }),
|
|
1436
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1437
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1438
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1439
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "You" }),
|
|
1440
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1334
1441
|
] }),
|
|
1335
|
-
/* @__PURE__ */
|
|
1442
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How are you today?" }) })
|
|
1336
1443
|
] }) }),
|
|
1337
|
-
/* @__PURE__ */
|
|
1338
|
-
/* @__PURE__ */
|
|
1339
|
-
/* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1341
|
-
/* @__PURE__ */
|
|
1342
|
-
/* @__PURE__ */
|
|
1444
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1445
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1446
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1447
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1448
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1449
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:30 PM" })
|
|
1343
1450
|
] }),
|
|
1344
|
-
/* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Hello! I'm doing well, thank you for asking. How can I help you today?" }) })
|
|
1345
1452
|
] })
|
|
1346
1453
|
] }),
|
|
1347
|
-
/* @__PURE__ */
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
/* @__PURE__ */
|
|
1352
|
-
/* @__PURE__ */
|
|
1454
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1455
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1456
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1457
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-header", children: [
|
|
1458
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Assistant" }),
|
|
1459
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-message-time", children: "2:31 PM" })
|
|
1353
1460
|
] }),
|
|
1354
|
-
/* @__PURE__ */
|
|
1355
|
-
/* @__PURE__ */
|
|
1356
|
-
/* @__PURE__ */
|
|
1357
|
-
/* @__PURE__ */
|
|
1358
|
-
/* @__PURE__ */
|
|
1359
|
-
/* @__PURE__ */
|
|
1461
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-content", children: [
|
|
1462
|
+
/* @__PURE__ */ jsx13("p", { children: "Here's some information you might find helpful:" }),
|
|
1463
|
+
/* @__PURE__ */ jsxs13("ul", { style: { marginTop: "0.5rem", paddingLeft: "1.25rem" }, children: [
|
|
1464
|
+
/* @__PURE__ */ jsx13("li", { children: "First point of interest" }),
|
|
1465
|
+
/* @__PURE__ */ jsx13("li", { children: "Second important detail" }),
|
|
1466
|
+
/* @__PURE__ */ jsx13("li", { children: "Third relevant fact" })
|
|
1360
1467
|
] }),
|
|
1361
|
-
/* @__PURE__ */
|
|
1468
|
+
/* @__PURE__ */ jsx13("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
|
|
1362
1469
|
] }),
|
|
1363
|
-
/* @__PURE__ */
|
|
1364
|
-
/* @__PURE__ */
|
|
1365
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-actions", children: [
|
|
1471
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", title: "Edit", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }) }),
|
|
1472
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", title: "Copy", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) })
|
|
1366
1473
|
] })
|
|
1367
1474
|
] })
|
|
1368
1475
|
] }),
|
|
1369
|
-
/* @__PURE__ */
|
|
1370
|
-
/* @__PURE__ */
|
|
1371
|
-
/* @__PURE__ */
|
|
1372
|
-
/* @__PURE__ */
|
|
1476
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-system", children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Alice has joined the conversation." }) }) }),
|
|
1477
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-user", children: [
|
|
1478
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "You" }) }),
|
|
1479
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "That's exactly what I needed, thanks!" }) })
|
|
1373
1480
|
] }) })
|
|
1374
1481
|
] })
|
|
1375
1482
|
] }),
|
|
1376
|
-
/* @__PURE__ */
|
|
1377
|
-
/* @__PURE__ */
|
|
1378
|
-
/* @__PURE__ */
|
|
1379
|
-
/* @__PURE__ */
|
|
1380
|
-
/* @__PURE__ */
|
|
1381
|
-
/* @__PURE__ */
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1483
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1484
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Character Messages" }),
|
|
1485
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Messages from different characters with their avatars." }),
|
|
1486
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1487
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1488
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1489
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1490
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Alice" }),
|
|
1491
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "*waves cheerfully* Hi there! I'm so glad to meet you!" }) })
|
|
1385
1492
|
] })
|
|
1386
1493
|
] }),
|
|
1387
|
-
/* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1389
|
-
/* @__PURE__ */
|
|
1390
|
-
/* @__PURE__ */
|
|
1391
|
-
/* @__PURE__ */
|
|
1494
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1495
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "B" }) }),
|
|
1496
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1497
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-author", style: { fontSize: "0.75rem", fontWeight: 600, marginBottom: "0.25rem" }, children: "Bob" }),
|
|
1498
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "*nods thoughtfully* Interesting point. Let me think about that..." }) })
|
|
1392
1499
|
] })
|
|
1393
1500
|
] })
|
|
1394
1501
|
] })
|
|
1395
1502
|
] }),
|
|
1396
|
-
/* @__PURE__ */
|
|
1397
|
-
/* @__PURE__ */
|
|
1398
|
-
/* @__PURE__ */
|
|
1399
|
-
/* @__PURE__ */
|
|
1400
|
-
/* @__PURE__ */
|
|
1401
|
-
/* @__PURE__ */
|
|
1402
|
-
/* @__PURE__ */
|
|
1403
|
-
/* @__PURE__ */
|
|
1404
|
-
/* @__PURE__ */
|
|
1503
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1504
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Roleplay Annotations" }),
|
|
1505
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Special text formatting for roleplay-style messages with narration, inner thoughts, and out-of-character text." }),
|
|
1506
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1507
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1508
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1509
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1510
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1511
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs13("p", { children: [
|
|
1405
1512
|
'"Hello there!" ',
|
|
1406
|
-
/* @__PURE__ */
|
|
1513
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
|
|
1407
1514
|
] }) })
|
|
1408
1515
|
] })
|
|
1409
1516
|
] }),
|
|
1410
|
-
/* @__PURE__ */
|
|
1411
|
-
/* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
/* @__PURE__ */
|
|
1414
|
-
/* @__PURE__ */
|
|
1415
|
-
/* @__PURE__ */
|
|
1517
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1518
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1519
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1520
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1521
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsxs13("p", { children: [
|
|
1522
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-narration", children: "She paused for a moment, considering her words carefully." }),
|
|
1416
1523
|
" ",
|
|
1417
|
-
/* @__PURE__ */
|
|
1524
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
|
|
1418
1525
|
] }) })
|
|
1419
1526
|
] })
|
|
1420
1527
|
] }),
|
|
1421
|
-
/* @__PURE__ */
|
|
1422
|
-
/* @__PURE__ */
|
|
1423
|
-
/* @__PURE__ */
|
|
1424
|
-
/* @__PURE__ */
|
|
1425
|
-
/* @__PURE__ */
|
|
1528
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1529
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
1530
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message qt-chat-message-assistant", children: [
|
|
1531
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-header", children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-message-author", children: "Alice" }) }),
|
|
1532
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: /* @__PURE__ */ jsx13("span", { className: "qt-chat-ooc", children: "((OOC: Should we continue the scene or take a break?))" }) }) })
|
|
1426
1533
|
] })
|
|
1427
1534
|
] })
|
|
1428
1535
|
] })
|
|
1429
1536
|
] }),
|
|
1430
|
-
/* @__PURE__ */
|
|
1431
|
-
/* @__PURE__ */
|
|
1432
|
-
/* @__PURE__ */
|
|
1433
|
-
/* @__PURE__ */
|
|
1434
|
-
/* @__PURE__ */
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
/* @__PURE__ */
|
|
1537
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1538
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Whisper Messages" }),
|
|
1539
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Private messages visible only to sender and recipient. Overheard whispers have a faded style." }),
|
|
1540
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1541
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper", children: [
|
|
1542
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
|
|
1543
|
+
/* @__PURE__ */ jsx13("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
|
|
1437
1544
|
] }) }),
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
/* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1545
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-whisper qt-chat-message-whisper-overheard", children: [
|
|
1546
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
|
|
1547
|
+
/* @__PURE__ */ jsx13("p", { children: "Keep an eye on the door. We may need a quick exit." })
|
|
1441
1548
|
] }) })
|
|
1442
1549
|
] })
|
|
1443
1550
|
] }),
|
|
1444
|
-
/* @__PURE__ */
|
|
1445
|
-
/* @__PURE__ */
|
|
1446
|
-
/* @__PURE__ */
|
|
1447
|
-
/* @__PURE__ */
|
|
1448
|
-
/* @__PURE__ */
|
|
1449
|
-
/* @__PURE__ */
|
|
1450
|
-
/* @__PURE__ */
|
|
1551
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1552
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1553
|
+
/* @__PURE__ */ jsx13("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." }),
|
|
1554
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1555
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1556
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1557
|
+
/* @__PURE__ */ jsx13("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1451
1558
|
] }) }),
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
/* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1559
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-row qt-chat-message-row-assistant", style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-body qt-chat-message-assistant qt-chat-message-silent", children: [
|
|
1560
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1561
|
+
/* @__PURE__ */ jsx13("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1455
1562
|
] }) })
|
|
1456
1563
|
] })
|
|
1457
1564
|
] }),
|
|
1458
|
-
/* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1460
|
-
/* @__PURE__ */
|
|
1461
|
-
/* @__PURE__ */
|
|
1462
|
-
/* @__PURE__ */
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1565
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1566
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wardrobe Action Notices" }),
|
|
1567
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Inline summaries of outfit changes (equip, unequip, gift). Distinguished from whispers (dashed purple) and silent messages (dotted teal) by a double border and warm amber/gold tones." }),
|
|
1568
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1569
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1570
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1571
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1572
|
+
/* @__PURE__ */ jsx13("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
|
|
1573
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
|
|
1467
1574
|
] })
|
|
1468
1575
|
] }),
|
|
1469
|
-
/* @__PURE__ */
|
|
1470
|
-
/* @__PURE__ */
|
|
1471
|
-
/* @__PURE__ */
|
|
1472
|
-
/* @__PURE__ */
|
|
1473
|
-
/* @__PURE__ */
|
|
1576
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1577
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1578
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1579
|
+
/* @__PURE__ */ jsx13("div", { children: "Removed item from the footwear slot." }),
|
|
1580
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), barefoot" })
|
|
1474
1581
|
] })
|
|
1475
1582
|
] }),
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
/* @__PURE__ */
|
|
1583
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1584
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1585
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1586
|
+
/* @__PURE__ */ jsx13("div", { children: "Gifted \u201CSilver Pocket Watch\u201D to Marcus." }),
|
|
1587
|
+
/* @__PURE__ */ jsx13("div", { children: "Marcus put it on immediately." })
|
|
1481
1588
|
] })
|
|
1482
1589
|
] })
|
|
1483
1590
|
] })
|
|
1484
1591
|
] }),
|
|
1485
|
-
/* @__PURE__ */
|
|
1486
|
-
/* @__PURE__ */
|
|
1487
|
-
/* @__PURE__ */
|
|
1488
|
-
/* @__PURE__ */
|
|
1489
|
-
/* @__PURE__ */
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1492
|
-
/* @__PURE__ */
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1592
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1593
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1594
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
1595
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1596
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Bold", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 4h8a4 4 0 014 4v2M6 4v16M6 4h8a2 2 0 012 2v2M6 12h12" }) }) }),
|
|
1597
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Italic", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 5h4m-4 14h4M9 5h6M9 19H3" }) }) }),
|
|
1598
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Underline", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 5v10a4 4 0 008 0V5m0 14H7" }) }) }),
|
|
1599
|
+
/* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
|
|
1600
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-toolbar-button", title: "Settings", children: /* @__PURE__ */ jsxs13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1601
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1602
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1496
1603
|
] }) })
|
|
1497
1604
|
] })
|
|
1498
1605
|
] }),
|
|
1499
|
-
/* @__PURE__ */
|
|
1500
|
-
/* @__PURE__ */
|
|
1501
|
-
/* @__PURE__ */
|
|
1502
|
-
/* @__PURE__ */
|
|
1503
|
-
/* @__PURE__ */
|
|
1504
|
-
/* @__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: "RP Annotation Buttons" }),
|
|
1608
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
|
|
1609
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1610
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
|
|
1611
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
|
|
1505
1612
|
"Narration"
|
|
1506
1613
|
] }),
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
1614
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
|
|
1615
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" }) }),
|
|
1509
1616
|
"Internal"
|
|
1510
1617
|
] }),
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
/* @__PURE__ */
|
|
1618
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
|
|
1619
|
+
/* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
|
|
1513
1620
|
"OOC"
|
|
1514
1621
|
] })
|
|
1515
1622
|
] })
|
|
1516
1623
|
] }),
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
/* @__PURE__ */
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1521
|
-
/* @__PURE__ */
|
|
1522
|
-
/* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1524
|
-
/* @__PURE__ */
|
|
1624
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1625
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
|
|
1626
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
|
|
1627
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
|
|
1628
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
|
|
1629
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1630
|
+
/* @__PURE__ */ jsx13("span", { children: "document.pdf" }),
|
|
1631
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1525
1632
|
] }),
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
/* @__PURE__ */
|
|
1528
|
-
/* @__PURE__ */
|
|
1633
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1634
|
+
/* @__PURE__ */ jsx13("span", { children: "image.png" }),
|
|
1635
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1529
1636
|
] })
|
|
1530
1637
|
] }),
|
|
1531
|
-
/* @__PURE__ */
|
|
1638
|
+
/* @__PURE__ */ jsx13(
|
|
1532
1639
|
"textarea",
|
|
1533
1640
|
{
|
|
1534
1641
|
className: "qt-chat-composer-input",
|
|
@@ -1537,17 +1644,17 @@ var Chat = () => {
|
|
|
1537
1644
|
style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
|
|
1538
1645
|
}
|
|
1539
1646
|
),
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
/* @__PURE__ */
|
|
1542
|
-
/* @__PURE__ */
|
|
1647
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1648
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-chat-attachment-button", children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }),
|
|
1649
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary", children: "Send" })
|
|
1543
1650
|
] })
|
|
1544
1651
|
] })
|
|
1545
1652
|
] }),
|
|
1546
|
-
/* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1548
|
-
/* @__PURE__ */
|
|
1549
|
-
/* @__PURE__ */
|
|
1550
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1654
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
|
|
1655
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: /* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer-inner", style: { display: "flex", alignItems: "flex-end", gap: "0.5rem", flex: 1 }, children: [
|
|
1656
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button-icon", "aria-label": "Attach file", children: /* @__PURE__ */ jsx13("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }) }),
|
|
1657
|
+
/* @__PURE__ */ jsx13(
|
|
1551
1658
|
"textarea",
|
|
1552
1659
|
{
|
|
1553
1660
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1555,65 +1662,65 @@ var Chat = () => {
|
|
|
1555
1662
|
rows: 1
|
|
1556
1663
|
}
|
|
1557
1664
|
),
|
|
1558
|
-
/* @__PURE__ */
|
|
1665
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary qt-chat-composer-send", style: { height: "auto", padding: "0.5rem 1rem" }, children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" }) }) })
|
|
1559
1666
|
] }) })
|
|
1560
1667
|
] }),
|
|
1561
|
-
/* @__PURE__ */
|
|
1562
|
-
/* @__PURE__ */
|
|
1563
|
-
/* @__PURE__ */
|
|
1564
|
-
/* @__PURE__ */
|
|
1565
|
-
/* @__PURE__ */
|
|
1566
|
-
/* @__PURE__ */
|
|
1567
|
-
/* @__PURE__ */
|
|
1568
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1669
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Typing Indicator" }),
|
|
1670
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem", maxWidth: "32rem" }, children: [
|
|
1671
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1672
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsxs13("div", { className: "qt-typing-indicator", children: [
|
|
1673
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1674
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1675
|
+
/* @__PURE__ */ jsx13("span", {})
|
|
1569
1676
|
] }) })
|
|
1570
1677
|
] })
|
|
1571
1678
|
] }),
|
|
1572
|
-
/* @__PURE__ */
|
|
1573
|
-
/* @__PURE__ */
|
|
1574
|
-
/* @__PURE__ */
|
|
1575
|
-
/* @__PURE__ */
|
|
1576
|
-
/* @__PURE__ */
|
|
1577
|
-
/* @__PURE__ */
|
|
1578
|
-
/* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1679
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1680
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
|
|
1681
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
|
|
1682
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1683
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-continue-button", children: [
|
|
1684
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1685
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
|
|
1686
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
|
|
1580
1687
|
] }),
|
|
1581
1688
|
"Continue"
|
|
1582
1689
|
] }),
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1586
|
-
/* @__PURE__ */
|
|
1690
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-stop-button", children: [
|
|
1691
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1692
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
|
|
1693
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" })
|
|
1587
1694
|
] }),
|
|
1588
1695
|
"Stop"
|
|
1589
1696
|
] })
|
|
1590
1697
|
] })
|
|
1591
1698
|
] }),
|
|
1592
|
-
/* @__PURE__ */
|
|
1593
|
-
/* @__PURE__ */
|
|
1594
|
-
/* @__PURE__ */
|
|
1595
|
-
/* @__PURE__ */
|
|
1596
|
-
/* @__PURE__ */
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
/* @__PURE__ */
|
|
1599
|
-
/* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1699
|
+
/* @__PURE__ */ jsxs13("section", { children: [
|
|
1700
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
1701
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
|
1702
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-border)" }, children: [
|
|
1703
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1704
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1705
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1706
|
+
/* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: "Assistant" }),
|
|
1707
|
+
/* @__PURE__ */ jsx13("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Online" })
|
|
1601
1708
|
] })
|
|
1602
1709
|
] }),
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__PURE__ */
|
|
1605
|
-
/* @__PURE__ */
|
|
1710
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", gap: "0.5rem" }, children: /* @__PURE__ */ jsx13("button", { className: "qt-button-icon", "aria-label": "Settings", children: /* @__PURE__ */ jsxs13("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1711
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
|
|
1712
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1606
1713
|
] }) }) })
|
|
1607
1714
|
] }),
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1611
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsxs13("div", { style: { flex: 1, overflow: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
1716
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1717
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1718
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How can I help you today?" }) })
|
|
1612
1719
|
] }),
|
|
1613
|
-
/* @__PURE__ */
|
|
1720
|
+
/* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-user", children: /* @__PURE__ */ jsx13("p", { children: "I'd like to know more about theming." }) }) })
|
|
1614
1721
|
] }),
|
|
1615
|
-
/* @__PURE__ */
|
|
1616
|
-
/* @__PURE__ */
|
|
1722
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { margin: "0.5rem", borderRadius: "var(--radius-lg)" }, children: [
|
|
1723
|
+
/* @__PURE__ */ jsx13(
|
|
1617
1724
|
"textarea",
|
|
1618
1725
|
{
|
|
1619
1726
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1621,7 +1728,7 @@ var Chat = () => {
|
|
|
1621
1728
|
rows: 1
|
|
1622
1729
|
}
|
|
1623
1730
|
),
|
|
1624
|
-
/* @__PURE__ */
|
|
1731
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Send" })
|
|
1625
1732
|
] })
|
|
1626
1733
|
] })
|
|
1627
1734
|
] })
|
|
@@ -1629,7 +1736,7 @@ var Chat = () => {
|
|
|
1629
1736
|
};
|
|
1630
1737
|
|
|
1631
1738
|
// src/stories/components/Terminal.tsx
|
|
1632
|
-
import { jsx as
|
|
1739
|
+
import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1633
1740
|
var sampleOutput = `$ git status
|
|
1634
1741
|
On branch main
|
|
1635
1742
|
Your branch is up to date with 'origin/main'.
|
|
@@ -1641,117 +1748,117 @@ $ npm run dev
|
|
|
1641
1748
|
- Local: http://localhost:3000
|
|
1642
1749
|
- ready started server on 0.0.0.0:3000`;
|
|
1643
1750
|
var Terminal = () => {
|
|
1644
|
-
return /* @__PURE__ */
|
|
1645
|
-
/* @__PURE__ */
|
|
1646
|
-
/* @__PURE__ */
|
|
1751
|
+
return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
|
|
1752
|
+
/* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Terminal Components" }),
|
|
1753
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "1.5rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1647
1754
|
"The terminal carries its own identity. By default it stays dark in both light and dark themes \u2014 but a theme can override",
|
|
1648
1755
|
" ",
|
|
1649
|
-
/* @__PURE__ */
|
|
1756
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-bg" }),
|
|
1650
1757
|
", ",
|
|
1651
|
-
/* @__PURE__ */
|
|
1758
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-fg" }),
|
|
1652
1759
|
", and the",
|
|
1653
|
-
/* @__PURE__ */
|
|
1760
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-chrome-*" }),
|
|
1654
1761
|
" tokens to reskin every surface below."
|
|
1655
1762
|
] }),
|
|
1656
|
-
/* @__PURE__ */
|
|
1657
|
-
/* @__PURE__ */
|
|
1658
|
-
/* @__PURE__ */
|
|
1659
|
-
/* @__PURE__ */
|
|
1763
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1764
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "In-chat embed" }),
|
|
1765
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1766
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-embed" }),
|
|
1660
1767
|
" wraps the embed card; the header and footer strips inherit the surrounding theme so they nest cleanly with chat bubbles."
|
|
1661
1768
|
] }),
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
/* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1667
|
-
/* @__PURE__ */
|
|
1769
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1770
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-header", children: [
|
|
1771
|
+
/* @__PURE__ */ jsx14("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: /* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1772
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1773
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", children: "Pop out" }),
|
|
1774
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon qt-text-destructive", type: "button", children: "Kill" })
|
|
1668
1775
|
] })
|
|
1669
1776
|
] }),
|
|
1670
|
-
/* @__PURE__ */
|
|
1777
|
+
/* @__PURE__ */ jsx14("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 })
|
|
1671
1778
|
] })
|
|
1672
1779
|
] }),
|
|
1673
|
-
/* @__PURE__ */
|
|
1674
|
-
/* @__PURE__ */
|
|
1675
|
-
/* @__PURE__ */
|
|
1676
|
-
/* @__PURE__ */
|
|
1677
|
-
/* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
/* @__PURE__ */
|
|
1780
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1781
|
+
/* @__PURE__ */ jsx14("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)" }),
|
|
1782
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1783
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-embed-header", children: /* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1784
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-footer", children: [
|
|
1785
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-text-secondary", children: "Showing in Terminal Mode pane." }),
|
|
1786
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-secondary", type: "button", style: { fontSize: "0.75rem", padding: "0.25rem 0.5rem" }, children: "Go to pane \u2192" })
|
|
1680
1787
|
] })
|
|
1681
1788
|
] })
|
|
1682
1789
|
] }),
|
|
1683
|
-
/* @__PURE__ */
|
|
1684
|
-
/* @__PURE__ */
|
|
1685
|
-
/* @__PURE__ */
|
|
1790
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1791
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Pop-out page chrome" }),
|
|
1792
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1686
1793
|
"The full-screen pop-out page uses",
|
|
1687
1794
|
" ",
|
|
1688
|
-
/* @__PURE__ */
|
|
1795
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-page" }),
|
|
1689
1796
|
" as the outer canvas and",
|
|
1690
1797
|
" ",
|
|
1691
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-header" }),
|
|
1692
1799
|
" for the breadcrumb bar."
|
|
1693
1800
|
] }),
|
|
1694
|
-
/* @__PURE__ */
|
|
1695
|
-
/* @__PURE__ */
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1698
|
-
/* @__PURE__ */
|
|
1699
|
-
/* @__PURE__ */
|
|
1700
|
-
/* @__PURE__ */
|
|
1801
|
+
/* @__PURE__ */ jsxs14("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: [
|
|
1802
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-popout-header", children: [
|
|
1803
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1804
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", style: { color: "inherit" }, children: "\u2190" }),
|
|
1805
|
+
/* @__PURE__ */ jsx14("a", { href: "#", className: "qt-terminal-popout-link", style: { fontSize: "0.875rem" }, children: "Chat" }),
|
|
1806
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-terminal-popout-separator", children: "/" }),
|
|
1807
|
+
/* @__PURE__ */ jsx14("h1", { className: "qt-terminal-popout-title", style: { fontSize: "1rem", margin: 0 }, children: "Terminal \u2014 zsh" })
|
|
1701
1808
|
] }),
|
|
1702
|
-
/* @__PURE__ */
|
|
1809
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-destructive", type: "button", style: { fontSize: "0.875rem" }, children: "Kill Session" })
|
|
1703
1810
|
] }),
|
|
1704
|
-
/* @__PURE__ */
|
|
1811
|
+
/* @__PURE__ */ jsx14("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 })
|
|
1705
1812
|
] })
|
|
1706
1813
|
] }),
|
|
1707
|
-
/* @__PURE__ */
|
|
1708
|
-
/* @__PURE__ */
|
|
1709
|
-
/* @__PURE__ */
|
|
1814
|
+
/* @__PURE__ */ jsxs14("section", { children: [
|
|
1815
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Session-exited overlay" }),
|
|
1816
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1710
1817
|
"When the PTY exits but the terminal stays mounted, the",
|
|
1711
1818
|
" ",
|
|
1712
|
-
/* @__PURE__ */
|
|
1819
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-closed-badge" }),
|
|
1713
1820
|
" overlay marks it."
|
|
1714
1821
|
] }),
|
|
1715
|
-
/* @__PURE__ */
|
|
1822
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-surface", style: { position: "relative", height: "120px", borderRadius: "0.5rem" }, children: /* @__PURE__ */ jsx14("span", { className: "qt-terminal-closed-badge", children: "Closed" }) })
|
|
1716
1823
|
] })
|
|
1717
1824
|
] });
|
|
1718
1825
|
};
|
|
1719
1826
|
|
|
1720
1827
|
// src/stories/components/FilePreview.tsx
|
|
1721
|
-
import { jsx as
|
|
1828
|
+
import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1722
1829
|
var FilePreview = () => {
|
|
1723
|
-
return /* @__PURE__ */
|
|
1724
|
-
/* @__PURE__ */
|
|
1725
|
-
/* @__PURE__ */
|
|
1726
|
-
/* @__PURE__ */
|
|
1727
|
-
/* @__PURE__ */
|
|
1728
|
-
/* @__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: "File Preview Components" }),
|
|
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: "Scroll Container" }),
|
|
1834
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1835
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-scroll" }),
|
|
1729
1836
|
" - Scrollable container for file content with configurable max height."
|
|
1730
1837
|
] }),
|
|
1731
|
-
/* @__PURE__ */
|
|
1838
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-scroll", style: { height: "150px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx15("div", { style: { padding: "1rem" }, children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs15("p", { style: { margin: "0.5rem 0" }, children: [
|
|
1732
1839
|
"Line ",
|
|
1733
1840
|
i + 1,
|
|
1734
1841
|
": Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
1735
1842
|
] }, i)) }) })
|
|
1736
1843
|
] }),
|
|
1737
|
-
/* @__PURE__ */
|
|
1738
|
-
/* @__PURE__ */
|
|
1739
|
-
/* @__PURE__ */
|
|
1740
|
-
/* @__PURE__ */
|
|
1844
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1845
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Content Panel" }),
|
|
1846
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1847
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-panel" }),
|
|
1741
1848
|
" - Background panel for rendered markdown content."
|
|
1742
1849
|
] }),
|
|
1743
|
-
/* @__PURE__ */
|
|
1744
|
-
/* @__PURE__ */
|
|
1745
|
-
/* @__PURE__ */
|
|
1850
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-panel", children: [
|
|
1851
|
+
/* @__PURE__ */ jsx15("h4", { style: { margin: "0 0 0.5rem 0" }, children: "Document Title" }),
|
|
1852
|
+
/* @__PURE__ */ jsx15("p", { style: { margin: 0 }, children: "This is a content panel used for displaying rendered markdown files with a subtle background." })
|
|
1746
1853
|
] })
|
|
1747
1854
|
] }),
|
|
1748
|
-
/* @__PURE__ */
|
|
1749
|
-
/* @__PURE__ */
|
|
1750
|
-
/* @__PURE__ */
|
|
1751
|
-
/* @__PURE__ */
|
|
1855
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1856
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code Block" }),
|
|
1857
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1858
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-code" }),
|
|
1752
1859
|
" - Styled code block for plain text and source files with word wrap."
|
|
1753
1860
|
] }),
|
|
1754
|
-
/* @__PURE__ */
|
|
1861
|
+
/* @__PURE__ */ jsx15("pre", { className: "qt-file-preview-code", children: `function greet(name: string): string {
|
|
1755
1862
|
return \`Hello, \${name}!\`;
|
|
1756
1863
|
}
|
|
1757
1864
|
|
|
@@ -1759,133 +1866,133 @@ var FilePreview = () => {
|
|
|
1759
1866
|
const message = greet("World");
|
|
1760
1867
|
console.log(message);` })
|
|
1761
1868
|
] }),
|
|
1762
|
-
/* @__PURE__ */
|
|
1763
|
-
/* @__PURE__ */
|
|
1764
|
-
/* @__PURE__ */
|
|
1765
|
-
/* @__PURE__ */
|
|
1869
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1870
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading State" }),
|
|
1871
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1872
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading" }),
|
|
1766
1873
|
" + ",
|
|
1767
|
-
/* @__PURE__ */
|
|
1874
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading-text" }),
|
|
1768
1875
|
" - Loading indicator."
|
|
1769
1876
|
] }),
|
|
1770
|
-
/* @__PURE__ */
|
|
1877
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsx15("div", { className: "qt-file-preview-loading", style: { minHeight: "150px" }, children: /* @__PURE__ */ jsx15("div", { className: "qt-file-preview-loading-text", children: "Loading file..." }) }) })
|
|
1771
1878
|
] }),
|
|
1772
|
-
/* @__PURE__ */
|
|
1773
|
-
/* @__PURE__ */
|
|
1774
|
-
/* @__PURE__ */
|
|
1775
|
-
/* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1880
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty / Error State" }),
|
|
1881
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1882
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty" }),
|
|
1776
1883
|
" + ",
|
|
1777
|
-
/* @__PURE__ */
|
|
1884
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty-icon" }),
|
|
1778
1885
|
" - Empty or error state display."
|
|
1779
1886
|
] }),
|
|
1780
|
-
/* @__PURE__ */
|
|
1781
|
-
/* @__PURE__ */
|
|
1782
|
-
/* @__PURE__ */
|
|
1783
|
-
/* @__PURE__ */
|
|
1887
|
+
/* @__PURE__ */ jsxs15("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }, children: [
|
|
1888
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1889
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u{1F4C4}" }),
|
|
1890
|
+
/* @__PURE__ */ jsx15("p", { children: "No content available" })
|
|
1784
1891
|
] }) }),
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
/* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1892
|
+
/* @__PURE__ */ jsx15("div", { style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: /* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-empty", style: { minHeight: "150px" }, children: [
|
|
1893
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u26A0\uFE0F" }),
|
|
1894
|
+
/* @__PURE__ */ jsx15("p", { children: "Failed to load file" })
|
|
1788
1895
|
] }) })
|
|
1789
1896
|
] })
|
|
1790
1897
|
] }),
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1793
|
-
/* @__PURE__ */
|
|
1794
|
-
/* @__PURE__ */
|
|
1898
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1899
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wikilinks" }),
|
|
1900
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1901
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink" }),
|
|
1795
1902
|
" + ",
|
|
1796
|
-
/* @__PURE__ */
|
|
1903
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink-broken" }),
|
|
1797
1904
|
" - Internal document links in markdown."
|
|
1798
1905
|
] }),
|
|
1799
|
-
/* @__PURE__ */
|
|
1906
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-panel", children: /* @__PURE__ */ jsxs15("p", { style: { margin: 0, lineHeight: 2 }, children: [
|
|
1800
1907
|
"This document references ",
|
|
1801
|
-
/* @__PURE__ */
|
|
1908
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "Character Profile" }),
|
|
1802
1909
|
" and links to ",
|
|
1803
|
-
/* @__PURE__ */
|
|
1910
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "World Building \u2192 Geography" }),
|
|
1804
1911
|
". There's also a ",
|
|
1805
|
-
/* @__PURE__ */
|
|
1912
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink-broken", children: "Missing Document" }),
|
|
1806
1913
|
" that doesn't exist yet."
|
|
1807
1914
|
] }) })
|
|
1808
1915
|
] }),
|
|
1809
|
-
/* @__PURE__ */
|
|
1810
|
-
/* @__PURE__ */
|
|
1811
|
-
/* @__PURE__ */
|
|
1916
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1917
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "CSS Variables" }),
|
|
1918
|
+
/* @__PURE__ */ jsx15("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.5rem" }, children: [
|
|
1812
1919
|
{ name: "--qt-file-preview-max-height", value: "70vh", desc: "Max height of scroll container" },
|
|
1813
1920
|
{ name: "--qt-file-preview-min-height", value: "300px", desc: "Min height of loading/empty states" },
|
|
1814
1921
|
{ name: "--qt-file-preview-panel-bg", value: "muted/30%", desc: "Content panel background" },
|
|
1815
1922
|
{ name: "--qt-code-bg", value: "muted", desc: "Code block background" },
|
|
1816
1923
|
{ name: "--qt-code-fg", value: "foreground", desc: "Code block text color" },
|
|
1817
1924
|
{ name: "--qt-code-font", value: "monospace", desc: "Code block font family" }
|
|
1818
|
-
].map(({ name, value, desc }) => /* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
1820
|
-
/* @__PURE__ */
|
|
1925
|
+
].map(({ name, value, desc }) => /* @__PURE__ */ jsxs15("div", { style: { padding: "0.75rem", background: "var(--color-muted)", borderRadius: "var(--radius-md)" }, children: [
|
|
1926
|
+
/* @__PURE__ */ jsx15("code", { style: { fontSize: "0.75rem", fontWeight: 600 }, children: name }),
|
|
1927
|
+
/* @__PURE__ */ jsxs15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.25rem" }, children: [
|
|
1821
1928
|
"Default: ",
|
|
1822
1929
|
value
|
|
1823
1930
|
] }),
|
|
1824
|
-
/* @__PURE__ */
|
|
1931
|
+
/* @__PURE__ */ jsx15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: desc })
|
|
1825
1932
|
] }, name)) })
|
|
1826
1933
|
] })
|
|
1827
1934
|
] });
|
|
1828
1935
|
};
|
|
1829
1936
|
|
|
1830
1937
|
// src/stories/components/ThemeComparison.tsx
|
|
1831
|
-
import { jsx as
|
|
1938
|
+
import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1832
1939
|
var ThemePanel = ({ title, description }) => {
|
|
1833
|
-
return /* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
1835
|
-
/* @__PURE__ */
|
|
1836
|
-
/* @__PURE__ */
|
|
1837
|
-
] }),
|
|
1838
|
-
/* @__PURE__ */
|
|
1839
|
-
/* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1940
|
+
return /* @__PURE__ */ jsxs16("div", { style: { flex: 1, minWidth: "20rem" }, children: [
|
|
1941
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1rem" }, children: [
|
|
1942
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontWeight: 600 }, children: title }),
|
|
1943
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: description })
|
|
1944
|
+
] }),
|
|
1945
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card", style: { marginBottom: "1rem" }, children: [
|
|
1946
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-header", children: [
|
|
1947
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Sample Card" }),
|
|
1948
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "This is how cards look in this theme." })
|
|
1842
1949
|
] }),
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
/* @__PURE__ */
|
|
1845
|
-
/* @__PURE__ */
|
|
1846
|
-
/* @__PURE__ */
|
|
1847
|
-
/* @__PURE__ */
|
|
1848
|
-
/* @__PURE__ */
|
|
1950
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-body", children: [
|
|
1951
|
+
/* @__PURE__ */ jsx16("p", { style: { marginBottom: "1rem" }, children: "Cards are used throughout the application for grouping content." }),
|
|
1952
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1953
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
1954
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
1955
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" })
|
|
1849
1956
|
] })
|
|
1850
1957
|
] }),
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
/* @__PURE__ */
|
|
1958
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-footer", children: [
|
|
1959
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Cancel" }),
|
|
1960
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Save" })
|
|
1854
1961
|
] })
|
|
1855
1962
|
] }),
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1859
|
-
/* @__PURE__ */
|
|
1963
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-panel", style: { padding: "1rem", marginBottom: "1rem" }, children: [
|
|
1964
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1965
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Text Input" }),
|
|
1966
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
|
|
1860
1967
|
] }),
|
|
1861
|
-
/* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
1864
|
-
/* @__PURE__ */
|
|
1865
|
-
/* @__PURE__ */
|
|
1968
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1969
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Select" }),
|
|
1970
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", children: [
|
|
1971
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
1972
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1866
1973
|
] })
|
|
1867
1974
|
] }),
|
|
1868
|
-
/* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1975
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1976
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary qt-button-sm", children: "Secondary" }),
|
|
1977
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Primary" })
|
|
1871
1978
|
] })
|
|
1872
1979
|
] }),
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
1876
|
-
/* @__PURE__ */
|
|
1980
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1981
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1982
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1983
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-chat-message qt-chat-message-assistant", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem" }, children: "Hello! This is a chat message." }) })
|
|
1877
1984
|
] }),
|
|
1878
|
-
/* @__PURE__ */
|
|
1985
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-chat-message qt-chat-message-user", style: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem" }, children: "Great, thanks!" }) }) })
|
|
1879
1986
|
] })
|
|
1880
1987
|
] });
|
|
1881
1988
|
};
|
|
1882
1989
|
var ThemeComparison = () => {
|
|
1883
|
-
return /* @__PURE__ */
|
|
1884
|
-
/* @__PURE__ */
|
|
1885
|
-
/* @__PURE__ */
|
|
1886
|
-
/* @__PURE__ */
|
|
1887
|
-
/* @__PURE__ */
|
|
1888
|
-
/* @__PURE__ */
|
|
1990
|
+
return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
|
|
1991
|
+
/* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Theme Comparison" }),
|
|
1992
|
+
/* @__PURE__ */ jsx16("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." }),
|
|
1993
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
1994
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Current Theme Preview" }),
|
|
1995
|
+
/* @__PURE__ */ jsx16(
|
|
1889
1996
|
ThemePanel,
|
|
1890
1997
|
{
|
|
1891
1998
|
title: "Active Theme",
|
|
@@ -1893,9 +2000,9 @@ var ThemeComparison = () => {
|
|
|
1893
2000
|
}
|
|
1894
2001
|
)
|
|
1895
2002
|
] }),
|
|
1896
|
-
/* @__PURE__ */
|
|
1897
|
-
/* @__PURE__ */
|
|
1898
|
-
/* @__PURE__ */
|
|
2003
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2004
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Key Theme Colors" }),
|
|
2005
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1899
2006
|
{ name: "Background", var: "--color-background" },
|
|
1900
2007
|
{ name: "Foreground", var: "--color-foreground" },
|
|
1901
2008
|
{ name: "Card", var: "--color-card" },
|
|
@@ -1904,8 +2011,8 @@ var ThemeComparison = () => {
|
|
|
1904
2011
|
{ name: "Muted", var: "--color-muted" },
|
|
1905
2012
|
{ name: "Accent", var: "--color-accent" },
|
|
1906
2013
|
{ name: "Border", var: "--color-border" }
|
|
1907
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1908
|
-
/* @__PURE__ */
|
|
2014
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2015
|
+
/* @__PURE__ */ jsx16(
|
|
1909
2016
|
"div",
|
|
1910
2017
|
{
|
|
1911
2018
|
style: {
|
|
@@ -1917,17 +2024,17 @@ var ThemeComparison = () => {
|
|
|
1917
2024
|
}
|
|
1918
2025
|
}
|
|
1919
2026
|
),
|
|
1920
|
-
/* @__PURE__ */
|
|
2027
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1921
2028
|
] }, cssVar)) })
|
|
1922
2029
|
] }),
|
|
1923
|
-
/* @__PURE__ */
|
|
1924
|
-
/* @__PURE__ */
|
|
1925
|
-
/* @__PURE__ */
|
|
2030
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2031
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Semantic Colors" }),
|
|
2032
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1926
2033
|
{ name: "Destructive", var: "--color-destructive" },
|
|
1927
2034
|
{ name: "Success", var: "--color-success" },
|
|
1928
2035
|
{ name: "Warning", var: "--color-warning" }
|
|
1929
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1930
|
-
/* @__PURE__ */
|
|
2036
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2037
|
+
/* @__PURE__ */ jsx16(
|
|
1931
2038
|
"div",
|
|
1932
2039
|
{
|
|
1933
2040
|
style: {
|
|
@@ -1939,50 +2046,50 @@ var ThemeComparison = () => {
|
|
|
1939
2046
|
}
|
|
1940
2047
|
}
|
|
1941
2048
|
),
|
|
1942
|
-
/* @__PURE__ */
|
|
2049
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1943
2050
|
] }, cssVar)) })
|
|
1944
2051
|
] }),
|
|
1945
|
-
/* @__PURE__ */
|
|
1946
|
-
/* @__PURE__ */
|
|
1947
|
-
/* @__PURE__ */
|
|
1948
|
-
/* @__PURE__ */
|
|
1949
|
-
/* @__PURE__ */
|
|
1950
|
-
/* @__PURE__ */
|
|
1951
|
-
/* @__PURE__ */
|
|
1952
|
-
/* @__PURE__ */
|
|
1953
|
-
/* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
2052
|
+
/* @__PURE__ */ jsxs16("section", { children: [
|
|
2053
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Showcase" }),
|
|
2054
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2055
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Buttons" }),
|
|
2056
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2057
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Primary" }),
|
|
2058
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary", children: "Secondary" }),
|
|
2059
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Ghost" }),
|
|
2060
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-destructive", children: "Destructive" }),
|
|
2061
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", disabled: true, children: "Disabled" })
|
|
1955
2062
|
] })
|
|
1956
2063
|
] }),
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
1960
|
-
/* @__PURE__ */
|
|
1961
|
-
/* @__PURE__ */
|
|
1962
|
-
/* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
1964
|
-
/* @__PURE__ */
|
|
1965
|
-
/* @__PURE__ */
|
|
2064
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2065
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Badges" }),
|
|
2066
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2067
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-default", children: "Default" }),
|
|
2068
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
2069
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
2070
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" }),
|
|
2071
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-warning", children: "Warning" }),
|
|
2072
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-destructive", children: "Destructive" })
|
|
1966
2073
|
] })
|
|
1967
2074
|
] }),
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
/* @__PURE__ */
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
2075
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2076
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Interactive Card" }),
|
|
2077
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-card qt-card-interactive", style: { maxWidth: "20rem", cursor: "pointer" }, children: /* @__PURE__ */ jsx16("div", { className: "qt-card-header", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
2078
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
2079
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2080
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Character Name" }),
|
|
2081
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "Click to interact" })
|
|
1975
2082
|
] })
|
|
1976
2083
|
] }) }) })
|
|
1977
2084
|
] }),
|
|
1978
|
-
/* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
/* @__PURE__ */
|
|
1981
|
-
/* @__PURE__ */
|
|
1982
|
-
/* @__PURE__ */
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
1985
|
-
/* @__PURE__ */
|
|
2085
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2086
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Form Elements" }),
|
|
2087
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap", maxWidth: "32rem" }, children: [
|
|
2088
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Text input", style: { flex: "1 1 10rem" } }),
|
|
2089
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", style: { flex: "1 1 10rem" }, children: [
|
|
2090
|
+
/* @__PURE__ */ jsx16("option", { children: "Select option" }),
|
|
2091
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
2092
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1986
2093
|
] })
|
|
1987
2094
|
] })
|
|
1988
2095
|
] })
|
|
@@ -1991,125 +2098,125 @@ var ThemeComparison = () => {
|
|
|
1991
2098
|
};
|
|
1992
2099
|
|
|
1993
2100
|
// src/stories/components/EmptyState.tsx
|
|
1994
|
-
import { jsx as
|
|
2101
|
+
import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1995
2102
|
var EmptyState = () => {
|
|
1996
|
-
return /* @__PURE__ */
|
|
1997
|
-
/* @__PURE__ */
|
|
1998
|
-
/* @__PURE__ */
|
|
1999
|
-
/* @__PURE__ */
|
|
2000
|
-
/* @__PURE__ */
|
|
2001
|
-
/* @__PURE__ */
|
|
2002
|
-
/* @__PURE__ */
|
|
2003
|
-
/* @__PURE__ */
|
|
2103
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "1.5rem" }, children: [
|
|
2104
|
+
/* @__PURE__ */ jsx17("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
|
|
2105
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2106
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
|
|
2107
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2108
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2109
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
|
|
2110
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
|
|
2004
2111
|
] })
|
|
2005
2112
|
] }),
|
|
2006
|
-
/* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2009
|
-
/* @__PURE__ */
|
|
2010
|
-
/* @__PURE__ */
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2113
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2114
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty State with Action" }),
|
|
2115
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2116
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2117
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No characters" }),
|
|
2118
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
|
|
2119
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
|
|
2013
2120
|
] })
|
|
2014
2121
|
] }),
|
|
2015
|
-
/* @__PURE__ */
|
|
2016
|
-
/* @__PURE__ */
|
|
2017
|
-
/* @__PURE__ */
|
|
2018
|
-
/* @__PURE__ */
|
|
2019
|
-
/* @__PURE__ */
|
|
2020
|
-
/* @__PURE__ */
|
|
2021
|
-
/* @__PURE__ */
|
|
2122
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2123
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
|
|
2124
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2125
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
|
|
2126
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No results found" }),
|
|
2127
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
|
|
2128
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
|
|
2022
2129
|
] })
|
|
2023
2130
|
] }),
|
|
2024
|
-
/* @__PURE__ */
|
|
2025
|
-
/* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2027
|
-
/* @__PURE__ */
|
|
2028
|
-
/* @__PURE__ */
|
|
2029
|
-
/* @__PURE__ */
|
|
2030
|
-
/* @__PURE__ */
|
|
2131
|
+
/* @__PURE__ */ jsxs17("section", { children: [
|
|
2132
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
|
|
2133
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2134
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-icon text-red-500", children: /* @__PURE__ */ jsx17("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
|
|
2135
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
|
|
2136
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
|
|
2137
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
|
|
2031
2138
|
] })
|
|
2032
2139
|
] })
|
|
2033
2140
|
] });
|
|
2034
2141
|
};
|
|
2035
2142
|
|
|
2036
2143
|
// src/stories/components/Loading.tsx
|
|
2037
|
-
import { jsx as
|
|
2144
|
+
import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2038
2145
|
var Loading = () => {
|
|
2039
|
-
return /* @__PURE__ */
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2042
|
-
/* @__PURE__ */
|
|
2043
|
-
/* @__PURE__ */
|
|
2044
|
-
/* @__PURE__ */
|
|
2045
|
-
/* @__PURE__ */
|
|
2046
|
-
/* @__PURE__ */
|
|
2047
|
-
] }),
|
|
2048
|
-
/* @__PURE__ */
|
|
2049
|
-
/* @__PURE__ */
|
|
2050
|
-
/* @__PURE__ */
|
|
2051
|
-
] }),
|
|
2052
|
-
/* @__PURE__ */
|
|
2053
|
-
/* @__PURE__ */
|
|
2054
|
-
/* @__PURE__ */
|
|
2146
|
+
return /* @__PURE__ */ jsxs18("div", { style: { padding: "1.5rem" }, children: [
|
|
2147
|
+
/* @__PURE__ */ jsx18("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
|
|
2148
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2149
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
|
|
2150
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
|
|
2151
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2152
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
|
|
2153
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
|
|
2154
|
+
] }),
|
|
2155
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2156
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
|
|
2157
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
|
|
2158
|
+
] }),
|
|
2159
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2160
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
|
|
2161
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
|
|
2055
2162
|
] })
|
|
2056
2163
|
] })
|
|
2057
2164
|
] }),
|
|
2058
|
-
/* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2061
|
-
/* @__PURE__ */
|
|
2062
|
-
/* @__PURE__ */
|
|
2063
|
-
/* @__PURE__ */
|
|
2165
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2166
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
|
|
2167
|
+
/* @__PURE__ */ jsxs18("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2168
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
|
|
2169
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
|
|
2170
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2064
2171
|
] })
|
|
2065
2172
|
] }),
|
|
2066
|
-
/* @__PURE__ */
|
|
2067
|
-
/* @__PURE__ */
|
|
2068
|
-
/* @__PURE__ */
|
|
2069
|
-
/* @__PURE__ */
|
|
2070
|
-
/* @__PURE__ */
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2174
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
|
|
2175
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
|
|
2176
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
|
|
2177
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
|
|
2178
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2179
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
|
|
2180
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
|
|
2074
2181
|
] })
|
|
2075
2182
|
] }),
|
|
2076
|
-
/* @__PURE__ */
|
|
2077
|
-
/* @__PURE__ */
|
|
2078
|
-
/* @__PURE__ */
|
|
2079
|
-
/* @__PURE__ */
|
|
2183
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2184
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2185
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2186
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
|
|
2080
2187
|
] })
|
|
2081
2188
|
] })
|
|
2082
2189
|
] }),
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2085
|
-
/* @__PURE__ */
|
|
2086
|
-
/* @__PURE__ */
|
|
2087
|
-
/* @__PURE__ */
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
/* @__PURE__ */
|
|
2090
|
-
/* @__PURE__ */
|
|
2091
|
-
/* @__PURE__ */
|
|
2092
|
-
/* @__PURE__ */
|
|
2190
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2191
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
|
|
2192
|
+
/* @__PURE__ */ jsx18("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
2193
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2194
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2195
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
|
|
2196
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2197
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2198
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2199
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2093
2200
|
] }) })
|
|
2094
2201
|
] })
|
|
2095
2202
|
] }) })
|
|
2096
2203
|
] }),
|
|
2097
|
-
/* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2099
|
-
/* @__PURE__ */
|
|
2100
|
-
/* @__PURE__ */
|
|
2101
|
-
/* @__PURE__ */
|
|
2204
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2205
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
|
|
2206
|
+
/* @__PURE__ */ jsx18("div", { style: { maxWidth: "24rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs18("div", { className: "qt-card", style: { padding: "0.75rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
|
|
2207
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2208
|
+
/* @__PURE__ */ jsx18("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
|
|
2102
2209
|
] }, i)) })
|
|
2103
2210
|
] }),
|
|
2104
|
-
/* @__PURE__ */
|
|
2105
|
-
/* @__PURE__ */
|
|
2106
|
-
/* @__PURE__ */
|
|
2107
|
-
/* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2211
|
+
/* @__PURE__ */ jsxs18("section", { children: [
|
|
2212
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
|
|
2213
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2214
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2215
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2109
2216
|
"Loading..."
|
|
2110
2217
|
] }),
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2219
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2113
2220
|
"Saving..."
|
|
2114
2221
|
] })
|
|
2115
2222
|
] })
|
|
@@ -2118,130 +2225,130 @@ var Loading = () => {
|
|
|
2118
2225
|
};
|
|
2119
2226
|
|
|
2120
2227
|
// src/stories/components/Participant.tsx
|
|
2121
|
-
import { jsx as
|
|
2228
|
+
import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2122
2229
|
var Participant = () => {
|
|
2123
|
-
return /* @__PURE__ */
|
|
2124
|
-
/* @__PURE__ */
|
|
2125
|
-
/* @__PURE__ */
|
|
2126
|
-
/* @__PURE__ */
|
|
2127
|
-
/* @__PURE__ */
|
|
2128
|
-
/* @__PURE__ */
|
|
2129
|
-
/* @__PURE__ */
|
|
2130
|
-
/* @__PURE__ */
|
|
2131
|
-
/* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2230
|
+
return /* @__PURE__ */ jsxs19("div", { style: { padding: "1.5rem" }, children: [
|
|
2231
|
+
/* @__PURE__ */ jsx19("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
|
|
2232
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2233
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
|
|
2234
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2235
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2236
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2237
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2238
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2239
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" })
|
|
2133
2240
|
] })
|
|
2134
2241
|
] }) }),
|
|
2135
|
-
/* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2137
|
-
/* @__PURE__ */
|
|
2138
|
-
/* @__PURE__ */
|
|
2139
|
-
/* @__PURE__ */
|
|
2242
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2243
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2244
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2245
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2246
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2140
2247
|
] })
|
|
2141
2248
|
] }) }),
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2145
|
-
/* @__PURE__ */
|
|
2146
|
-
/* @__PURE__ */
|
|
2249
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2250
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2251
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2252
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2253
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2147
2254
|
] })
|
|
2148
2255
|
] }) })
|
|
2149
2256
|
] })
|
|
2150
2257
|
] }),
|
|
2151
|
-
/* @__PURE__ */
|
|
2152
|
-
/* @__PURE__ */
|
|
2153
|
-
/* @__PURE__ */
|
|
2154
|
-
/* @__PURE__ */
|
|
2155
|
-
/* @__PURE__ */
|
|
2156
|
-
/* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2159
|
-
/* @__PURE__ */
|
|
2258
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2259
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
2260
|
+
/* @__PURE__ */ jsx19("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." }),
|
|
2261
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2262
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2263
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2264
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2265
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2266
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2160
2267
|
] })
|
|
2161
2268
|
] }) }),
|
|
2162
|
-
/* @__PURE__ */
|
|
2163
|
-
/* @__PURE__ */
|
|
2164
|
-
/* @__PURE__ */
|
|
2165
|
-
/* @__PURE__ */
|
|
2269
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2270
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2271
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
2272
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-silent", children: /* @__PURE__ */ jsx19("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("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" }) }) })
|
|
2166
2273
|
] }),
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
/* @__PURE__ */
|
|
2169
|
-
/* @__PURE__ */
|
|
2170
|
-
/* @__PURE__ */
|
|
2274
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2275
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2276
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2277
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
2171
2278
|
] }),
|
|
2172
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
2173
2280
|
] })
|
|
2174
2281
|
] }) }),
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2177
|
-
/* @__PURE__ */
|
|
2178
|
-
/* @__PURE__ */
|
|
2282
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2283
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2284
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2285
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-status-overlay qt-participant-status-overlay-absent", children: /* @__PURE__ */ jsx19("svg", { width: "10", height: "10", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) })
|
|
2179
2286
|
] }),
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
/* @__PURE__ */
|
|
2183
|
-
/* @__PURE__ */
|
|
2287
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2288
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2289
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2290
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
2184
2291
|
] }),
|
|
2185
|
-
/* @__PURE__ */
|
|
2292
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
2186
2293
|
] })
|
|
2187
2294
|
] }) }),
|
|
2188
|
-
/* @__PURE__ */
|
|
2189
|
-
/* @__PURE__ */
|
|
2190
|
-
/* @__PURE__ */
|
|
2191
|
-
/* @__PURE__ */
|
|
2192
|
-
/* @__PURE__ */
|
|
2295
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2296
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2297
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2298
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2299
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2193
2300
|
] })
|
|
2194
2301
|
] }) })
|
|
2195
2302
|
] })
|
|
2196
2303
|
] }),
|
|
2197
|
-
/* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
2201
|
-
/* @__PURE__ */
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2304
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2305
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
|
2306
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2307
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-card", style: { flex: 1, padding: "1rem" }, children: /* @__PURE__ */ jsx19("p", { style: { color: "var(--color-text-muted)" }, children: "Chat messages area" }) }),
|
|
2308
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
|
|
2309
|
+
/* @__PURE__ */ jsx19("div", { style: { padding: "1rem", borderBottom: "1px solid var(--qt-chat-sidebar-header-border)" }, children: /* @__PURE__ */ jsx19("h4", { style: { fontWeight: 600, color: "var(--qt-chat-sidebar-heading)" }, children: "Participants" }) }),
|
|
2310
|
+
/* @__PURE__ */ jsxs19("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2311
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2312
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2313
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
|
|
2207
2314
|
] }) }),
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2315
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2316
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "YO" }) }) }),
|
|
2317
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
|
|
2211
2318
|
] }) })
|
|
2212
2319
|
] })
|
|
2213
2320
|
] })
|
|
2214
2321
|
] })
|
|
2215
2322
|
] }),
|
|
2216
|
-
/* @__PURE__ */
|
|
2217
|
-
/* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2219
|
-
/* @__PURE__ */
|
|
2220
|
-
/* @__PURE__ */
|
|
2221
|
-
/* @__PURE__ */
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
/* @__PURE__ */
|
|
2228
|
-
/* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsxs19("section", { children: [
|
|
2324
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
|
|
2325
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
2326
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2327
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "AC" }) }) }),
|
|
2328
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2329
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2330
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
|
|
2331
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
|
|
2332
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2333
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2334
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2335
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" }),
|
|
2336
|
+
/* @__PURE__ */ jsx19("option", { value: "gemini", children: "gemini-pro" })
|
|
2230
2337
|
] }) })
|
|
2231
2338
|
] })
|
|
2232
2339
|
] }) }),
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2235
|
-
/* @__PURE__ */
|
|
2236
|
-
/* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2340
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2341
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }) }),
|
|
2342
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2343
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2344
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2345
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
|
|
2239
2346
|
] }),
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2243
|
-
/* @__PURE__ */
|
|
2244
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
|
|
2348
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2349
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2350
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2351
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" })
|
|
2245
2352
|
] }) })
|
|
2246
2353
|
] })
|
|
2247
2354
|
] }) })
|
|
@@ -2261,6 +2368,7 @@ export {
|
|
|
2261
2368
|
Cards,
|
|
2262
2369
|
Inputs,
|
|
2263
2370
|
Badges,
|
|
2371
|
+
Surfaces,
|
|
2264
2372
|
Avatars,
|
|
2265
2373
|
Dialogs,
|
|
2266
2374
|
Tabs,
|