@wipco/sdui 0.31.0 → 0.33.0

package/dist/chunk-CTSVZTIT.js

@@ -0,0 +1,122 @@
+import { Text } from './chunk-QO6UJAQN.js';
+import { Switch, Field, Select, Input } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React, { useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function normalizeSchema(schema) {
+  if (!Array.isArray(schema)) return [];
+  return schema.filter((item) => Boolean(item) && typeof item === "object").filter((item) => typeof item.key === "string" && item.key.trim() !== "");
+}
+function OptionValueFieldsImpl({
+  schema,
+  value,
+  onChange,
+  disabled = false,
+  readOnly = false
+}) {
+  const fields = useMemo(() => normalizeSchema(schema), [schema]);
+  const current = useMemo(
+    () => value && typeof value === "object" && !Array.isArray(value) ? value : {},
+    [value]
+  );
+  const strays = useMemo(() => {
+    const known = new Set(fields.map((field) => field.key));
+    return Object.entries(current).filter(([key]) => !known.has(key));
+  }, [fields, current]);
+  const set = (key, next) => {
+    const draft = { ...current };
+    if (next === "" || next === void 0 || next === null) delete draft[key];
+    else draft[key] = next;
+    onChange?.(draft);
+  };
+  if (readOnly) {
+    const filled = fields.filter((field) => {
+      const raw = current[field.key];
+      return raw !== void 0 && raw !== null && raw !== "";
+    });
+    if (fields.length === 0 || filled.length === 0) {
+      return /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { color: "var(--wp-text-muted)" }, value: "\u2014" });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "wp-kv", children: filled.map((field) => {
+      const raw = current[field.key];
+      const shown = field.type === "boolean" ? raw === true ? "\uC608" : "\uC544\uB2C8\uC624" : `${String(raw)}${field.unit ? ` ${field.unit}` : ""}`;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: field.label?.trim() || field.key }),
+        /* @__PURE__ */ jsx("span", { className: "wp-kv__v", children: shown })
+      ] }, field.key);
+    }) });
+  }
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { color: "var(--wp-text-muted)" }, children: "\uC774 \uC7A5\uBE44\uC5D0 \uC815\uD574 \uB454 \uC635\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC7A5\uBE44 \uC0C1\uC138\uC758 \uC218\uC815 \u2192 \uC635\uC158 \uD0ED\uC5D0\uC11C \uBA3C\uC800 \uC11C\uC2DD\uC744 \uC815\uD558\uC138\uC694." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    fields.map((field) => {
+      const label = field.label?.trim() || field.key;
+      const raw = current[field.key];
+      if (field.type === "boolean") {
+        return /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { alignItems: "center", gap: "var(--wp-space-3)" }, children: [
+          /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { flex: 1 }, value: label }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: raw === true,
+              disabled,
+              onChange: (event) => set(field.key, event.target.checked ? true : void 0)
+            }
+          )
+        ] }, field.key);
+      }
+      if (field.type === "select") {
+        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: raw === void 0 || raw === null ? "" : String(raw),
+            disabled,
+            placeholder: "\uC120\uD0DD \uC548 \uD568",
+            options: (field.options ?? []).map((option) => ({ value: option, label: option })),
+            onChange: (event) => set(field.key, event.target.value)
+          }
+        ) }, field.key);
+      }
+      if (field.type === "number") {
+        return /* @__PURE__ */ jsx(Field, { label: field.unit ? `${label} (${field.unit})` : label, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            value: raw === void 0 || raw === null ? "" : String(raw),
+            disabled,
+            onChange: (event) => {
+              const text = event.target.value;
+              if (text === "") return set(field.key, void 0);
+              const parsed = Number(text);
+              set(field.key, Number.isFinite(parsed) ? parsed : text);
+            }
+          }
+        ) }, field.key);
+      }
+      return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: raw === void 0 || raw === null ? "" : String(raw),
+          disabled,
+          onChange: (event) => set(field.key, event.target.value)
+        }
+      ) }, field.key);
+    }),
+    strays.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-1)" }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          preset: "caption",
+          value: `\uC11C\uC2DD \uBC16 \uAC12 ${strays.length}\uAC1C \u2014 \uADF8\uB300\uB85C \uBCF4\uAD00\uB429\uB2C8\uB2E4`,
+          style: { color: "var(--wp-text-muted)" }
+        }
+      ),
+      strays.map(([key, strayValue]) => /* @__PURE__ */ jsx(Text, { preset: "caption", value: `${key}: ${JSON.stringify(strayValue)}` }, key))
+    ] }) : null
+  ] });
+}
+var OptionValueFields = boxed(OptionValueFieldsImpl, "OptionValueFields");
+
+export { OptionValueFields };

