@appmockup/core 0.2.0

package/dist/index.js

@@ -0,0 +1,1079 @@
+// src/schema.ts
+import { z } from "zod";
+var fontWeightSchema = z.enum([
+  "regular",
+  "medium",
+  "semibold",
+  "bold",
+  "heavy",
+  "black"
+]);
+var outputSizeSchema = z.object({
+  name: z.string(),
+  width: z.number().int().positive(),
+  height: z.number().int().positive()
+});
+var shadowSchema = z.object({
+  color: z.string().optional(),
+  blur: z.number().min(0).optional(),
+  offsetX: z.number().optional(),
+  offsetY: z.number().optional()
+});
+var decorationSchema = z.object({
+  type: z.enum(["glow", "circle", "dots"]),
+  /** Center x as a fraction of canvas width (glow/circle; ignored by dots). */
+  x: z.number().optional(),
+  /** Center y as a fraction of canvas height (glow/circle; ignored by dots). */
+  y: z.number().optional(),
+  /** glow/circle: radius as a fraction of canvas width; dots: dot radius. */
+  size: z.number().positive().optional(),
+  /** dots only: grid pitch as a fraction of canvas width. */
+  spacing: z.number().positive().optional(),
+  color: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional()
+});
+var backgroundSchema = z.object({
+  type: z.enum(["solid", "gradient", "radial"]),
+  colors: z.array(z.string()).min(1),
+  direction: z.enum([
+    "topToBottom",
+    "leftToRight",
+    "topLeftToBottomRight",
+    "bottomToTop",
+    "rightToLeft",
+    "bottomLeftToTopRight"
+  ]).optional(),
+  /** Decorative shapes drawn on top of the fill, behind text and device. */
+  decorations: z.array(decorationSchema).optional()
+});
+var headlineSchema = z.object({
+  fontFamily: z.string().optional(),
+  fontWeight: fontWeightSchema.optional(),
+  color: z.string(),
+  relativeSize: z.number().positive(),
+  /** Optional text shadow; a bright color at zero offsets reads as a glow. */
+  shadow: shadowSchema.optional()
+});
+var subtitleSchema = z.object({
+  text: z.string(),
+  fontFamily: z.string().optional(),
+  fontWeight: fontWeightSchema.optional(),
+  color: z.string(),
+  relativeSize: z.number().positive(),
+  /** Optional text shadow; a bright color at zero offsets reads as a glow. */
+  shadow: shadowSchema.optional()
+});
+var deviceFrameSchema = z.object({
+  style: z.enum(["iPhone", "iPad"]),
+  bezelColor: z.string(),
+  cornerRadius: z.number(),
+  bezelWidth: z.number(),
+  screenRelativeWidth: z.number(),
+  verticalOffset: z.number(),
+  /** Device left edge as a fraction of canvas width. Omit/undefined = horizontally centered. */
+  horizontalOffset: z.number().optional(),
+  /** Clockwise rotation about the device center, in degrees. Omit/undefined = 0. */
+  rotation: z.number().optional(),
+  /**
+   * How the screenshot fills the device screen. "cover" (default) scales to fill and crops
+   * the overflow; "contain" scales to fit entirely, letterboxing with the bezel color.
+   */
+  fit: z.enum(["cover", "contain"]).optional(),
+  /** Drop shadow under the device. A bare `{}` uses the default soft look. */
+  shadow: shadowSchema.optional(),
+  /** Horizontal shear in degrees about the device center — a pseudo-3D lean. */
+  tilt: z.number().optional()
+});
+var screenshotEntrySchema = z.object({
+  id: z.string(),
+  file: z.string(),
+  headlines: z.record(z.string(), z.string()),
+  /** Overrides the global background for this screenshot (incl. its decorations). */
+  background: backgroundSchema.optional()
+});
+var mockupConfigSchema = z.object({
+  appName: z.string(),
+  outputPrefix: z.string(),
+  languages: z.array(z.string()).min(1),
+  outputSizes: z.array(outputSizeSchema).min(1),
+  background: backgroundSchema,
+  headline: headlineSchema,
+  subtitle: subtitleSchema.optional(),
+  deviceFrame: deviceFrameSchema,
+  screenshots: z.array(screenshotEntrySchema).min(1)
+});
+function parseConfig(input) {
+  return mockupConfigSchema.parse(input);
+}
+function validateHeadlines(config) {
+  const errors = [];
+  for (const entry of config.screenshots) {
+    for (const lang of config.languages) {
+      if (entry.headlines[lang] === void 0) {
+        errors.push(
+          `Missing headline for screenshot '${entry.id}' in language '${lang}'`
+        );
+      }
+    }
+  }
+  return errors;
+}
+
+// src/color.ts
+function parseHexParts(hex) {
+  let h = hex.trim();
+  if (h.startsWith("#")) h = h.slice(1);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let a = 1;
+  if (h.length === 3 && /^[0-9a-fA-F]{3}$/.test(h)) {
+    r = parseInt(h[0] + h[0], 16);
+    g = parseInt(h[1] + h[1], 16);
+    b = parseInt(h[2] + h[2], 16);
+  } else if (h.length === 6 && /^[0-9a-fA-F]{6}$/.test(h)) {
+    r = parseInt(h.slice(0, 2), 16);
+    g = parseInt(h.slice(2, 4), 16);
+    b = parseInt(h.slice(4, 6), 16);
+  } else if (h.length === 8 && /^[0-9a-fA-F]{8}$/.test(h)) {
+    r = parseInt(h.slice(0, 2), 16);
+    g = parseInt(h.slice(2, 4), 16);
+    b = parseInt(h.slice(4, 6), 16);
+    a = parseInt(h.slice(6, 8), 16) / 255;
+  }
+  return { r, g, b, a };
+}
+function parseHexColor(hex) {
+  const { r, g, b, a } = parseHexParts(hex);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+function parseHexColorWithAlpha(hex, alphaScale) {
+  const { r, g, b, a } = parseHexParts(hex);
+  return `rgba(${r}, ${g}, ${b}, ${a * alphaScale})`;
+}
+
+// src/fonts.ts
+var DEFAULT_FONT_FAMILY = "Inter";
+var FALLBACK_FONT_STACK = '"Noto Sans", "Noto Sans Arabic", "Noto Sans KR", sans-serif';
+function cssFontWeight(weight) {
+  switch (weight) {
+    case "regular":
+      return 400;
+    case "medium":
+      return 500;
+    case "semibold":
+      return 600;
+    case "bold":
+      return 700;
+    case "heavy":
+      return 800;
+    case "black":
+      return 900;
+  }
+}
+function cssFont(family, weight, sizePx) {
+  const fam = family && !family.startsWith(".") ? family : DEFAULT_FONT_FAMILY;
+  return `${cssFontWeight(weight)} ${sizePx}px "${fam}", ${FALLBACK_FONT_STACK}`;
+}
+
+// src/starter.ts
+function createStarterConfig(appName) {
+  return {
+    appName,
+    outputPrefix: appName.toLowerCase().replace(/\s+/g, "-") || "app",
+    languages: ["en"],
+    outputSizes: [
+      { name: "iPhone_6.7", width: 1290, height: 2796 },
+      { name: "iPhone_6.5", width: 1242, height: 2688 },
+      { name: "iPad_12.9", width: 2048, height: 2732 }
+    ],
+    background: {
+      type: "gradient",
+      colors: ["#FBF8F2", "#F0E4CF"],
+      direction: "topToBottom"
+    },
+    headline: { fontWeight: "bold", color: "#1D2939", relativeSize: 0.05 },
+    subtitle: { text: appName, fontWeight: "medium", color: "#C9975B", relativeSize: 0.025 },
+    deviceFrame: {
+      style: "iPhone",
+      bezelColor: "#1D2939",
+      cornerRadius: 55,
+      bezelWidth: 12,
+      screenRelativeWidth: 0.75,
+      verticalOffset: 0.25
+    },
+    screenshots: [
+      {
+        id: "01",
+        file: "screenshots/01.png",
+        headlines: { en: "Your headline\ngoes here" }
+      }
+    ]
+  };
+}
+var STANDARD_OUTPUT_SIZES = [
+  { name: "iPhone_6.9", width: 1320, height: 2868, note: "iPhone 16 Pro Max etc." },
+  { name: "iPhone_6.7", width: 1290, height: 2796, note: "iPhone 15/16 Pro Max, 14 Plus" },
+  { name: "iPhone_6.5", width: 1242, height: 2688, note: "iPhone 11 Pro Max, XS Max" },
+  { name: "iPad_13", width: 2064, height: 2752, note: "iPad Pro 13-inch (M4)" },
+  { name: "iPad_12.9", width: 2048, height: 2732, note: "iPad Pro 12.9-inch" },
+  { name: "Android_Phone", width: 1080, height: 1920, note: "Google Play phone (portrait)" }
+];
+
+// src/render/decorations.ts
+var DEFAULTS = {
+  glow: { x: 0.5, y: 0.3, size: 0.35, color: "#FFFFFF", opacity: 0.5 },
+  circle: { x: 0.5, y: 0.3, size: 0.18, color: "#FFFFFF", opacity: 0.25 },
+  dots: { size: 6e-3, spacing: 0.06, color: "#FFFFFF", opacity: 0.18 }
+};
+function drawDecorations(ctx, width, height, decorations) {
+  if (!decorations || decorations.length === 0) return;
+  for (const deco of decorations) {
+    ctx.save();
+    if (deco.type === "glow") {
+      const d = DEFAULTS.glow;
+      const cx = (deco.x ?? d.x) * width;
+      const cy = (deco.y ?? d.y) * height;
+      const r = (deco.size ?? d.size) * width;
+      const color = deco.color ?? d.color;
+      const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+      gradient.addColorStop(0, parseHexColor(color));
+      gradient.addColorStop(1, parseHexColorWithAlpha(color, 0));
+      ctx.globalAlpha = deco.opacity ?? d.opacity;
+      ctx.fillStyle = gradient;
+      ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
+    } else if (deco.type === "circle") {
+      const d = DEFAULTS.circle;
+      const cx = (deco.x ?? d.x) * width;
+      const cy = (deco.y ?? d.y) * height;
+      const r = (deco.size ?? d.size) * width;
+      ctx.globalAlpha = deco.opacity ?? d.opacity;
+      ctx.fillStyle = parseHexColor(deco.color ?? d.color);
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.fill();
+    } else {
+      const d = DEFAULTS.dots;
+      const r = (deco.size ?? d.size) * width;
+      const pitch = (deco.spacing ?? d.spacing) * width;
+      ctx.globalAlpha = deco.opacity ?? d.opacity;
+      ctx.fillStyle = parseHexColor(deco.color ?? d.color);
+      for (let py = pitch / 2; py < height; py += pitch) {
+        for (let px = pitch / 2; px < width; px += pitch) {
+          ctx.beginPath();
+          ctx.arc(px, py, r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+    }
+    ctx.restore();
+  }
+}
+
+// src/render/background.ts
+function drawBackground(ctx, width, height, config) {
+  if (config.type === "solid") {
+    ctx.fillStyle = parseHexColor(config.colors[0] ?? "#FFFFFF");
+    ctx.fillRect(0, 0, width, height);
+  } else if (config.type === "radial") {
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.hypot(cx, cy);
+    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+    addStops(gradient, config.colors);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+  } else {
+    const direction = config.direction ?? "topToBottom";
+    let x0 = 0;
+    let y0 = 0;
+    let x1 = 0;
+    let y1 = 0;
+    switch (direction) {
+      case "topToBottom":
+        x0 = width / 2;
+        y0 = 0;
+        x1 = width / 2;
+        y1 = height;
+        break;
+      case "bottomToTop":
+        x0 = width / 2;
+        y0 = height;
+        x1 = width / 2;
+        y1 = 0;
+        break;
+      case "leftToRight":
+        x0 = 0;
+        y0 = height / 2;
+        x1 = width;
+        y1 = height / 2;
+        break;
+      case "rightToLeft":
+        x0 = width;
+        y0 = height / 2;
+        x1 = 0;
+        y1 = height / 2;
+        break;
+      case "topLeftToBottomRight":
+        x0 = 0;
+        y0 = 0;
+        x1 = width;
+        y1 = height;
+        break;
+      case "bottomLeftToTopRight":
+        x0 = 0;
+        y0 = height;
+        x1 = width;
+        y1 = 0;
+        break;
+    }
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    addStops(gradient, config.colors);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+  }
+  drawDecorations(ctx, width, height, config.decorations);
+}
+function addStops(gradient, colors) {
+  if (colors.length === 1) {
+    const only = parseHexColor(colors[0]);
+    gradient.addColorStop(0, only);
+    gradient.addColorStop(1, only);
+  } else {
+    colors.forEach((c, i) => {
+      gradient.addColorStop(i / (colors.length - 1), parseHexColor(c));
+    });
+  }
+}
+
+// src/render/device-frame.ts
+var DEVICE_SHADOW_DEFAULTS = {
+  color: "#00000055",
+  blur: 0.035,
+  offsetX: 0,
+  offsetY: 0.015
+};
+function deviceFrameRect(canvasWidth, canvasHeight, config) {
+  const cw = canvasWidth;
+  const ch = canvasHeight;
+  const width = config.screenRelativeWidth * cw;
+  const aspectRatio = config.style === "iPhone" ? 2.167 : 1.4;
+  const height = width * aspectRatio;
+  const x = config.horizontalOffset != null ? config.horizontalOffset * cw : (cw - width) / 2;
+  const y = config.verticalOffset * ch;
+  return {
+    x,
+    y,
+    width,
+    height,
+    centerX: x + width / 2,
+    centerY: y + height / 2,
+    rotationDeg: config.rotation ?? 0
+  };
+}
+function drawDeviceFrame(ctx, screenshot, canvasWidth, canvasHeight, config) {
+  const rect = deviceFrameRect(canvasWidth, canvasHeight, config);
+  const deviceX = rect.x;
+  const deviceTop = rect.y;
+  const deviceWidth = rect.width;
+  const deviceHeight = rect.height;
+  const scaledCornerRadius = config.cornerRadius * (deviceWidth / 400);
+  const scaledBezelWidth = config.bezelWidth * (deviceWidth / 400);
+  const rotationRad = rect.rotationDeg * Math.PI / 180;
+  const tiltRad = (config.tilt ?? 0) * Math.PI / 180;
+  const rotated = rotationRad !== 0;
+  const tilted = tiltRad !== 0;
+  ctx.save();
+  if (rotated || tilted) {
+    ctx.translate(rect.centerX, rect.centerY);
+    if (rotated) ctx.rotate(rotationRad);
+    if (tilted) ctx.transform(1, 0, Math.tan(tiltRad), 1, 0, 0);
+    ctx.translate(-rect.centerX, -rect.centerY);
+  }
+  ctx.save();
+  if (config.shadow) {
+    ctx.shadowColor = parseHexColor(config.shadow.color ?? DEVICE_SHADOW_DEFAULTS.color);
+    ctx.shadowBlur = (config.shadow.blur ?? DEVICE_SHADOW_DEFAULTS.blur) * canvasWidth;
+    ctx.shadowOffsetX = (config.shadow.offsetX ?? DEVICE_SHADOW_DEFAULTS.offsetX) * canvasWidth;
+    ctx.shadowOffsetY = (config.shadow.offsetY ?? DEVICE_SHADOW_DEFAULTS.offsetY) * canvasWidth;
+  }
+  ctx.fillStyle = parseHexColor(config.bezelColor);
+  ctx.beginPath();
+  ctx.roundRect(deviceX, deviceTop, deviceWidth, deviceHeight, scaledCornerRadius);
+  ctx.fill();
+  ctx.restore();
+  const innerX = deviceX + scaledBezelWidth;
+  const innerY = deviceTop + scaledBezelWidth;
+  const innerW = deviceWidth - scaledBezelWidth * 2;
+  const innerH = deviceHeight - scaledBezelWidth * 2;
+  const innerCornerRadius = Math.max(scaledCornerRadius - scaledBezelWidth, 0);
+  ctx.save();
+  ctx.beginPath();
+  ctx.roundRect(innerX, innerY, innerW, innerH, innerCornerRadius);
+  ctx.clip();
+  if (screenshot) {
+    const imgW = screenshot.width;
+    const imgH = screenshot.height;
+    const scale = config.fit === "contain" ? Math.min(innerW / imgW, innerH / imgH) : Math.max(innerW / imgW, innerH / imgH);
+    const drawW = imgW * scale;
+    const drawH = imgH * scale;
+    const drawX = innerX + (innerW - drawW) / 2;
+    const drawY = innerY + (innerH - drawH) / 2;
+    ctx.drawImage(screenshot.source, drawX, drawY, drawW, drawH);
+  }
+  ctx.restore();
+  if (config.style === "iPhone") {
+    const pillWidth = deviceWidth * 0.27;
+    const pillHeight = deviceWidth * 0.075;
+    const pillX = innerX + innerW / 2 - pillWidth / 2;
+    const pillY = innerY + innerH * 0.015;
+    ctx.save();
+    ctx.fillStyle = "rgba(0, 0, 0, 1)";
+    ctx.beginPath();
+    ctx.roundRect(pillX, pillY, pillWidth, pillHeight, pillHeight / 2);
+    ctx.fill();
+    ctx.restore();
+  }
+  const barWidth = deviceWidth * 0.33;
+  const barHeight = deviceWidth * 0.012;
+  const barX = innerX + innerW / 2 - barWidth / 2;
+  const barY = innerY + innerH - innerH * 0.01 - barHeight;
+  ctx.save();
+  ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+  ctx.beginPath();
+  ctx.roundRect(barX, barY, barWidth, barHeight, barHeight / 2);
+  ctx.fill();
+  ctx.restore();
+  ctx.restore();
+}
+
+// src/render/text.ts
+var LINE_HEIGHT_MULTIPLE = 1.1;
+var TEXT_SHADOW_DEFAULTS = {
+  color: "#00000066",
+  blur: 0.012,
+  offsetX: 0,
+  offsetY: 0
+};
+function drawHeadline(ctx, text, canvasWidth, canvasHeight, config, topMarginFraction = 0.035) {
+  const fontSize = config.relativeSize * canvasHeight;
+  const topY = topMarginFraction * canvasHeight;
+  const maxWidth = canvasWidth * 0.88;
+  return drawText(ctx, {
+    text,
+    fontFamily: config.fontFamily,
+    fontWeight: config.fontWeight ?? "bold",
+    color: config.color,
+    fontSize,
+    x: (canvasWidth - maxWidth) / 2,
+    y: topY,
+    maxWidth,
+    shadow: config.shadow,
+    canvasWidth
+  });
+}
+function drawSubtitle(ctx, text, canvasWidth, canvasHeight, config, belowY) {
+  const fontSize = config.relativeSize * canvasHeight;
+  const gap = canvasHeight * 8e-3;
+  const maxWidth = canvasWidth * 0.88;
+  return drawText(ctx, {
+    text,
+    fontFamily: config.fontFamily,
+    fontWeight: config.fontWeight ?? "medium",
+    color: config.color,
+    fontSize,
+    x: (canvasWidth - maxWidth) / 2,
+    y: belowY + gap,
+    maxWidth,
+    shadow: config.shadow,
+    canvasWidth
+  });
+}
+function layoutLines(ctx, text, maxWidth) {
+  const out = [];
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(/\s+/).filter((w) => w.length > 0);
+    if (words.length === 0) {
+      out.push("");
+      continue;
+    }
+    let line = "";
+    for (const word of words) {
+      const candidate = line ? `${line} ${word}` : word;
+      if (line === "" || ctx.measureText(candidate).width <= maxWidth) {
+        line = candidate;
+      } else {
+        out.push(line);
+        line = word;
+      }
+    }
+    out.push(line);
+  }
+  return out;
+}
+function drawText(ctx, opts) {
+  const fontSize = opts.fontSize;
+  ctx.font = cssFont(opts.fontFamily, opts.fontWeight, fontSize);
+  const lines = layoutLines(ctx, opts.text, opts.maxWidth);
+  const metrics = ctx.measureText("Mg");
+  const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? fontSize * 0.8;
+  const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+  const naturalLineHeight = ascent + descent;
+  const lineHeight = naturalLineHeight * LINE_HEIGHT_MULTIPLE;
+  ctx.save();
+  if (opts.shadow) {
+    ctx.shadowColor = parseHexColor(opts.shadow.color ?? TEXT_SHADOW_DEFAULTS.color);
+    ctx.shadowBlur = (opts.shadow.blur ?? TEXT_SHADOW_DEFAULTS.blur) * opts.canvasWidth;
+    ctx.shadowOffsetX = (opts.shadow.offsetX ?? TEXT_SHADOW_DEFAULTS.offsetX) * opts.canvasWidth;
+    ctx.shadowOffsetY = (opts.shadow.offsetY ?? TEXT_SHADOW_DEFAULTS.offsetY) * opts.canvasWidth;
+  }
+  ctx.fillStyle = parseHexColor(opts.color);
+  ctx.textAlign = "center";
+  ctx.textBaseline = "alphabetic";
+  const centerX = opts.x + opts.maxWidth / 2;
+  lines.forEach((line, i) => {
+    const baseline = opts.y + ascent + i * lineHeight;
+    ctx.fillText(line, centerX, baseline);
+  });
+  ctx.restore();
+  return { bottomY: opts.y + lines.length * lineHeight };
+}
+
+// src/render/index.ts
+function renderMockup(ctx, scene) {
+  drawBackground(ctx, scene.width, scene.height, scene.background);
+  const headlineResult = drawHeadline(
+    ctx,
+    scene.headlineText,
+    scene.width,
+    scene.height,
+    scene.headline
+  );
+  if (scene.subtitle) {
+    drawSubtitle(
+      ctx,
+      scene.subtitle.text,
+      scene.width,
+      scene.height,
+      scene.subtitle,
+      headlineResult.bottomY
+    );
+  }
+  if (scene.screenshot) {
+    drawDeviceFrame(ctx, scene.screenshot, scene.width, scene.height, scene.deviceFrame);
+  }
+}
+function resolveScene(config, entry, language, size, screenshot) {
+  return {
+    width: size.width,
+    height: size.height,
+    // A screenshot may carry its own background (incl. decorations), so a set
+    // can alternate looks across the store listing.
+    background: entry.background ?? config.background,
+    headlineText: entry.headlines[language] ?? "",
+    headline: config.headline,
+    subtitle: config.subtitle,
+    deviceFrame: config.deviceFrame,
+    screenshot
+  };
+}
+
+// src/templates.ts
+var STANDARD_SIZES = [
+  { name: "iPhone_6.7", width: 1290, height: 2796 },
+  { name: "iPhone_6.5", width: 1242, height: 2688 },
+  { name: "iPad_12.9", width: 2048, height: 2732 }
+];
+var TEMPLATES = [
+  {
+    id: "sunrise",
+    name: "Sunrise",
+    description: "Warm cream gradient, navy headline, centered device.",
+    swatch: "linear-gradient(180deg, #FBF8F2, #F0E4CF)",
+    config: {
+      appName: "Sunrise",
+      outputPrefix: "sunrise",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "gradient", colors: ["#FBF8F2", "#F0E4CF"], direction: "topToBottom" },
+      headline: { fontWeight: "bold", color: "#1D2939", relativeSize: 0.05 },
+      subtitle: { text: "Sunrise", fontWeight: "medium", color: "#C9975B", relativeSize: 0.025 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#1D2939",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.75,
+        verticalOffset: 0.25
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Start every day\nwith intention", de: "Beginne jeden Tag\nmit Absicht", tr: "Her g\xFCne\nbir niyetle ba\u015Fla" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Build habits\nthat stick", de: "Gewohnheiten,\ndie bleiben", tr: "Kal\u0131c\u0131\nal\u0131\u015Fkanl\u0131klar kur" } },
+        { id: "03", file: "screenshots/03.png", headlines: { en: "Watch your\nprogress grow", de: "Sieh deinen\nFortschritt wachsen", tr: "\u0130lerlemeni\nb\xFCy\xFCrken g\xF6r" } }
+      ]
+    }
+  },
+  {
+    id: "aurora",
+    name: "Aurora",
+    description: "Dark gradient, white headline, slight tilt.",
+    swatch: "linear-gradient(180deg, #0B1220, #1E293B)",
+    config: {
+      appName: "Aurora",
+      outputPrefix: "aurora",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "gradient", colors: ["#0B1220", "#1E293B"], direction: "topToBottom" },
+      headline: { fontWeight: "heavy", color: "#F8FAFC", relativeSize: 0.052 },
+      subtitle: { text: "Aurora", fontWeight: "medium", color: "#7DD3FC", relativeSize: 0.025 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#0F172A",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.72,
+        verticalOffset: 0.27,
+        rotation: -4
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Your night,\nbeautifully tracked", de: "Deine Nacht,\nsch\xF6n erfasst", tr: "Gecen,\nzarif\xE7e takip edilir" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Insights that\nactually help", de: "Einblicke, die\nwirklich helfen", tr: "Ger\xE7ekten yard\u0131mc\u0131\nolan i\xE7g\xF6r\xFCler" } }
+      ]
+    }
+  },
+  {
+    id: "ocean",
+    name: "Ocean",
+    description: "Blue diagonal gradient, device shifted right and rotated.",
+    swatch: "linear-gradient(135deg, #0EA5E9, #2563EB)",
+    config: {
+      appName: "Wavelength",
+      outputPrefix: "wavelength",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "gradient", colors: ["#0EA5E9", "#2563EB"], direction: "topLeftToBottomRight" },
+      headline: { fontWeight: "bold", color: "#FFFFFF", relativeSize: 0.05 },
+      subtitle: { text: "Wavelength", fontWeight: "medium", color: "#E0F2FE", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#0C4A6E",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.66,
+        verticalOffset: 0.3,
+        horizontalOffset: 0.3,
+        rotation: 6
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Ride your\nfocus flow", de: "Reite deinen\nFokus-Flow", tr: "Odak ak\u0131\u015F\u0131na\nbin" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Deep work,\nmade simple", de: "Tiefe Arbeit,\neinfach gemacht", tr: "Derin \xE7al\u0131\u015Fma,\nbasitle\u015Ftirildi" } }
+      ]
+    }
+  },
+  {
+    id: "minimal",
+    name: "Minimal",
+    description: "Clean white, large centered device, no subtitle.",
+    swatch: "#FFFFFF",
+    config: {
+      appName: "Focus",
+      outputPrefix: "focus",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "solid", colors: ["#FFFFFF"] },
+      headline: { fontWeight: "bold", color: "#111827", relativeSize: 0.052 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#111827",
+        cornerRadius: 55,
+        bezelWidth: 11,
+        screenRelativeWidth: 0.82,
+        verticalOffset: 0.22
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Less noise.\nMore done.", de: "Weniger L\xE4rm.\nMehr geschafft.", tr: "Daha az g\xFCr\xFClt\xFC.\nDaha \xE7ok i\u015F." } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Everything\nin one place", de: "Alles an\neinem Ort", tr: "Her \u015Fey\ntek yerde" } }
+      ]
+    }
+  },
+  {
+    id: "sunset",
+    name: "Sunset",
+    description: "Pink-to-amber diagonal, device shifted left and tilted.",
+    swatch: "linear-gradient(135deg, #FB7185, #F59E0B)",
+    config: {
+      appName: "Ember",
+      outputPrefix: "ember",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "gradient", colors: ["#FB7185", "#F59E0B"], direction: "topLeftToBottomRight" },
+      headline: { fontWeight: "heavy", color: "#FFFFFF", relativeSize: 0.05 },
+      subtitle: { text: "Ember", fontWeight: "semibold", color: "#FFE4E6", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#7F1D1D",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.64,
+        verticalOffset: 0.3,
+        horizontalOffset: 0.05,
+        rotation: -8
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Make every\nmoment count", de: "Lass jeden\nMoment z\xE4hlen", tr: "Her an\u0131\nde\u011Ferli k\u0131l" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Glow up\nyour routine", de: "Bring Glanz in\ndeine Routine", tr: "Rutinine\nparlakl\u0131k kat" } }
+      ]
+    }
+  },
+  {
+    id: "neon",
+    name: "Neon Glow",
+    description: "Dark radial background, neon glows, glowing text and device.",
+    swatch: "radial-gradient(circle, #2E1065, #0F0A1F)",
+    config: {
+      appName: "Neon",
+      outputPrefix: "neon",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: {
+        type: "radial",
+        colors: ["#2E1065", "#0F0A1F"],
+        decorations: [
+          { type: "glow", x: 0.22, y: 0.18, size: 0.4, color: "#8B5CF6", opacity: 0.55 },
+          { type: "glow", x: 0.85, y: 0.65, size: 0.45, color: "#06B6D4", opacity: 0.4 }
+        ]
+      },
+      headline: {
+        fontWeight: "heavy",
+        color: "#F5F3FF",
+        relativeSize: 0.052,
+        shadow: { color: "#A78BFAAA", blur: 0.02 }
+      },
+      subtitle: {
+        text: "Neon",
+        fontWeight: "medium",
+        color: "#C4B5FD",
+        relativeSize: 0.025,
+        shadow: { color: "#A78BFA88", blur: 0.015 }
+      },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#1E1145",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.7,
+        verticalOffset: 0.27,
+        shadow: { color: "#8B5CF680", blur: 0.05, offsetY: 0.01 }
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Turn the lights\nup on your data", de: "Bring Licht\nin deine Daten", tr: "Verilerinin\n\u0131\u015F\u0131\u011F\u0131n\u0131 a\xE7" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "After dark,\nstill in control", de: "Nach Einbruch der Nacht\nweiter im Griff", tr: "Gece bile\nkontrol sende" } }
+      ]
+    }
+  },
+  {
+    id: "glass",
+    name: "Soft Glass",
+    description: "Airy light gradient, soft circles, hero drop shadow.",
+    swatch: "linear-gradient(0deg, #EEF2F7, #DDE5F0)",
+    config: {
+      appName: "Glass",
+      outputPrefix: "glass",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: {
+        type: "gradient",
+        colors: ["#EEF2F7", "#DDE5F0"],
+        direction: "bottomToTop",
+        decorations: [
+          { type: "circle", x: 0.15, y: 0.12, size: 0.22, color: "#FFFFFF", opacity: 0.5 },
+          { type: "circle", x: 0.9, y: 0.5, size: 0.3, color: "#BFD3EE", opacity: 0.35 }
+        ]
+      },
+      headline: { fontWeight: "bold", color: "#1E293B", relativeSize: 0.05 },
+      subtitle: { text: "Glass", fontWeight: "medium", color: "#3B82F6", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#334155",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.74,
+        verticalOffset: 0.25,
+        shadow: { color: "#33415566", blur: 0.045, offsetY: 0.02 }
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Light as air,\nclear as glass", de: "Leicht wie Luft,\nklar wie Glas", tr: "Hava kadar hafif,\ncam kadar net" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Calm design,\nsharp results", de: "Ruhiges Design,\nklare Ergebnisse", tr: "Sakin tasar\u0131m,\nkeskin sonu\xE7lar" } }
+      ]
+    }
+  },
+  {
+    id: "pulse",
+    name: "Bold Pulse",
+    description: "Three-stop radial burst, black-weight headline, default shadow.",
+    swatch: "radial-gradient(circle, #F59E0B, #DC2626, #7F1D1D)",
+    config: {
+      appName: "Pulse",
+      outputPrefix: "pulse",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "radial", colors: ["#F59E0B", "#DC2626", "#7F1D1D"] },
+      headline: {
+        fontWeight: "black",
+        color: "#FFFFFF",
+        relativeSize: 0.055,
+        shadow: { color: "#00000066", blur: 0.015, offsetY: 4e-3 }
+      },
+      subtitle: { text: "Pulse", fontWeight: "semibold", color: "#FDE68A", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#450A0A",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.7,
+        verticalOffset: 0.28,
+        shadow: {}
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Feel the beat\nof your goals", de: "Sp\xFCr den Takt\ndeiner Ziele", tr: "Hedeflerinin\nritmini hisset" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Push harder.\nGo further.", de: "Gib mehr.\nKomm weiter.", tr: "Daha s\u0131k\u0131 \xE7al\u0131\u015F.\nDaha ileri git." } }
+      ]
+    }
+  },
+  {
+    id: "dotgrid",
+    name: "Dot Grid",
+    description: "Minimal paper white with a dot pattern and subtle shadow.",
+    swatch: "radial-gradient(circle at 30% 30%, #E7E5E4 8%, #FAFAF9 9%)",
+    config: {
+      appName: "Grid",
+      outputPrefix: "grid",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: {
+        type: "solid",
+        colors: ["#FAFAF9"],
+        decorations: [
+          { type: "dots", color: "#1C1917", opacity: 0.12, size: 5e-3, spacing: 0.05 }
+        ]
+      },
+      headline: { fontWeight: "bold", color: "#1C1917", relativeSize: 0.052 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#1C1917",
+        cornerRadius: 55,
+        bezelWidth: 11,
+        screenRelativeWidth: 0.8,
+        verticalOffset: 0.22,
+        shadow: { color: "#1C191740", blur: 0.03, offsetY: 0.012 }
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Ideas on\na clean grid", de: "Ideen auf\nklarem Raster", tr: "Temiz bir \u0131zgarada\nfikirler" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Structure\nwithout clutter", de: "Struktur\nohne Ballast", tr: "Da\u011F\u0131n\u0131kl\u0131k olmadan\nd\xFCzen" } }
+      ]
+    }
+  },
+  {
+    id: "momentum",
+    name: "Momentum",
+    description: "Diagonal gradient with a tilted, rotated hero device.",
+    swatch: "linear-gradient(45deg, #0EA5E9, #6366F1)",
+    config: {
+      appName: "Momentum",
+      outputPrefix: "momentum",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: {
+        type: "gradient",
+        colors: ["#0EA5E9", "#6366F1"],
+        direction: "bottomLeftToTopRight",
+        decorations: [
+          { type: "glow", x: 0.8, y: 0.15, size: 0.35, color: "#38BDF8", opacity: 0.45 }
+        ]
+      },
+      headline: { fontWeight: "heavy", color: "#FFFFFF", relativeSize: 0.05 },
+      subtitle: { text: "Momentum", fontWeight: "medium", color: "#BAE6FD", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#1E1B4B",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.62,
+        verticalOffset: 0.3,
+        horizontalOffset: 0.22,
+        rotation: -6,
+        tilt: 10,
+        shadow: { color: "#00000059", blur: 0.05, offsetX: 0.02, offsetY: 0.02 }
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "Momentum you\ncan actually see", de: "Schwung, den man\nwirklich sieht", tr: "Ger\xE7ekten g\xF6rebilece\u011Fin\nbir ivme" } },
+        { id: "02", file: "screenshots/02.png", headlines: { en: "Built for\nforward motion", de: "Gebaut f\xFCr\nVorw\xE4rtsdrang", tr: "\u0130leri hareket i\xE7in\ntasarland\u0131" } }
+      ]
+    }
+  },
+  {
+    id: "spectrum",
+    name: "Spectrum",
+    description: "Each screenshot gets its own background color story.",
+    swatch: "linear-gradient(90deg, #7C3AED, #DB2777, #0891B2)",
+    config: {
+      appName: "Spectrum",
+      outputPrefix: "spectrum",
+      languages: ["en", "de", "tr"],
+      outputSizes: STANDARD_SIZES,
+      background: { type: "gradient", colors: ["#7C3AED", "#DB2777"], direction: "topToBottom" },
+      headline: { fontWeight: "bold", color: "#FFFFFF", relativeSize: 0.05 },
+      subtitle: { text: "Spectrum", fontWeight: "medium", color: "#FBCFE8", relativeSize: 0.024 },
+      deviceFrame: {
+        style: "iPhone",
+        bezelColor: "#3B0764",
+        cornerRadius: 55,
+        bezelWidth: 12,
+        screenRelativeWidth: 0.72,
+        verticalOffset: 0.26,
+        shadow: {}
+      },
+      screenshots: [
+        { id: "01", file: "screenshots/01.png", headlines: { en: "A color for\nevery mood", de: "Eine Farbe f\xFCr\njede Stimmung", tr: "Her ruh haline\nbir renk" } },
+        {
+          id: "02",
+          file: "screenshots/02.png",
+          headlines: { en: "Switch scenes,\nkeep the flow", de: "Szenen wechseln,\nim Fluss bleiben", tr: "Sahne de\u011Fi\u015Ftir,\nak\u0131\u015F\u0131 koru" },
+          background: {
+            type: "gradient",
+            colors: ["#0891B2", "#2563EB"],
+            direction: "topToBottom",
+            decorations: [
+              { type: "glow", x: 0.5, y: 0.2, size: 0.35, color: "#67E8F9", opacity: 0.4 }
+            ]
+          }
+        }
+      ]
+    }
+  }
+];
+function getTemplate(id) {
+  return TEMPLATES.find((t) => t.id === id);
+}
+
+// src/themes.ts
+var THEMES = [
+  {
+    id: "indigo",
+    name: "Indigo Night",
+    swatch: "linear-gradient(135deg, #1E1B4B, #312E81)",
+    backgroundColors: ["#1E1B4B", "#312E81"],
+    headlineColor: "#EEF2FF",
+    subtitleColor: "#A5B4FC",
+    bezelColor: "#171532",
+    accent: "#818CF8"
+  },
+  {
+    id: "emerald",
+    name: "Emerald",
+    swatch: "linear-gradient(135deg, #064E3B, #059669)",
+    backgroundColors: ["#064E3B", "#059669"],
+    headlineColor: "#ECFDF5",
+    subtitleColor: "#6EE7B7",
+    bezelColor: "#022C22",
+    accent: "#34D399"
+  },
+  {
+    id: "coral",
+    name: "Coral Pop",
+    swatch: "linear-gradient(135deg, #9F1239, #FB7185)",
+    backgroundColors: ["#9F1239", "#FB7185"],
+    headlineColor: "#FFF1F2",
+    subtitleColor: "#FECDD3",
+    bezelColor: "#4C0519",
+    accent: "#FDA4AF"
+  },
+  {
+    id: "violet",
+    name: "Neon Violet",
+    swatch: "linear-gradient(135deg, #0F0A1F, #2E1065)",
+    backgroundColors: ["#0F0A1F", "#2E1065"],
+    headlineColor: "#F5F3FF",
+    subtitleColor: "#C4B5FD",
+    bezelColor: "#1E1145",
+    accent: "#A78BFA"
+  },
+  {
+    id: "sand",
+    name: "Warm Sand",
+    swatch: "linear-gradient(135deg, #FAF5EF, #EAD9C2)",
+    backgroundColors: ["#FAF5EF", "#EAD9C2"],
+    headlineColor: "#292524",
+    subtitleColor: "#B45309",
+    bezelColor: "#292524",
+    accent: "#D6A662"
+  },
+  {
+    id: "slate",
+    name: "Slate Mono",
+    swatch: "linear-gradient(135deg, #F8FAFC, #E2E8F0)",
+    backgroundColors: ["#F8FAFC", "#E2E8F0"],
+    headlineColor: "#0F172A",
+    subtitleColor: "#64748B",
+    bezelColor: "#0F172A",
+    accent: "#94A3B8"
+  }
+];
+function getTheme(id) {
+  return THEMES.find((t) => t.id === id);
+}
+function themeBackground(bg, theme) {
+  return {
+    ...bg,
+    colors: bg.type === "solid" ? [theme.backgroundColors[0]] : [...theme.backgroundColors],
+    decorations: bg.decorations?.map((d) => ({ ...d, color: theme.accent }))
+  };
+}
+function applyTheme(config, theme) {
+  return {
+    ...config,
+    background: themeBackground(config.background, theme),
+    headline: { ...config.headline, color: theme.headlineColor },
+    subtitle: config.subtitle ? { ...config.subtitle, color: theme.subtitleColor } : void 0,
+    deviceFrame: { ...config.deviceFrame, bezelColor: theme.bezelColor },
+    screenshots: config.screenshots.map(
+      (s) => s.background ? { ...s, background: themeBackground(s.background, theme) } : s
+    )
+  };
+}
+export {
+  DEFAULT_FONT_FAMILY,
+  FALLBACK_FONT_STACK,
+  STANDARD_OUTPUT_SIZES,
+  TEMPLATES,
+  THEMES,
+  applyTheme,
+  backgroundSchema,
+  createStarterConfig,
+  cssFont,
+  cssFontWeight,
+  decorationSchema,
+  deviceFrameRect,
+  deviceFrameSchema,
+  drawBackground,
+  drawDecorations,
+  drawDeviceFrame,
+  drawHeadline,
+  drawSubtitle,
+  fontWeightSchema,
+  getTemplate,
+  getTheme,
+  headlineSchema,
+  mockupConfigSchema,
+  outputSizeSchema,
+  parseConfig,
+  parseHexColor,
+  parseHexColorWithAlpha,
+  renderMockup,
+  resolveScene,
+  screenshotEntrySchema,
+  shadowSchema,
+  subtitleSchema,
+  validateHeadlines
+};
+//# sourceMappingURL=index.js.map