@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/fields/field-wrapper.mjs

@@ -0,0 +1,49 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
+import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { LocaleSwitcher } from "../locale-switcher.mjs";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/field-wrapper.tsx
+function FieldWrapper({ name, label, description, required, disabled, error, localized, locale, children, fieldPath }) {
+	const resolveText = useResolveText();
+	const { locale: scopedLocale } = useScopedLocale();
+	const contentLocales = useSafeContentLocales();
+	const resolvedLocale = locale ?? scopedLocale;
+	const localeOptions = contentLocales?.locales?.length ? contentLocales.locales : resolvedLocale ? [{ code: resolvedLocale }] : [];
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedDescription = description ? resolveText(description) : void 0;
+	return /* @__PURE__ */ jsx(Field, {
+		"data-disabled": disabled,
+		"data-invalid": !!error,
+		"data-field-path": fieldPath ?? name,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				resolvedLabel && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1",
+						children: [resolvedLabel, required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						})]
+					}), localized && /* @__PURE__ */ jsx(LocaleSwitcher, {
+						locales: localeOptions,
+						value: resolvedLocale,
+						showFlag: false
+					})]
+				}),
+				/* @__PURE__ */ jsx(FieldContent, { children }),
+				resolvedDescription && /* @__PURE__ */ jsx(FieldDescription, { children: resolvedDescription }),
+				error && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: error }] })
+			]
+		})
+	});
+}
+
+//#endregion
+export { FieldWrapper };
+//# sourceMappingURL=field-wrapper.mjs.map

package/dist/client/components/fields/field-wrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.mjs","names":[],"sources":["../../../../src/client/components/fields/field-wrapper.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport type { I18nText } from \"../../i18n/types\";\nimport { useSafeContentLocales, useScopedLocale } from \"../../runtime\";\nimport { LocaleSwitcher } from \"../locale-switcher\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"../ui/field\";\n\ntype FieldWrapperProps = {\n  name: string;\n  label?: I18nText;\n  description?: I18nText;\n  required?: boolean;\n  disabled?: boolean;\n  error?: string;\n  localized?: boolean;\n  locale?: string;\n  children: React.ReactNode;\n  /** Field path for preview click-to-focus */\n  fieldPath?: string;\n};\n\nexport function FieldWrapper({\n  name,\n  label,\n  description,\n  required,\n  disabled,\n  error,\n  localized,\n  locale,\n  children,\n  fieldPath,\n}: FieldWrapperProps) {\n  const resolveText = useResolveText();\n  const { locale: scopedLocale } = useScopedLocale();\n  const contentLocales = useSafeContentLocales();\n  const resolvedLocale = locale ?? scopedLocale;\n  const localeOptions = contentLocales?.locales?.length\n    ? contentLocales.locales\n    : resolvedLocale\n      ? [{ code: resolvedLocale }]\n      : [];\n\n  const resolvedLabel = label ? resolveText(label) : undefined;\n  const resolvedDescription = description\n    ? resolveText(description)\n    : undefined;\n\n  return (\n    <Field\n      data-disabled={disabled}\n      data-invalid={!!error}\n      data-field-path={fieldPath ?? name}\n    >\n      <div className=\"space-y-2\">\n        {resolvedLabel && (\n          <FieldLabel htmlFor={name} className=\"flex items-center gap-2\">\n            <span className=\"flex items-center gap-1\">\n              {resolvedLabel}\n              {required && <span className=\"text-destructive\">*</span>}\n            </span>\n            {localized && (\n              <LocaleSwitcher\n                locales={localeOptions}\n                value={resolvedLocale}\n                showFlag={false}\n              />\n            )}\n          </FieldLabel>\n        )}\n        <FieldContent>{children}</FieldContent>\n        {resolvedDescription && (\n          <FieldDescription>{resolvedDescription}</FieldDescription>\n        )}\n        {error && <FieldError errors={[{ message: error }]} />}\n      </div>\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgB,aAAa,EAC3B,MACA,OACA,aACA,UACA,UACA,OACA,WACA,QACA,UACA,aACoB;CACpB,MAAM,cAAc,gBAAgB;CACpC,MAAM,EAAE,QAAQ,iBAAiB,iBAAiB;CAClD,MAAM,iBAAiB,uBAAuB;CAC9C,MAAM,iBAAiB,UAAU;CACjC,MAAM,gBAAgB,gBAAgB,SAAS,SAC3C,eAAe,UACf,iBACE,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAC1B,EAAE;CAER,MAAM,gBAAgB,QAAQ,YAAY,MAAM,GAAG;CACnD,MAAM,sBAAsB,cACxB,YAAY,YAAY,GACxB;AAEJ,QACE,oBAAC;EACC,iBAAe;EACf,gBAAc,CAAC,CAAC;EAChB,mBAAiB,aAAa;YAE9B,qBAAC;GAAI,WAAU;;IACZ,iBACC,qBAAC;KAAW,SAAS;KAAM,WAAU;gBACnC,qBAAC;MAAK,WAAU;iBACb,eACA,YAAY,oBAAC;OAAK,WAAU;iBAAmB;QAAQ;OACnD,EACN,aACC,oBAAC;MACC,SAAS;MACT,OAAO;MACP,UAAU;OACV;MAEO;IAEf,oBAAC,gBAAc,WAAwB;IACtC,uBACC,oBAAC,8BAAkB,sBAAuC;IAE3D,SAAS,oBAAC,cAAW,QAAQ,CAAC,EAAE,SAAS,OAAO,CAAC,GAAI;;IAClD;GACA"}

