aeno 0.0.3

data/app/assets/stylesheets/aeno/themes/zinc.css

@@ -0,0 +1,163 @@
+/* =============================================================================
+   Theme: Zinc
+   ============================================================================= */
+
+[data-theme="zinc"] {
+  /* Background & Foreground */
+  --ui-background: #ffffff;
+  --ui-foreground: #18181b;
+
+  /* Generic */
+  --ui-border: #e4e4e7;
+  --ui-destructive: #dc2626;
+  --ui-primary: #18181b;
+  --ui-accent: #f4f4f5;
+  --ui-accent-foreground: #18181b;
+  --ui-popover: #ffffff;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Muted */
+  --ui-muted: #f4f4f5;
+  --ui-muted-foreground: #71717a;
+
+  /* Card */
+  --ui-card-bg: #ffffff;
+  --ui-card-fg: #18181b;
+  --ui-card-border: #e4e4e7;
+  --ui-card-radius: 0.75rem;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* Area */
+  --ui-area-bg: #fafafa;
+  --ui-area-fg: #18181b;
+  --ui-area-border: #e4e4e7;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #fafafa;
+  --ui-sidebar-fg: #18181b;
+  --ui-sidebar-border: #e4e4e7;
+  --ui-sidebar-hover: #f4f4f5;
+  --ui-sidebar-active: #e4e4e7;
+
+  /* Button */
+  --ui-button-bg: #18181b;
+  --ui-button-bg-hover: #27272a;
+  --ui-button-fg: #ffffff;
+  --ui-button-border: #18181b;
+  --ui-button-secondary-bg: #f4f4f5;
+  --ui-button-secondary-bg-hover: #e4e4e7;
+  --ui-button-secondary-fg: #18181b;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #b91c1c;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #f4f4f5;
+  --ui-button-ghost-fg: #18181b;
+  --ui-button-outline-bg-hover: #f4f4f5;
+  --ui-button-outline-fg: #18181b;
+
+  /* Input */
+  --ui-input-bg: #ffffff;
+  --ui-input-fg: #18181b;
+  --ui-input-border: #e4e4e7;
+  --ui-input-border-focus: #a1a1aa;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #a1a1aa;
+
+  /* Typography */
+  --ui-heading-color: #18181b;
+  --ui-body-color: #3f3f46;
+  --ui-muted-color: #71717a;
+  --ui-link-color: #2563eb;
+  --ui-link-hover: #1d4ed8;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #ffffff;
+  --ui-menu-fg: #18181b;
+  --ui-menu-border: #e4e4e7;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}
+
+/* Dark mode */
+[data-theme="zinc"][data-mode="dark"] {
+  /* Background & Foreground */
+  --ui-background: #09090b;
+  --ui-foreground: #fafafa;
+
+  /* Generic */
+  --ui-border: #27272a;
+  --ui-destructive: #dc2626;
+  --ui-primary: #fafafa;
+  --ui-accent: #27272a;
+  --ui-accent-foreground: #fafafa;
+  --ui-popover: #18181b;
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3);
+
+  /* Muted */
+  --ui-muted: #27272a;
+  --ui-muted-foreground: #a1a1aa;
+
+  /* Card */
+  --ui-card-bg: #18181b;
+  --ui-card-fg: #fafafa;
+  --ui-card-border: #27272a;
+  --ui-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+
+  /* Area */
+  --ui-area-bg: #18181b;
+  --ui-area-fg: #fafafa;
+  --ui-area-border: #27272a;
+
+  /* Sidebar */
+  --ui-sidebar-bg: #18181b;
+  --ui-sidebar-fg: #fafafa;
+  --ui-sidebar-border: #27272a;
+  --ui-sidebar-hover: #27272a;
+  --ui-sidebar-active: #3f3f46;
+
+  /* Button */
+  --ui-button-bg: #fafafa;
+  --ui-button-bg-hover: #e4e4e7;
+  --ui-button-fg: #18181b;
+  --ui-button-border: #fafafa;
+  --ui-button-secondary-bg: #27272a;
+  --ui-button-secondary-bg-hover: #3f3f46;
+  --ui-button-secondary-fg: #fafafa;
+  --ui-button-destructive-bg: #dc2626;
+  --ui-button-destructive-bg-hover: #ef4444;
+  --ui-button-destructive-fg: #ffffff;
+  --ui-button-ghost-bg-hover: #27272a;
+  --ui-button-ghost-fg: #fafafa;
+  --ui-button-outline-bg-hover: #27272a;
+  --ui-button-outline-fg: #fafafa;
+
+  /* Input */
+  --ui-input-bg: #18181b;
+  --ui-input-fg: #fafafa;
+  --ui-input-border: #27272a;
+  --ui-input-border-focus: #52525b;
+  --ui-input-ring: #3b82f6;
+  --ui-input-placeholder: #52525b;
+
+  /* Typography */
+  --ui-heading-color: #fafafa;
+  --ui-body-color: #d4d4d8;
+  --ui-muted-color: #a1a1aa;
+  --ui-link-color: #60a5fa;
+  --ui-link-hover: #93c5fd;
+  --ui-ring: #3b82f6;
+
+  /* Menu */
+  --ui-menu-bg: #18181b;
+  --ui-menu-fg: #fafafa;
+  --ui-menu-border: #27272a;
+  --ui-menu-radius: 0.375rem;
+  --ui-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+  --ui-menu-padding: 0.25rem;
+  --ui-menu-item-radius: 0.25rem;
+}

