### Quick Start Settings Interface

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Build a settings interface using SettingsKit's declarative API. This example demonstrates toggles and sliders bound to an observable object. Use `@Bindable` for direct binding to observable properties.

```swift
import SwiftUI
import SettingsKit

@Observable
class AppSettings {
    var notificationsEnabled = true
    var darkMode = false
    var username = "Guest"
    var fontSize: Double = 14.0
    var soundEnabled = true
    var autoLockDelay: Double = 300
    var hardwareAcceleration = true
}

struct MySettings: SettingsContainer {
    @Environment(AppSettings.self) var appSettings

    var settingsBody: some SettingsContent {
        @Bindable var settings = appSettings

        // Plain icon (no colored background)
        SettingsGroup("General", systemImage: "gear") {
            Toggle("Notifications", isOn: $settings.notificationsEnabled)
            Toggle("Dark Mode", isOn: $settings.darkMode)
        }

        // iOS Settings-style colored icons
        SettingsGroup("Appearance") {
            Slider(value: $settings.fontSize, in: 10...24, step: 1) {
                Text("Font Size: \(Int(settings.fontSize))pt")
            }
        } icon: {
            SettingsIcon("paintbrush", color: .blue)
        }

        SettingsGroup("Privacy & Security") {
            Slider(value: $settings.autoLockDelay, in: 60...3600, step: 60) {
                Text("Auto Lock: \(Int(settings.autoLockDelay/60)) min")
            }
        } icon: {
            SettingsIcon("lock.shield", color: .blue)
        }
    }
}
```

--------------------------------

### SwiftUI Nested Navigation Example

Source: https://context7.com/aeastr/settingskit/llms.txt

Demonstrates creating deeply nested navigation structures using `SettingsGroup` within SettingsKit. This example showcases how to organize settings into multiple levels of expandable sections.

```swift
import SwiftUI
import SettingsKit

struct NestedNavigationExample: SettingsContainer {
    @State private var autoJoinWiFi = true
    @State private var vpnEnabled = false
    @State private var use24Hour = true
    @State private var autoCorrect = true
    @State private var language = "en"

    var settingsBody: some SettingsContent {
        SettingsGroup("General") {
            // First level nested groups
            SettingsGroup("About", systemImage: "info.circle") {
                Text("Version: 1.0.0")
                Text("Build: 42")
            }

            // Deeper nested navigation
            SettingsGroup("Network", systemImage: "network") {
                SettingsGroup("Wi-Fi Settings", systemImage: "wifi") {
                    Toggle("Auto-Join Networks", isOn: $autoJoinWiFi)
                        .indexed("Auto-Join Networks", tags: ["wifi", "connection"])
                }

                SettingsGroup("VPN Configuration", systemImage: "lock.shield") {
                    Toggle("VPN Enabled", isOn: $vpnEnabled)
                        .indexed("VPN", tags: ["security", "privacy"])
                    Text("Protocol: IKEv2")
                }

                SettingsGroup("Advanced", systemImage: "gearshape.2") {
                    Text("DNS: Automatic")
                    Text("Proxy: Off")
                }
            }

            // Inline nested group (appears as section header)
            SettingsGroup("Settings & Privacy", .inline) {
                SettingsGroup("Date & Time", systemImage: "clock") {
                    Toggle("24-Hour Time", isOn: $use24Hour)
                        .indexed("24-Hour Time")
                }

                SettingsGroup("Keyboard", systemImage: "keyboard") {
                    Toggle("Auto-Correction", isOn: $autoCorrect)
                        .indexed("Auto-Correction")
                }

                SettingsGroup("Language & Region", systemImage: "globe") {
                    Picker("Language", selection: $language) {
                        Text("English").tag("en")
                        Text("Spanish").tag("es")
                        Text("French").tag("fr")
                    }
                }
            }
        } icon: {
            SettingsIcon("gearshape", color: .gray)
        }
    }
}
```

--------------------------------

### Settings Styles

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Demonstrates how to apply different visual styles to the settings interface.

```APIDOC
## Settings Styles

### Description
The `SettingsKit` provides modifiers to customize the overall appearance of the settings interface. Common styles include `.sidebar` (default) and `.single` column.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
- **style** (SettingsStyle) - The desired visual style for the settings interface.
  - `.sidebar`: A split-view navigation style.
  - `.single`: A clean, single-column list style.

### Request Example
```swift
// Sidebar Style (Default)
MySettings(settings: settings)
    .settingsStyle(.sidebar)

// Single Column Style
MySettings(settings: settings)
    .settingsStyle(.single)
```

### Response
N/A
```

--------------------------------

### Generate Dynamic Settings with ForEach

Source: https://context7.com/aeastr/settingskit/llms.txt

Demonstrates using ForEach to create dynamic settings groups from an observable collection and a static array.

