hyperbook 0.91.1 → 0.92.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.
@@ -0,0 +1,371 @@
1
+ .directive-openscad {
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
5
+ flex-direction: column;
6
+ overflow: hidden;
7
+ gap: 8px;
8
+ height: var(--openscad-height, calc(100dvh - 80px));
9
+ }
10
+
11
+ /* Left side: wraps preview-container + params card */
12
+ .directive-openscad .left-side {
13
+ width: 100%;
14
+ min-height: 120px;
15
+ min-width: 120px;
16
+ flex: 1 1 0;
17
+ display: flex;
18
+ flex-direction: column;
19
+ gap: 0;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .directive-openscad .preview-container {
24
+ width: 100%;
25
+ min-height: 120px;
26
+ border: 1px solid var(--color-spacer);
27
+ border-radius: 8px;
28
+ overflow: hidden;
29
+ background-color: var(--color-background, var(--color--background, #fff));
30
+ flex: 1 1 0;
31
+ display: flex;
32
+ flex-direction: column;
33
+ }
34
+
35
+ .directive-openscad .preview-header {
36
+ border-bottom: 1px solid var(--color-spacer);
37
+ padding: 8px 16px;
38
+ font-weight: 600;
39
+ }
40
+
41
+ .directive-openscad .preview-canvas {
42
+ width: 100%;
43
+ height: 100%;
44
+ display: block;
45
+ background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
46
+ }
47
+
48
+ /* Canvas wrapper: relative container for overlay positioning */
49
+ .directive-openscad .canvas-wrapper {
50
+ position: relative;
51
+ flex: 1;
52
+ overflow: hidden;
53
+ min-height: 80px;
54
+ display: flex;
55
+ }
56
+
57
+ /* Canvas overlay: covers the canvas area */
58
+ .directive-openscad .canvas-overlay {
59
+ position: absolute;
60
+ inset: 0;
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: center;
64
+ justify-content: center;
65
+ gap: 12px;
66
+ padding: 16px;
67
+ box-sizing: border-box;
68
+ pointer-events: none;
69
+ }
70
+
71
+ .directive-openscad .canvas-overlay.hidden {
72
+ display: none;
73
+ }
74
+
75
+ /* Loading state */
76
+ .directive-openscad .canvas-overlay.loading {
77
+ background: rgba(0, 0, 0, 0.45);
78
+ color: #fff;
79
+ }
80
+
81
+ /* Error state */
82
+ .directive-openscad .canvas-overlay.error {
83
+ background: rgba(239, 68, 68, 0.12);
84
+ color: #991b1b;
85
+ align-items: flex-start;
86
+ justify-content: flex-start;
87
+ overflow-y: auto;
88
+ pointer-events: auto;
89
+ }
90
+
91
+ .directive-openscad .canvas-overlay .overlay-message {
92
+ font-weight: 600;
93
+ font-size: 0.95em;
94
+ text-align: center;
95
+ }
96
+
97
+ .directive-openscad .canvas-overlay.error .overlay-message {
98
+ white-space: pre-wrap;
99
+ word-break: break-word;
100
+ font-weight: 400;
101
+ text-align: left;
102
+ font-family: hyperbook-monospace, monospace;
103
+ font-size: 0.85em;
104
+ }
105
+
106
+ .directive-openscad .overlay-dismiss {
107
+ padding: 4px 14px;
108
+ border: 1px solid currentColor;
109
+ border-radius: 4px;
110
+ background: transparent;
111
+ color: inherit;
112
+ cursor: pointer;
113
+ font-size: 0.85em;
114
+ opacity: 0.8;
115
+ flex: 0 0 auto;
116
+ }
117
+
118
+ .directive-openscad .overlay-dismiss:hover {
119
+ opacity: 1;
120
+ background: rgba(0, 0, 0, 0.06);
121
+ }
122
+
123
+ /* Spinner */
124
+ .directive-openscad .canvas-spinner {
125
+ width: 32px;
126
+ height: 32px;
127
+ border: 3px solid rgba(255, 255, 255, 0.3);
128
+ border-top-color: #fff;
129
+ border-radius: 50%;
130
+ animation: openscad-spin 0.75s linear infinite;
131
+ }
132
+
133
+ @keyframes openscad-spin {
134
+ to { transform: rotate(360deg); }
135
+ }
136
+
137
+ /* Splitter between canvas and parameters card */
138
+ .directive-openscad .canvas-params-splitter {
139
+ width: 100%;
140
+ height: 4px;
141
+ margin: 6px 0;
142
+ cursor: row-resize;
143
+ background: var(--color-spacer);
144
+ border-radius: 999px;
145
+ flex-shrink: 0;
146
+ touch-action: none;
147
+ opacity: 0.45;
148
+ transition: opacity 0.15s ease-in-out;
149
+ }
150
+
151
+ .directive-openscad .canvas-params-splitter:hover {
152
+ opacity: 0.65;
153
+ }
154
+
155
+ /* Parameters card */
156
+ .directive-openscad .parameters-panel {
157
+ width: 100%;
158
+ min-height: 80px;
159
+ border: 1px solid var(--color-spacer);
160
+ border-radius: 8px;
161
+ overflow: hidden;
162
+ background-color: var(--color-background, var(--color--background, #fff));
163
+ flex: 1 1 0;
164
+ display: flex;
165
+ flex-direction: column;
166
+ box-sizing: border-box;
167
+ }
168
+
169
+ .directive-openscad .parameters-panel.hidden {
170
+ display: none;
171
+ }
172
+
173
+ .directive-openscad .parameters-header {
174
+ border-bottom: 1px solid var(--color-spacer);
175
+ padding: 8px 16px;
176
+ font-weight: 600;
177
+ flex-shrink: 0;
178
+ }
179
+
180
+ .directive-openscad .parameters-body {
181
+ flex: 1;
182
+ overflow-y: auto;
183
+ padding: 12px;
184
+ display: flex;
185
+ flex-direction: column;
186
+ gap: 10px;
187
+ }
188
+
189
+ .directive-openscad .editor-container {
190
+ width: 100%;
191
+ display: flex;
192
+ flex-direction: column;
193
+ min-height: 120px;
194
+ min-width: 120px;
195
+ flex: 1 1 0;
196
+ }
197
+
198
+ /* Main left/right splitter */
199
+ .directive-openscad .splitter {
200
+ background: var(--color-spacer);
201
+ border-radius: 999px;
202
+ flex-shrink: 0;
203
+ touch-action: none;
204
+ opacity: 0.45;
205
+ transition: opacity 0.15s ease-in-out;
206
+ }
207
+
208
+ .directive-openscad .splitter:hover {
209
+ opacity: 0.65;
210
+ }
211
+
212
+ .directive-openscad.split-vertical .splitter {
213
+ width: 100%;
214
+ height: 4px;
215
+ cursor: row-resize;
216
+ }
217
+
218
+ .directive-openscad.split-horizontal .splitter {
219
+ width: 4px;
220
+ height: 100%;
221
+ cursor: col-resize;
222
+ }
223
+
224
+ .directive-openscad.resizing {
225
+ user-select: none;
226
+ }
227
+
228
+ .directive-openscad .buttons {
229
+ display: flex;
230
+ border: 1px solid var(--color-spacer);
231
+ border-radius: 8px;
232
+ border-bottom: none;
233
+ border-bottom-left-radius: 0;
234
+ border-bottom-right-radius: 0;
235
+ overflow: hidden;
236
+ }
237
+
238
+ .directive-openscad .buttons.bottom {
239
+ border: 1px solid var(--color-spacer);
240
+ border-radius: 8px;
241
+ border-top: none;
242
+ border-top-left-radius: 0;
243
+ border-top-right-radius: 0;
244
+ }
245
+
246
+ .directive-openscad button {
247
+ flex: 1;
248
+ padding: 8px 16px;
249
+ border: none;
250
+ border-right: 1px solid var(--color-spacer);
251
+ background-color: var(--color-background, var(--color--background, #fff));
252
+ color: var(--color-text);
253
+ cursor: pointer;
254
+ }
255
+
256
+ .directive-openscad .buttons button:last-child {
257
+ border-right: none;
258
+ }
259
+
260
+ .directive-openscad button.fullscreen {
261
+ flex: 0 0 auto;
262
+ min-width: 42px;
263
+ width: 42px;
264
+ padding: 8px 0;
265
+ }
266
+
267
+ .directive-openscad button:hover,
268
+ .directive-openscad button.active {
269
+ background-color: var(--color-spacer);
270
+ }
271
+
272
+ .directive-openscad .editor,
273
+ .directive-openscad .parameters {
274
+ width: 100%;
275
+ border: 1px solid var(--color-spacer);
276
+ flex: 1;
277
+ margin: 0; /* override code-input.min.css default margin: 8px */
278
+ }
279
+
280
+ /* The parameters textarea is always hidden — the form replaces it visually */
281
+ .directive-openscad .parameters {
282
+ display: none !important;
283
+ }
284
+
285
+ .directive-openscad .param-row {
286
+ display: flex;
287
+ align-items: center;
288
+ gap: 10px;
289
+ }
290
+
291
+ .directive-openscad .param-row label {
292
+ flex: 1;
293
+ font-weight: 500;
294
+ min-width: 0;
295
+ word-break: break-word;
296
+ }
297
+
298
+ .directive-openscad .param-row input[type="text"],
299
+ .directive-openscad .param-row input[type="number"],
300
+ .directive-openscad .param-row select {
301
+ flex: 1;
302
+ padding: 4px 8px;
303
+ border: 1px solid var(--color-spacer);
304
+ border-radius: 4px;
305
+ background: var(--color-background, var(--color--background, #fff));
306
+ color: var(--color-text);
307
+ font-family: inherit;
308
+ }
309
+
310
+ .directive-openscad .param-vector {
311
+ flex: 1;
312
+ display: flex;
313
+ gap: 4px;
314
+ }
315
+
316
+ .directive-openscad .param-vector input[type="number"] {
317
+ flex: 1;
318
+ min-width: 0;
319
+ }
320
+
321
+ .directive-openscad .param-row input[type="checkbox"] {
322
+ width: 18px;
323
+ height: 18px;
324
+ cursor: pointer;
325
+ }
326
+
327
+ .directive-openscad .params-empty {
328
+ color: var(--color-text-muted, #888);
329
+ font-style: italic;
330
+ margin: auto;
331
+ text-align: center;
332
+ }
333
+
334
+ .directive-openscad:fullscreen {
335
+ width: 100vw;
336
+ height: 100dvh !important;
337
+ padding: 12px;
338
+ box-sizing: border-box;
339
+ background-color: var(--color-background, var(--color--background, #fff));
340
+ }
341
+
342
+ .directive-openscad:fullscreen::backdrop {
343
+ background-color: var(--color-background, var(--color--background, #fff));
344
+ }
345
+
346
+ @media screen and (min-width: 1024px) {
347
+ .directive-openscad {
348
+ flex-direction: row;
349
+ }
350
+
351
+ .directive-openscad .left-side,
352
+ .directive-openscad .editor-container {
353
+ flex: 1;
354
+ height: 100% !important;
355
+ }
356
+ }
357
+
358
+ @media (prefers-color-scheme: dark) {
359
+ .directive-openscad .preview-canvas {
360
+ background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
361
+ }
362
+
363
+ .directive-openscad .canvas-overlay.error {
364
+ background: rgba(239, 68, 68, 0.18);
365
+ color: #fca5a5;
366
+ }
367
+
368
+ .directive-openscad .overlay-dismiss:hover {
369
+ background: rgba(255, 255, 255, 0.1);
370
+ }
371
+ }