@officexapp/catalogs-cli 0.4.1 → 0.4.2

package/dist/index.js

@@ -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 = {
@@ -1976,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;
@@ -2021,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(() => {
@@ -2044,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,
@@ -2066,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)
           )
         )
       );
@@ -2746,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' },
@@ -3037,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.1",
+  "version": "0.4.2",
   "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {