@internetarchive/collection-browser 1.1.0 → 1.1.1-alpha.2

package/src/collection-browser.ts

@@ -56,21 +56,21 @@ import {
   PrefixFilterCounts,
   prefixFilterAggregationKeys,
   FacetEventDetails,
-} from './models';
+} from './models.js';
 import {
   RestorationStateHandlerInterface,
   RestorationStateHandler,
   RestorationState,
-} from './restoration-state-handler';
-import chevronIcon from './assets/img/icons/chevron';
-import type { PlaceholderType } from './empty-placeholder';
+} from './restoration-state-handler.js';
+import chevronIcon from './assets/img/icons/chevron.js';
+import type { PlaceholderType } from './empty-placeholder.js';
 import './empty-placeholder';
 
 import {
   analyticsActions,
   analyticsCategories,
-} from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
+} from './utils/analytics-events.js';
+import { srOnlyStyle } from './styles/sr-only.js';
 
 @customElement('collection-browser')
 export class CollectionBrowser
@@ -147,6 +147,10 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
+  @property({ type: Boolean }) prerender = false;
+  @property({ type: Object }) prerenderSearchResults?: SearchResult[];
+  @property({ type: Number }) totalResults?: number;
+
   /**
    * The page that the consumer wants to load.
    */
@@ -173,14 +177,14 @@ export class CollectionBrowser
 
   @state() private fullYearsHistogramAggregation: Aggregation | undefined;
 
-  @state() private totalResults?: number;
-
   @state() private queryErrorMessage?: string;
 
   @state() private mobileView = false;
 
   @state() private mobileFacetsVisible = false;
 
+  @state() private contentWidth?: number;
+
   @state() private placeholderType: PlaceholderType = null;
 
   @state() private prefixFilterCountMap: Partial<
@@ -343,6 +347,12 @@ export class CollectionBrowser
 
   render() {
     this.setPlaceholderType();
+
+    if (this.prerender && this.prerenderSearchResults) {
+      this.updateDataSource(1, this.prerenderSearchResults);
+      this.totalResults ??= this.prerenderSearchResults.length;
+    }
+
     return html`
       <div
         id="content-container"
@@ -356,6 +366,8 @@ export class CollectionBrowser
   }
 
   private setPlaceholderType() {
+    if (this.prerender && this.prerenderSearchResults) return null;
+
     this.placeholderType = null;
     if (!this.baseQuery?.trim()) {
       this.placeholderType = 'empty-query';
@@ -383,52 +395,110 @@ export class CollectionBrowser
     `;
   }
 
