or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

dmg-building.mddmg-customization.mderror-handling.mdindex.mdlicense-management.mdvolume-operations.md
tile.json

dmg-customization.mddocs/

DMG Customization

Comprehensive DMG appearance and content customization including backgrounds, icons, window positioning, file layouts, and visual styling. Provides the core functionality for creating professional-looking macOS application installers.

Capabilities

DMG Customization Engine

The main function for applying customization settings to DMG files using the Python dmgbuild library.

/**
 * Apply comprehensive customization to DMG file
 * Handles backgrounds, icons, window layout, compression, and content positioning
 * @param config - Complete DMG builder configuration
 * @returns Promise resolving to boolean indicating success
 */
function customizeDmg(config: DmgBuilderConfig): Promise<boolean>;

interface DmgBuilderConfig {
  /** Path to the .app bundle being packaged */
  appPath: string;
  /** Output path for the generated DMG file */
  artifactPath: string;
  /** Volume name for the mounted DMG */
  volumeName: string;
  /** DMG appearance and behavior specification */
  specification: DmgOptions;
  /** MacPackager instance for resource access */
  packager: MacPackager;
}

Usage Examples:

import { customizeDmg } from "dmg-builder";

const config = {
  appPath: "/path/to/MyApp.app",
  artifactPath: "/output/MyApp-1.0.0.dmg", 
  volumeName: "MyApp 1.0.0",
  specification: {
    background: "/path/to/background.tiff",
    iconSize: 80,
    window: { 
      position: { x: 100, y: 400 },
      size: { width: 600, height: 400 }
    },
    contents: [
      { path: "/path/to/MyApp.app", x: 150, y: 200, type: "file" },
      { path: "/Applications", x: 450, y: 200, type: "link" }
    ]
  },
  packager: macPackager
};

const success = await customizeDmg(config);

Background Processing

Intelligent background image processing with support for automatic background detection and format conversion.

/**
 * Compute appropriate background image path for DMG
 * Auto-detects background.tiff or background.png in build resources
 * @param packager - Platform packager with access to build resources
 * @returns Promise resolving to background image path
 */
function computeBackground(packager: PlatformPackager<any>): Promise<string>;

Background Detection Priority:

  1. background.tiff in build resources directory
  2. background.png in build resources directory
  3. Default template background (templates/background.tiff)

Usage Examples:

import { computeBackground } from "dmg-builder";

// Automatic background detection
const backgroundPath = await computeBackground(packager);

// Manual background processing with retina support
const processedBackground = await transformBackgroundFileIfNeed(
  "/path/to/background.png",
  tmpDir
);

Image Dimension Analysis

Precise image dimension detection using macOS sips tool for accurate window sizing.

/**
 * Extract image dimensions using macOS sips command
 * Provides accurate pixel dimensions for background images
 * @param background - Path to image file (TIFF, PNG, JPG, etc.)
 * @returns Promise resolving to width and height in pixels
 * @throws Error if sips fails or cannot parse dimensions
 */
function getImageSizeUsingSips(background: string): Promise<{width: number, height: number}>;

Usage Examples:

import { getImageSizeUsingSips } from "dmg-builder";

// Get dimensions for window auto-sizing
const { width, height } = await getImageSizeUsingSips("/path/to/background.tiff");

// Auto-size window to background image
const windowConfig = {
  position: { x: 400, y: Math.round((1440 - height) / 2) }, // Center vertically
  size: { width, height }
};

DMG Build Configuration

Complete Build Configuration Interface

/**
 * Complete DMG build configuration for dmgbuild Python library
 * Includes all visual and structural customization options
 */
