Add background modifier

[supernintendo]

Adds support for the background modifier and adds the ability to use namespaced child elements when decoding modifiers. This is based on @carson-katri's idea for handling nested views within modifiers via Content Entities as described here.

<VStack id="background">
  <Spacer />
  <HStack id="example_heart">
    <Image system-name="heart.fill" modifiers={@native |> background(alignment: :center, content: :heart_bg) |> foreground_style(primary: {:color, :white})}>
      <background:heart_bg>
        <Circle modifiers={@native |> frame(width: 32, height: 32) |> foreground_style(primary: {:color, :red})} />
      </background:heart_bg>
    </Image>
  </HStack>
  <Spacer />
  <HStack id="example_liveviewnative">
    <Text modifiers={@native |> background(alignment: :center, content: :text_bg) |> foreground_style(primary: {:linear_gradient, %{gradient: {:colors, [:orange, :indigo, :purple]}, start_point: {0, 0}, end_point: {1, 1}}})}>
      liveviewnative
      <background:text_bg>
        <RoundedRectangle corner-radius="8" modifiers={@native |> frame(width: 192, height: 64)} />
      </background:text_bg>
    </Text>
  </HStack>
  <Spacer />
</VStack>

There are a few outstanding issues with this PR:

1. The foreground_style modifier influences the background content instead of the background_style modifier which doesn't appear to do anything. I'm not sure why this is but from what I can tell the native backgroundStyle modifier only affects nested content rendered using the in: constructor and not content passed to content.

2. There seem to be performance limitations with nested modifier views in my implementation. By rendering too many elements with background modifiers within the same view I'm able to produce a crash, although I haven't investigated this enough to know what might be causing it.

3. The string format for content when referencing namespaced child views could be a bit confusing. I'd like to tweak the Elixir modifier schema so that it accepts an atom instead, which should ameliorate this. Fixed in 2ccb51e

Closes #183.

[shadowfacts]

Something is definitely weird with how the background/foreground modifiers are interacting, though it's not obvious to me what the issue is.

In plain old SwiftUI, the following (translated directly from your example) results in just a red circle appearing, since the foreground style is applying to both the Circle and the Image.

Image(systemName: "heart.fill")
	.background(alignment: .center) {
		Circle()
			.frame(width: 32, height: 32)
	}
	.foregroundStyle(.red)

To get the result that you actually show, you'd need to move the foreground style inside the background modifier so that it only applies to the Circle:

Image(systemName: "heart.fill")
	.background(alignment: .center) {
		Circle()
			.frame(width: 32, height: 32)
			.foregroundStyle(.red)
	}

[carson-katri]

Image does not respect the foreground_style modifier because it uses a foregroundColor modifier in its body, which uses the system foreground color when set to nil. The example below produces the same result as the provided screenshot:

Image(systemName: "heart.fill")
            .foregroundColor(nil)
            .background(alignment: .center) {
                Circle()
                    .frame(width: 32, height: 32)
            }
            .foregroundStyle(.red)

liveview-client-swiftui/Sources/LiveViewNative/Views/Images/Image.swift

Line 45 in 931a824

.foregroundColor(symbolColor)

The attribute should probably be removed from Image.

Text has the same problem. The textColor, font, and fontWeight attributes should likely be replaced with modifiers as well.

[carson-katri]

RE the background_style modifier, this would require using the BackgroundStyle shape style. Background content created in this way uses the foreground style by default.

[shadowfacts]

Ah, that is indeed the case. We do probably want general modifiers for them, but I think the foregroundColor, font, and fontWeight modifiers need to remain attributes on the Text view as well, since doing them through our usual modifiers architecture would break composing Texts with different styles.

I think a workaround would be having helpers like foregroundColorIfPresent for Text that only apply the underlying modifiers if the value is non-nil, rather than applying .foregroundColor(nil) as currently happens.

[supernintendo]

@shadowfacts I added foregroundColorIfPresent to fix that in f7e7172. Let me know if there are other examples of this I should address, although maybe that's out of scope for this pull request?

[carson-katri]

@supernintendo I think Text is the only other one with this problem:

liveview-client-swiftui/Sources/LiveViewNative/Views/Text Input and Output/Text.swift

Lines 75 to 79 in f420c8e

	public var body: SwiftUI.Text {
	text
	.font(effectiveFont)
	.foregroundColor(textColor)
	}

[shadowfacts]

This looks good, just needs a slight tweak to make the docs visible