@nonoun/native-codemirror 0.2.0 → 0.2.2

package/dist/base-extensions.d.ts

@@ -18,7 +18,6 @@ import type { Extension } from '@codemirror/state';
  * - Active line + gutter highlighting
  * - Selection drawing and special character highlighting
  * - Indent on input
- * - Line wrapping
  */
-export declare const nuiBaseExtensions: Extension;
+export declare const NBaseExtensions: Extension;
 //# sourceMappingURL=base-extensions.d.ts.map

package/dist/base-extensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-extensions.d.ts","sourceRoot":"","sources":["../src/base-extensions.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAwBnD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAmC/B,CAAC"}
+{"version":3,"file":"base-extensions.d.ts","sourceRoot":"","sources":["../src/base-extensions.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAuBnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,SAgC7B,CAAC"}

package/dist/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../src/factory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,UAAU,CAuBZ"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../src/factory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,UAAU,CA4BZ"}

package/dist/index.d.ts

@@ -7,8 +7,8 @@
  * factory function. Also re-exports key CodeMirror APIs so consumer
  * packages can import through this single dependency.
  */
-export { nuiTheme, nuiHighlightStyle, nuiSyntaxHighlighting } from './theme.ts';
-export { nuiBaseExtensions } from './base-extensions.ts';
+export { NTheme, NHighlightStyle, NSyntaxHighlighting } from './theme.ts';
+export { NBaseExtensions } from './base-extensions.ts';
 export { createEditorView } from './factory.ts';
 export type { CreateEditorOptions } from './factory.ts';
 export { EditorView, keymap, Decoration, ViewPlugin, WidgetType, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, } from '@codemirror/view';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAMzF,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAMzF,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/{nui-codemirror.css → native-codemirror.css}

@@ -1,5 +1,5 @@
 /**
- * nui-codemirror.css
+ * n-codemirror.css
  *
  * CodeMirror chrome styles for NativeUI integration.
  * Scoped to @layer ui with zero-specificity :where() selectors.
@@ -15,21 +15,36 @@
    * --------------------------------------------------------------------- */
 
   :where(.cm-editor) {
-    border-radius: var(--n-radius, 8px);
+    /* CodeMirror chrome tokens */
+    --n-cm-scrollbar: #484c52;
+    --n-cm-scrollbar-hover: #5e6167;
+    --n-cm-match-bg: #314050;
+
+    /*border-radius: var(--n-radius, 8px);*/
     overflow: hidden;
     font-variant-ligatures: contextual;
     line-height: 1.6;
   }
 
