npm - @bendyline/squisq-editor-react - Versions diffs - 2.0.1 → 2.2.0 - Mend

@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

package/LICENSE +21 -0
package/NOTICE.md +40 -0
package/README.md +10 -2
package/dist/index.d.ts +683 -60
package/dist/index.js +9648 -3750
package/dist/monaco.js +0 -1
package/dist/styles/index.css +1160 -241
package/package.json +10 -6
package/dist/index.js.map +0 -1
package/dist/monaco.js.map +0 -1
package/src/BlockCardView.tsx +0 -121
package/src/BlockPreviewPanel.tsx +0 -69
package/src/BlockPropertiesPopover.tsx +0 -222
package/src/DocumentSettingsDialog.tsx +0 -272
package/src/DropZoneOverlay.tsx +0 -137
package/src/EditorContext.tsx +0 -1247
package/src/EditorShell.tsx +0 -1334
package/src/EmojiPicker.tsx +0 -332
package/src/FolderView.tsx +0 -131
package/src/Icon.tsx +0 -26
package/src/ImageEditor.tsx +0 -395
package/src/ImageNodeView.tsx +0 -284
package/src/ImageViewer.tsx +0 -221
package/src/InlineIcon.ts +0 -84
package/src/InlinePreviewGutter.tsx +0 -590
package/src/LinkDialog.tsx +0 -276
package/src/MediaBin.tsx +0 -500
package/src/MentionExtension.tsx +0 -261
package/src/OutlinePanel.tsx +0 -547
package/src/PlainHtmlPreview.tsx +0 -277
package/src/PreviewControls.tsx +0 -1250
package/src/PreviewPanel.tsx +0 -422
package/src/RawEditor.tsx +0 -731
package/src/RecorderEntry.tsx +0 -159
package/src/StatusBar.tsx +0 -51
package/src/TemplateAnnotation.ts +0 -167
package/src/TemplateContentPreview.tsx +0 -56
package/src/TemplatePicker.tsx +0 -1314
package/src/ThemeCustomizerPanel.tsx +0 -304
package/src/ThemePicker.tsx +0 -433
package/src/TimelineBlockPreview.tsx +0 -37
package/src/TimelineTrack.tsx +0 -671
package/src/Toolbar.tsx +0 -2587
package/src/Tooltip.tsx +0 -142
package/src/TransitionPicker.tsx +0 -390
package/src/VersionHistoryPanel.tsx +0 -359
package/src/ViewMenuPanel.tsx +0 -189
package/src/ViewSwitcher.tsx +0 -56
package/src/WysiwygEditor.tsx +0 -792
package/src/__tests__/blockProperties.test.ts +0 -92
package/src/__tests__/blockPropertiesPopoverTheme.test.tsx +0 -33
package/src/__tests__/blockRange.test.ts +0 -105
package/src/__tests__/blockTagActivity.test.ts +0 -183
package/src/__tests__/buildDocumentPreviewMarkdown.test.ts +0 -75
package/src/__tests__/buildPreviewDocContent.test.ts +0 -48
package/src/__tests__/buildPreviewDocTransition.test.ts +0 -92
package/src/__tests__/canvasSurfaceTextEditing.test.tsx +0 -60
package/src/__tests__/codeContextSectionView.test.tsx +0 -97
package/src/__tests__/codeContextZoneManager.test.ts +0 -127
package/src/__tests__/createShapeLayer.test.ts +0 -46
package/src/__tests__/customLayoutManagerTheme.test.tsx +0 -34
package/src/__tests__/detectMarkdown.test.ts +0 -73
package/src/__tests__/diffContextSections.test.ts +0 -39
package/src/__tests__/documentSettingsDialog.test.tsx +0 -197
package/src/__tests__/drawingShapeRoundTrip.test.ts +0 -49
package/src/__tests__/editorScrollHandoff.test.tsx +0 -102
package/src/__tests__/editorScrollSync.test.ts +0 -65
package/src/__tests__/editorShellCodeContext.test.tsx +0 -86
package/src/__tests__/editorShellProps.test.tsx +0 -485
package/src/__tests__/embeddedMedia.test.ts +0 -48
package/src/__tests__/emojiPicker.test.tsx +0 -93
package/src/__tests__/fileKind.test.ts +0 -112
package/src/__tests__/headingTransition.test.ts +0 -176
package/src/__tests__/imageEditAffordance.test.tsx +0 -272
package/src/__tests__/imageEditModalContract.test.tsx +0 -119
package/src/__tests__/imageEditorShell.test.tsx +0 -94
package/src/__tests__/imageEditorState.test.ts +0 -171
package/src/__tests__/inlinePreviewGutter.test.tsx +0 -62
package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx +0 -103
package/src/__tests__/jsonEditor.test.tsx +0 -223
package/src/__tests__/layersPanel.test.tsx +0 -167
package/src/__tests__/layoutChildRoundTrip.test.ts +0 -71
package/src/__tests__/linkDialogDocPicker.test.tsx +0 -137
package/src/__tests__/majorApiTypes.test.ts +0 -26
package/src/__tests__/mediaAttachmentFlow.test.ts +0 -110
package/src/__tests__/mediaBinDrop.test.tsx +0 -90
package/src/__tests__/mediaReferences.test.ts +0 -82
package/src/__tests__/narrationSave.test.ts +0 -148
package/src/__tests__/outlinePanel.test.tsx +0 -169
package/src/__tests__/outlineSource.test.ts +0 -217
package/src/__tests__/plainHtmlPreview.test.tsx +0 -125
package/src/__tests__/presentationMode.test.tsx +0 -290
package/src/__tests__/previewControls.test.tsx +0 -540
package/src/__tests__/previewPanelAudioFailure.test.tsx +0 -46
package/src/__tests__/previewPanelPresentation.test.tsx +0 -126
package/src/__tests__/previewPanelTransforms.test.tsx +0 -117
package/src/__tests__/propertiesPanel.test.tsx +0 -69
package/src/__tests__/rawEditorModelIsolation.test.ts +0 -19
package/src/__tests__/recorderFormats.test.ts +0 -146
package/src/__tests__/recorderMediaInsert.test.ts +0 -86
package/src/__tests__/recorderTheme.test.tsx +0 -42
package/src/__tests__/recorderTimingJson.test.ts +0 -41
package/src/__tests__/resolveBlockVisual.test.ts +0 -43
package/src/__tests__/selectionConversions.test.ts +0 -80
package/src/__tests__/statusBar.test.tsx +0 -27
package/src/__tests__/teleprompter.test.tsx +0 -190
package/src/__tests__/templateAnnotationRoundTrip.test.ts +0 -99
package/src/__tests__/templateContentPreview.test.ts +0 -101
package/src/__tests__/templatePickerMetadata.test.ts +0 -32
package/src/__tests__/templatePickerPortal.test.tsx +0 -62
package/src/__tests__/timelineSource.test.ts +0 -134
package/src/__tests__/tiptapBridge.test.ts +0 -566
package/src/__tests__/tiptapBridgeConformance.test.ts +0 -47
package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts +0 -109
package/src/__tests__/tiptapImageRoundTrip.test.ts +0 -73
package/src/__tests__/toolbarSelectionConversion.test.tsx +0 -164
package/src/__tests__/tooltip.test.tsx +0 -72
package/src/__tests__/transformStyleId.test.ts +0 -13
package/src/__tests__/transitionCatalog.test.ts +0 -64
package/src/__tests__/useBlockNavigator.test.tsx +0 -67
package/src/__tests__/useImageEditor.test.tsx +0 -226
package/src/__tests__/useJsonEditorTokens.test.ts +0 -59
package/src/__tests__/useMediaRecorder.test.ts +0 -302
package/src/__tests__/useTimelineClock.test.ts +0 -21
package/src/__tests__/versionHistory.test.tsx +0 -197
package/src/__tests__/viewMenuPanel.test.tsx +0 -130
package/src/__tests__/wysiwygImageUpload.test.ts +0 -69
package/src/__tests__/wysiwygTemplateBadgeFocus.test.tsx +0 -56
package/src/asciiDiagram/AsciiDiagramExtension.ts +0 -343
package/src/asciiDiagram/AsciiDiagramWidget.tsx +0 -254
package/src/asciiDiagram/RepairableDiagramExtension.ts +0 -200
package/src/asciiDiagram/__tests__/AsciiDiagramExtension.test.ts +0 -145
package/src/asciiDiagram/__tests__/RepairableDiagramExtension.test.ts +0 -159
package/src/asciiDiagram/__tests__/asciiDiagramCommands.test.ts +0 -284
package/src/asciiDiagram/__tests__/asciiDiagramOps.test.ts +0 -114
package/src/asciiDiagram/__tests__/asciiPaste.test.ts +0 -43
package/src/asciiDiagram/asciiDiagramCommands.ts +0 -174
package/src/asciiDiagram/asciiDiagramData.ts +0 -149
package/src/asciiDiagram/asciiDiagramOps.ts +0 -238
package/src/asciiDiagram/asciiPaste.ts +0 -19
package/src/blockProperties.ts +0 -88
package/src/blockRange.ts +0 -132
package/src/blockSlice.ts +0 -75
package/src/blockTagActivity.ts +0 -233
package/src/buildDocumentPreviewMarkdown.ts +0 -168
package/src/buildPreviewDoc.ts +0 -405
package/src/codeContext/CodeContextSectionView.tsx +0 -124
package/src/codeContext/CodeContextZoneManager.ts +0 -149
package/src/codeContext/CodeContextZones.tsx +0 -121
package/src/codeContext/diffContextSections.ts +0 -38
package/src/codeContext/types.ts +0 -75
package/src/customTemplates/AddBin.tsx +0 -126
package/src/customTemplates/CustomLayoutManager.tsx +0 -234
package/src/customTemplates/CustomTemplateContext.tsx +0 -188
package/src/customTemplates/LayerToolbar.tsx +0 -580
package/src/customTemplates/ShapeGlyph.tsx +0 -47
package/src/customTemplates/TemplateDesigner.tsx +0 -433
package/src/customTemplates/__tests__/library.test.ts +0 -96
package/src/customTemplates/__tests__/normalizePositions.test.ts +0 -109
package/src/customTemplates/__tests__/shapeDefs.test.ts +0 -49
package/src/customTemplates/__tests__/useMemoryLayerAdapter.test.ts +0 -108
package/src/customTemplates/designer.css +0 -732
package/src/customTemplates/index.ts +0 -31
package/src/customTemplates/library.ts +0 -110
package/src/customTemplates/normalizePositions.ts +0 -75
package/src/customTemplates/shapeDefs.ts +0 -131
package/src/customTemplates/thumbnail.tsx +0 -63
package/src/customTemplates/tokenDefs.ts +0 -60
package/src/customTemplates/useDocCustomTemplates.ts +0 -52
package/src/customTemplates/useMemoryLayerAdapter.ts +0 -129
package/src/customThemes/CustomThemeContext.tsx +0 -185
package/src/customThemes/CustomThemeDialog.tsx +0 -316
package/src/customThemes/ImportThemeSection.tsx +0 -178
package/src/customThemes/__tests__/CustomThemeContext.test.tsx +0 -64
package/src/customThemes/__tests__/CustomThemeDialog.test.tsx +0 -47
package/src/customThemes/__tests__/customThemeLibrary.test.ts +0 -60
package/src/customThemes/__tests__/importThemeSection.test.tsx +0 -192
package/src/customThemes/customThemeLibrary.ts +0 -100
package/src/customThemes/index.ts +0 -37
package/src/customThemes/themeControls.tsx +0 -229
package/src/customThemes/themeDraft.ts +0 -288
package/src/customThemes/useDocCustomThemes.ts +0 -49
package/src/detectMarkdown.ts +0 -62
package/src/diagram/DiagramCanvas.tsx +0 -259
package/src/diagram/DiagramMaximizedOverlay.tsx +0 -46
package/src/diagram/diagramCommands.ts +0 -604
package/src/diagram/diagramConstants.ts +0 -17
package/src/diagram/types.ts +0 -35
package/src/editorScrollSync.ts +0 -73
package/src/embeddedMedia.ts +0 -78
package/src/emojiData.ts +0 -1317
package/src/fileKind.ts +0 -158
package/src/frontmatter.ts +0 -29
package/src/frontmatterSettings.ts +0 -23
package/src/headingTransition.ts +0 -291
package/src/hooks/useFileDrop.ts +0 -266
package/src/imageEditor/CanvasSurface.tsx +0 -703
package/src/imageEditor/ImageVersionHistoryDropdown.tsx +0 -396
package/src/imageEditor/LayersPanel.tsx +0 -218
package/src/imageEditor/PropertiesPanel.tsx +0 -474
package/src/imageEditor/Toolbar.tsx +0 -459
package/src/imageEditor/createShapeLayer.ts +0 -280
package/src/imageEditor/icons.tsx +0 -68
package/src/imageEditor/image-editor.css +0 -574
package/src/imageEditor/layers/EditorImageLayer.tsx +0 -45
package/src/imageEditor/layers/EditorShapeLayer.tsx +0 -62
package/src/imageEditor/layers/EditorTextLayer.tsx +0 -45
package/src/imageEditor/layers/SelectionHandles.tsx +0 -86
package/src/imageEditor/state.ts +0 -173
package/src/imageEditor/useImageEditor.ts +0 -385
package/src/imageEditor/useImageEditorTokens.ts +0 -70
package/src/index.ts +0 -470
package/src/jsonEditor/EmbeddedRichTextField.tsx +0 -81
package/src/jsonEditor/JsonEditor.tsx +0 -81
package/src/jsonEditor/JsonEditorContext.tsx +0 -81
package/src/jsonEditor/RenderNode.tsx +0 -87
package/src/jsonEditor/editors.tsx +0 -745
package/src/jsonEditor/index.ts +0 -2
package/src/jsonEditor/json-editor.css +0 -463
package/src/jsonEditor/useJsonEditorTokens.ts +0 -33
package/src/mediaDragMime.ts +0 -32
package/src/mediaEntries.ts +0 -12
package/src/mediaReferences.ts +0 -299
package/src/monaco.ts +0 -35
package/src/monacoWorkers.ts +0 -89
package/src/outlineSource.ts +0 -171
package/src/presentation/PresentationMode.tsx +0 -596
package/src/rawEditorIsolation.ts +0 -18
package/src/recorder/RecorderButton.tsx +0 -80
package/src/recorder/RecorderModal.tsx +0 -706
package/src/recorder/RecorderPanel.tsx +0 -77
package/src/recorder/formats.ts +0 -159
package/src/recorder/hooks/useMediaRecorder.ts +0 -436
package/src/recorder/hooks/useStreamPreview.ts +0 -47
package/src/recorder/insertMediaBlock.ts +0 -30
package/src/recorder/sources/cameraStream.ts +0 -32
package/src/recorder/sources/micStream.ts +0 -25
package/src/recorder/sources/screenStream.ts +0 -162
package/src/recorder/timingJson.ts +0 -66
package/src/resolveBlockVisual.ts +0 -39
package/src/scene/Scene.tsx +0 -616
package/src/scene/SceneBlockExtension.ts +0 -205
package/src/scene/SceneBlockToolbar.tsx +0 -201
package/src/scene/SceneBlockWidget.tsx +0 -441
package/src/scene/ScenePropsBar.tsx +0 -85
package/src/scene/SceneSelection.tsx +0 -111
package/src/scene/SceneSideToolbar.tsx +0 -89
package/src/scene/SceneViewport.tsx +0 -106
package/src/scene/ShapePalette.tsx +0 -196
package/src/scene/__tests__/DiagramAdapter.test.ts +0 -142
package/src/scene/__tests__/SceneBlockExtension.test.ts +0 -33
package/src/scene/__tests__/bezierEdit.test.ts +0 -85
package/src/scene/__tests__/blockLayers.test.ts +0 -57
package/src/scene/__tests__/sceneIsolation.test.tsx +0 -119
package/src/scene/__tests__/shapeLayers.test.ts +0 -106
package/src/scene/__tests__/useSceneHitTest.test.ts +0 -90
package/src/scene/__tests__/useScenePanZoom.test.ts +0 -103
package/src/scene/adapters/DiagramAdapter.ts +0 -79
package/src/scene/adapters/DrawingAdapter.ts +0 -420
package/src/scene/adapters/LayoutAdapter.ts +0 -313
package/src/scene/adapters/blockLayers.ts +0 -159
package/src/scene/commands/SceneCommand.ts +0 -84
package/src/scene/commands/drawingCommands.ts +0 -318
package/src/scene/commands/layoutCommands.ts +0 -301
package/src/scene/hooks/useSceneHitTest.ts +0 -105
package/src/scene/hooks/useScenePanZoom.ts +0 -147
package/src/scene/hooks/useSceneSelection.ts +0 -62
package/src/scene/index.ts +0 -90
package/src/scene/layers/DiagramEdges.tsx +0 -142
package/src/scene/layers/edgeGeometry.ts +0 -104
package/src/scene/layers/nodeCard.tsx +0 -164
package/src/scene/layers/renderLayer.tsx +0 -70
package/src/scene/layers/shapeLayers.ts +0 -201
package/src/scene/paths/bezierEdit.ts +0 -208
package/src/scene/scene.css +0 -792
package/src/scene/text/SceneTextOverlay.tsx +0 -161
package/src/scene/text/sceneTextChannel.ts +0 -46
package/src/scene/text/sceneTextConfig.ts +0 -31
package/src/scene/text/sceneTiptap.ts +0 -36
package/src/scene/text/useSceneTextEditing.ts +0 -39
package/src/scene/tools/ConnectTool.ts +0 -209
package/src/scene/tools/DrawingConnectTool.ts +0 -231
package/src/scene/tools/PathTool.ts +0 -158
package/src/scene/tools/PlaceTool.ts +0 -47
package/src/scene/tools/SceneTool.ts +0 -85
package/src/scene/tools/SelectTool.ts +0 -300
package/src/scene/tools/ShapeTool.ts +0 -143
package/src/scene/tools/TextTool.ts +0 -72
package/src/scene/tools/TokenTool.ts +0 -95
package/src/scene/tools/createDrawShapeTool.ts +0 -82
package/src/selectionConversions.ts +0 -155
package/src/styles/ascii-diagram.css +0 -79
package/src/styles/ascii-timeline.css +0 -596
package/src/styles/code-context.css +0 -155
package/src/styles/diagram.css +0 -183
package/src/styles/editor.css +0 -6811
package/src/styles/folder-view.css +0 -210
package/src/styles/image-edit-affordance.css +0 -201
package/src/styles/index.css +0 -18
package/src/styles/tree-view.css +0 -189
package/src/teleprompter/TeleprompterControls.tsx +0 -218
package/src/teleprompter/TeleprompterSelfView.tsx +0 -22
package/src/teleprompter/TeleprompterSurface.tsx +0 -267
package/src/teleprompter/TeleprompterView.tsx +0 -338
package/src/teleprompter/canvasRenderer.ts +0 -161
package/src/teleprompter/floatingWindow.ts +0 -352
package/src/teleprompter/index.ts +0 -61
package/src/teleprompter/pcmWorklet.ts +0 -62
package/src/teleprompter/recording/insertPreamble.ts +0 -80
package/src/teleprompter/recording/narrationSave.ts +0 -134
package/src/teleprompter/recording/useNarrationRecorder.ts +0 -367
package/src/teleprompter/scrollModel.ts +0 -85
package/src/teleprompter/teleprompterTheme.ts +0 -303
package/src/teleprompter/types.ts +0 -38
package/src/teleprompter/useFloatingWindow.ts +0 -74
package/src/teleprompter/useMicAnalysis.ts +0 -211
package/src/teleprompter/useTeleprompter.ts +0 -421
package/src/templateContentPreviewResolver.ts +0 -360
package/src/timeline/TimelineEditorWidget.tsx +0 -861
package/src/timeline/TimelineViewExtension.ts +0 -252
package/src/timeline/__tests__/TimelineEditorWidget.test.tsx +0 -414
package/src/timeline/__tests__/TimelineViewExtension.test.ts +0 -163
package/src/timeline/__tests__/timelineCommands.test.ts +0 -359
package/src/timeline/__tests__/timelineOps.test.ts +0 -277
package/src/timeline/__tests__/timelinePaste.test.ts +0 -34
package/src/timeline/timelineCommands.ts +0 -421
package/src/timeline/timelineData.ts +0 -54
package/src/timeline/timelineOps.ts +0 -381
package/src/timeline/timelinePaste.ts +0 -8
package/src/timelineSource.ts +0 -244
package/src/tiptap/TiptapAudio.tsx +0 -86
package/src/tiptap/TiptapVideo.tsx +0 -119
package/src/tiptap/useResolvedMediaSrc.ts +0 -47
package/src/tiptapBridge.ts +0 -986
package/src/tooltipPlacement.ts +0 -13
package/src/transformStyleId.ts +0 -17
package/src/transitionCatalog.ts +0 -159
package/src/treeview/TreeOutlineWidget.tsx +0 -390
package/src/treeview/TreeViewExtension.ts +0 -250
package/src/treeview/__tests__/TreeOutlineWidget.test.tsx +0 -156
package/src/treeview/__tests__/TreeViewExtension.test.ts +0 -122
package/src/treeview/__tests__/treeOps.test.ts +0 -177
package/src/treeview/__tests__/treePaste.test.ts +0 -40
package/src/treeview/__tests__/treeViewCommands.test.ts +0 -179
package/src/treeview/treeOps.ts +0 -231
package/src/treeview/treePaste.ts +0 -13
package/src/treeview/treeViewCommands.ts +0 -99
package/src/treeview/treeViewData.ts +0 -41
package/src/types/monaco-shims.d.ts +0 -10
package/src/useBlockNavigator.ts +0 -153
package/src/useHeadingLayout.ts +0 -294
package/src/useMonacoLoader.ts +0 -82
package/src/useTimelineClock.ts +0 -76
package/src/utils/collectInlineFontAwesomeCss.ts +0 -69
package/src/utils/dropUtils.ts +0 -136
package/src/utils/normalizeMalformedAssetUrl.ts +0 -22
package/src/wysiwygImageUpload.ts +0 -113

