Layout Management
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Layout Management in the Writer application encompasses the structural organization of the user interface, the handling of state-driven view transitions, and the configuration of specific editing and preview components. The architecture utilizes a distraction-free design philosophy, centering on a NavigationSplitView that separates file navigation from the primary editing environment.
The system manages visibility toggles for the live preview, responsive sizing for the text editor, and the injection of global state containers—EditorStore, ThemeStore, and LayoutStore—through the SwiftUI environment to ensure consistent behavior across the application's window hierarchy.
Sources: CLAUDE.md:16-35, Writer/WriterApp.swift:65-72, Writer/ContentView.swift:23-34
Core Architecture and State
The layout is governed by the Observation framework, where the LayoutStore (and other stores) acts as the source of truth for UI state. This state determines the visibility of secondary panes and the rendering of the split-view layout.
Layout State Management
The application initializes three primary state objects at the entry point, which are then propagated to all child views.
| Component | Responsibility |
|---|---|
EditorStore | Manages file tree state, document text, and selection. |
ThemeStore | Handles preview themes and typography settings. |
LayoutStore | Controls UI-specific toggles like the preview pane visibility. |
Sources: Writer/WriterApp.swift:13-16, CLAUDE.md:20-30
Structural Hierarchy
The following diagram illustrates the relationship between the main application components and how layout state flows from the root window to specific UI elements.
The application uses a NavigationSplitView for the primary sidebar-detail relationship, and an HSplitView within the detail pane to manage the editor/preview split.
Sources: Writer/ContentView.swift:23-34, Writer/ContentView.swift:115-122
Component Layout and Visibility
The layout system provides mechanisms to toggle specific components based on user interaction or keyboard shortcuts.
Preview Visibility Toggle
The preview pane's visibility is controlled by layoutStore.showPreview. When toggled, the application updates the HSplitView constraints and adjusts the opacity and interactivity of the WebView.
- Keyboard Shortcut:
Command + Option + P(Global) orCommand + P(Toolbar). - Behavior: The preview container's
minWidthandmaxWidthare dynamically adjusted to0or.infinitybased on the boolean state.
Editor Sizing and Constraints
The editor is wrapped in a GeometryReader to ensure it remains centered and readable. It maintains a maximum width of 800 points or 85% of the available width, whichever is smaller, to preserve the distraction-free aesthetic.
MarkdownTextView(text: Bindable(editorStore).documentText)
.frame(
width: min(800, geometry.size.width * 0.85),
height: geometry.size.height,
alignment: .center
)
Sources: Writer/ContentView.swift:105-111
Typography and Themes
Layout management extends to the visual styling of the content within the editor and preview. The PreviewTheme struct defines the physical layout of the rendered document through CSS generation.
CSS Layout Configuration
The application uses a PreviewTheme to generate inline CSS that controls margins, padding, and block-level layout within the WebView.
| Feature | CSS Property | Implementation Detail |
|---|---|---|
| Max Width | max-width: 100% | Prevents horizontal overflow. |
| Padding | padding: 16px | Standard spacing for the body. |
| Line Height | line-height: 1.6 | Defined by the active theme preset. |
| Headings | margin-top: 24px | Vertical spacing for structural hierarchy. |
Sources: Writer/PreviewTheme.swift:46-136
Editor Typography
The MarkdownTextView manages the layout of the raw text through NSParagraphStyle and NSTextContainer configurations.
- Insets: 24pt horizontal and 12pt vertical padding are applied to the
NSTextView. - Indentation: Headings utilize a custom
headIndentandfirstLineHeadIndentcalculated based on the font's space width to create a visual "outdent" effect for markdown markers (#).
Sources: Writer/MarkdownTextView.swift:34-36, Writer/MarkdownTextView.swift:115-131
Conclusion
Layout Management in Writer is a hybrid system combining SwiftUI's declarative split views with fine-grained control over AppKit-based text rendering and CSS-based HTML previews. By centralizing visibility and thematic state in observable stores, the application maintains a consistent UI that adapts to user preferences for distraction-free editing.