@qaecy/cue-ui 0.0.1 → 0.0.4
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/README.md +93 -2
- package/card/3rdpartylicenses.txt +443 -0
- package/card/index.html +40 -0
- package/card/main.js +1 -0
- package/card/polyfills.js +1 -0
- package/card/poppins-latin-400-normal.woff +0 -0
- package/card/poppins-latin-400-normal.woff2 +0 -0
- package/card/poppins-latin-ext-400-normal.woff +0 -0
- package/card/poppins-latin-ext-400-normal.woff2 +0 -0
- package/card/runtime.js +1 -0
- package/card/styles.css +1 -0
- package/document-list/3rdpartylicenses.txt +723 -0
- package/document-list/index.html +549 -0
- package/document-list/main.js +1 -0
- package/document-list/polyfills.js +1 -0
- package/document-list/poppins-latin-400-normal.woff +0 -0
- package/document-list/poppins-latin-400-normal.woff2 +0 -0
- package/document-list/poppins-latin-ext-400-normal.woff +0 -0
- package/document-list/poppins-latin-ext-400-normal.woff2 +0 -0
- package/document-list/runtime.js +1 -0
- package/document-list/styles.css +1 -0
- package/document-viewer/236.js +1 -0
- package/document-viewer/336.js +1 -0
- package/document-viewer/3rdpartylicenses.txt +50 -68
- package/document-viewer/560.js +1 -1
- package/document-viewer/741.js +1 -0
- package/document-viewer/{160.js → 781.js} +1 -1
- package/document-viewer/83.js +1 -1
- package/document-viewer/885.js +1 -0
- package/document-viewer/common.js +1 -1
- package/document-viewer/index.html +595 -29
- package/document-viewer/main.js +1 -1
- package/logo/index.html +87 -2
- package/logo/main.js +1 -1
- package/package.json +10 -2
- package/project-documents/main.js +1 -1
- package/document-viewer/130.js +0 -1
- package/document-viewer/241.js +0 -1
- package/document-viewer/266.js +0 -1
- package/document-viewer/315.js +0 -1
- package/document-viewer/734.js +0 -1
- package/document-viewer/829.js +0 -1
- package/document-viewer/843.js +0 -1
- package/document-viewer/888.js +0 -1
|
@@ -0,0 +1,549 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-beasties-container>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Cue - Document List</title>
|
|
6
|
+
<base href="./">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
9
|
+
|
|
10
|
+
<script type="importmap">
|
|
11
|
+
{
|
|
12
|
+
"imports": {
|
|
13
|
+
"@qaecy/cue-sdk": "https://esm.sh/@qaecy/cue-sdk@0.0.17?external=firebase",
|
|
14
|
+
"firebase/app": "https://esm.sh/firebase@12/app",
|
|
15
|
+
"firebase/auth": "https://esm.sh/firebase@12/auth",
|
|
16
|
+
"firebase/firestore": "https://esm.sh/firebase@12/firestore",
|
|
17
|
+
"firebase/storage": "https://esm.sh/firebase@12/storage",
|
|
18
|
+
"firebase/functions": "https://esm.sh/firebase@12/functions"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<script src="runtime.js" type="module"></script>
|
|
24
|
+
<script src="polyfills.js" type="module"></script>
|
|
25
|
+
<script src="main.js" type="module"></script>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
*,
|
|
29
|
+
*::before,
|
|
30
|
+
*::after {
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
body {
|
|
35
|
+
margin: 0;
|
|
36
|
+
background: #141414;
|
|
37
|
+
color: #e0e0e0;
|
|
38
|
+
font-family: Poppins, system-ui, sans-serif;
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
height: 100dvh;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#login-overlay {
|
|
46
|
+
position: fixed;
|
|
47
|
+
inset: 0;
|
|
48
|
+
background: #141414;
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
z-index: 100;
|
|
53
|
+
}
|
|
54
|
+
#login-overlay.hidden {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.login-card {
|
|
59
|
+
background: #1e1e1e;
|
|
60
|
+
border: 1px solid #333;
|
|
61
|
+
border-radius: 12px;
|
|
62
|
+
padding: 40px 48px;
|
|
63
|
+
text-align: center;
|
|
64
|
+
max-width: 360px;
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
67
|
+
.login-card h1 {
|
|
68
|
+
margin: 0 0 8px;
|
|
69
|
+
font-size: 22px;
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
}
|
|
72
|
+
.login-card p {
|
|
73
|
+
margin: 0 0 28px;
|
|
74
|
+
color: #888;
|
|
75
|
+
font-size: 13px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.btn {
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 10px;
|
|
82
|
+
padding: 10px 20px;
|
|
83
|
+
border: none;
|
|
84
|
+
border-radius: 8px;
|
|
85
|
+
font-family: inherit;
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
transition: opacity 0.15s;
|
|
90
|
+
}
|
|
91
|
+
.btn:hover {
|
|
92
|
+
opacity: 0.85;
|
|
93
|
+
}
|
|
94
|
+
.btn-google {
|
|
95
|
+
background: #fff;
|
|
96
|
+
color: #333;
|
|
97
|
+
}
|
|
98
|
+
.btn-ms {
|
|
99
|
+
background: #2f2f2f;
|
|
100
|
+
color: #e0e0e0;
|
|
101
|
+
border: 1px solid #444;
|
|
102
|
+
}
|
|
103
|
+
.login-actions {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
gap: 12px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
#app {
|
|
110
|
+
display: flex;
|
|
111
|
+
flex: 1;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
114
|
+
#app.hidden {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
#sidebar {
|
|
119
|
+
width: 320px;
|
|
120
|
+
min-width: 260px;
|
|
121
|
+
background: #1e1e1e;
|
|
122
|
+
border-right: 1px solid #2a2a2a;
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-direction: column;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
#sidebar-header {
|
|
129
|
+
padding: 16px;
|
|
130
|
+
border-bottom: 1px solid #2a2a2a;
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
justify-content: space-between;
|
|
134
|
+
}
|
|
135
|
+
#sidebar-header span {
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
font-size: 13px;
|
|
138
|
+
letter-spacing: 0.03em;
|
|
139
|
+
color: #aaa;
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
#signout-btn {
|
|
144
|
+
background: none;
|
|
145
|
+
border: none;
|
|
146
|
+
color: #666;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
font-size: 12px;
|
|
149
|
+
font-family: inherit;
|
|
150
|
+
padding: 4px 8px;
|
|
151
|
+
border-radius: 4px;
|
|
152
|
+
}
|
|
153
|
+
#signout-btn:hover {
|
|
154
|
+
color: #ccc;
|
|
155
|
+
background: #2a2a2a;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.section-label {
|
|
159
|
+
padding: 12px 16px 6px;
|
|
160
|
+
font-size: 11px;
|
|
161
|
+
font-weight: 600;
|
|
162
|
+
letter-spacing: 0.06em;
|
|
163
|
+
text-transform: uppercase;
|
|
164
|
+
color: #666;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
#project-select {
|
|
168
|
+
margin: 0 16px 4px;
|
|
169
|
+
padding: 8px 10px;
|
|
170
|
+
background: #2a2a2a;
|
|
171
|
+
border: 1px solid #383838;
|
|
172
|
+
border-radius: 6px;
|
|
173
|
+
color: #e0e0e0;
|
|
174
|
+
font-family: inherit;
|
|
175
|
+
font-size: 13px;
|
|
176
|
+
width: calc(100% - 32px);
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
appearance: none;
|
|
179
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
180
|
+
background-repeat: no-repeat;
|
|
181
|
+
background-position: right 10px center;
|
|
182
|
+
padding-right: 28px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
#project-select:focus {
|
|
186
|
+
outline: none;
|
|
187
|
+
border-color: #555;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
#file-list {
|
|
191
|
+
list-style: none;
|
|
192
|
+
margin: 0;
|
|
193
|
+
padding: 4px 8px;
|
|
194
|
+
flex: 1;
|
|
195
|
+
overflow-y: auto;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
#file-list li {
|
|
199
|
+
padding: 9px 10px;
|
|
200
|
+
border-radius: 6px;
|
|
201
|
+
display: flex;
|
|
202
|
+
flex-direction: column;
|
|
203
|
+
gap: 2px;
|
|
204
|
+
transition: background 0.1s;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
#file-list .file-name {
|
|
208
|
+
font-size: 13px;
|
|
209
|
+
white-space: nowrap;
|
|
210
|
+
overflow: hidden;
|
|
211
|
+
text-overflow: ellipsis;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
#file-list .file-meta {
|
|
215
|
+
font-size: 11px;
|
|
216
|
+
color: #666;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
#file-list-empty {
|
|
220
|
+
padding: 16px;
|
|
221
|
+
color: #555;
|
|
222
|
+
font-size: 13px;
|
|
223
|
+
font-style: italic;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
#shuffle-btn,
|
|
227
|
+
#show-all-btn {
|
|
228
|
+
margin: 8px 16px 0;
|
|
229
|
+
padding: 7px;
|
|
230
|
+
background: #2a2a2a;
|
|
231
|
+
border: 1px solid #383838;
|
|
232
|
+
border-radius: 6px;
|
|
233
|
+
color: #aaa;
|
|
234
|
+
font-family: inherit;
|
|
235
|
+
font-size: 12px;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
width: calc(100% - 32px);
|
|
238
|
+
transition: background 0.1s;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
#show-all-btn {
|
|
242
|
+
margin-bottom: 12px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
#shuffle-btn:hover,
|
|
246
|
+
#show-all-btn:hover {
|
|
247
|
+
background: #333;
|
|
248
|
+
color: #e0e0e0;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
#list-area {
|
|
252
|
+
flex: 1;
|
|
253
|
+
display: flex;
|
|
254
|
+
flex-direction: column;
|
|
255
|
+
min-width: 0;
|
|
256
|
+
overflow: hidden;
|
|
257
|
+
background: #f1f1f1;
|
|
258
|
+
color: #222;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
#toolbar {
|
|
262
|
+
padding: 12px 16px;
|
|
263
|
+
border-bottom: 1px solid #ddd;
|
|
264
|
+
background: #fff;
|
|
265
|
+
font-size: 12px;
|
|
266
|
+
color: #555;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
#list-wrapper {
|
|
270
|
+
flex: 1;
|
|
271
|
+
min-height: 0;
|
|
272
|
+
padding: 16px;
|
|
273
|
+
overflow: auto;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
cue-document-list {
|
|
277
|
+
display: block;
|
|
278
|
+
width: 100%;
|
|
279
|
+
min-height: 480px;
|
|
280
|
+
/* background: #fff;
|
|
281
|
+
border: 1px solid #ddd;
|
|
282
|
+
border-radius: 10px;
|
|
283
|
+
overflow: hidden; */
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.spinner {
|
|
287
|
+
display: inline-block;
|
|
288
|
+
width: 18px;
|
|
289
|
+
height: 18px;
|
|
290
|
+
border: 2px solid #333;
|
|
291
|
+
border-top-color: #888;
|
|
292
|
+
border-radius: 50%;
|
|
293
|
+
animation: spin 0.7s linear infinite;
|
|
294
|
+
vertical-align: middle;
|
|
295
|
+
margin-right: 8px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
@keyframes spin {
|
|
299
|
+
to {
|
|
300
|
+
transform: rotate(360deg);
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
</style>
|
|
304
|
+
<style>@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(poppins-latin-ext-400-normal.woff2) format("woff2"),url(poppins-latin-ext-400-normal.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(poppins-latin-400-normal.woff2) format("woff2"),url(poppins-latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--agent-plan-edge-default:var(--cue-color-lightgray);--agent-plan-edge-running:var(--cue-color-blue);--agent-plan-edge-finished:var(--cue-color-blue);--agent-plan-node-active-outline:var(--cue-color-blue);--agent-plan-node-finished-box-shadow:0 0 12px var(--cue-color-green)}:root{--cue-font-family:"Poppins";--cue-font-weight-regular:400;--cue-font-weight-medium:500;--cue-font-weight-semibold:600;--cue-font-xs-size:56.25% ;--cue-font-xs-line-height:calc(16 / 11);--cue-font-xs-letter-spacing:.075em;--cue-font-s-size:68.75% ;--cue-font-s-line-height:calc(16 / 11);--cue-font-s-letter-spacing:.05em;--cue-font-m-size:87.5% ;--cue-font-m-line-height:calc(20 / 14);--cue-font-m-letter-spacing:.04em;--cue-font-l-size:112.5% ;--cue-font-l-line-height:calc(24 / 18);--cue-font-l-letter-spacing:.01em;--cue-font-xl-size:150% ;--cue-font-xl-line-height:calc(32 / 24);--cue-font-xl-letter-spacing:.01em}:root{--cue-color-blue:#2859e1;--cue-color-darkblue:#1744c2;--cue-color-ultralightgray:#f5f6f9;--cue-color-lightgray:#d9d9d9;--cue-color-midgray:#8394b0;--cue-color-darkmidgray:#404955;--cue-color-darkgray:#121c2b;--cue-color-black:#0e1827;--cue-color-white:#ffffff;--cue-color-green:#e2f552;--cue-main-background:var(--cue-color-ultralightgray);--cue-main-foreground:var(--cue-color-darkgray);--cue-default:var(--cue-color-white);--cue-defaultContrast:var(--cue-color-darkgray);--cue-primary:var(--cue-color-blue);--cue-primaryContrast:var(--cue-color-white);--cue-accent:var(--cue-color-green);--cue-accentContrast:var(--cue-color-darkgray);--cue-secondary:var(--cue-color-darkblue);--cue-secondaryContrast:var(--cue-color-white);--cue-neutral:var(--cue-color-midgray);--cue-neutralContrast:var(--cue-color-darkgray);--cue-info:var(--cue-color-darkblue);--cue-infoContrast:var(--cue-color-white);--cue-error:#fc2626;--cue-errorContrast:var(--cue-color-white);--cue-success:#4caf50;--cue-successContrast:var(--cue-color-white);--cue-warning:#ffc107;--cue-warningContrast:var(--cue-color-white);--cue-border-color:var(--cue-color-lightgray);--cue-scrollbar-thumb-color:var(--cue-color-lightgray);--cue-scrollbar-track-color:transparent}:root{--cue-chart-text-color:var(--cue-color-darkgray);--cue-chart-text-color-select:var(--cue-color-black);--cue-chart-border-background-color:var(--cue-color-white);--chart-graph-edge-color:var(--cue-color-darkgray)}:root{--cue-dim-gap-xs:.25em ;--cue-dim-gap-s:.5em ;--cue-dim-gap-m:1em ;--cue-dim-gap-l:1.875em ;--cue-dim-gap-xl:2.5em ;--cue-dim-elem-xs:1.5em ;--cue-dim-elem-s:2em ;--cue-dim-elem-m:2.75em ;--cue-dim-elem-l:3.5em ;--cue-dim-s-gap-s:.375em ;--cue-dim-s-gap-m:.625em ;--cue-dim-s-gap-l:1em ;--cue-dim-s-elem-xs:1em ;--cue-dim-s-elem-s:1.25em ;--cue-dim-s-elem-m:1.75em ;--cue-dim-padding-main:.625em ;--cue-dim-padding-sub:.625em }@media(min-width:20em){:root{--cue-dim-padding-main:1.25em ;--cue-dim-padding-sub:.625em }}@media(min-width:40em){:root{--cue-dim-padding-main:2em ;--cue-dim-padding-sub:1em }}:root{--cue-card-border-radius:1.875em ;--cue-card-padding-x:1em ;--cue-card-padding-y:1em ;--cue-card-border-color:var(--cue-border-color);--cue-card-box-shadow:0 1px 1.5em rgba(0, 0, 0, .2)}:root{--cue-button-gap:.5em ;--cue-button-xs-height:var(--cue-dim-elem-xs);--cue-button-xs-padding-x:.1875em ;--cue-button-xs-icon-width:1.125em ;--cue-button-s-height:var(--cue-dim-elem-s);--cue-button-s-padding-x:.375em ;--cue-button-s-icon-width:1.25em ;--cue-button-m-height:var(--cue-dim-elem-m);--cue-button-m-padding-x:.625em ;--cue-button-m-icon-width:1.5em ;--cue-button-l-height:var(--cue-dim-elem-l);--cue-button-l-padding-x:.75em ;--cue-button-l-icon-width:1.75em ;--cue-button-border-radius:var(--button-height);--cue-button-border-width:1px;--cue-button-border-style:solid;--cue-button-primary-background:var(--cue-color-blue);--cue-button-primary-foreground:var(--cue-color-white);--cue-button-primary-focus-color:var(--cue-color-blue);--cue-button-primary-border-color:var(--cue-color-blue);--cue-button-primary-disabled-foreground:var(--background-color, --cue-main-background);--cue-button-primary-disabled-foreground:var(--cue-color-lightgray);--cue-button-primary-disabled-background:var(--cue-color-ultralightgray);--cue-button-primary-disabled-border-color:var(--cue-color-ultralightgray);--cue-button-accent-background:var(--cue-accent);--cue-button-accent-foreground:var(--cue-accentContrast);--cue-button-accent-focus-color:var(--cue-accent);--cue-button-accent-border-color:var(--cue-accent);--cue-button-accent-disabled-foreground:var(--background-color, --cue-main-background);--cue-button-accent-disabled-foreground:var(--cue-color-lightgray);--cue-button-accent-disabled-background:var(--cue-color-ultralightgray);--cue-button-accent-disabled-border-color:var(--cue-color-ultralightgray);--cue-button-secondary-background:transparent;--cue-button-secondary-foreground:currentColor;--cue-button-secondary-focus-color:currentColor;--cue-button-secondary-border-color:currentColor;--cue-button-secondary-disabled-background:transparent;--cue-button-secondary-disabled-foreground:var(--cue-color-midgray);--cue-button-secondary-disabled-border-color:var(--cue-color-midgray);--cue-button-tertiary-background:transparent;--cue-button-tertiary-foreground:currentColor;--cue-button-tertiary-focus-color:currentColor;--cue-button-tertiary-border-color:transparent;--cue-button-tertiary-disabled-background:transparent;--cue-button-tertiary-disabled-foreground:var(--cue-color-midgray);--cue-button-tertiary-disabled-border-color:transparent;--cue-button-ghost-background:transparent;--cue-button-ghost-foreground:currentColor;--cue-button-ghost-focus-color:transparent;--cue-button-ghost-border-color:transparent;--cue-button-ghost-disabled-background:transparent;--cue-button-ghost-disabled-foreground:var(--cue-color-midgray);--cue-button-ghost-disabled-border-color:transparent;--cue-button-danger-background:transparent;--cue-button-danger-foreground:var(--cue-error);--cue-button-danger-focus-color:var(--cue-error);--cue-button-danger-border-color:transparent;--cue-button-danger-disabled-foreground:transparent;--cue-button-danger-disabled-background:var(--cue-color-midgray);--cue-button-danger-disabled-border-color:transparent;--cue-button-dim-background:transparent;--cue-button-dim-foreground:var(--cue-color-midgray);--cue-button-dim-focus-color:var(--cue-color-midgray);--cue-button-dim-border-color:var(--cue-color-lightgray);--cue-button-dim-disabled-background:transparent;--cue-button-dim-disabled-foreground:var(--cue-color-lightgray);--cue-button-dim-disabled-border-color:var(--cue-color-lightgray);--cue-button-xs-label-padding-x:.75em ;--cue-button-s-label-padding-x:1em ;--cue-button-m-label-padding-x:1.5em ;--cue-button-l-label-padding-x:3em }@media(prefers-color-scheme:dark){:root{--cue-button-primary-disabled-foreground:var(--cue-color-midgray);--cue-button-primary-disabled-border-color:var(--cue-color-midgray);--cue-button-primary-disabled-background:var(--cue-color-lightgray);--cue-button-secondary-disabled-foreground:var(--cue-color-darkmidgray);--cue-button-secondary-disabled-border-color:var(--cue-color-darkmidgray);--cue-button-tertiary-disabled-foreground:var(--cue-color-darkmidgray)}}:root{--cue-input-switch-background:var(--cue-color-midgray);--cue-input-switch-indicator-background:var(--cue-color-white);--cue-input-switch-indicator-foreground:var(--cue-color-black);--cue-input-switch-focus-color:var(--cue-color-white);--cue-input-switch-checked-background:var(--cue-color-darkblue);--cue-input-switch-checked-indicator-background:var(--cue-color-white);--cue-input-switch-checked-indicator-foreground:var(--cue-color-black);--cue-input-switch-disabled-background:var(--cue-color-midgray);--cue-input-switch-disabled-indicator-background:var(--cue-color-lightgray);--cue-input-switch-disabled-indicator-foreground:var(--cue-color-midgray)}:root{--cue-chip-delete-background-color:var(--cue-color-midgray);--cue-chip-delete-hover-background-color:var(--cue-color-darkmidgray);--cue-chip-delete-icon-color:var(--cue-color-ultralightgray)}:root{--cue-input-value-color:var(--cue-main-foreground);--cue-input-label-color:var(--cue-main-foreground);--cue-input-border-color:var(--cue-border-color);--cue-input-border-bottom-color:var(--cue-main-foreground);--cue-input-placeholder-color:var(--cue-color-darkmidgray);--cue-input-xs-padding:.75em .375em .25em .375em ;--cue-input-xs-font-size:.8125em ;--cue-input-xs-label-top:.75em ;--cue-input-xs-label-left:.375em ;--cue-input-xs-label-focused-top:.125em ;--cue-input-xs-label-focused-font-size:.625em ;--cue-input-s-padding:.875em .4375em .3125em .4375em ;--cue-input-s-font-size:.875em ;--cue-input-s-label-top:.875em ;--cue-input-s-label-left:.4375em ;--cue-input-s-label-focused-top:.1875em ;--cue-input-s-label-focused-font-size:.6875em ;--cue-input-m-padding:1em .5em .375em .5em ;--cue-input-m-font-size:1em ;--cue-input-m-label-top:1em ;--cue-input-m-label-left:.5em ;--cue-input-m-label-focused-top:.25em ;--cue-input-m-label-focused-font-size:.75em ;--cue-input-l-padding:1.125em .625em .5em .625em ;--cue-input-l-font-size:1.125em ;--cue-input-l-label-top:1.125em ;--cue-input-l-label-left:.625em ;--cue-input-l-label-focused-top:.3125em ;--cue-input-l-label-focused-font-size:.875em }:root{--cue-menu-border-radius:.9375em ;--cue-menu-padding-x:.5em ;--cue-menu-padding-y:.5em ;--cue-menu-gap:.5em ;--cue-menu-background-color:var(--cue-color-white);--cue-menu-foreground-color:var(--cue-color-black);--cue-menu-border-color:var(--cue-border-color);--cue-menu-box-shadow:0 1px 1.25em rgba(0, 0, 0, .1);--cue-menu-max-height:300px;--cue-menu-item-background-color:var(--cue-color-white);--cue-menu-item-selected-background-color:var(--cue-color-lightgray);--cue-menu-item-focus-background-color:var(--cue-color-ultralightgray);--cue-menu-item-height:var(--cue-dim-elem-m);--cue-menu-item-border-radius:.9375em ;--cue-menu-item-padding-x:1em ;--cue-menu-item-gap:1em ;--cue-menu-item-icon-size:1.25em ;--cue-menu-item-xs-min-width:3em;--cue-menu-item-s-min-width:6em;--cue-menu-item-m-min-width:12em}@container cue-container (width < 20em){:root{--cue-menu-item-xs-min-width:3em;--cue-menu-item-s-min-width:6em;--cue-menu-item-m-min-width:12em}}:root{--cue-grid-gap-s:var(--cue-dim-gap-s);--cue-grid-gap-m:var(--cue-dim-gap-m);--cue-grid-gap-l:var(--cue-dim-gap-l)}:root{--cue-flex-gap-xs:var(--cue-dim-gap-xs);--cue-flex-gap-s:var(--cue-dim-gap-s);--cue-flex-gap-m:var(--cue-dim-gap-m);--cue-flex-gap-l:var(--cue-dim-gap-l);--cue-flex-gap-xl:var(--cue-dim-gap-xl)}:root{--cue-table-row-border-bottom:1px solid;--cue-table-row-border-bottom-color:var(--cue-color-midgray);--cue-table-text-color:var(--cue-main-foreground);--cue-table-secondary-text-color:var(--cue-color-midgray);--cue-table-highlight-color:var(--cue-color-ultralightgray);--cue-table-highlight-text-color:var(--cue-color-darkgray);--cue-table-selected-color:var(--cue-color-green);--cue-table-selected-text-color:var(--cue-color-darkgray);--cue-table-border-color:var(--cue-border-color);--cue-table-row-hover-bg:var(--cue-color-ultralightgray);--cue-table-xs-height:200px;--cue-table-s-height:300px;--cue-table-m-height:400px;--cue-table-l-height:500px;--cue-table-xl-height:600px;--cue-table-font-xs-size:var(--cue-font-xs-size);--cue-table-font-s-size:var(--cue-font-s-size);--cue-table-font-m-size:var(--cue-font-m-size);--cue-table-font-l-size:var(--cue-font-l-size);--cue-table-data-font-xs-size:var(--cue-font-xs-size);--cue-table-data-font-s-size:var(--cue-font-s-size);--cue-table-data-font-m-size:var(--cue-font-m-size);--cue-table-data-font-l-size:var(--cue-font-l-size);--cue-table-data-font-xl-size:var(--cue-font-xl-size)}:root{--cue-paginator-text-color:var(--cue-main-foreground)}:root{--cue-modal-overlay-color:rgba(245, 246, 249, .7)}:root{--cue-icon-width:var(--cue-dim-elem-xs)}:root{--cue-stepper-border-color:var(--cue-main-foreground);--cue-stepper-fill-color:var(--cue-main-foreground);--cue-stepper-connector-color:var(--cue-main-foreground)}:root{color-scheme:light}html{padding:0;margin:0;height:100%;width:100%}body{display:flex;flex-direction:column;background-color:var(--cue-main-background);color:var(--cue-main-foreground)}body>*{scrollbar-color:var(--cue-scrollbar-thumb-color) var(--cue-scrollbar-track-color);scrollbar-width:thin;scroll-behavior:smooth}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
|
|
305
|
+
<body>
|
|
306
|
+
<div id="login-overlay">
|
|
307
|
+
<div class="login-card">
|
|
308
|
+
<h1>Cue Document List</h1>
|
|
309
|
+
<p>Sign in to browse your projects and render a lazy document table</p>
|
|
310
|
+
<div class="login-actions">
|
|
311
|
+
<button class="btn btn-google" id="btn-google">
|
|
312
|
+
<svg width="18" height="18" viewBox="0 0 18 18">
|
|
313
|
+
<path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
|
|
314
|
+
<path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
|
|
315
|
+
<path fill="#FBBC05" d="M3.964 10.707A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.707V4.961H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.039l3.007-2.332z"/>
|
|
316
|
+
<path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.961L3.964 7.293C4.672 5.163 6.656 3.58 9 3.58z"/>
|
|
317
|
+
</svg>
|
|
318
|
+
Continue with Google
|
|
319
|
+
</button>
|
|
320
|
+
<button class="btn btn-ms" id="btn-ms">
|
|
321
|
+
<svg width="18" height="18" viewBox="0 0 21 21">
|
|
322
|
+
<rect x="1" y="1" width="9" height="9" fill="#f25022"/>
|
|
323
|
+
<rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
|
|
324
|
+
<rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
|
|
325
|
+
<rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
|
|
326
|
+
</svg>
|
|
327
|
+
Continue with Microsoft
|
|
328
|
+
</button>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
|
|
333
|
+
<div id="app" class="hidden">
|
|
334
|
+
<aside id="sidebar">
|
|
335
|
+
<div id="sidebar-header">
|
|
336
|
+
<span>Cue</span>
|
|
337
|
+
<button id="signout-btn">Sign out</button>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="section-label">Project</div>
|
|
340
|
+
<select id="project-select">
|
|
341
|
+
<option value>Loading...</option>
|
|
342
|
+
</select>
|
|
343
|
+
<div class="section-label">Sampled Documents</div>
|
|
344
|
+
<ul id="file-list"></ul>
|
|
345
|
+
<p id="file-list-empty" style="display: none">No documents found</p>
|
|
346
|
+
<button id="shuffle-btn">↻ Shuffle 25 documents</button>
|
|
347
|
+
<button id="show-all-btn">Show all documents</button>
|
|
348
|
+
</aside>
|
|
349
|
+
|
|
350
|
+
<main id="list-area">
|
|
351
|
+
<div id="toolbar">Select a project to load documents.</div>
|
|
352
|
+
<div id="list-wrapper">
|
|
353
|
+
<cue-document-list id="doc-list"></cue-document-list>
|
|
354
|
+
</div>
|
|
355
|
+
</main>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<script type="module">
|
|
359
|
+
window.addEventListener('load', () => {
|
|
360
|
+
setTimeout(() => {
|
|
361
|
+
if (customElements.get('cue-document-list')) {
|
|
362
|
+
console.log('[demo] cue-document-list registered OK');
|
|
363
|
+
} else {
|
|
364
|
+
console.error(
|
|
365
|
+
'[demo] cue-document-list NOT registered after 4 s. Check runtime.js/polyfills.js/main.js loads.'
|
|
366
|
+
);
|
|
367
|
+
}
|
|
368
|
+
}, 4000);
|
|
369
|
+
});
|
|
370
|
+
</script>
|
|
371
|
+
|
|
372
|
+
<script type="module">
|
|
373
|
+
import { Cue } from 'https://esm.sh/@qaecy/cue-sdk@0.0.17?external=firebase';
|
|
374
|
+
|
|
375
|
+
const PREFIXES = `
|
|
376
|
+
PREFIX qcy: <https://dev.qaecy.com/ont#>
|
|
377
|
+
`;
|
|
378
|
+
|
|
379
|
+
const DOCS_QUERY =
|
|
380
|
+
PREFIXES +
|
|
381
|
+
`
|
|
382
|
+
SELECT ?content ?name ?suffix WHERE {
|
|
383
|
+
?content a qcy:FileContent ;
|
|
384
|
+
qcy:hasFileLocation ?loc .
|
|
385
|
+
?loc qcy:value ?name ;
|
|
386
|
+
qcy:suffix ?suffix .
|
|
387
|
+
}
|
|
388
|
+
ORDER BY ?name
|
|
389
|
+
`;
|
|
390
|
+
|
|
391
|
+
const cue = new Cue();
|
|
392
|
+
let allDocs = [];
|
|
393
|
+
let shownDocs = [];
|
|
394
|
+
let activeProjectId = null;
|
|
395
|
+
let currentUser = null;
|
|
396
|
+
|
|
397
|
+
const $ = (id) => document.getElementById(id);
|
|
398
|
+
|
|
399
|
+
function showLogin() {
|
|
400
|
+
$('login-overlay').classList.remove('hidden');
|
|
401
|
+
$('app').classList.add('hidden');
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
function showApp() {
|
|
405
|
+
$('login-overlay').classList.add('hidden');
|
|
406
|
+
$('app').classList.remove('hidden');
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
function uuidFromIri(iri) {
|
|
410
|
+
return iri.split('/').pop();
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
function pickRandom(arr, n) {
|
|
414
|
+
const copy = [...arr];
|
|
415
|
+
for (let i = copy.length - 1; i > 0; i--) {
|
|
416
|
+
const j = Math.floor(Math.random() * (i + 1));
|
|
417
|
+
[copy[i], copy[j]] = [copy[j], copy[i]];
|
|
418
|
+
}
|
|
419
|
+
return copy.slice(0, n);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
async function syncDocumentList() {
|
|
423
|
+
const list = $('doc-list');
|
|
424
|
+
if (!list || !activeProjectId) return;
|
|
425
|
+
|
|
426
|
+
await customElements.whenDefined('cue-document-list');
|
|
427
|
+
list.projectId = activeProjectId;
|
|
428
|
+
list.uuids = shownDocs.map((doc) => doc.uuid);
|
|
429
|
+
list.sdkState = { cue, language: cue.api.language || 'en' };
|
|
430
|
+
|
|
431
|
+
$('toolbar').textContent =
|
|
432
|
+
`${shownDocs.length} documents loaded from ${activeProjectId}`;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
function renderFileList(docs) {
|
|
436
|
+
shownDocs = docs;
|
|
437
|
+
const ul = $('file-list');
|
|
438
|
+
const empty = $('file-list-empty');
|
|
439
|
+
ul.innerHTML = '';
|
|
440
|
+
|
|
441
|
+
if (!docs.length) {
|
|
442
|
+
empty.style.display = 'block';
|
|
443
|
+
$('toolbar').textContent = `No documents found in ${activeProjectId}`;
|
|
444
|
+
return;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
empty.style.display = 'none';
|
|
448
|
+
|
|
449
|
+
docs.forEach((doc) => {
|
|
450
|
+
const li = document.createElement('li');
|
|
451
|
+
li.innerHTML = `
|
|
452
|
+
<span class="file-name" title="${doc.name}">${doc.name}</span>
|
|
453
|
+
<span class="file-meta">${doc.suffix.replace('.', '').toUpperCase()}</span>
|
|
454
|
+
`;
|
|
455
|
+
ul.appendChild(li);
|
|
456
|
+
});
|
|
457
|
+
|
|
458
|
+
syncDocumentList();
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
async function loadDocuments(projectId) {
|
|
462
|
+
activeProjectId = projectId;
|
|
463
|
+
$('file-list').innerHTML =
|
|
464
|
+
`<li style="color:#555"><span class="spinner"></span> Loading...</li>`;
|
|
465
|
+
$('toolbar').textContent = `Loading documents for ${projectId}...`;
|
|
466
|
+
|
|
467
|
+
try {
|
|
468
|
+
const result = await cue.api.sparql(DOCS_QUERY, projectId);
|
|
469
|
+
allDocs = result.results.bindings.map((b) => ({
|
|
470
|
+
uuid: uuidFromIri(b.content.value),
|
|
471
|
+
name: b.name.value,
|
|
472
|
+
suffix: b.suffix?.value ?? '',
|
|
473
|
+
}));
|
|
474
|
+
|
|
475
|
+
renderFileList(pickRandom(allDocs, 25));
|
|
476
|
+
} catch (err) {
|
|
477
|
+
console.error('Failed to load documents', err);
|
|
478
|
+
$('file-list').innerHTML =
|
|
479
|
+
`<li style="color:#c44">Error loading documents</li>`;
|
|
480
|
+
$('toolbar').textContent = `Error loading documents for ${projectId}`;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
async function loadProjects() {
|
|
485
|
+
const sel = $('project-select');
|
|
486
|
+
sel.innerHTML = '<option value="">Loading...</option>';
|
|
487
|
+
|
|
488
|
+
try {
|
|
489
|
+
const projects = await cue.projects.listProjects();
|
|
490
|
+
sel.innerHTML = projects
|
|
491
|
+
.map((p) => `<option value="${p.id}">${p.name}</option>`)
|
|
492
|
+
.join('');
|
|
493
|
+
|
|
494
|
+
if (projects.length) {
|
|
495
|
+
await loadDocuments(projects[0].id);
|
|
496
|
+
}
|
|
497
|
+
} catch (err) {
|
|
498
|
+
console.error('Failed to load projects', err);
|
|
499
|
+
sel.innerHTML = '<option value="">Error loading projects</option>';
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
$('btn-google').addEventListener('click', () => cue.auth.signIn('google'));
|
|
504
|
+
$('btn-ms').addEventListener('click', () => cue.auth.signIn('microsoft'));
|
|
505
|
+
$('signout-btn').addEventListener('click', () => cue.auth.signOut());
|
|
506
|
+
|
|
507
|
+
$('project-select').addEventListener('change', (e) => {
|
|
508
|
+
if (e.target.value) loadDocuments(e.target.value);
|
|
509
|
+
});
|
|
510
|
+
|
|
511
|
+
$('shuffle-btn').addEventListener('click', () => {
|
|
512
|
+
if (allDocs.length) renderFileList(pickRandom(allDocs, 25));
|
|
513
|
+
});
|
|
514
|
+
|
|
515
|
+
$('show-all-btn').addEventListener('click', () => {
|
|
516
|
+
if (allDocs.length) renderFileList(allDocs);
|
|
517
|
+
});
|
|
518
|
+
|
|
519
|
+
cue.auth.onAuthStateChanged((user) => {
|
|
520
|
+
if (currentUser === user) return;
|
|
521
|
+
currentUser = user;
|
|
522
|
+
|
|
523
|
+
if (user) {
|
|
524
|
+
showApp();
|
|
525
|
+
loadProjects();
|
|
526
|
+
} else {
|
|
527
|
+
showLogin();
|
|
528
|
+
activeProjectId = null;
|
|
529
|
+
allDocs = [];
|
|
530
|
+
shownDocs = [];
|
|
531
|
+
const list = $('doc-list');
|
|
532
|
+
if (list) {
|
|
533
|
+
list.projectId = undefined;
|
|
534
|
+
list.uuids = [];
|
|
535
|
+
list.sdkState = undefined;
|
|
536
|
+
}
|
|
537
|
+
$('toolbar').textContent = 'Select a project to load documents.';
|
|
538
|
+
}
|
|
539
|
+
});
|
|
540
|
+
|
|
541
|
+
window.addEventListener('error', (evt) => {
|
|
542
|
+
console.error('[demo] Global error:', evt.error);
|
|
543
|
+
});
|
|
544
|
+
window.addEventListener('unhandledrejection', (evt) => {
|
|
545
|
+
console.error('[demo] Unhandled promise rejection:', evt.reason);
|
|
546
|
+
});
|
|
547
|
+
</script>
|
|
548
|
+
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
|
|
549
|
+
</html>
|