minecodex 2.0.4 → 2.0.6

package/packages/ui/src/components/account-menu.mjs

@@ -0,0 +1,74 @@
+export function installAccountMenuEntry(signal, ui, native) {
+  function accountMenuEntry({ label, icon, externalIcon, onOpen }) {
+    const marker = "data-mcx-account-menu-entry";
+    let node, anchor, entryBindings, opening = false;
+    const bindings = new AbortController();
+    function svg(source, template = null) {
+      const result = new DOMParser().parseFromString(source, "image/svg+xml").documentElement;
+      result.setAttribute("aria-hidden", "true");
+      result.removeAttribute("role");
+      result.removeAttribute("aria-labelledby");
+      result.querySelectorAll("title, desc").forEach(n => n.remove());
+      result.setAttribute("class", template?.getAttribute("class") ?? "icon-xs shrink-0");
+      return result;
+    }
+    async function activate(event) {
+      event?.preventDefault();
+      event?.stopPropagation();
+      if (opening) return;
+      opening = true;
+      const close = anchor.close;
+      try { await onOpen(); close(); }
+      catch (error) { console.warn("[MineCodex] Control panel could not open", error); window.alert(error.message); }
+      finally { opening = false; }
+    }
+    function sync() {
+      if (signal.aborted) return;
+      const found = native.settings();
+      if (!found) { entryBindings?.abort(); node?.remove(); node = null; anchor = null; return; }
+      if (node?.isConnected && anchor.item === found.item) return;
+      entryBindings?.abort();
+      entryBindings = new AbortController();
+      node?.remove();
+      anchor = found;
+      // 只修改脱离 React 的副本，保留原生 Settings 节点及事件。
+      node = found.item.cloneNode(true);
+      for (const element of [node, ...node.querySelectorAll("*")]) {
+        for (const attr of [...element.attributes]) {
+          if (attr.name === "id" || attr.name === "title" || attr.name.startsWith("aria-")
+            || attr.name.startsWith("data-")) element.removeAttribute(attr.name);
+        }
+      }
+      node.setAttribute(marker, "");
+      node.setAttribute("role", "menuitem");
+      node.tabIndex = -1;
+      const [leading, title, trailing] = node.querySelector("div").children;
+      leading.replaceChildren(svg(icon, leading.querySelector("svg")));
+      title.textContent = label;
+      trailing.replaceChildren(svg(externalIcon));
+      node.addEventListener("click", activate, { signal:entryBindings.signal });
+      node.addEventListener("pointermove", () => node.focus({ preventScroll:true }), { signal:entryBindings.signal });
+      found.item.after(node);
+    }
+    function keyboard(event) {
+      if (!anchor || !node?.isConnected || !anchor.menu.contains(event.target)) return;
+      const current = event.target.closest('[role="menuitem"]');
+      let next;
+      if (current === anchor.item && event.key === "ArrowDown") next = node;
+      else if (current === node && event.key === "ArrowUp") next = anchor.item;
+      else if (current === node && event.key === "ArrowDown") {
+        const items = [...anchor.menu.querySelectorAll('[role="menuitem"]')];
+        next = items[items.indexOf(node) + 1] ?? items[0];
+      } else if (current === node && ["Enter", " "].includes(event.key)) { void activate(event); return; }
+      if (next) { event.preventDefault(); event.stopImmediatePropagation(); next.focus({ preventScroll:true }); }
+    }
+    document.addEventListener("keydown", keyboard, { capture:true, signal:bindings.signal });
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { childList:true, subtree:true });
+    const dispose = () => { observer.disconnect(); bindings.abort(); entryBindings?.abort(); node?.remove(); node = null; anchor = null; };
+    signal.addEventListener("abort", dispose, { once:true });
+    sync();
+    return { sync, dispose };
+  }
+  return { accountMenuEntry };
+}

package/packages/ui/src/components/button.mjs

@@ -11,6 +11,8 @@ export function installButton(signal, ui) {
     [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>[data-mcx-ui-action=primary]:hover:not(:disabled):not([aria-disabled=true]) { background:var(--mcx-color-background-primary-solid-hover); }
     [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>[data-mcx-ui-action=danger] { box-shadow:none; background:var(--mcx-color-background-danger-soft-alpha); color:var(--mcx-color-text-danger); }
     [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>[data-mcx-ui-action=danger]:hover:not(:disabled):not([aria-disabled=true]) { background:var(--mcx-color-background-danger-soft-alpha-hover); }
+    [data-mcx-ui-action=danger-solid], [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>[data-mcx-ui-action=danger-solid] { box-shadow:none; border-color:transparent; background:var(--mcx-color-background-danger-solid); color:var(--mcx-color-text-danger-solid); }
+    [data-mcx-ui-action=danger-solid]:hover:not(:disabled):not([aria-disabled=true]), [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>[data-mcx-ui-action=danger-solid]:hover:not(:disabled):not([aria-disabled=true]) { background:color-mix(in oklab,var(--mcx-color-background-danger-solid) 90%,transparent); }
     [data-mcx-ui-surface=dialog] button:disabled { opacity:.4; cursor:default; }
     [data-mcx-ui-surface=dialog] [data-mcx-ui-close]:focus-visible, [data-mcx-ui-surface=dialog] [data-mcx-ui-footer]>button:focus-visible { outline:2px solid var(--mcx-color-ring); outline-offset:0; }
   `;

package/packages/ui/src/components/navigation-rail.mjs

@@ -5,16 +5,19 @@ export function installNavigationRail(signal, ui, native) {
   style.setAttribute("data-minecodex-ui-styles", "navigation-rail");
   style.textContent = `[data-mcx-native-rail-icon-hidden]{display:none!important}`;
   document.head.append(style);
-  function restore() {
-    for (const [node, state] of snapshots) {
-      state.icon?.removeAttribute("data-mcx-native-rail-icon-hidden");
-      state.replacement?.remove();
-      if (!node.isConnected) continue;
-      for (const [name, value] of state.attributes) {
-        if (value === null) node.removeAttribute(name);
-        else node.setAttribute(name, value);
-      }
+  function restoreNode(node, state) {
+    state.icon?.removeAttribute("data-mcx-native-rail-icon-hidden");
+    state.replacement?.remove();
+    if (!node.isConnected) return;
+    // 路由可能已变化，恢复当前 committed props，不回放旧选中态。
+    const attributes = native.attributes(node, [...state.attributes.keys()]) ?? state.attributes;
+    for (const [name, value] of attributes) {
+      if (value === null) node.removeAttribute(name);
+      else node.setAttribute(name, value);
     }
+  }
+  function restore() {
+    for (const [node, state] of snapshots) restoreNode(node, state);
     snapshots.clear();
   }
   function selection(button, selected) {
@@ -38,6 +41,10 @@ export function installNavigationRail(signal, ui, native) {
       if (!icon) continue;
       const item = native.item(node);
       const active = item ? item.isCurrentDestination : node.getAttribute("aria-current") === "page";
+      if (!active && snapshots.has(node)) {
+        restoreNode(node, snapshots.get(node));
+        snapshots.delete(node);
+      }
       if (!active && !snapshots.has(node)) native.remember(node, icon);
       if (!selected || (!active && !node.hasAttribute("data-selected"))) continue;
       let state = snapshots.get(node);
@@ -46,7 +53,7 @@ export function installNavigationRail(signal, ui, native) {
           .map(name => [name, node.getAttribute(name)])) };
         snapshots.set(node, state);
       }
-      if (active && state.icon !== icon) {
+      if (active && (state.icon !== icon || !state.replacement?.isConnected)) {
         state.icon?.removeAttribute("data-mcx-native-rail-icon-hidden");
         state.replacement?.remove();
         state.icon = icon;
@@ -57,6 +64,7 @@ export function installNavigationRail(signal, ui, native) {
           icon.setAttribute("data-mcx-native-rail-icon-hidden", "");
         }
       }
+      if (state.replacement?.isConnected) state.icon?.setAttribute("data-mcx-native-rail-icon-hidden", "");
       node.removeAttribute("data-selected");
       node.removeAttribute("aria-current");
       if (!node.hasAttribute("data-suppress-active-style")) node.setAttribute("data-suppress-active-style", "");

package/packages/ui/src/components/page.mjs

@@ -1,8 +1,15 @@
-export function installPage(signal, ui) {
+export function installPage(signal, ui, native) {
+  const pages = new Map();
+  signal.addEventListener("abort", () => { for (const lease of pages.values()) lease.release(); pages.clear(); }, { once:true });
   return {
-    page(node, { transparent = false } = {}) {
+    page(node, { transparent = false, sidebar = "inherit", onNavigate } = {}) {
+      if (sidebar === "none" && !pages.has(node)) pages.set(node, native.standalone({ onNavigate }));
       ui.surface(node, "page", { variant:transparent ? "transparent" : "opaque" });
       return ui.layer(node, "page");
     },
+    releasePage(node, options) {
+      pages.get(node)?.release(options);
+      pages.delete(node);
+    },
   };
 }

package/packages/ui/src/foundation/layers.mjs

@@ -4,6 +4,7 @@ export function installLayers(signal) {
   style.setAttribute("data-minecodex-ui-styles", "layers");
   style.textContent = `
     [data-mcx-ui-layer=page] { position:fixed; z-index:20; }
+    [data-mcx-ui-layer=notification] { position:fixed; z-index:30; }
     [data-mcx-ui-layer=floating], [data-mcx-ui-layer=modal] { position:fixed; z-index:50; }
   `;
   document.head.append(style);

package/packages/ui/src/install.mjs

@@ -1,4 +1,7 @@
+import { createNativeAccountMenuAdapter } from "./native/account-menu.mjs";
+import { installAccountMenuEntry } from "./components/account-menu.mjs";
 import { createNativeThemeAdapter } from "./native/theme.mjs";
+import { createNativePageAdapter } from "./native/page.mjs";
 import { createNativeRailAdapter } from "./native/navigation-rail.mjs";
 import { installSurfaces } from "./foundation/surfaces.mjs";
 import { installLayers } from "./foundation/layers.mjs";
@@ -11,12 +14,14 @@ import { installFeatureTooltips } from "./components/tooltip.mjs";
 
 // 所有依赖在组装时显式写入源码，Renderer 不依赖 Node 模块闭包。
 export function createUIInstallerSource() {
-  const installers = [installSurfaces, installLayers, installDialog, installButton, installPage, installComposerMenu];
+  const installers = [installSurfaces, installLayers, installDialog, installButton, installComposerMenu];
   return `function installFeatureUI(signal, context) {
     const ui = {theme:(${createNativeThemeAdapter.toString()})(context.themeTokens,context.themeTokenAliases,context.themeBindings)};
     ${installers.map(install => `Object.assign(ui, (${install.toString()})(signal, ui));`).join("\n")}
+    Object.assign(ui, (${installPage.toString()})(signal, ui, (${createNativePageAdapter.toString()})(context.codex)));
     Object.assign(ui, (${installNavigationRail.toString()})(signal, ui, (${createNativeRailAdapter.toString()})(context.codex)));
     Object.assign(ui, (${installFeatureTooltips.toString()})(signal));
+    Object.assign(ui, (${installAccountMenuEntry.toString()})(signal, ui, (${createNativeAccountMenuAdapter.toString()})(context.codex)));
     return ui;
   }`;
 }

package/packages/ui/src/native/account-menu.mjs

@@ -0,0 +1,21 @@
+export function createNativeAccountMenuAdapter(codex) {
+  function settings() {
+    for (const menu of document.querySelectorAll('[role="menu"]')) {
+      if (!menu.checkVisibility({ visibilityProperty:true })) continue;
+      for (const item of menu.querySelectorAll('[role="menuitem"]')) {
+        const profile = codex.props(item, p => typeof p.onOpenSettings === "function" && "settingsShortcut" in p);
+        if (!profile || !codex.props(item, p => p.onClick === profile.onOpenSettings)) continue;
+        const content = item.querySelector('[data-menu-row-content]');
+        const [leading, label, shortcut] = content?.children ?? [];
+        if (!leading?.querySelector('svg') || !label || !shortcut) continue;
+        const owner = codex.props(item, p => typeof p.onClose === "function" && "open" in p);
+        if (!owner) continue;
+        codex.report("account-menu", true);
+        return { menu, item, close:owner.onClose };
+      }
+    }
+    codex.report("account-menu", false, "profile-menu-unavailable");
+    return null;
+  }
+  return { settings };
+}

package/packages/ui/src/native/navigation-rail.mjs

@@ -28,6 +28,11 @@ export function createNativeRailAdapter(codex) {
     }
     return defaultIcons.get(node)?.cloneNode(true) ?? null;
   }
-  return { item:nativeItem, icon:defaultIcon,
+  function attributes(node, names) {
+    const props = codex.currentFiber(node)?.memoizedProps;
+    if (!props || !names.some(name => Object.hasOwn(props, name))) return null;
+    return new Map(names.map(name => [name, props[name] == null ? null : String(props[name])]));
+  }
+  return { item:nativeItem, icon:defaultIcon, attributes,
     remember:(node, icon) => defaultIcons.set(node, icon.cloneNode(true)) };
 }

package/packages/ui/src/native/page.mjs

@@ -0,0 +1,38 @@
+// 原生页面壳由路由决定；借用 Projects 的无上下文侧栏壳，不改侧栏展开偏好。
+export function createNativePageAdapter(codex) {
+  function standalone({ onNavigate } = {}) {
+    const rail = codex.rail();
+    const scope = codex.props(rail, props => Boolean((props.router ?? props.value?.router)?.navigate));
+    const router = scope?.router ?? scope?.value?.router;
+    const origin = router?.state?.location;
+    if (!origin) throw new Error("The native page navigation was not found");
+    if (onNavigate && typeof router.subscribe !== "function") throw new Error("The native page navigation subscription was not found");
+    const target = "/projects";
+    const changed = origin.pathname !== target;
+    if (changed) void router.navigate(target, { replace:true, state:origin.state });
+    let released = false;
+    let unsubscribe = null;
+    let shell = router.state.location.pathname === target ? router.state.location : null;
+    const lease = {
+      release({ restoreNavigation=true } = {}) {
+        if (released) return;
+        released = true;
+        unsubscribe?.();
+        if (changed && restoreNavigation && router.state.location.pathname === target)
+          void router.navigate(origin, { replace:true, state:origin.state });
+      },
+    };
+    if (onNavigate) unsubscribe = router.subscribe(state => {
+      if (released || (state.navigation?.state && state.navigation.state !== "idle")) return;
+      const location = state.location;
+      // 等待借用页面壳的首次提交；hover 和 loader 通知不代表用户离开。
+      if (!shell && location === origin) return;
+      if (!shell && location.pathname === target) { shell = location; return; }
+      if (location === shell) return;
+      lease.release({ restoreNavigation:false });
+      onNavigate();
+    });
+    return lease;
+  }
+  return { standalone };
+}

package/packages/ui/src/native/tokens.mjs

@@ -39,6 +39,7 @@ export const CODEX_THEME_TOKENS = Object.freeze([
   "--color-background-elevated-primary-opaque",
   "--color-background-primary-ghost-hover",
   "--color-chart-blue",
+  "--color-chart-green",
   "--color-chart-purple",
   "--color-background-panel",
   "--color-background-control",
@@ -135,6 +136,9 @@ export const CODEX_THEME_TOKENS = Object.freeze([
   "--color-background-danger-soft-alpha",
   "--color-background-danger-soft-alpha-hover",
   "--color-text-danger",
+  "--color-background-danger-solid",
+  "--color-background-danger-solid-hover",
+  "--color-text-danger-solid",
 ]);
 
 // images 图片编辑器可用性依赖的项目 token 子集。