appshot-cli 1.0.2 → 2.0.0

package/dist/templates/registry.js

@@ -1,587 +1,233 @@
 /**
- * Template Registry for App Store Screenshots
+ * v2 Template Registry for App Store Screenshots
  *
- * Each template includes a complete visual style preset with:
- * - Background (gradient or image configuration)
- * - Device positioning and scale
- * - Caption placement and styling
- * - Device-specific optimizations
+ * Templates map to fixed v2 layouts (header/footer/screenshot-only)
+ * and background + caption appearance only.
  */
-// Template definitions
 export const templates = [
     {
-        id: 'modern',
-        name: 'Modern Vibrant',
-        description: 'Eye-catching gradient with floating device and clean captions',
+        id: 'ocean-header',
+        name: 'Ocean Header',
+        description: 'Cool blue gradient with header caption layout',
         category: 'modern',
+        layout: 'header',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#667eea', '#764ba2', '#f093fb'],
-                direction: 'diagonal'
-            }
-        },
-        deviceStyle: {
-            frameScale: 0.85,
-            framePosition: 50 // Centered
-        },
-        captionStyle: {
-            font: 'SF Pro Display',
-            fontsize: 64,
-            color: '#021d2f',
-            position: 'above',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 3,
-                lineHeight: 1.4,
-                marginTop: 20,
-                marginBottom: 20
+                colors: ['#00C6FB', '#005BEA'],
+                direction: 'top-bottom'
             }
         },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.9,
-                framePosition: 25
-            },
-            iphone: {
-                // Add sensible top clearance for 'above' captions on iPhone
-                captionBox: { marginTop: 56 },
-                captionSize: 72
-            },
-            watch: {
-                frameScale: 0.9,
-                framePosition: 100,
-                partialFrame: true,
-                frameOffset: 17,
-                captionSize: 24,
-                captionPosition: 'above',
-                captionBox: {
-                    marginBottom: 8,
-                    marginTop: 18,
-                    autoSize: true,
-                    lineHeight: 1.4,
-                    maxLines: 2
-                }
-            },
-            ipad: {
-                frameScale: 0.90,
-                framePosition: 60
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#FFFFFF'
         }
     },
     {
-        id: 'minimal',
-        name: 'Minimal Clean',
-        description: 'Soft pastel background with elegant typography',
-        category: 'minimal',
+        id: 'sunset-footer',
+        name: 'Sunset Footer',
+        description: 'Warm sunset gradient with footer caption layout',
+        category: 'bold',
+        layout: 'footer',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#ffecd2', '#fcb69f'],
+                colors: ['#FF5F6D', '#FFC371'],
                 direction: 'top-bottom'
             }
         },
-        deviceStyle: {
-            frameScale: 0.95,
-            framePosition: 50 // Lower position
-        },
-        captionStyle: {
-            font: 'Helvetica Neue',
-            fontsize: 56,
-            color: '#1b2a3a',
-            position: 'above',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 2,
-                lineHeight: 1.3,
-                marginTop: 40,
-                marginBottom: 0
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#1B1B1B'
+        }
+    },
+    {
+        id: 'clean-screenshot',
+        name: 'Clean Screenshot',
+        description: 'Minimal background with screenshot-only layout',
+        category: 'clean',
+        layout: 'screenshot-only',
+        background: {
+            mode: 'gradient',
+            gradient: {
+                colors: ['#F5F7FA', '#C3CFE2'],
+                direction: 'top-bottom'
             }
         },
-        deviceOverrides: {
-            iphone: {
-                frameScale: 0.95,
-                framePosition: 50,
-                captionBox: { marginTop: 56 },
-                captionSize: 64
-            },
-            watch: {
-                frameScale: 0.85,
-                framePosition: 0,
-                captionSize: 22,
-                captionPosition: 'below',
-                captionBox: {
-                    marginTop: 36,
-                    marginBottom: 12,
-                    autoSize: true,
-                    lineHeight: 1.4,
-                    maxLines: 2
-                }
-            },
-            ipad: {
-                frameScale: 0.90,
-                framePosition: 50
-            }, mac: {
-                frameScale: 0.90,
-                framePosition: 25
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#111111'
         }
     },
     {
-        id: 'bold',
-        name: 'Bold Impact',
-        description: 'Dark dramatic gradient with large device and overlay captions',
-        category: 'bold',
+        id: 'pastel-header',
+        name: 'Pastel Header',
+        description: 'Soft pastel tones with header caption layout',
+        category: 'minimal',
+        layout: 'header',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#0f0c29', '#302b63', '#24243e'],
-                direction: 'diagonal'
+                colors: ['#FFEECC', '#FFD6C2'],
+                direction: 'top-bottom'
             }
         },
