@jotx-labs/editor 2.4.187 → 2.4.189

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 (13) hide show
  1. package/dist/bridge/vscode-api.d.ts +3 -0
  2. package/dist/bridge/vscode-api.d.ts.map +1 -1
  3. package/dist/bridge/vscode-api.js +15 -2
  4. package/dist/bridge/vscode-api.js.map +1 -1
  5. package/dist/contexts/NodeManagerContext.d.ts +1 -1
  6. package/dist/contexts/NodeManagerContext.d.ts.map +1 -1
  7. package/dist/styles/DocumentHeader.css +13 -12
  8. package/dist/styles/EditorRibbon.css +10 -10
  9. package/dist/styles/SlashMenu.css +15 -13
  10. package/package.json +1 -1
  11. package/src/styles/DocumentHeader.css +13 -12
  12. package/src/styles/EditorRibbon.css +10 -10
  13. package/src/styles/SlashMenu.css +15 -13
package/dist/bridge/vscode-api.d.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  * VS Code API stub for editor package
3
3
  * This gets replaced by actual vscode API in VS Code context
4
4
  * or by web equivalents in web context
5
+ *
6
+ * IMPORTANT: acquireVsCodeApi() can only be called ONCE per webview.
7
+ * If the host extension already called it, we must reuse that instance.
5
8
  */
