@kokoa/clotho-editor 0.1.4 → 0.2.0

package/dist/clotho-editor.css

@@ -2051,3 +2051,132 @@ body.studio-player-popout #clotho-player-preview {
     margin-top: 0.4rem;
   }
 }
+
+.studio-plugin-toolbar {
+  display: contents;
+}
+
+.studio-plugin-panels,
+.studio-plugin-inspectors {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.studio-plugin-panels > section,
+.studio-plugin-inspectors > section {
+  padding: 0.65rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.55rem;
+  background: var(--color-surface);
+}
+
+.studio-template-panel {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.studio-template-select {
+  width: 100%;
+  padding: 0.35rem 0.45rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.3rem;
+  background: var(--color-surface);
+  color: var(--color-fg);
+}
+
+.studio-template-status[data-error="true"] {
+  color: var(--color-danger);
+}
+
+.studio-checkpoint-card {
+  margin-bottom: 0.7rem;
+  padding: 0.65rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  background: var(--color-surface-raised, var(--color-surface));
+}
+
+.studio-responsive-grid {
+  display: grid;
+  gap: 0.6rem;
+  margin-top: 0.65rem;
+}
+
+.studio-responsive-grid figure {
+  margin: 0;
+  padding: 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.45rem;
+  overflow: hidden;
+  background: var(--color-canvas);
+}
+
+.studio-responsive-grid figcaption {
+  margin-bottom: 0.35rem;
+  color: var(--color-fg-muted);
+  font-size: 0.7rem;
+}
+
+.studio-responsive-grid svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.studio-profile {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.55rem 0;
+}
+.studio-profile > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.studio-profile dt {
+  color: var(--color-fg-muted);
+}
+.studio-profile dd {
+  margin: 0;
+  font-family: var(--font-mono);
+}
+
+.studio-lint-list {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0;
+  list-style: none;
+}
+.studio-lint-list button {
+  width: 100%;
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.45rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.4rem;
+  background: var(--color-surface);
+  color: var(--color-fg);
+  text-align: left;
+}
+.studio-lint-list span {
+  color: var(--color-fg-muted);
+  font-size: 0.72rem;
+}
+.studio-lint-list em {
+  color: var(--color-accent);
+  font-size: 0.68rem;
+  font-style: normal;
+}
+.studio-lint-compare {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+}
+.studio-lint-compare figure {
+  min-width: 0;
+  margin: 0;
+}
+.studio-lint-compare svg {
+  width: 100%;
+  height: auto;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnimationDocument, SnapshotMap, Appearance, AnimationElement, TrackKeyframe, Chapter, AnimationEffect, GroupElement } from '@kokoa/clotho';
+import { AnimationDocument, SnapshotMap, Appearance, AnimationElement, TrackKeyframe, Chapter, AnimationEffect, DataValue, LayoutMode, Checkpoint, StoryManifest, StoryEdge, AnimationTemplate, GroupElement, ParameterSchema } from '@kokoa/clotho';
 
 interface StudioProps {
     initial: AnimationDocument;
@@ -29,22 +29,12 @@ declare function createLocalStorageRepository(options?: LocalStorageRepositoryOp
 
 type ImageUploadResolver = (file: File) => Promise<string> | string;
 
-interface StudioMountProps {
-    initialId?: string;
-    repository?: AnimationRepository;
-    editorTitle?: string;
-    resolveImage?: ImageUploadResolver;
+interface PaletteCommand {
+    id: string;
+    label: string;
+    hint?: string;
+    run: () => void;
 }
-declare function StudioMount({ initialId, repository, editorTitle, resolveImage, }: StudioMountProps): React.JSX.Element;
-
-/** 검증된 애니메이션 문서를 읽기 쉬운 JSON으로 변환한다. */
-declare function animationDocumentToJson(def: AnimationDocument): string;
-/** 어떤 image 요소에서도 참조하지 않는 asset을 제거한 새 문서를 반환한다. */
-declare function garbageCollectAnimationAssets(def: AnimationDocument): AnimationDocument;
-/** 문서 ID를 운영체제에서 안전하게 사용할 수 있는 파일 이름으로 바꾼다. */
-declare function animationDocumentFileName(def: AnimationDocument): string;
-/** 현재 문서를 브라우저에서 JSON 파일로 내려받는다. */
-declare function downloadAnimationJson(def: AnimationDocument): void;
 
 type Selection = {
     kind: "none";
@@ -61,7 +51,7 @@ type Selection = {
     kind: "effect";
     effectId: string;
 };
-type HistoryKind = "meta" | "canvas" | "settings" | "add" | "delete" | "move" | "style" | "rotate" | "resize" | "reorder" | "track" | "appearance" | "chapter" | "effect" | "group" | "asset" | "other";
+type HistoryKind = "meta" | "canvas" | "settings" | "add" | "delete" | "move" | "style" | "rotate" | "resize" | "reorder" | "track" | "appearance" | "chapter" | "effect" | "group" | "layout" | "checkpoint" | "asset" | "other";
 interface HistoryEntry {
     snap: string;
     label: string;
@@ -127,6 +117,8 @@ declare function updateDuration(ms: number): void;
 declare function updateMeta(patch: Partial<Pick<AnimationDocument, "title" | "description">>): void;
 /** Update the locales offered to localized text elements in this document. */
 declare function updateLocales(locales: string[]): void;
+declare function updateData(data: Record<string, DataValue>): void;
+declare function updateResponsive(responsive: NonNullable<AnimationDocument["responsive"]>): void;
 declare function updateCanvas(patch: Partial<AnimationDocument["canvas"]>): void;
 declare function updateSettings(patch: Partial<AnimationDocument["settings"]>): void;
 declare function uniqueElementId(type: string): string;
@@ -152,6 +144,107 @@ declare function registerInlineAsset(bytes: Uint8Array, mime: string): string;
  */
 declare function registerDataUriAsset(dataUri: string): string;
 
+interface LayoutCollision {
+    readonly firstId: string;
+    readonly secondId: string;
+}
+declare function createLayout(elementIds: readonly string[], mode: LayoutMode): void;
+declare function detachFromLayout(elementIds: readonly string[]): void;
+declare function layoutIdsFor(elementIds: readonly string[]): string[];
+declare function findLayoutCollisions(def: AnimationDocument): LayoutCollision[];
+
+declare function addCheckpoint(checkpoint: Checkpoint): void;
+declare function updateCheckpoint(id: string, patch: Partial<Checkpoint>): void;
+declare function deleteCheckpoint(id: string): void;
+declare function uniqueCheckpointId(): string;
+
+type EditorPluginSlot = "toolbar" | "panel" | "inspector";
+interface EditorPluginManifestLike {
+    id: string;
+    name: string;
+    capabilities: readonly string[];
+    editor?: {
+        toolbarItems?: readonly string[];
+        panels?: readonly string[];
+        inspectors?: readonly string[];
+    };
+}
+interface EditorPluginPermissions {
+    ui?: boolean;
+    documentRead?: boolean;
+    documentWrite?: boolean;
+}
+interface EditorPluginContext {
+    readonly pluginId: string;
+    getDocument(): AnimationDocument;
+    replaceDocument(document: AnimationDocument): void;
+    getSelection(): Selection;
+    setSelection(selection: Selection): void;
+}
+interface EditorPluginView {
+    id: string;
+    label: string;
+    mount(container: HTMLElement, context: EditorPluginContext): void | (() => void);
+}
+interface EditorPluginDefinition {
+    manifest: EditorPluginManifestLike;
+    toolbarItems?: Record<string, EditorPluginView>;
+    panels?: Record<string, EditorPluginView>;
+    inspectors?: Record<string, EditorPluginView>;
+    commands?: readonly PaletteCommand[];
+}
+type EditorPluginPermissionResolver = (plugin: EditorPluginManifestLike) => EditorPluginPermissions;
+type DocumentImporter = (input: unknown) => AnimationDocument | Promise<AnimationDocument>;
+interface EditorPluginHostState {
+    getDocument(): AnimationDocument | null;
+    replaceDocument(document: AnimationDocument): void;
+    getSelection(): Selection;
+    setSelection(selection: Selection): void;
+}
+interface EditorPluginMountResult {
+    commands: PaletteCommand[];
+    dispose(): void;
+}
+interface EditorPluginIssue {
+    pluginId: string;
+    message: string;
+}
+declare function validateEditorPlugin(plugin: EditorPluginDefinition): EditorPluginIssue[];
+declare function createEditorPluginContext(pluginId: string, permissions: EditorPluginPermissions, state: EditorPluginHostState): EditorPluginContext;
+declare function mountEditorPlugins(root: HTMLElement, plugins: readonly EditorPluginDefinition[], resolvePermissions: EditorPluginPermissionResolver, state: EditorPluginHostState): EditorPluginMountResult;
+
+interface StoryEditorOptions {
+    manifest: StoryManifest;
+    onChange?(manifest: StoryManifest): void;
+}
+declare function replaceStoryNodeDocument(manifest: StoryManifest, nodeId: string, document: AnimationDocument): StoryManifest;
+declare function appendStoryEdge(manifest: StoryManifest, edge: StoryEdge): StoryManifest;
+declare function createStoryEditorPlugin(options: StoryEditorOptions): EditorPluginDefinition;
+
+interface StudioMountProps {
+    initialId?: string;
+    repository?: AnimationRepository;
+    editorTitle?: string;
+    resolveImage?: ImageUploadResolver;
+    importDocument?: DocumentImporter;
+    plugins?: readonly EditorPluginDefinition[];
+    resolvePluginPermissions?: EditorPluginPermissionResolver;
+    /** Trusted build-time templates shown as a parameter panel. */
+    templates?: readonly AnimationTemplate[];
+    /** Optional multi-document Story Graph edited alongside the active node timeline. */
+    story?: StoryEditorOptions;
+}
+declare function StudioMount({ initialId, repository, editorTitle, resolveImage, importDocument, plugins, resolvePluginPermissions, templates, story, }: StudioMountProps): React.JSX.Element;
+
+/** 검증된 애니메이션 문서를 읽기 쉬운 JSON으로 변환한다. */
+declare function animationDocumentToJson(def: AnimationDocument): string;
+/** 어떤 image 요소에서도 참조하지 않는 asset을 제거한 새 문서를 반환한다. */
+declare function garbageCollectAnimationAssets(def: AnimationDocument): AnimationDocument;
+/** 문서 ID를 운영체제에서 안전하게 사용할 수 있는 파일 이름으로 바꾼다. */
+declare function animationDocumentFileName(def: AnimationDocument): string;
+/** 현재 문서를 브라우저에서 JSON 파일로 내려받는다. */
+declare function downloadAnimationJson(def: AnimationDocument): void;
+
 declare function isGroup(el: AnimationElement): el is GroupElement;
 /** Direct children of a group, in document order (which is also paint order). */
 declare function childIdsOf(groupId: string): string[];
@@ -173,4 +266,42 @@ interface HostOptions {
 declare function configureHost(options: HostOptions): void;
 declare function placeholderImageUrl(): string;
 
-export { type AnimationRepository, type AnimationSummary, type HistoryEntry, type HistoryKind, type HostOptions, type ImageUploadResolver, type LocalStorageRepositoryOptions, type Selection, Studio, StudioMount, type StudioMountProps, type StudioProps, addAppearance, addChapter, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, createLocalStorageRepository, 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 };
+declare function initialParameterValue(schema: ParameterSchema): unknown;
+declare function parameterInputValue(schema: ParameterSchema, raw: string | boolean): unknown;
+/** Built-in authoring panel for trusted templates registered by the host. */
+declare function createTemplateEditorPlugin(templates: readonly AnimationTemplate[]): EditorPluginDefinition;
+
+declare function createVisualRegressionPlugin(): EditorPluginDefinition;
+
+declare const RESPONSIVE_VIEWPORTS: readonly [{
+    readonly id: "compact";
+    readonly label: "모바일";
+    readonly width: 375;
+}, {
+    readonly id: "regular";
+    readonly label: "본문";
+    readonly width: 768;
+}, {
+    readonly id: "wide";
+    readonly label: "넓은 화면";
+    readonly width: 1280;
+}];
+declare function addDefaultResponsiveVariants(document: AnimationDocument): AnimationDocument;
+declare function createResponsiveInspectorPlugin(): EditorPluginDefinition;
+
+interface SceneProfile {
+    elementCount: number;
+    trackCount: number;
+    keyframeCount: number;
+    sampleCount: number;
+    totalMs: number;
+    averageMs: number;
+    maxMs: number;
+    overBudget: boolean;
+}
+declare function profileAnimation(document: AnimationDocument, sampleCount?: number, frameBudgetMs?: number): SceneProfile;
+declare function createPerformanceProfilerPlugin(): EditorPluginDefinition;
+
+declare function createLinterPlugin(): EditorPluginDefinition;
+
+export { type AnimationRepository, type AnimationSummary, type DocumentImporter, type EditorPluginContext, type EditorPluginDefinition, type EditorPluginHostState, type EditorPluginManifestLike, type EditorPluginMountResult, type EditorPluginPermissionResolver, type EditorPluginPermissions, type EditorPluginSlot, type EditorPluginView, type HistoryEntry, type HistoryKind, type HostOptions, type ImageUploadResolver, type LocalStorageRepositoryOptions, RESPONSIVE_VIEWPORTS, type SceneProfile, type Selection, type StoryEditorOptions, Studio, StudioMount, type StudioMountProps, type StudioProps, addAppearance, addChapter, addCheckpoint, addDefaultResponsiveVariants, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, appendStoryEdge, beginTransient, canRedo, canUndo, childIdsOf, configureAnimationRepository, configureApi, configureHost, createEditorPluginContext, createLayout, createLinterPlugin, createLocalStorageRepository, createPerformanceProfilerPlugin, createResponsiveInspectorPlugin, createStoryEditorPlugin, createTemplateEditorPlugin, createVisualRegressionPlugin, deleteChapter, deleteCheckpoint, deleteEffect, deleteElement, detachFromLayout, downloadAnimationJson, endTransient, findLayoutCollisions, garbageCollectAnimationAssets, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupElements, initialParameterValue, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, layoutIdsFor, markClean, mountEditorPlugins, moveElementToEnd, moveElementToFront, parameterInputValue, placeholderImageUrl, profileAnimation, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeTrack, removeTrackKeyframe, reorderElement, replaceStoryNodeDocument, 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 };