render NitroKit::AppShell.new(
  id: "gallery-product-resource-shell",
  layout: :sidebar,
  data: {
    ui: "inset-workspace",
    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 { img(src: "/gallery/racecamp-logo.png", alt: "Racecamp", width: 132, height: 28, data: { ui: "application-logo" }) }
  shell.navigation { render_product_navigation }
  shell.topbar { render_product_toolbar }
  shell.main do
    render NitroKit::Flex.new(
      dir: :col,
      gap: 6,
      align: :stretch,
      id: "gallery-product-resource-stack",
      data: { gallery: "product-resource-main", ui: "workspace-content" }
    ) { render_product_state }
  end
end