@wipco/sdui-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,1289 @@
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { defaultRegistry, Alert, Button, Card, Input, Badge, EmptyState, Spinner, Table, IconButton, SduiDialog, Field, Select, validateSpec, SduiRenderer } from '@wipco/sdui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { json } from '@codemirror/lang-json';
+
+// src/SduiEditor.tsx
+
+// src/store/types.ts
+var PageIdConflictError = class extends Error {
+  constructor(existingId) {
+    super(`\uB300\uC18C\uBB38\uC790\uB9CC \uB2E4\uB978 \uD398\uC774\uC9C0\uAC00 \uC774\uBBF8 \uC788\uC2B5\uB2C8\uB2E4: ${existingId}`);
+    this.existingId = existingId;
+    this.name = "PageIdConflictError";
+  }
+  existingId;
+};
+var PageExistsError = class extends Error {
+  constructor(id) {
+    super(`\uC774\uBBF8 \uC788\uB294 \uD398\uC774\uC9C0\uC785\uB2C8\uB2E4: ${id}`);
+    this.id = id;
+    this.name = "PageExistsError";
+  }
+  id;
+};
+var VersionMismatchError = class extends Error {
+  constructor(current) {
+    super("\uB2E4\uB978 \uACF3\uC5D0\uC11C \uBA3C\uC800 \uC218\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC0C8\uB85C\uACE0\uCE68 \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694.");
+    this.current = current;
+    this.name = "VersionMismatchError";
+  }
+  current;
+};
+var PageGoneError = class extends Error {
+  constructor(id) {
+    super("\uC218\uC815\uD558\uB824\uB358 \uD398\uC774\uC9C0\uAC00 \uC774\uBBF8 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC0C8\uB85C \uB9CC\uB4E4\uB824\uBA74 \uC0C8 \uD398\uC774\uC9C0\uB85C \uC800\uC7A5\uD558\uC138\uC694.");
+    this.id = id;
+    this.name = "PageGoneError";
+  }
+  id;
+};
+var StoreUnsupportedError = class extends Error {
+  constructor(operation, detail) {
+    super(detail);
+    this.operation = operation;
+    this.name = "StoreUnsupportedError";
+  }
+  operation;
+};
+var StoreUnavailableError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.cause = cause;
+    this.name = "StoreUnavailableError";
+  }
+  cause;
+};
+var StoreUnauthorizedError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "StoreUnauthorizedError";
+  }
+};
+var PageIdRejectedError = class extends Error {
+  constructor(id, detail) {
+    super(detail);
+    this.id = id;
+    this.name = "PageIdRejectedError";
+  }
+  id;
+};
+var PAGE_ID_PATTERN = /^[A-Za-z0-9_-]+(\/[A-Za-z0-9_-]+)*$/;
+function isValidPageId(id) {
+  return PAGE_ID_PATTERN.test(id) && id.length <= 200;
+}
+function titleOf(spec) {
+  if (spec && typeof spec === "object" && typeof spec.title === "string") {
+    return spec.title;
+  }
+  return null;
+}
+
+// src/store/rest-store.ts
+function unquoteEtag(value) {
+  if (!value) return "";
+  return value.trim().replace(/^W\//, "").replace(/^"|"$/g, "");
+}
+function isServableId(id) {
+  return id.split("/").every((segment) => !segment.startsWith("_"));
+}
+var NAV_HINT = "`_` \uB85C \uC2DC\uC791\uD558\uB294 id\uB294 ERP\uC5D0\uC11C \uD398\uC774\uC9C0 \uC2A4\uD399\uC774 \uC544\uB2C8\uB77C \uB0B4\uBD80 \uB370\uC774\uD130(_nav \uB4F1)\uC774\uBA70 \uC774 \uACBD\uB85C\uB85C\uB294 \uD3B8\uC9D1\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.";
+var RestSpecStore = class {
+  capabilities;
+  baseUrl;
+  timeoutMs;
+  config;
+  constructor(config = {}) {
+    this.config = config;
+    this.baseUrl = (config.baseUrl ?? "").replace(/\/+$/, "");
+    this.timeoutMs = config.timeoutMs ?? 1e4;
+    this.capabilities = {
+      kind: "rest",
+      label: config.label ?? (this.baseUrl ? `ERP (${this.baseUrl})` : "ERP (\uAC19\uC740 \uC624\uB9AC\uC9C4)"),
+      remove: false,
+      atomicCreate: false,
+      atomicLocking: false,
+      history: false,
+      limitations: [
+        "ERP\uC5D0\uB294 \uC2A4\uD399 \uC0AD\uC81C \uACBD\uB85C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uD3B8\uC9D1\uAE30\uC5D0\uC11C \uD398\uC774\uC9C0\uB97C \uC9C0\uC6B8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.",
+        "ERP\uC758 PUT\uC740 If-Match\uB97C \uAC80\uC0AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uC800\uC7A5 \uCDA9\uB3CC \uAC80\uC0AC\uB294 \uD3B8\uC9D1\uAE30 \uCABD \uC77D\uAE30\u2192\uBE44\uAD50\uB85C\uB9CC \uC774\uB904\uC838 \uC544\uC8FC \uC9E7\uC740 \uACBD\uD569 \uAD6C\uAC04\uC774 \uB0A8\uC2B5\uB2C8\uB2E4.",
+        "\uB0B4\uBE44\uAC8C\uC774\uC158(_nav)\uC740 \uBCC4\uB3C4 \uACBD\uB85C(/ui/nav-spec)\uB77C \uC774 \uBAA9\uB85D\uC5D0 \uB098\uC624\uC9C0 \uC54A\uACE0 \uC5EC\uAE30\uC11C \uC5F4 \uC218\uB3C4 \uC5C6\uC2B5\uB2C8\uB2E4.",
+        "\uC774\uB825\uC740 ERP\uAC00 \uC790\uB3D9\uC73C\uB85C \uC313\uC9C0\uB9CC(ui_spec_revisions) \uC870\uD68C\uD560 HTTP \uACBD\uB85C\uAC00 \uC5C6\uC5B4 \uD3B8\uC9D1\uAE30\uC5D0\uC11C \uBCFC \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.",
+        "\uAD8C\uD55C\uBCC4 \uC2A4\uD399 \uC7AC\uB2E8\uC740 ERP \uB7F0\uD0C0\uC784\uC758 \uBAAB\uC785\uB2C8\uB2E4 \u2014 \uD3B8\uC9D1\uAE30 \uBBF8\uB9AC\uBCF4\uAE30\uB294 \uC7AC\uB2E8 \uC804 \uC6D0\uBCF8\uC744 \uBCF4\uC5EC \uC90D\uB2C8\uB2E4."
+      ]
+    };
+  }
+  /* ---------------------------------------------------------------------- */
+  /* HTTP                                                                    */
+  /* ---------------------------------------------------------------------- */
+  async request(path, init = {}) {
+    const extra = await this.config.headers?.() ?? {};
+    let response;
+    try {
+      response = await fetch(`${this.baseUrl}${path}`, {
+        method: init.method ?? "GET",
+        headers: {
+          accept: "application/json",
+          ...init.body !== void 0 ? { "content-type": "application/json" } : null,
+          ...extra
+        },
+        credentials: this.config.credentials ?? "same-origin",
+        body: init.body !== void 0 ? JSON.stringify(init.body) : void 0,
+        // 상류가 응답하지 않으면 편집기가 영원히 매달린다 — 타임아웃을 반드시 건다
+        signal: AbortSignal.timeout(this.timeoutMs)
+      });
+    } catch (err) {
+      throw new StoreUnavailableError(
+        `\uC2A4\uD399 \uC11C\uBC84\uC5D0 \uC5F0\uACB0\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 (${this.capabilities.label}). \uC11C\uBC84\uAC00 \uB5A0 \uC788\uB294\uC9C0 \uD655\uC778\uD558\uC138\uC694.`,
+        err
+      );
+    }
+    if (response.status === 401) {
+      this.config.onUnauthorized?.();
+      throw new StoreUnauthorizedError("\uC138\uC158\uC774 \uB9CC\uB8CC\uB418\uC5C8\uAC70\uB098 \uB85C\uADF8\uC778\uB418\uC5B4 \uC788\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uB85C\uADF8\uC778\uD55C \uB4A4 \uC2DC\uB3C4\uD558\uC138\uC694.");
+    }
+    if (response.status === 403) {
+      throw new StoreUnavailableError(
+        "\uC774 \uACC4\uC815\uC5D0\uB294 \uC2A4\uD399 \uD3B8\uC9D1 \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4 (403). ERP \uAD8C\uD55C 'setting.update'\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4."
+      );
+    }
+    const text = await response.text();
+    let body = null;
+    if (text.trim()) {
+      try {
+        body = JSON.parse(text);
+      } catch {
+      }
+    }
+    return { status: response.status, etag: unquoteEtag(response.headers.get("etag")), body, text };
+  }
+  /** 상류 오류를 사람이 읽을 수 있는 문장으로 — 상류가 준 메시지가 있으면 그대로 싣는다 */
+  upstreamError(action, response) {
+    const payload = response.body;
+    const detail = payload && typeof payload === "object" && typeof payload.message === "string" ? payload.message : payload && typeof payload === "object" && typeof payload.error === "string" ? payload.error : response.text.slice(0, 200);
+    return new StoreUnavailableError(`${action} \uC2E4\uD328 (${response.status})${detail ? `: ${detail}` : ""}`);
+  }
+  /* ---------------------------------------------------------------------- */
+  /* SpecStore 구현                                                          */
+  /* ---------------------------------------------------------------------- */
+  async list() {
+    const indexed = await this.request("/ui/pages-index");
+    if (indexed.status === 200) {
+      const pages = indexed.body?.pages;
+      if (Array.isArray(pages)) {
+        return pages.map((row) => {
+          const page = row;
+          return {
+            id: String(page.id ?? ""),
+            title: typeof page.title === "string" ? page.title : null,
+            updatedAt: typeof page.updatedAt === "string" ? page.updatedAt : "",
+            version: typeof page.etag === "string" ? page.etag : ""
+          };
+        }).filter((page) => page.id && isValidPageId(page.id)).sort((a, b) => a.id.localeCompare(b.id));
+      }
+    }
+    if (indexed.status !== 404) throw this.upstreamError("\uBAA9\uB85D \uC870\uD68C", indexed);
+    const manifest = await this.request("/ui/manifest");
+    if (manifest.status !== 200) throw this.upstreamError("\uB9E4\uB2C8\uD398\uC2A4\uD2B8 \uC870\uD68C", manifest);
+    const specs = manifest.body?.specs ?? {};
+    return Object.entries(specs).filter(([id]) => isValidPageId(id)).map(([id, etag]) => ({
+      id,
+      title: null,
+      updatedAt: "",
+      version: typeof etag === "string" ? etag : ""
+    })).sort((a, b) => a.id.localeCompare(b.id));
+  }
+  async read(id) {
+    if (!isValidPageId(id)) return null;
+    if (!isServableId(id)) throw new PageIdRejectedError(id, NAV_HINT);
+    const response = await this.request(`/ui/pages/${id}`);
+    if (response.status === 404) return null;
+    if (response.status !== 200) throw this.upstreamError(`\uD398\uC774\uC9C0 \uC870\uD68C(${id})`, response);
+    return {
+      id,
+      title: titleOf(response.body),
+      updatedAt: "",
+      version: response.etag,
+      spec: response.body
+    };
+  }
+  async write(id, spec, options = {}) {
+    if (!isValidPageId(id)) throw new Error("\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uD398\uC774\uC9C0 id\uC785\uB2C8\uB2E4");
+    if (!isServableId(id)) throw new PageIdRejectedError(id, NAV_HINT);
+    if (options.ifAbsent || options.expect) {
+      const current = await this.read(id);
+      if (options.ifAbsent) {
+        if (current) throw new PageExistsError(id);
+      } else if (options.expect) {
+        if (!current) throw new PageGoneError(id);
+        if (current.version !== options.expect.value) {
+          const { spec: _spec, ...meta } = current;
+          throw new VersionMismatchError(meta);
+        }
+      }
+    }
+    const title = titleOf(spec);
+    const response = await this.request(`/ui/pages/${id}`, {
+      method: "PUT",
+      // title은 ERP가 목록(pages-index)에 쓰는 별도 컬럼이다 — 스펙의 title과
+      // 어긋나면 편집기 목록과 ERP 목록이 갈리므로 저장할 때마다 함께 보낸다.
+      body: title === null ? { spec } : { spec, title }
+    });
+    if (response.status === 404) {
+      throw new PageIdRejectedError(id, `\uC2A4\uD399 \uC11C\uBC84\uAC00 \uC774 id\uB97C \uBC1B\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${id}`);
+    }
+    if (response.status !== 200) throw this.upstreamError(`\uD398\uC774\uC9C0 \uC800\uC7A5(${id})`, response);
+    const body = response.body ?? {};
+    return {
+      id,
+      title,
+      updatedAt: typeof body.updatedAt === "string" ? body.updatedAt : "",
+      // 응답 헤더 ETag와 본문 etag는 같은 값이다(ERP가 저장된 jsonb를 되읽어 만든다)
+      version: response.etag || (typeof body.etag === "string" ? body.etag : ""),
+      spec
+    };
+  }
+  async remove(id) {
+    throw new StoreUnsupportedError(
+      "delete",
+      `ERP\uC5D0\uB294 \uC2A4\uD399 \uC0AD\uC81C \uACBD\uB85C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 (DELETE /ui/pages/${id} \u2192 405). \uD654\uBA74\uC744 \uAC10\uCD94\uB824\uBA74 ERP\uC758 \uB0B4\uBE44\uAC8C\uC774\uC158\xB7\uAD8C\uD55C \uC124\uC815\uC744 \uC4F0\uC138\uC694.`
+    );
+  }
+  // history()는 구현하지 않는다 — ERP가 ui_spec_revisions를 쌓지만 읽는 경로를 열지 않았다.
+};
+function createRestSpecStore(config = {}) {
+  return new RestSpecStore(config);
+}
+
+// src/templates.ts
+var BLANK = {
+  version: 1,
+  title: "\uC0C8 \uD398\uC774\uC9C0",
+  subtitle: "",
+  body: [
+    {
+      component: "Card",
+      children: [{ component: "Text", props: { value: "\uC5EC\uAE30\uC11C\uBD80\uD130 \uC2DC\uC791\uD558\uC138\uC694." } }]
+    }
+  ]
+};
+var DASHBOARD = {
+  version: 1,
+  title: "\uB300\uC2DC\uBCF4\uB4DC",
+  body: [
+    {
+      component: "Grid",
+      props: { columns: 4 },
+      children: [
+        { component: "StatCard", props: { label: "\uC9C0\uD45C A", value: "128", unit: "\uAC74", delta: "+4", trend: "up" } },
+        { component: "StatCard", props: { label: "\uC9C0\uD45C B", value: "23", unit: "\uAC74", trend: "flat" } },
+        { component: "StatCard", props: { label: "\uC9C0\uD45C C", value: "86", unit: "%", delta: "-5%", trend: "down" } },
+        { component: "StatCard", props: { label: "\uC9C0\uD45C D", value: "94.2", unit: "%", trend: "flat" } }
+      ]
+    },
+    {
+      component: "Card",
+      props: { title: "\uC548\uB0B4" },
+      children: [{ component: "Text", props: { value: "StatCard\xB7Grid\uB85C \uAD6C\uC131\uD55C \uB300\uC2DC\uBCF4\uB4DC \uACE8\uACA9\uC785\uB2C8\uB2E4." } }]
+    }
+  ]
+};
+var FORM = {
+  version: 1,
+  title: "\uC785\uB825 \uD3FC",
+  body: [
+    {
+      component: "Form",
+      props: {
+        id: "form1",
+        initial: { name: "" },
+        labels: { name: "\uC774\uB984" },
+        rules: { name: [{ rule: "required" }] },
+        onSubmit: {
+          action: "submitForm",
+          form: "form1",
+          endpoint: "/api/example",
+          onSuccess: [{ action: "toast", tone: "success", title: "\uC800\uC7A5 \uC644\uB8CC" }]
+        }
+      },
+      children: [
+        {
+          component: "Card",
+          props: { title: "\uAE30\uBCF8 \uC815\uBCF4" },
+          slots: {
+            footer: [
+              {
+                component: "Button",
+                props: {
+                  variant: "primary",
+                  loading: { $state: "form1.$submitting", default: false },
+                  onClick: {
+                    action: "submitForm",
+                    form: "form1",
+                    endpoint: "/api/example",
+                    onSuccess: [{ action: "toast", tone: "success", title: "\uC800\uC7A5 \uC644\uB8CC" }]
+                  }
+                },
+                children: ["\uC800\uC7A5"]
+              }
+            ]
+          },
+          children: [
+            {
+              component: "Field",
+              props: { label: "\uC774\uB984", required: true, error: { $state: "form1.$errors.name" } },
+              children: [
+                {
+                  component: "Input",
+                  props: {
+                    value: { $state: "form1.name", default: "" },
+                    onChange: { action: "setState", key: "form1.name", fromEvent: true }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+var LIST = {
+  version: 1,
+  title: "\uBAA9\uB85D",
+  body: [
+    {
+      component: "Card",
+      props: { padding: "none" },
+      children: [
+        {
+          component: "Table",
+          props: {
+            columns: [
+              { key: "id", header: "ID", width: "100px", mono: true },
+              { key: "name", header: "\uC774\uB984", strong: true },
+              {
+                key: "status",
+                header: "\uC0C1\uD0DC",
+                width: "110px",
+                badge: { toneMap: { on: "success", off: "neutral" }, labelMap: { on: "\uD65C\uC131", off: "\uBE44\uD65C\uC131" } }
+              }
+            ],
+            rows: [
+              { id: "A-01", name: "\uD56D\uBAA9 1", status: "on" },
+              { id: "A-02", name: "\uD56D\uBAA9 2", status: "off" }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+};
+var TEMPLATES = [
+  { key: "blank", label: "\uBE48 \uD398\uC774\uC9C0", description: "\uCE74\uB4DC \uD558\uB098\uB85C \uC2DC\uC791", spec: BLANK },
+  { key: "dashboard", label: "\uB300\uC2DC\uBCF4\uB4DC", description: "StatCard 4\uAC1C + \uCE74\uB4DC", spec: DASHBOARD },
+  { key: "form", label: "\uC785\uB825 \uD3FC", description: "\uAC80\uC99D + \uC81C\uCD9C \uACE8\uACA9", spec: FORM },
+  { key: "list", label: "\uBAA9\uB85D", description: "\uD14C\uC774\uBE14 + \uC0C1\uD0DC \uBC30\uC9C0", spec: LIST }
+];
+
+// src/util.ts
+function formatDate(iso) {
+  if (!iso) return "";
+  try {
+    return new Intl.DateTimeFormat("ko-KR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+function messageOf(err, fallback) {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
+function PageListView({ store, onEdit, onPreview }) {
+  const caps = store.capabilities;
+  const [pages, setPages] = useState(null);
+  const [listFailed, setListFailed] = useState(false);
+  const [error, setError] = useState(null);
+  const [query, setQuery] = useState("");
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newId, setNewId] = useState("");
+  const [template, setTemplate] = useState("blank");
+  const [createError, setCreateError] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const load = useCallback(() => {
+    setListFailed(false);
+    store.list().then(setPages).catch((err) => {
+      setListFailed(true);
+      setError(messageOf(err, "\uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+    });
+  }, [store]);
+  useEffect(load, [load]);
+  const filtered = useMemo(() => {
+    if (!pages) return null;
+    const q = query.trim().toLowerCase();
+    if (!q) return pages;
+    return pages.filter((p) => p.id.toLowerCase().includes(q) || (p.title ?? "").toLowerCase().includes(q));
+  }, [pages, query]);
+  const createPage = async () => {
+    if (pages === null) {
+      setCreateError("\uD398\uC774\uC9C0 \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD574 \uC911\uBCF5 \uC5EC\uBD80\uB97C \uD655\uC778\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uBAA9\uB85D\uC744 \uB2E4\uC2DC \uBD88\uB7EC\uC628 \uB4A4 \uC2DC\uB3C4\uD558\uC138\uC694.");
+      return;
+    }
+    const id = newId.trim();
+    if (!isValidPageId(id)) {
+      setCreateError("id\uB294 \uC601\uBB38\xB7\uC22B\uC790\xB7-\xB7_ \uC138\uADF8\uBA3C\uD2B8\uB97C /\uB85C \uC5F0\uACB0\uD55C \uD615\uD0DC\uC5EC\uC57C \uD569\uB2C8\uB2E4 (\uC608: sales/orders)");
+      return;
+    }
+    if (pages.some((p) => p.id === id)) {
+      setCreateError("\uC774\uBBF8 \uC874\uC7AC\uD558\uB294 id\uC785\uB2C8\uB2E4");
+      return;
+    }
+    setCreating(true);
+    setCreateError(null);
+    try {
+      const spec = TEMPLATES.find((t) => t.key === template)?.spec ?? TEMPLATES[0].spec;
+      await store.write(id, spec, { ifAbsent: true });
+      setCreateOpen(false);
+      setNewId("");
+      onEdit(id);
+    } catch (err) {
+      setCreateError(err instanceof PageExistsError ? "\uC774\uBBF8 \uC874\uC7AC\uD558\uB294 id\uC785\uB2C8\uB2E4" : messageOf(err, "\uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"));
+    } finally {
+      setCreating(false);
+    }
+  };
+  const duplicatePage = async (source) => {
+    try {
+      const record = await store.read(source.id);
+      if (!record) throw new Error("\uC6D0\uBCF8 \uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+      let n = 1;
+      for (; ; ) {
+        const candidate = n === 1 ? `${source.id}-copy` : `${source.id}-copy${n}`;
+        try {
+          await store.write(candidate, record.spec, { ifAbsent: true });
+          break;
+        } catch (err) {
+          if (err instanceof PageExistsError && n < 50) {
+            n += 1;
+            continue;
+          }
+          throw err;
+        }
+      }
+      load();
+    } catch (err) {
+      setError(messageOf(err, "\uBCF5\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"));
+    }
+  };
+  const removePage = async (page) => {
+    if (!window.confirm(`"${page.id}" \uD398\uC774\uC9C0\uB97C \uC0AD\uC81C\uD560\uAE4C\uC694?
+\uC0AD\uC81C\uD558\uBA74 \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.`)) return;
+    try {
+      if (!await store.remove(page.id)) {
+        setError("\uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+        return;
+      }
+      load();
+    } catch (err) {
+      setError(err instanceof StoreUnsupportedError ? err.message : messageOf(err, "\uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-page wp-app", children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-page-head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "wp-page-head__text", children: [
+        /* @__PURE__ */ jsx("h1", { className: "wp-page-head__title", children: "\uD398\uC774\uC9C0" }),
+        /* @__PURE__ */ jsx("div", { className: "wp-page-head__sub", children: "SDUI \uD398\uC774\uC9C0 \uC2A4\uD399\uC744 \uCD94\uAC00\xB7\uC218\uC815\uD569\uB2C8\uB2E4" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "wp-page-head__actions", children: /* @__PURE__ */ jsx(Button, { variant: "primary", icon: "plus", onClick: () => {
+        setCreateOpen(true);
+        setCreateError(null);
+      }, children: "\uC0C8 \uD398\uC774\uC9C0" }) })
+    ] }),
+    error ? /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: "danger",
+        actions: listFailed ? /* @__PURE__ */ jsx(Button, { size: "xs", icon: "refresh-cw", onClick: load, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }) : void 0,
+        onClose: () => setError(null),
+        children: error
+      }
+    ) : null,
+    caps.limitations.length > 0 ? /* @__PURE__ */ jsx(Alert, { tone: "info", title: `${caps.label} \uC800\uC7A5\uC18C\uB97C \uD3B8\uC9D1 \uC911\uC785\uB2C8\uB2E4`, children: /* @__PURE__ */ jsx("ul", { className: "sdui-editor-limitations", children: caps.limitations.map((limitation) => /* @__PURE__ */ jsx("li", { children: limitation }, limitation)) }) }) : null,
+    /* @__PURE__ */ jsxs(Card, { padding: "none", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdui-editor-list-toolbar", children: [
+        /* @__PURE__ */ jsx(Input, { icon: "search", placeholder: "id \uB610\uB294 \uC81C\uBAA9 \uAC80\uC0C9", value: query, onChange: (e) => setQuery(e.target.value) }),
+        /* @__PURE__ */ jsxs(Badge, { tone: "brand", children: [
+          filtered?.length ?? 0,
+          "\uAC1C"
+        ] })
+      ] }),
+      listFailed ? (
+        // 목록을 못 받았으면 영원한 스피너 대신 상태를 분명히 밝힌다
+        /* @__PURE__ */ jsx(EmptyState, { title: "\uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4", actions: /* @__PURE__ */ jsx(Button, { icon: "refresh-cw", onClick: load, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }), children: "\uC11C\uBC84 \uC5F0\uACB0\uACFC \uB85C\uADF8\uC778 \uC0C1\uD0DC\uB97C \uD655\uC778\uD55C \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694." })
+      ) : !filtered ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-center", style: { padding: 48 }, children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "\uBD88\uB7EC\uC624\uB294 \uC911" }) }) : /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns: [
+            { key: "id", header: "ID", mono: true, width: "220px" },
+            {
+              key: "title",
+              header: "\uC81C\uBAA9",
+              strong: true,
+              // 손상된 스펙은 저장소가 corrupt로 표시해 내려준다 — 열어서 고칠 수 있게 눈에 띄게 알린다
+              render: (row) => row.corrupt ? /* @__PURE__ */ jsx(Badge, { tone: "danger", children: "JSON \uC190\uC0C1 \u2014 \uD3B8\uC9D1\uAE30\uC5D0\uC11C \uBCF5\uAD6C" }) : row.title ?? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "(\uC81C\uBAA9 \uC5C6\uC74C)" })
+            },
+            { key: "updatedAt", header: "\uC218\uC815", width: "180px", render: (row) => formatDate(row.updatedAt) },
+            {
+              key: "_actions",
+              header: "",
+              width: "150px",
+              render: (row) => /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { justifyContent: "flex-end", gap: 2 }, onClick: (e) => e.stopPropagation(), children: [
+                /* @__PURE__ */ jsx(IconButton, { icon: "pencil", label: "\uD3B8\uC9D1", size: "sm", onClick: () => onEdit(row.id) }),
+                /* @__PURE__ */ jsx(IconButton, { icon: "eye", label: "\uBCF4\uAE30", size: "sm", onClick: () => onPreview(row.id) }),
+                /* @__PURE__ */ jsx(IconButton, { icon: "copy", label: "\uBCF5\uC81C", size: "sm", onClick: () => void duplicatePage(row) }),
+                caps.remove ? /* @__PURE__ */ jsx(IconButton, { icon: "trash-2", label: "\uC0AD\uC81C", size: "sm", tone: "danger", onClick: () => void removePage(row) }) : null
+              ] })
+            }
+          ],
+          rows: filtered,
+          onRowClick: (row) => onEdit(row.id),
+          empty: /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              title: query ? "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" : "\uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+              actions: query ? void 0 : /* @__PURE__ */ jsx(Button, { variant: "primary", icon: "plus", onClick: () => setCreateOpen(true), children: "\uCCAB \uD398\uC774\uC9C0 \uB9CC\uB4E4\uAE30" }),
+              children: query ? "\uB2E4\uB978 \uAC80\uC0C9\uC5B4\uB85C \uC2DC\uB3C4\uD574 \uBCF4\uC138\uC694." : "\uC0C8 \uD398\uC774\uC9C0\uB97C \uB9CC\uB4E4\uC5B4 \uC2DC\uC791\uD558\uC138\uC694."
+            }
+          )
+        }
+      )
+    ] }),
+    createOpen ? /* @__PURE__ */ jsxs(
+      SduiDialog,
+      {
+        title: "\uC0C8 \uD398\uC774\uC9C0",
+        subtitle: "id\uB294 URL \uACBD\uB85C\uAC00 \uB429\uB2C8\uB2E4",
+        icon: "plus",
+        onClose: () => setCreateOpen(false),
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => setCreateOpen(false), children: "\uCDE8\uC18C" }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", loading: creating, disabled: pages === null, onClick: () => void createPage(), children: "\uB9CC\uB4E4\uAE30" })
+        ] }),
+        children: [
+          pages === null ? /* @__PURE__ */ jsx(Alert, { tone: "warning", title: "\uC9C0\uAE08\uC740 \uC0C8 \uD398\uC774\uC9C0\uB97C \uB9CC\uB4E4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", children: "\uD398\uC774\uC9C0 \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD574 \uC5B4\uB5A4 id\uAC00 \uC774\uBBF8 \uC4F0\uC774\uB294\uC9C0 \uD655\uC778\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uBAA9\uB85D\uC744 \uBA3C\uC800 \uB2E4\uC2DC \uBD88\uB7EC\uC624\uC138\uC694." }) : null,
+          createError ? /* @__PURE__ */ jsx(Alert, { tone: "danger", children: createError }) : null,
+          /* @__PURE__ */ jsx(Field, { label: "\uD398\uC774\uC9C0 id", required: true, hint: "\uC608: home, sales/orders", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              mono: true,
+              value: newId,
+              autoFocus: true,
+              disabled: pages === null,
+              placeholder: "sales/orders",
+              onChange: (e) => setNewId(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (pages !== null) void createPage();
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "\uD15C\uD50C\uB9BF", children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: template,
+              onChange: (e) => setTemplate(e.target.value),
+              options: TEMPLATES.map((t) => ({ value: t.key, label: `${t.label} \u2014 ${t.description}` }))
+            }
+          ) })
+        ]
+      }
+    ) : null
+  ] });
+}
+var KNOWN_COMPONENTS = new Set(Object.keys(defaultRegistry));
+var STRUCTURAL_ISSUES = /* @__PURE__ */ new Set([
+  "\uC2A4\uD399\uC774 \uAC1D\uCCB4\uAC00 \uC544\uB2D9\uB2C8\uB2E4",
+  "version\uC740 1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4",
+  "body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4",
+  "children \uD56D\uBAA9\uC740 \uBB38\uC790\uC5F4 \uB610\uB294 \uB178\uB4DC \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4",
+  "component\uB294 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC740 \uBB38\uC790\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4",
+  "props\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4",
+  "slots\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4",
+  "\uC2AC\uB86F \uAC12\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4",
+  "children\uC740 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4"
+]);
+function gradeIssues(spec) {
+  return validateSpec(spec, KNOWN_COMPONENTS).map((issue) => ({
+    ...issue,
+    severity: STRUCTURAL_ISSUES.has(issue.message) ? "error" : "warning"
+  }));
+}
+var editorTheme = EditorView.theme({
+  "&": { height: "100%", fontSize: "12.5px" },
+  ".cm-scroller": {
+    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
+    lineHeight: "1.55"
+  },
+  ".cm-gutters": { background: "var(--wp-slate-25)", borderRight: "1px solid var(--wp-slate-200)", color: "var(--wp-slate-400)" },
+  "&.cm-focused": { outline: "none" },
+  ".cm-activeLine": { background: "rgba(10, 115, 201, 0.05)" },
+  ".cm-activeLineGutter": { background: "rgba(10, 115, 201, 0.08)" }
+});
+function JsonEditor({ value, onChange, onSave }) {
+  const hostRef = useRef(null);
+  const viewRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  useEffect(() => {
+    if (!hostRef.current) return;
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        json(),
+        editorTheme,
+        keymap.of([
+          {
+            key: "Mod-s",
+            run: () => {
+              onSaveRef.current?.();
+              return true;
+            }
+          },
+          indentWithTab
+        ]),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) onChangeRef.current(update.state.doc.toString());
+        })
+      ]
+    });
+    const view = new EditorView({ state, parent: hostRef.current });
+    viewRef.current = view;
+    hostRef.current.cmView = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current !== value) {
+      view.dispatch({ changes: { from: 0, to: current.length, insert: value } });
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className: "sdui-editor-json" });
+}
+var SPECIAL_VALUES = [
+  ['{ "$state": "\uD0A4", "default": \u2026 }', "\uD398\uC774\uC9C0 \uC0C1\uD0DC \uBC14\uC778\uB529 (\uACBD\uB85C \uC870\uD68C \uC9C0\uC6D0: form.$errors.name)"],
+  ['{ "$item": "\uD544\uB4DC" } / { "$item": true }', "ForEach \uD604\uC7AC \uD589\uC758 \uD544\uB4DC / \uD589 \uC804\uCCB4"],
+  ['{ "$index": true }', "ForEach \uD604\uC7AC \uC778\uB371\uC2A4 (0\uBD80\uD130)"],
+  ['{ "$calc": { "op": "\u2026", "args": [\u2026] } }', "\uACC4\uC0B0\uAC12 \u2014 sum\xB7sub\xB7mul\xB7div\xB7percent\xB7count\xB7concat\xB7encode\xB7eq\xB7gt\xB7gte\xB7lt\xB7lte\xB7not"]
+];
+var ACTIONS = [
+  ["navigate", "to \u2014 \uD398\uC774\uC9C0 \uC774\uB3D9"],
+  ["setState", "key, value \uB610\uB294 fromEvent:true(\uC774\uBCA4\uD2B8 \uAC12 \uC800\uC7A5)"],
+  ["open / close", "key \u2014 \uC0C1\uD0DC\uB97C true/false\uB85C (Show+Dialog \uC870\uD569)"],
+  ["toast", "tone\xB7title\xB7message \u2014 \uC6B0\uD558\uB2E8 \uC54C\uB9BC 4\uCD08"],
+  ["submitForm", "form, endpoint, method?, onSuccess?, onError? \u2014 \uAC80\uC99D \uD6C4 \uC804\uC1A1"],
+  ["arrayAppend/Remove/Move/Update", "key(+value/index/from\xB7to/field) \u2014 \uBC18\uBCF5 \uD589 \uD3B8\uC9D1"],
+  ["download", "endpoint, filename? \u2014 \uD30C\uC77C \uC800\uC7A5"],
+  ["refresh / invalidate", "\uC5B4\uB311\uD130 \uC704\uC784 \u2014 \uC7AC\uC870\uD68C"],
+  ["print", "\uBE0C\uB77C\uC6B0\uC800 \uC778\uC1C4"],
+  ["custom", "name, payload? \u2014 \uD638\uC2A4\uD2B8 \uC571 \uD655\uC7A5 \uC9C0\uC810"]
+];
+var RULES = "required \xB7 min \xB7 max \xB7 minLength \xB7 maxLength \xB7 pattern \xB7 notBeforeField \xB7 custom";
+function HelpPanel({ onClose }) {
+  const components = Object.keys(defaultRegistry).sort();
+  return /* @__PURE__ */ jsxs("aside", { className: "sdui-editor-help", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-help__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-h5", children: "\uC2A4\uD399 \uC791\uC131 \uB3C4\uC6C0\uB9D0" }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "x", label: "\uB2EB\uAE30", size: "sm", onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-help__body", children: [
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "wp-overline", children: "\uD398\uC774\uC9C0 \uAD6C\uC870" }),
+        /* @__PURE__ */ jsx("pre", { className: "sdui-editor-help__code", children: `{
+  "version": 1,
+  "title": "\uC81C\uBAA9",
+  "subtitle": "\uBD80\uC81C",
+  "urlState": ["tab"],
+  "body": [ /* \uB178\uB4DC \uBC30\uC5F4 */ ]
+}` }),
+        /* @__PURE__ */ jsx("pre", { className: "sdui-editor-help__code", children: `{
+  "component": "Button",
+  "props": { "variant": "primary",
+             "onClick": { "action": "\u2026" } },
+  "slots": { "footer": [ /* \uB178\uB4DC */ ] },
+  "children": [ "\uD14D\uC2A4\uD2B8 \uB610\uB294 \uB178\uB4DC" ]
+}` })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "wp-overline", children: "\uD2B9\uC218 \uAC12 (props \uC790\uB9AC)" }),
+        /* @__PURE__ */ jsx("dl", { className: "sdui-editor-help__dl", children: SPECIAL_VALUES.map(([code, desc]) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx("code", { children: code }) }),
+          /* @__PURE__ */ jsx("dd", { children: desc })
+        ] }, code)) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "wp-overline", children: "\uC561\uC158 (on* \uD504\uB86D \uC790\uB9AC, \uBC30\uC5F4\uC774\uBA74 \uC21C\uCC28 \uC2E4\uD589)" }),
+        /* @__PURE__ */ jsx("dl", { className: "sdui-editor-help__dl", children: ACTIONS.map(([name, desc]) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx("code", { children: name }) }),
+          /* @__PURE__ */ jsx("dd", { children: desc })
+        ] }, name)) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "wp-overline", children: "\uD3FC \uAC80\uC99D \uADDC\uCE59" }),
+        /* @__PURE__ */ jsx("p", { className: "wp-body-sm", children: RULES }),
+        /* @__PURE__ */ jsxs("p", { className: "wp-caption", children: [
+          "\uC5D0\uB7EC \uD45C\uC2DC: Field.error\uC5D0 ",
+          '{ "$state": "\uD3FCid.$errors.\uD544\uB4DC" }',
+          " \uBC14\uC778\uB529 \xB7 \uC81C\uCD9C \uBC84\uD2BC loading\uC5D0 ",
+          '{ "$state": "\uD3FCid.$submitting" }'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsxs("h3", { className: "wp-overline", children: [
+          "\uCEF4\uD3EC\uB10C\uD2B8 \uC5B4\uD718 (",
+          components.length + 1,
+          "\uC885)"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sdui-editor-help__chips", children: [
+          /* @__PURE__ */ jsx("code", { className: "sdui-editor-help__chip", children: "ForEach" }),
+          components.map((name) => /* @__PURE__ */ jsx("code", { className: "sdui-editor-help__chip", children: name }, name))
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "wp-caption", children: "ForEach\uB294 \uB80C\uB354\uB7EC \uB0B4\uC7A5 \u2014 props.source(\uBC30\uC5F4) + children \uBC18\uBCF5, slots.empty." })
+      ] })
+    ] })
+  ] });
+}
+var PreviewBoundary = class extends React.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidUpdate(prev) {
+    if (this.state.error && (prev.resetKey !== this.props.resetKey || prev.signature !== this.props.signature)) {
+      this.setState({ error: null });
+    }
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: "\uBBF8\uB9AC\uBCF4\uAE30 \uB80C\uB354 \uC624\uB958", children: this.state.error.message });
+    }
+    return this.props.children;
+  }
+};
+var UNKNOWN_BASE = "__unknown-base__";
+function readDraft(key) {
+  const raw = sessionStorage.getItem(key);
+  if (raw === null) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && parsed.v === 1 && typeof parsed.text === "string") {
+      return { v: 1, base: typeof parsed.base === "string" ? parsed.base : null, text: parsed.text };
+    }
+  } catch {
+  }
+  return { v: 1, base: null, text: raw };
+}
+function writeDraft(key, base, text) {
+  sessionStorage.setItem(key, JSON.stringify({ v: 1, base, text }));
+}
+function EditorView2({ store, id, onBack, onPreview }) {
+  const caps = store.capabilities;
+  const draftKey = `sdui-draft:${id}`;
+  const [loaded, setLoaded] = useState(null);
+  const [serverVersion, setServerVersion] = useState(null);
+  const [baseVersion, setBaseVersion] = useState(null);
+  const [text, setText] = useState("");
+  const textRef = useRef(text);
+  textRef.current = text;
+  const [loadError, setLoadError] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState(null);
+  const [saveError, setSaveError] = useState(null);
+  const [conflict, setConflict] = useState(false);
+  const [gone, setGone] = useState(false);
+  const [corrupt, setCorrupt] = useState(false);
+  const [draftRestored, setDraftRestored] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [previewKey, setPreviewKey] = useState(0);
+  const [previewNotice, setPreviewNotice] = useState(null);
+  const noticeTimer = useRef(null);
+  useEffect(() => {
+    if (!id) return;
+    setLoaded(null);
+    setLoadError(null);
+    setConflict(false);
+    setGone(false);
+    let alive = true;
+    store.read(id).then((record) => {
+      if (!alive) return;
+      if (!record) {
+        setLoadError("\uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+        return;
+      }
+      const pretty = JSON.stringify(record.spec, null, 2);
+      setLoaded(pretty);
+      setServerVersion(record.version);
+      setCorrupt(record.corrupt === true);
+      const draft = readDraft(`sdui-draft:${id}`);
+      if (draft && draft.text !== pretty) {
+        setText(draft.text);
+        setDraftRestored(true);
+        setBaseVersion(draft.base ?? UNKNOWN_BASE);
+      } else {
+        setText(pretty);
+        setDraftRestored(false);
+        setBaseVersion(record.version);
+      }
+    }).catch((err) => {
+      if (alive) setLoadError(messageOf(err, "\uD398\uC774\uC9C0\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+    });
+    return () => {
+      alive = false;
+    };
+  }, [id, store]);
+  useEffect(() => () => {
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+  }, []);
+  const [debounced, setDebounced] = useState("");
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(text), 300);
+    return () => clearTimeout(timer);
+  }, [text]);
+  useEffect(() => {
+    if (loaded === null || debounced !== textRef.current) return;
+    if (debounced && debounced !== loaded) writeDraft(draftKey, baseVersion, debounced);
+    else sessionStorage.removeItem(draftKey);
+  }, [debounced, loaded, draftKey, baseVersion]);
+  const parsed = useMemo(() => {
+    if (!debounced.trim()) return { spec: null, error: null };
+    try {
+      return { spec: JSON.parse(debounced), error: null };
+    } catch (err) {
+      return { spec: null, error: err instanceof Error ? err.message : "JSON \uD30C\uC2F1 \uC624\uB958" };
+    }
+  }, [debounced]);
+  const issues = useMemo(() => parsed.spec ? gradeIssues(parsed.spec) : [], [parsed.spec]);
+  const errorCount = issues.filter((issue) => issue.severity === "error").length;
+  const dirty = loaded !== null && text !== loaded;
+  const draftStale = draftRestored && baseVersion !== null && baseVersion !== serverVersion;
+  const save = async (force = false) => {
+    if (saving) return;
+    const snapshot = text;
+    let spec;
+    try {
+      spec = JSON.parse(snapshot);
+    } catch {
+      setSaveError("JSON\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC544 \uC800\uC7A5\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+      return;
+    }
+    const structural = gradeIssues(spec).filter((issue) => issue.severity === "error");
+    if (structural.length > 0) {
+      setConflict(false);
+      setGone(false);
+      setSaveError(
+        `\uC2A4\uD399 \uAD6C\uC870 \uC624\uB958 ${structural.length}\uAC74 \u2014 \uC800\uC7A5\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4: ${structural[0].path} ${structural[0].message}`
+      );
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const saved = await store.write(
+        id,
+        spec,
+        // force면 기대 버전을 빼 업서트한다(사용자가 '무시하고 덮어쓰기'를 골랐을 때)
+        force || baseVersion === null ? {} : { expect: { kind: "version", value: baseVersion } }
+      );
+      const pretty = JSON.stringify(spec, null, 2);
+      setLoaded(pretty);
+      setServerVersion(saved.version);
+      setBaseVersion(saved.version);
+      setConflict(false);
+      setGone(false);
+      setCorrupt(false);
+      setDraftRestored(false);
+      sessionStorage.removeItem(draftKey);
+      setText((current) => current === snapshot ? pretty : current);
+      setSavedAt((/* @__PURE__ */ new Date()).toLocaleTimeString("ko-KR"));
+    } catch (err) {
+      if (err instanceof VersionMismatchError) {
+        setConflict(true);
+        setServerVersion(err.current.version);
+        setSaveError(err.message);
+      } else if (err instanceof PageGoneError) {
+        setGone(true);
+        setSaveError(err.message);
+      } else {
+        setSaveError(messageOf(err, "\uC800\uC7A5\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"));
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+  const recreate = async () => {
+    if (saving) return;
+    const snapshot = text;
+    let spec;
+    try {
+      spec = JSON.parse(snapshot);
+    } catch {
+      setSaveError("JSON\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC544 \uC800\uC7A5\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+      return;
+    }
+    setSaving(true);
+    try {
+      const saved = await store.write(id, spec, { ifAbsent: true });
+      const pretty = JSON.stringify(spec, null, 2);
+      setLoaded(pretty);
+      setServerVersion(saved.version);
+      setBaseVersion(saved.version);
+      setGone(false);
+      setCorrupt(false);
+      setSaveError(null);
+      setDraftRestored(false);
+      sessionStorage.removeItem(draftKey);
+      setText((current) => current === snapshot ? pretty : current);
+      setSavedAt((/* @__PURE__ */ new Date()).toLocaleTimeString("ko-KR"));
+    } catch (err) {
+      setSaveError(messageOf(err, "\uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const reloadFromServer = async () => {
+    try {
+      const record = await store.read(id);
+      if (!record) {
+        setSaveError("\uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+        return;
+      }
+      const pretty = JSON.stringify(record.spec, null, 2);
+      setLoaded(pretty);
+      setServerVersion(record.version);
+      setBaseVersion(record.version);
+      setText(pretty);
+      setConflict(false);
+      setGone(false);
+      setCorrupt(record.corrupt === true);
+      setSaveError(null);
+      setDraftRestored(false);
+      sessionStorage.removeItem(draftKey);
+    } catch (err) {
+      setSaveError(messageOf(err, "\uB2E4\uC2DC \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+    }
+  };
+  const format = () => {
+    try {
+      setText(JSON.stringify(JSON.parse(text), null, 2));
+    } catch {
+      setSaveError("JSON\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC544 \uC815\uB82C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+    }
+  };
+  const remove = async () => {
+    if (!window.confirm(`"${id}" \uD398\uC774\uC9C0\uB97C \uC0AD\uC81C\uD560\uAE4C\uC694?
+\uC0AD\uC81C\uD558\uBA74 \uB418\uB3CC\uB9B4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.`)) return;
+    try {
+      await store.remove(id);
+      sessionStorage.removeItem(draftKey);
+      onBack();
+    } catch (err) {
+      setSaveError(err instanceof StoreUnsupportedError ? err.message : messageOf(err, "\uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4"));
+    }
+  };
+  useEffect(() => {
+    if (!dirty) return;
+    const handler = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [dirty]);
+  const notifyPreview = useCallback((what) => {
+    setPreviewNotice(`${what} \u2014 \uBBF8\uB9AC\uBCF4\uAE30\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`);
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    noticeTimer.current = setTimeout(() => setPreviewNotice(null), 2500);
+  }, []);
+  const previewAdapter = useMemo(
+    () => ({
+      navigate: (to) => notifyPreview(`navigate \u2192 ${to}`),
+      // 요청은 보내지 않되 성공(null)으로 응답해 onSuccess 흐름은 그려 볼 수 있게 한다
+      fetch: async (path, init) => {
+        notifyPreview(`${init.method} ${path}`);
+        return null;
+      },
+      // download는 rawFetch 결과를 파일로 내려받는다 — 실패로 끊어 빈 파일이 저장되는 것도 막는다
+      rawFetch: async (path) => {
+        notifyPreview(`download ${path}`);
+        throw new Error("\uBBF8\uB9AC\uBCF4\uAE30\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");
+      },
+      invalidate: (prefix) => notifyPreview(`invalidate ${prefix}`),
+      refresh: () => notifyPreview("refresh")
+    }),
+    [notifyPreview]
+  );
+  if (!id) {
+    return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-page wp-app", children: [
+      /* @__PURE__ */ jsx(Alert, { tone: "warning", title: "\uD398\uC774\uC9C0 id\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", children: "\uD3B8\uC9D1\uD560 \uD398\uC774\uC9C0\uB97C \uBAA9\uB85D\uC5D0\uC11C \uC120\uD0DD\uD558\uC138\uC694." }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { icon: "arrow-left", onClick: onBack, children: "\uBAA9\uB85D\uC73C\uB85C" }) })
+    ] });
+  }
+  if (loadError) {
+    return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-page wp-app", children: [
+      /* @__PURE__ */ jsx(Alert, { tone: "danger", title: "\uBD88\uB7EC\uC624\uAE30 \uC2E4\uD328", children: loadError }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { icon: "arrow-left", onClick: onBack, children: "\uBAA9\uB85D\uC73C\uB85C" }) })
+    ] });
+  }
+  if (loaded === null) {
+    return /* @__PURE__ */ jsx("div", { className: "sdui-editor-center", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "\uD398\uC774\uC9C0 \uBD88\uB7EC\uC624\uB294 \uC911" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-layout wp-app", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-toolbar", children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: "arrow-left", label: "\uBAA9\uB85D\uC73C\uB85C", onClick: onBack }),
+      /* @__PURE__ */ jsx("span", { className: "wp-mono sdui-editor-toolbar__id", children: id }),
+      dirty ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "\uC800\uC7A5 \uC548 \uB428" }) : savedAt ? /* @__PURE__ */ jsxs(Badge, { tone: "success", children: [
+        "\uC800\uC7A5\uB428 ",
+        savedAt
+      ] }) : null,
+      parsed.error ? /* @__PURE__ */ jsx(Badge, { tone: "danger", children: "JSON \uC624\uB958" }) : errorCount > 0 ? /* @__PURE__ */ jsxs(Badge, { tone: "danger", children: [
+        "\uAD6C\uC870 \uC624\uB958 ",
+        errorCount
+      ] }) : issues.length > 0 ? /* @__PURE__ */ jsxs(Badge, { tone: "warning", children: [
+        "\uACBD\uACE0 ",
+        issues.length
+      ] }) : null,
+      /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "code", onClick: format, children: "\uC815\uB82C" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "refresh-cw", onClick: () => setPreviewKey((k) => k + 1), children: "\uBBF8\uB9AC\uBCF4\uAE30 \uCD08\uAE30\uD654" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "eye", onClick: () => onPreview(id), children: "\uBCF4\uAE30" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "circle-help", onClick: () => setHelpOpen((v) => !v), children: "\uB3C4\uC6C0\uB9D0" }),
+      caps.remove ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", icon: "trash-2", onClick: () => void remove(), children: "\uC0AD\uC81C" }) : null,
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", icon: "save", loading: saving, disabled: !dirty, onClick: () => void save(), children: "\uC800\uC7A5 (\u2318S)" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sdui-editor-banner", children: /* @__PURE__ */ jsxs(Alert, { tone: "info", title: `${caps.label}\uC758 \uC2A4\uD399\uC744 \uC9C1\uC811 \uD3B8\uC9D1\uD558\uACE0 \uC788\uC2B5\uB2C8\uB2E4`, children: [
+      "\uC800\uC7A5\uD558\uBA74 \uADF8 \uC989\uC2DC \uC6B4\uC601 \uD654\uBA74\uC5D0 \uBC18\uC601\uB429\uB2C8\uB2E4(\uCD08\uC548 \uBCF4\uAD00 \uB2E8\uACC4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4). \uBBF8\uB9AC\uBCF4\uAE30\uB294 \uAD8C\uD55C \uC7AC\uB2E8",
+      /* @__PURE__ */ jsx("b", { children: " \uC774\uC804" }),
+      "\uC758 \uC6D0\uBCF8\uC774\uB77C, \uC2E4\uC81C \uC0AC\uC6A9\uC790\uC5D0\uAC8C\uB294 ",
+      /* @__PURE__ */ jsx("code", { children: "Can" }),
+      " \uC870\uAC74\uC5D0 \uB530\uB77C \uC77C\uBD80\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
+    ] }) }),
+    corrupt ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-banner", children: /* @__PURE__ */ jsx(Alert, { tone: "warning", title: "\uC800\uC7A5\uB41C \uC2A4\uD399\uC774 \uC190\uC0C1\uB418\uC5B4 \uC77D\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4", children: "\uB0B4\uC6A9\uC744 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC5B4 \uBE44\uC5B4 \uC788\uB294 \uC0C1\uD0DC\uB85C \uC5F4\uC5C8\uC2B5\uB2C8\uB2E4. \uC62C\uBC14\uB978 \uC2A4\uD399\uC744 \uC785\uB825\uD574 \uC800\uC7A5\uD558\uBA74 \uC774 \uD398\uC774\uC9C0\uAC00 \uB418\uC0B4\uC544\uB0A9\uB2C8\uB2E4." }) }) : null,
+    draftRestored ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-banner", children: /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: draftStale ? "warning" : "info",
+        title: draftStale ? "\uCD08\uC548\uC744 \uBCF5\uC6D0\uD588\uC2B5\uB2C8\uB2E4 \u2014 \uADF8 \uC0AC\uC774 \uC11C\uBC84 \uB0B4\uC6A9\uC774 \uBC14\uB00C\uC5C8\uC2B5\uB2C8\uB2E4" : "\uC800\uC7A5\uB418\uC9C0 \uC54A\uC558\uB358 \uCD08\uC548\uC744 \uBCF5\uC6D0\uD588\uC2B5\uB2C8\uB2E4",
+        actions: /* @__PURE__ */ jsx(Button, { size: "xs", onClick: () => void reloadFromServer(), children: "\uCD08\uC548 \uBC84\uB9AC\uACE0 \uC800\uC7A5\uBCF8 \uC5F4\uAE30" }),
+        onClose: () => setDraftRestored(false),
+        children: draftStale ? "\uC774 \uCD08\uC548\uC740 \uC9C0\uAE08 \uC11C\uBC84\uC5D0 \uC800\uC7A5\uB41C \uAC83\uBCF4\uB2E4 \uC774\uC804 \uBC84\uC804\uC744 \uAE30\uC900\uC73C\uB85C \uB9CC\uB4E4\uC5B4\uC84C\uC2B5\uB2C8\uB2E4. \uADF8\uB300\uB85C \uC800\uC7A5\uD558\uBA74 \uCDA9\uB3CC\uB85C \uC548\uB0B4\uD569\uB2C8\uB2E4." : null
+      }
+    ) }) : null,
+    saveError ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-banner", children: /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: conflict ? "warning" : "danger",
+        title: conflict ? "\uC800\uC7A5 \uCDA9\uB3CC" : gone ? "\uD398\uC774\uC9C0\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4" : void 0,
+        actions: conflict ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "xs", onClick: () => void reloadFromServer(), children: "\uC11C\uBC84 \uB0B4\uC6A9 \uBD88\uB7EC\uC624\uAE30 (\uB0B4 \uC218\uC815 \uBC84\uB9BC)" }),
+          /* @__PURE__ */ jsx(Button, { size: "xs", variant: "danger", onClick: () => void save(true), children: "\uBB34\uC2DC\uD558\uACE0 \uB36E\uC5B4\uC4F0\uAE30" })
+        ] }) : gone ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "xs", variant: "primary", loading: saving, onClick: () => void recreate(), children: "\uC774 \uB0B4\uC6A9\uC73C\uB85C \uC0C8\uB85C \uB9CC\uB4E4\uAE30" }),
+          /* @__PURE__ */ jsx(Button, { size: "xs", onClick: onBack, children: "\uBAA9\uB85D\uC73C\uB85C" })
+        ] }) : void 0,
+        onClose: () => {
+          setSaveError(null);
+          setConflict(false);
+          setGone(false);
+        },
+        children: saveError
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-split", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdui-editor-pane", children: [
+        /* @__PURE__ */ jsx(JsonEditor, { value: text, onChange: setText, onSave: () => void save() }),
+        parsed.error || issues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-issues", children: [
+          parsed.error ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-issue sdui-editor-issue--error", children: [
+            /* @__PURE__ */ jsx("span", { className: "wp-mono-xs", children: "JSON" }),
+            " ",
+            parsed.error
+          ] }) : null,
+          issues.slice(0, 20).map((issue, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `sdui-editor-issue${issue.severity === "error" ? " sdui-editor-issue--error" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "wp-mono-xs", children: issue.path }),
+                " ",
+                issue.message
+              ]
+            },
+            i
+          )),
+          issues.length > 20 ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-issue", children: [
+            "\u2026\uC678 ",
+            issues.length - 20,
+            "\uAC74"
+          ] }) : null
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sdui-editor-preview", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sdui-editor-preview__head", children: [
+          /* @__PURE__ */ jsx("span", { className: "wp-overline", children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
+          previewNotice ? /* @__PURE__ */ jsx("span", { className: "sdui-editor-preview__notice", children: previewNotice }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sdui-editor-preview__body", children: parsed.spec ? /* @__PURE__ */ jsx(PreviewBoundary, { resetKey: previewKey, signature: debounced, children: /* @__PURE__ */ jsx(SduiRenderer, { page: parsed.spec, adapter: previewAdapter, syncUrlState: false }, previewKey) }) : /* @__PURE__ */ jsx(Alert, { tone: parsed.error ? "warning" : "neutral", children: parsed.error ? "JSON\uC744 \uACE0\uCE58\uBA74 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uB2E4\uC2DC \uADF8\uB824\uC9D1\uB2C8\uB2E4." : "\uC2A4\uD399\uC744 \uC785\uB825\uD558\uC138\uC694." }) })
+      ] }),
+      helpOpen ? /* @__PURE__ */ jsx(HelpPanel, { onClose: () => setHelpOpen(false) }) : null
+    ] })
+  ] });
+}
+var ViewerBoundary = class extends React.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidUpdate(prev) {
+    if (this.state.error && prev.resetKey !== this.props.resetKey) this.setState({ error: null });
+  }
+  render() {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error, () => this.setState({ error: null }));
+    }
+    return this.props.children;
+  }
+};
+function ViewerView({ store, id, onBack, onEdit, onNavigate }) {
+  const [state, setState] = useState({
+    spec: null,
+    error: null,
+    seq: 0
+  });
+  const load = useCallback(() => {
+    store.read(id).then(
+      (record) => setState(
+        (prev) => record ? { spec: record.spec, error: null, seq: prev.seq + 1 } : { spec: null, error: "\uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", seq: prev.seq + 1 }
+      )
+    ).catch(
+      (err) => setState((prev) => ({ spec: null, error: messageOf(err, "\uD398\uC774\uC9C0\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"), seq: prev.seq + 1 }))
+    );
+  }, [store, id]);
+  useEffect(() => {
+    if (!id) {
+      setState((prev) => ({ spec: null, error: "\uD398\uC774\uC9C0 id\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.", seq: prev.seq + 1 }));
+      return;
+    }
+    setState((prev) => ({ spec: null, error: null, seq: prev.seq + 1 }));
+    load();
+  }, [id, load]);
+  const adapter = useMemo(
+    () => ({ navigate: onNavigate, refresh: load }),
+    [onNavigate, load]
+  );
+  useEffect(() => {
+    if (state.spec?.title) {
+      const previous = document.title;
+      document.title = state.spec.title;
+      return () => {
+        document.title = previous;
+      };
+    }
+    return void 0;
+  }, [state.spec]);
+  return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-viewer wp-app", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-viewer__bar", children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: "arrow-left", label: "\uBAA9\uB85D\uC73C\uB85C", size: "sm", onClick: onBack }),
+      /* @__PURE__ */ jsxs("span", { className: "wp-mono-xs sdui-editor-viewer__id", children: [
+        "/",
+        id
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "pencil", onClick: () => onEdit(id), children: "\uD3B8\uC9D1" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sdui-editor-viewer__body", children: state.error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: "\uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", children: state.error }) : !state.spec ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-center", style: { padding: 64 }, children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "\uBD88\uB7EC\uC624\uB294 \uC911" }) }) : /* @__PURE__ */ jsx(
+      ViewerBoundary,
+      {
+        resetKey: `${id}#${state.seq}`,
+        fallback: (error, retry) => /* @__PURE__ */ jsxs(
+          Alert,
+          {
+            tone: "danger",
+            title: "\uC774 \uD398\uC774\uC9C0 \uC2A4\uD399\uC5D0 \uBB38\uC81C\uAC00 \uC788\uC2B5\uB2C8\uB2E4",
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { size: "xs", icon: "pencil", onClick: () => onEdit(id), children: "\uD3B8\uC9D1\uAE30\uB85C \uC774\uB3D9" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", icon: "refresh-cw", onClick: retry, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+              /* @__PURE__ */ jsx(Button, { size: "xs", icon: "arrow-left", onClick: onBack, children: "\uBAA9\uB85D\uC73C\uB85C" })
+            ] }),
+            children: [
+              "\uD654\uBA74\uC744 \uADF8\uB9AC\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uD3B8\uC9D1\uAE30\uC5D0\uC11C \uC2A4\uD399\uC744 \uACE0\uCE58\uBA74 \uB2E4\uC2DC \uD45C\uC2DC\uB429\uB2C8\uB2E4.",
+              /* @__PURE__ */ jsx("div", { className: "wp-mono-xs", style: { marginTop: 6 }, children: error.message })
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsx(SduiRenderer, { page: state.spec, adapter })
+      }
+    ) })
+  ] });
+}
+function SduiEditor({
+  store,
+  view,
+  onViewChange,
+  defaultView,
+  chrome = true,
+  onNavigate,
+  className
+}) {
+  const [internal, setInternal] = useState(defaultView ?? { name: "list" });
+  const current = view ?? internal;
+  const go = useCallback(
+    (next) => {
+      if (view === void 0) setInternal(next);
+      onViewChange?.(next);
+    },
+    [view, onViewChange]
+  );
+  const openList = useCallback(() => go({ name: "list" }), [go]);
+  const openEdit = useCallback((id) => go({ name: "edit", id }), [go]);
+  const openPreview = useCallback((id) => go({ name: "preview", id }), [go]);
+  const navigateFromSpec = useCallback(
+    (to) => {
+      if (onNavigate) {
+        onNavigate(to);
+        return;
+      }
+      if (to.startsWith("/")) openPreview(to.replace(/^\/+/, ""));
+    },
+    [onNavigate, openPreview]
+  );
+  const caps = store.capabilities;
+  return /* @__PURE__ */ jsxs("div", { className: `sdui-editor${className ? ` ${className}` : ""}`, children: [
+    chrome ? /* @__PURE__ */ jsxs("header", { className: "sdui-editor-chrome", children: [
+      /* @__PURE__ */ jsx("span", { className: "sdui-editor-chrome__title", children: "SDUI \uD398\uC774\uC9C0 \uD3B8\uC9D1\uAE30" }),
+      /* @__PURE__ */ jsx(Badge, { tone: "brand", title: caps.label, children: caps.label })
+    ] }) : null,
+    current.name === "list" ? /* @__PURE__ */ jsx(PageListView, { store, onEdit: openEdit, onPreview: openPreview }) : current.name === "edit" ? /* @__PURE__ */ jsx(EditorView2, { store, id: current.id, onBack: openList, onPreview: openPreview }) : /* @__PURE__ */ jsx(
+      ViewerView,
+      {
+        store,
+        id: current.id,
+        onBack: openList,
+        onEdit: openEdit,
+        onNavigate: navigateFromSpec
+      }
+    )
+  ] });
+}
+
+export { EditorView2 as EditorView, PAGE_ID_PATTERN, PageExistsError, PageGoneError, PageIdConflictError, PageIdRejectedError, PageListView, RestSpecStore, SduiEditor, StoreUnauthorizedError, StoreUnavailableError, StoreUnsupportedError, TEMPLATES, VersionMismatchError, ViewerView, createRestSpecStore, gradeIssues, isValidPageId, titleOf };