@tipp/ui 2.3.22 → 2.3.24

package/dist/molecules/index.cjs

@@ -90,6 +90,7 @@ __export(molecules_exports, {
   DotNavigation: () => DotNavigation,
   DownloadCard: () => DownloadCard,
   DynamicForm: () => DynamicForm,
+  DynamicFormEditor: () => DynamicFormEditor,
   DynamicFormField: () => DynamicFormField,
   DynamicFormResponseItem: () => DynamicFormResponseItem,
   ExpandTable: () => ExpandTable,
@@ -2577,7 +2578,7 @@ var getTimeOptions = () => {
   return timeOptions;
 };
 
-// src/utils/getCalloutIconComponent.ts
+// src/utils/get-callout-icon-component.ts
 var DEFAULT_ICON = import_react_icons.InfoCircledIcon;
 var AI_CALLOUT_ICON_OPTIONS = [
   { label: "Info", value: "InfoCircledIcon", Component: import_react_icons.InfoCircledIcon },
@@ -2602,6 +2603,58 @@ function getCalloutIconComponent(iconName) {
   return (_a = iconByName[iconName]) != null ? _a : DEFAULT_ICON;
 }
 
+// src/utils/get-dynamic-form-display-value.ts
+function isEmptyDisplayValue(value) {
+  return value === void 0 || value === null || value === "";
+}
+function findOptionLabel(options, value) {
+  const valueString = String(value);
+  const found = options.find(
+    (option) => String(option.value) === valueString
+  );
+  return found == null ? void 0 : found.label;
+}
+function joinLabelsOrValues(options, values) {
+  const labels = values.map((v) => {
+    const label = findOptionLabel(options, v);
+    return label != null ? label : String(v);
+  });
+  return labels.join(", ");
+}
+function getDynamicFormDisplayValue(field, value) {
+  if (isEmptyDisplayValue(value)) return "";
+  switch (field.type) {
+    case "dropdown":
+    case "choice":
+    case "radio_cards": {
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "image_radio_card": {
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "choices": {
+      if (Array.isArray(value)) {
+        return joinLabelsOrValues(field.options, value);
+      }
+      const label = findOptionLabel(field.options, value);
+      return label != null ? label : String(value);
+    }
+    case "yes_no": {
+      if (value === true || value === "true" || value === "yes") return "\uB3D9\uC758";
+      if (value === false || value === "false" || value === "no") return "\uBE44\uB3D9\uC758";
+      return String(value);
+    }
+    case "short_text":
+    case "long_text":
+    case "number":
+    case "email":
+    default:
+      return String(value);
+  }
+}
+
 // src/molecules/time-select.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var getOptionValue = (date, timeValue) => {
@@ -2941,7 +2994,6 @@ function CurriculumProvider(props) {
     const inBounds = selectedIndexState >= 0 && selectedIndexState < list.length;
     if (!inBounds) return;
     const item = list[selectedIndexState];
-    if (!item) return;
     if (item.type === "sectionTitle") return;
     onChangeSelectedContent == null ? void 0 : onChangeSelectedContent(item);
   }, [list, onChangeSelectedContent, selectedIndexState]);
@@ -3097,15 +3149,15 @@ function CurriculumVideo(props) {
           "iframe",
           {
             allowFullScreen: true,
+            onError: () => {
+              setIsLoading(false);
+            },
             onLoad: () => {
               setIsLoading(false);
             },
             src: `${url}?theme=light`,
             style: { width: "100%", height: "100%", border: "none" },
-            title: "Curriculum Video",
-            onError: () => {
-              setIsLoading(false);
-            }
+            title: "Curriculum Video"
           }
         )
       ]
@@ -4798,7 +4850,7 @@ function CurriculumV2Layout(props) {
 var import_react39 = require("react");
 var import_formik2 = require("formik");
 var Yup2 = __toESM(require("yup"), 1);
-var import_themes37 = require("@radix-ui/themes");
+var import_themes38 = require("@radix-ui/themes");
 
 // src/context/dynamic-form-context.tsx
 var import_react36 = require("react");
@@ -5019,8 +5071,51 @@ var Checkbox = (0, import_react38.forwardRef)(
 );
 Checkbox.displayName = "Checkbox";
 
+// src/atoms/inset.tsx
+var import_themes37 = require("@radix-ui/themes");
+
 // src/molecules/dynamic-field.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function isImageFieldOption(value) {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return typeof imageSrc === "string" && (alt === void 0 || typeof alt === "string");
+}
+function getStringProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "number" ? value : fallback;
+}
+function getOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isFieldOption)) return null;
+  return options;
+}
+function getImageOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
 function DynamicFormField({
   field
 }) {
@@ -5033,7 +5128,7 @@ function DynamicFormField({
     handleBlur,
     readonly
   } = useDynamicForm();
-  const { name, type } = field;
+  const name = field.name;
   const value = getFieldValue(name);
   const error = getFieldError(name);
   const touched = getFieldTouched(name);
@@ -5046,14 +5141,22 @@ function DynamicFormField({
     error: hasError,
     disabled: readonly
   };
-  switch (type) {
+  const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  switch (field.type) {
     case "short_text":
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "text"
+        })
+      );
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
-          type: type === "short_text" ? "text" : type
+          type: "email"
         })
       );
     case "number":
