kern 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d18817224e28d4f7ed96d2d6c805ee1a9a5ab6afc6c6b052ed661d0ac35949bc
-  data.tar.gz: 4261479514032c6e87caccd6b59c9e7d5fbfa3ab68a9a903d808f0021121e4a1
+  metadata.gz: 6e5939e78f0c9a8ed8f74d2108f04e1a7d1a6b57464d85770a513e3bc8186582
+  data.tar.gz: 2b6ffa3d55e045514e9d19fff2a378c354bc1efd8af39caca8cc79e9bac813d2
 SHA512:
-  metadata.gz: b68dd99d028916c30b5b44f5b85a7890cfade3185bb4ec6ca26a061f3d6027ddede1476b41cbc1189bd15df2d24d1aa6852731a4d702558e5c1807e85b54d977
-  data.tar.gz: 2d00f1333f735d2ef44d10f72d9a560b2cd074596527f3fb67a074f23b46ba9c5cb8574defb555ca2844f3a590dfb9d00d50814d85326d94d6cc158c73ac41e8
+  metadata.gz: 53f4f292112352c6c980b7d9f7a6ce0bb7f69d02247bb0f2d504778d72aed6141cd18c3a51d5b1082dbe2c387ec0580e3a5205a3e0cb33763498fab9ba06de87
+  data.tar.gz: bb31cce5665edc407bfafcd4fefddfc9dff1a888f22152f0c03aed30450457f2e209362a7729a0f77bcee94a491b28d8c576c2ca85d51b1479dd54f26b2e5094

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    kern (0.7.0)
+    kern (0.8.0)
       rails (>= 8.0.0)
 
 GEM
@@ -120,6 +120,7 @@ GEM
       net-smtp
     marcel (1.1.0)
     mini_mime (1.1.5)
+    mini_portile2 (2.8.9)
     minitest (5.26.2)
     net-imap (0.5.12)
       date
@@ -131,6 +132,9 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.5)
+    nokogiri (1.18.10)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
     nokogiri (1.18.10-aarch64-linux-gnu)
       racc (~> 1.4)
     nokogiri (1.18.10-aarch64-linux-musl)
@@ -235,6 +239,8 @@ GEM
       rubocop-ast (>= 1.47.1, < 2.0)
     ruby-progressbar (1.13.0)
     securerandom (0.4.1)
+    sqlite3 (2.8.1)
+      mini_portile2 (~> 2.8.0)
     sqlite3 (2.8.1-aarch64-linux-gnu)
     sqlite3 (2.8.1-aarch64-linux-musl)
     sqlite3 (2.8.1-arm-linux-gnu)
@@ -279,7 +285,7 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
       unicode-emoji (~> 4.1)
-    unicode-emoji (4.1.0)
+    unicode-emoji (4.2.0)
     uri (1.1.1)
     useragent (0.16.11)
     websocket-driver (0.8.0)
@@ -345,7 +351,7 @@ CHECKSUMS
   io-console (0.8.1) sha256=1e15440a6b2f67b6ea496df7c474ed62c860ad11237f29b3bd187f054b925fcb
   irb (1.15.3) sha256=4349edff1efa7ff7bfd34cb9df74a133a588ba88c2718098b3b4468b81184aaa
   json (2.17.1) sha256=e0e4824541336a44915436f53e7ea74c687314fb8f88080fa1456f6a34ead92e
-  kern (0.7.0)
+  kern (0.8.0)
   language_server-protocol (3.17.0.5) sha256=fd1e39a51a28bf3eec959379985a72e296e9f9acfce46f6a79d31ca8760803cc
   lint_roller (1.1.0) sha256=2c0c845b632a7d172cb849cc90c1bce937a28c5c8ccccb50dfd46a485003cc87
   logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
@@ -353,12 +359,14 @@ CHECKSUMS
   mail (2.9.0) sha256=6fa6673ecd71c60c2d996260f9ee3dd387d4673b8169b502134659ece6d34941
   marcel (1.1.0) sha256=fdcfcfa33cc52e93c4308d40e4090a5d4ea279e160a7f6af988260fa970e0bee
   mini_mime (1.1.5) sha256=8681b7e2e4215f2a159f9400b5816d85e9d8c6c6b491e96a12797e798f8bccef
