@lightspeed/crane 3.4.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "2.3.0",
+    "@lightspeed/crane-api": "2.3.1",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",

package/template/preview/assets/close.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z" fill="#69696D"/>
+</svg>

package/template/preview/assets/crane-logo.svg

@@ -0,0 +1,16 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_5165_10169)">
+    <path d="M-5.54181 -5.54102H33.5415V33.5423H-5.54181V-5.54102Z" fill="#191513"/>
+    <path d="M7 0.466797H21C24.6083 0.466797 27.5332 3.39174 27.5332 7V21C27.5332 24.6083 24.6083 27.5332 21 27.5332H7C3.39174 27.5332 0.466797 24.6083 0.466797 21V7C0.466797 3.39174 3.39174 0.466797 7 0.466797Z" fill="black" fill-opacity="0.01" stroke="url(#paint0_linear_5165_10169)" stroke-width="0.933333"/>
+    <path d="M14 5.25L14.8041 6.65321C14.9651 6.94359 14.9651 7.29841 14.8041 7.58868L10.0112 15.9274L12.279 19.8629C12.6328 20.4758 13.2923 20.8629 14 20.8629C14.7077 20.8629 15.3671 20.4758 15.721 19.8629L17.9888 15.9274L17.3936 14.8629L14.8203 19.3306C14.6595 19.6209 14.3378 19.7983 14.0161 19.7983C13.6783 19.7983 13.3727 19.6209 13.2119 19.3306L11.2335 15.9274L15.6888 8.18553L16.493 9.58873C16.6538 9.87903 16.6538 10.2338 16.493 10.5242L13.3888 15.9274L14 16.9919L17.3776 11.121L19.5972 14.9757C19.9349 15.5726 19.9349 16.2984 19.5972 16.8952L17.3454 20.8145C17.0076 21.4112 15.93 22.75 14 22.75C12.0699 22.75 11.0083 21.4112 10.6545 20.8145L8.4028 16.8952C8.06512 16.2984 8.06512 15.5726 8.4028 14.9757L14 5.25Z" fill="white"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear_5165_10169" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="white" stop-opacity="0.16"/>
+    </linearGradient>
+    <clipPath id="clip0_5165_10169">
+      <rect width="28" height="28" rx="7" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/template/preview/sections/preview.html

@@ -10,7 +10,7 @@
 
   <!-- Bootstrap and Fonts -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 
   <style>
     .top-bar {
@@ -31,10 +31,108 @@
       font-size: 30px;
       margin: 0;
     }