-        deviceStyle: {
-            frameScale: 0.9,
-            framePosition: 10 // Centered-high position
-        },
-        captionStyle: {
-            font: 'SF Pro Display',
-            fontsize: 64,
-            color: '#FFFFFF',
-            position: 'overlay',
-            align: 'center'
-        },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.90,
-                framePosition: 0,
-                captionBox: {
-                    marginTop: 0,
-                    marginBottom: 20
-                }
-            },
-            iphone: {
-                frameScale: 0.90,
-                framePosition: 20,
-                captionBox: {
-                    marginTop: 0,
-                    marginBottom: 20
-                },
-                captionSize: 72
-            },
-            ipad: {
-                frameScale: 0.90,
-                framePosition: 25,
-                captionBox: {
-                    marginTop: 0,
-                    marginBottom: 20
-                }
-            },
-            watch: {
-                frameScale: 0.9,
-                framePosition: 0,
-                partialFrame: true,
-                frameOffset: 17,
-                captionBox: {
-                    marginBottom: 10,
-                    lineHeight: 1.4,
-                    maxLines: 2
-                }
-            }
+        caption: {
+            font: 'Helvetica Neue Bold',
+            color: '#1B2A3A'
         }
     },
     {
-        id: 'nerdy',
-        name: 'Nerdy OSS',
-        description: 'Grid-lined midnight background with JetBrains Mono captions',
+        id: 'noir-footer',
+        name: 'Noir Footer',
+        description: 'Dark dramatic gradient with footer caption layout',
         category: 'bold',
+        layout: 'footer',
         background: {
-            mode: 'auto'
-        },
-        deviceStyle: {
-            frameScale: 0.9,
-            framePosition: 12
-        },
-        captionStyle: {
-            font: 'JetBrains Mono Bold',
-            fontsize: 60,
-            color: '#7CFFCB',
-            position: 'overlay',
-            align: 'center',
-            box: {
-                marginBottom: 32
+            mode: 'gradient',
+            gradient: {
+                colors: ['#0F0C29', '#302B63', '#24243E'],
+                direction: 'diagonal'
             }
         },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.9,
-                framePosition: 8,
-                captionBox: {
-                    marginTop: 0,
-                    marginBottom: 24
-                }
-            },
-            iphone: {
-                frameScale: 0.9,
-                framePosition: 18,
-                captionBox: {
-                    marginTop: 12,
-                    marginBottom: 24
-                },
-                captionSize: 70
-            },
-            ipad: {
-                frameScale: 0.9,
-                framePosition: 20,
-                captionBox: {
-                    marginTop: 16,
-                    marginBottom: 24
-                }
-            },
-            watch: {
-                frameScale: 0.96,
-                framePosition: 0,
-                partialFrame: true,
-                frameOffset: 17,
-                captionSize: 26,
-                captionPosition: 'below',
-                captionBox: {
-                    marginTop: 14,
-                    marginBottom: 16,
-                    autoSize: true,
-                    lineHeight: 1.4,
-                    maxLines: 2
-                }
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#FFFFFF'
         }
     },
     {
-        id: 'elegant',
-        name: 'Elegant Professional',
-        description: 'Sophisticated monochrome with floating device',
+        id: 'silver-header',
+        name: 'Silver Header',
+        description: 'Elegant silver gradient with header caption layout',
         category: 'elegant',
+        layout: 'header',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#8e9eab', '#eef2f3'],
+                colors: ['#E5E5E5', '#BFBFBF'],
                 direction: 'top-bottom'
             }
         },
