@imgly/editor-react-native 1.73.0 → 1.74.0

package/ios/StarterKits/Postcard/components/CanvasMenu+Postcard.swift

@@ -0,0 +1,22 @@
+import IMGLYEditor
+
+// MARK: - Canvas Menu
+
+extension PostcardEditorConfiguration {
+  /// The default canvas menu configuration.
+  static var defaultCanvasMenu: CanvasMenu.Configuration {
+    CanvasMenu.Configuration { builder in
+      // highlight-starter-kit-canvas-menu
+      builder.items { _ in
+        CanvasMenu.Buttons.selectGroup()
+        CanvasMenu.Divider()
+        CanvasMenu.Buttons.bringForward()
+        CanvasMenu.Buttons.sendBackward()
+        CanvasMenu.Divider()
+        CanvasMenu.Buttons.duplicate()
+        CanvasMenu.Buttons.delete()
+      }
+      // highlight-starter-kit-canvas-menu
+    }
+  }
+}

package/ios/StarterKits/Postcard/components/Dock+Postcard.swift

@@ -0,0 +1,34 @@
+import IMGLYEditor
+import SwiftUI
+
+// MARK: - Dock
+
+extension PostcardEditorConfiguration {
+  /// The default dock configuration.
+  static var defaultDock: Dock.Configuration {
+    Dock.Configuration { builder in
+      // highlight-starter-kit-dock
+      builder.items { _ in
+        Dock.Buttons
+          .assetLibrary(
+            isVisible: { try $0.engine.scene.getPages().first == $0.engine.scene.getCurrentPage() },
+            modifier: { _ in Dock.Buttons.AssetLibraryModifier() },
+          )
+        Dock.Custom(id: "ly.img.component.dock.postcard.divider", content: { _ in
+          Divider()
+            .frame(height: 40)
+            .padding(.leading, 8)
+        }, isVisible: { try $0.engine.scene.getPages().first == $0.engine.scene.getCurrentPage() })
+        Dock.Buttons.designColors()
+        Dock.Buttons.greetingFont()
+        Dock.Buttons.greetingSize()
+        Dock.Buttons.greetingColors()
+      }
+      builder.alignment = {
+        try $0.engine.scene.getPages().first == $0.engine.scene.getCurrentPage() ? .leading : .center
+      }
+      builder.scrollDisabled = { _ in true }
+      // highlight-starter-kit-dock
+    }
+  }
+}

package/ios/StarterKits/Postcard/components/DockButtons+Postcard.swift