data/app/assets/stylesheets/aeno/utilities.css

@@ -0,0 +1,23 @@
+/* Padding */
+.pad-1 { padding: var(--ui-spacing); }
+.pad-2 { padding: calc(var(--ui-spacing) * 2); }
+.pad-3 { padding: calc(var(--ui-spacing) * 3); }
+.pad-4 { padding: calc(var(--ui-spacing) * 4); }
+
+/* Text size */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+
+/* Text color */
+.text-muted { color: var(--ui-muted-color); }
+
+/* Fixed positioning */
+.cg-theme-toggle {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 50;
+}

data/app/components/aeno/application_view_component.rb

@@ -0,0 +1,219 @@
+module Aeno
+  class ApplicationViewComponent < ViewComponentContrib::Base
+    extend(Dry::Initializer)
+    include(Turbo::StreamsHelper)
+    include(Turbo::FramesHelper)
+    include(Aeno::ApplicationHelper)
+    include(LucideRails::RailsHelper)
+
+    # ═══════════════════════════════════════════════════════════════════════════
+    # PROPS DSL
+    # ═══════════════════════════════════════════════════════════════════════════
+
+    def self.prop_definitions
+      @prop_definitions ||= {}
+    end
+
+    def self.prop(name, description:, values: nil, **opts)
+      prop_definitions[name] = { description:, values: }.compact
+      option(name, **opts)
+    end
+
+    def self.props
+      ancestors
+        .select { |a| a.respond_to?(:prop_definitions) }
+        .reverse
+        .reduce({}) { |h, a| h.merge(a.prop_definitions) }
+    end
+
+    # ═══════════════════════════════════════════════════════════════════════════
+    # EXAMPLES DSL
+    # ═══════════════════════════════════════════════════════════════════════════
+
+    class ExamplePreview
+      attr_reader :props
+
+      def initialize(props)
+        @props = props
+      end
+    end
+
+    class Example
+      attr_reader :key, :title, :description, :previews
+
+      def initialize(key, title:, description: nil)
+        @key = key
+        @title = title
+        @description = description
+        @previews = []
+      end
+
+      def preview(**props)
+        @previews << ExamplePreview.new(props)
+      end
+    end
+
+    class ExamplesBuilder
+      attr_reader :examples
+
+      def initialize
+        @examples = []
+      end
+
+      def example(key, title:, description: nil, &block)
+        ex = Example.new(key, title: title, description: description)
+        block.call(ex) if block
+        @examples << ex
+      end
+    end
+
+    def self.examples_config
+      @examples_config ||= { title: nil, description: nil, examples: [] }
+    end
+
+    def self.examples(title, description: nil, &block)
+      @examples_config = { title: title, description: description, examples: [] }
+      builder = ExamplesBuilder.new
+      block.call(builder) if block
+      @examples_config[:examples] = builder.examples
+    end
+
+    def self.examples_title
+      examples_config[:title]
+    end
+
+    def self.examples_description
+      examples_config[:description]
+    end
+
+    def self.examples_list
+      examples_config[:examples]
+    end
+
+    option(:css, optional: true)
+    option(:style, optional: true)
+
+    # Override in components: def default_style = { height: "300px" }
+    def default_style = {}
+
+    # Hash - for passing to child components
+    def style_hash
+      @style_hash ||= default_style.merge(style || {}).compact
+    end
+
+    # String - for HTML style attribute
+    def merged_style
+      @merged_style ||= style_hash
+        .map { |k, v| "#{k.to_s.dasherize}: #{v}" }
+        .join("; ")
+        .presence
+    end
+
+    class << self
+      def named
+        @named ||= self.name.sub(/::Component$/, "").underscore.split("/").join("--").gsub("_", "-")
+      end
+
+      PREFIXES = {
+        "Primitives" => "cp",
+        "Blocks" => "cb",
+        "Pages" => "cg"
+      }.freeze
+
+      # Component identifier for CSS scoping (e.g., "cp-card", "cb-sidebar")
+      # Note: Can't use @identifier - ViewComponent uses it for file paths
+      def css_identifier
+        parts = self.name.to_s.sub(/::Component$/, "").split("::")
+        prefix = PREFIXES[parts[-2]] || "c"
+        component = parts.last.underscore.gsub("_", "-")
+        "#{prefix}-#{component}"
+      end
+    end
+
+    # Generate scoped CSS class name (e.g., "cp-card", "cp-card--centered")
+    def class_for(name = nil)
+      return self.class.css_identifier if name.nil? || name == "base"
+      "#{self.class.css_identifier}--#{name}"
+    end
+
+    # Build classes from modifiers
+    # Usage: classes(variant:, size:, disabled:, full:)
+    # - symbol values: class_for(value) e.g. variant: :default → cp-button--default
+    # - true: class_for(key) e.g. disabled: true → cp-button--disabled
+    # - false/nil: skipped
+    def classes(**mods)
+      [
+        class_for,
+        *mods.filter_map { |k, v| v && class_for(v == true ? k.to_s : v.to_s) },
+        css
+      ].join(" ")
+    end
+
+    def controller_name
+      # Match JS autoload naming for components/controllers:
+      # - aeno/components/button/button_controller -> aeno--button
+      name = self.class.name
+        .sub(/^Aeno::/, "")
+        .sub(/::Component$/, "")
+        .underscore
+
+      "aeno--#{name.gsub('/', '--').gsub('_', '-')}"
+    end
+
+    def data_target_key
+      "#{controller_name}-target"
+    end
+
+    # Helper methods for Stimulus attributes
+    # These return keys suited for Rails `data:` hashes (no `data-` prefix)
+    def stimulus_controller
+      { controller: controller_name }
+    end
+
+    def stimulus_target(name)
+      { "#{controller_name}-target" => name }
+    end
+
+    def stimulus_action(event, method = nil)
+      method ||= event
+      { action: "#{event}->#{controller_name}##{method}" }
+    end
+
+    def stimulus_value(name, value)
+      { "#{controller_name}-#{name}-value" => value }
+    end
+
+    def stimulus_class(name, css_class)
+      { "#{controller_name}-#{name}-class" => css_class }
+    end
+
+    # Attribute helpers for raw tag helpers (already include `data-` prefix)
+    def stimulus_attr_target(name)
+      { "data-#{controller_name}-target" => name }
+    end
+
+    def merged_data
+      return default_data unless respond_to?(:data) && data.keys
+
+      data.merge(**default_data)
+    end
+
+    def default_data
+      { controller: controller_name }
+    end
+
+    # Shared helper for rendering clickable elements
+    # - button_to for non-GET methods (creates form)
+    # - link_to for GET links
+    # - button_tag for action buttons
+    def action_tag(href: nil, method: nil, data: {}, form_data: {}, **opts, &block)
+      if method && href
+        helpers.button_to(href, method: method, data: data, form: { data: form_data }, **opts, &block)
+      elsif href
+        helpers.link_to(href, data: data, **opts, &block)
+      else
+        helpers.button_tag(type: "button", data: data, **opts, &block)
+      end
+    end
+  end
+end

