@lightspeed/crane 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -64,8 +64,9 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "1.0.2",
+    "@lightspeed/crane-api": "1.1.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
+    "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "adm-zip": "^0.5.16",

package/template/headers/example-header/showcases/2.ts

@@ -17,9 +17,6 @@ export default {
       logoType: 'IMAGE',
       imageData: {
         set: {
-          LOW_RES: {
-            url: 'lightspeed_logo.png',
-          },
           MOBILE_WEBP_LOW_RES: {
             url: 'lightspeed_logo.png',
           },

package/template/page-templates/example-template/pages/custom.ts

@@ -0,0 +1,6 @@
+export default {
+  metadata: {
+    title: 'Custom Page',
+  },
+  sections: [],
+};

package/template/preview/shared/api-routes.ts

@@ -3,9 +3,54 @@ import type { IncomingMessage, ServerResponse } from 'http';
 import * as path from 'path';
 import { URL } from 'url';
 
+import type {
+  ContentEditor,
+  ContentSettings,
+  DeckContentEditor,
+  DesignSettings,
+  LayoutSettings,
+} from '@lightspeed/crane-api';
+
 import { getShowcaseData } from './preview';
 import { fetchTiles, updateTilesSection, updateCustomContent } from './utils';
 
+/**
+ * AppBlock type definition for block-config response
+ */
+interface AppBlock {
+  id: string;
+  type: string;
+  name: string;
+  contentEditors: ContentSettings;
+  designEditors: DesignSettings;
+  layouts: LayoutSettings[];
+}
+
+/**
+ * Layout config item for the config.layoutConfigList
+ */
+interface LayoutConfigItem {
+  name: string;
+  contentEditorConfig: {
+    // mainEditors contains all fields from each editor definition
+    // with type transformed and translations extracted to English
+    mainEditors: Record<string, unknown>[];
+    buttons: unknown[];
+  };
+  designEditorConfig: {
+    // mainEditors contains all fields from each editor definition
+    // with type transformed and translations extracted to English
+    mainEditors: Record<string, unknown>[];
+    customEditors: unknown[];
+    buttons: unknown[];
+    designEditorGroups: unknown[];
+  };
+  defaults: Record<string, unknown>;
+  deprecated: boolean;
+  svgIcon: string;
+  svgIconText: string;
+}
+
 
 /**
  * Extract query parameter from URL
@@ -52,6 +97,282 @@ function setNoCacheHeaders(res: ServerResponse): void {
   res.setHeader('Surrogate-Control', 'no-store');
 }
 
+/**
+ * Check if an object is a translation object (has 'en' key with string value)
+ */
+function isTranslationObject(obj: unknown): obj is Record<string, string> {
+  if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) return false;
+  const record = obj as Record<string, unknown>;
+  return 'en' in record && typeof record.en === 'string';
+}
+
+/**
+ * Recursively process a value and extract English translations where applicable
+ * - If the value is a translation object (has 'en' key), return the English value
+ * - If the value is an array, process each element
+ * - If the value is an object, process each property
+ * - Otherwise, return the value as-is
+ */
+function extractEnglishTranslations(value: unknown): unknown {
+  if (value === null || value === undefined) return value;
+
+  // Check if it's a translation object
+  if (isTranslationObject(value)) {
+    return value.en;
+  }
+
+  // Handle arrays
+  if (Array.isArray(value)) {
+    return value.map(item => extractEnglishTranslations(item));
+  }
+
+  // Handle objects (but not translation objects, which we already handled)
+  if (typeof value === 'object') {
+    const result: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
+      result[key] = extractEnglishTranslations(val);
+    }
+    return result;
+  }
+
+  // Return primitives as-is
+  return value;
+}
+
+/**
+ * Transform editor type to the expected format
+ * INPUTBOX -> TEXT_EDITOR
+ * TEXTAREA -> MULTILINE_TEXT_EDITOR
+ * All other types -> {TYPE}_EDITOR (e.g., DECK -> DECK_EDITOR)
+ */
+function transformEditorType(type: string): string {
+  const upperType = type.toUpperCase();
+  switch (upperType) {
+    case 'INPUTBOX':
+      return 'TEXT_EDITOR';
+    case 'TEXTAREA':
+      return 'MULTILINE_TEXT_EDITOR';
+    case 'BUTTON':
+      return 'ACTION_LINK_EDITOR';
+    default:
+      return `${upperType}_EDITOR`;
+  }
+}
+
+function processEditorExceptDeck(setting: ContentEditor, fieldName: string) {
+  const result: Record<string, unknown> = {
+    field: fieldName,
+  };
+
+  for (const [key, value] of Object.entries(setting)) {
+    if (key === 'type') {
+      result.type = transformEditorType(value as string);
+    } else {
+      result[key] = extractEnglishTranslations(value);
+    }
+  }
+  return result;
+}
+
+/**
+ * Process a DECK editor: transform cards.defaultCardContent.settings into editors array
+ */
+function processDeckEditor(editor: DeckContentEditor, fieldName: string): Record<string, unknown> {
+  const result: Record<string, unknown> = {
+    field: fieldName,
+    type: 'DECK_EDITOR',
+  };
+
+  // Process cards to extract editors and defaultCard
+  const cards = editor.cards as Record<string, unknown> | undefined;
+  if (cards && cards.defaultCardContent) {
+    const defaultCardContent = cards.defaultCardContent as Record<string, unknown>;
+    const settings = defaultCardContent.settings as ContentSettings;
+
+    // Create defaultCard with label and editors
+    const defaultCard: Record<string, unknown> = {
+      label: extractEnglishTranslations(defaultCardContent.label),
+    };
+
+    // Create editors array from settings and add to defaultCard
+    if (settings) {
+      const editors: Record<string, unknown>[] = [];
+      for (const [settingFieldName, settingEditor] of Object.entries(settings)) {
+        const processedEditor: Record<string, unknown> = processEditorExceptDeck(settingEditor, settingFieldName);
+        editors.push(processedEditor);
+      }
+      defaultCard.editors = editors;
+    }
+
+    result.defaultCard = defaultCard;
+  }
+
+  // Copy other fields (maxCards, addButtonLabel, label, etc.) but skip 'cards' and 'type'
+  for (const [key, value] of Object.entries(editor)) {
+    if (key === 'type' || key === 'cards') {
+      continue;
+    }
+    result[key] = extractEnglishTranslations(value);
+  }
+
+  return result;
+}
+
+/**
+ * Process an editor definition: keep all fields, transform type, extract English translations
+ * For DECK type, special processing is applied to create editors array from cards.defaultCardContent.settings
+ */
+function processEditor(editor: ContentEditor, fieldName: string): Record<string, unknown> {
+  const editorType = (editor.type as string || '').toUpperCase();
+
+  // Special handling for DECK type
+  if (editorType === 'DECK') {
+    return processDeckEditor(editor as DeckContentEditor, fieldName);
+  }
+
+  return processEditorExceptDeck(editor, fieldName);
+}
+
+
+/**
+ * Build layout config from appBlock data
+ * Creates the config.layoutConfigList structure from appBlock's layouts, contentEditors, and designEditors
+ */
+function buildLayoutConfig(appBlock: AppBlock): { type: string; layoutConfigList: LayoutConfigItem[] } {
+  const { layouts, contentEditors, designEditors } = appBlock;
+
+  // contentEditors and designEditors are objects with field names as keys
+  const contentEditorKeys = Object.keys(contentEditors);
+  const designEditorKeys = Object.keys(designEditors);
+
+  const layoutConfigList = layouts.map((layout, index) => {
+    const { layoutId, selectedContentSettings, selectedDesignSettings } = layout;
+
+    const contentFieldsToInclude = selectedContentSettings.length === 0
+      ? contentEditorKeys
+      : selectedContentSettings;
+
+    const contentMainEditors = contentFieldsToInclude
+      .filter((fieldName) => {
+        const editor = contentEditors[fieldName];
+        return editor && editor.type;
+      })
+      .map((fieldName) => {
+        const editor = contentEditors[fieldName];
+        return processEditor(editor as ContentEditor, fieldName);
+      });
+
+    // Determine which design fields to include
+    const designFieldsToInclude = selectedDesignSettings.length === 0
+      ? designEditorKeys
+      : selectedDesignSettings.map(s => s.fieldName);
+
+    // Build design mainEditors - include all design editor types with all their fields
+    const designMainEditors = designFieldsToInclude
+      .filter((fieldName) => {
+        const editor = designEditors[fieldName];
+        return editor && editor.type;
+      })
+      .map((fieldName) => {
+        const editor = designEditors[fieldName];
+        return processEditor(editor as ContentEditor, fieldName);
+      });
+
+    // Build defaults from design editors (extract English translations)
+    const defaults: Record<string, unknown> = {};
+    designFieldsToInclude.forEach((fieldName) => {
+      const editor = designEditors[fieldName];
+      if (editor && editor.defaults) {
+        defaults[fieldName] = extractEnglishTranslations(editor.defaults);
+      }
+    });
+
+    // Apply layout-specific design overrides from selectedDesignSettings
+    selectedDesignSettings.forEach((setting) => {
+      if (typeof setting === 'object' && setting.fieldName && setting.defaults) {
+        defaults[setting.fieldName] = {
+          ...(defaults[setting.fieldName] as Record<string, unknown> || {}),
+          ...(extractEnglishTranslations(setting.defaults) as Record<string, unknown>),
+        };
+      }
+    });
+
+    return {
+      name: layoutId,
+      contentEditorConfig: {
+        mainEditors: contentMainEditors,
+        buttons: [],
+      },
+      designEditorConfig: {
+        mainEditors: designMainEditors,
+        customEditors: [],
+        buttons: [],
+        designEditorGroups: [],
+      },
+      defaults,
+      deprecated: false,
+      svgIcon: 'CustomAutomaticLayoutIcon',
+      svgIconText: String(index + 1),
+    };
+  });
+
+  return {
+    type: 'CUSTOM',
+    layoutConfigList,
+  };
+}
+
+/**
+ * Handle GET /api/v1/block-config-full
+ * Fetches appBlock from /api/v1/block-config and adds config.layoutConfigList
+ */
+async function handleGetBlockConfigFull(
+  req: IncomingMessage,
+  res: ServerResponse,
+  sectionName: string,
+  typeParam: string,
+): Promise<void> {
+  try {
+    // Fetch appBlock from the CLI's /api/v1/block-config endpoint
+    const host = req.headers.host || 'localhost:5173';
+    const protocol = 'http';
+    const blockConfigUrl = `${protocol}://${host}/api/v1/block-config?section=${encodeURIComponent(sectionName)}&type=${encodeURIComponent(typeParam)}`;
+
+    const response = await fetch(blockConfigUrl);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      res.statusCode = response.status;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(errorText);
+      return;
+    }
+
+    const appBlock = await response.json() as AppBlock;
+
+    // Build the config with layoutConfigList
+    const config = buildLayoutConfig(appBlock);
+
+    // Return appBlock with config added
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      config,
+    }, null, 2));
+  } catch (error) {
+    console.error('[API Routes] ❌ Error fetching block config:', error);
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    setNoCacheHeaders(res);
+    res.end(JSON.stringify({
+      error: 'Failed to fetch block config',
+      message: error instanceof Error ? error.message : String(error),
+    }));
+  }
+}
+
 /**
  * Get all available showcases for a section from the dist folder
  */
