niuma-ui 1.3.9 → 2.0.1

package/dist/components/card/src/RsCard.impl.js

@@ -0,0 +1,104 @@
+import { rsRadiusCss } from "../../_shared/src/resolve-radius.js";
+import { Primitive } from "../../_shared/src/reka.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+//#region src/components/card/src/RsCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-card__cover"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "rs-card__header"
+};
+var _hoisted_3 = { class: "rs-card__heading" };
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-card__title"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "rs-card__description"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "rs-card__actions"
+};
+var _hoisted_7 = {
+	key: 2,
+	class: "rs-card__footer"
+};
+var RsCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsCard",
+	props: {
+		as: { default: "section" },
+		title: {},
+		description: {},
+		padding: {
+			type: Boolean,
+			default: true
+		},
+		elevated: {
+			type: Boolean,
+			default: false
+		},
+		borderless: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "grouped" },
+		size: { default: "md" },
+		radius: {},
+		hoverable: {
+			type: Boolean,
+			default: false
+		},
+		clip: {
+			type: Boolean,
+			default: false
+		},
+		fill: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const hasHeader = computed(() => Boolean(props.title || props.description || slots.header || slots.actions));
+		const hasFooter = computed(() => Boolean(slots.footer));
+		/** 卡片圆角只认 props，不跟 controlRadius 走 */
+		const resolvedRadius = computed(() => props.radius ?? "md");
+		const rootStyle = computed(() => ({ "--rs-card-radius": rsRadiusCss(resolvedRadius.value) }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				as: __props.as,
+				class: normalizeClass(["rs-card", [
+					`rs-card--${__props.variant}`,
+					`rs-card--${__props.size}`,
+					{
+						"rs-card--elevated": __props.elevated,
+						"rs-card--borderless": __props.borderless,
+						"rs-card--hoverable": __props.hoverable,
+						"rs-card--clip": __props.clip,
+						"rs-card--fill": __props.fill
+					}
+				]]),
+				style: normalizeStyle(rootStyle.value)
+			}, {
+				default: withCtx(() => [
+					_ctx.$slots.cover ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "cover")])) : createCommentVNode("", true),
+					hasHeader.value ? (openBlock(), createElementBlock("header", _hoisted_2, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "header", {}, () => [__props.title ? (openBlock(), createElementBlock("h3", _hoisted_4, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["rs-card__body", { "rs-card__body--padded": __props.padding }]) }, [renderSlot(_ctx.$slots, "default")], 2),
+					hasFooter.value ? (openBlock(), createElementBlock("footer", _hoisted_7, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style"
+			]);
+		};
+	}
+});
+//#endregion
+export { RsCard_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/card/src/RsCard.js

@@ -0,0 +1,7 @@
+import './RsCard.css'
+import RsCard_vue_vue_type_script_setup_true_lang_default from "./RsCard.impl.js";
+
+//#region src/components/card/src/RsCard.vue
+var RsCard_default = RsCard_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsCard_default as default };

package/dist/components/cascader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RsCascader } from './src/RsCascader.js';
+export type { RsCascaderExpandTrigger, RsCascaderOption, RsCascaderPath, } from './src/cascader-utils';

package/dist/components/cascader/src/RsCascader.css

