@widgetic/editor 4.0.11 → 4.1.2

package/dist/components/editors/PropsEditor.svelte

@@ -90,6 +90,7 @@
     } from '../../utils/shadowDom';
     import { config as appConfig } from '../../config';
     import { provideEditorMediaLibrary } from '../../mediaLibraryContext';
+    import { useEditorLanguage } from '../../i18n/language';
     import type { MediaLibraryProvider } from '@widgetic/file-browser';
 
     /**
@@ -135,9 +136,9 @@
     export let designSchema: DesignSchemaView | null = null;
     export let contentSchema: ContentSchemaView | undefined = undefined;
     export let itemTemplate: any = null; // Store template for new items
-    // Tab titles
-    export let designTabTitle: string = 'Design';
-    export let contentTabTitle: string = 'Content';
+    // Tab titles. Without one, the editor's own word, in the language of the page.
+    export let designTabTitle: string | undefined = undefined;
+    export let contentTabTitle: string | undefined = undefined;
     // Default tab selection
     export let defaultTab: 'design' | 'content' = 'content';
 
@@ -163,7 +164,7 @@
     export let headerContent = undefined;
     export let headerClass = '';
     export let dragHandleClass = 'text-grey2';
-    export let title = 'Edit Properties';
+    export let title: string | undefined = undefined;
     /** Hide the default missing-schema message for header-only editors. */
     export let showSchemaError = true;
     /** Optional layout wrapper moved by this editor's built-in drag and position API. */
@@ -183,6 +184,11 @@
     // The file controls are created from the schema several components down: give them the library through context.
     provideEditorMediaLibrary(() => mediaLibrary);
 
+    // The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
+    const { t } = useEditorLanguage();
+    // The title of the bar on top: the host's own, or the editor's word; an empty title hides the bar's title.
+    $: titleLabel = title ?? $t('editor.props.title');
+
     /**
      * CONSTANTS
      */
@@ -1988,6 +1994,7 @@
     export function setPosition(left: number, top: number) {
       const target = positionTarget || rootElement;
       if (!target) return;
+      // rtl-ok: the panel is placed in pixels from the left edge of the editor; the dock mirrors the pair on a right to left screen
       target.style.left = `${left}px`;
       target.style.top = `${top}px`;
     }