package/dist/chunk-KVFHPBAY.js

@@ -0,0 +1,124 @@
+import { TimePicker } from './chunk-SNRKPEWT.js';
+import { DatePicker } from './chunk-EFMKWPZ3.js';
+import { Field } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function toHm(value) {
+  if (typeof value !== "string") return "";
+  const trimmed = value.trim();
+  return /^\d{2}:\d{2}/.test(trimmed) ? trimmed.slice(0, 5) : trimmed;
+}
+function toYmd(value) {
+  if (typeof value !== "string") return "";
+  const trimmed = value.trim();
+  return /^\d{4}-\d{2}-\d{2}/.test(trimmed) ? trimmed.slice(0, 10) : trimmed;
+}
+function formFromValue(value) {
+  const record = value && typeof value === "object" ? value : {};
+  const startDate = toYmd(record.startDate);
+  const endDate = toYmd(record.endDate);
+  return {
+    startDate,
+    endDate,
+    // 시간은 날짜가 있어야 의미가 있다 — 저장분이 어긋나 있어도 폼에서 정합화.
+    startTime: startDate ? toHm(record.startTime) : "",
+    endTime: endDate ? toHm(record.endTime) : ""
+  };
+}
+function periodError(form) {
+  if (form.startDate && form.endDate && form.endDate < form.startDate) {
+    return "\uD3C9\uAC00 \uC885\uB8CC\uC77C\uC740 \uC2DC\uC791\uC77C\uBCF4\uB2E4 \uBE60\uB97C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.";
+  }
+  if (form.startDate && form.endDate && form.startDate === form.endDate && form.startTime && form.endTime && form.endTime <= form.startTime) {
+    return "\uC885\uB8CC \uC2DC\uAC04\uC740 \uC2DC\uC791 \uC2DC\uAC04\uBCF4\uB2E4 \uB2A6\uC5B4\uC57C \uD569\uB2C8\uB2E4.";
+  }
+  return null;
+}
+function envelopeFrom(form) {
+  return {
+    startDate: form.startDate || null,
+    endDate: form.endDate || null,
+    startTime: form.startDate && form.startTime || null,
+    endTime: form.endDate && form.endTime || null,
+    error: periodError(form)
+  };
+}
+function StagePeriodEditorImpl({ value, onChange, resetKey, disabled = false }) {
+  const [form, setForm] = useState(() => formFromValue(value));
+  const seededFor = useRef(resetKey);
+  useEffect(() => {
+    if (seededFor.current === resetKey) return;
+    seededFor.current = resetKey;
+    setForm(formFromValue(value));
+  }, [resetKey, value]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    onChangeRef.current?.(envelopeFrom(form));
+  }, [form]);
+  const error = useMemo(() => periodError(form), [form]);
+  const patch = (partial) => setForm((previous) => ({ ...previous, ...partial }));
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: "var(--wp-space-3)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Field, { label: "\uC2DC\uC791\uC77C", children: /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              value: form.startDate,
+              disabled,
+              max: form.endDate || void 0,
+              onChange: (next) => patch({
+                startDate: next,
+                // 시간은 날짜가 있어야 의미가 있으므로 날짜를 지우면 함께 비운다.
+                startTime: next ? form.startTime : ""
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "\uC2DC\uC791 \uC2DC\uAC04 (\uC120\uD0DD)", children: /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              value: form.startTime,
+              disabled: disabled || !form.startDate,
+              onChange: (next) => patch({ startTime: next })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "\uC885\uB8CC\uC77C", children: /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              value: form.endDate,
+              disabled,
+              min: form.startDate || void 0,
+              onChange: (next) => patch({
+                endDate: next,
+                endTime: next ? form.endTime : ""
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "\uC885\uB8CC \uC2DC\uAC04 (\uC120\uD0DD)", children: /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              min: form.endDate && form.endDate === form.startDate ? form.startTime || void 0 : void 0,
+              value: form.endTime,
+              disabled: disabled || !form.endDate,
+              onChange: (next) => patch({ endTime: next })
+            }
+          ) })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-danger)" }, children: error }) : null,
+    /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: "\uB2E8\uACC4 \uAE30\uAC04\uC744 \uB530\uB85C \uC815\uD558\uC9C0 \uC54A\uC73C\uBA74 \uD68C\uCC28 \uAE30\uAC04\uC744 \uB530\uB985\uB2C8\uB2E4. \uD68C\uCC28 \uAE30\uAC04\uC744 \uBC14\uAFB8\uBA74 \uD68C\uCC28 \uAE30\uAC04\uC744 \uB530\uB974\uB358 \uB2E8\uACC4\uB9CC \uD568\uAED8 \uBC14\uB01D\uB2C8\uB2E4." })
+  ] });
+}
+var StagePeriodEditor = boxed(StagePeriodEditorImpl, "StagePeriodEditor");
+
+export { StagePeriodEditor };

