@jotx-labs/editor 2.4.142 → 2.4.144

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 (9) hide show
  1. package/dist/components/DocumentHeader/ExportMenu.js +1 -1
  2. package/dist/components/DocumentHeader/ExportMenu.js.map +1 -1
  3. package/dist/styles/DocumentHeader.css +163 -205
  4. package/dist/styles/ExportMenu.css +66 -0
  5. package/dist/styles/ViewOptions.css +89 -0
  6. package/package.json +1 -1
  7. package/src/styles/DocumentHeader.css +163 -205
  8. package/src/styles/ExportMenu.css +66 -0
  9. package/src/styles/ViewOptions.css +89 -0
package/dist/components/DocumentHeader/ExportMenu.js CHANGED
@@ -186,7 +186,7 @@ function ExportMenu({ documentId, documentTitle = 'Untitled' }) {
186
186
  setIsExporting(false);
187
187
  }
188
188
  };
189
- return ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-export-menu", ref: menuRef, children: [(0, jsx_runtime_1.jsx)("button", { className: "jotx-header-button", onClick: () => setIsOpen(!isOpen), title: "Download document", disabled: isExporting, children: isExporting ? ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px' }, children: "Exporting..." })) : ((0, jsx_runtime_1.jsx)(Download, { size: 16 })) }), isOpen && !isExporting && ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-export-dropdown", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-export-header", children: "Download as" }), (0, jsx_runtime_1.jsxs)("button", { className: "jotx-export-item", onClick: exportPDF, title: "Export to PDF", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileDown, { size: 16 }), (0, jsx_runtime_1.jsx)("span", { children: "PDF Document" }), (0, jsx_runtime_1.jsx)("span", { className: "jotx-export-badge", children: ".pdf" })] }), (0, jsx_runtime_1.jsxs)("button", { className: "jotx-export-item", onClick: exportMarkdown, title: "Export to Markdown", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 16 }), (0, jsx_runtime_1.jsx)("span", { children: "Markdown" }), (0, jsx_runtime_1.jsx)("span", { className: "jotx-export-badge", children: ".md" })] })] }))] }));
189
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-export-menu", ref: menuRef, children: [(0, jsx_runtime_1.jsx)("button", { className: "jotx-header-button", onClick: () => setIsOpen(!isOpen), title: "Download document", disabled: isExporting, children: isExporting ? ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px' }, children: "Exporting..." })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 })) }), isOpen && !isExporting && ((0, jsx_runtime_1.jsxs)("div", { className: "jotx-export-dropdown", children: [(0, jsx_runtime_1.jsx)("div", { className: "jotx-export-header", children: "Download as" }), (0, jsx_runtime_1.jsxs)("button", { className: "jotx-export-item", onClick: exportPDF, title: "Export to PDF", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileDown, { size: 16 }), (0, jsx_runtime_1.jsx)("span", { children: "PDF Document" }), (0, jsx_runtime_1.jsx)("span", { className: "jotx-export-badge", children: ".pdf" })] }), (0, jsx_runtime_1.jsxs)("button", { className: "jotx-export-item", onClick: exportMarkdown, title: "Export to Markdown", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 16 }), (0, jsx_runtime_1.jsx)("span", { children: "Markdown" }), (0, jsx_runtime_1.jsx)("span", { className: "jotx-export-badge", children: ".md" })] })] }))] }));
190
190
  }
191
191
  /**
192
192
  * Simple HTML to Markdown converter
package/dist/components/DocumentHeader/ExportMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExportMenu.js","sourceRoot":"","sources":["../../../src/components/DocumentHeader/ExportMenu.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ExportMenu.js","sourceRoot":"","sources":["../../../src/components/DocumentHeader/ExportMenu.tsx"],"names":[],"mappings":"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"}
package/dist/styles/DocumentHeader.css CHANGED
@@ -1,279 +1,209 @@
1
- /**
2
- * Document Header Styles
3
- */
1
+ /* =====================================================
2
+ Document Header Component - Full Styling
3
+ ===================================================== */
4
4
 
