Skip to content
Merged
Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
ac6578a
Add markdown support to conversations
thomasgallagher Feb 18, 2026
32ea486
Better spacing
thomasgallagher Feb 18, 2026
0190f29
More gaps
thomasgallagher Feb 18, 2026
881b1cc
Fix select, rebuild css from engine source every 5 secs in dev
thomasgallagher Feb 19, 2026
28f026b
Add a utility to close a gap
thomasgallagher Feb 19, 2026
72fc7c8
Tweaks
thomasgallagher Feb 19, 2026
7efda77
Better icons
thomasgallagher Feb 19, 2026
9ff09b2
Add token fade in effect
thomasgallagher Feb 19, 2026
e3d71cf
Better send graphic
thomasgallagher Feb 19, 2026
0dbb63e
Better table headers
thomasgallagher Feb 19, 2026
6d01f51
Better message styling
thomasgallagher Feb 19, 2026
8f9ba72
Better message styles
thomasgallagher Feb 19, 2026
b743efb
Fix margins on small screens where vertically centered
thomasgallagher Feb 20, 2026
fb6c10c
Fix overflow on code blocks and surfaces
thomasgallagher Feb 20, 2026
5ec2d37
Movable button
thomasgallagher Feb 20, 2026
554581c
Code review and WCAG
thomasgallagher Feb 20, 2026
9deaf80
Better dragging
thomasgallagher Feb 20, 2026
d64ee0d
More WCAG
thomasgallagher Feb 20, 2026
d6c4118
Refactor panel JS
thomasgallagher Feb 20, 2026
6a3477d
WCAG First pass
thomasgallagher Feb 21, 2026
72dc900
WCAG second pass
thomasgallagher Feb 21, 2026
245c9df
WCAG third pass
thomasgallagher Feb 21, 2026
9a51fdd
WCAG table buttons
thomasgallagher Feb 21, 2026
e28e7fc
Table improvements
thomasgallagher Feb 21, 2026
d0b322e
Fix tabs issue and switch contrast
thomasgallagher Feb 21, 2026
67a99c6
Add audit
thomasgallagher Feb 21, 2026
39944cd
Add audit to readme and welcome
thomasgallagher Feb 21, 2026
10516b7
Pre-release issues
thomasgallagher Feb 21, 2026
11927ca
New icon
thomasgallagher Feb 21, 2026
94ba771
Refactor JS
thomasgallagher Feb 21, 2026
b621d16
More feedback
thomasgallagher Feb 21, 2026
0c3bad1
Better conversation styling
thomasgallagher Feb 21, 2026
273d092
Set the received message width
thomasgallagher Feb 23, 2026
256719c
Add scroll to bottom
thomasgallagher Feb 23, 2026
be834b0
Move icons to image files
thomasgallagher Feb 23, 2026
9d8b1ac
Remove l-ui-icon--dark-invert as it is not needed
thomasgallagher Feb 24, 2026
c82e6d6
Invert the scroll to bottom icon color
thomasgallagher Feb 24, 2026
b9ff21a
Fix markdown table overflows
thomasgallagher Feb 24, 2026
367856b
1 second fade in
thomasgallagher Feb 24, 2026
29a49b6
User main_app devise routes
thomasgallagher Feb 25, 2026
0a8edbb
Form field should be a utility
thomasgallagher Feb 26, 2026
84f8ce8
Link utility
thomasgallagher Feb 26, 2026
8948ef2
Fix odd scrolling
thomasgallagher Feb 26, 2026
491e226
Better secondary nav styling
thomasgallagher Feb 26, 2026
fc282f3
Fix vertically centered
thomasgallagher Feb 26, 2026
8e82701
0.1.2
thomasgallagher Feb 27, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,38 @@ Guidance for AI agents working in this repository.
- Document new styles in the dummy app
- Use l-ui classes only in engine views, with no additional Tailwind utilities, as Tailwind classes referenced only inside the engine will not be generated by the host app’s build
- Dummy app documentation pages may use additional Tailwind utilities, but should favour l-ui classes where possible
- Retain WCAG 2.2 AA compliance
- Importmap for JS (no bundler)

