@jjlmoya/utils-diy 1.9.0 → 1.10.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 (28) hide show
  1. package/package.json +5 -3
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/tool/balusterCalculator/baluster-calculator.css +320 -0
  4. package/src/tool/balusterCalculator/component.astro +0 -322
  5. package/src/tool/clayCalculator/clay-shrinkage-calculator.css +530 -0
  6. package/src/tool/clayCalculator/component.astro +0 -532
  7. package/src/tool/concreteCalculator/component.astro +0 -705
  8. package/src/tool/concreteCalculator/concrete-mortar-calculator.css +703 -0
  9. package/src/tool/cutOptimizer/component.astro +0 -477
  10. package/src/tool/cutOptimizer/cut-optimizer.css +475 -0
  11. package/src/tool/drillCalculator/component.astro +0 -815
  12. package/src/tool/drillCalculator/drill-rpm-calculator.css +813 -0
  13. package/src/tool/drillSharpener/component.astro +0 -393
  14. package/src/tool/drillSharpener/drill-sharpening-master.css +391 -0
  15. package/src/tool/epoxyCalculator/component.astro +0 -571
  16. package/src/tool/epoxyCalculator/epoxy-resin-calculator.css +569 -0
  17. package/src/tool/furnitureFit/component.astro +0 -345
  18. package/src/tool/furnitureFit/furniture-fit-calculator.css +343 -0
  19. package/src/tool/mortarCalculator/component.astro +0 -620
  20. package/src/tool/mortarCalculator/lime-mortar-calculator.css +618 -0
  21. package/src/tool/passepartoutCalculator/component.astro +0 -518
  22. package/src/tool/passepartoutCalculator/passepartout-calculator.css +516 -0
  23. package/src/tool/stairCalculator/component.astro +0 -480
  24. package/src/tool/stairCalculator/stair-calculator.css +478 -0
  25. package/src/tool/thermalExpansionCalculator/component.astro +0 -490
  26. package/src/tool/thermalExpansionCalculator/thermal-expansion-calculator.css +488 -0
  27. package/src/tool/voltageDropCalculator/component.astro +0 -729
  28. package/src/tool/voltageDropCalculator/voltage-drop-calculator.css +727 -0