package/dist/client/components/fields/index.d.mts

@@ -0,0 +1,33 @@
+import { RelationDisplayFields, RelationDisplayMode } from "./relation/displays/types.mjs";
+import { BooleanField, BooleanFieldProps } from "./boolean-field.mjs";
+import { ArrayFieldConfig, ArrayItemType, BaseFieldProps, DateFieldProps, DateTimeFieldProps, NumberFieldProps, ObjectFieldConfig, ObjectFieldLayout, RelationFieldConfig, RichTextFieldConfig, SelectFieldProps, SelectOption, TextFieldProps, TextareaFieldProps, TimeFieldConfig, TimeFieldProps, UploadFieldConfig } from "./field-types.mjs";
+import { ArrayField, ArrayFieldItemType, ArrayFieldProps } from "./array-field.mjs";
+import { AssetPreviewField, AssetPreviewFieldProps } from "./asset-preview-field.mjs";
+import { BlocksField, BlocksFieldConfig, BlocksFieldProps } from "./blocks-field/blocks-field.mjs";
+import "./blocks-field/index.mjs";
+import "./custom-field.mjs";
+import { DateField } from "./date-field.mjs";
+import { DatetimeField } from "./datetime-field.mjs";
+import { EmailField } from "./email-field.mjs";
+import "./embedded-collection.mjs";
+import "./field-utils.mjs";
+import "./field-wrapper.mjs";
+import { JsonField, JsonFieldMode, JsonFieldProps } from "./json-field.mjs";
+import "./locale-badge.mjs";
+import { NumberField } from "./number-field.mjs";
+import "./object-array-field.mjs";
+import { ObjectField, ObjectFieldProps } from "./object-field.mjs";
+import "./relation/index.mjs";
+import { RelationField, RelationFieldProps } from "./relation-field.mjs";
+import "./relation-picker.mjs";
+import "./relation-select.mjs";
+import "./reverse-relation-field.mjs";
+import { RichTextEditorProps, RichTextFeatures } from "./rich-text-editor/types.mjs";
+import "./rich-text-editor/index.mjs";
+import { RichTextField } from "./rich-text-field.mjs";
+import { SelectField } from "./select-field.mjs";
+import "./status-field.mjs";
+import { TextField } from "./text-field.mjs";
+import { TextareaField } from "./textarea-field.mjs";
+import { TimeField } from "./time-field.mjs";
+import { UploadField, UploadFieldProps } from "./upload-field.mjs";

