@stamprally/admin-ui 0.11.0 → 0.12.0

package/dist/index.js

@@ -1,28 +1,171 @@
-import { resolveLocalizedText, updateLocalizedField, safeParseAdminConfig } from '@stamprally/core';
-import { useState } from 'react';
+import { resolveLocalizedText, updateLocalizedField, DEFAULT_SHEET_THEME, safeParseAdminConfig } from '@stamprally/core';
+import { useRef, useState, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/index.tsx
+function nextEntityId(prefix, ids) {
+  let index = ids.size + 1;
+  let candidate = `${prefix}-${index}`;
+  while (ids.has(candidate)) {
+    index += 1;
+    candidate = `${prefix}-${index}`;
+  }
+  return candidate;
+}
+function pathParts(path) {
+  return path.replaceAll("[", ".").replaceAll("]", "").split(".").filter((part) => part !== "");
+}
+function localizedValue(value, locale, nextValue) {
+  return updateLocalizedField(
+    typeof value === "string" || typeof value === "object" && value !== null ? value : "",
+    locale,
+    nextValue
+  );
+}
 function useAdminRallyEditor(initialConfig, options = {}) {
-  const [config, setConfig] = useState(initialConfig);
-  const update = (patch) => {
-    setConfig((current) => {
-      const next = { ...current, ...patch };
-      options.onChange?.(next);
-      return next;
-    });
-  };
-  const updateSpot = (spotId, patch) => {
-    update({
-      spots: config.spots.map((spot) => spot.id === spotId ? { ...spot, ...patch } : spot)
-    });
-  };
-  const updateReward = (rewardId, patch) => {
-    update({
-      rewards: config.rewards.map(
-        (reward) => reward.id === rewardId ? { ...reward, ...patch } : reward
-      )
-    });
+  const initialRef = useRef(initialConfig);
+  const [history, setHistory] = useState({
+    past: [],
+    present: initialConfig,
+    future: []
+  });
+  const config = history.present;
+  const commit = useCallback(
+    (value) => {
+      setHistory((current) => {
+        const next = typeof value === "function" ? value(current.present) : value;
+        if (next === current.present) return current;
+        options.onChange?.(next);
+        return { past: [...current.past, current.present], present: next, future: [] };
+      });
+    },
+    [options.onChange]
+  );
+  const setConfig = commit;
+  const update = (patch) => commit((current) => ({ ...current, ...patch }));
+  const updateSpot = (spotId, patch) => commit((current) => ({
+    ...current,
+    spots: current.spots.map((spot) => spot.id === spotId ? { ...spot, ...patch } : spot)
+  }));
+  const updateReward = (rewardId, patch) => commit((current) => ({
+    ...current,
+    rewards: current.rewards.map(
+      (reward) => reward.id === rewardId ? { ...reward, ...patch } : reward
+    )
+  }));
+  const addSpot = (spotData = {}) => commit((current) => {
+    const id = spotData.id ?? nextEntityId("spot", new Set(current.spots.map((spot) => spot.id)));
+    const base = newSpot(current.spots.length);
+    return {
+      ...current,
+      spots: [...current.spots, { ...base, ...spotData, id, orderIndex: current.spots.length }]
+    };
+  });
+  const removeSpot = (spotId) => commit((current) => ({
+    ...current,
+    spots: current.spots.filter((spot) => spot.id !== spotId).map((spot, index) => ({ ...spot, orderIndex: index }))
+  }));
+  const reorderSpots = (fromIndex, toIndex) => commit((current) => ({ ...current, spots: moveTo(current.spots, fromIndex, toIndex) }));
+  const duplicateSpot = (spotId) => commit((current) => {
+    const source = current.spots.find((spot) => spot.id === spotId);
+    if (source === void 0) return current;
+    const id = nextEntityId("spot-copy", new Set(current.spots.map((spot) => spot.id)));
+    const copy = { ...structuredClone(source), id, orderIndex: current.spots.length };
+    return { ...current, spots: [...current.spots, copy] };
+  });
+  const addReward = (rewardData = {}) => commit((current) => {
+    const id = rewardData.id ?? nextEntityId("reward", new Set(current.rewards.map((item) => item.id)));
+    return {
+      ...current,
+      rewards: [...current.rewards, { ...newReward(current.rewards.length), ...rewardData, id }]
+    };
+  });
+  const removeReward = (rewardId) => commit((current) => ({
+    ...current,
+    rewards: current.rewards.filter((item) => item.id !== rewardId)
+  }));
+  const duplicateReward = (rewardId) => commit((current) => {
+    const source = current.rewards.find((reward) => reward.id === rewardId);
+    if (source === void 0) return current;
+    const id = nextEntityId("reward-copy", new Set(current.rewards.map((item) => item.id)));
+    return { ...current, rewards: [...current.rewards, { ...structuredClone(source), id }] };
+  });
+  const addCondition = (spotId, nextCondition) => commit((current) => ({
+    ...current,
+    spots: current.spots.map(
+      (spot) => spot.id !== spotId ? spot : { ...spot, conditions: [...spot.conditions, structuredClone(nextCondition)] }
+    )
+  }));
+  const removeCondition = (spotId, conditionIndex) => commit((current) => ({
+    ...current,
+    spots: current.spots.map(
+      (spot) => spot.id !== spotId ? spot : { ...spot, conditions: spot.conditions.filter((_, index) => index !== conditionIndex) }
+    )
+  }));
+  const updateLocalized = (path, locale, value) => commit((current) => {
+    const parts = pathParts(path);
+    if (parts[0] === "spots" && parts.length >= 3) {
+      const requestedIndex = parts[1];
+      const index = requestedIndex !== void 0 && /^\d+$/.test(requestedIndex) ? Number(requestedIndex) : current.spots.findIndex((spot) => spot.id === requestedIndex);
+      const field2 = parts[2];
+      if (index < 0 || field2 === void 0 || current.spots[index] === void 0) return current;
+      return {
+        ...current,
+        spots: current.spots.map(
+          (spot, spotIndex) => spotIndex === index ? {
+            ...spot,
+            [field2]: localizedValue(spot[field2], locale, value)
+          } : spot
+        )
+      };
+    }
+    if (parts[0] === "rewards" && parts.length >= 3) {
+      const requestedIndex = parts[1];
+      const index = requestedIndex !== void 0 && /^\d+$/.test(requestedIndex) ? Number(requestedIndex) : current.rewards.findIndex((reward) => reward.id === requestedIndex);
+      const field2 = parts[2];
+      if (index < 0 || field2 === void 0 || current.rewards[index] === void 0)
+        return current;
+      return {
+        ...current,
+        rewards: current.rewards.map(
+          (reward, rewardIndex) => rewardIndex === index ? {
+            ...reward,
+            [field2]: localizedValue(reward[field2], locale, value)
+          } : reward
+        )
+      };
+    }
+    const field = parts[0];
+    if (field === void 0) return current;
+    return {
+      ...current,
+      [field]: localizedValue(current[field], locale, value)
+    };
+  });
+  const undo = () => setHistory((current) => {
+    const previous = current.past.at(-1);
+    if (previous === void 0) return current;
+    options.onChange?.(previous);
+    return {
+      past: current.past.slice(0, -1),
+      present: previous,
+      future: [current.present, ...current.future]
+    };
+  });
+  const redo = () => setHistory((current) => {
+    const next = current.future[0];
+    if (next === void 0) return current;
+    options.onChange?.(next);
+    return {
+      past: [...current.past, current.present],
+      present: next,
+      future: current.future.slice(1)
+    };
+  });
+  const resetConfig = (newConfig) => {
+    initialRef.current = newConfig;
+    setHistory({ past: [], present: newConfig, future: [] });
+    options.onChange?.(newConfig);
   };
   return {
     config,
@@ -30,8 +173,23 @@ function useAdminRallyEditor(initialConfig, options = {}) {
     update,
     updateSpot,
     updateReward,
-    reset: () => setConfig(initialConfig),
-    isDirty: config !== initialConfig
+    addSpot,
+    removeSpot,
+    reorderSpots: (fromIndex, toIndex) => reorderSpots(fromIndex, toIndex),
+    duplicateSpot,
+    addReward,
+    removeReward,
+    duplicateReward,
+    addCondition,
+    removeCondition,
+    updateLocalizedField: updateLocalized,
+    undo,
+    redo,
+    canUndo: history.past.length > 0,
+    canRedo: history.future.length > 0,
+    resetConfig,
+    reset: () => resetConfig(initialRef.current),
+    isDirty: config !== initialRef.current
   };
 }
 function useSpotEditor(spotId, options = {}) {
@@ -113,6 +271,16 @@ function move(items, index, direction) {
   if (item !== void 0) next.splice(target, 0, item);
   return next;
 }
+function moveTo(items, fromIndex, toIndex) {
+  if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex >= items.length || fromIndex === toIndex)
+    return items;
+  const next = [...items];
+  const [item] = next.splice(fromIndex, 1);
+  if (item !== void 0) next.splice(toIndex, 0, item);
+  return next.map(
+    (entry, index) => typeof entry === "object" && entry !== null && "orderIndex" in entry ? { ...entry, orderIndex: index } : entry
+  );
+}
 function ConditionEditor({
   condition: condition2,
   onChange,
@@ -275,39 +443,23 @@ function SpotItemForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      field("externalReferences", "External references"),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: JSON.stringify(spot.externalReferences ?? [], null, 2),
-          onChange: (event) => {
-            try {
-              const parsed = JSON.parse(event.target.value);
-              if (Array.isArray(parsed)) update({ externalReferences: parsed });
-            } catch {
-            }
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      field("metadata", "Metadata"),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: JSON.stringify(spot.metadata ?? {}, null, 2),
-          onChange: (event) => {
-            try {
-              const parsed = JSON.parse(event.target.value);
-              if (parsed !== null && typeof parsed === "object" && !Array.isArray(parsed))
-                update({ metadata: parsed });
-            } catch {
-            }
-          }
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx(
+      ExternalReferencesEditor,
+      {
+        references: spot.externalReferences ?? [],
+        onChange: (externalReferences) => update({ externalReferences }),
+        label: field("externalReferences", "External references")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetadataSection,
+      {
+        name: `spot-${spot.id}`,
+        values: spot.metadata ?? {},
+        onChange: (metadata) => update({ metadata }),
+        label: field("metadata", "Metadata")
+      }
+    ),
     spot.conditions.map((item, index) => /* @__PURE__ */ jsx(
       ConditionEditor,
       {
@@ -338,6 +490,92 @@ function SpotItemForm({
     onRemove !== void 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: field("removeSpot", "Remove spot") })
   ] });
 }
+function newUnlockCondition(type) {
+  if (type === "stamp_count") return { type, count: 1 };
+  if (type === "stamps") return { type, stampIds: [] };
+  return { type, conditions: [] };
+}
+function RewardUnlockConditionEditor({
+  condition: unlock,
+  onChange,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: "Unlock condition" }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Type",
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: unlock.type,
+          onChange: (event) => onChange(newUnlockCondition(event.target.value)),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "stamp_count", children: "Stamp count" }),
+            /* @__PURE__ */ jsx("option", { value: "stamps", children: "Specific stamps" }),
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All conditions" }),
+            /* @__PURE__ */ jsx("option", { value: "any", children: "Any condition" })
+          ]
+        }
+      )
+    ] }),
+    unlock.type === "stamp_count" && /* @__PURE__ */ jsxs("label", { children: [
+      "Count",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          value: unlock.count,
+          onChange: (event) => onChange({ ...unlock, count: Number(event.target.value) })
+        }
+      )
+    ] }),
+    unlock.type === "stamps" && /* @__PURE__ */ jsxs("label", { children: [
+      "Stamp IDs",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: unlock.stampIds.join(", "),
+          onChange: (event) => onChange({
+            ...unlock,
+            stampIds: event.target.value.split(",").map((value) => value.trim()).filter(Boolean)
+          })
+        }
+      )
+    ] }),
+    (unlock.type === "all" || unlock.type === "any") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      unlock.conditions.map((child, index) => /* @__PURE__ */ jsx(
+        RewardUnlockConditionEditor,
+        {
+          condition: child,
+          onChange: (next) => onChange({
+            ...unlock,
+            conditions: unlock.conditions.map(
+              (current, childIndex) => childIndex === index ? next : current
+            )
+          }),
+          onRemove: () => onChange({
+            ...unlock,
+            conditions: unlock.conditions.filter((_, childIndex) => childIndex !== index)
+          })
+        },
+        `${unlock.type}-${JSON.stringify(child)}`
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange({
+            ...unlock,
+            conditions: [...unlock.conditions, newUnlockCondition("stamp_count")]
+          }),
+          children: "Add nested condition"
+        }
+      )
+    ] }),
+    onRemove !== void 0 && /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: "Remove condition" })
+  ] });
+}
 function RewardItemForm({
   reward,
   locale,
@@ -423,20 +661,36 @@ function RewardItemForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      field("unlockConditions", "Unlock conditions"),
+    /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: field("unlockConditions", "Unlock conditions") }),
+      (reward.conditions ?? []).map((unlock, index) => /* @__PURE__ */ jsx(
+        RewardUnlockConditionEditor,
+        {
+          condition: unlock,
+          onChange: (next) => onChange({
+            ...reward,
+            conditions: (reward.conditions ?? []).map(
+              (current, conditionIndex) => conditionIndex === index ? next : current
+            )
+          }),
+          onRemove: () => onChange({
+            ...reward,
+            conditions: (reward.conditions ?? []).filter(
+              (_, conditionIndex) => conditionIndex !== index
+            )
+          })
+        },
+        `${reward.id}-unlock-${JSON.stringify(unlock)}`
+      )),
       /* @__PURE__ */ jsx(
-        "textarea",
+        "button",
         {
-          value: JSON.stringify(reward.conditions ?? [], null, 2),
-          onChange: (event) => {
-            try {
-              const parsed = JSON.parse(event.target.value);
-              if (Array.isArray(parsed))
-                onChange({ ...reward, conditions: parsed });
-            } catch {
-            }
-          }
+          type: "button",
+          onClick: () => onChange({
+            ...reward,
+            conditions: [...reward.conditions ?? [], newUnlockCondition("stamp_count")]
+          }),
+          children: field("addUnlockCondition", "Add unlock condition")
         }
       )
     ] }),
