@vendure/dashboard 3.6.0-minor-202511061555 → 3.6.0-minor-202512161252

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -20,7 +20,7 @@ export function DataTableFilterBadge({
     const [operator, value] = Object.entries(filter.value as Record<string, unknown>)[0];
     return (
         <Badge key={filter.id} className="flex gap-2 flex-wrap items-center" variant="outline">
-            <div
+            <button
                 className="flex gap-1 flex-wrap items-center cursor-pointer flex-1"
                 onClick={() => onClick?.(filter)}
             >
@@ -37,7 +37,7 @@ export function DataTableFilterBadge({
                 <div className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap flex flex-col @xl:flex-row @2xl:gap-1">
                     <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
                 </div>
-            </div>
+            </button>
             <button className="border-l -mr-2" onClick={() => onRemove(filter)}>
                 <XIcon className="h-4 flex-shrink-0 cursor-pointer" />
             </button>

package/src/lib/components/data-table/data-table.tsx

@@ -209,7 +209,6 @@ export function DataTable<TData>({
                 ...pagination,
                 pageIndex: 0,
             });
-            pagination.pageIndex;
         }
         prevColumnFiltersRef.current = columnFilters;
     }, [columnFilters]);
@@ -255,6 +254,7 @@ export function DataTable<TData>({
                                     title={filter?.title}
                                     options={filter?.options}
                                     optionsFn={filter?.optionsFn}
+                                    icon={filter?.icon}
                                 />
                             ))}
                         </Suspense>

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -163,7 +163,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
             if (!id) {
                 throw new Error('Column id is required');
             }
-            finalColumns.push(columnHelper.accessor(id as any, { ...column, id, enableColumnFilter: false }));
+            finalColumns.push(columnHelper.accessor(id as any, { enableColumnFilter: false, ...column, id }));
         }
 
         if (defaultColumnOrder) {

package/src/lib/components/layout/channel-switcher.tsx

@@ -17,6 +17,7 @@ import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { Trans } from '@lingui/react/macro';
@@ -65,6 +66,9 @@ export function ChannelSwitcher() {
         ? [displayChannel, ...channels.filter(ch => ch.id !== displayChannel.id)]
         : channels;
 
+    // Sort language codes by their formatted names and map to code and label
+    const sortedLanguages = useSortedLanguages(displayChannel?.availableLanguageCodes);
+
     useEffect(() => {
         if (activeChannel?.availableLanguageCodes) {
             // Ensure the current content language is a valid one for the active
@@ -150,7 +154,7 @@ export function ChannelSwitcher() {
                                                 </div>
                                             </DropdownMenuSubTrigger>
                                             <DropdownMenuSubContent>
-                                                {channel.availableLanguageCodes?.map(languageCode => (
+                                                {sortedLanguages?.map(({ code: languageCode, label }) => (
                                                     <DropdownMenuItem
                                                         key={`${channel.code}-${languageCode}`}
                                                         onClick={() => setContentLanguage(languageCode)}
@@ -161,7 +165,7 @@ export function ChannelSwitcher() {
                                                                 {languageCode.toUpperCase()}
                                                             </span>
                                                         </div>
-                                                        <span>{formatLanguageName(languageCode)}</span>
+                                                        <span>{label}</span>
                                                         {contentLanguage === languageCode && (
                                                             <span className="ml-auto text-xs text-muted-foreground">
                                                                 <Trans context="active language">

package/src/lib/components/layout/content-language-selector.tsx

@@ -1,6 +1,6 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { cn } from '@/vdb/lib/utils.js';
 
@@ -12,14 +12,13 @@ interface ContentLanguageSelectorProps {
 
 export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
     const serverConfig = useServerConfig();
-    const { formatLanguageName } = useLocalFormat();
     const {
         settings: { contentLanguage },
         setContentLanguage,
     } = useUserSettings();
 
-    // Fallback to empty array if serverConfig is null
-    const languages = serverConfig?.availableLanguages || [];
+    // Map languages to code and label, then sort by label
+    const sortedLanguages = useSortedLanguages(serverConfig?.availableLanguages);
 
     // If no value is provided but languages are available, use the first language
     const currentValue = contentLanguage;
@@ -36,9 +35,9 @@ export function ContentLanguageSelector({ value, onChange, className }: ContentL
                 <SelectValue placeholder="Select language" />
             </SelectTrigger>
             <SelectContent>
-                {languages.map(language => (
-                    <SelectItem key={language} value={language}>
-                        {formatLanguageName(language)}
+                {sortedLanguages.map(({ code, label }) => (
+                    <SelectItem key={code} value={code}>
+                        {label}
                     </SelectItem>
                 ))}
             </SelectContent>

package/src/lib/components/layout/dev-mode-indicator.tsx

@@ -2,14 +2,18 @@ import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@lingui/react/macro';
-import { CodeXmlIcon, XIcon } from 'lucide-react';
+import { SquareDashedMousePointer, XIcon } from 'lucide-react';
 
 export function DevModeIndicator() {
     const { setDevMode } = useUserSettings();
     return (
         <Badge className="bg-dev-mode text-background">
-            <CodeXmlIcon className="w-6 h-6" />
-            <Trans>Dev Mode</Trans>
+            <div>
+                <SquareDashedMousePointer className="w-4 h-4" />
+            </div>
+            <div>
+                <Trans>Dev Mode</Trans>
+            </div>
             <Button variant="ghost" size="icon-xs" onClick={() => setDevMode(false)}>
                 <XIcon className="w-4 h-4" />
             </Button>

package/src/lib/components/layout/language-dialog.tsx

@@ -1,10 +1,11 @@
 import { CurrencyCode } from '@/vdb/constants.js';
 import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
 import { useUiLanguageLoader } from '@/vdb/hooks/use-ui-language-loader.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@lingui/react/macro';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { uiConfig } from 'virtual:vendure-ui-config';
 import { Button } from '../ui/button.js';
 import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
@@ -18,12 +19,24 @@ export function LanguageDialog() {
     const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
     const { humanReadableLanguageAndLocale } = useDisplayLocale();
     const availableCurrencyCodes = Object.values(CurrencyCode);
-    const { formatCurrency, formatLanguageName, formatRegionName, formatCurrencyName, formatDate } =
-        useLocalFormat();
+    const { formatCurrency, formatRegionName, formatCurrencyName, formatDate } = useLocalFormat();
     const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
 
-    const orderedAvailableLanguages = availableLanguages.slice().sort((a, b) => a.localeCompare(b));
-    const orderedAvailableLocales = availableLocales.slice().sort((a, b) => a.localeCompare(b));
+    // Map and sort languages by their formatted names
+    const sortedLanguages = useSortedLanguages(availableLanguages);
+
+    // Map and sort locales by their formatted region names
+    const sortedLocales = useMemo(
+        () =>
+            availableLocales
+                .map(code => ({
+                    code,
+                    label: formatRegionName(code),
+                }))
+                .sort((a, b) => a.label.localeCompare(b.label)),
+        [availableLocales, formatRegionName],
+    );
+
     const handleLanguageChange = async (value: string) => {
         setDisplayLanguage(value);
         void loadAndActivateLocale(value);
@@ -46,10 +59,10 @@ export function LanguageDialog() {
                             <SelectValue placeholder="Select a language" />
                         </SelectTrigger>
                         <SelectContent>
-                            {orderedAvailableLanguages.map(language => (
-                                <SelectItem key={language} value={language} className="flex gap-1">
-                                    <span className="uppercase text-muted-foreground">{language}</span>
-                                    <span>{formatLanguageName(language)}</span>
+                            {sortedLanguages.map(({ code, label }) => (
+                                <SelectItem key={code} value={code} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{code}</span>
+                                    <span>{label}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>
@@ -64,10 +77,10 @@ export function LanguageDialog() {
                             <SelectValue placeholder="Select a locale" />
                         </SelectTrigger>
                         <SelectContent>
-                            {orderedAvailableLocales.map(locale => (
-                                <SelectItem key={locale} value={locale} className="flex gap-1">
-                                    <span className="uppercase text-muted-foreground">{locale}</span>
-                                    <span>{formatRegionName(locale)}</span>
+                            {sortedLocales.map(({ code, label }) => (
+                                <SelectItem key={code} value={code} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{code}</span>
+                                    <span>{label}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>

package/src/lib/components/layout/manage-languages-dialog.tsx

@@ -17,6 +17,8 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
+import { globalLanguageCodes } from '@/vdb/utils/global-languages.js';
 import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Lock } from 'lucide-react';
@@ -67,35 +69,12 @@ const updateChannelDocument = graphql(`
     }
 `);
 
-// All possible language codes for global settings - includes more than what might be globally enabled
-const ALL_LANGUAGE_CODES = [
-    'en',
-    'es',
-    'fr',
-    'de',
-    'it',
-    'pt',
-    'nl',
-    'pl',
-    'ru',
-    'ja',
-    'zh',
-    'ko',
-    'ar',
-    'hi',
-    'sv',
-    'da',
-    'no',
-    'fi',
-];
-
 interface ManageLanguagesDialogProps {
     open: boolean;
     onClose: () => void;
 }
 
 export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogProps) {
-    const { formatLanguageName } = useLocalFormat();
     const { activeChannel } = useChannel();
     const { hasPermissions } = usePermissions();
     const queryClient = useQueryClient();
@@ -114,6 +93,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
     const [channelLanguages, setChannelLanguages] = useState<string[]>([]);
     const [channelDefaultLanguage, setChannelDefaultLanguage] = useState<string>('');
 
+    // Map and sort channel languages by their formatted names
+    const sortedChannelLanguages = useSortedLanguages(channelLanguages || []);
+
     // Queries
     const {
         data: globalSettingsData,
@@ -304,7 +286,7 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                         value={globalLanguages}
                                         onChange={handleGlobalLanguagesChange}
                                         multiple={true}
-                                        availableLanguageCodes={ALL_LANGUAGE_CODES}
+                                        availableLanguageCodes={globalLanguageCodes}
                                     />
                                 </div>
                                 <p className="text-xs text-muted-foreground">
@@ -362,7 +344,7 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                     )}
                                 </div>
 
-                                {channelLanguages.length > 0 && (
+                                {sortedChannelLanguages.length > 0 && (
                                     <div>
                                         <Label className="text-sm font-medium mb-2 block">
                                             <Trans>Default Language</Trans>
@@ -376,10 +358,9 @@ export function ManageLanguagesDialog({ open, onClose }: ManageLanguagesDialogPr
                                                 <SelectValue placeholder="Select default language" />
                                             </SelectTrigger>
                                             <SelectContent>
-                                                {channelLanguages.map(languageCode => (
-                                                    <SelectItem key={languageCode} value={languageCode}>
-                                                        {formatLanguageName(languageCode)} (
-                                                        {languageCode.toUpperCase()})
+                                                {sortedChannelLanguages.map(({ code, label }) => (
+                                                    <SelectItem key={code} value={code}>
+                                                        {label} ({code.toUpperCase()})
                                                     </SelectItem>
                                                 ))}
                                             </SelectContent>

package/src/lib/components/layout/nav-item-wrapper.tsx

@@ -79,7 +79,7 @@ export function NavItemWrapper({
                 >
                     <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                         <PopoverTrigger asChild>
-                            <DevModeButton className={`h-6 w-6`} />
+                            <DevModeButton className={`h-5 w-5 top-0 end-0`} />
                         </PopoverTrigger>
                         <PopoverContent className="w-48 p-3">
                             <div className="space-y-2">

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -13,6 +13,7 @@ import {
     PaginationPrevious,
 } from '@/vdb/components/ui/pagination.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { ActionBarItem, PageActionBar } from '@/vdb/framework/layout-engine/page-layout.js';
 import { api } from '@/vdb/graphql/api.js';
 import { assetFragment, AssetFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
@@ -357,9 +358,13 @@ export function AssetGallery({
                                 <SelectItem value={AssetType.BINARY}>Binary</SelectItem>
                             </SelectContent>
                         </Select>
-                        <Button onClick={openFileDialog} className="whitespace-nowrap">
-                            <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
-                        </Button>
+                        <PageActionBar>
+                            <ActionBarItem itemId="upload-assets-button">
+                                <Button onClick={openFileDialog} className="whitespace-nowrap">
+                                    <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
+                                </Button>
+                            </ActionBarItem>
+                        </PageActionBar>
                     </div>
 
                     {hasTags && (

package/src/lib/components/shared/configurable-operation-multi-selector.tsx

@@ -94,17 +94,17 @@ type QueryData = {
  * ```
  */
 export function ConfigurableOperationMultiSelector({
-                                                       value,
-                                                       onChange,
-                                                       queryDocument,
-                                                       queryOptions,
-                                                       queryKey,
-                                                       dataPath,
-                                                       buttonText,
-                                                       dropdownTitle,
-                                                       emptyText = 'No options found',
-                                                       showEnhancedDropdown = true,
-                                                   }: Readonly<ConfigurableOperationMultiSelectorProps>) {
+    value,
+    onChange,
+    queryDocument,
+    queryOptions,
+    queryKey,
+    dataPath,
+    buttonText,
+    dropdownTitle,
+    emptyText = 'No options found',
+    showEnhancedDropdown = true,
+}: Readonly<ConfigurableOperationMultiSelectorProps>) {
     const { data } = useQuery<QueryData>(
         queryOptions || {
             queryKey: [queryKey],
@@ -134,7 +134,7 @@ export function ConfigurableOperationMultiSelector({
                 code: operation.code,
                 arguments: operationDef.args.map(arg => ({
                     name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : arg.list ? '[]' : '',
                 })),
             },
         ]);
@@ -195,10 +195,8 @@ export function ConfigurableOperationMultiSelector({
                                                 onCombinationModeChange(index, newValue)
                                             }
                                             name={''}
-                                            ref={() => {
-                                            }}
-                                            onBlur={() => {
-                                            }}
+                                            ref={() => {}}
+                                            onBlur={() => {}}
                                             position={index}
                                         />
                                     </div>

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

@@ -10,6 +10,7 @@ import {
 } from '@/vdb/components/ui/form.js';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
+import { ConfigurableFieldDef } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
@@ -20,7 +21,7 @@ import { Control } from 'react-hook-form';
 import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
 import { TranslatableFormField } from './translatable-form-field.js';
 
-type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
+type CustomFieldConfig = Omit<ResultOf<typeof customFieldConfigFragment>, '__typename'>;
 
 interface CustomFieldsFormProps {
     entityType: string;
@@ -72,7 +73,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) {
@@ -120,8 +121,8 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
 }
 
 interface CustomFieldItemProps {
-    fieldDef: CustomFieldConfig;
-    control: Control<any, any>;
+    fieldDef: ConfigurableFieldDef;
+    control: Control<any>;
     fieldName: string;
 }
 
@@ -130,14 +131,19 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
         settings: { displayLanguage },
     } = useUserSettings();
 
-    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+    const getTranslation = (
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => {
+        if (typeof input === 'string') {
+            return input;
+        }
         return input?.find(t => t.languageCode === displayLanguage)?.value;
     };
     const hasCustomFormComponent = fieldDef.ui?.component;
     const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
     const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
     const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
-    const isReadonly = fieldDef.readonly ?? false;
+    const isReadonly = (fieldDef as CustomFieldConfig).readonly ?? false;
 
     // For locale fields, always use TranslatableFormField regardless of custom components
     if (isLocaleField) {
@@ -212,7 +218,6 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
                                             <StructFormInput {...inputField} fieldDef={fieldDef} />
                                         )}
                                         defaultValue={{}} // Empty struct object as default
-                                        isFullWidth={true} // Structs should always be full-width
                                     />
                                 </FormControl>
                                 <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
@@ -266,9 +271,9 @@ function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldI
 }
 
 interface CustomFieldFormItemProps {
-    fieldDef: CustomFieldConfig;
+    fieldDef: ConfigurableFieldDef;
     getTranslation: (
-        input: Array<{ languageCode: string; value: string }> | null | undefined,
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
     ) => string | undefined;
     fieldName: string;
     children: React.ReactNode;

package/src/lib/components/shared/language-selector.tsx

@@ -1,8 +1,9 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
 import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { MultiSelect } from './multi-select.js';
 
 const availableGlobalLanguages = graphql(`
@@ -26,14 +27,21 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
         queryFn: () => api.query(availableGlobalLanguages),
         staleTime: 1000 * 60 * 5, // 5 minutes
     });
-    const { formatLanguageName } = useLocalFormat();
     const { value, onChange, multiple, availableLanguageCodes } = props;
     const { t } = useLingui();
 
-    const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
-        value: language,
-        label: formatLanguageName(language),
-    }));
+    const sortedLanguages = useSortedLanguages(
+        availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? undefined,
+    );
+
+    const items = useMemo(
+        () =>
+            sortedLanguages.map(language => ({
+                value: language.code,
+                label: language.label,
+            })),
+        [sortedLanguages],
+    );
 
     return (
         <MultiSelect

package/src/lib/components/shared/multi-select.tsx

@@ -127,7 +127,7 @@ export function MultiSelect<T extends boolean>(props: MultiSelectProps<T>) {
     return (
         <Popover>
             <PopoverTrigger asChild>{renderTrigger()}</PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0" side="bottom" align="start">
+            <PopoverContent className="w-[200px] p-0" side="bottom" align="start" onWheel={(e) => e.stopPropagation()}>
                 {(showSearch === true || items.length > 10) && (
                     <div className="p-2">
                         <Input

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -34,7 +34,7 @@ export function NavigationConfirmation(props: Readonly<NavigationConfirmationPro
             return props.form.formState.isDirty;
         },
         withResolver: true,
-        enableBeforeUnload: true,
+        enableBeforeUnload: () => props.form.formState.isDirty,
     });
     return (
         <Dialog open={status === 'blocked'} onOpenChange={reset}>

package/src/lib/components/shared/table-cell/order-table-cell-components.tsx

@@ -47,10 +47,10 @@ export const RichTextDescriptionCell: DataTableCellComponent<{ description: stri
 
     // Strip HTML tags and decode HTML entities
     const textContent = useMemo(() => {
-        const stripped = value?.replace(/<[^>]*>/g, '') || '';
-        const textArea = document.createElement('textarea');
-        textArea.innerHTML = stripped;
-        return textArea.value;
+        if (!value) return '';
+        const div = document.createElement('div');
+        div.innerHTML = value;
+        return div.textContent ?? '';
     }, [value]);
 
     const shortLength = 100;

package/src/lib/components/ui/carousel.tsx

@@ -6,8 +6,8 @@ import useEmblaCarousel, {
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
-import { Button } from "@/vdb/components/ui/button"
+import { cn } from "@/vdb/lib/utils.js"
+import { Button } from "@/vdb/components/ui/button.js"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package/src/lib/components/ui/chart.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const

package/src/lib/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function ContextMenu({
   ...props

package/src/lib/components/ui/drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Drawer({
   ...props

package/src/lib/components/ui/grid-layout.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { cn } from "@/vdb/lib/utils";
+import { cn } from "@/vdb/lib/utils.js";
 
 export interface GridLayout {
     x: number;

package/src/lib/components/ui/input-group.tsx

@@ -127,6 +127,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>)
                 'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
                 className,
             )}
+            value={props.value}
             {...props}
         />
     );

package/src/lib/components/ui/input-otp.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 import { MinusIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function InputOTP({
   className,

package/src/lib/components/ui/menubar.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Menubar({
   className,

package/src/lib/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function NavigationMenu({
   className,