package/dist/client/components/fields/json-field.d.mts

@@ -0,0 +1,84 @@
+import { BaseFieldProps } from "./field-types.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime210 from "react/jsx-runtime";
+
+//#region src/client/components/fields/json-field.d.ts
+
+type JsonFieldMode = "code" | "form";
+type JsonFieldProps = BaseFieldProps & {
+  /**
+   * Is the field readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Initial editing mode
+   * @default "code"
+   */
+  defaultMode?: JsonFieldMode;
+  /**
+   * Allow switching between modes
+   * @default true
+   */
+  allowModeSwitch?: boolean;
+  /**
+   * Minimum height for the editor
+   * @default 200
+   */
+  minHeight?: number;
+  /**
+   * Maximum height for the editor (0 = no limit)
+   * @default 400
+   */
+  maxHeight?: number;
+  /**
+   * Custom render function for form mode
+   * Receives current value and onChange handler
+   */
+  renderForm?: (props: {
+    value: any;
+    onChange: (value: any) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+  }) => React$1.ReactNode;
+};
+/**
+ * JSON field with code editor and optional form mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic JSON editor
+ * <JsonField
+ *   name="metadata"
+ *   label="Metadata"
+ *   description="Additional metadata as JSON"
+ * />
+ *
+ * // With custom form mode
+ * <JsonField
+ *   name="settings"
+ *   label="Settings"
+ *   renderForm={({ value, onChange }) => (
+ *     <SettingsForm value={value} onChange={onChange} />
+ *   )}
+ * />
+ * ```
+ */
+declare function JsonField({
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  defaultMode,
+  allowModeSwitch,
+  minHeight,
+  maxHeight,
+  renderForm,
+  control: controlProp,
+  className
+}: JsonFieldProps): react_jsx_runtime210.JSX.Element | null;
+//#endregion
+export { JsonField, JsonFieldMode, JsonFieldProps };
+//# sourceMappingURL=json-field.d.mts.map

package/dist/client/components/fields/json-field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-field.d.mts","names":[],"sources":["../../../../src/client/components/fields/json-field.tsx"],"sourcesContent":[],"mappings":";;;;;;AA4FgB,KAlEJ,aAAA,GAkEa,MAAA,GAAA,MAAA;AACvB,KAjEU,cAAA,GAAiB,cAiE3B,GAAA;EACA;;;EAGA,QAAA,CAAA,EAAA,OAAA;EACA;;;;EAIA,WAAA,CAAA,EAhEc,aAgEd;EACA;;;;EAIC,eAAA,CAAA,EAAA,OAAA;EAAc;;;;;;;;;;;;;;;;;;;QAxCT,OAAA,CAAM;;;;;;;;;;;;;;;;;;;;;;;;iBAyBE,SAAA;;;;;;;;;;;;;WAaL;;GAER,iBAAc,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/components/fields/json-field.mjs

