@wipco/sdui 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WIPCO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,27 @@
+# 제3자 고지
+
+이 저장소는 MIT 라이선스로 배포됩니다(LICENSE 참고). 아래 구성 요소는 원저작자의
+라이선스를 따르며, 그 고지를 여기에 유지합니다.
+
+## Lucide 아이콘 (ISC License)
+
+`packages/sdui/src/icons.ts`의 아이콘 기하 130종은 Lucide에서 가져왔습니다.
+소스 SVG를 `scripts/gen-icons.mjs`가 구조화 노드로 변환한 것이며 도형 자체는 원본과 같습니다.
+
+  https://github.com/lucide-icons/lucide
+
+  ISC License
+
+  Copyright (c) 2020, Lucide Contributors
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted, provided that the above
+  copyright notice and this permission notice appear in all copies.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.

package/dist/chunk-4SU2KYPU.js

@@ -0,0 +1,59 @@
+import { Badge, Tag } from './chunk-ZUCI34QY.js';
+import { useState, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function TagMultiSelect({
+  options,
+  values,
+  onChange,
+  disabled = false,
+  emptyText = "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+}) {
+  const safeOptions = options ?? [];
+  const isControlled = values !== void 0 && typeof onChange === "function";
+  const [internalValues, setInternalValues] = useState(values ?? []);
+  const current = isControlled ? values : internalValues;
+  const currentSet = useMemo(() => new Set(current), [current]);
+  const toggle = (value) => {
+    const set = new Set(currentSet);
+    if (set.has(value)) set.delete(value);
+    else set.add(value);
+    const next = [
+      ...safeOptions.filter((option) => set.has(option.value)).map((option) => option.value),
+      ...current.filter(
+        (item) => set.has(item) && !safeOptions.some((option) => option.value === item)
+      )
+    ];
+    setInternalValues(next);
+    onChange?.(next);
+  };
+  if (safeOptions.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "wp-caption", children: emptyText });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "wp-row", role: "group", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: safeOptions.map((option) => {
+    const selected = currentSet.has(option.value);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": selected,
+        disabled,
+        title: selected ? `${option.label} \u2014 \uC120\uD0DD \uD574\uC81C` : `${option.label} \u2014 \uC120\uD0DD`,
+        onClick: () => toggle(option.value),
+        style: {
+          display: "inline-flex",
+          background: "none",
+          border: 0,
+          padding: 0,
+          borderRadius: "var(--wp-radius-pill)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.55 : void 0
+        },
+        children: selected ? /* @__PURE__ */ jsx(Badge, { tone: "brand", size: "lg", children: option.label }) : /* @__PURE__ */ jsx(Tag, { children: option.label })
+      },
+      option.value
+    );
+  }) });
+}
+
+export { TagMultiSelect };

package/dist/chunk-56KKWLNI.js

