@officexapp/catalogs-cli 0.4.0 → 0.4.1

package/dist/index.js

@@ -1275,8 +1275,8 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
     }
 
     // --- Component Renderers ---
-    function RenderComponent({ comp, isCover, formState, onFieldChange }) {
-      const props = comp.props || {};
+    function RenderComponent({ comp, isCover, formState, onFieldChange, onSubmit, propOverrides }) {
+      const props = { ...(comp.props || {}), ...(propOverrides?.[comp.id] || {}) };
       const type = comp.type;
       const compClass = comp.className || '';
       const compStyle = comp.style || {};
@@ -1452,7 +1452,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         case 'url':
         case 'number':
         case 'password':
-          return h(TextInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle });
+          return h(TextInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle, onSubmit });
 
         case 'long_text':
           return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
@@ -1723,7 +1723,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       );
     }
 
-    function TextInput({ comp, type, formState, onFieldChange, isCover, compClass, compStyle }) {
+    function TextInput({ comp, type, formState, onFieldChange, isCover, compClass, compStyle, onSubmit }) {
       const props = comp.props || {};
       const inputType = type === 'email' ? 'email' : type === 'phone' ? 'tel' : type === 'url' ? 'url' : type === 'number' ? 'number' : type === 'password' ? 'password' : 'text';
       return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
@@ -1739,6 +1739,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           placeholder: props.placeholder || '',
           value: formState[comp.id] ?? '',
           onChange: (e) => onFieldChange(comp.id, e.target.value),
+          onKeyDown: (e) => { if (e.key === 'Enter' && onSubmit) { e.preventDefault(); onSubmit(); } },
         })
       );
     }
@@ -2414,6 +2415,8 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       const historyRef = React.useRef(history);
       historyRef.current = history;
       const autoAdvanceTimer = React.useRef(null);
+      const globalsRef = React.useRef({});
+      const [compPropOverrides, setCompPropOverrides] = React.useState({});
 
       // --- Cart logic ---
       const addToCart = React.useCallback((pageId) => {
@@ -2557,7 +2560,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           getField: (id) => formStateRef.current[id],
           getAllFields: () => ({ ...formStateRef.current }),
           getPageId: () => currentPageId,
-          setField: (id, value) => setFormState(prev => ({ ...prev, [id]: value })),
+          setField: (id, value) => onFieldChangeRef.current?.(id, value),
           goNext: () => handleNextRef.current?.(),
           goBack: () => handleBackRef.current?.(),
           on: (event, cb) => { if (!listeners[event]) listeners[event] = new Set(); listeners[event].add(cb); },
@@ -2565,6 +2568,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           openCart: () => setCartOpen(true),
           closeCart: () => setCartOpen(false),
           getCartItems: () => [...cartItems],
+          getGlobal: (key) => globalsRef.current[key],
+          setGlobal: (key, value) => { globalsRef.current[key] = value; },
+          setComponentProp: (id, prop, value) => {
+            setCompPropOverrides(prev => ({ ...prev, [id]: { ...(prev[id] || {}), [prop]: value } }));
+          },
           setValidationError: (id, msg) => {
             setValidationErrors(prev => {
               const next = prev.filter(e => e.componentId !== id);
@@ -2573,7 +2581,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
             });
           },
         };
-        window.CatalogKit = { get: () => instance, getField: instance.getField, setField: instance.setField, getPageId: instance.getPageId, goNext: instance.goNext, goBack: instance.goBack, on: instance.on, off: instance.off };
+        window.CatalogKit = { get: () => instance, getField: instance.getField, setField: instance.setField, getPageId: instance.getPageId, goNext: instance.goNext, goBack: instance.goBack, on: instance.on, off: instance.off, setGlobal: instance.setGlobal, getGlobal: instance.getGlobal, setComponentProp: instance.setComponentProp };
         window.__catalogKitListeners = listeners;
         return () => { delete window.CatalogKit; delete window.__catalogKitListeners; };
       }, []);
@@ -2615,9 +2623,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       const onFieldChange = React.useCallback((id, value) => {
         setFormState(prev => ({ ...prev, [id]: value }));
         devEvents.emit('field_change', { field_id: id, value, page_id: currentPageId });
-        // Fire CatalogKit fieldchange
+        // Fire CatalogKit fieldchange (unscoped + scoped)
         const ckListeners = window.__catalogKitListeners || {};
-        const fcSet = ckListeners['fieldchange']; if (fcSet?.size) for (const cb of fcSet) { try { cb({ fieldId: id, value, pageId: currentPageId }); } catch {} }
+        const fcPayload = { fieldId: id, value, pageId: currentPageId };
+        const fcSet = ckListeners['fieldchange']; if (fcSet?.size) for (const cb of fcSet) { try { cb(fcPayload); } catch {} }
+        const scopedSet = ckListeners['fieldchange:' + id]; if (scopedSet?.size) for (const cb of scopedSet) { try { cb(fcPayload); } catch {} }
 
         // Auto-advance: if page has auto_advance and this is a selection-type input
         const pg = pages[currentPageId];
@@ -2647,6 +2657,8 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           }
         }
       }, [currentPageId, pages, formState, routing, navigateTo]);
+      const onFieldChangeRef = React.useRef(onFieldChange);
+      onFieldChangeRef.current = onFieldChange;
 
       // --- Validation ---
       const runValidation = React.useCallback(() => {
@@ -2684,6 +2696,21 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         if (currentPage?.offer) {
           if (!currentPage.offer.accept_field) addToCart(currentPageId);
         }
+        // Fire CatalogKit beforenext event (scoped: "beforenext" + "beforenext:<pageId>")
+        let prevented = false;
+        let nextPageOverride;
+        const beforeNextPayload = {
+          pageId: currentPageId,
+          preventDefault: () => { prevented = true; },
+          setNextPage: (id) => { nextPageOverride = id; },
+        };
+        const ckListeners = window.__catalogKitListeners || {};
+        for (const key of ['beforenext', 'beforenext:' + currentPageId]) {
+          const set = ckListeners[key]; if (!set?.size) continue;
+          for (const cb of set) { try { cb(beforeNextPayload); } catch (e) { console.error('[CatalogKit]', key, e); } }
+        }
+        if (prevented) return;
+        if (nextPageOverride !== undefined) { navigateTo(nextPageOverride); return; }
         const nextId = getNextPage(routing, currentPageId, formState, devContext);
         navigateTo(nextId);
       }, [currentPageId, routing, formState, pages, addToCart, navigateTo, runValidation]);
@@ -2879,6 +2906,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         if (c.prefill_mode === 'hidden' && formState[c.id] != null && formState[c.id] !== '') return false;
         return true;
       });
+      // Find the last input component for Enter-to-submit
+      const inputTypes = ['short_text', 'long_text', 'email', 'phone', 'url', 'number', 'password', 'currency', 'date', 'datetime', 'time', 'address'];
+      const lastInputComp = [...components].reverse().find(c => inputTypes.includes(c.type));
+      const lastInputId = lastInputComp?.id;
+
       const bgImage = page.background_image || catalog.settings?.theme?.background_image;
 
       // Cart UI (shared between cover and standard)
@@ -2910,8 +2942,9 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
                     );
                   }
                   const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                  const submitHandler = comp.id === lastInputId ? handleNext : undefined;
                   return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: fieldError ? 'cf-field-error' : '' },
-                    h(RenderComponent, { comp, isCover: true, formState, onFieldChange }),
+                    h(RenderComponent, { comp, isCover: true, formState, onFieldChange, onSubmit: submitHandler, propOverrides: compPropOverrides }),
                     fieldError ? h('p', { className: 'text-xs text-red-300 font-medium mt-1', role: 'alert' }, fieldError.message) : null
                   );
                 }),
@@ -2972,8 +3005,9 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
                   );
                 }
                 const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                const submitHandler = comp.id === lastInputId ? handleNext : undefined;
                 return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: fieldError ? 'cf-field-error' : '' },
-                  h(RenderComponent, { comp, isCover: false, formState, onFieldChange }),
+                  h(RenderComponent, { comp, isCover: false, formState, onFieldChange, onSubmit: submitHandler, propOverrides: compPropOverrides }),
                   fieldError ? h('p', { className: 'text-xs text-red-500 font-medium mt-1', role: 'alert' }, fieldError.message) : null
                 );
               }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@officexapp/catalogs-cli",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {