@wipco/sdui-editor 0.15.0 → 0.17.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect, useDeferredValue, useReducer, useId } from 'react';
-import { defaultRegistry, createRegistry, Tooltip, SidebarNav, SegmentedControl, Radio, Breadcrumb, Avatar, Alert, Icon, IconButton, Spinner, Button, Card, Input, Badge, EmptyState, Table, SduiDialog, Field, Select, validateSpec, SduiRenderer, Checkbox, Dialog, Textarea, Switch } from '@wipco/sdui';
+import { defaultRegistry, createRegistry, Tooltip, SidebarNav, SegmentedControl, Radio, Breadcrumb, Avatar, Alert, Icon, IconButton, Spinner, Button, Card, Tabs, Input, Badge, EmptyState, Table, SduiDialog, Field, Select, validateSpec, SduiRenderer, Checkbox, Switch, Dialog, Textarea } from '@wipco/sdui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { EditorView, basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
@@ -7,6 +7,7 @@ import { keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { json } from '@codemirror/lang-json';
 import { getComponentMeta, slotNamesOf, paletteGroups } from '@wipco/sdui/meta';
+import { AutocompleteField } from '@wipco/sdui/widgets/AutocompleteField';
 
 // src/SduiEditor.tsx
 
@@ -77,6 +78,10 @@ var PAGE_ID_PATTERN = /^([A-Za-z0-9_-]+|\{[A-Za-z0-9_]+\})(\/([A-Za-z0-9_-]+|\{[
 function isValidPageId(id) {
   return PAGE_ID_PATTERN.test(id) && id.length <= 200;
 }
+var DIALOG_PREFIX = "dialogs/";
+function isDialogSpecId(id) {
+  return id.startsWith(DIALOG_PREFIX);
+}
 function titleOf(spec) {
   if (spec && typeof spec === "object" && typeof spec.title === "string") {
     return spec.title;
@@ -384,11 +389,47 @@ var LIST = {
     }
   ]
 };
+var DIALOG = {
+  version: 1,
+  title: "\uB2E4\uC774\uC5BC\uB85C\uADF8",
+  body: [
+    {
+      component: "Show",
+      props: { when: { $state: "open" } },
+      children: [
+        {
+          component: "Dialog",
+          props: {
+            title: "\uB2E4\uC774\uC5BC\uB85C\uADF8 \uC81C\uBAA9",
+            size: "md",
+            onClose: { action: "close", key: "open" }
+          },
+          slots: {
+            footer: [
+              {
+                component: "Button",
+                props: { onClick: { action: "close", key: "open" } },
+                children: ["\uCDE8\uC18C"]
+              },
+              {
+                component: "Button",
+                props: { variant: "primary", onClick: { action: "close", key: "open" } },
+                children: ["\uD655\uC778"]
+              }
+            ]
+          },
+          children: [{ component: "Text", props: { preset: "body", value: "\uB0B4\uC6A9\uC744 \uAD6C\uC131\uD558\uC138\uC694." } }]
+        }
+      ]
+    }
+  ]
+};
 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 }
+  { key: "list", label: "\uBAA9\uB85D", description: "\uD14C\uC774\uBE14 + \uC0C1\uD0DC \uBC30\uC9C0", spec: LIST },
+  { key: "dialog", label: "\uB2E4\uC774\uC5BC\uB85C\uADF8 \uC870\uAC01", description: "Show(open) + Dialog \uACE8\uACA9 \u2014 dialogs/ \uC2A4\uD399\uC6A9", spec: DIALOG }
 ];
 
 // src/util.ts
@@ -409,11 +450,18 @@ function PageListView({ store, onEdit, onPreview }) {
   const [listFailed, setListFailed] = useState(false);
   const [error, setError] = useState(null);
   const [query, setQuery] = useState("");
+  const [tab, setTab] = useState("pages");
   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 openCreate = () => {
+    setCreateOpen(true);
+    setCreateError(null);
+    setNewId(tab === "dialogs" ? DIALOG_PREFIX : "");
+    setTemplate(tab === "dialogs" ? "dialog" : "blank");
+  };
   const load = useCallback(() => {
     setListFailed(false);
     store.list().then(setPages).catch((err) => {
@@ -422,12 +470,17 @@ function PageListView({ store, onEdit, onPreview }) {
     });
   }, [store]);
   useEffect(load, [load]);
+  const counts = useMemo(() => {
+    const dialogs = pages?.filter((p) => isDialogSpecId(p.id)).length ?? 0;
+    return { dialogs, pages: (pages?.length ?? 0) - dialogs };
+  }, [pages]);
   const filtered = useMemo(() => {
     if (!pages) return null;
+    const scoped = pages.filter((p) => isDialogSpecId(p.id) === (tab === "dialogs"));
     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]);
+    if (!q) return scoped;
+    return scoped.filter((p) => p.id.toLowerCase().includes(q) || (p.title ?? "").toLowerCase().includes(q));
+  }, [pages, query, tab]);
   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.");
@@ -498,10 +551,7 @@ function PageListView({ store, onEdit, onPreview }) {
         /* @__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" }) })
+      /* @__PURE__ */ jsx("div", { className: "wp-page-head__actions", children: /* @__PURE__ */ jsx(Button, { variant: "primary", icon: "plus", onClick: openCreate, children: tab === "dialogs" ? "\uC0C8 \uB2E4\uC774\uC5BC\uB85C\uADF8" : "\uC0C8 \uD398\uC774\uC9C0" }) })
     ] }),
     error ? /* @__PURE__ */ jsx(
       Alert,
@@ -515,6 +565,17 @@ function PageListView({ store, onEdit, onPreview }) {
     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(
+          Tabs,
+          {
+            items: [
+              { value: "pages", icon: "layout-dashboard", label: "\uD654\uBA74", count: counts.pages },
+              { value: "dialogs", icon: "external-link", label: "\uB2E4\uC774\uC5BC\uB85C\uADF8", count: counts.dialogs }
+            ],
+            value: tab,
+            onChange: (next) => setTab(next)
+          }
+        ),
         /* @__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,
@@ -554,9 +615,9 @@ function PageListView({ store, onEdit, onPreview }) {
           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."
+              title: query ? "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" : tab === "dialogs" ? "\uB2E4\uC774\uC5BC\uB85C\uADF8 \uC870\uAC01\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" : "\uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+              actions: query ? void 0 : /* @__PURE__ */ jsx(Button, { variant: "primary", icon: "plus", onClick: openCreate, children: tab === "dialogs" ? "\uCCAB \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB9CC\uB4E4\uAE30" : "\uCCAB \uD398\uC774\uC9C0 \uB9CC\uB4E4\uAE30" }),
+              children: query ? "\uB2E4\uB978 \uAC80\uC0C9\uC5B4\uB85C \uC2DC\uB3C4\uD574 \uBCF4\uC138\uC694." : tab === "dialogs" ? `${DIALOG_PREFIX} \uC811\uB450 id\uB85C \uB9CC\uB4E0 \uC2A4\uD399\uC774 \uC774 \uD0ED\uC5D0 \uBAA8\uC785\uB2C8\uB2E4 \u2014 Fragment\uAC00 \uB07C\uC6CC \uC4F0\uB294 \uACF5\uC6A9 \uC870\uAC01\uC785\uB2C8\uB2E4.` : "\uC0C8 \uD398\uC774\uC9C0\uB97C \uB9CC\uB4E4\uC5B4 \uC2DC\uC791\uD558\uC138\uC694."
             }
           )
         }
