inkpen 0.7.1

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 (95) hide show
  1. checksums.yaml +7 -0
  2. data/.DS_Store +0 -0
  3. data/.rubocop.yml +8 -0
  4. data/.yardopts +11 -0
  5. data/CLAUDE.md +141 -0
  6. data/README.md +409 -0
  7. data/Rakefile +19 -0
  8. data/app/assets/javascripts/inkpen/controllers/editor_controller.js +2050 -0
  9. data/app/assets/javascripts/inkpen/controllers/sticky_toolbar_controller.js +667 -0
  10. data/app/assets/javascripts/inkpen/controllers/toolbar_controller.js +693 -0
  11. data/app/assets/javascripts/inkpen/export/html.js +637 -0
  12. data/app/assets/javascripts/inkpen/export/index.js +30 -0
  13. data/app/assets/javascripts/inkpen/export/markdown.js +697 -0
  14. data/app/assets/javascripts/inkpen/export/pdf.js +372 -0
  15. data/app/assets/javascripts/inkpen/extensions/advanced_table.js +640 -0
  16. data/app/assets/javascripts/inkpen/extensions/block_commands.js +300 -0
  17. data/app/assets/javascripts/inkpen/extensions/block_gutter.js +338 -0
  18. data/app/assets/javascripts/inkpen/extensions/callout.js +303 -0
  19. data/app/assets/javascripts/inkpen/extensions/columns.js +403 -0
  20. data/app/assets/javascripts/inkpen/extensions/database.js +990 -0
  21. data/app/assets/javascripts/inkpen/extensions/document_section.js +352 -0
  22. data/app/assets/javascripts/inkpen/extensions/drag_handle.js +407 -0
  23. data/app/assets/javascripts/inkpen/extensions/embed.js +629 -0
  24. data/app/assets/javascripts/inkpen/extensions/enhanced_image.js +566 -0
  25. data/app/assets/javascripts/inkpen/extensions/export_commands.js +271 -0
  26. data/app/assets/javascripts/inkpen/extensions/file_attachment.js +593 -0
  27. data/app/assets/javascripts/inkpen/extensions/inkpen_table/index.js +58 -0
  28. data/app/assets/javascripts/inkpen/extensions/inkpen_table/inkpen_table.js +638 -0
  29. data/app/assets/javascripts/inkpen/extensions/inkpen_table/inkpen_table_cell.js +100 -0
  30. data/app/assets/javascripts/inkpen/extensions/inkpen_table/inkpen_table_header.js +100 -0
  31. data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_constants.js +152 -0
  32. data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_helpers.js +254 -0
  33. data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_menu.js +282 -0
  34. data/app/assets/javascripts/inkpen/extensions/preformatted.js +239 -0
  35. data/app/assets/javascripts/inkpen/extensions/section.js +281 -0
  36. data/app/assets/javascripts/inkpen/extensions/section_title.js +126 -0
  37. data/app/assets/javascripts/inkpen/extensions/slash_commands.js +439 -0
  38. data/app/assets/javascripts/inkpen/extensions/table_of_contents.js +474 -0
  39. data/app/assets/javascripts/inkpen/extensions/toggle_block.js +332 -0
  40. data/app/assets/javascripts/inkpen/index.js +87 -0
  41. data/app/assets/stylesheets/inkpen/advanced_table.css +514 -0
  42. data/app/assets/stylesheets/inkpen/animations.css +626 -0
  43. data/app/assets/stylesheets/inkpen/block_gutter.css +265 -0
  44. data/app/assets/stylesheets/inkpen/callout.css +359 -0
  45. data/app/assets/stylesheets/inkpen/columns.css +314 -0
  46. data/app/assets/stylesheets/inkpen/database.css +658 -0
  47. data/app/assets/stylesheets/inkpen/document_section.css +305 -0
  48. data/app/assets/stylesheets/inkpen/drag_drop.css +220 -0
  49. data/app/assets/stylesheets/inkpen/editor.css +652 -0
  50. data/app/assets/stylesheets/inkpen/embed.css +468 -0
  51. data/app/assets/stylesheets/inkpen/enhanced_image.css +453 -0
  52. data/app/assets/stylesheets/inkpen/export.css +499 -0
  53. data/app/assets/stylesheets/inkpen/file_attachment.css +347 -0
  54. data/app/assets/stylesheets/inkpen/footnotes.css +136 -0
  55. data/app/assets/stylesheets/inkpen/inkpen_table.css +608 -0
  56. data/app/assets/stylesheets/inkpen/preformatted.css +215 -0
  57. data/app/assets/stylesheets/inkpen/search_replace.css +58 -0
  58. data/app/assets/stylesheets/inkpen/section.css +236 -0
  59. data/app/assets/stylesheets/inkpen/slash_menu.css +252 -0
  60. data/app/assets/stylesheets/inkpen/sticky_toolbar.css +314 -0
  61. data/app/assets/stylesheets/inkpen/toc.css +386 -0
  62. data/app/assets/stylesheets/inkpen/toggle.css +260 -0
  63. data/app/helpers/inkpen/editor_helper.rb +114 -0
  64. data/app/views/inkpen/_editor.html.erb +139 -0
  65. data/config/importmap.rb +170 -0
  66. data/docs/.DS_Store +0 -0
  67. data/docs/CHANGELOG.md +571 -0
  68. data/docs/FEATURES.md +436 -0
  69. data/docs/ROADMAP.md +3029 -0
  70. data/docs/VISION.md +235 -0
  71. data/docs/extensions/INKPEN_TABLE.md +482 -0
  72. data/docs/thinking/CORRECTED_NO_VUE.md +756 -0
  73. data/docs/thinking/EXECUTIVE_SUMMARY.md +403 -0
  74. data/docs/thinking/INKPEN_CODE_SAMPLES.md +1479 -0
  75. data/docs/thinking/INKPEN_MASTER_GUIDE.md +891 -0
  76. data/docs/thinking/README_START_HERE.md +341 -0
  77. data/lib/inkpen/configuration.rb +175 -0
  78. data/lib/inkpen/editor.rb +204 -0
  79. data/lib/inkpen/engine.rb +32 -0
  80. data/lib/inkpen/extensions/base.rb +109 -0
  81. data/lib/inkpen/extensions/code_block_syntax.rb +177 -0
  82. data/lib/inkpen/extensions/document_section.rb +111 -0
  83. data/lib/inkpen/extensions/forced_document.rb +183 -0
  84. data/lib/inkpen/extensions/mention.rb +155 -0
  85. data/lib/inkpen/extensions/preformatted.rb +111 -0
  86. data/lib/inkpen/extensions/section.rb +139 -0
  87. data/lib/inkpen/extensions/slash_commands.rb +100 -0
  88. data/lib/inkpen/extensions/table.rb +182 -0
  89. data/lib/inkpen/extensions/task_list.rb +145 -0
  90. data/lib/inkpen/sticky_toolbar.rb +157 -0
  91. data/lib/inkpen/toolbar.rb +145 -0
  92. data/lib/inkpen/version.rb +5 -0
  93. data/lib/inkpen.rb +101 -0
  94. data/sig/inkpen.rbs +4 -0
  95. metadata +165 -0