6
9
  interface VSCodeAPI {
7
10
  postMessage: (message: any) => void;
package/dist/bridge/vscode-api.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-api.d.ts","sourceRoot":"","sources":["../../src/bridge/vscode-api.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,UAAU,SAAS;IACf,WAAW,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACjC;AAID,wBAAgB,YAAY,IAAI,SAAS,CAiBxC"}
1
+ {"version":3,"file":"vscode-api.d.ts","sourceRoot":"","sources":["../../src/bridge/vscode-api.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,UAAU,SAAS;IACf,WAAW,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACjC;AAID,wBAAgB,YAAY,IAAI,SAAS,CA6BxC"}
package/dist/bridge/vscode-api.js CHANGED
@@ -3,6 +3,9 @@
3
3
  * VS Code API stub for editor package
4
4
  * This gets replaced by actual vscode API in VS Code context
5
5
  * or by web equivalents in web context
6
+ *
7
+ * IMPORTANT: acquireVsCodeApi() can only be called ONCE per webview.
8
+ * If the host extension already called it, we must reuse that instance.
6
9
  */
7
10
  Object.defineProperty(exports, "__esModule", { value: true });
8
11
  exports.getVSCodeAPI = getVSCodeAPI;
@@ -10,12 +13,22 @@ let vscodeApi = null;
10
13
  function getVSCodeAPI() {
11
14
  if (vscodeApi)
12
15
  return vscodeApi;
13
- // Check if we're in VS Code webview
16
+ // FIRST: Check if the host extension already acquired the API and stored it
17
+ // This is critical - acquireVsCodeApi() can only be called ONCE
18
+ if (typeof window !== 'undefined' && window.vscodeApi) {
19
+ console.log('[Editor] Using pre-acquired VS Code API from window.vscodeApi');
20
+ vscodeApi = window.vscodeApi;
21
+ return vscodeApi;
22
+ }
23
+ // SECOND: We're the first to need it, so acquire it ourselves
14
24
  if (typeof window !== 'undefined' && window.acquireVsCodeApi) {
25
+ console.log('[Editor] Acquiring VS Code API for the first time');
15
26
  vscodeApi = window.acquireVsCodeApi();
27
+ window.vscodeApi = vscodeApi;
16
28
  return vscodeApi;
17
29
  }
18
- // Fallback for non-VS Code environments
30
+ // Fallback for non-VS Code environments (web app)
31
+ console.log('[Editor] Using fallback postMessage (non-VS Code environment)');
19
32
  return {
20
33
  postMessage: (message) => {
21
34
  console.log('[Editor] postMessage (non-VS Code):', message);
package/dist/bridge/vscode-api.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-api.js","sourceRoot":"","sources":["../../src/bridge/vscode-api.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,oCAiBC;AAnBD,IAAI,SAAS,GAAqB,IAAI,CAAA;AAEtC,SAAgB,YAAY;IACxB,IAAI,SAAS;QAAE,OAAO,SAAS,CAAA;IAE/B,oCAAoC;IACpC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,gBAAgB,EAAE,CAAC;QACpE,SAAS,GAAI,MAAc,CAAC,gBAAgB,EAAE,CAAA;QAC9C,OAAO,SAAU,CAAA;IACrB,CAAC;IAED,wCAAwC;IACxC,OAAO;QACH,WAAW,EAAE,CAAC,OAAY,EAAE,EAAE;YAC1B,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,OAAO,CAAC,CAAA;QAC/D,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACpB,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;KACtB,CAAA;AACL,CAAC"}
1
+ {"version":3,"file":"vscode-api.js","sourceRoot":"","sources":["../../src/bridge/vscode-api.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;AAUH,oCA6BC;AA/BD,IAAI,SAAS,GAAqB,IAAI,CAAA;AAEtC,SAAgB,YAAY;IACxB,IAAI,SAAS;QAAE,OAAO,SAAS,CAAA;IAE/B,4EAA4E;IAC5E,gEAAgE;IAChE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,SAAS,EAAE,CAAC;QAC7D,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAA;QAC5E,SAAS,GAAI,MAAc,CAAC,SAAS,CAAA;QACrC,OAAO,SAAU,CAAA;IACrB,CAAC;IAED,8DAA8D;IAC9D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,gBAAgB,EAAE,CAAC;QACpE,OAAO,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAA;QAChE,SAAS,GAAI,MAAc,CAAC,gBAAgB,EAAE,CAEzC;QAAE,MAAc,CAAC,SAAS,GAAG,SAAS,CAAA;QAC3C,OAAO,SAAU,CAAA;IACrB,CAAC;IAED,kDAAkD;IAClD,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAA;IAC5E,OAAO;QACH,WAAW,EAAE,CAAC,OAAY,EAAE,EAAE;YAC1B,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,OAAO,CAAC,CAAA;QAC/D,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACpB,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;KACtB,CAAA;AACL,CAAC"}
package/dist/contexts/NodeManagerContext.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface JotxNode {
8
8
  shortId?: string;
9
9
  title: string;
10
10
  path: string;
11
- type: 'page' | 'folder' | 'block';
11
+ type: string;
12
12
  children?: JotxNode[];
13
13
  file?: string;
14
14
  }
package/dist/contexts/NodeManagerContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NodeManagerContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeManagerContext.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACjC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IACjD,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IACrD,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,KAAK,QAAQ,GAAG,SAAS,CAAA;IACzE,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAA;IAC5C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAA;IAC1C,WAAW,EAAE,MAAM,QAAQ,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,QAAQ,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,QAAQ,EAAE,CAAA;CACjC;AAeD,eAAO,MAAM,kBAAkB,4BAAiD,CAAA;AAEhF,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAMlF"}
1
+ {"version":3,"file":"NodeManagerContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeManagerContext.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IACjD,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,QAAQ,GAAG,SAAS,CAAA;IACrD,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,KAAK,QAAQ,GAAG,SAAS,CAAA;IACzE,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAA;IAC5C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAA;IAC1C,WAAW,EAAE,MAAM,QAAQ,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,QAAQ,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,QAAQ,EAAE,CAAA;CACjC;AAeD,eAAO,MAAM,kBAAkB,4BAAiD,CAAA;AAEhF,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAMlF"}
package/dist/styles/DocumentHeader.css CHANGED
@@ -8,7 +8,7 @@
8
8
  top: 0;
9
9
  left: 0;
10
10
  right: 0;
11
- z-index: 100;
11
+ z-index: 1000;
12
12
  display: flex;
13
13
  align-items: center;
14
14
  justify-content: space-between;
@@ -89,12 +89,13 @@
89
89
  top: 100%;
90
90
  left: 0;
91
91
  margin-top: 4px;
92
- background: hsl(var(--popover));
93
- border: 1px solid hsl(var(--border));
92
+ /* Solid background with fallbacks */
93
+ background: hsl(var(--popover, 220 15% 13%));
94
+ border: 1px solid hsl(var(--border, 220 10% 25%));
94
95
  border-radius: 8px;
95
- box-shadow: var(--shadow-md);
96
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
96
97
  width: 200px;
97
- z-index: 200;
98
+ z-index: 9999;
98
99
  overflow: hidden;
99
100
  }
100
101
 
@@ -102,9 +103,9 @@
102
103
  padding: 8px 12px;
103
104
  font-size: 11px;
104
105
  font-weight: 600;
105
- color: hsl(var(--muted-foreground));
106
- border-bottom: 1px solid hsl(var(--border));
107
- background: hsl(var(--muted) / 0.5);
106
+ color: hsl(var(--muted-foreground, 220 8% 55%));
107
+ border-bottom: 1px solid hsl(var(--border, 220 10% 25%));
108
+ background: hsl(var(--muted, 220 12% 18%) / 0.5);
108
109
  text-transform: uppercase;
109
110
  letter-spacing: 0.5px;
110
111
  }
@@ -121,7 +122,7 @@
121
122
  width: 100%;
122
123
  border: none;
123
124
  background: transparent;
124
- color: hsl(var(--foreground));
125
+ color: hsl(var(--foreground, 0 0% 95%));
125
126
  font-size: 13px;
126
127
  text-align: left;
127
128
  cursor: pointer;
@@ -130,12 +131,12 @@
130
131
  }
131
132
 
132
133
  .jotx-type-menu-item:hover {
133
- background: hsl(var(--muted));
134
+ background: hsl(var(--muted, 220 12% 18%));
134
135
  }
135
136
 
136
137
  .jotx-type-menu-item.active {
137
- background: hsl(var(--accent));
138
- color: hsl(var(--accent-foreground));
138
+ background: hsl(var(--accent, 173 80% 40%));
139
+ color: hsl(var(--accent-foreground, 0 0% 100%));
139
140
  }
140
141
 
141
142
  /* Title */
package/dist/styles/EditorRibbon.css CHANGED
@@ -8,14 +8,14 @@
8
8
  margin: -40px -40px 0 -40px;
9
9
  padding: 0;
10
10
 
11
- /* Visual styling - Knowledge Hub compatible */
12
- background: hsl(var(--background));
13
- border-bottom: 1px solid hsl(var(--border));
11
+ /* Visual styling - Knowledge Hub compatible with VS Code fallbacks */
12
+ background: hsl(var(--background, 220 15% 13%));
13
+ border-bottom: 1px solid hsl(var(--border, 220 10% 25%));
14
14
 
15
15
  /* Sticky when scrolling */
16
16
  position: sticky;
17
17
  top: 0;
18
- z-index: 90;
18
+ z-index: 900;
19
19
 
20
20
  /* Smooth slide animation */
21
21
  max-height: 0;
@@ -43,7 +43,7 @@
43
43
  .editor-ribbon-separator {
44
44
  width: 1px;
45
45
  height: 24px;
46
- background: hsl(var(--border));
46
+ background: hsl(var(--border, 220 10% 25%));
47
47
  flex-shrink: 0;
48
48
  }
49
49
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  .editor-ribbon-section-label {
59
59
  font-size: 10px;
60
- color: hsl(var(--muted-foreground));
60
+ color: hsl(var(--muted-foreground, 220 8% 55%));
61
61
  text-transform: uppercase;
62
62
  letter-spacing: 0.5px;
63
63
  margin-right: 6px;
@@ -76,18 +76,18 @@
76
76
  border: none;
77
77
  border-radius: 4px;
78
78
  background: transparent;
79
- color: hsl(var(--foreground));
79
+ color: hsl(var(--foreground, 0 0% 95%));
80
80
  cursor: pointer;
81
81
  transition: background 0.1s, color 0.1s, opacity 0.1s;
82
82
  flex-shrink: 0;
83
83
  }
84
84
 
85
85
  .editor-ribbon-btn:hover:not(:disabled) {
86
- background: hsl(var(--muted));
86
+ background: hsl(var(--muted, 220 12% 18%));
87
87
  }
88
88
 
89
89
  .editor-ribbon-btn:active:not(:disabled) {
90
- background: hsl(var(--accent) / 0.2);
90
+ background: hsl(var(--accent, 173 80% 40%) / 0.2);
91
91
  }
92
92
 
93
93
  /* Teal branding for active state */
@@ -107,7 +107,7 @@
107
107
  display: flex;
108
108
  align-items: center;
109
109
  gap: 1px;
110
- background: hsl(var(--muted));
110
+ background: hsl(var(--muted, 220 12% 18%));
111
111
  border-radius: 4px;
112
112
  padding: 2px;
113
113
  }
package/dist/styles/SlashMenu.css CHANGED
@@ -6,11 +6,13 @@
6
6
  position: fixed;
7
7
  min-width: 320px;
8
8
  max-width: 400px;
9
- background-color: var(--jotx-background);
10
- border: 1px solid var(--jotx-border);
9
+ /* Use shadcn variables with fallbacks for VS Code webview */
10
+ background-color: var(--jotx-background, hsl(var(--popover, 220 15% 13%)));
11
+ border: 1px solid var(--jotx-border, hsl(var(--border, 220 10% 25%)));
11
12
  border-radius: 8px;
12
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
13
- z-index: 1000;
13
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
14
+ z-index: 10000;
15
+ /* Very high to ensure it's above everything */
14
16
  overflow: hidden;
15
17
  animation: slideIn 0.15s ease-out;
16
18
  }
@@ -20,6 +22,7 @@
20
22
  opacity: 0;
21
23
  transform: translateY(-8px) scale(0.96);
22
24
  }
