kaze 1.3.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 634436bd289b2a1cd2dfbab0a0f0ae2e4c4490d26cc5e6b4156ad382471eccf4
-  data.tar.gz: 1467cca2c81b4af1579a576f1e204c119e7220db5e08405fa0c15585545e07b7
+  metadata.gz: 858087e59b76bb15ec6cc06701b2ba201c4aacb12cf592cdfbc37f1304b805c1
+  data.tar.gz: ed23682c9b61226b8201240b0b43e41a660f1745d986c2f4e1b6644aa4d26003
 SHA512:
-  metadata.gz: 52a79402f90898407a6f4a450e64fbbf19bb4980e5d5ce5fa452debafff0029226de9da94c220074a59412834b76f94554b282d721d0eba2624ad65472252f27
-  data.tar.gz: 1b42a36de58fdc0ab68c45fae9b797900affe91097899c17710a4e3dea23fd95c56ccbf278225f714c4d49a3e2125ef1b080e895593b79337c564e9a742e2b5e
+  metadata.gz: 888b37a89b65ee26046232a7f9dffcbe028500726c7082911ed74eea0dd4fe27f78d640661e6847d2ace7921544dfe8df67b4c28688ef6dfb00f3f7b140094a8
+  data.tar.gz: db51173dd6dc0e73686a13df9e4bc0af2afdb50fdde496c43c98860e818d64a0171b9d50142b1d824aa8a89bec4a77657642cc80edbfe072f0274a01436ec736

data/CHANGELOG.md

