niuma-ui 2.0.4 → 2.1.0

package/dist/components/code-editor/src/code-mirror-diagnostics.js

@@ -1,4 +1,4 @@
-import { Compartment, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
 //#region src/components/code-editor/src/code-mirror-diagnostics.ts
 var setDiagnosticsEffect = StateEffect.define();
@@ -24,12 +24,11 @@ var diagnosticField = StateField.define({
 	},
 	provide: (f) => EditorView.decorations.from(f)
 });
-var diagnosticCompartment = new Compartment();
 function diagnosticExtensions() {
-	return diagnosticCompartment.of([diagnosticField]);
+	return [diagnosticField];
 }
 function setEditorDiagnostics(view, diags) {
 	view.dispatch({ effects: setDiagnosticsEffect.of(diags) });
 }
 //#endregion
-export { diagnosticCompartment, diagnosticExtensions, setEditorDiagnostics };
+export { diagnosticExtensions, setEditorDiagnostics };

package/dist/components/code-editor/src/code-mirror-ghost.d.ts

@@ -2,7 +2,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 export declare const setGhostCompletion: import("@codemirror/state").StateEffectType<string | null>;
 export interface CodeMirrorGhostHandlers {
-    completionRequest?: (prefix: string, suffix: string, line: number, column: number) => Promise<string | null>;
+    completionRequest?: (prefix: string, suffix: string, line: number, column: number, signal?: AbortSignal) => Promise<string | null>;
 }
 export declare function codeMirrorGhostExtensions(handlers: () => CodeMirrorGhostHandlers, scheduleDebounced: (fn: () => void) => void, cancelScheduled?: () => void): Extension[];
 export declare function clearGhostCompletion(view: EditorView): void;

package/dist/components/code-editor/src/code-mirror-ghost.js

@@ -1,3 +1,4 @@
+import { editorAbortSession, isEditorViewAlive } from "./code-mirror-session.js";
 import { posToLineColumn } from "./code-mirror-intel.js";
 import { Prec, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView, WidgetType, keymap } from "@codemirror/view";