+  mini_portile2 (2.8.9) sha256=0cd7c7f824e010c072e33f68bc02d85a00aeb6fce05bb4819c03dfd3c140c289
   minitest (5.26.2) sha256=f021118a6185b9ba9f5af71f2ba103ad770c75afde9f2ab8da512677c550cde3
   net-imap (0.5.12) sha256=cb8cd05bd353fcc19b6cbc530a9cb06b577a969ea10b7ddb0f37787f74be4444
   net-pop (0.1.2) sha256=848b4e982013c15b2f0382792268763b748cce91c9e91e36b0f27ed26420dff3
   net-protocol (0.2.2) sha256=aa73e0cba6a125369de9837b8d8ef82a61849360eba0521900e2c3713aa162a8
   net-smtp (0.5.1) sha256=ed96a0af63c524fceb4b29b0d352195c30d82dd916a42f03c62a3a70e5b70736
   nio4r (2.7.5) sha256=6c90168e48fb5f8e768419c93abb94ba2b892a1d0602cb06eef16d8b7df1dca1
+  nokogiri (1.18.10) sha256=d5cc0731008aa3b3a87b361203ea3d19b2069628cb55e46ac7d84a0445e69cc1
   nokogiri (1.18.10-aarch64-linux-gnu) sha256=7fb87235d729c74a2be635376d82b1d459230cc17c50300f8e4fcaabc6195344
   nokogiri (1.18.10-aarch64-linux-musl) sha256=7e74e58314297cc8a8f1b533f7212d1999dbe2639a9ee6d97b483ea2acc18944
   nokogiri (1.18.10-arm-linux-gnu) sha256=51f4f25ab5d5ba1012d6b16aad96b840a10b067b93f35af6a55a2c104a7ee322
@@ -395,6 +403,7 @@ CHECKSUMS
   rubocop-performance (1.26.1) sha256=cd19b936ff196df85829d264b522fd4f98b6c89ad271fa52744a8c11b8f71834
   ruby-progressbar (1.13.0) sha256=80fc9c47a9b640d6834e0dc7b3c94c9df37f08cb072b7761e4a71e22cff29b33
   securerandom (0.4.1) sha256=cc5193d414a4341b6e225f0cb4446aceca8e50d5e1888743fac16987638ea0b1
+  sqlite3 (2.8.1) sha256=acd0ac7912a4d92b2484b5befb6faa8d496497eb1e38bdbe8d7818fb8d05d726
   sqlite3 (2.8.1-aarch64-linux-gnu) sha256=9bce166d3e3595a42fc92c28d986ea11d499b55be8bd1cd491be04af30029543
   sqlite3 (2.8.1-aarch64-linux-musl) sha256=34912f6acf3e9c43c7998c6f99ba3146708e654cf9716b2983e260315cdeed72
   sqlite3 (2.8.1-arm-linux-gnu) sha256=9118d6abb5ca7ea4f1b50a6c42c763e612670f5eb673bbdf12e8d3bd63339bde
@@ -423,7 +432,7 @@ CHECKSUMS
   turbo-rails (2.0.20) sha256=cbcbb4dd3ce59f6471c9f911b1655b2c721998cc8303959d982da347f374ea95
   tzinfo (2.0.6) sha256=8daf828cc77bcf7d63b0e3bdb6caa47e2272dcfaf4fbfe46f8c3a9df087a829b
   unicode-display_width (3.2.0) sha256=0cdd96b5681a5949cdbc2c55e7b420facae74c4aaf9a9815eee1087cb1853c42
-  unicode-emoji (4.1.0) sha256=4997d2d5df1ed4252f4830a9b6e86f932e2013fbff2182a9ce9ccabda4f325a5
+  unicode-emoji (4.2.0) sha256=519e69150f75652e40bf736106cfbc8f0f73aa3fb6a65afe62fefa7f80b0f80f
   uri (1.1.1) sha256=379fa58d27ffb1387eaada68c749d1426738bd0f654d812fcc07e7568f5c57c6
   useragent (0.16.11) sha256=700e6413ad4bb954bb63547fa098dddf7b0ebe75b40cc6f93b8d54255b173844
   websocket-driver (0.8.0) sha256=ed0dba4b943c22f17f9a734817e808bc84cdce6a7e22045f5315aa57676d4962

data/README.md

