@embeddables/cli 0.1.0

package/dist/workbench/WorkbenchApp.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ActionsPanel } from './ActionsPanel.js';
+import { AutofillPanel } from './AutofillPanel.js';
+import { ComputedFieldsPanel } from './ComputedFieldsPanel.js';
+import { ExperimentsPanel } from './ExperimentsPanel.js';
+import { InspectorPanel } from './InspectorPanel.js';
+import { PageNavigator } from './PageNavigator.js';
+import { UserDataPanel } from './UserDataPanel.js';
+const PREFS_STORAGE_KEY_PREFIX = 'embeddables:workbench:prefs:';
+const MIN_WORKBENCH_HEIGHT = 140;
+function loadPrefs(embeddableId) {
+    try {
+        const raw = window.localStorage.getItem(`${PREFS_STORAGE_KEY_PREFIX}${embeddableId}`);
+        if (!raw) {
+            return { collapsed: true, height: 260, activeTab: 'user-data' };
+        }
+        const parsed = JSON.parse(raw);
+        return {
+            collapsed: parsed.collapsed ?? true,
+            height: Math.max(MIN_WORKBENCH_HEIGHT, parsed.height ?? 260),
+            activeTab: parsed.activeTab ?? 'user-data',
+        };
+    }
+    catch {
+        return { collapsed: true, height: 260, activeTab: 'user-data' };
+    }
+}
+function savePrefs(embeddableId, prefs) {
+    try {
+        window.localStorage.setItem(`${PREFS_STORAGE_KEY_PREFIX}${embeddableId}`, JSON.stringify(prefs));
+    }
+    catch {
+        // ignore
+    }
+}
+export function WorkbenchApp({ embeddableId }) {
+    const [collapsed, setCollapsed] = useState(true);
+    const [height, setHeight] = useState(260);
+    const [activeTab, setActiveTab] = useState('user-data');
+    const [isSavvyReady, setIsSavvyReady] = useState(false);
+    const dragRef = useRef(null);
+    const containerRef = useRef(null);
+    // Wait for window.Savvy to be available before rendering panels
+    useEffect(() => {
+        const checkSavvyReady = () => {
+            const savvy = window.Savvy;
+            return !!savvy?.getUserData;
+        };
+        if (checkSavvyReady()) {
+            setIsSavvyReady(true);
+            return;
+        }
+        // Poll for Savvy availability with exponential backoff
+        let attempt = 0;
+        const maxAttempts = 20;
+        const baseDelay = 50;
+        const poll = () => {
+            if (checkSavvyReady()) {
+                setIsSavvyReady(true);
+                return;
+            }
+            attempt++;
+            if (attempt < maxAttempts) {
+                const delay = Math.min(baseDelay * Math.pow(1.5, attempt), 1000);
+                setTimeout(poll, delay);
+            }
+        };
+        const timer = setTimeout(poll, baseDelay);
+        return () => clearTimeout(timer);
+    }, []);
+    useEffect(() => {
+        const prefs = loadPrefs(embeddableId);
+        setCollapsed(prefs.collapsed);
+        setHeight(prefs.height);
+        setActiveTab(prefs.activeTab);
+    }, [embeddableId]);
+    // Update body margin to match workbench height
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateBodyMargin = () => {
+            const workbenchHeight = container.getBoundingClientRect().height;
+            document.body.style.marginBottom = `${workbenchHeight}px`;
+        };
+        // Initial update
+        updateBodyMargin();
+        // Observe size changes
+        const resizeObserver = new ResizeObserver(updateBodyMargin);
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+            document.body.style.marginBottom = '';
+        };
+    }, []);
+    useEffect(() => {
+        const handler = (event) => {
+            const isMac = navigator.platform.toLowerCase().includes('mac');
+            const isToggleShortcut = (isMac ? event.metaKey : event.ctrlKey) && (event.key === 'J' || event.key === 'j');
+            if (isToggleShortcut) {
+                event.preventDefault();
+                setCollapsed((prev) => {
+                    const next = !prev;
+                    savePrefs(embeddableId, { collapsed: next, height, activeTab });
+                    return next;
+                });
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [embeddableId, height, activeTab]);
+    const toggleCollapsed = () => {
+        setCollapsed((prev) => {
+            const next = !prev;
+            savePrefs(embeddableId, { collapsed: next, height, activeTab });
+            return next;
+        });
+    };
+    const switchTab = (tab) => {
+        setActiveTab(tab);
+        savePrefs(embeddableId, { collapsed, height, activeTab: tab });
+    };
+    useEffect(() => {
+        const onPointerMove = (event) => {
+            const drag = dragRef.current;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            // Workbench is anchored to the bottom; dragging upward increases height.
+            const delta = drag.startY - event.clientY;
+            const max = Math.max(MIN_WORKBENCH_HEIGHT, window.innerHeight - 60);
+            const nextHeight = Math.max(MIN_WORKBENCH_HEIGHT, Math.min(max, drag.startHeight + delta));
+            setHeight(nextHeight);
+        };
+        const endDrag = (event) => {
+            const drag = dragRef.current;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            dragRef.current = null;
+            try {
+                document.body.style.userSelect = '';
+                document.body.style.cursor = '';
+            }
+            catch {
+                // ignore
+            }
+            // Persist the final height.
+            savePrefs(embeddableId, { collapsed, height, activeTab });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', endDrag);
+        window.addEventListener('pointercancel', endDrag);
+        return () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', endDrag);
+            window.removeEventListener('pointercancel', endDrag);
+        };
+    }, [activeTab, collapsed, embeddableId, height]);
+    return (_jsxs("div", { ref: containerRef, className: "fixed inset-x-0 bottom-0 z-2147483647 font-sans", children: [!collapsed && (_jsx("div", { role: "separator", "aria-orientation": "horizontal", title: "Drag to resize", onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    dragRef.current = {
+                        pointerId: event.pointerId,
+                        startY: event.clientY,
+                        startHeight: height,
+                    };
+                    try {
+                        ;
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        document.body.style.userSelect = 'none';
+                        document.body.style.cursor = 'ns-resize';
+                    }
+                    catch {
+                        // ignore
+                    }
+                }, onClick: (event) => {
+                    // Avoid toggling collapse when clicking the drag handle.
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, className: "absolute left-1/2 z-10 -translate-x-1/2 -top-1.5 h-3 w-16 cursor-ns-resize touch-none rounded-full border border-slate-500 bg-slate-400 shadow-md hover:bg-slate-300 transition-colors duration-200" })), _jsxs("div", { className: "relative flex items-center justify-between gap-3 border-t border-white/10 bg-slate-950/80 px-3 py-1.5 text-slate-200 shadow-2xl shadow-black/40 backdrop-blur supports-backdrop-filter:bg-slate-950/70", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex cursor-pointer items-center gap-2", onClick: toggleCollapsed, children: [_jsx("div", { className: "text-xs font-semibold tracking-wide text-slate-100", children: "Embeddables Workbench" }), _jsx("div", { className: "rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-medium text-slate-200 ring-1 ring-inset ring-white/10", children: "Beta" })] }), !collapsed && (_jsxs("div", { className: "ml-8 flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => switchTab('user-data'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'user-data'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "User Data" }), _jsx("button", { type: "button", onClick: () => switchTab('experiments'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'experiments'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "Experiments" }), _jsx("button", { type: "button", onClick: () => switchTab('inspector'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'inspector'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "Inspect" }), _jsx("button", { type: "button", onClick: () => switchTab('autofill'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'autofill'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "Autofill" }), _jsx("button", { type: "button", onClick: () => switchTab('actions'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'actions'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "Actions" }), _jsx("button", { type: "button", onClick: () => switchTab('computed-fields'), className: `cursor-pointer rounded-lg px-2.5 py-1 text-[11px] font-medium transition-colors ${activeTab === 'computed-fields'
+                                            ? 'bg-white/15 text-white ring-1 ring-inset ring-white/20'
+                                            : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`, children: "Computed Fields" })] }))] }), _jsxs("div", { className: "flex items-center gap-6", children: [isSavvyReady && _jsx(PageNavigator, { embeddableId: embeddableId }), _jsxs("div", { className: "flex cursor-pointer items-center gap-2 text-slate-300", onClick: toggleCollapsed, children: [_jsxs("div", { className: "hidden text-[11px] text-slate-400 sm:block", children: [collapsed ? 'Show' : 'Hide', " \u2022", ' ', navigator.platform.toLowerCase().includes('mac') ? '⌘J' : 'Ctrl+J'] }), _jsx("div", { className: "grid h-7 w-7 place-items-center rounded-lg bg-white/5 ring-1 ring-inset ring-white/10", children: _jsx("span", { className: "text-sm leading-none", children: collapsed ? '▲' : '▼' }) })] })] })] }), !collapsed && (_jsx("div", { className: "flex flex-col border-t border-white/10 bg-slate-950/70 px-3 py-3 text-slate-200 shadow-2xl shadow-black/40 backdrop-blur supports-backdrop-filter:bg-slate-950/60", style: { height }, children: !isSavvyReady ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("div", { className: "text-sm text-slate-400", children: "Waiting for embeddable to initialize..." }) })) : (_jsxs(_Fragment, { children: [activeTab === 'user-data' && _jsx(UserDataPanel, { embeddableId: embeddableId }), activeTab === 'experiments' && _jsx(ExperimentsPanel, { embeddableId: embeddableId }), activeTab === 'inspector' && _jsx(InspectorPanel, { embeddableId: embeddableId }), activeTab === 'autofill' && _jsx(AutofillPanel, { embeddableId: embeddableId }), activeTab === 'actions' && _jsx(ActionsPanel, { embeddableId: embeddableId }), activeTab === 'computed-fields' && (_jsx(ComputedFieldsPanel, { embeddableId: embeddableId }))] })) }))] }));
+}

package/dist/workbench/cloudflare-worker/README.md

@@ -0,0 +1,31 @@
+# Embeddables Workbench - Cloudflare Worker
+
+## Deploy
+
+```bash
+npx wrangler login   # One-time
+npx wrangler deploy
+```
+
+## Assets
+
+- `public/workbench.js` - Main bundle
+- `public/workbench.css` - Styles
+
+## Usage
+
+Add `?workbench=true` to any engine preview URL:
+
+```
+https://engine.embeddables.com/preview/<id>?workbench=true
+```
+
+The engine will inject the workbench from this CDN.
+
+## Update
+
+```bash
+npx embeddables build-workbench
+cd dist/workbench/cloudflare-worker
+npx wrangler deploy
+```