venus_media_library 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8bc0532620557b83e5d9441d9d7d3c8b6908e07de77b902387156212c5f34dbb
+  data.tar.gz: e55f2d5bd5698921d1725718c5fa3c744a3ee365c78fa17a2fcde0886e195bb8
+SHA512:
+  metadata.gz: 8a5b72c1b7b0ba5efbaacfc3e6f2e3fc98e2bfbf1248d2c102c171231b9967e2ce37bf39696a5fcdf596129fc0623c19bbf240292f5c6f5f682956218b99edcc
+  data.tar.gz: bd469adfdf85aec05d9dd5dd6a69cb5188b5c1354ded20a85e040133c6f3bad3cb2aeaed0722c55ac75f4e5b5f29454b52269c05684ab6fd46dd40d7f3141e9c

data/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+All notable changes to this project are documented here. The format is based on
+[Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and this project adheres
+to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-08-15
+
+### Added
+- Mountable, isolated Rails engine namespaced under `VenusMediaLibrary`.
+- `VenusMediaLibrary::ImagesController` — `index` (HTML grid + JSON) listing `image/*`
+  Active Storage blobs newest-first with simple pagination, and `create` for
+  uploads via `ActiveStorage::Blob.create_and_upload!` (storage-agnostic).
+- `VenusMediaLibrary::PickersController` — Turbo Frame picker body for a target field.
+- `media_picker_field` host helper (auto-included into host views) that renders a
+  URL text input plus a "Choose from library" button and a shared modal shell.
+- Dependency-free vanilla JS picker (opens the modal, selects an image, uploads).
+- `media_attach_field` host helper — **attach mode** for `has_one_attached`
+  associations: the picker writes the chosen blob's `signed_id` into a hidden
+  field named for the attachment (e.g. `product[cover]`) so Rails attaches it on
+  save. The field is disabled until an image is picked, so saving without picking
+  never detaches the current file.
+- `config.url_type` (`:redirect` default, or `:proxy`) — build image URLs with
+  `rails_storage_proxy_url` so images on a private bucket in proxy mode are
+  absolute and publicly fetchable (e.g. for an `og:image`).
+- `config.authenticate_with` — a proc run in the engine controller's context
+  before every action, so the host can gate the picker/upload endpoints (admins
+  only). The engine ships open.
+- Configurable allowed content types, thumbnail size, per-page count, and storage
+  service via `VenusMediaLibrary.configure`.
+- Dummy app + RSpec request, model, and helper specs.

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2026 Good Works On Earth
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,342 @@
+# Media Library
+
+A mountable Rails engine that turns **Active Storage** into a browsable media library with an **image picker**.
+
+Content editors get a modal that lists every image already in Active Storage and lets them upload new ones. Drop `media_picker_field` next to any URL field (for example an `og:image` field) so editors *select* an image instead of typing a path.
+
+It is **storage-agnostic**: it uses whatever Active Storage service the host app configures — local Disk in development, Amazon S3 (or GCS, Azure, ...) in production. The engine never talks to a storage backend directly.
+
+- Namespaced under `VenusMediaLibrary::` (isolated engine)
+- Lists `ActiveStorage::Blob` records with an `image/*` content type, newest first
+- HTML thumbnail grid **and** a JSON API
+- Upload via `ActiveStorage::Blob.create_and_upload!`
+- A modal picker (Turbo Frame + dependency-free vanilla JS)
+- One host helper: `media_picker_field`
+
+## Installation
+
+Add it to the host app's `Gemfile`:
+
+```ruby
+gem "venus_media_library"
+```
+
+Then:
+
+```bash
+bundle install
+```
+
+Active Storage must be installed in the host app (`bin/rails active_storage:install && bin/rails db:migrate`).
+
+## Mount the engine
+
+In the host app's `config/routes.rb`:
+
+```ruby
+mount VenusMediaLibrary::Engine, at: "/media"
+```
+
+Include the picker JavaScript once in your layout (Propshaft/Sprockets):
+
+```erb
+<%= javascript_include_tag "venus_media_library/venus_media_library", defer: true %>
+```
+
+(Using importmap? `pin "venus_media_library", to: "venus_media_library/venus_media_library.js"` and `import "venus_media_library"`.)
+
+The picker styles are shipped as `venus_media_library/application.css`; require them or add your own — every class is namespaced under `.ml-*`.
+
+## Usage
+
+Replace a plain URL text box with the picker in any form:
+
+```erb
+<%= form_with model: @page do |f| %>
+  <%= media_picker_field f, :og_image %>
+<% end %>
+```
+
+That renders the text input you already had, plus a **"Choose from library"** button. Clicking it opens the modal; selecting an image writes its URL into the input (and its Active Storage `signed_id` into a hidden `og_image_signed_id` companion field), then closes the modal. Editors can also upload a new image from inside the modal.
+
+### Attach mode — `media_attach_field` (for `has_one_attached`)
+
+Use `media_attach_field` when the field is an **Active Storage attachment**
+(`has_one_attached`) rather than a URL column. Instead of a URL, the picker writes
+the chosen blob's `signed_id` into a hidden field **named for the attachment**, so
+Rails attaches that blob on save:
+
+```erb
+<%= form_with model: @product do |f| %>
+  <%= media_attach_field f, :cover %>
+<% end %>
+```
+
+This renders a read-only preview input (not submitted) plus the "Choose from
+library" button, and a hidden `product[cover]` field carrying the signed id. That
+hidden field ships **disabled** and is enabled by the picker only once an image is
+chosen — so submitting the form without picking never detaches the current file
+(an empty value for a `has_one_attached` would otherwise purge it). `has_one_attached`
+accepts a `signed_id` natively, so no controller changes are needed beyond
+permitting the attachment param (e.g. `params.permit(:cover)`).
+
+### `media_picker_field` options
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `:label` | `"Choose from library"` | Button label |
+| `:placeholder` | `nil` | Placeholder for the text input |
+| `:signed_id_field` | `"<field>_signed_id"` | Name of the hidden signed-id input; pass `false` to omit |
+| `:input_html` | `{}` | Extra HTML options merged into the text input |
+| `:class` | `"ml-field"` | Wrapper CSS class |
+
+### Endpoints
+
+Mounted at your chosen path (examples assume `/media`):
+
+| Method | Path | Purpose |
+| --- | --- | --- |
+| `GET` | `/media/images` | HTML thumbnail grid (also `.json`) |
+| `GET` | `/media/images.json` | `{ images: [...], page:, has_more:, total: }` |
+| `POST` | `/media/images` | Upload a file (param `file`); returns the image JSON |
+| `GET` | `/media/picker?target=<input_id>` | Turbo Frame body for the modal |
+
+Each image payload includes `id`, `signed_id`, `filename`, `content_type`, `byte_size`, `url`, and `thumb_url`.
+
+## Configuration
+
+In an initializer (e.g. `config/initializers/venus_media_library.rb`):
+
+```ruby
+VenusMediaLibrary.configure do |config|
+  # Content types accepted by the uploader (any image/* is always allowed in the grid).
+  config.allowed_content_types = %w[image/png image/jpeg image/webp image/gif image/svg+xml]
+
+  # [width, height] for the grid thumbnail variant.
+  config.thumbnail_size = [300, 300]
+
+  # Images per page in the index / picker.
+  config.per_page = 40
+
+  # Which Active Storage service to store uploads on. nil = the host app's
+  # default service (Disk in dev, S3 in prod, etc.).
+  config.storage_service = nil
+
+  # How image URLs are built. :redirect (default) uses rails_blob_url; :proxy
+  # uses rails_storage_proxy_url so images on a PRIVATE bucket in proxy mode are
+  # absolute and publicly fetchable by crawlers (e.g. for an og:image).
+  config.url_type = :redirect
+
+  # Optional access gate. A proc run in the engine controller's context before
+  # every action, so it can use host helpers (current_user, redirect_to, head,
+  # main_app). Left nil the engine is open — set it to restrict the picker and
+  # upload endpoints to admins:
+  #
+  #   config.authenticate_with = lambda do
+  #     redirect_to main_app.root_path unless current_user&.admin?
+  #   end
+  config.authenticate_with = nil
+end
+```
+
+### Configuration Details
+
+- **`allowed_content_types`** — Restricts uploads to these MIME types. The grid always shows any blob with `image/*` content type regardless. Defaults to common image formats; customize only if you need to block certain types.
+
+- **`thumbnail_size`** — Array of `[width, height]` for grid thumbnails. Larger values give better preview quality at the cost of image processing overhead and bandwidth.
+
+- **`per_page`** — Number of images to display per page. Smaller values suit mobile-friendly UIs; larger values reduce pagination clicks.
+
+- **`storage_service`** — Active Storage service name (e.g. `:amazon`, `:google`). Leave `nil` to use the host app's default, making the engine truly storage-agnostic. Uploads automatically inherit the configured service.
+
+- **`url_type`** — Controls how image URLs are built:
+  - `:redirect` (default) — `rails_blob_url` returns a temporary redirect URL that points to your storage backend (S3, GCS, etc.). Works for public URLs but blocks crawlers if your bucket is private.
+  - `:proxy` — `rails_storage_proxy_url` returns a proxy URL through Rails, which streams bytes from storage. Useful for private buckets where external crawlers (e.g., social media bots fetching `og:image`) need public, absolute URLs.
+
+- **`authenticate_with`** — A proc that gates access to the engine. Runs before every action in the engine's controller context, so you can call host helpers like `current_user`, `redirect_to`, and `head`. Return nothing to allow, or redirect/deny to block. Example:
+  ```ruby
+  config.authenticate_with = lambda do
+    redirect_to main_app.root_path unless current_user&.admin?
+  end
+  ```
+
+### Image Processing & Thumbnails
+
+Thumbnails use Active Storage variants, which require two system dependencies:
+
+1. **`image_processing`** gem — Already a runtime dependency of this gem.
+2. **Image library** — Either `libvips` (recommended) or ImageMagick on the host server.
+
+On macOS, install via Homebrew:
+```bash
+brew install vips
+```
+
+On Linux (Ubuntu/Debian):
+```bash
+apt-get install libvips libvips-dev
+```
+
+Without these, variant generation fails and thumbnail images won't display.
+
+## Styling & Customization
+
+All picker and library CSS is namespaced under `.ml-*` classes to avoid conflicts with the host app. The engine ships two stylesheets:
+
+- **`venus_media_library/application.css`** — Layout and structure (grid, pagination, forms).
+- **`venus_media_library/picker.css`** — Button and interactive styles.
+
+To override styles, require the engine CSS first, then add your own:
+
+```erb
+<%= stylesheet_link_tag "venus_media_library/application" %>
+<%= stylesheet_link_tag "venus_media_library/picker" %>
+<style>
+  .ml-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+  .ml-tile:hover { border-color: #ff6b6b; }
+</style>
+```
+
+Or, in your own CSS file:
+```css
+.ml-grid {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.ml-btn--primary {
+  background: #your-brand-color;
+}
+```
+
+### CSS Classes Reference
+
+- `.ml-field` — Wrapper for the picker field + button.
+- `.ml-field__input` — The text input element.
+- `.ml-btn`, `.ml-btn--primary` — Buttons.
+- `.ml-library` — Main container.
+- `.ml-grid` — Image grid.
+- `.ml-tile` — Individual image tile in the grid.
+- `.ml-pagination` — Pagination navigation.
+- `.ml-modal` — The modal container (in Turbo Frame).
+
+## JavaScript Requirements
+
+The picker uses **dependency-free vanilla JavaScript** (no jQuery, no Stimulus required). It needs:
+
+- ES6 support (const, arrow functions, template literals) — works in all modern browsers (Chrome, Firefox, Safari, Edge).
+- `fetch` API for uploading files and fetching paginated images.
+
+If you must support IE11, you'll need polyfills. No Turbo Drive requirement, but Turbo Frames are optional for better UX.
+
+## How It Works
+
+### The Picker Flow
+
+1. **User clicks "Choose from library"** — Opens a modal via a Turbo Frame (`GET /media/picker?target=<input_id>`).
+2. **Modal loads the image grid** — The frame fetches the index view, listing images newest-first with pagination.
+3. **User uploads or selects** —
+   - **Select:** Click an image tile; JavaScript writes the blob's `signed_id` and URL into the form inputs and closes the modal.
+   - **Upload:** Click the upload button; JavaScript posts the file to `POST /media/images`, attaches the new blob to the same inputs, and reloads the grid.
+4. **Form submission** — The host app form submits with the image data, storing it as a URL column or Active Storage attachment.
+
+### URL Signing & Storage Agnosticism
+
+All image URLs are built via Active Storage helpers (`rails_blob_url` or `rails_storage_proxy_url`), which handle signed URLs and expiration. The engine never directly accesses the storage backend; it trusts Active Storage to route the request appropriately.
+
+Upload destinations are determined by `config.storage_service` — if `nil`, the host app's default service is used, allowing per-environment configuration (Disk locally, S3 in production).
+
+## Testing
+
+The engine ships with RSpec request, model, and helper specs under `spec/`. To run them:
+
+```bash
+cd spec/dummy && bundle exec rspec ../
+```
+
+Or use the included Rakefile:
+
+```bash
+bundle exec rake spec
+```
+
+When testing a host app that uses Media Library, you can:
+
+1. **Mock the picker** — Test your form without hitting the engine:
+   ```ruby
+   it "saves og_image from the picker" do
+     visit new_post_path
+     fill_in "og_image", with: "https://cdn.example.com/og.jpg"
+     click_button "Create"
+     expect(post.og_image).to eq("https://cdn.example.com/og.jpg")
+   end
+   ```
+
+2. **Test the engine in isolation** — Use the dummy app to verify the picker opens, uploads work, and pagination handles large image sets.
+
+## Troubleshooting
+
+### Thumbnails aren't generating
+
+**Symptom:** Gray placeholder squares instead of previews in the grid.
+
+**Solution:** Ensure `libvips` or ImageMagick is installed, and Active Storage is configured. Run:
+```bash
+rails active_storage:install && rails db:migrate
+```
+
+### Private S3 bucket — og:image not visible to crawlers
+
+**Symptom:** Social media preview cards show no image for posts with private S3 URLs.
+
+**Solution:** Set `config.url_type = :proxy` so Rails proxies image bytes through a public endpoint. This requires Rails to stream the file, so monitor for performance impact with large images.
+
+### Upload endpoint is open to the public
+
+**Symptom:** Anyone can upload images to your media library.
+
+**Solution:** Set `config.authenticate_with` in the initializer to gate access. Example:
+```ruby
+config.authenticate_with = lambda do
+  head :forbidden unless current_user&.admin?
+end
+```
+
+### Form helper `media_picker_field` is undefined
+
+**Symptom:** `undefined method 'media_picker_field'` when rendering a form.
+
+**Solution:** Ensure you've mounted the engine in `config/routes.rb` and the JavaScript is included in your layout with `javascript_include_tag`.
+
+### Picker modal doesn't open or closes immediately
+
+**Symptom:** Button click does nothing or modal opens then closes.
+
+**Solution:** Check browser console for errors. Verify:
+1. JavaScript is loaded: `<%= javascript_include_tag "venus_media_library/venus_media_library", defer: true %>`
+2. The engine is mounted and accessible at your chosen path (default: `/media`).
+3. No JavaScript errors in other assets are breaking the page.
+
+## Development
+
+The engine ships with a dummy app under `spec/dummy` (Active Storage configured with the Disk service, engine mounted at `/media`).
+
+```bash
+bundle install
+cd spec/dummy && bin/rails db:prepare && cd -   # set up Active Storage tables
+bundle exec rspec                               # run the test suite
+```
+
+## Publishing
+
+This gem is built to be published to RubyGems under a **Good Works On Earth** name.
+
+```bash
+gem build venus_media_library.gemspec        # produces venus_media_library-<version>.gem
+gem push venus_media_library-<version>.gem   # publish to RubyGems
+```
+
+`gem push` requires RubyGems credentials (and 2FA/OTP if enabled) — **the gem owner enters these**; they are not stored in the repo. Bump `VenusMediaLibrary::VERSION` in `lib/venus_media_library/version.rb` before each release.
+
+## License
+
+MIT — see [MIT-LICENSE](MIT-LICENSE).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/javascripts/venus_media_library/venus_media_library.js

@@ -0,0 +1,171 @@
+// VenusMediaLibrary picker — dependency-free vanilla controller.
+//
+// Wiring (all via delegated events, no framework required):
+//   [data-ml-open][data-ml-target][data-ml-src]  open the modal for a field
+//   [data-ml-close]                               close the modal
+//   .ml-tile[data-ml-url][data-ml-signed-id]      choose an image
+//   input[data-ml-upload]                         upload a new image
+//
+// Works alongside Turbo if present, but does not require it.
+(function () {
+  "use strict";
+
+  var MODAL_ID = "ml-modal";
+  var FRAME_ID = "venus_media_library_picker";
+  var activeTargetId = null;
+
+  function modal() { return document.getElementById(MODAL_ID); }
+  function frame() { return document.getElementById(FRAME_ID); }
+
+  function csrfToken() {
+    var el = document.querySelector('meta[name="csrf-token"]');
+    return el ? el.getAttribute("content") : null;
+  }
+
+  function openModal(targetId, src) {
+    var m = modal();
+    if (!m) return;
+    activeTargetId = targetId;
+    m.hidden = false;
+    m.setAttribute("aria-hidden", "false");
+    m.classList.add("ml-modal--open");
+    loadFrame(src);
+  }
+
+  function closeModal() {
+    var m = modal();
+    if (!m) return;
+    m.hidden = true;
+    m.setAttribute("aria-hidden", "true");
+    m.classList.remove("ml-modal--open");
+    activeTargetId = null;
+  }
+
+  function loadFrame(src) {
+    var f = frame();
+    if (!f || !src) return;
+    // If Turbo is present, let it drive the frame; otherwise fetch manually.
+    if (window.Turbo && f.tagName.toLowerCase() === "turbo-frame") {
+      f.setAttribute("src", src);
+      return;
+    }
+    fetch(src, { headers: { "Accept": "text/html", "X-Requested-With": "XMLHttpRequest" } })
+      .then(function (r) { return r.text(); })
+      .then(function (html) {
+        var doc = new DOMParser().parseFromString(html, "text/html");
+        var incoming = doc.getElementById(FRAME_ID);
+        f.innerHTML = incoming ? incoming.innerHTML : html;
+      })
+      .catch(function () { f.innerHTML = '<p class="ml-empty">Could not load the library.</p>'; });
+  }
+
+  function chooseTile(tile) {
+    if (!activeTargetId) { closeModal(); return; }
+    var url = tile.getAttribute("data-ml-url");
+    var signedId = tile.getAttribute("data-ml-signed-id");
+
+    var input = document.getElementById(activeTargetId);
+    if (input) {
+      input.value = url;
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    var hidden = document.querySelector('[data-ml-signed-id-for="' + activeTargetId + '"]');
+    if (hidden) {
+      hidden.value = signedId;
+      // Attach mode ships the hidden field disabled so an empty value can't
+      // detach the current file; enable it now that a signed_id is set.
+      hidden.disabled = false;
+    }
+
+    closeModal();
+  }
+
+  function upload(fileInput) {
+    var file = fileInput.files && fileInput.files[0];
+    if (!file) return;
+
+    var status = document.querySelector("[data-ml-status]");
+    if (status) status.textContent = "Uploading…";
+
+    var form = new FormData();
+    form.append("file", file);
+
+    var headers = { "Accept": "application/json" };
+    var token = csrfToken();
+    if (token) headers["X-CSRF-Token"] = token;
+
+    fetch(uploadUrl(), { method: "POST", body: form, headers: headers, credentials: "same-origin" })
+      .then(function (r) {
+        if (!r.ok) throw new Error("Upload failed");
+        return r.json();
+      })
+      .then(function (image) {
+        if (status) status.textContent = "Uploaded " + image.filename;
+        prependTile(image);
+      })
+      .catch(function () { if (status) status.textContent = "Upload failed."; });
+  }
+
+  // Derives the images upload URL from the picker frame src (…/picker → …/images).
+  function uploadUrl() {
+    var f = document.querySelector("[data-ml-target]");
+    var base = f ? f.getAttribute("data-ml-src") : null;
+    if (base) return base.replace(/\/picker(\?.*)?$/, "/images");
+    return "images";
+  }
+
+  function prependTile(image) {
+    var grid = document.querySelector("[data-ml-grid]");
+    if (!grid) return;
+    // Build with DOM methods (not innerHTML): filenames are user-controlled, so
+    // assigning them as properties/attributes avoids any HTML injection.
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ml-tile";
+    btn.setAttribute("data-ml-signed-id", image.signed_id);
+    btn.setAttribute("data-ml-url", image.url);
+    btn.setAttribute("data-ml-filename", image.filename);
+    btn.title = image.filename;
+
+    var img = document.createElement("img");
+    img.src = image.thumb_url;
+    img.alt = image.filename;
+    img.loading = "lazy";
+
+    var name = document.createElement("span");
+    name.className = "ml-tile__name";
+    name.textContent = image.filename;
+
+    btn.appendChild(img);
+    btn.appendChild(name);
+    grid.insertBefore(btn, grid.firstChild);
+  }
+
+  document.addEventListener("click", function (e) {
+    var opener = e.target.closest("[data-ml-open]");
+    if (opener) {
+      e.preventDefault();
+      openModal(opener.getAttribute("data-ml-target"), opener.getAttribute("data-ml-src"));
+      return;
+    }
+    if (e.target.closest("[data-ml-close]")) {
+      e.preventDefault();
+      closeModal();
+      return;
+    }
+    var tile = e.target.closest(".ml-tile");
+    if (tile && tile.closest("#" + MODAL_ID)) {
+      e.preventDefault();
+      chooseTile(tile);
+    }
+  });
+
+  document.addEventListener("change", function (e) {
+    if (e.target.matches("[data-ml-upload]")) upload(e.target);
+  });
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") closeModal();
+  });
+})();

