@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/cms/client/components/forms/file-upload.cjs

@@ -3,7 +3,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const sonner = require('sonner');
+const context = require('@btst/stack/context');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const form = require('../../../../../../../ui/src/components/form.cjs');
@@ -27,6 +27,9 @@ function CMSFileUpload({
     ...safeFieldProps
   } = fieldProps;
   const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides("cms");
   const [isUploading, setIsUploading] = React.useState(false);
   const [previewUrl, setPreviewUrl] = React.useState(
     field.value || null
@@ -42,7 +45,9 @@ function CMSFileUpload({
       const file = e.target.files?.[0];
       if (!file) return;
       if (!file.type.startsWith("image/")) {
-        sonner.toast.error("Please select an image file");
+        notify.error(
+          localization?.CMS_EDITOR_FILE_INVALID_TYPE ?? t("cms.editor.fileInvalidType", "Please select an image file")
+        );
         return;
       }
       setIsUploading(true);
@@ -52,12 +57,14 @@ function CMSFileUpload({
         field.onChange(url);
       } catch (error) {
         console.error("Image upload failed:", error);
-        sonner.toast.error("Failed to upload image");
+        notify.error(
+          localization?.CMS_EDITOR_FILE_UPLOAD_FAILED ?? t("cms.editor.fileUploadFailed", "Failed to upload image")
+        );
       } finally {
         setIsUploading(false);
       }
     },
-    [field, uploadImage]
+    [field, uploadImage, notify, localization, t]
   );
   const handleRemove = React.useCallback(() => {
     setPreviewUrl(null);

package/dist/packages/stack/src/plugins/cms/client/components/forms/file-upload.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback } from 'react';
-import { toast } from 'sonner';
+import { useTranslate, useNotify, usePluginOverrides } from '@btst/stack/context';
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { FormItem, FormControl, FormMessage } from '../../../../../../../ui/src/components/form.mjs';
@@ -25,6 +25,9 @@ function CMSFileUpload({
     ...safeFieldProps
   } = fieldProps;
   const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization } = usePluginOverrides("cms");
   const [isUploading, setIsUploading] = useState(false);
   const [previewUrl, setPreviewUrl] = useState(
     field.value || null
@@ -40,7 +43,9 @@ function CMSFileUpload({
       const file = e.target.files?.[0];
       if (!file) return;
       if (!file.type.startsWith("image/")) {
-        toast.error("Please select an image file");
+        notify.error(
+          localization?.CMS_EDITOR_FILE_INVALID_TYPE ?? t("cms.editor.fileInvalidType", "Please select an image file")
+        );
         return;
       }
       setIsUploading(true);
@@ -50,12 +55,14 @@ function CMSFileUpload({
         field.onChange(url);
       } catch (error) {
         console.error("Image upload failed:", error);
-        toast.error("Failed to upload image");
+        notify.error(
+          localization?.CMS_EDITOR_FILE_UPLOAD_FAILED ?? t("cms.editor.fileUploadFailed", "Failed to upload image")
+        );
       } finally {
         setIsUploading(false);
       }
     },
-    [field, uploadImage]
+    [field, uploadImage, notify, localization, t]
   );
   const handleRemove = useCallback(() => {
     setPreviewUrl(null);

package/dist/packages/stack/src/plugins/cms/client/components/forms/relation-field.cjs

@@ -3,10 +3,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const reactQuery = require('@tanstack/react-query');
-const client = require('@btst/stack/plugins/client');
 const context = require('@btst/stack/context');
-const plugins_cms_queryKeys = require('../../../../../../../../plugins/cms/query-keys.cjs');
 const multiSelect = require('../../../../../../../ui/src/components/multi-select.cjs');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const LucideIcons = require('lucide-react');
@@ -16,14 +13,6 @@ const label = require('../../../../../../../ui/src/components/label.cjs');
 const textarea = require('../../../../../../../ui/src/components/textarea.cjs');
 const cmsHooks = require('../../hooks/cms-hooks.cjs');
 
-const RELATION_DETAIL_QUERY_OPTS = {
-  retry: false,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-  staleTime: 1e3 * 60 * 5,
-  gcTime: 1e3 * 60 * 10
-};
 function RelationField({
   field,
   fieldConfigItem,
@@ -31,22 +20,12 @@ function RelationField({
   isRequired,
   relation
 }) {
+  const t = context.useTranslate();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false);
   const [newItemName, setNewItemName] = React.useState("");
   const [newItemDescription, setNewItemDescription] = React.useState("");
   const [createError, setCreateError] = React.useState(null);
-  const { apiBaseURL, apiBasePath, headers } = context.usePluginOverrides("cms");
-  const listClient = React.useMemo(
-    () => client.createApiClient({
-      baseURL: apiBaseURL,
-      basePath: apiBasePath
-    }),
-    [apiBaseURL, apiBasePath]
-  );
-  const cmsQueries = React.useMemo(
-    () => plugins_cms_queryKeys.createCMSQueryKeys(listClient, headers),
-    [listClient, headers]
-  );
+  const { localization } = context.usePluginOverrides("cms");
   const isSingleSelect = relation.type === "belongsTo";
   const normalizedValue = React.useMemo(() => {
     if (!field.value) return [];
@@ -59,76 +38,26 @@ function RelationField({
     }
     return field.value || [];
   }, [field.value, isSingleSelect]);
-  const { items: availableItems, isLoading } = cmsHooks.useContent(relation.targetType, {
-    limit: 500
-  });
-  const missingDetailIds = React.useMemo(() => {
-    const loadedIds = new Set(availableItems.map((i) => i.id));
-    return normalizedValue.map((v) => v.id).filter((id) => id.length > 0 && !loadedIds.has(id));
-  }, [availableItems, normalizedValue]);
-  const hydrationResult = reactQuery.useQueries({
-    queries: missingDetailIds.map((id) => ({
-      ...cmsQueries.cmsContent.detail(relation.targetType, id),
-      ...RELATION_DETAIL_QUERY_OPTS,
-      enabled: Boolean(relation.targetType && id)
-    })),
-    combine: (results) => ({
-      data: results.map(
-        (r) => r.data
-      ),
-      isHydrating: results.some((r) => r.isFetching)
-    })
-  });
-  const isHydratingLabels = hydrationResult.isHydrating;
-  const itemById = React.useMemo(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const it of availableItems) {
-      m.set(it.id, it);
-    }
-    for (let i = 0; i < missingDetailIds.length; i++) {
-      const row = hydrationResult.data[i];
-      if (row?.id) {
-        m.set(row.id, row);
-      }
-    }
-    return m;
-  }, [availableItems, missingDetailIds, hydrationResult.data]);
-  const selectedOptions = normalizedValue.map((v) => {
-    const item = itemById.get(v.id);
-    if (item) {
-      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-      return {
-        value: item.id,
-        label: String(displayValue)
-      };
-    }
-    return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
+  const { displayField } = relation;
+  const getOptionLabel = React.useCallback(
+    (item) => String(
+      item.parsedData?.[displayField] || item.slug
+    ),
+    [displayField]
+  );
+  const select = cmsHooks.useContentOptions({
+    targetType: relation.targetType,
+    value: normalizedValue.map((v) => v.id),
+    getOptionLabel
   });
-  const options = React.useMemo(() => {
-    const merged = [
-      ...availableItems
-    ];
-    const seen = new Set(merged.map((x) => x.id));
-    for (let i = 0; i < missingDetailIds.length; i++) {
-      const row = hydrationResult.data[i];
-      if (row?.id && !seen.has(row.id)) {
-        merged.push(row);
-        seen.add(row.id);
-      }
-    }
-    return merged.map((item) => {
-      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-      return {
-        value: item.id,
-        label: String(displayValue)
-      };
-    });
-  }, [
-    availableItems,
-    hydrationResult.data,
-    missingDetailIds,
-    relation.displayField
-  ]);
+  const options = select.options.map((option) => ({
+    value: option.value,
+    label: option.label
+  }));
+  const selectedOptions = select.selectedOptions.map((option) => ({
+    value: option.value,
+    label: option.label
+  }));
   const createMutation = cmsHooks.useCreateContent(relation.targetType);
   const handleChange = React.useCallback(
     (newOptions) => {
@@ -166,7 +95,10 @@ function RelationField({
       setNewItemDescription("");
       setIsCreateDialogOpen(false);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to create item. Please try again.";
+      const message = error instanceof Error ? error.message : localization?.CMS_RELATION_CREATE_ERROR ?? t(
+        "cms.relations.createError",
+        "Failed to create item. Please try again."
+      );
       setCreateError(message);
     }
   };
@@ -181,6 +113,7 @@ function RelationField({
     },
     [normalizedValue, field, isSingleSelect]
   );
+  const displayFieldLabel = relation.displayField.charAt(0).toUpperCase() + relation.displayField.slice(1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { children: [
       label$1,
@@ -193,14 +126,18 @@ function RelationField({
           value: selectedOptions,
           onChange: handleChange,
           options,
-          placeholder: isLoading || isHydratingLabels ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
-          disabled: isLoading || isHydratingLabels,
+          placeholder: select.isLoading ? localization?.CMS_RELATION_LOADING ?? t("cms.relations.loading", "Loading...") : (isSingleSelect ? localization?.CMS_RELATION_SELECT_PLACEHOLDER ?? t(
+            "cms.relations.selectPlaceholder",
+            "Select {targetType}..."
+          ) : localization?.CMS_RELATION_SELECT_PLACEHOLDER_MULTI ?? t(
+            "cms.relations.selectPlaceholderMulti",
+            "Select {targetType}(s)..."
+          )).replace("{targetType}", relation.targetType),
+          disabled: select.isLoading,
           hidePlaceholderWhenSelected: true,
-          emptyIndicator: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm text-muted-foreground py-4", children: [
-            "No ",
-            relation.targetType,
-            " items found"
-          ] }),
+          commandProps: { shouldFilter: false },
+          inputProps: { onValueChange: select.setSearch },
+          emptyIndicator: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground py-4", children: (localization?.CMS_RELATION_EMPTY ?? t("cms.relations.empty", "No {targetType} items found")).replace("{targetType}", relation.targetType) }),
           maxSelected: isSingleSelect ? 1 : void 0,
           className: "min-h-10"
         }
@@ -213,33 +150,36 @@ function RelationField({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogTitle, { children: [
-                "Create New ",
-                relation.targetType
-              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: (localization?.CMS_RELATION_CREATE_TITLE ?? t("cms.relations.createTitle", "Create New {targetType}")).replace("{targetType}", relation.targetType) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 py-4", children: [
                 createError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: createError }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "newItemName", children: relation.displayField.charAt(0).toUpperCase() + relation.displayField.slice(1) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "newItemName", children: displayFieldLabel }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     input.Input,
                     {
                       id: "newItemName",
                       value: newItemName,
                       onChange: (e) => setNewItemName(e.target.value),
-                      placeholder: `Enter ${relation.displayField}...`
+                      placeholder: (localization?.CMS_RELATION_NAME_PLACEHOLDER ?? t("cms.relations.namePlaceholder", "Enter {field}...")).replace("{field}", relation.displayField)
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "newItemDescription", children: "Description (optional)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "newItemDescription", children: localization?.CMS_RELATION_DESCRIPTION_LABEL ?? t(
+                    "cms.relations.descriptionLabel",
+                    "Description (optional)"
+                  ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     textarea.Textarea,
                     {
                       id: "newItemDescription",
                       value: newItemDescription,
                       onChange: (e) => setNewItemDescription(e.target.value),
-                      placeholder: "Enter description...",
+                      placeholder: localization?.CMS_RELATION_DESCRIPTION_PLACEHOLDER ?? t(
+                        "cms.relations.descriptionPlaceholder",
+                        "Enter description..."
+                      ),
                       rows: 3
                     }
                   )
@@ -251,7 +191,7 @@ function RelationField({
                       type: "button",
                       variant: "outline",
                       onClick: () => setIsCreateDialogOpen(false),
-                      children: "Cancel"
+                      children: localization?.CMS_BUTTON_CANCEL ?? t("cms.common.cancel", "Cancel")
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -260,7 +200,7 @@ function RelationField({
                       type: "button",
                       onClick: handleCreateItem,
                       disabled: !newItemName.trim() || createMutation.isPending,
-                      children: createMutation.isPending ? "Creating..." : "Create"
+                      children: createMutation.isPending ? localization?.CMS_RELATION_CREATING ?? t("cms.relations.creating", "Creating...") : localization?.CMS_RELATION_CREATE_BUTTON ?? t("cms.relations.createButton", "Create")
                     }
                   )
                 ] })

package/dist/packages/stack/src/plugins/cms/client/components/forms/relation-field.mjs

@@ -1,10 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
-import { useQueries } from '@tanstack/react-query';
-import { createApiClient } from '@btst/stack/plugins/client';
-import { usePluginOverrides } from '@btst/stack/context';
-import { createCMSQueryKeys } from '../../../../../../../../plugins/cms/query-keys.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
 import MultipleSelector from '../../../../../../../ui/src/components/multi-select.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Plus, X } from 'lucide-react';
@@ -12,16 +9,8 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { Label } from '../../../../../../../ui/src/components/label.mjs';
 import { Textarea } from '../../../../../../../ui/src/components/textarea.mjs';
-import { useContent, useCreateContent } from '../../hooks/cms-hooks.mjs';
+import { useContentOptions, useCreateContent } from '../../hooks/cms-hooks.mjs';
 
-const RELATION_DETAIL_QUERY_OPTS = {
-  retry: false,
-  refetchOnWindowFocus: false,
-  refetchOnMount: false,
-  refetchOnReconnect: false,
-  staleTime: 1e3 * 60 * 5,
-  gcTime: 1e3 * 60 * 10
-};
 function RelationField({
   field,
   fieldConfigItem,
@@ -29,22 +18,12 @@ function RelationField({
   isRequired,
   relation
 }) {
+  const t = useTranslate();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [newItemName, setNewItemName] = useState("");
   const [newItemDescription, setNewItemDescription] = useState("");
   const [createError, setCreateError] = useState(null);
-  const { apiBaseURL, apiBasePath, headers } = usePluginOverrides("cms");
-  const listClient = useMemo(
-    () => createApiClient({
-      baseURL: apiBaseURL,
-      basePath: apiBasePath
-    }),
-    [apiBaseURL, apiBasePath]
-  );
-  const cmsQueries = useMemo(
-    () => createCMSQueryKeys(listClient, headers),
-    [listClient, headers]
-  );
+  const { localization } = usePluginOverrides("cms");
   const isSingleSelect = relation.type === "belongsTo";
   const normalizedValue = useMemo(() => {
     if (!field.value) return [];
@@ -57,76 +36,26 @@ function RelationField({
     }
     return field.value || [];
   }, [field.value, isSingleSelect]);
-  const { items: availableItems, isLoading } = useContent(relation.targetType, {
-    limit: 500
-  });
-  const missingDetailIds = useMemo(() => {
-    const loadedIds = new Set(availableItems.map((i) => i.id));
-    return normalizedValue.map((v) => v.id).filter((id) => id.length > 0 && !loadedIds.has(id));
-  }, [availableItems, normalizedValue]);
-  const hydrationResult = useQueries({
-    queries: missingDetailIds.map((id) => ({
-      ...cmsQueries.cmsContent.detail(relation.targetType, id),
-      ...RELATION_DETAIL_QUERY_OPTS,
-      enabled: Boolean(relation.targetType && id)
-    })),
-    combine: (results) => ({
-      data: results.map(
-        (r) => r.data
-      ),
-      isHydrating: results.some((r) => r.isFetching)
-    })
-  });
-  const isHydratingLabels = hydrationResult.isHydrating;
-  const itemById = useMemo(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const it of availableItems) {
-      m.set(it.id, it);
-    }
-    for (let i = 0; i < missingDetailIds.length; i++) {
-      const row = hydrationResult.data[i];
-      if (row?.id) {
-        m.set(row.id, row);
-      }
-    }
-    return m;
-  }, [availableItems, missingDetailIds, hydrationResult.data]);
-  const selectedOptions = normalizedValue.map((v) => {
-    const item = itemById.get(v.id);
-    if (item) {
-      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-      return {
-        value: item.id,
-        label: String(displayValue)
-      };
-    }
-    return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
+  const { displayField } = relation;
+  const getOptionLabel = useCallback(
+    (item) => String(
+      item.parsedData?.[displayField] || item.slug
+    ),
+    [displayField]
+  );
+  const select = useContentOptions({
+    targetType: relation.targetType,
+    value: normalizedValue.map((v) => v.id),
+    getOptionLabel
   });
-  const options = useMemo(() => {
-    const merged = [
-      ...availableItems
-    ];
-    const seen = new Set(merged.map((x) => x.id));
-    for (let i = 0; i < missingDetailIds.length; i++) {
-      const row = hydrationResult.data[i];
-      if (row?.id && !seen.has(row.id)) {
-        merged.push(row);
-        seen.add(row.id);
-      }
-    }
-    return merged.map((item) => {
-      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-      return {
-        value: item.id,
-        label: String(displayValue)
-      };
-    });
-  }, [
-    availableItems,
-    hydrationResult.data,
-    missingDetailIds,
-    relation.displayField
-  ]);
+  const options = select.options.map((option) => ({
+    value: option.value,
+    label: option.label
+  }));
+  const selectedOptions = select.selectedOptions.map((option) => ({
+    value: option.value,
+    label: option.label
+  }));
   const createMutation = useCreateContent(relation.targetType);
   const handleChange = useCallback(
     (newOptions) => {
@@ -164,7 +93,10 @@ function RelationField({
       setNewItemDescription("");
       setIsCreateDialogOpen(false);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to create item. Please try again.";
+      const message = error instanceof Error ? error.message : localization?.CMS_RELATION_CREATE_ERROR ?? t(
+        "cms.relations.createError",
+        "Failed to create item. Please try again."
+      );
       setCreateError(message);
     }
   };
@@ -179,6 +111,7 @@ function RelationField({
     },
     [normalizedValue, field, isSingleSelect]
   );
+  const displayFieldLabel = relation.displayField.charAt(0).toUpperCase() + relation.displayField.slice(1);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs(Label, { children: [
       label,
@@ -191,14 +124,18 @@ function RelationField({
           value: selectedOptions,
           onChange: handleChange,
           options,
-          placeholder: isLoading || isHydratingLabels ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
-          disabled: isLoading || isHydratingLabels,
+          placeholder: select.isLoading ? localization?.CMS_RELATION_LOADING ?? t("cms.relations.loading", "Loading...") : (isSingleSelect ? localization?.CMS_RELATION_SELECT_PLACEHOLDER ?? t(
+            "cms.relations.selectPlaceholder",
+            "Select {targetType}..."
+          ) : localization?.CMS_RELATION_SELECT_PLACEHOLDER_MULTI ?? t(
+            "cms.relations.selectPlaceholderMulti",
+            "Select {targetType}(s)..."
+          )).replace("{targetType}", relation.targetType),
+          disabled: select.isLoading,
           hidePlaceholderWhenSelected: true,
-          emptyIndicator: /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-muted-foreground py-4", children: [
-            "No ",
-            relation.targetType,
-            " items found"
-          ] }),
+          commandProps: { shouldFilter: false },
+          inputProps: { onValueChange: select.setSearch },
+          emptyIndicator: /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground py-4", children: (localization?.CMS_RELATION_EMPTY ?? t("cms.relations.empty", "No {targetType} items found")).replace("{targetType}", relation.targetType) }),
           maxSelected: isSingleSelect ? 1 : void 0,
           className: "min-h-10"
         }
@@ -211,33 +148,36 @@ function RelationField({
           children: [
             /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "icon", children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }) }),
             /* @__PURE__ */ jsxs(DialogContent, { children: [
-              /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { children: [
-                "Create New ",
-                relation.targetType
-              ] }) }),
+              /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: (localization?.CMS_RELATION_CREATE_TITLE ?? t("cms.relations.createTitle", "Create New {targetType}")).replace("{targetType}", relation.targetType) }) }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
                 createError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: createError }),
                 /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "newItemName", children: relation.displayField.charAt(0).toUpperCase() + relation.displayField.slice(1) }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "newItemName", children: displayFieldLabel }),
                   /* @__PURE__ */ jsx(
                     Input,
                     {
                       id: "newItemName",
                       value: newItemName,
                       onChange: (e) => setNewItemName(e.target.value),
-                      placeholder: `Enter ${relation.displayField}...`
+                      placeholder: (localization?.CMS_RELATION_NAME_PLACEHOLDER ?? t("cms.relations.namePlaceholder", "Enter {field}...")).replace("{field}", relation.displayField)
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "newItemDescription", children: "Description (optional)" }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "newItemDescription", children: localization?.CMS_RELATION_DESCRIPTION_LABEL ?? t(
+                    "cms.relations.descriptionLabel",
+                    "Description (optional)"
+                  ) }),
                   /* @__PURE__ */ jsx(
                     Textarea,
                     {
                       id: "newItemDescription",
                       value: newItemDescription,
                       onChange: (e) => setNewItemDescription(e.target.value),
-                      placeholder: "Enter description...",
+                      placeholder: localization?.CMS_RELATION_DESCRIPTION_PLACEHOLDER ?? t(
+                        "cms.relations.descriptionPlaceholder",
+                        "Enter description..."
+                      ),
                       rows: 3
                     }
                   )
@@ -249,7 +189,7 @@ function RelationField({
                       type: "button",
                       variant: "outline",
                       onClick: () => setIsCreateDialogOpen(false),
-                      children: "Cancel"
+                      children: localization?.CMS_BUTTON_CANCEL ?? t("cms.common.cancel", "Cancel")
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -258,7 +198,7 @@ function RelationField({
                       type: "button",
                       onClick: handleCreateItem,
                       disabled: !newItemName.trim() || createMutation.isPending,
-                      children: createMutation.isPending ? "Creating..." : "Create"
+                      children: createMutation.isPending ? localization?.CMS_RELATION_CREATING ?? t("cms.relations.creating", "Creating...") : localization?.CMS_RELATION_CREATE_BUTTON ?? t("cms.relations.createButton", "Create")
                     }
                   )
                 ] })