@bendyline/squisq-editor-react 2.0.1 → 2.2.0

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 (357) hide show
  1. package/LICENSE +21 -0
  2. package/NOTICE.md +40 -0
  3. package/README.md +10 -2
  4. package/dist/index.d.ts +683 -60
  5. package/dist/index.js +9648 -3750
  6. package/dist/monaco.js +0 -1
  7. package/dist/styles/index.css +1160 -241
  8. package/package.json +10 -6
  9. package/dist/index.js.map +0 -1
  10. package/dist/monaco.js.map +0 -1
  11. package/src/BlockCardView.tsx +0 -121
  12. package/src/BlockPreviewPanel.tsx +0 -69
  13. package/src/BlockPropertiesPopover.tsx +0 -222
  14. package/src/DocumentSettingsDialog.tsx +0 -272
  15. package/src/DropZoneOverlay.tsx +0 -137
  16. package/src/EditorContext.tsx +0 -1247
  17. package/src/EditorShell.tsx +0 -1334
  18. package/src/EmojiPicker.tsx +0 -332
  19. package/src/FolderView.tsx +0 -131
  20. package/src/Icon.tsx +0 -26
  21. package/src/ImageEditor.tsx +0 -395
  22. package/src/ImageNodeView.tsx +0 -284
  23. package/src/ImageViewer.tsx +0 -221
  24. package/src/InlineIcon.ts +0 -84
  25. package/src/InlinePreviewGutter.tsx +0 -590
  26. package/src/LinkDialog.tsx +0 -276
  27. package/src/MediaBin.tsx +0 -500
  28. package/src/MentionExtension.tsx +0 -261
  29. package/src/OutlinePanel.tsx +0 -547
  30. package/src/PlainHtmlPreview.tsx +0 -277
  31. package/src/PreviewControls.tsx +0 -1250
  32. package/src/PreviewPanel.tsx +0 -422
  33. package/src/RawEditor.tsx +0 -731
  34. package/src/RecorderEntry.tsx +0 -159
  35. package/src/StatusBar.tsx +0 -51
  36. package/src/TemplateAnnotation.ts +0 -167
  37. package/src/TemplateContentPreview.tsx +0 -56
  38. package/src/TemplatePicker.tsx +0 -1314
  39. package/src/ThemeCustomizerPanel.tsx +0 -304
  40. package/src/ThemePicker.tsx +0 -433
  41. package/src/TimelineBlockPreview.tsx +0 -37
  42. package/src/TimelineTrack.tsx +0 -671
  43. package/src/Toolbar.tsx +0 -2587
  44. package/src/Tooltip.tsx +0 -142
  45. package/src/TransitionPicker.tsx +0 -390
  46. package/src/VersionHistoryPanel.tsx +0 -359
  47. package/src/ViewMenuPanel.tsx +0 -189
  48. package/src/ViewSwitcher.tsx +0 -56
  49. package/src/WysiwygEditor.tsx +0 -792
  50. package/src/__tests__/blockProperties.test.ts +0 -92
  51. package/src/__tests__/blockPropertiesPopoverTheme.test.tsx +0 -33
  52. package/src/__tests__/blockRange.test.ts +0 -105
  53. package/src/__tests__/blockTagActivity.test.ts +0 -183
  54. package/src/__tests__/buildDocumentPreviewMarkdown.test.ts +0 -75
  55. package/src/__tests__/buildPreviewDocContent.test.ts +0 -48
  56. package/src/__tests__/buildPreviewDocTransition.test.ts +0 -92
  57. package/src/__tests__/canvasSurfaceTextEditing.test.tsx +0 -60
  58. package/src/__tests__/codeContextSectionView.test.tsx +0 -97
  59. package/src/__tests__/codeContextZoneManager.test.ts +0 -127
  60. package/src/__tests__/createShapeLayer.test.ts +0 -46
  61. package/src/__tests__/customLayoutManagerTheme.test.tsx +0 -34
  62. package/src/__tests__/detectMarkdown.test.ts +0 -73
  63. package/src/__tests__/diffContextSections.test.ts +0 -39
  64. package/src/__tests__/documentSettingsDialog.test.tsx +0 -197
  65. package/src/__tests__/drawingShapeRoundTrip.test.ts +0 -49
  66. package/src/__tests__/editorScrollHandoff.test.tsx +0 -102
  67. package/src/__tests__/editorScrollSync.test.ts +0 -65
  68. package/src/__tests__/editorShellCodeContext.test.tsx +0 -86
  69. package/src/__tests__/editorShellProps.test.tsx +0 -485
  70. package/src/__tests__/embeddedMedia.test.ts +0 -48
  71. package/src/__tests__/emojiPicker.test.tsx +0 -93
  72. package/src/__tests__/fileKind.test.ts +0 -112
  73. package/src/__tests__/headingTransition.test.ts +0 -176
  74. package/src/__tests__/imageEditAffordance.test.tsx +0 -272
  75. package/src/__tests__/imageEditModalContract.test.tsx +0 -119
  76. package/src/__tests__/imageEditorShell.test.tsx +0 -94
  77. package/src/__tests__/imageEditorState.test.ts +0 -171
  78. package/src/__tests__/inlinePreviewGutter.test.tsx +0 -62
  79. package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx +0 -103
  80. package/src/__tests__/jsonEditor.test.tsx +0 -223
  81. package/src/__tests__/layersPanel.test.tsx +0 -167
  82. package/src/__tests__/layoutChildRoundTrip.test.ts +0 -71
  83. package/src/__tests__/linkDialogDocPicker.test.tsx +0 -137
  84. package/src/__tests__/majorApiTypes.test.ts +0 -26
  85. package/src/__tests__/mediaAttachmentFlow.test.ts +0 -110
  86. package/src/__tests__/mediaBinDrop.test.tsx +0 -90
  87. package/src/__tests__/mediaReferences.test.ts +0 -82
  88. package/src/__tests__/narrationSave.test.ts +0 -148
  89. package/src/__tests__/outlinePanel.test.tsx +0 -169
  90. package/src/__tests__/outlineSource.test.ts +0 -217
  91. package/src/__tests__/plainHtmlPreview.test.tsx +0 -125
  92. package/src/__tests__/presentationMode.test.tsx +0 -290
  93. package/src/__tests__/previewControls.test.tsx +0 -540
  94. package/src/__tests__/previewPanelAudioFailure.test.tsx +0 -46
  95. package/src/__tests__/previewPanelPresentation.test.tsx +0 -126
  96. package/src/__tests__/previewPanelTransforms.test.tsx +0 -117
  97. package/src/__tests__/propertiesPanel.test.tsx +0 -69
  98. package/src/__tests__/rawEditorModelIsolation.test.ts +0 -19
  99. package/src/__tests__/recorderFormats.test.ts +0 -146
  100. package/src/__tests__/recorderMediaInsert.test.ts +0 -86
  101. package/src/__tests__/recorderTheme.test.tsx +0 -42
  102. package/src/__tests__/recorderTimingJson.test.ts +0 -41
  103. package/src/__tests__/resolveBlockVisual.test.ts +0 -43
  104. package/src/__tests__/selectionConversions.test.ts +0 -80
  105. package/src/__tests__/statusBar.test.tsx +0 -27
  106. package/src/__tests__/teleprompter.test.tsx +0 -190
  107. package/src/__tests__/templateAnnotationRoundTrip.test.ts +0 -99
  108. package/src/__tests__/templateContentPreview.test.ts +0 -101
  109. package/src/__tests__/templatePickerMetadata.test.ts +0 -32
  110. package/src/__tests__/templatePickerPortal.test.tsx +0 -62
  111. package/src/__tests__/timelineSource.test.ts +0 -134
  112. package/src/__tests__/tiptapBridge.test.ts +0 -566
  113. package/src/__tests__/tiptapBridgeConformance.test.ts +0 -47
  114. package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts +0 -109
  115. package/src/__tests__/tiptapImageRoundTrip.test.ts +0 -73
  116. package/src/__tests__/toolbarSelectionConversion.test.tsx +0 -164
  117. package/src/__tests__/tooltip.test.tsx +0 -72
  118. package/src/__tests__/transformStyleId.test.ts +0 -13
  119. package/src/__tests__/transitionCatalog.test.ts +0 -64
  120. package/src/__tests__/useBlockNavigator.test.tsx +0 -67
  121. package/src/__tests__/useImageEditor.test.tsx +0 -226
  122. package/src/__tests__/useJsonEditorTokens.test.ts +0 -59
  123. package/src/__tests__/useMediaRecorder.test.ts +0 -302
  124. package/src/__tests__/useTimelineClock.test.ts +0 -21
  125. package/src/__tests__/versionHistory.test.tsx +0 -197
  126. package/src/__tests__/viewMenuPanel.test.tsx +0 -130
  127. package/src/__tests__/wysiwygImageUpload.test.ts +0 -69
  128. package/src/__tests__/wysiwygTemplateBadgeFocus.test.tsx +0 -56
  129. package/src/asciiDiagram/AsciiDiagramExtension.ts +0 -343
  130. package/src/asciiDiagram/AsciiDiagramWidget.tsx +0 -254
  131. package/src/asciiDiagram/RepairableDiagramExtension.ts +0 -200
  132. package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts +0 -145
  133. package/src/asciiDiagram/__tests__/RepairableDiagramExtension.test.ts +0 -159
  134. package/src/asciiDiagram/__tests__/asciiDiagramCommands.test.ts +0 -284
  135. package/src/asciiDiagram/__tests__/asciiDiagramOps.test.ts +0 -114
  136. package/src/asciiDiagram/__tests__/asciiPaste.test.ts +0 -43
  137. package/src/asciiDiagram/asciiDiagramCommands.ts +0 -174
  138. package/src/asciiDiagram/asciiDiagramData.ts +0 -149
  139. package/src/asciiDiagram/asciiDiagramOps.ts +0 -238
  140. package/src/asciiDiagram/asciiPaste.ts +0 -19
  141. package/src/blockProperties.ts +0 -88
  142. package/src/blockRange.ts +0 -132
  143. package/src/blockSlice.ts +0 -75
  144. package/src/blockTagActivity.ts +0 -233
  145. package/src/buildDocumentPreviewMarkdown.ts +0 -168
  146. package/src/buildPreviewDoc.ts +0 -405
  147. package/src/codeContext/CodeContextSectionView.tsx +0 -124
  148. package/src/codeContext/CodeContextZoneManager.ts +0 -149
  149. package/src/codeContext/CodeContextZones.tsx +0 -121
  150. package/src/codeContext/diffContextSections.ts +0 -38
  151. package/src/codeContext/types.ts +0 -75
  152. package/src/customTemplates/AddBin.tsx +0 -126
  153. package/src/customTemplates/CustomLayoutManager.tsx +0 -234
  154. package/src/customTemplates/CustomTemplateContext.tsx +0 -188
  155. package/src/customTemplates/LayerToolbar.tsx +0 -580
  156. package/src/customTemplates/ShapeGlyph.tsx +0 -47
  157. package/src/customTemplates/TemplateDesigner.tsx +0 -433
  158. package/src/customTemplates/__tests__/library.test.ts +0 -96
  159. package/src/customTemplates/__tests__/normalizePositions.test.ts +0 -109
  160. package/src/customTemplates/__tests__/shapeDefs.test.ts +0 -49
  161. package/src/customTemplates/__tests__/useMemoryLayerAdapter.test.ts +0 -108
  162. package/src/customTemplates/designer.css +0 -732
  163. package/src/customTemplates/index.ts +0 -31
  164. package/src/customTemplates/library.ts +0 -110
  165. package/src/customTemplates/normalizePositions.ts +0 -75
  166. package/src/customTemplates/shapeDefs.ts +0 -131
  167. package/src/customTemplates/thumbnail.tsx +0 -63
  168. package/src/customTemplates/tokenDefs.ts +0 -60
  169. package/src/customTemplates/useDocCustomTemplates.ts +0 -52
  170. package/src/customTemplates/useMemoryLayerAdapter.ts +0 -129
  171. package/src/customThemes/CustomThemeContext.tsx +0 -185
  172. package/src/customThemes/CustomThemeDialog.tsx +0 -316
  173. package/src/customThemes/ImportThemeSection.tsx +0 -178
  174. package/src/customThemes/__tests__/CustomThemeContext.test.tsx +0 -64
  175. package/src/customThemes/__tests__/CustomThemeDialog.test.tsx +0 -47
  176. package/src/customThemes/__tests__/customThemeLibrary.test.ts +0 -60
  177. package/src/customThemes/__tests__/importThemeSection.test.tsx +0 -192
  178. package/src/customThemes/customThemeLibrary.ts +0 -100
  179. package/src/customThemes/index.ts +0 -37
  180. package/src/customThemes/themeControls.tsx +0 -229
  181. package/src/customThemes/themeDraft.ts +0 -288
  182. package/src/customThemes/useDocCustomThemes.ts +0 -49
  183. package/src/detectMarkdown.ts +0 -62
  184. package/src/diagram/DiagramCanvas.tsx +0 -259
  185. package/src/diagram/DiagramMaximizedOverlay.tsx +0 -46
  186. package/src/diagram/diagramCommands.ts +0 -604
  187. package/src/diagram/diagramConstants.ts +0 -17
  188. package/src/diagram/types.ts +0 -35
  189. package/src/editorScrollSync.ts +0 -73
  190. package/src/embeddedMedia.ts +0 -78
  191. package/src/emojiData.ts +0 -1317
  192. package/src/fileKind.ts +0 -158
  193. package/src/frontmatter.ts +0 -29
  194. package/src/frontmatterSettings.ts +0 -23
  195. package/src/headingTransition.ts +0 -291
  196. package/src/hooks/useFileDrop.ts +0 -266
  197. package/src/imageEditor/CanvasSurface.tsx +0 -703
  198. package/src/imageEditor/ImageVersionHistoryDropdown.tsx +0 -396
  199. package/src/imageEditor/LayersPanel.tsx +0 -218
  200. package/src/imageEditor/PropertiesPanel.tsx +0 -474
  201. package/src/imageEditor/Toolbar.tsx +0 -459
  202. package/src/imageEditor/createShapeLayer.ts +0 -280
  203. package/src/imageEditor/icons.tsx +0 -68
  204. package/src/imageEditor/image-editor.css +0 -574
  205. package/src/imageEditor/layers/EditorImageLayer.tsx +0 -45
  206. package/src/imageEditor/layers/EditorShapeLayer.tsx +0 -62
  207. package/src/imageEditor/layers/EditorTextLayer.tsx +0 -45
  208. package/src/imageEditor/layers/SelectionHandles.tsx +0 -86
  209. package/src/imageEditor/state.ts +0 -173
  210. package/src/imageEditor/useImageEditor.ts +0 -385
  211. package/src/imageEditor/useImageEditorTokens.ts +0 -70
  212. package/src/index.ts +0 -470
  213. package/src/jsonEditor/EmbeddedRichTextField.tsx +0 -81
  214. package/src/jsonEditor/JsonEditor.tsx +0 -81
  215. package/src/jsonEditor/JsonEditorContext.tsx +0 -81
  216. package/src/jsonEditor/RenderNode.tsx +0 -87
  217. package/src/jsonEditor/editors.tsx +0 -745
  218. package/src/jsonEditor/index.ts +0 -2
  219. package/src/jsonEditor/json-editor.css +0 -463
  220. package/src/jsonEditor/useJsonEditorTokens.ts +0 -33
  221. package/src/mediaDragMime.ts +0 -32
  222. package/src/mediaEntries.ts +0 -12
  223. package/src/mediaReferences.ts +0 -299
  224. package/src/monaco.ts +0 -35
  225. package/src/monacoWorkers.ts +0 -89
  226. package/src/outlineSource.ts +0 -171
  227. package/src/presentation/PresentationMode.tsx +0 -596
  228. package/src/rawEditorIsolation.ts +0 -18
  229. package/src/recorder/RecorderButton.tsx +0 -80
  230. package/src/recorder/RecorderModal.tsx +0 -706
  231. package/src/recorder/RecorderPanel.tsx +0 -77
  232. package/src/recorder/formats.ts +0 -159
  233. package/src/recorder/hooks/useMediaRecorder.ts +0 -436
  234. package/src/recorder/hooks/useStreamPreview.ts +0 -47
  235. package/src/recorder/insertMediaBlock.ts +0 -30
  236. package/src/recorder/sources/cameraStream.ts +0 -32
  237. package/src/recorder/sources/micStream.ts +0 -25
  238. package/src/recorder/sources/screenStream.ts +0 -162
  239. package/src/recorder/timingJson.ts +0 -66
  240. package/src/resolveBlockVisual.ts +0 -39
  241. package/src/scene/Scene.tsx +0 -616
  242. package/src/scene/SceneBlockExtension.ts +0 -205
  243. package/src/scene/SceneBlockToolbar.tsx +0 -201
  244. package/src/scene/SceneBlockWidget.tsx +0 -441
  245. package/src/scene/ScenePropsBar.tsx +0 -85
  246. package/src/scene/SceneSelection.tsx +0 -111
  247. package/src/scene/SceneSideToolbar.tsx +0 -89
  248. package/src/scene/SceneViewport.tsx +0 -106
  249. package/src/scene/ShapePalette.tsx +0 -196
  250. package/src/scene/__tests__/DiagramAdapter.test.ts +0 -142
  251. package/src/scene/__tests__/SceneBlockExtension.test.ts +0 -33
  252. package/src/scene/__tests__/bezierEdit.test.ts +0 -85
  253. package/src/scene/__tests__/blockLayers.test.ts +0 -57
  254. package/src/scene/__tests__/sceneIsolation.test.tsx +0 -119
  255. package/src/scene/__tests__/shapeLayers.test.ts +0 -106
  256. package/src/scene/__tests__/useSceneHitTest.test.ts +0 -90
  257. package/src/scene/__tests__/useScenePanZoom.test.ts +0 -103
  258. package/src/scene/adapters/DiagramAdapter.ts +0 -79
  259. package/src/scene/adapters/DrawingAdapter.ts +0 -420
  260. package/src/scene/adapters/LayoutAdapter.ts +0 -313
  261. package/src/scene/adapters/blockLayers.ts +0 -159
  262. package/src/scene/commands/SceneCommand.ts +0 -84
  263. package/src/scene/commands/drawingCommands.ts +0 -318
  264. package/src/scene/commands/layoutCommands.ts +0 -301
  265. package/src/scene/hooks/useSceneHitTest.ts +0 -105
  266. package/src/scene/hooks/useScenePanZoom.ts +0 -147
  267. package/src/scene/hooks/useSceneSelection.ts +0 -62
  268. package/src/scene/index.ts +0 -90
  269. package/src/scene/layers/DiagramEdges.tsx +0 -142
  270. package/src/scene/layers/edgeGeometry.ts +0 -104
  271. package/src/scene/layers/nodeCard.tsx +0 -164
  272. package/src/scene/layers/renderLayer.tsx +0 -70
  273. package/src/scene/layers/shapeLayers.ts +0 -201
  274. package/src/scene/paths/bezierEdit.ts +0 -208
  275. package/src/scene/scene.css +0 -792
  276. package/src/scene/text/SceneTextOverlay.tsx +0 -161
  277. package/src/scene/text/sceneTextChannel.ts +0 -46
  278. package/src/scene/text/sceneTextConfig.ts +0 -31
  279. package/src/scene/text/sceneTiptap.ts +0 -36
  280. package/src/scene/text/useSceneTextEditing.ts +0 -39
  281. package/src/scene/tools/ConnectTool.ts +0 -209
  282. package/src/scene/tools/DrawingConnectTool.ts +0 -231
  283. package/src/scene/tools/PathTool.ts +0 -158
  284. package/src/scene/tools/PlaceTool.ts +0 -47
  285. package/src/scene/tools/SceneTool.ts +0 -85
  286. package/src/scene/tools/SelectTool.ts +0 -300
  287. package/src/scene/tools/ShapeTool.ts +0 -143
  288. package/src/scene/tools/TextTool.ts +0 -72
  289. package/src/scene/tools/TokenTool.ts +0 -95
  290. package/src/scene/tools/createDrawShapeTool.ts +0 -82
  291. package/src/selectionConversions.ts +0 -155
  292. package/src/styles/ascii-diagram.css +0 -79
  293. package/src/styles/ascii-timeline.css +0 -596
  294. package/src/styles/code-context.css +0 -155
  295. package/src/styles/diagram.css +0 -183
  296. package/src/styles/editor.css +0 -6811
  297. package/src/styles/folder-view.css +0 -210
  298. package/src/styles/image-edit-affordance.css +0 -201
  299. package/src/styles/index.css +0 -18
  300. package/src/styles/tree-view.css +0 -189
  301. package/src/teleprompter/TeleprompterControls.tsx +0 -218
  302. package/src/teleprompter/TeleprompterSelfView.tsx +0 -22
  303. package/src/teleprompter/TeleprompterSurface.tsx +0 -267
  304. package/src/teleprompter/TeleprompterView.tsx +0 -338
  305. package/src/teleprompter/canvasRenderer.ts +0 -161
  306. package/src/teleprompter/floatingWindow.ts +0 -352
  307. package/src/teleprompter/index.ts +0 -61
  308. package/src/teleprompter/pcmWorklet.ts +0 -62
  309. package/src/teleprompter/recording/insertPreamble.ts +0 -80
  310. package/src/teleprompter/recording/narrationSave.ts +0 -134
  311. package/src/teleprompter/recording/useNarrationRecorder.ts +0 -367
  312. package/src/teleprompter/scrollModel.ts +0 -85
  313. package/src/teleprompter/teleprompterTheme.ts +0 -303
  314. package/src/teleprompter/types.ts +0 -38
  315. package/src/teleprompter/useFloatingWindow.ts +0 -74
  316. package/src/teleprompter/useMicAnalysis.ts +0 -211
  317. package/src/teleprompter/useTeleprompter.ts +0 -421
  318. package/src/templateContentPreviewResolver.ts +0 -360
  319. package/src/timeline/TimelineEditorWidget.tsx +0 -861
  320. package/src/timeline/TimelineViewExtension.ts +0 -252
  321. package/src/timeline/__tests__/TimelineEditorWidget.test.tsx +0 -414
  322. package/src/timeline/__tests__/TimelineViewExtension.test.ts +0 -163
  323. package/src/timeline/__tests__/timelineCommands.test.ts +0 -359
  324. package/src/timeline/__tests__/timelineOps.test.ts +0 -277
  325. package/src/timeline/__tests__/timelinePaste.test.ts +0 -34
  326. package/src/timeline/timelineCommands.ts +0 -421
  327. package/src/timeline/timelineData.ts +0 -54
  328. package/src/timeline/timelineOps.ts +0 -381
  329. package/src/timeline/timelinePaste.ts +0 -8
  330. package/src/timelineSource.ts +0 -244
  331. package/src/tiptap/TiptapAudio.tsx +0 -86
  332. package/src/tiptap/TiptapVideo.tsx +0 -119
  333. package/src/tiptap/useResolvedMediaSrc.ts +0 -47
  334. package/src/tiptapBridge.ts +0 -986
  335. package/src/tooltipPlacement.ts +0 -13
  336. package/src/transformStyleId.ts +0 -17
  337. package/src/transitionCatalog.ts +0 -159
  338. package/src/treeview/TreeOutlineWidget.tsx +0 -390
  339. package/src/treeview/TreeViewExtension.ts +0 -250
  340. package/src/treeview/__tests__/TreeOutlineWidget.test.tsx +0 -156
  341. package/src/treeview/__tests__/TreeViewExtension.test.ts +0 -122
  342. package/src/treeview/__tests__/treeOps.test.ts +0 -177
  343. package/src/treeview/__tests__/treePaste.test.ts +0 -40
  344. package/src/treeview/__tests__/treeViewCommands.test.ts +0 -179
  345. package/src/treeview/treeOps.ts +0 -231
  346. package/src/treeview/treePaste.ts +0 -13
  347. package/src/treeview/treeViewCommands.ts +0 -99
  348. package/src/treeview/treeViewData.ts +0 -41
  349. package/src/types/monaco-shims.d.ts +0 -10
  350. package/src/useBlockNavigator.ts +0 -153
  351. package/src/useHeadingLayout.ts +0 -294
  352. package/src/useMonacoLoader.ts +0 -82
  353. package/src/useTimelineClock.ts +0 -76
  354. package/src/utils/collectInlineFontAwesomeCss.ts +0 -69
  355. package/src/utils/dropUtils.ts +0 -136
  356. package/src/utils/normalizeMalformedAssetUrl.ts +0 -22
  357. package/src/wysiwygImageUpload.ts +0 -113
