@hyperframes/studio 0.8.106 → 0.8.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/dist/assets/{hyperframes-player-dl6K6ABp.js → hyperframes-player-h4mktSdm.js} +1 -1
  2. package/dist/assets/{index-CMiYVGv5.js → index-CM1xA_jD.js} +195 -200
  3. package/dist/assets/{index-ooaZZhKf.js → index-D8GKc2D9.js} +1 -1
  4. package/dist/assets/{index-DKT5NF1Y.js → index-zoqPmBF6.js} +1 -1
  5. package/dist/{chunk-ICTZJPQQ.js → chunk-4OZC426H.js} +12 -3
  6. package/dist/chunk-4OZC426H.js.map +1 -0
  7. package/dist/index.d.ts +367 -11
  8. package/dist/index.html +1 -1
  9. package/dist/index.js +1064 -714
  10. package/dist/index.js.map +1 -1
  11. package/dist/player.js +1 -1
  12. package/package.json +8 -8
  13. package/src/App.tsx +5 -3
  14. package/src/agentToolsExport.test.ts +8 -0
  15. package/src/captions/keyboard.test.ts +6 -0
  16. package/src/components/StudioRightPanels.tsx +2 -0
  17. package/src/components/TimelineToolbar.test.tsx +27 -0
  18. package/src/components/TimelineToolbar.tsx +2 -5
  19. package/src/components/editor/DomEditOverlay.tsx +12 -18
  20. package/src/components/editor/PropertyPanel.tsx +1 -14
  21. package/src/components/editor/PropertyPanelFlat.tsx +3 -6
  22. package/src/components/editor/SnapToolbar.test.tsx +32 -1
  23. package/src/components/editor/SnapToolbar.tsx +3 -4
  24. package/src/components/editor/domEditOverlayStartGesture.ts +5 -2
  25. package/src/components/editor/fontAssets.test.ts +12 -22
  26. package/src/components/editor/gestureHoldsPreviewReload.test.tsx +96 -33
  27. package/src/components/editor/gsapAnimatesProperty.ts +3 -0
  28. package/src/components/editor/manualEdits.test.ts +4 -3
  29. package/src/components/editor/manualEditsDom.ts +28 -5
  30. package/src/components/editor/manualEditsDomPatches.ts +5 -1
  31. package/src/components/editor/manualOffsetDrag.ts +4 -1
  32. package/src/components/editor/mediaAudioEdits.test.ts +212 -0
  33. package/src/components/editor/mediaAudioEdits.ts +253 -0
  34. package/src/components/editor/propertyPanelFlatMediaSection.test.tsx +286 -87
  35. package/src/components/editor/propertyPanelFlatMediaSection.tsx +17 -20
  36. package/src/components/editor/propertyPanelFlatProps.ts +1 -0
  37. package/src/components/editor/propertyPanelMediaSection.tsx +17 -27
  38. package/src/components/editor/propertyPanelTypes.ts +2 -0
  39. package/src/components/editor/useDomEditNudge.test.tsx +134 -2
  40. package/src/components/editor/useDomEditNudge.ts +41 -23
  41. package/src/components/panels/SlideshowPanel.test.ts +27 -0
  42. package/src/components/panels/SlideshowPanel.tsx +12 -7
  43. package/src/contexts/DomEditContext.test.tsx +62 -0
  44. package/src/contexts/DomEditContext.tsx +94 -77
  45. package/src/hooks/canvasQuickSaves.test.tsx +72 -7
  46. package/src/hooks/domEditCommitTypes.ts +10 -0
  47. package/src/hooks/domEditPersistFailure.ts +12 -1
  48. package/src/hooks/domStyleCommit.fonts.test.ts +5 -4
  49. package/src/hooks/domStyleCommit.ts +2 -8
  50. package/src/hooks/gsapDragCommit.ts +3 -8
  51. package/src/hooks/gsapDragPositionCommit.ts +6 -1
  52. package/src/hooks/gsapEditOutcome.ts +2 -1
  53. package/src/hooks/gsapResizeElementSize.test.tsx +136 -0
  54. package/src/hooks/gsapResizeGeometrySweep.test.ts +3 -1
  55. package/src/hooks/gsapResizeIntercept.test.ts +3 -11
  56. package/src/hooks/gsapResizeIntercept.ts +6 -2
  57. package/src/hooks/gsapResizeMixedTween.test.ts +1 -2
  58. package/src/hooks/gsapRuntimeBridge.test.ts +55 -0
  59. package/src/hooks/gsapRuntimeBridge.ts +5 -3
  60. package/src/hooks/gsapRuntimeKeyframes.ts +1 -3
  61. package/src/hooks/inspectorSaveReload.test.tsx +107 -0
  62. package/src/hooks/useAppHotkeys.previewForwarding.test.tsx +16 -1
  63. package/src/hooks/useAppHotkeys.test.ts +17 -0
  64. package/src/hooks/useAppHotkeys.textEditing.test.tsx +1 -1
  65. package/src/hooks/useAppHotkeys.ts +3 -3
  66. package/src/hooks/useAutomationSelectionKeyboard.test.tsx +17 -0
  67. package/src/hooks/useAutomationSelectionKeyboard.ts +3 -9
  68. package/src/hooks/useDomEditAttributeCommits.ts +71 -29
  69. package/src/hooks/useDomEditCommits.test.tsx +172 -92
  70. package/src/hooks/useDomEditCommits.ts +2 -0
  71. package/src/hooks/useDomEditCommitsHelpers.ts +4 -6
  72. package/src/hooks/useDomEditPersist.ts +28 -13
  73. package/src/hooks/useDomEditPositionPatchCommit.ts +2 -0
  74. package/src/hooks/useDomEditSession.ts +2 -3
  75. package/src/hooks/useDomEditTextCommits.ts +4 -8
  76. package/src/hooks/useDomGeometryCommits.ts +11 -2
  77. package/src/hooks/useEditHistoryActions.paint.test.tsx +122 -3
  78. package/src/hooks/useGsapAwareEditing.ts +6 -6
  79. package/src/hooks/useGsapScriptCommits.test.tsx +19 -0
  80. package/src/hooks/useGsapScriptCommits.ts +5 -4
  81. package/src/hooks/useInlineTextEdit.test.tsx +27 -0
  82. package/src/hooks/useInlineTextEdit.ts +9 -7
  83. package/src/hooks/useKeyframeKeyboard.test.tsx +15 -0
  84. package/src/hooks/useKeyframeKeyboard.ts +2 -8
  85. package/src/hooks/usePreviewPersistence.ts +6 -0
  86. package/src/hooks/useTrackPendingTimelineEdit.ts +2 -6
  87. package/src/index.ts +7 -0
  88. package/src/player/components/Timeline.test.ts +0 -21
  89. package/src/player/components/Timeline.tsx +0 -1
  90. package/src/player/components/timelineLayout.ts +0 -28
  91. package/src/player/hooks/usePlaybackKeyboard.test.ts +43 -0
  92. package/src/player/lib/playbackShortcuts.ts +3 -7
  93. package/src/player/lib/timelineElementHelpers.test.ts +16 -0
  94. package/src/player/lib/timelineElementHelpers.ts +16 -2
  95. package/src/player/lib/timelineViewportBudgets.test.ts +2 -0
  96. package/src/player/lib/timelineViewportBudgets.ts +4 -0
  97. package/src/utils/gsapSoftReload.ts +3 -2
  98. package/src/utils/gsapUndoRestore.browser.test.ts +94 -0
  99. package/src/utils/gsapUndoRestore.test.ts +145 -1
  100. package/src/utils/gsapUndoRestore.ts +70 -21
  101. package/src/utils/sourcePatcher.ts +1 -1
  102. package/src/utils/studioFontHelpers.ts +2 -23
  103. package/src/utils/studioHelpers.test.ts +30 -0
  104. package/src/utils/studioHelpers.ts +18 -4
  105. package/src/utils/studioPendingEdits.test.ts +63 -0
  106. package/src/utils/studioPendingEdits.ts +16 -7
  107. package/src/utils/typingTarget.test.ts +13 -0
  108. package/src/utils/typingTarget.ts +5 -2
  109. package/src/webmcp/useStudioAgentTools.ts +3 -1
  110. package/dist/chunk-ICTZJPQQ.js.map +0 -1
