noteloom 0.3.2 → 0.4.0

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.
Files changed (104) hide show
  1. package/README.md +344 -53
  2. package/bin/noteloom.mjs +139 -0
  3. package/dist/canvas.cjs +2 -0
  4. package/dist/canvas.cjs.map +1 -0
  5. package/dist/canvas.d.ts +2 -0
  6. package/dist/canvas.js +5 -0
  7. package/dist/canvas.js.map +1 -0
  8. package/dist/collab.cjs +2 -0
  9. package/dist/collab.cjs.map +1 -0
  10. package/dist/collab.d.ts +19 -0
  11. package/dist/collab.js +379 -0
  12. package/dist/collab.js.map +1 -0
  13. package/dist/comments.cjs +2 -0
  14. package/dist/comments.cjs.map +1 -0
  15. package/dist/comments.d.ts +17 -0
  16. package/dist/comments.js +19 -0
  17. package/dist/comments.js.map +1 -0
  18. package/dist/index.cjs +2 -0
  19. package/dist/index.cjs.map +1 -0
  20. package/dist/index.d.ts +392 -32
  21. package/dist/index.js +3983 -0
  22. package/dist/index.js.map +1 -0
  23. package/dist/persistence.cjs +2 -0
  24. package/dist/persistence.cjs.map +1 -0
  25. package/dist/persistence.d.ts +11 -0
  26. package/dist/persistence.js +12 -0
  27. package/dist/persistence.js.map +1 -0
  28. package/dist/shared/CommentAvatar-TKqsM8vG.js +53 -0
  29. package/dist/shared/CommentAvatar-TKqsM8vG.js.map +1 -0
  30. package/dist/shared/CommentAvatar-V457IgoQ.cjs +2 -0
  31. package/dist/shared/CommentAvatar-V457IgoQ.cjs.map +1 -0
  32. package/dist/shared/CommentThreadCard-CAJ3oPdr.cjs +2 -0
  33. package/dist/shared/CommentThreadCard-CAJ3oPdr.cjs.map +1 -0
  34. package/dist/shared/CommentThreadCard-Cxf8GwHJ.js +213 -0
  35. package/dist/shared/CommentThreadCard-Cxf8GwHJ.js.map +1 -0
  36. package/dist/shared/CommentsPanel-BwVVyMOC.js +76 -0
  37. package/dist/shared/CommentsPanel-BwVVyMOC.js.map +1 -0
  38. package/dist/shared/CommentsPanel-CES4uzye.cjs +2 -0
  39. package/dist/shared/CommentsPanel-CES4uzye.cjs.map +1 -0
  40. package/dist/shared/VersionHistory-Bg6fufP5.js +1120 -0
  41. package/dist/shared/VersionHistory-Bg6fufP5.js.map +1 -0
  42. package/dist/shared/VersionHistory-DELa2Wbq.cjs +12 -0
  43. package/dist/shared/VersionHistory-DELa2Wbq.cjs.map +1 -0
  44. package/dist/shared/VoiceListeningIndicator-BOfVmLK0.js +338 -0
  45. package/dist/shared/VoiceListeningIndicator-BOfVmLK0.js.map +1 -0
  46. package/dist/shared/VoiceListeningIndicator-DNX8JlQM.cjs +2 -0
  47. package/dist/shared/VoiceListeningIndicator-DNX8JlQM.cjs.map +1 -0
  48. package/dist/shared/fieldRegistry-BoYyW3GH.cjs +2 -0
  49. package/dist/shared/fieldRegistry-BoYyW3GH.cjs.map +1 -0
  50. package/dist/shared/fieldRegistry-PjJWXFoB.js +223 -0
  51. package/dist/shared/fieldRegistry-PjJWXFoB.js.map +1 -0
  52. package/dist/shared/icons-C1_s0jKK.js +4269 -0
  53. package/dist/shared/icons-C1_s0jKK.js.map +1 -0
  54. package/dist/shared/icons-DtCsXuU6.cjs +3531 -0
  55. package/dist/shared/icons-DtCsXuU6.cjs.map +1 -0
  56. package/dist/shared/index-B9jyyL8u.js +2145 -0
  57. package/dist/shared/index-B9jyyL8u.js.map +1 -0
  58. package/dist/shared/index-D9WEXpYM.cjs +2 -0
  59. package/dist/shared/index-D9WEXpYM.cjs.map +1 -0
  60. package/dist/shared/indexedDbPersistence-BKlGPFTP.js +112 -0
  61. package/dist/shared/indexedDbPersistence-BKlGPFTP.js.map +1 -0
  62. package/dist/shared/indexedDbPersistence-BWJ1h5Vp.cjs +2 -0
  63. package/dist/shared/indexedDbPersistence-BWJ1h5Vp.cjs.map +1 -0
  64. package/dist/shared/leafBlockFactory-A9eUhSe-.js +335 -0
  65. package/dist/shared/leafBlockFactory-A9eUhSe-.js.map +1 -0
  66. package/dist/shared/leafBlockFactory-Dp382eP8.cjs +2 -0
  67. package/dist/shared/leafBlockFactory-Dp382eP8.cjs.map +1 -0
  68. package/dist/shared/serialize-DWEfk0vU.cjs +3 -0
  69. package/dist/shared/serialize-DWEfk0vU.cjs.map +1 -0
  70. package/dist/shared/serialize-T9Odwx24.js +86 -0
  71. package/dist/shared/serialize-T9Odwx24.js.map +1 -0
  72. package/dist/shared/starter-kit-CY5wzYDf.js +4980 -0
  73. package/dist/shared/starter-kit-CY5wzYDf.js.map +1 -0
  74. package/dist/shared/starter-kit-lPN-NpJ5.cjs +27 -0
  75. package/dist/shared/starter-kit-lPN-NpJ5.cjs.map +1 -0
  76. package/dist/shared/usePopoverEdgeClamp-CDG26jBM.cjs +2 -0
  77. package/dist/shared/usePopoverEdgeClamp-CDG26jBM.cjs.map +1 -0
  78. package/dist/shared/usePopoverEdgeClamp-gmFm0CnI.js +109 -0
  79. package/dist/shared/usePopoverEdgeClamp-gmFm0CnI.js.map +1 -0
  80. package/dist/shared/useServiceWorkerUpdate-BduabXv6.js +94 -0
  81. package/dist/shared/useServiceWorkerUpdate-BduabXv6.js.map +1 -0
  82. package/dist/shared/useServiceWorkerUpdate-DQboGesi.cjs +2 -0
  83. package/dist/shared/useServiceWorkerUpdate-DQboGesi.cjs.map +1 -0
  84. package/dist/starter-kit.cjs +2 -0
  85. package/dist/starter-kit.cjs.map +1 -0
  86. package/dist/starter-kit.d.ts +9 -0
  87. package/dist/starter-kit.js +10 -0
  88. package/dist/starter-kit.js.map +1 -0
  89. package/dist/style.css +3529 -3200
  90. package/dist/versions.cjs +2 -0
  91. package/dist/versions.cjs.map +1 -0
  92. package/dist/versions.d.ts +11 -0
  93. package/dist/versions.js +13 -0
  94. package/dist/versions.js.map +1 -0
  95. package/dist/voice.cjs +2 -0
  96. package/dist/voice.cjs.map +1 -0
  97. package/dist/voice.d.ts +7 -0
  98. package/dist/voice.js +8 -0
  99. package/dist/voice.js.map +1 -0
  100. package/package.json +159 -92
  101. package/dist/noteloom.cjs +0 -3209
  102. package/dist/noteloom.cjs.map +0 -1
  103. package/dist/noteloom.es.js +0 -14622
  104. package/dist/noteloom.es.js.map +0 -1
