sqlite-hub 0.5.0 → 0.7.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 (50) hide show
  1. package/README.md +109 -2
  2. package/bin/sqlite-hub.js +285 -4
  3. package/changelog.md +15 -0
  4. package/frontend/assets/mockups/connections.png +0 -0
  5. package/frontend/assets/mockups/data.png +0 -0
  6. package/frontend/assets/mockups/data_row_editor.png +0 -0
  7. package/frontend/assets/mockups/home.png +0 -0
  8. package/frontend/assets/mockups/sql_editor.png +0 -0
  9. package/frontend/assets/mockups/sql_editor_croped.png +0 -0
  10. package/frontend/assets/mockups/sql_editor_querydetail.png +0 -0
  11. package/frontend/assets/mockups/structure.png +0 -0
  12. package/frontend/assets/mockups/structure_inspector.png +0 -0
  13. package/frontend/index.html +1 -0
  14. package/frontend/js/api.js +49 -0
  15. package/frontend/js/app.js +377 -9
  16. package/frontend/js/components/modal.js +314 -1
  17. package/frontend/js/components/queryChartRenderer.js +125 -0
  18. package/frontend/js/components/queryEditor.js +37 -8
  19. package/frontend/js/components/queryHistoryPanel.js +16 -5
  20. package/frontend/js/components/sidebar.js +2 -0
  21. package/frontend/js/components/tableDesignerEditor.js +356 -0
  22. package/frontend/js/components/tableDesignerSidebar.js +129 -0
  23. package/frontend/js/components/tableDesignerSqlPreview.js +40 -0
  24. package/frontend/js/lib/queryChartOptions.js +283 -0
  25. package/frontend/js/lib/queryCharts.js +560 -0
  26. package/frontend/js/router.js +18 -0
  27. package/frontend/js/store.js +914 -1
  28. package/frontend/js/utils/tableDesigner.js +1192 -0
  29. package/frontend/js/views/charts.js +471 -0
  30. package/frontend/js/views/data.js +281 -277
  31. package/frontend/js/views/editor.js +19 -13
  32. package/frontend/js/views/structure.js +81 -39
  33. package/frontend/js/views/tableDesigner.js +37 -0
  34. package/frontend/styles/base.css +87 -73
  35. package/frontend/styles/components.css +790 -251
  36. package/frontend/styles/views.css +316 -46
  37. package/package.json +2 -1
  38. package/server/routes/charts.js +153 -0
  39. package/server/routes/tableDesigner.js +60 -0
  40. package/server/server.js +10 -0
  41. package/server/services/sqlite/tableDesigner/changeAnalysis.js +295 -0
  42. package/server/services/sqlite/tableDesigner/schemaMapping.js +233 -0
  43. package/server/services/sqlite/tableDesigner/sql.js +63 -0
  44. package/server/services/sqlite/tableDesigner/validation.js +245 -0
  45. package/server/services/sqlite/tableDesignerService.js +181 -0
  46. package/server/services/storage/appStateStore.js +400 -1
  47. package/server/services/storage/queryHistoryChartUtils.js +145 -0
  48. package/frontend/assets/mockups/data_edit.png +0 -0
  49. package/frontend/assets/mockups/graph_visualize.png +0 -0
  50. package/frontend/assets/mockups/overview.png +0 -0
package/frontend/styles/components.css CHANGED
@@ -1,429 +1,968 @@
1
1
  .top-nav-shell {
2
- align-items: center;
3
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
4
- display: flex;
5
- height: 100%;
6
- justify-content: space-between;
7
- padding: 0 var(--spacing-6);
2
+ align-items: center;
3
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
4
+ display: flex;
5
+ height: 100%;
6
+ justify-content: space-between;
7
+ padding: 0 var(--spacing-6);
8
8
  }
9
9
 
10
10
  .top-nav-brand {
11
- color: var(--color-primary-container);
12
- font-family: var(--font-family-headline);
13
- font-size: 1.25rem;
14
- font-weight: 900;
15
- letter-spacing: 0.2em;
16
- text-transform: uppercase;
11
+ color: var(--color-primary-container);
12
+ font-family: var(--font-family-headline);
13
+ font-size: 1.25rem;
14
+ font-weight: 900;
15
+ letter-spacing: 0.2em;
16
+ text-transform: uppercase;
17
17
  }
18
18
 
19
19
  .top-nav-links {
20
- align-items: center;
21
- display: none;
22
- gap: var(--spacing-4);
23
- height: 100%;
20
+ align-items: center;
21
+ display: none;
22
+ gap: var(--spacing-4);
23
+ height: 100%;
24
24
  }
25
25
 
26
26
  .top-nav-link {
27
- align-items: center;
28
- color: rgba(229, 226, 225, 0.6);
29
- display: flex;
30
- font-family: var(--font-family-headline);
31
- height: 100%;
32
- letter-spacing: -0.04em;
33
- padding: 0 var(--spacing-2);
34
- text-transform: uppercase;
35
- transition: background-color var(--transition-fast), color var(--transition-fast);
27
+ align-items: center;
28
+ color: rgba(229, 226, 225, 0.6);
29
+ display: flex;
30
+ font-family: var(--font-family-headline);
31
+ height: 100%;
32
+ letter-spacing: -0.04em;
33
+ padding: 0 var(--spacing-2);
34
+ text-transform: uppercase;
35
+ transition:
36
+ background-color var(--transition-fast),
37
+ color var(--transition-fast);
36
38
  }
37
39
 
38
40
  .top-nav-link:hover {
39
- background: var(--color-surface-highest);
41
+ background: var(--color-surface-highest);
40
42
  }
41
43
 