-        deviceStyle: {
-            frameScale: 0.95,
-            framePosition: 50
-        },
-        captionStyle: {
-            font: 'Georgia',
-            fontsize: 68,
-            color: '#132235',
-            position: 'below',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 2,
-                lineHeight: 1.5,
-                marginTop: 0,
-                marginBottom: 60
-            }
-        },
-        deviceOverrides: {
-            iphone: {
-                frameScale: 0.9,
-                framePosition: 50,
-                captionBox: { marginBottom: 60 },
-                captionSize: 76
-            },
-            mac: {
-                frameScale: 0.9,
-                framePosition: 0
-            },
-            watch: {
-                frameScale: 0.80,
-                framePosition: 25,
-                captionSize: 20,
-                captionPosition: 'below',
-                captionBox: {
-                    marginTop: 0,
-                    marginBottom: 0
-                }
-            },
-            ipad: {
-                frameScale: 0.90,
-                framePosition: 25
-            }
+        caption: {
+            font: 'New York Bold',
+            color: '#111111'
         }
     },
     {
-        id: 'showcase',
-        name: 'Showcase',
-        description: 'Feature your app with custom backgrounds',
-        category: 'professional',
+        id: 'tropical-header',
+        name: 'Tropical Header',
+        description: 'Bright tropical gradient with header caption layout',
+        category: 'playful',
+        layout: 'header',
         background: {
-            mode: 'auto', // Will auto-detect background.png
-            fallback: 'gradient',
+            mode: 'gradient',
             gradient: {
-                colors: ['#4facfe', '#00f2fe'],
-                direction: 'left-right'
-            }
-        },
-        deviceStyle: {
-            frameScale: 0.90,
-            framePosition: 50
-        },
-        captionStyle: {
-            font: 'SF Pro Display',
-            fontsize: 64,
-            color: '#FFFFFF',
-            position: 'above',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 3,
-                lineHeight: 1.4,
-                marginTop: 30,
-                marginBottom: 10
+                colors: ['#43CEA2', '#185A9D'],
+                direction: 'top-bottom'
             }
         },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.90,
-                framePosition: 50,
-                captionBox: {
-                    marginTop: 20,
-                    marginBottom: 0
-                }
-            },
-            watch: {
-                frameScale: 0.75,
-                framePosition: 95,
-                captionSize: 28,
-                captionPosition: 'above',
-                captionBox: {
-                    marginTop: 10,
-                    marginBottom: 0
-                }
-            },
-            ipad: {
-                frameScale: 0.85,
-                framePosition: 50,
-                captionBox: {
-                    marginTop: 10,
-                    marginBottom: 0
-                }
-            }, iphone: {
-                frameScale: 0.9,
-                framePosition: 50,
-                captionBox: { marginTop: 20 },
-                captionSize: 72
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#FFFFFF'
         }
     },
     {
-        id: 'playful',
-        name: 'Playful Energy',
-        description: 'Bright, fun gradients perfect for games and entertainment apps',
-        category: 'playful',
+        id: 'slate-footer',
+        name: 'Slate Footer',
+        description: 'Professional slate gradient with footer caption layout',
+        category: 'professional',
+        layout: 'footer',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#fa709a', '#fee140', '#fa709a'],
-                direction: 'diagonal'
-            }
-        },
-        deviceStyle: {
-            frameScale: 0.95,
-            framePosition: 60
-        },
-        captionStyle: {
-            font: 'SF Pro Display',
-            fontsize: 68,
-            color: '#FFFFFF',
-            position: 'above',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 2,
-                lineHeight: 1.3,
-                marginTop: 0,
-                marginBottom: 0
+                colors: ['#2C3E50', '#4CA1AF'],
+                direction: 'top-bottom'
             }
         },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.90,
-                framePosition: 25,
-                captionBox: {
-                    marginTop: 20,
-                    marginBottom: 0
-                }
-            },
-            iphone: {
-                frameScale: 0.9,
-                framePosition: 50,
-                captionBox: { marginTop: 56 },
-                captionSize: 76
-            },
-            watch: {
-                frameScale: 0.75,
-                framePosition: 40,
-                captionSize: 24,
-                captionPosition: 'below',
-                captionBox: {
-                    marginTop: 0
-                }
-            },
-            ipad: {
-                frameScale: 0.90,
-                framePosition: 50,
-                captionBox: {
-                    marginTop: 20,
-                    marginBottom: 0
-                }
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#FFFFFF'
         }
     },
     {
-        id: 'corporate',
-        name: 'Corporate Professional',
-        description: 'Clean, professional look for business and productivity apps',
+        id: 'midnight-header',
+        name: 'Midnight Header',
+        description: 'Deep blue gradient with header caption layout',
         category: 'professional',
+        layout: 'header',
         background: {
             mode: 'gradient',
             gradient: {
-                colors: ['#0077BE', '#33CCCC'],
+                colors: ['#0F2027', '#2C5364'],
                 direction: 'top-bottom'
             }
         },
-        deviceStyle: {
-            frameScale: 0.85,
-            framePosition: 50
-        },
-        captionStyle: {
-            font: 'Helvetica',
-            fontsize: 54,
-            color: '#0f1e2d',
-            position: 'above',
-            align: 'center',
-            box: {
-                autoSize: true,
-                maxLines: 3,
-                lineHeight: 1.4,
-                marginTop: 50,
-                marginBottom: 20
-            }
-        },
-        deviceOverrides: {
-            mac: {
-                frameScale: 0.90,
-                framePosition: 25
-            },
-            iphone: {
-                captionSize: 64
-            },
-            watch: {
-                frameScale: 0.80,
-                framePosition: 75,
-                captionSize: 18,
-                captionBox: {
-                    marginTop: 12,
-                    marginBottom: 12,
-                    lineHeight: 1.4,
-                    maxLines: 2
-                }
-            }
+        caption: {
+            font: 'SF Pro Display Bold',
+            color: '#FFFFFF'
         }
     }
 ];
-/**
- * Get template by ID
- */
+export const legacyTemplateAliases = {
+    modern: 'ocean-header',
+    minimal: 'pastel-header',
+    bold: 'noir-footer',
+    elegant: 'silver-header',
+    showcase: 'clean-screenshot',
+    playful: 'tropical-header',
+    corporate: 'slate-footer',
+    nerdy: 'midnight-header'
+};
+export function resolveTemplateId(id) {
+    const alias = legacyTemplateAliases[id];
+    if (alias) {
+        return { id: alias, isAlias: true };
+    }
+    return { id, isAlias: false };
+}
 export function getTemplate(id) {
     return templates.find(t => t.id === id);
 }
-/**
- * Get templates by category
- */
 export function getTemplatesByCategory(category) {
     return templates.filter(t => t.category === category);
 }
-/**
- * Get all template categories
- */
 export function getTemplateCategories() {
     return [...new Set(templates.map(t => t.category))];
 }