@@ -496,6 +750,257 @@ function RewardItemForm({
     /* @__PURE__ */ jsx("button", { type: "button", onClick: onRemove, children: field("removeReward", "Remove reward") })
   ] });
 }
+function ThemeEditor({
+  theme,
+  onChange,
+  locale,
+  dictionary
+}) {
+  const activeLocale = locale ?? "en";
+  const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
+  const update = (key, value) => onChange({ ...theme, [key]: value });
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: field("theme", "Theme") }),
+    [
+      "primaryColor",
+      "backgroundColor",
+      "cardBackgroundColor",
+      "textColor",
+      "backgroundImageUrl",
+      "completedStampColor"
+    ].map((key) => /* @__PURE__ */ jsxs("label", { children: [
+      field(key, key),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: key.toLowerCase().includes("color") ? "color" : "url",
+          value: theme[key] ?? "",
+          onChange: (event) => update(key, event.target.value)
+        }
+      )
+    ] }, key)),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("slotShape", "Slot shape"),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: theme.slotShape,
+          onChange: (event) => update("slotShape", event.target.value),
+          children: ["circle", "square", "rounded"].map((shape) => /* @__PURE__ */ jsx("option", { value: shape, children: field(`slotShape.${shape}`, shape) }, shape))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("gridColumns", "Grid columns"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 1,
+          max: 12,
+          value: theme.gridColumns,
+          onChange: (event) => update("gridColumns", Number(event.target.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("fontFamily", "Font family"),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: theme.fontFamily ?? "system-ui",
+          onChange: (event) => update("fontFamily", event.target.value),
+          children: ["system-ui", "serif", "rounded-sans", "monospace", "handwritten"].map(
+            (font) => /* @__PURE__ */ jsx("option", { value: font, children: font }, font)
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      field("unclaimedOpacity", "Unclaimed opacity"),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          value: theme.unclaimedOpacity ?? 1,
+          onChange: (event) => update("unclaimedOpacity", Number(event.target.value))
+        }
+      )
+    ] })
+  ] });
+}
+function metadataValue(value) {
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+function ExternalReferencesEditor({
+  references,
+  onChange,
+  label = "External references"
+}) {
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: label }),
+    references.map((reference) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Type",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: reference.type,
+            onChange: (event) => onChange(
+              references.map(
+                (current) => current === reference ? { ...current, type: event.target.value } : current
+              )
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "ID",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: reference.id,
+            onChange: (event) => onChange(
+              references.map(
+                (current) => current === reference ? { ...current, id: event.target.value } : current
+              )
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "URL",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "url",
+            value: reference.url ?? "",
+            onChange: (event) => onChange(
+              references.map(
+                (current) => current === reference ? { ...current, url: event.target.value } : current
+              )
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(references.filter((current) => current !== reference)),
+          children: "Remove reference"
+        }
+      )
+    ] }, `${reference.type}-${reference.id}-${reference.url ?? ""}`)),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange([...references, { type: "", id: "" }]), children: "Add reference" })
+  ] });
+}
+function MetadataSection({
+  name,
+  values,
+  onChange,
+  label
+}) {
+  const entries = Object.entries(values);
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: label }),
+    entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Key",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: key,
+            onChange: (event) => {
+              const next = { ...values };
+              delete next[key];
+              next[event.target.value] = value;
+              onChange(next);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Value",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: metadataValue(value),
+            onChange: (event) => {
+              let nextValue = event.target.value;
+              try {
+                nextValue = JSON.parse(event.target.value);
+              } catch {
+              }
+              onChange({ ...values, [key]: nextValue });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const next = { ...values };
+            delete next[key];
+            onChange(next);
+          },
+          children: "Remove"
+        }
+      )
+    ] }, `${name}-${key}`)),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          let index = entries.length + 1;
+          let key = `key${index}`;
+          while (key in values) {
+            index += 1;
+            key = `key${index}`;
+          }
+          onChange({ ...values, [key]: "" });
+        },
+        children: "Add field"
+      }
+    )
+  ] });
+}
+function MetadataEditor({
+  publicMetadata = {},
+  serverMetadata = {},
+  onPublicMetadataChange,
+  onServerMetadataChange,
+  locale,
+  dictionary
+}) {
+  const activeLocale = locale ?? "en";
+  return /* @__PURE__ */ jsxs("section", { "aria-label": text(dictionary, activeLocale, "metadata", "Metadata"), children: [
+    /* @__PURE__ */ jsx(
+      MetadataSection,
+      {
+        name: "public",
+        values: publicMetadata,
+        onChange: onPublicMetadataChange,
+        label: "Public metadata"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetadataSection,
+      {
+        name: "server",
+        values: serverMetadata,
+        onChange: onServerMetadataChange,
+        label: "Server metadata"
+      }
+    )
+  ] });
+}
 function AdminRallyEditor({ config, onChange, locale, dictionary }) {
   const activeLocale = locale ?? "en";
   const field = (key, fallback) => text(dictionary, activeLocale, key, fallback);
@@ -529,45 +1034,36 @@ function AdminRallyEditor({ config, onChange, locale, dictionary }) {
         }
       )
     ] }),
