vzcode 0.60.0 → 0.62.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 (15) hide show
  1. package/dist/assets/{index-iYQ0qHNs.js → index-QfTeKC1O.js} +36 -36
  2. package/dist/assets/{index-yDxNPcIh.css → index-rnGm5_OY.css} +1 -1
  3. package/dist/index.html +2 -2
  4. package/package.json +2 -2
  5. package/src/client/AIAssist/AIAssistWidget/index.tsx +5 -8
  6. package/src/client/AIAssist/AIAssistWidget/style.scss +3 -16
  7. package/src/client/CodeErrorOverlay/index.tsx +7 -4
  8. package/src/client/CodeErrorOverlay/style.scss +8 -18
  9. package/src/client/Icons/CloseSVG.tsx +1 -1
  10. package/src/client/Icons/SparklesSVG.tsx +10 -24
  11. package/src/client/TabList/Tab.tsx +6 -3
  12. package/src/client/TabList/style.scss +13 -16
  13. package/src/client/VZSidebar/Item.tsx +2 -2
  14. package/src/client/VZSidebar/index.tsx +3 -3
  15. package/src/client/VZSidebar/styles.scss +3 -15
package/dist/index.html CHANGED
@@ -20,8 +20,8 @@
20
20
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
21
21
  rel="stylesheet"
22
22
  />
23
- <script type="module" crossorigin src="/assets/index-iYQ0qHNs.js"></script>
24
- <link rel="stylesheet" crossorigin href="/assets/index-yDxNPcIh.css">
23
+ <script type="module" crossorigin src="/assets/index-QfTeKC1O.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-rnGm5_OY.css">
25
25
  </head>
26
26
  <body>
27
27
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "0.60.0",
3
+ "version": "0.62.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -108,7 +108,7 @@
108
108
  "react-router-dom": "^6.22.0",
109
109
  "sharedb": "^4.1.2",
110
110
  "sharedb-client-browser": "^4.4.0",
111
- "vizhub-ui": "^3.18.0",
111
+ "vizhub-ui": "^3.19.0",
112
112
  "ws": "^8.16.0"
113
113
  },