42
44
  .top-nav-link.is-active {
43
- border-bottom: 2px solid var(--color-primary-container);
44
- color: var(--color-primary-container);
45
- padding-bottom: 1px;
45
+ border-bottom: 2px solid var(--color-primary-container);
46
+ color: var(--color-primary-container);
47
+ padding-bottom: 1px;
46
48
  }
47
49
 
48
50
  .top-nav-actions {
49
- align-items: center;
50
- display: flex;
51
- gap: var(--spacing-2);
51
+ align-items: center;
52
+ display: flex;
53
+ gap: var(--spacing-2);
52
54
  }
53
55
 
54
56
  .top-nav-icon {
55
- align-items: center;
56
- color: var(--color-primary-container);
57
- display: inline-flex;
58
- height: 2rem;
59
- justify-content: center;
60
- transition: background-color var(--transition-fast);
61
- width: 2rem;
57
+ align-items: center;
58
+ color: var(--color-primary-container);
59
+ display: inline-flex;
60
+ height: 2rem;
61
+ justify-content: center;
62
+ transition: background-color var(--transition-fast);
63
+ width: 2rem;
62
64
  }
63
65
 
64
66
  .top-nav-icon:hover {
65
- background: var(--color-surface-highest);
67
+ background: var(--color-surface-highest);
66
68
  }
67
69
 
68
70
  .sidebar-shell {
69
- background: var(--color-surface-low);
70
- box-shadow: var(--shadow-sidebar);
71
- flex-direction: column;
72
- min-height: 0;
73
- padding: var(--spacing-4) 0;
71
+ background: var(--color-surface-low);
72
+ box-shadow: var(--shadow-sidebar);
73
+ flex-direction: column;
74
+ min-height: 0;
75
+ padding: var(--spacing-4) 0;
74
76
  }
75
77
 
76
78
  .sidebar-links {
77
- display: flex;
78
- flex: 1;
79
- flex-direction: column;
80
- gap: var(--spacing-1);
81
- min-height: 0;
79
+ display: flex;
80
+ flex: 1;
81
+ flex-direction: column;
82
+ gap: var(--spacing-1);
83
+ min-height: 0;
82
84
  }
83
85
 
84
86
  .sidebar-link {
85
- align-items: center;
86
- color: rgba(229, 226, 225, 0.4);
87
- display: flex;
88
- font-family: var(--font-family-headline);
89
- font-size: 0.75rem;
90
- font-weight: 700;
91
- gap: var(--spacing-4);
92
- letter-spacing: 0.15em;
93
- padding: 0.75rem var(--spacing-6);
94
- text-transform: uppercase;
95
- transition: background-color var(--transition-fast), color var(--transition-fast),
96
- border-color var(--transition-fast);
87
+ align-items: center;
88
+ color: rgba(229, 226, 225, 0.4);
89
+ display: flex;
90
+ font-family: var(--font-family-headline);
91
+ font-size: 0.75rem;
92
+ font-weight: 700;
93
+ gap: var(--spacing-4);
94
+ letter-spacing: 0.15em;
95
+ padding: 0.75rem var(--spacing-6);
96
+ text-transform: uppercase;
97
+ transition:
98
+ background-color var(--transition-fast),
99
+ color var(--transition-fast),
100
+ border-color var(--transition-fast);
97
101
  }
98
102
 
99
103
  .sidebar-link:hover {
100
- background: var(--color-surface-container);
101
- color: var(--color-primary-container);
104
+ background: var(--color-surface-container);
105
+ color: var(--color-primary-container);
102
106
  }
103
107
 
104
108
  .sidebar-link.is-active {
105
- background: var(--color-surface-high);
106
- border-left: 2px solid var(--color-primary-container);
107
- color: var(--color-primary-container);
109
+ background: var(--color-surface-high);
110
+ border-left: 2px solid var(--color-primary-container);
111
+ color: var(--color-primary-container);
108
112
  }
109
113
 
110
114
  .sidebar-footer {
111
- margin-top: auto;
112
- padding: 0 var(--spacing-6);
115
+ margin-top: auto;
116
+ padding: 0 var(--spacing-6);
113
117
  }
114
118
 
115
119
  .sidebar-footer-card {
116
- align-items: center;
117
- background: var(--color-surface-lowest);
118
- display: flex;
119
- gap: var(--spacing-3);
120
- padding: var(--spacing-2);
120
+ align-items: center;
121
+ background: var(--color-surface-lowest);
122
+ display: flex;
123
+ gap: var(--spacing-3);
124
+ padding: var(--spacing-2);
121
125
  }
122
126
 
123
127
  .sidebar-footer-mark {
124
- align-items: center;
125
- background: var(--color-primary-container);
126
- color: var(--color-on-primary);
127
- display: flex;
128
- font-size: 0.75rem;
129
- font-weight: 900;
130
- height: 2rem;
131
- justify-content: center;
132
- width: 2rem;
128
+ align-items: center;
129
+ background: var(--color-primary-container);
130
+ color: var(--color-on-primary);
131
+ display: flex;
132
+ font-size: 0.75rem;
133
+ font-weight: 900;
134
+ height: 2rem;
135
+ justify-content: center;
136
+ width: 2rem;
133
137
  }
134
138
 
135
139
  .status-bar-shell {
136
- align-items: center;
137
- background: var(--color-surface-lowest);
138
- border-top: 1px solid rgba(75, 71, 50, 0.15);
139
- display: flex;
140
- height: 100%;
141
- justify-content: space-between;
142
- padding: 0 var(--spacing-4);
140
+ align-items: center;
141
+ background: var(--color-surface-lowest);
142
+ border-top: 1px solid rgba(75, 71, 50, 0.15);
143
+ display: flex;
144
+ height: 100%;
145
+ justify-content: space-between;
146
+ padding: 0 var(--spacing-4);
143
147
  }