@@ -0,0 +1,81 @@
+
+.rs-cascader[data-v-4b45dd5a] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 12rem;
+  height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  cursor: pointer;
+}
+.rs-cascader--sm[data-v-4b45dd5a] {
+  height: var(--rs-control-height-sm);
+}
+.rs-cascader--lg[data-v-4b45dd5a] {
+  height: var(--rs-control-height-lg);
+}
+.rs-cascader--disabled[data-v-4b45dd5a] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-cascader__placeholder[data-v-4b45dd5a] {
+  flex: 1;
+  color: var(--rs-muted);
+  text-align: start;
+}
+.rs-cascader__value[data-v-4b45dd5a] {
+  flex: 1;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-cascader__clear[data-v-4b45dd5a],
+.rs-cascader__icon[data-v-4b45dd5a] {
+  color: var(--rs-muted);
+}
+.rs-cascader__clear[data-v-4b45dd5a] {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.rs-cascader__panel[data-v-4b45dd5a] {
+  display: flex;
+  min-height: 8rem;
+  max-height: 16rem;
+}
+.rs-cascader__col[data-v-4b45dd5a] {
+  min-width: 8rem;
+  margin: 0;
+  padding: var(--rs-space-xs);
+  overflow: auto;
+  border-inline-end: 1px solid var(--rs-border);
+  list-style: none;
+}
+.rs-cascader__col[data-v-4b45dd5a]:last-child {
+  border-inline-end: 0;
+}
+.rs-cascader__item[data-v-4b45dd5a] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  border-radius: var(--rs-radius-xs);
+  cursor: pointer;
+}
+.rs-cascader__item--active[data-v-4b45dd5a],
+.rs-cascader__item[data-v-4b45dd5a]:hover:not(.rs-cascader__item--disabled) {
+  background: var(--rs-surface-hover);
+}
+.rs-cascader__item--disabled[data-v-4b45dd5a] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/dist/components/cascader/src/RsCascader.d.ts

@@ -0,0 +1,34 @@
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsCascaderExpandTrigger, type RsCascaderOption, type RsCascaderPath } from './cascader-utils';
+type __VLS_Props = {
+    options: readonly RsCascaderOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    changeOnSelect?: boolean;
+    expandTrigger?: RsCascaderExpandTrigger;
+    separator?: string;
+    size?: RsComponentSize;
+};
+type __VLS_ModelProps = {
+    modelValue?: RsCascaderPath;
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (path: RsCascaderPath) => any;
+    "update:modelValue": (value: RsCascaderPath) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((path: RsCascaderPath) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: RsCascaderPath) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    separator: string;
+    allowClear: boolean;
+    changeOnSelect: boolean;
+    expandTrigger: RsCascaderExpandTrigger;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/cascader/src/RsCascader.impl.js

@@ -0,0 +1,138 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import RsPopover_default from "../../popover/src/RsPopover.js";
+import { cascaderColumns, cascaderDisplay, isCascaderLeaf } from "./cascader-utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+//#region src/components/cascader/src/RsCascader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-cascader__value"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "rs-cascader__placeholder"
+};
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = ["onClick", "onMouseenter"];
+var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsCascader",
+	__name: "RsCascader",
+	props: /*@__PURE__*/ mergeModels({
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		changeOnSelect: {
+			type: Boolean,
+			default: false
+		},
+		expandTrigger: { default: "click" },
+		separator: { default: " / " },
+		size: {}
+	}, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue", "update:open"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const columns = computed(() => cascaderColumns(props.options, model.value));
+		const display = computed(() => cascaderDisplay(props.options, model.value, props.separator));
+		function isActive(depth, value) {
+			return String(model.value[depth] ?? "") === String(value);
+		}
+		function pick(depth, option) {
+			if (option.disabled) return;
+			const next = [...model.value.slice(0, depth), option.value];
+			model.value = next;
+			emit("change", next);
+			if (isCascaderLeaf(option) || props.changeOnSelect && props.expandTrigger === "click") {
+				if (isCascaderLeaf(option)) open.value = false;
+			}
+		}
+		function onHover(depth, option) {
+			if (props.expandTrigger !== "hover" || option.disabled) return;
+			if (!isCascaderLeaf(option)) model.value = [...model.value.slice(0, depth), option.value];
+		}
+		function onClear() {
+			model.value = [];
+			emit("change", []);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RsPopover_default, {
+				open: open.value,
+				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+				side: "bottom",
+				align: "start",
+				width: "auto"
+			}, {
+				content: withCtx(() => [createElementVNode("div", {
+					class: "rs-cascader__panel",
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, depth) => {
+					return openBlock(), createElementBlock("ul", {
+						key: depth,
+						class: "rs-cascader__col"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col, (opt) => {
+						return openBlock(), createElementBlock("li", {
+							key: String(opt.value),
+							class: normalizeClass(["rs-cascader__item", {
+								"rs-cascader__item--active": isActive(depth, opt.value),
+								"rs-cascader__item--disabled": opt.disabled
+							}]),
+							onClick: ($event) => pick(depth, opt),
+							onMouseenter: ($event) => onHover(depth, opt)
+						}, [createElementVNode("span", null, toDisplayString(opt.label), 1), !unref(isCascaderLeaf)(opt) ? (openBlock(), createBlock(RsIcon_default, {
+							key: 0,
+							name: "chevron-right",
+							size: 12
+						})) : createCommentVNode("", true)], 42, _hoisted_5);
+					}), 128))]);
+				}), 128))], 32)]),
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["rs-cascader", [`rs-cascader--${unref(resolvedSize)}`, { "rs-cascader--disabled": __props.disabled }]]),
+					disabled: __props.disabled
+				}, [
+					display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)),
+					__props.allowClear && display.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "rs-cascader__clear",
+						"aria-label": unref(t)("select.clear"),
+						onClick: withModifiers(onClear, ["stop"])
+					}, [createVNode(RsIcon_default, {
+						name: "x",
+						size: 12
+					})], 8, _hoisted_4)) : createCommentVNode("", true),
+					createVNode(RsIcon_default, {
+						name: "chevron-down",
+						size: 14,
+						class: "rs-cascader__icon"
+					})
+				], 10, _hoisted_1)]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { RsCascader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/cascader/src/RsCascader.js

@@ -0,0 +1,8 @@
+import './RsCascader.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsCascader_vue_vue_type_script_setup_true_lang_default from "./RsCascader.impl.js";
+
+//#region src/components/cascader/src/RsCascader.vue
+var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b45dd5a"]]);
+//#endregion
+export { RsCascader_default as default };

package/dist/components/cascader/src/cascader-utils.d.ts

@@ -0,0 +1,16 @@
+import type { RsSelectValue } from '../../select/src/select-utils';
+/** 级联选项，对齐 Ant Cascader options */
+export interface RsCascaderOption {
+    label: string;
+    value: RsSelectValue;
+    disabled?: boolean;
+    children?: RsCascaderOption[];
+    isLeaf?: boolean;
+}
+export type RsCascaderPath = RsSelectValue[];
+export type RsCascaderExpandTrigger = 'click' | 'hover';
+export declare function findCascaderOption(options: readonly RsCascaderOption[], value: RsSelectValue): RsCascaderOption | undefined;
+export declare function cascaderColumns(options: readonly RsCascaderOption[], path: RsCascaderPath): RsCascaderOption[][];
+export declare function cascaderLabels(options: readonly RsCascaderOption[], path: RsCascaderPath): string[];
+export declare function cascaderDisplay(options: readonly RsCascaderOption[], path: RsCascaderPath, separator?: string): string;
+export declare function isCascaderLeaf(option: RsCascaderOption): boolean;

package/dist/components/cascader/src/cascader-utils.js

@@ -0,0 +1,39 @@
+//#region src/components/cascader/src/cascader-utils.ts
+function findCascaderOption(options, value) {
+	return options.find((item) => String(item.value) === String(value));
+}
+function cascaderColumns(options, path) {
+	const columns = [options.slice()];
+	let level = options;
+	for (const token of path) {
+		const children = findCascaderOption(level, token)?.children;
+		if (!children?.length) break;
+		columns.push(children);
+		level = children;
+	}
+	return columns;
+}
+function cascaderLabels(options, path) {
+	const labels = [];
+	let level = options;
+	for (const token of path) {
+		const current = findCascaderOption(level, token);
+		if (!current) {
+			labels.push(String(token));
+			break;
+		}
+		labels.push(current.label);
+		level = current.children ?? [];
+	}
+	return labels;
+}
+function cascaderDisplay(options, path, separator = " / ") {
+	return cascaderLabels(options, path).join(separator);
+}
+function isCascaderLeaf(option) {
+	if (option.isLeaf === true) return true;
+	if (option.isLeaf === false) return false;
+	return !option.children?.length;
+}
+//#endregion
+export { cascaderColumns, cascaderDisplay, cascaderLabels, findCascaderOption, isCascaderLeaf };

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as RsCheckbox } from './src/RsCheckbox.js';

