beautiful_photons 0.1.0

data/app/views/beautiful_photons/admin/photos/edit.html.erb

@@ -0,0 +1,35 @@
+<%= ui_form_page(title: "Edit Photo", back_url: beautiful_photons.photo_path(@photo)) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_form(action: beautiful_photons.photo_path(@photo), method: :patch) do %>
+    <%= ui_section(title: "Focal Point") do %>
+      <div data-controller="focal-point" style="position: relative; cursor: crosshair;">
+        <% if @photo.image.attached? %>
+          <%= image_tag main_app.url_for(@photo.image),
+            alt: @photo.title,
+            style: "width: 100%; display: block;",
+            data: { focal_point_target: "image", action: "click->focal-point#pick" } %>
+        <% end %>
+        <div data-focal-point-target="pin"
+             style="position: absolute; width: 20px; height: 20px; background: rgba(255,0,0,0.8); border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; left: <%= @photo.focal_x %>%; top: <%= @photo.focal_y %>%;">
+        </div>
+        <input type="hidden" name="photo[focal_x]" value="<%= @photo.focal_x %>" data-focal-point-target="focalX">
+        <input type="hidden" name="photo[focal_y]" value="<%= @photo.focal_y %>" data-focal-point-target="focalY">
+      </div>
+    <% end %>
+
+    <%= ui_section(title: "Details") do %>
+      <%= ui_input(name: "photo[title]", value: @photo.title) %>
+      <%= ui_textarea(name: "photo[description]", value: @photo.description) %>
+    <% end %>
+
+    <%= ui_section(title: "Mobile Focal Point") do %>
+      <%= ui_grid(cols: { default: 2 }, gap: :md) do %>
+        <%= ui_input(name: "photo[mobile_focal_x]", type: :number, value: @photo.mobile_focal_x, min: 0, max: 100) %>
+        <%= ui_input(name: "photo[mobile_focal_y]", type: :number, value: @photo.mobile_focal_y, min: 0, max: 100) %>
+      <% end %>
+    <% end %>
+
+    <%= ui_button(label: "Save") %>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/photos/index.html.erb

@@ -0,0 +1,60 @@
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_page_header(title: "Photos") do |header| %>
+    <% header.action do %>
+      <%= ui_button(label: "Upload", href: beautiful_photons.new_photo_path) %>
+    <% end %>
+  <% end %>
+
+  <div data-controller="bulk-select" data-bulk-select-message-value="Delete {count}? This cannot be undone.">
+    <%= ui_form(action: beautiful_photons.bulk_destroy_photos_path, method: :delete,
+      data: { bulk_select_target: "form" }) do %>
+
+      <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center;">
+        <%= ui_button(label: "Select All", type: :button, variant: :secondary, size: :sm,
+          data: { bulk_select_target: "selectAllButton", action: "click->bulk-select#selectAll" }) %>
+        <%= ui_button(label: "Unselect All", type: :button, variant: :secondary, size: :sm,
+          data: { bulk_select_target: "unselectAllButton", action: "click->bulk-select#unselectAll" }) %>
+        <%= ui_button(label: "Delete Selected", type: :button, variant: :danger, size: :sm,
+          data: { bulk_select_target: "removeButton", action: "click->bulk-select#showConfirm" }) %>
+      </div>
+
+      <%= ui_grid(cols: { default: 2, sm: 3, lg: 4 }, gap: :md) do %>
+        <% @photos.each do |photo| %>
+          <% if photo.image.attached? %>
+            <div style="position: relative;">
+              <input type="checkbox" name="photo_ids[]" value="<%= photo.id %>"
+                     data-bulk-select-target="checkbox"
+                     data-action="change->bulk-select#toggle"
+                     style="position: absolute; top: 6px; left: 6px; z-index: 2; width: 18px; height: 18px;">
+              <%= link_to beautiful_photons.photo_path(photo), style: "display: block;" do %>
+                <div style="aspect-ratio: 1; background: #1a1a1a; border-radius: 4px; overflow: hidden;">
+                  <%= image_tag main_app.url_for(photo.image), alt: photo.title,
+                    loading: "lazy",
+                    style: "width: 100%; height: 100%; object-fit: cover;",
+                    onload: "this.style.opacity=1",
+                    onerror: "this.style.display='none'" %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%# Confirmation modal %>
+    <div data-bulk-select-target="modal"
+         data-action="click->bulk-select#closeOnBackdrop"
+         class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div class="rounded-xl border border-gray-200 bg-white p-6 w-full mx-4 max-w-sm dark:border-zinc-700 dark:bg-zinc-800">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200 mb-2">Delete Photos</h3>
+        <p data-bulk-select-target="modalMessage" class="text-gray-600 dark:text-gray-400 mb-6"></p>
+        <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+          <%= ui_button(label: "Cancel", type: :button, variant: :secondary, size: :sm,
+            data: { action: "click->bulk-select#cancelRemove" }) %>
+          <%= ui_button(label: "Delete", type: :button, variant: :danger, size: :sm,
+            data: { action: "click->bulk-select#confirmRemove" }) %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/beautiful_photons/admin/photos/new.html.erb

