senren-ui 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 789980b8355793bdfee36c7d930fe41a2c3ed379bb3a38b6960485c62acc9c69
-  data.tar.gz: d54ebbc90d3ae06c0ea76a3cb5c6d331afb1598eec69c372358399eb6cd1b5f7
+  metadata.gz: 9b6cd2ac8863ce382b37a0f2e4d4efe3b109628d396be64186ecc3458b2afa22
+  data.tar.gz: a91a6fa5df442ae7c67c2a12dbe3b074f6ae7d2437edd9e3739eee1fd9d797ae
 SHA512:
-  metadata.gz: f863e1bb2132548ee87c6eae7b113f3b0fad9ef2b6d388e4c9cf688852a14c43812c95dc75fdc08c2123dfb0de7541a5cf4c47b595e47c9eb23220a4f7cace6f
-  data.tar.gz: '039c3f45102ebef05ef9dcd4cf2c8f64c7bdc8faa710baeffbe4f87ed061afc547f9390b2a2a8fea708e773d17bac07e47e06c05a2115c66217100a1f0632445'
+  metadata.gz: cf6dfdfda509f6bb568b50c0d5ea488d7c00c38537ee74621f2e05907dc2c5f78f7354ca21ccd04b055ba2f9df0b94d5da85606cdde91e271ea03526bb3018d9
+  data.tar.gz: a391a49b1f9152f7b2ccdab3c31276d34cc199929e5315bc10185c51ff6bf660101a42ea56a455df6def66fc215d66097b0610ea919d2531cda606a5076537a2

data/CHANGELOG.md

@@ -9,6 +9,18 @@ bug fixes only.
 
 ## [Unreleased]
 
+## [0.1.2] — 2026-05-02
+
+### Fixed
+
+- Progress component no longer paints variant background on the full root
+  container. Variant color is now applied only to the indicator fill bar.
+- Improved progress visuals by separating track/fill styling more clearly
+  (`h-2.5` track) and using smoother fill-width transition
+  (`transition-[width] duration-300 ease-out`).
+
+## [0.1.1] — 2026-05-02
+
 ### Added
 
 - Initial gem skeleton, engine, and version constant.
@@ -26,8 +38,32 @@ bug fixes only.
 - Centralized `.senren/skill.md` system with preserved user-region.
 - `public/llms.txt` and `public/llms-full.txt` generation.
 - `apps/todolist` Rails app dogfooding the gem via local path.
+- Bun-based JS tooling for Stimulus templates:
+  - `bun run controllers:syntax`
+  - `bun run controllers:lint`
+  - `bun run controllers:lint:fix`
+  - `bun run controllers:check`
+- Biome lint configuration (`biome.json`) scoped to
+  `templates/controllers/**/*.js`.
+
+### Changed
+
+- `SidebarComponent` template + Stimulus controller now support robust
+  compact/expanded syncing:
+  - hides brand/footer in compact mode
+  - shows link initials in compact mode and full labels in expanded mode
+  - uses a hamburger icon toggle with `aria-expanded`
+  - applies smoother width/label transition behavior
+- `TabsComponent` template + Stimulus controller now use
+  `data-state="active|inactive"` for tab and panel state, so header active
+  styling updates correctly after client-side tab switches.
+
+### Fixed
+
+- Docs-site feedback issues now resolved at gem template level (not app-only):
+  sidebar compact truncation UX and tabs header active-state mismatch.
 
-## [0.1.0] — TBD
+## [0.1.0] — 2026-04-27
 
 First tagged release once the Unreleased entries are validated end-to-end
 in `apps/todolist` per `plans/011_release_checklist.md`.

data/CONTRIBUTING.md

@@ -19,7 +19,9 @@ this file before opening a PR.
 git clone <repo>
 cd senren-rails
 bundle install
+bun install
 bundle exec rake test
