@lightspeed/crane 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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.1",
     "@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

@@ -4,6 +4,7 @@ import { loadModule, renderServerModule } from './utils';
 
 let distFolderPath: string | null = null;
 let currentApp: any = null;
+let currentSectionName: string | null = null;
 
 export function setDistFolderPath(path: string): void {
   distFolderPath = path;
@@ -232,7 +233,7 @@ export function mergeDesign(
 export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any>): Record<string, any> {
   const parsedDesign: Record<string, any> = {};
   const parsedShowcaseDesign: Record<string, any> = {};
-  Object.entries(design).forEach(([key, comp]) => {
+  Object.entries(design || {}).forEach(([key, comp]) => {
     // Skip DIVIDER elements - they're UI-only and don't have runtime data
     if (comp?.type === 'DIVIDER') {
       return;
@@ -245,7 +246,7 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
     parsedDesign[key] = comp?.defaults || {};
   });
 
-  Object.entries(showCaseDesign).forEach(([key, comp]) => {
+  Object.entries(showCaseDesign || {}).forEach(([key, comp]) => {
     // Skip DIVIDER elements - they're UI-only and don't have runtime data
     if (comp?.type === 'DIVIDER') {
       return;
@@ -259,30 +260,45 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
   });
 
   let overridenDesign = mergeDesign(parsedDesign, parsedShowcaseDesign);
-  overridenDesign = updateHexColors(overridenDesign);
+
+  try {
+    overridenDesign = updateHexColors(overridenDesign);
+  } catch (error) {
+    console.error('[Preview] Failed to update hex colors:', error);
+  }
+
   replaceGlobalFont(overridenDesign, 'Roboto');
   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;
-  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 {
-    [key]: {
-      set: newSet,
-      ...(component.imageData?.borderInfo && { borderInfo: component.imageData.borderInfo }),
-      ...(component.imageData && { bucket: {} }),
-    },
-  };
+function processImage(component: any, sectionName: string, key: string, isApiRender: boolean = false): Record<string, any> {
+  try {
+    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 },
+      'webp-200x200': { url: assetLocation + set?.WEBP_LOW_RES.url },
+      'webp-2000x2000': { url: assetLocation + set?.WEBP_HI_2X_RES.url },
+    };
+    return {
+      [key]: {
+        set: newSet,
+        ...(component.imageData?.borderInfo && { borderInfo: component.imageData.borderInfo }),
+        ...(component.imageData && { bucket: {} }),
+      },
+    };
+  } catch (error) {
+    console.error(`[Preview] Failed to process image "${key}":`, error);
+    return {};
+  }
 }
 
-function processComponent(key: string, component: any, translations: any, sectionName?: string): any {
+export 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 +313,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 } };
       }
@@ -331,7 +347,7 @@ function processComponent(key: string, component: any, translations: any, sectio
     case 'SELECTBOX':
       return { [key]: component.defaults?.value ?? component.value };
     case 'IMAGE':
-      return processImage(component, sectionName!, key);
+      return processImage(component, sectionName!, key, isApiRender);
     case 'INFO':
       return {
         [key]: {
@@ -343,6 +359,11 @@ function processComponent(key: string, component: any, translations: any, sectio
           },
         },
       };
+    // Leaving PRODUCT_SELECTOR and CATEGORY_SELECTOR references for future implementation
+    case 'PRODUCT_SELECTOR':
+      return {};
+    case 'CATEGORY_SELECTOR':
+      return {};
     default:
       return {};
   }
@@ -354,13 +375,19 @@ function getContentToRender(
   contentTranslations: any,
   showcaseTranslations: any,
   sectionName: string,
+  isApiRender: boolean = false,
 ): any {
-  const parsedContent = Object.entries(content).reduce((acc, [k, c]) => {
-    return { ...acc, ...processComponent(k, c, contentTranslations, sectionName) };
+  let deckCardLabel: string | undefined = undefined;
+  const parsedContent = Object.entries(content || {}).reduce((acc, [k, c]) => {
+    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) };
+
+  const parsedShowcase = Object.entries(showcase || {}).reduce((acc, [k, c]) => {
+    return { ...acc, ...processComponent(k, c, showcaseTranslations, sectionName, isApiRender, {deckCardLabel}) };
   }, {});
 
   return overrideSettingsFromShowcase(parsedContent, parsedShowcase);
@@ -378,9 +405,22 @@ export function dropdownOptions(showcaseModules: Record<string, any>): Array<{ v
 }
 
 export function loadSectionCss(sectionName: string): void {
+  const cssHref = `${distFolderPath}/sections/${sectionName}/js/main/client/assets/client.css`;
+
+  // Check if CSS for this section is already loaded
+  const existingLink = document.querySelector(`link[href="${cssHref}"]`);
+  if (existingLink) {
+    return; // CSS already loaded
+  }
+
+  // Remove CSS from other sections (cleanup)
+  const oldLinks = document.querySelectorAll('link[data-section-css]');
+  oldLinks.forEach(link => link.remove());
+
   const link = document.createElement('link');
   link.rel = 'stylesheet';
   link.href = `${distFolderPath}/sections/${sectionName}/js/main/client/assets/client.css`;
+  link.setAttribute('data-section-css', sectionName);
   document.head.appendChild(link);
 }
 
@@ -426,12 +466,27 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
     },
   };
 
+  // Check if we're switching to a different section
+  const isSameSection = currentSectionName === sectionName;
+
   // Mount or update app
-  if (currentApp) {
+  if (currentApp && isSameSection) {
+    // Same section, just update with new showcase data
     currentApp.update(state);
   } else {
+    // Different section or first load - unmount old app and mount new one
+    if (currentApp) {
+      currentApp.unmount();
+      // Clear the app container
+      const appContainer = document.getElementById('app');
+      if (appContainer) {
+        appContainer.innerHTML = '';
+      }
+    }
+
     const { mount, update, unmount } = (client as any).default.init();
     currentApp = { update, unmount };
+    currentSectionName = sectionName;
     mount('#app', state);
   }
 }
@@ -476,6 +531,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/component/Stats.vue

@@ -71,7 +71,7 @@ const isCaptionVisible = computed<boolean>(() => captionDesign.visible ?? false)
 const valueStyle = computed<CSSProperties>(() => ({
   fontSize: `${valueDesign.size}px`,
   fontFamily: valueDesign.font,
-  color: (valueDesign.color as Color).hex,
+  color: (valueDesign.color as Color)?.hex,
   fontStyle: valueDesign.italic ? 'italic' : 'normal',
   fontWeight: valueDesign.bold ? 'bold' : 'normal',
 }));
@@ -79,7 +79,7 @@ const valueStyle = computed<CSSProperties>(() => ({
 const captionStyle = computed<CSSProperties>(() => ({
   fontSize: `${captionDesign.size}px`,
   fontFamily: captionDesign.font,
-  color: (captionDesign.color as Color).hex,
+  color: (captionDesign.color as Color)?.hex,
   fontStyle: captionDesign.italic ? 'italic' : 'normal',
   fontWeight: captionDesign.bold ? 'bold' : 'normal',
 }));