@@ -5076,9 +5179,20 @@ function DynamicFormField({
           onValueChange: readonly ? void 0 : (newValue) => {
             void setFieldValue(name, newValue);
           },
-          value,
+          value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Select.Trigger, { placeholder: field.placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              Select.Trigger,
+              {
+                placeholder: field.placeholder,
+                style: {
+                  alignSelf: "flex-start",
+                  width: "fit-content",
+                  minWidth: "180px",
+                  maxWidth: "100%"
+                }
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
@@ -5096,6 +5210,21 @@ function DynamicFormField({
           children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_themes33.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
+    case "radio_cards": {
+      const options = getOptions(field);
+      if (!options) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        import_themes23.RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_themes23.RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typo, { children: option.label }) }, option.value))
+        }
+      );
+    }
     case "choices":
       return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         CheckboxGroup.Root,
@@ -5123,6 +5252,65 @@ function DynamicFormField({
         ),
         field.description ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
+    case "image_radio_card": {
+      const options = getImageOptions(field);
+      if (!options) return null;
+      const gridColumnsCount = Math.max(1, getNumberProp(field, "gridColumnsCount", 4));
+      const gridColumns = getStringProp(
+        field,
+        "gridColumns",
+        `repeat(${gridColumnsCount}, 1fr)`
+      );
+      const gridItemHeight = getStringProp(field, "gridItemHeight", "100px");
+      const gridRows = getStringProp(field, "gridRows", gridItemHeight);
+      const gridGap = getStringProp(field, "gridGap", "2");
+      const imageFitRaw = getStringProp(field, "imageFit", "cover");
+      const imageFit = imageFitRaw === "contain" ? "contain" : "cover";
+      const handleValueChange = (newValue) => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        import_themes23.RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : handleValueChange,
+          value: selectedValue,
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_themes16.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+            const optionValue = String(option.value);
+            const altText = option.alt || option.label;
+            return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              import_themes23.RadioCards.Item,
+              {
+                style: {
+                  padding: 0
+                },
+                value: optionValue,
+                children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_themes37.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                  "img",
+                  {
+                    alt: altText,
+                    src: option.imageSrc,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "block",
+                      objectFit: imageFit,
+                      opacity: readonly ? 0.7 : 1
+                    }
+                  }
+                ) })
+              },
+              optionValue
+            );
+          }) })
+        }
+      );
+    }
     default:
       return null;
   }