25
+
23
26
  to {
24
27
  opacity: 1;
25
28
  transform: translateY(0) scale(1);
@@ -32,9 +35,9 @@
32
35
  font-weight: 600;
33
36
  text-transform: uppercase;
34
37
  letter-spacing: 0.5px;
35
- color: var(--jotx-textSecondary);
36
- background-color: var(--jotx-backgroundSecondary);
37
- border-bottom: 1px solid var(--jotx-border);
38
+ color: var(--jotx-textSecondary, hsl(var(--muted-foreground, 220 8% 55%)));
39
+ background-color: var(--jotx-backgroundSecondary, hsl(var(--muted, 220 12% 18%)));
40
+ border-bottom: 1px solid var(--jotx-border, hsl(var(--border, 220 10% 25%)));
38
41
  }
39
42
 
40
43
  .jotx-slash-menu-items {
@@ -72,11 +75,11 @@
72
75
 
73
76
  .jotx-slash-menu-item:hover,
74
77
  .jotx-slash-menu-item.selected {
75
- background-color: var(--jotx-backgroundSecondary);
78
+ background-color: var(--jotx-backgroundSecondary, hsl(var(--muted, 220 12% 18%)));
76
79
  }
77
80
 
78
81
  .jotx-slash-menu-item.selected {
79
- box-shadow: inset 0 0 0 1px var(--jotx-primary);
82
+ box-shadow: inset 0 0 0 1px var(--jotx-primary, #14b8a6);
80
83
  }
81
84
 
82
85
  .jotx-slash-menu-icon {
@@ -94,13 +97,13 @@
94
97
  .jotx-slash-menu-label {
95
98
  font-size: 14px;
96
99
  font-weight: 500;
97
- color: var(--jotx-text);
100
+ color: var(--jotx-text, hsl(var(--foreground, 0 0% 95%)));
98
101
  margin-bottom: 2px;
99
102
  }
100
103
 
101
104
  .jotx-slash-menu-description {
102
105
  font-size: 12px;
103
- color: var(--jotx-textSecondary);
106
+ color: var(--jotx-textSecondary, hsl(var(--muted-foreground, 220 8% 55%)));
104
107
  line-height: 1.4;
105
108
  }
106
109
 
@@ -131,5 +134,4 @@
131
134
  text-align: center;
132
135
  font-size: 13px;
133
136
  color: var(--jotx-textSecondary);
134
- }
135
-
137
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.187",
3
+ "version": "2.4.189",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/DocumentHeader.css CHANGED
@@ -8,7 +8,7 @@
8
8
  top: 0;
9
9
  left: 0;
10
10
  right: 0;
11
- z-index: 100;
11
+ z-index: 1000;
12
12
  display: flex;
13
13
  align-items: center;
14
14
  justify-content: space-between;
@@ -89,12 +89,13 @@
89
89
  top: 100%;
90
90
  left: 0;
91
91
  margin-top: 4px;
92
- background: hsl(var(--popover));
93
- border: 1px solid hsl(var(--border));
92
+ /* Solid background with fallbacks */
93
+ background: hsl(var(--popover, 220 15% 13%));
94
+ border: 1px solid hsl(var(--border, 220 10% 25%));
94
95
  border-radius: 8px;
95
- box-shadow: var(--shadow-md);
96
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
96
97
  width: 200px;
97
- z-index: 200;
98
+ z-index: 9999;
98
99
  overflow: hidden;
99
100
  }
100
101
 
@@ -102,9 +103,9 @@
102
103
  padding: 8px 12px;
103
104
  font-size: 11px;
104
105
  font-weight: 600;
105
- color: hsl(var(--muted-foreground));
106
- border-bottom: 1px solid hsl(var(--border));
107
- background: hsl(var(--muted) / 0.5);
106
+ color: hsl(var(--muted-foreground, 220 8% 55%));
107
+ border-bottom: 1px solid hsl(var(--border, 220 10% 25%));
108
+ background: hsl(var(--muted, 220 12% 18%) / 0.5);
108
109
  text-transform: uppercase;
109
110
  letter-spacing: 0.5px;
110
111
  }
