### Setup LiveView Native Project with Mix Tasks

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use `mix lvn.setup` and its subcommands to initialize LiveView Native in your project, including configuration and generation of native support files.

```bash
mix lvn.setup
mix lvn.setup.config  # Inject configuration into your app
mix lvn.setup.gen     # Generate native support files
```

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

### Stateful LiveComponent for Native Platforms

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Create stateful LiveComponents for native platforms using LiveViewNative.LiveComponent. This example demonstrates a counter component with mount, update, and event handling.

```elixir
defmodule MyAppWeb.CounterComponent.SwiftUI do
  use LiveViewNative.LiveComponent,
    format: :swiftui

  def mount(socket) do
    {:ok, assign(socket, count: 0)}
  end

  def update(assigns, socket) do
    {:ok, assign(socket, assigns)}
  end

  def handle_event("increment", _params, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end

  def render(assigns, _interface) do
    ~LVN"""
    <VStack id={@id}>
      <Text>Count: <%= @count %></Text>
      <Button phx-click="increment" phx-target={@myself}>
        <Text>+1</Text>
      </Button>
    </VStack>
    """
  end
end
```

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

### Create a Custom LiveView Native Client Plugin

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Define custom native client plugins using the `use LiveViewNative` macro. This example shows how to create a 'GameBoy' plugin and access registered plugins.

```elixir
defmodule GameBoy do
  use LiveViewNative,
    format: :gameboy,
    component: GameBoy.Component,
    module_suffix: GameBoy,
    template_engine: LiveViewNative.Engine,
    test_client: GameBoy.TestClient
end

# Access registered plugins
LiveViewNative.plugins()
# => %{"gameboy" => %GameBoy{format: :gameboy, ...}, "swiftui" => %LiveViewNative.SwiftUI{...}}

# Fetch a specific plugin
{:ok, plugin} = LiveViewNative.fetch_plugin(:swiftui)
# => {:ok, %LiveViewNative.SwiftUI{format: :swiftui, component: LiveViewNative.SwiftUI.Component, ...}}

# Get available formats
LiveViewNative.available_formats()
# => [:swiftui, :jetpack, :gameboy]
```

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

### LiveView Native Layouts for Native Applications

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Define format-specific layouts for native applications using LiveViewNative.Component. This example shows SwiftUI layouts and router configuration for handling different formats.

```elixir
defmodule MyAppWeb.Layouts.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui

  embed_templates "layouts_swiftui/*"
end

# Router configuration
defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  pipeline :browser do
    plug :accepts, ["html", "swiftui", "jetpack"]
    plug :put_root_layout,
      html: {MyAppWeb.Layouts, :root},
      swiftui: {MyAppWeb.Layouts.SwiftUI, :root},
      jetpack: {MyAppWeb.Layouts.Jetpack, :root}
  end
end
```

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

### Render Native UI with LiveViewNative SwiftUI

Source: https://github.com/liveview-native/live_view_native/blob/main/README.md

This example shows how to define a LiveViewNative component for SwiftUI. It uses the `~LVN` sigil to embed SwiftUI markup and conditionally renders different UIs based on the target platform.

```elixir
defmodule MyAppWeb.HelloLive.SwiftUI do
  use MyAppNative, [:render_component, format: :swiftui]

  def render(assigns, %{"target" => "watchos"}) do
    ~LVN"""
    <VStack>
      <Text>
        Hello WatchOS!
      </Text>
    </VStack>
    """
  end

  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <Text>
        Hello SwiftUI!
      </Text>
    </VStack>
    """
  end
end
```

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

### LiveView Native Component Definition with ~LVN Sigil

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Create format-specific render components that handle native UI rendering with the `~LVN` sigil. This example shows inline rendering for a VStack.

```elixir
defmodule MyAppWeb.HomeLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui,
    as: :render

  # Inline rendering with ~LVN sigil
  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <Text class="title">Count: <%= @count %></Text>
      <Button phx-click="increment">
        <Text>Increment</Text>
      </Button>
    </VStack>
    """
  end
end
```

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

### Define LiveView Entry Point

