@world-engines/project-host 0.1.0-alpha.0

package/assets/gui/spatial-template-panel.js

@@ -0,0 +1,233 @@
+const KIND_META = Object.freeze({
+  city: { label: "城市模板", applyLabel: "设为城市预设", description: "在地图上右键新建城市时，可选择此预设。" },
+  parcel: { label: "地块模板", applyLabel: "套用到地块生成", description: "套用会更新地块生成配置；不会创建建筑或室内。" },
+  building: { label: "建筑模板", applyLabel: "套用到建筑生成", description: "套用会更新建筑生成配置；不会创建室内。" },
+  interior: { label: "室内模板", applyLabel: "套用到室内生成", description: "套用会更新室内生成配置。" },
+});
+
+const KINDS = Object.freeze(Object.keys(KIND_META));
+
+function element(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function asObject(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+
+function presetsFor(presets, kind) {
+  return (Array.isArray(presets) ? presets : []).filter((preset) => preset && preset.kind === kind
+    && typeof preset.id === "string" && typeof preset.revision === "number" && preset.parameters && typeof preset.parameters === "object");
+}
+
+function presetValue(preset) { return `${preset.id}@${preset.revision}`; }
+
+function selectionFor(configuration, kind, presets) {
+  const selected = asObject(asObject(configuration)[kind]);
+  return presets.find((preset) => preset.id === selected.presetId && preset.revision === selected.revision) ?? presets[0] ?? null;
+}
+
+function frozenSelection(preset) {
+  return Object.freeze({ presetId: preset.id, revision: preset.revision, parameters: preset.parameters });
+}
+
+function appendParameterEditor(root, parameters, onDirty) {
+  const grid = element("div", "spatial-template-parameters");
+  const controls = new Map();
+  const visit = (value, path = []) => {
+    if (typeof value === "number") {
+      const name = path.join(".");
+      const label = element("label", "spatial-template-field");
+      label.append(element("span", "", name));
+      const input = document.createElement("input"); input.name = name; input.type = "number"; input.value = String(value); input.step = "any";
+      input.addEventListener("input", onDirty);
+      label.append(input); grid.append(label); controls.set(name, input);
+      return;
+    }
+    if (value && typeof value === "object" && !Array.isArray(value)) for (const [name, child] of Object.entries(value)) visit(child, [...path, name]);
+  };
+  visit(parameters);
+  root.append(grid);
+  return () => {
+    const next = structuredClone(parameters);
+    for (const [path, input] of controls) {
+      const value = Number(input.value); if (!Number.isFinite(value)) throw new Error(`${path} 必须是数字。`);
+      const keys = path.split("."); let target = next;
+      for (const key of keys.slice(0, -1)) target = target[key];
+      target[keys.at(-1)] = value;
+    }
+    return next;
+  };
+}
+
+/** 权威 preset 及参数 schema 均由 Host 注入；此模块不推导默认参数。 */
+export function mountSpatialTemplatePanel(root, options) {
+  let activeKind = KINDS.includes(options.initialKind) ? options.initialKind : "city";
+  let library = Array.isArray(options.presets) ? options.presets : [];
+  let configuration = asObject(options.configuration);
+  const chosenIds = {};
+  let busy = false;
+  let dirty = false;
+
+  const shell = element("section", "spatial-template-panel");
+  shell.setAttribute("aria-label", "空间模板");
+  const heading = element("header", "spatial-template-heading");
+  const titleBlock = element("div");
+  titleBlock.append(element("p", "spatial-template-kicker", "WORLD MAP"), element("h1", "", "空间模板"));
+  const status = element("p", "spatial-template-status", "正在读取预设…");
+  status.setAttribute("role", "status");
+  heading.append(titleBlock, status);
+  const tabs = element("div", "spatial-template-tabs");
+  tabs.setAttribute("role", "tablist");
+  const content = element("div", "spatial-template-content");
+  const confirmation = element("section", "spatial-template-confirmation");
+  confirmation.hidden = true;
+  confirmation.setAttribute("role", "alertdialog");
+  confirmation.setAttribute("aria-modal", "true");
+  const confirmationCopy = element("p", "");
+  const confirmationActions = element("div", "spatial-template-actions");
+  const confirmationCancel = element("button", "button ghost", "取消"); confirmationCancel.type = "button";
+  const confirmationApply = element("button", "button primary", "确认套用"); confirmationApply.type = "button";
+  confirmationActions.append(confirmationCancel, confirmationApply); confirmation.append(confirmationCopy, confirmationActions);
+  shell.append(heading, tabs, content, confirmation);
+  root.replaceChildren(shell);
+
+  function setStatus(message, state = "") {
+    status.textContent = message;
+    if (state) status.dataset.state = state;
+    else delete status.dataset.state;
+  }
+
+  function impactCopy(kind) {
+    if (kind === "city") return "确认将此模板设为后续新建城市的默认预填。不会批量修改或创建现有城市。";
+    const label = KIND_META[kind].label.replace("模板", "");
+    return `确认套用将影响后续 ${label} 生成；已有布局的编辑保存可能不再兼容。不会物化其他类别。`;
+  }
+
+  function render() {
+    tabs.replaceChildren();
+    for (const kind of KINDS) {
+      const button = element("button", `spatial-template-tab${kind === activeKind ? " active" : ""}`, KIND_META[kind].label);
+      button.type = "button";
+      button.dataset.templateKind = kind;
+      button.setAttribute("role", "tab");
+      button.setAttribute("aria-selected", String(kind === activeKind));
+      button.addEventListener("click", () => {
+        activeKind = kind;
+        options.onKindChange?.(kind);
+        render();
+      });
+      tabs.append(button);
+    }
+
+    content.replaceChildren();
+    const meta = KIND_META[activeKind];
+    const presets = presetsFor(library, activeKind);
+    const selected = presets.find((preset) => presetValue(preset) === chosenIds[activeKind]) ?? selectionFor(configuration, activeKind, presets);
+    const section = element("section", "spatial-template-card");
+    section.append(element("h2", "", meta.label), element("p", "spatial-template-description", meta.description));
+    if (!selected) {
+      section.append(element("p", "spatial-template-empty", "当前没有可用的权威预设。"));
+      content.append(section);
+      setStatus("没有可用的权威预设。", "error");
+      return;
+    }
+    const label = element("label", "spatial-template-field");
+    label.append(element("span", "", "预设"));
+    const select = document.createElement("select");
+    select.name = `${activeKind}Template`;
+    for (const preset of presets) {
+      const option = element("option", "", preset.label || preset.id);
+      option.value = presetValue(preset);
+      option.selected = preset.id === selected.id && preset.revision === selected.revision;
+      select.append(option);
+    }
+    label.append(select);
+    const templateName = element("label", "spatial-template-field");
+    templateName.append(element("span", "", "模板名称"));
+    const nameInput = document.createElement("input"); nameInput.name = "templateLabel"; nameInput.value = selected.label || selected.id;
+    templateName.append(nameInput);
+    const markDirty = () => {
+      dirty = true;
+      confirmation.hidden = true;
+      apply.disabled = true;
+      setStatus("模板定义已修改，请先保存新修订后再套用。", "");
+    };
+    nameInput.addEventListener("input", markDirty);
+    select.addEventListener("change", () => {
+      const next = presets.find((preset) => presetValue(preset) === select.value);
+      if (next) { dirty = false; chosenIds[activeKind] = presetValue(next); if (activeKind === "city") options.onCityTemplateSelected?.(next); render(); }
+    });
+    const revision = element("p", "spatial-template-revision", `预设修订 ${selected.revision}`);
+    const fixed = element("p", "spatial-template-fixed", "编辑会创建自定义模板修订；套用前仍由 Host 严格校验。对象参数保持原样，不在浏览器内猜测字段。");
+    const readParameters = appendParameterEditor(section, selected.parameters, markDirty);
+    const actions = element("div", "spatial-template-actions");
+    const save = element("button", "button ghost", String(selected.id).startsWith("custom:") ? "保存新修订" : "另存为自定义模板");
+    save.type = "button";
+    const apply = element("button", "button primary", meta.applyLabel);
+    apply.type = "button";
+    const setBusy = (next) => { busy = next; save.disabled = next; apply.disabled = next || dirty; select.disabled = next; };
+    const currentPreset = () => presets.find((preset) => presetValue(preset) === select.value) ?? selected;
+    save.addEventListener("click", async () => {
+      const preset = currentPreset();
+      setBusy(true); setStatus("正在保存模板定义…", "loading");
+      try {
+        const definition = { ...preset, label: nameInput.value.trim(), parameters: readParameters() };
+        const next = await options.onSaveDefinition?.(activeKind, definition);
+        if (!next || typeof next !== "object") throw new Error("模板定义未获得读回确认。");
+        if (Array.isArray(next.presets)) {
+          library = next.presets;
+          const saved = presetsFor(library, activeKind).filter((candidate) => candidate.label === definition.label
+            && JSON.stringify(candidate.parameters) === JSON.stringify(definition.parameters))
+            .sort((left, right) => right.revision - left.revision)[0];
+          if (saved) chosenIds[activeKind] = presetValue(saved);
+        }
+        dirty = false;
+        render(); setStatus("模板定义已保存并读回。", "ready");
+      } catch (error) {
+        setStatus(error instanceof Error ? error.message : String(error || "保存预设失败"), "error");
+      } finally { setBusy(false); }
+    });
+    apply.addEventListener("click", () => {
+      if (dirty) { setStatus("模板定义已修改，请先保存新修订后再套用。", ""); return; }
+      confirmationCopy.textContent = impactCopy(activeKind);
+      confirmation.hidden = false;
+      confirmationApply.focus();
+    });
+    confirmationCancel.onclick = () => {
+      confirmation.hidden = true;
+      setStatus("已取消套用，未写入项目。", "");
+    };
+    confirmationApply.onclick = async () => {
+      const preset = currentPreset();
+      confirmation.hidden = true;
+      setBusy(true); setStatus("正在套用模板…", "loading");
+      try {
+        const next = await options.onApply?.(activeKind, frozenSelection(preset));
+        if (!next || typeof next !== "object") throw new Error("模板套用未获得读回确认。");
+        configuration = asObject(next.configuration ?? next.templates ?? next);
+        setStatus("模板已套用并读回。", "ready"); render();
+      } catch (error) {
+        setStatus(error instanceof Error ? error.message : String(error || "套用模板失败"), "error");
+      } finally { setBusy(false); }
+    };
+    actions.append(save, apply);
+    section.append(label, templateName, revision, fixed, actions);
+    content.append(section);
+    if (!busy) setStatus("选择权威预设后保存或套用。", "");
+  }
+
+  render();
+  return {
+    update(next = {}) {
+      if (Array.isArray(next.presets)) library = next.presets;
+      if (next.configuration && typeof next.configuration === "object") configuration = next.configuration;
+      if (KINDS.includes(next.activeKind)) activeKind = next.activeKind;
+      render();
+    },
+    destroy() { root.replaceChildren(); },
+  };
+}

package/assets/gui/styles.css

@@ -0,0 +1,115 @@
+:root{color-scheme:dark;--bg:#161516;--sidebar:#1a191a;--surface:#201f20;--surface-2:#272627;--surface-3:#2e2d2e;--line:#414041;--line-soft:#343334;--text:#f2f2f2;--muted:#aaa7aa;--muted-2:#817f81;--accent:#32d551;--accent-hover:#48df66;--accent-soft:#213626;--blue:#78a9ff;--red:#ff6b72;--amber:#e8b65c;--radius:8px;--shadow:0 12px 28px rgba(0,0,0,.22);font:16px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
+.graph-panel-tabs{position:sticky;top:72px;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-soft);background:var(--surface);padding:0 12px}.graph-panel-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:10px 4px;cursor:pointer;font-size:.72rem}.graph-panel-tabs button.active{border-bottom-color:var(--accent);color:var(--text)}.graph-property-heading{display:flex;align-items:center;justify-content:space-between}.graph-property-heading button,.graph-property-editor button,.graph-value-tree>button,.graph-value-branch>button{border:1px solid var(--line);background:#272727;color:var(--muted);border-radius:5px;padding:5px 8px;cursor:pointer;font-size:.72rem}.graph-property-editor{display:grid;gap:8px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.graph-property-editor>div:first-child{display:grid;grid-template-columns:1fr auto;gap:7px}.graph-property-editor textarea{min-height:74px;font:12px/1.5 ui-monospace,monospace}.graph-property-metadata{display:grid;grid-template-columns:1fr 1fr;gap:6px}.graph-property-metadata input,.graph-property-metadata select{min-width:0;padding:7px;font-size:.72rem}.graph-capability-note{color:var(--muted);font-size:.72rem;line-height:1.55}.graph-value-tree{display:grid;gap:6px;padding-left:10px;border-left:1px solid #343434}.graph-value-branch{display:grid;grid-template-columns:1fr auto;gap:5px}.graph-value-branch>span{font:12px ui-monospace,monospace;color:var(--muted)}.graph-value-branch>.graph-value-tree{grid-column:1/-1}
+.graph-side-panel{position:absolute;z-index:8;top:58px;right:0;bottom:0;width:min(390px,92vw);overflow:auto;border-left:1px solid var(--line);background:var(--surface);box-shadow:-12px 0 30px rgba(0,0,0,.24)}.graph-side-panel>header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 15px;border-bottom:1px solid var(--line-soft);background:var(--surface)}.graph-side-panel h2{font-size:1.08rem;margin:2px 0 0}.graph-panel-kicker{margin:0;color:var(--accent);font-size:.72rem}.graph-side-panel .graph-close{width:32px;height:32px;font-size:0;line-height:1;padding:6px}.graph-side-panel .graph-close svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.graph-side-panel footer{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--line-soft)}.graph-side-panel footer span{flex:1}.graph-property-list,.graph-relation-group{border-top:1px solid var(--line-soft);padding-top:13px}.graph-property-list h3,.graph-relation-group h3{margin:0 0 9px;font-size:.8rem;color:var(--muted)}.graph-property-list>div{display:grid;grid-template-columns:90px 1fr;gap:12px;margin:7px 0}.graph-relation-empty{color:var(--muted-2);font-size:.78rem}.graph-relation-row{display:grid;grid-template-columns:1fr auto;gap:6px;margin:6px 0}.graph-relation-row button,.graph-edge-endpoints button{border:1px solid var(--line);border-radius:5px;background:#272727;color:var(--text);padding:8px;text-align:left;cursor:pointer;font-size:.76rem}.graph-relation-row button:hover,.graph-edge-endpoints button:hover{border-color:var(--accent)}.graph-relation-node{color:var(--accent)!important}.graph-edge-endpoints{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
+.graph-fab-row{display:flex;align-items:center;gap:7px}.graph-fab{display:inline-grid!important;place-items:center;width:34px!important;height:34px!important;min-width:34px;border:1px solid #474747!important;border-radius:50%!important;padding:7px!important;background:transparent!important;color:var(--text)!important;cursor:pointer}.graph-fab svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.graph-fab:hover,.graph-fab:focus-visible{border-color:var(--accent)!important;color:var(--accent)!important;outline:none}.graph-fab.save{border-color:var(--accent)!important;color:var(--accent)!important}.graph-fab.danger:hover,.graph-fab.danger:focus-visible{border-color:var(--danger)!important;color:var(--danger)!important}.graph-fab:disabled{opacity:.38;cursor:not-allowed}.graph-relation-node{align-self:center}
+.graph-friendly-form input[type="checkbox"]{width:auto;min-width:0;margin:0}.graph-friendly-form label>span:has(input[type="checkbox"]){display:inline-flex;align-items:center;gap:7px;min-height:36px}
+.graph-alias-field{position:relative;display:grid;grid-template-columns:1fr auto;gap:7px}.graph-alias-field>span{grid-column:1/-1;color:var(--muted);font-size:.8rem}.graph-alias-field.wide{grid-column:1/-1}.graph-alias-field>.graph-fab{align-self:end}.graph-alias-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:7px}.graph-switch-field{display:flex!important;align-items:center;justify-content:space-between;min-height:42px}.graph-switch-field>span{color:var(--text)!important}.graph-switch-field input[role="switch"]{appearance:none;width:42px!important;height:24px;border:1px solid var(--line);border-radius:999px;background:var(--surface-3);position:relative;cursor:pointer;transition:background-color .16s,border-color .16s}.graph-switch-field input[role="switch"]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .16s,background-color .16s}.graph-switch-field input[role="switch"]:checked{border-color:var(--accent);background:var(--accent-soft)}.graph-switch-field input[role="switch"]:checked::after{transform:translateX(18px);background:var(--accent)}.graph-switch-field input[role="switch"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.graph-switch-field>span small{display:block;color:var(--muted-2);font-size:.68rem;font-weight:400}.graph-switch-unavailable{opacity:.72}.graph-switch-field input[role="switch"]:disabled{cursor:not-allowed}
+.world-map-view{min-height:calc(100vh - 130px);place-items:center;text-align:center}main .world-map-view.active{display:grid}.world-map-view>div{display:grid;justify-items:center;gap:10px;color:var(--muted)}.world-map-view svg{width:54px;height:54px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.world-map-view h1{margin:0;color:var(--text);font-size:1.15rem}.world-map-view p{margin:0;font-size:.9rem}
+body.graph-active main{height:calc(100vh - 65px);max-width:none;margin:0;padding:0;overflow:hidden}.graph-workspace-view{position:relative;height:100%;min-height:480px;background:var(--bg)}.graph-toolbar{height:58px;padding:0 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:22px;background:#1b1b1b}.graph-title{display:flex;align-items:baseline;gap:10px}.graph-title h1{font-size:1rem;margin:0}.graph-title span{font-size:.75rem;color:var(--muted)}.graph-tabs{display:flex;align-items:center;gap:2px;border:1px solid #353535;border-radius:6px;padding:3px}.graph-tab{border:0;border-radius:4px;background:transparent;color:var(--muted);padding:6px 12px;cursor:pointer;font-size:.78rem}.graph-tab.active{background:#303030;color:var(--text)}.graph-actions{display:flex;gap:8px;margin-left:auto}.graph-stage{height:calc(100% - 58px);position:relative}.graph-stage .graph-canvas{height:100%;border:0;background:var(--bg)}.graph-close{border:0;background:transparent;color:var(--muted);font-size:1.45rem;line-height:1;cursor:pointer;padding:3px 7px}.graph-close:hover{color:var(--text)}.graph-detail-content{padding:18px 22px;display:grid;gap:13px}.graph-detail-content>div{display:grid;grid-template-columns:90px 1fr;gap:14px}.graph-detail-content span{color:var(--muted);font-size:.8rem}.graph-detail-content p{margin:0;font-size:.9rem;white-space:pre-wrap}.graph-detail-advanced,.graph-advanced{border-top:1px solid var(--line-soft);margin-top:5px;padding-top:12px}.graph-detail-advanced summary,.graph-advanced summary{color:var(--muted);cursor:pointer;font-size:.8rem}.graph-detail-advanced pre{white-space:pre-wrap;overflow:auto;color:#bbb;font:12px/1.5 ui-monospace,monospace}.graph-friendly-form{padding:19px 22px 0}.graph-friendly-form #entity-fields,.graph-friendly-form #relation-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.graph-friendly-form label{display:grid;gap:6px}.graph-friendly-form label.wide{grid-column:1/-1}.graph-friendly-form label>span{font-size:.8rem;color:var(--muted)}.graph-friendly-form select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:6px;padding:9px 10px}.graph-friendly-form textarea{min-height:90px}.graph-friendly-form .graph-advanced{margin-top:16px}.graph-friendly-form .graph-advanced label{margin-top:12px}.graph-friendly-form .graph-advanced textarea{min-height:120px;font:12px/1.5 ui-monospace,monospace}.graph-friendly-form footer{margin:18px -22px 0;justify-content:flex-end}@media(max-width:700px){body.graph-active main{height:calc(100vh - 121px)}.graph-toolbar{padding:0 10px;gap:8px}.graph-title span{display:none}.graph-tabs{margin-left:auto}.graph-actions .button.ghost{display:none}.graph-side-panel{width:84vw}.graph-friendly-form #entity-fields,.graph-friendly-form #relation-fields{grid-template-columns:1fr}.graph-friendly-form label.wide{grid-column:auto}}
+*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);min-width:320px}button,input,textarea{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:228px minmax(0,1fr)}
+.project-health>p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.7}.preview-panel{min-height:500px;display:grid;grid-template-rows:minmax(460px,1fr) auto;background:#1d1d1d;overflow:hidden}.preview-panel iframe{display:block;width:100%;height:100%;min-height:460px;border:0;background:#fff}.preview-status{color:var(--muted);font-size:.8rem;line-height:1.65}
+.sidebar{position:sticky;top:0;height:100vh;padding:22px 14px 16px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;align-items:center;padding:0 6px 24px}.brand-logo{display:block;width:100%;height:auto;aspect-ratio:876/300;object-fit:contain}nav{display:grid;gap:4px}
+.nav-item{border:1px solid transparent;background:transparent;color:#aaa;text-align:left;border-radius:6px;padding:10px 12px;cursor:pointer;display:flex;gap:12px;align-items:center;font-size:.9rem}.nav-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:#858585}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{background:var(--accent-soft);border-color:#315c38;color:#fff;box-shadow:inset 2px 0 var(--accent)}.nav-item.active .nav-icon{color:var(--accent)}.nav-group{display:grid;gap:3px}.nav-group-toggle .nav-chevron{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}.nav-group-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(90deg)}.nav-subitems{display:grid;gap:2px;padding:1px 0 3px 42px}.nav-subitem{border:0;border-radius:5px;background:transparent;color:var(--muted);padding:6px 8px;text-align:left;cursor:pointer;font-size:.76rem}.nav-subitem:hover,.nav-subitem.active{background:var(--surface-2);color:var(--text)}.nav-subitem.active{color:var(--accent)}
+.sidebar-foot{margin-top:auto;padding:13px 9px 2px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.75rem;display:grid;gap:8px}.sidebar-connection{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}.pulse-dot.online{background:var(--accent)}.pulse-dot.offline{background:var(--red)}.version-status{min-width:0;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted-2);padding:4px 8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.65rem}.version-status strong{overflow:hidden;color:var(--muted);font:inherit;text-overflow:ellipsis;white-space:nowrap}.version-status small{color:var(--accent);font-size:inherit}.version-status.is-update-available{border-color:var(--accent);background:var(--accent-soft);color:var(--text);cursor:pointer;animation:version-pulse 2.2s ease-in-out infinite}.version-status.is-update-available strong{color:var(--accent)}.version-status:disabled{cursor:default}@keyframes version-pulse{0%,100%{box-shadow:0 0 0 0 rgba(50,213,81,0)}50%{box-shadow:0 0 0 4px rgba(50,213,81,.14)}}@media(prefers-reduced-motion:reduce){.version-status.is-update-available{animation:none}}.workspace{min-width:0}.topbar{height:65px;position:sticky;top:0;z-index:5;background:#1b1b1b;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 28px}
+.identity,.top-actions,.button-row{display:flex;align-items:center;gap:10px}.identity strong{font-size:.94rem}.identity code,.revision{display:none}.connection{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:7px}.connection i{width:7px;height:7px;border-radius:50%;background:var(--amber)}.connection.online i{background:var(--accent)}.connection.offline i{background:var(--red)}
+main{padding:34px clamp(20px,3.5vw,52px) 64px;max-width:1700px;margin:auto}.view{display:none}.view.active{display:block}.view-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{margin:0 0 5px;color:var(--accent);font-size:.68rem;letter-spacing:.15em;font-weight:750}.view-heading h1{font-size:1.75rem;line-height:1.2;margin:0 0 7px;letter-spacing:-.025em}.view-heading p:not(.eyebrow){color:var(--muted);margin:0;font-size:.88rem}
+.button{border:1px solid #4a4a4a;background:#292929;color:#eee;border-radius:6px;padding:9px 14px;cursor:pointer;font-size:.82rem;font-weight:650;white-space:nowrap}.button:hover:not(:disabled){background:#333;border-color:#666}.button:focus-visible,.nav-item:focus-visible,.action-card:focus-visible,.tab:focus-visible,.link-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button.primary{background:var(--accent);color:#0e2712;border-color:var(--accent)}.button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.button.ghost{background:transparent;border-color:var(--line)}.button.danger{background:transparent;border-color:#693b40;color:#ff959a}.button.compact{padding:6px 10px;font-size:.76rem}.button:disabled{opacity:.42;cursor:not-allowed}
+.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.metric{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:17px 18px}.metric small,.metric strong{display:block}.metric small{color:var(--muted);font-size:.75rem}.metric strong{font:650 1.5rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:5px}.metric em{font-style:normal;color:var(--accent);font-size:.7rem}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:19px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:17px}.panel-title h2{font-size:.96rem;margin:0 0 3px}.panel-title p{font-size:.74rem;color:var(--muted);margin:0}.tag{font:700 .66rem/1 ui-monospace,monospace;letter-spacing:.06em;padding:6px 8px;color:var(--accent);background:var(--accent-soft);border:1px solid #315c38;border-radius:4px}
+.detail-list{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:15px 24px}.detail-list div{min-width:0}.detail-list dt{font-size:.7rem;color:var(--muted)}.detail-list dd{margin:3px 0 0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list{display:grid;gap:9px}.action-card{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:11px;width:100%;border:1px solid var(--line-soft);background:var(--surface-2);border-radius:7px;text-align:left;padding:10px;cursor:pointer}.action-card:hover{background:var(--surface-3);border-color:#505050}.action-card strong,.action-card small{display:block}.action-card strong{font-size:.8rem}.action-card small{font-size:.69rem;color:var(--muted)}.action-icon{width:32px;height:32px;border:1px solid #3f6645;border-radius:6px;background:#263328;display:grid;place-items:center;color:var(--accent)}.action-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.action-arrow{width:16px;height:16px;fill:none;stroke:currentColor;color:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.action-card:hover .action-arrow{color:var(--accent)}
+.event-panel{box-shadow:none}.link-button{background:transparent;border:0;color:var(--accent);font-size:.74rem;cursor:pointer}.event-log{display:grid;gap:7px;max-height:210px;overflow:auto}.event-item{display:grid;grid-template-columns:72px 110px 1fr;gap:12px;border-top:1px solid var(--line-soft);padding-top:8px;font-size:.74rem}.event-item time{color:var(--muted-2)}.event-item b{color:var(--blue)}.event-item.error b{color:var(--red)}.empty-copy{color:var(--muted);font-size:.8rem}
+.graph-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:15px}.graph-panel{padding:0;overflow:hidden;min-height:510px}.tab-row{height:48px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;padding:0 14px;gap:5px}.tab-row>span{margin-left:auto;color:var(--muted);font-size:.72rem}.tab{border:0;background:transparent;padding:8px 11px;color:var(--muted);cursor:pointer;font-size:.77rem}.tab.active{color:var(--accent);background:var(--accent-soft);border-radius:5px}.graph-canvas{height:460px;overflow:hidden;background:var(--bg);border-top:1px solid #202020}#spatial-canvas>svg{width:100%;height:100%}#spatial-canvas .graph-edge{stroke:#555;stroke-width:1.25}#spatial-canvas .graph-edge-label{fill:#8b8b8b;font-size:10px}#spatial-canvas .graph-node{cursor:pointer}#spatial-canvas .graph-node circle{fill:#292929;stroke:#777;stroke-width:1.5}#spatial-canvas .graph-node.selected circle{fill:#29422d;stroke:var(--accent);stroke-width:2.5}#spatial-canvas .graph-node text{fill:#e5e5e5;font-size:11px;pointer-events:none}#spatial-canvas .graph-node .kind{fill:#999;font-size:9px}.inspector{box-shadow:none}.segmented{background:var(--bg);border:1px solid var(--line-soft);border-radius:6px;padding:3px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:15px}.segmented button{border:0;background:transparent;color:var(--muted);padding:6px;border-radius:4px;font-size:.75rem;cursor:pointer}.segmented button.active{background:var(--surface-3);color:var(--text)}
+.stack-form{display:grid;gap:12px}.stack-form label,.effect-fields label,.code-label{display:grid;gap:5px}.stack-form label span,.effect-fields label span,.code-label>span{font-size:.71rem;color:var(--muted)}input,textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:6px;padding:9px 10px;outline:none}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(50,215,75,.15)}textarea{resize:vertical}.stack-form textarea{min-height:118px;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.form-actions{display:flex;gap:8px;margin-top:3px}.form-note{color:var(--muted-2);font-size:.68rem}
+.table-panel{margin-top:15px;padding:0;overflow:auto;box-shadow:none}table{width:100%;border-collapse:collapse;font-size:.76rem}th{text-align:left;color:var(--muted);font-weight:550;background:#1c1c1c}th,td{padding:10px 14px;border-bottom:1px solid var(--line-soft)}tbody tr{cursor:pointer}tbody tr:hover{background:var(--surface-2)}td code{color:var(--blue)}.editor-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.code-editor,.result-box,.schema-box{font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}.code-editor{min-height:370px}.code-editor.small{min-height:115px}.result-box,.schema-box{margin:0;background:#171717;border:1px solid var(--line-soft);border-radius:6px;padding:12px;white-space:pre-wrap;overflow:auto;color:#c9c9c9}.result-box{min-height:90px;max-height:260px}.result-box.tall{min-height:180px;max-height:420px}.schema-box{max-height:165px;margin-bottom:14px;color:#a8cbaa}
+.file-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:15px;min-height:620px}.file-tree{padding:15px;box-shadow:none}.tree-list{display:grid;gap:2px;max-height:560px;overflow:auto}.tree-file{border:0;background:transparent;color:#bbb;text-align:left;padding:7px 8px;border-radius:4px;cursor:pointer;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-file:hover,.tree-file.active{background:var(--surface-3);color:var(--text)}.tree-file.active{box-shadow:inset 2px 0 var(--accent)}.file-editor-panel,.doc-reader{padding:0;overflow:hidden}.file-toolbar{height:59px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;padding:0 16px}.file-toolbar strong,.file-toolbar small{display:block}.file-toolbar strong{font-size:.8rem}.file-toolbar small{color:var(--muted-2);font:10px ui-monospace,monospace;margin-top:3px}.file-content{border:0;border-radius:0;min-height:510px;background:var(--bg);padding:17px;resize:none}.preview-status{border-top:1px solid var(--line-soft);color:var(--muted);font-size:.7rem;padding:9px 16px}.document-content{margin:0;padding:22px;white-space:pre-wrap;overflow:auto;max-height:620px;color:#d0d0d0;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
+.tool-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:15px}.tool-list{padding:8px;box-shadow:none;max-height:760px;overflow:auto}.tool-item{display:block;width:100%;border:0;background:transparent;border-radius:5px;padding:9px 10px;text-align:left;cursor:pointer}.tool-item:hover,.tool-item.active{background:var(--surface-3)}.tool-item.active{box-shadow:inset 2px 0 var(--accent)}.tool-item strong,.tool-item small{display:block}.tool-item strong{font:12px ui-monospace,monospace}.tool-item small{color:var(--muted);font-size:.67rem;margin-top:2px}.tool-item[disabled]{opacity:.48;cursor:not-allowed}.tool-runner{box-shadow:none}.effect-fields{display:grid;grid-template-columns:1fr 180px;gap:10px;margin:12px 0}
+.job-compose{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}.jobs-table{display:grid}.job-row{display:grid;grid-template-columns:minmax(160px,1fr) 130px 130px 32px;gap:12px;align-items:center;border-top:1px solid var(--line-soft);padding:11px 3px;cursor:pointer;font-size:.76rem}.job-row:hover{background:var(--surface-2)}.job-row code{color:var(--blue);overflow:hidden;text-overflow:ellipsis}.job-state{color:var(--amber)}.job-state.complete,.job-state.completed,.job-state.succeeded{color:var(--accent)}.job-state.failed,.job-state.error{color:var(--red)}.toast-region{position:fixed;z-index:20;right:18px;bottom:18px;display:grid;gap:8px;max-width:min(390px,calc(100vw - 36px))}.toast{background:#292929;border:1px solid #484848;border-left:3px solid var(--accent);border-radius:6px;padding:11px 14px;box-shadow:var(--shadow);font-size:.78rem}.toast.error{border-left-color:var(--red)}
+@media(max-width:1000px){.app-shell{grid-template-columns:72px minmax(0,1fr)}.sidebar{padding-inline:10px}.brand{padding-inline:5px}.brand-logo{height:42px;aspect-ratio:1;object-fit:cover;object-position:left}.nav-item{justify-content:center;padding:12px}.nav-item span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sidebar-foot span:last-child{display:none}.graph-layout,.tool-layout{grid-template-columns:1fr}.inspector{order:-1}.metric-grid{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:700px){.app-shell{display:block}.sidebar{height:auto;position:sticky;z-index:9;padding:7px 10px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row}.brand,.sidebar-foot{display:none}.sidebar nav{display:flex;overflow:auto;width:100%}.nav-item{min-width:42px}.topbar{padding:0 14px}.identity code,.connection{display:none}main{padding:24px 14px 44px}.view-heading{align-items:flex-start;flex-direction:column}.metric-grid,.two-column,.editor-grid,.file-layout,.job-compose{grid-template-columns:1fr}.file-layout{min-height:auto}.file-tree{max-height:250px}.detail-list{grid-template-columns:1fr}.job-row{grid-template-columns:minmax(100px,1fr) 90px 24px}.job-row time{display:none}}
+main:has(>.view[data-view-panel="trigger"].active){height:calc(100vh - 65px);max-width:none;margin:0;padding:0;overflow:hidden}.view[data-view-panel="trigger"]{height:100%;background:var(--bg)}.view[data-view-panel="trigger"] #trigger-blueprint-root{height:100%}
+@media(max-width:700px){main:has(>.view[data-view-panel="trigger"].active){height:calc(100vh - 121px);padding:0}}
+#trigger-blueprint-root{height:100%;min-height:0;background:#161516}#trigger-blueprint-root .trigger-loading-shell{position:relative;width:100%;height:100%;min-height:520px;background:#161516}#trigger-blueprint-root .trigger-loading-overlay{position:absolute;z-index:45;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:#161516;color:#e7e7e7;text-align:center;pointer-events:auto}#trigger-blueprint-root .trigger-loading-overlay>strong{font-size:.9rem;font-weight:650}#trigger-blueprint-root .trigger-loading-overlay>span{max-width:420px;color:#8f8f8f;font-size:.72rem;line-height:1.55}#trigger-blueprint-root .trigger-loading-mark,#trigger-blueprint-root .trigger-loading-error-icon{width:58px;height:58px;fill:none;stroke:#32d551;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#trigger-blueprint-root .trigger-loading-mark rect,#trigger-blueprint-root .trigger-loading-mark path{stroke-dasharray:22 10;animation:trigger-loading-line 1.25s linear infinite}#trigger-blueprint-root .trigger-loading-mark circle{fill:#161516;animation:trigger-loading-node 1.25s ease-in-out infinite}#trigger-blueprint-root .trigger-loading-overlay--error{background:#161516}#trigger-blueprint-root .trigger-loading-error-icon{stroke:#ff747f}#trigger-blueprint-root .trigger-loading-overlay--error button{margin-top:4px;border:1px solid #32d551;border-radius:4px;background:transparent;color:#bdf3c7;padding:7px 15px;cursor:pointer}@keyframes trigger-loading-line{to{stroke-dashoffset:-64}}@keyframes trigger-loading-node{0%,100%{opacity:.35}50%{opacity:1}}@media(prefers-reduced-motion:reduce){#trigger-blueprint-root .trigger-loading-mark rect,#trigger-blueprint-root .trigger-loading-mark path,#trigger-blueprint-root .trigger-loading-mark circle{animation:none}}
+
+/* 节点属性树必须占满侧栏；避免被 .graph-property-list>div 的 90px label grid 误伤。 */
+.graph-property-list>.graph-property-tree-mount{display:grid;grid-template-columns:minmax(0,1fr);grid-column:1/-1;width:100%;min-width:0;margin:0}
+.world-property-tree{container-type:inline-size;width:100%;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:10px;font-size:.78rem}
+.world-property-tree *{min-width:0}
+.world-property-tree__header{display:flex;align-items:center;min-height:30px;margin-bottom:7px}
+.world-property-tree__header strong{font-size:.82rem}
+.world-property-card{width:100%;min-width:0;margin-top:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:8px}
+.world-property-card__head{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
+.world-property-card__identity{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(92px,.62fr);align-items:center;gap:6px}
+.world-property-card__metadata{display:flex;align-items:center;gap:6px}
+.world-property-switch{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);padding:2px;cursor:pointer;font-size:.7rem;white-space:nowrap}
+.world-property-switch>span{position:relative;width:30px;height:17px;flex:0 0 30px;border:1px solid #555;border-radius:999px;background:#2b2b2b;transition:background .15s,border-color .15s}
+.world-property-switch>span::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#999;transition:transform .15s,background .15s}
+.world-property-switch[aria-checked="true"]>span{border-color:var(--accent);background:var(--accent-soft)}
+.world-property-switch[aria-checked="true"]>span::after{transform:translateX(13px);background:var(--accent)}
+.world-property-switch b{font-weight:500}
+.world-property-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
+.world-property-switch:disabled{opacity:.4;cursor:not-allowed}
+.world-property-card__actions{display:flex;align-items:center;gap:6px;min-width:0}
+.world-property-cg-summary{min-width:0;flex:1;overflow:hidden;color:var(--muted);font-size:.69rem;text-overflow:ellipsis;white-space:nowrap}
+.world-property-card__badges{display:flex;flex-wrap:wrap;gap:4px}
+.world-property-card__badges span{border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:2px 6px;font-size:.64rem}
+.world-property-key,.world-property-fixed-key,.world-property-type,.world-property-value{width:100%;min-width:0}
+.world-property-fixed-key{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.world-property-tree input,.world-property-tree select{min-height:30px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);padding:4px 7px;font-size:.72rem}
+.world-property-value{display:block;margin-top:8px}
+.world-property-fab{display:inline-grid;place-items:center;width:30px;height:30px;min-width:30px;border:1px solid #4a4a4a;border-radius:50%;background:transparent;color:#d7d7d7;padding:0;cursor:pointer}
+.world-property-fab svg,.world-property-chip-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
+.world-property-fab:hover:not(:disabled),.world-property-fab:focus-visible{border-color:var(--accent);color:var(--accent)}
+.world-property-fab.is-primary{border-color:var(--accent);color:var(--accent)}
+.world-property-fab.is-danger{border-color:#694044;color:#ff8e94}
+.world-property-fab:disabled,.world-property-chip-button:disabled{opacity:.4;cursor:not-allowed}
+.world-property-fab-spacer{width:30px;height:30px}
+.world-property-add{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:7px;margin-top:8px}
+.world-property-children{min-width:0;margin-top:8px;margin-left:6px;padding-left:8px;border-left:1px solid var(--accent)}
+.world-property-reference{display:grid;grid-template-columns:86px minmax(0,1fr);gap:6px}
+.world-property-reference>.world-property-validated:nth-child(3){grid-column:1/-1}
+.world-property-validated{display:grid;gap:3px;width:100%;min-width:0}
+.world-property-validated input{width:100%;min-width:0}
+.world-property-validated small{color:var(--red);font-size:.65rem}
+.world-property-validated.is-invalid input{border-color:var(--red)}
+.world-property-rich{display:grid;gap:6px}
+.world-property-rich__row{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:start;gap:6px}
+.world-property-rich__add{display:flex;flex-wrap:wrap;gap:6px}
+.world-property-chip-button{display:inline-flex;align-items:center;gap:5px;min-height:30px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);padding:4px 9px;font-size:.68rem;cursor:pointer}
+.world-property-depth-note{margin:8px 0 0;color:var(--muted);font-size:.68rem;line-height:1.5}
+.world-property-tree__error{width:100%;min-width:0;border:1px solid var(--red);background:var(--bg);color:var(--red);padding:10px}
+@container(max-width:300px){.world-property-card__identity{grid-template-columns:30px minmax(0,1fr)}.world-property-type{grid-column:2}.world-property-card__metadata{grid-template-columns:1fr}.world-property-switch{justify-self:start}.world-property-reference{grid-template-columns:1fr}}
+
+/* Host 主题由根 token 统一控制；图谱共享样式继续由 graph.css 拥有。 */
+.graph-workspace-view,.graph-stage .graph-canvas,.graph-canvas,.view[data-view-panel="trigger"]{background:var(--bg)}
+.nav-item.active,.tab.active{background:var(--accent-soft)}
+.nav-item.active,.tag{border-color:#32623c}
+.action-icon{border-color:#32623c;background:var(--accent-soft)}
+#spatial-canvas .graph-node.selected circle{fill:var(--accent-soft)}
+input:focus,textarea:focus{box-shadow:0 0 0 2px rgba(50,213,81,.15)}
+
+/* CG 只消费项目已有图片，内部 runtime definition 不在 GUI 暴露。 */
+.graph-cg-current-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}
+.graph-cg-current-cell{position:relative;display:block;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);padding:0;cursor:pointer;aspect-ratio:1}
+.graph-cg-current-cell:hover,.graph-cg-current-cell:focus-visible,.graph-cg-current-cell.selected{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
+.graph-cg-current-cell img{display:block;width:100%;height:100%;object-fit:cover}
+.graph-cg-modal-backdrop{position:fixed;z-index:40;inset:0;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72)}
+.graph-cg-modal{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(720px,calc(100vw - 32px));height:min(520px,calc(100vh - 32px));max-width:720px;max-height:520px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
+.graph-cg-modal>header,.graph-cg-modal>footer{display:flex;align-items:center;padding:12px 16px;border-color:var(--line);background:var(--surface)}
+.graph-cg-modal>header{justify-content:space-between;border-bottom:1px solid var(--line)}
+.graph-cg-modal>header h2{margin:0;font-size:1rem}
+.graph-cg-modal>footer{justify-content:flex-end;border-top:1px solid var(--line)}
+.graph-cg-modal-body{min-height:0;overflow:auto;padding:14px 16px}
+.graph-cg-current{min-height:0}
+.graph-cg-current-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
+.graph-cg-current-heading h3{margin:0;font-size:.8rem;color:var(--muted)}
+.graph-cg-modal-empty{grid-column:1/-1;margin:0;color:var(--muted);font-size:.75rem}
+.graph-cg-modal-status{margin:0 0 10px;color:var(--muted);font-size:.78rem}
+.model-settings-dialog{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.model-settings-dialog::backdrop{background:rgba(0,0,0,.72)}.model-settings-shell{display:grid;grid-template-rows:auto 1fr auto}.model-settings-shell>header,.model-settings-shell>footer{display:flex;align-items:center;padding:12px 16px;background:var(--surface)}.model-settings-shell>header{justify-content:space-between;border-bottom:1px solid var(--line)}.model-settings-shell>header p{margin:0 0 3px;color:var(--muted);font-size:.72rem}.model-settings-shell>header h2{margin:0;font-size:1rem}.model-settings-shell>footer{justify-content:flex-end;gap:8px;border-top:1px solid var(--line)}.model-settings-body{display:grid;gap:14px;padding:16px}.model-settings-body p{margin:0;color:var(--muted);font-size:.78rem}.model-settings-body label{display:grid;gap:6px}.model-settings-body label span{font-size:.72rem;color:var(--muted)}.model-settings-body select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:6px;padding:9px 10px}.model-settings-body select:disabled{opacity:.72}
+@media(max-width:520px){.graph-cg-current-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+.sidebar-account { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #383638); }
+.sidebar-account #auth-start-form:not([hidden]) { display: flex; justify-content: center; }
+.sidebar-account #account-details { display: grid; gap: 5px; min-width: 0; }
+.sidebar-account #account-details[hidden] { display: none; }
+.sidebar-account #account-name { overflow-wrap: anywhere; font-size: 13px; }
+.sidebar-account #account-balance { color: #decda5; font-size: 12px; overflow-wrap: anywhere; }
+.spatial-template-view{min-height:calc(100vh - 65px);background:var(--bg)}main .spatial-template-view.active{display:block}.spatial-template-panel{width:min(920px,100%);margin:0 auto;padding:36px 28px;display:grid;gap:20px}.spatial-template-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.spatial-template-heading h1{margin:0;font-size:1.3rem}.spatial-template-kicker{margin:0 0 4px;color:var(--accent);font-size:.72rem;letter-spacing:.08em}.spatial-template-status{margin:0;color:var(--muted);font-size:.78rem}.spatial-template-status[data-state="loading"]{color:var(--amber)}.spatial-template-status[data-state="error"]{color:var(--red)}.spatial-template-status[data-state="ready"]{color:var(--accent)}.spatial-template-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.spatial-template-tab{border:0;border-radius:5px;background:transparent;color:var(--muted);padding:9px;cursor:pointer;font-size:.8rem}.spatial-template-tab.active{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px #315c38}.spatial-template-card{display:grid;gap:16px;max-width:620px;padding:23px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.spatial-template-card h2{margin:0;font-size:1rem}.spatial-template-description,.spatial-template-fixed,.spatial-template-revision,.spatial-template-empty{margin:0;color:var(--muted);font-size:.82rem}.spatial-template-fixed{padding:9px 10px;border-left:2px solid var(--accent);background:var(--accent-soft);color:var(--text)}.spatial-template-field{display:grid;gap:6px}.spatial-template-field>span{color:var(--muted);font-size:.78rem}.spatial-template-field select,.spatial-template-field input{border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);padding:9px 10px;font:inherit}.spatial-template-parameters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spatial-template-actions{display:flex;justify-content:flex-end;gap:8px}.spatial-template-confirmation{max-width:620px;padding:16px 18px;border:1px solid #7f6830;border-radius:var(--radius);background:#2d291d;color:var(--text);box-shadow:var(--shadow)}.spatial-template-confirmation p{margin:0 0 14px;font-size:.84rem;line-height:1.55}@media(max-width:700px){.nav-group-toggle .nav-chevron,.nav-subitems{display:none}.spatial-template-panel{padding:24px 14px}.spatial-template-tabs,.spatial-template-parameters{grid-template-columns:repeat(2,minmax(0,1fr))}.spatial-template-heading{align-items:flex-start;flex-direction:column}}

package/assets/gui/terrain-render.js

@@ -0,0 +1,120 @@
+/** 地形高度值是生成器的 -1..1 归一化输出；只在渲染时投影为米，绝不反写世界。 */
+/** 默认开启，避免新建地图在未调图层前丢失可读地形边界。 */
+export const DEFAULT_TERRAIN_LAYERS = Object.freeze({ showContours: true });
+
+const LIGHT = Object.freeze(normalize(-0.58, -0.42, 0.7));
+
+function normalize(x, y, z) {
+  const length = Math.hypot(x, y, z) || 1;
+  return [x / length, y / length, z / length];
+}
+
+function elevationAt(elevations, width, height, x, y) {
+  return Number(elevations[Math.max(0, Math.min(height - 1, y)) * width + Math.max(0, Math.min(width - 1, x))]);
+}
+
+/**
+ * 用真实世界采样间距计算法线。相同斜坡的 LOD 栅格密度变化不会改变光照。
+ */
+export function hillshadeAt({ elevations, width, height, x, y, extentWidthMeters, extentHeightMeters, elevationScaleMeters }) {
+  if (!Number.isFinite(elevationScaleMeters) || elevationScaleMeters <= 0) throw new TypeError("缺少权威高程米制");
+  const dx = extentWidthMeters / Math.max(1, width - 1);
+  const dy = extentHeightMeters / Math.max(1, height - 1);
+  const west = elevationAt(elevations, width, height, x - 1, y) * elevationScaleMeters;
+  const east = elevationAt(elevations, width, height, x + 1, y) * elevationScaleMeters;
+  const north = elevationAt(elevations, width, height, x, y - 1) * elevationScaleMeters;
+  const south = elevationAt(elevations, width, height, x, y + 1) * elevationScaleMeters;
+  const spanX = x > 0 && x + 1 < width ? 2 * dx : dx;
+  const spanY = y > 0 && y + 1 < height ? 2 * dy : dy;
+  const [nx, ny, nz] = normalize(-(east - west) / spanX, -(south - north) / spanY, 1);
+  return Math.max(0, nx * LIGHT[0] + ny * LIGHT[1] + nz * LIGHT[2]);
+}
+
+function crossing(left, right, level) {
+  const delta = right - left;
+  if (Math.abs(delta) < 1e-12) return 0.5;
+  return Math.max(0, Math.min(1, (level - left) / delta));
+}
+
+/**
+ * 从同一实际高度网格生成米制等高线。每一端点都是世界坐标，tile 边界可无缝拼接。
+ * 海、湖相关的 cell 整体跳过，以免把水文掩码渲染成伪等高线。
+ */
+export function contourSegments({ elevations, width, height, seaLevel, lakeMask, originXMeters = 0, originYMeters = 0, extentWidthMeters, extentHeightMeters, elevationScaleMeters, intervalMeters, maxSegments = 4096 }) {
+  if (!Number.isFinite(elevationScaleMeters) || elevationScaleMeters <= 0) throw new TypeError("缺少权威高程米制");
+  if (!Number.isFinite(intervalMeters) || intervalMeters <= 0 || width < 2 || height < 2) return [];
+  const dx = extentWidthMeters / (width - 1);
+  const dy = extentHeightMeters / (height - 1);
+  const segments = [];
+  for (let y = 0; y + 1 < height; y += 1) {
+    for (let x = 0; x + 1 < width; x += 1) {
+        const indices = [y * width + x, y * width + x + 1, (y + 1) * width + x + 1, (y + 1) * width + x];
+        if (indices.some((index) => lakeMask?.[index] === true || Number(elevations[index]) <= seaLevel)) continue;
+        const values = indices.map((index) => Number(elevations[index]) * elevationScaleMeters);
+        const minimum = Math.min(...values);
+        const maximum = Math.max(...values);
+        const first = Math.ceil(minimum / intervalMeters) * intervalMeters;
+        for (let level = first; level <= maximum + 1e-9; level += intervalMeters) {
+        const mask = Number(values[0] > level) | Number(values[1] > level) << 1 | Number(values[2] > level) << 2 | Number(values[3] > level) << 3;
+        if (mask === 0 || mask === 15) continue;
+        const edges = {
+          top: [crossing(values[0], values[1], level), 0],
+          right: [1, crossing(values[1], values[2], level)],
+          bottom: [crossing(values[3], values[2], level), 1],
+          left: [0, crossing(values[0], values[3], level)],
+        };
+        const pairs = {
+          1: [["left", "top"]], 2: [["top", "right"]], 3: [["left", "right"]], 4: [["right", "bottom"]],
+          5: [["left", "top"], ["right", "bottom"]], 6: [["top", "bottom"]], 7: [["left", "bottom"]],
+          8: [["bottom", "left"]], 9: [["top", "bottom"]], 10: [["top", "right"], ["bottom", "left"]],
+          11: [["right", "bottom"]], 12: [["left", "right"]], 13: [["top", "right"]], 14: [["left", "top"]],
+        }[mask] ?? [];
+        for (const [from, to] of pairs) {
+          const a = edges[from]; const b = edges[to];
+          segments.push([originXMeters + (x + a[0]) * dx, originYMeters + (y + a[1]) * dy, originXMeters + (x + b[0]) * dx, originYMeters + (y + b[1]) * dy, level]);
+          // 不截断半个 tile：提高整个 tile 的间距，保留完整且连续的主等高线。
+          if (segments.length > maxSegments) return contourSegments({
+            elevations, width, height, seaLevel, lakeMask, originXMeters, originYMeters, extentWidthMeters, extentHeightMeters,
+            elevationScaleMeters, intervalMeters: intervalMeters * 2, maxSegments,
+          });
+        }
+      }
+    }
+  }
+  Object.defineProperty(segments, "intervalMeters", { value: intervalMeters, enumerable: false });
+  return segments;
+}
+
+/** 将世界坐标等高线压缩为可精确计量的连续 buffer；每段固定 5 个 Float64。 */
+export function packContourSegments(segments) {
+  const packed = new Float64Array(segments.length * 5);
+  for (let index = 0; index < segments.length; index += 1) packed.set(segments[index], index * 5);
+  Object.defineProperty(packed, "intervalMeters", { value: segments.intervalMeters, enumerable: false });
+  return packed;
+}
+
+/** 以屏幕可读性选相邻米制间距，并提供交叉淡化，避免 LOD 阈值跳变。 */
+export function contourPlan(metersPerPixel) {
+  const target = Math.max(1, metersPerPixel) * 12;
+  const steps = [5, 10, 20, 50, 100, 200, 500, 1000];
+  const found = steps.findIndex((step) => step >= target);
+  const upperIndex = found < 0 ? steps.length - 1 : found;
+  const upper = steps[upperIndex];
+  const lower = steps[Math.max(0, upperIndex - 1)];
+  const blend = upper === lower ? 1 : Math.max(0, Math.min(1, (target - lower) / (upper - lower)));
+  return { fineIntervalMeters: lower, coarseIntervalMeters: upper, coarseAlpha: blend, majorEvery: 5 };
+}
+
+/**
+ * 多个 tile 自适应缓存后，绘制只能消费它们共同拥有的等高线层级。
+ * interval 都由 5m 起成倍提升，向上对齐不会在 tile 边界凭空补线。
+ */
+export function sharedContourPlan(metersPerPixel, minimumAvailableIntervalMeters = 5) {
+  const plan = contourPlan(metersPerPixel);
+  const minimum = Math.max(5, minimumAvailableIntervalMeters);
+  const align = (interval) => Math.max(minimum, Math.ceil(interval / minimum) * minimum);
+  const fineIntervalMeters = align(plan.fineIntervalMeters);
+  const coarseIntervalMeters = align(plan.coarseIntervalMeters);
+  if (fineIntervalMeters === coarseIntervalMeters) return { fineIntervalMeters, coarseIntervalMeters, coarseAlpha: 1, majorEvery: plan.majorEvery };
+  return { ...plan, fineIntervalMeters, coarseIntervalMeters };
+}

package/assets/gui/workspace-status.css

@@ -0,0 +1,17 @@
+.workspace-status{width:100%;min-height:100%;display:grid;place-content:center;justify-items:center;gap:10px;padding:clamp(28px,7vh,76px) 24px;background:var(--bg,#161516);color:var(--text,#f2f2f2);text-align:center}
+.workspace-status>svg{display:block;width:clamp(76px,11vw,112px);height:auto;margin-bottom:5px;fill:none;stroke:var(--accent,#32d551);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
+.workspace-status--loading>svg path:first-child{stroke-dasharray:8 7;animation:workspace-status-trace 1.5s linear infinite}
+.workspace-status__title{margin:0;color:var(--text,#f2f2f2);font-size:clamp(1rem,1.6vw,1.2rem);font-weight:650;line-height:1.35;letter-spacing:-.01em}
+.workspace-status__description{max-width:420px;margin:0;color:var(--muted,#aaa7aa);font-size:.82rem;line-height:1.7}
+.workspace-status__details{width:min(420px,100%);margin-top:3px;color:var(--muted-2,#817f81);font-size:.7rem;text-align:left}
+.workspace-status__details summary{width:max-content;margin:auto;cursor:pointer;color:var(--muted-2,#817f81);outline:none}
+.workspace-status__details summary:focus-visible{border-radius:3px;outline:2px solid var(--accent,#32d551);outline-offset:2px}
+.workspace-status__details-content{display:grid;gap:6px;margin-top:8px;padding:9px 11px;border:1px solid var(--line-soft,#343334);border-radius:6px;background:var(--surface,#201f20);overflow-wrap:anywhere}
+.workspace-status__code{width:max-content;max-width:100%;overflow:hidden;color:var(--muted,#aaa7aa);font:inherit;text-overflow:ellipsis;white-space:nowrap}
+.workspace-status__message{margin:0;color:var(--muted-2,#817f81);line-height:1.55}
+.workspace-status__action{margin-top:5px;min-width:104px}
+.workspace-status--error>svg{stroke:var(--accent,#32d551)}
+.trigger-workspace-status:not([hidden]){display:grid;min-height:520px;height:calc(100vh - 65px)}
+@keyframes workspace-status-trace{to{stroke-dashoffset:-30}}
+@media(prefers-reduced-motion:reduce){.workspace-status--loading>svg path:first-child{animation:none}}
+@media(max-width:520px){.workspace-status{padding:28px 18px}.workspace-status__description{max-width:310px}}