@ssobig/writer-cli 0.2.0

package/templates/mystery-v1/component-checkpoint-history.js

@@ -0,0 +1,145 @@
+(function (root, factory) {
+  const pageHeader = typeof module === "object" && module.exports ? require("./page-header.js") : root?.WriterWorkbenchPageHeader;
+  const api = factory(pageHeader);
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchCheckpointHistory = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (pageHeader) {
+  "use strict";
+
+  const MESSAGE_MAX_LENGTH = 500;
+  const SOURCES = Object.freeze({
+    baseline: "기준 상태",
+    manual: "직접 저장",
+    cli: "CLI 자동 저장",
+    cli_guard: "CLI 적용 전 자동 보존",
+    restore: "복원",
+    restore_guard: "복원 전 자동 보존"
+  });
+
+  function escapeHtml(value) {
+    return String(value ?? "").replace(/[&<>'"]/g, character => ({
+      "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;"
+    })[character]);
+  }
+
+  function normalizeMessage(value, label = "체크포인트 메시지") {
+    const message = String(value || "").trim();
+    if (!message) throw new TypeError(`${label}를 입력해 주세요.`);
+    if (message.length > MESSAGE_MAX_LENGTH) throw new RangeError(`${label}는 ${MESSAGE_MAX_LENGTH}자 이하로 입력해 주세요.`);
+    return message;
+  }
+
+  function restoreMessage(checkpoint) {
+    const target = String(checkpoint?.message || "선택한 체크포인트").trim();
+    return `복원: ${target}`.slice(0, MESSAGE_MAX_LENGTH);
+  }
+
+  function normalizeChangedIds(value) {
+    if (!Array.isArray(value)) return [];
+    return [...new Set(value.map(item => String(item || "").trim()).filter(Boolean))];
+  }
+
+  function normalizeCheckpoint(row) {
+    if (!row || typeof row !== "object" || Array.isArray(row)) return null;
+    const checkpointId = String(row.checkpoint_id || "").trim();
+    const message = String(row.message || "").trim();
+    if (!checkpointId || !message) return null;
+    const changedInstanceIds = normalizeChangedIds(row.changed_instance_ids);
+    const changedCountValue = Number(row.changed_count);
+    const checkpointNumberValue = Number(row.checkpoint_number);
+    const createdAt = new Date(row.created_at);
+    return Object.freeze({
+      checkpointId,
+      checkpointNumber: Number.isSafeInteger(checkpointNumberValue) && checkpointNumberValue > 0 ? checkpointNumberValue : 0,
+      message,
+      source: Object.hasOwn(SOURCES, row.source) ? String(row.source) : "manual",
+      createdByEmail: String(row.created_by_email || "").trim(),
+      createdAt: Number.isNaN(createdAt.getTime()) ? null : createdAt,
+      parentCheckpointId: String(row.parent_checkpoint_id || "").trim(),
+      restoredFromCheckpointId: String(row.restored_from_checkpoint_id || "").trim(),
+      componentSetRevision: Number(row.component_set_revision || 0),
+      componentChecksum: String(row.component_checksum || ""),
+      manifestHash: String(row.manifest_hash || ""),
+      changedInstanceIds,
+      changedCount: Number.isSafeInteger(changedCountValue) && changedCountValue >= 0 ? changedCountValue : changedInstanceIds.length,
+      isHead: row.is_head === true,
+      latestChanged: row.latest_changed === true
+    });
+  }
+
+  function normalizeHistory(rows) {
+    const checkpoints = (Array.isArray(rows) ? rows : [])
+      .map(normalizeCheckpoint)
+      .filter(Boolean)
+      .sort((left, right) => right.checkpointNumber - left.checkpointNumber || Number(right.createdAt || 0) - Number(left.createdAt || 0));
+    const head = checkpoints.find(checkpoint => checkpoint.isHead) || checkpoints[0] || null;
+    return Object.freeze({ checkpoints, head, latestChanged: Boolean(head?.latestChanged) });
+  }
+
+  function normalizePage(rows, pageSize = 50) {
+    const size = Number(pageSize);
+    if (!Number.isSafeInteger(size) || size < 1 || size > 99) throw new TypeError("체크포인트 페이지 크기가 올바르지 않습니다.");
+    const normalized = normalizeHistory(rows);
+    const checkpoints = normalized.checkpoints.slice(0, size);
+    const cursor = checkpoints.at(-1)?.checkpointNumber || 0;
+    const hasMore = normalized.checkpoints.length > size && cursor > 0;
+    return Object.freeze({
+      checkpoints,
+      head: normalized.head,
+      latestChanged: normalized.latestChanged,
+      hasMore,
+      nextCursor: hasMore ? cursor : null
+    });
+  }
+
+  function sourceLabel(source) {
+    return SOURCES[source] || "체크포인트";
+  }
+
+  function formatCreatedAt(value) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return "시간 정보 없음";
+    return new Intl.DateTimeFormat("ko-KR", {
+      year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit"
+    }).format(date);
+  }
+
+  function changedListMarkup(checkpoint, labelForInstance) {
+    if (!checkpoint.changedInstanceIds.length) return `<p class="checkpoint-empty-diff">기준 상태 또는 변경 요약이 없는 체크포인트입니다.</p>`;
+    return `<ul class="checkpoint-change-list">${checkpoint.changedInstanceIds.map(instanceId => `<li><span>${escapeHtml(labelForInstance(instanceId))}</span><code>${escapeHtml(instanceId)}</code></li>`).join("")}</ul>`;
+  }
+
+  function checkpointMarkup(checkpoint, state, labelForInstance, readOnly = false) {
+    const actor = checkpoint.createdByEmail || "작성자 정보 없음";
+    const restoreDisabled = Boolean(state.operation) || (checkpoint.isHead && !state.latestChanged);
+    const restoreLabel = restoreDisabled && checkpoint.isHead && !state.latestChanged ? "현재 체크포인트" : "이 상태로 복원";
+    return `<li class="checkpoint-entry" data-checkpoint-id="${escapeHtml(checkpoint.checkpointId)}"><div class="checkpoint-marker" aria-hidden="true"></div><article><header><div><div class="checkpoint-entry-meta"><span>${escapeHtml(sourceLabel(checkpoint.source))}</span>${checkpoint.isHead ? '<strong>HEAD</strong>' : ""}</div><h3>${escapeHtml(checkpoint.message)}</h3><p>${escapeHtml(actor)} · <time>${escapeHtml(formatCreatedAt(checkpoint.createdAt))}</time></p></div>${readOnly ? "" : `<button type="button" data-checkpoint-restore="${escapeHtml(checkpoint.checkpointId)}" ${restoreDisabled ? "disabled" : ""}>${restoreLabel}</button>`}</header><details><summary>변경된 Component ${checkpoint.changedCount}개</summary>${changedListMarkup(checkpoint, labelForInstance)}</details></article></li>`;
+  }
+
+  function render(state = {}, options = {}) {
+    const labelForInstance = typeof options.labelForInstance === "function" ? options.labelForInstance : value => value;
+    const readOnly = options.readOnly === true;
+    const header = metaMarkup => pageHeader.render({ title: "데이터 기록", description: "체크포인트로 저장한 변경 내역을 확인합니다.", className: "checkpoint-history-heading", metaMarkup });
+    if (state.loading) return `<section class="checkpoint-history-panel" aria-busy="true">${header("")}<div class="checkpoint-loading" role="status">기록 불러오는 중…</div></section>`;
+    if (state.error) return `<section class="checkpoint-history-panel">${header("")}<p class="checkpoint-operation-error" role="alert">${escapeHtml(state.error.message || state.error)}</p><button type="button" data-checkpoint-retry>다시 시도</button></section>`;
+    const checkpoints = Array.isArray(state.checkpoints) ? state.checkpoints : [];
+    const pagination = state.hasMore || state.loadingMore || state.loadMoreError
+      ? `<footer class="checkpoint-history-pagination"><button type="button" data-checkpoint-load-more ${state.loadingMore || state.operation ? "disabled" : ""}>${state.loadingMore ? "이전 기록 불러오는 중…" : "이전 기록 더 불러오기"}</button><p aria-live="polite">${state.loadMoreError ? escapeHtml(state.loadMoreError.message || state.loadMoreError) : ""}</p></footer>`
+      : "";
+    return `<section class="checkpoint-history-panel">${header(`<span class="checkpoint-history-count">불러온 기록 ${checkpoints.length}개</span>`)}${state.operationError ? `<p class="checkpoint-operation-error" role="alert">${escapeHtml(state.operationError.message || state.operationError)}</p>` : ""}${checkpoints.length ? `<ol class="checkpoint-timeline">${checkpoints.map(checkpoint => checkpointMarkup(checkpoint, state, labelForInstance, readOnly)).join("")}</ol>${pagination}` : `<div class="checkpoint-empty"><h3>아직 체크포인트가 없습니다</h3><p>${readOnly ? "저장된 체크포인트가 생기면 이곳에서 확인할 수 있습니다." : "메시지와 함께 현재 Latest를 첫 체크포인트로 저장해 보세요."}</p></div>`}</section>`;
+  }
+
+  return Object.freeze({
+    MESSAGE_MAX_LENGTH,
+    SOURCES,
+    escapeHtml,
+    normalizeMessage,
+    restoreMessage,
+    normalizeCheckpoint,
+    normalizeHistory,
+    normalizePage,
+    sourceLabel,
+    formatCreatedAt,
+    render
+  });
+});

