@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/core/yjsCollaboration.js

@@ -1,315 +1,263 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-
-/**
- * yjsCollaboration.ts — Yjs/CRDT-based collaborative editing adapter
- *
- * Features:
- * - CRDT-based conflict-free state synchronization
- * - YMap, YArray, YText document structure for canvas state
- * - Awareness protocol for cursors, selections, presence
- * - Undo/Redo manager with CRDT-based tracking
- * - Offline support with automatic conflict resolution on reconnect
- * - Pluggable providers: WebSocket, WebRTC, IndexedDB persistence
- *
- * This module can be used standalone or as a transport for the existing
- * CollaborationTransport interface in collaboration.ts.
- */
-/* ── CRDT Operations ── */
-/**
- * Apply a canvas object change to the CRDT doc.
- * All changes propagate automatically to peers.
- */
+import { useState, useRef, useEffect, useCallback } from "react";
 function applyObjectChange(objectsMap, objectId, changes, doc) {
-    doc.transact(() => {
-        const existing = objectsMap.get(objectId);
-        if (existing) {
-            const updated = { ...existing, ...changes };
-            objectsMap.set(objectId, updated);
-        }
-    });
+  doc.transact(() => {
+    const existing = objectsMap.get(objectId);
+    if (existing) {
+      const updated = { ...existing, ...changes };
+      objectsMap.set(objectId, updated);
+    }
+  });
 }
-/**
- * Add a new object to the CRDT document.
- */
 function addObject(objectsMap, object, doc) {
-    doc.transact(() => {
-        objectsMap.set(object.id, { ...object });
-    });
+  doc.transact(() => {
+    objectsMap.set(object.id, { ...object });
+  });
 }
-/**
- * Remove an object from the CRDT document.
- */
 function removeObject(objectsMap, objectId, doc) {
-    doc.transact(() => {
-        objectsMap.delete(objectId);
-    });
+  doc.transact(() => {
+    objectsMap.delete(objectId);
+  });
 }
-/**
- * Batch update multiple objects atomically.
- */
 function batchUpdate(objectsMap, updates, doc) {
-    doc.transact(() => {
-        for (const { id, changes } of updates) {
-            const existing = objectsMap.get(id);
-            if (existing) {
-                objectsMap.set(id, { ...existing, ...changes });
-            }
-        }
-    });
+  doc.transact(() => {
+    for (const { id, changes } of updates) {
+      const existing = objectsMap.get(id);
+      if (existing) {
+        objectsMap.set(id, { ...existing, ...changes });
+      }
+    }
+  });
 }
-/* ── Awareness Helpers ── */
-/**
- * Update local cursor position in awareness.
- */
 function updateCursor(awareness, x, y) {
-    awareness.setLocalStateField('cursor', { x, y });
-    awareness.setLocalStateField('lastSeen', Date.now());
+  awareness.setLocalStateField("cursor", { x, y });
+  awareness.setLocalStateField("lastSeen", Date.now());
 }
-/**
- * Update local selection in awareness.
- */
 function updateSelection(awareness, selectedIds) {
-    awareness.setLocalStateField('selection', selectedIds);
+  awareness.setLocalStateField("selection", selectedIds);
 }
-/**
- * Get all remote presences (excluding self).
- */
 function getRemotePresences(awareness, localClientId) {
-    const presences = [];
-    awareness.getStates().forEach((state, clientId) => {
-        if (clientId !== localClientId && state.userId) {
-            presences.push(state);
-        }
-    });
-    return presences;
+  const presences = [];
+  awareness.getStates().forEach((state, clientId) => {
+    if (clientId !== localClientId && state.userId) {
+      presences.push(state);
+    }
+  });
+  return presences;
 }
