@vertesia/ui 1.4.0-dev.20260629.130134Z → 1.4.1

package/src/features/store/types/SelectContentTypeModal.tsx

@@ -110,10 +110,10 @@ export function SelectContentTypeModal({
                 )}
             </ModalBody>
             <ModalFooter>
-                <Button variant="ghost" onClick={handleClose} alt={t('modal.cancel')}>
+                <Button variant="ghost" onClick={handleClose} title={t('modal.cancel')}>
                     {t('modal.cancel')}
                 </Button>
-                <Button onClick={handleConfirm} alt={t('store.confirmSelection')}>
+                <Button onClick={handleConfirm} title={t('store.confirmSelection')}>
                     {t('modal.confirm')}
                 </Button>
             </ModalFooter>

package/src/features/user/UserInfo.tsx

@@ -140,7 +140,7 @@ function EmailAgentAvatar({ email, showTitle = false, size = 'md' }: EmailAgentA
 
     const description = (
         <>
-            <div>{t('user.serviceAccountDescription')}</div>
+            <div>{t('user.agentOnBehalfOf')}</div>
             <div className="text-muted text-sm">
                 <span className="font-semibold">Email:</span> {email}
             </div>
@@ -158,11 +158,7 @@ function EmailAgentAvatar({ email, showTitle = false, size = 'md' }: EmailAgentA
                     />
                     <Avatar name={email} size={size} className="border-2 border-white dark:border-gray-800" />
                 </div>
-                {showTitle && (
-                    <div className="text-sm font-semibold truncate">
-                        {t('user.agentOnBehalfOf')} : {email}
-                    </div>
-                )}
+                {showTitle && <div className="text-sm font-semibold truncate">Agent&#8194;({email})</div>}
             </div>
         </UserPopoverPanel>
     );
@@ -260,7 +256,11 @@ function AgentAvatar({
                 </div>
                 {showTitle && (
                     <div className="text-sm font-semibold truncate">
-                        {user ? `Agent      (${user.name || user.email})` : apiKey ? `Agent (${apiKey.name})` : title}
+                        {user
+                            ? `Agent${'\u2003'}(${user.name || user.email})`
+                            : apiKey
+                              ? `Agent (${apiKey.name})`
+                              : title}
                     </div>
                 )}
             </div>

package/src/router/HistoryNavigator.ts

@@ -233,6 +233,11 @@ export class HistoryNavigator {
             this.fireLocationChange(new AfterLocationChangeEvent(type, to, state));
         };
         const _linkNavListener = (ev: MouseEvent) => {
+            // Let the browser handle modifier / non-primary clicks natively (open in new tab/window,
+            // download). Intercepting them here would preventDefault those affordances.
+            if (ev.defaultPrevented || ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey || ev.button !== 0) {
+                return;
+            }
             const target = ev.target as HTMLElement;
             // Skip anchors with download attribute or blob: URLs - they are file downloads, not navigation
             if (

package/src/router/Nav.tsx

@@ -1,6 +1,15 @@
-import type { SyntheticEvent } from 'react';
+import type { MouseEvent, SyntheticEvent } from 'react';
 import { useNavigate, useRouterContext } from './Router';
 
+/**
+ * True when the click carries a modifier the browser uses for alternate link behavior
+ * (open in new tab/window, download) or is not a primary-button click. Such clicks must fall
+ * through to the native anchor so the browser can handle them instead of the SPA router.
+ */
+function isModifiedClick(ev: MouseEvent): boolean {
+    return ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey || ev.button !== 0;
+}
+
 /**
  * Wraps a <a href="..."> and perform the navigation to href through the router.
  */
@@ -76,8 +85,8 @@ export function NavLink({
     const isExternal = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//') || (!!target && target !== '_self');
     const isInternal = !isAnchorOrEmpty && !isExternal;
     const resolvedHref = !skipStickyParams && isInternal ? router.getTopRouter().navigator.addStickyParams(href) : href;
-    const _onClick = (ev: SyntheticEvent) => {
-        if (ev.defaultPrevented || !isInternal) {
+    const _onClick = (ev: MouseEvent) => {
+        if (ev.defaultPrevented || !isInternal || isModifiedClick(ev)) {
             return;
         }
         ev.stopPropagation();

package/src/widgets/form/Form.tsx

@@ -184,7 +184,7 @@ function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
     return (
         <div className="flex gap-2 w-full">
             <div className="flex-1">{renderItemProperty(object, editor)}</div>
-            <Button variant="ghost" onClick={onDelete} disabled={disabled} alt="Delete">
+            <Button variant="ghost" onClick={onDelete} disabled={disabled} title="Delete">
                 <Trash2 className="size-4 text-destructive" />
             </Button>
         </div>

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

@@ -14,7 +14,7 @@ export function JSONSwitcher({
             <Button
                 variant={viewCode ? 'ghost' : 'primary'}
                 size="sm"
-                alt="Preview properties"
+                title="Preview properties"
                 onClick={() => setViewCode(false)}
             >
                 {title}
@@ -22,7 +22,7 @@ export function JSONSwitcher({
             <Button
                 variant={viewCode ? 'primary' : 'ghost'}
                 size="sm"
-                alt="View in JSON format"
+                title="View in JSON format"
                 onClick={() => setViewCode(true)}
             >
                 JSON

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

@@ -35,7 +35,7 @@ interface PropertyTitleProps {
     name: string;
 }
 function PropertyTitle({ name }: PropertyTitleProps) {
-    return <div className="text-md font-semibold">{computeTitleFromName(name)}</div>;
+    return <div className="text-sm font-semibold">{computeTitleFromName(name)}</div>;
 }
 
 interface BlockElementProps {
@@ -64,14 +64,14 @@ function PropertyElement({ name, value }: PropertyElementProps) {
     switch (info.type) {
         case ValueType.Inline:
             return (
-                <div className="w-full flex gap-2">
+                <div className="w-full flex gap-2 text-sm">
                     <PropertyTitle name={`${name}:`} />
                     <p>{info.value}</p>
                 </div>
             );
         case ValueType.Paragraph:
             return (
-                <div>
+                <div className="w-full flex flex-col gap-2 text-sm">
                     <PropertyTitle name={name} />
                     <p>{info.value}</p>
                 </div>
@@ -80,14 +80,14 @@ function PropertyElement({ name, value }: PropertyElementProps) {
             return (
                 <div className="prose dark:prose-invert">
                     <PropertyTitle name={name} />
-                    <div className="vprose dark:prose-invert">{info.value}</div>
+                    <div className="vprose prose-sm dark:prose-invert">{info.value}</div>
                 </div>
             );
         case ValueType.Array:
             return <ArrayProperty name={name} value={value as JSONArray} />;
         case ValueType.Object:
             return (
-                <div>
+                <div className="w-full flex flex-col gap-2 text-sm">
                     <PropertyTitle name={name} />
                     <BlockElement className="mt-2">
                         {Object.entries(value as JSONObject).map(([key, value]) => (
@@ -164,8 +164,8 @@ function ItemProperty({ index, value, useBullet }: ItemPropertyProps) {
             break;
     }
     return (
-        <div className="flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pe-2 ps-4">
-            <div className="font-semibold text-gray-600 dark:text-gray-400">{bullet}</div>
+        <div className="flex gap-4 hover:bg-muted py-2 pe-2 ps-4">
+            <div className="font-semibold text-muted">{bullet}</div>
             <div>{content}</div>
         </div>
     );

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -8,6 +8,33 @@ import { registerCustomFoldingProviders } from './foldingProviders.js';
 
 export type Monaco = typeof monaco;
 
+/**
+ * Shared, body-level host for Monaco "overflow widgets" — the suggestion, hover, and
+ * parameter-hint popups. With `fixedOverflowWidgets` enabled these are `position: fixed`; a CSS
+ * `transform` on any ancestor (e.g. a modal centered with `translate(-50%, -50%)`) becomes their
+ * containing block and drags the popups away from the cursor, sometimes off-screen. Hosting them in
+ * an untransformed node appended to `document.body` keeps them anchored to the caret. The node
+ * carries the `monaco-editor` class so Monaco's (global) theme styles apply, and a high z-index so
+ * the popups render above modals/overlays. One shared node is reused by every editor instance.
+ */
+let overflowWidgetsNode: HTMLElement | undefined;
+function getOverflowWidgetsNode(): HTMLElement | undefined {
+    if (typeof document === 'undefined') return undefined;
+    if (!overflowWidgetsNode) {
+        const node = document.createElement('div');
+        node.className = 'monaco-editor';
+        // `absolute` + z-index establishes a stacking context above modals without creating a
+        // containing block for the fixed-positioned popups (only transform/filter/etc. would).
+        node.style.position = 'absolute';
+        node.style.top = '0';
+        node.style.left = '0';
+        node.style.zIndex = '10000';
+        document.body.appendChild(node);
+        overflowWidgetsNode = node;
+    }
+    return overflowWidgetsNode;
+}
+
 export interface IEditorApi {
     getValue(): string;
     setValue(value?: string): void;
@@ -226,6 +253,8 @@ export function MonacoEditor({
         tabSize: 2,
         insertSpaces: true,
         fixedOverflowWidgets: true, // Hover/diagnostic popovers float outside the editor bounds
+        // Host the fixed popups in a body-level node so a modal's CSS transform doesn't offset them.
+        overflowWidgetsDomNode: getOverflowWidgetsNode(),
         glyphMargin: true, // Enable better error reporting
         renderValidationDecorations: 'on', // Show error squiggles
         renderLineHighlight: 'line', // Highlight entire line for errors

package/src/widgets/xml-viewer/hooks/useXMLViewer.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { parseXML } from './useXMLViewer';
+
+describe('parseXML', () => {
+    it('parses valid XML', () => {
+        const result = parseXML('<root><item id="1">value</item></root>');
+
+        expect(result.valid).toBe(true);
+        expect(result.json).not.toBeNull();
+    });
+
+    it('allows parsererror elements in valid XML content', () => {
+        const result = parseXML('<root><parsererror>expected content</parsererror></root>');
+
+        expect(result.valid).toBe(true);
+        expect(result.json).not.toBeNull();
+    });
+
+    it('rejects invalid XML', () => {
+        const result = parseXML('<root><item></root>');
+
+        expect(result.valid).toBe(false);
+        expect(result.json).toBeNull();
+        expect(result.errorMessage).toContain('Fail to parse:');
+    });
+});

package/src/widgets/xml-viewer/hooks/useXMLViewer.ts

@@ -1,5 +1,4 @@
 import { XMLParser } from 'fast-xml-parser';
-import { SyntaxValidator } from 'fast-xml-validator';
 import { useMemo } from 'react';
 import { ATTRIBUTE_CDATA, ATTRIBUTE_COMMENT } from '../constants';
 
@@ -13,24 +12,30 @@ const parser = new XMLParser({
     parseTagValue: false,
 });
 
-export default function useXMLViewer(xml: string) {
-    return useMemo(() => {
-        try {
-            const validationResult = SyntaxValidator.validate(xml);
-            if (validationResult !== true) {
-                throw new Error(validationResult.err.msg || 'Invalid XML!');
-            }
-
-            const json = parser.parse(xml);
+export function parseXML(xml: string) {
+    try {
+        const validationDocument = new DOMParser().parseFromString(xml, 'application/xml');
+        const parserError =
+            validationDocument.documentElement.localName === 'parsererror'
+                ? validationDocument.documentElement
+                : undefined;
+        if (parserError) {
+            throw new Error(parserError.textContent?.trim() || 'Invalid XML!');
+        }
 
-            if (typeof xml === 'string' && xml.trim().length > 0 && json.length === 0) {
-                throw new Error('Invalid XML!');
-            }
+        const json = parser.parse(xml);
 
-            return { json, valid: true };
-        } catch (e) {
-            const error = e as Error;
-            return { json: null, valid: false, errorMessage: `Fail to parse: ${error.message}` };
+        if (xml.trim().length > 0 && json.length === 0) {
+            throw new Error('Invalid XML!');
         }
-    }, [xml]);
+
+        return { json, valid: true };
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        return { json: null, valid: false, errorMessage: `Fail to parse: ${message}` };
+    }
+}
+
+export default function useXMLViewer(xml: string) {
+    return useMemo(() => parseXML(xml), [xml]);
 }