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.
Files changed (39) hide show
  1. package/README.md +9 -282
  2. package/dist/builder/builder-client.d.ts +1 -5
  3. package/dist/builder/builder-client.d.ts.map +1 -1
  4. package/dist/builder/builder-client.js +2 -22
  5. package/dist/builder/builder.d.ts +0 -4
  6. package/dist/builder/builder.d.ts.map +1 -1
  7. package/dist/builder/builder.js +21 -232
  8. package/dist/builder/editor-overlays.d.ts +1 -10
  9. package/dist/builder/editor-overlays.d.ts.map +1 -1
  10. package/dist/builder/editor-overlays.js +1 -103
  11. package/dist/builder/editor-state.d.ts +2 -21
  12. package/dist/builder/editor-state.d.ts.map +1 -1
  13. package/dist/builder/editor-state.js +2 -34
  14. package/dist/builder/element-utils.d.ts +0 -11
  15. package/dist/builder/element-utils.d.ts.map +1 -1
  16. package/dist/builder/element-utils.js +0 -58
  17. package/dist/builder/freeze-overlay.d.ts +1 -1
  18. package/dist/builder/freeze-overlay.d.ts.map +1 -1
  19. package/dist/builder/freeze-overlay.js +1 -2
  20. package/dist/builder/index.d.ts +5 -9
  21. package/dist/builder/index.d.ts.map +1 -1
  22. package/dist/builder/index.js +3 -7
  23. package/dist/builder/{drag-engine.d.ts → interaction-engine.d.ts} +6 -20
  24. package/dist/builder/interaction-engine.d.ts.map +1 -0
  25. package/dist/builder/interaction-engine.js +101 -0
  26. package/dist/index.d.ts +1 -1
  27. package/dist/index.js +1 -1
  28. package/package.json +1 -1
  29. package/src/README.md +10 -0
  30. package/src/styles/builder.css +0 -192
  31. package/src/styles/editor.css +2 -61
  32. package/dist/builder/diff-state.d.ts +0 -24
  33. package/dist/builder/diff-state.d.ts.map +0 -1
  34. package/dist/builder/diff-state.js +0 -134
  35. package/dist/builder/drag-engine.d.ts.map +0 -1
  36. package/dist/builder/drag-engine.js +0 -686
  37. package/dist/builder/history-state.d.ts +0 -41
  38. package/dist/builder/history-state.d.ts.map +0 -1
  39. package/dist/builder/history-state.js +0 -76
@@ -109,10 +109,6 @@
109
109
  transform: scale(0.96);
110
110
  }
111
111
 
112
- .builder-bar__btn--saved {
113
- background: #22c55e !important;
114
- }
115
-
116
112
  .builder-bar__btn--preview {
117
113
  background: rgba(255, 255, 255, 0.08);
118
114
  color: #94a3b8;
@@ -141,30 +137,6 @@
141
137
  transform: scale(0.96);
142
138
  }
143
139
 
144
- /* Undo button - contextual appearance */
145
- .builder-bar__btn--undo {
146
- padding: 6px 10px;
147
- background: rgba(255, 255, 255, 0.08);
148
- color: #94a3b8;
149
- animation: undoSlideIn 0.2s ease-out;
150
- }
151
-
152
- .builder-bar__btn--undo:hover {
153
- background: rgba(255, 255, 255, 0.12);
154
- color: #ffffff;
155
- }
156
-
157
- @keyframes undoSlideIn {
158
- from {
159
- opacity: 0;
160
- transform: translateX(-8px);
161
- }
162
- to {
163
- opacity: 1;
164
- transform: translateX(0);
165
- }
166
- }
167
-
168
140
  /* Disabled state for all buttons */
169
141
  .builder-bar__btn:disabled {
170
142
  opacity: 0.35;
@@ -178,115 +150,6 @@
178
150
  opacity: 1 !important;
179
151
  }
180
152
 
