@filekit-studio/sketch 0.0.0-stage → 1.0.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.
- package/LICENSE +21 -0
- package/README.md +193 -2
- package/dist/export.d.mts +1 -0
- package/dist/export.d.ts +1 -0
- package/dist/export.js +91 -0
- package/dist/export.mjs +91 -0
- package/dist/index-DNRZSQHn.d.mts +192 -0
- package/dist/index-DNRZSQHn.d.ts +192 -0
- package/dist/index.d.mts +577 -0
- package/dist/index.d.ts +577 -0
- package/dist/index.js +133 -0
- package/dist/index.mjs +133 -0
- package/dist/styles.css +429 -0
- package/package.json +70 -4
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,577 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { S as SketchBoardElement, G as GridStyle, C as Camera, P as Point, T as ToolType, L as LaserMode, a as LaserStroke } from './index-DNRZSQHn.mjs';
|
|
4
|
+
export { A as AnchorPosition, b as ArrowType, c as Arrowhead, d as CanvasDimensions, E as EdgeStyle, e as ElementType, f as ExportPdfOptions, g as ExportPdfResult, F as FillStyle, h as FontFamily, i as LaserPoint, M as MarqueeBox, j as PointBinding, R as ResizeHandle, k as StrokeStyle, l as TableCell, m as TablePresetStyle, n as TextAlign, o as copyImageToClipboard, p as downloadFile, q as exportFrameToPng, r as exportToPng, s as exportToSvg, t as exportWhiteboardToPdf, u as getElementsBoundingBox } from './index-DNRZSQHn.mjs';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Document schema, initialization, serialization, and validation.
|
|
8
|
+
* Represents a local-first, standalone Sketch whiteboard document.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
declare const SKETCH_DOCUMENT_VERSION = 1;
|
|
12
|
+
interface SketchDocument {
|
|
13
|
+
version: number;
|
|
14
|
+
id?: string;
|
|
15
|
+
name: string;
|
|
16
|
+
elements: SketchBoardElement[];
|
|
17
|
+
canvasBackground: string;
|
|
18
|
+
gridStyle: GridStyle;
|
|
19
|
+
createdAt: number;
|
|
20
|
+
updatedAt: number;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Creates a brand new default SketchDocument.
|
|
24
|
+
*/
|
|
25
|
+
declare function createEmptyDocument(initial?: Partial<SketchDocument>): SketchDocument;
|
|
26
|
+
/**
|
|
27
|
+
* Serializes a SketchDocument to a formatted JSON string.
|
|
28
|
+
*/
|
|
29
|
+
declare function serializeDocument(doc: SketchDocument): string;
|
|
30
|
+
/**
|
|
31
|
+
* Safely parses and validates a JSON string into a SketchDocument.
|
|
32
|
+
* Throws a descriptive error if the document structure is invalid.
|
|
33
|
+
*/
|
|
34
|
+
declare function parseDocument(json: string): SketchDocument;
|
|
35
|
+
/**
|
|
36
|
+
* Validates whether an unknown object adheres to the SketchDocument schema.
|
|
37
|
+
*/
|
|
38
|
+
declare function isValidSketchDocument(doc: unknown): doc is SketchDocument;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Imperative programmatic controller for Sketch.
|
|
42
|
+
* Can be accessed via editorRef on <SketchEditor /> or instantiated headlessly.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
type SketchEventType = 'change' | 'select' | 'undo' | 'redo' | 'camera' | 'clear';
|
|
46
|
+
type SketchEventHandler<T = unknown> = (payload: T) => void;
|
|
47
|
+
interface SketchController {
|
|
48
|
+
loadDocument: (doc: SketchDocument) => void;
|
|
49
|
+
getDocument: () => SketchDocument;
|
|
50
|
+
clear: () => void;
|
|
51
|
+
addElement: (element: Partial<SketchBoardElement>) => SketchBoardElement;
|
|
52
|
+
updateElement: (id: string, patch: Partial<SketchBoardElement>) => void;
|
|
53
|
+
deleteElements: (ids: string[]) => void;
|
|
54
|
+
getElements: () => SketchBoardElement[];
|
|
55
|
+
getSelectedElements: () => SketchBoardElement[];
|
|
56
|
+
setSelection: (ids: string[]) => void;
|
|
57
|
+
clearSelection: () => void;
|
|
58
|
+
undo: () => void;
|
|
59
|
+
redo: () => void;
|
|
60
|
+
canUndo: () => boolean;
|
|
61
|
+
canRedo: () => boolean;
|
|
62
|
+
getCamera: () => Camera;
|
|
63
|
+
setZoom: (scale: number) => void;
|
|
64
|
+
panTo: (x: number, y: number) => void;
|
|
65
|
+
zoomToFit: () => void;
|
|
66
|
+
resetZoom: () => void;
|
|
67
|
+
on: <T = unknown>(event: SketchEventType, handler: SketchEventHandler<T>) => () => void;
|
|
68
|
+
destroy: () => void;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Creates an event bus for controller communication.
|
|
72
|
+
*/
|
|
73
|
+
declare class SketchEventEmitter {
|
|
74
|
+
private listeners;
|
|
75
|
+
on<T = unknown>(event: SketchEventType, handler: SketchEventHandler<T>): () => void;
|
|
76
|
+
emit<T = unknown>(event: SketchEventType, payload: T): void;
|
|
77
|
+
clear(): void;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
type ThemeMode = 'light' | 'dark' | 'system';
|
|
81
|
+
type PanelVariant = 'classic' | 'neumorphic';
|
|
82
|
+
interface SketchThemeContextValue {
|
|
83
|
+
theme: ThemeMode;
|
|
84
|
+
resolvedTheme: 'light' | 'dark';
|
|
85
|
+
isDark: boolean;
|
|
86
|
+
panelVariant: PanelVariant;
|
|
87
|
+
}
|
|
88
|
+
declare function useSketchThemeContext(): SketchThemeContextValue;
|
|
89
|
+
/**
|
|
90
|
+
* Robust theme hook for @filekit-studio/sketch.
|
|
91
|
+
* Supports explicit controlled prop ('dark' | 'light') or automatic inheritance
|
|
92
|
+
* from the host application's DOM classes via MutationObserver.
|
|
93
|
+
*/
|
|
94
|
+
declare function useSketchTheme(themeProp?: ThemeMode): {
|
|
95
|
+
theme: ThemeMode;
|
|
96
|
+
resolvedTheme: "light" | "dark";
|
|
97
|
+
isDark: boolean;
|
|
98
|
+
panelVariant: PanelVariant;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
/** Default starter elements provided when no document is supplied */
|
|
102
|
+
declare const DEFAULT_STARTER_ELEMENTS: SketchBoardElement[];
|
|
103
|
+
interface SketchUIConfig {
|
|
104
|
+
/** Display the top toolbar header */
|
|
105
|
+
showTopBar?: boolean;
|
|
106
|
+
/** Display the left creation tool palette */
|
|
107
|
+
showToolBar?: boolean;
|
|
108
|
+
/** Display the right element styling and properties panel */
|
|
109
|
+
showPropertiesPanel?: boolean;
|
|
110
|
+
/** Display the bottom-right workspace overview minimap */
|
|
111
|
+
showMinimap?: boolean;
|
|
112
|
+
/** Display the bottom-left keyboard shortcuts button */
|
|
113
|
+
showShortcutsButton?: boolean;
|
|
114
|
+
/** Display presentation slideshow trigger and mode */
|
|
115
|
+
showPresentation?: boolean;
|
|
116
|
+
/** Enable tech and cloud architecture stencils */
|
|
117
|
+
showTechStencils?: boolean;
|
|
118
|
+
/** Enable diagram templates flyout */
|
|
119
|
+
showTemplates?: boolean;
|
|
120
|
+
}
|
|
121
|
+
interface SketchEditorProps {
|
|
122
|
+
/**
|
|
123
|
+
* Controlled document or elements array.
|
|
124
|
+
* If provided, updates whenever value changes.
|
|
125
|
+
*/
|
|
126
|
+
value?: SketchDocument | SketchBoardElement[];
|
|
127
|
+
/**
|
|
128
|
+
* Initial uncontrolled document or elements array.
|
|
129
|
+
*/
|
|
130
|
+
defaultValue?: SketchDocument | SketchBoardElement[];
|
|
131
|
+
/**
|
|
132
|
+
* Callback fired whenever the document elements or title change.
|
|
133
|
+
*/
|
|
134
|
+
onChange?: (document: SketchDocument) => void;
|
|
135
|
+
/**
|
|
136
|
+
* Callback fired when manual save is triggered (Ctrl+S or Save button).
|
|
137
|
+
*/
|
|
138
|
+
onSave?: (document: SketchDocument) => void;
|
|
139
|
+
/**
|
|
140
|
+
* Local storage key used for auto-saving.
|
|
141
|
+
* Pass null or empty string to disable localStorage persistence.
|
|
142
|
+
* Default: 'filekit_sketch_document_v1'
|
|
143
|
+
*/
|
|
144
|
+
storageKey?: string | null;
|
|
145
|
+
/**
|
|
146
|
+
* Initial whiteboard board title. Default: 'My Whiteboard'.
|
|
147
|
+
*/
|
|
148
|
+
boardName?: string;
|
|
149
|
+
/**
|
|
150
|
+
* Callback fired when user renames the whiteboard.
|
|
151
|
+
*/
|
|
152
|
+
onBoardNameChange?: (name: string) => void;
|
|
153
|
+
/**
|
|
154
|
+
* Read-only mode prevents canvas mutations and hides drawing tools.
|
|
155
|
+
*/
|
|
156
|
+
readOnly?: boolean;
|
|
157
|
+
/**
|
|
158
|
+
* Panel aesthetic styling variant.
|
|
159
|
+
* - 'classic': Clean modern borders and subtle drop shadows (default).
|
|
160
|
+
* - 'neumorphic': Rich soft 3D neumorphic bevels and dual drop shadows.
|
|
161
|
+
*/
|
|
162
|
+
panelVariant?: PanelVariant;
|
|
163
|
+
/**
|
|
164
|
+
* Theme mode: 'light', 'dark', or 'system'. Default: 'system'.
|
|
165
|
+
* When 'system' or omitted, automatically inherits dark/light mode from the host application.
|
|
166
|
+
*/
|
|
167
|
+
theme?: ThemeMode;
|
|
168
|
+
/**
|
|
169
|
+
* Canvas background color hex. Default: '#f0f4f8'.
|
|
170
|
+
*/
|
|
171
|
+
canvasBackground?: string;
|
|
172
|
+
/**
|
|
173
|
+
* Canvas grid pattern style: 'grid' | 'dots' | 'cross' | 'none'. Default: 'grid'.
|
|
174
|
+
*/
|
|
175
|
+
gridStyle?: GridStyle;
|
|
176
|
+
/**
|
|
177
|
+
* Optional callback when user clicks the Exit button.
|
|
178
|
+
*/
|
|
179
|
+
onExit?: () => void;
|
|
180
|
+
/**
|
|
181
|
+
* Link target for the Guide button in shortcuts modal.
|
|
182
|
+
*/
|
|
183
|
+
guideHref?: string;
|
|
184
|
+
/**
|
|
185
|
+
* Callback when clicking the Guide button in shortcuts modal.
|
|
186
|
+
*/
|
|
187
|
+
onOpenGuide?: () => void;
|
|
188
|
+
/**
|
|
189
|
+
* UI components visibility configuration.
|
|
190
|
+
*/
|
|
191
|
+
uiConfig?: SketchUIConfig;
|
|
192
|
+
/**
|
|
193
|
+
* Ref or callback to receive the imperative SketchController instance.
|
|
194
|
+
*/
|
|
195
|
+
controllerRef?: React__default.Ref<SketchController>;
|
|
196
|
+
/**
|
|
197
|
+
* Custom CSS class name for the outer container.
|
|
198
|
+
*/
|
|
199
|
+
className?: string;
|
|
200
|
+
/**
|
|
201
|
+
* Custom inline styles for the outer container.
|
|
202
|
+
*/
|
|
203
|
+
style?: React__default.CSSProperties;
|
|
204
|
+
}
|
|
205
|
+
/**
|
|
206
|
+
* <SketchEditor />
|
|
207
|
+
*
|
|
208
|
+
* Standalone, local-first interactive whiteboard and diagramming component for React & Next.js.
|
|
209
|
+
* Built with HTML5 Canvas, responsive controls, neumorphic styling, and zero external backend requirements.
|
|
210
|
+
*/
|
|
211
|
+
declare const SketchEditor: React__default.ForwardRefExoticComponent<SketchEditorProps & React__default.RefAttributes<SketchController>>;
|
|
212
|
+
|
|
213
|
+
interface SketchBoardCanvasProps {
|
|
214
|
+
elements: SketchBoardElement[];
|
|
215
|
+
setElements: React__default.Dispatch<React__default.SetStateAction<SketchBoardElement[]>>;
|
|
216
|
+
selectedIds: string[];
|
|
217
|
+
selectElement: (id: string, multi?: boolean) => void;
|
|
218
|
+
selectElements: (ids: string[]) => void;
|
|
219
|
+
clearSelection: () => void;
|
|
220
|
+
addElement: (el: SketchBoardElement) => void;
|
|
221
|
+
updateElement: (id: string, updates: Partial<SketchBoardElement>) => void;
|
|
222
|
+
deleteSelectedElements: () => void;
|
|
223
|
+
duplicateSelectedElements: () => void;
|
|
224
|
+
groupSelectedElements?: () => void;
|
|
225
|
+
ungroupSelectedElements?: () => void;
|
|
226
|
+
pushHistory: (elements: SketchBoardElement[]) => void;
|
|
227
|
+
undo: () => void;
|
|
228
|
+
redo: () => void;
|
|
229
|
+
camera: Camera;
|
|
230
|
+
setCamera: React__default.Dispatch<React__default.SetStateAction<Camera>>;
|
|
231
|
+
screenToWorld: (pt: Point) => Point;
|
|
232
|
+
worldToScreen: (pt: Point) => Point;
|
|
233
|
+
panBy: (dx: number, dy: number) => void;
|
|
234
|
+
zoomAtPoint: (factor: number, pivot: Point) => void;
|
|
235
|
+
tool: ToolType;
|
|
236
|
+
setTool: (tool: ToolType) => void;
|
|
237
|
+
gridStyle: GridStyle;
|
|
238
|
+
defaultStyles: Omit<SketchBoardElement, 'id' | 'x' | 'y' | 'width' | 'height'>;
|
|
239
|
+
editingElementId?: string | null;
|
|
240
|
+
setEditingElementId?: (id: string | null) => void;
|
|
241
|
+
isToolLocked?: boolean;
|
|
242
|
+
setIsToolLocked?: (locked: boolean | ((prev: boolean) => boolean)) => void;
|
|
243
|
+
canvasBackground?: string;
|
|
244
|
+
isPresentationOpen?: boolean;
|
|
245
|
+
laserColor?: string;
|
|
246
|
+
laserMode?: LaserMode;
|
|
247
|
+
laserStrokes?: LaserStroke[];
|
|
248
|
+
setLaserStrokes?: React__default.Dispatch<React__default.SetStateAction<LaserStroke[]>>;
|
|
249
|
+
laserPointerPos?: Point | null;
|
|
250
|
+
setLaserPointerPos?: (pt: Point | null) => void;
|
|
251
|
+
}
|
|
252
|
+
declare function SketchBoardCanvas({ elements, setElements, selectedIds, selectElement, selectElements, clearSelection, addElement, updateElement, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, pushHistory, undo, redo, camera, screenToWorld, worldToScreen, panBy, zoomAtPoint, tool, setTool, isToolLocked, setIsToolLocked, gridStyle, defaultStyles, editingElementId: externalEditingId, setEditingElementId: setExternalEditingId, canvasBackground, isPresentationOpen, laserColor, laserMode, laserStrokes, setLaserStrokes, laserPointerPos, setLaserPointerPos, }: SketchBoardCanvasProps): React__default.JSX.Element;
|
|
253
|
+
|
|
254
|
+
interface SketchBoardToolBarProps {
|
|
255
|
+
tool: ToolType;
|
|
256
|
+
setTool: (tool: ToolType) => void;
|
|
257
|
+
isToolLocked?: boolean;
|
|
258
|
+
setIsToolLocked?: (locked: boolean | ((prev: boolean) => boolean)) => void;
|
|
259
|
+
onInsertImage?: (dataUrl: string) => void;
|
|
260
|
+
onOpenTemplates?: () => void;
|
|
261
|
+
isTemplatesOpen?: boolean;
|
|
262
|
+
onOpenTechStencils?: () => void;
|
|
263
|
+
isTechStencilsOpen?: boolean;
|
|
264
|
+
onInsertTablePreset?: (preset: 'blank' | 'matrix' | 'swot' | 'kanban', rows?: number, cols?: number) => void;
|
|
265
|
+
}
|
|
266
|
+
declare function SketchBoardToolBar({ tool, setTool, isToolLocked, setIsToolLocked, onInsertImage, onOpenTemplates, isTemplatesOpen, onOpenTechStencils, isTechStencilsOpen, onInsertTablePreset, }: SketchBoardToolBarProps): React__default.JSX.Element;
|
|
267
|
+
|
|
268
|
+
interface SketchBoardPropertiesPanelProps {
|
|
269
|
+
selectedElements: SketchBoardElement[];
|
|
270
|
+
updateSelectedElements: (updates: Partial<SketchBoardElement>) => void;
|
|
271
|
+
deleteSelectedElements: () => void;
|
|
272
|
+
duplicateSelectedElements: () => void;
|
|
273
|
+
groupSelectedElements?: () => void;
|
|
274
|
+
ungroupSelectedElements?: () => void;
|
|
275
|
+
alignSelectedElements?: (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void;
|
|
276
|
+
distributeSelectedElements?: (type: 'horizontal' | 'vertical') => void;
|
|
277
|
+
bringToFront: () => void;
|
|
278
|
+
sendToBack: () => void;
|
|
279
|
+
bringForward?: () => void;
|
|
280
|
+
sendBackward?: () => void;
|
|
281
|
+
defaultStyles: Omit<SketchBoardElement, 'id' | 'x' | 'y' | 'width' | 'height'>;
|
|
282
|
+
setDefaultStyles: React__default.Dispatch<React__default.SetStateAction<Omit<SketchBoardElement, 'id' | 'x' | 'y' | 'width' | 'height'>>>;
|
|
283
|
+
canvasBackground?: string;
|
|
284
|
+
setCanvasBackground?: (color: string) => void;
|
|
285
|
+
}
|
|
286
|
+
declare function SketchBoardPropertiesPanel({ selectedElements, updateSelectedElements, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, alignSelectedElements, distributeSelectedElements, bringToFront, sendToBack, bringForward, sendBackward, defaultStyles, setDefaultStyles, canvasBackground, setCanvasBackground, }: SketchBoardPropertiesPanelProps): React__default.JSX.Element;
|
|
287
|
+
|
|
288
|
+
interface SketchBoardTopBarProps {
|
|
289
|
+
boardName: string;
|
|
290
|
+
setBoardName: (name: string) => void;
|
|
291
|
+
onOpenExport: () => void;
|
|
292
|
+
onOpenTemplates?: () => void;
|
|
293
|
+
onCopyImage?: () => void;
|
|
294
|
+
onClearBoard: () => void;
|
|
295
|
+
elementCount: number;
|
|
296
|
+
zoom: number;
|
|
297
|
+
zoomIn: () => void;
|
|
298
|
+
zoomOut: () => void;
|
|
299
|
+
resetCamera: () => void;
|
|
300
|
+
canUndo: boolean;
|
|
301
|
+
canRedo: boolean;
|
|
302
|
+
undo: () => void;
|
|
303
|
+
redo: () => void;
|
|
304
|
+
tool: ToolType;
|
|
305
|
+
setTool: (tool: ToolType) => void;
|
|
306
|
+
gridStyle: GridStyle;
|
|
307
|
+
setGridStyle: (style: GridStyle) => void;
|
|
308
|
+
onExit?: () => void;
|
|
309
|
+
saveStatus?: 'saved' | 'saving' | 'unsaved';
|
|
310
|
+
onManualSave?: () => void;
|
|
311
|
+
onStartPresentation?: () => void;
|
|
312
|
+
hasFrames?: boolean;
|
|
313
|
+
frameCount?: number;
|
|
314
|
+
isFramesOutlineOpen?: boolean;
|
|
315
|
+
onToggleFramesOutline?: () => void;
|
|
316
|
+
onOpenTechStencils?: () => void;
|
|
317
|
+
isTechStencilsOpen?: boolean;
|
|
318
|
+
isSpotlightActive?: boolean;
|
|
319
|
+
onToggleSpotlight?: () => void;
|
|
320
|
+
}
|
|
321
|
+
declare function SketchBoardTopBar({ boardName, setBoardName, onOpenExport, onOpenTemplates, onCopyImage, onClearBoard, elementCount, zoom, zoomIn, zoomOut, resetCamera, canUndo, canRedo, undo, redo, tool, setTool, gridStyle, setGridStyle, onExit, saveStatus, onManualSave, onStartPresentation, hasFrames, frameCount, isFramesOutlineOpen, onToggleFramesOutline, onOpenTechStencils, isTechStencilsOpen, isSpotlightActive, onToggleSpotlight, }: SketchBoardTopBarProps): React__default.JSX.Element;
|
|
322
|
+
|
|
323
|
+
interface SketchBoardMinimapProps {
|
|
324
|
+
elements: SketchBoardElement[];
|
|
325
|
+
camera: Camera;
|
|
326
|
+
setCamera: React__default.Dispatch<React__default.SetStateAction<Camera>>;
|
|
327
|
+
}
|
|
328
|
+
declare function SketchBoardMinimap({ elements, camera, setCamera }: SketchBoardMinimapProps): React__default.JSX.Element;
|
|
329
|
+
|
|
330
|
+
interface SketchBoardFloatingDockProps {
|
|
331
|
+
selectedElements: SketchBoardElement[];
|
|
332
|
+
updateSelectedElements: (updates: Partial<SketchBoardElement>) => void;
|
|
333
|
+
deleteSelectedElements: () => void;
|
|
334
|
+
duplicateSelectedElements: () => void;
|
|
335
|
+
groupSelectedElements?: () => void;
|
|
336
|
+
ungroupSelectedElements?: () => void;
|
|
337
|
+
alignSelectedElements?: (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => void;
|
|
338
|
+
distributeSelectedElements?: (type: 'horizontal' | 'vertical') => void;
|
|
339
|
+
copySelectedImage?: () => void;
|
|
340
|
+
bringToFront: () => void;
|
|
341
|
+
sendToBack: () => void;
|
|
342
|
+
camera: Camera;
|
|
343
|
+
worldToScreen: (pt: Point) => Point;
|
|
344
|
+
onEditText?: (element: SketchBoardElement) => void;
|
|
345
|
+
onToggleSpotlight?: () => void;
|
|
346
|
+
}
|
|
347
|
+
declare function SketchBoardFloatingDock({ selectedElements, updateSelectedElements, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, alignSelectedElements, distributeSelectedElements, copySelectedImage, bringToFront, sendToBack, camera, worldToScreen, onEditText, onToggleSpotlight, }: SketchBoardFloatingDockProps): React__default.JSX.Element | null;
|
|
348
|
+
|
|
349
|
+
interface SketchBoardContextMenuProps {
|
|
350
|
+
elements: SketchBoardElement[];
|
|
351
|
+
selectedIds?: string[];
|
|
352
|
+
boardName: string;
|
|
353
|
+
onManualSave: () => void;
|
|
354
|
+
onClearBoard: () => void;
|
|
355
|
+
gridStyle: GridStyle;
|
|
356
|
+
setGridStyle: (style: GridStyle) => void;
|
|
357
|
+
resetCamera: () => void;
|
|
358
|
+
canvasBackground?: string;
|
|
359
|
+
}
|
|
360
|
+
declare function SketchBoardContextMenu({ elements, selectedIds, boardName, onManualSave, onClearBoard, gridStyle, setGridStyle, resetCamera, canvasBackground, }: SketchBoardContextMenuProps): React__default.JSX.Element | null;
|
|
361
|
+
|
|
362
|
+
interface SketchBoardExportModalProps {
|
|
363
|
+
isOpen: boolean;
|
|
364
|
+
onClose: () => void;
|
|
365
|
+
elements: SketchBoardElement[];
|
|
366
|
+
selectedIds?: string[];
|
|
367
|
+
onImportElements: (elements: SketchBoardElement[]) => void;
|
|
368
|
+
boardName: string;
|
|
369
|
+
canvasBackground?: string;
|
|
370
|
+
gridStyle?: GridStyle;
|
|
371
|
+
}
|
|
372
|
+
declare function SketchBoardExportModal({ isOpen, onClose, elements, selectedIds, onImportElements, boardName, canvasBackground, gridStyle, }: SketchBoardExportModalProps): React__default.JSX.Element | null;
|
|
373
|
+
|
|
374
|
+
interface SketchBoardPresentationModeProps {
|
|
375
|
+
isOpen: boolean;
|
|
376
|
+
onClose: () => void;
|
|
377
|
+
elements: SketchBoardElement[];
|
|
378
|
+
selectedIds?: string[];
|
|
379
|
+
camera: Camera;
|
|
380
|
+
setCamera: React__default.Dispatch<React__default.SetStateAction<Camera>>;
|
|
381
|
+
isSpotlightActive?: boolean;
|
|
382
|
+
onToggleSpotlight?: () => void;
|
|
383
|
+
}
|
|
384
|
+
declare function SketchBoardPresentationMode({ isOpen, onClose, elements, selectedIds, camera, setCamera, isSpotlightActive, onToggleSpotlight, }: SketchBoardPresentationModeProps): React__default.JSX.Element | null;
|
|
385
|
+
|
|
386
|
+
interface SketchBoardFramesOutlineProps {
|
|
387
|
+
isOpen: boolean;
|
|
388
|
+
onClose: () => void;
|
|
389
|
+
elements: SketchBoardElement[];
|
|
390
|
+
setElements: React__default.Dispatch<React__default.SetStateAction<SketchBoardElement[]>>;
|
|
391
|
+
selectedIds: string[];
|
|
392
|
+
selectElements: (ids: string[]) => void;
|
|
393
|
+
updateElement: (id: string, updates: Partial<SketchBoardElement>) => void;
|
|
394
|
+
pushHistory: (newElements: SketchBoardElement[]) => void;
|
|
395
|
+
camera: Camera;
|
|
396
|
+
setCamera: React__default.Dispatch<React__default.SetStateAction<Camera>>;
|
|
397
|
+
onStartPresentation?: () => void;
|
|
398
|
+
}
|
|
399
|
+
declare function SketchBoardFramesOutline({ isOpen, onClose, elements, setElements, selectedIds, selectElements, updateElement, pushHistory, camera, setCamera, onStartPresentation, }: SketchBoardFramesOutlineProps): React__default.JSX.Element | null;
|
|
400
|
+
|
|
401
|
+
interface SketchBoardShortcutsModalProps {
|
|
402
|
+
guideHref?: string;
|
|
403
|
+
onOpenGuide?: () => void;
|
|
404
|
+
}
|
|
405
|
+
declare function SketchBoardShortcutsModal({ guideHref, onOpenGuide, }?: SketchBoardShortcutsModalProps): React__default.JSX.Element;
|
|
406
|
+
|
|
407
|
+
interface SketchBoardTechStencilsModalProps {
|
|
408
|
+
isOpen: boolean;
|
|
409
|
+
onClose: () => void;
|
|
410
|
+
onInsertTechStencil: (dataUrl: string, title: string, mode: 'badge' | 'standalone') => void;
|
|
411
|
+
}
|
|
412
|
+
declare function SketchBoardTechStencilsModal({ isOpen, onClose, onInsertTechStencil, }: SketchBoardTechStencilsModalProps): React__default.JSX.Element | null;
|
|
413
|
+
|
|
414
|
+
interface TemplateDefinition {
|
|
415
|
+
id: 'mindmap' | 'flowchart' | 'erd' | 'kanban' | 'user_journey';
|
|
416
|
+
title: string;
|
|
417
|
+
category: 'Brainstorming' | 'Diagrams' | 'Engineering' | 'Agile & Planning';
|
|
418
|
+
description: string;
|
|
419
|
+
tag: string;
|
|
420
|
+
tagColor: string;
|
|
421
|
+
elementsCount: number;
|
|
422
|
+
previewType: 'mindmap' | 'flowchart' | 'erd' | 'kanban' | 'journey';
|
|
423
|
+
}
|
|
424
|
+
declare const DIAGRAM_TEMPLATES: TemplateDefinition[];
|
|
425
|
+
|
|
426
|
+
interface SketchBoardTemplatesFlyoutProps {
|
|
427
|
+
isOpen: boolean;
|
|
428
|
+
onClose: () => void;
|
|
429
|
+
onSelectTemplate: (templateId: TemplateDefinition['id'], mode: 'append' | 'replace') => void;
|
|
430
|
+
hasExistingElements?: boolean;
|
|
431
|
+
}
|
|
432
|
+
declare function SketchBoardTemplatesFlyout({ isOpen, onClose, onSelectTemplate, hasExistingElements, }: SketchBoardTemplatesFlyoutProps): React__default.JSX.Element | null;
|
|
433
|
+
|
|
434
|
+
interface SketchBoardLaserDockProps {
|
|
435
|
+
laserColor: string;
|
|
436
|
+
setLaserColor: (color: string) => void;
|
|
437
|
+
laserMode: LaserMode;
|
|
438
|
+
setLaserMode: (mode: LaserMode) => void;
|
|
439
|
+
onClearLaser: () => void;
|
|
440
|
+
laserStrokeCount: number;
|
|
441
|
+
onExitLaser: () => void;
|
|
442
|
+
}
|
|
443
|
+
declare function SketchBoardLaserDock({ laserColor, setLaserColor, laserMode, setLaserMode, onClearLaser, laserStrokeCount, onExitLaser, }: SketchBoardLaserDockProps): React__default.JSX.Element;
|
|
444
|
+
|
|
445
|
+
interface SketchBoardSpotlightOverlayProps {
|
|
446
|
+
isActive: boolean;
|
|
447
|
+
onClose: () => void;
|
|
448
|
+
selectedElements: SketchBoardElement[];
|
|
449
|
+
allElements: SketchBoardElement[];
|
|
450
|
+
camera: Camera;
|
|
451
|
+
worldToScreen: (pt: Point) => Point;
|
|
452
|
+
screenToWorld: (pt: Point) => Point;
|
|
453
|
+
onSelectElement?: (id: string) => void;
|
|
454
|
+
isDark: boolean;
|
|
455
|
+
}
|
|
456
|
+
declare function SketchBoardSpotlightOverlay({ isActive, onClose, selectedElements, allElements, camera, worldToScreen, screenToWorld, onSelectElement, isDark, }: SketchBoardSpotlightOverlayProps): React__default.JSX.Element | null;
|
|
457
|
+
|
|
458
|
+
declare function useSketchBoardCamera(initialCamera?: Camera): {
|
|
459
|
+
camera: Camera;
|
|
460
|
+
setCamera: React.Dispatch<React.SetStateAction<Camera>>;
|
|
461
|
+
screenToWorld: (screenPt: Point) => Point;
|
|
462
|
+
worldToScreen: (worldPt: Point) => Point;
|
|
463
|
+
panBy: (deltaX: number, deltaY: number) => void;
|
|
464
|
+
zoomAtPoint: (newZoomFactor: number, screenPivot: Point) => void;
|
|
465
|
+
zoomIn: (screenPivot?: Point) => void;
|
|
466
|
+
zoomOut: (screenPivot?: Point) => void;
|
|
467
|
+
resetCamera: () => void;
|
|
468
|
+
};
|
|
469
|
+
|
|
470
|
+
type AlignmentType = 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';
|
|
471
|
+
type DistributionType = 'horizontal' | 'vertical';
|
|
472
|
+
/**
|
|
473
|
+
* Aligns selected elements along a target edge or center axis
|
|
474
|
+
*/
|
|
475
|
+
declare function alignElements(elements: SketchBoardElement[], selectedIds: string[], type: AlignmentType): SketchBoardElement[];
|
|
476
|
+
/**
|
|
477
|
+
* Distributes elements evenly along horizontal or vertical space
|
|
478
|
+
*/
|
|
479
|
+
declare function distributeElements(elements: SketchBoardElement[], selectedIds: string[], type: DistributionType): SketchBoardElement[];
|
|
480
|
+
|
|
481
|
+
declare function useSketchBoardElements(initialElements?: SketchBoardElement[]): {
|
|
482
|
+
elements: SketchBoardElement[];
|
|
483
|
+
setElements: React.Dispatch<React.SetStateAction<SketchBoardElement[]>>;
|
|
484
|
+
setAllElements: (newElements: SketchBoardElement[]) => void;
|
|
485
|
+
selectedIds: string[];
|
|
486
|
+
setSelectedIds: React.Dispatch<React.SetStateAction<string[]>>;
|
|
487
|
+
selectedElements: SketchBoardElement[];
|
|
488
|
+
singleSelectedElement: SketchBoardElement | null;
|
|
489
|
+
addElement: (element: SketchBoardElement) => void;
|
|
490
|
+
updateElement: (id: string, updates: Partial<SketchBoardElement>) => void;
|
|
491
|
+
updateSelectedElements: (updates: Partial<SketchBoardElement>) => void;
|
|
492
|
+
deleteSelectedElements: () => void;
|
|
493
|
+
duplicateSelectedElements: () => void;
|
|
494
|
+
groupSelectedElements: () => void;
|
|
495
|
+
ungroupSelectedElements: () => void;
|
|
496
|
+
alignSelectedElements: (type: AlignmentType) => void;
|
|
497
|
+
distributeSelectedElements: (type: DistributionType) => void;
|
|
498
|
+
bringToFront: () => void;
|
|
499
|
+
sendToBack: () => void;
|
|
500
|
+
bringForward: () => void;
|
|
501
|
+
sendBackward: () => void;
|
|
502
|
+
selectElement: (id: string, multi?: boolean) => void;
|
|
503
|
+
selectElements: (ids: string[]) => void;
|
|
504
|
+
clearSelection: () => void;
|
|
505
|
+
};
|
|
506
|
+
|
|
507
|
+
declare function useSketchBoardHistory(initialElements?: SketchBoardElement[]): {
|
|
508
|
+
pushState: (newElements: SketchBoardElement[]) => void;
|
|
509
|
+
undo: () => SketchBoardElement[] | null;
|
|
510
|
+
redo: () => SketchBoardElement[] | null;
|
|
511
|
+
resetHistory: (initial?: SketchBoardElement[]) => void;
|
|
512
|
+
canUndo: boolean;
|
|
513
|
+
canRedo: boolean;
|
|
514
|
+
};
|
|
515
|
+
|
|
516
|
+
declare function useHydrated(): boolean;
|
|
517
|
+
|
|
518
|
+
declare const DEFAULT_ELEMENT_STYLES: Omit<SketchBoardElement, 'id' | 'x' | 'y' | 'width' | 'height'>;
|
|
519
|
+
|
|
520
|
+
interface TechIcon {
|
|
521
|
+
id: string;
|
|
522
|
+
name: string;
|
|
523
|
+
category: 'frontend' | 'backend' | 'database' | 'cloud' | 'tools';
|
|
524
|
+
color: string;
|
|
525
|
+
keywords: string[];
|
|
526
|
+
svg: string;
|
|
527
|
+
}
|
|
528
|
+
declare const TECH_CATEGORIES: readonly [{
|
|
529
|
+
readonly id: "all";
|
|
530
|
+
readonly label: "All Stencils";
|
|
531
|
+
}, {
|
|
532
|
+
readonly id: "frontend";
|
|
533
|
+
readonly label: "Frontend & UI";
|
|
534
|
+
}, {
|
|
535
|
+
readonly id: "backend";
|
|
536
|
+
readonly label: "Backend & Runtimes";
|
|
537
|
+
}, {
|
|
538
|
+
readonly id: "database";
|
|
539
|
+
readonly label: "Databases & Storage";
|
|
540
|
+
}, {
|
|
541
|
+
readonly id: "cloud";
|
|
542
|
+
readonly label: "Cloud & DevOps";
|
|
543
|
+
}, {
|
|
544
|
+
readonly id: "tools";
|
|
545
|
+
readonly label: "AI, Tools & APIs";
|
|
546
|
+
}];
|
|
547
|
+
declare const TECH_ICONS: TechIcon[];
|
|
548
|
+
|
|
549
|
+
/**
|
|
550
|
+
* Updates all arrow positions in real time based on their bound start & end elements
|
|
551
|
+
*/
|
|
552
|
+
declare function updateBoundArrows(elements: SketchBoardElement[]): SketchBoardElement[];
|
|
553
|
+
/**
|
|
554
|
+
* Deep clones elements while properly remapping internal arrow start/end bindings
|
|
555
|
+
* and group IDs so cloned groups and arrows remain independent and attached to cloned shapes.
|
|
556
|
+
*/
|
|
557
|
+
declare function cloneSketchBoardElements(elementsToClone: SketchBoardElement[], options?: {
|
|
558
|
+
deltaX?: number;
|
|
559
|
+
deltaY?: number;
|
|
560
|
+
highestZ?: number;
|
|
561
|
+
}): {
|
|
562
|
+
clonedElements: SketchBoardElement[];
|
|
563
|
+
newSelectedIds: string[];
|
|
564
|
+
};
|
|
565
|
+
|
|
566
|
+
/**
|
|
567
|
+
* Client-side file saving utility.
|
|
568
|
+
* Triggers a native browser download without server interaction.
|
|
569
|
+
*/
|
|
570
|
+
interface FileSaverOptions {
|
|
571
|
+
mimeType?: string;
|
|
572
|
+
filters?: unknown;
|
|
573
|
+
[key: string]: unknown;
|
|
574
|
+
}
|
|
575
|
+
declare function saveOrDownloadFile(data: Blob | Uint8Array | string, filename: string, mimeTypeOrOptions?: string | FileSaverOptions): Promise<void>;
|
|
576
|
+
|
|
577
|
+
export { Camera, DEFAULT_ELEMENT_STYLES, DEFAULT_STARTER_ELEMENTS, DIAGRAM_TEMPLATES, GridStyle, LaserMode, LaserStroke, type PanelVariant, Point, SKETCH_DOCUMENT_VERSION, SketchBoardCanvas, SketchBoardContextMenu, SketchBoardElement, SketchBoardExportModal, SketchBoardFloatingDock, SketchBoardFramesOutline, SketchBoardLaserDock, SketchBoardMinimap, SketchBoardPresentationMode, SketchBoardPropertiesPanel, SketchBoardShortcutsModal, SketchBoardSpotlightOverlay, SketchBoardTechStencilsModal, SketchBoardTemplatesFlyout, SketchBoardToolBar, SketchBoardTopBar, type SketchController, type SketchDocument, SketchEditor, type SketchEditorProps, SketchEventEmitter, type SketchEventHandler, type SketchEventType, type SketchThemeContextValue, type SketchUIConfig, TECH_CATEGORIES, TECH_ICONS, type TechIcon, type TemplateDefinition, type ThemeMode, ToolType, alignElements, cloneSketchBoardElements, createEmptyDocument, distributeElements, isValidSketchDocument, parseDocument, saveOrDownloadFile, serializeDocument, updateBoundArrows, useHydrated, useSketchBoardCamera, useSketchBoardElements, useSketchBoardHistory, useSketchTheme, useSketchThemeContext };
|