feat(web): complete node graph dark mode and i18n rollout

Author: Minsecrus

apps/web/src/auth/ProfilePage.tsx

@@ -142,8 +142,8 @@ export const ProfilePage = () => {
 
   if (!token) {
     return (
-      <div className="min-h-screen bg-white text-[#101010]">
-        <header className="flex items-center justify-between gap-4 bg-white px-5 py-4 md:px-7 md:py-[18px]">
+      <div className="min-h-screen bg-(--color-0) text-(--color-10)">
+        <header className="flex items-center justify-between gap-4 bg-(--color-0) px-5 py-4 md:px-7 md:py-[18px]">
           <MdrButton
             text={t('actions.backHome')}
             size="Small"
@@ -158,7 +158,7 @@ export const ProfilePage = () => {
           />
         </header>
         <main className="mx-auto grid max-w-[980px] gap-[18px] px-5 pb-10 md:px-7 md:pb-12">
-          <div className="grid min-h-[calc(100vh-140px)] place-content-center gap-2.5 text-center text-[#2b2b2b]">
+          <div className="grid min-h-[calc(100vh-140px)] place-content-center gap-2.5 text-center text-(--color-8)">
             <MdrIcon icon={<UserRound />} size={34} />
             <MdrHeading level={2} className="m-0 text-[88px]">
               {t('empty.title')}
@@ -171,8 +171,8 @@ export const ProfilePage = () => {
   }
 
   return (
-    <div className="min-h-screen bg-white text-[#101010]">
-      <header className="flex items-center justify-between gap-4 bg-white px-5 py-4 md:px-7 md:py-[18px]">
+    <div className="min-h-screen bg-(--color-0) text-(--color-10)">
+      <header className="flex items-center justify-between gap-4 bg-(--color-0) px-5 py-4 md:px-7 md:py-[18px]">
         <MdrButton
           text={t('actions.backHome')}
           size="Small"
@@ -234,12 +234,12 @@ export const ProfilePage = () => {
             >
               {displayName}
             </MdrHeading>
-            <MdrParagraph className="m-0 max-w-[58ch] text-[13px] leading-[1.5] text-[#2b2b2b]">
+            <MdrParagraph className="m-0 max-w-[58ch] text-[13px] leading-[1.5] text-(--color-7)">
               {displayBio}
             </MdrParagraph>
             <button
               type="button"
-              className="-translate-x-2.5 inline-flex max-w-full cursor-pointer items-center gap-3 rounded-2xl border-0 bg-(--color-0) px-3 py-2.5 transition-colors duration-150 hover:bg-black/[0.02]"
+              className="-translate-x-2.5 inline-flex max-w-full cursor-pointer items-center gap-3 rounded-2xl border-0 bg-(--color-0) px-3 py-2.5 transition-colors duration-150 hover:bg-(--color-1)"
               onClick={() => copyText(user?.id, t('messages.copiedId'))}
               aria-label={t('actions.copyId')}
               title={t('actions.copyId')}
@@ -257,14 +257,14 @@ export const ProfilePage = () => {
                       {bits.map((bit, bitIndex) => (
                         <span
                           key={`${columnIndex}-${bitIndex}`}
-                          className={`h-0.5 w-0.5 rounded-full ${bit ? 'bg-[#101010]' : 'invisible bg-black/12 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]'}`}
+                          className={`h-0.5 w-0.5 rounded-full ${bit ? 'bg-(--color-9)' : 'invisible'}`}
                         />
                       ))}
                     </div>
                   ))}
                 </div>
               ) : (
-                <span className="[font-family:'JetBrains_Mono','SFMono-Regular','Menlo',monospace] text-xs tracking-[0.12em] break-all text-[#101010]">
+                <span className="[font-family:'JetBrains_Mono','SFMono-Regular','Menlo',monospace] text-xs tracking-[0.12em] break-all text-(--color-9)">
                   {user?.id}
                 </span>
               )}
@@ -278,7 +278,7 @@ export const ProfilePage = () => {
         <section className="mt-0.5 flex flex-wrap items-center gap-2.5">
           <button
             type="button"
-            className="inline-flex cursor-pointer items-center gap-2 rounded-full border-0 bg-black/[0.04] px-3 py-2 text-xs text-[#101010] transition-colors duration-150 hover:bg-black/[0.06]"
+            className="inline-flex cursor-pointer items-center gap-2 rounded-full border-0 bg-(--color-1) px-3 py-2 text-xs text-(--color-9) transition-colors duration-150 hover:bg-(--color-2)"
             onClick={() => copyText(user?.email, t('messages.copiedEmail'))}
           >
             <MdrIcon icon={<Mail />} size={16} />
@@ -287,7 +287,7 @@ export const ProfilePage = () => {
               <MdrIcon icon={<Copy />} size={14} />
             </span>
           </button>
-          <div className="inline-flex cursor-default items-center gap-2 rounded-full border-0 bg-black/[0.04] px-3 py-2 text-xs text-[#101010]">
+          <div className="inline-flex cursor-default items-center gap-2 rounded-full border-0 bg-(--color-1) px-3 py-2 text-xs text-(--color-9)">
             <MdrIcon icon={<Calendar />} size={16} />
             <span>{formatDate(user?.createdAt)}</span>
           </div>
@@ -327,15 +327,15 @@ export const ProfilePage = () => {
           />
         )}
         <div className="grid gap-3.5">
-          <label className="grid gap-1.5 text-xs text-[#5c5c5c]">
+          <label className="grid gap-1.5 text-xs text-(--color-7)">
             <span>{t('labels.name')}</span>
             <MdrInput
               size="Small"
               value={draft.name}
               onChange={(value) => setDraft((p) => ({ ...p, name: value }))}
             />
           </label>
-          <label className="grid gap-1.5 text-xs text-[#5c5c5c]">
+          <label className="grid gap-1.5 text-xs text-(--color-7)">
             <span>{t('labels.description')}</span>
             <MdrTextarea
               size="Small"

apps/web/src/editor/__tests__/EditorHome.test.tsx

@@ -40,7 +40,9 @@ describe('EditorHome', () => {
   });
 
   it('opens the new resource modal when clicking the create button', async () => {
-    listProjectsMock.mockResolvedValue({ projects: [] });
+    listProjectsMock.mockImplementation(
+      () => new Promise<{ projects: [] }>(() => undefined)
+    );
     render(<EditorHome />);
 
     fireEvent.click(

apps/web/src/editor/features/design/BlueprintEditor.autosave.ts

@@ -162,10 +162,10 @@ export const useBlueprintAutosave = ({
     if (!token) return;
     if (hasWorkspaceTarget && !workspaceCapabilitiesLoaded) return;
     if (lastQueuedSaveDocRef.current === mirDoc) return;
-    lastQueuedSaveDocRef.current = mirDoc;
     let disposed = false;
 
     const timeoutId = window.setTimeout(() => {
+      lastQueuedSaveDocRef.current = mirDoc;
       const validation = validateMirDocument(mirDoc);
       if (validation.hasError) {
         setSaveTransport(null);

apps/web/src/editor/features/design/__tests__/BlueprintEditorInspector.layout.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BlueprintEditorInspector } from '../BlueprintEditorInspector';
@@ -65,8 +65,19 @@ beforeEach(() => {
   resetEditorStore();
 });
 
+const ensureLayoutGroupButton = async (groupName: 'Grid' | 'Spacing') => {
+  if (!screen.queryByRole('button', { name: 'Layout' })) {
+    const styleToggle = await screen.findByRole('button', { name: 'Style' });
+    fireEvent.click(styleToggle);
+  }
+  if (!screen.queryByRole('button', { name: groupName })) {
+    fireEvent.click(await screen.findByRole('button', { name: 'Layout' }));
+  }
+  return await screen.findByRole('button', { name: groupName });
+};
+
 describe('BlueprintEditorInspector layout panel', () => {
-  it('updates gap for a Flex node', () => {
+  it('updates gap for a Flex node', async () => {
     resetEditorStore({
       mirDoc: createMirDoc([
         {
@@ -91,15 +102,15 @@ describe('BlueprintEditorInspector layout panel', () => {
       />
     );
 
-    fireEvent.change(screen.getByPlaceholderText('8'), {
+    fireEvent.change(await screen.findByPlaceholderText('8'), {
       target: { value: '24' },
     });
 
     const child = useEditorStore.getState().mirDoc.ui.root.children?.[0];
     expect(child?.props?.gap).toBe(24);
   });
 
-  it('updates gridTemplateColumns for a Grid node', () => {
+  it('updates gridTemplateColumns for a Grid node', async () => {
     resetEditorStore({
       mirDoc: createMirDoc([
         {
@@ -125,15 +136,25 @@ describe('BlueprintEditorInspector layout panel', () => {
       />
     );
 
+    fireEvent.click(await ensureLayoutGroupButton('Grid'));
+    await waitFor(() => {
+      expect(screen.getAllByTestId('mdr-input').length).toBeGreaterThanOrEqual(
+        2
+      );
+    });
     const inputs = screen.getAllByTestId('mdr-input') as HTMLInputElement[];
     // [0] id, [1] columns (gap uses editor-only UnitInput)
     fireEvent.change(inputs[1], { target: { value: '3' } });
 
-    const child = useEditorStore.getState().mirDoc.ui.root.children?.[0];
-    expect(child?.style?.gridTemplateColumns).toBe('repeat(3, minmax(0, 1fr))');
+    await waitFor(() => {
+      const child = useEditorStore.getState().mirDoc.ui.root.children?.[0];
+      expect(child?.style?.gridTemplateColumns).toBe(
+        'repeat(3, minmax(0, 1fr))'
+      );
+    });
   });
 
-  it('keeps margin shorthand and per-side inputs in sync', () => {
+  it('keeps margin shorthand and per-side inputs in sync', async () => {
     resetEditorStore({
       mirDoc: createMirDoc([
         {
@@ -157,25 +178,27 @@ describe('BlueprintEditorInspector layout panel', () => {
       />
     );
 
-    const shorthandInput = screen.getByTestId(
+    fireEvent.click(await ensureLayoutGroupButton('Spacing'));
+
+    const shorthandInput = (await screen.findByTestId(
       'inspector-margin-shorthand'
-    ) as HTMLInputElement;
+    )) as HTMLInputElement;
     fireEvent.change(shorthandInput, { target: { value: '10px 20px' } });
 
-    fireEvent.click(screen.getByTestId('inspector-margin-toggle'));
-
-    const topInput = screen
-      .getByTestId('inspector-margin-top')
-      .querySelector('input') as HTMLInputElement;
-    const rightInput = screen
-      .getByTestId('inspector-margin-right')
-      .querySelector('input') as HTMLInputElement;
-    const bottomInput = screen
-      .getByTestId('inspector-margin-bottom')
-      .querySelector('input') as HTMLInputElement;
-    const leftInput = screen
-      .getByTestId('inspector-margin-left')
-      .querySelector('input') as HTMLInputElement;
+    fireEvent.click(await screen.findByTestId('inspector-margin-toggle'));
+
+    const topInput = (
+      await screen.findByTestId('inspector-margin-top')
+    ).querySelector('input') as HTMLInputElement;
+    const rightInput = (
+      await screen.findByTestId('inspector-margin-right')
+    ).querySelector('input') as HTMLInputElement;
+    const bottomInput = (
+      await screen.findByTestId('inspector-margin-bottom')
+    ).querySelector('input') as HTMLInputElement;
+    const leftInput = (
+      await screen.findByTestId('inspector-margin-left')
+    ).querySelector('input') as HTMLInputElement;
 
     expect(topInput.value).toBe('10');
     expect(rightInput.value).toBe('20');

apps/web/src/editor/features/design/blueprint/external/runtime/__tests__/externalState.test.ts

@@ -57,12 +57,12 @@ describe('external library state', () => {
     const diagnostics = await mod.ensureExternalLibraryById('unknown');
     expect(diagnostics[0]?.code).toBe('ELIB-1004');
     expect(mod.getExternalLibraryState('unknown').status).toBe('error');
-  });
+  }, 15000);
 
   it('tracks configured library states for success and failure', async () => {
     const mod = await loadExternalModule();
     await mod.ensureConfiguredExternalLibraries(['antd', 'mui']);
     expect(mod.getExternalLibraryState('antd').status).toBe('success');
     expect(mod.getExternalLibraryState('mui').status).toBe('error');
-  });
+  }, 15000);
 });

apps/web/src/editor/features/design/inspector/classProtocol/MountedCssEditorModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import {
   Compartment,
@@ -92,16 +92,23 @@ export function MountedCssEditorModal({
   onClose,
   onSave,
 }: MountedCssEditorModalProps) {
+  const resolveTheme = () => {
+    if (typeof document === 'undefined') return 'light';
+    const theme = document.documentElement.getAttribute('data-theme');
+    return theme === 'dark' ? 'dark' : 'light';
+  };
   const { t } = useTranslation('blueprint');
+  const [editorTheme, setEditorTheme] = useState<'light' | 'dark'>(
+    () => resolveTheme() as 'light' | 'dark'
+  );
   const invalidSyntaxMessage = t(
     'inspector.classProtocol.mountedCss.invalidSyntax',
     {
       defaultValue: DEFAULT_INVALID_CSS_MESSAGE,
     }
   );
-  const lintCompartmentRef = useRef(new Compartment());
+  const [lintCompartment] = useState(() => new Compartment());
   const extensions = useMemo(() => {
-    const lintCompartment = lintCompartmentRef.current;
     const colorGutter = gutter({
       class: 'MountedCssColorGutter',
       markers(view) {
@@ -150,18 +157,40 @@ export function MountedCssEditorModal({
       lintGutter(),
       lintTheme,
     ];
-  }, []);
+  }, [lintCompartment]);
   const editorRef = useRef<EditorView | null>(null);
 
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    const syncTheme = () => {
+      const nextTheme = root.getAttribute('data-theme');
+      setEditorTheme(nextTheme === 'dark' ? 'dark' : 'light');
+    };
+    syncTheme();
+    const observer = new MutationObserver((mutations) => {
+      if (
+        mutations.some((mutation) => mutation.attributeName === 'data-theme')
+      ) {
+        syncTheme();
+      }
+    });
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.dispatch({
-      effects: lintCompartmentRef.current.reconfigure(
+      effects: lintCompartment.reconfigure(
         createSyntaxLinterExtension(invalidSyntaxMessage)
       ),
     });
-  }, [invalidSyntaxMessage]);
+  }, [invalidSyntaxMessage, lintCompartment]);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -243,12 +272,12 @@ export function MountedCssEditorModal({
               value={value || DEFAULT_CSS_CONTENT}
               height="100%"
               extensions={extensions}
-              theme="light"
+              theme={editorTheme}
               onChange={(next) => onChange(next)}
               onCreateEditor={(view) => {
                 editorRef.current = view;
                 view.dispatch({
-                  effects: lintCompartmentRef.current.reconfigure(
+                  effects: lintCompartment.reconfigure(
                     createSyntaxLinterExtension(invalidSyntaxMessage)
                   ),
                 });

apps/web/src/editor/features/design/inspector/sections/basic/InspectorDataScopeFields.tsx

@@ -16,10 +16,12 @@ const asSchemaText = (value: unknown) => {
 
 export function InspectorDataScopeFields() {
   const { t, selectedNode, updateSelectedNode } = useInspectorSectionContext();
-  if (!selectedNode) return null;
+  const selectedNodeData = selectedNode?.data as
+    | Record<string, unknown>
+    | undefined;
 
   const mountedDataModel = useMemo(() => {
-    const data = selectedNode.data as Record<string, unknown> | undefined;
+    const data = selectedNodeData;
     if (isPlainObject(data?.value)) {
       return data.value;
     }
@@ -34,24 +36,24 @@ export function InspectorDataScopeFields() {
     const legacy =
       data?.[LEGACY_DATA_MODEL_KEY] ?? data?.[LEGACY_DATA_SCHEMA_KEY];
     return isPlainObject(legacy) ? legacy : {};
-  }, [selectedNode.data]);
+  }, [selectedNodeData]);
   const mountedMockData = useMemo(() => {
-    const data = selectedNode.data as Record<string, unknown> | undefined;
+    const data = selectedNodeData;
     if (data?.mock !== undefined) {
       return data.mock;
     }
     if (Array.isArray(data?.value)) {
       return data.value;
     }
     return {};
-  }, [selectedNode.data]);
+  }, [selectedNodeData]);
   const [schemaDraft, setSchemaDraft] = useState(
     asSchemaText(mountedDataModel)
   );
   const [mockDraft, setMockDraft] = useState(asSchemaText(mountedMockData));
   const [schemaError, setSchemaError] = useState<string | null>(null);
   const [mockError, setMockError] = useState<string | null>(null);
-  const isMounted = selectedNode.data !== undefined;
+  const isMounted = selectedNodeData !== undefined;
 
   useEffect(() => {
     setSchemaDraft(asSchemaText(mountedDataModel));
@@ -62,6 +64,8 @@ export function InspectorDataScopeFields() {
     setMockError(null);
   }, [mountedMockData]);
 
+  if (!selectedNode) return null;
+
   const applySchemaDraft = () => {
     const raw = schemaDraft.trim();
     if (!raw) {