5
- .jotx-header {
6
- position: sticky;
7
- /* Sit below the tabs bar (web) so header never covers tabs */
8
- top: var(--jotx-tabs-height, 40px);
9
- left: 0;
10
- right: 0;
11
- z-index: 150;
12
- flex-shrink: 0;
13
- /* Never shrink */
5
+ .jotx-document-header {
14
6
  display: flex;
15
7
  align-items: center;
16
- justify-content: space-between;
17
- height: var(--jotx-header-height, 60px);
18
- padding: 0 24px;
19
- background-color: var(--vscode-editor-background);
8
+ gap: 16px;
9
+ padding: 16px 24px;
10
+ background: var(--vscode-editor-background);
20
11
  border-bottom: 1px solid var(--vscode-panel-border);
21
- backdrop-filter: blur(8px);
22
- /* Critical: ensure it stays on top */
23
- will-change: transform;
24
- }
25
-
26
- .jotx-header-left {
27
- display: flex;
28
- align-items: center;
29
- gap: 12px;
30
- flex: 1;
31
- min-width: 0;
12
+ position: sticky;
13
+ top: 0;
14
+ z-index: 100;
15
+ min-height: 60px;
32
16
  }
33
17
 
34
- .jotx-header-right {
18
+ /* Logo */
19
+ .jotx-logo {
20
+ flex-shrink: 0;
21
+ width: 32px;
22
+ height: 32px;
35
23
  display: flex;
36
24
  align-items: center;
37
- gap: 8px;
25
+ justify-content: center;
38
26
  }
39
27
 
40
- /* Graph Button */
41
- .jotx-header-graph-btn {
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- padding: 8px;
46
- background: transparent;
47
- border: none;
48
- border-radius: 6px;
49
- color: #888;
50
- cursor: pointer;
51
- transition: all 0.2s ease;
28
+ .jotx-logo svg {
29
+ width: 100%;
30
+ height: 100%;
52
31
  }
53
32
 
54
- .jotx-header-graph-btn:hover {
55
- background: rgba(20, 184, 166, 0.1);
56
- color: #14b8a6;
33
+ /* Document Type Dropdown */
34
+ .jotx-document-type {
35
+ position: relative;
36
+ flex-shrink: 0;
57
37
  }
58
38
 
59
- /* Help Button */
60
- .jotx-header-help-btn {
39
+ .jotx-type-button {
61
40
  display: flex;
62
41
  align-items: center;
63
- justify-content: center;
64
- padding: 8px;
65
- background: transparent;
66
- border: none;
67
- border-radius: 6px;
68
- color: #888;
42
+ gap: 6px;
43
+ padding: 6px 10px;
44
+ background: var(--vscode-button-secondaryBackground);
45
+ border: 1px solid var(--vscode-button-border);
46
+ border-radius: 4px;
47
+ color: var(--vscode-button-secondaryForeground);
69
48
  cursor: pointer;
70
- transition: all 0.2s ease;
49
+ font-size: 13px;
50
+ font-weight: 500;
51
+ transition: all 0.15s ease;
71
52
  }
72
53
 
73
- .jotx-header-help-btn:hover {
74
- background: rgba(20, 184, 166, 0.1);
75
- color: #14b8a6;
54
+ .jotx-type-button:hover {
55
+ background: var(--vscode-button-secondaryHoverBackground);
76
56
  }
77
57
 
78
- /* Logo */
79
- .jotx-header-logo {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- width: var(--jotx-header-logoSize, 32px);
84
- height: var(--jotx-header-logoSize, 32px);
58
+ .jotx-type-button svg {
85
59
  flex-shrink: 0;
86
- color: #20B2AA;
87
- transition: color 0.2s ease;
88
- }
89
-
90
- .jotx-header-logo:hover {
91
- color: #40E0D0;
92
- }
93
-
94
- .jotx-header-logo-svg {
95
- display: block;
96
60
  }
97
61
 
98
- .jotx-header-logo-img {
99
- width: 100%;
100
- height: 100%;
101
- object-fit: contain;
62
+ .jotx-type-menu {
63
+ position: absolute;
64
+ top: calc(100% + 4px);
65
+ left: 0;
66
+ background: var(--vscode-dropdown-background);
67
+ border: 1px solid var(--vscode-dropdown-border);
102
68
  border-radius: 4px;
69
+ padding: 4px;
70
+ min-width: 200px;
71
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
72
+ z-index: 1000;
103
73
  }
104
74
 
105
- .jotx-header-icon {
106
- font-size: 24px;
107
- line-height: 1;
108
- }
109
-
110
- .jotx-header-icon-svg {
111
- display: flex;
112
- align-items: center;
113
- justify-content: center;
114
- color: var(--jotx-primary);
115
- }
116
-
117
- /* Type Selector (was Badge) */
118
- .jotx-header-type-container {
119
- position: relative;
120
- }
121
-
122
- .jotx-header-type-button {
75
+ .jotx-type-item {
123
76
  display: flex;
124
77
  align-items: center;
125
- gap: 6px;
126
- padding: 4px 8px;
78
+ gap: 10px;
79
+ padding: 8px 12px;
80
+ width: 100%;
81
+ background: transparent;
127
82
  border: none;
128
- background: var(--jotx-backgroundSecondary);
129
- border-radius: 4px;
83
+ border-radius: 3px;
84
+ color: var(--vscode-foreground);
130
85
  cursor: pointer;
131
- transition: all 0.2s;
132
- color: var(--jotx-textSecondary);
86
+ font-size: 13px;
87
+ transition: background-color 0.15s ease;
88
+ text-align: left;
133
89
  }
134
90
 
135
- .jotx-header-type-button:hover {
136
- background: var(--jotx-border);
137
- color: var(--jotx-text);
91
+ .jotx-type-item:hover {
92
+ background: var(--vscode-list-hoverBackground);
138
93
  }
139
94
 
140
- .jotx-header-type-label {
141
- font-size: 13px;
142
- font-weight: 500;
95
+ .jotx-type-item.active {
96
+ background: var(--vscode-list-activeSelectionBackground);
97
+ color: var(--vscode-list-activeSelectionForeground);
143
98
  }
144
99
 
145
- .jotx-header-type-icon {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
100
+ .jotx-type-item svg {
101
+ flex-shrink: 0;
149
102
  }
150
103
 
151
- .jotx-header-type-chevron {
152
- opacity: 0.5;
104
+ .jotx-type-item-details {
105
+ flex: 1;
153
106
  }
154
107
 
155
- /* Dropdown Menu */
156
- .jotx-header-type-menu {
157
- position: absolute;
158
- top: 100%;
159
- left: 0;
160
- margin-top: 4px;
161
- background: var(--jotx-background);
162
- border: 1px solid var(--jotx-border);
163
- border-radius: 6px;
164
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
165
- width: 180px;
166
- z-index: 200;
167
- overflow: hidden;
168
- display: flex;
169
- flex-direction: column;
108
+ .jotx-type-item-name {
109
+ font-weight: 500;
110
+ margin-bottom: 2px;
170
111
  }
171
112
 
172
- .jotx-type-menu-header {
173
- padding: 8px 12px;
113
+ .jotx-type-item-description {
174
114
  font-size: 11px;
175
- font-weight: 600;
176
- color: var(--jotx-textSecondary);
177
- border-bottom: 1px solid var(--jotx-border);
178
- background: var(--jotx-backgroundSecondary);
179
- text-transform: uppercase;
180
- letter-spacing: 0.5px;
115
+ color: var(--vscode-descriptionForeground);
181
116
  }
182
117
 
183
- .jotx-type-menu-list {
184
- padding: 4px;
185
- max-height: 300px;
186
- overflow-y: auto;
118
+ /* Title Input */
119
+ .jotx-title-container {
120
+ flex: 1;
121
+ min-width: 0;
187
122
  }
188
123
 
189
- .jotx-type-menu-item {
190
- display: flex;
191
- align-items: center;
192
- gap: 8px;
193
- padding: 6px 8px;
124
+ .jotx-title-input {
194
125
  width: 100%;
195
- border: none;
126
+ padding: 8px 12px;
196
127
  background: transparent;
197
- color: var(--jotx-text);
198
- font-size: 13px;
199
- text-align: left;
200
- cursor: pointer;
128
+ border: 1px solid transparent;
201
129
  border-radius: 4px;
202
- transition: background 0.15s;
130
+ color: var(--vscode-editor-foreground);
131
+ font-size: 18px;
132
+ font-weight: 600;
133
+ font-family: var(--vscode-font-family);
134
+ outline: none;
135
+ transition: all 0.15s ease;
203
136
  }
204
137
 
205
- .jotx-type-menu-item:hover {
206
- background: var(--jotx-backgroundSecondary);
138
+ .jotx-title-input:hover {
139
+ background: var(--vscode-input-background);
140
+ border-color: var(--vscode-input-border);
207
141
  }
208
142
 
209
- .jotx-type-menu-item.active {
210
- background: rgba(32, 178, 170, 0.2);
211
- color: #20B2AA;
212
- font-weight: 600;
143
+ .jotx-title-input:focus {
144
+ background: var(--vscode-input-background);
145
+ border-color: var(--vscode-focusBorder);
213
146
  }
214
147
 
215
- /* Title */
216
- .jotx-header-title-container {
217
- flex: 1;
218
- min-width: 0;
148
+ .jotx-title-input::placeholder {
149
+ color: var(--vscode-input-placeholderForeground);
150
+ }
151
+
152
+ /* Metadata Section */
153
+ .jotx-metadata {
154
+ display: flex;
155
+ align-items: center;
156
+ gap: 12px;
157
+ margin-top: 4px;
158
+ font-size: 12px;
159
+ color: var(--vscode-descriptionForeground);
219
160
  }
220
161
 
221
- .jotx-header-title {
222
- margin: 0;
223
- font-size: var(--jotx-header-titleSize, 18px);
224
- font-weight: var(--jotx-header-titleWeight, 600);
225
- color: var(--jotx-text);
226
- cursor: text;
227
- white-space: nowrap;
228
- overflow: hidden;
229
- text-overflow: ellipsis;
230
- transition: opacity 0.2s;
162
+ .jotx-metadata-item {
163
+ display: flex;
164
+ align-items: center;
165
+ gap: 4px;
231
166
  }
232
167
 
233
- .jotx-header-title:hover {
234
- opacity: 0.7;
168
+ .jotx-metadata-item svg {
169
+ width: 14px;
170
+ height: 14px;
235
171
  }
236
172
 
237
- .jotx-header-title-input {
238
- width: 100%;
239
- padding: 4px 8px;
240
- font-size: var(--jotx-header-titleSize, 18px);
241
- font-weight: var(--jotx-header-titleWeight, 600);
242
- color: var(--jotx-text);
243
- background-color: var(--jotx-backgroundSecondary);
244
- border: 1px solid var(--jotx-primary);
245
- border-radius: 4px;
246
- outline: none;
247
- font-family: inherit;
173
+ /* Action Buttons */
174
+ .jotx-header-actions {
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 4px;
178
+ flex-shrink: 0;
248
179
  }
249
180
 
250
- /* Buttons */
251
181
  .jotx-header-button {
252
- display: flex;
182
+ display: inline-flex;
253
183
  align-items: center;
254
184
  justify-content: center;
255
- width: var(--jotx-header-buttonSize, 36px);
256
- height: var(--jotx-header-buttonSize, 36px);
257
- padding: 0;
258
- color: var(--jotx-textSecondary);
259
- background-color: transparent;
260
- border: none;
261
- border-radius: 6px;
185
+ padding: 6px 10px;
186
+ background: transparent;
187
+ border: 1px solid transparent;
188
+ border-radius: 4px;
189
+ color: var(--vscode-foreground);
262
190
  cursor: pointer;
263
- transition: all 0.2s;
191
+ font-size: 13px;
192
+ transition: all 0.15s ease;
264
193
  }
265
194
 
266
- .jotx-header-button:hover:not(:disabled) {
267
- color: #20B2AA;
268
- background-color: rgba(32, 178, 170, 0.1);
195
+ .jotx-header-button:hover {
196
+ background: var(--vscode-toolbar-hoverBackground);
197
+ border-color: var(--vscode-button-border);
269
198
  }
270
199
 
271
- .jotx-header-button:active:not(:disabled) {
272
- transform: scale(0.95);
200
+ .jotx-header-button:active {
201
+ background: var(--vscode-button-background);
202
+ color: var(--vscode-button-foreground);
273
203
  }
274
204
 
275
205
  .jotx-header-button:disabled {
276
- opacity: 0.4;
206
+ opacity: 0.5;
277
207
  cursor: not-allowed;
278
208
  }
279
209
 
@@ -282,13 +212,41 @@
282
212
  height: 16px;
283
213
  }
284
214
 
285
- /* Responsive */
215
+ /* Icon Button (for settings, etc.) */
216
+ .jotx-icon-input {
217
+ width: 32px;
218
+ height: 32px;
219
+ padding: 0;
220
+ background: transparent;
221
+ border: 1px solid var(--vscode-input-border);
222
+ border-radius: 4px;
223
+ color: var(--vscode-foreground);
224
+ cursor: pointer;
225
+ font-size: 16px;
226
+ display: flex;
227
+ align-items: center;
228
+ justify-content: center;
229
+ transition: all 0.15s ease;
230
+ }
231
+
232
+ .jotx-icon-input:hover {
233
+ background: var(--vscode-input-background);
234
+ border-color: var(--vscode-focusBorder);
235
+ }
236
+
237
+ /* Responsive adjustments */
286
238
  @media (max-width: 768px) {
287
- .jotx-header {
288
- padding: 0 16px;
239
+ .jotx-document-header {
240
+ flex-wrap: wrap;
241
+ padding: 12px 16px;
242
+ }
243
+
244
+ .jotx-metadata {
245
+ flex-wrap: wrap;
289
246
  }
290
247
 
291
- .jotx-header-badge {
292
- display: none;
248
+ .jotx-header-actions {
249
+ width: 100%;
250
+ justify-content: flex-end;
293
251
  }
294
252
  }
package/dist/styles/ExportMenu.css ADDED
@@ -0,0 +1,66 @@
1
+ /* Export Menu Styles */
2
+ .jotx-export-menu {
3
+ position: relative;
4
+ display: inline-block;
5
+ }
6
+
7
+ .jotx-export-dropdown {
8
+ position: absolute;
9
+ top: calc(100% + 4px);
10
+ right: 0;
11
+ background: var(--vscode-dropdown-background);
12
+ border: 1px solid var(--vscode-dropdown-border);
13
+ border-radius: 4px;
14
+ padding: 4px;
15
+ min-width: 180px;
16
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
17
+ z-index: 1000;
18
+ }
19
+
20
+ .jotx-export-header {
21
+ padding: 8px 12px;
22
+ font-size: 11px;
23
+ font-weight: 600;
24
+ text-transform: uppercase;
25
+ letter-spacing: 0.5px;
26
+ color: var(--vscode-descriptionForeground);
27
+ border-bottom: 1px solid var(--vscode-widget-border);
28
+ margin-bottom: 4px;
29
+ }
30
+
31
+ .jotx-export-item {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 10px;
35
+ padding: 8px 12px;
36
+ width: 100%;
37
+ background: transparent;
38
+ border: none;
39
+ border-radius: 3px;
40
+ color: var(--vscode-foreground);
41
+ cursor: pointer;
42
+ font-size: 13px;
43
+ transition: background-color 0.15s ease;
44
+ }
45
+
46
+ .jotx-export-item:hover {
47
+ background: var(--vscode-list-hoverBackground);
48
+ }
49
+
50
+ .jotx-export-item svg {
51
+ flex-shrink: 0;
52
+ color: var(--vscode-icon-foreground);
53
+ }
54
+
55
+ .jotx-export-item span:first-of-type {
56
+ flex: 1;
57
+ }
58
+
59
+ .jotx-export-badge {
60
+ font-size: 10px;
61
+ padding: 2px 6px;
62
+ background: var(--vscode-badge-background);
63
+ color: var(--vscode-badge-foreground);
64
+ border-radius: 10px;
65
+ font-weight: 500;
66
+ }
package/dist/styles/ViewOptions.css ADDED
@@ -0,0 +1,89 @@
1
+ /* View Options Styles */
2
+ .jotx-view-options {
3
+ position: relative;
4
+ display: inline-block;
5
+ }
6
+
7
+ .jotx-view-dropdown {
8
+ position: absolute;
9
+ top: calc(100% + 4px);
10
+ right: 0;
11
+ background: var(--vscode-dropdown-background);
12
+ border: 1px solid var(--vscode-dropdown-border);
13
+ border-radius: 4px;
14
+ padding: 12px;
15
+ min-width: 220px;
16
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
17
+ z-index: 1000;
18
+ }
19
+
20
+ .jotx-view-header {
21
+ font-size: 11px;
22
+ font-weight: 600;
23
+ text-transform: uppercase;
24
+ letter-spacing: 0.5px;
25
+ color: var(--vscode-descriptionForeground);
26
+ margin-bottom: 12px;
27
+ padding-bottom: 8px;
28
+ border-bottom: 1px solid var(--vscode-widget-border);
29
+ }
30
+
31
+ .jotx-view-section {
32
+ margin-bottom: 16px;
33
+ }
34
+
35
+ .jotx-view-label {
36
+ display: block;
37
+ font-size: 12px;
38
+ color: var(--vscode-foreground);
39
+ margin-bottom: 8px;
40
+ }
41
+
42
+ .jotx-view-slider {
43
+ width: 100%;
44
+ height: 4px;
45
+ border-radius: 2px;
46
+ background: var(--vscode-input-background);
47
+ outline: none;
48
+ cursor: pointer;
49
+ }
50
+
51
+ .jotx-view-slider::-webkit-slider-thumb {
52
+ appearance: none;
53
+ width: 14px;
54
+ height: 14px;
55
+ border-radius: 50%;
56
+ background: var(--vscode-button-background);
57
+ cursor: pointer;
58
+ }
59
+
60
+ .jotx-view-slider::-moz-range-thumb {
61
+ width: 14px;
62
+ height: 14px;
63
+ border-radius: 50%;
64
+ background: var(--vscode-button-background);
65
+ border: none;
66
+ cursor: pointer;
67
+ }
68
+
69
+ .jotx-view-divider {
70
+ height: 1px;
71
+ background: var(--vscode-widget-border);
72
+ margin: 12px 0;
73
+ }
74
+
75
+ .jotx-view-reset {
76
+ width: 100%;
77
+ padding: 8px;
78
+ background: transparent;
79
+ border: 1px solid var(--vscode-button-border);
80
+ border-radius: 3px;
81
+ color: var(--vscode-foreground);
82
+ font-size: 12px;
83
+ cursor: pointer;
84
+ transition: background-color 0.15s ease;
85
+ }
86
+
87
+ .jotx-view-reset:hover {
88
+ background: var(--vscode-button-hoverBackground);
89
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.142",
3
+ "version": "2.4.144",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/DocumentHeader.css CHANGED
@@ -1,279 +1,209 @@
1
- /**
2
- * Document Header Styles
3
- */
1
+ /* =====================================================
2
+ Document Header Component - Full Styling
3
+ ===================================================== */
4
4
 
5
- .jotx-header {
6
- position: sticky;
7
- /* Sit below the tabs bar (web) so header never covers tabs */
8
- top: var(--jotx-tabs-height, 40px);
9
- left: 0;
10
- right: 0;
11
- z-index: 150;
12
- flex-shrink: 0;
13
- /* Never shrink */
5
+ .jotx-document-header {
14
6
  display: flex;
15
7
  align-items: center;
16
- justify-content: space-between;
17
- height: var(--jotx-header-height, 60px);
18
- padding: 0 24px;
19
- background-color: var(--vscode-editor-background);
8
+ gap: 16px;
9
+ padding: 16px 24px;
10
+ background: var(--vscode-editor-background);
20
11
  border-bottom: 1px solid var(--vscode-panel-border);
21
- backdrop-filter: blur(8px);
22
- /* Critical: ensure it stays on top */
23
- will-change: transform;
24
- }
25
-
26
- .jotx-header-left {
27
- display: flex;
28
- align-items: center;
29
- gap: 12px;
30
- flex: 1;
31
- min-width: 0;
12
+ position: sticky;
13
+ top: 0;
14
+ z-index: 100;
15
+ min-height: 60px;
32
16
  }
33
17
 
34
- .jotx-header-right {
18
+ /* Logo */
19
+ .jotx-logo {
20
+ flex-shrink: 0;
21
+ width: 32px;
22
+ height: 32px;
35
23
  display: flex;
36
24
  align-items: center;
37
- gap: 8px;
25
+ justify-content: center;
38
26
  }
39
27
 
40
- /* Graph Button */
41
- .jotx-header-graph-btn {
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- padding: 8px;
46
- background: transparent;
47
- border: none;
48
- border-radius: 6px;
49
- color: #888;
50
- cursor: pointer;
51
- transition: all 0.2s ease;
28
+ .jotx-logo svg {
29
+ width: 100%;
30
+ height: 100%;
52
31
  }
53
32
 
54
- .jotx-header-graph-btn:hover {
55
- background: rgba(20, 184, 166, 0.1);
56
- color: #14b8a6;
33
+ /* Document Type Dropdown */
34
+ .jotx-document-type {
35
+ position: relative;
36
+ flex-shrink: 0;
57
37
  }
58
38
 
59
- /* Help Button */
60
- .jotx-header-help-btn {
39
+ .jotx-type-button {
61
40
  display: flex;
62
41
  align-items: center;
63
- justify-content: center;
64
- padding: 8px;
65
- background: transparent;
66
- border: none;
67
- border-radius: 6px;
68
- color: #888;
42
+ gap: 6px;
43
+ padding: 6px 10px;
44
+ background: var(--vscode-button-secondaryBackground);
45
+ border: 1px solid var(--vscode-button-border);
46
+ border-radius: 4px;
47
+ color: var(--vscode-button-secondaryForeground);
69
48
  cursor: pointer;
70
- transition: all 0.2s ease;
49
+ font-size: 13px;
50
+ font-weight: 500;
51
+ transition: all 0.15s ease;
71
52
  }
72
53
 
73
- .jotx-header-help-btn:hover {
74
- background: rgba(20, 184, 166, 0.1);
75
- color: #14b8a6;
54
+ .jotx-type-button:hover {
55
+ background: var(--vscode-button-secondaryHoverBackground);
76
56
  }
77
57
 
78
- /* Logo */
79
- .jotx-header-logo {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- width: var(--jotx-header-logoSize, 32px);
84
- height: var(--jotx-header-logoSize, 32px);
58
+ .jotx-type-button svg {
85
59
  flex-shrink: 0;
86
- color: #20B2AA;
87
- transition: color 0.2s ease;
88
- }
89
-
90
- .jotx-header-logo:hover {
91
- color: #40E0D0;
92
- }
93
-
94
- .jotx-header-logo-svg {
95
- display: block;
96
60
  }
97
61
 
98
- .jotx-header-logo-img {
99
- width: 100%;
100
- height: 100%;
101
- object-fit: contain;
62
+ .jotx-type-menu {
63
+ position: absolute;
64
+ top: calc(100% + 4px);
65
+ left: 0;
66
+ background: var(--vscode-dropdown-background);
67
+ border: 1px solid var(--vscode-dropdown-border);
102
68
  border-radius: 4px;
69
+ padding: 4px;
70
+ min-width: 200px;
71
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
72
+ z-index: 1000;
103
73
  }
104
74
 
105
- .jotx-header-icon {
106
- font-size: 24px;
107
- line-height: 1;
108
- }
109
-
110
- .jotx-header-icon-svg {
111
- display: flex;
112
- align-items: center;
113
- justify-content: center;
114
- color: var(--jotx-primary);
115
- }
116
-
117
- /* Type Selector (was Badge) */
118
- .jotx-header-type-container {
119
- position: relative;
120
- }
121
-
122
- .jotx-header-type-button {
75
+ .jotx-type-item {
123
76
  display: flex;
124
77
  align-items: center;
125
- gap: 6px;
126
- padding: 4px 8px;
78
+ gap: 10px;
79
+ padding: 8px 12px;
80
+ width: 100%;
81
+ background: transparent;
127
82
  border: none;
128
- background: var(--jotx-backgroundSecondary);
129
- border-radius: 4px;
83
+ border-radius: 3px;
84
+ color: var(--vscode-foreground);
130
85
  cursor: pointer;
131
- transition: all 0.2s;
132
- color: var(--jotx-textSecondary);
86
+ font-size: 13px;
87
+ transition: background-color 0.15s ease;
88
+ text-align: left;
133
89
  }
134
90
 
135
- .jotx-header-type-button:hover {
136
- background: var(--jotx-border);
137
- color: var(--jotx-text);
91
+ .jotx-type-item:hover {
92
+ background: var(--vscode-list-hoverBackground);
138
93
  }
139
94
 
140
- .jotx-header-type-label {
141
- font-size: 13px;
142
- font-weight: 500;
95
+ .jotx-type-item.active {
96
+ background: var(--vscode-list-activeSelectionBackground);
97
+ color: var(--vscode-list-activeSelectionForeground);
143
98
  }
144
99
 
145
- .jotx-header-type-icon {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
100
+ .jotx-type-item svg {
101
+ flex-shrink: 0;
149
102
  }
150
103
 
151
- .jotx-header-type-chevron {
152
- opacity: 0.5;
104
+ .jotx-type-item-details {
105
+ flex: 1;
153
106
  }
154
107
 
155
- /* Dropdown Menu */
156
- .jotx-header-type-menu {
157
- position: absolute;
158
- top: 100%;
159
- left: 0;
160
- margin-top: 4px;
161
- background: var(--jotx-background);
162
- border: 1px solid var(--jotx-border);
163
- border-radius: 6px;
164
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
165
- width: 180px;
166
- z-index: 200;
167
- overflow: hidden;
168
- display: flex;
169
- flex-direction: column;
108
+ .jotx-type-item-name {
109
+ font-weight: 500;
110
+ margin-bottom: 2px;
170
111
  }
171
112
 
172
- .jotx-type-menu-header {
173
- padding: 8px 12px;
113
+ .jotx-type-item-description {
174
114
  font-size: 11px;
175
- font-weight: 600;
176
- color: var(--jotx-textSecondary);
177
- border-bottom: 1px solid var(--jotx-border);
178
- background: var(--jotx-backgroundSecondary);
179
- text-transform: uppercase;
180
- letter-spacing: 0.5px;
115
+ color: var(--vscode-descriptionForeground);
181
116
  }
182
117
 
183
- .jotx-type-menu-list {
184
- padding: 4px;
185
- max-height: 300px;
186
- overflow-y: auto;
118
+ /* Title Input */
119
+ .jotx-title-container {
120
+ flex: 1;
121
+ min-width: 0;
187
122
  }
188
123
 
189
- .jotx-type-menu-item {
190
- display: flex;
191
- align-items: center;
192
- gap: 8px;
193
- padding: 6px 8px;
124
+ .jotx-title-input {
194
125
  width: 100%;
195
- border: none;
126
+ padding: 8px 12px;
196
127
  background: transparent;
197
- color: var(--jotx-text);
198
- font-size: 13px;
199
- text-align: left;
200
- cursor: pointer;
128
+ border: 1px solid transparent;
201
129
  border-radius: 4px;
202
- transition: background 0.15s;
130
+ color: var(--vscode-editor-foreground);
131
+ font-size: 18px;
132
+ font-weight: 600;
133
+ font-family: var(--vscode-font-family);
134
+ outline: none;
135
+ transition: all 0.15s ease;
203
136
  }
204
137
 
205
- .jotx-type-menu-item:hover {
206
- background: var(--jotx-backgroundSecondary);
138
+ .jotx-title-input:hover {
139
+ background: var(--vscode-input-background);
140
+ border-color: var(--vscode-input-border);
207
141
  }
208
142
 
209
- .jotx-type-menu-item.active {
210
- background: rgba(32, 178, 170, 0.2);
211
- color: #20B2AA;
212
- font-weight: 600;
143
+ .jotx-title-input:focus {
144
+ background: var(--vscode-input-background);
145
+ border-color: var(--vscode-focusBorder);
213
146
  }
214
147
 
215
- /* Title */
216
- .jotx-header-title-container {
217
- flex: 1;
218
- min-width: 0;
148
+ .jotx-title-input::placeholder {
149
+ color: var(--vscode-input-placeholderForeground);
150
+ }
151
+
152
+ /* Metadata Section */
153
+ .jotx-metadata {
154
+ display: flex;
155
+ align-items: center;
156
+ gap: 12px;
157
+ margin-top: 4px;
158
+ font-size: 12px;
159
+ color: var(--vscode-descriptionForeground);
219
160
  }
220
161
 
221
- .jotx-header-title {
222
- margin: 0;
223
- font-size: var(--jotx-header-titleSize, 18px);
224
- font-weight: var(--jotx-header-titleWeight, 600);
225
- color: var(--jotx-text);
226
- cursor: text;
227
- white-space: nowrap;
228
- overflow: hidden;
229
- text-overflow: ellipsis;
230
- transition: opacity 0.2s;
162
+ .jotx-metadata-item {
163
+ display: flex;
164
+ align-items: center;
165
+ gap: 4px;
231
166
  }
232
167
 
233
- .jotx-header-title:hover {
234
- opacity: 0.7;
168
+ .jotx-metadata-item svg {
169
+ width: 14px;
170
+ height: 14px;
235
171
  }
236
172
 
237
- .jotx-header-title-input {
238
- width: 100%;
239
- padding: 4px 8px;
240
- font-size: var(--jotx-header-titleSize, 18px);
241
- font-weight: var(--jotx-header-titleWeight, 600);
242
- color: var(--jotx-text);
243
- background-color: var(--jotx-backgroundSecondary);
244
- border: 1px solid var(--jotx-primary);
245
- border-radius: 4px;
246
- outline: none;
247
- font-family: inherit;
173
+ /* Action Buttons */
174
+ .jotx-header-actions {
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 4px;
178
+ flex-shrink: 0;
248
179
  }
249
180
 
250
- /* Buttons */
251
181
  .jotx-header-button {
252
- display: flex;
182
+ display: inline-flex;
253
183
  align-items: center;
254
184
  justify-content: center;
255
- width: var(--jotx-header-buttonSize, 36px);
256
- height: var(--jotx-header-buttonSize, 36px);
257
- padding: 0;
258
- color: var(--jotx-textSecondary);
259
- background-color: transparent;
260
- border: none;
261
- border-radius: 6px;
185
+ padding: 6px 10px;
186
+ background: transparent;
187
+ border: 1px solid transparent;
188
+ border-radius: 4px;
189
+ color: var(--vscode-foreground);
262
190
  cursor: pointer;
263
- transition: all 0.2s;
191
+ font-size: 13px;
192
+ transition: all 0.15s ease;
264
193
  }
265
194
 
266
- .jotx-header-button:hover:not(:disabled) {
267
- color: #20B2AA;
268
- background-color: rgba(32, 178, 170, 0.1);
195
+ .jotx-header-button:hover {
196
+ background: var(--vscode-toolbar-hoverBackground);
197
+ border-color: var(--vscode-button-border);
269
198
  }
270
199
 
271
- .jotx-header-button:active:not(:disabled) {
272
- transform: scale(0.95);
200
+ .jotx-header-button:active {
201
+ background: var(--vscode-button-background);
202
+ color: var(--vscode-button-foreground);
273
203
  }
274
204
 
275
205
  .jotx-header-button:disabled {
276
- opacity: 0.4;
206
+ opacity: 0.5;
277
207
  cursor: not-allowed;
278
208
  }
279
209
 
@@ -282,13 +212,41 @@
282
212
  height: 16px;
283
213
  }
284
214
 
285
- /* Responsive */
215
+ /* Icon Button (for settings, etc.) */
216
+ .jotx-icon-input {
217
+ width: 32px;
218
+ height: 32px;
219
+ padding: 0;
220
+ background: transparent;
221
+ border: 1px solid var(--vscode-input-border);
222
+ border-radius: 4px;
223
+ color: var(--vscode-foreground);
224
+ cursor: pointer;
225
+ font-size: 16px;
226
+ display: flex;
227
+ align-items: center;
228
+ justify-content: center;
229
+ transition: all 0.15s ease;
230
+ }
231
+
232
+ .jotx-icon-input:hover {
233
+ background: var(--vscode-input-background);
234
+ border-color: var(--vscode-focusBorder);
235
+ }
236
+
237
+ /* Responsive adjustments */
286
238
  @media (max-width: 768px) {
287
- .jotx-header {
288
- padding: 0 16px;
239
+ .jotx-document-header {
240
+ flex-wrap: wrap;
241
+ padding: 12px 16px;
242
+ }
243
+
244
+ .jotx-metadata {
245
+ flex-wrap: wrap;
289
246
  }
290
247
 
291
- .jotx-header-badge {
292
- display: none;
248
+ .jotx-header-actions {
249
+ width: 100%;
250
+ justify-content: flex-end;
293
251
  }
294
252
  }
package/src/styles/ExportMenu.css ADDED
@@ -0,0 +1,66 @@
1
+ /* Export Menu Styles */
2
+ .jotx-export-menu {
3
+ position: relative;
4
+ display: inline-block;
5
+ }
6
+
7
+ .jotx-export-dropdown {
8
+ position: absolute;
9
+ top: calc(100% + 4px);
10
+ right: 0;
11
+ background: var(--vscode-dropdown-background);
12
+ border: 1px solid var(--vscode-dropdown-border);
13
+ border-radius: 4px;
14
+ padding: 4px;
15
+ min-width: 180px;
16
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
17
+ z-index: 1000;
18
+ }
19
+
20
+ .jotx-export-header {
21
+ padding: 8px 12px;
22
+ font-size: 11px;
23
+ font-weight: 600;
24
+ text-transform: uppercase;
25
+ letter-spacing: 0.5px;
26
+ color: var(--vscode-descriptionForeground);
27
+ border-bottom: 1px solid var(--vscode-widget-border);
28
+ margin-bottom: 4px;
29
+ }
30
+
31
+ .jotx-export-item {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 10px;
35
+ padding: 8px 12px;
36
+ width: 100%;
37
+ background: transparent;
38
+ border: none;
39
+ border-radius: 3px;
40
+ color: var(--vscode-foreground);
41
+ cursor: pointer;
42
+ font-size: 13px;
43
+ transition: background-color 0.15s ease;
44
+ }
45
+
46
+ .jotx-export-item:hover {
47
+ background: var(--vscode-list-hoverBackground);
48
+ }
49
+
50
+ .jotx-export-item svg {
51
+ flex-shrink: 0;
52
+ color: var(--vscode-icon-foreground);
53
+ }
54
+
55
+ .jotx-export-item span:first-of-type {
56
+ flex: 1;
57
+ }
58
+
59
+ .jotx-export-badge {
60
+ font-size: 10px;
61
+ padding: 2px 6px;
62
+ background: var(--vscode-badge-background);
63
+ color: var(--vscode-badge-foreground);
64
+ border-radius: 10px;
65
+ font-weight: 500;
66
+ }
package/src/styles/ViewOptions.css ADDED
@@ -0,0 +1,89 @@
1
+ /* View Options Styles */
2
+ .jotx-view-options {
3
+ position: relative;
4
+ display: inline-block;
5
+ }
6
+
7
+ .jotx-view-dropdown {
8
+ position: absolute;
9
+ top: calc(100% + 4px);
10
+ right: 0;
11
+ background: var(--vscode-dropdown-background);
12
+ border: 1px solid var(--vscode-dropdown-border);
13
+ border-radius: 4px;
14
+ padding: 12px;
15
+ min-width: 220px;
16
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
17
+ z-index: 1000;
18
+ }
19
+
20
+ .jotx-view-header {
21
+ font-size: 11px;
22
+ font-weight: 600;
23
+ text-transform: uppercase;
24
+ letter-spacing: 0.5px;
25
+ color: var(--vscode-descriptionForeground);
26
+ margin-bottom: 12px;
27
+ padding-bottom: 8px;
28
+ border-bottom: 1px solid var(--vscode-widget-border);
29
+ }
30
+
31
+ .jotx-view-section {
32
+ margin-bottom: 16px;
33
+ }
34
+
35
+ .jotx-view-label {
36
+ display: block;
37
+ font-size: 12px;
38
+ color: var(--vscode-foreground);
39
+ margin-bottom: 8px;
40
+ }
41
+
42
+ .jotx-view-slider {
43
+ width: 100%;
44
+ height: 4px;
45
+ border-radius: 2px;
46
+ background: var(--vscode-input-background);
47
+ outline: none;
48
+ cursor: pointer;
49
+ }
50
+
51
+ .jotx-view-slider::-webkit-slider-thumb {
52
+ appearance: none;
53
+ width: 14px;
54
+ height: 14px;
55
+ border-radius: 50%;
56
+ background: var(--vscode-button-background);
57
+ cursor: pointer;
58
+ }
59
+
60
+ .jotx-view-slider::-moz-range-thumb {
61
+ width: 14px;
62
+ height: 14px;
63
+ border-radius: 50%;
64
+ background: var(--vscode-button-background);
65
+ border: none;
66
+ cursor: pointer;
67
+ }
68
+
69
+ .jotx-view-divider {
70
+ height: 1px;
71
+ background: var(--vscode-widget-border);
72
+ margin: 12px 0;
73
+ }
74
+
75
+ .jotx-view-reset {
76
+ width: 100%;
77
+ padding: 8px;
78
+ background: transparent;
79
+ border: 1px solid var(--vscode-button-border);
80
+ border-radius: 3px;
81
+ color: var(--vscode-foreground);
82
+ font-size: 12px;
83
+ cursor: pointer;
84
+ transition: background-color 0.15s ease;
85
+ }
86
+
87
+ .jotx-view-reset:hover {
88
+ background: var(--vscode-button-hoverBackground);
89
+ }