kaze 1.4.0 → 2.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc7bad365960dce77e78e930ea414a8bdcf3d03887393200bfde19a7c0299fe4
-  data.tar.gz: 7f3a5dffd4210452b1a3da62604e1d4b060c9659b9d596c10778db420b5fc034
+  metadata.gz: e59ed35aebe912f3109e4cf1937daa83a61d11235e2052d4d148c4d67f29fd52
+  data.tar.gz: 0c5844feaa1dd744199e50af4aecbb0f53ca8f5ea2a6060b6362b124f16a8762
 SHA512:
-  metadata.gz: cc6441a4bae8a2e94d4662a00d2c4dc302cfe9b425b15f112f7c9fdb1d0cf218d860fdcf503bf2d5f4bb92e66b0bf1b7cccf517b663606a2535a48a8a53d0853
-  data.tar.gz: ed22d4a753d6a7acdc48d59ca3ef0c76838129a467811ca52c608db891e9c9ecde792ebb37765bed82a635837ce51498dca10607da8a3ddf76374aef7b4bf986
+  metadata.gz: a02c56cd8f4e53405776b9d1240b54b5fe6b6a71f01339a90fe83a04f0864ebef3f68a8d5a6f41e2a80ae9b3d4d70ce376c4a165ec4c38d9354bfe874b969d66
+  data.tar.gz: 512b952e164d688a07204f3d3137b39215b5753bdeab6a01543562d3a9156960d0e383ffdd0798270aa75440187fcaa939d756bab7c6316637ac8d00d71cfa52

data/CHANGELOG.md

@@ -6,6 +6,65 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [2.0.1] - 2026-10-22
+
+### Fixed
+
+- `kaze install` run through `bundle exec` no longer fails to build gems with native extensions. Bundler exports `RUBYOPT` and `BUNDLE_*` so child processes join its bundle, which is wrong for a nested bundler call: the `bundle add` that kaze shells out to inherited them, and `extconf.rb` then loaded `bundler/setup` and tried to resolve a lockfile needing the very gem it was about to compile, failing with `Could not find bcrypt-… in locally installed gems`. The bundler shell-outs now run inside `Bundler.with_unbundled_env`.
+
+  The README's own instructions — `gem install kaze` then `kaze install` — were never affected, because that runs outside bundler. This reached `bundle exec kaze install`, which is how kaze's CI invokes it and how anyone who adds kaze to their Gemfile would.
+
+## [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
@@ -126,7 +185,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.4.0...HEAD
+[Unreleased]: https://github.com/cuonggt/kaze/compare/v2.0.1...HEAD
+[2.0.1]: https://github.com/cuonggt/kaze/compare/v2.0.0...v2.0.1
+[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

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/base_stack.rb

@@ -13,6 +13,16 @@ class Kaze::Commands::App::BaseStack
     @bundle_command ||= File.exist?("#{Dir.pwd}/bin/bundle") ? "#{Dir.pwd}/bin/bundle" : 'bundle'
   end
 
+  # Bundler exports RUBYOPT and BUNDLE_* so that child processes join its
+  # bundle. That is wrong for a nested bundler call: when kaze itself is run
+  # through `bundle exec`, a `bundle add` it shells out to inherits them, and
+  # any gem with a native extension fails to build, because extconf.rb loads
+  # bundler/setup and tries to resolve a lockfile needing the very gem it is
+  # about to compile. Shell out to bundler with that environment removed.
+  def run_bundle_command(command)
+    Bundler.with_unbundled_env { run_command(command) }
+  end
+
   def install_gems(gems = [], group = nil)
     installed_gems = Bundler::Definition.build("#{Dir.pwd}/Gemfile", nil, {}).dependencies.map(&:name)
 
@@ -20,7 +30,7 @@ class Kaze::Commands::App::BaseStack
 
     return true if gem_being_installed.empty?
 
-    status = run_command("#{bundle_command} add #{gem_being_installed.join(" ")}#{group ? " --group \"#{group}\"" : ""}")
+    status = run_bundle_command("#{bundle_command} add #{gem_being_installed.join(" ")}#{group ? " --group \"#{group}\"" : ""}")
 
     status.success?
   end
@@ -32,7 +42,7 @@ class Kaze::Commands::App::BaseStack
 
     return true if gems_being_removed.empty?
 
-    status = run_command("#{bundle_command} remove #{gems_being_removed.join(" ")}")
+    status = run_bundle_command("#{bundle_command} remove #{gems_being_removed.join(" ")}")
 
     status.success?
   end

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

@@ -3,7 +3,7 @@ class Kaze::Commands::App::HotwireStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'view_component', 'turbo-rails', 'dotenv', 'bcrypt' ])
-    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
+    return unless run_bundle_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'hotwire-livereload' ], 'development')
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
@@ -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

@@ -3,7 +3,7 @@ class Kaze::Commands::App::InertiaReactStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'turbo-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'inertia_rails', 'vite_rails', 'dotenv', 'bcrypt', 'js-routes' ])
-    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
+    return unless run_bundle_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
     # NPM Packages...
@@ -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

@@ -3,7 +3,7 @@ class Kaze::Commands::App::InertiaVueStack < Kaze::Commands::App::BaseStack
     # Gems...
     return unless remove_gems([ 'sprockets-rails', 'turbo-rails', 'stimulus-rails' ])
     return unless install_gems([ 'propshaft', 'inertia_rails', 'vite_rails', 'dotenv', 'bcrypt', 'js-routes' ])
-    return unless run_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
+    return unless run_bundle_command("#{bundle_command} add tailwindcss-rails --version=\"~> 4.0\"").success?
     return unless install_gems([ 'factory_bot_rails', 'faker' ], 'development, test')
 
     # NPM Packages...
@@ -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.4.0'
+  VERSION = '2.0.1'
 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

@@ -3,7 +3,125 @@
 /* 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 (&:where(.dark, .dark *));
+@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";
 

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"