@ssobig/writer-cli 0.2.0

package/templates/mystery-v1/external-update-coordinator.js

@@ -0,0 +1,91 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchExternalUpdateCoordinator = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  function create(options = {}) {
+    if (typeof options.drain !== "function" || typeof options.load !== "function" || typeof options.apply !== "function") {
+      throw new TypeError("외부 변경 coordinator에는 drain, load, apply 함수가 필요합니다.");
+    }
+    const schedule = options.setTimeout || setTimeout;
+    const cancel = options.clearTimeout || clearTimeout;
+    const delay = Number.isFinite(Number(options.delay)) ? Math.max(0, Number(options.delay)) : 120;
+    let timer = null;
+    let requested = false;
+    let running = null;
+    let disposed = false;
+
+    async function processRequests() {
+      if (running) return running;
+      running = (async () => {
+        let applied = false;
+        while (!disposed && requested) {
+          requested = false;
+          await options.drain();
+          const snapshot = await options.load();
+          if (options.isLocalBusy?.()) {
+            requested = true;
+            continue;
+          }
+          const changed = await options.apply(snapshot);
+          if (changed) {
+            applied = true;
+            options.onApplied?.(snapshot);
+          }
+        }
+        return { ok: true, applied };
+      })();
+      try {
+        return await running;
+      } catch (error) {
+        options.onError?.(error);
+        return { ok: false, applied: false, error };
+      } finally {
+        running = null;
+        if (!disposed && requested && timer === null) {
+          timer = schedule(() => {
+            timer = null;
+            void processRequests();
+          }, delay);
+        }
+      }
+    }
+
+    function request() {
+      if (disposed) return false;
+      requested = true;
+      if (timer !== null || running) return true;
+      timer = schedule(() => {
+        timer = null;
+        void processRequests();
+      }, delay);
+      return true;
+    }
+
+    async function flush() {
+      if (timer !== null) {
+        cancel(timer);
+        timer = null;
+      }
+      if (running) {
+        await running.catch(() => {});
+        if (!requested) return { ok: true, applied: false };
+      }
+      if (!requested || disposed) return { ok: true, applied: false };
+      return processRequests();
+    }
+
+    function dispose() {
+      disposed = true;
+      requested = false;
+      if (timer !== null) cancel(timer);
+      timer = null;
+    }
+
+    return Object.freeze({ request, flush, dispose });
+  }
+
+  return Object.freeze({ create });
+});

package/templates/mystery-v1/output-clue-card-layout.js

@@ -0,0 +1,46 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  root.WriterWorkbenchClueCardLayout = api;
+})(typeof globalThis !== "undefined" ? globalThis : window, function () {
+  "use strict";
+
+  const ROWS = 3;
+  const COLUMNS = 3;
+  const CARDS_PER_SHEET = ROWS * COLUMNS;
+
+  function normalizeGrid(value) {
+    const rows = Number.isInteger(value?.rows) && value.rows > 0 ? value.rows : ROWS;
+    const columns = Number.isInteger(value?.columns) && value.columns > 0 ? value.columns : COLUMNS;
+    return { rows, columns, cardsPerSheet: rows * columns };
+  }
+
+  function normalizeFlip(value) {
+    return value === "short" ? "short" : "long";
+  }
+
+  function mirrorSlots(values, flip = "long", grid) {
+    const { rows, columns, cardsPerSheet } = normalizeGrid(grid);
+    const slots = Array.from({ length: cardsPerSheet }, (_, index) => values?.[index] ?? null);
+    const normalizedFlip = normalizeFlip(flip);
+    return slots.map((_, slotIndex) => {
+      const row = Math.floor(slotIndex / columns);
+      const column = slotIndex % columns;
+      const sourceRow = normalizedFlip === "short" ? rows - 1 - row : row;
+      const sourceColumn = normalizedFlip === "long" ? columns - 1 - column : column;
+      return slots[sourceRow * columns + sourceColumn];
+    });
+  }
+
+  function sheets(values, grid) {
+    const { cardsPerSheet } = normalizeGrid(grid);
+    const items = Array.isArray(values) ? values : [];
+    const result = [];
+    for (let index = 0; index < items.length; index += cardsPerSheet) {
+      result.push(Array.from({ length: cardsPerSheet }, (_, offset) => items[index + offset] ?? null));
+    }
+    return result;
+  }
+
+  return Object.freeze({ ROWS, COLUMNS, CARDS_PER_SHEET, normalizeGrid, normalizeFlip, mirrorSlots, sheets });
+});

