designlang 4.0.0 → 5.0.0

package/src/extractors/fonts.js

@@ -0,0 +1,82 @@
+export function extractFonts({ fontFaces = [], googleFontsLinks = [], documentFonts = [] }) {
+  const fontMap = new Map();
+
+  // Parse Google Fonts URLs into a lookup: family -> weights
+  const googleFamilies = new Map();
+  for (const url of googleFontsLinks) {
+    const params = new URL(url).searchParams;
+    for (const val of (params.getAll('family'))) {
+      const [name, spec] = val.split(':');
+      const family = name.replace(/\+/g, ' ');
+      const weights = spec?.match(/\d{3}/g) || ['400'];
+      googleFamilies.set(family, [...new Set([...(googleFamilies.get(family) || []), ...weights])]);
+    }
+  }
+
+  const getSource = (family, src) => {
+    if (googleFamilies.has(family)) return 'google-fonts';
+    if (src && /url\(/.test(src)) return /fonts\.(googleapis|gstatic|cdnfonts|bunny)/.test(src) ? 'cdn' : 'self-hosted';
+    return 'system';
+  };
+
+  const getOrCreate = (family) => {
+    if (!fontMap.has(family)) {
+      fontMap.set(family, { family, source: 'system', weights: new Set(), styles: new Set(), urls: [], fontFaceCSS: '' });
+    }
+    return fontMap.get(family);
+  };
+
+  // Process @font-face rules
+  for (const ff of fontFaces) {
+    const family = ff.family?.replace(/["']/g, '');
+    if (!family) continue;
+    const entry = getOrCreate(family);
+    entry.source = getSource(family, ff.src);
+    if (ff.weight) entry.weights.add(String(ff.weight));
+    if (ff.style) entry.styles.add(ff.style);
+    if (ff.src) entry.urls.push(ff.src);
+  }
+
+  // Process document.fonts entries
+  for (const df of documentFonts) {
+    const family = df.family?.replace(/["']/g, '');
+    if (!family) continue;
+    const entry = getOrCreate(family);
+    if (entry.source === 'system') entry.source = getSource(family, '');
+    if (df.weight) entry.weights.add(String(df.weight));
+    if (df.style) entry.styles.add(df.style);
+  }
+
+  // Add Google Fonts families not yet seen
+  for (const [family, weights] of googleFamilies) {
+    const entry = getOrCreate(family);
+    entry.source = 'google-fonts';
+    for (const w of weights) entry.weights.add(w);
+  }
+
+  // Build output
+  const fonts = [];
+  const systemFonts = [];
+
+  for (const entry of fontMap.values()) {
+    const weights = [...entry.weights].sort();
+    const styles = [...entry.styles];
+    if (!weights.length) weights.push('400');
+    if (!styles.length) styles.push('normal');
+
+    const fontFaceCSS = entry.source === 'self-hosted'
+      ? entry.urls.map((src, i) =>
+        `@font-face {\n  font-family: '${entry.family}';\n  font-weight: ${weights[i] || weights[0]};\n  font-style: ${styles[i] || styles[0]};\n  src: ${src};\n}`
+      ).join('\n\n')
+      : '';
+
+    if (entry.source === 'system') { systemFonts.push(entry.family); continue; }
+    fonts.push({ family: entry.family, source: entry.source, weights, styles, urls: entry.urls, fontFaceCSS });
+  }
+
+  const googleFontsUrl = googleFontsLinks[0] || (googleFamilies.size
+    ? `https://fonts.googleapis.com/css2?${[...googleFamilies].map(([f, w]) => `family=${f.replace(/ /g, '+')}:wght@${w.join(';')}`).join('&')}&display=swap`
+    : '');
+
+  return { fonts, googleFontsUrl, systemFonts };
+}

package/src/extractors/gradients.js

@@ -0,0 +1,80 @@
+export function extractGradients(styles) {
+  const seen = new Set();
+  const gradients = [];
+
+  for (const el of styles) {
+    const bg = el.backgroundImage;
+    if (!bg || !bg.includes('gradient')) continue;
+    const rawGradients = splitGradients(bg);
+    for (const raw of rawGradients) {
+      if (seen.has(raw)) continue;
+      seen.add(raw);
+      gradients.push(parseGradient(raw));
+    }
+  }
+
+  return { gradients, count: gradients.length };
+}
+
+function splitGradients(value) {
+  // Split comma-separated gradient layers, respecting nested parens
+  const results = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '(') depth++;
+    else if (value[i] === ')') depth--;
+    else if (value[i] === ',' && depth === 0) {
+      const chunk = value.slice(start, i).trim();
+      if (chunk.includes('gradient')) results.push(chunk);
+      start = i + 1;
+    }
+  }
+  const last = value.slice(start).trim();
+  if (last.includes('gradient')) results.push(last);
+  return results;
+}
+
+function parseGradient(raw) {
+  const typeMatch = raw.match(/^(repeating-)?(linear|radial|conic)-gradient/);
+  const type = typeMatch ? (typeMatch[1] || '') + typeMatch[2] : 'linear';
+
+  // Extract content inside outermost parens
+  const inner = raw.slice(raw.indexOf('(') + 1, raw.lastIndexOf(')'));
+
+  // Split top-level arguments by comma (respecting nested parens)
+  const args = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < inner.length; i++) {
+    if (inner[i] === '(') depth++;
+    else if (inner[i] === ')') depth--;
+    else if (inner[i] === ',' && depth === 0) {
+      args.push(inner.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  args.push(inner.slice(start).trim());
+
+  // First arg is direction/angle if it doesn't look like a color
+  let direction = null;
+  let stopArgs = args;
+  const first = args[0] || '';
+  if (/^(to |from |\d+deg|at )/.test(first) || /^(circle|ellipse)/.test(first)) {
+    direction = first;
+    stopArgs = args.slice(1);
+  }
+
+  const stops = stopArgs.map(s => {
+    const posMatch = s.match(/([\d.]+%?)$/);
+    const position = posMatch ? posMatch[1] : null;
+    const color = position ? s.slice(0, posMatch.index).trim() : s.trim();
+    return { color, position };
+  });
+
+  const colorCount = stops.length;
+  let classification = 'subtle';
+  if (colorCount > 4) classification = 'complex';
+  else if (colorCount > 2) classification = 'bold';
+  else if (colorCount === 2) classification = 'brand';
+
+  return { raw, type, direction, stops, classification };
+}

package/src/extractors/icons.js

@@ -0,0 +1,80 @@
+export function extractIcons(iconData) {
+  if (!iconData || !iconData.length) {
+    return { icons: [], sizeDistribution: { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }, dominantStyle: 'none', colorPalette: [], count: 0 };
+  }
+
+  function classifySize(w, h) {
+    const s = Math.max(w || 0, h || 0);
+    if (s < 16) return 'xs';
+    if (s < 20) return 'sm';
+    if (s < 28) return 'md';
+    if (s < 40) return 'lg';
+    return 'xl';
+  }
+
+  function cleanSvg(svg) {
+    return svg.replace(/\s*(data-[a-z-]*|class|id)="[^"]*"/g, '').replace(/\s+/g, ' ').trim();
+  }
+  function simplify(svg) { return cleanSvg(svg); }
+
+  function detectStyle(svg) {
+    const hasStroke = /stroke="(?!none)[^"]+"|stroke-width="[^0"][^"]*"/.test(svg);
+    const hasFill = /fill="(?!none|transparent)[^"]+"|<(rect|circle|path)[^>]*(?!fill="none")/.test(svg);
+    const fillNone = /fill="none"/.test(svg);
+    if (hasStroke && (fillNone || !hasFill)) return 'outlined';
+    if (hasStroke && hasFill) return 'duo-tone';
+    return 'filled';
+  }
+
+  function extractColors(svg) {
+    const colors = new Set();
+    for (const m of svg.matchAll(/(?:fill|stroke)="([^"]+)"/g)) {
+      if (m[1] !== 'none' && m[1] !== 'transparent') colors.add(m[1]);
+    }
+    return [...colors];
+  }
+
+  // Deduplicate
+  const seen = new Map();
+  for (const icon of iconData) {
+    const key = simplify(icon.svg);
+    if (!seen.has(key)) seen.set(key, icon);
+  }
+
+  const sizeDistribution = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 };
+  const styleCounts = { outlined: 0, filled: 0, 'duo-tone': 0 };
+  const allColors = new Set();
+
+  const icons = [];
+  for (const icon of seen.values()) {
+    const cleaned = cleanSvg(icon.svg);
+    const sc = classifySize(icon.width, icon.height);
+    const style = detectStyle(icon.svg);
+    const colors = extractColors(icon.svg);
+    if (icon.fill && icon.fill !== 'none') colors.push(icon.fill);
+    if (icon.stroke && icon.stroke !== 'none') colors.push(icon.stroke);
+    const uniqueColors = [...new Set(colors)];
+
+    sizeDistribution[sc]++;
+    styleCounts[style]++;
+    uniqueColors.forEach(c => allColors.add(c));
+
+    icons.push({
+      svg: cleaned,
+      size: { width: icon.width, height: icon.height },
+      sizeClass: sc,
+      style,
+      colors: uniqueColors,
+    });
+  }
+
+  const dominantStyle = Object.entries(styleCounts).sort((a, b) => b[1] - a[1])[0][0];
+
+  return {
+    icons,
+    sizeDistribution,
+    dominantStyle,
+    colorPalette: [...allColors],
+    count: icons.length,
+  };
+}

package/src/extractors/images.js

@@ -0,0 +1,76 @@
+export function extractImageStyles(imageData) {
+  const ratioCount = new Map();
+  const shapeCount = new Map();
+  const filterCount = new Map();
+  const fitCount = new Map();
+  const patternCount = new Map();
+
+  const knownRatios = [
+    [1, 1, '1:1'], [4, 3, '4:3'], [3, 4, '3:4'], [16, 9, '16:9'], [9, 16, '9:16'],
+    [3, 2, '3:2'], [2, 3, '2:3'], [21, 9, '21:9'],
+  ];
+
+  function closestRatio(w, h) {
+    if (!w || !h) return null;
+    const r = w / h;
+    let best = null, bestDiff = 0.15;
+    for (const [rw, rh, label] of knownRatios) {
+      const diff = Math.abs(r - rw / rh);
+      if (diff < bestDiff) { best = label; bestDiff = diff; }
+    }
+    return best || `${Math.round(r * 100) / 100}:1`;
+  }
+
+  function classifyShape(borderRadius) {
+    const br = parseFloat(borderRadius) || 0;
+    if (br >= 50) return 'circular';
+    if (br >= 20) return 'pill';
+    if (br > 0) return 'rounded';
+    return 'square';
+  }
+
+  function classifyPattern(img, shape) {
+    const w = img.width || 0, h = img.height || 0;
+    const area = w * h;
+    if (shape === 'circular' && area <= 22500) return 'avatar';
+    if (w >= 600 && h >= 200 && img.objectFit === 'cover') return 'hero';
+    if (area <= 40000 && (shape === 'rounded' || shape === 'square')) return 'thumbnail';
+    if (w >= 400 && h >= 400 && shape === 'square') return 'gallery';
+    return 'general';
+  }
+
+  function incMap(map, key, extra) {
+    if (!map.has(key)) map.set(key, { count: 0, ...extra });
+    map.get(key).count++;
+  }
+
+  for (const img of imageData) {
+    const ratio = closestRatio(img.width, img.height);
+    if (ratio) incMap(ratioCount, ratio);
+
+    const shape = classifyShape(img.borderRadius);
+    incMap(shapeCount, shape, { borderRadius: img.borderRadius || '0' });
+
+    if (img.filter && img.filter !== 'none') {
+      for (const f of img.filter.match(/[a-z-]+\(/g) || [img.filter]) {
+        incMap(filterCount, f.replace('(', ''));
+      }
+    }
+
+    if (img.objectFit && img.objectFit !== 'initial') incMap(fitCount, img.objectFit);
+
+    const pattern = classifyPattern(img, shape);
+    incMap(patternCount, pattern, { styles: { objectFit: img.objectFit, borderRadius: img.borderRadius, shape } });
+  }
+
+  const toArray = (map, keyName) =>
+    Array.from(map.entries()).map(([k, v]) => ({ [keyName]: k, ...v })).sort((a, b) => b.count - a.count);
+
+  return {
+    patterns: toArray(patternCount, 'name'),
+    aspectRatios: toArray(ratioCount, 'ratio'),
+    shapes: toArray(shapeCount, 'shape'),
+    filters: toArray(filterCount, 'filter'),
+    objectFitUsage: toArray(fitCount, 'value'),
+  };
+}

package/src/extractors/interactions.js

@@ -8,9 +8,10 @@ export async function captureInteractions(url, options = {}) {
   const context = await browser.newContext({ viewport: { width, height } });
   const page = await context.newPage();
 
-  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  await page.waitForLoadState('networkidle').catch(() => {});
   if (wait > 0) await page.waitForTimeout(wait);
-  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(() => document.fonts.ready).catch(() => {});
 
   const results = { buttons: [], links: [], inputs: [] };
 

package/src/extractors/responsive.js

@@ -20,9 +20,10 @@ export async function captureResponsive(url, options = {}) {
     const page = await context.newPage();
 
     try {
-      await page.goto(url, { waitUntil: 'networkidle', timeout: 20000 });
+      await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 });
+      await page.waitForLoadState('networkidle').catch(() => {});
       if (wait > 0) await page.waitForTimeout(wait);
-      await page.evaluate(() => document.fonts.ready);
+      await page.evaluate(() => document.fonts.ready).catch(() => {});
 
       const data = await page.evaluate(() => {
         const body = document.body;

package/src/extractors/zindex.js

@@ -0,0 +1,65 @@
+const LAYER_DEFS = [
+  { name: 'modal', min: 1000, max: Infinity },
+  { name: 'dropdown', min: 100, max: 999 },
+  { name: 'sticky', min: 10, max: 99 },
+  { name: 'base', min: -Infinity, max: 9 },
+];
+
+function elLabel(el) {
+  const cls = el.classList?.length ? '.' + [...el.classList].join('.') : '';
+  return el.tag + cls;
+}
+
+export function extractZIndex(styles) {
+  // Filter and parse explicit z-index values
+  const entries = styles
+    .filter(el => el.zIndex !== 'auto')
+    .map(el => ({ value: parseInt(el.zIndex, 10), el }))
+    .filter(e => !isNaN(e.value));
+
+  // Group by z-index value
+  const byValue = new Map();
+  for (const { value, el } of entries) {
+    if (!byValue.has(value)) byValue.set(value, []);
+    byValue.get(value).push(el);
+  }
+
+  const allValues = [...byValue.keys()].sort((a, b) => a - b);
+
+  // Build scale: each unique value with count and representative elements
+  const scale = allValues.map(value => ({
+    value,
+    count: byValue.get(value).length,
+    elements: byValue.get(value).map(elLabel),
+  }));
+
+  // Build layers from predefined ranges
+  const layers = LAYER_DEFS
+    .map(def => {
+      const matching = allValues.filter(v => v >= def.min && v <= def.max);
+      if (!matching.length) return null;
+      const elements = matching.flatMap(v => byValue.get(v).map(elLabel));
+      return {
+        name: def.name,
+        range: [Math.min(...matching), Math.max(...matching)],
+        elements,
+      };
+    })
+    .filter(Boolean);
+
+  // Detect issues
+  const issues = [];
+  const highValues = allValues.filter(v => v > 9999);
+  if (highValues.length) {
+    issues.push({ type: 'excessive', message: `Very high z-index values: ${highValues.join(', ')}` });
+  }
+  if (allValues.length >= 5) {
+    const spread = allValues[allValues.length - 1] - allValues[0];
+    const density = allValues.length / (spread || 1);
+    if (density > 0.3) {
+      issues.push({ type: 'z-index-war', message: `${allValues.length} unique values in a narrow range (${allValues[0]}-${allValues[allValues.length - 1]})` });
+    }
+  }
+
+  return { layers, allValues, issues, scale };
+}

package/src/formatters/markdown.js

@@ -500,6 +500,104 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Gradients ──
+  if (design.gradients && design.gradients.count > 0) {
+    lines.push('## Gradients');
+    lines.push('');
+    lines.push(`**${design.gradients.count} unique gradients** detected.`);
+    lines.push('');
+    lines.push('| Type | Direction | Stops | Classification |');
+    lines.push('|------|-----------|-------|----------------|');
+    for (const g of design.gradients.gradients.slice(0, 15)) {
+      lines.push(`| ${g.type} | ${g.direction || '—'} | ${g.stops.length} | ${g.classification} |`);
+    }
+    lines.push('');
+    lines.push('```css');
+    for (const g of design.gradients.gradients.slice(0, 5)) {
+      lines.push(`background: ${g.raw};`);
+    }
+    lines.push('```');
+    lines.push('');
+  }
+
+  // ── Z-Index Map ──
+  if (design.zIndex && design.zIndex.allValues.length > 0) {
+    lines.push('## Z-Index Map');
+    lines.push('');
+    lines.push(`**${design.zIndex.allValues.length} unique z-index values** across ${design.zIndex.layers.length} layers.`);
+    lines.push('');
+    if (design.zIndex.layers.length > 0) {
+      lines.push('| Layer | Range | Elements |');
+      lines.push('|-------|-------|----------|');
+      for (const l of design.zIndex.layers) {
+        const elNames = l.elements.slice(0, 3).join(', ');
+        lines.push(`| ${l.name} | ${l.range} | ${elNames} |`);
+      }
+      lines.push('');
+    }
+    if (design.zIndex.issues.length > 0) {
+      lines.push('**Issues:**');
+      for (const issue of design.zIndex.issues) {
+        lines.push(`- ${issue}`);
+      }
+      lines.push('');
+    }
+  }
+
+  // ── Icons ──
+  if (design.icons && design.icons.count > 0) {
+    lines.push('## SVG Icons');
+    lines.push('');
+    lines.push(`**${design.icons.count} unique SVG icons** detected. Dominant style: **${design.icons.dominantStyle || 'mixed'}**.`);
+    lines.push('');
+    const dist = design.icons.sizeDistribution;
+    if (dist) {
+      lines.push('| Size Class | Count |');
+      lines.push('|------------|-------|');
+      for (const [cls, count] of Object.entries(dist)) {
+        if (count > 0) lines.push(`| ${cls} | ${count} |`);
+      }
+      lines.push('');
+    }
+    if (design.icons.colorPalette.length > 0) {
+      lines.push(`**Icon colors:** ${design.icons.colorPalette.slice(0, 10).map(c => `\`${c}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
+  // ── Font Files ──
+  if (design.fonts && design.fonts.fonts.length > 0) {
+    lines.push('## Font Files');
+    lines.push('');
+    lines.push('| Family | Source | Weights | Styles |');
+    lines.push('|--------|--------|---------|--------|');
+    for (const f of design.fonts.fonts) {
+      lines.push(`| ${f.family} | ${f.source} | ${f.weights.join(', ')} | ${f.styles.join(', ')} |`);
+    }
+    lines.push('');
+    if (design.fonts.googleFontsUrl) {
+      lines.push(`**Google Fonts URL:** \`${design.fonts.googleFontsUrl}\``);
+      lines.push('');
+    }
+  }
+
+  // ── Image Styles ──
+  if (design.images && design.images.patterns.length > 0) {
+    lines.push('## Image Style Patterns');
+    lines.push('');
+    lines.push('| Pattern | Count | Key Styles |');
+    lines.push('|---------|-------|------------|');
+    for (const p of design.images.patterns) {
+      const styles = Object.entries(p.styles || {}).map(([k, v]) => `${k}: ${v}`).join(', ');
+      lines.push(`| ${p.name} | ${p.count} | ${styles || '—'} |`);
+    }
+    lines.push('');
+    if (design.images.aspectRatios.length > 0) {
+      lines.push(`**Aspect ratios:** ${design.images.aspectRatios.slice(0, 8).map(a => `${a.ratio} (${a.count}x)`).join(', ')}`);
+      lines.push('');
+    }
+  }
+
   // ── Quick Start ──
   lines.push('## Quick Start');
   lines.push('');

package/src/index.js

@@ -11,6 +11,11 @@ import { extractComponents } from './extractors/components.js';
 import { extractAccessibility } from './extractors/accessibility.js';
 import { extractLayout } from './extractors/layout.js';
 import { scoreDesignSystem } from './extractors/scoring.js';
+import { extractGradients } from './extractors/gradients.js';
+import { extractZIndex } from './extractors/zindex.js';
+import { extractIcons } from './extractors/icons.js';
+import { extractFonts } from './extractors/fonts.js';
+import { extractImageStyles } from './extractors/images.js';
 
 export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, options);
@@ -35,8 +40,13 @@ export async function extractDesignLanguage(url, options = {}) {
     components: extractComponents(styles),
     accessibility: extractAccessibility(styles),
     layout: extractLayout(styles),
+    gradients: extractGradients(styles),
+    zIndex: extractZIndex(styles),
+    icons: rawData.light.icons ? extractIcons(rawData.light.icons) : { icons: [], count: 0 },
+    fonts: rawData.light.fontData ? extractFonts(rawData.light.fontData) : { fonts: [], systemFonts: [] },
+    images: rawData.light.images ? extractImageStyles(rawData.light.images) : { patterns: [], aspectRatios: [] },
     componentScreenshots: rawData.componentScreenshots || {},
-    score: null, // populated below
+    score: null,
   };
 
   if (rawData.dark) {
@@ -68,3 +78,5 @@ export { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from './multi
 export { generateClone } from './clone.js';
 export { scoreDesignSystem } from './extractors/scoring.js';
 export { watchSite } from './watch.js';
+export { diffDarkMode } from './darkdiff.js';
+export { applyDesign } from './apply.js';

package/website/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "website",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}

package/website/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

package/website/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/website/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.