dynim-core 1.0.0

package/dist/builder/element-utils.js

@@ -0,0 +1,227 @@
+/**
+ * Element utilities - Stable IDs and element identification
+ */
+export const STABLE_ID_ATTR = 'data-sdesign-id';
+export const VISIBILITY_ATTR = 'vis';
+export function getVisibilityBoundary(element) {
+    let current = element;
+    while (current && current !== document.body) {
+        const visAttr = current.getAttribute(VISIBILITY_ATTR);
+        if (visAttr === 'false') {
+            return current;
+        }
+        if (visAttr === 'true') {
+            return null;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+export function canDropInZone(sourceElement, targetElement) {
+    const sourceBoundary = getVisibilityBoundary(sourceElement);
+    const targetBoundary = getVisibilityBoundary(targetElement);
+    if (sourceBoundary !== null) {
+        return false;
+    }
+    if (targetBoundary !== null) {
+        return false;
+    }
+    return true;
+}
+function generateId(length = 10) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+export function getStableId(element) {
+    const existingId = element.getAttribute(STABLE_ID_ATTR);
+    if (existingId) {
+        return existingId;
+    }
+    const newId = generateId(10);
+    element.setAttribute(STABLE_ID_ATTR, newId);
+    return newId;
+}
+export function findByStableId(id, root = document.body) {
+    return root.querySelector(`[${STABLE_ID_ATTR}="${id}"]`);
+}
+export function getDomPath(element, root) {
+    const path = [];
+    let current = element;
+    while (current && current !== root && current.parentElement) {
+        const parent = current.parentElement;
+        const index = Array.from(parent.children).indexOf(current);
+        path.unshift(index);
+        current = parent;
+    }
+    return path;
+}
+export function getElementAtPath(path, root) {
+    let current = root;
+    for (const index of path) {
+        if (!current || !current.children[index]) {
+            return null;
+        }
+        current = current.children[index];
+    }
+    return current;
+}
+export function getRelevantStyles(el) {
+    const cs = window.getComputedStyle(el);
+    const props = [
+        'display', 'position', 'width', 'height',
+        'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+        'backgroundColor', 'color',
+        'borderWidth', 'borderStyle', 'borderColor', 'borderRadius',
+        'boxShadow', 'opacity', 'zIndex', 'overflow',
+        'flexDirection', 'justifyContent', 'alignItems', 'gap',
+        'cursor'
+    ];
+    const styles = {};
+    for (const p of props) {
+        const kebabCase = p.replace(/([A-Z])/g, '-$1').toLowerCase();
+        const value = cs.getPropertyValue(kebabCase);
+        if (value)
+            styles[p] = value;
+    }
+    return styles;
+}
+export function serializeRect(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left
+    };
+}
+function getNthOfType(element) {
+    const parent = element.parentElement;
+    if (!parent)
+        return 1;
+    const tagName = element.tagName;
+    let index = 0;
+    for (const child of Array.from(parent.children)) {
+        if (child.tagName === tagName) {
+            index++;
+            if (child === element)
+                return index;
+        }
+    }
+    return index;
+}
+function getDirectTextContent(element) {
+    let text = '';
+    for (const node of Array.from(element.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent || '';
+        }
+    }
+    return text.trim();
+}
+function getAttributeHints(element) {
+    const hints = {};
+    const importantAttrs = ['href', 'src', 'name', 'type', 'role', 'aria-label', 'data-testid'];
+    for (const attr of importantAttrs) {
+        const value = element.getAttribute(attr);
+        if (value) {
+            hints[attr] = value;
+        }
+    }
+    for (const attr of Array.from(element.attributes)) {
+        if (attr.name.startsWith('data-') && !attr.name.startsWith('data-sdesign-')) {
+            hints[attr.name] = attr.value;
+        }
+    }
+    return hints;
+}
+export function buildElementIdentifier(element, maxDepth = 3) {
+    const identifier = {
+        tagName: element.tagName.toLowerCase(),
+        classes: Array.from(element.classList).filter(c => {
+            return !c.match(/^(hover:|focus:|active:|disabled:|sm:|md:|lg:|xl:|2xl:)/);
+        }),
+        nthOfType: getNthOfType(element),
+        attributeHints: getAttributeHints(element)
+    };
+    if (element.id) {
+        identifier.id = element.id;
+    }
+    const textContent = getDirectTextContent(element);
+    if (textContent) {
+        identifier.textContentPreview = textContent.slice(0, 50);
+    }
+    if (maxDepth > 0 && element.parentElement && element.parentElement !== document.body) {
+        identifier.parentIdentifier = buildElementIdentifier(element.parentElement, maxDepth - 1);
+    }
+    return identifier;
+}
+export function buildPlacementTarget(element) {
+    const parent = element.parentElement;
+    if (!parent)
+        return null;
+    const siblings = Array.from(parent.children);
+    const index = siblings.indexOf(element);
+    const parentStableId = getStableId(parent);
+    if (index === 0) {
+        return {
+            parent: buildElementIdentifier(parent),
+            parentStableId,
+            position: 'prepend'
+        };
+    }
+    else if (index === siblings.length - 1) {
+        return {
+            parent: buildElementIdentifier(parent),
+            parentStableId,
+            position: 'append'
+        };
+    }
+    else {
+        const prevSibling = siblings[index - 1];
+        return {
+            parent: buildElementIdentifier(parent),
+            parentStableId,
+            position: 'after',
+            referenceElement: buildElementIdentifier(prevSibling),
+            referenceStableId: getStableId(prevSibling)
+        };
+    }
+}
+const MAX_VISIBLE_CONTENT_SIZE = 10 * 1024; // 10KB limit
+export function getVisibleContent() {
+    const text = [];
+    let totalSize = 0;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
+    while (walker.nextNode()) {
+        const node = walker.currentNode;
+        const el = node.parentElement;
+        if (!el)
+            continue;
+        const rect = el.getBoundingClientRect();
+        const style = getComputedStyle(el);
+        const inViewport = (rect.top < window.innerHeight &&
+            rect.bottom > 0 &&
+            rect.left < window.innerWidth &&
+            rect.right > 0);
+        const isVisible = (style.display !== 'none' &&
+            style.visibility !== 'hidden' &&
+            style.opacity !== '0');
+        const content = node.textContent?.trim();
+        if (inViewport && isVisible && content) {
+            if (totalSize + content.length > MAX_VISIBLE_CONTENT_SIZE) {
+                break;
+            }
+            text.push(content);
+            totalSize += content.length;
+        }
+    }
+    return text;
+}

package/dist/builder/fiber-capture.d.ts

@@ -0,0 +1,28 @@
+/**
+ * React Fiber Capture - Extracts React component tree with source code
+ * Works with any React app by accessing React's internal fiber structure
+ */
+interface Fiber {
+    tag: number;
+    type: unknown;
+    memoizedProps?: Record<string, unknown>;
+    child?: Fiber;
+    sibling?: Fiber;
+    return?: Fiber;
+}
+interface ReactTreeNode {
+    type: string;
+    name: string;
+    source?: string;
+    props?: Record<string, unknown>;
+    children?: ReactTreeNode[];
+}
+export declare function getFiberFromDOM(domNode: HTMLElement): Fiber | null;
+export declare function getFiberRoot(container: HTMLElement): Fiber | null;
+export interface CaptureOptions {
+    maxDepth?: number;
+    includeSource?: boolean;
+}
+export declare function captureReactTree(rootElement: HTMLElement, options?: CaptureOptions): ReactTreeNode | null;
+export {};
+//# sourceMappingURL=fiber-capture.d.ts.map

package/dist/builder/fiber-capture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fiber-capture.d.ts","sourceRoot":"","sources":["../../src/builder/fiber-capture.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CAQlE;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CASjE;AA+LD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,OAAO,GAAE,cAAmB,GAAG,aAAa,GAAG,IAAI,CAiF7G"}

package/dist/builder/fiber-capture.js

@@ -0,0 +1,264 @@
+/**
+ * React Fiber Capture - Extracts React component tree with source code
+ * Works with any React app by accessing React's internal fiber structure
+ */
+export function getFiberFromDOM(domNode) {
+    if (!domNode)
+        return null;
+    const fiberKey = Object.keys(domNode).find((key) => key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$'));
+    return fiberKey ? domNode[fiberKey] : null;
+}
+export function getFiberRoot(container) {
+    const fiber = getFiberFromDOM(container);
+    if (!fiber)
+        return null;
+    let current = fiber;
+    while (current.return) {
+        current = current.return;
+    }
+    return current;
+}
+function getFiberName(fiber) {
+    if (!fiber || !fiber.type)
+        return 'Unknown';
+    const { type } = fiber;
+    if (typeof type === 'string')
+        return type;
+    if (typeof type === 'function') {
+        return type.displayName ||
+            type.name || 'Anonymous';
+    }
+    const typeObj = type;
+    if (typeObj.$$typeof) {
+        const symbolString = typeObj.$$typeof.toString();
+        if (symbolString.includes('memo')) {
+            const innerType = typeObj.type;
+            if (typeof typeObj.type === 'function' && innerType) {
+                return `Memo(${innerType.displayName || innerType.name || 'Anonymous'})`;
+            }
+            return 'Memo';
+        }
+        if (symbolString.includes('forward_ref')) {
+            const render = typeObj.render;
+            if (typeof typeObj.render === 'function' && render) {
+                return `ForwardRef(${render.displayName || render.name || 'Anonymous'})`;
+            }
+            return 'ForwardRef';
+        }
+        if (symbolString.includes('context')) {
+            return typeObj.displayName || 'Context';
+        }
+        if (symbolString.includes('provider')) {
+            return typeObj._context?.displayName
+                ? `${typeObj._context.displayName}.Provider`
+                : 'Provider';
+        }
+    }
+    return typeObj.displayName ||
+        typeObj.name || 'Unknown';
+}
+function getFiberType(fiber) {
+    if (!fiber)
+        return 'other';
+    const { tag } = fiber;
+    if (tag === 5)
+        return 'host';
+    if (tag === 6)
+        return 'text';
+    if (tag === 0)
+        return 'function';
+    if (tag === 1)
+        return 'class';
+    if (tag === 7)
+        return 'fragment';
+    if (tag === 10 || tag === 9)
+        return 'context';
+    if (tag === 13)
+        return 'suspense';
+    if (tag === 14 || tag === 15)
+        return 'memo';
+    if (tag === 11)
+        return 'forward_ref';
+    return 'other';
+}
+function extractComponentSource(fiber) {
+    if (!fiber || !fiber.type)
+        return null;
+    const { type } = fiber;
+    try {
+        if (typeof type === 'function') {
+            const source = type.toString();
+            return source.length > 50000 ? source.slice(0, 50000) + '\n// ... (truncated)' : source;
+        }
+        const typeObj = type;
+        if (typeObj.$$typeof) {
+            const symbolString = typeObj.$$typeof.toString();
+            if (symbolString.includes('memo') && typeObj.type && typeof typeObj.type === 'function') {
+                const source = typeObj.type.toString();
+                return source.length > 50000 ? source.slice(0, 50000) + '\n// ... (truncated)' : source;
+            }
+            if (symbolString.includes('forward_ref') && typeObj.render && typeof typeObj.render === 'function') {
+                const source = typeObj.render.toString();
+                return source.length > 50000 ? source.slice(0, 50000) + '\n// ... (truncated)' : source;
+            }
+        }
+        if (typeObj.prototype && typeObj.prototype.isReactComponent) {
+            const source = type.toString();
+            return source.length > 50000 ? source.slice(0, 50000) + '\n// ... (truncated)' : source;
+        }
+    }
+    catch (e) {
+        return `[Error: ${e.message}]`;
+    }
+    return null;
+}
+function sanitizeValue(value, seen = new Set(), depth = 0, maxDepth = 5) {
+    if (value === null || value === undefined)
+        return value;
+    if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'function') {
+        return `[Function: ${value.name || 'anonymous'}]`;
+    }
+    if (typeof value === 'symbol') {
+        return `[Symbol: ${value.description || 'unknown'}]`;
+    }
+    if (depth >= maxDepth) {
+        return '[Max depth]';
+    }
+    if (value instanceof Element) {
+        return `[DOM: ${value.tagName.toLowerCase()}]`;
+    }
+    if (value && value.$$typeof) {
+        return `[ReactElement]`;
+    }
+    if (typeof value === 'object') {
+        if (seen.has(value))
+            return '[Circular]';
+        seen.add(value);
+        if (Array.isArray(value)) {
+            if (value.length > 20)
+                return `[Array: ${value.length} items]`;
+            return value.map((item) => sanitizeValue(item, seen, depth + 1, maxDepth));
+        }
+        const keys = Object.keys(value);
+        if (keys.length > 20)
+            return `[Object: ${keys.length} keys]`;
+        const result = {};
+        for (const key of keys) {
+            if (key.startsWith('_') || key.startsWith('$$'))
+                continue;
+            try {
+                result[key] = sanitizeValue(value[key], seen, depth + 1, maxDepth);
+            }
+            catch {
+                result[key] = '[Error]';
+            }
+        }
+        return result;
+    }
+    return String(value);
+}
+function findReactRoot(startElement) {
+    const selectors = ['#root', '#app', '#__next', '[data-reactroot]', '[data-dynim-capture-root]'];
+    for (const selector of selectors) {
+        const el = startElement.querySelector?.(selector) || document.querySelector(selector);
+        if (el) {
+            const fiber = getFiberFromDOM(el);
+            if (fiber) {
+                console.log('[FiberCapture] Found React root at:', selector);
+                return el;
+            }
+            if (el.firstElementChild) {
+                const childFiber = getFiberFromDOM(el.firstElementChild);
+                if (childFiber) {
+                    console.log('[FiberCapture] Found React root at:', selector, '(first child)');
+                    return el.firstElementChild;
+                }
+            }
+        }
+    }
+    const walker = document.createTreeWalker(startElement, NodeFilter.SHOW_ELEMENT, null);
+    let node = walker.nextNode();
+    while (node) {
+        const fiber = getFiberFromDOM(node);
+        if (fiber) {
+            console.log('[FiberCapture] Found React fiber on:', node.tagName, node.id || node.className);
+            return node;
+        }
+        node = walker.nextNode();
+    }
+    return null;
+}
+export function captureReactTree(rootElement, options = {}) {
+    const { maxDepth = 30, includeSource = true } = options;
+    const reactRoot = findReactRoot(rootElement);
+    if (!reactRoot) {
+        console.warn('[FiberCapture] No React root found in DOM');
+        return null;
+    }
+    const fiber = getFiberFromDOM(reactRoot);
+    if (!fiber) {
+        console.warn('[FiberCapture] No React fiber found on element');
+        return null;
+    }
+    const rootFiber = getFiberRoot(reactRoot);
+    if (!rootFiber) {
+        console.warn('[FiberCapture] Could not find fiber root');
+        return null;
+    }
+    function buildNode(currentFiber, depth) {
+        if (!currentFiber || depth > maxDepth)
+            return null;
+        const fiberType = getFiberType(currentFiber);
+        const name = getFiberName(currentFiber);
+        if (name.startsWith('[') || fiberType === 'text') {
+            if (currentFiber.child) {
+                return buildNode(currentFiber.child, depth);
+            }
+            return null;
+        }
+        const node = {
+            type: fiberType,
+            name,
+        };
+        if (includeSource && (fiberType === 'function' || fiberType === 'class' || fiberType === 'memo' || fiberType === 'forward_ref')) {
+            if (!name.includes('Provider') && !name.includes('Consumer') && !name.includes('Context') && name !== 'Unknown' && name !== 'Anonymous') {
+                const source = extractComponentSource(currentFiber);
+                if (source) {
+                    node.source = source;
+                }
+            }
+        }
+        if (currentFiber.memoizedProps) {
+            const props = { ...currentFiber.memoizedProps };
+            delete props.children;
+            const sanitized = sanitizeValue(props);
+            if (sanitized && Object.keys(sanitized).length > 0) {
+                node.props = sanitized;
+            }
+        }
+        const children = [];
+        if (currentFiber.child) {
+            let childFiber = currentFiber.child;
+            while (childFiber) {
+                const childNode = buildNode(childFiber, depth + 1);
+                if (childNode) {
+                    if (Array.isArray(childNode)) {
+                        children.push(...childNode);
+                    }
+                    else {
+                        children.push(childNode);
+                    }
+                }
+                childFiber = childFiber.sibling;
+            }
+        }
+        if (children.length > 0) {
+            node.children = children;
+        }
+        return node;
+    }
+    return buildNode(rootFiber, 0);
+}

package/dist/builder/freeze-overlay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Page freeze overlay - captures events but allows scrolling
+ * Prevents button clicks, link navigation, form submissions
+ * while allowing drag-and-drop interactions
+ */
+export interface FreezeOverlayConfig {
+    zIndex?: number;
+    onMouseDown?: (e: MouseEvent, el: HTMLElement | null) => void;
+    onMouseMove?: (e: MouseEvent, el: HTMLElement | null) => void;
+    onMouseUp?: (e: MouseEvent, el: HTMLElement | null) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    onClick?: (e: MouseEvent, el: HTMLElement | null) => void;
+    onDoubleClick?: (e: MouseEvent, el: HTMLElement | null) => void;
+    onWheel?: (e: WheelEvent) => void;
+    contentRoot?: HTMLElement;
+}
+export interface FreezeOverlay {
+    element: HTMLDivElement;
+    mount: () => void;
+    unmount: () => void;
+    getElementAt: (x: number, y: number) => HTMLElement | null;
+    setCursor: (cursor: string) => void;
+    getLastHoveredElement: () => HTMLElement | null;
+}
+export declare function createFreezeOverlay(config?: FreezeOverlayConfig): FreezeOverlay;
+//# sourceMappingURL=freeze-overlay.d.ts.map

package/dist/builder/freeze-overlay.d.ts.map

@@ -0,0 +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,CAiQnF"}