144
148
 
145
149
  .status-bar-primary,
146
150
  .status-bar-secondary {
147
- align-items: center;
148
- display: flex;
149
- gap: var(--spacing-4);
151
+ align-items: center;
152
+ display: flex;
153
+ gap: var(--spacing-4);
150
154
  }
151
155
 
152
156
  .status-bar-text {
153
- color: var(--color-primary-container);
154
- font-family: var(--font-family-mono);
155
- font-size: var(--font-size-status);
156
- letter-spacing: -0.02em;
157
+ color: var(--color-primary-container);
158
+ font-family: var(--font-family-mono);
159
+ font-size: var(--font-size-status);
160
+ letter-spacing: -0.02em;
157
161
  }
158
162
 
159
163
  .status-bar-link {
160
- color: rgba(229, 226, 225, 0.3);
161
- cursor: default;
162
- font-family: var(--font-family-mono);
163
- font-size: var(--font-size-status);
164
- letter-spacing: -0.02em;
165
- text-transform: uppercase;
166
- transition: color var(--transition-fast);
164
+ color: rgba(229, 226, 225, 0.3);
165
+ cursor: default;
166
+ font-family: var(--font-family-mono);
167
+ font-size: var(--font-size-status);
168
+ letter-spacing: -0.02em;
169
+ text-transform: uppercase;
170
+ transition: color var(--transition-fast);
167
171
  }
168
172
 
169
173
  .status-bar-link:hover {
170
- color: var(--color-primary-container);
174
+ color: var(--color-primary-container);
171
175
  }
172
176
 
173
177
  .status-bar-dot {
174
- background: var(--color-success);
175
- border-radius: 9999px;
176
- box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
177
- height: 6px;
178
- width: 6px;
178
+ background: var(--color-success);
179
+ border-radius: 9999px;
180
+ box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
181
+ height: 6px;
182
+ width: 6px;
179
183
  }
180
184
 
181
185
  .shell-section {
182
- background: var(--color-surface-container);
183
- border: 1px solid rgba(75, 71, 50, 0.12);
186
+ background: var(--color-surface-container);
187
+ border: 1px solid rgba(75, 71, 50, 0.12);
184
188
  }
185
189
 
186
190
  .toolbar-button {
187
- align-items: center;
188
- display: inline-flex;
189
- gap: var(--spacing-2);
190
- justify-content: center;
191
- text-transform: uppercase;
192
- transition: background-color var(--transition-fast), box-shadow var(--transition-standard),
193
- color var(--transition-fast);
191
+ align-items: center;
192
+ display: inline-flex;
193
+ gap: var(--spacing-2);
194
+ justify-content: center;
195
+ text-transform: uppercase;
196
+ transition:
197
+ background-color var(--transition-fast),
198
+ box-shadow var(--transition-standard),
199
+ color var(--transition-fast);
194
200
  }
195
201
 
196
202
  .toolbar-button--primary:hover {
197
- box-shadow: var(--shadow-subtle-glow);
203
+ box-shadow: var(--shadow-subtle-glow);
198
204
  }
199
205
 
200
206
  .metric-card {
201
- background: var(--color-surface-low);
202
- display: flex;
203
- flex-direction: column;
204
- gap: var(--spacing-2);
205
- padding: var(--spacing-6);
207
+ background: var(--color-surface-low);
208
+ display: flex;
209
+ flex-direction: column;
210
+ gap: var(--spacing-2);
211
+ padding: var(--spacing-6);
206
212
  }
207
213
 
208
214
  .metric-card--accent {
209
- border-left: 2px solid var(--color-primary-container);
215
+ border-left: 2px solid var(--color-primary-container);
210
216
  }
211
217
 
212
218
  .status-badge {
213
- border: 1px solid transparent;
214
- display: inline-flex;
215
- font-size: var(--font-size-micro);
216
- font-weight: 700;
217
- letter-spacing: 0.12em;
218
- padding: 0.125rem 0.5rem;
219
- text-transform: uppercase;
219
+ border: 1px solid transparent;
220
+ display: inline-flex;
221
+ font-size: var(--font-size-micro);
222
+ font-weight: 700;
223
+ letter-spacing: 0.12em;
224
+ padding: 0.125rem 0.5rem;
225
+ text-transform: uppercase;
220
226
  }
221
227
 
222
228
  .status-badge--primary {
223
- background: rgba(252, 227, 0, 0.1);
224
- border-color: rgba(252, 227, 0, 0.2);
225
- color: var(--color-primary-container);
229
+ background: rgba(252, 227, 0, 0.1);
230
+ border-color: rgba(252, 227, 0, 0.2);
231
+ color: var(--color-primary-container);
226
232
  }
227
233
 
228
234
  .status-badge--muted {
229
- background: var(--color-surface-highest);
230
- border-color: rgba(75, 71, 50, 0.2);
231
- color: var(--color-on-surface-variant);
235
+ background: var(--color-surface-highest);
236
+ border-color: rgba(75, 71, 50, 0.2);
237
+ color: var(--color-on-surface-variant);
232
238
  }
233
239
 
234
240
  .status-badge--alert {
235
- background: rgba(147, 0, 10, 0.2);
236
- border-color: rgba(255, 180, 171, 0.2);
237
- color: var(--color-error);
241
+ background: rgba(147, 0, 10, 0.2);
242
+ border-color: rgba(255, 180, 171, 0.2);
243
+ color: var(--color-error);
238
244
  }
239
245
 
240
246
  .status-badge--success {
241
- background: rgba(0, 220, 225, 0.1);
242
- color: var(--color-tertiary-dim);
247
+ background: rgba(0, 220, 225, 0.1);
248
+ color: var(--color-tertiary-dim);
243
249
  }
244
250
 