@@ -0,0 +1,186 @@
+import { includesLooseSearch } from './chunk-KADFN76X.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-ZUCI34QY.js';
+import React, { useMemo, useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SearchableMultiPicker({
+  title,
+  options,
+  values,
+  onChange,
+  trigger,
+  disabled = false
+}) {
+  const safeOptions = useMemo(() => options ?? [], [options]);
+  const isControlled = values !== void 0 && typeof onChange === "function";
+  const [internalValues, setInternalValues] = useState(values ?? []);
+  const committed = isControlled ? values : internalValues;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [draft, setDraft] = useState([]);
+  const [selectedAtOpen, setSelectedAtOpen] = useState(/* @__PURE__ */ new Set());
+  const optionByValue = useMemo(
+    () => new Map(safeOptions.map((option) => [option.value, option])),
+    [safeOptions]
+  );
+  const sortByOptionOrder = (list) => {
+    const set = new Set(list);
+    const known = safeOptions.filter((option) => set.has(option.value)).map((option) => option.value);
+    const unknown = list.filter((item) => !optionByValue.has(item));
+    return [...known, ...unknown];
+  };
+  const openDialog = () => {
+    if (disabled) return;
+    const current = committed ?? [];
+    setDraft(sortByOptionOrder(current));
+    setSelectedAtOpen(new Set(current));
+    setQuery("");
+    setOpen(true);
+  };
+  const closeDialog = () => setOpen(false);
+  const commit = () => {
+    const next = sortByOptionOrder(draft);
+    setInternalValues(next);
+    onChange?.(next);
+    setOpen(false);
+  };
+  const toggle = (value, checked) => {
+    setDraft(
+      (current) => sortByOptionOrder(checked ? [...current, value] : current.filter((item) => item !== value))
+    );
+  };
+  useEffect(() => {
+    if (!open) return;
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", closeOnEscape);
+    return () => document.removeEventListener("keydown", closeOnEscape);
+  }, [open]);
+  const visibleOptions = useMemo(() => {
+    const selectedFirst = [
+      ...safeOptions.filter((option) => selectedAtOpen.has(option.value)),
+      ...safeOptions.filter((option) => !selectedAtOpen.has(option.value))
+    ];
+    return selectedFirst.filter(
+      (option) => includesLooseSearch(`${option.label} ${option.sub ?? ""}`, query)
+    );
+  }, [safeOptions, selectedAtOpen, query]);
+  const draftChips = draft.map((value) => ({
+    value,
+    label: optionByValue.get(value)?.label ?? value
+  }));
+  let triggerNode;
+  if (trigger !== void 0 && trigger !== null && React.isValidElement(trigger)) {
+    const element = trigger;
+    triggerNode = React.cloneElement(element, {
+      onClick: (event) => {
+        element.props.onClick?.(event);
+        openDialog();
+      }
+    });
+  } else if (trigger !== void 0 && trigger !== null) {
+    triggerNode = /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onClick: openDialog,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openDialog();
+          }
+        },
+        style: { cursor: disabled ? "not-allowed" : "pointer", display: "inline-flex" },
+        children: trigger
+      }
+    );
+  } else {
+    triggerNode = /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", icon: "list-filter", disabled, onClick: openDialog, children: committed.length > 0 ? `\uC120\uD0DD (${committed.length})` : "\uC120\uD0DD" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerNode,
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
+        onClick: (event) => {
+          if (event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+            closeDialog();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            title: title ?? "\uD56D\uBAA9 \uC120\uD0DD",
+            subtitle: `\uC804\uCCB4 ${safeOptions.length}\uAC1C \uC911\uC5D0\uC11C \uC120\uD0DD`,
+            icon: "list-filter",
+            size: "md",
+            onClose: closeDialog,
+            footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { style: { marginRight: "auto" }, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  icon: "rotate-ccw",
+                  disabled: draft.length === 0,
+                  onClick: () => setDraft([]),
+                  children: "\uC804\uCCB4 \uD574\uC81C"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: commit, children: "\uC644\uB8CC" })
+            ] }),
+            children: /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  icon: "search",
+                  placeholder: "\uC774\uB984\xB7\uC124\uBA85\uC73C\uB85C \uAC80\uC0C9",
+                  autoFocus: true,
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: [
+                /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { flex: "none" }, children: [
+                  "\uC120\uD0DD ",
+                  draft.length,
+                  "\uAC1C"
+                ] }),
+                draftChips.map((chip) => /* @__PURE__ */ jsx(Tag, { onRemove: () => toggle(chip.value, false), children: chip.label }, chip.value))
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "wp-col",
+                  style: {
+                    maxHeight: 320,
+                    overflowY: "auto",
+                    gap: "var(--wp-space-1)",
+                    borderTop: "var(--wp-border-w) solid var(--wp-divider)",
+                    paddingTop: "var(--wp-space-2)"
+                  },
+                  children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { padding: "var(--wp-space-2) 0" }, children: "\uACB0\uACFC \uC5C6\uC74C" }) : visibleOptions.map((option) => /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      label: option.label,
+                      description: option.sub,
+                      checked: draft.includes(option.value),
+                      onChange: (event) => toggle(option.value, event.target.checked)
+                    },
+                    option.value
+                  ))
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+
+export { SearchableMultiPicker };