```swift
import SwiftUI
import SettingsKit

struct Account: Identifiable {
    let id = UUID()
    var name: String
    var email: String
    var isActive: Bool
}

@Observable
class AccountManager {
    var accounts: [Account] = [
        Account(name: "Personal", email: "personal@example.com", isActive: true),
        Account(name: "Work", email: "work@company.com", isActive: true),
        Account(name: "Secondary", email: "secondary@example.com", isActive: false)
    ]
}

struct DynamicSettingsExample: SettingsContainer {
    @Environment(AccountManager.self) var accountManager

    var settingsBody: some SettingsContent {
        @Bindable var manager = accountManager

        SettingsGroup("Accounts", systemImage: "person.2") {
            ForEach($manager.accounts) { $account in
                SettingsGroup(account.name, systemImage: "person.circle") {
                    Text("Email: \(account.email)")
                    Toggle("Active", isOn: $account.isActive)
                        .indexed("\(account.name) Active", tags: ["account", "status"])
                }
            }
        }

        // Static list example
        SettingsGroup("Quick Actions", .inline) {
            ForEach(["Wi-Fi", "Bluetooth", "Airplane Mode"], id: \.self) { item in
                SettingsGroup(item, systemImage: iconFor(item)) {
                    Text("Configure \(item)")
                }
            }
        }
    }

    private func iconFor(_ item: String) -> String {
        switch item {
        case "Wi-Fi": return "wifi"
        case "Bluetooth": return "wave.3.right"
        case "Airplane Mode": return "airplane"
        default: return "gear"
        }
    }
}
```

--------------------------------

### Nested Navigation

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Illustrates how to create nested settings hierarchies by placing `SettingsGroup` instances within other groups.

```APIDOC
## Nested Navigation

### Description
Settings groups can be nested within each other to create deep hierarchies. This allows for organizing complex settings into logical sub-sections.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```swift
SettingsGroup("General", systemImage: "gear") {
    SettingsGroup("About", systemImage: "info.circle") {
        Text("Version: 1.0.0")
        Text("Build: 42")
    }

    SettingsGroup("Language", systemImage: "globe") {
        Picker("Language", selection: $language) {
            Text("English").tag("en")
            Text("Spanish").tag("es")
        }
    }
}
```

### Response
N/A
```

--------------------------------

### Implement Standard Settings Groups

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Use standard SwiftUI controls directly within a SettingsGroup.

```swift
SettingsGroup("Sound", systemImage: "speaker.wave.2") {
    Slider(value: $volume, in: 0...100)
    Toggle("Haptic Feedback", isOn: $haptics)
    Picker("Output", selection: $audioOutput) {
        Text("Speaker").tag(0)
        Text("Headphones").tag(1)
    }
}
```

--------------------------------

### Custom Settings Group

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Demonstrates how to create a completely custom settings group using `CustomSettingsGroup` for unique UI layouts.

```APIDOC
## Custom Settings Group

### Description
Use `CustomSettingsGroup` to create settings sections with completely custom UI that doesn't fit the standard structure. These groups are indexed and searchable by title, icon, and tags, but their internal elements are not individually indexed.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```swift
CustomSettingsGroup("Advanced Tools", systemImage: "hammer") {
    VStack(spacing: 20) {
        Text("Your Custom UI")
            .font(.largeTitle)

        Button("Custom Action") {
            performAction()
        }
    }
    .padding()
}
```

### Response
N/A
```

--------------------------------

### Create Settings Groups

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Use `SettingsGroup` to organize related settings. It can be presented as a navigation link (default) or an inline section.

```swift
// Navigation group (default) - appears as a tappable row
SettingsGroup("Display", systemImage: "sun.max") {
    // Settings items...
}

// Inline group - appears as a section header
SettingsGroup("Quick Settings", .inline) {
    // Settings items...
}
```

--------------------------------

### Standard Settings Group with SwiftUI Views

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Shows how to embed standard SwiftUI controls directly within a `SettingsGroup`.

```APIDOC
## Standard Settings Group

### Description
Within `SettingsGroup`, you can use standard SwiftUI controls like `Slider`, `Toggle`, and `Picker` directly. These controls will be rendered as part of the settings interface.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```swift
SettingsGroup("Sound", systemImage: "speaker.wave.2") {
    Slider(value: $volume, in: 0...100)
    Toggle("Haptic Feedback", isOn: $haptics)
    Picker("Output", selection: $audioOutput) {
        Text("Speaker").tag(0)
        Text("Headphones").tag(1)
    }
}
```

### Response
N/A
```

--------------------------------

### Create Reusable Components with SettingsContent

Source: https://context7.com/aeastr/settingskit/llms.txt

Conform to the SettingsContent protocol to define modular settings components that can be composed into a main settings hierarchy.