package/templates/mystery-v1/page-header.js

@@ -0,0 +1,26 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchPageHeader = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  function escapeHtml(value) {
+    return String(value ?? "")
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#39;");
+  }
+
+  function render(options = {}) {
+    const title = escapeHtml(options.title || "");
+    const description = escapeHtml(options.description || "");
+    const className = ["page-header", options.className].filter(Boolean).join(" ");
+    const metaMarkup = String(options.metaMarkup || "");
+    return `<header class="${escapeHtml(className)}"><div class="page-header-copy"><h2>${title}</h2>${description ? `<p>${description}</p>` : ""}</div>${metaMarkup ? `<div class="page-header-meta">${metaMarkup}</div>` : ""}</header>`;
+  }
+
+  return Object.freeze({ escapeHtml, render });
+});

package/templates/mystery-v1/render-ui-state.js

@@ -0,0 +1,76 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchRenderUiState = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  const IDENTITY_NAMES = Object.freeze([
+    "data-ui-scroll-key", "data-renderer-field", "data-component-json", "data-view-component-id", "data-preview-character-id", "data-component-id", "data-component-manager-tab",
+    "data-workspace-mode", "data-authoring-view", "data-component-manager-select", "data-progress-key"
+  ]);
+
+  function locator(element, root) {
+    const identityName = IDENTITY_NAMES.find(name => element.hasAttribute?.(name));
+    if (identityName) {
+      const attributes = { [identityName]: element.getAttribute(identityName) };
+      if (element.hasAttribute("data-component-kind")) attributes["data-component-kind"] = element.getAttribute("data-component-kind");
+      return { type: "attributes", tag: element.tagName, attributes };
+    }
+    if (element.id) return { type: "id", id: element.id };
+    const classes = [...(element.classList || [])].sort();
+    const candidates = [...root.querySelectorAll(element.tagName)].filter(candidate => classes.every(name => candidate.classList.contains(name)));
+    return { type: "structure", tag: element.tagName, classes, index: Math.max(0, candidates.indexOf(element)) };
+  }
+
+  function locate(root, target) {
+    if (!target) return null;
+    if (target.type === "id") return [...root.querySelectorAll("[id]")].find(element => element.id === target.id) || null;
+    if (target.type === "attributes") return [...root.querySelectorAll(target.tag)].find(element => Object.entries(target.attributes).every(([name, value]) => element.getAttribute(name) === value)) || null;
+    const candidates = [...root.querySelectorAll(target.tag)].filter(element => target.classes.every(name => element.classList.contains(name)));
+    return candidates[target.index] || null;
+  }
+
+  function captureFocus(element, main) {
+    if (!element || !main.contains(element)) return null;
+    return {
+      locator: locator(element, main),
+      selectionStart: typeof element.selectionStart === "number" ? element.selectionStart : null,
+      selectionEnd: typeof element.selectionEnd === "number" ? element.selectionEnd : null,
+      selectionDirection: element.selectionDirection || "none"
+    };
+  }
+
+  function capture(main, activeElement, viewport) {
+    const scroll = [{ root: true, top: main.scrollTop, left: main.scrollLeft }];
+    main.querySelectorAll("*").forEach(element => {
+      if (element.scrollTop || element.scrollLeft) scroll.push({ locator: locator(element, main), top: element.scrollTop, left: element.scrollLeft });
+    });
+    const disclosures = [...main.querySelectorAll("details")].map(element => ({ locator: locator(element, main), open: element.open }));
+    return { viewport, scroll, focus: captureFocus(activeElement, main), disclosures };
+  }
+
+  function restore(main, state, options = {}) {
+    if (!state) return;
+    state.disclosures?.forEach(item => {
+      const element = locate(main, item.locator);
+      if (element) element.open = item.open;
+    });
+    state.scroll?.forEach(item => {
+      const element = item.root ? main : locate(main, item.locator);
+      if (!element) return;
+      element.scrollTop = item.top;
+      element.scrollLeft = item.left;
+    });
+    if (options.focus !== false && state.focus) {
+      const element = locate(main, state.focus.locator);
+      element?.focus?.({ preventScroll: true });
+      if (element && state.focus.selectionStart !== null && typeof element.setSelectionRange === "function") {
+        element.setSelectionRange(state.focus.selectionStart, state.focus.selectionEnd, state.focus.selectionDirection);
+      }
+    }
+    options.scrollTo?.(state.viewport);
+  }
+
+  return Object.freeze({ locator, locate, captureFocus, capture, restore });
+});