data/app/components/aeno/blocks/component_preview/component.html.erb

@@ -0,0 +1,7 @@
+<div class="cb-component-preview">
+  <% if title %><h2 class="cb-component-preview__title"><%= title %></h2><% end %>
+  <% if description %><p class="cb-component-preview__description text-muted"><%= description %></p><% end %>
+  <%= ui("card", style: style_hash, centered: true) do %>
+    <%= content %>
+  <% end %>
+</div>

data/app/components/aeno/blocks/component_preview/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Aeno::Blocks::ComponentPreview
+  class Component < ::Aeno::ApplicationViewComponent
+    option(:title, optional: true)
+    option(:description, optional: true)
+
+    def default_style = { height: "300px" }
+  end
+end

data/app/components/aeno/blocks/component_preview/styles.css

@@ -0,0 +1,10 @@
+.cb-component-preview {
+  &__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ui-muted-color);
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+}

data/app/components/aeno/form_builder.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+class Aeno::FormBuilder < ActionView::Helpers::FormBuilder
+  class BaseComponent < Aeno::ApplicationViewComponent
+    INPUT_BASE_CLASSES = %w[
+      block
+      w-full
+      rounded-input
+      bg-input-bg
+      px-3
+      py-2
+      text-sm
+      text-input-text
+      placeholder:text-input-placeholder
+      outline-none
+      border
+      border-input-border
+      focus:border-input-border-focus
+      focus:ring-1
+      focus:ring-input-ring
+      shadow-sm
+    ].freeze
+
+    option(:id, optional: true)
+    option(:name)
+    option(:value, optional: true)
+    option(:disabled, default: proc { false })
+    option(:label, optional: true)
+    option(:type, optional: true)
+    option(:helper_text, optional: true)
+    option(:error_text, optional: true)
+    option(:placeholder, optional: true)
+    option(:required, default: proc { false })
+    option(:data, default: proc { {} })
+  end
+
+  def field(field_type, name, options = {}, &block)
+    klass = "::Aeno::Primitives::Input#{field_type.to_s.camelize}::Component".constantize
+    resolved_name = resolve_name(name)
+    error_text = @object&.errors&.[](name)&.first
+
+    value = options[:value] || @object&.send(name)
+
+    merged_options = options.merge(
+      id: options[:id] || "#{@object_name}_#{name}".parameterize(separator: "_"),
+      name: resolved_name,
+      error_text:,
+      value:
+    )
+
+    @template.render(klass.new(**merged_options), &block)
+  end
+
+  def text_field(name, options = {})
+    field(:text, name, options)
+  end
+
+  def password_field(name, options = {})
+    field(:password, name, options.merge(type: "password"))
+  end
+
+  def select_field(name, options = {}, &block)
+    field(:select, name, options, &block)
+  end
+
+  def text_area_field(name, options = {})
+    field(:text_area, name, options)
+  end
+
+  def tagging_field(name, options = {})
+    field(:tagging, name, options)
+  end
+
+  def attachments_field(name, options = {})
+    field(:attachments, name, options)
+  end
+
+  def text_area_ai_field(name, options = {})
+    field(:text_area_ai, name, options)
+  end
+
+  private
+
+    def resolve_name(name)
+      @object_name ? "#{@object_name}[#{name}]" : name
+    end
+end

