@depict-ai/ui 4.0.7 → 4.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,6 +35,8 @@ $parcel$export(module.exports, "decode_sorting", () => $a68b73fd7ba0853f$export$
35
35
  $parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $28535bb7671c63d1$export$d7b7ab832c20e2f4);
36
36
  $parcel$export(module.exports, "ListingProvider", () => $d067f3a30f047b41$export$e68cff63f76bd15b);
37
37
  $parcel$export(module.exports, "useListing", () => $d067f3a30f047b41$export$8d0c4fdbb05a2f2e);
38
+ $parcel$export(module.exports, "ProductCardIndexProvider", () => $b54645378dfc7280$export$11354f017ddc9790);
39
+ $parcel$export(module.exports, "useProductCardIndex", () => $b54645378dfc7280$export$e3faf4d95300054f);
38
40
  $parcel$export(module.exports, "ShopifyContainedImage", () => $28535bb7671c63d1$export$e4b984597b71e989);
39
41
  $parcel$export(module.exports, "SlidableItems", () => $ad8ec7729fffeb9c$export$6649caad96ef8870);
40
42
  $parcel$export(module.exports, "make_accurate_width_accessor", () => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd);
@@ -92,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
92
94
  $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
93
95
  $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
94
96
  /*! Depict.ai search and product listing SDK */
95
- const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.7";
97
+ const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.9";
96
98
  function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
97
99
  const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
98
100
  const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -343,6 +345,20 @@ function $e82d0d417fa613e8$var$unwrapping_helper(elements) {
343
345
  } else if (typeof elements == "function") result.push(...$e82d0d417fa613e8$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
344
346
  return result;
345
347
  }
348
+ const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$3hooq$solidjs.createContext();
349
+ function $b54645378dfc7280$export$11354f017ddc9790(props) {
350
+ return $3hooq$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
351
+ get value() {
352
+ return props.index_;
353
+ },
354
+ get children() {
355
+ return props.children;
356
+ }
357
+ });
358
+ }
359
+ function $b54645378dfc7280$export$e3faf4d95300054f() {
360
+ return $3hooq$solidjs.useContext($b54645378dfc7280$var$ProductCardIndexContext);
361
+ }
346
362
  let $76012c4468a53d1f$var$printedCloneError = false;
347
363
  function $76012c4468a53d1f$export$7f8bd308237ab5a5(get_displays_) {
348
364
  const displays_by_key_ = $3hooq$solidjs.createMemo(() => {
@@ -400,9 +416,22 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
400
416
  $3hooq$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
401
417
  }
402
418
  }
403
- return product_card_template_(display, {
404
- set_on_index_change: fn => $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() => fn(index())))
419
+ let renderingResult;
420
+ // Wrap the product card in a ProductCardIndexProvider so that the index is available to the product card
421
+ // This is wo we can do intelligent image loading in ShopifyContainedImage without shopify devs having to pass in the index
422
+ // We don't care about the return value of ProductCardIndexProvider because our rendering result might be a promise which solid doesn't support until it has gone through createResource
423
+ $b54645378dfc7280$export$11354f017ddc9790({
424
+ index_: index,
425
+ get children() {
426
+ // This is the key - the functions called inside of the children getter of the provider are the one that have the context defined in their solid-internal Owner
427
+ renderingResult = product_card_template_(display, {
428
+ set_on_index_change: fn => $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() => fn(index())))
429
+ });
430
+ return undefined; // just to satisfy the typing
431
+ }
405
432
  });
433
+ // renderingResult is guaranteed to be defined here (if rendering returned something) because the children getter of ProductCardIndexProvider is called synchronously (createRenderEffect is used solid-internally)
434
+ return renderingResult;
406
435
  });
407
436
  const node_accessor = $e82d0d417fa613e8$export$2f0cbfbb4354bb52(product_card_resource);
408
437
  $3hooq$solidjs.createEffect(() => {
@@ -427,7 +456,8 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
427
456
  });
428
457
  return [
429
458
  // Show content block before product card, so it's *at* that index
430
- possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
459
+ possible_content_block, node_accessor // Don't return product_card_resource as calling it could be creating the nodes which would mean we'd be double-creating the nodes,
460
+ ]; // Regarding the as unknown shenanigans: https://github.com/solidjs/solid/releases/tag/v1.7.0
431
461
  }