@@ -121,7 +122,7 @@
121
122
  width: 100%;
122
123
  border: none;
123
124
  background: transparent;
124
- color: hsl(var(--foreground));
125
+ color: hsl(var(--foreground, 0 0% 95%));
125
126
  font-size: 13px;
126
127
  text-align: left;
127
128
  cursor: pointer;
@@ -130,12 +131,12 @@
130
131
  }
131
132
 
132
133
  .jotx-type-menu-item:hover {
133
- background: hsl(var(--muted));
134
+ background: hsl(var(--muted, 220 12% 18%));
134
135
  }
135
136
 
136
137
  .jotx-type-menu-item.active {
137
- background: hsl(var(--accent));
138
- color: hsl(var(--accent-foreground));
138
+ background: hsl(var(--accent, 173 80% 40%));
139
+ color: hsl(var(--accent-foreground, 0 0% 100%));
139
140
  }
140
141
 
141
142
  /* Title */
package/src/styles/EditorRibbon.css CHANGED
@@ -8,14 +8,14 @@
8
8
  margin: -40px -40px 0 -40px;
9
9
  padding: 0;
10
10
 
11
- /* Visual styling - Knowledge Hub compatible */
12
- background: hsl(var(--background));
13
- border-bottom: 1px solid hsl(var(--border));
11
+ /* Visual styling - Knowledge Hub compatible with VS Code fallbacks */
12
+ background: hsl(var(--background, 220 15% 13%));
13
+ border-bottom: 1px solid hsl(var(--border, 220 10% 25%));
14
14
 
