render NitroKit::AppShell.new(
  id: "gallery-product-resource-shell",
  layout: :hybrid,
  data: {
    gallery: "composition-surface",
    gallery_shell_preview: "true",
    gallery_composition: "product-resource",
    gallery_composition_state: state,
    gallery_mobile: state == "narrow" ? "true" : nil
  }.compact
) do |shell|
  shell.brand { strong { "Northstar" } }
  shell.navigation { render_product_navigation }
  shell.topbar { render_product_toolbar }
  shell.main do
    div(data: { gallery: "product-resource-main" }) do
      render NitroKit::Flex.new(
        dir: :col,
        gap: 6,
        align: :stretch,
        id: "gallery-product-resource-stack"
      ) do
        render_product_state
      end
    end
  end
end