@kokoa/clotho-editor 0.2.0 → 0.4.0

package/dist/clotho-editor.css

@@ -1096,6 +1096,232 @@ body.studio-player-popout #clotho-player-preview {
     color: var(--color-accent);
     background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15));
   }
+  /* Canvas overlay for the camera. Drawn into the editing SVG, which keeps the
+     full-canvas viewBox, so the frame is the part a reader will actually see. */
+  .studio-camera-frame-scrim {
+    /* Fixed rather than themed: this dims the *document's* canvas, which keeps its
+       own background whatever the editor chrome is doing. A themed value goes
+       invisible exactly when the editor is dark and the canvas is white. */
+    fill: rgba(15, 23, 42, 0.32);
+  }
+  .studio-camera-frame-rect {
+    fill: none;
+    stroke: #7c3aed;
+    stroke-width: 2;
+    stroke-dasharray: 6 4;
+  }
+  .studio-camera-frame.is-selected .studio-camera-frame-rect {
+    stroke-dasharray: none;
+    stroke-width: 2.5;
+  }
+  .studio-camera-frame-rect[data-camera-frame] {
+    cursor: pointer;
+  }
+  /* Transparent, but it takes the pan drag — so it needs a fill to be hit. */
+  .studio-camera-frame-body {
+    fill: transparent;
+    cursor: grab;
+  }
+  .studio-camera-frame-body:active {
+    cursor: grabbing;
+  }
+  .studio-camera-frame-handle {
+    fill: var(--color-surface-elevated, #fff);
+    stroke: #7c3aed;
+    stroke-width: 1.5;
+    cursor: nwse-resize;
+  }
+  .studio-camera-frame-handle:hover {
+    fill: #7c3aed;
+  }
+  .studio-camera-frame-label {
+    fill: #7c3aed;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .studio-camera-frame-warning {
+    fill: #ef4444;
+    font-family: var(--font-mono);
+    font-size: 11px;
+  }
+  .studio-spotlight-preview-label {
+    fill: #f59e0b;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .studio-camera-readout {
+    padding: 0.4rem 0.55rem;
+    margin-bottom: 0.4rem;
+    border-radius: 6px;
+    background-color: var(--color-surface);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-camera-issue {
+    color: #ef4444;
+  }
+  .studio-camera-focus > summary {
+    cursor: pointer;
+    padding: 0.3rem 0;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+  }
+  .studio-camera-track {
+    padding: 0.3rem 0;
+    border-top: 1px solid var(--color-border);
+  }
+  .studio-camera-track-head {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+  }
+  .studio-camera-track-now {
+    margin-left: auto;
+    color: var(--color-fg-muted);
+    font-size: 0.68rem;
+  }
+  .studio-camera-track .studio-props-empty {
+    margin: 0.2rem 0 0;
+    padding: 0;
+    text-align: left;
+    font-size: 0.68rem;
+  }
+  .studio-camera-control {
+    color: #7c3aed;
+  }
+  .studio-camera-field-label {
+    margin: 0.5rem 0 0.25rem;
+    font-size: 0.72rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-camera-range {
+    margin: 0.45rem 0;
+  }
+  .studio-camera-range-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 0.72rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-camera-range-value {
+    font-family: var(--font-mono);
+    color: var(--color-fg);
+  }
+  .studio-camera-range-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .studio-camera-range-row input[type="range"] {
+    flex: 1;
+    min-width: 0;
+  }
+  .studio-camera-range-row input[type="number"] {
+    width: 5.2rem;
+    flex: 0 0 auto;
+  }
+  .studio-camera-hint {
+    margin: 0.2rem 0 0;
+    font-size: 0.66rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-camera-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: 0.25rem 0;
+  }
+  .studio-chip {
+    padding: 0.1rem 0.45rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: none;
+    color: var(--color-fg-muted);
+    font: inherit;
+    font-size: 0.68rem;
+    cursor: pointer;
+  }
+  .studio-chip.is-on {
+    border-color: #7c3aed;
+    background-color: color-mix(in srgb, #7c3aed 18%, transparent);
+    color: var(--color-fg);
+  }
+  .studio-camera-focus-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    margin: 0.3rem 0;
+  }
+  /* The target list scrolls: a document with forty elements must not push the
+     padding and maxZoom controls off the panel. */
+  .studio-camera-targets {
+    max-height: 11rem;
+    overflow-y: auto;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    padding: 0.2rem;
+  }
+  .studio-camera-target {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.15rem 0.3rem;
+    border-radius: 4px;
+    font-size: 0.72rem;
+    cursor: pointer;
+  }
+  .studio-camera-target:hover {
+    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  }
+  .studio-camera-target.is-on {
+    background-color: color-mix(in srgb, #7c3aed 16%, transparent);
+  }
+  .studio-camera-target-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .studio-camera-target-id,
+  .studio-camera-target-type {
+    font-family: var(--font-mono);
+    font-size: 0.64rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-camera-kf-list {
+    list-style: none;
+    margin: 0.3rem 0 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+  }
+  .studio-camera-kf-list li {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.1rem 0.3rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+  }
+  .studio-camera-kf,
+  .studio-camera-kf-del {
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+  }
+  .studio-camera-kf-del {
+    color: #ef4444;
+  }
   .studio-tl-total {
     margin-top: 0.3rem;
     padding: 0.2rem 0.4rem;
@@ -1885,6 +2111,81 @@ body.studio-player-popout #clotho-player-preview {
     color: #fff;
     border-color: #b91c1c;
   }
+  /* Camera rows: the same shape as an element row, tinted so a document-level
+     track is not mistaken for one belonging to whatever element is above it. */
+  .studio-tl-camera-row {
+    border-bottom: 1px solid var(--color-border);
+    min-height: 30px;
+  }
+  .studio-tl-camera-row.is-selected .studio-tl-gutter,
+  .studio-tl-camera-row.is-selected .studio-tl-body {
+    background-color: color-mix(
+      in srgb,
+      var(--color-accent) 10%,
+      var(--color-surface-elevated)
+    );
+  }
+  .studio-tl-camera-gutter {
+    gap: 0.35rem;
+    color: #7c3aed;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .studio-tl-camera-gutter.is-sub {
+    color: var(--color-fg-muted);
+    font-weight: 400;
+    padding-left: 1.4rem;
+  }
+  .studio-tl-camera-add {
+    margin-left: auto;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    padding: 0 0.3rem;
+    cursor: pointer;
+  }
+  .studio-tl-camera-track {
+    position: relative;
+    height: 100%;
+    min-height: 30px;
+  }
+  .studio-tl-camera-empty {
+    position: absolute;
+    left: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.68rem;
+    color: var(--color-fg-muted);
+  }
+  .studio-tl-camera-focus {
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    border-radius: 4px;
+    border: 1px solid #7c3aed;
+    background-color: color-mix(in srgb, #7c3aed 22%, transparent);
+    cursor: grab;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .studio-tl-camera-focus.is-selected {
+    border-color: #ef4444;
+    background-color: color-mix(in srgb, #ef4444 26%, transparent);
+  }
+  .studio-tl-camera-focus-label {
+    padding: 0 0.35rem;
+    font-size: 0.66rem;
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .studio-tl-camera-keyframe {
+    color: #7c3aed;
+  }
   .studio-tl-playhead {
     position: absolute;
     top: 0;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnimationDocument, SnapshotMap, Appearance, AnimationElement, TrackKeyframe, Chapter, AnimationEffect, DataValue, LayoutMode, Checkpoint, StoryManifest, StoryEdge, AnimationTemplate, GroupElement, ParameterSchema } from '@kokoa/clotho';
+import { AnimationDocument, SnapshotMap, Appearance, AnimationElement, TrackKeyframe, Chapter, AnimationEffect, CameraFocus, Camera, CameraProperty, DataValue, LayoutMode, Checkpoint, StoryManifest, StoryEdge, AnimationTemplate, GroupElement, ParameterSchema } from '@kokoa/clotho';
 
 interface StudioProps {
     initial: AnimationDocument;
@@ -50,8 +50,11 @@ type Selection = {
 } | {
     kind: "effect";
     effectId: string;
+} | {
+    kind: "camera";
+    focusIndex?: number;
 };
-type HistoryKind = "meta" | "canvas" | "settings" | "add" | "delete" | "move" | "style" | "rotate" | "resize" | "reorder" | "track" | "appearance" | "chapter" | "effect" | "group" | "layout" | "checkpoint" | "asset" | "other";
+type HistoryKind = "meta" | "canvas" | "settings" | "add" | "delete" | "move" | "style" | "rotate" | "resize" | "reorder" | "track" | "appearance" | "chapter" | "effect" | "camera" | "group" | "layout" | "checkpoint" | "asset" | "other";
 interface HistoryEntry {
     snap: string;
     label: string;
@@ -111,9 +114,65 @@ declare function updateChapter(id: string, patch: Partial<Chapter>): void;
 declare function deleteChapter(id: string): void;
 declare function addEffect(eff: AnimationEffect): void;
 declare function updateEffect(id: string, patch: Partial<AnimationEffect>): void;
+/**
+ * Swap one effect for another with the same id.
+ *
+ * Changing an effect's type is a replacement, not a patch: `spotlight` carries
+ * `elementIds` where the others carry `elementId`, so merging the new fields over
+ * the old ones would leave a shape the schema rejects — and `mutateDef` drops a
+ * rejected edit without saying so.
+ */
+declare function replaceEffect(id: string, next: AnimationEffect): void;
 declare function deleteEffect(id: string): void;
 declare function updateDuration(ms: number): void;
 
+declare function getCamera(): Camera;
+/** Whether the document actually carries a camera, as opposed to defaults. */
+declare function hasCamera(): boolean;
+/**
+ * Which mechanism decides the view at `time`.
+ *
+ * The renderer's rule is that a focus entry that has already started wins, and the
+ * tracks supply the value otherwise. Direct manipulation on the canvas has to know
+ * which one it is editing — dragging the frame when a focus is in control would
+ * write track keyframes that the focus immediately overrides, and a control that
+ * silently does nothing is worse than one that is disabled.
+ */
+type CameraControl = {
+    kind: "none";
+} | {
+    kind: "tracks";
+} | {
+    kind: "focus";
+    index: number;
+};
+declare function cameraControlAt(time: number): CameraControl;
+declare function setCameraStrokeScaling(value: Camera["strokeScaling"]): void;
+/** Add or replace the keyframe at `time` on one camera property. */
+declare function setCameraKeyframe(property: CameraProperty, time: number, value: number, ease?: CameraKeyframeEase): void;
+type CameraKeyframeEase = NonNullable<Camera["tracks"][number]["keyframes"][number]["ease"]>;
+/**
+ * Move a keyframe in time, keeping its value.
+ *
+ * Separate from `setCameraKeyframe` because a timeline drag has to remove the old
+ * time as well; doing it as remove-then-set would push two history entries for one
+ * gesture.
+ */
+declare function moveCameraKeyframe(property: CameraProperty, from: number, to: number): void;
+declare function removeCameraKeyframe(property: CameraProperty, time: number): void;
+declare function removeCameraTrack(property: CameraProperty): void;
+declare function addCameraFocus(focus: CameraFocus): void;
+/**
+ * Patch one focus entry.
+ *
+ * Sorting can move it, so the selection is re-pointed at the same entry rather than
+ * at whatever ends up at the old index.
+ */
+declare function updateCameraFocus(index: number, patch: Partial<CameraFocus>): void;
+declare function deleteCameraFocus(index: number): void;
+/** Remove the camera entirely, so the document renders as it did without one. */
+declare function clearCamera(): 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;
@@ -304,4 +363,4 @@ 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 };
+export { type AnimationRepository, type AnimationSummary, type CameraControl, 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, addCameraFocus, addChapter, addCheckpoint, addDefaultResponsiveVariants, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, appendStoryEdge, beginTransient, cameraControlAt, canRedo, canUndo, childIdsOf, clearCamera, configureAnimationRepository, configureApi, configureHost, createEditorPluginContext, createLayout, createLinterPlugin, createLocalStorageRepository, createPerformanceProfilerPlugin, createResponsiveInspectorPlugin, createStoryEditorPlugin, createTemplateEditorPlugin, createVisualRegressionPlugin, deleteCameraFocus, deleteChapter, deleteCheckpoint, deleteEffect, deleteElement, detachFromLayout, downloadAnimationJson, endTransient, findLayoutCollisions, garbageCollectAnimationAssets, getCamera, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupElements, hasCamera, initialParameterValue, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, layoutIdsFor, markClean, mountEditorPlugins, moveCameraKeyframe, moveElementToEnd, moveElementToFront, parameterInputValue, placeholderImageUrl, profileAnimation, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeCameraKeyframe, removeCameraTrack, removeTrack, removeTrackKeyframe, reorderElement, replaceEffect, replaceStoryNodeDocument, resetHistory, setCameraKeyframe, setCameraStrokeScaling, setCurrentTime, setDef, setDraft, setElementValueAtTime, setSelection, setTrackKeyframe, subscribe, toggleSelectionFor, undo, ungroupElement, uniqueChapterId, uniqueCheckpointId, uniqueEffectId, uniqueElementId, updateAppearance, updateCameraFocus, updateCanvas, updateChapter, updateCheckpoint, updateData, updateDuration, updateEffect, updateElementBase, updateLocales, updateMeta, updateResponsive, updateSettings, validateEditorPlugin };

package/dist/index.js

@@ -1,5 +1,5 @@
-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 { downloadAnimationJson, configureAnimationRepository } from './chunk-WOP52KFW.js';
+export { addAppearance, addCameraFocus, addChapter, addCheckpoint, addEffect, addElement, animationDocumentFileName, animationDocumentToJson, apiBaseUrl, beginTransient, cameraControlAt, canRedo, canUndo, childIdsOf, clearCamera, configureAnimationRepository, configureApi, configureHost, createEditorPluginContext, createLayout, deleteCameraFocus, deleteChapter, deleteCheckpoint, deleteEffect, deleteElement, detachFromLayout, downloadAnimationJson, endTransient, findLayoutCollisions, garbageCollectAnimationAssets, getCamera, getCurrentSnapshot, getCurrentTime, getDef, getHistory, getSelectedElementIds, getSelection, groupElements, hasCamera, isDirty, isDraft, isElementSelected, isGroup, jumpBack, jumpForward, layoutIdsFor, markClean, mountEditorPlugins, moveCameraKeyframe, moveElementToEnd, moveElementToFront, placeholderImageUrl, promoteDraftToSaved, redo, registerDataUriAsset, registerExternalAsset, registerInlineAsset, removeAppearance, removeCameraKeyframe, removeCameraTrack, removeTrack, removeTrackKeyframe, reorderElement, replaceEffect, resetHistory, setCameraKeyframe, setCameraStrokeScaling, setCurrentTime, setDef, setDraft, setElementValueAtTime, setSelection, setTrackKeyframe, subscribe, toggleSelectionFor, undo, ungroupElement, uniqueChapterId, uniqueCheckpointId, uniqueEffectId, uniqueElementId, updateAppearance, updateCameraFocus, updateCanvas, updateChapter, updateCheckpoint, updateData, updateDuration, updateEffect, updateElementBase, updateLocales, updateMeta, updateResponsive, updateSettings, validateEditorPlugin } from './chunk-WOP52KFW.js';
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { usePlayer, AnimationStage } from '@kokoa/clotho/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -491,6 +491,7 @@ var SKELETON = `
       <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>
       <button type="button" id="studio-redo" class="studio-btn studio-btn-icon" aria-label="\uB2E4\uC2DC \uC2E4\uD589" title="\uB2E4\uC2DC \uC2E4\uD589 (\u2318\u21E7Z / \u2318Y)" disabled>\u21B7</button>
       <button type="button" id="studio-grid-toggle" class="studio-btn studio-btn-grid" aria-label="\uACA9\uC790 + \uC2A4\uB0C5" title="\uACA9\uC790 + \uC2A4\uB0C5 (G)" aria-pressed="false"><span class="studio-btn-grid-icon">\u229E</span><span class="studio-btn-grid-label" id="studio-grid-label">\uACA9\uC790 \uB054</span></button>
+      <button type="button" id="studio-camera-frame-toggle" class="studio-btn studio-btn-grid" aria-label="\uCE74\uBA54\uB77C \uC601\uC5ED \uD45C\uC2DC" title="\uCE94\uBC84\uC2A4\uC5D0 \uCE74\uBA54\uB77C\uAC00 \uBCF4\uC5EC\uC8FC\uB294 \uC601\uC5ED\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4" aria-pressed="true"><span class="studio-btn-grid-icon">\u{1F3A5}</span><span class="studio-btn-grid-label" id="studio-camera-frame-label">\uCE74\uBA54\uB77C \uC601\uC5ED</span></button>
       <input type="text" id="studio-title" class="studio-title-input" placeholder="\uC81C\uBAA9" aria-label="\uC560\uB2C8\uBA54\uC774\uC158 \uC81C\uBAA9" disabled />
       <span id="studio-id-display" class="studio-id-display"></span>
       <span id="studio-status" class="studio-status" aria-live="polite">\uB300\uAE30 \uC911</span>
@@ -702,7 +703,7 @@ function StudioMount({
     if (repository) configureAnimationRepository(repository);
     let disposed = false;
     let cleanup;
-    void import('./main-SKM3P4X7.js').then(({ initStudio }) => {
+    void import('./main-HDE5SDKM.js').then(({ initStudio }) => {
       if (disposed) return;
       cleanup = initStudio({
         initialId,