@depict-ai/ui 4.7.29 → 4.7.31

package/server/latest/index.cjs

@@ -1,8 +1,8 @@
 var $5vyXB$depictaiutilishared = require("@depict-ai/utilishared/latest");
-var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
-var $5vyXB$solidjs = require("solid-js");
 var $5vyXB$solidjsweb = require("solid-js/web");
+var $5vyXB$solidjs = require("solid-js");
 var $5vyXB$solidjsstore = require("solid-js/store");
+var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 require("../../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -12,6 +12,7 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "remap_blocks_to_index", () => $d92f338ba8f9da9b$export$92aa5d691d588f3f);
 $parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
 $parcel$export(module.exports, "useSlidableInformation", () => $a0e53f99354809d9$export$eaa625fb39439e37);
@@ -104,7 +105,237 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.29";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.31";
+function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
+  const signal = $5vyXB$solidjs.createSignal(false);
+  $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
+    matches: matches
+  }) => signal[1](matches)).remove);
+  return signal[0];
+}
+function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $5vyXB$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
+    const media_query = $5vyXB$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $5vyXB$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
+      return n_cols_currently_showing;
+    } catch (e) {
+      $5vyXB$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+var $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+  // Work around https://github.com/solidjs/solid/issues/1980
+  return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape(props.class, true) || ""} depict-placeholder`, $5vyXB$solidjsweb.ssrStyle(props.style));
+}
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $5vyXB$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio
+    } = props;
+    const is_image = aspectRatio != undefined;
+    const size_data = is_image ? {
+      width: "100%",
+      "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
+function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+  content_blocks_: incoming_content_blocks,
+  cols_at_size_: cols_at_size_,
+  set_top_row_shortened_by_: set_top_row_shortened_by_
+}) {
+  // these are by row
+  const [content_blocks, set_content_blocks] = $5vyXB$solidjsstore.createStore([]);
+  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
+  $5vyXB$solidjs.createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    set_content_blocks($5vyXB$solidjsstore.reconcile(incoming_value, {
+      key: "content"
+    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
+  });
+
+  const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $5vyXB$solidjs.createComputed(() => {
+    // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
+    const top_row_block = get_wrapped_blocks_()[0];
+    const blocks_in_top_row_taken = top_row_block?.span_columns;
+    if (blocks_in_top_row_taken == undefined) {
+      // Fall back to zero if no content block in top row, since then no blocks in top row are taken
+      set_top_row_shortened_by_(0);
+      return;
+    }
+    set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
+  });
+
+  return $5vyXB$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+    wrapped_blocks_: get_wrapped_blocks_(),
+    n_cols_currently_showing_: n_cols_currently_showing_()
+  }).content_blocks_by_index_);
+}
+function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+  wrapped_blocks_: wrapped_blocks_,
+  n_cols_currently_showing_: n_cols_currently_showing_
+}) {
+  // This computation should be quite cheap since it just moves around things into an array
+  const content_blocks_by_index_ = [];
+  const constructed_block_arrays = new WeakSet();
+  // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  if (!n_cols_currently_showing_)
+    // Nope out of here if we don't know how many columns are showing
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
+  for (let i = 0; i < wrapped_blocks_.length; i++) {
+    // i = row to show at
+    const block = wrapped_blocks_[i];
+    if (!block) continue; // Array can have holes/not defined places
+    const index_of_first_item_in_row = i * n_cols_currently_showing_;
+    const index_of_last_item_in_row = index_of_first_item_in_row + n_cols_currently_showing_;
+    const {
+      span_rows: span_rows,
+      position: position,
+      span_columns: span_columns
+    } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
+    let target_index;
+    if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((n_cols_currently_showing_ - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
+    // Calculate displacement of us by content blocks above us
+    let displacement_by_added_blocks = 0;
+    for (let j = 0; j < i; j++) {
+      const row = displaced_products_[j];
+      if (row === undefined) continue; // there were no blocks in this row
+      let displaced_items_in_row;
+      if (typeof row === "number") displaced_items_in_row = row;else {
+        displaced_items_in_row = row.filter(item => item).length;
+        displaced_products_[j] = displaced_items_in_row;
+      }
+      displacement_by_added_blocks += displaced_items_in_row;
+    }
+    const index_of_us_in_row = target_index - index_of_first_item_in_row;
+    for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products_[i]?.[j])
+      // Add blocks in our *current* row to the displacement, but only the ones to our left
+      displacement_by_added_blocks++;
+    // Add block to output array at the correct index
+    const final_target_index = target_index - displacement_by_added_blocks;
+    const existing_block = content_blocks_by_index_[final_target_index];
+    const block_content = block.content;
+    // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
+    if (existing_block) {
+      if (constructed_block_arrays.has(existing_block))
+        // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
+        existing_block.push(block_content);else {
+        const array = [existing_block, block_content];
+        constructed_block_arrays.add(array);
+        content_blocks_by_index_[final_target_index] = array;
+      }
+    } else content_blocks_by_index_[final_target_index] = block_content;
+    // Update displacement
+    for (let j = 0; j < span_rows; j++) {
+      const row = displaced_products_[i + j] ||= [];
+      for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
+    }
+  }
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
+}
+/**
+ * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
+ * Then renders the content and wraps it into a div with the correct styling.
+ * Also caps span_columns to max available columns
+ */
+function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
+  const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
+    if (!block) return;
+    const final_span_columns = $5vyXB$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $5vyXB$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
+    const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(final_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
+    return $5vyXB$solidjs.mergeProps(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
+      get span_columns() {
+        // Cap max width of block to the number of columns available, for everyone downstream
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
+      }
+    });
+  });
+  return get_wrapped_blocks;
+}
+/**
+ * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
+ */
+function $d92f338ba8f9da9b$var$RenderContent(props) {
+  const [resource] = $5vyXB$solidjs.createResource(() => props.content,
+  // Could be reactive
+  fn => fn());
+  $5vyXB$solidjs.createEffect(() => {
+    if (resource.error) console.error("Error in content block rendering", resource.error);
+  });
+  // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+    get fallback() {
+      return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+        width: "100%",
+        height: "max(100%, 400px)"
+      });
+    },
+    children: resource
+  });
+}
 let $8bf678c45948a297$var$elementsHoveredSignal;
 let $8bf678c45948a297$var$consumersSignal;
 function $8bf678c45948a297$export$d4d96868197be50e() {
@@ -1009,49 +1240,6 @@ function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
 function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
   return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-var $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
-function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
-  // Work around https://github.com/solidjs/solid/issues/1980
-  return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape(props.class, true) || ""} depict-placeholder`, $5vyXB$solidjsweb.ssrStyle(props.style));
-}
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $5vyXB$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width,
-      aspectRatio: aspectRatio
-    } = props;
-    const is_image = aspectRatio != undefined;
-    const size_data = is_image ? {
-      width: "100%",
-      "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
-function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
-  const signal = $5vyXB$solidjs.createSignal(false);
-  $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
-    matches: matches
-  }) => signal[1](matches)).remove);
-  return signal[0];
-}
 function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
   const style = $5vyXB$solidjs.createMemo(() => {
     const {
@@ -7943,7 +8131,8 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -9205,196 +9394,6 @@ function $738c3a81fc46a340$export$cb5808ba002cdeed({
     }) : when_filters_closed_cols;
   });
 }