245
251
  .connection-card {
246
- background: var(--color-surface-container);
247
- border-left: 2px solid transparent;
248
- cursor: pointer;
249
- display: flex;
250
- flex-direction: column;
251
- min-height: 100%;
252
- text-align: left;
253
- transition: background-color var(--transition-fast), border-color var(--transition-fast),
254
- box-shadow var(--transition-standard);
252
+ background: var(--color-surface-container);
253
+ border-left: 2px solid transparent;
254
+ cursor: pointer;
255
+ display: flex;
256
+ flex-direction: column;
257
+ min-height: 100%;
258
+ text-align: left;
259
+ transition:
260
+ background-color var(--transition-fast),
261
+ border-color var(--transition-fast),
262
+ box-shadow var(--transition-standard);
255
263
  }
256
264
 
257
265
  .connection-card:hover {
258
- background: var(--color-surface-high);
259
- border-color: var(--color-outline-variant);
266
+ background: var(--color-surface-high);
267
+ border-color: var(--color-outline-variant);
260
268
  }
261
269
 
262
270
  .connection-card.is-active {
263
- border-color: var(--color-primary-container);
264
- box-shadow: 0 0 20px rgba(252, 227, 0, 0.05);
271
+ border-color: var(--color-primary-container);
272
+ box-shadow: 0 0 20px rgba(252, 227, 0, 0.05);
265
273
  }
266
274
 
267
275
  .connection-card-footer {
268
- background: var(--color-surface-highest);
269
- height: 4px;
270
- width: 100%;
276
+ background: var(--color-surface-highest);
277
+ height: 4px;
278
+ width: 100%;
271
279
  }
272
280
 
273
281
  .bottom-tab {
274
- border-bottom: 1px solid transparent;
275
- color: rgba(205, 199, 171, 0.4);
276
- font-size: var(--font-size-status);
277
- font-weight: 700;
278
- height: 100%;
279
- letter-spacing: 0.15em;
280
- text-transform: uppercase;
282
+ border-bottom: 1px solid transparent;
283
+ color: rgba(205, 199, 171, 0.4);
284
+ font-size: var(--font-size-status);
285
+ font-weight: 700;
286
+ height: 100%;
287
+ letter-spacing: 0.15em;
288
+ text-transform: uppercase;
281
289
  }
282
290
 
283
291
  .bottom-tab.is-active {
284
- border-color: var(--color-primary-container);
285
- color: var(--color-primary-container);
292
+ border-color: var(--color-primary-container);
293
+ color: var(--color-primary-container);
286
294
  }
287
295
 
288
296
  .page-eyebrow {
289
- align-items: center;
290
- display: flex;
291
- gap: var(--spacing-2);
292
- margin-bottom: var(--spacing-2);
297
+ align-items: center;
298
+ display: flex;
299
+ gap: var(--spacing-2);
300
+ margin-bottom: var(--spacing-2);
293
301
  }
294
302
 
295
303
  .page-eyebrow-line {
296
- background: rgba(252, 227, 0, 0.3);
297
- height: 1px;
298
- width: 48px;
304
+ background: rgba(252, 227, 0, 0.3);
305
+ height: 1px;
306
+ width: 48px;
299
307
  }
300
308
 
301
309
  .empty-state-shell {
302
- max-width: 42rem;
303
- width: 100%;
310
+ max-width: 42rem;
311
+ width: 100%;
304
312
  }
305
313
 
306
314
  .view-card {
307
- background: var(--color-surface-low);
308
- border: 1px solid rgba(75, 71, 50, 0.1);
315
+ background: var(--color-surface-low);
316
+ border: 1px solid rgba(75, 71, 50, 0.1);
309
317
  }
310
318
 
311
319
  .view-card-header {
312
- align-items: center;
313
- background: var(--color-surface-highest);
314
- display: flex;
315
- justify-content: space-between;
316
- padding: var(--spacing-3) var(--spacing-4);
320
+ align-items: center;
321
+ background: var(--color-surface-highest);
322
+ display: flex;
323
+ justify-content: space-between;
324
+ padding: var(--spacing-3) var(--spacing-4);
317
325
  }
318
326
 