+  /**
+   * Top-level template for rendering the left (facets) and right (results) columns.
+   */
   private get collectionBrowserTemplate() {
-    const shouldShowSearching =
-      this.searchResultsLoading || this.totalResults === undefined;
-    const resultsCount = this.totalResults?.toLocaleString();
-    const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
-    return html` <div id="left-column-scroll-sentinel"></div>
+    return html`
+      <div id="left-column-scroll-sentinel"></div>
+      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
+    `;
+  }
+
+  /**
+   * Template for either the mobile or desktop version of the left column, depending
+   * on current component state.
+   */
+  private get leftColumnTemplate(): TemplateResult {
+    if (this.mobileView) {
+      return this.mobileLeftColumnTemplate;
+    }
+    return this.desktopLeftColumnTemplate;
+  }
+
+  /**
+   * Template for the mobile version of the "left column" (which in this case, appears
+   * *above* the search results rather than beside them), for rendering the
+   * accordion-style facets.
+   */
+  private get mobileLeftColumnTemplate(): TemplateResult {
+    return html`
       <div
         id="left-column"
         class="column${this.isResizeToMobile ? ' preload' : ''}"
       >
-        <div id="mobile-header-container">
-          ${this.mobileView
-            ? this.mobileFacetsTemplate
-            : html`<h2 id="facets-header" class="sr-only">Filters</h2>`}
-          <div id="results-total">
-            <span id="big-results-count">
-              ${shouldShowSearching ? html`Searching&hellip;` : resultsCount}
-            </span>
-            <span id="big-results-label">
-              ${shouldShowSearching ? nothing : resultsLabel}
-            </span>
-          </div>
-          ${this.mobileView ? nothing : this.clearFiltersBtnTemplate(false)}
+        ${this.resultsCountTemplate}
+        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
+      </div>
+    `;
+  }
+
+  /**
+   * Template for the desktop version of the left column, displaying the facets sidebar.
+   */
+  private get desktopLeftColumnTemplate(): TemplateResult {
+    return html`
+      <div id="left-column" class="column">
+        <div id="facets-header-container">
+          <h2 id="facets-header" class="sr-only">Filters</h2>
+          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
         </div>
-        ${this.mobileView
-          ? nothing
-          : html`<div id="facets-container" aria-labelledby="facets-header">
-              ${this.facetsTemplate}
-              <div id="facets-scroll-sentinel"></div>
-            </div>`}
-        ${this.mobileView ? nothing : html`<div id="facets-bottom-fade"></div>`}
+        <div id="facets-container" aria-labelledby="facets-header">
+          ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
+        </div>
+        <div id="facets-bottom-fade"></div>
       </div>
+    `;
+  }
+
+  /**
+   * Template for the "X Results" count at the top of the search results.
+   * Changes to the "Searching..." label if the search results are still loading.
+   */
+  private get resultsCountTemplate(): TemplateResult {
+    const shouldShowSearching =
+      this.searchResultsLoading || this.totalResults === undefined;
+    const resultsCount = this.totalResults?.toLocaleString();
+    const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
+
+    return html`
+      <div id="results-total">
+        <span id="big-results-count">
+          ${shouldShowSearching ? html`Searching&hellip;` : resultsCount}
+        </span>
+        <span id="big-results-label">
+          ${shouldShowSearching ? nothing : resultsLabel}
+        </span>
+      </div>
+    `;
+  }
+
+  /**
+   * Template for the right column of the collection browser, where the result
+   * tiles and sort/filter bar are shown.
+   */
+  private get rightColumnTemplate(): TemplateResult {
+    return html`
       <div id="right-column" class="column">
         ${this.sortFilterBarTemplate}
         ${this.displayMode === `list-compact`
           ? this.listHeaderTemplate
           : nothing}
         ${this.infiniteScrollerTemplate}
-      </div>`;
+      </div>
+    `;
   }
 
   private get infiniteScrollerTemplate() {
+    let itemCount = this.placeholderType ? 0 : nothing;
+    if (this.prerender && this.totalResults) itemCount = this.totalResults;
+
     return html`<infinite-scroller
       class=${this.infiniteScrollerClasses}
-      itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
+      ?prerender=${this.prerender}
+      .itemCount=${itemCount}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -647,6 +717,7 @@ export class CollectionBrowser
         .collectionNameCache=${this.collectionNameCache}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
         .allowExpandingDatePicker=${!this.mobileView}
+        .contentWidth=${this.contentWidth}
         .query=${this.baseQuery}
         .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
@@ -869,7 +940,8 @@ export class CollectionBrowser
   handleResize(entry: ResizeObserverEntry): void {
     const previousView = this.mobileView;
     if (entry.target === this.contentContainer) {
-      this.mobileView = entry.contentRect.width < this.mobileBreakpoint;
+      this.contentWidth = entry.contentRect.width;
+      this.mobileView = this.contentWidth < this.mobileBreakpoint;
       // If changing from desktop to mobile disable transition
       if (this.mobileView && !previousView) {
         this.isResizeToMobile = true;
@@ -1762,6 +1834,7 @@ export class CollectionBrowser
 
     return html`
       <tile-dispatcher
+        ?prerender=${this.prerender}
         .baseNavigationUrl=${this.baseNavigationUrl}
         .baseImageUrl=${this.baseImageUrl}
         .model=${model}
@@ -1827,6 +1900,10 @@ export class CollectionBrowser
           transition: transform 0.2s ease-out;
         }
 
+        #mobile-filter-collapse {
+          width: 100%;
+        }
+
         #mobile-filter-collapse > summary {
           cursor: pointer;
           list-style: none;
@@ -1957,14 +2034,14 @@ export class CollectionBrowser
           background: transparent;
         }
 
-        #mobile-header-container {
+        #facets-header-container {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           margin: 10px 0;
         }
 
-        .desktop #mobile-header-container {
+        .desktop #facets-header-container {
           padding-top: 2rem;
           flex-wrap: wrap;
         }
@@ -2037,6 +2114,7 @@ export class CollectionBrowser
         }
 
         .mobile #results-total {