-/**
- * React hook for Yjs/CRDT-based collaborative canvas editing.
- *
- * Requires yjs and a provider (e.g., y-websocket) as peer dependencies.
- * Falls back gracefully if yjs is not installed — returns a local-only state.
- */
 function useYjsCollaboration(config) {
-    const [objects, setObjects] = useState([]);
-    const [presence, _setPresence] = useState([]);
-    const [isConnected, setIsConnected] = useState(false);
-    const [isSynced, setIsSynced] = useState(false);
-    const [canUndo, setCanUndo] = useState(false);
-    const [canRedo, setCanRedo] = useState(false);
-    const docRef = useRef(null);
-    const awarenessRef = useRef(null);
-    const undoRef = useRef(null);
-    const objectsMapRef = useRef(null);
-    const providerRef = useRef(null);
-    // Initialize Yjs doc and provider
-    useEffect(() => {
-        let cancelled = false;
-        async function init() {
-            var _a, _b;
-            try {
-                // Dynamic import — allows the package to be optional
-                const Y = await import('../node_modules/yjs/dist/yjs.js');
-                const doc = new Y.Doc();
-                docRef.current = doc;
-                const objectsMap = doc.getMap('objects');
-                objectsMapRef.current = objectsMap;
-                const awarenessLike = {
-                    _localState: {
-                        userId: config.userId,
-                        userName: config.userName,
-                        color: config.userColor,
-                        cursor: null,
-                        selection: [],
-                        activeTool: 'select',
-                        isTyping: false,
-                        lastSeen: Date.now(),
-                    },
-                    _states: new Map(),
-                    _listeners: new Map(),
-                    setLocalState(state) {
-                        this._localState = state;
-                    },
-                    setLocalStateField(field, value) {
-                        const self = this;
-                        if (self._localState) {
-                            self._localState[field] = value;
-                        }
-                    },
-                    getLocalState() {
-                        return this._localState;
-                    },
-                    getStates() {
-                        return this._states;
-                    },
-                    on(event, handler) {
-                        const self = this;
-                        if (!self._listeners.has(event)) {
-                            self._listeners.set(event, new Set());
-                        }
-                        self._listeners.get(event).add(handler);
-                    },
-                    off(event, handler) {
-                        var _a;
-                        (_a = this._listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(handler);
-                    },
-                    destroy() {
-                        this._listeners.clear();
-                    },
-                };
-                awarenessRef.current = awarenessLike;
-                // Setup undo manager
-                try {
-                    const undoMgr = new Y.UndoManager(objectsMap);
-                    undoRef.current = undoMgr;
-                    undoMgr.on('stack-item-added', () => {
-                        if (!cancelled) {
-                            setCanUndo(undoMgr.canUndo());
-                            setCanRedo(undoMgr.canRedo());
-                        }
-                    });
-                }
-                catch (_c) {
-                    // UndoManager may not be available in all Yjs versions
-                }
-                // Observe changes
-                objectsMap.observe(() => {
-                    if (!cancelled) {
-                        const objs = [];
-                        objectsMap.entries();
-                        const json = objectsMap.toJSON();
-                        for (const val of Object.values(json)) {
-                            if (val && typeof val === 'object' && 'id' in val) {
-                                objs.push(val);
-                            }
-                        }
-                        objs.sort((a, b) => a.zIndex - b.zIndex);
-                        setObjects(objs);
-                    }
-                });
-                // Connect provider
-                if (config.provider.type === 'websocket' && config.provider.serverUrl) {
-                    try {
-                        const wsModule = await import('../node_modules/y-websocket/src/y-websocket.js');
-                        const provider = new wsModule.WebsocketProvider(config.provider.serverUrl, config.provider.roomId, doc);
-                        providerRef.current = provider;
-                        const providerWithEvents = provider;
-                        (_a = providerWithEvents.on) === null || _a === void 0 ? void 0 : _a.call(providerWithEvents, 'status', (e) => {
-                            if (!cancelled) {
-                                setIsConnected(e.status === 'connected');
-                            }
-                        });
-                        (_b = providerWithEvents.on) === null || _b === void 0 ? void 0 : _b.call(providerWithEvents, 'sync', (synced) => {
-                            if (!cancelled) {
-                                setIsSynced(synced);
-                            }
-                        });
-                    }
-                    catch (_d) {
-                        // y-websocket not installed — local-only mode
-                        setIsConnected(false);
-                        setIsSynced(true);
-                    }
-                }
-                else {
-                    setIsConnected(false);
-                    setIsSynced(true);
-                }
+  const [objects, setObjects] = useState([]);
+  const [presence, _setPresence] = useState([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isSynced, setIsSynced] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const docRef = useRef(null);
+  const awarenessRef = useRef(null);
+  const undoRef = useRef(null);
+  const objectsMapRef = useRef(null);
+  const providerRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      try {
+        const Y = await import("../node_modules/yjs/dist/yjs.js");
+        const doc = new Y.Doc();
+        docRef.current = doc;
+        const objectsMap = doc.getMap("objects");
+        objectsMapRef.current = objectsMap;
+        const awarenessLike = {
+          _localState: {
+            userId: config.userId,
+            userName: config.userName,
+            color: config.userColor,
+            cursor: null,
+            selection: [],
+            activeTool: "select",
+            isTyping: false,
+            lastSeen: Date.now()
+          },
+          _states: /* @__PURE__ */ new Map(),
+          _listeners: /* @__PURE__ */ new Map(),
+          setLocalState(state) {
+            this._localState = state;
+          },
+          setLocalStateField(field, value) {
+            const self = this;
+            if (self._localState) {
+              self._localState[field] = value;
             }
-            catch (_e) {
-                // yjs not installed — local-only fallback
-                setIsConnected(false);
-                setIsSynced(true);
+          },
+          getLocalState() {
+            return this._localState;
+          },
+          getStates() {
+            return this._states;
+          },
+          on(event, handler) {
+            const self = this;
+            if (!self._listeners.has(event)) {
+              self._listeners.set(event, /* @__PURE__ */ new Set());
             }
-        }
-        init();
-        return () => {
-            var _a, _b, _c, _d;
-            cancelled = true;
-            (_a = providerRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-            (_b = awarenessRef.current) === null || _b === void 0 ? void 0 : _b.destroy();
-            (_c = undoRef.current) === null || _c === void 0 ? void 0 : _c.destroy();
-            (_d = docRef.current) === null || _d === void 0 ? void 0 : _d.destroy();
+            self._listeners.get(event).add(handler);
+          },
+          off(event, handler) {
+            this._listeners.get(event)?.delete(handler);
+          },
+          destroy() {
+            this._listeners.clear();
+          }
         };
-    }, [
-        config.provider.roomId,
-        config.provider.serverUrl,
-        config.provider.type,
-        config.userId,
-        config.userName,
-        config.userColor,
-    ]);
-    const addObjectFn = useCallback((obj) => {
-        if (objectsMapRef.current && docRef.current) {
-            addObject(objectsMapRef.current, obj, docRef.current);
-        }
-        else {
-            // Local-only fallback
-            setObjects((prev) => [...prev, obj].sort((a, b) => a.zIndex - b.zIndex));
-        }
-    }, []);
-    const updateObjectFn = useCallback((id, changes) => {
-        if (objectsMapRef.current && docRef.current) {
-            applyObjectChange(objectsMapRef.current, id, changes, docRef.current);
-        }
-        else {
-            setObjects((prev) => prev.map((o) => (o.id === id ? { ...o, ...changes } : o)));
-        }
-    }, []);
-    const removeObjectFn = useCallback((id) => {
-        if (objectsMapRef.current && docRef.current) {
-            removeObject(objectsMapRef.current, id, docRef.current);
-        }
-        else {
-            setObjects((prev) => prev.filter((o) => o.id !== id));
-        }
-    }, []);
-    const batchUpdateFn = useCallback((updates) => {
-        if (objectsMapRef.current && docRef.current) {
-            batchUpdate(objectsMapRef.current, updates, docRef.current);
+        awarenessRef.current = awarenessLike;
+        try {
+          const undoMgr = new Y.UndoManager(objectsMap);
+          undoRef.current = undoMgr;
+          undoMgr.on("stack-item-added", () => {
+            if (!cancelled) {
+              setCanUndo(undoMgr.canUndo());
+              setCanRedo(undoMgr.canRedo());
+            }
+          });
+        } catch {
         }
-        else {
-            setObjects((prev) => {
-                const map = new Map(prev.map((o) => [o.id, o]));
-                for (const { id, changes } of updates) {
-                    const existing = map.get(id);
-                    if (existing) {
-                        map.set(id, { ...existing, ...changes });
-                    }
-                }
-                return [...map.values()].sort((a, b) => a.zIndex - b.zIndex);
+        objectsMap.observe(() => {
+          if (!cancelled) {
+            const objs = [];
+            objectsMap.entries();
+            const json = objectsMap.toJSON();
+            for (const val of Object.values(json)) {
+              if (val && typeof val === "object" && "id" in val) {
+                objs.push(val);
+              }
+            }
+            objs.sort((a, b) => a.zIndex - b.zIndex);
+            setObjects(objs);
+          }
+        });
+        if (config.provider.type === "websocket" && config.provider.serverUrl) {
+          try {
+            const wsModule = await import("../node_modules/y-websocket/src/y-websocket.js");
+            const provider = new wsModule.WebsocketProvider(
+              config.provider.serverUrl,
+              config.provider.roomId,
+              doc
+            );
+            providerRef.current = provider;
+            const providerWithEvents = provider;
+            providerWithEvents.on?.("status", (e) => {
+              if (!cancelled) {
+                setIsConnected(e.status === "connected");
+              }
             });
+            providerWithEvents.on?.("sync", (synced) => {
+              if (!cancelled) {
+                setIsSynced(synced);
+              }
+            });
+          } catch {
+            setIsConnected(false);
+            setIsSynced(true);
+          }
+        } else {
+          setIsConnected(false);
+          setIsSynced(true);
         }
-    }, []);
-    const updateCursorFn = useCallback((x, y) => {
-        if (awarenessRef.current) {
-            updateCursor(awarenessRef.current, x, y);
-        }
-    }, []);
-    const updateSelectionFn = useCallback((ids) => {
-        if (awarenessRef.current) {
-            updateSelection(awarenessRef.current, ids);
-        }
-    }, []);
-    const undoFn = useCallback(() => {
-        var _a;
-        (_a = undoRef.current) === null || _a === void 0 ? void 0 : _a.undo();
-    }, []);
-    const redoFn = useCallback(() => {
-        var _a;
-        (_a = undoRef.current) === null || _a === void 0 ? void 0 : _a.redo();
-    }, []);
-    return {
-        state: { objects, presence, canUndo, canRedo, isConnected, isSynced },
-        addObject: addObjectFn,
-        updateObject: updateObjectFn,
-        removeObject: removeObjectFn,
-        batchUpdate: batchUpdateFn,
-        updateCursor: updateCursorFn,
-        updateSelection: updateSelectionFn,
-        undo: undoFn,
-        redo: redoFn,
-        isConnected,
+      } catch {
+        setIsConnected(false);
+        setIsSynced(true);
+      }
+    }
+    init();
+    return () => {
+      cancelled = true;
+      providerRef.current?.destroy();
+      awarenessRef.current?.destroy();
+      undoRef.current?.destroy();
+      docRef.current?.destroy();
     };
+  }, [
+    config.provider.roomId,
+    config.provider.serverUrl,
+    config.provider.type,
+    config.userId,
+    config.userName,
+    config.userColor
+  ]);
+  const addObjectFn = useCallback((obj) => {
+    if (objectsMapRef.current && docRef.current) {
+      addObject(objectsMapRef.current, obj, docRef.current);
+    } else {
+      setObjects((prev) => [...prev, obj].sort((a, b) => a.zIndex - b.zIndex));
+    }
+  }, []);
+  const updateObjectFn = useCallback((id, changes) => {
+    if (objectsMapRef.current && docRef.current) {
+      applyObjectChange(objectsMapRef.current, id, changes, docRef.current);
+    } else {
+      setObjects((prev) => prev.map((o) => o.id === id ? { ...o, ...changes } : o));
+    }
+  }, []);
+  const removeObjectFn = useCallback((id) => {
+    if (objectsMapRef.current && docRef.current) {
+      removeObject(objectsMapRef.current, id, docRef.current);
+    } else {
+      setObjects((prev) => prev.filter((o) => o.id !== id));
+    }
+  }, []);
+  const batchUpdateFn = useCallback(
+    (updates) => {
+      if (objectsMapRef.current && docRef.current) {
+        batchUpdate(objectsMapRef.current, updates, docRef.current);
+      } else {
+        setObjects((prev) => {
+          const map = new Map(prev.map((o) => [o.id, o]));
+          for (const { id, changes } of updates) {
+            const existing = map.get(id);
+            if (existing) {
+              map.set(id, { ...existing, ...changes });
+            }
+          }
+          return [...map.values()].sort((a, b) => a.zIndex - b.zIndex);
+        });
+      }
+    },
+    []
+  );
+  const updateCursorFn = useCallback((x, y) => {
+    if (awarenessRef.current) {
+      updateCursor(awarenessRef.current, x, y);
+    }
+  }, []);
+  const updateSelectionFn = useCallback((ids) => {
+    if (awarenessRef.current) {
+      updateSelection(awarenessRef.current, ids);
+    }
+  }, []);
+  const undoFn = useCallback(() => {
+    undoRef.current?.undo();
+  }, []);
+  const redoFn = useCallback(() => {
+    undoRef.current?.redo();
+  }, []);
+  return {
+    state: { objects, presence, canUndo, canRedo, isConnected, isSynced },
+    addObject: addObjectFn,
+    updateObject: updateObjectFn,
+    removeObject: removeObjectFn,
+    batchUpdate: batchUpdateFn,
+    updateCursor: updateCursorFn,
+    updateSelection: updateSelectionFn,
+    undo: undoFn,
+    redo: redoFn,
+    isConnected
+  };
 }
-
-export { addObject, applyObjectChange, batchUpdate, getRemotePresences, removeObject, updateCursor, updateSelection, useYjsCollaboration };
+export {
+  addObject,
+  applyObjectChange,
+  batchUpdate,
+  getRemotePresences,
+  removeObject,
+  updateCursor,
+  updateSelection,
+  useYjsCollaboration
+};

package/dist/esm/design/design-tools.js

@@ -1,23 +1,15 @@
-/**
- * UI/UX Design Tools — Wireframes, mockups, prototyping,
- * design tokens, component library, responsive preview,
- * handoff, comments, versioning, Figma/Sketch/XD import, code export.
- *
- * PRO-4.6 — 13 items
- *
- * @module @nice2dev/ui-graphics/design/design-tools
- */
 const DEVICE_PRESETS = [
-    { name: 'iPhone 15', width: 393, height: 852, devicePixelRatio: 3, type: 'phone' },
-    { name: 'iPhone 15 Pro Max', width: 430, height: 932, devicePixelRatio: 3, type: 'phone' },
-    { name: 'Samsung Galaxy S24', width: 360, height: 780, devicePixelRatio: 3, type: 'phone' },
-    { name: 'Pixel 8', width: 412, height: 915, devicePixelRatio: 2.625, type: 'phone' },
-    { name: 'iPad Air', width: 820, height: 1180, devicePixelRatio: 2, type: 'tablet' },
-    { name: 'iPad Pro 12.9"', width: 1024, height: 1366, devicePixelRatio: 2, type: 'tablet' },
-    { name: 'MacBook Pro 14"', width: 1512, height: 982, devicePixelRatio: 2, type: 'desktop' },
-    { name: 'Desktop 1080p', width: 1920, height: 1080, devicePixelRatio: 1, type: 'desktop' },
-    { name: 'Desktop 4K', width: 3840, height: 2160, devicePixelRatio: 2, type: 'desktop' },
-    { name: 'Apple Watch Ultra', width: 205, height: 251, devicePixelRatio: 2, type: 'watch' },
+  { name: "iPhone 15", width: 393, height: 852, devicePixelRatio: 3, type: "phone" },
+  { name: "iPhone 15 Pro Max", width: 430, height: 932, devicePixelRatio: 3, type: "phone" },
+  { name: "Samsung Galaxy S24", width: 360, height: 780, devicePixelRatio: 3, type: "phone" },
+  { name: "Pixel 8", width: 412, height: 915, devicePixelRatio: 2.625, type: "phone" },
+  { name: "iPad Air", width: 820, height: 1180, devicePixelRatio: 2, type: "tablet" },
+  { name: 'iPad Pro 12.9"', width: 1024, height: 1366, devicePixelRatio: 2, type: "tablet" },
+  { name: 'MacBook Pro 14"', width: 1512, height: 982, devicePixelRatio: 2, type: "desktop" },
+  { name: "Desktop 1080p", width: 1920, height: 1080, devicePixelRatio: 1, type: "desktop" },
+  { name: "Desktop 4K", width: 3840, height: 2160, devicePixelRatio: 2, type: "desktop" },
+  { name: "Apple Watch Ultra", width: 205, height: 251, devicePixelRatio: 2, type: "watch" }
 ];
-
-export { DEVICE_PRESETS };
+export {
+  DEVICE_PRESETS
+};