@@ -0,0 +1,248 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Textarea } from "../ui/textarea.mjs";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/json-field.tsx
+/**
+* JsonField Component
+*
+* JSON field with two editing modes:
+* - "code" - Raw JSON editing with syntax highlighting
+* - "form" - Structured form editing (if schema provided)
+*
+* Integrates with react-hook-form via Controller.
+*/
+/**
+* JSON field with code editor and optional form mode.
+*
+* @example
+* ```tsx
+* // Basic JSON editor
+* <JsonField
+*   name="metadata"
+*   label="Metadata"
+*   description="Additional metadata as JSON"
+* />
+*
+* // With custom form mode
+* <JsonField
+*   name="settings"
+*   label="Settings"
+*   renderForm={({ value, onChange }) => (
+*     <SettingsForm value={value} onChange={onChange} />
+*   )}
+* />
+* ```
+*/
+function JsonField({ name, label, description, required, disabled, readOnly, placeholder = "{\n  \"key\": \"value\"\n}", defaultMode = "code", allowModeSwitch = true, minHeight = 200, maxHeight = 400, renderForm, control: controlProp, className }) {
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedDescription = description ? resolveText(description) : void 0;
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	const [mode, setMode] = React$1.useState(defaultMode);
+	if (!control) {
+		if (process.env.NODE_ENV !== "production") console.warn("JsonField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	const showModeSwitch = allowModeSwitch && renderForm;
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		rules: {
+			required: required ? `${resolvedLabel || name} is required` : void 0,
+			validate: (value) => {
+				if (!value) return true;
+				if (mode === "code" && typeof value === "string") try {
+					JSON.parse(value);
+					return true;
+				} catch {
+					return "Invalid JSON format";
+				}
+				return true;
+			}
+		},
+		render: ({ field, fieldState }) => {
+			const error = fieldState.error?.message;
+			return /* @__PURE__ */ jsxs(Field, {
+				"data-invalid": !!error,
+				className,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [resolvedLabel && /* @__PURE__ */ jsxs(FieldLabel, {
+						htmlFor: name,
+						children: [resolvedLabel, required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive ml-1",
+							children: "*"
+						})]
+					}), showModeSwitch && /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: mode === "code" ? "secondary" : "ghost",
+							size: "icon-xs",
+							onClick: () => setMode("code"),
+							disabled,
+							title: "Code editor",
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:code-bold" })
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: mode === "form" ? "secondary" : "ghost",
+							size: "icon-xs",
+							onClick: () => setMode("form"),
+							disabled,
+							title: "Form editor",
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:list-bullets-bold" })
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs(FieldContent, { children: [
+					mode === "code" ? /* @__PURE__ */ jsx(JsonCodeEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						placeholder,
+						minHeight,
+						maxHeight,
+						error: !!error
+					}) : renderForm ? /* @__PURE__ */ jsx(JsonFormEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						renderForm
+					}) : /* @__PURE__ */ jsx(JsonCodeEditor, {
+						value: field.value,
+						onChange: field.onChange,
+						disabled,
+						readOnly,
+						placeholder,
+						minHeight,
+						maxHeight,
+						error: !!error
+					}),
+					resolvedDescription && !error && /* @__PURE__ */ jsx(FieldDescription, { children: resolvedDescription }),
+					/* @__PURE__ */ jsx(FieldError, { children: error })
+				] })]
+			});
+		}
+	});
+}
+/**
+* Code editor for JSON (using Textarea for simplicity)
+* Can be replaced with Monaco/CodeMirror in the future
+*/
+function JsonCodeEditor({ value, onChange, disabled, readOnly, placeholder, minHeight, maxHeight, error }) {
+	const [localValue, setLocalValue] = React$1.useState(() => {
+		if (typeof value === "string") return value;
+		if (value === null || value === void 0) return "";
+		try {
+			return JSON.stringify(value, null, 2);
+		} catch {
+			return "";
+		}
+	});
+	const [parseError, setParseError] = React$1.useState(null);
+	React$1.useEffect(() => {
+		if (typeof value === "string") setLocalValue(value);
+		else if (value !== null && value !== void 0) try {
+			setLocalValue(JSON.stringify(value, null, 2));
+		} catch {}
+		else setLocalValue("");
+	}, [value]);
+	const handleChange = (e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		if (!newValue.trim()) {
+			setParseError(null);
+			onChange(null);
+			return;
+		}
+		try {
+			const parsed = JSON.parse(newValue);
+			setParseError(null);
+			onChange(parsed);
+		} catch (err) {
+			setParseError("Invalid JSON");
+			onChange(newValue);
+		}
+	};
+	const handleFormat = () => {
+		try {
+			const parsed = JSON.parse(localValue);
+			setLocalValue(JSON.stringify(parsed, null, 2));
+			setParseError(null);
+			onChange(parsed);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: localValue,
+				onChange: handleChange,
+				disabled,
+				readOnly,
+				placeholder,
+				className: cn("font-mono text-xs", error || parseError ? "border-destructive" : ""),
+				style: {
+					minHeight: `${minHeight}px`,
+					maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+					resize: maxHeight ? "none" : "vertical"
+				},
+				"aria-invalid": !!error || !!parseError
+			}), parseError && /* @__PURE__ */ jsxs("div", {
+				className: "text-destructive absolute right-2 top-2 flex items-center gap-1 text-xs",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:warning-circle-fill",
+					className: "size-3"
+				}), parseError]
+			})]
+		}), !readOnly && !disabled && localValue && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				onClick: handleFormat,
+				disabled: !!parseError,
+				children: "Format JSON"
+			})
+		})]
+	});
+}
+/**
+* Form-based editor wrapper
+*/
+function JsonFormEditor({ value, onChange, disabled, readOnly, renderForm }) {
+	const safeValue = React$1.useMemo(() => {
+		if (typeof value === "object" && value !== null) return value;
+		if (typeof value === "string") try {
+			return JSON.parse(value);
+		} catch {
+			return {};
+		}
+		return {};
+	}, [value]);
+	if (!renderForm) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border p-4",
+		children: renderForm({
+			value: safeValue,
+			onChange,
+			disabled,
+			readOnly
+		})
+	});
+}
+
+//#endregion
+export { JsonField };
+//# sourceMappingURL=json-field.mjs.map

