@tecof/theme-editor 0.0.23 → 0.0.25

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactElement } from 'react';
+import react__default, { ReactElement, Component, ReactNode, ErrorInfo } from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -578,6 +578,39 @@ declare const createColorField: (options?: ColorFieldOptions) => {
     render: ({ value, onChange, readOnly, field, name, id }: ColorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface FieldErrorBoundaryProps {
+    /** The field name (for error reporting) */
+    fieldName?: string;
+    /** Fallback UI to show when a field crashes */
+    fallback?: ReactNode;
+    /** Optional error callback */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    children: ReactNode;
+}
+interface FieldErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary for Puck custom fields.
+ * Catches render errors in child components and shows a friendly fallback
+ * instead of crashing the entire editor.
+ *
+ * @example
+ * ```tsx
+ * <FieldErrorBoundary fieldName="title">
+ *   <LanguageField ... />
+ * </FieldErrorBoundary>
+ * ```
+ */
+declare class FieldErrorBoundary extends Component<FieldErrorBoundaryProps, FieldErrorBoundaryState> {
+    constructor(props: FieldErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): FieldErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -586,4 +619,4 @@ declare function generateCSSVariables(theme: ThemeConfig): string;
 declare function getDefaultTheme(): ThemeConfig;
 declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
 
-export { type ApiResponse, CodeEditorField, ColorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };
+export { type ApiResponse, CodeEditorField, ColorField, EditorField, FieldErrorBoundary, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactElement } from 'react';
+import react__default, { ReactElement, Component, ReactNode, ErrorInfo } from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -578,6 +578,39 @@ declare const createColorField: (options?: ColorFieldOptions) => {
     render: ({ value, onChange, readOnly, field, name, id }: ColorFieldProps) => react_jsx_runtime.JSX.Element;
 };
 
+interface FieldErrorBoundaryProps {
+    /** The field name (for error reporting) */
+    fieldName?: string;
+    /** Fallback UI to show when a field crashes */
+    fallback?: ReactNode;
+    /** Optional error callback */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    children: ReactNode;
+}
+interface FieldErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary for Puck custom fields.
+ * Catches render errors in child components and shows a friendly fallback
+ * instead of crashing the entire editor.
+ *
+ * @example
+ * ```tsx
+ * <FieldErrorBoundary fieldName="title">
+ *   <LanguageField ... />
+ * </FieldErrorBoundary>
+ * ```
+ */
+declare class FieldErrorBoundary extends Component<FieldErrorBoundaryProps, FieldErrorBoundaryState> {
+    constructor(props: FieldErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): FieldErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -586,4 +619,4 @@ declare function generateCSSVariables(theme: ThemeConfig): string;
 declare function getDefaultTheme(): ThemeConfig;
 declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
 
-export { type ApiResponse, CodeEditorField, ColorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };
+export { type ApiResponse, CodeEditorField, ColorField, EditorField, FieldErrorBoundary, type HSL, LanguageField, type LanguageFieldValue, LinkField, type LinkFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofPicture, type TecofPictureProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createColorField, createEditorField, createLanguageField, createLinkField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };

package/dist/index.js

@@ -741,7 +741,7 @@ var Icon = React__default.forwardRef(
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = React__default.forwardRef(
+  const Component2 = React__default.forwardRef(
     ({ className, ...props }, ref) => React__default.createElement(Icon, {
       ref,
       iconNode,
@@ -753,8 +753,8 @@ var createLucideIcon = (iconName, iconNode) => {
       ...props
     })
   );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
+  Component2.displayName = toPascalCase(iconName);
+  return Component2;
 };
 
 // node_modules/lucide-react/dist/esm/icons/check.js
@@ -936,6 +936,50 @@ var __iconNode21 = [
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 var X = createLucideIcon("x", __iconNode21);
+var FieldErrorBoundary = class extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.handleRetry = () => {
+      this.setState({ hasError: false, error: null });
+    };
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error2) {
+    return { hasError: true, error: error2 };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.error(
+      `[TecofEditor] Field "${this.props.fieldName || "unknown"}" crashed:`,
+      error2,
+      errorInfo
+    );
+    this.props.onError?.(error2, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-field-error-boundary", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-field-error-icon", children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tecof-field-error-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tecof-field-error-title", children: "Bu alan y\xFCklenemedi" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tecof-field-error-detail", children: this.state.error?.message || "Beklenmeyen bir hata olu\u015Ftu" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "tecof-field-error-retry",
+            onClick: this.handleRetry,
+            children: "Tekrar Dene"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
 var LanguageTabBar = ({
   languages,
   defaultLanguage,
@@ -963,6 +1007,73 @@ var FieldLoading = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "te
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tecof-lang-loading-dot" }),
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tecof-lang-loading-dot" })
 ] });
+var StableInput = ({
+  value: externalValue,
+  onChange,
+  disabled,
+  placeholder,
+  className
+}) => {
+  const [localValue, setLocalValue] = React__default.useState(externalValue);
+  const lastEmitted = React__default.useRef(externalValue);
+  React__default.useEffect(() => {
+    if (externalValue !== lastEmitted.current) {
+      setLocalValue(externalValue);
+      lastEmitted.current = externalValue;
+    }
+  }, [externalValue]);
+  const handleChange = (e3) => {
+    const val = e3.target.value;
+    setLocalValue(val);
+    lastEmitted.current = val;
+    onChange(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      value: localValue,
+      onChange: handleChange,
+      disabled,
+      placeholder,
+      className
+    }
+  );
+};
+var StableTextarea = ({
+  value: externalValue,
+  onChange,
+  disabled,
+  placeholder,
+  className,
+  rows
+}) => {
+  const [localValue, setLocalValue] = React__default.useState(externalValue);
+  const lastEmitted = React__default.useRef(externalValue);
+  React__default.useEffect(() => {
+    if (externalValue !== lastEmitted.current) {
+      setLocalValue(externalValue);
+      lastEmitted.current = externalValue;
+    }
+  }, [externalValue]);
+  const handleChange = (e3) => {
+    const val = e3.target.value;
+    setLocalValue(val);
+    lastEmitted.current = val;
+    onChange(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      value: localValue,
+      onChange: handleChange,
+      rows,
+      disabled,
+      placeholder,
+      className
+    }
+  );
+};
 var LanguageField = ({
   value,
   onChange,
@@ -984,19 +1095,24 @@ var LanguageField = ({
       return existing || { code, value: "" };
     });
   }, [value, merchantInfo]);
+  const valuesRef = React__default.useRef(values);
+  valuesRef.current = values;
+  const onChangeRef = React__default.useRef(onChange);
+  onChangeRef.current = onChange;
   const handleChange = React__default.useCallback((code, newVal) => {
-    const updated = [...values];
+    const current = valuesRef.current;
+    const updated = [...current];
     const idx = updated.findIndex((v2) => v2.code === code);
     if (idx >= 0) {
       updated[idx] = { ...updated[idx], value: newVal };
     } else {
       updated.push({ code, value: newVal });
     }
-    onChange(updated);
-  }, [values, onChange]);
+    onChangeRef.current(updated);
+  }, []);
   const getCurrentText = React__default.useCallback(() => {
-    return values.find((v2) => v2.code === activeTab)?.value || "";
-  }, [values, activeTab]);
+    return valuesRef.current.find((v2) => v2.code === activeTab)?.value || "";
+  }, [activeTab]);
   const handleFastFill = React__default.useCallback(() => {
     const text2 = getCurrentText();
     if (!text2) return;
@@ -1005,10 +1121,10 @@ var LanguageField = ({
       code,
       value: text2
     }));
-    onChange(updated);
+    onChangeRef.current(updated);
     setStatusMsg({ text: "T\xFCm dillere kopyaland\u0131", type: "success" });
     setTimeout(() => setStatusMsg(null), 2e3);
-  }, [getCurrentText, merchantInfo, onChange]);
+  }, [getCurrentText, merchantInfo]);
   const handleTranslate = React__default.useCallback(async () => {
     const text2 = getCurrentText();
     if (!text2 || !merchantInfo) return;
@@ -1019,7 +1135,7 @@ var LanguageField = ({
     try {
       const res2 = await apiClient.translate(text2, activeTab, otherLocales, isHtml);
       if (res2.success && Array.isArray(res2.data)) {
-        const updated = [...values];
+        const updated = [...valuesRef.current];
         for (const t2 of res2.data) {
           const idx = updated.findIndex((v2) => v2.code === t2.code);
           if (idx >= 0) {
@@ -1028,7 +1144,7 @@ var LanguageField = ({
             updated.push({ code: t2.code, value: t2.value });
           }
         }
-        onChange(updated);
+        onChangeRef.current(updated);
         setStatusMsg({ text: "\xC7eviri tamamland\u0131", type: "success" });
       } else {
         setStatusMsg({ text: res2.message || "\xC7eviri hatas\u0131", type: "error" });
@@ -1039,7 +1155,7 @@ var LanguageField = ({
       setTranslating(false);
       setTimeout(() => setStatusMsg(null), 3e3);
     }
-  }, [getCurrentText, merchantInfo, activeTab, values, onChange, apiClient, isHtml]);
+  }, [getCurrentText, merchantInfo, activeTab, apiClient, isHtml]);
   if (loading) return /* @__PURE__ */ jsxRuntime.jsx(FieldLoading, {});
   if (error2 && !merchantInfo) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-lang-error", children: error2 });
   if (!merchantInfo) return null;
@@ -1060,21 +1176,20 @@ var LanguageField = ({
       if (activeTab !== code) return null;
       const currentValue = values.find((v2) => v2.code === code)?.value || "";
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-lang-input-wrapper", children: isTextarea ? /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
+        StableTextarea,
         {
           value: currentValue,
-          onChange: (e3) => handleChange(code, e3.target.value),
+          onChange: (val) => handleChange(code, val),
           rows: textareaRows,
           placeholder: placeholder || `${code.toUpperCase()} text...`,
           disabled: readOnly,
           className: "tecof-lang-input tecof-lang-textarea"
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        StableInput,
         {
-          type: "text",
           value: currentValue,
-          onChange: (e3) => handleChange(code, e3.target.value),
+          onChange: (val) => handleChange(code, val),
           placeholder: placeholder || `${code.toUpperCase()} text...`,
           disabled: readOnly,
           className: "tecof-lang-input"
@@ -1122,7 +1237,7 @@ var createLanguageField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       LanguageField,
       {
         field,
@@ -1133,7 +1248,7 @@ var createLanguageField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 var createExtensions = () => [
@@ -1367,16 +1482,21 @@ var EditorField = ({
       return existing || { code, value: "" };
     });
   }, [value, merchantInfo]);
+  const valuesRef = React__default.useRef(values);
+  valuesRef.current = values;
+  const onChangeRef = React__default.useRef(onChange);
+  onChangeRef.current = onChange;
   const handleChange = React__default.useCallback((code, html) => {
-    const updated = [...values];
+    const current = valuesRef.current;
+    const updated = [...current];
     const idx = updated.findIndex((v2) => v2.code === code);
     if (idx >= 0) {
       updated[idx] = { ...updated[idx], value: html };
     } else {
       updated.push({ code, value: html });
     }
-    onChange(updated);
-  }, [values, onChange]);
+    onChangeRef.current(updated);
+  }, []);
   if (loading) return /* @__PURE__ */ jsxRuntime.jsx(FieldLoading, {});
   if (error2 && !merchantInfo) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tecof-lang-error", children: error2 });
   if (!merchantInfo) return null;
@@ -1413,7 +1533,7 @@ var createEditorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
         field,
@@ -1424,7 +1544,7 @@ var createEditorField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 
@@ -22934,7 +23054,7 @@ var createUploadField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       UploadField,
       {
         field,
@@ -22945,7 +23065,7 @@ var createUploadField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 
@@ -23629,7 +23749,7 @@ var createCodeEditorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       CodeEditorField,
       {
         field,
@@ -23640,7 +23760,7 @@ var createCodeEditorField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 var LinkField = ({
@@ -23668,10 +23788,14 @@ var LinkField = ({
       return existing || { code, value: { url: "" } };
     });
   }, [value, merchantInfo]);
+  const valuesRef = React__default.useRef(values);
+  valuesRef.current = values;
+  const onChangeRef = React__default.useRef(onChange);
+  onChangeRef.current = onChange;
   const activeValueItem = values.find((v2) => v2.code === activeTab);
   const activeValue = activeValueItem?.value || { url: "" };
   const updateActiveValue = React__default.useCallback((newLinkVal) => {
-    const updated = [...values];
+    const updated = [...valuesRef.current];
     const idx = updated.findIndex((v2) => v2.code === activeTab);
     if (idx >= 0) {
       if (newLinkVal) {
@@ -23682,8 +23806,8 @@ var LinkField = ({
     } else if (newLinkVal) {
       updated.push({ code: activeTab, value: newLinkVal });
     }
-    onChange(updated);
-  }, [values, activeTab, onChange]);
+    onChangeRef.current(updated);
+  }, [activeTab]);
   React__default.useEffect(() => {
     if (!drawerOpen) return;
     setLoading(true);
@@ -23872,7 +23996,7 @@ var createLinkField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       LinkField,
       {
         field,
@@ -23883,7 +24007,7 @@ var createLinkField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 var isValidHex = (hex) => /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(hex);
@@ -24053,7 +24177,7 @@ var createColorField = (options = {}) => {
     label,
     labelIcon,
     visible,
-    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(
+    render: ({ value, onChange, readOnly, field, name: name3, id }) => /* @__PURE__ */ jsxRuntime.jsx(core.FieldLabel, { label: label || "", icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(FieldErrorBoundary, { fieldName: name3, children: /* @__PURE__ */ jsxRuntime.jsx(
       ColorField,
       {
         field,
@@ -24064,7 +24188,7 @@ var createColorField = (options = {}) => {
         readOnly,
         ...fieldOptions
       }
-    ) })
+    ) }) })
   };
 };
 
@@ -24332,6 +24456,7 @@ filepond-plugin-image-edit/dist/filepond-plugin-image-edit.esm.js:
 exports.CodeEditorField = CodeEditorField;
 exports.ColorField = ColorField;
 exports.EditorField = EditorField;
+exports.FieldErrorBoundary = FieldErrorBoundary;
 exports.LanguageField = LanguageField;
 exports.LinkField = LinkField;
 exports.TecofApiClient = TecofApiClient;