@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.1.0-dev.20260327.125707Z

package/src/shell/login/UserSessionMenu.tsx

@@ -1,7 +1,6 @@
 import { AuthTokenPayload, Permission } from "@vertesia/common";
-import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
+import { Avatar, Button, MenuList, ModeToggle, Popover, PopoverContent, PopoverTrigger, Spinner } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
-import { Popover } from "@vertesia/ui/widgets";
 import clsx from "clsx";
 import { useState } from "react";
 import SignInModal from "./SignInModal";
@@ -48,8 +47,8 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
     const isProjectManager = perms.hasPermission(Permission.project_admin);
 
     return (
-        <Popover strategy='fixed' placement='bottom-start' zIndex={100}>
-            <Popover.Trigger click>
+        <Popover click>
+            <PopoverTrigger>
                 <div className={clsx(className, "flex items-center justify-start", asMenuTrigger && "cursor-pointer")}>
                     <Avatar
                         size='sm'
@@ -58,35 +57,33 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
                         /*src={picture} */
                         name={user?.name} />
                 </div>
-            </Popover.Trigger>
-            <Popover.Content className="w-[280px] mx-2 my-1">
-                <div className="bg-white dark:bg-slate-900 shadow-lg rounded-md ring-1 ring-gray-200 dark:ring-slate-700">
-                    <div className='divide-y divide-gray-200 dark:divide-slate-700'>
-                        <div className='py-2 pl-2'>
-                            <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
-                            <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
-                        </div>
-                        <div className="w-full p-1" >
-                            <InfoList />
-                        </div>
-                        <div className='py-2 pl-2'>
-                            <ModeToggle />
-                        </div>
-                        <div className='py-2'>
-                            <MenuList>
-                                {isProjectManager && (
-                                    <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
-                                        Settings
-                                    </MenuList.Item>
-                                )}
-                                <MenuList.Item className='px-2' onClick={() => session.logout()}>
-                                    Sign out
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[280px] mx-2 my-1 p-0">
+                <div className='divide-y divide-gray-200 dark:divide-slate-700'>
+                    <div className='py-2 pl-2'>
+                        <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
+                        <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
+                    </div>
+                    <div className="w-full p-1" >
+                        <InfoList />
+                    </div>
+                    <div className='py-2 pl-2'>
+                        <ModeToggle />
+                    </div>
+                    <div className='py-2'>
+                        <MenuList>
+                            {isProjectManager && (
+                                <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
+                                    Settings
                                 </MenuList.Item>
-                            </MenuList>
-                        </div>
-                    </div >
+                            )}
+                            <MenuList.Item className='px-2' onClick={() => session.logout()}>
+                                Sign out
+                            </MenuList.Item>
+                        </MenuList>
+                    </div>
                 </div >
-            </Popover.Content>
+            </PopoverContent>
         </Popover>
     )
 }

package/src/widgets/index.ts

@@ -2,7 +2,6 @@ export * from "./monacoEditor/index.js";
 export * from "./form/index.js";
 export * from "./json-view/index.js";
 export * from "./markdown/index.js";
-export * from "./popover/index.js";
 export * from "./Progress.js";
 export * from "./properties/index.js";
 export * from "./schema-editor/index.js";

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

