Show snapshot timestamp in location bar (#228)

- Shows how many snapshots are available per page in URL bar
- Allows users to navigate through snapshots through timestamp dropdown
- Refactors coll.js and pageutils to typescript

package.json

@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@shoelace-style/shoelace": "^2.7.0",
+    "@shoelace-style/shoelace": "^2.8.0",
     "@webrecorder/wabac": "^2.16.12",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",

src/coll.ts

@@ -1,4 +1,11 @@
 import { LitElement, html, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import type {
+  SlDropdown,
+  SlMenu,
+  SlSelectEvent,
+} from "@shoelace-style/shoelace";
 import {
   wrapCss,
   rwpLogo,
@@ -9,7 +16,12 @@ import {
   replayPrefix,
 } from "./misc";
 
-import { sourceToId, tsToDate, getPageDateTS } from "./pageutils";
+import {
+  sourceToId,
+  tsToDate,
+  getPageDateTS,
+  getDateFromTS,
+} from "./pageutils";
 
 import fasBook from "@fortawesome/fontawesome-free/svgs/solid/book.svg";
 
@@ -31,112 +43,122 @@ import fasMenuV from "@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg";
 
 import fasAngleLeft from "@fortawesome/fontawesome-free/svgs/solid/angle-left.svg";
 import fasAngleRight from "@fortawesome/fontawesome-free/svgs/solid/angle-right.svg";
+import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.svg";
 
 import { RWPEmbedReceipt } from "./embed-receipt.js";
 import Split from "split.js";
+import type { Replay } from "./replay";
 
 const RWP_SCHEME = "search://";
 
 // ===========================================================================
 class Coll extends LitElement {
+  @property({ type: Boolean })
+  inited = false;
+
+  @property({ type: String })
+  sourceUrl: string | null = null;
+
+  @property({ type: Object, attribute: false })
+  loadInfo: any;
+
+  @property({ type: Boolean })
+  showSidebar: boolean | null = null;
+
+  @property({ type: Object, attribute: false })
+  collInfo: any = null;
+
+  @property({ type: String })
+  coll = "";
+
+  @property({ type: Boolean })
+  hasStory = false;
+
+  @property({ type: Boolean })
+  isLoading = false;
+
+  @property({ type: Object, attribute: false })
+  tabData: {
+    view?: string;
+    url?: string;
+    ts?: string;
+    multiTs?: string[];
+    currList?: number;
+    query?: string;
+    urlSearchType?: string;
+    currMime?: string;
+  } = {};
+
+  @property({ type: String })
+  url = "";
+
+  @property({ type: String })
+  ts = "";
+
+  @property({ type: Boolean })
+  isFullscreen: any;
+
+  @property({ type: Boolean })
+  menuActive = false;
+
+  @property({ type: String })
+  embed: any;
+
+  @property({ type: Boolean })
+  embedDropdownActive = false;
+
+  @property({ type: Boolean })
+  editable = false;
+
+  @property({ type: Boolean })
+  browsable = true;
+
+  @property({ type: Boolean })
+  clearable = true;
+
+  @property({ type: Boolean })
+  isVisible = true;
+
+  @property({ type: String })
+  favIconUrl = "";
+
+  @property({ type: String })
+  appName = "ReplayWeb.page";
+
+  @property({ type: String })
+  appVersion = VERSION;
+
+  @property({ type: String })
+  appLogo = rwpLogo;
+
+  @property({ type: Number })
+  autoUpdateInterval = 10;
+
+  @property({ type: String })
+  swName: any;
+
+  private tabNames = ["pages", "story", "resources", "info"];
+  private tabLabels = {
+    pages: "Pages",
+    story: "Story",
+    resources: "URLs",
+    info: "Archive Info",
+  };
+  private splitter: any = null;
+  private _replaceLoc = false;
+  private _locUpdateNeeded = false;
+  private _locationHash = "";
+  private _autoUpdater: Promise<void> | null = null;
+  private observer?: IntersectionObserver;
+
   constructor() {
     super();
-    this.sourceUrl = null;
-    this.inited = false;
-    this.isLoading = false;
-
-    this.coll = "";
-
-    this.collInfo = null;
-
-    this._replaceLoc = false;
-    this._locUpdateNeeded = false;
-
-    this._locationHash = "";
-
-    this.tabData = {};
-    this.url = "";
-    this.ts = "";
-
-    this.tabNames = ["pages", "story", "resources", "info"];
-    this.tabLabels = {
-      pages: "Pages",
-      story: "Story",
-      resources: "URLs",
-      info: "Archive Info",
-    };
-
-    this.menuActive = false;
-    this.embedDropdownActive = false;
-
-    this.hasStory = false;
-
-    this.editable = false;
-    this.browsable = true;
-    this.clearable = true;
-
     this.showSidebar = localStorage.getItem("pages:showSidebar") === "1";
-    this.splitter = null;
-
-    this.isVisible = true;
-
-    this.favIconUrl = "";
-
-    this.autoUpdateInterval = 10;
-    this._autoUpdater = null;
-
-    this.appName = "ReplayWeb.page";
-    this.appVersion = VERSION;
-    this.appLogo = rwpLogo;
-  }
-
-  static get properties() {
-    return {
-      inited: { type: Boolean },
-
-      sourceUrl: { type: String },
-      loadInfo: { type: Object, attribute: false },
-
-      showSidebar: { type: Boolean },
-
-      collInfo: { type: Object, attribute: false },
-      coll: { type: String },
-
-      hasStory: { type: Boolean },
-      isLoading: { type: Boolean },
-
-      tabData: { type: Object, attribute: false },
-
-      url: { type: String },
-      ts: { type: String },
-
-      isFullscreen: { type: Boolean },
-      menuActive: { type: Boolean },
-
-      embed: { type: String },
-      embedDropdownActive: { type: Boolean },
-
-      editable: { type: Boolean },
-      browsable: { type: Boolean },
-      clearable: { type: Boolean },
-
-      isVisible: { type: Boolean },
-
-      favIconUrl: { type: String },
-
-      appName: { type: String },
-      appVersion: { type: String },
-      appLogo: { type: String },
-
-      autoUpdateInterval: { type: Number },
-
-      swName: { type: String },
-    };
   }
 
   firstUpdated() {
     this.inited = true;
-    window.addEventListener("hashchange", (event) => this.onHashChange(event));
+    window.addEventListener("hashchange", (event) => this.onHashChange());
 
     this.addEventListener("fullscreenchange", () => {
       this.isFullscreen = !!document.fullscreenElement;
@@ -171,6 +193,43 @@ class Coll extends LitElement {
     }
   }
 
+  async getMultiTimestamps(): Promise<void> {
+    if (!this.tabData.url) return;
+    const resp = await fetch(
+      apiPrefix +
+        "/c/" +
+        this.coll +
+        "/ts/?url=" +
+        window.encodeURIComponent(this.tabData.url),
+    );
+    if (resp.status !== 200) {
+      return;
+    }
+    const json = await resp.json();
+    this.updateTabData({ multiTs: json.timestamps });
+  }
+
+  willUpdate(changedProperties: Map<string, any>) {
+    if (changedProperties.has("tabData") && this.tabData) {
+      // Format tab data from URL query params
+      const tabData = {};
+      Object.entries(this.tabData).forEach(([key, value]) => {
+        if (!value) return;
+        if (key === "multiTs" && typeof value === "string") {
+          tabData[key] = value.split(",");
+        } else {
+          tabData[key] = value;
+        }
+      });
+      this.tabData = tabData;
+
+      const prevTabData = changedProperties.get("tabData");
+      if (this.tabData.url && this.tabData.url !== prevTabData?.url) {
+        this.getMultiTimestamps();
+      }
+    }
+  }
+
   updated(changedProperties) {
     // if (changedProperties.has("url") || changedProperties.has("ts")) {
     //   if (this.url.startsWith("rwp?")) {
@@ -192,13 +251,7 @@ class Coll extends LitElement {
       if (!this.collInfo || !this.collInfo.coll) {
         return;
       }
-
+      const newHash = "#" + new URLSearchParams(this.tabData as any).toString();
-      // don't add empty params to shorten query
-      Object.keys(this.tabData).forEach(
-        (key) => !this.tabData[key] && delete this.tabData[key],
-      );
-
-      const newHash = "#" + new URLSearchParams(this.tabData).toString();
 
       if (!this.tabData.url) {
         this.url =
@@ -206,6 +259,7 @@ class Coll extends LitElement {
       }
       if (newHash !== this._locationHash) {
         this._locationHash = newHash;
+
         if (
           this._replaceLoc ||
           Object.keys(changedProperties.get("tabData")).length === 0
@@ -217,7 +271,9 @@ class Coll extends LitElement {
         } else {
           window.location.hash = this._locationHash;
           if (!this.showSidebar) {
-            const replay = this.renderRoot.querySelector("wr-coll-replay");
+            const replay = this.renderRoot.querySelector(
+              "wr-coll-replay",
+            ) as Replay;
             if (replay) {
               replay.focus();
             }
@@ -246,7 +302,7 @@ class Coll extends LitElement {
   configureSplitter() {
     if (this.tabData.url && this.showSidebar) {
       const contents = this.renderRoot.querySelector("#contents");
-      const replay = this.renderRoot.querySelector("wr-coll-replay");
+      const replay = this.renderRoot.querySelector("wr-coll-replay") as Replay;
 
       if (contents && replay && !this.splitter) {
         const opts = {
@@ -265,7 +321,7 @@ class Coll extends LitElement {
           },
         };
 
-        this.splitter = Split([contents, replay], opts);
+        this.splitter = Split([contents as any, replay], opts);
       }
     } else if (this.splitter) {
       try {
@@ -378,7 +434,10 @@ class Coll extends LitElement {
       this._locationHash = hash;
     }
 
-    if (this.collInfo.coll && !this.tabNames.includes(this.tabData.view)) {
+    if (
+      this.collInfo.coll &&
+      (!this.tabData.view || !this.tabNames.includes(this.tabData.view))
+    ) {
       const view = this.hasStory
         ? "story"
         : this.editable || this.collInfo.pages.length
@@ -427,9 +486,15 @@ class Coll extends LitElement {
       event.target.id === this.tabData.view ||
       (event.target.id === "replay" && this.tabData.url)
     ) {
-      this.updateTabData(event.detail.data, event.detail.replaceLoc, false);
+      this.updateTabData(
+        event.detail.data,
+        event.detail.replaceLoc /*, false */,
+      );
     } else if (this.showSidebar && this.tabData.url) {
-      this.updateTabData(event.detail.data, event.detail.replaceLoc, true);
+      this.updateTabData(
+        event.detail.data,
+        event.detail.replaceLoc /*, true */,
+      );
     }
   }
 
@@ -575,17 +640,69 @@ class Coll extends LitElement {
 
       #datetime {
         position: absolute;
-        right: 1em;
+        right: 0.5rem;
         z-index: 10;
+        background: #fff;
+        top: 1px;
+        bottom: 1px;
+        display: flex;
+        align-items: center;
+        line-height: 2;
+      }
+
+      /* Gradient to indicate URL clipping */
+      #datetime:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 2em;
+        height: 100%;
+        transform: translateX(-100%);
         background: linear-gradient(
           90deg,
           rgba(255, 255, 255, 0),
-          #fff 15%,
+          #fff 50%,
           #fff
         );
-        margin: -35px 0 0 0px;
+        pointer-events: none;
-        padding-left: 3em;
+      }
-        line-height: 2;
+
+      .timestamp-dropdown-btn {
+        all: unset;
+        cursor: pointer;
+        display: flex;
+        gap: var(--sl-spacing-x-small);
+        align-items: center;
+        transition: background-color var(--sl-transition-fast);
+        color: var(--sl-color-neutral-600);
+      }
+
+      .timestamp-dropdown-btn:hover {
+        color: var(--sl-color-neutral-900);
+      }
+
+      .timestamp-dropdown-btn:hover .timestamp-count-badge {
+        background-color: var(--sl-color-blue-600);
+      }
+
+      .timestamp-count-badge {
+        display: inline-flex;
+        gap: var(--sl-spacing-2x-small);
+        background-color: var(--sl-color-blue-500);
+        color: var(--sl-color-neutral-0);
+        line-height: 1;
+        padding: var(--sl-spacing-3x-small) var(--sl-spacing-x-small);
+        border-radius: var(--sl-border-radius-small);
+        transition: background-color var(--sl-transition-fast);
+      }
+
+      .timestamp-count {
+        font-weight: 600;
+        transform: translateY(0.075em);
+      }
+
+      .timestamp-menu-item[aria-selected="true"]::part(label) {
+        color: var(--sl-color-blue-600);
       }
 
       .menu-head {
@@ -720,7 +837,7 @@ class Coll extends LitElement {
 
     if (!isReplay && this.tabData && this.tabData.view) {
       const detail = {
-        title: this.tabLabels[this.tabData.view],
+        title: (this.tabLabels as any)[this.tabData.view],
         replayTitle: false,
       };
       this.dispatchEvent(
@@ -738,7 +855,7 @@ class Coll extends LitElement {
         embed="${this.embed}"
         swName="${this.swName}"
         .coll="${this.coll}"
-        .sourceUrl="${this.sourceUrl}"
+        sourceUrl="${this.sourceUrl || ""}"
         @coll-loaded=${this.onCollLoaded}
       ></wr-loader>`;
     } else if (this.collInfo) {
@@ -752,7 +869,7 @@ class Coll extends LitElement {
               : isReplay
               ? "is-hidden"
               : "full-pages"}"
-            role="${isSidebar ? "complementary" : ""}"
+            role="${(isSidebar ? "complementary" : "") as any}"
             aria-label="${isSidebar ? "Browse Contents" : ""}"
           >
             ${this.renderTabHeader(isSidebar)}
@@ -765,7 +882,7 @@ class Coll extends LitElement {
                   role="main"
                   tabindex="-1"
                   .collInfo="${this.collInfo}"
-                  sourceUrl="${this.sourceUrl}"
+                  sourceUrl="${this.sourceUrl || ""}"
                   url="${this.tabData.url || ""}"
                   ts="${this.tabData.ts || ""}"
                   @coll-tab-nav="${this.onCollTabNav}"
@@ -822,9 +939,9 @@ class Coll extends LitElement {
                 href="#story"
                 class="is-size-6"
                 aria-label="Story"
-                aria-current="${this.tabData.view === "story"
+                aria-current="${(this.tabData.view === "story"
                   ? "location"
-                  : ""}"
+                  : "") as any}"
               >
                 <span class="icon"
                   ><fa-icon
@@ -848,7 +965,9 @@ class Coll extends LitElement {
             href="#pages"
             class="is-size-6"
             aria-label="Pages"
-            aria-current="${this.tabData.view === "pages" ? "location" : ""}"
+            aria-current="${(this.tabData.view === "pages"
+              ? "location"
+              : "") as any}"
           >
             <span class="icon"
               ><fa-icon
@@ -871,9 +990,9 @@ class Coll extends LitElement {
             href="#resources"
             class="is-size-6"
             aria-label="URLs"
-            aria-current="${this.tabData.view === "resources"
+            aria-current="${(this.tabData.view === "resources"
               ? "location"
-              : ""}"
+              : "") as any}"
           >
             <span class="icon"
               ><fa-icon
@@ -894,7 +1013,9 @@ class Coll extends LitElement {
             href="#info"
             class="is-size-6"
             aria-label="Archive Info"
-            aria-current="${this.tabData.view === "info" ? "location" : ""}"
+            aria-current="${(this.tabData.view === "info"
+              ? "location"
+              : "") as any}"
           >
             <span class="icon"
               ><fa-icon
@@ -1057,7 +1178,7 @@ class Coll extends LitElement {
                 </span>
               </a>`
             : ""}
-          ${this.renderExtraToolbar(false)}
+          ${this.renderExtraToolbar()}
           <form @submit="${this.onSubmit}">
             <div
               class="control is-expanded ${showFavIcon ? "has-icons-left" : ""}"
@@ -1071,11 +1192,7 @@ class Coll extends LitElement {
                 .value="${this.url}"
                 placeholder="Enter text to search or a URL to replay"
               />
-              ${isReplay
+              ${isReplay ? this.renderTimestamp() : ""}
-                ? html`<p id="datetime" class="control is-hidden-mobile">
-                    ${dateStr}
-                  </p>`
-                : html``}
               ${showFavIcon
                 ? html` <span class="favicon icon is-small is-left">
                     <img src="${this.favIconUrl}" />
@@ -1200,7 +1317,7 @@ class Coll extends LitElement {
                       <span>Browse Contents</span>
                     </a>`
                   : ""}
-                ${this.renderExtraToolbar(true)}
+                ${this.renderExtraToolbar()}
                 ${this.clearable
                   ? html` <hr class="dropdown-divider is-hidden-desktop" />
                       <a
@@ -1221,8 +1338,8 @@ class Coll extends LitElement {
                         <span>Purge Cache + Full Reload</span>
                       </a>`
                   : html``}
-                ${(!this.editable && this.sourceUrl.startsWith("http://")) ||
+                ${(!this.editable && this.sourceUrl?.startsWith("http://")) ||
-                this.sourceUrl.startsWith("https://")
+                this.sourceUrl?.startsWith("https://")
                   ? html` <hr class="dropdown-divider" />
                       <a
                         href="${this.sourceUrl}"
@@ -1271,6 +1388,54 @@ class Coll extends LitElement {
       <p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`;
   }
 
+  private renderTimestamp() {
+    const timestampStrs: { date: string; label: string }[] = [];
+    this.tabData.multiTs?.forEach((ts) => {
+      // Filter out invalid dates
+      try {
+        const date = getDateFromTS(+ts);
+        const dateStr = tsToDate(date).toLocaleString();
+        timestampStrs.push({
+          date,
+          label: dateStr,
+        });
+      } catch {}
+    });
+    const currDateStr = tsToDate(this.ts).toLocaleString();
+    return html`<div id="datetime" class="control is-hidden-mobile">
+      ${timestampStrs.length > 1
+        ? html`
+            <sl-dropdown placement="top-end" hoist>
+              <button
+                type="button"
+                class="timestamp-dropdown-btn"
+                slot="trigger"
+                @blur=${this.onTimestampDropdownBtnBlur}
+              >
+                <div>${currDateStr}</div>
+                <div class="timestamp-count-badge">
+                  <div class="timestamp-count">${timestampStrs.length}</div>
+                  <fa-icon .svg="${fasCaretDown}" aria-hidden="true"></fa-icon>
+                </div>
+              </button>
+              <sl-menu @sl-select=${this.onSelectTimestamp}>
+                ${timestampStrs.map(({ date: ts, label }) => {
+                  const selected = this.ts === ts;
+                  return html`<sl-menu-item
+                    class="timestamp-menu-item"
+                    value=${ts}
+                    aria-selected="${selected}"
+                  >
+                    ${label}</sl-menu-item
+                  >`;
+                })}
+              </sl-menu>
+            </sl-dropdown>
+          `
+        : currDateStr}
+    </div>`;
+  }
+
   renderVerifyInfo() {
     if (this.embed !== "replay-with-info") {
       return "";
@@ -1286,14 +1451,14 @@ class Coll extends LitElement {
   }
 
   dragStart() {
-    const replay = this.renderRoot.querySelector("wr-coll-replay");
+    const replay = this.renderRoot.querySelector("wr-coll-replay") as Replay;
     if (replay) {
       replay.setDisablePointer(true);
     }
   }
 
   dragEnd() {
-    const replay = this.renderRoot.querySelector("wr-coll-replay");
+    const replay = this.renderRoot.querySelector("wr-coll-replay") as Replay;
     if (replay) {
       replay.setDisablePointer(false);
     }
@@ -1332,7 +1497,7 @@ class Coll extends LitElement {
             id="story"
             .isSidebar="${isSidebar}"
             class="${isStory ? "" : "is-hidden"} ${isSidebar ? "sidebar" : ""}"
-            role="${isSidebar ? "" : "main"}"
+            role="${(isSidebar ? "" : "main") as any}"
           >
           </wr-coll-story>`
         : ""}
@@ -1349,7 +1514,7 @@ class Coll extends LitElement {
             class="is-paddingless ${isResources ? "" : "is-hidden"} ${isSidebar
               ? "sidebar"
               : ""}"
-            role="${isSidebar ? "" : "main"}"
+            role="${(isSidebar ? "" : "main") as any}"
           >
           </wr-coll-resources>`
         : ""}
@@ -1367,7 +1532,7 @@ class Coll extends LitElement {
             id="pages"
             @coll-update="${this.onCollUpdate}"
             class="${isPages ? "" : "is-hidden"} ${isSidebar ? "sidebar" : ""}"
-            role="${isSidebar ? "" : "main"}"
+            role="${(isSidebar ? "" : "main") as any}"
           >
           </wr-page-view>`
         : ""}
@@ -1378,7 +1543,9 @@ class Coll extends LitElement {
     // This is a workaround, since this app's routing doesn't permit normal
     // following of in-page anchors.
     event.preventDefault();
-    this.renderRoot.querySelector("#skip-replay-target").focus();
+    (
+      this.renderRoot.querySelector("#skip-replay-target") as HTMLElement
+    ).focus();
   }
 
   onKeyDown(event) {
@@ -1496,7 +1663,7 @@ class Coll extends LitElement {
 
   onSubmit(event) {
     event.preventDefault();
-    const input = this.renderRoot.querySelector("input");
+    const input = this.renderRoot.querySelector("input")!;
     if (input.value) {
       this.navigateTo(input.value);
     } else {
@@ -1511,6 +1678,24 @@ class Coll extends LitElement {
     }
   }
 
+  onTimestampDropdownBtnBlur(event: MouseEvent) {
+    const btn = event.currentTarget as HTMLButtonElement;
+    const dropdown = btn.closest("sl-dropdown") as SlDropdown;
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    if (relatedTarget && dropdown.contains(relatedTarget)) {
+      return;
+    }
+    if (dropdown.open) {
+      dropdown.hide();
+    }
+  }
+
+  onSelectTimestamp(event: SlSelectEvent) {
+    const menu = event.currentTarget as SlMenu;
+    const { item } = event.detail;
+    this.updateTabData({ ts: item.value });
+  }
+
   navigateTo(value) {
     let data;
 
@@ -1518,7 +1703,9 @@ class Coll extends LitElement {
       data = { url: value };
 
       if (value === this.tabData.url) {
-        const replay = this.renderRoot.querySelector("wr-coll-replay");
+        const replay = this.renderRoot.querySelector(
+          "wr-coll-replay",
+        ) as Replay;
         if (replay) {
           replay.refresh();
         }
@@ -1536,7 +1723,7 @@ class Coll extends LitElement {
 
   _stringToParams(value) {
     const q = new URLSearchParams(value.slice(RWP_SCHEME.length));
-    const data = {};
+    const data: any = {};
     data.url = "";
     data.ts = "";
 
@@ -1581,7 +1768,7 @@ class Coll extends LitElement {
     this.menuActive = false;
 
     if (this.tabData.url) {
-      const replay = this.renderRoot.querySelector("wr-coll-replay");
+      const replay = this.renderRoot.querySelector("wr-coll-replay") as Replay;
       if (replay) {
         replay.refresh();
       }

src/pageutils.ts

@@ -36,16 +36,26 @@ function tsToDate(ts) {
   return new Date(datestr);
 }
 
+// ===========================================================================
+function getDateFromTS(ts: number) {
+  let date: Date | null = null;
+  date = new Date(ts);
+  const timestamp =
+    date && date instanceof Date ? getTS(date.toISOString()) : "";
+  return timestamp;
+}
+
 // ===========================================================================
 function getPageDateTS(page) {
-  let date = null;
+  let date: Date | null = null;
   try {
     date = new Date(page.ts || page.date);
   } catch (e) {
     // leave date unchanged in case of error
   }
 
-  const timestamp = date && !isNaN(date) ? getTS(date.toISOString()) : "";
+  const timestamp =
+    date && date instanceof Date ? getTS(date.toISOString()) : "";
   return { date, timestamp };
 }
 
@@ -114,6 +124,7 @@ export {
   tsToDate,
   getTS,
   getPageDateTS,
+  getDateFromTS,
   getReplayLink,
   sourceToId,
   parseURLSchemeHostPath,

src/shoelace.js

@@ -1 +0,0 @@
-// Cherry-picked Shoelace components:

src/shoelace.ts

@@ -0,0 +1,4 @@
+// Cherry-picked Shoelace components:
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";

yarn.lock

@@ -153,10 +153,10 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@lit-labs/react@^1.1.1":
+"@lit-labs/react@^2.0.1":
-  version "1.2.1"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.2.1.tgz#5b421502cdf68a3639dec431318eeed2285f1c0e"
+  resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-2.0.1.tgz#a670d4a6f3cb39393af787189e02da2803f61cd0"
-  integrity sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==
+  integrity sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==
 
 "@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
   version "1.1.1"
@@ -374,14 +374,14 @@
   resolved "https://registry.yarnpkg.com/@shoelace-style/localize/-/localize-3.1.1.tgz#f5b96e35a9a8709aa46d1aaa2359069c0db71534"
   integrity sha512-NkM/hj3Js6yXCU9WxhsyxRUdyqUUUl/BSvIluUMptQteUWGOJaoyP1iMbOMqO544DYMzBfnoCw66ZHkGuTdKgA==
 
-"@shoelace-style/shoelace@^2.7.0":
+"@shoelace-style/shoelace@^2.8.0":
-  version "2.7.0"
+  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.7.0.tgz#3844488cc1d5de4dfa966949961cb6faf4c2b35a"
+  resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.8.0.tgz#995377abcff7d055c0c07dab63d97460453546ad"
-  integrity sha512-w7FnHqBoYR6Ne42WZPW+bIJGIAGsUZgxF3WA9LLfqn3+Q4NOQ4r5jl/DEfsQmRUTmY0nUrs4WGO1CeTrhv6taA==
+  integrity sha512-WigVUaW+MptefOW4zUlZaq+zn0n2hP+I4/mztoeJii5u3ex1CGexfQGcdw2gx6d7P7LAa6/NW0TlgAELzJQnCA==
   dependencies:
     "@ctrl/tinycolor" "^3.5.0"
     "@floating-ui/dom" "^1.2.1"
-    "@lit-labs/react" "^1.1.1"
+    "@lit-labs/react" "^2.0.1"
     "@shoelace-style/animations" "^1.1.0"
     "@shoelace-style/localize" "^3.1.1"
     composed-offset-position "^0.0.4"