181
- /* ===========================================
182
- UNSAVED CHANGES MODAL
183
- =========================================== */
184
-
185
- .builder-modal {
186
- position: fixed;
187
- top: 0;
188
- left: 0;
189
- right: 0;
190
- bottom: 0;
191
- width: 100vw;
192
- height: 100vh;
193
- z-index: 10010 !important;
194
- display: flex;
195
- align-items: center;
196
- justify-content: center;
197
- pointer-events: auto;
198
- }
199
-
200
- .builder-modal__backdrop {
201
- position: fixed;
202
- top: 0;
203
- left: 0;
204
- right: 0;
205
- bottom: 0;
206
- background: rgba(0, 0, 0, 0.5);
207
- backdrop-filter: blur(4px);
208
- -webkit-backdrop-filter: blur(4px);
209
- }
210
-
211
- .builder-modal__dialog {
212
- position: fixed;
213
- top: 50%;
214
- left: 50%;
215
- transform: translate(-50%, -50%);
216
- background: #1e293b;
217
- border-radius: 16px;
218
- padding: 24px;
219
- min-width: 320px;
220
- max-width: 400px;
221
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
222
- border: 1px solid rgba(255, 255, 255, 0.1);
223
- z-index: 10011;
224
- pointer-events: auto;
225
- }
226
-
227
- .builder-modal__title {
228
- font-size: 18px;
229
- font-weight: 600;
230
- color: #ffffff;
231
- margin-bottom: 8px;
232
- }
233
-
234
- .builder-modal__message {
235
- font-size: 14px;
236
- color: #94a3b8;
237
- margin-bottom: 24px;
238
- line-height: 1.5;
239
- }
240
-
241
- .builder-modal__actions {
242
- display: flex;
243
- gap: 8px;
244
- justify-content: flex-end;
245
- }
246
-
247
- .builder-modal__btn {
248
- padding: 8px 16px;
249
- border: none;
250
- border-radius: 8px;
251
- font-family: inherit;
252
- font-size: 13px;
253
- font-weight: 500;
254
- cursor: pointer;
255
- transition: all 0.15s ease;
256
- }
257
-
258
- .builder-modal__btn--cancel {
259
- background: rgba(255, 255, 255, 0.08);
260
- color: #94a3b8;
261
- }
262
-
263
- .builder-modal__btn--cancel:hover {
264
- background: rgba(255, 255, 255, 0.12);
265
- color: #ffffff;
266
- }
267
-
268
- .builder-modal__btn--discard {
269
- background: rgba(239, 68, 68, 0.15);
270
- color: #ef4444;
271
- }
272
-
273
- .builder-modal__btn--discard:hover {
274
- background: rgba(239, 68, 68, 0.25);
275
- }
276
-
277
- .builder-modal__btn--save {
278
- background: #3b82f6;
279
- color: #ffffff;
280
- }
281
-
282
- .builder-modal__btn--save:hover {
283
- background: #2563eb;
284
- }
285
-
286
- /* ===========================================
287
- RESPONSIVE
288
- =========================================== */
289
-
290
153
  /* ===========================================
291
154
  EDITOR OVERLAYS - Dark Reader Protection
292
155
  Uses !important to prevent browser extensions
@@ -320,38 +183,6 @@
320
183
  box-sizing: border-box !important;
321
184
  }
322
185
 
323
- /* Drag ghost - purple dashed */
324
- .editor-drag-ghost.active {
325
- position: fixed !important;
326
- border: 2px dashed #8b5cf6 !important;
327
- background: rgba(139, 92, 246, 0.1) !important;
328
- border-radius: 4px !important;
329
- pointer-events: none !important;
330
- z-index: 10004 !important;
331
- box-sizing: border-box !important;
332
- opacity: 0.8 !important;
333
- }
334
-
335
- /* Drop target highlight - subtle green fill */
336
- .editor-drop-target.active {
337
- position: fixed !important;
338
- background: rgba(34, 197, 94, 0.1) !important;
339
- border-radius: 3px !important;
340
- pointer-events: none !important;
341
- z-index: 10001 !important;
342
- box-sizing: border-box !important;
343
- }
344
-
345
- /* Drop line - green indicator */
346
- .editor-drop-line.active {
347
- position: fixed !important;
348
- background: #22c55e !important;
349
- border-radius: 2px !important;
350
- pointer-events: none !important;
351
- z-index: 10002 !important;
352
- box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
353
- }
354
-
355
186
  /* Tooltip */
356
187
  .editor-tooltip.active {
357
188
  position: fixed !important;
@@ -370,14 +201,6 @@
370
201
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
371
202
  }
372
203
 
373
- /* Parent highlight */
374
- .editor-parent-highlight.active {
375
- position: fixed !important;
376
- pointer-events: none !important;
377
- z-index: 10000 !important;
378
- box-sizing: border-box !important;
379
- }
380
-
381
204
  /* ===========================================
382
205
  RESPONSIVE
383
206
  =========================================== */
@@ -404,19 +227,4 @@
404
227
  width: 14px;
405
228
  height: 14px;
406
229
  }
407
-
408
- .builder-modal__dialog {
409
- min-width: auto;
410
- margin: 16px;
411
- padding: 20px;
412
- }
413
-
414
- .builder-modal__actions {
415
- flex-direction: column;
416
- }
417
-
418
- .builder-modal__btn {
419
- width: 100%;
420
- padding: 12px 16px;
421
- }
422
230
  }
