neon_sakura 0.1.4

data/app/views/shared/_navbar.html.erb

@@ -0,0 +1,306 @@
+<% config = NeonSakura.config %>
+<% return if config.nav_position == :none %>
+
+<nav class="<%= config.sticky_navbar ? 'sticky top-0 z-50 bg-background border-b border-border' : '' %> mb-6 flex items-center justify-center flex-wrap gap-3 sm:gap-4 md:gap-6 <%= config.sticky_navbar ? 'py-4 px-4' : '' %>" role="navigation" aria-label="Main navigation">
+  <% if config.app_icon.present? %>
+    <div class="inline-flex items-center text-cyan-400">
+      <%= render_theme_icon(config.app_icon, css_class: "w-6 h-6") %>
+    </div>
+  <% end %>
+
+  <% (config.nav_links || []).each do |link| %>
+    <%
+      # Check if condition for showing this link
+      condition = link[:if] || link[:condition]
+      next if condition && !instance_eval(&condition) rescue false
+    %>
+
+    <% case link[:type] %>
+    <% when "link" %>
+      <% is_active = current_page?(link[:path]) || (link[:active_paths] && link[:active_paths].any? { |p| current_page?(p) rescue false }) rescue false %>
+      <%= link_to link[:path], class: "inline-flex items-center transition-colors text-sm whitespace-nowrap #{is_active ? 'nav-active' : 'text-navbar-link hover:text-navbar-link'}", "aria-label": link[:aria_label] || "Go to #{link[:name]}", "aria-current": (is_active ? "page" : nil), target: link[:target], rel: (link[:target] == "_blank" ? "noopener noreferrer" : nil) do %>
+        <% if link[:icon] %>
+          <%= render_theme_icon(link[:icon], css_class: "w-4 h-4 mr-2") %>
+        <% end %>
+        <%= link[:name] %>
+      <% end %>
+
+    <% when "dropdown" %>
+      <div class="nav-dropdown" data-navbar-dropdown>
+        <button class="nav-dropdown-toggle" data-action="toggle" aria-label="<%= link[:aria_label] || "#{link[:name]} menu" %>" aria-haspopup="true" aria-expanded="false">
+          <% if link[:icon] %>
+            <%= render_theme_icon(link[:icon], css_class: "w-4 h-4") %>
+          <% end %>
+          <% # Show username for user_dropdown, otherwise show link name %>
+          <% if link[:name] == "user_dropdown" && respond_to?(:current_user) && current_user %>
+            <%= current_user.email.split('@').first %>
+          <% else %>
+            <%= link[:name] %>
+          <% end %>
+          <%= render_theme_icon("chevron_down", css_class: "w-4 h-4") %>
+        </button>
+        <div class="nav-dropdown-menu" data-menu>
+          <% (link[:items] || []).each do |item| %>
+            <%
+              # Check if condition for showing this item
+              item_condition = item[:if] || item[:condition]
+              next if item_condition && !instance_eval(&item_condition) rescue false
+            %>
+
+            <% if item[:type] == "divider" %>
+              <div class="nav-dropdown-divider"></div>
+
+            <% elsif item[:type] == "theme_selector" %>
+              <%# Render theme selector as nested submenu %>
+              <div class="nav-dropdown-submenu" data-submenu-container>
+                <a href="#" class="nav-dropdown-submenu-toggle" data-submenu-toggle aria-label="Theme options">
+                  <%= render_theme_icon("palette", css_class: "w-4 h-4") %>
+                  Themes
+                  <%= render_theme_icon("chevron_right", css_class: "w-4 h-4 ml-auto") %>
+                </a>
+                <div class="nav-dropdown-submenu-items" data-submenu>
+                  <% (NeonSakura.config.available_themes || []).each do |theme| %>
+                    <a href="#"
+                       data-theme-item
+                       data-theme-name="<%= theme[:name] %>"
+                       data-theme-mode="<%= theme[:mode] %>"
+                       aria-label="Switch to <%= theme[:label] %>">
+                      <span data-theme-checkmark style="display: none;">
+                        <%= render_theme_icon("check", css_class: "w-4 h-4") %>
+                      </span>
+                      <% if theme[:mode] == 'light' %>
+                        <%= render_theme_icon("sun", css_class: "w-4 h-4") %>
+                      <% else %>
+                        <%= render_theme_icon("moon", css_class: "w-4 h-4") %>
+                      <% end %>
+                      <%= theme[:label] %>
+                    </a>
+                  <% end %>
+                </div>
+              </div>
+
+            <% else %>
+              <%# Regular dropdown item %>
+              <%= link_to item[:path], class: item[:class], "aria-label": item[:aria_label] || "Go to #{item[:name]}", target: item[:target], rel: (item[:target] == "_blank" ? "noopener noreferrer" : nil), data: { turbo_method: item[:method] } do %>
+                <% if item[:icon].present? %>
+                  <%= render_theme_icon(item[:icon], css_class: "w-4 h-4") %>
+                <% end %>
+                <%= item[:name] %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+
+    <% when "button" %>
+      <%= button_to link[:path], method: link[:method] || :post, class: "navbar-button text-sm whitespace-nowrap", "aria-label": link[:aria_label] || link[:name] do %>
+        <% if link[:icon] %>
+          <%= render_theme_icon(link[:icon], css_class: "w-4 h-4 mr-2") %>
+        <% end %>
+        <%= link[:name] %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% if block_given? %>
+    <div class="navbar-custom-content inline-flex items-center">
+      <%= yield %>
+    </div>
+  <% end %>
+</nav>
+
+<%# Hidden data element for JavaScript to access available themes %>
+<div data-available-themes='<%= (NeonSakura.config.available_themes || []).to_json %>' style="display: none;"></div>
+
+<%# Optional: Hidden element for API endpoint configuration %>
+<% if NeonSakura.config.theme_api_endpoint.present? %>
+  <div data-theme-api-endpoint="<%= NeonSakura.config.theme_api_endpoint %>" style="display: none;"></div>
+<% end %>
+
+<script>
+(function() {
+  'use strict';
+
+  // Store global handlers flag on window to persist across page loads
+  window.neonSakuraNavbar = window.neonSakuraNavbar || {
+    globalHandlersSet: false
+  };
+
+  function handleOutsideClick(event) {
+    if (!event.target.closest('[data-navbar-dropdown]')) {
+      closeAllNavDropdowns();
+    }
+  }
+
+  function handleEscapeKey(event) {
+    if (event.key === 'Escape') {
+      closeAllNavDropdowns();
+    }
+  }
+
+  function initializeNavbarDropdowns() {
+    const dropdowns = document.querySelectorAll('[data-navbar-dropdown]');
+
+    dropdowns.forEach(function(dropdown) {
+      const toggle = dropdown.querySelector('[data-action="toggle"]');
+      const menu = dropdown.querySelector('[data-menu]');
+
+      if (!toggle || !menu) return;
+
+      // Remove any existing listeners to prevent duplicates
+      const newToggle = toggle.cloneNode(true);
+      toggle.parentNode.replaceChild(newToggle, toggle);
+
+      // Add click handler for toggle button
+      newToggle.addEventListener('click', function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const isOpen = dropdown.classList.contains('open');
+
+        // Close all other dropdowns first
+        closeAllNavDropdowns();
+
+        // Toggle this dropdown
+        if (!isOpen) {
+          dropdown.classList.add('open');
+          newToggle.setAttribute('aria-expanded', 'true');
+        }
+      });
+    });
+
+    // Set up global handlers only once
+    if (!window.neonSakuraNavbar.globalHandlersSet) {
+      document.addEventListener('click', handleOutsideClick);
+      document.addEventListener('keydown', handleEscapeKey);
+      window.neonSakuraNavbar.globalHandlersSet = true;
+    }
+  }
+
+  function closeAllNavDropdowns() {
+    const openDropdowns = document.querySelectorAll('[data-navbar-dropdown].open');
+
+    openDropdowns.forEach(function(dropdown) {
+      dropdown.classList.remove('open');
+      const toggle = dropdown.querySelector('[data-action="toggle"]');
+      if (toggle) {
+        toggle.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+
+  // Initialize on DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeNavbarDropdowns);
+  } else {
+    initializeNavbarDropdowns();
+  }
+
+  // Re-initialize on Turbo page loads
+  if (typeof Turbo !== 'undefined') {
+    document.addEventListener('turbo:load', initializeNavbarDropdowns);
+  }
+
+  // Re-initialize on Turbolinks page loads (legacy)
+  document.addEventListener('turbolinks:load', initializeNavbarDropdowns);
+
+  // Theme switcher functionality
+  const STORAGE_KEY_NAME = 'neon_sakura_theme_name';
+  const STORAGE_KEY_MODE = 'neon_sakura_theme_mode';
+
+  function getAvailableThemes() {
+    const themesElement = document.querySelector('[data-available-themes]');
+    if (themesElement) {
+      try {
+        return JSON.parse(themesElement.dataset.availableThemes);
+      } catch (e) {
+        console.error('Failed to parse available themes:', e);
+      }
+    }
+    return [{ name: 'purple', mode: 'dark', label: 'Purple Dark' }];
+  }
+
+  function getCurrentTheme() {
+    const themes = getAvailableThemes();
+    const storedName = localStorage.getItem(STORAGE_KEY_NAME);
+    const storedMode = localStorage.getItem(STORAGE_KEY_MODE);
+
+    if (storedName && storedMode) {
+      const found = themes.find(function(t) { return t.name === storedName && t.mode === storedMode; });
+      if (found) return found;
+    }
+
+    return themes[0];
+  }
+
+  function applyTheme(theme) {
+    const html = document.documentElement;
+    html.setAttribute('data-theme-name', theme.name);
+    html.setAttribute('data-theme-mode', theme.mode);
+
+    localStorage.setItem(STORAGE_KEY_NAME, theme.name);
+    localStorage.setItem(STORAGE_KEY_MODE, theme.mode);
+
+    document.cookie = 'theme_name=' + theme.name + '; path=/; max-age=31536000';
+    document.cookie = 'theme_mode=' + theme.mode + '; path=/; max-age=31536000';
+
+    updateThemeUI(theme);
+  }
+
+  function updateThemeUI(currentTheme) {
+    const themeItems = document.querySelectorAll('[data-theme-item]');
+    themeItems.forEach(function(item) {
+      const themeName = item.dataset.themeName;
+      const themeMode = item.dataset.themeMode;
+      const isActive = themeName === currentTheme.name && themeMode === currentTheme.mode;
+
+      const checkmark = item.querySelector('[data-theme-checkmark]');
+      if (checkmark) {
+        checkmark.style.display = isActive ? 'inline' : 'none';
+      }
+
+      if (isActive) {
+        item.setAttribute('aria-current', 'true');
+      } else {
+        item.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  function initializeThemeSwitcher() {
+    const currentTheme = getCurrentTheme();
+    applyTheme(currentTheme);
+
+    const themeItems = document.querySelectorAll('[data-theme-item]');
+    themeItems.forEach(function(item) {
+      // Remove existing listener
+      const newItem = item.cloneNode(true);
+      item.parentNode.replaceChild(newItem, item);
+
+      newItem.addEventListener('click', function(event) {
+        event.preventDefault();
+        const themeName = newItem.dataset.themeName;
+        const themeMode = newItem.dataset.themeMode;
+        const theme = getAvailableThemes().find(function(t) { return t.name === themeName && t.mode === themeMode; });
+        if (theme) {
+          applyTheme(theme);
+          closeAllNavDropdowns();
+        }
+      });
+    });
+  }
+
+  // Initialize theme switcher after dropdowns
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeThemeSwitcher);
+  } else {
+    initializeThemeSwitcher();
+  }
+
+  if (typeof Turbo !== 'undefined') {
+    document.addEventListener('turbo:load', initializeThemeSwitcher);
+  }
+
+  document.addEventListener('turbolinks:load', initializeThemeSwitcher);
+})();
+</script>

data/app/views/shared/_profile_image_selector.html.erb

@@ -0,0 +1,165 @@
+<%
+  # Profile Image Selector Component
+  # Radio card selection UI for choosing profile image source
+  #
+  # Parameters:
+  #   user: User object with profile_image_source attribute
+  #   form: Form builder object (from form_with)
+  #   field_name: Name of the field (default: :profile_image_source)
+  #   sources: Array of image source options (default: [:default, :gravatar, :upload])
+  #   show_upload: Show upload option (default: false, requires ActiveStorage)
+
+  user = local_assigns[:user]
+  form = local_assigns[:form]
+  field_name = local_assigns[:field_name] || :profile_image_source
+  sources = local_assigns[:sources] || [:default, :gravatar]
+  show_upload = local_assigns[:show_upload] || false
+%>
+
+<div class="profile-image-selector">
+  <label class="form-label font-medium"><%= local_assigns[:label] || "Profile Image Source" %></label>
+  <div class="profile-image-options">
+    <% if sources.include?(:default) %>
+      <div class="profile-image-option" data-value="">
+        <%= form.radio_button field_name, "",
+            id: "#{user.class.name.underscore}_#{field_name}_default",
+            checked: user.send(field_name).blank?,
+            class: "profile-image-radio d-none" %>
+        <div class="profile-image-card <%= 'selected' if user.send(field_name).blank? %>">
+          <div class="profile-image-card-body">
+            <% if user.respond_to?(:default_avatar_url) %>
+              <img src="<%= user.default_avatar_url %>" alt="Default Avatar" class="profile-image-preview">
+            <% else %>
+              <%= render "shared/icons/user", css_class: "w-15 h-15 text-text-muted" %>
+            <% end %>
+            <h6 class="profile-image-card-title">Default</h6>
+            <p class="profile-image-card-text">Generated avatar</p>
+            <div class="profile-image-selection-indicator">
+              <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-accent" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <% if sources.include?(:gravatar) %>
+      <div class="profile-image-option" data-value="gravatar">
+        <%= form.radio_button field_name, "gravatar",
+            id: "#{user.class.name.underscore}_#{field_name}_gravatar",
+            checked: user.send(field_name) == 'gravatar',
+            class: "profile-image-radio d-none" %>
+        <div class="profile-image-card <%= 'selected' if user.send(field_name) == 'gravatar' %>">
+          <div class="profile-image-card-body">
+            <% if user.respond_to?(:email) %>
+              <img src="<%= gravatar_url(user.email, size: 60) %>" alt="Gravatar" class="profile-image-preview">
+            <% else %>
+              <%= render "shared/icons/user_circle", css_class: "w-15 h-15 text-text-muted" %>
+            <% end %>
+            <h6 class="profile-image-card-title">
+              <%= render "shared/icons/user_circle", css_class: "w-4 h-4 inline-block mr-1" %>
+              Gravatar
+            </h6>
+            <p class="profile-image-card-text">Use your Gravatar image</p>
+            <div class="profile-image-selection-indicator">
+              <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-accent" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <% if show_upload && sources.include?(:upload) %>
+      <div class="profile-image-option" data-value="upload">
+        <%= form.radio_button field_name, "upload",
+            id: "#{user.class.name.underscore}_#{field_name}_upload",
+            checked: user.send(field_name) == 'upload',
+            class: "profile-image-radio d-none" %>
+        <div class="profile-image-card <%= 'selected' if user.send(field_name) == 'upload' %>">
+          <div class="profile-image-card-body">
+            <% if user.respond_to?(:profile_picture) && user.profile_picture.attached? %>
+              <img src="<%= url_for(user.profile_picture.variant(:thumbnail)) %>" alt="Uploaded Picture" class="profile-image-preview">
+            <% else %>
+              <%= render "shared/icons/upload", css_class: "w-15 h-15 text-text-muted" %>
+            <% end %>
+            <h6 class="profile-image-card-title">
+              <%= render "shared/icons/upload", css_class: "w-4 h-4 inline-block mr-1" %>
+              Upload
+            </h6>
+            <p class="profile-image-card-text">Upload your own image</p>
+            <div class="profile-image-selection-indicator">
+              <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-accent" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if sources.include?(:gravatar) %>
+    <div class="form-text mt-2">
+      <strong>Gravatar:</strong> Create an account at
+      <a href="https://gravatar.com" target="_blank" rel="noopener noreferrer" class="text-decoration-none">gravatar.com</a>
+      using <%= user.respond_to?(:email) ? 'your email address' : 'this email address' %> to set your profile image.
+    </div>
+  <% end %>
+
+  <% if show_upload && sources.include?(:upload) %>
+    <div id="profile-picture-upload-zone" class="mt-4 <%= 'hidden' unless user.send(field_name) == 'upload' %>">
+      <%= render "shared/file_upload",
+          field_name: "#{user.class.name.underscore}[profile_picture]",
+          accept: "image/*",
+          max_size: 5,
+          preview: true,
+          css_class: "profile-picture-upload" %>
+    </div>
+  <% end %>
+</div>
+
+<script>
+// Profile image selector JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+  setupProfileImageSelector();
+});
+
+document.addEventListener('turbo:load', function() {
+  setupProfileImageSelector();
+});
+
+function setupProfileImageSelector() {
+  const profileOptions = document.querySelectorAll('.profile-image-option');
+  const uploadZone = document.getElementById('profile-picture-upload-zone');
+
+  profileOptions.forEach(option => {
+    option.addEventListener('click', function() {
+      const value = this.dataset.value;
+      const radioButton = this.querySelector('input[type="radio"]');
+
+      if (radioButton) {
+        // Uncheck all radio buttons and remove selected class
+        profileOptions.forEach(opt => {
+          const radio = opt.querySelector('input[type="radio"]');
+          const card = opt.querySelector('.profile-image-card');
+          if (radio) radio.checked = false;
+          if (card) card.classList.remove('selected');
+        });
+
+        // Check the clicked radio button and add selected class
+        radioButton.checked = true;
+        const card = this.querySelector('.profile-image-card');
+        if (card) {
+          card.classList.add('selected');
+        }
+
+        // Show/hide upload zone
+        if (uploadZone) {
+          if (value === 'upload') {
+            uploadZone.classList.remove('hidden');
+          } else {
+            uploadZone.classList.add('hidden');
+          }
+        }
+      }
+    });
+  });
+}
+</script>

data/app/views/shared/_theme_switcher.html.erb

@@ -0,0 +1,64 @@
+<%
+# Theme switcher component
+# Supports 3 modes based on available theme count:
+# - disabled (1 theme): Shows current theme, button disabled
+# - toggle (2 themes): Simple moon/sun toggle button
+# - dropdown (3+ themes): Dropdown with checkmarks
+
+themes = NeonSakura.config.available_themes || []
+theme_count = themes.length
+mode = theme_count <= 1 ? :disabled : (theme_count == 2 ? :toggle : :dropdown)
+%>
+
+<% if mode == :disabled %>
+  <%# Single theme - disabled button showing current theme %>
+  <button class="nav-theme-button disabled" disabled aria-label="Theme: <%= themes.first[:label] %>">
+    <%= render_theme_icon("palette", css_class: "w-4 h-4") %>
+    <span class="sr-only"><%= themes.first[:label] %></span>
+  </button>
+
+<% elsif mode == :toggle %>
+  <%# Two themes - simple toggle button %>
+  <button id="theme-toggle" class="nav-theme-button" aria-label="Toggle theme">
+    <span id="theme-icon">
+      <%= render_theme_icon("moon", css_class: "w-4 h-4") %>
+    </span>
+  </button>
+
+<% else %>
+  <%# Three or more themes - dropdown menu %>
+  <div class="nav-dropdown" data-dropdown>
+    <button class="nav-dropdown-toggle" data-action="toggle" aria-label="Theme menu" aria-haspopup="true" aria-expanded="false">
+      <%= render_theme_icon("palette", css_class: "w-4 h-4") %>
+      <span class="hidden sm:inline">Theme</span>
+      <%= render_theme_icon("chevron_down", css_class: "w-4 h-4") %>
+    </button>
+    <div class="nav-dropdown-menu" data-menu>
+      <% themes.each do |theme| %>
+        <a href="#"
+           data-theme-item
+           data-theme-name="<%= theme[:name] %>"
+           data-theme-mode="<%= theme[:mode] %>"
+           aria-label="Switch to <%= theme[:label] %>">
+          <span data-theme-checkmark style="display: none;">
+            <%= render_theme_icon("check", css_class: "w-4 h-4") %>
+          </span>
+          <% if theme[:mode] == 'light' %>
+            <%= render_theme_icon("sun", css_class: "w-4 h-4") %>
+          <% else %>
+            <%= render_theme_icon("moon", css_class: "w-4 h-4") %>
+          <% end %>
+          <%= theme[:label] %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<%# Hidden data element for JavaScript to access available themes %>
+<div data-available-themes='<%= themes.to_json %>' style="display: none;"></div>
+
+<%# Optional: Hidden element for API endpoint configuration %>
+<% if NeonSakura.config.theme_api_endpoint.present? %>
+  <div data-theme-api-endpoint="<%= NeonSakura.config.theme_api_endpoint %>" style="display: none;"></div>
+<% end %>

data/app/views/shared/icons/_adjustments.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Adjustments (sliders/settings) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
+</svg>

data/app/views/shared/icons/_alert_circle.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+</svg>

data/app/views/shared/icons/_alert_triangle.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+</svg>

data/app/views/shared/icons/_archive.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+</svg>

data/app/views/shared/icons/_arrow_down.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6"></path>
+</svg>

data/app/views/shared/icons/_arrow_left.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path>
+</svg>

data/app/views/shared/icons/_arrow_up.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:css_class] || 'w-4 h-4' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path>
+</svg>

data/app/views/shared/icons/_arrows_pointing_in.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Arrows Pointing In (compress, reset zoom) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+</svg>

data/app/views/shared/icons/_arrows_pointing_out.html.erb

@@ -0,0 +1,10 @@
+<%# Icon: Arrows Pointing Out (expand/fullscreen) %>
+<%# Source: https://heroicons.com/ %>
+<svg xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     stroke-width="1.5"
+     stroke="currentColor"
+     class="<%= css_class %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>

data/app/views/shared/icons/_artemis_logo.html.erb

@@ -0,0 +1,26 @@
+<%
+  # Accept gradient_id parameter to allow multiple logos on same page
+  gradient_id = local_assigns[:gradient_id] || "purpleGradient"
+  css_class = local_assigns[:css_class] || ""
+%>
+<svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" class="<%= css_class %>" aria-hidden="<%= local_assigns[:aria_hidden] || 'true' %>" role="<%= local_assigns[:role] || 'img' %>">
+  <% if local_assigns[:title] %>
+    <title><%= local_assigns[:title] %></title>
+  <% end %>
+  <defs>
+    <linearGradient id="<%= gradient_id %>" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#7C3AED;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#4C1D95;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="30" cy="30" r="30" fill="url(#<%= gradient_id %>)"/>
+  <circle cx="25.8" cy="25.8" r="14.1" fill="none" stroke="#7DD3FC" stroke-width="2.8" stroke-linecap="round"/>
+  <line x1="36.3" y1="36.3" x2="44.55" y2="44.55" stroke="#7DD3FC" stroke-width="2.8" stroke-linecap="round"/>
+  <g transform="translate(25.8, 25.8)">
+    <circle cx="1.76" cy="0" r="5.85" fill="#7DD3FC"/>
+    <circle cx="3.52" cy="0" r="5.85" fill="url(#<%= gradient_id %>)"/>
+  </g>
+  <circle cx="21.07" cy="18.75" r="0.94" fill="#7DD3FC" opacity="0.6"/>
+  <circle cx="30.45" cy="21.07" r="0.7" fill="#7DD3FC" opacity="0.4"/>
+</svg>