@@ -0,0 +1,129 @@
+@_spi(Internal) import IMGLYEditor
+import IMGLYEngine
+import SwiftUI
+
+// MARK: - Dock Button IDs
+
+extension Dock.Buttons.ID {
+  /// The id of the ``Dock/Buttons/designColors(action:title:icon:isEnabled:isVisible:)`` button.
+  static var designColors: EditorComponentID { "ly.img.component.dock.button.postcard.designColors" }
+  /// The id of the ``Dock/Buttons/greetingColors(action:title:icon:isEnabled:isVisible:)`` button.
+  static var greetingColors: EditorComponentID { "ly.img.component.dock.button.postcard.namedColors" }
+  /// The id of the ``Dock/Buttons/greetingFont(action:title:icon:isEnabled:isVisible:)`` button.
+  static var greetingFont: EditorComponentID { "ly.img.component.dock.button.postcard.greetingFont" }
+  /// The id of the ``Dock/Buttons/greetingSize(action:title:icon:isEnabled:isVisible:)`` button.
+  static var greetingSize: EditorComponentID { "ly.img.component.dock.button.postcard.greetingSize" }
+}
+
+// MARK: - Dock Buttons
+
+extension Dock.Buttons {
+  /// Creates a dock button that opens the selection colors sheet.
+  static func designColors(
+    action: @escaping Dock.Context.To<Void> = {
+      $0.eventHandler.send(.openSheet(type: .designColors()))
+    },
+    @ViewBuilder title: @escaping Dock.Context.To<some View> = { _ in
+      Text(.imgly.localized("ly_img_editor_dock_button_colors"))
+    },
+    @ViewBuilder icon: @escaping Dock.Context.To<some View> = { _ in SelectionColorsIcon() },
+    isEnabled: @escaping Dock.Context.To<Bool> = { _ in true },
+    isVisible: @escaping Dock.Context.To<Bool> = {
+      try $0.engine.scene.getPages().first == $0.engine.scene.getCurrentPage()
+    },
+  ) -> some Dock.Item {
+    Dock.Button(id: ID.designColors, action: action, label: { context in
+      let title = try title(context)
+      let icon = try icon(context)
+      Label { title } icon: { icon }
+    }, isEnabled: isEnabled, isVisible: isVisible)
+  }
+
+  /// Creates a dock button that opens the greeting color sheet.
+  static func greetingColors(
+    action: @escaping Dock.Context.To<Void> = {
+      guard let id = $0.engine.block.find(byName: "Greeting").first else { return }
+      $0.eventHandler.send(.openSheet(type: .greetingColors(id: id, colorPalette: [
+        .init("Governor Bay", .imgly.hex("#263BAA")!),
+        .init("Resolution Blue", .imgly.hex("#002094")!),
+        .init("Stratos", .imgly.hex("#001346")!),
+        .init("Blue Charcoal", .imgly.hex("#000514")!),
+        .init("Black", .imgly.hex("#000000")!),
+        .init("Dove Gray", .imgly.hex("#696969")!),
+        .init("Dusty Gray", .imgly.hex("#999999")!),
+      ])))
+    },
+    @ViewBuilder title: @escaping Dock.Context.To<some View> = { _ in
+      Text(.imgly.localized("ly_img_editor_dock_button_colors"))
+    },
+    @ViewBuilder icon: @escaping Dock.Context.To<some View> = {
+      let id = $0.engine.block.find(byName: "Greeting").first
+      return FillColorIcon()
+        .imgly.selection(id)
+    },
+    isEnabled: @escaping Dock.Context.To<Bool> = { _ in true },
+    isVisible: @escaping Dock.Context.To<Bool> = {
+      try $0.engine.scene.getPages().last == $0.engine.scene.getCurrentPage()
+    },
+  ) -> some Dock.Item {
+    Dock.Button(id: ID.greetingColors, action: action, label: { context in
+      let title = try title(context)
+      let icon = try icon(context)
+      Label { title } icon: { icon }
+    }, isEnabled: isEnabled, isVisible: isVisible)
+  }
+
+  /// Creates a dock button that opens the greeting font sheet.
+  static func greetingFont(
+    action: @escaping Dock.Context.To<Void> = {
+      guard let id = $0.engine.block.find(byName: "Greeting").first else { return }
+      $0.eventHandler.send(.openSheet(type: .greetingFont(id: id, fontFamilies: [
+        "Caveat", "Amatic SC", "Courier Prime", "Archivo", "Roboto", "Parisienne",
+      ])))
+    },
+    @ViewBuilder title: @escaping Dock.Context.To<some View> = { _ in
+      Text(.imgly.localized("ly_img_editor_dock_button_font"))
+    },
+    @ViewBuilder icon: @escaping Dock.Context.To<some View> = {
+      let id = $0.engine.block.find(byName: "Greeting").first
+      return FontIcon()
+        .imgly.selection(id)
+    },
+    isEnabled: @escaping Dock.Context.To<Bool> = { _ in true },
+    isVisible: @escaping Dock.Context.To<Bool> = {
+      try $0.engine.scene.getPages().last == $0.engine.scene.getCurrentPage()
+    },
+  ) -> some Dock.Item {
+    Dock.Button(id: ID.greetingFont, action: action, label: { context in
+      let title = try title(context)
+      let icon = try icon(context)
+      Label { title } icon: { icon }
+    }, isEnabled: isEnabled, isVisible: isVisible)
+  }
+
+  /// Creates a dock button that opens the greeting font size sheet.
+  static func greetingSize(
+    action: @escaping Dock.Context.To<Void> = {
+      guard let id = $0.engine.block.find(byName: "Greeting").first else { return }
+      $0.eventHandler.send(.openSheet(type: .greetingSize(id: id)))
+    },
+    @ViewBuilder title: @escaping Dock.Context.To<some View> = { _ in
+      Text(.imgly.localized("ly_img_editor_dock_button_size"))
+    },
+    @ViewBuilder icon: @escaping Dock.Context.To<some View> = { context in
+      let id = context.engine.block.find(byName: "Greeting").first
+      return FontSizeIcon()
+        .imgly.selection(id)
+    },
+    isEnabled: @escaping Dock.Context.To<Bool> = { _ in true },
+    isVisible: @escaping Dock.Context.To<Bool> = {
+      try $0.engine.scene.getPages().last == $0.engine.scene.getCurrentPage()
+    },
+  ) -> some Dock.Item {
+    Dock.Button(id: ID.greetingSize, action: action, label: { context in
+      let title = try title(context)
+      let icon = try icon(context)
+      Label { title } icon: { icon }
+    }, isEnabled: isEnabled, isVisible: isVisible)
+  }
+}

package/ios/StarterKits/Postcard/components/InspectorBar+Postcard.swift

@@ -0,0 +1,35 @@
+import IMGLYEditor
+
+// MARK: - Inspector Bar
+
+extension PostcardEditorConfiguration {
+  /// The default inspector bar configuration.
+  static var defaultInspectorBar: InspectorBar.Configuration {
+    InspectorBar.Configuration { builder in
+      // highlight-starter-kit-inspector-bar
+      builder.items { _ in
+        InspectorBar.Buttons.replace()
+
+        InspectorBar.Buttons.editText()
+        InspectorBar.Buttons.formatText()
+        InspectorBar.Buttons.fillStroke()
+        InspectorBar.Buttons.textBackground()
+        InspectorBar.Buttons.crop()
+
+        InspectorBar.Buttons.adjustments()
+        InspectorBar.Buttons.filter()
+        InspectorBar.Buttons.effect()
+        InspectorBar.Buttons.blur()
+        InspectorBar.Buttons.shape()
+
+        InspectorBar.Buttons.selectGroup()
+        InspectorBar.Buttons.enterGroup()
+
+        InspectorBar.Buttons.layer()
+        InspectorBar.Buttons.duplicate()
+        InspectorBar.Buttons.delete()
+      }
+      // highlight-starter-kit-inspector-bar
+    }
+  }
+}

package/ios/StarterKits/Postcard/components/NavigationBar+Postcard.swift

@@ -0,0 +1,38 @@
+import IMGLYEditor
+
+// MARK: - Navigation Bar
+
+extension PostcardEditorConfiguration {
+  /// The default navigation bar configuration.
+  static var defaultNavigationBar: NavigationBar.Configuration {
+    NavigationBar.Configuration { builder in
+      // highlight-starter-kit-navigation-bar
+      builder.items { _ in
+        NavigationBar.ItemGroup(placement: .topBarLeading) {
+          NavigationBar.Buttons.closeEditor()
+          NavigationBar.Buttons.previousPage(
+            label: { _ in NavigationLabel(
+              .imgly.localized("ly_img_editor_navigation_bar_button_design"),
+              direction: .backward,
+            ) },
+          )
+        }
+        NavigationBar.ItemGroup(placement: .principal) {
+          NavigationBar.Buttons.undo()
+          NavigationBar.Buttons.redo()
+          NavigationBar.Buttons.togglePreviewMode()
+        }
+        NavigationBar.ItemGroup(placement: .topBarTrailing) {
+          NavigationBar.Buttons.nextPage(
+            label: { _ in NavigationLabel(
+              .imgly.localized("ly_img_editor_navigation_bar_button_write"),
+              direction: .forward,
+            ) },
+          )
+          NavigationBar.Buttons.export()
+        }
+      }
+      // highlight-starter-kit-navigation-bar
+    }
+  }
+}

package/ios/StarterKits/Video/VideoEditorConfiguration.swift

