@vendure/dashboard 3.5.1-master-202511120232 → 3.5.1-master-202511130232

package/dist/vite/utils/compiler.d.ts

@@ -9,6 +9,7 @@ export interface CompilerOptions {
     pathAdapter?: PathAdapter;
     logger?: Logger;
     pluginPackageScanner?: PackageScannerConfig;
+    module?: 'commonjs' | 'esm';
 }
 export interface CompileResult {
     vendureConfig: VendureConfig;

package/dist/vite/utils/compiler.js

@@ -16,7 +16,7 @@ const defaultPathAdapter = {
  * and in node_modules.
  */
 export async function compile(options) {
-    var _a, _b;
+    var _a, _b, _c;
     const { vendureConfigPath, outputPath, pathAdapter, logger = noopLogger, pluginPackageScanner } = options;
     const getCompiledConfigPath = (_a = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.getCompiledConfigPath) !== null && _a !== void 0 ? _a : defaultPathAdapter.getCompiledConfigPath;
     const transformTsConfigPathMappings = (_b = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.transformTsConfigPathMappings) !== null && _b !== void 0 ? _b : defaultPathAdapter.transformTsConfigPathMappings;
@@ -29,6 +29,7 @@ export async function compile(options) {
         outputPath,
         logger,
         transformTsConfigPathMappings,
+        module: (_c = options.module) !== null && _c !== void 0 ? _c : 'commonjs',
     });
     logger.info(`TypeScript compilation completed in ${Date.now() - compileStart}ms`);
     // 2. Discover plugins
@@ -49,7 +50,7 @@ export async function compile(options) {
         configFileName,
     })).href.replace(/.ts$/, '.js');
     // Create package.json with type commonjs
-    await fs.writeFile(path.join(outputPath, 'package.json'), JSON.stringify({ type: 'commonjs', private: true }, null, 2));
+    await fs.writeFile(path.join(outputPath, 'package.json'), JSON.stringify({ type: options.module === 'esm' ? 'module' : 'commonjs', private: true }, null, 2));
     // Find the exported config symbol
     const sourceFile = ts.createSourceFile(vendureConfigPath, await fs.readFile(vendureConfigPath, 'utf-8'), ts.ScriptTarget.Latest, true);
     const exportedSymbolName = findConfigExport(sourceFile);