319
327
  .query-history-panel {
320
- display: flex;
321
- flex: 0 0 360px;
322
- flex-direction: column;
323
- min-height: 0;
324
- width: 360px;
328
+ display: flex;
329
+ flex: 0 0 360px;
330
+ flex-direction: column;
331
+ min-height: 0;
332
+ width: 360px;
333
+ }
334
+
335
+ .table-designer-sidebar {
336
+ background: var(--color-surface-low);
337
+ border-right: 1px solid rgba(75, 71, 50, 0.18);
338
+ display: flex;
339
+ flex: 0 0 18rem;
340
+ flex-direction: column;
341
+ max-width: 18rem;
342
+ min-height: 0;
343
+ min-width: 18rem;
344
+ width: 18rem;
345
+ }
346
+
347
+ .table-designer-sidebar__header {
348
+ border-bottom: 1px solid rgba(75, 71, 50, 0.18);
349
+ display: flex;
350
+ flex-wrap: wrap;
351
+ gap: var(--spacing-4);
352
+ justify-content: space-between;
353
+ padding: var(--spacing-5);
354
+ }
355
+
356
+ .table-designer-sidebar__header-actions {
357
+ align-items: center;
358
+ display: flex;
359
+ flex-direction: row;
360
+ gap: var(--spacing-2);
361
+ flex-wrap: wrap;
362
+ }
363
+
364
+ .table-designer-sidebar__eyebrow,
365
+ .table-designer-preview__eyebrow,
366
+ .table-designer-main__eyebrow {
367
+ color: var(--color-primary-container);
368
+ font-family: var(--font-family-mono);
369
+ font-size: var(--font-size-status);
370
+ letter-spacing: 0.18em;
371
+ text-transform: uppercase;
372
+ }
373
+
374
+ .table-designer-preview__title,
375
+ .table-designer-main__section-title {
376
+ color: var(--color-on-surface);
377
+ font-family: var(--font-family-headline);
378
+ font-size: 1rem;
379
+ font-weight: 700;
380
+ letter-spacing: -0.04em;
381
+ margin-top: var(--spacing-2);
382
+ }
383
+
384
+ .table-designer-sidebar__meta,
385
+ .table-designer-main__subtitle,
386
+ .table-designer-main__section-text {
387
+ color: rgba(229, 226, 225, 0.52);
388
+ font-family: var(--font-family-mono);
389
+ font-size: var(--font-size-status);
390
+ letter-spacing: 0.14em;
391
+ margin-top: var(--spacing-2);
392
+ text-transform: uppercase;
393
+ }
394
+
395
+ .table-designer-sidebar__new-button,
396
+ .table-designer-sidebar__import-button,
397
+ .table-designer-preview__copy,
398
+ .table-designer-main__secondary,
399
+ .table-designer-main__primary {
400
+ align-items: center;
401
+ border: 1px solid rgba(75, 71, 50, 0.2);
402
+ display: inline-flex;
403
+ font-family: var(--font-family-headline);
404
+ font-size: 0.75rem;
405
+ font-weight: 700;
406
+ justify-content: center;
407
+ letter-spacing: 0.12em;
408
+ min-height: 42px;
409
+ padding: 0 1rem;
410
+ text-transform: uppercase;
411
+ transition:
412
+ background-color var(--transition-fast),
413
+ border-color var(--transition-fast),
414
+ color var(--transition-fast),
415
+ opacity var(--transition-fast);
416
+ }
417
+
418
+ .table-designer-sidebar__new-button,
419
+ .table-designer-main__primary {
420
+ background: var(--color-primary-container);
421
+ border-color: rgba(252, 227, 0, 0.35);
422
+ color: var(--color-on-primary);
423
+ }
424
+
425
+ .table-designer-preview__copy,
426
+ .table-designer-sidebar__import-button,
427
+ .table-designer-main__secondary {
428
+ background: var(--color-surface-container-lowest);
429
+ color: var(--color-on-surface);
430
+ }
431
+
432
+ .table-designer-sidebar__new-button:hover,
433
+ .table-designer-main__primary:hover {
434
+ filter: brightness(1.04);
435
+ }
436
+
437
+ .table-designer-preview__copy:hover,
438
+ .table-designer-sidebar__import-button:hover,
439
+ .table-designer-main__secondary:hover {
440
+ background: var(--color-surface-highest);
441
+ border-color: rgba(252, 227, 0, 0.24);
442
+ color: var(--color-primary-container);
443
+ }
444
+
445
+ .table-designer-sidebar__file-input {
446
+ display: none;
447
+ }
448
+
449
+ .table-designer-main__primary.is-disabled,
450
+ .table-designer-main__primary:disabled {
451
+ cursor: not-allowed;
452
+ opacity: 0.45;
453
+ }
454
+
455
+ .table-designer-sidebar__search {
456
+ align-items: center;
457
+ background: var(--color-surface-container-lowest);
458
+ border: 1px solid rgba(75, 71, 50, 0.18);
459
+ margin: var(--spacing-4) var(--spacing-3) 0;
460
+ border-bottom: 1px solid rgba(75, 71, 50, 0.18);
461
+ display: flex;
462
+ gap: var(--spacing-3);
463
+ padding: 0 var(--spacing-4);
464
+ }
465
+
466
+ .table-designer-sidebar__search-input,
467
+ .table-designer-field,
468
+ .table-designer-main__name {
469
+ background: var(--color-surface-container-lowest);
470
+ border: 1px solid rgba(75, 71, 50, 0.18);
471
+ color: var(--color-on-surface);
472
+ min-width: 0;
473
+ outline: none;
474
+ }
475
+
476
+ input.table-designer-sidebar__search-input,
477
+ input.table-designer-field,
478
+ select.table-designer-field,
479
+ input.table-designer-main__name {
480
+ -webkit-appearance: none;
481
+ appearance: none;
482
+ border-radius: 0;
483
+ box-shadow: none;
484
+ }
485
+
486
+ input.table-designer-field,
487
+ select.table-designer-field {
488
+ background: var(--color-surface-container-lowest) !important;
489
+ color: var(--color-on-surface) !important;
490
+ }
491
+
492
+ .table-designer-sidebar__search-input:focus,
493
+ .table-designer-field:focus,
494
+ .table-designer-main__name:focus {
495
+ border-color: rgba(252, 227, 0, 0.35);
496
+ }
497
+
498
+ .table-designer-sidebar__search-input {
499
+ background: transparent !important;
500
+ border: none;
501
+ color: var(--color-on-surface);
502
+ flex: 1;
503
+ font-size: 0.875rem;
504
+ height: 48px;
505
+ padding: 0;
506
+ }
507
+
508
+ .table-designer-sidebar__list {
509
+ flex: 1;
510
+ min-height: 0;
511
+ overflow: auto;
512
+ padding: var(--spacing-3);
513
+ }
514
+
515
+ .table-designer-sidebar__item {
516
+ display: block;
517
+ margin-bottom: var(--spacing-2);
518
+ transition:
519
+ background-color var(--transition-fast),
520
+ border-color var(--transition-fast);
521
+ }
522
+
523
+ .table-designer-sidebar__item:hover {
524
+ border-color: rgba(75, 71, 50, 0.1);
525
+ }
526
+
527
+ .table-designer-sidebar__item.is-active {
528
+ border-color: rgba(252, 227, 0, 0.3);
529
+ }
530
+
531
+ .table-designer-sidebar__item-name {
532
+ color: var(--color-on-surface);
533
+ font-family: var(--font-family-mono);
534
+ font-size: 0.75rem;
535
+ overflow: hidden;
536
+ white-space: nowrap;
537
+ text-overflow: ellipsis;
538
+ }
539
+
540
+ .table-designer-sidebar__item-name.is-active {
541
+ color: var(--color-primary-container);
542
+ }
543
+
544
+ .table-designer-sidebar__item-meta {
545
+ color: rgba(229, 226, 225, 0.45);
546
+ font-family: var(--font-family-mono);
547
+ font-size: var(--font-size-status);
548
+ letter-spacing: 0.12em;
549
+ margin-top: var(--spacing-2);
550
+ text-transform: uppercase;
551
+ }
552
+
553
+ .table-designer-sidebar__empty,
554
+ .table-designer-preview__empty,
555
+ .table-designer-main__empty {
556
+ align-items: center;
557
+ color: rgba(205, 199, 171, 0.55);
558
+ display: flex;
559
+ flex-direction: column;
560
+ justify-content: center;
561
+ min-height: 180px;
562
+ padding: var(--spacing-6);
563
+ text-align: center;
564
+ }
565
+
566
+ .table-designer-main__empty {
567
+ background: var(--color-surface-low);
568
+ }
569
+
570
+ .table-designer-main__empty-title {
571
+ color: var(--color-primary-container);
572
+ font-family: var(--font-family-headline);
573
+ font-size: 1.2rem;
574
+ font-weight: 700;
575
+ letter-spacing: -0.04em;
576
+ }
577
+
578
+ .table-designer-main__empty-text {
579
+ margin-top: var(--spacing-3);
580
+ max-width: 30rem;
581
+ }
582
+
583
+ .table-designer-main,
584
+ .table-designer-preview {
585
+ display: flex;
586
+ flex-direction: column;
587
+ height: 100%;
588
+ min-height: 0;
589
+ }
590
+
591
+ .table-designer-main__header,
592
+ .table-designer-preview__header {
593
+ align-items: center;
594
+ border-bottom: 1px solid rgba(75, 71, 50, 0.16);
595
+ display: flex;
596
+ flex-wrap: wrap;
597
+ gap: var(--spacing-4);
598
+ justify-content: space-between;
599
+ padding: var(--spacing-5);
600
+ }
601
+
602
+ .table-designer-main__title-row {
603
+ align-items: center;
604
+ display: flex;
605
+ flex-wrap: wrap;
606
+ gap: var(--spacing-3);
607
+ margin-top: var(--spacing-2);
608
+ }
609
+
610
+ .table-designer-main__name {
611
+ background: transparent !important;
612
+ border: none;
613
+ color: var(--color-primary-container);
614
+ font-family: var(--font-family-headline);
615
+ font-size: 2rem;
616
+ font-weight: 900;
617
+ letter-spacing: -0.06em;
618
+ min-width: min(28rem, 100%);
619
+ padding: 0;
620
+ }
621
+
622
+ .table-designer-main__actions {
623
+ align-items: center;
624
+ display: flex;
625
+ flex-wrap: wrap;
626
+ gap: var(--spacing-3);
627
+ }
628
+
629
+ .table-designer-fill-toggle {
630
+ align-items: center;
631
+ border: 1px solid rgba(75, 71, 50, 0.18);
632
+ color: var(--color-on-surface);
633
+ display: inline-flex;
634
+ gap: 0.75rem;
635
+ min-height: 42px;
636
+ padding: 0 0.875rem;
637
+ }
638
+
639
+ .table-designer-fill-toggle input {
640
+ accent-color: var(--color-primary-container);
641
+ }
642
+
643
+ .table-designer-fill-toggle.is-disabled {
644
+ color: rgba(229, 226, 225, 0.45);
645
+ }
646
+
647
+ .table-designer-fill-toggle__meta {
648
+ color: rgba(205, 199, 171, 0.52);
649
+ font-family: var(--font-family-mono);
650
+ font-size: var(--font-size-status);
651
+ letter-spacing: 0.1em;
652
+ text-transform: uppercase;
653
+ }
654
+
655
+ .table-designer-main__error,
656
+ .table-designer-route-error {
657
+ background: rgba(147, 0, 10, 0.16);
658
+ border: 1px solid rgba(255, 180, 171, 0.16);
659
+ color: var(--color-on-surface);
660
+ margin: var(--spacing-4);
661
+ padding: var(--spacing-4);
662
+ }
663
+
664
+ .table-designer-route-error {
665
+ margin: 0;
666
+ }
667
+
668
+ .table-designer-main__error-code,
669
+ .table-designer-route-error__code {
670
+ color: var(--color-error);
671
+ font-family: var(--font-family-mono);
672
+ font-size: var(--font-size-status);
673
+ letter-spacing: 0.16em;
674
+ text-transform: uppercase;
675
+ }
676
+
677
+ .table-designer-main__error-text,
678
+ .table-designer-route-error__text {
679
+ margin-top: var(--spacing-2);
680
+ }
681
+
682
+ .table-designer-banner {
683
+ border: 1px solid rgba(75, 71, 50, 0.16);
684
+ margin: 0 var(--spacing-4) var(--spacing-4);
685
+ padding: var(--spacing-4);
686
+ }
687
+
688
+ .table-designer-banner.is-warning {
689
+ background: rgba(252, 227, 0, 0.06);
690
+ }
691
+
692
+ .table-designer-banner.is-validation {
693
+ background: rgba(147, 0, 10, 0.12);
694
+ }
695
+
696
+ .table-designer-banner__header {
697
+ align-items: center;
698
+ display: flex;
699
+ gap: var(--spacing-3);
700
+ justify-content: space-between;
701
+ }
702
+
703
+ .table-designer-banner__title {
704
+ color: var(--color-on-surface);
705
+ font-family: var(--font-family-headline);
706
+ font-size: 0.95rem;
707
+ font-weight: 700;
708
+ }
709
+
710
+ .table-designer-banner__list {
711
+ display: flex;
712
+ flex-direction: column;
713
+ gap: var(--spacing-3);
714
+ margin-top: var(--spacing-3);
715
+ }
716
+
717
+ .table-designer-banner__item-title {
718
+ color: var(--color-on-surface);
719
+ font-size: 0.875rem;
720
+ font-weight: 600;
721
+ }
722
+
723
+ .table-designer-banner__item-text {
724
+ color: rgba(229, 226, 225, 0.68);
725
+ font-size: 0.8125rem;
726
+ margin-top: var(--spacing-1);
727
+ }
728
+
729
+ .table-designer-main__section {
730
+ display: flex;
731
+ flex: 1;
732
+ flex-direction: column;
733
+ min-height: 0;
734
+ padding: 0 var(--spacing-4) var(--spacing-4);
735
+ }
736
+
737
+ .table-designer-main__section-header {
738
+ align-items: flex-start;
739
+ display: flex;
740
+ flex-wrap: wrap;
741
+ gap: var(--spacing-4);
742
+ justify-content: space-between;
743
+ padding: var(--spacing-2) 0 var(--spacing-4);
744
+ }
745
+
746
+ .table-designer-grid {
747
+ background: var(--color-surface-container-lowest);
748
+ border: 1px solid rgba(75, 71, 50, 0.14);
749
+ flex: 1;
750
+ min-height: 0;
751
+ overflow: auto;
752
+ }
753
+
754
+ .table-designer-grid__header,
755
+ .table-designer-grid__row {
756
+ display: grid;
757
+ gap: var(--spacing-2);
758
+ grid-template-columns:
759
+ minmax(12rem, 1.5fr)
760
+ minmax(8rem, 0.9fr)
761
+ minmax(5.5rem, 0.7fr)
762
+ minmax(5.5rem, 0.7fr)
763
+ minmax(6rem, 0.7fr)
764
+ minmax(10rem, 1fr)
765
+ minmax(10rem, 1fr)
766
+ minmax(10rem, 1fr)
767
+ 44px;
768
+ min-width: 76rem;
769
+ padding: var(--spacing-3);
770
+ }
771
+
772
+ .table-designer-grid__header {
773
+ border-bottom: 1px solid rgba(75, 71, 50, 0.16);
774
+ color: rgba(205, 199, 171, 0.52);
775
+ font-family: var(--font-family-mono);
776
+ font-size: var(--font-size-status);
777
+ letter-spacing: 0.12em;
778
+ position: sticky;
779
+ text-transform: uppercase;
780
+ top: 0;
781
+ background: var(--color-surface-low);
782
+ z-index: 2;
783
+ }
784
+
785
+ .table-designer-grid__row {
786
+ border-bottom: 1px solid rgba(75, 71, 50, 0.1);
787
+ align-items: center;
788
+ }
789
+
790
+ .table-designer-field {
791
+ min-height: 42px;
792
+ padding: 0 0.75rem;
793
+ }
794
+
795
+ .table-designer-check {
796
+ align-items: center;
797
+ color: rgba(229, 226, 225, 0.75);
798
+ display: inline-flex;
799
+ font-size: 0.75rem;
800
+ gap: 0.5rem;
801
+ min-height: 42px;
802
+ }
803
+
804
+ .table-designer-check input {
805
+ accent-color: var(--color-primary-container);
806
+ }
807
+
808
+ .table-designer-delete {
809
+ align-items: center;
810
+ background: transparent;
811
+ border: 1px solid rgba(75, 71, 50, 0.18);
812
+ color: rgba(229, 226, 225, 0.65);
813
+ display: inline-flex;
814
+ height: 42px;
815
+ justify-content: center;
816
+ transition:
817
+ border-color var(--transition-fast),
818
+ color var(--transition-fast),
819
+ background-color var(--transition-fast);
820
+ width: 42px;
821
+ }
822
+
823
+ .table-designer-delete:hover {
824
+ background: rgba(147, 0, 10, 0.18);
825
+ border-color: rgba(255, 180, 171, 0.2);
826
+ color: var(--color-error);
827
+ }
828
+
829
+ .table-designer-preview__body {
830
+ color: var(--color-on-surface);
831
+ flex: 1;
832
+ font-family: var(--font-family-mono);
833
+ font-size: 0.8125rem;
834
+ line-height: 1.7;
835
+ margin: 0;
836
+ min-height: 0;
837
+ overflow: auto;
838
+ padding: var(--spacing-5);
839
+ white-space: pre-wrap;
840
+ }
841
+
842
+ @media (max-width: 1023px) {
843
+ .table-designer-sidebar {
844
+ border-bottom: 1px solid rgba(75, 71, 50, 0.18);
845
+ border-right: none;
846
+ flex-basis: auto;
847
+ }
325
848
  }