```swift
import SwiftUI
import SettingsKit

@Observable
class AppSettings {
    var debugMode = false
    var verboseLogging = false
    var crashReporting = true
    var analyticsEnabled = true
    var performanceMonitoring = false
}

// Extracted reusable settings component
struct DeveloperSettings: SettingsContent {
    @Bindable var settings: AppSettings

    var body: some SettingsContent {
        SettingsGroup("Developer") {
            Toggle("Debug Mode", isOn: $settings.debugMode)
                .indexed("Debug Mode", tags: ["developer", "testing"])

            if settings.debugMode {
                Toggle("Verbose Logging", isOn: $settings.verboseLogging)
                    .indexed("Verbose Logging")

                Toggle("Performance Monitoring", isOn: $settings.performanceMonitoring)
                    .indexed("Performance Monitoring")
            }
        } icon: {
            SettingsIcon("hammer", color: .orange)
        }
    }
}

// Another reusable component
struct PrivacySettings: SettingsContent {
    @Bindable var settings: AppSettings

    var body: some SettingsContent {
        SettingsGroup("Privacy") {
            Toggle("Crash Reporting", isOn: $settings.crashReporting)
                .indexed("Crash Reporting", tags: ["privacy", "diagnostics"])

            Toggle("Analytics", isOn: $settings.analyticsEnabled)
                .indexed("Analytics", tags: ["privacy", "tracking"])
        } icon: {
            SettingsIcon("hand.raised.fill", color: .blue)
        }
    }
}

// Main settings using extracted components
struct MainSettings: SettingsContainer {
    @Environment(AppSettings.self) var appSettings

    var settingsBody: some SettingsContent {
        @Bindable var settings = appSettings

        SettingsGroup("General", systemImage: "gear") {
            Text("App Version: 1.0.0")
        }

        // Use extracted components
        DeveloperSettings(settings: settings)
        PrivacySettings(settings: settings)
    }
}
```

--------------------------------

### Implement Conditional Settings

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Use standard Swift conditional logic to show or hide settings based on state.

```swift
SettingsGroup("Advanced", systemImage: "gearshape.2") {
    Toggle("Enable Advanced Features", isOn: $showAdvanced)

    if showAdvanced {
        Toggle("Advanced Option 1", isOn: $option1)
        Toggle("Advanced Option 2", isOn: $option2)
    }
}
```

--------------------------------

### Extract Settings into Structures

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Organize complex settings by conforming to the SettingsContent protocol.

```swift
struct DeveloperSettings: SettingsContent {
    @Bindable var settings: AppSettings

    var body: some SettingsContent {
        SettingsGroup("Developer", systemImage: "hammer") {
            Toggle("Debug Mode", isOn: $settings.debugMode)

            if settings.debugMode {
                Toggle("Verbose Logging", isOn: $settings.verboseLogging)
            }
        }
    }
}

// Use it in your main settings
var settingsBody: some SettingsContent {
    DeveloperSettings(settings: settings)
}
```

--------------------------------

### Create a Settings Interface with SettingsContainer

Source: https://context7.com/aeastr/settingskit/llms.txt

Implement the `SettingsContainer` protocol to define your settings hierarchy. Use `@Environment` to access your app's settings object and `@Bindable` for two-way binding.

```swift
import SwiftUI
import SettingsKit

@Observable
class AppSettings {
    var notificationsEnabled = true
    var darkMode = false
    var username = "Guest"
    var fontSize: Double = 14.0
    var soundEnabled = true
    var autoLockDelay: Double = 300
}

struct MySettings: SettingsContainer {
    @Environment(AppSettings.self) var appSettings

    var settingsBody: some SettingsContent {
        @Bindable var settings = appSettings

        SettingsGroup("General", systemImage: "gear") {
            Toggle("Notifications", isOn: $settings.notificationsEnabled)
            Toggle("Dark Mode", isOn: $settings.darkMode)
        }

        SettingsGroup("Appearance") {
            Slider(value: $settings.fontSize, in: 10...24, step: 1) {
                Text("Font Size: \(Int(settings.fontSize))pt")
            }
        } icon: {
            SettingsIcon("paintbrush", color: .blue)
        }

        SettingsGroup("Privacy & Security") {
            Slider(value: $settings.autoLockDelay, in: 60...3600, step: 60) {
                Text("Auto Lock: \(Int(settings.autoLockDelay/60)) min")
            }
        } icon: {
            SettingsIcon("lock.shield", color: .blue)
        }
    }
}

// Usage in your app
struct ContentView: View {
    @State private var appSettings = AppSettings()

    var body: some View {
        MySettings()
            .environment(appSettings)
    }
}
```

--------------------------------

### Import SettingsKit

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Import the SettingsKit framework into your Swift files to use its components.

```swift
import SettingsKit
```

--------------------------------

### Configure Indexed API Variants

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Different ways to configure search indexing using titles and tags.

```swift
// Title only
Toggle("Dark Mode", isOn: $dark)
    .indexed("Dark Mode")

// Title + additional search tags
Toggle("Dark Mode", isOn: $dark)
    .indexed("Dark Mode", tags: ["theme", "night", "appearance"])

// Tags only (useful when title would be redundant)
Toggle("Dark Mode", isOn: $dark)
    .indexed(tags: ["Dark Mode", "theme", "appearance"])
```

--------------------------------

### Conditional Content

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Shows how to conditionally display settings views based on application state.

```APIDOC
## Conditional Content

### Description
Settings views can be shown or hidden dynamically based on application state using standard SwiftUI conditional logic (`if` statements).

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```swift
SettingsGroup("Advanced", systemImage: "gearshape.2") {
    Toggle("Enable Advanced Features", isOn: $showAdvanced)

    if showAdvanced {
        Toggle("Advanced Option 1", isOn: $option1)
        Toggle("Advanced Option 2", isOn: $option2)
    }
}
```

### Response
N/A
```

