@tangle-network/sandbox-ui 0.21.0 → 0.21.2

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.
@@ -42,7 +42,6 @@ import {
42
42
  InlineCode,
43
43
  Input,
44
44
  Label,
45
- Logo,
46
45
  Progress,
47
46
  SegmentedControl,
48
47
  Select,
@@ -73,7 +72,6 @@ import {
73
72
  TabsContent,
74
73
  TabsList,
75
74
  TabsTrigger,
76
- TangleKnot,
77
75
  TerminalCursor,
78
76
  TerminalDisplay,
79
77
  TerminalInput,
@@ -87,7 +85,11 @@ import {
87
85
  buttonVariants,
88
86
  useTheme,
89
87
  useToast
90
- } from "./chunk-7ZA5SEK3.js";
88
+ } from "./chunk-SM7IJY4I.js";
89
+ import {
90
+ Logo,
91
+ TangleKnot
92
+ } from "./chunk-UHFJXO24.js";
91
93
  import "./chunk-EI44GEQ5.js";
92
94
  export {
93
95
  Avatar,
package/dist/styles.css CHANGED
@@ -30,7 +30,6 @@
30
30
  --color-violet-300: oklch(81.1% 0.111 293.571);
31
31
  --color-violet-400: oklch(70.2% 0.183 293.541);
32
32
  --color-violet-500: oklch(60.6% 0.25 292.717);
33
- --color-gray-300: oklch(87.2% 0.01 258.338);
34
33
  --color-gray-900: oklch(21% 0.034 264.665);
35
34
  --color-zinc-400: oklch(70.5% 0.015 286.067);
36
35
  --color-neutral-400: oklch(70.8% 0 0);
@@ -70,7 +69,6 @@
70
69
  --font-weight-semibold: 600;
71
70
  --font-weight-bold: 700;
72
71
  --font-weight-extrabold: 800;
73
- --font-weight-black: 900;
74
72
  --tracking-tighter: -0.05em;
75
73
  --tracking-tight: -0.025em;
76
74
  --tracking-normal: 0em;
@@ -523,6 +521,9 @@
523
521
  .mb-2 {
524
522
  margin-bottom: calc(var(--spacing) * 2);
525
523
  }
524
+ .mb-2\.5 {
525
+ margin-bottom: calc(var(--spacing) * 2.5);
526
+ }
526
527
  .mb-3 {
527
528
  margin-bottom: calc(var(--spacing) * 3);
528
529
  }
@@ -550,6 +551,9 @@
550
551
  .ml-1 {
551
552
  margin-left: calc(var(--spacing) * 1);
552
553
  }
554
+ .ml-1\.5 {
555
+ margin-left: calc(var(--spacing) * 1.5);
556
+ }
553
557
  .ml-2 {
554
558
  margin-left: calc(var(--spacing) * 2);
555
559
  }
@@ -605,9 +609,6 @@
605
609
  width: calc(var(--spacing) * 6);
606
610
  height: calc(var(--spacing) * 6);
607
611
  }
608
- .h-0\.5 {
609
- height: calc(var(--spacing) * 0.5);
610
- }
611
612
  .h-1 {
612
613
  height: calc(var(--spacing) * 1);
613
614
  }
@@ -1486,12 +1487,6 @@
1486
1487
  .rounded-\[2px\] {
1487
1488
  border-radius: 2px;
1488
1489
  }
1489
- .rounded-\[14px\] {
1490
- border-radius: 14px;
1491
- }
1492
- .rounded-\[16px\] {
1493
- border-radius: 16px;
1494
- }
1495
1490
  .rounded-\[18px\] {
1496
1491
  border-radius: 18px;
1497
1492
  }
@@ -2053,10 +2048,6 @@
2053
2048
  background-color: color-mix(in oklab, var(--color-yellow-600) 20%, transparent);
2054
2049
  }
2055
2050
  }