@@ -0,0 +1,10 @@
+<%= ui_form_page(title: "Upload Photos", back_url: beautiful_photons.photos_path) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_form(action: beautiful_photons.bulk_create_photos_path, method: :post, multipart: true) do %>
+    <%= ui_file_upload(name: "images[]", accept: "image/*", multiple: true, label: "Choose photos", hint: "Select one or more images. Titles auto-generate from filenames.") %>
+    <div style="margin-top: 1rem;">
+      <%= ui_button(label: "Upload") %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/photos/show.html.erb

@@ -0,0 +1,66 @@
+<%= ui_show_page(title: @photo.title || "Untitled", back_url: beautiful_photons.photos_path) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_section do %>
+    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;">
+      <% if @photo.image.attached? %>
+        <div style="width: 300px; flex-shrink: 0;">
+          <%= image_tag main_app.url_for(@photo.image), alt: @photo.title,
+            style: "width: 100%; border-radius: 4px; object-fit: cover;" %>
+        </div>
+      <% end %>
+      <div style="flex: 1; min-width: 200px;">
+        <% if @photo.description.present? %>
+          <p style="color: #6b7280; margin-bottom: 1rem;"><%= @photo.description %></p>
+        <% end %>
+        <div style="margin-bottom: 0.75rem;">
+          <%= ui_form(action: beautiful_photons.photo_path(@photo), method: :patch) do %>
+            <label class="block text-sm font-medium text-surface-700 mb-1">Category</label>
+            <%= ui_select(name: "photo[category_id]",
+              options: BeautifulPhotons::Category.order(:name).map { |c| [ c.name, c.id ] },
+              selected: @photo.category_id,
+              include_blank: "None") %>
+            <%= ui_button(label: "Save", size: :sm) %>
+          <% end %>
+        </div>
+        <div style="margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
+          <%= ui_button(label: "Edit", href: beautiful_photons.edit_photo_path(@photo), variant: :secondary, size: :sm) %>
+          <%= ui_form(action: beautiful_photons.photo_path(@photo), method: :delete, data: { turbo_confirm: "Delete this photo? This cannot be undone." }) do %>
+            <%= ui_button(label: "Delete", type: :submit, variant: :danger, size: :sm) %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <%= ui_section(title: "Standalones") do %>
+    <% standalones = @photo.standalones %>
+    <% if standalones.any? %>
+      <% standalones.each do |standalone| %>
+        <div>
+          <%= link_to standalone.label, beautiful_photons.standalone_path(standalone) %>
+          <span style="color: #6b7280;">(<%= standalone.key %>)</span>
+        </div>
+      <% end %>
+    <% else %>
+      <p>Not used in any standalone placements</p>
+    <% end %>
+  <% end %>
+
+  <%= ui_section(title: "Galleries") do %>
+    <% gallery_photos = @photo.gallery_photos.includes(:gallery) %>
+    <% if gallery_photos.any? %>
+      <% gallery_photos.each do |gp| %>
+        <div>
+          <%= link_to gp.gallery.title, beautiful_photons.gallery_path(gp.gallery) %>
+          — position <%= gp.position %>
+          <% if gp.category.present? %>
+            (<%= gp.category %>)
+          <% end %>
+        </div>
+      <% end %>
+    <% else %>
+      <p>Not in any galleries</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/standalones/change_photo.html.erb