--------------------------------

### Define and Use Reusable Tag Sets

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Implement SettingsTagSet to standardize tags across the application.

```swift
struct ThemeTags: SettingsTagSet {
    var tags: [String] { ["theme", "appearance", "display", "colors"] }
}

struct AccessibilityTags: SettingsTagSet {
    var tags: [String] { ["accessibility", "a11y", "vision", "motor"] }
}

// Use them
Toggle("Dark Mode", isOn: $dark)
    .indexed("Dark Mode", tagSet: ThemeTags())

// Combine multiple tag sets
Toggle("High Contrast", isOn: $highContrast)
    .indexed("High Contrast", tagSets: ThemeTags(), AccessibilityTags())
```

--------------------------------

### Extracted Settings Groups

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Demonstrates how to extract complex settings logic into separate, reusable `SettingsContent` structures.

```APIDOC
## Extracted Settings Groups

### Description
For better organization and reusability, complex settings logic can be extracted into separate structures conforming to `SettingsContent`. These can then be included in the main settings body.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```swift
struct DeveloperSettings: SettingsContent {
    @Bindable var settings: AppSettings

    var body: some SettingsContent {
        SettingsGroup("Developer", systemImage: "hammer") {
            Toggle("Debug Mode", isOn: $settings.debugMode)

            if settings.debugMode {
                Toggle("Verbose Logging", isOn: $settings.verboseLogging)
            }
        }
    }
}

// Usage in main settings
struct MainSettings: View {
    @State private var settings = AppSettings()

    var body: some View {
        MySettings(settings: settings) {
            DeveloperSettings(settings: settings)
            // Other settings groups...
        }
    }
}
```

### Response
N/A
```

--------------------------------

### Create Nested Navigation

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Nest SettingsGroup instances to create hierarchical settings structures.

```swift
SettingsGroup("General", systemImage: "gear") {
    SettingsGroup("About", systemImage: "info.circle") {
        Text("Version: 1.0.0")
        Text("Build: 42")
    }

    SettingsGroup("Language", systemImage: "globe") {
        Picker("Language", selection: $language) {
            Text("English").tag("en")
            Text("Spanish").tag("es")
        }
    }
}
```

--------------------------------

### Registering views in SettingsNodeViewRegistry

Source: https://github.com/aeastr/settingskit/blob/main/docs/Architecture.md

Use the shared registry to map node IDs to view builders for indexed views or custom groups.

```swift
// When .indexed() wraps a view:
SettingsNodeViewRegistry.shared.register(id: viewID) {
    AnyView(Toggle("Enable", isOn: $settings.notificationsEnabled))
}

// When CustomSettingsGroup.makeNodes() is called:
SettingsNodeViewRegistry.shared.register(id: customGroupID) {
    AnyView(YourCompletelyCustomView())
}

// Later, in search results:
if let view = SettingsNodeViewRegistry.shared.view(for: viewID) {
    view  // Renders the actual Toggle with live state binding
}
```

--------------------------------

### Indexing Views with `.indexed()`

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Explains how to make individual views within settings searchable using the `.indexed()` modifier.

```APIDOC
## Indexing Views with `.indexed()`

### Description
By default, only `SettingsGroup` titles are indexed for search. To make individual views appear in search results, apply the `.indexed()` modifier. You can provide a title, tags, or both for searchability.

### Method
N/A (SwiftUI View Modifier)

### Endpoint
N/A

### Parameters
- **title** (String) - Optional - The primary title for search results.
- **tags** ([String]) - Optional - Additional tags to improve search relevance.
- **tagSet** (SettingsTagSet) - Optional - A reusable set of tags.
- **tagSets** ([SettingsTagSet]) - Optional - Multiple reusable sets of tags.

### Request Example
```swift
// Title only
Toggle("Dark Mode", isOn: $darkMode)
    .indexed("Dark Mode")

// Title + additional search tags
Toggle("Dark Mode", isOn: $darkMode)
    .indexed("Dark Mode", tags: ["theme", "night", "appearance"])

// Tags only (useful when title would be redundant)
Toggle("Dark Mode", isOn: $darkMode)
    .indexed(tags: ["Dark Mode", "theme", "appearance"])

// Using Reusable Tag Sets
struct ThemeTags: SettingsTagSet { var tags: [String] { ["theme", "appearance", "display", "colors"] } }

Toggle("Dark Mode", isOn: $darkMode)
    .indexed("Dark Mode", tagSet: ThemeTags())

struct AccessibilityTags: SettingsTagSet { var tags: [String] { ["accessibility", "a11y", "vision", "motor"] } }

Toggle("High Contrast", isOn: $highContrast)
    .indexed("High Contrast", tagSets: ThemeTags(), AccessibilityTags())
```

### Response
N/A
```

--------------------------------

### Apply Settings Styles

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Configure the layout style of the settings interface using the settingsStyle modifier.