package/dist/chunk-7Y4J7EOK.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/widgets/StackedMeter.tsx
+var resolveColor = (color, index) => {
+  if (!color) return `var(--wp-series-${index % 8 + 1})`;
+  if (/^[1-8]$/.test(color)) return `var(--wp-series-${color})`;
+  return color;
+};
+var formatValue = (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+var formatPercent = (v) => `${v.toLocaleString("ko-KR", { maximumFractionDigits: 1 })}%`;
+var dotStyle = (color) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "var(--wp-radius-pill)",
+  background: color,
+  flexShrink: 0
+});
+function StackedMeter({
+  segments,
+  showLegend = true,
+  height = 10
+}) {
+  const positive = segments.filter((s) => s.value > 0);
+  const total = positive.reduce((sum, s) => sum + s.value, 0);
+  const pctOf = (v) => total > 0 ? v / total * 100 : 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "img",
+        "aria-label": total > 0 ? segments.map((s) => `${s.label} ${formatPercent(pctOf(s.value))}`).join(", ") : "\uB370\uC774\uD130 \uC5C6\uC74C",
+        style: {
+          display: "flex",
+          gap: "var(--wp-space-half)",
+          width: "100%",
+          height,
+          borderRadius: "var(--wp-radius-pill)",
+          background: "var(--wp-surface-sunken)",
+          overflow: "hidden"
+        },
+        children: total > 0 && segments.map((s, i) => {
+          if (s.value <= 0) return null;
+          const pct = pctOf(s.value);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              title: `${s.label} \xB7 ${formatValue(s.value)} (${formatPercent(pct)})`,
+              style: {
+                width: `${pct}%`,
+                minWidth: 2,
+                height: "100%",
+                background: resolveColor(s.color, i)
+              }
+            },
+            `${s.label}-${i}`
+          );
+        })
+      }
+    ),
+    showLegend && segments.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--wp-space-1)",
+          marginTop: "var(--wp-space-3)"
+        },
+        children: segments.map((s, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "wp-body-sm",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--wp-space-2)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: dotStyle(resolveColor(s.color, i)) }),
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-default)" }, children: s.label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    paddingLeft: "var(--wp-space-3)",
+                    color: "var(--wp-text-strong)",
+                    fontWeight: "var(--wp-weight-medium)",
+                    fontVariantNumeric: "tabular-nums"
+                  },
+                  children: formatValue(s.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "wp-caption",
+                  style: {
+                    width: 52,
+                    textAlign: "right",
+                    fontVariantNumeric: "tabular-nums"
+                  },
+                  children: s.value > 0 && total > 0 ? formatPercent(pctOf(s.value)) : "0%"
+                }
+              )
+            ]
+          },
+          `${s.label}-${i}`
+        ))
+      }
+    )
+  ] });
+}
+
+export { StackedMeter };

package/dist/chunk-APCXOCAO.js