114
114
  "devDependencies": {
package/src/client/AIAssist/AIAssistWidget/index.tsx CHANGED
@@ -4,11 +4,7 @@ import {
4
4
  ShareDBDoc,
5
5
  VZCodeContent,
6
6
  } from '../../../types';
7
- import {
8
- Button,
9
- OverlayTrigger,
10
- Tooltip,
11
- } from '../../bootstrap';
7
+ import { OverlayTrigger, Tooltip } from '../../bootstrap';
12
8
  import { EditorCache } from '../../useEditorCache';
13
9
  import { TabState } from '../../vzReducer';
14
10
  import {
@@ -87,14 +83,15 @@ export const AIAssistWidget = ({
87
83
  showWidget && (
88
84
  <div className="vz-code-ai-assist-widget">
89
85
  <OverlayTrigger
90
- placement="top"
86
+ placement="left"
91
87
  overlay={
92
88
  <Tooltip id="ai-assist-widget-tooltip">
93
89
  {aiAssistTooltipText}
94
90
  </Tooltip>
95
91
  }
96
92
  >
97
- <Button
93
+ <i
94
+ className="icon-button icon-button-dark"
98
95
  onClick={aiAssistClickOverride || handleClick}
99
96
  >
100
97
  {aiStreamId ? (
@@ -104,7 +101,7 @@ export const AIAssistWidget = ({
104
101
  ) : (
105
102
  <SparklesSVG />
106
103
  )}
107
- </Button>
104
+ </i>
108
105
  </OverlayTrigger>
109
106
  </div>
110
107
  )
package/src/client/AIAssist/AIAssistWidget/style.scss CHANGED
@@ -1,19 +1,6 @@
1
1
  .vz-code-ai-assist-widget {
2
2
  position: absolute;
3
- bottom: 20px;
4
- right: 20px;
5
-
6
- .btn {
7
- /* Center the icon */
8
- padding: 6px 6px 7px 6px;
9
- background: #1f2022;
10
- color: #e0e8ff;
11
- border-radius: 4px;
12
- border: none;
13
- }
14
- .btn:hover,
15
- .btn:active,
16
- .btn:focus {
17
- background: #47546b;
18
- }
3
+ bottom: 32px;
4
+ right: 32px;
5
+ color: var(--vh-color-caution-01);
19
6
  }
package/src/client/CodeErrorOverlay/index.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useState, useCallback, useEffect } from 'react';
2
- import './style.scss';
3
2
  import { VZCodeContent } from '../../types';
3
+ import { CloseSVG } from '../Icons';
4
+ import './style.scss';
4
5
 
5
6
  const enableErrorDismiss = true;
6
7
 
@@ -58,10 +59,12 @@ export const CodeErrorOverlay = ({
58
59
  <div className="vz-code-error-overlay">
59
60
  <pre>{errorMessage}</pre>
60
61
  {enableErrorDismiss ? (
61
- <div
62
- className={'bx bx-x error-dismiss-button'}
62
+ <i
63
+ className="icon-button icon-button-dark error-dismiss-button"
63
64
  onClick={handleCloseClick}
64
- ></div>
65
+ >
66
+ <CloseSVG />
67
+ </i>
65
68
  ) : null}
66
69
  </div>
67
70
  ) : null;
package/src/client/CodeErrorOverlay/style.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  .vz-code-error-overlay {
2
- color: rgb(255, 35, 35);
3
-
4
- background-color: rgba(0, 0, 0, 0.9);
2
+ color: var(--vh-color-neutral-04);
3
+ background: var(--vh-color-neutral-01);
4
+ opacity: 0.9;
5
+ border-left: 4px solid var(--vh-color-warning-01);
5
6
  position: absolute;
6
7
  bottom: 0;
7
8
  left: 0;
8
9
  right: 0;
9
- // pointer-events: none;
10
10
  margin: 0;
11
- padding: 8px 12px;
12
- border-top-left-radius: 12px;
13
- border-top-right-radius: 12px;
11
+ padding: 12px 16px;
12
+ border-top-left-radius: 4px;
13
+ border-top-right-radius: 4px;
14
14
 
15
15
  /* Add a box shadow for a subtle effect */
16
16
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
@@ -19,6 +19,7 @@
19
19
  pre {
20
20
  font-family: var(--vzcode-font-family);
21
21
  font-size: var(--vzcode-font-size);
22
+ margin: 0;
22
23
  }
23
24
 
24
25
  /* Customize the dismiss button style */
@@ -26,16 +27,5 @@
26
27
  position: absolute;
27
28
  top: 5px; /* Adjust the top position */
28
29
  right: 5px; /* Adjust the right position */
29
- margin: 0;
30
- padding: 5px; /* Adjust padding for the button */
31
- cursor: pointer;
32
- color: white;
33
- background-color: #ff5733; /* Change the button's background color */
34
- border-radius: 50%; /* Make it circular */
35
- }
36
-
37
- /* Style the button on hover */
38
- .error-dismiss-button:hover {
39
- background-color: #ff826d; /* Change the background color on hover */
40
30
  }
41
31
  }
package/src/client/Icons/CloseSVG.tsx CHANGED
@@ -9,7 +9,7 @@ export const CloseSVG = () => {
9
9
  >
10
10
  <path
11
11
  d="M6 18L18 6M6 6L18 18"
12
- stroke="#576786"
12
+ stroke="currentColor"
13
13
  strokeWidth="1.5"
14
14
  strokeLinecap="round"
15
15
  strokeLinejoin="round"
package/src/client/Icons/SparklesSVG.tsx CHANGED
@@ -1,31 +1,17 @@
1
1
  export const SparklesSVG = () => (
2
2
  <svg
3
3
  xmlns="http://www.w3.org/2000/svg"
4
- width="24"
5
- height="24"
4
+ width="32"
5
+ height="32"
6
6
  viewBox="0 0 24 24"
7
- fill="none"
7
+ fill="currentColor"
8
+ stroke="currentColor"
9
+ strokeWidth="1.5"
10
+ strokeLinecap="round"
11
+ strokeLinejoin="round"
8
12
  >
9
- <path
10
- d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z"
11
- stroke="currentColor"
12
- strokeWidth="1.5"
13
- strokeLinecap="round"
14
- strokeLinejoin="round"
15
- />
16
- <path
17
- d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- <path
24
- d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z"
25
- stroke="currentColor"
26
- strokeWidth="1.5"
27
- strokeLinecap="round"
28
- strokeLinejoin="round"
29
- />
13
+ <path d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z" />
14
+ <path d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z" />
15
+ <path d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z" />
30
16
  </svg>
31
17
  );
package/src/client/TabList/Tab.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useCallback, useMemo } from 'react';
2
2
  import type { FileId } from '../../types';
3
3
  import type { TabState } from '../vzReducer';
4
+ import { CloseSVG } from '../Icons';
4
5
 
5
6
  // Supports adding the file's containing folder to the tab name
6
7
  const fileNameSplit = (fileName: string) => {
@@ -61,10 +62,12 @@ export const Tab = ({
61
62
  onDoubleClick={handleDoubleClick}
62
63
  >
63
64
  {tabName}
64
- <div
65
- className={'bx bx-x tab-close'}
65
+ <i
66
+ className="icon-button icon-button-dark"
66
67
  onClick={handleCloseClick}
67
- ></div>
68
+ >
69
+ <CloseSVG />
70
+ </i>
68
71
  </div>
69
72
  );
70
73
  };
package/src/client/TabList/style.scss CHANGED
@@ -11,11 +11,10 @@
11
11
  font-weight: 500;
12
12
  align-items: center;
13
13
  display: flex;
14
- padding-top: 2px;
15
- padding-left: 8px;
16
- padding-right: 5px;
17
- border-top-left-radius: 12px;
18
- border-top-right-radius: 12px;
14
+ gap: 8px;
15
+ padding: 8px 8px 8px 16px;
16
+ border-top-left-radius: 4px;
17
+ border-top-right-radius: 4px;
19
18
  margin-top: 5px;
20
19
  margin-left: 2px;
21
20
  margin-right: 2px;
@@ -23,16 +22,6 @@
23
22
  // Make sure text doesn't wrap within tabs.
24
23
  white-space: nowrap;
25
24
 
26
- // TODO unify with styles in code error overlay dismiss button
27
- .tab-close {
28
- margin-left: 5px;
29
- margin-bottom: 2px;
30
- }
31
- .tab-close:hover {
32
- border-radius: 50%;
33
- background-color: rgba(255, 255, 255, 0.2);
34
- }
35
-
36
25
  // No left margin for first child
37
26
  &:first-child {
38
27
  margin-left: 0;
@@ -40,7 +29,8 @@
40
29
 
41
30
  // on hover
42
31
  &:hover {
43
- background-color: #47546b;
32
+ // background-color: var(--vh-color-hover-dark);
33
+ background-color: rgba(255, 255, 255, 0.075);
44
34
  }
45
35
  }
46
36
 
@@ -51,4 +41,11 @@
51
41
  .tab.transient {
52
42
  font-style: italic;
53
43
  }
44
+
45
+ .icon-button {
46
+ color: var(--vh-color-neutral-03);
47
+ }
48
+ .icon-button:hover {
49
+ color: var(--vh-color-action-03);
50
+ }
54
51
  }
package/src/client/VZSidebar/Item.tsx CHANGED
@@ -177,7 +177,7 @@ export const Item = ({
177
177
  >
178
178
  <i
179
179
  onClick={handleRenameIconClick}
180
- className="icon-button"
180
+ className="icon-button icon-button-dark"
181
181
  >
182
182
  <EditSVG />
183
183
  </i>
@@ -193,7 +193,7 @@ export const Item = ({
193
193
  >
194
194
  <i
195
195
  onClick={handleModalOpen}
196
- className="icon-button"
196
+ className="icon-button icon-button-dark"
197
197
  >
198
198
  <TrashSVG />
199
199
  </i>
package/src/client/VZSidebar/index.tsx CHANGED
@@ -165,7 +165,7 @@ export const VZSidebar = ({
165
165
  target="_blank"
166
166
  rel="noopener noreferrer"
167
167
  >
168
- <i className="icon-button">
168
+ <i className="icon-button icon-button-dark">
169
169
  <BugSVG />
170
170
  </i>
171
171
  </a>
@@ -181,7 +181,7 @@ export const VZSidebar = ({
181
181
  >
182
182
  <i
183
183
  onClick={handleSettingsClick}
184
- className="icon-button"
184
+ className="icon-button icon-button-dark"
185
185
  >
186
186
  <GearSVG />
187
187
  </i>
@@ -197,7 +197,7 @@ export const VZSidebar = ({
197
197
  >
198
198
  <i
199
199
  onClick={handleCreateFile}
200
- className="icon-button"
200
+ className="icon-button icon-button-dark"
201
201
  >
202
202
  <NewSVG />
203
203
  </i>
package/src/client/VZSidebar/styles.scss CHANGED
@@ -6,26 +6,13 @@
6
6
  flex-direction: column;
7
7
  justify-content: space-between;
8
8
 
9
- .icon-button {
10
- padding: 4px;
11
- border-radius: 4px;
12
- /* These are required to center the icon */
13
- display: flex;
14
- align-items: center;
15
- justify-content: center;
16
- cursor: pointer;
17
- }
18
-
19
- .icon-button:hover {
20
- background-color: rgba(255, 255, 255, 0.2);
21
- }
22
-
23
9
  .full-box {
24
10
  padding: 4px;
25
11
  display: flex;
26
12
  flex-direction: row;
27
13
  align-items: center;
28
14
  justify-content: space-between;
15
+ border-bottom: 2px solid var(--vh-color-neutral-02);
29
16
  }
30
17
 
31
18
  .files {
@@ -79,7 +66,8 @@
79
66
 
80
67
  .file-or-directory:hover,
81
68
  .settings:hover {
82
- background-color: #47546b;
69
+ // background-color: #47546b;
70
+ background-color: rgba(255, 255, 255, 0.075);
83
71
  }
84
72
 
85
73
  .active-file,