```swift
MySettings(settings: settings)
    .settingsStyle(.sidebar)

MySettings(settings: settings)
    .settingsStyle(.single)
```

--------------------------------

### Define App Settings Data Model

Source: https://context7.com/aeastr/settingskit/llms.txt

Define an observable class to hold your application's settings. This class should conform to the `@Observable` macro for reactivity.

```swift
import SwiftUI
import SettingsKit

@Observable
class AppSettings {
    var notificationsEnabled = true
    var darkMode = false
    var username = "Guest"
    var fontSize: Double = 14.0
    var soundEnabled = true
    var autoLockDelay: Double = 300
}
```

--------------------------------

### Configure Settings Groups with Different Styles and Icons

Source: https://context7.com/aeastr/settingskit/llms.txt

Use `SettingsGroup` to organize settings. It supports navigation links, inline sections, custom icons, footers, and search tags for enhanced discoverability.

```swift
import SwiftUI
import SettingsKit

struct GroupExamples: SettingsContainer {
    @State private var airplaneMode = false
    @State private var wifiEnabled = true
    @State private var brightness: Double = 0.5

    var settingsBody: some SettingsContent {
        // Navigation group (default) - appears as a tappable row that pushes to detail view
        SettingsGroup("Display", systemImage: "sun.max") {
            Slider(value: $brightness, in: 0...1)
            Text("Brightness: \(Int(brightness * 100))%")
        }

        // Inline group - appears as a section header with content directly visible
        SettingsGroup("Quick Settings", .inline) {
            Toggle("Airplane Mode", isOn: $airplaneMode)
            Toggle("Wi-Fi", isOn: $wifiEnabled)
        }

        // Group with iOS Settings-style colored icon
        SettingsGroup("Airplane Mode") {
            Toggle("Enabled", isOn: $airplaneMode)
        } icon: {
            SettingsIcon("airplane", color: .orange)
        }

        // Group with footer text
        SettingsGroup("Connectivity", .inline, footer: "Manage how your device connects with other devices.") {
            SettingsGroup("Wi-Fi", systemImage: "wifi") {
                Toggle("Enabled", isOn: $wifiEnabled)
            }
        }

        // Group with search tags for improved discoverability
        SettingsGroup("Notifications", systemImage: "bell")
            .settingsTags(["alerts", "sounds", "badges", "push"]) {
                Text("Configure notifications")
            }
    }
}
```

--------------------------------

### Custom Settings Style Implementation

Source: https://context7.com/aeastr/settingskit/llms.txt

Defines a custom `SettingsStyle` for a card-like presentation. This involves implementing `makeContainer`, `makeGroup`, and `makeItem` to control the appearance and behavior of settings views.

```swift
import SwiftUI
import SettingsKit

// Custom card-style settings presentation
struct CardSettingsStyle: SettingsStyle {
    func makeContainer(configuration: ContainerConfiguration) -> some View {
        NavigationStack(path: configuration.navigationPath) {
            ScrollView {
                VStack(spacing: 20) {
                    configuration.content
                }
                .padding()
            }
            .navigationTitle(configuration.title)
            .searchable(text: configuration.searchText ?? .constant(""), prompt: "Search settings")
        }
    }

    func makeGroup(configuration: GroupConfiguration) -> some View {
        switch configuration.presentation {
        case .navigation:
            NavigationLink(value: configuration) {
                HStack {
                    configuration.label
                    Spacer()
                    Image(systemName: "chevron.right")
                        .foregroundStyle(.tertiary)
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(12)
            }
            .buttonStyle(.plain)
        case .inline:
            VStack(alignment: .leading, spacing: 12) {
                configuration.label
                    .font(.headline)
                configuration.content
            }
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(12)
        }
    }

    func makeItem(configuration: ItemConfiguration) -> some View {
        HStack {
            configuration.label
            Spacer()
            configuration.content
        }
    }
}

// Usage
struct StyledSettingsExample: View {
    var body: some View {
        MySettings()
            .settingsStyle(CardSettingsStyle())
    }
}

// Using built-in styles
struct BuiltInStylesExample: View {
    var body: some View {
        VStack {
            // Sidebar style (default) - split-view navigation
            MySettings()
                .settingsStyle(.sidebar)

            // Single column style - clean, single-column list
            MySettings()
                .settingsStyle(.single)
        }
    }
}

```

--------------------------------

### Create Custom Settings Groups

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Use CustomSettingsGroup for UI that falls outside standard settings structures. Content within these groups is not indexed for search.

```swift
CustomSettingsGroup("Advanced Tools", systemImage: "hammer") {
    VStack(spacing: 20) {
        Text("Your Custom UI")
            .font(.largeTitle)

        Button("Custom Action") {
            performAction()
        }
    }
    .padding()
}
```

--------------------------------

### Create Custom SettingsStyle

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Conform to the SettingsStyle protocol to define custom container, group, and item rendering. Apply the style using the settingsStyle modifier.