2056
- .bg-gradient-to-br {
2057
- --tw-gradient-position: to bottom right in oklab;
2058
- background-image: linear-gradient(var(--tw-gradient-stops));
2059
- }
2060
2051
  .bg-gradient-to-l {
2061
2052
  --tw-gradient-position: to left in oklab;
2062
2053
  background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2108,6 +2099,9 @@
2108
2099
  .p-3 {
2109
2100
  padding: calc(var(--spacing) * 3);
2110
2101
  }
2102
+ .p-3\.5 {
2103
+ padding: calc(var(--spacing) * 3.5);
2104
+ }
2111
2105
  .p-4 {
2112
2106
  padding: calc(var(--spacing) * 4);
2113
2107
  }
@@ -2297,9 +2291,6 @@
2297
2291
  .pb-1 {
2298
2292
  padding-bottom: calc(var(--spacing) * 1);
2299
2293
  }
2300
- .pb-1\.5 {
2301
- padding-bottom: calc(var(--spacing) * 1.5);
2302
- }
2303
2294
  .pb-2 {
2304
2295
  padding-bottom: calc(var(--spacing) * 2);
2305
2296
  }
@@ -2468,10 +2459,6 @@
2468
2459
  --tw-font-weight: var(--font-sans);
2469
2460
  font-weight: var(--font-sans);
2470
2461
  }
2471
- .font-black {
2472
- --tw-font-weight: var(--font-weight-black);
2473
- font-weight: var(--font-weight-black);
2474
- }
2475
2462
  .font-bold {
2476
2463
  --tw-font-weight: var(--font-weight-bold);
2477
2464
  font-weight: var(--font-weight-bold);
@@ -2793,10 +2780,6 @@
2793
2780
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2794
2781
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2795
2782
  }
2796
- .shadow-2xl {
2797
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
2798
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2799
- }
2800
2783
  .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
2801
2784
  --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
2802
2785
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2837,18 +2820,10 @@
2837
2820
  --tw-shadow: var(--shadow-glow);
2838
2821
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2839
2822
  }
2840
- .shadow-inner {
2841
- --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2842
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2843
- }
2844
2823
  .shadow-lg {
2845
2824
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2846
2825
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2847
2826
  }
2848
- .shadow-md {
2849
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2850
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2851
- }
2852
2827
  .shadow-none {
2853
2828
  --tw-shadow: 0 0 #0000;
2854
2829
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2884,10 +2859,6 @@
2884
2859
  .ring-\[var\(--bg-root\)\] {
2885
2860
  --tw-ring-color: var(--bg-root);
2886
2861
  }
2887
- .ring-offset-2 {
2888
- --tw-ring-offset-width: 2px;
2889
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2890
- }
2891
2862
  .outline {
2892
2863
  outline-style: var(--tw-outline-style);
2893
2864
  outline-width: 1px;
@@ -3036,12 +3007,6 @@
3036
3007
  }
3037
3008
  }
3038
3009
  }
3039
- .peer-focus\:outline-none {
3040
- &:is(:where(.peer):focus ~ *) {
3041
- --tw-outline-style: none;
3042
- outline-style: none;
3043
- }
3044
- }
3045
3010
  .peer-disabled\:cursor-not-allowed {
3046
3011
  &:is(:where(.peer):disabled ~ *) {
3047
3012
  cursor: not-allowed;
@@ -3093,12 +3058,6 @@
3093
3058
  top: calc(var(--spacing) * 0);
3094
3059
  }
3095
3060
  }
3096
- .after\:top-\[2px\] {
3097
- &::after {
3098
- content: var(--tw-content);
3099
- top: 2px;
3100
- }
3101
- }
3102
3061
  .after\:right-0 {
3103
3062
  &::after {
3104
3063
  content: var(--tw-content);
@@ -3111,86 +3070,12 @@
3111
3070
  left: calc(var(--spacing) * 0);
3112
3071
  }
3113
3072
  }
