@kokoa/clotho-editor 0.1.3 → 0.2.0

package/README.md

@@ -1,113 +1,158 @@
 # @kokoa/clotho-editor
 
-[clotho](../clotho) 애니메이션 문서를 작성하고 미리 볼 수 있는 시각 편집기다.
+`@kokoa/clotho-editor`는 [Clotho](https://github.com/shinkeonkim/clotho) 애니메이션 문서를 만드는 React 기반 시각 편집기입니다. 저장소, 이미지 업로드, 예제 목록과 저장 동작을 host application에서 주입할 수 있으므로 독립형 편집기와 기존 관리 화면에서 같은 package를 사용할 수 있습니다.
 
-## 상태
+실제 화면은 [Clotho Editor](https://clotho-editor.shinkeonkim.com/)에서 확인할 수 있습니다.
 
-두 블로그 저장소에서 사용하던 Studio 약 8,900줄을 clotho 기반의 독립 패키지로 옮겼다. 타입 검사, 빌드, 테스트를 모두 통과한다.
-
-가장 큰 변화는 **미리보기에도 clotho를 사용한다**는 점이다. 이전 Studio는 자체 canvas renderer를 사용했기 때문에 편집 화면과 실제 사이트의 화면이 다를 수 있었다. 이제 두 화면 모두 `buildScene`과 `patchScene`을 거치므로 같은 문서는 같은 결과로 표시된다.
-
-자세한 내용과 남은 정리 항목은 [`docs/PORTING.md`](./docs/PORTING.md).
-
-## 사용
+## 설치
 
 ```bash
 npm install @kokoa/clotho @kokoa/clotho-editor react react-dom
-# yarn add / pnpm add / bun add 도 같은 패키지 목록을 사용한다.
 ```
 
 ```tsx
-import { Studio, configureApi, configureHost } from "@kokoa/clotho-editor";
+import {
+  StudioMount,
+  createLocalStorageRepository,
+} from "@kokoa/clotho-editor";
+import "@kokoa/clotho/styles.css";
 import "@kokoa/clotho-editor/styles.css";
 
-// 문서가 어디 저장되는지는 호스트가 정한다. 기본값은 원래 Studio가 쓰던 경로다.
-configureApi({ baseUrl: "/api/admin/animations" });
-configureHost({ placeholderImageUrl: "/uploads/placeholder.png" });
+const repository = createLocalStorageRepository({
+  storageKey: "my-app.animations",
+  examples,
+});
 
-<Studio initial={doc} onSave={handleSave} />;
+export function AnimationEditor() {
+  return <StudioMount editorTitle="Clotho Editor" repository={repository} />;
+}
 ```
 
-`Studio`는 문서를 저장하는 방법을 사용하는 application에서 정할 수 있는 내장형 컴포넌트다. 기존 API 경로를 그대로 사용하는 완성된 화면이 필요하면 `<StudioMount initialId="document-id" />`를 사용한다. 두 컴포넌트 모두 Vite, Next.js, React SPA에 넣을 수 있으며 브라우저에서만 필요한 코드는 컴포넌트가 화면에 연결된 뒤 초기화된다.
+`StudioMount`는 목록 조회, 새 문서 생성, 저장, 삭제와 JSON 내보내기를 포함한 편집기 화면입니다. 편집기 shell을 application이 직접 구성해야 한다면 `Studio`를 사용할 수 있습니다.
 
-`StudioMount`의 저장 방식은 `AnimationRepository`로 교체할 수 있다. 서버에서 관리하는 application은 `configureApi`로 기존 HTTP API를 연결할 수 있고, 독립 실행형 편집기는 `createLocalStorageRepository`를 주입할 수 있다. 별도 데이터베이스나 Git 기반 저장소를 사용하려면 `list`, `load`, `create`, `save`, `delete`를 구현한 repository를 전달하면 된다.
+## 저장소 연결
 
-```tsx
-const repository = createLocalStorageRepository({
-  storageKey: "my-editor.animations",
-  examples,
-});
+편집기는 특정 backend에 의존하지 않습니다. `AnimationRepository`를 구현하면 REST API, browser storage, Git 기반 저장소 등 원하는 데이터 계층을 연결할 수 있습니다.
 
-<StudioMount repository={repository} />;
+```ts
+import type { AnimationRepository } from "@kokoa/clotho-editor";
+
+const repository: AnimationRepository = {
+  list: async () => api.list(),
+  load: async (id) => api.load(id),
+  create: async (id, title) => api.create(id, title),
+  save: async (document) => api.save(document),
+  delete: async (id) => api.delete(id),
+};
 ```
 
-상단 제목과 이미지 저장 방식도 사용하는 환경에서 정할 수 있다. `editorTitle`의 기본값은 `Clotho Editor`이며, `resolveImage`는 업로드한 파일을 외부 URL 또는 `data:` URL로 바꾸는 hook이다. hook을 전달하지 않으면 파일을 base64 data URL로 변환해 문서의 `assets`에 저장한다. 같은 이미지는 하나의 asset을 공유하고 각 image 요소는 `assetId`만 참조한다.
+간단한 demo나 offline 편집기는 `createLocalStorageRepository`를 사용하면 됩니다. 기존 HTTP API를 사용하는 application은 `configureApi({ baseUrl })`로 기본 adapter를 설정할 수도 있습니다.
+
+## Host hooks
+
+상단 제목과 이미지 처리 방식은 실행 환경에서 정할 수 있습니다. `resolveImage`를 지정하지 않으면 이미지를 data URL로 변환해 문서의 `assets`에 저장합니다. 같은 이미지는 하나의 asset을 공유하며, 사용되지 않는 asset은 JSON을 내보낼 때 제거됩니다.
 
 ```tsx
 <StudioMount
   editorTitle="블로그 애니메이션 편집기"
+  repository={repository}
   resolveImage={async (file) => uploadToMediaServer(file)}
 />
 ```
 
-미리보기의 `무한 재생` 설정은 문서의 `settings.loop`에 저장된다. `타임라인 분리` 버튼을 누르면 기존 타임라인 컴포넌트가 이벤트와 상태를 유지한 채 별도 브라우저 창으로 이동한다. 분리된 창에서도 재생, Chapter와 keyframe 편집, drag, 확대와 스크롤을 같은 방식으로 사용할 수 있다. `편집기에 다시 합치기` 버튼을 누르거나 창을 닫으면 컴포넌트가 원래 위치로 돌아온다.
+저장 버튼의 동작 자체를 바꾸려면 repository의 `create`와 `save`를 구현합니다. 예제 목록은 repository의 `list`와 `load`에서 제공하므로 editor package 안에 application별 API 경로를 넣을 필요가 없습니다.
 
-`실제 미리보기`는 편집용 canvas가 아니라 `@kokoa/clotho/dom`의 `mountPlayer`로 완성된 애니메이션 컴포넌트를 별도 창에 표시한다. 편집 중 문서가 바뀌면 미리보기 창도 최신 문서로 다시 렌더링한다. 사용하는 application에서는 editor stylesheet와 함께 Clotho player stylesheet도 불러와야 한다.
+## Plugin host
 
-```ts
-import "@kokoa/clotho-editor/styles.css";
-import "@kokoa/clotho/styles.css";
-```
+application 전용 도구는 `plugins`로 추가할 수 있습니다. plugin은 toolbar, 왼쪽 panel, inspector와 command palette에 기능을 붙일 수 있지만, 문서를 읽거나 바꾸려면 host가 권한을 명시적으로 허용해야 합니다. 저장소, selection, undo/redo와 같은 편집기의 기본 기능은 plugin으로 분리하지 않습니다.
 
-왼쪽 도구는 먼저 활성화한 뒤 canvas에서 사용한다. 기존 요소를 누르면 자동으로 `선택 · 이동 · 크기` 도구로 돌아간다. `V`, `R`, `O`, `L`, `A`, `T`, `I`, `B`, `Y`로 선택, 사각형, 원, 선, 화살표, 텍스트, 이미지, Path, 다각형 도구를 활성화할 수 있으며 input, textarea, contenteditable에 입력하는 동안에는 단축키가 동작하지 않는다. 텍스트는 canvas에서 더블클릭해 바로 편집한다. Path는 점을 차례대로 누르고 더블클릭하거나 Enter를 눌러 완성하며 Esc를 누르면 작성을 취소한다.
+```tsx
+import { StudioMount, type EditorPluginDefinition } from "@kokoa/clotho-editor";
+
+const reviewPlugin: EditorPluginDefinition = {
+  manifest: {
+    id: "com.example.review",
+    version: "1.0.0",
+    capabilities: ["editor"],
+    editor: { toolbarItems: ["review"] },
+  },
+  toolbarItems: {
+    review: ({ container, document }) => {
+      const button = document.createElement("button");
+      button.textContent = "검토 요청";
+      container.append(button);
+    },
+  },
+};
 
-사각형, 원과 다각형 도구는 pointer를 놓을 때 요소를 확정한다. 짧게 누르면 기본 크기로 만들고 drag하면 화면에 표시되는 임시 윤곽의 크기로 만든다. 임시 윤곽은 animation frame마다 최대 한 번만 갱신하므로 빠른 pointer 이벤트가 문서 변경이나 렌더를 반복해서 발생시키지 않는다. 색상 입력은 picker를 조작하는 동안 현재 input을 유지하고 선택을 확정했을 때 문서에 반영한다.
+<StudioMount
+  plugins={[reviewPlugin]}
+  resolvePluginPermissions={(manifest) =>
+    manifest.id === "com.example.review" ? { ui: true, documentRead: true } : {}
+  }
+/>;
+```
 
-Shift, Command 또는 Ctrl을 누른 채 canvas나 요소 목록을 누르면 여러 요소를 선택하거나 선택에서 제외할 수 있다. 그룹의 자식은 요소 목록과 timeline에서 들여쓰기되어 표시된다. 그룹 timeline은 여러 자식에 적용되는 transform과 visibility animation을 작성할 때 사용한다.
+Clotho compiler plugin이 새로운 JSON 입력 형식을 처리해야 한다면 `importDocument`에서 compiler pipeline을 연결합니다. 이 경계 덕분에 Editor는 application의 plugin registry나 backend에 의존하지 않습니다.
 
-JSON을 내보낼 때는 어떤 image 요소에서도 참조하지 않는 `assets` 항목을 자동으로 제거한다. 이미지를 삭제한 뒤 별도의 정리 작업을 실행할 필요가 없다.
+```tsx
+import { createPluginRegistry, runPluginPipeline } from "@kokoa/clotho/plugins";
 
-Cloudflare demo의 `열기` 화면에는 Clotho gallery의 JSON 문서 9개가 모두 들어 있다. JSON은 Clotho 저장소의 gallery source에서 생성하며 다음 명령으로 다시 동기화한다.
+const registry = createPluginRegistry(compilerPlugins);
 
-```bash
-cd ../clotho
-bun examples/gallery/build.ts ../clotho-editor/app/gallery --documents-only
+<StudioMount
+  importDocument={(input) => {
+    const result = runPluginPipeline(input, { registry });
+    if (!result.ok) throw result.error;
+    return result.document;
+  }}
+/>;
 ```
 
-두 에디터의 `JSON 내보내기` 버튼은 현재 문서를 검증한 뒤 `{문서 ID}.json` 파일로 내려받는다. 화면을 직접 만들 때는 `animationDocumentToJson`, `animationDocumentFileName`, `downloadAnimationJson`을 사용할 수 있다.
+현재 plugin API는 신뢰할 수 있는 application code를 위한 실험적 API입니다. 외부에서 받은 plugin은 별도 Worker나 격리 환경에서 실행한 뒤 JSON 결과만 Editor로 전달해야 합니다.
+
+## 주요 기능
+
+- Clotho v1 JSON 문서 작성과 검증
+- 사각형, 원, 선, 화살표, 텍스트, 이미지, Path, 다각형과 그룹 편집
+- anchor를 유지하는 선 연결과 다중 선택
+- keyframe, effect, chapter와 재생 설정 편집
+- light/dark theme와 단계 목록 위치 설정
+- 별도 브라우저 창으로 분리할 수 있는 timeline
+- 실제 `@kokoa/clotho/dom` player를 사용하는 독립 미리보기
+- JSON 가져오기와 내보내기, 참조되지 않는 image asset 정리
 
-재생 설정 화면에서는 현재 단계 설명과 전체 단계 목록을 표시할지 선택할 수 있다. 단계 목록의 위치도 `좌측 | 우측 | 상단 | 하단` 중에서 고를 수 있다. 네 가지 배치를 한 화면에서 확인하려면 다음 명령을 실행한다.
+도구 단축키는 편집기 안에서 확인할 수 있으며 input, textarea와 contenteditable에 입력하는 동안에는 동작하지 않습니다.
+
+## 독립 실행형 앱
+
+저장소의 `app`은 package 통합 예제이자 Cloudflare Workers Static Assets용 demo입니다.
 
 ```bash
-bun run visual-check
+bun install
+bun run app:dev
+bun run build:app
+bun run dev:cloudflare
 ```
 
-npm 배포는 `vX.Y.Z` GitHub Release와 `.github/workflows/publish.yml`을 통해 진행한다. 먼저 npm Trusted Publisher와 GitHub의 `npm-production` 승인 environment를 설정해야 한다. 같은 버전의 `@kokoa/clotho`를 먼저 공개한 뒤 editor의 GitHub Release를 공개한다.
+Cloudflare Dashboard에서는 Build command를 `bun run build:app`, Deploy command를 `npx wrangler deploy`로 지정합니다. custom domain은 Dashboard에서 별도로 연결합니다.
 
 ## 개발
 
 ```bash
-bun install
+bun install --frozen-lockfile
 bun run typecheck
 bun test
 bun run build
 ```
 
-개발 환경의 devDependency는 이웃한 `../clotho`를 가리킨다. 배포 패키지에는 이 로컬 경로가 들어가지 않으며 `^0.1.0` peer dependency만 공개된다. 배포 순서와 검증 방법은 [`../clotho/docs/RELEASING.md`](../clotho/docs/RELEASING.md)에 정리되어 있다.
-
-## Cloudflare Workers 배포
-
-독립 에디터는 `app`에서 시작하며 Cloudflare Workers Static Assets용 설정은 [`wrangler.jsonc`](./wrangler.jsonc)에 들어 있다. 로컬에서 실제 화면을 확인하거나 배포 파일을 만들려면 다음 명령을 사용한다.
-
-```bash
-bun run app:dev
-bun run build:app
-bun run dev:cloudflare
-```
+npm release는 GitHub Release와 [publish workflow](./.github/workflows/publish.yml)를 통해 진행합니다. `@kokoa/clotho`의 호환 버전이 먼저 공개되어 있어야 합니다.
 
-Cloudflare Dashboard의 Build command에는 `bun run build:app`, Deploy command에는 `npx wrangler deploy`를 지정한다. 로컬에서 직접 배포할 때만 `bun run deploy:cloudflare`를 실행한다. npm 패키지를 만드는 `bun run build`와 Cloudflare 앱을 만드는 `bun run build:app`은 서로 독립적이다.
+## 문서
 
-이 저장소의 설정에는 custom domain을 넣지 않았으므로 Cloudflare Dashboard의 해당 Worker에서 `clotho-editor.shinkeonkim.com`을 Custom Domain으로 연결하면 된다. Dashboard에서 관리한 설정이 이후 CLI 배포로 덮어써지지 않도록 `routes` 항목도 두지 않았다.
+- [Clotho 저장소](https://github.com/shinkeonkim/clotho)
+- [Clotho Editor demo](https://clotho-editor.shinkeonkim.com/)
+- [Porting 기록](./docs/PORTING.md)
 
 ## 라이선스
 

package/dist/{chunk-Z2K5HFHI.js → chunk-FAI2G3XK.js}

@@ -1,4 +1,4 @@
-import { animationDocumentSchema, computeSnapshot, encodeImageAsset, inlineAssetFromDataUri } from '@kokoa/clotho';
+import { animationDocumentSchema, computeSnapshot, compileDataBindings, encodeImageAsset, inlineAssetFromDataUri, compileLayouts } from '@kokoa/clotho';
 
 // src/export-json.ts
 function animationDocumentToJson(def) {
@@ -201,7 +201,19 @@ function mutateDef(fn, label = "edit", kind = "other") {
     console.warn("[studio.state] invalid mutation", parsed.error.issues);
     return;
   }
-  state.def = parsed.data;
+  const localized = cloned;
+  const next = parsed.data;
+  if (localized.locales) next.locales = localized.locales;
+  next.elements = next.elements.map((element, index) => {
+    const source = localized.elements[index];
+    if (source?.id !== element.id || element.type !== "text") return element;
+    return {
+      ...element,
+      ...source.locales ? { locales: source.locales } : {},
+      ...source.translations ? { translations: source.translations } : {}
+    };
+  });
+  state.def = next;
   state.dirty = true;
   emit();
 }
@@ -280,7 +292,10 @@ function toggleSelectionFor(sel, id) {
 }
 function getCurrentSnapshot() {
   if (!state.def) return /* @__PURE__ */ new Map();
-  return computeSnapshot(state.def, state.currentTime);
+  return computeSnapshot(
+    compileDataBindings(state.def).document,
+    state.currentTime
+  );
 }
 
 // src/legacy/state/history.ts
@@ -705,6 +720,33 @@ function updateMeta(patch) {
     "meta"
   );
 }
+function updateLocales(locales) {
+  mutateDef(
+    (def) => {
+      def.locales = locales;
+    },
+    "\uBB38\uC11C \uC5B8\uC5B4 \uBCC0\uACBD",
+    "meta"
+  );
+}
+function updateData(data) {
+  mutateDef(
+    (def) => {
+      def.data = data;
+    },
+    "\uC0D8\uD50C \uB370\uC774\uD130 \uBCC0\uACBD",
+    "meta"
+  );
+}
+function updateResponsive(responsive) {
+  mutateDef(
+    (def) => {
+      def.responsive = responsive;
+    },
+    "Responsive Stage \uBCC0\uACBD",
+    "canvas"
+  );
+}
 function updateCanvas(patch) {
   const keys = Object.keys(patch).join(", ");
   mutateDef(
@@ -809,6 +851,125 @@ function registerDataUriAsset(dataUri) {
   );
   return id;
 }
+function uniqueLayoutId(def) {
+  const used = new Set(def.layouts.map((layout) => layout.id));
+  let index = 1;
+  while (used.has(`layout-${index}`)) index += 1;
+  return `layout-${index}`;
+}
+function createLayout(elementIds, mode) {
+  if (elementIds.length === 0) return;
+  mutateDef(
+    (def) => {
+      const selected = def.elements.filter(
+        (element) => elementIds.includes(element.id)
+      );
+      if (selected.length === 0) return;
+      const measured = compileLayouts({ ...def, layouts: [] }).boxes;
+      const boxes = selected.flatMap((element) => {
+        const box = measured[element.id];
+        return box ? [box] : [];
+      });
+      const x = boxes.length > 0 ? Math.min(...boxes.map((box) => box.x)) : 0;
+      const y = boxes.length > 0 ? Math.min(...boxes.map((box) => box.y)) : 0;
+      def.layouts = def.layouts.filter(
+        (layout) => !layout.elementIds.some((id) => elementIds.includes(id))
+      );
+      def.layouts.push({
+        id: uniqueLayoutId(def),
+        mode,
+        elementIds: selected.map((element) => element.id),
+        x,
+        y,
+        gap: 16,
+        align: "start",
+        constraints: []
+      });
+      def.elements = compileLayouts(def).document.elements;
+    },
+    `${mode} layout \uC0DD\uC131`,
+    "layout"
+  );
+}
+function detachFromLayout(elementIds) {
+  const ids = new Set(elementIds);
+  mutateDef(
+    (def) => {
+      def.layouts = def.layouts.flatMap((layout) => {
+        const remaining = layout.elementIds.filter((id) => !ids.has(id));
+        return remaining.length === 0 ? [] : [{ ...layout, elementIds: remaining }];
+      });
+    },
+    "layout\uC5D0\uC11C \uBD84\uB9AC",
+    "layout"
+  );
+}
+function layoutIdsFor(elementIds) {
+  if (!state.def) return [];
+  const ids = new Set(elementIds);
+  return state.def.layouts.filter((layout) => layout.elementIds.some((id) => ids.has(id))).map((layout) => layout.id);
+}
+function findLayoutCollisions(def) {
+  const { boxes } = compileLayouts(def);
+  const collisions = [];
+  for (const layout of def.layouts) {
+    for (let firstIndex = 0; firstIndex < layout.elementIds.length; firstIndex += 1) {
+      for (let secondIndex = firstIndex + 1; secondIndex < layout.elementIds.length; secondIndex += 1) {
+        const firstId = layout.elementIds[firstIndex];
+        const secondId = layout.elementIds[secondIndex];
+        const first = boxes[firstId];
+        const second = boxes[secondId];
+        if (!first || !second) continue;
+        const overlaps = first.x < second.x + second.width && first.x + first.width > second.x && first.y < second.y + second.height && first.y + first.height > second.y;
+        if (overlaps) collisions.push({ firstId, secondId });
+      }
+    }
+  }
+  return collisions;
+}
+
+// src/legacy/state/checkpoints.ts
+function addCheckpoint(checkpoint) {
+  mutateDef(
+    (def) => {
+      def.checkpoints.push(checkpoint);
+      def.checkpoints.sort((a, b) => a.time - b.time);
+    },
+    `Checkpoint \uCD94\uAC00: ${checkpoint.id}`,
+    "checkpoint"
+  );
+}
+function updateCheckpoint(id, patch) {
+  mutateDef(
+    (def) => {
+      const index = def.checkpoints.findIndex(
+        (checkpoint) => checkpoint.id === id
+      );
+      if (index < 0) return;
+      def.checkpoints[index] = {
+        ...def.checkpoints[index],
+        ...patch
+      };
+      def.checkpoints.sort((a, b) => a.time - b.time);
+    },
+    `Checkpoint \uC218\uC815: ${id}`,
+    "checkpoint"
+  );
+}
+function deleteCheckpoint(id) {
+  mutateDef(
+    (def) => {
+      def.checkpoints = def.checkpoints.filter(
+        (checkpoint) => checkpoint.id !== id
+      );
+    },
+    `Checkpoint \uC0AD\uC81C: ${id}`,
+    "checkpoint"
+  );
+}
+function uniqueCheckpointId() {
+  return `checkpoint-${Date.now().toString(36)}`;
+}
 
 // src/legacy/studio-groups.ts
 function isGroup(el) {
@@ -953,21 +1114,6 @@ function groupElements(ids) {
   const valid = ids.filter((id) => def.elements.some((e) => e.id === id));
   if (valid.length < 2) return null;
   const newId = uniqueElementId("group");
-  (() => {
-    let minX = Infinity, minY = Infinity;
-    for (const id of valid) {
-      const el = def.elements.find((e) => e.id === id);
-      if (!el) continue;
-      const b = elementBbox(el);
-      if (!b) continue;
-      if (b.x < minX) minX = b.x;
-      if (b.y < minY) minY = b.y;
-    }
-    return {
-      x: Number.isFinite(minX) ? minX : 0,
-      y: Number.isFinite(minY) ? minY : 0
-    };
-  })();
   const group = {
     type: "group",
     id: newId,
@@ -975,6 +1121,7 @@ function groupElements(ids) {
     rotation: 0,
     appearances: [],
     tracks: [],
+    bindings: [],
     // Children keep their absolute coordinates, so the group's own transform starts at
     // the identity. Setting x/y here would shift every member on the next render.
     x: 0,
@@ -1012,6 +1159,122 @@ function placeholderImageUrl() {
   return placeholderUrl;
 }
 
-export { addAppearance, addChapter, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, createAnimation, deleteAnimation, deleteChapter, deleteEffect, deleteElement, downloadAnimationJson, duplicateAnimation, endTransient, findContainingGroup, garbageCollectAnimationAssets, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupBbox, groupElements, importAnimation, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, listAnimations, loadAnimation, markClean, moveElementToEnd, moveElementToFront, moveGroupBy, placeholderImageUrl, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeTrack, removeTrackKeyframe, reorderElement, resetHistory, saveAnimation, setCurrentTime, setDef, setDraft, setElementValueAtTime, setSelection, setTrackKeyframe, subscribe, toggleSelectionFor, undo, ungroupElement, uniqueChapterId, uniqueEffectId, uniqueElementId, updateAppearance, updateCanvas, updateChapter, updateDuration, updateEffect, updateElementBase, updateMeta, updateSettings };
-//# sourceMappingURL=chunk-Z2K5HFHI.js.map
-//# sourceMappingURL=chunk-Z2K5HFHI.js.map
+// src/plugin-host.ts
+var SLOT_KEYS = {
+  toolbar: "toolbarItems",
+  panel: "panels",
+  inspector: "inspectors"
+};
+function viewsFor(plugin, slot) {
+  if (slot === "toolbar") return plugin.toolbarItems ?? {};
+  if (slot === "panel") return plugin.panels ?? {};
+  return plugin.inspectors ?? {};
+}
+function validateEditorPlugin(plugin) {
+  const issues = [];
+  const { id, capabilities, editor } = plugin.manifest;
+  if (!capabilities.includes("editor")) {
+    issues.push({ pluginId: id, message: "editor capability\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4." });
+  }
+  for (const slot of ["toolbar", "panel", "inspector"]) {
+    const declared = new Set(editor?.[SLOT_KEYS[slot]] ?? []);
+    const implemented = new Set(Object.keys(viewsFor(plugin, slot)));
+    for (const viewId of declared) {
+      if (!implemented.has(viewId)) {
+        issues.push({
+          pluginId: id,
+          message: `${slot} ${viewId} \uAD6C\uD604\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.`
+        });
+      }
+    }
+    for (const viewId of implemented) {
+      if (!declared.has(viewId)) {
+        issues.push({
+          pluginId: id,
+          message: `${slot} ${viewId}\uAC00 manifest\uC5D0 \uC5C6\uC2B5\uB2C8\uB2E4.`
+        });
+      }
+    }
+  }
+  return issues;
+}
+function permissionError(pluginId, permission) {
+  return new Error(
+    `Editor plugin ${pluginId}\uC5D0\uB294 ${permission} \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.`
+  );
+}
+function createEditorPluginContext(pluginId, permissions, state2) {
+  return Object.freeze({
+    pluginId,
+    getDocument() {
+      if (!permissions.documentRead)
+        throw permissionError(pluginId, "documentRead");
+      const document2 = state2.getDocument();
+      if (!document2) throw new Error("\uC5F4\uB9B0 \uC560\uB2C8\uBA54\uC774\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      return structuredClone(document2);
+    },
+    replaceDocument(document2) {
+      if (!permissions.documentWrite)
+        throw permissionError(pluginId, "documentWrite");
+      state2.replaceDocument(structuredClone(document2));
+    },
+    getSelection() {
+      if (!permissions.documentRead)
+        throw permissionError(pluginId, "documentRead");
+      return structuredClone(state2.getSelection());
+    },
+    setSelection(selection) {
+      if (!permissions.documentWrite)
+        throw permissionError(pluginId, "documentWrite");
+      state2.setSelection(structuredClone(selection));
+    }
+  });
+}
+function mountEditorPlugins(root, plugins, resolvePermissions, state2) {
+  const cleanups = [];
+  const commands = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const plugin of plugins) {
+    const { id } = plugin.manifest;
+    if (seen.has(id))
+      throw new Error(`Editor plugin ${id}\uAC00 \uC911\uBCF5 \uB4F1\uB85D\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`);
+    seen.add(id);
+    const issues = validateEditorPlugin(plugin);
+    if (issues.length > 0)
+      throw new Error(issues.map((issue) => issue.message).join(" "));
+    const permissions = resolvePermissions(plugin.manifest);
+    if (!permissions.ui) continue;
+    const context = createEditorPluginContext(id, permissions, state2);
+    commands.push(...plugin.commands ?? []);
+    for (const slot of ["toolbar", "panel", "inspector"]) {
+      const target = root.querySelector(
+        `[data-editor-plugin-slot="${slot}"]`
+      );
+      if (!target) continue;
+      for (const viewId of plugin.manifest.editor?.[SLOT_KEYS[slot]] ?? []) {
+        const view = viewsFor(plugin, slot)[viewId];
+        if (!view) continue;
+        const container = document.createElement(
+          slot === "toolbar" ? "span" : "section"
+        );
+        container.dataset.editorPlugin = id;
+        container.dataset.editorPluginView = viewId;
+        container.setAttribute("aria-label", view.label);
+        target.append(container);
+        const cleanup = view.mount(container, context);
+        if (cleanup) cleanups.push(cleanup);
+      }
+    }
+  }
+  return {
+    commands,
+    dispose() {
+      cleanups.reverse().forEach((cleanup) => cleanup());
+      root.querySelectorAll("[data-editor-plugin]").forEach((element) => element.remove());
+    }
+  };
+}
+
+export { addAppearance, addChapter, addCheckpoint, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, createAnimation, createEditorPluginContext, createLayout, deleteAnimation, deleteChapter, deleteCheckpoint, deleteEffect, deleteElement, detachFromLayout, downloadAnimationJson, duplicateAnimation, endTransient, findContainingGroup, findLayoutCollisions, garbageCollectAnimationAssets, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupBbox, groupElements, importAnimation, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, layoutIdsFor, listAnimations, loadAnimation, markClean, mountEditorPlugins, moveElementToEnd, moveElementToFront, moveGroupBy, placeholderImageUrl, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeTrack, removeTrackKeyframe, reorderElement, resetHistory, saveAnimation, 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 };
+//# sourceMappingURL=chunk-FAI2G3XK.js.map
+//# sourceMappingURL=chunk-FAI2G3XK.js.map