@@ -0,0 +1,3531 @@
1
+ "use strict";const n=require("react/jsx-runtime"),i=require("react"),mn=`/*
2
+ * noteloom's default theme — minimal, clean, modern SaaS-adjacent.
3
+ *
4
+ * Ships as plain CSS custom properties on :root (not scoped to a wrapper
5
+ * element) deliberately: several of this package's own pieces — Select's
6
+ * popover, SlashMenu, FloatingToolbar, the table header menu, the block
7
+ * gutter/range menus, Modal — are portaled to document.body, so they are
8
+ * NOT DOM descendants of whatever element renders the editor itself.
9
+ * Scoping variables to a wrapper class would silently fail to reach any
10
+ * of those. \`--noteloom-*\` is a distinctive enough prefix that defining
11
+ * these on :root won't collide with a host app's own custom properties.
12
+ *
13
+ * This file is auto-injected at runtime by <EditorProvider> (see
14
+ * react/injectDefaultStyles.js) — you do NOT need to import this
15
+ * yourself. It's still published standalone at \`noteloom/style.css\` for:
16
+ * - passing \`theme="none"\` to <EditorProvider> and importing this
17
+ * explicitly instead (e.g. to control load order, or for SSR/CSP
18
+ * setups where runtime <style> injection isn't allowed)
19
+ * - copying as a starting point for your own from-scratch theme
20
+ *
21
+ * Retheme by overriding these variables in your own CSS (after the
22
+ * default theme loads) — every rule below reads from them, nothing is
23
+ * hardcoded. Override individual \`.be-*\` classes too, same as any other
24
+ * library's default styles.
25
+ */
26
+
27
+ :root {
28
+ --noteloom-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
29
+ --noteloom-text: #0f172a;
30
+ --noteloom-text-muted: #64748b;
31
+ --noteloom-text-faint: #94a3b8;
32
+ --noteloom-bg: #ffffff;
33
+ --noteloom-bg-subtle: #f8fafc;
34
+ --noteloom-bg-hover: #f1f5f9;
35
+ --noteloom-border: #e2e8f0;
36
+ --noteloom-accent: #6366f1;
37
+ --noteloom-accent-text: #ffffff;
38
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
39
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
40
+ --noteloom-danger: #dc2626;
41
+ --noteloom-danger-soft: #fef2f2;
42
+ --noteloom-radius-sm: 6px;
43
+ --noteloom-radius-md: 8px;
44
+ --noteloom-radius-lg: 12px;
45
+ --noteloom-radius-xl: 16px;
46
+ --noteloom-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
47
+ --noteloom-code-bg: #0f172a;
48
+ --noteloom-code-text: #e2e8f0;
49
+ }
50
+
51
+ @media (prefers-color-scheme: dark) {
52
+ :root {
53
+ --noteloom-text: #f1f5f9;
54
+ --noteloom-text-muted: #94a3b8;
55
+ --noteloom-text-faint: #64748b;
56
+ --noteloom-bg: #1c1932;
57
+ --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
58
+ --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
59
+ --noteloom-border: rgba(255, 255, 255, 0.1);
60
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
61
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
62
+ --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
63
+ --noteloom-code-bg: #13111f;
64
+ }
65
+ }
66
+
67
+ /* Explicit overrides win either direction — a host toggling dark mode via
68
+ a class rather than the OS setting can set [data-theme="dark"/"light"]
69
+ on any ancestor (e.g. <html>), overriding the media query above. */
70
+ [data-theme='dark'] {
71
+ --noteloom-text: #f1f5f9;
72
+ --noteloom-text-muted: #94a3b8;
73
+ --noteloom-text-faint: #64748b;
74
+ --noteloom-bg: #1c1932;
75
+ --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
76
+ --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
77
+ --noteloom-border: rgba(255, 255, 255, 0.1);
78
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
79
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
80
+ --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
81
+ --noteloom-code-bg: #13111f;
82
+ }
83
+
84
+ [data-theme='light'] {
85
+ --noteloom-text: #0f172a;
86
+ --noteloom-text-muted: #64748b;
87
+ --noteloom-text-faint: #94a3b8;
88
+ --noteloom-bg: #ffffff;
89
+ --noteloom-bg-subtle: #f8fafc;
90
+ --noteloom-bg-hover: #f1f5f9;
91
+ --noteloom-border: #e2e8f0;
92
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
93
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
94
+ --noteloom-danger-soft: #fef2f2;
95
+ --noteloom-code-bg: #0f172a;
96
+ }
97
+
98
+ .be-root {
99
+ font-family: var(--noteloom-font);
100
+ color: var(--noteloom-text);
101
+ }
102
+
103
+ .be-editable {
104
+ /* Block-level and full-width so the whole line (including the blank
105
+ trailing space after short text, and an empty line's full height) is
106
+ part of the actual contentEditable hit-test box. Left inline/sized to
107
+ content, a click on that blank area lands on the non-editable wrapper
108
+ div instead of this element: the browser's native "nothing focused
109
+ yet" resolution still finds it on a first click, but re-clicking the
110
+ same dead-zone point while this element already holds the selection
111
+ collapses/clears it instead, since there's nothing here to re-anchor
112
+ the caret onto. */
113
+ display: block;
114
+ width: 100%;
115
+ min-height: 1em;
116
+ outline: none;
117
+ }
118
+
119
+ /* A run with marks.commentIds set (see src/comments/commentMarks.js) --
120
+ presence/absence only, no per-comment value to vary the color by.
121
+ cursor: pointer hints that it opens CommentPopover on click. */
122
+ .be-comment-highlight {
123
+ background: rgba(234, 179, 8, 0.2);
124
+ border-bottom: 2px solid rgba(234, 179, 8, 0.6);
125
+ cursor: pointer;
126
+ }
127
+
128
+ /* Echoes a hover from the panel/popover back onto the actual text -- see useHoveredComment. */
129
+ .be-comment-highlight-active {
130
+ background: rgba(234, 179, 8, 0.4);
131
+ }
132
+
133
+ /* --- basic leaf blocks --- */
134
+
135
+ .be-paragraph {
136
+ position: relative;
137
+ margin: 0.25rem 0;
138
+ line-height: 1.6;
139
+ outline: none;
140
+ }
141
+
142
+ .be-heading {
143
+ position: relative;
144
+ font-weight: 600;
145
+ margin: 1.25rem 0 0.25rem;
146
+ outline: none;
147
+ letter-spacing: -0.01em;
148
+ }
149
+
150
+ /* Explicit per-level sizing, each in its own overridable class — without
151
+ this, h1/h2/h3 only differ via the browser's own UA-stylesheet defaults
152
+ (inconsistent across browsers, and not something a host can target
153
+ independently without fighting tag-selector specificity). Override just
154
+ one level with \`.be-heading-1 { font-size: ...; }\` in your own CSS, same
155
+ as any other .be-* class. */
156
+ .be-heading-1 {
157
+ font-size: 1.9em;
158
+ }
159
+
160
+ .be-heading-2 {
161
+ font-size: 1.5em;
162
+ }
163
+
164
+ .be-heading-3 {
165
+ font-size: 1.2em;
166
+ }
167
+
168
+ .be-divider {
169
+ border: none;
170
+ border-top: 1px solid var(--noteloom-border);
171
+ margin: 1.5em 0;
172
+ cursor: default;
173
+ }
174
+
175
+ .be-blockquote {
176
+ position: relative;
177
+ margin: 0.5em 0;
178
+ padding-left: 0.9em;
179
+ border-left: 3px solid var(--noteloom-border);
180
+ color: var(--noteloom-text-muted);
181
+ outline: none;
182
+ }
183
+
184
+ .be-blockquote[dir='rtl'] {
185
+ padding-left: 0;
186
+ padding-right: 0.9em;
187
+ border-left: none;
188
+ border-right: 3px solid var(--noteloom-border);
189
+ }
190
+
191
+ /* --- callout --- */
192
+
193
+ .be-callout {
194
+ position: relative;
195
+ display: flex;
196
+ gap: 0.7em;
197
+ align-items: flex-start;
198
+ background: var(--noteloom-bg-subtle);
199
+ border-radius: var(--noteloom-radius-lg);
200
+ padding: 0.9em 1em;
201
+ margin: 0.5em 0;
202
+ }
203
+
204
+ .be-callout[data-color='gray'] {
205
+ background: rgba(148, 163, 184, 0.16);
206
+ }
207
+ .be-callout[data-color='blue'] {
208
+ background: rgba(99, 102, 241, 0.12);
209
+ }
210
+ .be-callout[data-color='green'] {
211
+ background: rgba(34, 197, 94, 0.14);
212
+ }
213
+ .be-callout[data-color='yellow'] {
214
+ background: rgba(234, 179, 8, 0.16);
215
+ }
216
+ .be-callout[data-color='orange'] {
217
+ background: rgba(249, 115, 22, 0.14);
218
+ }
219
+ .be-callout[data-color='red'] {
220
+ background: rgba(239, 68, 68, 0.13);
221
+ }
222
+ .be-callout[data-color='purple'] {
223
+ background: rgba(168, 85, 247, 0.13);
224
+ }
225
+ .be-callout[data-color='pink'] {
226
+ background: rgba(236, 72, 153, 0.13);
227
+ }
228
+
229
+ .be-callout-icon-wrap {
230
+ flex: none;
231
+ }
232
+
233
+ .be-callout-icon-input,
234
+ .be-callout-icon {
235
+ width: 2em;
236
+ height: 2em;
237
+ border: none;
238
+ background: var(--noteloom-bg);
239
+ border-radius: var(--noteloom-radius-md);
240
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
241
+ font-size: 1.15em;
242
+ display: flex;
243
+ align-items: center;
244
+ justify-content: center;
245
+ padding: 0;
246
+ cursor: pointer;
247
+ }
248
+
249
+ .be-callout-icon-input {
250
+ outline: none;
251
+ text-align: center;
252
+ cursor: text;
253
+ }
254
+
255
+ .be-callout-content {
256
+ flex: 1;
257
+ min-width: 0;
258
+ padding-right: 1.6em; /* keeps text from running under the color-swatch trigger */
259
+ }
260
+
261
+ /* First child reads as the card's title; every child after it is the
262
+ description — see CalloutBlock.jsx's comment for why this is a CSS
263
+ convention over the content, not a separate title/description field. */
264
+ .be-callout-content > :first-child {
265
+ font-weight: 600;
266
+ }
267
+
268
+ .be-callout-content > :not(:first-child) {
269
+ color: var(--noteloom-text-muted);
270
+ font-size: 0.92em;
271
+ }
272
+
273
+ .be-callout-color-wrap {
274
+ position: absolute;
275
+ top: 0.6em;
276
+ right: 0.6em;
277
+ }
278
+
279
+ .be-callout-color-trigger {
280
+ border: none;
281
+ background: none;
282
+ padding: 3px;
283
+ border-radius: var(--noteloom-radius-sm);
284
+ cursor: pointer;
285
+ display: flex;
286
+ }
287
+
288
+ .be-callout-color-trigger:hover {
289
+ background: rgba(15, 23, 42, 0.06);
290
+ }
291
+
292
+ .be-callout-color-dot {
293
+ width: 12px;
294
+ height: 12px;
295
+ border-radius: 50%;
296
+ border: 1px solid rgba(15, 23, 42, 0.12);
297
+ }
298
+
299
+ .be-callout-color-dot-gray {
300
+ background: #94a3b8;
301
+ }
302
+ .be-callout-color-dot-blue {
303
+ background: #6366f1;
304
+ }
305
+ .be-callout-color-dot-green {
306
+ background: #22c55e;
307
+ }
308
+ .be-callout-color-dot-yellow {
309
+ background: #eab308;
310
+ }
311
+ .be-callout-color-dot-orange {
312
+ background: #f97316;
313
+ }
314
+ .be-callout-color-dot-red {
315
+ background: #ef4444;
316
+ }
317
+ .be-callout-color-dot-purple {
318
+ background: #a855f7;
319
+ }
320
+ .be-callout-color-dot-pink {
321
+ background: #ec4899;
322
+ }
323
+
324
+ .be-callout-color-picker {
325
+ position: absolute;
326
+ top: 100%;
327
+ right: 0;
328
+ margin-top: 4px;
329
+ z-index: 1000;
330
+ display: grid;
331
+ grid-template-columns: repeat(4, 1fr);
332
+ gap: 4px;
333
+ padding: 6px;
334
+ background: var(--noteloom-bg);
335
+ border: 1px solid var(--noteloom-border);
336
+ border-radius: var(--noteloom-radius-md);
337
+ box-shadow: var(--noteloom-shadow);
338
+ }
339
+
340
+ .be-callout-color-option {
341
+ width: 22px;
342
+ height: 22px;
343
+ border-radius: 50%;
344
+ border: 2px solid transparent;
345
+ cursor: pointer;
346
+ padding: 0;
347
+ }
348
+
349
+ .be-callout-color-option-gray {
350
+ background: #94a3b8;
351
+ }
352
+ .be-callout-color-option-blue {
353
+ background: #6366f1;
354
+ }
355
+ .be-callout-color-option-green {
356
+ background: #22c55e;
357
+ }
358
+ .be-callout-color-option-yellow {
359
+ background: #eab308;
360
+ }
361
+ .be-callout-color-option-orange {
362
+ background: #f97316;
363
+ }
364
+ .be-callout-color-option-red {
365
+ background: #ef4444;
366
+ }
367
+ .be-callout-color-option-purple {
368
+ background: #a855f7;
369
+ }
370
+ .be-callout-color-option-pink {
371
+ background: #ec4899;
372
+ }
373
+
374
+ .be-callout-color-option-active {
375
+ border-color: var(--noteloom-text);
376
+ }
377
+
378
+ /* --- code block --- */
379
+
380
+ .be-code-block {
381
+ margin: 0.6em 0;
382
+ border-radius: var(--noteloom-radius-lg);
383
+ overflow: hidden;
384
+ background: var(--noteloom-code-bg);
385
+ color: var(--noteloom-code-text);
386
+ }
387
+
388
+ .be-code-block-header {
389
+ display: flex;
390
+ align-items: center;
391
+ justify-content: flex-end;
392
+ gap: 4px;
393
+ padding: 6px 10px;
394
+ background: rgba(255, 255, 255, 0.04);
395
+ }
396
+
397
+ .be-code-block-delete {
398
+ appearance: none;
399
+ -webkit-appearance: none;
400
+ border: none;
401
+ outline: none;
402
+ background: transparent;
403
+ box-shadow: none;
404
+ color: var(--noteloom-text-faint);
405
+ width: 24px;
406
+ height: 24px;
407
+ margin: 0;
408
+ padding: 0;
409
+ display: flex;
410
+ align-items: center;
411
+ justify-content: center;
412
+ border-radius: var(--noteloom-radius-sm);
413
+ cursor: pointer;
414
+ }
415
+
416
+ .be-code-block-delete:hover {
417
+ background: rgba(255, 255, 255, 0.1);
418
+ color: #fca5a5;
419
+ }
420
+
421
+ .be-code-block-language {
422
+ background: transparent;
423
+ color: var(--noteloom-text-faint);
424
+ border: none;
425
+ font-size: 0.8rem;
426
+ cursor: pointer;
427
+ }
428
+
429
+ .be-code-block-pre {
430
+ margin: 0;
431
+ padding: 0.9em 1em;
432
+ overflow-x: auto;
433
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
434
+ font-size: 0.88rem;
435
+ outline: none;
436
+ }
437
+
438
+ .be-code-block-pre code {
439
+ position: relative;
440
+ display: block;
441
+ }
442
+
443
+ .be-code-block-body {
444
+ display: flex;
445
+ align-items: stretch;
446
+ }
447
+
448
+ .be-code-block-gutter {
449
+ flex-shrink: 0;
450
+ display: flex;
451
+ flex-direction: column;
452
+ padding: 0.9em 0.6em 0.9em 1em;
453
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
454
+ font-size: 0.88rem;
455
+ line-height: 1.5;
456
+ color: var(--noteloom-text-faint);
457
+ text-align: right;
458
+ user-select: none;
459
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
460
+ }
461
+
462
+ .be-code-block-body .be-code-block-pre {
463
+ flex: 1;
464
+ min-width: 0;
465
+ line-height: 1.5;
466
+ }
467
+
468
+ /* --- list items (bulleted / numbered / to-do / toggle) --- */
469
+
470
+ .be-list-item {
471
+ margin: 0.1rem 0;
472
+ }
473
+
474
+ .be-list-item-row {
475
+ display: flex;
476
+ align-items: flex-start;
477
+ gap: 0.4em;
478
+ }
479
+
480
+ .be-list-checkbox {
481
+ margin-top: 0.3em;
482
+ width: 16px;
483
+ height: 16px;
484
+ flex: none;
485
+ accent-color: var(--noteloom-accent);
486
+ cursor: pointer;
487
+ }
488
+
489
+ .be-list-toggle-marker {
490
+ border: none;
491
+ background: none;
492
+ cursor: pointer;
493
+ padding: 2px;
494
+ margin-top: 0.1em;
495
+ color: var(--noteloom-text-faint);
496
+ display: flex;
497
+ align-items: center;
498
+ justify-content: center;
499
+ height: 30px;
500
+ width: 30px;
501
+ border-radius: var(--noteloom-radius-sm);
502
+ }
503
+
504
+ .be-list-toggle-marker:hover {
505
+ background: var(--noteloom-bg-hover);
506
+ color: var(--noteloom-text-muted);
507
+ }
508
+
509
+ .be-list-marker {
510
+ min-width: 1.2em;
511
+ margin-top: 0.1em;
512
+ text-align: center;
513
+ color: var(--noteloom-text-faint);
514
+ user-select: none;
515
+ flex: none;
516
+ }
517
+
518
+ .be-list-item-title {
519
+ position: relative;
520
+ flex: 1;
521
+ min-width: 0;
522
+ outline: none;
523
+ line-height: 1.6;
524
+ }
525
+
526
+ .be-list-item-children {
527
+ margin-left: 2.1em;
528
+ }
529
+
530
+ /* --- toggle heading --- */
531
+
532
+ .be-toggle-heading {
533
+ margin: 1.25rem 0 0.25rem;
534
+ }
535
+
536
+ .be-toggle-heading-row {
537
+ display: flex;
538
+ align-items: center;
539
+ gap: 0.15em;
540
+ }
541
+
542
+ .be-toggle-heading-marker {
543
+ border: none;
544
+ background: none;
545
+ cursor: pointer;
546
+ color: var(--noteloom-text-faint);
547
+ display: flex;
548
+ align-items: center;
549
+ justify-content: center;
550
+ width: 30px;
551
+ height: 30px;
552
+ border-radius: var(--noteloom-radius-sm);
553
+ }
554
+
555
+ .be-toggle-heading-marker:hover {
556
+ background: var(--noteloom-bg-hover);
557
+ color: var(--noteloom-text-muted);
558
+ }
559
+
560
+ .be-toggle-heading-title {
561
+ flex: 1;
562
+ min-width: 0;
563
+ }
564
+
565
+ .be-toggle-heading-children {
566
+ margin-left: 2.1em;
567
+ }
568
+
569
+ /* --- layout (multi-column) --- */
570
+
571
+ .be-layout {
572
+ margin: 0.6em 0;
573
+ }
574
+
575
+ .be-layout-column {
576
+ flex: 1;
577
+ min-width: 0;
578
+ }
579
+
580
+ /* --- button block --- */
581
+
582
+ .be-button-block {
583
+ margin: 0.6em 0;
584
+ }
585
+
586
+ .be-button-block-pill {
587
+ display: inline-flex;
588
+ align-items: center;
589
+ gap: 0.4em;
590
+ border-radius: var(--noteloom-radius-md);
591
+ padding: 0.5em 1em;
592
+ color: var(--noteloom-accent-text);
593
+ }
594
+
595
+ .be-button-block-label {
596
+ position: relative;
597
+ outline: none;
598
+ min-width: 2em;
599
+ }
600
+
601
+ /* --- generic empty-state placeholder for editable leaf content ---
602
+ Note: this can't use :empty — an "empty" run still holds a zero-width
603
+ space text node (see EMPTY_RUN_PLACEHOLDER) inside its host span, so the
604
+ wrapper element is never actually childless. data-empty (kept in sync by
605
+ EditableBlockContent's syncEmptyAttr against the *logical* run content,
606
+ not the DOM) is the real signal. */
607
+
608
+ [data-placeholder][data-empty]:focus-within::before {
609
+ content: attr(data-placeholder);
610
+ position: absolute;
611
+ color: var(--noteloom-text-faint);
612
+ font-weight: 400;
613
+ font-style: normal;
614
+ opacity: 0.85;
615
+ pointer-events: none;
616
+ }
617
+
618
+ .be-button-block-open,
619
+ .be-button-block-settings {
620
+ flex: none;
621
+ border: none;
622
+ background: rgba(255, 255, 255, 0.16);
623
+ color: inherit;
624
+ border-radius: var(--noteloom-radius-sm);
625
+ width: 24px;
626
+ height: 24px;
627
+ display: flex;
628
+ align-items: center;
629
+ justify-content: center;
630
+ cursor: pointer;
631
+ }
632
+
633
+ .be-button-block-open:disabled {
634
+ opacity: 0.5;
635
+ cursor: not-allowed;
636
+ }
637
+
638
+ .be-button-block-open:hover:not(:disabled),
639
+ .be-button-block-settings:hover {
640
+ background: rgba(255, 255, 255, 0.28);
641
+ }
642
+
643
+ /* --- embed (image/video/audio/file) --- */
644
+
645
+ .be-embed {
646
+ margin: 0.6em 0;
647
+ }
648
+
649
+ .be-embed-preview {
650
+ position: relative;
651
+ display: flex;
652
+ }
653
+
654
+ .be-embed-align-left {
655
+ justify-content: flex-start;
656
+ }
657
+
658
+ .be-embed-align-center {
659
+ justify-content: center;
660
+ }
661
+
662
+ .be-embed-align-right {
663
+ justify-content: flex-end;
664
+ }
665
+
666
+ .be-embed-frame {
667
+ position: relative;
668
+ max-width: 100%;
669
+ overflow: visible;
670
+ border-radius: var(--noteloom-radius-lg);
671
+ }
672
+
673
+ .be-embed-image,
674
+ .be-embed-video {
675
+ border: 1px solid var(--noteloom-border);
676
+ }
677
+
678
+ .be-embed-image,
679
+ .be-embed-video {
680
+ max-width: 100%;
681
+ display: block;
682
+ border-radius: var(--noteloom-radius-lg);
683
+ }
684
+
685
+ .be-embed-audio {
686
+ width: 100%;
687
+ }
688
+
689
+ .be-embed-oembed {
690
+ width: 100%;
691
+ aspect-ratio: 16 / 9;
692
+ display: block;
693
+ border: 1px solid var(--noteloom-border);
694
+ border-radius: var(--noteloom-radius-lg);
695
+ }
696
+
697
+ .be-embed-file-link {
698
+ display: flex;
699
+ align-items: center;
700
+ gap: 0.5em;
701
+ padding: 0.75em 1em;
702
+ border: 1px solid var(--noteloom-border);
703
+ border-radius: var(--noteloom-radius-xl);
704
+ text-decoration: none;
705
+ color: var(--noteloom-accent);
706
+ font-weight: 500;
707
+ font-size: 0.9rem;
708
+ }
709
+
710
+ .be-embed-file-link:hover {
711
+ background: var(--noteloom-bg-subtle);
712
+ }
713
+
714
+ .be-embed-toolbar {
715
+ position: absolute;
716
+ top: 8px;
717
+ right: 8px;
718
+ z-index: 2;
719
+ display: flex;
720
+ align-items: center;
721
+ gap: 2px;
722
+ padding: 3px;
723
+ background: rgba(15, 23, 42, 0.72);
724
+ border-radius: var(--noteloom-radius-md);
725
+ opacity: 0;
726
+ transition: opacity 0.12s ease;
727
+ }
728
+
729
+ .be-embed-preview:hover .be-embed-toolbar,
730
+ .be-embed-toolbar:focus-within {
731
+ opacity: 1;
732
+ }
733
+
734
+ .be-embed-toolbar-btn {
735
+ border: none;
736
+ background: transparent;
737
+ width: 24px;
738
+ height: 24px;
739
+ display: flex;
740
+ align-items: center;
741
+ justify-content: center;
742
+ color: rgba(255, 255, 255, 0.8);
743
+ border-radius: var(--noteloom-radius-sm);
744
+ cursor: pointer;
745
+ }
746
+
747
+ .be-embed-toolbar-btn:hover {
748
+ background: rgba(255, 255, 255, 0.16);
749
+ color: #fff;
750
+ }
751
+
752
+ .be-embed-toolbar-btn-active {
753
+ background: var(--noteloom-accent);
754
+ color: #fff;
755
+ }
756
+
757
+ .be-embed-alt-text-btn {
758
+ width: auto;
759
+ padding: 0 8px;
760
+ font-size: 0.75rem;
761
+ }
762
+
763
+ .be-embed-remove {
764
+ border: none;
765
+ background: transparent;
766
+ border-radius: var(--noteloom-radius-sm);
767
+ padding: 0 8px;
768
+ height: 24px;
769
+ color: rgba(255, 255, 255, 0.8);
770
+ font-size: 0.75rem;
771
+ cursor: pointer;
772
+ }
773
+
774
+ .be-embed-remove:hover {
775
+ background: rgba(255, 255, 255, 0.16);
776
+ color: #fff;
777
+ }
778
+
779
+ .be-embed-resize-handle {
780
+ position: absolute;
781
+ bottom: 4px;
782
+ right: 4px;
783
+ width: 12px;
784
+ height: 12px;
785
+ cursor: nwse-resize;
786
+ border-radius: 2px;
787
+ border: 1px solid #fff;
788
+ background: var(--noteloom-accent);
789
+ }
790
+
791
+ .be-embed-dropzone {
792
+ border: 1.5px dashed var(--noteloom-border);
793
+ border-radius: var(--noteloom-radius-xl);
794
+ padding: 2.2em;
795
+ display: flex;
796
+ flex-direction: column;
797
+ align-items: center;
798
+ gap: 0.6em;
799
+ text-align: center;
800
+ color: var(--noteloom-text-muted);
801
+ }
802
+
803
+ .be-embed-dropzone-active {
804
+ border-color: var(--noteloom-accent);
805
+ background: var(--noteloom-accent-soft);
806
+ color: var(--noteloom-accent);
807
+ }
808
+
809
+ .be-embed-upload-btn {
810
+ background: var(--noteloom-accent);
811
+ color: var(--noteloom-accent-text);
812
+ border-radius: var(--noteloom-radius-md);
813
+ padding: 0.5em 1.1em;
814
+ cursor: pointer;
815
+ font-size: 0.85rem;
816
+ font-weight: 500;
817
+ }
818
+
819
+ .be-embed-upload-btn input {
820
+ display: none;
821
+ }
822
+
823
+ .be-embed-dropzone-hint {
824
+ font-size: 0.8rem;
825
+ color: var(--noteloom-text-faint);
826
+ }
827
+
828
+ .be-embed-url-row {
829
+ display: flex;
830
+ gap: 6px;
831
+ width: 100%;
832
+ max-width: 360px;
833
+ }
834
+
835
+ .be-embed-url-input {
836
+ flex: 1;
837
+ min-width: 0;
838
+ border: 1px solid var(--noteloom-border);
839
+ border-radius: var(--noteloom-radius-md);
840
+ padding: 0.45em 0.7em;
841
+ background: transparent;
842
+ color: inherit;
843
+ font: inherit;
844
+ font-size: 0.85rem;
845
+ outline: none;
846
+ }
847
+
848
+ .be-embed-url-input:focus {
849
+ border-color: var(--noteloom-accent);
850
+ }
851
+
852
+ .be-embed-url-commit {
853
+ border: none;
854
+ background: var(--noteloom-accent);
855
+ color: var(--noteloom-accent-text);
856
+ border-radius: var(--noteloom-radius-md);
857
+ padding: 0.45em 0.9em;
858
+ cursor: pointer;
859
+ font-size: 0.85rem;
860
+ font-weight: 500;
861
+ }
862
+
863
+ .be-embed-uploading {
864
+ font-size: 0.85rem;
865
+ color: var(--noteloom-text-muted);
866
+ }
867
+
868
+ .be-embed-upload-error {
869
+ display: flex;
870
+ align-items: center;
871
+ gap: 8px;
872
+ width: 100%;
873
+ max-width: 360px;
874
+ background: var(--noteloom-danger-soft);
875
+ color: var(--noteloom-danger);
876
+ border-radius: var(--noteloom-radius-md);
877
+ padding: 0.5em 0.7em;
878
+ font-size: 0.8rem;
879
+ text-align: left;
880
+ }
881
+
882
+ .be-embed-upload-error button {
883
+ margin-left: auto;
884
+ border: none;
885
+ background: transparent;
886
+ color: inherit;
887
+ cursor: pointer;
888
+ font-size: 1rem;
889
+ line-height: 1;
890
+ padding: 0 2px;
891
+ }
892
+
893
+ /* --- canvas (freehand drawing) --- */
894
+
895
+ .be-canvas {
896
+ position: relative;
897
+ display: inline-block;
898
+ margin: 0.6em 0;
899
+ line-height: 0; /* avoids extra inline-block whitespace gap below the <svg> */
900
+ }
901
+
902
+ .be-canvas-surface {
903
+ display: block;
904
+ border: 1px solid var(--noteloom-border);
905
+ border-radius: var(--noteloom-radius-lg);
906
+ background: var(--noteloom-bg);
907
+ max-width: 100%;
908
+ touch-action: none; /* the surface owns its own pointer gestures (drawing/panning), not the browser's default scroll/zoom */
909
+ }
910
+
911
+ .be-canvas-toolbar {
912
+ position: absolute;
913
+ top: 8px;
914
+ right: 8px;
915
+ z-index: 2;
916
+ display: flex;
917
+ flex-wrap: wrap;
918
+ justify-content: flex-end;
919
+ max-width: calc(100% - 16px);
920
+ align-items: center;
921
+ gap: 2px;
922
+ padding: 3px;
923
+ background: rgba(15, 23, 42, 0.72);
924
+ border-radius: var(--noteloom-radius-md);
925
+ opacity: 0;
926
+ transition: opacity 0.12s ease;
927
+ }
928
+
929
+ .be-canvas:hover .be-canvas-toolbar,
930
+ .be-canvas-toolbar:focus-within {
931
+ opacity: 1;
932
+ }
933
+
934
+ .be-canvas-toolbar-btn {
935
+ border: none;
936
+ background: transparent;
937
+ width: 28px;
938
+ height: 24px;
939
+ display: flex;
940
+ align-items: center;
941
+ justify-content: center;
942
+ color: rgba(255, 255, 255, 0.8);
943
+ border-radius: var(--noteloom-radius-sm);
944
+ cursor: pointer;
945
+ }
946
+
947
+ .be-canvas-toolbar-btn:hover {
948
+ background: rgba(255, 255, 255, 0.16);
949
+ color: #fff;
950
+ }
951
+
952
+ .be-canvas-toolbar-btn-active {
953
+ background: var(--noteloom-accent);
954
+ color: #fff;
955
+ }
956
+
957
+ .be-canvas-toolbar-btn:disabled {
958
+ opacity: 0.4;
959
+ cursor: default;
960
+ }
961
+
962
+ .be-canvas-toolbar-btn:disabled:hover {
963
+ background: transparent;
964
+ }
965
+
966
+ .be-canvas-zoom-label {
967
+ border: none;
968
+ background: transparent;
969
+ color: rgba(255, 255, 255, 0.8);
970
+ font-size: 0.75rem;
971
+ min-width: 2.8em;
972
+ padding: 0 2px;
973
+ cursor: pointer;
974
+ border-radius: var(--noteloom-radius-sm);
975
+ }
976
+
977
+ .be-canvas-zoom-label:hover {
978
+ background: rgba(255, 255, 255, 0.16);
979
+ color: #fff;
980
+ }
981
+
982
+ .be-canvas-toolbar-divider {
983
+ width: 1px;
984
+ height: 16px;
985
+ background: rgba(255, 255, 255, 0.24);
986
+ margin: 0 2px;
987
+ }
988
+
989
+ .be-canvas-toolbar-swatch {
990
+ border: 2px solid transparent;
991
+ width: 18px;
992
+ height: 18px;
993
+ border-radius: 50%;
994
+ cursor: pointer;
995
+ padding: 0;
996
+ }
997
+
998
+ .be-canvas-toolbar-swatch-active {
999
+ border-color: #fff;
1000
+ }
1001
+
1002
+ .be-canvas-picker-wrap {
1003
+ position: relative;
1004
+ }
1005
+
1006
+ .be-canvas-picker {
1007
+ position: absolute;
1008
+ top: 100%;
1009
+ right: 0;
1010
+ margin-top: 8px;
1011
+ display: flex;
1012
+ align-items: center;
1013
+ gap: 6px;
1014
+ padding: 8px;
1015
+ background: rgba(15, 23, 42, 0.92);
1016
+ border-radius: var(--noteloom-radius-md);
1017
+ z-index: 3;
1018
+ }
1019
+
1020
+ .be-canvas-shape-picker {
1021
+ flex-wrap: wrap;
1022
+ max-width: 132px;
1023
+ }
1024
+
1025
+ .be-canvas-color-trigger-dot {
1026
+ display: block;
1027
+ width: 14px;
1028
+ height: 14px;
1029
+ border-radius: 50%;
1030
+ border: 1px solid rgba(255, 255, 255, 0.6);
1031
+ }
1032
+
1033
+ .be-canvas-fill-trigger-dot {
1034
+ display: block;
1035
+ width: 14px;
1036
+ height: 14px;
1037
+ border-radius: 50%;
1038
+ border: 1px solid rgba(255, 255, 255, 0.6);
1039
+ }
1040
+
1041
+ .be-canvas-fill-trigger-dot-none,
1042
+ .be-canvas-fill-swatch-none {
1043
+ background: repeating-conic-gradient(rgba(255, 255, 255, 0.5) 0% 25%, transparent 0% 50%) 50% /
1044
+ 8px 8px;
1045
+ }
1046
+
1047
+ .be-canvas-custom-swatch {
1048
+ width: 18px;
1049
+ height: 18px;
1050
+ border-radius: 50%;
1051
+ overflow: hidden;
1052
+ border: 1px dashed rgba(255, 255, 255, 0.6);
1053
+ display: inline-flex;
1054
+ cursor: pointer;
1055
+ flex-shrink: 0;
1056
+ }
1057
+
1058
+ .be-canvas-custom-swatch input[type='color'] {
1059
+ width: 150%;
1060
+ height: 150%;
1061
+ margin: -25%;
1062
+ border: none;
1063
+ padding: 0;
1064
+ cursor: pointer;
1065
+ background: none;
1066
+ }
1067
+
1068
+ /* Live size-preview popover: dot grows/shrinks together with the slider as it's dragged. */
1069
+ .be-canvas-size-picker {
1070
+ min-width: 160px;
1071
+ }
1072
+
1073
+ .be-canvas-size-trigger-dot {
1074
+ display: block;
1075
+ border-radius: 50%;
1076
+ background: #fff;
1077
+ }
1078
+
1079
+ .be-canvas-size-preview {
1080
+ flex-shrink: 0;
1081
+ width: 44px;
1082
+ height: 44px;
1083
+ display: flex;
1084
+ align-items: center;
1085
+ justify-content: center;
1086
+ }
1087
+
1088
+ .be-canvas-size-preview-dot {
1089
+ display: block;
1090
+ border-radius: 50%;
1091
+ background: #fff;
1092
+ }
1093
+
1094
+ .be-canvas-size-slider {
1095
+ flex: 1;
1096
+ min-width: 80px;
1097
+ }
1098
+
1099
+ .be-canvas-font-size-trigger {
1100
+ display: block;
1101
+ font-size: 13px;
1102
+ font-weight: 600;
1103
+ line-height: 1;
1104
+ color: rgba(255, 255, 255, 0.85);
1105
+ }
1106
+
1107
+ .be-canvas-font-size-preview-letter {
1108
+ display: block;
1109
+ line-height: 1;
1110
+ color: #fff;
1111
+ font-weight: 600;
1112
+ }
1113
+
1114
+ .be-canvas-size-value {
1115
+ flex-shrink: 0;
1116
+ min-width: 2.5em;
1117
+ text-align: right;
1118
+ font-size: 0.8rem;
1119
+ color: rgba(255, 255, 255, 0.85);
1120
+ }
1121
+
1122
+ .be-canvas[data-tool='eraser'] .be-canvas-surface {
1123
+ cursor: cell;
1124
+ }
1125
+
1126
+ .be-canvas[data-tool='select'] .be-canvas-surface {
1127
+ cursor: default;
1128
+ }
1129
+
1130
+ .be-canvas-selection-box {
1131
+ stroke: var(--noteloom-accent);
1132
+ stroke-width: 1.5;
1133
+ stroke-dasharray: 6 4;
1134
+ vector-effect: non-scaling-stroke;
1135
+ pointer-events: none;
1136
+ }
1137
+
1138
+ .be-canvas-selection-handle {
1139
+ fill: #fff;
1140
+ stroke: var(--noteloom-accent);
1141
+ stroke-width: 1.5;
1142
+ vector-effect: non-scaling-stroke;
1143
+ pointer-events: none;
1144
+ }
1145
+
1146
+ .be-canvas-rotate-handle {
1147
+ fill: var(--noteloom-accent);
1148
+ stroke: #fff;
1149
+ stroke-width: 1.5;
1150
+ vector-effect: non-scaling-stroke;
1151
+ pointer-events: none;
1152
+ }
1153
+
1154
+ .be-canvas-marquee {
1155
+ fill: color-mix(in srgb, var(--noteloom-accent) 12%, transparent);
1156
+ stroke: var(--noteloom-accent);
1157
+ stroke-width: 1.5;
1158
+ stroke-dasharray: 6 4;
1159
+ vector-effect: non-scaling-stroke;
1160
+ pointer-events: none;
1161
+ }
1162
+
1163
+ .be-canvas-grid-background {
1164
+ pointer-events: none;
1165
+ }
1166
+
1167
+ .be-canvas-grid-dot {
1168
+ fill: rgba(255, 255, 255, 0.18);
1169
+ }
1170
+
1171
+ .be-canvas-text-editor {
1172
+ width: 100%;
1173
+ height: 100%;
1174
+ margin: 0;
1175
+ padding: 0;
1176
+ border: 1px dashed var(--noteloom-accent);
1177
+ outline: none;
1178
+ background: transparent;
1179
+ resize: none;
1180
+ overflow: hidden;
1181
+ line-height: 1.3;
1182
+ font-family: inherit;
1183
+ white-space: pre-wrap;
1184
+ word-break: break-word;
1185
+ }
1186
+
1187
+ .be-canvas-resize-handle {
1188
+ position: absolute;
1189
+ bottom: 4px;
1190
+ right: 4px;
1191
+ width: 12px;
1192
+ height: 12px;
1193
+ cursor: nwse-resize;
1194
+ border-radius: 2px;
1195
+ border: 1px solid #fff;
1196
+ background: var(--noteloom-accent);
1197
+ }
1198
+
1199
+ /* --- table --- */
1200
+
1201
+ .be-table-scroll {
1202
+ max-width: 100%;
1203
+ overflow-x: auto;
1204
+ }
1205
+
1206
+ .be-table-wrapper {
1207
+ margin: 0.9em 0;
1208
+ overflow-x: auto;
1209
+ border: 1px solid var(--noteloom-border);
1210
+ border-radius: var(--noteloom-radius-lg);
1211
+ width: max-content;
1212
+ }
1213
+
1214
+ .be-table {
1215
+ border-collapse: collapse;
1216
+ table-layout: fixed;
1217
+ /* Deliberately no width:100% — combined with table-layout:fixed and each
1218
+ column's own <col> width, that would make the browser redistribute
1219
+ leftover space proportionally across columns, fighting individual
1220
+ column resize (see be-table-col-resize-handle). */
1221
+ }
1222
+
1223
+ .be-table-header-row {
1224
+ background: var(--noteloom-bg-subtle);
1225
+ }
1226
+
1227
+ .be-table-header-cell {
1228
+ position: relative;
1229
+ border-bottom: 1px solid var(--noteloom-border);
1230
+ border-right: 1px solid var(--noteloom-border);
1231
+ padding: 6px 10px;
1232
+ }
1233
+
1234
+ .be-table-header-label {
1235
+ display: block;
1236
+ width: 100%;
1237
+ border: none;
1238
+ background: none;
1239
+ font: inherit;
1240
+ font-weight: 600;
1241
+ font-size: 0.78rem;
1242
+ color: var(--noteloom-text-muted);
1243
+ outline: none;
1244
+ overflow: hidden;
1245
+ text-overflow: ellipsis;
1246
+ white-space: nowrap;
1247
+ padding: 2px 0;
1248
+ }
1249
+
1250
+ .be-table-header-menu-trigger {
1251
+ position: absolute;
1252
+ right: 4px;
1253
+ top: 50%;
1254
+ transform: translateY(-50%);
1255
+ visibility: hidden;
1256
+ border: none;
1257
+ background: transparent;
1258
+ border-radius: var(--noteloom-radius-sm);
1259
+ padding: 2px;
1260
+ color: var(--noteloom-text-faint);
1261
+ cursor: pointer;
1262
+ }
1263
+
1264
+ .be-table-header-cell:hover .be-table-header-menu-trigger {
1265
+ visibility: visible;
1266
+ }
1267
+
1268
+ .be-table-header-menu-trigger:hover {
1269
+ background: var(--noteloom-bg-hover);
1270
+ }
1271
+
1272
+ .be-table-col-resize-handle {
1273
+ position: absolute;
1274
+ top: 0;
1275
+ right: -3px;
1276
+ width: 6px;
1277
+ height: 100%;
1278
+ cursor: col-resize;
1279
+ z-index: 1;
1280
+ }
1281
+
1282
+ .be-table-col-resize-handle:hover,
1283
+ .be-table-col-resize-handle:active {
1284
+ background: var(--noteloom-accent-soft-hover);
1285
+ }
1286
+
1287
+ .be-table-header-spacer {
1288
+ border-bottom: 1px solid var(--noteloom-border);
1289
+ }
1290
+
1291
+ .be-table-header-spacer-col {
1292
+ width: 32px;
1293
+ }
1294
+
1295
+ .be-table-header-menu {
1296
+ z-index: 1000;
1297
+ width: 224px;
1298
+ border-radius: var(--noteloom-radius-lg);
1299
+ border: 1px solid var(--noteloom-border);
1300
+ background: var(--noteloom-bg);
1301
+ padding: 4px;
1302
+ font-size: 0.88rem;
1303
+ box-shadow: var(--noteloom-shadow);
1304
+ }
1305
+
1306
+ .be-table-header-menu-options {
1307
+ z-index: 1000;
1308
+ padding: 4px;
1309
+ font-size: 0.88rem;
1310
+ border-bottom: 1px solid var(--noteloom-border);
1311
+ margin-bottom: 4px;
1312
+ }
1313
+
1314
+ .be-table-header-menu-field-type {
1315
+ display: flex;
1316
+ flex-direction: column;
1317
+ gap: 4px;
1318
+ padding: 4px;
1319
+ border-bottom: 1px solid var(--noteloom-border);
1320
+ margin-bottom: 4px;
1321
+ }
1322
+
1323
+ .be-table-header-menu-field-type .be-select {
1324
+ width: 100%;
1325
+ }
1326
+
1327
+ .be-table-header-menu-field-type .be-select-trigger {
1328
+ width: 100%;
1329
+ }
1330
+
1331
+ .be-table-header-menu-type {
1332
+ display: flex;
1333
+ flex-direction: row;
1334
+ justify-content: space-between;
1335
+ padding: 6px;
1336
+ border-bottom: 1px solid var(--noteloom-border);
1337
+ margin-bottom: 4px;
1338
+ }
1339
+
1340
+ .be-table-header-type-select {
1341
+ width: 100%;
1342
+ border: 1px solid var(--noteloom-border);
1343
+ border-radius: var(--noteloom-radius-sm);
1344
+ padding: 6px 8px;
1345
+ background: transparent;
1346
+ color: inherit;
1347
+ font: inherit;
1348
+ font-size: 0.85rem;
1349
+ }
1350
+
1351
+ .be-table-header-menu-item {
1352
+ display: flex;
1353
+ align-items: center;
1354
+ gap: 8px;
1355
+ width: 100%;
1356
+ text-align: left;
1357
+ border: none;
1358
+ border-radius: var(--noteloom-radius-sm);
1359
+ background: transparent;
1360
+ padding: 6px 10px;
1361
+ font: inherit;
1362
+ font-size: 0.88rem;
1363
+ color: var(--noteloom-text);
1364
+ cursor: pointer;
1365
+ }
1366
+
1367
+ .be-table-header-menu-item:hover {
1368
+ background: var(--noteloom-bg-hover);
1369
+ }
1370
+
1371
+ .be-table-header-menu-item-danger {
1372
+ color: var(--noteloom-danger);
1373
+ }
1374
+
1375
+ .be-table-header-menu-sort {
1376
+ display: flex;
1377
+ flex-direction: column;
1378
+ border-bottom: 1px solid var(--noteloom-border);
1379
+ margin-bottom: 4px;
1380
+ padding-bottom: 4px;
1381
+ }
1382
+
1383
+ .be-table-header-menu-filter {
1384
+ display: flex;
1385
+ flex-direction: column;
1386
+ gap: 4px;
1387
+ padding: 6px;
1388
+ border-bottom: 1px solid var(--noteloom-border);
1389
+ margin-bottom: 4px;
1390
+ font-size: 0.8rem;
1391
+ color: var(--noteloom-text-muted);
1392
+ }
1393
+
1394
+ .be-table-header-menu-filter-input {
1395
+ border: 1px solid var(--noteloom-border);
1396
+ border-radius: var(--noteloom-radius-sm);
1397
+ padding: 6px 8px;
1398
+ font: inherit;
1399
+ font-size: 0.85rem;
1400
+ color: var(--noteloom-text);
1401
+ background: transparent;
1402
+ }
1403
+
1404
+ .be-table-header-menu-filter-input:focus {
1405
+ outline: none;
1406
+ border-color: var(--noteloom-accent);
1407
+ }
1408
+
1409
+ .be-table-footer-row {
1410
+ border-top: 1px solid var(--noteloom-border);
1411
+ }
1412
+
1413
+ .be-table-footer-cell {
1414
+ padding: 6px 10px;
1415
+ font-size: 0.82rem;
1416
+ color: var(--noteloom-text-muted);
1417
+ white-space: nowrap;
1418
+ }
1419
+
1420
+ .be-table-footer-label {
1421
+ font-weight: 600;
1422
+ margin-right: 4px;
1423
+ }
1424
+
1425
+ .be-table-footer-spacer {
1426
+ padding: 0;
1427
+ }
1428
+
1429
+ .be-table-header-menu-item-danger:hover {
1430
+ background: var(--noteloom-danger-soft);
1431
+ }
1432
+
1433
+ .be-table-header-menu-options-label {
1434
+ font-size: 0.68rem;
1435
+ text-transform: uppercase;
1436
+ letter-spacing: 0.04em;
1437
+ font-weight: 600;
1438
+ color: var(--noteloom-text-faint);
1439
+ padding: 6px 8px 2px;
1440
+ }
1441
+
1442
+ .be-table-header-menu-option-row {
1443
+ display: flex;
1444
+ align-items: center;
1445
+ gap: 6px;
1446
+ padding: 2px 4px;
1447
+ }
1448
+
1449
+ .be-table-header-menu-option-swatch {
1450
+ width: 14px;
1451
+ height: 14px;
1452
+ border-radius: 50%;
1453
+ flex: none;
1454
+ }
1455
+
1456
+ .be-table-header-menu-option-input {
1457
+ flex: 1;
1458
+ min-width: 0;
1459
+ border: none;
1460
+ background: transparent;
1461
+ color: inherit;
1462
+ font: inherit;
1463
+ font-size: 0.85rem;
1464
+ padding: 4px 6px;
1465
+ border-radius: var(--noteloom-radius-sm);
1466
+ outline: none;
1467
+ }
1468
+
1469
+ .be-table-header-menu-option-input:focus {
1470
+ background: var(--noteloom-bg-hover);
1471
+ }
1472
+
1473
+ .be-table-header-menu-option-remove,
1474
+ .be-table-header-menu-option-add {
1475
+ flex: none;
1476
+ border: none;
1477
+ background: transparent;
1478
+ color: var(--noteloom-text-faint);
1479
+ cursor: pointer;
1480
+ padding: 3px;
1481
+ display: flex;
1482
+ align-items: center;
1483
+ justify-content: center;
1484
+ border-radius: var(--noteloom-radius-sm);
1485
+ }
1486
+
1487
+ .be-table-header-menu-option-remove:hover {
1488
+ background: var(--noteloom-danger-soft);
1489
+ color: var(--noteloom-danger);
1490
+ }
1491
+
1492
+ .be-table-header-menu-option-add {
1493
+ color: var(--noteloom-text-muted);
1494
+ }
1495
+
1496
+ .be-table-header-menu-option-add:hover {
1497
+ background: var(--noteloom-bg-hover);
1498
+ }
1499
+
1500
+ .be-table-row:hover {
1501
+ background: var(--noteloom-bg-subtle);
1502
+ }
1503
+
1504
+ .be-table-cell {
1505
+ border-bottom: 1px solid var(--noteloom-border);
1506
+ border-right: 1px solid var(--noteloom-border);
1507
+ padding: 6px 10px;
1508
+ vertical-align: top;
1509
+ outline: none;
1510
+ font-size: 0.92rem;
1511
+ /* table-layout: fixed already keeps the COLUMN width from growing to fit
1512
+ content — this is what stops a long unbroken string (a URL, one giant
1513
+ word) from visually overflowing past that fixed width instead of
1514
+ wrapping onto a new line within the cell. */
1515
+ max-width: 0;
1516
+ overflow-wrap: anywhere;
1517
+ word-break: break-word;
1518
+ }
1519
+
1520
+ .be-table-cell:focus-within {
1521
+ box-shadow: inset 0 0 0 2px var(--noteloom-accent);
1522
+ border-radius: 2px;
1523
+ }
1524
+
1525
+ .be-table-row-actions {
1526
+ width: 32px;
1527
+ text-align: center;
1528
+ vertical-align: middle;
1529
+ border: none;
1530
+ background: transparent;
1531
+ padding: 0;
1532
+ }
1533
+
1534
+ .be-table-delete-row {
1535
+ visibility: hidden;
1536
+ border: none;
1537
+ background: transparent;
1538
+ color: var(--noteloom-text-faint);
1539
+ cursor: pointer;
1540
+ width: 24px;
1541
+ height: 24px;
1542
+ display: inline-flex;
1543
+ align-items: center;
1544
+ justify-content: center;
1545
+ border-radius: var(--noteloom-radius-sm);
1546
+ }
1547
+
1548
+ tr.be-table-row:hover .be-table-delete-row {
1549
+ visibility: visible;
1550
+ }
1551
+
1552
+ .be-table-delete-row:hover {
1553
+ background: var(--noteloom-danger-soft);
1554
+ color: var(--noteloom-danger);
1555
+ }
1556
+
1557
+ .be-table-add-row {
1558
+ display: block;
1559
+ width: 100%;
1560
+ border: none;
1561
+ background: transparent;
1562
+ text-align: left;
1563
+ padding: 8px 12px;
1564
+ color: var(--noteloom-text-faint);
1565
+ cursor: pointer;
1566
+ font: inherit;
1567
+ font-size: 0.85rem;
1568
+ font-weight: 500;
1569
+ }
1570
+
1571
+ .be-table-add-row:hover {
1572
+ background: var(--noteloom-bg-subtle);
1573
+ color: var(--noteloom-accent);
1574
+ }
1575
+
1576
+ .be-inline-table-select {
1577
+ display: block;
1578
+ }
1579
+
1580
+ .be-inline-table-select .be-select {
1581
+ width: 100%;
1582
+ }
1583
+
1584
+ .be-inline-table-select .be-select .be-select-tag {
1585
+ width: -webkit-fill-available;
1586
+ }
1587
+
1588
+ .be-inline-table-select .be-select-trigger {
1589
+ display: flex;
1590
+ width: 100%;
1591
+ min-width: 0;
1592
+ min-height: 0;
1593
+ border: none;
1594
+ border-radius: var(--noteloom-radius-sm);
1595
+ background: transparent;
1596
+ padding: 0;
1597
+ font: inherit;
1598
+ font-size: 0.92rem;
1599
+ }
1600
+
1601
+ .be-inline-table-select .be-select-trigger:hover,
1602
+ .be-inline-table-select .be-select-trigger[aria-expanded='true'] {
1603
+ background: var(--noteloom-bg-hover);
1604
+ box-shadow: none;
1605
+ }
1606
+
1607
+ /* --- per-block hover gutter (+ / drag-handle / menu) --- */
1608
+
1609
+ .be-block-row {
1610
+ position: relative;
1611
+ }
1612
+
1613
+ .be-block-row-hidden {
1614
+ opacity: 0.4;
1615
+ }
1616
+
1617
+ .be-block-gutter {
1618
+ position: absolute;
1619
+ left: -56px;
1620
+ top: 0.15em;
1621
+ display: flex;
1622
+ gap: 2px;
1623
+ opacity: 0;
1624
+ transition: opacity 0.1s ease;
1625
+ user-select: none; /* it's a drag handle (see useBlockRangeDrag) — never let its own space become selectable text */
1626
+ }
1627
+
1628
+ /* \`left\`/\`right\` are physical, not logical, properties — unlike the list
1629
+ marker's flexbox position (which flips for free via dir inheritance),
1630
+ this absolute offset needs an explicit RTL override to sit on the
1631
+ correct side of the block. */
1632
+ [dir='rtl'] .be-block-gutter {
1633
+ left: auto;
1634
+ right: -56px;
1635
+ }
1636
+
1637
+ .be-block-row:hover .be-block-gutter,
1638
+ .be-block-gutter-active {
1639
+ opacity: 1;
1640
+ }
1641
+
1642
+ .be-block-gutter-btn {
1643
+ display: flex;
1644
+ align-items: center;
1645
+ justify-content: center;
1646
+ width: 24px;
1647
+ height: 24px;
1648
+ border: none;
1649
+ border-radius: var(--noteloom-radius-sm);
1650
+ background: transparent;
1651
+ color: var(--noteloom-text-faint);
1652
+ cursor: pointer;
1653
+ transition:
1654
+ background-color 0.12s ease,
1655
+ color 0.12s ease;
1656
+ }
1657
+
1658
+ /* Touch: no hover state exists to reveal the gutter at all, and its
1659
+ desktop position (left: -56px, sitting in the page's own side margin)
1660
+ would be off-screen on a narrow phone/tablet viewport regardless — so
1661
+ rather than force it into the row itself, its two actions (Add block,
1662
+ block options menu) live inside MobileActionBar instead (see
1663
+ MobileActionBar.jsx), pinned above the keyboard where they're always
1664
+ reachable. \`.be-touch-input\` is set by useCoarsePointer.js, based on
1665
+ real pointerdown activity, not just a static device-capability guess —
1666
+ see that file for why a plain \`pointer: coarse\` media query alone isn't
1667
+ enough (touchscreen laptops, etc.). */
1668
+ .be-touch-input .be-block-gutter {
1669
+ display: none;
1670
+ }
1671
+
1672
+ .be-block-gutter-btn:hover,
1673
+ .be-block-gutter-btn[aria-expanded='true'] {
1674
+ background: var(--noteloom-bg-hover);
1675
+ color: var(--noteloom-text);
1676
+ }
1677
+
1678
+ .be-block-gutter-menu,
1679
+ .be-block-range-menu {
1680
+ z-index: 1000;
1681
+ min-width: 200px;
1682
+ background: var(--noteloom-bg);
1683
+ border: 1px solid var(--noteloom-border);
1684
+ border-radius: var(--noteloom-radius-lg);
1685
+ box-shadow: var(--noteloom-shadow);
1686
+ padding: 4px;
1687
+ }
1688
+
1689
+ .be-block-gutter-menu-item,
1690
+ .be-block-range-menu-item {
1691
+ display: flex;
1692
+ align-items: center;
1693
+ gap: 8px;
1694
+ width: 100%;
1695
+ text-align: left;
1696
+ border: none;
1697
+ border-radius: var(--noteloom-radius-sm);
1698
+ background: transparent;
1699
+ padding: 7px 10px;
1700
+ font: inherit;
1701
+ font-size: 0.88rem;
1702
+ color: var(--noteloom-text);
1703
+ cursor: pointer;
1704
+ }
1705
+
1706
+ .be-block-gutter-menu-item:hover,
1707
+ .be-block-range-menu-item:hover {
1708
+ background: var(--noteloom-bg-hover);
1709
+ }
1710
+
1711
+ .be-block-gutter-menu-item-danger,
1712
+ .be-block-range-menu-item-danger {
1713
+ color: var(--noteloom-danger);
1714
+ }
1715
+
1716
+ .be-block-gutter-menu-item-danger:hover,
1717
+ .be-block-range-menu-item-danger:hover {
1718
+ background: var(--noteloom-danger-soft);
1719
+ }
1720
+
1721
+ /* --- drag-in-the-margin block range selection --- */
1722
+
1723
+ .be-block-row-range-selected {
1724
+ background: var(--noteloom-accent-soft);
1725
+ border-radius: var(--noteloom-radius-md);
1726
+ margin: 0 -8px;
1727
+ padding: 0 8px;
1728
+ }
1729
+
1730
+ .be-block-range-dragging,
1731
+ .be-block-range-dragging * {
1732
+ user-select: none !important;
1733
+ }
1734
+
1735
+ /* --- whole-document select-all / single non-editable block selected --- */
1736
+
1737
+ .be-surface--all-selected .be-block-row-content > [data-block-id] {
1738
+ background: var(--noteloom-accent-soft);
1739
+ border-radius: var(--noteloom-radius-sm);
1740
+ }
1741
+
1742
+ .be-block-selected {
1743
+ outline: 2px solid var(--noteloom-accent);
1744
+ outline-offset: 2px;
1745
+ border-radius: var(--noteloom-radius-sm);
1746
+ }
1747
+
1748
+ /* --- document export (view source) --- */
1749
+
1750
+ .be-export-trigger {
1751
+ display: inline-flex;
1752
+ align-items: center;
1753
+ gap: 6px;
1754
+ border: 1px solid var(--noteloom-border);
1755
+ background: var(--noteloom-bg);
1756
+ color: var(--noteloom-text-muted);
1757
+ border-radius: var(--noteloom-radius-sm);
1758
+ padding: 5px 10px;
1759
+ font-size: 0.85rem;
1760
+ cursor: pointer;
1761
+ }
1762
+
1763
+ .be-export-trigger:hover {
1764
+ background: var(--noteloom-bg-hover);
1765
+ color: var(--noteloom-text);
1766
+ }
1767
+
1768
+ .be-export-tabs {
1769
+ display: flex;
1770
+ gap: 4px;
1771
+ margin-bottom: 10px;
1772
+ border-bottom: 1px solid var(--noteloom-border);
1773
+ }
1774
+
1775
+ .be-export-tab {
1776
+ border: none;
1777
+ background: transparent;
1778
+ color: var(--noteloom-text-muted);
1779
+ padding: 6px 10px;
1780
+ margin-bottom: -1px;
1781
+ border-bottom: 2px solid transparent;
1782
+ font-size: 0.85rem;
1783
+ font-weight: 500;
1784
+ cursor: pointer;
1785
+ }
1786
+
1787
+ .be-export-tab:hover {
1788
+ color: var(--noteloom-text);
1789
+ }
1790
+
1791
+ .be-export-tab-active {
1792
+ color: var(--noteloom-accent);
1793
+ border-bottom-color: var(--noteloom-accent);
1794
+ }
1795
+
1796
+ .be-export-pre {
1797
+ max-height: 50vh;
1798
+ overflow: auto;
1799
+ margin: 0;
1800
+ padding: 0.9em 1em;
1801
+ border-radius: var(--noteloom-radius-md);
1802
+ background: var(--noteloom-code-bg);
1803
+ color: var(--noteloom-code-text);
1804
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
1805
+ font-size: 0.8rem;
1806
+ line-height: 1.5;
1807
+ white-space: pre-wrap;
1808
+ overflow-wrap: anywhere;
1809
+ }
1810
+
1811
+ /* --- trailing click-to-continue space --- */
1812
+
1813
+ .be-trailing-space {
1814
+ cursor: text;
1815
+ width: 100%;
1816
+ min-height: 180px;
1817
+ }
1818
+
1819
+ /* --- modal (button editor, field type editor) --- */
1820
+
1821
+ .be-modal-overlay {
1822
+ position: fixed;
1823
+ inset: 0;
1824
+ background: rgba(15, 23, 42, 0.45);
1825
+ display: flex;
1826
+ align-items: center;
1827
+ justify-content: center;
1828
+ z-index: 2000;
1829
+ padding: 1em;
1830
+ }
1831
+
1832
+ .be-modal {
1833
+ background: var(--noteloom-bg);
1834
+ color: var(--noteloom-text);
1835
+ border-radius: var(--noteloom-radius-xl);
1836
+ border: 1px solid var(--noteloom-border);
1837
+ padding: 1.4em;
1838
+ width: 100%;
1839
+ max-width: 380px;
1840
+ max-height: 85vh;
1841
+ overflow-y: auto;
1842
+ box-shadow: var(--noteloom-shadow);
1843
+ }
1844
+
1845
+ .be-modal-large {
1846
+ max-width: 640px;
1847
+ }
1848
+
1849
+ /* Bottom sheet variant (mobile block picker) — anchored to the bottom edge
1850
+ instead of centered, rounded only on top, full page width. */
1851
+ .be-modal-overlay-sheet {
1852
+ align-items: flex-end;
1853
+ padding: 0;
1854
+ }
1855
+
1856
+ .be-modal-sheet {
1857
+ max-width: 100%;
1858
+ width: 100%;
1859
+ max-height: 70vh;
1860
+ border-radius: var(--noteloom-radius-xl) var(--noteloom-radius-xl) 0 0;
1861
+ border-bottom: none;
1862
+ padding-bottom: max(1.4em, env(safe-area-inset-bottom));
1863
+ }
1864
+
1865
+ .be-mobile-picker-list {
1866
+ display: flex;
1867
+ flex-direction: column;
1868
+ gap: 2px;
1869
+ }
1870
+
1871
+ .be-mobile-picker-item {
1872
+ display: flex;
1873
+ align-items: center;
1874
+ gap: 10px;
1875
+ width: 100%;
1876
+ border: none;
1877
+ background: transparent;
1878
+ border-radius: var(--noteloom-radius-md);
1879
+ padding: 12px 10px;
1880
+ font: inherit;
1881
+ font-size: 0.95rem;
1882
+ color: var(--noteloom-text);
1883
+ text-align: left;
1884
+ cursor: pointer;
1885
+ }
1886
+
1887
+ .be-mobile-picker-item:hover,
1888
+ .be-mobile-picker-item:active {
1889
+ background: var(--noteloom-bg-hover);
1890
+ }
1891
+
1892
+ .be-mobile-picker-item-danger {
1893
+ color: var(--noteloom-danger);
1894
+ }
1895
+
1896
+ .be-mobile-picker-item-danger:hover,
1897
+ .be-mobile-picker-item-danger:active {
1898
+ background: var(--noteloom-danger-soft);
1899
+ }
1900
+
1901
+ .be-mobile-picker-item-danger .be-mobile-picker-item-icon {
1902
+ color: var(--noteloom-danger);
1903
+ }
1904
+
1905
+ /* --- template picker (see TemplatePicker.jsx) --- */
1906
+
1907
+ .be-template-picker {
1908
+ list-style: none;
1909
+ margin: 0;
1910
+ padding: 0;
1911
+ display: flex;
1912
+ flex-direction: column;
1913
+ gap: 6px;
1914
+ }
1915
+
1916
+ .be-template-picker-empty {
1917
+ color: var(--noteloom-text-faint);
1918
+ font-size: 0.88rem;
1919
+ }
1920
+
1921
+ .be-template-card {
1922
+ display: flex;
1923
+ align-items: center;
1924
+ justify-content: space-between;
1925
+ gap: 12px;
1926
+ padding: 10px 12px;
1927
+ border: 1px solid var(--noteloom-border);
1928
+ border-radius: var(--noteloom-radius-md);
1929
+ background: var(--noteloom-bg);
1930
+ }
1931
+
1932
+ .be-template-card-body {
1933
+ display: flex;
1934
+ flex-direction: column;
1935
+ gap: 2px;
1936
+ min-width: 0;
1937
+ }
1938
+
1939
+ .be-template-card-name {
1940
+ font-weight: 600;
1941
+ font-size: 0.92rem;
1942
+ color: var(--noteloom-text);
1943
+ }
1944
+
1945
+ .be-template-card-description {
1946
+ font-size: 0.82rem;
1947
+ color: var(--noteloom-text-muted);
1948
+ }
1949
+
1950
+ .be-template-card-select {
1951
+ flex: none;
1952
+ border: 1px solid var(--noteloom-border);
1953
+ background: var(--noteloom-bg-subtle);
1954
+ color: var(--noteloom-text);
1955
+ border-radius: var(--noteloom-radius-sm);
1956
+ padding: 5px 12px;
1957
+ font-size: 0.85rem;
1958
+ font-weight: 500;
1959
+ cursor: pointer;
1960
+ }
1961
+
1962
+ .be-template-card-select:hover {
1963
+ background: var(--noteloom-bg-hover);
1964
+ }
1965
+
1966
+ /* --- mobile action bar (pinned above the on-screen keyboard) --- */
1967
+
1968
+ .be-mobile-action-bar {
1969
+ position: fixed;
1970
+ left: 0;
1971
+ right: 0;
1972
+ z-index: 1500;
1973
+ display: flex;
1974
+ align-items: center;
1975
+ gap: 2px;
1976
+ padding: 6px calc(6px + env(safe-area-inset-right)) 6px calc(6px + env(safe-area-inset-left));
1977
+ background: var(--noteloom-bg);
1978
+ border-top: 1px solid var(--noteloom-border);
1979
+ overflow-x: auto;
1980
+ }
1981
+
1982
+ .be-mobile-bar-btn {
1983
+ flex: none;
1984
+ display: flex;
1985
+ align-items: center;
1986
+ justify-content: center;
1987
+ gap: 4px;
1988
+ min-width: 40px;
1989
+ height: 40px;
1990
+ padding: 0 10px;
1991
+ border: none;
1992
+ background: transparent;
1993
+ border-radius: var(--noteloom-radius-sm);
1994
+ color: var(--noteloom-text);
1995
+ font-size: 0.85rem;
1996
+ font-weight: 500;
1997
+ cursor: pointer;
1998
+ }
1999
+
2000
+ .be-mobile-bar-btn:disabled {
2001
+ opacity: 0.4;
2002
+ }
2003
+
2004
+ .be-mobile-bar-btn-active {
2005
+ background: var(--noteloom-accent-soft);
2006
+ color: var(--noteloom-accent);
2007
+ }
2008
+
2009
+ .be-mobile-bar-spacer {
2010
+ flex: 1;
2011
+ }
2012
+
2013
+ .be-mobile-bar-select {
2014
+ flex: none;
2015
+ }
2016
+
2017
+ .be-mobile-bar-swatches {
2018
+ display: flex;
2019
+ align-items: center;
2020
+ gap: 6px;
2021
+ padding: 0 6px;
2022
+ }
2023
+
2024
+ .be-mobile-picker-item-icon {
2025
+ flex: none;
2026
+ display: flex;
2027
+ align-items: center;
2028
+ justify-content: center;
2029
+ width: 32px;
2030
+ height: 32px;
2031
+ border-radius: var(--noteloom-radius-sm);
2032
+ background: var(--noteloom-bg-subtle);
2033
+ color: var(--noteloom-text-muted);
2034
+ }
2035
+
2036
+ .be-modal-title {
2037
+ font-weight: 600;
2038
+ font-size: 1.05rem;
2039
+ margin-bottom: 1em;
2040
+ }
2041
+
2042
+ .be-modal-field {
2043
+ display: block;
2044
+ margin-bottom: 1em;
2045
+ }
2046
+
2047
+ .be-modal-field > span {
2048
+ display: block;
2049
+ font-size: 0.8rem;
2050
+ color: var(--noteloom-text-muted);
2051
+ margin-bottom: 5px;
2052
+ }
2053
+
2054
+ .be-modal-field input[type='text'],
2055
+ .be-modal-field input[type='url'] {
2056
+ width: 100%;
2057
+ box-sizing: border-box;
2058
+ border: 1px solid var(--noteloom-border);
2059
+ border-radius: var(--noteloom-radius-md);
2060
+ padding: 0.55em 0.75em;
2061
+ background: transparent;
2062
+ color: inherit;
2063
+ font: inherit;
2064
+ outline: none;
2065
+ }
2066
+
2067
+ .be-modal-field input[type='text']:focus,
2068
+ .be-modal-field input[type='url']:focus {
2069
+ border-color: var(--noteloom-accent);
2070
+ }
2071
+
2072
+ .be-modal-field select {
2073
+ width: 100%;
2074
+ box-sizing: border-box;
2075
+ border: 1px solid var(--noteloom-border);
2076
+ border-radius: var(--noteloom-radius-md);
2077
+ padding: 0.55em 0.75em;
2078
+ background: transparent;
2079
+ color: inherit;
2080
+ font: inherit;
2081
+ font-size: 0.9rem;
2082
+ }
2083
+
2084
+ .be-modal-field select:focus {
2085
+ border-color: var(--noteloom-accent);
2086
+ }
2087
+
2088
+ .be-modal-field-checkbox {
2089
+ display: flex;
2090
+ align-items: center;
2091
+ gap: 0.5em;
2092
+ }
2093
+
2094
+ .be-modal-field-checkbox > span {
2095
+ font-size: 0.85rem;
2096
+ color: var(--noteloom-text);
2097
+ }
2098
+
2099
+ .be-modal-color-row {
2100
+ display: flex;
2101
+ gap: 8px;
2102
+ flex-wrap: wrap;
2103
+ }
2104
+
2105
+ .be-modal-color-swatch {
2106
+ width: 26px;
2107
+ height: 26px;
2108
+ border-radius: 50%;
2109
+ border: 2px solid transparent;
2110
+ cursor: pointer;
2111
+ }
2112
+
2113
+ .be-modal-color-swatch-active {
2114
+ border-color: var(--noteloom-accent);
2115
+ box-shadow:
2116
+ 0 0 0 2px var(--noteloom-bg),
2117
+ 0 0 0 4px var(--noteloom-accent-soft);
2118
+ }
2119
+
2120
+ .be-modal-attr-row {
2121
+ display: flex;
2122
+ gap: 6px;
2123
+ margin-bottom: 6px;
2124
+ align-items: center;
2125
+ }
2126
+
2127
+ .be-modal-attr-row input {
2128
+ flex: 1;
2129
+ min-width: 0;
2130
+ border: 1px solid var(--noteloom-border);
2131
+ border-radius: var(--noteloom-radius-sm);
2132
+ padding: 0.4em 0.6em;
2133
+ background: transparent;
2134
+ color: inherit;
2135
+ font: inherit;
2136
+ font-size: 0.85rem;
2137
+ }
2138
+
2139
+ .be-modal-attr-remove {
2140
+ flex: none;
2141
+ border: none;
2142
+ background: none;
2143
+ color: var(--noteloom-text-faint);
2144
+ cursor: pointer;
2145
+ padding: 2px;
2146
+ border-radius: var(--noteloom-radius-sm);
2147
+ }
2148
+
2149
+ .be-modal-attr-remove:hover {
2150
+ color: var(--noteloom-danger);
2151
+ }
2152
+
2153
+ .be-modal-actions {
2154
+ display: flex;
2155
+ justify-content: flex-end;
2156
+ gap: 8px;
2157
+ margin-top: 20px;
2158
+ }
2159
+
2160
+ .be-modal-delete {
2161
+ margin-right: auto; /* pushes Cancel/Save to the right, Delete stays on its own at the left */
2162
+ }
2163
+
2164
+ .be-modal-cancel,
2165
+ .be-modal-save,
2166
+ .be-modal-delete,
2167
+ .be-export-download {
2168
+ border: none;
2169
+ border-radius: var(--noteloom-radius-md);
2170
+ padding: 7px 16px;
2171
+ font-size: 0.85rem;
2172
+ font-weight: 500;
2173
+ cursor: pointer;
2174
+ }
2175
+
2176
+ .be-export-download {
2177
+ background: var(--noteloom-bg-subtle);
2178
+ color: var(--noteloom-text);
2179
+ }
2180
+
2181
+ .be-export-download:hover {
2182
+ background: var(--noteloom-bg-hover);
2183
+ }
2184
+
2185
+ .be-modal-delete {
2186
+ background: var(--noteloom-danger-soft);
2187
+ color: var(--noteloom-danger);
2188
+ }
2189
+
2190
+ .be-modal-cancel {
2191
+ background: var(--noteloom-bg-subtle);
2192
+ color: var(--noteloom-text);
2193
+ }
2194
+
2195
+ .be-modal-cancel:hover {
2196
+ background: var(--noteloom-bg-hover);
2197
+ }
2198
+
2199
+ .be-modal-save {
2200
+ background: var(--noteloom-accent);
2201
+ color: var(--noteloom-accent-text);
2202
+ }
2203
+
2204
+ .be-modal-save:hover {
2205
+ opacity: 0.9;
2206
+ }
2207
+
2208
+ .be-modal-save:disabled {
2209
+ opacity: 0.5;
2210
+ cursor: not-allowed;
2211
+ }
2212
+
2213
+ /* --- slash ("/") / emoji (":") / mention ("@") command menu --- */
2214
+
2215
+ .be-slash-menu {
2216
+ z-index: 1000;
2217
+ width: 260px;
2218
+ max-height: 320px;
2219
+ overflow-y: auto;
2220
+ background: var(--noteloom-bg);
2221
+ border: 1px solid var(--noteloom-border);
2222
+ border-radius: var(--noteloom-radius-lg);
2223
+ box-shadow: var(--noteloom-shadow);
2224
+ padding: 6px;
2225
+ }
2226
+
2227
+ .be-slash-menu-item {
2228
+ display: flex;
2229
+ align-items: center;
2230
+ gap: 10px;
2231
+ padding: 7px 8px;
2232
+ border-radius: var(--noteloom-radius-md);
2233
+ cursor: pointer;
2234
+ font-size: 0.9rem;
2235
+ color: var(--noteloom-text);
2236
+ }
2237
+
2238
+ .be-slash-menu-item-active,
2239
+ .be-slash-menu-item:hover {
2240
+ background: var(--noteloom-accent-soft);
2241
+ }
2242
+
2243
+ .be-slash-menu-item-icon {
2244
+ flex: none;
2245
+ display: flex;
2246
+ align-items: center;
2247
+ justify-content: center;
2248
+ width: 28px;
2249
+ height: 28px;
2250
+ border-radius: var(--noteloom-radius-sm);
2251
+ border: 1px solid var(--noteloom-border);
2252
+ color: var(--noteloom-text-muted);
2253
+ }
2254
+
2255
+ .be-slash-menu-item-label {
2256
+ flex: 1;
2257
+ overflow: hidden;
2258
+ text-overflow: ellipsis;
2259
+ white-space: nowrap;
2260
+ }
2261
+
2262
+ /* --- searchable Select (inline select/date/checkbox widgets, custom field types, table column type) --- */
2263
+
2264
+ .be-select {
2265
+ display: inline-flex;
2266
+ }
2267
+
2268
+ .be-select-trigger {
2269
+ display: inline-flex;
2270
+ align-items: center;
2271
+ gap: 6px;
2272
+ min-height: 28px;
2273
+ min-width: 6em;
2274
+ border: 1px solid var(--noteloom-border);
2275
+ border-radius: var(--noteloom-radius-md);
2276
+ background: var(--noteloom-bg);
2277
+ color: var(--noteloom-text);
2278
+ font: inherit;
2279
+ font-size: 0.88rem;
2280
+ padding: 4px 8px;
2281
+ cursor: pointer;
2282
+ }
2283
+
2284
+ .be-select-trigger:hover {
2285
+ border-color: var(--noteloom-accent);
2286
+ }
2287
+
2288
+ .be-select-trigger[aria-expanded='true'] {
2289
+ border-color: var(--noteloom-accent);
2290
+ box-shadow: 0 0 0 2px var(--noteloom-accent-soft);
2291
+ }
2292
+
2293
+ .be-select-trigger-tag {
2294
+ min-width: 0;
2295
+ min-height: 0;
2296
+ border: none;
2297
+ background: transparent;
2298
+ padding: 2px;
2299
+ border-radius: var(--noteloom-radius-sm);
2300
+ outline: none;
2301
+ border: none;
2302
+ }
2303
+
2304
+ .be-select-trigger-tag:hover {
2305
+ background: var(--noteloom-bg-hover);
2306
+ }
2307
+
2308
+ .be-select-trigger-tag[aria-expanded='true'] {
2309
+ background: var(--noteloom-bg-hover);
2310
+ box-shadow: none;
2311
+ }
2312
+
2313
+ .be-select-value-placeholder {
2314
+ color: var(--noteloom-text-faint);
2315
+ }
2316
+
2317
+ .be-select-tag {
2318
+ display: inline-flex;
2319
+ flex: none;
2320
+ max-width: 100%;
2321
+ padding: 2px 9px;
2322
+ border-radius: var(--noteloom-radius-sm);
2323
+ font-size: 0.82em;
2324
+ font-weight: 500;
2325
+ line-height: 1.4;
2326
+ /* Wraps rather than truncates — a fixed-width popover (see
2327
+ .be-select-popover) or table cell (see .be-table-cell) combined with
2328
+ nowrap+ellipsis let long option text silently overflow its box
2329
+ instead of actually being clipped; wrapping sidesteps that entirely. */
2330
+ white-space: normal;
2331
+ overflow-wrap: anywhere;
2332
+ word-break: break-word;
2333
+ }
2334
+
2335
+ .be-select-value {
2336
+ flex: 1;
2337
+ text-align: left;
2338
+ overflow: hidden;
2339
+ text-overflow: ellipsis;
2340
+ white-space: nowrap;
2341
+ }
2342
+
2343
+ .be-select-chevron {
2344
+ flex: none;
2345
+ color: var(--noteloom-text-faint);
2346
+ }
2347
+
2348
+ .be-select-popover {
2349
+ z-index: 1000;
2350
+ width: 224px;
2351
+ background: var(--noteloom-bg);
2352
+ border: 1px solid var(--noteloom-border);
2353
+ border-radius: var(--noteloom-radius-lg);
2354
+ box-shadow: var(--noteloom-shadow);
2355
+ overflow: hidden;
2356
+ }
2357
+
2358
+ .be-select-search {
2359
+ display: block;
2360
+ width: 100%;
2361
+ box-sizing: border-box;
2362
+ border: none;
2363
+ border-bottom: 1px solid var(--noteloom-border);
2364
+ background: transparent;
2365
+ color: inherit;
2366
+ padding: 10px 12px;
2367
+ font: inherit;
2368
+ font-size: 0.88rem;
2369
+ outline: none;
2370
+ }
2371
+
2372
+ .be-select-options {
2373
+ max-height: 220px;
2374
+ overflow-y: auto;
2375
+ overflow-x: hidden;
2376
+ padding: 4px;
2377
+ }
2378
+
2379
+ .be-select-option {
2380
+ display: flex;
2381
+ align-items: center;
2382
+ min-width: 0;
2383
+ padding: 7px 8px;
2384
+ border-radius: var(--noteloom-radius-sm);
2385
+ cursor: pointer;
2386
+ font-size: 0.88rem;
2387
+ color: var(--noteloom-text);
2388
+ }
2389
+
2390
+ /* A tag-variant option list (colored pills — e.g. Priority/Assignee) must
2391
+ read at the exact same size/weight as a plain default-variant list
2392
+ (Diagnosis) — only the colored-chip background should differ between
2393
+ them, not the typography. .be-select-tag's own font-size/weight (sized
2394
+ down for when it's squeezed into a trigger button) would otherwise make
2395
+ tag-variant options look smaller/bolder than plain ones for no reason. */
2396
+ .be-select-option .be-select-tag {
2397
+ font-size: inherit;
2398
+ font-weight: inherit;
2399
+ line-height: inherit;
2400
+ width: -webkit-fill-available;
2401
+ }
2402
+
2403
+ .be-select-option-active {
2404
+ background: var(--noteloom-accent-soft);
2405
+ }
2406
+
2407
+ .be-select-option-selected {
2408
+ font-weight: 600;
2409
+ }
2410
+
2411
+ .be-select-option-selected:not(.be-select-option-active) {
2412
+ background: var(--noteloom-bg-subtle);
2413
+ }
2414
+
2415
+ .be-select-option-selected .be-select-tag {
2416
+ font-weight: 500;
2417
+ box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2);
2418
+ }
2419
+
2420
+ .be-select-empty {
2421
+ padding: 10px 12px;
2422
+ color: var(--noteloom-text-faint);
2423
+ font-size: 0.85rem;
2424
+ text-align: center;
2425
+ }
2426
+
2427
+ .be-select-error {
2428
+ color: var(--noteloom-danger);
2429
+ }
2430
+
2431
+ .be-select-manage-options {
2432
+ display: block;
2433
+ width: 100%;
2434
+ box-sizing: border-box;
2435
+ border: none;
2436
+ border-top: 1px solid var(--noteloom-border);
2437
+ background: transparent;
2438
+ padding: 9px 12px;
2439
+ font: inherit;
2440
+ font-size: 0.82rem;
2441
+ font-weight: 500;
2442
+ color: var(--noteloom-accent);
2443
+ text-align: left;
2444
+ cursor: pointer;
2445
+ }
2446
+
2447
+ .be-select-manage-options:hover {
2448
+ background: var(--noteloom-accent-soft);
2449
+ }
2450
+
2451
+ .be-inline-select,
2452
+ .be-inline-date,
2453
+ .be-inline-checkbox {
2454
+ display: inline-flex;
2455
+ align-items: center;
2456
+ vertical-align: middle;
2457
+ }
2458
+
2459
+ /* Inline chips sit in running text — match the surrounding line's own font
2460
+ size instead of the smaller size used for the Select component elsewhere
2461
+ (menus, table column type dropdown), where a compact UI size is right. */
2462
+ .be-inline-select .be-select-trigger {
2463
+ min-height: 0;
2464
+ font-size: 1em;
2465
+ padding: 1px 8px;
2466
+ }
2467
+
2468
+ .be-inline-select .be-select-tag {
2469
+ font-size: 0.92em;
2470
+ }
2471
+
2472
+ /* A mention reads as highlighted text sitting inline in the paragraph, not
2473
+ a bulky standalone pill/button — minimal padding, small radius, no extra
2474
+ chrome from the trigger button wrapping it. */
2475
+ .be-inline-select .be-select-trigger-mention {
2476
+ padding: 0 !important;
2477
+ border-radius: 3px;
2478
+ }
2479
+
2480
+ /* A mention chip always uses this one fixed color, not each option's own
2481
+ tag color — "@mentions are one consistent color" is the common
2482
+ convention rather than a per-person palette. */
2483
+ .be-select-tag-mention {
2484
+ background: var(--noteloom-accent-soft);
2485
+ color: var(--noteloom-accent);
2486
+ font-weight: 500;
2487
+ padding: 0 3px;
2488
+ border-radius: 3px;
2489
+ line-height: inherit;
2490
+ }
2491
+
2492
+ .be-inline-date input[type='date'] {
2493
+ border: 1px solid var(--noteloom-border);
2494
+ border-radius: var(--noteloom-radius-md);
2495
+ background: var(--noteloom-bg);
2496
+ color: inherit;
2497
+ padding: 4px 8px;
2498
+ font: inherit;
2499
+ font-size: 0.88rem;
2500
+ }
2501
+
2502
+ .be-inline-checkbox {
2503
+ gap: 6px;
2504
+ }
2505
+
2506
+ .be-inline-checkbox-input {
2507
+ flex: none;
2508
+ width: 16px;
2509
+ height: 16px;
2510
+ margin: 0;
2511
+ accent-color: var(--noteloom-accent);
2512
+ cursor: pointer;
2513
+ }
2514
+
2515
+ .be-inline-checkbox-label {
2516
+ min-width: 0;
2517
+ flex: 1;
2518
+ border: 1px solid var(--noteloom-border);
2519
+ border-radius: var(--noteloom-radius-sm);
2520
+ background: transparent;
2521
+ color: inherit;
2522
+ font: inherit;
2523
+ padding: 2px 8px;
2524
+ outline: none;
2525
+ }
2526
+
2527
+ .be-inline-checkbox-label:focus {
2528
+ border-color: var(--noteloom-accent);
2529
+ }
2530
+
2531
+ /* In a table cell (checkbox column), the browser's default text-input
2532
+ width (~170px+) is wider than most columns, forcing the input — and with
2533
+ it, the whole table — past the cell's own bounds. Constraining the
2534
+ inline-flex row to the cell's actual width lets the label's flex:1 +
2535
+ min-width:0 (above) do their job and shrink the input to fit instead. */
2536
+ .be-table-cell .be-inline-checkbox {
2537
+ display: flex;
2538
+ width: 100%;
2539
+ }
2540
+
2541
+ .be-inline-checkbox-label::placeholder {
2542
+ color: var(--noteloom-text-faint);
2543
+ }
2544
+
2545
+ /* --- floating (selection) format toolbar --- */
2546
+
2547
+ .be-floating-toolbar {
2548
+ display: flex;
2549
+ align-items: center;
2550
+ gap: 2px;
2551
+ background: var(--noteloom-text);
2552
+ border-radius: var(--noteloom-radius-md);
2553
+ padding: 4px;
2554
+ box-shadow: var(--noteloom-shadow);
2555
+ z-index: 1000;
2556
+ }
2557
+
2558
+ .be-floating-toolbar-btn {
2559
+ border: none;
2560
+ background: transparent;
2561
+ color: rgba(255, 255, 255, 0.85);
2562
+ width: 30px;
2563
+ height: 30px;
2564
+ display: flex;
2565
+ align-items: center;
2566
+ justify-content: center;
2567
+ border-radius: var(--noteloom-radius-sm);
2568
+ cursor: pointer;
2569
+ }
2570
+
2571
+ .be-floating-toolbar-btn:hover {
2572
+ background: rgba(255, 255, 255, 0.14);
2573
+ }
2574
+
2575
+ .be-floating-toolbar-btn-active {
2576
+ background: var(--noteloom-accent);
2577
+ color: #fff;
2578
+ }
2579
+
2580
+ .be-floating-toolbar-divider {
2581
+ width: 1px;
2582
+ height: 20px;
2583
+ background: rgba(255, 255, 255, 0.2);
2584
+ margin: 0 4px;
2585
+ }
2586
+
2587
+ .be-find-bar {
2588
+ position: fixed;
2589
+ top: 12px;
2590
+ right: 12px;
2591
+ z-index: 900;
2592
+ width: fit-content;
2593
+ background: var(--noteloom-bg);
2594
+ border: 1px solid var(--noteloom-border);
2595
+ border-radius: var(--noteloom-radius-md);
2596
+ box-shadow: var(--noteloom-shadow);
2597
+ padding: 6px;
2598
+ display: flex;
2599
+ flex-direction: column;
2600
+ gap: 6px;
2601
+ }
2602
+
2603
+ .be-find-bar-row {
2604
+ display: flex;
2605
+ align-items: center;
2606
+ gap: 4px;
2607
+ }
2608
+
2609
+ .be-find-bar-input {
2610
+ border: 1px solid var(--noteloom-border);
2611
+ border-radius: var(--noteloom-radius-sm);
2612
+ padding: 4px 8px;
2613
+ font-size: 0.85rem;
2614
+ color: var(--noteloom-text);
2615
+ background: var(--noteloom-bg);
2616
+ width: 180px;
2617
+ }
2618
+
2619
+ .be-find-bar-input:focus {
2620
+ outline: none;
2621
+ border-color: var(--noteloom-accent);
2622
+ }
2623
+
2624
+ .be-find-bar-count {
2625
+ font-size: 0.78rem;
2626
+ color: var(--noteloom-text-muted);
2627
+ min-width: 44px;
2628
+ text-align: center;
2629
+ }
2630
+
2631
+ .be-find-bar-toggle,
2632
+ .be-find-bar-nav,
2633
+ .be-find-bar-close,
2634
+ .be-find-bar-replace-toggle {
2635
+ border: none;
2636
+ background: transparent;
2637
+ color: var(--noteloom-text-muted);
2638
+ border-radius: var(--noteloom-radius-sm);
2639
+ width: 26px;
2640
+ height: 26px;
2641
+ display: flex;
2642
+ align-items: center;
2643
+ justify-content: center;
2644
+ cursor: pointer;
2645
+ font-size: 0.7rem;
2646
+ }
2647
+
2648
+ .be-find-bar-toggle:hover,
2649
+ .be-find-bar-nav:hover:not(:disabled),
2650
+ .be-find-bar-close:hover,
2651
+ .be-find-bar-replace-toggle:hover {
2652
+ background: var(--noteloom-bg-hover);
2653
+ }
2654
+
2655
+ .be-find-bar-nav:disabled {
2656
+ opacity: 0.4;
2657
+ cursor: default;
2658
+ }
2659
+
2660
+ .be-find-bar-toggle-active {
2661
+ background: var(--noteloom-accent-soft);
2662
+ color: var(--noteloom-accent);
2663
+ }
2664
+
2665
+ .be-find-bar-replace-toggle {
2666
+ transition: transform 0.1s ease;
2667
+ }
2668
+
2669
+ .be-find-bar-replace-toggle-open {
2670
+ transform: rotate(90deg);
2671
+ }
2672
+
2673
+ .be-find-bar-replace-btn {
2674
+ border: none;
2675
+ background: var(--noteloom-bg-subtle);
2676
+ color: var(--noteloom-text);
2677
+ border-radius: var(--noteloom-radius-sm);
2678
+ padding: 4px 10px;
2679
+ font-size: 0.8rem;
2680
+ cursor: pointer;
2681
+ }
2682
+
2683
+ .be-find-bar-replace-btn:hover:not(:disabled) {
2684
+ background: var(--noteloom-bg-hover);
2685
+ }
2686
+
2687
+ .be-find-bar-replace-btn:disabled {
2688
+ opacity: 0.4;
2689
+ cursor: default;
2690
+ }
2691
+
2692
+ /* CSS Custom Highlight API — paints match highlights purely at the
2693
+ rendering layer, never touching the contentEditable DOM tree itself
2694
+ (see useFindInDocument.js's own doc comment for why). Unsupported
2695
+ browsers (older Firefox) simply drop this whole rule; search/navigate/
2696
+ replace still work, just without the visual highlight. */
2697
+ ::highlight(be-find-match) {
2698
+ background-color: rgba(250, 204, 21, 0.4);
2699
+ }
2700
+
2701
+ ::highlight(be-find-current) {
2702
+ background-color: rgba(249, 115, 22, 0.55);
2703
+ }
2704
+
2705
+ .be-floating-toolbar-picker-wrap {
2706
+ position: relative;
2707
+ }
2708
+
2709
+ .be-floating-toolbar-picker {
2710
+ position: absolute;
2711
+ top: 100%;
2712
+ left: 0;
2713
+ margin-top: 8px;
2714
+ display: flex;
2715
+ gap: 4px;
2716
+ background: var(--noteloom-bg);
2717
+ border-radius: var(--noteloom-radius-md);
2718
+ padding: 6px;
2719
+ box-shadow: var(--noteloom-shadow);
2720
+ }
2721
+
2722
+ .be-floating-toolbar-swatch {
2723
+ width: 22px;
2724
+ height: 22px;
2725
+ border-radius: 50%;
2726
+ border: 1px solid rgba(0, 0, 0, 0.1);
2727
+ cursor: pointer;
2728
+ }
2729
+
2730
+ /* --- link hover card (edit/remove an existing link mark) --- */
2731
+
2732
+ .be-link-hover-card {
2733
+ z-index: 1000;
2734
+ display: flex;
2735
+ align-items: center;
2736
+ gap: 2px;
2737
+ max-width: 320px;
2738
+ background: var(--noteloom-bg);
2739
+ border: 1px solid var(--noteloom-border);
2740
+ border-radius: var(--noteloom-radius-md);
2741
+ padding: 5px 6px 5px 10px;
2742
+ box-shadow: var(--noteloom-shadow);
2743
+ font-size: 0.85rem;
2744
+ }
2745
+
2746
+ .be-link-hover-card-url {
2747
+ flex: 1;
2748
+ min-width: 0;
2749
+ overflow: hidden;
2750
+ text-overflow: ellipsis;
2751
+ white-space: nowrap;
2752
+ color: var(--noteloom-accent);
2753
+ text-decoration: none;
2754
+ }
2755
+
2756
+ .be-link-hover-card-url:hover {
2757
+ text-decoration: underline;
2758
+ }
2759
+
2760
+ .be-link-hover-card-btn {
2761
+ flex: none;
2762
+ width: 24px;
2763
+ height: 24px;
2764
+ border: none;
2765
+ background: transparent;
2766
+ color: var(--noteloom-text-muted);
2767
+ display: flex;
2768
+ align-items: center;
2769
+ justify-content: center;
2770
+ border-radius: var(--noteloom-radius-sm);
2771
+ cursor: pointer;
2772
+ }
2773
+
2774
+ .be-link-hover-card-btn:hover {
2775
+ background: var(--noteloom-bg-hover);
2776
+ color: var(--noteloom-text);
2777
+ }
2778
+
2779
+ /* --- comments: avatar, header, composer, thread card, click/hover popover, right-side panel --- */
2780
+
2781
+ .be-comment-avatar {
2782
+ flex: none;
2783
+ display: flex;
2784
+ align-items: center;
2785
+ justify-content: center;
2786
+ border-radius: 50%;
2787
+ color: #fff;
2788
+ font-weight: 700;
2789
+ line-height: 1;
2790
+ }
2791
+
2792
+ /* Shared by CommentPopover and FloatingToolbar's standalone composer (see
2793
+ CommentPopoverHeader.jsx) -- title on the left, an explicit close button
2794
+ on the right so dismissing doesn't rely solely on Escape/outside-click. */
2795
+ .be-comment-popover-header {
2796
+ display: flex;
2797
+ align-items: center;
2798
+ justify-content: space-between;
2799
+ gap: 8px;
2800
+ margin-bottom: 10px;
2801
+ padding-bottom: 10px;
2802
+ border-bottom: 1px solid var(--noteloom-border);
2803
+ }
2804
+
2805
+ .be-comment-popover-title {
2806
+ font-weight: 700;
2807
+ font-size: 0.9rem;
2808
+ }
2809
+
2810
+ .be-comment-popover-close {
2811
+ flex: none;
2812
+ border: none;
2813
+ background: transparent;
2814
+ color: var(--noteloom-text-muted);
2815
+ width: 22px;
2816
+ height: 22px;
2817
+ display: flex;
2818
+ align-items: center;
2819
+ justify-content: center;
2820
+ border-radius: var(--noteloom-radius-sm);
2821
+ cursor: pointer;
2822
+ }
2823
+
2824
+ .be-comment-popover-close:hover {
2825
+ background: var(--noteloom-bg-hover);
2826
+ color: var(--noteloom-text);
2827
+ }
2828
+
2829
+ /* Overrides the dark \`.be-floating-toolbar\` chrome it also carries (see
2830
+ FloatingToolbar.jsx's own comment on why that base class stays) -- a
2831
+ comment composer reads better as a light card than white text on the
2832
+ toolbar's own near-black background. */
2833
+ .be-floating-toolbar.be-floating-toolbar-comment-standalone {
2834
+ display: block;
2835
+ background: var(--noteloom-bg);
2836
+ border: 1px solid var(--noteloom-border);
2837
+ padding: 10px 12px 12px;
2838
+ width: 300px;
2839
+ }
2840
+
2841
+ .be-comment-composer {
2842
+ display: flex;
2843
+ flex-direction: column;
2844
+ gap: 10px;
2845
+ margin-top: 10px;
2846
+ }
2847
+
2848
+ .be-comment-composer-input-row {
2849
+ display: flex;
2850
+ align-items: flex-start;
2851
+ gap: 8px;
2852
+ }
2853
+
2854
+ .be-comment-composer-textarea {
2855
+ flex: 1;
2856
+ min-width: 0;
2857
+ box-sizing: border-box;
2858
+ resize: none;
2859
+ /* ~2 lines to start, grows with content (see CommentComposer's own
2860
+ resizeToContent) up to ~5 lines, then scrolls. */
2861
+ min-height: 2.8em;
2862
+ max-height: 7.2em;
2863
+ overflow-y: auto;
2864
+ padding: 8px 10px;
2865
+ font: inherit;
2866
+ font-size: 0.85rem;
2867
+ line-height: 1.4;
2868
+ color: var(--noteloom-text);
2869
+ background: var(--noteloom-bg-subtle);
2870
+ border: 1px solid var(--noteloom-border);
2871
+ border-radius: var(--noteloom-radius-md);
2872
+ }
2873
+
2874
+ .be-comment-composer-textarea:focus {
2875
+ outline: none;
2876
+ border-color: var(--noteloom-accent);
2877
+ }
2878
+
2879
+ .be-comment-composer-actions {
2880
+ display: flex;
2881
+ justify-content: flex-end;
2882
+ gap: 8px;
2883
+ }
2884
+
2885
+ .be-comment-composer-cancel,
2886
+ .be-comment-composer-submit {
2887
+ display: flex;
2888
+ align-items: center;
2889
+ gap: 6px;
2890
+ border: none;
2891
+ border-radius: var(--noteloom-radius-md);
2892
+ padding: 6px 12px;
2893
+ font-size: 0.8rem;
2894
+ font-weight: 600;
2895
+ cursor: pointer;
2896
+ }
2897
+
2898
+ .be-comment-composer-cancel {
2899
+ background: var(--noteloom-bg-hover);
2900
+ color: var(--noteloom-text-muted);
2901
+ }
2902
+
2903
+ .be-comment-composer-submit {
2904
+ background: var(--noteloom-accent);
2905
+ color: #fff;
2906
+ }
2907
+
2908
+ .be-comment-composer-submit:disabled {
2909
+ opacity: 0.4;
2910
+ cursor: not-allowed;
2911
+ }
2912
+
2913
+ .be-comment-thread {
2914
+ font-size: 0.85rem;
2915
+ }
2916
+
2917
+ .be-comment-thread + .be-comment-thread {
2918
+ margin-top: 16px;
2919
+ padding-top: 16px;
2920
+ border-top: 1px solid var(--noteloom-border);
2921
+ }
2922
+
2923
+ .be-comment-thread-resolved {
2924
+ opacity: 0.6;
2925
+ }
2926
+
2927
+ /* Echoes a hover from the highlighted text back onto this card -- see useHoveredComment. */
2928
+ .be-comment-thread-hovered {
2929
+ background: var(--noteloom-bg-hover);
2930
+ border-radius: var(--noteloom-radius-md);
2931
+ margin: -6px;
2932
+ padding: 6px;
2933
+ }
2934
+
2935
+ .be-comment-message {
2936
+ display: flex;
2937
+ align-items: flex-start;
2938
+ gap: 10px;
2939
+ }
2940
+
2941
+ .be-comment-message + .be-comment-message {
2942
+ margin-top: 10px;
2943
+ }
2944
+
2945
+ .be-comment-message-body {
2946
+ flex: 1;
2947
+ min-width: 0;
2948
+ }
2949
+
2950
+ .be-comment-message-header {
2951
+ display: flex;
2952
+ align-items: baseline;
2953
+ gap: 6px;
2954
+ }
2955
+
2956
+ .be-comment-message-author {
2957
+ font-weight: 600;
2958
+ font-size: 0.78rem;
2959
+ }
2960
+
2961
+ .be-comment-message-time {
2962
+ font-size: 0.72rem;
2963
+ color: var(--noteloom-text-muted);
2964
+ }
2965
+
2966
+ .be-comment-message-text {
2967
+ margin: 3px 0 0;
2968
+ line-height: 1.45;
2969
+ white-space: pre-wrap;
2970
+ word-break: break-word;
2971
+ }
2972
+
2973
+ /* Replies (every message after the thread's first) get a connecting
2974
+ vertical line + indent, chat-thread style -- our data model has no
2975
+ deeper nesting than "root message + flat replies", so one indent level
2976
+ is all this needs. */
2977
+ .be-comment-thread-replies {
2978
+ margin: 10px 0 0 13px;
2979
+ padding-left: 14px;
2980
+ border-left: 2px solid var(--noteloom-border);
2981
+ }
2982
+
2983
+ .be-comment-thread-actions {
2984
+ display: flex;
2985
+ align-items: center;
2986
+ gap: 4px;
2987
+ margin-top: 10px;
2988
+ opacity: 0;
2989
+ transition: opacity 0.1s ease;
2990
+ }
2991
+
2992
+ .be-comment-thread:hover .be-comment-thread-actions,
2993
+ .be-comment-thread:focus-within .be-comment-thread-actions {
2994
+ opacity: 1;
2995
+ }
2996
+
2997
+ .be-comment-thread-actions button {
2998
+ display: flex;
2999
+ align-items: center;
3000
+ gap: 4px;
3001
+ border: none;
3002
+ background: transparent;
3003
+ color: var(--noteloom-text-muted);
3004
+ font-size: 0.78rem;
3005
+ padding: 4px 8px;
3006
+ border-radius: var(--noteloom-radius-sm);
3007
+ cursor: pointer;
3008
+ }
3009
+
3010
+ .be-comment-thread-actions button:hover {
3011
+ background: var(--noteloom-bg-hover);
3012
+ color: var(--noteloom-text);
3013
+ }
3014
+
3015
+ .be-comment-thread-delete {
3016
+ margin-left: auto;
3017
+ }
3018
+
3019
+ /* --- comments: click/hover popover over existing highlighted text --- */
3020
+
3021
+ .be-comment-popover {
3022
+ z-index: 1000;
3023
+ width: 300px;
3024
+ max-width: calc(100vw - 24px);
3025
+ background: var(--noteloom-bg);
3026
+ border: 1px solid var(--noteloom-border);
3027
+ border-radius: var(--noteloom-radius-lg);
3028
+ padding: 12px 14px 14px;
3029
+ box-shadow: var(--noteloom-shadow);
3030
+ }
3031
+
3032
+ /* --- comments: opt-in right-side panel (NoteloomEditor showCommentsPanel) --- */
3033
+
3034
+ /* Deliberately no border/shadow/box background here, or on
3035
+ .be-comments-panel-item below -- comments float directly on the page
3036
+ like margin notes, not a boxed widget, matching how most other editors'
3037
+ own comment sidebars read. */
3038
+ /* No overflow/scrolling of its own on purpose -- each card's position
3039
+ already tracks the PAGE's scroll (see CommentsPanel's recompute()), so
3040
+ the panel scrolling independently would fight that: a wheel gesture over
3041
+ it needs to fall through and scroll the page, not the panel's own box,
3042
+ or cards visually detach from the text they're anchored to. Cards whose
3043
+ anchor has scrolled off-screen just go negative/beyond the viewport and
3044
+ aren't painted -- no clipping box needed for that. */
3045
+ .be-comments-panel {
3046
+ position: fixed;
3047
+ top: 80px;
3048
+ right: 24px;
3049
+ width: 320px;
3050
+ overflow: visible;
3051
+ background: transparent;
3052
+ padding: 0 12px;
3053
+ font-size: 0.85rem;
3054
+ z-index: 500;
3055
+ pointer-events: none;
3056
+ }
3057
+
3058
+ .be-comments-panel-item,
3059
+ .be-comments-panel-empty {
3060
+ pointer-events: auto;
3061
+ }
3062
+
3063
+ .be-comments-panel-empty {
3064
+ color: var(--noteloom-text-muted);
3065
+ font-size: 0.82rem;
3066
+ margin: 0;
3067
+ }
3068
+
3069
+ /* Each .be-comments-panel-item is absolutely positioned (top set inline by
3070
+ CommentsPanel, aligned with its thread's own anchored text, margin-comment
3071
+ style) inside this relatively-positioned container -- height is also set
3072
+ inline, sized to fit the lowest card. */
3073
+ .be-comments-panel-list {
3074
+ position: relative;
3075
+ }
3076
+
3077
+ .be-comments-panel-item {
3078
+ position: absolute;
3079
+ left: 0;
3080
+ right: 0;
3081
+ padding: 8px 12px;
3082
+ border-radius: var(--noteloom-radius-md);
3083
+ transition:
3084
+ top 0.15s ease,
3085
+ background-color 0.1s ease;
3086
+ }
3087
+
3088
+ .be-comments-panel-item:hover {
3089
+ background: var(--noteloom-bg-hover);
3090
+ }
3091
+
3092
+ @media (max-width: 900px) {
3093
+ .be-comments-panel {
3094
+ display: none;
3095
+ }
3096
+ }
3097
+
3098
+ /* --- version history: trigger button + drawer (VersionHistory) --- */
3099
+
3100
+ .be-version-history-trigger {
3101
+ display: inline-flex;
3102
+ align-items: center;
3103
+ gap: 6px;
3104
+ border: 1px solid var(--noteloom-border);
3105
+ background: var(--noteloom-bg);
3106
+ color: var(--noteloom-text);
3107
+ border-radius: var(--noteloom-radius-md);
3108
+ padding: 5px 10px;
3109
+ font-size: 0.85rem;
3110
+ cursor: pointer;
3111
+ }
3112
+
3113
+ .be-version-history-trigger:hover {
3114
+ background: var(--noteloom-bg-hover);
3115
+ }
3116
+
3117
+ .be-version-history-backdrop {
3118
+ position: fixed;
3119
+ inset: 0;
3120
+ background: rgba(15, 23, 42, 0.25);
3121
+ z-index: 1400;
3122
+ }
3123
+
3124
+ .be-version-history-drawer {
3125
+ position: fixed;
3126
+ top: 0;
3127
+ right: 0;
3128
+ bottom: 0;
3129
+ width: 360px;
3130
+ max-width: 100vw;
3131
+ background: var(--noteloom-bg);
3132
+ box-shadow: var(--noteloom-shadow);
3133
+ z-index: 1401;
3134
+ display: flex;
3135
+ flex-direction: column;
3136
+ }
3137
+
3138
+ .be-version-history-header {
3139
+ display: flex;
3140
+ align-items: center;
3141
+ justify-content: space-between;
3142
+ padding: 14px 16px;
3143
+ border-bottom: 1px solid var(--noteloom-border);
3144
+ font-weight: 700;
3145
+ font-size: 0.95rem;
3146
+ }
3147
+
3148
+ .be-version-history-close {
3149
+ border: none;
3150
+ background: transparent;
3151
+ color: var(--noteloom-text-muted);
3152
+ width: 24px;
3153
+ height: 24px;
3154
+ display: flex;
3155
+ align-items: center;
3156
+ justify-content: center;
3157
+ border-radius: var(--noteloom-radius-sm);
3158
+ cursor: pointer;
3159
+ }
3160
+
3161
+ .be-version-history-close:hover {
3162
+ background: var(--noteloom-bg-hover);
3163
+ color: var(--noteloom-text);
3164
+ }
3165
+
3166
+ .be-version-history-list {
3167
+ flex: 1;
3168
+ overflow-y: auto;
3169
+ padding: 8px 0;
3170
+ }
3171
+
3172
+ .be-version-history-empty {
3173
+ color: var(--noteloom-text-muted);
3174
+ font-size: 0.85rem;
3175
+ padding: 16px;
3176
+ margin: 0;
3177
+ }
3178
+
3179
+ .be-version-history-group-label {
3180
+ font-weight: 600;
3181
+ font-size: 0.78rem;
3182
+ color: var(--noteloom-text-muted);
3183
+ padding: 10px 16px 4px;
3184
+ }
3185
+
3186
+ .be-version-history-item {
3187
+ display: flex;
3188
+ align-items: center;
3189
+ gap: 10px;
3190
+ width: 100%;
3191
+ border: none;
3192
+ background: transparent;
3193
+ padding: 8px 16px;
3194
+ text-align: left;
3195
+ cursor: pointer;
3196
+ }
3197
+
3198
+ .be-version-history-item:hover {
3199
+ background: var(--noteloom-bg-hover);
3200
+ }
3201
+
3202
+ .be-version-history-item-body {
3203
+ min-width: 0;
3204
+ }
3205
+
3206
+ .be-version-history-item-author {
3207
+ font-weight: 600;
3208
+ font-size: 0.85rem;
3209
+ }
3210
+
3211
+ .be-version-history-item-meta {
3212
+ font-size: 0.78rem;
3213
+ color: var(--noteloom-text-muted);
3214
+ overflow: hidden;
3215
+ text-overflow: ellipsis;
3216
+ white-space: nowrap;
3217
+ }
3218
+
3219
+ .be-version-history-preview {
3220
+ flex: 1;
3221
+ display: flex;
3222
+ flex-direction: column;
3223
+ min-height: 0;
3224
+ }
3225
+
3226
+ .be-version-history-preview-meta {
3227
+ display: flex;
3228
+ align-items: center;
3229
+ gap: 10px;
3230
+ padding: 12px 16px;
3231
+ border-bottom: 1px solid var(--noteloom-border);
3232
+ }
3233
+
3234
+ .be-version-history-preview-author {
3235
+ font-weight: 600;
3236
+ font-size: 0.85rem;
3237
+ }
3238
+
3239
+ .be-version-history-preview-time {
3240
+ font-size: 0.78rem;
3241
+ color: var(--noteloom-text-muted);
3242
+ }
3243
+
3244
+ .be-version-history-view-toggle {
3245
+ display: flex;
3246
+ gap: 4px;
3247
+ padding: 8px 16px 0;
3248
+ }
3249
+
3250
+ .be-version-history-view-toggle button {
3251
+ border: none;
3252
+ background: transparent;
3253
+ color: var(--noteloom-text-muted);
3254
+ font-size: 0.78rem;
3255
+ font-weight: 600;
3256
+ padding: 5px 10px;
3257
+ border-radius: var(--noteloom-radius-md);
3258
+ cursor: pointer;
3259
+ }
3260
+
3261
+ .be-version-history-view-toggle button.is-active {
3262
+ background: var(--noteloom-bg-subtle);
3263
+ color: var(--noteloom-text);
3264
+ }
3265
+
3266
+ .be-version-history-diff-legend {
3267
+ display: flex;
3268
+ align-items: center;
3269
+ gap: 10px;
3270
+ padding: 10px 16px 0;
3271
+ font-size: 0.75rem;
3272
+ }
3273
+
3274
+ .be-version-history-diff-legend-note {
3275
+ color: var(--noteloom-text-muted);
3276
+ }
3277
+
3278
+ .be-version-history-preview-body {
3279
+ flex: 1;
3280
+ overflow-y: auto;
3281
+ padding: 16px;
3282
+ font-size: 0.9rem;
3283
+ line-height: 1.6;
3284
+ }
3285
+
3286
+ .be-version-history-diff-body :is(p.be-version-diff-block) {
3287
+ margin: 0 0 0.6em;
3288
+ }
3289
+
3290
+ /* Google Docs-style change highlighting: additions get a green underline/background,
3291
+ removals a struck-through red one -- self-evident at a glance, no legend required
3292
+ to understand the individual spans (the legend row above just labels the colors). */
3293
+ .be-version-diff-added {
3294
+ background: rgba(34, 197, 94, 0.18);
3295
+ color: var(--noteloom-text);
3296
+ text-decoration: underline;
3297
+ text-decoration-color: rgba(34, 197, 94, 0.6);
3298
+ border-radius: 2px;
3299
+ padding: 0 1px;
3300
+ }
3301
+
3302
+ .be-version-diff-removed {
3303
+ background: rgba(239, 68, 68, 0.14);
3304
+ color: var(--noteloom-text-muted);
3305
+ text-decoration: line-through;
3306
+ text-decoration-color: rgba(239, 68, 68, 0.6);
3307
+ border-radius: 2px;
3308
+ padding: 0 1px;
3309
+ }
3310
+
3311
+ .be-version-history-diff-legend .be-version-diff-added,
3312
+ .be-version-history-diff-legend .be-version-diff-removed {
3313
+ padding: 2px 6px;
3314
+ text-decoration: none;
3315
+ font-weight: 600;
3316
+ }
3317
+
3318
+ /* exportDocumentHTML emits plain semantic HTML (<p>/<h1-3>/<ul>/<blockquote>/...),
3319
+ not this package's own be-* block classes, so the preview needs its own
3320
+ basic typography rather than inheriting the live editor's block styling. */
3321
+ .be-version-history-preview-body :is(h1, h2, h3) {
3322
+ margin: 0.6em 0 0.3em;
3323
+ }
3324
+
3325
+ .be-version-history-preview-body p {
3326
+ margin: 0 0 0.6em;
3327
+ }
3328
+
3329
+ .be-version-history-preview-body :is(ul, ol) {
3330
+ margin: 0 0 0.6em;
3331
+ padding-left: 1.4em;
3332
+ }
3333
+
3334
+ .be-version-history-preview-body blockquote {
3335
+ margin: 0 0 0.6em;
3336
+ padding-left: 0.8em;
3337
+ border-left: 3px solid var(--noteloom-border);
3338
+ color: var(--noteloom-text-muted);
3339
+ }
3340
+
3341
+ .be-version-history-preview-body pre {
3342
+ background: var(--noteloom-bg-subtle);
3343
+ border-radius: var(--noteloom-radius-sm);
3344
+ padding: 10px;
3345
+ overflow-x: auto;
3346
+ }
3347
+
3348
+ .be-version-history-preview-actions {
3349
+ display: flex;
3350
+ justify-content: space-between;
3351
+ align-items: center;
3352
+ gap: 8px;
3353
+ padding: 12px 16px;
3354
+ border-top: 1px solid var(--noteloom-border);
3355
+ }
3356
+
3357
+ .be-version-history-preview-actions button {
3358
+ border-radius: var(--noteloom-radius-md);
3359
+ padding: 6px 12px;
3360
+ font-size: 0.82rem;
3361
+ font-weight: 600;
3362
+ cursor: pointer;
3363
+ }
3364
+
3365
+ .be-version-history-preview-actions button:first-child {
3366
+ border: 1px solid var(--noteloom-border);
3367
+ background: var(--noteloom-bg);
3368
+ color: var(--noteloom-text);
3369
+ }
3370
+
3371
+ .be-version-history-restore {
3372
+ display: flex;
3373
+ align-items: center;
3374
+ gap: 6px;
3375
+ border: none;
3376
+ background: var(--noteloom-accent);
3377
+ color: #fff;
3378
+ }
3379
+
3380
+ /* --- voice typing: caret-anchored listening/processing indicator --- */
3381
+
3382
+ .be-voice-indicator {
3383
+ z-index: 1000;
3384
+ display: flex;
3385
+ align-items: center;
3386
+ gap: 5px;
3387
+ background: var(--noteloom-bg);
3388
+ border: 1px solid var(--noteloom-border);
3389
+ border-radius: var(--noteloom-radius-md);
3390
+ padding: 4px 9px;
3391
+ box-shadow: var(--noteloom-shadow);
3392
+ font-size: 0.78rem;
3393
+ color: var(--noteloom-text-muted);
3394
+ white-space: nowrap;
3395
+ pointer-events: none;
3396
+ animation: be-voice-indicator-in 0.12s ease-out;
3397
+ }
3398
+
3399
+ @keyframes be-voice-indicator-in {
3400
+ from {
3401
+ opacity: 0;
3402
+ transform: translate(-50%, calc(-100% + 4px));
3403
+ }
3404
+ to {
3405
+ opacity: 1;
3406
+ transform: translate(-50%, -100%);
3407
+ }
3408
+ }
3409
+
3410
+ .be-voice-indicator-dot {
3411
+ width: 7px;
3412
+ height: 7px;
3413
+ border-radius: 50%;
3414
+ background: var(--noteloom-danger, #dc2626);
3415
+ flex: none;
3416
+ animation: be-voice-indicator-pulse 1.4s ease-in-out infinite;
3417
+ }
3418
+
3419
+ .be-voice-indicator-processing .be-voice-indicator-dot {
3420
+ background: var(--noteloom-accent);
3421
+ animation-duration: 0.6s;
3422
+ }
3423
+
3424
+ @keyframes be-voice-indicator-pulse {
3425
+ 0%,
3426
+ 100% {
3427
+ opacity: 1;
3428
+ box-shadow: 0 0 0 0 currentColor;
3429
+ }
3430
+ 50% {
3431
+ opacity: 0.5;
3432
+ box-shadow: 0 0 0 4px transparent;
3433
+ }
3434
+ }
3435
+
3436
+ /* --- print --- */
3437
+ /*
3438
+ * Printing (or "Save as PDF" via the browser's own print dialog — this
3439
+ * package deliberately doesn't bundle a PDF-generation library, which
3440
+ * would conflict with staying zero-runtime-dependency) always renders a
3441
+ * clean, chrome-free document: every piece of editing-only UI is hidden
3442
+ * here, regardless of whether the app happens to be in preview mode at
3443
+ * the moment of printing. \`.be-block-row-hidden\` is included on purpose —
3444
+ * a block hidden via "Hide in preview" stays in the DOM (just dimmed) in
3445
+ * edit mode, so without this rule printing while NOT toggled into preview
3446
+ * mode would print blocks the user explicitly marked as hidden. A host
3447
+ * app's own outer chrome (nav bars, its own toolbar) needs its own print
3448
+ * rules the same way — see examples/basic's own style.css for a worked
3449
+ * example, since that chrome lives outside this package entirely.
3450
+ */
3451
+ @media print {
3452
+ .be-block-gutter,
3453
+ .be-block-gutter-menu,
3454
+ .be-block-gutter-menu-item,
3455
+ .be-block-range-menu,
3456
+ .be-block-range-menu-item,
3457
+ .be-block-row-hidden,
3458
+ .be-slash-menu,
3459
+ #be-emoji-menu,
3460
+ #be-at-menu,
3461
+ .be-floating-toolbar,
3462
+ .be-link-hover-card,
3463
+ .be-comment-popover,
3464
+ .be-comments-panel,
3465
+ .be-voice-indicator,
3466
+ .be-table-header-menu-trigger,
3467
+ .be-table-header-menu,
3468
+ .be-table-col-resize-handle,
3469
+ .be-table-delete-row,
3470
+ .be-table-add-row,
3471
+ .be-embed-toolbar,
3472
+ .be-embed-remove,
3473
+ .be-embed-resize-handle,
3474
+ .be-embed-dropzone,
3475
+ .be-embed-upload-btn,
3476
+ .be-embed-url-row,
3477
+ .be-canvas-toolbar,
3478
+ .be-canvas-resize-handle,
3479
+ .be-callout-color-wrap,
3480
+ .be-modal-overlay,
3481
+ .be-mobile-action-bar,
3482
+ .be-mobile-picker-list,
3483
+ .be-export-trigger,
3484
+ .be-export-tabs,
3485
+ .be-trailing-space,
3486
+ .be-select-popover,
3487
+ .be-find-bar {
3488
+ display: none !important;
3489
+ }
3490
+
3491
+ /* .be-block-row-range-selected and .be-block-selected mark real content
3492
+ (the row/block itself, not a standalone chrome element) with a
3493
+ highlight background/outline — reset just that styling rather than
3494
+ hiding the element the way the chrome above is hidden, or printing
3495
+ mid-drag-selection would print blank space instead of the block's own
3496
+ content. */
3497
+ .be-block-row-range-selected {
3498
+ background: none !important;
3499
+ }
3500
+
3501
+ .be-block-selected {
3502
+ outline: none !important;
3503
+ }
3504
+
3505
+ /* No background colors/shadows on paper, and text that's always legible
3506
+ regardless of the screen theme the page happened to be rendered in
3507
+ (dark mode's near-white text would otherwise print as barely-there). */
3508
+ .be-editable,
3509
+ .be-paragraph,
3510
+ .be-heading,
3511
+ .be-list-item,
3512
+ .be-blockquote,
3513
+ .be-code-block,
3514
+ .be-callout,
3515
+ .be-table-cell {
3516
+ background: none !important;
3517
+ box-shadow: none !important;
3518
+ color: #000 !important;
3519
+ }
3520
+
3521
+ /* Don't split a table/code block/callout/image awkwardly across a page
3522
+ boundary when it would otherwise fit on one page. */
3523
+ .be-table,
3524
+ .be-code-block,
3525
+ .be-callout,
3526
+ .be-embed-image {
3527
+ break-inside: avoid;
3528
+ }
3529
+ }
3530
+ `,B="noteloom-default-styles";function O(){if(typeof document>"u"||document.getElementById(B))return;const e=document.createElement("style");e.id=B,e.textContent=mn,document.head.appendChild(e)}const A=i.createContext(null);function pn({store:e,registry:o,inlineRegistry:r=null,history:d=null,className:c,style:g,theme:h="default",getBlockClassName:x,commentAuthorId:f,showLineNumbers:v=!1,uploadFile:y,maxFileSize:w,children:k}){i.useEffect(()=>{h!=="none"&&O()},[h]);const[j,an]=i.useState(!1),[z,ln]=i.useState(null),[I,dn]=i.useState([]),[C,sn]=i.useState(!1),[E,b]=i.useState(null),S=i.useCallback(()=>b("new"),[]),M=i.useCallback(s=>b(s),[]),T=i.useCallback(()=>b(null),[]),m=i.useRef(null),R=i.useCallback(()=>m.current,[]),P=i.useCallback(s=>{var D,_;const p=m.current;p!==s&&(p&&((D=document.querySelector(`[data-block-id="${p}"]`))==null||D.classList.remove("be-block-selected")),m.current=s,s&&((_=document.querySelector(`[data-block-id="${s}"]`))==null||_.classList.add("be-block-selected")))},[]),cn=i.useMemo(()=>({store:e,registry:o,inlineRegistry:r,history:d,isWholeDocumentSelected:j,setIsWholeDocumentSelected:an,selectedBlockRange:I,setSelectedBlockRange:dn,getSelectedBlockId:R,setSelectedBlockId:P,isPreviewMode:C,setIsPreviewMode:sn,fieldTypeEditorTarget:E,openCreateFieldType:S,openEditFieldType:M,closeFieldTypeEditor:T,getBlockClassName:x,commentAuthorId:f,hoveredCommentId:z,setHoveredCommentId:ln,showLineNumbers:v,uploadFile:y,maxFileSize:w}),[e,o,r,d,j,I,R,P,C,E,S,M,T,x,f,z,v,y,w]),bn=c||g?n.jsx("div",{className:c?`be-root ${c}`:"be-root",style:g,children:k}):k;return n.jsx(A.Provider,{value:cn,children:bn})}function l(){const e=i.useContext(A);if(!e)throw new Error("Editor hooks must be used within an <EditorProvider>");return e}function un(){return l().store}function gn(){return l().registry}function hn(){return l().inlineRegistry}function xn(){const{isWholeDocumentSelected:e,setIsWholeDocumentSelected:o}=l();return[e,o]}function fn(){const{selectedBlockRange:e,setSelectedBlockRange:o}=l();return[e,o]}function vn(){const{getSelectedBlockId:e,setSelectedBlockId:o}=l();return{getSelectedBlockId:e,setSelectedBlockId:o}}function yn(){const{isPreviewMode:e,setIsPreviewMode:o}=l();return[e,o]}function wn(e,o){const{getBlockClassName:r}=l(),d=o&&r?r(o):void 0;return d?`${e} ${d}`:e}function kn(){return l().commentAuthorId}function jn(){const{hoveredCommentId:e,setHoveredCommentId:o}=l();return[e,o]}function zn(){return l().showLineNumbers}function In(){const{uploadFile:e,maxFileSize:o}=l();return{uploadFile:e,maxFileSize:o}}function Cn(){const{fieldTypeEditorTarget:e,openCreateFieldType:o,openEditFieldType:r,closeFieldTypeEditor:d}=l();return{target:e,openCreate:o,openEdit:r,close:d}}const a={INSERT_BLOCK:"insertBlock",REMOVE_BLOCK:"removeBlock",MOVE_BLOCK:"moveBlock",CHANGE_BLOCK_TYPE:"changeBlockType",UPDATE_BLOCK_PROPS:"updateBlockProps",UPDATE_RUN:"updateRun",SET_BLOCK_CONTENT_IDS:"setBlockContentIds",REPLACE_RUN_SPAN:"replaceRunSpan",SET_BLOCK_RUNS:"setBlockRuns",EDIT_RUN_CHARS:"editRunChars",ADD_FIELD_TYPE:"addFieldType",UPDATE_FIELD_TYPE:"updateFieldType",REMOVE_FIELD_TYPE:"removeFieldType",ADD_COMMENT_THREAD:"addCommentThread",REMOVE_COMMENT_THREAD:"removeCommentThread",ADD_COMMENT_REPLY:"addCommentReply",REMOVE_COMMENT_REPLY:"removeCommentReply",RESOLVE_COMMENT:"resolveComment",ADD_PERSON:"addPerson",UPDATE_PERSON:"updatePerson",REMOVE_PERSON:"removePerson"};function L(e,o,r,d){return{type:a.INSERT_BLOCK,block:e,parentId:o,index:r,subtree:d}}function N(e){return{type:a.REMOVE_BLOCK,id:e}}function H(e,o,r){return{type:a.MOVE_BLOCK,id:e,toParentId:o,toIndex:r}}function F(e,o){return{type:a.UPDATE_BLOCK_PROPS,id:e,patch:o}}function U(e,o,r){return{type:a.CHANGE_BLOCK_TYPE,id:e,blockType:o,props:r}}function V(e,o){return{type:a.UPDATE_RUN,id:e,patch:o}}function q(e,o,r,d){return{type:a.EDIT_RUN_CHARS,id:e,tombstoneIds:o,restoreIds:r,previousValue:d}}function Y(e,o){return{type:a.SET_BLOCK_CONTENT_IDS,blockId:e,contentIds:o}}function K(e,o,r){return{type:a.REPLACE_RUN_SPAN,blockId:e,oldRunIds:o,newRuns:r}}function W(e,o){return{type:a.SET_BLOCK_RUNS,blockId:e,runs:o}}function $(e){return{type:a.ADD_FIELD_TYPE,fieldType:e}}function G(e,o){return{type:a.UPDATE_FIELD_TYPE,id:e,patch:o}}function Q(e){return{type:a.REMOVE_FIELD_TYPE,id:e}}function X(e){return{type:a.ADD_COMMENT_THREAD,thread:e}}function J(e){return{type:a.REMOVE_COMMENT_THREAD,commentId:e}}function Z(e,o){return{type:a.ADD_COMMENT_REPLY,commentId:e,message:o}}function nn(e,o){return{type:a.REMOVE_COMMENT_REPLY,commentId:e,messageId:o}}function en(e,o){return{type:a.RESOLVE_COMMENT,commentId:e,resolved:o}}function on(e){return{type:a.ADD_PERSON,person:e}}function tn(e,o){return{type:a.UPDATE_PERSON,id:e,patch:o}}function rn(e){return{type:a.REMOVE_PERSON,id:e}}const En=Object.freeze(Object.defineProperty({__proto__:null,OP:a,addCommentReply:Z,addCommentThread:X,addFieldType:$,addPerson:on,changeBlockType:U,editRunChars:q,insertBlock:L,moveBlock:H,removeBlock:N,removeCommentReply:nn,removeCommentThread:J,removeFieldType:Q,removePerson:rn,replaceRunSpan:K,resolveComment:en,setBlockContentIds:Y,setBlockRuns:W,updateBlockProps:F,updateFieldType:G,updatePerson:tn,updateRun:V},Symbol.toStringTag,{value:"Module"}));function Sn(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():`id-${Date.now()}-${Math.random().toString(36).slice(2)}`}function t({children:e,size:o=16,strokeWidth:r=2,...d}){return n.jsx("svg",{width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:r,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",...d,children:e})}function Mn(e){return n.jsx(t,{...e,children:n.jsx("polyline",{points:"9 18 15 12 9 6"})})}function Tn(e){return n.jsx(t,{...e,children:n.jsx("polyline",{points:"6 9 12 15 18 9"})})}function Rn(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),n.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}function Pn(e){return n.jsxs(t,{...e,fill:"currentColor",stroke:"none",children:[n.jsx("circle",{cx:"5",cy:"12",r:"1.6"}),n.jsx("circle",{cx:"12",cy:"12",r:"1.6"}),n.jsx("circle",{cx:"19",cy:"12",r:"1.6"})]})}function Dn(e){return n.jsx(t,{...e,children:n.jsx("path",{d:"M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"})})}function _n(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),n.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}function Bn(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"}),n.jsx("path",{d:"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"})]})}function On(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"19",y1:"4",x2:"10",y2:"4"}),n.jsx("line",{x1:"14",y1:"20",x2:"5",y2:"20"}),n.jsx("line",{x1:"15",y1:"4",x2:"9",y2:"20"})]})}function An(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M6 3v7a6 6 0 0 0 12 0V3"}),n.jsx("line",{x1:"4",y1:"21",x2:"20",y2:"21"})]})}function Ln(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M12 20h9"}),n.jsx("path",{d:"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"})]})}function Nn(e){return n.jsx(t,{...e,children:n.jsx("path",{d:"M3 17c2-4 4-4 6 0s4 4 6 0 4-4 6 0"})})}function Hn(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),n.jsx("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})}function Fn(e){return n.jsx(t,{...e,children:n.jsx("path",{d:"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"})})}function Un(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M3 12a9 9 0 1 0 3-6.7"}),n.jsx("polyline",{points:"3 5 3 10 8 10"}),n.jsx("polyline",{points:"12 7 12 12 16 14"})]})}function Vn(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M3 12a9 9 0 1 0 2.6-6.3"}),n.jsx("polyline",{points:"3 4 3 9 8 9"})]})}function qn(e){return n.jsx(t,{...e,children:n.jsx("polyline",{points:"20 6 9 17 4 12"})})}function Yn(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),n.jsx("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})]})}function Kn(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M16 4H9a3 3 0 0 0-2.83 4"}),n.jsx("path",{d:"M14 12a4 4 0 0 1 0 8H6"}),n.jsx("line",{x1:"4",y1:"12",x2:"20",y2:"12"})]})}function Wn(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"21",y1:"6",x2:"3",y2:"6"}),n.jsx("line",{x1:"17",y1:"10",x2:"3",y2:"10"}),n.jsx("line",{x1:"21",y1:"14",x2:"3",y2:"14"}),n.jsx("line",{x1:"17",y1:"18",x2:"3",y2:"18"})]})}function $n(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"21",y1:"6",x2:"3",y2:"6"}),n.jsx("line",{x1:"18",y1:"10",x2:"6",y2:"10"}),n.jsx("line",{x1:"21",y1:"14",x2:"3",y2:"14"}),n.jsx("line",{x1:"18",y1:"18",x2:"6",y2:"18"})]})}function Gn(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"21",y1:"6",x2:"3",y2:"6"}),n.jsx("line",{x1:"21",y1:"10",x2:"7",y2:"10"}),n.jsx("line",{x1:"21",y1:"14",x2:"3",y2:"14"}),n.jsx("line",{x1:"21",y1:"18",x2:"7",y2:"18"})]})}function Qn(e){return n.jsx(t,{...e,children:[5,12,19].flatMap(o=>[9,15].map(r=>n.jsx("circle",{cx:r,cy:o,r:"1.3",fill:"currentColor",stroke:"none"},`${r}-${o}`)))})}function Xn(e){return n.jsxs(t,{...e,children:[n.jsx("polyline",{points:"3 6 5 6 21 6"}),n.jsx("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}),n.jsx("line",{x1:"10",y1:"11",x2:"10",y2:"17"}),n.jsx("line",{x1:"14",y1:"11",x2:"14",y2:"17"})]})}function Jn(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"9",y:"9",width:"12",height:"12",rx:"2"}),n.jsx("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"})]})}function Zn(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"12",y1:"19",x2:"12",y2:"5"}),n.jsx("polyline",{points:"5 12 12 5 19 12"})]})}function ne(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),n.jsx("polyline",{points:"19 12 12 19 5 12"})]})}function ee(e){return n.jsx(t,{...e,children:n.jsx("rect",{x:"4",y:"4",width:"16",height:"16",rx:"1"})})}function oe(e){return n.jsx(t,{...e,children:n.jsx("circle",{cx:"12",cy:"12",r:"8"})})}function te(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"6",y1:"18",x2:"18",y2:"6"}),n.jsx("polyline",{points:"9 6 18 6 18 15"})]})}function re(e){return n.jsx(t,{...e,children:n.jsx("polygon",{points:"12 3 21 12 12 21 3 12"})})}function ae(e){return n.jsx(t,{...e,children:n.jsx("polygon",{points:"12 4 20 20 4 20"})})}function ie(e){return n.jsx(t,{...e,children:n.jsx("polygon",{points:"12 3 14.7 9.4 21.5 9.9 16.3 14.4 17.9 21 12 17.4 6.1 21 7.7 14.4 2.5 9.9 9.3 9.4"})})}function le(e){return n.jsx(t,{...e,children:n.jsx("path",{d:"M5 3l14 8-6 2-2 6-6-16z"})})}function de(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M19 20H9l-6-6a1.5 1.5 0 0 1 0-2l9-9a1.5 1.5 0 0 1 2 0l7 7a1.5 1.5 0 0 1 0 2l-7 7"}),n.jsx("path",{d:"M6.5 12.5 13 19"})]})}function se(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M12 3v12"}),n.jsx("path",{d:"M7 10l5 5 5-5"}),n.jsx("path",{d:"M4 19h16"})]})}function ce(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M6 15V9a6 6 0 0 1 12 0v6"}),n.jsx("path",{d:"M6 15a3 3 0 0 0 6 0v-4"}),n.jsx("path",{d:"M18 15a3 3 0 0 1-6 0v-4"}),n.jsx("line",{x1:"3",y1:"9",x2:"6",y2:"9"}),n.jsx("line",{x1:"3",y1:"15",x2:"6",y2:"15"}),n.jsx("line",{x1:"18",y1:"9",x2:"21",y2:"9"}),n.jsx("line",{x1:"18",y1:"15",x2:"21",y2:"15"})]})}function be(e){return n.jsxs(t,{...e,children:[n.jsx("circle",{cx:"6",cy:"6",r:"3"}),n.jsx("circle",{cx:"6",cy:"18",r:"3"}),n.jsx("line",{x1:"20",y1:"4",x2:"8.12",y2:"15.88"}),n.jsx("line",{x1:"14.47",y1:"14.48",x2:"20",y2:"20"}),n.jsx("line",{x1:"8.12",y1:"8.12",x2:"12",y2:"12"})]})}function me(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"17",y1:"6",x2:"3",y2:"6"}),n.jsx("line",{x1:"21",y1:"12",x2:"3",y2:"12"}),n.jsx("line",{x1:"15",y1:"18",x2:"3",y2:"18"})]})}function u({level:e=1,size:o=16,...r}){return n.jsx("svg",{width:o,height:o,viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",...r,children:n.jsxs("text",{x:"2",y:"18",fontSize:"14",fontWeight:"700",fill:"currentColor",fontFamily:"inherit",children:["H",e]})})}function pe(e){return n.jsx(u,{level:1,...e})}function ue(e){return n.jsx(u,{level:2,...e})}function ge(e){return n.jsx(u,{level:3,...e})}function he(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M7 7a3 3 0 0 0-3 3v3a2 2 0 0 0 2 2h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H6a3 3 0 0 1 3-3z"}),n.jsx("path",{d:"M17 7a3 3 0 0 0-3 3v3a2 2 0 0 0 2 2h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2a3 3 0 0 1 3-3z"})]})}function xe(e){return n.jsxs(t,{...e,children:[n.jsx("polyline",{points:"9 8 4 12 9 16"}),n.jsx("polyline",{points:"15 8 20 12 15 16"})]})}function fe(e){return n.jsx(t,{...e,children:n.jsx("line",{x1:"4",y1:"12",x2:"20",y2:"12"})})}function ve(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"}),n.jsx("line",{x1:"7",y1:"9",x2:"17",y2:"9"}),n.jsx("line",{x1:"7",y1:"12.5",x2:"13",y2:"12.5"})]})}function ye(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"8",width:"18",height:"8",rx:"3"}),n.jsx("line",{x1:"8",y1:"12",x2:"16",y2:"12"})]})}function we(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),n.jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),n.jsx("line",{x1:"3",y1:"16",x2:"21",y2:"16"}),n.jsx("line",{x1:"9",y1:"4",x2:"9",y2:"20"}),n.jsx("line",{x1:"15",y1:"4",x2:"15",y2:"20"})]})}function ke(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),n.jsx("line",{x1:"9",y1:"4",x2:"9",y2:"20"}),n.jsx("line",{x1:"15",y1:"4",x2:"15",y2:"20"})]})}function je(e){return n.jsxs(t,{...e,children:[n.jsx("circle",{cx:"4.5",cy:"6",r:"1.2",fill:"currentColor",stroke:"none"}),n.jsx("circle",{cx:"4.5",cy:"12",r:"1.2",fill:"currentColor",stroke:"none"}),n.jsx("circle",{cx:"4.5",cy:"18",r:"1.2",fill:"currentColor",stroke:"none"}),n.jsx("line",{x1:"9",y1:"6",x2:"21",y2:"6"}),n.jsx("line",{x1:"9",y1:"12",x2:"21",y2:"12"}),n.jsx("line",{x1:"9",y1:"18",x2:"21",y2:"18"})]})}function ze(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"10",y1:"6",x2:"21",y2:"6"}),n.jsx("line",{x1:"10",y1:"12",x2:"21",y2:"12"}),n.jsx("line",{x1:"10",y1:"18",x2:"21",y2:"18"}),n.jsx("text",{x:"2",y:"8.5",fontSize:"7",fontWeight:"700",fill:"currentColor",stroke:"none",children:"1"}),n.jsx("text",{x:"2",y:"14.5",fontSize:"7",fontWeight:"700",fill:"currentColor",stroke:"none",children:"2"}),n.jsx("text",{x:"2",y:"20.5",fontSize:"7",fontWeight:"700",fill:"currentColor",stroke:"none",children:"3"})]})}function Ie(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"4",y:"4",width:"16",height:"16",rx:"3"}),n.jsx("polyline",{points:"8 12 11 15 16 9"})]})}function Ce(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"5",width:"18",height:"16",rx:"2"}),n.jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),n.jsx("line",{x1:"8",y1:"3",x2:"8",y2:"7"}),n.jsx("line",{x1:"16",y1:"3",x2:"16",y2:"7"})]})}function Ee(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M12 3h7a2 2 0 0 1 2 2v7a2 2 0 0 1-.59 1.41l-8 8a2 2 0 0 1-2.82 0l-7-7a2 2 0 0 1 0-2.82l8-8A2 2 0 0 1 12 3z"}),n.jsx("circle",{cx:"15.5",cy:"8.5",r:"1.2",fill:"currentColor",stroke:"none"})]})}function Se(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),n.jsx("circle",{cx:"9",cy:"10",r:"1.5",fill:"currentColor",stroke:"none"}),n.jsx("path",{d:"M4 17l5-5 4 4 4-5 4 6"})]})}function Me(e){return n.jsxs(t,{...e,children:[n.jsx("rect",{x:"3",y:"5",width:"14",height:"14",rx:"2"}),n.jsx("path",{d:"M17 10l4-2.5v9L17 14"})]})}function Te(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"}),n.jsx("circle",{cx:"12",cy:"12",r:"3"})]})}function Re(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M17.94 17.94A10.94 10.94 0 0 1 12 19c-6.5 0-10-7-10-7a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19"}),n.jsx("path",{d:"M14.12 14.12a3 3 0 1 1-4.24-4.24"}),n.jsx("line",{x1:"1",y1:"1",x2:"23",y2:"23"})]})}function Pe(e){return n.jsxs(t,{...e,children:[n.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"14"}),n.jsx("line",{x1:"8",y1:"7",x2:"8",y2:"17"}),n.jsx("line",{x1:"12",y1:"4",x2:"12",y2:"20"}),n.jsx("line",{x1:"16",y1:"7",x2:"16",y2:"17"}),n.jsx("line",{x1:"20",y1:"10",x2:"20",y2:"14"})]})}function De(e){return n.jsxs(t,{...e,children:[n.jsx("path",{d:"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"}),n.jsx("path",{d:"M19 10v2a7 7 0 0 1-14 0v-2"}),n.jsx("line",{x1:"12",y1:"19",x2:"12",y2:"23"}),n.jsx("line",{x1:"8",y1:"23",x2:"16",y2:"23"})]})}exports.AlignCenterIcon=$n;exports.AlignLeftIcon=Wn;exports.AlignRightIcon=Gn;exports.ArrowDiagonalIcon=te;exports.ArrowDownIcon=ne;exports.ArrowUpIcon=Zn;exports.AudioIcon=Pe;exports.BoldIcon=Bn;exports.BulletedListIcon=je;exports.ButtonIcon=ye;exports.CalloutIcon=ve;exports.CheckIcon=qn;exports.CheckboxIcon=Ie;exports.ChevronDownIcon=Tn;exports.ChevronRightIcon=Mn;exports.CircleIcon=oe;exports.ClockHistoryIcon=Un;exports.CodeIcon=xe;exports.ColumnsIcon=ke;exports.CommentIcon=Fn;exports.CopyIcon=Jn;exports.CursorIcon=le;exports.DateIcon=Ce;exports.DiamondIcon=re;exports.DividerIcon=fe;exports.DownloadIcon=se;exports.EditorProvider=pn;exports.EraserIcon=de;exports.EyeIcon=Te;exports.EyeOffIcon=Re;exports.GripVerticalIcon=Qn;exports.Heading1Icon=pe;exports.Heading2Icon=ue;exports.Heading3Icon=ge;exports.ImageIcon=Se;exports.ItalicIcon=On;exports.LinkIcon=Hn;exports.MagnetIcon=ce;exports.MicIcon=De;exports.MoreHorizontalIcon=Pn;exports.NumberedListIcon=ze;exports.OP=a;exports.PaperclipIcon=Dn;exports.PencilIcon=Ln;exports.PlusIcon=_n;exports.QuoteIcon=he;exports.RestoreIcon=Vn;exports.ScissorsIcon=be;exports.ScribbleIcon=Nn;exports.SelectIcon=Ee;exports.SendIcon=Yn;exports.SquareIcon=ee;exports.StarIcon=ie;exports.StrikethroughIcon=Kn;exports.TableIcon=we;exports.TextIcon=me;exports.TrashIcon=Xn;exports.TriangleIcon=ae;exports.UnderlineIcon=An;exports.VideoIcon=Me;exports.XIcon=Rn;exports.addCommentReply=Z;exports.addCommentThread=X;exports.addFieldType=$;exports.addPerson=on;exports.changeBlockType=U;exports.editRunChars=q;exports.genId=Sn;exports.injectDefaultStyles=O;exports.insertBlock=L;exports.moveBlock=H;exports.operations=En;exports.removeBlock=N;exports.removeCommentReply=nn;exports.removeCommentThread=J;exports.removeFieldType=Q;exports.removePerson=rn;exports.replaceRunSpan=K;exports.resolveComment=en;exports.setBlockContentIds=Y;exports.setBlockRuns=W;exports.updateBlockProps=F;exports.updateFieldType=G;exports.updatePerson=tn;exports.updateRun=V;exports.useBlockClassName=wn;exports.useBlockRangeSelection=fn;exports.useBlockRegistry=gn;exports.useCommentAuthorId=kn;exports.useEditorContext=l;exports.useEditorStore=un;exports.useFieldTypeEditor=Cn;exports.useFileUpload=In;exports.useHoveredComment=jn;exports.useInlineRegistry=hn;exports.usePreviewMode=yn;exports.useSelectedBlock=vn;exports.useShowLineNumbers=zn;exports.useWholeDocumentSelection=xn;
3531
+ //# sourceMappingURL=icons-DtCsXuU6.cjs.map