@@ -6,6 +6,75 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [2.0.0] - 2026-10-22
+
+### Added
+
+- The frontend is rebuilt on [shadcn/ui](https://ui.shadcn.com), following Laravel's [react](https://github.com/laravel/react-starter-kit) and [vue](https://github.com/laravel/vue-starter-kit) starter kits ([#27](https://github.com/cuonggt/kaze/pull/27), [#28](https://github.com/cuonggt/kaze/pull/28), [#29](https://github.com/cuonggt/kaze/pull/29), [#30](https://github.com/cuonggt/kaze/pull/30), [#31](https://github.com/cuonggt/kaze/pull/31), [#32](https://github.com/cuonggt/kaze/pull/32), [#33](https://github.com/cuonggt/kaze/pull/33), [#34](https://github.com/cuonggt/kaze/pull/34)). shadcn copies source into the project rather than shipping a package, which is how Kaze already works, so the primitives are vendored into `Components/ui` and are yours to edit.
+
+  A design token layer comes with it. Colour is now `bg-background`, `text-muted-foreground`, `border-sidebar-border` and so on, resolving through oklch variables defined once per stylesheet, instead of `bg-white dark:bg-gray-800` repeated per element. A `components.json` records the aliases so `npx shadcn@latest add <component>` lands in the right place — note that Kaze uses a capitalised `@/Components`, which that file already reflects.
+
+  Thirteen primitives for each Inertia stack: button, input, label, checkbox, dialog, dropdown-menu, separator, skeleton, sheet, tooltip, avatar, breadcrumb and sidebar, plus a `cn` helper in `lib/utils`. React builds on Radix, Vue on reka-ui.
+
+- A collapsible sidebar replaces the top navigation bar in all three stacks. It collapses to icons, becomes a drawer below `md`, and remembers its state in a `sidebar_state` cookie that the server reads back, so the first paint matches the last choice rather than flashing open.
+
+  There is no shadcn for Hotwire, so its sidebar is hand-rolled in Alpine and ERB against the same tokens, with the lucide icons inlined through a new `IconComponent` since Hotwire has no npm.
+
+- A settings area at `/settings/profile`, `/settings/password` and `/settings/appearance`, replacing the single profile page ([#35](https://github.com/cuonggt/kaze/pull/35), [#36](https://github.com/cuonggt/kaze/pull/36)). `/settings` redirects to the profile page. Each has its own breadcrumb and page title, and the delete-account form stays on the profile page.
+
+### Changed
+
+- **The profile page has moved and its routes with it.** `/profile` is now `/settings/profile`, and password updates post to `/settings/password` rather than to the profile page. The route helper names are unchanged — `profile_edit_path` still exists, it just points somewhere new — so an application that uses the helpers rather than hard-coded paths needs no edit. `password_edit_path` and `appearance_edit_path` are new. `ProfileController` and `PasswordController` become `Settings::ProfileController`, `Settings::PasswordController` and `Settings::AppearanceController`.
+
+- The `dark` variant is redefined, in all three stylesheets:
+
+  ```css
+  /* was */ @custom-variant dark (&:where(.dark, .dark *));
+  /* now */ @custom-variant dark (&:is(.dark *));
+  ```
+
+  `:where()` contributes no specificity, so a `dark:` utility tied with its light counterpart and won or lost on the order Tailwind happened to emit them in — `dark:text-black` lost to `text-white` on the same element. `:is()` gives the variant the higher specificity, which is what Laravel's kits use. If you have written a `dark:` override that was silently losing, it will now apply; if you wrote one that depended on losing, it will not.
+
+- The Vue stack pins `typescript` to `^5.9.3`, down from `^7.0.2` ([#30](https://github.com/cuonggt/kaze/pull/30)). `@vue/compiler-sfc` needs filesystem access to resolve prop types that cross a package boundary, which the vendored primitives do, and the resolver it uses is not compatible with TypeScript 7. The React stack stays on 7.
+
+### Removed
+
+- The hand-rolled components the shadcn primitives replace: `PrimaryButton`, `SecondaryButton`, `DangerButton`, `TextInput`, `InputLabel`, `Checkbox`, `Modal`, `Dropdown`, `NavLink` and `ResponsiveNavLink` from both Inertia stacks, `DropdownLink` from the Vue stack, and `NavLinkComponent` and `ResponsiveNavLinkComponent` from Hotwire. The buttons, inputs and labels map onto `Button`, `Input` and `Label` with a variant; the navigation links have no successor, because the sidebar replaced what used them.
+
+### Fixed
+
+- `kaze install` exits non-zero when it fails. Every step is guarded, so the installer already stopped at the first failure and withheld its success message — but the process still exited 0, so a script or CI job saw a green step over a half-installed application. This is the same class of silent failure as [#11](https://github.com/cuonggt/kaze/issues/11), in the exit code rather than the output. Anything that runs `kaze install` unattended and currently passes over a failure will now fail, which is the point.
+
+### Upgrading
+
+Kaze scaffolds rather than vendors, so nothing changes under an existing application on its own. Re-running `kaze install` over one built with 1.4.0 or earlier does **not** remove what this release replaced — the installer copies files in and never deletes, deliberately, since by then they are yours and may be edited. The replaced files are left behind for you to delete:
+
+| stack | left behind |
+|---|---|
+| all | `app/controllers/profile_controller.rb`, `app/controllers/password_controller.rb` |
+| react, vue | `app/javascript/Components/{PrimaryButton,SecondaryButton,DangerButton,TextInput,InputLabel,Checkbox,Modal,Dropdown,NavLink,ResponsiveNavLink}`, `DropdownLink` on vue, and the whole of `app/javascript/Pages/Profile/` |
+| hotwire | `app/components/{nav_link,responsive_nav_link}_component.rb`, `app/views/layouts/_navigation.html.erb`, and the whole of `app/views/profile/` |
+
+On the React stack this is not optional: `tsc` typechecks every file under `app/javascript`, and the stale `Pages/Profile/Edit.tsx` still passes a `header` prop that the layout no longer takes, so the build fails until that directory is gone. Vue and Hotwire build and run with the stale files in place — they are dead weight rather than a break, since nothing routes to them any more.
+
+## [1.4.0] - 2026-10-21
+
+### Added
+
+- An appearance preference — light, dark or system — on the profile page of all three stacks ([#26](https://github.com/cuonggt/kaze/pull/26)). The stubs already carried 315 `dark:` classes, but nothing could reach them: `dark:` followed `prefers-color-scheme`, so an application took whatever the operating system said. The choice is stored in `localStorage`, and system follows the device and tracks it live.
+
+  Each stylesheet now redefines the variant, since Tailwind v4 no longer configures dark mode in JavaScript:
+
+  ```css
+  @custom-variant dark (&:where(.dark, .dark *));
+  ```
+
+  The layouts apply the resulting `dark` class in an inline `<head>` script before first paint, so the page never flashes the wrong theme. A consequence worth knowing: the theme now depends on JavaScript, so with scripting disabled an application always renders light where it previously followed the operating system.
+
+### Fixed
+
+- Dark mode gaps that were already broken for anyone whose operating system was set to dark, and which the preference control made obvious. React's `AuthenticatedLayout` carried one `dark:` class where Vue's had fifteen, leaving a white navigation bar and header above a dark page; the missing variants are ported from the Vue layout. Four wrappers lacked `dark:bg-gray-900`, leaving a light grey page behind dark cards — hotwire's application layout, React's `AuthenticatedLayout` and `GuestLayout`, and the Inertia ERB wrappers for both stacks.
+
 ## [1.3.1] - 2026-10-21
 
 ### Changed
@@ -108,7 +177,9 @@ Together these take a freshly scaffolded Inertia application from seven npm advi
 
 Releases before 1.0.0 are not catalogued here. See the [tags](https://github.com/cuonggt/kaze/tags) for their history.
 
-[Unreleased]: https://github.com/cuonggt/kaze/compare/v1.3.1...HEAD
+[Unreleased]: https://github.com/cuonggt/kaze/compare/v2.0.0...HEAD
+[2.0.0]: https://github.com/cuonggt/kaze/compare/v1.4.0...v2.0.0
+[1.4.0]: https://github.com/cuonggt/kaze/compare/v1.3.1...v1.4.0
 [1.3.1]: https://github.com/cuonggt/kaze/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/cuonggt/kaze/compare/v1.2.1...v1.3.0
 [1.2.1]: https://github.com/cuonggt/kaze/compare/v1.2.0...v1.2.1

data/README.md

@@ -4,7 +4,7 @@
 
 Heavily inspired by [Laravel Breeze](https://github.com/laravel/breeze), this gem offers authentication and application starter kits to give you a head start building your new [Rails](https://rubyonrails.org) application. These kits automatically scaffold your application with the routes, controllers, and views you need to register and authenticate your application's users.
 
-[Kaze](https://github.com/cuonggt/kaze) is a opinionated minimal, simple implementation of all authentication features that a modern web application should have, including login, registration, password reset, email verification. In addition, Kaze includes a simple "profile" page where the user may update their name, email address, and password.
+[Kaze](https://github.com/cuonggt/kaze) is a opinionated minimal, simple implementation of all authentication features that a modern web application should have, including login, registration, password reset, email verification. In addition, Kaze includes a settings area where the user may update their name and email address, change their password, choose an appearance, and delete their account.
 
 Kaze provides scaffolding options based on [Hotwire](https://hotwired.dev) or [Inertia](https://inertiajs.com), with the choice of using Vue or React for the Inertia-based scaffolding.
 

data/lib/kaze/commands/app/hotwire_stack.rb

@@ -60,5 +60,7 @@ class Kaze::Commands::App::HotwireStack < Kaze::Commands::App::BaseStack
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green
+
+    true
   end
 end

data/lib/kaze/commands/app/inertia_react_stack.rb

@@ -56,6 +56,7 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     ensure_directory_exists("#{Dir.pwd}/config/initializers")
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/initializers/inertia_rails.rb", "#{Dir.pwd}/config/initializers/inertia_rails.rb")
+    FileUtils.copy_file("#{stubs_path}/inertia-react-ts/components.json", "#{Dir.pwd}/components.json")
     FileUtils.copy_file("#{stubs_path}/inertia-react-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{stubs_path}/inertia-react-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
     FileUtils.copy_file("#{stubs_path}/default/bin/dev", "#{Dir.pwd}/bin/dev")
@@ -63,7 +64,8 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     replace_in_file('#vite: bin/vite dev', 'vite: bin/vite dev', "#{Dir.pwd}/Procfile.dev")
     run_command("#{Dir.pwd}/bin/rails generate js_routes:middleware")
-    return unless run_command("#{Dir.pwd}/bin/rails tailwindcss:build").success?
+    # The CSS is built by `npm run build` below, once node_modules exists --
+    # the stylesheet imports tw-animate-css, which cannot resolve before then.
 
     say ''
     say 'Installing and building Node dependencies.', :magenta
@@ -83,5 +85,7 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green
+
+    true
   end
 end

data/lib/kaze/commands/app/inertia_vue_stack.rb

@@ -56,6 +56,7 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     ensure_directory_exists("#{Dir.pwd}/config/initializers")
     FileUtils.copy_file("#{stubs_path}/inertia-common/config/initializers/inertia_rails.rb", "#{Dir.pwd}/config/initializers/inertia_rails.rb")
+    FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/components.json", "#{Dir.pwd}/components.json")
     FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{stubs_path}/inertia-vue-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
     FileUtils.copy_file("#{stubs_path}/default/bin/dev", "#{Dir.pwd}/bin/dev")
@@ -63,7 +64,8 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
     FileUtils.copy_file("#{stubs_path}/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     replace_in_file('#vite: bin/vite dev', 'vite: bin/vite dev', "#{Dir.pwd}/Procfile.dev")
     run_command("#{Dir.pwd}/bin/rails generate js_routes:middleware")
-    return unless run_command("#{Dir.pwd}/bin/rails tailwindcss:build").success?
+    # The CSS is built by `npm run build` below, once node_modules exists --
+    # the stylesheet imports tw-animate-css, which cannot resolve before then.
 
     say ''
     say 'Installing and building Node dependencies.', :magenta
@@ -83,5 +85,7 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
 
     say ''
     say 'Kaze scaffolding installed successfully.', :green
+
+    true
   end
 end

data/lib/kaze/commands/app.rb

@@ -7,11 +7,18 @@ class Kaze::Commands::App < Thor
 
   desc 'install [STACK]', 'Install the Kaze controllers and resources. Supported stacks: hotwire, react, vue.'
   def install(stack = 'hotwire')
-    return say 'Kaze must be run in a new Rails application.', :red unless File.exist?("#{Dir.pwd}/bin/rails")
+    unless File.exist?("#{Dir.pwd}/bin/rails")
+      say 'Kaze must be run in a new Rails application.', :red
+      exit 1
+    end
 
-    StackFactory.make(stack.to_sym).install
+    # The stack installers stop at the first step that fails, so a falsy return
+    # means the application is half-installed. Exiting non-zero keeps that from
+    # passing silently in a script or a CI job.
+    exit 1 unless StackFactory.make(stack.to_sym).install
   rescue => e
     say e.message, :red
+    exit 1
   end
 
   desc 'version', 'Show Kaze version'

data/lib/kaze/version.rb

@@ -1,3 +1,3 @@
 module Kaze
-  VERSION = '1.3.1'
+  VERSION = '2.0.0'
 end

data/stubs/default/config/routes.rb

@@ -23,9 +23,16 @@ Rails.application.routes.draw do
 
   get 'dashboard', to: 'dashboard#index', as: :dashboard
 
-  get 'profile', to: 'profile#edit', as: :profile_edit
-  patch 'profile', to: 'profile#update', as: :profile_update
-  delete 'profile', to: 'profile#destroy', as: :profile_destroy
+  get 'settings', to: redirect('/settings/profile')
 
-  put 'password', to: 'password#update', as: :password_update
+  scope 'settings', module: 'settings' do
+    get 'profile', to: 'profile#edit', as: :profile_edit
+    patch 'profile', to: 'profile#update', as: :profile_update
+    delete 'profile', to: 'profile#destroy', as: :profile_destroy
+
+    get 'password', to: 'password#edit', as: :password_edit
+    put 'password', to: 'password#update', as: :password_update
+
+    get 'appearance', to: 'appearance#edit', as: :appearance_edit
+  end
 end

data/stubs/default/test/integration/appearance_test.rb

@@ -0,0 +1,11 @@
+require 'test_helper'
+
+class AppearanceTest < ActionDispatch::IntegrationTest
+  test 'appearance page is displayed' do
+    user = FactoryBot.create(:user)
+
+    acting_as(user).get appearance_edit_path
+
+    assert_response :success
+  end
+end

data/stubs/default/test/integration/password_update_test.rb

@@ -1,6 +1,14 @@
 require 'test_helper'
 
 class PasswordUpdateTest < ActionDispatch::IntegrationTest
+  test 'password page is displayed' do
+    user = FactoryBot.create(:user)
+
+    acting_as(user).get password_edit_path
+
+    assert_response :success
+  end
+
   test 'password can be updated' do
     user = FactoryBot.create(:user)
 
@@ -10,7 +18,7 @@ class PasswordUpdateTest < ActionDispatch::IntegrationTest
       password_confirmation: 'new-password'
     }
 
-    assert_redirected_to profile_edit_path
+    assert_redirected_to password_edit_path
     assert BCrypt::Password.new(user.reload.password_digest).is_password?('new-password')
   end
 

data/stubs/hotwire/app/assets/tailwind/application.css

@@ -1,5 +1,128 @@
 @import "tailwindcss";
 
+/* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
+   appearance preference can override the operating system. The layouts apply
+   the class before first paint. */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.87 0 0);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.87 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @plugin "@tailwindcss/forms";
 
 @source "../../../public/*.html";

data/stubs/hotwire/app/components/breadcrumbs_component.rb

@@ -0,0 +1,32 @@
+# The trail in the sidebar header. Takes [{ title:, href: }], where the last
+# entry is the current page and is not a link.
+class BreadcrumbsComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <nav aria-label="breadcrumb">
+      <ol class="flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5">
+        <% @items.each_with_index do |item, index| %>
+          <li class="inline-flex items-center gap-1.5">
+            <% if index == @items.length - 1 %>
+              <span class="font-normal text-foreground" aria-current="page"><%= item[:title] %></span>
+            <% else %>
+              <a href="<%= item[:href] %>" class="transition-colors hover:text-foreground"><%= item[:title] %></a>
+            <% end %>
+          </li>
+          <% unless index == @items.length - 1 %>
+            <li role="presentation" aria-hidden="true">
+              <%= render(IconComponent.new('chevron-right', classes: 'size-3.5')) %>
+            </li>
+          <% end %>
+        <% end %>
+      </ol>
+    </nav>
+  ERB
+
+  def initialize(items)
+    @items = items
+  end
+
+  def render?
+    @items.present?
+  end
+end

data/stubs/hotwire/app/components/danger_button_component.rb

@@ -7,7 +7,7 @@ class DangerButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'submit'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] h-9 px-4 py-2 bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/dropdown_component.html.erb

@@ -9,10 +9,10 @@
     x-transition:leave="transition ease-in duration-75"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-95"
-    class="absolute z-50 mt-2 <%= @width %> rounded-md shadow-lg <%= @alignment_classes %>"
+    class="absolute z-50 <%= @side_classes %> <%= @width %> rounded-md shadow-lg <%= @alignment_classes %>"
     style="display: none;"
     x-on:click="open = false">
-    <div class="rounded-md ring-1 ring-black ring-opacity-5 <%= @content_classes %>">
+    <div class="rounded-md border shadow-md <%= @content_classes %>">
       <%= content %>
     </div>
   </div>

data/stubs/hotwire/app/components/dropdown_component.rb

@@ -1,7 +1,10 @@
 class DropdownComponent < ViewComponent::Base
   renders_one :trigger
 
-  def initialize(align: 'right', width: '48', content_classes: 'py-1 bg-white dark:bg-gray-700')
+  # `side` is which way the menu opens off the trigger. The sidebar's user row
+  # sits at the foot of the viewport, so it opens upwards; everything else
+  # opens downwards.
+  def initialize(align: 'right', side: 'bottom', width: '48', content_classes: 'p-1 bg-popover text-popover-foreground')
     if align == 'left'
       @alignment_classes = 'ltr:origin-top-left rtl:origin-top-right start-0'
     elsif align == 'top'
@@ -9,6 +12,7 @@ class DropdownComponent < ViewComponent::Base
     else
       @alignment_classes = 'ltr:origin-top-right rtl:origin-top-left end-0'
     end
+    @side_classes = side == 'top' ? 'bottom-full mb-2' : 'mt-2'
     @width = width == '48' ? 'w-48' : width
     @content_classes = content_classes
   end

data/stubs/hotwire/app/components/dropdown_link_component.rb

@@ -6,7 +6,7 @@ class DropdownLinkComponent < ViewComponent::Base
   ERB
 
   def initialize(attributes = {})
-    attributes[:class] = "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-hidden select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/heading_component.rb

@@ -0,0 +1,19 @@
+# A section heading with an optional description. `small` is the variant the
+# settings pages use above each form.
+class HeadingComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <header class="<%= @header_classes %>">
+      <h2 class="<%= @title_classes %>"><%= @title %></h2>
+      <% if @description %>
+        <p class="text-sm text-muted-foreground"><%= @description %></p>
+      <% end %>
+    </header>
+  ERB
+
+  def initialize(title:, description: nil, variant: 'default')
+    @title = title
+    @description = description
+    @header_classes = variant == 'small' ? '' : 'mb-8 space-y-0.5'
+    @title_classes = variant == 'small' ? 'mb-0.5 text-base font-medium' : 'text-xl font-semibold tracking-tight'
+  end
+end

data/stubs/hotwire/app/components/icon_component.rb

@@ -0,0 +1,30 @@
+# Inlines the lucide icons the layouts use. The Inertia stacks get these from
+# the lucide package; there is no npm here, so the paths are carried by hand.
+# Each entry is the body of lucide's 24x24 outline svg.
+class IconComponent < ViewComponent::Base
+  PATHS = {
+    "book-open" => '<path d="M12 5v16" /><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z" />',
+    "chevron-right" => '<path d="m9 18 6-6-6-6" />',
+    "chevrons-up-down" => '<path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" />',
+    "folder-git-2" => '<path d="M18 19a5 5 0 0 1-5-5v8" /><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" /><circle cx="13" cy="12" r="2" /><circle cx="20" cy="19" r="2" />',
+    "layout-grid" => '<rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" />',
+    "log-out" => '<path d="m16 17 5-5-5-5" /><path d="M21 12H9" /><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />',
+    "monitor" => '<rect width="20" height="14" x="2" y="3" rx="2" /><line x1="8" x2="16" y1="21" y2="21" /><line x1="12" x2="12" y1="17" y2="21" />',
+    "moon" => '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />',
+    "panel-left-close" => '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /><path d="m16 15-3-3 3-3" />',
+    "panel-left-open" => '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /><path d="m14 9 3 3-3 3" />',
+    "settings" => '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />',
+    "sun" => '<circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />'
+  }.freeze
+
+  erb_template <<~ERB
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+      class="<%= @classes %>" aria-hidden="true"><%= @path %></svg>
+  ERB
+
+  def initialize(name, classes: "size-4")
+    @path = PATHS.fetch(name) { raise ArgumentError, "unknown icon: #{name}" }.html_safe
+    @classes = classes
+  end
+end

data/stubs/hotwire/app/components/input_error_component.rb

@@ -1,7 +1,7 @@
 class InputErrorComponent < ViewComponent::Base
   erb_template <<~ERB
     <div <%= sanitize @attributes.join(" ") %>>
-      <p class="text-sm text-red-600 dark:text-red-400">
+      <p class="text-sm text-destructive">
         <%= @message %>
       </p>
     </div>

data/stubs/hotwire/app/components/input_label_component.rb

@@ -1,13 +1,13 @@
 class InputLabelComponent < ViewComponent::Base
   erb_template <<~ERB
-    <a <%= sanitize @attributes.join(" ") %>>
+    <label <%= sanitize @attributes.join(" ") %>>
       <%= @value ? @value : content %>
-    </a>
+    </label>
   ERB
 
   def initialize(attributes = {})
     @value = attributes[:value] || nil
-    attributes[:class] = "block font-medium text-sm text-gray-700 dark:text-gray-300#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.without(:value).map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/modal_component.html.erb

@@ -42,11 +42,11 @@
     x-transition:leave="ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">
-    <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
+    <div class="absolute inset-0 bg-black/80"></div>
   </div>
   <div
     x-show="show"
-    class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full <%= @max_width %> sm:mx-auto"
+    class="mb-6 bg-background border rounded-lg overflow-hidden shadow-lg transform transition-all sm:w-full <%= @max_width %> sm:mx-auto"
     x-transition:enter="ease-out duration-300"
     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"

data/stubs/hotwire/app/components/primary_button_component.rb

@@ -7,7 +7,7 @@ class PrimaryButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'submit'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/secondary_button_component.rb

@@ -7,7 +7,7 @@ class SecondaryButtonComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     attributes[:type] = attributes[:type] || 'button'
-    attributes[:class] = "inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] h-9 px-4 py-2 border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end