aeno 0.0.3

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

@@ -0,0 +1,55 @@
+/* Page */
+.cp-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cp-page__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ui-spacing-lg) 0;
+  gap: var(--ui-spacing-lg);
+}
+
+.cp-page__title-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.cp-page__title {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-spacing-sm);
+  font-weight: 600;
+  font-size: 1.875rem;
+  letter-spacing: -0.025em;
+  color: var(--ui-foreground);
+}
+
+.cp-page__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.cp-page__subtitle {
+  color: var(--ui-muted-foreground);
+  flex-shrink: 0;
+}
+
+.cp-page__description {
+  margin-top: var(--ui-spacing-sm);
+  color: var(--ui-muted-foreground);
+}
+
+.cp-page__actions {
+  flex-shrink: 0;
+}
+
+.cp-page__content {
+  padding-bottom: var(--ui-spacing-lg);
+  width: 100%;
+}

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

@@ -0,0 +1,25 @@
+<div class="cp-sidebar">
+  <% if header? %>
+    <div class="cp-sidebar__header"><%= header %></div>
+  <% end %>
+
+  <% if items.any? || groups.any? %>
+    <nav class="cp-sidebar__nav">
+      <% if items.any? %>
+        <ul class="cp-sidebar__menu">
+          <% items.each do |item| %>
+            <li><%= item %></li>
+          <% end %>
+        </ul>
+      <% end %>
+
+      <% groups.each do |group| %>
+        <%= group %>
+      <% end %>
+    </nav>
+  <% end %>
+
+  <% if footer? %>
+    <div class="cp-sidebar__footer"><%= footer %></div>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+module Aeno::Primitives::Sidebar
+  class Component < Aeno::ApplicationViewComponent
+    renders_many(:items, Aeno::Primitives::Sidebar::Item)
+    renders_many(:groups, Aeno::Primitives::Sidebar::Group)
+    renders_one(:header, Aeno::Primitives::Sidebar::Header)
+    renders_one(:footer, Aeno::Primitives::Sidebar::Footer)
+
+    examples("Sidebar", description: "Navigation sidebar with groups and items") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/sidebar/footer.rb

@@ -0,0 +1,7 @@
+module Aeno::Primitives::Sidebar
+  class Footer < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <div><%= content %></div>
+    ERB
+  end
+end

data/app/components/aeno/primitives/sidebar/group.rb

@@ -0,0 +1,18 @@
+module Aeno::Primitives::Sidebar
+  class Group < Aeno::ApplicationViewComponent
+    option :label
+
+    renders_many :items, Item
+
+    erb_template <<~ERB
+      <div class="cp-sidebar__group">
+        <div class="cp-sidebar__group-label"><%= label %></div>
+        <ul class="cp-sidebar__group-menu">
+          <% items.each do |item| %>
+            <li><%= item %></li>
+          <% end %>
+        </ul>
+      </div>
+    ERB
+  end
+end

data/app/components/aeno/primitives/sidebar/header.rb

@@ -0,0 +1,7 @@
+module Aeno::Primitives::Sidebar
+  class Header < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <div><%= content %></div>
+    ERB
+  end
+end

data/app/components/aeno/primitives/sidebar/item.rb

@@ -0,0 +1,19 @@
+module Aeno::Primitives::Sidebar
+  class Item < Aeno::ApplicationViewComponent
+    option :label
+    option :href
+    option :icon, optional: true
+    option :active, default: proc { false }
+
+    def item_classes
+      ["cp-sidebar__item", active ? "cp-sidebar__item--active" : nil, css].compact.join(" ")
+    end
+
+    erb_template <<~ERB
+      <%= link_to(href, class: item_classes) do %>
+        <%= lucide_icon(icon) if icon %>
+        <span><%= label %></span>
+      <% end %>
+    ERB
+  end
+end

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