package/dist/index.d.ts CHANGED
@@ -4,12 +4,12 @@ import * as react from 'react';
4
4
  import { RefObject, MutableRefObject, ReactNode, DragEventHandler, ComponentProps, RefCallback, MouseEvent, CSSProperties, UIEvent, PointerEvent } from 'react';
5
5
  import { RuntimeTimelineClipIdentity, HyperframePickerElementInfo } from '@hyperframes/core';
6
6
  import { GsapAnimation, ParsedGsap, PropertyGroupName } from '@hyperframes/core/gsap-parser';
7
+ import { GsapAnimation as GsapAnimation$1, ArcPathSegment } from '@hyperframes/parsers/gsap-parser';
7
8
  import { Composition } from '@hyperframes/sdk';
8
9
  import * as zustand from 'zustand';
9
10
  import { StoreApi } from 'zustand';
10
11
  export { Player } from './player.js';
11
12
  import { MusicBeatAnalysis } from '@hyperframes/core/beats';
12
- import { GsapAnimation as GsapAnimation$1, ArcPathSegment } from '@hyperframes/parsers/gsap-parser';
13
13
  import * as _hyperframes_parsers from '@hyperframes/parsers';
14
14
  import { CanvasResolution } from '@hyperframes/parsers';
15
15
  export { SeamTransitionFrameSource, SeamTransitionLoopHandle, SeamTransitionLoopOptions, playSeamTransitionLoop } from '@hyperframes/shader-transitions';
@@ -699,6 +699,19 @@ interface DomEditSelection extends PatchTarget {
699
699
  capabilities: DomEditCapabilities;
700
700
  gsapAnimations?: GsapAnimation$1[];
701
701
  }