-function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $5vyXB$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
-    const media_query = $5vyXB$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $5vyXB$solidjs.createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
-      return n_cols_currently_showing;
-    } catch (e) {
-      $5vyXB$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
-    }
-  });
-  return n_cols_currently_showing;
-}
-var $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
-function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
-  content_blocks_: incoming_content_blocks,
-  cols_at_size_: cols_at_size_,
-  set_top_row_shortened_by_: set_top_row_shortened_by_
-}) {
-  // these are by row
-  const [content_blocks, set_content_blocks] = $5vyXB$solidjsstore.createStore([]);
-  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
-  $5vyXB$solidjs.createEffect(() => {
-    const incoming_value = incoming_content_blocks();
-    if (!incoming_value) {
-      set_content_blocks([]);
-      return;
-    }
-    set_content_blocks($5vyXB$solidjsstore.reconcile(incoming_value, {
-      key: "content"
-    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
-  });
-
-  const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
-  $5vyXB$solidjs.createComputed(() => {
-    // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
-    const top_row_block = get_wrapped_blocks_()[0];
-    const blocks_in_top_row_taken = top_row_block?.span_columns;
-    if (blocks_in_top_row_taken == undefined) {
-      // Fall back to zero if no content block in top row, since then no blocks in top row are taken
-      set_top_row_shortened_by_(0);
-      return;
-    }
-    set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
-  });
-
-  return $d92f338ba8f9da9b$var$remap_blocks_to_index({
-    get_wrapped_blocks_: get_wrapped_blocks_,
-    n_cols_currently_showing_: n_cols_currently_showing_
-  });
-}
-/**
- * Calculate where to put each of the finished wrapped content blocks. Also limit blocks' max width.
- * @returns an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index
- */
-function $d92f338ba8f9da9b$var$remap_blocks_to_index({
-  get_wrapped_blocks_: get_wrapped_blocks_,
-  n_cols_currently_showing_: n_cols_currently_showing_
-}) {
-  return $5vyXB$solidjs.createMemo(() => {
-    // This computation should be quite cheap since it just moves around things into an array
-    const content_blocks_by_index = [];
-    const constructed_block_arrays = new WeakSet();
-    const wrapped_blocks = get_wrapped_blocks_();
-    const cols_showing = n_cols_currently_showing_();
-    // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-    const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
-    if (!cols_showing)
-      // Nope out of here if we don't know how many columns are showing
-      return content_blocks_by_index;
-    for (let i = 0; i < wrapped_blocks.length; i++) {
-      // i = row to show at
-      const block = wrapped_blocks[i];
-      if (!block) continue; // Array can have holes/not defined places
-      const index_of_first_item_in_row = i * cols_showing;
-      const index_of_last_item_in_row = index_of_first_item_in_row + cols_showing;
-      const {
-        span_rows: span_rows,
-        position: position,
-        span_columns: span_columns
-      } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
-      let target_index;
-      if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((cols_showing - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
-      // Calculate displacement of us by content blocks above us
-      let displacement_by_added_blocks = 0;
-      for (let j = 0; j < i; j++) {
-        const row = displaced_products[j];
-        if (row === undefined) continue; // there were no blocks in this row
-        let displaced_items_in_row;
-        if (typeof row === "number") displaced_items_in_row = row;else {
-          displaced_items_in_row = row.filter(item => item).length;
-          displaced_products[j] = displaced_items_in_row;
-        }
-        displacement_by_added_blocks += displaced_items_in_row;
-      }
-      const index_of_us_in_row = target_index - index_of_first_item_in_row;
-      for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
-        // Add blocks in our *current* row to the displacement, but only the ones to our left
-        displacement_by_added_blocks++;
-      // Add block to output array at the correct index
-      const final_target_index = target_index - displacement_by_added_blocks;
-      const existing_block = content_blocks_by_index[final_target_index];
-      const block_content = block.content;
-      // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
-      if (existing_block) {
-        if (constructed_block_arrays.has(existing_block))
-          // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
-          existing_block.push(block_content);else {
-          const array = [existing_block, block_content];
-          constructed_block_arrays.add(array);
-          content_blocks_by_index[final_target_index] = array;
-        }
-      } else content_blocks_by_index[final_target_index] = block_content;
-      // Update displacement
-      for (let j = 0; j < span_rows; j++) {
-        const row = displaced_products[i + j] ||= [];
-        for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
-      }
-    }
-    return content_blocks_by_index;
-  });
-}
-/**
- * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
- * Then renders the content and wraps it into a div with the correct styling.
- * Also caps span_columns to max available columns
- */
-function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
-  const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
-    if (!block) return;
-    const final_span_columns = $5vyXB$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
-    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
-    const final_span_rows = $5vyXB$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
-    const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
-    const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-      get when() {
-        return !rendering_delayed();
-      },
-      get children() {
-        return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(final_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
-          get content() {
-            return block.content;
-          }
-        })));
-      }
-    });
-    return $5vyXB$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: () => {
-        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
-        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
-        set_rendering_delayed_(false);
-        return content;
-      },
-      get span_columns() {
-        // Cap max width of block to the number of columns available, for everyone downstream
-        return final_span_columns();
-      },
-      get span_rows() {
-        return final_span_rows();
-      }
-    });
-  });
-  return get_wrapped_blocks;
-}
-/**
- * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
- */
-function $d92f338ba8f9da9b$var$RenderContent(props) {
-  const [resource] = $5vyXB$solidjs.createResource(() => props.content,
-  // Could be reactive
-  fn => fn());
-  $5vyXB$solidjs.createEffect(() => {
-    if (resource.error) console.error("Error in content block rendering", resource.error);
-  });
-  // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
-    get fallback() {
-      return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "max(100%, 400px)"
-      });
-    },
-    children: resource
-  });
-}
 var $fe76fb463cc60b89$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $fe76fb463cc60b89$export$3925f87b1545cfc6({
   plp_results_: plp_results_,
@@ -12335,6 +12334,15 @@ function $ef972f5c10b1c5b4$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
+var $32c662f618f5d80d$var$_tmpl$ = ["<a", "><img", ' style="', '"></a>'],
+  $32c662f618f5d80d$var$_tmpl$2 = ["<a", "><video", ' muted="" autoplay="" playsinline="" loop style="', '"></video></a>'];
+function $32c662f618f5d80d$export$780a853d15174484({
+  contentBlock: contentBlock,
+  router_: router_
+}) {
+  if (contentBlock.content.type === "image") return () => $5vyXB$solidjsweb.ssr($32c662f618f5d80d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(contentBlock.content.link, true), false), $5vyXB$solidjsweb.ssrAttribute("src", $5vyXB$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+  if (contentBlock.content.type === "video") return () => $5vyXB$solidjsweb.ssr($32c662f618f5d80d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(contentBlock.content.link, true), false), $5vyXB$solidjsweb.ssrAttribute("src", $5vyXB$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+}
 var $840d88a04b2d22a7$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $840d88a04b2d22a7$var$_tmpl$2 = ["<div", "></div>"],
   $840d88a04b2d22a7$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
@@ -12430,6 +12438,23 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $5vyXB$solidjs.createResource(meta_query_base, $5vyXB$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $5vyXB$solidjs.createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    plp_meta()?.content_blocks?.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $32c662f618f5d80d$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $5vyXB$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -12648,7 +12673,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
             product_card_template_: product_card_template_,
             sort_or_filter_open_: sort_or_filter_open_,
             desktop_filter_elements_: desktop_filter_elements_,
-            content_blocks_by_row_: content_blocks_by_row_,
+            content_blocks_by_row_: contentBlocksByRow,
             ConfiguredScrollStatus_: ConfiguredScrollStatus_,
             id_currently_querying_for_: id_to_query_for_,
             no_results_options_: {