@quilltap/theme-storybook 1.0.41 → 1.0.44
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 +12 -0
- package/dist/{chunk-U2PTQQL5.mjs → chunk-77W5TNBS.mjs} +886 -755
- package/dist/index.css +136 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +887 -755
- 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 +887 -755
- package/dist/stories/index.mjs +3 -1
- package/package.json +1 -1
- package/src/css/qt-components.css +72 -0
- package/src/stories/components/Chat.tsx +34 -0
- package/src/stories/components/Icons.tsx +2 -2
- 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",
|
|
@@ -114,7 +115,8 @@ var ICON_GROUPS = [
|
|
|
114
115
|
"arrow-left",
|
|
115
116
|
"arrow-right",
|
|
116
117
|
"arrow-up",
|
|
117
|
-
"arrow-down"
|
|
118
|
+
"arrow-down",
|
|
119
|
+
"sort"
|
|
118
120
|
]
|
|
119
121
|
},
|
|
120
122
|
{
|
|
@@ -1025,75 +1027,175 @@ var Badges = () => {
|
|
|
1025
1027
|
] });
|
|
1026
1028
|
};
|
|
1027
1029
|
|
|
1028
|
-
// src/stories/components/
|
|
1030
|
+
// src/stories/components/Surfaces.tsx
|
|
1029
1031
|
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1030
|
-
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 = () => {
|
|
1031
1045
|
return /* @__PURE__ */ jsxs9("div", { style: { padding: "1.5rem" }, children: [
|
|
1032
|
-
/* @__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
|
+
] }),
|
|
1033
1062
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1034
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1035
|
-
/* @__PURE__ */ jsxs9("
|
|
1036
|
-
|
|
1037
|
-
/* @__PURE__ */ jsx9("
|
|
1038
|
-
|
|
1039
|
-
/* @__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" })
|
|
1040
1080
|
] })
|
|
1041
1081
|
] }),
|
|
1042
1082
|
/* @__PURE__ */ jsxs9("section", { style: { marginBottom: "2rem" }, children: [
|
|
1043
|
-
/* @__PURE__ */
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
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
|
+
] })
|
|
1049
1105
|
] })
|
|
1050
1106
|
] }),
|
|
1051
|
-
/* @__PURE__ */ jsxs9("section", {
|
|
1052
|
-
/* @__PURE__ */ jsx9("h3", { style:
|
|
1053
|
-
/* @__PURE__ */ jsxs9("
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
/* @__PURE__ */ jsx9("div", { className: "qt-
|
|
1064
|
-
|
|
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." })
|
|
1124
|
+
] })
|
|
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
|
+
] })
|
|
1143
|
+
] }),
|
|
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" }) })
|
|
1151
|
+
] })
|
|
1152
|
+
] }),
|
|
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" })
|
|
1065
1167
|
] })
|
|
1066
1168
|
] })
|
|
1067
1169
|
] }),
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
/* @__PURE__ */
|
|
1073
|
-
/* @__PURE__ */
|
|
1074
|
-
/* @__PURE__ */
|
|
1075
|
-
/* @__PURE__ */
|
|
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" }) })
|
|
1076
1178
|
] })
|
|
1077
1179
|
] }),
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1080
|
-
/* @__PURE__ */
|
|
1081
|
-
/* @__PURE__ */
|
|
1082
|
-
/* @__PURE__ */
|
|
1083
|
-
/* @__PURE__ */
|
|
1084
|
-
/* @__PURE__ */
|
|
1085
|
-
/* @__PURE__ */
|
|
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" })
|
|
1086
1188
|
] }),
|
|
1087
|
-
/* @__PURE__ */
|
|
1088
|
-
] }),
|
|
1089
|
-
/* @__PURE__ */
|
|
1090
|
-
/* @__PURE__ */
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__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" })
|
|
1095
1197
|
] }),
|
|
1096
|
-
/* @__PURE__ */
|
|
1198
|
+
/* @__PURE__ */ jsx10("p", { style: { fontSize: "0.875rem", marginTop: "0.25rem" }, children: "This is a sample comment with an avatar." })
|
|
1097
1199
|
] })
|
|
1098
1200
|
] })
|
|
1099
1201
|
] })
|
|
@@ -1103,131 +1205,131 @@ var Avatars = () => {
|
|
|
1103
1205
|
|
|
1104
1206
|
// src/stories/components/Dialogs.tsx
|
|
1105
1207
|
import { useState } from "react";
|
|
1106
|
-
import { jsx as
|
|
1208
|
+
import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1107
1209
|
var Dialogs = () => {
|
|
1108
1210
|
const [basicOpen, setBasicOpen] = useState(false);
|
|
1109
1211
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
1110
1212
|
const [formOpen, setFormOpen] = useState(false);
|
|
1111
|
-
return /* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1113
|
-
/* @__PURE__ */
|
|
1114
|
-
/* @__PURE__ */
|
|
1115
|
-
/* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
] })
|
|
1121
|
-
] }),
|
|
1122
|
-
basicOpen && /* @__PURE__ */
|
|
1123
|
-
/* @__PURE__ */
|
|
1124
|
-
/* @__PURE__ */
|
|
1125
|
-
/* @__PURE__ */
|
|
1126
|
-
/* @__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" }) }) })
|
|
1127
1229
|
] }),
|
|
1128
|
-
/* @__PURE__ */
|
|
1129
|
-
/* @__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" }) })
|
|
1130
1232
|
] }) }),
|
|
1131
|
-
confirmOpen && /* @__PURE__ */
|
|
1132
|
-
/* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__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" }) }) })
|
|
1136
1238
|
] }),
|
|
1137
|
-
/* @__PURE__ */
|
|
1138
|
-
/* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1140
|
-
/* @__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" })
|
|
1141
1243
|
] })
|
|
1142
1244
|
] }) }),
|
|
1143
|
-
formOpen && /* @__PURE__ */
|
|
1144
|
-
/* @__PURE__ */
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__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" }) }) })
|
|
1148
1250
|
] }),
|
|
1149
|
-
/* @__PURE__ */
|
|
1150
|
-
/* @__PURE__ */
|
|
1151
|
-
/* @__PURE__ */
|
|
1152
|
-
/* @__PURE__ */
|
|
1153
|
-
] }),
|
|
1154
|
-
/* @__PURE__ */
|
|
1155
|
-
/* @__PURE__ */
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
] }),
|
|
1158
|
-
/* @__PURE__ */
|
|
1159
|
-
/* @__PURE__ */
|
|
1160
|
-
/* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1162
|
-
/* @__PURE__ */
|
|
1163
|
-
/* @__PURE__ */
|
|
1164
|
-
/* @__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" })
|
|
1165
1267
|
] })
|
|
1166
1268
|
] })
|
|
1167
1269
|
] }) }),
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__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" })
|
|
1171
1273
|
] })
|
|
1172
1274
|
] }) }),
|
|
1173
|
-
/* @__PURE__ */
|
|
1174
|
-
/* @__PURE__ */
|
|
1175
|
-
/* @__PURE__ */
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1180
|
-
] }),
|
|
1181
|
-
/* @__PURE__ */
|
|
1182
|
-
/* @__PURE__ */
|
|
1183
|
-
/* @__PURE__ */
|
|
1184
|
-
/* @__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" })
|
|
1185
1287
|
] })
|
|
1186
1288
|
] }) })
|
|
1187
1289
|
] }),
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1191
|
-
/* @__PURE__ */
|
|
1192
|
-
/* @__PURE__ */
|
|
1193
|
-
/* @__PURE__ */
|
|
1194
|
-
/* @__PURE__ */
|
|
1195
|
-
/* @__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." }) })
|
|
1196
1298
|
] }) })
|
|
1197
1299
|
] }),
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
/* @__PURE__ */
|
|
1200
|
-
/* @__PURE__ */
|
|
1201
|
-
/* @__PURE__ */
|
|
1202
|
-
/* @__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." }) })
|
|
1203
1305
|
] }) })
|
|
1204
1306
|
] })
|
|
1205
1307
|
] })
|
|
1206
1308
|
] }),
|
|
1207
|
-
/* @__PURE__ */
|
|
1208
|
-
/* @__PURE__ */
|
|
1209
|
-
/* @__PURE__ */
|
|
1210
|
-
/* @__PURE__ */
|
|
1211
|
-
/* @__PURE__ */
|
|
1212
|
-
/* @__PURE__ */
|
|
1213
|
-
/* @__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." })
|
|
1214
1316
|
] }) })
|
|
1215
1317
|
] })
|
|
1216
1318
|
] }),
|
|
1217
|
-
/* @__PURE__ */
|
|
1218
|
-
/* @__PURE__ */
|
|
1219
|
-
/* @__PURE__ */
|
|
1220
|
-
/* @__PURE__ */
|
|
1221
|
-
/* @__PURE__ */
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
/* @__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" })
|
|
1224
1326
|
] })
|
|
1225
1327
|
] }),
|
|
1226
|
-
/* @__PURE__ */
|
|
1227
|
-
/* @__PURE__ */
|
|
1228
|
-
/* @__PURE__ */
|
|
1229
|
-
/* @__PURE__ */
|
|
1230
|
-
/* @__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" })
|
|
1231
1333
|
] }) })
|
|
1232
1334
|
] })
|
|
1233
1335
|
] });
|
|
@@ -1235,15 +1337,15 @@ var Dialogs = () => {
|
|
|
1235
1337
|
|
|
1236
1338
|
// src/stories/components/Tabs.tsx
|
|
1237
1339
|
import { useState as useState2 } from "react";
|
|
1238
|
-
import { jsx as
|
|
1340
|
+
import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1239
1341
|
var Tabs = () => {
|
|
1240
1342
|
const [activeTab, setActiveTab] = useState2("tab1");
|
|
1241
|
-
return /* @__PURE__ */
|
|
1242
|
-
/* @__PURE__ */
|
|
1243
|
-
/* @__PURE__ */
|
|
1244
|
-
/* @__PURE__ */
|
|
1245
|
-
/* @__PURE__ */
|
|
1246
|
-
/* @__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(
|
|
1247
1349
|
"button",
|
|
1248
1350
|
{
|
|
1249
1351
|
className: `qt-tab ${activeTab === "tab1" ? "qt-tab-active" : ""}`,
|
|
@@ -1251,7 +1353,7 @@ var Tabs = () => {
|
|
|
1251
1353
|
children: "Account"
|
|
1252
1354
|
}
|
|
1253
1355
|
),
|
|
1254
|
-
/* @__PURE__ */
|
|
1356
|
+
/* @__PURE__ */ jsx12(
|
|
1255
1357
|
"button",
|
|
1256
1358
|
{
|
|
1257
1359
|
className: `qt-tab ${activeTab === "tab2" ? "qt-tab-active" : ""}`,
|
|
@@ -1259,7 +1361,7 @@ var Tabs = () => {
|
|
|
1259
1361
|
children: "Settings"
|
|
1260
1362
|
}
|
|
1261
1363
|
),
|
|
1262
|
-
/* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ jsx12(
|
|
1263
1365
|
"button",
|
|
1264
1366
|
{
|
|
1265
1367
|
className: `qt-tab ${activeTab === "tab3" ? "qt-tab-active" : ""}`,
|
|
@@ -1268,56 +1370,56 @@ var Tabs = () => {
|
|
|
1268
1370
|
}
|
|
1269
1371
|
)
|
|
1270
1372
|
] }),
|
|
1271
|
-
/* @__PURE__ */
|
|
1272
|
-
activeTab === "tab1" && /* @__PURE__ */
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
/* @__PURE__ */
|
|
1275
|
-
] }),
|
|
1276
|
-
activeTab === "tab2" && /* @__PURE__ */
|
|
1277
|
-
/* @__PURE__ */
|
|
1278
|
-
/* @__PURE__ */
|
|
1279
|
-
] }),
|
|
1280
|
-
activeTab === "tab3" && /* @__PURE__ */
|
|
1281
|
-
/* @__PURE__ */
|
|
1282
|
-
/* @__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." })
|
|
1283
1385
|
] })
|
|
1284
1386
|
] })
|
|
1285
1387
|
] }),
|
|
1286
|
-
/* @__PURE__ */
|
|
1287
|
-
/* @__PURE__ */
|
|
1288
|
-
/* @__PURE__ */
|
|
1289
|
-
/* @__PURE__ */
|
|
1290
|
-
/* @__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" }) }),
|
|
1291
1393
|
"Home"
|
|
1292
1394
|
] }),
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__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" }) }),
|
|
1295
1397
|
"Profile"
|
|
1296
1398
|
] }),
|
|
1297
|
-
/* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1299
|
-
/* @__PURE__ */
|
|
1300
|
-
/* @__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" })
|
|
1301
1403
|
] }),
|
|
1302
1404
|
"Settings"
|
|
1303
1405
|
] })
|
|
1304
1406
|
] })
|
|
1305
1407
|
] }),
|
|
1306
|
-
/* @__PURE__ */
|
|
1307
|
-
/* @__PURE__ */
|
|
1308
|
-
/* @__PURE__ */
|
|
1309
|
-
/* @__PURE__ */
|
|
1310
|
-
/* @__PURE__ */
|
|
1311
|
-
/* @__PURE__ */
|
|
1312
|
-
/* @__PURE__ */
|
|
1313
|
-
/* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1315
|
-
/* @__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" })
|
|
1316
1418
|
] })
|
|
1317
1419
|
] }),
|
|
1318
|
-
/* @__PURE__ */
|
|
1319
|
-
/* @__PURE__ */
|
|
1320
|
-
/* @__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" }) })
|
|
1321
1423
|
] })
|
|
1322
1424
|
] })
|
|
1323
1425
|
] })
|
|
@@ -1325,215 +1427,243 @@ var Tabs = () => {
|
|
|
1325
1427
|
};
|
|
1326
1428
|
|
|
1327
1429
|
// src/stories/components/Chat.tsx
|
|
1328
|
-
import { jsx as
|
|
1430
|
+
import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1329
1431
|
var Chat = () => {
|
|
1330
|
-
return /* @__PURE__ */
|
|
1331
|
-
/* @__PURE__ */
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
/* @__PURE__ */
|
|
1334
|
-
/* @__PURE__ */
|
|
1335
|
-
/* @__PURE__ */
|
|
1336
|
-
/* @__PURE__ */
|
|
1337
|
-
/* @__PURE__ */
|
|
1338
|
-
/* @__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" })
|
|
1339
1441
|
] }),
|
|
1340
|
-
/* @__PURE__ */
|
|
1442
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message-content", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How are you today?" }) })
|
|
1341
1443
|
] }) }),
|
|
1342
|
-
/* @__PURE__ */
|
|
1343
|
-
/* @__PURE__ */
|
|
1344
|
-
/* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
/* @__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" })
|
|
1348
1450
|
] }),
|
|
1349
|
-
/* @__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?" }) })
|
|
1350
1452
|
] })
|
|
1351
1453
|
] }),
|
|
1352
|
-
/* @__PURE__ */
|
|
1353
|
-
/* @__PURE__ */
|
|
1354
|
-
/* @__PURE__ */
|
|
1355
|
-
/* @__PURE__ */
|
|
1356
|
-
/* @__PURE__ */
|
|
1357
|
-
/* @__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" })
|
|
1358
1460
|
] }),
|
|
1359
|
-
/* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__PURE__ */
|
|
1362
|
-
/* @__PURE__ */
|
|
1363
|
-
/* @__PURE__ */
|
|
1364
|
-
/* @__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" })
|
|
1365
1467
|
] }),
|
|
1366
|
-
/* @__PURE__ */
|
|
1468
|
+
/* @__PURE__ */ jsx13("p", { style: { marginTop: "0.5rem" }, children: "Let me know if you'd like more details about any of these!" })
|
|
1367
1469
|
] }),
|
|
1368
|
-
/* @__PURE__ */
|
|
1369
|
-
/* @__PURE__ */
|
|
1370
|
-
/* @__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" }) }) })
|
|
1371
1473
|
] })
|
|
1372
1474
|
] })
|
|
1373
1475
|
] }),
|
|
1374
|
-
/* @__PURE__ */
|
|
1375
|
-
/* @__PURE__ */
|
|
1376
|
-
/* @__PURE__ */
|
|
1377
|
-
/* @__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!" }) })
|
|
1378
1480
|
] }) })
|
|
1379
1481
|
] })
|
|
1380
1482
|
] }),
|
|
1381
|
-
/* @__PURE__ */
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
/* @__PURE__ */
|
|
1387
|
-
/* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1389
|
-
/* @__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!" }) })
|
|
1390
1492
|
] })
|
|
1391
1493
|
] }),
|
|
1392
|
-
/* @__PURE__ */
|
|
1393
|
-
/* @__PURE__ */
|
|
1394
|
-
/* @__PURE__ */
|
|
1395
|
-
/* @__PURE__ */
|
|
1396
|
-
/* @__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..." }) })
|
|
1397
1499
|
] })
|
|
1398
1500
|
] })
|
|
1399
1501
|
] })
|
|
1400
1502
|
] }),
|
|
1401
|
-
/* @__PURE__ */
|
|
1402
|
-
/* @__PURE__ */
|
|
1403
|
-
/* @__PURE__ */
|
|
1404
|
-
/* @__PURE__ */
|
|
1405
|
-
/* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1409
|
-
/* @__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: [
|
|
1410
1512
|
'"Hello there!" ',
|
|
1411
|
-
/* @__PURE__ */
|
|
1513
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-narration", children: "she said with a warm smile, stepping forward to greet you." })
|
|
1412
1514
|
] }) })
|
|
1413
1515
|
] })
|
|
1414
1516
|
] }),
|
|
1415
|
-
/* @__PURE__ */
|
|
1416
|
-
/* @__PURE__ */
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
/* @__PURE__ */
|
|
1419
|
-
/* @__PURE__ */
|
|
1420
|
-
/* @__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." }),
|
|
1421
1523
|
" ",
|
|
1422
|
-
/* @__PURE__ */
|
|
1524
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-chat-inner-monologue", children: "I wonder if they noticed..." })
|
|
1423
1525
|
] }) })
|
|
1424
1526
|
] })
|
|
1425
1527
|
] }),
|
|
1426
|
-
/* @__PURE__ */
|
|
1427
|
-
/* @__PURE__ */
|
|
1428
|
-
/* @__PURE__ */
|
|
1429
|
-
/* @__PURE__ */
|
|
1430
|
-
/* @__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?))" }) }) })
|
|
1431
1533
|
] })
|
|
1432
1534
|
] })
|
|
1433
1535
|
] })
|
|
1434
1536
|
] }),
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
/* @__PURE__ */
|
|
1437
|
-
/* @__PURE__ */
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
/* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1441
|
-
/* @__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: "Roleplay-Template Styles" }),
|
|
1539
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Style classes a roleplay-template delimiter can be assigned: four high-contrast chips (each theme picks its own four hues) plus a semantic set. Add-on flourishes (bold, italic, reverse, underline, border, font) compose on top." }),
|
|
1540
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-message-content", style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "36rem" }, children: [
|
|
1541
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1542
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-1", children: "Style 1" }),
|
|
1543
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-2", children: "Style 2" }),
|
|
1544
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-3", children: "Style 3" }),
|
|
1545
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-4", children: "Style 4" })
|
|
1546
|
+
] }),
|
|
1547
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1548
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-danger", children: "Danger" }),
|
|
1549
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-warning", children: "Warning" }),
|
|
1550
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-success", children: "Success" }),
|
|
1551
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-info", children: "Info" }),
|
|
1552
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-muted", children: "Muted" }),
|
|
1553
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-code", children: "code" })
|
|
1554
|
+
] }),
|
|
1555
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
|
|
1556
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-2 qt-rp-bold", children: "Bold" }),
|
|
1557
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-3 qt-rp-italic", children: "Italic" }),
|
|
1558
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-1 qt-rp-reverse", children: "Reverse" }),
|
|
1559
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-4 qt-rp-underline-double", children: "Underline" }),
|
|
1560
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-info qt-rp-border-dashed", children: "Dashed border" }),
|
|
1561
|
+
/* @__PURE__ */ jsx13("span", { className: "qt-roleplay-muted qt-rp-font-serif", children: "Serif font" })
|
|
1562
|
+
] })
|
|
1563
|
+
] })
|
|
1564
|
+
] }),
|
|
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: "Whisper Messages" }),
|
|
1567
|
+
/* @__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." }),
|
|
1568
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1569
|
+
/* @__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: [
|
|
1570
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Elena" }),
|
|
1571
|
+
/* @__PURE__ */ jsx13("p", { children: "I don't trust the merchant. Meet me at the tavern tonight\u2014alone." })
|
|
1442
1572
|
] }) }),
|
|
1443
|
-
/* @__PURE__ */
|
|
1444
|
-
/* @__PURE__ */
|
|
1445
|
-
/* @__PURE__ */
|
|
1573
|
+
/* @__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: [
|
|
1574
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-whisper-label", children: "whispered to Marcus" }),
|
|
1575
|
+
/* @__PURE__ */ jsx13("p", { children: "Keep an eye on the door. We may need a quick exit." })
|
|
1446
1576
|
] }) })
|
|
1447
1577
|
] })
|
|
1448
1578
|
] }),
|
|
1449
|
-
/* @__PURE__ */
|
|
1450
|
-
/* @__PURE__ */
|
|
1451
|
-
/* @__PURE__ */
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
/* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1579
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1580
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Silent Messages" }),
|
|
1581
|
+
/* @__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." }),
|
|
1582
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1583
|
+
/* @__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: [
|
|
1584
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1585
|
+
/* @__PURE__ */ jsx13("p", { children: "*glances at the door, weighing whether to follow or stay behind*" })
|
|
1456
1586
|
] }) }),
|
|
1457
|
-
/* @__PURE__ */
|
|
1458
|
-
/* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1587
|
+
/* @__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: [
|
|
1588
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-silent-label", children: "silent \u2014 inner thoughts and actions only" }),
|
|
1589
|
+
/* @__PURE__ */ jsx13("p", { children: "*quietly pockets the letter before anyone notices, mind racing with questions about its contents*" })
|
|
1460
1590
|
] }) })
|
|
1461
1591
|
] })
|
|
1462
1592
|
] }),
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1467
|
-
/* @__PURE__ */
|
|
1468
|
-
/* @__PURE__ */
|
|
1469
|
-
/* @__PURE__ */
|
|
1470
|
-
/* @__PURE__ */
|
|
1471
|
-
/* @__PURE__ */
|
|
1593
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1594
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wardrobe Action Notices" }),
|
|
1595
|
+
/* @__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." }),
|
|
1596
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1597
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1598
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1599
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1600
|
+
/* @__PURE__ */ jsx13("div", { children: "Equipped \u201CCrimson Evening Gown\u201D in the top slot." }),
|
|
1601
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), Glass Slippers (footwear)" })
|
|
1472
1602
|
] })
|
|
1473
1603
|
] }),
|
|
1474
|
-
/* @__PURE__ */
|
|
1475
|
-
/* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1604
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1605
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1606
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1607
|
+
/* @__PURE__ */ jsx13("div", { children: "Removed item from the footwear slot." }),
|
|
1608
|
+
/* @__PURE__ */ jsx13("div", { children: "Wearing: Crimson Evening Gown (top, bottom), barefoot" })
|
|
1479
1609
|
] })
|
|
1480
1610
|
] }),
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1484
|
-
/* @__PURE__ */
|
|
1485
|
-
/* @__PURE__ */
|
|
1611
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-notice", children: [
|
|
1612
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-wardrobe-label", children: "Wardrobe" }),
|
|
1613
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-wardrobe-summary", children: [
|
|
1614
|
+
/* @__PURE__ */ jsx13("div", { children: "Gifted \u201CSilver Pocket Watch\u201D to Marcus." }),
|
|
1615
|
+
/* @__PURE__ */ jsx13("div", { children: "Marcus put it on immediately." })
|
|
1486
1616
|
] })
|
|
1487
1617
|
] })
|
|
1488
1618
|
] })
|
|
1489
1619
|
] }),
|
|
1490
|
-
/* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1492
|
-
/* @__PURE__ */
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1499
|
-
/* @__PURE__ */
|
|
1500
|
-
/* @__PURE__ */
|
|
1620
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1621
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Toolbar" }),
|
|
1622
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Formatting and action buttons for chat composition." }),
|
|
1623
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1624
|
+
/* @__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" }) }) }),
|
|
1625
|
+
/* @__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" }) }) }),
|
|
1626
|
+
/* @__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" }) }) }),
|
|
1627
|
+
/* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
|
|
1628
|
+
/* @__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: [
|
|
1629
|
+
/* @__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" }),
|
|
1630
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1501
1631
|
] }) })
|
|
1502
1632
|
] })
|
|
1503
1633
|
] }),
|
|
1504
|
-
/* @__PURE__ */
|
|
1505
|
-
/* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
1509
|
-
/* @__PURE__ */
|
|
1634
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1635
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "RP Annotation Buttons" }),
|
|
1636
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Quick-insert buttons for roleplay annotation types." }),
|
|
1637
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-rp-annotation-toolbar", style: { maxWidth: "32rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1638
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-narration", title: "Narration", children: [
|
|
1639
|
+
/* @__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" }) }),
|
|
1510
1640
|
"Narration"
|
|
1511
1641
|
] }),
|
|
1512
|
-
/* @__PURE__ */
|
|
1513
|
-
/* @__PURE__ */
|
|
1642
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-internal", title: "Inner Monologue", children: [
|
|
1643
|
+
/* @__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" }) }),
|
|
1514
1644
|
"Internal"
|
|
1515
1645
|
] }),
|
|
1516
|
-
/* @__PURE__ */
|
|
1517
|
-
/* @__PURE__ */
|
|
1646
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-rp-annotation-button-ooc", title: "Out of Character", children: [
|
|
1647
|
+
/* @__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" }) }),
|
|
1518
1648
|
"OOC"
|
|
1519
1649
|
] })
|
|
1520
1650
|
] })
|
|
1521
1651
|
] }),
|
|
1522
|
-
/* @__PURE__ */
|
|
1523
|
-
/* @__PURE__ */
|
|
1524
|
-
/* @__PURE__ */
|
|
1525
|
-
/* @__PURE__ */
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
/* @__PURE__ */
|
|
1528
|
-
/* @__PURE__ */
|
|
1529
|
-
/* @__PURE__ */
|
|
1652
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1653
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Attachments" }),
|
|
1654
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "File attachment chips and attachment button." }),
|
|
1655
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { maxWidth: "32rem" }, children: [
|
|
1656
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-list", style: { display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }, children: [
|
|
1657
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1658
|
+
/* @__PURE__ */ jsx13("span", { children: "document.pdf" }),
|
|
1659
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1530
1660
|
] }),
|
|
1531
|
-
/* @__PURE__ */
|
|
1532
|
-
/* @__PURE__ */
|
|
1533
|
-
/* @__PURE__ */
|
|
1661
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-attachment-chip", children: [
|
|
1662
|
+
/* @__PURE__ */ jsx13("span", { children: "image.png" }),
|
|
1663
|
+
/* @__PURE__ */ jsx13("button", { className: "ml-2 text-gray-400 hover:text-gray-600", style: { marginLeft: "0.5rem" }, children: "\xD7" })
|
|
1534
1664
|
] })
|
|
1535
1665
|
] }),
|
|
1536
|
-
/* @__PURE__ */
|
|
1666
|
+
/* @__PURE__ */ jsx13(
|
|
1537
1667
|
"textarea",
|
|
1538
1668
|
{
|
|
1539
1669
|
className: "qt-chat-composer-input",
|
|
@@ -1542,17 +1672,17 @@ var Chat = () => {
|
|
|
1542
1672
|
style: { width: "100%", padding: "0.5rem", marginBottom: "0.5rem" }
|
|
1543
1673
|
}
|
|
1544
1674
|
),
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1675
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer-actions", style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1676
|
+
/* @__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" }) }) }),
|
|
1677
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary", children: "Send" })
|
|
1548
1678
|
] })
|
|
1549
1679
|
] })
|
|
1550
1680
|
] }),
|
|
1551
|
-
/* @__PURE__ */
|
|
1552
|
-
/* @__PURE__ */
|
|
1553
|
-
/* @__PURE__ */
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
/* @__PURE__ */
|
|
1681
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1682
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Input" }),
|
|
1683
|
+
/* @__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: [
|
|
1684
|
+
/* @__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" }) }) }),
|
|
1685
|
+
/* @__PURE__ */ jsx13(
|
|
1556
1686
|
"textarea",
|
|
1557
1687
|
{
|
|
1558
1688
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1560,65 +1690,65 @@ var Chat = () => {
|
|
|
1560
1690
|
rows: 1
|
|
1561
1691
|
}
|
|
1562
1692
|
),
|
|
1563
|
-
/* @__PURE__ */
|
|
1693
|
+
/* @__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" }) }) })
|
|
1564
1694
|
] }) })
|
|
1565
1695
|
] }),
|
|
1566
|
-
/* @__PURE__ */
|
|
1567
|
-
/* @__PURE__ */
|
|
1568
|
-
/* @__PURE__ */
|
|
1569
|
-
/* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1572
|
-
/* @__PURE__ */
|
|
1573
|
-
/* @__PURE__ */
|
|
1696
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1697
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Typing Indicator" }),
|
|
1698
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem", maxWidth: "32rem" }, children: [
|
|
1699
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1700
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsxs13("div", { className: "qt-typing-indicator", children: [
|
|
1701
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1702
|
+
/* @__PURE__ */ jsx13("span", {}),
|
|
1703
|
+
/* @__PURE__ */ jsx13("span", {})
|
|
1574
1704
|
] }) })
|
|
1575
1705
|
] })
|
|
1576
1706
|
] }),
|
|
1577
|
-
/* @__PURE__ */
|
|
1578
|
-
/* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
/* @__PURE__ */
|
|
1581
|
-
/* @__PURE__ */
|
|
1582
|
-
/* @__PURE__ */
|
|
1583
|
-
/* @__PURE__ */
|
|
1584
|
-
/* @__PURE__ */
|
|
1707
|
+
/* @__PURE__ */ jsxs13("section", { style: { marginBottom: "2rem" }, children: [
|
|
1708
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Control Buttons" }),
|
|
1709
|
+
/* @__PURE__ */ jsx13("p", { style: { color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "Continue and stop buttons for controlling AI response generation." }),
|
|
1710
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "1rem", maxWidth: "32rem" }, children: [
|
|
1711
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-continue-button", children: [
|
|
1712
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1713
|
+
/* @__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" }),
|
|
1714
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
|
|
1585
1715
|
] }),
|
|
1586
1716
|
"Continue"
|
|
1587
1717
|
] }),
|
|
1588
|
-
/* @__PURE__ */
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1591
|
-
/* @__PURE__ */
|
|
1718
|
+
/* @__PURE__ */ jsxs13("button", { className: "qt-chat-stop-button", children: [
|
|
1719
|
+
/* @__PURE__ */ jsxs13("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
1720
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }),
|
|
1721
|
+
/* @__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" })
|
|
1592
1722
|
] }),
|
|
1593
1723
|
"Stop"
|
|
1594
1724
|
] })
|
|
1595
1725
|
] })
|
|
1596
1726
|
] }),
|
|
1597
|
-
/* @__PURE__ */
|
|
1598
|
-
/* @__PURE__ */
|
|
1599
|
-
/* @__PURE__ */
|
|
1600
|
-
/* @__PURE__ */
|
|
1601
|
-
/* @__PURE__ */
|
|
1602
|
-
/* @__PURE__ */
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
/* @__PURE__ */
|
|
1605
|
-
/* @__PURE__ */
|
|
1727
|
+
/* @__PURE__ */ jsxs13("section", { children: [
|
|
1728
|
+
/* @__PURE__ */ jsx13("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
1729
|
+
/* @__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: [
|
|
1730
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.75rem 1rem", borderBottom: "1px solid var(--color-border)" }, children: [
|
|
1731
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1732
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1733
|
+
/* @__PURE__ */ jsxs13("div", { children: [
|
|
1734
|
+
/* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: "Assistant" }),
|
|
1735
|
+
/* @__PURE__ */ jsx13("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Online" })
|
|
1606
1736
|
] })
|
|
1607
1737
|
] }),
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1738
|
+
/* @__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: [
|
|
1739
|
+
/* @__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" }),
|
|
1740
|
+
/* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
|
|
1611
1741
|
] }) }) })
|
|
1612
1742
|
] }),
|
|
1613
|
-
/* @__PURE__ */
|
|
1614
|
-
/* @__PURE__ */
|
|
1615
|
-
/* @__PURE__ */
|
|
1616
|
-
/* @__PURE__ */
|
|
1743
|
+
/* @__PURE__ */ jsxs13("div", { style: { flex: 1, overflow: "auto", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
1744
|
+
/* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1745
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx13("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
1746
|
+
/* @__PURE__ */ jsx13("div", { className: "qt-chat-message qt-chat-message-assistant", children: /* @__PURE__ */ jsx13("p", { children: "Hello! How can I help you today?" }) })
|
|
1617
1747
|
] }),
|
|
1618
|
-
/* @__PURE__ */
|
|
1748
|
+
/* @__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." }) }) })
|
|
1619
1749
|
] }),
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
/* @__PURE__ */
|
|
1750
|
+
/* @__PURE__ */ jsxs13("div", { className: "qt-chat-composer", style: { margin: "0.5rem", borderRadius: "var(--radius-lg)" }, children: [
|
|
1751
|
+
/* @__PURE__ */ jsx13(
|
|
1622
1752
|
"textarea",
|
|
1623
1753
|
{
|
|
1624
1754
|
className: "qt-chat-composer-input qt-input",
|
|
@@ -1626,7 +1756,7 @@ var Chat = () => {
|
|
|
1626
1756
|
rows: 1
|
|
1627
1757
|
}
|
|
1628
1758
|
),
|
|
1629
|
-
/* @__PURE__ */
|
|
1759
|
+
/* @__PURE__ */ jsx13("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Send" })
|
|
1630
1760
|
] })
|
|
1631
1761
|
] })
|
|
1632
1762
|
] })
|
|
@@ -1634,7 +1764,7 @@ var Chat = () => {
|
|
|
1634
1764
|
};
|
|
1635
1765
|
|
|
1636
1766
|
// src/stories/components/Terminal.tsx
|
|
1637
|
-
import { jsx as
|
|
1767
|
+
import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1638
1768
|
var sampleOutput = `$ git status
|
|
1639
1769
|
On branch main
|
|
1640
1770
|
Your branch is up to date with 'origin/main'.
|
|
@@ -1646,117 +1776,117 @@ $ npm run dev
|
|
|
1646
1776
|
- Local: http://localhost:3000
|
|
1647
1777
|
- ready started server on 0.0.0.0:3000`;
|
|
1648
1778
|
var Terminal = () => {
|
|
1649
|
-
return /* @__PURE__ */
|
|
1650
|
-
/* @__PURE__ */
|
|
1651
|
-
/* @__PURE__ */
|
|
1779
|
+
return /* @__PURE__ */ jsxs14("div", { style: { padding: "1.5rem" }, children: [
|
|
1780
|
+
/* @__PURE__ */ jsx14("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Terminal Components" }),
|
|
1781
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "1.5rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1652
1782
|
"The terminal carries its own identity. By default it stays dark in both light and dark themes \u2014 but a theme can override",
|
|
1653
1783
|
" ",
|
|
1654
|
-
/* @__PURE__ */
|
|
1784
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-bg" }),
|
|
1655
1785
|
", ",
|
|
1656
|
-
/* @__PURE__ */
|
|
1786
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-fg" }),
|
|
1657
1787
|
", and the",
|
|
1658
|
-
/* @__PURE__ */
|
|
1788
|
+
/* @__PURE__ */ jsx14("code", { children: "--qt-terminal-chrome-*" }),
|
|
1659
1789
|
" tokens to reskin every surface below."
|
|
1660
1790
|
] }),
|
|
1661
|
-
/* @__PURE__ */
|
|
1662
|
-
/* @__PURE__ */
|
|
1663
|
-
/* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1791
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1792
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "In-chat embed" }),
|
|
1793
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1794
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-embed" }),
|
|
1665
1795
|
" wraps the embed card; the header and footer strips inherit the surrounding theme so they nest cleanly with chat bubbles."
|
|
1666
1796
|
] }),
|
|
1667
|
-
/* @__PURE__ */
|
|
1668
|
-
/* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1671
|
-
/* @__PURE__ */
|
|
1672
|
-
/* @__PURE__ */
|
|
1797
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1798
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-header", children: [
|
|
1799
|
+
/* @__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" }) }),
|
|
1800
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
1801
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", children: "Pop out" }),
|
|
1802
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon qt-text-destructive", type: "button", children: "Kill" })
|
|
1673
1803
|
] })
|
|
1674
1804
|
] }),
|
|
1675
|
-
/* @__PURE__ */
|
|
1805
|
+
/* @__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 })
|
|
1676
1806
|
] })
|
|
1677
1807
|
] }),
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
/* @__PURE__ */
|
|
1680
|
-
/* @__PURE__ */
|
|
1681
|
-
/* @__PURE__ */
|
|
1682
|
-
/* @__PURE__ */
|
|
1683
|
-
/* @__PURE__ */
|
|
1684
|
-
/* @__PURE__ */
|
|
1808
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1809
|
+
/* @__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)" }),
|
|
1810
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed", style: { maxWidth: "36rem" }, children: [
|
|
1811
|
+
/* @__PURE__ */ jsx14("div", { className: "qt-terminal-embed-header", children: /* @__PURE__ */ jsx14("h4", { style: { fontSize: "0.875rem", fontWeight: 500, margin: 0 }, children: "Terminal \u2014 zsh" }) }),
|
|
1812
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-embed-footer", children: [
|
|
1813
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-text-secondary", children: "Showing in Terminal Mode pane." }),
|
|
1814
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-secondary", type: "button", style: { fontSize: "0.75rem", padding: "0.25rem 0.5rem" }, children: "Go to pane \u2192" })
|
|
1685
1815
|
] })
|
|
1686
1816
|
] })
|
|
1687
1817
|
] }),
|
|
1688
|
-
/* @__PURE__ */
|
|
1689
|
-
/* @__PURE__ */
|
|
1690
|
-
/* @__PURE__ */
|
|
1818
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
1819
|
+
/* @__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" }),
|
|
1820
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1691
1821
|
"The full-screen pop-out page uses",
|
|
1692
1822
|
" ",
|
|
1693
|
-
/* @__PURE__ */
|
|
1823
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-page" }),
|
|
1694
1824
|
" as the outer canvas and",
|
|
1695
1825
|
" ",
|
|
1696
|
-
/* @__PURE__ */
|
|
1826
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-popout-header" }),
|
|
1697
1827
|
" for the breadcrumb bar."
|
|
1698
1828
|
] }),
|
|
1699
|
-
/* @__PURE__ */
|
|
1700
|
-
/* @__PURE__ */
|
|
1701
|
-
/* @__PURE__ */
|
|
1702
|
-
/* @__PURE__ */
|
|
1703
|
-
/* @__PURE__ */
|
|
1704
|
-
/* @__PURE__ */
|
|
1705
|
-
/* @__PURE__ */
|
|
1829
|
+
/* @__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: [
|
|
1830
|
+
/* @__PURE__ */ jsxs14("div", { className: "qt-terminal-popout-header", children: [
|
|
1831
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
|
|
1832
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-icon", type: "button", style: { color: "inherit" }, children: "\u2190" }),
|
|
1833
|
+
/* @__PURE__ */ jsx14("a", { href: "#", className: "qt-terminal-popout-link", style: { fontSize: "0.875rem" }, children: "Chat" }),
|
|
1834
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-terminal-popout-separator", children: "/" }),
|
|
1835
|
+
/* @__PURE__ */ jsx14("h1", { className: "qt-terminal-popout-title", style: { fontSize: "1rem", margin: 0 }, children: "Terminal \u2014 zsh" })
|
|
1706
1836
|
] }),
|
|
1707
|
-
/* @__PURE__ */
|
|
1837
|
+
/* @__PURE__ */ jsx14("button", { className: "qt-button-destructive", type: "button", style: { fontSize: "0.875rem" }, children: "Kill Session" })
|
|
1708
1838
|
] }),
|
|
1709
|
-
/* @__PURE__ */
|
|
1839
|
+
/* @__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 })
|
|
1710
1840
|
] })
|
|
1711
1841
|
] }),
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__PURE__ */
|
|
1714
|
-
/* @__PURE__ */
|
|
1842
|
+
/* @__PURE__ */ jsxs14("section", { children: [
|
|
1843
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Session-exited overlay" }),
|
|
1844
|
+
/* @__PURE__ */ jsxs14("p", { style: { marginBottom: "0.75rem", fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: [
|
|
1715
1845
|
"When the PTY exits but the terminal stays mounted, the",
|
|
1716
1846
|
" ",
|
|
1717
|
-
/* @__PURE__ */
|
|
1847
|
+
/* @__PURE__ */ jsx14("code", { children: ".qt-terminal-closed-badge" }),
|
|
1718
1848
|
" overlay marks it."
|
|
1719
1849
|
] }),
|
|
1720
|
-
/* @__PURE__ */
|
|
1850
|
+
/* @__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" }) })
|
|
1721
1851
|
] })
|
|
1722
1852
|
] });
|
|
1723
1853
|
};
|
|
1724
1854
|
|
|
1725
1855
|
// src/stories/components/FilePreview.tsx
|
|
1726
|
-
import { jsx as
|
|
1856
|
+
import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1727
1857
|
var FilePreview = () => {
|
|
1728
|
-
return /* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
/* @__PURE__ */
|
|
1731
|
-
/* @__PURE__ */
|
|
1732
|
-
/* @__PURE__ */
|
|
1733
|
-
/* @__PURE__ */
|
|
1858
|
+
return /* @__PURE__ */ jsxs15("div", { style: { padding: "1.5rem" }, children: [
|
|
1859
|
+
/* @__PURE__ */ jsx15("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "File Preview Components" }),
|
|
1860
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1861
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Scroll Container" }),
|
|
1862
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1863
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-scroll" }),
|
|
1734
1864
|
" - Scrollable container for file content with configurable max height."
|
|
1735
1865
|
] }),
|
|
1736
|
-
/* @__PURE__ */
|
|
1866
|
+
/* @__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: [
|
|
1737
1867
|
"Line ",
|
|
1738
1868
|
i + 1,
|
|
1739
1869
|
": Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
|
1740
1870
|
] }, i)) }) })
|
|
1741
1871
|
] }),
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1744
|
-
/* @__PURE__ */
|
|
1745
|
-
/* @__PURE__ */
|
|
1872
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1873
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Content Panel" }),
|
|
1874
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1875
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-panel" }),
|
|
1746
1876
|
" - Background panel for rendered markdown content."
|
|
1747
1877
|
] }),
|
|
1748
|
-
/* @__PURE__ */
|
|
1749
|
-
/* @__PURE__ */
|
|
1750
|
-
/* @__PURE__ */
|
|
1878
|
+
/* @__PURE__ */ jsxs15("div", { className: "qt-file-preview-panel", children: [
|
|
1879
|
+
/* @__PURE__ */ jsx15("h4", { style: { margin: "0 0 0.5rem 0" }, children: "Document Title" }),
|
|
1880
|
+
/* @__PURE__ */ jsx15("p", { style: { margin: 0 }, children: "This is a content panel used for displaying rendered markdown files with a subtle background." })
|
|
1751
1881
|
] })
|
|
1752
1882
|
] }),
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__PURE__ */
|
|
1755
|
-
/* @__PURE__ */
|
|
1756
|
-
/* @__PURE__ */
|
|
1883
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1884
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Code Block" }),
|
|
1885
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1886
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-code" }),
|
|
1757
1887
|
" - Styled code block for plain text and source files with word wrap."
|
|
1758
1888
|
] }),
|
|
1759
|
-
/* @__PURE__ */
|
|
1889
|
+
/* @__PURE__ */ jsx15("pre", { className: "qt-file-preview-code", children: `function greet(name: string): string {
|
|
1760
1890
|
return \`Hello, \${name}!\`;
|
|
1761
1891
|
}
|
|
1762
1892
|
|
|
@@ -1764,133 +1894,133 @@ var FilePreview = () => {
|
|
|
1764
1894
|
const message = greet("World");
|
|
1765
1895
|
console.log(message);` })
|
|
1766
1896
|
] }),
|
|
1767
|
-
/* @__PURE__ */
|
|
1768
|
-
/* @__PURE__ */
|
|
1769
|
-
/* @__PURE__ */
|
|
1770
|
-
/* @__PURE__ */
|
|
1897
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1898
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading State" }),
|
|
1899
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1900
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading" }),
|
|
1771
1901
|
" + ",
|
|
1772
|
-
/* @__PURE__ */
|
|
1902
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-loading-text" }),
|
|
1773
1903
|
" - Loading indicator."
|
|
1774
1904
|
] }),
|
|
1775
|
-
/* @__PURE__ */
|
|
1905
|
+
/* @__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..." }) }) })
|
|
1776
1906
|
] }),
|
|
1777
|
-
/* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1780
|
-
/* @__PURE__ */
|
|
1907
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1908
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Empty / Error State" }),
|
|
1909
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1910
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty" }),
|
|
1781
1911
|
" + ",
|
|
1782
|
-
/* @__PURE__ */
|
|
1912
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-file-preview-empty-icon" }),
|
|
1783
1913
|
" - Empty or error state display."
|
|
1784
1914
|
] }),
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
/* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
/* @__PURE__ */
|
|
1915
|
+
/* @__PURE__ */ jsxs15("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1rem" }, children: [
|
|
1916
|
+
/* @__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: [
|
|
1917
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u{1F4C4}" }),
|
|
1918
|
+
/* @__PURE__ */ jsx15("p", { children: "No content available" })
|
|
1789
1919
|
] }) }),
|
|
1790
|
-
/* @__PURE__ */
|
|
1791
|
-
/* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1920
|
+
/* @__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: [
|
|
1921
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-empty-icon", children: "\u26A0\uFE0F" }),
|
|
1922
|
+
/* @__PURE__ */ jsx15("p", { children: "Failed to load file" })
|
|
1793
1923
|
] }) })
|
|
1794
1924
|
] })
|
|
1795
1925
|
] }),
|
|
1796
|
-
/* @__PURE__ */
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
/* @__PURE__ */
|
|
1799
|
-
/* @__PURE__ */
|
|
1926
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1927
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Wikilinks" }),
|
|
1928
|
+
/* @__PURE__ */ jsxs15("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: [
|
|
1929
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink" }),
|
|
1800
1930
|
" + ",
|
|
1801
|
-
/* @__PURE__ */
|
|
1931
|
+
/* @__PURE__ */ jsx15("code", { children: ".qt-wikilink-broken" }),
|
|
1802
1932
|
" - Internal document links in markdown."
|
|
1803
1933
|
] }),
|
|
1804
|
-
/* @__PURE__ */
|
|
1934
|
+
/* @__PURE__ */ jsx15("div", { className: "qt-file-preview-panel", children: /* @__PURE__ */ jsxs15("p", { style: { margin: 0, lineHeight: 2 }, children: [
|
|
1805
1935
|
"This document references ",
|
|
1806
|
-
/* @__PURE__ */
|
|
1936
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "Character Profile" }),
|
|
1807
1937
|
" and links to ",
|
|
1808
|
-
/* @__PURE__ */
|
|
1938
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink", children: "World Building \u2192 Geography" }),
|
|
1809
1939
|
". There's also a ",
|
|
1810
|
-
/* @__PURE__ */
|
|
1940
|
+
/* @__PURE__ */ jsx15("button", { type: "button", className: "qt-wikilink-broken", children: "Missing Document" }),
|
|
1811
1941
|
" that doesn't exist yet."
|
|
1812
1942
|
] }) })
|
|
1813
1943
|
] }),
|
|
1814
|
-
/* @__PURE__ */
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1944
|
+
/* @__PURE__ */ jsxs15("section", { style: { marginBottom: "2rem" }, children: [
|
|
1945
|
+
/* @__PURE__ */ jsx15("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "CSS Variables" }),
|
|
1946
|
+
/* @__PURE__ */ jsx15("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "0.5rem" }, children: [
|
|
1817
1947
|
{ name: "--qt-file-preview-max-height", value: "70vh", desc: "Max height of scroll container" },
|
|
1818
1948
|
{ name: "--qt-file-preview-min-height", value: "300px", desc: "Min height of loading/empty states" },
|
|
1819
1949
|
{ name: "--qt-file-preview-panel-bg", value: "muted/30%", desc: "Content panel background" },
|
|
1820
1950
|
{ name: "--qt-code-bg", value: "muted", desc: "Code block background" },
|
|
1821
1951
|
{ name: "--qt-code-fg", value: "foreground", desc: "Code block text color" },
|
|
1822
1952
|
{ name: "--qt-code-font", value: "monospace", desc: "Code block font family" }
|
|
1823
|
-
].map(({ name, value, desc }) => /* @__PURE__ */
|
|
1824
|
-
/* @__PURE__ */
|
|
1825
|
-
/* @__PURE__ */
|
|
1953
|
+
].map(({ name, value, desc }) => /* @__PURE__ */ jsxs15("div", { style: { padding: "0.75rem", background: "var(--color-muted)", borderRadius: "var(--radius-md)" }, children: [
|
|
1954
|
+
/* @__PURE__ */ jsx15("code", { style: { fontSize: "0.75rem", fontWeight: 600 }, children: name }),
|
|
1955
|
+
/* @__PURE__ */ jsxs15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.25rem" }, children: [
|
|
1826
1956
|
"Default: ",
|
|
1827
1957
|
value
|
|
1828
1958
|
] }),
|
|
1829
|
-
/* @__PURE__ */
|
|
1959
|
+
/* @__PURE__ */ jsx15("div", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)" }, children: desc })
|
|
1830
1960
|
] }, name)) })
|
|
1831
1961
|
] })
|
|
1832
1962
|
] });
|
|
1833
1963
|
};
|
|
1834
1964
|
|
|
1835
1965
|
// src/stories/components/ThemeComparison.tsx
|
|
1836
|
-
import { jsx as
|
|
1966
|
+
import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1837
1967
|
var ThemePanel = ({ title, description }) => {
|
|
1838
|
-
return /* @__PURE__ */
|
|
1839
|
-
/* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
/* @__PURE__ */
|
|
1842
|
-
] }),
|
|
1843
|
-
/* @__PURE__ */
|
|
1844
|
-
/* @__PURE__ */
|
|
1845
|
-
/* @__PURE__ */
|
|
1846
|
-
/* @__PURE__ */
|
|
1968
|
+
return /* @__PURE__ */ jsxs16("div", { style: { flex: 1, minWidth: "20rem" }, children: [
|
|
1969
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1rem" }, children: [
|
|
1970
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontWeight: 600 }, children: title }),
|
|
1971
|
+
/* @__PURE__ */ jsx16("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)" }, children: description })
|
|
1972
|
+
] }),
|
|
1973
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card", style: { marginBottom: "1rem" }, children: [
|
|
1974
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-header", children: [
|
|
1975
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Sample Card" }),
|
|
1976
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "This is how cards look in this theme." })
|
|
1847
1977
|
] }),
|
|
1848
|
-
/* @__PURE__ */
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
/* @__PURE__ */
|
|
1978
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-body", children: [
|
|
1979
|
+
/* @__PURE__ */ jsx16("p", { style: { marginBottom: "1rem" }, children: "Cards are used throughout the application for grouping content." }),
|
|
1980
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1981
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
1982
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
1983
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" })
|
|
1854
1984
|
] })
|
|
1855
1985
|
] }),
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1986
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-card-footer", children: [
|
|
1987
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Cancel" }),
|
|
1988
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Save" })
|
|
1859
1989
|
] })
|
|
1860
1990
|
] }),
|
|
1861
|
-
/* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
1864
|
-
/* @__PURE__ */
|
|
1991
|
+
/* @__PURE__ */ jsxs16("div", { className: "qt-panel", style: { padding: "1rem", marginBottom: "1rem" }, children: [
|
|
1992
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1993
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Text Input" }),
|
|
1994
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Enter text..." })
|
|
1865
1995
|
] }),
|
|
1866
|
-
/* @__PURE__ */
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
/* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1996
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "0.75rem" }, children: [
|
|
1997
|
+
/* @__PURE__ */ jsx16("label", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem", fontWeight: 500 }, children: "Select" }),
|
|
1998
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", children: [
|
|
1999
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
2000
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1871
2001
|
] })
|
|
1872
2002
|
] }),
|
|
1873
|
-
/* @__PURE__ */
|
|
1874
|
-
/* @__PURE__ */
|
|
1875
|
-
/* @__PURE__ */
|
|
2003
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
2004
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary qt-button-sm", children: "Secondary" }),
|
|
2005
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary qt-button-sm", children: "Primary" })
|
|
1876
2006
|
] })
|
|
1877
2007
|
] }),
|
|
1878
|
-
/* @__PURE__ */
|
|
1879
|
-
/* @__PURE__ */
|
|
1880
|
-
/* @__PURE__ */
|
|
1881
|
-
/* @__PURE__ */
|
|
2008
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2009
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "0.5rem" }, children: [
|
|
2010
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar qt-avatar-sm", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "AI" }) }),
|
|
2011
|
+
/* @__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." }) })
|
|
1882
2012
|
] }),
|
|
1883
|
-
/* @__PURE__ */
|
|
2013
|
+
/* @__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!" }) }) })
|
|
1884
2014
|
] })
|
|
1885
2015
|
] });
|
|
1886
2016
|
};
|
|
1887
2017
|
var ThemeComparison = () => {
|
|
1888
|
-
return /* @__PURE__ */
|
|
1889
|
-
/* @__PURE__ */
|
|
1890
|
-
/* @__PURE__ */
|
|
1891
|
-
/* @__PURE__ */
|
|
1892
|
-
/* @__PURE__ */
|
|
1893
|
-
/* @__PURE__ */
|
|
2018
|
+
return /* @__PURE__ */ jsxs16("div", { style: { padding: "1.5rem" }, children: [
|
|
2019
|
+
/* @__PURE__ */ jsx16("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: "Theme Comparison" }),
|
|
2020
|
+
/* @__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." }),
|
|
2021
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2022
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Current Theme Preview" }),
|
|
2023
|
+
/* @__PURE__ */ jsx16(
|
|
1894
2024
|
ThemePanel,
|
|
1895
2025
|
{
|
|
1896
2026
|
title: "Active Theme",
|
|
@@ -1898,9 +2028,9 @@ var ThemeComparison = () => {
|
|
|
1898
2028
|
}
|
|
1899
2029
|
)
|
|
1900
2030
|
] }),
|
|
1901
|
-
/* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
1903
|
-
/* @__PURE__ */
|
|
2031
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2032
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Key Theme Colors" }),
|
|
2033
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1904
2034
|
{ name: "Background", var: "--color-background" },
|
|
1905
2035
|
{ name: "Foreground", var: "--color-foreground" },
|
|
1906
2036
|
{ name: "Card", var: "--color-card" },
|
|
@@ -1909,8 +2039,8 @@ var ThemeComparison = () => {
|
|
|
1909
2039
|
{ name: "Muted", var: "--color-muted" },
|
|
1910
2040
|
{ name: "Accent", var: "--color-accent" },
|
|
1911
2041
|
{ name: "Border", var: "--color-border" }
|
|
1912
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1913
|
-
/* @__PURE__ */
|
|
2042
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2043
|
+
/* @__PURE__ */ jsx16(
|
|
1914
2044
|
"div",
|
|
1915
2045
|
{
|
|
1916
2046
|
style: {
|
|
@@ -1922,17 +2052,17 @@ var ThemeComparison = () => {
|
|
|
1922
2052
|
}
|
|
1923
2053
|
}
|
|
1924
2054
|
),
|
|
1925
|
-
/* @__PURE__ */
|
|
2055
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1926
2056
|
] }, cssVar)) })
|
|
1927
2057
|
] }),
|
|
1928
|
-
/* @__PURE__ */
|
|
1929
|
-
/* @__PURE__ */
|
|
1930
|
-
/* @__PURE__ */
|
|
2058
|
+
/* @__PURE__ */ jsxs16("section", { style: { marginBottom: "2rem" }, children: [
|
|
2059
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Semantic Colors" }),
|
|
2060
|
+
/* @__PURE__ */ jsx16("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))", gap: "0.75rem" }, children: [
|
|
1931
2061
|
{ name: "Destructive", var: "--color-destructive" },
|
|
1932
2062
|
{ name: "Success", var: "--color-success" },
|
|
1933
2063
|
{ name: "Warning", var: "--color-warning" }
|
|
1934
|
-
].map(({ name, var: cssVar }) => /* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
2064
|
+
].map(({ name, var: cssVar }) => /* @__PURE__ */ jsxs16("div", { style: { textAlign: "center" }, children: [
|
|
2065
|
+
/* @__PURE__ */ jsx16(
|
|
1936
2066
|
"div",
|
|
1937
2067
|
{
|
|
1938
2068
|
style: {
|
|
@@ -1944,50 +2074,50 @@ var ThemeComparison = () => {
|
|
|
1944
2074
|
}
|
|
1945
2075
|
}
|
|
1946
2076
|
),
|
|
1947
|
-
/* @__PURE__ */
|
|
2077
|
+
/* @__PURE__ */ jsx16("div", { style: { marginTop: "0.25rem", fontSize: "0.75rem", fontWeight: 500 }, children: name })
|
|
1948
2078
|
] }, cssVar)) })
|
|
1949
2079
|
] }),
|
|
1950
|
-
/* @__PURE__ */
|
|
1951
|
-
/* @__PURE__ */
|
|
1952
|
-
/* @__PURE__ */
|
|
1953
|
-
/* @__PURE__ */
|
|
1954
|
-
/* @__PURE__ */
|
|
1955
|
-
/* @__PURE__ */
|
|
1956
|
-
/* @__PURE__ */
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
2080
|
+
/* @__PURE__ */ jsxs16("section", { children: [
|
|
2081
|
+
/* @__PURE__ */ jsx16("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Component Showcase" }),
|
|
2082
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2083
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Buttons" }),
|
|
2084
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2085
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", children: "Primary" }),
|
|
2086
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-secondary", children: "Secondary" }),
|
|
2087
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-ghost", children: "Ghost" }),
|
|
2088
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-destructive", children: "Destructive" }),
|
|
2089
|
+
/* @__PURE__ */ jsx16("button", { className: "qt-button qt-button-primary", disabled: true, children: "Disabled" })
|
|
1960
2090
|
] })
|
|
1961
2091
|
] }),
|
|
1962
|
-
/* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
1964
|
-
/* @__PURE__ */
|
|
1965
|
-
/* @__PURE__ */
|
|
1966
|
-
/* @__PURE__ */
|
|
1967
|
-
/* @__PURE__ */
|
|
1968
|
-
/* @__PURE__ */
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
2092
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2093
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Badges" }),
|
|
2094
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
|
|
2095
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-default", children: "Default" }),
|
|
2096
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-primary", children: "Primary" }),
|
|
2097
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-secondary", children: "Secondary" }),
|
|
2098
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-success", children: "Success" }),
|
|
2099
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-warning", children: "Warning" }),
|
|
2100
|
+
/* @__PURE__ */ jsx16("span", { className: "qt-badge qt-badge-destructive", children: "Destructive" })
|
|
1971
2101
|
] })
|
|
1972
2102
|
] }),
|
|
1973
|
-
/* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
1975
|
-
/* @__PURE__ */
|
|
1976
|
-
/* @__PURE__ */
|
|
1977
|
-
/* @__PURE__ */
|
|
1978
|
-
/* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
2103
|
+
/* @__PURE__ */ jsxs16("div", { style: { marginBottom: "1.5rem" }, children: [
|
|
2104
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Interactive Card" }),
|
|
2105
|
+
/* @__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: [
|
|
2106
|
+
/* @__PURE__ */ jsx16("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx16("div", { className: "qt-avatar-fallback", children: "A" }) }),
|
|
2107
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2108
|
+
/* @__PURE__ */ jsx16("h5", { className: "qt-card-title", children: "Character Name" }),
|
|
2109
|
+
/* @__PURE__ */ jsx16("p", { className: "qt-card-description", children: "Click to interact" })
|
|
1980
2110
|
] })
|
|
1981
2111
|
] }) }) })
|
|
1982
2112
|
] }),
|
|
1983
|
-
/* @__PURE__ */
|
|
1984
|
-
/* @__PURE__ */
|
|
1985
|
-
/* @__PURE__ */
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
1989
|
-
/* @__PURE__ */
|
|
1990
|
-
/* @__PURE__ */
|
|
2113
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
2114
|
+
/* @__PURE__ */ jsx16("h4", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "var(--color-muted-foreground)" }, children: "Form Elements" }),
|
|
2115
|
+
/* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap", maxWidth: "32rem" }, children: [
|
|
2116
|
+
/* @__PURE__ */ jsx16("input", { className: "qt-input", type: "text", placeholder: "Text input", style: { flex: "1 1 10rem" } }),
|
|
2117
|
+
/* @__PURE__ */ jsxs16("select", { className: "qt-input qt-select", style: { flex: "1 1 10rem" }, children: [
|
|
2118
|
+
/* @__PURE__ */ jsx16("option", { children: "Select option" }),
|
|
2119
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 1" }),
|
|
2120
|
+
/* @__PURE__ */ jsx16("option", { children: "Option 2" })
|
|
1991
2121
|
] })
|
|
1992
2122
|
] })
|
|
1993
2123
|
] })
|
|
@@ -1996,125 +2126,125 @@ var ThemeComparison = () => {
|
|
|
1996
2126
|
};
|
|
1997
2127
|
|
|
1998
2128
|
// src/stories/components/EmptyState.tsx
|
|
1999
|
-
import { jsx as
|
|
2129
|
+
import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2000
2130
|
var EmptyState = () => {
|
|
2001
|
-
return /* @__PURE__ */
|
|
2002
|
-
/* @__PURE__ */
|
|
2003
|
-
/* @__PURE__ */
|
|
2004
|
-
/* @__PURE__ */
|
|
2005
|
-
/* @__PURE__ */
|
|
2006
|
-
/* @__PURE__ */
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2131
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "1.5rem" }, children: [
|
|
2132
|
+
/* @__PURE__ */ jsx17("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Empty States" }),
|
|
2133
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2134
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Basic Empty State" }),
|
|
2135
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2136
|
+
/* @__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" }) }) }),
|
|
2137
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No messages yet" }),
|
|
2138
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Start a conversation to see messages appear here." })
|
|
2009
2139
|
] })
|
|
2010
2140
|
] }),
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
/* @__PURE__ */
|
|
2014
|
-
/* @__PURE__ */
|
|
2015
|
-
/* @__PURE__ */
|
|
2016
|
-
/* @__PURE__ */
|
|
2017
|
-
/* @__PURE__ */
|
|
2141
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2142
|
+
/* @__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" }),
|
|
2143
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2144
|
+
/* @__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" }) }) }),
|
|
2145
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No characters" }),
|
|
2146
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "You haven't created any characters yet. Create your first character to get started." }),
|
|
2147
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Create Character" }) })
|
|
2018
2148
|
] })
|
|
2019
2149
|
] }),
|
|
2020
|
-
/* @__PURE__ */
|
|
2021
|
-
/* @__PURE__ */
|
|
2022
|
-
/* @__PURE__ */
|
|
2023
|
-
/* @__PURE__ */
|
|
2024
|
-
/* @__PURE__ */
|
|
2025
|
-
/* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2150
|
+
/* @__PURE__ */ jsxs17("section", { style: { marginBottom: "2rem" }, children: [
|
|
2151
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Search Empty State" }),
|
|
2152
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2153
|
+
/* @__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" }) }) }),
|
|
2154
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "No results found" }),
|
|
2155
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "Try adjusting your search or filters to find what you're looking for." }),
|
|
2156
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-secondary", children: "Clear Filters" }) })
|
|
2027
2157
|
] })
|
|
2028
2158
|
] }),
|
|
2029
|
-
/* @__PURE__ */
|
|
2030
|
-
/* @__PURE__ */
|
|
2031
|
-
/* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
/* @__PURE__ */
|
|
2034
|
-
/* @__PURE__ */
|
|
2035
|
-
/* @__PURE__ */
|
|
2159
|
+
/* @__PURE__ */ jsxs17("section", { children: [
|
|
2160
|
+
/* @__PURE__ */ jsx17("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Error Empty State" }),
|
|
2161
|
+
/* @__PURE__ */ jsxs17("div", { className: "qt-empty-state", children: [
|
|
2162
|
+
/* @__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" }) }) }),
|
|
2163
|
+
/* @__PURE__ */ jsx17("h4", { className: "qt-empty-state-title", children: "Something went wrong" }),
|
|
2164
|
+
/* @__PURE__ */ jsx17("p", { className: "qt-empty-state-description", children: "We couldn't load the content. Please try again." }),
|
|
2165
|
+
/* @__PURE__ */ jsx17("div", { className: "qt-empty-state-action", children: /* @__PURE__ */ jsx17("button", { className: "qt-button qt-button-primary", children: "Try Again" }) })
|
|
2036
2166
|
] })
|
|
2037
2167
|
] })
|
|
2038
2168
|
] });
|
|
2039
2169
|
};
|
|
2040
2170
|
|
|
2041
2171
|
// src/stories/components/Loading.tsx
|
|
2042
|
-
import { jsx as
|
|
2172
|
+
import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2043
2173
|
var Loading = () => {
|
|
2044
|
-
return /* @__PURE__ */
|
|
2045
|
-
/* @__PURE__ */
|
|
2046
|
-
/* @__PURE__ */
|
|
2047
|
-
/* @__PURE__ */
|
|
2048
|
-
/* @__PURE__ */
|
|
2049
|
-
/* @__PURE__ */
|
|
2050
|
-
/* @__PURE__ */
|
|
2051
|
-
/* @__PURE__ */
|
|
2052
|
-
] }),
|
|
2053
|
-
/* @__PURE__ */
|
|
2054
|
-
/* @__PURE__ */
|
|
2055
|
-
/* @__PURE__ */
|
|
2056
|
-
] }),
|
|
2057
|
-
/* @__PURE__ */
|
|
2058
|
-
/* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2174
|
+
return /* @__PURE__ */ jsxs18("div", { style: { padding: "1.5rem" }, children: [
|
|
2175
|
+
/* @__PURE__ */ jsx18("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Loading States" }),
|
|
2176
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2177
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Spinners" }),
|
|
2178
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "2rem", alignItems: "center" }, children: [
|
|
2179
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2180
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm", style: { margin: "0 auto" } }),
|
|
2181
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Small" })
|
|
2182
|
+
] }),
|
|
2183
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2184
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner", style: { margin: "0 auto" } }),
|
|
2185
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Default" })
|
|
2186
|
+
] }),
|
|
2187
|
+
/* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
|
|
2188
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-lg", style: { margin: "0 auto" } }),
|
|
2189
|
+
/* @__PURE__ */ jsx18("p", { style: { fontSize: "0.75rem", marginTop: "0.5rem" }, children: "Large" })
|
|
2060
2190
|
] })
|
|
2061
2191
|
] })
|
|
2062
2192
|
] }),
|
|
2063
|
-
/* @__PURE__ */
|
|
2064
|
-
/* @__PURE__ */
|
|
2065
|
-
/* @__PURE__ */
|
|
2066
|
-
/* @__PURE__ */
|
|
2067
|
-
/* @__PURE__ */
|
|
2068
|
-
/* @__PURE__ */
|
|
2193
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2194
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Text" }),
|
|
2195
|
+
/* @__PURE__ */ jsxs18("div", { style: { maxWidth: "28rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2196
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "100%" } }),
|
|
2197
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "80%" } }),
|
|
2198
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2069
2199
|
] })
|
|
2070
2200
|
] }),
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2075
|
-
/* @__PURE__ */
|
|
2076
|
-
/* @__PURE__ */
|
|
2077
|
-
/* @__PURE__ */
|
|
2078
|
-
/* @__PURE__ */
|
|
2201
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2202
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Card" }),
|
|
2203
|
+
/* @__PURE__ */ jsxs18("div", { className: "qt-card", style: { maxWidth: "24rem", padding: "1rem" }, children: [
|
|
2204
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "flex-start" }, children: [
|
|
2205
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "40px", height: "40px", flexShrink: 0 } }),
|
|
2206
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2207
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } }),
|
|
2208
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "40%" } })
|
|
2079
2209
|
] })
|
|
2080
2210
|
] }),
|
|
2081
|
-
/* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2083
|
-
/* @__PURE__ */
|
|
2084
|
-
/* @__PURE__ */
|
|
2211
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2212
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2213
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2214
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "75%" } })
|
|
2085
2215
|
] })
|
|
2086
2216
|
] })
|
|
2087
2217
|
] }),
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
/* @__PURE__ */
|
|
2090
|
-
/* @__PURE__ */
|
|
2091
|
-
/* @__PURE__ */
|
|
2092
|
-
/* @__PURE__ */
|
|
2093
|
-
/* @__PURE__ */
|
|
2094
|
-
/* @__PURE__ */
|
|
2095
|
-
/* @__PURE__ */
|
|
2096
|
-
/* @__PURE__ */
|
|
2097
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2219
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton Message" }),
|
|
2220
|
+
/* @__PURE__ */ jsx18("div", { style: { maxWidth: "42rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "0.75rem" }, children: [
|
|
2221
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2222
|
+
/* @__PURE__ */ jsxs18("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2223
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "120px" } }),
|
|
2224
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-card", style: { padding: "1rem" }, children: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2225
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2226
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text" }),
|
|
2227
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "60%" } })
|
|
2098
2228
|
] }) })
|
|
2099
2229
|
] })
|
|
2100
2230
|
] }) })
|
|
2101
2231
|
] }),
|
|
2102
|
-
/* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2105
|
-
/* @__PURE__ */
|
|
2106
|
-
/* @__PURE__ */
|
|
2232
|
+
/* @__PURE__ */ jsxs18("section", { style: { marginBottom: "2rem" }, children: [
|
|
2233
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Skeleton List" }),
|
|
2234
|
+
/* @__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: [
|
|
2235
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-circle", style: { width: "32px", height: "32px", flexShrink: 0 } }),
|
|
2236
|
+
/* @__PURE__ */ jsx18("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx18("div", { className: "qt-skeleton qt-skeleton-text", style: { width: "70%" } }) })
|
|
2107
2237
|
] }, i)) })
|
|
2108
2238
|
] }),
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
/* @__PURE__ */
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2239
|
+
/* @__PURE__ */ jsxs18("section", { children: [
|
|
2240
|
+
/* @__PURE__ */ jsx18("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Loading Button" }),
|
|
2241
|
+
/* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2242
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-primary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2243
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2114
2244
|
"Loading..."
|
|
2115
2245
|
] }),
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
/* @__PURE__ */
|
|
2246
|
+
/* @__PURE__ */ jsxs18("button", { className: "qt-button qt-button-secondary", disabled: true, style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2247
|
+
/* @__PURE__ */ jsx18("div", { className: "qt-spinner qt-spinner-sm" }),
|
|
2118
2248
|
"Saving..."
|
|
2119
2249
|
] })
|
|
2120
2250
|
] })
|
|
@@ -2123,130 +2253,130 @@ var Loading = () => {
|
|
|
2123
2253
|
};
|
|
2124
2254
|
|
|
2125
2255
|
// src/stories/components/Participant.tsx
|
|
2126
|
-
import { jsx as
|
|
2256
|
+
import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2127
2257
|
var Participant = () => {
|
|
2128
|
-
return /* @__PURE__ */
|
|
2129
|
-
/* @__PURE__ */
|
|
2130
|
-
/* @__PURE__ */
|
|
2131
|
-
/* @__PURE__ */
|
|
2132
|
-
/* @__PURE__ */
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
/* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2137
|
-
/* @__PURE__ */
|
|
2258
|
+
return /* @__PURE__ */ jsxs19("div", { style: { padding: "1.5rem" }, children: [
|
|
2259
|
+
/* @__PURE__ */ jsx19("h2", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "1.5rem" }, children: "Participants" }),
|
|
2260
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2261
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Cards" }),
|
|
2262
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2263
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2264
|
+
/* @__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" }) }) }),
|
|
2265
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2266
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2267
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" })
|
|
2138
2268
|
] })
|
|
2139
2269
|
] }) }),
|
|
2140
|
-
/* @__PURE__ */
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2144
|
-
/* @__PURE__ */
|
|
2270
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2271
|
+
/* @__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" }) }) }),
|
|
2272
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2273
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2274
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2145
2275
|
] })
|
|
2146
2276
|
] }) }),
|
|
2147
|
-
/* @__PURE__ */
|
|
2148
|
-
/* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2150
|
-
/* @__PURE__ */
|
|
2151
|
-
/* @__PURE__ */
|
|
2277
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2278
|
+
/* @__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" }) }) }),
|
|
2279
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2280
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2281
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2152
2282
|
] })
|
|
2153
2283
|
] }) })
|
|
2154
2284
|
] })
|
|
2155
2285
|
] }),
|
|
2156
|
-
/* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2159
|
-
/* @__PURE__ */
|
|
2160
|
-
/* @__PURE__ */
|
|
2161
|
-
/* @__PURE__ */
|
|
2162
|
-
/* @__PURE__ */
|
|
2163
|
-
/* @__PURE__ */
|
|
2164
|
-
/* @__PURE__ */
|
|
2286
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2287
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Participant Status States" }),
|
|
2288
|
+
/* @__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." }),
|
|
2289
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2290
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2291
|
+
/* @__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" }) }) }),
|
|
2292
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2293
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2294
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Currently Speaking" })
|
|
2165
2295
|
] })
|
|
2166
2296
|
] }) }),
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
/* @__PURE__ */
|
|
2169
|
-
/* @__PURE__ */
|
|
2170
|
-
/* @__PURE__ */
|
|
2297
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-silent", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2298
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2299
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "BC" }) }),
|
|
2300
|
+
/* @__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" }) }) })
|
|
2171
2301
|
] }),
|
|
2172
|
-
/* @__PURE__ */
|
|
2173
|
-
/* @__PURE__ */
|
|
2174
|
-
/* @__PURE__ */
|
|
2175
|
-
/* @__PURE__ */
|
|
2302
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2303
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2304
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2305
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-silent", style: { fontSize: "0.625rem" }, children: "Silent" })
|
|
2176
2306
|
] }),
|
|
2177
|
-
/* @__PURE__ */
|
|
2307
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Inner thoughts only" })
|
|
2178
2308
|
] })
|
|
2179
2309
|
] }) }),
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
/* @__PURE__ */
|
|
2183
|
-
/* @__PURE__ */
|
|
2310
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", style: { opacity: 0.7 }, children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2311
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-avatar", style: { position: "relative" }, children: [
|
|
2312
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-avatar", children: /* @__PURE__ */ jsx19("div", { className: "qt-avatar-fallback", children: "CC" }) }),
|
|
2313
|
+
/* @__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" }) }) })
|
|
2184
2314
|
] }),
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2187
|
-
/* @__PURE__ */
|
|
2188
|
-
/* @__PURE__ */
|
|
2315
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2316
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2317
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Clara Character" }),
|
|
2318
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-absent", style: { fontSize: "0.625rem" }, children: "Absent" })
|
|
2189
2319
|
] }),
|
|
2190
|
-
/* @__PURE__ */
|
|
2320
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Away from the scene" })
|
|
2191
2321
|
] })
|
|
2192
2322
|
] }) }),
|
|
2193
|
-
/* @__PURE__ */
|
|
2194
|
-
/* @__PURE__ */
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2323
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2324
|
+
/* @__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" }) }) }),
|
|
2325
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2326
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "You" }),
|
|
2327
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "Human" })
|
|
2198
2328
|
] })
|
|
2199
2329
|
] }) })
|
|
2200
2330
|
] })
|
|
2201
2331
|
] }),
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
/* @__PURE__ */
|
|
2205
|
-
/* @__PURE__ */
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2211
|
-
/* @__PURE__ */
|
|
2332
|
+
/* @__PURE__ */ jsxs19("section", { style: { marginBottom: "2rem" }, children: [
|
|
2333
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Chat Sidebar Layout" }),
|
|
2334
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
2335
|
+
/* @__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" }) }),
|
|
2336
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-chat-sidebar", style: { width: "16rem" }, children: [
|
|
2337
|
+
/* @__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" }) }),
|
|
2338
|
+
/* @__PURE__ */ jsxs19("div", { style: { padding: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2339
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card qt-participant-card-active", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2340
|
+
/* @__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" }) }) }),
|
|
2341
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "Alice" }) })
|
|
2212
2342
|
] }) }),
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2215
|
-
/* @__PURE__ */
|
|
2343
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2344
|
+
/* @__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" }) }) }),
|
|
2345
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-info", children: /* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", style: { fontSize: "0.875rem" }, children: "You" }) })
|
|
2216
2346
|
] }) })
|
|
2217
2347
|
] })
|
|
2218
2348
|
] })
|
|
2219
2349
|
] })
|
|
2220
2350
|
] }),
|
|
2221
|
-
/* @__PURE__ */
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
/* @__PURE__ */
|
|
2228
|
-
/* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2351
|
+
/* @__PURE__ */ jsxs19("section", { children: [
|
|
2352
|
+
/* @__PURE__ */ jsx19("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Connection Profile Dropdown" }),
|
|
2353
|
+
/* @__PURE__ */ jsxs19("div", { style: { maxWidth: "20rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
|
|
2354
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2355
|
+
/* @__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" }) }) }),
|
|
2356
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2357
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Alice Character" }),
|
|
2358
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-status", children: "AI Assistant" }),
|
|
2359
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "gpt-4", children: [
|
|
2360
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2361
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2362
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2363
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" }),
|
|
2364
|
+
/* @__PURE__ */ jsx19("option", { value: "gemini", children: "gemini-pro" })
|
|
2235
2365
|
] }) })
|
|
2236
2366
|
] })
|
|
2237
2367
|
] }) }),
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2243
|
-
/* @__PURE__ */
|
|
2368
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card", children: /* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-header", children: [
|
|
2369
|
+
/* @__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" }) }) }),
|
|
2370
|
+
/* @__PURE__ */ jsxs19("div", { className: "qt-participant-card-info", children: [
|
|
2371
|
+
/* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
2372
|
+
/* @__PURE__ */ jsx19("div", { className: "qt-participant-card-name", children: "Bob Character" }),
|
|
2373
|
+
/* @__PURE__ */ jsx19("span", { className: "qt-badge-secondary", style: { fontSize: "0.75rem" }, children: "You" })
|
|
2244
2374
|
] }),
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
/* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2375
|
+
/* @__PURE__ */ jsx19("div", { style: { marginTop: "0.25rem" }, children: /* @__PURE__ */ jsxs19("select", { className: "qt-select qt-select-sm", style: { width: "100%" }, defaultValue: "__user__", children: [
|
|
2376
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: "Select a provider..." }),
|
|
2377
|
+
/* @__PURE__ */ jsx19("option", { value: "__user__", children: "User (you type)" }),
|
|
2378
|
+
/* @__PURE__ */ jsx19("option", { value: "gpt-4", children: "gpt-4-turbo" }),
|
|
2379
|
+
/* @__PURE__ */ jsx19("option", { value: "claude", children: "claude-3-opus" })
|
|
2250
2380
|
] }) })
|
|
2251
2381
|
] })
|
|
2252
2382
|
] }) })
|
|
@@ -2266,6 +2396,7 @@ export {
|
|
|
2266
2396
|
Cards,
|
|
2267
2397
|
Inputs,
|
|
2268
2398
|
Badges,
|
|
2399
|
+
Surfaces,
|
|
2269
2400
|
Avatars,
|
|
2270
2401
|
Dialogs,
|
|
2271
2402
|
Tabs,
|