@@ -0,0 +1,39 @@
+<%= ui_form_page(title: "Change Photo", back_url: beautiful_photons.standalone_path(@standalone)) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <% if @standalone.photo&.image&.attached? %>
+    <%= ui_section(title: "Current") do %>
+      <div style="display: flex; align-items: center; gap: 1rem;">
+        <%= image_tag main_app.url_for(@standalone.photo.image), alt: @standalone.photo.title,
+          style: "width: 80px; height: 80px; object-fit: cover; border-radius: 4px;" %>
+        <div>
+          <strong><%= @standalone.photo.title || "Untitled" %></strong>
+          <%= ui_form(action: beautiful_photons.standalone_path(@standalone), method: :patch) do %>
+            <input type="hidden" name="standalone[photo_id]" value="">
+            <%= ui_button(label: "Remove", variant: :danger, size: :sm) %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= ui_section(title: "Choose Photo") do %>
+    <% if @photos.any? %>
+      <%= ui_grid(cols: { default: 3, sm: 4, lg: 5 }, gap: :sm) do %>
+        <% @photos.each do |photo| %>
+          <% if photo.image.attached? %>
+            <%= ui_form(action: beautiful_photons.standalone_path(@standalone), method: :patch) do %>
+              <input type="hidden" name="standalone[photo_id]" value="<%= photo.id %>">
+              <button type="submit" style="cursor: pointer; border: none; background: none; padding: 0; width: 100%;">
+                <% border_color = @standalone.photo_id == photo.id ? "#D4636D" : "transparent" %>
+                <%= image_tag main_app.url_for(photo.image), alt: photo.title, style: "width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 2px solid #{border_color};" %>
+              </button>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <p>No photos uploaded yet.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/standalones/edit_crop.html.erb

@@ -0,0 +1,38 @@
+<% desktop_aspect = @standalone.aspect.presence || "4:3" %>
+<%= ui_form_page(title: "Desktop Crop (#{desktop_aspect})", back_url: beautiful_photons.standalone_path(@standalone)) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_form(action: beautiful_photons.standalone_path(@standalone), method: :patch) do %>
+    <input type="hidden" name="standalone[photo_id]" value="<%= @standalone.photo_id %>">
+
+    <div data-controller="crop-editor" data-crop-editor-aspect-value="<%= desktop_aspect %>">
+      <div style="position: relative; overflow: hidden; user-select: none; border-radius: 4px;">
+        <%= image_tag main_app.url_for(@standalone.photo.image), alt: @standalone.photo.title,
+          style: "width: 100%; display: block;",
+          data: { crop_editor_target: "image" } %>
+        <div data-crop-editor-target="viewport"
+             data-action="mousedown->crop-editor#startDrag touchstart->crop-editor#startDrag"
+             style="position: absolute; border: 2px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); cursor: grab; display: none;">
+        </div>
+      </div>
+
+      <input type="hidden" name="standalone[crop_x]" value="<%= @standalone.crop_x %>" data-crop-editor-target="cropX">
+      <input type="hidden" name="standalone[crop_y]" value="<%= @standalone.crop_y %>" data-crop-editor-target="cropY">
+      <input type="hidden" name="standalone[crop_zoom]" value="<%= @standalone.crop_zoom %>" data-crop-editor-target="cropZoom">
+
+      <div style="margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem;">
+        <label style="color: #6b7280; font-size: 0.875rem; white-space: nowrap;">Zoom</label>
+        <input type="range" min="1" max="3" step="0.05" value="<%= @standalone.crop_zoom %>"
+               data-crop-editor-target="zoomSlider"
+               data-action="input->crop-editor#sliderZoom"
+               style="flex: 1;">
+      </div>
+    </div>
+
+    <p style="color: #6b7280; font-size: 0.75rem; margin-top: 0.5rem;">Drag to position. Use slider to zoom.</p>
+
+    <div style="margin-top: 1rem;">
+      <%= ui_button(label: "Save") %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/standalones/edit_mobile_crop.html.erb

