@ssobig/writer-cli 0.2.0

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

@@ -0,0 +1,396 @@
+(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.WriterWorkbenchComponentManager = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (pageHeader) {
+  "use strict";
+
+  function escapeHtml(value) {
+    return String(value ?? "")
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#39;");
+  }
+
+  function prettyJson(value) {
+    try {
+      return JSON.stringify(value ?? null, null, 2);
+    } catch (error) {
+      return JSON.stringify({ error: "JSON으로 표시할 수 없습니다.", message: error.message }, null, 2);
+    }
+  }
+
+  function inferJsonSchema(value, depth = 0) {
+    if (depth > 5) return { type: "unknown" };
+    if (value === null) return { type: "null" };
+    if (Array.isArray(value)) return { type: "array", items: value.length ? inferJsonSchema(value[0], depth + 1) : { type: "unknown" } };
+    if (typeof value === "object") return { type: "object", properties: Object.fromEntries(Object.entries(value).map(([key, item]) => [key, inferJsonSchema(item, depth + 1)])) };
+    return { type: typeof value };
+  }
+
+  function dataTemplateName(template) {
+    return String(template?.name || template?.label || "알 수 없는 Data Component");
+  }
+
+  const IMAGE_ASSET_ACCEPT = "image/jpeg,image/png,image/webp,image/gif";
+  const GENERAL_ASSET_ACCEPT = `${IMAGE_ASSET_ACCEPT},application/json`;
+  const SUPPORTED_ASSET_MIME_TYPES = new Set(GENERAL_ASSET_ACCEPT.split(","));
+  const FUNCTION_DISPLAY_ORDER = new Map([
+    ["ssobig.basic", 0], ["ssobig.progress", 1], ["ssobig.common", 2], ["ssobig.character", 3],
+    ["ssobig.timeline", 4], ["ssobig.clues", 5], ["ssobig.clue-combinations", 6],
+    ["ssobig.ai-response", 7], ["ssobig.choice", 8], ["ssobig.ending", 9], ["ssobig.postgame", 10],
+    ["ssobig.author-notes", 11], ["ssobig.investigation-board", 12], ["ssobig.documents", 13]
+  ]);
+  const DEFAULT_ASSET_SLOTS = Object.freeze([
+    Object.freeze({ id: "poster", label: "포스터 이미지", accept: IMAGE_ASSET_ACCEPT }),
+    Object.freeze({ id: "logo", label: "로고 이미지", accept: IMAGE_ASSET_ACCEPT }),
+    Object.freeze({ id: "workspace-background", label: "워크벤치 배경", accept: IMAGE_ASSET_ACCEPT })
+  ]);
+
+  function formatFileSize(value) {
+    const size = Number(value);
+    if (!Number.isFinite(size) || size < 0) return "크기 정보 없음";
+    if (size < 1024) return `${size} B`;
+    if (size < 1024 ** 2) return `${(size / 1024).toFixed(size < 10 * 1024 ? 1 : 0)} KB`;
+    if (size < 1024 ** 3) return `${(size / 1024 ** 2).toFixed(size < 10 * 1024 ** 2 ? 1 : 0)} MB`;
+    return `${(size / 1024 ** 3).toFixed(1)} GB`;
+  }
+
+  function functionDisplayOrder(templateId) {
+    return FUNCTION_DISPLAY_ORDER.get(String(templateId || "")) ?? 1000;
+  }
+
+  function assetKind(entry) {
+    const type = String(entry?.type || "").toLowerCase();
+    if (["image/jpeg", "image/png", "image/webp", "image/gif"].includes(type)) return "image";
+    if (type === "application/json") return "json";
+    return entry ? "unsupported" : "empty";
+  }
+
+  function assetFormatLabel(entry) {
+    const type = String(entry?.type || "").toLowerCase();
+    if (type === "image/jpeg") return "JPEG";
+    if (type === "image/png") return "PNG";
+    if (type === "image/webp") return "WEBP";
+    if (type === "image/gif") return "GIF";
+    if (type === "application/json") return "JSON";
+    return "FILE";
+  }
+
+  function isReservedImageAssetId(assetId) {
+    const id = String(assetId || "");
+    return DEFAULT_ASSET_SLOTS.some(slot => slot.id === id) || id.startsWith("character-") || id.startsWith("clue-image-");
+  }
+
+  function isSupportedAssetEntry(entry, assetId = "") {
+    const type = String(entry?.type || "").toLowerCase();
+    return Boolean(entry?.path && !entry.deleted && SUPPORTED_ASSET_MIME_TYPES.has(type) && (!isReservedImageAssetId(assetId) || assetKind(entry) === "image"));
+  }
+
+  function assetPreviewMarkup(assetId, entry) {
+    if (!entry) return `<span class="component-asset-placeholder">선택된 파일 없음</span>`;
+    const kind = assetKind(entry);
+    if (kind === "image") return `<img data-component-asset="${escapeHtml(assetId)}" alt="${escapeHtml(entry.name || assetId)} 미리보기">`;
+    return `<a class="component-asset-file-link" data-component-asset-link="${escapeHtml(assetId)}" target="_blank" rel="noopener"><span aria-hidden="true">↗</span><strong>파일 열기</strong></a>`;
+  }
+
+  function assetUsageMarkup(usages) {
+    const items = Array.isArray(usages) ? usages.filter(Boolean) : [];
+    if (!items.length) return "";
+    return items.map(usage => `<span>${escapeHtml(usage)}</span>`).join("");
+  }
+
+  function assetCardMarkup(definition, entry, usages) {
+    const assetId = definition.id;
+    const uploaded = isSupportedAssetEntry(entry, assetId);
+    const imageSlot = isReservedImageAssetId(assetId);
+    const updatedAt = Number.isSafeInteger(entry?.updatedAt) ? new Date(entry.updatedAt).toLocaleString("ko-KR") : "";
+    const accept = definition.accept || (isReservedImageAssetId(assetId) ? IMAGE_ASSET_ACCEPT : GENERAL_ASSET_ACCEPT);
+    const usageMarkup = assetUsageMarkup(usages);
+    return `<article class="component-asset-card${uploaded ? " has-file" : " is-empty"}${imageSlot ? " is-image-slot" : ""}" data-component-asset-card="${escapeHtml(assetId)}">
+      <div class="component-asset-media">
+        <div class="component-asset-preview" data-component-asset-kind="${escapeHtml(assetKind(entry))}" data-component-asset-mime="${escapeHtml(uploaded ? entry.type : "")}">${assetPreviewMarkup(assetId, uploaded ? entry : null)}</div>
+      </div>
+      <div class="component-asset-info">
+        <div class="component-asset-title-row">
+          <div class="component-asset-title-tags">
+            ${uploaded ? `<em class="component-asset-format">${escapeHtml(assetFormatLabel(entry))}</em>` : ""}
+            ${usageMarkup ? `<div class="component-asset-usages" aria-label="사용처">${usageMarkup}</div>` : ""}
+          </div>
+        </div>
+        <strong class="component-asset-file-name" data-component-asset-name="${escapeHtml(assetId)}">${escapeHtml(uploaded ? entry.name : "선택된 파일 없음")}</strong>
+        <div class="component-asset-card-head">
+          <code>${escapeHtml(assetId)}</code>
+        </div>
+        <p class="component-asset-meta">${uploaded ? `${escapeHtml(entry.type)} · ${escapeHtml(formatFileSize(entry.size))}${updatedAt ? ` · ${escapeHtml(updatedAt)}` : ""}` : "이 슬롯에 파일을 연결할 수 있습니다."}</p>
+        <div class="component-asset-path"><span>Storage 경로</span><code>${escapeHtml(uploaded ? entry.path : "연결된 경로 없음")}</code></div>
+      </div>
+      <div class="component-asset-actions">
+        <label><span>${uploaded ? "파일 교체" : "파일 선택"}</span><input type="file" accept="${escapeHtml(accept)}" data-manager-asset-upload="${escapeHtml(assetId)}"></label>
+        <button type="button" data-manager-asset-delete="${escapeHtml(assetId)}"${uploaded ? "" : " disabled"}>연결 해제</button>
+      </div>
+    </article>`;
+  }
+
+  function assetLibraryMarkup(instance, options = {}) {
+    const manifest = options.assetManifest?.assets && typeof options.assetManifest.assets === "object" ? options.assetManifest : instance.data;
+    const entries = manifest?.assets && typeof manifest.assets === "object" ? manifest.assets : {};
+    const slotById = new Map(DEFAULT_ASSET_SLOTS.map(slot => [slot.id, slot]));
+    const activeEntries = Object.entries(entries).filter(([assetId, entry]) => isSupportedAssetEntry(entry, assetId));
+    const ids = [...DEFAULT_ASSET_SLOTS.map(slot => slot.id), ...activeEntries.map(([assetId]) => assetId).filter(assetId => !slotById.has(assetId)).sort()];
+    const usages = options.assetUsages && typeof options.assetUsages === "object" ? options.assetUsages : {};
+    const cards = ids.map(assetId => {
+      const entry = isSupportedAssetEntry(entries[assetId], assetId) ? entries[assetId] : null;
+      const definition = slotById.get(assetId) || { id: assetId, label: entry?.name || assetId };
+      return assetCardMarkup(definition, entry, usages[assetId]);
+    }).join("");
+    return `<section class="component-asset-library" data-component-asset-library>
+      <div class="component-asset-grid">${cards}</div>
+    </section>`;
+  }
+
+  function definitionListMarkup(items) {
+    return `<dl class="component-manager-definition-list">${items.map(([label, value]) => `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`).join("")}</dl>`;
+  }
+
+  function relatedViewMarkup(viewComponents) {
+    const labels = viewComponents.map(view => {
+      const compactLabel = String(view.label || "").replace(/\s*작업\s*화면\s*$/u, "").trim() || "연결 화면";
+      return compactLabel;
+    });
+    return `<span class="component-manager-related-list" title="${escapeHtml(labels.join(", ") || "연결된 화면 없음")}">${escapeHtml(labels.join(", ") || "연결된 화면 없음")}</span>`;
+  }
+
+  function technicalDetailsMarkup(items) {
+    return `<dl class="component-manager-card-details">${items.map(([label, value]) => `<div><dt>${escapeHtml(label)} :</dt><dd title="${escapeHtml(value)}">${escapeHtml(value)}</dd></div>`).join("")}</dl>`;
+  }
+
+  function primaryView(instance, viewComponents) {
+    return viewComponents.find(view => view.enabled && view.bindings.some(binding => binding.key === "primary" && binding.dataInstanceId === instance.instanceId)) || null;
+  }
+
+  function fieldConfigurationMarkup(instance, template, busy) {
+    const fields = Array.isArray(template?.fieldConfiguration) ? template.fieldConfiguration : [];
+    if (!fields.length) return "";
+    const hasSelection = Array.isArray(instance.data?.enabledOptionalFields);
+    const enabled = new Set(hasSelection ? instance.data.enabledOptionalFields : []);
+    const controls = fields.map(field => {
+      const required = field.required === true;
+      const checked = required || !hasSelection || enabled.has(field.key);
+      return `<label class="component-field-option${required ? " is-required" : ""}">
+        <span class="component-field-option-copy"><strong>${escapeHtml(field.label)}</strong><small>${escapeHtml(field.description)}</small></span>
+        <span class="component-field-option-control">${required ? `<em>필수</em>` : `<input type="checkbox" data-component-field-toggle data-component-instance="${escapeHtml(instance.instanceId)}" data-component-field="${escapeHtml(field.key)}"${checked ? " checked" : ""}${busy ? " disabled" : ""}><span aria-hidden="true"></span><em>${checked ? "사용" : "사용 안 함"}</em>`}</span>
+      </label>`;
+    }).join("");
+    return `<section class="component-field-configuration" data-component-field-configuration="${escapeHtml(instance.instanceId)}">
+      <header><div><h4>속성 구성</h4><p>필수 속성은 항상 표시됩니다. 선택 속성을 끄면 기존 값은 보존한 채 제작하기와 미리보기에서 숨깁니다.</p></div><span>필수 ${fields.filter(field => field.required).length} · 선택 ${fields.filter(field => !field.required).length}</span></header>
+      <div class="component-field-option-list">${controls}</div>
+      <p class="component-field-status" data-component-field-status="${escapeHtml(instance.instanceId)}" data-state="idle" aria-live="polite"></p>
+    </section>`;
+  }
+
+  function catalogEntryId(entry) {
+    return String(entry?.instance?.instanceId || entry?.template?.defaultInstanceId || entry?.template?.templateId || "");
+  }
+
+  function componentRow(instance, template, viewComponents, busy, selectedId) {
+    const required = instance.required || template?.required;
+    const selected = selectedId === instance.instanceId;
+    const view = primaryView(instance, viewComponents);
+    return `<article class="component-manager-row is-active${required ? " is-required" : ""}${selected ? " is-selected" : ""}" data-component-row="${escapeHtml(instance.instanceId)}" data-component-state="active" data-component-manager-select="${escapeHtml(instance.instanceId)}" data-component-kind="data" role="button" tabindex="0" aria-pressed="${selected}">
+      <div class="component-manager-card-body">
+        <span class="component-manager-row-title">
+          <strong>${escapeHtml(instance.tab || instance.instanceId)}</strong>
+          <span class="component-manager-card-status">
+            ${required ? `<span class="component-manager-required-badge">필수</span>` : `<button class="component-manager-toggle is-on" type="button" role="switch" aria-checked="true" aria-label="${escapeHtml(instance.tab)} 사용 해제" data-component-action="archive" data-component-template="${escapeHtml(instance.templateId)}" data-component-instance="${escapeHtml(instance.instanceId)}" data-component-label="${escapeHtml(instance.tab)}"${busy ? " disabled" : ""}><em>사용 중</em><span aria-hidden="true"></span></button>`}
+          </span>
+        </span>
+        <span class="component-manager-row-template">${escapeHtml(template?.description || "작품에서 사용하는 기능입니다.")}</span>
+      </div>
+      ${view ? `<div class="component-manager-row-actions"><button class="component-manager-open" type="button" data-component-action="open-authoring" data-component-instance="${escapeHtml(instance.instanceId)}"${busy ? " disabled" : ""}><span>작업 바로가기</span><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 11 11 5M6 5h5v5"/></svg></button></div>` : ""}
+    </article>`;
+  }
+
+  function inactiveComponentRow(instance, template, busy, selectedId) {
+    const isArchived = Boolean(instance);
+    const label = instance?.tab || template?.name || instance?.instanceId || "기능";
+    const action = isArchived ? "restore" : "add";
+    const instanceId = instance?.instanceId || template?.defaultInstanceId || template?.templateId;
+    const templateId = instance?.templateId || template?.templateId;
+    const selected = selectedId === instanceId;
+    return `<article class="component-manager-row is-inactive${selected ? " is-selected" : ""}" data-component-row="${escapeHtml(instanceId)}" data-component-state="inactive" data-component-manager-select="${escapeHtml(instanceId)}" data-component-kind="data" role="button" tabindex="0" aria-pressed="${selected}">
+      <div class="component-manager-card-body">
+        <span class="component-manager-row-title">
+          <strong>${escapeHtml(label)}</strong>
+          <span class="component-manager-card-status">
+            <button class="component-manager-toggle" type="button" role="switch" aria-checked="false" aria-label="${escapeHtml(label)} 사용" data-component-action="${action}" data-component-template="${escapeHtml(templateId)}" data-component-instance="${escapeHtml(instanceId)}" data-component-label="${escapeHtml(label)}"${busy ? " disabled" : ""}><em>사용 안 함</em><span aria-hidden="true"></span></button>
+          </span>
+        </span>
+        <span class="component-manager-row-template">${escapeHtml(template?.description || "작품에서 사용할 수 있는 기능입니다.")}</span>
+      </div>
+    </article>`;
+  }
+
+  function componentInspector(entry, viewComponents, busy) {
+    if (!entry) return `<aside class="component-manager-inspector is-empty" data-component-manager-detail tabindex="-1">
+      <div class="component-manager-inspector-empty-guide">
+        <strong>세부 설정</strong>
+        <p>기능 카드를 클릭하면 세부 설정을 확인하고 변경할 수 있습니다.</p>
+      </div>
+    </aside>`;
+    const active = entry.kind === "active";
+    const instance = entry.instance;
+    const template = entry.template;
+    const instanceId = catalogEntryId(entry);
+    const templateId = instance?.templateId || template?.templateId || "";
+    const label = instance?.tab || template?.name || instanceId || "기능";
+    const description = template?.description || (active ? "작품에서 사용하는 기능입니다." : "작품에서 사용할 수 있는 기능입니다.");
+    const relatedViews = active ? viewComponents.filter(candidate => candidate.bindings.some(binding => binding.dataInstanceId === instanceId)) : [];
+    const view = active ? primaryView(instance, viewComponents) : null;
+    const required = Boolean(instance?.required || template?.required);
+    const technicalItems = active ? [
+      ["Instance ID", instanceId],
+      ["Data Template", templateId],
+      ["Revision", instance.revision],
+      ["DB 원본", "somi_project_component_instances.data"]
+    ] : [
+      ["Instance ID", instanceId],
+      ["Data Template", templateId],
+      ["상태", instance ? "작성한 내용 보관 중" : "아직 사용하지 않음"],
+      ["DB 원본", instance ? "somi_project_component_instances.data" : "생성 전"]
+    ];
+    return `<aside class="component-manager-inspector${active ? " is-active" : " is-inactive"}" data-component-manager-detail="${escapeHtml(instanceId)}" tabindex="-1">
+      <header class="component-manager-inspector-head">
+        <div><span class="component-kind-chip">${required ? "필수 기능" : active ? "사용 중" : "사용 안 함"}</span><h3>${escapeHtml(label)}</h3><p>${escapeHtml(description)}</p></div>
+      </header>
+      <section class="component-manager-inspector-related">
+        <strong>사용 위치</strong>
+        ${relatedViewMarkup(relatedViews)}
+      </section>
+      <details class="component-manager-data-details">
+        <summary>데이터 정보</summary>
+        ${technicalDetailsMarkup(technicalItems)}
+      </details>
+      ${active ? fieldConfigurationMarkup(instance, template, busy) : `<p class="component-manager-inspector-note">이 기능을 사용으로 전환하면 속성 구성과 작업 화면을 확인할 수 있습니다.</p>`}
+    </aside>`;
+  }
+
+  function addTemplateCard(template, busy) {
+    if (template.allowMultiple) return `<article class="component-add-card is-document">
+      <div><strong>${escapeHtml(template.name)}</strong><p>${escapeHtml(template.description)}</p></div>
+      <label><span>문서 이름</span><input type="text" data-component-new-label maxlength="120" placeholder="예: 범인 공개 문서"${busy ? " disabled" : ""}></label>
+      <label><span>식별자</span><input type="text" data-component-new-id pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*" placeholder="자동 생성"${busy ? " disabled" : ""}></label>
+      <button type="button" data-component-action="add-document" data-component-template="${escapeHtml(template.templateId)}" data-component-instance="${escapeHtml(template.defaultInstanceId)}"${busy ? " disabled" : ""}>문서 추가</button>
+    </article>`;
+    return `<article class="component-add-card">
+      <div><strong>${escapeHtml(template.name)}</strong><p>${escapeHtml(template.description)}</p></div>
+      <button type="button" data-component-action="add" data-component-template="${escapeHtml(template.templateId)}" data-component-instance="${escapeHtml(template.defaultInstanceId)}" data-component-label="${escapeHtml(template.name)}"${busy ? " disabled" : ""}>추가</button>
+    </article>`;
+  }
+
+  function restoreCard(instance, template, busy) {
+    return `<article class="component-add-card is-archived">
+      <div><span>보관됨</span><strong>${escapeHtml(instance.tab || template?.name || instance.instanceId)}</strong><p>기존 내용을 그대로 다시 사용할 수 있습니다.</p></div>
+      <button type="button" data-component-action="restore" data-component-template="${escapeHtml(instance.templateId)}" data-component-instance="${escapeHtml(instance.instanceId)}" data-component-label="${escapeHtml(instance.tab)}"${busy ? " disabled" : ""}>복원</button>
+    </article>`;
+  }
+
+  function addDialogMarkup(dataComponents, archivedComponents, dataTemplates, busy) {
+    const activeSingletonTemplates = new Set(dataComponents.filter(instance => dataTemplates.find(template => template.templateId === instance.templateId)?.allowMultiple !== true).map(instance => instance.templateId));
+    const archivedSingletonTemplates = new Set(archivedComponents.filter(instance => dataTemplates.find(template => template.templateId === instance.templateId)?.allowMultiple !== true).map(instance => instance.templateId));
+    const optionalTemplates = dataTemplates.filter(template => !template.required && !template.internal);
+    const available = optionalTemplates.filter(template => template.allowMultiple || (!activeSingletonTemplates.has(template.templateId) && !archivedSingletonTemplates.has(template.templateId)));
+    const templateById = new Map(dataTemplates.map(template => [template.templateId, template]));
+    return `<dialog class="component-add-dialog" data-component-add-dialog>
+      <header><div><span>작품 구성</span><h3>기능 추가</h3><p>이 작품에서 사용할 기능을 선택하세요.</p></div><button type="button" data-component-action="close-add-dialog" aria-label="닫기">×</button></header>
+      <div class="component-add-dialog-body">
+        ${archivedComponents.length ? `<section><h4>보관된 구성</h4><p>제외하기 전의 내용이 그대로 보관되어 있습니다.</p><div class="component-add-grid">${archivedComponents.map(instance => restoreCard(instance, templateById.get(instance.templateId), busy)).join("")}</div></section>` : ""}
+        <section><h4>추가 가능한 기능</h4><p>추가하면 제작하기와 미리보기에 해당 화면이 함께 생성됩니다.</p><div class="component-add-grid">${available.map(template => addTemplateCard(template, busy)).join("") || `<p class="component-manager-empty">추가할 수 있는 기능이 없습니다.</p>`}</div></section>
+      </div>
+    </dialog>`;
+  }
+
+  function render(options = {}) {
+    const dataComponents = Array.isArray(options.dataComponents) ? [...options.dataComponents].sort((left, right) => left.order - right.order) : [];
+    const viewComponents = Array.isArray(options.viewComponents) ? [...options.viewComponents].sort((left, right) => left.order - right.order) : [];
+    const dataTemplates = Array.isArray(options.dataTemplates) ? options.dataTemplates : [];
+    const viewTemplates = Array.isArray(options.viewTemplates) ? options.viewTemplates : [];
+    const archivedComponents = Array.isArray(options.archivedComponents) ? [...options.archivedComponents].sort((left, right) => left.order - right.order) : [];
+    const dataTemplateByKey = new Map(dataTemplates.map(template => [template.templateId, template]));
+    void viewTemplates;
+    const compositionStatus = options.compositionStatus || { state: "idle", message: "" };
+    const busy = compositionStatus.state === "saving";
+    const publicComponents = dataComponents.filter(item => item.config?.hidden !== true);
+    const requiredComponents = publicComponents.filter(item => item.required || dataTemplateByKey.get(item.templateId)?.required);
+    const optionalDisplayOrder = new Map([
+      ["ssobig.timeline", 0],
+      ["ssobig.clues", 1],
+      ["ssobig.clue-combinations", 2]
+    ]);
+    const optionalComponents = publicComponents
+      .filter(item => !requiredComponents.includes(item))
+      .map((item, index) => ({ item, index }))
+      .sort((left, right) => {
+        const leftOrder = optionalDisplayOrder.get(left.item.templateId);
+        const rightOrder = optionalDisplayOrder.get(right.item.templateId);
+        if (leftOrder !== undefined || rightOrder !== undefined) {
+          return (leftOrder ?? Number.MAX_SAFE_INTEGER) - (rightOrder ?? Number.MAX_SAFE_INTEGER);
+        }
+        return left.index - right.index;
+      })
+      .map(entry => entry.item);
+    const activeComponents = [...requiredComponents, ...optionalComponents];
+    const activeTemplateIds = new Set(activeComponents.map(instance => instance.templateId));
+    const latestTemplateById = new Map();
+    dataTemplates.filter(template => !template.internal).forEach(template => {
+      const current = latestTemplateById.get(template.templateId);
+      if (!current || Number(template.version) > Number(current.version)) latestTemplateById.set(template.templateId, template);
+    });
+    const archivedByTemplateId = new Map(archivedComponents.filter(instance => !activeTemplateIds.has(instance.templateId)).map(instance => [instance.templateId, instance]));
+    const inactiveTemplates = [...latestTemplateById.values()].filter(template => !template.required && !activeTemplateIds.has(template.templateId) && !template.allowMultiple);
+    const catalogEntries = [
+      ...activeComponents.map((instance, index) => ({ kind: "active", instance, template: dataTemplateByKey.get(instance.templateId), index })),
+      ...inactiveTemplates.map((template, index) => ({ kind: "inactive", instance: archivedByTemplateId.get(template.templateId) || null, template, index: activeComponents.length + index }))
+    ].sort((left, right) => functionDisplayOrder(left.template?.templateId || left.instance?.templateId) - functionDisplayOrder(right.template?.templateId || right.instance?.templateId) || left.index - right.index);
+    const requestedId = String(options.selectedId || "");
+    const selectedEntry = requestedId ? catalogEntries.find(entry => catalogEntryId(entry) === requestedId) || null : null;
+    const selectedId = catalogEntryId(selectedEntry);
+    const catalogRows = catalogEntries.map(entry => entry.kind === "active"
+      ? componentRow(entry.instance, entry.template, viewComponents, busy, selectedId)
+      : inactiveComponentRow(entry.instance, entry.template, busy, selectedId)).join("");
+    const assetInstance = dataComponents.find(item => item.templateId === "ssobig.assets") || null;
+    const managerTab = options.managerTab === "assets" ? "assets" : "components";
+    const assetManifest = options.assetManifest?.assets && typeof options.assetManifest.assets === "object" ? options.assetManifest : assetInstance?.data;
+    const status = managerTab === "assets"
+      ? options.assetStatus || { state: "idle", message: "" }
+      : compositionStatus;
+    const pageHeaderMarkup = pageHeader.render({
+      title: managerTab === "components" ? "기능" : "에셋",
+      description: managerTab === "components" ? "사용할 기능을 관리합니다. 기능 카드를 클릭하면 세부 설정을 확인하고 변경할 수 있습니다." : "작품에서 사용하는 이미지와 JSON 파일을 관리합니다. 변경 내용은 연결 화면에 즉시 반영됩니다.",
+      className: managerTab === "assets" ? "component-manager-hero component-manager-asset-hero" : "component-manager-hero",
+      metaMarkup: managerTab === "assets"
+        ? `<label class="component-asset-create-button component-manager-asset-create-button"><span>새 파일 추가</span><input type="file" accept="${GENERAL_ASSET_ACCEPT}" data-manager-asset-create></label>`
+        : ""
+    });
+    return `<section class="pane component-manager-pane active" data-workspace-mode="components">
+      ${pageHeaderMarkup}
+      <p class="component-manager-status" data-component-manager-status data-state="${escapeHtml(status.state || "idle")}" aria-live="polite">${escapeHtml(status.message || "")}</p>
+      ${managerTab === "components" ? `<div class="component-manager-layout">
+        <section class="component-manager-catalog" data-ui-scroll-key="component-manager-catalog" aria-label="작품 기능 목록">
+          <div class="component-manager-card-grid">${catalogRows}</div>
+        </section>
+        ${componentInspector(selectedEntry, viewComponents, busy)}
+      </div>${addDialogMarkup(dataComponents, archivedComponents, dataTemplates, busy)}` : assetInstance ? assetLibraryMarkup(assetInstance, options) : `<div class="component-manager-empty">에셋 구성을 찾을 수 없습니다.</div>`}
+    </section>`;
+  }
+
+  function countSupportedAssets(manifest) {
+    const entries = manifest?.assets && typeof manifest.assets === "object" ? manifest.assets : {};
+    return Object.entries(entries).filter(([assetId, entry]) => isSupportedAssetEntry(entry, assetId)).length;
+  }
+
+  return Object.freeze({ render, prettyJson, inferJsonSchema, formatFileSize, assetKind, assetFormatLabel, functionDisplayOrder, countSupportedAssets });
+});

package/templates/mystery-v1/component-navigation-counts.js

@@ -0,0 +1,64 @@
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterWorkbenchComponentNavigationCounts = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  function listLength(value) {
+    return Array.isArray(value) ? value.length : 0;
+  }
+
+  function commonCount(data) {
+    const sections = data?.sections && typeof data.sections === "object" ? data.sections : {};
+    const deleted = new Set(Array.isArray(data?.deletedBaseSections) ? data.deletedBaseSections : []);
+    const customIds = new Set((Array.isArray(data?.customSections) ? data.customSections : []).map(item => item?.id).filter(Boolean));
+    return (Array.isArray(data?.sectionOrder) ? data.sectionOrder : [])
+      .filter(id => !deleted.has(id) && (Object.hasOwn(sections, id) || customIds.has(id))).length;
+  }
+
+  function characterCount(data) {
+    const characters = data?.characters && typeof data.characters === "object" ? data.characters : {};
+    const deleted = new Set(Array.isArray(data?.deletedColumns) ? data.deletedColumns : []);
+    return (Array.isArray(data?.order) ? data.order : [])
+      .filter(id => !deleted.has(id) && Object.hasOwn(characters, id)).length;
+  }
+
+  function endingCount(data) {
+    const conditions = Array.isArray(data?.conditions) ? data.conditions : [];
+    const outcomes = Array.isArray(data?.outcomes) ? data.outcomes : [];
+    const matchedConditions = new Set();
+    outcomes.forEach(outcome => {
+      const index = conditions.findIndex(condition => condition?.id === outcome?.id);
+      if (index >= 0) matchedConditions.add(index);
+    });
+    return outcomes.length + conditions.length - matchedConditions.size;
+  }
+
+  function componentItemCount(instance, data = instance?.data) {
+    switch (String(instance?.templateId || "")) {
+      case "ssobig.progress": return listLength(data?.steps);
+      case "ssobig.common":
+      case "ssobig.choice": return commonCount(data);
+      case "ssobig.character": return characterCount(data);
+      case "ssobig.clues": return listLength(data?.clues);
+      case "ssobig.clue-combinations": return listLength(data?.combinations);
+      case "ssobig.ai-response": return listLength(data?.responses);
+      case "ssobig.timeline": return listLength(data?.events);
+      case "ssobig.investigation-board": return listLength(data?.nodes);
+      case "ssobig.ending": return endingCount(data);
+      case "ssobig.postgame": return listLength(data?.truth) + listLength(data?.epilogue);
+      case "ssobig.author-notes": return listLength(data?.notes);
+      case "ssobig.documents": return listLength(data?.blocks);
+      default: return 0;
+    }
+  }
+
+  function totalComponentCount(dataComponents) {
+    return Array.isArray(dataComponents)
+      ? dataComponents.filter(instance => instance?.config?.hidden !== true).length
+      : 0;
+  }
+
+  return Object.freeze({ componentItemCount, totalComponentCount });
+});