@kokoa/clotho-editor 0.1.4 → 0.2.0

package/dist/index.js

@@ -1,9 +1,11 @@
-import { downloadAnimationJson, configureAnimationRepository } from './chunk-GMGB7NIL.js';
-export { addAppearance, addChapter, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, deleteChapter, deleteEffect, deleteElement, downloadAnimationJson, endTransient, garbageCollectAnimationAssets, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupElements, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, markClean, moveElementToEnd, moveElementToFront, placeholderImageUrl, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeTrack, removeTrackKeyframe, reorderElement, resetHistory, setCurrentTime, setDef, setDraft, setElementValueAtTime, setSelection, setTrackKeyframe, subscribe, toggleSelectionFor, undo, ungroupElement, uniqueChapterId, uniqueEffectId, uniqueElementId, updateAppearance, updateCanvas, updateChapter, updateDuration, updateEffect, updateElementBase, updateLocales, updateMeta, updateSettings } from './chunk-GMGB7NIL.js';
-import { useState, useEffect, useRef } from 'react';
+import { downloadAnimationJson, configureAnimationRepository } from './chunk-FAI2G3XK.js';
+export { addAppearance, addChapter, addCheckpoint, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, createEditorPluginContext, createLayout, deleteChapter, deleteCheckpoint, deleteEffect, deleteElement, detachFromLayout, downloadAnimationJson, endTransient, findLayoutCollisions, garbageCollectAnimationAssets, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupElements, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, layoutIdsFor, markClean, mountEditorPlugins, moveElementToEnd, moveElementToFront, placeholderImageUrl, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeTrack, removeTrackKeyframe, reorderElement, resetHistory, setCurrentTime, setDef, setDraft, setElementValueAtTime, setSelection, setTrackKeyframe, subscribe, toggleSelectionFor, undo, ungroupElement, uniqueChapterId, uniqueCheckpointId, uniqueEffectId, uniqueElementId, updateAppearance, updateCanvas, updateChapter, updateCheckpoint, updateData, updateDuration, updateEffect, updateElementBase, updateLocales, updateMeta, updateResponsive, updateSettings, validateEditorPlugin } from './chunk-FAI2G3XK.js';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { usePlayer, AnimationStage } from '@kokoa/clotho/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { animationDocumentSchema } from '@kokoa/clotho';
+import { defineStory, animationDocumentSchema, compileSceneDependencyPlan, buildScene, lintDocument, autofixDocument, compileResponsiveStage } from '@kokoa/clotho';
+import { animationSampleTimes, expectAnimation, snapshotAnimationMatrix, animationFailureReport, AnimationAssertionError } from '@kokoa/clotho/testing';
+import { renderDocumentToSvg } from '@kokoa/clotho/svg';
 
 function elementsOf(def) {
   return def.elements;
@@ -54,6 +56,7 @@ function Studio({ initial, onSave }) {
       rotation: 0,
       content: "New",
       translations: {},
+      references: {},
       fontSize: 24,
       color: "#4f46e5",
       textAnchor: "start",
@@ -215,6 +218,250 @@ function Studio({ initial, onSave }) {
     ] })
   ] });
 }
+
+// src/template-editor-plugin.ts
+function initialParameterValue(schema) {
+  if (schema.default !== void 0) return structuredClone(schema.default);
+  if (schema.type === "string") return "";
+  if (schema.type === "number") return schema.min ?? 0;
+  if (schema.type === "boolean") return false;
+  if (schema.type === "enum") return schema.values[0];
+  if (schema.type === "array") return [];
+  return Object.fromEntries(
+    Object.entries(schema.properties).map(([key, child]) => [
+      key,
+      initialParameterValue(child)
+    ])
+  );
+}
+function parameterInputValue(schema, raw) {
+  if (schema.type === "boolean") return Boolean(raw);
+  if (schema.type === "number") return Number(raw);
+  if (schema.type === "array" || schema.type === "object")
+    return JSON.parse(String(raw));
+  return String(raw);
+}
+function downloadReference(reference) {
+  const blob = new Blob([JSON.stringify(reference, null, 2)], {
+    type: "application/json"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${reference.templateId.replace(/[^a-z0-9._-]/gi, "-")}.template.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+function field(key, schema, value, onChange) {
+  const label = document.createElement("label");
+  label.className = "studio-field studio-template-field";
+  const title = document.createElement("span");
+  title.textContent = key;
+  if (schema.description) title.title = schema.description;
+  label.append(title);
+  let control;
+  if (schema.type === "enum") {
+    control = document.createElement("select");
+    for (const option of schema.values) {
+      const element = document.createElement("option");
+      element.value = option;
+      element.textContent = option;
+      control.append(element);
+    }
+    control.value = String(value);
+  } else if (schema.type === "array" || schema.type === "object") {
+    control = document.createElement("textarea");
+    control.rows = 3;
+    control.value = JSON.stringify(value, null, 2);
+  } else {
+    control = document.createElement("input");
+    control.type = schema.type === "boolean" ? "checkbox" : schema.type;
+    if (schema.type === "boolean") control.checked = Boolean(value);
+    else control.value = String(value);
+    if (schema.type === "number") {
+      if (schema.min !== void 0) control.min = String(schema.min);
+      if (schema.max !== void 0) control.max = String(schema.max);
+      control.step = schema.integer ? "1" : "any";
+    }
+    if (schema.type === "string") {
+      if (schema.minLength !== void 0) control.minLength = schema.minLength;
+      if (schema.maxLength !== void 0) control.maxLength = schema.maxLength;
+      if (schema.pattern !== void 0) control.pattern = schema.pattern;
+    }
+  }
+  control.dataset.templateParameter = key;
+  const update = () => {
+    try {
+      const raw = control instanceof HTMLInputElement && control.type === "checkbox" ? control.checked : control.value;
+      onChange(parameterInputValue(schema, raw));
+      control.setCustomValidity("");
+    } catch {
+      control.setCustomValidity("\uC62C\uBC14\uB978 JSON\uC744 \uC785\uB825\uD558\uC138\uC694.");
+    }
+  };
+  control.addEventListener(
+    schema.type === "enum" || schema.type === "boolean" ? "change" : "input",
+    update
+  );
+  label.append(control);
+  return label;
+}
+function createTemplateEditorPlugin(templates) {
+  return {
+    manifest: {
+      id: "dev.clotho.templates",
+      name: "Template parameters",
+      capabilities: ["editor"],
+      editor: { panels: ["parameters"] }
+    },
+    panels: {
+      parameters: {
+        id: "parameters",
+        label: "Template parameters",
+        mount(container, context) {
+          if (templates.length === 0) return;
+          container.classList.add(
+            "studio-tools-section",
+            "studio-template-panel"
+          );
+          const heading = document.createElement("div");
+          heading.className = "studio-tools-title";
+          heading.textContent = "Template";
+          const select = document.createElement("select");
+          select.className = "studio-template-select";
+          for (const template of templates) {
+            const option = document.createElement("option");
+            option.value = template.id;
+            option.textContent = template.id;
+            select.append(option);
+          }
+          const form = document.createElement("div");
+          const status = document.createElement("p");
+          status.className = "studio-props-empty studio-template-status";
+          const actions = document.createElement("div");
+          actions.className = "studio-align-row";
+          const standalone = document.createElement("button");
+          standalone.className = "studio-btn";
+          standalone.textContent = "Standalone JSON";
+          const reference = document.createElement("button");
+          reference.className = "studio-btn";
+          reference.textContent = "Template \uCC38\uC870";
+          actions.append(standalone, reference);
+          container.append(heading, select, form, status, actions);
+          let active = templates[0];
+          let values = {};
+          let previewDocument = context.getDocument();
+          const rebuild = () => {
+            try {
+              previewDocument = active.instantiate(values);
+              context.replaceDocument(previewDocument);
+              status.textContent = "parameter\uAC00 \uBBF8\uB9AC\uBCF4\uAE30\uC5D0 \uBC18\uC601\uB418\uC5C8\uC2B5\uB2C8\uB2E4.";
+              status.removeAttribute("data-error");
+            } catch (error) {
+              const issues = error.issues;
+              status.textContent = issues ? issues.map(({ path, message }) => `${path}: ${message}`).join(" \xB7 ") : String(error);
+              status.dataset.error = "true";
+            }
+          };
+          const render = () => {
+            values = Object.fromEntries(
+              Object.entries(active.parameters).map(([key, schema]) => [
+                key,
+                initialParameterValue(schema)
+              ])
+            );
+            form.replaceChildren(
+              ...Object.entries(active.parameters).map(
+                ([key, schema]) => field(key, schema, values[key], (value) => {
+                  values[key] = value;
+                  rebuild();
+                })
+              )
+            );
+            rebuild();
+          };
+          select.addEventListener("change", () => {
+            active = templates.find(({ id }) => id === select.value) ?? templates[0];
+            render();
+          });
+          standalone.addEventListener(
+            "click",
+            () => downloadAnimationJson(previewDocument)
+          );
+          reference.addEventListener(
+            "click",
+            () => downloadReference(active.reference(values))
+          );
+          render();
+        }
+      }
+    }
+  };
+}
+function replaceStoryNodeDocument(manifest, nodeId, document2) {
+  return defineStory({
+    ...manifest,
+    nodes: manifest.nodes.map(
+      (node) => node.id === nodeId ? { ...node, document: document2 } : node
+    )
+  });
+}
+function appendStoryEdge(manifest, edge) {
+  return defineStory({ ...manifest, edges: [...manifest.edges, edge] });
+}
+function createStoryEditorPlugin(options) {
+  let manifest = structuredClone(options.manifest);
+  let activeNode = manifest.initialNode;
+  return {
+    manifest: {
+      id: "dev.clotho.story",
+      name: "Story Graph",
+      capabilities: ["editor"],
+      editor: { panels: ["story-graph"] }
+    },
+    panels: {
+      "story-graph": {
+        id: "story-graph",
+        label: "Story Graph",
+        mount(container, context) {
+          const render = () => {
+            container.innerHTML = `<div class="studio-tools-section"><div class="studio-tools-title">Story Graph</div><div class="studio-story-nodes">${manifest.nodes.map((node) => `<button type="button" class="studio-btn${node.id === activeNode ? " is-active" : ""}" data-story-node="${escapeAttribute(node.id)}">${escapeHtml(node.title || node.id)}</button>`).join("")}</div><div class="studio-tools-hint">${manifest.edges.map((edge) => `${escapeHtml(edge.from)} \u2192 ${escapeHtml(edge.to)}${edge.label ? ` \xB7 ${escapeHtml(edge.label)}` : ""}`).join("<br>") || "\uC5F0\uACB0\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."}</div></div>`;
+          };
+          const click = (event) => {
+            const button = event.target.closest(
+              "[data-story-node]"
+            );
+            const nextId = button?.dataset.storyNode;
+            if (!nextId || nextId === activeNode) return;
+            manifest = replaceStoryNodeDocument(
+              manifest,
+              activeNode,
+              context.getDocument()
+            );
+            const node = manifest.nodes.find(({ id }) => id === nextId);
+            if (!node) return;
+            activeNode = nextId;
+            context.replaceDocument(node.document);
+            options.onChange?.(structuredClone(manifest));
+            render();
+          };
+          container.addEventListener("click", click);
+          render();
+          return () => container.removeEventListener("click", click);
+        }
+      }
+    }
+  };
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeAttribute(value) {
+  return escapeHtml(value).replaceAll('"', "&quot;");
+}
+var EMPTY_EDITOR_PLUGINS = [];
+var EMPTY_TEMPLATES = [];
+var DENY_PLUGIN_PERMISSIONS = () => ({});
 var CANVAS_PRESETS = [
   { id: "800x500", label: "8:5", sub: "800\xD7500", w: 32, h: 20 },
   { id: "1280x720", label: "16:9", sub: "HD", w: 32, h: 18 },
@@ -238,6 +485,7 @@ var SKELETON = `
   <header class="studio-header">
     <h1 id="studio-editor-title" class="studio-header-title">Clotho Editor</h1>
     <div class="studio-header-actions">
+      <span class="studio-plugin-toolbar" data-editor-plugin-slot="toolbar"></span>
       <button type="button" id="studio-open" class="studio-btn" aria-label="\uC800\uC7A5\uB41C \uC560\uB2C8\uBA54\uC774\uC158 \uC5F4\uAE30">\u{1F4C1} \uC5F4\uAE30</button>
       <button type="button" id="studio-new" class="studio-btn" aria-label="\uC0C8 \uC560\uB2C8\uBA54\uC774\uC158 \uB9CC\uB4E4\uAE30">\uFF0B \uC0C8 \uC560\uB2C8\uBA54\uC774\uC158</button>
       <button type="button" id="studio-undo" class="studio-btn studio-btn-icon" aria-label="\uC2E4\uD589 \uCDE8\uC18C" title="\uC2E4\uD589 \uCDE8\uC18C (\u2318Z)" disabled>\u21B6</button>
@@ -270,6 +518,7 @@ var SKELETON = `
         <div class="studio-tool-with-option"><button type="button" class="studio-tool-btn" data-add-element="polygon" title="\uB2E4\uAC01\uD615 (Y)" aria-label="\uB2E4\uAC01\uD615 \uB3C4\uAD6C"><span>\u2B22 Polygon</span><kbd>Y</kbd></button><label>\uBCC0 <input type="number" id="studio-polygon-sides" min="3" max="24" value="6" aria-label="\uB2E4\uAC01\uD615\uC758 \uBCC0 \uAC1C\uC218" /></label></div>
         <button type="button" class="studio-tool-btn" id="studio-open-icons" title="\uC544\uC774\uCF58 \uB77C\uC774\uBE0C\uB7EC\uB9AC" aria-label="\uC544\uC774\uCF58 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uCD94\uAC00">\u{1F3A8} Icons</button>
       </div>
+      <div class="studio-plugin-panels" data-editor-plugin-slot="panel"></div>
       <div class="studio-tools-section">
         <div class="studio-tools-title">\uCE94\uBC84\uC2A4 \uD06C\uAE30</div>
         <div class="studio-canvas-size-row">
@@ -311,6 +560,7 @@ var SKELETON = `
       <div id="studio-props-content" class="studio-props-content">
         <p class="studio-props-empty">\uC694\uC18C \uB610\uB294 step \uC744 \uC120\uD0DD\uD558\uC138\uC694.</p>
       </div>
+      <div class="studio-plugin-inspectors" data-editor-plugin-slot="inspector"></div>
     </aside>
   </div>
 
@@ -426,24 +676,58 @@ function StudioMount({
   initialId,
   repository,
   editorTitle = "Clotho Editor",
-  resolveImage
+  resolveImage,
+  importDocument,
+  plugins = EMPTY_EDITOR_PLUGINS,
+  resolvePluginPermissions = DENY_PLUGIN_PERMISSIONS,
+  templates = EMPTY_TEMPLATES,
+  story
 }) {
   const inited = useRef(false);
+  const mountedPlugins = useMemo(
+    () => [
+      ...templates.length > 0 ? [createTemplateEditorPlugin(templates)] : [],
+      ...story ? [createStoryEditorPlugin(story)] : [],
+      ...plugins
+    ],
+    [plugins, templates, story]
+  );
+  const permissionResolver = useMemo(
+    () => (plugin) => plugin.id === "dev.clotho.templates" || plugin.id === "dev.clotho.story" ? { ui: true, documentRead: true, documentWrite: true } : resolvePluginPermissions(plugin),
+    [resolvePluginPermissions]
+  );
   useEffect(() => {
     if (inited.current) return;
     inited.current = true;
     if (repository) configureAnimationRepository(repository);
     let disposed = false;
-    void import('./main-NCPWDB2U.js').then(({ initStudio }) => {
+    let cleanup;
+    void import('./main-SKM3P4X7.js').then(({ initStudio }) => {
       if (disposed) return;
-      initStudio({ initialId, editorTitle, resolveImage });
+      cleanup = initStudio({
+        initialId,
+        editorTitle,
+        resolveImage,
+        importDocument,
+        plugins: mountedPlugins,
+        resolvePluginPermissions: permissionResolver
+      });
     });
     return () => {
       disposed = true;
+      cleanup?.();
       document.body.classList.remove("editor-active");
       document.documentElement.classList.remove("editor-active");
     };
-  }, [editorTitle, initialId, repository, resolveImage]);
+  }, [
+    editorTitle,
+    importDocument,
+    initialId,
+    mountedPlugins,
+    repository,
+    resolveImage,
+    permissionResolver
+  ]);
   return /* @__PURE__ */ jsx("section", { className: "studio-shell w-full", "data-pagefind-ignore": "all", children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: SKELETON } }) });
 }
 function browserStorage() {
@@ -531,7 +815,228 @@ function createLocalStorageRepository(options = {}) {
     }
   };
 }
+function downloadReport(html) {
+  const url = URL.createObjectURL(new Blob([html], { type: "text/html" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "clotho-animation-qa.html";
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function createVisualRegressionPlugin() {
+  return {
+    manifest: {
+      id: "dev.clotho.visual-regression",
+      name: "Animation QA",
+      capabilities: ["editor"],
+      editor: { inspectors: ["animation-qa"] }
+    },
+    inspectors: {
+      "animation-qa": {
+        id: "animation-qa",
+        label: "Animation QA",
+        mount(container, context) {
+          container.classList.add("studio-qa-panel");
+          const title = document.createElement("strong");
+          title.textContent = "Animation QA";
+          const run = document.createElement("button");
+          run.type = "button";
+          run.className = "studio-btn";
+          run.textContent = "\uC804\uCCB4 frame \uAC80\uC0AC";
+          const status = document.createElement("p");
+          status.className = "studio-props-empty";
+          container.append(title, run, status);
+          run.addEventListener("click", () => {
+            const animation = context.getDocument();
+            const errors = [];
+            for (const time of animationSampleTimes(animation)) {
+              for (const element of animation.elements) {
+                if (!["rect", "circle", "image", "code"].includes(element.type))
+                  continue;
+                try {
+                  expectAnimation(animation).at(time).insideCanvas(element.id);
+                } catch (error) {
+                  if (error instanceof AnimationAssertionError)
+                    errors.push(error);
+                }
+              }
+            }
+            const snapshots = snapshotAnimationMatrix(animation);
+            if (errors.length === 0) {
+              status.textContent = `${snapshots.length}\uAC1C locale\xB7theme frame\uC744 \uAC80\uC0AC\uD588\uC2B5\uB2C8\uB2E4. \uBB38\uC81C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.`;
+              status.removeAttribute("data-error");
+            } else {
+              status.textContent = `${errors.length}\uAC1C \uBB38\uC81C\uB97C \uBC1C\uACAC\uD588\uC2B5\uB2C8\uB2E4. HTML report\uB97C \uB0B4\uB824\uBC1B\uC2B5\uB2C8\uB2E4.`;
+              status.dataset.error = "true";
+              downloadReport(animationFailureReport(errors));
+            }
+          });
+        }
+      }
+    }
+  };
+}
+var RESPONSIVE_VIEWPORTS = [
+  { id: "compact", label: "\uBAA8\uBC14\uC77C", width: 375 },
+  { id: "regular", label: "\uBCF8\uBB38", width: 768 },
+  { id: "wide", label: "\uB113\uC740 \uD654\uBA74", width: 1280 }
+];
+function addDefaultResponsiveVariants(document2) {
+  if (document2.responsive?.length) return document2;
+  return {
+    ...document2,
+    responsive: [
+      {
+        id: "compact",
+        minWidth: 0,
+        maxWidth: 479,
+        chapterListPosition: "bottom",
+        elementOverrides: {}
+      },
+      { id: "regular", minWidth: 480, maxWidth: 959, elementOverrides: {} },
+      { id: "wide", minWidth: 960, elementOverrides: {} }
+    ]
+  };
+}
+function createResponsiveInspectorPlugin() {
+  return {
+    manifest: {
+      id: "dev.clotho.responsive",
+      name: "Responsive Stage",
+      capabilities: ["editor"],
+      editor: { inspectors: ["responsive"] }
+    },
+    inspectors: {
+      responsive: {
+        id: "responsive",
+        label: "Responsive Stage",
+        mount(container, context) {
+          const render = () => {
+            const document2 = context.getDocument();
+            container.innerHTML = `<div class="studio-props-header"><span class="studio-props-header-title">Responsive Stage</span></div><button type="button" class="studio-btn" data-responsive-defaults>\uAE30\uBCF8 breakpoint \uB9CC\uB4E4\uAE30</button><div class="studio-responsive-grid">${RESPONSIVE_VIEWPORTS.map((viewport) => `<figure><figcaption>${viewport.label} \xB7 ${viewport.width}px</figcaption>${renderDocumentToSvg(compileResponsiveStage(document2, viewport.width), 0)}</figure>`).join("")}</div>`;
+          };
+          const click = (event) => {
+            if (!event.target.closest(
+              "[data-responsive-defaults]"
+            ))
+              return;
+            context.replaceDocument(
+              addDefaultResponsiveVariants(context.getDocument())
+            );
+            render();
+          };
+          container.addEventListener("click", click);
+          render();
+          return () => container.removeEventListener("click", click);
+        }
+      }
+    }
+  };
+}
+function profileAnimation(document2, sampleCount = 30, frameBudgetMs = 16.7) {
+  const plan = compileSceneDependencyPlan(document2);
+  const samples = [];
+  for (let index = 0; index < sampleCount; index += 1) {
+    const time = sampleCount === 1 ? 0 : document2.duration * index / (sampleCount - 1);
+    const started = performance.now();
+    buildScene(document2, time);
+    samples.push(performance.now() - started);
+  }
+  const totalMs = samples.reduce((sum, value) => sum + value, 0);
+  const maxMs = Math.max(0, ...samples);
+  return {
+    elementCount: plan.elementCount,
+    trackCount: plan.trackCount,
+    keyframeCount: plan.keyframeCount,
+    sampleCount,
+    totalMs,
+    averageMs: totalMs / Math.max(1, sampleCount),
+    maxMs,
+    overBudget: maxMs > frameBudgetMs
+  };
+}
+function createPerformanceProfilerPlugin() {
+  return {
+    manifest: {
+      id: "dev.clotho.performance",
+      name: "Scene Profiler",
+      capabilities: ["editor"],
+      editor: { inspectors: ["performance"] }
+    },
+    inspectors: {
+      performance: {
+        id: "performance",
+        label: "Scene Profiler",
+        mount(container, context) {
+          const run = () => {
+            const profile = profileAnimation(context.getDocument());
+            container.innerHTML = `<div class="studio-props-header"><span class="studio-props-header-title">Scene Profiler</span></div><dl class="studio-profile"><div><dt>Elements</dt><dd>${profile.elementCount}</dd></div><div><dt>Tracks / keyframes</dt><dd>${profile.trackCount} / ${profile.keyframeCount}</dd></div><div><dt>\uD3C9\uADE0 / \uCD5C\uB300</dt><dd>${profile.averageMs.toFixed(2)} / ${profile.maxMs.toFixed(2)} ms</dd></div></dl><p class="studio-template-status" data-error="${profile.overBudget}">${profile.overBudget ? "16.7ms frame budget\uC744 \uB118\uC5C8\uC2B5\uB2C8\uB2E4." : "60fps frame budget \uC548\uC5D0 \uC788\uC2B5\uB2C8\uB2E4."}</p><button type="button" class="studio-btn" data-run-profiler>\uB2E4\uC2DC \uCE21\uC815</button>`;
+          };
+          const click = (event) => {
+            if (event.target.closest("[data-run-profiler]"))
+              run();
+          };
+          container.addEventListener("click", click);
+          run();
+          return () => container.removeEventListener("click", click);
+        }
+      }
+    }
+  };
+}
+function createLinterPlugin() {
+  return {
+    manifest: {
+      id: "dev.clotho.linter",
+      name: "Clotho Linter",
+      capabilities: ["editor"],
+      editor: { inspectors: ["linter"] }
+    },
+    inspectors: {
+      linter: {
+        id: "linter",
+        label: "Clotho Linter",
+        mount(container, context) {
+          let selectedIndex = 0;
+          const render = () => {
+            const document2 = context.getDocument();
+            const issues = lintDocument(document2);
+            const selected = issues[selectedIndex] ?? issues[0];
+            const fixed = autofixDocument(document2).document;
+            container.innerHTML = `<div class="studio-props-header"><span class="studio-props-header-title">Clotho Linter (${issues.length})</span><button type="button" class="studio-btn" data-lint-fix ${issues.some(({ fixable }) => fixable) ? "" : "disabled"}>\uC548\uC804\uD55C \uC218\uC815 \uC801\uC6A9</button></div><ol class="studio-lint-list">${issues.map((issue, index) => `<li><button type="button" data-lint-index="${index}" data-element-id="${issue.elementId ?? ""}"><strong>${escapeHtml2(issue.ruleId)}</strong><span>${escapeHtml2(issue.message)}</span>${issue.fixable ? "<em>\uC790\uB3D9 \uC218\uC815</em>" : ""}</button></li>`).join("") || "<li>\uBB38\uC81C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.</li>"}</ol>${selected ? `<div class="studio-lint-compare"><figure><figcaption>\uD604\uC7AC</figcaption>${renderDocumentToSvg(document2, selected.time ?? 0)}</figure><figure><figcaption>\uC218\uC815 \uD6C4</figcaption>${renderDocumentToSvg(fixed, selected.time ?? 0)}</figure></div>` : ""}`;
+          };
+          const click = (event) => {
+            const target = event.target;
+            if (target.closest("[data-lint-fix]")) {
+              context.replaceDocument(
+                autofixDocument(context.getDocument()).document
+              );
+              selectedIndex = 0;
+              render();
+              return;
+            }
+            const issue = target.closest("[data-lint-index]");
+            if (!issue) return;
+            selectedIndex = Number(issue.dataset.lintIndex);
+            if (issue.dataset.elementId)
+              context.setSelection({
+                kind: "element",
+                elementId: issue.dataset.elementId
+              });
+            render();
+          };
+          container.addEventListener("click", click);
+          render();
+          return () => container.removeEventListener("click", click);
+        }
+      }
+    }
+  };
+}
+function escapeHtml2(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
 
-export { Studio, StudioMount, createLocalStorageRepository };
+export { RESPONSIVE_VIEWPORTS, Studio, StudioMount, addDefaultResponsiveVariants, appendStoryEdge, createLinterPlugin, createLocalStorageRepository, createPerformanceProfilerPlugin, createResponsiveInspectorPlugin, createStoryEditorPlugin, createTemplateEditorPlugin, createVisualRegressionPlugin, initialParameterValue, parameterInputValue, profileAnimation, replaceStoryNodeDocument };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map