@jjlmoya/utils-science 1.5.0 → 1.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.
@@ -1 +0,0 @@
1
- /* Cellular Renewal Styles */
@@ -1,473 +0,0 @@
1
- /* Colony Counter - CSS Variables */
2
- :root {
3
- --colony-primary: #14b8a6;
4
- --colony-secondary: #a855f7;
5
- --colony-accent: #64748b;
6
- --colony-danger: #ef4444;
7
- --colony-danger-dark: #dc2626;
8
- --colony-danger-light: #fca5a5;
9
- --colony-bg-light: #f8fafc;
10
- --colony-bg-dark: #0f172a;
11
- --colony-bg-card: #fff;
12
- --colony-bg-modal: rgba(255, 255, 255, 0.9);
13
- --colony-border-light: #e2e8f0;
14
- --colony-border-dark: #1e293b;
15
- --colony-text-primary: #1e293b;
16
- --colony-text-secondary: #64748b;
17
- --colony-text-light: #f1f5f9;
18
- }
19
-
20
- .theme-dark {
21
- --colony-bg-light: #0f172a;
22
- --colony-bg-card: #1e293b;
23
- --colony-bg-modal: rgba(30, 41, 59, 0.9);
24
- --colony-border-light: #334155;
25
- --colony-text-primary: #f1f5f9;
26
- --colony-text-secondary: #cbd5e1;
27
- }
28
-
29
- /* Container */
30
- .colony-container {
31
- width: 100%;
32
- max-width: 100%;
33
- margin: 0 auto;
34
- }
35
-
36
- /* Main Card */
37
- .colony-main-card {
38
- width: 100%;
39
- background: var(--colony-bg-card);
40
- border-radius: 1.5rem;
41
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
42
- overflow: hidden;
43
- border: 1px solid var(--colony-border-light);
44
- transition: all 0.2s ease;
45
- animation: colony-fade-in 0.3s ease-in-out;
46
- }
47
-
48
- /* Grid Layout */
49
- .colony-grid {
50
- display: grid;
51
- grid-template-columns: 1fr;
52
- gap: 0;
53
- }
54
-
55
- @media (min-width: 1024px) {
56
- .colony-grid {
57
- grid-template-columns: 2fr 1fr;
58
- }
59
- }
60
-
61
- /* Canvas Section */
62
- .colony-canvas-section {
63
- padding: 1.5rem;
64
- background: var(--colony-bg-light);
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- min-height: 400px;
69
- }
70
-
71
- @media (min-width: 768px) {
72
- .colony-canvas-section {
73
- padding: 2.5rem;
74
- }
75
- }
76
-
77
- .colony-canvas-wrapper {
78
- position: relative;
79
- width: 100%;
80
- aspect-ratio: 1;
81
- max-width: 500px;
82
- }
83
-
84
- .colony-hidden {
85
- display: none;
86
- }
87
-
88
- /* Upload Prompt */
89
- .colony-upload-prompt {
90
- width: 100%;
91
- height: 100%;
92
- border-radius: 100%;
93
- border: 4px dashed var(--colony-border-light);
94
- background: var(--colony-bg-card);
95
- cursor: pointer;
96
- display: flex;
97
- flex-direction: column;
98
- align-items: center;
99
- justify-content: center;
100
- gap: 1rem;
101
- transition: all 0.3s ease;
102
- padding: 2rem;
103
- }
104
-
105
- .colony-upload-prompt:hover {
106
- border-color: var(--colony-primary);
107
- background: var(--colony-bg-light);
108
- }
109
-
110
- .colony-upload-icon {
111
- font-size: 3rem;
112
- color: var(--colony-text-secondary);
113
- }
114
-
115
- .colony-upload-text {
116
- text-align: center;
117
- padding: 0 1.5rem;
118
- }
119
-
120
- .colony-upload-title {
121
- font-size: 1.25rem;
122
- font-weight: 700;
123
- color: var(--colony-text-primary);
124
- margin-bottom: 0.5rem;
125
- }
126
-
127
- .colony-upload-subtitle {
128
- font-size: 0.875rem;
129
- color: var(--colony-text-secondary);
130
- }
131
-
132
- /* Canvas */
133
- .colony-petri-canvas {
134
- position: absolute;
135
- inset: 0;
136
- width: 100%;
137
- height: 100%;
138
- border-radius: 100%;
139
- border: 4px solid var(--colony-border-light);
140
- cursor: crosshair;
141
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
142
- }
143
-
144
- /* Mode Indicator */
145
- .colony-mode-indicator {
146
- position: absolute;
147
- top: 1rem;
148
- left: 1rem;
149
- background: var(--colony-bg-modal);
150
- padding: 0.75rem;
151
- border-radius: 0.5rem;
152
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
153
- backdrop-filter: blur(4px);
154
- }
155
-
156
- .colony-mode-label {
157
- font-size: 0.75rem;
158
- font-weight: 700;
159
- color: var(--colony-text-secondary);
160
- text-transform: uppercase;
161
- letter-spacing: 0.05em;
162
- margin-bottom: 0.25rem;
163
- }
164
-
165
- .colony-mode-value {
166
- font-size: 1.125rem;
167
- font-weight: 900;
168
- letter-spacing: 0.025em;
169
- }
170
-
171
- .colony-mode-a {
172
- color: var(--colony-primary);
173
- }
174
-
175
- .colony-mode-b {
176
- color: var(--colony-secondary);
177
- }
178
-
179
- /* Control Panel */
180
- .colony-control-panel {
181
- padding: 1.5rem;
182
- border-left: 1px solid var(--colony-border-light);
183
- display: flex;
184
- flex-direction: column;
185
- gap: 1.5rem;
186
- background: var(--colony-bg-card);
187
- }
188
-
189
- @media (min-width: 768px) {
190
- .colony-control-panel {
191
- padding: 2rem;
192
- }
193
- }
194
-
195
- @media (max-width: 1023px) {
196
- .colony-control-panel {
197
- border-left: none;
198
- border-top: 1px solid var(--colony-border-light);
199
- }
200
- }
201
-
202
- .colony-control-section {
203
- display: flex;
204
- flex-direction: column;
205
- gap: 1rem;
206
- }
207
-
208
- .colony-button-section {
209
- gap: 0.75rem;
210
- }
211
-
212
- .colony-control-title {
213
- font-size: 0.875rem;
214
- font-weight: 700;
215
- text-transform: uppercase;
216
- letter-spacing: 0.05em;
217
- color: var(--colony-text-secondary);
218
- }
219
-
220
- /* Mode Buttons */
221
- .colony-button-grid {
222
- display: grid;
223
- grid-template-columns: 1fr 1fr;
224
- gap: 0.75rem;
225
- }
226
-
227
- .colony-mode-btn {
228
- padding: 0.75rem 1rem;
229
- border-radius: 0.75rem;
230
- border: 2px solid var(--colony-border-light);
231
- background: var(--colony-bg-light);
232
- color: var(--colony-text-secondary);
233
- font-weight: 700;
234
- font-size: 0.875rem;
235
- cursor: pointer;
236
- display: flex;
237
- align-items: center;
238
- justify-content: center;
239
- gap: 0.5rem;
240
- transition: all 0.2s ease;
241
- }
242
-
243
- .colony-mode-btn:hover {
244
- transform: scale(1.05);
245
- }
246
-
247
- .colony-mode-btn-active {
248
- border-color: var(--colony-primary);
249
- background: color-mix(in srgb, var(--colony-primary) 10%, white);
250
- color: var(--colony-primary);
251
- }
252
-
253
- [data-theme="dark"] .colony-mode-btn-active,
254
- .theme-dark .colony-mode-btn-active {
255
- background: color-mix(in srgb, var(--colony-primary) 15%, var(--colony-bg-light));
256
- }
257
-
258
- .colony-color-dot {
259
- width: 1rem;
260
- height: 1rem;
261
- border-radius: 50%;
262
- display: inline-block;
263
- }
264
-
265
- .colony-color-a {
266
- background: var(--colony-primary);
267
- }
268
-
269
- .colony-color-b {
270
- background: var(--colony-secondary);
271
- }
272
-
273
- /* Count Grid */
274
- .colony-count-grid {
275
- display: grid;
276
- grid-template-columns: 1fr 1fr;
277
- gap: 1rem;
278
- }
279
-
280
- .colony-count-box {
281
- padding: 1rem;
282
- border-radius: 1rem;
283
- border: 1px solid var(--colony-border-light);
284
- transition: all 0.2s ease;
285
- }
286
-
287
- .colony-count-box-a {
288
- background: color-mix(in srgb, var(--colony-primary) 5%, var(--colony-bg-card));
289
- border-color: color-mix(in srgb, var(--colony-primary) 20%, var(--colony-border-light));
290
- }
291
-
292
- .colony-count-box-b {
293
- background: color-mix(in srgb, var(--colony-secondary) 5%, var(--colony-bg-card));
294
- border-color: color-mix(in srgb, var(--colony-secondary) 20%, var(--colony-border-light));
295
- }
296
-
297
- .colony-count-label {
298
- font-size: 0.75rem;
299
- font-weight: 700;
300
- text-transform: uppercase;
301
- letter-spacing: 0.05em;
302
- margin-bottom: 0.25rem;
303
- }
304
-
305
- .colony-count-label-a {
306
- color: var(--colony-primary);
307
- }
308
-
309
- .colony-count-label-b {
310
- color: var(--colony-secondary);
311
- }
312
-
313
- .colony-count-value {
314
- font-size: 2.25rem;
315
- font-weight: 900;
316
- letter-spacing: 0.025em;
317
- color: var(--colony-text-primary);
318
- }
319
-
320
- /* Total Count Box */
321
- .colony-count-total {
322
- background: var(--colony-bg-light);
323
- padding: 1rem;
324
- border-radius: 1rem;
325
- border: 1px solid var(--colony-border-light);
326
- grid-column: 1 / -1;
327
- }
328
-
329
- .colony-count-label-total {
330
- font-size: 0.75rem;
331
- font-weight: 700;
332
- text-transform: uppercase;
333
- letter-spacing: 0.05em;
334
- color: var(--colony-text-secondary);
335
- margin-bottom: 0.25rem;
336
- }
337
-
338
- .colony-count-value-total {
339
- font-size: 3rem;
340
- font-weight: 900;
341
- letter-spacing: 0.025em;
342
- color: var(--colony-text-primary);
343
- }
344
-
345
- /* Divider */
346
- .colony-divider {
347
- height: 1px;
348
- background: var(--colony-border-light);
349
- }
350
-
351
- /* Action Buttons */
352
- .colony-action-btn {
353
- width: 100%;
354
- padding: 0.75rem 1rem;
355
- border-radius: 0.75rem;
356
- border: 2px solid transparent;
357
- font-weight: 700;
358
- font-size: 0.875rem;
359
- cursor: pointer;
360
- display: flex;
361
- align-items: center;
362
- justify-content: center;
363
- gap: 0.5rem;
364
- transition: all 0.2s ease;
365
- }
366
-
367
- .colony-undo-btn {
368
- background: var(--colony-bg-light);
369
- border-color: var(--colony-border-light);
370
- color: var(--colony-text-primary);
371
- }
372
-
373
- .colony-undo-btn:hover {
374
- background: var(--colony-bg-light);
375
- border-color: var(--colony-accent);
376
- }
377
-
378
- .colony-clear-btn {
379
- background: color-mix(in srgb, var(--colony-danger) 5%, var(--colony-bg-card));
380
- border-color: color-mix(in srgb, var(--colony-danger) 20%, var(--colony-border-light));
381
- color: var(--colony-danger-dark);
382
- }
383
-
384
- .colony-clear-btn:hover {
385
- background: color-mix(in srgb, var(--colony-danger) 10%, var(--colony-bg-card));
386
- border-color: color-mix(in srgb, var(--colony-danger) 40%, var(--colony-border-light));
387
- }
388
-
389
- .theme-dark .colony-clear-btn {
390
- color: var(--colony-danger-light);
391
- }
392
-
393
- .colony-btn-icon {
394
- font-size: 1.25rem;
395
- }
396
-
397
- /* Info Text */
398
- .colony-info-text {
399
- font-size: 0.875rem;
400
- color: var(--colony-text-secondary);
401
- display: flex;
402
- flex-direction: column;
403
- gap: 0.5rem;
404
- padding-top: 0.5rem;
405
- }
406
-
407
- .colony-info-text p {
408
- margin: 0;
409
- display: flex;
410
- align-items: center;
411
- gap: 0.5rem;
412
- }
413
-
414
- .colony-info-icon {
415
- font-size: 1rem;
416
- flex-shrink: 0;
417
- }
418
-
419
- /* Responsive */
420
- @media (max-width: 768px) {
421
- .colony-canvas-section {
422
- min-height: 300px;
423
- padding: 1rem;
424
- }
425
-
426
- .colony-canvas-wrapper {
427
- max-width: 100%;
428
- }
429
-
430
- .colony-control-panel {
431
- padding: 1rem;
432
- }
433
-
434
- .colony-upload-title {
435
- font-size: 1rem;
436
- }
437
-
438
- .colony-upload-subtitle {
439
- font-size: 0.75rem;
440
- }
441
-
442
- .colony-mode-btn {
443
- padding: 0.625rem 0.75rem;
444
- font-size: 0.75rem;
445
- }
446
-
447
- .colony-count-value {
448
- font-size: 1.875rem;
449
- }
450
-
451
- .colony-count-value-total {
452
- font-size: 2.25rem;
453
- }
454
-
455
- .colony-action-btn {
456
- padding: 0.625rem;
457
- font-size: 0.75rem;
458
- }
459
-
460
- .colony-info-text {
461
- font-size: 0.75rem;
462
- }
463
- }
464
-
465
- /* Animation */
466
- @keyframes colony-fade-in {
467
- from {
468
- opacity: 0;
469
- }
470
- to {
471
- opacity: 1;
472
- }
473
- }
@@ -1,122 +0,0 @@
1
- :root {
2
- --microwave-primary: #e11d48;
3
- --microwave-text: #0f172a;
4
- --microwave-text-muted: #64748b;
5
- --microwave-bg: #fff;
6
- --microwave-bg-secondary: #fafbfc;
7
- --microwave-bg-tertiary: #f1f5f9;
8
- --microwave-border: #e2e8f0;
9
- }
10
-
11
- .theme-dark {
12
- --microwave-text: #fff;
13
- --microwave-text-muted: #94a3b8;
14
- --microwave-bg: #000;
15
- --microwave-bg-secondary: #0f172a;
16
- --microwave-bg-tertiary: #1e293b;
17
- --microwave-border: #1e293b;
18
- }
19
-
20
- .microwave-app {
21
- max-width: 900px;
22
- margin: 0 auto;
23
- }
24
-
25
- .microwave-card {
26
- background: var(--microwave-bg);
27
- border: 1px solid var(--microwave-border);
28
- border-radius: 1.5rem;
29
- padding: 2rem;
30
- }
31
-
32
- .microwave-header {
33
- display: flex;
34
- justify-content: space-between;
35
- align-items: center;
36
- margin-bottom: 2rem;
37
- }
38
-
39
- .microwave-title-group {
40
- display: flex;
41
- align-items: center;
42
- gap: 1rem;
43
- }
44
-
45
- .microwave-tool-name {
46
- font-size: 1.5rem;
47
- font-weight: 700;
48
- margin: 0;
49
- }
50
-
51
- .microwave-test-btn {
52
- display: flex;
53
- align-items: center;
54
- gap: 0.5rem;
55
- padding: 0.75rem 1.5rem;
56
- background: var(--microwave-primary);
57
- color: white;
58
- border: none;
59
- border-radius: 0.75rem;
60
- cursor: pointer;
61
- }
62
-
63
- .microwave-grid {
64
- display: grid;
65
- grid-template-columns: 1fr 1fr;
66
- gap: 2rem;
67
- }
68
-
69
- .microwave-chart-panel {
70
- background: var(--microwave-bg-secondary);
71
- border: 1px solid var(--microwave-border);
72
- border-radius: 1rem;
73
- padding: 1.5rem;
74
- }
75
-
76
- .microwave-data-panel {
77
- display: flex;
78
- flex-direction: column;
79
- gap: 1.5rem;
80
- }
81
-
82
- .data-card {
83
- background: var(--microwave-bg-secondary);
84
- border: 1px solid var(--microwave-border);
85
- border-radius: 0.75rem;
86
- padding: 1rem;
87
- }
88
-
89
- .probability-card {
90
- background: var(--microwave-bg-secondary);
91
- border: 1px solid var(--microwave-border);
92
- border-radius: 0.75rem;
93
- padding: 1.5rem;
94
- }
95
-
96
- .prob-bar-bg {
97
- width: 100%;
98
- height: 8px;
99
- background: var(--microwave-bg-tertiary);
100
- border-radius: 4px;
101
- overflow: hidden;
102
- margin: 1rem 0;
103
- }
104
-
105
- .prob-bar-fill {
106
- height: 100%;
107
- background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
108
- transition: width 0.3s ease;
109
- }
110
-
111
- .stats-list {
112
- display: flex;
113
- flex-direction: column;
114
- gap: 1rem;
115
- }
116
-
117
- .stat-item {
118
- display: flex;
119
- justify-content: space-between;
120
- padding: 0.75rem 0;
121
- border-bottom: 1px solid var(--microwave-border);
122
- }
@@ -1 +0,0 @@
1
- /* Simulation Probability Styles */