@@ -67,15 +388,8 @@ function getAvailableShowcases(sectionName: string, distPath: string): string[]
     const showcases = fs.readdirSync(showcasesPath, { withFileTypes: true })
       .filter(dirent => dirent.isFile() && dirent.name.endsWith('.mjs'))
       .map(dirent => dirent.name.replace('.mjs', ''))
-      .sort((a, b) => {
-        // Sort numerically if both are numbers, otherwise alphabetically
-        const aNum = parseInt(a, 10);
-        const bNum = parseInt(b, 10);
-        if (!isNaN(aNum) && !isNaN(bNum)) {
-          return aNum - bNum;
-        }
-        return a.localeCompare(b);
-      });
+      // Filter out non-showcase files like 'translations'
+      .filter(name => name !== 'translations');
 
     return showcases;
   } catch (error) {
@@ -124,7 +438,6 @@ async function handleGetTile(
     });
 
     const allShowcaseData = await Promise.all(showcaseDataPromises);
-
     for (const { sectionName, showcaseId, content, design } of allShowcaseData) {
       responseData = updateTilesSection(responseData, sectionName, showcaseId, content, design);
     }
@@ -159,7 +472,14 @@ async function handleUpdateTile(
 ): Promise<void> {
   const requestBody = await readRequestBody(req);
   try {
-    // Read request body containing tiles array
+    // If URL matches tile/custom-* pattern, return request body as-is
+    if (originalUrl && /\/tile\/custom-[a-zA-Z0-9]+/.test(originalUrl)) {
+      res.statusCode = 200;
+      res.setHeader('Content-Type', 'application/json');
+      setNoCacheHeaders(res);
+      res.end(JSON.stringify(requestBody, null, 2));
+      return;
+    }
 
     if (!requestBody || !Array.isArray(requestBody.tiles)) {
       res.statusCode = 400;
@@ -583,6 +903,12 @@ export function handleApiRequest(
     return;
   }
 
+  if (url.startsWith('/api/v1/block-config-full')) {
+    const typeParam = getQueryParam(url, 'type') || 'SECTION';
+    handleGetBlockConfigFull(req, res, sectionName, typeParam);
+    return;
+  }
+
   if (url.startsWith('/api/v1/client-js')) {
     handleGetClientJs(req, res, sectionName);
     return;

package/template/preview/shared/preview.ts

@@ -264,9 +264,12 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
   return overridenDesign;
 }
 
-function processImage(component: any, sectionName: string, key: string): Record<string, any> {
-  const assetLocation = `${distFolderPath}/sections/${sectionName}/assets/`;
-  const set = component.defaults?.set || component.imageData?.set;
+function processImage(component: any, sectionName: string, key: string, isApiRender: boolean = false): Record<string, any> {
+  const assetLocation = isApiRender ?
+    `http://${distFolderPath}/sections/${sectionName}/assets/` :
+    `${distFolderPath}/sections/${sectionName}/assets/`;
+
+  const set = component.defaults?.imageData?.set || component.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 },
@@ -282,7 +285,8 @@ function processImage(component: any, sectionName: string, key: string): Record<
   };
 }
 
-function processComponent(key: string, component: any, translations: any, sectionName?: string): any {
+function processComponent(key: string, component: any, translations: any, sectionName?: string,
+  isApiRender: boolean = false, extraParams?: Record<string, any>): any {
   if (!component?.type) return {};
   switch (component.type) {
     case 'INPUTBOX':
@@ -297,16 +301,16 @@ function processComponent(key: string, component: any, translations: any, sectio
       if (defaultSettings) {
         const result: Record<string, any> = {};
         Object.entries(defaultSettings).forEach(([k, c]) => {
-          Object.assign(result, processComponent(k, c, translations));
+          Object.assign(result, processComponent(k, c, translations, sectionName, isApiRender));
         });
         return { [key]: result };
       } else {
-        const cards = component.cards.map((card: any) => {
+        const cards = component.cards.map((card: any, index: number) => {
           const cardContent: Record<string, any> = {};
           Object.entries(card.settings).forEach(([k, c]) => {
-            Object.assign(cardContent, processComponent(k, c, translations, sectionName));
+            Object.assign(cardContent, processComponent(k, c, translations, sectionName, isApiRender));
           });
-          return { settings: cardContent };
+          return { settings: cardContent, id: index.toString(), title: extraParams?.deckCardLabel};
         });
         return { [key]: { cards } };
       }
@@ -321,12 +325,17 @@ function processComponent(key: string, component: any, translations: any, sectio
         },
       };
     }
-    case 'TOGGLE':
-      return { [key]: component.defaults };
+    case 'TOGGLE': {
+      return {
+        [key]: {
+          enabled: component.defaults?.enabled ?? component.enabled
+        }
+      };
+    }
     case 'SELECTBOX':
-      return { [key]: component.defaults.value };
+      return { [key]: component.defaults?.value ?? component.value };
     case 'IMAGE':
-      return processImage(component, sectionName!, key);
+      return processImage(component, sectionName!, key, isApiRender);
     case 'INFO':
       return {
         [key]: {
@@ -349,13 +358,19 @@ function getContentToRender(
   contentTranslations: any,
   showcaseTranslations: any,
   sectionName: string,
+  isApiRender: boolean = false,
 ): any {
+  let deckCardLabel: string | undefined = undefined;
   const parsedContent = Object.entries(content).reduce((acc, [k, c]) => {
-    return { ...acc, ...processComponent(k, c, contentTranslations, sectionName) };
+    if ((c as any).type === 'DECK') {
+      deckCardLabel = contentTranslations[(c as any).cards?.defaultCardContent?.label];
+    }
+    return { ...acc, ...processComponent(k, c, contentTranslations, sectionName, isApiRender) };
   }, {});
 
+
   const parsedShowcase = Object.entries(showcase).reduce((acc, [k, c]) => {
-    return { ...acc, ...processComponent(k, c, showcaseTranslations, sectionName) };
+    return { ...acc, ...processComponent(k, c, showcaseTranslations, sectionName, isApiRender, {deckCardLabel}) };
   }, {});
 
   return overrideSettingsFromShowcase(parsedContent, parsedShowcase);
@@ -471,6 +486,7 @@ export async function getShowcaseData(sectionName: string, showcaseId: string, d
     (contentTranslations as any).default.en,
     (showcaseTranslations as any).default.en,
     sectionName,
+    true
   );
 
   return {

package/template/preview/shared/utils.ts

@@ -204,7 +204,6 @@ async function updateSectionShowcase(
     if (!sectionIds || sectionIds.length === 0) {
       return false;
     }
-
     // Process each section ID
     for (const sectionId of sectionIds) {
       // Find the section by ID in custom content

package/template/preview/vite.config.js

@@ -98,6 +98,11 @@ export default defineConfig({
 
           // Handle API routes
           if (url.startsWith('/api/v1/')) {
+            // Skip block-config route (but not block-config-full) - handled by CLI middleware
+            if (url.startsWith('/api/v1/block-config') && !url.startsWith('/api/v1/block-config-full')) {
+              return next();
+            }
+
             // Extract auth header from request
             const authHeader = req.headers['authorization'] || '';
 

package/template/reference/sections/about-us/settings/content.ts

@@ -1,4 +1,4 @@
-const content: ContentEditor = {
+export default {
   title: {
     type: 'INPUTBOX',
     label: '$label.section_title.label',
@@ -17,15 +17,17 @@ const content: ContentEditor = {
             type: 'INPUTBOX',
             label: '$label.stat_value.label',
             placeholder: '$label.stat_value.placeholder',
-            text: '$label.stat_value.default.text',
-            title: '$label.stat_value.default.text',
+            defaults: {
+              text: '$label.stat_value.default.text',
+            },
           },
           stat_caption: {
             type: 'INPUTBOX',
             label: '$label.stat_caption.label',
             placeholder: '$label.stat_caption.placeholder',
-            text: '$label.stat_caption.default.text',
-            title: '$label.stat_caption.default.text',
+            defaults: {
+              text: '$label.stat_caption.default.text',
+            },
           },
         },
       },
@@ -34,28 +36,33 @@ const content: ContentEditor = {
   button: {
     type: 'BUTTON',
     label: '$label.button_content.label',
-    title: '$label.button_content.title',
+    defaults: {
+      title: '$label.button_content.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
   },
   image: {
     type: 'IMAGE',
     label: '$label.image_content.label',
     defaults: {
-      set: {
-        MOBILE_WEBP_LOW_RES: {
-          url: 'our_company_in_numbers.jpg',
-        },
-        MOBILE_WEBP_HI_RES: {
-          url: 'our_company_in_numbers.jpg',
-        },
-        WEBP_LOW_RES: {
-          url: 'our_company_in_numbers.jpg',
-        },
-        WEBP_HI_2X_RES: {
-          url: 'our_company_in_numbers.jpg',
+      imageData: {
+        set: {
+          MOBILE_WEBP_LOW_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          WEBP_LOW_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
         },
+        borderInfo: {},
       },
-      borderInfo: {},
     },
   },
-};
-export default content;
+} as const;

package/template/reference/sections/about-us/settings/design.ts

@@ -66,7 +66,7 @@ export default {
     defaults: {
       appearance: 'SOLID',
       size: 'MEDIUM',
-      style: 'pill',
+      shape: 'PILL',
       color: '#000000',
       visible: true,
     },

package/template/reference/sections/about-us/showcases/1.ts

@@ -103,6 +103,7 @@ export default {
       type: 'BUTTON',
       title: '$label.showcase_1.button_content.title',
       buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
     },
   },
   design: {

package/template/reference/sections/about-us/showcases/2.ts

@@ -91,6 +91,7 @@ export default {
       type: 'BUTTON',
       title: '$label.showcase_2.button_content.title',
       buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
     },
   },
   design: {

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

@@ -17,7 +17,11 @@ export default {
   section_button: {
     type: 'BUTTON',
     label: '$label.section_button.label',
-    title: '$label.section_button.title',
+    defaults: {
+      title: '$label.section_button.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
   },
   slider: {
     type: 'DECK',

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

@@ -48,7 +48,7 @@ export default {
     defaults: {
       appearance: 'SOLID',
       size: 'MEDIUM',
-      style: 'pill',
+      shape: 'PILL',
       color: '#000000',
       visible: true,
     },

package/template/reference/sections/intro-slider/showcases/1.ts

@@ -26,6 +26,7 @@ export default {
       type: 'BUTTON',
       title: '$label.showcase_1.section_button.title',
       buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
     },
     slider: {
       type: 'DECK',