@@ -138,6 +138,7 @@ Pulled from [Rails Designer's Components](https://railsdesigner.com/components/)
 Some basic components are included like:
 
 - container; keep all your app's content in check
+- section; easily divide up your screens in sections
 - heading; have consistent headings for each screen
 - enhanced dialog element (works with Turbo Frames and, includes `centered` or a `drawer` variants)
 - flash messages (notifiy your users from the bottom-right)

data/Rakefile

@@ -16,7 +16,7 @@ namespace :assets do
   desc "Build Tailwind CSS for distribution"
   task :precompile do
     Dir.chdir("test/dummy") do
-      sh "bundle exec tailwindcss -i app/assets/tailwind/application.css -o app/assets/builds/tailwind.kern.css"
+      sh "bundle exec tailwindcss -i app/assets/tailwind/application.kern.css -o app/assets/builds/tailwind.kern.css"
 
       FileUtils.mkdir_p "../../app/assets/builds"
       FileUtils.cp(

data/app/assets/builds/tailwind.kern.css

@@ -25,8 +25,6 @@
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-blue-950: oklch(28.2% 0.091 267.935);
-    --color-pink-200: oklch(89.9% 0.061 343.231);
-    --color-pink-800: oklch(45.9% 0.187 3.815);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -78,6 +76,7 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --blur-sm: 8px;
     --blur-md: 12px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -739,6 +738,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .no-underline {
+    text-decoration-line: none;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -793,6 +795,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -896,20 +903,6 @@
       }
     }
   }
-  .selection\:bg-pink-200\/40 {
-    & *::selection {
-      background-color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 40%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-pink-200) 40%, transparent);
-      }
-    }
-    &::selection {
-      background-color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 40%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-pink-200) 40%, transparent);
-      }
-    }
-  }
   .selection\:text-blue-800\/70 {
     & *::selection {
       color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 70%, transparent);
@@ -924,20 +917,6 @@
       }
     }
   }
-  .selection\:text-pink-800\/70 {
-    & *::selection {
-      color: color-mix(in srgb, oklch(45.9% 0.187 3.815) 70%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-pink-800) 70%, transparent);
-      }
-    }
-    &::selection {
-      color: color-mix(in srgb, oklch(45.9% 0.187 3.815) 70%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-pink-800) 70%, transparent);
-      }
-    }
-  }
   .file\:mr-2 {
     &::file-selector-button {
       margin-right: calc(var(--spacing) * 2);
@@ -991,6 +970,11 @@
       display: block;
     }
   }
+  .empty\:hidden {
+    &:empty {
+      display: none;
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -1032,13 +1016,6 @@
       }
     }
   }
-  .hover\:text-gray-500 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-500);
-      }
-    }
-  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1142,6 +1119,11 @@
       margin-inline: calc(var(--spacing) * 4);
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
   .md\:gap-8 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 8);
@@ -1219,6 +1201,16 @@
       width: calc(var(--spacing) * 60);
     }
   }