package/templates/mystery-v1/runtime-snapshot-reconciler.js

@@ -0,0 +1,40 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchRuntimeSnapshotReconciler = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  function validate(snapshot) {
+    if (!snapshot?.project || !Array.isArray(snapshot.dataComponents) || !Array.isArray(snapshot.viewComponents)) {
+      throw new Error("Runtime snapshot 계약이 완전하지 않습니다.");
+    }
+    return snapshot;
+  }
+
+  function updateRecord(current, next, clone) {
+    const replacement = clone(next);
+    Object.keys(current).forEach(key => { delete current[key]; });
+    Object.assign(current, replacement);
+    return current;
+  }
+
+  function reconcile(snapshot, currentActiveComponents, clone) {
+    const next = validate(snapshot);
+    if (!Array.isArray(currentActiveComponents) || typeof clone !== "function") {
+      throw new Error("Runtime snapshot reconciliation 의존성이 완전하지 않습니다.");
+    }
+    const currentById = new Map(currentActiveComponents.map(instance => [instance.instanceId, instance]));
+    const activeComponents = next.dataComponents
+      .filter(instance => instance.enabled && !instance.archived)
+      .map(instance => {
+        const current = currentById.get(instance.instanceId);
+        return current ? updateRecord(current, instance, clone) : clone(instance);
+      });
+    const activeViewComponents = next.viewComponents.filter(instance => instance.enabled).map(instance => clone(instance));
+    const archivedComponents = (Array.isArray(next.archivedDataComponents) ? next.archivedDataComponents : []).map(instance => clone(instance));
+    return Object.freeze({ activeComponents, activeViewComponents, archivedComponents });
+  }
+
+  return Object.freeze({ validate, updateRecord, reconcile });
+});

package/templates/mystery-v1/tab-bar.js