```swift
struct MyCustomStyle: SettingsStyle {
    func makeContainer(configuration: ContainerConfiguration) -> some View {
        NavigationStack(path: configuration.navigationPath) {
            ScrollView {
                VStack(spacing: 20) {
                    configuration.content
                }
                .padding()
            }
            .navigationTitle(configuration.title)
        }
    }

    func makeGroup(configuration: GroupConfiguration) -> some View {
        VStack(alignment: .leading) {
            configuration.label
                .font(.headline)
            configuration.content
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(12)
    }

    func makeItem(configuration: ItemConfiguration) -> some View {
        HStack {
            configuration.label
            Spacer()
            configuration.content
        }
    }
}

// Apply your custom style
MySettings(settings: settings)
    .settingsStyle(MyCustomStyle())
```

--------------------------------

### Implement Custom Search Logic

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Conform to the SettingsSearch protocol to define custom search behavior and apply it using the settingsSearch modifier.

```swift
struct FuzzySearch: SettingsSearch {
    func search(nodes: [SettingsNode], query: String) -> [SettingsSearchResult] {
        // Your custom search implementation
    }
}

MySettings(settings: settings)
    .settingsSearch(FuzzySearch())
```

--------------------------------

### Implement Custom SettingsSearch

Source: https://context7.com/aeastr/settingskit/llms.txt

Define a custom search strategy by conforming to the SettingsSearch protocol. Use the settingsSearch modifier to apply the custom implementation or the default search.

```swift
import SwiftUI
import SettingsKit

// Custom fuzzy search implementation
struct FuzzySearch: SettingsSearch {
    func search(nodes: [SettingsNode], query: String) -> [SettingsSearchResult] {
        var results: [SettingsSearchResult] = []
        var orderIndex = 0

        searchNodes(nodes, query: query.lowercased(), results: &results, orderIndex: &orderIndex)

        return results.sorted { lhs, rhs in
            fuzzyScore(lhs.group.title, query: query) > fuzzyScore(rhs.group.title, query: query)
        }
    }

    private func searchNodes(_ nodes: [SettingsNode], query: String, results: inout [SettingsSearchResult], orderIndex: inout Int, parent: SettingsNode? = nil) {
        for node in nodes {
            let currentIndex = orderIndex
            orderIndex += 1

            if fuzzyMatch(node.title.lowercased(), query: query) ||
               node.tags.contains(where: { fuzzyMatch($0.lowercased(), query: query) }) {

                if let children = node.children {
                    let isLeaf = children.allSatisfy { !$0.isGroup }
                    results.append(SettingsSearchResult(
                        group: node,
                        matchedItems: isLeaf ? children : [],
                        isNavigation: !isLeaf,
                        orderIndex: currentIndex,
                        parentGroup: parent
                    ))
                }
            }

            if let children = node.children {
                searchNodes(children, query: query, results: &results, orderIndex: &orderIndex, parent: node)
            }
        }
    }

    private func fuzzyMatch(_ text: String, query: String) -> Bool {
        var textIndex = text.startIndex
        for char in query {
            guard let found = text[textIndex...].firstIndex(of: char) else { return false }
            textIndex = text.index(after: found)
        }
        return true
    }

    private func fuzzyScore(_ text: String, query: String) -> Int {
        let normalizedText = text.lowercased()
        let normalizedQuery = query.lowercased()

        if normalizedText == normalizedQuery { return 1000 }
        if normalizedText.hasPrefix(normalizedQuery) { return 500 }
        if normalizedText.contains(normalizedQuery) { return 300 }
        if fuzzyMatch(normalizedText, query: normalizedQuery) { return 100 }
        return 0
    }
}

// Usage
struct CustomSearchExample: View {
    var body: some View {
        MySettings()
            .settingsSearch(FuzzySearch())
    }
}

// Using default search
struct DefaultSearchExample: View {
    var body: some View {
        MySettings()
            .settingsSearch(.default)
    }
}
```

--------------------------------

### Define a Settings Container

Source: https://github.com/aeastr/settingskit/blob/main/README.md

A `SettingsContainer` is the root view for your settings hierarchy. It must conform to the `SettingsContainer` protocol and define its `settingsBody`.

```swift
struct AppSettings: SettingsContainer {
    var settingsBody: some SettingsContent {
        // Your settings groups here
    }
}
```

--------------------------------

### Add SettingsKit to Swift Package Dependencies

Source: https://context7.com/aeastr/settingskit/llms.txt

Add SettingsKit to your Swift package dependencies by including its Git repository URL and version in your Package.swift file.

```swift
// Package.swift
dependencies: [
    .package(url: "https://github.com/aeastr/SettingsKit.git", from: "1.0.0")
]
```

--------------------------------

### Implement CustomSettingsGroup

Source: https://context7.com/aeastr/settingskit/llms.txt

Use CustomSettingsGroup to render arbitrary SwiftUI views that remain indexed and searchable by the parent container. Tags can be added to improve search discoverability.