@@ -0,0 +1,54 @@
+import IMGLYEditor
+import IMGLYEngine
+import SwiftUI
+
+// CE.SDK Starter Kit: Video Editor
+//
+// This starter kit provides a complete, production-ready Video Editor configuration
+// with all configuration code inline and fully documented. Copy this file into your
+// project and customize it to match your needs.
+
+// MARK: - Configuration
+
+public final class VideoEditorConfiguration: EditorConfiguration {
+  // MARK: - EditorConfiguration — Settings
+
+  /// The zoom padding for the canvas.
+  override public var zoomPadding: CGFloat? { 1 }
+
+  /// The asset library configuration.
+  ///
+  /// Includes video and audio categories for the video editor.
+  override public var assetLibrary: AssetLibraryConfiguration? {
+    AssetLibraryConfiguration { builder in
+      builder.includeAVResources = true
+    }
+  }
+
+  // MARK: - EditorConfiguration — Callbacks
+
+  /// The `onCreate` handler.
+  override public var onCreate: OnCreate.Handler? { Self.defaultOnCreateHandler }
+
+  /// The export handler.
+  ///
+  /// Default: Exports the current page as MP4 and opens the system share sheet.
+  override public var onExport: OnExport.Handler? { Self.defaultOnExportHandler }
+
+  // MARK: - EditorConfiguration — UI Components
+
+  /// The navigation bar configuration.
+  override public var navigationBar: NavigationBar.Configuration? { Self.defaultNavigationBar }
+
+  /// The dock configuration.
+  override public var dock: Dock.Configuration? { Self.defaultDock }
+
+  /// The inspector bar configuration.
+  override public var inspectorBar: InspectorBar.Configuration? { Self.defaultInspectorBar }
+
+  /// The canvas menu configuration.
+  override public var canvasMenu: CanvasMenu.Configuration? { Self.defaultCanvasMenu }
+
+  /// The bottom panel configuration.
+  override public var bottomPanel: BottomPanel.Configuration? { Self.defaultBottomPanel }
+}

package/ios/StarterKits/Video/VideoEditorStarterKit.swift

@@ -0,0 +1,30 @@
+import IMGLYEditor
+import IMGLYEngine
+import SwiftUI
+
+// MARK: - Starter Kit View
+
+struct VideoEditorStarterKit: View {
+  // Provide `EngineSettings` with your license and an optional userId.
+  let settings = EngineSettings(
+    license: secrets.licenseKey, // Use nil for evaluation mode with watermark
+    userID: "<your unique user id>",
+  )
+
+  // highlight-starter-kit-view
+  var body: some View {
+    // highlight-starter-kit-composable
+    Editor(settings)
+      .imgly.configuration {
+        VideoEditorConfiguration()
+      }
+    // highlight-starter-kit-composable
+  }
+  // highlight-starter-kit-view
+}
+
+// MARK: - Preview
+
+#Preview {
+  VideoEditorStarterKit()
+}

package/ios/StarterKits/Video/callbacks/OnCreate+Video.swift

@@ -0,0 +1,137 @@
+import IMGLYEditor
+import IMGLYEngine
+import UIKit
+
+// MARK: - Default OnCreate
+
+public extension VideoEditorConfiguration {
+  /// The default `onCreate` handler.
+  internal static var defaultOnCreateHandler: OnCreate.Handler {
+    { engine, _ in
+      try await defaultOnCreate()(engine)
+    }
+  }
+
+  /// Default video editor specific `OnCreate.Callback` implementation with solution specific settings, scene
+  /// and editor creation setup.
+  /// - Parameters:
+  ///   - preCreateScene: Callback to do any pre scene loading tasks such as applying settings.
+  ///   Defaults to `VideoEditorConfiguration.defaultPreCreateScene`.
+  ///   - createScene: Callback to load/create the scene and load asset sources. Defaults to
+  /// `VideoEditorConfiguration.defaultCreateScene`.
+  ///   - loadAssetSources: Callback to load any asset sources. Defaults to
+  /// `VideoEditorConfiguration.defaultLoadAssetSources`.
+  ///   - postCreateScene: Callback to do any post scene loading tasks. Defaults to
+  ///   `VideoEditorConfiguration.defaultPostCreateScene`.
+  /// - Returns: A composed `OnCreate.Callback`that sequentially executes all three initialization phases.
+  static func defaultOnCreate(
+    preCreateScene: @escaping OnCreate.Callback = defaultPreCreateScene,
+    createScene: @escaping OnCreate.Callback = defaultCreateScene,
+    loadAssetSources: @escaping OnCreate.Callback = defaultLoadAssetSources,
+    postCreateScene: @escaping OnCreate.Callback = defaultPostCreateScene,
+  ) -> OnCreate.Callback {
+    { engine in
+      try await preCreateScene(engine)
+      try await createScene(engine)
+      try await loadAssetSources(engine)
+      try await postCreateScene(engine)
+    }
+  }
+
+  /// Configures engine settings before scene loading.
+  ///
+  /// Sets editor role, touch gestures, camera clamping, gizmo handles, and global scopes.
+  static let defaultPreCreateScene: OnCreate.Callback = { engine in
+    try engine.editor.setRole("Adopter")
+    try engine.editor.setSettingEnum("camera/clamping/overshootMode", value: "Center")
+
+    let highlightColor: IMGLYEngine.Color = try engine.editor.getSettingColor("highlightColor")
+    try engine.editor.setSettingColor("placeholderHighlightColor", color: highlightColor)
+
+    try engine.editor.setSettingBool("touch/singlePointPanning", value: false)
+    try engine.editor.setSettingBool("touch/dragStartCanSelect", value: false)
+    try engine.editor.setSettingEnum("touch/pinchAction", value: "Scale")
+
+    try engine.editor.setSettingBool("controlGizmo/showMoveHandles", value: false)
+    try engine.editor.setSettingBool("controlGizmo/showRotateHandles", value: false)
+    try engine.editor.setSettingBool("controlGizmo/showScaleHandles", value: false)
+
+    try engine.editor.setSettingColor(
+      "page/innerBorderColor",
+      color: .init(cgColor: UIColor.lightGray.withAlphaComponent(0.5).cgColor)!,
+    )
+
+    try ([
+      "appearance/adjustments", "appearance/filter", "appearance/effect",
+      "appearance/blur", "appearance/shadow",
+      "editor/select",
+      "fill/change", "fill/changeType",
+      "layer/crop", "layer/move", "layer/resize", "layer/rotate", "layer/flip",
+      "layer/opacity", "layer/blendMode", "layer/visibility", "layer/clipping",
+      "lifecycle/destroy", "lifecycle/duplicate",
+      "stroke/change", "shape/change",
+      "text/edit", "text/character",
+    ]).forEach { scope in
+      try engine.editor.setGlobalScope(key: scope, value: .defer)
+    }
+  }
+
+  /// Loads the built-in empty video scene.
+  static let defaultCreateScene: OnCreate.Callback = { engine in
+    // highlight-starter-kit-on-create-scene
+    let sceneURL = Bundle(for: VideoEditorConfiguration.self).url(forResource: "video-empty", withExtension: "scene")!
+    try await engine.scene.load(from: sceneURL)
+    // highlight-starter-kit-on-create-scene
+  }
+
+  /// Registers all default and demo asset sources, plus text and photo roll sources.
+  static let defaultLoadAssetSources: OnCreate.Callback = { engine in
+    // highlight-starter-kit-on-load-asset-sources
+    let assetSources: [String: URL] = [
+      Engine.DefaultAssetSource.sticker.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.vectorPath.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.filterLut.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.filterDuotone.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.colorsDefaultPalette.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.effect.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.blur.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.typeface.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.cropPresets.rawValue: Engine.assetBaseURL,
+      Engine.DefaultAssetSource.pagePresets.rawValue: Engine.assetBaseURL,
+
+      Engine.DemoAssetSource.image.rawValue: Engine.assetBaseURL,
+      Engine.DemoAssetSource.video.rawValue: Engine.assetBaseURL,
+      Engine.DemoAssetSource.audio.rawValue: Engine.assetBaseURL,
+      Engine.DemoAssetSource.textComponents.rawValue: Engine.assetBaseURL,
+    ]
+
+    try await withThrowingTaskGroup(of: Void.self) { group in
+      for assetSource in assetSources {
+        group.addTask {
+          try await engine.populateAssetSource(id: assetSource.key, baseURL: assetSource.value)
+        }
+      }
+      try await group.waitForAll()
+    }
+
+    let localAssetSources: [Engine.DemoAssetSource] = [
+      .imageUpload,
+      .audioUpload,
+      .videoUpload,
+    ]
+
+    for localAssetSource in localAssetSources {
+      try engine.asset.addLocalSource(
+        sourceID: localAssetSource.rawValue,
+        supportedMimeTypes: localAssetSource.mimeTypes,
+      )
+    }
+
+    try await engine.asset.addSource(TextAssetSource(engine: engine))
+    try engine.asset.addSource(PhotoRollAssetSource(engine: engine))
+    // highlight-starter-kit-on-load-asset-sources
+  }
+
+  /// No additional post-scene configuration needed for video editor.
+  static let defaultPostCreateScene: OnCreate.Callback = { _ in }
+}