@@ -0,0 +1,95 @@
+/* Sidebar component styles */
+.cp-sidebar {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--ui-sidebar-bg, #fafafa);
+  color: var(--ui-sidebar-fg, #1a1a1a);
+  border-right: 1px solid var(--ui-sidebar-border, #e5e5e5);
+
+  &__header {
+    flex-shrink: 0;
+  }
+
+  &__nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 0.5rem;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    padding: 1rem;
+    border-top: 1px solid var(--ui-sidebar-border, #e5e5e5);
+    font-size: 0.75rem;
+    color: var(--ui-muted-color, #737373);
+  }
+
+  &__menu {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__group {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    padding: 0.25rem 0;
+  }
+
+  &__group-label {
+    color: var(--ui-muted-color, #737373);
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__group-menu {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: var(--ui-input-radius, 0.375rem);
+    padding: 0.5rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: var(--ui-sidebar-fg, #1a1a1a);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: var(--ui-sidebar-hover, #f0f0f0);
+    }
+
+    & svg {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+    }
+
+    &--active {
+      background-color: var(--ui-sidebar-active, #e5e5e5);
+      font-weight: 500;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+module Aeno::Primitives::Spinner
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :size, description: "Spinner size", values: [:sm, :default, :lg], default: -> { :default }
+    prop :variant, description: "Spinner color variant", values: [:default, :white], default: -> { :default }
+
+    examples("Spinner", description: "Loading indicator") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+
+      b.example(:sizes, title: "Sizes") do |e|
+        e.preview size: :sm
+        e.preview size: :default
+        e.preview size: :lg
+      end
+
+      b.example(:variants, title: "Variants") do |e|
+        e.preview variant: :default
+        e.preview variant: :white
+      end
+    end
+
+    def classes
+      [
+        class_for("base"),
+        class_for(size.to_s),
+        class_for(variant.to_s),
+        css
+      ].compact.join(" ")
+    end
+
+    erb_template <<~ERB
+      <span class="<%= classes %>"></span>
+    ERB
+  end
+end

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

@@ -0,0 +1,81 @@
+/* Spinner component styles */
+.cp-spinner {
+  position: relative;
+  inset: 0;
+  padding-left: 0.5rem;
+  margin-right: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  &::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.625rem;
+    margin-left: -0.625rem;
+    border-radius: 9999px;
+    border-width: 2px;
+    border-style: solid;
+    animation: spin 1s linear infinite;
+  }
+
+  /* Sizes */
+  &--xs::before {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-top: -0.375rem;
+    margin-left: -0.375rem;
+  }
+
+  &--sm::before {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.5rem;
+    margin-left: -0.5rem;
+  }
+
+  &--lg::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.75rem;
+    margin-left: -0.75rem;
+  }
+
+  &--xl::before {
+    width: 2rem;
+    height: 2rem;
+    margin-top: -1rem;
+    margin-left: -1rem;
+  }
+
+  /* Variants */
+  &--white::before {
+    border-color: rgb(255 255 255 / 0.5);
+    border-top-color: white;
+  }
+
+  &--default::before {
+    border-color: rgb(107 114 128 / 0.5);
+    border-top-color: rgb(107 114 128);
+  }
+
+  &--primary::before {
+    border-color: rgb(from var(--ui-button-bg, #475569) r g b / 0.5);
+    border-top-color: var(--ui-button-bg, #475569);
+  }
+
+  &--black::before {
+    border-color: rgb(0 0 0 / 0.5);
+    border-top-color: black;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

data/app/components/aeno/primitives/table/cell.rb

@@ -0,0 +1,7 @@
+module Aeno::Primitives::Table
+  class Cell < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <td class="cp-table__td <%= css %>"><%= content %></td>
+    ERB
+  end
+end

data/app/components/aeno/primitives/table/column.rb

@@ -0,0 +1,7 @@
+module Aeno::Primitives::Table
+  class Column < Aeno::ApplicationViewComponent
+    erb_template <<~ERB
+      <th scope="col" class="cp-table__th <%= css %>"><%= content %></th>
+    ERB
+  end
+end

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

@@ -0,0 +1,8 @@
+<div class="cp-table">
+  <table<%= " id=\"#{id}\"" if id %>>
+    <%= header if header? %>
+    <tbody>
+      <% rows.each do |row| %><%= row %><% end %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,14 @@
+module Aeno::Primitives::Table
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :id, description: "HTML id attribute", optional: true
+
+    renders_one :header, Aeno::Primitives::Table::Header
+    renders_many :rows, Aeno::Primitives::Table::Row
+
+    examples("Table", description: "Data table with header and rows") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/table/header.rb

@@ -0,0 +1,13 @@
+module Aeno::Primitives::Table
+  class Header < Aeno::ApplicationViewComponent
+    renders_many :columns, Aeno::Primitives::Table::Column
+
+    erb_template <<~ERB
+      <thead class="cp-table__head">
+        <tr>
+          <% columns.each do |column| %><%= column %><% end %>
+        </tr>
+      </thead>
+    ERB
+  end
+end

data/app/components/aeno/primitives/table/row.rb

@@ -0,0 +1,11 @@
+module Aeno::Primitives::Table
+  class Row < Aeno::ApplicationViewComponent
+    renders_many :cells, Aeno::Primitives::Table::Cell
+
+    erb_template <<~ERB
+      <tr class="cp-table__tr <%= css %>">
+        <% cells.each do |cell| %><%= cell %><% end %>
+      </tr>
+    ERB
+  end
+end

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

@@ -0,0 +1,39 @@
+.cp-table {
+  overflow-x: auto;
+
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &__head {
+    background-color: var(--ui-area-bg);
+  }
+
+  &__th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--ui-muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__tr {
+    border-bottom: 1px solid var(--ui-card-border);
+  }
+
+  &__td {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: var(--ui-foreground);
+
+    & code {
+      background: var(--ui-area-bg);
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+    }
+  }
+}

data/app/controllers/aeno/application_controller.rb

@@ -0,0 +1,15 @@
+module Aeno
+  class ApplicationController < ActionController::Base
+    include Aeno::ApplicationHelper
+
+    helper_method :current_theme, :current_mode
+
+    def current_theme
+      session[:theme] || "slate"
+    end
+
+    def current_mode
+      session[:mode] || "light"
+    end
+  end
+end

data/app/controllers/aeno/showcase_controller.rb

@@ -0,0 +1,40 @@
+module Aeno
+  class ShowcaseController < ApplicationController
+    helper_method :primitives, :blocks
+
+    def index
+      page("showcase/index")
+    end
+
+    def show
+      component_class = resolve_component(params[:namespace], params[:id])
+      if component_class
+        page("showcase/show", component_class: component_class)
+      else
+        page("showcase/placeholder", namespace: params[:namespace], id: params[:id])
+      end
+    end
+
+    private
+
+    def resolve_component(namespace, id)
+      ns = namespace.to_s.camelize
+      name = id.to_s.camelize
+      "Aeno::#{ns}::#{name}::Component".constantize
+    rescue NameError, NoMethodError
+      nil
+    end
+
+    def components_path
+      Aeno::Engine.root.join("app/components/aeno")
+    end
+
+    def primitives
+      @primitives ||= Dir.glob(components_path.join("primitives/*/")).map { |p| File.basename(p) }.sort
+    end
+
+    def blocks
+      @blocks ||= Dir.glob(components_path.join("blocks/*/")).map { |p| File.basename(p) }.sort
+    end
+  end
+end

data/app/controllers/aeno/theme_controller.rb

@@ -0,0 +1,10 @@
+module Aeno
+  class ThemeController < ApplicationController
+    def update
+      session[:theme] = params[:theme] if %w[slate zinc].include?(params[:theme])
+      session[:mode] = params[:mode] if %w[light dark].include?(params[:mode])
+
+      redirect_back(fallback_location: root_path, status: :see_other)
+    end
+  end
+end

data/app/helpers/aeno/application_helper.rb

@@ -0,0 +1,28 @@
+module Aeno
+  module ApplicationHelper
+    def page(name, *args, **kwargs, &block)
+      component = "Aeno::Pages::#{name.split("/").map(&:camelize).join("::")}::Component".constantize
+      render(component.new(*args, **kwargs), &block)
+    end
+
+    def ui(name, *args, **kwargs, &block)
+      class_name = name.to_s.tr("-", "_").camelize
+      component = "Aeno::Primitives::#{class_name}::Component".constantize
+      render(component.new(*args, **kwargs), &block)
+    end
+
+    def block(name, *args, **kwargs, &blk)
+      class_name = name.to_s.tr("-", "_").camelize
+      component = "Aeno::Blocks::#{class_name}::Component".constantize
+      render(component.new(*args, **kwargs), &blk)
+    end
+
+    # Output theme configuration as inline CSS in the aeno-config layer
+    def aeno_theme_tag
+      css = Aeno.configuration.theme_css
+      return "".html_safe if css.empty?
+
+      "<style>#{css}</style>".html_safe
+    end
+  end
+end

data/app/javascript/aeno/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails";
+import "aeno/controllers";

data/app/javascript/aeno/controllers/application.js

@@ -0,0 +1,5 @@
+import { Application } from "@hotwired/stimulus";
+const application = Application.start();
+application.debug = false;
+window.Stimulus = application;
+export { application };

data/app/javascript/aeno/controllers/index.js

@@ -0,0 +1,5 @@
+import { application } from "aeno/controllers/application";
+import { eagerLoadEngineControllersFrom } from "aeno/controllers/loader";
+
+// Load component controllers
+eagerLoadEngineControllersFrom("aeno/components", application);

data/app/javascript/aeno/controllers/loader.js

@@ -0,0 +1,62 @@
+// Copied from @hotwired/stimulus-loading
+function parseImportmapJson() {
+  return JSON.parse(document.querySelector("script[type=importmap]").text)
+    .imports;
+}
+
+function registerControllerFromPath(path, under, application) {
+  // Build Stimulus identifier from import path
+  // Extract namespace from the path (e.g., "aeno" from "aeno/components", "sqema" from "sqema/controllers")
+  const namespace = under.split("/")[0];
+  const pathType = under.split("/")[1]; // "components" or "controllers"
+
+  const withoutPrefix = path.replace(new RegExp(`^${under}/`), "");
+
+  let base;
+  if (pathType === "components") {
+    // Components: drop the last path segment ("controller" or "*_controller")
+    // - "aeno/components/button/controller" -> "aeno/button" -> "aeno--button"
+    // - "sqema/components/views/static/index/controller" -> "sqema/views/static/index" -> "sqema--views--static--index"
+    if (withoutPrefix.endsWith("/controller")) {
+      base = namespace + "/" + withoutPrefix.slice(0, -"/controller".length);
+    } else if (/\/[^/]+_controller$/.test(withoutPrefix)) {
+      base = namespace + "/" + withoutPrefix.replace(/\/[^/]+_controller$/, "");
+    } else if (/_controller$/.test(withoutPrefix)) {
+      // Fallback for flat files
+      base = namespace + "/" + withoutPrefix.replace(/_controller$/, "");
+    } else {
+      // Not a controller path we recognize
+      return;
+    }
+  } else if (pathType === "controllers") {
+    // Standard controllers: namespace--(controllername)
+    // - "sqema/controllers/hello_controller" -> "sqema/hello" -> "sqema--hello"
+    base = namespace + "/" + withoutPrefix.replace(/_controller$/, "");
+  } else {
+    return;
+  }
+
+  const name = base.replace(/\//g, "--").replace(/_/g, "-");
+  import(path)
+    .then((module) => {
+      if (module.default) {
+        application.register(name, module.default);
+      }
+    })
+    .catch((error) => {
+      console.error(`Failed to register controller: ${name} (${path})`, error);
+    });
+}
+
+function eagerLoadEngineControllersFrom(under, application) {
+  const paths = Object.keys(parseImportmapJson()).filter((path) =>
+    path.match(new RegExp(`^${under}/.+`)),
+  );
+  paths.forEach((path) => {
+    if (path.endsWith("_controller") || path.endsWith("/controller")) {
+      registerControllerFromPath(path, under, application);
+    }
+  });
+}
+
+export { eagerLoadEngineControllersFrom };

data/app/jobs/aeno/application_job.rb

@@ -0,0 +1,4 @@
+module Aeno
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/models/aeno/application_record.rb

@@ -0,0 +1,5 @@
+module Aeno
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end