data/app/assets/stylesheets/venus_media_library/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/venus_media_library/picker.css

@@ -0,0 +1,82 @@
+/* VenusMediaLibrary picker styles. Namespaced under .ml-* to avoid clashing with the host app. */
+
+.ml-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.ml-field__input { flex: 1 1 16rem; padding: .4rem .6rem; }
+
+.ml-btn {
+  display: inline-block;
+  padding: .4rem .8rem;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: #222;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+.ml-btn:hover { background: #ececec; }
+.ml-btn--primary { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
+.ml-btn--primary:hover { background: #245a94; }
+
+.ml-library { max-width: 1100px; margin: 0 auto; padding: 1rem; }
+.ml-library__header { display: flex; align-items: baseline; gap: 1rem; }
+.ml-library__count { color: #666; }
+
+.ml-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: .75rem;
+  margin: 1rem 0;
+}
+
+.ml-tile {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e2e2e2;
+  border-radius: 6px;
+  background: #fff;
+  padding: 0;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: center;
+}
+.ml-tile:hover { border-color: #2b6cb0; box-shadow: 0 0 0 2px rgba(43,108,176,.2); }
+.ml-tile img { width: 100%; height: 120px; object-fit: cover; display: block; background: #fafafa; }
+.ml-tile__name {
+  font-size: .75rem;
+  padding: .35rem .4rem;
+  color: #444;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ml-empty { color: #777; padding: 1rem; text-align: center; }
+.ml-pagination { display: flex; gap: .5rem; justify-content: center; }
+
+/* Modal */
+.ml-modal { position: fixed; inset: 0; z-index: 1050; }
+.ml-modal[hidden] { display: none; }
+.ml-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
+.ml-modal__dialog {
+  position: relative;
+  max-width: 900px;
+  margin: 4vh auto;
+  max-height: 90vh;
+  background: #fff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ml-modal__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: .75rem 1rem; border-bottom: 1px solid #eee;
+}
+.ml-modal__title { margin: 0; font-size: 1.1rem; }
+.ml-modal__close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #666; }
+.ml-modal__body { padding: 1rem; overflow: auto; }
+
+.ml-picker__toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
+.ml-picker__hint { color: #666; font-size: .85rem; }
+.ml-picker__more { text-align: center; }