@@ -1,31 +0,0 @@
1
- /**
2
- * Public exports for the custom-template designer + runtime.
3
- *
4
- * The host editor consumes these in three places:
5
- * - `<CustomTemplateProvider>` wraps the editor so the picker and
6
- * designer can read/write doc + library template lists.
7
- * - `<TemplateThumbnail>` renders the small icon shown on each
8
- * custom template's picker card.
9
- * - `<TemplateDesigner>` is the modal Scene-backed editor opened by
10
- * the picker's "+ New custom template" card. (Coming in step 10.)
11
- */
12
-
13
- export {
14
- CustomTemplateProvider,
15
- useCustomTemplates,
16
- type CustomTemplateContextValue,
17
- type CustomTemplateProviderProps,
18
- } from './CustomTemplateContext';
19
- export { TemplateThumbnail } from './thumbnail';
20
- export {
21
- listLibraryTemplates,
22
- saveLibraryTemplate,
23
- deleteLibraryTemplate,
24
- clearLibrary,
25
- LIBRARY_STORAGE_KEY,
26
- } from './library';
27
- export { TemplateDesigner, type DesignerSaveTarget } from './TemplateDesigner';
28
- export { CustomLayoutManager, type CustomLayoutManagerProps } from './CustomLayoutManager';
29
- export { useDocCustomTemplates, type DocCustomTemplates } from './useDocCustomTemplates';
30
- export { useMemoryLayerAdapter, applyCommand } from './useMemoryLayerAdapter';
31
- export { normalizePositions } from './normalizePositions';
@@ -1,110 +0,0 @@
1
- /**
2
- * Browser-local library of user-defined custom templates.
3
- *
4
- * Library templates live in `localStorage` under
5
- * `LIBRARY_STORAGE_KEY`. They're a cross-doc convenience — a personal
6
- * collection of designs the user reuses across documents — but they're
7
- * NOT used by the SSR pipeline. When a user applies a library template
8
- * to a block, `applyTemplate` (in CustomTemplateContext) copies the
9
- * definition into the doc's `customTemplates` so the doc remains
10
- * self-sufficient (the markdown file ships with everything it needs).
11
- *
12
- * Safe to import in SSR / Node — gracefully no-ops when
13
- * `localStorage` is unavailable.
14
- */
15
-
16
- import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
17
-
18
- export const LIBRARY_STORAGE_KEY = 'squisq:custom-template-library';
19
-
20
- interface LibraryPayload {
21
- /** Schema version for forward-compatibility. */
22
- version: 1;
23
- templates: CustomTemplateDefinition[];
24
- }
25
-
26
- function safeStorage(): Storage | null {
27
- try {
28
- return typeof globalThis !== 'undefined' && globalThis.localStorage
29
- ? globalThis.localStorage
30
- : null;
31
- } catch {
32
- // Some browsers throw on localStorage access in private mode.
33
- return null;
34
- }
35
- }
36
-
37
- function readPayload(): LibraryPayload {
38
- const storage = safeStorage();
39
- if (!storage) return { version: 1, templates: [] };
40
- try {
41
- const raw = storage.getItem(LIBRARY_STORAGE_KEY);
42
- if (!raw) return { version: 1, templates: [] };
43
- const parsed = JSON.parse(raw) as Partial<LibraryPayload>;
44
- if (parsed && Array.isArray(parsed.templates)) {
45
- return { version: 1, templates: parsed.templates.filter(isTemplateDefinition) };
46
- }
47
- } catch {
48
- // Corrupt payload — drop it.
49
- }
50
- return { version: 1, templates: [] };
51
- }
52
-
53
- function isTemplateDefinition(value: unknown): value is CustomTemplateDefinition {
54
- if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
55
- const candidate = value as Partial<CustomTemplateDefinition>;
56
- return (
57
- typeof candidate.name === 'string' &&
58
- typeof candidate.label === 'string' &&
59
- !!candidate.viewport &&
60
- Number.isFinite(candidate.viewport.width) &&
61
- Number.isFinite(candidate.viewport.height) &&
62
- Array.isArray(candidate.layers)
63
- );
64
- }
65
-
66
- function writePayload(payload: LibraryPayload): void {
67
- const storage = safeStorage();
68
- if (!storage) return;
69
- try {
70
- storage.setItem(LIBRARY_STORAGE_KEY, JSON.stringify(payload));
71
- } catch {
72
- // Quota exceeded or storage disabled — best-effort write.
73
- }
74
- }
75
-
76
- /** Return every template currently in the user's library, sorted by label. */
77
- export function listLibraryTemplates(): CustomTemplateDefinition[] {
78
- const { templates } = readPayload();
79
- return templates.slice().sort((a, b) => a.label.localeCompare(b.label));
80
- }
81
-
82
- /**
83
- * Insert or replace a library template (matched by `name`). Returns
84
- * the persisted list so callers can update their state without
85
- * re-reading.
86
- */
87
- export function saveLibraryTemplate(def: CustomTemplateDefinition): CustomTemplateDefinition[] {
88
- const payload = readPayload();
89
- const idx = payload.templates.findIndex((t) => t.name === def.name);
90
- if (idx >= 0) {
91
- payload.templates[idx] = def;
92
- } else {
93
- payload.templates.push(def);
94
- }
95
- writePayload(payload);
96
- return payload.templates.slice().sort((a, b) => a.label.localeCompare(b.label));
97
- }
98
-
99
- /** Remove a library template by name. Returns the updated list. */
100
- export function deleteLibraryTemplate(name: string): CustomTemplateDefinition[] {
101
- const payload = readPayload();
102
- payload.templates = payload.templates.filter((t) => t.name !== name);
103
- writePayload(payload);
104
- return payload.templates.slice().sort((a, b) => a.label.localeCompare(b.label));
105
- }
106
-
107
- /** Wipe the entire library — useful for tests and "reset" affordances. */
108
- export function clearLibrary(): void {
109
- writePayload({ version: 1, templates: [] });
110
- }
@@ -1,75 +0,0 @@
1
- /**
2
- * Normalize numeric position fields on a Layer[] to `%`-strings
3
- * relative to the designer canvas.
4
- *
5
- * Why: the designer drags layers around in pixel coordinates (that's
6
- * how pointer events work), but saved templates need to be
7
- * resolution-independent so the same definition renders correctly
8
- * across the landscape / portrait / square viewport presets. On Save
9
- * we run this normalizer to convert pixel positions to percentages.
10
- *
11
- * Width / height are converted against their own dimension (width
12
- * against canvas width, height against canvas height) — not "always
13
- * against width" like SVG `viewBox`-style coordinates.
14
- *
15
- * Already-`%`-valued fields are preserved verbatim. Anchor fields and
16
- * non-position content fields are untouched. Layers without an
17
- * explicit `position` are passed through unchanged.
18
- */
19
-
20
- import type { Layer, Position } from '@bendyline/squisq/schemas';
21
-
22
- export interface Canvas {
23
- width: number;
24
- height: number;
25
- }
26
-
27
- /**
28
- * Return a new Layer[] where each numeric position field has been
29
- * converted to a `%`-string relative to `canvas`. Pure function;
30
- * doesn't mutate the input.
31
- */
32
- export function normalizePositions(layers: readonly Layer[], canvas: Canvas): Layer[] {
33
- return layers.map((layer) => normalizeLayer(layer, canvas));
34
- }
35
-
36
- function normalizeLayer<L extends Layer>(layer: L, canvas: Canvas): L {
37
- if (!layer.position) return layer;
38
- const pos: Position = { ...layer.position };
39
- if (pos.x !== undefined) pos.x = toPercent(pos.x, canvas.width);
40
- if (pos.y !== undefined) pos.y = toPercent(pos.y, canvas.height);
41
- if (pos.width !== undefined) pos.width = toPercent(pos.width, canvas.width);
42
- if (pos.height !== undefined) pos.height = toPercent(pos.height, canvas.height);
43
- // `anchor` (top-left / center / etc.) is preserved verbatim.
44
- return { ...layer, position: pos } as L;
45
- }
46
-
47
- /**
48
- * Convert a single position value to a `%`-string. Already-string
49
- * `%` values pass through; non-numeric strings (e.g. hand-written
50
- * pixel expressions) are returned unchanged so we don't corrupt
51
- * intentional author markup.
52
- */
53
- function toPercent(value: number | string, base: number): string {
54
- if (typeof value === 'string') {
55
- if (value.endsWith('%')) return value;
56
- // Try to parse as a number ("180" → 180px → percent).
57
- const n = parseFloat(value);
58
- if (Number.isFinite(n) && String(n) === value) {
59
- return formatPercent((n / base) * 100);
60
- }
61
- return value;
62
- }
63
- if (!Number.isFinite(value) || base <= 0) return String(value);
64
- return formatPercent((value / base) * 100);
65
- }
66
-
67
- /** Format a percentage with up to two decimal places, trailing zeros trimmed. */
68
- function formatPercent(pct: number): string {
69
- // Round to 0.01% precision — enough for visually faithful round-trip
70
- // without bloating the saved layout JSON.
71
- const rounded = Math.round(pct * 100) / 100;
72
- // Drop trailing zeros: 50.00 → "50%", 50.10 → "50.1%".
73
- const str = rounded.toString();
74
- return `${str}%`;
75
- }
@@ -1,131 +0,0 @@
1
- /**
2
- * Standard shape definitions for the template designer's "Add" bin.
3
- *
4
- * Each entry maps to one of Squisq's shape kinds. The three primitives
5
- * the renderer draws natively (`rect`, `circle`, `line`) become a
6
- * `ShapeLayer`; every other kind is compiled to an SVG path via
7
- * {@link shapePath} and stored as a `PathLayer` — the same split the
8
- * `drawing` template uses (see `shapeGeometry.ts`). Both render through
9
- * the shared layer components, so the bin preview, the editor canvas,
10
- * and the final block render stay identical.
11
- *
12
- * Like {@link TOKEN_DEFS}, a shape can be placed two ways: drag it onto
13
- * the canvas (the drag carries the id on {@link SHAPE_DRAG_MIME}) or
14
- * click it to arm the matching place tool, then click the canvas.
15
- */
16
-
17
- import type { Layer, PathLayer, ShapeLayer } from '@bendyline/squisq/schemas';
18
- import { shapePath } from '@bendyline/squisq/doc';
19
-
20
- /** MIME type carried on the drag's `dataTransfer` for a shape. */
21
- export const SHAPE_DRAG_MIME = 'application/x-squisq-shape';
22
-
23
- export interface ShapeDef {
24
- /** Stable id, used both as the place-tool id and the drag payload. */
25
- id: string;
26
- /** Short button label. */
27
- label: string;
28
- /**
29
- * Shape kind. `rect`/`circle`/`line` render as a native `ShapeLayer`;
30
- * any other kind is compiled to a `PathLayer` path via `shapePath`.
31
- */
32
- kind: string;
33
- /** For `rect`: render with rounded corners. */
34
- rounded?: boolean;
35
- }
36
-
37
- export const SHAPE_DEFS: ShapeDef[] = [
38
- { id: 'shape-rect', label: 'Rectangle', kind: 'rect' },
39
- { id: 'shape-rect-rounded', label: 'Rounded', kind: 'rect', rounded: true },
40
- { id: 'shape-circle', label: 'Ellipse', kind: 'circle' },
41
- { id: 'shape-line', label: 'Line', kind: 'line' },
42
- { id: 'shape-triangle', label: 'Triangle', kind: 'triangle' },
43
- { id: 'shape-right-triangle', label: 'Right triangle', kind: 'right-triangle' },
44
- { id: 'shape-diamond', label: 'Diamond', kind: 'diamond' },
45
- { id: 'shape-pentagon', label: 'Pentagon', kind: 'pentagon' },
46
- { id: 'shape-hexagon', label: 'Hexagon', kind: 'hexagon' },
47
- { id: 'shape-octagon', label: 'Octagon', kind: 'octagon' },
48
- { id: 'shape-star', label: 'Star', kind: 'star' },
49
- { id: 'shape-star4', label: '4-point star', kind: 'star4' },
50
- { id: 'shape-star6', label: '6-point star', kind: 'star6' },
51
- { id: 'shape-parallelogram', label: 'Parallelogram', kind: 'parallelogram' },
52
- { id: 'shape-trapezoid', label: 'Trapezoid', kind: 'trapezoid' },
53
- { id: 'shape-plus', label: 'Plus', kind: 'plus' },
54
- { id: 'shape-chevron', label: 'Chevron', kind: 'chevron' },
55
- { id: 'shape-arrow-right', label: 'Arrow right', kind: 'arrow-right' },
56
- { id: 'shape-arrow-left', label: 'Arrow left', kind: 'arrow-left' },
57
- { id: 'shape-arrow-up', label: 'Arrow up', kind: 'arrow-up' },
58
- { id: 'shape-arrow-down', label: 'Arrow down', kind: 'arrow-down' },
59
- { id: 'shape-double-arrow', label: 'Double arrow', kind: 'double-arrow' },
60
- { id: 'shape-callout', label: 'Callout', kind: 'callout' },
61
- { id: 'shape-cylinder', label: 'Cylinder', kind: 'cylinder' },
62
- { id: 'shape-cloud', label: 'Cloud', kind: 'cloud' },
63
- { id: 'shape-heart', label: 'Heart', kind: 'heart' },
64
- { id: 'shape-lightning', label: 'Lightning', kind: 'lightning' },
65
- ];
66
-
67
- /** Kinds the renderer draws natively as a `ShapeLayer`. */
68
- const NATIVE_KINDS = new Set(['rect', 'circle', 'line']);
69
-
70
- /** Default visual styling for a freshly placed shape. */
71
- const FILL = '#e2e8f0'; // slate-200
72
- const STROKE = '#475569'; // slate-600
73
- const STROKE_WIDTH = 2;
74
- const ROUNDED_RADIUS = 20;
75
-
76
- /** Default placement box (top-left anchored at the drop/click point). */
77
- function defaultSize(kind: string): { width: number; height: number } {
78
- if (kind === 'line') return { width: 280, height: 120 };
79
- return { width: 220, height: 180 };
80
- }
81
-
82
- let counter = 0;
83
- function nextShapeId(): string {
84
- counter += 1;
85
- return `shape-${Date.now().toString(36)}-${counter}`;
86
- }
87
-
88
- /**
89
- * Build the layer a shape def adds, top-left at the given viewport point.
90
- * Native kinds produce a `ShapeLayer`; everything else a computed
91
- * `PathLayer`. Shared by the click-to-place tool and the drag-drop
92
- * handler so both paths produce identical layers.
93
- */
94
- export function buildShapeLayer(def: ShapeDef, point: { x: number; y: number }): Layer {
95
- const { width, height } = defaultSize(def.kind);
96
- const position = { x: point.x, y: point.y, width, height };
97
- const id = nextShapeId();
98
-
99
- if (NATIVE_KINDS.has(def.kind)) {
100
- const layer: ShapeLayer = {
101
- id,
102
- type: 'shape',
103
- position,
104
- content: {
105
- shape: def.kind as 'rect' | 'circle' | 'line',
106
- fill: def.kind === 'line' ? 'none' : FILL,
107
- stroke: STROKE,
108
- strokeWidth: STROKE_WIDTH,
109
- ...(def.kind === 'rect' ? { borderRadius: def.rounded ? ROUNDED_RADIUS : 0 } : {}),
110
- },
111
- };
112
- return layer;
113
- }
114
-
115
- const layer: PathLayer = {
116
- id,
117
- type: 'path',
118
- position,
119
- content: {
120
- // `d` is the initial geometry; `shapeKind` lets the renderer
121
- // re-derive it from `position` so the shape moves, resizes, and
122
- // adapts to the viewport (see PathLayer).
123
- d: shapePath(def.kind, point.x, point.y, width, height) ?? '',
124
- shapeKind: def.kind,
125
- fill: FILL,
126
- stroke: STROKE,
127
- strokeWidth: STROKE_WIDTH,
128
- },
129
- };
130
- return layer;
131
- }
@@ -1,63 +0,0 @@
1
- /**
2
- * Custom-template thumbnails for the picker gallery.
3
- *
4
- * Renders a CustomTemplateDefinition's layers in a small SVG that
5
- * matches the picker card's icon slot (56×40). Layers are rendered via
6
- * the same `RenderLayer` the editor canvas uses, so the thumbnail is
7
- * an accurate (just smaller) preview.
8
- *
9
- * Tokens are NOT resolved — the thumbnail shows placeholder strings
10
- * (`{title}`, `{content}`) so the user can see what fields the
11
- * template will fill in. That's the point of a template preview.
12
- */
13
-
14
- import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
15
- import { RenderLayer } from '../scene/layers/renderLayer';
16
-
17
- const W = 56;
18
- const H = 40;
19
-
20
- interface TemplateThumbnailProps {
21
- def: CustomTemplateDefinition;
22
- /** Override width / height (defaults match the picker icon slot). */
23
- width?: number;
24
- height?: number;
25
- }
26
-
27
- export function TemplateThumbnail({ def, width = W, height = H }: TemplateThumbnailProps) {
28
- // The SVG renders the template's authoring viewport as its viewBox,
29
- // so a 1920×1080 design becomes a 56×40 preview at the same aspect.
30
- // `preserveAspectRatio="xMidYMid meet"` letterboxes when the
31
- // requested width/height don't match — important for very narrow or
32
- // very wide custom canvases.
33
- return (
34
- <svg
35
- width={width}
36
- height={height}
37
- viewBox={`0 0 ${def.viewport.width} ${def.viewport.height}`}
38
- preserveAspectRatio="xMidYMid meet"
39
- className="squisq-template-thumbnail"
40
- aria-hidden="true"
41
- >
42
- {/* Background so an all-text template doesn't paint over the card. */}
43
- <rect width={def.viewport.width} height={def.viewport.height} fill="#f8fafc" />
44
- {def.layers.map((layer) => (
45
- <g key={layer.id}>
46
- <RenderLayer layer={layer} viewport={def.viewport} />
47
- </g>
48
- ))}
49
- {/* Subtle 1px border in viewport-space so the preview stays
50
- distinguishable from the picker card around it. */}
51
- <rect
52
- x={0}
53
- y={0}
54
- width={def.viewport.width}
55
- height={def.viewport.height}
56
- fill="none"
57
- stroke="#cbd5e1"
58
- strokeWidth={2}
59
- vectorEffect="non-scaling-stroke"
60
- />
61
- </svg>
62
- );
63
- }
@@ -1,60 +0,0 @@
1
- /**
2
- * Placeholder token definitions for the template designer — the single
3
- * source of truth shared by:
4
- *
5
- * - `AddBin` (renders the draggable/clickable buttons),
6
- * - `TemplateDesigner` (builds one `createTokenTool` per entry, and
7
- * looks an entry up by id on drop).
8
- *
9
- * Each token's `token` string is the literal substituted at render time
10
- * (e.g. `{title}`) and doubles as the preview shown on the button.
11
- */
12
-
13
- import type { TokenKind } from '../scene';
14
-
15
- export interface TokenDef {
16
- /** Stable id, used both as the tool id and the drag payload. */
17
- id: string;
18
- /** Short button label. */
19
- label: string;
20
- /** Tooltip describing what the placeholder substitutes. */
21
- desc: string;
22
- /** Placeholder string dropped into the layer and shown as the preview. */
23
- token: string;
24
- /** Which layer kind the token creates. */
25
- kind: TokenKind;
26
- }
27
-
28
- /** MIME type carried on the drag's `dataTransfer` for a placeholder token. */
29
- export const TOKEN_DRAG_MIME = 'application/x-squisq-token';
30
-
31
- export const TOKEN_DEFS: TokenDef[] = [
32
- {
33
- id: 'token-title',
34
- label: 'Title',
35
- desc: "Substitutes the block's heading text.",
36
- token: '{title}',
37
- kind: 'text',
38
- },
39
- {
40
- id: 'token-content',
41
- label: 'Content',
42
- desc: "Substitutes the block's body text.",
43
- token: '{content}',
44
- kind: 'text',
45
- },
46
- {
47
- id: 'token-children',
48
- label: 'Children',
49
- desc: 'Comma-joined list of child heading titles.',
50
- token: '{children}',
51
- kind: 'text',
52
- },
53
- {
54
- id: 'token-image',
55
- label: 'Image',
56
- desc: "The first image found in the block's body.",
57
- token: '{image:0}',
58
- kind: 'image',
59
- },
60
- ];
@@ -1,52 +0,0 @@
1
- /**
2
- * useDocCustomTemplates — read + persist the active doc's custom
3
- * templates (the list inlined into the doc's frontmatter under
4
- * `squisq-custom-templates`).
5
- *
6
- * Both the WYSIWYG editor and the standalone Custom Layout Manager need
7
- * the same two things: the current `Doc.customTemplates` array and a way
8
- * to write a new list back into the markdown source. Centralizing the
9
- * frontmatter encoding here keeps the two call sites from drifting.
10
- */
11
-
12
- import { useCallback, useMemo } from 'react';
13
- import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
14
- import {
15
- FRONTMATTER_CUSTOM_TEMPLATES_KEY,
16
- writeCustomTemplatesToFrontmatter,
17
- } from '@bendyline/squisq/doc';
18
- import { setFrontmatterValues } from '@bendyline/squisq/markdown';
19
- import { useEditorContext } from '../EditorContext';
20
-
21
- export interface DocCustomTemplates {
22
- /** Custom templates inlined in the active doc's frontmatter. */
23
- docTemplates: CustomTemplateDefinition[];
24
- /**
25
- * Persist a new custom-templates list back into the markdown source's
26
- * frontmatter so the doc round-trips through save/load. The whole list
27
- * is encoded as a single base64-JSON string per the flat YAML
28
- * frontmatter parser's constraint.
29
- */
30
- onDocTemplatesChange: (next: CustomTemplateDefinition[]) => void;
31
- }
32
-
33
- export function useDocCustomTemplates(): DocCustomTemplates {
34
- const { doc, markdownSource, setMarkdownSource } = useEditorContext();
35
- // Memoized so identity is stable across renders that don't touch
36
- // frontmatter — keeps the CustomTemplateProvider value stable.
37
- const docTemplates = useMemo<CustomTemplateDefinition[]>(
38
- () => doc?.customTemplates ?? [],
39
- [doc?.customTemplates],
40
- );
41
- const onDocTemplatesChange = useCallback(
42
- (next: CustomTemplateDefinition[]) => {
43
- const payload = writeCustomTemplatesToFrontmatter(next);
44
- const updated = setFrontmatterValues(markdownSource, {
45
- [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload ?? null,
46
- });
47
- if (updated !== markdownSource) setMarkdownSource(updated);
48
- },
49
- [markdownSource, setMarkdownSource],
50
- );
51
- return { docTemplates, onDocTemplatesChange };
52
- }
@@ -1,129 +0,0 @@
1
- /**
2
- * In-memory variant of LayoutAdapter.
3
- *
4
- * `useLayoutAdapter` persists Layer mutations to a heading's
5
- * `data-block-attrs` Pandoc param. For the template designer, the
6
- * Layer[] doesn't belong to a heading — it's being authored in a
7
- * modal and saved to the doc / library as a `CustomTemplateDefinition`
8
- * only when the user clicks Save. This adapter swaps Tiptap-backed
9
- * storage for a plain React state holder so the designer can reuse
10
- * the Scene component verbatim.
11
- *
12
- * Returns the same `{ layers, tools, dispatch }` shape as
13
- * `useLayoutAdapter` so the Scene API surface stays consistent.
14
- */
15
-
16
- import { useCallback, useState } from 'react';
17
- import type { Layer } from '@bendyline/squisq/schemas';
18
- import type { SceneCommand, SceneTool } from '../scene';
19
-
20
- export interface MemoryLayerAdapterResult {
21
- layers: Layer[];
22
- tools: SceneTool[];
23
- dispatch: (cmd: SceneCommand) => void;
24
- /** Replace the entire layer array (e.g. for Load / Reset / template-fork flows). */
25
- setLayers: (next: Layer[]) => void;
26
- }
27
-
28
- export interface MemoryLayerAdapterOptions {
29
- /** Initial layer array. */
30
- initial?: Layer[];
31
- /** Tool set the host should expose. Required — typically Select + token tools. */
32
- tools: SceneTool[];
33
- }
34
-
35
- /**
36
- * Manage a Layer[] in React state and expose it through the same
37
- * adapter contract the Scene expects. SceneCommands are interpreted
38
- * against the in-memory array and applied via `setLayers`.
39
- */
40
- export function useMemoryLayerAdapter(
41
- options: MemoryLayerAdapterOptions,
42
- ): MemoryLayerAdapterResult {
43
- const [layers, setLayers] = useState<Layer[]>(() => options.initial ?? []);
44
-
45
- const dispatch = useCallback((cmd: SceneCommand) => {
46
- setLayers((current) => applyCommand(current, cmd));
47
- }, []);
48
-
49
- return {
50
- layers,
51
- tools: options.tools,
52
- dispatch,
53
- setLayers,
54
- };
55
- }
56
-
57
- /**
58
- * Pure application of a SceneCommand against a Layer[]. Exported so
59
- * tests can exercise the reducer in isolation.
60
- */
61
- export function applyCommand(layers: readonly Layer[], cmd: SceneCommand): Layer[] {
62
- switch (cmd.kind) {
63
- case 'moveLayer':
64
- return layers.map((l) =>
65
- l.id === cmd.id ? ({ ...l, position: { ...l.position, x: cmd.x, y: cmd.y } } as Layer) : l,
66
- );
67
- case 'resizeLayer':
68
- return layers.map((l) =>
69
- l.id === cmd.id
70
- ? ({
71
- ...l,
72
- position: {
73
- ...l.position,
74
- ...(cmd.x !== undefined ? { x: cmd.x } : {}),
75
- ...(cmd.y !== undefined ? { y: cmd.y } : {}),
76
- width: cmd.width,
77
- height: cmd.height,
78
- },
79
- } as Layer)
80
- : l,
81
- );
82
- case 'addLayer':
83
- return [...layers, cmd.layer];
84
- case 'removeLayer':
85
- return layers.filter((l) => l.id !== cmd.id);
86
- case 'setLayerAttr':
87
- return layers.map((l) => (l.id === cmd.id ? setAttrAtPath(l, cmd.path, cmd.value) : l));
88
- case 'renameLayer':
89
- return layers.map((l) => {
90
- if (l.id !== cmd.id) return l;
91
- if (l.type !== 'text') return l;
92
- return { ...l, content: { ...l.content, text: cmd.label } };
93
- });
94
- case 'setLayerText':
95
- return layers.map((l) => {
96
- if (l.id !== cmd.id || l.type !== 'text') return l;
97
- const content = { ...l.content, text: cmd.text };
98
- if (cmd.html && cmd.html.trim()) content.html = cmd.html;
99
- else delete content.html;
100
- return { ...l, content };
101
- });
102
- case 'addEdge':
103
- case 'removeEdge':
104
- // No edge model in memory adapter; ignored.
105
- return layers.slice();
106
- }
107
- const _exhaustive: never = cmd;
108
- void _exhaustive;
109
- return layers.slice();
110
- }
111
-
112
- /**
113
- * Set a deeply-nested field on a Layer via a dotted path. Returns a
114
- * new Layer; the input is not mutated. JSON-clone is safe for Layer
115
- * since the schema is pure plain data.
116
- */
117
- function setAttrAtPath(layer: Layer, path: string, value: unknown): Layer {
118
- const segments = path.split('.');
119
- const next = JSON.parse(JSON.stringify(layer)) as Layer;
120
- let target: Record<string, unknown> = next as unknown as Record<string, unknown>;
121
- for (let i = 0; i < segments.length - 1; i++) {
122
- const key = segments[i];
123
- const child = target[key];
124
- if (typeof child !== 'object' || child === null) return layer;
125
- target = child as Record<string, unknown>;
126
- }
127
- target[segments[segments.length - 1]] = value;
128
- return next;
129
- }