Source: https://github.com/liveview-native/live_view_native/blob/main/guides/introduction/welcome.md

This is the main entry point for your LiveView, capable of handling events from any platform. Ensure you include both MyAppWeb and MyAppNative.

```elixir
defmodule MyAppWeb.HelloLive do
  use MyAppWeb, :live_view
  use MyAppNative, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end
```

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

### Generate LiveView Native Components with Mix Tasks

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Generate LiveView Native render components and templates for SwiftUI or Jetpack using `mix lvn.gen.live`.

```bash
# Generate a LiveView Native render component and template
mix lvn.gen.live swiftui Home
# Creates:
#   lib/my_app_web/live/home_live.swiftui.ex
#   lib/my_app_web/live/swiftui/home_live.swiftui.neex

mix lvn.gen.live jetpack User
# Creates:
#   lib/my_app_web/live/user_live.jetpack.ex
#   lib/my_app_web/live/jetpack/user_live.jetpack.neex
```

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

### Navigation with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Perform navigation actions using `LVN.navigate/1` for full page loads or `LVN.patch/2` for partial updates.

```elixir
LVN.navigate("/dashboard")
LVN.patch("/users/#{@user.id}", replace: true)
```

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

### Generate LiveView Native Layouts with Mix Tasks

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use `mix lvn.gen.layout` to generate layout files for specific native formats like SwiftUI.

```bash
# Generate layouts
mix lvn.gen.layout swiftui
# Creates layout files for the SwiftUI format
```

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

### Push Events with Options using LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Send events to the server with additional options like a loading indicator target and event values using `LVN.push/2`.

```elixir
LVN.push("save", target: @myself, loading: "#form", value: %{id: @item.id})
```

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

### Configure LiveView Native Plugins and MIME Types

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Configure LiveView Native by registering plugins and setting up Phoenix to handle native formats. This includes configuring MIME types and stylesheet content paths.

```elixir
# config/config.exs

# Register LiveView Native plugins
config :live_view_native, plugins: [
  LiveViewNative.SwiftUI,
  LiveViewNative.Jetpack
]

# Configure MIME types for each plugin's format
config :mime, :types, %{
  "text/swiftui" => [:swiftui],
  "text/jetpack" => [:jetpack]
}

# Configure stylesheet content paths
config :live_view_native_stylesheet,
  content: [
    swiftui: ["lib/**/*swiftui*"],
    jetpack: ["lib/**/*jetpack*"]
  ]

# Configure Phoenix format encoders
config :phoenix_template, :format_encoders, [
  swiftui: Phoenix.HTML.Engine,
  jetpack: Phoenix.HTML.Engine
]

# Configure NEEX template engine
config :phoenix, :template_engines,
  neex: LiveViewNative.Engine
```

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

### LVN Usage in LiveView Native Templates

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Demonstrates how to integrate LVN commands directly within LiveView Native templates for interactive UI elements.

```elixir
def render(assigns, _interface) do
  ~LVN"""
  <VStack>
    <Button phx-click={LVN.push("save") |> LVN.add_class("saving", to: "#form")}>
      <Text>Save</Text>
    </Button>

    <Button phx-click={hide_modal()}>
      <Text>Close</Text>
    </Button>

    <Text id="item" phx-remove={LVN.hide(transition: "fade-out")}>
      Removable content
    </Text>
  </VStack>
  """
end
```

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

### Test SwiftUI renders and mounts

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests disconnected and connected rendering of SwiftUI views. Asserts the initial markup and checks for specific text content.

```elixir
defmodule MyAppWeb.HomeLiveTest do
  use MyAppWeb.ConnCase, async: true
  import LiveViewNativeTest

  describe "SwiftUI format" do
    test "renders disconnected and connected mount", %{conn: conn} do
      # Test disconnected render
      conn = get(conn, "/home", _format: "swiftui")
      assert lvn_response(conn, 200, :swiftui) =~ "<Text>Welcome</Text>"

      # Test connected mount
      {:ok, view, markup} = live(conn, _format: :swiftui)
      assert markup =~ "<Text>Welcome</Text>"
    end
  end
end
```

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

