@quilltap/theme-storybook 1.0.65 → 1.0.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-TESCTXU3.mjs → chunk-PCPCAOQ7.mjs} +49 -4
- package/dist/index.css +107 -0
- package/dist/index.js +49 -4
- package/dist/index.mjs +1 -1
- package/dist/stories/index.js +49 -4
- package/dist/stories/index.mjs +1 -1
- package/package.json +1 -1
- package/src/css/qt-components.css +142 -0
- package/src/stories/components/Chat.tsx +29 -0
- package/src/stories/components/Dialogs.tsx +22 -1
|
@@ -1379,10 +1379,33 @@ var Dialogs = () => {
|
|
|
1379
1379
|
] }),
|
|
1380
1380
|
/* @__PURE__ */ jsxs11("section", { children: [
|
|
1381
1381
|
/* @__PURE__ */ jsx11("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
|
|
1382
|
-
/* @__PURE__ */
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
|
|
1385
|
-
|
|
1382
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "flex-end", gap: "4rem", flexWrap: "wrap" }, children: [
|
|
1383
|
+
/* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1384
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
|
|
1385
|
+
/* @__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" })
|
|
1386
|
+
] }),
|
|
1387
|
+
/* @__PURE__ */ jsxs11("div", { style: { position: "relative", display: "inline-block", marginTop: "14rem" }, children: [
|
|
1388
|
+
/* @__PURE__ */ jsx11("button", { className: "qt-button qt-button-secondary", children: "Pinned, with detail" }),
|
|
1389
|
+
/* @__PURE__ */ jsx11(
|
|
1390
|
+
"div",
|
|
1391
|
+
{
|
|
1392
|
+
className: "qt-tooltip",
|
|
1393
|
+
"data-interactive": "true",
|
|
1394
|
+
"data-pinned": "true",
|
|
1395
|
+
style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block", width: "20rem" },
|
|
1396
|
+
children: /* @__PURE__ */ jsxs11("div", { className: "qt-tooltip-body", children: [
|
|
1397
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-tooltip-title", children: "Amended" }),
|
|
1398
|
+
/* @__PURE__ */ jsx11("p", { children: "On reflection the author corrected this reply to match the record." }),
|
|
1399
|
+
/* @__PURE__ */ jsxs11("div", { className: "qt-tooltip-section", children: [
|
|
1400
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-tooltip-section-label", children: "What looked off" }),
|
|
1401
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-tooltip-quote", children: "The ledger excerpt returned by the document read shows a metric column." })
|
|
1402
|
+
] }),
|
|
1403
|
+
/* @__PURE__ */ jsx11("p", { className: "qt-tooltip-hint", children: "Click the badge to pin this note; Esc dismisses it." })
|
|
1404
|
+
] })
|
|
1405
|
+
}
|
|
1406
|
+
)
|
|
1407
|
+
] })
|
|
1408
|
+
] })
|
|
1386
1409
|
] })
|
|
1387
1410
|
] });
|
|
1388
1411
|
};
|
|
@@ -2018,6 +2041,28 @@ var Chat = () => {
|
|
|
2018
2041
|
/* @__PURE__ */ jsx14("div", { className: "qt-emoji-picker-message", children: "Couldn't load emoji" })
|
|
2019
2042
|
] }) })
|
|
2020
2043
|
] }),
|
|
2044
|
+
/* @__PURE__ */ jsxs14("section", { style: { marginBottom: "2rem" }, children: [
|
|
2045
|
+
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Answer-Confirmation Badges" }),
|
|
2046
|
+
/* @__PURE__ */ jsx14("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "The fact-checker's verdict on a message, shown among the message action icons. Quiet by design; the discrepancy notes live in a tooltip. Hover one to see its hover state." }),
|
|
2047
|
+
/* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }, children: [
|
|
2048
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-confirmation-badge", "data-confirmation-state": "vouched", children: [
|
|
2049
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-glyph", children: "\u2713" }),
|
|
2050
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-label", children: "Vouched" })
|
|
2051
|
+
] }),
|
|
2052
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-confirmation-badge", "data-confirmation-state": "amended", children: [
|
|
2053
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-glyph", children: "\u270E" }),
|
|
2054
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-label", children: "Amended" })
|
|
2055
|
+
] }),
|
|
2056
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-confirmation-badge", "data-confirmation-state": "stood-by", children: [
|
|
2057
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-glyph", children: "!" }),
|
|
2058
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-label", children: "Stood by" })
|
|
2059
|
+
] }),
|
|
2060
|
+
/* @__PURE__ */ jsxs14("button", { className: "qt-confirmation-badge", "data-confirmation-state": "unvetted", children: [
|
|
2061
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-glyph", children: "\u2014" }),
|
|
2062
|
+
/* @__PURE__ */ jsx14("span", { className: "qt-confirmation-badge-label", children: "Unvetted" })
|
|
2063
|
+
] })
|
|
2064
|
+
] })
|
|
2065
|
+
] }),
|
|
2021
2066
|
/* @__PURE__ */ jsxs14("section", { children: [
|
|
2022
2067
|
/* @__PURE__ */ jsx14("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
2023
2068
|
/* @__PURE__ */ jsxs14("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
package/dist/index.css
CHANGED
|
@@ -1211,6 +1211,60 @@ body {
|
|
|
1211
1211
|
.qt-pascal-result--info {
|
|
1212
1212
|
border-left-color: var(--qt-alert-info-border);
|
|
1213
1213
|
}
|
|
1214
|
+
.qt-confirmation-badge {
|
|
1215
|
+
display: inline-flex;
|
|
1216
|
+
align-items: center;
|
|
1217
|
+
gap: 0.2rem;
|
|
1218
|
+
padding: 0.05rem 0.4rem;
|
|
1219
|
+
border-radius: 0.375rem;
|
|
1220
|
+
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
|
|
1221
|
+
background: transparent;
|
|
1222
|
+
font: inherit;
|
|
1223
|
+
line-height: 1.4;
|
|
1224
|
+
cursor: help;
|
|
1225
|
+
color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
|
|
1226
|
+
opacity: 0.8;
|
|
1227
|
+
-webkit-user-select: none;
|
|
1228
|
+
-moz-user-select: none;
|
|
1229
|
+
user-select: none;
|
|
1230
|
+
white-space: nowrap;
|
|
1231
|
+
transition:
|
|
1232
|
+
color 150ms,
|
|
1233
|
+
background-color 150ms,
|
|
1234
|
+
border-color 150ms,
|
|
1235
|
+
opacity 150ms;
|
|
1236
|
+
}
|
|
1237
|
+
.qt-confirmation-badge:hover,
|
|
1238
|
+
.qt-confirmation-badge:focus-visible {
|
|
1239
|
+
opacity: 1;
|
|
1240
|
+
border-color: color-mix(in srgb, currentColor 45%, transparent);
|
|
1241
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1242
|
+
}
|
|
1243
|
+
.qt-confirmation-badge[data-confirmation-state=vouched]:hover,
|
|
1244
|
+
.qt-confirmation-badge[data-confirmation-state=vouched]:focus-visible,
|
|
1245
|
+
.qt-confirmation-badge[data-confirmation-state=unvetted]:hover,
|
|
1246
|
+
.qt-confirmation-badge[data-confirmation-state=unvetted]:focus-visible {
|
|
1247
|
+
color: var(--color-foreground);
|
|
1248
|
+
}
|
|
1249
|
+
.qt-confirmation-badge:focus-visible {
|
|
1250
|
+
outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
|
|
1251
|
+
outline-offset: 2px;
|
|
1252
|
+
}
|
|
1253
|
+
.qt-chat-message-user .qt-confirmation-badge:hover,
|
|
1254
|
+
.qt-chat-message-user .qt-confirmation-badge:focus-visible {
|
|
1255
|
+
color: var(--qt-chat-user-fg);
|
|
1256
|
+
background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
|
|
1257
|
+
}
|
|
1258
|
+
.qt-confirmation-badge-glyph {
|
|
1259
|
+
font-weight: 600;
|
|
1260
|
+
}
|
|
1261
|
+
.qt-confirmation-badge[data-confirmation-state=stood-by] {
|
|
1262
|
+
color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
|
|
1263
|
+
opacity: 1;
|
|
1264
|
+
}
|
|
1265
|
+
.qt-confirmation-badge[data-confirmation-state=amended] {
|
|
1266
|
+
opacity: 1;
|
|
1267
|
+
}
|
|
1214
1268
|
.qt-chat-system-bar {
|
|
1215
1269
|
display: flex;
|
|
1216
1270
|
align-items: center;
|
|
@@ -1752,6 +1806,59 @@ body {
|
|
|
1752
1806
|
background: var(--color-muted);
|
|
1753
1807
|
outline: none;
|
|
1754
1808
|
}
|
|
1809
|
+
.qt-tooltip {
|
|
1810
|
+
position: fixed;
|
|
1811
|
+
z-index: 70;
|
|
1812
|
+
padding: 0.5rem 0.75rem;
|
|
1813
|
+
font-size: 0.75rem;
|
|
1814
|
+
line-height: 1.45;
|
|
1815
|
+
max-width: min(24rem, calc(100vw - 1rem));
|
|
1816
|
+
border-radius: var(--qt-popover-radius);
|
|
1817
|
+
background: var(--color-foreground);
|
|
1818
|
+
color: var(--color-background);
|
|
1819
|
+
border: 1px solid color-mix(in srgb, var(--color-background) 20%, transparent);
|
|
1820
|
+
box-shadow: var(--qt-popover-shadow);
|
|
1821
|
+
text-align: left;
|
|
1822
|
+
white-space: pre-line;
|
|
1823
|
+
pointer-events: none;
|
|
1824
|
+
}
|
|
1825
|
+
.qt-tooltip[data-interactive=true] {
|
|
1826
|
+
pointer-events: auto;
|
|
1827
|
+
}
|
|
1828
|
+
.qt-tooltip[data-pinned=true] {
|
|
1829
|
+
border-color: color-mix(in srgb, var(--color-background) 45%, transparent);
|
|
1830
|
+
}
|
|
1831
|
+
.qt-tooltip-anchor {
|
|
1832
|
+
display: inline-flex;
|
|
1833
|
+
align-items: center;
|
|
1834
|
+
}
|
|
1835
|
+
.qt-tooltip-body {
|
|
1836
|
+
max-height: 40vh;
|
|
1837
|
+
overflow-y: auto;
|
|
1838
|
+
overscroll-behavior: contain;
|
|
1839
|
+
}
|
|
1840
|
+
.qt-tooltip-title {
|
|
1841
|
+
font-weight: 600;
|
|
1842
|
+
margin-bottom: 0.15rem;
|
|
1843
|
+
}
|
|
1844
|
+
.qt-tooltip-section {
|
|
1845
|
+
margin-top: 0.5rem;
|
|
1846
|
+
}
|
|
1847
|
+
.qt-tooltip-section-label {
|
|
1848
|
+
text-transform: uppercase;
|
|
1849
|
+
font-size: 0.625rem;
|
|
1850
|
+
letter-spacing: 0.05em;
|
|
1851
|
+
opacity: 0.7;
|
|
1852
|
+
}
|
|
1853
|
+
.qt-tooltip-quote {
|
|
1854
|
+
white-space: pre-wrap;
|
|
1855
|
+
opacity: 0.92;
|
|
1856
|
+
}
|
|
1857
|
+
.qt-tooltip-hint {
|
|
1858
|
+
margin-top: 0.5rem;
|
|
1859
|
+
font-size: 0.625rem;
|
|
1860
|
+
opacity: 0.65;
|
|
1861
|
+
}
|
|
1755
1862
|
.qt-typeahead-menu {
|
|
1756
1863
|
position: absolute;
|
|
1757
1864
|
z-index: 50;
|
package/dist/index.js
CHANGED
|
@@ -1489,10 +1489,33 @@ var Dialogs = () => {
|
|
|
1489
1489
|
] }),
|
|
1490
1490
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
|
|
1491
1491
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
|
|
1492
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.
|
|
1493
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.
|
|
1494
|
-
|
|
1495
|
-
|
|
1492
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "flex-end", gap: "4rem", flexWrap: "wrap" }, children: [
|
|
1493
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1494
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
|
|
1495
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
|
|
1496
|
+
] }),
|
|
1497
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "14rem" }, children: [
|
|
1498
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "qt-button qt-button-secondary", children: "Pinned, with detail" }),
|
|
1499
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1500
|
+
"div",
|
|
1501
|
+
{
|
|
1502
|
+
className: "qt-tooltip",
|
|
1503
|
+
"data-interactive": "true",
|
|
1504
|
+
"data-pinned": "true",
|
|
1505
|
+
style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block", width: "20rem" },
|
|
1506
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-tooltip-body", children: [
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "qt-tooltip-title", children: "Amended" }),
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "On reflection the author corrected this reply to match the record." }),
|
|
1509
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qt-tooltip-section", children: [
|
|
1510
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "qt-tooltip-section-label", children: "What looked off" }),
|
|
1511
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "qt-tooltip-quote", children: "The ledger excerpt returned by the document read shows a metric column." })
|
|
1512
|
+
] }),
|
|
1513
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "qt-tooltip-hint", children: "Click the badge to pin this note; Esc dismisses it." })
|
|
1514
|
+
] })
|
|
1515
|
+
}
|
|
1516
|
+
)
|
|
1517
|
+
] })
|
|
1518
|
+
] })
|
|
1496
1519
|
] })
|
|
1497
1520
|
] });
|
|
1498
1521
|
};
|
|
@@ -2128,6 +2151,28 @@ var Chat = () => {
|
|
|
2128
2151
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "qt-emoji-picker-message", children: "Couldn't load emoji" })
|
|
2129
2152
|
] }) })
|
|
2130
2153
|
] }),
|
|
2154
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
2155
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Answer-Confirmation Badges" }),
|
|
2156
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "The fact-checker's verdict on a message, shown among the message action icons. Quiet by design; the discrepancy notes live in a tooltip. Hover one to see its hover state." }),
|
|
2157
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }, children: [
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "vouched", children: [
|
|
2159
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u2713" }),
|
|
2160
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-label", children: "Vouched" })
|
|
2161
|
+
] }),
|
|
2162
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "amended", children: [
|
|
2163
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u270E" }),
|
|
2164
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-label", children: "Amended" })
|
|
2165
|
+
] }),
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "stood-by", children: [
|
|
2167
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "!" }),
|
|
2168
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-label", children: "Stood by" })
|
|
2169
|
+
] }),
|
|
2170
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "unvetted", children: [
|
|
2171
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u2014" }),
|
|
2172
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "qt-confirmation-badge-label", children: "Unvetted" })
|
|
2173
|
+
] })
|
|
2174
|
+
] })
|
|
2175
|
+
] }),
|
|
2131
2176
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { children: [
|
|
2132
2177
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
2133
2178
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
package/dist/index.mjs
CHANGED
package/dist/stories/index.js
CHANGED
|
@@ -1426,10 +1426,33 @@ var Dialogs = () => {
|
|
|
1426
1426
|
] }),
|
|
1427
1427
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
|
|
1428
1428
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Tooltip" }),
|
|
1429
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.
|
|
1430
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.
|
|
1431
|
-
|
|
1432
|
-
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "flex-end", gap: "4rem", flexWrap: "wrap" }, children: [
|
|
1430
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "2rem" }, children: [
|
|
1431
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "qt-button qt-button-secondary", children: "Hover me" }),
|
|
1432
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "qt-tooltip", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block" }, children: "Helpful tooltip text" })
|
|
1433
|
+
] }),
|
|
1434
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative", display: "inline-block", marginTop: "14rem" }, children: [
|
|
1435
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "qt-button qt-button-secondary", children: "Pinned, with detail" }),
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1437
|
+
"div",
|
|
1438
|
+
{
|
|
1439
|
+
className: "qt-tooltip",
|
|
1440
|
+
"data-interactive": "true",
|
|
1441
|
+
"data-pinned": "true",
|
|
1442
|
+
style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "100%", marginBottom: "0.5rem", display: "block", width: "20rem" },
|
|
1443
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "qt-tooltip-body", children: [
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "qt-tooltip-title", children: "Amended" }),
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: "On reflection the author corrected this reply to match the record." }),
|
|
1446
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "qt-tooltip-section", children: [
|
|
1447
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "qt-tooltip-section-label", children: "What looked off" }),
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "qt-tooltip-quote", children: "The ledger excerpt returned by the document read shows a metric column." })
|
|
1449
|
+
] }),
|
|
1450
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "qt-tooltip-hint", children: "Click the badge to pin this note; Esc dismisses it." })
|
|
1451
|
+
] })
|
|
1452
|
+
}
|
|
1453
|
+
)
|
|
1454
|
+
] })
|
|
1455
|
+
] })
|
|
1433
1456
|
] })
|
|
1434
1457
|
] });
|
|
1435
1458
|
};
|
|
@@ -2065,6 +2088,28 @@ var Chat = () => {
|
|
|
2065
2088
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "qt-emoji-picker-message", children: "Couldn't load emoji" })
|
|
2066
2089
|
] }) })
|
|
2067
2090
|
] }),
|
|
2091
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
|
|
2092
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Answer-Confirmation Badges" }),
|
|
2093
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { fontSize: "0.875rem", color: "var(--color-muted-foreground)", marginBottom: "1rem" }, children: "The fact-checker's verdict on a message, shown among the message action icons. Quiet by design; the discrepancy notes live in a tooltip. Hover one to see its hover state." }),
|
|
2094
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }, children: [
|
|
2095
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "vouched", children: [
|
|
2096
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u2713" }),
|
|
2097
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-label", children: "Vouched" })
|
|
2098
|
+
] }),
|
|
2099
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "amended", children: [
|
|
2100
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u270E" }),
|
|
2101
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-label", children: "Amended" })
|
|
2102
|
+
] }),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "stood-by", children: [
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "!" }),
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-label", children: "Stood by" })
|
|
2106
|
+
] }),
|
|
2107
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "qt-confirmation-badge", "data-confirmation-state": "unvetted", children: [
|
|
2108
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-glyph", children: "\u2014" }),
|
|
2109
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "qt-confirmation-badge-label", children: "Unvetted" })
|
|
2110
|
+
] })
|
|
2111
|
+
] })
|
|
2112
|
+
] }),
|
|
2068
2113
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { children: [
|
|
2069
2114
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Full Chat Layout" }),
|
|
2070
2115
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "qt-chat-layout", style: { height: "24rem", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column" }, children: [
|
package/dist/stories/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1383,6 +1383,73 @@
|
|
|
1383
1383
|
border-left-color: var(--qt-alert-info-border);
|
|
1384
1384
|
}
|
|
1385
1385
|
|
|
1386
|
+
/* --------------------------------------------------------------------------
|
|
1387
|
+
ANSWER-CONFIRMATION BADGE
|
|
1388
|
+
A quiet per-message verdict marker (Vouched / Amended / Stood by /
|
|
1389
|
+
Unvetted). The glyph carries the state; a tooltip holds the discrepancy
|
|
1390
|
+
notes. Metadata, not an alarm.
|
|
1391
|
+
-------------------------------------------------------------------------- */
|
|
1392
|
+
|
|
1393
|
+
.qt-confirmation-badge {
|
|
1394
|
+
display: inline-flex;
|
|
1395
|
+
align-items: center;
|
|
1396
|
+
gap: 0.2rem;
|
|
1397
|
+
padding: 0.05rem 0.4rem;
|
|
1398
|
+
border-radius: 0.375rem;
|
|
1399
|
+
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
|
|
1400
|
+
background: transparent;
|
|
1401
|
+
font: inherit;
|
|
1402
|
+
line-height: 1.4;
|
|
1403
|
+
cursor: help;
|
|
1404
|
+
color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
|
|
1405
|
+
opacity: 0.8;
|
|
1406
|
+
user-select: none;
|
|
1407
|
+
white-space: nowrap;
|
|
1408
|
+
transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
/* The badge sits among the message action icons and answers the pointer the
|
|
1412
|
+
same way they do. */
|
|
1413
|
+
.qt-confirmation-badge:hover,
|
|
1414
|
+
.qt-confirmation-badge:focus-visible {
|
|
1415
|
+
opacity: 1;
|
|
1416
|
+
border-color: color-mix(in srgb, currentColor 45%, transparent);
|
|
1417
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
/* The tinted states (stood-by, amended) keep their own colour on hover; the
|
|
1421
|
+
quiet ones brighten to the foreground the way the action icons do. */
|
|
1422
|
+
.qt-confirmation-badge[data-confirmation-state="vouched"]:hover,
|
|
1423
|
+
.qt-confirmation-badge[data-confirmation-state="vouched"]:focus-visible,
|
|
1424
|
+
.qt-confirmation-badge[data-confirmation-state="unvetted"]:hover,
|
|
1425
|
+
.qt-confirmation-badge[data-confirmation-state="unvetted"]:focus-visible {
|
|
1426
|
+
color: var(--color-foreground);
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
.qt-confirmation-badge:focus-visible {
|
|
1430
|
+
outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
|
|
1431
|
+
outline-offset: 2px;
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.qt-chat-message-user .qt-confirmation-badge:hover,
|
|
1435
|
+
.qt-chat-message-user .qt-confirmation-badge:focus-visible {
|
|
1436
|
+
color: var(--qt-chat-user-fg);
|
|
1437
|
+
background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.qt-confirmation-badge-glyph {
|
|
1441
|
+
font-weight: 600;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
.qt-confirmation-badge[data-confirmation-state="stood-by"] {
|
|
1445
|
+
color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
|
|
1446
|
+
opacity: 1;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
.qt-confirmation-badge[data-confirmation-state="amended"] {
|
|
1450
|
+
opacity: 1;
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1386
1453
|
/* ==========================================================================
|
|
1387
1454
|
CHAT — STAFF ANNOUNCEMENTS
|
|
1388
1455
|
Messages authored by a personified feature (the Librarian, the Host, Pascal
|
|
@@ -2101,6 +2168,81 @@
|
|
|
2101
2168
|
outline: none;
|
|
2102
2169
|
}
|
|
2103
2170
|
|
|
2171
|
+
/* ==========================================================================
|
|
2172
|
+
TOOLTIP
|
|
2173
|
+
==========================================================================
|
|
2174
|
+
Quilltap draws its own tooltips rather than leaning on the native `title`
|
|
2175
|
+
attribute, which the Electron shell renders unreliably. The bubble is
|
|
2176
|
+
portalled to `document.body` and positioned from script, so it escapes every
|
|
2177
|
+
stacking context and sits above dialogs (z-index 60). */
|
|
2178
|
+
|
|
2179
|
+
.qt-tooltip {
|
|
2180
|
+
position: fixed;
|
|
2181
|
+
z-index: 70;
|
|
2182
|
+
padding: 0.5rem 0.75rem;
|
|
2183
|
+
font-size: 0.75rem;
|
|
2184
|
+
line-height: 1.45;
|
|
2185
|
+
max-width: min(24rem, calc(100vw - 1rem));
|
|
2186
|
+
border-radius: var(--qt-popover-radius);
|
|
2187
|
+
background: var(--color-foreground);
|
|
2188
|
+
color: var(--color-background);
|
|
2189
|
+
border: 1px solid color-mix(in srgb, var(--color-background) 20%, transparent);
|
|
2190
|
+
box-shadow: var(--qt-popover-shadow);
|
|
2191
|
+
text-align: left;
|
|
2192
|
+
white-space: pre-line;
|
|
2193
|
+
/* Transparent to the pointer, so hovering never chases the bubble away —
|
|
2194
|
+
until the bubble is interactive (scrollable or pinned). */
|
|
2195
|
+
pointer-events: none;
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.qt-tooltip[data-interactive="true"] {
|
|
2199
|
+
pointer-events: auto;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.qt-tooltip[data-pinned="true"] {
|
|
2203
|
+
border-color: color-mix(in srgb, var(--color-background) 45%, transparent);
|
|
2204
|
+
}
|
|
2205
|
+
|
|
2206
|
+
/* Layout-neutral wrapper carrying the hover/focus listeners. */
|
|
2207
|
+
.qt-tooltip-anchor {
|
|
2208
|
+
display: inline-flex;
|
|
2209
|
+
align-items: center;
|
|
2210
|
+
}
|
|
2211
|
+
|
|
2212
|
+
/* Structured tooltip contents — a heading, labelled sections, a closing hint. */
|
|
2213
|
+
.qt-tooltip-body {
|
|
2214
|
+
max-height: 40vh;
|
|
2215
|
+
overflow-y: auto;
|
|
2216
|
+
overscroll-behavior: contain;
|
|
2217
|
+
}
|
|
2218
|
+
|
|
2219
|
+
.qt-tooltip-title {
|
|
2220
|
+
font-weight: 600;
|
|
2221
|
+
margin-bottom: 0.15rem;
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
.qt-tooltip-section {
|
|
2225
|
+
margin-top: 0.5rem;
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
.qt-tooltip-section-label {
|
|
2229
|
+
text-transform: uppercase;
|
|
2230
|
+
font-size: 0.625rem;
|
|
2231
|
+
letter-spacing: 0.05em;
|
|
2232
|
+
opacity: 0.7;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
.qt-tooltip-quote {
|
|
2236
|
+
white-space: pre-wrap;
|
|
2237
|
+
opacity: 0.92;
|
|
2238
|
+
}
|
|
2239
|
+
|
|
2240
|
+
.qt-tooltip-hint {
|
|
2241
|
+
margin-top: 0.5rem;
|
|
2242
|
+
font-size: 0.625rem;
|
|
2243
|
+
opacity: 0.65;
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2104
2246
|
/* ==========================================================================
|
|
2105
2247
|
TYPEAHEAD MENU
|
|
2106
2248
|
==========================================================================
|
|
@@ -691,6 +691,35 @@ export const Chat: React.FC = () => {
|
|
|
691
691
|
</div>
|
|
692
692
|
</section>
|
|
693
693
|
|
|
694
|
+
{/* Answer-Confirmation Badges */}
|
|
695
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
696
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
697
|
+
Answer-Confirmation Badges
|
|
698
|
+
</h3>
|
|
699
|
+
<p style={{ fontSize: '0.875rem', color: 'var(--color-muted-foreground)', marginBottom: '1rem' }}>
|
|
700
|
+
The fact-checker's verdict on a message, shown among the message action icons. Quiet by
|
|
701
|
+
design; the discrepancy notes live in a tooltip. Hover one to see its hover state.
|
|
702
|
+
</p>
|
|
703
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
|
|
704
|
+
<button className="qt-confirmation-badge" data-confirmation-state="vouched">
|
|
705
|
+
<span className="qt-confirmation-badge-glyph">✓</span>
|
|
706
|
+
<span className="qt-confirmation-badge-label">Vouched</span>
|
|
707
|
+
</button>
|
|
708
|
+
<button className="qt-confirmation-badge" data-confirmation-state="amended">
|
|
709
|
+
<span className="qt-confirmation-badge-glyph">✎</span>
|
|
710
|
+
<span className="qt-confirmation-badge-label">Amended</span>
|
|
711
|
+
</button>
|
|
712
|
+
<button className="qt-confirmation-badge" data-confirmation-state="stood-by">
|
|
713
|
+
<span className="qt-confirmation-badge-glyph">!</span>
|
|
714
|
+
<span className="qt-confirmation-badge-label">Stood by</span>
|
|
715
|
+
</button>
|
|
716
|
+
<button className="qt-confirmation-badge" data-confirmation-state="unvetted">
|
|
717
|
+
<span className="qt-confirmation-badge-glyph">—</span>
|
|
718
|
+
<span className="qt-confirmation-badge-label">Unvetted</span>
|
|
719
|
+
</button>
|
|
720
|
+
</div>
|
|
721
|
+
</section>
|
|
722
|
+
|
|
694
723
|
{/* Full Chat Layout Preview */}
|
|
695
724
|
<section>
|
|
696
725
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
@@ -237,13 +237,34 @@ export const Dialogs: React.FC = () => {
|
|
|
237
237
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
238
238
|
Tooltip
|
|
239
239
|
</h3>
|
|
240
|
-
<div style={{ display: 'flex', alignItems: '
|
|
240
|
+
<div style={{ display: 'flex', alignItems: 'flex-end', gap: '4rem', flexWrap: 'wrap' }}>
|
|
241
241
|
<div style={{ position: 'relative', display: 'inline-block', marginTop: '2rem' }}>
|
|
242
242
|
<button className="qt-button qt-button-secondary">Hover me</button>
|
|
243
243
|
<div className="qt-tooltip" style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: '100%', marginBottom: '0.5rem', display: 'block' }}>
|
|
244
244
|
Helpful tooltip text
|
|
245
245
|
</div>
|
|
246
246
|
</div>
|
|
247
|
+
|
|
248
|
+
{/* Structured (pinned) tooltip — a heading, labelled sections, a hint */}
|
|
249
|
+
<div style={{ position: 'relative', display: 'inline-block', marginTop: '14rem' }}>
|
|
250
|
+
<button className="qt-button qt-button-secondary">Pinned, with detail</button>
|
|
251
|
+
<div
|
|
252
|
+
className="qt-tooltip"
|
|
253
|
+
data-interactive="true"
|
|
254
|
+
data-pinned="true"
|
|
255
|
+
style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: '100%', marginBottom: '0.5rem', display: 'block', width: '20rem' }}
|
|
256
|
+
>
|
|
257
|
+
<div className="qt-tooltip-body">
|
|
258
|
+
<p className="qt-tooltip-title">Amended</p>
|
|
259
|
+
<p>On reflection the author corrected this reply to match the record.</p>
|
|
260
|
+
<div className="qt-tooltip-section">
|
|
261
|
+
<p className="qt-tooltip-section-label">What looked off</p>
|
|
262
|
+
<p className="qt-tooltip-quote">The ledger excerpt returned by the document read shows a metric column.</p>
|
|
263
|
+
</div>
|
|
264
|
+
<p className="qt-tooltip-hint">Click the badge to pin this note; Esc dismisses it.</p>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
247
268
|
</div>
|
|
248
269
|
</section>
|
|
249
270
|
</div>
|