nitro_kit 2.0.0.alpha.4 → 2.0.0.alpha.6

data/docs/customization.md

@@ -426,12 +426,11 @@ module Workspace
 end
 ```
 
-Change only `layout:` to `:topbar` or `:hybrid`; the same `brand`, `navigation`, `topbar`, and `main` declarations remain valid. Nitro owns the responsive breakpoint, narrow drawer, focus management, sticky regions, and one reflowed navigation DOM tree. Do not clone navigation for mobile or add route registries to the shell.
+Change only `layout:` to `:topbar` or `:sidebar`; the same `brand`, `navigation`, `topbar`, and `main` declarations remain valid. Nitro owns the responsive breakpoint, narrow drawer, focus management, sticky regions, and one reflowed navigation DOM tree. Do not clone navigation for mobile or add route registries to the shell.
 
 The gallery has executable examples for
-[sidebar](https://gallery.nitrokit.dev/gallery/compositions/application-sidebar),
-[topbar](https://gallery.nitrokit.dev/gallery/compositions/application-topbar),
-and [hybrid](https://gallery.nitrokit.dev/gallery/compositions/application-hybrid)
+[sidebar](https://gallery.nitrokit.dev/gallery/compositions/application-sidebar) and
+[topbar](https://gallery.nitrokit.dev/gallery/compositions/application-topbar)
 applications.
 
 ## Rails forms and Hotwire

data/docs/hotwire.md

@@ -40,8 +40,8 @@ interaction available.
 ## Stimulus and lifecycle
 
 Let Turbo submit real Rails forms. Use `data-turbo-submits-with` for submission
-feedback and `data-turbo-confirm` only for compact confirmation. A reviewed
-destructive flow still submits a real Rails form; use the
+feedback. Destructive confirmations use Nitro Dialog, including compact
+remove and revoke flows, with a real Rails form inside; use the
 [destructive action pattern](patterns/destructive_action.md).
 
 Keep application controllers declarative. Prefer `data-action` over manually

data/docs/initialization_prompt.md

@@ -6,20 +6,26 @@
    `2.`.
 2. Choose the project-local Nitro Kit skill matching the task. It will resolve
    and read the installed, version-matched `docs/agent_guide.md`.
-3. Inspect the application before editing. Preserve established view, asset,
+3. For greenfield planning or broad product work, check whether Nitro Kit
+   catalog or MCP tools are available. When available, inventory and search by
+   product workflow, retrieve relevant patterns, and state what will be used,
+   adapted, or deferred. When unavailable, continue with the bundled guidance;
+   catalog access is optional and must never block the work.
+4. Inspect the application before editing. Preserve established view, asset,
    authentication, and testing conventions unless the task changes them.
-4. For a greenfield application, run `bin/rails generate phlex:install` and use
+5. For a greenfield application, run `bin/rails generate phlex:install` and use
    Phlex for the application layout, route views, and reusable UI. In an
    established application, introduce Phlex only at the requested boundary.
    Do not perform an application-wide migration unless it is explicitly
    authorized.
-5. Verify that the application loads Nitro Kit CSS, the appearance bootstrap,
+6. Verify that the application loads Nitro Kit CSS, the appearance bootstrap,
    Turbo, Stimulus, and the normal Stimulus controller loader. Never copy Nitro
    components or `nk--*` controllers into the application.
-6. Verify one application base component includes `NitroKit`, and model-backed
+7. Verify one application base component includes `NitroKit`, and model-backed
    forms select `NitroKit::FormBuilder` explicitly.
-7. Run `bin/rails nitro_kit:doctor`, fix actionable failures, and run the
-   application's relevant tests.
+8. Run `bin/rails nitro_kit:doctor`, fix actionable failures, and run the
+   application's relevant tests. Doctor verifies Nitro Kit integration, not
+   whether the product implements every relevant workflow.
 
 If this is a Nitro Kit 1.x migration, stop and follow
 `docs/migration_1_to_2.md` from the installed gem. Replace a control only when

data/docs/migration_1_to_2.md

@@ -12,7 +12,7 @@ Treat a 1.x migration as a product-flow review, not a helper rename. Nitro Kit
 Add the 2.0 prerelease to the application's Gemfile:
 
 ```ruby
