(function () {
  "use strict";
  const COMPOSE_PREVIEW_DATA = {"schema":"compose-preview-web-embed/v1","key":"663696b4af11","title":"cadence","module":"cadence","previews":[{"id":"bluetooth-connectedplaying__ideal__default","label":"bluetooth-connectedplaying__ideal__default","src":"previews/bluetooth-connectedplaying__ideal__default.png","width":1050,"height":3937,"cover":true},{"id":"bluetooth-disconnected__ideal__default","label":"bluetooth-disconnected__ideal__default","src":"previews/bluetooth-disconnected__ideal__default.png","width":1050,"height":3412,"cover":false},{"id":"bluetooth-mp3mode__ideal__default","label":"bluetooth-mp3mode__ideal__default","src":"previews/bluetooth-mp3mode__ideal__default.png","width":1050,"height":3937,"cover":false},{"id":"bluetooth-permissionmissing__ideal__default","label":"bluetooth-permissionmissing__ideal__default","src":"previews/bluetooth-permissionmissing__ideal__default.png","width":1050,"height":3937,"cover":false},{"id":"bookmarks-loaded__ideal__default","label":"bookmarks-loaded__ideal__default","src":"previews/bookmarks-loaded__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"bookmarks-loading__ideal__default","label":"bookmarks-loading__ideal__default","src":"previews/bookmarks-loading__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"devicefiles-loading__ideal__default","label":"devicefiles-loading__ideal__default","src":"previews/devicefiles-loading__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"devicefiles-notavailable__ideal__default","label":"devicefiles-notavailable__ideal__default","src":"previews/devicefiles-notavailable__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"devices-empty__ideal__default","label":"devices-empty__ideal__default","src":"previews/devices-empty__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"devices-loaded__ideal__default","label":"devices-loaded__ideal__default","src":"previews/devices-loaded__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"devices-loading__ideal__default","label":"devices-loading__ideal__default","src":"previews/devices-loading__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"home-empty__ideal__default","label":"home-empty__ideal__default","src":"previews/home-empty__ideal__default.png","width":1050,"height":2100,"cover":false},{"id":"manage-empty__ideal__default","label":"manage-empty__ideal__default","src":"previews/manage-empty__ideal__default.png","width":1050,"height":3937,"cover":false},{"id":"manage-populated__ideal__default","label":"manage-populated__ideal__default","src":"previews/manage-populated__ideal__default.png","width":1050,"height":4987,"cover":false},{"id":"manage-refreshing__ideal__default","label":"manage-refreshing__ideal__default","src":"previews/manage-refreshing__ideal__default.png","width":1050,"height":4987,"cover":false},{"id":"theme-cadence-dark__ideal__default__dark","label":"theme-cadence-dark__ideal__default__dark","src":"previews/theme-cadence-dark__ideal__default__dark.png","width":1050,"height":850,"cover":false},{"id":"theme-cadence-light__ideal__default__light","label":"theme-cadence-light__ideal__default__light","src":"previews/theme-cadence-light__ideal__default__light.png","width":1050,"height":850,"cover":false},{"id":"theme-material3-dark__ideal__default__dark","label":"theme-material3-dark__ideal__default__dark","src":"previews/theme-material3-dark__ideal__default__dark.png","width":1050,"height":854,"cover":false},{"id":"theme-material3-light__ideal__default__light","label":"theme-material3-light__ideal__default__light","src":"previews/theme-material3-light__ideal__default__light.png","width":1050,"height":854,"cover":false}]};
  const REGISTRY = (window.__composePreviewEmbeds__ = window.__composePreviewEmbeds__ || []);
  if (!REGISTRY.some((d) => d.key === COMPOSE_PREVIEW_DATA.key)) REGISTRY.push(COMPOSE_PREVIEW_DATA);

  const STYLE = `
    :host { display: block; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1b1b1f; }
    .cp-header { margin: 0 0 12px; }
    .cp-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
    .cp-module { font-size: 0.8rem; color: #6b6b70; margin: 2px 0 0; }
    .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
    .cp-card { border: 1px solid #e3e3e8; border-radius: 10px; overflow: hidden; background: #fff; }
    .cp-imgwrap { display: flex; align-items: center; justify-content: center; background:
      repeating-conic-gradient(#f4f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px; padding: 8px; }
    .cp-imgwrap img { max-width: 100%; height: auto; display: block; }
    .cp-meta { padding: 8px 10px; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; }
    .cp-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cp-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
      background: #5b5bd6; border-radius: 4px; padding: 1px 5px; }
    .cp-empty { color: #6b6b70; font-size: 0.85rem; }
    @media (prefers-color-scheme: dark) {
      :host { color: #e6e6e9; }
      .cp-module, .cp-empty { color: #a0a0a8; }
      .cp-card { border-color: #34343a; background: #1d1d20; }
      .cp-imgwrap { background: repeating-conic-gradient(#26262b 0% 25%, #1d1d20 0% 50%) 50% / 16px 16px; }
    }
  `;

  const esc = (s) => String(s).replace(/[&<>"]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));

  class ComposePreviewGallery extends HTMLElement {
    static get observedAttributes() { return ["only", "embed"]; }
    connectedCallback() { this.render(); }
    attributeChangedCallback() { if (this.shadowRoot) this.render(); }
    // Resolve which embed's data this element shows: an explicit embed="<key>" wins; otherwise
    // the sole registered embed. With several embeds and no key we render the first and warn,
    // so a missing attribute degrades visibly rather than silently showing the wrong bundle.
    dataFor() {
      const key = this.getAttribute("embed");
      if (key) return REGISTRY.find((d) => d.key === key) || null;
      if (REGISTRY.length > 1) {
        console.warn('compose-preview: ' + REGISTRY.length + ' embeds on this page; set embed="<key>" to pick one. Showing the first.');
      }
      return REGISTRY[0] || null;
    }
    render() {
      const root = this.shadowRoot || this.attachShadow({ mode: "open" });
      const data = this.dataFor();
      if (!data) {
        const key = this.getAttribute("embed");
        root.innerHTML = '<style>' + STYLE + '</style><p class="cp-empty">No compose-preview embed' +
          (key ? ' with key "' + esc(key) + '"' : '') + ' found on this page.</p>';
        return;
      }
      const only = (this.getAttribute("only") || "").split(",").map(s => s.trim()).filter(Boolean);
      const all = (data.previews || []);
      const previews = only.length ? all.filter(p => only.includes(p.id)) : all;
      const cards = previews.map(p => {
        const dim = (p.width > 0 && p.height > 0) ? ` width="${p.width}" height="${p.height}"` : "";
        const badge = p.cover ? '<span class="cp-badge">cover</span>' : "";
        return (
          '<figure class="cp-card">' +
            '<div class="cp-imgwrap"><img loading="lazy" alt="' + esc(p.label) + '" src="' + esc(p.src) + '"' + dim + '></div>' +
            '<figcaption class="cp-meta">' + badge + '<span class="cp-label" title="' + esc(p.id) + '">' + esc(p.label) + '</span></figcaption>' +
          '</figure>'
        );
      }).join("");
      const body = previews.length
        ? '<div class="cp-grid">' + cards + '</div>'
        : '<p class="cp-empty">No previews in this embed.</p>';
      root.innerHTML =
        '<style>' + STYLE + '</style>' +
        '<header class="cp-header">' +
          '<p class="cp-title">' + esc(data.title) + '</p>' +
          (data.module ? '<p class="cp-module">' + esc(data.module) + '</p>' : '') +
        '</header>' +
        body;
    }
  }

  if (typeof customElements !== "undefined" && !customElements.get("compose-preview-gallery")) {
    customElements.define("compose-preview-gallery", ComposePreviewGallery);
  }
  // A later script (a second bundle) registers its data after the element was already upgraded
  // by the first script's define(), so re-render existing galleries now that this embed exists.
  if (typeof document !== "undefined") {
    document.querySelectorAll("compose-preview-gallery").forEach((el) => {
      if (typeof el.render === "function") el.render();
    });
  }
})();
