nitro_kit 2.0.0.alpha.5 → 2.0.0.beta.1

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.5"
+gem "nitro_kit", "2.0.0.beta.1"
 ```
 
 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.5"
+gem "nitro_kit", "2.0.0.beta.1"
 ```
 
 Use the released gem and commit `Gemfile` with `Gemfile.lock`. Before upgrading,

data/lib/nitro_kit/version.rb

@@ -1,3 +1,3 @@
 module NitroKit
-  VERSION = "2.0.0.alpha.5"
+  VERSION = "2.0.0.beta.1"
 end

data/plugins/nitro-kit/skills/nitro-kit-hotwire/SKILL.md

@@ -58,7 +58,7 @@ Keep frames around complete resource or collection regions, not individual butto
 - Do not describe that HTML branch as a JavaScript-free interaction when its
   control still depends on Turbo or a closed overlay.
 - Let GET query parameters be the source of truth for filtering, sorting, and pagination.
-- Use native Nitro Dialog behavior for reviewed destructive actions. Use `data: { turbo_confirm: ... }` for compact confirmations that do not need a dialog.
+- Use Nitro Dialog for destructive confirmations, including short delete, remove, and revoke flows. Put the real Rails form inside the dialog; do not add `turbo_confirm`. Follow `docs/patterns/destructive_action.md`.
 - Render flash through `NitroKit::Toast::FlashMessages`; the application owns setting the flash.
 
 ## Preserve ownership
@@ -81,3 +81,8 @@ before changing application code. Disable Chrome's background throttling or
 use a test-only `requestAnimationFrame` shim when necessary. Never ship that
 workaround in the application or replace a conventional Turbo flow to satisfy
 one browser driver.
+
+For a full-page CRUD index, default to ordinary GET forms and links with Turbo
+Drive and normal caching. Use Frames for independently navigable regions.
+History tests must check restored rows and controls, not just the URL, and
+wait past `html[data-turbo-preview]` before interacting with a new page.

data/plugins/nitro-kit/skills/nitro-kit-rails/SKILL.md

@@ -65,7 +65,7 @@ contract as a substitute for the installed API.
 - Render HTML on the server and add Hotwire progressively.
 - Set the document language on the root `html` element.
 - Test with Minitest and fixtures, including tenancy and unhappy paths.
-- In authenticated admin areas, default to a hybrid `AppShell` with the route's
+- In authenticated admin areas, default to a sidebar `AppShell` with the route's
   one `h1` and basic actions in its `Toolbar`. Keep one page gutter and avoid
   repeated headings or automatic Card wrappers. At narrow widths, let trailing
   actions stack below a Back affordance and title instead of clipping the title

data/plugins/nitro-kit/skills/nitro-kit-ui/SKILL.md

@@ -55,9 +55,13 @@ If the gem is not installed, say that the skill requires Nitro Kit and follow th
 5. Keep routes, authorization, records, query policy, DOM IDs, Turbo boundaries, and response semantics in the application.
 6. Translate the application's semantic theme into documented `--nk-*` properties instead of choosing similar raw palette values. Use `--nk-button-radius` when Button shape intentionally differs from inputs and surfaces.
 7. Verify closed options and required compound declarations before rendering.
-8. For authenticated CRUD, prefer a hybrid `AppShell` with a `Toolbar` that
+8. For authenticated CRUD, prefer a sidebar `AppShell` with a `Toolbar` that
    owns the route's single `h1` and basic actions. The shell main region owns
-   one content gutter. Do not repeat that heading in `PageHeader`, or wrap each
+   one content gutter, not a universal maximum width. Tables fill the canvas;
+   form and reading pages may use a centered Container inside that gutter.
+   Simple resource forms use a single-column Fieldset in Container lg so fields
+   use the available width; reserve split SettingsSections for roomy settings pages.
+   Do not repeat that heading in `PageHeader`, or wrap each
    table, form, and detail region in another Card. At narrow widths, preserve
    the full title and persistent actions by stacking the trailing actions below
    the title rather than clipping either region.
@@ -92,3 +96,7 @@ completeness. Do not use a green Doctor result as proof that every relevant
 screen, state, or catalog workflow has been implemented.
 
 For a migration, Doctor is an inventory, not visual proof. Run representative form and component rendering with `ActiveModel::Translation.raise_on_missing_translations` enabled when the application uses strict i18n. Compare the same representative flows in a browser at wide and narrow widths, exercise keyboard focus, and inspect computed styles for missing application classes, stacked Button content, broken compound corners, double focus rings, clipping, and theme drift. Re-audit rendered native buttons, Rails button helpers, and application-owned button classes before declaring the conversion complete. Search the whole application for `desperately_need_a_class:` and review every result, aiming for zero. Move layout and visual treatment to application-owned wrappers, remove generic class forwarding, accept incidental Nitro defaults, and keep unmatched product UI application-owned; retain only documented external-integration hooks.
+
+Use Nitro Dialog for destructive confirmations, including simple deletion,
+member removal, and invitation revocation. Read `docs/patterns/destructive_action.md`;
+do not substitute native browser confirmation for short messages.