@embeddables/cli 0.8.0 → 0.8.2

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, localDev }) {
+    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) => {
+            // Use event.code (physical key) so Option+K works on Mac; Option changes event.key
+            const isToggleShortcut = event.altKey && event.code === 'KeyK';
+            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: localDev ? 'Local' : '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') ? '⌥K' : 'Alt+K'] }), _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/index.d.ts

@@ -0,0 +1,10 @@
+declare global {
+    interface Window {
+        __embeddables_bootstrap_workbench?: (config: {
+            embeddableId: string;
+            localDev?: boolean;
+        }) => void;
+    }
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/workbench/index.tsx"],"names":[],"mappings":"AAIA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iCAAiC,CAAC,EAAE,CAAC,MAAM,EAAE;YAC3C,YAAY,EAAE,MAAM,CAAA;YACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;SACnB,KAAK,IAAI,CAAA;KACX;CACF"}

package/dist/workbench/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { WorkbenchApp } from './WorkbenchApp.js';
+let workbenchRoot = null;
+// Derive CSS URL from script's URL so it works when script is loaded from a different origin (e.g. CDN)
+const scriptEl = typeof document !== 'undefined' ? document.currentScript : null;
+const WORKBENCH_CSS_URL = scriptEl?.src?.replace(/\.js(\?.*)?$/i, '.css$1') ??
+    new URL('/__embeddables_workbench.css', window.location.origin).href;
+async function bootstrapWorkbench(config) {
+    const rootElement = document.getElementById('__embeddables_workbench_root');
+    if (!rootElement) {
+        console.warn('[Workbench] Root element not found');
+        return;
+    }
+    let shadowRoot = rootElement.shadowRoot;
+    if (!shadowRoot) {
+        shadowRoot = rootElement.attachShadow({ mode: 'open' });
+        const cssUrl = WORKBENCH_CSS_URL;
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = cssUrl;
+        shadowRoot.appendChild(link);
+        await new Promise((resolve) => {
+            if (link.sheet) {
+                resolve();
+                return;
+            }
+            link.onload = () => resolve();
+            link.onerror = () => resolve();
+        });
+        const mountPoint = document.createElement('div');
+        shadowRoot.appendChild(mountPoint);
+        workbenchRoot = createRoot(mountPoint);
+    }
+    if (workbenchRoot) {
+        workbenchRoot.render(_jsx(WorkbenchApp, { embeddableId: config.embeddableId, localDev: config.localDev ?? false }));
+    }
+}
+window.__embeddables_bootstrap_workbench = bootstrapWorkbench;
+// Auto-bootstrap if config is already available (fallback if onload handler doesn't fire)
+if (typeof window !== 'undefined' && window.__EMBEDDABLES_WORKBENCH?.embeddableId) {
+    const config = window.__EMBEDDABLES_WORKBENCH;
+    bootstrapWorkbench({ embeddableId: config.embeddableId, localDev: config.localDev });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddables/cli",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "type": "module",
   "bin": {
     "embeddables": "./bin/embeddables.mjs"
@@ -45,6 +45,7 @@
     "test:verbose": "vitest --reporter verbose",
     "build:prompts": "node scripts/build-prompts.cjs",
     "prepack": "node scripts/readme-swap.cjs prepack",
+    "prepublishOnly": "npm run build",
     "postpack": "node scripts/readme-swap.cjs postpack"
   },
   "dependencies": {