-gem "nitro_kit", "2.0.0.alpha.4"
+gem "nitro_kit", "2.0.0.alpha.6"
 ```
 
 Bundler records the exact released version in `Gemfile.lock`; commit `Gemfile`

data/docs/patterns/application_foundation.md

@@ -26,11 +26,19 @@ invited email. Existing and new users should share one acceptance path.
 
 ## Authenticated shell
 
-Use one `AppShell`, normally `layout: :hybrid`, for authenticated routes.
+Use one `AppShell`, normally `layout: :sidebar`, for authenticated routes.
 `AppNavigation` owns brand and destinations; a `Toolbar` in `shell.topbar`
 owns the route's single `h1` and persistent actions. One wrapper inside
 `shell.main` owns responsive page padding. Do not add another viewport-height
-or outer-padding rule in child pages.
+or outer-padding rule in child pages. The shell does not cap content width.
+Tables fill the available canvas; individual form or reading pages may use a
+`Container(size: :md)` or `Container(size: :lg)` inside the shared gutter.
+Keep the Container intact so its width and centering stay together.
+
+For an inset workspace, use the complete [inset composition](inset_workspace.md).
+It describes the sidebar canvas and names the owner of rail
+padding, canvas gaps, and page gutters. Do not reconstruct it from unrelated
+spacing overrides.
 
 Application code owns destinations, authorization, and current-route policy.
 Nitro owns responsive disclosure and focus behavior. Put infrequent account
@@ -60,3 +68,13 @@ ordinary Rails flash and `303 See Other` redirects. Use the dedicated
 - Owner, administrator, and member policy differs where intended.
 - Populated, empty, invalid, narrow, settings, and destructive states work.
 - Successful mutations redirect with `303`; invalid forms render with `422`.
+
+## Account menu
+
+Use a Dropdown for the signed-in identity across application examples. Include
+Account and Settings links, a separator, and Sign out. Put it in the navigation
+footer or existing topbar account position, consistently within each application.
+Use the normal button treatment, an Avatar with photo or initials fallback, and a disclosure chevron. Route
+URLs and sign-out behavior belong to the application; a real sign-out must
+submit to the session endpoint using its non-GET method. The gallery's sign-out
+item is an inert demonstration because it has no authenticated session.

data/docs/patterns/crud_resource.md

@@ -16,18 +16,29 @@ resource with Nitro Kit.
 
 ## Resource map
 
-Use `AppShell(layout: :hybrid)` for an authenticated product area. Put the
+Use `AppShell(layout: :sidebar)` for an authenticated product area. Put the
 route's one `h1` and persistent actions in the topbar `Toolbar`. Child routes
-place one compact Back link before the title. One wrapper inside `shell.main`
-owns page padding; child pages add no outer gutter.
+place one compact Back link before the title. One layout element inside `shell.main`
+owns page padding and vertical spacing; child pages add no outer gutter. For an inset treatment,
+use [Inset workspace](inset_workspace.md) rather than adding padding to each
+shell region. The shell owns gutters, not a universal maximum width. Let
+indexes and tables fill the canvas; bound form or reading content locally with
+a centered `Container(size: :md)` or `Container(size: :lg)` without extra padding.
 
 | Route                 | Composition                                                                                                             |
 | --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | Index                 | Optional short introduction, then Table or EmptyState and pagination. Use DataSection only for multiple named datasets. |
-| New/Edit              | One `SettingsSection` and one shared form component. A toolbar submit targets the form's stable `form:` ID.             |
+| New/Edit              | One single-column `Fieldset` and one shared form component. A toolbar submit targets the form's stable `form:` ID.      |
 | Show                  | Status or metadata, then the resource. Keep lifecycle actions in the normal detail flow.                                |
 | Edit destructive area | One `DangerZone` with a safe escape. Do not put permanent deletion on every show page.                                  |
 
+Use ordinary GET forms and links with Turbo Drive for a full-page index. Keep
+default caching; reserve Frames for independently navigable page regions.
+
+Keep all columns and View/Edit actions intact at 390px. Use Table's built-in
+horizontal scroll wrapper as shown in [Queryable collection](queryable_collection.md).
+Do not hide columns or stack row actions to squeeze the table into the viewport.
+
 Use one primary action. Do not render the same Save or Create action in both
 the toolbar and form body. Use Card only for a bounded object that benefits
 from its own surface.
@@ -60,3 +71,7 @@ pagination, `303` redirects, and `422` validation. Protect the high-level
 composition: one title, one primary action, the correct form association,
 Table or EmptyState, and edit-owned destructive confirmation. Inspect
 populated, empty, invalid, narrow, draft, published, and destructive states.
+
+Avoid layout-only wrappers inside Toolbar.leading or Toolbar.trailing: these
+regions already arrange their children. Render independent action Buttons
+directly; use ButtonGroup only when the actions are intentionally a joined set.

data/docs/patterns/destructive_action.md

@@ -5,8 +5,9 @@ archive, or similarly destructive Rails actions.
 
 ## Summary
 
-- Use `NitroKit::Dialog` when the user must review impact or type confirmation;
-  use Turbo's native browser confirmation for a one-sentence consequence.
+- Use `NitroKit::Dialog` for destructive confirmations, including simple
+  deletion, member removal, and invitation revocation. A short consequence
+  still belongs in the application dialog, not a native browser confirm.
 - A real Rails form owns the request, and the server owns authorization.
 - Put permanent deletion on the edit route, not the operational show route.
 - Use a server-rendered review route when confirmation must work without
@@ -14,13 +15,16 @@ archive, or similarly destructive Rails actions.
 
 ## Choose one confirmation path
 
-| Need                                            | Pattern                                                         |
-| ----------------------------------------------- | --------------------------------------------------------------- |
-| One-sentence confirmation                       | Real form with `data: { turbo_confirm: "Delete permanently?" }` |
-| Reviewed impact or typed confirmation           | `DangerZone` containing a Dialog and real form                  |
-| Confirmation required without client JavaScript | Ordinary link to a server-rendered review page                  |
+Use a Dialog with a clear title, a short consequence, a Cancel control, and a
+real Rails form with a specifically named destructive submit. Use stable,
+record-specific dialog IDs when rendering repeated actions in a table.
+Put permanent deletion in an edit-page `DangerZone`; invitation revocation
+may open a compact Dialog from its table row without adding a DangerZone.
 
-Never stack `turbo_confirm` inside a Dialog.
+Use an ordinary link to a server-rendered review page when confirmation must
+work without client JavaScript. Do not add `turbo_confirm` to a Dialog form:
+it would ask twice. Native browser confirmations are not the default Nitro Kit
+experience; keep them only when the host application explicitly requires them.
 
 ```ruby
 render NitroKit::DangerZone.new(
@@ -32,18 +36,23 @@ render NitroKit::DangerZone.new(
     render NitroKit::Dialog.new(id: dom_id(project, :delete_dialog)) do |dialog|
       dialog.trigger("Review deletion", variant: :destructive)
       dialog.panel(title: "Delete #{project.name}?") do
-        form_with(
-          model: project,
-          method: :delete,
-          data: { turbo_frame: "_top" }
-        ) do
+        render NitroKit::Flex.new(dir: :row, gap: 2, justify: :end, wrap: :wrap) do
           render NitroKit::Button.new(
-            "Delete project",
-            type: :submit,
-            variant: :destructive
+            "Cancel",
+            html: { command: "close", commandfor: "#{dialog.id}-panel" }
           )
+          form_with(
+            model: project,
+            method: :delete,
+            data: { turbo_frame: "_top" }
+          ) do
+            render NitroKit::Button.new(
+              "Delete project",
+              type: :submit,
+              variant: :destructive
+            )
+          end
         end
-        dialog.close_button(label: "Cancel deletion")
       end
     end
   end
@@ -51,6 +60,11 @@ render NitroKit::DangerZone.new(
 end
 ```
 
+Keep Cancel and the destructive action together in this right-aligned row.
+`dialog.close_button` configures the corner X and its accessible label; it does
+not render a visible footer Cancel button. The ordinary Cancel Button uses
+native commands with Nitro's existing browser fallback.
+
 The `_top` target keeps the redirect out of a surrounding frame. The dialog is
 not a security boundary; load and authorize the record on the server.
 

data/docs/patterns/inset_workspace.md

@@ -0,0 +1,178 @@
+# Inset workspace
+
+**Audience:** Applications composing an inset sidebar workspace.
+
+## Summary
+
+- Use the same balanced inset for sidebar layouts.
+- Let navigation own rail padding, the shell own inset geometry, and one
+  content wrapper own page gutters.
+- Join the sidebar toolbar and main region into one surface; return to
+  edge-to-edge content and the native navigation drawer on mobile.
+
+The sidebar layout places navigation in a left rail and the route toolbar in
+`shell.topbar`, joined to the content canvas. The other layout, `topbar`, puts
+navigation above the content and the page toolbar inside `shell.main`.
+
+## One owner for each spacing decision
+
+| Region                                  | Owner                           | Default                                                                   |
+| --------------------------------------- | ------------------------------- | ------------------------------------------------------------------------- |
+| Navigation rail padding                 | `AppNavigation`                 | Keep its built-in padding; no additional rail wrapper                     |
+| Canvas gap from rail and viewport edges | `AppShell` composition          | Three space units at the canvas top, right, and bottom; no extra rail gap |
+| Page gutter                             | One `workspace-content` wrapper | Six space units on desktop, four on mobile                                |
+| Space between fields or sections        | The local `Flex`/`Grid`         | No second page gutter                                                     |
+
+With the default space token these are a 12px inset, 24px desktop gutter, and
+16px mobile gutter. The topbar uses the same 24px padding on all four sides. The rail uses only its built-in 12px padding, with no extra shell padding
+on the left or gap on the right. On mobile, hide the brand and place
+the title after the navigation button, with the action at the far right. Do not
+add padding to the shell sidebar, an outer page container, and the page itself.
+
+The content wrapper fills the canvas and owns only its gutter. Let tables use
+that width. Bound individual forms or reading regions with a centered
+`Container(size: :md)` or `Container(size: :lg)` inside the gutter; do not add
+a shared shell maximum width.
+
+## Compose the frame
+
+Use application-owned `data-ui` hooks. This is ordinary application CSS, not a
+new component option or a copied Nitro component. For a sidebar screen:
+
+```ruby
+AppShell(id: "workspace", layout: :sidebar, data: { ui: "inset-workspace" }) do |shell|
+  shell.brand { strong { "Studio" } }
+  shell.navigation do
+    AppNavigation(label: "Main navigation") do |navigation|
+      navigation.body do
+        navigation.item("Products", href: products_path, current: true)
+        navigation.spacer
+        navigation.item("Settings", href: settings_path)
+      end
+    end
+  end
+  shell.topbar do
+    Toolbar do |toolbar|
+      toolbar.leading { h1 { "Products" } }
+      toolbar.trailing { Button("New product", href: new_product_path, variant: :primary) }
+    end
+  end
+  shell.main do
+    div(data: { ui: "workspace-content" }) { render ProductsIndex.new(products:) }
+  end
+end
+```
+
+For `topbar`, put that Toolbar first inside `workspace-content` and omit
+`shell.topbar`. Keep one route title and one set of actions. The header and
+body in `sidebar` form one continuous canvas, not two stacked cards.
+
+Load this stylesheet after Nitro Kit:
+
+```css
+/* Application composition: navigation owns its rail padding, this shell owns
+   the inset, and workspace-content owns the only page gutter. */
+:where([data-ui="workspace-content"]) {
+  padding: calc(var(--nk-space) * 4);
+}
+@media (width >= 48rem) {
+  :where([data-ui="inset-workspace"]) {
+    --workspace-inset: calc(var(--nk-space) * 3);
+    --nk-app-shell-background: color-mix(
+      in oklab,
+      var(--nk-color-muted) 15%,
+      var(--nk-color-canvas)
+    );
+    --nk-app-shell-sidebar-background: transparent;
+    block-size: 100vh;
+    block-size: 100dvh;
+    padding: var(--workspace-inset) var(--workspace-inset) var(
+        --workspace-inset
+      ) 0;
+    grid-template-rows: auto minmax(0, 1fr);
+    column-gap: 0;
+    overflow: hidden;
+  }
+  :where([data-ui="inset-workspace"] > [data-slot="app-shell-sidebar"]) {
+    position: static;
+    block-size: 100%;
+    border: 0;
+  }
+  :where(
+      [data-ui="inset-workspace"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-brand"]
+    ) {
+    padding-inline: calc(var(--nk-space) * 6);
+    border: 0;
+  }
+  :where([data-ui="inset-workspace"] > [data-slot="app-shell-main"]) {
+    overflow: auto;
+    overscroll-behavior: contain;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-xl);
+    box-shadow: var(--nk-shadow-sm);
+  }
+  :where(
+      [data-ui="inset-workspace"][data-layout="sidebar"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-topbar"]
+    ) {
+    padding: calc(var(--nk-space) * 6);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-block-end: 0;
+    border-radius: var(--nk-radius-xl) var(--nk-radius-xl) 0 0;
+  }
+  :where(
+      [data-ui="inset-workspace"][data-layout="sidebar"]
+        > [data-slot="app-shell-main"]
+    ) {
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  :where([data-ui="workspace-content"]) {
+    padding: calc(var(--nk-space) * 6);
+  }
+}
+
+@media (width < 48rem) {
+  :where(
+      [data-ui="inset-workspace"]
+        > [data-slot="app-shell-header"]
+        > [data-slot="app-shell-brand"]
+    ) {
+    display: none;
+  }
+  :where(
+      [data-ui="inset-workspace"]
+        [data-slot="app-shell-topbar"]
+        > [data-nk="toolbar"]
+    ) {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+  :where([data-ui="inset-workspace"] [data-slot="toolbar-trailing"]) {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+}
+```
+
+Navigation, mobile disclosure, and focus restoration remain Nitro-owned.
+Application code owns the destinations and the composition. The public
+Product resource gallery runs the sidebar example with this stylesheet at
+`test/dummy/app/assets/stylesheets/inset_workspace.css`.
+
+## Verify the result
+
+At desktop width, check all four exposed gaps, one continuous rounded canvas,
+independent main scrolling, and no rail divider stranded in the inset. In dark
+mode the main surface must come forward from the quieter frame. At 390px,
+verify edge-to-edge content, no document overflow, visible title/actions, and
+a working navigation drawer. Include long route and navigation labels and
+both empty and long content; do not judge only a short empty screen.

data/docs/patterns/queryable_collection.md

@@ -1,18 +1,18 @@
 # Queryable collection
 
 **Audience:** Coding agents and developers implementing filters, sorting, and
-pagination with Turbo Frames.
+pagination with ordinary Rails GET requests and Turbo Drive.
 
 ## Summary
 
-- One GET-driven Turbo Frame owns filters, sorting, results, and pagination;
-  URL parameters are the state.
+- Default to ordinary GET forms and links with Turbo Drive for a full-page
+  collection. URL parameters are the state; keep Turbo's default caching.
 - An application query object owns allowlists, defaults, tenant scope, and page
   bounds; `NitroKit::Table` owns no query policy.
 - Pagination advances browser history; filters, reset, and sorting replace the
   current history entry.
-- Every response contains the same frame, including empty results; links that
-  leave the collection target `_top`.
+- Add a Turbo Frame only when the collection is an independently navigable
+  region of a larger page, not merely to make pagination feel faster.
 
 ## Query contract
 
@@ -33,59 +33,119 @@ query URL generation. It may expose `records`, `filters`, `current_sort`,
 `direction`, `sort_url(key)`, `pagination`, and `summary`. Ransack is one
 possible implementation, not a Nitro dependency.
 
-## Frame composition
+## Page composition
 
 ```ruby
-FRAME_ID = "projects-results"
-
-turbo_frame_tag(FRAME_ID, data: { turbo_action: "advance" }) do
-  form_with(
-    scope: :q,
-    url: projects_path,
-    method: :get,
-    builder: NitroKit::FormBuilder,
-    data: { turbo_frame: FRAME_ID, turbo_action: "replace" }
-  ) do |form|
-    form.group do
-      form.field(:name_cont, as: :search, label: "Search")
-      form.submit("Apply filters")
+form_with(
+  scope: :q,
+  url: projects_path,
+  method: :get,
+  builder: NitroKit::FormBuilder,
+  data: { turbo_action: "replace" }
+) do |form|
+  form.group do
+    form.field(:name_cont, as: :search, label: "Search")
+    form.submit("Apply filters")
+  end
+end
+
+render NitroKit::Table.new(
+  sort: query.current_sort,
+  direction: query.direction
+) do |table|
+  table.caption("Projects")
+  table.thead do
+    table.tr do
+      table.th(:name, sort: :name, href: query.sort_url(:name),
+        sort_data: { turbo_action: "replace" })
     end
   end
+  table.tbody do
+    query.records.each { |project| render_project_row(table, project) }
+  end
+end
+
+render NitroKit::PaginationBar.new do |bar|
+  bar.summary(query.summary)
+  bar.pagination(query.pagination)
+end
+```
+
+Reset with the plain collection URL so stale parameters disappear. Sort,
+filter, and reset controls may use `turbo_action: "replace"` to avoid filling
+history with refinements; pagination uses ordinary links and advances history.
+No result frame, frame targets, cache opt-out, or custom JavaScript is needed.
+Optional autosubmit may call the same GET form's `requestSubmit`.
+
+## When a frame is useful
+
+For an independent collection within a larger page, wrap the region in a
+stable `turbo_frame_tag("projects-results", data: { turbo_action: "advance" })`.
+Return that frame for populated and empty responses, and target `_top` on
+links that should open complete pages. Exercise repeated refinements followed
+by pagination and Back/Forward, checking actual rows and controls as well as
+the URL. Do not disable Turbo caching just to make a flaky history test pass;
+first distinguish preview/test timing from an incorrect restored snapshot.
 
-  render NitroKit::Table.new(
-    sort: query.current_sort,
-    direction: query.direction
-  ) do |table|
-    table.caption("Projects")
-    table.thead do
+## Keep tables intact at every viewport
+
+Every Table owns a horizontal scroll wrapper. Keep all columns and row actions
+in their desktop arrangement on mobile; scroll the table instead of hiding
+columns, stacking buttons, or forcing narrow column widths. Cells preserve
+unbroken labels so controls retain their intrinsic size.
+
+This complete table uses application-owned hooks. Adapt the fields and routes,
+then load the accompanying CSS after Nitro Kit:
+
+```ruby
+Table(data: { ui: "resource-table" }, table_aria: { label: "Projects" }) do |table|
+  table.thead do
+    table.tr do
+      table.th("Project", data: { resource_column: "name" })
+      table.th("Status", data: { resource_column: "status" })
+      table.th("Updated", data: { resource_column: "secondary" })
+      table.th("Actions", data: { resource_column: "actions" })
+    end
+  end
+  table.tbody do
+    projects.each do |project|
       table.tr do
-        table.th(:name, sort: :name, href: query.sort_url(:name),
-          sort_data: { turbo_action: "replace" })
+        table.th(project.name, scope: :row, data: { resource_column: "name" })
+        table.td(data: { resource_column: "status" }) do
+          Badge(project.archived? ? "Archived" : "Active", size: :sm)
+        end
+        table.td(project.updated_at.to_date.to_fs(:long), data: { resource_column: "secondary" })
+        table.td(data: { resource_column: "actions" }) do
+          Flex(dir: :row, gap: 1, align: :stretch, justify: :end) do
+            Button("View", href: project_path(project), size: :sm)
+            Button("Edit", href: edit_project_path(project), size: :sm)
+          end
+        end
       end
     end
-    table.tbody do
-      query.records.each { |project| render_project_row(table, project) }
-    end
-  end
-
-  render NitroKit::PaginationBar.new do |bar|
-    bar.summary(query.summary)
-    bar.pagination(query.pagination)
   end
 end
 ```
 
-Reset with the plain collection URL so stale parameters disappear. Sort and
-filter controls use `turbo_action: "replace"`; pagination inherits the frame's
-`advance`. Give View, Edit, and New links
-`data: { turbo_frame: "_top" }` or place them outside the frame.
+```css
+/* Table owns horizontal scrolling; record names keep their secondary line. */
+:where([data-ui="resource-table"] tbody [data-resource-column="name"] > *) {
+  display: block;
+}
+```
 
-No Stimulus controller is required. Optional autosubmit may call the same GET
-form's `requestSubmit`; the URL remains the source of truth.
+The public Product resource gallery runs this composition. Table provides the
+scroll wrapper automatically; no extra overflow wrapper is needed.
 
 ## Tests
 
 Request-test parameter preservation, safe fallback for invalid sort keys, and
-the stable frame in populated and empty responses. System-test filter → sort →
-paginate → Back/Forward, address-bar changes, and a row link leaving the frame.
-Use Capybara waiting assertions, not sleeps.
+populated and empty responses. System-test repeated filter → sort →
+paginate → Back/Forward, restored controls and rows, address-bar changes, and
+full-page row links. A correct URL alone does not prove restoration worked.
+When a visit displays a cached preview, wait for `html[data-turbo-preview]` to
+disappear before entering fields or submitting another form. Keep caching
+enabled in the test.
+Use Capybara waiting assertions, not sleeps. At 390px, assert that the page stays within the viewport and the table scrolls
+horizontally to reveal intact row actions, including a long unbroken resource
+name and a multi-word status. Repeat in light and dark appearances.

data/docs/patterns/resource_form.md

@@ -15,6 +15,12 @@ and update forms.
 
 ## Form
 
+Use one full-width column of fields inside a centered `Container(size: :lg)`
+for ordinary resource forms. A `Fieldset` puts its legend above the controls.
+Reserve the two-column `SettingsSection` for settings pages with enough room
+for both explanatory text and fields; nesting it in a narrow form container
+squeezes the controls.
+
 ```ruby
 module UI
   class ProjectForm < Phlex::HTML
@@ -26,18 +32,16 @@ module UI
     end
 
     def view_template
-      render NitroKit::SettingsSection.new(title: "Project details") do |section|
-        section.form do
-          form_with(
-            model: @project,
-            builder: NitroKit::FormBuilder,
-            id: @form_id
-          ) do |form|
-            form.group do
-              form.field(:name, required: true)
-              form.field(:status, as: :select, options: Project.statuses.keys)
-              form.field(:description, as: :textarea)
-            end
+      render NitroKit::Container.new(size: :lg) do
+        form_with(
+          model: @project,
+          builder: NitroKit::FormBuilder,
+          id: @form_id
+        ) do |form|
+          form.fieldset(legend: "Project details") do
+            form.field(:name, required: true)
+            form.field(:status, as: :select, options: Project.statuses.keys)
+            form.field(:description, as: :textarea)
           end
         end
       end

data/docs/rails_integration.md

@@ -12,7 +12,7 @@ There are no `nk_form_with` helpers or general ERB component bridge.
 Pin the current prerelease:
 
 ```ruby
-gem "nitro_kit", "2.0.0.alpha.4"
+gem "nitro_kit", "2.0.0.alpha.6"
 ```
 
 Use the released gem and commit `Gemfile` with `Gemfile.lock`. Before upgrading,