package/src/customTemplates/designer.css DELETED Viewed

@@ -1,732 +0,0 @@
-/*
- * TemplateDesigner — full-viewport modal overlay with a Scene-backed
- * canvas in the middle, a token palette on the left, name/label inputs
- * at the top, and save/cancel actions at the bottom.
- */
-/* Both entry points are portaled to <body>, so they establish their own
-   editor-shell theme scope. These tokens keep the light palette unchanged
-   while giving every piece of designer chrome a dark-mode counterpart. */
-.squisq-template-designer-overlay,
-.squisq-layout-manager-overlay {
-  color-scheme: light;
-  --squisq-layout-panel: #ffffff;
-  --squisq-layout-chrome: #f9fafb;
-  --squisq-layout-subtle: #fafafa;
-  --squisq-layout-workspace: #f3f4f6;
-  --squisq-layout-input: #ffffff;
-  --squisq-layout-border: #e5e7eb;
-  --squisq-layout-border-strong: #d1d5db;
-  --squisq-layout-text: #111827;
-  --squisq-layout-text-soft: #1f2937;
-  --squisq-layout-muted: #6b7280;
-  --squisq-layout-faint: #9ca3af;
-  --squisq-layout-hover: #f1f5f9;
-  --squisq-layout-accent-text: #4338ca;
-  --squisq-layout-accent-bg: #4f46e5;
-  --squisq-layout-accent-bg-hover: #4338ca;
-  --squisq-layout-accent-border: #6366f1;
-  --squisq-layout-accent-soft: #eef2ff;
-  --squisq-layout-accent-soft-hover: #e0e7ff;
-  --squisq-layout-accent-soft-border: #c7d2fe;
-  --squisq-layout-accent-hover-border: #a5b4fc;
-  --squisq-layout-thumb: #f8fafc;
-}
-.squisq-template-designer-overlay[data-theme='dark'],
-.squisq-layout-manager-overlay[data-theme='dark'] {
-  color-scheme: dark;
-  --squisq-layout-panel: #111827;
-  --squisq-layout-chrome: #1f2937;
-  --squisq-layout-subtle: #18212f;
-  --squisq-layout-workspace: #0f172a;
-  --squisq-layout-input: #111827;
-  --squisq-layout-border: #374151;
-  --squisq-layout-border-strong: #4b5563;
-  --squisq-layout-text: #f3f4f6;
-  --squisq-layout-text-soft: #e5e7eb;
-  --squisq-layout-muted: #9ca3af;
-  --squisq-layout-faint: #6b7280;
-  --squisq-layout-hover: #334155;
-  --squisq-layout-accent-text: #c7d2fe;
-  --squisq-layout-accent-bg: #4f46e5;
-  --squisq-layout-accent-bg-hover: #6366f1;
-  --squisq-layout-accent-border: #818cf8;
-  --squisq-layout-accent-soft: #312e81;
-  --squisq-layout-accent-soft-hover: #3730a3;
-  --squisq-layout-accent-soft-border: #4f46e5;
-  --squisq-layout-accent-hover-border: #6366f1;
-  --squisq-layout-thumb: #0f172a;
-}
-.squisq-template-designer-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(15, 23, 42, 0.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-}
-.squisq-template-designer-panel {
-  display: flex;
-  flex-direction: column;
-  width: min(1200px, 100%);
-  height: min(800px, 100%);
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-panel);
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  /* The designer is a direct-manipulation surface: dragging a layer on
-     the canvas must not start a text selection that bleeds into the
-     toolbar/labels (which the browser then paints as a translucent drag
-     "ghost" of the selected text). Suppress selection on the chrome;
-     re-enable it on the editable fields below. */
-  user-select: none;
-  -webkit-user-select: none;
-}
-.squisq-template-designer-panel input,
-.squisq-template-designer-panel textarea {
-  user-select: text;
-  -webkit-user-select: text;
-}
-/* Embedded variant — the designer rendered inside a host frame (the
-   Custom Layout Manager's right pane) rather than as its own modal.
-   Fills the container and drops the standalone modal's chrome. */
-.squisq-template-designer-panel--embedded {
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-  box-shadow: none;
-}
-.squisq-template-designer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-chrome);
-}
-.squisq-template-designer-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--squisq-layout-text);
-}
-.squisq-template-designer-close {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  line-height: 1;
-  color: var(--squisq-layout-muted);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.squisq-template-designer-close:hover {
-  color: var(--squisq-layout-text);
-  background: var(--squisq-layout-hover);
-  border-color: var(--squisq-layout-border-strong);
-}
-.squisq-template-designer-meta {
-  display: grid;
-  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(240px, 2fr);
-  gap: 12px;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-panel);
-}
-.squisq-template-designer-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.squisq-template-designer-field span {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--squisq-layout-muted);
-}
-.squisq-template-designer-field input {
-  padding: 6px 10px;
-  font-size: 13px;
-  color: var(--squisq-layout-text);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border-strong);
-  border-radius: 6px;
-  outline: none;
-}
-.squisq-template-designer-field input:focus {
-  border-color: var(--squisq-layout-accent-border);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
-}
-.squisq-template-designer-field span.squisq-template-designer-field-hint {
-  font-size: 11px;
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: normal;
-  color: var(--squisq-layout-faint);
-}
-.squisq-template-designer-body {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-}
-.squisq-template-designer-palette {
-  width: 220px;
-  flex-shrink: 0;
-  padding: 16px;
-  border-right: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-subtle);
-  overflow-y: auto;
-}
-.squisq-template-designer-palette-title {
-  margin: 0 0 4px;
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--squisq-layout-accent-text);
-}
-.squisq-template-designer-palette-hint {
-  margin: 0 0 12px;
-  font-size: 11px;
-  color: var(--squisq-layout-muted);
-  line-height: 1.4;
-}
-.squisq-template-designer-palette-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-/* ─── Add bin: sections ──────────────────────────────────── */
-.squisq-template-designer-palette-section {
-  margin-top: 14px;
-}
-.squisq-template-designer-palette-section:first-of-type {
-  margin-top: 0;
-}
-.squisq-template-designer-palette-section-title {
-  margin-bottom: 6px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--squisq-layout-muted);
-}
-/* Shapes are compact icon tiles in a grid. */
-.squisq-template-designer-palette-shapes {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
-}
-.squisq-template-designer-shape-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1 / 1;
-  padding: 4px;
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 6px;
-  cursor: grab;
-  color: var(--squisq-layout-muted);
-  transition:
-    background 0.1s,
-    border-color 0.1s;
-}
-.squisq-template-designer-shape-item:active {
-  cursor: grabbing;
-}
-.squisq-template-designer-shape-item:hover {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-soft-border);
-}
-.squisq-template-designer-shape-item--active {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-border);
-}
-.squisq-template-designer-palette-media-add {
-  width: 100%;
-  margin-top: 4px;
-  padding: 8px 10px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--squisq-layout-accent-text);
-  background: var(--squisq-layout-accent-soft);
-  border: 1px dashed var(--squisq-layout-accent-soft-border);
-  border-radius: 6px;
-  cursor: pointer;
-}
-.squisq-template-designer-palette-media-add:hover:not(:disabled) {
-  background: var(--squisq-layout-accent-soft-hover);
-  border-color: var(--squisq-layout-accent-hover-border);
-}
-.squisq-template-designer-palette-media-add:disabled {
-  color: var(--squisq-layout-faint);
-  background: var(--squisq-layout-workspace);
-  border-color: var(--squisq-layout-border);
-  cursor: not-allowed;
-}
-.squisq-template-designer-palette-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  padding: 8px 10px;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 6px;
-  /* Draggable onto the canvas — `grab` hints the drag affordance. */
-  cursor: grab;
-  text-align: left;
-  transition:
-    background 0.1s,
-    border-color 0.1s;
-}
-.squisq-template-designer-palette-item:active {
-  cursor: grabbing;
-}
-.squisq-template-designer-palette-item:hover {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-soft-border);
-}
-.squisq-template-designer-palette-item--active {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-border);
-}
-.squisq-template-designer-palette-item-preview {
-  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
-  font-size: 12px;
-  color: var(--squisq-layout-accent-text);
-}
-.squisq-template-designer-palette-item-label {
-  font-size: 11px;
-  color: var(--squisq-layout-muted);
-}
-.squisq-template-designer-stage {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  padding: 12px;
-  gap: 8px;
-  background: var(--squisq-layout-workspace);
-}
-/* Unified controls bar above the canvas: the compact aspect-ratio
-   dropdown sits inline with the contextual layer styling controls, so
-   the two share one row instead of stacking and eating vertical space. */
-.squisq-template-designer-stage-bar {
-  display: flex;
-  /* Single row for vertical efficiency. If the controls outgrow the
-     width (narrow panels, the text layer's full control set), the bar
-     scrolls horizontally rather than wrapping to a second line. */
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 5px;
-  padding: 6px 8px;
-  background: var(--squisq-layout-panel);
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 6px;
-  align-self: stretch;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-.squisq-template-designer-viewport-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--squisq-layout-muted);
-}
-/* ─── Contextual layer styling controls ─────────────────── */
-/* Transparent group — the surrounding stage-bar provides the box, so the
-   layer controls flow inline with the aspect-ratio dropdown on one row.
-   `flex-shrink: 0` keeps each control its natural size; the stage-bar
-   scrolls instead of squashing them. */
-.squisq-layer-toolbar {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 5px;
-}
-.squisq-template-designer-stage-bar > *,
-.squisq-layer-toolbar > * {
-  flex-shrink: 0;
-}
-/* The font-family select is the widest control; cap it so it doesn't
-   crowd the rest off the row. */
-.squisq-layer-toolbar-select--font {
-  max-width: 104px;
-}
-.squisq-layer-toolbar-seg {
-  display: inline-flex;
-  gap: 2px;
-}
-.squisq-layer-toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  font-size: 13px;
-  color: var(--squisq-layout-text-soft);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.squisq-layer-toolbar-btn:hover {
-  background: var(--squisq-layout-hover);
-}
-.squisq-layer-toolbar-btn--active {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-border);
-  color: var(--squisq-layout-accent-text);
-}
-.squisq-layer-toolbar-select {
-  height: 28px;
-  padding: 0 6px;
-  font-size: 12px;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border-strong);
-  border-radius: 4px;
-  cursor: pointer;
-}
-.squisq-layer-toolbar-number {
-  width: 48px;
-  height: 28px;
-  padding: 0 4px 0 6px;
-  font-size: 12px;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border-strong);
-  border-radius: 4px;
-}
-.squisq-layer-toolbar-opacity {
-  display: inline-flex;
-  align-items: center;
-}
-.squisq-layer-toolbar-opacity input[type='range'] {
-  width: 64px;
-  cursor: pointer;
-}
-.squisq-layer-toolbar-label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--squisq-layout-muted);
-  font-size: 13px;
-}
-.squisq-layer-toolbar-color {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-.squisq-layer-toolbar-color input[type='color'] {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--squisq-layout-border-strong);
-  border-radius: 4px;
-  background: var(--squisq-layout-input);
-  cursor: pointer;
-}
-.squisq-layer-toolbar-sep {
-  width: 1px;
-  align-self: stretch;
-  margin: 2px 2px;
-  background: var(--squisq-layout-border);
-}
-.squisq-template-designer-scene {
-  flex: 1;
-  min-height: 0;
-  background: var(--squisq-layout-panel);
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.squisq-template-designer-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-top: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-chrome);
-  gap: 12px;
-}
-.squisq-template-designer-footer-hint {
-  font-size: 11px;
-  color: var(--squisq-layout-muted);
-  flex: 1;
-  min-width: 0;
-}
-.squisq-template-designer-footer-actions {
-  display: flex;
-  gap: 8px;
-}
-.squisq-template-designer-btn {
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border-strong);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-.squisq-template-designer-btn:hover {
-  background: var(--squisq-layout-hover);
-}
-.squisq-template-designer-btn--primary {
-  color: #ffffff;
-  background: var(--squisq-layout-accent-bg);
-  border-color: var(--squisq-layout-accent-bg-hover);
-}
-.squisq-template-designer-btn--primary:hover {
-  background: var(--squisq-layout-accent-bg-hover);
-}
-/* ─── Custom Layout Manager ────────────────────────────────
-   Near-full-window modal: a sidebar list of layouts on the left and an
-   embedded TemplateDesigner on the right. */
-.squisq-layout-manager-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(15, 23, 42, 0.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-}
-.squisq-layout-manager-panel {
-  display: flex;
-  flex-direction: column;
-  width: min(1600px, 96vw);
-  height: 92vh;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-panel);
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
-.squisq-layout-manager-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-chrome);
-}
-.squisq-layout-manager-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--squisq-layout-text);
-}
-.squisq-layout-manager-body {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-}
-.squisq-layout-manager-sidebar {
-  width: 280px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border-right: 1px solid var(--squisq-layout-border);
-  background: var(--squisq-layout-subtle);
-  overflow-y: auto;
-}
-.squisq-layout-manager-new {
-  padding: 10px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--squisq-layout-accent-text);
-  background: var(--squisq-layout-accent-soft);
-  border: 1px dashed var(--squisq-layout-accent-soft-border);
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: center;
-}
-.squisq-layout-manager-new:hover {
-  background: var(--squisq-layout-accent-soft-hover);
-  border-color: var(--squisq-layout-accent-hover-border);
-}
-.squisq-layout-manager-new--active {
-  border-style: solid;
-  border-color: var(--squisq-layout-accent-border);
-}
-.squisq-layout-manager-section-title {
-  margin-top: 6px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--squisq-layout-muted);
-}
-.squisq-layout-manager-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.squisq-layout-manager-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px;
-  color: var(--squisq-layout-text-soft);
-  background: var(--squisq-layout-input);
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    background 0.1s,
-    border-color 0.1s;
-}
-.squisq-layout-manager-item:hover {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-soft-border);
-}
-.squisq-layout-manager-item--active {
-  background: var(--squisq-layout-accent-soft);
-  border-color: var(--squisq-layout-accent-border);
-}
-.squisq-layout-manager-item-thumb {
-  flex-shrink: 0;
-  display: inline-flex;
-  width: 56px;
-  height: 40px;
-  border: 1px solid var(--squisq-layout-border);
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--squisq-layout-thumb);
-}
-.squisq-layout-manager-item-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-.squisq-layout-manager-item-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--squisq-layout-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.squisq-layout-manager-item-name {
-  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
-  font-size: 11px;
-  color: var(--squisq-layout-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.squisq-layout-manager-empty-hint {
-  margin: 8px 2px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--squisq-layout-muted);
-}
-.squisq-layout-manager-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-}