package/dist/chunk-PCMJE2GO.js

@@ -0,0 +1,109 @@
+import { useSduiAssetResolver } from './chunk-DKPNFEVU.js';
+import { Spinner, Icon } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FALLBACK_NOTE = "QR \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 \u2014 \uC11C\uBC84 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uC138\uC694";
+var boxStyle = (size) => ({
+  width: size,
+  height: size,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--wp-space-2)"
+});
+function QRDisplayImpl({
+  path,
+  url,
+  size = 128,
+  endpoint = "/qr",
+  caption
+}) {
+  const [absoluteUrl, setAbsoluteUrl] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const resolveAsset = useSduiAssetResolver();
+  useEffect(() => {
+    setFailed(false);
+    try {
+      const base = window.location.origin;
+      const target = url ?? path ?? window.location.href;
+      setAbsoluteUrl(new URL(target, base).toString());
+    } catch {
+      setAbsoluteUrl(null);
+      setFailed(true);
+    }
+  }, [path, url]);
+  const raw = absoluteUrl !== null ? `${endpoint}${endpoint.includes("?") ? "&" : "?"}data=${encodeURIComponent(absoluteUrl)}&size=${size}` : null;
+  const src = raw === null ? null : resolveAsset(raw, { component: "QRDisplay", prop: "src", kind: "attribute" });
+  const pending = absoluteUrl === null && !failed;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "var(--wp-space-3)",
+        margin: 0,
+        padding: "var(--wp-space-4)",
+        background: "var(--wp-surface-card)",
+        border: "1px solid var(--wp-border-subtle)",
+        borderRadius: "var(--wp-radius-md)",
+        boxShadow: "var(--wp-shadow-xs)"
+      },
+      children: [
+        failed || src === null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "img",
+            "aria-label": FALLBACK_NOTE,
+            style: {
+              ...boxStyle(size),
+              border: "1px dashed var(--wp-border-strong)",
+              borderRadius: "var(--wp-radius-md)",
+              background: "var(--wp-surface-sunken)",
+              color: "var(--wp-text-subtle)"
+            },
+            children: pending ? /* @__PURE__ */ jsx(Spinner, { label: "QR \uC900\uBE44 \uC911" }) : /* @__PURE__ */ jsx(Icon, { name: "scan", size: 24 })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            width: size,
+            height: size,
+            alt: caption ? `QR \uCF54\uB4DC \u2014 ${caption}` : "QR \uCF54\uB4DC",
+            onError: () => setFailed(true),
+            style: {
+              display: "block",
+              borderRadius: "var(--wp-radius-xs)",
+              maxWidth: "100%"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "figcaption",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "var(--wp-space-1)",
+              maxWidth: Math.max(size, 160),
+              textAlign: "center"
+            },
+            children: [
+              caption && /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: caption }),
+              failed && /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-subtle)" }, children: FALLBACK_NOTE })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var QRDisplay = boxed(QRDisplayImpl, "QRDisplay");
+
+export { QRDisplay };

package/dist/chunk-QO6UJAQN.js