### Enable LiveView for Native Rendering

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use `LiveViewNative.LiveView` to delegate rendering from a parent LiveView to format-specific render components. Event handling remains in the parent LiveView.

```elixir
defmodule MyAppWeb.HomeLive do
  use MyAppWeb, :live_view
  use LiveViewNative.LiveView,
    formats: [:swiftui, :jetpack],
    layouts: [
      swiftui: {MyAppWeb.Layouts.SwiftUI, :app},
      jetpack: {MyAppWeb.Layouts.Jetpack, :app}
    ],
    dispatch_to: &Module.concat/2

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  # Event handling stays in the parent LiveView
  def handle_event("increment", _params, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end
```

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

### Render greeting component

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Renders a functional component and asserts its output. This is useful for testing individual components in isolation.

```elixir
defmodule MyAppWeb.ComponentsTest do
  use ExUnit.Case
  import LiveViewNativeTest
  import LiveViewNative.Component

  test "renders greeting component" do
    assert render_component(&MyComponents.greet/1, name: "World") ==
             "<Text>Hello, World!</Text>"
  end
end
```

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

### Add LiveViewNative Dependencies to mix.exs

Source: https://github.com/liveview-native/live_view_native/blob/main/README.md

Include these dependencies in your `mix.exs` file to integrate LiveViewNative and its related libraries into your Phoenix application.

```elixir
{:live_view_native, "~> 0.4.0-rc.1"},
{:live_view_native_stylesheet, "~> 0.4.0-rc.1"},
{:live_view_native_swiftui, "~> 0.4.0-rc.1"},
{:live_view_native_live_form, "~> 0.4.0-rc.1"}
```

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

### Define LiveView Module for LiveViewNative

Source: https://github.com/liveview-native/live_view_native/blob/main/README.md

To use LiveViewNative, include `use MyAppNative, :live_view` in your LiveView module. This enables LiveViewNative's functionality for your LiveView.

```elixir
defmodule MyAppWeb.HelloLive do
  use MyAppWeb, :live_view
  use MyAppNative, :live_view
end
```

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

### Configure Phoenix Router for Native Clients

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Configures the Phoenix router to accept native client formats (swiftui, jetpack) and set up appropriate root layouts for each. This pipeline ensures native requests are handled correctly.

```elixir
# lib/my_app_web/router.ex
defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  pipeline :native do
    plug :accepts, ["html", "swiftui", "jetpack"]
    plug :put_root_layout,
      html: {MyAppWeb.Layouts, :root},
      swiftui: {MyAppWeb.Layouts.SwiftUI, :root},
      jetpack: {MyAppWeb.Layouts.Jetpack, :root}
  end

  scope "/", MyAppWeb do
    pipe_through [:browser, :native]

    live "/", HomeLive
    live "/users", UserLive
  end
end
```

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

### Show/Hide Elements with Transitions using LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use `LVN.show/2` and `LVN.hide/2` to control element visibility with specified transitions. These commands are useful for modal dialogs or collapsible panels.

```elixir
alias LiveViewNative.LVN

# Show/Hide elements with transitions
def show_modal(lvn \ %LVN{}) do
  lvn
  |> LVN.show(to: "#modal", transition: "fade-in")
  |> LVN.show(to: "#modal-content", transition: "fade-in-scale")
end

def hide_modal(lvn \ %LVN{}) do
  lvn
  |> LVN.hide(to: "#modal", transition: "fade-out")
  |> LVN.hide(to: "#modal-content", transition: "fade-out-scale")
end
```

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

### Focus Management with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Manage focus on elements using `LVN.focus/1`, `LVN.focus_first/1`, `LVN.push_focus/1`, and `LVN.pop_focus/0`.

```elixir
LVN.focus(to: "#search-input")
LVN.focus_first(to: "#modal")
LVN.push_focus(to: "#dialog")
LVN.pop_focus()
```

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

### Upload avatar with LiveView Native

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests file upload functionality for avatar images. It simulates a file input, reads a local file, and asserts the upload progress.