data/app/components/aeno/pages/showcase/index/component.html.erb

@@ -0,0 +1,53 @@
+<div class="cg-showcase">
+  <h1>Button</h1>
+
+  <%= block("component_preview", title: "Preview") do %>
+    <%= ui("button", label: "Click me", variant: :default) %>
+  <% end %>
+
+  <%= block("component_preview", title: "Variants") do %>
+    <%= ui("button", label: "Default", variant: :default) %>
+    <%= ui("button", label: "Secondary", variant: :secondary) %>
+    <%= ui("button", label: "Destructive", variant: :destructive) %>
+    <%= ui("button", label: "Outline", variant: :outline) %>
+    <%= ui("button", label: "Ghost", variant: :ghost) %>
+    <%= ui("button", label: "Link", variant: :link) %>
+  <% end %>
+
+  <%= block("component_preview", title: "Sizes") do %>
+    <%= ui("button", label: "XSmall", size: :xsmall) %>
+    <%= ui("button", label: "Small", size: :small) %>
+    <%= ui("button", label: "Default") %>
+    <%= ui("button", label: "Large", size: :large) %>
+  <% end %>
+
+  <%= block("component_preview", title: "With Icons") do %>
+    <%= ui("button", label: "Settings", icon: "settings") %>
+    <%= ui("button", label: "Download", icon: "download", variant: :secondary) %>
+    <%= ui("button", label: "Delete", icon: "trash-2", variant: :destructive) %>
+  <% end %>
+
+  <%= ui("card") do %>
+    <h2>Props</h2>
+    <%= ui("card") do %>
+      <%= ui("table") do |t| %>
+        <% t.with_header do |h| %>
+          <% h.with_column do %>Name<% end %>
+          <% h.with_column do %>Description<% end %>
+          <% h.with_column do %>Values<% end %>
+        <% end %>
+        <% component_class(:button).props.each do |name, meta| %>
+          <% t.with_row do |r| %>
+            <% r.with_cell do %><code><%= name %></code><% end %>
+            <% r.with_cell do %><%= meta[:description] %><% end %>
+            <% r.with_cell do %>
+              <% if meta[:values] %>
+                <% meta[:values].each do |v| %><code><%= v %></code> <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,7 @@
+module Aeno::Pages::Showcase::Index
+  class Component < ::Aeno::ApplicationViewComponent
+    def component_class(name)
+      "Aeno::Primitives::#{name.to_s.camelize}::Component".constantize
+    end
+  end
+end

