Palmier Pro Frontend Codebase Structure: SwiftUI and AppKit Architecture Explained

The Palmier Pro frontend codebase is organized under Sources/PalmierPro into modular feature groups like UI, Timeline, and MediaPanel, using SwiftUI for the interface and AppKit for complex drag-and-drop interactions.

Palmier Pro is a macOS-only video editor built on Swift 6.2 that demonstrates a clean separation of concerns in its frontend architecture. According to the palmier-io/palmier-pro repository, the structure of the frontend codebase follows a feature-based organization where each major screen operates as a self-contained module. This architecture leverages SwiftUI for declarative UI while falling back to AppKit when low-level interaction control is required.

Top-Level Directory Organization

The frontend source resides entirely within the Sources/PalmierPro package, subdivided into logical feature domains. Each folder represents a distinct functional area, importing only the utilities it requires to maintain fast compile times and testability.

Core Feature Groups

• UI – Houses the design system (AppTheme.swift) and reusable widgets like CapsuleButton.swift, defining all colors, spacing, typography, and shadows.
• Timeline – Contains TimelineView.swift for the editable timeline interface and SnapEngine.swift for playhead snapping logic.
• MediaPanel – Manages the asset browser through MediaPanelView.swift and handles complex drag-and-drop via MediaPanelDropArea.swift.
• Inspector – Provides property panels for selected clips via InspectorView.swift.
• Preview – Wraps the video engine in PreviewView.swift and manages GPU-accelerated rendering through VideoEngine.swift.
• Editor – Orchestrates the main window via EditorWindowController.swift and toolbar components.
• Generation – Isolates AI-specific UI components like GenerationView.swift for prompt entry and reference tiles.
• Search – Coordinates visual search functionality through SearchIndexCoordinator.swift.
• Settings – Implements preference panes via SettingsView.swift.
• Utilities – Shared helpers including TimeFormatting.swift for timestamp formatting.

SwiftUI-First Architecture with AppKit Fallbacks

The frontend codebase adopts a SwiftUI-first approach for declarative interface construction, but strategically uses AppKit where SwiftUI’s limitations would compromise functionality. This hybrid pattern is most evident in drag-and-drop handling, where nested drop targets would otherwise conflict.

Design System Implementation

All visual constants live in UI/AppTheme.swift, ensuring consistency across the application. Views reference this central theme rather than hardcoding values.

struct ExampleButton: View {
    var body: some View {
        Button("Press me") {
            // Action
        }
        .padding(AppTheme.Spacing.md)
        .background(AppTheme.Background.raisedColor)
        .foregroundColor(AppTheme.Text.primaryColor)
        .cornerRadius(AppTheme.Radius.sm)
        .shadow(AppTheme.Shadow.sm)
    }
}

AppKit Integration for Complex Interactions

When TimelineView or MediaPanel require sophisticated drag-and-drop behavior, the codebase implements NSDraggingDestination directly. In MediaPanel/MediaTab/MediaPanelDropArea.swift, an AppKit view handles the drop operation to avoid SwiftUI .onDrop conflicts.

class MediaDropArea: NSView, NSDraggingDestination {
    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        registerForDraggedTypes([.fileURL])
    }

    required init?(coder: NSCoder) { fatalError() }

    func draggingEntered(_ sender: NSDraggingInfo) -> NSDragOperation {
        .copy
    }

    func performDragOperation(_ sender: NSDraggingInfo) -> Bool {
        // Handle dropped media assets
        true
    }
}

Key Frontend Modules Explained

Timeline and Snapping Engine

The Timeline directory implements the core editing interface. TimelineView.swift renders the ruler, clips, and playhead overlay, while SnapEngine.swift provides the snapping algorithm used to align clips to the grid.

struct SnapEngine {
    let gridInterval: Double = 0.1   // seconds

    func snap(_ time: Double) -> Double {
        (time / gridInterval).rounded() * gridInterval
    }
}

Media Panel and Drag-and-Drop

MediaPanelView.swift serves as the container for Media, Music, and Captions tabs. The drag-and-drop implementation in MediaPanelDropArea.swift bridges the gap between SwiftUI’s limitations and macOS’s native dragging requirements.

Preview and Video Engine

The Preview module builds a GPU-accelerated rendering pipeline using AVFoundation and Metal. PreviewView.swift embeds this engine into SwiftUI, while VideoEngine.swift manages the underlying playback and compositing logic.

Inspector and Settings

InspectorView.swift provides property editing for selected clips and keyframes, functioning as the right-side panel in the editor. SettingsView.swift handles the application preferences including Account, Agent, and Notifications panes.

AI Generation and Search

The Generation folder isolates AI-specific UI components, with GenerationView.swift handling prompt entry and reference tile display. The Search module coordinates visual search indexing through SearchIndexCoordinator.swift.

Summary

• Modular Organization: The frontend codebase structure separates concerns into Sources/PalmierPro subdirectories like Timeline, MediaPanel, and Inspector, each acting as independent SwiftUI modules.
• Hybrid UI Stack: SwiftUI drives the declarative interface, but AppKit handles complex drag-and-drop in files like MediaPanelDropArea.swift.
• Centralized Design System: UI/AppTheme.swift contains all visual constants, ensuring consistency across the CapsuleButton.swift, ToolbarView.swift, and other widgets.
• Performance Optimization: The Preview module uses VideoEngine.swift for GPU-accelerated rendering while exposing a SwiftUI-friendly PreviewView.swift interface.
• Clean Separation: AI generation UI lives in Generation/UI, keeping prompts and reference tiles isolated from core editing components.

Frequently Asked Questions

What UI framework does Palmier Pro use?

Palmier Pro uses SwiftUI as its primary framework for building the macOS interface, with AppKit used selectively for low-level interactions that require NSDraggingDestination handling. This hybrid approach is implemented in Sources/PalmierPro files like MediaPanelDropArea.swift to overcome SwiftUI’s drag-and-drop limitations.

Where is the drag-and-drop logic implemented?

The drag-and-drop logic resides in MediaPanel/MediaPanelDropArea.swift within the Sources/PalmierPro directory. This file implements NSDraggingDestination directly to handle nested drop targets, which would conflict with SwiftUI’s native .onDrop modifier in the complex timeline and media browser contexts.

How does Palmier Pro handle video preview rendering?

Video preview rendering is handled by the Preview module, where PreviewView.swift provides the SwiftUI interface and VideoEngine.swift manages the AVFoundation and Metal pipeline. This architecture keeps the GPU-accelerated rendering logic separate from the UI presentation layer while maintaining real-time performance.

Is the frontend codebase modular?

Yes, the frontend codebase is highly modular, with each major feature (Timeline, Inspector, MediaPanel) operating as a self-contained SwiftUI module under Sources/PalmierPro. This structure minimizes cross-dependencies, reduces compile times, and allows individual components to be tested in isolation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}