@@ -0,0 +1,110 @@
+import { Icon } from './chunk-ZUCI34QY.js';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_NOTICE = "\uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638\uB97C \uC704\uD574 \uD654\uBA74\uC744 \uAC00\uB838\uC2B5\uB2C8\uB2E4. \uD654\uBA74\uC744 \uD074\uB9AD\uD558\uBA74 \uB2E4\uC2DC \uD45C\uC2DC\uB429\uB2C8\uB2E4.";
+var PRINT_NOTICE = "\uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638 \uD654\uBA74\uC740 \uC778\uC1C4\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.";
+var CLIPBOARD_WARNING = "[WIPCO ERP] \uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638 \uD654\uBA74\uC785\uB2C8\uB2E4 \u2014 \uD654\uBA74 \uCEA1\uCC98\xB7\uBCF5\uC0AC\uAC00 \uC81C\uD55C\uB418\uBA70, \uC720\uCD9C \uC2DC \uAD00\uB828 \uBC95\uB839\uC5D0 \uB530\uB77C \uCC98\uBC8C\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
+var BLOCKED_COMBO_KEYS = /* @__PURE__ */ new Set(["A", "C", "P", "S", "U", "X"]);
+var SECURE_CSS = `
+.erp-secure{position:relative}
+.erp-secure--enabled{user-select:none;-webkit-user-select:none}
+.erp-secure__cover{position:fixed;inset:0;z-index:var(--wp-z-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--wp-space-3);background-color:var(--wp-surface-overlay);background-image:var(--wp-surface-scrim);backdrop-filter:var(--wp-blur-scrim);-webkit-backdrop-filter:var(--wp-blur-scrim);color:var(--wp-text-inverse);text-align:center;padding:var(--wp-space-6);cursor:pointer}
+.erp-secure__cover-notice{max-width:420px;color:var(--wp-text-inverse)}
+.erp-secure__print-warning{display:none;cursor:default}
+.erp-secure--print .erp-secure__print-warning{display:flex}
+@media print{
+  .erp-secure--enabled .erp-secure__content{display:none !important}
+  .erp-secure--enabled .erp-secure__print-warning{display:flex !important;position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit;cursor:default}
+}
+`;
+function SecureStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-secure", precedence: "medium", children: SECURE_CSS });
+}
+function overwriteClipboard() {
+  try {
+    const pending = navigator.clipboard?.writeText(CLIPBOARD_WARNING);
+    if (pending) pending.catch(() => void 0);
+  } catch {
+  }
+}
+function SecureScreen({ enabled = true, notice, children }) {
+  const hostRef = useRef(null);
+  const [cover, setCover] = useState(null);
+  const [prevEnabled, setPrevEnabled] = useState(enabled);
+  if (prevEnabled !== enabled) {
+    setPrevEnabled(enabled);
+    if (!enabled) setCover(null);
+  }
+  useEffect(() => {
+    if (!enabled) return;
+    const host = hostRef.current;
+    const block = (event) => event.preventDefault();
+    const guarded = ["contextmenu", "copy", "cut", "dragstart", "selectstart"];
+    guarded.forEach((name) => host?.addEventListener(name, block));
+    const onKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && BLOCKED_COMBO_KEYS.has(event.key.toUpperCase())) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (event.key === "PrintScreen") overwriteClipboard();
+    };
+    const onKeyUp = (event) => {
+      if (event.key === "PrintScreen") overwriteClipboard();
+    };
+    const raiseVeil = () => setCover((current) => current ?? "veil");
+    const dropVeil = () => setCover((current) => current === "veil" ? null : current);
+    const onVisibility = () => {
+      if (document.hidden) raiseVeil();
+      else dropVeil();
+    };
+    const onBeforePrint = () => setCover("print");
+    const onAfterPrint = () => setCover((current) => current === "print" ? null : current);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("keyup", onKeyUp, true);
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("blur", raiseVeil);
+    window.addEventListener("focus", dropVeil);
+    window.addEventListener("beforeprint", onBeforePrint);
+    window.addEventListener("afterprint", onAfterPrint);
+    return () => {
+      guarded.forEach((name) => host?.removeEventListener(name, block));
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("keyup", onKeyUp, true);
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("blur", raiseVeil);
+      window.removeEventListener("focus", dropVeil);
+      window.removeEventListener("beforeprint", onBeforePrint);
+      window.removeEventListener("afterprint", onAfterPrint);
+    };
+  }, [enabled]);
+  const classes = ["erp-secure"];
+  if (enabled) classes.push("erp-secure--enabled");
+  if (enabled && cover === "print") classes.push("erp-secure--print");
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: classes.join(" "), children: [
+    /* @__PURE__ */ jsx(SecureStyles, {}),
+    /* @__PURE__ */ jsx("div", { className: "erp-secure__content", children }),
+    enabled && cover === "veil" ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "erp-secure__cover",
+        role: "alert",
+        onClick: () => {
+          window.focus();
+          setCover(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "eye-off", size: 24, title: "\uD654\uBA74 \uAC00\uB9BC" }),
+          /* @__PURE__ */ jsx("p", { className: "wp-body erp-secure__cover-notice", style: { margin: 0 }, children: notice ?? DEFAULT_NOTICE })
+        ]
+      }
+    ) : null,
+    enabled ? /* @__PURE__ */ jsxs("div", { className: "erp-secure__cover erp-secure__print-warning", role: "alert", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "triangle-alert", size: 24, title: "\uC778\uC1C4 \uCC28\uB2E8" }),
+      /* @__PURE__ */ jsx("p", { className: "wp-body erp-secure__cover-notice", style: { margin: 0 }, children: PRINT_NOTICE })
+    ] }) : null
+  ] });
+}
+
+export { SecureScreen };