@@ -68,7 +69,12 @@ function readGhostAtCursor(view) {
 }
 function codeMirrorGhostExtensions(handlers, scheduleDebounced, cancelScheduled) {
 	let seq = 0;
+	const session = editorAbortSession(() => {
+		seq += 1;
+		cancelScheduled?.();
+	});
 	return [
+		session,
 		ghostMetaField,
 		ghostField,
 		EditorView.updateListener.of((update) => {
@@ -79,12 +85,14 @@ function codeMirrorGhostExtensions(handlers, scheduleDebounced, cancelScheduled)
 			const id = ++seq;
 			scheduleDebounced(() => {
 				const view = update.view;
+				if (!isEditorViewAlive(view)) return;
 				const pos = view.state.selection.main.head;
 				const prefix = view.state.doc.sliceString(0, pos);
 				const suffix = view.state.doc.sliceString(pos);
 				const { line, column } = posToLineColumn(view, pos);
-				h.completionRequest(prefix, suffix, line, column).then((text) => {
-					if (id !== seq) return;
+				const signal = view.plugin(session)?.nextSignal();
+				Promise.resolve(h.completionRequest(prefix, suffix, line, column, signal)).then((text) => {
+					if (signal?.aborted || id !== seq || !isEditorViewAlive(view)) return;
 					if (!text?.trim()) {
 						view.dispatch({ effects: setGhostCompletion.of(null) });
 						return;
@@ -92,7 +100,7 @@ function codeMirrorGhostExtensions(handlers, scheduleDebounced, cancelScheduled)
 					const current = view.state.selection.main.head;
 					if (view.state.doc.sliceString(current) !== suffix) return;
 					view.dispatch({ effects: setGhostCompletion.of(text) });
-				});
+				}).catch(() => {});
 			});
 		}),
 		Prec.highest(keymap.of([{
@@ -127,6 +135,7 @@ function codeMirrorGhostExtensions(handlers, scheduleDebounced, cancelScheduled)
 	];
 }
 function clearGhostCompletion(view) {
+	if (!isEditorViewAlive(view)) return;
 	view.dispatch({ effects: setGhostCompletion.of(null) });
 }
 //#endregion

package/dist/components/code-editor/src/code-mirror-inline-edit.js

@@ -1,3 +1,4 @@
+import { isEditorViewAlive } from "./code-mirror-session.js";
 import { Prec } from "@codemirror/state";
 import { keymap } from "@codemirror/view";
 //#region src/components/code-editor/src/code-mirror-inline-edit.ts
@@ -37,13 +38,17 @@ function codeMirrorInlineEditExtension(onTrigger) {
 	}]));
 }
 function replaceEditorRange(view, from, to, insert) {
+	if (!isEditorViewAlive(view)) return;
+	const length = view.state.doc.length;
+	const start = Math.max(0, Math.min(from, length));
+	const end = Math.max(start, Math.min(to, length));
 	view.dispatch({
 		changes: {
-			from,
-			to,
+			from: start,
+			to: end,
 			insert
 		},
-		selection: { anchor: from + insert.length }
+		selection: { anchor: start + insert.length }
 	});
 	view.focus();
 }

package/dist/components/code-editor/src/code-mirror-intel.d.ts

@@ -1,8 +1,8 @@
 import { EditorView } from '@codemirror/view';
 import type { Extension } from '@codemirror/state';
 export interface CodeMirrorIntelHandlers {
-    hoverRequest?: (line: number, column: number) => Promise<string | null>;
-    definitionRequest?: (line: number, column: number) => Promise<{
+    hoverRequest?: (line: number, column: number, signal?: AbortSignal) => Promise<string | null>;
+    definitionRequest?: (line: number, column: number, signal?: AbortSignal) => Promise<{
         file: string;
         line: number;
         column?: number;

package/dist/components/code-editor/src/code-mirror-intel.js

@@ -1,3 +1,4 @@
+import { editorAbortSession, isEditorViewAlive } from "./code-mirror-session.js";
 import { EditorView, hoverTooltip } from "@codemirror/view";
 //#region src/components/code-editor/src/code-mirror-intel.ts
 function posToLineColumn(view, pos) {
@@ -8,6 +9,7 @@ function posToLineColumn(view, pos) {
 	};
 }
 function goToPosition(view, line, column = 1) {
+	if (!isEditorViewAlive(view)) return;
 	const doc = view.state.doc;
 	const ln = Math.min(Math.max(1, line), doc.lines);
 	const pos = doc.line(ln).from + Math.max(0, column - 1);
@@ -18,45 +20,54 @@ function goToPosition(view, line, column = 1) {
 	view.focus();
 }
 function codeMirrorIntelExtensions(handlers) {
-	return [hoverTooltip(async (view, pos) => {
-		const h = handlers();
-		if (!h.hoverRequest) return null;
-		const { line, column } = posToLineColumn(view, pos);
-		const text = await h.hoverRequest(line, column);
-		if (!text?.trim()) return null;
-		return {
-			pos,
-			above: true,
-			create() {
-				const dom = document.createElement("div");
-				dom.className = "rs-code-editor__hover";
-				dom.textContent = text;
-				return { dom };
-			}
-		};
-	}, { hoverTime: 450 }), EditorView.domEventHandlers({ mousedown(event, view) {
-		if (!event.ctrlKey && !event.metaKey) return false;
-		const h = handlers();
-		if (!h.definitionRequest) return false;
-		const pos = view.posAtCoords({
-			x: event.clientX,
-			y: event.clientY
-		});
-		if (pos == null) return false;
-		const { line, column } = posToLineColumn(view, pos);
-		h.definitionRequest(line, column).then((loc) => {
-			if (!loc?.line) return;
-			const current = (h.currentFilePath ?? "").replace(/\\/g, "/");
-			const target = (loc.file ?? "").replace(/\\/g, "/");
-			if (target && current && target !== current) {
-				h.onGotoDefinition?.(loc);
-				return;
-			}
-			goToPosition(view, loc.line, loc.column ?? 1);
-		});
-		event.preventDefault();
-		return true;
-	} })];
+	const hoverSession = editorAbortSession();
+	const definitionSession = editorAbortSession();
+	return [
+		hoverSession,
+		definitionSession,
+		hoverTooltip(async (view, pos) => {
+			const h = handlers();
+			if (!h.hoverRequest || !isEditorViewAlive(view)) return null;
+			const { line, column } = posToLineColumn(view, pos);
+			const signal = view.plugin(hoverSession)?.nextSignal();
+			const text = await h.hoverRequest(line, column, signal);
+			if (signal?.aborted || !isEditorViewAlive(view) || !text?.trim()) return null;
+			return {
+				pos,
+				above: true,
+				create() {
+					const dom = document.createElement("div");
+					dom.className = "rs-code-editor__hover";
+					dom.textContent = text;
+					return { dom };
+				}
+			};
+		}, { hoverTime: 450 }),
+		EditorView.domEventHandlers({ mousedown(event, view) {
+			if (!event.ctrlKey && !event.metaKey) return false;
+			const h = handlers();
+			if (!h.definitionRequest || !isEditorViewAlive(view)) return false;
+			const pos = view.posAtCoords({
+				x: event.clientX,
+				y: event.clientY
+			});
+			if (pos == null) return false;
+			const { line, column } = posToLineColumn(view, pos);
+			const signal = view.plugin(definitionSession)?.nextSignal();
+			Promise.resolve(h.definitionRequest(line, column, signal)).then((loc) => {
+				if (signal?.aborted || !isEditorViewAlive(view) || !loc?.line) return;
+				const current = (h.currentFilePath ?? "").replace(/\\/g, "/");
+				const target = (loc.file ?? "").replace(/\\/g, "/");
+				if (target && current && target !== current) {
+					h.onGotoDefinition?.(loc);
+					return;
+				}
+				goToPosition(view, loc.line, loc.column ?? 1);
+			}).catch(() => {});
+			event.preventDefault();
+			return true;
+		} })
+	];
 }
 //#endregion
 export { codeMirrorIntelExtensions, goToPosition, posToLineColumn };

package/dist/components/code-editor/src/code-mirror-lang.js

@@ -85,6 +85,10 @@ async function resolveCodeMirrorLanguage(lang, options) {
 				const { yaml } = await import("@codemirror/lang-yaml");
 				return [yaml()];
 			}
+			case "toml": {
+				const [{ StreamLanguage }, { toml }] = await Promise.all([import("@codemirror/language"), import("@codemirror/legacy-modes/mode/toml")]);
+				return [StreamLanguage.define(toml)];
+			}
 			case "vue": {
 				const { html } = await import("@codemirror/lang-html");
 				return [html()];

package/dist/components/code-editor/src/code-mirror-session.d.ts

@@ -0,0 +1,13 @@
+import { EditorView, ViewPlugin, type PluginValue } from '@codemirror/view';
+/** 已 destroy 的 EditorView 再 dispatch 会抛错。用 DOM 是否还在文档里判断。 */
+export declare function isEditorViewAlive(view: EditorView | null | undefined): view is EditorView;
+/** 插件值只对外暴露 nextSignal；controller 留在实现里。 */
+interface EditorAbortSession extends PluginValue {
+    nextSignal(): AbortSignal;
+}
+/**
+ * 异步补全 / 悬停 / 跳转各持有一个 AbortController。
+ * 下一次请求或视图 destroy 时 abort，避免卸载后继续 dispatch。
+ */
+export declare function editorAbortSession(onDestroy?: () => void): ViewPlugin<EditorAbortSession>;
+export {};

package/dist/components/code-editor/src/code-mirror-session.js

@@ -0,0 +1,30 @@
+import { ViewPlugin } from "@codemirror/view";
+//#region src/components/code-editor/src/code-mirror-session.ts
+/** 已 destroy 的 EditorView 再 dispatch 会抛错。用 DOM 是否还在文档里判断。 */
+function isEditorViewAlive(view) {
+	if (!view) return false;
+	const dom = view.dom;
+	return !!dom && dom.isConnected;
+}
+/**
+* 异步补全 / 悬停 / 跳转各持有一个 AbortController。
+* 下一次请求或视图 destroy 时 abort，避免卸载后继续 dispatch。
+*/
+function editorAbortSession(onDestroy) {
+	return ViewPlugin.fromClass(class {
+		controller = null;
+		constructor(_view) {}
+		nextSignal() {
+			this.controller?.abort();
+			this.controller = new AbortController();
+			return this.controller.signal;
+		}
+		destroy() {
+			this.controller?.abort();
+			this.controller = null;
+			onDestroy?.();
+		}
+	});
+}
+//#endregion
+export { editorAbortSession, isEditorViewAlive };

package/dist/components/config-provider/src/RsConfigProvider.css

@@ -1,5 +1,5 @@
 
-.rs-config-provider[data-v-2be1193e] {
+.rs-config-provider[data-v-baff9acb] {
   color: var(--rs-text-primary);
   background: var(--rs-bg);
   height: 100%;

package/dist/components/config-provider/src/RsConfigProvider.d.ts

@@ -18,9 +18,9 @@ type __VLS_Props = {
      */
     themeScope?: 'global' | 'local';
 };
-declare var __VLS_8: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     dir: RsDirMode;

package/dist/components/config-provider/src/RsConfigProvider.impl.js

@@ -1,9 +1,8 @@
 import { resolveHostLocale } from "../../../locale/resolve-host.js";
 import { applyTheme, subscribePreferredColorScheme } from "../../../theme/apply.js";
 import { createRsConfigState, provideRsConfig } from "../../../composables/useRsConfig.js";
-import { applyLocale, resolveDirMode } from "../../../locale/apply.js";
-import { ConfigProvider } from "../../_shared/src/reka.js";
-import { computed, createBlock, createElementVNode, defineComponent, onBeforeUnmount, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
+import { applyLocale } from "../../../locale/apply.js";
+import { createElementBlock, defineComponent, onBeforeUnmount, openBlock, ref, renderSlot, watch } from "vue";
 //#region src/components/config-provider/src/RsConfigProvider.vue?vue&type=script&setup=true&lang.ts
 var RsConfigProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RsConfigProvider",
@@ -74,23 +73,15 @@ var RsConfigProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				syncLocale();
 			}
 		});
-		const resolvedDir = computed(() => resolveDirMode(config.dir.value, config.locale.value));
-		const rekaLocale = computed(() => config.locale.value);
 		onBeforeUnmount(() => {
 			stopPreferred?.();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ConfigProvider), {
-				dir: resolvedDir.value,
-				locale: rekaLocale.value
-			}, {
-				default: withCtx(() => [createElementVNode("div", {
-					ref_key: "rootEl",
-					ref: rootEl,
-					class: "rs-config-provider"
-				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)]),
-				_: 3
-			}, 8, ["dir", "locale"]);
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				class: "rs-config-provider"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512);
 		};
 	}
 });

package/dist/components/config-provider/src/RsConfigProvider.js

@@ -3,6 +3,6 @@ import RsConfigProvider_vue_vue_type_script_setup_true_lang_default from "./RsCo
 
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/config-provider/src/RsConfigProvider.vue
-var RsConfigProvider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsConfigProvider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2be1193e"]]);
+var RsConfigProvider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsConfigProvider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-baff9acb"]]);
 //#endregion
 export { RsConfigProvider_default as default };

package/dist/components/context-menu/index.d.ts

@@ -1,2 +1,2 @@
 export { default as RsContextMenu } from './src/RsContextMenu.js';
-export type { RsContextMenuItem } from './src/context-menu-utils';
+export type { RsContextMenuExpose, RsContextMenuGetPopupContainer, RsContextMenuItem, RsContextMenuItemSlot, RsContextMenuItemType, RsContextMenuPoint, } from './src/context-menu-utils';

package/dist/components/context-menu/src/RsContextMenu.css

@@ -1,45 +1,61 @@
 
-/* ── 菜单容器：macOS 毛玻璃浮层 ── */
+/* 实底。半透明加 backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
+.rs-context-menu__portal {
+  display: contents;
+}
 .rs-context-menu__content,
 .rs-context-menu__sub-content {
-  /* 与 Select/DatePicker 一致：Portal 挂到 body 时须高于 modal，否则 Dialog 内右键会被挡住 */
-  z-index: calc(var(--rs-z-modal) + 2);
+  position: fixed;
+  z-index: var(--rs-ctx-z);
   box-sizing: border-box;
-  min-width: 11rem;
-  max-width: min(22rem, calc(100vw - 1rem));
-  /* 多项 / 多级时贴边：用 popper 可用高度限制，避免溢出视口无法点选 */
-  max-height: var(--reka-context-menu-content-available-height, calc(100vh - 1rem));
-  padding: 5px;
-  border-radius: 10px;
+  min-width: var(--rs-ctx-min-width);
+  max-width: min(var(--rs-ctx-max-width), calc(100vw - 1rem));
+  width: max-content;
+  padding: var(--rs-ctx-pad);
+  border-radius: var(--rs-ctx-radius);
   border: 0.5px solid var(--rs-ctx-border);
-  /* 实底。半透明 + backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
   background: var(--rs-ctx-bg);
   box-shadow: var(--rs-ctx-shadow);
+  color: var(--rs-ctx-fg);
   outline: none;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-
-/* 主菜单入场动画（从鼠标位置展开） */
 .rs-context-menu__content {
-  transform-origin: var(--reka-context-menu-content-transform-origin, top left);
-  animation: rs-ctx-in 0.13s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+  transform-origin: top left;
 }
-
-/* 子菜单：仅淡入，避免多层快速切换时 scale 造成抖动感 */
-.rs-context-menu__sub-content {
-  transform-origin: var(--reka-popper-transform-origin, left center);
-  animation: rs-ctx-sub-in 0.1s ease-out;
+.rs-context-menu__content:not([data-placed]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='top'] {
+  transform-origin: top right;
+}
+.rs-context-menu__content[data-origin-x='left'][data-origin-y='bottom'] {
+  transform-origin: bottom left;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='bottom'] {
+  transform-origin: bottom right;
+}
+.rs-context-menu__content[data-placed] {
+  animation: rs-ctx-in var(--rs-ctx-motion-in) cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+.rs-context-menu__sub-content[data-placed] {
+  animation: rs-ctx-sub-in var(--rs-ctx-motion-sub) ease-out;
+}
+.rs-context-menu__sub-content[data-origin-x='left'] {
+  transform-origin: left center;
+}
+.rs-context-menu__sub-content[data-origin-x='right'] {
+  transform-origin: right center;
 }
 @keyframes rs-ctx-in {
 from {
     opacity: 0;
-    transform: scale(0.95);
 }
 to {
     opacity: 1;
-    transform: scale(1);
 }
 }
 @keyframes rs-ctx-sub-in {
@@ -50,129 +66,139 @@ to {
     opacity: 1;
 }
 }
-
-/* ── 菜单项 ── */
+.rs-context-menu--ssm {
+  --rs-ctx-item-height: 1.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--sm {
+  --rs-ctx-item-height: 1.5rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--md {
+  --rs-ctx-item-height: 2rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
+.rs-context-menu--lg {
+  --rs-ctx-item-height: 2.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
 .rs-context-menu__item {
   display: flex;
   align-items: center;
   gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
   padding: 0 8px 0 0;
-  height: 24px;
-  border-radius: 6px;
-  font-size: var(--rs-font-size-xs);
+  min-height: var(--rs-ctx-item-height);
+  border: 0;
+  border-radius: var(--rs-ctx-item-radius);
+  background: transparent;
+  font: inherit;
+  font-size: var(--rs-ctx-font-size);
   font-weight: var(--rs-font-weight-regular);
-  line-height: 1;
-  color: var(--rs-text);
+  line-height: 1.2;
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
   cursor: default;
+  appearance: none;
   outline: none;
   user-select: none;
-  transition:
-    background 0.08s,
-    color 0.08s;
 }
-
-/* 图标占位列（固定 28px，居中对齐） */
 .rs-context-menu__icon-cell {
   flex-shrink: 0;
-  width: 28px;
+  width: var(--rs-ctx-icon-col);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--rs-ctx-icon);
+  color: var(--rs-ctx-muted);
 }
-
-/* 文本 */
-.rs-context-menu__label {
+.rs-context-menu__text {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+.rs-context-menu__label,
+.rs-context-menu__hint {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-context-menu__hint {
+  color: var(--rs-ctx-muted);
+  font-size: var(--rs-font-size-xs);
 }
-
-/* 键盘快捷键 */
 .rs-context-menu__shortcut {
   flex-shrink: 0;
   margin-inline-start: 16px;
-  font-size: var(--rs-font-size-xs);
+  font-size: var(--rs-ctx-font-size);
   font-weight: var(--rs-font-weight-regular);
-  color: var(--rs-ctx-shortcut);
+  color: var(--rs-ctx-muted);
   letter-spacing: 0.02em;
   font-family: var(--rs-font-sans);
 }
-
-/* 子菜单展开箭头 */
 .rs-context-menu__arrow {
   flex-shrink: 0;
   margin-inline-start: 6px;
-  color: var(--rs-ctx-icon);
+  color: var(--rs-ctx-muted);
+}
+[dir='rtl'] .rs-context-menu__arrow {
+  transform: scaleX(-1);
 }
-
-/* 悬停 / 子菜单已展开：蓝色高亮条（macOS 主色调） */
 .rs-context-menu__item[data-highlighted],
 .rs-context-menu__item[data-state='open'] {
-  background: var(--rs-primary);
-  color: #ffffff;
+  background: var(--rs-ctx-item-active-bg);
+  color: var(--rs-ctx-item-active-fg);
 }
 .rs-context-menu__item[data-highlighted] .rs-context-menu__icon-cell,
 .rs-context-menu__item[data-highlighted] .rs-context-menu__shortcut,
 .rs-context-menu__item[data-highlighted] .rs-context-menu__arrow,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__hint,
 .rs-context-menu__item[data-state='open'] .rs-context-menu__icon-cell,
 .rs-context-menu__item[data-state='open'] .rs-context-menu__shortcut,
-.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow {
-  color: rgba(255 255 255 / 0.75);
+.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__hint {
+  color: var(--rs-ctx-item-active-muted);
+}
+.rs-context-menu__item:focus-visible {
+  outline: var(--rs-focus-ring-width, 2px) solid var(--rs-focus-ring);
+  outline-offset: -2px;
 }
-
-/* 危险项 */
 .rs-context-menu__item--danger {
-  color: var(--rs-danger);
+  color: var(--rs-ctx-danger);
 }
 .rs-context-menu__item--danger .rs-context-menu__icon-cell {
-  color: var(--rs-danger);
+  color: var(--rs-ctx-danger);
 }
 .rs-context-menu__item--danger[data-highlighted],
 .rs-context-menu__item--danger[data-state='open'] {
-  background: var(--rs-danger);
-  color: #ffffff;
+  background: var(--rs-ctx-danger);
+  color: var(--rs-ctx-item-active-fg);
 }
 .rs-context-menu__item--danger[data-highlighted] .rs-context-menu__icon-cell,
 .rs-context-menu__item--danger[data-state='open'] .rs-context-menu__icon-cell {
-  color: rgba(255 255 255 / 0.75);
+  color: var(--rs-ctx-item-active-muted);
 }
-
-/* 禁用态 */
 .rs-context-menu__item[data-disabled] {
-  opacity: 0.38;
+  opacity: var(--rs-ctx-disabled-opacity);
   cursor: not-allowed;
 }
-
-/* 分隔线：更细腻 */
 .rs-context-menu__separator {
   height: 1px;
   margin: 5px 0;
+  border: 0;
   background: var(--rs-ctx-separator);
 }
-
-/* ── 主题变量：深色 ── */
-:root,
-[data-rs-theme='dark'] {
-  --rs-ctx-bg: #2c2c2e;
-  --rs-ctx-border: rgba(255, 255, 255, 0.13);
-  --rs-ctx-shadow:
-    0 0 0 0.5px rgba(255, 255, 255, 0.08),
-    0 2px 8px rgba(0, 0, 0, 0.4),
-    0 8px 32px rgba(0, 0, 0, 0.55);
-  --rs-ctx-icon: rgba(235, 235, 245, 0.5);
-  --rs-ctx-shortcut: rgba(235, 235, 245, 0.4);
-  --rs-ctx-separator: rgba(255, 255, 255, 0.1);
-}
-
-/* ── 主题变量：亮色 ── */
-[data-rs-theme='light'] {
-  --rs-ctx-bg: #f5f5f7;
-  --rs-ctx-border: rgba(0, 0, 0, 0.1);
-  --rs-ctx-shadow:
-    0 0 0 0.5px rgba(0, 0, 0, 0.06),
-    0 2px 6px rgba(0, 0, 0, 0.12),
-    0 8px 28px rgba(0, 0, 0, 0.18);
-  --rs-ctx-icon: rgba(60, 60, 67, 0.5);
-  --rs-ctx-shortcut: rgba(60, 60, 67, 0.4);
-  --rs-ctx-separator: rgba(60, 60, 67, 0.1);
+.rs-context-menu__group {
+  margin: 0;
+  padding: 6px 8px 2px;
+  font-size: var(--rs-font-size-xs);
+  line-height: 1.2;
+  color: var(--rs-ctx-muted);
+  user-select: none;
 }