@@ -0,0 +1,145 @@
+import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle } from './chunk-SAN4IX6N.js';
+import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function paddingStyle(padding) {
+  const value = padding === void 0 ? void 0 : PADDING_CSS[padding];
+  return value === void 0 ? {} : { padding: value };
+}
+var PADDING_CSS = {
+  "2": "2px",
+  "4": "4px",
+  "8": "8px",
+  "12": "12px",
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "32": "32px"
+};
+function Grid({
+  columns = 3,
+  template,
+  gap,
+  align,
+  justify,
+  wrap,
+  padding,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClass("wp-grid", !template && columnsClass(columns), className),
+      style: mergeStyle(
+        {
+          ...template ? { gridTemplateColumns: template } : null,
+          ...containerLayoutStyle({ gap, align, justify, wrap }),
+          ...paddingStyle(padding)
+        },
+        style
+      ),
+      children
+    }
+  );
+}
+function Row({ justify, gap, align, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClass("wp-row", justify === "between" && "wp-row--between", className),
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
+      children
+    }
+  );
+}
+function Actions({ justify = "end", gap, align, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClass("wp-row", className),
+      style: mergeStyle({ flex: 1, ...containerLayoutStyle({ gap, align, justify, wrap }) }, style),
+      children
+    }
+  );
+}
+function Col({ gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsx("div", { className: joinClass("wp-col", className), style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style), children });
+}
+var SPACER_STEPS = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 8]);
+function Spacer({ size, className, style }) {
+  const step = size !== void 0 && SPACER_STEPS.has(Number(size)) ? Number(size) : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClass("wp-spacer", step !== void 0 && `wp-spacer--${step}`, className),
+      style
+    }
+  );
+}
+function Section({ title, gap, align, justify, wrap, className, style, children }) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: joinClass("wp-col", className),
+      style: mergeStyle(containerLayoutStyle({ gap, align, justify, wrap }), style),
+      children: [
+        title ? /* @__PURE__ */ jsx("h2", { className: "wp-h4", children: title }) : null,
+        children
+      ]
+    }
+  );
+}
+var TEXT_WRAP_CSS = {
+  normal: {},
+  preserve: { whiteSpace: "pre-wrap" },
+  anywhere: { whiteSpace: "pre-wrap", wordBreak: "break-all" }
+};
+function Text({
+  preset = "body",
+  as: Tag = "p",
+  weight,
+  textAlign,
+  wrap,
+  className,
+  style,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: joinClass(`wp-${preset}`, className),
+      style: mergeStyle({ ...typographyStyle({ weight, textAlign }), ...TEXT_WRAP_CSS[wrap ?? "normal"] }, style),
+      children: value ?? children
+    }
+  );
+}
+function KeyValueList({ source, items, className, style }) {
+  return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
+    const raw = item.key ? source?.[item.key] : item.value;
+    const content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
+      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })
+    ] }, index);
+  }) });
+}
+function PageHead({ title, subtitle, actions, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: joinClass("wp-page-head", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+      title ? /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: subtitle }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "wp-page-head__actions", children: actions }) : null
+  ] });
+}
+function Show({ when, children }) {
+  return when ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+function Divider({ style, className }) {
+  return /* @__PURE__ */ jsx("hr", { className: joinClass("wp-divider", className), style });
+}
+
+export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text };

package/dist/chunk-TIY4A223.js

