@embeddables/cli 0.1.0

package/dist/workbench/InspectorPanel.d.ts

@@ -0,0 +1,6 @@
+type InspectorPanelProps = {
+    embeddableId: string;
+};
+export declare function InspectorPanel({ embeddableId }: InspectorPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InspectorPanel.d.ts.map

package/dist/workbench/InspectorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/InspectorPanel.tsx"],"names":[],"mappings":"AAGA,KAAK,mBAAmB,GAAG;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAmPD,wBAAgB,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAianE"}

package/dist/workbench/InspectorPanel.js

@@ -0,0 +1,341 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+function getComponentIdFromElement(el) {
+    for (const cls of el.classList) {
+        if (cls.startsWith('cid-')) {
+            return cls.slice(4); // Remove 'cid-' prefix
+        }
+    }
+    return null;
+}
+function findFlowComponentAncestor(el) {
+    let current = el;
+    while (current) {
+        if (current.classList.contains('Flow-Component')) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+function findComponentById(flowJson, componentId) {
+    // Check global components
+    for (const comp of flowJson.components ?? []) {
+        if (comp.id === componentId)
+            return comp;
+    }
+    // Check page components
+    for (const page of flowJson.pages ?? []) {
+        for (const comp of page.components ?? []) {
+            if (comp.id === componentId)
+                return comp;
+        }
+    }
+    return null;
+}
+function findPageById(flowJson, pageId) {
+    for (const page of flowJson.pages ?? []) {
+        if (page.id === pageId)
+            return page;
+    }
+    return null;
+}
+/**
+ * Filter styles to those related to a component and/or page.
+ * Returns an object with selectors grouped by their relevance.
+ */
+function filterRelatedStyles(styles, component, page) {
+    const componentStyles = {};
+    const pageStyles = {};
+    if (!styles)
+        return { componentStyles, pageStyles };
+    // Build matchers for the component
+    const componentMatchers = [];
+    if (component) {
+        // Match component tags (e.g., .ComponentTag-page_wrapper)
+        for (const tag of component.tags ?? []) {
+            componentMatchers.push(`ComponentTag-${tag}`);
+        }
+        // Match component type (e.g., .ElementType-OptionSelector, .ElementType-CustomButton)
+        if (component.type) {
+            componentMatchers.push(`ElementType-${component.type}`);
+        }
+        // Match component ID (e.g., .cid-abc123)
+        if (component.id) {
+            componentMatchers.push(`cid-${component.id}`);
+        }
+    }
+    // Build matchers for the page
+    const pageMatchers = [];
+    if (page) {
+        // Match page tags (e.g., .PageTag-standard_page)
+        for (const tag of page.tags ?? []) {
+            pageMatchers.push(`PageTag-${tag}`);
+        }
+        // Match page key/id in selectors
+        if (page.key) {
+            pageMatchers.push(`PageKey-${page.key}`);
+        }
+    }
+    // Always include flow-level page selectors
+    pageMatchers.push('Flow-Page');
+    pageMatchers.push('Flow-EntireFlow');
+    pageMatchers.push('ElementType-PageContents');
+    for (const [selector, properties] of Object.entries(styles)) {
+        // Check if selector matches any component matchers
+        const matchesComponent = componentMatchers.some((matcher) => selector.includes(matcher));
+        // Check if selector matches any page matchers
+        const matchesPage = pageMatchers.some((matcher) => selector.includes(matcher));
+        if (matchesComponent) {
+            componentStyles[selector] = properties;
+        }
+        else if (matchesPage) {
+            pageStyles[selector] = properties;
+        }
+    }
+    return { componentStyles, pageStyles };
+}
+/**
+ * Convert a FlowStyles object to CSS text for display
+ */
+function stylesToCss(styles) {
+    const lines = [];
+    for (const [selector, properties] of Object.entries(styles)) {
+        lines.push(`${selector} {`);
+        for (const [prop, value] of Object.entries(properties)) {
+            lines.push(`  ${prop}: ${value};`);
+        }
+        lines.push('}');
+        lines.push('');
+    }
+    return lines.join('\n').trim();
+}
+function filterJsonByKey(obj, filterText) {
+    if (!filterText.trim())
+        return obj;
+    if (typeof obj !== 'object' || obj === null)
+        return obj;
+    const lowerFilter = filterText.toLowerCase();
+    // For arrays, filter each item and only keep non-empty results
+    if (Array.isArray(obj)) {
+        const filtered = obj
+            .map((item) => filterJsonByKey(item, filterText))
+            .filter((item) => {
+            if (typeof item !== 'object' || item === null)
+                return false;
+            if (Array.isArray(item))
+                return item.length > 0;
+            return Object.keys(item).length > 0;
+        });
+        return filtered;
+    }
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (key.toLowerCase().includes(lowerFilter)) {
+            // Key matches - include the entire value unfiltered
+            result[key] = value;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            // Key doesn't match - recurse to find nested matches
+            const filtered = filterJsonByKey(value, filterText);
+            if (Array.isArray(filtered)) {
+                if (filtered.length > 0)
+                    result[key] = filtered;
+            }
+            else if (filtered !== null && Object.keys(filtered).length > 0) {
+                result[key] = filtered;
+            }
+        }
+    }
+    return result;
+}
+const USERDATA_UPDATED_EVENT = 'embeddables:userdata_updated';
+function RelatedStylesPanel({ styles, component, page }) {
+    const { componentStyles, pageStyles } = filterRelatedStyles(styles, component, page);
+    const componentCss = stylesToCss(componentStyles);
+    const pageCss = stylesToCss(pageStyles);
+    const hasComponentStyles = Object.keys(componentStyles).length > 0;
+    const hasPageStyles = Object.keys(pageStyles).length > 0;
+    const hasAnyStyles = hasComponentStyles || hasPageStyles;
+    return (_jsxs("div", { className: "flex min-h-0 w-80 shrink-0 flex-col", children: [_jsx("div", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Related Styles" }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 p-3 ring-1 ring-inset ring-white/10", children: !hasAnyStyles ? (_jsx("div", { className: "text-[11px] text-slate-500 italic", children: "No related styles found for this component or page." })) : (_jsxs("div", { className: "flex flex-col gap-4", children: [hasComponentStyles && (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-teal-400", children: "Component" }), _jsxs("span", { className: "text-[10px] text-slate-500", children: ["(", Object.keys(componentStyles).length, " rules)"] })] }), _jsx("pre", { className: "font-mono text-xs leading-5 text-slate-100 whitespace-pre-wrap break-all", children: componentCss })] })), hasPageStyles && (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-sky-400", children: "Page" }), _jsxs("span", { className: "text-[10px] text-slate-500", children: ["(", Object.keys(pageStyles).length, " rules)"] })] }), _jsx("pre", { className: "font-mono text-xs leading-5 text-slate-100 whitespace-pre-wrap break-all", children: pageCss })] }))] })) })] }));
+}
+export function InspectorPanel({ embeddableId }) {
+    const [state, setState] = useState('idle');
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const [selectedComponentId, setSelectedComponentId] = useState(null);
+    const [error, setError] = useState(null);
+    const [keyFilter, setKeyFilter] = useState('');
+    const [currentPage, setCurrentPage] = useState(null);
+    const [flowStyles, setFlowStyles] = useState(undefined);
+    const overlayRef = useRef(null);
+    const hoveredElementRef = useRef(null);
+    const savvy = window.Savvy;
+    // Refresh page and styles info
+    const refreshPageAndStyles = useCallback(() => {
+        if (!savvy?.getFlowJson || !savvy?.getUserData)
+            return;
+        try {
+            const flowJson = savvy.getFlowJson(embeddableId);
+            if (flowJson?.styles) {
+                setFlowStyles(flowJson.styles);
+            }
+            const userData = savvy.getUserData(embeddableId);
+            if (userData && flowJson) {
+                const page = findPageById(flowJson, userData.current_page_id);
+                setCurrentPage(page);
+            }
+        }
+        catch {
+            // ignore errors
+        }
+    }, [embeddableId, savvy]);
+    // Refresh on mount and when user data changes
+    useEffect(() => {
+        const timer = setTimeout(refreshPageAndStyles, 100);
+        return () => clearTimeout(timer);
+    }, [refreshPageAndStyles]);
+    useEffect(() => {
+        const handler = (event) => {
+            const detail = event?.detail;
+            const eventEmbeddableId = detail?.embeddableId;
+            if (typeof eventEmbeddableId === 'string' &&
+                eventEmbeddableId.length > 0 &&
+                eventEmbeddableId !== embeddableId) {
+                return;
+            }
+            refreshPageAndStyles();
+        };
+        window.addEventListener(USERDATA_UPDATED_EVENT, handler);
+        return () => window.removeEventListener(USERDATA_UPDATED_EVENT, handler);
+    }, [embeddableId, refreshPageAndStyles]);
+    // Create or get the highlight overlay element
+    const getOverlay = useCallback(() => {
+        if (!overlayRef.current) {
+            const overlay = document.createElement('div');
+            overlay.id = 'embeddables-inspector-overlay';
+            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;
+    }, []);
+    // Position the overlay over an element
+    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]);
+    // Handle pointer movement during inspection
+    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]);
+    // Handle click during inspection
+    const handleClick = useCallback((e) => {
+        const target = e.target;
+        const flowComponent = findFlowComponentAncestor(target);
+        if (flowComponent) {
+            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');
+            // Hide overlay after selection
+            positionOverlay(null);
+            hoveredElementRef.current = null;
+        }
+    }, [embeddableId, positionOverlay, savvy]);
+    // Start inspection mode
+    const startInspecting = useCallback(() => {
+        setError(null);
+        setState('inspecting');
+    }, []);
+    // Stop inspection mode
+    const stopInspecting = useCallback(() => {
+        setState('idle');
+        positionOverlay(null);
+        hoveredElementRef.current = null;
+    }, [positionOverlay]);
+    // Clear selection and go back to idle
+    const clearSelection = useCallback(() => {
+        setSelectedComponent(null);
+        setSelectedComponentId(null);
+        setState('idle');
+    }, []);
+    // Inspect another component (go back to inspecting mode)
+    const inspectAnother = useCallback(() => {
+        setError(null);
+        setState('inspecting');
+    }, []);
+    // Set up and tear down event listeners
+    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]);
+    // Cleanup overlay on unmount
+    useEffect(() => {
+        return () => {
+            if (overlayRef.current) {
+                overlayRef.current.remove();
+                overlayRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: "mx-auto flex h-full w-full max-w-6xl flex-col", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-slate-100", children: "Inspect Components" }), _jsx("div", { className: "mt-0.5 text-[11px] text-slate-400", children: state === 'inspecting'
+                                    ? 'Hover over a component and click to inspect its JSON.'
+                                    : 'Click a component on the page to view its full JSON configuration.' })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2 sm:justify-end", children: [state === 'idle' && (_jsxs("button", { type: "button", onClick: startInspecting, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 hover:bg-sky-500", children: [_jsx("span", { className: "text-sm mb-0.5", children: "\u2316" }), "Start Inspecting"] })), state === 'inspecting' && (_jsx("button", { type: "button", onClick: stopInspecting, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-rose-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-rose-500 hover:bg-rose-500", children: "Stop Inspecting" })), state === 'selected' && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: inspectAnother, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-sky-600 px-2.5 py-1.5 text-xs font-semibold text-white ring-1 ring-inset ring-sky-500 hover:bg-sky-500", children: [_jsx("span", { className: "text-sm", children: "\u2316" }), "Inspect Another"] }), _jsx("button", { type: "button", onClick: clearSelection, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-slate-700 px-2.5 py-1.5 text-xs font-semibold text-slate-200 ring-1 ring-inset ring-slate-600 hover:bg-slate-600 hover:text-white", children: "Clear" })] }))] })] }), error && (_jsx("div", { className: "mt-3 rounded-xl bg-rose-500/10 px-3 py-2 text-xs text-rose-200 ring-1 ring-inset ring-rose-500/20", children: error })), state === 'inspecting' && (_jsxs("div", { className: "mt-4 flex items-center gap-2 rounded-xl bg-sky-500/10 px-3 py-2 text-xs text-sky-200 ring-1 ring-inset ring-sky-500/20", children: [_jsx("span", { className: "inline-block h-2 w-2 animate-pulse rounded-full bg-sky-400" }), "Inspection mode active. Click any component with the", ' ', _jsx("code", { className: "rounded bg-white/10 px-1 py-0.5 font-mono", children: "Flow-Component" }), " class."] })), state === 'selected' && selectedComponent && (_jsxs("div", { className: "mt-4 flex min-h-0 flex-1 flex-col gap-3 overflow-hidden", children: [_jsx("div", { className: "rounded-xl bg-white/5 p-3 ring-1 ring-inset ring-white/10", children: _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "Type" }), _jsx("span", { className: "text-xs font-semibold text-teal-300", children: selectedComponent.type })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "ID" }), _jsx("code", { className: "rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-slate-200", children: selectedComponentId })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "Key" }), _jsx("code", { className: "rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-slate-200", children: selectedComponent.key })] }), selectedComponent.tags && selectedComponent.tags.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "Tags" }), _jsx("div", { className: "flex flex-wrap gap-1", children: selectedComponent.tags.map((tag) => (_jsx("code", { className: "rounded bg-amber-500/20 px-1.5 py-0.5 font-mono text-xs text-amber-200", children: tag }, tag))) })] }))] }) }), _jsxs("div", { className: "flex min-h-0 flex-1 gap-3", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Component JSON" }), _jsx("input", { type: "text", value: keyFilter, onChange: (e) => setKeyFilter(e.target.value), placeholder: "Filter by key...", className: "w-32 rounded-lg bg-slate-800 px-2 py-1.5 text-xs text-slate-100 ring-1 ring-inset ring-slate-600 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60" })] }), _jsx("pre", { className: "min-h-0 flex-1 overflow-auto rounded-xl bg-slate-950/60 p-3 font-mono text-xs leading-5 text-slate-100 ring-1 ring-inset ring-white/10", children: JSON.stringify(keyFilter.trim()
+                                            ? filterJsonByKey(selectedComponent, keyFilter)
+                                            : selectedComponent, null, 2) })] }), _jsx(RelatedStylesPanel, { styles: flowStyles, component: selectedComponent, page: currentPage })] })] })), state === 'idle' && !error && (_jsxs("div", { className: "mt-4 flex min-h-0 flex-1 flex-col gap-3 overflow-hidden", children: [_jsx("div", { className: "text-[11px] text-slate-400", children: "Click \"Start Inspecting\" to begin selecting components." }), currentPage && (_jsxs("div", { className: "flex min-h-0 flex-1 gap-3", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx("div", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400", children: "Current Page" }), _jsx("div", { className: "rounded-xl bg-white/5 p-3 ring-1 ring-inset ring-white/10", children: _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "Key" }), _jsx("code", { className: "rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-slate-200", children: currentPage.key })] }), currentPage.tags && currentPage.tags.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-300 -mb-0.5", children: "Tags" }), _jsx("div", { className: "flex flex-wrap gap-1", children: currentPage.tags.map((tag) => (_jsx("code", { className: "rounded bg-sky-500/20 px-1.5 py-0.5 font-mono text-xs text-sky-200", children: tag }, tag))) })] }))] }) })] }), _jsx(RelatedStylesPanel, { styles: flowStyles, component: null, page: currentPage })] }))] }))] }));
+}