@@ -0,0 +1,475 @@
1
+ .co-root {
2
+ max-width: 1200px;
3
+ margin: 0 auto;
4
+ user-select: none;
5
+ }
6
+
7
+ .co-hidden {
8
+ display: none;
9
+ }
10
+
11
+ .co-grid {
12
+ display: grid;
13
+ grid-template-columns: 1fr 2fr;
14
+ gap: 2rem;
15
+ }
16
+
17
+ .co-sidebar {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 1.5rem;
21
+ }
22
+
23
+ .co-main {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: 1.5rem;
27
+ }
28
+
29
+ .co-card {
30
+ background: #fff;
31
+ border-radius: 0.75rem;
32
+ padding: 1.5rem;
33
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
34
+ border: 1px solid #f1f5f9;
35
+ }
36
+
37
+ :global(.theme-dark) .co-card {
38
+ background: #1e293b;
39
+ border-color: #334155;
40
+ }
41
+
42
+ .co-card-title {
43
+ font-size: 1rem;
44
+ font-weight: 700;
45
+ color: #1e293b;
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 0.5rem;
49
+ margin: 0 0 1rem;
50
+ }
51
+
52
+ :global(.theme-dark) .co-card-title {
53
+ color: #fff;
54
+ }
55
+
56
+ .co-card-title svg {
57
+ width: 1.25rem;
58
+ height: 1.25rem;
59
+ color: #94a3b8;
60
+ }
61
+
62
+ .co-card-title-row {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ margin-bottom: 1rem;
67
+ }
68
+
69
+ .co-card-title-row .co-card-title {
70
+ margin-bottom: 0;
71
+ }
72
+
73
+ .co-mode-toggle {
74
+ display: flex;
75
+ gap: 0;
76
+ background: #f1f5f9;
77
+ padding: 0.375rem;
78
+ border-radius: 0.625rem;
79
+ margin-bottom: 1.5rem;
80
+ }
81
+
82
+ :global(.theme-dark) .co-mode-toggle {
83
+ background: rgba(30, 41, 59, 0.8);
84
+ }
85
+
86
+ .co-mode-btn {
87
+ flex: 1;
88
+ padding: 0.375rem 0;
89
+ font-size: 0.8125rem;
90
+ font-weight: 700;
91
+ border-radius: 0.375rem;
92
+ border: none;
93
+ background: transparent;
94
+ color: #6b7280;
95
+ cursor: pointer;
96
+ transition: all 0.15s ease;
97
+ }
98
+
99
+ .co-mode-btn.co-mode-active {
100
+ background: #f97316;
101
+ color: #fff;
102
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
103
+ }
104
+
105
+ :global(.theme-dark) .co-mode-btn {
106
+ color: #94a3b8;
107
+ }
108
+
109
+ :global(.theme-dark) .co-mode-btn.co-mode-active {
110
+ color: #fff;
111
+ }
112
+
113
+ .co-fields {
114
+ display: flex;
115
+ flex-direction: column;
116
+ gap: 1rem;
117
+ }
118
+
119
+ .co-field {
120
+ display: flex;
121
+ flex-direction: column;
122
+ gap: 0.25rem;
123
+ }
124
+
125
+ .co-field-label {
126
+ font-size: 0.7rem;
127
+ font-weight: 600;
128
+ color: #94a3b8;
129
+ text-transform: uppercase;
130
+ letter-spacing: 0.05em;
131
+ }
132
+
133
+ .co-input {
134
+ width: 100%;
135
+ background: #f8fafc;
136
+ border: 1px solid #e2e8f0;
137
+ border-radius: 0.5rem;
138
+ padding: 0.75rem 1rem;
139
+ font-weight: 700;
140
+ color: #1e293b;
141
+ outline: none;
142
+ transition: border-color 0.15s ease;
143
+ box-sizing: border-box;
144
+ }
145
+
146
+ .co-input:focus {
147
+ border-color: #f97316;
148
+ box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
149
+ }
150
+
151
+ :global(.theme-dark) .co-input {
152
+ background: #0f172a;
153
+ border-color: #334155;
154
+ color: #fff;
155
+ }
156
+
157
+ .co-btn-add {
158
+ padding: 0.5rem;
159
+ background: #fff7ed;
160
+ color: #ea580c;
161
+ border: none;
162
+ border-radius: 0.5rem;
163
+ cursor: pointer;
164
+ transition: background 0.15s ease;
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ }
169
+
170
+ .co-btn-add:hover {
171
+ background: #fed7aa;
172
+ }
173
+
174
+ .co-btn-add svg {
175
+ width: 1.25rem;
176
+ height: 1.25rem;
177
+ }
178
+
179
+ :global(.theme-dark) .co-btn-add {
180
+ background: rgba(249, 115, 22, 0.15);
181
+ color: #fb923c;
182
+ }
183
+
184
+ .co-cut-list {
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: 0.75rem;
188
+ max-height: 400px;
189
+ overflow-y: auto;
190
+ padding-right: 0.25rem;
191
+ }
192
+
193
+ .co-cut-list::-webkit-scrollbar {
194
+ width: 4px;
195
+ }
196
+
197
+ .co-cut-list::-webkit-scrollbar-track {
198
+ background: transparent;
199
+ }
200
+
201
+ .co-cut-list::-webkit-scrollbar-thumb {
202
+ background: rgba(148, 163, 184, 0.4);
203
+ border-radius: 20px;
204
+ }
205
+
206
+ .co-row {
207
+ display: flex;
208
+ align-items: center;
209
+ gap: 0.5rem;
210
+ }
211
+
212
+ .co-row-len-wrap,
213
+ .co-row-wid-wrap {
214
+ position: relative;
215
+ flex: 1;
216
+ display: flex;
217
+ align-items: center;
218
+ }
219
+
220
+ .co-row-qty-wrap {
221
+ position: relative;
222
+ width: 5rem;
223
+ }
224
+
225
+ .co-row-input {
226
+ width: 100%;
227
+ background: #f8fafc;
228
+ border: 1px solid #e2e8f0;
229
+ border-radius: 0.5rem;
230
+ padding: 0.5rem 0.75rem;
231
+ font-size: 0.875rem;
232
+ font-weight: 600;
233
+ color: #1e293b;
234
+ outline: none;
235
+ box-sizing: border-box;
236
+ }
237
+
238
+ .co-row-input:focus {
239
+ border-color: #f97316;
240
+ box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
241
+ }
242
+
243
+ .co-row-input-blue:focus {
244
+ border-color: #3b82f6;
245
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
246
+ }
247
+
248
+ .co-row-input-qty {
249
+ text-align: center;
250
+ }
251
+
252
+ :global(.theme-dark) .co-row-input {
253
+ background: #0f172a;
254
+ border-color: #334155;
255
+ color: #fff;
256
+ }
257
+
258
+ .co-row-unit {
259
+ position: absolute;
260
+ right: 0.5rem;
261
+ font-size: 0.65rem;
262
+ font-weight: 700;
263
+ color: #94a3b8;
264
+ pointer-events: none;
265
+ }
266
+
267
+ .co-btn-rm {
268
+ padding: 0.4rem;
269
+ background: transparent;
270
+ border: none;
271
+ color: #94a3b8;
272
+ cursor: pointer;
273
+ border-radius: 0.375rem;
274
+ transition: color 0.15s ease;
275
+ flex-shrink: 0;
276
+ display: flex;
277
+ align-items: center;
278
+ }
279
+
280
+ .co-btn-rm:hover {
281
+ color: #ef4444;
282
+ }
283
+
284
+ .co-btn-rm svg {
285
+ width: 1rem;
286
+ height: 1rem;
287
+ }
288
+
289
+ .co-stats-grid {
290
+ display: grid;
291
+ grid-template-columns: repeat(4, 1fr);
292
+ gap: 1rem;
293
+ }
294
+
295
+ .co-stat-card {
296
+ background: #fff;
297
+ padding: 1rem;
298
+ border-radius: 0.75rem;
299
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
300
+ border: 1px solid #f1f5f9;
301
+ }
302
+
303
+ :global(.theme-dark) .co-stat-card {
304
+ background: #1e293b;
305
+ border-color: #334155;
306
+ }
307
+
308
+ .co-stat-label {
309
+ font-size: 0.65rem;
310
+ font-weight: 700;
311
+ color: #94a3b8;
312
+ text-transform: uppercase;
313
+ letter-spacing: 0.05em;
314
+ }
315
+
316
+ .co-stat-value {
317
+ font-size: 1.5rem;
318
+ font-weight: 900;
319
+ color: #1e293b;
320
+ margin-top: 0.25rem;
321
+ line-height: 1;
322
+ }
323
+
324
+ :global(.theme-dark) .co-stat-value {
325
+ color: #fff;
326
+ }
327
+
328
+ .co-stat-red {
329
+ color: #ef4444;
330
+ }
331
+
332
+ :global(.theme-dark) .co-stat-red {
333
+ color: #f87171;
334
+ }
335
+
336
+ .co-stat-green {
337
+ color: #22c55e;
338
+ }
339
+
340
+ :global(.theme-dark) .co-stat-green {
341
+ color: #4ade80;
342
+ }
343
+
344
+ .co-viz-card {
345
+ min-height: 400px;
346
+ }
347
+
348
+ .co-viz {
349
+ display: flex;
350
+ flex-direction: column;
351
+ gap: 2rem;
352
+ min-height: 16rem;
353
+ }
354
+
355
+ :global(.co-empty-state) {
356
+ display: flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ height: 16rem;
360
+ color: #94a3b8;
361
+ font-size: 0.875rem;
362
+ font-style: italic;
363
+ text-align: center;
364
+ }
365
+
366
+ :global(.co-bar-wrap) {
367
+ background: #f8fafc;
368
+ border-radius: 0.5rem;
369
+ padding: 0.75rem;
370
+ border: 1px solid #f1f5f9;
371
+ }
372
+
373
+ :global(.theme-dark .co-bar-wrap) {
374
+ background: rgba(15, 23, 42, 0.5);
375
+ border-color: #1e293b;
376
+ }
377
+
378
+ :global(.co-bar-hdr) {
379
+ display: flex;
380
+ justify-content: space-between;
381
+ font-size: 0.7rem;
382
+ font-weight: 700;
383
+ color: #94a3b8;
384
+ margin-bottom: 0.5rem;
385
+ }
386
+
387
+ :global(.co-bar) {
388
+ height: 3rem;
389
+ background: #e2e8f0;
390
+ border-radius: 0.25rem;
391
+ display: flex;
392
+ overflow: hidden;
393
+ position: relative;
394
+ }
395
+
396
+ :global(.theme-dark .co-bar) {
397
+ background: #334155;
398
+ }
399
+
400
+ :global(.co-seg) {
401
+ height: 100%;
402
+ background: linear-gradient(to bottom, #fb923c, #ea580c);
403
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
404
+ display: flex;
405
+ align-items: center;
406
+ justify-content: center;
407
+ color: #fff;
408
+ font-size: 0.75rem;
409
+ font-weight: 700;
410
+ overflow: hidden;
411
+ cursor: default;
412
+ }
413
+
414
+ :global(.co-panel-wrap) {
415
+ background: #f8fafc;
416
+ border-radius: 0.5rem;
417
+ padding: 0.75rem;
418
+ border: 1px solid #f1f5f9;
419
+ }
420
+
421
+ :global(.theme-dark .co-panel-wrap) {
422
+ background: rgba(15, 23, 42, 0.5);
423
+ border-color: #1e293b;
424
+ }
425
+
426
+ :global(.co-sheet) {
427
+ position: relative;
428
+ background: #e2e8f0;
429
+ width: 100%;
430
+ border: 1px solid #cbd5e1;
431
+ }
432
+
433
+ :global(.theme-dark .co-sheet) {
434
+ background: #334155;
435
+ border-color: #475569;
436
+ }
437
+
438
+ :global(.co-rect) {
439
+ position: absolute;
440
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
441
+ border: 1px solid rgba(255, 255, 255, 0.4);
442
+ display: flex;
443
+ align-items: center;
444
+ justify-content: center;
445
+ color: #fff;
446
+ font-size: 0.625rem;
447
+ font-weight: 700;
448
+ overflow: hidden;
449
+ cursor: default;
450
+ transition: filter 0.15s ease;
451
+ }
452
+
453
+ :global(.co-rect:hover) {
454
+ filter: brightness(1.1);
455
+ }
456
+
457
+ @media (max-width: 1024px) {
458
+ .co-grid {
459
+ grid-template-columns: 1fr;
460
+ }
461
+
462
+ .co-stats-grid {
463
+ grid-template-columns: repeat(2, 1fr);
464
+ }
465
+ }
466
+
467
+ @media (max-width: 640px) {
468
+ .co-stats-grid {
469
+ grid-template-columns: repeat(2, 1fr);
470
+ }
471
+
472
+ .co-card {
473
+ padding: 1rem;
474
+ }
475
+ }