@@ -5236,7 +5424,7 @@ function DynamicFormFieldList({
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: fields.map((field) => {
     const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-      import_themes37.Box,
+      import_themes38.Box,
       {
         "data-error-field": errorMessage ? field.name : void 0,
         "data-field-name": field.name,
@@ -5348,56 +5536,36 @@ function createYupValidation(field, validation) {
 }
 
 // src/molecules/dynamic-form-response-item.tsx
+function isRecord2(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
 function DynamicFormResponseItem({
   payload,
   questionType,
   config
 }) {
-  if (!payload || typeof payload !== "object") {
-    return String(payload || "\uC751\uB2F5 \uC5C6\uC74C");
-  }
-  const payloadObj = payload;
-  const value = payloadObj.value;
+  const value = isRecord2(payload) && "value" in payload ? payload.value : payload;
   if (value === void 0 || value === null || value === "") {
     return "\uC751\uB2F5 \uC5C6\uC74C";
   }
-  const getOptions = (fieldConfig) => {
-    if (!fieldConfig || typeof fieldConfig !== "object") return void 0;
-    if ("options" in fieldConfig && Array.isArray(fieldConfig.options)) {
-      return fieldConfig.options;
-    }
-    return void 0;
-  };
-  const options = getOptions(config);
+  if (config) {
+    const displayValue = getDynamicFormDisplayValue(config, value);
+    return displayValue === "" ? "\uC751\uB2F5 \uC5C6\uC74C" : displayValue;
+  }
   switch (questionType) {
     case "text":
     case "textarea":
       return String(value);
     case "radio":
     case "select":
-    case "choice":
-      if (options) {
-        const option = options.find((opt) => opt.value === value);
-        return option ? option.label : String(value);
-      }
       return String(value);
     case "checkbox":
     case "choices":
       if (Array.isArray(value)) {
-        if (options) {
-          return value.map((val) => {
-            const option = options.find((opt) => opt.value === val);
-            return option ? option.label : String(val);
-          }).join(", ");
-        }
-        return value.join(", ");
+        return value.map((v) => String(v)).join(", ");
       }
       return String(value);
     case "rating":
-      if (options) {
-        const option = options.find((opt) => opt.value === value);
-        return option ? option.label : String(value);
-      }
       return String(value);
     case "number":
       return String(value);
@@ -5703,6 +5871,1259 @@ function TrainingInfoGuidelineButton({
     }
   );
 }
+
+// src/molecules/dynamic-form-editor.tsx
+var import_react45 = require("react");
+
+// src/molecules/dynamic-form-editor-utils.ts
+function isRecord3(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isNonEmptyTrimmedString(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function canCompileRegExp(pattern) {
+  try {
+    new RegExp(pattern);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function getFieldTypes() {
+  return [
+    "short_text",
+    "long_text",
+    "number",
+    "email",
+    "dropdown",
+    "choice",
+    "radio_cards",
+    "image_radio_card",
+    "choices",
+    "yes_no"
+  ];
+}
+function getFieldTypeLabel(type) {
+  const map = {
+    short_text: "\uC9E7\uC740 \uD14D\uC2A4\uD2B8",
+    long_text: "\uAE34 \uD14D\uC2A4\uD2B8",
+    number: "\uC22B\uC790",
+    email: "\uC774\uBA54\uC77C",
+    dropdown: "\uB4DC\uB86D\uB2E4\uC6B4",
+    choice: "\uB2E8\uC77C \uC120\uD0DD(\uB77C\uB514\uC624)",
+    radio_cards: "\uB77C\uB514\uC624 \uCE74\uB4DC",
+    image_radio_card: "\uC774\uBBF8\uC9C0 \uB77C\uB514\uC624 \uCE74\uB4DC",
+    choices: "\uB2E4\uC911 \uC120\uD0DD(\uCCB4\uD06C)",
+    yes_no: "\uB3D9\uC758(\uCCB4\uD06C)"
+  };
+  return map[type];
+}
+function findFieldIndexByName(fields, fieldName) {
+  return fields.findIndex((field) => field.name === fieldName);
+}
+function toCamelFromSnake(value) {
+  const parts = value.split("_").filter(Boolean);
+  if (parts.length === 0) return "field";
+  const [first, ...rest] = parts;
+  const firstLower = first.toLowerCase();
+  const restCamel = rest.map((p) => p.length === 0 ? "" : p[0].toUpperCase() + p.slice(1)).join("");
+  return `${firstLower}${restCamel}`;
+}
+function createUniqueFieldName(fields, baseName) {
+  const used = new Set(fields.map((f) => f.name));
+  if (!used.has(baseName)) return baseName;
+  let i = 2;
+  while (used.has(`${baseName}${i}`)) i += 1;
+  return `${baseName}${i}`;
+}
+function createDefaultField(type, currentFields) {
+  const baseName = toCamelFromSnake(type);
+  const name = createUniqueFieldName(currentFields, baseName);
+  const label = getFieldTypeLabel(type);
+  if (type === "short_text") return { name, type, label, placeholder: "" };
+  if (type === "long_text") return { name, type, label, placeholder: "" };
+  if (type === "number") return { name, type, label, placeholder: "" };
+  if (type === "email") return { name, type, label, placeholder: "" };
+  if (type === "dropdown")
+    return {
+      name,
+      type,
+      label,
+      placeholder: "",
+      options: [{ label: "\uC635\uC158 1", value: "option1" }]
+    };
+  if (type === "choice")
+    return {
+      name,
+      type,
+      label,
+      orientation: "vertical",
+      options: [{ label: "\uC635\uC158 1", value: "option1" }]
+    };
+  if (type === "radio_cards")
+    return { name, type, label, options: [{ label: "\uC635\uC158 1", value: "option1" }] };
+  if (type === "choices")
+    return {
+      name,
+      type,
+      label,
+      orientation: "vertical",
+      options: [{ label: "\uC635\uC158 1", value: "option1" }]
+    };
+  if (type === "yes_no") return { name, type, label, description: "" };
+  return {
+    name,
+    type,
+    label,
+    gridColumnsCount: 4,
+    gridItemHeight: "160px",
+    gridGap: "2",
+    imageFit: "cover",
+    options: [
+      {
+        label: "\uC774\uBBF8\uC9C0 1",
+        value: "option1",
+        imageSrc: "https://placehold.co/300x300/png?text=1"
+      }
+    ]
+  };
+}
+function normalizeSchema(value) {
+  const fallback = { fields: [] };
+  if (!value) return fallback;
+  if (!Array.isArray(value.fields)) return fallback;
+  return { fields: value.fields };
+}
+function validateDynamicFormSchema(schema) {
+  const issues = [];
+  const nameToCount = /* @__PURE__ */ new Map();
+  schema.fields.forEach((field) => {
+    const prev = nameToCount.get(field.name) || 0;
+    nameToCount.set(field.name, prev + 1);
+  });
+  schema.fields.forEach((field, index) => {
+    const fieldKey = `${index}:${field.name}`;
+    if (!isNonEmptyTrimmedString(field.name)) {
+      issues.push({
+        id: `field.name.required.${fieldKey}`,
+        level: "error",
+        message: "\uD544\uB4DC name\uC740 \uD544\uC218\uC785\uB2C8\uB2E4",
+        fieldName: field.name
+      });
+    } else if (field.name.trim() !== field.name) {
+      issues.push({
+        id: `field.name.trim.${fieldKey}`,
+        level: "warning",
+        message: "\uD544\uB4DC name \uC55E/\uB4A4 \uACF5\uBC31\uC740 \uC81C\uAC70\uD558\uB294 \uAC83\uC744 \uAD8C\uC7A5\uD569\uB2C8\uB2E4",
+        fieldName: field.name
+      });
+    }
+    if (isNonEmptyTrimmedString(field.name)) {
+      const count = nameToCount.get(field.name) || 0;
+      if (count > 1) {
+        issues.push({
+          id: `field.name.duplicate.${fieldKey}`,
+          level: "error",
+          message: `\uC911\uBCF5\uB41C name\uC785\uB2C8\uB2E4: ${field.name}`,
+          fieldName: field.name
+        });
+      }
+    }
+    if (!isNonEmptyTrimmedString(field.label)) {
+      issues.push({
+        id: `field.label.required.${fieldKey}`,
+        level: "error",
+        message: "\uD544\uB4DC label\uC740 \uD544\uC218\uC785\uB2C8\uB2E4",
+        fieldName: field.name
+      });
+    }
+    const type = field.type;
+    const isOptionType = type === "dropdown" || type === "choice" || type === "radio_cards" || type === "choices";
+    if (isOptionType) {
+      const optionsRaw = field.options;
+      if (!Array.isArray(optionsRaw) || optionsRaw.length === 0) {
+        issues.push({
+          id: `field.options.required.${fieldKey}`,
+          level: "error",
+          message: "options\uB294 1\uAC1C \uC774\uC0C1 \uD544\uC694\uD569\uB2C8\uB2E4",
+          fieldName: field.name
+        });
+      }
+    }
+    if (type === "image_radio_card") {
+      const optionsRaw = field.options;
+      if (!Array.isArray(optionsRaw) || optionsRaw.length === 0) {
+        issues.push({
+          id: `field.imageOptions.required.${fieldKey}`,
+          level: "error",
+          message: "options\uB294 1\uAC1C \uC774\uC0C1 \uD544\uC694\uD569\uB2C8\uB2E4",
+          fieldName: field.name
+        });
+      } else {
+        optionsRaw.forEach((opt, optIndex) => {
+          const imageSrc = isRecord3(opt) ? opt.imageSrc : void 0;
+          if (!isNonEmptyTrimmedString(imageSrc)) {
+            issues.push({
+              id: `field.imageOptions.imageSrc.required.${fieldKey}.${optIndex}`,
+              level: "error",
+              message: "imageSrc\uB294 \uD544\uC218\uC785\uB2C8\uB2E4",
+              fieldName: field.name
+            });
+          }
+        });
+      }
+    }
+    const validation = field.validation;
+    if (validation) {
+      if (isFiniteNumber(validation.min) && isFiniteNumber(validation.max)) {
+        if (validation.min > validation.max) {
+          issues.push({
+            id: `field.validation.minmax.${fieldKey}`,
+            level: "error",
+            message: "validation.min\uC740 validation.max \uC774\uD558\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4",
+            fieldName: field.name
+          });
+        }
+      }
+      if (isNonEmptyTrimmedString(validation.pattern)) {
+        if (!canCompileRegExp(validation.pattern)) {
+          issues.push({
+            id: `field.validation.pattern.${fieldKey}`,
+            level: "error",
+            message: "validation.pattern\uC774 \uC62C\uBC14\uB978 \uC815\uADDC\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4",
+            fieldName: field.name
+          });
+        }
+      }
+    }
+  });
+  return issues;
+}
+function hasErrorIssues(issues) {
+  return issues.some((i) => i.level === "error");
+}
+function updateSchemaFields(schema, nextFields) {
+  return { fields: nextFields };
+}
+function moveField(fields, fromIndex, toIndex) {
+  if (fromIndex < 0 || fromIndex >= fields.length) return fields;
+  if (toIndex < 0 || toIndex >= fields.length) return fields;
+  if (fromIndex === toIndex) return fields;
+  const next = [...fields];
+  const [item] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function duplicateField(fields, index) {
+  if (index < 0 || index >= fields.length) return fields;
+  const target = fields[index];
+  const nextName = createUniqueFieldName(fields, target.name);
+  const cloned = __spreadProps(__spreadValues({}, target), { name: nextName });
+  const next = [...fields];
+  next.splice(index + 1, 0, cloned);
+  return next;
+}
+function updateFieldCommonProps(field, next) {
+  const { name, label, description, required } = next;
+  return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, field), name !== void 0 ? { name } : {}), label !== void 0 ? { label } : {}), description !== void 0 ? { description } : {}), required !== void 0 ? { required } : {});
+}
+function updateFieldValidation(field, next) {
+  if (!next) {
+    const _a = field, { validation: _validation } = _a, rest = __objRest(_a, ["validation"]);
+    return rest;
+  }
+  return __spreadProps(__spreadValues({}, field), { validation: next });
+}
+function updateTextPlaceholder(field, placeholder) {
+  const type = field.type;
+  if (type === "short_text" || type === "long_text" || type === "number" || type === "email" || type === "dropdown") {
+    return __spreadProps(__spreadValues({}, field), { placeholder });
+  }
+  return field;
+}
+function updateOrientation(field, orientation) {
+  const type = field.type;
+  if (type === "choice" || type === "choices") return __spreadProps(__spreadValues({}, field), { orientation });
+  return field;
+}
+function updateOptions(field, options) {
+  const type = field.type;
+  if (type === "dropdown" || type === "choice" || type === "radio_cards" || type === "choices") {
+    return __spreadProps(__spreadValues({}, field), { options });
+  }
+  return field;
+}
+function updateImageOptions(field, options) {
+  if (field.type === "image_radio_card") {
+    return __spreadProps(__spreadValues({}, field), { options });
+  }
+  return field;
+}
+function updateImageLayout(field, next) {
+  if (field.type !== "image_radio_card") return field;
+  return __spreadValues(__spreadValues({}, field), next);
+}
+function resetFieldType(field, nextType, allFields) {
+  const base = createDefaultField(nextType, allFields);
+  return __spreadProps(__spreadValues({}, base), {
+    name: field.name,
+    label: field.label,
+    description: field.description,
+    required: field.required,
+    validation: field.validation
+  });
+}
+
+// src/molecules/dynamic-form-editor-field-editor-panel.tsx
+var import_react43 = require("react");
+var import_themes39 = require("@radix-ui/themes");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+function isRecord4(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldType(value, types) {
+  return types.some((t) => t === value);
+}
+function parseOptionalNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return void 0;
+  const num = Number(trimmed);
+  return Number.isFinite(num) ? num : void 0;
+}
+function getValidation(field) {
+  return field.validation ? field.validation : {};
+}
+function cleanValidation(next) {
+  const hasAny = next.min !== void 0 || next.max !== void 0 || typeof next.pattern === "string" && next.pattern.trim().length > 0 || typeof next.message === "string" && next.message.trim().length > 0;
+  return hasAny ? next : void 0;
+}
+function moveItem(items, fromIndex, toIndex) {
+  if (fromIndex < 0 || fromIndex >= items.length) return items;
+  if (toIndex < 0 || toIndex >= items.length) return items;
+  if (fromIndex === toIndex) return items;
+  const next = [...items];
+  const [item] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function getOptionDrafts(field) {
+  const raw = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((o) => {
+    if (!isRecord4(o)) return null;
+    const label = typeof o.label === "string" ? o.label : "";
+    const valueRaw = o.value;
+    const value = typeof valueRaw === "string" || typeof valueRaw === "number" ? String(valueRaw) : "";
+    return { label, value };
+  }).filter((v) => v !== null);
+}
+function getImageOptionDrafts(field) {
+  const raw = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw.map(
+    (o) => {
+      if (!isRecord4(o)) return null;
+      const label = typeof o.label === "string" ? o.label : "";
+      const valueRaw = o.value;
+      const value = typeof valueRaw === "string" || typeof valueRaw === "number" ? String(valueRaw) : "";
+      const imageSrc = typeof o.imageSrc === "string" ? o.imageSrc : "";
+      const alt = typeof o.alt === "string" ? o.alt : void 0;
+      return __spreadValues({ label, value, imageSrc }, alt ? { alt } : {});
+    }
+  ).filter(
+    (v) => v !== null
+  );
+}
+function toFieldOptions(options) {
+  return options.map((o) => ({ label: o.label, value: o.value }));
+}
+function toImageFieldOptions(options) {
+  return options.map((o) => __spreadValues({
+    label: o.label,
+    value: o.value,
+    imageSrc: o.imageSrc
+  }, o.alt !== void 0 ? { alt: o.alt } : {}));
+}
+function DynamicFormEditorFieldEditorPanel(props) {
+  const {
+    field,
+    fieldIndex,
+    fields,
+    readonly,
+    fieldTypes,
+    onRenameField,
+    onUpdateField,
+    onDeleteField,
+    onMoveField,
+    onDuplicateField
+  } = props;
+  const canMoveUp = fieldIndex > 0;
+  const canMoveDown = fieldIndex >= 0 && fieldIndex < fields.length - 1;
+  const placeholderValue = (0, import_react43.useMemo)(() => {
+    if (!field) return "";
+    return String(field.placeholder || "");
+  }, [field]);
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Card, { style: { flex: 1, minWidth: 520, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC \uD3B8\uC9D1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", gap: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC704\uB85C",
+            disabled: readonly || !field || !canMoveUp,
+            onClick: () => {
+              onMoveField("up");
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.ChevronUpIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC544\uB798\uB85C",
+            disabled: readonly || !field || !canMoveDown,
+            onClick: () => {
+              onMoveField("down");
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.ChevronDownIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uBCF5\uC81C",
+            disabled: readonly || !field,
+            onClick: onDuplicateField,
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.CopyIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          IconButton,
+          {
+            "aria-label": "\uD544\uB4DC \uC0AD\uC81C",
+            disabled: readonly || !field,
+            onClick: onDeleteField,
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.TrashIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    !field ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC67C\uCABD\uC5D0\uC11C \uD544\uB4DC\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "end", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                onRenameField(e.target.value);
+              },
+              value: field.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                onUpdateField(updateFieldCommonProps(field, { label: e.target.value }));
+              },
+              value: field.label
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+          Select.Root,
+          {
+            disabled: readonly,
+            onValueChange: (v) => {
+              if (!isFieldType(v, fieldTypes)) return;
+              onUpdateField(resetFieldType(field, v, fields));
+            },
+            value: field.type,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            Checkbox,
+            {
+              checked: Boolean(field.required),
+              disabled: readonly,
+              onCheckedChange: (checked) => {
+                onUpdateField(updateFieldCommonProps(field, { required: checked }));
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "\uD544\uC218" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "description" }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          TextArea,
+          {
+            disabled: readonly,
+            onChange: (e) => {
+              onUpdateField(
+                updateFieldCommonProps(field, { description: e.target.value })
+              );
+            },
+            rows: 3,
+            value: field.description || ""
+          }
+        )
+      ] }),
+      field.type === "short_text" || field.type === "long_text" || field.type === "number" || field.type === "email" || field.type === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "placeholder" }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          TextField.Root,
+          {
+            disabled: readonly,
+            onChange: (e) => {
+              onUpdateField(updateTextPlaceholder(field, e.target.value));
+            },
+            value: placeholderValue
+          }
+        )
+      ] }) : null,
+      field.type === "choice" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "orientation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+          Select.Root,
+          {
+            disabled: readonly,
+            onValueChange: (v) => {
+              const nextOrientation = v === "horizontal" ? "horizontal" : "vertical";
+              onUpdateField(updateOrientation(field, nextOrientation));
+            },
+            value: field.orientation || "vertical",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Item, { value: "vertical", children: "vertical" }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Item, { value: "horizontal", children: "horizontal" })
+              ] })
+            ]
+          }
+        )
+      ] }) : null,
+      field.type === "dropdown" || field.type === "choice" || field.type === "radio_cards" || field.type === "choices" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+            Button,
+            {
+              disabled: readonly,
+              onClick: () => {
+                const drafts = getOptionDrafts(field);
+                const nextDrafts = [
+                  ...drafts,
+                  {
+                    label: `\uC635\uC158 ${drafts.length + 1}`,
+                    value: `option${drafts.length + 1}`
+                  }
+                ];
+                onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+              },
+              size: "small",
+              variant: "soft",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.PlusIcon, {}),
+                " \uCD94\uAC00"
+              ]
+            }
+          )
+        ] }),
+        getOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "end", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "label" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.map(
+                    (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { label: e.target.value }) : d
+                  );
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                value: opt.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "value" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.map(
+                    (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { value: e.target.value }) : d
+                  );
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                value: opt.value
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { gap: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC704\uB85C",
+                disabled: readonly || i === 0,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = moveItem(drafts, i, i - 1);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.ChevronUpIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC544\uB798\uB85C",
+                disabled: readonly || i === getOptionDrafts(field).length - 1,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = moveItem(drafts, i, i + 1);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.ChevronDownIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              IconButton,
+              {
+                "aria-label": "\uC635\uC158 \uC0AD\uC81C",
+                disabled: readonly,
+                onClick: () => {
+                  const drafts = getOptionDrafts(field);
+                  const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                  onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                },
+                variant: "soft",
+                children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.TrashIcon, {})
+              }
+            )
+          ] })
+        ] }, `${opt.value}-${opt.label}`))
+      ] }) }) : null,
+      field.type === "image_radio_card" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "image options" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+            Button,
+            {
+              disabled: readonly,
+              onClick: () => {
+                const drafts = getImageOptionDrafts(field);
+                const nextDrafts = [
+                  ...drafts,
+                  {
+                    label: `\uC774\uBBF8\uC9C0 ${drafts.length + 1}`,
+                    value: `option${drafts.length + 1}`,
+                    imageSrc: "https://placehold.co/300x300/png?text=new"
+                  }
+                ];
+                onUpdateField(updateImageOptions(field, toImageFieldOptions(nextDrafts)));
+              },
+              size: "small",
+              variant: "soft",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.PlusIcon, {}),
+                " \uCD94\uAC00"
+              ]
+            }
+          )
+        ] }),
+        getImageOptionDrafts(field).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          Card,
+          {
+            style: { padding: 10 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "label" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { label: e.target.value }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.label
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "value" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { value: e.target.value }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.value
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "imageSrc" }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                  TextField.Root,
+                  {
+                    disabled: readonly,
+                    onChange: (e) => {
+                      const drafts = getImageOptionDrafts(field);
+                      const nextDrafts = drafts.map(
+                        (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { imageSrc: e.target.value }) : d
+                      );
+                      onUpdateField(
+                        updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                      );
+                    },
+                    value: opt.imageSrc
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { align: "end", gap: "2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "alt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                    TextField.Root,
+                    {
+                      disabled: readonly,
+                      onChange: (e) => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextAlt = e.target.value.trim().length === 0 ? void 0 : e.target.value;
+                        const nextDrafts = drafts.map(
+                          (d, idx) => idx === i ? __spreadProps(__spreadValues({}, d), { alt: nextAlt }) : d
+                        );
+                        onUpdateField(
+                          updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                        );
+                      },
+                      value: opt.alt || ""
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                  IconButton,
+                  {
+                    "aria-label": "\uC774\uBBF8\uC9C0 \uC635\uC158 \uC0AD\uC81C",
+                    disabled: readonly,
+                    onClick: () => {
+                      const drafts = getImageOptionDrafts(field);
+                      const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                      onUpdateField(
+                        updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                      );
+                    },
+                    variant: "soft",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_icons.TrashIcon, {})
+                  }
+                )
+              ] })
+            ] })
+          },
+          `${opt.value}-${opt.label}-${opt.imageSrc}`
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "gridColumnsCount" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  onUpdateField(
+                    updateImageLayout(field, {
+                      gridColumnsCount: parseOptionalNumber(e.target.value)
+                    })
+                  );
+                },
+                value: String(field.gridColumnsCount || "")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "gridItemHeight" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  onUpdateField(
+                    updateImageLayout(field, { gridItemHeight: e.target.value })
+                  );
+                },
+                value: String(field.gridItemHeight || "")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "gridGap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                onChange: (e) => {
+                  onUpdateField(updateImageLayout(field, { gridGap: e.target.value }));
+                },
+                value: String(field.gridGap || "")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "imageFit" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+            Select.Root,
+            {
+              disabled: readonly,
+              onValueChange: (v) => {
+                const nextFit = v === "contain" ? "contain" : "cover";
+                onUpdateField(updateImageLayout(field, { imageFit: nextFit }));
+              },
+              value: field.imageFit || "cover",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Trigger, { style: { minWidth: 220 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Select.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Item, { value: "cover", children: "cover" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Select.Item, { value: "contain", children: "contain" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { direction: "column", gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "validation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes.Flex, { gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "min" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  const current = getValidation(field);
+                  const next = cleanValidation(__spreadProps(__spreadValues({}, current), {
+                    min: parseOptionalNumber(e.target.value)
+                  }));
+                  onUpdateField(updateFieldValidation(field, next));
+                },
+                value: getValidation(field).min !== void 0 ? String(getValidation(field).min) : ""
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "max" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              TextField.Root,
+              {
+                disabled: readonly,
+                inputMode: "numeric",
+                onChange: (e) => {
+                  const current = getValidation(field);
+                  const next = cleanValidation(__spreadProps(__spreadValues({}, current), {
+                    max: parseOptionalNumber(e.target.value)
+                  }));
+                  onUpdateField(updateFieldValidation(field, next));
+                },
+                value: getValidation(field).max !== void 0 ? String(getValidation(field).max) : ""
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "pattern" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                const current = getValidation(field);
+                const next = cleanValidation(__spreadProps(__spreadValues({}, current), { pattern: e.target.value }));
+                onUpdateField(updateFieldValidation(field, next));
+              },
+              value: String(getValidation(field).pattern || "")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_themes39.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Typo, { variant: "caption", children: "message" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            TextField.Root,
+            {
+              disabled: readonly,
+              onChange: (e) => {
+                const current = getValidation(field);
+                const next = cleanValidation(__spreadProps(__spreadValues({}, current), { message: e.target.value }));
+                onUpdateField(updateFieldValidation(field, next));
+              },
+              value: String(getValidation(field).message || "")
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] }) });
+}
+
+// src/molecules/dynamic-form-editor-field-list-panel.tsx
+var import_react44 = require("react");
+var import_themes40 = require("@radix-ui/themes");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+function isFieldType2(value, types) {
+  return types.some((t) => t === value);
+}
+function DynamicFormEditorFieldListPanel(props) {
+  const {
+    fields,
+    selectedFieldName,
+    readonly,
+    fieldTypes,
+    hasFieldError,
+    onSelectFieldName,
+    onAddField
+  } = props;
+  const isEmpty = fields.length === 0;
+  const triggerPlaceholder = (0, import_react44.useMemo)(() => {
+    return readonly ? "\uCD94\uAC00(\uC77D\uAE30 \uC804\uC6A9)" : "\uCD94\uAC00";
+  }, [readonly]);
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Card, { style: { width: 340, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_themes.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_themes.Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Typo, { variant: "body", children: "\uD544\uB4DC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+        Select.Root,
+        {
+          disabled: readonly,
+          onValueChange: (v) => {
+            if (!isFieldType2(v, fieldTypes)) return;
+            onAddField(v);
+          },
+          value: "",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Select.Trigger, { placeholder: triggerPlaceholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Select.Content, { children: fieldTypes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Select.Item, { value: t, children: getFieldTypeLabel(t) }, t)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_themes.Flex, { direction: "column", gap: "2", children: [
+      isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Typo, { color: "gray", variant: "caption", children: "\uC544\uC9C1 \uD544\uB4DC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
+      fields.map((field) => {
+        const isSelected = field.name === selectedFieldName;
+        const hasError = hasFieldError(field.name);
+        return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          Card,
+          {
+            error: isSelected ? hasError : void 0,
+            onClick: () => {
+              onSelectFieldName(field.name);
+            },
+            style: {
+              padding: 10,
+              cursor: "pointer",
+              opacity: readonly ? 0.8 : 1,
+              border: isSelected ? "1px solid var(--accent-9)" : "1px solid transparent"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_themes40.Box, { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                Typo,
+                {
+                  style: {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  variant: "body",
+                  children: field.label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Typo, { color: "gray", variant: "caption", children: [
+                field.name,
+                " \xB7 ",
+                field.type,
+                field.required ? " \xB7 required" : ""
+              ] })
+            ] })
+          },
+          field.name
+        );
+      })
+    ] })
+  ] }) });
+}
+
+// src/molecules/dynamic-form-editor-issues-panel.tsx
+var import_jsx_runtime86 = require("react/jsx-runtime");
+function DynamicFormEditorIssuesPanel(props) {
+  const { issues } = props;
+  if (issues.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Card, { style: { padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_themes.Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typo, { variant: "caption", children: "\uC2A4\uD0A4\uB9C8 \uC774\uC288" }),
+    issues.map((i) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+      Typo,
+      {
+        color: i.level === "error" ? "red" : "gray",
+        variant: "caption",
+        children: [
+          "[",
+          i.level,
+          "] ",
+          i.message,
+          i.fieldName ? ` (field: ${i.fieldName})` : ""
+        ]
+      },
+      i.id
+    ))
+  ] }) });
+}
+
+// src/molecules/dynamic-form-editor-preview-panel.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
+function DynamicFormEditorPreviewPanel(props) {
+  const { show, fields } = props;
+  if (!show) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Card, { style: { width: 420, padding: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_themes.Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typo, { variant: "body", children: "\uD504\uB9AC\uBDF0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicForm.Root, { fields, onSubmit: () => void 0, readonly: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicForm.FieldList, { labelVariant: "body" }) })
+  ] }) });
+}
+
+// src/molecules/dynamic-form-editor.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+function getInitialSchema(value, defaultValue) {
+  if (value !== void 0) return normalizeSchema(value);
+  return normalizeSchema(defaultValue);
+}
+function getSelectedField(schema, selectedFieldName) {
+  if (!selectedFieldName) return { field: null, index: -1 };
+  const index = findFieldIndexByName(schema.fields, selectedFieldName);
+  if (index < 0) return { field: null, index: -1 };
+  return { field: schema.fields[index], index };
+}
+function DynamicFormEditor(props) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onSave,
+    onCancel,
+    readonly = false,
+    showPreview = false
+  } = props;
+  const isControlled = value !== void 0;
+  const [uncontrolledSchema, setUncontrolledSchema] = (0, import_react45.useState)(
+    () => getInitialSchema(void 0, defaultValue)
+  );
+  const effectiveSchema = (0, import_react45.useMemo)(() => {
+    if (isControlled) return normalizeSchema(value);
+    return uncontrolledSchema;
+  }, [isControlled, uncontrolledSchema, value]);
+  const [selectedFieldName, setSelectedFieldName] = (0, import_react45.useState)(() => {
+    var _a, _b;
+    const initialSchema = getInitialSchema(value, defaultValue);
+    return (_b = (_a = initialSchema.fields[0]) == null ? void 0 : _a.name) != null ? _b : null;
+  });
+  const selected = (0, import_react45.useMemo)(() => {
+    return getSelectedField(effectiveSchema, selectedFieldName);
+  }, [effectiveSchema, selectedFieldName]);
+  const issues = (0, import_react45.useMemo)(() => {
+    return validateDynamicFormSchema(effectiveSchema);
+  }, [effectiveSchema]);
+  const errorFieldNameSet = (0, import_react45.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    issues.forEach((i) => {
+      if (i.level === "error" && i.fieldName) set.add(i.fieldName);
+    });
+    return set;
+  }, [issues]);
+  const hasFieldError = (0, import_react45.useCallback)(
+    (fieldName) => {
+      return errorFieldNameSet.has(fieldName);
+    },
+    [errorFieldNameSet]
+  );
+  const fieldTypes = (0, import_react45.useMemo)(() => getFieldTypes(), []);
+  (0, import_react45.useEffect)(() => {
+    var _a, _b;
+    if (selectedFieldName && selected.field) return;
+    setSelectedFieldName((_b = (_a = effectiveSchema.fields[0]) == null ? void 0 : _a.name) != null ? _b : null);
+  }, [effectiveSchema.fields, selected.field, selectedFieldName]);
+  (0, import_react45.useEffect)(() => {
+    if (isControlled) return;
+    setUncontrolledSchema(getInitialSchema(void 0, defaultValue));
+  }, [defaultValue, isControlled]);
+  const applySchema = (0, import_react45.useCallback)(
+    (next) => {
+      onChange == null ? void 0 : onChange(next);
+      if (!isControlled) setUncontrolledSchema(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleAddField = (0, import_react45.useCallback)(
+    (type) => {
+      if (readonly) return;
+      const nextField = createDefaultField(type, effectiveSchema.fields);
+      const nextFields = [...effectiveSchema.fields, nextField];
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+      setSelectedFieldName(nextField.name);
+    },
+    [applySchema, effectiveSchema, readonly]
+  );
+  const handleUpdateSelectedField = (0, import_react45.useCallback)(
+    (nextField) => {
+      if (readonly) return;
+      if (!selected.field || selected.index < 0) return;
+      const nextFields = effectiveSchema.fields.map(
+        (f, i) => i === selected.index ? nextField : f
+      );
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    },
+    [applySchema, effectiveSchema, readonly, selected.field, selected.index]
+  );
+  const handleRenameSelected = (0, import_react45.useCallback)(
+    (nextName) => {
+      if (readonly) return;
+      const currentField = selected.field;
+      if (!currentField) return;
+      const others = effectiveSchema.fields.filter(
+        (f) => f.name !== currentField.name
+      );
+      const uniqueName = createUniqueFieldName(others, nextName);
+      const nextField = __spreadProps(__spreadValues({}, currentField), { name: uniqueName });
+      handleUpdateSelectedField(nextField);
+      setSelectedFieldName(uniqueName);
+    },
+    [effectiveSchema.fields, handleUpdateSelectedField, readonly, selected.field]
+  );
+  const handleDeleteSelected = (0, import_react45.useCallback)(() => {
+    if (readonly) return;
+    if (!selected.field || selected.index < 0) return;
+    const nextFields = effectiveSchema.fields.filter(
+      (_, i) => i !== selected.index
+    );
+    applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    let nextSelected = null;
+    if (nextFields.length > selected.index) nextSelected = nextFields[selected.index].name;
+    else if (nextFields.length > 0) nextSelected = nextFields[0].name;
+    setSelectedFieldName(nextSelected);
+  }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
+  const handleMoveSelected = (0, import_react45.useCallback)(
+    (direction) => {
+      if (readonly) return;
+      if (!selected.field || selected.index < 0) return;
+      const toIndex = direction === "up" ? selected.index - 1 : selected.index + 1;
+      const nextFields = moveField(
+        effectiveSchema.fields,
+        selected.index,
+        toIndex
+      );
+      applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    },
+    [applySchema, effectiveSchema, readonly, selected.field, selected.index]
+  );
+  const handleDuplicateSelected = (0, import_react45.useCallback)(() => {
+    if (readonly) return;
+    if (!selected.field || selected.index < 0) return;
+    const nextFields = duplicateField(
+      effectiveSchema.fields,
+      selected.index
+    );
+    applySchema(updateSchemaFields(effectiveSchema, nextFields));
+    const duplicatedIndex = selected.index + 1;
+    const nextSelected = nextFields.length > duplicatedIndex ? nextFields[duplicatedIndex].name : selected.field.name;
+    setSelectedFieldName(nextSelected);
+  }, [applySchema, effectiveSchema, readonly, selected.field, selected.index]);
+  const handleSave = (0, import_react45.useCallback)(() => {
+    if (!onSave) return;
+    const result = onSave(effectiveSchema);
+    void result;
+  }, [effectiveSchema, onSave]);
+  const disableSave = readonly || !onSave || hasErrorIssues(issues);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_themes.Flex, { align: "start", gap: "4", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      DynamicFormEditorFieldListPanel,
+      {
+        fieldTypes,
+        fields: effectiveSchema.fields,
+        hasFieldError,
+        onAddField: handleAddField,
+        onSelectFieldName: setSelectedFieldName,
+        readonly,
+        selectedFieldName
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_themes.Flex, { direction: "column", gap: "3", style: { flex: 1, minWidth: 520 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        DynamicFormEditorFieldEditorPanel,
+        {
+          field: selected.field,
+          fieldIndex: selected.index,
+          fieldTypes,
+          fields: effectiveSchema.fields,
+          onDeleteField: handleDeleteSelected,
+          onDuplicateField: handleDuplicateSelected,
+          onMoveField: handleMoveSelected,
+          onRenameField: handleRenameSelected,
+          onUpdateField: handleUpdateSelectedField,
+          readonly
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicFormEditorIssuesPanel, { issues }),
+      onSave || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_themes.Flex, { gap: "2", justify: "end", children: [
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { disabled: readonly, onClick: onCancel, variant: "soft", children: "\uCDE8\uC18C" }) : null,
+        onSave ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { disabled: disableSave, onClick: handleSave, children: "\uC800\uC7A5" }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicFormEditorPreviewPanel, { fields: effectiveSchema.fields, show: showPreview })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CurriculumBody,
@@ -5716,6 +7137,7 @@ function TrainingInfoGuidelineButton({
   DotNavigation,
   DownloadCard,
   DynamicForm,
+  DynamicFormEditor,
   DynamicFormField,
   DynamicFormResponseItem,
   ExpandTable,