package/ios/StarterKits/Video/callbacks/OnExport+Video.swift

@@ -0,0 +1,46 @@
+import Foundation
+import IMGLYEditor
+import IMGLYEngine
+
+// MARK: - Default OnExport
+
+extension VideoEditorConfiguration {
+  /// The default export handler.
+  ///
+  /// Exports the current page as MP4 and opens the system share sheet.
+  static var defaultOnExportHandler: OnExport.Handler {
+    { engine, eventHandler, _ in
+      // highlight-starter-kit-on-export
+      guard let page = try engine.scene.getCurrentPage() else {
+        throw EditorError("No page was found.")
+      }
+      eventHandler.send(.exportProgress(.relative(0)))
+      let mimeType: MIMEType = .mp4
+      let stream = try await engine.block.exportVideo(page, mimeType: mimeType) { _ in }
+
+      var lastReportedProgress = 0
+      for try await export in stream {
+        try Task.checkCancellation()
+        switch export {
+        case let .progress(_, encodedFrames, totalFrames):
+          let progress = Int((Float(encodedFrames) / Float(totalFrames)) * 100)
+          if progress > lastReportedProgress {
+            lastReportedProgress = progress
+            eventHandler.send(.exportProgress(.relative(Float(progress) / 100)))
+          }
+        case let .finished(video: videoData):
+          let url = FileManager.default.temporaryDirectory.appendingPathComponent(
+            "Export",
+            conformingTo: mimeType.uniformType,
+          )
+          try videoData.write(to: url, options: [.atomic])
+          eventHandler.send(.exportCompleted { eventHandler.send(.shareFile(url)) })
+          return
+        }
+      }
+      try Task.checkCancellation()
+      throw EditorError("Failed to export the content.")
+      // highlight-starter-kit-on-export
+    }
+  }
+}

package/ios/StarterKits/Video/components/BottomPanel+Video.swift

@@ -0,0 +1,16 @@
+import IMGLYEditor
+
+// MARK: - Bottom Panel
+
+extension VideoEditorConfiguration {
+  /// The default bottom panel configuration.
+  static var defaultBottomPanel: BottomPanel.Configuration {
+    BottomPanel.Configuration { builder in
+      // highlight-starter-kit-bottom-panel
+      builder.content { context in
+        DefaultTimelineComponent(context: context)
+      }
+      // highlight-starter-kit-bottom-panel
+    }
+  }
+}

package/ios/StarterKits/Video/components/CanvasMenu+Video.swift

@@ -0,0 +1,22 @@
+import IMGLYEditor
+
+// MARK: - Canvas Menu
+
+extension VideoEditorConfiguration {
+  /// The default canvas menu configuration.
+  static var defaultCanvasMenu: CanvasMenu.Configuration {
+    CanvasMenu.Configuration { builder in
+      // highlight-starter-kit-canvas-menu
+      builder.items { _ in
+        CanvasMenu.Buttons.selectGroup()
+        CanvasMenu.Divider()
+        CanvasMenu.Buttons.bringForward()
+        CanvasMenu.Buttons.sendBackward()
+        CanvasMenu.Divider()
+        CanvasMenu.Buttons.duplicate()
+        CanvasMenu.Buttons.delete()
+      }
+      // highlight-starter-kit-canvas-menu
+    }
+  }
+}

package/ios/StarterKits/Video/components/Dock+Video.swift