432
462
  });
433
463
  }
@@ -1934,6 +1964,34 @@ var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</di
1934
1964
  function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
1935
1965
  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape("s-image-container", true), true)).concat($3hooq$solidjsweb.escape(props.class, true) || ""), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.escape(props.children));
1936
1966
  }
1967
+ let $e4e98e5080f4386e$var$browserIsBugged = false;
1968
+ function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
1969
+ let {
1970
+ timeout: timeout
1971
+ } = _ref;
1972
+ if ($e4e98e5080f4386e$var$browserIsBugged) timeout /= 4;
1973
+ const cancel = () => {
1974
+ cancelIdleCallback(idleHandle);
1975
+ clearTimeout(racingTimeout);
1976
+ };
1977
+ const idleHandle = requestIdleCallback(deadline => {
1978
+ cancel();
1979
+ return callback(deadline);
1980
+ }, {
1981
+ timeout: timeout
1982
+ });
1983
+ const racingTimeout = setTimeout(() => {
1984
+ $e4e98e5080f4386e$var$browserIsBugged = true;
1985
+ cancel();
1986
+ callback({
1987
+ didTimeout: false,
1988
+ timeRemaining() {
1989
+ return 500;
1990
+ }
1991
+ });
1992
+ }, timeout + 1000);
1993
+ return cancel;
1994
+ }
1937
1995
  function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
1938
1996
  const [size, setSize] = $3hooq$solidjs.createSignal(0);
1939
1997
  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
@@ -1961,23 +2019,11 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
1961
2019
  }
1962
2020
  const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
1963
2021
  const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
2022
+ const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
1964
2023
  function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