3114
- .after\:left-\[2px\] {
3115
- &::after {
3116
- content: var(--tw-content);
3117
- left: 2px;
3118
- }
3119
- }
3120
- .after\:h-5 {
3121
- &::after {
3122
- content: var(--tw-content);
3123
- height: calc(var(--spacing) * 5);
3124
- }
3125
- }
3126
3073
  .after\:h-\[2px\] {
3127
3074
  &::after {
3128
3075
  content: var(--tw-content);
3129
3076
  height: 2px;
3130
3077
  }
3131
3078
  }
3132
- .after\:w-5 {
3133
- &::after {
3134
- content: var(--tw-content);
3135
- width: calc(var(--spacing) * 5);
3136
- }
3137
- }
3138
- .after\:rounded-full {
3139
- &::after {
3140
- content: var(--tw-content);
3141
- border-radius: calc(infinity * 1px);
3142
- }
3143
- }
3144
- .after\:border {
3145
- &::after {
3146
- content: var(--tw-content);
3147
- border-style: var(--tw-border-style);
3148
- border-width: 1px;
3149
- }
3150
- }
3151
- .after\:border-gray-300 {
3152
- &::after {
3153
- content: var(--tw-content);
3154
- border-color: var(--color-gray-300);
3155
- }
3156
- }
3157
- .after\:bg-white {
3158
- &::after {
3159
- content: var(--tw-content);
3160
- background-color: var(--color-white);
3161
- }
3162
- }
3163
- .after\:transition-all {
3164
- &::after {
3165
- content: var(--tw-content);
3166
- transition-property: all;
3167
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3168
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3169
- }
3170
- }
3171
- .after\:content-\[\'\'\] {
3172
- &::after {
3173
- --tw-content: '';
3174
- content: var(--tw-content);
3175
- }
3176
- }
3177
- .peer-checked\:after\:translate-x-full {
3178
- &:is(:where(.peer):checked ~ *) {
3179
- &::after {
3180
- content: var(--tw-content);
3181
- --tw-translate-x: 100%;
3182
- translate: var(--tw-translate-x) var(--tw-translate-y);
3183
- }
3184
- }
3185
- }
3186
- .peer-checked\:after\:border-white {
3187
- &:is(:where(.peer):checked ~ *) {
3188
- &::after {
3189
- content: var(--tw-content);
3190
- border-color: var(--color-white);
3191
- }
3192
- }
3193
- }
3194
3079
  .last\:border-0 {
3195
3080
  &:last-child {
3196
3081
  border-style: var(--tw-border-style);
@@ -3260,16 +3145,6 @@
3260
3145
  }
3261
3146
  }
3262
3147
  }
3263
- .hover\:border-red-500\/30 {
3264
- &:hover {
3265
- @media (hover: hover) {
3266
- border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
3267
- @supports (color: color-mix(in lab, red, red)) {
3268
- border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
3269
- }
3270
- }
3271
- }
3272
- }
3273
3148
  .hover\:bg-\[var\(--accent-surface-soft\)\] {
3274
3149
  &:hover {
3275
3150
  @media (hover: hover) {
@@ -3359,16 +3234,6 @@
3359
3234
  }
3360
3235
  }
3361
3236
  }
3362
- .hover\:bg-red-500\/10 {
3363
- &:hover {
3364
- @media (hover: hover) {
3365
- background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
3366
- @supports (color: color-mix(in lab, red, red)) {
3367
- background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
3368
- }
3369
- }
3370
- }
3371
- }
3372
3237
  .hover\:bg-red-600\/30 {
3373
3238
  &:hover {
3374
3239
  @media (hover: hover) {
@@ -3446,22 +3311,6 @@
3446
3311
  }
3447
3312
  }
3448
3313
  }
