layered-ui-rails 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe1154d1875a81940b409ffb0e923946c22ae9f7cf59aa9ab0d46512d5966662
-  data.tar.gz: a21bee7115c594e4ef9add2e357daa0b56730067594a628ff44d80bb63d74778
+  metadata.gz: 417904020be6218b684bb12df4c6089c04d79334ec1cd65a207de6b21e3cda15
+  data.tar.gz: 67b5030949e4b2722d2fc341d7fed3dcfd3f8d48dc4b90e6905e651dc6ecc6b8
 SHA512:
-  metadata.gz: 984d5fc4224b7a2bfa1ff81ff63168ea95aa7f3dd7d643fb536eeca17f1de9656b17944af354846cbf8b6063c1ea7788eee91dfb9995b6ee9081ddb88662c6ce
-  data.tar.gz: 28646db923197efe733f2af98a2e10ea8be238f0c7b409d3f85be8c032d445257cb0a252b962b420771dce2d3f8c6e306494f12193a6ad5bc83c95656d5c5c8d
+  metadata.gz: '05296252d95be8c3a4971351ba9a23b9481d026e27bd931ff4b69a0c53a53574d30174162c69895a6ecc4294e0bf8db5b84e3478b7b44ed3c9e6d9329efda56c'
+  data.tar.gz: cd87a0ef43243f98ddcb19d05cbe7d0d1f79ed52f0156e00924725eac9619ddc2c4a27bbb951d1b07df7c8e865cf8b74f93f80e5ef96ae36311e96686fa99b82

data/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file. This projec
 
 ## [Unreleased]
 
+## [0.1.3] - 2026-03-14
+
+### Added
+
+- `l-ui-utility--mt-4` and `l-ui-utility--mt-8` margin-top utilities
+
+### Changed
+
+- Panel closes when navigating to a new page on mobile
+- Panel button is now draggable on mobile
+- Better Safari support for panel
+- Cleaner link styles
+- Updated message bubble avatar background
+- Updated conversation rounding
+- Removed top padding from panel conversations
+
+### Fixed
+
+- Panel scrolling on mobile no longer scrolls the page behind it
+- Panel not working on devise based controllers
+- Issue with conversation container height
+
 ## [0.1.2] - 2026-02-27
 
 ### Added

data/CLA.md

@@ -1,10 +1,10 @@
 # Contributor License Agreement
 
-This agreement allows Layered AI to use your contributions in both
-open source and commercial offerings.
+This agreement allows LAYERED AI LIMITED (UK company number: 17056830) to
+use your contributions in both open source and commercial offerings.
 
 - You retain copyright
-- You grant Layered AI a perpetual, worldwide license to use,
+- You grant LAYERED AI LIMITED a perpetual, worldwide license to use,
   modify, sublicense, and distribute your contribution
 
 This agreement does not restrict your own use of the contribution.

data/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2026 Layered AI
+   Copyright 2026 LAYERED AI LIMITED (UK company number: 17056830)
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

data/NOTICE

@@ -1,7 +1,7 @@
-layered.ai
+layered-ui-rails
 
-Copyright 2026 Layered AI.
+Copyright 2026 LAYERED AI LIMITED (UK company number: 17056830).
 
-This product includes software developed by Layered AI and contributors.
+This product includes software developed by LAYERED AI LIMITED and contributors.
 
 Licensed under the Apache License, Version 2.0.

data/README.md