326
849
 
327
850
  .query-history-item {
328
- align-items: stretch;
329
- background: var(--color-surface-low);
330
- border: 1px solid rgba(75, 71, 50, 0.16);
331
- border-left: 2px solid transparent;
332
- display: flex;
333
- flex-direction: column;
334
- min-width: 0;
335
- transition: background-color var(--transition-fast), border-color var(--transition-fast),
336
- box-shadow var(--transition-fast);
851
+ align-items: stretch;
852
+ background: var(--color-surface-low);
853
+ border: 1px solid rgba(75, 71, 50, 0.16);
854
+ border-left: 2px solid transparent;
855
+ display: flex;
856
+ flex-direction: column;
857
+ min-width: 0;
858
+ transition:
859
+ background-color var(--transition-fast),
860
+ border-color var(--transition-fast),
861
+ box-shadow var(--transition-fast);
337
862
  }
338
863
 
339
864
  .query-history-item:hover {
340
- background: var(--color-surface-high);
341
- border-color: rgba(252, 227, 0, 0.18);
865
+ background: var(--color-surface-high);
866
+ border-color: rgba(252, 227, 0, 0.18);
342
867
  }
343
868
 
344
869
  .query-history-item.is-active {
345
- border-left-color: var(--color-primary-container);
346
- box-shadow: 0 0 24px rgba(252, 227, 0, 0.06);
870
+ border-left-color: var(--color-primary-container);
871
+ box-shadow: 0 0 24px rgba(252, 227, 0, 0.06);
347
872
  }
348
873
 
349
874
  .query-history-item.is-error {
350
- border-left-color: var(--color-error);
875
+ border-left-color: var(--color-error);
351
876
  }
352
877
 
353
878
  .query-history-item-hit {
354
- background: transparent;
355
- border: 0;
356
- color: inherit;
357
- display: block;
358
- min-width: 0;
359
- padding: var(--spacing-3);
360
- text-align: left;
361
- transition: background-color var(--transition-fast);
879
+ background: transparent;
880
+ border: 0;
881
+ color: inherit;
882
+ display: block;
883
+ min-width: 0;
884
+ padding: var(--spacing-3);
885
+ text-align: left;
886
+ transition: background-color var(--transition-fast);
362
887
  }
363
888
 
364
889
  .query-history-item-hit.is-active {
365
- background: rgba(252, 227, 0, 0.08);
890
+ background: rgba(252, 227, 0, 0.08);
366
891
  }
367
892
 
368
893
  .query-history-icon-button {
369
- align-items: center;
370
- background: transparent;
371
- border: 0;
372
- color: rgba(229, 226, 225, 0.6);
373
- display: inline-flex;
374
- height: 2rem;
375
- justify-content: center;
376
- transition: color var(--transition-fast), background-color var(--transition-fast);
377
- width: 2rem;
894
+ align-items: center;
895
+ background: transparent;
896
+ border: 0;
897
+ color: rgba(229, 226, 225, 0.6);
898
+ display: inline-flex;
899
+ height: 2rem;
900
+ justify-content: center;
901
+ transition:
902
+ color var(--transition-fast),
903
+ background-color var(--transition-fast);
904
+ width: 2rem;
378
905
  }