@@ -0,0 +1,37 @@
+<%= ui_form_page(title: "Mobile Crop (#{@standalone.mobile_aspect})", back_url: beautiful_photons.standalone_path(@standalone)) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_form(action: beautiful_photons.standalone_path(@standalone), method: :patch) do %>
+    <input type="hidden" name="standalone[photo_id]" value="<%= @standalone.photo_id %>">
+
+    <div data-controller="crop-editor" data-crop-editor-aspect-value="<%= @standalone.mobile_aspect %>">
+      <div style="position: relative; overflow: hidden; user-select: none; border-radius: 4px;">
+        <%= image_tag main_app.url_for(@standalone.photo.image), alt: @standalone.photo.title,
+          style: "width: 100%; display: block;",
+          data: { crop_editor_target: "image" } %>
+        <div data-crop-editor-target="viewport"
+             data-action="mousedown->crop-editor#startDrag touchstart->crop-editor#startDrag"
+             style="position: absolute; border: 2px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); cursor: grab; display: none;">
+        </div>
+      </div>
+
+      <input type="hidden" name="standalone[mobile_crop_x]" value="<%= @standalone.mobile_crop_x %>" data-crop-editor-target="cropX">
+      <input type="hidden" name="standalone[mobile_crop_y]" value="<%= @standalone.mobile_crop_y %>" data-crop-editor-target="cropY">
+      <input type="hidden" name="standalone[mobile_crop_zoom]" value="<%= @standalone.mobile_crop_zoom %>" data-crop-editor-target="cropZoom">
+
+      <div style="margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem;">
+        <label style="color: #6b7280; font-size: 0.875rem; white-space: nowrap;">Zoom</label>
+        <input type="range" min="1" max="3" step="0.05" value="<%= @standalone.mobile_crop_zoom %>"
+               data-crop-editor-target="zoomSlider"
+               data-action="input->crop-editor#sliderZoom"
+               style="flex: 1;">
+      </div>
+    </div>
+
+    <p style="color: #6b7280; font-size: 0.75rem; margin-top: 0.5rem;">Drag to position. Use slider to zoom.</p>
+
+    <div style="margin-top: 1rem;">
+      <%= ui_button(label: "Save") %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/standalones/index.html.erb

@@ -0,0 +1,27 @@
+<%= ui_page(max_width: :lg) do %>
+  <%= ui_page_header(title: "Standalones") %>
+
+  <% @standalones.each do |standalone| %>
+    <%= ui_card_link(href: beautiful_photons.standalone_path(standalone)) do %>
+      <div style="display: flex; align-items: center; gap: 0.75rem;">
+        <% if standalone.photo&.image&.attached? %>
+          <%= image_tag main_app.url_for(standalone.photo.image), alt: standalone.label, style: "width: 48px; height: 48px; object-fit: cover; border-radius: 4px;" %>
+        <% else %>
+          <div style="width: 48px; height: 48px; background: #1C1C1C; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.75" stroke="#666" style="width: 24px; height: 24px;">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" />
+            </svg>
+          </div>
+        <% end %>
+        <div>
+          <strong><%= standalone.label %></strong>
+          <div style="color: #6b7280; font-size: 0.875rem;"><%= standalone.key %></div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% if @standalones.empty? %>
+    <p>No standalone placements registered yet. Add <code>beautiful_photons_photo("key")</code> to your views to register them.</p>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/admin/standalones/show.html.erb