@@ -0,0 +1,140 @@
+import { Text } from './chunk-QO6UJAQN.js';
+import { Field, Input, Select, IconButton, Button } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OPTION_TYPES = [
+  { value: "text", label: "\uBB38\uC790\uC5F4" },
+  { value: "number", label: "\uC22B\uC790" },
+  { value: "select", label: "\uC120\uD0DD" },
+  { value: "boolean", label: "\uC608/\uC544\uB2C8\uC624" }
+];
+function normalize(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item) => Boolean(item) && typeof item === "object").map((item) => ({
+    key: typeof item.key === "string" ? item.key : "",
+    label: typeof item.label === "string" ? item.label : void 0,
+    type: OPTION_TYPES.some((t) => t.value === item.type) ? item.type : "text",
+    options: Array.isArray(item.options) ? item.options.map((o) => String(o)) : void 0,
+    unit: typeof item.unit === "string" ? item.unit : void 0
+  }));
+}
+function OptionSchemaEditorImpl({ value, onChange, disabled = false }) {
+  const config = useMemo(
+    () => value && typeof value === "object" && !Array.isArray(value) ? value : {},
+    [value]
+  );
+  const fields = useMemo(() => normalize(config.options), [config.options]);
+  const duplicates = useMemo(() => {
+    const seen = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      const key = field.key.trim();
+      if (!key) continue;
+      seen.set(key, (seen.get(key) ?? 0) + 1);
+    }
+    return new Set([...seen.entries()].filter(([, count]) => count > 1).map(([key]) => key));
+  }, [fields]);
+  const emit = (next) => onChange?.({ ...config, options: next });
+  const patch = (index, change) => emit(fields.map((field, i) => i === index ? { ...field, ...change } : field));
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+    fields.length === 0 ? /* @__PURE__ */ jsx(Text, { preset: "body-sm", style: { color: "var(--wp-text-muted)" }, children: "\uC544\uC9C1 \uC635\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC5EC\uAE30\uC5D0 \uC815\uD574 \uB450\uBA74 \uC774 \uC7A5\uBE44\uC758 \uC720\uB2DB\uC744 \uC218\uC815\uD560 \uB54C \uADF8 \uC11C\uC2DD\uB300\uB85C \uCE78\uC774 \uB739\uB2C8\uB2E4." }) : null,
+    fields.map((field, index) => {
+      const duplicated = Boolean(field.key.trim()) && duplicates.has(field.key.trim());
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "wp-row",
+          style: { gap: "var(--wp-space-2)", alignItems: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                label: index === 0 ? "\uC774\uB984(\uD0A4)" : void 0,
+                error: !field.key.trim() ? "\uC774\uB984\uC740 \uBE44\uC6B8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" : duplicated ? "\uC774\uB984\uC774 \uACB9\uCE69\uB2C8\uB2E4" : void 0,
+                style: { flex: 1.2 },
+                children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: field.key,
+                    placeholder: "CPU",
+                    disabled,
+                    invalid: !field.key.trim() || duplicated,
+                    onChange: (event) => patch(index, { key: event.target.value })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Field, { label: index === 0 ? "\uD45C\uC2DC \uC774\uB984" : void 0, style: { flex: 1.2 }, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: field.label ?? "",
+                placeholder: field.key || "\uBE44\uC6B0\uBA74 \uC774\uB984 \uADF8\uB300\uB85C",
+                disabled,
+                onChange: (event) => patch(index, { label: event.target.value || void 0 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: index === 0 ? "\uD615\uC2DD" : void 0, style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: field.type,
+                disabled,
+                options: OPTION_TYPES,
+                onChange: (event) => patch(index, {
+                  type: event.target.value,
+                  // 선택이 아니면 선택지는 의미가 없다 — 남겨 두면 다시 선택으로 바꿨을 때 옛 값이 살아난다
+                  options: event.target.value === "select" ? field.options ?? [] : void 0
+                })
+              }
+            ) }),
+            field.type === "select" ? /* @__PURE__ */ jsx(Field, { label: index === 0 ? "\uC120\uD0DD\uC9C0(\uC27C\uD45C\uB85C \uAD6C\uBD84)" : void 0, style: { flex: 1.6 }, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: (field.options ?? []).join(", "),
+                placeholder: "8GB, 16GB, 32GB",
+                disabled,
+                onChange: (event) => patch(index, {
+                  options: event.target.value.split(",").map((option) => option.trim()).filter(Boolean)
+                })
+              }
+            ) }) : null,
+            field.type === "number" ? /* @__PURE__ */ jsx(Field, { label: index === 0 ? "\uB2E8\uC704" : void 0, style: { flex: 0.7 }, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: field.unit ?? "",
+                placeholder: "GB",
+                disabled,
+                onChange: (event) => patch(index, { unit: event.target.value || void 0 })
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx("div", { style: { paddingTop: index === 0 ? 22 : 0, flex: "none" }, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "trash-2",
+                label: `${field.label || field.key || index + 1} \uC0AD\uC81C`,
+                variant: "ghost",
+                disabled,
+                onClick: () => emit(fields.filter((_, i) => i !== index))
+              }
+            ) })
+          ]
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        icon: "plus",
+        disabled,
+        onClick: () => emit([...fields, { key: "", type: "text" }]),
+        children: "\uC635\uC158 \uCD94\uAC00"
+      }
+    ) })
+  ] });
+}
+var OptionSchemaEditor = boxed(OptionSchemaEditorImpl, "OptionSchemaEditor");
+
+export { OPTION_TYPES, OptionSchemaEditor };