379
906
 
380
907
  .query-history-icon-button:hover,
381
908
  .query-history-icon-button.is-active {
382
- background: var(--color-surface-highest);
383
- color: var(--color-primary-container);
909
+ background: var(--color-surface-highest);
910
+ color: var(--color-primary-container);
384
911
  }
385
912
 
386
913
  .query-history-tab {
387
- background: transparent;
388
- border: 0;
389
- border-bottom: 1px solid transparent;
390
- color: rgba(205, 199, 171, 0.45);
391
- font-family: var(--font-family-mono);
392
- font-size: var(--font-size-status);
393
- letter-spacing: 0.16em;
394
- padding: 0.35rem 0;
395
- text-transform: uppercase;
396
- transition: border-color var(--transition-fast), color var(--transition-fast);
914
+ background: transparent;
915
+ border: 0;
916
+ border-bottom: 1px solid transparent;
917
+ color: rgba(205, 199, 171, 0.45);
918
+ font-family: var(--font-family-mono);
919
+ font-size: var(--font-size-status);
920
+ letter-spacing: 0.16em;
921
+ padding: 0.35rem 0;
922
+ text-transform: uppercase;
923
+ transition:
924
+ border-color var(--transition-fast),
925
+ color var(--transition-fast);
397
926
  }
398
927
 
399
928
  .query-history-tab.is-active {
400
- border-color: var(--color-primary-container);
401
- color: var(--color-primary-container);
929
+ border-color: var(--color-primary-container);
930
+ color: var(--color-primary-container);
402
931
  }
403
932
 
404
933
  .query-history-sql-preview {
405
- display: -webkit-box;
406
- -webkit-box-orient: vertical;
407
- -webkit-line-clamp: 2;
408
- overflow: hidden;
934
+ display: -webkit-box;
935
+ -webkit-box-orient: vertical;
936
+ -webkit-line-clamp: 2;
937
+ overflow: hidden;
409
938
  }
410
939
 
411
940
  .query-history-detail-sql {
412
- max-height: 240px;
413
- white-space: pre-wrap;
941
+ max-height: 240px;
942
+ white-space: pre-wrap;
414
943
  }
415
944
 
416
945
  @media (max-width: 1279px) {
417
- .query-history-panel {
418
- border-left: 0;
419
- border-top: 1px solid rgba(75, 71, 50, 0.16);
420
- flex: 0 0 auto;
421
- width: 100%;
422
- }
946
+ .query-history-panel {
947
+ border-left: 0;
948
+ border-top: 1px solid rgba(75, 71, 50, 0.16);
949
+ flex: 0 0 auto;
950
+ width: 100%;
951
+ }
423
952
  }
424
953
 
425
954
  @media (min-width: 768px) {
426
- .top-nav-links {
427
- display: flex;
428
- }
955
+ .top-nav-links {
956
+ display: flex;
957
+ }
958
+ }
959
+
960
+ .data-headline-container {
961
+ max-width: 69%;
962
+ }
963
+
964
+ .data-headline-container h1 {
965
+ overflow: hidden;
966
+ white-space: nowrap;
967
+ text-overflow: ellipsis;
429
968
  }