+    /* @__PURE__ */ jsx(
+      ThemeEditor,
+      {
+        theme: config.theme ?? DEFAULT_SHEET_THEME,
+        locale: activeLocale,
+        ...dictionary === void 0 ? {} : { dictionary },
+        onChange: (theme) => update({ theme })
+      }
+    ),
     /* @__PURE__ */ jsxs("label", { children: [
-      field("theme", "Theme (JSON)"),
+      field("serverEndpoint", "Server endpoint"),
       /* @__PURE__ */ jsx(
-        "textarea",
+        "input",
         {
-          "aria-label": field("theme", "Theme (JSON)"),
-          value: JSON.stringify(config.theme ?? {}, null, 2),
-          onChange: (event) => {
-            try {
-              const parsed = JSON.parse(event.target.value);
-              if (parsed !== null && typeof parsed === "object" && !Array.isArray(parsed))
-                update({ theme: parsed });
-            } catch {
-            }
-          }
+          value: config.serverEndpoint ?? "",
+          onChange: (event) => update({ serverEndpoint: event.target.value })
         }
       )
     ] }),
-    ["serverEndpoint", "publicMetadata", "serverMetadata"].map((key) => /* @__PURE__ */ jsxs("label", { children: [
-      field(key, key),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: key === "serverEndpoint" ? config.serverEndpoint ?? "" : JSON.stringify(config[key] ?? {}, null, 2),
-          onChange: (event) => {
-            if (key === "serverEndpoint") {
-              update({ serverEndpoint: event.target.value });
-              return;
-            }
-            try {
-              const parsed = JSON.parse(event.target.value);
-              if (parsed !== null && typeof parsed === "object" && !Array.isArray(parsed))
-                update({ [key]: parsed });
-            } catch {
-            }
-          }
-        }
-      )
-    ] }, key)),
+    /* @__PURE__ */ jsx(
+      MetadataEditor,
+      {
+        publicMetadata: config.publicMetadata ?? config.metadata ?? {},
+        serverMetadata: config.serverMetadata ?? {},
+        locale: activeLocale,
+        ...dictionary === void 0 ? {} : { dictionary },
+        onPublicMetadataChange: (metadata) => update({ publicMetadata: metadata }),
+        onServerMetadataChange: (metadata) => update({ serverMetadata: metadata })
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -700,6 +1196,6 @@ function JsonConfigIO({ config, onImport, locale, dictionary }) {
   ] });
 }
 
-export { AdminRallyEditor, ConditionEditor, GeneralSettingsForm, JsonConfigIO, RallyEditor, SpotItemForm, useAdminRallyEditor, useRewardEditor, useSpotEditor };
+export { AdminRallyEditor, ConditionEditor, ExternalReferencesEditor, GeneralSettingsForm, JsonConfigIO, MetadataEditor, RallyEditor, RewardItemForm, RewardUnlockConditionEditor, SpotItemForm, ThemeEditor, useAdminRallyEditor, useRewardEditor, useSpotEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map