+bun run controllers:check
 ```
 
 To exercise the gem against a real Rails app, use the bundled workspace:
@@ -61,3 +63,5 @@ bin/rails server
 - One logical change per commit.
 - Mention the affected plan and history files in the commit body.
 - Run `bundle exec rake test` before pushing.
+- Run `bun run controllers:check` before pushing if you touched
+  `templates/controllers/*.js`.

data/README.md

@@ -118,7 +118,10 @@ See `registry/components.yml` for the canonical list. v0.1 ships:
 
 ```bash
 bundle install
+bun install
 bundle exec rake test            # gem tests
+bun run controllers:check        # lint + syntax check for templates/controllers/*.js
+bun run controllers:lint:fix     # auto-fix lint issues for controllers
 bundle exec rake test:system     # Stimulus/system tests
 ```
 

data/lib/senren/rails/registry.rb

@@ -61,12 +61,12 @@ module Senren
         @components.values
       end
 
-      def each(&block)
-        all.each(&block)
+      def each(&)
+        all.each(&)
       end
 
-      def find_each(&block)
-        each(&block)
+      def find_each(&)
+        each(&)
       end
 
       def names

data/lib/senren/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Senren
   module Rails
-    VERSION = '0.1.0'
+    VERSION = '0.1.2'
   end
 end

data/templates/components/progress/progress_component.html.erb

@@ -5,7 +5,7 @@
       <span class="text-[hsl(var(--senren-muted-foreground))]"><%= percent %>%</span>
     </div>
   <% end %>
-  <div role="progressbar" aria-valuemin="0" aria-valuemax="<%= max.to_i %>" aria-valuenow="<%= value.to_i %>" class="h-2 w-full overflow-hidden rounded-full bg-[hsl(var(--senren-muted))]">
-    <div class="h-full rounded-full transition-all <%= self.class::VARIANTS[variant] %>" style="width: <%= percent %>%"></div>
+  <div role="progressbar" aria-valuemin="0" aria-valuemax="<%= max.to_i %>" aria-valuenow="<%= value.to_i %>" class="h-2.5 w-full overflow-hidden rounded-full bg-[hsl(var(--senren-muted))]">
+    <div class="h-full rounded-full transition-[width] duration-300 ease-out <%= indicator_class %>" style="width: <%= percent %>%"></div>
   </div>
 </div>

data/templates/components/progress/progress_component.rb

@@ -3,6 +3,12 @@
 module Senren
   class ProgressComponent < BaseComponent
     VARIANTS = {
+      default: '',
+      success: '',
+      warning: '',
+      destructive: ''
+    }.freeze
+    INDICATOR_VARIANTS = {
       default: 'bg-[hsl(var(--senren-primary))]',
       success: 'bg-[hsl(var(--senren-success))]',
       warning: 'bg-[hsl(var(--senren-warning))]',
@@ -22,5 +28,9 @@ module Senren
     def percent
       ((value / max) * 100).clamp(0, 100).round
     end
+
+    def indicator_class
+      INDICATOR_VARIANTS.fetch(variant)
+    end
   end
 end

data/templates/components/sidebar/sidebar_component.html.erb

@@ -1,14 +1,24 @@
-<aside <%= tag.attributes(**root_attrs("flex min-h-80 flex-col rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))] #{self.class::VARIANTS[variant]}", data: { controller: "senren--sidebar" })) %>>
+<aside <%= tag.attributes(**root_attrs("flex min-h-80 flex-col overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))] transition-[width] duration-300 ease-in-out", data: { controller: "senren--sidebar" })) %>>
   <div class="mb-4 flex items-center justify-between gap-2 px-2">
-    <div class="truncate font-display text-sm font-semibold tracking-tight"><%= brand %></div>
-    <button type="button" class="cursor-pointer rounded-md px-2 py-1 text-xs text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]" data-action="click->senren--sidebar#toggle" aria-label="Toggle sidebar">Toggle</button>
+    <div data-senren--sidebar-target="brand" class="truncate font-display text-sm font-semibold tracking-tight"><%= brand %></div>
+    <button type="button" data-senren--sidebar-target="toggleButton" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-[hsl(var(--senren-muted-foreground))] transition-colors hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]" data-action="click->senren--sidebar#toggle" aria-label="Toggle sidebar" aria-expanded="<%= variant != :compact %>">
+      <span class="sr-only">Toggle sidebar</span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M3 6h18" />
+        <path d="M3 12h18" />
+        <path d="M3 18h18" />
+      </svg>
+    </button>
   </div>
   <nav aria-label="<%= label %>" class="space-y-1">
     <% items.each do |item| %>
-      <%= link_to item[:label], item[:href], class: "block truncate rounded-md px-3 py-2 text-sm transition-colors #{item[:active] ? "bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))]" : "text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]"}" %>
+      <%= link_to item[:href], title: item[:label], data: { "senren--sidebar-target": "link" }, class: "flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-all duration-200 #{item[:active] ? "bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))]" : "text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]"}" do %>
+        <span data-senren--sidebar-target="linkInitial" class="inline-flex h-4 w-0 items-center justify-center overflow-hidden text-xs font-semibold uppercase tracking-wide opacity-0 transition-all duration-200"><%= item[:label].to_s.first&.upcase || "•" %></span>
+        <span data-senren--sidebar-target="linkLabel" class="max-w-40 truncate opacity-100 transition-all duration-200"><%= item[:label] %></span>
+      <% end %>
     <% end %>
   </nav>
   <% if content? %>
-    <div class="mt-auto pt-4 text-xs text-[hsl(var(--senren-muted-foreground))]"><%= content %></div>
+    <div data-senren--sidebar-target="footer" class="mt-auto pt-4 text-xs text-[hsl(var(--senren-muted-foreground))]"><%= content %></div>
   <% end %>
 </aside>

data/templates/components/tabs/tabs_component.html.erb

@@ -2,7 +2,7 @@
   <div role="tablist" aria-label="<%= label %>" class="<%= self.class::VARIANTS[variant] %> flex flex-wrap items-center gap-1">
     <% items.each do |item| %>
       <% selected = active_item?(item) %>
-      <button type="button" role="tab" id="<%= item[:id] %>-tab" aria-selected="<%= selected %>" aria-controls="<%= item[:id] %>-panel" tabindex="<%= selected ? 0 : -1 %>" data-senren--tabs-target="tab" data-panel-id="<%= item[:id] %>" data-action="click->senren--tabs#select keydown->senren--tabs#onKey" class="cursor-pointer rounded-[calc(var(--senren-radius)-2px)] px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] <%= selected ? "bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] shadow-sm" : "text-[hsl(var(--senren-muted-foreground))] hover:text-[hsl(var(--senren-foreground))]" %>">
+      <button type="button" role="tab" id="<%= item[:id] %>-tab" aria-selected="<%= selected %>" aria-controls="<%= item[:id] %>-panel" tabindex="<%= selected ? 0 : -1 %>" data-senren--tabs-target="tab" data-panel-id="<%= item[:id] %>" data-state="<%= selected ? "active" : "inactive" %>" data-action="click->senren--tabs#select keydown->senren--tabs#onKey" class="cursor-pointer rounded-[calc(var(--senren-radius)-2px)] px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] text-[hsl(var(--senren-muted-foreground))] data-[state=active]:bg-[hsl(var(--senren-background))] data-[state=active]:text-[hsl(var(--senren-foreground))] data-[state=active]:shadow-sm data-[state=inactive]:hover:text-[hsl(var(--senren-foreground))]">
         <%= item[:label] %>
       </button>
     <% end %>
@@ -10,7 +10,7 @@
   <div class="mt-4">
     <% items.each do |item| %>
       <% selected = active_item?(item) %>
-      <section id="<%= item[:id] %>-panel" role="tabpanel" aria-labelledby="<%= item[:id] %>-tab" data-senren--tabs-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless selected %> class="rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 text-sm text-[hsl(var(--senren-card-foreground))]">
+      <section id="<%= item[:id] %>-panel" role="tabpanel" aria-labelledby="<%= item[:id] %>-tab" data-senren--tabs-target="panel" data-panel-id="<%= item[:id] %>" data-state="<%= selected ? "active" : "inactive" %>" <%= "hidden" unless selected %> class="rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 text-sm text-[hsl(var(--senren-card-foreground))]">
         <%= item[:content].presence || content %>
       </section>
     <% end %>

data/templates/controllers/sidebar_controller.js

@@ -3,8 +3,52 @@ import { Controller } from "@hotwired/stimulus"
 // senren--sidebar
 // Local UI: compact/expanded visual state only.
 export default class extends Controller {
+  static targets = ["brand", "footer", "toggleButton", "link", "linkLabel", "linkInitial"]
+
+  connect() {
+    this.syncState()
+  }
+
   toggle() {
-    this.element.classList.toggle("w-20")
-    this.element.classList.toggle("w-64")
+    const isCompact = this.element.classList.contains("w-20")
+    this.element.classList.toggle("w-20", !isCompact)
+    this.element.classList.toggle("w-64", isCompact)
+    this.syncState()
+  }
+
+  syncState() {
+    const isCompact = this.element.classList.contains("w-20")
+
+    if (this.hasBrandTarget) {
+      this.brandTarget.classList.toggle("hidden", isCompact)
+    }
+
+    if (this.hasFooterTarget) {
+      this.footerTarget.classList.toggle("hidden", isCompact)
+    }
+
+    this.linkTargets.forEach((link) => {
+      link.classList.toggle("justify-center", isCompact)
+      link.classList.toggle("px-2", isCompact)
+      link.classList.toggle("px-3", !isCompact)
+    })
+
+    this.linkLabelTargets.forEach((label) => {
+      label.classList.toggle("max-w-0", isCompact)
+      label.classList.toggle("opacity-0", isCompact)
+      label.classList.toggle("max-w-40", !isCompact)
+      label.classList.toggle("opacity-100", !isCompact)
+    })
+
+    this.linkInitialTargets.forEach((initial) => {
+      initial.classList.toggle("w-4", isCompact)
+      initial.classList.toggle("opacity-100", isCompact)
+      initial.classList.toggle("w-0", !isCompact)
+      initial.classList.toggle("opacity-0", !isCompact)
+    })
+
+    if (this.hasToggleButtonTarget) {
+      this.toggleButtonTarget.setAttribute("aria-expanded", String(!isCompact))
+    }
   }
 }

data/templates/controllers/tabs_controller.js

@@ -26,9 +26,12 @@ export default class extends Controller {
       const selected = target === tab
       target.setAttribute("aria-selected", selected ? "true" : "false")
       target.tabIndex = selected ? 0 : -1
+      target.dataset.state = selected ? "active" : "inactive"
     })
     this.panelTargets.forEach((panel) => {
-      panel.hidden = panel.dataset.panelId !== panelId
+      const selected = panel.dataset.panelId === panelId
+      panel.hidden = !selected
+      panel.dataset.state = selected ? "active" : "inactive"
     })
   }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: senren-ui
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - vutt