@@ -17,7 +17,7 @@ export function JSONCode({ data, className }: { data: any; className?: string })
     }, [data]);
 
     return (
-        <div className={`h-full ${className || ''}`}>
+        <div className={`h-full pb-2 mb-2 ${className || ''}`}>
             <MonacoEditor
                 value={jsonString}
                 language="json"

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

@@ -1,4 +1,5 @@
 import type { JSONObject } from "@vertesia/json";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 import { JSONCode } from './JSONCode.js';
 import { JSONView } from './JSONView.js';
@@ -9,16 +10,20 @@ interface JSONDisplayProps {
     viewCode?: boolean;
 }
 export function JSONDisplay({ value, viewCode = false }: JSONDisplayProps) {
+    const { t } = useUITranslation();
 
     if (!value) {
         return (
-            <pre className="whitespace-pre-wrap">No Data to display</pre>
+            <pre className="whitespace-pre-wrap">{t('misc.noData')}</pre>
         );
     }
 
     return (
-        <div className='relative w-full h-full'>
-            {viewCode ? <JSONCode data={value} /> : <JSONView value={value} />}
+        <div className='relative w-full h-full flex flex-col'>
+            {viewCode
+                ? <JSONCode data={value} />
+                : <div className="flex-1 min-h-0 overflow-auto"><JSONView value={value} /></div>
+            }
         </div>
     )
 }

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

@@ -0,0 +1,24 @@
+import { Button } from "@vertesia/ui/core";
+
+export function JSONSwitcher({ title, viewCode, setViewCode }: { title: string, viewCode: boolean, setViewCode: (value: boolean) => void }) {
+    return (
+        <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
+            <Button
+                variant={viewCode ? "ghost" : "primary"}
+                size="sm"
+                alt="Preview properties"
+                onClick={() => setViewCode(false)}
+            >
+                {title}
+            </Button>
+            <Button
+                variant={viewCode ? "primary" : "ghost"}
+                size="sm"
+                alt="View in JSON format"
+                onClick={() => setViewCode(true)}
+            >
+                JSON
+            </Button>
+        </div>
+    );
+}

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

@@ -9,7 +9,7 @@ interface JSONViewProps {
     value: JSONObject;
 }
 export function JSONView({ value }: JSONViewProps) {
-    return <div className="flex flex-col gap-4">
+    return <div className="flex flex-col gap-4 px-2 h-full overflow-auto">
         {
             Object.entries(value).map(([key, value]) =>
                 <PropertyElement key={key} name={key} value={value as JSONValue} />

package/src/widgets/json-view/index.ts

@@ -2,3 +2,4 @@ export type * from "./types.js";
 export * from "./JSONCode.js";
 export * from "./JSONDisplay.js";
 export * from "./JSONView.js";
+export * from "./JSONSwitcher.js";

package/src/widgets/markdown/ArtifactContentRenderer.tsx

@@ -4,13 +4,13 @@
  * Supports rendering charts, tables, markdown, fusion fragments, and more.
  */
 
-import { useMemo, type ReactElement } from 'react';
+import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
 import DOMPurify from 'dompurify';
-import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
+import { useMemo, type ReactElement } from 'react';
 import { type VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
-import { FusionFragmentHandler, FusionFragmentProvider } from '@vertesia/fusion-ux';
-import { MarkdownRenderer } from './MarkdownRenderer';
+import { useCodeBlockContext } from './CodeBlockContext';
+import { CodeBlockErrorBoundary, CodeBlockPlaceholder } from './CodeBlockPlaceholder';
 
 // Render type mapping
 export type ExpandRenderType =
@@ -285,6 +285,8 @@ export function ArtifactContentRenderer({
     runId,
     contentType,
 }: ArtifactContentRendererProps): ReactElement {
+    const { MarkdownRenderer } = useCodeBlockContext();
+
     // Determine actual render type
     const actualType = useMemo(() => {
         if (renderType !== 'auto') {
@@ -374,9 +376,15 @@ export function ArtifactContentRenderer({
             const markdownContent = typeof content === 'string' ? content : String(content);
             return (
                 <CodeBlockErrorBoundary type="markdown" fallbackCode={markdownContent}>
-                    <MarkdownRenderer artifactRunId={runId}>
-                        {markdownContent}
-                    </MarkdownRenderer>
+                    {MarkdownRenderer ? (
+                        <MarkdownRenderer artifactRunId={runId}>
+                            {markdownContent}
+                        </MarkdownRenderer>
+                    ) : (
+                        <pre className="overflow-x-auto p-3 bg-muted/10 rounded text-sm">
+                            <code>{markdownContent}</code>
+                        </pre>
+                    )}
                 </CodeBlockErrorBoundary>
             );
         }

package/src/widgets/markdown/CodeBlockContext.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+
+/**
+ * Context for passing artifact run ID, callbacks, and the MarkdownRenderer component
+ * to code block handlers. MarkdownRenderer is injected here (rather than imported
+ * directly in ArtifactContentRenderer) to break the circular dependency:
+ *   MarkdownRenderer → codeBlockHandlers → ArtifactContentRenderer → MarkdownRenderer
+ */
+export interface CodeBlockHandlerContext {
+    artifactRunId?: string;
+    onProposalSelect?: (optionId: string) => void;
+    onProposalSubmit?: (response: string) => void;
+    MarkdownRenderer?: React.ComponentType<{ children: string; artifactRunId?: string }>;
+}
+
+const CodeBlockContext = React.createContext<CodeBlockHandlerContext>({});
+
+export function CodeBlockHandlerProvider({
+    children,
+    artifactRunId,
+    onProposalSelect,
+    onProposalSubmit,
+    MarkdownRenderer,
+}: CodeBlockHandlerContext & { children: React.ReactNode }) {
+    const value = useMemo(
+        () => ({ artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer }),
+        [artifactRunId, onProposalSelect, onProposalSubmit, MarkdownRenderer]
+    );
+    return <CodeBlockContext.Provider value={value}>{children}</CodeBlockContext.Provider>;
+}
+
+export function useCodeBlockContext() {
+    return React.useContext(CodeBlockContext);
+}

package/src/widgets/markdown/MarkdownRenderer.tsx

@@ -1,27 +1,27 @@
-import { useCodeBlockRendererRegistry } from './CodeBlockRendering';
 import type { Element } from 'hast';
 import React from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { defListHastHandlers, remarkDefinitionList } from 'remark-definition-list';
 import remarkDirective from 'remark-directive';
+import remarkGfm from 'remark-gfm';
 import remarkAlert from 'remark-github-blockquote-alert';
-import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
+import remarkMath from 'remark-math';
 import remarkSupersub from 'remark-supersub';
-import rehypeKatex from 'rehype-katex';
 import { SKIP, visit } from 'unist-util-visit';
-import { MarkdownLink } from './MarkdownLink';
-import { MarkdownImage } from './MarkdownImage';
-import { MarkdownFigure } from './MarkdownFigure';
-import { remarkDirectiveHandler } from './remarkDirectiveHandler';
-import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
-import { normalizeDirectives } from './normalizeDirectives';
+import { CodeBlockHandlerProvider } from './CodeBlockContext';
 import {
-    CodeBlockHandlerProvider,
     createDefaultCodeBlockHandlers,
-    isExpandLanguage,
     ExpandCodeBlockHandler,
+    isExpandLanguage,
 } from './codeBlockHandlers';
+import { useCodeBlockRendererRegistry } from './CodeBlockRendering';
+import { MarkdownFigure } from './MarkdownFigure';
+import { MarkdownImage } from './MarkdownImage';
+import { MarkdownLink } from './MarkdownLink';
+import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
+import { normalizeDirectives } from './normalizeDirectives';
+import { remarkDirectiveHandler } from './remarkDirectiveHandler';
 
 // Custom URL schemes that we handle in our components
 const ALLOWED_CUSTOM_SCHEMES = [
@@ -280,6 +280,7 @@ export function MarkdownRenderer({
             artifactRunId={artifactRunId}
             onProposalSelect={onProposalSelect}
             onProposalSubmit={onProposalSubmit}
+            MarkdownRenderer={MarkdownRenderer}
         >
             <Markdown
                 remarkPlugins={remarkPluginsArray}

package/src/widgets/markdown/codeBlockHandlers.tsx

@@ -1,40 +1,13 @@
 import React, { useMemo } from 'react';
-import type { CodeBlockRendererProps } from './CodeBlockRendering';
-import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
 import type { VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
+import { AskUserWidget, type AskUserWidgetProps } from '../../features/agent/chat/AskUserWidget';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
+import { ArtifactContentRenderer, type ExpandRenderType, makeSvgResponsive, sanitizeSvg } from './ArtifactContentRenderer';
+import { useCodeBlockContext } from './CodeBlockContext';
+import { CodeBlockErrorBoundary, CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+import type { CodeBlockRendererProps } from './CodeBlockRendering';
 import { MermaidDiagram } from './MermaidDiagram';
-import { AskUserWidget, type AskUserWidgetProps } from '../../features/agent/chat/AskUserWidget';
 import { useArtifactContent } from './useArtifactContent';
-import { ArtifactContentRenderer, type ExpandRenderType, sanitizeSvg, makeSvgResponsive } from './ArtifactContentRenderer';
-
-/**
- * Context for passing artifact run ID and callbacks to code block handlers
- */
-export interface CodeBlockHandlerContext {
-    artifactRunId?: string;
-    onProposalSelect?: (optionId: string) => void;
-    onProposalSubmit?: (response: string) => void;
-}
-
-const CodeBlockContext = React.createContext<CodeBlockHandlerContext>({});
-
-export function CodeBlockHandlerProvider({
-    children,
-    artifactRunId,
-    onProposalSelect,
-    onProposalSubmit,
-}: CodeBlockHandlerContext & { children: React.ReactNode }) {
-    const value = useMemo(
-        () => ({ artifactRunId, onProposalSelect, onProposalSubmit }),
-        [artifactRunId, onProposalSelect, onProposalSubmit]
-    );
-    return <CodeBlockContext.Provider value={value}>{children}</CodeBlockContext.Provider>;
-}
-
-export function useCodeBlockContext() {
-    return React.useContext(CodeBlockContext);
-}
 
 /**
  * Check if JSON parsing failed due to incomplete content (streaming)
@@ -145,6 +118,10 @@ function detectChartLibrary(
 export function VegaLiteCodeBlockHandler({ code }: CodeBlockRendererProps) {
     const { artifactRunId } = useCodeBlockContext();
 
+    if (!artifactRunId) {
+        console.warn('[VegaLiteCodeBlockHandler] artifactRunId is missing from CodeBlockContext');
+    }
+
     // Check if JSON is incomplete (streaming in progress)
     const incomplete = useMemo(() => isIncompleteJson(code), [code]);
 
@@ -191,6 +168,10 @@ export function VegaLiteCodeBlockHandler({ code }: CodeBlockRendererProps) {
 export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
     const { artifactRunId } = useCodeBlockContext();
 
+    if (!artifactRunId) {
+        console.warn('[ChartCodeBlockHandler] artifactRunId is missing from CodeBlockContext');
+    }
+
     // Check if JSON is incomplete (streaming in progress)
     const incomplete = useMemo(() => isIncompleteJson(code), [code]);
 
@@ -285,10 +266,10 @@ export function ProposalCodeBlockHandler({ code }: CodeBlockRendererProps) {
                 description: spec.description,
                 options: Array.isArray(spec.options)
                     ? spec.options.map((opt: any) => ({
-                          id: opt.id || opt.value || '',
-                          label: opt.label || '',
-                          description: opt.description,
-                      }))
+                        id: opt.id || opt.value || '',
+                        label: opt.label || '',
+                        description: opt.description,
+                    }))
                     : undefined,
                 allowFreeResponse: spec.allowFreeResponse ?? spec.multiple,
                 variant: spec.variant,

package/src/widgets/markdown/index.ts

@@ -1,46 +1,39 @@
+export {
+    ArtifactContentRenderer,
+    type ArtifactContentRendererProps,
+    type ExpandRenderType
+} from './ArtifactContentRenderer';
+export {
+    CodeBlockHandlerProvider,
+    useCodeBlockContext,
+    type CodeBlockHandlerContext
+} from './CodeBlockContext';
+export {
+    ChartCodeBlockHandler, ExpandCodeBlockHandler, MermaidCodeBlockHandler,
+    ProposalCodeBlockHandler, createDefaultCodeBlockHandlers,
+    isExpandLanguage
+} from './codeBlockHandlers';
+export {
+    CodeBlockErrorBoundary, CodeBlockPlaceholder, type CodeBlockPlaceholderProps,
+    type CodeBlockType
+} from './CodeBlockPlaceholder';
 export {
     CodeBlockRendererProvider,
     useCodeBlockComponent,
     useCodeBlockRendererRegistry,
-    type CodeBlockRendererProps,
+    type CodeBlockRendererProps
 } from './CodeBlockRendering';
-export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
-export { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
-export { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
 export { MarkdownFigure, type MarkdownFigureProps } from './MarkdownFigure';
-export {
-    useResolvedUrl,
-    parseUrlScheme,
-    mapSchemeToRoute,
-    type UrlScheme,
-    type ResolvedUrlState,
-    type UseResolvedUrlOptions,
-} from './useResolvedUrl';
-export {
-    CodeBlockPlaceholder,
-    CodeBlockErrorBoundary,
-    type CodeBlockPlaceholderProps,
-    type CodeBlockType,
-} from './CodeBlockPlaceholder';
-export {
-    ChartCodeBlockHandler,
-    MermaidCodeBlockHandler,
-    ProposalCodeBlockHandler,
-    ExpandCodeBlockHandler,
-    CodeBlockHandlerProvider,
-    useCodeBlockContext,
-    createDefaultCodeBlockHandlers,
-    isExpandLanguage,
-    type CodeBlockHandlerContext,
-} from './codeBlockHandlers';
+export { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
+export { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
+export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
 export { MermaidDiagram } from './MermaidDiagram';
 export {
     useArtifactContent,
     type ArtifactContentState,
-    type UseArtifactContentOptions,
+    type UseArtifactContentOptions
 } from './useArtifactContent';
 export {
-    ArtifactContentRenderer,
-    type ArtifactContentRendererProps,
-    type ExpandRenderType,
-} from './ArtifactContentRenderer';
+    mapSchemeToRoute, parseUrlScheme, useResolvedUrl, type ResolvedUrlState, type UrlScheme, type UseResolvedUrlOptions
+} from './useResolvedUrl';
+

package/src/widgets/markdown/remarkDirectiveHandler.ts

@@ -39,7 +39,7 @@ interface DirectiveNode {
 }
 
 export function remarkDirectiveHandler() {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+     
     return (tree: any) => {
         visit(tree, (node): VisitorResult => {
             if (

package/src/widgets/schema-editor/ManagedSchema.ts

@@ -175,18 +175,19 @@ export class SchemaNode {
 
     loadChildren() {
         this.children = [];
-        if (this.schema.items && (this.schema.items as JSONSchema).properties) {
-            this._loadChildren((this.schema.items as JSONSchema).properties!);
+        const itemProperties = (this.schema.items as JSONSchema)?.properties;
+        if (this.schema.items && itemProperties) {
+            this._loadChildren(itemProperties, this.children);
         } else if (this.schema.properties) {
-            this._loadChildren(this.schema.properties);
+            this._loadChildren(this.schema.properties, this.children);
         }
     }
 
-    _loadChildren(properties: Record<string, JSONSchema>) {
+    _loadChildren(properties: Record<string, JSONSchema>, children: SchemaNode[]) {
         for (const name of Object.keys(properties)) {
             const childSchema = properties[name];
             const child = new SchemaNode(name, childSchema, this.loader, this);
-            this.children!.push(child);
+            children.push(child);
             if (child.isParent) {
                 child.loadChildren();
             }

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

@@ -3,6 +3,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { AlignLeft } from 'lucide-react';
 import { Button, Modal, ModalBody, ModalFooter, ModalTitle, Styles, SelectBox } from '@vertesia/ui/core';
 
+import { useUITranslation } from '../../../i18n/index.js';
 import { TypeNames } from '../type-signature.js';
 import { DataEditorProps } from './Editable.js';
 import { EditableSchemaProperty } from './EditableSchemaProperty.js';
@@ -20,6 +21,7 @@ function makeTypeOptions() {
 const TYPE_OPTIONS = makeTypeOptions();
 
 export function PropertyEditor({ value, onChange, onCancel, onSave }: DataEditorProps<EditableSchemaProperty>) {
+    const { t } = useUITranslation();
     const [isModalOpen, setModalOpen] = useState(false);
 
     if (!value) return null;
@@ -49,7 +51,7 @@ export function PropertyEditor({ value, onChange, onCancel, onSave }: DataEditor
                 <PropertyTypeEditor value={value.type} onChange={onTypeChange} onCancel={onCancel} onSave={onSave} />
             </div>
             <div>
-                <Button variant={"ghost"} size={"xs"} onClick={() => setModalOpen(true)}  title="Edit description">
+                <Button variant={"ghost"} size={"xs"} onClick={() => setModalOpen(true)}  title={t('widgets.schema.editDescription')}>
                     <AlignLeft className="size-4" />
                 </Button>
                 <EditDescriptionModal value={value.description} isOpen={isModalOpen} onClose={onDescriptionChange} />
@@ -119,9 +121,10 @@ interface EditDescriptionModalProps {
     onClose: (text?: string) => void;
 }
 function EditDescriptionModal({ value, isOpen, onClose }: EditDescriptionModalProps) {
+    const { t } = useUITranslation();
     return (
         <Modal isOpen={isOpen} onClose={onClose}>
-            <ModalTitle>Edit description</ModalTitle>
+            <ModalTitle>{t('widgets.schema.editDescription')}</ModalTitle>
             <EditDescriptionModalForm value={value} onSave={onClose} />
         </Modal>
     )
@@ -132,6 +135,7 @@ interface EditDescriptionModalFormProps {
     onSave: (text: string) => void;
 }
 function EditDescriptionModalForm({ value, onSave }: EditDescriptionModalFormProps) {
+    const { t } = useUITranslation();
     const ref = useRef<HTMLTextAreaElement>(null);
     const [currentValue, setCurrentValue] = useState(value || '');
     useEffect(() => {
@@ -143,7 +147,7 @@ function EditDescriptionModalForm({ value, onSave }: EditDescriptionModalFormPro
                 <textarea ref={ref} className="dark:bg-gray-800 w-full h-full dark:text-white" value={currentValue} onChange={(e) => setCurrentValue(e.target.value)} />
             </ModalBody>
             <ModalFooter>
-                <Button onClick={() => onSave(currentValue)}>Save Changes</Button>
+                <Button onClick={() => onSave(currentValue)}>{t('store.saveChanges')}</Button>
             </ModalFooter>
         </>
     )

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
 import { Button, useToast } from '@vertesia/ui/core';
 
+import { useUITranslation } from '../../../i18n/index.js';
 import { ManagedSchema, SchemaNode } from '../ManagedSchema.js';
 import { TypeNames } from '../type-signature.js';
 import { Editable } from './Editable.js';
@@ -100,6 +101,7 @@ interface PropertyTitleBarProps {
     readonly: boolean;
 }
 function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
+    const { t } = useUITranslation();
     const toast = useToast();
 
     const onChange = (value: EditableSchemaProperty) => {
@@ -116,7 +118,7 @@ function PropertyTitleBar({ property, readonly }: PropertyTitleBarProps) {
         } catch (err: any) {
             toast({
                 status: 'error',
-                title: 'Invalid property declaration',
+                title: t('widgets.schema.invalidPropertyDeclaration'),
                 description: err.message,
                 duration: 9000
             })

package/src/widgets/upload/DropZone.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef } from "react";
 import { UploadIcon } from "lucide-react";
 import { Button } from "@vertesia/ui/core";
+import { useUITranslation } from "@vertesia/ui/i18n";
 
 /**
  * Props for the DropZone component
@@ -46,10 +47,12 @@ export interface DropZoneProps {
 export function DropZone({
     onDrop,
     message,
-    buttonLabel = "Upload Files",
+    buttonLabel,
     allowFolders = true,
     className = ""
 }: DropZoneProps) {
+    const { t } = useUITranslation();
+    const resolvedButtonLabel = buttonLabel ?? t('upload.uploadFiles');
     const [isDragging, setIsDragging] = useState(false);
     const dropZoneRef = useRef<HTMLDivElement>(null);
 
@@ -147,12 +150,9 @@ export function DropZone({
 
                     let message = "";
                     if (folderCount > 0) {
-                        message =
-                            folderCount === 1
-                                ? `Preparing to upload 1 folder with ${fileCount} files...`
-                                : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
+                        message = t('upload.preparingFolder', { count: folderCount, folderCount, fileCount });
                     } else {
-                        message = `Preparing to upload ${fileCount} file${fileCount === 1 ? "" : "s"}...`;
+                        message = t('upload.preparingFiles', { count: fileCount });
                     }
 
                     onDrop(files, { count: files.length, message });
@@ -191,10 +191,7 @@ export function DropZone({
                 const fileCount = fileArray.length;
 
                 // Create custom message with folder info
-                const formattedMessage =
-                    folderCount === 1
-                        ? `Preparing to upload 1 folder with ${fileCount} files...`
-                        : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
+                const formattedMessage = t('upload.preparingFolder', { count: folderCount, folderCount, fileCount });
 
                 const customMessage = {
                     count: fileArray.length,
@@ -206,7 +203,7 @@ export function DropZone({
                 // Regular file upload
                 const feedback = {
                     count: fileArray.length,
-                    message: `Preparing to upload ${fileArray.length} file${fileArray.length === 1 ? "" : "s"}...`,
+                    message: t('upload.preparingFiles', { count: fileArray.length }),
                 };
                 onDrop(fileArray, feedback);
             }
@@ -250,8 +247,8 @@ export function DropZone({
             <p className="text-muted">{message}</p>
 
             <div className="flex gap-2 justify-center mt-2">
-                <Button onClick={selectFile}>{buttonLabel}</Button>
-                {allowFolders && (<Button onClick={selectFolder}>Select Folder</Button>)}
+                <Button onClick={selectFile}>{resolvedButtonLabel}</Button>
+                {allowFolders && (<Button onClick={selectFolder}>{t('upload.selectFolder')}</Button>)}
             </div>
 
         </div>