package/dist/client/components/fields/json-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-field.mjs","names":["React"],"sources":["../../../../src/client/components/fields/json-field.tsx"],"sourcesContent":["/**\n * JsonField Component\n *\n * JSON field with two editing modes:\n * - \"code\" - Raw JSON editing with syntax highlighting\n * - \"form\" - Structured form editing (if schema provided)\n *\n * Integrates with react-hook-form via Controller.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { Controller, useFormContext } from \"react-hook-form\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"../ui/field\";\nimport { Textarea } from \"../ui/textarea\";\nimport type { BaseFieldProps } from \"./field-types\";\n\nexport type JsonFieldMode = \"code\" | \"form\";\n\nexport type JsonFieldProps = BaseFieldProps & {\n  /**\n   * Is the field readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Initial editing mode\n   * @default \"code\"\n   */\n  defaultMode?: JsonFieldMode;\n\n  /**\n   * Allow switching between modes\n   * @default true\n   */\n  allowModeSwitch?: boolean;\n\n  /**\n   * Minimum height for the editor\n   * @default 200\n   */\n  minHeight?: number;\n\n  /**\n   * Maximum height for the editor (0 = no limit)\n   * @default 400\n   */\n  maxHeight?: number;\n\n  /**\n   * Custom render function for form mode\n   * Receives current value and onChange handler\n   */\n  renderForm?: (props: {\n    value: any;\n    onChange: (value: any) => void;\n    disabled?: boolean;\n    readOnly?: boolean;\n  }) => React.ReactNode;\n};\n\n/**\n * JSON field with code editor and optional form mode.\n *\n * @example\n * ```tsx\n * // Basic JSON editor\n * <JsonField\n *   name=\"metadata\"\n *   label=\"Metadata\"\n *   description=\"Additional metadata as JSON\"\n * />\n *\n * // With custom form mode\n * <JsonField\n *   name=\"settings\"\n *   label=\"Settings\"\n *   renderForm={({ value, onChange }) => (\n *     <SettingsForm value={value} onChange={onChange} />\n *   )}\n * />\n * ```\n */\nexport function JsonField({\n  name,\n  label,\n  description,\n  required,\n  disabled,\n  readOnly,\n  placeholder = '{\\n  \"key\": \"value\"\\n}',\n  defaultMode = \"code\",\n  allowModeSwitch = true,\n  minHeight = 200,\n  maxHeight = 400,\n  renderForm,\n  control: controlProp,\n  className,\n}: JsonFieldProps) {\n  const resolveText = useResolveText();\n  const resolvedLabel = label ? resolveText(label) : undefined;\n  const resolvedDescription = description\n    ? resolveText(description)\n    : undefined;\n  const formContext = useFormContext();\n  const control = controlProp ?? formContext?.control;\n  const [mode, setMode] = React.useState<JsonFieldMode>(defaultMode);\n\n  if (!control) {\n    if (process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        \"JsonField: No form control found. Make sure to use within FormProvider or pass control prop.\",\n      );\n    }\n    return null;\n  }\n\n  // Only show mode switch if form rendering is available\n  const showModeSwitch = allowModeSwitch && renderForm;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={{\n        required: required ? `${resolvedLabel || name} is required` : undefined,\n        validate: (value) => {\n          if (!value) return true;\n          // In code mode, validate JSON\n          if (mode === \"code\" && typeof value === \"string\") {\n            try {\n              JSON.parse(value);\n              return true;\n            } catch {\n              return \"Invalid JSON format\";\n            }\n          }\n          return true;\n        },\n      }}\n      render={({ field, fieldState }) => {\n        const error = fieldState.error?.message;\n\n        return (\n          <Field data-invalid={!!error} className={className}>\n            {/* Header with label and mode switch */}\n            <div className=\"flex items-center justify-between\">\n              {resolvedLabel && (\n                <FieldLabel htmlFor={name}>\n                  {resolvedLabel}\n                  {required && <span className=\"text-destructive ml-1\">*</span>}\n                </FieldLabel>\n              )}\n\n              {showModeSwitch && (\n                <div className=\"flex gap-1\">\n                  <Button\n                    type=\"button\"\n                    variant={mode === \"code\" ? \"secondary\" : \"ghost\"}\n                    size=\"icon-xs\"\n                    onClick={() => setMode(\"code\")}\n                    disabled={disabled}\n                    title=\"Code editor\"\n                  >\n                    <Icon icon=\"ph:code-bold\" />\n                  </Button>\n                  <Button\n                    type=\"button\"\n                    variant={mode === \"form\" ? \"secondary\" : \"ghost\"}\n                    size=\"icon-xs\"\n                    onClick={() => setMode(\"form\")}\n                    disabled={disabled}\n                    title=\"Form editor\"\n                  >\n                    <Icon icon=\"ph:list-bullets-bold\" />\n                  </Button>\n                </div>\n              )}\n            </div>\n\n            <FieldContent>\n              {mode === \"code\" ? (\n                <JsonCodeEditor\n                  value={field.value}\n                  onChange={field.onChange}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  placeholder={placeholder}\n                  minHeight={minHeight}\n                  maxHeight={maxHeight}\n                  error={!!error}\n                />\n              ) : renderForm ? (\n                <JsonFormEditor\n                  value={field.value}\n                  onChange={field.onChange}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  renderForm={renderForm}\n                />\n              ) : (\n                <JsonCodeEditor\n                  value={field.value}\n                  onChange={field.onChange}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  placeholder={placeholder}\n                  minHeight={minHeight}\n                  maxHeight={maxHeight}\n                  error={!!error}\n                />\n              )}\n\n              {resolvedDescription && !error && (\n                <FieldDescription>{resolvedDescription}</FieldDescription>\n              )}\n              <FieldError>{error}</FieldError>\n            </FieldContent>\n          </Field>\n        );\n      }}\n    />\n  );\n}\n\n/**\n * Code editor for JSON (using Textarea for simplicity)\n * Can be replaced with Monaco/CodeMirror in the future\n */\nfunction JsonCodeEditor({\n  value,\n  onChange,\n  disabled,\n  readOnly,\n  placeholder,\n  minHeight,\n  maxHeight,\n  error,\n}: {\n  value: any;\n  onChange: (value: any) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  placeholder?: string;\n  minHeight?: number;\n  maxHeight?: number;\n  error?: boolean;\n}) {\n  const [localValue, setLocalValue] = React.useState<string>(() => {\n    if (typeof value === \"string\") return value;\n    if (value === null || value === undefined) return \"\";\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch {\n      return \"\";\n    }\n  });\n  const [parseError, setParseError] = React.useState<string | null>(null);\n\n  // Sync local value when external value changes\n  React.useEffect(() => {\n    if (typeof value === \"string\") {\n      setLocalValue(value);\n    } else if (value !== null && value !== undefined) {\n      try {\n        setLocalValue(JSON.stringify(value, null, 2));\n      } catch {\n        // Keep current local value if stringification fails\n      }\n    } else {\n      setLocalValue(\"\");\n    }\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = e.target.value;\n    setLocalValue(newValue);\n\n    // Try to parse and update form value\n    if (!newValue.trim()) {\n      setParseError(null);\n      onChange(null);\n      return;\n    }\n\n    try {\n      const parsed = JSON.parse(newValue);\n      setParseError(null);\n      onChange(parsed);\n    } catch (err) {\n      setParseError(\"Invalid JSON\");\n      // Still update with raw string so validation can catch it\n      onChange(newValue);\n    }\n  };\n\n  const handleFormat = () => {\n    try {\n      const parsed = JSON.parse(localValue);\n      const formatted = JSON.stringify(parsed, null, 2);\n      setLocalValue(formatted);\n      setParseError(null);\n      onChange(parsed);\n    } catch {\n      // Can't format invalid JSON\n    }\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative\">\n        <Textarea\n          value={localValue}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={placeholder}\n          className={cn(\n            \"font-mono text-xs\",\n            error || parseError ? \"border-destructive\" : \"\",\n          )}\n          style={{\n            minHeight: `${minHeight}px`,\n            maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n            resize: maxHeight ? \"none\" : \"vertical\",\n          }}\n          aria-invalid={!!error || !!parseError}\n        />\n\n        {/* Parse error indicator */}\n        {parseError && (\n          <div className=\"text-destructive absolute right-2 top-2 flex items-center gap-1 text-xs\">\n            <Icon icon=\"ph:warning-circle-fill\" className=\"size-3\" />\n            {parseError}\n          </div>\n        )}\n      </div>\n\n      {/* Format button */}\n      {!readOnly && !disabled && localValue && (\n        <div className=\"flex justify-end\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"xs\"\n            onClick={handleFormat}\n            disabled={!!parseError}\n          >\n            Format JSON\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Form-based editor wrapper\n */\nfunction JsonFormEditor({\n  value,\n  onChange,\n  disabled,\n  readOnly,\n  renderForm,\n}: {\n  value: any;\n  onChange: (value: any) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  renderForm: JsonFieldProps[\"renderForm\"];\n}) {\n  // Ensure value is an object for form mode\n  const safeValue = React.useMemo(() => {\n    if (typeof value === \"object\" && value !== null) {\n      return value;\n    }\n    if (typeof value === \"string\") {\n      try {\n        return JSON.parse(value);\n      } catch {\n        return {};\n      }\n    }\n    return {};\n  }, [value]);\n\n  if (!renderForm) return null;\n\n  return (\n    <div className=\"rounded-lg border p-4\">\n      {renderForm({\n        value: safeValue,\n        onChange,\n        disabled,\n        readOnly,\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/fields/locale-badge.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";

package/dist/client/components/fields/locale-badge.mjs

@@ -0,0 +1,17 @@
+import { Badge } from "../ui/badge.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/fields/locale-badge.tsx
+function LocaleBadge({ locale }) {
+	if (!locale) return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "secondary",
+		className: "uppercase text-[10px] tracking-wide",
+		children: locale
+	});
+}
+
+//#endregion
+export { LocaleBadge };
+//# sourceMappingURL=locale-badge.mjs.map

