@depict-ai/ui 4.0.11 → 4.0.13

package/ES10/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.11";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.13";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $52FdA$solidjs.createSignal();
   const deparallelizedFetcher = $52FdA$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -597,7 +597,6 @@ function $76012c4468a53d1f$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $6e8d48eea3d0469d$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=instant-results>`);
-const $6e8d48eea3d0469d$export$62fda23edba5cc9b = 250;
 function $6e8d48eea3d0469d$export$62f101a8aa597bf8(_ref) {
   let {
     depict_api_: depict_api_,
@@ -623,7 +622,7 @@ function $6e8d48eea3d0469d$export$62f101a8aa597bf8(_ref) {
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($52FdA$depictaiutilishared.catchify(() => write_current_instant_query(value)), $6e8d48eea3d0469d$export$62fda23edba5cc9b);
+    timeout = setTimeout($52FdA$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $52FdA$solidjs.createResource($52FdA$solidjs.createMemo(() => ({
     // <-- key order important, see comment below
@@ -3236,15 +3235,16 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $52FdA$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $52FdA$solidjsweb.memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $52FdA$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $52FdA$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $52FdA$solidjsweb.createComponent((0, $d1e7b96fb13cd1d3$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3268,7 +3268,7 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       var _el$ = $52FdA$solidjsweb.getNextElement($f765bad01136eee1$var$_tmpl$),
@@ -3775,7 +3775,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   $52FdA$solidjs.createEffect($52FdA$solidjs.on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($52FdA$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), (0, $6e8d48eea3d0469d$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($52FdA$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3885,7 +3885,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -14776,6 +14777,7 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location || (openModalParams.location = "centered");
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -14793,9 +14795,9 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $98bd00c15a2e3159$export$828dcdd425fd3231(openModalParams.element);
+  } = $98bd00c15a2e3159$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -14808,7 +14810,8 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
   };
   $52FdA$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      var _cleanup;
+      (_cleanup = cleanup) === null || _cleanup === void 0 || _cleanup();
       dispose();
     };
     $d6ed4dbb6507996d$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $d6ed4dbb6507996d$export$3f238c96c45e6cc6));

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.11";
+export const version = "4.0.13";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -1207,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1323,6 +1323,10 @@ type CenteredLocation = {
 type AlignedLocation = {
   location: "aligned";
   element: HTMLElement;
+  /**
+   * If true, the height of the search field in the modal won't be set to the height of the element we're aligning to
+   */
+  ignoreFieldSize_?: boolean;
 };
 /**
  * How the modal should be opened.
@@ -1339,7 +1343,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.11";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.13";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $8tj43$createSignal();
   const deparallelizedFetcher = $8tj43$deparallelize_no_drop(async dependencyValue => {
@@ -513,7 +513,6 @@ function $2d7bad8684bc7f44$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $f7414b949aeabc90$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=instant-results>`);
-const $f7414b949aeabc90$export$62fda23edba5cc9b = 250;
 function $f7414b949aeabc90$export$62f101a8aa597bf8(_ref) {
   let {
     depict_api_: depict_api_,
@@ -539,7 +538,7 @@ function $f7414b949aeabc90$export$62f101a8aa597bf8(_ref) {
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($8tj43$catchify(() => write_current_instant_query(value)), $f7414b949aeabc90$export$62fda23edba5cc9b);
+    timeout = setTimeout($8tj43$catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $8tj43$createResource($8tj43$createMemo(() => ({
     // <-- key order important, see comment below
@@ -3152,15 +3151,16 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $8tj43$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $8tj43$createComponent((0, $8tj43$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $8tj43$memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $8tj43$createMemo(() => listings_by_id()[listingId]);
+      const listing = $8tj43$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $8tj43$createComponent((0, $26db6925469636a4$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3184,7 +3184,7 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
   return $8tj43$createComponent((0, $8tj43$Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       var _el$ = $8tj43$getNextElement($ab401afaded322ab$var$_tmpl$),
@@ -3691,7 +3691,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   $8tj43$createEffect($8tj43$on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($8tj43$catchify(() => setShowStaleListingSuggestions(false)), (0, $f7414b949aeabc90$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($8tj43$catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3801,7 +3801,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -14692,6 +14693,7 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location || (openModalParams.location = "centered");
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -14709,9 +14711,9 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $37e8c97bb6876197$export$828dcdd425fd3231(openModalParams.element);
+  } = $37e8c97bb6876197$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -14724,7 +14726,8 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
   };
   $8tj43$createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      var _cleanup;
+      (_cleanup = cleanup) === null || _cleanup === void 0 || _cleanup();
       dispose();
     };
     $1308a7816c3d4f2d$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $1308a7816c3d4f2d$export$3f238c96c45e6cc6));

package/latest/index.cjs

@@ -88,7 +88,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.11";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.13";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -571,7 +571,6 @@ function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $6ae556e536054e87$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=instant-results>`);
-const $6ae556e536054e87$export$62fda23edba5cc9b = 250;
 function $6ae556e536054e87$export$62f101a8aa597bf8({
   depict_api_: depict_api_,
   search_field_value_: [get_search_field_value],
@@ -596,7 +595,7 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => write_current_instant_query(value)), $6ae556e536054e87$export$62fda23edba5cc9b);
+    timeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $gVhhF$solidjs.createResource($gVhhF$solidjs.createMemo(() => ({
     // <-- key order important, see comment below
@@ -3089,15 +3088,16 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $gVhhF$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $gVhhF$solidjsweb.memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $gVhhF$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $gVhhF$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $gVhhF$solidjsweb.createComponent((0, $1f3b5fa875714dea$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3117,7 +3117,7 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   })) || []));
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       var _el$ = $gVhhF$solidjsweb.getNextElement($83e616b38be339e4$var$_tmpl$),
@@ -3610,7 +3610,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), (0, $6ae556e536054e87$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3720,7 +3720,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -13834,6 +13835,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location ||= "centered";
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -13851,9 +13853,9 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $d8e94ea381ab57fa$export$828dcdd425fd3231(openModalParams.element);
+  } = $d8e94ea381ab57fa$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -13866,7 +13868,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
   };
   $gVhhF$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      cleanup?.();
       dispose();
     };
     $fd463ff0edb29915$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $fd463ff0edb29915$export$3f238c96c45e6cc6));

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.11";
+export const version = "4.0.13";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -1207,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1323,6 +1323,10 @@ type CenteredLocation = {
 type AlignedLocation = {
   location: "aligned";
   element: HTMLElement;
+  /**
+   * If true, the height of the search field in the modal won't be set to the height of the element we're aligning to
+   */
+  ignoreFieldSize_?: boolean;
 };
 /**
  * How the modal should be opened.
@@ -1339,7 +1343,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.11";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.13";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -490,7 +490,6 @@ function $29ec7cddbe1d3484$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $eea41f703612261b$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=instant-results>`);
-const $eea41f703612261b$export$62fda23edba5cc9b = 250;
 function $eea41f703612261b$export$62f101a8aa597bf8({
   depict_api_: depict_api_,
   search_field_value_: [get_search_field_value],
@@ -515,7 +514,7 @@ function $eea41f703612261b$export$62f101a8aa597bf8({
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($9HbP8$catchify(() => write_current_instant_query(value)), $eea41f703612261b$export$62fda23edba5cc9b);
+    timeout = setTimeout($9HbP8$catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $9HbP8$createResource($9HbP8$createMemo(() => ({
     // <-- key order important, see comment below
@@ -3008,15 +3007,16 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $9HbP8$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $9HbP8$createComponent((0, $9HbP8$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return $9HbP8$memo(() => !!showPlaceholders_())() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $9HbP8$createMemo(() => listings_by_id()[listingId]);
+      const listing = $9HbP8$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $9HbP8$createComponent((0, $4ce5b8892775b62d$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -3036,7 +3036,7 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   })) || []));
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       var _el$ = $9HbP8$getNextElement($44f30a4222ce604b$var$_tmpl$),
@@ -3529,7 +3529,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   $9HbP8$createEffect($9HbP8$on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($9HbP8$catchify(() => setShowStaleListingSuggestions(false)), (0, $eea41f703612261b$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($9HbP8$catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3639,7 +3639,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -13753,6 +13754,7 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location ||= "centered";
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -13770,9 +13772,9 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $4ca91518c9a35379$export$828dcdd425fd3231(openModalParams.element);
+  } = $4ca91518c9a35379$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -13785,7 +13787,7 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
   };
   $9HbP8$createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      cleanup?.();
       dispose();
     };
     $b6d5529b253681aa$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $b6d5529b253681aa$export$3f238c96c45e6cc6));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.11",
+  "version": "4.0.13",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.11";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.13";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
   const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -489,7 +489,6 @@ function $76012c4468a53d1f$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $6e8d48eea3d0469d$var$_tmpl$ = ["<div", ' class="instant-results" style="', '">', "</div>"];
-const $6e8d48eea3d0469d$export$62fda23edba5cc9b = 250;
 function $6e8d48eea3d0469d$export$62f101a8aa597bf8(_ref) {
   let {
     depict_api_: depict_api_,
@@ -515,7 +514,7 @@ function $6e8d48eea3d0469d$export$62f101a8aa597bf8(_ref) {
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($3hooq$depictaiutilishared.catchify(() => write_current_instant_query(value)), $6e8d48eea3d0469d$export$62fda23edba5cc9b);
+    timeout = setTimeout($3hooq$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $3hooq$solidjs.createResource($3hooq$solidjs.createMemo(() => ({
     // <-- key order important, see comment below
@@ -2541,15 +2540,16 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $3hooq$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $3hooq$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $3hooq$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $3hooq$solidjsweb.createComponent((0, $d1e7b96fb13cd1d3$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2573,7 +2573,7 @@ function $f765bad01136eee1$export$c8d7e00464029b45(_ref) {
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       return $3hooq$solidjsweb.ssr($f765bad01136eee1$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "order:" + $3hooq$solidjsweb.escape(itemIndex_(), true), $3hooq$solidjsweb.escape(i18n_.listing_suggestions_()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
@@ -3013,7 +3013,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   $3hooq$solidjs.createEffect($3hooq$solidjs.on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($3hooq$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), (0, $6e8d48eea3d0469d$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($3hooq$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3116,7 +3116,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -12297,6 +12298,7 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location || (openModalParams.location = "centered");
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -12314,9 +12316,9 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $98bd00c15a2e3159$export$828dcdd425fd3231(openModalParams.element);
+  } = $98bd00c15a2e3159$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -12329,7 +12331,8 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
   };
   $3hooq$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      var _cleanup;
+      (_cleanup = cleanup) === null || _cleanup === void 0 || _cleanup();
       dispose();
     };
     $d6ed4dbb6507996d$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $d6ed4dbb6507996d$export$3f238c96c45e6cc6));

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.11";
+export const version = "4.0.13";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -1207,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1323,6 +1323,10 @@ type CenteredLocation = {
 type AlignedLocation = {
   location: "aligned";
   element: HTMLElement;
+  /**
+   * If true, the height of the search field in the modal won't be set to the height of the element we're aligning to
+   */
+  ignoreFieldSize_?: boolean;
 };
 /**
  * How the modal should be opened.
@@ -1339,7 +1343,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.11";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.13";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -405,7 +405,6 @@ function $2d7bad8684bc7f44$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $f7414b949aeabc90$var$_tmpl$ = ["<div", ' class="instant-results" style="', '">', "</div>"];
-const $f7414b949aeabc90$export$62fda23edba5cc9b = 250;
 function $f7414b949aeabc90$export$62f101a8aa597bf8(_ref) {
   let {
     depict_api_: depict_api_,
@@ -431,7 +430,7 @@ function $f7414b949aeabc90$export$62f101a8aa597bf8(_ref) {
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($b8hua$catchify(() => write_current_instant_query(value)), $f7414b949aeabc90$export$62fda23edba5cc9b);
+    timeout = setTimeout($b8hua$catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $b8hua$createResource($b8hua$createMemo(() => ({
     // <-- key order important, see comment below
@@ -2457,15 +2456,16 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
     itemIndex_: itemIndex_,
     selected_index_: selected_index_,
     modalLayoutStacked_: modalLayoutStacked_,
+    showPlaceholders_: showPlaceholders_,
     currently_showing_suggestions_: [, set_currently_showing_suggestions]
   } = _ref;
   const listings_by_id = $b8hua$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $b8hua$createComponent((0, $b8hua$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $b8hua$createMemo(() => listings_by_id()[listingId]);
+      const listing = $b8hua$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $b8hua$createComponent((0, $26db6925469636a4$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2489,7 +2489,7 @@ function $ab401afaded322ab$export$c8d7e00464029b45(_ref) {
   return $b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       var _listing_suggestions_2;
-      return (_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length;
+      return ((_listing_suggestions_2 = listing_suggestions_()) === null || _listing_suggestions_2 === void 0 ? void 0 : _listing_suggestions_2.length) || showPlaceholders_();
     },
     get children() {
       return $b8hua$ssr($ab401afaded322ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "order:" + $b8hua$escape(itemIndex_(), true), $b8hua$escape(i18n_.listing_suggestions_()), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
@@ -2929,7 +2929,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   $b8hua$createEffect($b8hua$on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($b8hua$catchify(() => setShowStaleListingSuggestions(false)), (0, $f7414b949aeabc90$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($b8hua$catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -3032,7 +3032,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -12213,6 +12214,7 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location || (openModalParams.location = "centered");
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -12230,9 +12232,9 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $37e8c97bb6876197$export$828dcdd425fd3231(openModalParams.element);
+  } = $37e8c97bb6876197$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -12245,7 +12247,8 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
   };
   $b8hua$createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      var _cleanup;
+      (_cleanup = cleanup) === null || _cleanup === void 0 || _cleanup();
       dispose();
     };
     $1308a7816c3d4f2d$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $1308a7816c3d4f2d$export$3f238c96c45e6cc6));

package/server/latest/index.cjs

@@ -88,7 +88,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.11";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.13";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $5vyXB$solidjs.createSignal();
   const deparallelizedFetcher = $5vyXB$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -466,7 +466,6 @@ function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $6ae556e536054e87$var$_tmpl$ = ["<div", ' class="instant-results" style="', '">', "</div>"];
-const $6ae556e536054e87$export$62fda23edba5cc9b = 250;
 function $6ae556e536054e87$export$62f101a8aa597bf8({
   depict_api_: depict_api_,
   search_field_value_: [get_search_field_value],
@@ -491,7 +490,7 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => write_current_instant_query(value)), $6ae556e536054e87$export$62fda23edba5cc9b);
+    timeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $5vyXB$solidjs.createResource($5vyXB$solidjs.createMemo(() => ({
     // <-- key order important, see comment below
@@ -2415,15 +2414,16 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $5vyXB$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $5vyXB$solidjs.createMemo(() => listings_by_id()[listingId]);
+      const listing = $5vyXB$solidjs.createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $5vyXB$solidjsweb.createComponent((0, $1f3b5fa875714dea$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2443,7 +2443,7 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
   })) || []));
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       return $5vyXB$solidjsweb.ssr($83e616b38be339e4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "order:" + $5vyXB$solidjsweb.escape(itemIndex_(), true), $5vyXB$solidjsweb.escape(i18n_.listing_suggestions_()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
@@ -2869,7 +2869,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   $5vyXB$solidjs.createEffect($5vyXB$solidjs.on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), (0, $6ae556e536054e87$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -2972,7 +2972,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -11427,6 +11428,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location ||= "centered";
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -11444,9 +11446,9 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $d8e94ea381ab57fa$export$828dcdd425fd3231(openModalParams.element);
+  } = $d8e94ea381ab57fa$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -11459,7 +11461,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
   };
   $5vyXB$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      cleanup?.();
       dispose();
     };
     $fd463ff0edb29915$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $fd463ff0edb29915$export$3f238c96c45e6cc6));

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.11";
+export const version = "4.0.13";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -1207,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1323,6 +1323,10 @@ type CenteredLocation = {
 type AlignedLocation = {
   location: "aligned";
   element: HTMLElement;
+  /**
+   * If true, the height of the search field in the modal won't be set to the height of the element we're aligning to
+   */
+  ignoreFieldSize_?: boolean;
 };
 /**
  * How the modal should be opened.
@@ -1339,7 +1343,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.11";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.13";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $i7OB2$createSignal();
   const deparallelizedFetcher = $i7OB2$deparallelize_no_drop(async dependencyValue => {
@@ -385,7 +385,6 @@ function $29ec7cddbe1d3484$var$deep_equal(obj1, obj2) {
   return true;
 }
 var $eea41f703612261b$var$_tmpl$ = ["<div", ' class="instant-results" style="', '">', "</div>"];
-const $eea41f703612261b$export$62fda23edba5cc9b = 250;
 function $eea41f703612261b$export$62f101a8aa597bf8({
   depict_api_: depict_api_,
   search_field_value_: [get_search_field_value],
@@ -410,7 +409,7 @@ function $eea41f703612261b$export$62f101a8aa597bf8({
       // don't wait if it's the first request
       write_current_instant_query(value);
     clearTimeout(timeout);
-    timeout = setTimeout($i7OB2$catchify(() => write_current_instant_query(value)), $eea41f703612261b$export$62fda23edba5cc9b);
+    timeout = setTimeout($i7OB2$catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $i7OB2$createResource($i7OB2$createMemo(() => ({
     // <-- key order important, see comment below
@@ -2334,15 +2333,16 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   itemIndex_: itemIndex_,
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
+  showPlaceholders_: showPlaceholders_,
   currently_showing_suggestions_: [, set_currently_showing_suggestions]
 }) {
   const listings_by_id = $i7OB2$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $i7OB2$createComponent((0, $i7OB2$For), {
     get each() {
-      return Object.keys(listings_by_id());
+      return showPlaceholders_() ? [,,,] : Object.keys(listings_by_id());
     },
     children: (listingId, index) => {
-      const listing = $i7OB2$createMemo(() => listings_by_id()[listingId]);
+      const listing = $i7OB2$createMemo(() => listingId == undefined ? undefined : listings_by_id()[listingId]);
       return $i7OB2$createComponent((0, $4ce5b8892775b62d$export$67152d26d4f56ee8), {
         listing_: listing,
         i18n_: i18n_,
@@ -2362,7 +2362,7 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   })) || []));
   return $i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
-      return listing_suggestions_()?.length;
+      return listing_suggestions_()?.length || showPlaceholders_();
     },
     get children() {
       return $i7OB2$ssr($44f30a4222ce604b$var$_tmpl$, $i7OB2$ssrHydrationKey(), "order:" + $i7OB2$escape(itemIndex_(), true), $i7OB2$escape(i18n_.listing_suggestions_()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
@@ -2788,7 +2788,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   $i7OB2$createEffect($i7OB2$on(get_search_field_value_, () => {
     setShowStaleListingSuggestions(true);
     clearTimeout(listingSuggestionsDebounceTimeout);
-    listingSuggestionsDebounceTimeout = setTimeout($i7OB2$catchify(() => setShowStaleListingSuggestions(false)), (0, $eea41f703612261b$export$62fda23edba5cc9b));
+    listingSuggestionsDebounceTimeout = setTimeout($i7OB2$catchify(() => setShowStaleListingSuggestions(false)), 350);
   }, {
     defer: true
   }));
@@ -2891,7 +2891,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 },
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
-                modalLayoutStacked_: modalLayoutStacked_
+                modalLayoutStacked_: modalLayoutStacked_,
+                showPlaceholders_: () => !suggestions_response_.latest
               });
             }
           });
@@ -11346,6 +11347,7 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
     search: search,
     makesNewSearch = true
   } = openModalParams;
+  let cleanup;
   openModalParams.location ||= "centered";
   if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
   if (openModalParams.location !== "aligned") {
@@ -11363,9 +11365,9 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
     }];
     return;
   }
-  const {
+  if (!openModalParams.ignoreFieldSize_) ({
     cleanup: cleanup
-  } = $4ca91518c9a35379$export$828dcdd425fd3231(openModalParams.element);
+  } = $4ca91518c9a35379$export$828dcdd425fd3231(openModalParams.element));
   let dispose_aligner;
   /**
   * Setting position to fixed is important to make the modal work with align_field.
@@ -11378,7 +11380,7 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
   };
   $i7OB2$createRoot(dispose => {
     dispose_aligner = () => {
-      cleanup();
+      cleanup?.();
       dispose();
     };
     $b6d5529b253681aa$export$b3ad617e9036868(alignmentSignals_, openModalParams.element, (0, $b6d5529b253681aa$export$3f238c96c45e6cc6));