3449
- .hover\:shadow-sm {
3450
- &:hover {
3451
- @media (hover: hover) {
3452
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3453
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3454
- }
3455
- }
3456
- }
3457
- .hover\:brightness-95 {
3458
- &:hover {
3459
- @media (hover: hover) {
3460
- --tw-brightness: brightness(95%);
3461
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
3462
- }
3463
- }
3464
- }
3465
3314
  .hover\:brightness-110 {
3466
3315
  &:hover {
3467
3316
  @media (hover: hover) {
@@ -3621,6 +3470,11 @@
3621
3470
  scale: 0.98;
3622
3471
  }
3623
3472
  }
3473
+ .active\:scale-\[0\.99\] {
3474
+ &:active {
3475
+ scale: 0.99;
3476
+ }
3477
+ }
3624
3478
  .active\:bg-\[var\(--border-accent\)\] {
3625
3479
  &:active {
3626
3480
  background-color: var(--border-accent);
@@ -3646,6 +3500,11 @@
3646
3500
  opacity: 50%;
3647
3501
  }
3648
3502
  }
3503
+ .disabled\:opacity-60 {
3504
+ &:disabled {
3505
+ opacity: 60%;
3506
+ }
3507
+ }
3649
3508
  .data-\[disabled\]\:pointer-events-none {
3650
3509
  &[data-disabled] {
3651
3510
  pointer-events: none;
@@ -3718,14 +3577,9 @@
3718
3577
  translate: var(--tw-translate-x) var(--tw-translate-y);
3719
3578
  }
3720
3579
  }
3721
- .sm\:mx-4 {
3580
+ .sm\:mx-3 {
3722
3581
  @media (width >= 40rem) {
3723
- margin-inline: calc(var(--spacing) * 4);
3724
- }
3725
- }
3726
- .sm\:ml-3 {
3727
- @media (width >= 40rem) {
3728
- margin-left: calc(var(--spacing) * 3);
3582
+ margin-inline: calc(var(--spacing) * 3);
3729
3583
  }
3730
3584
  }
3731
3585
  .sm\:inline {
@@ -3972,9 +3826,9 @@
3972
3826
  border-width: 0px;
3973
3827
  }
3974
3828
  }
3975
- .\[\&\:\:-moz-range-track\]\:h-2 {
3829
+ .\[\&\:\:-moz-range-track\]\:h-1\.5 {
3976
3830
  &::-moz-range-track {
3977
- height: calc(var(--spacing) * 2);
3831
+ height: calc(var(--spacing) * 1.5);
3978
3832
  }
3979
3833
  }
3980
3834
  .\[\&\:\:-moz-range-track\]\:rounded-full {
@@ -3982,9 +3836,9 @@
3982
3836
  border-radius: calc(infinity * 1px);
3983
3837
  }
3984
3838
  }
3985
- .\[\&\:\:-webkit-slider-runnable-track\]\:h-2 {
3839
+ .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5 {
3986
3840
  &::-webkit-slider-runnable-track {
3987
- height: calc(var(--spacing) * 2);
3841
+ height: calc(var(--spacing) * 1.5);
3988
3842
  }
3989
3843
  }
3990
3844
  .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full {
@@ -3992,19 +3846,19 @@
3992
3846
  border-radius: calc(infinity * 1px);
3993
3847
  }
3994
3848
  }
3995
- .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[6px\] {
3849
+ .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\] {
3996
3850
  &::-webkit-slider-thumb {
3997
- margin-top: calc(6px * -1);
3851
+ margin-top: calc(5px * -1);
3998
3852
  }
3999
3853
  }
4000
- .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
3854
+ .\[\&\:\:-webkit-slider-thumb\]\:h-4 {
4001
3855
  &::-webkit-slider-thumb {
4002
- height: calc(var(--spacing) * 5);
3856
+ height: calc(var(--spacing) * 4);
4003
3857
  }
4004
3858
  }
4005
- .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
3859
+ .\[\&\:\:-webkit-slider-thumb\]\:w-4 {
4006
3860
  &::-webkit-slider-thumb {
4007
- width: calc(var(--spacing) * 5);
3861
+ width: calc(var(--spacing) * 4);
4008
3862
  }
4009
3863
  }
4010
3864
  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
@@ -4023,31 +3877,12 @@
4023
3877
  border-width: 2px;
4024
3878
  }