package/dist/client/components/fields/locale-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-badge.mjs","names":[],"sources":["../../../../src/client/components/fields/locale-badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Badge } from \"../ui/badge\";\n\ntype LocaleBadgeProps = {\n  locale?: string;\n};\n\nexport function LocaleBadge({ locale }: LocaleBadgeProps) {\n  if (!locale) return null;\n  return (\n    <Badge variant=\"secondary\" className=\"uppercase text-[10px] tracking-wide\">\n      {locale}\n    </Badge>\n  );\n}\n"],"mappings":";;;;;AAOA,SAAgB,YAAY,EAAE,UAA4B;AACxD,KAAI,CAAC,OAAQ,QAAO;AACpB,QACE,oBAAC;EAAM,SAAQ;EAAY,WAAU;YAClC;GACK"}

package/dist/client/components/fields/number-field.d.mts

@@ -0,0 +1,23 @@
+import { NumberFieldProps } from "./field-types.mjs";
+import * as react_jsx_runtime209 from "react/jsx-runtime";
+
+//#region src/client/components/fields/number-field.d.ts
+declare function NumberField({
+  name,
+  label,
+  description,
+  placeholder,
+  required,
+  disabled,
+  localized,
+  locale,
+  control,
+  className,
+  min,
+  max,
+  step,
+  showButtons
+}: NumberFieldProps): react_jsx_runtime209.JSX.Element;
+//#endregion
+export { NumberField };
+//# sourceMappingURL=number-field.d.mts.map

