hd-garden 0.3.11 → 0.3.12
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.
- package/app/ui-parity/page.tsx +9 -6
- package/package.json +8 -8
- package/ui/README.md +70 -0
- package/ui/core/catalog.mjs +14 -0
- package/ui/core/static.mjs +2 -0
- package/ui/core/validate.mjs +11 -0
- package/ui/host.mjs +155 -0
- package/ui/index.mjs +80 -0
- package/ui/parity-fixtures.mjs +76 -0
- package/ui/preview/dist/garden-ui.css +54 -31
- package/ui/preview/dist/garden-ui.esm.js +172 -131
- package/ui/preview/dist/garden-ui.iife.js +172 -131
- package/ui/prompt/rules.md +1 -0
- package/ui/react/CatalogPage.tsx +37 -13
- package/ui/react/components/chart.tsx +1 -1
- package/ui/react/components/sandbox.tsx +68 -0
- package/ui/react/index.tsx +5 -3
- package/ui/react/parity.tsx +25 -0
- package/ui/react/runtime.tsx +22 -6
- package/ui/react/ui.css +54 -31
|
@@ -7,9 +7,11 @@
|
|
|
7
7
|
.garden-catalog,
|
|
8
8
|
.garden-ui-preview {
|
|
9
9
|
--gui-bg: #fff;
|
|
10
|
-
--gui-chart:
|
|
10
|
+
--gui-chart: #f4f4f4;
|
|
11
11
|
--gui-track: #e4e4e4;
|
|
12
12
|
--gui-thumb: #fff;
|
|
13
|
+
--gui-slider-track: #0d0d0d1f;
|
|
14
|
+
--gui-slider-thumb: #333;
|
|
13
15
|
--gui-text: #0d0d0d;
|
|
14
16
|
--gui-muted: #5d5d5d;
|
|
15
17
|
--gui-subtle: #8f8f8f;
|
|
@@ -36,6 +38,12 @@
|
|
|
36
38
|
--gui-popover-border: #0000000d;
|
|
37
39
|
--gui-shadow: 0 2px 6px #00000014;
|
|
38
40
|
--gui-code-bg: #f9f9f9;
|
|
41
|
+
--gui-accent: #0285ff;
|
|
42
|
+
--gui-series-plain: #171717;
|
|
43
|
+
--gui-series-accent: #0285ff;
|
|
44
|
+
--gui-series-new: #00a240;
|
|
45
|
+
--gui-series-waste: #e02e2a;
|
|
46
|
+
--gui-series-same: #924ff7;
|
|
39
47
|
--gui-info: #539af8;
|
|
40
48
|
--gui-info-text: #0169cc;
|
|
41
49
|
--gui-info-soft: #0285ff1a;
|
|
@@ -82,6 +90,8 @@
|
|
|
82
90
|
--gui-segment-shadow: none;
|
|
83
91
|
--gui-track: #3a3a3a;
|
|
84
92
|
--gui-thumb: #fff;
|
|
93
|
+
--gui-slider-track: #ffffff26;
|
|
94
|
+
--gui-slider-thumb: #ededed;
|
|
85
95
|
--gui-progress: #0285ff;
|
|
86
96
|
--gui-progress-track: #303030;
|
|
87
97
|
--gui-focus: #3a83f7;
|
|
@@ -89,6 +99,10 @@
|
|
|
89
99
|
--gui-popover-border: #ffffff26;
|
|
90
100
|
--gui-shadow: 0 2px 8px #00000066;
|
|
91
101
|
--gui-code-bg: #171717;
|
|
102
|
+
--gui-accent: #0285ff;
|
|
103
|
+
--gui-series-plain: #ededed;
|
|
104
|
+
--gui-series-new: #04b84c;
|
|
105
|
+
--gui-series-waste: #fa423e;
|
|
92
106
|
--gui-info: #0285ff;
|
|
93
107
|
--gui-info-text: #66b5ff;
|
|
94
108
|
--gui-info-soft: #0285ff26;
|
|
@@ -276,7 +290,7 @@
|
|
|
276
290
|
.garden-ui-steps-head strong { color: var(--gui-text); font-size: 16px; font-weight: 600; line-height: 1.4; }
|
|
277
291
|
.garden-ui-steps-head span { flex-shrink: 0; color: var(--gui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
278
292
|
|
|
279
|
-
.garden-ui-steps .garden-ui-progress { height:
|
|
293
|
+
.garden-ui-steps .garden-ui-progress { height: 3px; margin: 2px 0 0; }
|
|
280
294
|
|
|
281
295
|
.garden-ui-steps-stage { display: grid; }
|
|
282
296
|
|
|
@@ -386,7 +400,7 @@
|
|
|
386
400
|
|
|
387
401
|
.garden-ui-button.garden-ui-tone-accent:hover { border-color: var(--gui-solid-hover); background: var(--gui-solid-hover); }
|
|
388
402
|
|
|
389
|
-
/* slider:
|
|
403
|
+
/* slider: 24px track, 18px thumb inset 3px, no filled portion */
|
|
390
404
|
.garden-ui-slider { display: flex; flex-direction: column; gap: 8px; }
|
|
391
405
|
|
|
392
406
|
.garden-ui-slider label {
|
|
@@ -403,12 +417,12 @@
|
|
|
403
417
|
|
|
404
418
|
.garden-ui-slider-track { padding: 8px 0; }
|
|
405
419
|
|
|
406
|
-
.garden-ui-slider-track:has(input:focus-visible) { outline: 2px solid var(--gui-focus); outline-offset:
|
|
420
|
+
.garden-ui-slider-track:has(input:focus-visible) { outline: 2px solid var(--gui-focus); outline-offset: 3px; border-radius: 999px; }
|
|
407
421
|
|
|
408
422
|
.garden-ui-slider input[type="range"] {
|
|
409
423
|
display: block;
|
|
410
424
|
width: 100%;
|
|
411
|
-
height:
|
|
425
|
+
height: 38px;
|
|
412
426
|
margin: 0;
|
|
413
427
|
background: transparent;
|
|
414
428
|
cursor: ew-resize;
|
|
@@ -419,39 +433,39 @@
|
|
|
419
433
|
.garden-ui-slider input[type="range"]:focus-visible { outline: none; }
|
|
420
434
|
|
|
421
435
|
.garden-ui-slider input[type="range"]::-webkit-slider-runnable-track {
|
|
422
|
-
height:
|
|
436
|
+
height: 24px;
|
|
423
437
|
border: 0;
|
|
424
438
|
border-radius: 999px;
|
|
425
|
-
background: var(--gui-track);
|
|
439
|
+
background: var(--gui-slider-track);
|
|
426
440
|
}
|
|
427
441
|
|
|
428
442
|
.garden-ui-slider input[type="range"]::-moz-range-track {
|
|
429
|
-
height:
|
|
443
|
+
height: 24px;
|
|
430
444
|
border: 0;
|
|
431
445
|
border-radius: 999px;
|
|
432
|
-
background: var(--gui-track);
|
|
446
|
+
background: var(--gui-slider-track);
|
|
433
447
|
}
|
|
434
448
|
|
|
435
449
|
.garden-ui-slider input[type="range"]::-webkit-slider-thumb {
|
|
436
|
-
width:
|
|
437
|
-
height:
|
|
438
|
-
margin-top:
|
|
439
|
-
border:
|
|
450
|
+
width: 18px;
|
|
451
|
+
height: 18px;
|
|
452
|
+
margin-top: 3px;
|
|
453
|
+
border: 0;
|
|
440
454
|
border-radius: 50%;
|
|
441
|
-
background: var(--gui-thumb);
|
|
442
|
-
box-shadow:
|
|
455
|
+
background: var(--gui-slider-thumb);
|
|
456
|
+
box-shadow: none;
|
|
443
457
|
-webkit-appearance: none;
|
|
444
458
|
appearance: none;
|
|
445
459
|
transition: transform 120ms ease;
|
|
446
460
|
}
|
|
447
461
|
|
|
448
462
|
.garden-ui-slider input[type="range"]::-moz-range-thumb {
|
|
449
|
-
width:
|
|
450
|
-
height:
|
|
451
|
-
border:
|
|
463
|
+
width: 18px;
|
|
464
|
+
height: 18px;
|
|
465
|
+
border: 0;
|
|
452
466
|
border-radius: 50%;
|
|
453
|
-
background: var(--gui-thumb);
|
|
454
|
-
box-shadow:
|
|
467
|
+
background: var(--gui-slider-thumb);
|
|
468
|
+
box-shadow: none;
|
|
455
469
|
}
|
|
456
470
|
|
|
457
471
|
.garden-ui-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
|
|
@@ -802,16 +816,16 @@
|
|
|
802
816
|
}
|
|
803
817
|
.garden-ui-chart-canvas:focus-visible { outline: 2px solid var(--gui-focus); outline-offset: 2px; }
|
|
804
818
|
|
|
805
|
-
.garden-ui-series-plain { --gui-series:
|
|
806
|
-
.garden-ui-series-accent { --gui-series:
|
|
807
|
-
.garden-ui-series-new { --gui-series:
|
|
808
|
-
.garden-ui-series-waste { --gui-series:
|
|
809
|
-
.garden-ui-series-same { --gui-series:
|
|
819
|
+
.garden-ui-series-plain { --gui-series: var(--gui-series-plain); }
|
|
820
|
+
.garden-ui-series-accent { --gui-series: var(--gui-series-accent); }
|
|
821
|
+
.garden-ui-series-new { --gui-series: var(--gui-series-new); }
|
|
822
|
+
.garden-ui-series-waste { --gui-series: var(--gui-series-waste); }
|
|
823
|
+
.garden-ui-series-same { --gui-series: var(--gui-series-same); }
|
|
810
824
|
.garden-ui-series-muted,
|
|
811
825
|
.garden-ui-series-cached { --gui-series: var(--gui-subtle); }
|
|
812
826
|
|
|
813
827
|
.garden-ui-chart-grid { stroke: var(--gui-border); stroke-width: 1; stroke-dasharray: 2 4; }
|
|
814
|
-
.garden-ui-chart-axis { stroke:
|
|
828
|
+
.garden-ui-chart-axis { stroke: var(--gui-border); stroke-width: 1; }
|
|
815
829
|
.garden-ui-chart .garden-ui-legend { justify-content: center; }
|
|
816
830
|
.garden-ui-chart-tick,
|
|
817
831
|
.garden-ui-chart-label { fill: var(--gui-subtle); font-family: var(--gui-font); font-size: 12px; }
|
|
@@ -889,8 +903,8 @@
|
|
|
889
903
|
}
|
|
890
904
|
|
|
891
905
|
.garden-ui-code code { padding: 0; border-radius: 0; background: none; color: var(--gui-text); font-size: 13px; }
|
|
892
|
-
.garden-ui-code-line { display: block; padding: 0 14px 0
|
|
893
|
-
.garden-ui-code-line[data-highlight="true"] {
|
|
906
|
+
.garden-ui-code-line { display: block; padding: 0 14px 0 12px; box-shadow: inset 2px 0 0 transparent; }
|
|
907
|
+
.garden-ui-code-line[data-highlight="true"] { background: var(--gui-info-soft); box-shadow: inset 2px 0 0 var(--gui-accent); }
|
|
894
908
|
.garden-ui-code-number { display: inline-block; width: 3em; padding-right: 1em; color: var(--gui-subtle); text-align: right; user-select: none; }
|
|
895
909
|
|
|
896
910
|
.garden-ui-diagram-canvas { overflow-x: auto; padding: 12px; border-radius: 12px; background: var(--gui-code-bg); }
|
|
@@ -908,10 +922,19 @@
|
|
|
908
922
|
.garden-ui-diagram-canvas .garden-ui-diagram-on rect,
|
|
909
923
|
.garden-ui-diagram-canvas .garden-ui-diagram-on polygon,
|
|
910
924
|
.garden-ui-diagram-canvas .garden-ui-diagram-on circle,
|
|
911
|
-
.garden-ui-diagram-canvas rect.garden-ui-diagram-on { fill: var(--gui-info-soft) !important; stroke: var(--gui-
|
|
925
|
+
.garden-ui-diagram-canvas rect.garden-ui-diagram-on { fill: var(--gui-info-soft) !important; stroke: var(--gui-accent) !important; }
|
|
912
926
|
.garden-ui-diagram-canvas .garden-ui-diagram-on .nodeLabel,
|
|
913
|
-
.garden-ui-diagram-canvas .garden-ui-diagram-on text { color: var(--gui-
|
|
914
|
-
.garden-ui-diagram-canvas path.garden-ui-diagram-on { stroke: var(--gui-
|
|
927
|
+
.garden-ui-diagram-canvas .garden-ui-diagram-on text { color: var(--gui-accent) !important; fill: var(--gui-accent) !important; }
|
|
928
|
+
.garden-ui-diagram-canvas path.garden-ui-diagram-on { stroke: var(--gui-accent) !important; stroke-width: 2px !important; }
|
|
929
|
+
|
|
930
|
+
.garden-ui-sandbox {
|
|
931
|
+
display: block;
|
|
932
|
+
width: 100%;
|
|
933
|
+
min-height: 48px;
|
|
934
|
+
border: 0;
|
|
935
|
+
border-radius: 12px;
|
|
936
|
+
background: transparent;
|
|
937
|
+
}
|
|
915
938
|
|
|
916
939
|
/* intent: the author's words, shown like a message bubble */
|
|
917
940
|
.garden-ui-intent { border: 0; background: transparent; }
|