```swift
import SwiftUI
import SettingsKit

struct CustomGroupExample: SettingsContainer {
    @State private var cacheSize: Int = 256

    var settingsBody: some SettingsContent {
        // Basic custom group with arbitrary SwiftUI content
        CustomSettingsGroup("Developer Tools", systemImage: "hammer") {
            VStack(spacing: 20) {
                Text("Custom Developer UI")
                    .font(.largeTitle)
                    .fontWeight(.bold)

                Text("This is a CustomSettingsGroup - you can put ANY SwiftUI view here!")
                    .multilineTextAlignment(.center)
                    .foregroundStyle(.secondary)
                    .padding()

                Divider()

                VStack(alignment: .leading, spacing: 12) {
                    HStack {
                        Image(systemName: "checkmark.circle.fill")
                            .foregroundStyle(.green)
                        Text("Group is indexed & searchable")
                    }

                    HStack {
                        Image(systemName: "checkmark.circle.fill")
                            .foregroundStyle(.green)
                        Text("Content is NOT indexed")
                    }

                    HStack {
                        Image(systemName: "checkmark.circle.fill")
                            .foregroundStyle(.green)
                        Text("Perfect for custom UI")
                    }
                }
                .padding()
                .background(Color.blue.opacity(0.1))
                .cornerRadius(12)

                Button("Clear Cache (\(cacheSize) MB)") {
                    cacheSize = 0
                }
                .buttonStyle(.borderedProminent)
            }
            .padding()
        }

        // Custom group with tags for improved searchability
        CustomSettingsGroup("Advanced Settings", systemImage: "gearshape.2", tags: ["debug", "developer", "advanced"]) {
            VStack {
                Text("Advanced Configuration")
                    .font(.headline)
                // Any complex custom UI here
            }
        }
    }
}
```

--------------------------------

### Enable Search Indexing

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Apply the .indexed() modifier to individual views to make them discoverable in search results.

```swift
SettingsGroup("Display", systemImage: "sun.max") {
    Toggle("Dark Mode", isOn: $darkMode)
        .indexed("Dark Mode", tags: ["theme", "appearance"])

    Slider(value: $brightness, in: 0...1)
        .indexed("Brightness")
}
```

--------------------------------

### Manage Conditional Settings Content

Source: https://context7.com/aeastr/settingskit/llms.txt

Use standard SwiftUI conditional logic within a SettingsContainer to dynamically show or hide settings based on state changes.

```swift
import SwiftUI
import SettingsKit

@Observable
class FeatureFlags {
    var showAdvanced = false
    var developerMode = false
    var betaFeatures = false
    var option1 = false
    var option2 = false
    var experimentalUI = false
    var verboseLogging = false
}

struct ConditionalExample: SettingsContainer {
    @Environment(FeatureFlags.self) var flags

    var settingsBody: some SettingsContent {
        @Bindable var state = flags

        SettingsGroup("Features", systemImage: "star") {
            Toggle("Show Advanced Features", isOn: $state.showAdvanced)
                .indexed("Advanced Features")

            // Conditional content based on toggle state
            if state.showAdvanced {
                Toggle("Advanced Option 1", isOn: $state.option1)
                    .indexed("Advanced Option 1")
                Toggle("Advanced Option 2", isOn: $state.option2)
                    .indexed("Advanced Option 2")
            }
        }

        // Conditional entire groups
        if state.developerMode {
            SettingsGroup("Developer") {
                Toggle("Verbose Logging", isOn: $state.verboseLogging)
                    .indexed("Verbose Logging")
                Toggle("Experimental UI", isOn: $state.experimentalUI)
                    .indexed("Experimental UI")
            } icon: {
                SettingsIcon("hammer", color: .orange)
            }
        }

        SettingsGroup("System", systemImage: "gear") {
            Toggle("Developer Mode", isOn: $state.developerMode)
                .indexed("Developer Mode", tags: ["debug", "testing"])

            Toggle("Beta Features", isOn: $state.betaFeatures)
                .indexed("Beta Features")
        }
    }
}
```

--------------------------------

### iOS Settings-Style Icons with SettingsIcon

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Create iOS Settings-style colored icons for groups using the `icon:` ViewBuilder and `SettingsIcon`. This allows for custom icons with specified colors.

```swift
SettingsGroup("Airplane Mode") {
    Toggle("Enabled", isOn: $airplaneMode)
} icon: {
    SettingsIcon("airplane", color: .orange)
}

SettingsGroup("Wi-Fi") {
    Text("My Network")
} icon: {
    SettingsIcon("wifi", color: .blue)
}

SettingsGroup("Battery") {
    Text("94%")
} icon: {
    SettingsIcon("battery.100", color: .green)
}
```

--------------------------------

### Create SettingsIcon components

Source: https://context7.com/aeastr/settingskit/llms.txt

Use SettingsIcon within a SettingsGroup to display native iOS-style colored icon backgrounds. Supports standard SF Symbols and custom ViewBuilder implementations.