interface DmgBuildConfig {
  /** DMG volume title */
  title: string;
  /** Path to DMG icon file */
  icon?: string | null;
  /** Path to badge icon overlay */
  "badge-icon"?: string | null;
  /** Path to background image */
  background?: string | null;
  /** Background color (hex) when no background image */
  "background-color"?: string | null;
  /** Icon size in pixels */
  "icon-size"?: number | null;
  /** Text size for icon labels (points) */
  "text-size"?: number | null;
  /** DMG window configuration */
  window?: {
    position?: { x?: number; y?: number };
    size?: { width?: number; height?: number };
  };
  /** DMG format (UDZO, UDRO, UDBZ, etc.) */
  format?: string;
  /** Filesystem type (HFS+, APFS) */
  filesystem?: string;
  /** Compression level (0-9) */
  "compression-level"?: number | null;
  /** Path to license file */
  license?: string | null;
  /** File and folder layout configuration */
  contents?: Array<{
    /** Path to file/directory to include */
    path: string;
    /** X position in DMG window */
    x: number;
    /** Y position in DMG window */
    y: number;
    /** Display name (optional) */
    name?: string;
    /** Item type */
    type?: "file" | "link" | "position";
    /** Hide file extension */
    hide_extension?: boolean;
    /** Hide item from view */
    hidden?: boolean;
  }>;
}

Content Layout Configuration

Detailed configuration for positioning files and folders within the DMG window.

Content Types:

  • file: Regular files and applications
  • link: Symbolic links (commonly /Applications)
  • position: Invisible position markers

Usage Examples:

const contents = [
  // Application positioned on left
  {
    path: "/path/to/MyApp.app",
    x: 130,
    y: 220,
    name: "MyApp.app",
    type: "file"
  },
  // Applications folder link on right
  {
    path: "/Applications", 
    x: 410,
    y: 220,
    type: "link"
  },
  // Additional files
  {
    path: "/path/to/ReadMe.txt",
    x: 270,
    y: 320,
    name: "Read Me",
    type: "file"
  },
  // Hidden positioning element
  {
    path: "/path/to/invisible", 
    x: 500,
    y: 100,
    type: "position",
    hidden: true
  }
];

Customization Features

Visual Styling Options

  • Icon Size: Configurable icon size (typically 64-128 pixels)
  • Text Size: Icon label text size (10-16 points, default 12)
  • Background: Custom background images with retina support
  • Background Color: Solid color backgrounds (hex format)
  • Window Position: Custom DMG window position on screen
  • Window Size: Custom DMG window dimensions

Advanced Layout Features

  • Precise Positioning: Pixel-perfect positioning of all DMG contents
  • Custom Names: Override display names for files and folders
  • Visibility Control: Hide extensions, hide items completely
  • Link Creation: Automatic symbolic link creation (e.g., to /Applications)
  • Multi-file Support: Support for multiple files, folders, and links

Compression and Format Options

  • Format Options:
    • UDZO: Compressed (default)
    • UDRO: Read-only uncompressed
    • UDBZ: Highly compressed (bzip2)
    • ULFO: Compressed (LZFSE)
  • Compression Levels: 0-9 compression intensity
  • Filesystem: HFS+ (default) or APFS support

Python Integration

DMG Builder uses the Python dmgbuild library for advanced DMG creation:

Python Execution

// Internal implementation uses Python subprocess
const pythonPath = process.env.PYTHON_PATH || "python3";
await exec(pythonPath, [
  path.join(getDmgVendorPath(), "run_dmgbuild.py"),
  "-s", settingsFile,
  volumeName,
  artifactPath
]);

Environment Variables

  • PYTHON_PATH: Override Python executable path
  • ELECTRON_BUILDER_COMPRESSION_LEVEL: Set default compression level
  • PYTHONIOENCODING: Forced to "utf8" for proper character handling

Error Handling and Validation

Configuration Validation

  • Icon Text Size: Must be between 10-16 points (defaults to 12)
  • Background Conflicts: Cannot specify both background image and backgroundColor
  • Required Fields: Validates presence of essential configuration fields
  • Path Validation: Ensures referenced files exist and are accessible

Runtime Error Handling

  • Python Execution: Falls back from python3 to python if needed
  • File Access: Graceful handling of missing or inaccessible files
  • Format Validation: Validates DMG format and compression settings
  • Memory Management: Proper cleanup of temporary files and resources

The customization system provides comprehensive control over DMG appearance while maintaining robust error handling and intelligent defaults for simplified usage.