+          float: right;
           margin-bottom: 0;
           margin-right: 5px;
         }

package/src/collection-facets/facets-template.ts

@@ -2,8 +2,8 @@ import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import eyeIcon from '../assets/img/icons/eye.js';
+import eyeClosedIcon from '../assets/img/icons/eye-closed.js';
 import {
   FacetGroup,
   FacetOption,
@@ -12,7 +12,7 @@ import {
   getDefaultSelectedFacets,
   FacetEventDetails,
   FacetState,
-} from '../models';
+} from '../models.js';
 
 @customElement('facets-template')
 export class FacetsTemplate extends LitElement {

package/src/collection-facets/more-facets-content.ts

@@ -31,16 +31,16 @@ import {
   suppressedCollections,
   valueFacetSort,
   defaultFacetSort,
-} from '../models';
+} from '../models.js';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './more-facets-pagination';
 import './facets-template';
 import {
   analyticsActions,
   analyticsCategories,
-} from '../utils/analytics-events';
+} from '../utils/analytics-events.js';
 import './toggle-switch';
-import { srOnlyStyle } from '../styles/sr-only';
+import { srOnlyStyle } from '../styles/sr-only.js';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {

package/src/collection-facets/more-facets-pagination.ts

@@ -7,9 +7,9 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import arrowLeftIcon from '../assets/img/icons/arrow-left';
-import arrowRightIcon from '../assets/img/icons/arrow-right';
-import { srOnlyStyle } from '../styles/sr-only';
+import arrowLeftIcon from '../assets/img/icons/arrow-left.js';
+import arrowRightIcon from '../assets/img/icons/arrow-right.js';
+import { srOnlyStyle } from '../styles/sr-only.js';
 
 @customElement('more-facets-pagination')
 export class MoreFacetsPagination extends LitElement {

package/src/collection-facets/toggle-switch.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement, CSSResultGroup } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { srOnlyStyle } from '../styles/sr-only';
+import { srOnlyStyle } from '../styles/sr-only.js';
 
 export type Side = 'left' | 'right';
 

package/src/collection-facets.ts

@@ -30,8 +30,8 @@ import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-f
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import chevronIcon from './assets/img/icons/chevron';
-import expandIcon from './assets/img/icons/expand';
+import chevronIcon from './assets/img/icons/chevron.js';
+import expandIcon from './assets/img/icons/expand.js';
 import {
   FacetOption,
   SelectedFacets,
@@ -44,7 +44,7 @@ import {
   LendingFacetKey,
   suppressedCollections,
   defaultFacetSort,
-} from './models';
+} from './models.js';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
 import './collection-facets/facet-tombstone-row';
@@ -52,9 +52,9 @@ import './expanded-date-picker';
 import {
   analyticsActions,
   analyticsCategories,
-} from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
-import { ExpandedDatePicker } from './expanded-date-picker';
+} from './utils/analytics-events.js';
+import { srOnlyStyle } from './styles/sr-only.js';
+import { ExpandedDatePicker } from './expanded-date-picker.js';
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
@@ -80,6 +80,8 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) collapsableFacets = false;
 
+  @property({ type: Number }) contentWidth?: number;
+
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
   @property({ type: Boolean }) allowExpandingDatePicker = false;
@@ -229,10 +231,6 @@ export class CollectionFacets extends LitElement {
       : nothing;
   }
 