@@ -0,0 +1,87 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchTabBar = api;
+})(typeof window !== "undefined" ? window : globalThis, function () {
+  "use strict";
+
+  const VARIANTS = new Set(["primary", "secondary"]);
+
+  function normalizeCount(value) {
+    const count = Number(value);
+    return Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
+  }
+
+  function bindKeyboardNavigation(container) {
+    container.onkeydown = event => {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      const tabs = [...container.querySelectorAll('[role="tab"]')];
+      const currentIndex = tabs.indexOf(event.target.closest?.('[role="tab"]'));
+      if (currentIndex < 0 || tabs.length < 2) return;
+      event.preventDefault();
+      let nextIndex = currentIndex;
+      if (event.key === "Home") nextIndex = 0;
+      else if (event.key === "End") nextIndex = tabs.length - 1;
+      else if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      else if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
+      tabs[nextIndex].focus();
+      tabs[nextIndex].click();
+    };
+  }
+
+  function revealActiveTab(container) {
+    const active = container.querySelector('[role="tab"][aria-selected="true"]');
+    if (!active) return;
+    const reveal = () => active.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(reveal);
+    else reveal();
+  }
+
+  function render(container, tabs, options = {}) {
+    if (!container || typeof container.replaceChildren !== "function") {
+      throw new TypeError("TabBar 컨테이너가 필요합니다.");
+    }
+    const variant = VARIANTS.has(options.variant) ? options.variant : "primary";
+    container.classList.add("tab-bar");
+    container.classList.toggle("tab-bar-primary", variant === "primary");
+    container.classList.toggle("tab-bar-secondary", variant === "secondary");
+    container.dataset.tabBarVariant = variant;
+    container.setAttribute("role", "tablist");
+    if (options.ariaLabel) container.setAttribute("aria-label", String(options.ariaLabel));
+
+    const fragment = document.createDocumentFragment();
+    (Array.isArray(tabs) ? tabs : []).forEach(tab => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.setAttribute("role", "tab");
+      button.setAttribute("aria-selected", String(Boolean(tab.active)));
+      button.setAttribute("aria-pressed", String(Boolean(tab.active)));
+      button.tabIndex = tab.active ? 0 : -1;
+      if (tab.ariaLabel) button.setAttribute("aria-label", String(tab.ariaLabel));
+      if (tab.active) button.classList.add("is-active");
+      Object.entries(tab.attributes || {}).forEach(([name, value]) => {
+        if (value !== undefined && value !== null) button.setAttribute(name, String(value));
+      });
+
+      const label = document.createElement("span");
+      label.textContent = String(tab.label || "");
+      button.append(label);
+
+      const count = normalizeCount(tab.count);
+      if (count) {
+        const badge = document.createElement("span");
+        badge.className = "nav-count";
+        badge.setAttribute("aria-hidden", "true");
+        badge.textContent = String(count);
+        button.append(badge);
+      }
+      fragment.append(button);
+    });
+    container.replaceChildren(fragment);
+    bindKeyboardNavigation(container);
+    revealActiveTab(container);
+    return container;
+  }
+
+  return Object.freeze({ render });
+});

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