-/**
- * Apply template to configuration
- */
 export function applyTemplateToConfig(templateId, existingConfig) {
     const template = getTemplate(templateId);
     if (!template) {
         throw new Error(`Template "${templateId}" not found`);
     }
-    // Start with existing config
-    const config = { ...existingConfig };
-    // Apply background
-    config.background = template.background;
-    const templateCaptionStyle = template.captionStyle || {};
-    const captionBackgroundProvided = Object.prototype.hasOwnProperty.call(templateCaptionStyle, 'background');
-    const captionBorderProvided = Object.prototype.hasOwnProperty.call(templateCaptionStyle, 'border');
-    // Apply caption style (respect explicit zeros via nullish coalescing)
-    const mergedCaption = {
-        ...(config.caption || {}),
-        ...templateCaptionStyle,
-        paddingTop: templateCaptionStyle.paddingTop ?? (config.caption?.paddingTop ?? 100),
-        paddingBottom: templateCaptionStyle.paddingBottom ?? (config.caption?.paddingBottom ?? 60)
+    const base = {
+        version: 2,
+        layout: template.layout,
+        caption: {
+            font: template.caption.font || 'SF Pro Display Bold',
+            color: template.caption.color || '#FFFFFF',
+            background: template.caption.background
+        },
+        background: template.background,
+        devices: {},
+        output: existingConfig.output || './final',
+        frames: existingConfig.frames || './frames'
     };
-    if (!captionBackgroundProvided) {
-        delete mergedCaption.background;
-    }
-    if (!captionBorderProvided) {
-        delete mergedCaption.border;
-    }
-    config.caption = mergedCaption;
-    // Apply device styles
-    if (config.devices) {
-        for (const [deviceName, deviceConfig] of Object.entries(config.devices)) {
-            const override = template.deviceOverrides?.[deviceName];
-            // Apply base device style
-            const mergedDevice = {
-                ...deviceConfig,
-                frameScale: template.deviceStyle.frameScale,
-                framePosition: template.deviceStyle.framePosition,
-                partialFrame: template.deviceStyle.partialFrame,
-                frameOffset: template.deviceStyle.frameOffset,
-                captionPosition: template.captionStyle.position,
-                ...override // Apply device-specific overrides
-            };
-            const overrideHasBackground = !!override && Object.prototype.hasOwnProperty.call(override, 'captionBackground');
-            const overrideHasBorder = !!override && Object.prototype.hasOwnProperty.call(override, 'captionBorder');
-            if (!overrideHasBackground) {
-                delete mergedDevice.captionBackground;
-            }
-            if (!overrideHasBorder) {
-                delete mergedDevice.captionBorder;
-            }
-            // Ensure template font size changes take effect:
-            // If the template did NOT provide a per-device captionSize override,
-            // remove any existing device-level captionSize so compose.ts falls back
-            // to the template/global caption.fontsize.
-            if (!override || override.captionSize === undefined) {
-                delete mergedDevice.captionSize;
-            }
-            config.devices[deviceName] = mergedDevice;
-        }
+    const devices = existingConfig.devices || {};
+    const mergedDevices = {};
+    for (const [key, value] of Object.entries(devices)) {
+        mergedDevices[key] = value;
     }
-    return config;
+    base.devices = mergedDevices;
+    base.layout = template.layout;
+    base.background = template.background;
+    base.caption = {
+        ...base.caption,
+        ...template.caption
+    };
+    return base;
 }
-/**
- * Generate caption suggestions for a template
- */
-export function getTemplateCaptionSuggestions(templateId) {
-    const template = getTemplate(templateId);
-    // Default suggestions if template doesn't have specific ones
-    const defaults = {
+export function getTemplateCaptionSuggestions(_templateId) {
+    return {
         hero: [
             'Powerful Features, Beautiful Design',
             'Everything You Need in One App',
@@ -602,13 +248,5 @@ export function getTemplateCaptionSuggestions(templateId) {
             'Join Millions of Users'
         ]
     };
-    if (template?.captionSuggestions) {
-        return {
-            hero: template.captionSuggestions.hero || defaults.hero,
-            features: template.captionSuggestions.features || defaults.features,
-            cta: template.captionSuggestions.cta || defaults.cta
-        };
-    }
-    return defaults;
 }
 //# sourceMappingURL=registry.js.map