@@ -1,12 +1,11 @@
1
1
  /**
2
- * Editor styles - Visual overlays for the drag-and-drop editor
3
- * Matches the original drag&drop folder styling
2
+ * Editor styles - Visual overlays for the editor
3
+ * Hover highlight, selection box, and tooltip
4
4
  */
5
5
 
6
6
  :root {
7
7
  --editor-accent-blue: #0ea5e9;
8
8
  --editor-accent-purple: #8b5cf6;
9
- --editor-accent-green: #22c55e;
10
9
  }
11
10
 
12
11
  /* Freeze overlay - captures events but allows scroll */
@@ -47,54 +46,6 @@
47
46
  box-sizing: border-box;
48
47
  }
49
48
 
50
- /* Drag ghost - purple dashed */
51
- .editor-drag-ghost {
52
- position: fixed;
53
- border: 2px dashed var(--editor-accent-purple);
54
- background: rgba(139, 92, 246, 0.1);
55
- border-radius: 4px;
56
- pointer-events: none;
57
- z-index: 10004;
58
- box-sizing: border-box;
59
- opacity: 0.8;
60
- }
61
-
62
- /* Drop target highlight - green tint */
63
- .editor-drop-target {
64
- position: fixed;
65
- background: rgba(34, 197, 94, 0.1);
66
- border-radius: 3px;
67
- pointer-events: none;
68
- z-index: 10001;
69
- box-sizing: border-box;
70
- }
71
-
72
- /* Parent highlight - disabled, not used in original */
73
- .editor-parent-highlight {
74
- display: none !important;
75
- }
76
-
77
- /* Drop indicator line - green */
78
- .editor-drop-line {
79
- position: fixed;
80
- background: var(--editor-accent-green);
81
- border-radius: 2px;
82
- pointer-events: none;
83
- z-index: 10002;
84
- box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
85
- }
86
-
87
- /* No-drop indicator - red dashed border for invalid drop zones */
88
- .editor-no-drop-indicator {
89
- position: fixed;
90
- border: 2px dashed #ef4444;
91
- background: rgba(239, 68, 68, 0.1);
92
- border-radius: 4px;
93
- pointer-events: none;
94
- z-index: 10003;
95
- box-sizing: border-box;
96
- }
97
-
98
49
  /* Tooltip - selector info */
99
50
  .editor-tooltip {
100
51
  position: fixed;
@@ -113,16 +64,6 @@
113
64
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
114
65
  }
115
66
 
116
- /* Cursor states */
117
- .editor-freeze-overlay[data-dragging="true"] {
118
- cursor: grabbing !important;
119
- }
120
-
121
- /* Wrappers created by drag-and-drop (minimal styling) */
122
- [data-dnd-wrapper] {
123
- /* No visual styling - just structural */
124
- }
125
-
126
67
  /* Builder mode active state */
