@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

package/src/widgets/json-view/JSONView.tsx

@@ -44,12 +44,7 @@ interface BlockElementProps {
 }
 function BlockElement({ children, className }: BlockElementProps) {
     return (
-        <div
-            className={clsx(
-                'flex flex-col gap-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 dark:border-s-slate-600',
-                className,
-            )}
-        >
+        <div className={clsx('flex flex-col gap-4 py-2 ps-4 border-s-4 border-s-solid border-s-border', className)}>
             {children}
         </div>
     );

package/src/widgets/markdown/ArtifactEditingSurface.test.tsx

@@ -17,6 +17,19 @@ import type { MarkdownEditingAction } from './CollaborativeMarkdownRenderer.js';
 // first document-mode test can legitimately take longer than Testing Library's one-second default.
 const LAZY_EDITOR_WAIT = { timeout: 5_000 } as const;
 
+// Waiting up to 5 s for the editor and then driving a save through it does not fit in vitest's 5 s
+// default, so a slow machine turned a passing test into a timeout. Raised for the file rather than
+// per test: every document-mode case here pays the same lazy-load cost.
+vi.setConfig({ testTimeout: 20_000 });
+
+// Budgets for the two shapes of save assertion in this file. A plain save is one debounce (400 ms)
+// plus one mocked round-trip. A conflict rebase is the same debounce followed by three sequential
+// round-trips -- save, 412, refetch, merge, save again -- so it needs several times the budget, and
+// giving it the plain-save one made it the file's flakiest assertion on a loaded machine: the retry
+// was still in flight when the wait expired, reported as "called only 1 times".
+const SAVE_WAIT = { timeout: 2_500 } as const;
+const REBASE_WAIT = { timeout: 8_000 } as const;
+
 const mocks = vi.hoisted(() => {
     const getArtifactContent = vi.fn();
     const updateArtifactContent = vi.fn();
@@ -161,15 +174,12 @@ describe('ArtifactEditingSurface', () => {
         await user.click(editor);
         await user.type(editor, ' revised');
 
-        await waitFor(
-            () => {
-                expect(mocks.updateArtifactContent).toHaveBeenCalledWith('run-1', 'drafts/document.md', {
-                    content: expect.stringContaining('revised'),
-                    generation: 'generation-1',
-                });
-            },
-            { timeout: 2500 },
-        );
+        await waitFor(() => {
+            expect(mocks.updateArtifactContent).toHaveBeenCalledWith('run-1', 'drafts/document.md', {
+                content: expect.stringContaining('revised'),
+                generation: 'generation-1',
+            });
+        }, SAVE_WAIT);
     });
 
     it('uses the floating selection comment control instead of a redundant toolbar button', async () => {
@@ -280,16 +290,13 @@ describe('ArtifactEditingSurface', () => {
 
         await user.type(editor, ' local edit');
 
-        await waitFor(
-            () => {
-                expect(mocks.updateArtifactContent).toHaveBeenCalledTimes(1);
-                expect(mocks.updateArtifactContent).toHaveBeenLastCalledWith('run-1', 'drafts/document.md', {
-                    content: expect.stringContaining('local edit'),
-                    generation: 'generation-1',
-                });
-            },
-            { timeout: 2500 },
-        );
+        await waitFor(() => {
+            expect(mocks.updateArtifactContent).toHaveBeenCalledTimes(1);
+            expect(mocks.updateArtifactContent).toHaveBeenLastCalledWith('run-1', 'drafts/document.md', {
+                content: expect.stringContaining('local edit'),
+                generation: 'generation-1',
+            });
+        }, SAVE_WAIT);
     });
 
     it('rebases focused full-document edits over a non-overlapping agent change after 412', async () => {
@@ -347,15 +354,12 @@ describe('ArtifactEditingSurface', () => {
         selection?.addRange(range);
         await user.type(editor, '!', { skipClick: true });
 
-        await waitFor(
-            () => {
-                expect(mocks.updateArtifactContent).toHaveBeenNthCalledWith(2, 'run-1', 'drafts/document.md', {
-                    content: expect.stringMatching(/updated remotely[\s\S]*Second paragraph\.!/),
-                    generation: 'generation-agent',
-                });
-            },
-            { timeout: 2500 },
-        );
+        await waitFor(() => {
+            expect(mocks.updateArtifactContent).toHaveBeenNthCalledWith(2, 'run-1', 'drafts/document.md', {
+                content: expect.stringMatching(/updated remotely[\s\S]*Second paragraph\.!/),
+                generation: 'generation-agent',
+            });
+        }, REBASE_WAIT);
         expect(screen.queryByRole('alert')).toBeNull();
         expect(editor.textContent).toContain('First paragraph updated remotely.');
     });
@@ -429,7 +433,7 @@ describe('ArtifactEditingSurface', () => {
                 content: 'First paragraph updated remotely.\n\nSecond paragraph edited locally.',
                 generation: 'generation-agent',
             });
-        });
+        }, REBASE_WAIT);
         expect(await screen.findByText('First paragraph updated remotely.')).not.toBeNull();
         expect(await screen.findByText('Second paragraph edited locally.')).not.toBeNull();
         expect(onAction).toHaveBeenCalledWith(

package/src/widgets/markdown/MarkdownRenderer.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { MarkdownRenderer } from './MarkdownRenderer.js';
+
+afterEach(cleanup);
+
+describe('MarkdownRenderer colon text', () => {
+    it('preserves times in headings and agenda lists without inserting block elements', () => {
+        const { container } = render(
+            <MarkdownRenderer>
+                {
+                    '**DAY 1 — 9:00 a.m. to 4:30 p.m.**\n\n1. 9:00–9:15 (15 min): Welcome\n2. 9:15–9:45 (30 min): Foundations'
+                }
+            </MarkdownRenderer>,
+        );
+
+        expect(container.querySelector('strong')?.textContent).toBe('DAY 1 — 9:00 a.m. to 4:30 p.m.');
+        expect(screen.getAllByRole('listitem').map((item) => item.textContent)).toEqual([
+            '9:00–9:15 (15 min): Welcome',
+            '9:15–9:45 (30 min): Foundations',
+        ]);
+        expect(container.querySelector('li div, strong div')).toBeNull();
+    });
+
+    it('preserves minutes in table cells', () => {
+        render(<MarkdownRenderer>{'| Start | End |\n| --- | --- |\n| 9:15 | 10:30 |'}</MarkdownRenderer>);
+
+        expect(screen.getAllByRole('cell').map((cell) => cell.textContent)).toEqual(['9:15', '10:30']);
+    });
+
+    it.each([':unknown[label]{key="value"}', ':note[inline]', ':00', ':unknown[a :nested[b]]'])(
+        'preserves unsupported inline syntax exactly: %s',
+        (text) => {
+            const { container } = render(<MarkdownRenderer>{`Before ${text} after`}</MarkdownRenderer>);
+            expect(container.querySelector('p')?.textContent).toBe(`Before ${text} after`);
+        },
+    );
+
+    it('continues to render block callouts, generic containers and page breaks', () => {
+        const { container } = render(
+            <MarkdownRenderer>
+                {':::note\nReview at 9:15.\n:::\n\n:::custom\nContent\n:::\n\n::pagebreak'}
+            </MarkdownRenderer>,
+        );
+
+        expect(container.querySelector('.md-callout-info')?.textContent).toContain('Review at 9:15.');
+        expect(container.querySelector('.md-custom')?.textContent).toContain('Content');
+        expect(container.querySelector('hr.md-pagebreak')).not.toBeNull();
+    });
+});

package/src/widgets/markdown/MermaidDiagram.tsx

@@ -192,8 +192,8 @@ export function MermaidDiagram({ code, className }: MermaidDiagramProps) {
 
     if (!svg) {
         return (
-            <div className={`my-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg animate-pulse ${className || ''}`}>
-                <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            <div className={`my-4 p-4 bg-muted rounded-lg animate-pulse ${className || ''}`}>
+                <div className="h-32 bg-muted rounded"></div>
             </div>
         );
     }

package/src/widgets/markdown/remarkDirectiveHandler.ts

@@ -8,9 +8,10 @@
  *   :::note / :::warning / :::tip / :::caution / :::important → callout <div>s
  *   :::name             → <div class="md-name"> (generic fallback)
  */
-import { type VisitorResult, visit } from 'unist-util-visit';
+import { SKIP, type VisitorResult, visit } from 'unist-util-visit';
 
-type RemarkTree = Parameters<typeof visit>[0];
+type RemarkNode = Parameters<typeof visit>[0];
+type RemarkTree = RemarkNode & { children: RemarkNode[] };
 
 // Callout types mapped to CSS modifier classes (semantic design system)
 const CALLOUT_TYPES: Record<string, string> = {
@@ -41,9 +42,24 @@ interface DirectiveNode {
 }
 
 export function remarkDirectiveHandler() {
-    return (tree: RemarkTree) => {
-        visit(tree, (node): VisitorResult => {
-            if (node.type !== 'containerDirective' && node.type !== 'leafDirective' && node.type !== 'textDirective') {
+    return (tree: RemarkTree, file: { toString(): string }) => {
+        visit(tree, (node, index, parent): VisitorResult => {
+            if (node.type === 'textDirective') {
+                // Only block directives are supported. The parser also recognizes ordinary
+                // colon text such as the minutes in 9:15; preserve its exact source spelling.
+                const start = node.position?.start.offset;
+                const end = node.position?.end.offset;
+                if (parent && index !== undefined && start !== undefined && end !== undefined) {
+                    const textNode = {
+                        type: 'text',
+                        value: file.toString().slice(start, end),
+                        position: node.position,
+                    };
+                    parent.children[index] = textNode;
+                }
+                return SKIP;
+            }
+            if (node.type !== 'containerDirective' && node.type !== 'leafDirective') {
                 return;
             }
 

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -4,12 +4,14 @@ import debounce from 'debounce';
 import type * as monaco from 'monaco-editor';
 import { lazy, type RefObject, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { registerCustomFoldingProviders } from './foldingProviders.js';
+import { loadMonacoReact } from './loadMonaco.js';
 
 /**
  * The Monaco React wrapper drags in the Monaco loader (and, once mounted, the editor itself) on
- * import. Most screens never open an editor, so it is fetched on first render instead.
+ * import. Most screens never open an editor, so it is fetched on first render instead --
+ * through loadMonacoReact, which applies the runtime version pin before handing the module out.
  */
-const Editor = lazy(() => import('@monaco-editor/react').then(({ Editor: component }) => ({ default: component })));
+const Editor = lazy(() => loadMonacoReact().then(({ Editor: component }) => ({ default: component })));
 
 export type Monaco = typeof monaco;
 

package/src/widgets/monacoEditor/index.ts

@@ -1,2 +1,3 @@
+export { configureMonacoLoader, loadMonacoReact } from './loadMonaco.js';
 export type { IEditorApi, IEditorApi as EditorApi, Monaco, ViewUpdate } from './MonacoEditor.js';
 export { MonacoEditor, VEditorApi } from './MonacoEditor.js';

package/src/widgets/monacoEditor/loadMonaco.test.ts

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+// Each case imports the module fresh: loadMonaco keeps the resolved wrapper and the "pin applied"
+// flag in module scope, which is the behavior under test.
+afterEach(() => {
+    vi.resetModules();
+    vi.doUnmock('@monaco-editor/react');
+});
+
+describe('loadMonacoReact', () => {
+    it('applies the version pin once and shares one module across callers', async () => {
+        const config = vi.fn();
+        let imports = 0;
+        vi.doMock('@monaco-editor/react', () => {
+            imports++;
+            return { loader: { config }, Editor: () => null };
+        });
+        const { loadMonacoReact } = await import('./loadMonaco.js');
+
+        const [first, second] = await Promise.all([loadMonacoReact(), loadMonacoReact()]);
+
+        expect(first).toBe(second);
+        expect(imports).toBe(1);
+        expect(config).toHaveBeenCalledTimes(1);
+        expect(config).toHaveBeenCalledWith({ paths: { vs: expect.stringContaining('monaco-editor@') } });
+    });
+
+    // A memoized rejection would make every later attempt fail instantly for the rest of the
+    // session, turning one transient chunk error into an editor that never opens again.
+    it('retries after a failed import instead of caching the failure', async () => {
+        let attempts = 0;
+        vi.doMock('@monaco-editor/react', () => {
+            attempts++;
+            if (attempts === 1) {
+                throw new Error('chunk load failed');
+            }
+            return { loader: { config: vi.fn() }, Editor: () => null };
+        });
+        const { loadMonacoReact } = await import('./loadMonaco.js');
+
+        // Not asserted by message: vitest replaces a throwing mock factory's error with its own.
+        await expect(loadMonacoReact()).rejects.toThrow();
+        await expect(loadMonacoReact()).resolves.toBeDefined();
+        expect(attempts).toBe(2);
+    });
+    it('retries configuration after it throws and only caches a successful configuration', async () => {
+        const config = vi
+            .fn()
+            .mockImplementationOnce(() => {
+                throw new Error('configuration failed');
+            })
+            .mockImplementation(() => undefined);
+        vi.doMock('@monaco-editor/react', () => ({ loader: { config }, Editor: () => null }));
+        const { loadMonacoReact } = await import('./loadMonaco.js');
+
+        await expect(loadMonacoReact()).rejects.toThrow('configuration failed');
+        const [first, second] = await Promise.all([loadMonacoReact(), loadMonacoReact()]);
+        expect(first).toBe(second);
+        expect(config).toHaveBeenCalledTimes(2);
+        await expect(loadMonacoReact()).resolves.toBe(first);
+        expect(config).toHaveBeenCalledTimes(2);
+    });
+});

package/src/widgets/monacoEditor/loadMonaco.ts

@@ -0,0 +1,70 @@
+/**
+ * Single entry point for pulling in the Monaco React wrapper, and the single place that pins the
+ * Monaco runtime version.
+ *
+ * Two rules this module exists to enforce:
+ *
+ *   1. `@monaco-editor/react` must never be reachable from an app's *static* startup graph. It was
+ *      imported at the top of composable-ui's `main.tsx` (only to call `loader.config`), which put
+ *      it in the entry chunk and therefore in the generated `<link rel="modulepreload">` closure —
+ *      every page load fetched the Monaco wrapper, including the ones that never open an editor.
+ *   2. Whichever code path loads Monaco first must apply the version pin, because
+ *      `@monaco-editor/loader` is a process-wide singleton and `config()` is only honored before
+ *      its `init()`. Routing every consumer through {@link loadMonacoReact} makes the pin travel
+ *      with the import instead of depending on a boot-time side effect.
+ *
+ * A consumer that already holds the module (a static `import { Editor } from '@monaco-editor/react'`
+ * in a route chunk, where the deferred-loading rule above does not apply) calls
+ * {@link configureMonacoLoader} with its own `loader` instead, so both paths share this version.
+ */
+
+/**
+ * Pin the Monaco runtime to 0.55.1 to match the locally-installed `monaco-editor` types. The
+ * default loader (@monaco-editor/loader@1.5.0) hardcodes 0.52.2, which lacks the top-level
+ * `monaco.json` / `monaco.css` namespaces those types reference — editors that set up JSON Schema
+ * diagnostics via `monaco.json.jsonDefaults` fail at runtime with "Cannot read properties of
+ * undefined (reading 'jsonDefaults')".
+ */
+const MONACO_VS_URL = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
+
+/** The slice of `@monaco-editor/loader` this module needs, kept structural to avoid an import. */
+interface MonacoLoader {
+    config(params: { paths: { vs: string } }): unknown;
+}
+
+let configured = false;
+
+/**
+ * Point the Monaco loader at the pinned runtime. Idempotent: `config()` is a no-op once the loader
+ * has initialized, so repeat calls from several consumers must not fight over it.
+ */
+export function configureMonacoLoader(loader: MonacoLoader): void {
+    if (configured) return;
+    loader.config({ paths: { vs: MONACO_VS_URL } });
+    configured = true;
+}
+
+let monacoReact: Promise<typeof import('@monaco-editor/react')> | undefined;
+
+/**
+ * Import `@monaco-editor/react` on demand with the version pin applied before the module is handed
+ * out, so no caller can mount an `Editor` against the unpinned default. The promise is memoized:
+ * concurrent callers share one module instance and one `config()` call.
+ *
+ * A failed import or configuration is not memoized -- a transient chunk or CDN error would otherwise make every
+ * later attempt fail instantly for the rest of the session, with nothing left to retry. Note that
+ * this only restores retries for direct callers: `MonacoEditor` reaches this through React's
+ * `lazy()`, which keeps a rejection cache of its own that a remount does not clear.
+ */
+export function loadMonacoReact(): Promise<typeof import('@monaco-editor/react')> {
+    monacoReact ??= import('@monaco-editor/react')
+        .then((mod) => {
+            configureMonacoLoader(mod.loader);
+            return mod;
+        })
+        .catch((err: unknown) => {
+            monacoReact = undefined;
+            throw err;
+        });
+    return monacoReact;
+}

package/src/widgets/properties/PropertiesView.tsx

@@ -15,7 +15,7 @@ export function PropertiesView({ className, properties }: PropertiesViewProps) {
                             <span>{property.name}</span>
                             {property.description && (
                                 <VTooltip description={property.description} placement="top">
-                                    <Info className="size-3 ms-2 text-muted-foreground" />
+                                    <Info className="size-3 ms-2 text-muted" />
                                 </VTooltip>
                             )}
                         </td>

package/src/widgets/schema-editor/editor/Editable.tsx

@@ -101,7 +101,7 @@ export function Editable<T>({
                     readonly={readonly}
                 />
             )}
-            {validationError && <div className="text-red-500 text-sm">{validationError}</div>}
+            {validationError && <div className="text-destructive text-sm">{validationError}</div>}
         </div>
     );
 }
@@ -214,7 +214,7 @@ function DataEdit<T>({ editor: Editor, value, onSave, onCancel, skipClickOutside
 
 export function TextDataViewer({ value, placeholder }: DataViewerProps<string>) {
     if (!value) {
-        return <span className="text-gray-400">{placeholder || 'Missing value'}</span>;
+        return <span className="text-muted">{placeholder || 'Missing value'}</span>;
     } else {
         return <span>{value == null ? '' : value.toString()}</span>;
     }

package/src/widgets/schema-editor/editor/PropertyEditor.tsx

@@ -156,7 +156,7 @@ function EditDescriptionModalForm({ value, onSave }: EditDescriptionModalFormPro
             <ModalBody className="h-max">
                 <textarea
                     ref={ref}
-                    className="dark:bg-gray-800 w-full h-full dark:text-white"
+                    className="dark:bg-muted w-full h-full dark:text-white"
                     value={currentValue}
                     onChange={(e) => setCurrentValue(e.target.value)}
                 />

package/src/widgets/schema-editor/editor/SchemaEditor.tsx

@@ -23,7 +23,7 @@ export function SchemaEditor({ schema, readonly = false }: SchemaTreeProps) {
     const { t } = useUITranslation();
     return (
         <div className="space-y-1">
-            <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted-foreground border-b border-border">
+            <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted border-b border-border">
                 <div className="flex-1 min-w-0">{t('widgets.schema.propertyColumn')}</div>
                 {!readonly && (
                     <div className="shrink-0 w-28 text-end pe-1" title={t('widgets.schema.extractFromDocumentHint')}>
@@ -89,7 +89,7 @@ function ParentItem({ property, readonly }: ParentItemProps) {
                 </Button>
             </div>
             {isOpen && (
-                <ul className="ms-4 border-s border-gray-400 border-dashed">
+                <ul className="ms-4 border-s border-border border-dashed">
                     {(property.children || []).map((prop) => renderProperty(prop, readonly))}
                     {!readonly ? <AddPropertyButton parent={property} /> : null}
                 </ul>

package/src/widgets/upload/DropZone.tsx

@@ -257,7 +257,7 @@ export function DropZone({ onDrop, message, buttonLabel, allowFolders = true, cl
         // biome-ignore lint/a11y/noStaticElementInteractions: drag/drop target; file selection is exposed via the buttons inside.
         <div
             className={`flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${
-                isDragging ? 'border-color-primary bg-color-primary/10' : 'border-dashed border-color-border'
+                isDragging ? 'border-primary bg-primary/10' : 'border-dashed border-border'
             } ${className}`}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}

package/src/widgets/upload/UploadResultCategory.tsx

@@ -23,14 +23,14 @@ export interface UploadResultCategoryProps {
  * <UploadResultCategory
  *   title="Successfully Uploaded"
  *   count={3}
- *   icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
+ *   icon={<CheckCircleIcon className="h-4 w-4 text-success" />}
  *   items={["document1.pdf", "document2.pdf", "document3.pdf"]}
  * />
  */
 export function UploadResultCategory({
     title,
     count,
-    icon = <CheckCircleIcon className="h-4 w-4 text-green-500" />,
+    icon = <CheckCircleIcon className="h-4 w-4 text-success" />,
     items,
 }: UploadResultCategoryProps) {
     const { t } = useUITranslation();
@@ -38,20 +38,20 @@ export function UploadResultCategory({
     const panelId = useId();
 
     return (
-        <div className="border border-color-border rounded-md overflow-hidden">
+        <div className="border border-border rounded-md overflow-hidden">
             {/* The header IS the toggle: a real <button> with aria-expanded/aria-controls so
                 keyboard users can operate it (Enter / Space) and screen readers announce state. */}
             <button
                 type="button"
                 aria-expanded={isExpanded}
                 aria-controls={panelId}
-                className="w-full flex items-center justify-between p-3 bg-color-muted/10 cursor-pointer text-start bg-transparent border-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                className="w-full flex items-center justify-between p-3 bg-muted/10 cursor-pointer text-start bg-transparent border-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 onClick={() => setIsExpanded(!isExpanded)}
             >
                 <span className="flex items-center">
                     <span className="me-2">{icon}</span>
                     <span className="font-medium">{title}</span>
-                    <span className="ms-2 px-2 py-0.5 bg-color-muted/20 rounded-full text-xs">{count}</span>
+                    <span className="ms-2 px-2 py-0.5 bg-muted/20 rounded-full text-xs">{count}</span>
                 </span>
                 <span className="text-muted" aria-hidden="true">
                     <svg
@@ -67,11 +67,11 @@ export function UploadResultCategory({
             </button>
 
             {isExpanded && (
-                <div id={panelId} className="p-3 border-t border-color-border max-h-48 overflow-y-auto">
+                <div id={panelId} className="p-3 border-t border-border max-h-48 overflow-y-auto">
                     {items.length > 0 ? (
                         <ul className="space-y-1">
                             {items.map((item) => (
-                                <li key={item} className="text-sm py-1 px-2 rounded hover:bg-color-muted/10">
+                                <li key={item} className="text-sm py-1 px-2 rounded hover:bg-muted/10">
                                     {item}
                                 </li>
                             ))}

package/src/widgets/upload/UploadSummary.tsx

@@ -77,7 +77,7 @@ export function UploadSummary({ files, className = '', location, collection }: U
                     <UploadResultCategory
                         title={t('upload.successfullyUploaded')}
                         count={successCount}
-                        icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
+                        icon={<CheckCircleIcon className="h-4 w-4 text-success" />}
                         items={successFiles.map((f) => f.name)}
                     />
                 )}
@@ -87,7 +87,7 @@ export function UploadSummary({ files, className = '', location, collection }: U
                     <UploadResultCategory
                         title={t('upload.successfullyUpdated')}
                         count={updatedCount}
-                        icon={<CheckCircleIcon className="h-4 w-4 text-blue-500" />}
+                        icon={<CheckCircleIcon className="h-4 w-4 text-info" />}
                         items={updatedFiles.map((f) => f.name)}
                     />
                 )}
@@ -97,7 +97,7 @@ export function UploadSummary({ files, className = '', location, collection }: U
                     <UploadResultCategory
                         title={t('upload.skippedAlreadyExisted')}
                         count={skippedCount}
-                        icon={<AlertCircleIcon className="h-4 w-4 text-amber-500" />}
+                        icon={<AlertCircleIcon className="h-4 w-4 text-attention" />}
                         items={skippedFiles.map((f) => f.name)}
                     />
                 )}
@@ -107,7 +107,7 @@ export function UploadSummary({ files, className = '', location, collection }: U
                     <UploadResultCategory
                         title={t('upload.failedToUpload')}
                         count={failedCount}
-                        icon={<XCircleIcon className="h-4 w-4 text-red-500" />}
+                        icon={<XCircleIcon className="h-4 w-4 text-destructive" />}
                         items={failedFiles.map((f) => f.name)}
                     />
                 )}

package/src/widgets/xml-viewer/components/XMLViewer.tsx

@@ -37,7 +37,7 @@ export function XMLViewer(props: XMLViewerProps): React.ReactNode {
         return { ...baseTheme, ...customTheme };
     }, [isDarkMode, customTheme]);
 
-    const { json, valid } = useXMLViewer(xml);
+    const parsed = useXMLViewer(xml);
     const context = useMemo(
         () => ({
             theme,
@@ -48,7 +48,11 @@ export function XMLViewer(props: XMLViewerProps): React.ReactNode {
         [theme, collapsible, indentSize, initalCollapsedDepth, initialCollapsedDepth],
     );
 
-    if (!valid) {
+    // The parser is fetched on first use, so the result is not available on the first render.
+    if (!parsed) {
+        return null;
+    }
+    if (!parsed.valid) {
         return invalidXml ? invalidXml : <InvalidXml />;
     }
 
@@ -58,7 +62,7 @@ export function XMLViewer(props: XMLViewerProps): React.ReactNode {
                 className="rxv-container"
                 style={{ whiteSpace: 'pre-wrap', fontFamily: theme.fontFamily, overflowWrap: 'break-word' }}
             >
-                <Elements elements={json} />
+                <Elements elements={parsed.json} />
             </div>
         </XMLViewerContext.Provider>
     );