package/templates/mystery-v1/component-contract.js

@@ -0,0 +1,90 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchComponentContract = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  const WORKSPACE_MODES = Object.freeze({
+    COMPONENTS: "components",
+    AUTHORING: "authoring",
+    PREVIEW: "preview",
+    DESIGN: "design",
+    VALIDATION: "validation",
+    HISTORY: "history",
+    OUTPUT: "output"
+  });
+  const WORKSPACE_MODE_IDS = Object.freeze(Object.values(WORKSPACE_MODES));
+  const DEFAULT_WORKSPACE_MODE = WORKSPACE_MODES.AUTHORING;
+  const VARIANT_ID_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+
+  function isWorkspaceMode(value) {
+    return WORKSPACE_MODE_IDS.includes(String(value || "").trim().toLowerCase());
+  }
+
+  function normalizeWorkspaceMode(value, fallback = DEFAULT_WORKSPACE_MODE) {
+    const candidate = String(value || "").trim().toLowerCase();
+    if (isWorkspaceMode(candidate)) return candidate;
+    if (fallback === null) return null;
+    const normalizedFallback = String(fallback || "").trim().toLowerCase();
+    if (isWorkspaceMode(normalizedFallback)) return normalizedFallback;
+    throw new TypeError(`Unknown workspace mode fallback: ${fallback}`);
+  }
+
+  function assertWorkspaceMode(value, label = "workspaceMode") {
+    if (!isWorkspaceMode(value)) {
+      throw new TypeError(`${label} must be one of: ${WORKSPACE_MODE_IDS.join(", ")}`);
+    }
+    return String(value).trim().toLowerCase();
+  }
+
+  function isVariantId(value) {
+    return VARIANT_ID_PATTERN.test(String(value || "").trim());
+  }
+
+  function variantIdCandidate(value) {
+    return String(value || "")
+      .trim()
+      .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+      .toLowerCase()
+      .replace(/[_\s]+/g, "-")
+      .replace(/[^a-z0-9-]+/g, "-")
+      .replace(/-+/g, "-")
+      .replace(/^-|-$/g, "");
+  }
+
+  function normalizeVariantId(value, fallback = "default") {
+    const candidate = variantIdCandidate(value);
+    if (isVariantId(candidate)) return candidate;
+    if (fallback === null) return null;
+    const normalizedFallback = variantIdCandidate(fallback);
+    if (isVariantId(normalizedFallback)) return normalizedFallback;
+    throw new TypeError(`Invalid view variant fallback: ${fallback}`);
+  }
+
+  function assertVariantId(value, label = "variantId") {
+    const candidate = String(value || "").trim();
+    if (!isVariantId(candidate)) {
+      throw new TypeError(`${label} must use lowercase kebab-case and start with a letter`);
+    }
+    return candidate;
+  }
+
+  function normalizeInstanceId(value, fallback = "component") {
+    return normalizeVariantId(value, fallback);
+  }
+
+  return Object.freeze({
+    WORKSPACE_MODES,
+    WORKSPACE_MODE_IDS,
+    DEFAULT_WORKSPACE_MODE,
+    VARIANT_ID_PATTERN,
+    isWorkspaceMode,
+    normalizeWorkspaceMode,
+    assertWorkspaceMode,
+    isVariantId,
+    normalizeVariantId,
+    assertVariantId,
+    normalizeInstanceId
+  });
+});