127
68
  body.builder-mode-active {
128
69
  /* Prevent selection during builder mode */
@@ -1,24 +0,0 @@
1
- /**
2
- * Diff State - Tracks original element positions for computing serializable diffs
3
- *
4
- * This module records the FIRST position of each moved element.
5
- * When getDiff() is called, it compares original vs current DOM state
6
- * to produce serializable diff objects (not DOM references).
7
- */
8
- import { type ElementIdentifier, type PlacementTarget } from './element-utils';
9
- export interface DiffEntry {
10
- element: ElementIdentifier;
11
- type: 'moved' | 'removed';
12
- from: PlacementTarget;
13
- to: PlacementTarget;
14
- }
15
- export interface DiffState {
16
- snapshotInitialState: (rootElement: HTMLElement) => void;
17
- trackElement: (domElement: HTMLElement, fallbackPlacement?: PlacementTarget) => void;
18
- getDiff: () => DiffEntry[];
19
- hasChanges: () => boolean;
20
- clearAll: () => void;
21
- getTrackedCount: () => number;
22
- }
23
- export declare function createDiffState(): DiffState;
24
- //# sourceMappingURL=diff-state.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"diff-state.d.ts","sourceRoot":"","sources":["../../src/builder/diff-state.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,EAAE,EAAE,eAAe,CAAC;CACrB;AA6CD,MAAM,WAAW,SAAS;IACxB,oBAAoB,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IACzD,YAAY,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACrF,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,EAAE,MAAM,MAAM,CAAC;CAC/B;AAED,wBAAgB,eAAe,IAAI,SAAS,CAyG3C"}
@@ -1,134 +0,0 @@
1
- /**
2
- * Diff State - Tracks original element positions for computing serializable diffs
3
- *
4
- * This module records the FIRST position of each moved element.
5
- * When getDiff() is called, it compares original vs current DOM state
6
- * to produce serializable diff objects (not DOM references).
7
- */
8
- import { getStableId, findByStableId, buildElementIdentifier, buildPlacementTarget } from './element-utils';
9
- function serializeIdentifier(el) {
10
- if (!el)
11
- return '';
12
- if (el.id)
13
- return `#${el.id}`;
14
- const parts = [
15
- el.tagName,
16
- el.classes.sort().join('.'),
17
- `nth:${el.nthOfType}`,
18
- el.textContentPreview?.slice(0, 20) || '',
19
- ];
20
- if (el.parentIdentifier) {
21
- parts.push('>' + serializeIdentifier(el.parentIdentifier));
22
- }
23
- return parts.join('|');
24
- }
25
- function placementsEqual(a, b) {
26
- if (!a || !b)
27
- return a === b;
28
- if (a.position !== b.position)
29
- return false;
30
- if (a.parentStableId && b.parentStableId) {
31
- if (a.parentStableId !== b.parentStableId)
32
- return false;
33
- }
34
- else {
35
- if (serializeIdentifier(a.parent) !== serializeIdentifier(b.parent))
36
- return false;
37
- }
38
- if (a.referenceStableId && b.referenceStableId) {
39
- return a.referenceStableId === b.referenceStableId;
40
- }
41
- if (a.referenceElement && b.referenceElement) {
42
- return serializeIdentifier(a.referenceElement) === serializeIdentifier(b.referenceElement);
43
- }
44
- return a.referenceElement === b.referenceElement;
45
- }
46
- export function createDiffState() {
47
- const initialSnapshot = new Map();
48
- const movedElements = new Map();
49
- function snapshotInitialState(rootElement) {
50
- if (!rootElement)
51
- return;
52
- function walkAndSnapshot(element) {
53
- if (element.nodeType !== Node.ELEMENT_NODE)
54
- return;
55
- const htmlElement = element;
56
- const stableId = getStableId(htmlElement);
57
- const placement = buildPlacementTarget(htmlElement);
58
- if (placement) {
59
- initialSnapshot.set(stableId, placement);
60
- }
61
- for (const child of Array.from(element.children)) {
62
- walkAndSnapshot(child);
63
- }
64
- }
65
- for (const child of Array.from(rootElement.children)) {
66
- walkAndSnapshot(child);
67
- }
68
- }
69
- function trackElement(domElement, _fallbackPlacement) {
70
- if (!domElement)
71
- return;
72
- const stableId = getStableId(domElement);
73
- if (movedElements.has(stableId)) {
74
- return;
75
- }
76
- const elementIdentifier = buildElementIdentifier(domElement);
77
- movedElements.set(stableId, {
78
- stableId,
79
- element: elementIdentifier,
80
- });
81
- }
82
- function getDiff() {
83
- const diffs = [];
84
- for (const [stableId, tracked] of movedElements) {
85
- const element = findByStableId(stableId);
86
- const originalPlacement = initialSnapshot.get(stableId);
87
- if (!element) {
88
- if (originalPlacement) {
89
- diffs.push({
90
- element: tracked.element,
91
- type: 'removed',
92
- from: originalPlacement,
93
- to: originalPlacement,
94
- });
95
- }
96
- continue;
97
- }
98
- if (!originalPlacement)
99
- continue;
100
- const currentPlacement = buildPlacementTarget(element);
101
- if (!currentPlacement)
102
- continue;
103
- if (!placementsEqual(originalPlacement, currentPlacement)) {
104
- diffs.push({
105
- element: tracked.element,
106
- type: 'moved',
107
- from: originalPlacement,
108
- to: currentPlacement,
109
- });
110
- }
111
- }
112
- return diffs;
113
- }
114
- function hasChanges() {
115
- return movedElements.size > 0;
116
- }
117
- function clearAll() {
118
- movedElements.clear();
119
- }
120
- function getTrackedCount() {
121
- return movedElements.size;
122
- }
123
- if (typeof window !== 'undefined') {
124
- window.__diffState = { getDiff, hasChanges, getTrackedCount, movedElements, initialSnapshot };
125
- }
126
- return {
127
- snapshotInitialState,
128
- trackElement,
129
- getDiff,
130
- hasChanges,
131
- clearAll,
132
- getTrackedCount,
133
- };
134
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"drag-engine.d.ts","sourceRoot":"","sources":["../../src/builder/drag-engine.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAA6B,MAAM,iBAAiB,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,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;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,KAAK,UAAU,GAAG,IAAI,CAAC;CAC1F;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,UAAU,CAixBrE"}