1965
- // Enable reactive props
1966
- const otherOptions = $3hooq$solidjs.createMemo(() => {
1967
- const cloned_props = {
1968
- ...props
1969
- };
1970
- delete cloned_props.resolutions;
1971
- // @ts-ignore
1972
- delete cloned_props.size;
1973
- // @ts-ignore
1974
- delete cloned_props.src;
1975
- return cloned_props;
1976
- });
1977
2024
  const src_options = $3hooq$solidjs.createMemo(() => {
1978
- const src = new URL(props.src, location.origin);
1979
- const fallback_src = $858fdcf73148519f$var$generateImageUrl(src, 400);
1980
- const srcset = $858fdcf73148519f$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
2025
+ const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
2026
+ const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
1981
2027
  // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
1982
2028
  return {
1983
2029
  srcset: srcset,
@@ -1986,19 +2032,35 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
1986
2032
  });
1987
2033
  // Work around https://github.com/solidjs/solid/issues/1828
1988
2034
  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
2035
+ const [, otherAttributes] = $3hooq$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
1989
2036
  const [hasSetSize, setHasSetSize] = $3hooq$solidjs.createSignal(false);
1990
2037
  const [hasDecoded, setHasDecoded] = $3hooq$solidjs.createSignal(false);
2038
+ const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
1991
2039
  const sizePX = $3hooq$solidjs.createMemo(() => "".concat(props.size(), "px")); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
1992
2040
  const listingContext = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
2041
+ const isPrioritisedImage = $3hooq$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
2042
+ const shouldActuallyEnableLazyLoading = $3hooq$solidjs.createMemo(() => {
2043
+ const {
2044
+ loading: loading
2045
+ } = props;
2046
+ if (loading === "force-lazy") return true;
2047
+ return loading === "lazy" && !isPrioritisedImage();
2048
+ });
2049
+ const modifiedOtherAttributes = $3hooq$solidjs.mergeProps(otherAttributes, {
2050
+ get loading() {
2051
+ return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
2052
+ }
2053
+ });
1993
2054
  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
1994
2055
  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
1995
2056
  const executeWhenIdleBatched = fn => {
1996
2057
  if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
2058
+ if ($3hooq$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
1997
2059
  const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
1998
2060
  if (existingStack) return existingStack.add(fn);
1999
2061
  const newStack = new Set([fn]);
2000
2062
  if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
2001
- const processStackWhenIdle = () => requestIdleCallback(deadline => {
2063
+ const processStackWhenIdle = () => $e4e98e5080f4386e$export$2972b890694ced75($3hooq$depictaiutilishared.catchify(deadline => {
2002
2064
  const start = performance.now();
2003
2065
  const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
2004
2066
  for (const fn of newStack) {
@@ -2013,7 +2075,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2013
2075
  }
2014
2076
  // Stack is empty
2015
2077
  if (listingContext) delete listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
2016
- }, {
2078
+ }), {
2017
2079
  timeout: 15000
2018
2080
  } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
2019
2081
  );
@@ -2027,7 +2089,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2027
2089
  img.classList.add("s-responsive-image");
2028
2090
  if (listingContext) {
2029
2091
  let prevValue;
2030
- const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new (0, $3hooq$depictaiutilishared.ListenableSet)());
2092
+ const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
2093
+ const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $3hooq$solidjs.createSignal());
2031
2094
  img.addEventListener("load", $3hooq$depictaiutilishared.catchify(() => {
2032
2095
  // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
2033
2096
  const aspectRatio_ = img.naturalWidth / img.naturalHeight;
@@ -2037,13 +2100,22 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2037
2100
  } : undefined;
2038
2101
  if (newValue) aspectRatios.add(newValue);
2039
2102
  prevValue = newValue;
2103
+ // Do all calculations resulting of an update directly, for performance
2104
+ const asArray = [...aspectRatios].map(_ref2 => {
2105
+ let {
2106
+ aspectRatio_: aspectRatio_
2107
+ } = _ref2;
2108
+ return aspectRatio_;
2109
+ });
2110
+ const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
2111
+ setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
2040
2112
  }));
2041
2113
  $3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
2042
2114
  }
2043
2115
  $3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
2044
- $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(otherOptions), false, true);
2116
+ $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(modifiedOtherAttributes), false, true);
2045
2117
  $3hooq$solidjs.createEffect(() => {
2046
- if (!props.size()) return; // wait until we have a size
2118
+ if (!props.size()) return; // wait until we have a size, run every time the size changes
2047
2119
  if (timeoutSet) return;
2048
2120
  const handler = $3hooq$depictaiutilishared.catchify(() => {
2049
2121
  if (gotCleanedUp) return;
@@ -2068,7 +2140,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2068
2140
  // We can do this because there has to be a container around us giving us a size
2069
2141
  // No need to listen if we're already in the DOM
2070
2142
  if (hasDecodedFastPath) return;
2071
- if (props.loading === "lazy") {
2143
+ if (shouldActuallyEnableLazyLoading()) {
2072
2144
  // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
2073
2145
  // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
2074
2146
  setHasDecoded(true);
@@ -2095,9 +2167,10 @@ function $858fdcf73148519f$var$make_srcset(url, resolutions) {
2095
2167
  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
2096
2168
  }
2097
2169
  function $858fdcf73148519f$var$generateImageUrl(url, width) {
2098
- // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
2099
- url.searchParams.set("width", width);
2100
- return url.href;
2170
+ // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
2171
+ // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
2172
+ // That way we can just to string concatenation which is insanely fast
2173
+ return url + "&width=" + encodeURIComponent(width);
2101
2174
  }
2102
2175
  const $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$3hooq$solidjs.createSignal();
2103
2176
  const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2107,41 +2180,23 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
2107
2180
  // create a signal that's the same for all items in this listing
2108
2181
  context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $3hooq$solidjs.createSignal();
2109
2182
  const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
2110
- const aspectRatiosSet = context ? context[(0, $858fdcf73148519f$export$f8945274f08a3105)] || (context[(0, $858fdcf73148519f$export$f8945274f08a3105)] = new (0, $3hooq$depictaiutilishared.ListenableSet)()) : undefined;
2111
- const [aspectRatios, setAspectRatios] = $3hooq$solidjs.createSignal(aspectRatiosSet, {
2112
- equals: false
2113
- });
2114
- const aspectRatioToUse = $3hooq$solidjs.createMemo(() => {
2115
- const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
2116
- useMostPrevalentAspectRatio: {
2117
- if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
2118
- // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
2119
- const asArray = [...aspectRatiosSet].map(_ref => {
2120
- let {
2121
- aspectRatio_: aspectRatio_
2122
- } = _ref;
2123
- return aspectRatio_;
2124
- });
2125
- const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
2126
- if (mostPrevalentAspectRatio) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
2127
- }
2128
- return props.aspectRatio;
2129
- });
2130
- const container = $3hooq$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
2131
- get aspectRatio() {
2132
- return aspectRatioToUse();
2133
- },
2134
- get ["class"]() {
2183
+ const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $3hooq$solidjs.createSignal()) : [];
2184
+ const container = $ce467edb5343cfcd$export$94026ee33dbabc26({
2185
+ // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
2186
+ get class() {
2135
2187
  return props.class;
2188
+ },
2189
+ get aspectRatio() {
2190
+ if (props.autoAdjustAspectRatio) {
2191
+ const targetRatio = mostPrevalentAspectRatio === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
2192
+ if (targetRatio != undefined) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
2193
+ }
2194
+ return props.aspectRatio;
2136
2195
  }
2137
2196
  });
2138
2197
  const owner = $3hooq$solidjs.getOwner();
2139
2198
  let createdSizeAccessor = false;
2140
2199
  let wasCleanedUp = false;
2141
- for (const event of ["add", "delete"]) {
2142
- aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
2143
- $3hooq$solidjs.onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
2144
- }
2145
2200
  $3hooq$solidjs.createEffect(() => {
2146
2201
  if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
2147
2202
  // ensure we always have a size accessor
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
10
10
  import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
11
11
  import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
12
12
  import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
13
- export const version = "4.0.7";
13
+ export const version = "4.0.9";
14
14
  export type ModalAlignmentSignals = {
15
15
  body_: Signal<JSX.CSSProperties>;
16
16
  field_: Signal<JSX.CSSProperties>;
@@ -388,6 +388,17 @@ export function ImageContainer(props: {
388
388
  class?: string;
389
389
  children?: JSX.Element;
390
390
  }): HTMLDivElement;
391
+ /**
392
+ * Provider to wrap every product card that gets rendered in (in PLPResults rendering internals), enables using useProductCardIndex anywhere inside the product card to get the index of the product card.
393
+ */
394
+ export function ProductCardIndexProvider(props: {
395
+ children: JSX.Element;
396
+ index_: Accessor<number>;
397
+ }): JSX.Element;
398
+ /**
399
+ * Use this to get an accessor containing the index of your product card.
400
+ */
401
+ export function useProductCardIndex(): Accessor<number> | undefined;
391
402
  /**
392
403
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
393
404
  */
@@ -395,6 +406,7 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
395
406
  /**
396
407
  * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
397
408
  * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
409
+ * If ran within Depict product card rendering, within one of the first 8 product cards, those images will be loaded immediately and loading="lazy" will be ignored for them (unless you set it to "force-lazy").
398
410
  * This is used for our responsive images:
399
411
  * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
400
412
  * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
@@ -404,8 +416,9 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
404
416
  export function ShopifyResponsiveImg(props: {
405
417
  resolutions?: number[];
406
418
  size: Accessor<number>;
407
- } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
419
+ } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
408
420
  src: string;
421
+ loading?: "eager" | "lazy" | "force-lazy";
409
422
  }): JSX.Element;
410
423
  type ImagePlaceholderBaseOptions = {
411
424
  style?: JSX.CSSProperties;
@@ -1194,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
1194
1207
  on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
1195
1208
  content_blocks_by_row?: ContentBlocksByRow;
1196
1209
  layout?: PossibleLayout;
1197
- }): import("@depict-ai/utilishared").Node_Array;
1210
+ }): import("@depict-ai/utilishared/latest").Node_Array;
1198
1211
  export function BreadCrumbs<T extends Display>({
1199
1212
  depict_category
1200
1213
  }: {
@@ -1326,7 +1339,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
1326
1339
  * Open the modal with support for alignment.
1327
1340
  * @returns {void}
1328
1341
  */
1329
- export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
1342
+ export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
1330
1343
  export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
1331
1344
  export interface PageReplacer {
1332
1345
  readonly render_: () => Node_Array;