Authentication shell

A semantic narrow page landmark that owns gutters and layout while applications own every visible authentication region.

Source
app/components/nitro_kit/auth_shell.rb
API
NitroKit::AuthShell.new(id:, html:, aria:, data:, desperately_need_a_class:) { ... }

Application-owned content

The shell supplies one semantic landmark, narrow constraint, gutters, and vertical rhythm. The application supplies every visible region.

Credentials form

A real Rails form and Card remain ordinary direct content.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-credentials",
  aria: { label: "Credentials example" }
) do
  render_credentials_card
end

Caller-owned branding

Brand identity and supporting copy are siblings of the application-owned Card, not shell slots.

Secure workspace access for Research and Production.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-branding",
  aria: { labelledby: "gallery-auth-shell-brand-name" }
) do
  header(data: { gallery: "auth-branding" }) do
    h4(id: "gallery-auth-shell-brand-name") { "Analytical Engines" }
    p { "Secure workspace access for Research and Production." }
  end
  render_access_card
end

Caller-owned Turbo lifecycle

The named Turbo Frame surrounds the shell and can replace the complete authentication state.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
turbo_frame_tag("gallery-auth-shell-frame") do
  render NitroKit::AuthShell.new(
    id: "gallery-auth-shell-turbo",
    aria: { label: "Email verification status" }
  ) do
    render_verification_card
  end
end

State and content pressure

Validation, completion, long identity copy, and a deliberately narrow viewport all use the same optionless shell.

Validation failure

Model errors, alert intent, field semantics, and recovery navigation remain caller-owned.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-validation",
  aria: { label: "Invalid credentials example" }
) do
  render_validation_card
end

Successful handoff

Completion content can replace the form without changing the shell contract.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-success",
  aria: { label: "Successful sign-in example" }
) do
  render_success_card
end

Long account and workspace copy

Unbroken identity pressure shrinks inside the fixed medium content constraint.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-long-copy",
  aria: { label: "Long account identity example" }
) do
  render_long_copy_card
end

Narrow mobile pressure

Gallery viewport metadata narrows the same shell; Nitro keeps gutters and descendants shrinkable.

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/auth_shell_page.rb
render NitroKit::AuthShell.new(
  id: "gallery-auth-shell-mobile",
  aria: { label: "Mobile authentication example" },
  data: { gallery: "flow-surface", gallery_mobile: "true" }
) do
  render_mobile_card
end