keystone_ui-app 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8baed1af3145b6225cba7256510492d03a2f6ef3945742053c54758ab8330730
-  data.tar.gz: 3c088d53b28241d1c74a75712dfaab074e4e695fe3dd848bb93e47cb975ff805
+  metadata.gz: 67c87934361d6537cdce1f3d4f5e396bc145f4c92323d0502cc3f3196ba0f971
+  data.tar.gz: 24130a558aad621ccaa91a12932c88a7e3c727a88628e88ffa20d293caa2db21
 SHA512:
-  metadata.gz: 898e732c1403fe43b9ac93b380383987d1b235cac81f7ed846663b435f6de24052bd92c21503fc47299b014bc64053fa53262595716df9632962d8a61908b253
-  data.tar.gz: 458b9cd3f057d02ba88bafc92f6bf9bd131f39916de54d0e2e0e076e7d6fddd9326207376a05d1b7959d3e4b9c1ac09c2a28e876bd32f823e6ed7b045dca4c9d
+  metadata.gz: 858c67fc899028021b28e7e37cd2ec61cc03fa8181c6fa10d8610307d11891e5917a400045a4a36b7cba81620b118376449782e5bde30cebc9752ad22d623daa
+  data.tar.gz: 46274d47c64621263d8171a04fa376896fd6daeadd87324e65b4ce8ce4ccf89e97ec7ac54fda92d046af8b12beb2d8d648761f43c02768984d30e9704ebf1b54

data/README.md

@@ -16,11 +16,12 @@ The gem requires keystone_ui-styles 0.30.0 or later, which defines the `hotwire-
 Replace the layout with one call to `ui_app_shell`, filling its slots and putting the page inside it:
 
 ```erb
-<%= ui_app_shell do |shell| %>
+<%= ui_app_shell(body: { data: { controller: "trail", trail_url_value: request.fullpath } }) do |shell| %>
   <% shell.with_head do %><%= render "head" %><% end %>
   <% shell.with_flash do %><%= render "flash" %><% end %>
   <% shell.with_logo do %><%= link_to "Shop", root_path %><% end %>
   <% shell.with_menus do %><%= render "user_menu" %><% end %>
+  <% shell.with_phone_menus do %><%= render "phone_navbar" %><% end %>
   <% shell.with_footer do %><%= render "footer" %><% end %>
   <%= yield %>
 <% end %>
