@curenorway/kode-cli 1.6.0 → 1.7.0

package/dist/{chunk-GKNPODOV.js → chunk-KAYIHS2T.js}

@@ -861,6 +861,321 @@ The staging URL for testing is typically:
 
 Always test on staging before promoting to production!
 
+## \u{1F4F1} Mobile Testing
+
+**50%+ of web traffic is mobile!** Always test on mobile viewports.
+
+### Playwright Viewport Testing
+
+\`\`\`
+1. browser_navigate \u2192 page URL
+2. browser_resize \u2192 { width: 375, height: 812 } (iPhone)
+3. browser_snapshot \u2192 check mobile layout
+4. browser_click \u2192 test touch interactions
+\`\`\`
+
+### Common Mobile Viewports
+
+| Device | Width | Height |
+|--------|-------|--------|
+| iPhone SE | 375 | 667 |
+| iPhone 14 | 390 | 844 |
+| iPhone 14 Pro Max | 430 | 932 |
+| iPad | 768 | 1024 |
+| Android (common) | 360 | 800 |
+
+### Mobile-Specific Issues to Check
+
+- [ ] Touch targets large enough (44x44px minimum)
+- [ ] No horizontal scroll
+- [ ] Text readable without zooming
+- [ ] Modals/dropdowns work on touch
+- [ ] Hover states have touch alternatives
+
+### Testing Pattern
+
+\`\`\`
+// Test on desktop first
+browser_navigate(url)
+browser_snapshot \u2192 verify desktop
+
+// Then test mobile
+browser_resize({ width: 375, height: 812 })
+browser_snapshot \u2192 verify mobile layout
+browser_click(".mobile-menu-btn") \u2192 test mobile nav
+\`\`\`
+
+## \u{1F4DA} External Libraries
+
+Need GSAP, Swiper, Lodash, or other libraries? Here's how to manage them.
+
+### Pattern 1: CDN Script Loader (Recommended)
+
+Create a global "libraries" script that loads dependencies:
+
+\`\`\`javascript
+// Script: libraries.js (Global, autoLoad: true)
+// This loads FIRST and makes libraries available to other scripts
+
+window.CureLibs = window.CureLibs || {};
+
+// Load a library from CDN
+function loadLib(name, url, globalVar) {
+  return new Promise((resolve, reject) => {
+    if (window[globalVar]) {
+      resolve(window[globalVar]);
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => {
+      window.CureLibs[name] = window[globalVar];
+      resolve(window[globalVar]);
+    };
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+// Pre-load common libraries (add what you need)
+window.CureLibs.load = {
+  gsap: () => loadLib('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', 'gsap'),
+  scrollTrigger: () => loadLib('ScrollTrigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js', 'ScrollTrigger'),
+  swiper: () => loadLib('Swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', 'Swiper'),
+  lottie: () => loadLib('lottie', 'https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js', 'lottie'),
+  anime: () => loadLib('anime', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js', 'anime'),
+  lodash: () => loadLib('_', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js', '_'),
+};
+
+// Also load CSS for libraries that need it
+function loadCSS(url) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+window.CureLibs.loadCSS = loadCSS;
+\`\`\`
+
+### Pattern 2: Using Libraries in Scripts
+
+\`\`\`javascript
+// Script: hero-animations.js (depends on GSAP)
+
+(async function() {
+  // Wait for library to load
+  const gsap = await window.CureLibs.load.gsap();
+  await window.CureLibs.load.scrollTrigger();
+
+  // Register plugin
+  gsap.registerPlugin(ScrollTrigger);
+
+  // Now use GSAP
+  gsap.from('.hero-title', {
+    y: 100,
+    opacity: 0,
+    duration: 1,
+    scrollTrigger: {
+      trigger: '.hero-section',
+      start: 'top 80%',
+    }
+  });
+})();
+\`\`\`
+
+### Pattern 3: Swiper Slider Example
+
+\`\`\`javascript
+// Script: testimonial-slider.js
+
+(async function() {
+  // Load Swiper JS and CSS
+  const Swiper = await window.CureLibs.load.swiper();
+  window.CureLibs.loadCSS('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
+
+  // Wait for CSS to load
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Initialize Swiper
+  new Swiper('.testimonial-slider', {
+    slidesPerView: 1,
+    spaceBetween: 30,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+    breakpoints: {
+      768: { slidesPerView: 2 },
+      1024: { slidesPerView: 3 },
+    }
+  });
+})();
+\`\`\`
+
+### Popular Libraries CDN URLs
+
+| Library | CDN URL |
+|---------|---------|
+| GSAP | \`https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js\` |
+| ScrollTrigger | \`https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js\` |
+| Swiper | \`https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\` |
+| Lottie | \`https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js\` |
+| Anime.js | \`https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js\` |
+| Lodash | \`https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js\` |
+| Alpine.js | \`https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js\` |
+| Chart.js | \`https://cdn.jsdelivr.net/npm/chart.js\` |
+
+### Library Management Best Practices
+
+1. **Create a central libraries.js script** - Load ALL external deps from one place
+2. **Use async/await pattern** - Ensure libraries load before using them
+3. **Don't duplicate loading** - Check if library already exists
+4. **Version pin CDN URLs** - Avoid unexpected breaking changes
+5. **Load CSS when needed** - Some libraries (Swiper) need CSS too
+
+## \u{1F517} Script Dependencies & Load Order
+
+Scripts sometimes depend on each other. Here's how to manage that.
+
+### Understanding Load Order
+
+| Scope | autoLoad | When it Loads |
+|-------|----------|---------------|
+| Global | true | Immediately, inlined in init.js |
+| Global | false | On-demand via \`CK.loadScript()\` |
+| Page | true | When URL matches page pattern |
+| Page | false | On-demand via \`CK.loadScript()\` |
+
+**Global autoLoad scripts load FIRST**, in the order they appear in the script list.
+
+### Dependency Pattern
+
+\`\`\`javascript
+// Script: libraries.js (Global, autoLoad: true, position: FIRST)
+// Loads external libraries
+
+// Script: utils.js (Global, autoLoad: true, position: SECOND)
+// Depends on libraries.js, provides shared utilities
+
+// Script: hero-animations.js (Page-specific for /home)
+// Depends on both libraries.js and utils.js
+(async function() {
+  // Libraries are already loaded (global autoLoad runs first)
+  const gsap = await window.CureLibs.load.gsap();
+
+  // Utils are available
+  const elements = window.CureUtils.queryAll('.hero-title');
+
+  // Now animate
+  gsap.from(elements, { opacity: 0 });
+})();
+\`\`\`
+
+### Manual Loading for Complex Dependencies
+
+\`\`\`javascript
+// If you need explicit control, use CK.loadScript()
+async function initComplexFeature() {
+  // Load dependencies in order
+  await CK.loadScript('libraries');
+  await CK.loadScript('utils');
+  await CK.loadScript('complex-feature');
+}
+
+// Trigger when needed
+document.querySelector('.trigger-btn').addEventListener('click', initComplexFeature);
+\`\`\`
+
+### Avoiding Conflicts with Webflow
+
+Webflow has its own JS (Webflow.js, IX2 interactions). To avoid conflicts:
+
+1. **Wrap in IIFE** - Isolate your code
+   \`\`\`javascript
+   (function() {
+     // Your code here, isolated from global scope
+   })();
+   \`\`\`
+
+2. **Use unique prefixes** - \`CureSlider\` not \`Slider\`
+
+3. **Check before init** - Don't re-init Webflow components
+   \`\`\`javascript
+   if (!element.hasAttribute('data-cure-initialized')) {
+     // Initialize
+     element.setAttribute('data-cure-initialized', 'true');
+   }
+   \`\`\`
+
+4. **Respect Webflow events**
+   \`\`\`javascript
+   // Wait for Webflow to be ready
+   window.Webflow && window.Webflow.push(function() {
+     // Your code runs after Webflow initializes
+   });
+   \`\`\`
+
+## \u23EA Rollback & Version Recovery
+
+Things go wrong. Here's how to recover quickly.
+
+### Checking Version History
+
+Use \`kode_get_script\` to see version info, or check the Cure Kode UI.
+
+### Quick Rollback Pattern
+
+\`\`\`
+1. Identify the broken script
+2. kode_get_script \u2192 get current (broken) version
+3. Check version history in Cure Kode UI
+4. Copy the previous working version
+5. kode_update_script \u2192 paste the working code
+6. kode_deploy \u2192 push fix to staging
+7. Verify with Playwright
+8. kode_promote \u2192 restore production
+\`\`\`
+
+### Emergency Production Fix
+
+If production is broken RIGHT NOW:
+
+\`\`\`
+Option A: Quick disable
+- kode_update_script \u2192 set autoLoad: false
+- kode_deploy + kode_promote
+- Script stops loading immediately
+
+Option B: Empty script
+- kode_update_script \u2192 replace with: // temporarily disabled
+- kode_deploy + kode_promote
+
+Option C: Full rollback
+- Get previous version from history
+- kode_update_script with old code
+- kode_deploy + kode_promote
+\`\`\`
+
+### Prevention: Before Major Changes
+
+1. **Note the current working state** in context.md
+2. **Test thoroughly on staging** with Playwright
+3. **Deploy during low-traffic hours** if risky
+4. **Have rollback plan ready** before promoting
+
+### Debugging Production Issues
+
+\`\`\`
+1. browser_navigate \u2192 production URL
+2. browser_console_messages \u2192 look for errors
+3. Compare with staging \u2192 same error?
+4. If staging works but production doesn't:
+   - Check if promotion completed
+   - Check for caching issues (hard refresh)
+   - Check for environment differences
+\`\`\`
+
 `;
 }
 

package/dist/cli.js

@@ -15,7 +15,7 @@ import {
   readPageContext,
   statusCommand,
   watchCommand
-} from "./chunk-GKNPODOV.js";
+} from "./chunk-KAYIHS2T.js";
 
 // src/cli.ts
 import { Command } from "commander";

package/dist/index.js

@@ -27,7 +27,7 @@ import {
   updateScriptPurpose,
   watchCommand,
   writeContext
-} from "./chunk-GKNPODOV.js";
+} from "./chunk-KAYIHS2T.js";
 export {
   KodeApiClient,
   KodeApiError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curenorway/kode-cli",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "CLI tool for Cure Kode - manage JS/CSS scripts for Webflow sites",
   "type": "module",
   "bin": {