@kokoa/clotho-editor 0.1.0 → 0.1.3

package/dist/clotho-editor.css

@@ -4,6 +4,27 @@ body.editor-active {
   overflow: hidden;
 }
 
+body.studio-timeline-popout {
+  min-width: 0;
+  margin: 0;
+  background: var(--color-surface-elevated, #f8fafc);
+  color: var(--color-fg, #0f172a);
+}
+
+body.studio-player-popout {
+  min-width: 0;
+  margin: 0;
+  padding: clamp(1rem, 3vw, 2.5rem);
+  box-sizing: border-box;
+  background: var(--color-bg, #f1f5f9);
+  color: var(--color-fg, #0f172a);
+}
+
+body.studio-player-popout #clotho-player-preview {
+  width: min(100%, 1200px);
+  margin: 0 auto;
+}
+
 @layer components {
   .studio-shell {
     height: calc(100vh - 80px);
@@ -18,10 +39,18 @@ body.editor-active {
     height: 100%;
     flex: 1;
     min-height: 0;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border, #d1d5db);
     border-radius: 0.5rem;
     background-color: var(--color-surface);
     overflow: hidden;
+    box-shadow: 0 8px 30px rgb(15 23 42 / 10%);
+  }
+  .studio-app.is-timeline-detached {
+    grid-template-rows: auto minmax(220px, 1fr) 0 0;
+  }
+  .studio-app.is-timeline-detached .studio-timeline-resizer,
+  .studio-app.is-timeline-detached .studio-timeline-wrap {
+    display: none;
   }
   .studio-timeline-resizer {
     height: 6px;
@@ -33,25 +62,37 @@ body.editor-active {
     transition: background-color 100ms ease-out;
   }
   .studio-timeline-resizer::before {
-    content: "";
+    content: none;
+  }
+  .studio-timeline-resizer-grip {
     position: absolute;
     left: 50%;
     top: 50%;
-    width: 28px;
-    height: 2px;
+    display: grid;
+    gap: 2px;
+    width: 42px;
+    padding: 4px 7px;
     transform: translate(-50%, -50%);
-    background-color: var(--color-fg-muted);
-    border-radius: 1px;
-    opacity: 0.5;
+    border: 1px solid var(--color-border, #9ca3af);
+    border-radius: 999px;
+    background: var(--color-surface-elevated, #f8fafc);
+    box-shadow: 0 1px 4px rgb(15 23 42 / 20%);
+  }
+  .studio-timeline-resizer-grip i {
+    display: block;
+    height: 1px;
+    background: var(--color-fg-muted, #64748b);
   }
   .studio-timeline-resizer:hover,
   .studio-timeline-resizer.is-dragging {
     background-color: var(--color-accent);
   }
-  .studio-timeline-resizer:hover::before,
-  .studio-timeline-resizer.is-dragging::before {
-    background-color: white;
-    opacity: 1;
+  .studio-timeline-resizer:hover .studio-timeline-resizer-grip,
+  .studio-timeline-resizer.is-dragging .studio-timeline-resizer-grip,
+  .studio-timeline-resizer:focus-visible .studio-timeline-resizer-grip {
+    border-color: var(--color-accent, #4f46e5);
+    box-shadow: 0 0 0 3px
+      color-mix(in srgb, var(--color-accent, #4f46e5) 20%, transparent);
   }
   .studio-header {
     display: flex;
@@ -277,7 +318,9 @@ body.editor-active {
     letter-spacing: 0.05em;
   }
   .studio-tool-btn {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
     width: 100%;
     text-align: left;
     padding: 0.35rem 0.5rem;
@@ -289,10 +332,62 @@ body.editor-active {
     cursor: pointer;
     font-size: 0.78rem;
   }
+  .studio-tool-btn kbd {
+    margin-left: auto;
+    min-width: 1.15rem;
+    padding: 0.05rem 0.22rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.22rem;
+    background: var(--color-surface-elevated);
+    color: var(--color-fg-muted);
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    line-height: 1.15;
+    text-align: center;
+  }
+  .studio-tool-btn.is-active kbd {
+    border-color: color-mix(in srgb, currentColor 35%, transparent);
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    color: inherit;
+  }
+  .studio-tool-with-option {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.35rem;
+    align-items: center;
+  }
+  .studio-tool-with-option label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: 0.68rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-tool-with-option input {
+    width: 2.8rem;
+    padding: 0.25rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.25rem;
+    background: var(--color-surface);
+    color: var(--color-fg);
+  }
   .studio-tool-btn:hover {
     border-color: var(--color-accent);
     color: var(--color-accent);
   }
+  .studio-tool-btn.is-active {
+    border-color: var(--color-accent);
+    background: color-mix(
+      in srgb,
+      var(--color-accent) 16%,
+      var(--color-surface)
+    );
+    color: var(--color-accent);
+    box-shadow: inset 3px 0 0 var(--color-accent);
+  }
+  body:not([data-studio-tool="select"]) .studio-canvas {
+    cursor: crosshair;
+  }
   .studio-element-search {
     width: 100%;
     box-sizing: border-box;
@@ -340,6 +435,18 @@ body.editor-active {
     align-items: center;
     gap: 0.25rem;
   }
+  .studio-element-list-item {
+    padding-left: calc(0.35rem + var(--studio-tree-depth, 0) * 0.9rem);
+  }
+  .studio-element-list-item.is-group {
+    background: color-mix(
+      in srgb,
+      var(--color-accent) 9%,
+      var(--color-surface)
+    );
+    border-left: 3px solid var(--color-accent);
+    font-weight: 650;
+  }
   .studio-element-list-item:hover {
     background-color: var(--color-surface);
   }
@@ -726,6 +833,11 @@ body.editor-active {
     gap: 0.4rem;
     min-height: 0;
   }
+  body.studio-timeline-popout > .studio-timeline-wrap {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+  }
   .studio-timeline-tracks-wrap {
     overflow-x: auto;
     overflow-y: hidden;
@@ -755,6 +867,13 @@ body.editor-active {
   .studio-speed input[type="range"] {
     width: 100px;
   }
+  .studio-timeline-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    color: var(--color-fg-muted);
+  }
   .studio-timeline-tracks {
     display: block;
     padding-bottom: 0.25rem;
@@ -785,6 +904,13 @@ body.editor-active {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .studio-tl-element-label {
+    padding-left: calc(0.5rem + var(--studio-tree-depth, 0) * 0.8rem);
+  }
+  .studio-tl-element-row.is-group .studio-tl-gutter {
+    color: var(--color-accent);
+    font-weight: 700;
+  }
   .studio-tl-gutter-header {
     font-weight: 700;
     color: var(--color-accent);
@@ -1094,11 +1220,12 @@ body.editor-active {
     width: min(640px, 92vw);
     max-height: 80vh;
     padding: 0;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border, #d1d5db);
     border-radius: 0.5rem;
-    background-color: var(--color-surface);
-    color: var(--color-fg);
+    background-color: var(--color-surface, #ffffff);
+    color: var(--color-fg, #111827);
     overflow: hidden;
+    box-shadow: 0 24px 64px rgb(0 0 0 / 35%);
   }
   .studio-dialog[open] {
     display: flex;
@@ -1111,8 +1238,8 @@ body.editor-active {
     width: min(420px, 92vw);
   }
   .studio-dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
+    background-color: rgb(15 23 42 / 55%);
+    backdrop-filter: blur(2px);
   }
   .studio-dialog-header {
     display: flex;
@@ -1120,7 +1247,7 @@ body.editor-active {
     align-items: center;
     padding: 0.6rem 0.85rem;
     border-bottom: 1px solid var(--color-border);
-    background-color: var(--color-surface-elevated);
+    background-color: var(--color-surface-elevated, #f8fafc);
   }
   .studio-dialog-header h2 {
     margin: 0;

package/dist/index.d.ts

@@ -6,10 +6,45 @@ interface StudioProps {
 }
 declare function Studio({ initial, onSave }: StudioProps): React.JSX.Element;
 
+interface AnimationSummary {
+    id: string;
+    title: string;
+    description: string;
+    updatedAt?: string;
+    source?: "saved" | "example";
+}
+interface AnimationRepository {
+    list(): Promise<AnimationSummary[]>;
+    load(id: string): Promise<AnimationDocument>;
+    create(id: string, title: string): Promise<AnimationDocument>;
+    save(def: AnimationDocument): Promise<AnimationDocument>;
+    delete(id: string): Promise<void>;
+}
+interface LocalStorageRepositoryOptions {
+    storageKey?: string;
+    examples?: readonly AnimationDocument[];
+    storage?: Pick<Storage, "getItem" | "setItem" | "removeItem">;
+}
+declare function createLocalStorageRepository(options?: LocalStorageRepositoryOptions): AnimationRepository;
+
+type ImageUploadResolver = (file: File) => Promise<string> | string;
+
 interface StudioMountProps {
     initialId?: string;
+    repository?: AnimationRepository;
+    editorTitle?: string;
+    resolveImage?: ImageUploadResolver;
 }
-declare function StudioMount({ initialId, }: StudioMountProps): React.JSX.Element;
+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";
@@ -127,6 +162,7 @@ declare function configureApi(options: {
 }): void;
 /** The base currently in use, for hosts that need to build matching links. */
 declare function apiBaseUrl(): string;
+declare function configureAnimationRepository(next: AnimationRepository): void;
 
 interface HostOptions {
     /** Image used when inserting a placeholder image element. */
@@ -135,4 +171,4 @@ interface HostOptions {
 declare function configureHost(options: HostOptions): void;
 declare function placeholderImageUrl(): string;
 
-export { type HistoryEntry, type HistoryKind, type HostOptions, type Selection, Studio, StudioMount, type StudioMountProps, type StudioProps, addAppearance, addChapter, addEffect, addElement, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureApi, configureHost, deleteChapter, deleteEffect, deleteElement, endTransient, 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, updateMeta, updateSettings };
+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, updateMeta, updateSettings };

package/dist/index.js

@@ -1,7 +1,9 @@
-export { addAppearance, addChapter, addEffect, addElement, apiBaseUrl, beginTransient, canRedo, canUndo, childIdsOf, configureApi, configureHost, deleteChapter, deleteEffect, deleteElement, endTransient, 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, updateMeta, updateSettings } from './chunk-UE32Q6U5.js';
+import { downloadAnimationJson, configureAnimationRepository } from './chunk-Z2K5HFHI.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, updateMeta, updateSettings } from './chunk-Z2K5HFHI.js';
 import { useState, useEffect, useRef } from 'react';
 import { usePlayer, AnimationStage } from '@kokoa/clotho/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { animationDocumentSchema } from '@kokoa/clotho';
 
 function elementsOf(def) {
   return def.elements;
@@ -98,6 +100,15 @@ function Studio({ initial, onSave }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "studio-preview", children: [
       /* @__PURE__ */ jsxs("div", { className: "studio-preview-bar", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "studio-btn",
+            onClick: () => downloadAnimationJson(def),
+            children: "JSON \uB0B4\uBCF4\uB0B4\uAE30"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -224,7 +235,7 @@ var PRESET_HTML = CANVAS_PRESETS.map(
 var SKELETON = `
 <div id="studio-app" class="studio-app">
   <header class="studio-header">
-    <h1 class="studio-header-title">\u{1F3AC} \uC560\uB2C8\uBA54\uC774\uC158 \uC2A4\uD29C\uB514\uC624</h1>
+    <h1 id="studio-editor-title" class="studio-header-title">Clotho Editor</h1>
     <div class="studio-header-actions">
       <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>
@@ -235,6 +246,10 @@ var SKELETON = `
       <span id="studio-id-display" class="studio-id-display"></span>
       <span id="studio-status" class="studio-status" aria-live="polite">\uB300\uAE30 \uC911</span>
       <button type="button" id="studio-save" class="studio-btn studio-btn-primary" aria-label="\uC800\uC7A5" disabled>\u{1F4BE} \uC800\uC7A5 (\u2318S)</button>
+      <button type="button" id="studio-export-json" class="studio-btn" aria-label="\uD604\uC7AC \uC560\uB2C8\uBA54\uC774\uC158\uC744 JSON \uD30C\uC77C\uB85C \uB0B4\uBCF4\uB0B4\uAE30" disabled>\u2B07 JSON \uB0B4\uBCF4\uB0B4\uAE30</button>
+      <button type="button" id="studio-player-preview" class="studio-btn" aria-label="\uC2E4\uC81C \uC560\uB2C8\uBA54\uC774\uC158 \uCEF4\uD3EC\uB10C\uD2B8 \uBBF8\uB9AC\uBCF4\uAE30" aria-pressed="false">\u2197 \uC2E4\uC81C \uBBF8\uB9AC\uBCF4\uAE30</button>
+      <button type="button" id="studio-import-json" class="studio-btn" aria-label="JSON \uD30C\uC77C\uC5D0\uC11C \uC560\uB2C8\uBA54\uC774\uC158 \uAC00\uC838\uC624\uAE30">\u2B06 JSON \uAC00\uC838\uC624\uAE30</button>
+      <input type="file" id="studio-import-file" accept="application/json,.json" hidden />
       <button type="button" id="studio-delete" class="studio-btn studio-btn-danger" aria-label="\uC0AD\uC81C" disabled>\u{1F5D1} \uC0AD\uC81C</button>
     </div>
   </header>
@@ -242,15 +257,16 @@ var SKELETON = `
   <div class="studio-body">
     <aside class="studio-tools" aria-label="\uC694\uC18C \uCD94\uAC00">
       <div class="studio-tools-section">
-        <div class="studio-tools-title">\uC694\uC18C \uCD94\uAC00</div>
-        <button type="button" class="studio-tool-btn" data-add-element="rect" title="\uC0AC\uAC01\uD615" aria-label="\uC0AC\uAC01\uD615 \uCD94\uAC00">\u25A1 Rect</button>
-        <button type="button" class="studio-tool-btn" data-add-element="circle" title="\uC6D0" aria-label="\uC6D0 \uCD94\uAC00">\u25CB Circle</button>
-        <button type="button" class="studio-tool-btn" data-add-element="line" title="\uC120" aria-label="\uC120 \uCD94\uAC00">\uFF0F Line</button>
-        <button type="button" class="studio-tool-btn" data-add-element="arrow" title="\uD654\uC0B4\uD45C" aria-label="\uD654\uC0B4\uD45C \uCD94\uAC00">\u2197 Arrow</button>
-        <button type="button" class="studio-tool-btn" data-add-element="text" title="\uD14D\uC2A4\uD2B8" aria-label="\uD14D\uC2A4\uD2B8 \uCD94\uAC00">T Text</button>
-        <button type="button" class="studio-tool-btn" data-add-element="image" title="\uC774\uBBF8\uC9C0" aria-label="\uC774\uBBF8\uC9C0 \uCD94\uAC00">\u{1F5BC} Image</button>
-        <button type="button" class="studio-tool-btn" data-add-element="path" title="SVG path" aria-label="SVG path \uCD94\uAC00">\u270E Path</button>
-        <button type="button" class="studio-tool-btn" data-add-element="polygon" title="\uB2E4\uAC01\uD615" aria-label="\uB2E4\uAC01\uD615 \uCD94\uAC00">\u2B22 Polygon</button>
+        <div class="studio-tools-title">\uB3C4\uAD6C</div>
+        <button type="button" class="studio-tool-btn is-active" data-studio-tool="select" aria-pressed="true" title="\uC120\uD0DD \xB7 \uC774\uB3D9 \xB7 \uD06C\uAE30 (V)"><span>\u2196 \uC120\uD0DD \xB7 \uC774\uB3D9 \xB7 \uD06C\uAE30</span><kbd>V</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="rect" title="\uC0AC\uAC01\uD615 (R)" aria-label="\uC0AC\uAC01\uD615 \uB3C4\uAD6C"><span>\u25A1 Rect</span><kbd>R</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="circle" title="\uC6D0 (O)" aria-label="\uC6D0 \uB3C4\uAD6C"><span>\u25CB Circle</span><kbd>O</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="line" title="\uC120 (L)" aria-label="\uC120 \uB3C4\uAD6C"><span>\uFF0F Line</span><kbd>L</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="arrow" title="\uD654\uC0B4\uD45C (A)" aria-label="\uD654\uC0B4\uD45C \uB3C4\uAD6C"><span>\u2197 Arrow</span><kbd>A</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="text" title="\uD14D\uC2A4\uD2B8 (T)" aria-label="\uD14D\uC2A4\uD2B8 \uB3C4\uAD6C"><span>T Text</span><kbd>T</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="image" title="\uC774\uBBF8\uC9C0 (I)" aria-label="\uC774\uBBF8\uC9C0 \uB3C4\uAD6C"><span>\u{1F5BC} Image</span><kbd>I</kbd></button>
+        <button type="button" class="studio-tool-btn" data-add-element="path" title="Path (B)" aria-label="Path \uB3C4\uAD6C"><span>\u270E Path</span><kbd>B</kbd></button>
+        <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-tools-section">
@@ -297,7 +313,7 @@ var SKELETON = `
     </aside>
   </div>
 
-  <div id="studio-timeline-resizer" class="studio-timeline-resizer" role="separator" aria-orientation="horizontal" aria-label="\uD0C0\uC784\uB77C\uC778 \uC601\uC5ED \uD06C\uAE30 \uC870\uC815"></div>
+  <div id="studio-timeline-resizer" class="studio-timeline-resizer" role="separator" aria-orientation="horizontal" aria-label="\uD0C0\uC784\uB77C\uC778 \uC601\uC5ED \uD06C\uAE30 \uC870\uC815" tabindex="0"><span class="studio-timeline-resizer-grip" aria-hidden="true"><i></i><i></i><i></i></span></div>
   <footer class="studio-timeline-wrap">
     <div class="studio-timeline-header">
       <button type="button" id="studio-play" class="studio-btn">\u25B6 Play</button>
@@ -306,6 +322,8 @@ var SKELETON = `
         <input type="range" id="studio-speed" min="0.25" max="3" step="0.25" value="1" />
         <span id="studio-speed-value">1.00x</span>
       </label>
+      <label class="studio-timeline-option"><input type="checkbox" id="studio-preview-loop" /> \uBB34\uD55C \uC7AC\uC0DD</label>
+      <button type="button" id="studio-detach-timeline" class="studio-btn" aria-pressed="false">\u25A3 \uD0C0\uC784\uB77C\uC778 \uBD84\uB9AC</button>
       <span class="studio-timeline-spacer"></span>
       <button type="button" id="studio-add-step" class="studio-btn">\uFF0B Chapter \uCD94\uAC00</button>
     </div>
@@ -349,6 +367,10 @@ var SKELETON = `
           <tr><th>\u2318 S</th><td>\uC800\uC7A5</td></tr>
           <tr><th>\u2318 Z / \u2318 \u21E7 Z</th><td>Undo / Redo</td></tr>
           <tr><th>\u2318 C / V / X</th><td>\uC694\uC18C \uBCF5\uC0AC / \uBD99\uC5EC\uB123\uAE30 / \uC798\uB77C\uB0B4\uAE30</td></tr>
+          <tr><th>V / R / O</th><td>\uC120\uD0DD / \uC0AC\uAC01\uD615 / \uC6D0 \uB3C4\uAD6C</td></tr>
+          <tr><th>L / A</th><td>\uC120 / \uD654\uC0B4\uD45C \uB3C4\uAD6C</td></tr>
+          <tr><th>T / I / B / Y</th><td>\uD14D\uC2A4\uD2B8 / \uC774\uBBF8\uC9C0 / Path / \uB2E4\uAC01\uD615 \uB3C4\uAD6C</td></tr>
+          <tr><th>\u2318\xB7Ctrl\xB7Shift + \uD074\uB9AD</th><td>\uC5EC\uB7EC \uC694\uC18C \uC120\uD0DD \uB610\uB294 \uC120\uD0DD \uD574\uC81C</td></tr>
           <tr><th>Delete / Backspace</th><td>\uC120\uD0DD\uB41C \uC694\uC18C \uB610\uB294 step \uC0AD\uC81C</td></tr>
           <tr><th>?</th><td>\uC774 \uD654\uBA74 \uC5F4\uAE30</td></tr>
           <tr><th>Esc</th><td>\uC120\uD0DD \uD574\uC81C / \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB2EB\uAE30</td></tr>
@@ -400,26 +422,115 @@ var SKELETON = `
 </div>
 `;
 function StudioMount({
-  initialId
+  initialId,
+  repository,
+  editorTitle = "Clotho Editor",
+  resolveImage
 }) {
   const inited = useRef(false);
   useEffect(() => {
     if (inited.current) return;
     inited.current = true;
+    if (repository) configureAnimationRepository(repository);
     let disposed = false;
-    void import('./main-SWHHYTLM.js').then(({ initStudio }) => {
+    void import('./main-5YXLTYPQ.js').then(({ initStudio }) => {
       if (disposed) return;
-      initStudio(initialId ? { initialId } : void 0);
+      initStudio({ initialId, editorTitle, resolveImage });
     });
     return () => {
       disposed = true;
       document.body.classList.remove("editor-active");
       document.documentElement.classList.remove("editor-active");
     };
-  }, [initialId]);
+  }, [editorTitle, initialId, repository, resolveImage]);
   return /* @__PURE__ */ jsx("section", { className: "studio-shell w-full", "data-pagefind-ignore": "all", children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: SKELETON } }) });
 }
+function browserStorage() {
+  if (typeof localStorage === "undefined")
+    throw new Error("\uC774 \uC800\uC7A5\uC18C\uB294 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  return localStorage;
+}
+function createLocalStorageRepository(options = {}) {
+  const prefix = options.storageKey ?? "clotho-editor.animations";
+  const examples = new Map(
+    (options.examples ?? []).map((value) => {
+      const def = animationDocumentSchema.parse(value);
+      return [def.id, def];
+    })
+  );
+  const storage = () => options.storage ?? browserStorage();
+  const indexKey = `${prefix}:index`;
+  const documentKey = (id) => `${prefix}:document:${id}`;
+  const readIds = () => {
+    const value = storage().getItem(indexKey);
+    if (!value) return [];
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed.filter((id) => typeof id === "string") : [];
+    } catch {
+      return [];
+    }
+  };
+  const write = (def) => {
+    const parsed = animationDocumentSchema.parse(def);
+    const ids = readIds();
+    if (!ids.includes(parsed.id))
+      storage().setItem(indexKey, JSON.stringify([...ids, parsed.id]));
+    storage().setItem(documentKey(parsed.id), JSON.stringify(parsed));
+    return parsed;
+  };
+  const read = (id) => {
+    const value = storage().getItem(documentKey(id));
+    return value ? animationDocumentSchema.parse(JSON.parse(value)) : null;
+  };
+  return {
+    async list() {
+      const saved = readIds().map((id) => read(id)).filter((def) => def !== null);
+      const savedIds = new Set(saved.map((def) => def.id));
+      return [
+        ...saved.map((def) => ({
+          id: def.id,
+          title: def.title || def.id,
+          description: def.description,
+          source: "saved"
+        })),
+        ...[...examples.values()].filter((def) => !savedIds.has(def.id)).map((def) => ({
+          id: def.id,
+          title: def.title || def.id,
+          description: def.description,
+          source: "example"
+        }))
+      ];
+    },
+    async load(id) {
+      const def = read(id) ?? examples.get(id);
+      if (!def) throw new Error(`'${id}' \uC560\uB2C8\uBA54\uC774\uC158\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.`);
+      return structuredClone(def);
+    },
+    async create(id, title) {
+      if (read(id)) throw new Error(`'${id}' \uC560\uB2C8\uBA54\uC774\uC158\uC774 \uC774\uBBF8 \uC788\uC2B5\uB2C8\uB2E4.`);
+      return write(
+        animationDocumentSchema.parse({
+          clothoVersion: 1,
+          id,
+          title,
+          description: ""
+        })
+      );
+    },
+    async save(def) {
+      return write(def);
+    },
+    async delete(id) {
+      storage().removeItem(documentKey(id));
+      storage().setItem(
+        indexKey,
+        JSON.stringify(readIds().filter((value) => value !== id))
+      );
+    }
+  };
+}
 
-export { Studio, StudioMount };
+export { Studio, StudioMount, createLocalStorageRepository };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map