15
15
  /* Sticky when scrolling */
16
16
  position: sticky;
17
17
  top: 0;
18
- z-index: 90;
18
+ z-index: 900;
19
19
 
20
20
  /* Smooth slide animation */
21
21
  max-height: 0;
@@ -43,7 +43,7 @@
43
43
  .editor-ribbon-separator {
44
44
  width: 1px;
45
45
  height: 24px;
46
- background: hsl(var(--border));
46
+ background: hsl(var(--border, 220 10% 25%));
47
47
  flex-shrink: 0;
48
48
  }
49
49
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  .editor-ribbon-section-label {
59
59
  font-size: 10px;
60
- color: hsl(var(--muted-foreground));
60
+ color: hsl(var(--muted-foreground, 220 8% 55%));
61
61
  text-transform: uppercase;
62
62
  letter-spacing: 0.5px;
63
63
  margin-right: 6px;
@@ -76,18 +76,18 @@
76
76
  border: none;
77
77
  border-radius: 4px;
78
78
  background: transparent;
79
- color: hsl(var(--foreground));
79
+ color: hsl(var(--foreground, 0 0% 95%));
80
80
  cursor: pointer;
81
81
  transition: background 0.1s, color 0.1s, opacity 0.1s;
82
82
  flex-shrink: 0;
83
83
  }
84
84
 