package/dist/workbench/PageNavigator.d.ts

@@ -0,0 +1,6 @@
+type PageNavigatorProps = {
+    embeddableId: string;
+};
+export declare function PageNavigator({ embeddableId }: PageNavigatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=PageNavigator.d.ts.map

package/dist/workbench/PageNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNavigator.d.ts","sourceRoot":"","sources":["../../src/workbench/PageNavigator.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AA2BD,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,kBAAkB,kDAkMjE"}

package/dist/workbench/PageNavigator.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
+const USERDATA_UPDATED_EVENT = 'embeddables:userdata_updated';
+export function PageNavigator({ embeddableId }) {
+    const [pages, setPages] = useState([]);
+    const [currentPageKey, setCurrentPageKey] = useState('');
+    const [currentPageIndex, setCurrentPageIndex] = useState(0);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const dropdownListRef = useRef(null);
+    const savvy = window.Savvy;
+    const refresh = useCallback(() => {
+        if (!savvy?.getFlowJson || !savvy?.getUserData)
+            return;
+        try {
+            const flowJson = savvy.getFlowJson(embeddableId);
+            if (flowJson?.pages) {
+                setPages(flowJson.pages.map((p) => ({ id: p.id, key: p.key })));
+            }
+            const userData = savvy.getUserData(embeddableId);
+            if (userData) {
+                setCurrentPageKey(userData.current_page_key || '');
+                setCurrentPageIndex(userData.current_page_index ?? 0);
+            }
+        }
+        catch {
+            // ignore errors
+        }
+    }, [embeddableId, savvy]);
+    useEffect(() => {
+        const timer = setTimeout(refresh, 100);
+        return () => clearTimeout(timer);
+    }, [refresh]);
+    useEffect(() => {
+        const handler = (event) => {
+            const detail = event?.detail;
+            const eventEmbeddableId = detail?.embeddableId;
+            if (typeof eventEmbeddableId === 'string' &&
+                eventEmbeddableId.length > 0 &&
+                eventEmbeddableId !== embeddableId) {
+                return;
+            }
+            refresh();
+        };
+        window.addEventListener(USERDATA_UPDATED_EVENT, handler);
+        return () => window.removeEventListener(USERDATA_UPDATED_EVENT, handler);
+    }, [embeddableId, refresh]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        if (isDropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isDropdownOpen]);
+    // Scroll to current page when dropdown opens
+    useEffect(() => {
+        if (isDropdownOpen && dropdownListRef.current) {
+            const currentIndex = pages.findIndex((p) => p.key === currentPageKey);
+            if (currentIndex >= 0) {
+                const listEl = dropdownListRef.current;
+                const items = listEl.querySelectorAll('button');
+                const currentItem = items[currentIndex];
+                if (currentItem) {
+                    const listHeight = listEl.clientHeight;
+                    const itemTop = currentItem.offsetTop;
+                    const itemHeight = currentItem.offsetHeight;
+                    // Center the item in the list
+                    const scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
+                    listEl.scrollTop = Math.max(0, scrollTop);
+                }
+            }
+        }
+    }, [isDropdownOpen, pages, currentPageKey]);
+    const handlePrevPage = (e) => {
+        e.stopPropagation();
+        // Cmd (Mac) or Ctrl (Windows) + click: jump directly by page ID
+        if ((e.metaKey || e.ctrlKey) && savvy?.goToPage) {
+            const prevPage = pages[currentPageIndex - 1];
+            if (prevPage) {
+                savvy.goToPage(embeddableId, prevPage.id);
+            }
+        }
+        else if (savvy?.goToPrevPage) {
+            savvy.goToPrevPage(embeddableId);
+        }
+    };
+    const handleNextPage = (e) => {
+        e.stopPropagation();
+        // Cmd (Mac) or Ctrl (Windows) + click: jump directly by page ID
+        if ((e.metaKey || e.ctrlKey) && savvy?.goToPage) {
+            const nextPage = pages[currentPageIndex + 1];
+            if (nextPage) {
+                savvy.goToPage(embeddableId, nextPage.id);
+            }
+        }
+        else if (savvy?.goToNextPage) {
+            savvy.goToNextPage(embeddableId);
+        }
+    };
+    const handleSelectPage = (pageId) => {
+        if (savvy?.goToPage) {
+            savvy.goToPage(embeddableId, pageId);
+        }
+        setIsDropdownOpen(false);
+    };
+    const toggleDropdown = (e) => {
+        e.stopPropagation();
+        setIsDropdownOpen(!isDropdownOpen);
+    };
+    if (pages.length === 0)
+        return null;
+    const isFirstPage = currentPageIndex === 0;
+    const isLastPage = currentPageIndex >= pages.length - 1;
+    const absolutePageIndex = pages.findIndex((p) => p.key === currentPageKey);
+    return (_jsxs("div", { className: "flex items-center gap-1", ref: dropdownRef, children: [_jsx("button", { type: "button", onClick: handlePrevPage, disabled: isFirstPage, title: "Previous page (Cmd/Ctrl+click to jump by ID)", className: "grid h-6 w-6 cursor-pointer place-items-center rounded-md bg-white/5 text-slate-300 ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-white/5 disabled:hover:text-slate-300", children: _jsx("span", { className: "text-[10px] leading-none", children: "\u25C0" }) }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: toggleDropdown, title: currentPageKey, className: "flex h-6 cursor-pointer items-center gap-1 rounded-md bg-white/5 px-2 text-[11px] text-slate-300 ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/10 hover:text-white", children: [_jsxs("span", { className: "text-slate-400", children: [absolutePageIndex + 1, "."] }), _jsx("span", { className: "max-w-[120px] truncate", children: currentPageKey || 'Loading...' }), _jsx("span", { className: "text-[8px] leading-none", children: isDropdownOpen ? '▲' : '▼' })] }), isDropdownOpen && (_jsx("div", { ref: dropdownListRef, className: "absolute right-0 bottom-full z-50 mb-1 max-h-64 min-w-[180px] overflow-auto rounded-lg bg-slate-900 py-1 shadow-xl ring-1 ring-white/10", children: pages.map((page, index) => (_jsxs("button", { type: "button", onClick: () => handleSelectPage(page.id), className: `w-full cursor-pointer px-3 py-1.5 whitespace-nowrap text-left text-[11px] transition-colors ${page.key === currentPageKey
+                                ? 'bg-white/30 text-white'
+                                : 'text-slate-300 hover:bg-white/5 hover:text-white'}`, children: [_jsx("span", { className: "mr-2 inline-block w-4 text-right text-[10px] text-slate-400", children: index + 1 }), _jsx("span", { className: "truncate", children: page.key })] }, page.id))) }))] }), _jsx("button", { type: "button", onClick: handleNextPage, disabled: isLastPage, title: "Next page (Cmd/Ctrl+click to jump by ID)", className: "grid h-6 w-6 cursor-pointer place-items-center rounded-md bg-white/5 text-slate-300 ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-white/5 disabled:hover:text-slate-300", children: _jsx("span", { className: "text-[10px] leading-none", children: "\u25B6" }) })] }));
+}

package/dist/workbench/SchemaPanel.d.ts

@@ -0,0 +1,6 @@
+type SchemaPanelProps = {
+    embeddableId: string;
+};
+export declare function SchemaPanel({ embeddableId }: SchemaPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SchemaPanel.d.ts.map

package/dist/workbench/SchemaPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaPanel.d.ts","sourceRoot":"","sources":["../../src/workbench/SchemaPanel.tsx"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AA4DD,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,EAAE,gBAAgB,2CA6O7D"}