package/dist/chunk-AROOQ5W6.js

@@ -0,0 +1,119 @@
+import { Textarea, Icon } from './chunk-ZUCI34QY.js';
+import { useState, useRef, useId, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function formatValue(value) {
+  if (value === void 0) return "";
+  if (typeof value === "string") {
+    if (value.trim() === "") return "";
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2) ?? "";
+    } catch {
+      return value;
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2) ?? "";
+  } catch {
+    return String(value);
+  }
+}
+function describeParseError(err, text) {
+  const message = err instanceof Error ? err.message : String(err);
+  const lineCol = /line\s+(\d+)\s+column\s+(\d+)/i.exec(message);
+  if (lineCol) {
+    return `JSON \uAD6C\uBB38 \uC624\uB958 \u2014 ${lineCol[1]}\uD589 ${lineCol[2]}\uC5F4: ${message}`;
+  }
+  const posMatch = /position\s+(\d+)/i.exec(message);
+  if (posMatch) {
+    const pos = Math.min(Number(posMatch[1]), text.length);
+    let line = 1;
+    let column = 1;
+    for (let i = 0; i < pos; i += 1) {
+      if (text.charCodeAt(i) === 10) {
+        line += 1;
+        column = 1;
+      } else {
+        column += 1;
+      }
+    }
+    return `JSON \uAD6C\uBB38 \uC624\uB958 \u2014 ${line}\uD589 ${column}\uC5F4(\uC704\uCE58 ${pos}): ${message}`;
+  }
+  return `JSON \uAD6C\uBB38 \uC624\uB958: ${message}`;
+}
+function JsonField({
+  value,
+  onChange,
+  rows = 6,
+  invalid = false,
+  disabled = false,
+  placeholder
+}) {
+  const [text, setText] = useState(() => formatValue(value));
+  const [parseError, setParseError] = useState(null);
+  const focusedRef = useRef(false);
+  const lastFormattedRef = useRef(text);
+  const errorId = useId();
+  useEffect(() => {
+    const next = formatValue(value);
+    if (next === lastFormattedRef.current) return;
+    lastFormattedRef.current = next;
+    if (focusedRef.current) return;
+    setText(next);
+    setParseError(null);
+  }, [value]);
+  const handleBlur = useCallback(() => {
+    focusedRef.current = false;
+    if (text.trim() === "") {
+      setParseError(null);
+      return;
+    }
+    try {
+      const parsed = JSON.parse(text);
+      const pretty = JSON.stringify(parsed, null, 2) ?? "";
+      setParseError(null);
+      setText(pretty);
+      lastFormattedRef.current = pretty;
+      onChange?.(parsed);
+    } catch (err) {
+      setParseError(describeParseError(err, text));
+    }
+  }, [text, onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--wp-space-1)",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            className: "wp-mono",
+            rows,
+            value: text,
+            invalid: invalid || parseError !== null,
+            disabled,
+            placeholder: placeholder ?? "JSON\uC744 \uC785\uB825\uD558\uC138\uC694",
+            spellCheck: false,
+            "aria-describedby": parseError !== null ? errorId : void 0,
+            onFocus: () => {
+              focusedRef.current = true;
+            },
+            onBlur: handleBlur,
+            onChange: (e) => setText(e.target.value)
+          }
+        ),
+        parseError !== null ? /* @__PURE__ */ jsxs("p", { id: errorId, className: "wp-field__error", role: "alert", style: { margin: 0 }, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 14 }),
+          /* @__PURE__ */ jsx("span", { children: parseError })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { JsonField };