@@ -0,0 +1,52 @@
+<%= ui_show_page(title: @standalone.label, back_url: beautiful_photons.standalones_path) %>
+
+<%= ui_page(max_width: :lg) do %>
+  <% if @standalone.photo&.image&.attached? %>
+    <%= ui_section do %>
+      <div style="display: flex; gap: 1.5rem; align-items: flex-start;">
+        <%= image_tag main_app.url_for(@standalone.photo.image), alt: @standalone.photo.title,
+          style: "width: 200px; border-radius: 4px; object-fit: cover; aspect-ratio: 4/3;" %>
+        <div>
+          <strong><%= @standalone.photo.title || "Untitled" %></strong>
+          <div style="color: #6b7280; font-size: 0.875rem; margin-top: 0.25rem;"><%= @standalone.key %></div>
+          <% if @standalone.aspect.present? %>
+            <div style="color: #6b7280; font-size: 0.875rem; margin-top: 0.25rem;">Desktop: <%= @standalone.aspect %> &middot; Mobile: <%= @standalone.mobile_aspect || "not set" %></div>
+          <% end %>
+          <div style="margin-top: 1rem;">
+            <%= ui_button(label: "Change Photo", href: beautiful_photons.change_photo_standalone_path(@standalone), variant: :secondary, size: :sm) %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= ui_section(title: "Desktop Crop") do %>
+      <div style="max-width: 400px; overflow: hidden; border-radius: 4px;">
+        <% desktop_aspect = @standalone.aspect.presence || "4:3" %>
+        <%= image_tag main_app.url_for(@standalone.photo.image), alt: "Desktop preview",
+          style: "width: 100%; aspect-ratio: #{desktop_aspect.tr(':', '/')}; object-fit: cover; object-position: #{@standalone.crop_x}% #{@standalone.crop_y}%; #{"transform: scale(#{@standalone.crop_zoom});" if @standalone.crop_zoom.to_f != 1.0}" %>
+      </div>
+      <div style="margin-top: 0.75rem;">
+        <%= ui_button(label: "Edit", href: beautiful_photons.edit_crop_standalone_path(@standalone), variant: :secondary, size: :sm) %>
+      </div>
+    <% end %>
+
+    <% if @standalone.mobile_aspect.present? %>
+      <%= ui_section(title: "Mobile Crop") do %>
+        <div style="max-width: 200px; overflow: hidden; border-radius: 4px;">
+          <%= image_tag main_app.url_for(@standalone.photo.image), alt: "Mobile preview",
+            style: "width: 100%; aspect-ratio: #{@standalone.mobile_aspect.tr(':', '/')}; object-fit: cover; object-position: #{@standalone.mobile_crop_x}% #{@standalone.mobile_crop_y}%; #{"transform: scale(#{@standalone.mobile_crop_zoom});" if @standalone.mobile_crop_zoom.to_f != 1.0}" %>
+        </div>
+        <div style="margin-top: 0.75rem;">
+          <%= ui_button(label: "Edit", href: beautiful_photons.edit_mobile_crop_standalone_path(@standalone), variant: :secondary, size: :sm) %>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= ui_section do %>
+      <p>No photo assigned.</p>
+      <div style="margin-top: 0.75rem;">
+        <%= ui_button(label: "Assign Photo", href: beautiful_photons.change_photo_standalone_path(@standalone)) %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/beautiful_photons/standalone_photos/show.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag "bp-photo-#{@standalone.key}" do %>
+  <% crop_style = "object-position: #{@standalone.crop_x.to_f}% #{@standalone.crop_y.to_f}%" %>
+  <% crop_style += "; transform: scale(#{@standalone.crop_zoom.to_f})" if @standalone.crop_zoom.to_f != 1.0 %>
+
+  <% if @standalone.mobile_crop_x != @standalone.crop_x ||
+        @standalone.mobile_crop_y != @standalone.crop_y ||
+        @standalone.mobile_crop_zoom != @standalone.crop_zoom %>
+    <style>
+      @media (max-width: 768px) {
+        #bp-img-<%= @standalone.id %> {
+          object-position: <%= @standalone.mobile_crop_x.to_f %>% <%= @standalone.mobile_crop_y.to_f %>% !important;
+          <% if @standalone.mobile_crop_zoom.to_f != 1.0 %>
+            transform: scale(<%= @standalone.mobile_crop_zoom.to_f %>) !important;
+          <% end %>
+        }
+      }
+    </style>
+  <% end %>
+
+  <%= image_tag main_app.url_for(@photo.image),
+    id: "bp-img-#{@standalone.id}",
+    alt: @photo.title,
+    loading: "lazy",
+    style: "width: 100%; height: 100%; object-fit: cover; #{crop_style}; opacity: 0; transition: opacity 0.3s;",
+    onload: "this.style.opacity=1",
+    onerror: "this.style.display='none';var fw=this.closest('.bp-photo').querySelector('.bp-fallback-wrap');if(fw)fw.style.display='flex'" %>
+<% end %>

data/app/views/layouts/beautiful_photons/admin.html.erb

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Photos Admin</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <% if lookup_context.exists?("head", ["application"], true) %>
+    <%= render "head" %>
+  <% end %>
+</head>
+<body>
+  <nav style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; background: #fff;">
+    <% if defined?(main_app) && main_app.respond_to?(:madmin_root_path) %>
+      <%= link_to "Admin", main_app.madmin_root_path, style: "color: #6b7280; text-decoration: none;" %>
+      <span style="color: #d1d5db;">|</span>
+    <% end %>
+    <%= link_to "Photos", beautiful_photons.photos_path, class: "text-sm font-medium no-underline #{controller_name == 'photos' ? 'text-accent-600 border-b-2 border-accent-600 pb-1' : 'text-surface-500 hover:text-accent-600'}" %>
+    <%= link_to "Galleries", beautiful_photons.galleries_path, class: "text-sm font-medium no-underline #{controller_name == 'galleries' ? 'text-accent-600 border-b-2 border-accent-600 pb-1' : 'text-surface-500 hover:text-accent-600'}" %>
+    <%= link_to "Standalones", beautiful_photons.standalones_path, class: "text-sm font-medium no-underline #{controller_name == 'standalones' ? 'text-accent-600 border-b-2 border-accent-600 pb-1' : 'text-surface-500 hover:text-accent-600'}" %>
+    <%= link_to "Categories", beautiful_photons.categories_path, class: "text-sm font-medium no-underline #{controller_name == 'categories' ? 'text-accent-600 border-b-2 border-accent-600 pb-1' : 'text-surface-500 hover:text-accent-600'}" %>
+  </nav>
+
+  <main style="padding: 1rem;">
+    <% if flash[:notice] %>
+      <div style="background: #065f46; color: #d1fae5; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.875rem;">
+        <%= flash[:notice] %>
+      </div>
+    <% end %>
+    <% if flash[:alert] %>
+      <div style="background: #991b1b; color: #fecaca; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.875rem;">
+        <%= flash[:alert] %>
+      </div>
+    <% end %>
+    <%= yield %>
+  </main>
+</body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+pin "beautiful_photons/index", to: "beautiful_photons/index.js"
+pin "beautiful_photons/focal_point_controller", to: "beautiful_photons/focal_point_controller.js"
+pin "beautiful_photons/reorder_controller", to: "beautiful_photons/reorder_controller.js"
+pin "beautiful_photons/crop_editor_controller", to: "beautiful_photons/crop_editor_controller.js"
+pin "beautiful_photons/bulk_select_controller", to: "beautiful_photons/bulk_select_controller.js"

data/config/routes.rb

@@ -0,0 +1,36 @@
+BeautifulPhotons::Engine.routes.draw do
+  scope module: :admin do
+    resources :photos, only: [ :index, :show, :new, :create, :edit, :update, :destroy ] do
+      post :bulk_create, on: :collection
+      delete :bulk_destroy, on: :collection
+    end
+    resources :standalones, only: [ :index, :show, :update ] do
+      member do
+        get :edit_crop
+        get :edit_mobile_crop
+        get :change_photo
+      end
+    end
+    resources :categories, only: [ :index, :create, :destroy ]
+    resources :galleries, only: [ :index, :show, :new, :create, :edit, :update, :destroy ] do
+      member do
+        patch :reorder
+        get :add_photos_page
+        post :add_photos
+        delete :remove_photos
+      end
+    end
+  end
+
+  # Public turbo frame endpoint for standalone photos
+  get "standalone_photo/:key", to: "standalone_photos#show", as: :standalone_photo
+
+  namespace :api do
+    namespace :v1 do
+      resources :photos
+      resources :galleries do
+        resources :photos, controller: "gallery_photos", only: [ :index, :create, :update, :destroy ], as: :photos
+      end
+    end
+  end
+end

data/db/migrate/20260318000001_create_beautiful_photons_photos.rb

@@ -0,0 +1,15 @@
+class CreateBeautifulPhotonsPhotos < ActiveRecord::Migration[8.1]
+  def change
+    create_table :beautiful_photons_photos do |t|
+      t.string :title
+      t.text :description
+      t.decimal :focal_x, default: 50.0, null: false
+      t.decimal :focal_y, default: 50.0, null: false
+      t.decimal :mobile_focal_x
+      t.decimal :mobile_focal_y
+      t.boolean :published, default: false, null: false
+
+      t.timestamps
+    end
+  end
+end

data/db/migrate/20260318000002_create_beautiful_photons_galleries.rb

@@ -0,0 +1,13 @@
+class CreateBeautifulPhotonsGalleries < ActiveRecord::Migration[8.1]
+  def change
+    create_table :beautiful_photons_galleries do |t|
+      t.string :name, null: false
+      t.string :title, null: false
+      t.text :description
+
+      t.timestamps
+    end
+
+    add_index :beautiful_photons_galleries, :name, unique: true
+  end
+end

data/db/migrate/20260318000003_create_beautiful_photons_gallery_photos.rb

@@ -0,0 +1,15 @@
+class CreateBeautifulPhotonsGalleryPhotos < ActiveRecord::Migration[8.1]
+  def change
+    create_table :beautiful_photons_gallery_photos do |t|
+      t.references :gallery, null: false, foreign_key: { to_table: :beautiful_photons_galleries }
+      t.references :photo, null: false, foreign_key: { to_table: :beautiful_photons_photos }
+      t.integer :position, null: false
+      t.string :category
+
+      t.timestamps
+    end
+
+    add_index :beautiful_photons_gallery_photos, %i[gallery_id photo_id category],
+              unique: true, name: "idx_bp_gallery_photos_uniqueness"
+  end
+end

data/db/migrate/20260318000004_create_beautiful_photons_standalones.rb

@@ -0,0 +1,13 @@
+class CreateBeautifulPhotonsStandalones < ActiveRecord::Migration[8.1]
+  def change
+    create_table :beautiful_photons_standalones do |t|
+      t.string :key, null: false
+      t.string :label
+      t.references :photo, foreign_key: { to_table: :beautiful_photons_photos }
+
+      t.timestamps
+    end
+
+    add_index :beautiful_photons_standalones, :key, unique: true
+  end
+end

data/db/migrate/20260318000005_add_crop_to_beautiful_photons_standalones.rb

@@ -0,0 +1,12 @@
+class AddCropToBeautifulPhotonsStandalones < ActiveRecord::Migration[8.1]
+  def change
+    add_column :beautiful_photons_standalones, :aspect, :string
+    add_column :beautiful_photons_standalones, :mobile_aspect, :string
+    add_column :beautiful_photons_standalones, :crop_x, :decimal, default: 50.0, null: false
+    add_column :beautiful_photons_standalones, :crop_y, :decimal, default: 50.0, null: false
+    add_column :beautiful_photons_standalones, :crop_zoom, :decimal, default: 1.0, null: false
+    add_column :beautiful_photons_standalones, :mobile_crop_x, :decimal, default: 50.0, null: false
+    add_column :beautiful_photons_standalones, :mobile_crop_y, :decimal, default: 50.0, null: false
+    add_column :beautiful_photons_standalones, :mobile_crop_zoom, :decimal, default: 1.0, null: false
+  end
+end

data/db/migrate/20260318185017_create_beautiful_photons_categories.rb

@@ -0,0 +1,11 @@
+class CreateBeautifulPhotonsCategories < ActiveRecord::Migration[8.1]
+  def change
+    create_table :beautiful_photons_categories do |t|
+      t.string :name, null: false
+
+      t.timestamps
+    end
+
+    add_index :beautiful_photons_categories, :name, unique: true
+  end
+end

data/db/migrate/20260318194125_add_category_to_beautiful_photons_photos.rb

@@ -0,0 +1,6 @@
+class AddCategoryToBeautifulPhotonsPhotos < ActiveRecord::Migration[8.1]
+  def change
+    add_reference :beautiful_photons_photos, :category, null: true,
+      foreign_key: { to_table: :beautiful_photons_categories }
+  end
+end

data/lib/beautiful_photons/engine.rb

@@ -0,0 +1,30 @@
+module BeautifulPhotons
+  class Engine < ::Rails::Engine
+    isolate_namespace BeautifulPhotons
+
+    initializer "beautiful_photons.migrations" do |app|
+      config.paths["db/migrate"].expanded.each do |expanded_path|
+        app.config.paths["db/migrate"] << expanded_path
+      end
+    end
+
+    initializer "beautiful_photons.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << root.join("config/importmap.rb")
+      end
+    end
+
+    initializer "beautiful_photons.url_helpers" do
+      ActiveSupport.on_load(:action_controller) do
+        helper Rails.application.routes.url_helpers
+      end
+    end
+
+    initializer "beautiful_photons.view_helpers" do
+      ActiveSupport.on_load(:action_view) do
+        require_relative "../../app/helpers/beautiful_photons/photo_helper"
+        include BeautifulPhotons::PhotoHelper
+      end
+    end
+  end
+end

data/lib/beautiful_photons/version.rb

@@ -0,0 +1,3 @@
+module BeautifulPhotons
+  VERSION = "0.1.0"
+end