@wipco/sdui 0.30.0 → 0.32.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-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-RRMKCZYQ.js

@@ -0,0 +1,67 @@
+import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function useOptionalModule(load) {
+  const [state, setState] = useState({ status: "loading" });
+  useEffect(() => {
+    let alive = true;
+    load().then(
+      (module) => {
+        if (alive) setState({ status: "ready", module });
+      },
+      (error) => {
+        if (!alive) return;
+        console.warn("[sdui] \uC120\uD0DD \uC758\uC874\uC131 \uB85C\uB4DC \uC2E4\uD328 \u2014 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4", error);
+        setState({ status: "missing" });
+      }
+    );
+    return () => {
+      alive = false;
+    };
+  }, [load]);
+  return state;
+}
+var optionalModuleCache = /* @__PURE__ */ new WeakMap();
+function loadOptionalModule(load, packageName) {
+  const cached = optionalModuleCache.get(load);
+  if (cached) return cached;
+  const pending = load().catch((error) => {
+    console.warn(`[sdui] \uC120\uD0DD \uC758\uC874\uC131 '${packageName}' \uB85C\uB4DC \uC2E4\uD328`, error);
+    optionalModuleCache.delete(load);
+    throw new Error(`${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC124\uCE58\uD574 \uC8FC\uC138\uC694`);
+  });
+  optionalModuleCache.set(load, pending);
+  return pending;
+}
+function DependencyPlaceholder({
+  packageName,
+  purpose,
+  height,
+  loading = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        minHeight: height,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "1px solid var(--wp-border-subtle)",
+        borderRadius: "var(--wp-radius-md)",
+        background: "var(--wp-surface-sunken)"
+      },
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { label: `${purpose} \uC900\uBE44 \uC911` }) : /* @__PURE__ */ jsxs(EmptyState, { tight: true, icon: "box", title: `${purpose}\uB97C \uADF8\uB9AC\uB824\uBA74 ${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4`, children: [
+        "\uC120\uD0DD \uC758\uC874\uC131\uC774\uB77C \uAE30\uBCF8 \uC124\uCE58\uC5D0\uB294 \uD3EC\uD568\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 \u2014 ",
+        /* @__PURE__ */ jsxs("code", { children: [
+          "pnpm add ",
+          packageName
+        ] }),
+        " \uD6C4 \uB2E4\uC2DC \uC5F4\uC5B4 \uC8FC\uC138\uC694."
+      ] })
+    }
+  );
+}
+
+export { DependencyPlaceholder, loadOptionalModule, useOptionalModule };

package/dist/{chunk-WXOU7QTN.js → chunk-SNRKPEWT.js}

@@ -1,5 +1,5 @@
 import { useDismiss, usePopoverAnchor, usePortalTo, HoistedStyle, AnchoredPopoverStyles, anchorStyle, focusStaysInside } from './chunk-EFMKWPZ3.js';
-import { Icon, Spinner, EmptyState } from './chunk-WIDDHR7L.js';
+import { Icon } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -194,66 +194,5 @@ var TP_CSS = `
 .wp-tp-opt--on{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
 `;
 var TimePicker = boxed(TimePickerImpl, "TimePicker");
-function useOptionalModule(load) {
-  const [state, setState] = useState({ status: "loading" });
-  useEffect(() => {
-    let alive = true;
-    load().then(
-      (module) => {
-        if (alive) setState({ status: "ready", module });
-      },
-      (error) => {
-        if (!alive) return;
-        console.warn("[sdui] \uC120\uD0DD \uC758\uC874\uC131 \uB85C\uB4DC \uC2E4\uD328 \u2014 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4", error);
-        setState({ status: "missing" });
-      }
-    );
-    return () => {
-      alive = false;
-    };
-  }, [load]);
-  return state;
-}
-var optionalModuleCache = /* @__PURE__ */ new WeakMap();
-function loadOptionalModule(load, packageName) {
-  const cached = optionalModuleCache.get(load);
-  if (cached) return cached;
-  const pending = load().catch((error) => {
-    console.warn(`[sdui] \uC120\uD0DD \uC758\uC874\uC131 '${packageName}' \uB85C\uB4DC \uC2E4\uD328`, error);
-    optionalModuleCache.delete(load);
-    throw new Error(`${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC124\uCE58\uD574 \uC8FC\uC138\uC694`);
-  });
-  optionalModuleCache.set(load, pending);
-  return pending;
-}
-function DependencyPlaceholder({
-  packageName,
-  purpose,
-  height,
-  loading = false
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        minHeight: height,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        border: "1px solid var(--wp-border-subtle)",
-        borderRadius: "var(--wp-radius-md)",
-        background: "var(--wp-surface-sunken)"
-      },
-      children: loading ? /* @__PURE__ */ jsx(Spinner, { label: `${purpose} \uC900\uBE44 \uC911` }) : /* @__PURE__ */ jsxs(EmptyState, { tight: true, icon: "box", title: `${purpose}\uB97C \uADF8\uB9AC\uB824\uBA74 ${packageName} \uD328\uD0A4\uC9C0\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4`, children: [
-        "\uC120\uD0DD \uC758\uC874\uC131\uC774\uB77C \uAE30\uBCF8 \uC124\uCE58\uC5D0\uB294 \uD3EC\uD568\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 \u2014 ",
-        /* @__PURE__ */ jsxs("code", { children: [
-          "pnpm add ",
-          packageName
-        ] }),
-        " \uD6C4 \uB2E4\uC2DC \uC5F4\uC5B4 \uC8FC\uC138\uC694."
-      ] })
-    }
-  );
-}
 
-export { DependencyPlaceholder, TimePicker, loadOptionalModule, useOptionalModule };
+export { TimePicker };

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 };