@@ -2037,7 +2044,7 @@
       <!-- A single toolbar owns drag and Save for all editor variants. -->
       {#if showDragHandle && (designSchema || contentSchema || headerContent)}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div class="props-editor-drag-bar top-0 left-0 w-full flex h-7 shrink-0 items-center justify-center z-999 px-3 {headerContent ? 'relative ' + headerClass : 'absolute'}">
+          <div class="props-editor-drag-bar top-0 start-0 w-full flex h-7 shrink-0 items-center justify-center z-999 px-3 {headerContent ? 'relative ' + headerClass : 'absolute'}">
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div 
               class="flex items-center justify-center h-7 cursor-move transition-all duration-200 widgetic-colors opacity-0 hover:opacity-100 drag-handle-container"
@@ -2046,10 +2053,10 @@
               <DragHandle class="w-16.5 h-6 {dragHandleClass} hover:text-grey3 transition-colors" />
             </div>
             {#if showSaveButton}
-              {#if title}<span class="props-editor-title-label absolute left-6 top-1.75 pointer-events-none select-none text-[13px] font-bold leading-none text-[hsl(var(--grey5))]">{title}</span>{/if}
+              {#if titleLabel}<span class="props-editor-title-label absolute start-6 top-1.75 pointer-events-none select-none text-[13px] font-bold leading-none text-[hsl(var(--grey5))]">{titleLabel}</span>{/if}
               <button
                 type="button"
-                class="props-editor-save-btn absolute right-6 top-1 inline-flex h-5 w-19 items-center justify-center rounded-md text-[10px] font-semibold leading-none transition-colors focus:outline-none focus-visible:outline-none
+                class="props-editor-save-btn absolute end-6 top-1 inline-flex h-5 w-19 items-center justify-center rounded-md text-[10px] font-semibold leading-none transition-colors focus:outline-none focus-visible:outline-none
                   {saveSaving
                     ? 'text-[hsl(var(--deep-forest-green))] bg-[hsl(var(--light-green))]'
                     : saveDirty
@@ -2062,12 +2069,12 @@
                 }}
                 onmousedown={(e) => e.stopPropagation()}
               >
-                <svg class="props-editor-save-icon absolute left-2 h-3 w-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <svg class="props-editor-save-icon absolute start-2 h-3 w-3 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                   <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
                   <polyline points="17 21 17 13 7 13 7 21" />
                   <polyline points="7 3 7 8 15 8" />
                 </svg>
-                <span class="props-editor-save-label">{saveSaving ? 'Saving' : 'Save'}</span>
+                <span class="props-editor-save-label">{saveSaving ? $t('editor.props.saving') : $t('editor.props.save')}</span>
               </button>
             {/if}
           </div>
@@ -2080,8 +2087,8 @@
       {#if !designSchema && !contentSchema}
         {#if showSchemaError}
           <div class="props-editor-schema-error flex flex-col items-center justify-center h-full">
-            <div class="props-editor-error-title text-error text-lg font-medium">No schema configuration available</div>
-            <div class="props-editor-error-code text-grey5 subtext mt-1">Error code: CONFIG_NOT_FOUND</div>
+            <div class="props-editor-error-title text-error text-lg font-medium">{$t('editor.props.noConfiguration')}</div>
+            <div class="props-editor-error-code text-grey5 subtext mt-1">{$t('editor.failure.errorCode', { code: 'CONFIG_NOT_FOUND' })}</div>
           </div>
         {/if}
       {:else}
@@ -2097,14 +2104,14 @@
                 value="design" 
                 class="flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
               >
-                <span class="body">{designTabTitle}</span>
+                <span class="body">{designTabTitle ?? $t('editor.props.designTab')}</span>
               </Tabs.Trigger>
               {#if contentSchema}
                 <Tabs.Trigger 
                   value="content" 
                   class="flex-1 h-full rounded-[11px] transition-colors duration-250 text-grey5 hover:text-grey7 hover:underline data-[state=active]:bg-white data-[state=active]:text-grey7 data-[state=active]:hover:text-grey7"
                 >
-                  <span class="body">{contentTabTitle}</span>
+                  <span class="body">{contentTabTitle ?? $t('editor.props.contentTab')}</span>
                 </Tabs.Trigger>
               {/if}
             </Tabs.List>
@@ -2190,7 +2197,7 @@
                                       </div>
                                       {/if}
                                       
-                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0 ml-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
+                                      <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0 ms-auto'}" style={isFontIc ? '' : 'width: 185px;'}>
                                         <InputControllerRenderer
                                           controller={describeInputController(InputComponent, {
                                             ...props,
@@ -2210,13 +2217,13 @@
                   {:else}
                     <div class="p-4 text-gray-500">
                       {#if !designSchema}
-                        No design schema available
+                        {$t('editor.props.noDesignSchema')}
                       {:else if !designSchema[0]}
-                        No schema data available
+                        {$t('editor.props.noSchemaData')}
                       {:else if !designSchema[0].components}
-                        No components defined in schema
+                        {$t('editor.props.noComponents')}
                       {:else}
-                        No properties available
+                        {$t('editor.props.noProperties')}
                       {/if}
                     </div>
                   {/if}
@@ -2256,8 +2263,8 @@
                           onOpenChange={() => isGenericContentOpen = !isGenericContentOpen}
                         >
                           <Collapsible.Trigger class="generic-content-trigger w-full">
-                            <div class="flex items-center h-13" style="padding-left: {CONTENT_INNER_PADDING}px; padding-right: {CONTENT_INNER_PADDING}px;">
-                              <h3 class="body-medium text-grey7 flex-1 content-title">{contentSchema?.genericContent?.title || 'Content'}</h3>
+                            <div class="flex items-center h-13" style="padding-inline-start: {CONTENT_INNER_PADDING}px; padding-inline-end: {CONTENT_INNER_PADDING}px;">
+                              <h3 class="body-medium text-grey7 flex-1 content-title">{contentSchema?.genericContent?.title || $t('editor.props.contentCard')}</h3>
                               <ChevronDown class="h-6 w-6 text-grey5 transition-transform chevron" />
                             </div>
                           </Collapsible.Trigger>
@@ -2294,7 +2301,7 @@
                                             helpText={header.helpText}
                                           />
                                         {:else if !isFontIc}
-                                          <div class="flex-1 min-w-0 pr-4">
+                                          <div class="flex-1 min-w-0 pe-4">
                                             <InputControllerHeader 
                                               label={header.label}
                                               helpText={header.helpText}
@@ -2353,7 +2360,7 @@
                                       </h4>
                                       
                                       <!-- Arrow Icon -->
-                                      <div class="pr-4">
+                                      <div class="pe-4">
                                         <ChevronDown class="h-6 w-6 text-grey7 transition-transform chevron" />
                                       </div>
                                     </div>
@@ -2392,7 +2399,7 @@
                                                     helpText={header.helpText}
                                                   />
                                                 {:else if !isFontIc}
-                                                  <div class="flex-1 min-w-0 pr-4">
+                                                  <div class="flex-1 min-w-0 pe-4">
                                                     <InputControllerHeader 
                                                       label={header.label}
                                                       helpText={header.helpText}
@@ -2435,7 +2442,7 @@
                                             }}
                                           >
                                             <span class="subtext text-white transition-colors duration-200">
-                                              Delete item
+                                              {$t('editor.props.deleteItem')}
                                             </span>
                                           </button>
                                         </div>
@@ -2459,7 +2466,7 @@
                             >
                               <div class="flex items-center justify-center gap-2">
                                 <AddNew class="w-5 h-5 text-grey5" />
-                                <span class="body-medium text-grey7 group-hover:underline">Add new</span>
+                                <span class="body-medium text-grey7 group-hover:underline">{$t('editor.props.addItem')}</span>
                               </div>
                             </Button>
                           </div>
@@ -2540,7 +2547,7 @@
       /* Icon stays put next to the text; label is centered in the remaining space
          with a small left bias so "Save" and "Saving" never shift the icon. */
       .props-editor-save-label {
-        padding-left: 14px;
+        padding-inline-start: 14px;
         line-height: 1;
       }
       .props-editor-save-btn .props-editor-save-icon {
@@ -2623,20 +2630,20 @@
 
       /* First item - rounded at top only */
       :global(.accordion-item[data-position="first"]) {
-        border-top-left-radius: var(--radius-small);
-        border-top-right-radius: var(--radius-small);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-start-radius: var(--radius-small);
+        border-start-end-radius: var(--radius-small);
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
         margin-top: 0;  /* Explicitly remove top margin */
       }
 
       /* Last item - rounded at bottom only */
       :global(.accordion-item[data-position="last"]) {
         margin-bottom: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: var(--radius-small);
-        border-bottom-right-radius: var(--radius-small);
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        border-end-start-radius: var(--radius-small);
+        border-end-end-radius: var(--radius-small);
       }
 
       /* Middle items - no rounded corners */
@@ -2738,13 +2745,13 @@
       /* Update scrollbar styling to match */
       :global([data-scrollable="true"] .scrollbar) {
         width: 8px !important; /* Thinner scrollbar */
-        margin-right: 2px !important; /* Add padding from the right */
+        margin-inline-end: 2px !important; /* Add padding from the right */
       }
 
       :global([data-scrollable="true"] .thumb) {
         background-color: hsl(var(--grey1)) !important;
         border-radius: 3px !important;
-        margin-right: 2px !important;
+        margin-inline-end: 2px !important;
       }
 
       :global([data-scrollable="true"] .thumb:hover) {
@@ -2753,11 +2760,11 @@
 
       :global([data-scrollable="true"] .track) {
         background-color: transparent !important;
-        margin-right: 2px !important;
+        margin-inline-end: 2px !important;
       }
 
       :global([data-scrollable="true"]) {
-        padding-right: 2px !important; /* Add padding for scrollbar */
+        padding-inline-end: 2px !important; /* Add padding for scrollbar */
       }
 
       /* Add these styles to ensure proper z-index layering */
@@ -2881,7 +2888,7 @@
       /* Add hover effect for title text */
       :global(.content-item-card [data-radix-collapsible-trigger] h4),
       :global(.generic-content-card [data-radix-collapsible-trigger] h3) {
-        text-align: left !important;
+        text-align: start !important;
       }
 
       /* Add hover overlay for the entire trigger area */
@@ -2953,7 +2960,7 @@
       /* Keep text left-aligned */
       :global(.content-item-card h4),
       :global(.generic-content-card h3) {
-        text-align: left !important;
+        text-align: start !important;
       }
 
       /* Add this new rule to remove focus borders */
@@ -3023,7 +3030,7 @@
       :global(.input-controller > div:first-child) {
         flex: 1 !important;
         min-width: 0 !important;
-        margin-right: 16px !important;
+        margin-inline-end: 16px !important;
       }
 
       :global(.input-controller > div:last-child) {
@@ -3045,7 +3052,7 @@
         width: 100% !important;
         max-width: 100% !important;
         flex: none !important;
-        margin-right: 0 !important;
+        margin-inline-end: 0 !important;
       }
 
       /* New animation system */
@@ -3225,17 +3232,17 @@
 
       /* Modify existing position rules */
       :global(.accordion-item[data-position="first"]) {
-        border-top-left-radius: var(--radius-small);
-        border-top-right-radius: var(--radius-small);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-start-radius: var(--radius-small);
+        border-start-end-radius: var(--radius-small);
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
       }
 
       :global(.accordion-item[data-position="last"]) {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: var(--radius-small);
-        border-bottom-right-radius: var(--radius-small);
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        border-end-start-radius: var(--radius-small);
+        border-end-end-radius: var(--radius-small);
       }
 
       :global(.accordion-item[data-position="middle"]) {
@@ -3270,26 +3277,26 @@
 
       /* Ensure scroll area maintains border radius */
       :global([data-radix-scroll-area-viewport]) {
-        border-bottom-right-radius: var(--radius-large) !important;
+        border-end-end-radius: var(--radius-large) !important;
       }
 
       :global(.scroll-area) {
-        border-bottom-right-radius: var(--radius-large) !important;
+        border-end-end-radius: var(--radius-large) !important;
       }
 
       :global(.scroll-viewport) {
-        border-bottom-right-radius: var(--radius-large) !important;
+        border-end-end-radius: var(--radius-large) !important;
       }
 
       /* Ensure scrollbar doesn't affect border radius */
       :global([data-radix-scroll-area-scrollbar]) {
-        border-bottom-right-radius: var(--radius-large) !important;
-        padding-right: 2px !important;
+        border-end-end-radius: var(--radius-large) !important;
+        padding-inline-end: 2px !important;
       }
 
       :global([data-radix-scroll-area-thumb]) {
         border-radius: var(--radius-small) !important;
-        margin-right: 2px !important;
+        margin-inline-end: 2px !important;
       }
 
       /* Add z-index management for tooltips */
@@ -3329,7 +3336,7 @@
       /* Content Item Hover Styles */
       :global(.content-item-card [data-radix-collapsible-trigger] h4),
       :global(.generic-content-card [data-radix-collapsible-trigger] h3) {
-        text-align: left !important;
+        text-align: start !important;
       }
 
       /* Add new specific hover styles for content titles */
@@ -3477,7 +3484,7 @@
 
       /* Remove any previous left padding from the flex container */
       :global(.content-item-trigger .flex) {
-        padding-left: 0 !important;
+        padding-inline-start: 0 !important;
       }
 
       :global(.content-item) {
@@ -3507,6 +3514,15 @@
         transform: none;
       }
 
+      /* The two tabs trade places on a right to left screen, so each panel slides in from the side that its tab is on. */
+      :global(.design-tab-content.animate-slide-left[data-state="active"]:dir(rtl)) {
+        animation-name: slideFromRight;
+      }
+
+      :global(.content-tab-content.animate-slide-right[data-state="active"]:dir(rtl)) {
+        animation-name: slideFromLeft;
+      }
+
       @keyframes slideFromLeft {
         from {
           opacity: 0;

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -29,8 +29,8 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     designSchema?: DesignSchemaView | null;
     contentSchema?: ContentSchemaView | undefined;
     itemTemplate?: any;
-    designTabTitle?: string;
-    contentTabTitle?: string;
+    designTabTitle?: string | undefined;
+    contentTabTitle?: string | undefined;
     defaultTab?: "design" | "content";
     defaultOpen?: boolean;
     showDragHandle?: boolean;
@@ -41,7 +41,7 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     /** Optional content below the shared toolbar, before property fields. */ headerContent?: any;
     headerClass?: string;
     dragHandleClass?: string;
-    title?: string;
+    title?: string | undefined;
     /** Hide the default missing-schema message for header-only editors. */ showSchemaError?: boolean;
     /** Optional layout wrapper moved by this editor's built-in drag and position API. */ positionTarget?: any;
     initialDesignValues?: Record<string, any>;

package/dist/components/ic/AngleInputController.svelte

@@ -234,7 +234,7 @@
       <InputControllerHeader {label} {helpText} />
     </div>
     
-    <div class="absolute right-0 h-[48px] flex items-center">
+    <div class="absolute end-0 h-[48px] flex items-center">
       <div class="flex items-center justify-end gap-2">
         <!-- Circle Indicator -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/components/ic/BrowserInputController.svelte

@@ -36,6 +36,9 @@
   import { ThumbHashImage } from "@widgetic/design-system/components";
   import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
   import { useEditorMediaLibrary } from '../../mediaLibraryContext';
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+  import type { Translate } from '@widgetic/design-system/i18n';
   import X from '../icons/x.svelte';
   // console.log("BrowserInputController - Tooltip:", Tooltip);
   
@@ -71,6 +74,9 @@
   // The media library the editor above was given (a partner's own storage, for instance), read through a getter
   // because it reaches this component through context.
   const getEditorMediaLibrary = useEditorMediaLibrary();
+
+  // The words of the editor in the language of the page, and the share of them that belongs to the File Browser inside it.
+  const { t, fileBrowser: fileBrowserLanguage } = useEditorLanguage();
   
   // Extract allowed file types from config or default to all files
   const fileTypes = config.fileTypes || ['*'];
@@ -391,15 +397,15 @@
   $: if (videoElement) setupMediaElement(videoElement);
 
   // Add placeholder text logic
-  function getAddToEditorLabelSingular(fileTypes: string[]): string {
-    if (!fileTypes || fileTypes.includes('*')) return 'Use file';
+  function getAddToEditorLabelSingular(fileTypes: string[], translate: Translate<EditorMessageKey>): string {
+    if (!fileTypes || fileTypes.includes('*')) return translate('editor.file.useFile');
     const type = fileTypes[0].split('/')[0];
     switch (type) {
-      case 'image': return 'Use image';
-      case 'video': return 'Use video';
-      case 'audio': return 'Use audio';
-      case 'document': return 'Use document';
-      default: return 'Use file';
+      case 'image': return translate('editor.file.useImage');
+      case 'video': return translate('editor.file.useVideo');
+      case 'audio': return translate('editor.file.useAudio');
+      case 'document': return translate('editor.file.useDocument');
+      default: return translate('editor.file.useFile');
     }
   }
 
@@ -419,15 +425,15 @@
     }
   }
 
-  function getPlaceholderText(fileTypes: string[]): string {
-    if (!fileTypes || fileTypes.includes('*')) return 'Add file...';
+  function getPlaceholderText(fileTypes: string[], translate: Translate<EditorMessageKey>): string {
+    if (!fileTypes || fileTypes.includes('*')) return translate('editor.file.addFile');
     const type = fileTypes[0].split('/')[0];
     switch (type) {
-      case 'image': return 'Add image...';
-      case 'video': return 'Add video...';
-      case 'audio': return 'Add audio...';
-      case 'document': return 'Add docs...';
-      default: return 'Add file...';
+      case 'image': return translate('editor.file.addImage');
+      case 'video': return translate('editor.file.addVideo');
+      case 'audio': return translate('editor.file.addAudio');
+      case 'document': return translate('editor.file.addDocument');
+      default: return translate('editor.file.addFile');
     }
   }
 
@@ -443,7 +449,7 @@
 
   $: fileBrowserFilter = getInitialFileBrowserFilter(fileTypes);
   $: fileBrowserRestrictUpload = fileBrowserFilter !== 'all';
-  $: fileBrowserAddToEditorLabelSingular = getAddToEditorLabelSingular(fileTypes);
+  $: fileBrowserAddToEditorLabelSingular = getAddToEditorLabelSingular(fileTypes, $t);
 
   function handleContentRemoval(e: MouseEvent) {
     e.stopPropagation();
@@ -481,7 +487,7 @@
       <InputControllerHeader label={header?.label || label} helpText={header?.helpText} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -496,12 +502,12 @@
         <!-- File name or placeholder -->
         <div class="browser-input-controller-label flex-1 min-w-0 px-4 flex items-center h-full">
           <span class="subtext {value ? 'text-grey7' : 'text-grey3'} truncate inline-block">
-            {value ? getFileName(value) : getPlaceholderText(fileTypes)}
+            {value ? getFileName(value) : getPlaceholderText(fileTypes, $t)}
           </span>
         </div>
 
         <!-- Preview area -->
-        <div class="flex-none h-full flex items-center pr-[16px]">
+        <div class="flex-none h-full flex items-center pe-[16px]">
           {#if isChecking}
             <!-- Loading state -->
             <div class="w-8 h-7 bg-gray-100 rounded-lg"></div>
@@ -578,7 +584,7 @@
                 >
                   <img 
                     src={isPlaying ? icPlayerPause : icPlayerPlay}
-                    alt={isPlaying ? "Pause" : "Play"}
+                    alt={isPlaying ? $t('editor.file.pause') : $t('editor.file.play')}
                     class="w-5 h-5 {isPlaying ? 'opacity-0 hover:opacity-100' : 'opacity-100'} transition-opacity"
                   />
                 </div>
@@ -614,7 +620,7 @@
                 >
                   <img 
                     src={isPlaying ? icPlayerPause : icPlayerPlay}
-                    alt={isPlaying ? "Pause" : "Play"}
+                    alt={isPlaying ? $t('editor.file.pause') : $t('editor.file.play')}
                     class="w-5 h-5"
                   />
                 </div>
@@ -643,14 +649,14 @@
             <!-- Error state -->
             <img 
               src={icError} 
-              alt="File not found" 
+              alt={$t('editor.file.notFound')} 
               class="w-8 h-7 object-contain" 
             />
           {:else}
             <!-- Empty state -->
             <img 
               src={icFolder} 
-              alt="Empty folder" 
+              alt={$t('editor.file.emptyFolder')} 
               class="w-8 h-7 object-contain" 
             />
           {/if}
@@ -659,9 +665,9 @@
           {#if value}
             <button
               type="button"
-              class="browser-ic-clear-btn absolute top-[-4px] right-[-4px] w-4 h-4 rounded-full hover:bg-grey2 transition-colors flex items-center justify-center"
+              class="browser-ic-clear-btn absolute top-[-4px] end-[-4px] w-4 h-4 rounded-full hover:bg-grey2 transition-colors flex items-center justify-center"
               on:click={handleContentRemoval}
-              aria-label="Clear file"
+              aria-label={$t('editor.file.clear')}
             >
               <div class="w-4 h-4 flex items-center justify-center">
                 <X class="w-4! h-4!" />
@@ -699,14 +705,14 @@
         class:rounded-large={!fillEditorPanel}
         class:shadow-2xl={!fillEditorPanel}
       >
-        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 pl-4 pr-8">
-          <span class="body-medium text-grey7">Select file</span>
+        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 ps-4 pe-8">
+          <span class="body-medium text-grey7">{$t('editor.file.dialogTitle')}</span>
           <button
             type="button"
             class="browser-input-file-browser-close inline-flex h-6 w-6 items-center justify-center p-0"
-            style="position:absolute;top:4px;right:4px;"
+            style="position:absolute;top:4px;inset-inline-end:4px;"
             on:click={closeFileBrowser}
-            aria-label="Close file browser"
+            aria-label={$t('editor.file.closeDialog')}
           >
             <X class="h-6! w-6!" />
           </button>
@@ -729,6 +735,8 @@
             maxSelections={1}
             activeFileId={getCurrentFileId()}
             addToEditorLabel={fileBrowserAddToEditorLabelSingular}
+            locale={$fileBrowserLanguage.locale ?? undefined}
+            messages={$fileBrowserLanguage.messages ?? null}
             on:select={handleFileBrowserSelect}
           />
         </div>
@@ -741,7 +749,7 @@
   .browser-input-file-browser-close {
     position: absolute;
     top: 4px;
-    right: 4px;
+    inset-inline-end: 4px;
   }
 
   .browser-input-file-browser-dialog-animate {