@officexapp/catalogs-cli 0.4.1 → 0.4.3

package/dist/index.js

@@ -322,6 +322,7 @@ function deepValidateCatalog(schema) {
   const edges = routing.edges || [];
   const entry = routing.entry;
   const KNOWN_TYPES = /* @__PURE__ */ new Set([
+    // Display / layout
     "heading",
     "paragraph",
     "image",
@@ -333,23 +334,50 @@ function deepValidateCatalog(schema) {
     "pricing_card",
     "testimonial",
     "faq",
+    "accordion",
     "timeline",
     "file_download",
     "iframe",
+    "table",
+    "social_links",
+    "tabs",
+    "countdown",
+    "comparison_table",
+    "progress_bar",
+    "modal",
+    "section_collapse",
+    "subform",
+    // Inputs
     "short_text",
+    "long_text",
+    "rich_text",
     "email",
     "phone",
     "url",
+    "address",
     "number",
-    "password",
-    "long_text",
+    "currency",
+    "date",
+    "datetime",
+    "time",
+    "date_range",
+    "dropdown",
+    "multiselect",
     "multiple_choice",
     "checkboxes",
-    "dropdown",
-    "slider",
-    "star_rating",
+    "picture_choice",
     "switch",
     "checkbox",
+    "choice_matrix",
+    "ranking",
+    "star_rating",
+    "slider",
+    "opinion_scale",
+    "file_upload",
+    "signature",
+    "password",
+    "location",
+    // Special
     "payment"
   ]);
   if (entry && !pageIds.has(entry)) {
@@ -1340,7 +1368,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 +2004,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 +2081,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 +2104,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 +2138,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 +2825,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 +3134,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
@@ -4307,6 +4404,24 @@ async function whoami() {
 }
 
 // src/index.ts
+var NODE_MIN = 18;
+var NODE_MAX = 22;
+var nodeMajor = parseInt(process.versions.node.split(".")[0], 10);
+if (nodeMajor < NODE_MIN || nodeMajor > NODE_MAX) {
+  console.error(`
+\x1B[31m\u2716 Unsupported Node.js version: v${process.versions.node}\x1B[0m`);
+  console.error(`  Catalog Kit CLI requires Node.js ${NODE_MIN}\u2013${NODE_MAX} (LTS recommended).`);
+  if (nodeMajor > NODE_MAX) {
+    console.error(`  Node ${nodeMajor}+ breaks the tsx ESM loader hooks used to load TypeScript catalog files.`);
+  }
+  console.error(`
+  \x1B[1mFix:\x1B[0m Install a compatible version with NVM (Node Version Manager):`);
+  console.error(`    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash`);
+  console.error(`    nvm install 22`);
+  console.error(`    nvm use 22
+`);
+  process.exit(1);
+}
 var __dirname = dirname3(fileURLToPath(import.meta.url));
 var { version } = JSON.parse(readFileSync5(join4(__dirname, "../package.json"), "utf-8"));
 var program = new Command();

package/package.json

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