@vertesia/ui 1.5.0-dev.20260717.131047Z → 1.5.0-dev.20260725.083715Z

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/schema-editor/ManagedSchema.ts

@@ -17,6 +17,11 @@ export interface NodeUpdate {
     isRequired?: boolean;
     editor?: string | null; // use null to force remove editor
     description?: string;
+    /**
+     * When false, the property is marked `"x-extract": false` and is omitted from
+     * extraction result_schema. Default / true = extractable.
+     */
+    extractable?: boolean;
 }
 
 interface SchemaLoader {
@@ -141,6 +146,19 @@ export class SchemaNode {
         this.schema.description = value;
     }
 
+    /** Whether extraction models may fill this field. Default true. */
+    get extractable(): boolean {
+        return (this.schema as Record<string, unknown>)['x-extract'] !== false;
+    }
+
+    set extractable(value: boolean) {
+        if (value) {
+            delete (this.schema as Record<string, unknown>)['x-extract'];
+        } else {
+            (this.schema as Record<string, unknown>)['x-extract'] = false;
+        }
+    }
+
     get isParent() {
         return this.type.isObject;
     }
@@ -300,6 +318,10 @@ export class SchemaNode {
             this.description = data.description;
             updated = true;
         }
+        if (data.extractable != null && this.extractable !== data.extractable) {
+            this.extractable = data.extractable;
+            updated = true;
+        }
 
         return updated;
     }

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

@@ -4,6 +4,8 @@ export interface EditableSchemaProperty {
     name: string;
     type: string;
     description?: string;
+    /** When false, field is excluded from model extraction (`x-extract: false`). Default true. */
+    extractable?: boolean;
 }
 
 export function getEditableSchemaProperty(schema: SchemaNode): EditableSchemaProperty {
@@ -11,5 +13,6 @@ export function getEditableSchemaProperty(schema: SchemaNode): EditableSchemaPro
         name: schema.getNameSignature(),
         type: schema.getTypeSignature(),
         description: schema.description,
+        extractable: schema.extractable,
     };
 }

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

@@ -1,12 +1,23 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
 import type { DataViewerProps } from './Editable.js';
 import type { EditableSchemaProperty } from './EditableSchemaProperty.js';
 
 export function PropertyViewer({ value }: DataViewerProps<EditableSchemaProperty>) {
+    const { t } = useUITranslation();
     if (!value) return null;
+    const noExtract = value.extractable === false;
     return (
-        <div className="w-full flex items-baseline">
-            <div>{value.name || ''}</div>
-            <div className="ms-2 text-sm text-muted">{value.type || ''}</div>
+        <div className="w-full flex items-baseline gap-2 min-w-0">
+            <div className="truncate">{value.name || ''}</div>
+            <div className="text-sm text-muted shrink-0">{value.type || ''}</div>
+            {noExtract && (
+                <span
+                    className="shrink-0 text-[10px] uppercase tracking-wide text-attention border border-attention/40 bg-attention/10 rounded px-1.5 py-0.5"
+                    title={t('widgets.schema.extractFromDocumentHint')}
+                >
+                    {t('widgets.schema.noExtract')}
+                </span>
+            )}
         </div>
     );
 }

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

@@ -1,4 +1,4 @@
-import { Button, errorMessage, useToast } from '@vertesia/ui/core';
+import { Button, errorMessage, Switch, useToast } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
 import { useState } from 'react';
@@ -20,13 +20,26 @@ interface SchemaTreeProps {
     readonly?: boolean;
 }
 export function SchemaEditor({ schema, readonly = false }: SchemaTreeProps) {
+    const { t } = useUITranslation();
     return (
-        <ul className="">
-            {schema.children.map((prop) => {
-                return renderProperty(prop, readonly);
-            })}
-            {!readonly ? <AddPropertyButton parent={schema.root} /> : null}
-        </ul>
+        <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-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')}>
+                        {t('widgets.schema.extractFromDocument')}
+                    </div>
+                )}
+                {/* space for expand/collapse on parent rows */}
+                <div className="w-8 shrink-0" />
+            </div>
+            <ul className="">
+                {schema.children.map((prop) => {
+                    return renderProperty(prop, readonly);
+                })}
+                {!readonly ? <AddPropertyButton parent={schema.root} /> : null}
+            </ul>
+        </div>
     );
 }
 
@@ -44,7 +57,7 @@ interface SimpleItemProps {
 }
 function SimpleItem({ node, readonly }: SimpleItemProps) {
     return (
-        <li>
+        <li className="border-b border-border/40 last:border-0">
             <PropertyTitleBar property={node} readonly={readonly} />
         </li>
     );
@@ -59,20 +72,21 @@ function ParentItem({ property, readonly }: ParentItemProps) {
     const Icon = isOpen ? ChevronDown : ChevronRight;
 
     return (
-        <li>
-            <div className="flex items-center w-full">
+        <li className="border-b border-border/40 last:border-0">
+            <div className="flex items-center w-full gap-1">
+                <div className="flex-1 min-w-0">
+                    <PropertyTitleBar property={property} readonly={readonly} />
+                </div>
                 <Button
                     variant="ghost"
                     size="icon"
                     onClick={() => setOpen(!isOpen)}
                     aria-label={isOpen ? `Collapse ${property.name}` : `Expand ${property.name}`}
                     aria-expanded={isOpen}
+                    className="shrink-0"
                 >
                     <Icon className="size-4 cn-rtl-flip" />
                 </Button>
-                <div className="flex-1">
-                    <PropertyTitleBar property={property} readonly={readonly} />
-                </div>
             </div>
             {isOpen && (
                 <ul className="ms-4 border-s border-gray-400 border-dashed">
@@ -110,7 +124,13 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
 
             const update = property.getUpdateFromNameAndTypeSignature(value.name, value.type);
 
-            if (property.update({ ...update, description: value.description })) {
+            if (
+                property.update({
+                    ...update,
+                    description: value.description,
+                    extractable: value.extractable,
+                })
+            ) {
                 property.reloadTree();
             }
         } catch (err: unknown) {
@@ -124,25 +144,56 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
         }
         return true;
     };
+
+    /** Toggle extractability without entering name/type edit mode. */
+    const onExtractableChange = (extractable: boolean) => {
+        if (property.update({ extractable })) {
+            property.reloadTree();
+        }
+    };
+
     const isNew = property.resetIsNew();
     const editableProp = getEditableSchemaProperty(property);
 
     return (
-        <Editable
-            value={editableProp}
-            onChange={onChange}
-            onDelete={() => {
-                property.remove();
-                property.reloadTree();
-            }}
-            editor={PropertyEditor}
-            viewer={PropertyViewer}
-            outlineOnHover
-            isEditing={isNew}
-            skipClickOutside={skipClickOutside}
-            readonly={readonly}
-            onValidate={(property) => validatePropertyName(property.name)}
-        />
+        <div className="flex items-center gap-2 w-full min-w-0 py-0.5">
+            <div className="flex-1 min-w-0">
+                <Editable
+                    value={editableProp}
+                    onChange={onChange}
+                    onDelete={() => {
+                        property.remove();
+                        property.reloadTree();
+                    }}
+                    editor={PropertyEditor}
+                    viewer={PropertyViewer}
+                    outlineOnHover
+                    isEditing={isNew}
+                    skipClickOutside={skipClickOutside}
+                    readonly={readonly}
+                    onValidate={(prop) => validatePropertyName(prop.name)}
+                />
+            </div>
+            {!readonly ? (
+                <div className="shrink-0 w-28 flex items-center justify-end gap-1.5 pe-1">
+                    <Switch
+                        size="sm"
+                        value={property.extractable}
+                        onChange={onExtractableChange}
+                        aria-label={`${t('widgets.schema.extractFromDocument')}: ${property.name}`}
+                    />
+                </div>
+            ) : property.extractable === false ? (
+                <div className="shrink-0 w-28 flex justify-end pe-1">
+                    <span
+                        className="text-[10px] uppercase tracking-wide text-attention border border-attention/40 bg-attention/10 rounded px-1.5 py-0.5"
+                        title={t('widgets.schema.extractFromDocumentHint')}
+                    >
+                        {t('widgets.schema.noExtract')}
+                    </span>
+                </div>
+            ) : null}
+        </div>
     );
 }
 

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]);
 }