package/dist/components/checkbox/src/RsCheckbox.d.ts

@@ -0,0 +1,36 @@
+import type { RsComponentSize } from '../../../theme/types';
+type __VLS_Props = {
+    /** 半选（仅视觉；点击仍按 model 取反） */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: RsComponentSize;
+    /** 无障碍名称；有默认插槽文案时可省略 */
+    ariaLabel?: string;
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/src/RsCheckbox.impl.js

@@ -0,0 +1,86 @@
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, useId, useModel, withModifiers } from "vue";
+//#region src/components/checkbox/src/RsCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = [
+	"id",
+	"checked",
+	"disabled",
+	"aria-checked",
+	"aria-label"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-checkbox__label"
+};
+var RsCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsCheckbox",
+	props: /*@__PURE__*/ mergeModels({
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		ariaLabel: {},
+		id: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const props = __props;
+		const emit = __emit;
+		const autoId = useId();
+		const inputId = computed(() => props.id || autoId);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const rootClass = computed(() => [
+			"rs-checkbox",
+			`rs-checkbox--${resolvedSize.value}`,
+			{
+				"rs-checkbox--checked": model.value && !props.indeterminate,
+				"rs-checkbox--indeterminate": props.indeterminate,
+				"rs-checkbox--disabled": props.disabled
+			}
+		]);
+		function onChange(event) {
+			if (props.disabled) return;
+			const checked = event.target.checked;
+			model.value = checked;
+			emit("change", checked);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(rootClass.value),
+				for: inputId.value
+			}, [
+				createElementVNode("input", {
+					id: inputId.value,
+					class: "rs-checkbox__input",
+					type: "checkbox",
+					checked: model.value,
+					disabled: __props.disabled,
+					"aria-checked": __props.indeterminate ? "mixed" : model.value,
+					"aria-label": __props.ariaLabel,
+					onChange,
+					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, null, 40, _hoisted_2),
+				_cache[1] || (_cache[1] = createElementVNode("span", {
+					class: "rs-checkbox__box",
+					"aria-hidden": "true"
+				}, null, -1)),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsCheckbox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/checkbox/src/RsCheckbox.js

@@ -0,0 +1,7 @@
+import './RsCheckbox.css'
+import RsCheckbox_vue_vue_type_script_setup_true_lang_default from "./RsCheckbox.impl.js";
+
+//#region src/components/checkbox/src/RsCheckbox.vue
+var RsCheckbox_default = RsCheckbox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RsCheckbox_default as default };

package/dist/components/code-block/index.d.ts

@@ -0,0 +1 @@
+export { default as RsCodeBlock } from './src/RsCodeBlock.js';

package/dist/components/code-block/src/RsCodeBlock.css

@@ -0,0 +1,102 @@
+
+.rs-code-block[data-v-438706f0] {
+  margin: 0;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+  background: var(--rs-surface-elevated);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-code-block--plain[data-v-438706f0] {
+  border: 0;
+  border-radius: 0;
+}
+.rs-code-block--plain .rs-code-block__editor[data-v-438706f0] .cm-editor {
+  max-height: none;
+}
+.rs-code-block__bar[data-v-438706f0] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-xs) var(--rs-space-md);
+  border-bottom: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface-elevated) 80%, var(--rs-border) 20%);
+}
+.rs-code-block__lang[data-v-438706f0] {
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+  text-transform: lowercase;
+}
+.rs-code-block__actions[data-v-438706f0] {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+.rs-code-block__copy[data-v-438706f0] {
+  padding: 2px var(--rs-space-sm);
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  cursor: pointer;
+  transition: color 120ms, border-color 120ms, background 120ms;
+}
+.rs-code-block__copy[data-v-438706f0]:hover {
+  color: var(--rs-text);
+  border-color: var(--rs-border);
+  background: var(--rs-item-hover);
+}
+
+/* CodeMirror 编辑器区域：覆盖默认样式以融入设计系统 */
+.rs-code-block__editor[data-v-438706f0] .cm-editor {
+  background: var(--rs-surface-elevated) !important;
+  /* 最大高度限制，超出时内部滚动 */
+  max-height: 32rem;
+  overflow-y: auto;
+}
+
+/* 浅色模式：代码区用深色文字 */
+.rs-code-block__editor[data-v-438706f0] .cm-content {
+  color: var(--rs-foreground);
+}
+
+/* 行号区域背景与主体一致 */
+.rs-code-block__editor[data-v-438706f0] .cm-gutters {
+  background: color-mix(in srgb, var(--rs-surface-elevated) 85%, var(--rs-border) 15%) !important;
+  border-right-color: var(--rs-border-subtle) !important;
+  color: var(--rs-muted);
+}
+
+/* 激活行高亮跟随设计系统 */
+.rs-code-block__editor[data-v-438706f0] .cm-activeLine {
+  background: color-mix(in srgb, var(--rs-primary) 4%, transparent) !important;
+}
+.rs-code-block__editor[data-v-438706f0] .cm-activeLineGutter {
+  background: color-mix(in srgb, var(--rs-primary) 6%, transparent) !important;
+}
+.rs-code-block__editor[data-v-438706f0] .cm-scroller {
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
+}
+
+/* 只读时隐藏光标，保持纯展示外观 */
+.rs-code-block[data-v-438706f0]:not(.rs-code-block--editable) .cm-cursor {
+  display: none;
+}
+
+/* 去掉 CodeMirror 默认焦点描边，统一为 macOS 风格聚焦环 */
+.rs-code-block__editor[data-v-438706f0] .cm-editor.cm-focused {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+/* 选中区跟随设计系统主色 */
+.rs-code-block__editor[data-v-438706f0] .cm-selectionBackground {
+  background: color-mix(in srgb, var(--rs-primary) 22%, transparent) !important;
+}
+.rs-code-block__editor[data-v-438706f0] .cm-focused .cm-selectionBackground {
+  background: color-mix(in srgb, var(--rs-primary) 28%, transparent) !important;
+}