@@ -3,6 +3,9 @@
 [![CI](https://github.com/layered-ai-public/layered-ui-rails/actions/workflows/ci.yml/badge.svg)](https://github.com/layered-ai-public/layered-ui-rails/actions/workflows/ci.yml)
 [![WCAG 2.2 AA](https://img.shields.io/badge/WCAG_2.2-AA-green)](https://www.w3.org/WAI/WCAG22/quickref/)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![Website](https://img.shields.io/badge/Website-layered.ai-purple)](https://www.layered.ai/)
+[![GitHub](https://img.shields.io/badge/GitHub-layered--ui--rails-black)](https://github.com/layered-ai-public/layered-ui-rails)
+[![Discord](https://img.shields.io/badge/Discord-join-5865F2)](https://discord.gg/aCGqz9Bx)
 
 An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design tokens, Tailwind CSS utilities, and Stimulus controllers for theme switching, mobile navigation, slide-out panels, modals, and tabs. Ships as pure frontend with no server-side dependencies beyond Rails and Tailwind CSS. See the [live demo](https://layered-ui-rails.layered.ai).
 
@@ -97,7 +100,7 @@ This project is still in its early days. We welcome issues, feedback, and ideas
 
 ## License
 
-Released under the [Apache 2.0 License](LICENSE). The source code is fully open, but the layered.ai name and brand are trademarks of Layered AI.
+Released under the [Apache 2.0 License](LICENSE). The source code is fully open, but the layered.ai name and brand are trademarks of LAYERED AI LIMITED (UK company number: 17056830).
 
 - [TRADEMARK.md](TRADEMARK.md) - trademark and brand policy
 - [CLA.md](CLA.md) - contributor license agreement

data/TRADEMARK.md

@@ -1,7 +1,7 @@
 # layered.ai Trademark and Brand Policy
 
 The layered.ai name, logo, domain names, and related brand assets are
-trademarks of Layered AI.
+trademarks of LAYERED AI LIMITED (UK company number: 17056830).
 
 ## Scope
 
@@ -11,7 +11,7 @@ but does not grant rights to use the layered.ai name, logo, or branding.
 
 ## Restrictions
 
-Without a separate written brand license from Layered AI, you may not:
+Without a separate written brand license from LAYERED AI LIMITED, you may not:
 
 - Use the name "layered.ai" to identify a fork, derivative work, or hosted service
 - Use the layered.ai logo or visual identity

data/app/assets/tailwind/layered/ui/styles.css

@@ -107,11 +107,6 @@
            text-sm text-foreground-muted leading-relaxed;
   }
 
-  p a,
-  td a {
-    @apply link;
-  }
-
   ul, ol {
     @apply mt-0
            text-sm text-foreground-muted;
@@ -225,16 +220,18 @@
          transition-[margin] duration-300;
 }
 
-@utility link {
-  @apply underline
-         text-foreground hover:text-foreground-muted
-         focus-ring rounded-sm;
-}
-
 .l-ui-utility--mt-0 {
   @apply !mt-0 md:!mt-0;
 }
 
+.l-ui-utility--mt-4 {
+  @apply !mt-4 md:!mt-4;
+}
+
+.l-ui-utility--mt-8 {
+  @apply !mt-8 md:!mt-8;
+}
+
 .l-ui-utility---mr-2 {
   @apply !-mr-2 md:!-mr-2;
 }
@@ -320,10 +317,6 @@
   @apply line-through;
 }
 
-.l-ui-markdown a {
-  @apply link;
-}
-
 .l-ui-markdown ul {
   @apply my-3 pl-5
          text-sm
@@ -437,6 +430,12 @@
   @apply page;
 }
 
+.l-ui-page a:not([class*="l-ui-button"]) {
+  @apply underline
+         text-foreground hover:text-foreground-muted
+         focus-ring rounded-sm;
+}
+
 .l-ui-page--with-navigation {
   @apply page md:ml-[240px];
 }
@@ -668,7 +667,7 @@
 /* Buttons */
 
 @utility button {
-  @apply flex items-center justify-center
+  @apply flex items-center justify-center gap-2
          px-4 min-h-[44px]
          text-sm font-medium
          cursor-pointer
@@ -1039,10 +1038,6 @@
 .l-ui-table__cell--primary {
   @apply table-cell-padding
          text-left text-sm font-medium whitespace-nowrap;
-
-  & a {
-    @apply link;
-  }
 }
 
 .l-ui-table__cell--action {
@@ -1312,6 +1307,10 @@
   @apply flex-1;
 }
 
+.l-ui-panel__header-heading .l-ui-select {
+  @apply mb-2;
+}
+
 .l-ui-panel__header-actions {
   @apply flex items-center
          gap-2;
@@ -1324,7 +1323,18 @@
 .l-ui-panel__body {
   @apply flex-1
          p-4 space-y-4
-         overflow-y-auto;
+         overflow-y-auto
+         overscroll-contain;
+}
+
+.l-ui-panel__body:has(.l-ui-conversation__container) {
+  @apply relative
+         overflow-hidden;
+}
+
+.l-ui-panel__body .l-ui-conversation__container {
+  @apply absolute inset-0
+         p-4 pt-0;
 }
 
 .l-ui-panel__input {
@@ -1342,14 +1352,16 @@
 .l-ui-conversation__container {
   @apply flex flex-col
          gap-4
-         h-full
+         flex-1 min-h-0
          bg-background;
 }
 
+.l-ui-page:has(.l-ui-conversation__container) {
+  @apply max-h-dvh overflow-hidden;
+}
+
 .l-ui-conversation__messages {
   @apply flex-1
-         py-4
-         border-b border-border
          overflow-y-auto;
 }
 
@@ -1394,7 +1406,7 @@
   @apply flex items-center justify-center shrink-0
          w-7 h-7
          text-xs font-bold
-         bg-surface-active
+         bg-surface
          text-foreground
          rounded-full;
 }
@@ -1405,7 +1417,7 @@
          w-full min-w-0
          bg-surface
          text-foreground
-         rounded-lg;
+         rounded-md;
 }
 
 .l-ui-message--sent .l-ui-message__bubble {
@@ -1527,7 +1539,7 @@
          border-0 md:border md:border-border
          bg-background
          text-foreground
-         rounded-none md:rounded-md;
+         rounded-none md:rounded-sm;
 }
 
 .l-ui-modal::backdrop {
@@ -1544,3 +1556,21 @@
   @apply px-5 py-4
          overflow-y-auto;
 }
+
+/* Safari */
+@media (max-width: 767px) {
+  /* Prevent Safari auto-zoom on input focus */
+  input,
+  textarea,
+  select {
+    font-size: 16px !important;
+  }
+
+  /* iOS Safari ignores overflow:hidden on body; position:fixed is required */
+  .l-ui-scroll-lock {
+    position: fixed;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+}

data/app/javascript/layered_ui/controllers/l_ui/panel_controller.js

@@ -10,7 +10,7 @@ export default class extends Controller {
     this.previousActiveElement = null
     this.isOpen = false
     this.boundKeyboardShortcut = this.handleKeyboardShortcut.bind(this)
-
+    this.boundCloseOnNavigate = this.closeOnMobileNavigate.bind(this)
     const page = document.querySelector(".l-ui-page")
     if (page) page.style.transition = "none"
     this.containerTarget.style.transition = "none"
@@ -27,11 +27,13 @@ export default class extends Controller {
     })
 
     document.addEventListener('keydown', this.boundKeyboardShortcut)
+    document.addEventListener('turbo:visit', this.boundCloseOnNavigate)
   }
 
   disconnect() {
     clearAnnounceTimeout(this)
     document.removeEventListener('keydown', this.boundKeyboardShortcut)
+    document.removeEventListener('turbo:visit', this.boundCloseOnNavigate)
     this.previousActiveElement = null
   }
 
@@ -84,10 +86,13 @@ export default class extends Controller {
     this.containerTarget.setAttribute("aria-hidden", "false")
     this.containerTarget.removeAttribute("inert")
 
-    // On mobile, prevent background content from being tabbable
+    // On mobile, prevent background content from being tabbable and scrollable
     if (isMobile()) {
       const main = document.querySelector("main")
       if (main) main.setAttribute("inert", "")
+      this.savedScrollY = window.scrollY
+      document.body.style.top = `-${this.savedScrollY}px`
+      document.body.classList.add("l-ui-scroll-lock")
     }
 
     storageSet("panelOpen", "true")
@@ -119,6 +124,11 @@ export default class extends Controller {
 
     const main = document.querySelector("main")
     if (main) main.removeAttribute("inert")
+    document.body.classList.remove("l-ui-scroll-lock")
+    document.body.style.top = ""
+    if (this.savedScrollY !== undefined) {
+      window.scrollTo(0, this.savedScrollY)
+    }
 
     storageSet("panelOpen", "false")
     this.updatePageMargin()
@@ -133,6 +143,13 @@ export default class extends Controller {
     }
   }
 
+  // Close the panel on mobile when navigating to a new page
+  closeOnMobileNavigate() {
+    if (this.isOpen && isMobile()) {
+      this.close(false)
+    }
+  }
+
   // Update the page margin to accommodate the open panel on desktop
   updatePageMargin() {
     const page = document.querySelector(".l-ui-page")

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

@@ -18,7 +18,7 @@
       </div>
 
       <% if devise_mapping.rememberable? %>
-        <div class="l-ui-form__group l-ui-container--checkbox l-ui-utility--mt-xl">
+        <div class="l-ui-form__group l-ui-container--checkbox l-ui-utility--mt-8">
           <%= f.check_box :remember_me %>
           <%= f.label :remember_me, class: "l-ui-label--checkbox" %>
         </div>

data/app/views/layouts/layered_ui/_panel.html.erb

@@ -62,7 +62,7 @@
     tabindex="-1"
     title="Toggle panel (Ctrl/⌘+i). Move to corners (Ctrl/⌘ + Alt/⌥ + 1/2/3/4), double-click, or drag."
     data-controller="l-ui--panel-button"
-    data-action="click->l-ui--panel-button#queueToggle dblclick->l-ui--panel-button#cycleCorner mousedown->l-ui--panel-button#startDrag touchstart:passive->l-ui--panel-button#startDrag"
+    data-action="click->l-ui--panel-button#queueToggle dblclick->l-ui--panel-button#cycleCorner mousedown->l-ui--panel-button#startDrag touchstart->l-ui--panel-button#startDrag"
     data-l-ui--panel-target="actionButton"
   >
     <%= image_tag("layered_ui/panel_icon_light.svg", alt: "", class: "l-ui-icon--lg l-ui-panel__icon--light", aria: { hidden: true }) %>

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - layered.ai
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-27 00:00:00.000000000 Z
+date: 2026-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -236,6 +236,8 @@ metadata:
   source_code_uri: https://github.com/layered-ai-public/layered-ui-rails
   bug_tracker_uri: https://github.com/layered-ai-public/layered-ui-rails/issues
   changelog_uri: https://github.com/layered-ai-public/layered-ui-rails/blob/main/CHANGELOG.md
+  documentation_uri: https://www.layered.ai
+  discord_uri: https://discord.gg/aCGqz9Bx
   rubygems_mfa_required: 'true'
 post_install_message: |
   To complete installation, run: