@nonoun/native-codemirror 0.2.2 → 0.2.4

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.
@@ -7,20 +7,59 @@
7
7
  * These styles handle structural concerns (scrolling, gutter borders,
8
8
  * scrollbar appearance, border-radius) that complement the JS-driven
9
9
  * EditorView.theme() in theme.ts.
10
+ *
11
+ * All colors flow through --n-code-* CSS custom properties defined here.
12
+ * When native-ui foundation CSS is loaded, tokens like --n-body, --n-ink
13
+ * provide automatic theme integration. Without it, hex fallbacks apply.
14
+ * Consumers can override any --n-code-* var directly on .cm-editor.
10
15
  */
11
16
 
12
17
  @layer ui {
13
18
  /* -----------------------------------------------------------------------
14
- * Editor root
19
+ * Editor root — color bridge vars
15
20
  * --------------------------------------------------------------------- */
16
21
 
17
22
  :where(.cm-editor) {
18
- /* CodeMirror chrome tokens */
19
- --n-cm-scrollbar: #484c52;
20
- --n-cm-scrollbar-hover: #5e6167;
21
- --n-cm-match-bg: #314050;
23
+ /* Grounds */
24
+ --n-code-bg: var(--n-color-neutral-base, #282c34);
25
+ --n-code-bg-raised: var(--n-color-neutral-higher, #21252b);
26
+ --n-code-bg-deeper: var(--n-color-neutral-lower, #1e2127);
27
+ --n-code-bg-inline: var(--n-card, #333843);
28
+
29
+ /* Ink */
30
+ --n-code-text: var(--n-ink, #abb2bf);
31
+ --n-code-text-muted: var(--n-ink-muted, #7d8799);
32
+
33
+ /* Interactive */
34
+ --n-code-cursor: var(--n-surface-accent, #528bff);
35
+ --n-code-selection: var(--n-color-neutral-300, #3E4451);
36
+ --n-code-line-active: var(--n-color-neutral-200, #2c313a);
37
+ --n-code-bracket: var(--n-color-neutral-600, #515a6b);
38
+ --n-code-accent: var(--n-surface-accent, #61afef);
39
+
40
+ /* Chrome */
41
+ --n-code-border: var(--n-border, #3E4451);
42
+ --n-code-button: var(--n-color-neutral-100-scrim, #3E4451);
43
+ --n-code-scrollbar: var(--n-color-neutral-200-scrim, #484c52);
44
+ --n-code-scrollbar-hover: var(--n-color-neutral-300-scrim, #5e6167);
45
+ --n-code-match: var(--n-color-accent-050-scrim, #314050);
46
+ --n-code-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
47
+
48
+ /* Search */
49
+ --n-code-search: rgba(229, 192, 123, 0.25);
50
+ --n-code-search-outline: rgba(229, 192, 123, 0.4);
51
+ --n-code-search-active: rgba(97, 175, 239, 0.3);
52
+
53
+ /* Syntax palette — curated for dark-on-dark contrast */
54
+ --n-code-keyword: #c678dd;
55
+ --n-code-string: #98c379;
56
+ --n-code-function: #61afef;
57
+ --n-code-variable: #e06c75;
58
+ --n-code-type: #e5c07b;
59
+ --n-code-operator: #56b6c2;
60
+ --n-code-number: #d19a66;
61
+ --n-code-invalid: #ffffff;
22
62
 
23
- /*border-radius: var(--n-radius, 8px);*/
24
63
  overflow: hidden;
25
64
  font-variant-ligatures: contextual;
26
65
  line-height: 1.6;
@@ -69,7 +108,7 @@
69
108
 
70
109
  :where(.cm-scroller) {
71
110
  scrollbar-width: thin;
72
- scrollbar-color: var(--n-cm-scrollbar) transparent;
111
+ scrollbar-color: var(--n-code-scrollbar) transparent;
73
112
  }
74
113
 
75
114
  :where(.cm-scroller)::-webkit-scrollbar {
@@ -82,12 +121,12 @@
82
121
  }
83
122
 
84
123
  :where(.cm-scroller)::-webkit-scrollbar-thumb {
85
- background: var(--n-cm-scrollbar);
124
+ background: var(--n-code-scrollbar);
86
125
  border-radius: 4px;
87
126
  }
88
127
 
89
128
  :where(.cm-scroller)::-webkit-scrollbar-thumb:hover {
90
- background: var(--n-cm-scrollbar-hover);
129
+ background: var(--n-code-scrollbar-hover);
91
130
  }
92
131
 
93
132
  :where(.cm-scroller)::-webkit-scrollbar-corner {
@@ -172,7 +211,7 @@
172
211
  * --------------------------------------------------------------------- */
173
212
 
174
213
  :where(.cm-selectionMatch) {
175
- background-color: var(--n-cm-match-bg);
214
+ background-color: var(--n-code-match);
176
215
  border-radius: 2px;
177
216
  }
178
217
  }
@@ -1,43 +1,49 @@
1
- import { Decoration as e, EditorView as t, EditorView as n, ViewPlugin as r, WidgetType as i, drawSelection as a, drawSelection as o, highlightActiveLine as s, highlightActiveLine as c, highlightActiveLineGutter as ee, highlightActiveLineGutter as te, highlightSpecialChars as ne, keymap as l, keymap as re, lineNumbers as ie, lineNumbers as ae } from "@codemirror/view";
2
- import { HighlightStyle as oe, HighlightStyle as u, bracketMatching as d, bracketMatching as f, foldGutter as p, foldGutter as m, foldKeymap as se, indentOnInput as ce, indentOnInput as le, syntaxHighlighting as ue, syntaxHighlighting as de, syntaxTree as fe } from "@codemirror/language";
3
- import { tags as h, tags as g } from "@lezer/highlight";
4
- import { defaultKeymap as _, defaultKeymap as v, history as y, history as b, historyKeymap as x, historyKeymap as S, redo as C, undo as w } from "@codemirror/commands";
5
- import { autocompletion as T, autocompletion as E, closeBrackets as D, closeBrackets as O, closeBracketsKeymap as k, closeBracketsKeymap as A, completionKeymap as j, completionKeymap as M } from "@codemirror/autocomplete";
6
- import { Compartment as N, EditorState as pe, EditorState as P, StateEffect as F, StateField as I } from "@codemirror/state";
1
+ import { Decoration as e, EditorView as t, EditorView as n, ViewPlugin as r, WidgetType as i, drawSelection as a, drawSelection as o, highlightActiveLine as s, highlightActiveLine as c, highlightActiveLineGutter as ee, highlightActiveLineGutter as te, highlightSpecialChars as ne, keymap as re, keymap as ie, lineNumbers as ae, lineNumbers as oe } from "@codemirror/view";
2
+ import { HighlightStyle as l, HighlightStyle as se, bracketMatching as u, bracketMatching as ce, foldGutter as d, foldGutter as f, foldKeymap as p, indentOnInput as le, indentOnInput as ue, syntaxHighlighting as de, syntaxHighlighting as fe, syntaxTree as pe } from "@codemirror/language";
3
+ import { tags as me, tags as m } from "@lezer/highlight";
4
+ import { defaultKeymap as he, defaultKeymap as h, history as g, history as _, historyKeymap as v, historyKeymap as y, redo as b, undo as x } from "@codemirror/commands";
5
+ import { autocompletion as S, autocompletion as C, closeBrackets as w, closeBrackets as T, closeBracketsKeymap as E, closeBracketsKeymap as D, completionKeymap as O, completionKeymap as k } from "@codemirror/autocomplete";
6
+ import { Compartment as A, EditorState as j, EditorState as M, StateEffect as N, StateField as ge } from "@codemirror/state";
7
7
  /**
8
8
  * NativeUI CodeMirror Theme
9
9
  *
10
10
  * Dark theme inspired by one-dark, designed to harmonize with the
11
11
  * @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
12
12
  * with { dark: true } and HighlightStyle.define() for syntax tokens.
13
+ *
14
+ * All colors flow through --n-code-* CSS custom properties (defined in
15
+ * codemirror.css). When native-ui foundation CSS is loaded, tokens like
16
+ * --n-body and --n-ink provide automatic theme integration. Without it,
17
+ * the one-dark hex fallbacks apply. Consumers can override any
18
+ * --n-code-* var directly on .cm-editor.
13
19
  */
14
- var L = "#282c34", R = "#21252b", z = "#abb2bf", B = "#7d8799", V = "#528bff", H = "#3E4451", U = "#c678dd", W = "#98c379", G = "#61afef", K = "#e06c75", q = "#e5c07b", J = "#56b6c2", Y = "#d19a66";
20
+ var P = "var(--n-code-bg, #282c34)", F = "var(--n-code-bg-raised, #21252b)", I = "var(--n-code-text, #abb2bf)", L = "var(--n-code-text-muted, #7d8799)", R = "var(--n-code-cursor, #528bff)", z = "var(--n-code-selection, #3E4451)", B = "var(--n-code-line-active, #2c313a)", V = "var(--n-code-bracket, #515a6b)", H = "var(--n-code-border, #3E4451)", _e = "var(--n-code-button, #3E4451)", U = "var(--n-code-keyword, #c678dd)", W = "var(--n-code-string, #98c379)", G = "var(--n-code-function, #61afef)", K = "var(--n-code-variable, #e06c75)", q = "var(--n-code-type, #e5c07b)", J = "var(--n-code-operator, #56b6c2)", Y = "var(--n-code-number, #d19a66)";
15
21
  const X = n.theme({
16
22
  "&": {
17
- color: z,
18
- backgroundColor: L,
23
+ color: I,
24
+ backgroundColor: P,
19
25
  fontSize: "14px",
20
26
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace"
21
27
  },
22
28
  ".cm-content": {
23
- caretColor: V,
29
+ caretColor: R,
24
30
  padding: "4px 0"
25
31
  },
26
32
  "&.cm-focused .cm-cursor": {
27
- borderLeftColor: V,
33
+ borderLeftColor: R,
28
34
  borderLeftWidth: "2px"
29
35
  },
30
- "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: H },
31
- ".cm-activeLine": { backgroundColor: "#2c313a" },
36
+ "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: z },
37
+ ".cm-activeLine": { backgroundColor: B },
32
38
  ".cm-gutters": {
33
- backgroundColor: R,
34
- color: B,
39
+ backgroundColor: F,
40
+ color: L,
35
41
  borderRight: "none",
36
42
  paddingRight: "4px"
37
43
  },
38
44
  ".cm-activeLineGutter": {
39
- backgroundColor: "#2c313a",
40
- color: z
45
+ backgroundColor: B,
46
+ color: I
41
47
  },
42
48
  ".cm-lineNumbers .cm-gutterElement": {
43
49
  padding: "0 8px 0 16px",
@@ -48,29 +54,29 @@ const X = n.theme({
48
54
  cursor: "pointer"
49
55
  },
50
56
  "&.cm-focused .cm-matchingBracket": {
51
- backgroundColor: "#515a6b",
52
- outline: "1px solid #515a6b"
57
+ backgroundColor: V,
58
+ outline: `1px solid ${V}`
53
59
  },
54
60
  "&.cm-focused .cm-nonmatchingBracket": { color: K },
55
61
  ".cm-searchMatch": {
56
- backgroundColor: "rgba(229, 192, 123, 0.25)",
57
- outline: "1px solid rgba(229, 192, 123, 0.4)"
62
+ backgroundColor: "var(--n-code-search, rgba(229, 192, 123, 0.25))",
63
+ outline: "1px solid var(--n-code-search-outline, rgba(229, 192, 123, 0.4))"
58
64
  },
59
- ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "rgba(97, 175, 239, 0.3)" },
65
+ ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--n-code-search-active, rgba(97, 175, 239, 0.3))" },
60
66
  ".cm-tooltip": {
61
- backgroundColor: R,
62
- color: z,
63
- border: "1px solid #3E4451",
67
+ backgroundColor: F,
68
+ color: I,
69
+ border: `1px solid ${H}`,
64
70
  borderRadius: "6px",
65
- boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)"
71
+ boxShadow: "var(--n-code-shadow, 0 4px 16px rgba(0, 0, 0, 0.3))"
66
72
  },
67
73
  ".cm-tooltip .cm-tooltip-arrow::before": {
68
- borderTopColor: "#3E4451",
69
- borderBottomColor: "#3E4451"
74
+ borderTopColor: H,
75
+ borderBottomColor: H
70
76
  },
71
77
  ".cm-tooltip .cm-tooltip-arrow::after": {
72
- borderTopColor: R,
73
- borderBottomColor: R
78
+ borderTopColor: F,
79
+ borderBottomColor: F
74
80
  },
75
81
  ".cm-tooltip-autocomplete": {
76
82
  "& > ul": {
@@ -79,27 +85,27 @@ const X = n.theme({
79
85
  },
80
86
  "& > ul > li": { padding: "4px 8px" },
81
87
  "& > ul > li[aria-selected]": {
82
- backgroundColor: H,
83
- color: z
88
+ backgroundColor: z,
89
+ color: I
84
90
  }
85
91
  },
86
92
  ".cm-panels": {
87
- backgroundColor: R,
88
- color: z
93
+ backgroundColor: F,
94
+ color: I
89
95
  },
90
- ".cm-panels.cm-panels-top": { borderBottom: "1px solid #3E4451" },
91
- ".cm-panels.cm-panels-bottom": { borderTop: "1px solid #3E4451" },
96
+ ".cm-panels.cm-panels-top": { borderBottom: `1px solid ${H}` },
97
+ ".cm-panels.cm-panels-bottom": { borderTop: `1px solid ${H}` },
92
98
  ".cm-panel input, .cm-panel button, .cm-panel select": { fontSize: "inherit" },
93
99
  ".cm-panel input": {
94
- backgroundColor: L,
95
- color: z,
96
- border: "1px solid #3E4451",
100
+ backgroundColor: P,
101
+ color: I,
102
+ border: `1px solid ${H}`,
97
103
  borderRadius: "4px",
98
104
  padding: "2px 6px"
99
105
  },
100
106
  ".cm-panel button": {
101
- backgroundColor: "#3E4451",
102
- color: z,
107
+ backgroundColor: _e,
108
+ color: I,
103
109
  border: "none",
104
110
  borderRadius: "4px",
105
111
  padding: "2px 8px",
@@ -107,269 +113,269 @@ const X = n.theme({
107
113
  },
108
114
  ".cm-fat-cursor .cm-cursor": {
109
115
  display: "block",
110
- backgroundColor: `${V}77`,
116
+ backgroundColor: `${R}77`,
111
117
  borderLeft: "none",
112
118
  width: "0.5em"
113
119
  },
114
- ".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${H}80` },
120
+ ".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${z}80` },
115
121
  ".cm-foldPlaceholder": {
116
122
  backgroundColor: "transparent",
117
123
  border: "none",
118
- color: B
124
+ color: L
119
125
  }
120
- }, { dark: !0 }), Z = u.define([
126
+ }, { dark: !0 }), Z = se.define([
121
127
  {
122
- tag: g.comment,
123
- color: B,
128
+ tag: m.comment,
129
+ color: L,
124
130
  fontStyle: "italic"
125
131
  },
126
132
  {
127
- tag: g.lineComment,
128
- color: B,
133
+ tag: m.lineComment,
134
+ color: L,
129
135
  fontStyle: "italic"
130
136
  },
131
137
  {
132
- tag: g.blockComment,
133
- color: B,
138
+ tag: m.blockComment,
139
+ color: L,
134
140
  fontStyle: "italic"
135
141
  },
136
142
  {
137
- tag: g.docComment,
138
- color: B,
143
+ tag: m.docComment,
144
+ color: L,
139
145
  fontStyle: "italic"
140
146
  },
141
147
  {
142
- tag: g.keyword,
148
+ tag: m.keyword,
143
149
  color: U
144
150
  },
145
151
  {
146
- tag: g.controlKeyword,
152
+ tag: m.controlKeyword,
147
153
  color: U
148
154
  },
149
155
  {
150
- tag: g.operatorKeyword,
156
+ tag: m.operatorKeyword,
151
157
  color: U
152
158
  },
153
159
  {
154
- tag: g.definitionKeyword,
160
+ tag: m.definitionKeyword,
155
161
  color: U
156
162
  },
157
163
  {
158
- tag: g.moduleKeyword,
164
+ tag: m.moduleKeyword,
159
165
  color: U
160
166
  },
161
167
  {
162
- tag: g.string,
168
+ tag: m.string,
163
169
  color: W
164
170
  },
165
171
  {
166
- tag: g.special(g.string),
172
+ tag: m.special(m.string),
167
173
  color: W
168
174
  },
169
175
  {
170
- tag: g.regexp,
176
+ tag: m.regexp,
171
177
  color: W
172
178
  },
173
179
  {
174
- tag: g.escape,
180
+ tag: m.escape,
175
181
  color: J
176
182
  },
177
183
  {
178
- tag: g.character,
184
+ tag: m.character,
179
185
  color: W
180
186
  },
181
187
  {
182
- tag: g.function(g.definition(g.variableName)),
188
+ tag: m.function(m.definition(m.variableName)),
183
189
  color: G
184
190
  },
185
191
  {
186
- tag: g.function(g.variableName),
192
+ tag: m.function(m.variableName),
187
193
  color: G
188
194
  },
189
195
  {
190
- tag: g.variableName,
196
+ tag: m.variableName,
191
197
  color: K
192
198
  },
193
199
  {
194
- tag: g.definition(g.variableName),
200
+ tag: m.definition(m.variableName),
195
201
  color: K
196
202
  },
197
203
  {
198
- tag: g.propertyName,
204
+ tag: m.propertyName,
199
205
  color: K
200
206
  },
201
207
  {
202
- tag: g.definition(g.propertyName),
208
+ tag: m.definition(m.propertyName),
203
209
  color: K
204
210
  },
205
211
  {
206
- tag: g.typeName,
212
+ tag: m.typeName,
207
213
  color: q
208
214
  },
209
215
  {
210
- tag: g.className,
216
+ tag: m.className,
211
217
  color: q
212
218
  },
213
219
  {
214
- tag: g.namespace,
220
+ tag: m.namespace,
215
221
  color: q
216
222
  },
217
223
  {
218
- tag: g.macroName,
224
+ tag: m.macroName,
219
225
  color: q
220
226
  },
221
227
  {
222
- tag: g.annotation,
228
+ tag: m.annotation,
223
229
  color: q
224
230
  },
225
231
  {
226
- tag: g.number,
232
+ tag: m.number,
227
233
  color: Y
228
234
  },
229
235
  {
230
- tag: g.integer,
236
+ tag: m.integer,
231
237
  color: Y
232
238
  },
233
239
  {
234
- tag: g.float,
240
+ tag: m.float,
235
241
  color: Y
236
242
  },
237
243
  {
238
- tag: g.bool,
244
+ tag: m.bool,
239
245
  color: Y
240
246
  },
241
247
  {
242
- tag: g.null,
248
+ tag: m.null,
243
249
  color: Y
244
250
  },
245
251
  {
246
- tag: g.atom,
252
+ tag: m.atom,
247
253
  color: Y
248
254
  },
249
255
  {
250
- tag: g.operator,
256
+ tag: m.operator,
251
257
  color: J
252
258
  },
253
259
  {
254
- tag: g.punctuation,
255
- color: z
260
+ tag: m.punctuation,
261
+ color: I
256
262
  },
257
263
  {
258
- tag: g.paren,
259
- color: z
264
+ tag: m.paren,
265
+ color: I
260
266
  },
261
267
  {
262
- tag: g.squareBracket,
263
- color: z
268
+ tag: m.squareBracket,
269
+ color: I
264
270
  },
265
271
  {
266
- tag: g.brace,
267
- color: z
272
+ tag: m.brace,
273
+ color: I
268
274
  },
269
275
  {
270
- tag: g.derefOperator,
271
- color: z
276
+ tag: m.derefOperator,
277
+ color: I
272
278
  },
273
279
  {
274
- tag: g.separator,
275
- color: z
280
+ tag: m.separator,
281
+ color: I
276
282
  },
277
283
  {
278
- tag: g.url,
284
+ tag: m.url,
279
285
  color: J,
280
286
  textDecoration: "underline"
281
287
  },
282
288
  {
283
- tag: g.link,
289
+ tag: m.link,
284
290
  color: J
285
291
  },
286
292
  {
287
- tag: g.labelName,
293
+ tag: m.labelName,
288
294
  color: K
289
295
  },
290
296
  {
291
- tag: g.tagName,
297
+ tag: m.tagName,
292
298
  color: K
293
299
  },
294
300
  {
295
- tag: g.attributeName,
301
+ tag: m.attributeName,
296
302
  color: Y
297
303
  },
298
304
  {
299
- tag: g.attributeValue,
305
+ tag: m.attributeValue,
300
306
  color: W
301
307
  },
302
308
  {
303
- tag: g.angleBracket,
304
- color: z
309
+ tag: m.angleBracket,
310
+ color: I
305
311
  },
306
312
  {
307
- tag: g.self,
313
+ tag: m.self,
308
314
  color: K
309
315
  },
310
316
  {
311
- tag: g.processingInstruction,
312
- color: B
317
+ tag: m.processingInstruction,
318
+ color: L
313
319
  },
314
320
  {
315
- tag: g.meta,
316
- color: B
321
+ tag: m.meta,
322
+ color: L
317
323
  },
318
324
  {
319
- tag: g.heading,
325
+ tag: m.heading,
320
326
  color: K,
321
327
  fontWeight: "bold"
322
328
  },
323
329
  {
324
- tag: g.heading1,
330
+ tag: m.heading1,
325
331
  color: K,
326
332
  fontWeight: "bold"
327
333
  },
328
334
  {
329
- tag: g.heading2,
335
+ tag: m.heading2,
330
336
  color: K,
331
337
  fontWeight: "bold"
332
338
  },
333
339
  {
334
- tag: g.heading3,
340
+ tag: m.heading3,
335
341
  color: K,
336
342
  fontWeight: "bold"
337
343
  },
338
344
  {
339
- tag: g.emphasis,
345
+ tag: m.emphasis,
340
346
  fontStyle: "italic"
341
347
  },
342
348
  {
343
- tag: g.strong,
349
+ tag: m.strong,
344
350
  fontWeight: "bold"
345
351
  },
346
352
  {
347
- tag: g.strikethrough,
353
+ tag: m.strikethrough,
348
354
  textDecoration: "line-through"
349
355
  },
350
356
  {
351
- tag: g.invalid,
352
- color: "#ffffff",
357
+ tag: m.invalid,
358
+ color: "var(--n-code-invalid, #ffffff)",
353
359
  backgroundColor: K
354
360
  }
355
- ]), Q = de(Z), $ = [
361
+ ]), Q = fe(Z), $ = [
356
362
  ne(),
357
363
  o(),
358
- le(),
359
- b(),
364
+ ue(),
365
+ _(),
366
+ ce(),
367
+ T(),
368
+ C(),
369
+ oe(),
360
370
  f(),
361
- O(),
362
- E(),
363
- ae(),
364
- m(),
365
371
  c(),
366
372
  te(),
367
- re.of([
368
- ...A,
369
- ...v,
370
- ...S,
371
- ...se,
372
- ...M
373
+ ie.of([
374
+ ...D,
375
+ ...h,
376
+ ...y,
377
+ ...p,
378
+ ...k
373
379
  ])
374
380
  ];
375
381
  /**
@@ -399,15 +405,15 @@ const X = n.theme({
399
405
  * });
400
406
  * ```
401
407
  */
402
- function me(e, t) {
408
+ function ve(e, t) {
403
409
  let { doc: r = "", extensions: i = [], readonly: a = !1 } = t ?? {}, o = [
404
410
  X,
405
411
  Q,
406
412
  $,
407
413
  ...i
408
414
  ];
409
- return a && o.push(P.readOnly.of(!0), n.editable.of(!1)), new n({
410
- state: P.create({
415
+ return a && o.push(M.readOnly.of(!0), n.editable.of(!1)), new n({
416
+ state: M.create({
411
417
  doc: r,
412
418
  extensions: o
413
419
  }),
@@ -415,4 +421,4 @@ function me(e, t) {
415
421
  root: e.ownerDocument
416
422
  });
417
423
  }
418
- export { N as Compartment, e as Decoration, pe as EditorState, t as EditorView, oe as HighlightStyle, $ as NBaseExtensions, Z as NHighlightStyle, Q as NSyntaxHighlighting, X as NTheme, F as StateEffect, I as StateField, r as ViewPlugin, i as WidgetType, T as autocompletion, d as bracketMatching, D as closeBrackets, k as closeBracketsKeymap, j as completionKeymap, me as createEditorView, _ as defaultKeymap, a as drawSelection, p as foldGutter, s as highlightActiveLine, ee as highlightActiveLineGutter, y as history, x as historyKeymap, ce as indentOnInput, l as keymap, ie as lineNumbers, C as redo, ue as syntaxHighlighting, fe as syntaxTree, h as tags, w as undo };
424
+ export { A as Compartment, e as Decoration, j as EditorState, t as EditorView, l as HighlightStyle, $ as NBaseExtensions, Z as NHighlightStyle, Q as NSyntaxHighlighting, X as NTheme, N as StateEffect, ge as StateField, r as ViewPlugin, i as WidgetType, S as autocompletion, u as bracketMatching, w as closeBrackets, E as closeBracketsKeymap, O as completionKeymap, ve as createEditorView, he as defaultKeymap, a as drawSelection, d as foldGutter, s as highlightActiveLine, ee as highlightActiveLineGutter, g as history, v as historyKeymap, le as indentOnInput, re as keymap, ae as lineNumbers, b as redo, de as syntaxHighlighting, pe as syntaxTree, me as tags, x as undo };
package/dist/theme.d.ts CHANGED
@@ -4,6 +4,12 @@
4
4
  * Dark theme inspired by one-dark, designed to harmonize with the
5
5
  * @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
6
6
  * with { dark: true } and HighlightStyle.define() for syntax tokens.
7
+ *
8
+ * All colors flow through --n-code-* CSS custom properties (defined in
9
+ * codemirror.css). When native-ui foundation CSS is loaded, tokens like
10
+ * --n-body and --n-ink provide automatic theme integration. Without it,
11
+ * the one-dark hex fallbacks apply. Consumers can override any
12
+ * --n-code-* var directly on .cm-editor.
7
13
  */
8
14
  import { HighlightStyle } from '@codemirror/language';
9
15
  export declare const NTheme: import("@codemirror/state").Extension;
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AA0B1E,eAAO,MAAM,MAAM,uCAqKlB,CAAC;AAMF,eAAO,MAAM,eAAe,gBAoF1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,uCAAsC,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AAgC1E,eAAO,MAAM,MAAM,uCAqKlB,CAAC;AAMF,eAAO,MAAM,eAAe,gBAoF1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,uCAAsC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nonoun/native-codemirror",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "Shared CodeMirror 6 integration layer for @nonoun/native-ui ecosystem",
5
5
  "license": "MIT",
6
6
  "type": "module",