sky-ui-kit 0.1.9 → 0.1.10

package/README.md

@@ -1,4 +1,10 @@
 # sky-ui-kit 组件与样式库
+
+## AI 接入入口：先选择使用方式
+
+当用户要求安装、引入 sky-ui-kit 时，请先读取当前安装包的 llms.txt 和 [HTML / Vue 接入判断](docs/HTML-INTEGRATION.md)，检查项目及真实 exports。只需外观时使用正式 HTML 样式接口（新版容器 sky-html 内原生控件自动换肤，data-sky-native="off" 局部退出）；需要交互时使用真实 Vue 组件，HTML 项目可局部挂载。需求不明确时先询问，接入后合并项目 AGENTS.md 规则，不能把 npm install 或仅加载 CSS 报告为完整组件接入。
+
+HTML 按需入口从 0.1.10 提供；0.1.9 使用完整 model-workspace.css。示例网站快速开始下方提供“HTML 按需样式接入”演示和完整可复制代码。
 
 组件用途、数据约定、事件语义和限制见 [组件使用说明](docs/COMPONENT-GUIDE.md)；完整类型与默认值见 [组件 API](docs/COMPONENT-API.md)。
 

package/components.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "sky-ui-kit",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "elementPlusVersion": "2.14.7",
   "setup": {
     "cssOnce": [

package/dist/html/button.css

@@ -0,0 +1,12 @@
+/* 原生按钮，显式 opt-in；不提供业务交互。保留旧工作区入口。 */
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-color-panel); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:8px 15px; font-weight:500; cursor: pointer; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(.primary, .accent, [data-variant="primary"]) { background: var(--userssite-color-primary); border-color: var(--userssite-color-primary); color: var(--userssite-color-on-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"] { background: var(--userssite-color-danger); color: var(--userssite-color-white); border-color: var(--userssite-color-danger); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled) { color:var(--userssite-color-primary); background:color-mix(in oklab,var(--userssite-color-primary) 10%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 30%,var(--userssite-color-panel)); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):active:not(:disabled) { filter: brightness(.94); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline: 2px solid var(--userssite-color-primary); outline-offset: 2px; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); color:var(--userssite-color-on-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):disabled { background:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:disabled { background:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }

package/dist/html/input.css

@@ -0,0 +1,39 @@
+/* 文本输入、select、textarea；复选框、单选、滑块、文件沿用浏览器。 */
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; max-width: 100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-input-bg); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:1px 11px; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::placeholder { color: var(--userssite-input-placeholder); opacity: 1; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled):not([readonly]):not(:where([aria-invalid="true"], :user-invalid)) { border-color: var(--userssite-color-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus { outline: none; outline-offset: 0; box-shadow: none; border-color: var(--userssite-color-primary); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[readonly] { background: var(--userssite-color-surface); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):is([aria-invalid="true"], :user-invalid) { border-color: var(--userssite-color-danger); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(textarea) { height:auto; min-height:var(--userssite-control-height-m); padding:5px 11px; line-height:1.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { appearance:none; box-sizing:border-box; display:inline-grid; place-content:center; vertical-align:middle; width:14px; height:14px; margin:0 6px 0 0; border:1px solid var(--userssite-color-border); border-radius:2px; background:var(--userssite-input-bg); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked { background:var(--userssite-color-primary); border-color:var(--userssite-color-primary); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::after { content:''; width:3px; height:7px; border:solid var(--userssite-color-on-primary); border-width:0 1px 1px 0; transform:rotate(45deg) scale(0); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked::after { transform:rotate(45deg) scale(1); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"] { border-radius:50%; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"]::after { width:4px; height:4px; border:0; border-radius:50%; background:var(--userssite-color-on-primary); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { cursor:not-allowed; opacity:.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; }
+
+:where(.sky-html) [data-sky-error]:not([data-sky-native="off"]):not([data-sky-native="off"] *) { color:var(--userssite-color-danger); font-size:12px; line-height:1; }
+
+/* 多选列表使用原生 size 行数，不继承单行输入高度。 */
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) { appearance:none; box-sizing:border-box; width:var(--sky-select-list-width, 220px); max-width:100%; height:auto; min-height:calc(var(--userssite-control-height-m) * 3 + 12px); padding:6px; line-height:1.5; vertical-align:top; overflow:auto; background:var(--userssite-input-bg); scrollbar-width:thin; scrollbar-color:var(--userssite-scrollbar-thumb) transparent; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option { box-sizing:border-box; min-height:var(--userssite-control-height-m); padding:7px 10px; margin:2px 0; border-radius:var(--userssite-radius-s); color:var(--userssite-color-text); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { max-width:100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); color:var(--userssite-color-text); line-height:1.5; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::file-selector-button { box-sizing:border-box; height:var(--userssite-control-height-m); margin-inline-end:10px; padding:8px 15px; font:inherit; font-weight:500; line-height:1; border:1px solid var(--userssite-color-border); border-radius:var(--userssite-radius-s); background:var(--userssite-color-panel); color:var(--userssite-color-text); cursor:pointer; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled)::file-selector-button { color:var(--userssite-color-primary); border-color:var(--userssite-color-primary); background:var(--userssite-surface-control-hover); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled::file-selector-button { color:var(--userssite-color-subtle); border-color:var(--userssite-color-soft-border); background:var(--userssite-surface-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; border-radius:var(--userssite-radius-s); }
+
+/* 保留原生多选语义，仅统一列表表面；不触碰单选系统弹层。 */
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):not(:disabled) option:hover:not(:disabled):not(:checked) { background:var(--userssite-surface-control-hover); }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { color:var(--userssite-color-primary); background:linear-gradient(var(--userssite-surface-control-active),var(--userssite-surface-control-active)); font-weight:600; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); cursor:not-allowed; }
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled option { color:var(--userssite-color-subtle); cursor:not-allowed; }
+@media (forced-colors: active) {
+:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { background:Highlight; color:HighlightText; }
+}

package/dist/html/number.css

@@ -0,0 +1,8 @@
+/* Optional number enhancer: only mounted controls hide native spinners. */
+.sky-html [data-sky-number] { display:inline-flex; position:relative; vertical-align:middle; }
+.sky-html [data-sky-number] input { appearance:textfield; padding-right:34px; }
+.sky-html [data-sky-number] input::-webkit-inner-spin-button,
+.sky-html [data-sky-number] input::-webkit-outer-spin-button { appearance:none; margin:0; }
+.sky-html [data-sky-number] button { position:absolute; right:1px; width:30px; height:calc((var(--userssite-control-height-m) - 2px) / 2); padding:0; border:0; border-left:1px solid var(--userssite-color-border); border-radius:0; background:var(--userssite-surface-subtle); font-size:12px; }
+.sky-html [data-sky-number] button:last-child { top:1px; border-radius:0 var(--userssite-radius-s) 0 0; }
+.sky-html [data-sky-number] button:nth-child(2) { bottom:1px; border-top:1px solid var(--userssite-color-border); border-radius:0 0 var(--userssite-radius-s) 0; }

package/dist/html/number.js

@@ -0,0 +1,31 @@
+/** Enhance existing native number inputs. Returns a cleanup function; call again for newly added fields. */
+export function enhanceNumbers(root = document) {
+ const disposers = [];
+ for (const input of root.querySelectorAll('.sky-html input[type="number"]')) {
+  if (input.closest('[data-sky-native="off"], [data-sky-number], [class^="el-"], [class*=" el-"]')) continue;
+  const doc = input.ownerDocument, view = doc.defaultView;
+  const wrapper = doc.createElement('span'); wrapper.dataset.skyNumber = '';
+  input.before(wrapper); wrapper.append(input);
+  const buttons = [-1, 1].map(direction => {
+   const button = doc.createElement('button'); button.type = 'button'; button.textContent = direction < 0 ? '−' : '+';
+   button.setAttribute('aria-label', direction < 0 ? '减少数值' : '增加数值');
+   button.addEventListener('click', () => {
+    if (input.disabled || input.readOnly || input.matches(':disabled')) return;
+    const before = input.value;
+    try { direction > 0 ? input.stepUp() : input.stepDown(); } catch { return; }
+    if (input.value !== before) { input.dispatchEvent(new view.Event('input', { bubbles:true })); input.dispatchEvent(new view.Event('change', { bubbles:true })); }
+    sync(); input.focus();
+   });
+   wrapper.append(button); return button;
+  });
+  function sync() {
+   buttons.forEach(button => { button.disabled = input.disabled || input.readOnly || input.matches(':disabled') || input.step === 'any'; });
+  }
+  const observer = new view.MutationObserver(sync);
+  observer.observe(input, { attributes:true });
+  const fieldset = input.closest('fieldset'); if (fieldset) observer.observe(fieldset, { attributes:true, attributeFilter:['disabled'] });
+  sync();
+  disposers.push(() => { observer.disconnect(); wrapper.before(input); wrapper.remove(); });
+ }
+ return () => disposers.forEach(dispose => dispose());
+}

package/dist/html/panel.css

@@ -0,0 +1,12 @@
+.sky-model-workspace__content { padding: var(--workspace-padding, 20px); min-width: 0; }
+.sky-model-header { padding: 24px 28px; background: var(--workspace-hero, var(--userssite-color-panel)); border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title, var(--userssite-color-text)); font-size: 22px; font-weight: 650; }
+.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary, var(--userssite-color-primary)); flex-shrink: 0; }
+.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted, var(--userssite-color-muted)); }
+.sky-model-panel { min-width: 0; border: 1px solid var(--color-border, var(--userssite-color-border)); border-radius: 8px; background: var(--color-panel, var(--userssite-color-panel)); box-shadow: var(--shadow-panel, var(--userssite-shadow-panel)); overflow: hidden; }
+.sky-model-panel__header, .sky-model-panel__footer { padding: var(--panel-header-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); display: flex; align-items: center; justify-content: space-between; gap: var(--panel-gap, calc(var(--cp-font-1, 1px) * 12)); flex-wrap: wrap; }
+.sky-model-panel__header { border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); }
+.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title, var(--userssite-color-text)); }
+.sky-model-panel__body { padding: var(--panel-body-padding, calc(var(--cp-font-1, 1px) * 16)); min-width: 0; }
+.sky-model-panel__footer { padding: var(--panel-footer-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); border-top: 1px solid var(--color-border, var(--userssite-color-border)); }
+@media(max-width:768px) { .sky-model-header { padding: 18px 16px; } .sky-model-workspace__content { padding: 12px; } }

package/dist/html/theme.css

@@ -0,0 +1,218 @@
+
+
+/* 库默认主题放在低优先级层，项目未分层的变量声明始终优先。 */
+@layer userssite-defaults {
+
+:where(.userssite-theme, .sky-html, .sky-model-workspace[data-native-controls]) {
+  --userssite-color-bg: var(--color-bg, #ffffff);
+  --userssite-color-text: var(--color-text, #1f2937);
+  --userssite-color-primary: var(--color-primary, #1677ff);
+  --userssite-color-on-primary: var(--color-on-primary, #ffffff);
+  --userssite-color-border: var(--color-border, #dbe3ef99);
+  --userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 9%, transparent));
+  --userssite-color-surface: var(--color-surface, #ffffffd9);
+  --userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 72%, var(--userssite-color-bg)));
+  --userssite-color-panel: var(--color-panel, #ffffff);
+  --userssite-shadow-color: var(--shadow-color, color-mix(in oklab, var(--userssite-color-text) 10%, transparent));
+  --userssite-color-white: var(--color-white, #ffffff);
+  --userssite-color-danger: var(--color-danger, #e5484d);
+  --userssite-map-empty-bg: var(--map-empty-bg, #d7e2ea);
+  --userssite-timeline-observed: var(--timeline-observed, #b8e7ff);
+  --userssite-timeline-observed-strong: var(--timeline-observed-strong, #4aa3df);
+  --userssite-timeline-forecast: var(--timeline-forecast, #60a5fa);
+  --userssite-timeline-forecast-strong: var(--timeline-forecast-strong, #2f8bd6);
+  --userssite-timeline-forecast-text: var(--timeline-forecast-text, #2563a7);
+  --userssite-color-muted: var(--color-muted, color-mix(in oklab, var(--userssite-color-text) 62%, transparent));
+  --userssite-color-subtle: var(--color-subtle, color-mix(in oklab, var(--userssite-color-text) 48%, transparent));
+  --userssite-color-soft-border: var(--color-soft-border, color-mix(in oklab, var(--userssite-color-border) 78%, transparent));
+  --userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 64%, transparent));
+  --userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-bg) 86%, transparent));
+  --userssite-surface-raised: var(--surface-raised, color-mix(in oklab, var(--userssite-color-surface) 86%, transparent));
+  --userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-bg) 92%, var(--userssite-color-primary)));
+  --userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-panel) 88%, transparent));
+  --userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent));
+  --userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 14%, transparent));
+  --userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
+  --userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 22) var(--userssite-shadow-color));
+  --userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
+  --userssite-app-shell-bg: var(--app-shell-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 7%, var(--userssite-surface-subtle)), transparent 34%), var(--userssite-color-bg));
+  --userssite-app-header-bg: var(--app-header-bg, var(--userssite-surface-glass));
+  --userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-color-text) 4%, transparent) 0, transparent calc(var(--cp-font-1) * 16)), color-mix(in oklab, var(--userssite-color-bg) 96%, var(--userssite-surface-subtle)));
+  --userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-panel) 78%, transparent), color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white))));
+  --userssite-app-rightpanel-bg: var(--app-rightpanel-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
+  --userssite-map-title-text: var(--map-title-text, color-mix(in oklab, var(--userssite-color-text) 86%, transparent));
+  --userssite-ranking-header-bg: var(--ranking-header-bg, #2f8bd6);
+  --userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, transparent));
+  --userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-bg) 72%, var(--userssite-color-white)));
+  --userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, var(--userssite-color-panel), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
+  --userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 color-mix(in oklab, var(--userssite-color-panel) 92%, transparent));
+  --userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
+  --userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white)));
+  --userssite-input-placeholder: var(--input-placeholder, var(--userssite-color-subtle));
+  --userssite-scrollbar-track: var(--scrollbar-track, transparent);
+  --userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 34%, var(--userssite-color-border)));
+  --userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 52%, var(--userssite-color-border)));
+  --userssite-tree-trigger-bg: var(--tree-trigger-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-primary) 4%));
+  --userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, var(--userssite-color-panel));
+  --userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
+  --userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-bg) 96%, transparent));
+  --userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-hover) 58%, transparent));
+  --userssite-map-menu-parent-bg: var(--map-menu-parent-bg, #00000080);
+  --userssite-map-menu-parent-active: var(--map-menu-parent-active, #f6a313);
+  --userssite-map-menu-child-bg: var(--map-menu-child-bg, color-mix(in oklab, #ffffff 86%, #d7f6ff));
+  --userssite-map-menu-child-border: var(--map-menu-child-border, #26b6ef);
+  --userssite-map-menu-child-text: var(--map-menu-child-text, #148cc8);
+  --userssite-map-menu-child-active: var(--map-menu-child-active, #2d9cf0);
+  --userssite-right-panel-header-bg: var(--right-panel-header-bg, #2f8bd6);
+  --userssite-right-panel-header-text: var(--right-panel-header-text, #ffffff);
+  --userssite-map-float-bg: var(--map-float-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-bg)));
+  --userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-border) 82%, transparent));
+  --userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, var(--userssite-color-bg)));
+  --userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 12%, var(--userssite-color-panel)));
+  --userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
+  --userssite-header-height: var(--header-height, calc(var(--cp-font-1) * 58));
+  --userssite-sidebar-width: var(--sidebar-width, calc(var(--cp-font-1) * 244));
+  --userssite-rightpanel-width: var(--rightpanel-width, calc(var(--cp-font-1) * 320));
+  --userssite-layout-gutter: var(--layout-gutter, calc(var(--cp-font-1) * 10));
+  --userssite-font-family-sans: var(--font-family-sans, "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif);
+  --userssite-font-size-micro: var(--font-size-micro, var(--cp-font-10));
+  --userssite-font-size-caption: var(--font-size-caption, var(--cp-font-13));
+  --userssite-font-size-body: var(--font-size-body, var(--cp-font-14));
+  --userssite-font-size-title: var(--font-size-title, var(--cp-font-16));
+  --userssite-font-size-heading: var(--font-size-heading, var(--cp-font-18));
+  --userssite-radius-s: var(--radius-s, var(--cp-font-4));
+  --userssite-radius-m: var(--radius-m, var(--cp-font-8));
+  --userssite-radius-l: var(--radius-l, var(--cp-font-12));
+  --userssite-radius-pill: var(--radius-pill, calc(var(--cp-font-1) * 999));
+  --userssite-space-s: var(--space-s, var(--cp-font-6));
+  --userssite-space-m: var(--space-m, var(--cp-font-10));
+  --userssite-space-l: var(--space-l, var(--cp-font-16));
+  --userssite-control-height-s: var(--control-height-s, var(--cp-font-28));
+  --userssite-control-height-m: var(--control-height-m, var(--cp-font-32));
+  --userssite-control-height-l: var(--control-height-l, var(--cp-font-36));
+  --userssite-font-size-l1: var(--font-size-l1, var(--cp-font-16));
+  --userssite-font-size-l2: var(--font-size-l2, var(--cp-font-14));
+  --userssite-font-size-l3: var(--font-size-l3, var(--cp-font-13));
+  --userssite-menu-level-1-color: var(--menu-level-1-color, var(--userssite-color-text));
+  --userssite-menu-level-2-color: var(--menu-level-2-color, color-mix(in oklab, var(--userssite-color-text) 82%, transparent));
+  --userssite-menu-level-3-color: var(--menu-level-3-color, color-mix(in oklab, var(--userssite-color-text) 68%, transparent));
+  --userssite-button-primary-bg: var(--button-primary-bg, var(--userssite-color-primary));
+  --userssite-button-primary-text: var(--button-primary-text, var(--userssite-color-on-primary));
+  --userssite-button-secondary-bg: var(--button-secondary-bg, var(--userssite-surface-control));
+  --userssite-button-secondary-text: var(--button-secondary-text, var(--userssite-color-text));
+  --userssite-button-ghost-bg: var(--button-ghost-bg, transparent);
+  --userssite-button-ghost-text: var(--button-ghost-text, var(--userssite-color-primary));
+  --userssite-button-danger-bg: var(--button-danger-bg, var(--userssite-color-danger));
+  --userssite-button-danger-text: var(--button-danger-text, var(--userssite-color-white));
+  --userssite-motion-fast: var(--motion-fast, 160ms);
+  --userssite-motion-base: var(--motion-base, 240ms);
+  --userssite-motion-ease: var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+  --el-color-primary: var(--userssite-color-primary);
+  --el-bg-color: var(--userssite-color-bg);
+  --el-bg-color-overlay: var(--userssite-color-panel);
+  --el-fill-color-blank: var(--userssite-color-panel);
+  --el-text-color-primary: var(--userssite-color-text);
+  --el-text-color-regular: var(--userssite-color-muted);
+  --el-border-color: var(--userssite-color-border);
+  --el-border-radius-base: var(--userssite-radius-s);
+  --el-component-size: var(--userssite-control-height-m);
+  --el-font-size-base: var(--userssite-font-size-body);
+}
+
+:where(.theme-dark .userssite-theme, .userssite-theme.theme-dark, .sky-html[data-theme="dark"], .sky-model-workspace[data-native-controls][data-theme="dark"]) {
+  --userssite-color-bg: var(--color-bg, #08111f);
+  --userssite-color-text: var(--color-text, #e6edf7);
+  --userssite-color-primary: var(--color-primary, #4da3ff);
+  --userssite-color-on-primary: var(--color-on-primary, #ffffff);
+  --userssite-color-border: var(--color-border, #39506f99);
+  --userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-color-surface: var(--color-surface, #101b2dee);
+  --userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 70%, var(--userssite-color-bg)));
+  --userssite-color-panel: var(--color-panel, #0c1525);
+  --userssite-shadow-color: var(--shadow-color, color-mix(in oklab, #020617 62%, transparent));
+  --userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 12%, transparent));
+  --userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-surface-strong) 76%, var(--userssite-color-bg)));
+  --userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
+  --userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
+  --userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
+  --userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 26%, transparent));
+  --userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 20%, transparent));
+  --userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 30) var(--userssite-shadow-color), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
+  --userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) var(--userssite-shadow-color));
+  --userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
+  --userssite-app-shell-bg: var(--app-shell-bg, radial-gradient(circle at 18% 0, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 8%, var(--userssite-color-bg)) 0, var(--userssite-color-bg) 42%));
+  --userssite-app-header-bg: var(--app-header-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 86%, transparent), color-mix(in oklab, var(--userssite-color-surface) 86%, transparent)));
+  --userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-shadow-color) 58%, transparent) 0, transparent calc(var(--cp-font-1) * 18)), radial-gradient(circle at 64% 0, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent), transparent 34%), var(--userssite-color-bg));
+  --userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
+  --userssite-app-rightpanel-bg: var(--app-rightpanel-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
+  --userssite-map-title-text: var(--map-title-text, #1f2937);
+  --userssite-ranking-header-bg: var(--ranking-header-bg, transparent);
+  --userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-white) 92%, var(--userssite-color-primary)));
+  --userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-panel) 76%, transparent));
+  --userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 36%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-bg))));
+  --userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 26%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
+  --userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-surface) 94%, transparent));
+  --userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 88%, transparent));
+  --userssite-input-placeholder: var(--input-placeholder, color-mix(in oklab, var(--userssite-color-text) 44%, transparent));
+  --userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 46%, var(--userssite-color-border)));
+  --userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 64%, var(--userssite-color-border)));
+  --userssite-tree-trigger-bg: var(--tree-trigger-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, var(--userssite-color-primary) 16%), var(--userssite-color-panel)));
+  --userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 80%, var(--userssite-color-primary) 20%), color-mix(in oklab, var(--userssite-color-panel) 82%, var(--userssite-color-primary) 18%)));
+  --userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 28%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 12%, transparent)));
+  --userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, transparent));
+  --userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 78%, transparent));
+  --userssite-map-float-bg: var(--map-float-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 82%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-panel) 88%, #020617)));
+  --userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-primary) 24%, var(--userssite-color-border)));
+  --userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, #020617));
+  --userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)));
+  --userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 14) calc(var(--cp-font-1) * 30) color-mix(in oklab, #020617 64%, transparent));
+  --userssite-menu-level-1-color: var(--menu-level-1-color, #e6edf7);
+  --userssite-menu-level-2-color: var(--menu-level-2-color, #c8d4e4);
+  --userssite-menu-level-3-color: var(--menu-level-3-color, #aebed2);
+  --userssite-right-panel-header-bg: var(--right-panel-header-bg, transparent);
+  --userssite-right-panel-header-text: var(--right-panel-header-text, #e6edf7);
+}
+
+
+}
+
+/* 四个模型工作区的共同主题，仅在显式容器内生效。 */
+.sky-model-workspace {
+  --color-bg: #f3f7fb; --color-panel: #fff; --color-surface: #f7f9fc;
+  --color-primary: #1677ff; --color-on-primary: #fff; --color-text: #172b4d;
+  --color-muted: #66758a; --color-border: #dce5ef; --color-soft-border: #e6effa;
+  --color-hover: #e8f2ff; --color-danger: #d9363e; --surface-subtle: #f3f7fb;
+  --surface-control: #fff; --surface-control-hover: #e8f2ff; --surface-control-active: #e8f2ff;
+  --input-bg: #fff; --dropdown-bg: #fff; --input-placeholder: #8c9bae;
+  --focus-ring: #1677ff26; --workspace-title: #0c2559;
+  --workspace-hero: linear-gradient(110deg,#edf6ff,#e1efff 56%,#f5faff);
+  --shadow-panel: 0 8px 28px #15375b0d; --radius-s: 6px; --radius-m: 7px; --radius-l: 8px;
+  --scrollbar-thumb: #bdccdf;
+  color-scheme: light; color: var(--color-text); background: var(--color-bg);
+  font-family: "Segoe UI","Microsoft YaHei",sans-serif; font-size: 14px; line-height: 1.65;
+  min-width: 0;
+}
+.sky-model-workspace[data-theme="dark"] {
+  --color-bg: #0d1420; --color-panel: #151f2e; --color-surface: #101a28;
+  --color-primary: #36cbb7; --color-on-primary: #072b2b; --color-text: #e3ecf5;
+  --color-muted: #99abc0; --color-border: #35485f; --color-soft-border: #2b3c50;
+  --color-hover: #193a3f; --color-danger: #f3a2ad; --surface-subtle: #0d1420;
+  --surface-control: #151f2e; --surface-control-hover: #193a3f; --surface-control-active: #193a3f;
+  --input-bg: #151f2e; --dropdown-bg: #1b293b; --input-placeholder: #99abc0;
+  --focus-ring: #36cbb726; --workspace-title: #f1f6fc;
+  --workspace-hero: linear-gradient(110deg,#172b40,#17363f 56%,#142333);
+  --shadow-panel: 0 8px 28px #00000030; --scrollbar-thumb: #425a72; color-scheme: dark;
+}
+.sky-model-workspace *, .sky-model-workspace *::before, .sky-model-workspace *::after { box-sizing: border-box; }
+
+/* HTML 与 Vue 控件直接消费同一 userssite 主题，不再维护另一套控件色值。 */
+.sky-html { color:var(--userssite-color-text); background:var(--userssite-color-bg); font-family:var(--userssite-font-family-sans); font-size:var(--font-size-body,14px); line-height:1.5; }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-1:calc(var(--cp-vfit-scale,1) * 1px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-4:calc(var(--cp-vfit-scale,1) * 4px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-8:calc(var(--cp-vfit-scale,1) * 8px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-12:calc(var(--cp-vfit-scale,1) * 12px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-14:calc(var(--cp-vfit-scale,1) * 14px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-28:calc(var(--cp-vfit-scale,1) * 28px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-32:calc(var(--cp-vfit-scale,1) * 32px); }
+:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-36:calc(var(--cp-vfit-scale,1) * 36px); }