aeno 0.0.3

data/app/components/aeno/primitives/conversation/styles.css

@@ -0,0 +1,221 @@
+/* Conversation */
+.cp-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--ui-background);
+}
+
+.cp-conversation__header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--ui-border);
+  background: var(--ui-background);
+}
+
+.cp-conversation__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--ui-foreground);
+  margin: 0;
+}
+
+.cp-conversation__messages {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cp-conversation__empty {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-conversation__empty-content {
+  text-align: center;
+}
+
+.cp-conversation__empty-title {
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.cp-conversation__empty-subtitle {
+  font-size: 0.875rem;
+}
+
+.cp-conversation__streaming-hidden {
+  display: none;
+}
+
+/* Conversation Message */
+.cp-conversation-message {
+  padding: 2rem 0;
+}
+
+.cp-conversation-message--user {
+  background: var(--ui-background);
+}
+
+.cp-conversation-message--assistant {
+  background: var(--ui-accent);
+}
+
+.cp-conversation-message--error {
+  background: var(--ui-background);
+}
+
+.cp-conversation-message--system {
+  background: var(--ui-accent);
+}
+
+.cp-conversation-message__container {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.cp-conversation-message__row {
+  display: flex;
+  gap: 1rem;
+}
+
+.cp-conversation-message__avatar-wrapper {
+  flex-shrink: 0;
+}
+
+.cp-conversation-message__avatar {
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  background: var(--ui-muted-foreground);
+}
+
+.cp-conversation-message__avatar--user {
+  background: var(--ui-primary);
+}
+
+.cp-conversation-message__avatar--assistant {
+  background: #16a34a;
+}
+
+.cp-conversation-message__avatar--error {
+  background: var(--ui-destructive);
+}
+
+.cp-conversation-message__avatar--system {
+  background: var(--ui-muted-foreground);
+}
+
+.cp-conversation-message__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cp-conversation-message__role {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ui-foreground);
+}
+
+.cp-conversation-message__body {
+  white-space: pre-wrap;
+  color: var(--ui-foreground);
+}
+
+.cp-conversation-message__timestamp {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--ui-muted-foreground);
+}
+
+/* Conversation Streaming Indicator */
+.cp-conversation-streaming {
+  padding: 2rem 0;
+  background: var(--ui-accent);
+}
+
+.cp-conversation-streaming__container {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.cp-conversation-streaming__row {
+  display: flex;
+  gap: 1rem;
+}
+
+.cp-conversation-streaming__avatar-wrapper {
+  flex-shrink: 0;
+}
+
+.cp-conversation-streaming__avatar {
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  background: var(--ui-muted-foreground);
+}
+
+.cp-conversation-streaming__avatar--user {
+  background: var(--ui-primary);
+}
+
+.cp-conversation-streaming__avatar--assistant {
+  background: #16a34a;
+}
+
+.cp-conversation-streaming__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cp-conversation-streaming__label {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ui-foreground);
+}
+
+.cp-conversation-streaming__dots {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cp-conversation-streaming__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: var(--ui-muted-foreground);
+  animation: cp-bounce 1s infinite;
+}
+
+@keyframes cp-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-0.25rem);
+  }
+}
+
+/* Conversation User Box */
+.cp-conversation-user-box {
+  /* Container for user input - styled by content */
+}

data/app/components/aeno/primitives/conversation/user_message_box/component.html.erb

@@ -0,0 +1 @@
+<div class="cp-conversation-user-box"><%= content %></div>

data/app/components/aeno/primitives/conversation/user_message_box/component.rb

@@ -0,0 +1,4 @@
+module Aeno::Primitives::Conversation::UserMessageBox
+  class Component < ::Aeno::ApplicationViewComponent
+  end
+end

data/app/components/aeno/primitives/drawer/component.html.erb

@@ -0,0 +1,43 @@
+<div class="cp-drawer" data-controller="<%= controller_name %>" id="<%= id %>">
+  <% if trigger %>
+    <div data-action="click-><%= controller_name %>#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+
+  <% wrapper = -> (&block) { standalone ? capture(&block) : turbo_frame_tag("drawer", &block) } %>
+  <%= wrapper.call do %>
+    <div data-action="<%= data_actions %>">
+      <button
+        type="button"
+        class="cp-drawer__backdrop"
+        data-action="click-><%= controller_name %>#close"
+        data-<%= controller_name %>-target="background"
+      ></button>
+      <div
+        class="cp-drawer__panel"
+        style="width: <%= width %>"
+        data-<%= controller_name %>-target="wrapper"
+      >
+        <div class="cp-drawer__container">
+          <% if header %>
+            <div class="cp-drawer__header">
+              <div class="cp-drawer__header-content"><%= header %></div>
+              <button data-action="click-><%= controller_name %>#close" type="button" class="cp-drawer__close">
+                <%= lucide_icon("x", class: "cp-drawer__close-icon") %>
+              </button>
+            </div>
+          <% end %>
+          <div class="cp-drawer__body">
+            <%= content %>
+          </div>
+          <% if footer %>
+            <div class="cp-drawer__footer">
+              <%= footer %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/aeno/primitives/drawer/component.rb

@@ -0,0 +1,33 @@
+module Aeno::Primitives::Drawer
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :width, description: "Drawer width (CSS value)", default: -> { "33%" }
+    prop :id, description: "HTML id attribute", optional: true
+    prop :standalone, description: "Skip turbo frame wrapper", default: -> { false }
+    prop :form_submit_close, description: "Close on form submit", default: -> { true }
+
+    renders_one(:header)
+    renders_one(:trigger)
+    renders_one(:footer)
+
+    examples("Drawer", description: "Slide-in panel from the right") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+
+      b.example(:widths, title: "Widths") do |e|
+        e.preview width: "25%"
+        e.preview width: "50%"
+        e.preview width: "400px"
+      end
+    end
+
+    private
+
+    def data_actions
+      actions = []
+      actions << "turbo:frame-load->#{controller_name}#open" unless standalone
+      actions << "turbo:submit-end->#{controller_name}#closeOnSubmit" if form_submit_close
+      actions.join(" ").presence
+    end
+  end
+end

data/app/components/aeno/primitives/drawer/controller.js

@@ -0,0 +1,104 @@
+import { Controller } from "@hotwired/stimulus";
+
+const BASE_Z_INDEX = 40;
+
+export default class extends Controller {
+  static targets = ["background", "wrapper"];
+
+  connect() {
+    this.#stackAboveExisting();
+    document.addEventListener("keydown", this.handleKeydown);
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown);
+    this.#restoreBodyScroll();
+  }
+
+  handleKeydown = (event) => {
+    if (event.key === "Escape") this.#closeTopmost();
+  };
+
+  open() {
+    requestAnimationFrame(() => {
+      this.backgroundTarget.classList.add("cp-drawer__backdrop--open");
+      this.wrapperTarget.classList.add("cp-drawer__panel--open");
+      document.body.style.overflow = "hidden";
+    });
+  }
+
+  close() {
+    this.backgroundTarget.classList.remove("cp-drawer__backdrop--open");
+    this.wrapperTarget.classList.remove("cp-drawer__panel--open");
+    this.#restoreBodyScroll();
+
+    setTimeout(() => {
+      const frame = this.element.querySelector("turbo-frame");
+      if (frame) {
+        frame.src = undefined;
+        frame.innerHTML = "";
+      }
+    }, 300);
+  }
+
+  closeOnSubmit(event) {
+    if (event.detail?.success) {
+      this.close();
+    }
+  }
+
+  // Private
+
+  #stackAboveExisting() {
+    if (!this.hasBackgroundTarget || !this.hasWrapperTarget) return;
+
+    const allBackgrounds = document.querySelectorAll(
+      `[data-${this.identifier}-target="background"]`,
+    );
+    const allWrappers = document.querySelectorAll(
+      `[data-${this.identifier}-target="wrapper"]`,
+    );
+
+    const highest = Math.max(
+      BASE_Z_INDEX,
+      this.#highestZIndex(allBackgrounds),
+      this.#highestZIndex(allWrappers),
+    );
+
+    this.backgroundTarget.style.zIndex = highest + 1;
+    this.wrapperTarget.style.zIndex = highest + 2;
+  }
+
+  #highestZIndex(elements) {
+    return Math.max(
+      0,
+      ...Array.from(elements).map(
+        (el) => parseInt(getComputedStyle(el).zIndex) || 0,
+      ),
+    );
+  }
+
+  #closeTopmost() {
+    const allWrappers = document.querySelectorAll(
+      `[data-${this.identifier}-target="wrapper"]`,
+    );
+    const zIndexes = Array.from(allWrappers).map((el) => ({
+      el,
+      z: parseInt(getComputedStyle(el).zIndex) || 0,
+    }));
+
+    const topmost = zIndexes.sort((a, b) => b.z - a.z)[0];
+    if (topmost?.el === this.wrapperTarget) {
+      this.close();
+    }
+  }
+
+  #restoreBodyScroll() {
+    const openDrawers = document.querySelectorAll(
+      ".cp-drawer__backdrop--open",
+    );
+    if (openDrawers.length <= 1) {
+      document.body.style.overflow = "";
+    }
+  }
+}

data/app/components/aeno/primitives/drawer/styles.css

@@ -0,0 +1,90 @@
+/* Drawer */
+.cp-drawer {
+}
+
+.cp-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / 0.5);
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cp-drawer__backdrop--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.cp-drawer__panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  background: var(--ui-background);
+  border-left: 1px solid var(--ui-border);
+  box-shadow: var(--ui-shadow-xl);
+  transition: transform 0.3s ease;
+  transform: translateX(100%);
+}
+
+.cp-drawer__panel--open {
+  transform: translateX(0);
+}
+
+.cp-drawer__container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ui-spacing-lg);
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+}
+
+.cp-drawer__header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cp-drawer__close {
+  margin-left: var(--ui-spacing);
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  background: var(--ui-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.cp-drawer__close:hover {
+  background: var(--ui-accent);
+}
+
+.cp-drawer__close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cp-drawer__footer {
+  border-top: 1px solid var(--ui-border);
+  padding: var(--ui-spacing-lg);
+  flex-shrink: 0;
+}

data/app/components/aeno/primitives/dropdown/checkbox.rb

@@ -0,0 +1,22 @@
+module Aeno::Primitives::Dropdown
+  class Checkbox < ::Aeno::ApplicationViewComponent
+    option :name
+    option :checked, default: -> { false }
+    option :icon, optional: true
+
+    erb_template <<~ERB
+      <button type="button"
+              class="cp-dropdown__item cp-dropdown__item--checkbox"
+              role="menuitemcheckbox"
+              aria-checked="<%= checked %>"
+              data-action="click->aeno--primitives--dropdown#toggleCheckbox"
+              data-name="<%= name %>">
+        <span class="cp-dropdown__item-check">
+          <% if checked %><%= lucide_icon("check", class: "cp-dropdown__check-icon") %><% end %>
+        </span>
+        <% if icon %><%= lucide_icon(icon, class: "cp-dropdown__item-icon") %><% end %>
+        <span class="cp-dropdown__item-label"><%= content %></span>
+      </button>
+    ERB
+  end
+end

data/app/components/aeno/primitives/dropdown/component.html.erb

@@ -0,0 +1,38 @@
+<div class="cp-dropdown"
+     data-controller="aeno--primitives--dropdown"
+     data-aeno--primitives--dropdown-placement-value="<%= placement %>"
+     data-aeno--primitives--dropdown-strategy-value="<%= strategy %>"
+     data-aeno--primitives--dropdown-searchable-value="<%= searchable %>">
+
+  <div class="cp-dropdown__trigger" data-aeno--primitives--dropdown-target="trigger" data-action="click->aeno--primitives--dropdown#toggle">
+    <%= trigger %>
+  </div>
+
+  <div class="cp-dropdown__content"
+       role="menu"
+       aria-orientation="vertical"
+       data-aeno--primitives--dropdown-target="content">
+
+    <% if searchable %>
+      <div class="cp-dropdown__search">
+        <input type="text"
+               class="cp-dropdown__search-input"
+               placeholder="<%= placeholder %>"
+               data-aeno--primitives--dropdown-target="search"
+               data-action="input->aeno--primitives--dropdown#filter" />
+      </div>
+    <% end %>
+
+    <div class="cp-dropdown__items" data-aeno--primitives--dropdown-target="items">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+
+      <% if searchable %>
+        <div class="cp-dropdown__empty" data-aeno--primitives--dropdown-target="empty">
+          No results found
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/aeno/primitives/dropdown/component.rb

@@ -0,0 +1,53 @@
+module Aeno::Primitives::Dropdown
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :placement, description: "Dropdown position",
+         values: [:top, :bottom, :left, :right],
+         default: -> { :bottom }
+    prop :strategy, description: "Positioning strategy",
+         values: [:absolute, :fixed],
+         default: -> { :absolute }
+    prop :searchable, description: "Enable search input", default: -> { false }
+    prop :placeholder, description: "Search placeholder", default: -> { "Search..." }
+
+    examples("Dropdown", description: "Floating menu with items") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+
+      b.example(:placement, title: "Placement", description: "Position options") do |e|
+        e.preview placement: :bottom
+        e.preview placement: :top
+        e.preview placement: :left
+        e.preview placement: :right
+      end
+
+      b.example(:searchable, title: "Searchable") do |e|
+        e.preview searchable: true
+      end
+    end
+
+    renders_one :trigger
+    renders_many :items, types: {
+      item: {
+        renders: ->(**opts, &block) { Item.new(**opts, &block) },
+        as: :item
+      },
+      label: {
+        renders: ->(**opts, &block) { Label.new(**opts, &block) },
+        as: :label
+      },
+      separator: {
+        renders: -> { Separator.new },
+        as: :separator
+      },
+      radio_group: {
+        renders: ->(**opts, &block) { RadioGroup.new(**opts, &block) },
+        as: :radio_group
+      },
+      checkbox: {
+        renders: ->(**opts, &block) { Checkbox.new(**opts, &block) },
+        as: :checkbox
+      }
+    }
+  end
+end