@officexapp/catalogs-cli 0.4.0 → 0.4.2

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 || {};
@@ -1340,7 +1340,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         }
 
         case 'html':
-          return h('div', { className: compClass, style: compStyle, dangerouslySetInnerHTML: { __html: props.content || '' } });
+          return h(HtmlBlock, { content: props.content || '', className: compClass, style: compStyle, formState });
 
         case 'banner': {
           const variants = {
@@ -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(); } },
         })
       );
     }
@@ -1975,6 +1976,38 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       );
     }
 
+    // --- HtmlBlock: renders HTML content and executes inline <script> tags ---
+    function HtmlBlock({ content, className, style, formState }) {
+      const ref = React.useRef(null);
+      const executedRef = React.useRef(new Set());
+      // Template interpolation: replace {{field_id}} with form state values
+      const interpolated = React.useMemo(() =>
+        (content || '').replace(/{{(w+)}}/g, (_, id) => formState?.[id] ?? ''),
+        [content, formState]
+      );
+      React.useEffect(() => {
+        const container = ref.current;
+        if (!container) return;
+        const scripts = container.querySelectorAll('script');
+        scripts.forEach((orig) => {
+          const key = orig.src || orig.textContent || '';
+          if (executedRef.current.has(key)) return;
+          executedRef.current.add(key);
+          if (orig.src) {
+            const s = document.createElement('script');
+            s.src = orig.src;
+            if (orig.type) s.type = orig.type;
+            s.async = true;
+            container.appendChild(s);
+          } else if (orig.textContent) {
+            try { new Function(orig.textContent)(); }
+            catch (e) { console.error('[CatalogKit:dev] Inline script error:', e); }
+          }
+        });
+      }, [interpolated]);
+      return h('div', { ref, className: 'prose prose-sm max-w-none ' + (className || ''), style, dangerouslySetInnerHTML: { __html: interpolated } });
+    }
+
     function ActionButton({ action, themeColor, onAction }) {
       const st = action.style || 'primary';
       const hasSide = !!action.side_statement;
@@ -2020,7 +2053,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       );
     }
 
-    function StickyBottomBar({ config, page, formState, cartItems, themeColor, onNext, onAction, onBack, historyLen }) {
+    function StickyBottomBar({ config, page, formState, cartItems, themeColor, onNext, onAction, onFieldAndNavigate, onBack, historyLen }) {
       const [visible, setVisible] = React.useState(!config.delay_ms);
       const [scrollDir, setScrollDir] = React.useState('down');
       React.useEffect(() => {
@@ -2043,15 +2076,27 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         glass_dark: { backgroundColor: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(16px)', color: 'white' },
         gradient: { background: 'linear-gradient(135deg, ' + themeColor + ' 0%, ' + themeColor + 'dd 100%)', color: 'white' },
       };
-      const handlePrimary = () => {
-        const dispatch = config.primary_action?.dispatch;
-        if (!dispatch || dispatch === 'next') { onNext(); return; }
-        if (dispatch.startsWith('action:')) {
-          const actionId = dispatch.slice(7);
+      const dispatchAction = (act) => {
+        const cmd = act?.action || 'next';
+        if (cmd === 'next') { onNext(); return; }
+        if (cmd.startsWith('action:')) {
+          const actionId = cmd.slice(7);
           const action = page.actions?.find(a => a.id === actionId);
           if (action) onAction(action); else onNext();
-        } else { onNext(); }
+          return;
+        }
+        if (cmd.startsWith('field:')) {
+          const parts = cmd.slice(6).split(':');
+          if (parts.length >= 2) { onFieldAndNavigate(parts[0], parts.slice(1).join(':')); }
+          return;
+        }
+        onNext();
       };
+      const primaryLabel = config.primary?.label
+        ? interpolate(config.primary.label)
+        : config.button_text || page.submit_label || 'Continue';
+      const secondaryAction = config.secondary;
+      const secondaryLabel = secondaryAction?.label ? interpolate(secondaryAction.label) : null;
       return h('div', {
         className: 'cf-sticky-bar' + (show ? '' : ' hidden'),
         style: bgStyles[config.style || 'solid'] || bgStyles.solid,
@@ -2065,12 +2110,19 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           h('div', { className: 'flex items-center gap-3' },
             config.cart_badge && cartItems.length > 0
               ? h('span', { className: 'bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center' }, cartItems.length) : null,
+            secondaryLabel
+              ? h('button', {
+                  className: 'text-sm font-medium hover:opacity-80 transition-opacity',
+                  style: { color: config.style === 'glass_dark' ? 'rgba(255,255,255,0.6)' : '#6b7280' },
+                  onClick: () => dispatchAction(secondaryAction),
+                }, secondaryLabel)
+              : null,
             h('button', {
               className: 'cf-btn-primary text-white text-sm',
               style: { backgroundColor: config.style === 'gradient' ? 'rgba(255,255,255,0.9)' : themeColor, color: config.style === 'gradient' ? themeColor : 'white' },
               disabled: config.disabled,
-              onClick: handlePrimary,
-            }, interpolate(config.primary_action?.label || page.submit_label || 'Continue'))
+              onClick: () => dispatchAction(config.primary),
+            }, primaryLabel)
           )
         )
       );
@@ -2414,6 +2466,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 +2611,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 +2619,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 +2632,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 +2674,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 +2708,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 +2747,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]);
@@ -2719,6 +2797,24 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         navigateTo(nextPageId);
       }, [currentPageId, routing, formState, pages, addToCart, navigateTo, runValidation]);
 
+      // --- Field + Navigate (for sticky bar field: dispatch) ---
+      const handleFieldAndNavigate = React.useCallback((fieldId, value) => {
+        const newFormState = { ...formState, [fieldId]: value };
+        setFormState(newFormState);
+        const page = pages[currentPageId];
+        if (page) {
+          const errors = validatePage(page, newFormState, devContext);
+          setValidationErrors(errors);
+          if (errors.length > 0) {
+            const el = document.querySelector('[data-component-id="' + errors[0].componentId + '"]');
+            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            return;
+          }
+        }
+        const nextPageId = getNextPage(routing, currentPageId, newFormState, devContext);
+        navigateTo(nextPageId);
+      }, [currentPageId, routing, formState, pages, navigateTo]);
+
       // --- Resume prompt ---
       if (showResumeModal) {
         return h('div', { className: 'cf-resume-backdrop' },
@@ -2879,6 +2975,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 +3011,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 +3074,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
                 );
               }),
@@ -3003,7 +3106,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
             ? h(StickyBottomBar, {
                 config: { ...(catalog.settings?.sticky_bar || {}), ...(page.sticky_bar || {}) },
                 page, formState, cartItems, themeColor,
-                onNext: handleNext, onAction: handleAction, onBack: handleBack,
+                onNext: handleNext, onAction: handleAction, onFieldAndNavigate: handleFieldAndNavigate, onBack: handleBack,
                 historyLen: history.length,
               })
             : null

package/package.json

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