```elixir
test "uploads avatar", %{conn: conn} do
  {:ok, view, _body} = live(conn, "/profile", _format: :swiftui)

  avatar = file_input(view, "#profile-form", :avatar, [%{
    name: "photo.jpg",
    content: File.read!("test/fixtures/photo.jpg"),
    type: "image/jpeg"
  }])

  assert render_upload(avatar, "photo.jpg") =~ "100%"
end
```

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

### Render SwiftUI for WatchOS

Source: https://github.com/liveview-native/live_view_native/blob/main/guides/introduction/welcome.md

This module is invoked when the format is :swift_ui. It allows targeting sub-platforms like watchOS for specific UI rendering.

```elixir
defmodule MyAppWeb.HelloLive.SwiftUI do
  use MyAppNative, :live_view

  def render(assigns, %{"target" => "watchos"}) do
    ~LVN"""
    <VStack>
      <Text>
        Hello WatchOS!
      </Text>
    </VStack>
    """
  end

  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <Text>
        Hello SwiftUI!
      </Text>
    </VStack>
    """
  end
end
```

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

### Test SwiftUI with interface data

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests rendering SwiftUI views with specific interface data, simulating different target platforms like watchOS. Asserts that the rendered markup reflects the provided interface data.

```elixir
test "with interface data", %{conn: conn} do
  {:ok, view, markup} = live(conn,
    "/dashboard",
    _format: :swiftui,
    _interface: %{"target" => "watchos", "version" => "1.0"}
  )
  assert markup =~ "Watch Dashboard"
end
```

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

### Execute Stored Commands with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Execute commands that are stored in the DOM using `LVN.exec/2`.

```elixir
LVN.exec("phx-remove", to: "#modal")
```

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

### Combine Commands with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Chain multiple LVN commands together using `LVN.concat/1` for sequential execution.

```elixir
LVN.concat(show_modal(), LVN.focus_first(to: "#modal"))
```

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

### Test SwiftUI click events

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests handling of click events in SwiftUI views. It simulates clicking a button and checks if the view updates as expected. Also demonstrates direct event handling.

```elixir
test "handles click events", %{conn: conn} do
  {:ok, view, _markup} = live(conn, "/counter", _format: :swiftui)

  assert view
         |> element("Button", "Increment")
         |> render_click() =~ "Count: 1"

  # Direct event
  assert render_click(view, :increment, %{}) =~ "Count: 2"
end
```

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

### Define a LiveView for Jetpack Compose

Source: https://github.com/liveview-native/live_view_native/blob/main/guides/introduction/welcome.md

This module defines a LiveView for Jetpack Compose. It uses the `~LVN` sigil for NEEx templating. Ensure your project is set up to handle NEEx templates.

```elixir
defmodule MyAppWeb.HelloLive.Jetpack do
  use MyAppNative, :live_view

  def render(assigns, _interface) do
    ~LVN"""
    <Text>Hello Jetpack Compose!</Text>
    """
  end
end
```

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

### Configure Phoenix Endpoint for LiveView Native

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Configures the Phoenix endpoint to include LiveView Native's LiveReloader in development environments. This ensures hot-reloading works for native views.

```elixir
# lib/my_app_web/endpoint.ex
defmodule MyAppWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :my_app

  # Add LiveView Native live reloader in development
  if code_reloading? do
    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
    plug Phoenix.LiveReloader
    plug LiveViewNative.LiveReloader  # Add after Phoenix.LiveReloader
  end

  # ... rest of endpoint configuration
end
```

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

### Test SwiftUI form submission

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests form submission in SwiftUI views. It simulates filling out a form and submitting it, then asserts that the submitted data is processed correctly.

```elixir
test "handles form submission", %{conn: conn} do
  {:ok, view, _markup} = live(conn, "/form", _format: :swiftui)

  assert view
         |> form("#user-form", user: %{name: "John"})
         |> render_submit() =~ "Saved: John"
end
```

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

### Apply Transitions with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Trigger custom transitions on elements using `LVN.transition/2`. You can specify the transition name, target element, and duration.