data/app/components/aeno/pages/showcase/index/styles.css

@@ -0,0 +1,27 @@
+.cg-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 900px;
+
+  & h1 {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  & h2 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ui-muted-color);
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+}

data/app/components/aeno/pages/showcase/placeholder/component.html.erb

@@ -0,0 +1,7 @@
+<div class="cg-showcase cg-showcase--not-ready">
+  <div class="cg-showcase__empty">
+    <%= lucide_icon("construction", class: "cg-showcase__empty-icon") %>
+    <h1><%= component_name %></h1>
+    <p class="text-muted">Documentation not ready yet.</p>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+module Aeno::Pages::Showcase::Placeholder
+  class Component < ::Aeno::ApplicationViewComponent
+    option :namespace
+    option :id
+
+    def component_name
+      id.to_s.titleize
+    end
+  end
+end

data/app/components/aeno/pages/showcase/show/component.html.erb

@@ -0,0 +1,38 @@
+<div class="cg-showcase">
+  <h1><%= title %></h1>
+  <% if description %>
+    <p class="text-muted"><%= description %></p>
+  <% end %>
+
+  <% examples.each do |example| %>
+    <%= block("component_preview", title: example.title, description: example.description) do %>
+      <% example.previews.each do |preview| %>
+        <%= render_component(**preview.props) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= ui("card") do %>
+    <h2>Props</h2>
+    <%= ui("card") do %>
+      <%= ui("table") do |t| %>
+        <% t.with_header do |h| %>
+          <% h.with_column do %>Name<% end %>
+          <% h.with_column do %>Description<% end %>
+          <% h.with_column do %>Values<% end %>
+        <% end %>
+        <% props.each do |name, meta| %>
+          <% t.with_row do |r| %>
+            <% r.with_cell do %><code><%= name %></code><% end %>
+            <% r.with_cell do %><%= meta[:description] %><% end %>
+            <% r.with_cell do %>
+              <% if meta[:values] %>
+                <% meta[:values].each do |v| %><code><%= v %></code> <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>