package/templates/mystery-v1/component-draft-operations.js

@@ -0,0 +1,313 @@
+(function (root, factory) {
+  const commonJs = typeof module === "object" && module.exports;
+  const idPolicy = commonJs ? require("./component-id-policy.js") : root?.WriterWorkbenchComponentIdPolicy;
+  const api = factory(idPolicy);
+  if (commonJs) module.exports = api;
+  if (root) root.WriterWorkbenchComponentDraftOperations = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (idPolicy) {
+  "use strict";
+
+  function create(options) {
+    if (!idPolicy) throw new Error("Component ID 정책 모듈을 초기화하지 못했습니다.");
+    if (typeof options?.draft !== "function" || typeof options?.setDraft !== "function" || typeof options?.scheduleSave !== "function") {
+      throw new Error("Component draft 작업 의존성이 완전하지 않습니다.");
+    }
+
+    const rerender = () => options.render?.();
+    const persistAndRender = instance => {
+      options.scheduleSave(instance);
+      rerender();
+    };
+    const technicalId = (instance, prefix, occupied) => idPolicy.technicalId(instance, prefix, occupied, {
+      now: options.now || Date.now,
+      randomUUID: options.randomUUID
+    });
+
+    function markChange(instance, path, value, changeOptions = {}) {
+      if (options.saveState?.(instance)?.locked) return false;
+      idPolicy.setAt(options.draft(instance), path, value);
+      options.scheduleSave(instance);
+      options.syncJson?.(instance);
+      if (changeOptions.render) rerender();
+      return true;
+    }
+
+    function replaceData(instance, nextData, changeOptions = {}) {
+      if (options.saveState?.(instance)?.locked) return false;
+      options.setDraft(instance, options.clone(nextData));
+      options.scheduleSave(instance);
+      if (changeOptions.render !== false) rerender();
+      return true;
+    }
+
+    function arrayValue(instance, path) {
+      const value = idPolicy.getAt(options.draft(instance), path);
+      if (!Array.isArray(value)) throw new Error("Component 배열 경로가 올바르지 않습니다.");
+      return value;
+    }
+
+    function arrayAdd(instance, path, item) {
+      arrayValue(instance, path).push(item);
+      persistAndRender(instance);
+    }
+
+    function arrayInsert(instance, path, index, item) {
+      const values = arrayValue(instance, path);
+      const target = Number.isSafeInteger(index) ? Math.max(0, Math.min(index, values.length)) : values.length;
+      values.splice(target, 0, item);
+      persistAndRender(instance);
+    }
+
+    function arrayRemove(instance, path, index) {
+      const values = arrayValue(instance, path);
+      if (!Number.isSafeInteger(index) || index < 0 || index >= values.length || !options.confirm?.()) return false;
+      values.splice(index, 1);
+      persistAndRender(instance);
+      return true;
+    }
+
+    function arrayMove(instance, path, index, direction) {
+      const values = arrayValue(instance, path);
+      const target = index + direction;
+      if (target < 0 || target >= values.length) return false;
+      [values[index], values[target]] = [values[target], values[index]];
+      persistAndRender(instance);
+      return true;
+    }
+
+    function arrayReorder(instance, path, fromIndex, toIndex) {
+      const values = arrayValue(instance, path);
+      if (!Number.isSafeInteger(fromIndex) || !Number.isSafeInteger(toIndex) || fromIndex < 0 || fromIndex >= values.length || toIndex < 0 || toIndex >= values.length || fromIndex === toIndex) return false;
+      const [item] = values.splice(fromIndex, 1);
+      values.splice(toIndex, 0, item);
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterAdd(instance) {
+      const data = options.draft(instance);
+      const id = technicalId(instance, "character", new Set(Object.keys(data.characters)));
+      const containerTemplates = [];
+      const seenContainers = new Set();
+      data.order.map(characterId => data.characters[characterId]).filter(record => Array.isArray(record?.containers)).forEach(record => {
+        record.containers.forEach((container, index) => {
+          const key = characterContainerKey(record, index);
+          if (!seenContainers.has(key)) { seenContainers.add(key); containerTemplates.push(container); }
+        });
+      });
+      if (!containerTemplates.length) containerTemplates.push({ role: "primary", title: "기본 정보" });
+      const occupiedContainers = new Set(Object.values(data.characters).flatMap(record => (record.containers || []).map(container => container.id)));
+      const containers = containerTemplates.map(container => {
+        const containerId = technicalId(instance, "container", occupiedContainers);
+        occupiedContainers.add(containerId);
+        return { id: containerId, role: container.role, title: container.title, sectionIds: [] };
+      });
+      data.characters[id] = {
+        isPlayable: true,
+        tag: "Player",
+        color: "#497fa8",
+        customSections: [],
+        containers,
+        authorNote: ""
+      };
+      data.names[id] = "새 캐릭터";
+      data.order.push(id);
+      data.customCharacters.push({ id });
+      persistAndRender(instance);
+    }
+
+    function characterRemove(instance, id) {
+      const data = options.draft(instance);
+      if (!data.order.includes(id) || !options.confirm?.("이 캐릭터를 삭제할까요?")) return false;
+      if (!data.deletedColumns.includes(id)) data.deletedColumns.push(id);
+      data.order = data.order.filter(value => value !== id);
+      data.customCharacters = data.customCharacters.filter(item => item.id !== id);
+      delete data.characters[id];
+      delete data.names[id];
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterMove(instance, id, direction) {
+      const order = options.draft(instance).order;
+      const index = order.indexOf(id);
+      const target = index + direction;
+      if (index < 0 || target < 0 || target >= order.length) return false;
+      [order[index], order[target]] = [order[target], order[index]];
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterRecords(data) {
+      return Object.values(data.characters || {}).filter(record => record && Array.isArray(record.containers));
+    }
+
+    function characterContainerKey(record, index) {
+      const container = record?.containers?.[index];
+      if (!container) return null;
+      if (index === 0 || container.role === "primary") return "primary";
+      const title = String(container.title || "");
+      const occurrence = record.containers.slice(1, index).filter(item => String(item.title || "") === title).length;
+      return `${title}\u0000${occurrence}`;
+    }
+
+    function characterContainerIndex(data, id, containerId) {
+      return data.characters?.[id]?.containers.findIndex(container => container.id === containerId) ?? -1;
+    }
+
+    function characterContainerIndexesByKey(records, key) {
+      return records.map(record => ({ record, index: record.containers.findIndex((container, index) => characterContainerKey(record, index) === key) }));
+    }
+
+    function characterContainerAdd(instance, id) {
+      const data = options.draft(instance);
+      const records = characterRecords(data);
+      if (!records.length || !data.characters[id]) return false;
+      const occupied = new Set(records.flatMap(record => record.containers.map(container => container.id)));
+      const usedTitles = new Set(records.flatMap(record => record.containers.slice(1).map(container => String(container.title || ""))));
+      let number = Math.max(2, ...records.map(record => record.containers.length + 1));
+      while (usedTitles.has(`Container ${number}`)) number += 1;
+      const title = `Container ${number}`;
+      records.forEach(record => {
+        const containerId = technicalId(instance, "container", occupied);
+        occupied.add(containerId);
+        record.containers.push({ id: containerId, role: "content", title, sectionIds: [] });
+      });
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterContainerRemove(instance, id, containerId) {
+      const data = options.draft(instance);
+      const records = characterRecords(data);
+      const index = characterContainerIndex(data, id, containerId);
+      const key = characterContainerKey(data.characters?.[id], index);
+      const matches = characterContainerIndexesByKey(records, key);
+      if (index <= 0 || !key
+        || matches.some(match => match.index >= 0 && match.record.containers[match.index].sectionIds.length)
+        || !options.confirm?.("모든 캐릭터에서 이 빈 Container를 삭제할까요?")) return false;
+      matches.forEach(match => { if (match.index >= 0) match.record.containers.splice(match.index, 1); });
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterContainerMove(instance, id, containerId, direction) {
+      const data = options.draft(instance);
+      const records = characterRecords(data);
+      const index = characterContainerIndex(data, id, containerId);
+      const key = characterContainerKey(data.characters?.[id], index);
+      const matches = characterContainerIndexesByKey(records, key);
+      if (index <= 0 || !key || matches.some(match => match.index >= 0 && (match.index + direction <= 0 || match.index + direction >= match.record.containers.length))) return false;
+      matches.forEach(({ record, index: matchedIndex }) => {
+        if (matchedIndex < 0) return;
+        const target = matchedIndex + direction;
+        [record.containers[matchedIndex], record.containers[target]] = [record.containers[target], record.containers[matchedIndex]];
+      });
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterContainerRename(instance, id, containerId, title) {
+      const data = options.draft(instance);
+      const records = characterRecords(data);
+      const index = characterContainerIndex(data, id, containerId);
+      const key = characterContainerKey(data.characters?.[id], index);
+      if (index <= 0 || !key) return false;
+      characterContainerIndexesByKey(records, key).forEach(({ record, index: matchedIndex }) => {
+        if (matchedIndex >= 0) record.containers[matchedIndex].title = String(title);
+      });
+      options.scheduleSave(instance);
+      options.syncJson?.(instance);
+      return true;
+    }
+
+    function characterSectionAdd(instance, id, containerId) {
+      const record = options.draft(instance).characters[id];
+      const container = record?.containers.find(item => item.id === containerId);
+      if (!record || !container) return false;
+      const section = {
+        id: technicalId(instance, "section", new Set(record.customSections.map(item => item.id))),
+        title: "새 항목",
+        body: ""
+      };
+      record.customSections.push(section);
+      container.sectionIds.push(section.id);
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterSectionRemove(instance, id, sectionId) {
+      const record = options.draft(instance).characters[id];
+      const sectionIndex = record?.customSections.findIndex(section => section.id === sectionId) ?? -1;
+      if (sectionIndex < 0 || !options.confirm?.("이 문서 항목을 삭제할까요?")) return false;
+      record.customSections.splice(sectionIndex, 1);
+      record.containers.forEach(container => {
+        container.sectionIds = container.sectionIds.filter(value => value !== sectionId);
+      });
+      persistAndRender(instance);
+      return true;
+    }
+
+    function characterSectionMove(instance, id, fromContainerId, toContainerId, fromIndex, toIndex) {
+      const record = options.draft(instance).characters[id];
+      const from = record?.containers.find(container => container.id === fromContainerId);
+      const to = record?.containers.find(container => container.id === toContainerId);
+      if (!from || !to || !Number.isSafeInteger(fromIndex) || !Number.isSafeInteger(toIndex) || fromIndex < 0 || fromIndex >= from.sectionIds.length) return false;
+      const [sectionId] = from.sectionIds.splice(fromIndex, 1);
+      const target = from === to && toIndex > fromIndex ? toIndex - 1 : toIndex;
+      to.sectionIds.splice(Math.max(0, Math.min(target, to.sectionIds.length)), 0, sectionId);
+      persistAndRender(instance);
+      return true;
+    }
+
+    function commonAdd(instance) {
+      const data = options.draft(instance);
+      const id = technicalId(instance, "document", new Set(data.sectionOrder));
+      data.customSections.push({ id, title: instance.templateId === "ssobig.choice" ? "새 선택" : "새 문서", body: "" });
+      data.sectionOrder.push(id);
+      persistAndRender(instance);
+    }
+
+    function toggleComponentField(instance, fieldName, enabled) {
+      const definition = options.template?.(instance);
+      const field = definition?.fieldConfiguration?.find(item => item.key === fieldName);
+      if (!field || field.required) return false;
+      const data = options.draft(instance);
+      const selected = new Set(Array.isArray(data.enabledOptionalFields)
+        ? data.enabledOptionalFields
+        : definition.fieldConfiguration.filter(item => !item.required).map(item => item.key));
+      if (enabled) selected.add(fieldName);
+      else selected.delete(fieldName);
+      data.enabledOptionalFields = definition.fieldConfiguration
+        .filter(item => !item.required && selected.has(item.key))
+        .map(item => item.key);
+      persistAndRender(instance);
+      return true;
+    }
+
+    return Object.freeze({
+      markChange,
+      replaceData,
+      arrayValue,
+      arrayAdd,
+      arrayInsert,
+      arrayRemove,
+      arrayMove,
+      arrayReorder,
+      characterAdd,
+      characterRemove,
+      characterMove,
+      characterContainerAdd,
+      characterContainerRemove,
+      characterContainerMove,
+      characterContainerRename,
+      characterSectionAdd,
+      characterSectionRemove,
+      characterSectionMove,
+      commonAdd,
+      toggleComponentField
+    });
+  }
+
+  return Object.freeze({ create });
+});