+
+    .extension-banner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 56px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #3A1AFE;
+      background: rgba(134, 157, 255, 0.16);
+      padding: 10px 40px;
+    }
+
+    .extension-banner-left {
+      display: flex;
+      width: 180px;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .extension-banner-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+    }
+
+    .extension-banner-close:hover {
+      opacity: 0.7;
+    }
+
+    .extension-banner-center {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .extension-banner-text {
+      color: #1E1E21;
+      text-align: center;
+      font-variant-numeric: lining-nums tabular-nums;
+      font-family: 'Lato', sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    .extension-banner .btn-install {
+      flex-shrink: 0;
+      width: 131px;
+      height: 36px;
+      min-width: 80px;
+      background: #3A1AFE;
+      color:#FFF;
+      border: none;
+      border-radius: 8px;
+      padding: 8px 12px;
+      font-variant-numeric: lining-nums tabular-nums;
+      font-family: 'Lato', sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+      cursor: pointer;
+      white-space: nowrap;
+      text-decoration: none;
+      text-align: center;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+    }
+
+    .extension-banner .btn-install:hover {
+      opacity: 0.9;
+    }
   </style>
 </head>
 <body>
 
+<!-- Extension Install Banner -->
+<div id="extensionBanner" class="extension-banner">
+  <div class="extension-banner-left">
+    <button class="extension-banner-close" onclick="document.getElementById('extensionBanner').style.display='none'" aria-label="Close banner">
+      <img src="../assets/close.svg" alt="Close" width="14" height="14">
+    </button>
+  </div>
+  <div class="extension-banner-center">
+    <img src="../assets/crane-logo.svg" alt="Crane" width="28" height="28">
+    <span class="extension-banner-text">
+      Install the Crane DevTools by Lightspeed from the Chrome Web Store and preview the full theme or selected sections live in the Instant Site Editor with no deployment needed.
+    </span>
+  </div>
+  <a class="btn-install" href="https://chromewebstore.google.com/detail/crane-devtools/dlfmlicbfjebcgpboleillocookdkifo" target="_blank" rel="noopener noreferrer">Install Extension</a>
+</div>
+
 <!-- Top Bar -->
 <div class="top-bar">
   <span class="label-text">Section Preview |</span>

package/template/preview/shared/preview.ts

@@ -343,20 +343,22 @@ function processImage(component: any, blockType: BlockType, blockName: string, k
       `http://${distFolderPath}/${blockType}/${blockName}/assets/` :
       `${distFolderPath}/${blockType}/${blockName}/assets/`;
 
-    const set = component.defaults?.imageData?.set || component.imageData?.set;
+    const imageData = component.defaults?.imageData || component.imageData;
+    const set = imageData?.set;
     const newSet = {
       'cropped-webp-100x200': { url: assetLocation + set?.MOBILE_WEBP_LOW_RES.url },
       'cropped-webp-1000x2000': { url: assetLocation + set?.MOBILE_WEBP_HI_RES.url },
       'webp-200x200': { url: assetLocation + set?.WEBP_LOW_RES.url },
       'webp-2000x2000': { url: assetLocation + set?.WEBP_HI_2X_RES.url },
     };
-    return {
+    const result = {
       [key]: {
         set: newSet,
-        ...(component.imageData?.borderInfo && { borderInfo: component.imageData.borderInfo }),
-        ...(component.imageData && { bucket: {} }),
+        ...(imageData?.borderInfo && { borderInfo: imageData.borderInfo }),
+        ...(imageData && { bucket: {} }),
       },
     };
+    return result;
   } catch (error) {
     console.error(`[Preview] Failed to process image "${key}":`, error);
     return {};

package/template/preview/vite.config.js

@@ -23,6 +23,7 @@ export default defineConfig({
         server.httpServer?.once('listening', () => {
           const baseUrl = `http://localhost:${server.config.server.port || 5173}`;
           console.log('Preview URL: ', baseUrl + '/preview/sections/preview.html\n');
+          console.log('To preview changes live in the IS Editor, make sure Crane Extension is installed.');
           console.log('🛑 Press Ctrl+C to stop the local server 🛑\n');
         });
       },

package/template/reference/sections/intro-slider/settings/translations.ts

@@ -9,6 +9,7 @@ export default translation.init({
     '$label.section_tagline.label': 'Tagline',
     '$label.section_tagline.placeholder': 'This label will be displayed above the title',
     '$label.section_button.label': 'Button',
+    '$label.section_button.title': 'Button title',
     '$label.section_image_text.label': 'Image title',
     '$label.section_image.label': 'Image',
 

package/template/sections/example-section/component/image/Image.vue

@@ -38,12 +38,12 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
 import {
+  OverlayType,
   useImageElementDesign,
   useTextareaElementDesign,
   useLayoutElementDesign,
 } from '@lightspeed/crane-api';
 import { Design } from '../../type.ts';
-import { ColorType } from '../../entity/color.ts';
 
 function getColor(color: string) {
   return `${color}20`;
@@ -75,10 +75,11 @@ const overlayConfig = computed(() => ({
 }));
 
 const overlayStyle = computed(() => {
-  if (imageDesign.visible && imageDesign.overlay?.type === ColorType.GRADIENT) {
+  const overlayType: OverlayType | undefined = imageDesign.overlay?.type;
+  if (imageDesign.visible && overlayType === OverlayType.GRADIENT) {
     return { background: overlayConfig.value.gradientOverlay };
   }
-  if (imageDesign.visible && imageDesign.overlay?.type === ColorType.SOLID) {
+  if (imageDesign.visible && overlayType === OverlayType.SOLID) {
     return { background: overlayConfig.value.solidOverlay };
   }
   return {};

package/template/footers/example-footer/entity/color.ts

@@ -1,4 +0,0 @@
-export enum ColorType {
-  SOLID = 'solid',
-  GRADIENT = 'gradient',
-}

package/template/reference/sections/featured-products/entity/color.ts

@@ -1,4 +0,0 @@
-export enum ColorType {
-  SOLID = 'solid',
-  GRADIENT = 'gradient',
-}

package/template/reference/sections/intro-slider/entity/color.ts

@@ -1,4 +0,0 @@
-export enum ColorType {
-  SOLID = 'solid',
-  GRADIENT = 'gradient',
-}

package/template/reference/sections/trending-categories/entity/color.ts

@@ -1,4 +0,0 @@
-export enum ColorType {
-  SOLID = 'solid',
-  GRADIENT = 'gradient',
-}

package/template/sections/example-section/entity/color.ts

@@ -1,4 +0,0 @@
-export enum ColorType {
-  SOLID = 'solid',
-  GRADIENT = 'gradient',
-}