```swift
import SwiftUI
import SettingsKit

struct IconExamples: SettingsContainer {
    @State private var airplaneMode = false
    @State private var wifiEnabled = true
    @State private var bluetoothEnabled = true
    @State private var batteryOptimized = true

    var settingsBody: some SettingsContent {
        SettingsGroup("Connections", .inline) {
            // Orange airplane icon
            SettingsGroup("Airplane Mode") {
                Toggle("Enabled", isOn: $airplaneMode)
            } icon: {
                SettingsIcon("airplane", color: .orange)
            }

            // Blue Wi-Fi icon
            SettingsGroup("Wi-Fi") {
                Toggle("Enabled", isOn: $wifiEnabled)
            } icon: {
                SettingsIcon("wifi", color: .blue)
            }

            // Blue Bluetooth icon
            SettingsGroup("Bluetooth") {
                Toggle("Enabled", isOn: $bluetoothEnabled)
            } icon: {
                SettingsIcon("wave.3.right", color: .blue)
            }
        }

        SettingsGroup("Power", .inline) {
            // Green battery icon
            SettingsGroup("Battery") {
                Toggle("Optimized Charging", isOn: $batteryOptimized)
            } icon: {
                SettingsIcon("battery.100", color: .green)
            }
        }

        // Fully custom icon using the icon ViewBuilder
        SettingsGroup("Custom") {
            Text("Custom content")
        } icon: {
            Circle()
                .fill(.purple.gradient)
                .frame(width: 29, height: 29)
                .overlay {
                    Image(systemName: "star.fill")
                        .foregroundStyle(.white)
                }
        }
    }
}
```

--------------------------------

### Add SettingsKit Dependency

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Add the SettingsKit package to your project's dependencies. Ensure you are using Swift 6.0+ and iOS 17+ or equivalent.

```swift
dependencies: [
    .package(url: "https://github.com/aeastr/SettingsKit.git", from: "1.0.0")
]
```

--------------------------------

### Custom Settings Icons

Source: https://github.com/aeastr/settingskit/blob/main/README.md

The `icon:` ViewBuilder in `SettingsGroup` accepts any SwiftUI view, enabling fully custom icon designs beyond `SettingsIcon`.

```swift
SettingsGroup("Custom") {
    // content
} icon: {
    Circle()
        .fill(.purple.gradient)
        .frame(width: 29, height: 29)
        .overlay {
            Image(systemName: "star.fill")
                .foregroundStyle(.white)
        }
}
```

--------------------------------

### Add Search Tags to SettingsGroup

Source: https://github.com/aeastr/settingskit/blob/main/README.md

Use the settingsTags modifier to associate searchable keywords with a specific settings group.

```swift
SettingsGroup("Notifications", systemImage: "bell")
    .settingsTags(["alerts", "sounds", "badges", "push"])
```

--------------------------------

### Generating stable node UUIDs

Source: https://github.com/aeastr/settingskit/blob/main/docs/Architecture.md

Hash-based ID generation ensures consistent identifiers across multiple calls to makeNodes().

```swift
var hasher = Hasher()
hasher.combine(title)
hasher.combine(icon)
let hashValue = hasher.finalize()
// Convert hash to UUID bytes...
```

--------------------------------

### Implement .indexed() Modifier in SwiftUI

Source: https://context7.com/aeastr/settingskit/llms.txt

Use the .indexed() modifier to make individual controls searchable within a SettingsContainer. It supports indexing by title, custom tags, or predefined tag sets.

```swift
import SwiftUI
import SettingsKit

// Define reusable tag sets for consistent tagging
struct ThemeTags: SettingsTagSet {
    var tags: [String] { ["theme", "appearance", "display", "colors"] }
}

struct AccessibilityTags: SettingsTagSet {
    var tags: [String] { ["accessibility", "a11y", "vision", "motor"] }
}

struct NetworkTags: SettingsTagSet {
    var tags: [String] { ["network", "wifi", "cellular", "internet", "connection"] }
}

struct IndexedExample: SettingsContainer {
    @State private var darkMode = false
    @State private var highContrast = false
    @State private var reduceMotion = false
    @State private var brightness: Double = 0.5
    @State private var wifiEnabled = true

    var settingsBody: some SettingsContent {
        SettingsGroup("Display", systemImage: "sun.max") {
            // Index with title only
            Toggle("Dark Mode", isOn: $darkMode)
                .indexed("Dark Mode")

            // Index with title and additional tags
            Toggle("High Contrast", isOn: $highContrast)
                .indexed("High Contrast", tags: ["theme", "visibility", "colors"])

            // Index with tags only (useful when title would be redundant)
            Slider(value: $brightness, in: 0...1)
                .indexed(tags: ["brightness", "display", "screen"])
        }

        SettingsGroup("Accessibility", systemImage: "figure.arms.open") {
            // Index using a single tag set
            Toggle("Dark Mode", isOn: $darkMode)
                .indexed("Dark Mode", tagSet: ThemeTags())

            // Index using multiple tag sets combined
            Toggle("Reduce Motion", isOn: $reduceMotion)
                .indexed("Reduce Motion", tagSets: ThemeTags(), AccessibilityTags())
        }

        SettingsGroup("Network", systemImage: "wifi") {
            // Index using a tag set only
            Toggle("Wi-Fi", isOn: $wifiEnabled)
                .indexed("Wi-Fi", tagSet: NetworkTags())
        }
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.