@marianmeres/stuic 3.138.0 → 3.140.0

package/dist/components/MarkdownEditor/_internal/codemirror.js

@@ -12,7 +12,7 @@ import { defaultKeymap, history, historyKeymap, redo, undo } from "@codemirror/c
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { drawSelection, EditorView, keymap, placeholder as cmPlaceholder, } from "@codemirror/view";
 /** Theme that inherits STUIC look via CSS vars rather than hard-coded values. */
 const stuicTheme = EditorView.theme({
     "&": {
@@ -23,7 +23,6 @@ const stuicTheme = EditorView.theme({
     ".cm-content": {
         fontFamily: "var(--stuic-markdown-editor-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
         padding: "0",
-        caretColor: "currentColor",
     },
     "&.cm-focused": { outline: "none" },
     ".cm-line": { padding: "0" },
@@ -33,6 +32,30 @@ const stuicTheme = EditorView.theme({
         color: "var(--stuic-input-placeholder, currentColor)",
         opacity: "0.5",
     },
+    // Caret + selection are DRAWN by `drawSelection()` (see the extensions below)
+    // instead of left to the browser. The native caret is unreliable on an EMPTY
+    // document that carries a placeholder widget — Chrome/Safari won't render it
+    // (the cursor sits before a `contenteditable=false` widget with no editable
+    // text beside it) until you start typing, which reads as a broken focus.
+    // Drawing the caret ourselves fixes that. Colors use `currentColor` / a
+    // mode-neutral translucent selection on purpose: CM's own light/dark detection
+    // is inert here (STUIC themes via `:root.dark`, not CM's dark facet), so its
+    // built-in dark caret/selection colors would never kick in.
+    //
+    // `borderLeftWidth: 2px` is deliberate: CM's default ~1.2px caret lands on a
+    // fractional device-pixel boundary at many layout offsets (the cursor also
+    // carries a `-0.6px` margin) and anti-aliases into invisibility on a light
+    // background — the very "no caret" symptom this fix targets. 2px always paints.
+    ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "currentColor",
+        borderLeftWidth: "2px",
+    },
+    "& .cm-selectionBackground": {
+        background: "var(--stuic-markdown-editor-selection-bg, rgb(128 128 128 / 0.3))",
+    },
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+        background: "var(--stuic-markdown-editor-selection-bg, rgb(128 128 128 / 0.3))",
+    },
 });
 /** Wrap the current selection with `before`/`after` markers (e.g. `**bold**`). */
 function wrapSelection(view, before, after = before) {
@@ -162,6 +185,7 @@ export function mountCodeMirror(host, opts) {
                 keymap.of([...defaultKeymap, ...historyKeymap]),
                 markdown({ codeLanguages: languages }),
                 EditorView.lineWrapping,
+                drawSelection(),
                 EditorView.editable.of(!opts.disabled),
                 EditorState.readOnly.of(!!opts.disabled),
                 ...(opts.placeholder ? [cmPlaceholder(opts.placeholder)] : []),

package/dist/components/Tree/README.md

@@ -82,6 +82,12 @@ Collapsing a branch also collapses all of its descendants.
 </Tree>
 ```
 
+> **Icon sizing tip:** render `renderIcon` SVGs at their native `viewBox` size (or an
+> integer divisor of it) — e.g. `16` for Bootstrap icons (`0 0 16 16`), `24`/`16`/`12`
+> for Lucide (`0 0 24 24`). A fractional downscale (e.g. a 16-unit icon at `size: 14`)
+> renders 1px strokes at sub-pixel width, which looks like the icon is clipped ~1px —
+> most visibly on icons whose shape touches the viewBox edge, such as file glyphs.
+
 ## Props
 
 | Prop               | Type                                                 | Default           | Description                                                           |

package/dist/components/Tree/index.css

@@ -117,6 +117,14 @@
 		opacity: var(--stuic-tree-icon-opacity);
 	}
 
+	/* Render icons as block so they sit on the pixel grid instead of the text
+	   baseline. Inline SVGs (the default vertical-align: baseline) land on a
+	   fractional pixel and shear ~1px off the bottom of full-viewBox glyphs
+	   (e.g. file icons whose shape touches the bottom edge). */
+	.stuic-tree-item svg {
+		display: block;
+	}
+
 	/* =============================================================================
 	   ITEM STATE STYLES
 	   ============================================================================= */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.138.0",
+	"version": "3.140.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",