+  .lg\:max-w-1\/4 {
+    @media (width >= 64rem) {
+      max-width: calc(1/4 * 100%);
+    }
+  }
+  .lg\:max-w-3\/4 {
+    @media (width >= 64rem) {
+      max-width: calc(3/4 * 100%);
+    }
+  }
   .lg\:px-6 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -1268,9 +1260,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .\[\&\>input\]\:mt-\[0\.15em\] {
+  .\[\&\>input\]\:mt-\[0\.17em\] {
     &>input {
-      margin-top: 0.15em;
+      margin-top: 0.17em;
     }
   }
   .\[\&\[data-slot\=\'field\'\]\+\[data-slot\=\'field\'\]\]\:mt-4 {

data/app/controllers/concerns/authentication.rb

@@ -40,6 +40,10 @@ module Authentication
     session.delete(:return_to_after_authenticating) || root_url
   end
 
+  def redirect_to_root
+    redirect_to root_url || kern.root_url
+  end
+
   def start_new_session_for(user)
     user.sessions.create!(user_agent: request.user_agent.presence || "[No User Agent]", ip_address: request.remote_ip).tap do |session|
       Current.session = session

data/app/controllers/concerns/authentication.rb.tt

@@ -40,6 +40,10 @@ module Authentication
     session.delete(:return_to_after_authenticating) || root_url
   end
 
+  def redirect_to_root
+    redirect_to root_url || kern.root_url
+  end
+
   def start_new_session_for(user)
     user.sessions.create!(user_agent: request.user_agent.presence || "[No User Agent]", ip_address: request.remote_ip).tap do |session|
       Current.session = session

data/app/controllers/concerns/layouts.rb

@@ -0,0 +1,22 @@
+module Layouts
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def define_layout(layout_name, namespace: "kern")
+      layout -> { resolve(layout_name, namespace) }
+    end
+  end
+
+  private
+
+  def resolve(layout_name, namespace)
+    layout_name = layout_name.to_s
+
+    return layout_name if lookup_context.exists?(layout_name, ["layouts"])
+
+    namespaced = "#{namespace}/#{layout_name}"
+    return namespaced if lookup_context.exists?(namespaced, ["layouts"])
+
+    false
+  end
+end

data/app/controllers/kern/application_controller.rb

@@ -1,7 +1,14 @@
 module Kern
   class ApplicationController < ActionController::Base
     include Authentication
+    include Layouts
+
+    define_layout :application
 
     default_form_builder Kern::FormBuilder
+
+    private
+
+    def _prefixes = [controller_name] + super
   end
 end

data/app/controllers/kern/passwords_controller.rb

@@ -5,7 +5,7 @@ module Kern
     before_action :redirect_to_root, if: -> { authenticated? }, only: %w[new create]
     before_action :set_user_by_token, only: %w[edit update]
 
-    layout "kern/auth"
+    define_layout :auth
 
     def new
     end

data/app/controllers/kern/sessions_controller.rb

@@ -6,7 +6,7 @@ module Kern
 
     rate_limit to: 10, within: 3.minutes, only: :create, with: -> { redirect_to new_session_url, alert: "Try again later" }
 
-    layout "kern/auth"
+    define_layout :auth
 
     def new
     end

data/app/controllers/kern/signups_controller.rb

@@ -4,7 +4,7 @@ module Kern
 
     before_action :redirect_to_root, if: -> { authenticated? }, only: %w[new create]
 
-    layout "kern/auth"
+    define_layout :auth
 
     def new
       @signup = Signup.new
@@ -16,7 +16,11 @@ module Kern
       if @signup.save
         start_new_session_for @signup.user
 
-        redirect_to root_url
+        begin
+          redirect_to main_app.root_url
+        rescue
+          redirect_to root_url
+        end
       else
         render :new, status: :unprocessable_entity
       end

data/app/controllers/kern/signups_controller.rb.tt

@@ -16,7 +16,7 @@ module Kern
       if @signup.save
         start_new_session_for @signup.user
 
-        redirect_to root_path
+        redirect_to root_url
       else
         render :new, status: :unprocessable_entity
       end

data/app/models/billing_profile/subscription.rb

@@ -1,4 +1,4 @@
-module BillingProfile
+class BillingProfile
   class Subscription < ApplicationRecord
     include Sluggable
 

data/app/models/workspace/members.rb

@@ -5,8 +5,14 @@ class Workspace
     included do
       has_many :members, dependent: :destroy
       has_many :users, through: :members
+
+      after_destroy_commit :purge_orphaned_users!
     end
 
     def add_member(to:, role: nil) = Member::Setup.new(workspace: self, user: to, role: role).save
+
+    private
+
+    def purge_orphaned_users! = User.left_joins(:members).where(members: {id: nil}).destroy_all
   end
 end

data/app/views/components/_heading.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (level: :h1, breadcrumbs: [], actions: [], css: class_names("flex items-center gap-x-1 h-8 font-sans font-bold text-gray-950 *:inline-block", {"text-base font-bold tracking-tight md:text-lg": level == :h1, "text-sm font-semibold md:text-base": level == :h2, "text-xs font-medium md:text-sm": level == :h3})) %>
+<%# locals: (level: :h1, breadcrumbs: [], actions: [], css: class_names("flex items-center gap-x-1 h-8 font-sans font-bold text-gray-950 *:inline-block", {"text-base font-bold tracking-tight md:text-lg": level == :h1, "text-sm font-bold md:text-base": level == :h2, "text-xs font-medium md:text-sm": level == :h3})) %>
 <%= tag.header id: "heading", class: class_names("flex items-center justify-between", {"px-4 py-5 border-b border-gray-200/50": level == :h1}) do %>
   <%= tag.send(level, class: css) do %>
     <%= safe_join(breadcrumbs.map.with_index {|it, index| tag.span(link_to(it[:label], it[:href], class: "hover:underline", id: "header_part_link_#{index}") + tag.span("/", class: "ml-1 font-normal text-gray-400"), id: "header_part_#{index}")}) if level == :h1 %>

data/app/views/components/_section.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (direction: :vertical, heading: nil, description: nil, **options) %>
+<%= tag.section class: class_names("flex pt-4 border-t border-gray-100", {"flex-col gap-2": direction == :vertical, "flex-col gap-4 md:flex-row": direction == :horizontal}) do %>
+  <div class="w-full lg:max-w-1/4">
+    <%= component("heading", level: :h2) { heading } %>
+
+    <%= tag.p description, class: "text-sm text-gray-700 md:text-base" if description.present? %>
+  </div>
+
+  <div class="<%= class_names("w-full", {"lg:max-w-3/4": direction == :horizontal}) %>">
+    <%= yield %>
+  </div>
+<% end %>

data/app/views/components/flash/_message.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (type:, message:, icon: "check-circle", icon_css: class_names("size-3.5 shrink-0", {"text-emerald-300": type == "notice", "text-red-400": type == "alert"}), css: class_names("flex items-center gap-x-1.5 bg-gradient-to-b from-gray-900/80 to-gray-900 px-3 py-1.5 text-xs font-normal text-white ring ring-gray-700/90 rounded-md shadow-lg transition-all")) %>
-<li class="translate-x-0 opacity-100 transition-all duration-300 ease-in-out starting:translate-x-4 starting:opacity-0">
+<%# locals: (type:, message:, icon: "check-circle", icon_css: class_names("size-3.5 shrink-0", {"text-emerald-300": type == "notice", "text-red-400": type == "alert"}), css: class_names("flex items-center gap-x-1.5 px-3 py-1.5 text-xs font-normal text-white bg-gradient-to-b from-gray-900/80 to-gray-900 backdrop-blur-sm ring ring-gray-700/90 rounded-md shadow-lg transition-all")) %>
+<li data-action="element#remove:mounted" data-remove-delay="7000" class="translate-x-0 opacity-100 transition-all duration-300 ease-in-out starting:translate-x-4 starting:opacity-0">
   <%= tag.p safe_join([(icon(icon, class: icon_css) rescue nil), message]), aria: {live: :polite}, class: css %>
 </li>

data/app/views/kern/pages/welcome.html.erb

@@ -22,25 +22,12 @@
       </li>
 
       <li>
-        override any views by running <code class="select-all">bin/rails g kern:views</code>
+        override any feature by running <code class="select-all">bin/rails generate kern:feature FEATURE FEATURE</code>
       </li>
 
       <li>
-        override any feature by running <code class="select-all">bin/rals g kern:feature</code>
-      </li>
-
-      <li>
-        check out <%= link_to "Rails Designer's UI Components", "https://railsdesigner.com/components/" %>
-      </li>
-
-      <li>
-        build your SaaS
-      </li>
-
-      <li>
-        profit 🤑
+        override layouts by running <code class="select-all">bin/rails generate kern:layouts</code>
       </li>
     </ul>
-
   </section>
 </main>

data/app/views/kern/passwords/new.html.erb

@@ -8,3 +8,5 @@
     <%= form.submit "Continue", class: "btn-primary" %>
   </div>
 <% end %>
+
+<%= content_for(:alternative_action) { link_to "I remember my password again…", new_session_path, class: "block text-center text-sm font-medium text-gray-500 hover:underline" } %>

data/app/views/kern/sessions/new.html.erb

@@ -4,13 +4,11 @@
 <%= form_with url: session_path, class: "px-2 md:px-4" do |form| %>
   <%= form.input :email_address, type: :email, required: true, autofocus: true, autocomplete: "username", value: params[:email_address] %>
 
-  <%= form.input :password, required: true, autocomplete: "current-password", maxlength: 72, label_suffix: link_to("Forgot password?", new_password_path, class: "font-normal text-gray-400 hover:text-gray-500") %>
+  <%= form.input :password, required: true, autocomplete: "current-password", maxlength: 72, label_suffix: link_to("Forgot password?", new_password_path, class: "no-underline") %>
 
   <div class="buttons">
     <%= form.submit "Log in", data: {turbo_submits_with: "Logging in…"}, class: "btn-primary" %>
   </div>
 <% end %>
 
-<p class="px-2 pt-4 pb-2 border-t border-gray-100 md:pb-4">
-  <%= link_to "No account yet?", new_signup_path, class: "block text-center text-sm text-gray-500 hover:underline" %>
-</p>
+<%= content_for(:alternative_action) { link_to "No account yet?", new_signup_path, class: "block text-center text-sm text-gray-500 hover:underline" } %>

data/app/views/kern/signups/new.html.erb

@@ -13,6 +13,4 @@
   </div>
 <% end %>
 
-<p class="px-2 pt-4 pb-2 border-t border-gray-100 md:pb-4">
-  <%= link_to "Already have an account?", new_session_path, class: "block text-center text-sm font-medium text-gray-500 hover:underline" %>
-</p>
+<%= content_for(:alternative_action) { link_to "Already have an account??", new_session_path, class: "block text-center text-sm font-medium text-gray-500 hover:underline" } %>

data/app/views/layouts/kern/application.html.erb

@@ -9,7 +9,7 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "tailwind.kern", "data-turbo-track": "reload" %>
-    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.9.0"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.11.0"></script>
   </head>
 
   <body class="<%= class_names("antialiased bg-white selection:bg-blue-200/40 selection:text-blue-800/70", yield(:body_class)) %>">

data/app/views/layouts/kern/application.html.erb.tt

@@ -9,12 +9,13 @@
     <%%= csp_meta_tag %>
 
     <%%= stylesheet_link_tag "tailwind.kern", "data-turbo-track": "reload" %>
-    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.9.0"></script>
+    <%%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.11.0"></script>
   </head>
 
-  <body class="<%%= class_names("antialiased bg-white selection:bg-pink-200/40 selection:text-pink-800/70", yield(:body_class)) %>">
+  <body class="<%%= class_names("antialiased bg-white selection:bg-blue-200/40 selection:text-blue-800/70", yield(:body_class)) %>">
     <div class="flex">
-      <%%= render partial: "layouts/kern/application/navigation",
+      <%%= render partial: "layouts/application/navigation",
         locals: {
           links: [
             {label: "Home", href: root_path, icon: "house-line"},
@@ -28,5 +29,6 @@
     </div>
 
     <%%= component "flash" %>
+    <%%= component "dialog" %>
   </body>
 </html>

data/app/views/layouts/kern/auth.html.erb

@@ -10,6 +10,7 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "tailwind.kern", "data-turbo-track": "reload" %>
+    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.11.0"></script>
   </head>
 
   <body class="relative overflow-clip antialiased bg-white selection:bg-blue-200/40 selection:text-blue-800/70">
@@ -32,6 +33,8 @@
             <%= tag.h1 yield(:page_title), class: "mx-2 mt-8 font-sans text-center text-base font-bold text-gray-800 md:mx-4" %>
 
             <%= yield %>
+
+            <%= tag.p yield(:alternative_action), class: "px-2 pt-4 pb-2 border-t border-gray-100 empty:hidden md:pb-4" %>
           </section>
         </div>
       </div>

data/app/views/layouts/kern/auth.html.erb.tt

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      <%%= content_for?(:title)? "#{yield(:title)} - #{Rails.application.name.humanize}" : Rails.application.name.humanize %>
+    </title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="robots" content="noindex, nofollow">
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%%= stylesheet_link_tag "tailwind.kern", "data-turbo-track": "reload" %>
+    <%%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.11.0"></script>
+  </head>
+
+  <body class="relative overflow-clip antialiased bg-white selection:bg-blue-200/40 selection:text-blue-800/70">
+    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="absolute -top-[400px] -left-[350px] size-[800px] text-brand-500">
+      <path fill="currentColor" d="M42.9,-43.4C60.9,-36,84.8,-27.6,92.2,-12.2C99.8,3.1,91.2,25.4,76.1,37C61.1,48.5,39.7,49.3,21.9,52.7C4,56.1,-10.4,62,-26.6,61.1C-42.9,60.3,-61.1,52.9,-61.9,41C-62.6,28.8,-46,12.1,-42.2,-7C-38.4,-25.9,-47.4,-46.5,-42.5,-56.1C-37.6,-65.8,-18.8,-64.5,-3.2,-60.7C12.4,-57,24.9,-50.8,42.9,-43.4Z" transform="translate(100 100)" />
+    </svg>
+
+    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="absolute -bottom-[450px] -right-[300px] size-[800px] rotate-32 text-cyan-400">
+      <path fill="currentColor" d="M42.9,-43.4C60.9,-36,84.8,-27.6,92.2,-12.2C99.8,3.1,91.2,25.4,76.1,37C61.1,48.5,39.7,49.3,21.9,52.7C4,56.1,-10.4,62,-26.6,61.1C-42.9,60.3,-61.1,52.9,-61.9,41C-62.6,28.8,-46,12.1,-42.2,-7C-38.4,-25.9,-47.4,-46.5,-42.5,-56.1C-37.6,-65.8,-18.8,-64.5,-3.2,-60.7C12.4,-57,24.9,-50.8,42.9,-43.4Z" transform="translate(100 100)" />
+    </svg>
+
+    <main class="grid place-items-center h-screen">
+      <div class="w-full max-w-xl">
+        <%%= link_to Config::Urls.site, class: "flex justify-center items-center size-6 mx-auto text-brand-500 rounded-full transition ease-in-out hover:text-brand-800 hover:bg-brand-50 hover:scale-105" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" class="size-5 shrink-0 fill-brand-400"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"/></svg>
+        <%% end %>
+
+        <div class="w-full mt-6 p-2 ring ring-gray-200/50 bg-white/50 backdrop-blur-md md:rounded-xl md:shadow-lg">
+          <section class="flex flex-col gap-y-5 bg-white ring-gray-200/60 md:ring md:rounded-md md:shadow-lg">
+            <%%= tag.h1 yield(:page_title), class: "mx-2 mt-8 font-sans text-center text-base font-bold text-gray-800 md:mx-4" %>
+
+            <%%= yield %>
+
+            <%%= tag.p yield(:alternative_action), class: "px-2 pt-4 pb-2 border-t border-gray-100 empty:hidden md:pb-4" %>
+          </section>
+        </div>
+      </div>
+    </main>
+
+    <%%= component "flash" %>
+  </body>
+</html>

data/app/webhooks/stripe/base.rb

@@ -1,5 +1,5 @@
 module Stripe
-  class Base < Fuik::Event
+  class Base < (defined?(Fuik::Event) ? Fuik::Event : Object)
     def self.verify!(request)
       secret = Rails.application.credentials.dig(:stripe, :signing_secret)
       signature = request.headers["Stripe-Signature"]

data/lib/generators/kern/layouts/layouts_generator.rb

@@ -6,7 +6,7 @@ module Kern
       template "layouts/kern/application.html.erb.tt", "app/views/layouts/application.html.erb"
       copy_file "layouts/kern/application/_navigation.html.erb", "app/views/layouts/application/_navigation.html.erb"
 
-      copy_file "layouts/kern/auth.html.erb", "app/views/layouts/auth.html.erb"
+      template "layouts/kern/auth.html.erb.tt", "app/views/layouts/auth.html.erb"
     end
   end
 end

data/lib/kern/engine.rb

@@ -8,6 +8,10 @@ module Kern
       Kern::Config.load!
     end
 
+    config.to_prepare do
+      Kern::FormBuilder.load_styles
+    end
+
     initializer "kern.helpers" do
       ActiveSupport.on_load(:action_controller_base) do
         helper Kern::Engine.helpers

data/lib/kern/form_builder/input.rb

@@ -13,6 +13,7 @@ module Kern
         password: :password_field,
         url: :url_field,
         text: :text_area,
+        file: :file_field,
         integer: :number_field,
         float: :number_field,
         decimal: :number_field,
@@ -29,8 +30,8 @@ module Kern
 
           @template.safe_join([
             (if label_suffix
-               @template.content_tag(:div, class: "flex items-center justify-between") do
-                 @template.safe_join([label_html, @template.content_tag(:span, label_suffix.html_safe, class: "text-xs font-medium text-gray-500")].compact)
+               @template.content_tag(:div, class: label_suffix_wrapper_css) do
+                 @template.safe_join([label_html, @template.content_tag(:span, label_suffix.html_safe, class: label_suffix_css)].compact)
                end
              end),
 
@@ -38,7 +39,7 @@ module Kern
 
             input_field(attribute, options),
 
-            (@template.content_tag(:p, hint.html_safe, class: "flex items-center gap-x-1 mt-0.5 px-0.5 text-xs font-light text-gray-500") if hint)
+            (@template.content_tag(:p, hint.html_safe, class: hint_css) if hint)
           ].compact)
         end
       end
@@ -48,13 +49,13 @@ module Kern
         label_options = options[:label] || {}
         field_errors = @object&.errors&.where(attribute)
 
-        label_options[:class] = class_names("flex items-center gap-1 text-sm font-medium", {"text-gray-700": field_errors&.none?, "text-red-600": field_errors&.any?})
+        label_options[:class] = label_css(has_errors: field_errors&.any?)
         label_text = text || I18n.t("labels.#{attribute}", default: attribute.to_s.humanize)
 
         super(attribute, label_options) do
           safe_join([
             begin
-              icon("warning-circle", class: "size-3.5 scale-100 transition ml-0 ease-in-out duration-300 starting:ml-3.5 starting:scale-0") if field_errors&.any?
+              icon("warning-circle", class: label_icon_css) if field_errors&.any?
             rescue
               nil
             end,
@@ -63,12 +64,8 @@ module Kern
         end
       end
 
-      def toggle_wrapper(&block)
-        content_tag(:div, yield, data: {slot: "toggle-field"}, class: "flex items-start gap-x-2 [&>input]:mt-[0.15em]")
-      end
-
-      def toggle_label(method, text)
-        label(method, text.html_safe, class: toggle_label_css)
+      def toggle_label(id, text)
+        @template.label_tag(id, text.html_safe, class: toggle_label_css)
       end
 
       private
@@ -83,6 +80,7 @@ module Kern
         return :email if attribute.to_s.end_with?("email")
         return :password if attribute.to_s.include?("password")
         return :url if attribute.match?(/url|website|site/)
+        return :file if attribute.match?(/hero|image|avatar/)
         return :string unless valid?(attribute)
 
         @object.type_for_attribute(attribute.to_s).type

data/lib/kern/form_builder/styles.rb

@@ -5,6 +5,41 @@ module Kern
         "w-full [&[data-slot='field']+[data-slot='field']]:mt-4"
       end
 
+      def label_css(has_errors: false)
+        base = <<~CSS
+          flex items-center gap-1 text-sm font-medium
+        CSS
+
+        class_names(base, has_errors ? "text-red-600" : "text-gray-700")
+      end
+
+      def label_icon_css
+        <<~CSS
+          size-3.5
+          scale-100 transition ml-0 ease-in-out duration-300
+          starting:ml-3.5 starting:scale-0
+        CSS
+      end
+
+      def label_suffix_wrapper_css
+        <<~CSS
+          flex items-center justify-between
+        CSS
+      end
+
+      def label_suffix_css
+        <<~CSS
+          text-xs font-medium text-gray-500
+        CSS
+      end
+
+      def hint_css
+        <<~CSS
+          flex items-center gap-x-1 mt-0.5 px-0.5
+          text-xs font-light text-gray-500
+        CSS
+      end
+
       def input_css
         <<~CSS
           w-full px-2.5 py-1.5

data/lib/kern/form_builder.rb

@@ -1,4 +1,3 @@
-require "kern/form_builder/styles"
 require "kern/form_builder/input"
 
 module Kern
@@ -6,7 +5,15 @@ module Kern
     include ActionView::Helpers::TagHelper
 
     include Input
-    include Styles
+
+    def self.load_styles
+      if defined?(::FormBuilder::Styles)
+        include ::FormBuilder::Styles
+      else
+        require "kern/form_builder/styles"
+        include Styles
+      end
+    end
 
     %w[
       text_field email_field password_field
@@ -31,9 +38,10 @@ module Kern
     def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
       field_classes(options, toggle_input_css)
       label_text = block ? @template.capture(&block) : method.to_s.humanize
+      custom_id = options[:id] || method
 
       toggle_wrapper do
-        super(method, options, checked_value, unchecked_value) + label(method, label_text)
+        super(method, options, checked_value, unchecked_value) + label(custom_id, label_text)
       end
     end
     alias_method :checkbox, :check_box
@@ -41,9 +49,10 @@ module Kern
     def radio_button(method, tag_value, options = {}, &block)
       field_classes(options, toggle_input_css)
       label_text = block ? @template.capture(&block) : tag_value.to_s.humanize
+      custom_id = options[:id] || "#{method}_#{tag_value}"
 
       toggle_wrapper do
-        super(method, tag_value, options) + toggle_label("#{method}_#{tag_value}", label_text)
+        super(method, tag_value, options) + toggle_label(custom_id, label_text)
       end
     end
 
@@ -97,5 +106,9 @@ module Kern
       options[:class] = options[:class].presence || class_names(base_css, *additional_classes, options[:additional_class])
       options.delete(:additional_class)
     end
+
+    def toggle_wrapper(&block)
+      content_tag(:div, yield, data: {slot: "field"}, class: "flex items-start gap-x-2 [&>input]:mt-[0.17em]")
+    end
   end
 end

data/lib/kern/version.rb

@@ -1,3 +1,3 @@
 module Kern
-  VERSION = "0.7.0"
+  VERSION = "0.8.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kern
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Rails Designer
@@ -38,6 +38,7 @@ files:
 - app/assets/builds/tailwind.kern.css
 - app/controllers/concerns/authentication.rb
 - app/controllers/concerns/authentication.rb.tt
+- app/controllers/concerns/layouts.rb
 - app/controllers/kern/application_controller.rb
 - app/controllers/kern/billing_profiles/subscriptions_controller.rb
 - app/controllers/kern/billing_profiles/subscriptions_controller.rb.tt
@@ -77,6 +78,7 @@ files:
 - app/views/components/_dialog.html.erb
 - app/views/components/_flash.html.erb
 - app/views/components/_heading.html.erb
+- app/views/components/_section.html.erb
 - app/views/components/flash/_message.html.erb
 - app/views/kern/pages/welcome.html.erb
 - app/views/kern/passwords/edit.html.erb
@@ -96,6 +98,7 @@ files:
 - app/views/layouts/kern/application.html.erb.tt
 - app/views/layouts/kern/application/_navigation.html.erb
 - app/views/layouts/kern/auth.html.erb
+- app/views/layouts/kern/auth.html.erb.tt
 - app/webhooks/stripe/base.rb
 - app/webhooks/stripe/checkout_session_completed.rb
 - app/webhooks/stripe/customer_subscription_deleted.rb
@@ -155,7 +158,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.3
 specification_version: 4
 summary: Rails engine with auth, billing, and common components for SaaS apps
 test_files: []