4025
3879
  }
4026
- .\[\&\:\:-webkit-slider-thumb\]\:shadow-md {
3880
+ .\[\&\:\:-webkit-slider-thumb\]\:shadow-sm {
4027
3881
  &::-webkit-slider-thumb {
4028
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3882
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4029
3883
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4030
3884
  }
4031
3885
  }
4032
- .\[\&\:\:-webkit-slider-thumb\]\:transition-transform {
4033
- &::-webkit-slider-thumb {
4034
- transition-property: transform, translate, scale, rotate;
4035
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4036
- transition-duration: var(--tw-duration, var(--default-transition-duration));
4037
- }
4038
- }
4039
- .\[\&\:\:-webkit-slider-thumb\]\:hover\:scale-110 {
4040
- &::-webkit-slider-thumb {
4041
- &:hover {
4042
- @media (hover: hover) {
4043
- --tw-scale-x: 110%;
4044
- --tw-scale-y: 110%;
4045
- --tw-scale-z: 110%;
4046
- scale: var(--tw-scale-x) var(--tw-scale-y);
4047
- }
4048
- }
4049
- }
4050
- }
4051
3886
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
4052
3887
  &:has([role=checkbox]) {
4053
3888
  padding-right: calc(var(--spacing) * 0);
package/dist/workspace.js CHANGED
@@ -14,7 +14,7 @@ import {
14
14
  TaskBoard,
15
15
  TerminalPanel,
16
16
  WorkspaceLayout
17
- } from "./chunk-R6NONXFC.js";
17
+ } from "./chunk-BP6ZTBI6.js";
18
18
  import "./chunk-EI44GEQ5.js";
19
19
  export {
20
20
  AgentWorkbench,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/sandbox-ui",
3
- "version": "0.21.0",
3
+ "version": "0.21.2",
4
4
  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -99,16 +99,6 @@
99
99
  "dist",
100
100
  "tailwind.config.cjs"
101
101
  ],
102
- "scripts": {
103
- "build": "tsup",
104
- "dev": "tsup --watch",
105
- "typecheck": "tsc --noEmit",
106
- "storybook": "storybook dev -p 6006",
107
- "build-storybook": "storybook build",
108
- "test": "vitest run",
109
- "test:watch": "vitest",
110
- "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
111
- },
112
102
  "peerDependencies": {
113
103
  "@tangle-network/brand": "^0.3.0",
114
104
  "@tangle-network/ui": "^1.0.1",
@@ -142,11 +132,6 @@
142
132
  "lucide-react": "^0.469.0",
143
133
  "nanostores": "^1.2.0"
144
134
  },
145
- "pnpm": {
146
- "overrides": {
147
- "picomatch": ">=4.0.4"
148
- }
149
- },
150
135
  "devDependencies": {
151
136
  "@hocuspocus/provider": "^3.4.4",
152
137
  "@nanostores/react": "^1.1.0",
@@ -194,5 +179,15 @@
194
179
  "vite": "^8.0.5",
195
180
  "vitest": "^4.1.3",
196
181
  "yjs": "^13.6.30"
182
+ },
183
+ "scripts": {
184
+ "build": "tsup",
185
+ "dev": "tsup --watch",
186
+ "typecheck": "tsc --noEmit",
187
+ "storybook": "storybook dev -p 6006",
188
+ "build-storybook": "storybook build",
189
+ "test": "vitest run",
190
+ "test:watch": "vitest",
191
+ "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
197
192
  }
198
- }
193
+ }