702
+ interface DomEditLayerItem {
703
+ key: string;
704
+ element: HTMLElement;
705
+ label: string;
706
+ tagName: string;
707
+ depth: number;
708
+ childCount: number;
709
+ id?: string;
710
+ hfId?: string;
711
+ selector?: string;
712
+ selectorIndex?: number;
713
+ sourceFile: string;
714
+ }
702
715
  interface DomEditContextOptions {
703
716
  activeCompositionPath: string | null;
704
717
  isMasterView: boolean;
@@ -797,6 +810,14 @@ interface TimelineRangeSelection {
797
810
  anchorY: number;
798
811
  }
799
812
 
813
+ interface ImportedFontAsset {
814
+ family: string;
815
+ path: string;
816
+ url: string;
817
+ weight?: string;
818
+ style?: "normal" | "italic";
819
+ }
820
+
800
821
  /** Durable evidence returned by the one Studio DOM persistence actor. */
801
822
  interface DomEditPersistOutcome {
802
823
  sourceFile: string;
@@ -816,6 +837,11 @@ interface DomEditPatchBatchesResult {
816
837
  allMatched: boolean;
817
838
  changed: boolean;
818
839
  }
840
+ /** Several data-* and HTML attribute ops on one element as ONE persist and ONE undo entry. */
841
+ type CommitDomAttributeBatch = (selection: DomEditSelection, operations: PatchOperation[], options: {
842
+ label: string;
843
+ prepareContent?: (html: string) => string;
844
+ }) => Promise<boolean>;
819
845
 
820
846
  interface RecordEditInput$5 {
821
847
  label: string;
@@ -2182,14 +2208,6 @@ interface SourceEditorProps {
2182
2208
  }
2183
2209
  declare const SourceEditor: react.NamedExoticComponent<SourceEditorProps>;
2184
2210
 
2185
- interface ImportedFontAsset {
2186
- family: string;
2187
- path: string;
2188
- url: string;
2189
- weight?: string;
2190
- style?: "normal" | "italic";
2191
- }
2192
-
2193
2211
  /**
2194
2212
  * Edit callbacks shared by GsapAnimationSection and each AnimationCard it
2195
2213
  * renders. Extracted so the two prop interfaces don't duplicate the (large)
@@ -2277,6 +2295,7 @@ interface PropertyPanelProps {
2277
2295
  changedElements: number;
2278
2296
  }>;
2279
2297
  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
2298
+ onSetAttributeBatch: CommitDomAttributeBatch;
2280
2299
  onRemoveBackground?: (inputPath: string, options: {
2281
2300
  createBackgroundPlate?: boolean;
2282
2301
  quality?: "fast" | "balanced" | "best";
@@ -3216,6 +3235,7 @@ declare function useDomEditSession({ projectId, activeCompPath, compIdToSrc, cap
3216
3235
  handleDomAttributeQuietCommit: (attr: string, value: string | null) => Promise<void>;
3217
3236
  handleDomHtmlAttributeCommit: (attr: string, value: string | null) => Promise<void>;
3218
3237
  handleDomAttributesCommit: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
3238
+ handleDomAttributeBatchCommit: CommitDomAttributeBatch;
3219
3239
  handleDomPathOffsetCommit: (selection: DomEditSelection, next: {
3220
3240
  x: number;
3221
3241
  y: number;
@@ -3388,6 +3408,7 @@ declare function usePreviewPersistence({ showToast, readOptionalProjectFile: _re
3388
3408
  error: unknown;
3389
3409
  }>;
3390
3410
  waitForPendingDomEditSaves: () => Promise<void>;
3411
+ settlePendingEdits: () => Promise<void>;
3391
3412
  domEditSaveQueuePaused: string | null;
3392
3413
  resetDomEditSaveQueueBreaker: () => void;
3393
3414
  applyCurrentStudioManualEditsToPreview: (iframe?: HTMLIFrameElement | null) => void;
@@ -3400,7 +3421,7 @@ type DomEditValue = ReturnType<typeof useDomEditSession>;
3400
3421
  interface DomEditSelectionValue extends Pick<DomEditValue, "domEditSelection" | "domEditGroupSelections" | "domEditHoverSelection" | "activeGroupElement" | "domEditSelectionRef" | "selectedGsapAnimations" | "gsapMultipleTimelines" | "gsapUnsupportedTimelinePattern" | "agentModalOpen" | "agentModalAnchorPoint" | "copiedAgentPrompt" | "agentPromptSelectionContext"> {
3401
3422
  }
3402
3423
  declare function useDomEditSelectionContext(): DomEditSelectionValue;
3403
- declare function DomEditProvider({ value: { domEditSelection, domEditGroupSelections, domEditHoverSelection, agentModalOpen, agentModalAnchorPoint, copiedAgentPrompt, agentPromptSelectionContext, domEditSelectionRef, handleTimelineElementSelect, handlePreviewCanvasMouseDown, handlePreviewCanvasPointerMove, handlePreviewCanvasPointerLeave, applyDomSelection, clearDomSelection, refreshDomEditSelectionFromPreview, handleDomStyleCommit, handleDomStyleCommitForSelection, handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomAttributeQuietCommit, handleDomHtmlAttributeCommit, handleDomAttributesCommit, handleDomPathOffsetCommit, handleDomGroupPathOffsetCommit, handleDomZIndexReorderCommit, handleDomBoxSizeCommit, handleDomRotationCommit, handleDomManualEditsReset, handleDomTextCommit, handleDomTextCommitForSelection, handleDomRichTextCommit, handleDomTextFieldStyleCommit, handleDomAddTextField, handleDomRemoveTextField, getGsapAnimationsForSelection, handleAskAgent, handleAgentModalSubmit, handleBlockedDomMove, handleDomManualDragStart, handleDomEditElementDelete, handleGroupSelection, handleUngroupSelection, setActiveGroupElement, activeGroupElement, buildDomSelectionFromTarget, buildDomSelectionForTimelineElement, updateDomEditHoverSelection, resolveImportedFontAsset, setAgentModalOpen, setAgentPromptSelectionContext, setAgentModalAnchorPoint, selectedGsapAnimations, gsapMultipleTimelines, gsapUnsupportedTimelinePattern, handleGsapUpdateProperty, handleGsapUpdateMeta, handleGsapDeleteAnimation, handleGsapDeleteAllForElement, handleGsapAddAnimation, handleGsapAddProperty, handleGsapRemoveProperty, handleGsapUpdateFromProperty, handleGsapAddFromProperty, handleGsapRemoveFromProperty, handleGsapAddKeyframe, handleGsapAddKeyframeBatch, handleGsapRemoveKeyframe, handleGsapMoveKeyframeToPlayhead, handleGsapMoveKeyframe, handleGsapResizeKeyframedTween, handleGsapConvertToKeyframes, handleGsapRemoveAllKeyframes, handleResetSelectedElementKeyframes, commitAnimatedProperty, commitAnimatedProperties, handleSetArcPath, handleUpdateArcSegment, handleUnroll, invalidateGsapCache, previewIframeRef, commitMutation, applyMarqueeSelection, handleUpdateKeyframeEase, handleUpdateSegmentEase, handleSetAllKeyframeEases, }, children, }: {
3424
+ declare function DomEditProvider({ value: { domEditSelection, domEditGroupSelections, domEditHoverSelection, agentModalOpen, agentModalAnchorPoint, copiedAgentPrompt, agentPromptSelectionContext, domEditSelectionRef, handleTimelineElementSelect, handlePreviewCanvasMouseDown, handlePreviewCanvasPointerMove, handlePreviewCanvasPointerLeave, applyDomSelection, clearDomSelection, refreshDomEditSelectionFromPreview, handleDomStyleCommit, handleDomStyleCommitForSelection, handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomAttributeQuietCommit, handleDomHtmlAttributeCommit, handleDomAttributesCommit, handleDomAttributeBatchCommit, handleDomPathOffsetCommit, handleDomGroupPathOffsetCommit, handleDomZIndexReorderCommit, handleDomBoxSizeCommit, handleDomRotationCommit, handleDomManualEditsReset, handleDomTextCommit, handleDomTextCommitForSelection, handleDomRichTextCommit, handleDomTextFieldStyleCommit, handleDomAddTextField, handleDomRemoveTextField, getGsapAnimationsForSelection, handleAskAgent, handleAgentModalSubmit, handleBlockedDomMove, handleDomManualDragStart, handleDomEditElementDelete, handleGroupSelection, handleUngroupSelection, setActiveGroupElement, activeGroupElement, buildDomSelectionFromTarget, buildDomSelectionForTimelineElement, updateDomEditHoverSelection, resolveImportedFontAsset, setAgentModalOpen, setAgentPromptSelectionContext, setAgentModalAnchorPoint, selectedGsapAnimations, gsapMultipleTimelines, gsapUnsupportedTimelinePattern, handleGsapUpdateProperty, handleGsapUpdateMeta, handleGsapDeleteAnimation, handleGsapDeleteAllForElement, handleGsapAddAnimation, handleGsapAddProperty, handleGsapRemoveProperty, handleGsapUpdateFromProperty, handleGsapAddFromProperty, handleGsapRemoveFromProperty, handleGsapAddKeyframe, handleGsapAddKeyframeBatch, handleGsapRemoveKeyframe, handleGsapMoveKeyframeToPlayhead, handleGsapMoveKeyframe, handleGsapResizeKeyframedTween, handleGsapConvertToKeyframes, handleGsapRemoveAllKeyframes, handleResetSelectedElementKeyframes, commitAnimatedProperty, commitAnimatedProperties, handleSetArcPath, handleUpdateArcSegment, handleUnroll, invalidateGsapCache, previewIframeRef, commitMutation, applyMarqueeSelection, handleUpdateKeyframeEase, handleUpdateSegmentEase, handleSetAllKeyframeEases, }, children, }: {
3404
3425
  value: DomEditValue;
3405
3426
  children: ReactNode;
3406
3427
  }): react_jsx_runtime.JSX.Element;
@@ -3640,4 +3661,339 @@ interface MarqueeOverlayProps {
3640
3661
  */
3641
3662
  declare function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayProps): react_jsx_runtime.JSX.Element;
3642
3663
 
3643
- export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewPromotion, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, collectSnapContext, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useLivePreviewIframe, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
3664
+ /**
3665
+ * The slice of the WebMCP browser API that Studio uses.
3666
+ *
3667
+ * Mirrors the WebIDL in the W3C spec (`webmachinelearning/webmcp`, `index.bs`)
3668
+ * as of 2026-08-26. Two things worth knowing before editing this file:
3669
+ *
3670
+ * - The API hangs off `document`, NOT `navigator`. `navigator.modelContext` is
3671
+ * a polyfill compatibility shim, not a spec member, so feature-detecting it
3672
+ * is wrong even where an article's sample "works".
3673
+ * - The spec is pre-stable (Origin Trial). This file and `registrar.ts` are the
3674
+ * only places that touch the API, so a spec change is a two-file edit. Re-read
3675
+ * `index.bs` rather than trusting this transcription.
3676
+ *
3677
+ * Only the surface Studio registers against is declared. `getTools` and
3678
+ * `executeTool` are the consumer side; Studio registers, it does not call.
3679
+ *
3680
+ * These stay hand-written rather than imported from `@mcp-b/webmcp-types`,
3681
+ * which the polyfill pulls in. That package's `registerTool` is overloaded to
3682
+ * infer argument types from a literal `inputSchema`, which is useful when you
3683
+ * register one tool inline and actively hostile when you register a uniform
3684
+ * list of them, as `registerStudioTools` does. Narrower is the safe operation
3685
+ * here. It does mean this file can drift from the spec, hence the note above.
3686
+ */
3687
+ interface ModelContextToolAnnotations {
3688
+ /** The tool does not change state. Lets an agent decide when calling is free. */
3689
+ readOnlyHint?: boolean;
3690
+ /** The tool's output contains data the page's author does not vouch for. */
3691
+ untrustedContentHint?: boolean;
3692
+ }
3693
+ interface ToolExecuteCallbackOptions {
3694
+ /**
3695
+ * Aborted when the caller cancels. Studio's commit path is not cancellable
3696
+ * once dispatched, so tools check this BEFORE dispatching and document that a
3697
+ * late abort does not unwind a write.
3698
+ */
3699
+ signal: AbortSignal;
3700
+ }
3701
+ interface ModelContextTool {
3702
+ /**
3703
+ * Max 128 characters, ASCII alphanumeric plus `_`, `-`, `.`. Registering a
3704
+ * name that already exists REJECTS with InvalidStateError; it does not
3705
+ * replace.
3706
+ */
3707
+ name: string;
3708
+ title?: string;
3709
+ /** Required and non-empty; an empty string rejects with InvalidStateError. */
3710
+ description: string;
3711
+ /** JSON Schema. Nothing in the platform validates input against it. */
3712
+ inputSchema?: object;
3713
+ /**
3714
+ * The user agent JSON-serializes whatever this resolves with, so it must
3715
+ * return an object. Returning `undefined` fails the serialization.
3716
+ *
3717
+ * A rejection is NOT a usable error channel: the spec discards the reason and
3718
+ * rejects the caller with a bare UnknownError. Resolve with a tagged failure
3719
+ * instead. See `toolResult.ts`.
3720
+ *
3721
+ * `options` is optional here although the spec always passes it: the
3722
+ * `@mcp-b/global` polyfill (through 5.1.0) calls `execute(input)` with no
3723
+ * second argument, so a Studio handler must not depend on receiving one.
3724
+ */
3725
+ execute: (input: object, options?: ToolExecuteCallbackOptions) => Promise<unknown>;
3726
+ annotations?: ModelContextToolAnnotations;
3727
+ }
3728
+
3729
+ /**
3730
+ * The shape every Studio tool resolves with.
3731
+ *
3732
+ * Tools resolve, they never reject. That is forced by the spec, not a style
3733
+ * choice: a rejected `execute` has its reason DISCARDED and the caller is
3734
+ * rejected with a bare `UnknownError` (`index.bs`, the execute-tool completion
3735
+ * steps). Rejecting would therefore guarantee the agent cannot see why the edit
3736
+ * failed, which is the one thing it needs most.
3737
+ *
3738
+ * There is no `outputSchema` in the platform yet, so this discriminant is
3739
+ * invisible to the agent's schema layer. Every tool's `description` has to say
3740
+ * that it returns `ok`.
3741
+ */
3742
+ type ToolFailureKind =
3743
+ /** A real state the agent can route around: save queue paused, capability off. */
3744
+ "blocked"
3745
+ /** The agent's fault: unknown handle, bad enum, out of range. */
3746
+ | "invalid"
3747
+ /** Exogenous: the server said no, the patch target could not be resolved. */
3748
+ | "failed"
3749
+ /** Our bug. Reported AND re-thrown, so it is findable instead of plausible. */
3750
+ | "internal";
3751
+ interface ToolFailure {
3752
+ ok: false;
3753
+ kind: ToolFailureKind;
3754
+ reason: string;
3755
+ /** What to try instead. This is what turns a failure into a next action. */
3756
+ hint?: string;
3757
+ }
3758
+ type ToolResult<T> = ({
3759
+ ok: true;
3760
+ } & T) | ToolFailure;
3761
+
3762
+ /**
3763
+ * `studio_look`: the one call that orients an agent.
3764
+ *
3765
+ * Deliberately fat. Every field here is one the agent would otherwise have to
3766
+ * spend a round trip discovering.
3767
+ *
3768
+ * The building is a pure function over a snapshot so it can be tested with
3769
+ * values. Gathering the snapshot is the React layer's job.
3770
+ */
3771
+
3772
+ type StudioLookSceneSnapshot = {
3773
+ status: "loading";
3774
+ } | {
3775
+ status: "ready";
3776
+ items: readonly DomEditLayerItem[];
3777
+ drillInItem: DomEditLayerItem | null;
3778
+ };
3779
+ interface StudioLookSnapshot {
3780
+ projectId: string | null;
3781
+ compositionPath: string | null;
3782
+ currentTime: number;
3783
+ duration: number;
3784
+ isPlaying: boolean;
3785
+ elements: readonly TimelineElement[];
3786
+ scene: StudioLookSceneSnapshot;
3787
+ selection: DomEditSelection | null;
3788
+ /** Live animations for the current selection arrive outside DomEditSelection. */
3789
+ selectionAnimationCount: number;
3790
+ /**
3791
+ * The undo stack as Studio's shell actually exposes it.
3792
+ *
3793
+ * This is a weaker signal than a revision counter, and deliberately not
3794
+ * dressed up as one: the depth lives in component-local state and is not
3795
+ * reachable here without plumbing it through the shell context. What an agent
3796
+ * CAN do is checkpoint `undoLabel` before a batch and notice it change to
3797
+ * something it did not do, which means a human pressed undo and its earlier
3798
+ * edits are gone.
3799
+ */
3800
+ history: {
3801
+ canUndo: boolean;
3802
+ canRedo: boolean;
3803
+ undoLabel: string | null;
3804
+ redoLabel: string | null;
3805
+ };
3806
+ }
3807
+ /** Gather the live scene once per tool call. The response never retains DOM nodes. */
3808
+ declare function collectStudioLookScene(doc: Document | null, activeCompositionPath: string | null, activeGroupElement: HTMLElement | null): StudioLookSceneSnapshot;
3809
+
3810
+ /**
3811
+ * `studio_select` and `studio_seek`: pointing the human and the agent at the
3812
+ * same thing.
3813
+ *
3814
+ * Selection is shared human-visible state. Element writes do not infer their
3815
+ * target from it: they resolve an explicit source-safe handle per call. Keeping
3816
+ * these contracts separate means a human click cannot redirect an agent write.
3817
+ */
3818
+
3819
+ interface SelectionToolDeps {
3820
+ /** The preview iframe's document, or null before it mounts. */
3821
+ getPreviewDocument: () => Document | null;
3822
+ getCompositionPath: () => string | null;
3823
+ getProjectId: () => string | null;
3824
+ buildSelection: (element: HTMLElement) => Promise<DomEditSelection | null>;
3825
+ applySelection: (selection: DomEditSelection) => void;
3826
+ /** Out-of-loop seek. `requestSeek`, not `setCurrentTime`. */
3827
+ requestSeek: (time: number) => void;
3828
+ readPlayhead: () => {
3829
+ currentTime: number;
3830
+ duration: number;
3831
+ isPlaying: boolean;
3832
+ };
3833
+ }
3834
+
3835
+ /**
3836
+ * `studio_frame`: the eyes.
3837
+ *
3838
+ * Without this the tool set is a remote control. With it an agent can author a
3839
+ * change, look at the instant it affects, judge it, and adjust. That loop is the
3840
+ * one thing source alone cannot support, because "what does this look like at
3841
+ * 2.4 seconds" is not a question a file can answer.
3842
+ *
3843
+ * Reuses Studio's existing capture endpoint (`utils/frameCapture`) rather than
3844
+ * inventing a second one. The server renders the composition with Puppeteer, so
3845
+ * the frame reflects the file on disk, not the live preview DOM.
3846
+ */
3847
+
3848
+ interface FrameToolDeps {
3849
+ getProjectId: () => string | null;
3850
+ getCompositionPath: () => string | null;
3851
+ readPlayhead: () => {
3852
+ currentTime: number;
3853
+ duration: number;
3854
+ isPlaying: boolean;
3855
+ };
3856
+ requestSeek: (time: number) => void;
3857
+ /** Confirms the URL renders. Injected so tests need no network. */
3858
+ probeFrame: (url: string) => Promise<{
3859
+ ok: boolean;
3860
+ status: number;
3861
+ }>;
3862
+ wait: (ms: number) => Promise<void>;
3863
+ }
3864
+
3865
+ /**
3866
+ * `studio_inspect`: everything about one element, in one call.
3867
+ *
3868
+ * The point is to prevent a failed write. Every field here either tells the
3869
+ * agent what it can change (`can`, with `reasonIfDisabled` verbatim) or what it
3870
+ * would be changing (the resolved styles, the text fields, the animations).
3871
+ * An agent that reads this first should never attempt an edit the element will
3872
+ * refuse.
3873
+ *
3874
+ * The GSAP diagnostics are here for the same reason: `multipleTimelines` and
3875
+ * `unsupportedTimelinePattern` are states where animation editing is off, and
3876
+ * learning that from a read is cheaper than learning it from a failed write.
3877
+ */
3878
+
3879
+ interface InspectToolDeps extends SelectionToolDeps {
3880
+ /** What the human currently has selected, used when no handle is given. */
3881
+ getCurrentSelection: () => DomEditSelection | null;
3882
+ getGsapDiagnostics: () => {
3883
+ animations: readonly GsapAnimation$1[];
3884
+ multipleTimelines: boolean;
3885
+ unsupportedTimelinePattern: boolean;
3886
+ };
3887
+ }
3888
+
3889
+ interface TargetedWriteDeps {
3890
+ getPreviewDocument: () => Document | null;
3891
+ getProjectId: () => string | null;
3892
+ getWriteBlockedReason: () => string | null;
3893
+ buildSelection: (element: HTMLElement) => Promise<DomEditSelection | null>;
3894
+ applySelection: (selection: DomEditSelection) => void;
3895
+ }
3896
+
3897
+ /**
3898
+ * `studio_set_text` and `studio_set_style`: the first tools that change the file.
3899
+ *
3900
+ * The explicit source-safe handle is resolved to one selection per invocation.
3901
+ * That captured selection is passed into Studio's existing commit actor; visible
3902
+ * selection is presentation only and cannot redirect the write.
3903
+ */
3904
+
3905
+ interface ContentToolDeps extends TargetedWriteDeps {
3906
+ setText: (selection: DomEditSelection, value: string, fieldKey?: string) => Promise<DomEditCommitOutcome>;
3907
+ setStyle: (selection: DomEditSelection, property: string, value: string) => Promise<DomEditCommitOutcome>;
3908
+ }
3909
+
3910
+ /**
3911
+ * `studio_transform`: move, resize and rotate, as a drag would.
3912
+ *
3913
+ * This tool reads the element's box back after every write and reports what
3914
+ * ACTUALLY changed. That is not belt-and-braces, it is the only thing standing
3915
+ * between an agent and a silent lie, because two of the three handlers can do
3916
+ * nothing and resolve:
3917
+ *
3918
+ * - The handlers exposed on `DomEditActionsValue` are the GSAP-AWARE wrappers
3919
+ * (`useDomEditSession.ts` aliases them), not the CSS ones in
3920
+ * `useDomGeometryCommits.ts`.
3921
+ * - `handleGsapAwarePathOffsetCommit` and `handleGsapAwareRotationCommit` are
3922
+ * `if (gsapCommitMutation) { ...intercept... }` with NO else branch. In a
3923
+ * composition with no GSAP they return having done nothing. The adjacent
3924
+ * comments confirm that is deliberate: there is no CSS fallback to write to.
3925
+ * - `handleGsapAwareBoxSizeCommit` is different. It runs through
3926
+ * `runGestureTransaction` with a scale route and a width/height route, so
3927
+ * resize works more generally than the other two.
3928
+ *
3929
+ * Read back, do not assume.
3930
+ */
3931
+
3932
+ interface ElementBox {
3933
+ x: number;
3934
+ y: number;
3935
+ width: number;
3936
+ height: number;
3937
+ }
3938
+ interface TransformToolDeps extends TargetedWriteDeps {
3939
+ /** The element's box as it renders right now. */
3940
+ readBox: (selection: DomEditSelection) => ElementBox;
3941
+ moveTo: (selection: DomEditSelection, next: {
3942
+ x: number;
3943
+ y: number;
3944
+ }) => Promise<DomEditCommitOutcome | void>;
3945
+ resizeTo: (selection: DomEditSelection, next: {
3946
+ width: number;
3947
+ height: number;
3948
+ }) => Promise<DomEditCommitOutcome | void>;
3949
+ rotateTo: (selection: DomEditSelection, next: {
3950
+ angle: number;
3951
+ }) => Promise<DomEditCommitOutcome | void>;
3952
+ }
3953
+
3954
+ /**
3955
+ * `studio_animate`: author motion.
3956
+ *
3957
+ * Add, update, and delete await the shared GSAP commit pipeline. Its promise is
3958
+ * the single settlement boundary for persistence and live-preview sync, so a
3959
+ * successful tool response never races ahead of the pixels the user sees.
3960
+ * Keyframe writes still report dispatch because their existing actor catches
3961
+ * its own failure instead of returning a landed signal.
3962
+ */
3963
+
3964
+ type GsapMethod = "to" | "from" | "set" | "fromTo";
3965
+ interface AnimationToolDeps extends TargetedWriteDeps {
3966
+ getAnimationsForSelection: (selection: DomEditSelection) => Promise<readonly {
3967
+ id: string;
3968
+ }[]>;
3969
+ readPlayhead: () => {
3970
+ currentTime: number;
3971
+ duration: number;
3972
+ isPlaying: boolean;
3973
+ };
3974
+ addAnimation: (selection: DomEditSelection, method: GsapMethod) => Promise<boolean>;
3975
+ updateAnimation: (selection: DomEditSelection, animationId: string, updates: {
3976
+ duration?: number;
3977
+ ease?: string;
3978
+ position?: number;
3979
+ }) => Promise<boolean>;
3980
+ addKeyframe: (selection: DomEditSelection, animationId: string, percent: number, properties: Record<string, number | string>) => Promise<void>;
3981
+ deleteAnimation: (selection: DomEditSelection, animationId: string) => Promise<boolean>;
3982
+ }
3983
+
3984
+ interface StudioAgentToolsDeps extends SelectionToolDeps, FrameToolDeps, InspectToolDeps, ContentToolDeps, TransformToolDeps, AnimationToolDeps {
3985
+ /** Read Studio's current state. Called per tool invocation, never cached. */
3986
+ getSnapshot: () => StudioLookSnapshot;
3987
+ }
3988
+ /**
3989
+ * Build the tool list once.
3990
+ *
3991
+ * Every `execute` reads `depsRef.current` at CALL time rather than closing over
3992
+ * a snapshot, which is what lets the list be built once and still see live
3993
+ * state. That is the whole point of the ref: see the registration note below.
3994
+ */
3995
+ declare function buildStudioTools(depsRef: {
3996
+ readonly current: StudioAgentToolsDeps;
3997
+ }): ModelContextTool[];
3998
+
3999
+ export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioMeterStrip, type AudioMeterStripProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ConnectedDomEditOverlay, type ConnectedDomEditOverlayProps, DEFAULT_SHORTCUT_SECTIONS, Dock, type DockController, type DomEditCapabilities, type DomEditCommitDeclineReason, type DomEditCommitOutcome, type DomEditGroupPathOffsetCommit, DomEditOverlay, type DomEditOverlayProps, DomEditProvider, type DomEditSelection, type DomEditZOrder, type DomGeometryCommits, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, ImageThumbnail, type ImageThumbnailProps, type MarqueeGestures, type MarqueeGesturesDeps, MarqueeOverlay, type MarqueeOverlayProps, type Rect$1 as MarqueeRect, type ModelContextTool, NLEPreview, type PanelId, type PatchOperation, type PersistedRenderSettings, type PickedElement, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewPromotion, PreviewReadOnlyProvider, type PreviewSnapPreferences, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, SNAP_THRESHOLD_PX, type ShortcutHint, type ShortcutSection, ShortcutsButton, type ShortcutsButtonProps, type SnapContext, type SnapEdge, type SnapGuide, SnapGuideOverlay, type SnapGuideOverlayProps, type SnapGuidesState, type Rect as SnapRect, type SnapResult, type SnapTarget, SnapToolbar, SourceEditor, type SpacingGuide, type StartRenderOptions, type StudioAgentToolsDeps, StudioApp, StudioFileConflictError, type StudioLookSnapshot, type StudioPendingEditsDrainResult, TRACK_H, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipMenuItem, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditOutcome, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineHistoryButtons, type TimelineHistoryButtonsProps, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, TimelineToolbar, type TimelineToolbarProps, type TimelineTrackPadding, type TimelineZIndexReorderCommit, type ToolResult, type UseClipboardOptions, type UseDomEditSessionParams, type UseDomGeometryCommitOptions, type UseDomStyleCommitOptions, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UsePreviewPersistenceParams, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, type ZOrderAction, applyPatch, buildCompositionSnapTarget, buildGridSnapEdges, buildPickerAgentContextPreview, buildPickerAgentPrompt, buildStudioTools, collectSnapContext, collectStudioLookScene, extractSnapTargets, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, resolveDomEditSelection, resolveEquidistanceGuides, resolveGuideLineRect, resolveIframe, resolveSnapAdjustment, resolveSourceFile, snapEngagedForTravel, useClipboard, useCompositionStack, useDockLayoutStore, useDomEditSelectionContext, useDomEditSession, useDomEditZOrder, useDomGeometryCommit, useDomStyleCommit, useEditHistoryActions, useElementPicker, useLivePreviewIframe, useMarqueeGestures, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, usePreviewPersistence, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
package/dist/index.html CHANGED
@@ -14,7 +14,7 @@
14
14
  document.documentElement.dataset.theme = "paper";
15
15
  }
16
16
  </script>
17
- <script type="module" crossorigin src="/assets/index-CMiYVGv5.js"></script>
17
+ <script type="module" crossorigin src="/assets/index-CM1xA_jD.js"></script>
18
18
  <link rel="stylesheet" crossorigin href="/assets/index-lrT-gfHa.css">
19
19
  </head>
20
20
  <body>