```elixir
LVN.transition("shake", to: "#error-message", time: 500)
LVN.transition({"ease-out duration-300", "opacity-0", "opacity-100"}, to: "#content")
```

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

### Async Result Component in SwiftUI

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Handle asynchronous operations with loading, failed, and success states within native templates using the `async_result` macro.

```elixir
defmodule MyAppWeb.UserProfileLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui,
    as: :render

  import LiveViewNative.Component, only: [async_result: 2]

  def render(assigns, interface) do
    ~LVN"""
    <VStack>
      <.async_result :let={user} assign={@user}>
        <:loading>
          <ProgressView>Loading user...</ProgressView>
        </:loading>
        <:failed :let={error}>
          <Text class="error">Failed to load: <%= inspect(error) %></Text>
          <Button phx-click="retry"><Text>Retry</Text></Button>
        </:failed>
        <Text class="title"><%= user.name %></Text>
        <Text><%= user.email %></Text>
      </.async_result>
    </VStack>
    """
  end
end
```

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

### Target-Specific LiveView Native Component Rendering

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Define target-specific rendering logic within a LiveView Native component based on the interface. This allows for different UI structures for watchOS, macOS, tvOS, and mobile.

```elixir
defmodule MyAppWeb.HomeLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui,
    as: :render

  def render(assigns, %{"target" => "watchos"}) do
    ~LVN"""
    <Text>Compact Watch View: <%= @count %></Text>
    """
  end

  def render(assigns, %{"target" => target}) when target in ~w{macos tvos} do
    ~LVN"""
    <HStack>
      <Text>Desktop View on <%= target %>: <%= @count %></Text>
      <Spacer />
      <Button phx-click="increment"><Text>+</Text></Button>
    </HStack>
    """
  end

  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <Text>Mobile View: <%= @count %></Text>
      <Button phx-click="increment"><Text>Increment</Text></Button>
    </VStack>
    """
  end
end
```

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

### Render component with sigil

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Renders a component using the ~LVN sigil, which allows embedding LiveView Native markup directly in Elixir code. Asserts the rendered string output.

```elixir
test "renders with sigil" do
  assigns = %{name: "Test"}
  assert rendered_to_string(~LVN"""
         <Text>Hello, <%= @name %>!</Text>
         """) == "<Text>Hello, Test!</Text>"
end
```

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

### Dispatch Custom Events with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Dispatch custom browser events with details using `LVN.dispatch/2`. This is useful for integrating with other JavaScript functionalities.

```elixir
LVN.dispatch("my_app:clipboard_copy", to: "#text-content", detail: %{format: "plain"})
```

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

### Test SwiftUI async results

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Tests handling of asynchronous operations in SwiftUI views. It asserts the initial loading state and then waits for and asserts the final rendered content after the async operation completes.

```elixir
test "async results", %{conn: conn} do
  {:ok, view, body} = live(conn, "/users", _format: :swiftui)
  assert body =~ "Loading..."

  # Wait for async operations
  assert render_async(view) =~ "User List"
end
```

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

### Parsing LiveView Native Template Markup

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Programmatically parse and manipulate LiveView Native template markup using the Template.Parser API. Supports parsing documents, attributes as maps, raising on error, and converting AST back to string.

```elixir
alias LiveViewNative.Template.Parser

# Parse a document
{:ok, ast} = Parser.parse_document("""
<Group>
  <Text class="bold">Hello</Text>
  <Text>world!</Text>
</Group>
""")
# => {:ok, [{"Group", [], [{"Text", [{"class", "bold"}], ["Hello"]}, {"Text", [], ["world!"]}]}]}

# Parse with attributes as maps
{:ok, ast} = Parser.parse_document(
  ~S(<Text class="main" id="greeting">Hello</Text>),
  attributes_as_maps: true
)
# => {:ok, [{"Text", %{"class" => "main", "id" => "greeting"}, ["Hello"]}]}

# Parse and raise on error
ast = Parser.parse_document!("<VStack><Text>Hello</Text></VStack>")
# => [{"VStack", [], [{"Text", [], ["Hello"]}]}]

# Convert AST back to string
Parser.raw_string(ast)
# => "<VStack><Text>Hello</Text></VStack>"

# Pretty print
Parser.raw_string(ast, pretty: true)
# => "<VStack>\n  <Text>\n    Hello\n  </Text>\n</VStack>\n"

# Integration with Floki for querying
ast = Parser.parse_document!("""
<Group>
  <Text class="bold title">Welcome</Text>
  <Text class="body">Content here</Text>
</Group>
""")

Floki.find(ast, "Text.bold")
# => [{"Text", [{"class", "bold title"}], ["Welcome"]}]

# Configure as default Floki parser
# config :floki, :html_parser, LiveViewNative.Template.Parser
```

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