@@ -33,16 +34,21 @@ import { registerControllers as registerKeystoneUiAppControllers } from "keyston
 registerKeystoneUiAppControllers(application)
 ```
 
+`body:` takes the attributes for the page's `body` element, in the form `tag.body` takes them, such as the `data` attributes of the Stimulus controllers that read their settings from the body. It is optional.
+
 Every slot is optional. The shell writes the `<!DOCTYPE html>`, the `html`, `head` and `body` elements and the viewport meta tag, so the app's head leaves out its own viewport tag.
 
 ## What it draws
 
 - The `html` element carries keystone_ui's theme attributes and the current locale.
+- The `html` element carries the `dark` class when the theme mode keystone_ui chooses for the person is dark, and leaves it off for any other mode.
+- The `body` element carries the attributes the layout passes as `body:`.
 - On a desktop browser, keystone_ui's navigation bar with the logo and the menus.
+- On a phone browser, the phone menus at the top of the header on every page, including form and show pages, inside an element hidden from the `lg` breakpoint up.
 - On a phone browser, keystone_ui's phone header for a page drawn with `ui_form_page` or `ui_show_page`, with its back link, title and subtitle.
 - On a phone browser, a page that is not a form or show page shows a menu of the current section's tabs, with the tab the page belongs to marked as active. The section is the navigation group holding the tab keystone_ui's current tab supplier names, and the menu leaves out tabs the person is not permitted to see. A page in no section shows no menu.
 - Inside the native app, the `menu-button` bridge component sends the section's label and tabs to the native menu button, and choosing a tab opens its page in place of the current one. A page in no section sends an empty list.
-- Inside the native app, no navigation bar, no phone header and no footer, the `hotwire-native` class on the `html` element, and a viewport that cannot be pinch-zoomed.
+- Inside the native app, no navigation bar, no phone menus, no phone header and no footer, the `hotwire-native` class on the `html` element, and a viewport that cannot be pinch-zoomed.
 - In a browser, the footer, unless the page calls `content_for :hide_footer, true`.
 
 ## Licence

data/app/components/keystone_ui/app/shell_component.html.erb

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html <%= helpers.keystone_theme_attributes %> class="<%= class_names("hotwire-native": native_app?) %>" lang="<%= I18n.locale %>">
+<html <%= helpers.keystone_theme_attributes %> class="<%= class_names(dark: dark_mode?, "hotwire-native": native_app?) %>" lang="<%= I18n.locale %>">
   <head>
     <%= tag.meta name: "viewport", content: viewport %>
     <%= head %>
   </head>
-  <body>
+  <%= tag.body(**body) do %>
     <header>
       <%= flash %>
+      <%= tag.div(phone_menus, class: PHONE_ONLY) if phone_menus? && !native_app? %>
       <% if phone_header_shown? %>
         <%= helpers.ui_mobile_header(title: page_signalled(:title), back_url: page_signalled(:back_url), subtitle: page_signalled(:subtitle)) %>
       <% elsif !native_app? %>
@@ -25,5 +26,5 @@
       <% end %>
     <% end %>
     <%= footer if footer_shown? %>
-  </body>
+  <% end %>
 </html>

data/app/components/keystone_ui/app/shell_component.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "keystone_ui/theme_choice"
+
 module KeystoneUi
   module App
     class ShellComponent < ViewComponent::Base
@@ -7,18 +9,34 @@ module KeystoneUi
       renders_one :flash
       renders_one :logo
       renders_one :menus
+      renders_one :phone_menus
       renders_one :footer
 
+      PHONE_ONLY = "lg:hidden"
       PAGE_SIGNALS = %i[show_page form_page].freeze
       VIEWPORT = "width=device-width, initial-scale=1"
       NATIVE_APP_VIEWPORT = "#{VIEWPORT}, maximum-scale=1.0, user-scalable=0"
 
+      attr_reader :body
+
+      def initialize(body: {})
+        @body = body
+      end
+
       def native_app?
         return @native_app if defined?(@native_app)
 
         @native_app = helpers.hotwire_native_app?
       end
 
+      def dark_mode?
+        theme_choice.mode == "dark"
+      end
+
+      def theme_choice
+        KeystoneUi::ThemeChoice.new(helpers.cookies[KeystoneUi::ThemeChoice::COOKIE], supplied: KeystoneUi.configuration.supplied_theme_mode(helpers))
+      end
+
       def viewport
         native_app? ? NATIVE_APP_VIEWPORT : VIEWPORT
       end

data/app/helpers/keystone_ui_app_helper.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module KeystoneUiAppHelper
-  def ui_app_shell(&block)
-    render KeystoneUi::App::ShellComponent.new, &block
+  def ui_app_shell(body: {}, &block)
+    render KeystoneUi::App::ShellComponent.new(body: body), &block
   end
 end

data/lib/keystone_ui/app/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module App
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-app
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Tyler Schneider
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-11-07 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: keystone_ui
@@ -101,7 +100,6 @@ metadata:
   bug_tracker_uri: https://github.com/DYB-Development/keystone_ui-app/issues
   documentation_uri: https://github.com/DYB-Development/keystone_ui-app#readme
   rubygems_mfa_required: 'true'
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -116,8 +114,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
-signing_key:
+rubygems_version: 4.0.20
 specification_version: 4
 summary: The page frame for a Rails app built on Keystone UI.
 test_files: []