dynim-core 1.0.4 → 1.0.5
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/README.md +9 -282
- package/dist/builder/builder-client.d.ts +1 -5
- package/dist/builder/builder-client.d.ts.map +1 -1
- package/dist/builder/builder-client.js +2 -22
- package/dist/builder/builder.d.ts +0 -4
- package/dist/builder/builder.d.ts.map +1 -1
- package/dist/builder/builder.js +21 -232
- package/dist/builder/editor-overlays.d.ts +1 -10
- package/dist/builder/editor-overlays.d.ts.map +1 -1
- package/dist/builder/editor-overlays.js +1 -103
- package/dist/builder/editor-state.d.ts +2 -21
- package/dist/builder/editor-state.d.ts.map +1 -1
- package/dist/builder/editor-state.js +2 -34
- package/dist/builder/element-utils.d.ts +0 -11
- package/dist/builder/element-utils.d.ts.map +1 -1
- package/dist/builder/element-utils.js +0 -58
- package/dist/builder/freeze-overlay.d.ts +1 -1
- package/dist/builder/freeze-overlay.d.ts.map +1 -1
- package/dist/builder/freeze-overlay.js +1 -2
- package/dist/builder/index.d.ts +5 -9
- package/dist/builder/index.d.ts.map +1 -1
- package/dist/builder/index.js +3 -7
- package/dist/builder/{drag-engine.d.ts → interaction-engine.d.ts} +6 -20
- package/dist/builder/interaction-engine.d.ts.map +1 -0
- package/dist/builder/interaction-engine.js +101 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/README.md +10 -0
- package/src/styles/builder.css +0 -192
- package/src/styles/editor.css +2 -61
- package/dist/builder/diff-state.d.ts +0 -24
- package/dist/builder/diff-state.d.ts.map +0 -1
- package/dist/builder/diff-state.js +0 -134
- package/dist/builder/drag-engine.d.ts.map +0 -1
- package/dist/builder/drag-engine.js +0 -686
- package/dist/builder/history-state.d.ts +0 -41
- package/dist/builder/history-state.d.ts.map +0 -1
- package/dist/builder/history-state.js +0 -76
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Editor state management - Selection
|
|
3
|
-
* Uses event emitters for framework-agnostic reactivity
|
|
2
|
+
* Editor state management - Selection and hover state
|
|
3
|
+
* Uses event emitters for framework-agnostic reactivity
|
|
4
4
|
*/
|
|
5
5
|
export function createEditorState(initialState = {}) {
|
|
6
6
|
let state = {
|
|
@@ -13,11 +13,6 @@ export function createEditorState(initialState = {}) {
|
|
|
13
13
|
hoveredElement: null,
|
|
14
14
|
drillDepth: 0,
|
|
15
15
|
isMultiSelectActive: false,
|
|
16
|
-
isDragging: false,
|
|
17
|
-
dragSourceElement: null,
|
|
18
|
-
dragSourceRect: null,
|
|
19
|
-
dragGhostPos: null,
|
|
20
|
-
dropIndicator: null,
|
|
21
16
|
...initialState
|
|
22
17
|
};
|
|
23
18
|
const listeners = new Set();
|
|
@@ -89,30 +84,6 @@ export function createEditorState(initialState = {}) {
|
|
|
89
84
|
drillDepth: 0
|
|
90
85
|
});
|
|
91
86
|
}
|
|
92
|
-
function startDrag(element, rect) {
|
|
93
|
-
setState({
|
|
94
|
-
isDragging: true,
|
|
95
|
-
dragSourceElement: element,
|
|
96
|
-
dragSourceRect: rect,
|
|
97
|
-
selectedElement: null,
|
|
98
|
-
selectionRect: null
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
function updateDrag(ghostPos, dropIndicator) {
|
|
102
|
-
setState({
|
|
103
|
-
dragGhostPos: ghostPos,
|
|
104
|
-
dropIndicator: dropIndicator
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
function endDrag() {
|
|
108
|
-
setState({
|
|
109
|
-
isDragging: false,
|
|
110
|
-
dragSourceElement: null,
|
|
111
|
-
dragSourceRect: null,
|
|
112
|
-
dragGhostPos: null,
|
|
113
|
-
dropIndicator: null
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
87
|
return {
|
|
117
88
|
getState,
|
|
118
89
|
setState,
|
|
@@ -125,8 +96,5 @@ export function createEditorState(initialState = {}) {
|
|
|
125
96
|
clearHover,
|
|
126
97
|
incrementDrillDepth,
|
|
127
98
|
resetDrillDepth,
|
|
128
|
-
startDrag,
|
|
129
|
-
updateDrag,
|
|
130
|
-
endDrag
|
|
131
99
|
};
|
|
132
100
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* Element utilities - Stable IDs and element identification
|
|
3
3
|
*/
|
|
4
4
|
export declare const STABLE_ID_ATTR = "data-sdesign-id";
|
|
5
|
-
export declare const VISIBILITY_ATTR = "vis";
|
|
6
5
|
export interface ElementIdentifier {
|
|
7
6
|
tagName: string;
|
|
8
7
|
classes: string[];
|
|
@@ -12,13 +11,6 @@ export interface ElementIdentifier {
|
|
|
12
11
|
textContentPreview?: string;
|
|
13
12
|
parentIdentifier?: ElementIdentifier;
|
|
14
13
|
}
|
|
15
|
-
export interface PlacementTarget {
|
|
16
|
-
parent: ElementIdentifier;
|
|
17
|
-
parentStableId: string;
|
|
18
|
-
position: 'prepend' | 'append' | 'after';
|
|
19
|
-
referenceElement?: ElementIdentifier;
|
|
20
|
-
referenceStableId?: string;
|
|
21
|
-
}
|
|
22
14
|
export interface SerializedRect {
|
|
23
15
|
x: number;
|
|
24
16
|
y: number;
|
|
@@ -29,8 +21,6 @@ export interface SerializedRect {
|
|
|
29
21
|
bottom: number;
|
|
30
22
|
left: number;
|
|
31
23
|
}
|
|
32
|
-
export declare function getVisibilityBoundary(element: HTMLElement): HTMLElement | null;
|
|
33
|
-
export declare function canDropInZone(sourceElement: HTMLElement, targetElement: HTMLElement): boolean;
|
|
34
24
|
export declare function getStableId(element: HTMLElement): string;
|
|
35
25
|
export declare function findByStableId(id: string, root?: HTMLElement): HTMLElement | null;
|
|
36
26
|
export declare function getDomPath(element: HTMLElement, root: HTMLElement): number[];
|
|
@@ -38,6 +28,5 @@ export declare function getElementAtPath(path: number[], root: HTMLElement): HTM
|
|
|
38
28
|
export declare function getRelevantStyles(el: HTMLElement): Record<string, string>;
|
|
39
29
|
export declare function serializeRect(rect: DOMRect): SerializedRect;
|
|
40
30
|
export declare function buildElementIdentifier(element: HTMLElement, maxDepth?: number): ElementIdentifier;
|
|
41
|
-
export declare function buildPlacementTarget(element: HTMLElement): PlacementTarget | null;
|
|
42
31
|
export declare function getVisibleContent(): string[];
|
|
43
32
|
//# sourceMappingURL=element-utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-utils.d.ts","sourceRoot":"","sources":["../../src/builder/element-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,cAAc,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"element-utils.d.ts","sourceRoot":"","sources":["../../src/builder/element-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,cAAc,oBAAoB,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;CACtC;AAED,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAWD,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CASxD;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,WAA2B,GAAG,WAAW,GAAG,IAAI,CAEhG;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,EAAE,CAY5E;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAStF;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqBzE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,cAAc,CAW3D;AAiDD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,SAAI,GAAG,iBAAiB,CAwB5F;AAID,wBAAgB,iBAAiB,IAAI,MAAM,EAAE,CA0C5C"}
|
|
@@ -2,32 +2,6 @@
|
|
|
2
2
|
* Element utilities - Stable IDs and element identification
|
|
3
3
|
*/
|
|
4
4
|
export const STABLE_ID_ATTR = 'data-sdesign-id';
|
|
5
|
-
export const VISIBILITY_ATTR = 'vis';
|
|
6
|
-
export function getVisibilityBoundary(element) {
|
|
7
|
-
let current = element;
|
|
8
|
-
while (current && current !== document.body) {
|
|
9
|
-
const visAttr = current.getAttribute(VISIBILITY_ATTR);
|
|
10
|
-
if (visAttr === 'false') {
|
|
11
|
-
return current;
|
|
12
|
-
}
|
|
13
|
-
if (visAttr === 'true') {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
current = current.parentElement;
|
|
17
|
-
}
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
export function canDropInZone(sourceElement, targetElement) {
|
|
21
|
-
const sourceBoundary = getVisibilityBoundary(sourceElement);
|
|
22
|
-
const targetBoundary = getVisibilityBoundary(targetElement);
|
|
23
|
-
if (sourceBoundary !== null) {
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
if (targetBoundary !== null) {
|
|
27
|
-
return false;
|
|
28
|
-
}
|
|
29
|
-
return true;
|
|
30
|
-
}
|
|
31
5
|
function generateId(length = 10) {
|
|
32
6
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
33
7
|
let result = '';
|
|
@@ -163,38 +137,6 @@ export function buildElementIdentifier(element, maxDepth = 3) {
|
|
|
163
137
|
}
|
|
164
138
|
return identifier;
|
|
165
139
|
}
|
|
166
|
-
export function buildPlacementTarget(element) {
|
|
167
|
-
const parent = element.parentElement;
|
|
168
|
-
if (!parent)
|
|
169
|
-
return null;
|
|
170
|
-
const siblings = Array.from(parent.children);
|
|
171
|
-
const index = siblings.indexOf(element);
|
|
172
|
-
const parentStableId = getStableId(parent);
|
|
173
|
-
if (index === 0) {
|
|
174
|
-
return {
|
|
175
|
-
parent: buildElementIdentifier(parent),
|
|
176
|
-
parentStableId,
|
|
177
|
-
position: 'prepend'
|
|
178
|
-
};
|
|
179
|
-
}
|
|
180
|
-
else if (index === siblings.length - 1) {
|
|
181
|
-
return {
|
|
182
|
-
parent: buildElementIdentifier(parent),
|
|
183
|
-
parentStableId,
|
|
184
|
-
position: 'append'
|
|
185
|
-
};
|
|
186
|
-
}
|
|
187
|
-
else {
|
|
188
|
-
const prevSibling = siblings[index - 1];
|
|
189
|
-
return {
|
|
190
|
-
parent: buildElementIdentifier(parent),
|
|
191
|
-
parentStableId,
|
|
192
|
-
position: 'after',
|
|
193
|
-
referenceElement: buildElementIdentifier(prevSibling),
|
|
194
|
-
referenceStableId: getStableId(prevSibling)
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
140
|
const MAX_VISIBLE_CONTENT_SIZE = 10 * 1024; // 10KB limit
|
|
199
141
|
export function getVisibleContent() {
|
|
200
142
|
const text = [];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Page freeze overlay - captures events but allows scrolling
|
|
3
3
|
* Prevents button clicks, link navigation, form submissions
|
|
4
|
-
* while allowing
|
|
4
|
+
* while allowing builder interactions
|
|
5
5
|
*/
|
|
6
6
|
export interface FreezeOverlayConfig {
|
|
7
7
|
zIndex?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"freeze-overlay.d.ts","sourceRoot":"","sources":["../../src/builder/freeze-overlay.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAC;IAC3D,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACjD;AAED,wBAAgB,mBAAmB,CAAC,MAAM,GAAE,mBAAwB,GAAG,aAAa,
|
|
1
|
+
{"version":3,"file":"freeze-overlay.d.ts","sourceRoot":"","sources":["../../src/builder/freeze-overlay.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAC;IAC3D,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACjD;AAED,wBAAgB,mBAAmB,CAAC,MAAM,GAAE,mBAAwB,GAAG,aAAa,CAgQnF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Page freeze overlay - captures events but allows scrolling
|
|
3
3
|
* Prevents button clicks, link navigation, form submissions
|
|
4
|
-
* while allowing
|
|
4
|
+
* while allowing builder interactions
|
|
5
5
|
*/
|
|
6
6
|
export function createFreezeOverlay(config = {}) {
|
|
7
7
|
const { zIndex = 9998, onMouseDown, onMouseMove, onMouseUp, onMouseLeave, onClick, onDoubleClick, onWheel, contentRoot = document.body } = config;
|
|
@@ -56,7 +56,6 @@ export function createFreezeOverlay(config = {}) {
|
|
|
56
56
|
function isBuilderUI(target) {
|
|
57
57
|
return target !== null && (!!target.closest('.builder') ||
|
|
58
58
|
!!target.closest('.builder-bar') ||
|
|
59
|
-
!!target.closest('.builder-modal') ||
|
|
60
59
|
!!target.closest('#__ai-prompt-popover__'));
|
|
61
60
|
}
|
|
62
61
|
function handleDocumentMouseMove(e) {
|
package/dist/builder/index.d.ts
CHANGED
|
@@ -14,23 +14,19 @@ export type { BuilderClientConfig, BuilderClient } from './builder-client';
|
|
|
14
14
|
export { createCodeClient } from './code-client';
|
|
15
15
|
export type { CodeClientConfig, CodeMessage, CodeEvent, CodeEdit, CodeClient } from './code-client';
|
|
16
16
|
export { createEditorState } from './editor-state';
|
|
17
|
-
export type {
|
|
18
|
-
export { createHistoryState } from './history-state';
|
|
19
|
-
export type { CreatedWrapper, MoveEntry, HistoryStateData, HistoryStateListener, HistoryState } from './history-state';
|
|
17
|
+
export type { EditorStateData, EditorStateListener, EditorState } from './editor-state';
|
|
20
18
|
export { createTreeState } from './tree-state';
|
|
21
19
|
export type { TreeNode, SerializedRect, SerializedDOMNode, TreeStateData, TreeStateListener, TreeState } from './tree-state';
|
|
22
|
-
export { createDiffState } from './diff-state';
|
|
23
|
-
export type { DiffEntry, DiffState } from './diff-state';
|
|
24
20
|
export { createFreezeOverlay } from './freeze-overlay';
|
|
25
21
|
export type { FreezeOverlayConfig, FreezeOverlay } from './freeze-overlay';
|
|
26
22
|
export { createOverlays } from './editor-overlays';
|
|
27
23
|
export type { OverlaysConfig, Overlays } from './editor-overlays';
|
|
28
|
-
export {
|
|
29
|
-
export type {
|
|
24
|
+
export { createInteractionEngine } from './interaction-engine';
|
|
25
|
+
export type { InteractionEngineConfig, InteractionEngine } from './interaction-engine';
|
|
30
26
|
export { scanDOM, createDebouncedScanner, getElementAtPath, queryElements, generateSelector } from './dom-scanner';
|
|
31
27
|
export type { ScanOptions, DebouncedScanner } from './dom-scanner';
|
|
32
|
-
export { STABLE_ID_ATTR,
|
|
33
|
-
export type { ElementIdentifier,
|
|
28
|
+
export { STABLE_ID_ATTR, getStableId, findByStableId, getDomPath, getElementAtPath as getElementAtPathFromUtils, getRelevantStyles, serializeRect, buildElementIdentifier, } from './element-utils';
|
|
29
|
+
export type { ElementIdentifier, SerializedRect as SerializedRectFromUtils } from './element-utils';
|
|
34
30
|
export { createAIPromptPopover } from './ai-prompt-popover';
|
|
35
31
|
export type { AIPromptPopoverConfig, AIPromptPopover } from './ai-prompt-popover';
|
|
36
32
|
export { getFiberFromDOM, getFiberRoot, captureReactTree } from './fiber-capture';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/builder/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAG9F,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,WAAW,CAAC;AAG3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/builder/index.ts"],"names":[],"mappings":"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"}
|
package/dist/builder/index.js
CHANGED
|
@@ -15,22 +15,18 @@ export { createBuilderClient } from './builder-client';
|
|
|
15
15
|
export { createCodeClient } from './code-client';
|
|
16
16
|
// Editor state
|
|
17
17
|
export { createEditorState } from './editor-state';
|
|
18
|
-
// History state
|
|
19
|
-
export { createHistoryState } from './history-state';
|
|
20
18
|
// Tree state
|
|
21
19
|
export { createTreeState } from './tree-state';
|
|
22
|
-
// Diff state
|
|
23
|
-
export { createDiffState } from './diff-state';
|
|
24
20
|
// Freeze overlay
|
|
25
21
|
export { createFreezeOverlay } from './freeze-overlay';
|
|
26
22
|
// Editor overlays
|
|
27
23
|
export { createOverlays } from './editor-overlays';
|
|
28
|
-
//
|
|
29
|
-
export {
|
|
24
|
+
// Interaction engine (hover/selection handling)
|
|
25
|
+
export { createInteractionEngine } from './interaction-engine';
|
|
30
26
|
// DOM scanner
|
|
31
27
|
export { scanDOM, createDebouncedScanner, getElementAtPath, queryElements, generateSelector } from './dom-scanner';
|
|
32
28
|
// Element utilities
|
|
33
|
-
export { STABLE_ID_ATTR,
|
|
29
|
+
export { STABLE_ID_ATTR, getStableId, findByStableId, getDomPath, getElementAtPath as getElementAtPathFromUtils, getRelevantStyles, serializeRect, buildElementIdentifier, } from './element-utils';
|
|
34
30
|
// AI prompt popover
|
|
35
31
|
export { createAIPromptPopover } from './ai-prompt-popover';
|
|
36
32
|
// Fiber capture
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Interaction engine - handles hover and selection interactions
|
|
3
|
+
* Simplified version without drag-and-drop functionality
|
|
3
4
|
*/
|
|
4
5
|
import type { EditorState } from './editor-state';
|
|
5
|
-
import type { HistoryState } from './history-state';
|
|
6
|
-
import type { DiffState } from './diff-state';
|
|
7
6
|
import type { Overlays } from './editor-overlays';
|
|
8
7
|
import type { FreezeOverlay } from './freeze-overlay';
|
|
9
|
-
export interface
|
|
8
|
+
export interface InteractionEngineConfig {
|
|
10
9
|
contentRoot: HTMLElement;
|
|
11
10
|
editorState: EditorState;
|
|
12
|
-
historyState: HistoryState;
|
|
13
|
-
diffState: DiffState;
|
|
14
|
-
treeState?: unknown;
|
|
15
11
|
overlays: Overlays;
|
|
16
12
|
freezeOverlay?: FreezeOverlay | null;
|
|
17
|
-
onRescan?: () => void;
|
|
18
13
|
}
|
|
19
|
-
export interface
|
|
20
|
-
element: HTMLElement;
|
|
21
|
-
position: string;
|
|
22
|
-
rect: DOMRect;
|
|
23
|
-
parentRect: DOMRect | null;
|
|
24
|
-
}
|
|
25
|
-
export interface DragEngine {
|
|
14
|
+
export interface InteractionEngine {
|
|
26
15
|
attach: () => void;
|
|
27
16
|
detach: () => void;
|
|
28
17
|
setFreezeOverlay: (overlay: FreezeOverlay) => void;
|
|
@@ -33,9 +22,6 @@ export interface DragEngine {
|
|
|
33
22
|
handleClick: (e: MouseEvent, element: HTMLElement | null) => void;
|
|
34
23
|
handleDoubleClick: (e: MouseEvent, element: HTMLElement | null) => void;
|
|
35
24
|
handleWheel: (e: WheelEvent) => void;
|
|
36
|
-
executeUndo: () => void;
|
|
37
|
-
executeRedo: () => void;
|
|
38
|
-
findDropTarget: (x: number, y: number, draggedElement: HTMLElement) => DropTarget | null;
|
|
39
25
|
}
|
|
40
|
-
export declare function
|
|
41
|
-
//# sourceMappingURL=
|
|
26
|
+
export declare function createInteractionEngine(config: InteractionEngineConfig): InteractionEngine;
|
|
27
|
+
//# sourceMappingURL=interaction-engine.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interaction-engine.d.ts","sourceRoot":"","sources":["../../src/builder/interaction-engine.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,gBAAgB,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACpE,gBAAgB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxE,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,uBAAuB,GAAG,iBAAiB,CAmH1F"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Interaction engine - handles hover and selection interactions
|
|
3
|
+
* Simplified version without drag-and-drop functionality
|
|
4
|
+
*/
|
|
5
|
+
export function createInteractionEngine(config) {
|
|
6
|
+
const { editorState, overlays, } = config;
|
|
7
|
+
let freezeOverlay = config.freezeOverlay || null;
|
|
8
|
+
function setFreezeOverlay(overlay) {
|
|
9
|
+
freezeOverlay = overlay;
|
|
10
|
+
}
|
|
11
|
+
function handleMouseDown(e, element) {
|
|
12
|
+
const state = editorState.getState();
|
|
13
|
+
if (!element) {
|
|
14
|
+
if (state.selectedElement) {
|
|
15
|
+
editorState.clearSelection();
|
|
16
|
+
overlays.hideSelection();
|
|
17
|
+
}
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
// Clear selection if clicking a different element
|
|
21
|
+
if (element !== state.selectedElement && state.selectedElement) {
|
|
22
|
+
editorState.clearSelection();
|
|
23
|
+
overlays.hideSelection();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
function handleMouseMove(_e, element) {
|
|
27
|
+
if (element) {
|
|
28
|
+
const rect = element.getBoundingClientRect();
|
|
29
|
+
editorState.setHover(null, element, rect);
|
|
30
|
+
overlays.showHover(rect);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
editorState.clearHover();
|
|
34
|
+
overlays.hideHover();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function handleMouseUp(_e, _element) {
|
|
38
|
+
// No drag handling needed
|
|
39
|
+
}
|
|
40
|
+
function handleMouseLeave(_e) {
|
|
41
|
+
editorState.clearHover();
|
|
42
|
+
overlays.hideHover();
|
|
43
|
+
}
|
|
44
|
+
function handleClick(_e, element) {
|
|
45
|
+
if (element) {
|
|
46
|
+
const rect = element.getBoundingClientRect();
|
|
47
|
+
const state = editorState.getState();
|
|
48
|
+
// Toggle selection if clicking the same element
|
|
49
|
+
if (state.selectedElement === element) {
|
|
50
|
+
editorState.clearSelection();
|
|
51
|
+
overlays.hideSelection();
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
editorState.setSelection(element, rect);
|
|
55
|
+
overlays.showSelection(rect);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
editorState.clearSelection();
|
|
59
|
+
overlays.hideSelection();
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
function handleDoubleClick(_e, element) {
|
|
63
|
+
if (element && element.children.length > 0) {
|
|
64
|
+
editorState.incrementDrillDepth();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
function handleWheel(_e) {
|
|
68
|
+
// Update overlay positions after scroll
|
|
69
|
+
requestAnimationFrame(() => {
|
|
70
|
+
const state = editorState.getState();
|
|
71
|
+
if (state.hoveredElement) {
|
|
72
|
+
const rect = state.hoveredElement.getBoundingClientRect();
|
|
73
|
+
editorState.setHover(null, state.hoveredElement, rect);
|
|
74
|
+
overlays.showHover(rect);
|
|
75
|
+
}
|
|
76
|
+
if (state.selectedElement) {
|
|
77
|
+
const rect = state.selectedElement.getBoundingClientRect();
|
|
78
|
+
editorState.setSelection(state.selectedElement, rect);
|
|
79
|
+
overlays.showSelection(rect);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function attach() {
|
|
84
|
+
// No keyboard shortcuts needed without undo/redo
|
|
85
|
+
}
|
|
86
|
+
function detach() {
|
|
87
|
+
// Nothing to detach
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
attach,
|
|
91
|
+
detach,
|
|
92
|
+
setFreezeOverlay,
|
|
93
|
+
handleMouseDown,
|
|
94
|
+
handleMouseMove,
|
|
95
|
+
handleMouseUp,
|
|
96
|
+
handleMouseLeave,
|
|
97
|
+
handleClick,
|
|
98
|
+
handleDoubleClick,
|
|
99
|
+
handleWheel,
|
|
100
|
+
};
|
|
101
|
+
}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED