aeno 0.0.3

data/app/components/aeno/pages/showcase/show/component.rb

@@ -0,0 +1,48 @@
+module Aeno::Pages::Showcase::Show
+  class Component < ::Aeno::ApplicationViewComponent
+    option :component_class
+
+    def title
+      component_class.examples_title || component_name
+    end
+
+    def description
+      component_class.examples_description
+    end
+
+    def examples
+      component_class.examples_list
+    end
+
+    def props
+      component_class.props
+    end
+
+    # Returns :primitive or :block
+    def component_type
+      if component_class.name.include?("::Primitives::")
+        :primitive
+      elsif component_class.name.include?("::Blocks::")
+        :block
+      end
+    end
+
+    # e.g., "button" from Aeno::Primitives::Button::Component
+    def component_name
+      component_class.name
+        .sub(/^Aeno::(Primitives|Blocks)::/, "")
+        .sub(/::Component$/, "")
+        .underscore
+        .tr("_", "-")
+    end
+
+    def render_component(**props)
+      case component_type
+      when :primitive
+        helpers.ui(component_name, **props)
+      when :block
+        helpers.block(component_name, **props)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,66 @@
+module Aeno::Primitives::Button
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :variant, description: "Button style variant",
+         values: [:default, :secondary, :destructive, :ghost, :outline, :link],
+         default: -> { :default }
+    prop :size, description: "Button size",
+         values: [:xsmall, :small, :large, :icon],
+         optional: true
+    prop :label, description: "Button text label", optional: true
+    prop :icon, description: "Lucide icon name", optional: true
+    prop :href, description: "Link URL (renders as <a>)", optional: true
+    prop :disabled, description: "Disable the button", default: -> { false }
+    prop :full, description: "Full width button", default: -> { false }
+
+    option(:type, optional: true)
+    option(:method, optional: true)
+    option(:data, default: -> { {} })
+    option(:target, optional: true)
+
+    examples("Button", description: "Clickable actions and navigation links") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview label: "Click me"
+      end
+
+      b.example(:variants, title: "Variants", description: "Available style variants") do |e|
+        e.preview variant: :default, label: "Default"
+        e.preview variant: :secondary, label: "Secondary"
+        e.preview variant: :destructive, label: "Destructive"
+        e.preview variant: :outline, label: "Outline"
+        e.preview variant: :ghost, label: "Ghost"
+        e.preview variant: :link, label: "Link"
+      end
+
+      b.example(:sizes, title: "Sizes", description: "Available sizes") do |e|
+        e.preview size: :xsmall, label: "XSmall"
+        e.preview size: :small, label: "Small"
+        e.preview label: "Default"
+        e.preview size: :large, label: "Large"
+      end
+
+      b.example(:icons, title: "With Icons", description: "Buttons with icons") do |e|
+        e.preview icon: "settings", label: "Settings"
+        e.preview icon: "download", label: "Download", variant: :secondary
+        e.preview icon: "trash-2", label: "Delete", variant: :destructive
+        e.preview icon: "settings", size: :icon
+      end
+
+      b.example(:states, title: "States") do |e|
+        e.preview label: "Disabled", disabled: true
+        e.preview label: "Full Width", full: true
+      end
+    end
+
+    def button_classes
+      classes(variant:, size:, disabled:, full:)
+    end
+
+    def call
+      action_tag(href: href, method: method, data: merged_data, class: button_classes, target: target, disabled: disabled) do
+        (icon ? lucide_icon(icon, class: "flex-shrink-0 icon") : "".html_safe) +
+          ui("spinner", size: :sm, variant: :white, css: "spinner hidden") +
+          (label ? content_tag(:span, label, class: "truncate flex-shrink") : "".html_safe)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("button connected");
+  }
+}

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

@@ -0,0 +1,153 @@
+/* Button component styles */
+.cp-button {
+  border-radius: var(--ui-rounded-button, 0.375rem);
+  padding: 0.625rem 0.875rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+
+  &:focus-visible {
+    outline: 2px solid var(--ui-ring, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  & > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+  }
+
+  & > svg {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  & .spinner {
+    display: none;
+  }
+
+  &.loading {
+    opacity: 0.5;
+    pointer-events: none;
+
+    & .icon {
+      display: none;
+    }
+    & .spinner {
+      display: flex;
+    }
+  }
+
+  /* Variants */
+  &--default {
+    background-color: var(--ui-button-bg, #475569);
+    color: var(--ui-button-foreground, #ffffff);
+
+    &:hover {
+      background-color: var(--ui-button-hover, #334155);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--ui-button-secondary-bg, #e2e8f0);
+    color: var(--ui-button-secondary-foreground, #1e293b);
+
+    &:hover {
+      background-color: var(--ui-button-secondary-hover, #cbd5e1);
+    }
+  }
+
+  &--destructive {
+    background-color: var(--ui-button-destructive-bg, #ef4444);
+    color: var(--ui-button-destructive-foreground, #ffffff);
+
+    &:hover {
+      background-color: var(--ui-button-destructive-hover, #dc2626);
+    }
+  }
+
+  &--outline {
+    border: 1px solid var(--ui-button-border, #e2e8f0);
+    background-color: var(--ui-background, #ffffff);
+    color: var(--ui-button-outline-foreground, #1e293b);
+
+    &:hover {
+      background-color: var(--ui-button-outline-hover, #f1f5f9);
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    color: var(--ui-button-ghost-foreground, #1e293b);
+
+    &:hover {
+      background-color: var(--ui-button-ghost-hover, #f1f5f9);
+    }
+  }
+
+  &--link {
+    background-color: transparent;
+    color: var(--ui-link, #3b82f6);
+    text-underline-offset: 4px;
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--ui-link-hover, #2563eb);
+    }
+  }
+
+  /* Sizes */
+  &--xsmall {
+    padding: 0.25rem 0.625rem;
+    font-size: 0.75rem;
+    border-radius: var(--ui-rounded-button-sm, 0.25rem);
+    gap: 0.25rem;
+
+    & > svg {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+
+  &--small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    border-radius: var(--ui-rounded-button-sm, 0.25rem);
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &--large {
+    padding: 0.75rem 1.5rem;
+    font-size: 1.125rem;
+    border-radius: var(--ui-rounded-button-lg, 0.5rem);
+    gap: 0.5rem;
+
+    & > svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+
+  /* States */
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &--full {
+    width: 100%;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,3 @@
+<%= tag.div class: card_classes, style: merged_style do %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,42 @@
+module Aeno::Primitives::Card
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :variant, description: "Card style variant",
+         values: [:default, :ghost, :elevated],
+         default: -> { :default }
+    prop :pad, description: "Padding level (1-4, each = 1rem)", values: [1, 2, 3, 4], optional: true
+    prop :centered, description: "Center content with flexbox", default: -> { false }
+
+    examples("Card", description: "Container for grouping related content") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+
+      b.example(:variants, title: "Variants", description: "Available style variants") do |e|
+        e.preview variant: :default
+        e.preview variant: :ghost
+        e.preview variant: :elevated
+      end
+
+      b.example(:padding, title: "Padding", description: "Padding levels") do |e|
+        e.preview pad: 1
+        e.preview pad: 2
+        e.preview pad: 3
+        e.preview pad: 4
+      end
+
+      b.example(:centered, title: "Centered", description: "Centered content") do |e|
+        e.preview centered: true
+      end
+    end
+
+    def card_classes
+      [
+        class_for,
+        (class_for(:centered) if centered),
+        (class_for(variant) if variant != :default),
+        ("pad-#{pad}" if pad),
+        css
+      ].compact.join(" ")
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+/* Card component styles */
+.cp-card {
+  background-color: var(--ui-card-bg);
+  color: var(--ui-card-fg);
+  border: 1px solid var(--ui-card-border);
+  border-radius: var(--ui-card-radius);
+  box-shadow: var(--ui-card-shadow);
+
+  /* Layout */
+  &--centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Variants */
+  &--ghost {
+    border-color: transparent;
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  &--elevated {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="cp-conversation" data-controller="<%= controller_name %>">
+  <div class="cp-conversation__header">
+    <h2 class="cp-conversation__title"><%= title || "Chat" %></h2>
+  </div>
+
+  <div class="cp-conversation__messages" data-<%= controller_name %>-target="messagesContainer" id="messages">
+    <% if messages.any? %>
+      <% messages.each do |message| %>
+        <%= message %>
+      <% end %>
+    <% else %>
+      <div class="cp-conversation__empty">
+        <div class="cp-conversation__empty-content">
+          <p class="cp-conversation__empty-title">Start a conversation</p>
+          <p class="cp-conversation__empty-subtitle">Ask me anything!</p>
+        </div>
+      </div>
+    <% end %>
+
+    <div id="streaming-indicator" class="cp-conversation__streaming-hidden">
+      <%= ui("conversation/streaming-indicator") %>
+    </div>
+
+    <div data-<%= controller_name %>-target="scrollAnchor"></div>
+  </div>
+
+  <%= user_message_box %>
+</div>

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

@@ -0,0 +1,15 @@
+module Aeno::Primitives::Conversation
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :title, description: "Chat title", optional: true
+    prop :streaming, description: "Show streaming indicator", default: -> { false }
+
+    renders_many :messages, Message::Component
+    renders_one :user_message_box, UserMessageBox::Component
+
+    examples("Conversation", description: "Chat conversation interface") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview title: "Chat"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["messagesContainer", "scrollAnchor"];
+
+  connect() {
+    console.log("conversation connected");
+
+    // Auto-scroll to bottom on initial load
+    this.scrollToBottom();
+  }
+
+  scrollToBottom() {
+    if (this.hasScrollAnchorTarget) {
+      this.scrollAnchorTarget.scrollIntoView({ behavior: "smooth" });
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="cp-conversation-message <%= role_class %>">
+  <div class="cp-conversation-message__container">
+    <div class="cp-conversation-message__row">
+      <div class="cp-conversation-message__avatar-wrapper">
+        <div class="cp-conversation-message__avatar <%= avatar_class %>">
+          <%= avatar_label %>
+        </div>
+      </div>
+      <div class="cp-conversation-message__content">
+        <div class="cp-conversation-message__role">
+          <%= role_label %>
+        </div>
+        <div class="cp-conversation-message__body">
+          <%= content %>
+        </div>
+        <% if timestamp %>
+          <div class="cp-conversation-message__timestamp">
+            <%= timestamp %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+module Aeno::Primitives::Conversation::Message
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :role, description: "Message role", values: [:user, :assistant, :error, :system], default: -> { "assistant" }
+    prop :content, description: "Message content", default: -> { "" }
+    prop :timestamp, description: "Message timestamp", optional: true
+
+    def role_class
+      "cp-conversation-message--#{role}"
+    end
+
+    def avatar_class
+      "cp-conversation-message__avatar--#{role}"
+    end
+
+    def role_label
+      case role.to_s
+      when "user" then "You"
+      when "assistant" then "Assistant"
+      when "error" then "Error"
+      when "system" then "System"
+      else role.to_s.capitalize
+      end
+    end
+
+    def avatar_label
+      case role.to_s
+      when "user" then "U"
+      when "assistant" then "A"
+      when "error" then "!"
+      when "system" then "S"
+      else "?"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="cp-conversation-streaming">
+  <div class="cp-conversation-streaming__container">
+    <div class="cp-conversation-streaming__row">
+      <div class="cp-conversation-streaming__avatar-wrapper">
+        <div class="cp-conversation-streaming__avatar <%= avatar_class %>">
+          <%= avatar_label %>
+        </div>
+      </div>
+      <div class="cp-conversation-streaming__content">
+        <div class="cp-conversation-streaming__label">
+          <%= label %>
+        </div>
+        <div class="cp-conversation-streaming__dots">
+          <div class="cp-conversation-streaming__dot" style="animation-delay: 0ms;"></div>
+          <div class="cp-conversation-streaming__dot" style="animation-delay: 150ms;"></div>
+          <div class="cp-conversation-streaming__dot" style="animation-delay: 300ms;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+module Aeno::Primitives::Conversation::StreamingIndicator
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :role, description: "Role being streamed", default: -> { "assistant" }
+    prop :label, description: "Label text", default: -> { "Assistant" }
+
+    def avatar_class
+      "cp-conversation-streaming__avatar--#{role}"
+    end
+
+    def avatar_label
+      case role.to_s
+      when "user" then "U"
+      when "assistant" then "A"
+      else role.to_s[0].upcase
+      end
+    end
+  end
+end