@embeddables/cli 0.7.3 → 0.7.5

package/.prompts/embeddables-cli.md

@@ -193,6 +193,8 @@ Styles are stored in `Flow.styles` as a map of CSS selectors to style objects. T
 
 **File Mapping**: `styles/index.css` — a single CSS file containing all selectors for this flow.
 
+**Do not use `!important` in CSS.** If a style does not apply, fix the selector (order, breakpoint, scope, tag, state, sub-element) per the CSS Selector System below; do not use `!important` as a fix.
+
 ### CSS Selector System
 
 CSS selectors follow a specific structure. The order is:
@@ -252,7 +254,8 @@ Note: If you need to use any breakpoints other than 720px and 520px, you must ad
 #### 7. Sub-Element (Descendant)
 
 - Format: ` .ElementType-{Type}` (leading space required!)
-- See the 'Component Sub-Element Types Reference' section below for details
+- The component you target with element+tag (steps 4–5) must be the **component that owns** that sub-element (see 'Component Sub-Element Types Reference' below). Do not combine a container (or other parent) with a sub-element that belongs to a child component—e.g. do not use a container tag + `.ElementType-ButtonText`, because `ButtonText` is a sub-element of CustomButton; target the CustomButton (with its tag) instead.
+- See the 'Component Sub-Element Types Reference' section below for which ElementTypes belong to which component type.
 
 #### 8. Option (For Option Selectors)
 
@@ -274,8 +277,8 @@ Note: If you need to use any breakpoints other than 720px and 520px, you must ad
 // Component with hover state
 .Flow-Component.ComponentTag-primary_button:hover
 
-// Button text on hover
-.Flow-Component.ComponentType-CustomButton.ComponentTag-primary_button:hover.ElementType-ButtonText
+// Button text on hover (sub-element: component in selector must be the one that owns it—CustomButton, not a container)
+.Flow-Component.ComponentType-CustomButton.ComponentTag-primary_button:hover .ElementType-ButtonText
 
 // Mobile breakpoint
 .Flow-EntireFlow[max-width~='1024px'] .Flow-Component.ComponentTag-landing_container
@@ -630,11 +633,13 @@ The `config.json` file contains the reduced Embeddable JSON with:
 
 7. **CSS Selectors**: Must follow exact structure with proper spacing (trailing space on breakpoints, leading space on sub-elements).
 
-8. **User Data Keys**: Input component keys become User Data keys. Choose descriptive names (e.g., `email` not `email_input`).
+8. **No `!important` in CSS**: Do not use `!important` in embeddable styles. If a style does not apply, fix the selector per the CSS Selector System (principle 7); do not use `!important` as a fix.
+
+9. **User Data Keys**: Input component keys become User Data keys. Choose descriptive names (e.g., `email` not `email_input`).
 
-9. **Computed Field Dependencies**: `inputs` array defines which User Data keys trigger recalculation. Can reference other computed fields.
+10. **Computed Field Dependencies**: `inputs` array defines which User Data keys trigger recalculation. Can reference other computed fields.
 
-10. **Action Triggers**: Actions are triggered by events (button clicks, page completion, etc.). Configuration stored in config.json, code in JS files.
+11. **Action Triggers**: Actions are triggered by events (button clicks, page completion, etc.). Configuration stored in config.json, code in JS files.
 
 ## Common Patterns
 

package/dist/workbench/PageNavigator.js

@@ -45,7 +45,7 @@ export function PageNavigator({ embeddableId }) {
         window.addEventListener(USERDATA_UPDATED_EVENT, handler);
         return () => window.removeEventListener(USERDATA_UPDATED_EVENT, handler);
     }, [embeddableId, refresh]);
-    // Close dropdown when clicking outside
+    // Close dropdown when clicking outside (use 'click' so selecting a page item fires its onClick before we consider closing)
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -53,8 +53,8 @@ export function PageNavigator({ embeddableId }) {
             }
         };
         if (isDropdownOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
+            document.addEventListener('click', handleClickOutside);
+            return () => document.removeEventListener('click', handleClickOutside);
         }
     }, [isDropdownOpen]);
     // Scroll to current page when dropdown opens

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

@@ -1 +1 @@
-{"version":3,"file":"WorkbenchApp.d.ts","sourceRoot":"","sources":["../../src/workbench/WorkbenchApp.tsx"],"names":[],"mappings":"AAuBA,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAqCD,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA6SzE"}
+{"version":3,"file":"WorkbenchApp.d.ts","sourceRoot":"","sources":["../../src/workbench/WorkbenchApp.tsx"],"names":[],"mappings":"AAuBA,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAqCD,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA4SzE"}

package/dist/workbench/WorkbenchApp.js

@@ -96,8 +96,8 @@ export function WorkbenchApp({ embeddableId, localDev }) {
     }, []);
     useEffect(() => {
         const handler = (event) => {
-            const isMac = navigator.platform.toLowerCase().includes('mac');
-            const isToggleShortcut = (isMac ? event.metaKey : event.ctrlKey) && (event.key === 'J' || event.key === 'j');
+            // 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) => {
@@ -189,5 +189,5 @@ export function WorkbenchApp({ embeddableId, localDev }) {
                                             ? '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 }))] })) }))] }));
+                                            : '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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddables/cli",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "type": "module",
   "bin": {
     "embeddables": "./bin/embeddables.mjs"