@@ -0,0 +1,152 @@
+(function (root, factory) {
+  let registryModule = root && root.WriterWorkbenchViewComponentRegistry;
+  if (typeof module === "object" && module.exports) registryModule = require("./view-component-registry.js");
+  const api = factory(registryModule);
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchViewComponentContract = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (registryModule) {
+  "use strict";
+
+  if (!registryModule) throw new Error("WriterWorkbenchViewComponentRegistry is required");
+
+  const ID_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+  const TEMPLATE_PATTERN = /^[a-z0-9]+(?:[.-][a-z0-9]+)*$/;
+  const MODES = Object.freeze(["authoring", "preview", "validation"]);
+  const ACCESS_MODES = Object.freeze(["read", "read_write"]);
+  const REMOVED_VERSION_FIELDS = Object.freeze(["view_template_version", "templateVersion"]);
+
+  function clone(value) {
+    if (typeof structuredClone === "function") return structuredClone(value);
+    return JSON.parse(JSON.stringify(value));
+  }
+
+  function isObject(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  }
+
+  function positiveInteger(value) {
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number > 0 ? number : null;
+  }
+
+  function nonNegativeInteger(value) {
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number >= 0 ? number : null;
+  }
+
+  function invalid(message) {
+    const error = new Error(message);
+    error.code = "SOMI_VIEW_COMPONENT_INVALID";
+    throw error;
+  }
+
+  function normalizeView(row, registry) {
+    if (!isObject(row)) invalid("View Component 행이 객체가 아닙니다.");
+    if (REMOVED_VERSION_FIELDS.some(field => Object.hasOwn(row, field))) invalid("View Component에 제거된 version 필드가 포함되어 있습니다.");
+    const viewInstanceId = String(row.view_instance_id || "");
+    const templateId = String(row.view_template_id || "");
+    const rendererId = String(row.renderer_id || "");
+    const label = String(row.label || "").trim();
+    const order = nonNegativeInteger(row.sort_order);
+    const revision = positiveInteger(row.revision);
+    const modes = Array.isArray(row.supported_modes) ? [...new Set(row.supported_modes.map(String))] : [];
+    if (!ID_PATTERN.test(viewInstanceId)) invalid(`View Component ID가 올바르지 않습니다: ${viewInstanceId || "(비어 있음)"}`);
+    if (!TEMPLATE_PATTERN.test(templateId)) invalid(`${viewInstanceId}의 View Template 식별자가 올바르지 않습니다.`);
+    if (!TEMPLATE_PATTERN.test(rendererId)) invalid(`${viewInstanceId}의 renderer_id가 올바르지 않습니다.`);
+    if (!label || label.length > 120 || order === null || revision === null) invalid(`${viewInstanceId}의 View Component 메타데이터가 올바르지 않습니다.`);
+    if (!modes.length || modes.some(mode => !MODES.includes(mode))) invalid(`${viewInstanceId}의 지원 Mode가 올바르지 않습니다.`);
+    if (!isObject(row.config)) invalid(`${viewInstanceId}의 View config는 객체여야 합니다.`);
+    const definition = registry.get(templateId);
+    if (!definition) invalid(`지원하지 않는 View Component입니다: ${templateId}`);
+    if (definition.rendererId !== rendererId) invalid(`${viewInstanceId}의 renderer_id가 View Template 계약과 다릅니다.`);
+    if (modes.length !== definition.supportedModes.length || modes.some(mode => !definition.supportedModes.includes(mode))) {
+      invalid(`${viewInstanceId}의 지원 Mode가 View Template 계약과 다릅니다.`);
+    }
+    return {
+      viewInstanceId,
+      templateId,
+      label,
+      description: String(row.description || ""),
+      rendererId,
+      modes,
+      order,
+      enabled: row.is_enabled === true,
+      config: clone(row.config),
+      revision,
+      bindings: [],
+      definition
+    };
+  }
+
+  function normalizeBinding(row) {
+    if (!isObject(row)) invalid("View Component binding 행이 객체가 아닙니다.");
+    const viewInstanceId = String(row.view_instance_id || "");
+    const key = String(row.binding_key || "");
+    const dataInstanceId = String(row.data_instance_id || "");
+    const accessMode = String(row.access_mode || "");
+    const order = nonNegativeInteger(row.sort_order);
+    if (!ID_PATTERN.test(viewInstanceId) || !ID_PATTERN.test(key) || !ID_PATTERN.test(dataInstanceId)) invalid("View Component binding 식별자가 올바르지 않습니다.");
+    if (!ACCESS_MODES.includes(accessMode) || order === null) invalid(`${viewInstanceId}.${key} binding 계약이 올바르지 않습니다.`);
+    return { viewInstanceId, key, dataInstanceId, accessMode, required: row.is_required === true, order };
+  }
+
+  function normalizeProjectViews(viewRows, bindingRows, dataComponents, customRegistry = null) {
+    const registry = customRegistry || registryModule.createDefaultRegistry();
+    const dataById = new Map((Array.isArray(dataComponents) ? dataComponents : []).map(item => [item.instanceId, item]));
+    const views = (Array.isArray(viewRows) ? viewRows : []).map(row => normalizeView(row, registry));
+    const byId = new Map();
+    const orders = new Set();
+    views.forEach(view => {
+      if (byId.has(view.viewInstanceId)) invalid(`중복 View Component입니다: ${view.viewInstanceId}`);
+      if (orders.has(view.order)) invalid(`중복 View Component 순서입니다: ${view.order}`);
+      byId.set(view.viewInstanceId, view);
+      orders.add(view.order);
+    });
+    (Array.isArray(bindingRows) ? bindingRows : []).map(normalizeBinding).forEach(bindingRow => {
+      const view = byId.get(bindingRow.viewInstanceId);
+      if (!view) invalid(`${bindingRow.viewInstanceId} binding에 대응하는 View Component가 없습니다.`);
+      const dataComponent = dataById.get(bindingRow.dataInstanceId);
+      if (!dataComponent || dataComponent.enabled !== true || dataComponent.archived === true) {
+        invalid(`${view.viewInstanceId}.${bindingRow.key}가 활성 Data Component를 가리키지 않습니다.`);
+      }
+      const slot = view.definition.bindings.find(item => item.key === bindingRow.key);
+      if (!slot) invalid(`${view.viewInstanceId}.${bindingRow.key}는 등록되지 않은 binding입니다.`);
+      if (slot.dataTemplateId !== dataComponent.templateId || slot.accessMode !== bindingRow.accessMode || slot.required !== bindingRow.required) {
+        invalid(`${view.viewInstanceId}.${bindingRow.key}가 View Template binding 계약과 다릅니다.`);
+      }
+      view.bindings.push({ ...bindingRow, dataTemplateId: dataComponent.templateId, dataLabel: dataComponent.tab });
+    });
+    views.forEach(view => {
+      view.definition.bindings.filter(item => item.required).forEach(slot => {
+        if (!view.bindings.some(item => item.key === slot.key)) invalid(`${view.viewInstanceId}에 필수 binding '${slot.key}'가 없습니다.`);
+      });
+      view.bindings.sort((left, right) => left.order - right.order);
+      delete view.definition;
+    });
+    const enabledViews = views.filter(view => view.enabled);
+    for (const mode of ["authoring", "preview"]) {
+      if (!enabledViews.some(view => view.modes.includes(mode))) invalid(`${mode} Mode에 사용할 활성 View Component가 없습니다.`);
+    }
+    const visibleData = [...dataById.values()].filter(instance => instance.enabled === true
+      && instance.archived !== true
+      && instance.config?.hidden !== true);
+    for (const dataComponent of visibleData) {
+      const ownerViews = enabledViews.filter(view => view.rendererId === dataComponent.templateId
+        && view.bindings.some(binding => binding.key === "primary"
+          && binding.dataInstanceId === dataComponent.instanceId
+          && binding.accessMode === "read_write"));
+      if (!ownerViews.length) invalid(`${dataComponent.instanceId} Data Component를 표시·수정할 활성 View Component가 없습니다.`);
+    }
+    return views.sort((left, right) => left.order - right.order);
+  }
+
+  function validateProjectViews(viewRows, bindingRows, dataComponents, registry = null) {
+    try {
+      return { ok: true, views: normalizeProjectViews(viewRows, bindingRows, dataComponents, registry), error: null };
+    } catch (error) {
+      return { ok: false, views: [], error };
+    }
+  }
+
+  return Object.freeze({ MODES, ACCESS_MODES, normalizeProjectViews, validateProjectViews });
+});

package/templates/mystery-v1/view-component-registry.js

@@ -0,0 +1,44 @@
+(function (root, factory) {
+  let catalogContract = root && root.WriterWorkbenchComponentCatalogContract;
+  if (typeof module === "object" && module.exports) catalogContract = require("./component-catalog-contract.js");
+  const api = factory(catalogContract);
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchViewComponentRegistry = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (catalogContract) {
+  "use strict";
+  if (!catalogContract) throw new Error("WriterWorkbenchComponentCatalogContract is required");
+
+  const VIEW_TEMPLATES = Object.freeze(catalogContract.list()
+    .filter(descriptor => descriptor.view)
+    .map(descriptor => definition(
+      descriptor.view.templateId,
+      descriptor.view.label,
+      descriptor.view.rendererId,
+      descriptor.view.bindings.map(item => binding(item.key, item.dataTemplateId, item.accessMode, item.required)),
+      descriptor.view.supportedModes
+    )));
+
+  function binding(key, dataTemplateId, accessMode, required = true) {
+    return Object.freeze({ key, dataTemplateId, accessMode, required });
+  }
+
+  function definition(templateId, label, rendererId, bindings, supportedModes = ["authoring", "preview"]) {
+    return Object.freeze({
+      templateId,
+      label,
+      rendererId,
+      supportedModes: Object.freeze([...supportedModes]),
+      bindings: Object.freeze(bindings)
+    });
+  }
+
+  function createDefaultRegistry() {
+    const definitions = new Map(VIEW_TEMPLATES.map(item => [item.templateId, item]));
+    return Object.freeze({
+      get: templateId => definitions.get(String(templateId || "")) || null,
+      list: () => [...definitions.values()]
+    });
+  }
+
+  return Object.freeze({ VIEW_TEMPLATES, createDefaultRegistry });
+});

package/templates/mystery-v1/view-component-runtime.js

@@ -0,0 +1,95 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchViewComponentRuntime = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  const WORKBENCH_MODES = Object.freeze(["authoring", "preview"]);
+
+  function invalid(message) {
+    const error = new Error(message);
+    error.code = "SOMI_VIEW_RUNTIME_INVALID";
+    throw error;
+  }
+
+  function immutableClone(value) {
+    const clone = value === undefined ? undefined : JSON.parse(JSON.stringify(value));
+    function freezeDeep(next) {
+      if (!next || typeof next !== "object" || Object.isFrozen(next)) return next;
+      Object.values(next).forEach(freezeDeep);
+      return Object.freeze(next);
+    }
+    return freezeDeep(clone);
+  }
+
+  function create(viewComponents, dataComponents) {
+    if (!Array.isArray(viewComponents) || !Array.isArray(dataComponents)) {
+      invalid("View 런타임 입력이 올바르지 않습니다.");
+    }
+    const dataById = new Map(dataComponents.map(instance => [instance.instanceId, instance]));
+    const views = viewComponents.filter(view => view?.enabled === true).sort((left, right) => left.order - right.order);
+    const viewById = new Map(views.map(view => [view.viewInstanceId, view]));
+
+    function bindings(viewOrId, dataResolver = instance => instance.data) {
+      const view = typeof viewOrId === "string" ? viewById.get(viewOrId) : viewOrId;
+      if (!view || !viewById.has(view.viewInstanceId)) invalid("활성 View Component를 찾을 수 없습니다.");
+      const records = {};
+      for (const binding of view.bindings || []) {
+        const instance = dataById.get(binding.dataInstanceId);
+        if (!instance) invalid(`${view.viewInstanceId}.${binding.key} Data Component를 찾을 수 없습니다.`);
+        const writable = binding.accessMode === "read_write";
+        const resolvedData = dataResolver(instance, binding);
+        records[binding.key] = Object.freeze({
+          binding,
+          instance,
+          data: writable ? resolvedData : immutableClone(resolvedData),
+          accessMode: binding.accessMode,
+          writable
+        });
+      }
+      const primary = records.primary;
+      if (!primary) invalid(`${view.viewInstanceId}에 primary binding이 없습니다.`);
+      if (view.rendererId !== primary.instance.templateId) {
+        invalid(`${view.viewInstanceId} renderer와 primary Data Component가 일치하지 않습니다.`);
+      }
+      return Object.freeze({ view, primary, bindings: Object.freeze(records) });
+    }
+
+    function list(mode) {
+      if (!WORKBENCH_MODES.includes(mode)) return [];
+      return views.filter(view => Array.isArray(view.modes) && view.modes.includes(mode));
+    }
+
+    function find(mode, requestedId) {
+      const candidates = list(mode);
+      const requested = String(requestedId || "");
+      if (!requested) return candidates[0] || null;
+      return candidates.find(view => view.viewInstanceId === requested)
+        || candidates.find(view => bindings(view).primary.instance.instanceId === requested)
+        || null;
+    }
+
+    function primary(viewOrId) {
+      return bindings(viewOrId).primary.instance;
+    }
+
+    function tabLabel(viewOrId) {
+      return String(primary(viewOrId).tab || bindings(viewOrId).view.label || "");
+    }
+
+    function writableInstanceIds() {
+      const ids = new Set();
+      for (const view of views) {
+        for (const record of Object.values(bindings(view).bindings)) {
+          if (record.writable && record.instance.templateId !== "ssobig.assets") ids.add(record.instance.instanceId);
+        }
+      }
+      return [...ids];
+    }
+
+    return Object.freeze({ views: Object.freeze(views), list, find, bindings, primary, tabLabel, writableInstanceIds });
+  }
+
+  return Object.freeze({ WORKBENCH_MODES, create });
+});