85
85
  .editor-ribbon-btn:hover:not(:disabled) {
86
- background: hsl(var(--muted));
86
+ background: hsl(var(--muted, 220 12% 18%));
87
87
  }
88
88
 
89
89
  .editor-ribbon-btn:active:not(:disabled) {
90
- background: hsl(var(--accent) / 0.2);
90
+ background: hsl(var(--accent, 173 80% 40%) / 0.2);
91
91
  }
92
92
 
93
93
  /* Teal branding for active state */
@@ -107,7 +107,7 @@
107
107
  display: flex;
108
108
  align-items: center;
109
109
  gap: 1px;
110
- background: hsl(var(--muted));
110
+ background: hsl(var(--muted, 220 12% 18%));
111
111
  border-radius: 4px;
112
112
  padding: 2px;
113
113
  }
package/src/styles/SlashMenu.css CHANGED
@@ -6,11 +6,13 @@
6
6
  position: fixed;
7
7
  min-width: 320px;
8
8
  max-width: 400px;
9
- background-color: var(--jotx-background);
10
- border: 1px solid var(--jotx-border);
9
+ /* Use shadcn variables with fallbacks for VS Code webview */
10
+ background-color: var(--jotx-background, hsl(var(--popover, 220 15% 13%)));
11
+ border: 1px solid var(--jotx-border, hsl(var(--border, 220 10% 25%)));
11
12
  border-radius: 8px;
12
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
13
- z-index: 1000;
13
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
14
+ z-index: 10000;
15
+ /* Very high to ensure it's above everything */
14
16
  overflow: hidden;
15
17
  animation: slideIn 0.15s ease-out;
16
18
  }
@@ -20,6 +22,7 @@
20
22
  opacity: 0;
21
23
  transform: translateY(-8px) scale(0.96);
22
24
  }
25
+
23
26
  to {
24
27
  opacity: 1;
25
28
  transform: translateY(0) scale(1);
@@ -32,9 +35,9 @@
32
35
  font-weight: 600;
33
36
  text-transform: uppercase;
34
37
  letter-spacing: 0.5px;
35
- color: var(--jotx-textSecondary);
36
- background-color: var(--jotx-backgroundSecondary);
37
- border-bottom: 1px solid var(--jotx-border);
38
+ color: var(--jotx-textSecondary, hsl(var(--muted-foreground, 220 8% 55%)));
39
+ background-color: var(--jotx-backgroundSecondary, hsl(var(--muted, 220 12% 18%)));
40
+ border-bottom: 1px solid var(--jotx-border, hsl(var(--border, 220 10% 25%)));
38
41
  }
39
42
 
40
43
  .jotx-slash-menu-items {
@@ -72,11 +75,11 @@
72
75
 
73
76
  .jotx-slash-menu-item:hover,
74
77
  .jotx-slash-menu-item.selected {
75
- background-color: var(--jotx-backgroundSecondary);
78
+ background-color: var(--jotx-backgroundSecondary, hsl(var(--muted, 220 12% 18%)));
76
79
  }
77
80
 
78
81
  .jotx-slash-menu-item.selected {
79
- box-shadow: inset 0 0 0 1px var(--jotx-primary);
82
+ box-shadow: inset 0 0 0 1px var(--jotx-primary, #14b8a6);
80
83
  }
81
84
 
82
85
  .jotx-slash-menu-icon {
@@ -94,13 +97,13 @@
94
97
  .jotx-slash-menu-label {
95
98
  font-size: 14px;
96
99
  font-weight: 500;
97
- color: var(--jotx-text);
100
+ color: var(--jotx-text, hsl(var(--foreground, 0 0% 95%)));
98
101
  margin-bottom: 2px;
99
102
  }
100
103
 
101
104
  .jotx-slash-menu-description {
102
105
  font-size: 12px;
103
- color: var(--jotx-textSecondary);
106
+ color: var(--jotx-textSecondary, hsl(var(--muted-foreground, 220 8% 55%)));
104
107
  line-height: 1.4;
105
108
  }
106
109
 
@@ -131,5 +134,4 @@
131
134
  text-align: center;
132
135
  font-size: 13px;
133
136
  color: var(--jotx-textSecondary);
134
- }
135
-
137
+ }