@@ -0,0 +1,30 @@
+import IMGLYEditor
+import SwiftUI
+
+// MARK: - Dock
+
+extension VideoEditorConfiguration {
+  /// The default dock configuration.
+  static var defaultDock: Dock.Configuration {
+    Dock.Configuration { builder in
+      // highlight-starter-kit-dock
+      builder.items { _ in
+        Dock.Buttons.photoRoll(
+          action: { $0.eventHandler.send(.addFromPhotoRoll(addToBackgroundTrack: true)) },
+          icon: { _ in Image.imgly.addPhotoRollBackground },
+        ) // Device photos and videos
+        // highlight-starter-kit-imgly-camera
+        Dock.Buttons.imglyCamera(icon: { _ in Image.imgly.addCameraBackground }) // Camera capture
+        // highlight-starter-kit-imgly-camera
+        Dock.Buttons.overlaysLibrary() // Video overlays
+        Dock.Buttons.textLibrary() // Text tools
+        Dock.Buttons.stickersAndShapesLibrary() // Stickers and shapes
+        Dock.Buttons.audioLibrary() // Audio tracks
+        Dock.Buttons.voiceover() // Voice recording
+        Dock.Buttons.reorder() // Clip reordering
+        Dock.Buttons.resize() // Aspect ratio and canvas size
+      }
+      // highlight-starter-kit-dock
+    }
+  }
+}

package/ios/StarterKits/Video/components/InspectorBar+Video.swift

@@ -0,0 +1,43 @@
+import IMGLYEditor
+
+// MARK: - Inspector Bar
+
+extension VideoEditorConfiguration {
+  /// The default inspector bar configuration.
+  static var defaultInspectorBar: InspectorBar.Configuration {
+    InspectorBar.Configuration { builder in
+      // highlight-starter-kit-inspector-bar
+      builder.items { _ in
+        InspectorBar.Buttons.replace()
+
+        InspectorBar.Buttons.editText()
+        InspectorBar.Buttons.formatText()
+        InspectorBar.Buttons.fillStroke()
+        InspectorBar.Buttons.textBackground()
+        InspectorBar.Buttons.addVoiceoverRecording()
+        InspectorBar.Buttons.volume()
+        InspectorBar.Buttons.clipSpeed()
+        InspectorBar.Buttons.crop()
+
+        InspectorBar.Buttons.adjustments()
+        InspectorBar.Buttons.filter()
+        InspectorBar.Buttons.effect()
+        InspectorBar.Buttons.blur()
+        InspectorBar.Buttons.animation()
+        InspectorBar.Buttons.shape()
+
+        InspectorBar.Buttons.selectGroup()
+        InspectorBar.Buttons.enterGroup()
+
+        InspectorBar.Buttons.layer()
+        InspectorBar.Buttons.split()
+        InspectorBar.Buttons.moveAsClip()
+        InspectorBar.Buttons.moveAsOverlay()
+        InspectorBar.Buttons.reorder()
+        InspectorBar.Buttons.duplicate()
+        InspectorBar.Buttons.delete()
+      }
+      // highlight-starter-kit-inspector-bar
+    }
+  }
+}

package/ios/StarterKits/Video/components/NavigationBar+Video.swift

@@ -0,0 +1,32 @@
+import IMGLYEditor
+
+// MARK: - Navigation Bar
+
+extension VideoEditorConfiguration {
+  /// The default navigation bar configuration.
+  static var defaultNavigationBar: NavigationBar.Configuration {
+    NavigationBar.Configuration { builder in
+      // highlight-starter-kit-navigation-bar
+      builder.items { _ in
+        NavigationBar.ItemGroup(placement: .topBarLeading) {
+          NavigationBar.Buttons.closeEditor()
+        }
+        NavigationBar.ItemGroup(placement: .topBarTrailing) {
+          NavigationBar.Buttons.undo()
+          NavigationBar.Buttons.redo()
+          NavigationBar.Buttons.export(
+            isEnabled: {
+              guard !$0.state.isCreating, !$0.state.isExporting,
+                    let engine = $0.engine,
+                    let scene = try engine.scene.get() else {
+                return false
+              }
+              return try engine.block.getDuration(scene) > 0
+            },
+          )
+        }
+      }
+      // highlight-starter-kit-navigation-bar
+    }
+  }
+}