+  :where(.cm-content):focus-visible,
   :where(.cm-editor.cm-focused) {
     outline: none;
   }
 
   /* -----------------------------------------------------------------------
-   * Scroller
+   * Scroller — structural fallbacks
+   *
+   * WHY: CodeMirror's base theme injects display: flex !important on
+   * .cm-scroller via a JS <style> tag (unlayered). In @layer ui,
+   * !important declarations beat unlayered !important (reverse layer
+   * order), so these serve as authoritative structural rules that
+   * ensure the horizontal gutter+content layout works even if the
+   * base theme's <style> tag fails to inject or gets removed by HMR.
    * --------------------------------------------------------------------- */
 
   :where(.cm-scroller) {
+    display: flex !important;
+    align-items: flex-start !important;
     overflow: auto;
     font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
       ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -54,7 +69,7 @@
 
   :where(.cm-scroller) {
     scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+    scrollbar-color: var(--n-cm-scrollbar) transparent;
   }
 
   :where(.cm-scroller)::-webkit-scrollbar {
@@ -67,12 +82,12 @@
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--n-cm-scrollbar);
     border-radius: 4px;
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--n-cm-scrollbar-hover);
   }
 
   :where(.cm-scroller)::-webkit-scrollbar-corner {
@@ -135,6 +150,17 @@
 
   :where(.cm-content) {
     padding: 8px 0;
+    /* WHY: UA stylesheets may set color on [contenteditable] based on the
+       inherited color-scheme (e.g. CanvasText → black in light mode).
+       Explicit `color: inherit` as an author rule overrides the UA color,
+       preserving the theme's color set on .cm-editor. */
+    color: inherit;
+    /* Structural fallback — matches CM base theme */
+    flex-grow: 2;
+    flex-shrink: 0;
+    white-space: pre;
+    word-wrap: normal;
+    min-height: 100%;
   }
 
   :where(.cm-line) {
@@ -146,7 +172,7 @@
    * --------------------------------------------------------------------- */
 
   :where(.cm-selectionMatch) {
-    background-color: rgba(97, 175, 239, 0.15);
+    background-color: var(--n-cm-match-bg);
     border-radius: 2px;
   }
 }

package/dist/{nui-codemirror.js → native-codemirror.js}

@@ -1,5 +1,5 @@
-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 ee, highlightActiveLineGutter as te, highlightActiveLineGutter as c, highlightSpecialChars as ne, keymap as re, keymap as ie, lineNumbers as ae, lineNumbers as oe } from "@codemirror/view";
-import { HighlightStyle as l, 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";
+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";
+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";
 import { tags as h, tags as g } from "@lezer/highlight";
 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";
 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";
@@ -360,12 +360,11 @@ const X = n.theme({
 	f(),
 	O(),
 	E(),
-	oe(),
+	ae(),
 	m(),
-	ee(),
 	c(),
-	n.lineWrapping,
-	ie.of([
+	te(),
+	re.of([
 		...A,
 		...v,
 		...S,
@@ -392,7 +391,7 @@ const X = n.theme({
 *
 * @example
 * ```ts
-* import { createEditorView } from '@nonoun/nui-codemirror';
+* import { createEditorView } from '@nonoun/native-codemirror';
 *
 * const view = createEditorView(document.getElementById('editor')!, {
 *   doc: 'console.log("hello");',
@@ -412,7 +411,8 @@ function me(e, t) {
 			doc: r,
 			extensions: o
 		}),
-		parent: e
+		parent: e,
+		root: e.ownerDocument
 	});
 }
-export { N as Compartment, e as Decoration, pe as EditorState, t as EditorView, l as HighlightStyle, 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, te as highlightActiveLineGutter, y as history, x as historyKeymap, ce as indentOnInput, re as keymap, ae as lineNumbers, $ as nuiBaseExtensions, Z as nuiHighlightStyle, Q as nuiSyntaxHighlighting, X as nuiTheme, C as redo, ue as syntaxHighlighting, fe as syntaxTree, h as tags, w as undo };
+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 };

package/dist/theme.d.ts

@@ -6,7 +6,7 @@
  * with { dark: true } and HighlightStyle.define() for syntax tokens.
  */
 import { HighlightStyle } from '@codemirror/language';
-export declare const nuiTheme: import("@codemirror/state").Extension;
-export declare const nuiHighlightStyle: HighlightStyle;
-export declare const nuiSyntaxHighlighting: import("@codemirror/state").Extension;
+export declare const NTheme: import("@codemirror/state").Extension;
+export declare const NHighlightStyle: HighlightStyle;
+export declare const NSyntaxHighlighting: import("@codemirror/state").Extension;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -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,QAAQ,uCAqKpB,CAAC;AAMF,eAAO,MAAM,iBAAiB,gBAoF5B,CAAC;AAEH,eAAO,MAAM,qBAAqB,uCAAwC,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-codemirror",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Shared CodeMirror 6 integration layer for @nonoun/native-ui ecosystem",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
   "scripts": {
     "build": "npm run build:js && npm run build:css && npm run build:types",
     "build:js": "vite build",
-    "build:css": "cp src/css/native-codemirror.css dist/native-codemirror.css",
+    "build:css": "cp src/css/codemirror.css dist/native-codemirror.css",
     "build:types": "tsc -p tsconfig.build.json"
   },
   "publishConfig": {