@nuasite/notes 0.22.2 → 0.22.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 +79 -41
- package/dist/overlay.js +227 -65
- package/package.json +1 -1
- package/src/dev/api-handlers.ts +82 -28
- package/src/dev/middleware.ts +9 -4
- package/src/integration.ts +2 -1
- package/src/overlay/App.tsx +88 -21
- package/src/overlay/components/Sidebar.tsx +41 -8
- package/src/overlay/components/SidebarItem.tsx +57 -16
- package/src/overlay/components/Toolbar.tsx +15 -3
- package/src/overlay/index.tsx +3 -1
- package/src/overlay/lib/cms-bridge.ts +61 -11
- package/src/overlay/lib/notes-fetch.ts +27 -5
- package/src/overlay/lib/url-mode.ts +46 -9
- package/src/overlay/styles.css +388 -138
- package/src/overlay/types.ts +11 -1
- package/src/storage/json-store.ts +57 -13
- package/src/storage/types.ts +54 -4
- package/src/types.ts +11 -0
package/src/overlay/styles.css
CHANGED
|
@@ -4,27 +4,58 @@
|
|
|
4
4
|
* Imported via Vite's `?inline` query and injected into a shadow root, so
|
|
5
5
|
* these styles never leak into the host page (and the host page can't
|
|
6
6
|
* accidentally style notes UI). Variables on `:host` are the only knobs.
|
|
7
|
+
*
|
|
8
|
+
* Design language: cool neutrals (slate / zinc) with a single muted blue
|
|
9
|
+
* accent. No bright primaries, no rounded-blob corners. Typography sticks
|
|
10
|
+
* to the system stack. The goal is to feel like a real product, not a
|
|
11
|
+
* Pastel-style demo.
|
|
7
12
|
*/
|
|
8
13
|
|
|
9
14
|
:host {
|
|
15
|
+
/* Surfaces */
|
|
10
16
|
--notes-bg: #ffffff;
|
|
17
|
+
--notes-bg-soft: #f8fafc;
|
|
18
|
+
--notes-bg-sunken: #f1f5f9;
|
|
19
|
+
|
|
20
|
+
/* Text */
|
|
11
21
|
--notes-fg: #0f172a;
|
|
12
|
-
--notes-muted: #64748b;
|
|
22
|
+
--notes-fg-muted: #64748b;
|
|
23
|
+
--notes-fg-subtle: #94a3b8;
|
|
24
|
+
|
|
25
|
+
/* Lines */
|
|
13
26
|
--notes-border: #e2e8f0;
|
|
14
|
-
--notes-
|
|
15
|
-
|
|
27
|
+
--notes-border-strong: #cbd5e1;
|
|
28
|
+
|
|
29
|
+
/* Accent — single muted blue used for primary actions and active state */
|
|
30
|
+
--notes-accent: #2563eb;
|
|
31
|
+
--notes-accent-hover: #1d4ed8;
|
|
32
|
+
--notes-accent-fg: #ffffff;
|
|
33
|
+
--notes-accent-soft: rgba(37, 99, 235, 0.08);
|
|
34
|
+
--notes-accent-ring: rgba(37, 99, 235, 0.2);
|
|
35
|
+
|
|
36
|
+
/* Status colors — used sparingly */
|
|
16
37
|
--notes-danger: #dc2626;
|
|
38
|
+
--notes-danger-soft: #fef2f2;
|
|
17
39
|
--notes-success: #16a34a;
|
|
18
|
-
--notes-
|
|
19
|
-
--notes-
|
|
20
|
-
--notes-
|
|
40
|
+
--notes-warn: #d97706;
|
|
41
|
+
--notes-warn-soft: #fffbeb;
|
|
42
|
+
--notes-warn-border: #fde68a;
|
|
43
|
+
|
|
44
|
+
/* Geometry */
|
|
45
|
+
--notes-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
46
|
+
--notes-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.16), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
|
|
47
|
+
--notes-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.22);
|
|
48
|
+
--notes-radius: 8px;
|
|
49
|
+
--notes-radius-sm: 5px;
|
|
50
|
+
--notes-sidebar-w: 340px;
|
|
21
51
|
--notes-z: 2147483600;
|
|
22
52
|
|
|
23
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
24
|
-
font-size:
|
|
25
|
-
line-height: 1.
|
|
53
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
|
|
54
|
+
font-size: 13px;
|
|
55
|
+
line-height: 1.5;
|
|
26
56
|
color: var(--notes-fg);
|
|
27
57
|
-webkit-font-smoothing: antialiased;
|
|
58
|
+
font-feature-settings: 'cv11', 'ss01';
|
|
28
59
|
}
|
|
29
60
|
|
|
30
61
|
* {
|
|
@@ -46,6 +77,15 @@ textarea {
|
|
|
46
77
|
color: inherit;
|
|
47
78
|
}
|
|
48
79
|
|
|
80
|
+
code {
|
|
81
|
+
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
82
|
+
font-size: 0.92em;
|
|
83
|
+
background: var(--notes-bg-sunken);
|
|
84
|
+
padding: 1px 5px;
|
|
85
|
+
border-radius: 3px;
|
|
86
|
+
color: var(--notes-fg);
|
|
87
|
+
}
|
|
88
|
+
|
|
49
89
|
.notes-root {
|
|
50
90
|
position: fixed;
|
|
51
91
|
inset: 0;
|
|
@@ -53,20 +93,21 @@ textarea {
|
|
|
53
93
|
z-index: var(--notes-z);
|
|
54
94
|
}
|
|
55
95
|
|
|
56
|
-
/*
|
|
96
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
97
|
+
* Toolbar
|
|
98
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
57
99
|
.notes-toolbar {
|
|
58
100
|
position: fixed;
|
|
59
101
|
top: 0;
|
|
60
102
|
left: 0;
|
|
61
103
|
right: 0;
|
|
62
|
-
height:
|
|
104
|
+
height: 40px;
|
|
63
105
|
background: var(--notes-bg);
|
|
64
106
|
border-bottom: 1px solid var(--notes-border);
|
|
65
107
|
display: flex;
|
|
66
108
|
align-items: center;
|
|
67
109
|
justify-content: space-between;
|
|
68
|
-
padding: 0
|
|
69
|
-
box-shadow: var(--notes-shadow);
|
|
110
|
+
padding: 0 14px;
|
|
70
111
|
pointer-events: auto;
|
|
71
112
|
}
|
|
72
113
|
|
|
@@ -75,41 +116,69 @@ textarea {
|
|
|
75
116
|
align-items: center;
|
|
76
117
|
gap: 8px;
|
|
77
118
|
font-weight: 600;
|
|
119
|
+
font-size: 13px;
|
|
120
|
+
letter-spacing: -0.01em;
|
|
78
121
|
}
|
|
79
122
|
|
|
80
123
|
.notes-toolbar__dot {
|
|
81
|
-
width:
|
|
82
|
-
height:
|
|
124
|
+
width: 7px;
|
|
125
|
+
height: 7px;
|
|
83
126
|
border-radius: 50%;
|
|
84
127
|
background: var(--notes-accent);
|
|
85
|
-
box-shadow: 0 0 0
|
|
128
|
+
box-shadow: 0 0 0 3px var(--notes-accent-soft);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.notes-toolbar__role {
|
|
132
|
+
font-size: 10px;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
text-transform: uppercase;
|
|
135
|
+
letter-spacing: 0.06em;
|
|
136
|
+
padding: 2px 6px;
|
|
137
|
+
border-radius: 3px;
|
|
138
|
+
background: var(--notes-bg-sunken);
|
|
139
|
+
color: var(--notes-fg-muted);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.notes-toolbar__role--agency {
|
|
143
|
+
background: var(--notes-accent-soft);
|
|
144
|
+
color: var(--notes-accent);
|
|
86
145
|
}
|
|
87
146
|
|
|
88
147
|
.notes-toolbar__page {
|
|
89
|
-
color: var(--notes-
|
|
148
|
+
color: var(--notes-fg-subtle);
|
|
90
149
|
font-weight: 400;
|
|
91
|
-
margin-left:
|
|
92
|
-
font-size:
|
|
150
|
+
margin-left: 4px;
|
|
151
|
+
font-size: 12px;
|
|
93
152
|
}
|
|
94
153
|
|
|
95
154
|
.notes-toolbar__actions {
|
|
96
155
|
display: flex;
|
|
97
156
|
align-items: center;
|
|
98
|
-
gap:
|
|
157
|
+
gap: 6px;
|
|
99
158
|
}
|
|
100
159
|
|
|
160
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
161
|
+
* Buttons
|
|
162
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
101
163
|
.notes-btn {
|
|
102
|
-
padding:
|
|
103
|
-
border-radius:
|
|
104
|
-
background:
|
|
164
|
+
padding: 5px 11px;
|
|
165
|
+
border-radius: var(--notes-radius-sm);
|
|
166
|
+
background: var(--notes-bg-sunken);
|
|
105
167
|
color: var(--notes-fg);
|
|
106
|
-
font-size:
|
|
168
|
+
font-size: 12px;
|
|
107
169
|
font-weight: 500;
|
|
108
|
-
|
|
170
|
+
border: 1px solid transparent;
|
|
171
|
+
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
|
|
172
|
+
white-space: nowrap;
|
|
109
173
|
}
|
|
110
174
|
|
|
111
175
|
.notes-btn:hover {
|
|
112
|
-
background:
|
|
176
|
+
background: var(--notes-border);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.notes-btn:disabled {
|
|
180
|
+
opacity: 0.5;
|
|
181
|
+
cursor: not-allowed;
|
|
113
182
|
}
|
|
114
183
|
|
|
115
184
|
.notes-btn--primary {
|
|
@@ -118,192 +187,359 @@ textarea {
|
|
|
118
187
|
}
|
|
119
188
|
|
|
120
189
|
.notes-btn--primary:hover {
|
|
121
|
-
background:
|
|
122
|
-
|
|
190
|
+
background: var(--notes-accent-hover);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.notes-btn--primary:disabled:hover {
|
|
194
|
+
background: var(--notes-accent);
|
|
123
195
|
}
|
|
124
196
|
|
|
125
197
|
.notes-btn--ghost {
|
|
126
198
|
background: transparent;
|
|
127
|
-
color: var(--notes-muted);
|
|
199
|
+
color: var(--notes-fg-muted);
|
|
128
200
|
}
|
|
129
201
|
|
|
130
202
|
.notes-btn--ghost:hover {
|
|
131
203
|
color: var(--notes-fg);
|
|
132
|
-
background:
|
|
204
|
+
background: var(--notes-bg-sunken);
|
|
133
205
|
}
|
|
134
206
|
|
|
135
207
|
.notes-btn--danger {
|
|
136
208
|
color: var(--notes-danger);
|
|
137
209
|
}
|
|
138
210
|
|
|
139
|
-
|
|
211
|
+
.notes-btn--danger:hover {
|
|
212
|
+
background: var(--notes-danger-soft);
|
|
213
|
+
color: var(--notes-danger);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
217
|
+
* Sidebar
|
|
218
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
140
219
|
.notes-sidebar {
|
|
141
220
|
position: fixed;
|
|
142
|
-
top:
|
|
221
|
+
top: 40px;
|
|
143
222
|
right: 0;
|
|
144
223
|
bottom: 0;
|
|
145
224
|
width: var(--notes-sidebar-w);
|
|
146
225
|
background: var(--notes-bg);
|
|
147
226
|
border-left: 1px solid var(--notes-border);
|
|
148
|
-
box-shadow: var(--notes-shadow);
|
|
149
227
|
display: flex;
|
|
150
228
|
flex-direction: column;
|
|
151
229
|
pointer-events: auto;
|
|
152
230
|
}
|
|
153
231
|
|
|
154
232
|
.notes-sidebar__header {
|
|
155
|
-
padding:
|
|
233
|
+
padding: 14px 16px 12px;
|
|
156
234
|
border-bottom: 1px solid var(--notes-border);
|
|
235
|
+
background: var(--notes-bg);
|
|
157
236
|
}
|
|
158
237
|
|
|
159
238
|
.notes-sidebar__title {
|
|
160
|
-
font-size:
|
|
239
|
+
font-size: 13px;
|
|
161
240
|
font-weight: 600;
|
|
162
|
-
margin: 0 0
|
|
241
|
+
margin: 0 0 3px;
|
|
242
|
+
color: var(--notes-fg);
|
|
243
|
+
letter-spacing: -0.01em;
|
|
163
244
|
}
|
|
164
245
|
|
|
165
246
|
.notes-sidebar__meta {
|
|
166
|
-
font-size:
|
|
167
|
-
color: var(--notes-
|
|
247
|
+
font-size: 11px;
|
|
248
|
+
color: var(--notes-fg-subtle);
|
|
249
|
+
display: flex;
|
|
250
|
+
align-items: center;
|
|
251
|
+
gap: 4px;
|
|
252
|
+
flex-wrap: wrap;
|
|
168
253
|
}
|
|
169
254
|
|
|
170
255
|
.notes-sidebar__list {
|
|
171
256
|
flex: 1;
|
|
172
257
|
overflow-y: auto;
|
|
173
|
-
padding:
|
|
258
|
+
padding: 10px;
|
|
174
259
|
display: flex;
|
|
175
260
|
flex-direction: column;
|
|
176
|
-
gap:
|
|
261
|
+
gap: 8px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.notes-sidebar__list::-webkit-scrollbar {
|
|
265
|
+
width: 8px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.notes-sidebar__list::-webkit-scrollbar-thumb {
|
|
269
|
+
background: var(--notes-border);
|
|
270
|
+
border-radius: 4px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.notes-sidebar__list::-webkit-scrollbar-thumb:hover {
|
|
274
|
+
background: var(--notes-border-strong);
|
|
177
275
|
}
|
|
178
276
|
|
|
179
277
|
.notes-sidebar__empty {
|
|
180
|
-
padding:
|
|
278
|
+
padding: 32px 16px;
|
|
181
279
|
text-align: center;
|
|
182
|
-
color: var(--notes-
|
|
183
|
-
font-size:
|
|
184
|
-
line-height: 1.
|
|
280
|
+
color: var(--notes-fg-subtle);
|
|
281
|
+
font-size: 12px;
|
|
282
|
+
line-height: 1.6;
|
|
185
283
|
}
|
|
186
284
|
|
|
187
285
|
.notes-sidebar__hint {
|
|
188
|
-
font-size:
|
|
189
|
-
color: var(--notes-
|
|
190
|
-
|
|
286
|
+
font-size: 11px;
|
|
287
|
+
color: var(--notes-fg-subtle);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.notes-sidebar__section {
|
|
291
|
+
font-size: 10px;
|
|
292
|
+
font-weight: 600;
|
|
293
|
+
text-transform: uppercase;
|
|
294
|
+
letter-spacing: 0.06em;
|
|
295
|
+
color: var(--notes-fg-subtle);
|
|
296
|
+
margin: 6px 4px 2px;
|
|
191
297
|
}
|
|
192
298
|
|
|
193
|
-
|
|
299
|
+
.notes-sidebar__deleted {
|
|
300
|
+
margin-top: 4px;
|
|
301
|
+
border-top: 1px solid var(--notes-border);
|
|
302
|
+
padding-top: 8px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.notes-sidebar__deleted summary {
|
|
306
|
+
font-size: 11px;
|
|
307
|
+
font-weight: 500;
|
|
308
|
+
color: var(--notes-fg-muted);
|
|
309
|
+
cursor: pointer;
|
|
310
|
+
padding: 4px 4px;
|
|
311
|
+
user-select: none;
|
|
312
|
+
list-style: none;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.notes-sidebar__deleted summary::-webkit-details-marker {
|
|
316
|
+
display: none;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.notes-sidebar__deleted summary::before {
|
|
320
|
+
content: '▸';
|
|
321
|
+
display: inline-block;
|
|
322
|
+
margin-right: 6px;
|
|
323
|
+
transition: transform 0.15s;
|
|
324
|
+
font-size: 9px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.notes-sidebar__deleted[open] summary::before {
|
|
328
|
+
transform: rotate(90deg);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.notes-sidebar__deleted summary:hover {
|
|
332
|
+
color: var(--notes-fg);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.notes-sidebar__deleted[open] {
|
|
336
|
+
display: flex;
|
|
337
|
+
flex-direction: column;
|
|
338
|
+
gap: 8px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
342
|
+
* Item card
|
|
343
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
194
344
|
.notes-item {
|
|
195
345
|
border: 1px solid var(--notes-border);
|
|
196
346
|
border-radius: var(--notes-radius);
|
|
197
|
-
padding: 12px;
|
|
198
|
-
background:
|
|
199
|
-
transition: border-color 0.
|
|
347
|
+
padding: 11px 12px;
|
|
348
|
+
background: var(--notes-bg);
|
|
349
|
+
transition: border-color 0.12s, box-shadow 0.12s;
|
|
200
350
|
}
|
|
201
351
|
|
|
202
352
|
.notes-item:hover {
|
|
203
|
-
border-color:
|
|
353
|
+
border-color: var(--notes-border-strong);
|
|
204
354
|
}
|
|
205
355
|
|
|
206
356
|
.notes-item--active {
|
|
207
357
|
border-color: var(--notes-accent);
|
|
208
|
-
box-shadow: 0 0 0 3px
|
|
358
|
+
box-shadow: 0 0 0 3px var(--notes-accent-ring);
|
|
209
359
|
}
|
|
210
360
|
|
|
211
361
|
.notes-item--resolved {
|
|
212
|
-
opacity: 0.
|
|
362
|
+
opacity: 0.6;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.notes-item--deleted {
|
|
366
|
+
opacity: 0.45;
|
|
367
|
+
background: var(--notes-bg-soft);
|
|
213
368
|
}
|
|
214
369
|
|
|
215
370
|
.notes-item__head {
|
|
216
371
|
display: flex;
|
|
217
372
|
align-items: center;
|
|
218
373
|
justify-content: space-between;
|
|
219
|
-
margin-bottom:
|
|
374
|
+
margin-bottom: 7px;
|
|
375
|
+
gap: 8px;
|
|
220
376
|
}
|
|
221
377
|
|
|
222
378
|
.notes-item__author {
|
|
223
379
|
font-weight: 600;
|
|
224
|
-
font-size:
|
|
380
|
+
font-size: 12px;
|
|
381
|
+
color: var(--notes-fg);
|
|
225
382
|
}
|
|
226
383
|
|
|
227
384
|
.notes-item__time {
|
|
228
|
-
font-size:
|
|
229
|
-
color: var(--notes-
|
|
385
|
+
font-size: 10px;
|
|
386
|
+
color: var(--notes-fg-subtle);
|
|
387
|
+
white-space: nowrap;
|
|
230
388
|
}
|
|
231
389
|
|
|
232
390
|
.notes-item__snippet {
|
|
233
|
-
font-size:
|
|
234
|
-
color: var(--notes-muted);
|
|
235
|
-
background:
|
|
236
|
-
border-left:
|
|
237
|
-
padding:
|
|
238
|
-
margin-bottom:
|
|
239
|
-
border-radius: 0
|
|
391
|
+
font-size: 11px;
|
|
392
|
+
color: var(--notes-fg-muted);
|
|
393
|
+
background: var(--notes-bg-soft);
|
|
394
|
+
border-left: 2px solid var(--notes-border);
|
|
395
|
+
padding: 5px 8px;
|
|
396
|
+
margin-bottom: 7px;
|
|
397
|
+
border-radius: 0 3px 3px 0;
|
|
240
398
|
white-space: pre-wrap;
|
|
241
399
|
word-break: break-word;
|
|
400
|
+
max-height: 48px;
|
|
401
|
+
overflow: hidden;
|
|
242
402
|
}
|
|
243
403
|
|
|
244
404
|
.notes-item__body {
|
|
245
|
-
font-size:
|
|
405
|
+
font-size: 12.5px;
|
|
246
406
|
white-space: pre-wrap;
|
|
247
407
|
word-break: break-word;
|
|
408
|
+
color: var(--notes-fg);
|
|
248
409
|
}
|
|
249
410
|
|
|
250
411
|
.notes-item__actions {
|
|
251
412
|
display: flex;
|
|
252
|
-
gap:
|
|
413
|
+
gap: 5px;
|
|
253
414
|
margin-top: 10px;
|
|
254
|
-
padding-top:
|
|
255
|
-
border-top: 1px solid
|
|
415
|
+
padding-top: 9px;
|
|
416
|
+
border-top: 1px solid var(--notes-border);
|
|
256
417
|
}
|
|
257
418
|
|
|
258
419
|
.notes-item__badge {
|
|
259
420
|
display: inline-block;
|
|
260
|
-
font-size:
|
|
421
|
+
font-size: 9px;
|
|
261
422
|
font-weight: 600;
|
|
262
423
|
text-transform: uppercase;
|
|
263
|
-
letter-spacing: 0.
|
|
424
|
+
letter-spacing: 0.06em;
|
|
264
425
|
padding: 2px 6px;
|
|
265
|
-
border-radius:
|
|
426
|
+
border-radius: 3px;
|
|
266
427
|
margin-right: 6px;
|
|
428
|
+
vertical-align: 1px;
|
|
267
429
|
}
|
|
268
430
|
|
|
269
431
|
.notes-item__badge--comment {
|
|
270
|
-
background:
|
|
271
|
-
color:
|
|
432
|
+
background: var(--notes-accent-soft);
|
|
433
|
+
color: var(--notes-accent);
|
|
272
434
|
}
|
|
273
435
|
|
|
274
436
|
.notes-item__badge--suggestion {
|
|
275
|
-
background:
|
|
276
|
-
color:
|
|
437
|
+
background: rgba(217, 119, 6, 0.1);
|
|
438
|
+
color: var(--notes-warn);
|
|
277
439
|
}
|
|
278
440
|
|
|
279
441
|
.notes-item__badge--resolved {
|
|
280
|
-
background:
|
|
281
|
-
color:
|
|
442
|
+
background: rgba(22, 163, 74, 0.1);
|
|
443
|
+
color: var(--notes-success);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.notes-item__badge--deleted {
|
|
447
|
+
background: var(--notes-bg-sunken);
|
|
448
|
+
color: var(--notes-fg-subtle);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.notes-item__history {
|
|
452
|
+
margin-top: 8px;
|
|
453
|
+
font-size: 11px;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.notes-item__history summary {
|
|
457
|
+
cursor: pointer;
|
|
458
|
+
color: var(--notes-fg-subtle);
|
|
459
|
+
user-select: none;
|
|
460
|
+
font-weight: 500;
|
|
461
|
+
list-style: none;
|
|
282
462
|
}
|
|
283
463
|
|
|
284
|
-
|
|
464
|
+
.notes-item__history summary::-webkit-details-marker {
|
|
465
|
+
display: none;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.notes-item__history summary::before {
|
|
469
|
+
content: '▸';
|
|
470
|
+
display: inline-block;
|
|
471
|
+
margin-right: 5px;
|
|
472
|
+
transition: transform 0.15s;
|
|
473
|
+
font-size: 8px;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.notes-item__history[open] summary::before {
|
|
477
|
+
transform: rotate(90deg);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.notes-item__history summary:hover {
|
|
481
|
+
color: var(--notes-fg-muted);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.notes-item__history ul {
|
|
485
|
+
list-style: none;
|
|
486
|
+
padding: 6px 0 0 14px;
|
|
487
|
+
margin: 0;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.notes-item__history li {
|
|
491
|
+
padding: 3px 0;
|
|
492
|
+
color: var(--notes-fg-muted);
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.notes-item__history-action {
|
|
496
|
+
font-weight: 600;
|
|
497
|
+
color: var(--notes-fg);
|
|
498
|
+
text-transform: capitalize;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.notes-item__history-meta {
|
|
502
|
+
color: var(--notes-fg-subtle);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.notes-item__history-note {
|
|
506
|
+
color: var(--notes-fg-subtle);
|
|
507
|
+
font-style: italic;
|
|
508
|
+
padding-left: 8px;
|
|
509
|
+
margin-top: 1px;
|
|
510
|
+
font-size: 10px;
|
|
511
|
+
overflow: hidden;
|
|
512
|
+
text-overflow: ellipsis;
|
|
513
|
+
white-space: nowrap;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
517
|
+
* Element highlight ring
|
|
518
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
285
519
|
.notes-highlight {
|
|
286
520
|
position: fixed;
|
|
287
521
|
pointer-events: none;
|
|
288
522
|
border: 2px solid var(--notes-accent);
|
|
289
|
-
border-radius:
|
|
290
|
-
box-shadow: 0 0 0
|
|
523
|
+
border-radius: 3px;
|
|
524
|
+
box-shadow: 0 0 0 3px var(--notes-accent-ring);
|
|
291
525
|
transition: all 0.08s ease-out;
|
|
292
526
|
}
|
|
293
527
|
|
|
294
528
|
.notes-highlight--persistent {
|
|
295
|
-
border-color: rgba(
|
|
296
|
-
box-shadow: 0 0 0 3px
|
|
529
|
+
border-color: rgba(37, 99, 235, 0.55);
|
|
530
|
+
box-shadow: 0 0 0 3px var(--notes-accent-soft);
|
|
297
531
|
}
|
|
298
532
|
|
|
299
|
-
/*
|
|
533
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
534
|
+
* Popover (comment + suggest)
|
|
535
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
300
536
|
.notes-popover {
|
|
301
537
|
position: fixed;
|
|
302
538
|
width: 320px;
|
|
303
539
|
background: var(--notes-bg);
|
|
304
540
|
border: 1px solid var(--notes-border);
|
|
305
541
|
border-radius: var(--notes-radius);
|
|
306
|
-
box-shadow: var(--notes-shadow);
|
|
542
|
+
box-shadow: var(--notes-shadow-lg);
|
|
307
543
|
padding: 14px;
|
|
308
544
|
pointer-events: auto;
|
|
309
545
|
display: flex;
|
|
@@ -312,49 +548,55 @@ textarea {
|
|
|
312
548
|
}
|
|
313
549
|
|
|
314
550
|
.notes-popover__title {
|
|
315
|
-
font-size:
|
|
551
|
+
font-size: 12px;
|
|
316
552
|
font-weight: 600;
|
|
317
553
|
margin: 0;
|
|
554
|
+
color: var(--notes-fg);
|
|
555
|
+
letter-spacing: -0.01em;
|
|
318
556
|
}
|
|
319
557
|
|
|
320
558
|
.notes-popover__snippet {
|
|
321
|
-
font-size:
|
|
322
|
-
color: var(--notes-muted);
|
|
323
|
-
background:
|
|
324
|
-
border-left:
|
|
559
|
+
font-size: 11px;
|
|
560
|
+
color: var(--notes-fg-muted);
|
|
561
|
+
background: var(--notes-bg-soft);
|
|
562
|
+
border-left: 2px solid var(--notes-border);
|
|
325
563
|
padding: 6px 8px;
|
|
326
|
-
border-radius: 0
|
|
564
|
+
border-radius: 0 3px 3px 0;
|
|
327
565
|
max-height: 60px;
|
|
328
566
|
overflow: hidden;
|
|
329
567
|
}
|
|
330
568
|
|
|
331
569
|
.notes-popover textarea {
|
|
332
570
|
width: 100%;
|
|
333
|
-
min-height:
|
|
571
|
+
min-height: 78px;
|
|
334
572
|
resize: vertical;
|
|
335
573
|
border: 1px solid var(--notes-border);
|
|
336
|
-
border-radius:
|
|
574
|
+
border-radius: var(--notes-radius-sm);
|
|
337
575
|
padding: 8px 10px;
|
|
338
|
-
background:
|
|
576
|
+
background: var(--notes-bg);
|
|
339
577
|
outline: none;
|
|
578
|
+
font-size: 12.5px;
|
|
579
|
+
line-height: 1.5;
|
|
340
580
|
}
|
|
341
581
|
|
|
342
582
|
.notes-popover textarea:focus {
|
|
343
583
|
border-color: var(--notes-accent);
|
|
344
|
-
box-shadow: 0 0 0 3px
|
|
584
|
+
box-shadow: 0 0 0 3px var(--notes-accent-ring);
|
|
345
585
|
}
|
|
346
586
|
|
|
347
587
|
.notes-popover input[type='text'] {
|
|
348
588
|
border: 1px solid var(--notes-border);
|
|
349
|
-
border-radius:
|
|
589
|
+
border-radius: var(--notes-radius-sm);
|
|
350
590
|
padding: 6px 10px;
|
|
351
|
-
background:
|
|
591
|
+
background: var(--notes-bg);
|
|
352
592
|
outline: none;
|
|
593
|
+
font-size: 12px;
|
|
594
|
+
width: 100%;
|
|
353
595
|
}
|
|
354
596
|
|
|
355
597
|
.notes-popover input[type='text']:focus {
|
|
356
598
|
border-color: var(--notes-accent);
|
|
357
|
-
box-shadow: 0 0 0 3px
|
|
599
|
+
box-shadow: 0 0 0 3px var(--notes-accent-ring);
|
|
358
600
|
}
|
|
359
601
|
|
|
360
602
|
.notes-popover__row {
|
|
@@ -369,21 +611,25 @@ textarea {
|
|
|
369
611
|
position: fixed;
|
|
370
612
|
display: flex;
|
|
371
613
|
align-items: center;
|
|
372
|
-
gap:
|
|
373
|
-
padding: 4px
|
|
614
|
+
gap: 4px;
|
|
615
|
+
padding: 4px 5px;
|
|
374
616
|
background: #0f172a;
|
|
375
617
|
color: #ffffff;
|
|
376
|
-
border-radius:
|
|
618
|
+
border-radius: 6px;
|
|
377
619
|
box-shadow: var(--notes-shadow);
|
|
378
620
|
pointer-events: auto;
|
|
379
621
|
z-index: calc(var(--notes-z) + 5);
|
|
380
622
|
}
|
|
381
623
|
|
|
382
624
|
.notes-selection-tooltip .notes-btn {
|
|
383
|
-
background: rgba(255, 255, 255, 0.
|
|
625
|
+
background: rgba(255, 255, 255, 0.06);
|
|
384
626
|
color: #ffffff;
|
|
385
|
-
font-size:
|
|
386
|
-
padding: 4px
|
|
627
|
+
font-size: 11px;
|
|
628
|
+
padding: 4px 9px;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.notes-selection-tooltip .notes-btn:hover {
|
|
632
|
+
background: rgba(255, 255, 255, 0.14);
|
|
387
633
|
}
|
|
388
634
|
|
|
389
635
|
.notes-selection-tooltip .notes-btn--primary {
|
|
@@ -391,12 +637,16 @@ textarea {
|
|
|
391
637
|
color: var(--notes-accent-fg);
|
|
392
638
|
}
|
|
393
639
|
|
|
640
|
+
.notes-selection-tooltip .notes-btn--primary:hover {
|
|
641
|
+
background: var(--notes-accent-hover);
|
|
642
|
+
}
|
|
643
|
+
|
|
394
644
|
.notes-selection-tooltip .notes-btn--ghost {
|
|
395
645
|
color: #e2e8f0;
|
|
396
646
|
}
|
|
397
647
|
|
|
398
648
|
.notes-selection-tooltip .notes-btn--ghost:hover {
|
|
399
|
-
background: rgba(255, 255, 255, 0.
|
|
649
|
+
background: rgba(255, 255, 255, 0.14);
|
|
400
650
|
color: #ffffff;
|
|
401
651
|
}
|
|
402
652
|
|
|
@@ -407,20 +657,20 @@ textarea {
|
|
|
407
657
|
|
|
408
658
|
.notes-popover__label {
|
|
409
659
|
display: block;
|
|
410
|
-
font-size:
|
|
660
|
+
font-size: 10px;
|
|
411
661
|
font-weight: 600;
|
|
412
662
|
text-transform: uppercase;
|
|
413
|
-
letter-spacing: 0.
|
|
414
|
-
color: var(--notes-
|
|
663
|
+
letter-spacing: 0.06em;
|
|
664
|
+
color: var(--notes-fg-subtle);
|
|
415
665
|
margin-bottom: 4px;
|
|
416
666
|
}
|
|
417
667
|
|
|
418
668
|
.notes-popover__original {
|
|
419
|
-
background:
|
|
420
|
-
border: 1px solid
|
|
421
|
-
border-radius:
|
|
669
|
+
background: var(--notes-warn-soft);
|
|
670
|
+
border: 1px solid var(--notes-warn-border);
|
|
671
|
+
border-radius: var(--notes-radius-sm);
|
|
422
672
|
padding: 8px 10px;
|
|
423
|
-
font-size:
|
|
673
|
+
font-size: 12px;
|
|
424
674
|
color: #78350f;
|
|
425
675
|
max-height: 80px;
|
|
426
676
|
overflow-y: auto;
|
|
@@ -430,15 +680,17 @@ textarea {
|
|
|
430
680
|
|
|
431
681
|
.notes-strikethrough {
|
|
432
682
|
text-decoration: line-through;
|
|
433
|
-
text-decoration-color: rgba(220, 38, 38, 0.
|
|
434
|
-
text-decoration-thickness:
|
|
683
|
+
text-decoration-color: rgba(220, 38, 38, 0.55);
|
|
684
|
+
text-decoration-thickness: 1.5px;
|
|
435
685
|
}
|
|
436
686
|
|
|
437
|
-
/*
|
|
687
|
+
/* ──────────────────────────────────────────────────────────────────
|
|
688
|
+
* Diff preview
|
|
689
|
+
* ────────────────────────────────────────────────────────────────── */
|
|
438
690
|
.notes-diff {
|
|
439
|
-
font-size:
|
|
440
|
-
border-radius:
|
|
441
|
-
background:
|
|
691
|
+
font-size: 12px;
|
|
692
|
+
border-radius: var(--notes-radius-sm);
|
|
693
|
+
background: var(--notes-bg-soft);
|
|
442
694
|
border: 1px solid var(--notes-border);
|
|
443
695
|
overflow: hidden;
|
|
444
696
|
margin-bottom: 8px;
|
|
@@ -450,6 +702,7 @@ textarea {
|
|
|
450
702
|
gap: 6px;
|
|
451
703
|
white-space: pre-wrap;
|
|
452
704
|
word-break: break-word;
|
|
705
|
+
line-height: 1.5;
|
|
453
706
|
}
|
|
454
707
|
|
|
455
708
|
.notes-diff__row--del {
|
|
@@ -465,15 +718,16 @@ textarea {
|
|
|
465
718
|
|
|
466
719
|
.notes-diff__marker {
|
|
467
720
|
font-weight: 700;
|
|
468
|
-
font-family: ui-monospace,
|
|
469
|
-
width:
|
|
721
|
+
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
722
|
+
width: 11px;
|
|
470
723
|
flex-shrink: 0;
|
|
471
724
|
text-align: center;
|
|
725
|
+
font-size: 11px;
|
|
472
726
|
}
|
|
473
727
|
|
|
474
728
|
.notes-item__rationale {
|
|
475
|
-
font-size:
|
|
476
|
-
color: var(--notes-muted);
|
|
729
|
+
font-size: 11px;
|
|
730
|
+
color: var(--notes-fg-muted);
|
|
477
731
|
margin-bottom: 6px;
|
|
478
732
|
font-style: italic;
|
|
479
733
|
}
|
|
@@ -490,37 +744,33 @@ textarea {
|
|
|
490
744
|
display: flex;
|
|
491
745
|
align-items: center;
|
|
492
746
|
gap: 6px;
|
|
493
|
-
background:
|
|
494
|
-
border: 1px solid
|
|
747
|
+
background: var(--notes-warn-soft);
|
|
748
|
+
border: 1px solid var(--notes-warn-border);
|
|
495
749
|
color: #92400e;
|
|
496
|
-
font-size:
|
|
497
|
-
padding:
|
|
498
|
-
border-radius:
|
|
750
|
+
font-size: 11px;
|
|
751
|
+
padding: 5px 8px;
|
|
752
|
+
border-radius: var(--notes-radius-sm);
|
|
499
753
|
margin-bottom: 8px;
|
|
500
754
|
}
|
|
501
755
|
|
|
502
756
|
.notes-stale__icon {
|
|
503
|
-
font-size:
|
|
757
|
+
font-size: 12px;
|
|
504
758
|
}
|
|
505
759
|
|
|
506
760
|
/* Persistent highlight variant for suggestion ranges */
|
|
507
761
|
.notes-highlight--suggestion {
|
|
508
|
-
border-color: rgba(
|
|
509
|
-
box-shadow: 0 0 0 3px rgba(
|
|
762
|
+
border-color: rgba(217, 119, 6, 0.85);
|
|
763
|
+
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
|
|
510
764
|
background: rgba(254, 243, 199, 0.25);
|
|
511
765
|
}
|
|
512
766
|
|
|
513
767
|
/* Banner shown when notes API fails to load */
|
|
514
768
|
.notes-banner {
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
left: 16px;
|
|
518
|
-
right: calc(var(--notes-sidebar-w) + 16px);
|
|
519
|
-
padding: 10px 14px;
|
|
520
|
-
background: #fef2f2;
|
|
769
|
+
padding: 9px 12px;
|
|
770
|
+
background: var(--notes-danger-soft);
|
|
521
771
|
border: 1px solid #fecaca;
|
|
522
772
|
color: #991b1b;
|
|
523
|
-
border-radius: var(--notes-radius);
|
|
524
|
-
font-size:
|
|
773
|
+
border-radius: var(--notes-radius-sm);
|
|
774
|
+
font-size: 12px;
|
|
525
775
|
pointer-events: auto;
|
|
526
776
|
}
|