@embeddables/cli 0.15.0 → 0.15.1-beta.1

package/dist/workbench/useComponentSelection.js

@@ -0,0 +1,203 @@
+/**
+ * Shared hook for component selection/inspection used by InspectorPanel and FeedbackPanel.
+ * Extracts getComponentIdFromElement, findFlowComponentAncestor, findComponentById,
+ * findPageById, and the inspecting/selection flow (overlay, click handlers).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+/** Extract component ID from element's cid-* class. */
+export function getComponentIdFromElement(el) {
+    for (const cls of el.classList) {
+        if (cls.startsWith('cid-')) {
+            return cls.slice(4);
+        }
+    }
+    return null;
+}
+/** Find the nearest ancestor with Flow-Component class. */
+export function findFlowComponentAncestor(el) {
+    let current = el;
+    while (current) {
+        if (current.classList.contains('Flow-Component')) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/** Recursively search a component and its children (e.g. Container.components). */
+function searchComponentTree(comp, componentId) {
+    if (comp.id === componentId)
+        return comp;
+    const children = comp.components;
+    if (Array.isArray(children)) {
+        for (const child of children) {
+            const found = searchComponentTree(child, componentId);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+/** Find a component by ID in flow JSON (global, page, or nested in Container). */
+export function findComponentById(flowJson, componentId) {
+    for (const comp of flowJson.components ?? []) {
+        const found = searchComponentTree(comp, componentId);
+        if (found)
+            return found;
+    }
+    for (const page of flowJson.pages ?? []) {
+        for (const comp of page.components ?? []) {
+            const found = searchComponentTree(comp, componentId);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+/** Find a page by ID in flow JSON. */
+export function findPageById(flowJson, pageId) {
+    for (const page of flowJson.pages ?? []) {
+        if (page.id === pageId)
+            return page;
+    }
+    return null;
+}
+/**
+ * Hook that provides component selection logic for inspecting and selecting
+ * Flow components on the page. Used by InspectorPanel and FeedbackPanel.
+ */
+export function useComponentSelection(embeddableId) {
+    const [state, setState] = useState('idle');
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const [selectedComponentId, setSelectedComponentId] = useState(null);
+    const [error, setError] = useState(null);
+    const overlayRef = useRef(null);
+    const hoveredElementRef = useRef(null);
+    const savvy = window.Savvy;
+    const getOverlay = useCallback(() => {
+        if (!overlayRef.current) {
+            const overlay = document.createElement('div');
+            // No id to avoid DOM uniqueness conflict when InspectorPanel and FeedbackPanel both mount
+            overlay.style.cssText = `
+        position: fixed;
+        pointer-events: none;
+        background: rgba(59, 130, 246, 0.15);
+        border: 2px solid rgba(59, 130, 246, 0.8);
+        border-radius: 4px;
+        z-index: 2147483646;
+        transition: all 0.1s ease-out;
+        display: none;
+      `;
+            document.body.appendChild(overlay);
+            overlayRef.current = overlay;
+        }
+        return overlayRef.current;
+    }, []);
+    const positionOverlay = useCallback((el) => {
+        const overlay = getOverlay();
+        if (!el) {
+            overlay.style.display = 'none';
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        overlay.style.display = 'block';
+        overlay.style.top = `${rect.top}px`;
+        overlay.style.left = `${rect.left}px`;
+        overlay.style.width = `${rect.width}px`;
+        overlay.style.height = `${rect.height}px`;
+    }, [getOverlay]);
+    const handlePointerOver = useCallback((e) => {
+        const target = e.target;
+        const flowComponent = findFlowComponentAncestor(target);
+        if (flowComponent && flowComponent !== hoveredElementRef.current) {
+            hoveredElementRef.current = flowComponent;
+            positionOverlay(flowComponent);
+        }
+        else if (!flowComponent && hoveredElementRef.current) {
+            hoveredElementRef.current = null;
+            positionOverlay(null);
+        }
+    }, [positionOverlay]);
+    const handleClick = useCallback((e) => {
+        const target = e.target;
+        const flowComponent = findFlowComponentAncestor(target);
+        if (!flowComponent)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const componentId = getComponentIdFromElement(flowComponent);
+        if (!componentId) {
+            setError('Could not find component ID (cid-*) class on element.');
+            return;
+        }
+        if (!savvy?.getFlowJson) {
+            setError('window.Savvy.getFlowJson is not available.');
+            return;
+        }
+        const flowJson = savvy.getFlowJson(embeddableId);
+        if (!flowJson) {
+            setError('Could not retrieve flow JSON.');
+            return;
+        }
+        const component = findComponentById(flowJson, componentId);
+        if (!component) {
+            setError(`Component with ID "${componentId}" not found in flow JSON.`);
+            return;
+        }
+        setSelectedComponentId(componentId);
+        setSelectedComponent(component);
+        setError(null);
+        setState('selected');
+        positionOverlay(null);
+        hoveredElementRef.current = null;
+    }, [embeddableId, positionOverlay, savvy]);
+    const startInspecting = useCallback(() => {
+        setError(null);
+        setState('inspecting');
+    }, []);
+    const stopInspecting = useCallback(() => {
+        setState('idle');
+        positionOverlay(null);
+        hoveredElementRef.current = null;
+    }, [positionOverlay]);
+    const clearSelection = useCallback(() => {
+        setSelectedComponent(null);
+        setSelectedComponentId(null);
+        setState('idle');
+    }, []);
+    const inspectAnother = useCallback(() => {
+        setError(null);
+        setState('inspecting');
+    }, []);
+    useEffect(() => {
+        if (state === 'inspecting') {
+            document.addEventListener('pointerover', handlePointerOver, true);
+            document.addEventListener('click', handleClick, true);
+            return () => {
+                document.removeEventListener('pointerover', handlePointerOver, true);
+                document.removeEventListener('click', handleClick, true);
+                positionOverlay(null);
+            };
+        }
+    }, [state, handlePointerOver, handleClick, positionOverlay]);
+    useEffect(() => {
+        return () => {
+            if (overlayRef.current) {
+                overlayRef.current.remove();
+                overlayRef.current = null;
+            }
+        };
+    }, []);
+    return {
+        state,
+        selectedComponent,
+        selectedComponentId,
+        error,
+        startInspecting,
+        stopInspecting,
+        clearSelection,
+        inspectAnother,
+        setError,
+    };
+}
+//# sourceMappingURL=useComponentSelection.js.map

package/dist/workbench/useComponentSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentSelection.js","sourceRoot":"","sources":["../../src/workbench/useComponentSelection.ts"],"names":[],"mappings":"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"}