### Toggle Element Visibility with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use `LVN.toggle/1` to switch the visibility of elements. You can specify in and out transitions, as well as the duration.

```elixir
LVN.toggle(to: "#dropdown")
LVN.toggle(to: "#panel", in: "fade-in", out: "fade-out", time: 300)
```

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

### Conditional Rendering with :interface- Attribute

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Use the :interface- special attribute to conditionally render elements based on client interface data like device type. This allows for platform-specific UI adjustments within a single component.

```elixir
defmodule MyAppWeb.DashboardLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui,
    as: :render

  def render(assigns, _interface) do
    ~LVN"""
    <VStack>
      <!-- Conditionally render based on target device -->
      <Text :interface-target="mobile">You're on a phone</Text>
      <Text :interface-target="watch">You're on a watch</Text>
      <Text :interface-target="tv">You're on Apple TV</Text>

      <!-- Show different layouts based on interface -->
      <HStack :interface-target="tablet">
        <Sidebar><%= render_sidebar(assigns) %></Sidebar>
        <MainContent><%= @content %></MainContent>
      </HStack>

      <VStack :interface-target="mobile">
        <MainContent><%= @content %></MainContent>
        <TabBar><%= render_tabs(assigns) %></TabBar>
      </VStack>
    </VStack>
    """
  end
end
```

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

### Manipulate Element Classes with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Control CSS classes on elements using `LVN.add_class/2`, `LVN.remove_class/2`, and `LVN.toggle_class/2`. Transitions can be applied to class changes.

```elixir
LVN.add_class("active highlight", to: "#item")
LVN.remove_class("inactive", to: "#item")
LVN.toggle_class("selected", to: "#item", transition: "ease-out duration-200")
```

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

### Embedding External Templates with embed_templates

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Embed external NEEX template files as render functions within your components. You can embed all matching templates or specify custom function names and handle target-specific templates.

```elixir
defmodule MyAppWeb.Components.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui

  # Embed all templates matching pattern - generates functions like card/2, header/2
  embed_templates "swiftui/*"

  # Embed with custom function name
  embed_templates "swiftui/home_live*", name: :render

  # Templates with targets: home_live.swiftui+watchos.neex, home_live.swiftui.neex
  # Generates:
  #   def render(assigns, %{"target" => "watchos"}), do: ...
  #   def render(assigns, _interface), do: ...
end
```

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

### Update Function Component Arity to 2 in LiveView Native

Source: https://github.com/liveview-native/live_view_native/blob/main/RELEASE_NOTES.md

Function components in LiveView Native must now have an arity of 2. Update existing components to accept a second argument, typically named `_interface`, to ensure compatibility. Compilation will fail for components still using arity 1.

```elixir
def clock(assigns) do
  ~LVN"""
  <Clock time={@time} />
  """
end
```

```elixir
def clock(assigns, _interface) do
  ~LVN"""
  <Clock time={@time} />
  """
end
```

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

### Manipulate Element Attributes with LVN

Source: https://context7.com/liveview-native/live_view_native/llms.txt

Modify element attributes using `LVN.set_attribute/2`, `LVN.remove_attribute/2`, and `LVN.toggle_attribute/2`. This is useful for ARIA attributes or dynamic properties.

```elixir
LVN.set_attribute({"aria-expanded", "true"}, to: "#menu")
LVN.remove_attribute("disabled", to: "#submit-btn")
LVN.toggle_attribute({"open", "true", "false"}, to: "#dialog")
```

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