@@ -565,8 +626,8 @@ function PageListView({ store, onEdit, onPreview }) {
     createOpen ? /* @__PURE__ */ jsxs(
       SduiDialog,
       {
-        title: "\uC0C8 \uD398\uC774\uC9C0",
-        subtitle: "id\uB294 URL \uACBD\uB85C\uAC00 \uB429\uB2C8\uB2E4",
+        title: tab === "dialogs" ? "\uC0C8 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC870\uAC01" : "\uC0C8 \uD398\uC774\uC9C0",
+        subtitle: tab === "dialogs" ? `${DIALOG_PREFIX} \uC811\uB450\uAC00 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uD0ED\uC758 \uAE30\uC900\uC785\uB2C8\uB2E4` : "id\uB294 URL \uACBD\uB85C\uAC00 \uB429\uB2C8\uB2E4",
         icon: "plus",
         onClose: () => setCreateOpen(false),
         footer: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -576,23 +637,31 @@ function PageListView({ store, onEdit, onPreview }) {
         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,
+          /* @__PURE__ */ jsx(
+            Field,
             {
-              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();
+              label: "\uD398\uC774\uC9C0 id",
+              required: true,
+              hint: tab === "dialogs" ? `\uC608: ${DIALOG_PREFIX}asset-edit` : "\uC608: home, sales/orders",
+              children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  mono: true,
+                  value: newId,
+                  autoFocus: true,
+                  disabled: pages === null,
+                  placeholder: tab === "dialogs" ? `${DIALOG_PREFIX}asset-edit` : "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,
             {
@@ -848,10 +917,122 @@ var editorRegistry = createRegistry({
     () => import('@wipco/sdui/widgets/TreeView').then((m) => ({ default: m.TreeView }))
   )
 });
+
+// src/preview/seed.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasDialogInside(node) {
+  if (!isPlainObject(node)) return false;
+  if (node.component === "Dialog") return true;
+  const children = Array.isArray(node.children) ? node.children : [];
+  for (const child of children) if (hasDialogInside(child)) return true;
+  if (isPlainObject(node.slots)) {
+    for (const list of Object.values(node.slots)) {
+      if (!Array.isArray(list)) continue;
+      for (const child of list) if (hasDialogInside(child)) return true;
+    }
+  }
+  return false;
+}
+function dialogOpenSeeds(spec) {
+  const seeds = {};
+  if (!isPlainObject(spec) || !Array.isArray(spec.body)) return seeds;
+  for (const node of spec.body) {
+    if (!isPlainObject(node) || node.component !== "Show") continue;
+    const when = isPlainObject(node.props) ? node.props.when : void 0;
+    if (!isPlainObject(when) || typeof when.$state !== "string" || when.$state === "") continue;
+    if (Object.keys(when).some((key) => key !== "$state" && key !== "default")) continue;
+    if (!hasDialogInside(node)) continue;
+    seeds[when.$state] = true;
+  }
+  return seeds;
+}
+function seedSignature(seeds) {
+  return JSON.stringify(
+    Object.keys(seeds).sort().map((key) => [key, seeds[key]])
+  );
+}
+var INITIAL_PREVIEW_SETUP = {
+  autoOpen: true,
+  manual: [],
+  argsOn: false,
+  argsText: "{\n}",
+  dataArmed: false,
+  entityLabels: {}
+};
+function parseSeedValue(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+function seedsOf(setup, autoSeeds) {
+  const seeds = setup.autoOpen ? { ...autoSeeds } : {};
+  for (const row of setup.manual) {
+    const key = row.key.trim();
+    if (!key) continue;
+    seeds[key] = parseSeedValue(row.text);
+  }
+  return seeds;
+}
+function argsWrapperPage(specId, argsText) {
+  let parsed;
+  try {
+    parsed = JSON.parse(argsText);
+  } catch {
+    return null;
+  }
+  if (!isPlainObject(parsed)) return null;
+  const page = {
+    version: 1,
+    body: [{ component: "Fragment", props: { id: specId, args: parsed } }]
+  };
+  return { page, args: parsed };
+}
+var STATE_WRITING_ACTIONS = /* @__PURE__ */ new Set([
+  "setState",
+  "open",
+  "close",
+  "arrayAppend",
+  "arrayRemove",
+  "arrayMove",
+  "arrayUpdate"
+]);
+function collectStateKeys(spec, limit = 200) {
+  const counts = /* @__PURE__ */ new Map();
+  const touch = (key) => counts.set(key, (counts.get(key) ?? 0) + 1);
+  const walk = (value) => {
+    if (Array.isArray(value)) {
+      for (const item of value) walk(item);
+      return;
+    }
+    if (!isPlainObject(value)) return;
+    if (typeof value.$state === "string" && value.$state) touch(value.$state);
+    if (typeof value.action === "string" && STATE_WRITING_ACTIONS.has(value.action) && typeof value.key === "string" && value.key) {
+      touch(value.key);
+    }
+    for (const [name, sub] of Object.entries(value)) {
+      if (name === "$state") continue;
+      walk(sub);
+    }
+  };
+  walk(spec);
+  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).slice(0, limit).map(([key]) => key);
+}
+function patternParams(specId) {
+  const params = [];
+  for (const segment of specId.split("/")) {
+    const match = /^\{([A-Za-z0-9_]+)\}$/.exec(segment);
+    if (match) params.push(match[1]);
+  }
+  return params;
+}
 var ROOT_ID = "$root";
 var DEFAULT_SLOT = "$children";
 var TEXT_CHILD = "#text";
-function isPlainObject(v) {
+function isPlainObject2(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function mint(seq) {
@@ -861,11 +1042,11 @@ function childFromSpec(spec, seq) {
   if (typeof spec === "string") {
     return { kind: "text", id: mint(seq), text: spec };
   }
-  if (!isPlainObject(spec) || typeof spec.component !== "string") {
+  if (!isPlainObject2(spec) || typeof spec.component !== "string") {
     return { kind: "text", id: mint(seq), text: JSON.stringify(spec) ?? "" };
   }
   const slots = {};
-  if (isPlainObject(spec.slots)) {
+  if (isPlainObject2(spec.slots)) {
     for (const [name, list] of Object.entries(spec.slots)) {
       if (!Array.isArray(list) || list.length === 0) continue;
       slots[name] = list.map((c) => childFromSpec(c, seq));
@@ -878,14 +1059,14 @@ function childFromSpec(spec, seq) {
     kind: "node",
     id: mint(seq),
     component: spec.component,
-    props: isPlainObject(spec.props) ? { ...spec.props } : {},
+    props: isPlainObject2(spec.props) ? { ...spec.props } : {},
     slots
   };
   return typeof spec.key === "string" ? { ...node, key: spec.key } : node;
 }
 function fromPage(page) {
   const seq = { next: 1 };
-  if (!isPlainObject(page)) {
+  if (!isPlainObject2(page)) {
     return { meta: { version: 1 }, body: [], nextId: seq.next };
   }
   const { body, ...rest } = page;
@@ -1841,125 +2022,381 @@ var SPEC_PAIR_FREQ = {
   "Show>LiveClock": 1,
   "Strip>Row": 1
 };
-var HINT_PROPS = ["title", "label", "header", "text", "value", "placeholder", "name"];
-function isPlainObject2(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-function summarize(value) {
-  if (typeof value === "string") return value.trim() || void 0;
+
+// src/builder/canvas/project.ts
+var EDIT_MARK = "$EditMark";
+var EDIT_FOREACH = "$EditForEach";
+var MARK_ATTR = "data-sdui-id";
+var LOGICAL = /* @__PURE__ */ new Set(["Show", "Can", "ForEach"]);
+function bindingLabel(value) {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "string") return value || void 0;
   if (typeof value === "number" || typeof value === "boolean") return String(value);
-  if (isPlainObject2(value)) {
-    if (typeof value.$state === "string") return `{${value.$state}}`;
-    if (value.$item === true) return "{\uD589}";
-    if (typeof value.$item === "string") return `{\uD589.${value.$item}}`;
-    if (value.$index === true) return "{\uBC88\uD638}";
-    if (isPlainObject2(value.$calc) && typeof value.$calc.op === "string") return `{\uACC4\uC0B0:${value.$calc.op}}`;
+  if (Array.isArray(value)) return void 0;
+  const bag = value;
+  if (typeof bag.$state === "string") return `{${bag.$state}}`;
+  if (bag.$item === true) return "{\uD589}";
+  if (typeof bag.$item === "string") return `{\uD589.${bag.$item}}`;
+  if (bag.$index === true) return "{\uBC88\uD638}";
+  const calc = bag.$calc;
+  if (calc !== null && typeof calc === "object" && !Array.isArray(calc)) {
+    const op = calc.op;
+    if (typeof op === "string") return `{\uACC4\uC0B0:${op}}`;
   }
   return void 0;
 }
-function describeChild(child, catalog) {
-  if (child.kind === "text") {
-    const text = child.text.trim();
-    return { label: "\uD14D\uC2A4\uD2B8", hint: text || "(\uBE48 \uBB38\uC790\uC5F4)", known: true };
-  }
-  const meta = getComponentMeta(child.component, catalog);
-  let hint;
-  for (const name of HINT_PROPS) {
-    if (!(name in child.props)) continue;
-    hint = summarize(child.props[name]);
-    if (hint) break;
-  }
-  if (!hint) {
-    const first = child.slots[DEFAULT_SLOT]?.[0];
-    if (first?.kind === "text") hint = first.text.trim() || void 0;
+function chromeHintOf(node) {
+  switch (node.component) {
+    case "Show":
+      return bindingLabel(node.props.when);
+    case "Can": {
+      const entity = typeof node.props.entity === "string" ? node.props.entity : "?";
+      const action = typeof node.props.action === "string" ? node.props.action : "read";
+      return `${entity} \xB7 ${action}`;
+    }
+    case "ForEach":
+      return bindingLabel(node.props.source);
+    default:
+      return void 0;
   }
-  return {
-    label: meta?.label ?? child.component,
-    ...hint ? { hint } : {},
-    ...meta ? { icon: meta.icon } : {},
-    known: meta !== void 0
-  };
 }
-function breadcrumbOf(doc, id, catalog) {
-  const trail = [...ancestorIdsOf(doc, id), id];
-  const out = [];
-  for (const step of trail) {
-    const child = getChild(doc, step);
-    if (child) out.push({ id: step, label: describeChild(child, catalog).label });
-  }
-  return out;
+function chromeOf(node) {
+  if (LOGICAL.has(node.component)) return "logic";
+  if (node.component === "Dialog") return "modal";
+  return void 0;
 }
-function slotsOf(node, catalog) {
-  const meta = getComponentMeta(node.component, catalog);
-  const out = [];
-  const seenNames = /* @__PURE__ */ new Set();
-  const push = (slot, d) => {
-    if (seenNames.has(slot)) return;
-    seenNames.add(slot);
-    out.push({
-      slot,
-      count: node.slots[slot]?.length ?? 0,
-      seen: slotUsage(node.component, slot),
-      ...d
-    });
+function mark(child, parent, slot, index) {
+  const props = {
+    nid: child.id,
+    parent,
+    slot,
+    index
   };
-  const acceptsDefault = meta ? meta.children.accepts : true;
-  if (acceptsDefault || (node.slots[DEFAULT_SLOT]?.length ?? 0) > 0) {
-    push(DEFAULT_SLOT, {
-      label: meta?.children.label ?? "\uC790\uC2DD",
-      known: meta !== void 0,
-      accepts: acceptsDefault
-    });
-  }
-  if (meta) {
-    for (const name of slotNamesOf(meta)) {
-      const declared = (meta.slots ?? []).find((s) => s.name === name);
-      const asProp = meta.props.find((p) => p.name === name && p.slot === true);
-      push(name, {
-        label: declared?.label ?? asProp?.label ?? name,
-        ...declared?.description ?? asProp?.description ? { description: declared?.description ?? asProp?.description } : {},
-        known: true,
-        accepts: true
-      });
-    }
-  }
-  for (const name of Object.keys(node.slots)) {
-    push(name, { label: name, known: false, accepts: true });
+  let inner;
+  if (child.kind === "text") {
+    props.text = true;
+    inner = child.text;
+  } else {
+    props.name = child.component;
+    const chrome = chromeOf(child);
+    if (chrome) props.chrome = chrome;
+    const hint = chromeHintOf(child);
+    if (hint) props.hint = hint;
+    inner = toCanvasNode(child);
   }
-  return out.sort((a, b) => {
-    if (a.slot === DEFAULT_SLOT) return -1;
-    if (b.slot === DEFAULT_SLOT) return 1;
-    return b.seen - a.seen || a.slot.localeCompare(b.slot);
-  });
+  return { component: EDIT_MARK, key: child.id, props, children: [inner] };
 }
-var SLOT_USAGE = (() => {
-  const totals = /* @__PURE__ */ new Map();
-  for (const [key, count] of Object.entries(SPEC_PAIR_FREQ)) {
-    const arrow = key.indexOf(">");
-    const hash = key.indexOf("#");
-    if (hash < 0 || hash > arrow) continue;
-    const head = key.slice(0, arrow);
-    totals.set(head, (totals.get(head) ?? 0) + count);
+function markList(list, parent, slot) {
+  if (!list || list.length === 0) return void 0;
+  return list.map((child, index) => mark(child, parent, slot, index));
+}
+function toCanvasNode(node) {
+  const out = {
+    // ForEach만 편집용 구현으로 돌린다(위 주석 참고). 나머지는 이름 그대로 —
+    // 레지스트리 쪽에서 갈아끼우므로 여기서 손댈 일이 없다.
+    component: node.component === "ForEach" ? EDIT_FOREACH : node.component
+  };
+  if (Object.keys(node.props).length > 0) out.props = { ...node.props };
+  let slots;
+  for (const [name, list] of Object.entries(node.slots)) {
+    if (name === DEFAULT_SLOT) continue;
+    const marked = markList(list, node.id, name);
+    if (marked) (slots ??= {})[name] = marked;
   }
-  return totals;
-})();
-function slotUsage(component, slot) {
-  if (slot === DEFAULT_SLOT) return 0;
-  return SLOT_USAGE.get(`${component}#${slot}`) ?? 0;
+  if (slots) out.slots = slots;
+  const own = markList(node.slots[DEFAULT_SLOT], node.id, DEFAULT_SLOT);
+  if (own) out.children = own;
+  return out;
 }
-function flattenTree(doc, options = {}) {
-  const { expanded, showSlots = true, catalog } = options;
-  const isOpen = (key) => expanded === void 0 || expanded.has(key);
-  const rows = [];
-  const emitList = (list, parent, slot, depth) => {
-    list.forEach((child, index) => {
-      if (child.kind === "text") {
-        const d2 = describeChild(child, catalog);
-        rows.push({
-          kind: "text",
-          key: child.id,
-          id: child.id,
-          depth,
+function toCanvasPage(doc) {
+  const { urlState: _urlState, subscribe: _subscribe, ...meta } = doc.meta;
+  return {
+    ...meta,
+    body: doc.body.map((child, index) => mark(child, ROOT_ID, DEFAULT_SLOT, index))
+  };
+}
+var CHROME_LABEL = {
+  Show: "\uC870\uAC74\uBD80",
+  Can: "\uAD8C\uD55C",
+  ForEach: "\uBC18\uBCF5",
+  Dialog: "\uBAA8\uB2EC"
+};
+function EditMark({ nid, parent, slot, index, name, text, chrome, hint, children }) {
+  const common = {
+    "data-sdui-id": nid,
+    "data-sdui-parent": parent,
+    "data-sdui-slot": slot,
+    "data-sdui-index": index,
+    ...name ? { "data-sdui-name": name } : {},
+    ...text ? { "data-sdui-text": "true" } : {}
+  };
+  if (chrome && name) {
+    return /* @__PURE__ */ jsxs("div", { className: `sdui-editor-cv-chrome sdui-editor-cv-chrome--${chrome}`, ...common, children: [
+      /* @__PURE__ */ jsxs("span", { className: "sdui-editor-cv-chrome__tag", children: [
+        CHROME_LABEL[name] ?? name,
+        hint ? /* @__PURE__ */ jsx("em", { className: "sdui-editor-cv-chrome__hint", children: hint }) : null
+      ] }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-mark", ...common, children });
+}
+function EditShow({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function EditCan({
+  fallback,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    fallback ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
+      /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-branch__tag", children: "\uCC28\uB2E8 \uC2DC" }),
+      fallback
+    ] }) : null
+  ] });
+}
+function EditForEach({
+  source,
+  empty,
+  children
+}) {
+  const rows = Array.isArray(source) ? source.length : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sdui-editor-cv-branch__tag", children: [
+        "\uD589 1\uAC1C \uBBF8\uB9AC\uBCF4\uAE30",
+        rows === null ? "" : ` \xB7 \uC9C0\uAE08 ${rows}\uAC74`
+      ] }),
+      children
+    ] }),
+    empty ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
+      /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-branch__tag", children: "\uBE44\uC5C8\uC744 \uB54C" }),
+      empty
+    ] }) : null
+  ] });
+}
+function createEditRegistry(base = defaultRegistry) {
+  return {
+    ...base,
+    Show: EditShow,
+    Can: EditCan,
+    Dialog,
+    [EDIT_MARK]: EditMark,
+    [EDIT_FOREACH]: EditForEach
+  };
+}
+var PLACEHOLDER_SVG = [
+  '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">',
+  '<rect width="64" height="64" fill="#e2e8f0"/>',
+  '<path d="M0 0h16v16H0zM32 0h16v16H32zM16 16h16v16H16zM48 16h16v16H48z',
+  'M0 32h16v16H0zM32 32h16v16H32zM16 48h16v16H16zM48 48h16v16H48z" fill="#cbd5e1"/>',
+  '<circle cx="24" cy="24" r="6" fill="#94a3b8"/>',
+  '<path d="M8 52l16-18 10 11 8-8 14 15z" fill="#94a3b8"/>',
+  "</svg>"
+].join("");
+var CANVAS_ASSET_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(PLACEHOLDER_SVG)}`;
+function isInertUrl(url) {
+  const value = url.trim().toLowerCase();
+  return value.startsWith("#") || value.startsWith("data:") || value.startsWith("blob:");
+}
+function resolveCanvasAsset(url, ctx) {
+  if (isInertUrl(url)) return url;
+  return ctx.kind === "attribute" ? CANVAS_ASSET_PLACEHOLDER : null;
+}
+function createCanvasAdapter(onBlocked) {
+  return {
+    navigate: (to) => onBlocked(`navigate \u2192 ${to}`),
+    // 요청은 보내지 않되 성공(null)으로 응답한다 — onSuccess 체인이 어떻게 흐르는지는
+    // 보여 주면서 서버는 건드리지 않는다.
+    fetch: async (path, init) => {
+      onBlocked(`${init.method} ${path}`);
+      return null;
+    },
+    // download는 응답을 파일로 저장한다. 실패로 끊어 빈 파일이 내려가는 것까지 막는다.
+    rawFetch: async (path) => {
+      onBlocked(`download ${path}`);
+      throw new Error("\uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");
+    },
+    invalidate: (prefix) => onBlocked(`invalidate ${prefix}`),
+    refresh: () => onBlocked("refresh"),
+    // 편집 중 상태가 호스트 앱의 URL을 덮어쓰지 않게 한다(syncUrlState={false}와 이중 방어).
+    replaceQuery: () => {
+    },
+    // 스펙 최상위 `subscribe`가 여는 실시간 채널. **지금 이걸 비워 두면 안전한 것은 우연이다** —
+    // `defaultAdapter`에 아직 구현이 없어서일 뿐이고, 구현이 생기는 순간 캔버스가 조용히
+    // EventSource를 연다. 실제로 vehicle/logs 스펙이 최상위 subscribe를 갖고 있다.
+    // 해제 함수를 돌려주는 계약이라 no-op도 함수를 반환해야 한다.
+    subscribe: (channels) => {
+      onBlocked(`subscribe ${channels.join(", ")}`);
+      return () => {
+      };
+    },
+    // 위의 다섯과 성질이 다르다. 저 다섯은 어댑터가 **호출을 소유**하므로 비워 두면
+    // 아무 일도 안 일어나지만, `<img src>`와 `background-image: url(…)`은 요청을 내는
+    // 주체가 브라우저라 어댑터가 그 자리에 없다. 실제로 캔버스 클릭 차단과 위 다섯 개를
+    // 다 두고도 아바타·라이트박스·style 프롭으로 요청 5건이 세션 쿠키를 달고 나갔다.
+    resolveAsset: resolveCanvasAsset,
+    // 위의 여섯과 또 성질이 다르다. 저것들은 **이 어댑터를 거쳐 나가는** 경로라 여기서
+    // 끊을 수 있지만, 소비 앱의 목록 위젯처럼 **자기 데이터 클라이언트로 직접** 조회하는
+    // 컴포넌트는 어댑터를 아예 지나가지 않는다(ERP의 RemoteSearchResults가 그렇다 —
+    // TanStack Query 모듈 싱글턴이라 끼어들 자리가 없다). 그런 컴포넌트가 스스로
+    // 물러설 수 있게 "여기는 진짜 화면이 아니다"만 알려 준다.
+    //
+    // 값 교체가 아니라 **선언**이라는 점이 중요하다. `fetch`처럼 빈 응답을 돌려주는 것으로
+    // 대신하려 했다가 버렸다 — 그 빈 응답이 소비 앱의 공유 캐시에 실려, 편집기를 닫고
+    // 진짜 페이지를 열면 오염된 목록이 나온다. 요청은 **시작되기 전에** 막혀야 한다.
+    sandbox: true
+  };
+}
+
+// src/preview/preview-adapter.ts
+function createDataPreviewAdapter(previewFetch, onBlocked) {
+  const sealed = createCanvasAdapter(onBlocked);
+  return {
+    ...sealed,
+    fetch: async (path, init) => {
+      if (init.method !== "GET") {
+        onBlocked(`${init.method} ${path}`);
+        return null;
+      }
+      return previewFetch(path, { method: "GET", signal: init.signal });
+    },
+    resolveAsset: (url, ctx) => {
+      const value = url.trim();
+      if (value.startsWith("/") && !value.startsWith("//")) return url;
+      return sealed.resolveAsset ? sealed.resolveAsset(url, ctx) : null;
+    }
+  };
+}
+function resolvePreviewAdapter({
+  armed,
+  previewFetch,
+  onBlocked,
+  useSpec
+}) {
+  const base = armed && previewFetch ? createDataPreviewAdapter(previewFetch, onBlocked) : createCanvasAdapter(onBlocked);
+  return useSpec ? { ...base, useSpec } : base;
+}
+var HINT_PROPS = ["title", "label", "header", "text", "value", "placeholder", "name"];
+function isPlainObject3(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function summarize(value) {
+  if (typeof value === "string") return value.trim() || void 0;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (isPlainObject3(value)) {
+    if (typeof value.$state === "string") return `{${value.$state}}`;
+    if (value.$item === true) return "{\uD589}";
+    if (typeof value.$item === "string") return `{\uD589.${value.$item}}`;
+    if (value.$index === true) return "{\uBC88\uD638}";
+    if (isPlainObject3(value.$calc) && typeof value.$calc.op === "string") return `{\uACC4\uC0B0:${value.$calc.op}}`;
+  }
+  return void 0;
+}
+function describeChild(child, catalog) {
+  if (child.kind === "text") {
+    const text = child.text.trim();
+    return { label: "\uD14D\uC2A4\uD2B8", hint: text || "(\uBE48 \uBB38\uC790\uC5F4)", known: true };
+  }
+  const meta = getComponentMeta(child.component, catalog);
+  let hint;
+  for (const name of HINT_PROPS) {
+    if (!(name in child.props)) continue;
+    hint = summarize(child.props[name]);
+    if (hint) break;
+  }
+  if (!hint) {
+    const first = child.slots[DEFAULT_SLOT]?.[0];
+    if (first?.kind === "text") hint = first.text.trim() || void 0;
+  }
+  return {
+    label: meta?.label ?? child.component,
+    ...hint ? { hint } : {},
+    ...meta ? { icon: meta.icon } : {},
+    known: meta !== void 0
+  };
+}
+function breadcrumbOf(doc, id, catalog) {
+  const trail = [...ancestorIdsOf(doc, id), id];
+  const out = [];
+  for (const step of trail) {
+    const child = getChild(doc, step);
+    if (child) out.push({ id: step, label: describeChild(child, catalog).label });
+  }
+  return out;
+}
+function slotsOf(node, catalog) {
+  const meta = getComponentMeta(node.component, catalog);
+  const out = [];
+  const seenNames = /* @__PURE__ */ new Set();
+  const push = (slot, d) => {
+    if (seenNames.has(slot)) return;
+    seenNames.add(slot);
+    out.push({
+      slot,
+      count: node.slots[slot]?.length ?? 0,
+      seen: slotUsage(node.component, slot),
+      ...d
+    });
+  };
+  const acceptsDefault = meta ? meta.children.accepts : true;
+  if (acceptsDefault || (node.slots[DEFAULT_SLOT]?.length ?? 0) > 0) {
+    push(DEFAULT_SLOT, {
+      label: meta?.children.label ?? "\uC790\uC2DD",
+      known: meta !== void 0,
+      accepts: acceptsDefault
+    });
+  }
+  if (meta) {
+    for (const name of slotNamesOf(meta)) {
+      const declared = (meta.slots ?? []).find((s) => s.name === name);
+      const asProp = meta.props.find((p) => p.name === name && p.slot === true);
+      push(name, {
+        label: declared?.label ?? asProp?.label ?? name,
+        ...declared?.description ?? asProp?.description ? { description: declared?.description ?? asProp?.description } : {},
+        known: true,
+        accepts: true
+      });
+    }
+  }
+  for (const name of Object.keys(node.slots)) {
+    push(name, { label: name, known: false, accepts: true });
+  }
+  return out.sort((a, b) => {
+    if (a.slot === DEFAULT_SLOT) return -1;
+    if (b.slot === DEFAULT_SLOT) return 1;
+    return b.seen - a.seen || a.slot.localeCompare(b.slot);
+  });
+}
+var SLOT_USAGE = (() => {
+  const totals = /* @__PURE__ */ new Map();
+  for (const [key, count] of Object.entries(SPEC_PAIR_FREQ)) {
+    const arrow = key.indexOf(">");
+    const hash = key.indexOf("#");
+    if (hash < 0 || hash > arrow) continue;
+    const head = key.slice(0, arrow);
+    totals.set(head, (totals.get(head) ?? 0) + count);
+  }
+  return totals;
+})();
+function slotUsage(component, slot) {
+  if (slot === DEFAULT_SLOT) return 0;
+  return SLOT_USAGE.get(`${component}#${slot}`) ?? 0;
+}
+function flattenTree(doc, options = {}) {
+  const { expanded, showSlots = true, catalog } = options;
+  const isOpen = (key) => expanded === void 0 || expanded.has(key);
+  const rows = [];
+  const emitList = (list, parent, slot, depth) => {
+    list.forEach((child, index) => {
+      if (child.kind === "text") {
+        const d2 = describeChild(child, catalog);
+        rows.push({
+          kind: "text",
+          key: child.id,
+          id: child.id,
+          depth,
           parent,
           slot,
           index,
@@ -2058,7 +2495,7 @@ function dropTargetsAround(doc, hoveredId, child, catalog) {
   }
   return out;
 }
-var STATE_WRITING_ACTIONS = /* @__PURE__ */ new Set([
+var STATE_WRITING_ACTIONS2 = /* @__PURE__ */ new Set([
   "setState",
   "open",
   "close",
@@ -2091,12 +2528,12 @@ function buildStateKeyIndex(doc) {
       for (const item of value) walkValue(item, node);
       return;
     }
-    if (!isPlainObject2(value)) return;
+    if (!isPlainObject3(value)) return;
     if (typeof value.$state === "string" && value.$state) {
       const draft = touch(value.$state, "default" in value ? "default" : "read", node);
       draft.reads++;
     }
-    if (typeof value.action === "string" && STATE_WRITING_ACTIONS.has(value.action)) {
+    if (typeof value.action === "string" && STATE_WRITING_ACTIONS2.has(value.action)) {
       if (typeof value.key === "string" && value.key) {
         const draft = touch(value.key, "setState", node);
         draft.writes++;
@@ -2114,7 +2551,7 @@ function buildStateKeyIndex(doc) {
       const fields = /* @__PURE__ */ new Set();
       for (const source of ["initial", "rules", "labels", "initialFromUrl"]) {
         const bag = child.props[source];
-        if (!isPlainObject2(bag)) continue;
+        if (!isPlainObject3(bag)) continue;
         for (const field of Object.keys(bag)) fields.add(field);
       }
       for (const field of fields) touch(`${id}.${field}`, "form", child.id);
@@ -2157,297 +2594,70 @@ function buildKeyTree(entries) {
     }
   }
   const finish = (bucket, declaredAbove) => {
-    const entry = entries.get(bucket.key);
-    const declaredHere = declaredAbove || (entry?.declared ?? false);
-    return {
-      segment: bucket.segment,
-      key: bucket.key,
-      ...entry ? { entry } : {},
-      derived: declaredAbove,
-      children: [...bucket.children.values()].map((child) => finish(child, declaredHere)).sort((a, b) => a.segment.localeCompare(b.segment, "ko"))
-    };
-  };
-  return [...roots.values()].map((bucket) => finish(bucket, false)).sort((a, b) => a.segment.localeCompare(b.segment, "ko"));
-}
-function stateKeyStatus(index, key) {
-  const entry = index.entries.get(key);
-  if (entry?.declared) return "declared";
-  const segments = key.split(".");
-  for (let cut = segments.length - 1; cut >= 1; cut--) {
-    const head = segments.slice(0, cut).join(".");
-    if (index.entries.get(head)?.declared) return "derived";
-  }
-  return entry ? "read" : "unknown";
-}
-function suggestStateKeys(index, query = "", limit = 20) {
-  const needle = query.trim().toLowerCase();
-  const matched = [...index.entries.values()].filter(
-    (entry) => needle === "" || entry.key.toLowerCase().includes(needle)
-  );
-  return matched.sort((a, b) => {
-    if (a.declared !== b.declared) return a.declared ? -1 : 1;
-    if (needle) {
-      const ap = a.key.toLowerCase().startsWith(needle);
-      const bp = b.key.toLowerCase().startsWith(needle);
-      if (ap !== bp) return ap ? -1 : 1;
-    }
-    return b.reads + b.writes - (a.reads + a.writes) || a.key.localeCompare(b.key);
-  }).slice(0, limit);
-}
-
-// src/builder/canvas/dnd.ts
-var DRAG_MIME = "application/x-wipco-sdui-builder";
-var payload = null;
-function beginDrag(transfer, next) {
-  payload = next;
-  if (!transfer) return;
-  transfer.setData(DRAG_MIME, next.component);
-  transfer.setData("text/plain", next.label);
-  transfer.effectAllowed = next.kind === "insert" ? "copy" : "move";
-}
-function currentDrag() {
-  return payload;
-}
-function endDrag() {
-  payload = null;
-}
-function isBuilderDrag(transfer) {
-  if (payload !== null) return true;
-  return transfer ? Array.from(transfer.types).includes(DRAG_MIME) : false;
-}
-function insertDragOf(spec, label) {
-  return {
-    kind: "insert",
-    component: typeof spec === "string" ? TEXT_CHILD : spec.component,
-    spec,
-    label
-  };
-}
-
-// src/builder/canvas/project.ts
-var EDIT_MARK = "$EditMark";
-var EDIT_FOREACH = "$EditForEach";
-var MARK_ATTR = "data-sdui-id";
-var LOGICAL = /* @__PURE__ */ new Set(["Show", "Can", "ForEach"]);
-function bindingLabel(value) {
-  if (value === void 0 || value === null) return void 0;
-  if (typeof value === "string") return value || void 0;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  if (Array.isArray(value)) return void 0;
-  const bag = value;
-  if (typeof bag.$state === "string") return `{${bag.$state}}`;
-  if (bag.$item === true) return "{\uD589}";
-  if (typeof bag.$item === "string") return `{\uD589.${bag.$item}}`;
-  if (bag.$index === true) return "{\uBC88\uD638}";
-  const calc = bag.$calc;
-  if (calc !== null && typeof calc === "object" && !Array.isArray(calc)) {
-    const op = calc.op;
-    if (typeof op === "string") return `{\uACC4\uC0B0:${op}}`;
-  }
-  return void 0;
-}
-function chromeHintOf(node) {
-  switch (node.component) {
-    case "Show":
-      return bindingLabel(node.props.when);
-    case "Can": {
-      const entity = typeof node.props.entity === "string" ? node.props.entity : "?";
-      const action = typeof node.props.action === "string" ? node.props.action : "read";
-      return `${entity} \xB7 ${action}`;
-    }
-    case "ForEach":
-      return bindingLabel(node.props.source);
-    default:
-      return void 0;
-  }
-}
-function chromeOf(node) {
-  if (LOGICAL.has(node.component)) return "logic";
-  if (node.component === "Dialog") return "modal";
-  return void 0;
-}
-function mark(child, parent, slot, index) {
-  const props = {
-    nid: child.id,
-    parent,
-    slot,
-    index
-  };
-  let inner;
-  if (child.kind === "text") {
-    props.text = true;
-    inner = child.text;
-  } else {
-    props.name = child.component;
-    const chrome = chromeOf(child);
-    if (chrome) props.chrome = chrome;
-    const hint = chromeHintOf(child);
-    if (hint) props.hint = hint;
-    inner = toCanvasNode(child);
-  }
-  return { component: EDIT_MARK, key: child.id, props, children: [inner] };
-}
-function markList(list, parent, slot) {
-  if (!list || list.length === 0) return void 0;
-  return list.map((child, index) => mark(child, parent, slot, index));
-}
-function toCanvasNode(node) {
-  const out = {
-    // ForEach만 편집용 구현으로 돌린다(위 주석 참고). 나머지는 이름 그대로 —
-    // 레지스트리 쪽에서 갈아끼우므로 여기서 손댈 일이 없다.
-    component: node.component === "ForEach" ? EDIT_FOREACH : node.component
-  };
-  if (Object.keys(node.props).length > 0) out.props = { ...node.props };
-  let slots;
-  for (const [name, list] of Object.entries(node.slots)) {
-    if (name === DEFAULT_SLOT) continue;
-    const marked = markList(list, node.id, name);
-    if (marked) (slots ??= {})[name] = marked;
-  }
-  if (slots) out.slots = slots;
-  const own = markList(node.slots[DEFAULT_SLOT], node.id, DEFAULT_SLOT);
-  if (own) out.children = own;
-  return out;
-}
-function toCanvasPage(doc) {
-  const { urlState: _urlState, subscribe: _subscribe, ...meta } = doc.meta;
-  return {
-    ...meta,
-    body: doc.body.map((child, index) => mark(child, ROOT_ID, DEFAULT_SLOT, index))
+    const entry = entries.get(bucket.key);
+    const declaredHere = declaredAbove || (entry?.declared ?? false);
+    return {
+      segment: bucket.segment,
+      key: bucket.key,
+      ...entry ? { entry } : {},
+      derived: declaredAbove,
+      children: [...bucket.children.values()].map((child) => finish(child, declaredHere)).sort((a, b) => a.segment.localeCompare(b.segment, "ko"))
+    };
   };
+  return [...roots.values()].map((bucket) => finish(bucket, false)).sort((a, b) => a.segment.localeCompare(b.segment, "ko"));
 }
-var CHROME_LABEL = {
-  Show: "\uC870\uAC74\uBD80",
-  Can: "\uAD8C\uD55C",
-  ForEach: "\uBC18\uBCF5",
-  Dialog: "\uBAA8\uB2EC"
-};
-function EditMark({ nid, parent, slot, index, name, text, chrome, hint, children }) {
-  const common = {
-    "data-sdui-id": nid,
-    "data-sdui-parent": parent,
-    "data-sdui-slot": slot,
-    "data-sdui-index": index,
-    ...name ? { "data-sdui-name": name } : {},
-    ...text ? { "data-sdui-text": "true" } : {}
-  };
-  if (chrome && name) {
-    return /* @__PURE__ */ jsxs("div", { className: `sdui-editor-cv-chrome sdui-editor-cv-chrome--${chrome}`, ...common, children: [
-      /* @__PURE__ */ jsxs("span", { className: "sdui-editor-cv-chrome__tag", children: [
-        CHROME_LABEL[name] ?? name,
-        hint ? /* @__PURE__ */ jsx("em", { className: "sdui-editor-cv-chrome__hint", children: hint }) : null
-      ] }),
-      children
-    ] });
+function stateKeyStatus(index, key) {
+  const entry = index.entries.get(key);
+  if (entry?.declared) return "declared";
+  const segments = key.split(".");
+  for (let cut = segments.length - 1; cut >= 1; cut--) {
+    const head = segments.slice(0, cut).join(".");
+    if (index.entries.get(head)?.declared) return "derived";
   }
-  return /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-mark", ...common, children });
-}
-function EditShow({ children }) {
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return entry ? "read" : "unknown";
 }
-function EditCan({
-  fallback,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    children,
-    fallback ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
-      /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-branch__tag", children: "\uCC28\uB2E8 \uC2DC" }),
-      fallback
-    ] }) : null
-  ] });
+function suggestStateKeys(index, query = "", limit = 20) {
+  const needle = query.trim().toLowerCase();
+  const matched = [...index.entries.values()].filter(
+    (entry) => needle === "" || entry.key.toLowerCase().includes(needle)
+  );
+  return matched.sort((a, b) => {
+    if (a.declared !== b.declared) return a.declared ? -1 : 1;
+    if (needle) {
+      const ap = a.key.toLowerCase().startsWith(needle);
+      const bp = b.key.toLowerCase().startsWith(needle);
+      if (ap !== bp) return ap ? -1 : 1;
+    }
+    return b.reads + b.writes - (a.reads + a.writes) || a.key.localeCompare(b.key);
+  }).slice(0, limit);
 }
-function EditForEach({
-  source,
-  empty,
-  children
-}) {
-  const rows = Array.isArray(source) ? source.length : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
-      /* @__PURE__ */ jsxs("span", { className: "sdui-editor-cv-branch__tag", children: [
-        "\uD589 1\uAC1C \uBBF8\uB9AC\uBCF4\uAE30",
-        rows === null ? "" : ` \xB7 \uC9C0\uAE08 ${rows}\uAC74`
-      ] }),
-      children
-    ] }),
-    empty ? /* @__PURE__ */ jsxs("div", { className: "sdui-editor-cv-branch", children: [
-      /* @__PURE__ */ jsx("span", { className: "sdui-editor-cv-branch__tag", children: "\uBE44\uC5C8\uC744 \uB54C" }),
-      empty
-    ] }) : null
-  ] });
+
+// src/builder/canvas/dnd.ts
+var DRAG_MIME = "application/x-wipco-sdui-builder";
+var payload = null;
+function beginDrag(transfer, next) {
+  payload = next;
+  if (!transfer) return;
+  transfer.setData(DRAG_MIME, next.component);
+  transfer.setData("text/plain", next.label);
+  transfer.effectAllowed = next.kind === "insert" ? "copy" : "move";
 }
-function createEditRegistry(base = defaultRegistry) {
-  return {
-    ...base,
-    Show: EditShow,
-    Can: EditCan,
-    Dialog,
-    [EDIT_MARK]: EditMark,
-    [EDIT_FOREACH]: EditForEach
-  };
+function currentDrag() {
+  return payload;
 }
-var PLACEHOLDER_SVG = [
-  '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">',
-  '<rect width="64" height="64" fill="#e2e8f0"/>',
-  '<path d="M0 0h16v16H0zM32 0h16v16H32zM16 16h16v16H16zM48 16h16v16H48z',
-  'M0 32h16v16H0zM32 32h16v16H32zM16 48h16v16H16zM48 48h16v16H48z" fill="#cbd5e1"/>',
-  '<circle cx="24" cy="24" r="6" fill="#94a3b8"/>',
-  '<path d="M8 52l16-18 10 11 8-8 14 15z" fill="#94a3b8"/>',
-  "</svg>"
-].join("");
-var CANVAS_ASSET_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(PLACEHOLDER_SVG)}`;
-function isInertUrl(url) {
-  const value = url.trim().toLowerCase();
-  return value.startsWith("#") || value.startsWith("data:") || value.startsWith("blob:");
+function endDrag() {
+  payload = null;
 }
-function resolveCanvasAsset(url, ctx) {
-  if (isInertUrl(url)) return url;
-  return ctx.kind === "attribute" ? CANVAS_ASSET_PLACEHOLDER : null;
+function isBuilderDrag(transfer) {
+  if (payload !== null) return true;
+  return transfer ? Array.from(transfer.types).includes(DRAG_MIME) : false;
 }
-function createCanvasAdapter(onBlocked) {
+function insertDragOf(spec, label) {
   return {
-    navigate: (to) => onBlocked(`navigate \u2192 ${to}`),
-    // 요청은 보내지 않되 성공(null)으로 응답한다 — onSuccess 체인이 어떻게 흐르는지는
-    // 보여 주면서 서버는 건드리지 않는다.
-    fetch: async (path, init) => {
-      onBlocked(`${init.method} ${path}`);
-      return null;
-    },
-    // download는 응답을 파일로 저장한다. 실패로 끊어 빈 파일이 내려가는 것까지 막는다.
-    rawFetch: async (path) => {
-      onBlocked(`download ${path}`);
-      throw new Error("\uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");
-    },
-    invalidate: (prefix) => onBlocked(`invalidate ${prefix}`),
-    refresh: () => onBlocked("refresh"),
-    // 편집 중 상태가 호스트 앱의 URL을 덮어쓰지 않게 한다(syncUrlState={false}와 이중 방어).
-    replaceQuery: () => {
-    },
-    // 스펙 최상위 `subscribe`가 여는 실시간 채널. **지금 이걸 비워 두면 안전한 것은 우연이다** —
-    // `defaultAdapter`에 아직 구현이 없어서일 뿐이고, 구현이 생기는 순간 캔버스가 조용히
-    // EventSource를 연다. 실제로 vehicle/logs 스펙이 최상위 subscribe를 갖고 있다.
-    // 해제 함수를 돌려주는 계약이라 no-op도 함수를 반환해야 한다.
-    subscribe: (channels) => {
-      onBlocked(`subscribe ${channels.join(", ")}`);
-      return () => {
-      };
-    },
-    // 위의 다섯과 성질이 다르다. 저 다섯은 어댑터가 **호출을 소유**하므로 비워 두면
-    // 아무 일도 안 일어나지만, `<img src>`와 `background-image: url(…)`은 요청을 내는
-    // 주체가 브라우저라 어댑터가 그 자리에 없다. 실제로 캔버스 클릭 차단과 위 다섯 개를
-    // 다 두고도 아바타·라이트박스·style 프롭으로 요청 5건이 세션 쿠키를 달고 나갔다.
-    resolveAsset: resolveCanvasAsset,
-    // 위의 여섯과 또 성질이 다르다. 저것들은 **이 어댑터를 거쳐 나가는** 경로라 여기서
-    // 끊을 수 있지만, 소비 앱의 목록 위젯처럼 **자기 데이터 클라이언트로 직접** 조회하는
-    // 컴포넌트는 어댑터를 아예 지나가지 않는다(ERP의 RemoteSearchResults가 그렇다 —
-    // TanStack Query 모듈 싱글턴이라 끼어들 자리가 없다). 그런 컴포넌트가 스스로
-    // 물러설 수 있게 "여기는 진짜 화면이 아니다"만 알려 준다.
-    //
-    // 값 교체가 아니라 **선언**이라는 점이 중요하다. `fetch`처럼 빈 응답을 돌려주는 것으로
-    // 대신하려 했다가 버렸다 — 그 빈 응답이 소비 앱의 공유 캐시에 실려, 편집기를 닫고
-    // 진짜 페이지를 열면 오염된 목록이 나온다. 요청은 **시작되기 전에** 막혀야 한다.
-    sandbox: true
+    kind: "insert",
+    component: typeof spec === "string" ? TEXT_CHILD : spec.component,
+    spec,
+    label
   };
 }
 
@@ -3155,6 +3365,10 @@ function Canvas({
    */
   registry = editorRegistry,
   can,
+  useSpec,
+  previewFetch,
+  dataArmed,
+  initialState,
   className
 }) {
   ensureBuilderStyles();
@@ -3184,8 +3398,13 @@ function Canvas({
   const page = useMemo(() => toCanvasPage(doc), [doc]);
   const editRegistry = useMemo(() => createEditRegistry(registry), [registry]);
   const adapter = useMemo(
-    () => createCanvasAdapter((what) => announce(`${what} \u2014 \uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`)),
-    [announce]
+    () => resolvePreviewAdapter({
+      armed: dataArmed === true,
+      previewFetch,
+      onBlocked: (what) => announce(`${what} \u2014 \uCE94\uBC84\uC2A4\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`),
+      useSpec
+    }),
+    [announce, dataArmed, previewFetch, useSpec]
   );
   useLayoutEffect(() => {
     setVersion((v) => v + 1);
@@ -3455,9 +3674,11 @@ function Canvas({
               page,
               registry: editRegistry,
               adapter,
+              initialState,
               syncUrlState: false,
               can: can ?? "allow-all"
-            }
+            },
+            initialState ? seedSignature(initialState) : void 0
           ),
           notice ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-cv-notice", children: notice }) : null
         ] }),
@@ -3700,16 +3921,16 @@ function Palette({ doc, selection, dispatch, catalog, registry, className }) {
     ] })
   ] });
 }
-function isPlainObject3(v) {
+function isPlainObject4(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function bindingOf(value) {
-  if (!isPlainObject3(value)) return null;
+  if (!isPlainObject4(value)) return null;
   if (typeof value.$state === "string") return { kind: "state", label: "\uC0C1\uD0DC", detail: value.$state };
   if (value.$item === true) return { kind: "item", label: "\uD589", detail: "\uC804\uCCB4" };
   if (typeof value.$item === "string") return { kind: "item", label: "\uD589", detail: value.$item };
   if (value.$index === true) return { kind: "index", label: "\uBC88\uD638" };
-  if (isPlainObject3(value.$calc) && typeof value.$calc.op === "string") {
+  if (isPlainObject4(value.$calc) && typeof value.$calc.op === "string") {
     return { kind: "calc", label: "\uACC4\uC0B0", detail: String(value.$calc.op) };
   }
   return null;
@@ -3889,7 +4110,7 @@ function asArray(value) {
   return Array.isArray(value) ? value : null;
 }
 function asObject(value) {
-  return isPlainObject3(value) ? value : null;
+  return isPlainObject4(value) ? value : null;
 }
 function patchObject(base, name, value) {
   const next = { ...base ?? {} };
@@ -4065,30 +4286,246 @@ function toSteps(value) {
   if (value === void 0) return [];
   return [value];
 }
-function fromSteps(steps, wasArray) {
-  if (steps.length === 0) return void 0;
-  if (steps.length === 1 && !wasArray) return steps[0];
-  return steps;
+function fromSteps(steps, wasArray) {
+  if (steps.length === 0) return void 0;
+  if (steps.length === 1 && !wasArray) return steps[0];
+  return steps;
+}
+function summarizeStep(step) {
+  const obj = asObject(step);
+  if (!obj) return toJsonText(step).slice(0, 60);
+  const verb = typeof obj.action === "string" ? VERB_BY_NAME.get(obj.action) : void 0;
+  const label = verb?.label ?? (typeof obj.action === "string" ? obj.action : "\uC54C \uC218 \uC5C6\uB294 \uB3D9\uC791");
+  const detail = verb?.summaryField ? obj[verb.summaryField] : void 0;
+  return typeof detail === "string" || typeof detail === "number" ? `${label} \xB7 ${detail}` : label;
+}
+function switchVerb(step, next) {
+  const out = { action: next.action };
+  for (const field of next.fields) {
+    const carried = step?.[field.name];
+    if (carried !== void 0) out[field.name] = carried;
+  }
+  return out;
+}
+function isActionShaped(value) {
+  if (Array.isArray(value)) return value.every((v) => isPlainObject4(v) && typeof v.action === "string");
+  return isPlainObject4(value) && typeof value.action === "string";
+}
+function ToolButton({
+  icon,
+  label,
+  onClick,
+  disabled,
+  active: active2,
+  text
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: `sdui-insp-tool${active2 ? " sdui-insp-tool--on" : ""}`,
+      onClick,
+      disabled,
+      title: label,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }),
+        text ? /* @__PURE__ */ jsx("span", { children: text }) : null
+      ]
+    }
+  );
+}
+function textCommitValue(raw, meta) {
+  return raw === "" && !meta?.required ? void 0 : raw;
+}
+function TextWidget({ value, onChange, meta, stateKeys }) {
+  const listId = useId();
+  const suggest = stateKeys && stateKeys.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "sm",
+        value: typeof value === "string" ? value : formatScalar(value),
+        placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${formatScalar(meta.default)}` : void 0,
+        list: suggest ? listId : void 0,
+        onChange: (e) => onChange(textCommitValue(e.target.value, meta))
+      }
+    ),
+    suggest ? /* @__PURE__ */ jsx("datalist", { id: listId, children: stateKeys.slice(0, 200).map((key) => /* @__PURE__ */ jsx("option", { value: key }, key)) }) : null
+  ] });
+}
+function NumberWidget({ value, onChange, meta }) {
+  const external = formatScalar(value);
+  const [text, setText2] = useState(external);
+  const mine = useRef(external);
+  useEffect(() => {
+    if (external !== mine.current) {
+      mine.current = external;
+      setText2(external);
+    }
+  }, [external]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "sm",
+      inputMode: "decimal",
+      value: text,
+      placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${formatScalar(meta.default)}` : void 0,
+      onChange: (e) => {
+        const next = e.target.value;
+        setText2(next);
+        const parsed = parseNumber(next);
+        if (parsed === null) return;
+        mine.current = formatScalar(parsed);
+        onChange(parsed);
+      }
+    }
+  );
+}
+function BoolWidget({ value, onChange, meta }) {
+  const on = value === true;
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      size: "sm",
+      checked: on,
+      label: on ? "\uCF2C" : "\uB054",
+      onChange: (e) => {
+        if (e.target.checked) onChange(true);
+        else onChange(meta?.default === true ? false : void 0);
+      }
+    }
+  );
 }
-function summarizeStep(step) {
-  const obj = asObject(step);
-  if (!obj) return toJsonText(step).slice(0, 60);
-  const verb = typeof obj.action === "string" ? VERB_BY_NAME.get(obj.action) : void 0;
-  const label = verb?.label ?? (typeof obj.action === "string" ? obj.action : "\uC54C \uC218 \uC5C6\uB294 \uB3D9\uC791");
-  const detail = verb?.summaryField ? obj[verb.summaryField] : void 0;
-  return typeof detail === "string" || typeof detail === "number" ? `${label} \xB7 ${detail}` : label;
+var CURRENT = "__current__";
+function EnumWidget({ value, onChange, meta }) {
+  const options = meta?.options ?? [];
+  const known = options.findIndex((o) => o.value === value);
+  const outsider = value !== void 0 && known < 0;
+  const choices = options.map((option, index) => ({
+    value: String(index),
+    label: option.legacy ? `${option.label} (\uC61B \uAC12)` : option.label
+  }));
+  if (outsider) choices.push({ value: CURRENT, label: `${formatScalar(value)} (\uD6C4\uBCF4 \uBC16)` });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      size: "sm",
+      options: choices,
+      placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${labelOf(options, meta.default)}` : "(\uC5C6\uC74C)",
+      value: outsider ? CURRENT : known >= 0 ? String(known) : "",
+      onChange: (e) => {
+        const raw = e.target.value;
+        if (raw === "") onChange(void 0);
+        else if (raw === CURRENT) onChange(value);
+        else onChange(options[Number(raw)]?.value);
+      }
+    }
+  );
 }
-function switchVerb(step, next) {
-  const out = { action: next.action };
-  for (const field of next.fields) {
-    const carried = step?.[field.name];
-    if (carried !== void 0) out[field.name] = carried;
-  }
-  return out;
+function labelOf(options, value) {
+  return options.find((o) => o.value === value)?.label ?? formatScalar(value);
 }
-function isActionShaped(value) {
-  if (Array.isArray(value)) return value.every((v) => isPlainObject3(v) && typeof v.action === "string");
-  return isPlainObject3(value) && typeof value.action === "string";
+function JsonWidget({ value, onChange, rows = 4 }) {
+  const external = toJsonText(value);
+  const [text, setText2] = useState(external);
+  const [error, setError] = useState(null);
+  const mine = useRef(external);
+  useEffect(() => {
+    if (external !== mine.current) {
+      mine.current = external;
+      setText2(external);
+      setError(null);
+    }
+  }, [external]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: `sdui-insp-json${error ? " sdui-insp-json--bad" : ""}`,
+        rows,
+        spellCheck: false,
+        value: text,
+        onChange: (e) => {
+          const next = e.target.value;
+          setText2(next);
+          const parsed = parseJson(next);
+          if (!parsed.ok) {
+            setError(parsed.error ?? "JSON\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+            return;
+          }
+          setError(null);
+          mine.current = toJsonText(parsed.value);
+          onChange(parsed.value);
+        }
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("p", { className: "sdui-insp-err", children: error }) : null
+  ] });
+}
+function BindingChip({
+  info,
+  onEdit,
+  onRaw
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "sdui-insp-chip", title: bindingText(info), children: [
+    /* @__PURE__ */ jsx(Icon, { name: "link", size: 14 }),
+    /* @__PURE__ */ jsx("span", { className: "sdui-insp-chip__kind", children: info.label }),
+    /* @__PURE__ */ jsx("span", { className: "sdui-insp-chip__val", children: info.detail ?? "" }),
+    /* @__PURE__ */ jsxs("span", { className: "sdui-insp-chip__tools", children: [
+      onEdit ? /* @__PURE__ */ jsx(ToolButton, { icon: "pencil", label: "\uBC14\uC778\uB529 \uD3B8\uC9D1", onClick: onEdit }) : null,
+      onRaw ? /* @__PURE__ */ jsx(ToolButton, { icon: "square-pen", label: "JSON\uC73C\uB85C \uD3B8\uC9D1", onClick: onRaw }) : null
+    ] })
+  ] });
+}
+function FragmentRefRow({
+  refId,
+  pageIds,
+  onOpenSpec
+}) {
+  let body;
+  if (typeof refId === "string" && refId !== "") {
+    const missing = pageIds !== void 0 && !pageIds.includes(refId);
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdui-insp-row__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__label", children: "\uCC38\uC870 \uC2A4\uD399" }),
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__name wp-mono-xs", children: refId }),
+        missing ? /* @__PURE__ */ jsx("span", { className: "sdui-insp-flag sdui-insp-flag--req", children: "\uC5C6\uC74C" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__tools", children: onOpenSpec ? /* @__PURE__ */ jsx(
+          ToolButton,
+          {
+            icon: "external-link",
+            label: `${refId} \uD3B8\uC9D1\uC73C\uB85C \uC5F4\uAE30`,
+            text: "\uC5F4\uAE30",
+            onClick: () => onOpenSpec(refId)
+          }
+        ) : null })
+      ] }),
+      missing ? /* @__PURE__ */ jsx("p", { className: "sdui-insp-row__warn", children: "\uC800\uC7A5\uC18C\uC5D0 \uC5C6\uB294 \uC2A4\uD399 id\uC785\uB2C8\uB2E4 \u2014 \uC774\uB300\uB85C \uC800\uC7A5\uD558\uBA74 \uC774 \uC790\uB9AC\uB294 \uD654\uBA74\uC5D0 \uADF8\uB824\uC9C0\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uC5F4\uAE30\uB97C \uB204\uB974\uBA74 \uD3B8\uC9D1 \uD654\uBA74\uC5D0\uC11C \uAC19\uC740 id\uB85C \uC0C8\uB85C \uB9CC\uB4E4 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx("p", { className: "sdui-insp-row__desc", children: "\uC774 \uC870\uAC01\uC758 \uB0B4\uC6A9\uC740 \uC800 \uC2A4\uD399\uC758 body\uC785\uB2C8\uB2E4. \uD3B8\uC9D1\uC73C\uB85C \uC5F4\uC5B4\uB3C4 \uC9C0\uAE08 \uBB38\uC11C\uC758 \uBBF8\uC800\uC7A5 \uBCC0\uACBD\uC740 \uCD08\uC548\uC73C\uB85C \uB0A8\uC2B5\uB2C8\uB2E4." })
+    ] });
+  } else if (isPlainObject4(refId)) {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdui-insp-row__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__label", children: "\uCC38\uC870 \uC2A4\uD399" }),
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-flag sdui-insp-flag--unknown", children: "\uB3D9\uC801 \uCC38\uC870" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "sdui-insp-row__desc", children: [
+        "id\uAC00 \uBC14\uC778\uB529(",
+        Object.keys(refId)[0] ?? "$state",
+        ")\uC73C\uB85C \uC815\uD574\uC9D1\uB2C8\uB2E4 \u2014 \uC2E4\uD589 \uC2DC\uC810 \uAC12\uC774\uB77C \uD3B8\uC9D1\uAE30\uC5D0\uC11C \uC5F4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uAC12\uC740 \uC704 id \uD504\uB86D\uC5D0\uC11C \uD655\uC778\uD558\uC138\uC694."
+      ] })
+    ] });
+  } else {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdui-insp-row__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__label", children: "\uCC38\uC870 \uC2A4\uD399" }),
+        /* @__PURE__ */ jsx("span", { className: "sdui-insp-flag sdui-insp-flag--req", children: "\uD544\uC218" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "sdui-insp-row__warn", children: "id \uD504\uB86D\uC774 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uAC00\uC838\uC62C \uC2A4\uD399\uC758 id(\uC608: dialogs/asset-edit)\uB97C \uB123\uC5B4\uC57C \uB80C\uB354\uB429\uB2C8\uB2E4." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("section", { className: "sdui-insp-group", children: /* @__PURE__ */ jsx("div", { className: "sdui-insp-group__body", children: /* @__PURE__ */ jsx("div", { className: "sdui-insp-row", children: body }) }) });
 }
 var CSS2 = `
 .sdui-insp {
@@ -4221,209 +4658,41 @@ var CSS2 = `
   border: var(--wp-border-w) solid var(--wp-border-subtle); border-radius: var(--wp-radius-md);
   background: var(--wp-surface-sunken);
 }
-.sdui-insp-item__head {
-  display: flex; align-items: center; gap: var(--wp-space-1);
-  padding: var(--wp-space-1) var(--wp-space-2);
-}
-.sdui-insp-item__idx {
-  font-family: var(--wp-font-mono); font-size: var(--wp-size-2xs); color: var(--wp-text-subtle);
-}
-.sdui-insp-item__sum {
-  font-size: var(--wp-size-2xs); color: var(--wp-text-muted);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.sdui-insp-item__tools { margin-left: auto; display: flex; gap: 0; flex: none; }
-.sdui-insp-item__body {
-  display: flex; flex-direction: column; gap: var(--wp-space-2);
-  padding: var(--wp-space-2); padding-top: 0;
-}
-/* \uBA38\uB9AC \uC5C6\uC774 \uBAB8\uD1B5\uB9CC \uC788\uB294 \uC0C1\uC790(\uD544\uB4DC \uC815\uC758\uAC00 \uC788\uB294 object \uD504\uB86D) \u2014 \uC704\uCABD \uC5EC\uBC31\uC744 \uB418\uC0B4\uB9B0\uB2E4 */
-.sdui-insp-item__body--solo { padding-top: var(--wp-space-2); }
-.sdui-insp-struct__add { align-self: flex-start; }
-
-/* ---------- JSON \uC6D0\uC2DC \uD3B8\uC9D1 ---------- */
-.sdui-insp-json {
-  width: 100%; min-height: calc(var(--wp-space-8) * 2); resize: vertical;
-  font-family: var(--wp-font-mono); font-size: var(--wp-size-2xs);
-  line-height: var(--wp-leading-snug);
-  padding: var(--wp-space-2);
-  border: var(--wp-border-w) solid var(--wp-border-default); border-radius: var(--wp-radius-md);
-  background: var(--wp-surface-card); color: var(--wp-text-default);
-}
-.sdui-insp-json:focus { outline: none; border-color: var(--wp-border-focus); }
-.sdui-insp-json--bad { border-color: var(--wp-border-danger); }
-.sdui-insp-err { font-size: var(--wp-size-2xs); color: var(--wp-text-danger); }
-`;
-function InspectorStyle() {
-  return /* @__PURE__ */ jsx("style", { href: "sdui-editor-inspector", precedence: "medium", children: CSS2 });
-}
-function ToolButton({
-  icon,
-  label,
-  onClick,
-  disabled,
-  active: active2,
-  text
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      className: `sdui-insp-tool${active2 ? " sdui-insp-tool--on" : ""}`,
-      onClick,
-      disabled,
-      title: label,
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }),
-        text ? /* @__PURE__ */ jsx("span", { children: text }) : null
-      ]
-    }
-  );
-}
-function textCommitValue(raw, meta) {
-  return raw === "" && !meta?.required ? void 0 : raw;
-}
-function TextWidget({ value, onChange, meta, stateKeys }) {
-  const listId = useId();
-  const suggest = stateKeys && stateKeys.length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        size: "sm",
-        value: typeof value === "string" ? value : formatScalar(value),
-        placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${formatScalar(meta.default)}` : void 0,
-        list: suggest ? listId : void 0,
-        onChange: (e) => onChange(textCommitValue(e.target.value, meta))
-      }
-    ),
-    suggest ? /* @__PURE__ */ jsx("datalist", { id: listId, children: stateKeys.slice(0, 200).map((key) => /* @__PURE__ */ jsx("option", { value: key }, key)) }) : null
-  ] });
-}
-function NumberWidget({ value, onChange, meta }) {
-  const external = formatScalar(value);
-  const [text, setText2] = useState(external);
-  const mine = useRef(external);
-  useEffect(() => {
-    if (external !== mine.current) {
-      mine.current = external;
-      setText2(external);
-    }
-  }, [external]);
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      size: "sm",
-      inputMode: "decimal",
-      value: text,
-      placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${formatScalar(meta.default)}` : void 0,
-      onChange: (e) => {
-        const next = e.target.value;
-        setText2(next);
-        const parsed = parseNumber(next);
-        if (parsed === null) return;
-        mine.current = formatScalar(parsed);
-        onChange(parsed);
-      }
-    }
-  );
-}
-function BoolWidget({ value, onChange, meta }) {
-  const on = value === true;
-  return /* @__PURE__ */ jsx(
-    Switch,
-    {
-      size: "sm",
-      checked: on,
-      label: on ? "\uCF2C" : "\uB054",
-      onChange: (e) => {
-        if (e.target.checked) onChange(true);
-        else onChange(meta?.default === true ? false : void 0);
-      }
-    }
-  );
+.sdui-insp-item__head {
+  display: flex; align-items: center; gap: var(--wp-space-1);
+  padding: var(--wp-space-1) var(--wp-space-2);
 }
-var CURRENT = "__current__";
-function EnumWidget({ value, onChange, meta }) {
-  const options = meta?.options ?? [];
-  const known = options.findIndex((o) => o.value === value);
-  const outsider = value !== void 0 && known < 0;
-  const choices = options.map((option, index) => ({
-    value: String(index),
-    label: option.legacy ? `${option.label} (\uC61B \uAC12)` : option.label
-  }));
-  if (outsider) choices.push({ value: CURRENT, label: `${formatScalar(value)} (\uD6C4\uBCF4 \uBC16)` });
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      size: "sm",
-      options: choices,
-      placeholder: meta?.default !== void 0 ? `\uAE30\uBCF8\uAC12: ${labelOf(options, meta.default)}` : "(\uC5C6\uC74C)",
-      value: outsider ? CURRENT : known >= 0 ? String(known) : "",
-      onChange: (e) => {
-        const raw = e.target.value;
-        if (raw === "") onChange(void 0);
-        else if (raw === CURRENT) onChange(value);
-        else onChange(options[Number(raw)]?.value);
-      }
-    }
-  );
+.sdui-insp-item__idx {
+  font-family: var(--wp-font-mono); font-size: var(--wp-size-2xs); color: var(--wp-text-subtle);
 }
-function labelOf(options, value) {
-  return options.find((o) => o.value === value)?.label ?? formatScalar(value);
+.sdui-insp-item__sum {
+  font-size: var(--wp-size-2xs); color: var(--wp-text-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-function JsonWidget({ value, onChange, rows = 4 }) {
-  const external = toJsonText(value);
-  const [text, setText2] = useState(external);
-  const [error, setError] = useState(null);
-  const mine = useRef(external);
-  useEffect(() => {
-    if (external !== mine.current) {
-      mine.current = external;
-      setText2(external);
-      setError(null);
-    }
-  }, [external]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: `sdui-insp-json${error ? " sdui-insp-json--bad" : ""}`,
-        rows,
-        spellCheck: false,
-        value: text,
-        onChange: (e) => {
-          const next = e.target.value;
-          setText2(next);
-          const parsed = parseJson(next);
-          if (!parsed.ok) {
-            setError(parsed.error ?? "JSON\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
-            return;
-          }
-          setError(null);
-          mine.current = toJsonText(parsed.value);
-          onChange(parsed.value);
-        }
-      }
-    ),
-    error ? /* @__PURE__ */ jsx("p", { className: "sdui-insp-err", children: error }) : null
-  ] });
+.sdui-insp-item__tools { margin-left: auto; display: flex; gap: 0; flex: none; }
+.sdui-insp-item__body {
+  display: flex; flex-direction: column; gap: var(--wp-space-2);
+  padding: var(--wp-space-2); padding-top: 0;
 }
-function BindingChip({
-  info,
-  onEdit,
-  onRaw
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "sdui-insp-chip", title: bindingText(info), children: [
-    /* @__PURE__ */ jsx(Icon, { name: "link", size: 14 }),
-    /* @__PURE__ */ jsx("span", { className: "sdui-insp-chip__kind", children: info.label }),
-    /* @__PURE__ */ jsx("span", { className: "sdui-insp-chip__val", children: info.detail ?? "" }),
-    /* @__PURE__ */ jsxs("span", { className: "sdui-insp-chip__tools", children: [
-      onEdit ? /* @__PURE__ */ jsx(ToolButton, { icon: "pencil", label: "\uBC14\uC778\uB529 \uD3B8\uC9D1", onClick: onEdit }) : null,
-      onRaw ? /* @__PURE__ */ jsx(ToolButton, { icon: "square-pen", label: "JSON\uC73C\uB85C \uD3B8\uC9D1", onClick: onRaw }) : null
-    ] })
-  ] });
+/* \uBA38\uB9AC \uC5C6\uC774 \uBAB8\uD1B5\uB9CC \uC788\uB294 \uC0C1\uC790(\uD544\uB4DC \uC815\uC758\uAC00 \uC788\uB294 object \uD504\uB86D) \u2014 \uC704\uCABD \uC5EC\uBC31\uC744 \uB418\uC0B4\uB9B0\uB2E4 */
+.sdui-insp-item__body--solo { padding-top: var(--wp-space-2); }
+.sdui-insp-struct__add { align-self: flex-start; }
+
+/* ---------- JSON \uC6D0\uC2DC \uD3B8\uC9D1 ---------- */
+.sdui-insp-json {
+  width: 100%; min-height: calc(var(--wp-space-8) * 2); resize: vertical;
+  font-family: var(--wp-font-mono); font-size: var(--wp-size-2xs);
+  line-height: var(--wp-leading-snug);
+  padding: var(--wp-space-2);
+  border: var(--wp-border-w) solid var(--wp-border-default); border-radius: var(--wp-radius-md);
+  background: var(--wp-surface-card); color: var(--wp-text-default);
+}
+.sdui-insp-json:focus { outline: none; border-color: var(--wp-border-focus); }
+.sdui-insp-json--bad { border-color: var(--wp-border-danger); }
+.sdui-insp-err { font-size: var(--wp-size-2xs); color: var(--wp-text-danger); }
+`;
+function InspectorStyle() {
+  return /* @__PURE__ */ jsx("style", { href: "sdui-editor-inspector", precedence: "medium", children: CSS2 });
 }
 function ActionField({ value, onChange, stateKeys }) {
   const wasArray = Array.isArray(value);
@@ -4916,7 +5185,15 @@ function LiteralEditor({ meta, value, onChange, ctx, propName }) {
   const kind = meta.kind;
   switch (kind) {
     case "string":
-      return /* @__PURE__ */ jsx(TextWidget, { value, onChange, meta });
+      return /* @__PURE__ */ jsx(
+        TextWidget,
+        {
+          value,
+          onChange,
+          meta,
+          stateKeys: propName ? ctx.textSuggestions?.[propName] : void 0
+        }
+      );
     case "number":
       return /* @__PURE__ */ jsx(NumberWidget, { value, onChange, meta });
     case "boolean":
@@ -5143,6 +5420,8 @@ function Inspector({
   onApply,
   onRequestBinding,
   allowKeyEdit = true,
+  pageIds,
+  onOpenSpec,
   className
 }) {
   const primary = selection.primary;
@@ -5151,9 +5430,17 @@ function Inspector({
     const index = buildStateKeyIndex(doc);
     return suggestStateKeys(index, "", 200).map((entry) => entry.key);
   }, [doc]);
+  const fragmentIds = useMemo(
+    () => child?.kind === "node" && child.component === "Fragment" && pageIds ? pageIds.filter((id) => id.startsWith(DIALOG_PREFIX)) : void 0,
+    [child, pageIds]
+  );
   const ctx = useMemo(
-    () => ({ stateKeys, ...onRequestBinding ? { onRequestBinding } : {} }),
-    [stateKeys, onRequestBinding]
+    () => ({
+      stateKeys,
+      ...onRequestBinding ? { onRequestBinding } : {},
+      ...fragmentIds && fragmentIds.length > 0 ? { textSuggestions: { id: fragmentIds } } : {}
+    }),
+    [stateKeys, onRequestBinding, fragmentIds]
   );
   const inspection = useMemo(
     () => child && child.kind === "node" ? inspectNode(child, catalog) : null,
@@ -5179,7 +5466,9 @@ function Inspector({
             ctx,
             onApply,
             onRequestBinding,
-            allowKeyEdit
+            allowKeyEdit,
+            pageIds,
+            onOpenSpec
           }
         ) : null
       ] })
@@ -5196,7 +5485,9 @@ function NodePanel({
   ctx,
   onApply,
   onRequestBinding,
-  allowKeyEdit
+  allowKeyEdit,
+  pageIds,
+  onOpenSpec
 }) {
   const open = useMemo(() => initialOpenGroups(inspection), [inspection]);
   const apply = (name, next, meta) => {
@@ -5243,6 +5534,7 @@ function NodePanel({
       },
       `${node.id}:${group.key}`
     )),
+    node.component === "Fragment" ? /* @__PURE__ */ jsx(FragmentRefRow, { refId: node.props.id, pageIds, onOpenSpec }) : null,
     inspection.unknown.length > 0 ? /* @__PURE__ */ jsx(UnknownSection, { entries: inspection.unknown, ctx, onChange: apply }) : null,
     allowKeyEdit ? /* @__PURE__ */ jsx(KeyRow, { doc, node, onApply }) : null
   ] });
@@ -5624,10 +5916,10 @@ function indexChildren(doc) {
 function logicHint(node) {
   const condition = node.props.when ?? node.props.source;
   if (typeof condition === "string") return condition;
-  if (isPlainObject4(condition)) {
+  if (isPlainObject5(condition)) {
     if (typeof condition.$state === "string") return `{${condition.$state}}`;
     if (typeof condition.$item === "string") return `{\uD589.${condition.$item}}`;
-    if (isPlainObject4(condition.$calc) && typeof condition.$calc.op === "string") {
+    if (isPlainObject5(condition.$calc) && typeof condition.$calc.op === "string") {
       return `{\uACC4\uC0B0:${condition.$calc.op}}`;
     }
   }
@@ -5638,7 +5930,7 @@ function logicHint(node) {
   }
   return void 0;
 }
-function isPlainObject4(v) {
+function isPlainObject5(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function childCount(child) {
@@ -5720,7 +6012,7 @@ function buildRows(doc, options) {
 }
 
 // src/builder/tree/search.ts
-function isPlainObject5(v) {
+function isPlainObject6(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function collectBindings(value, out) {
@@ -5728,10 +6020,10 @@ function collectBindings(value, out) {
     for (const item of value) collectBindings(item, out);
     return;
   }
-  if (!isPlainObject5(value)) return;
+  if (!isPlainObject6(value)) return;
   if (typeof value.$state === "string") out.push(value.$state);
   if (typeof value.$item === "string") out.push(value.$item);
-  if (isPlainObject5(value.$calc) && typeof value.$calc.op === "string") out.push(value.$calc.op);
+  if (isPlainObject6(value.$calc) && typeof value.$calc.op === "string") out.push(value.$calc.op);
   if (typeof value.action === "string") out.push(value.action);
   if (typeof value.key === "string") out.push(value.key);
   if (typeof value.form === "string") out.push(value.form);
@@ -5746,7 +6038,7 @@ function collectLiterals(value, out) {
     for (const item of value) collectLiterals(item, out);
     return;
   }
-  if (!isPlainObject5(value)) return;
+  if (!isPlainObject6(value)) return;
   for (const [name, sub] of Object.entries(value)) {
     if (name === "$state" || name === "$item" || name === "$index") continue;
     collectLiterals(sub, out);
@@ -7048,33 +7340,33 @@ function HistoryBar({
 }
 
 // src/builder/binding/values.ts
-function isPlainObject6(v) {
+function isPlainObject7(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function classifyValue(value) {
-  if (!isPlainObject6(value)) return "literal";
+  if (!isPlainObject7(value)) return "literal";
   if (typeof value.$state === "string") return "state";
   if ("$item" in value) return "item";
   if ("$index" in value) return "index";
-  if (isPlainObject6(value.$calc)) return "calc";
+  if (isPlainObject7(value.$calc)) return "calc";
   return "literal";
 }
 function isBinding(value) {
   return classifyValue(value) !== "literal";
 }
 function asStateRef(value) {
-  if (classifyValue(value) !== "state" || !isPlainObject6(value)) return null;
+  if (classifyValue(value) !== "state" || !isPlainObject7(value)) return null;
   const out = { $state: value.$state };
   if ("default" in value) out.default = value.default;
   return out;
 }
 function asItemRef(value) {
-  if (classifyValue(value) !== "item" || !isPlainObject6(value)) return null;
+  if (classifyValue(value) !== "item" || !isPlainObject7(value)) return null;
   const raw = value.$item;
   return { $item: typeof raw === "string" ? raw : true };
 }
 function asCalc(value) {
-  if (classifyValue(value) !== "calc" || !isPlainObject6(value)) return null;
+  if (classifyValue(value) !== "calc" || !isPlainObject7(value)) return null;
   const calc = value.$calc;
   const out = {
     op: typeof calc.op === "string" ? calc.op : "",
@@ -7349,7 +7641,7 @@ function writeActionList(list) {
   return all;
 }
 function isActionObject(value) {
-  return isPlainObject6(value) && typeof value.action === "string";
+  return isPlainObject7(value) && typeof value.action === "string";
 }
 function actionNameOf(action) {
   return typeof action.action === "string" ? action.action : "";
@@ -7416,7 +7708,7 @@ function formatValue(value, depth = 0) {
     if (value.length === 0) return "[]";
     return `[${value.map((item) => formatValue(item, depth + 1)).join(", ")}]`;
   }
-  if (isPlainObject6(value)) {
+  if (isPlainObject7(value)) {
     const keys = Object.keys(value);
     if (keys.length === 0) return "{}";
     return `{ ${keys.slice(0, 3).join(", ")}${keys.length > 3 ? ", \u2026" : ""} }`;
@@ -7816,7 +8108,7 @@ function LiteralInput({
   }
 }
 function effectiveKind(value, meta) {
-  if (Array.isArray(value) || isPlainObject6(value)) return "json";
+  if (Array.isArray(value) || isPlainObject7(value)) return "json";
   if (typeof value === "string" && value.includes("\n")) return "multiline";
   switch (meta?.kind) {
     case "number":
@@ -8421,7 +8713,7 @@ function dialogKeysOf(doc, catalog) {
   return [...found.values()].sort((a, b) => a.value.localeCompare(b.value, "ko"));
 }
 function gateKeyOf(when) {
-  if (classifyValue(when) !== "state" || !isPlainObject6(when)) return null;
+  if (classifyValue(when) !== "state" || !isPlainObject7(when)) return null;
   const key = when.$state;
   return typeof key === "string" && key ? key : null;
 }
@@ -8493,7 +8785,7 @@ function visitActions(value, visit) {
     for (const item of value) visitActions(item, visit);
     return;
   }
-  if (!isPlainObject6(value)) return;
+  if (!isPlainObject7(value)) return;
   if (typeof value.action !== "string") return;
   visit(value);
   visitActions(value.onSuccess, visit);
@@ -8550,12 +8842,12 @@ function itemFieldsOf(doc, forEachId) {
 function sampleRowOf(source) {
   const pick = (v) => {
     if (!Array.isArray(v)) return null;
-    const first = v.find((row) => isPlainObject6(row));
-    return isPlainObject6(first) ? first : null;
+    const first = v.find((row) => isPlainObject7(row));
+    return isPlainObject7(first) ? first : null;
   };
   const direct = pick(source);
   if (direct) return direct;
-  if (classifyValue(source) === "state" && isPlainObject6(source)) {
+  if (classifyValue(source) === "state" && isPlainObject7(source)) {
     return pick(source.default);
   }
   return null;
@@ -8566,7 +8858,7 @@ function collectItemFields(children, out) {
       for (const item of value) walkValue(item);
       return;
     }
-    if (!isPlainObject6(value)) return;
+    if (!isPlainObject7(value)) return;
     const ref = asItemRef(value);
     if (ref && typeof ref.$item === "string" && ref.$item) out.add(ref.$item);
     for (const [name, sub] of Object.entries(value)) {
@@ -8575,7 +8867,7 @@ function collectItemFields(children, out) {
     }
   };
   const walkChild = (child) => {
-    if (!isPlainObject6(child) || child.kind !== "node") return;
+    if (!isPlainObject7(child) || child.kind !== "node") return;
     const node = child;
     for (const value of Object.values(node.props)) walkValue(value);
     for (const list of Object.values(node.slots)) list.forEach(walkChild);
@@ -8774,7 +9066,7 @@ function ActionRow({
             value: action,
             "aria-label": "\uC561\uC158 JSON",
             onChange: (next) => {
-              if (isPlainObject6(next) && typeof next.action === "string") onChange(next);
+              if (isPlainObject7(next) && typeof next.action === "string") onChange(next);
             }
           }
         )
@@ -8793,7 +9085,7 @@ function ActionRow({
               onChange: (next) => {
                 const kept = { action: name };
                 for (const field of meta.fields) if (field.name in action) kept[field.name] = action[field.name];
-                onChange(isPlainObject6(next) ? { ...kept, ...next } : kept);
+                onChange(isPlainObject7(next) ? { ...kept, ...next } : kept);
               }
             }
           )
@@ -8984,17 +9276,17 @@ function IndexField({
     }
   );
 }
-function isPlainObject7(value) {
+function isPlainObject8(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function canon(value) {
   if (Array.isArray(value)) return value.map(canon);
-  if (!isPlainObject7(value)) return value;
+  if (!isPlainObject8(value)) return value;
   const out = {};
   for (const key of Object.keys(value).sort()) {
     const v = value[key];
     if (key === "children" && Array.isArray(v) && v.length === 0) continue;
-    if (key === "slots" && isPlainObject7(v)) {
+    if (key === "slots" && isPlainObject8(v)) {
       const slots = {};
       for (const name of Object.keys(v).sort()) {
         const list = v[name];
@@ -9019,7 +9311,7 @@ function diffPaths(a, b, path, out) {
     a.forEach((item, i) => diffPaths(item, b[i], `${path}[${i}]`, out));
     return;
   }
-  if (isPlainObject7(a) && isPlainObject7(b)) {
+  if (isPlainObject8(a) && isPlainObject8(b)) {
     for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
       if (out.length >= 6) return;
       if (!(key in b)) out.push(`${path}.${key} \u2014 \uBE4C\uB354\uC5D0\uC11C \uC0AC\uB77C\uC9D1\uB2C8\uB2E4`);
@@ -9034,7 +9326,7 @@ function sameSpecMeaning(a, b) {
   return JSON.stringify(canon(a)) === JSON.stringify(canon(b));
 }
 function builderFidelity(spec) {
-  if (!isPlainObject7(spec)) {
+  if (!isPlainObject8(spec)) {
     return {
       ok: false,
       issues: [
@@ -9185,6 +9477,11 @@ function BuilderView({
   onOpenJson,
   onSave,
   pageIds,
+  onOpenSpec,
+  useSpec,
+  previewFetch,
+  dataArmed,
+  canvasInitialState,
   registry,
   catalog,
   can,
@@ -9419,7 +9716,11 @@ function BuilderView({
               hover: state.hover,
               dispatch,
               registry: canvasRegistry,
-              can
+              can,
+              useSpec,
+              previewFetch,
+              dataArmed,
+              initialState: canvasInitialState
             }
           ) }) : null,
           showRight ? /* @__PURE__ */ jsx("div", { className: "sdui-bv__right", children: /* @__PURE__ */ jsx(
@@ -9429,7 +9730,9 @@ function BuilderView({
               catalog: canvasCatalog,
               selection: state.selection,
               onApply: (change) => dispatch({ type: "apply", ...change }),
-              onRequestBinding: setBindingProp
+              onRequestBinding: setBindingProp,
+              pageIds,
+              onOpenSpec
             }
           ) }) : null
         ] }),
@@ -9498,6 +9801,227 @@ function labelOf2(doc, ids, catalog) {
   const first = ids[0] ? getNode(doc, ids[0]) : null;
   return first ? describeChild(first, catalog).label : "\uB178\uB4DC";
 }
+function PreviewSeedPanel({
+  specId,
+  autoSeeds,
+  stateKeys,
+  value,
+  onChange,
+  previewEntitySearch,
+  canFetch,
+  onClose
+}) {
+  const listId = useId();
+  const autoKeys = Object.keys(autoSeeds);
+  const params = patternParams(specId);
+  const patch = (next) => onChange({ ...value, ...next });
+  const patchRow = (index, row) => patch({ manual: value.manual.map((m, i) => i === index ? { ...m, ...row } : m) });
+  const argsBroken = (() => {
+    if (!value.argsOn) return false;
+    try {
+      const parsed = JSON.parse(value.argsText);
+      return typeof parsed !== "object" || parsed === null || Array.isArray(parsed);
+    } catch {
+      return true;
+    }
+  })();
+  const pickEntity = (param, picked, option) => {
+    const key = `route.${param}`;
+    const rest = value.manual.filter((row) => row.key !== key);
+    const labels = { ...value.entityLabels };
+    if (picked === null) {
+      delete labels[param];
+      patch({ manual: rest, entityLabels: labels });
+      return;
+    }
+    labels[param] = typeof option?.label === "string" ? option.label : picked;
+    patch({
+      manual: [...rest, { key, text: JSON.stringify(picked) }],
+      entityLabels: labels,
+      dataArmed: true
+    });
+  };
+  const entityValueOf = (param) => {
+    const row = value.manual.find((m) => m.key === `route.${param}`);
+    if (!row) return "";
+    const parsed = parseSeedValue(row.text);
+    return typeof parsed === "string" ? parsed : String(parsed ?? "");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-seedpanel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdui-editor-seedpanel__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-overline", children: "\uBBF8\uB9AC\uBCF4\uAE30 \uC2DC\uB529" }),
+      /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "x", label: "\uD328\uB110 \uB2EB\uAE30", size: "sm", onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "sdui-editor-seedpanel__note", children: "\uC2DC\uB4DC\uB97C \uBC14\uAFB8\uBA74 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uB2E4\uC2DC \uB9C8\uC6B4\uD2B8\uB418\uC5B4, \uBBF8\uB9AC\uBCF4\uAE30 \uC548\uC5D0\uC11C \uC785\uB825 \uC911\uC774\uB358 \uAC12\uC740 \uCD08\uAE30\uD654\uB429\uB2C8\uB2E4." }),
+    autoKeys.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "sdui-editor-seedpanel__sec", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "sm",
+          checked: value.autoOpen,
+          label: `\uB2E4\uC774\uC5BC\uB85C\uADF8 \uC5F4\uB9BC \uC2DC\uB529 (${autoKeys.map((k) => `${k}=true`).join(", ")})`,
+          onChange: (e) => patch({ autoOpen: e.target.checked })
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { className: "sdui-editor-seedpanel__desc", children: [
+        "\uCD5C\uC0C1\uC704 ",
+        /* @__PURE__ */ jsx("code", { children: "Show(when: $state)" }),
+        " \uC544\uB798\uC758 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB97C \uC5F4\uC5B4 \uB461\uB2C8\uB2E4. \uB044\uBA74 \uC2E4\uC81C \uCD08\uAE30 \uC0C1\uD0DC(\uB2EB\uD798)\uB85C \uBCF4\uC785\uB2C8\uB2E4."
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("section", { className: "sdui-editor-seedpanel__sec", children: [
+      /* @__PURE__ */ jsx("span", { className: "sdui-editor-seedpanel__label", children: "\uC0C1\uD0DC \uC2DC\uB4DC (\uD0A4 \u2192 \uAC12)" }),
+      value.manual.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "sdui-editor-seedpanel__row", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            mono: true,
+            placeholder: "\uC0C1\uD0DC \uD0A4",
+            value: row.key,
+            list: stateKeys.length > 0 ? listId : void 0,
+            onChange: (e) => patchRow(index, { key: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            mono: true,
+            placeholder: "\uAC12 (JSON \u2014 \uBABB \uC77D\uC73C\uBA74 \uBB38\uC790\uC5F4)",
+            value: row.text,
+            onChange: (e) => patchRow(index, { text: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: "trash-2",
+            label: "\uC2DC\uB4DC \uC0AD\uC81C",
+            size: "sm",
+            onClick: () => patch({ manual: value.manual.filter((_, i) => i !== index) })
+          }
+        )
+      ] }, index)),
+      stateKeys.length > 0 ? /* @__PURE__ */ jsx("datalist", { id: listId, children: stateKeys.map((key) => /* @__PURE__ */ jsx("option", { value: key }, key)) }) : null,
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          icon: "plus",
+          onClick: () => patch({ manual: [...value.manual, { key: "", text: "" }] }),
+          children: "\uC2DC\uB4DC \uCD94\uAC00"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "sdui-editor-seedpanel__sec", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "sm",
+          checked: value.argsOn,
+          label: "args \uC0D8\uD50C \uC8FC\uC785 \u2014 Fragment\uB85C \uAC10\uC2F8 \uBBF8\uB9AC\uBCF4\uAE30",
+          onChange: (e) => patch({ argsOn: e.target.checked })
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { className: "sdui-editor-seedpanel__desc", children: [
+        "\uC774 \uC2A4\uD399\uC744 ",
+        /* @__PURE__ */ jsxs("code", { children: [
+          '{"component":"Fragment","props":{"id":"',
+          specId,
+          '","args":\u2026}}'
+        ] }),
+        "\uC73C\uB85C \uAC10\uC2FC \uC784\uC2DC \uD398\uC774\uC9C0\uB97C \uADF8\uB9BD\uB2C8\uB2E4 \u2014 \uC870\uAC01 \uC548\uC758 ",
+        /* @__PURE__ */ jsx("code", { children: "$arg" }),
+        "\uAC00 \uC2E4\uC81C \uACBD\uB85C\uB85C \uD480\uB9BD\uB2C8\uB2E4."
+      ] }),
+      value.argsOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "sdui-editor-seedpanel__json",
+            rows: 4,
+            spellCheck: false,
+            value: value.argsText,
+            onChange: (e) => patch({ argsText: e.target.value })
+          }
+        ),
+        argsBroken ? /* @__PURE__ */ jsx("p", { className: "sdui-editor-seedpanel__err", children: "args\uB97C \uD3C9\uBA74 \uC624\uBE0C\uC81D\uD2B8 JSON\uC73C\uB85C \uC77D\uC9C0 \uBABB\uD574 \uB798\uD37C\uB97C \uC801\uC6A9\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4 \u2014 \uC6D0\uBCF8 \uADF8\uB300\uB85C \uBBF8\uB9AC\uBD05\uB2C8\uB2E4." }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "sdui-editor-seedpanel__sec", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "sm",
+          checked: value.dataArmed,
+          disabled: !canFetch,
+          label: "\uC2E4\uB370\uC774\uD130 \uC870\uD68C (GET\uB9CC \uAC1C\uBC29)",
+          onChange: (e) => patch({ dataArmed: e.target.checked })
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "sdui-editor-seedpanel__desc", children: canFetch ? "\uCF1C\uBA74 page.data\uC758 GET \uC870\uD68C\uB9CC \uD3B8\uC9D1\uC790 \uC138\uC158\uC73C\uB85C \uB098\uAC11\uB2C8\uB2E4. \uC800\uC7A5\xB7\uC0AD\uC81C\xB7\uB2E4\uC6B4\uB85C\uB4DC\xB7\uAD6C\uB3C5\uC740 \uACC4\uC18D \uCC28\uB2E8\uB418\uACE0, \uC790\uCCB4 \uC870\uD68C \uC704\uC82F(\uC6D0\uACA9 \uBAA9\uB85D \uB4F1)\uC740 sandbox \uC120\uC5B8\uC744 \uBCF4\uACE0 \uBE48 \uD45C\uB85C \uB0A8\uC2B5\uB2C8\uB2E4." : "\uD638\uC2A4\uD2B8\uAC00 previewFetch\uB97C \uC8FC\uC785\uD558\uC9C0 \uC54A\uC544 \uC774 \uD3B8\uC9D1\uAE30\uC5D0\uC11C\uB294 \uC2E4\uB370\uC774\uD130\uB97C \uBCFC \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+      params.length > 0 ? previewEntitySearch && canFetch ? params.map((param) => /* @__PURE__ */ jsxs("div", { className: "sdui-editor-seedpanel__entity", children: [
+        /* @__PURE__ */ jsx("span", { className: "sdui-editor-seedpanel__label wp-mono-xs", children: `route.${param}` }),
+        /* @__PURE__ */ jsx(
+          AutocompleteField,
+          {
+            placeholder: `${param} \uAC80\uC0C9\uC73C\uB85C \uCC44\uC6B0\uAE30`,
+            minChars: 1,
+            subKey: "sublabel",
+            value: entityValueOf(param),
+            selectedLabel: value.entityLabels[param] ?? entityValueOf(param),
+            search: async (keyword, signal) => (await previewEntitySearch(specId, param, keyword, signal)).map(
+              (option) => ({ ...option })
+            ),
+            onChange: (picked, option) => pickEntity(param, picked, option)
+          }
+        )
+      ] }, param)) : /* @__PURE__ */ jsxs("p", { className: "sdui-editor-seedpanel__desc", children: [
+        `\uD328\uD134 \uD30C\uB77C\uBBF8\uD130(${params.map((p) => `{${p}}`).join(", ")})\uAC00 \uC788\uB294 \uC2A4\uD399\uC785\uB2C8\uB2E4 \u2014 `,
+        previewEntitySearch ? "\uC2E4\uB370\uC774\uD130\uB97C \uCF1C\uBA74 \uAC80\uC0C9\uC73C\uB85C \uCC44\uC6B8 \uC218 \uC788\uC2B5\uB2C8\uB2E4." : "\uD638\uC2A4\uD2B8\uAC00 previewEntitySearch\uB97C \uC8FC\uC785\uD558\uBA74 \uAC80\uC0C9\uC73C\uB85C \uCC44\uC6B8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uC9C0\uAE08\uC740 \uC704 \uC0C1\uD0DC \uC2DC\uB4DC\uC5D0 route.* \uD0A4\uB97C \uC9C1\uC811 \uB123\uC73C\uC138\uC694."
+      ] }) : null
+    ] })
+  ] });
+}
+function isPlainObject9(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function createEditorUseSpec(store, getOverride) {
+  const cache = /* @__PURE__ */ new Map();
+  const waiters = /* @__PURE__ */ new Map();
+  return function useEditorSpec(id) {
+    const [, bump] = useReducer((n) => n + 1, 0);
+    useEffect(() => {
+      if (cache.has(id)) return void 0;
+      let set = waiters.get(id);
+      const first = !set;
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        waiters.set(id, set);
+      }
+      set.add(bump);
+      if (first) {
+        store.read(id).then((record) => {
+          cache.set(id, record && isPlainObject9(record.spec) ? record.spec : null);
+        }).catch(() => {
+          cache.set(id, null);
+        }).then(() => {
+          const current = waiters.get(id);
+          waiters.delete(id);
+          current?.forEach((notify) => notify());
+        });
+      }
+      return () => {
+        waiters.get(id)?.delete(bump);
+      };
+    }, [id, bump]);
+    const override = getOverride?.(id);
+    if (override !== void 0) return override;
+    return cache.has(id) ? cache.get(id) : void 0;
+  };
+}
 var PreviewBoundary = class extends React.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
@@ -9538,7 +10062,17 @@ function pruneKnownComponents(issues, registry) {
     return !Object.hasOwn(registry, issue.message.slice(UNKNOWN_COMPONENT.length));
   });
 }
-function EditorView2({ store, id, onBack, onPreview, registry, catalog }) {
+function EditorView2({
+  store,
+  id,
+  onBack,
+  onPreview,
+  registry,
+  catalog,
+  onOpenSpec,
+  previewFetch,
+  previewEntitySearch
+}) {
   const caps = store.capabilities;
   const draftKey = `sdui-draft:${id}`;
   const renderRegistry = registry ?? editorRegistry;
@@ -9560,6 +10094,12 @@ function EditorView2({ store, id, onBack, onPreview, registry, catalog }) {
   const [previewKey, setPreviewKey] = useState(0);
   const [previewNotice, setPreviewNotice] = useState(null);
   const noticeTimer = useRef(null);
+  const [seedSetup, setSeedSetup] = useState(INITIAL_PREVIEW_SETUP);
+  const [seedPanelOpen, setSeedPanelOpen] = useState(false);
+  useEffect(() => {
+    setSeedSetup(INITIAL_PREVIEW_SETUP);
+    setSeedPanelOpen(false);
+  }, [id]);
   const [mode, setMode] = useState("json");
   const [modeNotice, setModeNotice] = useState(null);
   const [builderSpec, setBuilderSpec] = useState(null);
@@ -9830,10 +10370,37 @@ function EditorView2({ store, id, onBack, onPreview, registry, catalog }) {
     if (noticeTimer.current) clearTimeout(noticeTimer.current);
     noticeTimer.current = setTimeout(() => setPreviewNotice(null), 2500);
   }, []);
+  const parsedRef = useRef(parsed);
+  parsedRef.current = parsed;
+  const overrideSpec = useCallback(
+    (specId) => specId === id ? parsedRef.current.spec ?? void 0 : void 0,
+    [id]
+  );
+  const useSpec = useMemo(() => createEditorUseSpec(store, overrideSpec), [store, overrideSpec]);
   const previewAdapter = useMemo(
-    () => createCanvasAdapter(notifyPreview),
-    [notifyPreview]
+    () => resolvePreviewAdapter({
+      armed: seedSetup.dataArmed,
+      previewFetch,
+      onBlocked: notifyPreview,
+      useSpec
+    }),
+    [seedSetup.dataArmed, previewFetch, notifyPreview, useSpec]
   );
+  const autoSeeds = useMemo(
+    () => isDialogSpecId(id) && parsed.spec ? dialogOpenSeeds(parsed.spec) : {},
+    [id, parsed.spec]
+  );
+  const seeds = useMemo(() => seedsOf(seedSetup, autoSeeds), [seedSetup, autoSeeds]);
+  const seededOpen = seedSetup.autoOpen && Object.keys(autoSeeds).length > 0;
+  const previewStateKeys = useMemo(() => collectStateKeys(parsed.spec), [parsed.spec]);
+  const previewPage = useMemo(() => {
+    if (!parsed.spec) return null;
+    if (seedSetup.argsOn) {
+      const wrapped = argsWrapperPage(id, seedSetup.argsText);
+      if (wrapped) return wrapped.page;
+    }
+    return parsed.spec;
+  }, [parsed.spec, seedSetup.argsOn, seedSetup.argsText, id]);
   if (!id) {
     return /* @__PURE__ */ jsxs("div", { className: "sdui-editor-page sdui-base", 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." }),
@@ -9945,6 +10512,11 @@ function EditorView2({ store, id, onBack, onPreview, registry, catalog }) {
           onOpenJson: openJson,
           onSave: () => void save(),
           pageIds,
+          onOpenSpec,
+          useSpec,
+          previewFetch,
+          dataArmed: seedSetup.dataArmed,
+          canvasInitialState: seeds,
           registry: renderRegistry,
           catalog
         }
@@ -9981,18 +10553,43 @@ function EditorView2({ store, id, onBack, onPreview, registry, catalog }) {
       /* @__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
+          seededOpen ? /* @__PURE__ */ jsx(Badge, { tone: "brand", children: "\uC5F4\uB9BC \uC2DC\uB529" }) : null,
+          seedSetup.dataArmed && previewFetch ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "\uC2E4\uB370\uC774\uD130" }) : null,
+          previewNotice ? /* @__PURE__ */ jsx("span", { className: "sdui-editor-preview__notice", children: previewNotice }) : null,
+          /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
+          /* @__PURE__ */ jsx(Button, { size: "xs", icon: "sliders-horizontal", onClick: () => setSeedPanelOpen((v) => !v), children: "\uC2DC\uB529" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "sdui-editor-preview__body", children: parsed.spec ? /* @__PURE__ */ jsx(PreviewBoundary, { resetKey: previewKey, signature: debounced, children: /* @__PURE__ */ jsx(
-          SduiRenderer,
+        seedPanelOpen ? /* @__PURE__ */ jsx(
+          PreviewSeedPanel,
           {
-            page: parsed.spec,
-            registry: renderRegistry,
-            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." }) })
+            specId: id,
+            autoSeeds,
+            stateKeys: previewStateKeys,
+            value: seedSetup,
+            onChange: setSeedSetup,
+            previewEntitySearch,
+            canFetch: previewFetch !== void 0,
+            onClose: () => setSeedPanelOpen(false)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "sdui-editor-preview__body", children: previewPage ? /* @__PURE__ */ jsx(
+          PreviewBoundary,
+          {
+            resetKey: previewKey,
+            signature: `${debounced}:${seedSignature(seeds)}:${seedSetup.argsOn ? seedSetup.argsText : ""}`,
+            children: /* @__PURE__ */ jsx(
+              SduiRenderer,
+              {
+                page: previewPage,
+                registry: renderRegistry,
+                adapter: previewAdapter,
+                initialState: seeds,
+                syncUrlState: false
+              },
+              `${previewKey}:${seedSignature(seeds)}`
+            )
+          }
+        ) : /* @__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
     ] })
@@ -10021,7 +10618,9 @@ function ViewerView({
   onNavigate,
   registry = editorRegistry,
   adapter: hostAdapter,
-  can
+  can,
+  previewFetch,
+  previewEntitySearch
 }) {
   const [state, setState] = useState({
     spec: null,
@@ -10055,9 +10654,46 @@ function ViewerView({
   useEffect(() => () => {
     if (blockedTimer.current) clearTimeout(blockedTimer.current);
   }, []);
+  const [seedSetup, setSeedSetup] = useState(INITIAL_PREVIEW_SETUP);
+  const [seedPanelOpen, setSeedPanelOpen] = useState(false);
+  useEffect(() => {
+    setSeedSetup(INITIAL_PREVIEW_SETUP);
+    setSeedPanelOpen(false);
+  }, [id]);
+  const autoSeeds = useMemo(
+    () => isDialogSpecId(id) && state.spec ? dialogOpenSeeds(state.spec) : {},
+    [id, state.spec]
+  );
+  const seeds = useMemo(() => seedsOf(seedSetup, autoSeeds), [seedSetup, autoSeeds]);
+  const seededOpen = seedSetup.autoOpen && Object.keys(autoSeeds).length > 0;
+  const previewStateKeys = useMemo(() => collectStateKeys(state.spec), [state.spec]);
+  const viewPage = useMemo(() => {
+    if (!state.spec) return null;
+    if (seedSetup.argsOn) {
+      const wrapped = argsWrapperPage(id, seedSetup.argsText);
+      if (wrapped) return wrapped.page;
+    }
+    return state.spec;
+  }, [state.spec, seedSetup.argsOn, seedSetup.argsText, id]);
+  const specRef = useRef(state.spec);
+  specRef.current = state.spec;
+  const overrideSpec = useCallback(
+    (specId) => specId === id ? specRef.current ?? void 0 : void 0,
+    [id]
+  );
+  const useSpec = useMemo(() => createEditorUseSpec(store, overrideSpec), [store, overrideSpec]);
   const adapter = useMemo(
-    () => hostAdapter ?? { ...createCanvasAdapter(notifyBlocked), navigate: onNavigate, refresh: load },
-    [hostAdapter, notifyBlocked, onNavigate, load]
+    () => hostAdapter ?? {
+      ...resolvePreviewAdapter({
+        armed: seedSetup.dataArmed,
+        previewFetch,
+        onBlocked: notifyBlocked,
+        useSpec
+      }),
+      navigate: onNavigate,
+      refresh: load
+    },
+    [hostAdapter, notifyBlocked, onNavigate, load, seedSetup.dataArmed, previewFetch, useSpec]
   );
   useEffect(() => {
     if (state.spec?.title) {
@@ -10076,10 +10712,26 @@ function ViewerView({
         "/",
         id
       ] }),
+      seededOpen ? /* @__PURE__ */ jsx(Badge, { tone: "brand", children: "\uC5F4\uB9BC\uC744 \uC2DC\uB529\uD588\uC2B5\uB2C8\uB2E4" }) : null,
+      seedSetup.dataArmed && previewFetch && !hostAdapter ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: "\uC2E4\uB370\uC774\uD130" }) : null,
       /* @__PURE__ */ jsx("span", { className: "wp-spacer" }),
       blocked ? /* @__PURE__ */ jsx("span", { className: "sdui-editor-preview__notice", children: blocked }) : null,
+      /* @__PURE__ */ jsx(Button, { size: "sm", icon: "sliders-horizontal", onClick: () => setSeedPanelOpen((v) => !v), children: "\uC2DC\uB529" }),
       /* @__PURE__ */ jsx(Button, { size: "sm", icon: "pencil", onClick: () => onEdit(id), children: "\uD3B8\uC9D1" })
     ] }),
+    seedPanelOpen ? /* @__PURE__ */ jsx(
+      PreviewSeedPanel,
+      {
+        specId: id,
+        autoSeeds,
+        stateKeys: previewStateKeys,
+        value: seedSetup,
+        onChange: setSeedSetup,
+        previewEntitySearch,
+        canFetch: previewFetch !== void 0 && !hostAdapter,
+        onClose: () => setSeedPanelOpen(false)
+      }
+    ) : null,
     /* @__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,
       {
@@ -10103,12 +10755,14 @@ function ViewerView({
         children: /* @__PURE__ */ jsx(
           SduiRenderer,
           {
-            page: state.spec,
+            page: viewPage ?? state.spec,
             registry,
             adapter,
+            initialState: seeds,
             can,
             syncUrlState: false
-          }
+          },
+          `${id}#${state.seq}:${seedSignature(seeds)}`
         )
       }
     ) })
@@ -10125,6 +10779,8 @@ function SduiEditor({
   onNavigate,
   viewerAdapter,
   can,
+  previewFetch,
+  previewEntitySearch,
   className
 }) {
   const [internal, setInternal] = useState(defaultView ?? { name: "list" });
@@ -10162,8 +10818,11 @@ function SduiEditor({
         id: current.id,
         onBack: openList,
         onPreview: openPreview,
+        onOpenSpec: openEdit,
         registry,
-        catalog
+        catalog,
+        previewFetch,
+        previewEntitySearch
       }
     ) : /* @__PURE__ */ jsx(
       ViewerView,
@@ -10175,10 +10834,12 @@ function SduiEditor({
         onEdit: openEdit,
         onNavigate: navigateFromSpec,
         adapter: viewerAdapter,
-        can
+        can,
+        previewFetch,
+        previewEntitySearch
       }
     )
   ] });
 }
 
-export { ActionEditor, BindingEditor, BuilderView, COALESCE_WINDOW_MS, Canvas, DEFAULT_SLOT, EMPTY_SELECTION, EditorView2 as EditorView, HISTORY_LIMIT, HistoryBar, Inspector, PAGE_ID_PATTERN, PageExistsError, PageGoneError, PageIdConflictError, PageIdRejectedError, PageListView, Palette, ROOT_ID, RestSpecStore, SPEC_PAIR_FREQ, SduiEditor, StoreUnauthorizedError, StoreUnavailableError, StoreUnsupportedError, TEMPLATES, TEXT_CHILD, TreeView, VersionMismatchError, ViewerView, addressOf, ancestorIdsOf, bindingContextFor, breadcrumbOf, buildStateKeyIndex, builderFidelity, canDrop, canDropAt, canMoveTo, canRedo, canUndo, createBindingContext, createBindingSource, createEditorState, createRestSpecStore, describeChild, dropFrequency, dropTargetsAround, duplicate, editorReducer, editorRegistry, emptyDoc, flattenTree, formatAction, formatActionList, formatValue, fromPage, getChild, getNode, gradeIssues, inDocumentOrder, insert, isDescendantOf, isMultiSelection, isSelected, isTypingTarget, isValidPageId, looksLikeActionProp, move, readActionList, recommendedChildren, redoLabel, remove, replaceChild, sameInsertionPoint, sameSpecMeaning, setChildren, setNodeKey, setPageMeta, setProp, setProps, setText, slotsOf, specOf, stateKeyStatus, suggestStateKeys, titleOf, toPage, toSpec, topmost, undoLabel, useUndoRedoShortcuts, walkDoc, writeActionList };
+export { ActionEditor, BindingEditor, BuilderView, COALESCE_WINDOW_MS, Canvas, DEFAULT_SLOT, DIALOG_PREFIX, EMPTY_SELECTION, EditorView2 as EditorView, HISTORY_LIMIT, HistoryBar, INITIAL_PREVIEW_SETUP, Inspector, PAGE_ID_PATTERN, PageExistsError, PageGoneError, PageIdConflictError, PageIdRejectedError, PageListView, Palette, PreviewSeedPanel, ROOT_ID, RestSpecStore, SPEC_PAIR_FREQ, SduiEditor, StoreUnauthorizedError, StoreUnavailableError, StoreUnsupportedError, TEMPLATES, TEXT_CHILD, TreeView, VersionMismatchError, ViewerView, addressOf, ancestorIdsOf, argsWrapperPage, bindingContextFor, breadcrumbOf, buildStateKeyIndex, builderFidelity, canDrop, canDropAt, canMoveTo, canRedo, canUndo, collectStateKeys, createBindingContext, createBindingSource, createDataPreviewAdapter, createEditorState, createEditorUseSpec, createRestSpecStore, describeChild, dialogOpenSeeds, dropFrequency, dropTargetsAround, duplicate, editorReducer, editorRegistry, emptyDoc, flattenTree, formatAction, formatActionList, formatValue, fromPage, getChild, getNode, gradeIssues, inDocumentOrder, insert, isDescendantOf, isDialogSpecId, isMultiSelection, isSelected, isTypingTarget, isValidPageId, looksLikeActionProp, move, parseSeedValue, patternParams, readActionList, recommendedChildren, redoLabel, remove, replaceChild, resolvePreviewAdapter, sameInsertionPoint, sameSpecMeaning, seedSignature, seedsOf, setChildren, setNodeKey, setPageMeta, setProp, setProps, setText, slotsOf, specOf, stateKeyStatus, suggestStateKeys, titleOf, toPage, toSpec, topmost, undoLabel, useUndoRedoShortcuts, walkDoc, writeActionList };