package/dist/client/components/fields/number-field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.mts","names":[],"sources":["../../../../src/client/components/fields/number-field.tsx"],"sourcesContent":[],"mappings":";;;;iBAMgB,WAAA;;;;;;;;;;;;;;;GAeb,mBAAgB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/client/components/fields/number-field.mjs

@@ -0,0 +1,40 @@
+import { useResolvedControl } from "./field-utils.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
+import { NumberInput } from "../primitives/number-input.mjs";
+import { Controller } from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/fields/number-field.tsx
+function NumberField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, min, max, step, showButtons }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(NumberInput, {
+				id: name,
+				value: field.value ?? null,
+				onChange: field.onChange,
+				placeholder,
+				disabled,
+				min,
+				max,
+				step,
+				showButtons,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { NumberField };
+//# sourceMappingURL=number-field.mjs.map

package/dist/client/components/fields/number-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.mjs","names":[],"sources":["../../../../src/client/components/fields/number-field.tsx"],"sourcesContent":["import { Controller } from \"react-hook-form\";\nimport { NumberInput } from \"../primitives/number-input\";\nimport type { NumberFieldProps } from \"./field-types\";\nimport { useResolvedControl } from \"./field-utils\";\nimport { FieldWrapper } from \"./field-wrapper\";\n\nexport function NumberField({\n  name,\n  label,\n  description,\n  placeholder,\n  required,\n  disabled,\n  localized,\n  locale,\n  control,\n  className,\n  min,\n  max,\n  step,\n  showButtons,\n}: NumberFieldProps) {\n  const resolvedControl = useResolvedControl(control);\n\n  return (\n    <Controller\n      name={name}\n      control={resolvedControl}\n      render={({ field, fieldState }) => (\n        <FieldWrapper\n          name={name}\n          label={label}\n          description={description}\n          required={required}\n          disabled={disabled}\n          localized={localized}\n          locale={locale}\n          error={fieldState.error?.message}\n        >\n          <NumberInput\n            id={name}\n            value={field.value ?? null}\n            onChange={field.onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            min={min}\n            max={max}\n            step={step}\n            showButtons={showButtons}\n            aria-invalid={!!fieldState.error}\n            className={className}\n          />\n        </FieldWrapper>\n      )}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,YAAY,EAC1B,MACA,OACA,aACA,aACA,UACA,UACA,WACA,QACA,SACA,WACA,KACA,KACA,MACA,eACmB;AAGnB,QACE,oBAAC;EACO;EACN,SALoB,mBAAmB,QAAQ;EAM/C,SAAS,EAAE,OAAO,iBAChB,oBAAC;GACO;GACC;GACM;GACH;GACA;GACC;GACH;GACR,OAAO,WAAW,OAAO;aAEzB,oBAAC;IACC,IAAI;IACJ,OAAO,MAAM,SAAS;IACtB,UAAU,MAAM;IACH;IACH;IACL;IACA;IACC;IACO;IACb,gBAAc,CAAC,CAAC,WAAW;IAChB;KACX;IACW;GAEjB"}

package/dist/client/components/fields/object-array-field.d.mts

@@ -0,0 +1,2 @@
+import "./field-types.mjs";
+import "react/jsx-runtime";