@@ -80,14 +81,14 @@ export async function compile(options) {
 /**
  * Compiles TypeScript files to JavaScript
  */
-async function compileTypeScript({ inputPath, outputPath, logger, transformTsConfigPathMappings, }) {
+async function compileTypeScript({ inputPath, outputPath, logger, transformTsConfigPathMappings, module, }) {
     var _a;
     await fs.ensureDir(outputPath);
     // Find tsconfig paths first
     const tsConfigInfo = await findTsConfigPaths(inputPath, logger, 'compiling', transformTsConfigPathMappings);
     const compilerOptions = {
         target: ts.ScriptTarget.ES2020,
-        module: ts.ModuleKind.CommonJS,
+        module: module === 'esm' ? ts.ModuleKind.ESNext : ts.ModuleKind.CommonJS,
         moduleResolution: ts.ModuleResolutionKind.Node10, // More explicit CJS resolution
         experimentalDecorators: true,
         emitDecoratorMetadata: true,

package/dist/vite/utils/get-dashboard-paths.d.ts

@@ -0,0 +1,5 @@
+import { PluginInfo } from '../types.js';
+/**
+ * Returns an array of the paths to plugins, based on the info provided by the ConfigLoaderApi.
+ */
+export declare function getDashboardPaths(pluginInfo: PluginInfo[]): string[];

package/dist/vite/utils/get-dashboard-paths.js

@@ -0,0 +1,20 @@
+import path from 'path';
+/**
+ * Returns an array of the paths to plugins, based on the info provided by the ConfigLoaderApi.
+ */
+export function getDashboardPaths(pluginInfo) {
+    var _a;
+    return ((_a = pluginInfo === null || pluginInfo === void 0 ? void 0 : pluginInfo.flatMap(({ dashboardEntryPath, sourcePluginPath, pluginPath }) => {
+        if (!dashboardEntryPath) {
+            return [];
+        }
+        const sourcePaths = [];
+        if (sourcePluginPath) {
+            sourcePaths.push(path.join(path.dirname(sourcePluginPath), path.dirname(dashboardEntryPath)));
+        }
+        if (pluginPath) {
+            sourcePaths.push(path.join(path.dirname(pluginPath), path.dirname(dashboardEntryPath)));
+        }
+        return sourcePaths;
+    }).filter(x => x != null)) !== null && _a !== void 0 ? _a : []);
+}

package/dist/vite/vite-plugin-tailwind-source.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import { getDashboardPaths } from './utils/get-dashboard-paths.js';
 import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
 /**
  * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
@@ -16,25 +16,12 @@ export function dashboardTailwindSourcePlugin() {
             configLoaderApi = getConfigLoaderApi(plugins);
         },
         async transform(src, id) {
-            var _a;
             if (/app\/styles.css$/.test(id)) {
                 if (!loadVendureConfigResult) {
                     loadVendureConfigResult = await configLoaderApi.getVendureConfig();
                 }
                 const { pluginInfo } = loadVendureConfigResult;
-                const dashboardExtensionDirs = (_a = pluginInfo === null || pluginInfo === void 0 ? void 0 : pluginInfo.flatMap(({ dashboardEntryPath, sourcePluginPath, pluginPath }) => {
-                    if (!dashboardEntryPath) {
-                        return [];
-                    }
-                    const sourcePaths = [];
-                    if (sourcePluginPath) {
-                        sourcePaths.push(path.join(path.dirname(sourcePluginPath), path.dirname(dashboardEntryPath)));
-                    }
-                    if (pluginPath) {
-                        sourcePaths.push(path.join(path.dirname(pluginPath), path.dirname(dashboardEntryPath)));
-                    }
-                    return sourcePaths;
-                }).filter(x => x != null)) !== null && _a !== void 0 ? _a : [];
+                const dashboardExtensionDirs = getDashboardPaths(pluginInfo);
                 const sources = dashboardExtensionDirs
                     .map(extension => {
                     return `@source '${extension}';`;

package/dist/vite/vite-plugin-translations.d.ts

@@ -16,7 +16,16 @@ export interface TranslationsPluginOptions {
 }
 /**
  * @description
- * This Vite plugin compiles
+ * This Vite plugin compiles the source .po files into JS bundles that can be loaded statically.
+ *
+ * It handles 2 modes: dev and build.
+ *
+ * - The dev case is handled in the `load` function using Vite virtual
+ * modules to compile and return translations from plugins _only_, which then get merged with the built-in
+ * translations in the `loadI18nMessages` function
+ * - The build case loads both built-in and plugin translations, merges them, and outputs the compiled
+ * files as .js files that can be statically consumed by the built app.
+ *
  * @param options
  */
 export declare function translationsPlugin(options: TranslationsPluginOptions): Plugin;

package/dist/vite/vite-plugin-translations.js

@@ -1,62 +1,82 @@
 import { createCompilationErrorMessage, createCompiledCatalog, getCatalogForFile, getCatalogs, } from '@lingui/cli/api';
 import { getConfig } from '@lingui/conf';
+import glob from 'fast-glob';
 import * as fs from 'fs';
 import * as path from 'path';
+import { getDashboardPaths } from './utils/get-dashboard-paths.js';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+const virtualModuleId = 'virtual:plugin-translations';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 /**
  * @description
- * This Vite plugin compiles
+ * This Vite plugin compiles the source .po files into JS bundles that can be loaded statically.
+ *
+ * It handles 2 modes: dev and build.
+ *
+ * - The dev case is handled in the `load` function using Vite virtual
+ * modules to compile and return translations from plugins _only_, which then get merged with the built-in
+ * translations in the `loadI18nMessages` function
+ * - The build case loads both built-in and plugin translations, merges them, and outputs the compiled
+ * files as .js files that can be statically consumed by the built app.
+ *
  * @param options
  */
 export function translationsPlugin(options) {
-    const { externalPoFiles = [], localesDir = 'src/i18n/locales', outputPath = 'assets/i18n' } = options;
-    const linguiConfig = getConfig({ configPath: path.join(options.packageRoot, 'lingui.config.js') });
-    const catalogsPromise = getCatalogs(linguiConfig);
-    async function compileTranslations(files, emitFile) {
-        const catalogs = await catalogsPromise;
-        for (const file of files) {
-            const catalogRelativePath = path.relative(options.packageRoot, file.path);
-            const fileCatalog = getCatalogForFile(catalogRelativePath, catalogs);
-            const { locale, catalog } = fileCatalog;
-            const { messages } = await catalog.getTranslations(locale, {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                fallbackLocales: { default: linguiConfig.sourceLocale },
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                sourceLocale: linguiConfig.sourceLocale,
-            });
-            const { source: code, errors } = createCompiledCatalog(locale, messages, {
-                namespace: 'es',
-                pseudoLocale: linguiConfig.pseudoLocale,
-            });
-            if (errors.length) {
-                const message = createCompilationErrorMessage(locale, errors);
-                throw new Error(message +
-                    `These errors fail build because \`failOnCompileError=true\` in Lingui Vite plugin configuration.`);
-            }
-            // Emit the compiled JavaScript file to the build output
-            const outputFileName = path.posix.join(outputPath, `${locale}.js`);
-            emitFile({
-                type: 'asset',
-                fileName: outputFileName,
-                source: code,
-            });
-        }
-    }
+    let configLoaderApi;
+    let loadVendureConfigResult;
     return {
         name: 'vendure:compile-translations',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                this.debug('Loading plugin translations...');
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const pluginTranslations = await getPluginTranslations(pluginInfo);
+                const linguiConfig = getConfig({
+                    configPath: path.join(options.packageRoot, 'lingui.config.js'),
+                });
+                const catalogs = await getLinguiCatalogs(linguiConfig, pluginTranslations);
+                const pluginFiles = pluginTranslations.flatMap(translation => translation.translations);
+                const mergedMessageMap = await createMergedMessageMap({
+                    files: pluginFiles,
+                    packageRoot: options.packageRoot,
+                    catalogs,
+                    sourceLocale: linguiConfig.sourceLocale,
+                });
+                return `
+                    const translations = {
+                        ${[...mergedMessageMap.entries()]
+                    .map(([locale, messages]) => {
+                    const safeLocale = locale.replace(/-/g, '_');
+                    return `${safeLocale}: ${JSON.stringify(messages)}`;
+                })
+                    .join(',\n')}
+                    };
+                    export default translations;
+                `;
+            }
+        },
+        // This runs at build-time only
         async generateBundle() {
             // This runs during the bundle generation phase - emit files directly to build output
             try {
-                const resolvedLocalesDir = path.resolve(options.packageRoot, localesDir);
-                // Get all built-in .po files
-                const builtInFiles = fs
-                    .readdirSync(resolvedLocalesDir)
-                    .filter(file => file.endsWith('.po'))
-                    .map(file => ({
-                    name: file,
-                    path: path.join(resolvedLocalesDir, file),
-                }));
-                await compileTranslations(builtInFiles, this.emitFile);
-                this.info(`✓ Processed ${builtInFiles.length} translation files to ${outputPath}`);
+                const { pluginInfo } = await configLoaderApi.getVendureConfig();
+                // Get any plugin-provided .po files
+                const pluginTranslations = await getPluginTranslations(pluginInfo);
+                const pluginTranslationFiles = pluginTranslations.flatMap(p => p.translations);
+                this.info(`Found ${pluginTranslationFiles.length} translation files from plugins`);
+                this.debug(pluginTranslationFiles.join('\n'));
+                await compileTranslations(options, pluginTranslations, this.emitFile);
             }
             catch (error) {
                 this.error(`Translation plugin error: ${error instanceof Error ? error.message : String(error)}`);
@@ -64,3 +84,94 @@ export function translationsPlugin(options) {
         },
     };
 }
+async function getPluginTranslations(pluginInfo) {
+    const dashboardPaths = getDashboardPaths(pluginInfo);
+    const pluginTranslations = [];
+    for (const dashboardPath of dashboardPaths) {
+        const poPatterns = path.join(dashboardPath, '**/*.po');
+        const translations = await glob(poPatterns, {
+            ignore: [
+                // Standard test & doc files
+                '**/node_modules/**/node_modules/**',
+                '**/*.spec.js',
+                '**/*.test.js',
+            ],
+            onlyFiles: true,
+            absolute: true,
+            followSymbolicLinks: false,
+            stats: false,
+        });
+        pluginTranslations.push({
+            pluginRootPath: dashboardPath,
+            translations,
+        });
+    }
+    return pluginTranslations;
+}
+async function compileTranslations(options, pluginTranslations, emitFile) {
+    const { localesDir = 'src/i18n/locales', outputPath = 'assets/i18n' } = options;
+    const linguiConfig = getConfig({ configPath: path.join(options.packageRoot, 'lingui.config.js') });
+    const resolvedLocalesDir = path.resolve(options.packageRoot, localesDir);
+    const catalogs = await getLinguiCatalogs(linguiConfig, pluginTranslations);
+    // Get all built-in .po files
+    const builtInFiles = fs
+        .readdirSync(resolvedLocalesDir)
+        .filter(file => file.endsWith('.po'))
+        .map(file => path.join(resolvedLocalesDir, file));
+    const pluginFiles = pluginTranslations.flatMap(translation => translation.translations);
+    const mergedMessageMap = await createMergedMessageMap({
+        files: [...builtInFiles, ...pluginFiles],
+        packageRoot: options.packageRoot,
+        catalogs,
+        sourceLocale: linguiConfig.sourceLocale,
+    });
+    for (const [locale, messages] of mergedMessageMap.entries()) {
+        const { source: code, errors } = createCompiledCatalog(locale, messages, {
+            namespace: 'es',
+            pseudoLocale: linguiConfig.pseudoLocale,
+        });
+        if (errors.length) {
+            const message = createCompilationErrorMessage(locale, errors);
+            throw new Error(message +
+                `These errors fail build because \`failOnCompileError=true\` in Lingui Vite plugin configuration.`);
+        }
+        // Emit the compiled JavaScript file to the build output
+        const outputFileName = path.posix.join(outputPath, `${locale}.js`);
+        emitFile({
+            type: 'asset',
+            fileName: outputFileName,
+            source: code,
+        });
+    }
+}
+async function getLinguiCatalogs(linguiConfig, pluginTranslations) {
+    var _a, _b, _c;
+    for (const pluginTranslation of pluginTranslations) {
+        if (pluginTranslation.translations.length === 0) {
+            continue;
+        }
+        (_a = linguiConfig.catalogs) === null || _a === void 0 ? void 0 : _a.push({
+            path: (_c = (_b = pluginTranslation.translations[0]) === null || _b === void 0 ? void 0 : _b.replace(/[a-z_-]+\.po$/, '{locale}')) !== null && _c !== void 0 ? _c : '',
+            include: [],
+        });
+    }
+    return getCatalogs(linguiConfig);
+}
+async function createMergedMessageMap({ files, packageRoot, catalogs, sourceLocale, }) {
+    var _a;
+    const mergedMessageMap = new Map();
+    for (const file of files) {
+        const catalogRelativePath = path.relative(packageRoot, file);
+        const fileCatalog = getCatalogForFile(catalogRelativePath, catalogs);
+        const { locale, catalog } = fileCatalog;
+        const { messages } = await catalog.getTranslations(locale, {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            fallbackLocales: { default: sourceLocale },
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            sourceLocale: sourceLocale,
+        });
+        const mergedMessages = (_a = mergedMessageMap.get(locale)) !== null && _a !== void 0 ? _a : {};
+        mergedMessageMap.set(locale, Object.assign(Object.assign({}, mergedMessages), messages));
+    }
+    return mergedMessageMap;
+}

package/dist/vite/vite-plugin-vendure-dashboard.d.ts

@@ -77,6 +77,18 @@ export type VitePluginVendureDashboardOptions = {
      * the location based on the location of the `@vendure/core` package.
      */
     pluginPackageScanner?: PackageScannerConfig;
+    /**
+     * @description
+     * Allows you to specify the module system to use when compiling and loading your Vendure config.
+     * By default, the compiler will use CommonJS, but you can set it to `esm` if you are using
+     * ES Modules in your Vendure project.
+     *
+     * **Status** Developer preview. If you are using ESM please try this out and provide us with feedback!
+     *
+     * @since 3.5.1
+     * @default 'commonjs'
+     */
+    module?: 'commonjs' | 'esm';
     /**
      * @description
      * Allows you to selectively disable individual plugins.

package/dist/vite/vite-plugin-vendure-dashboard.js

@@ -76,6 +76,7 @@ export function vendureDashboardPlugin(options) {
                 outputPath: tempDir,
                 pathAdapter: options.pathAdapter,
                 pluginPackageScanner: options.pluginPackageScanner,
+                module: options.module,
             }),
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.5.1-master-202511120232",
+    "version": "3.5.1-master-202511130232",
     "type": "module",
     "repository": {
         "type": "git",
@@ -155,8 +155,8 @@
         "@storybook/addon-vitest": "^10.0.0-beta.9",
         "@storybook/react-vite": "^10.0.0-beta.9",
         "@types/node": "^22.13.4",
-        "@vendure/common": "^3.5.1-master-202511120232",
-        "@vendure/core": "^3.5.1-master-202511120232",
+        "@vendure/common": "^3.5.1-master-202511130232",
+        "@vendure/core": "^3.5.1-master-202511130232",
         "@vitest/browser": "^3.2.4",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.19.0",
@@ -173,5 +173,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "9361156a66b865340501d3ad1257addd09fb10f5"
+    "gitHead": "8b6e0be6580da59439a50299cfc1d0c7b65f34ec"
 }

package/src/lib/components/data-input/string-list-input.tsx

@@ -1,13 +1,144 @@
-import { X } from 'lucide-react';
-import { KeyboardEvent, useId, useRef, useState } from 'react';
+import { GripVertical, X } from 'lucide-react';
+import { KeyboardEvent, useEffect, useId, useRef, useState } from 'react';
 
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import type { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import { cn } from '@/vdb/lib/utils.js';
+import {
+    closestCenter,
+    DndContext,
+    type DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useLingui } from '@lingui/react';
 
+interface SortableItemProps {
+    id: string;
+    item: string;
+    isDisabled: boolean;
+    isEditing: boolean;
+    onRemove: () => void;
+    onEdit: () => void;
+    onSave: (newValue: string) => void;
+}
+
+function SortableItem({ id, item, isDisabled, isEditing, onRemove, onEdit, onSave }: SortableItemProps) {
+    const [editValue, setEditValue] = useState(item);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    const handleSave = () => {
+        const trimmedValue = editValue.trim();
+        if (trimmedValue && trimmedValue !== item) {
+            onSave(trimmedValue);
+        } else {
+            setEditValue(item);
+            onSave(item);
+        }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSave();
+        } else if (e.key === 'Escape') {
+            setEditValue(item);
+            onSave(item);
+        }
+    };
+
+    // Focus and select input when entering edit mode
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+
+    return (
+        <Badge
+            ref={setNodeRef}
+            style={style}
+            variant="secondary"
+            className={cn(
+                isDragging && 'opacity-50',
+                'flex items-center gap-1',
+                isEditing && 'border-muted-foreground/30',
+            )}
+        >
+            {!isDisabled && (
+                <button
+                    type="button"
+                    className={cn(
+                        'cursor-grab active:cursor-grabbing text-muted-foreground',
+                        'hover:bg-muted rounded p-0.5',
+                    )}
+                    {...attributes}
+                    {...listeners}
+                    aria-label={`Drag ${item}`}
+                >
+                    <GripVertical className="h-3 w-3" />
+                </button>
+            )}
+            {isEditing ? (
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={editValue}
+                    onChange={e => setEditValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleSave}
+                    className="bg-transparent border-none outline-none focus:ring-0 p-0 h-auto min-w-[60px] w-auto"
+                    style={{ width: `${Math.max(editValue.length * 8, 60)}px` }}
+                />
+            ) : (
+                <span
+                    onClick={!isDisabled ? onEdit : undefined}
+                    className={cn(!isDisabled && 'cursor-text hover:underline')}
+                >
+                    {item}
+                </span>
+            )}
+            {!isDisabled && (
+                <button
+                    type="button"
+                    onClick={e => {
+                        e.stopPropagation();
+                        onRemove();
+                    }}
+                    className={cn(
+                        'ml-1 rounded-full outline-none ring-offset-background text-muted-foreground',
+                        'hover:bg-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                    )}
+                    aria-label={`Remove ${item}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}
+
 export function StringListInput({
     value,
     onChange,
@@ -17,13 +148,21 @@ export function StringListInput({
     fieldDef,
 }: DashboardFormComponentProps) {
     const [inputValue, setInputValue] = useState('');
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
     const inputRef = useRef<HTMLInputElement>(null);
     const { i18n } = useLingui();
-    const isDisabled = isReadonlyField(fieldDef) || disabled;
+    const isDisabled = isReadonlyField(fieldDef) || disabled || false;
     const id = useId();
 
     const items = Array.isArray(value) ? value : [];
 
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
     const addItem = (item: string) => {
         const trimmedItem = item.trim();
         if (trimmedItem) {
@@ -36,6 +175,24 @@ export function StringListInput({
         onChange(items.filter((_, index) => index !== indexToRemove));
     };
 
+    const editItem = (index: number, newValue: string) => {
+        const newItems = [...items];
+        newItems[index] = newValue;
+        onChange(newItems);
+        setEditingIndex(null);
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        if (over && active.id !== over.id) {
+            const oldIndex = items.findIndex((_, idx) => `${id}-${idx}` === active.id);
+            const newIndex = items.findIndex((_, idx) => `${id}-${idx}` === over.id);
+
+            onChange(arrayMove(items, oldIndex, newIndex));
+        }
+    };
+
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter' || e.key === ',') {
             e.preventDefault();
@@ -74,29 +231,27 @@ export function StringListInput({
                     className="min-w-[120px]"
                 />
             )}
-            <div className="flex flex-wrap gap-1 items-start justify-start">
-                {items.map((item, index) => (
-                    <Badge key={id + index} variant="secondary">
-                        <span>{item}</span>
-                        {!isDisabled && (
-                            <button
-                                type="button"
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    removeItem(index);
-                                }}
-                                className={cn(
-                                    'ml-1 rounded-full outline-none ring-offset-background',
-                                    'hover:bg-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
-                                )}
-                                aria-label={`Remove ${item}`}
-                            >
-                                <X className="h-3 w-3" />
-                            </button>
-                        )}
-                    </Badge>
-                ))}
-            </div>
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                <SortableContext
+                    items={items.map((_, index) => `${id}-${index}`)}
+                    strategy={verticalListSortingStrategy}
+                >
+                    <div className="flex flex-wrap gap-1 items-start justify-start">
+                        {items.map((item, index) => (
+                            <SortableItem
+                                key={`${id}-${index}`}
+                                id={`${id}-${index}`}
+                                item={item}
+                                isDisabled={isDisabled}
+                                isEditing={editingIndex === index}
+                                onRemove={() => removeItem(index)}
+                                onEdit={() => setEditingIndex(index)}
+                                onSave={newValue => editItem(index, newValue)}
+                            />
+                        ))}
+                    </div>
+                </SortableContext>
+            </DndContext>
         </div>
     );
 }

package/src/lib/components/shared/custom-fields-form.tsx

@@ -72,7 +72,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
     const shouldShowTabs = useMemo(() => {
         if (!customFields) return false;
         const hasTabbedFields = customFields.some(field => field.ui?.tab);
-        return hasTabbedFields || groupedFields.length > 1;
+        return hasTabbedFields && groupedFields.length > 1;
     }, [customFields, groupedFields.length]);
 
     if (!shouldShowTabs) {

package/src/lib/lib/load-i18n-messages.ts

@@ -12,6 +12,9 @@ export async function loadI18nMessages(locale: string): Promise<Messages> {
     } else {
         // In dev mode we allow the dynamic import behaviour
         const { messages } = await import(`../../i18n/locales/${locale}.po`);
-        return messages;
+        const pluginTranslations = await import('virtual:plugin-translations');
+        const safeLocale = locale.replace(/-/g, '_');
+        const pluginTranslationsForLocale = pluginTranslations.default[safeLocale] ?? {};
+        return { ...messages, ...pluginTranslationsForLocale };
     }
 }

package/src/lib/virtual.d.ts

@@ -5,6 +5,9 @@ declare module 'virtual:admin-api-schema' {
 declare module 'virtual:dashboard-extensions' {
     export const runDashboardExtensions: () => Promise<void>;
 }
+declare module 'virtual:plugin-translations' {
+    export default translations = Record<string, any>;
+}
 
 declare module 'virtual:vendure-ui-config' {
     import { LanguageCode } from '@vendure/core';