- CRITICAL: Retain WCAG 2.2 AA compliance. Do not be too pedantic though as this introduces audit loops which are undesirable.
- A WCAG 2.2 AA table looks like this:
```
<table>
<caption>Agent availability by region</caption>

<thead>
<tr>
<th scope="col">Agent</th>
<th scope="col">Region</th>
<th scope="col">Status</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">Agent A</th>
<td>UK</td>
<td>Available</td>
</tr>
<tr>
<th scope="row">Agent B</th>
<td>EU</td>
<td>Busy</td>
</tr>
<tr>
<th scope="row">Agent C</th>
<td>US</td>
<td>Offline</td>
</tr>
</tbody>
</table>
```
21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file. This projec

## [Unreleased]

## [0.1.2] - 2026-02-20

### Added

- Conversation component with markdown support, typing indicators, and token fade-in animation
- Movable panel toggle button with drag-and-drop repositioning

### Changed

- Improved message styles and spacing
- Better table header styling
- Switch track unchecked state uses neutral colour instead of danger
- Extracted shared JavaScript into utility modules (announce, layout, storage)
- Rebuilt CSS from engine source every 5 seconds in development

### Fixed

- Overflow on code blocks and surfaces
- Margins on small screens when vertically centred
- Select element styling

## [0.1.1] - 2026-02-17

### Added
Expand Down
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
layered-ui-rails (0.1.1)
layered-ui-rails (0.1.2)
rails (~> 8.0)

GEM
Expand Down
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design token
<table align="center">
<tr>
<td align="center">
<img src="test/dummy/app/assets/images/light_desktop.webp" alt="Light theme (desktop)" height="300">
<img src="test/dummy/app/assets/images/light_mobile.webp" alt="Light theme (mobile)" height="300">
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/light_desktop.webp" alt="Light theme (desktop)" height="300">
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/light_mobile.webp" alt="Light theme (mobile)" height="300">
</td>
<td width="20"></td>
<td align="center">
<img src="test/dummy/app/assets/images/dark_desktop.webp" alt="Dark theme (desktop)" height="300">
<img src="test/dummy/app/assets/images/dark_mobile.webp" alt="Dark theme (mobile)" height="300">
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/dark_desktop.webp" alt="Dark theme (desktop)" height="300">
<img src="https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/dark_mobile.webp" alt="Dark theme (mobile)" height="300">
</td>
</tr>
<tr>
Expand Down Expand Up @@ -60,12 +60,14 @@ Then update your application layout to render the engine layout:
- **Components** - buttons, forms, surfaces, tables, tabs, notices, badges, conversations, modals, and pagination
- **Optional integrations** - Devise authentication and Pagy pagination with styled views
- **Customisable branding** - Override the default logos and icons and colors
- **Google Lighthouse** - `layered-ui-rails` scores a [perfect 100](test/dummy/app/assets/images/lighthouse.webp) across all four Google Lighthouse categories - performance, accessibility, best practices, and SEO
- **Google Lighthouse** - `layered-ui-rails` scores a [perfect 100](https://github.com/layered-ai-public/layered-ui-rails/raw/refs/heads/main/test/dummy/app/assets/images/lighthouse.webp) across all four Google Lighthouse categories - performance, accessibility, best practices, and SEO

## Documentation

An online version of the documentation is available at **[layered-ui-rails.layered.ai](https://layered-ui-rails.layered.ai)**.

The latest accessibility audit is available at **[audits/accessibility/codex-5_3.md](https://github.com/layered-ai-public/layered-ui-rails/blob/main/audits/accessibility/codex-5_3.md)**.

You can also run the included dummy app locally for development and testing:

```bash
Expand Down
Loading