-  private get currentYearsHistogramAggregation(): Aggregation | undefined {
-    return this.aggregations?.year_histogram;
-  }
-
   private get histogramTemplate() {
     const { fullYearsHistogramAggregation } = this;
     return this.fullYearAggregationLoading
@@ -245,7 +243,9 @@ export class CollectionFacets extends LitElement {
             .maxSelectedDate=${this.maxSelectedDate}
             .updateDelay=${100}
             missingDataMessage="..."
-            .width=${180}
+            .width=${this.collapsableFacets && this.contentWidth
+              ? this.contentWidth
+              : 180}
             .bins=${fullYearsHistogramAggregation?.buckets as number[]}
             @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
           ></histogram-date-range>

package/src/empty-placeholder.ts

@@ -9,8 +9,8 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
-import emptyQueryIcon from './assets/img/icons/empty-query';
-import nullResultIcon from './assets/img/icons/null-result';
+import emptyQueryIcon from './assets/img/icons/empty-query.js';
+import nullResultIcon from './assets/img/icons/null-result.js';
 
 export type PlaceholderType =
   | 'empty-query'

package/src/language-code-handler/language-code-handler.ts

@@ -1,4 +1,4 @@
-import { codeToLanguageMap } from './language-code-mapping';
+import { codeToLanguageMap } from './language-code-mapping.js';
 
 // To serialize the list of potential language codes, we store
 // the string in the format `en-us|en|en-gb` with `|` being the separator.

package/src/mediatype/mediatype-config.ts

@@ -1,16 +1,16 @@
-import { accountIcon } from '../assets/img/icons/mediatype/account';
-import { audioIcon } from '../assets/img/icons/mediatype/audio';
-import { collectionIcon } from '../assets/img/icons/mediatype/collection';
-import { dataIcon } from '../assets/img/icons/mediatype/data';
-import { etreeIcon } from '../assets/img/icons/mediatype/etree';
-import { imagesIcon } from '../assets/img/icons/mediatype/images';
-import { filmIcon } from '../assets/img/icons/mediatype/film';
-import { radioIcon } from '../assets/img/icons/mediatype/radio';
-import { softwareIcon } from '../assets/img/icons/mediatype/software';
-import { textsIcon } from '../assets/img/icons/mediatype/texts';
-import { tvIcon } from '../assets/img/icons/mediatype/tv';
-import { videoIcon } from '../assets/img/icons/mediatype/video';
-import { webIcon } from '../assets/img/icons/mediatype/web';
+import { accountIcon } from '../assets/img/icons/mediatype/account.js';
+import { audioIcon } from '../assets/img/icons/mediatype/audio.js';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection.js';
+import { dataIcon } from '../assets/img/icons/mediatype/data.js';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree.js';
+import { imagesIcon } from '../assets/img/icons/mediatype/images.js';
+import { filmIcon } from '../assets/img/icons/mediatype/film.js';
+import { radioIcon } from '../assets/img/icons/mediatype/radio.js';
+import { softwareIcon } from '../assets/img/icons/mediatype/software.js';
+import { textsIcon } from '../assets/img/icons/mediatype/texts.js';
+import { tvIcon } from '../assets/img/icons/mediatype/tv.js';
+import { videoIcon } from '../assets/img/icons/mediatype/video.js';
+import { webIcon } from '../assets/img/icons/mediatype/web.js';
 
 export const mediatypeConfig: { [key: string]: any } = {
   account: {

package/src/restoration-state-handler.ts

@@ -17,8 +17,8 @@ import {
   URLSortField,
   getDefaultSelectedFacets,
   MetadataFieldToURLField,
-} from './models';
-import { arrayEquals } from './utils/array-equals';
+} from './models.js';
+import { arrayEquals } from './utils/array-equals.js';
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
@@ -216,6 +216,16 @@ export class RestorationStateHandler
     const facetAnds = url.searchParams.getAll('and[]');
     const facetNots = url.searchParams.getAll('not[]');
 
+    // We also need to check for the presence of params like 'and[0]', 'not[1]', etc.
+    // since Facebook automatically converts URLs with [] into those forms.
+    for (const [key, val] of url.searchParams.entries()) {
+      if (/and\[\d+\]/.test(key)) {
+        facetAnds.push(val);
+      } else if (/not\[\d+\]/.test(key)) {
+        facetNots.push(val);
+      }
+    }
+
     // Legacy search allowed `q` and `search` params for the query, so in the interest
     // of backwards-compatibility with old bookmarks, we recognize those here too.
     // (However, they still get upgraded to a `query` param when we persist our state
@@ -387,6 +397,13 @@ export class RestorationStateHandler
     searchParams.delete('and[]');
     searchParams.delete('not[]');
 
+    // Remove any and/not facet params that contain numbers in their square brackets
+    for (const key of searchParams.keys()) {
+      if (/(and|not)\[\d+\]/.test(key)) {
+        searchParams.delete(key);
+      }
+    }
+
     // Also remove some legacy params that should have been upgraded to the ones above
     searchParams.delete('q');
     searchParams.delete('search');

package/src/sort-filter-bar/alpha-bar.ts

@@ -1,9 +1,9 @@
 import { LitElement, html, css, nothing, TemplateResult } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
-import type { PrefixFilterCounts } from '../models';
+import type { PrefixFilterCounts } from '../models.js';
 
 import './alpha-bar-tooltip';
-import type { AlphaBarTooltip } from './alpha-bar-tooltip';
+import type { AlphaBarTooltip } from './alpha-bar-tooltip.js';
 
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -21,16 +21,16 @@ import {
   PrefixFilterType,
   SortField,
   SortFieldDisplayName,
-} from '../models';
+} from '../models.js';
 import './alpha-bar';
 
-import { sortUpIcon } from './img/sort-toggle-up';
-import { sortDownIcon } from './img/sort-toggle-down';
-import { sortDisabledIcon } from './img/sort-toggle-disabled';
-import { tileIcon } from './img/tile';
-import { listIcon } from './img/list';
-import { compactIcon } from './img/compact';
-import { srOnlyStyle } from '../styles/sr-only';
+import { sortUpIcon } from './img/sort-toggle-up.js';
+import { sortDownIcon } from './img/sort-toggle-down.js';
+import { sortDisabledIcon } from './img/sort-toggle-disabled.js';
+import { tileIcon } from './img/tile.js';
+import { listIcon } from './img/list.js';
+import { compactIcon } from './img/compact.js';
+import { srOnlyStyle } from '../styles/sr-only.js';
 
 type AlphaSelector = 'creator' | 'title';
 

package/src/tiles/grid/account-tile.ts

@@ -1,8 +1,8 @@
 import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
 import '../image-block';
 import './tile-stats';
 

package/src/tiles/grid/collection-tile.ts

@@ -7,10 +7,10 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import type { TileModel } from '../../models';
-import { formatUnitSize } from '../../utils/format-unit-size';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection.js';
+import type { TileModel } from '../../models.js';
+import { formatUnitSize } from '../../utils/format-unit-size.js';
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
 import '../image-block';
 
 @customElement('collection-tile')

package/src/tiles/grid/item-tile.ts

@@ -11,11 +11,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { SortParam } from '@internetarchive/search-service';
 
-import { DateFormat, formatDate } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import type { TileModel } from '../../models';
+import { DateFormat, formatDate } from '../../utils/format-date.js';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc.js';
+import type { TileModel } from '../../models.js';
 
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
 import '../image-block';
 import '../text-snippet-block';
 import '../item-image';

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
+import { srOnlyStyle } from '../../../styles/sr-only.js';
 
 /**
  * Base tile styles

package/src/tiles/grid/tile-stats.ts

@@ -1,13 +1,13 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
-import { reviewsIcon } from '../../assets/img/icons/reviews';
-import { uploadIcon } from '../../assets/img/icons/upload';
-import { viewsIcon } from '../../assets/img/icons/views';
-import { srOnlyStyle } from '../../styles/sr-only';
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled.js';
+import { reviewsIcon } from '../../assets/img/icons/reviews.js';
+import { uploadIcon } from '../../assets/img/icons/upload.js';
+import { viewsIcon } from '../../assets/img/icons/views.js';
+import { srOnlyStyle } from '../../styles/sr-only.js';
 
-import { formatCount } from '../../utils/format-count';
+import { formatCount } from '../../utils/format-count.js';
 
 @customElement('tile-stats')
 export class TileStats extends LitElement {

package/src/tiles/hover/hover-pane-controller.ts

@@ -7,7 +7,7 @@ import {
   ReactiveController,
   ReactiveControllerHost,
 } from 'lit';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 
 type HoverPaneState = 'hidden' | 'shown' | 'fading-out';
 

package/src/tiles/hover/tile-hover-pane.ts

@@ -2,7 +2,7 @@ import type { CollectionNameCacheInterface } from '@internetarchive/collection-n
 import type { SortParam } from '@internetarchive/search-service';
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 import '../list/tile-list';
 
 @customElement('tile-hover-pane')

package/src/tiles/image-block.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import type { TileModel } from '../models';
+import type { TileModel } from '../models.js';
 
 import './overlay/icon-overlay';
 import './overlay/text-overlay';

package/src/tiles/item-image.ts

@@ -2,12 +2,12 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import type { TileModel } from '../models';
+import type { TileModel } from '../models.js';
 
 import {
   baseItemImageStyles,
   waveformGradientStyles,
-} from '../styles/item-image-styles';
+} from '../styles/item-image-styles.js';
 
 @customElement('item-image')
 export class ItemImage extends LitElement {