@@ -0,0 +1,658 @@
1
+ /**
2
+ * Database Block Styles
3
+ *
4
+ * Notion-style inline databases with multiple views.
5
+ *
6
+ * @since 0.6.0
7
+ */
8
+
9
+ /* ============================================
10
+ CSS Custom Properties
11
+ ============================================ */
12
+
13
+ :root {
14
+ --inkpen-select-gray: rgba(120, 120, 120, 0.2);
15
+ --inkpen-select-red: rgba(239, 68, 68, 0.2);
16
+ --inkpen-select-orange: rgba(249, 115, 22, 0.2);
17
+ --inkpen-select-yellow: rgba(234, 179, 8, 0.2);
18
+ --inkpen-select-green: rgba(34, 197, 94, 0.2);
19
+ --inkpen-select-blue: rgba(59, 130, 246, 0.2);
20
+ --inkpen-select-purple: rgba(168, 85, 247, 0.2);
21
+ --inkpen-select-pink: rgba(236, 72, 153, 0.2);
22
+ }
23
+
24
+ /* ============================================
25
+ Main Container
26
+ ============================================ */
27
+
28
+ .inkpen-database {
29
+ margin: 1.5rem 0;
30
+ border: 1px solid var(--inkpen-color-border);
31
+ border-radius: var(--inkpen-radius);
32
+ overflow: hidden;
33
+ background: var(--inkpen-toolbar-bg);
34
+ }
35
+
36
+ /* ============================================
37
+ Header
38
+ ============================================ */
39
+
40
+ .inkpen-database__header {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 0.75rem;
44
+ padding: 0.75rem 1rem;
45
+ border-bottom: 1px solid var(--inkpen-color-border);
46
+ background: var(--inkpen-color-bg-subtle);
47
+ }
48
+
49
+ .inkpen-database__title {
50
+ flex: 1;
51
+ font-size: 1rem;
52
+ font-weight: 600;
53
+ border: none;
54
+ background: transparent;
55
+ color: var(--inkpen-color-text);
56
+ padding: 0.25rem 0;
57
+ outline: none;
58
+ }
59
+
60
+ .inkpen-database__title:focus {
61
+ background: var(--inkpen-toolbar-bg);
62
+ border-radius: var(--inkpen-radius-sm, 4px);
63
+ padding: 0.25rem 0.5rem;
64
+ margin: -0.25rem -0.5rem;
65
+ }
66
+
67
+ .inkpen-database__views {
68
+ display: flex;
69
+ gap: 0.25rem;
70
+ }
71
+
72
+ .inkpen-database__view-tab {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ width: 32px;
77
+ height: 32px;
78
+ padding: 0;
79
+ border: none;
80
+ border-radius: var(--inkpen-radius-sm, 4px);
81
+ background: transparent;
82
+ color: var(--inkpen-color-text-muted);
83
+ cursor: pointer;
84
+ transition: background 150ms ease, color 150ms ease;
85
+ }
86
+
87
+ .inkpen-database__view-tab:hover {
88
+ background: var(--inkpen-toolbar-bg);
89
+ color: var(--inkpen-color-text);
90
+ }
91
+
92
+ .inkpen-database__view-tab.is-active {
93
+ background: var(--inkpen-color-primary);
94
+ color: white;
95
+ }
96
+
97
+ .inkpen-database__view-icon {
98
+ font-size: 1rem;
99
+ }
100
+
101
+ .inkpen-database__actions {
102
+ display: flex;
103
+ gap: 0.5rem;
104
+ }
105
+
106
+ .inkpen-database__action-btn {
107
+ padding: 0.375rem 0.75rem;
108
+ border: none;
109
+ border-radius: var(--inkpen-radius-sm, 4px);
110
+ background: var(--inkpen-color-primary);
111
+ color: white;
112
+ font-size: 0.8125rem;
113
+ font-weight: 500;
114
+ cursor: pointer;
115
+ transition: opacity 150ms ease;
116
+ }
117
+
118
+ .inkpen-database__action-btn:hover {
119
+ opacity: 0.9;
120
+ }
121
+
122
+ /* ============================================
123
+ Content Container
124
+ ============================================ */
125
+
126
+ .inkpen-database__content {
127
+ max-height: 500px;
128
+ overflow: auto;
129
+ }
130
+
131
+ .inkpen-database__empty {
132
+ padding: 2rem;
133
+ text-align: center;
134
+ color: var(--inkpen-color-text-muted);
135
+ font-style: italic;
136
+ }
137
+
138
+ /* ============================================
139
+ Table View
140
+ ============================================ */
141
+
142
+ .inkpen-database__table-wrapper {
143
+ overflow-x: auto;
144
+ }
145
+
146
+ .inkpen-database__table {
147
+ width: 100%;
148
+ border-collapse: collapse;
149
+ font-size: 0.875rem;
150
+ }
151
+
152
+ .inkpen-database__table th {
153
+ text-align: left;
154
+ padding: 0.5rem 0.75rem;
155
+ border-bottom: 1px solid var(--inkpen-color-border);
156
+ background: var(--inkpen-color-bg-subtle);
157
+ font-weight: 500;
158
+ font-size: 0.75rem;
159
+ color: var(--inkpen-color-text-muted);
160
+ white-space: nowrap;
161
+ position: sticky;
162
+ top: 0;
163
+ z-index: 10;
164
+ }
165
+
166
+ .inkpen-database__prop-icon {
167
+ margin-right: 0.375rem;
168
+ opacity: 0.6;
169
+ }
170
+
171
+ .inkpen-database__table td {
172
+ padding: 0;
173
+ border-bottom: 1px solid var(--inkpen-color-border);
174
+ vertical-align: middle;
175
+ }
176
+
177
+ .inkpen-database__table tr:hover td {
178
+ background: var(--inkpen-color-bg-subtle);
179
+ }
180
+
181
+ .inkpen-database__add-prop {
182
+ width: 40px;
183
+ text-align: center;
184
+ cursor: pointer;
185
+ color: var(--inkpen-color-text-muted);
186
+ transition: color 150ms ease;
187
+ }
188
+
189
+ .inkpen-database__add-prop:hover {
190
+ color: var(--inkpen-color-primary);
191
+ }
192
+
193
+ .inkpen-database__new-row {
194
+ cursor: pointer;
195
+ }
196
+
197
+ .inkpen-database__new-row td {
198
+ padding: 0.5rem 0.75rem;
199
+ color: var(--inkpen-color-text-muted);
200
+ font-size: 0.8125rem;
201
+ }
202
+
203
+ .inkpen-database__new-row:hover td {
204
+ color: var(--inkpen-color-primary);
205
+ }
206
+
207
+ .inkpen-database__row-actions {
208
+ width: 32px;
209
+ text-align: center;
210
+ opacity: 0;
211
+ transition: opacity 150ms ease;
212
+ }
213
+
214
+ .inkpen-database__table tr:hover .inkpen-database__row-actions {
215
+ opacity: 1;
216
+ }
217
+
218
+ .inkpen-database__row-delete {
219
+ width: 24px;
220
+ height: 24px;
221
+ padding: 0;
222
+ border: none;
223
+ border-radius: var(--inkpen-radius-sm, 4px);
224
+ background: transparent;
225
+ color: var(--inkpen-color-text-muted);
226
+ font-size: 1rem;
227
+ cursor: pointer;
228
+ transition: color 150ms ease, background 150ms ease;
229
+ }
230
+
231
+ .inkpen-database__row-delete:hover {
232
+ background: rgba(239, 68, 68, 0.1);
233
+ color: #ef4444;
234
+ }
235
+
236
+ /* ============================================
237
+ Cell Styles
238
+ ============================================ */
239
+
240
+ .inkpen-database__cell {
241
+ padding: 0.5rem 0.75rem;
242
+ min-height: 36px;
243
+ display: flex;
244
+ align-items: center;
245
+ }
246
+
247
+ .inkpen-database__cell-input {
248
+ width: 100%;
249
+ padding: 0;
250
+ border: none;
251
+ background: transparent;
252
+ color: var(--inkpen-color-text);
253
+ font-size: inherit;
254
+ font-family: inherit;
255
+ outline: none;
256
+ }
257
+
258
+ .inkpen-database__cell-input:focus {
259
+ background: var(--inkpen-toolbar-bg);
260
+ border-radius: var(--inkpen-radius-sm, 4px);
261
+ padding: 0.25rem;
262
+ margin: -0.25rem;
263
+ }
264
+
265
+ .inkpen-database__cell-input[type="date"] {
266
+ cursor: pointer;
267
+ }
268
+
269
+ .inkpen-database__cell-checkbox {
270
+ width: 16px;
271
+ height: 16px;
272
+ cursor: pointer;
273
+ accent-color: var(--inkpen-color-primary);
274
+ }
275
+
276
+ .inkpen-database__cell--select {
277
+ cursor: pointer;
278
+ }
279
+
280
+ /* ============================================
281
+ Tags (Select Values)
282
+ ============================================ */
283
+
284
+ .inkpen-database__tag {
285
+ display: inline-block;
286
+ padding: 0.125rem 0.5rem;
287
+ border-radius: 1rem;
288
+ font-size: 0.75rem;
289
+ font-weight: 500;
290
+ }
291
+
292
+ .inkpen-database__tag--gray { background: var(--inkpen-select-gray); }
293
+ .inkpen-database__tag--red { background: var(--inkpen-select-red); color: #dc2626; }
294
+ .inkpen-database__tag--orange { background: var(--inkpen-select-orange); color: #ea580c; }
295
+ .inkpen-database__tag--yellow { background: var(--inkpen-select-yellow); color: #ca8a04; }
296
+ .inkpen-database__tag--green { background: var(--inkpen-select-green); color: #16a34a; }
297
+ .inkpen-database__tag--blue { background: var(--inkpen-select-blue); color: #2563eb; }
298
+ .inkpen-database__tag--purple { background: var(--inkpen-select-purple); color: #9333ea; }
299
+ .inkpen-database__tag--pink { background: var(--inkpen-select-pink); color: #db2777; }
300
+
301
+ /* ============================================
302
+ Board View (Kanban)
303
+ ============================================ */
304
+
305
+ .inkpen-database__board {
306
+ display: flex;
307
+ gap: 1rem;
308
+ padding: 1rem;
309
+ overflow-x: auto;
310
+ min-height: 300px;
311
+ }
312
+
313
+ .inkpen-database__column {
314
+ flex: 0 0 260px;
315
+ min-width: 260px;
316
+ background: var(--inkpen-color-bg-subtle);
317
+ border-radius: var(--inkpen-radius);
318
+ display: flex;
319
+ flex-direction: column;
320
+ }
321
+
322
+ .inkpen-database__column-header {
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: space-between;
326
+ padding: 0.75rem;
327
+ font-weight: 500;
328
+ font-size: 0.8125rem;
329
+ }
330
+
331
+ .inkpen-database__column-label {
332
+ display: inline-flex;
333
+ align-items: center;
334
+ padding: 0.125rem 0.5rem;
335
+ border-radius: 1rem;
336
+ background: var(--select-color, var(--inkpen-select-gray));
337
+ }
338
+
339
+ .inkpen-database__column-count {
340
+ color: var(--inkpen-color-text-muted);
341
+ font-size: 0.75rem;
342
+ }
343
+
344
+ .inkpen-database__column-items {
345
+ flex: 1;
346
+ padding: 0.5rem;
347
+ display: flex;
348
+ flex-direction: column;
349
+ gap: 0.5rem;
350
+ overflow-y: auto;
351
+ }
352
+
353
+ .inkpen-database__card {
354
+ padding: 0.75rem;
355
+ background: var(--inkpen-toolbar-bg);
356
+ border-radius: var(--inkpen-radius);
357
+ border: 1px solid var(--inkpen-color-border);
358
+ cursor: pointer;
359
+ transition: box-shadow 150ms ease;
360
+ }
361
+
362
+ .inkpen-database__card:hover {
363
+ box-shadow: var(--inkpen-shadow);
364
+ }
365
+
366
+ .inkpen-database__card-title {
367
+ font-weight: 500;
368
+ font-size: 0.875rem;
369
+ margin-bottom: 0.5rem;
370
+ }
371
+
372
+ .inkpen-database__card-props {
373
+ display: flex;
374
+ flex-wrap: wrap;
375
+ gap: 0.375rem;
376
+ }
377
+
378
+ .inkpen-database__card-prop {
379
+ font-size: 0.75rem;
380
+ color: var(--inkpen-color-text-muted);
381
+ }
382
+
383
+ .inkpen-database__add-card {
384
+ width: 100%;
385
+ padding: 0.5rem;
386
+ border: none;
387
+ border-radius: var(--inkpen-radius-sm, 4px);
388
+ background: transparent;
389
+ color: var(--inkpen-color-text-muted);
390
+ font-size: 0.8125rem;
391
+ text-align: left;
392
+ cursor: pointer;
393
+ transition: background 150ms ease, color 150ms ease;
394
+ }
395
+
396
+ .inkpen-database__add-card:hover {
397
+ background: var(--inkpen-toolbar-bg);
398
+ color: var(--inkpen-color-primary);
399
+ }
400
+
401
+ /* ============================================
402
+ List View
403
+ ============================================ */
404
+
405
+ .inkpen-database__list {
406
+ padding: 0.5rem;
407
+ }
408
+
409
+ .inkpen-database__list-item {
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: space-between;
413
+ padding: 0.75rem 1rem;
414
+ border-bottom: 1px solid var(--inkpen-color-border);
415
+ transition: background 150ms ease;
416
+ }
417
+
418
+ .inkpen-database__list-item:last-child {
419
+ border-bottom: none;
420
+ }
421
+
422
+ .inkpen-database__list-item:hover {
423
+ background: var(--inkpen-color-bg-subtle);
424
+ }
425
+
426
+ .inkpen-database__list-name {
427
+ font-weight: 500;
428
+ font-size: 0.875rem;
429
+ }
430
+
431
+ .inkpen-database__list-props {
432
+ display: flex;
433
+ gap: 0.75rem;
434
+ }
435
+
436
+ .inkpen-database__list-prop {
437
+ font-size: 0.75rem;
438
+ color: var(--inkpen-color-text-muted);
439
+ }
440
+
441
+ /* ============================================
442
+ Gallery View
443
+ ============================================ */
444
+
445
+ .inkpen-database__gallery {
446
+ display: grid;
447
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
448
+ gap: 1rem;
449
+ padding: 1rem;
450
+ }
451
+
452
+ .inkpen-database__gallery-card {
453
+ padding: 1rem;
454
+ background: var(--inkpen-color-bg-subtle);
455
+ border-radius: var(--inkpen-radius);
456
+ border: 1px solid var(--inkpen-color-border);
457
+ transition: box-shadow 150ms ease;
458
+ }
459
+
460
+ .inkpen-database__gallery-card:hover {
461
+ box-shadow: var(--inkpen-shadow);
462
+ }
463
+
464
+ .inkpen-database__gallery-name {
465
+ font-weight: 500;
466
+ font-size: 0.9375rem;
467
+ margin-bottom: 0.75rem;
468
+ }
469
+
470
+ .inkpen-database__gallery-props {
471
+ display: flex;
472
+ flex-direction: column;
473
+ gap: 0.375rem;
474
+ }
475
+
476
+ .inkpen-database__gallery-prop {
477
+ display: flex;
478
+ justify-content: space-between;
479
+ font-size: 0.75rem;
480
+ }
481
+
482
+ .inkpen-database__gallery-prop-label {
483
+ color: var(--inkpen-color-text-muted);
484
+ }
485
+
486
+ .inkpen-database__gallery-prop-value {
487
+ font-weight: 500;
488
+ }
489
+
490
+ /* ============================================
491
+ Dropdowns
492
+ ============================================ */
493
+
494
+ .inkpen-database__select-menu,
495
+ .inkpen-database__prop-menu {
496
+ min-width: 160px;
497
+ padding: 0.375rem;
498
+ background: var(--inkpen-toolbar-bg);
499
+ border: 1px solid var(--inkpen-color-border);
500
+ border-radius: var(--inkpen-radius);
501
+ box-shadow: var(--inkpen-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
502
+ animation: inkpen-db-dropdown-in 150ms ease;
503
+ }
504
+
505
+ @keyframes inkpen-db-dropdown-in {
506
+ from {
507
+ opacity: 0;
508
+ transform: translateY(-4px);
509
+ }
510
+ to {
511
+ opacity: 1;
512
+ transform: translateY(0);
513
+ }
514
+ }
515
+
516
+ .inkpen-database__select-item,
517
+ .inkpen-database__prop-menu-item {
518
+ display: flex;
519
+ align-items: center;
520
+ gap: 0.5rem;
521
+ width: 100%;
522
+ padding: 0.5rem 0.75rem;
523
+ border: none;
524
+ border-radius: var(--inkpen-radius-sm, 4px);
525
+ background: transparent;
526
+ color: var(--inkpen-color-text);
527
+ font-size: 0.875rem;
528
+ text-align: left;
529
+ cursor: pointer;
530
+ transition: background 150ms ease;
531
+ }
532
+
533
+ .inkpen-database__select-item:hover,
534
+ .inkpen-database__prop-menu-item:hover {
535
+ background: var(--inkpen-color-bg-subtle);
536
+ }
537
+
538
+ .inkpen-database__select-item.is-active {
539
+ background: rgba(var(--inkpen-color-primary-rgb, 59, 130, 246), 0.1);
540
+ }
541
+
542
+ /* ============================================
543
+ Dark Mode
544
+ ============================================ */
545
+
546
+ @media (prefers-color-scheme: dark) {
547
+ :root {
548
+ --inkpen-select-gray: rgba(180, 180, 180, 0.2);
549
+ --inkpen-select-red: rgba(239, 68, 68, 0.25);
550
+ --inkpen-select-orange: rgba(249, 115, 22, 0.25);
551
+ --inkpen-select-yellow: rgba(234, 179, 8, 0.25);
552
+ --inkpen-select-green: rgba(34, 197, 94, 0.25);
553
+ --inkpen-select-blue: rgba(59, 130, 246, 0.25);
554
+ --inkpen-select-purple: rgba(168, 85, 247, 0.25);
555
+ --inkpen-select-pink: rgba(236, 72, 153, 0.25);
556
+ }
557
+
558
+ .inkpen-database__tag--red { color: #f87171; }
559
+ .inkpen-database__tag--orange { color: #fb923c; }
560
+ .inkpen-database__tag--yellow { color: #fbbf24; }
561
+ .inkpen-database__tag--green { color: #4ade80; }
562
+ .inkpen-database__tag--blue { color: #60a5fa; }
563
+ .inkpen-database__tag--purple { color: #c084fc; }
564
+ .inkpen-database__tag--pink { color: #f472b6; }
565
+ }
566
+
567
+ /* ============================================
568
+ Mobile Optimizations
569
+ ============================================ */
570
+
571
+ @media (max-width: 768px) {
572
+ .inkpen-database__header {
573
+ flex-wrap: wrap;
574
+ gap: 0.5rem;
575
+ }
576
+
577
+ .inkpen-database__title {
578
+ width: 100%;
579
+ order: -1;
580
+ }
581
+
582
+ .inkpen-database__board {
583
+ padding: 0.75rem;
584
+ }
585
+
586
+ .inkpen-database__column {
587
+ flex: 0 0 240px;
588
+ min-width: 240px;
589
+ }
590
+
591
+ .inkpen-database__gallery {
592
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
593
+ gap: 0.75rem;
594
+ padding: 0.75rem;
595
+ }
596
+
597
+ .inkpen-database__view-tab {
598
+ width: 36px;
599
+ height: 36px;
600
+ }
601
+ }
602
+
603
+ /* ============================================
604
+ Print Styles
605
+ ============================================ */
606
+
607
+ @media print {
608
+ .inkpen-database {
609
+ break-inside: avoid;
610
+ page-break-inside: avoid;
611
+ }
612
+
613
+ .inkpen-database__header {
614
+ background: none;
615
+ }
616
+
617
+ .inkpen-database__views,
618
+ .inkpen-database__actions,
619
+ .inkpen-database__add-prop,
620
+ .inkpen-database__new-row,
621
+ .inkpen-database__row-actions,
622
+ .inkpen-database__add-card {
623
+ display: none !important;
624
+ }
625
+
626
+ .inkpen-database__content {
627
+ max-height: none;
628
+ overflow: visible;
629
+ }
630
+
631
+ .inkpen-database__board {
632
+ flex-wrap: wrap;
633
+ }
634
+
635
+ .inkpen-database__column {
636
+ break-inside: avoid;
637
+ page-break-inside: avoid;
638
+ }
639
+ }
640
+
641
+ /* ============================================
642
+ Reduced Motion
643
+ ============================================ */
644
+
645
+ @media (prefers-reduced-motion: reduce) {
646
+ .inkpen-database__view-tab,
647
+ .inkpen-database__action-btn,
648
+ .inkpen-database__card,
649
+ .inkpen-database__select-menu,
650
+ .inkpen-database__prop-menu {
651
+ transition: none;
652
+ }
653
+
654
+ @keyframes inkpen-db-dropdown-in {
655
+ from { opacity: 1; transform: none; }
656
+ to { opacity: 1; transform: none; }
657
+ }
658
+ }